@exem-ui/react 0.3.4-next.20261014050302 → 0.3.4-next.20261014064943

package/dist/{FlatTooltip-CksJEO8x.d.ts → FlatTooltip-CrfIdqNq.d.ts}

@@ -5,9 +5,9 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import { I as IconBaseProps } from './types-xnO0gkCW.js';
 import * as SelectPrimitive from '@radix-ui/react-select';
-import * as class_variance_authority_types from 'class-variance-authority/types';
+import { Tooltip as Tooltip$1 } from '@base-ui/react/tooltip';
 import { VariantProps } from '@exem-ui/core/utils';
-import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import * as class_variance_authority_types from 'class-variance-authority/types';
 
 type TabsType = 'primary' | 'secondary';
 type TabsRootProps<T extends string = string> = Omit<React__default.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>, 'value' | 'defaultValue' | 'onValueChange'> & {
@@ -280,25 +280,87 @@ type SelectComponent = React$1.ForwardRefExoticComponent<SelectRootProps & React
 };
 declare const Select: SelectComponent;
 
-type TooltipRootProps = React__default.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>;
-type TooltipProviderProps = React__default.ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>;
-type TooltipTriggerProps = React__default.ComponentPropsWithoutRef<typeof TooltipPrimitive.Trigger>;
-type TooltipContentProps = React__default.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & VariantProps<typeof tooltipContentVariants> & {
-    portalContainer?: HTMLElement | null;
+/**
+ * Tooltip 스타일 변형.
+ *
+ * Base UI Tooltip은 radix의 `data-state` 대신 `data-starting-style` / `data-ending-style`로
+ * 진입·퇴장을 노출한다. 위치(z-index 포함)는 Positioner가, 모양은 Popup이 맡는다.
+ */
+declare const tooltipVariants: {
+    positioner: string;
+    content: (props?: ({
+        size?: "small" | "medium" | "large" | "xlarge" | "tiny" | null | undefined;
+    } & class_variance_authority_types.ClassProp) | undefined) => string;
+    title: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+    description: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+};
+
+type TooltipRootProps = Tooltip$1.Root.Props;
+type TooltipProviderProps = Tooltip$1.Provider.Props;
+type TooltipTriggerProps = Tooltip$1.Trigger.Props;
+type TooltipContentProps = Tooltip$1.Popup.Props & VariantProps<typeof tooltipVariants.content> & {
+    /** 트리거와 툴팁 사이 간격 */
+    sideOffset?: Tooltip$1.Positioner.Props['sideOffset'];
+    side?: Tooltip$1.Positioner.Props['side'];
+    align?: Tooltip$1.Positioner.Props['align'];
+    alignOffset?: Tooltip$1.Positioner.Props['alignOffset'];
+    /** 툴팁을 렌더링할 포털 컨테이너 */
+    portalContainer?: Tooltip$1.Portal.Props['container'];
 };
-type TooltipTitleProps = React__default.HTMLAttributes<HTMLDivElement>;
-type TooltipDescriptionProps = React__default.HTMLAttributes<HTMLDivElement>;
-type TooltipComponent = typeof TooltipPrimitive.Root & {
-    Provider: typeof TooltipPrimitive.Provider;
-    Trigger: typeof TooltipPrimitive.Trigger;
-    Content: React__default.ForwardRefExoticComponent<TooltipContentProps & React__default.RefAttributes<React__default.ElementRef<typeof TooltipPrimitive.Content>>>;
-    Title: React__default.ForwardRefExoticComponent<TooltipTitleProps & React__default.RefAttributes<HTMLDivElement>>;
-    Description: React__default.ForwardRefExoticComponent<TooltipDescriptionProps & React__default.RefAttributes<HTMLDivElement>>;
+type TooltipTitleProps = React__default.ComponentProps<'div'>;
+type TooltipDescriptionProps = React__default.ComponentProps<'div'>;
+/**
+ * 인터페이스 요소 위에 나타나 보조 정보를 제공하는 컴포넌트입니다.
+ * Base UI Tooltip 기반이며 Compound Component 패턴으로 하위 컴포넌트와 함께 사용합니다.
+ *
+ * @example
+ * ```tsx
+ * <Tooltip.Provider>
+ *   <Tooltip>
+ *     <Tooltip.Trigger render={<Button>호버하세요</Button>} />
+ *     <Tooltip.Content size="small">
+ *       <Tooltip.Title>제목</Tooltip.Title>
+ *       <Tooltip.Description>설명</Tooltip.Description>
+ *     </Tooltip.Content>
+ *   </Tooltip>
+ * </Tooltip.Provider>
+ * ```
+ *
+ * @see {@link TooltipContentProps} Content props 상세
+ * @see https://base-ui.com/react/components/tooltip
+ */
+declare function TooltipRoot(props: TooltipRootProps): react_jsx_runtime.JSX.Element;
+declare namespace TooltipRoot {
+    var displayName: string;
+}
+declare function TooltipProvider(props: TooltipProviderProps): react_jsx_runtime.JSX.Element;
+declare namespace TooltipProvider {
+    var displayName: string;
+}
+declare function TooltipTrigger(props: TooltipTriggerProps): react_jsx_runtime.JSX.Element;
+declare namespace TooltipTrigger {
+    var displayName: string;
+}
+declare function TooltipContent({ className, children, size, sideOffset, side, align, alignOffset, portalContainer, id: idProp, ...props }: TooltipContentProps): react_jsx_runtime.JSX.Element;
+declare namespace TooltipContent {
+    var displayName: string;
+}
+declare function TooltipTitle({ className, ...props }: TooltipTitleProps): react_jsx_runtime.JSX.Element;
+declare namespace TooltipTitle {
+    var displayName: string;
+}
+declare function TooltipDescription({ className, ...props }: TooltipDescriptionProps): react_jsx_runtime.JSX.Element;
+declare namespace TooltipDescription {
+    var displayName: string;
+}
+declare const Tooltip: typeof TooltipRoot & {
+    Provider: typeof TooltipProvider;
+    Trigger: typeof TooltipTrigger;
+    Content: typeof TooltipContent;
+    Title: typeof TooltipTitle;
+    Description: typeof TooltipDescription;
 };
-declare const tooltipContentVariants: (props?: ({
-    size?: "small" | "medium" | "large" | "xlarge" | "tiny" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-declare const Tooltip: TooltipComponent;
+type TooltipComponent = typeof Tooltip;
 
 interface FlatTooltipProps {
     /** 툴팁을 적용할 자식 요소 */
@@ -317,6 +379,10 @@ interface FlatTooltipProps {
     alignOffset?: ComponentProps<typeof Tooltip.Content>['alignOffset'];
     /** 툴팁 설명 텍스트 */
     description: React.ReactNode;
+    /** 호버 후 툴팁이 나타나기까지의 지연 시간 (ms). 생략하면 `Tooltip.Provider`의 `delay`를 따른다 */
+    delay?: ComponentProps<typeof Tooltip.Trigger>['delay'];
+    /** 호버가 끝난 뒤 툴팁이 닫히기까지의 지연 시간 (ms) */
+    closeDelay?: ComponentProps<typeof Tooltip.Trigger>['closeDelay'];
 }
 /**
  * Tooltip 컴포넌트의 간소화된 Flat API입니다.
@@ -336,7 +402,7 @@ interface FlatTooltipProps {
  * @see {@link FlatTooltipProps} props 상세
  */
 declare const FlatTooltip: {
-    ({ children, title, size, description, ...props }: FlatTooltipProps): react_jsx_runtime.JSX.Element;
+    ({ children, title, size, description, delay, closeDelay, ...props }: FlatTooltipProps): string | number | bigint | boolean | react_jsx_runtime.JSX.Element | Iterable<React$1.ReactNode> | Promise<string | number | bigint | boolean | React$1.ReactPortal | React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>> | Iterable<React$1.ReactNode> | null | undefined> | null | undefined;
     displayName: string;
 };
 /** FlatTooltip 설정 객체 타입 (children 제외) */

package/dist/{FlatTooltip-Dur9oGCh.d.mts → FlatTooltip-eHUMKbuv.d.mts}

@@ -5,9 +5,9 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import { I as IconBaseProps } from './types-xnO0gkCW.mjs';
 import * as SelectPrimitive from '@radix-ui/react-select';
-import * as class_variance_authority_types from 'class-variance-authority/types';
+import { Tooltip as Tooltip$1 } from '@base-ui/react/tooltip';
 import { VariantProps } from '@exem-ui/core/utils';
-import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import * as class_variance_authority_types from 'class-variance-authority/types';
 
 type TabsType = 'primary' | 'secondary';
 type TabsRootProps<T extends string = string> = Omit<React__default.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>, 'value' | 'defaultValue' | 'onValueChange'> & {
@@ -280,25 +280,87 @@ type SelectComponent = React$1.ForwardRefExoticComponent<SelectRootProps & React
 };
 declare const Select: SelectComponent;
 
-type TooltipRootProps = React__default.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>;
-type TooltipProviderProps = React__default.ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>;
-type TooltipTriggerProps = React__default.ComponentPropsWithoutRef<typeof TooltipPrimitive.Trigger>;
-type TooltipContentProps = React__default.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & VariantProps<typeof tooltipContentVariants> & {
-    portalContainer?: HTMLElement | null;
+/**
+ * Tooltip 스타일 변형.
+ *
+ * Base UI Tooltip은 radix의 `data-state` 대신 `data-starting-style` / `data-ending-style`로
+ * 진입·퇴장을 노출한다. 위치(z-index 포함)는 Positioner가, 모양은 Popup이 맡는다.
+ */
+declare const tooltipVariants: {
+    positioner: string;
+    content: (props?: ({
+        size?: "small" | "medium" | "large" | "xlarge" | "tiny" | null | undefined;
+    } & class_variance_authority_types.ClassProp) | undefined) => string;
+    title: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+    description: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+};
+
+type TooltipRootProps = Tooltip$1.Root.Props;
+type TooltipProviderProps = Tooltip$1.Provider.Props;
+type TooltipTriggerProps = Tooltip$1.Trigger.Props;
+type TooltipContentProps = Tooltip$1.Popup.Props & VariantProps<typeof tooltipVariants.content> & {
+    /** 트리거와 툴팁 사이 간격 */
+    sideOffset?: Tooltip$1.Positioner.Props['sideOffset'];
+    side?: Tooltip$1.Positioner.Props['side'];
+    align?: Tooltip$1.Positioner.Props['align'];
+    alignOffset?: Tooltip$1.Positioner.Props['alignOffset'];
+    /** 툴팁을 렌더링할 포털 컨테이너 */
+    portalContainer?: Tooltip$1.Portal.Props['container'];
 };
-type TooltipTitleProps = React__default.HTMLAttributes<HTMLDivElement>;
-type TooltipDescriptionProps = React__default.HTMLAttributes<HTMLDivElement>;
-type TooltipComponent = typeof TooltipPrimitive.Root & {
-    Provider: typeof TooltipPrimitive.Provider;
-    Trigger: typeof TooltipPrimitive.Trigger;
-    Content: React__default.ForwardRefExoticComponent<TooltipContentProps & React__default.RefAttributes<React__default.ElementRef<typeof TooltipPrimitive.Content>>>;
-    Title: React__default.ForwardRefExoticComponent<TooltipTitleProps & React__default.RefAttributes<HTMLDivElement>>;
-    Description: React__default.ForwardRefExoticComponent<TooltipDescriptionProps & React__default.RefAttributes<HTMLDivElement>>;
+type TooltipTitleProps = React__default.ComponentProps<'div'>;
+type TooltipDescriptionProps = React__default.ComponentProps<'div'>;
+/**
+ * 인터페이스 요소 위에 나타나 보조 정보를 제공하는 컴포넌트입니다.
+ * Base UI Tooltip 기반이며 Compound Component 패턴으로 하위 컴포넌트와 함께 사용합니다.
+ *
+ * @example
+ * ```tsx
+ * <Tooltip.Provider>
+ *   <Tooltip>
+ *     <Tooltip.Trigger render={<Button>호버하세요</Button>} />
+ *     <Tooltip.Content size="small">
+ *       <Tooltip.Title>제목</Tooltip.Title>
+ *       <Tooltip.Description>설명</Tooltip.Description>
+ *     </Tooltip.Content>
+ *   </Tooltip>
+ * </Tooltip.Provider>
+ * ```
+ *
+ * @see {@link TooltipContentProps} Content props 상세
+ * @see https://base-ui.com/react/components/tooltip
+ */
+declare function TooltipRoot(props: TooltipRootProps): react_jsx_runtime.JSX.Element;
+declare namespace TooltipRoot {
+    var displayName: string;
+}
+declare function TooltipProvider(props: TooltipProviderProps): react_jsx_runtime.JSX.Element;
+declare namespace TooltipProvider {
+    var displayName: string;
+}
+declare function TooltipTrigger(props: TooltipTriggerProps): react_jsx_runtime.JSX.Element;
+declare namespace TooltipTrigger {
+    var displayName: string;
+}
+declare function TooltipContent({ className, children, size, sideOffset, side, align, alignOffset, portalContainer, id: idProp, ...props }: TooltipContentProps): react_jsx_runtime.JSX.Element;
+declare namespace TooltipContent {
+    var displayName: string;
+}
+declare function TooltipTitle({ className, ...props }: TooltipTitleProps): react_jsx_runtime.JSX.Element;
+declare namespace TooltipTitle {
+    var displayName: string;
+}
+declare function TooltipDescription({ className, ...props }: TooltipDescriptionProps): react_jsx_runtime.JSX.Element;
+declare namespace TooltipDescription {
+    var displayName: string;
+}
+declare const Tooltip: typeof TooltipRoot & {
+    Provider: typeof TooltipProvider;
+    Trigger: typeof TooltipTrigger;
+    Content: typeof TooltipContent;
+    Title: typeof TooltipTitle;
+    Description: typeof TooltipDescription;
 };
-declare const tooltipContentVariants: (props?: ({
-    size?: "small" | "medium" | "large" | "xlarge" | "tiny" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-declare const Tooltip: TooltipComponent;
+type TooltipComponent = typeof Tooltip;
 
 interface FlatTooltipProps {
     /** 툴팁을 적용할 자식 요소 */
@@ -317,6 +379,10 @@ interface FlatTooltipProps {
     alignOffset?: ComponentProps<typeof Tooltip.Content>['alignOffset'];
     /** 툴팁 설명 텍스트 */
     description: React.ReactNode;
+    /** 호버 후 툴팁이 나타나기까지의 지연 시간 (ms). 생략하면 `Tooltip.Provider`의 `delay`를 따른다 */
+    delay?: ComponentProps<typeof Tooltip.Trigger>['delay'];
+    /** 호버가 끝난 뒤 툴팁이 닫히기까지의 지연 시간 (ms) */
+    closeDelay?: ComponentProps<typeof Tooltip.Trigger>['closeDelay'];
 }
 /**
  * Tooltip 컴포넌트의 간소화된 Flat API입니다.
@@ -336,7 +402,7 @@ interface FlatTooltipProps {
  * @see {@link FlatTooltipProps} props 상세
  */
 declare const FlatTooltip: {
-    ({ children, title, size, description, ...props }: FlatTooltipProps): react_jsx_runtime.JSX.Element;
+    ({ children, title, size, description, delay, closeDelay, ...props }: FlatTooltipProps): string | number | bigint | boolean | react_jsx_runtime.JSX.Element | Iterable<React$1.ReactNode> | Promise<string | number | bigint | boolean | React$1.ReactPortal | React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>> | Iterable<React$1.ReactNode> | null | undefined> | null | undefined;
     displayName: string;
 };
 /** FlatTooltip 설정 객체 타입 (children 제외) */

package/dist/{chunk-3LVJLFY6.js → chunk-2JF444FU.js}

@@ -9,7 +9,7 @@ var React = require('react');
 var ScrollAreaPrimitive = require('@radix-ui/react-scroll-area');
 var TabsPrimitive2 = require('@radix-ui/react-tabs');
 var SelectPrimitive = require('@radix-ui/react-select');
-var TooltipPrimitive = require('@radix-ui/react-tooltip');
+var tooltip = require('@base-ui/react/tooltip');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -34,7 +34,6 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var ScrollAreaPrimitive__namespace = /*#__PURE__*/_interopNamespace(ScrollAreaPrimitive);
 var TabsPrimitive2__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive2);
 var SelectPrimitive__namespace = /*#__PURE__*/_interopNamespace(SelectPrimitive);
-var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
 
 var colorPaletteColorClasses = {
   mono: { background: "bg-mono-dark", text: "text-mono-dark" },
@@ -1393,83 +1392,159 @@ function FlatTabs({
   return /* @__PURE__ */ jsxRuntime.jsx(Tabs, { ...rootProps, children: /* @__PURE__ */ jsxRuntime.jsx(Tabs.List, { className, children: items.map(({ value, children, ...itemProps }) => /* @__PURE__ */ jsxRuntime.jsx(Tabs.Trigger, { value, ...itemProps, children }, value)) }) });
 }
 FlatTabs.displayName = "FlatTabs";
-var tooltipContentVariants = utils.cva(
-  [
-    // Base layout
-    "z-50 flex flex-col items-start overflow-hidden",
-    "rounded-medium",
-    "text-text-static-light",
-    "bg-component-tooltip border border-border-primary",
-    "shadow-medium",
-    "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",
-    "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"
-  ],
-  {
-    variants: {
-      size: {
-        tiny: "px-2 py-1 text-body-3",
-        small: "w-[160px] gap-[8px] px-[12px] py-[10px]",
-        medium: "w-[240px] gap-[8px] px-[12px] py-[10px]",
-        large: "w-[320px] gap-[8px] px-[12px] py-[10px]",
-        xlarge: "w-[400px] gap-[8px] px-[12px] py-[10px]"
-      }
-    },
-    defaultVariants: { size: "small" }
-  }
-);
-var tooltipTitleVariants = utils.cva([
-  "text-body-1 font-semibold text-text-static-light",
-  "group-data-[size=tiny]/tooltip-content:text-body-3"
-]);
-var tooltipTextVariants = utils.cva([
-  "text-body-2 font-regular text-text-static-light",
-  "group-data-[size=tiny]/tooltip-content:text-body-3"
-]);
-var Tooltip = TooltipPrimitive__namespace.Root;
-Tooltip.Provider = TooltipPrimitive__namespace.Provider;
-Tooltip.Trigger = TooltipPrimitive__namespace.Trigger;
-Tooltip.Content = React.forwardRef(({ className, sideOffset = 4, size, children, portalContainer, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-  TooltipPrimitive__namespace.Content,
-  {
-    ref,
-    sideOffset,
-    "data-size": size,
-    className: utils.cn("group/tooltip-content", tooltipContentVariants({ size }), className),
-    ...props,
-    children
+var tooltipVariants = {
+  positioner: "z-50",
+  content: utils.cva(
+    [
+      "flex flex-col items-start overflow-hidden",
+      "rounded-medium",
+      "text-text-static-light",
+      // Figma의 Tooltip은 테마와 무관하게 다크 모드 값으로 고정된다. bg-component-tooltip은 두 테마가
+      // 같지만 border-primary는 라이트에서 밝아지므로, 다크 값인 gray-08을 직접 쓴다.
+      "bg-component-tooltip border border-gray-08",
+      "shadow-medium",
+      "origin-[var(--transform-origin)] transition-[transform,scale,opacity] duration-150",
+      "data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
+      "data-[ending-style]:scale-95 data-[ending-style]:opacity-0",
+      "data-[instant]:transition-none"
+    ],
+    {
+      variants: {
+        size: {
+          tiny: "px-2 py-1 text-body-3",
+          small: "w-[160px] gap-1 px-[12px] py-[10px]",
+          medium: "w-[240px] gap-1 px-[12px] py-[10px]",
+          large: "w-[320px] gap-1 px-[12px] py-[10px]",
+          xlarge: "w-[400px] gap-1 px-[12px] py-[10px]"
+        }
+      },
+      defaultVariants: { size: "small" }
+    }
+  ),
+  title: utils.cva([
+    "text-body-2 font-medium text-text-static-light",
+    "group-data-[size=tiny]/tooltip-content:text-body-3"
+  ]),
+  description: utils.cva([
+    "text-body-2 font-regular text-text-static-light",
+    "group-data-[size=tiny]/tooltip-content:text-body-3"
+  ])
+};
+var TooltipA11yContext = React.createContext({ setPopupId: () => {
+} });
+function TooltipPopupMounted({ id }) {
+  const { setPopupId } = React.useContext(TooltipA11yContext);
+  React.useEffect(() => {
+    setPopupId(id);
+    return () => setPopupId(void 0);
+  }, [id, setPopupId]);
+  return null;
+}
+function TooltipRoot(props) {
+  const [popupId, setPopupId] = React.useState();
+  const a11y = React.useMemo(() => ({ popupId, setPopupId }), [popupId]);
+  return /* @__PURE__ */ jsxRuntime.jsx(TooltipA11yContext.Provider, { value: a11y, children: /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Root, { ...props }) });
+}
+function TooltipProvider(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Provider, { ...props });
+}
+function TooltipTrigger(props) {
+  const { popupId } = React.useContext(TooltipA11yContext);
+  return /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Trigger, { "data-slot": "tooltip-trigger", "aria-describedby": popupId, ...props });
+}
+function TooltipContent({
+  className,
+  children,
+  size,
+  sideOffset = 4,
+  side,
+  align,
+  alignOffset,
+  portalContainer,
+  id: idProp,
+  ...props
+}) {
+  const fallbackId = React.useId();
+  const popupId = idProp ?? fallbackId;
+  return /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+    tooltip.Tooltip.Positioner,
+    {
+      className: tooltipVariants.positioner,
+      sideOffset,
+      side,
+      align,
+      alignOffset,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        tooltip.Tooltip.Popup,
+        {
+          "data-slot": "tooltip-content",
+          "data-size": size,
+          id: popupId,
+          role: "tooltip",
+          className: utils.cn("group/tooltip-content", tooltipVariants.content({ size }), className),
+          ...props,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(TooltipPopupMounted, { id: popupId }),
+            children
+          ]
+        }
+      )
+    }
+  ) });
+}
+function TooltipTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "tooltip-title", className: utils.cn(tooltipVariants.title(), className), ...props });
+}
+function TooltipDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "tooltip-description",
+      className: utils.cn(tooltipVariants.description(), className),
+      ...props
+    }
+  );
+}
+TooltipRoot.displayName = "Tooltip";
+TooltipProvider.displayName = "Tooltip.Provider";
+TooltipTrigger.displayName = "Tooltip.Trigger";
+TooltipContent.displayName = "Tooltip.Content";
+TooltipTitle.displayName = "Tooltip.Title";
+TooltipDescription.displayName = "Tooltip.Description";
+var Tooltip = Object.assign(TooltipRoot, {
+  Provider: TooltipProvider,
+  Trigger: TooltipTrigger,
+  Content: TooltipContent,
+  Title: TooltipTitle,
+  Description: TooltipDescription
+});
+var FlatTooltip = ({
+  children,
+  title,
+  size,
+  description,
+  delay,
+  closeDelay,
+  ...props
+}) => {
+  if (!React.isValidElement(children)) {
+    return children;
   }
-) }));
-Tooltip.Title = React.forwardRef(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: utils.cn(tooltipTitleVariants(), className), ...props, children })
-);
-Tooltip.Description = React.forwardRef(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: utils.cn(tooltipTextVariants(), className), ...props, children })
-);
-Tooltip.displayName = "Tooltip";
-Tooltip.Content.displayName = "Tooltip.Content";
-Tooltip.Title.displayName = "Tooltip.Title";
-Tooltip.Description.displayName = "Tooltip.Description";
-Tooltip.Trigger.displayName = "Tooltip.Trigger";
-Tooltip.Provider.displayName = "Tooltip.Provider";
-var FlatTooltip = ({ children, title, size, description, ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Provider, { delayDuration: 0, skipDelayDuration: 0, children: /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Trigger, { asChild: true, children }),
+  return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Trigger, { render: children, delay, closeDelay }),
     /* @__PURE__ */ jsxRuntime.jsxs(Tooltip.Content, { size, ...props, children: [
       title && /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Title, { children: title }),
       description && /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Description, { children: description })
     ] })
-  ] }) });
+  ] });
 };
 function ConditionalTooltip({ children, tooltip }) {
   if (typeof tooltip === "string") {
     return /* @__PURE__ */ jsxRuntime.jsx(FlatTooltip, { size: "tiny", description: tooltip, children });
   }
   if (tooltip && typeof tooltip === "object" && "description" in tooltip && tooltip.use !== false) {
-    return /* @__PURE__ */ jsxRuntime.jsx(FlatTooltip, { size: tooltip.size || "tiny", ...tooltip, children });
+    const { use: _use, ...config } = tooltip;
+    return /* @__PURE__ */ jsxRuntime.jsx(FlatTooltip, { ...config, size: config.size || "tiny", children });
   }
   return children;
 }

package/dist/{chunk-BRB66UJW.mjs → chunk-QO7JYX6Q.mjs}

@@ -4,11 +4,11 @@ import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Combobox as Combobox$1 } from '@base-ui/react/combobox';
 import * as React from 'react';
-import { createContext, forwardRef, cloneElement, useId, useContext, createElement, useRef, useState } from 'react';
+import { createContext, forwardRef, cloneElement, useId, useContext, useState, useMemo, useEffect, createElement, useRef, isValidElement } from 'react';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import * as TabsPrimitive2 from '@radix-ui/react-tabs';
 import * as SelectPrimitive from '@radix-ui/react-select';
-import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { Tooltip as Tooltip$1 } from '@base-ui/react/tooltip';
 
 var colorPaletteColorClasses = {
   mono: { background: "bg-mono-dark", text: "text-mono-dark" },
@@ -1367,83 +1367,159 @@ function FlatTabs({
   return /* @__PURE__ */ jsx(Tabs, { ...rootProps, children: /* @__PURE__ */ jsx(Tabs.List, { className, children: items.map(({ value, children, ...itemProps }) => /* @__PURE__ */ jsx(Tabs.Trigger, { value, ...itemProps, children }, value)) }) });
 }
 FlatTabs.displayName = "FlatTabs";
-var tooltipContentVariants = cva(
-  [
-    // Base layout
-    "z-50 flex flex-col items-start overflow-hidden",
-    "rounded-medium",
-    "text-text-static-light",
-    "bg-component-tooltip border border-border-primary",
-    "shadow-medium",
-    "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",
-    "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"
-  ],
-  {
-    variants: {
-      size: {
-        tiny: "px-2 py-1 text-body-3",
-        small: "w-[160px] gap-[8px] px-[12px] py-[10px]",
-        medium: "w-[240px] gap-[8px] px-[12px] py-[10px]",
-        large: "w-[320px] gap-[8px] px-[12px] py-[10px]",
-        xlarge: "w-[400px] gap-[8px] px-[12px] py-[10px]"
-      }
-    },
-    defaultVariants: { size: "small" }
-  }
-);
-var tooltipTitleVariants = cva([
-  "text-body-1 font-semibold text-text-static-light",
-  "group-data-[size=tiny]/tooltip-content:text-body-3"
-]);
-var tooltipTextVariants = cva([
-  "text-body-2 font-regular text-text-static-light",
-  "group-data-[size=tiny]/tooltip-content:text-body-3"
-]);
-var Tooltip = TooltipPrimitive.Root;
-Tooltip.Provider = TooltipPrimitive.Provider;
-Tooltip.Trigger = TooltipPrimitive.Trigger;
-Tooltip.Content = forwardRef(({ className, sideOffset = 4, size, children, portalContainer, ...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
-  TooltipPrimitive.Content,
-  {
-    ref,
-    sideOffset,
-    "data-size": size,
-    className: cn("group/tooltip-content", tooltipContentVariants({ size }), className),
-    ...props,
-    children
+var tooltipVariants = {
+  positioner: "z-50",
+  content: cva(
+    [
+      "flex flex-col items-start overflow-hidden",
+      "rounded-medium",
+      "text-text-static-light",
+      // Figma의 Tooltip은 테마와 무관하게 다크 모드 값으로 고정된다. bg-component-tooltip은 두 테마가
+      // 같지만 border-primary는 라이트에서 밝아지므로, 다크 값인 gray-08을 직접 쓴다.
+      "bg-component-tooltip border border-gray-08",
+      "shadow-medium",
+      "origin-[var(--transform-origin)] transition-[transform,scale,opacity] duration-150",
+      "data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
+      "data-[ending-style]:scale-95 data-[ending-style]:opacity-0",
+      "data-[instant]:transition-none"
+    ],
+    {
+      variants: {
+        size: {
+          tiny: "px-2 py-1 text-body-3",
+          small: "w-[160px] gap-1 px-[12px] py-[10px]",
+          medium: "w-[240px] gap-1 px-[12px] py-[10px]",
+          large: "w-[320px] gap-1 px-[12px] py-[10px]",
+          xlarge: "w-[400px] gap-1 px-[12px] py-[10px]"
+        }
+      },
+      defaultVariants: { size: "small" }
+    }
+  ),
+  title: cva([
+    "text-body-2 font-medium text-text-static-light",
+    "group-data-[size=tiny]/tooltip-content:text-body-3"
+  ]),
+  description: cva([
+    "text-body-2 font-regular text-text-static-light",
+    "group-data-[size=tiny]/tooltip-content:text-body-3"
+  ])
+};
+var TooltipA11yContext = createContext({ setPopupId: () => {
+} });
+function TooltipPopupMounted({ id }) {
+  const { setPopupId } = useContext(TooltipA11yContext);
+  useEffect(() => {
+    setPopupId(id);
+    return () => setPopupId(void 0);
+  }, [id, setPopupId]);
+  return null;
+}
+function TooltipRoot(props) {
+  const [popupId, setPopupId] = useState();
+  const a11y = useMemo(() => ({ popupId, setPopupId }), [popupId]);
+  return /* @__PURE__ */ jsx(TooltipA11yContext.Provider, { value: a11y, children: /* @__PURE__ */ jsx(Tooltip$1.Root, { ...props }) });
+}
+function TooltipProvider(props) {
+  return /* @__PURE__ */ jsx(Tooltip$1.Provider, { ...props });
+}
+function TooltipTrigger(props) {
+  const { popupId } = useContext(TooltipA11yContext);
+  return /* @__PURE__ */ jsx(Tooltip$1.Trigger, { "data-slot": "tooltip-trigger", "aria-describedby": popupId, ...props });
+}
+function TooltipContent({
+  className,
+  children,
+  size,
+  sideOffset = 4,
+  side,
+  align,
+  alignOffset,
+  portalContainer,
+  id: idProp,
+  ...props
+}) {
+  const fallbackId = useId();
+  const popupId = idProp ?? fallbackId;
+  return /* @__PURE__ */ jsx(Tooltip$1.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
+    Tooltip$1.Positioner,
+    {
+      className: tooltipVariants.positioner,
+      sideOffset,
+      side,
+      align,
+      alignOffset,
+      children: /* @__PURE__ */ jsxs(
+        Tooltip$1.Popup,
+        {
+          "data-slot": "tooltip-content",
+          "data-size": size,
+          id: popupId,
+          role: "tooltip",
+          className: cn("group/tooltip-content", tooltipVariants.content({ size }), className),
+          ...props,
+          children: [
+            /* @__PURE__ */ jsx(TooltipPopupMounted, { id: popupId }),
+            children
+          ]
+        }
+      )
+    }
+  ) });
+}
+function TooltipTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "tooltip-title", className: cn(tooltipVariants.title(), className), ...props });
+}
+function TooltipDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "tooltip-description",
+      className: cn(tooltipVariants.description(), className),
+      ...props
+    }
+  );
+}
+TooltipRoot.displayName = "Tooltip";
+TooltipProvider.displayName = "Tooltip.Provider";
+TooltipTrigger.displayName = "Tooltip.Trigger";
+TooltipContent.displayName = "Tooltip.Content";
+TooltipTitle.displayName = "Tooltip.Title";
+TooltipDescription.displayName = "Tooltip.Description";
+var Tooltip = Object.assign(TooltipRoot, {
+  Provider: TooltipProvider,
+  Trigger: TooltipTrigger,
+  Content: TooltipContent,
+  Title: TooltipTitle,
+  Description: TooltipDescription
+});
+var FlatTooltip = ({
+  children,
+  title,
+  size,
+  description,
+  delay,
+  closeDelay,
+  ...props
+}) => {
+  if (!isValidElement(children)) {
+    return children;
   }
-) }));
-Tooltip.Title = forwardRef(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn(tooltipTitleVariants(), className), ...props, children })
-);
-Tooltip.Description = forwardRef(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn(tooltipTextVariants(), className), ...props, children })
-);
-Tooltip.displayName = "Tooltip";
-Tooltip.Content.displayName = "Tooltip.Content";
-Tooltip.Title.displayName = "Tooltip.Title";
-Tooltip.Description.displayName = "Tooltip.Description";
-Tooltip.Trigger.displayName = "Tooltip.Trigger";
-Tooltip.Provider.displayName = "Tooltip.Provider";
-var FlatTooltip = ({ children, title, size, description, ...props }) => {
-  return /* @__PURE__ */ jsx(Tooltip.Provider, { delayDuration: 0, skipDelayDuration: 0, children: /* @__PURE__ */ jsxs(Tooltip, { children: [
-    /* @__PURE__ */ jsx(Tooltip.Trigger, { asChild: true, children }),
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(Tooltip.Trigger, { render: children, delay, closeDelay }),
     /* @__PURE__ */ jsxs(Tooltip.Content, { size, ...props, children: [
       title && /* @__PURE__ */ jsx(Tooltip.Title, { children: title }),
       description && /* @__PURE__ */ jsx(Tooltip.Description, { children: description })
     ] })
-  ] }) });
+  ] });
 };
 function ConditionalTooltip({ children, tooltip }) {
   if (typeof tooltip === "string") {
     return /* @__PURE__ */ jsx(FlatTooltip, { size: "tiny", description: tooltip, children });
   }
   if (tooltip && typeof tooltip === "object" && "description" in tooltip && tooltip.use !== false) {
-    return /* @__PURE__ */ jsx(FlatTooltip, { size: tooltip.size || "tiny", ...tooltip, children });
+    const { use: _use, ...config } = tooltip;
+    return /* @__PURE__ */ jsx(FlatTooltip, { ...config, size: config.size || "tiny", children });
   }
   return children;
 }

package/dist/flat/index.d.mts

@@ -1,14 +1,14 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { C as ColorPaletteColor, G as ColorPaletteProps, I as Icon, S as Size, V as Variant, u as SegmentItemProps, w as SegmentRootProps, g as Select, f as TabsTriggerProps, e as TabsRootProps } from '../FlatTooltip-Dur9oGCh.mjs';
-export { Q as ConditionalTooltip, a as ConditionalTooltipProps, R as FlatTooltip, O as FlatTooltipProps, P as TooltipConfig } from '../FlatTooltip-Dur9oGCh.mjs';
+import { C as ColorPaletteColor, G as ColorPaletteProps, I as Icon, S as Size, V as Variant, u as SegmentItemProps, w as SegmentRootProps, g as Select, f as TabsTriggerProps, e as TabsRootProps } from '../FlatTooltip-eHUMKbuv.mjs';
+export { Q as ConditionalTooltip, a as ConditionalTooltipProps, R as FlatTooltip, O as FlatTooltipProps, P as TooltipConfig } from '../FlatTooltip-eHUMKbuv.mjs';
 import { ReactNode, ComponentProps } from 'react';
 import '@radix-ui/react-tabs';
 import '@radix-ui/react-radio-group';
 import '../types-xnO0gkCW.mjs';
 import '@radix-ui/react-select';
-import 'class-variance-authority/types';
+import '@base-ui/react/tooltip';
 import '@exem-ui/core/utils';
-import '@radix-ui/react-tooltip';
+import 'class-variance-authority/types';
 
 type FlatColorPaletteProps<P extends readonly ColorPaletteColor[] = readonly ColorPaletteColor[]> = Omit<ColorPaletteProps, 'value' | 'defaultValue' | 'onValueChange' | 'children'> & {
     /** 표시할 색상 팔레트. 소비자가 직접 구성하며 `ColorPaletteColors` 상수로 작성하면 오타가 잡힙니다. */

package/dist/flat/index.d.ts

@@ -1,14 +1,14 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { C as ColorPaletteColor, G as ColorPaletteProps, I as Icon, S as Size, V as Variant, u as SegmentItemProps, w as SegmentRootProps, g as Select, f as TabsTriggerProps, e as TabsRootProps } from '../FlatTooltip-CksJEO8x.js';
-export { Q as ConditionalTooltip, a as ConditionalTooltipProps, R as FlatTooltip, O as FlatTooltipProps, P as TooltipConfig } from '../FlatTooltip-CksJEO8x.js';
+import { C as ColorPaletteColor, G as ColorPaletteProps, I as Icon, S as Size, V as Variant, u as SegmentItemProps, w as SegmentRootProps, g as Select, f as TabsTriggerProps, e as TabsRootProps } from '../FlatTooltip-CrfIdqNq.js';
+export { Q as ConditionalTooltip, a as ConditionalTooltipProps, R as FlatTooltip, O as FlatTooltipProps, P as TooltipConfig } from '../FlatTooltip-CrfIdqNq.js';
 import { ReactNode, ComponentProps } from 'react';
 import '@radix-ui/react-tabs';
 import '@radix-ui/react-radio-group';
 import '../types-xnO0gkCW.js';
 import '@radix-ui/react-select';
-import 'class-variance-authority/types';
+import '@base-ui/react/tooltip';
 import '@exem-ui/core/utils';
-import '@radix-ui/react-tooltip';
+import 'class-variance-authority/types';
 
 type FlatColorPaletteProps<P extends readonly ColorPaletteColor[] = readonly ColorPaletteColor[]> = Omit<ColorPaletteProps, 'value' | 'defaultValue' | 'onValueChange' | 'children'> & {
     /** 표시할 색상 팔레트. 소비자가 직접 구성하며 `ColorPaletteColors` 상수로 작성하면 오타가 잡힙니다. */

package/dist/flat/index.js

@@ -1,35 +1,35 @@
 'use strict';
 
-var chunk3LVJLFY6_js = require('../chunk-3LVJLFY6.js');
+var chunk2JF444FU_js = require('../chunk-2JF444FU.js');
 require('../chunk-6NFYQZSK.js');
 
 
 
 Object.defineProperty(exports, "ConditionalTooltip", {
   enumerable: true,
-  get: function () { return chunk3LVJLFY6_js.ConditionalTooltip; }
+  get: function () { return chunk2JF444FU_js.ConditionalTooltip; }
 });
 Object.defineProperty(exports, "FlatColorPalette", {
   enumerable: true,
-  get: function () { return chunk3LVJLFY6_js.FlatColorPalette; }
+  get: function () { return chunk2JF444FU_js.FlatColorPalette; }
 });
 Object.defineProperty(exports, "FlatCombobox", {
   enumerable: true,
-  get: function () { return chunk3LVJLFY6_js.FlatCombobox; }
+  get: function () { return chunk2JF444FU_js.FlatCombobox; }
 });
 Object.defineProperty(exports, "FlatSegment", {
   enumerable: true,
-  get: function () { return chunk3LVJLFY6_js.FlatSegment; }
+  get: function () { return chunk2JF444FU_js.FlatSegment; }
 });
 Object.defineProperty(exports, "FlatSelect", {
   enumerable: true,
-  get: function () { return chunk3LVJLFY6_js.FlatSelect; }
+  get: function () { return chunk2JF444FU_js.FlatSelect; }
 });
 Object.defineProperty(exports, "FlatTabs", {
   enumerable: true,
-  get: function () { return chunk3LVJLFY6_js.FlatTabs; }
+  get: function () { return chunk2JF444FU_js.FlatTabs; }
 });
 Object.defineProperty(exports, "FlatTooltip", {
   enumerable: true,
-  get: function () { return chunk3LVJLFY6_js.FlatTooltip; }
+  get: function () { return chunk2JF444FU_js.FlatTooltip; }
 });

package/dist/flat/index.mjs

@@ -1,2 +1,2 @@
-export { ConditionalTooltip, FlatColorPalette, FlatCombobox, FlatSegment, FlatSelect, FlatTabs, FlatTooltip } from '../chunk-BRB66UJW.mjs';
+export { ConditionalTooltip, FlatColorPalette, FlatCombobox, FlatSegment, FlatSelect, FlatTabs, FlatTooltip } from '../chunk-QO7JYX6Q.mjs';
 import '../chunk-DKADAZLG.mjs';

package/dist/index.d.mts

@@ -2,8 +2,8 @@ import * as class_variance_authority_types from 'class-variance-authority/types'
 import { VariantProps } from '@exem-ui/core/utils';
 import * as React$1 from 'react';
 import React__default, { ComponentProps } from 'react';
-import { C as ColorPaletteColor, a as ConditionalTooltipProps, S as Size$1, I as Icon, V as Variant } from './FlatTooltip-Dur9oGCh.mjs';
-export { J as ColorPalette, K as ColorPaletteColors, G as ColorPaletteProps, H as ColorPaletteSwatchProps, L as DEFAULT_COLOR, r as Segment, s as SegmentComponent, t as SegmentContentProps, u as SegmentItemProps, v as SegmentListProps, w as SegmentRootProps, g as Select, h as SelectBoxProps, i as SelectComponent, j as SelectDescriptionProps, k as SelectEmptyProps, l as SelectGroupProps, m as SelectItemProps, n as SelectLabelProps, o as SelectListProps, p as SelectRootProps, q as SelectTriggerProps, T as Tabs, b as TabsComponent, c as TabsContentProps, d as TabsListProps, e as TabsRootProps, f as TabsTriggerProps, x as Tooltip, y as TooltipComponent, z as TooltipContentProps, A as TooltipDescriptionProps, B as TooltipProviderProps, D as TooltipRootProps, E as TooltipTitleProps, F as TooltipTriggerProps, M as getColorPaletteColor, N as isInPalette } from './FlatTooltip-Dur9oGCh.mjs';
+import { C as ColorPaletteColor, a as ConditionalTooltipProps, S as Size$1, I as Icon, V as Variant } from './FlatTooltip-eHUMKbuv.mjs';
+export { J as ColorPalette, K as ColorPaletteColors, G as ColorPaletteProps, H as ColorPaletteSwatchProps, L as DEFAULT_COLOR, r as Segment, s as SegmentComponent, t as SegmentContentProps, u as SegmentItemProps, v as SegmentListProps, w as SegmentRootProps, g as Select, h as SelectBoxProps, i as SelectComponent, j as SelectDescriptionProps, k as SelectEmptyProps, l as SelectGroupProps, m as SelectItemProps, n as SelectLabelProps, o as SelectListProps, p as SelectRootProps, q as SelectTriggerProps, T as Tabs, b as TabsComponent, c as TabsContentProps, d as TabsListProps, e as TabsRootProps, f as TabsTriggerProps, x as Tooltip, y as TooltipComponent, z as TooltipContentProps, A as TooltipDescriptionProps, B as TooltipProviderProps, D as TooltipRootProps, E as TooltipTitleProps, F as TooltipTriggerProps, M as getColorPaletteColor, N as isInPalette } from './FlatTooltip-eHUMKbuv.mjs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Button as Button$1 } from '@base-ui/react/button';
 import { I as IconBaseProps } from './types-xnO0gkCW.mjs';
@@ -19,7 +19,7 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { Toaster as Toaster$1, ExternalToast, toast as toast$1 } from 'sonner';
 import '@radix-ui/react-tabs';
 import '@radix-ui/react-select';
-import '@radix-ui/react-tooltip';
+import '@base-ui/react/tooltip';
 
 interface AvatarProps extends React__default.HTMLAttributes<HTMLDivElement>, VariantProps<typeof avatarVariants> {
     /** 사용자 이름. 이미지가 없을 때 이니셜 폴백에 사용됩니다. */

package/dist/index.d.ts

@@ -2,8 +2,8 @@ import * as class_variance_authority_types from 'class-variance-authority/types'
 import { VariantProps } from '@exem-ui/core/utils';
 import * as React$1 from 'react';
 import React__default, { ComponentProps } from 'react';
-import { C as ColorPaletteColor, a as ConditionalTooltipProps, S as Size$1, I as Icon, V as Variant } from './FlatTooltip-CksJEO8x.js';
-export { J as ColorPalette, K as ColorPaletteColors, G as ColorPaletteProps, H as ColorPaletteSwatchProps, L as DEFAULT_COLOR, r as Segment, s as SegmentComponent, t as SegmentContentProps, u as SegmentItemProps, v as SegmentListProps, w as SegmentRootProps, g as Select, h as SelectBoxProps, i as SelectComponent, j as SelectDescriptionProps, k as SelectEmptyProps, l as SelectGroupProps, m as SelectItemProps, n as SelectLabelProps, o as SelectListProps, p as SelectRootProps, q as SelectTriggerProps, T as Tabs, b as TabsComponent, c as TabsContentProps, d as TabsListProps, e as TabsRootProps, f as TabsTriggerProps, x as Tooltip, y as TooltipComponent, z as TooltipContentProps, A as TooltipDescriptionProps, B as TooltipProviderProps, D as TooltipRootProps, E as TooltipTitleProps, F as TooltipTriggerProps, M as getColorPaletteColor, N as isInPalette } from './FlatTooltip-CksJEO8x.js';
+import { C as ColorPaletteColor, a as ConditionalTooltipProps, S as Size$1, I as Icon, V as Variant } from './FlatTooltip-CrfIdqNq.js';
+export { J as ColorPalette, K as ColorPaletteColors, G as ColorPaletteProps, H as ColorPaletteSwatchProps, L as DEFAULT_COLOR, r as Segment, s as SegmentComponent, t as SegmentContentProps, u as SegmentItemProps, v as SegmentListProps, w as SegmentRootProps, g as Select, h as SelectBoxProps, i as SelectComponent, j as SelectDescriptionProps, k as SelectEmptyProps, l as SelectGroupProps, m as SelectItemProps, n as SelectLabelProps, o as SelectListProps, p as SelectRootProps, q as SelectTriggerProps, T as Tabs, b as TabsComponent, c as TabsContentProps, d as TabsListProps, e as TabsRootProps, f as TabsTriggerProps, x as Tooltip, y as TooltipComponent, z as TooltipContentProps, A as TooltipDescriptionProps, B as TooltipProviderProps, D as TooltipRootProps, E as TooltipTitleProps, F as TooltipTriggerProps, M as getColorPaletteColor, N as isInPalette } from './FlatTooltip-CrfIdqNq.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Button as Button$1 } from '@base-ui/react/button';
 import { I as IconBaseProps } from './types-xnO0gkCW.js';
@@ -19,7 +19,7 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { Toaster as Toaster$1, ExternalToast, toast as toast$1 } from 'sonner';
 import '@radix-ui/react-tabs';
 import '@radix-ui/react-select';
-import '@radix-ui/react-tooltip';
+import '@base-ui/react/tooltip';
 
 interface AvatarProps extends React__default.HTMLAttributes<HTMLDivElement>, VariantProps<typeof avatarVariants> {
     /** 사용자 이름. 이미지가 없을 때 이니셜 폴백에 사용됩니다. */

package/dist/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunk3LVJLFY6_js = require('./chunk-3LVJLFY6.js');
+var chunk2JF444FU_js = require('./chunk-2JF444FU.js');
 var chunk6NFYQZSK_js = require('./chunk-6NFYQZSK.js');
 var utils = require('@exem-ui/core/utils');
 var React = require('react');
@@ -560,7 +560,7 @@ function IconButton({
   ...props
 }) {
   const tooltipLabel = typeof tooltip === "string" ? tooltip : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsx(chunk3LVJLFY6_js.ConditionalTooltip, { tooltip, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(chunk2JF444FU_js.ConditionalTooltip, { tooltip, children: /* @__PURE__ */ jsxRuntime.jsx(
     Button,
     {
       "aria-label": ariaLabel ?? (ariaLabelledBy === void 0 ? tooltipLabel : void 0),
@@ -624,7 +624,7 @@ function ButtonGroup({
             item.id
           );
         }
-        return /* @__PURE__ */ jsxRuntime.jsx(chunk3LVJLFY6_js.ConditionalTooltip, { tooltip: item.tooltip, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { ...buttonBaseProps, leftIcon: item.icon, children: item.label }) }, item.id);
+        return /* @__PURE__ */ jsxRuntime.jsx(chunk2JF444FU_js.ConditionalTooltip, { tooltip: item.tooltip, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { ...buttonBaseProps, leftIcon: item.icon, children: item.label }) }, item.id);
       })
     }
   );
@@ -1024,12 +1024,12 @@ function DatePicker({ type = "single", showOutsideDays = true, ...rest }) {
 }
 var dropdownVariants = {
   content: utils.cn(
-    chunk3LVJLFY6_js.overlayListVariants.content,
+    chunk2JF444FU_js.overlayListVariants.content,
     "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"
   ),
-  viewport: chunk3LVJLFY6_js.overlayListVariants.viewport,
-  item: (props) => utils.cn(chunk3LVJLFY6_js.overlayListVariants.item(props), "focus:bg-elevation-elevation-2"),
-  slotSize: chunk3LVJLFY6_js.overlayListVariants.slotSize,
+  viewport: chunk2JF444FU_js.overlayListVariants.viewport,
+  item: (props) => utils.cn(chunk2JF444FU_js.overlayListVariants.item(props), "focus:bg-elevation-elevation-2"),
+  slotSize: chunk2JF444FU_js.overlayListVariants.slotSize,
   separator: utils.cn("my-0.5 h-px bg-border-primary"),
   label: utils.cva("px-2 font-medium text-text-secondary", {
     defaultVariants: { size: "medium" },
@@ -1080,9 +1080,9 @@ Dropdown.Item = React.forwardRef(({ className, children, leftSlot, rightSlot, si
       className: utils.cn(dropdownVariants.item({ size }), className),
       ...props,
       children: [
-        leftSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunk3LVJLFY6_js.overlayListVariants.slotSize({ size }), children: leftSlot }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn(chunk3LVJLFY6_js.overlayListVariants.itemText({ size }), "min-w-0 flex-1 truncate"), children }),
-        rightSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunk3LVJLFY6_js.overlayListVariants.slotSize({ size }), children: rightSlot })
+        leftSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunk2JF444FU_js.overlayListVariants.slotSize({ size }), children: leftSlot }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn(chunk2JF444FU_js.overlayListVariants.itemText({ size }), "min-w-0 flex-1 truncate"), children }),
+        rightSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunk2JF444FU_js.overlayListVariants.slotSize({ size }), children: rightSlot })
       ]
     }
   );
@@ -1127,8 +1127,8 @@ var useTextAreaContext = () => {
   return context;
 };
 var textAreaVariants = {
-  container: chunk3LVJLFY6_js.commonInputVariants.container,
-  label: chunk3LVJLFY6_js.commonInputVariants.label,
+  container: chunk2JF444FU_js.commonInputVariants.container,
+  label: chunk2JF444FU_js.commonInputVariants.label,
   field: utils.cva(
     "scrollbar-overlay block w-full resize-none rounded-medium border transition-colors focus:outline-none",
     {
@@ -1182,7 +1182,7 @@ var textAreaVariants = {
     },
     defaultVariants: { size: "medium" }
   }),
-  description: chunk3LVJLFY6_js.commonInputVariants.description,
+  description: chunk2JF444FU_js.commonInputVariants.description,
   counter: utils.cva("text-nowrap font-regular", {
     variants: {
       disabled: {
@@ -1323,7 +1323,7 @@ var TextField = React.forwardRef(
   }, ref) => {
     const uniqueId = React.useId();
     const id = providedId || `text-field-${uniqueId}`;
-    return /* @__PURE__ */ jsxRuntime.jsx(TextFieldContext.Provider, { value: { variant, size, error, disabled, id, value, onChange }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: utils.cn(chunk3LVJLFY6_js.textFieldVariants.container(), className), children: children || /* @__PURE__ */ jsxRuntime.jsx(TextField.Input, { ...inputProps }) }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(TextFieldContext.Provider, { value: { variant, size, error, disabled, id, value, onChange }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: utils.cn(chunk2JF444FU_js.textFieldVariants.container(), className), children: children || /* @__PURE__ */ jsxRuntime.jsx(TextField.Input, { ...inputProps }) }) });
   }
 );
 TextField.Label = React.forwardRef(
@@ -1334,7 +1334,7 @@ TextField.Label = React.forwardRef(
       {
         ref,
         htmlFor: id,
-        className: utils.cn(chunk3LVJLFY6_js.textFieldVariants.label({ size, disabled, required }), className),
+        className: utils.cn(chunk2JF444FU_js.textFieldVariants.label({ size, disabled, required }), className),
         children
       }
     );
@@ -1353,11 +1353,11 @@ TextField.Input = React.forwardRef(
     } = useTextFieldContext();
     const state = disabled ? "disabled" : error ? "error" : "default";
     const isControlled = contextValue !== void 0;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn(chunk3LVJLFY6_js.textFieldVariants.wrapper({ variant, size, state }), className), children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn(chunk2JF444FU_js.textFieldVariants.wrapper({ variant, size, state }), className), children: [
       leftIcon && /* @__PURE__ */ jsxRuntime.jsx(
         "span",
         {
-          className: utils.cn("flex items-center justify-center", chunk3LVJLFY6_js.textFieldVariants.icon({ size })),
+          className: utils.cn("flex items-center justify-center", chunk2JF444FU_js.textFieldVariants.icon({ size })),
           children: leftIcon
         }
       ),
@@ -1368,7 +1368,7 @@ TextField.Input = React.forwardRef(
             ref,
             id,
             disabled,
-            className: utils.cn(chunk3LVJLFY6_js.textFieldVariants.input({ size, state })),
+            className: utils.cn(chunk2JF444FU_js.textFieldVariants.input({ size, state })),
             onChange: (e) => {
               contextOnChange?.(e);
             },
@@ -1376,12 +1376,12 @@ TextField.Input = React.forwardRef(
             ...isControlled ? { value: contextValue } : {}
           }
         ),
-        subText && /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils.cn(chunk3LVJLFY6_js.textFieldVariants.subText({ size, disabled })), children: subText })
+        subText && /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils.cn(chunk2JF444FU_js.textFieldVariants.subText({ size, disabled })), children: subText })
       ] }),
       rightIcon && /* @__PURE__ */ jsxRuntime.jsx(
         "span",
         {
-          className: utils.cn("flex items-center justify-center", chunk3LVJLFY6_js.textFieldVariants.icon({ size })),
+          className: utils.cn("flex items-center justify-center", chunk2JF444FU_js.textFieldVariants.icon({ size })),
           children: rightIcon
         }
       )
@@ -1395,7 +1395,7 @@ TextField.Description = React.forwardRef(
       "p",
       {
         ref,
-        className: utils.cn(chunk3LVJLFY6_js.textFieldVariants.description({ size, error, disabled }), className),
+        className: utils.cn(chunk2JF444FU_js.textFieldVariants.description({ size, error, disabled }), className),
         children
       }
     );
@@ -1514,7 +1514,7 @@ function ModalBody({
         scroll && "h-full [&_[data-slot=scroll-area-viewport]>div]:h-full"
       ),
       ...props,
-      children: scroll ? /* @__PURE__ */ jsxRuntime.jsx(chunk3LVJLFY6_js.ScrollArea, { className: "h-full flex flex-col", disableHorizontalScroll: !horizontalScroll, children: content }) : content
+      children: scroll ? /* @__PURE__ */ jsxRuntime.jsx(chunk2JF444FU_js.ScrollArea, { className: "h-full flex flex-col", disableHorizontalScroll: !horizontalScroll, children: content }) : content
     }
   );
 }
@@ -1900,7 +1900,7 @@ Sheet.Body = React.forwardRef(
         ),
         ...props,
         children: /* @__PURE__ */ jsxRuntime.jsx(
-          chunk3LVJLFY6_js.ScrollArea,
+          chunk2JF444FU_js.ScrollArea,
           {
             className: "h-full flex flex-col",
             disableHorizontalScroll,
@@ -2554,95 +2554,95 @@ var buttonize = (fn) => {
 
 Object.defineProperty(exports, "ColorPalette", {
   enumerable: true,
-  get: function () { return chunk3LVJLFY6_js.ColorPalette; }
+  get: function () { return chunk2JF444FU_js.ColorPalette; }
 });
 Object.defineProperty(exports, "ColorPaletteColors", {
   enumerable: true,
-  get: function () { return chunk3LVJLFY6_js.ColorPaletteColors; }
+  get: function () { return chunk2JF444FU_js.ColorPaletteColors; }
 });
 Object.defineProperty(exports, "Combobox", {
   enumerable: true,
-  get: function () { return chunk3LVJLFY6_js.Combobox; }
+  get: function () { return chunk2JF444FU_js.Combobox; }
 });
 Object.defineProperty(exports, "ComboboxContent", {
   enumerable: true,
-  get: function () { return chunk3LVJLFY6_js.ComboboxContent; }
+  get: function () { return chunk2JF444FU_js.ComboboxContent; }
 });
 Object.defineProperty(exports, "ComboboxDescription", {
   enumerable: true,
-  get: function () { return chunk3LVJLFY6_js.ComboboxDescription; }
+  get: function () { return chunk2JF444FU_js.ComboboxDescription; }
 });
 Object.defineProperty(exports, "ComboboxEmpty", {
   enumerable: true,
-  get: function () { return chunk3LVJLFY6_js.ComboboxEmpty; }
+  get: function () { return chunk2JF444FU_js.ComboboxEmpty; }
 });
 Object.defineProperty(exports, "ComboboxInput", {
   enumerable: true,
-  get: function () { return chunk3LVJLFY6_js.ComboboxInput; }
+  get: function () { return chunk2JF444FU_js.ComboboxInput; }
 });
 Object.defineProperty(exports, "ComboboxItem", {
   enumerable: true,
-  get: function () { return chunk3LVJLFY6_js.ComboboxItem; }
+  get: function () { return chunk2JF444FU_js.ComboboxItem; }
 });
 Object.defineProperty(exports, "ComboboxLabel", {
   enumerable: true,
-  get: function () { return chunk3LVJLFY6_js.ComboboxLabel; }
+  get: function () { return chunk2JF444FU_js.ComboboxLabel; }
 });
 Object.defineProperty(exports, "ComboboxList", {
   enumerable: true,
-  get: function () { return chunk3LVJLFY6_js.ComboboxList; }
+  get: function () { return chunk2JF444FU_js.ComboboxList; }
 });
 Object.defineProperty(exports, "ComboboxSearch", {
   enumerable: true,
-  get: function () { return chunk3LVJLFY6_js.ComboboxSearch; }
+  get: function () { return chunk2JF444FU_js.ComboboxSearch; }
 });
 Object.defineProperty(exports, "ComboboxTrigger", {
   enumerable: true,
-  get: function () { return chunk3LVJLFY6_js.ComboboxTrigger; }
+  get: function () { return chunk2JF444FU_js.ComboboxTrigger; }
 });
 Object.defineProperty(exports, "ComboboxValue", {
   enumerable: true,
-  get: function () { return chunk3LVJLFY6_js.ComboboxValue; }
+  get: function () { return chunk2JF444FU_js.ComboboxValue; }
 });
 Object.defineProperty(exports, "DEFAULT_COLOR", {
   enumerable: true,
-  get: function () { return chunk3LVJLFY6_js.DEFAULT_COLOR; }
+  get: function () { return chunk2JF444FU_js.DEFAULT_COLOR; }
 });
 Object.defineProperty(exports, "ScrollArea", {
   enumerable: true,
-  get: function () { return chunk3LVJLFY6_js.ScrollArea; }
+  get: function () { return chunk2JF444FU_js.ScrollArea; }
 });
 Object.defineProperty(exports, "ScrollBar", {
   enumerable: true,
-  get: function () { return chunk3LVJLFY6_js.ScrollBar; }
+  get: function () { return chunk2JF444FU_js.ScrollBar; }
 });
 Object.defineProperty(exports, "Segment", {
   enumerable: true,
-  get: function () { return chunk3LVJLFY6_js.Segment; }
+  get: function () { return chunk2JF444FU_js.Segment; }
 });
 Object.defineProperty(exports, "Select", {
   enumerable: true,
-  get: function () { return chunk3LVJLFY6_js.Select; }
+  get: function () { return chunk2JF444FU_js.Select; }
 });
 Object.defineProperty(exports, "Tabs", {
   enumerable: true,
-  get: function () { return chunk3LVJLFY6_js.Tabs; }
+  get: function () { return chunk2JF444FU_js.Tabs; }
 });
 Object.defineProperty(exports, "Tooltip", {
   enumerable: true,
-  get: function () { return chunk3LVJLFY6_js.Tooltip; }
+  get: function () { return chunk2JF444FU_js.Tooltip; }
 });
 Object.defineProperty(exports, "colorPaletteColorClasses", {
   enumerable: true,
-  get: function () { return chunk3LVJLFY6_js.colorPaletteColorClasses; }
+  get: function () { return chunk2JF444FU_js.colorPaletteColorClasses; }
 });
 Object.defineProperty(exports, "getColorPaletteColor", {
   enumerable: true,
-  get: function () { return chunk3LVJLFY6_js.getColorPaletteColor; }
+  get: function () { return chunk2JF444FU_js.getColorPaletteColor; }
 });
 Object.defineProperty(exports, "isInPalette", {
   enumerable: true,
-  get: function () { return chunk3LVJLFY6_js.isInPalette; }
+  get: function () { return chunk2JF444FU_js.isInPalette; }
 });
 exports.Avatar = Avatar;
 exports.Badge = Badge;

package/dist/index.mjs

@@ -1,5 +1,5 @@
-import { overlayListVariants, commonInputVariants, textFieldVariants, ScrollArea, ConditionalTooltip } from './chunk-BRB66UJW.mjs';
-export { ColorPalette, ColorPaletteColors, Combobox, ComboboxContent, ComboboxDescription, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSearch, ComboboxTrigger, ComboboxValue, DEFAULT_COLOR, ScrollArea, ScrollBar, Segment, Select, Tabs, Tooltip, colorPaletteColorClasses, getColorPaletteColor, isInPalette } from './chunk-BRB66UJW.mjs';
+import { overlayListVariants, commonInputVariants, textFieldVariants, ScrollArea, ConditionalTooltip } from './chunk-QO7JYX6Q.mjs';
+export { ColorPalette, ColorPaletteColors, Combobox, ComboboxContent, ComboboxDescription, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSearch, ComboboxTrigger, ComboboxValue, DEFAULT_COLOR, ScrollArea, ScrollBar, Segment, Select, Tabs, Tooltip, colorPaletteColorClasses, getColorPaletteColor, isInPalette } from './chunk-QO7JYX6Q.mjs';
 import { X, MoreHorizontal, iconSizes, Minus, Check, Person, Loading, Warning, Info, Error as Error$1, ChevronLeft, ChevronRight } from './chunk-DKADAZLG.mjs';
 import { cva, cn } from '@exem-ui/core/utils';
 import * as React from 'react';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exem-ui/react",
-  "version": "0.3.4-next.20261014050302",
+  "version": "0.3.4-next.20261014064943",
   "description": "Exem Design System - React Components",
   "author": "Exem Design Team",
   "license": "Apache-2.0",
@@ -87,7 +87,6 @@
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-switch": "^1.2.3",
     "@radix-ui/react-tabs": "^1.1.13",
-    "@radix-ui/react-tooltip": "^1.2.8",
     "@tanstack/react-table": "^8.21.3",
     "@tanstack/react-virtual": "^3.13.16",
     "class-variance-authority": "^0.7.1",
@@ -100,7 +99,7 @@
     "tailwind-merge": "^3.3.1",
     "tailwind-scrollbar-hide": "^4.0.0",
     "tiny-invariant": "^1.3.3",
-    "@exem-ui/core": "0.3.3-next.20261014050302"
+    "@exem-ui/core": "0.3.3-next.20261014064943"
   },
   "devDependencies": {
     "@eslint/js": "^9.15.0",
@@ -136,7 +135,7 @@
     "tsup": "^8.5.0",
     "typescript": "^5.8.2",
     "typescript-eslint": "^8.16.0",
-    "@exem-ui/tailwindcss3": "0.3.2-next.20261014050302"
+    "@exem-ui/tailwindcss3": "0.3.2-next.20261014064943"
   },
   "scripts": {
     "generate": "node scripts/generate-icons.js",