@axis-ds/ui-react 1.6.3 → 1.8.0

package/README.md

@@ -93,8 +93,8 @@ export default function Page() {
 
 | 경계 | 컴포넌트 |
 |---|---|
-| 모듈 전체(패키지 `dist` 파일에 `"use client"`) | `Avatar`(이미지 로드 오류 상태와 대체 표시), `Command` · `CommandInput` · `CommandList` · `CommandEmpty` · `CommandGroup` · `CommandItem` · `CommandSeparator`(cmdk) |
-| Radix 부분만(Radix 패키지 자체의 `"use client"`) | Accordion · Checkbox · Collapsible · Dialog · Dropdown Menu · Label · Popover · Radio Group · Scroll Area · Select · Separator · Sheet · Slider · Switch · Tabs · Toast · Toggle · Tooltip. 래퍼는 서버에서 렌더되고 Radix 부분이 클라이언트 참조가 됩니다 |
+| 모듈 전체(패키지 `dist` 파일에 `"use client"`) | `Avatar`(이미지 로드 오류 상태와 대체 표시), `Command` · `CommandInput` · `CommandList` · `CommandEmpty` · `CommandGroup` · `CommandItem` · `CommandSeparator`(cmdk), Dialog · Popover · Sheet(열림 상태를 알아 닫힌 트리거의 `aria-controls` 를 뺌, 1.8.0 · WI-0069), Tooltip(포커스 스크롤 닫힘 방지, WI-0073) |
+| Radix 부분만(Radix 패키지 자체의 `"use client"`) | Accordion · Checkbox · Collapsible · Dropdown Menu · Label · Radio Group · Scroll Area · Select · Separator · Slider · Switch · Tabs · Toast · Toggle. 래퍼는 서버에서 렌더되고 Radix 부분이 클라이언트 참조가 됩니다 |
 | 없음(서버에서 렌더) | Alert · Badge · Breadcrumb · Button · Card · Input · Progress · Skeleton · Table · Textarea |
 
 판단 기준은 `useState` · `useEffect` · `useContext` · `createContext` 같은 클라이언트 전용 API, DOM 이벤트 핸들러를 직접 만드는 코드, `"use client"` 모듈 내보내기의 점 접근(`Command.Input` 등)입니다. 지시문을 붙이는 파일 목록은 패키지 소스 `scripts/client-modules.mjs` 한 곳에서 관리합니다.

package/dist/button/index.js

@@ -38,7 +38,7 @@ var import_react_slot = require("@radix-ui/react-slot");
 var import_class_variance_authority = require("class-variance-authority");
 var import_utils = require("../utils.js");
 const buttonVariants = (0, import_class_variance_authority.cva)(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center whitespace-nowrap rounded-[var(--axis-radius-control,0.375rem)] text-[length:var(--axis-control-font-size-md,0.875rem)] leading-5 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
@@ -50,10 +50,10 @@ const buttonVariants = (0, import_class_variance_authority.cva)(
         link: "text-[var(--axis-text-brand)] underline-offset-4 hover:underline"
       },
       size: {
-        sm: "h-8 px-3 text-xs",
-        default: "h-10 px-4 py-2",
-        lg: "h-12 px-6 text-base",
-        icon: "h-10 w-10"
+        sm: "h-[var(--axis-control-h-sm,2rem)] px-3 text-[length:var(--axis-control-font-size-sm,0.75rem)] leading-4",
+        default: "h-[var(--axis-control-h-md,2.5rem)] px-4 py-2",
+        lg: "h-[var(--axis-control-h-lg,3rem)] px-6 text-[length:var(--axis-control-font-size-lg,1rem)] leading-6",
+        icon: "h-[var(--axis-control-h-md,2.5rem)] w-[var(--axis-control-h-md,2.5rem)]"
       }
     },
     defaultVariants: {

package/dist/button/index.mjs

@@ -4,7 +4,7 @@ import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 import { cn } from "../utils.mjs";
 const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center whitespace-nowrap rounded-[var(--axis-radius-control,0.375rem)] text-[length:var(--axis-control-font-size-md,0.875rem)] leading-5 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
@@ -16,10 +16,10 @@ const buttonVariants = cva(
         link: "text-[var(--axis-text-brand)] underline-offset-4 hover:underline"
       },
       size: {
-        sm: "h-8 px-3 text-xs",
-        default: "h-10 px-4 py-2",
-        lg: "h-12 px-6 text-base",
-        icon: "h-10 w-10"
+        sm: "h-[var(--axis-control-h-sm,2rem)] px-3 text-[length:var(--axis-control-font-size-sm,0.75rem)] leading-4",
+        default: "h-[var(--axis-control-h-md,2.5rem)] px-4 py-2",
+        lg: "h-[var(--axis-control-h-lg,3rem)] px-6 text-[length:var(--axis-control-font-size-lg,1rem)] leading-6",
+        icon: "h-[var(--axis-control-h-md,2.5rem)] w-[var(--axis-control-h-md,2.5rem)]"
       }
     },
     defaultVariants: {

package/dist/card/index.js

@@ -45,7 +45,7 @@ const Card = React.forwardRef(
     {
       ref,
       className: (0, import_utils.cn)(
-        "rounded-lg border bg-[var(--axis-card-bg-default)] border-[var(--axis-card-border-default)] shadow-[shadow:var(--axis-card-shadow)]",
+        "rounded-[var(--axis-radius-surface,0.5rem)] border bg-[var(--axis-card-bg-default)] border-[var(--axis-card-border-default)] shadow-[shadow:var(--axis-card-shadow)]",
         className
       ),
       ...props

package/dist/card/index.mjs

@@ -7,7 +7,7 @@ const Card = React.forwardRef(
     {
       ref,
       className: cn(
-        "rounded-lg border bg-[var(--axis-card-bg-default)] border-[var(--axis-card-border-default)] shadow-[shadow:var(--axis-card-shadow)]",
+        "rounded-[var(--axis-radius-surface,0.5rem)] border bg-[var(--axis-card-bg-default)] border-[var(--axis-card-border-default)] shadow-[shadow:var(--axis-card-shadow)]",
         className
       ),
       ...props

package/dist/checkbox/index.js

@@ -40,7 +40,7 @@ const Checkbox = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   {
     ref,
     className: (0, import_utils.cn)(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-[var(--axis-border-default)]",
+      "peer h-4 w-4 shrink-0 rounded-sm border border-[var(--axis-form-control-border,var(--axis-border-default))]",
       "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",

package/dist/checkbox/index.mjs

@@ -7,7 +7,7 @@ const Checkbox = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   {
     ref,
     className: cn(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-[var(--axis-border-default)]",
+      "peer h-4 w-4 shrink-0 rounded-sm border border-[var(--axis-form-control-border,var(--axis-border-default))]",
       "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",

package/dist/command/index.d.mts

@@ -60,7 +60,13 @@ declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
     value?: string;
     forceMount?: boolean;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-/** 명령어 그룹 사이의 시각적 구분선 */
+/**
+ * 명령어 그룹 사이의 시각적 구분선.
+ *
+ * cmdk 의 Separator 는 role="separator" 를 props 뒤에 고정해 listbox(CommandList) 안에 두면
+ * 허용되지 않는 자식이 된다(axe aria-required-children, WI-0069). 구분선은 시각 장식이라
+ * 역할 없이 보조기술에서 숨기고, 검색 중에는 숨기는 cmdk 동작(alwaysRender 로 끔)은 그대로 따른다.
+ */
 declare const CommandSeparator: React.ForwardRefExoticComponent<Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {

package/dist/command/index.d.ts

@@ -60,7 +60,13 @@ declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
     value?: string;
     forceMount?: boolean;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-/** 명령어 그룹 사이의 시각적 구분선 */
+/**
+ * 명령어 그룹 사이의 시각적 구분선.
+ *
+ * cmdk 의 Separator 는 role="separator" 를 props 뒤에 고정해 listbox(CommandList) 안에 두면
+ * 허용되지 않는 자식이 된다(axe aria-required-children, WI-0069). 구분선은 시각 장식이라
+ * 역할 없이 보조기술에서 숨기고, 검색 중에는 숨기는 cmdk 동작(alwaysRender 로 끔)은 그대로 따른다.
+ */
 declare const CommandSeparator: React.ForwardRefExoticComponent<Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {

package/dist/command/index.js

@@ -41,6 +41,7 @@ module.exports = __toCommonJS(command_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var React = __toESM(require("react"));
 var import_cmdk = require("cmdk");
+var import_react_slot = require("@radix-ui/react-slot");
 var import_utils = require("../utils.js");
 const Command = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
   import_cmdk.Command,
@@ -123,14 +124,21 @@ const CommandGroup = React.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 CommandGroup.displayName = "CommandGroup";
-const CommandSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-  import_cmdk.Command.Separator,
-  {
-    ref,
-    className: (0, import_utils.cn)("-mx-1 h-px bg-[var(--axis-border-default)]", className),
-    ...props
-  }
-));
+const CommandSeparator = React.forwardRef(({ className, alwaysRender, asChild, ...props }, ref) => {
+  const searching = (0, import_cmdk.useCommandState)((state) => state.search !== "");
+  if (searching && !alwaysRender) return null;
+  const Comp = asChild ? import_react_slot.Slot : "div";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Comp,
+    {
+      ref,
+      "aria-hidden": "true",
+      "cmdk-separator": "",
+      className: (0, import_utils.cn)("-mx-1 h-px bg-[var(--axis-border-default)]", className),
+      ...props
+    }
+  );
+});
 CommandSeparator.displayName = "CommandSeparator";
 const CommandItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
   import_cmdk.Command.Item,

package/dist/command/index.mjs

@@ -1,7 +1,8 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { Command as CommandPrimitive } from "cmdk";
+import { Command as CommandPrimitive, useCommandState } from "cmdk";
+import { Slot } from "@radix-ui/react-slot";
 import { cn } from "../utils.mjs";
 const Command = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   CommandPrimitive,
@@ -84,14 +85,21 @@ const CommandGroup = React.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 CommandGroup.displayName = "CommandGroup";
-const CommandSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  CommandPrimitive.Separator,
-  {
-    ref,
-    className: cn("-mx-1 h-px bg-[var(--axis-border-default)]", className),
-    ...props
-  }
-));
+const CommandSeparator = React.forwardRef(({ className, alwaysRender, asChild, ...props }, ref) => {
+  const searching = useCommandState((state) => state.search !== "");
+  if (searching && !alwaysRender) return null;
+  const Comp = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ref,
+      "aria-hidden": "true",
+      "cmdk-separator": "",
+      className: cn("-mx-1 h-px bg-[var(--axis-border-default)]", className),
+      ...props
+    }
+  );
+});
 CommandSeparator.displayName = "CommandSeparator";
 const CommandItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   CommandPrimitive.Item,

package/dist/dialog/index.d.mts

@@ -2,10 +2,12 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 
-/** 다이얼로그의 루트 컴포넌트. 열림/닫힘 상태를 관리한다. */
-declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
-/** 다이얼로그를 여는 트리거 버튼 컴포넌트 */
-declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare function Dialog({ open: openProp, defaultOpen, onOpenChange, ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare namespace Dialog {
+    var displayName: string;
+}
+/** 다이얼로그를 여는 트리거 버튼 컴포넌트. 닫힌 동안에는 aria-controls 를 두지 않는다. */
+declare const DialogTrigger: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 /** 다이얼로그 콘텐츠를 포털로 렌더링하는 컴포넌트 */
 declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
 /** 다이얼로그를 닫는 버튼 컴포넌트 */

package/dist/dialog/index.d.ts

@@ -2,10 +2,12 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 
-/** 다이얼로그의 루트 컴포넌트. 열림/닫힘 상태를 관리한다. */
-declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
-/** 다이얼로그를 여는 트리거 버튼 컴포넌트 */
-declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare function Dialog({ open: openProp, defaultOpen, onOpenChange, ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare namespace Dialog {
+    var displayName: string;
+}
+/** 다이얼로그를 여는 트리거 버튼 컴포넌트. 닫힌 동안에는 aria-controls 를 두지 않는다. */
+declare const DialogTrigger: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 /** 다이얼로그 콘텐츠를 포털로 렌더링하는 컴포넌트 */
 declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
 /** 다이얼로그를 닫는 버튼 컴포넌트 */

package/dist/dialog/index.js

@@ -1,3 +1,4 @@
+"use client";
 "use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -44,8 +45,31 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var React = __toESM(require("react"));
 var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"));
 var import_utils = require("../utils.js");
-const Dialog = DialogPrimitive.Root;
-const DialogTrigger = DialogPrimitive.Trigger;
+const DialogOpenContext = React.createContext(null);
+function Dialog({
+  open: openProp,
+  defaultOpen,
+  onOpenChange,
+  ...props
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen ?? false);
+  const isControlled = openProp !== void 0;
+  const open = isControlled ? openProp : uncontrolledOpen;
+  const handleOpenChange = React.useCallback(
+    (next) => {
+      if (!isControlled) setUncontrolledOpen(next);
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogOpenContext.Provider, { value: open, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogPrimitive.Root, { open, onOpenChange: handleOpenChange, ...props }) });
+}
+Dialog.displayName = "Dialog";
+const DialogTrigger = React.forwardRef((props, ref) => {
+  const open = React.useContext(DialogOpenContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogPrimitive.Trigger, { ref, ...open === false ? { "aria-controls": void 0 } : {}, ...props });
+});
+DialogTrigger.displayName = "DialogTrigger";
 const DialogPortal = DialogPrimitive.Portal;
 const DialogClose = DialogPrimitive.Close;
 const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -70,7 +94,7 @@ const DialogContent = React.forwardRef(({ className, children, ...props }, ref)
         "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%] motion-reduce:!animate-none",
-        "sm:rounded-lg",
+        "sm:rounded-[var(--axis-radius-surface,0.5rem)]",
         className
       ),
       ...props,

package/dist/dialog/index.mjs

@@ -1,9 +1,33 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { cn } from "../utils.mjs";
-const Dialog = DialogPrimitive.Root;
-const DialogTrigger = DialogPrimitive.Trigger;
+const DialogOpenContext = React.createContext(null);
+function Dialog({
+  open: openProp,
+  defaultOpen,
+  onOpenChange,
+  ...props
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen ?? false);
+  const isControlled = openProp !== void 0;
+  const open = isControlled ? openProp : uncontrolledOpen;
+  const handleOpenChange = React.useCallback(
+    (next) => {
+      if (!isControlled) setUncontrolledOpen(next);
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  return /* @__PURE__ */ jsx(DialogOpenContext.Provider, { value: open, children: /* @__PURE__ */ jsx(DialogPrimitive.Root, { open, onOpenChange: handleOpenChange, ...props }) });
+}
+Dialog.displayName = "Dialog";
+const DialogTrigger = React.forwardRef((props, ref) => {
+  const open = React.useContext(DialogOpenContext);
+  return /* @__PURE__ */ jsx(DialogPrimitive.Trigger, { ref, ...open === false ? { "aria-controls": void 0 } : {}, ...props });
+});
+DialogTrigger.displayName = "DialogTrigger";
 const DialogPortal = DialogPrimitive.Portal;
 const DialogClose = DialogPrimitive.Close;
 const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
@@ -28,7 +52,7 @@ const DialogContent = React.forwardRef(({ className, children, ...props }, ref)
         "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%] motion-reduce:!animate-none",
-        "sm:rounded-lg",
+        "sm:rounded-[var(--axis-radius-surface,0.5rem)]",
         className
       ),
       ...props,

package/dist/dropdown-menu/index.js

@@ -226,7 +226,7 @@ const DropdownMenuShortcut = ({
   "span",
   {
     className: (0, import_utils.cn)(
-      "ml-auto text-xs tracking-widest text-[var(--axis-text-tertiary)]",
+      "ml-auto text-xs tracking-widest text-[var(--axis-text-secondary)]",
       className
     ),
     ...props

package/dist/dropdown-menu/index.mjs

@@ -179,7 +179,7 @@ const DropdownMenuShortcut = ({
   "span",
   {
     className: cn(
-      "ml-auto text-xs tracking-widest text-[var(--axis-text-tertiary)]",
+      "ml-auto text-xs tracking-widest text-[var(--axis-text-secondary)]",
       className
     ),
     ...props

package/dist/input/index.js

@@ -41,7 +41,7 @@ const Input = React.forwardRef(
       {
         type,
         className: (0, import_utils.cn)(
-          "flex h-10 w-full rounded-md border px-3 py-2 text-sm transition-colors",
+          "flex h-[var(--axis-field-h,2.5rem)] w-full rounded-[var(--axis-radius-field,0.375rem)] border px-3 py-2 text-[length:var(--axis-control-font-size-md,0.875rem)] leading-5 transition-colors",
           "bg-[var(--axis-input-bg-default)] text-[var(--axis-input-text-default)]",
           "border-[var(--axis-input-border-default)]",
           "placeholder:text-[var(--axis-input-text-placeholder)]",

package/dist/input/index.mjs

@@ -8,7 +8,7 @@ const Input = React.forwardRef(
       {
         type,
         className: cn(
-          "flex h-10 w-full rounded-md border px-3 py-2 text-sm transition-colors",
+          "flex h-[var(--axis-field-h,2.5rem)] w-full rounded-[var(--axis-radius-field,0.375rem)] border px-3 py-2 text-[length:var(--axis-control-font-size-md,0.875rem)] leading-5 transition-colors",
           "bg-[var(--axis-input-bg-default)] text-[var(--axis-input-text-default)]",
           "border-[var(--axis-input-border-default)]",
           "placeholder:text-[var(--axis-input-text-placeholder)]",

package/dist/popover/index.d.mts

@@ -1,10 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 
-/** 팝오버의 루트 컴포넌트. 열림/닫힘 상태를 관리한다. */
-declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;
-/** 팝오버를 여는 트리거 요소 컴포넌트 */
-declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare function Popover({ open: openProp, defaultOpen, onOpenChange, ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare namespace Popover {
+    var displayName: string;
+}
+/** 팝오버를 여는 트리거 요소 컴포넌트. 닫힌 동안에는 aria-controls 를 두지 않는다. */
+declare const PopoverTrigger: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 /** 팝오버의 본문 콘텐츠 컴포넌트. 포털을 통해 렌더링되며 트리거 요소에 상대적으로 위치한다. */
 declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 

package/dist/popover/index.d.ts

@@ -1,10 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 
-/** 팝오버의 루트 컴포넌트. 열림/닫힘 상태를 관리한다. */
-declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;
-/** 팝오버를 여는 트리거 요소 컴포넌트 */
-declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare function Popover({ open: openProp, defaultOpen, onOpenChange, ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare namespace Popover {
+    var displayName: string;
+}
+/** 팝오버를 여는 트리거 요소 컴포넌트. 닫힌 동안에는 aria-controls 를 두지 않는다. */
+declare const PopoverTrigger: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 /** 팝오버의 본문 콘텐츠 컴포넌트. 포털을 통해 렌더링되며 트리거 요소에 상대적으로 위치한다. */
 declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 

package/dist/popover/index.js

@@ -1,3 +1,4 @@
+"use client";
 "use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -37,8 +38,31 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var React = __toESM(require("react"));
 var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"));
 var import_utils = require("../utils.js");
-const Popover = PopoverPrimitive.Root;
-const PopoverTrigger = PopoverPrimitive.Trigger;
+const PopoverOpenContext = React.createContext(null);
+function Popover({
+  open: openProp,
+  defaultOpen,
+  onOpenChange,
+  ...props
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen ?? false);
+  const isControlled = openProp !== void 0;
+  const open = isControlled ? openProp : uncontrolledOpen;
+  const handleOpenChange = React.useCallback(
+    (next) => {
+      if (!isControlled) setUncontrolledOpen(next);
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopoverOpenContext.Provider, { value: open, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopoverPrimitive.Root, { open, onOpenChange: handleOpenChange, ...props }) });
+}
+Popover.displayName = "Popover";
+const PopoverTrigger = React.forwardRef((props, ref) => {
+  const open = React.useContext(PopoverOpenContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopoverPrimitive.Trigger, { ref, ...open === false ? { "aria-controls": void 0 } : {}, ...props });
+});
+PopoverTrigger.displayName = "PopoverTrigger";
 const PopoverContent = React.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopoverPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
   PopoverPrimitive.Content,
   {

package/dist/popover/index.mjs

@@ -1,9 +1,33 @@
+"use client";
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { cn } from "../utils.mjs";
-const Popover = PopoverPrimitive.Root;
-const PopoverTrigger = PopoverPrimitive.Trigger;
+const PopoverOpenContext = React.createContext(null);
+function Popover({
+  open: openProp,
+  defaultOpen,
+  onOpenChange,
+  ...props
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen ?? false);
+  const isControlled = openProp !== void 0;
+  const open = isControlled ? openProp : uncontrolledOpen;
+  const handleOpenChange = React.useCallback(
+    (next) => {
+      if (!isControlled) setUncontrolledOpen(next);
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  return /* @__PURE__ */ jsx(PopoverOpenContext.Provider, { value: open, children: /* @__PURE__ */ jsx(PopoverPrimitive.Root, { open, onOpenChange: handleOpenChange, ...props }) });
+}
+Popover.displayName = "Popover";
+const PopoverTrigger = React.forwardRef((props, ref) => {
+  const open = React.useContext(PopoverOpenContext);
+  return /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, { ref, ...open === false ? { "aria-controls": void 0 } : {}, ...props });
+});
+PopoverTrigger.displayName = "PopoverTrigger";
 const PopoverContent = React.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
   PopoverPrimitive.Content,
   {

package/dist/progress/index.js

@@ -57,10 +57,10 @@ const progressIndicatorVariants = (0, import_class_variance_authority.cva)(
   {
     variants: {
       variant: {
-        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)]"
+        default: "bg-[var(--axis-progress-fill-default,var(--axis-surface-brand))]",
+        success: "bg-[var(--axis-progress-fill-success,var(--axis-color-green-500))]",
+        warning: "bg-[var(--axis-progress-fill-warning,var(--axis-color-yellow-500))]",
+        destructive: "bg-[var(--axis-progress-fill-destructive,var(--axis-color-red-500))]"
       }
     },
     defaultVariants: {

package/dist/progress/index.mjs

@@ -22,10 +22,10 @@ const progressIndicatorVariants = cva(
   {
     variants: {
       variant: {
-        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)]"
+        default: "bg-[var(--axis-progress-fill-default,var(--axis-surface-brand))]",
+        success: "bg-[var(--axis-progress-fill-success,var(--axis-color-green-500))]",
+        warning: "bg-[var(--axis-progress-fill-warning,var(--axis-color-yellow-500))]",
+        destructive: "bg-[var(--axis-progress-fill-destructive,var(--axis-color-red-500))]"
       }
     },
     defaultVariants: {

package/dist/radio-group/index.js

@@ -50,7 +50,7 @@ const RadioGroupItem = React.forwardRef(({ className, ...props }, ref) => /* @__
   {
     ref,
     className: (0, import_utils.cn)(
-      "aspect-square h-4 w-4 rounded-full border border-[var(--axis-border-default)]",
+      "aspect-square h-4 w-4 rounded-full border border-[var(--axis-form-control-border,var(--axis-border-default))]",
       "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",

package/dist/radio-group/index.mjs

@@ -16,7 +16,7 @@ const RadioGroupItem = React.forwardRef(({ className, ...props }, ref) => /* @__
   {
     ref,
     className: cn(
-      "aspect-square h-4 w-4 rounded-full border border-[var(--axis-border-default)]",
+      "aspect-square h-4 w-4 rounded-full border border-[var(--axis-form-control-border,var(--axis-border-default))]",
       "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",

package/dist/scroll-area/index.js

@@ -43,7 +43,14 @@ const ScrollArea = React.forwardRef(({ className, children, ...props }, ref) =>
     className: (0, import_utils.cn)("relative overflow-hidden", className),
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ScrollAreaPrimitive.Viewport, { className: "h-full w-full rounded-[inherit]", children }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        ScrollAreaPrimitive.Viewport,
+        {
+          tabIndex: 0,
+          className: "h-full w-full rounded-[inherit] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--axis-border-focus)]",
+          children
+        }
+      ),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ScrollBar, {}),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ScrollAreaPrimitive.Corner, {})
     ]

package/dist/scroll-area/index.mjs

@@ -9,7 +9,14 @@ const ScrollArea = React.forwardRef(({ className, children, ...props }, ref) =>
     className: cn("relative overflow-hidden", className),
     ...props,
     children: [
-      /* @__PURE__ */ jsx(ScrollAreaPrimitive.Viewport, { className: "h-full w-full rounded-[inherit]", children }),
+      /* @__PURE__ */ jsx(
+        ScrollAreaPrimitive.Viewport,
+        {
+          tabIndex: 0,
+          className: "h-full w-full rounded-[inherit] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--axis-border-focus)]",
+          children
+        }
+      ),
       /* @__PURE__ */ jsx(ScrollBar, {}),
       /* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {})
     ]

package/dist/select/index.js

@@ -50,7 +50,7 @@ const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref)
   {
     ref,
     className: (0, import_utils.cn)(
-      "flex h-10 w-full items-center justify-between rounded-md border px-3 py-2 text-sm",
+      "flex h-[var(--axis-field-h,2.5rem)] w-full items-center justify-between rounded-[var(--axis-radius-field,0.375rem)] border px-3 py-2 text-sm",
       "bg-[var(--axis-input-bg-default)] border-[var(--axis-input-border-default)]",
       "placeholder:text-[var(--axis-input-text-placeholder)]",
       "hover:border-[var(--axis-input-border-hover)]",

package/dist/select/index.mjs

@@ -10,7 +10,7 @@ const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref)
   {
     ref,
     className: cn(
-      "flex h-10 w-full items-center justify-between rounded-md border px-3 py-2 text-sm",
+      "flex h-[var(--axis-field-h,2.5rem)] w-full items-center justify-between rounded-[var(--axis-radius-field,0.375rem)] border px-3 py-2 text-sm",
       "bg-[var(--axis-input-bg-default)] border-[var(--axis-input-border-default)]",
       "placeholder:text-[var(--axis-input-text-placeholder)]",
       "hover:border-[var(--axis-input-border-hover)]",