@kenos-ui/react-select 0.2.0

package/dist/index.cjs

@@ -0,0 +1,1162 @@
+'use strict';
+
+var react = require('react');
+var utils = require('@kenos-ui/utils');
+var jsxRuntime = require('react/jsx-runtime');
+var reactDom = require('react-dom');
+
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// src/index.parts.ts
+var index_parts_exports = {};
+__export(index_parts_exports, {
+  Backdrop: () => Backdrop,
+  ClearTrigger: () => ClearTrigger,
+  Content: () => Content,
+  Group: () => Group,
+  GroupLabel: () => GroupLabel,
+  HiddenSelect: () => HiddenSelect,
+  Icon: () => Icon,
+  Item: () => Item,
+  ItemIndicator: () => ItemIndicator,
+  ItemText: () => ItemText,
+  Label: () => Label,
+  List: () => List,
+  Portal: () => Portal,
+  Positioner: () => Positioner,
+  Root: () => Root,
+  ScrollDownButton: () => ScrollDownButton,
+  ScrollUpButton: () => ScrollUpButton,
+  Trigger: () => Trigger,
+  Value: () => Value
+});
+function arraysEqual(a, b) {
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i++) {
+    if (a[i] !== b[i]) return false;
+  }
+  return true;
+}
+var SelectStore = class {
+  state;
+  listeners = /* @__PURE__ */ new Set();
+  constructor(initial = {}) {
+    this.state = {
+      open: false,
+      openSource: null,
+      value: null,
+      highlightedValue: null,
+      items: /* @__PURE__ */ new Map(),
+      ...initial
+    };
+  }
+  getState() {
+    return this.state;
+  }
+  subscribe(listener) {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  }
+  notify() {
+    for (const listener of this.listeners) {
+      listener();
+    }
+  }
+  // ── Mutations ────────────────────────────────────────────────────────────
+  setOpen(open, source = null) {
+    if (this.state.open === open) return;
+    this.state = {
+      ...this.state,
+      open,
+      openSource: open ? source : null,
+      // Reset highlight when closing
+      highlightedValue: open ? this.state.highlightedValue : null
+    };
+    this.notify();
+  }
+  setValue(value) {
+    if (this.state.value === value) return;
+    this.state = { ...this.state, value };
+    this.notify();
+  }
+  setValues(values) {
+    const current = this.state.value;
+    if (Array.isArray(current) && arraysEqual(current, values)) return;
+    this.state = { ...this.state, value: values };
+    this.notify();
+  }
+  toggleValue(value, comparator) {
+    const current = this.state.value;
+    const next = Array.isArray(current) ? [...current] : [];
+    const index = next.findIndex((item) => comparator(item, value));
+    if (index >= 0) {
+      next.splice(index, 1);
+    } else {
+      next.push(value);
+    }
+    if (Array.isArray(current) && arraysEqual(current, next)) return;
+    this.state = { ...this.state, value: next };
+    this.notify();
+  }
+  clearValue(multiple) {
+    const next = multiple ? [] : null;
+    const current = this.state.value;
+    if (multiple) {
+      if (Array.isArray(current) && current.length === 0) return;
+    } else if (current === null) {
+      return;
+    }
+    this.state = { ...this.state, value: next };
+    this.notify();
+  }
+  isSelected(value, multiple, comparator) {
+    const current = this.state.value;
+    if (multiple) {
+      return Array.isArray(current) && current.some((item) => comparator(item, value));
+    }
+    return typeof current === "string" && comparator(current, value);
+  }
+  setHighlightedValue(value) {
+    if (this.state.highlightedValue === value) return;
+    this.state = { ...this.state, highlightedValue: value };
+    this.notify();
+  }
+  registerItem(record) {
+    const next = new Map(this.state.items);
+    next.set(record.value, record);
+    this.state = { ...this.state, items: next };
+    this.notify();
+  }
+  unregisterItem(value) {
+    if (!this.state.items.has(value)) return;
+    const next = new Map(this.state.items);
+    next.delete(value);
+    this.state = { ...this.state, items: next };
+    this.notify();
+  }
+  updateItemRef(value, ref) {
+    const item = this.state.items.get(value);
+    if (!item || item.ref === ref) return;
+    const next = new Map(this.state.items);
+    next.set(value, { ...item, ref });
+    this.state = { ...this.state, items: next };
+  }
+};
+function useSelectStore(store, selector) {
+  return react.useSyncExternalStore(
+    react.useCallback((cb) => store.subscribe(cb), [store]),
+    () => selector(store.getState()),
+    () => selector(store.getState())
+  );
+}
+var SelectContext = react.createContext(null);
+function useSelectContext() {
+  const ctx = react.useContext(SelectContext);
+  if (!ctx) {
+    throw new Error("Select compound components must be rendered inside <Select.Root>.");
+  }
+  return ctx;
+}
+function extractItemTextLabel(children) {
+  let label = null;
+  react.Children.forEach(children, (child) => {
+    if (label != null || !react.isValidElement(child)) return;
+    const type = child.type;
+    const isItemText = type?.displayName === "Select.ItemText" || type?.name === "ItemText";
+    if (isItemText) {
+      const content = child.props.children;
+      if (typeof content === "string" || typeof content === "number") {
+        label = String(content);
+      }
+      return;
+    }
+    if (child.props?.children != null) {
+      label = extractItemTextLabel(child.props.children);
+    }
+  });
+  return label;
+}
+function isSelectItemElement(child) {
+  const type = child.type;
+  return type?.displayName === "Select.Item" || type?.name === "Item";
+}
+function extractItemsFromChildren(children) {
+  const items = {};
+  const walk = (node) => {
+    react.Children.forEach(node, (child) => {
+      if (!react.isValidElement(child)) return;
+      if (isSelectItemElement(child)) {
+        const value = child.props.value;
+        const label = extractItemTextLabel(child.props.children) ?? value;
+        if (value != null && label != null) {
+          items[value] = label;
+        }
+      }
+      if (child.props?.children != null) {
+        walk(child.props.children);
+      }
+    });
+  };
+  walk(children);
+  return items;
+}
+
+// src/utils/scroll-to-index.ts
+function toScrollBlock(align) {
+  switch (align) {
+    case "start":
+      return "start";
+    case "end":
+      return "end";
+    case "center":
+      return "center";
+    case "nearest":
+    case "auto":
+    default:
+      return "nearest";
+  }
+}
+function scrollToIndexInState(state, index, options = {}) {
+  const items = Array.from(state.items.values());
+  const item = items[index];
+  if (!item?.ref) return;
+  item.ref.scrollIntoView({
+    block: toScrollBlock(options.align ?? "nearest")
+  });
+}
+var defaultIsItemEqualToValue = (a, b) => a === b;
+function valuesEqual(a, b) {
+  if (a === b) return true;
+  if (Array.isArray(a) && Array.isArray(b)) {
+    if (a.length !== b.length) return false;
+    for (let i = 0; i < a.length; i++) {
+      if (a[i] !== b[i]) return false;
+    }
+    return true;
+  }
+  return false;
+}
+function Root(props) {
+  const {
+    children,
+    value,
+    defaultValue,
+    onValueChange,
+    open,
+    defaultOpen,
+    onOpenChange,
+    onOpenChangeComplete,
+    name,
+    disabled = false,
+    required = false,
+    readOnly = false,
+    modal = false,
+    id,
+    items = {},
+    isItemEqualToValue = defaultIsItemEqualToValue,
+    multiple = false,
+    openOnFocus = false
+  } = props;
+  const uid = react.useId();
+  const prefix = id ?? `sel-${uid.replace(/:/g, "")}`;
+  const ids = react.useMemo(
+    () => ({
+      root: prefix,
+      label: `${prefix}-label`,
+      trigger: `${prefix}-trigger`,
+      content: `${prefix}-content`
+    }),
+    [prefix]
+  );
+  const triggerRef = react.useRef(null);
+  const contentRef = react.useRef(null);
+  const listRef = react.useRef(null);
+  const isControlledValue = value !== void 0;
+  const isControlledOpen = open !== void 0;
+  const initialValue = isControlledValue ? multiple ? value ?? [] : value ?? null : multiple ? defaultValue ?? [] : defaultValue ?? null;
+  const storeRef = react.useRef(null);
+  if (!storeRef.current) {
+    storeRef.current = new SelectStore({
+      value: initialValue,
+      open: isControlledOpen ? open ?? false : defaultOpen ?? false
+    });
+  }
+  const store = storeRef.current;
+  const prevControlledValue = react.useRef(value);
+  react.useEffect(() => {
+    if (!isControlledValue) return;
+    if (valuesEqual(value, prevControlledValue.current)) return;
+    prevControlledValue.current = value;
+    if (multiple) {
+      store.setValues(Array.isArray(value) ? value : []);
+    } else {
+      store.setValue(typeof value === "string" ? value : null);
+    }
+  }, [isControlledValue, value, store, multiple]);
+  const prevControlledOpen = react.useRef(open);
+  react.useEffect(() => {
+    if (!isControlledOpen) return;
+    if (open === prevControlledOpen.current) return;
+    prevControlledOpen.current = open;
+    store.setOpen(open ?? false);
+  }, [isControlledOpen, open, store]);
+  const onValueChangeRef = react.useRef(onValueChange);
+  onValueChangeRef.current = onValueChange;
+  const prevStoreValue = react.useRef(store.getState().value);
+  react.useEffect(() => {
+    return store.subscribe(() => {
+      const state = store.getState();
+      if (!valuesEqual(state.value, prevStoreValue.current)) {
+        prevStoreValue.current = state.value;
+        if (multiple) {
+          onValueChangeRef.current?.(
+            Array.isArray(state.value) ? state.value : []
+          );
+        } else {
+          onValueChangeRef.current?.(
+            typeof state.value === "string" ? state.value : null
+          );
+        }
+      }
+    });
+  }, [store, multiple]);
+  const onOpenChangeRef = react.useRef(onOpenChange);
+  onOpenChangeRef.current = onOpenChange;
+  const prevStoreOpen = react.useRef(store.getState().open);
+  react.useEffect(() => {
+    return store.subscribe(() => {
+      const state = store.getState();
+      if (state.open !== prevStoreOpen.current) {
+        prevStoreOpen.current = state.open;
+        onOpenChangeRef.current?.(state.open);
+      }
+    });
+  }, [store]);
+  const close = react.useCallback(() => {
+    const state = store.getState();
+    if (!state.open) return;
+    store.setOpen(false);
+    utils.restoreFocus({
+      openSource: state.openSource ?? "trigger",
+      trigger: triggerRef.current
+    });
+  }, [store]);
+  const selectValue = react.useCallback(
+    (itemValue) => {
+      if (multiple) {
+        store.toggleValue(itemValue, isItemEqualToValue);
+        return;
+      }
+      store.setValue(itemValue);
+      close();
+    },
+    [store, close, multiple, isItemEqualToValue]
+  );
+  const clearValue = react.useCallback(() => {
+    store.clearValue(multiple);
+  }, [store, multiple]);
+  const scrollToIndex = react.useCallback(
+    (index, options) => {
+      scrollToIndexInState(store.getState(), index, options);
+    },
+    [store]
+  );
+  const discoveredItems = react.useMemo(() => extractItemsFromChildren(children), [children]);
+  const mergedItems = react.useMemo(
+    () => ({ ...discoveredItems, ...items }),
+    [discoveredItems, items]
+  );
+  const config = react.useMemo(
+    () => ({
+      disabled,
+      required,
+      readOnly,
+      modal,
+      name,
+      multiple,
+      items: mergedItems,
+      isItemEqualToValue,
+      openOnFocus
+    }),
+    [disabled, required, readOnly, modal, name, multiple, mergedItems, isItemEqualToValue, openOnFocus]
+  );
+  const ctx = react.useMemo(
+    () => ({
+      store,
+      ids,
+      refs: { triggerRef, contentRef, listRef },
+      config,
+      isControlledValue,
+      isControlledOpen,
+      onOpenChangeComplete,
+      close,
+      selectValue,
+      selectAndClose: selectValue,
+      clearValue,
+      scrollToIndex
+    }),
+    [
+      store,
+      ids,
+      config,
+      isControlledValue,
+      isControlledOpen,
+      onOpenChangeComplete,
+      close,
+      selectValue,
+      clearValue,
+      scrollToIndex
+    ]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(SelectContext.Provider, { value: ctx, children });
+}
+function Label({ children, ...props }) {
+  const { ids } = useSelectContext();
+  return /* @__PURE__ */ jsxRuntime.jsx("label", { id: ids.label, htmlFor: ids.trigger, ...props, children });
+}
+function Trigger({
+  children,
+  onClick,
+  onFocus,
+  disabled,
+  openOnFocus: openOnFocusProp,
+  ...props
+}) {
+  const { store, ids, refs, config } = useSelectContext();
+  const open = useSelectStore(store, (s) => s.open);
+  const highlightedValue = useSelectStore(store, (s) => s.highlightedValue);
+  const isDisabled = disabled ?? config.disabled;
+  const isReadOnly = config.readOnly;
+  const openOnFocus = openOnFocusProp ?? config.openOnFocus;
+  const activeDescendantId = open && highlightedValue != null ? `${ids.content}-opt-${highlightedValue}` : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      ref: refs.triggerRef,
+      type: "button",
+      id: ids.trigger,
+      role: "combobox",
+      "aria-haspopup": "listbox",
+      "aria-expanded": open,
+      "aria-controls": open ? ids.content : void 0,
+      "aria-labelledby": ids.label ? `${ids.label} ${ids.trigger}` : void 0,
+      "aria-activedescendant": activeDescendantId,
+      "aria-disabled": isDisabled || isReadOnly || void 0,
+      "data-disabled": isDisabled || isReadOnly ? "true" : void 0,
+      "data-open": open ? "true" : void 0,
+      "data-state": open ? "open" : "closed",
+      disabled: isDisabled || isReadOnly,
+      onClick: (e) => {
+        if (isDisabled || isReadOnly) return;
+        store.setOpen(!open, "trigger");
+        onClick?.(e);
+      },
+      onFocus: (e) => {
+        if (openOnFocus && !isDisabled && !isReadOnly && !open) {
+          store.setOpen(true, "trigger");
+        }
+        onFocus?.(e);
+      },
+      ...props,
+      children
+    }
+  );
+}
+
+// src/utils/labels.ts
+function resolveItemLabel(value, registry, staticItems) {
+  return registry.get(value)?.label ?? staticItems[value] ?? value;
+}
+function mergeOptionValues(registry, staticItems) {
+  const seen = /* @__PURE__ */ new Set();
+  const values = [];
+  for (const value of registry.keys()) {
+    if (!seen.has(value)) {
+      seen.add(value);
+      values.push(value);
+    }
+  }
+  for (const value of Object.keys(staticItems)) {
+    if (!seen.has(value)) {
+      seen.add(value);
+      values.push(value);
+    }
+  }
+  return values;
+}
+function Value({ placeholder = "", ...props }) {
+  const { store, config } = useSelectContext();
+  const value = useSelectStore(store, (s) => s.value);
+  const registry = useSelectStore(store, (s) => s.items);
+  const label = react.useMemo(() => {
+    if (config.multiple) {
+      const values = Array.isArray(value) ? value : [];
+      if (values.length === 0) return null;
+      return values.map((itemValue) => resolveItemLabel(itemValue, registry, config.items)).join(", ");
+    }
+    if (typeof value !== "string") return null;
+    return resolveItemLabel(value, registry, config.items);
+  }, [config.multiple, config.items, registry, value]);
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { "data-placeholder": label == null ? "true" : void 0, ...props, children: label ?? placeholder });
+}
+function Icon({ children, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", ...props, children: children ?? "\u25BE" });
+}
+var PositionerContext = react.createContext(null);
+function usePositionerContext() {
+  return react.useContext(PositionerContext);
+}
+var PortalContext = react.createContext(false);
+function usePortalContext() {
+  return react.useContext(PortalContext);
+}
+function resolvePortalContainer(container) {
+  if (container == null) {
+    return typeof document !== "undefined" ? document.body : null;
+  }
+  if (typeof HTMLElement !== "undefined" && container instanceof HTMLElement) {
+    return container;
+  }
+  if (typeof container === "object" && "current" in container) {
+    return container.current;
+  }
+  return null;
+}
+function Portal({ children, container = null }) {
+  const mountNode = resolvePortalContainer(container);
+  if (!mountNode) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(PortalContext.Provider, { value: true, children: reactDom.createPortal(children, mountNode) });
+}
+
+// src/utils/align-with-trigger.ts
+function getAlignItemWithTriggerOffset(alignItemWithTrigger, side, triggerHeight, sideOffset) {
+  if (!alignItemWithTrigger || triggerHeight <= 0) {
+    return sideOffset;
+  }
+  if (side === "bottom" || side === "top") {
+    return -triggerHeight + sideOffset;
+  }
+  return sideOffset;
+}
+function shouldDisableFlipForAlign(alignItemWithTrigger) {
+  return alignItemWithTrigger;
+}
+
+// src/utils/use-align-item-with-trigger.ts
+function useAlignItemWithTrigger({
+  alignItemWithTrigger,
+  side,
+  sideOffset,
+  open,
+  refs
+}) {
+  const [triggerHeight, setTriggerHeight] = react.useState(0);
+  react.useLayoutEffect(() => {
+    if (!alignItemWithTrigger || !open) {
+      setTriggerHeight(0);
+      return;
+    }
+    const trigger = refs.triggerRef.current;
+    if (!trigger) return;
+    const update = () => setTriggerHeight(trigger.offsetHeight);
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(trigger);
+    return () => observer.disconnect();
+  }, [alignItemWithTrigger, open, refs.triggerRef]);
+  const effectiveSideOffset = getAlignItemWithTriggerOffset(
+    alignItemWithTrigger,
+    side,
+    triggerHeight,
+    sideOffset
+  );
+  const avoidCollisionsOverride = shouldDisableFlipForAlign(alignItemWithTrigger) ? false : void 0;
+  return {
+    alignItemWithTriggerActive: alignItemWithTrigger && triggerHeight > 0,
+    effectiveSideOffset,
+    avoidCollisionsOverride
+  };
+}
+function Content({
+  children,
+  forceMount,
+  side = "bottom",
+  align = "start",
+  sideOffset = 4,
+  alignOffset = 0,
+  avoidCollisions = true,
+  collisionPadding = 8,
+  portal = false,
+  container = null,
+  sameWidth = false,
+  alignItemWithTrigger = false,
+  lazyMount = true,
+  unmountOnExit = false,
+  onOpenChangeComplete: onOpenChangeCompleteProp,
+  style,
+  onKeyDown,
+  ...props
+}) {
+  const {
+    store,
+    ids,
+    refs,
+    config,
+    close,
+    selectValue,
+    onOpenChangeComplete: onOpenChangeCompleteRoot
+  } = useSelectContext();
+  const open = useSelectStore(store, (s) => s.open);
+  const highlightedValue = useSelectStore(store, (s) => s.highlightedValue);
+  const items = useSelectStore(store, (s) => s.items);
+  const positionerContext = usePositionerContext();
+  const isInsidePortal = usePortalContext();
+  const onOpenChangeComplete = onOpenChangeCompleteProp ?? onOpenChangeCompleteRoot;
+  const ownAlign = useAlignItemWithTrigger({
+    alignItemWithTrigger: positionerContext ? false : alignItemWithTrigger,
+    side,
+    sideOffset,
+    open,
+    refs
+  });
+  const ownFloating = utils.useFloating({
+    open: positionerContext ? false : open,
+    side,
+    align,
+    sideOffset: ownAlign.effectiveSideOffset,
+    alignOffset,
+    avoidCollisions: ownAlign.avoidCollisionsOverride ?? avoidCollisions,
+    collisionPadding,
+    sameWidth
+  });
+  const { setReference } = ownFloating;
+  const setFloating = positionerContext?.setFloating ?? ownFloating.setFloating;
+  const floatingStyles = positionerContext?.floatingStyles ?? ownFloating.floatingStyles;
+  const isPositioned = positionerContext?.isPositioned ?? ownFloating.isPositioned;
+  const alignItemWithTriggerActive = positionerContext?.alignItemWithTriggerActive ?? ownAlign.alignItemWithTriggerActive;
+  react.useLayoutEffect(() => {
+    if (positionerContext || !open) return;
+    setReference(refs.triggerRef.current);
+  }, [open, positionerContext, refs.triggerRef, setReference]);
+  const mergedRef = react.useCallback(
+    (node) => {
+      refs.contentRef.current = node;
+      setFloating(node);
+    },
+    [refs.contentRef, setFloating]
+  );
+  const { present } = utils.usePresence({
+    open,
+    lazyMount,
+    unmountOnExit,
+    onOpenChangeComplete
+  });
+  utils.useClickOutside([refs.contentRef, refs.triggerRef], close, open);
+  utils.useEscapeKey({
+    enabled: open,
+    stopPropagation: true,
+    onEscape: close
+  });
+  utils.useFocusTrap(refs.contentRef, open && config.modal);
+  const navItems = Array.from(items.values()).map((item) => ({
+    value: item.value,
+    disabled: item.disabled
+  }));
+  const { onKeyDown: onNavKeyDown } = utils.useListNavigation({
+    enabled: open && !config.disabled && !config.readOnly,
+    items: navItems,
+    highlightedValue,
+    onHighlight: (v) => store.setHighlightedValue(v),
+    loop: true
+  });
+  const typeaheadItems = Array.from(items.values()).map((item) => ({
+    value: item.value,
+    disabled: item.disabled,
+    textValue: item.textValue
+  }));
+  const { onKeyDown: onTypeaheadKeyDown } = utils.useTypeahead({
+    enabled: open && !config.disabled && !config.readOnly,
+    items: typeaheadItems,
+    onMatch: (v) => store.setHighlightedValue(v)
+  });
+  const handleKeyDown = react.useCallback(
+    (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        if (highlightedValue != null) {
+          e.preventDefault();
+          const item = items.get(highlightedValue);
+          if (item && !item.disabled) {
+            selectValue(highlightedValue);
+          }
+        }
+        return;
+      }
+      onNavKeyDown(e);
+      onTypeaheadKeyDown(e);
+      onKeyDown?.(e);
+    },
+    [highlightedValue, items, selectValue, onNavKeyDown, onTypeaheadKeyDown, onKeyDown]
+  );
+  const [transitionsReady, setTransitionsReady] = react.useState(false);
+  react.useEffect(() => {
+    if (!open || !isPositioned) {
+      setTransitionsReady(false);
+      return;
+    }
+    const raf = requestAnimationFrame(() => setTransitionsReady(true));
+    return () => cancelAnimationFrame(raf);
+  }, [open, isPositioned]);
+  react.useEffect(() => {
+    if (!open || !refs.contentRef.current) return;
+    const state = store.getState();
+    if (state.highlightedValue == null) {
+      const first = navItems.find((i) => !i.disabled);
+      if (first) store.setHighlightedValue(first.value);
+    }
+    refs.contentRef.current.focus({ preventScroll: true });
+  }, [open]);
+  react.useEffect(() => {
+    if (!open || !highlightedValue) return;
+    const item = items.get(highlightedValue);
+    if (typeof item?.ref?.scrollIntoView === "function") {
+      item.ref.scrollIntoView({ block: "nearest" });
+    }
+  }, [highlightedValue, items, open]);
+  if (!present && !forceMount) return null;
+  const content = /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: mergedRef,
+      id: ids.content,
+      "data-state": open ? "open" : "closed",
+      "data-open": open ? "true" : void 0,
+      "data-align-trigger": alignItemWithTriggerActive ? "true" : void 0,
+      "aria-modal": config.modal ? "true" : void 0,
+      tabIndex: -1,
+      style: {
+        ...floatingStyles,
+        ...!open ? { display: "none" } : void 0,
+        ...open && !isPositioned ? { opacity: 0, pointerEvents: "none" } : void 0,
+        ...open && !transitionsReady ? { transition: "none" } : void 0,
+        ...style
+      },
+      onKeyDown: handleKeyDown,
+      ...props,
+      children
+    }
+  );
+  if (isInsidePortal || !portal) {
+    return content;
+  }
+  const mountNode = resolvePortalContainer(container);
+  if (!mountNode) {
+    return content;
+  }
+  return reactDom.createPortal(content, mountNode);
+}
+function Positioner({
+  children,
+  side = "bottom",
+  align = "start",
+  sideOffset = 4,
+  alignOffset = 0,
+  avoidCollisions = true,
+  collisionPadding = 8,
+  sameWidth = false,
+  alignItemWithTrigger = false
+}) {
+  const { store, refs } = useSelectContext();
+  const open = useSelectStore(store, (s) => s.open);
+  const { alignItemWithTriggerActive, effectiveSideOffset, avoidCollisionsOverride } = useAlignItemWithTrigger({
+    alignItemWithTrigger,
+    side,
+    sideOffset,
+    open,
+    refs
+  });
+  const { setReference, setFloating, floatingStyles, isPositioned } = utils.useFloating({
+    open,
+    side,
+    align,
+    sideOffset: effectiveSideOffset,
+    alignOffset,
+    avoidCollisions: avoidCollisionsOverride ?? avoidCollisions,
+    collisionPadding,
+    sameWidth
+  });
+  react.useLayoutEffect(() => {
+    if (!open) return;
+    setReference(refs.triggerRef.current);
+  }, [open, refs.triggerRef, setReference]);
+  const contextValue = react.useMemo(
+    () => ({
+      floatingStyles,
+      isPositioned,
+      setFloating,
+      alignItemWithTriggerActive
+    }),
+    [floatingStyles, isPositioned, setFloating, alignItemWithTriggerActive]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(PositionerContext.Provider, { value: contextValue, children });
+}
+function Backdrop({ style, ...props }) {
+  const { store, config } = useSelectContext();
+  const open = useSelectStore(store, (s) => s.open);
+  if (!config.modal) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "presentation",
+      "aria-hidden": "true",
+      "data-state": open ? "open" : "closed",
+      style: {
+        position: "fixed",
+        inset: 0,
+        pointerEvents: open ? void 0 : "none",
+        ...style
+      },
+      ...props
+    }
+  );
+}
+function ClearTrigger({ onClick, ...props }) {
+  const { store, config, clearValue } = useSelectContext();
+  const value = useSelectStore(store, (s) => s.value);
+  const hasValue = config.multiple ? Array.isArray(value) && value.length > 0 : value != null;
+  const handleActivate = react.useCallback(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      clearValue();
+      onClick?.(e);
+    },
+    [clearValue, onClick]
+  );
+  const handleKeyDown = react.useCallback(
+    (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        handleActivate(e);
+      }
+    },
+    [handleActivate]
+  );
+  if (!hasValue || config.disabled || config.readOnly) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      role: "button",
+      tabIndex: 0,
+      "aria-label": "Clear selection",
+      onClick: handleActivate,
+      onKeyDown: handleKeyDown,
+      ...props
+    }
+  );
+}
+function List({ children, scrollToIndex, ...props }) {
+  const { ids, refs, config, scrollToIndex: scrollToIndexFn } = useSelectContext();
+  react.useEffect(() => {
+    if (scrollToIndex == null || scrollToIndex < 0) return;
+    scrollToIndexFn(scrollToIndex);
+  }, [scrollToIndex, scrollToIndexFn]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "ul",
+    {
+      ref: refs.listRef,
+      role: "listbox",
+      id: `${ids.content}-list`,
+      "aria-labelledby": ids.label,
+      "aria-multiselectable": config.multiple ? true : void 0,
+      ...props,
+      children
+    }
+  );
+}
+Item.displayName = "Select.Item";
+function Item({
+  value,
+  disabled = false,
+  textValue,
+  children,
+  onClick,
+  onPointerMove,
+  ...props
+}) {
+  const { store, ids, config, selectValue } = useSelectContext();
+  const selectedValue = useSelectStore(store, (s) => s.value);
+  const highlightedValue = useSelectStore(store, (s) => s.highlightedValue);
+  const liRef = react.useRef(null);
+  const isSelected = config.multiple ? Array.isArray(selectedValue) && selectedValue.some((item) => config.isItemEqualToValue(item, value)) : typeof selectedValue === "string" && config.isItemEqualToValue(selectedValue, value);
+  const isHighlighted = highlightedValue === value;
+  const isDisabled = disabled || config.disabled || config.readOnly;
+  react.useLayoutEffect(() => {
+    const el = liRef.current;
+    const label = textValue ?? (el?.textContent ?? value);
+    store.registerItem({
+      value,
+      label,
+      textValue: textValue ?? label,
+      disabled: isDisabled,
+      ref: el,
+      groupId: null
+    });
+    return () => store.unregisterItem(value);
+  }, [value, isDisabled, store, textValue, children]);
+  react.useLayoutEffect(() => {
+    store.updateItemRef(value, liRef.current);
+  });
+  const handleClick = react.useCallback(
+    (e) => {
+      if (isDisabled) return;
+      selectValue(value);
+      onClick?.(e);
+    },
+    [isDisabled, selectValue, value, onClick]
+  );
+  const handlePointerMove = react.useCallback(
+    (e) => {
+      if (!isDisabled) store.setHighlightedValue(value);
+      onPointerMove?.(e);
+    },
+    [isDisabled, store, value, onPointerMove]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "li",
+    {
+      ref: liRef,
+      id: `${ids.content}-opt-${value}`,
+      role: "option",
+      "aria-selected": isSelected,
+      "aria-disabled": isDisabled || void 0,
+      "data-highlighted": isHighlighted ? "true" : void 0,
+      "data-selected": isSelected ? "true" : void 0,
+      "data-disabled": isDisabled ? "true" : void 0,
+      tabIndex: -1,
+      onClick: handleClick,
+      onPointerMove: handlePointerMove,
+      ...props,
+      children
+    }
+  );
+}
+function ItemText({ children, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { ...props, children });
+}
+function ItemIndicator({ value, children, style, ...props }) {
+  const { store } = useSelectContext();
+  const selectedValue = useSelectStore(store, (s) => s.value);
+  const isSelected = value != null ? selectedValue === value : false;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      "data-state": isSelected ? "checked" : "unchecked",
+      style: { visibility: isSelected ? void 0 : "hidden", ...style },
+      ...props,
+      children
+    }
+  );
+}
+var GroupContext = react.createContext(null);
+function useGroupContext() {
+  return react.useContext(GroupContext);
+}
+function Group({ children, ...props }) {
+  const groupId = react.useId();
+  const labelId = `${groupId}-label`;
+  return /* @__PURE__ */ jsxRuntime.jsx(GroupContext.Provider, { value: { labelId }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { role: "group", "aria-labelledby": labelId, ...props, children }) });
+}
+function GroupLabel({ children, ...props }) {
+  const group = useGroupContext();
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { id: group?.labelId, ...props, children });
+}
+function HiddenSelect() {
+  const { store, config } = useSelectContext();
+  const value = useSelectStore(store, (s) => s.value);
+  const registry = useSelectStore(store, (s) => s.items);
+  if (!config.name) return null;
+  const optionValues = mergeOptionValues(registry, config.items);
+  const selectedValues = config.multiple ? Array.isArray(value) ? value : [] : typeof value === "string" ? [value] : [];
+  if (config.multiple) {
+    const allOptionValues = [
+      ...optionValues,
+      ...selectedValues.filter(
+        (selected) => !optionValues.some((v) => config.isItemEqualToValue(v, selected))
+      )
+    ];
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "select",
+      {
+        "aria-hidden": "true",
+        tabIndex: -1,
+        name: config.name,
+        multiple: true,
+        required: config.required,
+        disabled: config.disabled,
+        value: selectedValues,
+        onChange: () => void 0,
+        style: {
+          position: "absolute",
+          border: 0,
+          width: 1,
+          height: 1,
+          padding: 0,
+          margin: 0,
+          overflow: "hidden",
+          clip: "rect(0,0,0,0)",
+          whiteSpace: "nowrap",
+          pointerEvents: "none",
+          opacity: 0
+        },
+        "data-part": "hidden-select",
+        children: allOptionValues.map((optionValue) => {
+          const record = registry.get(optionValue);
+          return /* @__PURE__ */ jsxRuntime.jsx("option", { value: optionValue, disabled: record?.disabled, children: resolveItemLabel(optionValue, registry, config.items) }, optionValue);
+        })
+      }
+    );
+  }
+  const singleValue = typeof value === "string" ? value : "";
+  const hasValueOption = singleValue !== "" && optionValues.some((v) => config.isItemEqualToValue(v, singleValue));
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "select",
+    {
+      "aria-hidden": "true",
+      tabIndex: -1,
+      name: config.name,
+      required: config.required,
+      disabled: config.disabled,
+      value: singleValue,
+      onChange: () => void 0,
+      style: {
+        position: "absolute",
+        border: 0,
+        width: 1,
+        height: 1,
+        padding: 0,
+        margin: 0,
+        overflow: "hidden",
+        clip: "rect(0,0,0,0)",
+        whiteSpace: "nowrap",
+        pointerEvents: "none",
+        opacity: 0
+      },
+      "data-part": "hidden-select",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", disabled: true, hidden: true }),
+        optionValues.map((optionValue) => {
+          const record = registry.get(optionValue);
+          return /* @__PURE__ */ jsxRuntime.jsx("option", { value: optionValue, disabled: record?.disabled, children: resolveItemLabel(optionValue, registry, config.items) }, optionValue);
+        }),
+        singleValue !== "" && !hasValueOption && /* @__PURE__ */ jsxRuntime.jsx("option", { value: singleValue, children: singleValue })
+      ]
+    }
+  );
+}
+function useListScrollOverflow(listRef, enabled) {
+  const [canScrollUp, setCanScrollUp] = react.useState(false);
+  const [canScrollDown, setCanScrollDown] = react.useState(false);
+  const update = react.useCallback(() => {
+    const list = listRef.current;
+    if (!list) {
+      setCanScrollUp(false);
+      setCanScrollDown(false);
+      return;
+    }
+    const { scrollTop, scrollHeight, clientHeight } = list;
+    setCanScrollUp(scrollTop > 0);
+    setCanScrollDown(scrollTop + clientHeight < scrollHeight - 1);
+  }, [listRef]);
+  react.useLayoutEffect(() => {
+    if (!enabled) {
+      setCanScrollUp(false);
+      setCanScrollDown(false);
+      return;
+    }
+    update();
+    const list = listRef.current;
+    if (!list) return;
+    list.addEventListener("scroll", update, { passive: true });
+    const observer = new ResizeObserver(update);
+    observer.observe(list);
+    return () => {
+      list.removeEventListener("scroll", update);
+      observer.disconnect();
+    };
+  }, [enabled, listRef, update]);
+  return { canScrollUp, canScrollDown, update };
+}
+var SCROLL_STEP_PX = 40;
+function ScrollButton({
+  direction,
+  keepMounted = false,
+  onClick,
+  children,
+  style,
+  ...props
+}) {
+  const { store, refs } = useSelectContext();
+  const open = useSelectStore(store, (s) => s.open);
+  const isUp = direction === "up";
+  const { canScrollUp, canScrollDown, update } = useListScrollOverflow(refs.listRef, open);
+  const visible = isUp ? canScrollUp : canScrollDown;
+  const handleClick = react.useCallback(
+    (event) => {
+      const list = refs.listRef.current;
+      if (list) {
+        const delta = isUp ? -SCROLL_STEP_PX : SCROLL_STEP_PX;
+        if (typeof list.scrollBy === "function") {
+          list.scrollBy({ top: delta, behavior: "smooth" });
+        } else {
+          list.scrollTop += delta;
+        }
+        list.dispatchEvent(new Event("scroll"));
+        update();
+      }
+      onClick?.(event);
+    },
+    [isUp, onClick, refs.listRef, update]
+  );
+  if (!visible && !keepMounted) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      "aria-hidden": true,
+      tabIndex: -1,
+      "data-direction": direction,
+      "data-visible": visible ? "true" : "false",
+      style: {
+        display: visible || keepMounted ? void 0 : "none",
+        ...style
+      },
+      onClick: handleClick,
+      ...props,
+      children: children ?? (isUp ? "\u25B2" : "\u25BC")
+    }
+  );
+}
+function ScrollUpButton(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(ScrollButton, { direction: "up", ...props });
+}
+function ScrollDownButton(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(ScrollButton, { direction: "down", ...props });
+}
+
+exports.Select = index_parts_exports;
+exports.scrollToIndexInState = scrollToIndexInState;
+exports.useSelectContext = useSelectContext;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map