@refinn/core-ui 0.1.14 → 0.1.16

package/dist/index.d.mts

@@ -18,12 +18,20 @@ declare const Accordion: react.ForwardRefExoticComponent<AccordionProps & react.
 
 type AlertVariant$1 = 'none' | 'info' | 'danger' | 'warning' | 'success';
 type AlertMode$1 = 'page' | 'section' | 'inline';
+interface AlertBannerAction {
+    label: string;
+    href?: string;
+    onClick?: () => void;
+}
 interface AlertBannerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     variant?: AlertVariant$1;
     mode?: AlertMode$1;
     title?: ReactNode;
     description?: ReactNode;
-    action?: [string?, string?];
+    /** Renders as a button (page mode) or an icon link (section/inline mode) on its own row below the content. */
+    buttonAction?: AlertBannerAction;
+    /** Renders as an underlined link inline with the content, next to the close button. */
+    buttonLink?: AlertBannerAction;
     icon?: ReactNode;
     onClose?: () => void;
 }
@@ -84,18 +92,59 @@ interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "siz
 declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
 
 type ChipSize = "sm" | "md" | "lg";
-interface ChipProps extends HTMLAttributes<HTMLDivElement> {
+type ChipVariant = "brand" | "dark";
+interface ChipProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> {
     size?: ChipSize;
-    src?: string;
-    alt?: string;
     label: string;
-    icon?: ReactNode;
-    isOutlined?: boolean;
-    isDark?: boolean;
-    isSelected?: boolean;
+    /** Only affects the selected appearance — unselected chips look the same for both variants. */
+    variant?: ChipVariant;
+    /** Ignored while selected — selection always renders as a solid chip. */
+    outline?: boolean;
+    selected?: boolean;
+    defaultSelected?: boolean;
+    onSelectedChange?: (selected: boolean) => void;
+    startIcon?: ReactNode;
+    endIcon?: ReactNode;
+    /** Renders a circular financial-institution logo in place of startIcon. Not supported at size "sm". */
+    bankLogoSrc?: string;
+    bankLogoAlt?: string;
+}
+declare const Chip: react.ForwardRefExoticComponent<ChipProps & react.RefAttributes<HTMLButtonElement>>;
+
+type TextFieldSize = "md" | "lg";
+interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "prefix"> {
+    size?: TextFieldSize;
+    error?: string;
+    label?: string;
+    placeholder?: string;
+    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;
 }
-declare const Chip: react.ForwardRefExoticComponent<ChipProps & react.RefAttributes<HTMLDivElement>>;
+declare const TextField: react__default.ForwardRefExoticComponent<TextFieldProps & react__default.RefAttributes<HTMLInputElement>>;
+
+interface CurrencyFieldProps extends Omit<TextFieldProps, "value" | "onChange" | "prefix" | "type" | "inputMode"> {
+    value?: number;
+    onChange?: (value: number | undefined) => void;
+    /** จำนวนเงินขั้นต่ำที่ยอมรับได้ — ถ้าไม่กำหนดจะไม่มีการตรวจสอบขั้นต่ำ */
+    min?: number;
+    /** ข้อความ error ที่แสดงเมื่อค่าต่ำกว่า min (ค่าเริ่มต้นจะสร้างให้อัตโนมัติ) */
+    minErrorText?: string;
+    /** จำนวนเงินสูงสุดที่ยอมรับได้ — ถ้าไม่กำหนดจะไม่มีการตรวจสอบสูงสุด */
+    max?: number;
+    /** ข้อความ error ที่แสดงเมื่อค่าเกิน max (ค่าเริ่มต้นจะสร้างให้อัตโนมัติ) */
+    maxErrorText?: string;
+    /** สัญลักษณ์สกุลเงินที่แสดงหน้าช่องกรอก (ค่าเริ่มต้นคือ ฿) */
+    currencyIcon?: ReactNode;
+}
+declare const CurrencyField: react__default.ForwardRefExoticComponent<CurrencyFieldProps & react__default.RefAttributes<HTMLInputElement>>;
 
 type DialogDisplay = 'centered' | 'slide-up' | 'full';
 type DialogActionProps = Omit<ButtonProps, 'variant' | 'children'> & {
@@ -185,9 +234,14 @@ interface IconProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
 declare const Icon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<HTMLSpanElement>>;
 
 type IconButtonSize = 'xs' | 's' | 'm' | 'l';
+type IconButtonSurface = 'default' | 'dark' | 'light';
 interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
     icon: ReactNode;
     size?: IconButtonSize;
+    /** Which background the button sits on — picks the enabled/hover/active tint. */
+    surface?: IconButtonSurface;
+    /** Enabled state has no fill; hover/active/focus/disabled/danger are unaffected. */
+    transparent?: boolean;
     danger?: boolean;
     'aria-label': string;
 }
@@ -222,7 +276,7 @@ interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"
 declare const Radio: react.ForwardRefExoticComponent<RadioProps & react.RefAttributes<HTMLInputElement>>;
 
 type SegmentControlSize = "sm" | "md" | "lg";
-interface SegmentControlProps extends HTMLAttributes<HTMLDivElement> {
+interface SegmentControlProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
     size?: SegmentControlSize;
     items: {
         label: string;
@@ -230,6 +284,7 @@ interface SegmentControlProps extends HTMLAttributes<HTMLDivElement> {
     }[];
     selected: string;
     setSelected?: (value: string) => void;
+    onChange?: (value: string) => void;
 }
 declare const SegmentControl: react.ForwardRefExoticComponent<SegmentControlProps & react.RefAttributes<HTMLDivElement>>;
 
@@ -279,25 +334,6 @@ interface TextAreaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>
 }
 declare const TextArea: react__default.ForwardRefExoticComponent<TextAreaProps & react__default.RefAttributes<HTMLTextAreaElement>>;
 
-type TextFieldSize = "md" | "lg";
-interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "prefix"> {
-    size?: TextFieldSize;
-    error?: string;
-    label?: string;
-    placeholder?: string;
-    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;
-}
-declare const TextField: react__default.ForwardRefExoticComponent<TextFieldProps & react__default.RefAttributes<HTMLInputElement>>;
-
 type ToastType = 'default' | 'progress' | 'error';
 interface ToastProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     type?: ToastType;
@@ -327,4 +363,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, 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 };
+export { Accordion, type AccordionItemData, type AccordionProps, AlertBanner, type AlertBannerAction, type AlertBannerProps, Avatar, type AvatarProps, Badge, type BadgeProps, Branding, type BrandingProps, Button, type ButtonProps, Checkbox, type CheckboxProps, Chip, type ChipProps, CurrencyField, type CurrencyFieldProps, 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

@@ -18,12 +18,20 @@ declare const Accordion: react.ForwardRefExoticComponent<AccordionProps & react.
 
 type AlertVariant$1 = 'none' | 'info' | 'danger' | 'warning' | 'success';
 type AlertMode$1 = 'page' | 'section' | 'inline';
+interface AlertBannerAction {
+    label: string;
+    href?: string;
+    onClick?: () => void;
+}
 interface AlertBannerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     variant?: AlertVariant$1;
     mode?: AlertMode$1;
     title?: ReactNode;
     description?: ReactNode;
-    action?: [string?, string?];
+    /** Renders as a button (page mode) or an icon link (section/inline mode) on its own row below the content. */
+    buttonAction?: AlertBannerAction;
+    /** Renders as an underlined link inline with the content, next to the close button. */
+    buttonLink?: AlertBannerAction;
     icon?: ReactNode;
     onClose?: () => void;
 }
@@ -84,18 +92,59 @@ interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "siz
 declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
 
 type ChipSize = "sm" | "md" | "lg";
-interface ChipProps extends HTMLAttributes<HTMLDivElement> {
+type ChipVariant = "brand" | "dark";
+interface ChipProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> {
     size?: ChipSize;
-    src?: string;
-    alt?: string;
     label: string;
-    icon?: ReactNode;
-    isOutlined?: boolean;
-    isDark?: boolean;
-    isSelected?: boolean;
+    /** Only affects the selected appearance — unselected chips look the same for both variants. */
+    variant?: ChipVariant;
+    /** Ignored while selected — selection always renders as a solid chip. */
+    outline?: boolean;
+    selected?: boolean;
+    defaultSelected?: boolean;
+    onSelectedChange?: (selected: boolean) => void;
+    startIcon?: ReactNode;
+    endIcon?: ReactNode;
+    /** Renders a circular financial-institution logo in place of startIcon. Not supported at size "sm". */
+    bankLogoSrc?: string;
+    bankLogoAlt?: string;
+}
+declare const Chip: react.ForwardRefExoticComponent<ChipProps & react.RefAttributes<HTMLButtonElement>>;
+
+type TextFieldSize = "md" | "lg";
+interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "prefix"> {
+    size?: TextFieldSize;
+    error?: string;
+    label?: string;
+    placeholder?: string;
+    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;
 }
-declare const Chip: react.ForwardRefExoticComponent<ChipProps & react.RefAttributes<HTMLDivElement>>;
+declare const TextField: react__default.ForwardRefExoticComponent<TextFieldProps & react__default.RefAttributes<HTMLInputElement>>;
+
+interface CurrencyFieldProps extends Omit<TextFieldProps, "value" | "onChange" | "prefix" | "type" | "inputMode"> {
+    value?: number;
+    onChange?: (value: number | undefined) => void;
+    /** จำนวนเงินขั้นต่ำที่ยอมรับได้ — ถ้าไม่กำหนดจะไม่มีการตรวจสอบขั้นต่ำ */
+    min?: number;
+    /** ข้อความ error ที่แสดงเมื่อค่าต่ำกว่า min (ค่าเริ่มต้นจะสร้างให้อัตโนมัติ) */
+    minErrorText?: string;
+    /** จำนวนเงินสูงสุดที่ยอมรับได้ — ถ้าไม่กำหนดจะไม่มีการตรวจสอบสูงสุด */
+    max?: number;
+    /** ข้อความ error ที่แสดงเมื่อค่าเกิน max (ค่าเริ่มต้นจะสร้างให้อัตโนมัติ) */
+    maxErrorText?: string;
+    /** สัญลักษณ์สกุลเงินที่แสดงหน้าช่องกรอก (ค่าเริ่มต้นคือ ฿) */
+    currencyIcon?: ReactNode;
+}
+declare const CurrencyField: react__default.ForwardRefExoticComponent<CurrencyFieldProps & react__default.RefAttributes<HTMLInputElement>>;
 
 type DialogDisplay = 'centered' | 'slide-up' | 'full';
 type DialogActionProps = Omit<ButtonProps, 'variant' | 'children'> & {
@@ -185,9 +234,14 @@ interface IconProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
 declare const Icon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<HTMLSpanElement>>;
 
 type IconButtonSize = 'xs' | 's' | 'm' | 'l';
+type IconButtonSurface = 'default' | 'dark' | 'light';
 interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
     icon: ReactNode;
     size?: IconButtonSize;
+    /** Which background the button sits on — picks the enabled/hover/active tint. */
+    surface?: IconButtonSurface;
+    /** Enabled state has no fill; hover/active/focus/disabled/danger are unaffected. */
+    transparent?: boolean;
     danger?: boolean;
     'aria-label': string;
 }
@@ -222,7 +276,7 @@ interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"
 declare const Radio: react.ForwardRefExoticComponent<RadioProps & react.RefAttributes<HTMLInputElement>>;
 
 type SegmentControlSize = "sm" | "md" | "lg";
-interface SegmentControlProps extends HTMLAttributes<HTMLDivElement> {
+interface SegmentControlProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
     size?: SegmentControlSize;
     items: {
         label: string;
@@ -230,6 +284,7 @@ interface SegmentControlProps extends HTMLAttributes<HTMLDivElement> {
     }[];
     selected: string;
     setSelected?: (value: string) => void;
+    onChange?: (value: string) => void;
 }
 declare const SegmentControl: react.ForwardRefExoticComponent<SegmentControlProps & react.RefAttributes<HTMLDivElement>>;
 
@@ -279,25 +334,6 @@ interface TextAreaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>
 }
 declare const TextArea: react__default.ForwardRefExoticComponent<TextAreaProps & react__default.RefAttributes<HTMLTextAreaElement>>;
 
-type TextFieldSize = "md" | "lg";
-interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "prefix"> {
-    size?: TextFieldSize;
-    error?: string;
-    label?: string;
-    placeholder?: string;
-    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;
-}
-declare const TextField: react__default.ForwardRefExoticComponent<TextFieldProps & react__default.RefAttributes<HTMLInputElement>>;
-
 type ToastType = 'default' | 'progress' | 'error';
 interface ToastProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     type?: ToastType;
@@ -327,4 +363,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, 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 };
+export { Accordion, type AccordionItemData, type AccordionProps, AlertBanner, type AlertBannerAction, type AlertBannerProps, Avatar, type AvatarProps, Badge, type BadgeProps, Branding, type BrandingProps, Button, type ButtonProps, Checkbox, type CheckboxProps, Chip, type ChipProps, CurrencyField, type CurrencyFieldProps, 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 };