@axis-ds/ui-react 1.2.0 → 1.3.0

package/dist/{chunk-E2C7WDLA.mjs → chunk-RFB4IABR.mjs}

@@ -1,6 +1,6 @@
 import {
   cn
-} from "./chunk-PJO7WJ4G.mjs";
+} from "./chunk-ZIF4PLK3.mjs";
 
 // src/toast/index.tsx
 import * as React from "react";

package/dist/{chunk-NEZK6NO5.mjs → chunk-SO2QSRGV.mjs}

@@ -1,6 +1,6 @@
 import {
   cn
-} from "./chunk-PJO7WJ4G.mjs";
+} from "./chunk-ZIF4PLK3.mjs";
 
 // src/tabs/index.tsx
 import * as React from "react";

package/dist/{chunk-Q3KALTWT.mjs → chunk-TA62Q7YX.mjs}

@@ -1,6 +1,6 @@
 import {
   cn
-} from "./chunk-PJO7WJ4G.mjs";
+} from "./chunk-ZIF4PLK3.mjs";
 
 // src/switch/index.tsx
 import * as React from "react";
@@ -11,7 +11,7 @@ var Switch = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   {
     className: cn(
       "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors",
-      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--axis-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--axis-surface-primary)]",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--axis-border-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--axis-surface-default)]",
       "disabled:cursor-not-allowed disabled:opacity-50",
       "data-[state=checked]:bg-[var(--axis-interactive-primary)]",
       "data-[state=unchecked]:bg-[var(--axis-surface-tertiary)]",

package/dist/{chunk-JM45JPSK.mjs → chunk-TB33GTWS.mjs}

@@ -1,6 +1,6 @@
 import {
   cn
-} from "./chunk-PJO7WJ4G.mjs";
+} from "./chunk-ZIF4PLK3.mjs";
 
 // src/toggle/index.tsx
 import * as React from "react";
@@ -8,7 +8,7 @@ import * as TogglePrimitive from "@radix-ui/react-toggle";
 import { cva } from "class-variance-authority";
 import { jsx } from "react/jsx-runtime";
 var toggleVariants = cva(
-  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium ring-offset-[var(--axis-surface-primary)] transition-colors hover:bg-[var(--axis-surface-secondary)] hover:text-[var(--axis-text-secondary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--axis-ring)] focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-[var(--axis-surface-secondary)] data-[state=on]:text-[var(--axis-text-primary)] [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium ring-offset-[var(--axis-surface-default)] transition-colors hover:bg-[var(--axis-surface-secondary)] hover:text-[var(--axis-text-secondary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--axis-border-focus)] focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-[var(--axis-surface-secondary)] data-[state=on]:text-[var(--axis-text-primary)] [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {

package/dist/{chunk-KAIB45YN.mjs → chunk-YI5OZRUB.mjs}

@@ -1,6 +1,6 @@
 import {
   cn
-} from "./chunk-PJO7WJ4G.mjs";
+} from "./chunk-ZIF4PLK3.mjs";
 
 // src/breadcrumb/index.tsx
 import * as React from "react";

package/dist/{chunk-SR3JZW6T.mjs → chunk-YZDRNV46.mjs}

@@ -1,6 +1,6 @@
 import {
   cn
-} from "./chunk-PJO7WJ4G.mjs";
+} from "./chunk-ZIF4PLK3.mjs";
 
 // src/dropdown-menu/index.tsx
 import * as React from "react";
@@ -52,7 +52,7 @@ var DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) =>
   {
     ref,
     className: cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-[var(--axis-border-default)] bg-[var(--axis-surface-primary)] p-1 text-[var(--axis-text-primary)] shadow-lg",
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-[var(--axis-border-default)] bg-[var(--axis-surface-default)] p-1 text-[var(--axis-text-primary)] shadow-lg",
       "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     ),
@@ -66,7 +66,7 @@ var DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...prop
     ref,
     sideOffset,
     className: cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-[var(--axis-border-default)] bg-[var(--axis-surface-primary)] p-1 text-[var(--axis-text-primary)] shadow-md",
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-[var(--axis-border-default)] bg-[var(--axis-surface-default)] p-1 text-[var(--axis-text-primary)] shadow-md",
       "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     ),

package/dist/{chunk-TD5OLTUB.mjs → chunk-Z4P43F5J.mjs}

@@ -1,6 +1,6 @@
 import {
   cn
-} from "./chunk-PJO7WJ4G.mjs";
+} from "./chunk-ZIF4PLK3.mjs";
 
 // src/alert/index.tsx
 import * as React from "react";
@@ -9,13 +9,16 @@ import { jsx } from "react/jsx-runtime";
 var alertVariants = cva(
   "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-current",
   {
+    // 아이콘은 기본 클래스 [&>svg]:text-current로 변형의 글자색(text-*)을 따른다.
+    // 라이트 icon-success(#22C55E) · icon-warning(#EAB308)은 상태 배경 대비가 2.18:1 · 1.85:1로
+    // 비텍스트 기준 3:1에 못 미치므로 아이콘 색에 쓰지 않는다(글자색은 4.76:1 이상).
     variants: {
       variant: {
-        default: "bg-[var(--axis-surface-primary)] text-[var(--axis-text-primary)] border-[var(--axis-border-default)]",
-        info: "bg-[var(--axis-blue-100)] text-[var(--axis-blue-900)] border-[var(--axis-blue-200)] [&>svg]:text-[var(--axis-blue-600)]",
-        success: "bg-[var(--axis-green-100)] text-[var(--axis-green-900)] border-[var(--axis-green-200)] [&>svg]:text-[var(--axis-green-600)]",
-        warning: "bg-[var(--axis-yellow-100)] text-[var(--axis-yellow-900)] border-[var(--axis-yellow-200)] [&>svg]:text-[var(--axis-yellow-600)]",
-        destructive: "bg-[var(--axis-red-100)] text-[var(--axis-red-900)] border-[var(--axis-red-200)] [&>svg]:text-[var(--axis-red-600)]"
+        default: "bg-[var(--axis-surface-default)] text-[var(--axis-text-primary)] border-[var(--axis-border-default)]",
+        info: "bg-[var(--axis-surface-info)] text-[var(--axis-text-info)] border-[var(--axis-border-info)]",
+        success: "bg-[var(--axis-surface-success)] text-[var(--axis-text-success)] border-[var(--axis-border-success)]",
+        warning: "bg-[var(--axis-surface-warning)] text-[var(--axis-text-warning)] border-[var(--axis-border-warning)]",
+        destructive: "bg-[var(--axis-surface-error)] text-[var(--axis-text-error)] border-[var(--axis-border-error)]"
       }
     },
     defaultVariants: {

package/dist/{chunk-XW4HTSUY.mjs → chunk-Z65ZMFDH.mjs}

@@ -1,6 +1,6 @@
 import {
   cn
-} from "./chunk-PJO7WJ4G.mjs";
+} from "./chunk-ZIF4PLK3.mjs";
 
 // src/command/index.tsx
 import * as React from "react";
@@ -11,7 +11,7 @@ var Command = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   {
     ref,
     className: cn(
-      "flex h-full w-full flex-col overflow-hidden rounded-md bg-[var(--axis-surface-primary)] text-[var(--axis-text-primary)]",
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-[var(--axis-surface-default)] text-[var(--axis-text-primary)]",
       className
     ),
     ...props

package/dist/chunk-ZIF4PLK3.mjs

@@ -0,0 +1,18 @@
+// src/utils.ts
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+var isArbitraryShadowWithHint = (value) => /^\[shadow:.+\]$/.test(value);
+var twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      shadow: [{ shadow: [isArbitraryShadowWithHint] }]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+export {
+  cn
+};

package/dist/{chunk-AEBHTW7E.mjs → chunk-ZW6GY5PO.mjs}

@@ -1,6 +1,6 @@
 import {
   cn
-} from "./chunk-PJO7WJ4G.mjs";
+} from "./chunk-ZIF4PLK3.mjs";
 
 // src/separator/index.tsx
 import * as React from "react";

package/dist/command/index.d.mts

@@ -10,7 +10,7 @@ declare const Command: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
     label?: string;
     shouldFilter?: boolean;
     filter?: (value: string, search: string, keywords?: string[]) => number;
@@ -26,7 +26,7 @@ declare const CommandInput: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<
     ref?: React.Ref<HTMLInputElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "type" | "value"> & {
+}, "key" | "asChild" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "value" | "type"> & {
     value?: string;
     onValueChange?: (search: string) => void;
 } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
@@ -37,7 +37,7 @@ declare const CommandList: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
     label?: string;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 /** 검색 결과가 없을 때 표시되는 빈 상태 컴포넌트 */
@@ -47,7 +47,7 @@ declare const CommandEmpty: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 /** 관련 명령어 항목들을 그룹화하는 컴포넌트 */
 declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
@@ -55,7 +55,7 @@ declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "heading" | "value"> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "heading" | "value"> & {
     heading?: React.ReactNode;
     value?: string;
     forceMount?: boolean;
@@ -65,7 +65,7 @@ declare const CommandSeparator: React.ForwardRefExoticComponent<Omit<Pick<Pick<R
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
     alwaysRender?: boolean;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 /** 명령어 팔레트의 개별 선택 가능한 항목 */
@@ -75,7 +75,7 @@ declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "onSelect" | "disabled" | "value"> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "onSelect" | "disabled" | "value"> & {
     disabled?: boolean;
     onSelect?: (value: string) => void;
     value?: string;

package/dist/command/index.d.ts

@@ -10,7 +10,7 @@ declare const Command: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
     label?: string;
     shouldFilter?: boolean;
     filter?: (value: string, search: string, keywords?: string[]) => number;
@@ -26,7 +26,7 @@ declare const CommandInput: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<
     ref?: React.Ref<HTMLInputElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "type" | "value"> & {
+}, "key" | "asChild" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "value" | "type"> & {
     value?: string;
     onValueChange?: (search: string) => void;
 } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
@@ -37,7 +37,7 @@ declare const CommandList: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
     label?: string;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 /** 검색 결과가 없을 때 표시되는 빈 상태 컴포넌트 */
@@ -47,7 +47,7 @@ declare const CommandEmpty: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 /** 관련 명령어 항목들을 그룹화하는 컴포넌트 */
 declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
@@ -55,7 +55,7 @@ declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "heading" | "value"> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "heading" | "value"> & {
     heading?: React.ReactNode;
     value?: string;
     forceMount?: boolean;
@@ -65,7 +65,7 @@ declare const CommandSeparator: React.ForwardRefExoticComponent<Omit<Pick<Pick<R
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
     alwaysRender?: boolean;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 /** 명령어 팔레트의 개별 선택 가능한 항목 */
@@ -75,7 +75,7 @@ declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "onSelect" | "disabled" | "value"> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "onSelect" | "disabled" | "value"> & {
     disabled?: boolean;
     onSelect?: (value: string) => void;
     value?: string;

package/dist/command/index.js

@@ -45,8 +45,16 @@ var import_cmdk = require("cmdk");
 // src/utils.ts
 var import_clsx = require("clsx");
 var import_tailwind_merge = require("tailwind-merge");
+var isArbitraryShadowWithHint = (value) => /^\[shadow:.+\]$/.test(value);
+var twMerge = (0, import_tailwind_merge.extendTailwindMerge)({
+  extend: {
+    classGroups: {
+      shadow: [{ shadow: [isArbitraryShadowWithHint] }]
+    }
+  }
+});
 function cn(...inputs) {
-  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+  return twMerge((0, import_clsx.clsx)(inputs));
 }
 
 // src/command/index.tsx
@@ -56,7 +64,7 @@ var Command = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   {
     ref,
     className: cn(
-      "flex h-full w-full flex-col overflow-hidden rounded-md bg-[var(--axis-surface-primary)] text-[var(--axis-text-primary)]",
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-[var(--axis-surface-default)] text-[var(--axis-text-primary)]",
       className
     ),
     ...props

package/dist/command/index.mjs

@@ -6,8 +6,8 @@ import {
   CommandItem,
   CommandList,
   CommandSeparator
-} from "../chunk-XW4HTSUY.mjs";
-import "../chunk-PJO7WJ4G.mjs";
+} from "../chunk-Z65ZMFDH.mjs";
+import "../chunk-ZIF4PLK3.mjs";
 export {
   Command,
   CommandEmpty,

package/dist/dialog/index.js

@@ -48,8 +48,16 @@ var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"));
 // src/utils.ts
 var import_clsx = require("clsx");
 var import_tailwind_merge = require("tailwind-merge");
+var isArbitraryShadowWithHint = (value) => /^\[shadow:.+\]$/.test(value);
+var twMerge = (0, import_tailwind_merge.extendTailwindMerge)({
+  extend: {
+    classGroups: {
+      shadow: [{ shadow: [isArbitraryShadowWithHint] }]
+    }
+  }
+});
 function cn(...inputs) {
-  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+  return twMerge((0, import_clsx.clsx)(inputs));
 }
 
 // src/dialog/index.tsx
@@ -77,7 +85,7 @@ var DialogContent = React.forwardRef(({ className, children, ...props }, ref) =>
     {
       ref,
       className: cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-[shadow:var(--axis-shadow-lg)] duration-200",
         "bg-[var(--axis-dialog-content-bg)] border-[var(--axis-dialog-content-border)]",
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
         "sm:rounded-lg",

package/dist/dialog/index.mjs

@@ -9,8 +9,8 @@ import {
   DialogPortal,
   DialogTitle,
   DialogTrigger
-} from "../chunk-IXLVGZWU.mjs";
-import "../chunk-PJO7WJ4G.mjs";
+} from "../chunk-CY72AGI2.mjs";
+import "../chunk-ZIF4PLK3.mjs";
 export {
   Dialog,
   DialogClose,

package/dist/dropdown-menu/index.js

@@ -53,8 +53,16 @@ var DropdownMenuPrimitive = __toESM(require("@radix-ui/react-dropdown-menu"));
 // src/utils.ts
 var import_clsx = require("clsx");
 var import_tailwind_merge = require("tailwind-merge");
+var isArbitraryShadowWithHint = (value) => /^\[shadow:.+\]$/.test(value);
+var twMerge = (0, import_tailwind_merge.extendTailwindMerge)({
+  extend: {
+    classGroups: {
+      shadow: [{ shadow: [isArbitraryShadowWithHint] }]
+    }
+  }
+});
 function cn(...inputs) {
-  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+  return twMerge((0, import_clsx.clsx)(inputs));
 }
 
 // src/dropdown-menu/index.tsx
@@ -105,7 +113,7 @@ var DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) =>
   {
     ref,
     className: cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-[var(--axis-border-default)] bg-[var(--axis-surface-primary)] p-1 text-[var(--axis-text-primary)] shadow-lg",
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-[var(--axis-border-default)] bg-[var(--axis-surface-default)] p-1 text-[var(--axis-text-primary)] shadow-lg",
       "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     ),
@@ -119,7 +127,7 @@ var DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...prop
     ref,
     sideOffset,
     className: cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-[var(--axis-border-default)] bg-[var(--axis-surface-primary)] p-1 text-[var(--axis-text-primary)] shadow-md",
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-[var(--axis-border-default)] bg-[var(--axis-surface-default)] p-1 text-[var(--axis-text-primary)] shadow-md",
       "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     ),

package/dist/dropdown-menu/index.mjs

@@ -14,8 +14,8 @@ import {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger
-} from "../chunk-SR3JZW6T.mjs";
-import "../chunk-PJO7WJ4G.mjs";
+} from "../chunk-YZDRNV46.mjs";
+import "../chunk-ZIF4PLK3.mjs";
 export {
   DropdownMenu,
   DropdownMenuCheckboxItem,

package/dist/index.js

@@ -158,8 +158,16 @@ module.exports = __toCommonJS(index_exports);
 // src/utils.ts
 var import_clsx = require("clsx");
 var import_tailwind_merge = require("tailwind-merge");
+var isArbitraryShadowWithHint = (value) => /^\[shadow:.+\]$/.test(value);
+var twMerge = (0, import_tailwind_merge.extendTailwindMerge)({
+  extend: {
+    classGroups: {
+      shadow: [{ shadow: [isArbitraryShadowWithHint] }]
+    }
+  }
+});
 function cn(...inputs) {
-  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+  return twMerge((0, import_clsx.clsx)(inputs));
 }
 
 // src/button/index.tsx
@@ -264,8 +272,8 @@ var Checkbox = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__
     ref,
     className: cn(
       "peer h-4 w-4 shrink-0 rounded-sm border border-[var(--axis-border-default)]",
-      "ring-offset-[var(--axis-surface-primary)]",
-      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--axis-ring)] focus-visible:ring-offset-2",
+      "ring-offset-[var(--axis-surface-default)]",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--axis-border-focus)] focus-visible:ring-offset-2",
       "disabled:cursor-not-allowed disabled:opacity-50",
       "data-[state=checked]:bg-[var(--axis-interactive-primary)] data-[state=checked]:border-[var(--axis-interactive-primary)] data-[state=checked]:text-white",
       className
@@ -315,8 +323,8 @@ var RadioGroupItem = React5.forwardRef(({ className, ...props }, ref) => /* @__P
     ref,
     className: cn(
       "aspect-square h-4 w-4 rounded-full border border-[var(--axis-border-default)]",
-      "ring-offset-[var(--axis-surface-primary)]",
-      "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--axis-ring)] focus-visible:ring-offset-2",
+      "ring-offset-[var(--axis-surface-default)]",
+      "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--axis-border-focus)] focus-visible:ring-offset-2",
       "disabled:cursor-not-allowed disabled:opacity-50",
       "data-[state=checked]:border-[var(--axis-interactive-primary)] data-[state=checked]:text-[var(--axis-interactive-primary)]",
       className
@@ -493,7 +501,7 @@ var Slider = React7.forwardRef(
           {
             "aria-label": ariaLabel,
             "aria-labelledby": ariaLabelledby,
-            className: "block h-5 w-5 rounded-full border-2 border-[var(--axis-interactive-primary)] bg-[var(--axis-surface-primary)] ring-offset-[var(--axis-surface-primary)] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--axis-ring)] focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+            className: "block h-5 w-5 rounded-full border-2 border-[var(--axis-interactive-primary)] bg-[var(--axis-surface-default)] ring-offset-[var(--axis-surface-default)] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--axis-border-focus)] focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
           }
         )
       ]
@@ -511,7 +519,7 @@ var Switch = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   {
     className: cn(
       "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors",
-      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--axis-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--axis-surface-primary)]",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--axis-border-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--axis-surface-default)]",
       "disabled:cursor-not-allowed disabled:opacity-50",
       "data-[state=checked]:bg-[var(--axis-interactive-primary)]",
       "data-[state=unchecked]:bg-[var(--axis-surface-tertiary)]",
@@ -539,11 +547,11 @@ var Textarea = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   "textarea",
   {
     className: cn(
-      "flex min-h-[80px] w-full rounded-md border border-[var(--axis-border-default)] bg-[var(--axis-surface-primary)] px-3 py-2 text-sm",
+      "flex min-h-[80px] w-full rounded-md border border-[var(--axis-border-default)] bg-[var(--axis-surface-default)] px-3 py-2 text-sm",
       "text-[var(--axis-text-primary)]",
-      "ring-offset-[var(--axis-surface-primary)]",
+      "ring-offset-[var(--axis-surface-default)]",
       "placeholder:text-[var(--axis-text-tertiary)]",
-      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--axis-ring)] focus-visible:ring-offset-2",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--axis-border-focus)] focus-visible:ring-offset-2",
       "disabled:cursor-not-allowed disabled:opacity-50",
       className
     ),
@@ -559,7 +567,7 @@ var TogglePrimitive = __toESM(require("@radix-ui/react-toggle"));
 var import_class_variance_authority3 = require("class-variance-authority");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var toggleVariants = (0, import_class_variance_authority3.cva)(
-  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium ring-offset-[var(--axis-surface-primary)] transition-colors hover:bg-[var(--axis-surface-secondary)] hover:text-[var(--axis-text-secondary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--axis-ring)] focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-[var(--axis-surface-secondary)] data-[state=on]:text-[var(--axis-text-primary)] [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium ring-offset-[var(--axis-surface-default)] transition-colors hover:bg-[var(--axis-surface-secondary)] hover:text-[var(--axis-text-secondary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--axis-border-focus)] focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-[var(--axis-surface-secondary)] data-[state=on]:text-[var(--axis-text-primary)] [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
@@ -656,7 +664,7 @@ var Card = React12.forwardRef(
     {
       ref,
       className: cn(
-        "rounded-lg border bg-[var(--axis-card-bg-default)] border-[var(--axis-card-border-default)] shadow-sm",
+        "rounded-lg border bg-[var(--axis-card-bg-default)] border-[var(--axis-card-border-default)] shadow-[shadow:var(--axis-card-shadow)]",
         className
       ),
       ...props
@@ -1025,7 +1033,7 @@ var DialogContent = React17.forwardRef(({ className, children, ...props }, ref)
     {
       ref,
       className: cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-[shadow:var(--axis-shadow-lg)] duration-200",
         "bg-[var(--axis-dialog-content-bg)] border-[var(--axis-dialog-content-border)]",
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
         "sm:rounded-lg",
@@ -1137,7 +1145,7 @@ var DropdownMenuSubContent = React18.forwardRef(({ className, ...props }, ref) =
   {
     ref,
     className: cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-[var(--axis-border-default)] bg-[var(--axis-surface-primary)] p-1 text-[var(--axis-text-primary)] shadow-lg",
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-[var(--axis-border-default)] bg-[var(--axis-surface-default)] p-1 text-[var(--axis-text-primary)] shadow-lg",
       "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     ),
@@ -1151,7 +1159,7 @@ var DropdownMenuContent = React18.forwardRef(({ className, sideOffset = 4, ...pr
     ref,
     sideOffset,
     className: cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-[var(--axis-border-default)] bg-[var(--axis-surface-primary)] p-1 text-[var(--axis-text-primary)] shadow-md",
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-[var(--axis-border-default)] bg-[var(--axis-surface-default)] p-1 text-[var(--axis-text-primary)] shadow-md",
       "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     ),
@@ -1289,7 +1297,7 @@ var PopoverContent = React19.forwardRef(({ className, align = "center", sideOffs
     align,
     sideOffset,
     className: cn(
-      "z-50 w-72 rounded-md border border-[var(--axis-border-default)] bg-[var(--axis-surface-primary)] p-4 text-[var(--axis-text-primary)] shadow-md outline-none",
+      "z-50 w-72 rounded-md border border-[var(--axis-border-default)] bg-[var(--axis-surface-default)] p-4 text-[var(--axis-text-primary)] shadow-md outline-none",
       "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     ),
@@ -1320,7 +1328,7 @@ var SheetOverlay = React20.forwardRef(({ className, ...props }, ref) => /* @__PU
 ));
 SheetOverlay.displayName = "SheetOverlay";
 var sheetVariants = (0, import_class_variance_authority4.cva)(
-  "fixed z-50 gap-4 bg-[var(--axis-surface-primary)] border-[var(--axis-border-default)] p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  "fixed z-50 gap-4 bg-[var(--axis-surface-default)] border-[var(--axis-border-default)] p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
   {
     variants: {
       side: {
@@ -1344,7 +1352,7 @@ var SheetContent = React20.forwardRef(({ side = "right", className, children, ..
       className: cn(sheetVariants({ side }), className),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(SheetPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-[var(--axis-surface-primary)] transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-[var(--axis-ring)] focus:ring-offset-2 disabled:pointer-events-none", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(SheetPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-[var(--axis-surface-default)] transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-[var(--axis-border-focus)] focus:ring-offset-2 disabled:pointer-events-none", children: [
           /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
             "svg",
             {
@@ -1455,13 +1463,16 @@ var import_jsx_runtime22 = require("react/jsx-runtime");
 var alertVariants = (0, import_class_variance_authority5.cva)(
   "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-current",
   {
+    // 아이콘은 기본 클래스 [&>svg]:text-current로 변형의 글자색(text-*)을 따른다.
+    // 라이트 icon-success(#22C55E) · icon-warning(#EAB308)은 상태 배경 대비가 2.18:1 · 1.85:1로
+    // 비텍스트 기준 3:1에 못 미치므로 아이콘 색에 쓰지 않는다(글자색은 4.76:1 이상).
     variants: {
       variant: {
-        default: "bg-[var(--axis-surface-primary)] text-[var(--axis-text-primary)] border-[var(--axis-border-default)]",
-        info: "bg-[var(--axis-blue-100)] text-[var(--axis-blue-900)] border-[var(--axis-blue-200)] [&>svg]:text-[var(--axis-blue-600)]",
-        success: "bg-[var(--axis-green-100)] text-[var(--axis-green-900)] border-[var(--axis-green-200)] [&>svg]:text-[var(--axis-green-600)]",
-        warning: "bg-[var(--axis-yellow-100)] text-[var(--axis-yellow-900)] border-[var(--axis-yellow-200)] [&>svg]:text-[var(--axis-yellow-600)]",
-        destructive: "bg-[var(--axis-red-100)] text-[var(--axis-red-900)] border-[var(--axis-red-200)] [&>svg]:text-[var(--axis-red-600)]"
+        default: "bg-[var(--axis-surface-default)] text-[var(--axis-text-primary)] border-[var(--axis-border-default)]",
+        info: "bg-[var(--axis-surface-info)] text-[var(--axis-text-info)] border-[var(--axis-border-info)]",
+        success: "bg-[var(--axis-surface-success)] text-[var(--axis-text-success)] border-[var(--axis-border-success)]",
+        warning: "bg-[var(--axis-surface-warning)] text-[var(--axis-text-warning)] border-[var(--axis-border-warning)]",
+        destructive: "bg-[var(--axis-surface-error)] text-[var(--axis-text-error)] border-[var(--axis-border-error)]"
       }
     },
     defaultVariants: {
@@ -1510,7 +1521,7 @@ var badgeVariants = (0, import_class_variance_authority6.cva)(
     variants: {
       variant: {
         default: "border-transparent bg-[var(--axis-badge-default-bg)] text-[var(--axis-badge-default-text)]",
-        secondary: "border-transparent bg-[var(--axis-bg-muted)] text-[var(--axis-text-secondary)]",
+        secondary: "border-transparent bg-[var(--axis-surface-secondary)] text-[var(--axis-text-secondary)]",
         destructive: "border-transparent bg-[var(--axis-badge-error-bg)] text-[var(--axis-badge-error-text)]",
         success: "border-transparent bg-[var(--axis-badge-success-bg)] text-[var(--axis-badge-success-text)]",
         warning: "border-transparent bg-[var(--axis-badge-warning-bg)] text-[var(--axis-badge-warning-text)]",
@@ -1560,10 +1571,10 @@ var progressIndicatorVariants = (0, import_class_variance_authority7.cva)(
   {
     variants: {
       variant: {
-        default: "bg-[var(--axis-brand-500)]",
-        success: "bg-[var(--axis-green-500)]",
-        warning: "bg-[var(--axis-yellow-500)]",
-        destructive: "bg-[var(--axis-red-500)]"
+        default: "bg-[var(--axis-surface-brand)]",
+        success: "bg-[var(--axis-color-green-500)]",
+        warning: "bg-[var(--axis-color-yellow-500)]",
+        destructive: "bg-[var(--axis-color-red-500)]"
       }
     },
     defaultVariants: {
@@ -1816,7 +1827,7 @@ var Command = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   {
     ref,
     className: cn(
-      "flex h-full w-full flex-col overflow-hidden rounded-md bg-[var(--axis-surface-primary)] text-[var(--axis-text-primary)]",
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-[var(--axis-surface-default)] text-[var(--axis-text-primary)]",
       className
     ),
     ...props