@exem-ui/react 0.3.4-next.20260630003548 → 0.3.4-next.20260701100258

package/dist/index.mjs

@@ -401,14 +401,41 @@ Breadcrumb.Path.displayName = "Breadcrumb.Path";
 Breadcrumb.Separator.displayName = "Breadcrumb.Separator";
 Breadcrumb.Ellipsis.displayName = "Breadcrumb.Ellipsis";
 var colorStyles = {
+  primary: {
+    solid: {
+      button: "bg-solid-primary-default hover:bg-solid-primary-hovered disabled:bg-solid-primary-disabled",
+      icon: "text-icon-inverse group-disabled/button:text-icon-inverse",
+      text: "text-text-inverse group-disabled/button:text-text-inverse"
+    },
+    assistive: {
+      button: "bg-elevation-elevation-2 hover:bg-elevation-elevation-3 disabled:bg-elevation-elevation-2",
+      icon: "text-icon-secondary group-disabled/button:text-icon-disabled",
+      text: "text-text-secondary group-disabled/button:text-text-disabled"
+    },
+    outlined: {
+      button: "border border-border-primary disabled:border-border-primary hover:bg-elevation-elevation-2",
+      icon: "text-icon-secondary group-disabled/button:text-icon-disabled",
+      text: "text-text-secondary group-disabled/button:text-text-disabled"
+    },
+    invisible: {
+      button: "hover:bg-elevation-elevation-2",
+      icon: "text-icon-secondary group-disabled/button:text-icon-disabled",
+      text: "text-text-secondary group-disabled/button:text-text-disabled"
+    }
+  },
   accent: {
-    contained: {
+    solid: {
       button: "bg-solid-accent-default hover:bg-solid-accent-hovered disabled:bg-solid-accent-disabled",
       icon: "text-icon-static-light group-disabled/button:text-icon-inverse-disabled",
       text: "text-text-static-light group-disabled/button:text-text-inverse-disabled"
     },
+    assistive: {
+      button: "bg-elevation-accent-0 hover:bg-elevation-accent-1 disabled:bg-elevation-accent-0",
+      icon: "text-text-accent group-disabled/button:text-text-accent-disabled",
+      text: "text-text-accent group-disabled/button:text-text-accent-disabled"
+    },
     outlined: {
-      button: "border border-border-accent hover:bg-elevation-accent-0 disabled:border-border-accent-disabled",
+      button: "border border-border-primary disabled:border-border-primary hover:bg-elevation-accent-0",
       icon: "text-text-accent group-disabled/button:text-text-accent-disabled",
       text: "text-text-accent group-disabled/button:text-text-accent-disabled"
     },
@@ -418,21 +445,19 @@ var colorStyles = {
       text: "text-text-accent group-disabled/button:text-text-accent-disabled"
     }
   },
-  assistive: {
-    contained: {
-      button: "bg-elevation-elevation-2 hover:bg-elevation-elevation-3 disabled:bg-elevation-elevation-2",
-      icon: "text-icon-secondary group-disabled/button:text-icon-disabled",
-      text: "text-text-secondary group-disabled/button:text-text-disabled"
-    }
-  },
   critical: {
-    contained: {
+    solid: {
       button: "bg-solid-critical-default hover:bg-solid-critical-hovered disabled:bg-solid-critical-disabled",
       icon: "text-icon-static-light group-disabled/button:text-icon-inverse-disabled",
       text: "text-text-static-light group-disabled/button:text-text-inverse-disabled"
     },
+    assistive: {
+      button: "bg-elevation-critical-0 hover:bg-elevation-critical-1 disabled:bg-elevation-critical-0",
+      icon: "text-text-critical group-disabled/button:text-text-critical-disabled",
+      text: "text-text-critical group-disabled/button:text-text-critical-disabled"
+    },
     outlined: {
-      button: "border border-border-critical hover:bg-elevation-critical-0 disabled:border-border-critical-disabled",
+      button: "border border-border-primary disabled:border-border-primary hover:bg-elevation-critical-0",
       icon: "text-text-critical group-disabled/button:text-text-critical-disabled",
       text: "text-text-critical group-disabled/button:text-text-critical-disabled"
     },
@@ -441,30 +466,6 @@ var colorStyles = {
       icon: "text-text-critical group-disabled/button:text-text-critical-disabled",
       text: "text-text-critical group-disabled/button:text-text-critical-disabled"
     }
-  },
-  inverse: {
-    contained: {
-      button: "bg-elevation-elevation-0 hover:bg-elevation-elevation-2 disabled:bg-elevation-elevation-2",
-      icon: "text-icon-secondary group-disabled/button:text-icon-disabled",
-      text: "text-text-secondary group-disabled/button:text-text-disabled"
-    }
-  },
-  primary: {
-    contained: {
-      button: "bg-solid-primary-default hover:bg-solid-primary-hovered disabled:bg-solid-primary-disabled",
-      icon: "text-icon-inverse group-disabled/button:text-icon-inverse",
-      text: "text-text-inverse group-disabled/button:text-text-inverse"
-    },
-    outlined: {
-      button: "border border-border-primary hover:bg-elevation-elevation-2 disabled:border-border-primary",
-      icon: "text-icon-secondary group-disabled/button:text-icon-disabled",
-      text: "text-text-secondary group-disabled/button:text-text-disabled"
-    },
-    invisible: {
-      button: "hover:bg-elevation-elevation-2",
-      icon: "text-icon-secondary group-disabled/button:text-icon-disabled",
-      text: "text-text-secondary group-disabled/button:text-text-disabled"
-    }
   }
 };
 var buttonVariants = cva(
@@ -472,77 +473,41 @@ var buttonVariants = cva(
   {
     compoundVariants: [
       // Primary 색상 조합
-      {
-        className: colorStyles.primary.contained.button,
-        color: "primary",
-        variant: "contained"
-      },
-      {
-        className: colorStyles.primary.outlined.button,
-        color: "primary",
-        variant: "outlined"
-      },
-      {
-        className: colorStyles.primary.invisible.button,
-        color: "primary",
-        variant: "invisible"
-      },
+      { className: colorStyles.primary.solid.button, color: "primary", variant: "solid" },
+      { className: colorStyles.primary.assistive.button, color: "primary", variant: "assistive" },
+      { className: colorStyles.primary.outlined.button, color: "primary", variant: "outlined" },
+      { className: colorStyles.primary.invisible.button, color: "primary", variant: "invisible" },
       // Accent 색상 조합
-      {
-        className: colorStyles.accent.contained.button,
-        color: "accent",
-        variant: "contained"
-      },
-      {
-        className: colorStyles.accent.outlined.button,
-        color: "accent",
-        variant: "outlined"
-      },
-      {
-        className: colorStyles.accent.invisible.button,
-        color: "accent",
-        variant: "invisible"
-      },
+      { className: colorStyles.accent.solid.button, color: "accent", variant: "solid" },
+      { className: colorStyles.accent.assistive.button, color: "accent", variant: "assistive" },
+      { className: colorStyles.accent.outlined.button, color: "accent", variant: "outlined" },
+      { className: colorStyles.accent.invisible.button, color: "accent", variant: "invisible" },
       // Critical 색상 조합
+      { className: colorStyles.critical.solid.button, color: "critical", variant: "solid" },
+      { className: colorStyles.critical.assistive.button, color: "critical", variant: "assistive" },
+      { className: colorStyles.critical.outlined.button, color: "critical", variant: "outlined" },
+      { className: colorStyles.critical.invisible.button, color: "critical", variant: "invisible" },
+      // background 표면은 outlined/invisible 에서만 추가
       {
-        className: colorStyles.critical.contained.button,
-        color: "critical",
-        variant: "contained"
-      },
-      {
-        className: colorStyles.critical.outlined.button,
-        color: "critical",
-        variant: "outlined"
-      },
-      {
-        className: colorStyles.critical.invisible.button,
-        color: "critical",
-        variant: "invisible"
-      },
-      // Assistive 색상 조합 (contained만 지원)
-      {
-        className: colorStyles.assistive.contained.button,
-        color: "assistive",
-        variant: "contained"
-      },
-      // Inverse 색상 조합 (contained만 지원)
-      {
-        className: colorStyles.inverse.contained.button,
-        color: "inverse",
-        variant: "contained"
+        className: "bg-elevation-elevation-0",
+        background: "fill",
+        variant: ["outlined", "invisible"]
       }
     ],
     defaultVariants: {
+      background: "none",
       color: "primary",
       size: "medium",
-      variant: "contained"
+      variant: "solid"
     },
     variants: {
+      background: {
+        none: "",
+        fill: ""
+      },
       color: {
         accent: "",
-        assistive: "",
         critical: "",
-        inverse: "",
         primary: ""
       },
       size: {
@@ -553,9 +518,10 @@ var buttonVariants = cva(
         xlarge: "h-12 gap-1 px-3 text-title-2 font-medium"
       },
       variant: {
-        contained: "",
-        outlined: "bg-transparent",
-        invisible: "bg-transparent"
+        solid: "",
+        assistive: "",
+        outlined: "",
+        invisible: ""
       }
     }
   }
@@ -570,27 +536,31 @@ var IconSizeMap = {
 var Button = forwardRef(
   ({
     className,
-    variant = "contained",
+    variant = "solid",
     color = "primary",
+    background,
     size = "medium",
     icon,
     children,
     ...props
   }, ref) => {
-    const validColorStyle = color === "assistive" || color === "inverse" ? colorStyles[color].contained : colorStyles[color][variant];
     const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
       icon && cloneElement(icon, {
         className: cn(
           "shrink-0 [&>path]:fill-current",
-          validColorStyle.icon,
+          colorStyles[color][variant].icon,
           icon.props.className
         ),
-        size: icon.props.size ?? IconSizeMap[size ?? "medium"]
+        size: icon.props.size ?? IconSizeMap[size]
       }),
       typeof children === "string" ? /* @__PURE__ */ jsx(
         "span",
         {
-          className: cn("truncate", size === "xlarge" ? "px-1" : "px-0.5", validColorStyle.text),
+          className: cn(
+            "truncate",
+            size === "xlarge" ? "px-1" : "px-0.5",
+            colorStyles[color][variant].text
+          ),
           children
         }
       ) : children
@@ -600,6 +570,7 @@ var Button = forwardRef(
       {
         className: cn(
           buttonVariants({
+            background,
             className,
             color,
             size,
@@ -623,21 +594,11 @@ var iconButtonSizeClasses = {
   xlarge: "size-12"
 };
 var IconButton = forwardRef(
-  ({
-    className,
-    tooltip,
-    variant = "contained",
-    icon,
-    size = "medium",
-    color = "primary",
-    ...props
-  }, ref) => {
+  ({ className, tooltip, icon, size = "medium", ...props }, ref) => {
     const buttonProps = {
       className: cn(iconButtonSizeClasses[size], "px-0", className),
-      color,
       icon,
       size,
-      variant,
       ...props
     };
     return /* @__PURE__ */ jsx(ConditionalTooltip, { tooltip, children: /* @__PURE__ */ jsx(Button, { ref, ...buttonProps }) });
@@ -684,7 +645,7 @@ var ButtonGroup = forwardRef(
               onClick: item.onClick,
               size
             };
-            return /* @__PURE__ */ jsx(ConditionalTooltip, { tooltip: item.tooltip, children: variant === "contained" ? /* @__PURE__ */ jsx(IconButton, { ...iconBaseProps, color: "assistive", variant: "contained" }) : /* @__PURE__ */ jsx(IconButton, { ...iconBaseProps, color: "primary", variant: "outlined" }) }, item.id);
+            return /* @__PURE__ */ jsx(ConditionalTooltip, { tooltip: item.tooltip, children: variant === "contained" ? /* @__PURE__ */ jsx(IconButton, { ...iconBaseProps, variant: "assistive" }) : /* @__PURE__ */ jsx(IconButton, { ...iconBaseProps, color: "primary", variant: "outlined" }) }, item.id);
           }
           const buttonBaseProps = {
             className: cn(roundedClasses, dividerClasses, mergeClasses, hoverClasses),
@@ -692,7 +653,7 @@ var ButtonGroup = forwardRef(
             onClick: item.onClick,
             size
           };
-          return /* @__PURE__ */ jsx(ConditionalTooltip, { tooltip: item.tooltip, children: variant === "contained" ? /* @__PURE__ */ jsx(Button, { ...buttonBaseProps, color: "assistive", variant: "contained", children: item.label }) : /* @__PURE__ */ jsx(Button, { ...buttonBaseProps, color: "primary", variant: "outlined", children: item.label }) }, item.id);
+          return /* @__PURE__ */ jsx(ConditionalTooltip, { tooltip: item.tooltip, children: variant === "contained" ? /* @__PURE__ */ jsx(Button, { ...buttonBaseProps, variant: "assistive", children: item.label }) : /* @__PURE__ */ jsx(Button, { ...buttonBaseProps, color: "primary", variant: "outlined", children: item.label }) }, item.id);
         })
       }
     );
@@ -1671,8 +1632,7 @@ Modal.Close = forwardRef(({ size, ...props }, ref) => {
     {
       ...props,
       ref,
-      color: "assistive",
-      variant: "contained",
+      variant: "assistive",
       size: size ?? (modalSize === "fullsize" ? "large" : "medium")
     }
   ) });
@@ -1820,7 +1780,7 @@ Modal.Action = forwardRef(
         ...props,
         ref,
         color,
-        variant: "contained",
+        variant: "solid",
         size: size ?? (modalSize === "fullsize" ? "large" : "medium")
       }
     ) });
@@ -2220,7 +2180,7 @@ MessageBox.Actions = forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-row gap-2", className), ...props })
 );
 MessageBox.Cancel = forwardRef(
-  ({ size = "medium", ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { ref, color: "assistive", variant: "contained", size, ...props }) })
+  ({ size = "medium", ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { ref, variant: "assistive", size, ...props }) })
 );
 MessageBox.Action = forwardRef(
   ({ size = "medium", ...props }, ref) => {
@@ -2230,7 +2190,7 @@ MessageBox.Action = forwardRef(
       {
         ref,
         color: variant === "critical" ? "critical" : "primary",
-        variant: "contained",
+        variant: "solid",
         size,
         ...props
       }