@exem-ui/react 0.3.4-next.20261021004719 → 0.3.4-next.20261027030607

package/dist/index.d.mts

@@ -120,6 +120,11 @@ interface TagProps extends Pick<React__default.HTMLAttributes<HTMLDivElement>, '
     onDelete?: () => void;
     /** 텍스트 오른쪽에 표시할 슬롯 요소 */
     rightSlot?: React__default.ReactNode;
+    /**
+     * 비활성 상태. `color`와 관계없이 비활성 색으로 보이고 삭제 버튼도 비활성화됩니다.
+     * @default false
+     */
+    disabled?: boolean;
 }
 type TagComponent = React__default.ForwardRefExoticComponent<TagProps & React__default.RefAttributes<HTMLDivElement>>;
 interface DoubleTagProps {
@@ -129,10 +134,16 @@ interface DoubleTagProps {
         content: React__default.ReactNode;
     }[];
     className?: string;
+    /**
+     * 비활성 상태. 모든 항목과 테두리·구분선이 비활성 색으로 보입니다.
+     * @default false
+     */
+    disabled?: boolean;
 }
 declare const tagVariants: (props?: ({
     color?: "mono" | "sky" | "red" | "amber" | "green" | "orange" | "cyan" | "violet" | "pink" | "yellow" | "lime" | "emerald" | "teal" | "blue" | "indigo" | "purple" | "fuchsia" | "rose" | null | undefined;
     type?: "fill" | "line" | null | undefined;
+    disabled?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 /**
  * 카테고리나 상태를 나타내는 라벨 컴포넌트입니다.
@@ -215,7 +226,7 @@ type BreadcrumbComponent = React__default.ForwardRefExoticComponent<React__defau
 declare const Breadcrumb: BreadcrumbComponent;
 
 type ButtonColor = 'primary' | 'accent' | 'critical';
-type ButtonSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+type ButtonSize = '2xsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
 type ButtonBackground = 'none' | 'fill';
 type ButtonVariantProps = {
     variant?: 'solid' | 'assistive';

package/dist/index.d.ts

@@ -120,6 +120,11 @@ interface TagProps extends Pick<React__default.HTMLAttributes<HTMLDivElement>, '
     onDelete?: () => void;
     /** 텍스트 오른쪽에 표시할 슬롯 요소 */
     rightSlot?: React__default.ReactNode;
+    /**
+     * 비활성 상태. `color`와 관계없이 비활성 색으로 보이고 삭제 버튼도 비활성화됩니다.
+     * @default false
+     */
+    disabled?: boolean;
 }
 type TagComponent = React__default.ForwardRefExoticComponent<TagProps & React__default.RefAttributes<HTMLDivElement>>;
 interface DoubleTagProps {
@@ -129,10 +134,16 @@ interface DoubleTagProps {
         content: React__default.ReactNode;
     }[];
     className?: string;
+    /**
+     * 비활성 상태. 모든 항목과 테두리·구분선이 비활성 색으로 보입니다.
+     * @default false
+     */
+    disabled?: boolean;
 }
 declare const tagVariants: (props?: ({
     color?: "mono" | "sky" | "red" | "amber" | "green" | "orange" | "cyan" | "violet" | "pink" | "yellow" | "lime" | "emerald" | "teal" | "blue" | "indigo" | "purple" | "fuchsia" | "rose" | null | undefined;
     type?: "fill" | "line" | null | undefined;
+    disabled?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 /**
  * 카테고리나 상태를 나타내는 라벨 컴포넌트입니다.
@@ -215,7 +226,7 @@ type BreadcrumbComponent = React__default.ForwardRefExoticComponent<React__defau
 declare const Breadcrumb: BreadcrumbComponent;
 
 type ButtonColor = 'primary' | 'accent' | 'critical';
-type ButtonSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+type ButtonSize = '2xsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
 type ButtonBackground = 'none' | 'fill';
 type ButtonVariantProps = {
     variant?: 'solid' | 'assistive';

package/dist/index.js

@@ -263,6 +263,10 @@ var tagVariants = utils.cva(
       type: {
         fill: "",
         line: "bg-component-tag border border-border-secondary"
+      },
+      disabled: {
+        true: "text-text-disabled",
+        false: ""
       }
     },
     compoundVariants: [
@@ -283,7 +287,9 @@ var tagVariants = utils.cva(
       { color: "indigo", type: "fill", className: "bg-tint-background-indigo" },
       { color: "purple", type: "fill", className: "bg-tint-background-purple" },
       { color: "fuchsia", type: "fill", className: "bg-tint-background-fuchsia" },
-      { color: "rose", type: "fill", className: "bg-tint-background-rose" }
+      { color: "rose", type: "fill", className: "bg-tint-background-rose" },
+      { disabled: true, type: "fill", className: "bg-tint-background-mono" },
+      { disabled: true, type: "line", className: "border-border-disabled" }
     ],
     defaultVariants: {
       color: "mono",
@@ -300,6 +306,7 @@ var Tag = React.forwardRef(
     canDelete,
     onDelete,
     rightSlot,
+    disabled = false,
     children,
     ...props
   }, ref) => {
@@ -307,16 +314,27 @@ var Tag = React.forwardRef(
       "div",
       {
         "data-slot": "tag",
-        className: utils.cn(tagVariants({ color, type, className })),
+        className: utils.cn(tagVariants({ color, type, disabled, className })),
         ref,
         ...props,
         children: [
-          leftIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex shrink-0 size-3 items-center justify-center [&>svg]:size-3", children: leftIcon }),
+          leftIcon && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: utils.cn(
+                "flex shrink-0 size-3 items-center justify-center [&>svg]:size-3",
+                disabled && "text-icon-disabled"
+              ),
+              children: leftIcon
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-0.5 text-body-3 font-medium", children }),
           canDelete && /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               type: "button",
+              disabled,
+              className: utils.cn(disabled && "text-icon-disabled"),
               onClick: (e) => {
                 e.stopPropagation();
                 onDelete?.();
@@ -332,19 +350,37 @@ var Tag = React.forwardRef(
 );
 Tag.displayName = "Tag";
 var DoubleTag = React.forwardRef(
-  ({ className, items, ...props }, ref) => {
+  ({ className, items, disabled = false, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         className: utils.cn(
           "flex w-fit overflow-hidden rounded-medium border border-border-secondary",
+          disabled && "border-border-disabled",
           className
         ),
         ref,
         ...props,
         children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Tag, { color: item.color, type: "line", className: "rounded-none border-none", children: item.content }),
-          index < items.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-[20px] w-px border-none bg-border-secondary" })
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Tag,
+            {
+              color: item.color,
+              type: "line",
+              disabled,
+              className: "rounded-none border-none",
+              children: item.content
+            }
+          ),
+          index < items.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: utils.cn(
+                "min-h-[20px] w-px border-none bg-border-secondary",
+                disabled && "bg-border-disabled"
+              )
+            }
+          )
         ] }, index))
       }
     );
@@ -489,6 +525,7 @@ var buttonVariants = utils.cva(
     },
     variants: {
       size: {
+        "2xsmall": "h-5 gap-0 px-1 text-caption font-medium",
         xsmall: "h-6 gap-0 px-1 text-body-3 font-medium",
         small: "h-7 gap-0.5 px-1.5 text-body-2 font-medium",
         medium: "h-8 gap-0.5 px-2 text-body-2 font-medium",
@@ -499,6 +536,7 @@ var buttonVariants = utils.cva(
   }
 );
 var iconSizeMap = {
+  "2xsmall": chunkJIFX424V_js.iconSizes.xs,
   xsmall: chunkJIFX424V_js.iconSizes.sm,
   small: chunkJIFX424V_js.iconSizes.sm,
   medium: chunkJIFX424V_js.iconSizes.sm,
@@ -542,6 +580,7 @@ function Button({
   );
 }
 var iconButtonSizeClasses = {
+  "2xsmall": "size-5",
   xsmall: "size-6",
   small: "size-7",
   medium: "size-8",

package/dist/index.mjs

@@ -239,6 +239,10 @@ var tagVariants = cva(
       type: {
         fill: "",
         line: "bg-component-tag border border-border-secondary"
+      },
+      disabled: {
+        true: "text-text-disabled",
+        false: ""
       }
     },
     compoundVariants: [
@@ -259,7 +263,9 @@ var tagVariants = cva(
       { color: "indigo", type: "fill", className: "bg-tint-background-indigo" },
       { color: "purple", type: "fill", className: "bg-tint-background-purple" },
       { color: "fuchsia", type: "fill", className: "bg-tint-background-fuchsia" },
-      { color: "rose", type: "fill", className: "bg-tint-background-rose" }
+      { color: "rose", type: "fill", className: "bg-tint-background-rose" },
+      { disabled: true, type: "fill", className: "bg-tint-background-mono" },
+      { disabled: true, type: "line", className: "border-border-disabled" }
     ],
     defaultVariants: {
       color: "mono",
@@ -276,6 +282,7 @@ var Tag = forwardRef(
     canDelete,
     onDelete,
     rightSlot,
+    disabled = false,
     children,
     ...props
   }, ref) => {
@@ -283,16 +290,27 @@ var Tag = forwardRef(
       "div",
       {
         "data-slot": "tag",
-        className: cn(tagVariants({ color, type, className })),
+        className: cn(tagVariants({ color, type, disabled, className })),
         ref,
         ...props,
         children: [
-          leftIcon && /* @__PURE__ */ jsx("span", { className: "flex shrink-0 size-3 items-center justify-center [&>svg]:size-3", children: leftIcon }),
+          leftIcon && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "flex shrink-0 size-3 items-center justify-center [&>svg]:size-3",
+                disabled && "text-icon-disabled"
+              ),
+              children: leftIcon
+            }
+          ),
           /* @__PURE__ */ jsx("span", { className: "px-0.5 text-body-3 font-medium", children }),
           canDelete && /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
+              disabled,
+              className: cn(disabled && "text-icon-disabled"),
               onClick: (e) => {
                 e.stopPropagation();
                 onDelete?.();
@@ -308,19 +326,37 @@ var Tag = forwardRef(
 );
 Tag.displayName = "Tag";
 var DoubleTag = forwardRef(
-  ({ className, items, ...props }, ref) => {
+  ({ className, items, disabled = false, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "div",
       {
         className: cn(
           "flex w-fit overflow-hidden rounded-medium border border-border-secondary",
+          disabled && "border-border-disabled",
           className
         ),
         ref,
         ...props,
         children: items.map((item, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Tag, { color: item.color, type: "line", className: "rounded-none border-none", children: item.content }),
-          index < items.length - 1 && /* @__PURE__ */ jsx("div", { className: "min-h-[20px] w-px border-none bg-border-secondary" })
+          /* @__PURE__ */ jsx(
+            Tag,
+            {
+              color: item.color,
+              type: "line",
+              disabled,
+              className: "rounded-none border-none",
+              children: item.content
+            }
+          ),
+          index < items.length - 1 && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "min-h-[20px] w-px border-none bg-border-secondary",
+                disabled && "bg-border-disabled"
+              )
+            }
+          )
         ] }, index))
       }
     );
@@ -465,6 +501,7 @@ var buttonVariants = cva(
     },
     variants: {
       size: {
+        "2xsmall": "h-5 gap-0 px-1 text-caption font-medium",
         xsmall: "h-6 gap-0 px-1 text-body-3 font-medium",
         small: "h-7 gap-0.5 px-1.5 text-body-2 font-medium",
         medium: "h-8 gap-0.5 px-2 text-body-2 font-medium",
@@ -475,6 +512,7 @@ var buttonVariants = cva(
   }
 );
 var iconSizeMap = {
+  "2xsmall": iconSizes.xs,
   xsmall: iconSizes.sm,
   small: iconSizes.sm,
   medium: iconSizes.sm,
@@ -518,6 +556,7 @@ function Button({
   );
 }
 var iconButtonSizeClasses = {
+  "2xsmall": "size-5",
   xsmall: "size-6",
   small: "size-7",
   medium: "size-8",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exem-ui/react",
-  "version": "0.3.4-next.20261021004719",
+  "version": "0.3.4-next.20261027030607",
   "description": "Exem Design System - React Components",
   "author": "Exem Design Team",
   "license": "Apache-2.0",
@@ -98,7 +98,7 @@
     "tailwind-merge": "^3.3.1",
     "tailwind-scrollbar-hide": "^4.0.0",
     "tiny-invariant": "^1.3.3",
-    "@exem-ui/core": "0.3.3-next.20261021004719"
+    "@exem-ui/core": "0.3.3-next.20261027030607"
   },
   "devDependencies": {
     "@eslint/js": "^9.15.0",
@@ -134,7 +134,7 @@
     "tsup": "^8.5.0",
     "typescript": "^5.8.2",
     "typescript-eslint": "^8.16.0",
-    "@exem-ui/tailwindcss3": "0.3.2-next.20261021004719"
+    "@exem-ui/tailwindcss3": "0.3.2-next.20261027030607"
   },
   "scripts": {
     "generate": "node scripts/generate-icons.js",