@financedistrict/apps-ui 0.1.0

package/dist/inline-select.cjs

@@ -0,0 +1,856 @@
+'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/inline-select/InlineSelect.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
+  );
+}
+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 };
+}
+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
+  };
+}
+var inlineSelectVariants = classVarianceAuthority.cva(
+  [
+    // Inline text run: label + caret, 4px gap (Figma spacing/1), baseline-ish
+    // centered. `w-fit` so the ring hugs the content, not a full-width box.
+    "inline-flex w-fit items-center gap-1",
+    // Behaves as inline text — no field padding/background/border.
+    "cursor-pointer bg-transparent p-0 text-left align-middle",
+    "transition-colors",
+    // System focus ring (ADR-0010): momentary-control treatment, not a border
+    // recolor. Kill the default outline, then draw the 2px --focus ring with a
+    // 2px gap on :focus-visible only. `rounded-xs` matches the Figma ring.
+    "rounded-xs outline-none",
+    "focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus",
+    // Decorative svgs (caret / leading slot) never intercept the click and keep
+    // their explicit sizes.
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0"
+  ],
+  {
+    variants: {
+      variation: {
+        primary: "",
+        secondary: ""
+      },
+      disabled: {
+        // Muted + not-allowed, and the focus ring is suppressed (a disabled
+        // control is not focusable, but belt-and-braces if a consumer forces it).
+        true: "cursor-not-allowed focus-visible:outline-none",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      variation: "primary",
+      disabled: false
+    }
+  }
+);
+function InlineSelectTrigger({
+  variation = "primary",
+  disabled = false,
+  displayText,
+  isPlaceholder,
+  open = false,
+  leadingSlot,
+  className,
+  ref,
+  ...props
+}) {
+  const valueColor = variation === "secondary" ? "text-card-brand-secondary-foreground" : "text-card-primary-foreground";
+  const mutedColor = variation === "secondary" ? "text-card-brand-secondary-foreground-muted" : "text-card-primary-foreground-muted";
+  const labelColor = disabled || isPlaceholder ? mutedColor : valueColor;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      ref,
+      role: "combobox",
+      "data-slot": "inline-select-trigger",
+      "data-variation": variation,
+      disabled,
+      className: cn(inlineSelectVariants({ variation, disabled }), className),
+      ...props,
+      children: [
+        leadingSlot != null && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "data-slot": "inline-select-leading",
+            "aria-hidden": "true",
+            className: cn(
+              "flex items-center [&_svg:not([class*='size-'])]:size-4",
+              // The leading slot follows the caret/muted colour unless a real
+              // value is shown, then it follows the value colour (like the label).
+              labelColor
+            ),
+            children: leadingSlot
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "data-slot": "inline-select-value",
+            className: cn("body-03 truncate", labelColor),
+            children: displayText
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "data-slot": "inline-select-caret",
+            "aria-hidden": "true",
+            className: "flex items-center",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              react.CaretDownIcon,
+              {
+                weight: "fill",
+                className: cn(
+                  "size-3 transition-transform",
+                  // Caret uses the muted variation colour (Figma resting state).
+                  mutedColor,
+                  open && "rotate-180"
+                )
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function InlineSelect({
+  options,
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  variation = "primary",
+  placeholder = "Select",
+  leadingSlot,
+  disabled,
+  name,
+  id: idProp,
+  className,
+  ref,
+  ...props
+}) {
+  const generatedId = React2__namespace.useId();
+  const id = idProp ?? generatedId;
+  const {
+    selected,
+    open,
+    setTriggerRef,
+    triggerProps,
+    listboxProps,
+    text,
+    isPlaceholder
+  } = useSelectListbox({
+    options,
+    // Normalize the single-select public value to the hook's array form.
+    value: valueProp,
+    defaultValue,
+    // The hook emits `string | string[]`; in single mode it is always a
+    // `string`, so narrow before handing it to the public single callback.
+    onValueChange: onValueChange ? (next) => onValueChange(Array.isArray(next) ? next[0] ?? "" : next) : void 0,
+    multiple: false,
+    disabled,
+    id,
+    ref,
+    placeholder
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      InlineSelectTrigger,
+      {
+        ref: setTriggerRef,
+        id,
+        variation,
+        open,
+        displayText: text,
+        isPlaceholder,
+        leadingSlot,
+        disabled,
+        className,
+        ...triggerProps,
+        ...props
+      }
+    ),
+    name != null && /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name, value: selected[0] ?? "" }),
+    open && /* @__PURE__ */ jsxRuntime.jsx(
+      SelectListbox,
+      {
+        ...listboxProps,
+        widthMode: "auto",
+        "aria-label": props["aria-label"]
+      }
+    )
+  ] });
+}
+
+exports.InlineSelect = InlineSelect;
+exports.InlineSelectTrigger = InlineSelectTrigger;
+exports.inlineSelectVariants = inlineSelectVariants;