@reco-inc/upbox-ui 0.1.1

package/dist/components/file-uploader/types.d.ts

@@ -0,0 +1,33 @@
+export interface FileObject {
+    id: number;
+    url: string;
+    displayName: string;
+    fileType: 'local' | 'remote';
+    fileObject?: File | Blob;
+    fileName?: string;
+    createdAt?: string;
+    isActive?: boolean;
+    updatedAt?: string;
+    uploaderId?: number;
+    uploaderName?: string;
+}
+export interface UploaderFile {
+    id: number;
+    state: 'done' | 'error' | 'none' | 'uploading' | 'download';
+    timestamp: string | Date;
+    user: string;
+    fileList: FileObject[];
+}
+export interface FileClickEvent {
+    index: number;
+    data: UploaderFile;
+}
+export interface FileValidatorOptions {
+    maxSize: number;
+    maxCount: number;
+    supportExt: string[];
+}
+export declare const mimeToExt: Map<string, string>;
+export declare function getFileExtension(file: File): string;
+export declare function validateFile(file: File, options: FileValidatorOptions, currentCount: number): string | null;
+export declare function fileToUploaderFile(file: File, userName?: string): UploaderFile;

package/dist/components/filter-chip/FilterChip.d.ts

@@ -0,0 +1,24 @@
+import { FilterChipProps } from '.';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        badge?(_: {}): any;
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<FilterChipProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<FilterChipProps> & Readonly<{}>, {
+    round: boolean;
+    state: "placeholder" | "typed";
+    device: "web" | "mobile";
+    chevron: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/filter-chip/FilterChip.stories.d.ts

@@ -0,0 +1,70 @@
+import { StoryObj } from '@storybook/vue3-vite';
+/**
+ * Figma `filterChips` — 조회용 드롭다운 필터 칩.
+ * 생성·수정용 선택 UI 는 SelectField 를 쓴다.
+ */
+declare const meta: {
+    title: string;
+    component: {
+        new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('.').FilterChipProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
+            round: boolean;
+            state: "placeholder" | "typed";
+            device: "web" | "mobile";
+            chevron: boolean;
+        }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLDivElement, import('vue').ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<import('.').FilterChipProps> & Readonly<{}>, {}, {}, {}, {}, {
+            round: boolean;
+            state: "placeholder" | "typed";
+            device: "web" | "mobile";
+            chevron: boolean;
+        }>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & import('vue').ComponentOptionsBase<Readonly<import('.').FilterChipProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
+        round: boolean;
+        state: "placeholder" | "typed";
+        device: "web" | "mobile";
+        chevron: boolean;
+    }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+        $slots: {
+            badge?(_: {}): any;
+            default?(_: {}): any;
+        };
+    });
+    tags: string[];
+    argTypes: {
+        round: {
+            control: "boolean";
+        };
+        device: {
+            control: "inline-radio";
+            options: string[];
+        };
+        state: {
+            control: "inline-radio";
+            options: string[];
+        };
+        count: {
+            control: "text";
+        };
+        chevron: {
+            control: "boolean";
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const States: Story;
+export declare const Device: Story;
+export declare const Shapes: Story;
+export declare const WithBadge: Story;
+export declare const FilterUsage: Story;
+export declare const Matrix: Story;

package/dist/components/filter-chip/index.d.ts

@@ -0,0 +1,30 @@
+import { VariantProps } from 'class-variance-authority';
+export { default as FilterChip } from './FilterChip';
+/**
+ * Figma `filterChips` (조회용 드롭다운 필터 칩).
+ * 축: variant(square/circle) · state(placeholder/typed) · device(web/mobile).
+ * - web   : 흰 배경(grey-10) + 회색 보더(grey-40), 12px regular, justify-between
+ * - mobile: 보더 없는 채움(placeholder=grey-20 / typed=blue-20), 13px semibold, justify-center
+ * 생성·수정용 선택 UI 는 SelectField 를 쓴다.
+ */
+export declare const filterChipVariants: (props?: ({
+    round?: boolean | null | undefined;
+    device?: "web" | "mobile" | null | undefined;
+    state?: "placeholder" | "typed" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type FilterChipVariants = VariantProps<typeof filterChipVariants>;
+export interface FilterChipProps {
+    /** square(false) / circle(true) */
+    round?: boolean;
+    /** web=흰배경+보더 / mobile=채움. 기본 web */
+    device?: "web" | "mobile";
+    /** placeholder=미선택(회색) / typed=값 있음. 기본 placeholder */
+    state?: "placeholder" | "typed";
+    /** typed 시 라벨 옆 `+N` (informative 색) */
+    count?: number | string;
+    /** 우측 chevron 표시 (드롭다운 필터). 기본 true */
+    chevron?: boolean;
+    class?: string;
+}
+/** 라벨 텍스트 색 — device × state 조합 */
+export declare const filterChipLabelColor: Record<NonNullable<FilterChipProps["device"]>, Record<NonNullable<FilterChipProps["state"]>, string>>;

package/dist/components/form/FieldContainer.d.ts

@@ -0,0 +1,51 @@
+import { HTMLAttributes } from 'vue';
+import { FieldSize } from './injectionKeys';
+export interface FieldContainerProps {
+    name: string;
+    rules?: unknown;
+    modelValue?: unknown;
+    initialValue?: unknown;
+    validateOnMount?: boolean;
+    size?: FieldSize;
+    label?: string;
+    description?: string;
+    required?: boolean;
+    class?: HTMLAttributes['class'];
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        tooltip?(_: {}): any;
+        default?(_: {
+            field: import('vee-validate').FieldBindingObject<any>;
+            componentField: import('vee-validate').ComponentFieldBindingObject<any>;
+            value: any;
+            meta: import('vee-validate').FieldMeta<any>;
+            errors: string[];
+            errorMessage: string | undefined;
+            handleInput: import('vee-validate').FieldContext["handleChange"];
+            handleBlur: (e?: Event, shouldValidate?: boolean) => void;
+            resetField: (state?: Partial<import('vee-validate').FieldState<unknown>> | undefined) => void;
+            handleReset: () => void;
+            validate: import('vee-validate').FieldValidator<unknown>;
+            handleChange: (e: Event | unknown, shouldValidate?: boolean) => void;
+            setTouched: (isTouched: boolean) => void;
+            setErrors: (message: string | string[]) => void;
+            setValue: (value: unknown, shouldValidate?: boolean) => void;
+        }): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<FieldContainerProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<FieldContainerProps> & Readonly<{}>, {
+    size: FieldSize;
+    required: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/form/FieldContainer.stories.d.ts

@@ -0,0 +1,77 @@
+import { StoryObj } from '@storybook/vue3-vite';
+declare const meta: {
+    title: string;
+    component: {
+        new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('./FieldContainer').FieldContainerProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
+            size: import('./injectionKeys').FieldSize;
+            required: boolean;
+        }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<import('./FieldContainer').FieldContainerProps> & Readonly<{}>, {}, {}, {}, {}, {
+            size: import('./injectionKeys').FieldSize;
+            required: boolean;
+        }>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & import('vue').ComponentOptionsBase<Readonly<import('./FieldContainer').FieldContainerProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
+        size: import('./injectionKeys').FieldSize;
+        required: boolean;
+    }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+        $slots: {
+            tooltip?(_: {}): any;
+            default?(_: {
+                field: import('vee-validate').FieldBindingObject<any>;
+                componentField: import('vee-validate').ComponentFieldBindingObject<any>;
+                value: any;
+                meta: import('vee-validate').FieldMeta<any>;
+                errors: string[];
+                errorMessage: string | undefined;
+                handleInput: import('vee-validate').FieldContext["handleChange"];
+                handleBlur: (e?: Event, shouldValidate?: boolean) => void;
+                resetField: (state?: Partial<import('vee-validate').FieldState<unknown>> | undefined) => void;
+                handleReset: () => void;
+                validate: import('vee-validate').FieldValidator<unknown>;
+                handleChange: (e: Event | unknown, shouldValidate?: boolean) => void;
+                setTouched: (isTouched: boolean) => void;
+                setErrors: (message: string | string[]) => void;
+                setValue: (value: unknown, shouldValidate?: boolean) => void;
+            }): any;
+        };
+    });
+    tags: string[];
+    args: {
+        name: string;
+    };
+    argTypes: {
+        size: {
+            control: "select";
+            options: string[];
+        };
+        label: {
+            control: "text";
+        };
+        description: {
+            control: "text";
+        };
+        required: {
+            control: "boolean";
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Sizes: Story;
+export declare const WithValidation: Story;
+export declare const ErrorOverridesDescription: Story;
+export declare const WithTextarea: Story;
+export declare const WithSelect: Story;
+export declare const AccessibleWithoutVisualLabel: Story;
+export declare const Disabled: Story;
+export declare const PlainInput: Story;

package/dist/components/form/FieldControlProvider.d.ts

@@ -0,0 +1,21 @@
+import { FieldControlBindings } from './injectionKeys';
+type __VLS_Props = {
+    bindings: FieldControlBindings;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/form/FormControl.d.ts

@@ -0,0 +1,17 @@
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/form/FormDescription.d.ts

@@ -0,0 +1,21 @@
+import { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    class?: HTMLAttributes["class"];
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/form/FormItem.d.ts

@@ -0,0 +1,21 @@
+import { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    class?: HTMLAttributes["class"];
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/form/FormLabel.d.ts

@@ -0,0 +1,22 @@
+import { LabelProps } from 'reka-ui';
+import { HTMLAttributes } from 'vue';
+type __VLS_Props = LabelProps & {
+    class?: HTMLAttributes["class"];
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/form/FormMessage.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,8 @@
+export { default as FieldContainer } from './FieldContainer';
+export { default as FormControl } from './FormControl';
+export { default as FormDescription } from './FormDescription';
+export { default as FormItem } from './FormItem';
+export { default as FormLabel } from './FormLabel';
+export { default as FormMessage } from './FormMessage';
+export { FORM_ERROR_INJECTION_KEY, FORM_ITEM_INJECTION_KEY } from './injectionKeys';
+export { Form, Field as FormField, FieldArray as FormFieldArray } from 'vee-validate';

package/dist/components/form/injectionKeys.d.ts

@@ -0,0 +1,11 @@
+import { ComputedRef, InjectionKey, Ref } from 'vue';
+export type FieldSize = "small" | "regular" | "large";
+export interface FieldControlBindings {
+    modelValue?: unknown;
+    "onUpdate:modelValue"?: (value: unknown) => void;
+    onBlur?: (e?: Event) => void;
+}
+export declare const FORM_ITEM_INJECTION_KEY: InjectionKey<string>;
+export declare const FORM_ERROR_INJECTION_KEY: InjectionKey<ComputedRef<boolean>>;
+export declare const FORM_SIZE_INJECTION_KEY: InjectionKey<ComputedRef<FieldSize>>;
+export declare const FIELD_CONTROL_INJECTION_KEY: InjectionKey<Ref<FieldControlBindings>>;

package/dist/components/form/useFormField.d.ts

@@ -0,0 +1,11 @@
+export declare function useFormField(): {
+    valid: import('vue').ComputedRef<boolean>;
+    isDirty: import('vue').ComputedRef<boolean>;
+    isTouched: import('vue').ComputedRef<boolean>;
+    error: import('vue').Ref<string | undefined, string | undefined>;
+    id: string | undefined;
+    name: import('vue').MaybeRef<string>;
+    formItemId: string;
+    formDescriptionId: string;
+    formMessageId: string;
+};

package/dist/components/icon-button/IconButton.d.ts

@@ -0,0 +1,31 @@
+export interface IconButtonProps {
+    variant?: 'primary' | 'destructive' | 'secondary' | 'tertiary';
+    size?: '2xsmall' | 'xsmall' | 'small' | 'regular' | 'large' | 'xlarge';
+    disabled?: boolean;
+    class?: string;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLButtonElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<IconButtonProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    click: (event: MouseEvent) => any;
+}, string, import('vue').PublicProps, Readonly<IconButtonProps> & Readonly<{
+    onClick?: ((event: MouseEvent) => any) | undefined;
+}>, {
+    disabled: boolean;
+    size: "2xsmall" | "xsmall" | "small" | "regular" | "large" | "xlarge";
+    variant: "primary" | "destructive" | "secondary" | "tertiary";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLButtonElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/icon-button/IconButton.stories.d.ts

@@ -0,0 +1,67 @@
+import { StoryObj } from '@storybook/vue3-vite';
+declare const meta: {
+    title: string;
+    component: {
+        new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('./IconButton').IconButtonProps> & Readonly<{
+            onClick?: ((event: MouseEvent) => any) | undefined;
+        }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+            click: (event: MouseEvent) => any;
+        }, import('vue').PublicProps, {
+            disabled: boolean;
+            size: "2xsmall" | "xsmall" | "small" | "regular" | "large" | "xlarge";
+            variant: "primary" | "destructive" | "secondary" | "tertiary";
+        }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLButtonElement, import('vue').ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<import('./IconButton').IconButtonProps> & Readonly<{
+            onClick?: ((event: MouseEvent) => any) | undefined;
+        }>, {}, {}, {}, {}, {
+            disabled: boolean;
+            size: "2xsmall" | "xsmall" | "small" | "regular" | "large" | "xlarge";
+            variant: "primary" | "destructive" | "secondary" | "tertiary";
+        }>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & import('vue').ComponentOptionsBase<Readonly<import('./IconButton').IconButtonProps> & Readonly<{
+        onClick?: ((event: MouseEvent) => any) | undefined;
+    }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+        click: (event: MouseEvent) => any;
+    }, string, {
+        disabled: boolean;
+        size: "2xsmall" | "xsmall" | "small" | "regular" | "large" | "xlarge";
+        variant: "primary" | "destructive" | "secondary" | "tertiary";
+    }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+        $slots: {
+            default?(_: {}): any;
+        };
+    });
+    tags: string[];
+    args: {
+        onClick: import('storybook/test').Mock<(...args: any[]) => any>;
+    };
+    argTypes: {
+        variant: {
+            control: "select";
+            options: string[];
+        };
+        size: {
+            control: "select";
+            options: string[];
+        };
+        disabled: {
+            control: "boolean";
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Variants: Story;
+export declare const Sizes: Story;
+export declare const AllVariantsGrid: Story;
+export declare const Disabled: Story;

package/dist/components/icon-button/index.d.ts

@@ -0,0 +1,7 @@
+import { VariantProps } from 'class-variance-authority';
+export { default as IconButton } from './IconButton';
+export declare const iconButtonVariants: (props?: ({
+    variant?: "primary" | "destructive" | "secondary" | "tertiary" | null | undefined;
+    size?: "small" | "large" | "2xsmall" | "xsmall" | "regular" | "xlarge" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type IconButtonVariants = VariantProps<typeof iconButtonVariants>;

package/dist/components/input-frame/InputFrame.d.ts

@@ -0,0 +1,32 @@
+import { HTMLAttributes } from 'vue';
+import { InputFrameDesignProps } from './inputFrameContext';
+/**
+ * design 키는 미지정이면 `undefined` 로 둬서 inject 병합 시 상위를 따른다.
+ * (optional boolean 을 넘기지 않았을 때 런타임이 `false` 로 잡혀 `??` 가 상위를 덮는 것을 막음)
+ */
+type __VLS_Props = InputFrameDesignProps & {
+    class?: HTMLAttributes["class"];
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    disabled: boolean;
+    size: "small" | "large" | "regular" | null;
+    error: boolean;
+    variant: "default" | "filled" | "bottomline" | null;
+    readonly: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/input-frame/InputFrame.stories.d.ts

@@ -0,0 +1,75 @@
+import { StoryObj } from '@storybook/vue3-vite';
+declare const meta: {
+    title: string;
+    component: {
+        new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('./inputFrameContext').InputFrameDesignProps & {
+            class?: import('vue').HTMLAttributes["class"];
+        }> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
+            disabled: boolean;
+            size: "small" | "large" | "regular" | null;
+            error: boolean;
+            variant: "default" | "filled" | "bottomline" | null;
+            readonly: boolean;
+        }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLDivElement, import('vue').ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<import('./inputFrameContext').InputFrameDesignProps & {
+            class?: import('vue').HTMLAttributes["class"];
+        }> & Readonly<{}>, {}, {}, {}, {}, {
+            disabled: boolean;
+            size: "small" | "large" | "regular" | null;
+            error: boolean;
+            variant: "default" | "filled" | "bottomline" | null;
+            readonly: boolean;
+        }>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & import('vue').ComponentOptionsBase<Readonly<import('./inputFrameContext').InputFrameDesignProps & {
+        class?: import('vue').HTMLAttributes["class"];
+    }> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
+        disabled: boolean;
+        size: "small" | "large" | "regular" | null;
+        error: boolean;
+        variant: "default" | "filled" | "bottomline" | null;
+        readonly: boolean;
+    }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+        $slots: {
+            default?(_: {}): any;
+        };
+    });
+    tags: string[];
+    argTypes: {
+        variant: {
+            control: "select";
+            options: string[];
+        };
+        size: {
+            control: "select";
+            options: string[];
+        };
+        error: {
+            control: "boolean";
+        };
+        readonly: {
+            control: "boolean";
+        };
+        disabled: {
+            control: "boolean";
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Sizes: Story;
+export declare const WithInputIcon: Story;
+export declare const Variants: Story;
+export declare const StateActive: Story;
+export declare const StateError: Story;
+export declare const StateReadOnly: Story;
+export declare const StateDisabled: Story;