@reco-inc/upbox-ui 0.1.1

package/dist/components/input-frame/InputIcon.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: HTMLSpanElement;
+};
+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, {}, HTMLSpanElement>;
+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/index.d.ts

@@ -0,0 +1,4 @@
+export { default as InputFrame } from './InputFrame';
+export { default as InputIcon } from './InputIcon';
+export { INPUT_FRAME_CONTEXT_KEY, pickInputFrameDesign, useInputFrameDesign, useInputFrameInjectProvide, type InputFrameContext, type InputFrameContextSize, type InputFrameContextVariant, type InputFrameDesignProps, } from './inputFrameContext';
+export { inputFrameSizes, inputFrameVariants, type InputFrameSize, type InputFrameVariantProps, } from './inputFrameVariants';

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

@@ -0,0 +1,35 @@
+import { ComputedRef, InjectionKey } from 'vue';
+import { InputFrameVariantProps } from './inputFrameVariants';
+export type InputFrameContextSize = NonNullable<InputFrameVariantProps["size"]>;
+export type InputFrameContextVariant = NonNullable<InputFrameVariantProps["variant"]>;
+export interface InputFrameContext {
+    variant: ComputedRef<InputFrameContextVariant>;
+    size: ComputedRef<InputFrameContextSize>;
+    error: ComputedRef<boolean>;
+    readonly: ComputedRef<boolean>;
+    disabled: ComputedRef<boolean>;
+}
+export declare const INPUT_FRAME_CONTEXT_KEY: InjectionKey<InputFrameContext>;
+export type InputFrameDesignProps = {
+    variant?: InputFrameVariantProps["variant"];
+    size?: InputFrameVariantProps["size"];
+    error?: boolean;
+    readonly?: boolean;
+    disabled?: boolean;
+};
+/**
+ * # 공통 디자인 속성 추출
+ * - variant, size, error, readonly, disabled 속성을 추출
+ * @param p 컴포넌트 props
+ * @returns 공통 디자인 속성
+ */
+export declare function pickInputFrameDesign(p: InputFrameDesignProps & Record<string, unknown>): InputFrameDesignProps;
+/**
+ * props 를 넘기지 않은 필드(`undefined`)는 inject 된 상위 디자인을 쓴다. (최소 변경 useInputFrameDesign 쪽과 동일 규칙)
+ * `error` 는 추가로 vee-validate(`FieldContainer`) 컨텍스트가 있으면 그것까지 fallback.
+ */
+export declare function useInputFrameDesign(getLocal: () => InputFrameDesignProps): InputFrameContext;
+/**
+ * inject → 병합 → provide 를 한 번에. InputFrame, DateMove, DatePicker 래퍼 등.
+ */
+export declare function useInputFrameInjectProvide(getLocal: () => InputFrameDesignProps): InputFrameContext;

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

@@ -0,0 +1,26 @@
+import { VariantProps } from 'class-variance-authority';
+/**
+ * Field 류(InputFrame 사용)와 DropdownFilter 처럼 칩 형태이지만
+ * 같은 height/padding/typography 사이즈 체계를 따라야 하는 트리거가
+ * 공유하는 단일 진실 소스(size token).
+ *
+ * 시각 톤(bg/border/...) 은 각자 다르지만 사이즈 분기는 한 곳에서 관리한다.
+ */
+export declare const inputFrameSizes: {
+    readonly small: "h-[32px] min-h-[32px] px-[8px] text-size-12";
+    readonly regular: "h-[40px] min-h-[40px] px-[16px] text-size-14";
+    readonly large: "h-[48px] min-h-[48px] px-[16px] text-size-16";
+};
+export type InputFrameSize = keyof typeof inputFrameSizes;
+/**
+ * input, select, date 등의 값 표시 부분 공통 껍데기
+ * - 혹시나 재사용할까 싶어서..
+ */
+export declare const inputFrameVariants: (props?: ({
+    variant?: "default" | "filled" | "bottomline" | null | undefined;
+    size?: "small" | "large" | "regular" | null | undefined;
+    error?: boolean | null | undefined;
+    readonly?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type InputFrameVariantProps = VariantProps<typeof inputFrameVariants>;

package/dist/components/input-group/InputGroup.d.ts

@@ -0,0 +1,29 @@
+export interface InputGroupProps {
+    size?: "small" | "regular" | "large";
+    error?: boolean;
+    readonly?: boolean;
+    disabled?: boolean;
+    class?: string;
+}
+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<InputGroupProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<InputGroupProps> & Readonly<{}>, {
+    disabled: boolean;
+    size: "small" | "regular" | "large";
+    error: boolean;
+    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-group/InputGroup.stories.d.ts

@@ -0,0 +1,47 @@
+import { StoryObj } from '@storybook/vue3-vite';
+declare const meta: {
+    title: string;
+    component: {
+        new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('./InputGroup').InputGroupProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
+            disabled: boolean;
+            size: "small" | "regular" | "large";
+            error: boolean;
+            readonly: boolean;
+        }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLDivElement, import('vue').ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<import('./InputGroup').InputGroupProps> & Readonly<{}>, {}, {}, {}, {}, {
+            disabled: boolean;
+            size: "small" | "regular" | "large";
+            error: boolean;
+            readonly: boolean;
+        }>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & import('vue').ComponentOptionsBase<Readonly<import('./InputGroup').InputGroupProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
+        disabled: boolean;
+        size: "small" | "regular" | "large";
+        error: boolean;
+        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[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const InlineStartAddon: Story;
+export declare const InlineEndAddon: Story;
+export declare const BothSideAddons: Story;
+export declare const WithButton: Story;
+export declare const BlockStartAddon: Story;
+export declare const BlockEndAddon: Story;
+export declare const WithTextarea: Story;

package/dist/components/input-group/InputGroupAddon.d.ts

@@ -0,0 +1,20 @@
+import { InputGroupAddonProps } from '.';
+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<InputGroupAddonProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<InputGroupAddonProps> & Readonly<{}>, {
+    align: "inline-start" | "inline-end" | "block-start" | "block-end";
+}, {}, {}, {}, 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-group/InputGroupButton.d.ts

@@ -0,0 +1,21 @@
+import { InputGroupButtonProps } from '.';
+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<InputGroupButtonProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<InputGroupButtonProps> & Readonly<{}>, {
+    size: "small" | "xsmall" | "icon-xs" | "icon-sm" | null;
+    variant: "primary" | "destructive" | "secondary" | "tertiary" | null;
+}, {}, {}, {}, 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/input-group/InputGroupInput.d.ts

@@ -0,0 +1,6 @@
+import { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    class?: HTMLAttributes["class"];
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLInputElement>;
+export default _default;

package/dist/components/input-group/InputGroupText.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: HTMLSpanElement;
+};
+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, {}, HTMLSpanElement>;
+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-group/InputGroupTextarea.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    class?: HTMLAttributes["class"];
+    rows?: number;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLTextAreaElement>;
+export default _default;

package/dist/components/input-group/index.d.ts

@@ -0,0 +1,27 @@
+import { VariantProps } from 'class-variance-authority';
+import { HTMLAttributes } from 'vue';
+import { ButtonVariants } from '../button';
+export { default as InputGroup } from './InputGroup';
+export type { InputGroupProps } from './InputGroup';
+export { default as InputGroupAddon } from './InputGroupAddon';
+export { default as InputGroupButton } from './InputGroupButton';
+export { default as InputGroupInput } from './InputGroupInput';
+export { default as InputGroupText } from './InputGroupText';
+export { default as InputGroupTextarea } from './InputGroupTextarea';
+export declare const inputGroupAddonVariants: (props?: ({
+    align?: "inline-start" | "inline-end" | "block-start" | "block-end" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type InputGroupVariants = VariantProps<typeof inputGroupAddonVariants>;
+export interface InputGroupAddonProps {
+    align?: "inline-start" | "inline-end" | "block-start" | "block-end";
+    class?: string;
+}
+export declare const inputGroupButtonVariants: (props?: ({
+    size?: "small" | "xsmall" | "icon-xs" | "icon-sm" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type InputGroupButtonVariants = VariantProps<typeof inputGroupButtonVariants>;
+export interface InputGroupButtonProps {
+    variant?: ButtonVariants["variant"] | null;
+    size?: InputGroupButtonVariants["size"];
+    class?: HTMLAttributes["class"];
+}

package/dist/components/label/Label.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/label/Label.stories.d.ts

@@ -0,0 +1,41 @@
+import { StoryObj } from '@storybook/vue3-vite';
+declare const meta: {
+    title: string;
+    component: {
+        new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('reka-ui').LabelProps & {
+            class?: import('vue').HTMLAttributes["class"];
+        }> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<import('reka-ui').LabelProps & {
+            class?: import('vue').HTMLAttributes["class"];
+        }> & Readonly<{}>, {}, {}, {}, {}, {}>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & import('vue').ComponentOptionsBase<Readonly<import('reka-ui').LabelProps & {
+        class?: import('vue').HTMLAttributes["class"];
+    }> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {}, {}, 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[];
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+/** 단독 컨트롤에 라벨 — Label 로 Checkbox 를 감싸면 라벨 클릭으로 토글됨 */
+export declare const WithCheckbox: Story;
+/** for/id 연결 — 비-DS(직접 만든) 컨트롤에 라벨을 연결할 때 */
+export declare const ForIdAssociation: Story;

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

@@ -0,0 +1 @@
+export { default as Label } from './Label';

package/dist/components/logo/Logo.d.ts

@@ -0,0 +1,5 @@
+import { LogoProps } from '.';
+declare const _default: import('vue').DefineComponent<LogoProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<LogoProps> & Readonly<{}>, {
+    variant: "full" | "icon";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/logo/Logo.stories.d.ts

@@ -0,0 +1,20 @@
+import { StoryObj } from '@storybook/vue3-vite';
+declare const meta: {
+    title: string;
+    component: import('vue').DefineComponent<import('.').LogoProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('.').LogoProps> & Readonly<{}>, {
+        variant: "full" | "icon";
+    }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+    tags: string[];
+    argTypes: {
+        variant: {
+            control: "select";
+            options: string[];
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Full: Story;
+export declare const Icon: Story;
+export declare const Sizes: Story;
+export declare const Colors: Story;

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

@@ -0,0 +1,5 @@
+export { default as Logo } from './Logo';
+export interface LogoProps {
+    variant?: "full" | "icon";
+    class?: string;
+}

package/dist/components/mobile-date-period-picker/MobileDatePeriodPicker.d.ts

@@ -0,0 +1,62 @@
+import { HTMLAttributes } from 'vue';
+import { DateValue } from '@internationalized/date';
+import { InputFrameDesignProps } from '../input-frame';
+import { DatePeriodValue } from '../date-period-picker/datePeriodTypes';
+type __VLS_Props = InputFrameDesignProps & {
+    modelValue?: DatePeriodValue | null;
+    startPlaceholder?: string;
+    endPlaceholder?: string;
+    class?: HTMLAttributes["class"];
+    /** 선택 가능한 최소 날짜(포함). 이전 날짜 셀은 비활성. */
+    minValue?: DateValue | null;
+    /** 선택 가능한 최대 날짜(포함). 이후 날짜 셀은 비활성.(예: 오늘 → 미래 차단) */
+    maxValue?: DateValue | null;
+    /**
+     * 최대 조회기간(일). 설정 시 시작일을 고른 뒤 그로부터 ±maxRangeDays 를 벗어난 날짜 셀을 비활성한다.
+     * 시작일 확정 전에는 제약이 없다.
+     */
+    maxRangeDays?: number;
+    /** 타이핑 중 유효 날짜 완성 시 즉시 커밋 (DateInput.liveCommit) */
+    liveCommit?: boolean;
+    /** 캘린더 드로어 패널 클래스(폭 제한 등). 데스크톱 `DatePeriodPicker.popoverContentClass` 대응 */
+    drawerContentClass?: HTMLAttributes["class"];
+    /** 주 시작 요일 (0=일 … 6=토). 기본 0(일요일 시작) */
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+};
+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, {
+    "update:modelValue": (value: DatePeriodValue | null | undefined) => any;
+    "update:draftError": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: DatePeriodValue | null | undefined) => any) | undefined;
+    "onUpdate:draftError"?: ((value: boolean) => any) | undefined;
+}>, {
+    disabled: boolean;
+    size: "small" | "large" | "regular" | null;
+    error: boolean;
+    variant: "default" | "filled" | "bottomline" | null;
+    minValue: DateValue | null;
+    maxValue: DateValue | null;
+    weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    readonly: boolean;
+    liveCommit: boolean;
+    startPlaceholder: string;
+    endPlaceholder: string;
+    maxRangeDays: number;
+    drawerContentClass: string | false | Record<string, any> | import('vue').ClassValue[] | null;
+}, {}, {}, {}, 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/mobile-date-period-picker/MobileDatePeriodPicker.stories.d.ts

@@ -0,0 +1,123 @@
+import { StoryObj } from '@storybook/vue3-vite';
+import { DatePeriodValue } from '../date-period-picker/datePeriodTypes';
+declare const meta: {
+    title: string;
+    component: {
+        new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('../input-frame').InputFrameDesignProps & {
+            modelValue?: DatePeriodValue | null;
+            startPlaceholder?: string;
+            endPlaceholder?: string;
+            class?: import('vue').HTMLAttributes["class"];
+            minValue?: import('reka-ui').DateValue | null;
+            maxValue?: import('reka-ui').DateValue | null;
+            maxRangeDays?: number;
+            liveCommit?: boolean;
+            drawerContentClass?: import('vue').HTMLAttributes["class"];
+            weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+        }> & Readonly<{
+            "onUpdate:modelValue"?: ((value: DatePeriodValue | null | undefined) => any) | undefined;
+            "onUpdate:draftError"?: ((value: boolean) => any) | undefined;
+        }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+            "update:modelValue": (value: DatePeriodValue | null | undefined) => any;
+            "update:draftError": (value: boolean) => any;
+        }, import('vue').PublicProps, {
+            disabled: boolean;
+            size: "small" | "large" | "regular" | null;
+            error: boolean;
+            variant: "default" | "filled" | "bottomline" | null;
+            minValue: import('reka-ui').DateValue | null;
+            maxValue: import('reka-ui').DateValue | null;
+            weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+            readonly: boolean;
+            liveCommit: boolean;
+            startPlaceholder: string;
+            endPlaceholder: string;
+            maxRangeDays: number;
+            drawerContentClass: string | false | Record<string, any> | import('vue').ClassValue[] | null;
+        }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<import('../input-frame').InputFrameDesignProps & {
+            modelValue?: DatePeriodValue | null;
+            startPlaceholder?: string;
+            endPlaceholder?: string;
+            class?: import('vue').HTMLAttributes["class"];
+            minValue?: import('reka-ui').DateValue | null;
+            maxValue?: import('reka-ui').DateValue | null;
+            maxRangeDays?: number;
+            liveCommit?: boolean;
+            drawerContentClass?: import('vue').HTMLAttributes["class"];
+            weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+        }> & Readonly<{
+            "onUpdate:modelValue"?: ((value: DatePeriodValue | null | undefined) => any) | undefined;
+            "onUpdate:draftError"?: ((value: boolean) => any) | undefined;
+        }>, {}, {}, {}, {}, {
+            disabled: boolean;
+            size: "small" | "large" | "regular" | null;
+            error: boolean;
+            variant: "default" | "filled" | "bottomline" | null;
+            minValue: import('reka-ui').DateValue | null;
+            maxValue: import('reka-ui').DateValue | null;
+            weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+            readonly: boolean;
+            liveCommit: boolean;
+            startPlaceholder: string;
+            endPlaceholder: string;
+            maxRangeDays: number;
+            drawerContentClass: string | false | Record<string, any> | import('vue').ClassValue[] | null;
+        }>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & import('vue').ComponentOptionsBase<Readonly<import('../input-frame').InputFrameDesignProps & {
+        modelValue?: DatePeriodValue | null;
+        startPlaceholder?: string;
+        endPlaceholder?: string;
+        class?: import('vue').HTMLAttributes["class"];
+        minValue?: import('reka-ui').DateValue | null;
+        maxValue?: import('reka-ui').DateValue | null;
+        maxRangeDays?: number;
+        liveCommit?: boolean;
+        drawerContentClass?: import('vue').HTMLAttributes["class"];
+        weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    }> & Readonly<{
+        "onUpdate:modelValue"?: ((value: DatePeriodValue | null | undefined) => any) | undefined;
+        "onUpdate:draftError"?: ((value: boolean) => any) | undefined;
+    }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+        "update:modelValue": (value: DatePeriodValue | null | undefined) => any;
+        "update:draftError": (value: boolean) => any;
+    }, string, {
+        disabled: boolean;
+        size: "small" | "large" | "regular" | null;
+        error: boolean;
+        variant: "default" | "filled" | "bottomline" | null;
+        minValue: import('reka-ui').DateValue | null;
+        maxValue: import('reka-ui').DateValue | null;
+        weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+        readonly: boolean;
+        liveCommit: boolean;
+        startPlaceholder: string;
+        endPlaceholder: string;
+        maxRangeDays: number;
+        drawerContentClass: string | false | Record<string, any> | import('vue').ClassValue[] | null;
+    }, {}, 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: {
+        size: {
+            control: "select";
+            options: string[];
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Preselected: Story;

package/dist/components/mobile-date-period-picker/MobileDatePeriodTrigger.d.ts

@@ -0,0 +1,36 @@
+import { HTMLAttributes } from 'vue';
+import { DatePeriodValue } from '../date-period-picker/datePeriodTypes';
+type __VLS_Props = {
+    modelValue?: DatePeriodValue | null;
+    startPlaceholder?: string;
+    endPlaceholder?: string;
+    class?: HTMLAttributes["class"];
+    /** 타이핑 중 유효 날짜 완성 시 즉시 커밋 (DateInput.liveCommit) */
+    liveCommit?: boolean;
+};
+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, {
+    "update:modelValue": (value: DatePeriodValue | null) => any;
+    "update:draftError": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: DatePeriodValue | null) => any) | undefined;
+    "onUpdate:draftError"?: ((value: boolean) => any) | undefined;
+}>, {
+    modelValue: DatePeriodValue | null;
+    liveCommit: 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/mobile-date-period-picker/index.d.ts

@@ -0,0 +1,2 @@
+export { default as MobileDatePeriodTrigger } from './MobileDatePeriodTrigger';
+export { default as MobileDatePeriodPicker } from './MobileDatePeriodPicker';