@axis-ds/ui-react 1.6.3 → 1.8.0

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/table/index.js

@@ -46,7 +46,7 @@ const Table = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   {
     ref,
     className: (0, import_utils.cn)(
-      "w-full caption-bottom text-sm text-[var(--axis-text-primary)]",
+      "w-full caption-bottom text-[length:var(--axis-table-font-size,0.875rem)] leading-5 text-[var(--axis-text-primary)]",
       className
     ),
     ...props
@@ -102,7 +102,7 @@ const TableHead = React.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   {
     ref,
     className: (0, import_utils.cn)(
-      "h-12 px-4 text-left align-middle font-medium text-[var(--axis-text-secondary)]",
+      "h-12 px-4 text-left align-middle text-[length:var(--axis-table-head-font-size,0.875rem)] font-medium text-[var(--axis-text-secondary)]",
       "[&:has([role=checkbox])]:pr-0",
       className
     ),

package/dist/table/index.mjs

@@ -6,7 +6,7 @@ const Table = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   {
     ref,
     className: cn(
-      "w-full caption-bottom text-sm text-[var(--axis-text-primary)]",
+      "w-full caption-bottom text-[length:var(--axis-table-font-size,0.875rem)] leading-5 text-[var(--axis-text-primary)]",
       className
     ),
     ...props
@@ -62,7 +62,7 @@ const TableHead = React.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   {
     ref,
     className: cn(
-      "h-12 px-4 text-left align-middle font-medium text-[var(--axis-text-secondary)]",
+      "h-12 px-4 text-left align-middle text-[length:var(--axis-table-head-font-size,0.875rem)] font-medium text-[var(--axis-text-secondary)]",
       "[&:has([role=checkbox])]:pr-0",
       className
     ),

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/toggle/index.js

@@ -38,7 +38,7 @@ var TogglePrimitive = __toESM(require("@radix-ui/react-toggle"));
 var import_class_variance_authority = require("class-variance-authority");
 var import_utils = require("../utils.js");
 const toggleVariants = (0, import_class_variance_authority.cva)(
-  "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",
+  "inline-flex items-center justify-center gap-2 rounded-[var(--axis-radius-control,0.375rem)] 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: {
@@ -46,9 +46,9 @@ const toggleVariants = (0, import_class_variance_authority.cva)(
         outline: "border border-[var(--axis-border-default)] bg-transparent hover:bg-[var(--axis-surface-secondary)] hover:text-[var(--axis-text-primary)]"
       },
       size: {
-        default: "h-10 px-3 min-w-10",
-        sm: "h-9 px-2.5 min-w-9",
-        lg: "h-11 px-5 min-w-11"
+        default: "h-[var(--axis-toggle-h-md,2.5rem)] px-3 min-w-[var(--axis-toggle-h-md,2.5rem)]",
+        sm: "h-[var(--axis-toggle-h-sm,2.25rem)] px-2.5 min-w-[var(--axis-toggle-h-sm,2.25rem)]",
+        lg: "h-[var(--axis-toggle-h-lg,2.75rem)] px-5 min-w-[var(--axis-toggle-h-lg,2.75rem)]"
       }
     },
     defaultVariants: {

package/dist/toggle/index.mjs

@@ -4,7 +4,7 @@ import * as TogglePrimitive from "@radix-ui/react-toggle";
 import { cva } from "class-variance-authority";
 import { cn } from "../utils.mjs";
 const toggleVariants = cva(
-  "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",
+  "inline-flex items-center justify-center gap-2 rounded-[var(--axis-radius-control,0.375rem)] 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: {
@@ -12,9 +12,9 @@ const toggleVariants = cva(
         outline: "border border-[var(--axis-border-default)] bg-transparent hover:bg-[var(--axis-surface-secondary)] hover:text-[var(--axis-text-primary)]"
       },
       size: {
-        default: "h-10 px-3 min-w-10",
-        sm: "h-9 px-2.5 min-w-9",
-        lg: "h-11 px-5 min-w-11"
+        default: "h-[var(--axis-toggle-h-md,2.5rem)] px-3 min-w-[var(--axis-toggle-h-md,2.5rem)]",
+        sm: "h-[var(--axis-toggle-h-sm,2.25rem)] px-2.5 min-w-[var(--axis-toggle-h-sm,2.25rem)]",
+        lg: "h-[var(--axis-toggle-h-lg,2.75rem)] px-5 min-w-[var(--axis-toggle-h-lg,2.75rem)]"
       }
     },
     defaultVariants: {

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.6.3",
+  "version": "1.8.0",
   "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.6.2"
+    "@axis-ds/tokens": "1.8.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",