@nurihaus/web-design-system 3.0.3 → 3.1.1

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;

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

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

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

@@ -7,7 +7,7 @@ declare const meta: {
             control: {
                 type: "select";
             };
-            options: readonly ["s", "m"];
+            options: readonly ["xs", "s", "m", "l", "xl"];
         };
     };
     args: {

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

@@ -11,6 +11,6 @@ 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")[];
+        values: ("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-600" | "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.stories.d.ts

@@ -31,7 +31,7 @@ declare const meta: {
             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")[];
+            options: ("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-600" | "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: {

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

@@ -1,5 +1,5 @@
 import { PropsWithChildren } from 'react';
-import { ModalCloseProps, ModalContainerProps, ModalRootProps, ModalSubTitleProps, ModalTitleProps, ModalTriggerProps } from './modal-type';
+import { ModalCloseProps, ModalContainerProps, ModalDescriptionProps, ModalRootProps, ModalSubTitleProps, ModalTitleProps, ModalTriggerProps } from './modal-type';
 declare const ModalRoot: {
     (props: PropsWithChildren<ModalRootProps>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
@@ -16,6 +16,9 @@ declare const ModalRoot: {
     SubTitle: import("react").ForwardRefExoticComponent<ModalSubTitleProps & {
         children?: import("react").ReactNode | undefined;
     } & import("react").RefAttributes<HTMLParagraphElement>>;
+    Description: import("react").ForwardRefExoticComponent<ModalDescriptionProps & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLParagraphElement>>;
     Close: import("react").ForwardRefExoticComponent<ModalCloseProps & {
         children?: import("react").ReactNode | undefined;
     } & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -2,3 +2,6 @@ export declare const sizes: readonly ["s", "m", "l"];
 export declare const modalWithDoubleButtonProps: {
     size: import("../../helpers/types/propsDef").ClassNamePropsType<readonly ["s", "m", "l"]>;
 };
+export declare const modalProps: {
+    size: import("../../helpers/types/propsDef").ClassNamePropsType<readonly ["s", "m", "l"]>;
+};

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

@@ -1,14 +1,14 @@
-import { ReactNode } from 'react';
-import { AsChildProps } from '../../helpers/types/common-props';
+import { ReactElement, ReactNode } from 'react';
+import { AsChildProps, StyleProps } from '../../helpers/types/common-props';
 import { CTAButtonProps } from '../button/button-type';
 import { sizes } from './modal-props';
 export interface ModalRootProps {
     open?: boolean;
+    defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
 }
-export interface ModalContainerProps extends AsChildProps {
+export interface ModalContainerProps extends AsChildProps, StyleProps {
     forceMount?: true;
-    className?: string;
 }
 export interface ModalTriggerProps extends AsChildProps {
     className?: string;
@@ -19,6 +19,9 @@ export interface ModalTitleProps extends AsChildProps {
 export interface ModalSubTitleProps extends AsChildProps {
     className?: string;
 }
+export interface ModalDescriptionProps extends AsChildProps {
+    className?: string;
+}
 export interface ModalCloseProps extends AsChildProps {
     className?: string;
 }
@@ -33,3 +36,14 @@ export interface ModalWithDoubleButtonProps {
     right: CTAButtonProps;
     size?: (typeof sizes)[number];
 }
+export interface ModalProps extends ModalRootProps, StyleProps {
+    /** 있으면 `Modal.Trigger asChild` 로 감싸 클릭하면 열리는 요소가 된다. */
+    trigger?: ReactElement;
+    title: ReactNode;
+    description?: ReactNode;
+    children?: ReactNode;
+    /** 버튼 영역. 쓰는 쪽이 CTAButton 을 넣는다. */
+    footer?: ReactNode;
+    showCloseIcon?: boolean;
+    size?: (typeof sizes)[number];
+}

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

@@ -0,0 +1,22 @@
+import type { StoryObj } from '@storybook/react-webpack5';
+import ModalWithDoubleButton from './modal-with-double-button';
+declare const meta: {
+    title: string;
+    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/modal/modal.d.ts

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

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

@@ -1,8 +1,7 @@
 import type { StoryObj } from '@storybook/react-webpack5';
-import ModalWithDoubleButton from './modal-with-double-button';
 declare const meta: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<import("./modal-type").ModalWithDoubleButtonProps & import("react").RefAttributes<HTMLDivElement>>;
+    component: import("react").ForwardRefExoticComponent<import("./modal-type").ModalProps & import("react").RefAttributes<HTMLDivElement>>;
     argTypes: {
         size: {
             control: {
@@ -11,12 +10,18 @@ declare const meta: {
             options: readonly ["s", "m", "l"];
         };
     };
+    args: {
+        title: string;
+        description: string;
+        children: string;
+    };
 };
 export default meta;
-type Story = StoryObj<typeof ModalWithDoubleButton.Column>;
+type Story = StoryObj<typeof meta>;
 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;
+export declare const Controlled: Story;
+export declare const WithoutCloseIcon: Story;
+export declare const WithoutDescriptionAndFooter: Story;
+export declare const LongContent: Story;

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

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from 'react';
+import { PaginationItemProps, PaginationRootProps } from './pagination-type';
+declare const PaginationRoot: import("react").ForwardRefExoticComponent<Omit<PropsWithChildren<PaginationRootProps>, "ref"> & import("react").RefAttributes<HTMLElement>> & {
+    Item: import("react").ForwardRefExoticComponent<Omit<PropsWithChildren<PaginationItemProps>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Ellipsis: 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>>;
+};
+export default PaginationRoot;

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

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

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

@@ -0,0 +1,20 @@
+import { ComponentPropsWithRef } from 'react';
+import { sizes } from './pagination-props';
+export interface PaginationRootProps extends ComponentPropsWithRef<'nav'> {
+    disabled?: boolean;
+}
+export interface PaginationItemProps extends ComponentPropsWithRef<'button'> {
+    /** 현재 페이지면 `aria-current="page"` 와 `data-state="active"` 가 붙는다 */
+    active?: boolean;
+    disabled?: boolean;
+}
+export type PaginationEllipsisProps = ComponentPropsWithRef<'span'>;
+export interface PaginationProps extends PaginationRootProps {
+    totalPages: number;
+    page?: number;
+    defaultPage?: number;
+    onPageChange?: (page: number) => void;
+    /** 현재 페이지 양옆에 보일 페이지 수. 기본 1 */
+    siblingCount?: number;
+    size?: (typeof sizes)[number];
+}

package/dist/components/pagination/pagination.d.ts

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

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

@@ -0,0 +1,25 @@
+import type { StoryObj } from '@storybook/react-webpack5';
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<Omit<import("./pagination-type").PaginationProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
+    argTypes: {
+        size: {
+            control: {
+                type: "select";
+            };
+            options: readonly ["s", "m"];
+        };
+    };
+    args: {
+        totalPages: number;
+        defaultPage: number;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Controlled: Story;
+export declare const Sizes: Story;
+export declare const SiblingCount: Story;
+export declare const FewPages: Story;
+export declare const Disabled: Story;

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

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

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

@@ -0,0 +1,15 @@
+import { CSSPropsTypeWithoutValues } from '../../helpers/types/propsDef';
+export declare const shapes: readonly ["text", "rect", "circle"];
+export declare const skeletonProps: {
+    shape: {
+        type: "className";
+        className: string;
+        values: readonly ["text", "rect", "circle"];
+        default: "text";
+    };
+    width: CSSPropsTypeWithoutValues<string | number>;
+    height: {
+        type: "css";
+        key: "height";
+    };
+};

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

@@ -0,0 +1,12 @@
+import { ComponentPropsWithRef } from 'react';
+import { shapes } from './skeleton-props';
+export type BaseSkeletonProps = ComponentPropsWithRef<'span'>;
+export interface SkeletonProps extends BaseSkeletonProps {
+    shape?: (typeof shapes)[number];
+    width?: number | string;
+    /** circle 이면 비울 때 width 와 같다. */
+    height?: number | string;
+    /** shape 가 text 일 때 줄 수. 2 이상이면 줄마다 하나씩 그리고 마지막 줄은 짧다. */
+    lines?: number;
+    animated?: boolean;
+}

package/dist/components/skeleton/skeleton.d.ts

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