@xaui/native 0.9.1-alpha.36 → 0.9.1-alpha.38

package/dist/chunk-ZNZ7HVRW.js

@@ -0,0 +1,1106 @@
+import { Portal, PortalContext } from "./chunk-2PMXMKS5.js";
+import { useMergedRef } from "./chunk-NCTOTTVW.js";
+import { ChevronDownIcon, Icon, IconContext } from "./chunk-FHUYHV6J.js";
+import { useControllableState } from "./chunk-F6W3JQ7K.js";
+import { PressableFeedback } from "./chunk-LIUO6D3D.js";
+import { usePressState } from "./chunk-423RQBOX.js";
+import { childrenToString, createSlotContext } from "./chunk-K72UDPVN.js";
+import { createRecipe, radiusAxis } from "./chunk-4GTAZM2C.js";
+import { useXAUITheme } from "./chunk-A3EGFI6T.js";
+import { useStyleProps } from "./chunk-M63GFNKV.js";
+
+// src/components/select/select-content.tsx
+import { forwardRef as forwardRef3, useContext, useEffect as useEffect2, useState } from "react";
+import { ScrollView, useWindowDimensions } from "react-native";
+import Animated from "react-native-reanimated";
+
+// src/components/select/select.context.ts
+var [SelectProvider, useSelect] = createSlotContext("Select");
+var [SelectItemProvider, useSelectItem] = createSlotContext("Select.Item");
+
+// src/components/select/select.animation.ts
+import { Easing, Keyframe } from "react-native-reanimated";
+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 Keyframe({
+    0: {
+      opacity: 0,
+      transform: [{
+        translateY: from
+      }, {
+        scale: 0.95
+      }]
+    },
+    100: {
+      opacity: 1,
+      transform: [{
+        translateY: 0
+      }, {
+        scale: 1
+      }],
+      easing: Easing.out(Easing.cubic)
+    }
+  }).duration(ENTER_MS);
+}
+function contentExiting(placement) {
+  const to = placement === "bottom" ? -8 : 8;
+  return new Keyframe({
+    0: {
+      opacity: 1,
+      transform: [{
+        translateY: 0
+      }, {
+        scale: 1
+      }]
+    },
+    100: {
+      opacity: 0,
+      transform: [{
+        translateY: to
+      }, {
+        scale: 0.95
+      }],
+      easing: Easing.in(Easing.cubic)
+    }
+  }).duration(EXIT_MS);
+}
+var overlayEntering = new Keyframe({
+  0: {
+    opacity: 0
+  },
+  100: {
+    opacity: 1
+  }
+}).duration(ENTER_MS);
+var overlayExiting = new Keyframe({
+  0: {
+    opacity: 1
+  },
+  100: {
+    opacity: 0
+  }
+}).duration(EXIT_MS);
+
+// src/components/select/select-item.tsx
+import { forwardRef as forwardRef2, useCallback, useEffect, useMemo } from "react";
+
+// src/components/select/select-item-label.tsx
+import { forwardRef } from "react";
+import { Text } from "react-native";
+import { jsx } from "react/jsx-runtime";
+var SelectItemLabel = forwardRef(function SelectItemLabel2({
+  children,
+  numberOfLines = 1,
+  style,
+  ...props
+}, ref) {
+  const {
+    itemLabelStyle
+  } = useSelect();
+  const [styleProps, rest] = useStyleProps(props);
+  return /* @__PURE__ */jsx(Text, {
+    ref,
+    numberOfLines,
+    ...rest,
+    style: [itemLabelStyle, styleProps, style],
+    children
+  });
+});
+SelectItemLabel.displayName = "XAUI.Select.ItemLabel";
+
+// src/components/select/select-item.tsx
+import { Fragment, jsx as jsx2 } from "react/jsx-runtime";
+var SelectItem = forwardRef2(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] = useStyleProps(props);
+  const [isPressed, press] = usePressState({
+    onPressIn,
+    onPressOut
+  });
+  const isSelected = selected === value;
+  const text = typeof children === "function" ? null : childrenToString(children);
+  const registered = label ?? text ?? void 0;
+  useEffect(() => {
+    if (registered !== void 0) registerLabel(value, registered);
+  }, [registerLabel, value, registered]);
+  const handlePress = useCallback(event => {
+    onPress?.(event);
+    select(value, registered);
+  }, [onPress, select, value, registered]);
+  const context = useMemo(() => ({
+    isSelected,
+    isPressed,
+    isDisabled
+  }), [isSelected, isPressed, isDisabled]);
+  return /* @__PURE__ */jsx2(SelectItemProvider, {
+    value: context,
+    children: /* @__PURE__ */jsx2(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__ */jsx2(Fragment, {
+        children: text !== null ? /* @__PURE__ */jsx2(SelectItemLabel, {
+          children: text
+        }) : children
+      })
+    })
+  });
+});
+SelectItem.displayName = "XAUI.Select.Item";
+
+// src/components/select/select.utils.ts
+import { Children, isValidElement } from "react";
+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 => {
+    Children.forEach(node, child => {
+      if (!isValidElement(child)) return;
+      const props = child.props;
+      if (isItem(child.type) && typeof props.value === "string") {
+        const label = props.label ?? childrenToString(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
+import { jsx as jsx3 } from "react/jsx-runtime";
+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 = forwardRef3(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] = useStyleProps(props);
+  const window = useWindowDimensions();
+  const origin = useContext(PortalContext)?.origin ?? ZERO;
+  const [measured, setMeasured] = useState(null);
+  const {
+    registerLabel
+  } = context;
+  useEffect2(() => {
+    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 => {
+    onLayout?.(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__ */jsx3(Portal, {
+    children: /* @__PURE__ */jsx3(SelectProvider, {
+      value: context,
+      children: /* @__PURE__ */jsx3(Animated.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__ */jsx3(ScrollView, {
+          bounces: false,
+          keyboardShouldPersistTaps: "handled",
+          showsVerticalScrollIndicator: false,
+          children
+        })
+      }, position?.placement ?? "measuring")
+    })
+  });
+});
+SelectContent.displayName = "XAUI.Select.Content";
+
+// src/components/select/select-indicator.tsx
+import { useEffect as useEffect3 } from "react";
+import Animated2, { interpolate, useAnimatedStyle, useSharedValue, withSpring } from "react-native-reanimated";
+import { jsx as jsx4 } from "react/jsx-runtime";
+const _worklet_1818497961394_init_data = {
+  code: "function chunkZNZ7HVRWJs1(){const{interpolate,progress,INDICATOR_ROTATION}=this.__closure;return{transform:[{rotate:interpolate(progress.get(),[0,1],[INDICATOR_ROTATION[0],INDICATOR_ROTATION[1]])+\"deg\"}]};}",
+  location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-ZNZ7HVRW.js",
+  sourceMap: "{\"version\":3,\"names\":[\"chunkZNZ7HVRWJs1\",\"interpolate\",\"progress\",\"INDICATOR_ROTATION\",\"__closure\",\"transform\",\"rotate\",\"get\"],\"sources\":[\"/home/runner/work/xaui/xaui/packages/native/dist/chunk-ZNZ7HVRW.js\"],\"mappings\":\"AA0WoC,SAAAA,iBAAA,QAAAC,WAAA,CAAAC,QAAA,CAAAC,kBAAA,OAAAC,SAAA,OAAO,CACvCC,SAAS,CAAE,CACT,CACEC,MAAM,CAAKL,WAAW,CAACC,QAAQ,CAACK,GAAG,CAAC,CAAC,CAAE,CAAC,CAAC,CAAE,CAAC,CAAC,CAAE,CAACJ,kBAAkB,CAAC,CAAC,CAAC,CAAEA,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC,MAChG,CAAC,CAEL,CAAC\",\"ignoreList\":[]}"
+};
+function SelectIndicator({
+  as = ChevronDownIcon,
+  ...props
+}) {
+  const {
+    indicatorStyle,
+    isOpen
+  } = useSelect();
+  const progress = useSharedValue(isOpen ? 1 : 0);
+  useEffect3(() => {
+    progress.set(withSpring(isOpen ? 1 : 0, INDICATOR_SPRING));
+  }, [isOpen, progress]);
+  const rotation = useAnimatedStyle(function chunkZNZ7HVRWJs1Factory({
+    _worklet_1818497961394_init_data,
+    interpolate,
+    progress,
+    INDICATOR_ROTATION
+  }) {
+    const _e = [new global.Error(), -4, -27];
+    const chunkZNZ7HVRWJs1 = () => ({
+      transform: [{
+        rotate: `${interpolate(progress.get(), [0, 1], [INDICATOR_ROTATION[0], INDICATOR_ROTATION[1]])}deg`
+      }]
+    });
+    chunkZNZ7HVRWJs1.__closure = {
+      interpolate,
+      progress,
+      INDICATOR_ROTATION
+    };
+    chunkZNZ7HVRWJs1.__workletHash = 1818497961394;
+    chunkZNZ7HVRWJs1.__pluginVersion = "0.7.4";
+    chunkZNZ7HVRWJs1.__initData = _worklet_1818497961394_init_data;
+    chunkZNZ7HVRWJs1.__stackDetails = _e;
+    return chunkZNZ7HVRWJs1;
+  }({
+    _worklet_1818497961394_init_data,
+    interpolate,
+    progress,
+    INDICATOR_ROTATION
+  }));
+  return /* @__PURE__ */jsx4(Animated2.View, {
+    style: [indicatorStyle, rotation],
+    children: /* @__PURE__ */jsx4(Icon, {
+      as,
+      ...props
+    })
+  });
+}
+SelectIndicator.displayName = "XAUI.Select.Indicator";
+
+// src/components/select/select-item-description.tsx
+import { forwardRef as forwardRef4 } from "react";
+import { Text as Text2 } from "react-native";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var SelectItemDescription = forwardRef4(function SelectItemDescription2({
+  children,
+  style,
+  ...props
+}, ref) {
+  const {
+    itemDescriptionStyle
+  } = useSelect();
+  const [styleProps, rest] = useStyleProps(props);
+  return /* @__PURE__ */jsx5(Text2, {
+    ref,
+    ...rest,
+    style: [itemDescriptionStyle, styleProps, style],
+    children
+  });
+});
+SelectItemDescription.displayName = "XAUI.Select.ItemDescription";
+
+// src/components/select/select-item-indicator.tsx
+import { View } from "react-native";
+
+// src/components/select/check-icon.tsx
+import { Path, Svg } from "react-native-svg";
+import { jsx as jsx6 } from "react/jsx-runtime";
+function CheckIcon({
+  size = 20,
+  color = "currentColor"
+}) {
+  return /* @__PURE__ */jsx6(Svg, {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    children: /* @__PURE__ */jsx6(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
+import { jsx as jsx7 } from "react/jsx-runtime";
+function SelectItemIndicator({
+  as = CheckIcon,
+  color,
+  ...props
+}) {
+  const {
+    itemIndicatorStyle,
+    checkColor
+  } = useSelect();
+  const {
+    isSelected
+  } = useSelectItem();
+  return /* @__PURE__ */jsx7(View, {
+    style: itemIndicatorStyle,
+    children: isSelected ? /* @__PURE__ */jsx7(Icon, {
+      as,
+      color: color ?? checkColor,
+      ...props
+    }) : null
+  });
+}
+SelectItemIndicator.displayName = "XAUI.Select.ItemIndicator";
+
+// src/components/select/select-label.tsx
+import { forwardRef as forwardRef5 } from "react";
+import { Text as Text3 } from "react-native";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var SelectLabel = forwardRef5(function SelectLabel2({
+  children,
+  accessibilityRole = "header",
+  style,
+  ...props
+}, ref) {
+  const {
+    labelStyle
+  } = useSelect();
+  const [styleProps, rest] = useStyleProps(props);
+  return /* @__PURE__ */jsx8(Text3, {
+    ref,
+    accessibilityRole,
+    ...rest,
+    style: [labelStyle, styleProps, style],
+    children
+  });
+});
+SelectLabel.displayName = "XAUI.Select.Label";
+
+// src/components/select/select-overlay.tsx
+import { forwardRef as forwardRef6 } from "react";
+import { Pressable } from "react-native";
+import Animated3 from "react-native-reanimated";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var AnimatedPressable = Animated3.createAnimatedComponent(Pressable);
+var SelectOverlay = forwardRef6(function SelectOverlay2({
+  children,
+  isDismissable = true,
+  style,
+  ...props
+}, ref) {
+  const context = useSelect();
+  const {
+    overlayStyle,
+    isOpen,
+    close
+  } = context;
+  const [styleProps, rest] = useStyleProps(props);
+  if (!isOpen) return null;
+  return /* @__PURE__ */jsx9(Portal, {
+    children: /* @__PURE__ */jsx9(SelectProvider, {
+      value: context,
+      children: /* @__PURE__ */jsx9(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
+import { forwardRef as forwardRef7, useCallback as useCallback2, useEffect as useEffect4, useRef } from "react";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var SelectTrigger = forwardRef7(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] = useStyleProps(props);
+  const [isPressed, press] = usePressState({
+    onPressIn,
+    onPressOut
+  });
+  const node = useRef(null);
+  const refs = useMergedRef(node, ref);
+  const measure = useCallback2(() => {
+    node.current?.measureInWindow((x, y, width, height) => {
+      setAnchor({
+        x,
+        y,
+        width,
+        height
+      });
+    });
+  }, [setAnchor]);
+  const handleLayout = useCallback2(event => {
+    onLayout?.(event);
+    measure();
+  }, [measure, onLayout]);
+  useEffect4(() => {
+    if (isOpen) measure();
+  }, [isOpen, measure]);
+  const handlePress = useCallback2(event => {
+    onPress?.(event);
+    measure();
+    toggle();
+  }, [measure, onPress, toggle]);
+  return /* @__PURE__ */jsx10(IconContext.Provider, {
+    value: glyph,
+    children: /* @__PURE__ */jsx10(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
+import { forwardRef as forwardRef8 } from "react";
+import { Text as Text4 } from "react-native";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var SelectValue = forwardRef8(function SelectValue2({
+  placeholder,
+  children,
+  numberOfLines = 1,
+  style,
+  ...props
+}, ref) {
+  const {
+    valueStyle,
+    placeholderStyle,
+    value,
+    labelFor
+  } = useSelect();
+  const [styleProps, rest] = useStyleProps(props);
+  const label = children ?? (value !== void 0 ? labelFor(value) : void 0);
+  const isEmpty = label === void 0 || label === "";
+  return /* @__PURE__ */jsx11(Text4, {
+    ref,
+    numberOfLines,
+    ...rest,
+    style: [valueStyle, isEmpty && placeholderStyle, styleProps, style],
+    children: isEmpty ? placeholder : label
+  });
+});
+SelectValue.displayName = "XAUI.Select.Value";
+
+// src/components/select/select.tsx
+import { useCallback as useCallback4, useMemo as useMemo3, useState as useState3 } from "react";
+import { StyleSheet } from "react-native";
+
+// src/components/select/select.hook.ts
+import { useCallback as useCallback3, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
+function useLabelRegistry() {
+  const labels = useRef2(/* @__PURE__ */new Map());
+  const [, force] = useState2(0);
+  const registerLabel = useCallback3((value, label) => {
+    if (labels.current.get(value) === label) return;
+    labels.current.set(value, label);
+    force(n => n + 1);
+  }, []);
+  const labelFor = useCallback3(value => labels.current.get(value), []);
+  return useMemo2(() => ({
+    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 = createRecipe({
+  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: radiusAxis("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
+import { jsx as jsx12 } from "react/jsx-runtime";
+function Select({
+  children,
+  variant,
+  size,
+  radius,
+  color,
+  value: controlledValue,
+  defaultValue,
+  onValueChange,
+  isOpen: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  isDisabled = false,
+  isInvalid = false
+}) {
+  const theme = useXAUITheme();
+  const {
+    labelFor,
+    registerLabel
+  } = useLabelRegistry();
+  const [anchor, setAnchor] = useState3(null);
+  const [value, setValue] = useControllableState({
+    value: controlledValue,
+    defaultValue,
+    onChange: onValueChange
+  });
+  const [isOpen, 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 = useCallback4(() => setOpen(true), [setOpen]);
+  const close = useCallback4(() => setOpen(false), [setOpen]);
+  const toggle = useCallback4(() => setOpen(!isOpen), [isOpen, setOpen]);
+  const select = useCallback4((next, label) => {
+    if (label !== void 0) registerLabel(next, label);
+    setValue(next);
+    setOpen(false);
+  }, [registerLabel, setValue, setOpen]);
+  const context = useMemo3(() => {
+    const indicator = StyleSheet.flatten([styles.indicator, tint?.indicator]);
+    const itemLabel = StyleSheet.flatten([styles.itemLabel]);
+    const tintedPlaceholder = tint ? 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__ */jsx12(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
+});
+export { useSelect, useSelectItem, SelectItemLabel, SelectItem, SelectContent, SelectIndicator, SelectItemDescription, CheckIcon, SelectItemIndicator, SelectLabel, SelectOverlay, SelectTrigger, SelectValue, selectRecipe, Select, Select2 };