@reco-inc/upbox-ui 1.3.0 → 1.4.1

package/FigmaConnect.md

@@ -150,7 +150,7 @@
 
 | Slot | 설명 |
 |---|---|
-| `default` | 본문 텍스트. 좌·우 아이콘은 슬롯 안에 `<lucide />` 직접 배치 |
+| `default` | 본문 텍스트. 좌·우 아이콘은 슬롯 안에 `<Icon src="..." />` 또는 `<lucide />` 직접 배치. `Icon` 은 색을 variant 텍스트 색(currentColor)으로, 크기를 size 에 맞춰(16/16/20/20/24) 자동 적용 |
 
 ### Code Example
 

package/dist/FigmaConnect.md

@@ -150,7 +150,7 @@
 
 | Slot | 설명 |
 |---|---|
-| `default` | 본문 텍스트. 좌·우 아이콘은 슬롯 안에 `<lucide />` 직접 배치 |
+| `default` | 본문 텍스트. 좌·우 아이콘은 슬롯 안에 `<Icon src="..." />` 또는 `<lucide />` 직접 배치. `Icon` 은 색을 variant 텍스트 색(currentColor)으로, 크기를 size 에 맞춰(16/16/20/20/24) 자동 적용 |
 
 ### Code Example
 

package/dist/components/badge-divider/index.d.ts

@@ -2,7 +2,7 @@ import { HTMLAttributes } from 'vue';
 import { VariantProps } from 'class-variance-authority';
 export { default as BadgeDivider } from './BadgeDivider';
 export declare const badgeDividerVariants: (props?: ({
-    variant?: "navy" | "green" | null | undefined;
+    variant?: "green" | "navy" | null | undefined;
     size?: "3xsmall" | "2xsmall" | "xsmall" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type BadgeDividerVariants = VariantProps<typeof badgeDividerVariants>;

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

@@ -26,9 +26,9 @@ declare const __VLS_component: import('vue').DefineComponent<ButtonProps, {}, {}
     disabled: boolean;
     type: "button" | "submit" | "reset";
     size: "xsmall" | "small" | "regular" | "large" | "xlarge";
-    theme: "filled" | "outlined";
     loading: boolean;
     variant: "primary" | "destructive" | "secondary" | "tertiary";
+    theme: "filled" | "outlined";
     block: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLButtonElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;

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

@@ -10,9 +10,9 @@ declare const meta: {
             disabled: boolean;
             type: "button" | "submit" | "reset";
             size: "xsmall" | "small" | "regular" | "large" | "xlarge";
-            theme: "filled" | "outlined";
             loading: boolean;
             variant: "primary" | "destructive" | "secondary" | "tertiary";
+            theme: "filled" | "outlined";
             block: boolean;
         }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLButtonElement, import('vue').ComponentProvideOptions, {
             P: {};
@@ -27,9 +27,9 @@ declare const meta: {
             disabled: boolean;
             type: "button" | "submit" | "reset";
             size: "xsmall" | "small" | "regular" | "large" | "xlarge";
-            theme: "filled" | "outlined";
             loading: boolean;
             variant: "primary" | "destructive" | "secondary" | "tertiary";
+            theme: "filled" | "outlined";
             block: boolean;
         }>;
         __isFragment?: never;
@@ -43,9 +43,9 @@ declare const meta: {
         disabled: boolean;
         type: "button" | "submit" | "reset";
         size: "xsmall" | "small" | "regular" | "large" | "xlarge";
-        theme: "filled" | "outlined";
         loading: boolean;
         variant: "primary" | "destructive" | "secondary" | "tertiary";
+        theme: "filled" | "outlined";
         block: boolean;
     }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
         $slots: {

package/dist/components/calendar/DateCalendar.d.ts

@@ -28,12 +28,12 @@ declare function __VLS_template(): {
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "update:modelValue": (value: DateValue | DateValue[] | undefined) => any;
+    "update:modelValue": (value: DateValue | DateValue[] | null | undefined) => any;
     reset: () => any;
     "update:placeholder": (value: DateValue | undefined) => any;
     change: (value: Date | null) => any;
 }, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
-    "onUpdate:modelValue"?: ((value: DateValue | DateValue[] | undefined) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: DateValue | DateValue[] | null | undefined) => any) | undefined;
     onReset?: (() => any) | undefined;
     "onUpdate:placeholder"?: ((value: DateValue | undefined) => any) | undefined;
     onChange?: ((value: Date | null) => any) | undefined;

package/dist/components/calendar/DateCalendar.stories.d.ts

@@ -3,12 +3,12 @@ declare const meta: {
     title: string;
     component: {
         new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('./DateCalendar').Props> & Readonly<{
-            "onUpdate:modelValue"?: ((value: import('reka-ui').DateValue | import('reka-ui').DateValue[] | undefined) => any) | undefined;
+            "onUpdate:modelValue"?: ((value: import('reka-ui').DateValue | import('reka-ui').DateValue[] | null | undefined) => any) | undefined;
             onReset?: (() => any) | undefined;
             "onUpdate:placeholder"?: ((value: import('reka-ui').DateValue | undefined) => any) | undefined;
             onChange?: ((value: Date | null) => any) | undefined;
         }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-            "update:modelValue": (value: import('reka-ui').DateValue | import('reka-ui').DateValue[] | undefined) => any;
+            "update:modelValue": (value: import('reka-ui').DateValue | import('reka-ui').DateValue[] | null | undefined) => any;
             reset: () => any;
             "update:placeholder": (value: import('reka-ui').DateValue | undefined) => any;
             change: (value: Date | null) => any;
@@ -23,7 +23,7 @@ declare const meta: {
             M: {};
             Defaults: {};
         }, Readonly<import('./DateCalendar').Props> & Readonly<{
-            "onUpdate:modelValue"?: ((value: import('reka-ui').DateValue | import('reka-ui').DateValue[] | undefined) => any) | undefined;
+            "onUpdate:modelValue"?: ((value: import('reka-ui').DateValue | import('reka-ui').DateValue[] | null | undefined) => any) | undefined;
             onReset?: (() => any) | undefined;
             "onUpdate:placeholder"?: ((value: import('reka-ui').DateValue | undefined) => any) | undefined;
             onChange?: ((value: Date | null) => any) | undefined;
@@ -35,12 +35,12 @@ declare const meta: {
         __isTeleport?: never;
         __isSuspense?: never;
     } & import('vue').ComponentOptionsBase<Readonly<import('./DateCalendar').Props> & Readonly<{
-        "onUpdate:modelValue"?: ((value: import('reka-ui').DateValue | import('reka-ui').DateValue[] | undefined) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: import('reka-ui').DateValue | import('reka-ui').DateValue[] | null | undefined) => any) | undefined;
         onReset?: (() => any) | undefined;
         "onUpdate:placeholder"?: ((value: import('reka-ui').DateValue | undefined) => any) | undefined;
         onChange?: ((value: Date | null) => any) | undefined;
     }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-        "update:modelValue": (value: import('reka-ui').DateValue | import('reka-ui').DateValue[] | undefined) => any;
+        "update:modelValue": (value: import('reka-ui').DateValue | import('reka-ui').DateValue[] | null | undefined) => any;
         reset: () => any;
         "update:placeholder": (value: import('reka-ui').DateValue | undefined) => any;
         change: (value: Date | null) => any;

package/dist/components/calendar/MobileDateCalendar.d.ts

@@ -23,12 +23,12 @@ declare function __VLS_template(): {
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "update:modelValue": (value: DateValue | DateValue[] | undefined) => any;
+    "update:modelValue": (value: DateValue | DateValue[] | null | undefined) => any;
     reset: () => any;
     "update:placeholder": (value: DateValue | undefined) => any;
     change: (value: Date | null) => any;
 }, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
-    "onUpdate:modelValue"?: ((value: DateValue | DateValue[] | undefined) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: DateValue | DateValue[] | null | undefined) => any) | undefined;
     onReset?: (() => any) | undefined;
     "onUpdate:placeholder"?: ((value: DateValue | undefined) => any) | undefined;
     onChange?: ((value: Date | null) => any) | undefined;

package/dist/components/calendar/MobileDateCalendar.stories.d.ts

@@ -3,12 +3,12 @@ declare const meta: {
     title: string;
     component: {
         new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('./MobileDateCalendar').Props> & Readonly<{
-            "onUpdate:modelValue"?: ((value: import('reka-ui').DateValue | import('reka-ui').DateValue[] | undefined) => any) | undefined;
+            "onUpdate:modelValue"?: ((value: import('reka-ui').DateValue | import('reka-ui').DateValue[] | null | undefined) => any) | undefined;
             onReset?: (() => any) | undefined;
             "onUpdate:placeholder"?: ((value: import('reka-ui').DateValue | undefined) => any) | undefined;
             onChange?: ((value: Date | null) => any) | undefined;
         }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-            "update:modelValue": (value: import('reka-ui').DateValue | import('reka-ui').DateValue[] | undefined) => any;
+            "update:modelValue": (value: import('reka-ui').DateValue | import('reka-ui').DateValue[] | null | undefined) => any;
             reset: () => any;
             "update:placeholder": (value: import('reka-ui').DateValue | undefined) => any;
             change: (value: Date | null) => any;
@@ -22,7 +22,7 @@ declare const meta: {
             M: {};
             Defaults: {};
         }, Readonly<import('./MobileDateCalendar').Props> & Readonly<{
-            "onUpdate:modelValue"?: ((value: import('reka-ui').DateValue | import('reka-ui').DateValue[] | undefined) => any) | undefined;
+            "onUpdate:modelValue"?: ((value: import('reka-ui').DateValue | import('reka-ui').DateValue[] | null | undefined) => any) | undefined;
             onReset?: (() => any) | undefined;
             "onUpdate:placeholder"?: ((value: import('reka-ui').DateValue | undefined) => any) | undefined;
             onChange?: ((value: Date | null) => any) | undefined;
@@ -33,12 +33,12 @@ declare const meta: {
         __isTeleport?: never;
         __isSuspense?: never;
     } & import('vue').ComponentOptionsBase<Readonly<import('./MobileDateCalendar').Props> & Readonly<{
-        "onUpdate:modelValue"?: ((value: import('reka-ui').DateValue | import('reka-ui').DateValue[] | undefined) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: import('reka-ui').DateValue | import('reka-ui').DateValue[] | null | undefined) => any) | undefined;
         onReset?: (() => any) | undefined;
         "onUpdate:placeholder"?: ((value: import('reka-ui').DateValue | undefined) => any) | undefined;
         onChange?: ((value: Date | null) => any) | undefined;
     }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-        "update:modelValue": (value: import('reka-ui').DateValue | import('reka-ui').DateValue[] | undefined) => any;
+        "update:modelValue": (value: import('reka-ui').DateValue | import('reka-ui').DateValue[] | null | undefined) => any;
         reset: () => any;
         "update:placeholder": (value: import('reka-ui').DateValue | undefined) => any;
         change: (value: Date | null) => any;

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

@@ -10,18 +10,18 @@ declare function __VLS_template(): {
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<DrawerRootProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     "update:open": (open: boolean) => any;
-    animationEnd: (open: boolean) => any;
     drag: (percentageDragged: number) => any;
     release: (open: boolean) => any;
     close: () => any;
     "update:activeSnapPoint": (val: string | number) => any;
+    animationEnd: (open: boolean) => any;
 }, string, import('vue').PublicProps, Readonly<DrawerRootProps> & Readonly<{
     "onUpdate:open"?: ((open: boolean) => any) | undefined;
-    onAnimationEnd?: ((open: boolean) => any) | undefined;
     onDrag?: ((percentageDragged: number) => any) | undefined;
     onRelease?: ((open: boolean) => any) | undefined;
     onClose?: (() => any) | undefined;
     "onUpdate:activeSnapPoint"?: ((val: string | number) => any) | undefined;
+    onAnimationEnd?: ((open: boolean) => any) | undefined;
 }>, {
     shouldScaleBackground: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

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

@@ -4,18 +4,18 @@ declare const meta: {
     component: {
         new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vaul-vue').DrawerRootProps> & Readonly<{
             "onUpdate:open"?: ((open: boolean) => any) | undefined;
-            onAnimationEnd?: ((open: boolean) => any) | undefined;
             onDrag?: ((percentageDragged: number) => any) | undefined;
             onRelease?: ((open: boolean) => any) | undefined;
             onClose?: (() => any) | undefined;
             "onUpdate:activeSnapPoint"?: ((val: string | number) => any) | undefined;
+            onAnimationEnd?: ((open: boolean) => any) | undefined;
         }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
             "update:open": (open: boolean) => any;
-            animationEnd: (open: boolean) => any;
             drag: (percentageDragged: number) => any;
             release: (open: boolean) => any;
             close: () => any;
             "update:activeSnapPoint": (val: string | number) => any;
+            animationEnd: (open: boolean) => any;
         }, import('vue').PublicProps, {
             shouldScaleBackground: boolean;
         }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
@@ -27,11 +27,11 @@ declare const meta: {
             Defaults: {};
         }, Readonly<import('vaul-vue').DrawerRootProps> & Readonly<{
             "onUpdate:open"?: ((open: boolean) => any) | undefined;
-            onAnimationEnd?: ((open: boolean) => any) | undefined;
             onDrag?: ((percentageDragged: number) => any) | undefined;
             onRelease?: ((open: boolean) => any) | undefined;
             onClose?: (() => any) | undefined;
             "onUpdate:activeSnapPoint"?: ((val: string | number) => any) | undefined;
+            onAnimationEnd?: ((open: boolean) => any) | undefined;
         }>, {}, {}, {}, {}, {
             shouldScaleBackground: boolean;
         }>;
@@ -40,18 +40,18 @@ declare const meta: {
         __isSuspense?: never;
     } & import('vue').ComponentOptionsBase<Readonly<import('vaul-vue').DrawerRootProps> & Readonly<{
         "onUpdate:open"?: ((open: boolean) => any) | undefined;
-        onAnimationEnd?: ((open: boolean) => any) | undefined;
         onDrag?: ((percentageDragged: number) => any) | undefined;
         onRelease?: ((open: boolean) => any) | undefined;
         onClose?: (() => any) | undefined;
         "onUpdate:activeSnapPoint"?: ((val: string | number) => any) | undefined;
+        onAnimationEnd?: ((open: boolean) => any) | undefined;
     }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
         "update:open": (open: boolean) => any;
-        animationEnd: (open: boolean) => any;
         drag: (percentageDragged: number) => any;
         release: (open: boolean) => any;
         close: () => any;
         "update:activeSnapPoint": (val: string | number) => any;
+        animationEnd: (open: boolean) => any;
     }, string, {
         shouldScaleBackground: boolean;
     }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {

package/dist/components/icon/Icon.d.ts

@@ -0,0 +1,18 @@
+import { IconProps } from '.';
+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<IconProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<IconProps> & 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/icon/Icon.stories.d.ts

@@ -0,0 +1,40 @@
+import { StoryObj } from '@storybook/vue3-vite';
+declare const meta: {
+    title: string;
+    component: {
+        new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('.').IconProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLSpanElement, import('vue').ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<import('.').IconProps> & Readonly<{}>, {}, {}, {}, {}, {}>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & import('vue').ComponentOptionsBase<Readonly<import('.').IconProps> & 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[];
+    argTypes: {
+        src: {
+            control: "text";
+        };
+        size: {
+            control: "number";
+        };
+        color: {
+            control: "color";
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const InButton: Story;
+export declare const ButtonSizes: Story;
+export declare const InIconButton: Story;
+export declare const ColorOverride: Story;

package/dist/components/icon/iconContext.d.ts

@@ -0,0 +1,6 @@
+import { ComputedRef, InjectionKey } from 'vue';
+/** 부모 컴포넌트(Button 등)가 자기 size 에 맞는 아이콘 px 를 내려준다 */
+export interface IconContext {
+    size: ComputedRef<number>;
+}
+export declare const ICON_CONTEXT_KEY: InjectionKey<IconContext>;

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

@@ -0,0 +1,13 @@
+import { HTMLAttributes } from 'vue';
+export { default as Icon } from './Icon';
+export { ICON_CONTEXT_KEY } from './iconContext';
+export type { IconContext } from './iconContext';
+export interface IconProps {
+    /** 앱 Icon src 와 같은 경로 (`action/arrow-left-regular.svg`). 없으면 default slot 의 svg 를 쓴다 */
+    src?: string;
+    /** px. 없으면 부모(Button/IconButton) size 에 맞춘 값, 부모가 없으면 24 */
+    size?: number;
+    /** 기본은 currentColor 라 부모 텍스트 색(Button variant/hover/active)을 그대로 따른다 */
+    color?: string;
+    class?: HTMLAttributes["class"];
+}

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

@@ -21,12 +21,12 @@ export interface TabsEmits {
 }
 export declare const tabsListVariants: (props?: ({
     variant?: "box" | "default" | "round" | null | undefined;
-    color?: "navy" | "grey" | null | undefined;
+    color?: "grey" | "navy" | null | undefined;
     size?: "small" | "large" | "regular" | "xlarge" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const tabsTriggerVariants: (props?: ({
     variant?: "box" | "default" | "round" | null | undefined;
-    color?: "navy" | "grey" | null | undefined;
+    color?: "grey" | "navy" | null | undefined;
     size?: "small" | "large" | "regular" | "xlarge" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type TabsListVariants = VariantProps<typeof tabsListVariants>;

package/dist/global.d.ts

@@ -82,6 +82,7 @@ declare module 'vue' {
         FormLabel: typeof import('./components/form')['FormLabel'];
         FormMessage: typeof import('./components/form')['FormMessage'];
         TextField: typeof import('./components/text-field')['TextField'];
+        Icon: typeof import('./components/icon')['Icon'];
         InputGroup: typeof import('./components/input-group')['InputGroup'];
         InputGroupAddon: typeof import('./components/input-group')['InputGroupAddon'];
         InputGroupButton: typeof import('./components/input-group')['InputGroupButton'];

package/dist/index.d.ts

@@ -8,6 +8,7 @@ export * from './components/badge-divider';
 export * from './components/breadcrumb';
 export * from './components/button';
 export * from './components/fab';
+export * from './components/icon';
 export * from './components/icon-button';
 export * from './components/text-button';
 export * from './components/calendar';