@financedistrict/apps-ui 0.1.0

package/dist/select.cjs

@@ -0,0 +1,998 @@
+'use strict';
+
+var React2 = require('react');
+var reactDom = require('react-dom');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var classVarianceAuthority = require('class-variance-authority');
+var react = require('@phosphor-icons/react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
+
+// src/select/Select.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var scrollbarVariants = classVarianceAuthority.cva(
+  [
+    // Firefox (approximate): thin themed scrollbar over a transparent track.
+    "[scrollbar-width:thin]",
+    "[scrollbar-color:var(--color-card-foreground-muted)_transparent]",
+    // WebKit gutter — 12px, both axes so the utility is axis-agnostic.
+    "[&::-webkit-scrollbar]:w-3 [&::-webkit-scrollbar]:h-3",
+    // WebKit thumb — 4px pill: a 4px transparent border + content-box clip
+    // leaves a 4px-wide fill centred in the 12px gutter.
+    "[&::-webkit-scrollbar-thumb]:rounded-full",
+    "[&::-webkit-scrollbar-thumb]:border-4 [&::-webkit-scrollbar-thumb]:border-solid [&::-webkit-scrollbar-thumb]:border-transparent",
+    "[&::-webkit-scrollbar-thumb]:bg-clip-content",
+    "[&::-webkit-scrollbar-thumb]:bg-card-foreground-muted",
+    // WebKit track — transparent by default (stroke is the `stroke` variant).
+    "[&::-webkit-scrollbar-track]:bg-transparent"
+  ],
+  {
+    variants: {
+      stroke: {
+        // 1px leading-edge track stroke (Figma `stroke`, on by default).
+        true: "[&::-webkit-scrollbar-track]:border-l [&::-webkit-scrollbar-track]:border-card-border",
+        false: ""
+      }
+    },
+    defaultVariants: { stroke: true }
+  }
+);
+var checkboxVariants = classVarianceAuthority.cva([
+  // Box — 20×20 (`size-5`), 2px radius (Figma `radius/xs`), 1px border.
+  // `peer` lets the sibling indicator react to :checked / :disabled.
+  "peer size-5 shrink-0 appearance-none rounded-xs border",
+  "cursor-pointer transition-colors",
+  // Default
+  "bg-background border-border",
+  // Hover (unselected) — focus keeps the DEFAULT border; only the ring signals
+  // focus (so focus doesn't visually read as hover).
+  "hover:border-border-accent",
+  // Focus ring — suppress the native ring, draw the shared `--focus` ring the
+  // same way ghost Button does: 2px stroke, 2px offset (`outline-solid`
+  // restores what `outline-none` zeroed).
+  "outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid focus-visible:outline-focus",
+  // Selected
+  "checked:bg-brand-primary-background checked:border-brand-primary-border",
+  "checked:hover:bg-brand-primary-accent checked:hover:border-brand-primary-border",
+  "checked:focus-visible:bg-brand-primary-accent checked:focus-visible:border-brand-primary-border",
+  // Disabled — shared neutral-muted look whether selected or not (per Figma)
+  "disabled:pointer-events-none disabled:cursor-not-allowed disabled:border-border-muted",
+  "checked:disabled:bg-background checked:disabled:border-border-muted"
+]);
+function Checkbox({
+  className,
+  wrapperClassName,
+  onChange,
+  onCheckedChange,
+  ...props
+}) {
+  const handleChange = (event) => {
+    onChange?.(event);
+    onCheckedChange?.(event.currentTarget.checked);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("relative inline-flex shrink-0", wrapperClassName), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type: "checkbox",
+        "data-slot": "checkbox",
+        className: cn(checkboxVariants(), className),
+        ...props,
+        onChange: handleChange
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      react.CheckIcon,
+      {
+        "aria-hidden": "true",
+        weight: "regular",
+        "data-slot": "checkbox-indicator",
+        className: cn(
+          "pointer-events-none invisible absolute inset-0 m-auto size-4",
+          "text-brand-primary-foreground",
+          "peer-checked:visible peer-disabled:text-foreground-muted"
+        )
+      }
+    )
+  ] });
+}
+var selectListboxVariants = classVarianceAuthority.cva([
+  "flex flex-col",
+  "bg-card-background border border-card-border rounded-sm shadow-s",
+  // Small vertical inset so the first/last option isn't flush to the border.
+  "py-1",
+  // Scroll when the list outgrows its max-height (set inline from the rect).
+  "overflow-y-auto",
+  // The panel is not itself focusable; focus stays on the trigger.
+  "outline-none"
+]);
+var selectListboxPanelVariants = classVarianceAuthority.cva([
+  "flex flex-col min-h-0",
+  "bg-card-background border border-card-border rounded-sm shadow-s",
+  "overflow-hidden",
+  "outline-none"
+]);
+var selectListboxScrollVariants = classVarianceAuthority.cva([
+  "flex flex-col min-h-0 flex-1",
+  "py-1",
+  "overflow-y-auto",
+  "outline-none"
+]);
+var selectListboxFooterVariants = classVarianceAuthority.cva([
+  "shrink-0",
+  "border-t border-t-card-border",
+  "px-3 py-1"
+]);
+var selectOptionVariants = classVarianceAuthority.cva(
+  [
+    "body-03",
+    "flex w-full items-center gap-2",
+    "px-3 py-2",
+    "cursor-pointer select-none",
+    "transition-colors",
+    // Reserve the 3px left accent bar on EVERY row (transparent by default,
+    // recoloured only when single-selected). Keeping the border-box constant
+    // across rows means selecting one never shifts its text right — same
+    // no-layout-shift trick Input uses for its `showBottomLine` bottom line.
+    "border-l-3",
+    // Mirror the 3px on the right (always transparent) so content is inset
+    // equally on both sides — the left accent bar would otherwise make the left
+    // padding read 3px larger than the right.
+    "border-r-3 border-r-transparent"
+    // NOTE: no text-/border-colour in the base. cva concatenates class strings
+    // without resolving conflicting Tailwind utilities, so a base colour + a
+    // compound colour would both survive and CSS source-order (not our intent)
+    // would pick the winner. Every state below sets exactly ONE text colour and
+    // ONE left-border colour via compound variants.
+  ],
+  {
+    variants: {
+      active: { true: "", false: "" },
+      selected: { true: "", false: "" },
+      multiple: { true: "", false: "" },
+      disabled: { true: "cursor-not-allowed", false: "" }
+    },
+    compoundVariants: [
+      // ── Text colour (exactly one matches per state) ──
+      { disabled: true, className: "text-foreground-muted" },
+      { disabled: false, selected: false, className: "text-foreground" },
+      // Multi keeps the normal foreground when selected (the checkbox marks it).
+      {
+        disabled: false,
+        selected: true,
+        multiple: true,
+        className: "text-foreground"
+      },
+      // Single-select selected → brand foreground (Figma node 4921:8203).
+      {
+        disabled: false,
+        selected: true,
+        multiple: false,
+        className: "text-card-brand-foreground"
+      },
+      // ── Left accent bar colour (exactly one matches per state) ──
+      // Invisible on every row except the single-select selected one, where it
+      // becomes the brand accent. Width is reserved in the base, so this is a
+      // pure colour change — no content shift.
+      { selected: false, className: "border-l-transparent" },
+      { selected: true, multiple: true, className: "border-l-transparent" },
+      {
+        selected: true,
+        multiple: false,
+        className: "border-l-card-brand-border-accent"
+      },
+      // ── Background ──
+      // Neutral hover/keyboard highlight (Figma card/neutral/normal/accent) —
+      // every row EXCEPT a single-select selected one (which stays branded).
+      { active: true, selected: false, className: "bg-card-accent" },
+      {
+        active: true,
+        selected: true,
+        multiple: true,
+        className: "bg-card-accent"
+      },
+      // Single-select selected: brand-tinted row. No neutral `active` bg matches
+      // this combo, so it stays branded on hover.
+      { selected: true, multiple: false, className: "bg-card-brand-accent" }
+    ],
+    defaultVariants: {
+      active: false,
+      selected: false,
+      multiple: false,
+      disabled: false
+    }
+  }
+);
+var LISTBOX_OFFSET = 4;
+var LISTBOX_MARGIN = 8;
+var LISTBOX_MAX_HEIGHT = 208;
+function computeListboxPosition(anchor, listboxHeight, viewportHeight) {
+  const flipsAbove = anchor.bottom + listboxHeight > viewportHeight && anchor.top > listboxHeight;
+  return {
+    left: anchor.left,
+    width: anchor.width,
+    top: flipsAbove ? anchor.top - listboxHeight : anchor.bottom,
+    placement: flipsAbove ? "top" : "bottom"
+  };
+}
+function computeListboxHorizontal(anchor, widthMode, measuredWidth, viewportWidth, margin) {
+  if (widthMode === "trigger") {
+    return { left: anchor.left, width: anchor.width };
+  }
+  const maxWidth = viewportWidth - 2 * margin;
+  const upperBound = viewportWidth - margin - measuredWidth;
+  const left = Math.max(margin, Math.min(anchor.left, upperBound));
+  return { left, minWidth: anchor.width, maxWidth };
+}
+function SelectListbox({
+  id,
+  options,
+  selected,
+  multiple,
+  activeIndex,
+  anchorRect,
+  widthMode = "trigger",
+  onSelect,
+  onActiveChange,
+  footer,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby
+}) {
+  const listRef = React2__namespace.useRef(null);
+  const panelRef = React2__namespace.useRef(null);
+  const hasFooter = footer != null;
+  const [style, setStyle] = React2__namespace.useState(null);
+  React2__namespace.useLayoutEffect(() => {
+    if (anchorRect == null) {
+      setStyle(null);
+      return;
+    }
+    const measureEl = hasFooter ? panelRef.current : listRef.current;
+    const measured = measureEl ? measureEl.offsetHeight : 0;
+    const height = Math.min(measured || LISTBOX_MAX_HEIGHT, LISTBOX_MAX_HEIGHT);
+    const pos = computeListboxPosition(anchorRect, height, window.innerHeight);
+    const measuredWidth = measureEl ? measureEl.offsetWidth : 0;
+    const horizontal = computeListboxHorizontal(
+      anchorRect,
+      widthMode,
+      measuredWidth,
+      window.innerWidth,
+      LISTBOX_MARGIN
+    );
+    setStyle({
+      position: "absolute",
+      top: pos.top + window.scrollY + (pos.placement === "bottom" ? LISTBOX_OFFSET : -LISTBOX_OFFSET),
+      left: horizontal.left + window.scrollX,
+      // `"trigger"`: fixed pixel width = trigger width (Select, unchanged).
+      // `"auto"`: content-sized via `max-content`, bounded by min/max width.
+      ...widthMode === "trigger" ? { width: horizontal.width } : {
+        width: "max-content",
+        minWidth: horizontal.minWidth,
+        maxWidth: horizontal.maxWidth
+      },
+      // Bound to the design token (208px). `overflow-y-auto` on the panel
+      // scrolls the list past this cap.
+      maxHeight: "var(--container-4xs)",
+      zIndex: 50
+    });
+  }, [anchorRect, widthMode, hasFooter]);
+  React2__namespace.useLayoutEffect(() => {
+    if (activeIndex < 0) return;
+    const el = listRef.current?.querySelector(
+      `#${CSS.escape(`${id}-opt-${activeIndex}`)}`
+    );
+    el?.scrollIntoView?.({ block: "nearest" });
+  }, [activeIndex, id]);
+  const positionStyle = style ?? (widthMode === "auto" ? { position: "absolute", visibility: "hidden", width: "max-content" } : { position: "absolute", visibility: "hidden" });
+  const optionItems = /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: options.map((option, index) => {
+    const isSelected = selected.includes(option.value);
+    const isActive = index === activeIndex;
+    const isDisabled = option.disabled === true;
+    const iconColorClass = isSelected && !multiple ? "text-card-brand-foreground" : "text-foreground-muted";
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "li",
+      {
+        id: `${id}-opt-${index}`,
+        role: "option",
+        "aria-selected": isSelected,
+        "aria-disabled": isDisabled || void 0,
+        "data-slot": "select-option",
+        "data-active": isActive || void 0,
+        className: selectOptionVariants({
+          active: isActive,
+          selected: isSelected,
+          multiple,
+          disabled: isDisabled
+        }),
+        onMouseEnter: () => {
+          if (!isDisabled) onActiveChange(index);
+        },
+        onMouseDown: (event) => {
+          event.preventDefault();
+          if (!isDisabled) onSelect(option.value);
+        },
+        children: [
+          multiple && // Visual mirror of the row's selection — the `option` carries the
+          // semantics, so the checkbox is hidden from AT and out of the tab
+          // order. `readOnly` because the <li> owns the toggle.
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Checkbox,
+            {
+              checked: isSelected,
+              disabled: true,
+              tabIndex: -1,
+              "aria-hidden": "true",
+              "data-slot": "select-option-checkbox",
+              className: cn(
+                "pointer-events-none disabled:border-border",
+                "checked:disabled:bg-brand-primary-background checked:disabled:border-brand-primary-border"
+              ),
+              wrapperClassName: "[&_[data-slot=checkbox-indicator]]:text-brand-primary-foreground"
+            }
+          ),
+          option.leadingSlot != null && // After the checkbox in multi mode. Decorative; muted foreground
+          // except on the single-select selected row (brand), per iconColorClass.
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "data-slot": "select-option-leading",
+              "aria-hidden": "true",
+              className: cn(
+                "flex shrink-0 items-center [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+                iconColorClass
+              ),
+              children: option.leadingSlot
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: option.label }),
+          option.trailingSlot != null && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "data-slot": "select-option-trailing",
+              "aria-hidden": "true",
+              className: cn(
+                "flex shrink-0 items-center [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+                iconColorClass
+              ),
+              children: option.trailingSlot
+            }
+          )
+        ]
+      },
+      option.value
+    );
+  }) });
+  if (!hasFooter) {
+    return reactDom.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "ul",
+        {
+          ref: listRef,
+          id,
+          role: "listbox",
+          "aria-multiselectable": multiple || void 0,
+          "aria-label": ariaLabel,
+          "aria-labelledby": ariaLabelledby,
+          "data-slot": "select-listbox",
+          className: cn(selectListboxVariants(), scrollbarVariants()),
+          style: positionStyle,
+          children: optionItems
+        }
+      ),
+      document.body
+    );
+  }
+  return reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref: panelRef,
+        "data-slot": "select-listbox-panel",
+        className: selectListboxPanelVariants(),
+        style: positionStyle,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "ul",
+            {
+              ref: listRef,
+              id,
+              role: "listbox",
+              "aria-multiselectable": multiple || void 0,
+              "aria-label": ariaLabel,
+              "aria-labelledby": ariaLabelledby,
+              "data-slot": "select-listbox",
+              className: cn(selectListboxScrollVariants(), scrollbarVariants()),
+              children: optionItems
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "data-slot": "select-listbox-footer",
+              className: selectListboxFooterVariants(),
+              children: footer
+            }
+          )
+        ]
+      }
+    ),
+    document.body
+  );
+}
+var inputVariants = classVarianceAuthority.cva(
+  [
+    // Field row layout — icons + input on one line, vertically centred.
+    "flex w-full items-center",
+    // Colour transitions for the focus border change.
+    "transition-colors",
+    // I-beam text cursor over the WHOLE field row (not just the inner input),
+    // so clicking anywhere in the padding/icon area reads as "type here". This
+    // is the only hover affordance — hover intentionally does NOT recolour the
+    // border (user-authorized deviation from the Figma). `cursor-text` sits in
+    // the base; `has-[:disabled]:cursor-not-allowed` below is declared AFTER it
+    // so it wins on a disabled field (same-specificity utilities, later class
+    // takes precedence — confirmed by tailwind-merge ordering).
+    "cursor-text",
+    // Disabled: not-allowed cursor + block pointer interaction on the whole
+    // field (the native `disabled` on the input already stops typing; icons are
+    // dimmed separately by the `disabled`-derived `iconStateClass` in <Input>).
+    // Declared after `cursor-text` so it overrides the I-beam when disabled.
+    "has-[:disabled]:cursor-not-allowed"
+  ],
+  {
+    variants: {
+      variation: {
+        field: [
+          "bg-input-background border border-input-border rounded-sm",
+          // Focus (mouse or keyboard) strengthens the whole border to the
+          // accent. Hover does NOT change colour (cursor-only affordance).
+          "focus-within:border-input-border-accent"
+        ],
+        line: [
+          "border-b border-input-border",
+          // Focus (mouse or keyboard) strengthens the bottom line to the
+          // accent. Hover does NOT change colour (cursor-only affordance).
+          "focus-within:border-input-border-accent"
+        ]
+      },
+      size: {
+        // sm/lg heights reuse the Button scale; gap follows Figma per size.
+        sm: "h-8 gap-1",
+        lg: "h-10 gap-2"
+      },
+      error: {
+        // Error out-ranks focus: declare the destructive border for the resting
+        // state AND its `focus-within:` form so an errored field never recolours
+        // to the accent when focused (a bare `border-…` alone would lose to the
+        // variation's `focus-within:` accent utility above). No `hover:` form is
+        // needed — hover no longer changes colour on any variation. The `error`
+        // variant's classes are emitted after the variation's, so at equal
+        // specificity the destructive `focus-within:` wins by order.
+        true: "border-input-destructive-foreground-accent focus-within:border-input-destructive-foreground-accent",
+        false: ""
+      },
+      // Bottom-line visibility toggle. LINE ONLY — the hide effect is applied
+      // via a compound variant below (scoped to `variation:line`), so `field`
+      // is unaffected. Boolean → `true`/`false`; `true` (default) keeps today's
+      // behaviour. No classes here: `true` is the resting `border-input-border`
+      // from the variation, and `false`'s hide is the compound variant.
+      showBottomLine: {
+        true: "",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      // field padding — Figma field-lg = px-3 (12px) / py-2 (8px).
+      { variation: "field", size: "lg", className: "px-3 py-2" },
+      // field-sm: DERIVED. px-2 (8px = spacing/2) steps down from field-lg's
+      // px-3 (12px) and equals py-2 for a uniform spacing/2 inset all around.
+      { variation: "field", size: "sm", className: "px-2 py-2" },
+      // line — no horizontal padding (Figma px-0); vertical padding per size.
+      { variation: "line", size: "lg", className: "py-2" },
+      { variation: "line", size: "sm", className: "py-2.5" },
+      // Hide the resting bottom line (LINE ONLY): recolour to transparent while
+      // keeping `border-b` for a stable 1px width (no layout shift). Gated on
+      // `error:false` so an errored field keeps its destructive rest border
+      // (transparent would otherwise last-win over it). Focus still wins:
+      // `focus-within:border-input-border-accent` out-ranks `border-transparent`
+      // (later in class order), so the line reappears on focus. `field` is
+      // untouched — this compound only matches `variation:line`.
+      {
+        variation: "line",
+        showBottomLine: false,
+        error: false,
+        className: "border-transparent"
+      }
+    ],
+    defaultVariants: {
+      variation: "field",
+      size: "lg",
+      error: false,
+      showBottomLine: true
+    }
+  }
+);
+function selectTriggerLabel(options, selected, placeholder) {
+  if (selected.length === 0) {
+    return { text: placeholder, isPlaceholder: true };
+  }
+  if (selected.length === 1) {
+    const match = options.find((o) => o.value === selected[0]);
+    return { text: match?.label ?? placeholder, isPlaceholder: match == null };
+  }
+  return { text: `${selected.length} selected`, isPlaceholder: false };
+}
+function SelectTrigger({
+  variation = "field",
+  error = false,
+  showBottomLine = true,
+  open = false,
+  displayText,
+  isPlaceholder,
+  label,
+  hint,
+  leadingSlot,
+  id,
+  hintId,
+  disabled,
+  className,
+  wrapperClassName,
+  fieldClassName,
+  ref,
+  ...props
+}) {
+  const iconStateClass = cn(
+    error ? "text-input-destructive-foreground-accent" : "text-input-foreground",
+    disabled && "text-input-foreground-muted"
+  );
+  const HintIcon = error ? react.WarningIcon : react.InfoIcon;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-1.5", wrapperClassName), children: [
+    label != null && /* @__PURE__ */ jsxRuntime.jsx(
+      "label",
+      {
+        htmlFor: id,
+        "data-slot": "select-label",
+        className: cn(
+          "caption-03-medium uppercase",
+          error ? "text-input-destructive-foreground-accent" : "text-input-foreground",
+          disabled && "text-input-foreground-muted"
+        ),
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        id,
+        ref,
+        role: "combobox",
+        "data-slot": "select-trigger",
+        "data-variation": variation,
+        "data-error": error || void 0,
+        disabled,
+        "aria-invalid": error || void 0,
+        "aria-describedby": hintId,
+        className: cn(
+          // Reuse the Input field-row styling (field/line + focus/error border).
+          inputVariants({ variation, size: "lg", error, showBottomLine }),
+          // The field is a pointer target, not a text field: pointer cursor,
+          // and not-allowed when disabled (overrides `inputVariants`' I-beam).
+          "cursor-pointer disabled:cursor-not-allowed",
+          // No system focus ring: like Input (ADR-0011), this field-shaped
+          // control signals focus purely by recolouring its 1px border to the
+          // accent (via `inputVariants`' `focus-within:`). The focusable element
+          // here is the field itself, so kill the browser's default outline —
+          // otherwise it layers ~1.5px on top of the border and reads as 2px.
+          "outline-none",
+          // Left-align content; the value grows, the caret stays trailing.
+          "text-left",
+          // Icon slots inherit the shared state colour; 16px default size for
+          // any nested svg that hasn't set its own size (mirrors Input).
+          "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+          iconStateClass,
+          fieldClassName,
+          className
+        ),
+        ...props,
+        children: [
+          leadingSlot != null && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "data-slot": "select-leading",
+              "aria-hidden": "true",
+              className: "flex items-center",
+              children: leadingSlot
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "data-slot": "select-value",
+              className: cn(
+                "body-03 w-full min-w-0 truncate",
+                isPlaceholder ? "text-input-foreground-muted" : "text-input-foreground-accent",
+                disabled && "text-input-foreground-muted"
+              ),
+              children: displayText
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "data-slot": "select-trailing",
+              "aria-hidden": "true",
+              className: "flex items-center",
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                react.CaretDownIcon,
+                {
+                  weight: "fill",
+                  className: cn("size-3 transition-transform", open && "rotate-180")
+                }
+              )
+            }
+          )
+        ]
+      }
+    ),
+    hint != null && /* @__PURE__ */ jsxRuntime.jsxs(
+      "p",
+      {
+        id: hintId,
+        "data-slot": "select-hint",
+        className: cn(
+          "body-04 flex items-center gap-1",
+          error ? "text-input-destructive-foreground-accent" : "text-input-foreground",
+          disabled && "text-input-foreground-muted"
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            HintIcon,
+            {
+              "aria-hidden": "true",
+              weight: "regular",
+              className: "size-4 shrink-0"
+            }
+          ),
+          hint
+        ]
+      }
+    )
+  ] });
+}
+var TYPEAHEAD_RESET_MS = 500;
+function nextEnabledIndex(options, from, dir) {
+  for (let i = from + dir; i >= 0 && i < options.length; i += dir) {
+    if (!options[i].disabled) return i;
+  }
+  return from;
+}
+function firstEnabledIndex(options) {
+  const i = options.findIndex((o) => !o.disabled);
+  return i;
+}
+function toArray(value) {
+  if (value == null) return [];
+  return Array.isArray(value) ? value : [value];
+}
+function useSelectListbox(options) {
+  const {
+    options: opts,
+    value: valueProp,
+    defaultValue,
+    onValueChange,
+    multiple = false,
+    disabled = false,
+    closeOnSelect = true,
+    id,
+    ref,
+    placeholder = "Select"
+  } = options;
+  const listboxId = `${id}-listbox`;
+  const isControlled = valueProp !== void 0;
+  const [uncontrolled, setUncontrolled] = React2__namespace.useState(
+    () => toArray(defaultValue)
+  );
+  const selected = isControlled ? toArray(valueProp) : uncontrolled;
+  const [open, setOpen] = React2__namespace.useState(false);
+  const [activeIndex, setActiveIndex] = React2__namespace.useState(-1);
+  const [anchorRect, setAnchorRect] = React2__namespace.useState(null);
+  const triggerRef = React2__namespace.useRef(null);
+  const setTriggerRef = React2__namespace.useCallback(
+    (node) => {
+      triggerRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref != null) ref.current = node;
+    },
+    [ref]
+  );
+  const typeahead = React2__namespace.useRef({ buffer: "", at: 0 });
+  const commit = (next) => {
+    if (!isControlled) setUncontrolled(next);
+    onValueChange?.(multiple ? next : next[0] ?? "");
+  };
+  const measure = React2__namespace.useCallback(() => {
+    const node = triggerRef.current;
+    if (node) setAnchorRect(node.getBoundingClientRect());
+  }, []);
+  const openListbox = React2__namespace.useCallback(() => {
+    measure();
+    const selectedIndex = opts.findIndex((o) => selected.includes(o.value));
+    setActiveIndex(
+      selectedIndex >= 0 ? selectedIndex : firstEnabledIndex(opts)
+    );
+    setOpen(true);
+  }, [measure, opts, selected]);
+  const closeListbox = React2__namespace.useCallback((restoreFocus) => {
+    setOpen(false);
+    setActiveIndex(-1);
+    setAnchorRect(null);
+    if (restoreFocus) triggerRef.current?.focus();
+  }, []);
+  const handleSelect = (optionValue) => {
+    if (multiple) {
+      const next = selected.includes(optionValue) ? selected.filter((v) => v !== optionValue) : [...selected, optionValue];
+      commit(next);
+      const idx = opts.findIndex((o) => o.value === optionValue);
+      if (idx >= 0) setActiveIndex(idx);
+    } else {
+      commit([optionValue]);
+      if (closeOnSelect) {
+        closeListbox(true);
+      } else {
+        const idx = opts.findIndex((o) => o.value === optionValue);
+        if (idx >= 0) setActiveIndex(idx);
+      }
+    }
+  };
+  const reset = () => {
+    commit([]);
+  };
+  React2__namespace.useEffect(() => {
+    if (!open) return;
+    const onReflow = () => measure();
+    window.addEventListener("scroll", onReflow, true);
+    window.addEventListener("resize", onReflow);
+    return () => {
+      window.removeEventListener("scroll", onReflow, true);
+      window.removeEventListener("resize", onReflow);
+    };
+  }, [open, measure]);
+  React2__namespace.useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (event) => {
+      const target = event.target;
+      const trigger = triggerRef.current;
+      const listbox = document.getElementById(listboxId);
+      const panel = listbox?.closest("[data-slot=select-listbox-panel]") ?? listbox;
+      if (trigger?.contains(target) || panel?.contains(target)) return;
+      closeListbox(false);
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    return () => document.removeEventListener("pointerdown", onPointerDown);
+  }, [open, listboxId, closeListbox]);
+  const handleKeyDown = (event) => {
+    if (disabled) return;
+    switch (event.key) {
+      case "ArrowDown": {
+        event.preventDefault();
+        if (!open) {
+          openListbox();
+        } else {
+          setActiveIndex((i) => nextEnabledIndex(opts, i < 0 ? -1 : i, 1));
+        }
+        return;
+      }
+      case "ArrowUp": {
+        event.preventDefault();
+        if (!open) {
+          openListbox();
+        } else {
+          setActiveIndex(
+            (i) => i < 0 ? firstEnabledIndex(opts) : nextEnabledIndex(opts, i, -1)
+          );
+        }
+        return;
+      }
+      case "Home": {
+        if (!open) return;
+        event.preventDefault();
+        setActiveIndex(firstEnabledIndex(opts));
+        return;
+      }
+      case "End": {
+        if (!open) return;
+        event.preventDefault();
+        setActiveIndex(nextEnabledIndex(opts, opts.length, -1));
+        return;
+      }
+      case "Enter":
+      case " ": {
+        event.preventDefault();
+        if (!open) {
+          openListbox();
+        } else if (activeIndex >= 0 && !opts[activeIndex]?.disabled) {
+          handleSelect(opts[activeIndex].value);
+        }
+        return;
+      }
+      case "Escape": {
+        if (open) {
+          event.preventDefault();
+          closeListbox(true);
+        }
+        return;
+      }
+      case "Tab": {
+        if (open) closeListbox(false);
+        return;
+      }
+      default: {
+        if (event.key.length === 1 && !event.metaKey && !event.ctrlKey && !event.altKey) {
+          if (!open) openListbox();
+          const now = typeof performance !== "undefined" ? performance.now() : Date.now();
+          const t = typeahead.current;
+          t.buffer = now - t.at > TYPEAHEAD_RESET_MS ? event.key : t.buffer + event.key;
+          t.at = now;
+          const query = t.buffer.toLowerCase();
+          const match = opts.findIndex(
+            (o) => !o.disabled && o.label.toLowerCase().startsWith(query)
+          );
+          if (match >= 0) setActiveIndex(match);
+        }
+      }
+    }
+  };
+  const handleTriggerClick = () => {
+    if (disabled) return;
+    if (open) closeListbox(true);
+    else openListbox();
+  };
+  const { text, isPlaceholder } = selectTriggerLabel(
+    opts,
+    selected,
+    placeholder
+  );
+  const activeId = open && activeIndex >= 0 ? `${listboxId}-opt-${activeIndex}` : void 0;
+  return {
+    selected,
+    open,
+    setTriggerRef,
+    listboxId,
+    activeId,
+    triggerProps: {
+      onClick: handleTriggerClick,
+      onKeyDown: handleKeyDown,
+      "aria-haspopup": "listbox",
+      "aria-expanded": open,
+      "aria-controls": open ? listboxId : void 0,
+      "aria-activedescendant": activeId
+    },
+    listboxProps: {
+      id: listboxId,
+      options: opts,
+      selected,
+      multiple,
+      activeIndex,
+      anchorRect,
+      onSelect: handleSelect,
+      onActiveChange: setActiveIndex
+    },
+    closeListbox,
+    text,
+    isPlaceholder,
+    reset
+  };
+}
+function Select({
+  options,
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  multiple = false,
+  variation = "field",
+  placeholder = "Select",
+  label,
+  error = false,
+  hint,
+  leadingSlot,
+  showBottomLine = true,
+  disabled,
+  id: idProp,
+  className,
+  wrapperClassName,
+  fieldClassName,
+  ref,
+  ...props
+}) {
+  const generatedId = React2__namespace.useId();
+  const id = idProp ?? generatedId;
+  const hintId = hint != null ? `${id}-hint` : void 0;
+  const {
+    open,
+    setTriggerRef,
+    triggerProps,
+    listboxProps,
+    text,
+    isPlaceholder
+  } = useSelectListbox({
+    options,
+    value: valueProp,
+    defaultValue,
+    onValueChange,
+    multiple,
+    disabled,
+    id,
+    ref,
+    placeholder
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SelectTrigger,
+      {
+        ref: setTriggerRef,
+        id,
+        variation,
+        error,
+        showBottomLine,
+        open,
+        displayText: text,
+        isPlaceholder,
+        label,
+        hint,
+        hintId,
+        leadingSlot,
+        disabled,
+        className,
+        wrapperClassName,
+        fieldClassName,
+        ...triggerProps,
+        ...props
+      }
+    ),
+    open && /* @__PURE__ */ jsxRuntime.jsx(
+      SelectListbox,
+      {
+        ...listboxProps,
+        "aria-labelledby": label != null ? id : void 0,
+        "aria-label": label == null ? props["aria-label"] : void 0
+      }
+    )
+  ] });
+}
+
+exports.Select = Select;
+exports.SelectListbox = SelectListbox;
+exports.SelectTrigger = SelectTrigger;
+exports.computeListboxHorizontal = computeListboxHorizontal;
+exports.computeListboxPosition = computeListboxPosition;
+exports.nextEnabledIndex = nextEnabledIndex;
+exports.selectListboxFooterVariants = selectListboxFooterVariants;
+exports.selectListboxPanelVariants = selectListboxPanelVariants;
+exports.selectListboxScrollVariants = selectListboxScrollVariants;
+exports.selectListboxVariants = selectListboxVariants;
+exports.selectOptionVariants = selectOptionVariants;
+exports.selectTriggerLabel = selectTriggerLabel;
+exports.useSelectListbox = useSelectListbox;