@axis-ds/ui-react 1.7.0 → 1.8.1

package/README.md

@@ -30,13 +30,20 @@ Tailwind CSS 4(`@import "tailwindcss"`, create-next-app 15.5 기본)에서는 `@
 
 ### Tailwind CSS 3
 
-CSS Variables 설정:
+CSS Variables 설정(두 줄 모두, 이 순서로 `@tailwind` 지시문보다 앞에):
 
 ```css
 /* globals.css */
+@import '@axis-ds/tokens/css';
 @import '@axis-ds/tokens/css/shadcn';
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 ```
 
+- `@axis-ds/tokens/css` 는 컴포넌트가 읽는 `--axis-*` 변수를 정의합니다. 빠지면 Input · Checkbox 경계가 글자색이 되고 Progress 채움이 투명해집니다. `@axis-ds/tokens/css/shadcn` 은 preset 이 읽는 `--primary` · `--radius` 등을 정의합니다.
+
 `tailwind.config` 에는 `@axis-ds/tokens/tailwind` preset 과 함께 컴포넌트 파일을 `content` 에 넣습니다.
 
 ```js
@@ -93,8 +100,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/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)(

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(

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/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/sheet/index.d.mts

@@ -1,14 +1,16 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import type * as __AxisClsx from 'clsx';
 type __AxisCvaClassProp = { class: __AxisClsx.ClassValue; className?: never } | { class?: never; className: __AxisClsx.ClassValue } | { class?: never; className?: never };
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { VariantProps } from 'class-variance-authority';
 
-/** 화면 측면에서 슬라이드되어 나타나는 시트(Sheet) 컴포넌트의 루트 요소 */
-declare const Sheet: React.FC<DialogPrimitive.DialogProps>;
-/** 시트를 열기 위한 트리거 버튼 컴포넌트 */
-declare const SheetTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare function Sheet({ open: openProp, defaultOpen, onOpenChange, ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare namespace Sheet {
+    var displayName: string;
+}
+/** 시트를 열기 위한 트리거 버튼 컴포넌트. 닫힌 동안에는 aria-controls 를 두지 않는다. */
+declare const SheetTrigger: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 /** 시트를 닫기 위한 닫기 버튼 컴포넌트 */
 declare const SheetClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
 /** 시트 콘텐츠를 포탈로 렌더링하는 컴포넌트 */

package/dist/sheet/index.d.ts

@@ -1,14 +1,16 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import type * as __AxisClsx from 'clsx';
 type __AxisCvaClassProp = { class: __AxisClsx.ClassValue; className?: never } | { class?: never; className: __AxisClsx.ClassValue } | { class?: never; className?: never };
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { VariantProps } from 'class-variance-authority';
 
-/** 화면 측면에서 슬라이드되어 나타나는 시트(Sheet) 컴포넌트의 루트 요소 */
-declare const Sheet: React.FC<DialogPrimitive.DialogProps>;
-/** 시트를 열기 위한 트리거 버튼 컴포넌트 */
-declare const SheetTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare function Sheet({ open: openProp, defaultOpen, onOpenChange, ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare namespace Sheet {
+    var displayName: string;
+}
+/** 시트를 열기 위한 트리거 버튼 컴포넌트. 닫힌 동안에는 aria-controls 를 두지 않는다. */
+declare const SheetTrigger: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 /** 시트를 닫기 위한 닫기 버튼 컴포넌트 */
 declare const SheetClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
 /** 시트 콘텐츠를 포탈로 렌더링하는 컴포넌트 */

package/dist/sheet/index.js

@@ -1,3 +1,4 @@
+"use client";
 "use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -45,8 +46,31 @@ var React = __toESM(require("react"));
 var SheetPrimitive = __toESM(require("@radix-ui/react-dialog"));
 var import_class_variance_authority = require("class-variance-authority");
 var import_utils = require("../utils.js");
-const Sheet = SheetPrimitive.Root;
-const SheetTrigger = SheetPrimitive.Trigger;
+const SheetOpenContext = React.createContext(null);
+function Sheet({
+  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)(SheetOpenContext.Provider, { value: open, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SheetPrimitive.Root, { open, onOpenChange: handleOpenChange, ...props }) });
+}
+Sheet.displayName = "Sheet";
+const SheetTrigger = React.forwardRef((props, ref) => {
+  const open = React.useContext(SheetOpenContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SheetPrimitive.Trigger, { ref, ...open === false ? { "aria-controls": void 0 } : {}, ...props });
+});
+SheetTrigger.displayName = "SheetTrigger";
 const SheetClose = SheetPrimitive.Close;
 const SheetPortal = SheetPrimitive.Portal;
 const SheetOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/dist/sheet/index.mjs

@@ -1,10 +1,34 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as SheetPrimitive from "@radix-ui/react-dialog";
 import { cva } from "class-variance-authority";
 import { cn } from "../utils.mjs";
-const Sheet = SheetPrimitive.Root;
-const SheetTrigger = SheetPrimitive.Trigger;
+const SheetOpenContext = React.createContext(null);
+function Sheet({
+  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(SheetOpenContext.Provider, { value: open, children: /* @__PURE__ */ jsx(SheetPrimitive.Root, { open, onOpenChange: handleOpenChange, ...props }) });
+}
+Sheet.displayName = "Sheet";
+const SheetTrigger = React.forwardRef((props, ref) => {
+  const open = React.useContext(SheetOpenContext);
+  return /* @__PURE__ */ jsx(SheetPrimitive.Trigger, { ref, ...open === false ? { "aria-controls": void 0 } : {}, ...props });
+});
+SheetTrigger.displayName = "SheetTrigger";
 const SheetClose = SheetPrimitive.Close;
 const SheetPortal = SheetPrimitive.Portal;
 const SheetOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(

package/dist/slider/index.js

@@ -51,7 +51,7 @@ const Slider = React.forwardRef(
       ),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SliderPrimitive.Track, { className: "relative h-2 w-full grow overflow-hidden rounded-full bg-[var(--axis-surface-tertiary)]", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SliderPrimitive.Range, { className: "absolute h-full bg-[var(--axis-interactive-primary)]" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SliderPrimitive.Track, { className: "relative h-2 w-full grow overflow-hidden rounded-full bg-[var(--axis-form-control-track,var(--axis-surface-tertiary))]", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SliderPrimitive.Range, { className: "absolute h-full bg-[var(--axis-interactive-primary)]" }) }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           SliderPrimitive.Thumb,
           {

package/dist/slider/index.mjs

@@ -18,7 +18,7 @@ const Slider = React.forwardRef(
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx(SliderPrimitive.Track, { className: "relative h-2 w-full grow overflow-hidden rounded-full bg-[var(--axis-surface-tertiary)]", children: /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: "absolute h-full bg-[var(--axis-interactive-primary)]" }) }),
+        /* @__PURE__ */ jsx(SliderPrimitive.Track, { className: "relative h-2 w-full grow overflow-hidden rounded-full bg-[var(--axis-form-control-track,var(--axis-surface-tertiary))]", children: /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: "absolute h-full bg-[var(--axis-interactive-primary)]" }) }),
         /* @__PURE__ */ jsx(
           SliderPrimitive.Thumb,
           {

package/dist/switch/index.js

@@ -43,7 +43,7 @@ const Switch = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
       "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)]",
+      "data-[state=unchecked]:bg-[var(--axis-form-control-track,var(--axis-surface-tertiary))]",
       className
     ),
     ...props,

package/dist/switch/index.mjs

@@ -10,7 +10,7 @@ const Switch = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
       "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)]",
+      "data-[state=unchecked]:bg-[var(--axis-form-control-track,var(--axis-surface-tertiary))]",
       className
     ),
     ...props,

package/dist/textarea/index.js

@@ -38,7 +38,7 @@ const Textarea = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   "textarea",
   {
     className: (0, import_utils.cn)(
-      "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",
+      "flex min-h-[80px] w-full rounded-md border border-[var(--axis-form-control-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-default)]",
       "placeholder:text-[var(--axis-text-tertiary)]",

package/dist/textarea/index.mjs

@@ -5,7 +5,7 @@ const Textarea = React.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-default)] px-3 py-2 text-sm",
+      "flex min-h-[80px] w-full rounded-md border border-[var(--axis-form-control-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-default)]",
       "placeholder:text-[var(--axis-text-tertiary)]",

package/dist/toast/index.js

@@ -126,7 +126,7 @@ const ToastDescription = React.forwardRef(({ className, ...props }, ref) => /* @
   ToastPrimitives.Description,
   {
     ref,
-    className: (0, import_utils.cn)("text-sm opacity-90", className),
+    className: (0, import_utils.cn)("text-sm", className),
     ...props
   }
 ));

package/dist/toast/index.mjs

@@ -87,7 +87,7 @@ const ToastDescription = React.forwardRef(({ className, ...props }, ref) => /* @
   ToastPrimitives.Description,
   {
     ref,
-    className: cn("text-sm opacity-90", className),
+    className: cn("text-sm", className),
     ...props
   }
 ));

package/dist/tooltip/index.d.mts

@@ -1,12 +1,25 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 
 /** 툴팁 시스템의 프로바이더 컴포넌트. delayDuration 등 전역 설정을 관리한다. */
 declare const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps>;
-/** 툴팁의 루트 컴포넌트. 열림/닫힘 상태를 관리한다. */
-declare const Tooltip: React.FC<TooltipPrimitive.TooltipProps>;
+type TooltipProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>;
+/**
+ * 툴팁의 루트 컴포넌트. 열림/닫힘 상태를 관리한다.
+ *
+ * Radix Tooltip 은 트리거를 담은 요소가 스크롤되면 닫힌다. 화면 밖 트리거로 Tab 하면 브라우저가 트리거를
+ * 화면 안으로 스크롤하고, 그 스크롤이 막 열린 툴팁을 닫는다(WCAG 1.4.13 지속성, WI-0073).
+ * 이 래퍼는 open 을 직접 제어해 **트리거에 포커스가 있는 동안 스크롤로 생긴 닫힘**만 무시한다.
+ * Esc · 포인터 이탈 · 블러 · 클릭 · 포커스 없는 hover 툴팁의 스크롤 닫힘은 Radix 동작 그대로다.
+ * open · defaultOpen · onOpenChange 는 그대로 통과한다(제어 · 비제어 모두).
+ */
+declare function Tooltip({ open: openProp, defaultOpen, onOpenChange, ...props }: TooltipProps): react_jsx_runtime.JSX.Element;
+declare namespace Tooltip {
+    var displayName: string;
+}
 /** 툴팁을 표시하기 위한 트리거 요소 */
-declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const TooltipTrigger: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 /** 툴팁의 콘텐츠를 표시하는 컴포넌트. 포탈을 통해 렌더링되며 방향별 슬라이드 애니메이션을 지원한다. */
 declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 

package/dist/tooltip/index.d.ts

@@ -1,12 +1,25 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 
 /** 툴팁 시스템의 프로바이더 컴포넌트. delayDuration 등 전역 설정을 관리한다. */
 declare const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps>;
-/** 툴팁의 루트 컴포넌트. 열림/닫힘 상태를 관리한다. */
-declare const Tooltip: React.FC<TooltipPrimitive.TooltipProps>;
+type TooltipProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>;
+/**
+ * 툴팁의 루트 컴포넌트. 열림/닫힘 상태를 관리한다.
+ *
+ * Radix Tooltip 은 트리거를 담은 요소가 스크롤되면 닫힌다. 화면 밖 트리거로 Tab 하면 브라우저가 트리거를
+ * 화면 안으로 스크롤하고, 그 스크롤이 막 열린 툴팁을 닫는다(WCAG 1.4.13 지속성, WI-0073).
+ * 이 래퍼는 open 을 직접 제어해 **트리거에 포커스가 있는 동안 스크롤로 생긴 닫힘**만 무시한다.
+ * Esc · 포인터 이탈 · 블러 · 클릭 · 포커스 없는 hover 툴팁의 스크롤 닫힘은 Radix 동작 그대로다.
+ * open · defaultOpen · onOpenChange 는 그대로 통과한다(제어 · 비제어 모두).
+ */
+declare function Tooltip({ open: openProp, defaultOpen, onOpenChange, ...props }: TooltipProps): react_jsx_runtime.JSX.Element;
+declare namespace Tooltip {
+    var displayName: string;
+}
 /** 툴팁을 표시하기 위한 트리거 요소 */
-declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const TooltipTrigger: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 /** 툴팁의 콘텐츠를 표시하는 컴포넌트. 포탈을 통해 렌더링되며 방향별 슬라이드 애니메이션을 지원한다. */
 declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 

package/dist/tooltip/index.js

@@ -1,3 +1,4 @@
+"use client";
 "use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -39,25 +40,92 @@ var React = __toESM(require("react"));
 var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"));
 var import_utils = require("../utils.js");
 const TooltipProvider = TooltipPrimitive.Provider;
-const Tooltip = TooltipPrimitive.Root;
-const TooltipTrigger = TooltipPrimitive.Trigger;
-const TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TooltipPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-  TooltipPrimitive.Content,
-  {
-    ref,
-    sideOffset,
-    className: (0, import_utils.cn)(
-      "z-50 overflow-hidden rounded-md bg-[var(--axis-surface-inverse)] px-3 py-1.5 text-xs text-[var(--axis-text-inverse)]",
-      "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 motion-reduce:!animate-none",
-      "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
-    ),
-    ...props
-  }
-) }));
+const TooltipPersistenceContext = React.createContext(null);
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
+function Tooltip({ open: openProp, defaultOpen, onOpenChange, ...props }) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen ?? false);
+  const isControlled = openProp !== void 0;
+  const open = isControlled ? openProp : uncontrolledOpen;
+  const triggerRef = React.useRef(null);
+  const scrollingRef = React.useRef(false);
+  const dismissRef = React.useRef(false);
+  useIsomorphicLayoutEffect(() => {
+    let timer = 0;
+    const handleScroll = () => {
+      scrollingRef.current = true;
+      window.clearTimeout(timer);
+      timer = window.setTimeout(() => {
+        scrollingRef.current = false;
+      }, 0);
+    };
+    window.addEventListener("scroll", handleScroll, { capture: true });
+    return () => {
+      window.removeEventListener("scroll", handleScroll, { capture: true });
+      window.clearTimeout(timer);
+    };
+  }, []);
+  const handleOpenChange = React.useCallback(
+    (next) => {
+      if (!next) {
+        const dismissed = dismissRef.current;
+        dismissRef.current = false;
+        const trigger = triggerRef.current;
+        const focused = trigger !== null && trigger.ownerDocument.activeElement === trigger;
+        if (!dismissed && scrollingRef.current && focused) return;
+      }
+      if (!isControlled) setUncontrolledOpen(next);
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  const markDismiss = React.useCallback(() => {
+    dismissRef.current = true;
+  }, []);
+  const contextValue = React.useMemo(() => ({ triggerRef, markDismiss }), [markDismiss]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TooltipPersistenceContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TooltipPrimitive.Root, { ...props, open, onOpenChange: handleOpenChange }) });
+}
+Tooltip.displayName = "Tooltip";
+const TooltipTrigger = React.forwardRef((props, forwardedRef) => {
+  const persistence = React.useContext(TooltipPersistenceContext);
+  const ref = React.useCallback(
+    (node) => {
+      if (persistence) persistence.triggerRef.current = node;
+      if (typeof forwardedRef === "function") forwardedRef(node);
+      else if (forwardedRef) forwardedRef.current = node;
+    },
+    [persistence, forwardedRef]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TooltipPrimitive.Trigger, { ref, ...props });
+});
+TooltipTrigger.displayName = "TooltipTrigger";
+const TooltipContent = React.forwardRef(({ className, sideOffset = 4, onEscapeKeyDown, onPointerDownOutside, ...props }, ref) => {
+  const persistence = React.useContext(TooltipPersistenceContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TooltipPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    TooltipPrimitive.Content,
+    {
+      ref,
+      sideOffset,
+      onEscapeKeyDown: (event) => {
+        onEscapeKeyDown?.(event);
+        if (!event.defaultPrevented) persistence?.markDismiss();
+      },
+      onPointerDownOutside: (event) => {
+        onPointerDownOutside?.(event);
+        if (!event.defaultPrevented) persistence?.markDismiss();
+      },
+      className: (0, import_utils.cn)(
+        "z-50 overflow-hidden rounded-md bg-[var(--axis-surface-inverse)] px-3 py-1.5 text-xs text-[var(--axis-text-inverse)]",
+        "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 motion-reduce:!animate-none",
+        "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
+      ),
+      ...props
+    }
+  ) });
+});
 TooltipContent.displayName = "TooltipContent";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/tooltip/index.mjs

@@ -1,27 +1,95 @@
+"use client";
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { cn } from "../utils.mjs";
 const TooltipProvider = TooltipPrimitive.Provider;
-const Tooltip = TooltipPrimitive.Root;
-const TooltipTrigger = TooltipPrimitive.Trigger;
-const TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(
-  TooltipPrimitive.Content,
-  {
-    ref,
-    sideOffset,
-    className: cn(
-      "z-50 overflow-hidden rounded-md bg-[var(--axis-surface-inverse)] px-3 py-1.5 text-xs text-[var(--axis-text-inverse)]",
-      "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 motion-reduce:!animate-none",
-      "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
-    ),
-    ...props
-  }
-) }));
+const TooltipPersistenceContext = React.createContext(null);
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
+function Tooltip({ open: openProp, defaultOpen, onOpenChange, ...props }) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen ?? false);
+  const isControlled = openProp !== void 0;
+  const open = isControlled ? openProp : uncontrolledOpen;
+  const triggerRef = React.useRef(null);
+  const scrollingRef = React.useRef(false);
+  const dismissRef = React.useRef(false);
+  useIsomorphicLayoutEffect(() => {
+    let timer = 0;
+    const handleScroll = () => {
+      scrollingRef.current = true;
+      window.clearTimeout(timer);
+      timer = window.setTimeout(() => {
+        scrollingRef.current = false;
+      }, 0);
+    };
+    window.addEventListener("scroll", handleScroll, { capture: true });
+    return () => {
+      window.removeEventListener("scroll", handleScroll, { capture: true });
+      window.clearTimeout(timer);
+    };
+  }, []);
+  const handleOpenChange = React.useCallback(
+    (next) => {
+      if (!next) {
+        const dismissed = dismissRef.current;
+        dismissRef.current = false;
+        const trigger = triggerRef.current;
+        const focused = trigger !== null && trigger.ownerDocument.activeElement === trigger;
+        if (!dismissed && scrollingRef.current && focused) return;
+      }
+      if (!isControlled) setUncontrolledOpen(next);
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  const markDismiss = React.useCallback(() => {
+    dismissRef.current = true;
+  }, []);
+  const contextValue = React.useMemo(() => ({ triggerRef, markDismiss }), [markDismiss]);
+  return /* @__PURE__ */ jsx(TooltipPersistenceContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(TooltipPrimitive.Root, { ...props, open, onOpenChange: handleOpenChange }) });
+}
+Tooltip.displayName = "Tooltip";
+const TooltipTrigger = React.forwardRef((props, forwardedRef) => {
+  const persistence = React.useContext(TooltipPersistenceContext);
+  const ref = React.useCallback(
+    (node) => {
+      if (persistence) persistence.triggerRef.current = node;
+      if (typeof forwardedRef === "function") forwardedRef(node);
+      else if (forwardedRef) forwardedRef.current = node;
+    },
+    [persistence, forwardedRef]
+  );
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { ref, ...props });
+});
+TooltipTrigger.displayName = "TooltipTrigger";
+const TooltipContent = React.forwardRef(({ className, sideOffset = 4, onEscapeKeyDown, onPointerDownOutside, ...props }, ref) => {
+  const persistence = React.useContext(TooltipPersistenceContext);
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    TooltipPrimitive.Content,
+    {
+      ref,
+      sideOffset,
+      onEscapeKeyDown: (event) => {
+        onEscapeKeyDown?.(event);
+        if (!event.defaultPrevented) persistence?.markDismiss();
+      },
+      onPointerDownOutside: (event) => {
+        onPointerDownOutside?.(event);
+        if (!event.defaultPrevented) persistence?.markDismiss();
+      },
+      className: cn(
+        "z-50 overflow-hidden rounded-md bg-[var(--axis-surface-inverse)] px-3 py-1.5 text-xs text-[var(--axis-text-inverse)]",
+        "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 motion-reduce:!animate-none",
+        "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
+      ),
+      ...props
+    }
+  ) });
+});
 TooltipContent.displayName = "TooltipContent";
 export {
   Tooltip,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axis-ds/ui-react",
-  "version": "1.7.0",
+  "version": "1.8.1",
   "description": "AXIS Design System - Core React UI Components",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -302,7 +302,7 @@
     "clsx": "^2.1.0",
     "cmdk": "^1.1.1",
     "tailwind-merge": "^2.5.0",
-    "@axis-ds/tokens": "1.7.0"
+    "@axis-ds/tokens": "1.8.1"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",