@multiplatform.one/forms 6.0.0

package/dist/esm/fields/Select/index.mjs

@@ -0,0 +1,1111 @@
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, memo } from "react";
+import { CaretDownIcon, CheckIcon } from "@phosphor-icons/react";
+import { useClick, useDismiss, useInteractions, useListNavigation, useRole, useTypeahead, FloatingFocusManager } from "@floating-ui/react";
+import { Paragraph, Text, View, YStack, isWeb, styled } from "tamagui";
+import { Chip } from "../../Chip/index.mjs";
+import { Skeleton } from "../../Skeleton/index.mjs";
+import { Field, FieldLayout } from "../../fieldLayout.mjs";
+import { Input as InputParts } from "../../InputParts/index.mjs";
+import { formCommonColors, formInputColors } from "../../shared/colorRamps.mjs";
+import { getFieldError, getFieldHeight, mergeFieldHandler, useFormField, useResolvedValidators } from "../../shared/utils.mjs";
+import { SyncFocusToOpen, ScrollArrow } from "../../shared/floatingList.mjs";
+import { FloatingPanel, useFloatingPanel, panelTransition, panelViewportPadding, useViewportGtSm } from "../../FloatingPanel/index.mjs";
+import { zIndex } from "../../shared/zIndex.mjs";
+import { useDragScroll } from "../../shared/useDragScroll.mjs";
+import { useIsInTableCell } from "../../shared/tableCellContext.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+const SelectRow = styled(View, {
+  name: "SelectRow",
+  flexDirection: "row",
+  alignItems: "center",
+  gap: "$2",
+  paddingHorizontal: "$3",
+  cursor: "default",
+  outlineStyle: "none",
+  hoverStyle: {
+    backgroundColor: formInputColors.background.focus
+  },
+  focusStyle: {
+    outlineStyle: "none"
+  },
+  focusVisibleStyle: {
+    outlineStyle: "none"
+  },
+  variants: {
+    selected: {
+      true: {
+        backgroundColor: formInputColors.background.base
+      },
+      false: {
+        backgroundColor: "transparent"
+      }
+    },
+    active: {
+      true: {
+        backgroundColor: formInputColors.background.focus
+      },
+      false: {}
+    },
+    size: {
+      "...size": val => ({
+        height: val
+      })
+    }
+  }
+});
+const GroupHeader = styled(Text, {
+  name: "SelectGroupHeader",
+  paddingHorizontal: "$3",
+  paddingVertical: "$2",
+  paddingTop: "$3",
+  fontWeight: "600",
+  fontSize: "$2",
+  opacity: 0.6,
+  numberOfLines: 1,
+  userSelect: "none",
+  cursor: "default"
+});
+function groupOptions(options) {
+  const hasGroups = options.some(o => o.group);
+  if (!hasGroups) {
+    return {
+      items: options.map((option, index) => ({
+        type: "option",
+        option,
+        flatIndex: index
+      })),
+      flatOptions: options
+    };
+  }
+  const ungrouped = options.filter(o => !o.group);
+  const grouped = options.filter(o => o.group);
+  const groups = /* @__PURE__ */new Map();
+  for (const option of grouped) {
+    const groupLabel = option.group;
+    if (!groups.has(groupLabel)) {
+      groups.set(groupLabel, []);
+    }
+    groups.get(groupLabel).push(option);
+  }
+  const items = [];
+  const flatOptions = [];
+  for (const option of ungrouped) {
+    items.push({
+      type: "option",
+      option,
+      flatIndex: flatOptions.length
+    });
+    flatOptions.push(option);
+  }
+  for (const [groupLabel, groupOptions2] of groups) {
+    items.push({
+      type: "header",
+      label: groupLabel
+    });
+    for (const option of groupOptions2) {
+      items.push({
+        type: "option",
+        option,
+        flatIndex: flatOptions.length
+      });
+      flatOptions.push(option);
+    }
+  }
+  return {
+    items,
+    flatOptions
+  };
+}
+const SelectItem = memo(function SelectItem2({
+  option,
+  index,
+  isSelected,
+  isActive,
+  suppressHover,
+  handlers,
+  setActiveIndex,
+  setControlledScrolling,
+  optionCount
+}) {
+  const ctx = handlers.current;
+  const isDown = k => k === "ArrowDown" || k === "j";
+  const isUp = k => k === "ArrowUp" || k === "k";
+  return /* @__PURE__ */jsxs(SelectRow, {
+    ref: node => {
+      ctx.listItemsRef.current[index] = node;
+    },
+    ...ctx.getItemProps({
+      onKeyDown(event) {
+        if (event.key === "Enter" || event.key === " " || event.code === "Space") {
+          event.preventDefault();
+          event.stopPropagation();
+          ctx.handleSelect(index);
+          if (event.key === "Enter" || event.code === "Enter" || !ctx.multiple) ctx.setOpen(false);
+        } else if (isDown(event.key) || isUp(event.key)) {
+          event.preventDefault();
+          event.stopPropagation();
+          if (optionCount === 0) return;
+          const nextIndex = isDown(event.key) ? index + 1 >= optionCount ? 0 : index + 1 : index - 1 < 0 ? optionCount - 1 : index - 1;
+          setActiveIndex(nextIndex);
+          setControlledScrolling(true);
+        }
+      },
+      onClick(event) {
+        if (ctx.allowSelectRef.current) ctx.handleSelect(index, event);
+      },
+      onMouseUp() {
+        if (!ctx.allowMouseUpRef.current) {
+          ctx.allowMouseUpRef.current = true;
+          ctx.allowSelectRef.current = true;
+          return;
+        }
+        if (!ctx.multiple) {
+          if (ctx.allowSelectRef.current) ctx.handleSelect(index);
+        }
+        if (ctx.selectTimeoutRef.current) clearTimeout(ctx.selectTimeoutRef.current);
+        ctx.selectTimeoutRef.current = setTimeout(() => {
+          ctx.allowSelectRef.current = true;
+        });
+      }
+    }),
+    role: "option",
+    tabIndex: -1,
+    selected: isSelected,
+    active: isActive,
+    "aria-selected": isSelected,
+    "data-state": isSelected ? "active" : "inactive",
+    size: ctx.knobProps.sizeToken,
+    onMouseEnter: () => setActiveIndex(index),
+    ...(suppressHover ? {
+      hoverStyle: {
+        backgroundColor: isActive ? formInputColors.background.focus : isSelected ? formInputColors.background.base : "transparent"
+      }
+    } : {
+      hoverStyle: {
+        backgroundColor: isSelected ? formInputColors.background.base : formInputColors.background.focus
+      }
+    }),
+    ...(ctx.knobProps.transition ? {
+      animation: ctx.knobProps.transition
+    } : void 0),
+    children: [/* @__PURE__ */jsx(Text, {
+      fontFamily: ctx.knobProps.body.fontFamily,
+      fontWeight: ctx.knobProps.body.fontWeight,
+      color: ctx.textColor,
+      numberOfLines: 1,
+      flex: 1,
+      children: option.label
+    }), isSelected && /* @__PURE__ */jsx(CheckIcon, {
+      size: 14
+    })]
+  });
+});
+function FloatingSelectCore({
+  options,
+  value,
+  onValueChange,
+  onBlur,
+  placeholder,
+  disabled,
+  id,
+  knobProps,
+  groupLabel,
+  multiple,
+  dismissible
+}) {
+  const inTableCell = useIsInTableCell();
+  const [open, setOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(null);
+  const [controlledScrolling, setControlledScrolling] = useState(false);
+  const labelCacheRef = useRef(/* @__PURE__ */new Map());
+  for (const o of options) labelCacheRef.current.set(o.value, o.label);
+  const getLabel = useCallback(v => labelCacheRef.current.get(v) ?? v, []);
+  const selectedValues = useMemo(() => {
+    if (!multiple) return [];
+    const vals = Array.isArray(value) ? value : value ? [value] : [];
+    return [...vals].sort((a, b) => getLabel(a).localeCompare(getLabel(b)));
+  }, [multiple, value, getLabel]);
+  const {
+    items: groupedItems,
+    flatOptions
+  } = useMemo(() => groupOptions(options), [options]);
+  const selectedIndex = useMemo(() => multiple ? -1 : options.findIndex(option => option.value === value), [options, value, multiple]);
+  const selectedOption = selectedIndex >= 0 ? options[selectedIndex] : void 0;
+  const isSelected = useCallback(optionValue => multiple ? selectedValues.includes(optionValue) : optionValue === value, [multiple, selectedValues, value]);
+  const handleDismiss = useCallback(valueToRemove => {
+    if (!multiple) return;
+    const current = Array.isArray(value) ? value : value ? [value] : [];
+    const next = current.filter(v => v !== valueToRemove);
+    onValueChange?.(next);
+  }, [multiple, value, onValueChange]);
+  const textColor = knobProps.textAccentColor;
+  const listItemsRef = useRef([]);
+  const listContentRef = useRef(options.map(option => option.label));
+  const allowSelectRef = useRef(false);
+  const allowMouseUpRef = useRef(true);
+  const selectTimeoutRef = useRef(null);
+  const stateRef = useRef({
+    isTyping: false
+  });
+  const overlayStyle = useRef(null);
+  useEffect(() => {
+    listContentRef.current = options.map(option => option.label);
+  }, [options]);
+  const sortedOptionsRef = useRef(options);
+  const computeSortedOptions = useCallback(() => {
+    if (!multiple) {
+      sortedOptionsRef.current = options;
+      return;
+    }
+    const selected = Array.isArray(value) ? value : value ? [value] : [];
+    if (selected.length === 0) {
+      sortedOptionsRef.current = options;
+      return;
+    }
+    const selectedSet = new Set(selected);
+    const first = options.filter(o => selectedSet.has(o.value)).sort((a, b) => a.label.localeCompare(b.label));
+    const rest = options.filter(o => !selectedSet.has(o.value));
+    sortedOptionsRef.current = [...first, ...rest];
+  }, [options, value, multiple]);
+  const programmaticScrollRef = useRef(0);
+  const pinnedTopRef = useRef(0);
+  const pinnedHeightRef = useRef(0);
+  const grownRef = useRef(false);
+  const growUpOnlyRef = useRef(false);
+  const growDownOnlyRef = useRef(false);
+  const lastScrollTopRef = useRef(0);
+  const repositionRef = useRef(null);
+  const panel = useFloatingPanel({
+    open,
+    onOpenChange: setOpen,
+    disabled,
+    repositionRef,
+    wheelGrowRef: selectedIndex >= 0 ? grownRef : void 0,
+    onBeforeOpen: () => {
+      computeSortedOptions();
+      overlayStyle.current = null;
+      pinnedTopRef.current = 0;
+      pinnedHeightRef.current = 0;
+      grownRef.current = false;
+      growUpOnlyRef.current = false;
+      growDownOnlyRef.current = false;
+      lastScrollTopRef.current = 0;
+      programmaticScrollRef.current = 0;
+    }
+  });
+  const {
+    scrollRef: dragScrollRef,
+    dragProps
+  } = useDragScroll({
+    direction: "vertical"
+  });
+  useEffect(() => {
+    if (panel.refs.floating.current) {
+      dragScrollRef.current = panel.refs.floating.current;
+    }
+  }, [panel.refs.floating.current, dragScrollRef]);
+  useEffect(() => {
+    if (open) {
+      setActiveIndex(selectedIndex >= 0 ? selectedIndex : 0);
+    } else {
+      setActiveIndex(null);
+      setControlledScrolling(false);
+    }
+  }, [open, selectedIndex]);
+  const repositionOverlay = useCallback(() => {
+    const dropdownElement = panel.refs.floating.current;
+    const selectedItemIndex = selectedIndex >= 0 ? selectedIndex : 0;
+    const selectedItem = listItemsRef.current[selectedItemIndex];
+    const trigger = panel.triggerRef.current;
+    if (!dropdownElement || !selectedItem || !trigger) return;
+    const isInitial = panel.initializingRef.current;
+    if (isInitial) dropdownElement.style.transition = "none";
+    if (pinnedTopRef.current === 0 && pinnedHeightRef.current === 0) {
+      programmaticScrollRef.current++;
+      dropdownElement.scrollTop = 0;
+    }
+    const triggerBounds = trigger.getBoundingClientRect();
+    const viewportHeight = window.innerHeight;
+    const computedStyle = getComputedStyle(dropdownElement);
+    const borderTopWidth = parseFloat(computedStyle.borderTopWidth) || 0;
+    const borderBottomWidth = parseFloat(computedStyle.borderBottomWidth) || 0;
+    const totalBorderWidth = borderTopWidth + borderBottomWidth;
+    const scrollContentHeight = dropdownElement.scrollHeight;
+    const totalContentHeight = scrollContentHeight + totalBorderWidth;
+    let idealTop;
+    if (selectedIndex >= 0) {
+      idealTop = triggerBounds.top - borderTopWidth - selectedItem.offsetTop;
+    } else if (panel.placement.startsWith("top")) {
+      idealTop = triggerBounds.bottom - totalContentHeight;
+    } else {
+      idealTop = triggerBounds.top - borderTopWidth - (selectedItem.offsetTop ?? 0);
+    }
+    const idealBottom = idealTop + totalContentHeight;
+    const pinnedTop = Math.max(panelViewportPadding, idealTop);
+    const pinnedBottom = Math.min(viewportHeight - panelViewportPadding, idealBottom);
+    const pinnedHeight = Math.max(120, pinnedBottom - pinnedTop);
+    if (pinnedTopRef.current === 0 && pinnedHeightRef.current === 0) {
+      pinnedTopRef.current = pinnedTop;
+      pinnedHeightRef.current = pinnedHeight;
+    }
+    let top = pinnedTopRef.current;
+    let height = pinnedHeightRef.current;
+    if (grownRef.current) {
+      const canGrowDown = Math.max(0, viewportHeight - panelViewportPadding - (top + height));
+      height += canGrowDown;
+      const canGrowUp = Math.max(0, top - panelViewportPadding);
+      top -= canGrowUp;
+      height += canGrowUp;
+    }
+    if (growUpOnlyRef.current) {
+      const canGrowUp = Math.max(0, top - panelViewportPadding);
+      top -= canGrowUp;
+      height += canGrowUp;
+    }
+    if (growDownOnlyRef.current) {
+      const canGrowDown = Math.max(0, viewportHeight - panelViewportPadding - (top + height));
+      height += canGrowDown;
+    }
+    height = Math.min(height, viewportHeight - top - panelViewportPadding);
+    height = Math.min(height, totalContentHeight);
+    height = Math.max(120, height);
+    const availableViewport = viewportHeight - 2 * panelViewportPadding;
+    if ((grownRef.current || growUpOnlyRef.current || growDownOnlyRef.current) && height < availableViewport) {
+      if (panel.placement.startsWith("top")) {
+        top = panelViewportPadding;
+      } else {
+        top = viewportHeight - panelViewportPadding - height;
+      }
+    }
+    const cachedOverlayStyle = overlayStyle.current;
+    if (!cachedOverlayStyle || cachedOverlayStyle.top !== top || cachedOverlayStyle.maxHeight !== height) {
+      dropdownElement.style.top = `${top}px`;
+      dropdownElement.style.maxHeight = `${height}px`;
+      dropdownElement.style.height = "";
+      overlayStyle.current = {
+        top,
+        maxHeight: height
+      };
+      void dropdownElement.offsetHeight;
+    }
+    if (!grownRef.current && !growUpOnlyRef.current && !growDownOnlyRef.current) {
+      const maxScrollTop = dropdownElement.scrollHeight - dropdownElement.clientHeight;
+      if (selectedIndex >= 0) {
+        const neededScroll = top + borderTopWidth + selectedItem.offsetTop - triggerBounds.top;
+        const clampedScrollTop = Math.max(0, Math.min(neededScroll, maxScrollTop));
+        if (Math.abs(dropdownElement.scrollTop - clampedScrollTop) > 0.5) {
+          programmaticScrollRef.current++;
+          dropdownElement.scrollTop = clampedScrollTop;
+        }
+        if (Math.abs(neededScroll - clampedScrollTop) > 0.5) {
+          const scrollDeficit = neededScroll - clampedScrollTop;
+          top -= scrollDeficit;
+          top = Math.max(panelViewportPadding, top);
+          const remainingContentHeight = totalContentHeight - clampedScrollTop;
+          const adjustedMaxHeight = Math.min(remainingContentHeight, viewportHeight - top - panelViewportPadding);
+          dropdownElement.style.top = `${top}px`;
+          dropdownElement.style.maxHeight = `${adjustedMaxHeight}px`;
+          overlayStyle.current = {
+            top,
+            maxHeight: adjustedMaxHeight
+          };
+        }
+      }
+    }
+    panel.initializingRef.current = false;
+    void dropdownElement.offsetHeight;
+    if (isInitial) dropdownElement.style.transition = panelTransition;
+    requestAnimationFrame(() => {
+      if (dropdownElement) {
+        panel.updateArrows(dropdownElement);
+        requestAnimationFrame(() => {
+          if (dropdownElement) panel.updateArrows(dropdownElement);
+        });
+      }
+    });
+  }, [selectedIndex, panel.refs, panel.updateArrows, panel.placement, options.length]);
+  repositionRef.current = repositionOverlay;
+  useLayoutEffect(() => {
+    if (!open || !panel.mounted) return;
+    repositionOverlay();
+  }, [open, panel.mounted, selectedIndex, repositionOverlay, panel.y]);
+  const onMatch = useCallback(index => {
+    if (open) {
+      setActiveIndex(index);
+    } else {
+      const matchedOption = options[index];
+      if (matchedOption) onValueChange?.(matchedOption.value);
+    }
+  }, [open, options, onValueChange]);
+  const click = useClick(panel.context, {
+    event: "mousedown",
+    keyboardHandlers: false
+  });
+  const dismiss = useDismiss(panel.context);
+  const role = useRole(panel.context, {
+    role: "listbox"
+  });
+  const listNav = useListNavigation(panel.context, {
+    listRef: listItemsRef,
+    activeIndex: activeIndex ?? 0,
+    selectedIndex: selectedIndex >= 0 ? selectedIndex : void 0,
+    onNavigate: index => {
+      if (index !== null) setActiveIndex(index);
+    },
+    scrollItemIntoView: false,
+    focusItemOnHover: false
+  });
+  const typeahead = useTypeahead(panel.context, {
+    listRef: listContentRef,
+    onMatch,
+    selectedIndex: selectedIndex >= 0 ? selectedIndex : void 0,
+    activeIndex,
+    onTypingChange: typing => {
+      stateRef.current.isTyping = typing;
+    }
+  });
+  const {
+    getReferenceProps,
+    getFloatingProps,
+    getItemProps
+  } = useInteractions([click, dismiss, role, listNav, typeahead]);
+  useLayoutEffect(() => {
+    if (open) {
+      allowMouseUpRef.current = false;
+      selectTimeoutRef.current = setTimeout(() => {
+        allowSelectRef.current = true;
+        allowMouseUpRef.current = true;
+      }, 300);
+      return () => {
+        if (selectTimeoutRef.current) clearTimeout(selectTimeoutRef.current);
+      };
+    }
+    allowSelectRef.current = false;
+    allowMouseUpRef.current = true;
+  }, [open]);
+  useEffect(() => {
+    if (!open || activeIndex == null) return;
+    const floatingElement = panel.refs.floating.current;
+    const itemElement = listItemsRef.current[activeIndex];
+    if (controlledScrolling && floatingElement && itemElement) {
+      const containerRect = floatingElement.getBoundingClientRect();
+      const itemRect = itemElement.getBoundingClientRect();
+      if (itemRect.bottom > containerRect.bottom) {
+        floatingElement.scrollTop += itemRect.bottom - containerRect.bottom;
+      } else if (itemRect.top < containerRect.top) {
+        floatingElement.scrollTop -= containerRect.top - itemRect.top;
+      }
+    }
+    requestAnimationFrame(() => {
+      listItemsRef.current[activeIndex]?.focus({
+        preventScroll: true
+      });
+      if (floatingElement) {
+        panel.updateArrows(floatingElement);
+      }
+    });
+  }, [open, controlledScrolling, activeIndex, panel.refs, panel.updateArrows]);
+  const lastSelectedIndexRef = useRef(null);
+  const valueRef = useRef(value);
+  valueRef.current = value;
+  const handleSelect = useCallback((index, event) => {
+    const displayOptions = sortedOptionsRef.current;
+    const option = displayOptions[index];
+    if (!option) return;
+    if (multiple) {
+      const latestValue = valueRef.current;
+      const current = Array.isArray(latestValue) ? latestValue : latestValue ? [latestValue] : [];
+      if (event?.shiftKey && lastSelectedIndexRef.current != null) {
+        const from = Math.min(lastSelectedIndexRef.current, index);
+        const to = Math.max(lastSelectedIndexRef.current, index);
+        const rangeValues = displayOptions.slice(from, to + 1).map(o => o.value);
+        const merged = /* @__PURE__ */new Set([...current, ...rangeValues]);
+        onValueChange?.([...merged]);
+      } else {
+        const next = current.includes(option.value) ? current.filter(v => v !== option.value) : [...current, option.value];
+        onValueChange?.(next);
+        lastSelectedIndexRef.current = index;
+      }
+    } else {
+      onValueChange?.(option.value);
+      setOpen(false);
+      onBlur?.();
+    }
+  }, [onValueChange, onBlur, multiple]);
+  const handleSelectByOption = useCallback(option => {
+    const displayOptions = sortedOptionsRef.current;
+    const index = displayOptions.findIndex(o => o.value === option.value);
+    if (index >= 0) handleSelect(index);
+  }, [handleSelect]);
+  const handlersRef = useRef({});
+  handlersRef.current = {
+    getItemProps,
+    handleSelect,
+    setOpen,
+    knobProps,
+    textColor,
+    allowSelectRef,
+    allowMouseUpRef,
+    selectTimeoutRef,
+    isTypingRef: stateRef,
+    listItemsRef,
+    multiple
+  };
+  const referenceProps = getReferenceProps({
+    ref: panel.setReferenceRef,
+    onKeyDown(event) {
+      if (event.key === "Enter" || event.code === "Space" || event.key === " " || event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "j" || event.key === "k") {
+        event.preventDefault();
+        setOpen(true);
+        setActiveIndex(selectedIndex >= 0 ? selectedIndex : 0);
+      }
+    }
+  });
+  const boxEventProps = {};
+  for (const [key, val] of Object.entries(referenceProps)) {
+    if (key === "ref" || typeof val === "function") {
+      boxEventProps[key] = val;
+    }
+    if (key.startsWith("aria-") || key === "role" || key === "tabIndex") {
+      boxEventProps[key] = val;
+    }
+  }
+  boxEventProps.tabIndex = disabled ? -1 : 0;
+  boxEventProps.role = "combobox";
+  boxEventProps["aria-haspopup"] = "listbox";
+  boxEventProps["aria-expanded"] = open;
+  boxEventProps["aria-autocomplete"] = "none";
+  const handleScroll = useCallback(event => {
+    const el = event.target;
+    panel.updateArrows(el);
+    if (panel.initializingRef.current || programmaticScrollRef.current > 0) {
+      if (programmaticScrollRef.current > 0) programmaticScrollRef.current--;
+      lastScrollTopRef.current = el.scrollTop;
+      return;
+    }
+    const arrowDir = panel.arrowScrollDirRef.current;
+    if (arrowDir) {
+      panel.arrowScrollDirRef.current = null;
+      lastScrollTopRef.current = el.scrollTop;
+      if (arrowDir === "down") {
+        growUpOnlyRef.current = true;
+      } else {
+        growDownOnlyRef.current = true;
+      }
+      repositionOverlay();
+      return;
+    }
+    const delta = el.scrollTop - lastScrollTopRef.current;
+    lastScrollTopRef.current = el.scrollTop;
+    if (delta !== 0) {
+      grownRef.current = true;
+      repositionOverlay();
+    }
+  }, [panel.updateArrows, repositionOverlay]);
+  return /* @__PURE__ */jsxs(Fragment, {
+    children: [/* @__PURE__ */jsxs(InputParts.Box, {
+      ...boxEventProps,
+      "data-testid": "select-trigger",
+      cursor: "pointer",
+      disabled,
+      size: knobProps.sizeToken,
+      ...(inTableCell ? {} : {
+        borderRadius: knobProps.borderRadius.borderRadius,
+        borderWidth: knobProps.borderRadius.borderWidth
+      }),
+      children: [/* @__PURE__ */jsx(SyncFocusToOpen, {
+        open
+      }), /* @__PURE__ */jsx(View, {
+        flex: 1,
+        paddingHorizontal: "$3",
+        paddingVertical: "$2",
+        id,
+        justifyContent: multiple && selectedValues.length > 0 ? "center" : "flex-start",
+        alignItems: multiple && selectedValues.length > 0 ? "center" : "flex-start",
+        children: multiple && selectedValues.length > 0 ? /* @__PURE__ */jsx(View, {
+          flexDirection: "row",
+          flexWrap: "nowrap",
+          gap: "$1.5",
+          alignItems: "center",
+          maxHeight: getFieldHeight(knobProps.sizeToken) * 0.75,
+          overflow: "hidden",
+          overflowX: "auto",
+          children: selectedValues.map(v => /* @__PURE__ */jsx(Chip, {
+            size: {
+              $3: "$2",
+              $4: "$3",
+              $5: "$4"
+            }[knobProps.sizeToken] ?? "$3",
+            color: "gray",
+            onDismiss: dismissible && !disabled ? () => handleDismiss(v) : void 0,
+            children: getLabel(v)
+          }, v))
+        }) : /* @__PURE__ */jsx(Text, {
+          fontFamily: knobProps.body.fontFamily,
+          fontWeight: knobProps.body.fontWeight,
+          color: selectedOption ? textColor : formCommonColors.muted,
+          numberOfLines: 1,
+          userSelect: "none",
+          children: selectedOption?.label ?? placeholder
+        })
+      }), /* @__PURE__ */jsx(View, {
+        paddingRight: "$2",
+        alignSelf: "center",
+        children: /* @__PURE__ */jsx(CaretDownIcon, {
+          size: 16
+        })
+      })]
+    }), panel.mounted && /* @__PURE__ */jsx(Fragment, {
+      children: /* @__PURE__ */jsx(FloatingFocusManager, {
+        context: panel.context,
+        modal: false,
+        initialFocus: -1,
+        children: /* @__PURE__ */jsxs(YStack, {
+          outlineWidth: 0,
+          pointerEvents: panel.visible ? "auto" : "none",
+          ...getFloatingProps({
+            ref: panel.refs.setFloating,
+            style: {
+              position: panel.strategy,
+              top: overlayStyle.current?.top ?? panel.y ?? 0,
+              left: panel.x ?? 0,
+              scrollbarWidth: "none",
+              zIndex: zIndex.dropdown,
+              overflow: "auto",
+              ...panel.floatingStyleRef.current,
+              ...(overlayStyle.current ? {
+                maxHeight: overlayStyle.current.maxHeight
+              } : {}),
+              boxShadow: "0px 8px 28px rgba(0,0,0,0.12), 0px 2px 6px rgba(0,0,0,0.04)",
+              opacity: panel.visible ? 1 : 0,
+              transform: panel.visible ? "scale(1)" : "scale(0.96)",
+              transition: panelTransition,
+              transformOrigin: panel.placement.startsWith("top") ? "bottom left" : "top left",
+              ...dragProps.style
+            },
+            onPointerDown: dragProps.onPointerDown,
+            onKeyDown(e) {
+              setControlledScrolling(true);
+              const count = flatOptions.length;
+              if (count === 0) return;
+              const isDown = e.key === "ArrowDown" || e.key === "j";
+              const isUp = e.key === "ArrowUp" || e.key === "k";
+              if (isDown) {
+                e.preventDefault();
+                e.stopPropagation();
+                setActiveIndex(prev => prev == null ? 0 : prev + 1 >= count ? 0 : prev + 1);
+              } else if (isUp) {
+                e.preventDefault();
+                e.stopPropagation();
+                setActiveIndex(prev => prev == null ? count - 1 : prev - 1 < 0 ? count - 1 : prev - 1);
+              } else if (e.key === "Enter" || e.key === " " || e.code === "Space") {
+                e.preventDefault();
+                e.stopPropagation();
+                if (activeIndex != null) {
+                  const option = flatOptions[activeIndex];
+                  if (option) handleSelectByOption(option);
+                  if (e.key === "Enter" || e.code === "Enter" || !multiple) setOpen(false);
+                }
+              }
+            },
+            onContextMenu(event) {
+              event.preventDefault();
+            },
+            onScroll: handleScroll
+          }),
+          backgroundColor: "$background",
+          borderRadius: panel.dropdownRadius,
+          borderWidth: panel.hasBorder ? knobProps.borderRadius.borderWidth : 0,
+          borderColor: panel.hasBorder ? formInputColors.border.focus : "transparent",
+          "data-testid": "select-dropdown",
+          paddingVertical: 0,
+          children: [/* @__PURE__ */jsx(ScrollArrow, {
+            direction: "up",
+            scrollRef: panel.refs.floating,
+            visible: panel.arrowUp,
+            arrowScrollDirRef: panel.arrowScrollDirRef
+          }), groupLabel && /* @__PURE__ */jsx(GroupHeader, {
+            color: textColor,
+            children: groupLabel
+          }), multiple ? sortedOptionsRef.current.map((option, i) => /* @__PURE__ */jsx(SelectItem, {
+            option,
+            index: i,
+            isSelected: isSelected(option.value),
+            isActive: i === activeIndex,
+            suppressHover: activeIndex != null,
+            handlers: handlersRef,
+            setActiveIndex,
+            setControlledScrolling,
+            optionCount: sortedOptionsRef.current.length
+          }, option.value)) : groupedItems.map(item => item.type === "header" ? /* @__PURE__ */jsx(GroupHeader, {
+            color: textColor,
+            children: item.label
+          }, `header-${item.label}`) : /* @__PURE__ */jsx(SelectItem, {
+            option: item.option,
+            index: item.flatIndex,
+            isSelected: isSelected(item.option.value),
+            isActive: item.flatIndex === activeIndex,
+            suppressHover: activeIndex != null,
+            handlers: handlersRef,
+            setActiveIndex,
+            setControlledScrolling,
+            optionCount: flatOptions.length
+          }, item.option.value)), /* @__PURE__ */jsx(ScrollArrow, {
+            direction: "down",
+            scrollRef: panel.refs.floating,
+            visible: panel.arrowDown,
+            arrowScrollDirRef: panel.arrowScrollDirRef
+          })]
+        })
+      })
+    })]
+  });
+}
+function NativeSelectCore({
+  options,
+  value,
+  onValueChange,
+  onBlur,
+  placeholder,
+  disabled,
+  id,
+  knobProps,
+  groupLabel,
+  multiple,
+  dismissible
+}) {
+  const inTableCell = useIsInTableCell();
+  const [open, setOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(0);
+  const listRef = useRef(null);
+  const labelCacheRef = useRef(/* @__PURE__ */new Map());
+  for (const o of options) labelCacheRef.current.set(o.value, o.label);
+  const getLabel = useCallback(v => labelCacheRef.current.get(v) ?? v, []);
+  const selectedValues = useMemo(() => {
+    if (!multiple) return [];
+    const vals = Array.isArray(value) ? value : value ? [value] : [];
+    return [...vals].sort((a, b) => getLabel(a).localeCompare(getLabel(b)));
+  }, [multiple, value, getLabel]);
+  const selectedOption = useMemo(() => multiple ? void 0 : options.find(o => o.value === value), [options, value, multiple]);
+  const isSelectedFn = useCallback(optionValue => multiple ? selectedValues.includes(optionValue) : optionValue === value, [multiple, selectedValues, value]);
+  const handleDismiss = useCallback(valueToRemove => {
+    if (!multiple) return;
+    const current = Array.isArray(value) ? value : value ? [value] : [];
+    const next = current.filter(v => v !== valueToRemove);
+    onValueChange?.(next);
+  }, [multiple, value, onValueChange]);
+  const textColor = knobProps.textAccentColor;
+  const sheetTransition = knobProps.transition ?? "medium";
+  const hasScrollableContent = options.length > 6;
+  const selectedIndex = options.findIndex(o => o.value === value);
+  useEffect(() => {
+    if (open) {
+      setActiveIndex(selectedIndex >= 0 ? selectedIndex : 0);
+      requestAnimationFrame(() => listRef.current?.focus());
+    }
+  }, [open, selectedIndex]);
+  const handleSelect = useCallback(optionValue => {
+    if (multiple) {
+      const current = Array.isArray(value) ? value : value ? [value] : [];
+      const next = current.includes(optionValue) ? current.filter(v => v !== optionValue) : [...current, optionValue];
+      onValueChange?.(next);
+    } else {
+      onValueChange?.(optionValue);
+      setOpen(false);
+      onBlur?.();
+    }
+  }, [onValueChange, onBlur, multiple, value]);
+  const handleListKeyDown = useCallback(e => {
+    const count = options.length;
+    if (count === 0) return;
+    const isDown = e.key === "ArrowDown" || e.key === "j";
+    const isUp = e.key === "ArrowUp" || e.key === "k";
+    if (isDown) {
+      e.preventDefault();
+      setActiveIndex(prev => {
+        const next = prev == null ? 0 : prev + 1;
+        return next >= count ? 0 : next;
+      });
+    } else if (isUp) {
+      e.preventDefault();
+      setActiveIndex(prev => {
+        const next = prev == null ? count - 1 : prev - 1;
+        return next < 0 ? count - 1 : next;
+      });
+    } else if (e.key === "Enter" || e.key === " " || e.code === "Space") {
+      e.preventDefault();
+      e.stopPropagation();
+      if (activeIndex != null) {
+        const option = options[activeIndex];
+        if (option) handleSelect(option.value);
+      }
+    }
+  }, [options, activeIndex, handleSelect]);
+  const listContent = /* @__PURE__ */jsxs(View, {
+    ref: listRef,
+    tabIndex: 0,
+    onKeyDown: handleListKeyDown,
+    outlineStyle: "none",
+    flex: 1,
+    children: [groupLabel && /* @__PURE__ */jsx(Text, {
+      paddingHorizontal: "$3",
+      paddingVertical: "$2",
+      fontFamily: knobProps.body.fontFamily,
+      fontWeight: "700",
+      color: textColor,
+      opacity: 0.5,
+      numberOfLines: 1,
+      children: groupLabel
+    }), options.map((option, i) => {
+      const selected = isSelectedFn(option.value);
+      const active = i === activeIndex;
+      return /* @__PURE__ */jsxs(View, {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: "$2",
+        paddingHorizontal: "$3",
+        height: knobProps.sizeToken,
+        onPress: () => handleSelect(option.value),
+        onMouseEnter: () => setActiveIndex(i),
+        hoverStyle: activeIndex != null ? {
+          backgroundColor: active ? formInputColors.background.focus : selected ? formInputColors.background.base : "transparent"
+        } : {
+          backgroundColor: selected ? formInputColors.background.base : formInputColors.background.focus
+        },
+        backgroundColor: active ? formInputColors.background.focus : selected ? formInputColors.background.base : "transparent",
+        pressStyle: {
+          backgroundColor: formInputColors.background.focus
+        },
+        children: [/* @__PURE__ */jsx(Text, {
+          fontFamily: knobProps.body.fontFamily,
+          fontWeight: knobProps.body.fontWeight,
+          color: textColor,
+          numberOfLines: 1,
+          flex: 1,
+          children: option.label
+        }), selected && /* @__PURE__ */jsx(CheckIcon, {
+          size: 14
+        })]
+      }, option.value);
+    })]
+  });
+  return /* @__PURE__ */jsx(FloatingPanel, {
+    open,
+    onOpenChange: val => {
+      setOpen(val);
+      if (!val) onBlur?.();
+    },
+    sheet: true,
+    trigger: /* @__PURE__ */jsxs(InputParts.Box, {
+      disabled,
+      size: knobProps.sizeToken,
+      ...(inTableCell ? {} : {
+        borderRadius: knobProps.borderRadius.borderRadius,
+        borderWidth: knobProps.borderRadius.borderWidth
+      }),
+      "data-testid": "select-trigger",
+      tabIndex: disabled ? -1 : 0,
+      onKeyDown: e => {
+        if (["Enter", " ", "ArrowDown", "ArrowUp", "j", "k"].includes(e.key) || e.code === "Space") {
+          e.preventDefault();
+          if (!open) setOpen(true);
+        }
+      },
+      children: [/* @__PURE__ */jsx(View, {
+        flex: 1,
+        paddingHorizontal: "$3",
+        paddingVertical: "$2",
+        id,
+        justifyContent: multiple && selectedValues.length > 0 ? "center" : "flex-start",
+        alignItems: multiple && selectedValues.length > 0 ? "center" : "flex-start",
+        children: multiple && selectedValues.length > 0 ? /* @__PURE__ */jsx(View, {
+          flexDirection: "row",
+          flexWrap: "nowrap",
+          gap: "$1.5",
+          alignItems: "center",
+          maxHeight: getFieldHeight(knobProps.sizeToken) * 0.75,
+          overflow: "hidden",
+          overflowX: "auto",
+          children: selectedValues.map(v => /* @__PURE__ */jsx(Chip, {
+            size: {
+              $3: "$2",
+              $4: "$3",
+              $5: "$4"
+            }[knobProps.sizeToken] ?? "$3",
+            color: "gray",
+            onDismiss: dismissible && !disabled ? () => handleDismiss(v) : void 0,
+            children: getLabel(v)
+          }, v))
+        }) : /* @__PURE__ */jsx(Text, {
+          fontFamily: knobProps.body.fontFamily,
+          fontWeight: knobProps.body.fontWeight,
+          color: selectedOption ? textColor : formCommonColors.muted,
+          numberOfLines: 1,
+          children: selectedOption?.label ?? placeholder
+        })
+      }), /* @__PURE__ */jsx(View, {
+        paddingRight: "$2",
+        alignSelf: "center",
+        children: /* @__PURE__ */jsx(CaretDownIcon, {
+          size: 16
+        })
+      })]
+    }),
+    scrollable: hasScrollableContent,
+    disabled,
+    contentPadding: "none",
+    transition: typeof sheetTransition === "string" ? sheetTransition : "medium",
+    children: listContent
+  });
+}
+function Select({
+  name,
+  form: formProp,
+  validators,
+  label,
+  labelProps,
+  helperText,
+  error,
+  required,
+  disabled,
+  readOnly,
+  size: sizeProp,
+  id: idProp,
+  value,
+  defaultValue,
+  onValueChange,
+  onBlur,
+  options,
+  placeholder = "Select an option",
+  groupLabel,
+  multiple,
+  dismissible,
+  skeleton,
+  compact,
+  ...rest
+}) {
+  const {
+    resolvedForm,
+    knobProps,
+    id
+  } = useFormField({
+    form: formProp,
+    id: idProp,
+    compact
+  });
+  const resolvedValidators = useResolvedValidators(required, validators, label, name);
+  const viewportGtSm = useViewportGtSm();
+  const effectiveGtSm = typeof window !== "undefined" ? viewportGtSm : false;
+  const shouldUseSheet = !isWeb || !effectiveGtSm;
+  if (skeleton) {
+    return /* @__PURE__ */jsxs(InputParts, {
+      size: sizeProp || knobProps.sizeToken,
+      children: [label && /* @__PURE__ */jsx(Skeleton, {
+        variant: "text",
+        width: "30%",
+        height: 14
+      }), /* @__PURE__ */jsx(Skeleton, {
+        variant: "rounded",
+        width: "100%",
+        height: knobProps.sizeToken
+      })]
+    });
+  }
+  const renderReadOnly = selectValue => {
+    if (multiple && Array.isArray(selectValue)) {
+      const labels = selectValue.map(v => options.find(o => o.value === v)?.label ?? v).join(", ");
+      return /* @__PURE__ */jsx(Paragraph, {
+        fontSize: knobProps.sizeToken,
+        color: knobProps.textAccentColor,
+        paddingVertical: "$2",
+        paddingHorizontal: "$3",
+        fontFamily: knobProps.body.fontFamily,
+        fontWeight: knobProps.body.fontWeight,
+        "aria-readonly": "true",
+        children: labels || "-"
+      });
+    }
+    const sv = typeof selectValue === "string" ? selectValue : void 0;
+    const selectedOption = options.find(option => option.value === sv);
+    const displayText = selectedOption?.label ?? (sv || "-");
+    return /* @__PURE__ */jsx(Paragraph, {
+      fontSize: knobProps.sizeToken,
+      color: knobProps.textAccentColor,
+      paddingVertical: "$2",
+      paddingHorizontal: "$3",
+      fontFamily: knobProps.body.fontFamily,
+      fontWeight: knobProps.body.fontWeight,
+      borderRadius: knobProps.borderRadius.borderRadius,
+      borderWidth: knobProps.borderRadius.borderWidth,
+      ...(knobProps.outlined ? {
+        backgroundColor: "transparent"
+      } : void 0),
+      "aria-readonly": "true",
+      children: displayText
+    });
+  };
+  const renderSelectContent = (selectValue, handleValueChange, handleBlur) => {
+    if (readOnly) return renderReadOnly(selectValue);
+    const SelectCore = shouldUseSheet ? NativeSelectCore : FloatingSelectCore;
+    return /* @__PURE__ */jsx(SelectCore, {
+      options,
+      value: selectValue,
+      onValueChange: val => {
+        if (disabled) return;
+        handleValueChange?.(val);
+        onValueChange?.(val);
+      },
+      onBlur: handleBlur,
+      placeholder,
+      disabled,
+      id,
+      knobProps,
+      groupLabel,
+      multiple,
+      dismissible
+    });
+  };
+  if (!resolvedForm || !name) {
+    return /* @__PURE__ */jsx(FieldLayout, {
+      id,
+      label,
+      labelProps,
+      error,
+      helperText,
+      required,
+      size: sizeProp,
+      knobProps,
+      ...rest,
+      children: /* @__PURE__ */jsx(InputParts, {
+        size: sizeProp || knobProps.sizeToken,
+        children: renderSelectContent(value ?? defaultValue, void 0, onBlur)
+      })
+    });
+  }
+  return /* @__PURE__ */jsx(Field, {
+    form: resolvedForm,
+    name,
+    defaultValue,
+    validators: resolvedValidators,
+    children: field => {
+      const resolvedError = getFieldError(field, error);
+      return /* @__PURE__ */jsx(FieldLayout, {
+        id,
+        label,
+        labelProps,
+        error: resolvedError,
+        helperText,
+        required,
+        size: sizeProp,
+        knobProps,
+        ...rest,
+        children: /* @__PURE__ */jsx(InputParts, {
+          size: sizeProp || knobProps.sizeToken,
+          children: renderSelectContent(field.state.value, val => field.handleChange(val), mergeFieldHandler(field, "handleBlur", onBlur))
+        })
+      });
+    }
+  });
+}
+export { Select };
+//# sourceMappingURL=index.mjs.map