@xaui/native 0.9.1-alpha.9 → 0.9.1-alpha.91

package/dist/chunk-EBCAPIBD.js

@@ -0,0 +1,1049 @@
+import { hourCycleFor, periodOf, withTime } from "./chunk-3MRCSXGT.js";
+import { BottomSheet2 as BottomSheet } from "./chunk-LECYGVIH.js";
+import { selectRecipe } from "./chunk-E4FWGZH2.js";
+import { useControllableState } from "./chunk-F6W3JQ7K.js";
+import { PressableFeedback } from "./chunk-2AFA5HA2.js";
+import { usePressState } from "./chunk-423RQBOX.js";
+import { Icon, IconContext, useIconContext } from "./chunk-JN6IRT2M.js";
+import { createRecipe } from "./chunk-DKVXTMIJ.js";
+import { createSlotContext } from "./chunk-TTZOIXKE.js";
+import { useXAUITheme } from "./chunk-Z6JBWRPL.js";
+import { useStyleProps } from "./chunk-M63GFNKV.js";
+
+// src/components/time-picker/time-picker-clock.tsx
+import { forwardRef, useCallback, useMemo, useRef } from "react";
+import { Pressable, Text, View } from "react-native";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import { runOnJS } from "react-native-reanimated";
+
+// src/utils/clock.ts
+var FULL_TURN = 360;
+var RIGHT_ANGLE = 90;
+function clockAngle(value, count) {
+  if (count <= 0) return 0;
+  const turns = (value % count + count) % count;
+  return turns / count * FULL_TURN;
+}
+function valueAtAngle(angle, count) {
+  if (count <= 0) return 0;
+  const turns = (angle % FULL_TURN + FULL_TURN) % FULL_TURN;
+  return Math.round(turns / FULL_TURN * count) % count;
+}
+function clockPoint(center, radius, angle) {
+  const radians = angle * Math.PI / 180;
+  return {
+    x: center.x + radius * Math.sin(radians),
+    y: center.y - radius * Math.cos(radians)
+  };
+}
+function angleAtPoint(center, point) {
+  const degrees = Math.atan2(point.y - center.y, point.x - center.x) * 180 / Math.PI;
+  return ((degrees + RIGHT_ANGLE) % FULL_TURN + FULL_TURN) % FULL_TURN;
+}
+function distanceFrom(center, point) {
+  return Math.hypot(point.x - center.x, point.y - center.y);
+}
+
+// src/components/time-picker/time-picker.recipe.ts
+var SLOTS = ["dial", "face", "mark", "markSelected", "markLabel", "markLabelSelected", "hand", "hub", "display", "unit", "unitSelected", "colon", "periods", "period", "periodSelected", "periodLabel", "periodLabelSelected"];
+var VARIANT_TOKENS = {
+  default: {
+    bg: "surfaceSecondary",
+    fg: "foreground",
+    bgSelected: "accent",
+    fgSelected: "accentForeground"
+  }
+};
+var SIZES = {
+  sm: {
+    box: 232,
+    ring: 0.82,
+    mark: 34,
+    innerRing: 0.54,
+    display: "2xl",
+    markLabel: "md",
+    periodLabel: "xs",
+    periodPadding: 1.5
+  },
+  md: {
+    box: 268,
+    ring: 0.82,
+    mark: 38,
+    innerRing: 0.55,
+    display: "3xl",
+    markLabel: "lg",
+    periodLabel: "sm",
+    periodPadding: 2
+  },
+  lg: {
+    box: 304,
+    ring: 0.82,
+    mark: 42,
+    innerRing: 0.56,
+    display: "4xl",
+    markLabel: "xl",
+    periodLabel: "sm",
+    periodPadding: 2.5
+  }
+};
+function timePickerDial(size) {
+  const {
+    box,
+    ring,
+    mark,
+    innerRing
+  } = SIZES[size];
+  return {
+    box,
+    ring,
+    mark,
+    innerRing
+  };
+}
+var HAND_WIDTH = 3;
+var HUB_SIZE = 10;
+function sizeAxis(step) {
+  return theme => ({
+    dial: {
+      width: step.box,
+      height: step.box
+    },
+    // The display is as wide as the face beneath it. That is what centres the numbers over
+    // the dial rather than over themselves, and what gives `periods` an edge to hang from.
+    display: {
+      width: step.box
+    },
+    face: {
+      width: step.box,
+      height: step.box,
+      borderRadius: step.box / 2
+    },
+    mark: {
+      width: step.mark,
+      height: step.mark,
+      borderRadius: step.mark / 2
+    },
+    markSelected: {
+      width: step.mark,
+      height: step.mark,
+      borderRadius: step.mark / 2
+    },
+    markLabel: {
+      fontSize: theme.fontSizes[step.markLabel],
+      lineHeight: theme.lineHeights[step.markLabel]
+    },
+    markLabelSelected: {
+      fontSize: theme.fontSizes[step.markLabel],
+      lineHeight: theme.lineHeights[step.markLabel]
+    },
+    periodLabel: {
+      fontSize: theme.fontSizes[step.periodLabel],
+      lineHeight: theme.lineHeights[step.periodLabel]
+    },
+    periodLabelSelected: {
+      fontSize: theme.fontSizes[step.periodLabel],
+      lineHeight: theme.lineHeights[step.periodLabel]
+    },
+    period: {
+      paddingHorizontal: theme.spacing(step.periodPadding)
+    },
+    periodSelected: {
+      paddingHorizontal: theme.spacing(step.periodPadding)
+    },
+    unit: {
+      fontSize: theme.fontSizes[step.display],
+      lineHeight: theme.lineHeights[step.display]
+    },
+    unitSelected: {
+      fontSize: theme.fontSizes[step.display],
+      lineHeight: theme.lineHeights[step.display]
+    },
+    colon: {
+      fontSize: theme.fontSizes[step.display],
+      lineHeight: theme.lineHeights[step.display]
+    }
+  });
+}
+var timePickerRecipe = createRecipe({
+  slots: SLOTS,
+  base: theme => ({
+    dial: {
+      alignItems: "center",
+      justifyContent: "center",
+      marginBottom: theme.spacing(4)
+    },
+    face: {
+      position: "relative"
+    },
+    // Every mark is placed by `clockPoint`, so it is out of flow and centred on its own
+    // point — a fixed box pulled back by half of it, which is the only placement that works
+    // at every angle without measuring the text.
+    mark: {
+      position: "absolute",
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    markSelected: {
+      position: "absolute",
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    markLabel: {
+      fontFamily: theme.fontFamilies.body,
+      color: theme.colors.foreground
+    },
+    markLabelSelected: {
+      fontFamily: theme.fontFamilies.body
+    },
+    periodLabel: {
+      fontFamily: theme.fontFamilies.body,
+      fontWeight: theme.fontWeights.medium,
+      color: theme.colors.muted
+    },
+    periodLabelSelected: {
+      fontFamily: theme.fontFamilies.body,
+      fontWeight: theme.fontWeights.semibold
+    },
+    /**
+     * The hand grows **from the hub outwards**, which is why its origin is the bottom of the
+     * bar rather than its middle: a rotation about the centre of a bar half the radius long
+     * would swing its far end round the face and its near end round the other way.
+     */
+    hand: {
+      position: "absolute",
+      width: HAND_WIDTH,
+      borderRadius: HAND_WIDTH,
+      transformOrigin: "bottom"
+    },
+    hub: {
+      position: "absolute",
+      width: HUB_SIZE,
+      height: HUB_SIZE,
+      borderRadius: HUB_SIZE / 2
+    },
+    // As wide as the dial (see `sizeAxis`) and centred, so the two numbers sit over the
+    // middle of the face and `periods` can hang off the trailing edge without shifting
+    // them — the time stays centred whether or not AM/PM is there.
+    display: {
+      position: "relative",
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: theme.spacing(1),
+      marginBottom: theme.spacing(3)
+    },
+    unit: {
+      fontFamily: theme.fontFamilies.body,
+      fontWeight: theme.fontWeights.medium,
+      color: theme.colors.muted
+    },
+    unitSelected: {
+      fontFamily: theme.fontFamilies.body,
+      fontWeight: theme.fontWeights.semibold
+    },
+    colon: {
+      fontFamily: theme.fontFamilies.body,
+      fontWeight: theme.fontWeights.medium,
+      color: theme.colors.muted
+    },
+    periods: {
+      // Out of flow, pinned to the trailing edge of `display` — which is as wide as the
+      // dial — and centred against the numbers. The numbers keep the middle of that box
+      // whether or not AM/PM is there, so the time sits dead centre over the face.
+      //
+      // Pinned with `end`, and inside the box rather than past it: an absolute child hung
+      // off `start: '100%'` sits outside its parent's bounds, where a clipping ancestor
+      // can eat it.
+      position: "absolute",
+      end: 0,
+      alignSelf: "center",
+      // AM and PM on one line — a pair read side by side faster than one stacked.
+      flexDirection: "row",
+      // `field` is 12 on a pill barely more than twice that tall — a gélule. `sm` reads as
+      // a small boxed caption, which is what AM/PM is beside numbers this size.
+      borderRadius: theme.radius.sm,
+      borderCurve: "continuous",
+      overflow: "hidden",
+      borderWidth: theme.borderWidth.field,
+      borderColor: theme.colors.border
+    },
+    // Only the vertical here — the horizontal is per size, and `periodPadding` says why.
+    period: {
+      paddingVertical: theme.spacing(1.5),
+      alignItems: "center"
+    },
+    periodSelected: {
+      paddingVertical: theme.spacing(1.5),
+      alignItems: "center"
+    }
+  }),
+  variantTokens: VARIANT_TOKENS,
+  paint: (theme, colors) => ({
+    face: {
+      backgroundColor: colors.bg
+    },
+    markSelected: {
+      backgroundColor: colors.bgSelected
+    },
+    markLabelSelected: {
+      color: colors.fgSelected
+    },
+    periodLabelSelected: {
+      color: colors.fgSelected
+    },
+    hand: {
+      backgroundColor: colors.bgSelected
+    },
+    hub: {
+      backgroundColor: colors.bgSelected
+    },
+    unitSelected: {
+      color: colors.bgSelected
+    },
+    periodSelected: {
+      backgroundColor: colors.bgSelected
+    }
+  }),
+  variants: {
+    size: {
+      sm: sizeAxis(SIZES.sm),
+      md: sizeAxis(SIZES.md),
+      lg: sizeAxis(SIZES.lg)
+    }
+  },
+  states: {
+    disabled: theme => ({
+      dial: {
+        opacity: theme.opacity.disabled
+      }
+    })
+  },
+  // `default` and not just the size: `paint` runs off the *selected* variant, and a table
+  // with one entry still has to be selected for its tokens to be read. Without it the face
+  // has no fill, the hand no colour and the chosen mark no ring — which is exactly how this
+  // was found.
+  defaultVariants: {
+    variant: "default",
+    size: "md"
+  }
+});
+
+// src/components/time-picker/time-picker.context.ts
+var [TimePickerProvider, useTimePicker] = createSlotContext("TimePicker");
+
+// src/components/time-picker/time-picker-clock.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var HOURS_ON_A_FACE = 12;
+var MINUTES_IN_AN_HOUR = 60;
+var LABELLED_MINUTE = 5;
+const _worklet_14423517188177_init_data = {
+  code: "function chunkEBCAPIBDJs1(event){const{runOnJS,valueAt}=this.__closure;return runOnJS(valueAt)(event.x,event.y,true);}",
+  location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-EBCAPIBD.js",
+  sourceMap: "{\"version\":3,\"names\":[\"chunkEBCAPIBDJs1\",\"event\",\"runOnJS\",\"valueAt\",\"__closure\",\"x\",\"y\"],\"sources\":[\"/home/runner/work/xaui/xaui/packages/native/dist/chunk-EBCAPIBD.js\"],\"mappings\":\"AA+akM,SAAAA,gBAAKA,CAAAC,KAAA,QAAAC,OAAA,CAAAC,OAAA,OAAAC,SAAA,OAAK,CAAAF,OAAQ,CAAAC,OAAQ,CAAC,CAAAF,KAAM,CAACI,CAAA,CAAEJ,KAAM,CAACK,CAAA,CAAE,IAAI\",\"ignoreList\":[]}"
+};
+const _worklet_17497877196409_init_data = {
+  code: "function chunkEBCAPIBDJs2(event){const{runOnJS,valueAt}=this.__closure;return runOnJS(valueAt)(event.x,event.y,false);}",
+  location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-EBCAPIBD.js",
+  sourceMap: "{\"version\":3,\"names\":[\"chunkEBCAPIBDJs2\",\"event\",\"runOnJS\",\"valueAt\",\"__closure\",\"x\",\"y\"],\"sources\":[\"/home/runner/work/xaui/xaui/packages/native/dist/chunk-EBCAPIBD.js\"],\"mappings\":\"AA+asI,SAAAA,gBAAKA,CAAAC,KAAA,QAAAC,OAAA,CAAAC,OAAA,OAAAC,SAAA,OAAK,CAAAF,OAAQ,CAAAC,OAAQ,CAAC,CAAAF,KAAM,CAACI,CAAA,CAAEJ,KAAM,CAACK,CAAA,CAAE,KAAK\",\"ignoreList\":[]}"
+};
+const _worklet_6447009173048_init_data = {
+  code: "function chunkEBCAPIBDJs3(event){const{runOnJS,valueAt}=this.__closure;return runOnJS(valueAt)(event.x,event.y,false);}",
+  location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-EBCAPIBD.js",
+  sourceMap: "{\"version\":3,\"names\":[\"chunkEBCAPIBDJs3\",\"event\",\"runOnJS\",\"valueAt\",\"__closure\",\"x\",\"y\"],\"sources\":[\"/home/runner/work/xaui/xaui/packages/native/dist/chunk-EBCAPIBD.js\"],\"mappings\":\"AA+auE,SAAAA,gBAAKA,CAAAC,KAAA,QAAAC,OAAA,CAAAC,OAAA,OAAAC,SAAA,OAAK,CAAAF,OAAQ,CAAAC,OAAQ,CAAC,CAAAF,KAAM,CAACI,CAAA,CAAEJ,KAAM,CAACK,CAAA,CAAE,KAAK\",\"ignoreList\":[]}"
+};
+var TimePickerClock = forwardRef(function TimePickerClock2({
+  children,
+  style,
+  ...props
+}, ref) {
+  const {
+    dialStyle,
+    faceStyle,
+    markStyle,
+    markSelectedStyle,
+    markLabelStyle,
+    markLabelSelectedStyle,
+    handStyle,
+    hubStyle,
+    dial,
+    hours,
+    minutes,
+    hourCycle,
+    minuteStep,
+    unit,
+    onDragHour,
+    onDragMinute,
+    onPickHour,
+    onPickMinute,
+    isDisabled
+  } = useTimePicker();
+  const [styleProps, rest] = useStyleProps(props);
+  const center = {
+    x: dial.box / 2,
+    y: dial.box / 2
+  };
+  const radius = dial.box / 2;
+  const marks = useMemo(() => {
+    if (unit === "hour") {
+      const outer = Array.from({
+        length: HOURS_ON_A_FACE
+      }, (_, index) => {
+        const value = index === 0 ? HOURS_ON_A_FACE : index;
+        return {
+          value,
+          label: String(value),
+          angle: clockAngle(index, HOURS_ON_A_FACE),
+          ring: dial.ring
+        };
+      });
+      if (hourCycle === 12) return outer;
+      const inner = Array.from({
+        length: HOURS_ON_A_FACE
+      }, (_, index) => {
+        const value = index === 0 ? 0 : index + HOURS_ON_A_FACE;
+        return {
+          value,
+          // `00` rather than `24`: midnight is the start of a day and not its end, and
+          // the hour the field reports is 0.
+          label: String(value).padStart(2, "0"),
+          angle: clockAngle(index, HOURS_ON_A_FACE),
+          ring: dial.innerRing
+        };
+      });
+      return [...outer, ...inner];
+    }
+    const step = Math.max(1, minuteStep);
+    return Array.from({
+      length: Math.floor(MINUTES_IN_AN_HOUR / step)
+    }, (_, index) => {
+      const value = index * step % MINUTES_IN_AN_HOUR;
+      return {
+        value,
+        label: value % LABELLED_MINUTE === 0 ? String(value).padStart(2, "0") : "",
+        angle: clockAngle(value, MINUTES_IN_AN_HOUR),
+        ring: dial.ring
+      };
+    });
+  }, [dial.innerRing, dial.ring, hourCycle, minuteStep, unit]);
+  const chosen = unit === "hour" ? hours : minutes;
+  const handAngle = unit === "hour" ? clockAngle(hours % HOURS_ON_A_FACE, HOURS_ON_A_FACE) : clockAngle(minutes, MINUTES_IN_AN_HOUR);
+  const handRing = unit === "hour" && hourCycle === 24 && (hours === 0 || hours > HOURS_ON_A_FACE) ? dial.innerRing : dial.ring;
+  const latest = useRef({
+    center,
+    radius,
+    unit,
+    minuteStep,
+    hourCycle,
+    ring: dial.ring,
+    innerRing: dial.innerRing,
+    onDragHour,
+    onDragMinute,
+    onPickHour,
+    onPickMinute
+  });
+  latest.current = {
+    center,
+    radius,
+    unit,
+    minuteStep,
+    hourCycle,
+    ring: dial.ring,
+    innerRing: dial.innerRing,
+    onDragHour,
+    onDragMinute,
+    onPickHour,
+    onPickMinute
+  };
+  const valueAt = useCallback((x, y, settle) => {
+    const now = latest.current;
+    const point = {
+      x,
+      y
+    };
+    const angle = angleAtPoint(now.center, point);
+    if (now.unit === "minute") {
+      const step = Math.max(1, now.minuteStep);
+      const raw2 = valueAtAngle(angle, MINUTES_IN_AN_HOUR);
+      const minute = Math.round(raw2 / step) * step % MINUTES_IN_AN_HOUR;
+      if (settle) now.onPickMinute(minute);else now.onDragMinute(minute);
+      return;
+    }
+    const setHour = settle ? now.onPickHour : now.onDragHour;
+    const raw = valueAtAngle(angle, HOURS_ON_A_FACE);
+    if (now.hourCycle === 12) {
+      setHour(raw === 0 ? HOURS_ON_A_FACE : raw);
+      return;
+    }
+    const onInner = distanceFrom(now.center, point) < now.radius * (now.ring + now.innerRing) * 0.5;
+    if (onInner) setHour(raw === 0 ? 0 : raw + HOURS_ON_A_FACE);else setHour(raw === 0 ? HOURS_ON_A_FACE : raw);
+  }, []);
+  const drag = useMemo(() => Gesture.Pan().enabled(!isDisabled).minDistance(0).onStart(function chunkEBCAPIBDJs3Factory({
+    _worklet_6447009173048_init_data,
+    runOnJS,
+    valueAt
+  }) {
+    const _e = [new global.Error(), -3, -27];
+    const chunkEBCAPIBDJs3 = event => runOnJS(valueAt)(event.x, event.y, false);
+    chunkEBCAPIBDJs3.__closure = {
+      runOnJS,
+      valueAt
+    };
+    chunkEBCAPIBDJs3.__workletHash = 6447009173048;
+    chunkEBCAPIBDJs3.__pluginVersion = "0.7.4";
+    chunkEBCAPIBDJs3.__initData = _worklet_6447009173048_init_data;
+    chunkEBCAPIBDJs3.__stackDetails = _e;
+    return chunkEBCAPIBDJs3;
+  }({
+    _worklet_6447009173048_init_data,
+    runOnJS,
+    valueAt
+  })).onUpdate(function chunkEBCAPIBDJs2Factory({
+    _worklet_17497877196409_init_data,
+    runOnJS,
+    valueAt
+  }) {
+    const _e = [new global.Error(), -3, -27];
+    const chunkEBCAPIBDJs2 = event => runOnJS(valueAt)(event.x, event.y, false);
+    chunkEBCAPIBDJs2.__closure = {
+      runOnJS,
+      valueAt
+    };
+    chunkEBCAPIBDJs2.__workletHash = 17497877196409;
+    chunkEBCAPIBDJs2.__pluginVersion = "0.7.4";
+    chunkEBCAPIBDJs2.__initData = _worklet_17497877196409_init_data;
+    chunkEBCAPIBDJs2.__stackDetails = _e;
+    return chunkEBCAPIBDJs2;
+  }({
+    _worklet_17497877196409_init_data,
+    runOnJS,
+    valueAt
+  })).onEnd(function chunkEBCAPIBDJs1Factory({
+    _worklet_14423517188177_init_data,
+    runOnJS,
+    valueAt
+  }) {
+    const _e = [new global.Error(), -3, -27];
+    const chunkEBCAPIBDJs1 = event => runOnJS(valueAt)(event.x, event.y, true);
+    chunkEBCAPIBDJs1.__closure = {
+      runOnJS,
+      valueAt
+    };
+    chunkEBCAPIBDJs1.__workletHash = 14423517188177;
+    chunkEBCAPIBDJs1.__pluginVersion = "0.7.4";
+    chunkEBCAPIBDJs1.__initData = _worklet_14423517188177_init_data;
+    chunkEBCAPIBDJs1.__stackDetails = _e;
+    return chunkEBCAPIBDJs1;
+  }({
+    _worklet_14423517188177_init_data,
+    runOnJS,
+    valueAt
+  })), [isDisabled, valueAt]);
+  return /* @__PURE__ */jsx(View, {
+    ref,
+    ...rest,
+    style: [dialStyle, styleProps, style],
+    children: /* @__PURE__ */jsx(GestureDetector, {
+      gesture: drag,
+      children: /* @__PURE__ */jsxs(View, {
+        style: faceStyle,
+        children: [/* @__PURE__ */jsx(View, {
+          style: [handStyle, {
+            height: radius * handRing,
+            start: center.x - HAND_WIDTH / 2,
+            top: center.y - radius * handRing,
+            transform: [{
+              rotate: `${handAngle}deg`
+            }]
+          }]
+        }), /* @__PURE__ */jsx(View, {
+          style: [hubStyle, {
+            start: center.x - HUB_SIZE / 2,
+            top: center.y - HUB_SIZE / 2
+          }]
+        }), marks.map(mark => {
+          const at = clockPoint(center, radius * mark.ring, mark.angle);
+          const isChosen = mark.value === chosen;
+          return /* @__PURE__ */jsx(Pressable, {
+            accessibilityRole: "button",
+            accessibilityState: {
+              selected: isChosen,
+              disabled: isDisabled
+            },
+            accessibilityValue: {
+              text: mark.label || String(mark.value)
+            },
+            disabled: isDisabled,
+            style: [isChosen ? markSelectedStyle : markStyle, {
+              start: at.x - dial.mark / 2,
+              top: at.y - dial.mark / 2
+            }],
+            onPress: () => unit === "hour" ? onPickHour(mark.value) : onPickMinute(mark.value),
+            children: mark.label === "" ? null : /* @__PURE__ */jsx(Text, {
+              style: isChosen ? markLabelSelectedStyle : markLabelStyle,
+              children: mark.label
+            })
+          }, `${unit}-${mark.value}`);
+        }), children]
+      })
+    })
+  });
+});
+TimePickerClock.displayName = "XAUI.TimePicker.Clock";
+
+// src/components/time-picker/time-picker-display.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { Pressable as Pressable2, Text as Text2, View as View2 } from "react-native";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var PERIODS = ["am", "pm"];
+var LABELS = {
+  am: "AM",
+  pm: "PM"
+};
+var TimePickerDisplay = forwardRef2(function TimePickerDisplay2({
+  children,
+  style,
+  ...props
+}, ref) {
+  const {
+    displayStyle,
+    unitStyle,
+    unitSelectedStyle,
+    colonStyle,
+    periodsStyle,
+    periodStyle,
+    periodSelectedStyle,
+    periodLabelStyle,
+    periodLabelSelectedStyle,
+    hours,
+    minutes,
+    period,
+    hourCycle,
+    unit,
+    setUnit,
+    onPeriodChange,
+    isDisabled
+  } = useTimePicker();
+  const [styleProps, rest] = useStyleProps(props);
+  const pad = value => String(value).padStart(2, "0");
+  return /* @__PURE__ */jsx2(View2, {
+    ref,
+    ...rest,
+    style: [displayStyle, styleProps, style],
+    children: children ?? /* @__PURE__ */jsxs2(Fragment, {
+      children: [/* @__PURE__ */jsx2(Pressable2, {
+        accessibilityRole: "button",
+        accessibilityState: {
+          selected: unit === "hour",
+          disabled: isDisabled
+        },
+        disabled: isDisabled,
+        onPress: () => setUnit("hour"),
+        children: /* @__PURE__ */jsx2(Text2, {
+          style: unit === "hour" ? unitSelectedStyle : unitStyle,
+          children: pad(hours)
+        })
+      }), /* @__PURE__ */jsx2(Text2, {
+        style: colonStyle,
+        children: ":"
+      }), /* @__PURE__ */jsx2(Pressable2, {
+        accessibilityRole: "button",
+        accessibilityState: {
+          selected: unit === "minute",
+          disabled: isDisabled
+        },
+        disabled: isDisabled,
+        onPress: () => setUnit("minute"),
+        children: /* @__PURE__ */jsx2(Text2, {
+          style: unit === "minute" ? unitSelectedStyle : unitStyle,
+          children: pad(minutes)
+        })
+      }), hourCycle === 12 ? /* @__PURE__ */jsx2(View2, {
+        style: periodsStyle,
+        children: PERIODS.map(half => /* @__PURE__ */jsx2(Pressable2, {
+          accessibilityRole: "button",
+          accessibilityState: {
+            selected: half === period,
+            disabled: isDisabled
+          },
+          accessibilityValue: {
+            text: LABELS[half]
+          },
+          disabled: isDisabled,
+          style: half === period ? periodSelectedStyle : periodStyle,
+          onPress: () => onPeriodChange(half),
+          children: /* @__PURE__ */jsx2(Text2, {
+            style: half === period ? periodLabelSelectedStyle : periodLabelStyle,
+            children: LABELS[half]
+          })
+        }, half))
+      }) : null]
+    })
+  });
+});
+TimePickerDisplay.displayName = "XAUI.TimePicker.Display";
+
+// src/components/time-picker/time-picker-indicator.tsx
+import { View as View3 } from "react-native";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var HOUR_ANGLE = "-60deg";
+var MINUTE_ANGLE = "60deg";
+function TimePickerIndicator(props) {
+  const glyph = useIconContext();
+  if (props.as || props.children || props.source) return /* @__PURE__ */jsx3(Icon, {
+    ...props
+  });
+  const size = props.size ?? glyph.size ?? 18;
+  const color = props.color ?? glyph.color;
+  const stroke = Math.max(1, Math.round(size / 12));
+  return /* @__PURE__ */jsx3(View3, {
+    style: {
+      width: size,
+      height: size,
+      borderWidth: stroke,
+      borderColor: color,
+      borderRadius: size / 2,
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    children: [{
+      height: size * 0.28,
+      rotate: HOUR_ANGLE
+    }, {
+      height: size * 0.36,
+      rotate: MINUTE_ANGLE
+    }].map(hand => /* @__PURE__ */jsx3(View3, {
+      style: {
+        position: "absolute",
+        width: stroke,
+        height: hand.height,
+        backgroundColor: color,
+        borderRadius: stroke,
+        bottom: size / 2 - stroke,
+        transformOrigin: "bottom",
+        transform: [{
+          rotate: hand.rotate
+        }]
+      }
+    }, hand.rotate))
+  });
+}
+TimePickerIndicator.displayName = "XAUI.TimePicker.Indicator";
+
+// src/components/time-picker/time-picker.tsx
+import { useCallback as useCallback2, useMemo as useMemo2, useState } from "react";
+import { StyleSheet } from "react-native";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var DEFAULT_FORMAT = {
+  timeStyle: "short"
+};
+var HOURS_IN_HALF_DAY = 12;
+function TimePicker({
+  children,
+  variant,
+  size = "md",
+  radius,
+  color,
+  value: controlledValue,
+  defaultValue,
+  onValueChange,
+  isOpen: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  hourCycle: hourCycleProp,
+  minuteStep = 1,
+  locale,
+  formatOptions = DEFAULT_FORMAT,
+  closeOnSelect = true,
+  isDisabled = false,
+  isInvalid = false
+}) {
+  const theme = useXAUITheme();
+  const [value, setValue] = useControllableState({
+    value: controlledValue,
+    defaultValue,
+    onChange: onValueChange
+  });
+  const [isOpen, setOpen] = useControllableState({
+    value: controlledOpen,
+    defaultValue: defaultOpen,
+    onChange: onOpenChange
+  });
+  const [unit, setUnit] = useState("hour");
+  const hourCycle = hourCycleProp ?? hourCycleFor(locale ?? "en-US");
+  const selection = {
+    variant,
+    size,
+    radius,
+    isOpen: isOpen ? "true" : void 0,
+    isInvalid: isInvalid ? "true" : void 0
+  };
+  const field = selectRecipe.resolve({
+    theme,
+    selection,
+    states: {
+      disabled: isDisabled
+    }
+  });
+  const fieldPressed = selectRecipe.resolve({
+    theme,
+    selection,
+    states: {
+      pressed: true
+    }
+  });
+  const fieldTint = color ? selectRecipe.tint({
+    theme,
+    color,
+    selection
+  }) : void 0;
+  const dialStyles = timePickerRecipe.resolve({
+    theme,
+    selection: {
+      size
+    },
+    states: {
+      disabled: isDisabled
+    }
+  });
+  const dialTint = color ? timePickerRecipe.tint({
+    theme,
+    color,
+    selection: {
+      size
+    }
+  }) : void 0;
+  const shown = value ?? new Date((/* @__PURE__ */new Date()).setHours(0, 0, 0, 0));
+  const hours24 = shown.getHours();
+  const period = periodOf(shown);
+  const hours = hourCycle === 24 ? hours24 : hours24 % HOURS_IN_HALF_DAY || HOURS_IN_HALF_DAY;
+  const commit = useCallback2(next => {
+    setValue(next);
+  }, [setValue]);
+  const onDragHour = useCallback2(hour => {
+    const wanted = hourCycle === 24 ? hour : hour % HOURS_IN_HALF_DAY + (period === "pm" ? HOURS_IN_HALF_DAY : 0);
+    commit(withTime(shown, {
+      hours: wanted,
+      minutes: shown.getMinutes(),
+      seconds: 0
+    }));
+  }, [commit, hourCycle, period, shown]);
+  const onDragMinute = useCallback2(minute => {
+    commit(withTime(shown, {
+      hours: hours24,
+      minutes: minute,
+      seconds: 0
+    }));
+  }, [commit, hours24, shown]);
+  const onPickHour = useCallback2(hour => {
+    onDragHour(hour);
+    setUnit("minute");
+  }, [onDragHour]);
+  const onPickMinute = useCallback2(minute => {
+    onDragMinute(minute);
+    if (closeOnSelect) setOpen(false);
+  }, [closeOnSelect, onDragMinute, setOpen]);
+  const onPeriodChange = useCallback2(next => {
+    if (next === period) return;
+    const shifted = next === "pm" ? hours24 + HOURS_IN_HALF_DAY : hours24 - HOURS_IN_HALF_DAY;
+    commit(withTime(shown, {
+      hours: shifted,
+      minutes: shown.getMinutes(),
+      seconds: 0
+    }));
+  }, [commit, hours24, period, shown]);
+  const toggle = useCallback2(() => {
+    if (isDisabled) return;
+    setOpen(!isOpen);
+    setUnit("hour");
+  }, [isDisabled, isOpen, setOpen]);
+  const text = useMemo2(() => value === void 0 ? void 0 : new Intl.DateTimeFormat(locale, formatOptions).format(value), [value, locale, formatOptions]);
+  const glyphInk = useMemo2(() => {
+    const flat = StyleSheet.flatten([field.indicator, fieldTint?.indicator]);
+    return {
+      size: flat.fontSize,
+      color: typeof flat.color === "string" ? flat.color : void 0
+    };
+  }, [field.indicator, fieldTint]);
+  const context = useMemo2(() => ({
+    triggerStyle: [field.trigger, fieldTint?.trigger],
+    triggerPressedStyle: fieldPressed.trigger,
+    valueStyle: [field.value, fieldTint?.value],
+    // A tint repaints the field, and `fieldPlaceholder` was chosen against the theme's
+    // field colour rather than an arbitrary one. The tint's own foreground is what stays
+    // legible on it — the `DatePicker` says the same at the same line.
+    placeholderStyle: fieldTint ? [field.placeholder, {
+      color: StyleSheet.flatten([fieldTint.value]).color
+    }] : field.placeholder,
+    indicatorStyle: field.indicator,
+    glyph: glyphInk,
+    dialStyle: dialStyles.dial,
+    faceStyle: dialStyles.face,
+    markStyle: dialStyles.mark,
+    markSelectedStyle: [dialStyles.markSelected, dialTint?.markSelected],
+    markLabelStyle: dialStyles.markLabel,
+    markLabelSelectedStyle: [dialStyles.markLabelSelected, dialTint?.markLabelSelected],
+    handStyle: [dialStyles.hand, dialTint?.hand],
+    hubStyle: [dialStyles.hub, dialTint?.hub],
+    displayStyle: dialStyles.display,
+    unitStyle: dialStyles.unit,
+    unitSelectedStyle: [dialStyles.unitSelected, dialTint?.unitSelected],
+    colonStyle: dialStyles.colon,
+    periodsStyle: dialStyles.periods,
+    periodStyle: dialStyles.period,
+    periodSelectedStyle: [dialStyles.periodSelected, dialTint?.periodSelected],
+    periodLabelStyle: dialStyles.periodLabel,
+    periodLabelSelectedStyle: [dialStyles.periodLabelSelected, dialTint?.periodLabelSelected],
+    dial: timePickerDial(size),
+    value,
+    hours,
+    minutes: shown.getMinutes(),
+    period,
+    hourCycle,
+    minuteStep: Math.max(1, Math.floor(minuteStep)),
+    unit,
+    setUnit,
+    onDragHour,
+    onDragMinute,
+    onPickHour,
+    onPickMinute,
+    onPeriodChange,
+    text,
+    isOpen,
+    setOpen,
+    toggle,
+    isDisabled,
+    isInvalid
+  }), [field, fieldPressed, fieldTint, glyphInk, dialStyles, dialTint, size, value, hours, shown, period, hourCycle, minuteStep, unit, onDragHour, onDragMinute, onPickHour, onPickMinute, onPeriodChange, text, isOpen, setOpen, toggle, isDisabled, isInvalid]);
+  return /* @__PURE__ */jsx4(TimePickerProvider, {
+    value: context,
+    children
+  });
+}
+TimePicker.displayName = "XAUI.TimePicker.Root";
+
+// src/components/time-picker/time-picker-sheet.tsx
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function TimePickerSheet({
+  children,
+  ...props
+}) {
+  const picker = useTimePicker();
+  return /* @__PURE__ */jsxs3(BottomSheet, {
+    isOpen: picker.isOpen,
+    onOpenChange: picker.setOpen,
+    ...props,
+    children: [/* @__PURE__ */jsx5(BottomSheet.Overlay, {}), /* @__PURE__ */jsx5(BottomSheet.Content, {
+      children: /* @__PURE__ */jsx5(TimePickerProvider, {
+        value: picker,
+        children: children ?? /* @__PURE__ */jsxs3(Fragment2, {
+          children: [/* @__PURE__ */jsx5(BottomSheet.Handle, {}), /* @__PURE__ */jsx5(TimePickerDisplay, {
+            style: {
+              alignSelf: "center"
+            }
+          }), /* @__PURE__ */jsx5(TimePickerClock, {
+            style: {
+              alignSelf: "center"
+            }
+          })]
+        })
+      })
+    })]
+  });
+}
+TimePickerSheet.displayName = "XAUI.TimePicker.Sheet";
+
+// src/components/time-picker/time-picker-trigger.tsx
+import { forwardRef as forwardRef3 } from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var TimePickerTrigger = forwardRef3(function TimePickerTrigger2({
+  children,
+  asChild = false,
+  accessibilityRole = "button",
+  accessibilityState,
+  style,
+  onPressIn,
+  onPressOut,
+  onPress,
+  ...props
+}, ref) {
+  const {
+    triggerStyle,
+    triggerPressedStyle,
+    glyph,
+    isOpen,
+    isDisabled,
+    isInvalid,
+    toggle
+  } = useTimePicker();
+  const [styleProps, rest] = useStyleProps(props);
+  const [isPressed, press] = usePressState({
+    onPressIn,
+    onPressOut
+  });
+  return /* @__PURE__ */jsx6(IconContext.Provider, {
+    value: glyph,
+    children: /* @__PURE__ */jsx6(PressableFeedback, {
+      ref,
+      isPressed,
+      asChild,
+      accessibilityRole,
+      accessibilityState: {
+        expanded: isOpen,
+        disabled: isDisabled,
+        ...accessibilityState
+      },
+      "aria-invalid": isInvalid || void 0,
+      isDisabled,
+      ...rest,
+      style: [isPressed ? triggerPressedStyle : triggerStyle, styleProps, typeof style === "function" ? style({
+        pressed: isPressed
+      }) : style],
+      onPress: event => {
+        onPress?.(event);
+        toggle();
+      },
+      onPressIn: press.onPressIn,
+      onPressOut: press.onPressOut,
+      children
+    })
+  });
+});
+TimePickerTrigger.displayName = "XAUI.TimePicker.Trigger";
+
+// src/components/time-picker/time-picker-value.tsx
+import { forwardRef as forwardRef4 } from "react";
+import { Text as Text3 } from "react-native";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var TimePickerValue = forwardRef4(function TimePickerValue2({
+  children,
+  placeholder,
+  style,
+  ...props
+}, ref) {
+  const {
+    text,
+    valueStyle,
+    placeholderStyle
+  } = useTimePicker();
+  const [styleProps, rest] = useStyleProps(props);
+  const isEmpty = children === void 0 && text === void 0;
+  return /* @__PURE__ */jsx7(Text3, {
+    ref,
+    numberOfLines: 1,
+    ...rest,
+    style: [isEmpty ? placeholderStyle : valueStyle, styleProps, style],
+    children: children ?? text ?? placeholder
+  });
+});
+TimePickerValue.displayName = "XAUI.TimePicker.Value";
+
+// src/components/time-picker/index.ts
+var TimePicker2 = Object.assign(TimePicker, {
+  Trigger: TimePickerTrigger,
+  Value: TimePickerValue,
+  Indicator: TimePickerIndicator,
+  Sheet: TimePickerSheet,
+  Display: TimePickerDisplay,
+  Clock: TimePickerClock
+});
+export { timePickerRecipe, useTimePicker, TimePickerClock, TimePickerDisplay, TimePickerIndicator, TimePicker, TimePickerSheet, TimePickerTrigger, TimePickerValue, TimePicker2 };