@reco-inc/upbox-ui 1.3.0 → 1.4.0

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/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';