@reco-inc/upbox-ui 1.1.0 → 1.1.2

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

@@ -1,3 +1,4 @@
+import { HTMLAttributes } from 'vue';
 import { VariantProps } from 'class-variance-authority';
 export { default as Avatar } from './Avatar';
 export { default as AvatarFallback } from './AvatarFallback';
@@ -10,5 +11,5 @@ export type AvatarVariants = VariantProps<typeof avatarVariant>;
 export interface AvatarProps {
     size?: "small" | "base" | "large";
     shape?: "circle" | "square";
-    class?: string;
+    class?: HTMLAttributes["class"];
 }

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

@@ -1,3 +1,4 @@
+import { HTMLAttributes } from 'vue';
 import { VariantProps } from 'class-variance-authority';
 export { default as Badge } from './Badge';
 export declare const badgeVariants: (props?: ({
@@ -12,7 +13,7 @@ export interface BadgeProps {
     tone?: "soft" | "solid" | "outline";
     size?: "3xsmall" | "2xsmall" | "xsmall";
     round?: boolean;
-    class?: string;
+    class?: HTMLAttributes["class"];
 }
 export declare const badgeCountVariants: (props?: ({
     variant?: "neutral" | "negative" | "positive" | "informative" | "warning" | null | undefined;

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

@@ -1,3 +1,4 @@
+import { HTMLAttributes } from 'vue';
 import { VariantProps } from 'class-variance-authority';
 export { default as BadgeDivider } from './BadgeDivider';
 export declare const badgeDividerVariants: (props?: ({
@@ -8,5 +9,5 @@ export type BadgeDividerVariants = VariantProps<typeof badgeDividerVariants>;
 export interface BadgeDividerProps {
     variant?: "green" | "navy";
     size?: "3xsmall" | "2xsmall" | "xsmall";
-    class?: string;
+    class?: HTMLAttributes["class"];
 }

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

@@ -1,3 +1,4 @@
+import { HTMLAttributes } from 'vue';
 export interface ButtonProps {
     variant?: 'primary' | 'destructive' | 'secondary' | 'tertiary';
     theme?: 'filled' | 'outlined';
@@ -6,7 +7,7 @@ export interface ButtonProps {
     disabled?: boolean;
     loading?: boolean;
     type?: 'button' | 'submit' | 'reset';
-    class?: string;
+    class?: HTMLAttributes['class'];
 }
 declare function __VLS_template(): {
     attrs: Partial<{}>;

package/dist/components/checkbox/Checkbox.d.ts

@@ -1,6 +1,7 @@
 import { CheckboxRootProps } from 'reka-ui';
+import { HTMLAttributes } from 'vue';
 export interface Props extends Omit<CheckboxRootProps, "disabled"> {
-    class?: string;
+    class?: HTMLAttributes["class"];
     size?: "small" | "regular" | "large";
     error?: boolean;
     readOnly?: boolean;

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

@@ -1,3 +1,4 @@
+import { HTMLAttributes } from 'vue';
 import { SelectOption } from '../../lib/options';
 export { default as Checkbox } from './Checkbox';
 export { default as CheckboxGroupField } from './CheckboxGroupField';
@@ -6,7 +7,7 @@ export interface CheckboxProps {
     error?: boolean;
     readOnly?: boolean;
     disabled?: boolean;
-    class?: string;
+    class?: HTMLAttributes["class"];
 }
 export interface CheckboxGroupFieldProps {
     modelValue?: (string | number)[] | null;
@@ -16,5 +17,5 @@ export interface CheckboxGroupFieldProps {
     error?: boolean;
     readOnly?: boolean;
     disabled?: boolean;
-    class?: string;
+    class?: HTMLAttributes["class"];
 }

package/dist/components/empty/Empty.d.ts

@@ -1,6 +1,7 @@
+import { HTMLAttributes } from 'vue';
 export interface EmptyProps {
     /** Additional classes */
-    class?: string;
+    class?: HTMLAttributes['class'];
 }
 declare function __VLS_template(): {
     attrs: Partial<{}>;

package/dist/components/empty/EmptyState.d.ts

@@ -1,8 +1,9 @@
+import { HTMLAttributes } from 'vue';
 export interface EmptyStateProps {
     fill?: boolean;
     icon?: boolean;
     orientation?: "vertical" | "horizontal";
-    class?: string;
+    class?: HTMLAttributes["class"];
 }
 declare function __VLS_template(): {
     attrs: Partial<{}>;

package/dist/components/fab/Fab.d.ts

@@ -1,9 +1,10 @@
+import { HTMLAttributes } from 'vue';
 export interface FabProps {
     fabStyle?: 'basic' | 'colorfilled';
     size?: 'xsmall' | 'small' | 'regular' | 'medium';
     iconOnly?: boolean;
     disabled?: boolean;
-    class?: string;
+    class?: HTMLAttributes['class'];
 }
 declare function __VLS_template(): {
     attrs: Partial<{}>;

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

@@ -1,9 +1,10 @@
+import { HTMLAttributes } from 'vue';
 import { UploaderFile } from './types';
 interface Props {
     file: UploaderFile;
     readonly?: boolean;
     downloadable?: boolean;
-    class?: string;
+    class?: HTMLAttributes['class'];
 }
 declare function __VLS_template(): {
     attrs: Partial<{}>;

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

@@ -1,3 +1,4 @@
+import { HTMLAttributes } from 'vue';
 import { UploaderFile, FileClickEvent } from './types';
 export interface Props {
     supportExt?: string[];
@@ -8,7 +9,7 @@ export interface Props {
     removable?: boolean;
     downloadable?: boolean;
     errorMessage?: string;
-    class?: string;
+    class?: HTMLAttributes['class'];
 }
 type __VLS_Props = Props;
 type __VLS_PublicProps = {

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

@@ -1,3 +1,4 @@
+import { HTMLAttributes } from 'vue';
 import { VariantProps } from 'class-variance-authority';
 export { default as FilterChip } from './FilterChip';
 /**
@@ -24,7 +25,7 @@ export interface FilterChipProps {
     count?: number | string;
     /** 우측 chevron 표시 (드롭다운 필터). 기본 true */
     chevron?: boolean;
-    class?: string;
+    class?: HTMLAttributes["class"];
 }
 /** 라벨 텍스트 색 — device × state 조합 */
 export declare const filterChipLabelColor: Record<NonNullable<FilterChipProps["device"]>, Record<NonNullable<FilterChipProps["state"]>, string>>;

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

@@ -1,8 +1,9 @@
+import { HTMLAttributes } from 'vue';
 export interface IconButtonProps {
     variant?: 'primary' | 'destructive' | 'secondary' | 'tertiary';
     size?: '2xsmall' | 'xsmall' | 'small' | 'regular' | 'large' | 'xlarge';
     disabled?: boolean;
-    class?: string;
+    class?: HTMLAttributes['class'];
 }
 declare function __VLS_template(): {
     attrs: Partial<{}>;

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

@@ -1,9 +1,10 @@
+import { HTMLAttributes } from 'vue';
 export interface InputGroupProps {
     size?: "small" | "regular" | "large";
     error?: boolean;
     readonly?: boolean;
     disabled?: boolean;
-    class?: string;
+    class?: HTMLAttributes["class"];
 }
 declare function __VLS_template(): {
     attrs: Partial<{}>;

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

@@ -14,7 +14,7 @@ export declare const inputGroupAddonVariants: (props?: ({
 export type InputGroupVariants = VariantProps<typeof inputGroupAddonVariants>;
 export interface InputGroupAddonProps {
     align?: "inline-start" | "inline-end" | "block-start" | "block-end";
-    class?: string;
+    class?: HTMLAttributes["class"];
 }
 export declare const inputGroupButtonVariants: (props?: ({
     size?: "small" | "xsmall" | "icon-xs" | "icon-sm" | null | undefined;

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

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

package/dist/components/number-field/index.d.ts

@@ -1,3 +1,4 @@
+import { HTMLAttributes } from 'vue';
 export { default as NumberField } from './NumberField';
 export { default as NumberFieldRoot } from './NumberFieldRoot';
 export { default as NumberFieldContent } from './NumberFieldContent';
@@ -26,5 +27,5 @@ export interface NumberFieldProps {
     name?: string;
     id?: string;
     required?: boolean;
-    class?: string;
+    class?: HTMLAttributes["class"];
 }

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

@@ -1,3 +1,4 @@
+import { HTMLAttributes } from 'vue';
 export { default as Pagination } from './Pagination';
 export { default as PaginationContent } from './PaginationContent';
 export { default as PaginationEllipsis } from './PaginationEllipsis';
@@ -9,5 +10,5 @@ export { default as PaginationPrevious } from './PaginationPrevious';
 export interface PaginationItemProps {
     size?: "xsmall" | "small" | "regular" | "medium" | "large" | "icon";
     isActive?: boolean;
-    class?: string;
+    class?: HTMLAttributes["class"];
 }

package/dist/components/panel/PanelIcon.d.ts

@@ -1,7 +1,8 @@
+import { HTMLAttributes } from 'vue';
 export interface PanelIconProps {
     /** 앱 Icon src와 같은 경로. 없으면 variant 기본 글리프 */
     src?: string;
-    class?: string;
+    class?: HTMLAttributes["class"];
 }
 declare const _default: import('vue').DefineComponent<PanelIconProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<PanelIconProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLSpanElement>;
 export default _default;

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

@@ -1,3 +1,4 @@
+import { HTMLAttributes } from 'vue';
 export { default as Panel } from './Panel';
 export { default as PanelIcon } from './PanelIcon';
 export type { PanelIconProps } from './PanelIcon';
@@ -13,5 +14,5 @@ export interface PanelProps {
     icon?: boolean;
     /** 글리프만 교체. 크기·색은 variant/size. 앱 Icon src와 같은 경로 */
     iconSrc?: string;
-    class?: string;
+    class?: HTMLAttributes["class"];
 }

package/dist/components/radio-group/RadioGroupItem.d.ts

@@ -1,6 +1,7 @@
 import { RadioGroupItemProps } from 'reka-ui';
+import { HTMLAttributes } from 'vue';
 interface Props extends RadioGroupItemProps {
-    class?: string;
+    class?: HTMLAttributes["class"];
     size?: "small" | "regular" | "large";
     error?: boolean;
     readOnly?: boolean;

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

@@ -1,3 +1,4 @@
+import { HTMLAttributes } from 'vue';
 export { default as RadioGroup } from './RadioGroup';
 export { default as RadioGroupField } from './RadioGroupField';
 export { default as RadioGroupItem } from './RadioGroupItem';
@@ -5,5 +6,5 @@ export interface RadioGroupItemProps {
     size?: "small" | "regular" | "large";
     error?: boolean;
     readOnly?: boolean;
-    class?: string;
+    class?: HTMLAttributes["class"];
 }

package/dist/components/search-field/index.d.ts

@@ -1,3 +1,4 @@
+import { HTMLAttributes } from 'vue';
 export { default as SearchField } from './SearchField';
 export interface SearchFieldProps {
     modelValue?: string;
@@ -10,7 +11,7 @@ export interface SearchFieldProps {
     error?: boolean;
     /** clear 버튼 표시 여부 (default: true) */
     clearable?: boolean;
-    class?: string;
+    class?: HTMLAttributes["class"];
     name?: string;
     id?: string;
     autofocus?: boolean;

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

@@ -1,6 +1,7 @@
+import { HTMLAttributes } from 'vue';
 export { default as Separator } from './Separator';
 export interface SeparatorProps {
     orientation?: "horizontal" | "vertical";
     decorative?: boolean;
-    class?: string;
+    class?: HTMLAttributes["class"];
 }

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

@@ -1,3 +1,4 @@
+import { HTMLAttributes } from 'vue';
 import { VariantProps } from 'class-variance-authority';
 export { default as Sheet } from './Sheet';
 export { default as SheetClose } from './SheetClose';
@@ -13,5 +14,5 @@ export declare const sheetVariants: (props?: ({
 export type SheetVariants = VariantProps<typeof sheetVariants>;
 export interface SheetContentProps {
     side?: "top" | "bottom" | "left" | "right";
-    class?: string;
+    class?: HTMLAttributes["class"];
 }

package/dist/components/stepper/Stepper.d.ts

@@ -1,3 +1,4 @@
+import { HTMLAttributes } from 'vue';
 export interface StepItem {
     /** Step unique identifier */
     value: string | number;
@@ -10,7 +11,7 @@ export interface StepperProps {
     /** List of steps */
     steps: StepItem[];
     /** Additional classes */
-    class?: string;
+    class?: HTMLAttributes['class'];
 }
 type __VLS_Props = StepperProps;
 type __VLS_PublicProps = {

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

@@ -1,5 +1,5 @@
 import { VariantProps } from 'class-variance-authority';
-import { Component } from 'vue';
+import { Component, HTMLAttributes } from 'vue';
 export { default as Tabs } from './Tabs';
 export { default as TabsBar } from './TabsBar';
 export type { TabItem } from './TabsBar';
@@ -35,11 +35,11 @@ export interface TabsListProps {
     variant?: "default" | "round" | "box";
     color?: "navy" | "grey";
     size?: "small" | "regular" | "large" | "xlarge";
-    class?: string;
+    class?: HTMLAttributes["class"];
 }
 export interface TabsTriggerProps {
     variant?: "default" | "round" | "box";
     color?: "navy" | "grey";
     size?: "small" | "regular" | "large" | "xlarge";
-    class?: string;
+    class?: HTMLAttributes["class"];
 }

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

@@ -1,3 +1,4 @@
+import { HTMLAttributes } from 'vue';
 import { VariantProps } from 'class-variance-authority';
 export { default as Tag } from './Tag';
 export declare const tagVariants: (props?: ({
@@ -9,6 +10,6 @@ export interface TagProps {
     state?: "enabled" | "disabled" | "error";
     size?: "3xsmall" | "2xsmall" | "xsmall" | "small";
     closable?: boolean;
-    class?: string;
+    class?: HTMLAttributes["class"];
 }
 export declare const tagCloseIconSize: Record<NonNullable<TagVariants["size"]>, string>;

package/dist/components/text-button/TextButton.d.ts

@@ -1,9 +1,10 @@
+import { HTMLAttributes } from 'vue';
 export interface TextButtonProps {
     /** information: 임시 — Figma 미정의 파란 텍스트 링크 톤 */
     variant?: 'destructive' | 'secondary' | 'information';
     size?: '2xsmall' | 'xsmall' | 'small';
     disabled?: boolean;
-    class?: string;
+    class?: HTMLAttributes['class'];
 }
 declare function __VLS_template(): {
     attrs: Partial<{}>;

package/dist/components/text-field/TextField.d.ts

@@ -8,6 +8,8 @@ export interface TextFieldProps {
     class?: HTMLAttributes["class"];
     clearable?: boolean;
     password?: boolean;
+    /** 카운터(우측 `현재/최대`) 표시. 직접 `<TextFieldCount>` 를 넣는 것과 같고, 그 경우 이 prop 은 필요 없다 */
+    counter?: boolean;
     maxLength?: number;
     byteMode?: boolean;
     disabled?: boolean;
@@ -34,9 +36,10 @@ declare const __VLS_component: import('vue').DefineComponent<TextFieldProps, {},
     size: "small" | "regular" | "large";
     variant: "default" | "filled" | "bottomline";
     readonly: boolean;
+    byteMode: boolean;
     clearable: boolean;
     password: boolean;
-    byteMode: boolean;
+    counter: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/dist/components/text-field/TextField.stories.d.ts

@@ -12,9 +12,10 @@ declare const meta: {
             size: "small" | "regular" | "large";
             variant: "default" | "filled" | "bottomline";
             readonly: boolean;
+            byteMode: boolean;
             clearable: boolean;
             password: boolean;
-            byteMode: boolean;
+            counter: boolean;
         }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
             P: {};
             B: {};
@@ -30,9 +31,10 @@ declare const meta: {
             size: "small" | "regular" | "large";
             variant: "default" | "filled" | "bottomline";
             readonly: boolean;
+            byteMode: boolean;
             clearable: boolean;
             password: boolean;
-            byteMode: boolean;
+            counter: boolean;
         }>;
         __isFragment?: never;
         __isTeleport?: never;
@@ -47,9 +49,10 @@ declare const meta: {
         size: "small" | "regular" | "large";
         variant: "default" | "filled" | "bottomline";
         readonly: boolean;
+        byteMode: boolean;
         clearable: boolean;
         password: boolean;
-        byteMode: boolean;
+        counter: 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;
@@ -114,8 +117,14 @@ export declare const WithSuffixIcon: Story;
 /**
  * - `<TextFieldCount>` 를 활용
  * - count 는 `<TextField>` 에서 관리함 (maxLength, byteMode 등을 provide 함~)
+ * - 카운터만 붙이면 되는 경우엔 `counter` prop 으로 끝낼 수 있음 (아래 `WithCounterProp`)
  */
 export declare const WithCount: Story;
+/**
+ * - `counter` prop 만 켜면 `<TextFieldCount>` 를 직접 넣지 않아도 카운터가 붙음
+ * - 카운터 옆에 다른 것을 더 붙여야 하면 `WithCount` 처럼 슬롯으로 직접 넣음
+ */
+export declare const WithCounterProp: Story;
 /**
  * - `<TextFieldUnit>` 를 활용
  * - Unit 은 아무거나 넣어주면 됨~

package/dist/components/textarea/Textarea.d.ts

@@ -43,8 +43,8 @@ declare const __VLS_component: import('vue').DefineComponent<TextareaProps, {},
     variant: "default" | "filled" | "bottomline" | null;
     readonly: boolean;
     byteMode: boolean;
-    rows: number;
     counter: boolean;
+    rows: number;
     autoResize: boolean;
     maxHeight: number;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {

package/dist/components/textarea/Textarea.stories.d.ts

@@ -13,8 +13,8 @@ declare const meta: {
             variant: "default" | "filled" | "bottomline" | null;
             readonly: boolean;
             byteMode: boolean;
-            rows: number;
             counter: boolean;
+            rows: number;
             autoResize: boolean;
             maxHeight: number;
         }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
@@ -35,8 +35,8 @@ declare const meta: {
             variant: "default" | "filled" | "bottomline" | null;
             readonly: boolean;
             byteMode: boolean;
-            rows: number;
             counter: boolean;
+            rows: number;
             autoResize: boolean;
             maxHeight: number;
         }>;
@@ -54,8 +54,8 @@ declare const meta: {
         variant: "default" | "filled" | "bottomline" | null;
         readonly: boolean;
         byteMode: boolean;
-        rows: number;
         counter: boolean;
+        rows: number;
         autoResize: boolean;
         maxHeight: number;
     }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {

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

@@ -1,4 +1,4 @@
-import { Component } from 'vue';
+import { Component, HTMLAttributes } from 'vue';
 import { VariantProps } from 'class-variance-authority';
 export { default as Toggle } from './Toggle';
 export declare const toggleTrackVariants: (props?: ({
@@ -23,7 +23,7 @@ export interface ToggleProps {
     label?: string;
     asChild?: boolean;
     as?: string | Component;
-    class?: string;
+    class?: HTMLAttributes["class"];
 }
 export interface ToggleEmits {
     "update:modelValue": [value: boolean];

package/dist/components/toolbar/Toolbar.d.ts

@@ -1,3 +1,4 @@
+import { HTMLAttributes } from 'vue';
 export interface ToolbarProps {
     /** 선택된 항목 수 — "N개 선택됨" 표기 */
     selectedCount?: number;
@@ -7,7 +8,7 @@ export interface ToolbarProps {
     downloadable?: boolean;
     /** 삭제 버튼 노출 여부 (옵션) */
     deletable?: boolean;
-    class?: string;
+    class?: HTMLAttributes['class'];
 }
 declare function __VLS_template(): {
     attrs: Partial<{}>;