@nurihaus/web-design-system 3.0.1 → 3.0.3

package/dist/components/modal/modal-with-double-button.d.ts

@@ -1,19 +1,7 @@
-import { ReactNode } from 'react';
-import { CTAButtonProps } from '../button/cta-button';
-import { size } from './modal-props';
-export interface ModalWithDoubleButtonProps {
-    title?: string;
-    subTitle?: string | ReactNode;
-    titleIcon?: ReactNode;
-    content?: ReactNode;
-    showCloseIcon?: boolean;
-    showTitleLine?: boolean;
-    left: CTAButtonProps;
-    right: CTAButtonProps;
-    size?: (typeof size)[number];
-}
+import { ModalWithDoubleButtonProps } from './modal-type';
 declare const ModalWithDoubleButton: {
-    Row: (props: ModalWithDoubleButtonProps) => import("react/jsx-runtime").JSX.Element;
-    Column: (props: ModalWithDoubleButtonProps) => import("react/jsx-runtime").JSX.Element;
+    Row: import("react").ForwardRefExoticComponent<ModalWithDoubleButtonProps & import("react").RefAttributes<HTMLDivElement>>;
+    Column: import("react").ForwardRefExoticComponent<ModalWithDoubleButtonProps & import("react").RefAttributes<HTMLDivElement>>;
 };
 export default ModalWithDoubleButton;
+export type { ModalWithDoubleButtonProps } from './modal-type';

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

@@ -1,9 +1,22 @@
-import { StoryObj } from '@storybook/react/*';
+import type { StoryObj } from '@storybook/react-webpack5';
 import ModalWithDoubleButton from './modal-with-double-button';
 declare const meta: {
     title: string;
-    component: (props: import("./modal-with-double-button").ModalWithDoubleButtonProps) => import("react/jsx-runtime").JSX.Element;
+    component: import("react").ForwardRefExoticComponent<import("./modal-type").ModalWithDoubleButtonProps & import("react").RefAttributes<HTMLDivElement>>;
+    argTypes: {
+        size: {
+            control: {
+                type: "select";
+            };
+            options: readonly ["s", "m", "l"];
+        };
+    };
 };
 export default meta;
 type Story = StoryObj<typeof ModalWithDoubleButton.Column>;
 export declare const Default: Story;
+export declare const Row: Story;
+/** 모달은 화면 가운데 하나만 뜨므로 size 는 Controls 에서 바꿔 본다. */
+export declare const Size: Story;
+export declare const WithCloseIconAndTitleLine: Story;
+export declare const DisabledButton: Story;

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

@@ -1,10 +1,14 @@
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, ReactNode } from 'react';
 import { RadioButtonProps, RadioIndicatorProps, RadioLabelProps, RadioOptionGroupProps, RadioRootProps } from './radio-type';
 declare const RadioRoot: {
     (props: PropsWithChildren<RadioRootProps>): import("react/jsx-runtime").JSX.Element;
-    Indicator: (props: PropsWithChildren<RadioIndicatorProps>) => import("react/jsx-runtime").JSX.Element;
-    Label: (props: PropsWithChildren<RadioLabelProps>) => import("react/jsx-runtime").JSX.Element;
-    OptionGroup: (props: PropsWithChildren<RadioOptionGroupProps>) => import("react/jsx-runtime").JSX.Element;
-    Button: (props: PropsWithChildren<RadioButtonProps>) => import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    OptionGroup: import("react").ForwardRefExoticComponent<Omit<PropsWithChildren<RadioOptionGroupProps>, "ref"> & import("react").RefAttributes<HTMLUListElement>>;
+    Button: import("react").ForwardRefExoticComponent<Omit<PropsWithChildren<RadioButtonProps>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Indicator: import("react").ForwardRefExoticComponent<RadioIndicatorProps & {
+        children?: ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLInputElement>>;
+    Label: import("react").ForwardRefExoticComponent<Omit<PropsWithChildren<RadioLabelProps>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
 };
 export default RadioRoot;

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

@@ -0,0 +1 @@
+export declare const radioProps: {};

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

@@ -1,5 +1,6 @@
 import { HTMLAttributes, ReactNode } from 'react';
 import { ComponentPropsWithRef } from 'react';
+import { AsChildProps } from '../../helpers/types/common-props';
 export interface RadioRootProps {
     options: {
         id: string;
@@ -9,19 +10,16 @@ export interface RadioRootProps {
     selected?: null | string;
     onChange?: (id: string | null) => void;
 }
-export interface RadioOptionGroupProps extends ComponentPropsWithRef<'ul'> {
-    asChild?: boolean;
+export interface RadioOptionGroupProps extends ComponentPropsWithRef<'ul'>, AsChildProps {
 }
-export interface RadioLabelProps extends ComponentPropsWithRef<'label'> {
-    asChild?: boolean;
+export interface RadioLabelProps extends ComponentPropsWithRef<'label'>, AsChildProps {
     id: string;
     disabled?: boolean;
 }
-export interface RadioButtonProps extends ComponentPropsWithRef<'button'> {
-    asChild?: boolean;
+export interface RadioButtonProps extends ComponentPropsWithRef<'button'>, AsChildProps {
     id: string;
 }
-export interface RadioIndicatorProps extends HTMLAttributes<HTMLDivElement> {
-    asChild?: boolean;
+export interface RadioIndicatorProps extends HTMLAttributes<HTMLDivElement>, AsChildProps {
     id: string;
 }
+export type RadioProps = RadioRootProps;

package/dist/components/radio/radio.d.ts

@@ -1,3 +1,3 @@
-import { RadioRootProps } from './radio-type';
-declare const Radio: (props: RadioRootProps) => import("react/jsx-runtime").JSX.Element;
+declare const Radio: import("react").ForwardRefExoticComponent<import("./radio-type").RadioRootProps & import("react").RefAttributes<HTMLUListElement>>;
 export default Radio;
+export type { RadioProps } from './radio-type';

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

@@ -1,9 +1,18 @@
-import { StoryObj } from "@storybook/react/*";
-import Radio from "./radio";
+import type { StoryObj } from '@storybook/react-webpack5';
 declare const meta: {
     title: string;
-    component: (props: import("./radio-type").RadioRootProps) => import("react/jsx-runtime").JSX.Element;
+    component: import("react").ForwardRefExoticComponent<import("./radio-type").RadioRootProps & import("react").RefAttributes<HTMLUListElement>>;
+    args: {
+        options: {
+            id: string;
+            label: string;
+        }[];
+    };
 };
 export default meta;
-type Story = StoryObj<typeof Radio>;
+type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const Selected: Story;
+export declare const Disabled: Story;
+/** label 은 ReactNode 도 받는다. */
+export declare const WithCustomLabel: 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-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 ["s", "m"];
 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 ["s", "m"]>;
+    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 ["s", "m"];
+        };
+    };
+    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/tooltip/base-tooltip.d.ts

@@ -1,8 +1,18 @@
 import { PropsWithChildren } from 'react';
-import { TooltipContentProps, TooltipRootProps, TooltipTriggerProps } from './tooltip-type';
+import { TooltipContentProps, TooltipProviderProps, TooltipRootProps, TooltipTriggerProps } from './tooltip-type';
+export declare const TooltipProvider: {
+    (props: TooltipProviderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 declare const TooltipRoot: {
     (props: PropsWithChildren<TooltipRootProps>): import("react/jsx-runtime").JSX.Element;
-    Trigger: (props: PropsWithChildren<TooltipTriggerProps>) => import("react/jsx-runtime").JSX.Element;
-    Content: (props: PropsWithChildren<TooltipContentProps>) => import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    Trigger: import("react").ForwardRefExoticComponent<TooltipTriggerProps & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLButtonElement>>;
+    Content: import("react").ForwardRefExoticComponent<TooltipContentProps & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLDivElement>>;
 };
 export default TooltipRoot;

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

@@ -1,9 +1,10 @@
+export declare const direction: readonly ["top", "bottom", "left", "right"];
 export declare const commonTooltipProps: {};
 export declare const tooltipContentProps: {
     direction: {
         type: "className";
         className: string;
-        values: string[];
-        default: string;
+        values: readonly ["top", "bottom", "left", "right"];
+        default: "bottom";
     };
 };

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

@@ -1,3 +1,5 @@
+import { AsChildProps } from '../../helpers/types/common-props';
+import { direction } from './tooltip-props';
 export interface CommonTooltipProps {
     children: React.ReactNode;
     className?: string;
@@ -9,10 +11,20 @@ export interface TooltipRootProps {
     delayDuration?: number;
     disableHoverableContent?: boolean;
 }
-export interface TooltipTriggerProps extends CommonTooltipProps {
-    asChild?: boolean;
+export interface TooltipTriggerProps extends CommonTooltipProps, AsChildProps {
 }
-export interface TooltipContentProps extends CommonTooltipProps {
-    asChild?: boolean;
-    direction?: 'top' | 'bottom' | 'left' | 'right';
+export interface TooltipContentProps extends CommonTooltipProps, AsChildProps {
+    direction?: (typeof direction)[number];
+}
+export interface TooltipProviderProps {
+    children: React.ReactNode;
+    delayDuration?: number;
+    skipDelayDuration?: number;
+    disableHoverableContent?: boolean;
+}
+export interface TooltipProps extends TooltipRootProps {
+    trigger: React.ReactNode;
+    content: React.ReactNode;
+    direction?: (typeof direction)[number];
+    disabled?: boolean;
 }

package/dist/components/tooltip/tooltip.d.ts

@@ -1,8 +1,5 @@
-import { TooltipRootProps } from './tooltip-type';
-export interface TooltipProps extends TooltipRootProps {
-    trigger: React.ReactNode;
-    content: React.ReactNode;
-    direction?: 'top' | 'bottom' | 'left' | 'right';
-}
-declare const Tooltip: (props: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+import { TooltipProps } from './tooltip-type';
+export { TooltipProvider } from './base-tooltip';
+declare const Tooltip: import("react").ForwardRefExoticComponent<TooltipProps & import("react").RefAttributes<HTMLButtonElement>>;
 export default Tooltip;
+export type { TooltipProps, TooltipProviderProps } from './tooltip-type';

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

@@ -1,9 +1,26 @@
-import { StoryObj } from '@storybook/react/*';
-import Tooltip, { TooltipProps } from './tooltip';
+import type { StoryObj } from '@storybook/react-webpack5';
 declare const meta: {
     title: string;
-    component: (props: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+    component: import("react").ForwardRefExoticComponent<import("./tooltip-type").TooltipProps & import("react").RefAttributes<HTMLButtonElement>>;
+    argTypes: {
+        direction: {
+            control: {
+                type: "select";
+            };
+            options: readonly ["top", "bottom", "left", "right"];
+        };
+    };
+    args: {
+        trigger: import("react/jsx-runtime").JSX.Element;
+        content: import("react/jsx-runtime").JSX.Element;
+        direction: "right";
+    };
 };
 export default meta;
-type Story = StoryObj<typeof Tooltip>;
+type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+/** 네 방향을 한 번에 보인다. defaultOpen 은 Radix 가 다른 툴팁이 열릴 때 닫으므로 open 으로 고정한다. */
+export declare const Directions: Story;
+/** 하나에 올렸다가 옆으로 옮기면 skipDelayDuration(1초) 동안은 지연 없이 바로 뜬다. */
+export declare const SharedProvider: Story;
+export declare const Disabled: Story;