@nurihaus/web-design-system 3.0.1 → 3.1.0

package/dist/components/badge/icon-text-badge.d.ts

@@ -1,22 +1,4 @@
-import * as React from 'react';
-import { ReactNode } from 'react';
-import { colors } from '../../styles/token/colors';
-import { size } from './badge-props';
-import { CommonBadgeProps } from './badge-type';
-export interface IconTextBadgeProps extends Pick<CommonBadgeProps, 'asChild'> {
-    borderColor?: keyof typeof colors;
-    color?: keyof typeof colors;
-    backgroundColor?: keyof typeof colors;
-    width?: number | string;
-    size?: (typeof size)[number];
-    icon: ReactNode;
-    text: ReactNode;
-    style?: React.CSSProperties;
-    tooltip?: {
-        content: React.ReactNode;
-        position?: 'top' | 'bottom' | 'left' | 'right';
-        delayDuration?: number;
-    };
-}
-declare const IconTextBadge: React.ForwardRefExoticComponent<IconTextBadgeProps & React.RefAttributes<HTMLDivElement>>;
+import { IconTextBadgeProps } from './badge-type';
+declare const IconTextBadge: import("react").ForwardRefExoticComponent<IconTextBadgeProps & import("react").RefAttributes<HTMLDivElement>>;
 export default IconTextBadge;
+export type { IconTextBadgeProps } from './badge-type';

package/dist/components/badge/icon-text-option-badge.d.ts

@@ -1,17 +1,4 @@
-import { ReactNode } from 'react';
-import { colors } from '../../styles/token/colors';
-import { size } from './badge-props';
-import { CommonBadgeProps } from './badge-type';
-export interface IconTextOptionBadgeProps extends Pick<CommonBadgeProps, 'className'> {
-    borderColor?: keyof typeof colors;
-    color?: keyof typeof colors;
-    backgroundColor?: keyof typeof colors;
-    width?: number | string;
-    size?: (typeof size)[number];
-    icon: ReactNode;
-    text: ReactNode;
-    option: ReactNode;
-    style?: React.CSSProperties;
-}
+import { IconTextOptionBadgeProps } from './badge-type';
 declare const IconTextOptionBadge: import("react").ForwardRefExoticComponent<IconTextOptionBadgeProps & import("react").RefAttributes<HTMLDivElement>>;
 export default IconTextOptionBadge;
+export type { IconTextOptionBadgeProps } from './badge-type';

package/dist/components/badge/option-badge.d.ts

@@ -1,21 +1,4 @@
-import * as React from 'react';
-import { ReactNode } from 'react';
-import { colors } from '../../styles/token/colors';
-import { size } from './badge-props';
-import { CommonBadgeProps } from './badge-type';
-export interface OptionBadgeProps extends Pick<CommonBadgeProps, 'asChild'> {
-    borderColor?: keyof typeof colors;
-    color?: keyof typeof colors;
-    backgroundColor?: keyof typeof colors;
-    width?: number | string;
-    size?: (typeof size)[number];
-    option: ReactNode;
-    style?: React.CSSProperties;
-    tooltip?: {
-        content: React.ReactNode;
-        position?: 'top' | 'bottom' | 'left' | 'right';
-        delayDuration?: number;
-    };
-}
-declare const OptionBadge: React.ForwardRefExoticComponent<OptionBadgeProps & React.RefAttributes<HTMLDivElement>>;
+import { OptionBadgeProps } from './badge-type';
+declare const OptionBadge: import("react").ForwardRefExoticComponent<OptionBadgeProps & import("react").RefAttributes<HTMLDivElement>>;
 export default OptionBadge;
+export type { OptionBadgeProps } from './badge-type';

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

@@ -0,0 +1,19 @@
+import { BreadcrumbLinkProps } from './breadcrumb-type';
+declare const BreadcrumbRoot: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
+    ref?: ((instance: HTMLElement | 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<HTMLElement> | null | undefined;
+}, "ref"> & import("react").RefAttributes<HTMLElement>> & {
+    List: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> & {
+        ref?: ((instance: HTMLOListElement | 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<HTMLOListElement> | null | undefined;
+    }, "ref"> & import("react").RefAttributes<HTMLOListElement>>;
+    Item: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
+        ref?: ((instance: HTMLLIElement | 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<HTMLLIElement> | null | undefined;
+    }, "ref"> & import("react").RefAttributes<HTMLLIElement>>;
+    Link: import("react").ForwardRefExoticComponent<Omit<BreadcrumbLinkProps, "ref"> & import("react").RefAttributes<HTMLAnchorElement>>;
+    Page: 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>>;
+    Separator: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
+        ref?: ((instance: HTMLLIElement | 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<HTMLLIElement> | null | undefined;
+    }, "ref"> & import("react").RefAttributes<HTMLLIElement>>;
+};
+export default BreadcrumbRoot;

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

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

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

@@ -0,0 +1,33 @@
+import { ComponentPropsWithRef, ElementType, ReactNode } from 'react';
+import { AsChildProps, StyleProps } from '../../helpers/types/common-props';
+import { sizes } from './breadcrumb-props';
+export type BreadcrumbRootProps = ComponentPropsWithRef<'nav'>;
+export type BreadcrumbListProps = ComponentPropsWithRef<'ol'>;
+export type BreadcrumbItemProps = ComponentPropsWithRef<'li'>;
+/** `asChild` 로 next/link 같은 라우터 Link 와 합성할 수 있다. */
+export interface BreadcrumbLinkProps extends ComponentPropsWithRef<'a'>, AsChildProps {
+}
+/** 현재 위치. 링크가 아니고 `aria-current="page"` 가 붙는다. */
+export type BreadcrumbPageProps = ComponentPropsWithRef<'span'>;
+/** 항목 사이 구분자. `aria-hidden` 이라 보조 기술에는 읽히지 않는다. */
+export type BreadcrumbSeparatorProps = ComponentPropsWithRef<'li'>;
+export interface BreadcrumbItem {
+    id: string;
+    label: ReactNode;
+    /** 없으면 링크가 아닌 글자로 그린다. 마지막 항목은 href 가 있어도 현재 위치로 그린다. */
+    href?: string;
+}
+export interface BreadcrumbProps extends StyleProps {
+    items: BreadcrumbItem[];
+    size?: (typeof sizes)[number];
+    /** 마지막(현재 위치) 항목이 아닌 항목을 클릭하면 그 id 로 불린다. */
+    onItemClick?: (id: string) => void;
+    /** 항목 사이 구분자. 기본은 오른쪽 화살표 아이콘이다. */
+    separator?: ReactNode;
+    /**
+     * href 가 있는 항목을 그릴 링크 컴포넌트. next/link 같은 라우터 Link 를 넘기면 `<a>` 대신 그것으로 그린다.
+     * `href`·`className`·`onClick`·`children` 을 받고 ref 를 `<a>` 에 넘기는 컴포넌트여야 한다.
+     * next/link 의 href 타입(Url)과 맞추려고 props 를 제한하지 않는다.
+     */
+    linkComponent?: ElementType;
+}

package/dist/components/breadcrumb/breadcrumb.d.ts

@@ -0,0 +1,4 @@
+import { BreadcrumbProps } from './breadcrumb-type';
+declare const Breadcrumb: import("react").ForwardRefExoticComponent<BreadcrumbProps & import("react").RefAttributes<HTMLElement>>;
+export default Breadcrumb;
+export type { BreadcrumbProps, BreadcrumbItem } from './breadcrumb-type';

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

@@ -0,0 +1,25 @@
+import type { StoryObj } from '@storybook/react-webpack5';
+import { BreadcrumbItem } from './breadcrumb-type';
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<import("./breadcrumb-type").BreadcrumbProps & import("react").RefAttributes<HTMLElement>>;
+    argTypes: {
+        size: {
+            control: {
+                type: "select";
+            };
+            options: readonly ["xs", "s", "m", "l", "xl"];
+        };
+    };
+    args: {
+        items: BreadcrumbItem[];
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Sizes: Story;
+export declare const CustomSeparator: Story;
+export declare const WithoutHref: Story;
+export declare const Single: Story;
+export declare const LongLabels: Story;

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

@@ -1,5 +1,5 @@
 export declare const variant: readonly ["primary", "secondary", "ghost", "neutral", "confirm", "outlined"];
-export declare const size: readonly ["xl", "l", "r", "m", "s", "xs"];
+export declare const sizes: readonly ["xs", "s", "m", "l", "xl"];
 export declare const ctaButtonProps: {
     variant: {
         type: "className";
@@ -7,10 +7,5 @@ export declare const ctaButtonProps: {
         values: readonly ["primary", "secondary", "ghost", "neutral", "confirm", "outlined"];
         default: "primary";
     };
-    size: {
-        type: "className";
-        className: string;
-        values: readonly ["xl", "l", "r", "m", "s", "xs"];
-        default: "m";
-    };
+    size: import("../../helpers/types/propsDef").ClassNamePropsType<readonly ["xs", "s", "m", "l", "xl"]>;
 };

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

@@ -1,9 +1,17 @@
 import { ComponentPropsWithRef, ReactNode } from 'react';
+import { AsChildProps } from '../../helpers/types/common-props';
+import { sizes, variant } from './button-props';
 export interface CommonButtonProps {
     loading?: boolean;
 }
-export interface BaseButtonProps extends ComponentPropsWithRef<'button'>, CommonButtonProps {
-    children?: React.ReactNode;
-    asChild?: boolean;
+export interface BaseButtonProps extends ComponentPropsWithRef<'button'>, CommonButtonProps, AsChildProps {
+    children?: ReactNode;
     loadingComponent?: ReactNode;
 }
+export interface CTAButtonProps extends ComponentPropsWithRef<'button'>, CommonButtonProps {
+    variant?: (typeof variant)[number];
+    size?: (typeof sizes)[number];
+    text: string | ReactNode;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
+}

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

@@ -1,8 +1,7 @@
-import { StoryObj } from '@storybook/react/*';
-import { CTAButtonProps } from './cta-button';
+import type { StoryObj } from '@storybook/react-webpack5';
 declare const meta: {
     title: string;
-    component: (props: CTAButtonProps) => import("react/jsx-runtime").JSX.Element;
+    component: import("react").ForwardRefExoticComponent<Omit<import("./button-type").CTAButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
     argTypes: {
         variant: {
             control: {
@@ -14,16 +13,20 @@ declare const meta: {
             control: {
                 type: "select";
             };
-            options: readonly ["xl", "l", "r", "m", "s", "xs"];
+            options: readonly ["xs", "s", "m", "l", "xl"];
         };
     };
+    args: {
+        text: string;
+        variant: "primary";
+        size: "l";
+    };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
-export declare const Primary: StoryObj<CTAButtonProps>;
-export declare const Secondary: StoryObj<CTAButtonProps>;
-export declare const Ghost: StoryObj<CTAButtonProps>;
-export declare const Neutral: StoryObj<CTAButtonProps>;
-export declare const Confirm: StoryObj<CTAButtonProps>;
-export declare const Outlined: StoryObj<CTAButtonProps>;
+export declare const Variants: Story;
+export declare const Sizes: Story;
+export declare const Loading: Story;
+export declare const Disabled: Story;
+export declare const WithIcons: Story;

package/dist/components/button/cta-button.d.ts

@@ -1,13 +1,4 @@
-import { ComponentPropsWithRef } from 'react';
-import { ReactNode } from 'react';
-import { size, variant } from './button-props';
-import { CommonButtonProps } from './button-type';
-export interface CTAButtonProps extends ComponentPropsWithRef<'button'>, CommonButtonProps {
-    variant?: (typeof variant)[number];
-    size?: (typeof size)[number];
-    text: string | ReactNode;
-    leftIcon?: ReactNode;
-    rightIcon?: ReactNode;
-}
-declare const CTAButton: (props: CTAButtonProps) => import("react/jsx-runtime").JSX.Element;
+import { CTAButtonProps } from './button-type';
+declare const CTAButton: import("react").ForwardRefExoticComponent<Omit<CTAButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 export default CTAButton;
+export type { CTAButtonProps } from './button-type';

package/dist/components/check-box/base-check-box.d.ts

@@ -1,8 +1,12 @@
-import { PropsWithChildren } from 'react';
 import { CheckBoxIndicatorProps, CheckBoxLabelProps, CheckBoxRootProps } from './check-box-type';
-declare const CheckBoxRoot: {
-    (props: PropsWithChildren<CheckBoxRootProps>): import("react/jsx-runtime").JSX.Element;
-    Label: (props: PropsWithChildren<CheckBoxLabelProps>) => import("react/jsx-runtime").JSX.Element;
-    Indicator: (props: PropsWithChildren<CheckBoxIndicatorProps>) => import("react/jsx-runtime").JSX.Element;
+declare const CheckBoxRoot: import("react").ForwardRefExoticComponent<CheckBoxRootProps & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLButtonElement>> & {
+    Label: import("react").ForwardRefExoticComponent<CheckBoxLabelProps & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLSpanElement>>;
+    Indicator: import("react").ForwardRefExoticComponent<CheckBoxIndicatorProps & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLSpanElement>>;
 };
 export default CheckBoxRoot;

package/dist/components/check-box/check-box-props.d.ts

@@ -1,9 +1,4 @@
-export declare const size: string[];
+export declare const sizes: readonly ["s", "m", "l"];
 export declare const checkBoxIndicatorProps: {
-    size: {
-        type: "className";
-        className: string;
-        values: string[];
-        default: string;
-    };
+    size: import("../../helpers/types/propsDef").ClassNamePropsType<readonly ["s", "m", "l"]>;
 };

package/dist/components/check-box/check-box-type.d.ts

@@ -1,3 +1,6 @@
+import { ReactNode } from 'react';
+import { AsChildProps } from '../../helpers/types/common-props';
+import { sizes } from './check-box-props';
 export interface CheckBoxRootProps {
     checked?: boolean;
     onChange?: (checked: boolean) => void;
@@ -5,12 +8,16 @@ export interface CheckBoxRootProps {
     disabled?: boolean;
     className?: string;
 }
-export interface CheckBoxIndicatorProps {
-    asChild?: boolean;
+export interface CheckBoxIndicatorProps extends AsChildProps {
     className?: string;
 }
-export interface CheckBoxLabelProps {
-    asChild?: boolean;
+export interface CheckBoxLabelProps extends AsChildProps {
     preventChangeOnClick?: boolean;
     className?: string;
 }
+export interface CheckBoxProps extends CheckBoxRootProps {
+    label: string | ReactNode;
+    size?: (typeof sizes)[number];
+    className?: string;
+    onClick?: (checked: boolean) => void;
+}

package/dist/components/check-box/check-box.d.ts

@@ -1,11 +1,4 @@
-import { ReactNode } from 'react';
-import { size } from './check-box-props';
-import { CheckBoxRootProps } from './check-box-type';
-export interface CheckBoxProps extends CheckBoxRootProps {
-    label: string | ReactNode;
-    size?: (typeof size)[number];
-    className?: string;
-    onClick?: (checked: boolean) => void;
-}
-declare const CheckBox: (props: CheckBoxProps) => import("react/jsx-runtime").JSX.Element;
+import { CheckBoxProps } from './check-box-type';
+declare const CheckBox: import("react").ForwardRefExoticComponent<CheckBoxProps & import("react").RefAttributes<HTMLButtonElement>>;
 export default CheckBox;
+export type { CheckBoxProps } from './check-box-type';

package/dist/components/check-box/check-box.stories.d.ts

@@ -1,9 +1,24 @@
-import { StoryObj } from '@storybook/react/*';
-import CheckBox from './check-box';
+import type { StoryObj } from '@storybook/react-webpack5';
 declare const meta: {
     title: string;
-    component: (props: import("./check-box").CheckBoxProps) => import("react/jsx-runtime").JSX.Element;
+    component: import("react").ForwardRefExoticComponent<import("./check-box-type").CheckBoxProps & 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 CheckBox>;
+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/collapsible-menu/base-collapsible-menu.d.ts

@@ -1,8 +1,12 @@
-import { PropsWithChildren } from 'react';
 import { CollapsibleMenuContentProps, CollapsibleMenuRootProps, CollapsibleMenuTriggerProps } from './collapsible-menu-type';
-declare const CollapsibleMenuRoot: {
-    (props: PropsWithChildren<CollapsibleMenuRootProps>): import("react/jsx-runtime").JSX.Element;
-    Trigger: (props: PropsWithChildren<CollapsibleMenuTriggerProps>) => import("react/jsx-runtime").JSX.Element;
-    Content: (props: PropsWithChildren<CollapsibleMenuContentProps>) => import("react/jsx-runtime").JSX.Element;
+declare const CollapsibleMenuRoot: import("react").ForwardRefExoticComponent<CollapsibleMenuRootProps & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>> & {
+    Trigger: import("react").ForwardRefExoticComponent<CollapsibleMenuTriggerProps & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLButtonElement>>;
+    Content: import("react").ForwardRefExoticComponent<CollapsibleMenuContentProps & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLDivElement>>;
 };
 export default CollapsibleMenuRoot;

package/dist/components/collapsible-menu/collapsible-menu-props.d.ts

@@ -1,14 +1,5 @@
-export declare const size: readonly ["m", "l"];
+export declare const sizes: readonly ["s", "m"];
 export declare const collapsibleMenuProps: {
-    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/collapsible-menu/collapsible-menu-type.d.ts

@@ -1,18 +1,42 @@
-import { CSSProperties } from 'react';
+import { ComponentType, MouseEvent, ReactNode } from 'react';
+import { AsChildProps, StyleProps } from '../../helpers/types/common-props';
+import { sizes } from './collapsible-menu-props';
 export interface CollapsibleMenuRootProps {
     defaultOpen?: boolean;
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
     disabled?: boolean;
 }
-export interface CollapsibleMenuTriggerProps {
-    asChild?: boolean;
-    className?: string;
-    style?: CSSProperties;
+export interface CollapsibleMenuTriggerProps extends AsChildProps, StyleProps {
     disabled?: boolean;
 }
-export interface CollapsibleMenuContentProps {
-    asChild?: boolean;
-    className?: string;
-    style?: CSSProperties;
+export interface CollapsibleMenuContentProps extends AsChildProps, StyleProps {
+}
+export interface CollapsibleMenuItem {
+    key: string;
+    item: ReactNode;
+    disabled?: boolean;
+    href?: string;
+    onSelect?: () => void;
+    children?: CollapsibleMenuItem[];
+    defaultOpen?: boolean;
+}
+/** `href` 가 있는 항목을 그릴 때 `linkComponent` 가 받는 props. next/link 의 Link 를 그대로 넘길 수 있다. */
+export interface CollapsibleMenuLinkProps {
+    href: string;
+    className: string;
+    children: ReactNode;
+    onClick: (e: MouseEvent) => void;
+    'aria-current'?: 'page';
+    'aria-disabled'?: 'true';
+}
+export interface CollapsibleMenuProps extends StyleProps {
+    size?: (typeof sizes)[number];
+    items: CollapsibleMenuItem[];
+    activeKey?: string;
+    onActiveKeyChange?: (key: string) => void;
+    indent?: number;
+    chevron?: ReactNode;
+    width?: number | string;
+    linkComponent?: ComponentType<CollapsibleMenuLinkProps>;
 }

package/dist/components/collapsible-menu/collapsible-menu.d.ts

@@ -1,24 +1,4 @@
-import { CSSProperties, ReactNode } from 'react';
-import { size } from './collapsible-menu-props';
-export interface CollapsibleMenuItem {
-    key: string;
-    item: ReactNode;
-    disabled?: boolean;
-    href?: string;
-    onSelect?: () => void;
-    children?: CollapsibleMenuItem[];
-    defaultOpen?: boolean;
-}
-export interface CollapsibleMenuProps {
-    size?: typeof size;
-    items: CollapsibleMenuItem[];
-    activeKey?: string;
-    onActiveKeyChange?: (key: string) => void;
-    indent?: number;
-    chevron?: ReactNode;
-    width?: string;
-    style?: CSSProperties;
-    className?: string;
-}
-declare const CollapsibleMenu: import("react").ForwardRefExoticComponent<CollapsibleMenuProps & import("react").RefAttributes<HTMLDivElement>>;
+import { CollapsibleMenuProps } from './collapsible-menu-type';
+declare const CollapsibleMenu: import("react").ForwardRefExoticComponent<CollapsibleMenuProps & import("react").RefAttributes<HTMLElement>>;
 export default CollapsibleMenu;
+export type { CollapsibleMenuProps, CollapsibleMenuItem, CollapsibleMenuLinkProps, } from './collapsible-menu-type';

package/dist/components/collapsible-menu/collapsible-menu.stories.d.ts

@@ -1,9 +1,25 @@
-import { StoryObj } from '@storybook/react/*';
-import CollapsibleMenu from './collapsible-menu';
+import type { StoryObj } from '@storybook/react-webpack5';
+import { CollapsibleMenuItem } from './collapsible-menu-type';
 declare const meta: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<import("./collapsible-menu").CollapsibleMenuProps & import("react").RefAttributes<HTMLDivElement>>;
+    component: import("react").ForwardRefExoticComponent<import("./collapsible-menu-type").CollapsibleMenuProps & import("react").RefAttributes<HTMLElement>>;
+    argTypes: {
+        size: {
+            control: {
+                type: "select";
+            };
+            options: readonly ["s", "m"];
+        };
+    };
+    args: {
+        items: CollapsibleMenuItem[];
+        width: number;
+    };
 };
 export default meta;
-type Story = StoryObj<typeof CollapsibleMenu>;
+type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const Sizes: Story;
+/** 자식이 있는 항목에 disabled 를 주면 그룹(Radix Collapsible root)이 접히지도 펼쳐지지도 않는다. */
+export declare const Disabled: Story;
+export declare const CustomLink: Story;

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

@@ -0,0 +1,15 @@
+import { PropsWithChildren } from 'react';
+import { DrawerCloseProps, DrawerDescriptionProps, DrawerRootProps, DrawerTitleProps, DrawerTriggerProps } from './drawer-type';
+declare const DrawerRoot: {
+    (props: PropsWithChildren<DrawerRootProps>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    Trigger: import("react").ForwardRefExoticComponent<Omit<DrawerTriggerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Content: 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>>;
+    Title: import("react").ForwardRefExoticComponent<Omit<DrawerTitleProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+    Description: import("react").ForwardRefExoticComponent<Omit<DrawerDescriptionProps, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+    Close: import("react").ForwardRefExoticComponent<Omit<DrawerCloseProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+};
+export default DrawerRoot;

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

@@ -0,0 +1,11 @@
+export declare const sizes: readonly ["s", "m", "l"];
+export declare const sides: readonly ["right", "left", "bottom"];
+export declare const drawerContentProps: {
+    size: import("../../helpers/types/propsDef").ClassNamePropsType<readonly ["s", "m", "l"]>;
+    side: {
+        type: "className";
+        className: string;
+        values: readonly ["right", "left", "bottom"];
+        default: "right";
+    };
+};

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

@@ -0,0 +1,28 @@
+import { ComponentPropsWithRef, ReactElement, ReactNode } from 'react';
+import { AsChildProps, StyleProps } from '../../helpers/types/common-props';
+import { sides, sizes } from './drawer-props';
+export interface DrawerRootProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+export interface DrawerTriggerProps extends ComponentPropsWithRef<'button'>, AsChildProps {
+}
+export type DrawerContentProps = ComponentPropsWithRef<'div'>;
+export interface DrawerTitleProps extends ComponentPropsWithRef<'h2'>, AsChildProps {
+}
+export interface DrawerDescriptionProps extends ComponentPropsWithRef<'p'>, AsChildProps {
+}
+export interface DrawerCloseProps extends ComponentPropsWithRef<'button'>, AsChildProps {
+}
+export interface DrawerProps extends DrawerRootProps, StyleProps {
+    /** asChild 로 감싸 클릭하면 열리는 요소. 없으면 open·defaultOpen 으로만 연다 */
+    trigger?: ReactElement;
+    title: ReactNode;
+    description?: ReactNode;
+    children?: ReactNode;
+    footer?: ReactNode;
+    side?: (typeof sides)[number];
+    size?: (typeof sizes)[number];
+    showCloseIcon?: boolean;
+}

package/dist/components/drawer/drawer.d.ts

@@ -0,0 +1,4 @@
+import { DrawerProps } from './drawer-type';
+declare const Drawer: import("react").ForwardRefExoticComponent<DrawerProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Drawer;
+export type { DrawerProps } from './drawer-type';

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

@@ -0,0 +1,34 @@
+import type { StoryObj } from '@storybook/react-webpack5';
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<import("./drawer-type").DrawerProps & import("react").RefAttributes<HTMLDivElement>>;
+    argTypes: {
+        side: {
+            control: {
+                type: "select";
+            };
+            options: readonly ["right", "left", "bottom"];
+        };
+        size: {
+            control: {
+                type: "select";
+            };
+            options: readonly ["s", "m", "l"];
+        };
+    };
+    args: {
+        title: string;
+        children: string;
+        trigger: import("react/jsx-runtime").JSX.Element;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Sides: Story;
+export declare const Sizes: Story;
+export declare const Bottom: Story;
+export declare const WithDescriptionAndFooter: Story;
+export declare const WithoutCloseIcon: Story;
+export declare const LongContent: Story;
+export declare const Controlled: Story;