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

package/dist/chunk-VLWZPYAO.js

@@ -0,0 +1,132 @@
+import {
+  arcPath
+} from "./chunk-CP23WMFJ.js";
+import {
+  useChartInk,
+  useOptionalChart
+} from "./chunk-6QFJKHSX.js";
+import {
+  createRecipe
+} from "./chunk-DKVXTMIJ.js";
+import {
+  useXAUITheme
+} from "./chunk-Z6JBWRPL.js";
+import {
+  useStyleProps
+} from "./chunk-M63GFNKV.js";
+
+// src/components/pie-chart/pie-chart.tsx
+import { useMemo } from "react";
+import { View } from "react-native";
+import { Path, Svg } from "react-native-svg";
+
+// src/components/pie-chart/pie-chart.recipe.ts
+var SLOTS = ["root", "center"];
+var DIAMETERS = { sm: 140, md: 200, lg: 260 };
+function sizeAxis(size) {
+  const diameter = DIAMETERS[size];
+  return () => ({
+    root: { width: diameter, height: diameter },
+    center: { width: diameter, height: diameter }
+  });
+}
+var pieChartRecipe = createRecipe({
+  slots: SLOTS,
+  base: () => ({
+    root: { alignSelf: "center" },
+    // Laid over the canvas rather than inside it: SVG text needs a font file loaded and
+    // ignores the platform's text size, and a total in the middle of a ring is a `Text`
+    // like any other. `pointerEvents` keeps it from eating a press meant for a slice.
+    center: {
+      position: "absolute",
+      top: 0,
+      alignItems: "center",
+      justifyContent: "center",
+      pointerEvents: "none"
+    }
+  }),
+  variants: {
+    size: { sm: sizeAxis("sm"), md: sizeAxis("md"), lg: sizeAxis("lg") }
+  },
+  states: {
+    disabled: (theme) => ({ root: { opacity: theme.opacity.disabled } })
+  },
+  defaultVariants: { size: "md" }
+});
+
+// src/components/pie-chart/pie-chart.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_INNER_RADIUS = 0.62;
+var DEFAULT_GAP = 1.5;
+var FULL_TURN = Math.PI * 2;
+function PieChart({
+  data,
+  labelKey,
+  valueKey,
+  variant,
+  size = "md",
+  color,
+  innerRadius = DEFAULT_INNER_RADIUS,
+  gap = DEFAULT_GAP,
+  children,
+  isDisabled = false,
+  style,
+  ...props
+}) {
+  const theme = useXAUITheme();
+  const [styleProps, rest] = useStyleProps(props);
+  const frame = useOptionalChart();
+  const { colors } = useChartInk({
+    variant: variant ?? frame?.variant,
+    size,
+    color: color ?? frame?.color,
+    isDisabled: isDisabled || (frame?.isDisabled ?? false),
+    count: data.length
+  });
+  const styles = pieChartRecipe.resolve({
+    theme,
+    selection: { size },
+    states: { disabled: isDisabled }
+  });
+  const diameter = DIAMETERS[size];
+  const slices = useMemo(() => {
+    const values = data.map((row) => {
+      const value = Number(row[valueKey]);
+      return Number.isFinite(value) && value > 0 ? value : 0;
+    });
+    const total = values.reduce((sum, value) => sum + value, 0);
+    if (total === 0) return [];
+    const radius = diameter / 2;
+    const inner = radius * Math.min(Math.max(innerRadius, 0), 0.95);
+    const half = Math.min(Math.max(gap, 0), 20) * Math.PI / 180 / 2;
+    let angle = 0;
+    return values.map((value, index) => {
+      const sweep = value / total * FULL_TURN;
+      const start = angle;
+      angle += sweep;
+      const inset = Math.min(half, sweep / 2 - 1e-4);
+      return {
+        key: String(data[index][labelKey] ?? index),
+        color: colors[index] ?? colors[0],
+        d: arcPath({
+          cx: radius,
+          cy: radius,
+          outerRadius: radius,
+          innerRadius: inner,
+          startAngle: start + inset,
+          endAngle: start + sweep - inset
+        })
+      };
+    });
+  }, [colors, data, diameter, gap, innerRadius, labelKey, valueKey]);
+  return /* @__PURE__ */ jsxs(View, { ...rest, style: [styles.root, styleProps, style], children: [
+    /* @__PURE__ */ jsx(Svg, { width: diameter, height: diameter, children: slices.map((slice) => /* @__PURE__ */ jsx(Path, { d: slice.d, fill: slice.color, fillRule: "evenodd" }, slice.key)) }),
+    children === void 0 ? null : /* @__PURE__ */ jsx(View, { style: styles.center, children })
+  ] });
+}
+PieChart.displayName = "XAUI.PieChart";
+
+export {
+  pieChartRecipe,
+  PieChart
+};

package/dist/chunk-VX2TRPNS.cjs

@@ -0,0 +1,309 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }
+
+
+
+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/widget/widget-content.tsx
+var _react = require('react');
+var _reactnative = require('react-native');
+
+// src/components/widget/widget.context.ts
+var [WidgetProvider, useWidget] = _chunkCDRGTUYFcjs.createSlotContext.call(void 0, "Widget");
+
+// src/components/widget/widget-content.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var WidgetContent = _react.forwardRef.call(void 0, 
+  function WidgetContent2({ children, style, ...props }, ref) {
+    const { contentStyle } = useWidget();
+    const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactnative.View, { ref, ...rest, style: [contentStyle, styleProps, style], children });
+  }
+);
+WidgetContent.displayName = "XAUI.Widget.Content";
+
+// src/components/widget/widget-text.tsx
+
+
+
+function textSlot(key, name, role) {
+  const Component = _react.forwardRef.call(void 0, function WidgetText({ children, accessibilityRole, style, ...props }, ref) {
+    const context = useWidget();
+    const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _reactnative.Text,
+      {
+        ref,
+        accessibilityRole: _nullishCoalesce(accessibilityRole, () => ( role)),
+        style: [context[key], styleProps, style],
+        ...rest,
+        children
+      }
+    );
+  });
+  Component.displayName = name;
+  return Component;
+}
+var WidgetTitle = textSlot("titleStyle", "XAUI.Widget.Title", "header");
+var WidgetDescription = textSlot(
+  "descriptionStyle",
+  "XAUI.Widget.Description"
+);
+var WidgetFooter = textSlot("footerStyle", "XAUI.Widget.Footer");
+
+// src/components/widget/widget-header.tsx
+
+
+
+var WidgetHeader = _react.forwardRef.call(void 0, 
+  function WidgetHeader2({ children, style, ...props }, ref) {
+    const { headerStyle } = useWidget();
+    const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactnative.View, { ref, ...rest, style: [headerStyle, styleProps, style], children });
+  }
+);
+WidgetHeader.displayName = "XAUI.Widget.Header";
+
+// src/components/widget/widget-heading.tsx
+
+
+
+var WidgetHeading = _react.forwardRef.call(void 0, 
+  function WidgetHeading2({ children, style, ...props }, ref) {
+    const { headingStyle } = useWidget();
+    const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactnative.View, { ref, ...rest, style: [headingStyle, styleProps, style], children });
+  }
+);
+WidgetHeading.displayName = "XAUI.Widget.Heading";
+
+// src/components/widget/widget.tsx
+
+
+
+// src/components/widget/widget.recipe.ts
+var SLOTS = [
+  "root",
+  "header",
+  "heading",
+  "title",
+  "description",
+  "content",
+  "footer"
+];
+var SIZES = {
+  xs: {
+    paddingX: 2,
+    paddingY: 2,
+    gap: 1,
+    well: 2,
+    radius: "xl",
+    title: "sm",
+    footer: "xs"
+  },
+  sm: {
+    paddingX: 2,
+    paddingY: 2,
+    gap: 1,
+    well: 2.5,
+    radius: "xl",
+    title: "md",
+    footer: "xs"
+  },
+  md: {
+    paddingX: 2,
+    paddingY: 2,
+    gap: 1.5,
+    well: 3,
+    radius: "xl",
+    title: "lg",
+    footer: "sm"
+  },
+  lg: {
+    paddingX: 2,
+    paddingY: 2,
+    gap: 1.5,
+    well: 3.5,
+    radius: "xl",
+    title: "xl",
+    footer: "sm"
+  }
+};
+function cardRadius(theme, radius, paddingY) {
+  return Math.max(0, theme.radius[radius] - theme.spacing(paddingY));
+}
+var SIZE_KEYS = ["xs", "sm", "md", "lg"];
+var NESTED_RADII = SIZE_KEYS.flatMap(
+  (size) => _chunkSL3V7R2Ycjs.RADIUS_KEYS.map((radius) => ({
+    when: { size, radius },
+    style: (theme) => ({
+      content: { borderRadius: cardRadius(theme, radius, SIZES[size].paddingY) }
+    })
+  }))
+);
+function sizeAxis(step) {
+  const { paddingX, paddingY, gap, well, radius, title, footer } = step;
+  return (theme) => ({
+    root: {
+      paddingHorizontal: theme.spacing(paddingX),
+      paddingVertical: theme.spacing(paddingY),
+      gap: theme.spacing(gap),
+      borderRadius: theme.radius[radius]
+    },
+    content: {
+      padding: theme.spacing(well),
+      // The corner this size implies. An explicit `radius` prop replaces it through
+      // `NESTED_RADII`, which is the only other place the card's corner is set.
+      borderRadius: cardRadius(theme, radius, paddingY)
+    },
+    title: {
+      fontSize: theme.fontSizes[title],
+      lineHeight: theme.lineHeights[title]
+    },
+    description: {
+      fontSize: theme.fontSizes[footer],
+      lineHeight: theme.lineHeights[footer]
+    },
+    footer: {
+      fontSize: theme.fontSizes[footer],
+      lineHeight: theme.lineHeights[footer]
+    }
+  });
+}
+var widgetRecipe = _chunkSL3V7R2Ycjs.createRecipe.call(void 0, {
+  slots: SLOTS,
+  base: (theme) => ({
+    /**
+     * The frame: a quiet `defaultSoft` ground, no border. It is **not** a card — the header
+     * and the footer sit straight on it, and the one card in a widget is `Widget.Content`.
+     */
+    root: {
+      flexDirection: "column",
+      backgroundColor: theme.colors.defaultSoft,
+      // iOS's squircle. It is free on Android, and at this corner it is the difference
+      // between a shape and two arcs meeting a straight edge.
+      borderCurve: "continuous"
+    },
+    header: {
+      flexDirection: "row",
+      alignItems: "flex-start",
+      justifyContent: "space-between",
+      gap: theme.spacing(3),
+      // A hair of side padding of their own, so the header and footer text sits a touch
+      // inside the card's edge rather than flush against where it begins. Fixed, not on
+      // the `size` ladder — it is optical alignment, not spacing.
+      paddingHorizontal: theme.spacing(1)
+    },
+    /** The title and its description, as one block that shrinks rather than pushes. */
+    heading: { flexShrink: 1, gap: theme.spacing(0.5) },
+    title: {
+      fontFamily: theme.fontFamilies.body,
+      fontWeight: theme.fontWeights.semibold,
+      color: theme.colors.defaultSoftForeground
+    },
+    description: { fontFamily: theme.fontFamilies.body, color: theme.colors.muted },
+    /**
+     * The card, held in the frame: one step **up** from the soft ground. It clips, so a
+     * figure drawn to its edges takes the corner rather than overhanging it.
+     *
+     * `surface` in light is white against a near-white frame — the step is obvious. In dark
+     * `surface` (`#18181b`) lands on top of what `defaultSoft` composites to (about the
+     * same), so the card vanishes; and dark mode drops the surface shadow, so colour is the
+     * only separation left. `surfaceSecondary` is the raised-surface step above it.
+     */
+    content: {
+      backgroundColor: theme.mode === "dark" ? theme.colors.surfaceSecondary : theme.colors.surface,
+      borderCurve: "continuous",
+      overflow: "hidden"
+    },
+    footer: {
+      fontFamily: theme.fontFamilies.body,
+      color: theme.colors.muted,
+      paddingHorizontal: theme.spacing(1)
+    }
+  }),
+  variants: {
+    size: {
+      xs: sizeAxis(SIZES.xs),
+      sm: sizeAxis(SIZES.sm),
+      md: sizeAxis(SIZES.md),
+      lg: sizeAxis(SIZES.lg)
+    },
+    /** The frame's corner. The card's is derived from it, so it moves with it. */
+    radius: _chunkSL3V7R2Ycjs.radiusAxis.call(void 0, "root"),
+    /**
+     * The shadow lifts **the card**, not the frame: the soft ground stays flat against the
+     * page, and the card reads as the raised thing inside it. On by default — a widget is
+     * one of several on a dashboard, and the lift is what separates the card from its frame.
+     * In dark mode `theme.shadows.surface` is empty by design, and the colour step above
+     * carries the separation on its own.
+     */
+    elevated: {
+      true: (theme) => ({ content: theme.shadows.surface })
+    }
+  },
+  compoundVariants: [...NESTED_RADII],
+  defaultVariants: { size: "md" }
+});
+
+// src/components/widget/widget.tsx
+
+var WidgetRoot = _react.forwardRef.call(void 0, function Widget({ children, size, radius, isElevated = true, asChild = false, style, ...props }, ref) {
+  const theme = _chunkIIAQISBGcjs.useXAUITheme.call(void 0, );
+  const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+  const styles = widgetRecipe.resolve({
+    theme,
+    selection: {
+      size,
+      radius,
+      elevated: isElevated ? "true" : void 0
+    }
+  });
+  const context = _react.useMemo.call(void 0, 
+    () => ({
+      headerStyle: styles.header,
+      headingStyle: styles.heading,
+      titleStyle: styles.title,
+      descriptionStyle: styles.description,
+      contentStyle: styles.content,
+      footerStyle: styles.footer
+    }),
+    [styles]
+  );
+  const rootStyle = [styles.root, styleProps, style];
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, WidgetProvider, { value: context, children: asChild ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkCDRGTUYFcjs.Slot, { ref, ...rest, style: rootStyle, children }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactnative.View, { ref, ...rest, style: rootStyle, children }) });
+});
+WidgetRoot.displayName = "XAUI.Widget.Root";
+
+// src/components/widget/index.ts
+var Widget2 = Object.assign(WidgetRoot, {
+  Header: WidgetHeader,
+  Heading: WidgetHeading,
+  Title: WidgetTitle,
+  Description: WidgetDescription,
+  Content: WidgetContent,
+  Footer: WidgetFooter
+});
+
+
+
+
+
+
+
+
+
+
+
+
+exports.useWidget = useWidget; exports.WidgetContent = WidgetContent; exports.WidgetTitle = WidgetTitle; exports.WidgetDescription = WidgetDescription; exports.WidgetFooter = WidgetFooter; exports.WidgetHeader = WidgetHeader; exports.WidgetHeading = WidgetHeading; exports.widgetRecipe = widgetRecipe; exports.WidgetRoot = WidgetRoot; exports.Widget = Widget2;

package/dist/chunk-W4IPOWLY.cjs

@@ -0,0 +1,198 @@
+"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 _chunkNADCILBLcjs = require('./chunk-NADCILBL.cjs');
+
+
+
+
+
+
+
+var _chunkAXKDHX5Vcjs = require('./chunk-AXKDHX5V.cjs');
+
+
+
+
+
+
+
+
+
+var _chunkYSTLHVQVcjs = require('./chunk-YSTLHVQV.cjs');
+
+
+var _chunkCDRGTUYFcjs = require('./chunk-CDRGTUYF.cjs');
+
+
+var _chunkEJQCQPETcjs = require('./chunk-EJQCQPET.cjs');
+
+// src/components/time-field/time-field-field.tsx
+var _react = require('react');
+
+// src/components/time-field/time-field.context.ts
+var [TimeFieldProvider, useTimeField] = _chunkCDRGTUYFcjs.createSlotContext.call(void 0, "TimeField");
+
+// src/components/time-field/time-field-field.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var TimeFieldField = _react.forwardRef.call(void 0, 
+  function TimeFieldField2({ placeholder, style, ...props }, ref) {
+    const { text, onType, placeholder: shape, length } = useTimeField();
+    const group = _chunkNADCILBLcjs.useOptionalFieldGroup.call(void 0, );
+    const padding = _react.useMemo.call(void 0, 
+      () => _chunkNADCILBLcjs.decoratorPadding.call(void 0, _nullishCoalesce(_optionalChain([group, 'optionalAccess', _ => _.prefixWidth]), () => ( 0)), _nullishCoalesce(_optionalChain([group, 'optionalAccess', _2 => _2.suffixWidth]), () => ( 0))),
+      [_optionalChain([group, 'optionalAccess', _3 => _3.prefixWidth]), _optionalChain([group, 'optionalAccess', _4 => _4.suffixWidth])]
+    );
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkAXKDHX5Vcjs.TextFieldField,
+      {
+        ref,
+        keyboardType: "number-pad",
+        autoCapitalize: "none",
+        autoCorrect: false,
+        maxLength: length,
+        placeholder: _nullishCoalesce(placeholder, () => ( shape)),
+        ...props,
+        value: text,
+        onChangeText: onType,
+        style: [padding, style]
+      }
+    );
+  }
+);
+TimeFieldField.displayName = "XAUI.TimeField.Field";
+
+// src/components/time-field/time-field-period.tsx
+
+var _reactnative = require('react-native');
+
+var HIT_SLOP = 12;
+var TimeFieldPeriod = _react.forwardRef.call(void 0, 
+  function TimeFieldPeriod2({ accessibilityLabel, ...props }, ref) {
+    const { period, periodLabels, onPeriodChange, hasPeriod } = useTimeField();
+    const { isDisabled, labelStyle } = _chunkAXKDHX5Vcjs.useTextField.call(void 0, );
+    if (hasPeriod && !accessibilityLabel) {
+      _chunkEJQCQPETcjs.warnDev.call(void 0, 
+        'TimeField.Period: the toggle needs an `accessibilityLabel` \u2014 "AM" read on its own says the value, not that pressing it changes which half of the day it is.'
+      );
+    }
+    if (!hasPeriod) return null;
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNADCILBLcjs.FieldGroupSuffix, { ref, ...props, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _reactnative.Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel,
+        accessibilityState: { disabled: isDisabled },
+        accessibilityValue: { text: periodLabels[period] },
+        disabled: isDisabled,
+        hitSlop: HIT_SLOP,
+        onPress: () => onPeriodChange(period === "am" ? "pm" : "am"),
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactnative.Text, { style: labelStyle, children: periodLabels[period] })
+      }
+    ) });
+  }
+);
+TimeFieldPeriod.displayName = "XAUI.TimeField.Period";
+
+// src/components/time-field/time-field.tsx
+
+
+var DEFAULT_LABELS = { hours: "HH", minutes: "mm", seconds: "ss" };
+var DEFAULT_PERIODS = { am: "AM", pm: "PM" };
+var TimeFieldRoot = _react.forwardRef.call(void 0, function TimeField({
+  value,
+  defaultValue,
+  onValueChange,
+  granularity = "minute",
+  hourCycle: hourCycleProp,
+  locale = "en-US",
+  timeLabels = DEFAULT_LABELS,
+  periodLabels = DEFAULT_PERIODS,
+  children,
+  ...props
+}, ref) {
+  const hourCycle = _nullishCoalesce(hourCycleProp, () => ( _chunkYSTLHVQVcjs.hourCycleFor.call(void 0, locale)));
+  const [typed, setTyped] = _react.useState.call(void 0, 
+    () => defaultValue ? _chunkYSTLHVQVcjs.formatTime.call(void 0, defaultValue, granularity, hourCycle) : ""
+  );
+  const [typedPeriod, setTypedPeriod] = _react.useState.call(void 0, 
+    () => defaultValue ? _chunkYSTLHVQVcjs.periodOf.call(void 0, defaultValue) : "am"
+  );
+  const isControlled = value !== void 0;
+  const typedParts = _chunkYSTLHVQVcjs.parseTime.call(void 0, typed, granularity, hourCycle, typedPeriod);
+  const agrees = typedParts !== null && value != null && _chunkYSTLHVQVcjs.withTime.call(void 0, value, typedParts).getTime() === value.getTime();
+  const text = isControlled && !agrees ? value === null ? "" : _chunkYSTLHVQVcjs.formatTime.call(void 0, value, granularity, hourCycle) : typed;
+  const period = isControlled && !agrees && value != null ? _chunkYSTLHVQVcjs.periodOf.call(void 0, value) : typedPeriod;
+  const anchor = _react.useRef.call(void 0, _nullishCoalesce(_nullishCoalesce(value, () => ( defaultValue)), () => ( null)));
+  if (value != null) anchor.current = value;
+  const reported = _react.useRef.call(void 0, null);
+  const report = _react.useCallback.call(void 0, 
+    (next, nextPeriod) => {
+      const parts = _chunkYSTLHVQVcjs.parseTime.call(void 0, next, granularity, hourCycle, nextPeriod);
+      const moment = parts === null ? null : _chunkYSTLHVQVcjs.withTime.call(void 0, _nullishCoalesce(anchor.current, () => ( /* @__PURE__ */ new Date())), parts);
+      const before = reported.current;
+      if (moment === null ? before === null : _optionalChain([before, 'optionalAccess', _5 => _5.getTime, 'call', _6 => _6()]) === moment.getTime())
+        return;
+      reported.current = moment;
+      _optionalChain([onValueChange, 'optionalCall', _7 => _7(moment)]);
+    },
+    [granularity, hourCycle, onValueChange]
+  );
+  const onType = _react.useCallback.call(void 0, 
+    (input) => {
+      const next = _chunkYSTLHVQVcjs.maskTime.call(void 0, input, granularity, hourCycle);
+      setTyped(next);
+      report(next, period);
+    },
+    [granularity, hourCycle, period, report]
+  );
+  const onPeriodChange = _react.useCallback.call(void 0, 
+    (next) => {
+      setTypedPeriod(next);
+      report(text, next);
+    },
+    [report, text]
+  );
+  const context = _react.useMemo.call(void 0, 
+    () => ({
+      text,
+      onType,
+      placeholder: _chunkYSTLHVQVcjs.timePlaceholder.call(void 0, granularity, timeLabels),
+      length: _chunkYSTLHVQVcjs.timeLength.call(void 0, granularity),
+      period,
+      periodLabels,
+      onPeriodChange,
+      hasPeriod: hourCycle === 12
+    }),
+    [
+      text,
+      onType,
+      granularity,
+      timeLabels,
+      period,
+      periodLabels,
+      onPeriodChange,
+      hourCycle
+    ]
+  );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TimeFieldProvider, { value: context, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkAXKDHX5Vcjs.TextFieldRoot, { ref, ...props, children }) });
+});
+TimeFieldRoot.displayName = "XAUI.TimeField.Root";
+
+// src/components/time-field/index.ts
+var TimeField2 = Object.assign(TimeFieldRoot, {
+  Label: _chunkAXKDHX5Vcjs.TextFieldLabel,
+  Field: TimeFieldField,
+  Period: TimeFieldPeriod,
+  Description: _chunkAXKDHX5Vcjs.TextFieldDescription,
+  Error: _chunkAXKDHX5Vcjs.TextFieldError
+});
+
+
+
+
+
+
+
+exports.useTimeField = useTimeField; exports.TimeFieldField = TimeFieldField; exports.TimeFieldPeriod = TimeFieldPeriod; exports.TimeFieldRoot = TimeFieldRoot; exports.TimeField = TimeField2;