@refinn/core-ui 0.1.9 → 0.1.10

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import react__default, { HTMLAttributes, ReactNode, ButtonHTMLAttributes, ReactElement, InputHTMLAttributes } from 'react';
+import react__default, { HTMLAttributes, ReactNode, ButtonHTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes } from 'react';
 
 interface AccordionItemData {
     id?: string;
@@ -72,25 +72,6 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 }
 declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
 
-type BottomSheetSize = 'sm' | 'md' | 'lg';
-interface BottomSheetProps extends HTMLAttributes<HTMLSpanElement> {
-    isForceOpen?: boolean;
-    setIsForceOpen?: (val: boolean) => void;
-    isClosedAble?: boolean;
-    children: ReactNode;
-    startModalBtn?: ReactElement<{
-        onClick?: (e: react__default.MouseEvent) => void;
-    }>;
-    stopModalBtn?: ReactElement<{
-        onClick?: (e: react__default.MouseEvent) => void;
-    }>;
-    afterStopBtn?: ReactElement<() => void>;
-    size?: BottomSheetSize;
-    modalTitle: string;
-    modalDesc: string;
-}
-declare const BottomSheet: react__default.ForwardRefExoticComponent<BottomSheetProps & react__default.RefAttributes<HTMLSpanElement>>;
-
 interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
     label?: ReactNode;
     description?: ReactNode;
@@ -114,37 +95,58 @@ interface ChipProps extends HTMLAttributes<HTMLDivElement> {
 }
 declare const Chip: react.ForwardRefExoticComponent<ChipProps & react.RefAttributes<HTMLDivElement>>;
 
-interface DialogProps extends HTMLAttributes<HTMLSpanElement> {
-    isForceOpen?: boolean;
-    setIsForceOpen?: (val: boolean) => void;
-    isClosedAble?: boolean;
-    isCloseIcon?: boolean;
-    children: ReactNode;
-    startModalBtn?: ReactElement<{
-        onClick?: (e: react__default.MouseEvent) => void;
-    }>;
-    stopModalBtn: ReactElement<{
-        onClick?: (e: react__default.MouseEvent) => void;
-    }>;
-    afterStopBtn?: ReactElement<() => void>;
-    p?: string;
-    maxW?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl";
+type DialogDisplay = 'centered' | 'slide-up' | 'full';
+type DialogActionProps = Omit<ButtonProps, 'variant' | 'children'> & {
+    label: ReactNode;
+};
+interface DialogProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    open: boolean;
+    onOpenChange?: (open: boolean) => void;
+    display?: DialogDisplay;
+    artwork?: ReactNode;
+    title?: ReactNode;
+    subtitle?: ReactNode;
+    warning?: boolean;
+    closable?: boolean;
+    backdrop?: boolean;
+    children?: ReactNode;
+    dismiss?: DialogActionProps;
+    secondary?: DialogActionProps;
+    confirm?: DialogActionProps;
+}
+declare const Dialog: react.ForwardRefExoticComponent<DialogProps & react.RefAttributes<HTMLDivElement>>;
+
+type DrawerActionProps = DialogActionProps;
+interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    open: boolean;
+    onOpenChange?: (open: boolean) => void;
+    title?: ReactNode;
+    subtitle?: ReactNode;
+    closable?: boolean;
+    backdrop?: boolean;
+    children?: ReactNode;
+    dismiss?: DrawerActionProps;
+    secondary?: DrawerActionProps;
+    confirm?: DrawerActionProps;
 }
-declare const Dialog: react__default.ForwardRefExoticComponent<DialogProps & react__default.RefAttributes<HTMLSpanElement>>;
+declare const Drawer: react.ForwardRefExoticComponent<DrawerProps & react.RefAttributes<HTMLDivElement>>;
 
 type DropdownSize = "md" | "lg";
+type DropdownVariant = "default" | "combobox";
 interface DropdownItemsInterface {
     label: string;
     value: string;
 }
 interface DropdownProps extends HTMLAttributes<HTMLDivElement> {
     size?: DropdownSize;
+    /** "default" = เลือกจากรายการอย่างเดียว, "combobox" = พิมพ์ค้นหาในช่องได้ */
+    variant?: DropdownVariant;
     error?: string;
     label?: string;
     placeholder?: string;
-    isDisabled?: boolean;
-    isSearchable?: boolean;
-    isTextCenter?: boolean;
+    helperText?: string;
+    disabled?: boolean;
+    textCenter?: boolean;
     value: DropdownItemsInterface;
     setValue: (value: DropdownItemsInterface) => void;
     dropDownItems?: DropdownItemsInterface[];
@@ -177,6 +179,15 @@ interface IconProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
 }
 declare const Icon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<HTMLSpanElement>>;
 
+type IconButtonSize = 'xs' | 's' | 'm' | 'l';
+interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    icon: ReactNode;
+    size?: IconButtonSize;
+    danger?: boolean;
+    'aria-label': string;
+}
+declare const IconButton: react.ForwardRefExoticComponent<IconButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
 type LinkVariant = 'xs' | 'sm' | 'md' | 'lg';
 type LinkStyle = 'brand' | 'white' | 'black' | 'brandLooped' | 'whiteLooped' | 'blackLooped';
 interface LinkProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
@@ -245,37 +256,37 @@ interface TabProps extends HTMLAttributes<HTMLDivElement> {
 }
 declare const Tab: react.ForwardRefExoticComponent<TabProps & react.RefAttributes<HTMLDivElement>>;
 
-interface TextAreaProps extends HTMLAttributes<HTMLTextAreaElement> {
-    maxText?: number;
-    height?: number;
+interface TextAreaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "size" | "prefix"> {
     error?: string;
     label?: string;
     placeholder?: string;
-    description?: string;
-    icon?: string;
-    isDisabled?: boolean;
-    isLoading?: boolean;
-    isVertify?: boolean;
-    isClearable?: boolean;
+    helperText?: string;
+    optional?: boolean;
+    success?: boolean;
+    pending?: boolean;
+    clearable?: boolean;
     disabled?: boolean;
+    showCounter?: boolean;
+    maxLength?: number;
+    height?: number;
     value?: string;
     onChange?: (event: react__default.ChangeEvent<HTMLTextAreaElement>) => void;
 }
 declare const TextArea: react__default.ForwardRefExoticComponent<TextAreaProps & react__default.RefAttributes<HTMLTextAreaElement>>;
 
 type TextFieldSize = "md" | "lg";
-interface TextFieldProps extends InputHTMLAttributes<HTMLInputElement> {
-    inputSize?: TextFieldSize;
+interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "prefix"> {
+    size?: TextFieldSize;
     error?: string;
     label?: string;
     placeholder?: string;
-    description?: string;
-    icon?: ReactNode;
-    isDisabled?: boolean;
-    isLoading?: boolean;
-    isVertify?: boolean;
-    isUnrequired?: boolean;
-    isClearable?: boolean;
+    helperText?: string;
+    prefix?: ReactNode;
+    suffix?: ReactNode;
+    optional?: boolean;
+    success?: boolean;
+    pending?: boolean;
+    clearable?: boolean;
     disabled?: boolean;
     value?: string;
     onChange?: (event: react__default.ChangeEvent<HTMLInputElement>) => void;
@@ -311,4 +322,4 @@ interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
 }
 declare const Tooltip: react__default.ForwardRefExoticComponent<TooltipProps & react__default.RefAttributes<HTMLDivElement>>;
 
-export { Accordion, type AccordionItemData, type AccordionProps, AlertBanner, type AlertBannerProps, Avatar, type AvatarProps, Badge, type BadgeProps, BottomSheet, type BottomSheetProps, Branding, type BrandingProps, Button, type ButtonProps, Checkbox, type CheckboxProps, Chip, type ChipProps, Dialog, type DialogProps, Dropdown, type DropdownItemsInterface, type DropdownProps, FinancialLogo, type FinancialLogoProps, Icon, type IconProps, Link, type LinkProps, Loading, type LoadingProps, Radio, type RadioProps, SegmentControl, type SegmentControlProps, Slider, type SliderProps, Tab, type TabProps, TextArea, type TextAreaProps, TextField, type TextFieldProps, Toast, type ToastProps, ToggleSwitch, type ToggleSwitchProps, Tooltip, type TooltipProps };
+export { Accordion, type AccordionItemData, type AccordionProps, AlertBanner, type AlertBannerProps, Avatar, type AvatarProps, Badge, type BadgeProps, Branding, type BrandingProps, Button, type ButtonProps, Checkbox, type CheckboxProps, Chip, type ChipProps, Dialog, type DialogActionProps, type DialogDisplay, type DialogProps, Drawer, type DrawerActionProps, type DrawerProps, Dropdown, type DropdownItemsInterface, type DropdownProps, FinancialLogo, type FinancialLogoProps, Icon, IconButton, type IconButtonProps, type IconProps, Link, type LinkProps, Loading, type LoadingProps, Radio, type RadioProps, SegmentControl, type SegmentControlProps, Slider, type SliderProps, Tab, type TabProps, TextArea, type TextAreaProps, TextField, type TextFieldProps, Toast, type ToastProps, ToggleSwitch, type ToggleSwitchProps, Tooltip, type TooltipProps };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import react__default, { HTMLAttributes, ReactNode, ButtonHTMLAttributes, ReactElement, InputHTMLAttributes } from 'react';
+import react__default, { HTMLAttributes, ReactNode, ButtonHTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes } from 'react';
 
 interface AccordionItemData {
     id?: string;
@@ -72,25 +72,6 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 }
 declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
 
-type BottomSheetSize = 'sm' | 'md' | 'lg';
-interface BottomSheetProps extends HTMLAttributes<HTMLSpanElement> {
-    isForceOpen?: boolean;
-    setIsForceOpen?: (val: boolean) => void;
-    isClosedAble?: boolean;
-    children: ReactNode;
-    startModalBtn?: ReactElement<{
-        onClick?: (e: react__default.MouseEvent) => void;
-    }>;
-    stopModalBtn?: ReactElement<{
-        onClick?: (e: react__default.MouseEvent) => void;
-    }>;
-    afterStopBtn?: ReactElement<() => void>;
-    size?: BottomSheetSize;
-    modalTitle: string;
-    modalDesc: string;
-}
-declare const BottomSheet: react__default.ForwardRefExoticComponent<BottomSheetProps & react__default.RefAttributes<HTMLSpanElement>>;
-
 interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
     label?: ReactNode;
     description?: ReactNode;
@@ -114,37 +95,58 @@ interface ChipProps extends HTMLAttributes<HTMLDivElement> {
 }
 declare const Chip: react.ForwardRefExoticComponent<ChipProps & react.RefAttributes<HTMLDivElement>>;
 
-interface DialogProps extends HTMLAttributes<HTMLSpanElement> {
-    isForceOpen?: boolean;
-    setIsForceOpen?: (val: boolean) => void;
-    isClosedAble?: boolean;
-    isCloseIcon?: boolean;
-    children: ReactNode;
-    startModalBtn?: ReactElement<{
-        onClick?: (e: react__default.MouseEvent) => void;
-    }>;
-    stopModalBtn: ReactElement<{
-        onClick?: (e: react__default.MouseEvent) => void;
-    }>;
-    afterStopBtn?: ReactElement<() => void>;
-    p?: string;
-    maxW?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl";
+type DialogDisplay = 'centered' | 'slide-up' | 'full';
+type DialogActionProps = Omit<ButtonProps, 'variant' | 'children'> & {
+    label: ReactNode;
+};
+interface DialogProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    open: boolean;
+    onOpenChange?: (open: boolean) => void;
+    display?: DialogDisplay;
+    artwork?: ReactNode;
+    title?: ReactNode;
+    subtitle?: ReactNode;
+    warning?: boolean;
+    closable?: boolean;
+    backdrop?: boolean;
+    children?: ReactNode;
+    dismiss?: DialogActionProps;
+    secondary?: DialogActionProps;
+    confirm?: DialogActionProps;
+}
+declare const Dialog: react.ForwardRefExoticComponent<DialogProps & react.RefAttributes<HTMLDivElement>>;
+
+type DrawerActionProps = DialogActionProps;
+interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    open: boolean;
+    onOpenChange?: (open: boolean) => void;
+    title?: ReactNode;
+    subtitle?: ReactNode;
+    closable?: boolean;
+    backdrop?: boolean;
+    children?: ReactNode;
+    dismiss?: DrawerActionProps;
+    secondary?: DrawerActionProps;
+    confirm?: DrawerActionProps;
 }
-declare const Dialog: react__default.ForwardRefExoticComponent<DialogProps & react__default.RefAttributes<HTMLSpanElement>>;
+declare const Drawer: react.ForwardRefExoticComponent<DrawerProps & react.RefAttributes<HTMLDivElement>>;
 
 type DropdownSize = "md" | "lg";
+type DropdownVariant = "default" | "combobox";
 interface DropdownItemsInterface {
     label: string;
     value: string;
 }
 interface DropdownProps extends HTMLAttributes<HTMLDivElement> {
     size?: DropdownSize;
+    /** "default" = เลือกจากรายการอย่างเดียว, "combobox" = พิมพ์ค้นหาในช่องได้ */
+    variant?: DropdownVariant;
     error?: string;
     label?: string;
     placeholder?: string;
-    isDisabled?: boolean;
-    isSearchable?: boolean;
-    isTextCenter?: boolean;
+    helperText?: string;
+    disabled?: boolean;
+    textCenter?: boolean;
     value: DropdownItemsInterface;
     setValue: (value: DropdownItemsInterface) => void;
     dropDownItems?: DropdownItemsInterface[];
@@ -177,6 +179,15 @@ interface IconProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
 }
 declare const Icon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<HTMLSpanElement>>;
 
+type IconButtonSize = 'xs' | 's' | 'm' | 'l';
+interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    icon: ReactNode;
+    size?: IconButtonSize;
+    danger?: boolean;
+    'aria-label': string;
+}
+declare const IconButton: react.ForwardRefExoticComponent<IconButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
 type LinkVariant = 'xs' | 'sm' | 'md' | 'lg';
 type LinkStyle = 'brand' | 'white' | 'black' | 'brandLooped' | 'whiteLooped' | 'blackLooped';
 interface LinkProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
@@ -245,37 +256,37 @@ interface TabProps extends HTMLAttributes<HTMLDivElement> {
 }
 declare const Tab: react.ForwardRefExoticComponent<TabProps & react.RefAttributes<HTMLDivElement>>;
 
-interface TextAreaProps extends HTMLAttributes<HTMLTextAreaElement> {
-    maxText?: number;
-    height?: number;
+interface TextAreaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "size" | "prefix"> {
     error?: string;
     label?: string;
     placeholder?: string;
-    description?: string;
-    icon?: string;
-    isDisabled?: boolean;
-    isLoading?: boolean;
-    isVertify?: boolean;
-    isClearable?: boolean;
+    helperText?: string;
+    optional?: boolean;
+    success?: boolean;
+    pending?: boolean;
+    clearable?: boolean;
     disabled?: boolean;
+    showCounter?: boolean;
+    maxLength?: number;
+    height?: number;
     value?: string;
     onChange?: (event: react__default.ChangeEvent<HTMLTextAreaElement>) => void;
 }
 declare const TextArea: react__default.ForwardRefExoticComponent<TextAreaProps & react__default.RefAttributes<HTMLTextAreaElement>>;
 
 type TextFieldSize = "md" | "lg";
-interface TextFieldProps extends InputHTMLAttributes<HTMLInputElement> {
-    inputSize?: TextFieldSize;
+interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "prefix"> {
+    size?: TextFieldSize;
     error?: string;
     label?: string;
     placeholder?: string;
-    description?: string;
-    icon?: ReactNode;
-    isDisabled?: boolean;
-    isLoading?: boolean;
-    isVertify?: boolean;
-    isUnrequired?: boolean;
-    isClearable?: boolean;
+    helperText?: string;
+    prefix?: ReactNode;
+    suffix?: ReactNode;
+    optional?: boolean;
+    success?: boolean;
+    pending?: boolean;
+    clearable?: boolean;
     disabled?: boolean;
     value?: string;
     onChange?: (event: react__default.ChangeEvent<HTMLInputElement>) => void;
@@ -311,4 +322,4 @@ interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
 }
 declare const Tooltip: react__default.ForwardRefExoticComponent<TooltipProps & react__default.RefAttributes<HTMLDivElement>>;
 
-export { Accordion, type AccordionItemData, type AccordionProps, AlertBanner, type AlertBannerProps, Avatar, type AvatarProps, Badge, type BadgeProps, BottomSheet, type BottomSheetProps, Branding, type BrandingProps, Button, type ButtonProps, Checkbox, type CheckboxProps, Chip, type ChipProps, Dialog, type DialogProps, Dropdown, type DropdownItemsInterface, type DropdownProps, FinancialLogo, type FinancialLogoProps, Icon, type IconProps, Link, type LinkProps, Loading, type LoadingProps, Radio, type RadioProps, SegmentControl, type SegmentControlProps, Slider, type SliderProps, Tab, type TabProps, TextArea, type TextAreaProps, TextField, type TextFieldProps, Toast, type ToastProps, ToggleSwitch, type ToggleSwitchProps, Tooltip, type TooltipProps };
+export { Accordion, type AccordionItemData, type AccordionProps, AlertBanner, type AlertBannerProps, Avatar, type AvatarProps, Badge, type BadgeProps, Branding, type BrandingProps, Button, type ButtonProps, Checkbox, type CheckboxProps, Chip, type ChipProps, Dialog, type DialogActionProps, type DialogDisplay, type DialogProps, Drawer, type DrawerActionProps, type DrawerProps, Dropdown, type DropdownItemsInterface, type DropdownProps, FinancialLogo, type FinancialLogoProps, Icon, IconButton, type IconButtonProps, type IconProps, Link, type LinkProps, Loading, type LoadingProps, Radio, type RadioProps, SegmentControl, type SegmentControlProps, Slider, type SliderProps, Tab, type TabProps, TextArea, type TextAreaProps, TextField, type TextFieldProps, Toast, type ToastProps, ToggleSwitch, type ToggleSwitchProps, Tooltip, type TooltipProps };