@financedistrict/apps-ui 0.1.0

package/dist/chunk-5TWRK4NW.js

@@ -0,0 +1,783 @@
+import { inputVariants } from './chunk-IEVN3J2F.js';
+import { Checkbox } from './chunk-SNU4YXOR.js';
+import { scrollbarVariants } from './chunk-FAOVKDVM.js';
+import { cn } from './chunk-7EOSDFS3.js';
+import * as React2 from 'react';
+import { createPortal } from 'react-dom';
+import { cva } from 'class-variance-authority';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { CaretDownIcon, WarningIcon, InfoIcon } from '@phosphor-icons/react';
+
+var selectListboxVariants = 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 = cva([
+  "flex flex-col min-h-0",
+  "bg-card-background border border-card-border rounded-sm shadow-s",
+  "overflow-hidden",
+  "outline-none"
+]);
+var selectListboxScrollVariants = cva([
+  "flex flex-col min-h-0 flex-1",
+  "py-1",
+  "overflow-y-auto",
+  "outline-none"
+]);
+var selectListboxFooterVariants = cva([
+  "shrink-0",
+  "border-t border-t-card-border",
+  "px-3 py-1"
+]);
+var selectOptionVariants = 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.useRef(null);
+  const panelRef = React2.useRef(null);
+  const hasFooter = footer != null;
+  const [style, setStyle] = React2.useState(null);
+  React2.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.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__ */ jsx(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__ */ 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__ */ 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__ */ 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__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: option.label }),
+          option.trailingSlot != null && /* @__PURE__ */ 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 createPortal(
+      /* @__PURE__ */ 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 createPortal(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: panelRef,
+        "data-slot": "select-listbox-panel",
+        className: selectListboxPanelVariants(),
+        style: positionStyle,
+        children: [
+          /* @__PURE__ */ 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__ */ 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 };
+}
+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 ? WarningIcon : InfoIcon;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1.5", wrapperClassName), children: [
+    label != null && /* @__PURE__ */ 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__ */ 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__ */ jsx(
+            "span",
+            {
+              "data-slot": "select-leading",
+              "aria-hidden": "true",
+              className: "flex items-center",
+              children: leadingSlot
+            }
+          ),
+          /* @__PURE__ */ 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__ */ jsx(
+            "span",
+            {
+              "data-slot": "select-trailing",
+              "aria-hidden": "true",
+              className: "flex items-center",
+              children: /* @__PURE__ */ jsx(
+                CaretDownIcon,
+                {
+                  weight: "fill",
+                  className: cn("size-3 transition-transform", open && "rotate-180")
+                }
+              )
+            }
+          )
+        ]
+      }
+    ),
+    hint != null && /* @__PURE__ */ 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__ */ 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.useState(
+    () => toArray(defaultValue)
+  );
+  const selected = isControlled ? toArray(valueProp) : uncontrolled;
+  const [open, setOpen] = React2.useState(false);
+  const [activeIndex, setActiveIndex] = React2.useState(-1);
+  const [anchorRect, setAnchorRect] = React2.useState(null);
+  const triggerRef = React2.useRef(null);
+  const setTriggerRef = React2.useCallback(
+    (node) => {
+      triggerRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref != null) ref.current = node;
+    },
+    [ref]
+  );
+  const typeahead = React2.useRef({ buffer: "", at: 0 });
+  const commit = (next) => {
+    if (!isControlled) setUncontrolled(next);
+    onValueChange?.(multiple ? next : next[0] ?? "");
+  };
+  const measure = React2.useCallback(() => {
+    const node = triggerRef.current;
+    if (node) setAnchorRect(node.getBoundingClientRect());
+  }, []);
+  const openListbox = React2.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.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.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.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.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__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      SelectTrigger,
+      {
+        ref: setTriggerRef,
+        id,
+        variation,
+        error,
+        showBottomLine,
+        open,
+        displayText: text,
+        isPlaceholder,
+        label,
+        hint,
+        hintId,
+        leadingSlot,
+        disabled,
+        className,
+        wrapperClassName,
+        fieldClassName,
+        ...triggerProps,
+        ...props
+      }
+    ),
+    open && /* @__PURE__ */ jsx(
+      SelectListbox,
+      {
+        ...listboxProps,
+        "aria-labelledby": label != null ? id : void 0,
+        "aria-label": label == null ? props["aria-label"] : void 0
+      }
+    )
+  ] });
+}
+
+export { Select, SelectListbox, SelectTrigger, computeListboxHorizontal, computeListboxPosition, nextEnabledIndex, selectListboxFooterVariants, selectListboxPanelVariants, selectListboxScrollVariants, selectListboxVariants, selectOptionVariants, selectTriggerLabel, useSelectListbox };