@nurihaus/web-design-system 3.0.0 → 3.0.3

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/drop-down/base-drop-down.d.ts

@@ -2,9 +2,17 @@ import { PropsWithChildren } from 'react';
 import { DropDownContentProps, DropDownItemProps, DropDownRootProps, DropDownTriggerProps, DropDownValueProps } from './drop-down-type';
 declare const DropDownRoot: {
     (props: PropsWithChildren<DropDownRootProps>): import("react/jsx-runtime").JSX.Element;
-    Trigger: (props: PropsWithChildren<DropDownTriggerProps>) => import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    Trigger: import("react").ForwardRefExoticComponent<DropDownTriggerProps & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLButtonElement>>;
     Value: import("react").ForwardRefExoticComponent<DropDownValueProps & import("react").RefAttributes<HTMLSpanElement>>;
-    Content: (props: PropsWithChildren<DropDownContentProps>) => import("react/jsx-runtime").JSX.Element;
-    Item: (props: PropsWithChildren<DropDownItemProps>) => import("react/jsx-runtime").JSX.Element;
+    Content: import("react").ForwardRefExoticComponent<DropDownContentProps & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLDivElement>>;
+    Item: import("react").ForwardRefExoticComponent<DropDownItemProps & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLDivElement>>;
 };
 export default DropDownRoot;

package/dist/components/drop-down/drop-down-props.d.ts

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

@@ -1,4 +1,6 @@
-import { CSSProperties, ReactNode } from 'react';
+import { ReactNode } from 'react';
+import { AsChildProps, StyleProps } from '../../helpers/types/common-props';
+import { sizes } from './drop-down-props';
 export interface DropDownRootProps {
     defaultOpen?: boolean;
     open?: boolean;
@@ -8,30 +10,47 @@ export interface DropDownRootProps {
     onValueChange?: (value: string) => void;
     disabled?: boolean;
 }
-export interface DropDownTriggerProps {
-    asChild?: boolean;
-    className?: string;
-    style?: CSSProperties;
+export interface DropDownTriggerProps extends AsChildProps, StyleProps {
 }
-export interface DropDownValueProps {
-    asChild?: boolean;
+export interface DropDownValueProps extends AsChildProps, StyleProps {
     defaultValue?: string;
-    className?: string;
     placeholder?: ReactNode;
-    style?: CSSProperties;
 }
-export interface DropDownContentProps {
-    asChild?: boolean;
-    className?: string;
+export interface DropDownContentProps extends AsChildProps, StyleProps {
     side?: 'top' | 'bottom' | 'left' | 'right';
     align?: 'start' | 'center' | 'end';
     position?: 'popper' | 'item-aligned';
-    style?: CSSProperties;
 }
-export interface DropDownItemProps {
-    asChild?: boolean;
+export interface DropDownItemProps extends AsChildProps {
     className?: string;
     value: string;
     disabled?: boolean;
     onClick?: () => void;
 }
+export interface DropDownProps extends StyleProps {
+    size?: (typeof sizes)[number];
+    defaultValue?: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    renderValue?: (value?: string) => ReactNode;
+    options?: {
+        label: ReactNode;
+        value: string;
+        disabled?: boolean;
+    }[];
+    renderOption?: (props: {
+        isOpen: boolean;
+        close: () => void;
+    }) => ReactNode;
+    placeholder?: ReactNode;
+    disabled?: boolean;
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
+    width?: number | string;
+    side?: 'top' | 'bottom' | 'left' | 'right';
+    align?: 'start' | 'center' | 'end';
+    position?: 'popper' | 'item-aligned';
+}

package/dist/components/drop-down/drop-down.d.ts

@@ -1,33 +1,4 @@
-import { CSSProperties, ReactNode } from 'react';
-import { size } from './drop-down-props';
-export interface DropDownProps {
-    size?: (typeof size)[number];
-    defaultValue?: string;
-    value?: string;
-    onValueChange?: (value: string) => void;
-    renderValue?: (value?: string) => ReactNode;
-    options?: {
-        label: ReactNode;
-        value: string;
-        disabled?: boolean;
-    }[];
-    renderOption?: (props: {
-        isOpen: boolean;
-        close: () => void;
-    }) => ReactNode;
-    placeholder?: ReactNode;
-    disabled?: boolean;
-    defaultOpen?: boolean;
-    open?: boolean;
-    onOpenChange?: (open: boolean) => void;
-    leftIcon?: ReactNode;
-    rightIcon?: ReactNode;
-    width?: string;
-    side?: 'top' | 'bottom' | 'left' | 'right';
-    align?: 'start' | 'center' | 'end';
-    position?: 'popper' | 'item-aligned';
-    style?: CSSProperties;
-    className?: string;
-}
-declare const DropDown: import("react").ForwardRefExoticComponent<DropDownProps & import("react").RefAttributes<HTMLDivElement>>;
+import { DropDownProps } from './drop-down-type';
+declare const DropDown: import("react").ForwardRefExoticComponent<DropDownProps & import("react").RefAttributes<HTMLSpanElement>>;
 export default DropDown;
+export type { DropDownProps } from './drop-down-type';

package/dist/components/drop-down/drop-down.stories.d.ts

@@ -1,9 +1,28 @@
-import { StoryObj } from '@storybook/react/*';
-import DropDown from './drop-down';
+import type { StoryObj } from '@storybook/react-webpack5';
 declare const meta: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<import("./drop-down").DropDownProps & import("react").RefAttributes<HTMLDivElement>>;
+    component: import("react").ForwardRefExoticComponent<import("./drop-down-type").DropDownProps & import("react").RefAttributes<HTMLSpanElement>>;
+    argTypes: {
+        size: {
+            control: {
+                type: "select";
+            };
+            options: readonly ["s", "m"];
+        };
+    };
+    args: {
+        width: string;
+        placeholder: import("react/jsx-runtime").JSX.Element;
+    };
 };
 export default meta;
-type Story = StoryObj<typeof DropDown>;
+type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+/** renderOption 을 쓰면 항목 선택과 닫기(close)를 직접 처리한다. */
+export declare const CustomOptionRender: Story;
+export declare const WithIcons: Story;
+export declare const Sizes: Story;
+export declare const Selected: Story;
+export declare const Disabled: Story;
+/** 세 번째 항목은 disabled 라 고를 수 없다. */
+export declare const Open: Story;

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

@@ -0,0 +1,3 @@
+import { BaseTextProps } from './text-type';
+declare const BaseText: import("react").ForwardRefExoticComponent<BaseTextProps & import("react").RefAttributes<HTMLElement>>;
+export default BaseText;

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

@@ -0,0 +1,16 @@
+import { colors } from '../../../styles/token/colors';
+export declare const fontSize: readonly ["xsm", "sm", "base", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl"];
+export declare const weight: readonly ["regular", "medium", "semibold", "bold", "extrabold"];
+export declare const color: (keyof typeof colors)[];
+export declare const textAlign: readonly ["left", "center"];
+export declare const textDecoration: readonly ["underline", "none", "line-through", "overline", "blink"];
+export declare const wordBreak: readonly ["normal", "break-all", "break-word", "keep-all"];
+export declare const whiteSpace: readonly ["normal", "nowrap", "pre", "pre-line", "pre-wrap"];
+export declare const styleClassProps: readonly ["textAlign", "textDecoration", "wordBreak", "whiteSpace"];
+export declare const textProps: {
+    color: {
+        type: "className";
+        className: string;
+        values: ("grey-scale-600" | "transparent" | "purple-50" | "purple-100" | "purple-200" | "purple-300" | "purple-400" | "purple-500" | "purple-600" | "purple-700" | "purple-800" | "purple-900" | "grey-scale-50" | "grey-scale-100" | "grey-scale-200" | "grey-scale-300" | "grey-scale-400" | "grey-scale-500" | "grey-scale-700" | "grey-scale-800" | "grey-scale-900" | "accent-red-50" | "accent-red-100" | "accent-red-200" | "accent-red-300" | "accent-red-400" | "accent-red-500" | "accent-red-600" | "accent-red-700" | "accent-red-800" | "accent-red-900" | "accent-pink-50" | "accent-pink-100" | "accent-pink-200" | "accent-pink-300" | "accent-pink-400" | "accent-pink-500" | "accent-pink-600" | "accent-pink-700" | "accent-pink-800" | "accent-pink-900" | "accent-magenta-50" | "accent-magenta-100" | "accent-magenta-200" | "accent-magenta-300" | "accent-magenta-400" | "accent-magenta-500" | "accent-magenta-600" | "accent-magenta-700" | "accent-magenta-800" | "accent-magenta-900" | "accent-blue-50" | "accent-blue-100" | "accent-blue-200" | "accent-blue-300" | "accent-blue-400" | "accent-blue-500" | "accent-blue-600" | "accent-blue-700" | "accent-blue-800" | "accent-blue-900" | "accent-mint-50" | "accent-mint-100" | "accent-mint-200" | "accent-mint-300" | "accent-mint-400" | "accent-mint-500" | "accent-mint-600" | "accent-mint-700" | "accent-mint-800" | "accent-mint-900" | "accent-green-50" | "accent-green-100" | "accent-green-200" | "accent-green-300" | "accent-green-400" | "accent-green-500" | "accent-green-600" | "accent-green-700" | "accent-green-800" | "accent-green-900" | "accent-yellow-50" | "accent-yellow-100" | "accent-yellow-200" | "accent-yellow-300" | "accent-yellow-400" | "accent-yellow-500" | "accent-yellow-600" | "accent-yellow-700" | "accent-yellow-800" | "accent-yellow-900" | "accent-orange-50" | "accent-orange-100" | "accent-orange-200" | "accent-orange-300" | "accent-orange-400" | "accent-orange-500" | "accent-orange-600" | "accent-orange-700" | "accent-orange-800" | "accent-orange-900" | "black" | "white")[];
+    };
+};

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

@@ -1,9 +1,10 @@
 import { CSSProperties, HTMLAttributes, ReactNode } from 'react';
 import { colors } from '../../../styles/token/colors';
+import { fontSize, weight } from './text-props';
 export interface TextProps extends HTMLAttributes<HTMLElement> {
     text: ReactNode;
-    size: 'xsm' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';
-    weight: 'regular' | 'medium' | 'semibold' | 'bold' | 'extrabold';
+    size: (typeof fontSize)[number];
+    weight: (typeof weight)[number];
     color?: keyof typeof colors;
     textDecoration?: CSSProperties['textDecoration'];
     textAlign?: CSSProperties['textAlign'];
@@ -11,3 +12,6 @@ export interface TextProps extends HTMLAttributes<HTMLElement> {
     whiteSpace?: CSSProperties['whiteSpace'];
     as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'strong';
 }
+export interface BaseTextProps extends HTMLAttributes<HTMLElement> {
+    as?: TextProps['as'];
+}

package/dist/components/elements/text/text.d.ts

@@ -1,3 +1,4 @@
 import { TextProps } from './text-type';
-declare const Text: (props: TextProps) => import("react/jsx-runtime").JSX.Element;
+declare const Text: import("react").ForwardRefExoticComponent<TextProps & import("react").RefAttributes<HTMLElement>>;
 export default Text;
+export type { TextProps } from './text-type';

package/dist/components/elements/text/text.stories.d.ts

@@ -1,9 +1,49 @@
-import { StoryObj } from "@storybook/react/*";
+import type { StoryObj } from '@storybook/react-webpack5';
 declare const meta: {
     title: string;
-    component: (props: import("./text-type").TextProps) => import("react/jsx-runtime").JSX.Element;
+    component: import("react").ForwardRefExoticComponent<import("./text-type").TextProps & import("react").RefAttributes<HTMLElement>>;
+    argTypes: {
+        size: {
+            control: {
+                type: "select";
+            };
+            options: readonly ["xsm", "sm", "base", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl"];
+        };
+        weight: {
+            control: {
+                type: "select";
+            };
+            options: readonly ["regular", "medium", "semibold", "bold", "extrabold"];
+        };
+        textAlign: {
+            control: {
+                type: "select";
+            };
+            options: readonly ["left", "center"];
+        };
+        textDecoration: {
+            control: {
+                type: "select";
+            };
+            options: readonly ["underline", "none", "line-through", "overline", "blink"];
+        };
+        color: {
+            control: {
+                type: "select";
+            };
+            options: ("grey-scale-600" | "transparent" | "purple-50" | "purple-100" | "purple-200" | "purple-300" | "purple-400" | "purple-500" | "purple-600" | "purple-700" | "purple-800" | "purple-900" | "grey-scale-50" | "grey-scale-100" | "grey-scale-200" | "grey-scale-300" | "grey-scale-400" | "grey-scale-500" | "grey-scale-700" | "grey-scale-800" | "grey-scale-900" | "accent-red-50" | "accent-red-100" | "accent-red-200" | "accent-red-300" | "accent-red-400" | "accent-red-500" | "accent-red-600" | "accent-red-700" | "accent-red-800" | "accent-red-900" | "accent-pink-50" | "accent-pink-100" | "accent-pink-200" | "accent-pink-300" | "accent-pink-400" | "accent-pink-500" | "accent-pink-600" | "accent-pink-700" | "accent-pink-800" | "accent-pink-900" | "accent-magenta-50" | "accent-magenta-100" | "accent-magenta-200" | "accent-magenta-300" | "accent-magenta-400" | "accent-magenta-500" | "accent-magenta-600" | "accent-magenta-700" | "accent-magenta-800" | "accent-magenta-900" | "accent-blue-50" | "accent-blue-100" | "accent-blue-200" | "accent-blue-300" | "accent-blue-400" | "accent-blue-500" | "accent-blue-600" | "accent-blue-700" | "accent-blue-800" | "accent-blue-900" | "accent-mint-50" | "accent-mint-100" | "accent-mint-200" | "accent-mint-300" | "accent-mint-400" | "accent-mint-500" | "accent-mint-600" | "accent-mint-700" | "accent-mint-800" | "accent-mint-900" | "accent-green-50" | "accent-green-100" | "accent-green-200" | "accent-green-300" | "accent-green-400" | "accent-green-500" | "accent-green-600" | "accent-green-700" | "accent-green-800" | "accent-green-900" | "accent-yellow-50" | "accent-yellow-100" | "accent-yellow-200" | "accent-yellow-300" | "accent-yellow-400" | "accent-yellow-500" | "accent-yellow-600" | "accent-yellow-700" | "accent-yellow-800" | "accent-yellow-900" | "accent-orange-50" | "accent-orange-100" | "accent-orange-200" | "accent-orange-300" | "accent-orange-400" | "accent-orange-500" | "accent-orange-600" | "accent-orange-700" | "accent-orange-800" | "accent-orange-900" | "black" | "white")[];
+        };
+    };
+    args: {
+        text: string;
+        size: "base";
+        weight: "regular";
+    };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
-export declare const Bold: Story;
+export declare const Sizes: Story;
+export declare const Weights: Story;
+export declare const Colors: Story;
+export declare const AlignAndDecoration: Story;

package/dist/components/loading/index.d.ts

@@ -1,6 +1,6 @@
-export { default as Spinner } from "./spinner/spinner";
-export { default as InlineLoading } from "./inline-loading/inline-loading";
-export { default as OverlayLoading } from "./overlay-loading/overlay-loading";
-export type { SpinnerProps } from "./spinner/spinner-type";
-export type { InlineLoadingProps } from "./inline-loading/inline-loading-type";
-export type { OverlayLoadingProps } from "./overlay-loading/overlay-loading-type";
+export { default as Spinner } from './spinner/spinner';
+export { default as InlineLoading } from './inline-loading/inline-loading';
+export { default as OverlayLoading } from './overlay-loading/overlay-loading';
+export type { SpinnerProps } from './spinner/spinner-type';
+export type { InlineLoadingProps } from './inline-loading/inline-loading-type';
+export type { OverlayLoadingProps } from './overlay-loading/overlay-loading-type';

package/dist/components/loading/inline-loading/base-inline-loading.d.ts

@@ -0,0 +1,3 @@
+import { BaseInlineLoadingProps } from './inline-loading-type';
+declare const BaseInlineLoading: import("react").ForwardRefExoticComponent<Omit<BaseInlineLoadingProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export default BaseInlineLoading;

package/dist/components/loading/inline-loading/inline-loading-props.d.ts

@@ -0,0 +1,9 @@
+export declare const justifyContent: readonly ["flex-start", "center", "flex-end", "space-between"];
+export declare const inlineLoadingProps: {
+    justifyContent: {
+        type: "css";
+        key: "justifyContent";
+        values: readonly ["flex-start", "center", "flex-end", "space-between"];
+        default: "flex-start";
+    };
+};

package/dist/components/loading/inline-loading/inline-loading-type.d.ts

@@ -1,8 +1,10 @@
-import { colors } from "../../../styles/token/colors";
-type Justify = "flex-start" | "center" | "flex-end" | "space-between";
-export interface InlineLoadingProps {
+import { CSSProperties, ComponentPropsWithRef } from 'react';
+import { StyleProps } from '../../../helpers/types/common-props';
+import { justifyContent } from './inline-loading-props';
+export interface InlineLoadingProps extends StyleProps {
     size: number;
-    justifyContent?: Justify;
-    indicatorColor?: keyof typeof colors;
+    justifyContent?: (typeof justifyContent)[number];
+}
+export interface BaseInlineLoadingProps extends ComponentPropsWithRef<'div'> {
+    ringStyle?: CSSProperties;
 }
-export {};

package/dist/components/loading/inline-loading/inline-loading.d.ts

@@ -1,3 +1,4 @@
-import { InlineLoadingProps } from "./inline-loading-type";
-declare const InlineLoading: ({ size, justifyContent, indicatorColor, }: InlineLoadingProps) => import("react/jsx-runtime").JSX.Element;
+import { InlineLoadingProps } from './inline-loading-type';
+declare const InlineLoading: import("react").ForwardRefExoticComponent<InlineLoadingProps & import("react").RefAttributes<HTMLDivElement>>;
 export default InlineLoading;
+export type { InlineLoadingProps } from './inline-loading-type';

package/dist/components/loading/inline-loading/inline-loading.stories.d.ts

@@ -1,24 +1,20 @@
-import type { StoryObj } from '@storybook/react';
+import type { StoryObj } from '@storybook/react-webpack5';
 declare const meta: {
     title: string;
-    component: ({ size, justifyContent, indicatorColor, }: import("./inline-loading-type").InlineLoadingProps) => import("react/jsx-runtime").JSX.Element;
-    tags: string[];
+    component: import("react").ForwardRefExoticComponent<import("./inline-loading-type").InlineLoadingProps & import("react").RefAttributes<HTMLDivElement>>;
     argTypes: {
         justifyContent: {
             control: "inline-radio";
-            options: string[];
-        };
-        indicatorColor: {
-            control: "select";
-            options: string[];
+            options: readonly ["flex-start", "center", "flex-end", "space-between"];
         };
     };
     args: {
         size: number;
         justifyContent: "flex-start";
-        indicatorColor: "grey-scale-200";
     };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const Justify: Story;
+export declare const Sizes: Story;

package/dist/components/loading/overlay-loading/base-overlay-loading.d.ts

@@ -0,0 +1,3 @@
+import { BaseOverlayLoadingProps } from './overlay-loading-type';
+declare const BaseOverlayLoading: import("react").ForwardRefExoticComponent<Omit<BaseOverlayLoadingProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export default BaseOverlayLoading;

package/dist/components/loading/overlay-loading/overlay-loading-props.d.ts

@@ -0,0 +1,7 @@
+export declare const overlayLoadingProps: {
+    zIndex: {
+        type: "css";
+        key: "zIndex";
+        default: number;
+    };
+};

package/dist/components/loading/overlay-loading/overlay-loading-type.d.ts

@@ -1,8 +1,11 @@
-import { colors } from "../../../styles/token/colors";
-export interface OverlayLoadingProps {
+import { CSSProperties, ComponentPropsWithRef } from 'react';
+import { StyleProps } from '../../../helpers/types/common-props';
+export interface OverlayLoadingProps extends StyleProps {
     open?: boolean;
     message?: string;
-    spinnerColor?: keyof typeof colors;
     backdropOpacity?: number;
     zIndex?: number;
 }
+export interface BaseOverlayLoadingProps extends ComponentPropsWithRef<'div'> {
+    backdropStyle?: CSSProperties;
+}

package/dist/components/loading/overlay-loading/overlay-loading.d.ts

@@ -1,4 +1,4 @@
-import type { OverlayLoadingProps } from "./overlay-loading-type";
-declare const OverlayLoading: ({ open, message, spinnerColor, backdropOpacity, zIndex, }: OverlayLoadingProps) => import("react/jsx-runtime").JSX.Element | null;
+import { OverlayLoadingProps } from './overlay-loading-type';
+declare const OverlayLoading: import("react").ForwardRefExoticComponent<OverlayLoadingProps & import("react").RefAttributes<HTMLDivElement>>;
 export default OverlayLoading;
-export type { OverlayLoadingProps };
+export type { OverlayLoadingProps } from './overlay-loading-type';

package/dist/components/loading/overlay-loading/overlay-loading.stories.d.ts

@@ -1,13 +1,8 @@
-import type { StoryObj } from '@storybook/react';
+import type { StoryObj } from '@storybook/react-webpack5';
 declare const meta: {
     title: string;
-    component: ({ open, message, spinnerColor, backdropOpacity, zIndex, }: import("./overlay-loading-type").OverlayLoadingProps) => import("react/jsx-runtime").JSX.Element | null;
-    tags: string[];
+    component: import("react").ForwardRefExoticComponent<import("./overlay-loading-type").OverlayLoadingProps & import("react").RefAttributes<HTMLDivElement>>;
     argTypes: {
-        spinnerColor: {
-            control: "select";
-            options: string[];
-        };
         backdropOpacity: {
             control: {
                 type: "range";
@@ -23,7 +18,6 @@ declare const meta: {
     args: {
         open: true;
         message: string;
-        spinnerColor: "grey-scale-200";
         backdropOpacity: number;
         zIndex: number;
     };
@@ -31,3 +25,9 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const WithoutMessage: Story;
+export declare const LightBackdrop: Story;
+/** open 이 false 면 아무것도 그리지 않는다. */
+export declare const Closed: Story;
+/** 화면 전체를 덮어 뒤의 본문을 누를 수 없게 한다. */
+export declare const OverContent: Story;

package/dist/components/loading/spinner/base-spinner.d.ts

@@ -0,0 +1,4 @@
+declare const BaseSpinner: 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>>;
+export default BaseSpinner;

package/dist/components/loading/spinner/spinner-props.d.ts

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

package/dist/components/loading/spinner/spinner-type.d.ts

@@ -1,4 +1,4 @@
-import { colors } from "../../../styles/token/colors";
-export interface SpinnerProps {
-    color?: keyof typeof colors;
-}
+import { ComponentPropsWithRef } from 'react';
+import { StyleProps } from '../../../helpers/types/common-props';
+export type SpinnerProps = StyleProps;
+export type BaseSpinnerProps = ComponentPropsWithRef<'div'>;

package/dist/components/loading/spinner/spinner.d.ts

@@ -1,3 +1,3 @@
-import { SpinnerProps } from "./spinner-type";
-declare const Spinner: ({ color }: SpinnerProps) => import("react/jsx-runtime").JSX.Element;
+declare const Spinner: import("react").ForwardRefExoticComponent<import("../../../helpers/types/common-props").StyleProps & import("react").RefAttributes<HTMLDivElement>>;
 export default Spinner;
+export type { SpinnerProps } from './spinner-type';

package/dist/components/loading/spinner/spinner.stories.d.ts

@@ -1,18 +1,11 @@
-import type { StoryObj } from '@storybook/react';
+import type { StoryObj } from '@storybook/react-webpack5';
 declare const meta: {
     title: string;
-    component: ({ color }: import("./spinner-type").SpinnerProps) => import("react/jsx-runtime").JSX.Element;
-    tags: string[];
-    argTypes: {
-        color: {
-            control: "select";
-            options: string[];
-        };
-    };
-    args: {
-        color: "grey-scale-200";
-    };
+    component: import("react").ForwardRefExoticComponent<import("../../../helpers/types/common-props").StyleProps & import("react").RefAttributes<HTMLDivElement>>;
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const Colors: Story;
+/** 링은 currentColor 다. 어두운 배경에서는 className 이나 style 로 color 를 준다. */
+export declare const OnDark: Story;

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

@@ -2,10 +2,22 @@ import { PropsWithChildren } from 'react';
 import { ModalCloseProps, ModalContainerProps, ModalRootProps, ModalSubTitleProps, ModalTitleProps, ModalTriggerProps } from './modal-type';
 declare const ModalRoot: {
     (props: PropsWithChildren<ModalRootProps>): import("react/jsx-runtime").JSX.Element;
-    Container: (props: PropsWithChildren<ModalContainerProps>) => import("react/jsx-runtime").JSX.Element;
-    Trigger: (props: PropsWithChildren<ModalTriggerProps>) => import("react/jsx-runtime").JSX.Element;
-    Title: (props: PropsWithChildren<ModalTitleProps>) => import("react/jsx-runtime").JSX.Element;
-    SubTitle: (props: PropsWithChildren<ModalSubTitleProps>) => import("react/jsx-runtime").JSX.Element;
-    Close: (props: PropsWithChildren<ModalCloseProps>) => import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    Container: import("react").ForwardRefExoticComponent<ModalContainerProps & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLDivElement>>;
+    Trigger: import("react").ForwardRefExoticComponent<ModalTriggerProps & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLButtonElement>>;
+    Title: import("react").ForwardRefExoticComponent<ModalTitleProps & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLHeadingElement>>;
+    SubTitle: import("react").ForwardRefExoticComponent<ModalSubTitleProps & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLParagraphElement>>;
+    Close: import("react").ForwardRefExoticComponent<ModalCloseProps & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLButtonElement>>;
 };
 export default ModalRoot;

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

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

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

@@ -1,25 +1,35 @@
+import { ReactNode } from 'react';
+import { AsChildProps } from '../../helpers/types/common-props';
+import { CTAButtonProps } from '../button/button-type';
+import { sizes } from './modal-props';
 export interface ModalRootProps {
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
 }
-export interface ModalContainerProps {
+export interface ModalContainerProps extends AsChildProps {
     forceMount?: true;
-    asChild?: boolean;
     className?: string;
 }
-export interface ModalTriggerProps {
-    asChild?: boolean;
+export interface ModalTriggerProps extends AsChildProps {
     className?: string;
 }
-export interface ModalTitleProps {
-    asChild?: boolean;
+export interface ModalTitleProps extends AsChildProps {
     className?: string;
 }
-export interface ModalSubTitleProps {
-    asChild?: boolean;
+export interface ModalSubTitleProps extends AsChildProps {
     className?: string;
 }
-export interface ModalCloseProps {
-    asChild?: boolean;
+export interface ModalCloseProps extends AsChildProps {
     className?: string;
 }
+export interface ModalWithDoubleButtonProps {
+    title?: string;
+    subTitle?: string | ReactNode;
+    titleIcon?: ReactNode;
+    content?: ReactNode;
+    showCloseIcon?: boolean;
+    showTitleLine?: boolean;
+    left: CTAButtonProps;
+    right: CTAButtonProps;
+    size?: (typeof sizes)[number];
+}