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

package/dist/chunk-5YEMZL4C.cjs

@@ -0,0 +1,963 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); 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 _chunkYSTLHVQVcjs = require('./chunk-YSTLHVQV.cjs');
+
+
+var _chunkD2UYBAGBcjs = require('./chunk-D2UYBAGB.cjs');
+
+
+var _chunkJ5COSALOcjs = require('./chunk-J5COSALO.cjs');
+
+
+var _chunk7EIHHOHPcjs = require('./chunk-7EIHHOHP.cjs');
+
+
+var _chunkPIU3JONRcjs = require('./chunk-PIU3JONR.cjs');
+
+
+var _chunk7DPL3ZDScjs = require('./chunk-7DPL3ZDS.cjs');
+
+
+
+
+var _chunkGSZDN6EZcjs = require('./chunk-GSZDN6EZ.cjs');
+
+
+var _chunkSL3V7R2Ycjs = require('./chunk-SL3V7R2Y.cjs');
+
+
+var _chunkCDRGTUYFcjs = require('./chunk-CDRGTUYF.cjs');
+
+
+var _chunkIIAQISBGcjs = require('./chunk-IIAQISBG.cjs');
+
+
+var _chunkTK44VBIEcjs = require('./chunk-TK44VBIE.cjs');
+
+// src/components/time-picker/time-picker-clock.tsx
+var _react = require('react');
+var _reactnative = require('react-native');
+var _reactnativegesturehandler = require('react-native-gesture-handler');
+var _reactnativereanimated = require('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 = _chunkSL3V7R2Ycjs.createRecipe.call(void 0, {
+  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] = _chunkCDRGTUYFcjs.createSlotContext.call(void 0, "TimePicker");
+
+// src/components/time-picker/time-picker-clock.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var HOURS_ON_A_FACE = 12;
+var MINUTES_IN_AN_HOUR = 60;
+var LABELLED_MINUTE = 5;
+var TimePickerClock = _react.forwardRef.call(void 0, 
+  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] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+    const center = { x: dial.box / 2, y: dial.box / 2 };
+    const radius = dial.box / 2;
+    const marks = _react.useMemo.call(void 0, () => {
+      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 = _react.useRef.call(void 0, {
+      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 = _react.useCallback.call(void 0, (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 = _react.useMemo.call(void 0, 
+      () => _reactnativegesturehandler.Gesture.Pan().enabled(!isDisabled).minDistance(0).onStart((event) => _reactnativereanimated.runOnJS.call(void 0, valueAt)(event.x, event.y, false)).onUpdate((event) => _reactnativereanimated.runOnJS.call(void 0, valueAt)(event.x, event.y, false)).onEnd((event) => _reactnativereanimated.runOnJS.call(void 0, valueAt)(event.x, event.y, true)),
+      [isDisabled, valueAt]
+    );
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactnative.View, { ref, ...rest, style: [dialStyle, styleProps, style], children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactnativegesturehandler.GestureDetector, { gesture: drag, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _reactnative.View, { style: faceStyle, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _reactnative.View,
+        {
+          style: [
+            handStyle,
+            {
+              height: radius * handRing,
+              start: center.x - HAND_WIDTH / 2,
+              top: center.y - radius * handRing,
+              transform: [{ rotate: `${handAngle}deg` }]
+            }
+          ]
+        }
+      ),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _reactnative.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__ */ _jsxruntime.jsx.call(void 0, 
+          _reactnative.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__ */ _jsxruntime.jsx.call(void 0, _reactnative.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
+
+
+
+var PERIODS = ["am", "pm"];
+var LABELS = { am: "AM", pm: "PM" };
+var TimePickerDisplay = _react.forwardRef.call(void 0, 
+  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] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+    const pad = (value) => String(value).padStart(2, "0");
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactnative.View, { ref, ...rest, style: [displayStyle, styleProps, style], children: _nullishCoalesce(children, () => ( /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _reactnative.Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityState: {
+            selected: unit === "hour",
+            disabled: isDisabled
+          },
+          disabled: isDisabled,
+          onPress: () => setUnit("hour"),
+          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactnative.Text, { style: unit === "hour" ? unitSelectedStyle : unitStyle, children: pad(hours) })
+        }
+      ),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactnative.Text, { style: colonStyle, children: ":" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _reactnative.Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityState: {
+            selected: unit === "minute",
+            disabled: isDisabled
+          },
+          disabled: isDisabled,
+          onPress: () => setUnit("minute"),
+          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactnative.Text, { style: unit === "minute" ? unitSelectedStyle : unitStyle, children: pad(minutes) })
+        }
+      ),
+      hourCycle === 12 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactnative.View, { style: periodsStyle, children: PERIODS.map((half) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _reactnative.Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityState: {
+            selected: half === period,
+            disabled: isDisabled
+          },
+          accessibilityValue: { text: LABELS[half] },
+          disabled: isDisabled,
+          style: half === period ? periodSelectedStyle : periodStyle,
+          onPress: () => onPeriodChange(half),
+          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _reactnative.Text,
+            {
+              style: half === period ? periodLabelSelectedStyle : periodLabelStyle,
+              children: LABELS[half]
+            }
+          )
+        },
+        half
+      )) }) : null
+    ] }))) });
+  }
+);
+TimePickerDisplay.displayName = "XAUI.TimePicker.Display";
+
+// src/components/time-picker/time-picker-indicator.tsx
+
+
+var HOUR_ANGLE = "-60deg";
+var MINUTE_ANGLE = "60deg";
+function TimePickerIndicator(props) {
+  const glyph = _chunkGSZDN6EZcjs.useIconContext.call(void 0, );
+  if (props.as || props.children || props.source) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGSZDN6EZcjs.Icon, { ...props });
+  const size = _nullishCoalesce(_nullishCoalesce(props.size, () => ( glyph.size)), () => ( 18));
+  const color = _nullishCoalesce(props.color, () => ( glyph.color));
+  const stroke = Math.max(1, Math.round(size / 12));
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _reactnative.View,
+    {
+      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__ */ _jsxruntime.jsx.call(void 0, 
+        _reactnative.View,
+        {
+          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
+
+
+
+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 = _chunkIIAQISBGcjs.useXAUITheme.call(void 0, );
+  const [value, setValue] = _chunk7EIHHOHPcjs.useControllableState.call(void 0, {
+    value: controlledValue,
+    defaultValue,
+    onChange: onValueChange
+  });
+  const [isOpen, setOpen] = _chunk7EIHHOHPcjs.useControllableState.call(void 0, {
+    value: controlledOpen,
+    defaultValue: defaultOpen,
+    onChange: onOpenChange
+  });
+  const [unit, setUnit] = _react.useState.call(void 0, "hour");
+  const hourCycle = _nullishCoalesce(hourCycleProp, () => ( _chunkYSTLHVQVcjs.hourCycleFor.call(void 0, _nullishCoalesce(locale, () => ( "en-US")))));
+  const selection = {
+    variant,
+    size,
+    radius,
+    isOpen: isOpen ? "true" : void 0,
+    isInvalid: isInvalid ? "true" : void 0
+  };
+  const field = _chunkJ5COSALOcjs.selectRecipe.resolve({
+    theme,
+    selection,
+    states: { disabled: isDisabled }
+  });
+  const fieldPressed = _chunkJ5COSALOcjs.selectRecipe.resolve({
+    theme,
+    selection,
+    states: { pressed: true }
+  });
+  const fieldTint = color ? _chunkJ5COSALOcjs.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 = _nullishCoalesce(value, () => ( new Date((/* @__PURE__ */ new Date()).setHours(0, 0, 0, 0))));
+  const hours24 = shown.getHours();
+  const period = _chunkYSTLHVQVcjs.periodOf.call(void 0, shown);
+  const hours = hourCycle === 24 ? hours24 : hours24 % HOURS_IN_HALF_DAY || HOURS_IN_HALF_DAY;
+  const commit = _react.useCallback.call(void 0, 
+    (next) => {
+      setValue(next);
+    },
+    [setValue]
+  );
+  const onDragHour = _react.useCallback.call(void 0, 
+    (hour) => {
+      const wanted = hourCycle === 24 ? hour : hour % HOURS_IN_HALF_DAY + (period === "pm" ? HOURS_IN_HALF_DAY : 0);
+      commit(
+        _chunkYSTLHVQVcjs.withTime.call(void 0, shown, {
+          hours: wanted,
+          minutes: shown.getMinutes(),
+          seconds: 0
+        })
+      );
+    },
+    [commit, hourCycle, period, shown]
+  );
+  const onDragMinute = _react.useCallback.call(void 0, 
+    (minute) => {
+      commit(_chunkYSTLHVQVcjs.withTime.call(void 0, shown, { hours: hours24, minutes: minute, seconds: 0 }));
+    },
+    [commit, hours24, shown]
+  );
+  const onPickHour = _react.useCallback.call(void 0, 
+    (hour) => {
+      onDragHour(hour);
+      setUnit("minute");
+    },
+    [onDragHour]
+  );
+  const onPickMinute = _react.useCallback.call(void 0, 
+    (minute) => {
+      onDragMinute(minute);
+      if (closeOnSelect) setOpen(false);
+    },
+    [closeOnSelect, onDragMinute, setOpen]
+  );
+  const onPeriodChange = _react.useCallback.call(void 0, 
+    (next) => {
+      if (next === period) return;
+      const shifted = next === "pm" ? hours24 + HOURS_IN_HALF_DAY : hours24 - HOURS_IN_HALF_DAY;
+      commit(
+        _chunkYSTLHVQVcjs.withTime.call(void 0, shown, {
+          hours: shifted,
+          minutes: shown.getMinutes(),
+          seconds: 0
+        })
+      );
+    },
+    [commit, hours24, period, shown]
+  );
+  const toggle = _react.useCallback.call(void 0, () => {
+    if (isDisabled) return;
+    setOpen(!isOpen);
+    setUnit("hour");
+  }, [isDisabled, isOpen, setOpen]);
+  const text = _react.useMemo.call(void 0, 
+    () => value === void 0 ? void 0 : new Intl.DateTimeFormat(locale, formatOptions).format(value),
+    [value, locale, formatOptions]
+  );
+  const glyphInk = _react.useMemo.call(void 0, () => {
+    const flat = _reactnative.StyleSheet.flatten([
+      field.indicator,
+      _optionalChain([fieldTint, 'optionalAccess', _2 => _2.indicator])
+    ]);
+    return {
+      size: flat.fontSize,
+      color: typeof flat.color === "string" ? flat.color : void 0
+    };
+  }, [field.indicator, fieldTint]);
+  const context = _react.useMemo.call(void 0, 
+    () => ({
+      triggerStyle: [field.trigger, _optionalChain([fieldTint, 'optionalAccess', _3 => _3.trigger])],
+      triggerPressedStyle: fieldPressed.trigger,
+      valueStyle: [field.value, _optionalChain([fieldTint, 'optionalAccess', _4 => _4.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: _reactnative.StyleSheet.flatten([fieldTint.value]).color }
+      ] : field.placeholder,
+      indicatorStyle: field.indicator,
+      glyph: glyphInk,
+      dialStyle: dialStyles.dial,
+      faceStyle: dialStyles.face,
+      markStyle: dialStyles.mark,
+      markSelectedStyle: [dialStyles.markSelected, _optionalChain([dialTint, 'optionalAccess', _5 => _5.markSelected])],
+      markLabelStyle: dialStyles.markLabel,
+      markLabelSelectedStyle: [
+        dialStyles.markLabelSelected,
+        _optionalChain([dialTint, 'optionalAccess', _6 => _6.markLabelSelected])
+      ],
+      handStyle: [dialStyles.hand, _optionalChain([dialTint, 'optionalAccess', _7 => _7.hand])],
+      hubStyle: [dialStyles.hub, _optionalChain([dialTint, 'optionalAccess', _8 => _8.hub])],
+      displayStyle: dialStyles.display,
+      unitStyle: dialStyles.unit,
+      unitSelectedStyle: [dialStyles.unitSelected, _optionalChain([dialTint, 'optionalAccess', _9 => _9.unitSelected])],
+      colonStyle: dialStyles.colon,
+      periodsStyle: dialStyles.periods,
+      periodStyle: dialStyles.period,
+      periodSelectedStyle: [dialStyles.periodSelected, _optionalChain([dialTint, 'optionalAccess', _10 => _10.periodSelected])],
+      periodLabelStyle: dialStyles.periodLabel,
+      periodLabelSelectedStyle: [
+        dialStyles.periodLabelSelected,
+        _optionalChain([dialTint, 'optionalAccess', _11 => _11.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__ */ _jsxruntime.jsx.call(void 0, TimePickerProvider, { value: context, children });
+}
+TimePicker.displayName = "XAUI.TimePicker.Root";
+
+// src/components/time-picker/time-picker-sheet.tsx
+
+function TimePickerSheet({ children, ...props }) {
+  const picker = useTimePicker();
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkD2UYBAGBcjs.BottomSheet2, { isOpen: picker.isOpen, onOpenChange: picker.setOpen, ...props, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkD2UYBAGBcjs.BottomSheet2.Overlay, {}),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkD2UYBAGBcjs.BottomSheet2.Content, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TimePickerProvider, { value: picker, children: _nullishCoalesce(children, () => ( /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkD2UYBAGBcjs.BottomSheet2.Handle, {}),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TimePickerDisplay, { style: { alignSelf: "center" } }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TimePickerClock, { style: { alignSelf: "center" } })
+    ] }))) }) })
+  ] });
+}
+TimePickerSheet.displayName = "XAUI.TimePicker.Sheet";
+
+// src/components/time-picker/time-picker-trigger.tsx
+
+
+var TimePickerTrigger = _react.forwardRef.call(void 0, 
+  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] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+    const [isPressed, press] = _chunk7DPL3ZDScjs.usePressState.call(void 0, { onPressIn, onPressOut });
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGSZDN6EZcjs.IconContext.Provider, { value: glyph, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkPIU3JONRcjs.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) => {
+          _optionalChain([onPress, 'optionalCall', _12 => _12(event)]);
+          toggle();
+        },
+        onPressIn: press.onPressIn,
+        onPressOut: press.onPressOut,
+        children
+      }
+    ) });
+  }
+);
+TimePickerTrigger.displayName = "XAUI.TimePicker.Trigger";
+
+// src/components/time-picker/time-picker-value.tsx
+
+
+
+var TimePickerValue = _react.forwardRef.call(void 0, 
+  function TimePickerValue2({ children, placeholder, style, ...props }, ref) {
+    const { text, valueStyle, placeholderStyle } = useTimePicker();
+    const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+    const isEmpty = children === void 0 && text === void 0;
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _reactnative.Text,
+      {
+        ref,
+        numberOfLines: 1,
+        ...rest,
+        style: [isEmpty ? placeholderStyle : valueStyle, styleProps, style],
+        children: _nullishCoalesce(_nullishCoalesce(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
+});
+
+
+
+
+
+
+
+
+
+
+
+
+exports.timePickerRecipe = timePickerRecipe; exports.useTimePicker = useTimePicker; exports.TimePickerClock = TimePickerClock; exports.TimePickerDisplay = TimePickerDisplay; exports.TimePickerIndicator = TimePickerIndicator; exports.TimePicker = TimePicker; exports.TimePickerSheet = TimePickerSheet; exports.TimePickerTrigger = TimePickerTrigger; exports.TimePickerValue = TimePickerValue; exports.TimePicker2 = TimePicker2;