@exem-ui/react 0.3.2 → 0.3.3

package/dist/chunk-WSRLUKC4.mjs

@@ -0,0 +1,684 @@
+import { ChevronDown } from './chunk-LZWKMQJL.mjs';
+import { cva, cn } from '@exem-ui/core/utils';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import * as React from 'react';
+import { createContext, forwardRef, useId, useContext, createElement, useRef, useState } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+
+var segmentListVariants = cva(
+  "inline-flex items-center overflow-hidden rounded-medium bg-elevation-elevation-2",
+  {
+    variants: {
+      size: {
+        small: "h-7 gap-0 p-0.5",
+        medium: "h-8 gap-0 p-0.5",
+        large: "h-10 gap-0 p-0.5"
+      }
+    },
+    defaultVariants: {
+      size: "medium"
+    }
+  }
+);
+var segmentItemVariants = cva(
+  [
+    "flex flex-1 items-center justify-center rounded-weak",
+    "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=inactive]:text-text-tertiary data-[state=inactive]:disabled:text-text-disabled",
+    "transition-colors duration-200 ease-in-out"
+  ],
+  {
+    variants: {
+      size: {
+        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"
+      }
+    },
+    defaultVariants: {
+      size: "medium"
+    }
+  }
+);
+var segmentIconVariants = cva("flex items-center justify-center", {
+  variants: {
+    size: {
+      small: "size-4",
+      medium: "size-4",
+      large: "size-5"
+    }
+  },
+  defaultVariants: {
+    size: "medium"
+  }
+});
+var SegmentContext = createContext(void 0);
+var useSegmentContext = () => {
+  const context = useContext(SegmentContext);
+  if (!context) {
+    throw new Error("Segment components must be used within a Segment");
+  }
+  return context;
+};
+var Segment = forwardRef(
+  ({ size = "medium", children, ...props }, ref) => /* @__PURE__ */ jsx(SegmentContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx(TabsPrimitive.Root, { ref, ...props, children }) })
+);
+Segment.List = forwardRef(
+  ({ className, ...props }, ref) => {
+    const { size } = useSegmentContext();
+    return /* @__PURE__ */ jsx(
+      TabsPrimitive.List,
+      {
+        ref,
+        className: cn(segmentListVariants({ size }), className),
+        ...props
+      }
+    );
+  }
+);
+Segment.Item = forwardRef(
+  ({ className, leftIcon, children, ...props }, ref) => {
+    const { size } = useSegmentContext();
+    return /* @__PURE__ */ jsxs(
+      TabsPrimitive.Trigger,
+      {
+        ref,
+        className: cn(segmentItemVariants({ size }), className),
+        ...props,
+        children: [
+          leftIcon && /* @__PURE__ */ jsx("span", { className: cn(segmentIconVariants({ size })), children: leftIcon }),
+          /* @__PURE__ */ jsx("span", { className: "flex items-center", children })
+        ]
+      }
+    );
+  }
+);
+Segment.Content = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    TabsPrimitive.Content,
+    {
+      ref,
+      className: cn(
+        "ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Segment.displayName = "Segment";
+Segment.List.displayName = "Segment.List";
+Segment.Content.displayName = "Segment.Content";
+Segment.Item.displayName = "Segment.Item";
+var FlatSegment = ({ items, disabled, className, ...props }) => /* @__PURE__ */ jsx(Segment, { ...props, children: /* @__PURE__ */ jsx(Segment.List, { className, children: items.map((item) => /* @__PURE__ */ createElement(Segment.Item, { ...item, key: item.value, disabled: disabled || item.disabled })) }) });
+FlatSegment.displayName = "FlatSegment";
+var commonInputVariants = {
+  // Container variants - 전체 컴포넌트 래퍼
+  container: cva("flex flex-col"),
+  // Label variants - 라벨 텍스트
+  label: cva("inline-block font-regular text-text-primary", {
+    variants: {
+      size: {
+        xsmall: "mb-[2px] text-body-3",
+        small: "mb-[4px] text-body-2",
+        medium: "mb-[4px] text-body-2",
+        large: "mb-[6px] text-body-1"
+      },
+      disabled: {
+        true: "text-text-disabled"
+      },
+      required: {
+        true: 'after:ml-0.5 after:text-text-critical after:content-["*"]'
+      }
+    },
+    compoundVariants: [
+      {
+        required: true,
+        disabled: true,
+        className: "after:text-text-disabled"
+      }
+    ],
+    defaultVariants: { size: "medium" }
+  }),
+  // Description variants - 설명 텍스트
+  description: cva("mt-0.5 inline-block text-text-tertiary", {
+    variants: {
+      size: {
+        xsmall: "text-caption",
+        small: "text-body-3",
+        medium: "text-body-3",
+        large: "text-body-2"
+      },
+      error: {
+        true: "text-text-critical"
+      },
+      disabled: {
+        true: "text-text-disabled"
+      }
+    },
+    compoundVariants: [
+      {
+        error: true,
+        disabled: true,
+        className: "text-text-disabled"
+        // disabled 우선 적용
+      }
+    ],
+    defaultVariants: { size: "medium" }
+  }),
+  // Icon variants - 아이콘 크기
+  icon: cva("shrink-0", {
+    variants: {
+      size: {
+        xsmall: "size-4",
+        small: "size-4",
+        medium: "size-4",
+        large: "size-5"
+      }
+    },
+    defaultVariants: { size: "medium" }
+  })
+};
+
+// src/input/selectVariants.ts
+var selectVariants = {
+  container: commonInputVariants.container,
+  content: cn(
+    "relative border border-border-primary z-50 min-w-[8rem] overflow-hidden rounded-medium bg-background-overlay shadow-weak",
+    "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+    "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1"
+  ),
+  description: commonInputVariants.description,
+  iconSize: commonInputVariants.icon,
+  item: cva(
+    "relative flex w-full cursor-pointer select-none items-center rounded-weak px-2 text-body-2 text-text-primary outline-none hover:bg-elevation-elevation-2 data-[disabled]:pointer-events-none data-[state=checked]:bg-elevation-accent data-[disabled]:text-text-disabled",
+    {
+      defaultVariants: { size: "medium" },
+      variants: {
+        size: {
+          xsmall: "h-6",
+          small: "h-7",
+          medium: "h-8",
+          large: "h-10"
+        }
+      }
+    }
+  ),
+  itemText: cva("truncate flex items-center flex-1 min-w-0", {
+    defaultVariants: { size: "medium" },
+    variants: {
+      size: {
+        xsmall: "h-6",
+        small: "h-7",
+        medium: "h-8",
+        large: "h-10"
+      }
+    }
+  }),
+  label: commonInputVariants.label,
+  trigger: cva(
+    "group flex w-full items-center justify-between rounded-medium outline-none disabled:cursor-not-allowed disabled:bg-elevation-elevation-2 disabled:text-text-disabled data-[state=open]:border data-[state=open]:border-border-focused [&>span]:line-clamp-1 [&[data-placeholder]]:text-text-tertiary [&_svg]:text-icon-primary",
+    {
+      compoundVariants: [
+        {
+          className: "border-border-accent text-tint-foreground-sky bg-elevation-accent [&[data-placeholder]]:text-tint-foreground-sky [&_svg]:text-tint-foreground-sky",
+          focus: true,
+          variant: "line"
+        },
+        // active + fill: 배경만 accent로 변경
+        {
+          className: "bg-elevation-accent text-tint-foreground-sky [&[data-placeholder]]:text-tint-foreground-sky [&_svg]:text-tint-foreground-sky",
+          active: true,
+          variant: "fill"
+        },
+        // active + line: 배경 accent + 테두리 accent
+        {
+          className: "bg-elevation-accent border-border-accent text-tint-foreground-sky [&[data-placeholder]]:text-tint-foreground-sky [&_svg]:text-tint-foreground-sky",
+          active: true,
+          variant: "line"
+        }
+      ],
+      defaultVariants: {
+        active: false,
+        error: false,
+        focus: false,
+        size: "medium",
+        variant: "fill"
+      },
+      variants: {
+        active: {
+          false: "",
+          true: ""
+        },
+        error: {
+          false: "",
+          true: "border !border-border-critical"
+        },
+        focus: {
+          false: "",
+          // 현재는 line 타입만 focus 가능
+          true: ""
+        },
+        size: {
+          xsmall: "h-6 px-[4px] text-body-3",
+          small: "h-7 px-[6px] text-body-2",
+          medium: "h-8 px-[8px] text-body-2",
+          large: "h-10 px-[10px] text-body-1"
+        },
+        variant: {
+          fill: "bg-elevation-elevation-2",
+          line: "border-border-primary border"
+        }
+      }
+    }
+  ),
+  triggerInner: cva("flex w-full items-center", {
+    defaultVariants: { size: "medium" },
+    variants: {
+      size: {
+        xsmall: "gap-0",
+        small: "gap-[2px]",
+        medium: "gap-[2px]",
+        large: "gap-[4px]"
+      }
+    }
+  }),
+  viewport: cn("flex flex-col gap-0.5 p-1")
+};
+var SelectContext = createContext(null);
+var useSelectContext = () => {
+  const context = useContext(SelectContext);
+  if (!context) {
+    throw new Error("Select components must be used within a Select");
+  }
+  return context;
+};
+var SelectGroupContext = createContext(null);
+var useSelectGroupContext = () => {
+  return useContext(SelectGroupContext);
+};
+var Select = forwardRef(
+  ({
+    children,
+    size = "medium",
+    variant = "fill",
+    error = false,
+    disabled = false,
+    focus = false,
+    active = false,
+    className,
+    ...selectProps
+  }, ref) => {
+    const uniqueId = useId();
+    const id = `select-${uniqueId}`;
+    return /* @__PURE__ */ jsx(SelectContext.Provider, { value: { active, disabled, error, focus, id, size, variant }, children: /* @__PURE__ */ jsx("div", { ref, className: cn(selectVariants.container(), className), children: /* @__PURE__ */ jsx(SelectPrimitive.Root, { disabled, ...selectProps, children }) }) });
+  }
+);
+Select.Value = forwardRef(({ className, children, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(SelectPrimitive.Value, { ref, className, ...props, children });
+});
+Select.Trigger = forwardRef(
+  ({ className, children, leftIcon, ...props }, ref) => {
+    const { size, error, id, variant, focus, active } = useSelectContext();
+    const groupContext = useSelectGroupContext();
+    const groupClasses = groupContext ? cn("rounded-none border-0", {
+      "rounded-l-medium": groupContext.isFirstChild,
+      "rounded-r-medium": groupContext.isLastChild,
+      // line variant: group이 외곽 border를 제공하므로, open 시 border 대신 inset ring 사용
+      "data-[state=open]:border-0 data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-border-focused": variant === "line"
+    }) : void 0;
+    return /* @__PURE__ */ jsx(
+      SelectPrimitive.Trigger,
+      {
+        ref,
+        id,
+        "data-slot": "select-trigger",
+        className: cn(
+          selectVariants.trigger({ active, error, focus, size, variant }),
+          groupClasses,
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsxs("div", { className: cn(selectVariants.triggerInner({ size })), children: [
+          leftIcon && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                selectVariants.iconSize({ size }),
+                "flex items-center justify-center group-disabled:text-icon-disabled"
+              ),
+              children: leftIcon
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 truncate text-left", children }),
+          /* @__PURE__ */ jsx(
+            ChevronDown,
+            {
+              type: "regular",
+              className: cn(
+                selectVariants.iconSize({ size }),
+                "transition-transform duration-200 group-data-[state=open]:rotate-180",
+                "group-disabled:text-icon-disabled"
+              )
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+Select.Box = forwardRef(
+  ({ placeholder, leftIcon, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Select.Trigger, { ref, leftIcon, className, ...props, children: /* @__PURE__ */ jsx(Select.Value, { placeholder }) });
+  }
+);
+Select.List = forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    SelectPrimitive.Content,
+    {
+      ref,
+      "data-slot": "select-content",
+      className: cn(selectVariants.content, "max-h-60 ", className),
+      position: "popper",
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        SelectPrimitive.Viewport,
+        {
+          "data-slot": "select-viewport",
+          className: cn(
+            selectVariants.viewport,
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+          ),
+          children
+        }
+      )
+    }
+  ) })
+);
+Select.Label = forwardRef(
+  ({ children, required = false, size: sizeProp, className }, ref) => {
+    const { size: contextSize, disabled, id } = useSelectContext();
+    const groupContext = useSelectGroupContext();
+    const size = sizeProp ?? groupContext?.size ?? contextSize;
+    return /* @__PURE__ */ jsx(
+      "label",
+      {
+        ref,
+        htmlFor: id,
+        className: cn(selectVariants.label({ disabled, required, size }), className),
+        children
+      }
+    );
+  }
+);
+Select.Item = forwardRef(
+  ({
+    className,
+    children,
+    leftIcon,
+    rightIcon,
+    leftIconSize,
+    rightIconSize,
+    size: sizeProp,
+    ...props
+  }, ref) => {
+    const { size: contextSize } = useSelectContext();
+    const groupContext = useSelectGroupContext();
+    const size = sizeProp ?? groupContext?.size ?? contextSize;
+    return /* @__PURE__ */ jsx(
+      SelectPrimitive.Item,
+      {
+        "data-slot": "select-item",
+        ref,
+        className: cn(selectVariants.item({ size }), className),
+        ...props,
+        children: /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-0.5", children: [
+            leftIcon && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  selectVariants.iconSize({ size: leftIconSize ?? size }),
+                  "flex items-center justify-center text-icon-primary"
+                ),
+                children: leftIcon
+              }
+            ),
+            /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: cn(selectVariants.itemText({ size })), children }) })
+          ] }),
+          rightIcon && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                selectVariants.iconSize({ size: rightIconSize ?? size }),
+                "flex items-center justify-center text-icon-primary"
+              ),
+              children: rightIcon
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+Select.Empty = forwardRef(
+  ({ children = "No data", className }, ref) => {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("flex min-h-8 items-center justify-center p-2", className), children: /* @__PURE__ */ jsx("p", { className: "text-body-2 text-text-disabled", children }) });
+  }
+);
+Select.Description = forwardRef(
+  ({ children, size: sizeProp, className }, ref) => {
+    const { size: contextSize, error, disabled } = useSelectContext();
+    const groupContext = useSelectGroupContext();
+    const size = sizeProp ?? groupContext?.size ?? contextSize;
+    if (!children) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-slot": "select-description",
+        className: cn(selectVariants.description({ disabled, error, size }), className),
+        children: /* @__PURE__ */ jsx("p", { children })
+      }
+    );
+  }
+);
+Select.Group = forwardRef(
+  ({ children, size = "medium", variant = "fill", hasBackground = false, className }, ref) => {
+    const childArray = React.Children.toArray(children);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex w-fit flex-row items-stretch overflow-clip rounded-medium",
+          variant === "line" && "border border-border-primary",
+          hasBackground && "bg-elevation-elevation-0",
+          className
+        ),
+        children: childArray.map((child, index) => {
+          const isFirst = index === 0;
+          const isLast = index === childArray.length - 1;
+          return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              SelectGroupContext.Provider,
+              {
+                value: { isFirstChild: isFirst, isLastChild: isLast, size, variant },
+                children: child
+              }
+            ),
+            !isLast && /* @__PURE__ */ jsx("div", { className: "w-px self-stretch bg-border-primary" })
+          ] }, index);
+        })
+      }
+    );
+  }
+);
+Select.displayName = "Select";
+Select.Label.displayName = "Select.Label";
+Select.Trigger.displayName = "Select.Trigger";
+Select.Box.displayName = "Select.Box";
+Select.Value.displayName = "Select.Value";
+Select.List.displayName = "Select.List";
+Select.Item.displayName = "Select.Item";
+Select.Empty.displayName = "Select.Empty";
+Select.Description.displayName = "Select.Description";
+Select.Group.displayName = "Select.Group";
+function FlatSelect({
+  options,
+  placeholder,
+  onBlur,
+  onFocus,
+  onOpenChange,
+  label,
+  description,
+  required,
+  listClassName,
+  leftIcon,
+  ...props
+}) {
+  const { className, ...selectProps } = props;
+  const selectRef = useRef(null);
+  const { handleBlur, handleFocus } = useFocusWithin(selectRef, {
+    onBlur,
+    onFocus
+  });
+  const handleOpenChange = (open) => {
+    if (open) {
+      handleFocus();
+    }
+    onOpenChange?.(open);
+  };
+  return /* @__PURE__ */ jsx("div", { ref: selectRef, className, children: /* @__PURE__ */ jsxs(Select, { ...selectProps, onOpenChange: handleOpenChange, children: [
+    label && /* @__PURE__ */ jsx(Select.Label, { required, children: label }),
+    /* @__PURE__ */ jsx(Select.Trigger, { onBlur: handleBlur, onFocus: handleFocus, leftIcon, children: /* @__PURE__ */ jsx(Select.Value, { placeholder, className: "truncate" }) }),
+    description && /* @__PURE__ */ jsx(Select.Description, { children: description }),
+    /* @__PURE__ */ jsxs(Select.List, { className: listClassName, children: [
+      options.length === 0 && /* @__PURE__ */ jsx(Select.Empty, { children: placeholder }),
+      options.map((option) => /* @__PURE__ */ jsxs(
+        Select.Item,
+        {
+          value: option.value,
+          disabled: option.disabled,
+          className: "flex max-w-full items-center justify-between",
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "block flex-1 truncate", children: option.label }),
+            option.rightSlot
+          ]
+        },
+        option.value
+      ))
+    ] })
+  ] }) });
+}
+function useFocusWithin(containerRef, callbacks) {
+  const [isFocused, setIsFocused] = useState(false);
+  const handleBlur = (event) => {
+    if (containerRef.current?.contains(event.relatedTarget)) {
+      return;
+    }
+    setIsFocused(false);
+    callbacks?.onBlur?.();
+  };
+  const handleFocus = () => {
+    if (isFocused) {
+      return;
+    }
+    setIsFocused(true);
+    callbacks?.onFocus?.();
+  };
+  return { handleBlur, handleFocus, isFocused };
+}
+FlatSelect.displayName = "FlatSelect";
+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
+  }
+) }));
+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 }),
+    /* @__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 });
+  }
+  return children;
+}
+FlatTooltip.displayName = "FlatTooltip";
+ConditionalTooltip.displayName = "ConditionalTooltip";
+
+export { ConditionalTooltip, FlatSegment, FlatSelect, FlatTooltip, Segment, Select, Tooltip, commonInputVariants };
+//# sourceMappingURL=chunk-WSRLUKC4.mjs.map
+//# sourceMappingURL=chunk-WSRLUKC4.mjs.map