@exem-ui/react 0.3.4-next.20260727012122 → 0.3.4-next.20260728024650

package/dist/{chunk-NZR3A6CI.mjs → chunk-G65KBUWQ.mjs}

@@ -1,12 +1,13 @@
-import { ChevronDown, Check } from './chunk-GWP7YKJP.mjs';
+import { ChevronDown, Search, Check } from './chunk-GWP7YKJP.mjs';
 import { cva, cn } from '@exem-ui/core/utils';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import * as TabsPrimitive2 from '@radix-ui/react-tabs';
+import { Combobox as Combobox$1 } from '@base-ui/react/combobox';
 import * as React from 'react';
 import { createContext, forwardRef, useId, useContext, createElement, useRef, useState } from 'react';
-import * as SelectPrimitive from '@radix-ui/react-select';
 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';
 
 var colorPaletteColorClasses = {
@@ -121,166 +122,6 @@ function FlatColorPalette({
   return /* @__PURE__ */ jsx(ColorPalette, { ...rootProps, children: palette.map((color) => /* @__PURE__ */ jsx(ColorPalette.Swatch, { color }, color)) });
 }
 FlatColorPalette.displayName = "FlatColorPalette";
-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(TabsPrimitive2.Root, { ref, ...props, children }) })
-);
-Segment.List = forwardRef(
-  ({ className, ...props }, ref) => {
-    const { size } = useSegmentContext();
-    return /* @__PURE__ */ jsx(
-      TabsPrimitive2.List,
-      {
-        ref,
-        className: cn(segmentListVariants({ size }), className),
-        ...props
-      }
-    );
-  }
-);
-Segment.Item = forwardRef(
-  ({ className, leftIcon, children, ...props }, ref) => {
-    const { size } = useSegmentContext();
-    return /* @__PURE__ */ jsxs(
-      TabsPrimitive2.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(
-    TabsPrimitive2.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";
-function FlatSegment({
-  items,
-  disabled,
-  className,
-  ...props
-}) {
-  const rootProps = props;
-  return /* @__PURE__ */ jsx(Segment, { ...rootProps, 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 overlayListVariants = {
-  content: cn(
-    "relative z-50 min-w-[8rem] overflow-hidden rounded-medium border border-border-primary 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"
-  ),
-  viewport: cn("flex flex-col gap-0.5 p-1"),
-  item: cva(
-    "relative flex w-full gap-0.5 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-[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"
-      }
-    }
-  }),
-  slotSize: cva("shrink-0 flex items-center justify-center text-icon-primary", {
-    defaultVariants: { size: "medium" },
-    variants: {
-      size: {
-        xsmall: "size-4",
-        small: "size-4",
-        medium: "size-4",
-        large: "size-5"
-      }
-    }
-  })
-};
 function ScrollBar({
   className,
   orientation = "vertical",
@@ -351,6 +192,49 @@ function ScrollArea({
     }
   );
 }
+var overlayListVariants = {
+  content: cn(
+    "relative z-50 min-w-[8rem] overflow-hidden rounded-medium border border-border-primary 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"
+  ),
+  viewport: cn("flex flex-col gap-0.5 p-1"),
+  item: cva(
+    "relative flex w-full gap-0.5 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-[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"
+      }
+    }
+  }),
+  slotSize: cva("shrink-0 flex items-center justify-center text-icon-primary", {
+    defaultVariants: { size: "medium" },
+    variants: {
+      size: {
+        xsmall: "size-4",
+        small: "size-4",
+        medium: "size-4",
+        large: "size-5"
+      }
+    }
+  })
+};
 var commonInputVariants = {
   // Container variants - 전체 컴포넌트 래퍼
   container: cva("flex flex-col"),
@@ -510,6 +394,593 @@ var selectVariants = {
   }),
   viewport: overlayListVariants.viewport
 };
+var textFieldVariants = {
+  container: commonInputVariants.container,
+  label: commonInputVariants.label,
+  wrapper: cva(
+    "flex w-full flex-row items-center rounded-medium border transition-colors focus-within:border-border-focused focus-within:outline-none",
+    {
+      variants: {
+        variant: {
+          fill: "border-transparent bg-elevation-elevation-2",
+          line: "border-border-primary",
+          lineBackground: "border-border-primary bg-background-primary"
+        },
+        size: {
+          xsmall: "h-6 gap-0 px-1",
+          small: "h-7 gap-0.5 px-1.5",
+          medium: "h-8 gap-0.5 px-2",
+          large: "h-10 gap-1 px-2.5"
+        },
+        state: {
+          default: "text-text-primary",
+          error: "text-text-primary",
+          disabled: "cursor-not-allowed text-text-disabled"
+        }
+      },
+      compoundVariants: [
+        { variant: "fill", state: "error", class: "border-border-critical" },
+        {
+          variant: "fill",
+          state: "disabled",
+          class: "bg-elevation-elevation-2 border-transparent"
+        },
+        { variant: "line", state: "error", class: "border-border-critical" },
+        { variant: "line", state: "disabled", class: "border-border-primary" },
+        { variant: "lineBackground", state: "error", class: "border-border-critical" },
+        { variant: "lineBackground", state: "disabled", class: "border-border-primary" }
+      ],
+      defaultVariants: { variant: "fill", size: "medium", state: "default" }
+    }
+  ),
+  input: cva(
+    "w-full border-none bg-transparent p-0 focus:outline-none focus:ring-0 disabled:cursor-not-allowed",
+    {
+      variants: {
+        size: {
+          xsmall: "text-body-3 placeholder:text-body-3",
+          small: "text-body-2 placeholder:text-body-2",
+          medium: "text-body-2 placeholder:text-body-2",
+          large: "text-body-1 placeholder:text-body-1"
+        },
+        state: {
+          default: "text-text-primary placeholder:text-text-tertiary",
+          error: "text-text-primary placeholder:text-text-tertiary",
+          disabled: "text-text-disabled placeholder:text-text-disabled"
+        }
+      },
+      defaultVariants: { size: "medium", state: "default" }
+    }
+  ),
+  description: cva("mt-0.5 font-regular 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",
+        false: ""
+      },
+      disabled: {
+        true: "text-text-disabled",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      {
+        disabled: true,
+        error: true,
+        class: "text-text-disabled"
+        // disabled가 error보다 우선
+      }
+    ],
+    defaultVariants: { size: "medium", error: false, disabled: false }
+  }),
+  subText: cva("ml-1 shrink-0 font-regular", {
+    variants: {
+      size: {
+        xsmall: "text-body-3",
+        small: "text-body-2",
+        medium: "text-body-2",
+        large: "text-body-1"
+      },
+      disabled: {
+        true: "text-text-disabled",
+        false: "text-text-tertiary"
+      }
+    },
+    defaultVariants: { size: "medium", disabled: false }
+  }),
+  icon: cva("shrink-0 text-icon-tertiary", {
+    variants: {
+      size: {
+        xsmall: "size-4",
+        small: "size-4",
+        medium: "size-4",
+        large: "size-5"
+      }
+    },
+    defaultVariants: { size: "medium" }
+  })
+};
+
+// src/combobox/comboboxVariants.ts
+var comboboxVariants = {
+  container: selectVariants.container,
+  description: selectVariants.description,
+  iconSize: overlayListVariants.slotSize,
+  label: selectVariants.label,
+  // 단독(anchored) 입력형 - Select 트리거와 같은 fill 박스 형태
+  input: cva(
+    "w-full rounded-medium bg-elevation-elevation-2 text-text-primary outline-none placeholder:text-text-tertiary focus:ring-1 focus:ring-inset focus:ring-border-focused disabled:cursor-not-allowed disabled:bg-elevation-elevation-2 disabled:text-text-disabled",
+    {
+      defaultVariants: { size: "medium" },
+      variants: {
+        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"
+        }
+      }
+    }
+  ),
+  item: (props) => cn(
+    overlayListVariants.item(props),
+    // group/option: 표시 전용 체크박스가 아이템의 data-selected 상태를 CSS로 읽기 위함
+    "group/option data-[highlighted]:bg-elevation-elevation-2 data-[selected]:bg-elevation-accent-0"
+  ),
+  // 다중 선택 아이템의 표시 전용 체크박스 (Figma: 16px, gap 6px — item gap 2px + mr 4px)
+  // 시각은 Checkbox 컴포넌트의 상태 토큰과 동일하게 유지한다
+  itemCheckbox: cn(
+    "mr-1 flex size-4 shrink-0 items-center justify-center rounded-weak border border-border-secondary bg-background-primary transition-colors duration-200",
+    "group-data-[selected]/option:border-transparent group-data-[selected]/option:bg-solid-accent-default",
+    "group-data-[disabled]/option:bg-elevation-elevation-3"
+  ),
+  list: cn(overlayListVariants.viewport, "p-0 empty:hidden"),
+  // Positioner는 transform으로 자체 스타킹 컨텍스트를 만들므로 z-index를 여기(루트 레벨)에 줘야
+  // Modal/Sheet(z-50) 위에 팝업이 올라온다. popup의 z-50은 컨텍스트 내부라 루트에선 무효.
+  // pointer-events-auto: radix modal이 body에 pointer-events:none을 걸어도 팝업 클릭이 동작하도록.
+  // TODO(#305): radix 제거(Base UI 이관) 시 pointer-events-auto는 불필요 (z-50은 유지)
+  positioner: "z-50 pointer-events-auto",
+  popup: cn(
+    "relative z-50 flex max-h-[var(--available-height)] w-[var(--anchor-width)] min-w-[8rem] max-w-[var(--available-width)] origin-[var(--transform-origin)] flex-col gap-0.5 overflow-hidden rounded-medium border border-border-primary bg-background-overlay p-1 shadow-weak",
+    "transition-[transform,scale,opacity] duration-150 data-[ending-style]:scale-95 data-[ending-style]:opacity-0 data-[starting-style]:scale-95 data-[starting-style]:opacity-0"
+  ),
+  // 팝업 상단 검색바 - TextField(fill)와 동일한 디자인
+  searchIcon: textFieldVariants.icon,
+  searchInput: textFieldVariants.input,
+  searchWrapper: textFieldVariants.wrapper,
+  trigger: (props) => cn(
+    // selectVariants.trigger의 radix용 data-[state=open] 클래스는 Base UI에서 매칭되지 않는
+    // dead class로 남는다(무해). 아래는 동일한 open 스타일의 Base UI attribute 버전.
+    selectVariants.trigger(props),
+    "data-[popup-open]:border data-[popup-open]:border-border-focused"
+  )
+};
+var ComboboxContext = createContext(null);
+var useComboboxContext = () => useContext(ComboboxContext);
+function ComboboxRoot({
+  size = "medium",
+  error = false,
+  disabled = false,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(ComboboxContext.Provider, { value: { disabled, error, multiple: Boolean(props.multiple), size }, children: /* @__PURE__ */ jsx("div", { className: cn(comboboxVariants.container(), className), children: /* @__PURE__ */ jsx(Combobox$1.Root, { disabled, ...props }) }) });
+}
+function ComboboxLabel({
+  className,
+  size: sizeProp,
+  required = false,
+  ...props
+}) {
+  const context = useComboboxContext();
+  const size = sizeProp ?? context?.size;
+  const disabled = context?.disabled ?? false;
+  return /* @__PURE__ */ jsx(
+    Combobox$1.Label,
+    {
+      "data-slot": "combobox-label",
+      className: cn(comboboxVariants.label({ disabled, required, size }), className),
+      ...props
+    }
+  );
+}
+function ComboboxDescription({ children, size: sizeProp, className }) {
+  const context = useComboboxContext();
+  const size = sizeProp ?? context?.size;
+  if (!children) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "combobox-description",
+      className: cn(
+        comboboxVariants.description({
+          disabled: context?.disabled ?? false,
+          error: context?.error ?? false,
+          size
+        }),
+        className
+      ),
+      children: /* @__PURE__ */ jsx("p", { children })
+    }
+  );
+}
+function ComboboxValue(props) {
+  return /* @__PURE__ */ jsx(Combobox$1.Value, { "data-slot": "combobox-value", ...props });
+}
+function ComboboxTrigger({
+  className,
+  children,
+  size: sizeProp,
+  variant = "fill",
+  error: errorProp,
+  ...props
+}) {
+  const context = useComboboxContext();
+  const size = sizeProp ?? context?.size ?? "medium";
+  const error = errorProp ?? context?.error ?? false;
+  return /* @__PURE__ */ jsxs(
+    Combobox$1.Trigger,
+    {
+      "data-slot": "combobox-trigger",
+      className: cn(comboboxVariants.trigger({ error, size, variant }), className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 truncate text-left", children }),
+        /* @__PURE__ */ jsx(
+          ChevronDown,
+          {
+            type: "regular",
+            className: cn(
+              comboboxVariants.iconSize({ size }),
+              "transition-transform duration-200 group-data-[popup-open]:rotate-180 group-disabled:text-icon-disabled"
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function ComboboxInput({ className, size: sizeProp, ...props }) {
+  const context = useComboboxContext();
+  const size = sizeProp ?? context?.size ?? "medium";
+  return /* @__PURE__ */ jsx(
+    Combobox$1.Input,
+    {
+      "data-slot": "combobox-input",
+      className: cn(comboboxVariants.input({ size }), className),
+      ...props
+    }
+  );
+}
+function ComboboxSearch({ className, size: sizeProp, ...props }) {
+  const context = useComboboxContext();
+  const size = sizeProp ?? context?.size ?? "medium";
+  return (
+    // Figma Select List 스펙: 팝업 p-1(4px) 안에 Search 래퍼 p-1이 중첩되어 검색바 인셋은 8px
+    /* @__PURE__ */ jsx("div", { "data-slot": "combobox-search", className: "w-full shrink-0 p-1", children: /* @__PURE__ */ jsxs("div", { className: cn(comboboxVariants.searchWrapper({ size, variant: "fill" }), className), children: [
+      /* @__PURE__ */ jsx(
+        Search,
+        {
+          type: "regular",
+          className: cn("flex items-center justify-center", comboboxVariants.searchIcon({ size }))
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Combobox$1.Input,
+        {
+          "data-slot": "combobox-search-input",
+          className: cn("px-0.5", comboboxVariants.searchInput({ size })),
+          ...props
+        }
+      )
+    ] }) })
+  );
+}
+function ComboboxContent({
+  className,
+  children,
+  sideOffset = 4,
+  align = "start",
+  side,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Combobox$1.Portal, { children: /* @__PURE__ */ jsx(
+    Combobox$1.Positioner,
+    {
+      className: comboboxVariants.positioner,
+      align,
+      side,
+      sideOffset,
+      children: /* @__PURE__ */ jsx(
+        Combobox$1.Popup,
+        {
+          "data-slot": "combobox-content",
+          className: cn(comboboxVariants.popup, className),
+          ...props,
+          children
+        }
+      )
+    }
+  ) });
+}
+function ComboboxList({ className, ...props }) {
+  return (
+    // min-h-0: 팝업(max-h: --available-height)이 좁을 때 flex 자식인 ScrollArea가 줄어들도록
+    /* @__PURE__ */ jsx(
+      ScrollArea,
+      {
+        className: "min-h-0 max-h-60 [&_[data-slot=scroll-area-viewport]]:max-h-[inherit]",
+        disableHorizontalScroll: true,
+        children: /* @__PURE__ */ jsx(
+          Combobox$1.List,
+          {
+            "data-slot": "combobox-list",
+            className: cn(comboboxVariants.list, className),
+            ...props
+          }
+        )
+      }
+    )
+  );
+}
+function ComboboxItem({
+  className,
+  children,
+  size: sizeProp,
+  checkbox,
+  leftIcon,
+  rightIcon,
+  rightSlot,
+  ...props
+}) {
+  const context = useComboboxContext();
+  const size = sizeProp ?? context?.size ?? "medium";
+  const showCheckbox = checkbox ?? context?.multiple ?? false;
+  return /* @__PURE__ */ jsxs(
+    Combobox$1.Item,
+    {
+      "data-slot": "combobox-item",
+      className: cn(comboboxVariants.item({ size }), className),
+      ...props,
+      children: [
+        showCheckbox && // 표시 전용 체크박스 — 선택 상태는 아이템의 data-selected가 CSS로 구동 (Figma 14009-5969)
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: comboboxVariants.itemCheckbox, children: /* @__PURE__ */ jsx(
+          Check,
+          {
+            type: "regular",
+            className: "hidden size-4 text-icon-static-light group-data-[selected]/option:block"
+          }
+        ) }),
+        leftIcon && /* @__PURE__ */ jsx("div", { className: comboboxVariants.iconSize({ size }), children: leftIcon }),
+        /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-1 overflow-hidden", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "min-w-0 flex-1 truncate",
+              title: typeof children === "string" ? children : void 0,
+              children
+            }
+          ),
+          rightSlot && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: rightSlot })
+        ] }),
+        rightIcon && /* @__PURE__ */ jsx("div", { className: comboboxVariants.iconSize({ size }), children: rightIcon })
+      ]
+    }
+  );
+}
+function ComboboxEmpty({ className, children = "No data", ...props }) {
+  return /* @__PURE__ */ jsx(
+    Combobox$1.Empty,
+    {
+      "data-slot": "combobox-empty",
+      className: cn(
+        // Base UI Empty는 live region이라 display:none으로 숨기면 안 됨 → 결과가 있을 땐 크기만 0으로 수축
+        // Figma 스펙: empty 팝업 높이 80px 고정 (팝업 패딩 4px*2 포함이므로 72px)
+        "flex items-center justify-center text-body-2 text-text-disabled",
+        "[&:not(:empty)]:min-h-[72px] [&:not(:empty)]:p-2",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+var Combobox = Object.assign(ComboboxRoot, {
+  Content: ComboboxContent,
+  Description: ComboboxDescription,
+  Empty: ComboboxEmpty,
+  Input: ComboboxInput,
+  Item: ComboboxItem,
+  Label: ComboboxLabel,
+  List: ComboboxList,
+  Search: ComboboxSearch,
+  Trigger: ComboboxTrigger,
+  Value: ComboboxValue
+});
+function FlatCombobox({
+  options,
+  placeholder,
+  searchPlaceholder,
+  emptyText,
+  label,
+  required,
+  description,
+  size,
+  variant,
+  error,
+  disabled,
+  value,
+  defaultValue,
+  onValueChange,
+  onOpenChange,
+  className,
+  listClassName
+}) {
+  const resolveOption = (v) => options.find((option) => option.value === v) ?? null;
+  return /* @__PURE__ */ jsxs(
+    Combobox,
+    {
+      items: options,
+      itemToStringLabel: (option) => option.label,
+      isItemEqualToValue: (a, b) => a?.value === b?.value,
+      value: value !== void 0 ? resolveOption(value) : void 0,
+      defaultValue: defaultValue !== void 0 ? resolveOption(defaultValue) : void 0,
+      onValueChange: (option) => onValueChange?.(option?.value ?? null),
+      onOpenChange,
+      size,
+      error,
+      disabled,
+      className,
+      children: [
+        label && /* @__PURE__ */ jsx(Combobox.Label, { required, children: label }),
+        /* @__PURE__ */ jsx(Combobox.Trigger, { variant, children: /* @__PURE__ */ jsx(Combobox.Value, { placeholder }) }),
+        /* @__PURE__ */ jsxs(Combobox.Content, { children: [
+          /* @__PURE__ */ jsx(Combobox.Search, { placeholder: searchPlaceholder }),
+          /* @__PURE__ */ jsx(Combobox.Empty, { children: emptyText }),
+          /* @__PURE__ */ jsx(Combobox.List, { className: listClassName, children: (option) => /* @__PURE__ */ jsx(
+            Combobox.Item,
+            {
+              value: option,
+              disabled: option.disabled,
+              leftIcon: option.leftIcon,
+              rightIcon: option.rightIcon,
+              rightSlot: option.rightSlot,
+              children: option.label
+            },
+            option.value
+          ) })
+        ] }),
+        description && /* @__PURE__ */ jsx(Combobox.Description, { children: description })
+      ]
+    }
+  );
+}
+FlatCombobox.displayName = "FlatCombobox";
+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(TabsPrimitive2.Root, { ref, ...props, children }) })
+);
+Segment.List = forwardRef(
+  ({ className, ...props }, ref) => {
+    const { size } = useSegmentContext();
+    return /* @__PURE__ */ jsx(
+      TabsPrimitive2.List,
+      {
+        ref,
+        className: cn(segmentListVariants({ size }), className),
+        ...props
+      }
+    );
+  }
+);
+Segment.Item = forwardRef(
+  ({ className, leftIcon, children, ...props }, ref) => {
+    const { size } = useSegmentContext();
+    return /* @__PURE__ */ jsxs(
+      TabsPrimitive2.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(
+    TabsPrimitive2.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";
+function FlatSegment({
+  items,
+  disabled,
+  className,
+  ...props
+}) {
+  const rootProps = props;
+  return /* @__PURE__ */ jsx(Segment, { ...rootProps, 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 SelectContext = createContext(null);
 var useSelectContext = () => {
   const context = useContext(SelectContext);
@@ -982,4 +1453,4 @@ function ConditionalTooltip({ children, tooltip }) {
 FlatTooltip.displayName = "FlatTooltip";
 ConditionalTooltip.displayName = "ConditionalTooltip";
 
-export { ColorPalette, ColorPaletteColors, ConditionalTooltip, DEFAULT_COLOR, FlatColorPalette, FlatSegment, FlatSelect, FlatTabs, FlatTooltip, ScrollArea, ScrollBar, Segment, Select, Tabs, Tooltip, colorPaletteColorClasses, commonInputVariants, getColorPaletteColor, isInPalette, overlayListVariants };
+export { ColorPalette, ColorPaletteColors, Combobox, ComboboxContent, ComboboxDescription, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSearch, ComboboxTrigger, ComboboxValue, ConditionalTooltip, DEFAULT_COLOR, FlatColorPalette, FlatCombobox, FlatSegment, FlatSelect, FlatTabs, FlatTooltip, ScrollArea, ScrollBar, Segment, Select, Tabs, Tooltip, colorPaletteColorClasses, commonInputVariants, getColorPaletteColor, isInPalette, overlayListVariants, textFieldVariants };