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

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

@@ -3,10 +3,11 @@ import * as React$1 from 'react';
 import React__default, { ComponentProps } from 'react';
 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'> & {
@@ -147,13 +148,11 @@ type Icon = React.ReactElement<{
     className?: string;
 }>;
 
-type SegmentSize = 'small' | 'medium' | 'large';
+type SegmentSize = 'xsmall' | 'small' | 'medium' | 'large';
 type SegmentListProps = React__default.ComponentPropsWithoutRef<typeof TabsPrimitive.List>;
 type SegmentItemProps = React__default.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & {
     /** 텍스트 왼쪽에 표시할 아이콘 요소 */
-    leftIcon?: React__default.ReactElement<{
-        className?: string;
-    }>;
+    leftIcon?: React__default.ReactElement<IconBaseProps>;
 };
 type SegmentContentProps = React__default.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>;
 type SegmentRootProps<T extends string = string> = Omit<React__default.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>, 'value' | 'defaultValue' | 'onValueChange'> & {
@@ -281,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 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 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.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 {
     /** 툴팁을 적용할 자식 요소 */
@@ -318,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입니다.
@@ -337,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-CQYzMWkr.d.ts → FlatTooltip-eHUMKbuv.d.mts}

@@ -3,10 +3,11 @@ import * as React$1 from 'react';
 import React__default, { ComponentProps } from 'react';
 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'> & {
@@ -147,13 +148,11 @@ type Icon = React.ReactElement<{
     className?: string;
 }>;
 
-type SegmentSize = 'small' | 'medium' | 'large';
+type SegmentSize = 'xsmall' | 'small' | 'medium' | 'large';
 type SegmentListProps = React__default.ComponentPropsWithoutRef<typeof TabsPrimitive.List>;
 type SegmentItemProps = React__default.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & {
     /** 텍스트 왼쪽에 표시할 아이콘 요소 */
-    leftIcon?: React__default.ReactElement<{
-        className?: string;
-    }>;
+    leftIcon?: React__default.ReactElement<IconBaseProps>;
 };
 type SegmentContentProps = React__default.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>;
 type SegmentRootProps<T extends string = string> = Omit<React__default.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>, 'value' | 'defaultValue' | 'onValueChange'> & {
@@ -281,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 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 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.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 {
     /** 툴팁을 적용할 자식 요소 */
@@ -318,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입니다.
@@ -337,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-MC4SYR5X.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" },
@@ -895,6 +894,7 @@ var segmentListVariants = utils.cva(
   {
     variants: {
       size: {
+        xsmall: "h-6 gap-0 p-0.5",
         small: "h-7 gap-0 p-0.5",
         medium: "h-8 gap-0 p-0.5",
         large: "h-10 gap-0 p-0.5"
@@ -911,12 +911,14 @@ var segmentItemVariants = utils.cva(
     "focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-ring",
     "disabled:cursor-not-allowed",
     "data-[state=active]:bg-component-segmentedOption data-[state=active]:text-text-primary data-[state=active]:shadow-weak",
+    "[&[data-state=active]>svg]:text-icon-secondary",
     "data-[state=inactive]:text-text-tertiary data-[state=inactive]:disabled:text-text-disabled",
     "transition-colors duration-200 ease-in-out"
   ],
   {
     variants: {
       size: {
+        xsmall: "h-5 gap-0.5 text-caption font-medium",
         small: "h-6 gap-0.5 text-body-3 font-medium",
         medium: "h-7 gap-1 text-body-2 font-medium",
         large: "h-9 gap-1.5 text-body-2 font-medium"
@@ -927,18 +929,12 @@ var segmentItemVariants = utils.cva(
     }
   }
 );
-var segmentIconVariants = utils.cva("flex items-center justify-center", {
-  variants: {
-    size: {
-      small: "size-4",
-      medium: "size-4",
-      large: "size-5"
-    }
-  },
-  defaultVariants: {
-    size: "medium"
-  }
-});
+var segmentIconSizeMap = {
+  xsmall: chunk6NFYQZSK_js.iconSizes.xs,
+  small: chunk6NFYQZSK_js.iconSizes.sm,
+  medium: chunk6NFYQZSK_js.iconSizes.sm,
+  large: chunk6NFYQZSK_js.iconSizes.md
+};
 var SegmentContext = React.createContext(void 0);
 var useSegmentContext = () => {
   const context = React.useContext(SegmentContext);
@@ -973,7 +969,7 @@ Segment.Item = React.forwardRef(
         className: utils.cn(segmentItemVariants({ size }), className),
         ...props,
         children: [
-          leftIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils.cn(segmentIconVariants({ size })), children: leftIcon }),
+          leftIcon && React.cloneElement(leftIcon, { size: segmentIconSizeMap[size] }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex items-center", children })
         ]
       }
@@ -1396,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;
 }