@xaui/native 0.9.1-alpha.35 → 0.9.1-alpha.37

package/dist/chunk-DVDQSW7U.cjs

@@ -0,0 +1,1006 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+
+
+var _chunkWDDXU3OHcjs = require('./chunk-WDDXU3OH.cjs');
+
+
+
+var _chunk7B3UBUC6cjs = require('./chunk-7B3UBUC6.cjs');
+
+
+var _chunkDRMT346Wcjs = require('./chunk-DRMT346W.cjs');
+
+
+var _chunk7DPL3ZDScjs = require('./chunk-7DPL3ZDS.cjs');
+
+
+
+var _chunk54FJOKANcjs = require('./chunk-54FJOKAN.cjs');
+
+
+var _chunkH4E4HDEPcjs = require('./chunk-H4E4HDEP.cjs');
+
+
+
+var _chunkFNEUOBCVcjs = require('./chunk-FNEUOBCV.cjs');
+
+
+var _chunk57SJ4LJFcjs = require('./chunk-57SJ4LJF.cjs');
+
+
+var _chunkTK44VBIEcjs = require('./chunk-TK44VBIE.cjs');
+
+// src/components/select/select-content.tsx
+var _react = require('react');
+var _reactnative = require('react-native');
+var _reactnativereanimated = require('react-native-reanimated'); var _reactnativereanimated2 = _interopRequireDefault(_reactnativereanimated);
+
+// src/components/select/select.context.ts
+var [SelectProvider, useSelect] = _chunk54FJOKANcjs.createSlotContext.call(void 0, "Select");
+var [SelectItemProvider, useSelectItem] = _chunk54FJOKANcjs.createSlotContext.call(void 0, "Select.Item");
+
+// src/components/select/select.animation.ts
+
+var INDICATOR_SPRING = {
+  damping: 140,
+  stiffness: 1e3,
+  mass: 4
+};
+var INDICATOR_ROTATION = [0, -180];
+var ENTER_MS = 200;
+var EXIT_MS = 150;
+function contentEntering(placement) {
+  const from = placement === "bottom" ? -8 : 8;
+  return new (0, _reactnativereanimated.Keyframe)({
+    0: {
+      opacity: 0,
+      transform: [{ translateY: from }, { scale: 0.95 }]
+    },
+    100: {
+      opacity: 1,
+      transform: [{ translateY: 0 }, { scale: 1 }],
+      easing: _reactnativereanimated.Easing.out(_reactnativereanimated.Easing.cubic)
+    }
+  }).duration(ENTER_MS);
+}
+function contentExiting(placement) {
+  const to = placement === "bottom" ? -8 : 8;
+  return new (0, _reactnativereanimated.Keyframe)({
+    0: { opacity: 1, transform: [{ translateY: 0 }, { scale: 1 }] },
+    100: {
+      opacity: 0,
+      transform: [{ translateY: to }, { scale: 0.95 }],
+      easing: _reactnativereanimated.Easing.in(_reactnativereanimated.Easing.cubic)
+    }
+  }).duration(EXIT_MS);
+}
+var overlayEntering = new (0, _reactnativereanimated.Keyframe)({
+  0: { opacity: 0 },
+  100: { opacity: 1 }
+}).duration(ENTER_MS);
+var overlayExiting = new (0, _reactnativereanimated.Keyframe)({
+  0: { opacity: 1 },
+  100: { opacity: 0 }
+}).duration(EXIT_MS);
+
+// src/components/select/select-item.tsx
+
+
+// src/components/select/select-item-label.tsx
+
+
+var _jsxruntime = require('react/jsx-runtime');
+var SelectItemLabel = _react.forwardRef.call(void 0, 
+  function SelectItemLabel2({ children, numberOfLines = 1, style, ...props }, ref) {
+    const { itemLabelStyle } = useSelect();
+    const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _reactnative.Text,
+      {
+        ref,
+        numberOfLines,
+        ...rest,
+        style: [itemLabelStyle, styleProps, style],
+        children
+      }
+    );
+  }
+);
+SelectItemLabel.displayName = "XAUI.Select.ItemLabel";
+
+// src/components/select/select-item.tsx
+
+var SelectItem = _react.forwardRef.call(void 0, function SelectItem2({
+  value,
+  label,
+  children,
+  isDisabled = false,
+  asChild = false,
+  accessibilityRole = "menuitem",
+  accessibilityState,
+  style,
+  onPress,
+  onPressIn,
+  onPressOut,
+  ...props
+}, ref) {
+  const {
+    itemStyle,
+    itemPressedStyle,
+    value: selected,
+    select,
+    registerLabel
+  } = useSelect();
+  const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+  const [isPressed, press] = _chunk7DPL3ZDScjs.usePressState.call(void 0, { onPressIn, onPressOut });
+  const isSelected = selected === value;
+  const text = typeof children === "function" ? null : _chunk54FJOKANcjs.childrenToString.call(void 0, children);
+  const registered = _nullishCoalesce(_nullishCoalesce(label, () => ( text)), () => ( void 0));
+  _react.useEffect.call(void 0, () => {
+    if (registered !== void 0) registerLabel(value, registered);
+  }, [registerLabel, value, registered]);
+  const handlePress = _react.useCallback.call(void 0, 
+    (event) => {
+      _optionalChain([onPress, 'optionalCall', _ => _(event)]);
+      select(value, registered);
+    },
+    [onPress, select, value, registered]
+  );
+  const context = _react.useMemo.call(void 0, 
+    () => ({ isSelected, isPressed, isDisabled }),
+    [isSelected, isPressed, isDisabled]
+  );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectItemProvider, { value: context, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _chunkDRMT346Wcjs.PressableFeedback,
+    {
+      ref,
+      isPressed,
+      isDisabled,
+      asChild,
+      accessibilityRole,
+      accessibilityState: {
+        disabled: isDisabled,
+        selected: isSelected,
+        ...accessibilityState
+      },
+      ...rest,
+      style: [
+        itemStyle,
+        isPressed && itemPressedStyle,
+        styleProps,
+        typeof style === "function" ? style({ pressed: isPressed }) : style
+      ],
+      onPress: handlePress,
+      onPressIn: press.onPressIn,
+      onPressOut: press.onPressOut,
+      children: typeof children === "function" ? children(context) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: text !== null ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectItemLabel, { children: text }) : children })
+    }
+  ) });
+});
+SelectItem.displayName = "XAUI.Select.Item";
+
+// src/components/select/select.utils.ts
+
+function resolvePlacement(input) {
+  const { anchor, content, window, offset, alignOffset, insets } = input;
+  const available = window.width - insets.start - insets.end;
+  const width = Math.min(resolveWidth(input), Math.max(available, 0));
+  const placement = choosePlacement(input);
+  const maxHeight = Math.max(roomFor(placement, input), 0);
+  const height = Math.min(content.height, maxHeight);
+  const top = placement === "bottom" ? anchor.y + anchor.height + offset : anchor.y - offset - height;
+  const start = clamp(
+    alignedStart(input, width) + alignOffset,
+    insets.start,
+    Math.max(window.width - insets.end - width, insets.start)
+  );
+  return { top, start, width, maxHeight, placement };
+}
+function resolveWidth({ width, anchor, content }) {
+  if (width === "trigger") return anchor.width;
+  if (width === "content-fit") return content.width;
+  return width;
+}
+function choosePlacement(input) {
+  const { placement, avoidCollisions, content } = input;
+  if (!avoidCollisions) return placement;
+  if (roomFor(placement, input) >= content.height) return placement;
+  const other = placement === "bottom" ? "top" : "bottom";
+  return roomFor(other, input) > roomFor(placement, input) ? other : placement;
+}
+function roomFor(placement, input) {
+  const { anchor, window, offset, insets } = input;
+  return placement === "bottom" ? window.height - insets.bottom - (anchor.y + anchor.height) - offset : anchor.y - insets.top - offset;
+}
+function alignedStart({ align, anchor }, width) {
+  if (align === "start") return anchor.x;
+  if (align === "end") return anchor.x + anchor.width - width;
+  return anchor.x + (anchor.width - width) / 2;
+}
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function collectItemLabels(children, isItem) {
+  const found = [];
+  const walk = (node) => {
+    _react.Children.forEach(node, (child) => {
+      if (!_react.isValidElement.call(void 0, child)) return;
+      const props = child.props;
+      if (isItem(child.type) && typeof props.value === "string") {
+        const label = _nullishCoalesce(props.label, () => ( _chunk54FJOKANcjs.childrenToString.call(void 0, props.children)));
+        if (label !== null && label !== void 0) found.push([props.value, label]);
+        return;
+      }
+      walk(props.children);
+    });
+  };
+  walk(children);
+  return found;
+}
+
+// src/components/select/select-content.tsx
+
+var DEFAULT_OFFSET = 8;
+var ZERO = { x: 0, y: 0 };
+var isSelectItem = (type) => type === SelectItem;
+var DEFAULT_INSETS = {
+  top: 12,
+  bottom: 12,
+  start: 12,
+  end: 12
+};
+var SelectContent = _react.forwardRef.call(void 0, 
+  function SelectContent2({
+    children,
+    placement = "bottom",
+    align = "center",
+    width = "trigger",
+    offset = DEFAULT_OFFSET,
+    alignOffset = 0,
+    avoidCollisions = true,
+    insets,
+    style,
+    onLayout,
+    ...props
+  }, ref) {
+    const context = useSelect();
+    const { contentStyle, isOpen, anchor } = context;
+    const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+    const window = _reactnative.useWindowDimensions.call(void 0, );
+    const origin = _nullishCoalesce(_optionalChain([_react.useContext.call(void 0, _chunkWDDXU3OHcjs.PortalContext), 'optionalAccess', _2 => _2.origin]), () => ( ZERO));
+    const [measured, setMeasured] = _react.useState.call(void 0, null);
+    const { registerLabel } = context;
+    _react.useEffect.call(void 0, () => {
+      for (const [value, label] of collectItemLabels(children, isSelectItem)) {
+        registerLabel(value, label);
+      }
+    }, [children, registerLabel]);
+    if (!isOpen && measured !== null) setMeasured(null);
+    if (!isOpen || anchor === null) return null;
+    const measure = (event) => {
+      _optionalChain([onLayout, 'optionalCall', _3 => _3(event)]);
+      const { width: w, height: h } = event.nativeEvent.layout;
+      if (measured === null || measured.height !== h || measured.width !== w) {
+        setMeasured({ width: w, height: h });
+      }
+    };
+    const local = { ...anchor, x: anchor.x - origin.x, y: anchor.y - origin.y };
+    const position = measured && resolvePlacement({
+      anchor: local,
+      content: measured,
+      // The window in the host's own coordinates, for the same reason as the anchor.
+      window: {
+        width: window.width - origin.x,
+        height: window.height - origin.y
+      },
+      placement,
+      align,
+      width,
+      offset,
+      alignOffset,
+      avoidCollisions,
+      insets: { ...DEFAULT_INSETS, ...insets }
+    });
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWDDXU3OHcjs.Portal, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectProvider, { value: context, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _reactnativereanimated2.default.View,
+      {
+        ref,
+        entering: position ? contentEntering(position.placement) : void 0,
+        exiting: position ? contentExiting(position.placement) : void 0,
+        onLayout: measure,
+        ...rest,
+        style: [
+          contentStyle,
+          // The measuring pass: laid out at the trigger's width so the rows wrap as they
+          // finally will, and invisible so the reader never sees it at the wrong place.
+          position === null ? { opacity: 0, top: 0, start: 0, width: local.width } : {
+            top: position.top,
+            start: position.start,
+            width: position.width,
+            maxHeight: position.maxHeight
+          },
+          styleProps,
+          style
+        ],
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _reactnative.ScrollView,
+          {
+            bounces: false,
+            keyboardShouldPersistTaps: "handled",
+            showsVerticalScrollIndicator: false,
+            children
+          }
+        )
+      },
+      _nullishCoalesce(_optionalChain([position, 'optionalAccess', _4 => _4.placement]), () => ( "measuring"))
+    ) }) });
+  }
+);
+SelectContent.displayName = "XAUI.Select.Content";
+
+// src/components/select/select-indicator.tsx
+
+
+
+
+
+
+
+
+// src/components/select/chevron-down-icon.tsx
+var _reactnativesvg = require('react-native-svg');
+
+function ChevronDownIcon({
+  size = 20,
+  color = "currentColor"
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactnativesvg.Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _reactnativesvg.Path,
+    {
+      d: "m6 9 6 6 6-6",
+      stroke: color,
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+ChevronDownIcon.displayName = "XAUI.Select.ChevronDownIcon";
+
+// src/components/select/select-indicator.tsx
+
+function SelectIndicator({
+  as = ChevronDownIcon,
+  ...props
+}) {
+  const { indicatorStyle, isOpen } = useSelect();
+  const progress = _reactnativereanimated.useSharedValue.call(void 0, isOpen ? 1 : 0);
+  _react.useEffect.call(void 0, () => {
+    progress.set(_reactnativereanimated.withSpring.call(void 0, isOpen ? 1 : 0, INDICATOR_SPRING));
+  }, [isOpen, progress]);
+  const rotation = _reactnativereanimated.useAnimatedStyle.call(void 0, () => ({
+    transform: [
+      {
+        rotate: `${_reactnativereanimated.interpolate.call(void 0, progress.get(), [0, 1], [INDICATOR_ROTATION[0], INDICATOR_ROTATION[1]])}deg`
+      }
+    ]
+  }));
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactnativereanimated2.default.View, { style: [indicatorStyle, rotation], children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7B3UBUC6cjs.Icon, { as, ...props }) });
+}
+SelectIndicator.displayName = "XAUI.Select.Indicator";
+
+// src/components/select/select-item-description.tsx
+
+
+
+var SelectItemDescription = _react.forwardRef.call(void 0, 
+  function SelectItemDescription2({ children, style, ...props }, ref) {
+    const { itemDescriptionStyle } = useSelect();
+    const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactnative.Text, { ref, ...rest, style: [itemDescriptionStyle, styleProps, style], children });
+  }
+);
+SelectItemDescription.displayName = "XAUI.Select.ItemDescription";
+
+// src/components/select/select-item-indicator.tsx
+
+
+// src/components/select/check-icon.tsx
+
+
+function CheckIcon({
+  size = 20,
+  color = "currentColor"
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactnativesvg.Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _reactnativesvg.Path,
+    {
+      d: "m20 6-11 11-5-5",
+      stroke: color,
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+CheckIcon.displayName = "XAUI.Select.CheckIcon";
+
+// src/components/select/select-item-indicator.tsx
+
+function SelectItemIndicator({
+  as = CheckIcon,
+  color,
+  ...props
+}) {
+  const { itemIndicatorStyle, checkColor } = useSelect();
+  const { isSelected } = useSelectItem();
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactnative.View, { style: itemIndicatorStyle, children: isSelected ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7B3UBUC6cjs.Icon, { as, color: _nullishCoalesce(color, () => ( checkColor)), ...props }) : null });
+}
+SelectItemIndicator.displayName = "XAUI.Select.ItemIndicator";
+
+// src/components/select/select-label.tsx
+
+
+
+var SelectLabel = _react.forwardRef.call(void 0, function SelectLabel2({ children, accessibilityRole = "header", style, ...props }, ref) {
+  const { labelStyle } = useSelect();
+  const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _reactnative.Text,
+    {
+      ref,
+      accessibilityRole,
+      ...rest,
+      style: [labelStyle, styleProps, style],
+      children
+    }
+  );
+});
+SelectLabel.displayName = "XAUI.Select.Label";
+
+// src/components/select/select-overlay.tsx
+
+
+
+
+var AnimatedPressable = _reactnativereanimated2.default.createAnimatedComponent(_reactnative.Pressable);
+var SelectOverlay = _react.forwardRef.call(void 0, 
+  function SelectOverlay2({ children, isDismissable = true, style, ...props }, ref) {
+    const context = useSelect();
+    const { overlayStyle, isOpen, close } = context;
+    const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+    if (!isOpen) return null;
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWDDXU3OHcjs.Portal, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectProvider, { value: context, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      AnimatedPressable,
+      {
+        ref,
+        entering: overlayEntering,
+        exiting: overlayExiting,
+        accessibilityRole: "none",
+        importantForAccessibility: "no",
+        onPress: isDismissable ? close : void 0,
+        ...rest,
+        style: [overlayStyle, styleProps, style],
+        children
+      }
+    ) }) });
+  }
+);
+SelectOverlay.displayName = "XAUI.Select.Overlay";
+
+// src/components/select/select-trigger.tsx
+
+
+var SelectTrigger = _react.forwardRef.call(void 0, 
+  function SelectTrigger2({
+    children,
+    asChild = false,
+    accessibilityRole = "button",
+    accessibilityState,
+    style,
+    onLayout,
+    onPressIn,
+    onPressOut,
+    onPress,
+    ...props
+  }, ref) {
+    const {
+      triggerStyle,
+      triggerPressedStyle,
+      glyph,
+      isOpen,
+      isDisabled,
+      isInvalid,
+      toggle,
+      setAnchor
+    } = useSelect();
+    const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+    const [isPressed, press] = _chunk7DPL3ZDScjs.usePressState.call(void 0, { onPressIn, onPressOut });
+    const node = _react.useRef.call(void 0, null);
+    const refs = _react.useMemo.call(void 0, () => _chunkH4E4HDEPcjs.mergeRefs.call(void 0, node, ref), [ref]);
+    const measure = _react.useCallback.call(void 0, () => {
+      _optionalChain([node, 'access', _5 => _5.current, 'optionalAccess', _6 => _6.measureInWindow, 'call', _7 => _7((x, y, width, height) => {
+        setAnchor({ x, y, width, height });
+      })]);
+    }, [setAnchor]);
+    const handleLayout = _react.useCallback.call(void 0, 
+      (event) => {
+        _optionalChain([onLayout, 'optionalCall', _8 => _8(event)]);
+        measure();
+      },
+      [measure, onLayout]
+    );
+    _react.useEffect.call(void 0, () => {
+      if (isOpen) measure();
+    }, [isOpen, measure]);
+    const handlePress = _react.useCallback.call(void 0, 
+      (event) => {
+        _optionalChain([onPress, 'optionalCall', _9 => _9(event)]);
+        measure();
+        toggle();
+      },
+      [measure, onPress, toggle]
+    );
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7B3UBUC6cjs.IconContext.Provider, { value: glyph, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkDRMT346Wcjs.PressableFeedback,
+      {
+        ref: refs,
+        isPressed,
+        isDisabled,
+        asChild,
+        accessibilityRole,
+        accessibilityState: {
+          disabled: isDisabled,
+          expanded: isOpen,
+          ...accessibilityState
+        },
+        "aria-invalid": isInvalid || void 0,
+        ...rest,
+        onLayout: handleLayout,
+        style: [
+          triggerStyle,
+          isPressed && triggerPressedStyle,
+          styleProps,
+          typeof style === "function" ? style({ pressed: isPressed }) : style
+        ],
+        onPress: handlePress,
+        onPressIn: press.onPressIn,
+        onPressOut: press.onPressOut,
+        children
+      }
+    ) });
+  }
+);
+SelectTrigger.displayName = "XAUI.Select.Trigger";
+
+// src/components/select/select-value.tsx
+
+
+
+var SelectValue = _react.forwardRef.call(void 0, function SelectValue2({ placeholder, children, numberOfLines = 1, style, ...props }, ref) {
+  const { valueStyle, placeholderStyle, value, labelFor } = useSelect();
+  const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+  const label = _nullishCoalesce(children, () => ( (value !== void 0 ? labelFor(value) : void 0)));
+  const isEmpty = label === void 0 || label === "";
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _reactnative.Text,
+    {
+      ref,
+      numberOfLines,
+      ...rest,
+      style: [valueStyle, isEmpty && placeholderStyle, styleProps, style],
+      children: isEmpty ? placeholder : label
+    }
+  );
+});
+SelectValue.displayName = "XAUI.Select.Value";
+
+// src/components/select/select.tsx
+
+
+
+// src/components/select/select.hook.ts
+
+function useControllableState({
+  value,
+  defaultValue,
+  onChange
+}) {
+  const isControlled = _react.useRef.call(void 0, value !== void 0).current;
+  const [uncontrolled, setUncontrolled] = _react.useState.call(void 0, defaultValue);
+  const set = _react.useCallback.call(void 0, 
+    (next) => {
+      if (!isControlled) setUncontrolled(next);
+      _optionalChain([onChange, 'optionalCall', _10 => _10(next)]);
+    },
+    [isControlled, onChange]
+  );
+  return [isControlled ? value : uncontrolled, set];
+}
+function useLabelRegistry() {
+  const labels = _react.useRef.call(void 0, /* @__PURE__ */ new Map());
+  const [, force] = _react.useState.call(void 0, 0);
+  const registerLabel = _react.useCallback.call(void 0, (value, label) => {
+    if (labels.current.get(value) === label) return;
+    labels.current.set(value, label);
+    force((n) => n + 1);
+  }, []);
+  const labelFor = _react.useCallback.call(void 0, (value) => labels.current.get(value), []);
+  return _react.useMemo.call(void 0, () => ({ labelFor, registerLabel }), [labelFor, registerLabel]);
+}
+
+// src/components/select/select.recipe.ts
+var SLOTS = [
+  "trigger",
+  "value",
+  "placeholder",
+  "indicator",
+  "overlay",
+  "content",
+  "label",
+  "item",
+  "itemLabel",
+  "itemDescription",
+  "itemIndicator"
+];
+var VARIANT_TOKENS = {
+  primary: {
+    bg: "fieldBackground",
+    border: "fieldBorder",
+    borderFocus: "fieldBorderFocus",
+    fg: "fieldForeground"
+  },
+  secondary: {
+    bg: "default",
+    border: "fieldBorder",
+    borderFocus: "fieldBorderFocus",
+    fg: "fieldForeground"
+  },
+  tertiary: {
+    border: "fieldBorder",
+    borderFocus: "fieldBorderFocus",
+    fg: "fieldForeground"
+  },
+  ghost: { borderFocus: "fieldBorderFocus", fg: "fieldForeground" }
+};
+var SIZES = {
+  sm: {
+    control: "sm",
+    padding: 3,
+    gap: 2.5,
+    value: "md",
+    glyph: "lg",
+    listLabel: "xs",
+    description: "xs"
+  },
+  md: {
+    control: "md",
+    padding: 3,
+    gap: 3,
+    value: "md",
+    glyph: "lg",
+    listLabel: "sm",
+    description: "sm"
+  },
+  lg: {
+    control: "lg",
+    padding: 4,
+    gap: 3,
+    value: "lg",
+    glyph: "xl",
+    listLabel: "md",
+    description: "md"
+  }
+};
+var LIST = {
+  /** Panel padding, and the inset the rows sit in. */
+  padding: 3,
+  itemPaddingHorizontal: 2,
+  itemPaddingVertical: 3,
+  itemGap: 2,
+  labelPaddingHorizontal: 2,
+  labelPaddingVertical: 1.5,
+  /** The check's box, in spacing steps like the rest — five of them, HeroUI's twenty. */
+  indicator: 5
+};
+function sizeAxis(step) {
+  const { control, padding, gap, value, glyph, listLabel, description } = step;
+  return (theme) => {
+    const valueType = {
+      fontSize: theme.fontSizes[value],
+      lineHeight: theme.lineHeights[value]
+    };
+    return {
+      trigger: {
+        // Fixed, not a minimum: a control has a height, and a label too long for it
+        // truncates rather than deforming the field it shares a row with.
+        height: theme.controlHeights[control],
+        paddingHorizontal: theme.spacing(padding),
+        gap: theme.spacing(gap)
+      },
+      value: valueType,
+      placeholder: valueType,
+      indicator: { fontSize: theme.fontSizes[glyph] },
+      label: {
+        fontSize: theme.fontSizes[listLabel],
+        lineHeight: theme.lineHeights[listLabel]
+      },
+      itemLabel: valueType,
+      itemDescription: {
+        fontSize: theme.fontSizes[description],
+        lineHeight: theme.lineHeights[description]
+      }
+    };
+  };
+}
+var selectRecipe = _chunkFNEUOBCVcjs.createRecipe.call(void 0, {
+  slots: SLOTS,
+  base: (theme) => ({
+    trigger: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      borderWidth: theme.borderWidth.field,
+      borderRadius: theme.radius.field,
+      borderCurve: "continuous"
+    },
+    value: {
+      fontFamily: theme.fontFamilies.body,
+      // `regular`, as on the field: a chosen value is content, not the control's label.
+      fontWeight: theme.fontWeights.regular,
+      // Without it a long value pushes the chevron off the end of the trigger instead of
+      // truncating, because a row gives a text node its intrinsic width by default.
+      flexShrink: 1
+    },
+    placeholder: { color: theme.colors.fieldPlaceholder },
+    indicator: { alignItems: "center", justifyContent: "center" },
+    overlay: { position: "absolute", top: 0, bottom: 0, start: 0, end: 0 },
+    content: {
+      position: "absolute",
+      backgroundColor: theme.colors.overlay,
+      padding: theme.spacing(LIST.padding),
+      // The panel is not the field, so it is rounder — but not by three steps of our
+      // scale. HeroUI's panel is their `--radius-3xl` on a base of 8, which is 24 points;
+      // ours is a base of 12, so the same 24 is `2xl`. Reading their key rather than
+      // their number is what put a 36-point corner on it and made it read as a pill.
+      borderRadius: theme.radius["2xl"],
+      borderCurve: "continuous",
+      ...theme.shadows.overlay
+    },
+    label: {
+      fontFamily: theme.fontFamilies.body,
+      fontWeight: theme.fontWeights.medium,
+      color: theme.colors.muted,
+      paddingHorizontal: theme.spacing(LIST.labelPaddingHorizontal),
+      paddingVertical: theme.spacing(LIST.labelPaddingVertical)
+    },
+    item: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      gap: theme.spacing(LIST.itemGap),
+      paddingHorizontal: theme.spacing(LIST.itemPaddingHorizontal),
+      paddingVertical: theme.spacing(LIST.itemPaddingVertical),
+      borderRadius: theme.radius.md,
+      borderCurve: "continuous"
+    },
+    itemLabel: {
+      fontFamily: theme.fontFamilies.body,
+      // `medium`, unlike the trigger's value: a row in a list is a target being offered,
+      // and the weight is what separates it from the description under it.
+      fontWeight: theme.fontWeights.medium,
+      color: theme.colors.overlayForeground,
+      flexShrink: 1
+    },
+    itemDescription: {
+      fontFamily: theme.fontFamilies.body,
+      color: theme.colors.muted
+    },
+    itemIndicator: {
+      width: theme.spacing(LIST.indicator),
+      height: theme.spacing(LIST.indicator),
+      alignItems: "center",
+      justifyContent: "center"
+    }
+  }),
+  variantTokens: VARIANT_TOKENS,
+  /**
+   * The variant paints the **trigger only**. The list is a floating surface of the
+   * theme's own — a `ghost` select does not open a ghost panel, it opens the same panel
+   * every other select opens, because the panel is not part of the control's emphasis.
+   */
+  paint: (theme, colors) => ({
+    trigger: {
+      backgroundColor: colors.bg,
+      borderColor: colors.border,
+      borderWidth: colors.border ? theme.borderWidth.field : 0
+    },
+    value: { color: colors.fg },
+    indicator: { color: theme.colors.fieldPlaceholder }
+  }),
+  variants: {
+    size: {
+      sm: sizeAxis(SIZES.sm),
+      md: sizeAxis(SIZES.md),
+      lg: sizeAxis(SIZES.lg)
+    },
+    radius: _chunkFNEUOBCVcjs.radiusAxis.call(void 0, "trigger"),
+    /**
+     * Open is not `focused`: the field's focus border is what a keyboard gives a text
+     * input, and a select that is open has no caret in it. It borrows the same token
+     * because the two mean the same thing to the eye — this control is the live one.
+     */
+    isOpen: {
+      true: (theme) => ({
+        trigger: { borderColor: theme.colors.fieldBorderFocus }
+      })
+    },
+    isInvalid: {
+      true: (theme) => ({ trigger: { borderColor: theme.colors.danger } })
+    }
+  },
+  states: {
+    pressed: (theme) => ({
+      trigger: { backgroundColor: theme.colors.fieldPressed },
+      item: { backgroundColor: theme.colors.defaultSoftPressed }
+    }),
+    disabled: (theme) => ({ trigger: { opacity: theme.opacity.disabled } })
+  },
+  defaultVariants: { variant: "primary", size: "md" }
+});
+
+// src/components/select/select.tsx
+
+function Select({
+  children,
+  variant,
+  size,
+  radius,
+  color,
+  value: controlledValue,
+  defaultValue,
+  onValueChange,
+  isOpen: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  isDisabled = false,
+  isInvalid = false
+}) {
+  const theme = _chunk57SJ4LJFcjs.useXAUITheme.call(void 0, );
+  const { labelFor, registerLabel } = useLabelRegistry();
+  const [anchor, setAnchor] = _react.useState.call(void 0, null);
+  const [value, setValue] = useControllableState({
+    value: controlledValue,
+    defaultValue,
+    onChange: onValueChange
+  });
+  const [isOpen = false, setOpen] = useControllableState({
+    value: controlledOpen,
+    defaultValue: defaultOpen,
+    onChange: onOpenChange
+  });
+  const selection = {
+    variant,
+    size,
+    radius,
+    isOpen: isOpen ? "true" : void 0,
+    isInvalid: isInvalid ? "true" : void 0
+  };
+  const styles = selectRecipe.resolve({
+    theme,
+    selection,
+    states: { disabled: isDisabled }
+  });
+  const pressed = selectRecipe.resolve({
+    theme,
+    selection,
+    states: { pressed: true }
+  });
+  const tint = color ? selectRecipe.tint({ theme, color, selection }) : void 0;
+  const open = _react.useCallback.call(void 0, () => setOpen(true), [setOpen]);
+  const close = _react.useCallback.call(void 0, () => setOpen(false), [setOpen]);
+  const toggle = _react.useCallback.call(void 0, () => setOpen(!isOpen), [isOpen, setOpen]);
+  const select = _react.useCallback.call(void 0, 
+    (next, label) => {
+      if (label !== void 0) registerLabel(next, label);
+      setValue(next);
+      setOpen(false);
+    },
+    [registerLabel, setValue, setOpen]
+  );
+  const context = _react.useMemo.call(void 0, () => {
+    const indicator = _reactnative.StyleSheet.flatten([
+      styles.indicator,
+      _optionalChain([tint, 'optionalAccess', _11 => _11.indicator])
+    ]);
+    const itemLabel = _reactnative.StyleSheet.flatten([styles.itemLabel]);
+    const tintedPlaceholder = tint ? _reactnative.StyleSheet.flatten([tint.value]).color : void 0;
+    return {
+      triggerStyle: tint ? [styles.trigger, tint.trigger] : styles.trigger,
+      triggerPressedStyle: pressed.trigger,
+      valueStyle: tint ? [styles.value, tint.value] : styles.value,
+      placeholderStyle: tintedPlaceholder ? [styles.placeholder, { color: tintedPlaceholder }] : styles.placeholder,
+      indicatorStyle: styles.indicator,
+      overlayStyle: styles.overlay,
+      contentStyle: styles.content,
+      labelStyle: styles.label,
+      itemStyle: styles.item,
+      itemPressedStyle: pressed.item,
+      itemLabelStyle: styles.itemLabel,
+      itemDescriptionStyle: styles.itemDescription,
+      itemIndicatorStyle: styles.itemIndicator,
+      glyph: {
+        size: indicator.fontSize,
+        // `ColorValue` also covers the platform's opaque colours, which `Icon` cannot
+        // hand to a third-party component expecting a string.
+        color: typeof indicator.color === "string" ? indicator.color : void 0
+      },
+      // The check reads the row's own colour rather than the chevron's: it belongs to the
+      // list, and the chevron belongs to the field.
+      checkColor: typeof itemLabel.color === "string" ? itemLabel.color : void 0,
+      value,
+      isOpen,
+      isDisabled,
+      isInvalid,
+      open,
+      close,
+      toggle,
+      select,
+      anchor,
+      setAnchor,
+      labelFor,
+      registerLabel
+    };
+  }, [
+    styles,
+    pressed,
+    tint,
+    value,
+    isOpen,
+    isDisabled,
+    isInvalid,
+    open,
+    close,
+    toggle,
+    select,
+    anchor,
+    labelFor,
+    registerLabel
+  ]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectProvider, { value: context, children });
+}
+Select.displayName = "XAUI.Select.Root";
+
+// src/components/select/index.ts
+var Select2 = Object.assign(Select, {
+  Trigger: SelectTrigger,
+  Value: SelectValue,
+  Indicator: SelectIndicator,
+  Overlay: SelectOverlay,
+  Content: SelectContent,
+  Label: SelectLabel,
+  Item: SelectItem,
+  ItemLabel: SelectItemLabel,
+  ItemDescription: SelectItemDescription,
+  ItemIndicator: SelectItemIndicator
+});
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+exports.useSelect = useSelect; exports.useSelectItem = useSelectItem; exports.SelectItemLabel = SelectItemLabel; exports.SelectItem = SelectItem; exports.SelectContent = SelectContent; exports.ChevronDownIcon = ChevronDownIcon; exports.SelectIndicator = SelectIndicator; exports.SelectItemDescription = SelectItemDescription; exports.CheckIcon = CheckIcon; exports.SelectItemIndicator = SelectItemIndicator; exports.SelectLabel = SelectLabel; exports.SelectOverlay = SelectOverlay; exports.SelectTrigger = SelectTrigger; exports.SelectValue = SelectValue; exports.selectRecipe = selectRecipe; exports.Select = Select; exports.Select2 = Select2;