Feature: Component types added.

example/src/pages/button/index.tsx

@@ -3,13 +3,16 @@ import {
     useState
 } from "react";
 import {
+    ScrollView,
     View
 } from "react-native";
 import stylesheet from "./stylesheet";
 import {
     NCoreUIKitLocalize,
+    type IButtonProps,
     NCoreUIKitTheme,
     PageContainer,
+    TextInput,
     Button,
     Header
 } from "ncore-ui-kit";
@@ -20,6 +23,36 @@ import type RootStackParamList from "../../navigation/type";
 import type {
     NativeStackNavigationProp
 } from "@react-navigation/native-stack";
+import {
+    Home as HomeIcon
+} from "lucide-react-native";
+
+const BUTTON_TYPES: Array<IButtonProps["type"]> = [
+    "primary",
+    "danger",
+    "warning",
+    "neutral",
+    "success",
+    "info"
+];
+
+const BUTTON_SPREAD_BEHAVIOURS: Array<IButtonProps["spreadBehaviour"]> = [
+    "baseline",
+    "stretch",
+    "free"
+];
+
+const BUTTON_VARIANTS: Array<IButtonProps["variant"]> = [
+    "filled",
+    "outline",
+    "ghost"
+];
+
+const BUTTON_SIZES: Array<IButtonProps["size"]> = [
+    "small",
+    "medium",
+    "large"
+];
 
 const ButtonPage = () => {
     const {
@@ -35,10 +68,17 @@ const ButtonPage = () => {
 
     const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
 
-    const [
-        variant,
-        setVariant
-    ] = useState<number>(0);
+    const [typeIndex, setTypeIndex] = useState<number>(0);
+    const [spreadIndex, setSpreadIndex] = useState<number>(0);
+    const [variantIndex, setVariantIndex] = useState<number>(0);
+    const [sizeIndex, setSizeIndex] = useState<number>(1);
+    const [title, setTitle] = useState<string>("");
+
+    const [isLoading, setIsLoading] = useState<boolean>(false);
+    const [isDisabled, setIsDisabled] = useState<boolean>(false);
+    const [isCustomPadding, setIsCustomPadding] = useState<boolean>(false);
+    const [showIcon, setShowIcon] = useState<boolean>(false);
+    const [iconDirection, setIconDirection] = useState<"left" | "right">("left");
 
     useLayoutEffect(() => {
         navigation.setOptions({
@@ -52,15 +92,6 @@ const ButtonPage = () => {
         });
     }, []);
 
-    const buttonVariants: Array<"primary" | "danger" | "warning" | "neutral" | "success" | "info"> = [
-        "primary",
-        "danger",
-        "warning",
-        "neutral",
-        "success",
-        "info"
-    ];
-
     return <PageContainer
         isScrollable={false}
         isWorkWithHeaderSpace={false}
@@ -68,40 +99,144 @@ const ButtonPage = () => {
             stylesheet.container
         ]}
     >
-        <View
-            style={[
-                stylesheet.contentContainer
-            ]}
+        <ScrollView
+            style={{ width: "100%", flex: 1 }}
+            contentContainerStyle={{ alignItems: "center", paddingBottom: 50 }}
+            showsVerticalScrollIndicator={false}
         >
             <View
-                style={{
-                    borderColor: colors.content.border.subtle,
-                    marginBottom: spaces.spacingMd,
-                    borderRadius: radiuses.form,
-                    borderWidth: borders.line,
-                    padding: spaces.spacingMd,
-                    minHeight: 120
-                }}
+                style={[
+                    stylesheet.contentContainer
+                ]}
             >
-                <Button
-                    title={`variant = ${buttonVariants[variant]}`}
-                    spreadBehaviour="stretch"
-                    type={buttonVariants[variant]}
+                <View
+                    style={{
+                        borderColor: colors.content.border.subtle,
+                        marginBottom: spaces.spacingMd,
+                        borderRadius: radiuses.form,
+                        borderWidth: borders.line,
+                        padding: spaces.spacingMd,
+                        minHeight: 120,
+                        alignItems: "center",
+                        justifyContent: "center"
+                    }}
+                >
+                    <Button
+                        title={title || "Example Button"}
+                        spreadBehaviour={BUTTON_SPREAD_BEHAVIOURS[spreadIndex]}
+                        type={BUTTON_TYPES[typeIndex]}
+                        variant={BUTTON_VARIANTS[variantIndex]}
+                        size={BUTTON_SIZES[sizeIndex]}
+                        isLoading={isLoading}
+                        isDisabled={isDisabled}
+                        isCustomPadding={isCustomPadding}
+                        iconDirection={iconDirection}
+                        icon={showIcon ? ({ color, size }) => <HomeIcon color={color as string} size={size} /> : undefined}
+                        style={{
+                            marginBottom: spaces.spacingLg
+                        }}
+                        onPress={() => {
+                        }}
+                    />
+                </View>
+                <TextInput
+                    value={title}
+                    onChangeText={setTitle}
+                    placeholder="Enter text"
+                    title="Button Title"
                     style={{
-                        marginBottom: spaces.spacingLg
+                        marginBottom: spaces.spacingMd
                     }}
+                />
+                <Button
+                    title={`Change Type: ${BUTTON_TYPES[typeIndex]}`}
+                    spreadBehaviour="free"
+                    variant="outline"
+                    style={{ marginBottom: spaces.spacingMd }}
                     onPress={() => {
+                        setTypeIndex((typeIndex + 1) % BUTTON_TYPES.length);
+                    }}
+                />
+                <Button
+                    title={`Change Variant: ${BUTTON_VARIANTS[variantIndex]}`}
+                    spreadBehaviour="free"
+                    variant="outline"
+                    style={{ marginBottom: spaces.spacingMd }}
+                    onPress={() => {
+                        setVariantIndex((variantIndex + 1) % BUTTON_VARIANTS.length);
+                    }}
+                />
+                <Button
+                    title={`Change Spread: ${BUTTON_SPREAD_BEHAVIOURS[spreadIndex]}`}
+                    spreadBehaviour="free"
+                    variant="outline"
+                    style={{ marginBottom: spaces.spacingMd }}
+                    onPress={() => {
+                        setSpreadIndex((spreadIndex + 1) % BUTTON_SPREAD_BEHAVIOURS.length);
+                    }}
+                />
+                <Button
+                    title={`Change Size: ${BUTTON_SIZES[sizeIndex]}`}
+                    spreadBehaviour="free"
+                    variant="outline"
+                    style={{ marginBottom: spaces.spacingMd }}
+                    onPress={() => {
+                        setSizeIndex((sizeIndex + 1) % BUTTON_SIZES.length);
+                    }}
+                />
+                <Button
+                    title={`Toggle Icon: ${showIcon ? "ON" : "OFF"}`}
+                    spreadBehaviour="free"
+                    variant="outline"
+                    style={{ marginBottom: spaces.spacingMd }}
+                    icon={showIcon ? ({
+                        size
+                    }) => <HomeIcon
+                        color={"white"}
+                        size={size}
+                    /> : undefined}
+                    onPress={() => {
+                        setShowIcon(!showIcon);
+                    }}
+                />
+                <Button
+                    title={`Toggle Icon Direction: ${iconDirection}`}
+                    spreadBehaviour="free"
+                    variant="outline"
+                    style={{ marginBottom: spaces.spacingMd }}
+                    onPress={() => {
+                        setIconDirection(iconDirection === "left" ? "right" : "left");
+                    }}
+                />
+                <Button
+                    title={`Toggle Loading: ${isLoading ? "ON" : "OFF"}`}
+                    spreadBehaviour="free"
+                    variant="outline"
+                    style={{ marginBottom: spaces.spacingMd }}
+                    onPress={() => {
+                        setIsLoading(!isLoading);
+                    }}
+                />
+                <Button
+                    title={`Toggle Disabled: ${isDisabled ? "ON" : "OFF"}`}
+                    spreadBehaviour="free"
+                    variant="outline"
+                    style={{ marginBottom: spaces.spacingMd }}
+                    onPress={() => {
+                        setIsDisabled(!isDisabled);
+                    }}
+                />
+                <Button
+                    title={`Toggle Custom Padding: ${isCustomPadding ? "ON" : "OFF"}`}
+                    spreadBehaviour="free"
+                    variant="outline"
+                    style={{ marginBottom: spaces.spacingMd }}
+                    onPress={() => {
+                        setIsCustomPadding(!isCustomPadding);
                     }}
                 />
             </View>
-            <Button
-                title="Change Variant"
-                spreadBehaviour="stretch"
-                onPress={() => {
-                    setVariant(variant + 1 > buttonVariants.length - 1 ? 0 : variant + 1);
-                }}
-            />
-        </View>
+        </ScrollView>
     </PageContainer>;
 };
 export default ButtonPage;

src/components/index.ts

@@ -2,19 +2,32 @@ export {
     default as Text
 } from "./text";
 
+export type {
+    default as ITextProps
+} from "./text/type";
+
 export {
     default as Button
 } from "./button";
 
+export type {
+    default as IButtonProps
+} from "./button/type";
+
 export {
     default as PageContainer
 } from "./pageContainer";
 
+export type {
+    default as IPageContainerProps
+} from "./pageContainer/type";
+
 export {
     default as Dialog
 } from "./dialog";
 
 export type {
+    default as IDialogProps,
     IDialogRef
 } from "./dialog/type";
 
@@ -23,6 +36,7 @@ export {
 } from "./modal";
 
 export type {
+    default as IModalProps,
     IModalRef
 } from "./modal/type";
 
@@ -30,11 +44,16 @@ export {
     default as Loading
 } from "./loading";
 
+export type {
+    default as ILoadingProps
+} from "./loading/type";
+
 export {
     default as TextInput
-} from "./textInput";
+} from "./textInput"
 
 export type {
+    default as ITextInputProps,
     ITextInputRef
 } from "./textInput/type";
 
@@ -42,11 +61,16 @@ export {
     default as SelectBox
 } from "./selectBox";
 
+export type {
+    default as ISelectBoxProps
+} from "./selectBox/type";
+
 export {
     default as BottomSheet
 } from "./bottomSheet";
 
 export type {
+    default as IBottomSheetProps,
     IBottomSheetRef
 } from "./bottomSheet/type";
 
@@ -54,23 +78,40 @@ export {
     default as SelectSheet
 } from "./selectSheet";
 
+export type {
+    default as ISelectSheetProps
+} from "./selectSheet/type";
+
 export {
     default as CheckBox
 } from "./checkBox";
 
+export type {
+    default as ICheckBoxProps
+} from "./checkBox/type";
+
 export {
     default as Toast
 } from "./toast";
 
+export type {
+    default as IToastProps
+} from "./toast/type";
+
 export {
     default as SnackBar
 } from "./snackBar";
 
+export type {
+    default as ISnackBarProps
+} from "./snackBar/type";
+
 export {
     default as TextAreaInput
 } from "./textAreaInput";
 
 export type {
+    default as ITextAreaInputProps,
     ITextAreaInputRef
 } from "./textAreaInput/type";
 
@@ -78,18 +119,34 @@ export {
     default as RadioButton
 } from "./radioButton";
 
+export type {
+    default as IRadioButtonProps
+} from "./radioButton/type";
+
 export {
     default as RowCard
 } from "./rowCard";
 
+export type {
+    default as IRowCardProps
+} from "./rowCard/type";
+
 export {
     default as Switch
 } from "./switch";
 
+export type {
+    default as ISwitchProps
+} from "./switch/type";
+
 export {
     default as NotificationIndicator
 } from "./notificationIndicator";
 
+export type {
+    default as INotificationIndicatorProps
+} from "./notificationIndicator/type";
+
 export {
     default as DateTimePicker
 } from "./dateTimePicker";
@@ -99,6 +156,11 @@ export {
 } from "./dateTimeSheet";
 
 export type {
+    default as IDateTimeSheetProps
+} from "./dateTimeSheet/type";
+
+export type {
+    default as IDateTimePickerProps,
     IDateTimePickerRef
 } from "./dateTimePicker/type";
 
@@ -107,6 +169,7 @@ export {
 } from "./dateSelector";
 
 export type {
+    default as IDateSelectorProps,
     IDateSelectorRef
 } from "./dateSelector/type";
 
@@ -114,82 +177,163 @@ export {
     default as NumericInput
 } from "./numericInput";
 
+export type {
+    default as INumericInputProps
+} from "./numericInput/type";
+
 export {
     default as MarkdownViewer
 } from "./markdownViewer";
 
+export type {
+    default as IMarkdownViewerProps
+} from "./markdownViewer/type";
+
 export {
     default as StateCard
 } from "./stateCard";
 
+export type {
+    default as IStateCardProps
+} from "./stateCard/type";
+
 export {
     default as MonthSelector
 } from "./monthSelector";
 
+export type {
+    default as IMonthSelectorProps
+} from "./monthSelector/type";
+
 export {
     default as TimeSelector
 } from "./timeSelector";
 
+export type {
+    default as ITimeSelectorProps
+} from "./timeSelector/type";
+
 export {
     default as Sticker
 } from "./sticker";
 
+export type {
+    default as IStickerProps
+} from "./sticker/type";
+
 export {
     default as Chip
 } from "./chip";
 
+export type {
+    default as IChipProps
+} from "./chip/type";
+
 export {
     default as Header
 } from "./header";
 
+export type {
+    default as IHeaderProps
+} from "./header/type";
+
 export {
     default as ThemeSwitcher
 } from "./themeSwitcher";
 
+export type {
+    default as IThemeSwitcherProps
+} from "./themeSwitcher/type";
+
 export {
     default as PaletteSwitcher
 } from "./paletteSwitcher";
 
+export type {
+    default as IPaletteSwitcherProps
+} from "./paletteSwitcher/type";
+
 export {
     default as Avatar
 } from "./avatar";
 
+export type {
+    default as IAvatarProps
+} from "./avatar/type";
+
 export {
     default as AvatarGroup
 } from "./avatarGroup";
 
+export type {
+    default as IAvatarGroupProps
+} from "./avatarGroup/type";
+
 export {
     default as Menu
 } from "./menu";
 
+export type {
+    default as IMenuProps,
+    IMenuRef
+} from "./menu/type";
+
 export {
     default as MenuButton
 } from "./menu/components/menuButton";
 
+export type {
+    default as IMenuButtonProps
+} from "./menu/components/menuButton/type";
+
 export {
     default as SiteLogo
 } from "./siteLogo";
 
+export type {
+    default as ISiteLogoProps
+} from "./siteLogo/type";
+
 export {
     default as Seperator
 } from "./seperator";
 
+export type {
+    default as ISeperatorProps
+} from "./seperator/type";
+
 export {
     default as EmbeddedMenu
 } from "./embeddedMenu";
 
+export type {
+    default as IEmbeddedMenuProps
+} from "./embeddedMenu/type";
+
 export {
     default as MainHeader
 } from "./mainHeader";
 
+export type {
+    default as IMainHeaderProps
+} from "./mainHeader/type";
+
 export {
     default as HighlightButton
 } from "./highlightButton";
 
+export type {
+    default as IHighlightButtonProps
+} from "./highlightButton/type";
+
 export {
     default as LocaleSwitcher
 } from "./localeSwitcher";
 
+export type {
+    default as ILocaleSwitcherProps
+} from "./localeSwitcher/type";
+
 export type {
     EnterMarkdownTypes,
     CodeMarkdownTypes,

src/index.tsx

@@ -60,20 +60,62 @@ export {
 } from "./components";
 
 export type {
+    INotificationIndicatorProps,
+    IPaletteSwitcherProps,
+    IHighlightButtonProps,
+    IDateTimePickerProps,
+    IMarkdownViewerProps,
+    ILocaleSwitcherProps,
+    IPageContainerProps,
+    ITextAreaInputProps,
+    IMonthSelectorProps,
+    IThemeSwitcherProps,
+    IDateTimeSheetProps,
     IDateTimePickerRef,
+    ITimeSelectorProps,
+    IEmbeddedMenuProps,
+    INumericInputProps,
+    IDateSelectorProps,
     EnterMarkdownTypes,
     ITextAreaInputRef,
+    IBottomSheetProps,
+    IRadioButtonProps,
+    ISelectSheetProps,
+    IAvatarGroupProps,
     CodeMarkdownTypes,
     TextMarkdownTypes,
     IDateSelectorRef,
+    IMainHeaderProps,
+    IMenuButtonProps,
     IBottomSheetRef,
+    ISelectBoxProps,
+    IStateCardProps,
+    ITextInputProps,
+    ISeperatorProps,
     BlockquoteTypes,
+    ISiteLogoProps,
+    ICheckBoxProps,
+    ISnackBarProps,
     MarkdownObject,
+    IStickerProps,
+    ILoadingProps,
     ITextInputRef,
+    IRowCardProps,
     MarkdownKeys,
+    IHeaderProps,
+    IAvatarProps,
+    IButtonProps,
+    ISwitchProps,
+    IDialogProps,
+    IToastProps,
+    IModalProps,
+    IMenuProps,
+    ITextProps,
+    IChipProps,
     IDialogRef,
     ListTypes,
-    IModalRef
+    IModalRef,
+    IMenuRef
 } from "./components";
 
 export {