@nurihaus/web-design-system 3.0.1 → 3.1.0

package/dist/components/switch/base-switch.d.ts

@@ -0,0 +1,11 @@
+import { PropsWithChildren } from 'react';
+import { SwitchLabelProps, SwitchRootProps } from './switch-type';
+declare const SwitchRoot: import("react").ForwardRefExoticComponent<Omit<PropsWithChildren<SwitchRootProps>, "ref"> & import("react").RefAttributes<HTMLButtonElement>> & {
+    Thumb: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+        ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+    }, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    Label: import("react").ForwardRefExoticComponent<SwitchLabelProps & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLSpanElement>>;
+};
+export default SwitchRoot;

package/dist/components/switch/switch-props.d.ts

@@ -0,0 +1,4 @@
+export declare const sizes: readonly ["s", "m", "l"];
+export declare const switchTrackProps: {
+    size: import("../../helpers/types/propsDef").ClassNamePropsType<readonly ["s", "m", "l"]>;
+};

package/dist/components/switch/switch-type.d.ts

@@ -0,0 +1,19 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+import { AsChildProps } from '../../helpers/types/common-props';
+import { sizes } from './switch-props';
+export interface SwitchRootProps extends Omit<ComponentPropsWithRef<'button'>, 'id' | 'onChange' | 'value'> {
+    id: string;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    className?: string;
+}
+export type SwitchThumbProps = ComponentPropsWithRef<'span'>;
+export interface SwitchLabelProps extends AsChildProps {
+    className?: string;
+}
+export interface SwitchProps extends SwitchRootProps {
+    label?: ReactNode;
+    size?: (typeof sizes)[number];
+}

package/dist/components/switch/switch.d.ts

@@ -0,0 +1,4 @@
+import { SwitchProps } from './switch-type';
+declare const Switch: import("react").ForwardRefExoticComponent<Omit<SwitchProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export default Switch;
+export type { SwitchProps } from './switch-type';

package/dist/components/switch/switch.stories.d.ts

@@ -0,0 +1,24 @@
+import type { StoryObj } from '@storybook/react-webpack5';
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<Omit<import("./switch-type").SwitchProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    argTypes: {
+        size: {
+            control: {
+                type: "select";
+            };
+            options: readonly ["s", "m", "l"];
+        };
+    };
+    args: {
+        id: string;
+        label: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Sizes: Story;
+export declare const Checked: Story;
+export declare const Disabled: Story;
+export declare const WithoutLabel: Story;

package/dist/components/table/base-table.d.ts

@@ -1,9 +1,8 @@
 import { TableBodyProps, TableCellProps, TableHeaderProps, TableRootProps, TableRowProps } from './table-type';
-declare const TableRoot: {
-    (props: TableRootProps): import("react/jsx-runtime").JSX.Element;
-    Header: (props: TableHeaderProps) => import("react/jsx-runtime").JSX.Element;
-    Body: (props: TableBodyProps) => import("react/jsx-runtime").JSX.Element;
-    Row: (props: TableRowProps) => import("react/jsx-runtime").JSX.Element;
+declare const TableRoot: import("react").ForwardRefExoticComponent<Omit<TableRootProps, "ref"> & import("react").RefAttributes<HTMLTableElement>> & {
+    Header: import("react").ForwardRefExoticComponent<Omit<TableHeaderProps, "ref"> & import("react").RefAttributes<HTMLTableSectionElement>>;
+    Body: import("react").ForwardRefExoticComponent<Omit<TableBodyProps, "ref"> & import("react").RefAttributes<HTMLTableSectionElement>>;
+    Row: import("react").ForwardRefExoticComponent<Omit<TableRowProps, "ref"> & import("react").RefAttributes<HTMLTableRowElement>>;
     Cell: import("react").ForwardRefExoticComponent<Omit<TableCellProps, "ref"> & import("react").RefAttributes<HTMLTableCellElement>>;
 };
 export default TableRoot;

package/dist/components/table/data-table.d.ts

@@ -1,23 +1,6 @@
-import { ReactNode } from 'react';
-export interface RowItem {
-    id: string;
-    value: ReactNode;
-    onClickRow?: (id: RowItem['id']) => void;
-}
-type ColumnsType<T extends readonly RowItem[]> = Array<{
-    [K in T[number]['id']]: {
-        value: ReactNode | ((item: T[number]) => ReactNode);
-        onClickCell?: () => void;
-    };
-}>;
-export interface DataTableProps<T extends readonly RowItem[]> {
-    rows: T;
-    columns: ColumnsType<T>;
-    fixedRowsIndex?: number;
-    headerHeight?: number;
-    rowHeight?: number;
-    cellHeight?: number;
-    className?: string;
-}
-declare const DataTable: <T extends readonly RowItem[]>(props: DataTableProps<T>) => import("react/jsx-runtime").JSX.Element;
+import { RefAttributes } from 'react';
+import { DataTableProps, RowItem } from './table-type';
+declare const DataTableBase: import("react").ForwardRefExoticComponent<DataTableProps<readonly RowItem[]> & RefAttributes<HTMLTableElement>>;
+declare const DataTable: <T extends readonly RowItem[]>(props: DataTableProps<T> & RefAttributes<HTMLTableElement>) => ReturnType<typeof DataTableBase>;
 export default DataTable;
+export type { DataTableProps, RowItem } from './table-type';

package/dist/components/table/table-type.d.ts

@@ -1,4 +1,4 @@
-import { ComponentPropsWithRef } from 'react';
+import { ComponentPropsWithRef, ReactNode } from 'react';
 export interface TableProps {
     children: React.ReactNode;
 }
@@ -12,3 +12,24 @@ export interface TableBodyProps extends Omit<TableProps, 'children'>, ComponentP
 }
 export interface TableCellProps extends Omit<TableProps, 'children'>, ComponentPropsWithRef<'td'> {
 }
+export interface RowItem {
+    id: string;
+    value: ReactNode;
+    onClickRow?: (id: RowItem['id']) => void;
+}
+type ColumnsType<T extends readonly RowItem[]> = Array<{
+    [K in T[number]['id']]: {
+        value: ReactNode | ((item: T[number]) => ReactNode);
+        onClickCell?: () => void;
+    };
+}>;
+export interface DataTableProps<T extends readonly RowItem[]> {
+    rows: T;
+    columns: ColumnsType<T>;
+    fixedRowsIndex?: number;
+    headerHeight?: number;
+    rowHeight?: number;
+    cellHeight?: number;
+    className?: string;
+}
+export {};

package/dist/components/table/table.stories.d.ts

@@ -1,8 +1,8 @@
-import type { StoryObj } from '@storybook/react';
-import { DataTableProps } from './data-table';
+import type { StoryObj } from '@storybook/react-webpack5';
+import { DataTableProps } from './table-type';
 declare const meta: {
     title: string;
-    component: <T extends readonly import("./data-table").RowItem[]>(props: DataTableProps<T>) => import("react/jsx-runtime").JSX.Element;
+    component: <T extends readonly import("./table-type").RowItem[]>(props: DataTableProps<T> & import("react").RefAttributes<HTMLTableElement>) => ReturnType<import("react").ForwardRefExoticComponent<DataTableProps<readonly import("./table-type").RowItem[]> & import("react").RefAttributes<HTMLTableElement>>>;
 };
 export default meta;
 declare const rowItems: readonly [{
@@ -55,3 +55,19 @@ declare const rowItems: readonly [{
     readonly value: import("react/jsx-runtime").JSX.Element;
 }];
 export declare const Default: StoryObj<DataTableProps<typeof rowItems>>;
+declare const smallRows: readonly [{
+    readonly id: "id";
+    readonly value: import("react/jsx-runtime").JSX.Element;
+}, {
+    readonly id: "name";
+    readonly value: import("react/jsx-runtime").JSX.Element;
+}, {
+    readonly id: "status";
+    readonly value: import("react/jsx-runtime").JSX.Element;
+}];
+export declare const Small: StoryObj<DataTableProps<typeof smallRows>>;
+/** 행 높이와 헤더 높이는 css prop 이다. */
+export declare const Heights: StoryObj<DataTableProps<typeof smallRows>>;
+/** 행에 마우스를 올리면 배경이 바뀌고, 고정 열은 가로 스크롤에도 남는다. */
+export declare const FixedColumns: StoryObj<DataTableProps<typeof rowItems>>;
+export declare const Empty: StoryObj<DataTableProps<typeof smallRows>>;

package/dist/components/tabs/base-tabs.d.ts

@@ -1,11 +1,11 @@
 import { PropsWithChildren } from 'react';
 import { TabsContentProps, TabsIndicatorProps, TabsListProps, TabsRootProps, TabsTriggerProps } from './tabs-type';
-declare const TabsRoot: {
-    (props: PropsWithChildren<TabsRootProps>): import("react/jsx-runtime").JSX.Element;
-    List: (props: PropsWithChildren<TabsListProps>) => import("react/jsx-runtime").JSX.Element;
-    Trigger: (props: PropsWithChildren<TabsTriggerProps>) => import("react/jsx-runtime").JSX.Element;
-    Content: (props: PropsWithChildren<TabsContentProps>) => import("react/jsx-runtime").JSX.Element;
-    Indicator: (props: TabsIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+declare const TabsRoot: import("react").ForwardRefExoticComponent<TabsRootProps & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>> & {
+    List: import("react").ForwardRefExoticComponent<Omit<PropsWithChildren<TabsListProps>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Trigger: import("react").ForwardRefExoticComponent<Omit<PropsWithChildren<TabsTriggerProps>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Content: import("react").ForwardRefExoticComponent<Omit<PropsWithChildren<TabsContentProps>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Indicator: import("react").ForwardRefExoticComponent<Omit<TabsIndicatorProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 };
 export default TabsRoot;
-export type { TabsRootProps, TabsListProps, TabsTriggerProps, TabsContentProps, TabsIndicatorProps };

package/dist/components/tabs/tabs-props.d.ts

@@ -1,5 +1,5 @@
 export declare const variant: readonly ["underline", "filled"];
-export declare const tabsSingleProps: {
+export declare const tabsProps: {
     variant: {
         type: "className";
         className: string;

package/dist/components/tabs/tabs-type.d.ts

@@ -1,6 +1,8 @@
-import type { ComponentPropsWithRef, ReactNode, CSSProperties } from 'react';
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+import { AsChildProps, StyleProps } from '../../helpers/types/common-props';
+import { variant } from './tabs-props';
 export type TabsValue = string | null;
-export type TabsVariant = 'underline' | 'filled';
+export type TabsVariant = (typeof variant)[number];
 export interface TabsItem {
     id: string;
     label: ReactNode;
@@ -8,14 +10,12 @@ export interface TabsItem {
     disabled?: boolean;
     leftIcon?: ReactNode;
 }
-export interface TabsProps {
+export interface TabsProps extends StyleProps {
     items: TabsItem[];
     variant?: TabsVariant;
     value?: TabsValue;
     defaultValue?: TabsValue;
     onValueChange?: (id: TabsValue) => void;
-    className?: string;
-    style?: CSSProperties;
 }
 export interface TabsRootProps {
     value?: TabsValue;
@@ -23,18 +23,14 @@ export interface TabsRootProps {
     onValueChange?: (id: TabsValue) => void;
     className?: string;
 }
-export interface TabsListProps extends ComponentPropsWithRef<'div'> {
-    asChild?: boolean;
+export interface TabsListProps extends ComponentPropsWithRef<'div'>, AsChildProps {
 }
-export interface TabsTriggerProps extends Omit<ComponentPropsWithRef<'button'>, 'value'> {
-    asChild?: boolean;
+export interface TabsTriggerProps extends Omit<ComponentPropsWithRef<'button'>, 'value'>, AsChildProps {
     id: string;
     disabled?: boolean;
 }
-export interface TabsContentProps extends Omit<ComponentPropsWithRef<'div'>, 'value'> {
-    asChild?: boolean;
+export interface TabsContentProps extends Omit<ComponentPropsWithRef<'div'>, 'value'>, AsChildProps {
     id: string;
 }
-export interface TabsIndicatorProps extends ComponentPropsWithRef<'div'> {
-    asChild?: boolean;
+export interface TabsIndicatorProps extends ComponentPropsWithRef<'div'>, AsChildProps {
 }

package/dist/components/tabs/tabs.d.ts

@@ -1,4 +1,4 @@
-import type { TabsProps } from './tabs-type';
-declare const Tabs: (props: TabsProps) => import("react/jsx-runtime").JSX.Element;
+import { TabsProps } from './tabs-type';
+declare const Tabs: import("react").ForwardRefExoticComponent<TabsProps & import("react").RefAttributes<HTMLDivElement>>;
 export default Tabs;
-export type { TabsProps };
+export type { TabsProps } from './tabs-type';

package/dist/components/tabs/tabs.stories.d.ts

@@ -1,23 +1,29 @@
-import type { StoryObj } from '@storybook/react';
+import type { StoryObj } from '@storybook/react-webpack5';
 declare const meta: {
     title: string;
-    component: (props: import("./tabs-type").TabsProps) => import("react/jsx-runtime").JSX.Element;
+    component: import("react").ForwardRefExoticComponent<import("./tabs-type").TabsProps & import("react").RefAttributes<HTMLDivElement>>;
+    argTypes: {
+        variant: {
+            control: {
+                type: "select";
+            };
+            options: readonly ["underline", "filled"];
+        };
+    };
     args: {
         variant: "underline";
         defaultValue: string;
-        items: ({
-            id: string;
-            label: string;
-            content: import("react/jsx-runtime").JSX.Element;
-            leftIcon: import("react/jsx-runtime").JSX.Element;
-        } | {
+        items: {
             id: string;
             label: string;
             content: import("react/jsx-runtime").JSX.Element;
-            leftIcon?: undefined;
-        })[];
+            leftIcon: import("react/jsx-runtime").JSX.Element | undefined;
+        }[];
     };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const Variants: Story;
+export declare const Filled: Story;
+export declare const DisabledTab: Story;

package/dist/components/text-area/base-text-area.d.ts

@@ -0,0 +1,10 @@
+import { TextAreaHelperTextProps, TextAreaLabelProps, TextAreaRootProps, TextAreaTextareaProps } from './text-area-type';
+declare const TextAreaRoot: {
+    (props: TextAreaRootProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    Label: import("react").ForwardRefExoticComponent<TextAreaLabelProps & import("react").RefAttributes<HTMLElement>>;
+    Textarea: import("react").ForwardRefExoticComponent<Omit<TextAreaTextareaProps, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;
+    HelperText: import("react").ForwardRefExoticComponent<TextAreaHelperTextProps & import("react").RefAttributes<HTMLElement>>;
+};
+export default TextAreaRoot;

package/dist/components/text-area/text-area-props.d.ts

@@ -0,0 +1,12 @@
+export declare const sizes: readonly ["s", "m"];
+export declare const resize: readonly ["none", "vertical"];
+export declare const textAreaProps: {
+    size: import("../../helpers/types/propsDef").ClassNamePropsType<readonly ["s", "m"]>;
+    width: import("../../helpers/types/propsDef").CSSPropsTypeWithoutValues<string | number>;
+    resize: {
+        type: "className";
+        className: string;
+        values: readonly ["none", "vertical"];
+        default: "vertical";
+    };
+};

package/dist/components/text-area/text-area-type.d.ts

@@ -0,0 +1,34 @@
+import { ChangeEvent, ComponentPropsWithRef, ReactNode } from 'react';
+import { resize, sizes } from './text-area-props';
+export interface TextAreaRootProps {
+    children: ReactNode;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void;
+}
+export interface TextAreaLabelProps {
+    text: ReactNode;
+    className?: string;
+}
+export interface TextAreaTextareaProps extends Omit<ComponentPropsWithRef<'textarea'>, 'title'> {
+    name: string;
+    placeholder?: string;
+    className?: string;
+    disabled?: boolean;
+}
+export interface TextAreaHelperTextProps {
+    text: ReactNode;
+    className?: string;
+}
+export interface TextAreaProps extends Omit<ComponentPropsWithRef<'textarea'>, 'title'> {
+    size?: (typeof sizes)[number];
+    width?: number | string;
+    resize?: (typeof resize)[number];
+    name: string;
+    title?: ReactNode;
+    helperText?: ReactNode;
+    isError?: boolean;
+    value?: string;
+    defaultValue?: string;
+    className?: string;
+}

package/dist/components/text-area/text-area.d.ts

@@ -0,0 +1,4 @@
+import { TextAreaProps } from './text-area-type';
+declare const TextArea: import("react").ForwardRefExoticComponent<Omit<TextAreaProps, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;
+export default TextArea;
+export type { TextAreaProps } from './text-area-type';

package/dist/components/text-area/text-area.stories.d.ts

@@ -0,0 +1,32 @@
+import type { StoryObj } from '@storybook/react-webpack5';
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<Omit<import("./text-area-type").TextAreaProps, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;
+    argTypes: {
+        size: {
+            control: {
+                type: "select";
+            };
+            options: readonly ["s", "m"];
+        };
+        resize: {
+            control: {
+                type: "select";
+            };
+            options: readonly ["none", "vertical"];
+        };
+    };
+    args: {
+        name: string;
+        width: string;
+        rows: number;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Sizes: Story;
+export declare const Resize: Story;
+export declare const ErrorState: Story;
+export declare const Disabled: Story;
+export declare const MaxLength: Story;

package/dist/components/text-field/base-text-field.d.ts

@@ -2,8 +2,10 @@ import React, { PropsWithChildren } from 'react';
 import { TextFieldHelperTextProps, TextFieldInputProps, TextFieldLabelProps, TextFieldRootProps } from './text-field-type';
 declare const TextFieldRoot: {
     (props: PropsWithChildren<TextFieldRootProps>): import("react/jsx-runtime").JSX.Element;
-    TextLabel: (props: TextFieldLabelProps) => number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | null | undefined;
-    InputField: React.ForwardRefExoticComponent<Omit<TextFieldInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
-    HelperText: (props: TextFieldHelperTextProps) => number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | null | undefined;
+    displayName: string;
+} & {
+    Label: React.ForwardRefExoticComponent<TextFieldLabelProps & React.RefAttributes<HTMLElement>>;
+    Input: React.ForwardRefExoticComponent<Omit<TextFieldInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+    HelperText: React.ForwardRefExoticComponent<TextFieldHelperTextProps & React.RefAttributes<HTMLElement>>;
 };
 export default TextFieldRoot;

package/dist/components/text-field/text-field-props.d.ts

@@ -1,14 +1,5 @@
-export declare const size: readonly ["m", "l"];
+export declare const sizes: readonly ["xs", "s", "m", "l", "xl"];
 export declare const textFieldProps: {
-    size: {
-        type: "className";
-        className: string;
-        values: readonly ["m", "l"];
-        default: "m";
-    };
-    width: {
-        type: "css";
-        key: "width";
-        default: string;
-    };
+    size: import("../../helpers/types/propsDef").ClassNamePropsType<readonly ["xs", "s", "m", "l", "xl"]>;
+    width: import("../../helpers/types/propsDef").CSSPropsTypeWithoutValues<string | number>;
 };

package/dist/components/text-field/text-field-type.d.ts

@@ -1,4 +1,5 @@
 import { ComponentPropsWithRef, ReactNode } from 'react';
+import { sizes } from './text-field-props';
 export interface TextFieldRootProps {
     children: React.ReactNode;
     value?: string;
@@ -19,3 +20,16 @@ export interface TextFieldHelperTextProps {
     text: ReactNode;
     className?: string;
 }
+export interface TextFieldProps extends Omit<ComponentPropsWithRef<'input'>, 'title' | 'size'> {
+    size: (typeof sizes)[number];
+    width: number | string;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
+    name: string;
+    title?: ReactNode;
+    helperText?: ReactNode;
+    isError?: boolean;
+    value?: string;
+    defaultValue?: string;
+    className?: string;
+}

package/dist/components/text-field/text-field.d.ts

@@ -1,17 +1,4 @@
-import React, { ComponentPropsWithRef, ReactNode } from 'react';
-import { size } from './text-field-props';
-export interface TextFieldProps extends Omit<ComponentPropsWithRef<'input'>, 'title' | 'size'> {
-    size: (typeof size)[number];
-    width: string;
-    leftIcon?: ReactNode;
-    rightIcon?: ReactNode;
-    name: string;
-    title?: ReactNode;
-    helperText?: ReactNode;
-    isError?: boolean;
-    value?: string;
-    defaultValue?: string;
-    className?: string;
-}
-declare const TextField: React.ForwardRefExoticComponent<Omit<TextFieldProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+import { TextFieldProps } from './text-field-type';
+declare const TextField: import("react").ForwardRefExoticComponent<Omit<TextFieldProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 export default TextField;
+export type { TextFieldProps } from './text-field-type';

package/dist/components/text-field/text-field.stories.d.ts

@@ -0,0 +1,24 @@
+import type { StoryObj } from '@storybook/react-webpack5';
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<Omit<import("./text-field-type").TextFieldProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+    argTypes: {
+        size: {
+            control: {
+                type: "select";
+            };
+            options: readonly ["xs", "s", "m", "l", "xl"];
+        };
+    };
+    args: {
+        name: string;
+        size: "s";
+        width: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Sizes: Story;
+export declare const ErrorState: Story;
+export declare const Disabled: Story;

package/dist/components/toast/base-toast.d.ts

@@ -0,0 +1,20 @@
+import { PropsWithChildren } from 'react';
+import { ToastActionProps, ToastProviderProps, ToastRootProps, ToastViewportProps } from './toast-type';
+export declare const ToastProvider: {
+    (props: ToastProviderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const ToastRoot: import("react").ForwardRefExoticComponent<Omit<PropsWithChildren<ToastRootProps>, "ref"> & import("react").RefAttributes<HTMLLIElement>> & {
+    Viewport: import("react").ForwardRefExoticComponent<Omit<ToastViewportProps, "ref"> & import("react").RefAttributes<HTMLOListElement>>;
+    Title: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+    }, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Description: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+    }, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Action: import("react").ForwardRefExoticComponent<Omit<ToastActionProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Close: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+        ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+    }, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+};
+export default ToastRoot;

package/dist/components/toast/toast-props.d.ts

@@ -0,0 +1,18 @@
+export declare const variants: readonly ["default", "secondary", "success", "warning", "error"];
+export declare const positions: readonly ["top-right", "bottom-right", "bottom-center"];
+export declare const toastProps: {
+    variant: {
+        type: "className";
+        className: string;
+        values: readonly ["default", "secondary", "success", "warning", "error"];
+        default: "default";
+    };
+};
+export declare const toastViewportProps: {
+    position: {
+        type: "className";
+        className: string;
+        values: readonly ["top-right", "bottom-right", "bottom-center"];
+        default: "bottom-right";
+    };
+};

package/dist/components/toast/toast-type.d.ts

@@ -0,0 +1,45 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+import { AsChildProps, StyleProps } from '../../helpers/types/common-props';
+import { positions, variants } from './toast-props';
+export interface ToastProviderProps {
+    children: ReactNode;
+    /** 토스트가 떠 있는 시간(ms). Toast 의 duration 이 앞선다. 기본값은 Radix 의 5000 */
+    duration?: number;
+    position?: (typeof positions)[number];
+    /** 스크린 리더가 읽는 이름. 토스트마다 "{label}", 토스트 영역은 "{label} (F8)". 기본 '알림' */
+    label?: string;
+}
+export interface ToastViewportProps extends ComponentPropsWithRef<'ol'> {
+    position?: (typeof positions)[number];
+    /** 영역 이름. `{hotkey}` 자리는 Radix 가 단축키로 바꾼다 */
+    label?: string;
+    hotkey?: string[];
+}
+export interface ToastRootProps extends Omit<ComponentPropsWithRef<'li'>, 'title' | 'onPause' | 'onResume'> {
+    onPause?: () => void;
+    onResume?: () => void;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** 이 토스트만의 표시 시간(ms). Provider 의 duration 보다 앞선다 */
+    duration?: number;
+}
+export type ToastTitleProps = ComponentPropsWithRef<'div'>;
+export type ToastDescriptionProps = ComponentPropsWithRef<'div'>;
+export interface ToastActionProps extends ComponentPropsWithRef<'button'>, AsChildProps {
+    /** 버튼에 닿기 어려운 스크린 리더 사용자에게 읽어 줄 대체 수행 방법 */
+    altText: string;
+}
+export type ToastCloseProps = ComponentPropsWithRef<'button'>;
+export interface ToastAction {
+    label: string;
+    onClick: () => void;
+    altText: string;
+}
+export interface ToastProps extends Omit<ToastRootProps, 'children' | keyof StyleProps>, StyleProps {
+    title: ReactNode;
+    description?: ReactNode;
+    variant?: (typeof variants)[number];
+    action?: ToastAction;
+    showClose?: boolean;
+}

package/dist/components/toast/toast.d.ts

@@ -0,0 +1,5 @@
+import { ToastProps } from './toast-type';
+export { ToastProvider } from './base-toast';
+declare const Toast: import("react").ForwardRefExoticComponent<Omit<ToastProps, "ref"> & import("react").RefAttributes<HTMLLIElement>>;
+export default Toast;
+export type { ToastProps, ToastProviderProps } from './toast-type';