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

package/dist/chunk-QUSQEYLP.cjs

@@ -0,0 +1,446 @@
+"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 _chunkCBRW53GNcjs = require('./chunk-CBRW53GN.cjs');
+
+
+var _chunkYSTLHVQVcjs = require('./chunk-YSTLHVQV.cjs');
+
+
+var _chunk2B6PUYTPcjs = require('./chunk-2B6PUYTP.cjs');
+
+
+var _chunkIPD3IUE2cjs = require('./chunk-IPD3IUE2.cjs');
+
+
+var _chunkUEW3GAP5cjs = require('./chunk-UEW3GAP5.cjs');
+
+
+var _chunkISHMSP6Pcjs = require('./chunk-ISHMSP6P.cjs');
+
+
+var _chunkJ5COSALOcjs = require('./chunk-J5COSALO.cjs');
+
+
+var _chunk7EIHHOHPcjs = require('./chunk-7EIHHOHP.cjs');
+
+
+var _chunkOW4N2C3Mcjs = require('./chunk-OW4N2C3M.cjs');
+
+
+var _chunk7DPL3ZDScjs = require('./chunk-7DPL3ZDS.cjs');
+
+
+var _chunkGSZDN6EZcjs = require('./chunk-GSZDN6EZ.cjs');
+
+
+var _chunkCDRGTUYFcjs = require('./chunk-CDRGTUYF.cjs');
+
+
+var _chunkIIAQISBGcjs = require('./chunk-IIAQISBG.cjs');
+
+
+var _chunkTK44VBIEcjs = require('./chunk-TK44VBIE.cjs');
+
+// src/components/date-time-picker/date-time-picker.tsx
+var _react = require('react');
+var _reactnative = require('react-native');
+
+// src/components/date-time-picker/date-time-picker.context.ts
+var [DateTimePickerProvider, useDateTimePicker] = _chunkCDRGTUYFcjs.createSlotContext.call(void 0, "DateTimePicker");
+
+// src/components/date-time-picker/date-time-picker.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var DEFAULT_FORMAT = {
+  dateStyle: "medium",
+  timeStyle: "short"
+};
+function DateTimePicker({
+  children,
+  variant,
+  size = "md",
+  radius,
+  color,
+  value: controlledValue,
+  defaultValue,
+  onValueChange,
+  isOpen: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  step: controlledStep,
+  defaultStep = "date",
+  onStepChange,
+  hourCycle,
+  minuteStep = 1,
+  minValue,
+  maxValue,
+  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 [step, setStep] = _chunk7EIHHOHPcjs.useControllableState.call(void 0, {
+    value: controlledStep,
+    defaultValue: defaultStep,
+    onChange: onStepChange
+  });
+  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 tint = color ? _chunkJ5COSALOcjs.selectRecipe.tint({ theme, color, selection }) : void 0;
+  const onPickDate = _react.useCallback.call(void 0, 
+    (day) => {
+      const start = _chunkISHMSP6Pcjs.startOfDay.call(void 0, day);
+      setValue(
+        value === void 0 ? start : _chunkYSTLHVQVcjs.withTime.call(void 0, start, {
+          hours: value.getHours(),
+          minutes: value.getMinutes(),
+          seconds: 0
+        })
+      );
+      setStep("time");
+    },
+    [setStep, setValue, value]
+  );
+  const onPickTime = _react.useCallback.call(void 0, 
+    (moment) => {
+      setValue(moment);
+      if (closeOnSelect) setOpen(false);
+    },
+    [closeOnSelect, setOpen, setValue]
+  );
+  const toggle = _react.useCallback.call(void 0, () => {
+    if (isDisabled) return;
+    setOpen(!isOpen);
+    setStep("date");
+  }, [isDisabled, isOpen, setOpen, setStep]);
+  const text = _react.useMemo.call(void 0, 
+    () => value === void 0 ? void 0 : new Intl.DateTimeFormat(locale, formatOptions).format(value),
+    [value, locale, formatOptions]
+  );
+  const dateText = _react.useMemo.call(void 0, 
+    () => value === void 0 ? void 0 : new Intl.DateTimeFormat(locale, { dateStyle: "medium" }).format(value),
+    [value, locale]
+  );
+  const timeText = _react.useMemo.call(void 0, 
+    () => value === void 0 ? void 0 : new Intl.DateTimeFormat(locale, { timeStyle: "short" }).format(value),
+    [value, locale]
+  );
+  const glyph = _react.useMemo.call(void 0, () => {
+    const flat = _reactnative.StyleSheet.flatten([field.indicator, _optionalChain([tint, 'optionalAccess', _ => _.indicator])]);
+    return {
+      size: flat.fontSize,
+      color: typeof flat.color === "string" ? flat.color : void 0
+    };
+  }, [field.indicator, tint]);
+  const context = _react.useMemo.call(void 0, 
+    () => ({
+      triggerStyle: [field.trigger, _optionalChain([tint, 'optionalAccess', _2 => _2.trigger])],
+      triggerPressedStyle: fieldPressed.trigger,
+      valueStyle: [field.value, _optionalChain([tint, 'optionalAccess', _3 => _3.value])],
+      placeholderStyle: tint ? [
+        field.placeholder,
+        { color: _reactnative.StyleSheet.flatten([tint.value]).color }
+      ] : field.placeholder,
+      glyph,
+      value,
+      text,
+      dateText,
+      timeText,
+      step,
+      setStep,
+      onPickDate,
+      onPickTime,
+      calendar: {
+        variant: void 0,
+        size,
+        color,
+        minValue,
+        maxValue,
+        locale
+      },
+      clock: { size, color, hourCycle, minuteStep, locale },
+      isOpen,
+      setOpen,
+      toggle,
+      isDisabled,
+      isInvalid
+    }),
+    [
+      field,
+      fieldPressed,
+      tint,
+      glyph,
+      value,
+      text,
+      dateText,
+      timeText,
+      step,
+      setStep,
+      onPickDate,
+      onPickTime,
+      size,
+      color,
+      minValue,
+      maxValue,
+      locale,
+      hourCycle,
+      minuteStep,
+      isOpen,
+      setOpen,
+      toggle,
+      isDisabled,
+      isInvalid
+    ]
+  );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DateTimePickerProvider, { value: context, children });
+}
+DateTimePicker.displayName = "XAUI.DateTimePicker.Root";
+
+// src/components/date-time-picker/date-time-picker-steps.tsx
+
+
+var STEPS = ["date", "time"];
+var DateTimePickerSteps = _react.forwardRef.call(void 0, function DateTimePickerSteps2({ labels, style, ...props }, ref) {
+  const { step, setStep, dateText, timeText, isDisabled } = useDateTimePicker();
+  const theme = _chunkIIAQISBGcjs.useXAUITheme.call(void 0, );
+  const shown = {
+    date: dateText,
+    time: timeText
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _chunk2B6PUYTPcjs.Tabs,
+    {
+      ref,
+      value: step,
+      onValueChange: (next) => setStep(next),
+      isDisabled,
+      ...props,
+      style: [{ marginBottom: theme.spacing(2) }, style],
+      children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk2B6PUYTPcjs.Tabs.List, { style: { alignSelf: "center" }, children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2B6PUYTPcjs.Tabs.Indicator, {}),
+        STEPS.map((name) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2B6PUYTPcjs.Tabs.Trigger, { value: name, children: _nullishCoalesce(_nullishCoalesce(shown[name], () => ( _optionalChain([labels, 'optionalAccess', _4 => _4[name]]))), () => ( name)) }, name))
+      ] })
+    }
+  );
+});
+DateTimePickerSteps.displayName = "XAUI.DateTimePicker.Steps";
+
+// src/components/date-time-picker/date-time-picker-sheet.tsx
+
+function DateTimePickerSheet({
+  children,
+  stepLabels,
+  previousLabel,
+  nextLabel,
+  ...props
+}) {
+  const picker = useDateTimePicker();
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkIPD3IUE2cjs.BottomSheet2, { isOpen: picker.isOpen, onOpenChange: picker.setOpen, ...props, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkIPD3IUE2cjs.BottomSheet2.Overlay, {}),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkIPD3IUE2cjs.BottomSheet2.Content, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DateTimePickerProvider, { value: picker, children: _nullishCoalesce(children, () => ( /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkIPD3IUE2cjs.BottomSheet2.Handle, {}),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DateTimePickerSteps, { labels: stepLabels }),
+      picker.step === "date" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        DateTimePickerCalendar,
+        {
+          previousLabel,
+          nextLabel
+        }
+      ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DateTimePickerClock, {})
+    ] }))) }) })
+  ] });
+}
+DateTimePickerSheet.displayName = "XAUI.DateTimePicker.Sheet";
+function DateTimePickerCalendar({
+  previousLabel,
+  nextLabel,
+  ...props
+}) {
+  const { value, onPickDate, calendar } = useDateTimePicker();
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    _chunkUEW3GAP5cjs.Calendar,
+    {
+      size: calendar.size,
+      color: calendar.color,
+      locale: calendar.locale,
+      minValue: calendar.minValue,
+      maxValue: calendar.maxValue,
+      value,
+      onValueChange: onPickDate,
+      ...props,
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkUEW3GAP5cjs.Calendar.Header, { children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUEW3GAP5cjs.Calendar.PreviousButton, { accessibilityLabel: previousLabel }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUEW3GAP5cjs.Calendar.Title, {}),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUEW3GAP5cjs.Calendar.NextButton, { accessibilityLabel: nextLabel })
+        ] }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUEW3GAP5cjs.Calendar.Weekdays, {}),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUEW3GAP5cjs.Calendar.Grid, {})
+      ]
+    }
+  );
+}
+DateTimePickerCalendar.displayName = "XAUI.DateTimePicker.Calendar";
+function DateTimePickerClock(props) {
+  const { value, onPickTime, clock } = useDateTimePicker();
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    _chunkCBRW53GNcjs.TimePicker2,
+    {
+      size: clock.size,
+      color: clock.color,
+      locale: clock.locale,
+      hourCycle: clock.hourCycle,
+      minuteStep: clock.minuteStep,
+      value,
+      onValueChange: onPickTime,
+      closeOnSelect: false,
+      ...props,
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkCBRW53GNcjs.TimePicker2.Display, { style: { alignSelf: "center" } }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkCBRW53GNcjs.TimePicker2.Clock, { style: { alignSelf: "center" } })
+      ]
+    }
+  );
+}
+DateTimePickerClock.displayName = "XAUI.DateTimePicker.Clock";
+
+// src/components/date-time-picker/date-time-picker-indicator.tsx
+
+function DateTimePickerIndicator(props) {
+  const { glyph } = useDateTimePicker();
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGSZDN6EZcjs.IconContext.Provider, { value: glyph, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkCBRW53GNcjs.TimePickerIndicator, { ...props }) });
+}
+DateTimePickerIndicator.displayName = "XAUI.DateTimePicker.Indicator";
+
+// src/components/date-time-picker/date-time-picker-trigger.tsx
+
+
+var DateTimePickerTrigger = _react.forwardRef.call(void 0, 
+  function DateTimePickerTrigger2({
+    children,
+    asChild = false,
+    accessibilityRole = "button",
+    accessibilityState,
+    style,
+    onPressIn,
+    onPressOut,
+    onPress,
+    ...props
+  }, ref) {
+    const {
+      triggerStyle,
+      triggerPressedStyle,
+      glyph,
+      isOpen,
+      isDisabled,
+      isInvalid,
+      toggle
+    } = useDateTimePicker();
+    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, 
+      _chunkOW4N2C3Mcjs.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', _5 => _5(event)]);
+          toggle();
+        },
+        onPressIn: press.onPressIn,
+        onPressOut: press.onPressOut,
+        children
+      }
+    ) });
+  }
+);
+DateTimePickerTrigger.displayName = "XAUI.DateTimePicker.Trigger";
+
+// src/components/date-time-picker/date-time-picker-value.tsx
+
+
+
+var DateTimePickerValue = _react.forwardRef.call(void 0, 
+  function DateTimePickerValue2({ children, placeholder, style, ...props }, ref) {
+    const { text, valueStyle, placeholderStyle } = useDateTimePicker();
+    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))
+      }
+    );
+  }
+);
+DateTimePickerValue.displayName = "XAUI.DateTimePicker.Value";
+
+// src/components/date-time-picker/index.ts
+var DateTimePicker2 = Object.assign(DateTimePicker, {
+  Trigger: DateTimePickerTrigger,
+  Value: DateTimePickerValue,
+  Indicator: DateTimePickerIndicator,
+  Sheet: DateTimePickerSheet,
+  Steps: DateTimePickerSteps,
+  Calendar: DateTimePickerCalendar,
+  Clock: DateTimePickerClock
+});
+
+
+
+
+
+
+
+
+
+
+
+
+exports.useDateTimePicker = useDateTimePicker; exports.DateTimePicker = DateTimePicker; exports.DateTimePickerSteps = DateTimePickerSteps; exports.DateTimePickerSheet = DateTimePickerSheet; exports.DateTimePickerCalendar = DateTimePickerCalendar; exports.DateTimePickerClock = DateTimePickerClock; exports.DateTimePickerIndicator = DateTimePickerIndicator; exports.DateTimePickerTrigger = DateTimePickerTrigger; exports.DateTimePickerValue = DateTimePickerValue; exports.DateTimePicker2 = DateTimePicker2;

package/dist/chunk-QXQ672X5.cjs

@@ -0,0 +1,211 @@
+"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 _chunkYOT3GCNKcjs = require('./chunk-YOT3GCNK.cjs');
+
+
+
+var _chunkUMY36NP2cjs = require('./chunk-UMY36NP2.cjs');
+
+
+var _chunkSL3V7R2Ycjs = require('./chunk-SL3V7R2Y.cjs');
+
+
+var _chunkIIAQISBGcjs = require('./chunk-IIAQISBG.cjs');
+
+
+var _chunkTK44VBIEcjs = require('./chunk-TK44VBIE.cjs');
+
+// src/components/radial-chart/radial-chart.tsx
+var _react = require('react');
+var _reactnative = require('react-native');
+var _reactnativesvg = require('react-native-svg');
+
+// src/components/radial-chart/radial-chart.recipe.ts
+var SLOTS = ["root", "canvas", "center"];
+var SIZES = {
+  sm: { diameter: 140, thickness: 10 },
+  md: { diameter: 200, thickness: 14 },
+  lg: { diameter: 260, thickness: 18 }
+};
+function sizeAxis(size) {
+  const { diameter } = SIZES[size];
+  return () => ({
+    root: { width: diameter, height: diameter },
+    center: { width: diameter, height: diameter }
+  });
+}
+var radialChartRecipe = _chunkSL3V7R2Ycjs.createRecipe.call(void 0, {
+  slots: SLOTS,
+  base: () => ({
+    root: { alignSelf: "center" },
+    // Twelve o'clock, not three: a ring that starts at the right reads as already begun.
+    //
+    // Turned on the **wrapper** rather than on each circle, which is `ProgressCircle`'s
+    // arrangement and its reason: `Circle`'s own `rotation` prop emits an invalid DOM
+    // property on web, where `react-native-svg` writes it out as `transform-origin`. It
+    // also keeps what sits in the middle upright, since that is this element's sibling
+    // rather than its child.
+    canvas: { transform: [{ rotate: "-90deg" }] },
+    // 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 ring.
+    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/radial-chart/radial-chart.utils.ts
+var MIN_THICKNESS = 1;
+function radialRings({
+  diameter,
+  count,
+  thickness,
+  gap
+}) {
+  const rings = Math.max(Math.floor(count), 0);
+  const span = diameter / 2;
+  if (rings === 0 || span <= 0) return { strokeWidth: 0, rings: [] };
+  const spacing = clamp(gap, 0, span / (2 * rings));
+  const room = span - spacing * (rings - 1);
+  const strokeWidth = clamp(thickness, MIN_THICKNESS, room / rings);
+  return {
+    strokeWidth,
+    rings: Array.from({ length: rings }, (_, index) => {
+      const radius = span - strokeWidth / 2 - index * (strokeWidth + spacing);
+      return { radius, circumference: 2 * Math.PI * radius };
+    })
+  };
+}
+function clamp(value, min, max) {
+  if (!Number.isFinite(value)) return min;
+  return Math.min(Math.max(value, min), max);
+}
+
+// src/components/radial-chart/radial-chart.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var DEFAULT_GAP_RATIO = 0.5;
+function RadialChart({
+  data,
+  labelKey,
+  valueKey,
+  maxKey,
+  maxValue,
+  variant,
+  size = "md",
+  color,
+  thickness,
+  gap,
+  hasTrack = true,
+  children,
+  isDisabled = false,
+  style,
+  ...props
+}) {
+  const theme = _chunkIIAQISBGcjs.useXAUITheme.call(void 0, );
+  const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+  const frame = _chunkUMY36NP2cjs.useOptionalChart.call(void 0, );
+  const { ink, colors } = _chunkUMY36NP2cjs.useChartInk.call(void 0, {
+    variant: _nullishCoalesce(variant, () => ( _optionalChain([frame, 'optionalAccess', _2 => _2.variant]))),
+    size,
+    color: _nullishCoalesce(color, () => ( _optionalChain([frame, 'optionalAccess', _3 => _3.color]))),
+    isDisabled: isDisabled || (_nullishCoalesce(_optionalChain([frame, 'optionalAccess', _4 => _4.isDisabled]), () => ( false))),
+    count: data.length
+  });
+  const styles = radialChartRecipe.resolve({
+    theme,
+    selection: { size },
+    states: { disabled: isDisabled }
+  });
+  const { diameter, thickness: step } = SIZES[size];
+  const arcs = _react.useMemo.call(void 0, () => {
+    const stroke = _nullishCoalesce(thickness, () => ( step));
+    const { strokeWidth, rings } = radialRings({
+      diameter,
+      count: data.length,
+      thickness: stroke,
+      gap: _nullishCoalesce(gap, () => ( stroke * DEFAULT_GAP_RATIO))
+    });
+    const values = data.map((row) => {
+      const value = Number(row[valueKey]);
+      return Number.isFinite(value) && value > 0 ? value : 0;
+    });
+    const ceiling = _nullishCoalesce(maxValue, () => ( Math.max(...values, 0)));
+    return rings.map((ring, index) => {
+      const row = data[index];
+      const target = maxKey === void 0 ? ceiling : Number(row[maxKey]);
+      const fraction = _chunkYOT3GCNKcjs.progressFraction.call(void 0, values[index], 0, target);
+      return {
+        key: String(_nullishCoalesce(row[labelKey], () => ( index))),
+        color: _nullishCoalesce(colors[index], () => ( colors[0])),
+        radius: ring.radius,
+        circumference: ring.circumference,
+        // A dash offset rather than an arc rebuilt per value, which is what lets a ring be
+        // one path with one rounded cap at each end.
+        offset: ring.circumference * (1 - fraction),
+        strokeWidth
+      };
+    });
+  }, [
+    colors,
+    data,
+    diameter,
+    gap,
+    labelKey,
+    maxKey,
+    maxValue,
+    step,
+    thickness,
+    valueKey
+  ]);
+  const centre = diameter / 2;
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _reactnative.View, { ...rest, style: [styles.root, styleProps, style], children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactnative.View, { style: styles.canvas, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _reactnativesvg.Svg, { width: diameter, height: diameter, children: [
+      hasTrack ? arcs.map((arc) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _reactnativesvg.Circle,
+        {
+          cx: centre,
+          cy: centre,
+          r: arc.radius,
+          stroke: ink.gridColor,
+          strokeWidth: arc.strokeWidth,
+          fill: "none"
+        },
+        `${arc.key}-track`
+      )) : null,
+      arcs.map((arc) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _reactnativesvg.Circle,
+        {
+          cx: centre,
+          cy: centre,
+          r: arc.radius,
+          stroke: arc.color,
+          strokeWidth: arc.strokeWidth,
+          strokeDasharray: arc.circumference,
+          strokeDashoffset: arc.offset,
+          strokeLinecap: "round",
+          fill: "none"
+        },
+        arc.key
+      ))
+    ] }) }),
+    children === void 0 ? null : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactnative.View, { style: styles.center, children })
+  ] });
+}
+RadialChart.displayName = "XAUI.RadialChart";
+
+
+
+
+exports.radialChartRecipe = radialChartRecipe; exports.RadialChart = RadialChart;