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

package/dist/chunk-H2FTAU5C.cjs

@@ -0,0 +1,11 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/utils/children.ts
+var _react = require('react');
+function containsElementOfType(children, type) {
+  return _react.Children.toArray(children).some(
+    (child) => _react.isValidElement.call(void 0, child) && child.type === type
+  );
+}
+
+
+
+exports.containsElementOfType = containsElementOfType;

package/dist/chunk-H4E4HDEP.cjs

@@ -0,0 +1,13 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/system/slot/merge-refs.ts
+function mergeRefs(...refs) {
+  return (value) => {
+    for (const ref of refs) {
+      if (typeof ref === "function") ref(value);
+      else if (ref) ref.current = value;
+    }
+  };
+}
+
+
+
+exports.mergeRefs = mergeRefs;

package/dist/chunk-HB4UR7NC.cjs

@@ -0,0 +1,104 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); 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 _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/typography/typography.tsx
+var _react = require('react');
+var _reactnative = require('react-native');
+
+// src/components/typography/typography.recipe.ts
+var SLOTS = ["root"];
+var VARIANT_TOKENS = {
+  h1: { fg: "foreground" },
+  h2: { fg: "foreground" },
+  h3: { fg: "foreground" },
+  h4: { fg: "foreground" },
+  h5: { fg: "foreground" },
+  h6: { fg: "foreground" },
+  body: { fg: "foreground" },
+  "body-sm": { fg: "foreground" },
+  "body-xs": { fg: "foreground" },
+  code: { fg: "foreground" }
+};
+var ROLES = {
+  h1: { step: "4xl", weight: "bold", family: "heading", letterSpacing: -0.5 },
+  h2: { step: "3xl", weight: "bold", family: "heading", letterSpacing: -0.4 },
+  h3: { step: "2xl", weight: "bold", family: "heading", letterSpacing: -0.3 },
+  h4: { step: "xl", weight: "semibold", family: "heading" },
+  h5: { step: "lg", weight: "semibold", family: "heading" },
+  h6: { step: "md", weight: "semibold", family: "heading" },
+  body: { step: "md", weight: "regular", family: "body" },
+  "body-sm": { step: "sm", weight: "regular", family: "body" },
+  "body-xs": { step: "xs", weight: "regular", family: "body" },
+  code: { step: "sm", weight: "regular", family: "mono", chip: true }
+};
+function metricsOf({ step, weight, family, letterSpacing, chip }) {
+  return (theme) => ({
+    root: {
+      fontSize: theme.fontSizes[step],
+      lineHeight: theme.lineHeights[step],
+      fontWeight: theme.fontWeights[weight],
+      fontFamily: theme.fontFamilies[family],
+      ...letterSpacing === void 0 ? {} : { letterSpacing },
+      ...chip === void 0 ? {} : {
+        alignSelf: "flex-start",
+        backgroundColor: theme.colors.default,
+        paddingHorizontal: theme.spacing(1.5),
+        paddingVertical: theme.spacing(0.5),
+        borderRadius: theme.radius.md
+      }
+    }
+  });
+}
+var ROLE_AXIS = Object.fromEntries(
+  Object.entries(ROLES).map(([name, spec]) => [name, metricsOf(spec)])
+);
+var typographyRecipe = _chunkSL3V7R2Ycjs.createRecipe.call(void 0, {
+  slots: SLOTS,
+  variantTokens: VARIANT_TOKENS,
+  // Ink only. The chip's fill is a token, not a role, so it belongs to the metrics above —
+  // where it also stays inside the cache key instead of being recomputed with the tint.
+  paint: (_theme, colors) => ({ root: { color: colors.fg } }),
+  variants: { variant: ROLE_AXIS },
+  defaultVariants: { variant: "body" }
+});
+
+// src/components/typography/typography.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var Typography = _react.forwardRef.call(void 0, function Typography2({ children, variant, color, asChild = false, style, ...props }, ref) {
+  const theme = _chunkIIAQISBGcjs.useXAUITheme.call(void 0, );
+  const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+  const selection = { variant };
+  const styles = typographyRecipe.resolve({ theme, selection });
+  const tint = color ? typographyRecipe.tint({ theme, color, selection }) : void 0;
+  const rootStyle = [styles.root, _optionalChain([tint, 'optionalAccess', _ => _.root]), styleProps, style];
+  const Root = asChild ? _chunkCDRGTUYFcjs.Slot : _reactnative.Text;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Root, { ref, style: rootStyle, ...rest, children });
+});
+Typography.displayName = "XAUI.Typography";
+
+// src/components/typography/text-span.tsx
+
+
+
+var TextSpan = _react.forwardRef.call(void 0, function TextSpan2({ children, asChild = false, style, ...props }, ref) {
+  const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+  const Root = asChild ? _chunkCDRGTUYFcjs.Slot : _reactnative.Text;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Root, { ref, style: [styleProps, style], ...rest, children });
+});
+TextSpan.displayName = "XAUI.TextSpan";
+
+
+
+
+
+exports.typographyRecipe = typographyRecipe; exports.Typography = Typography; exports.TextSpan = TextSpan;

package/dist/{chunk-3QBT3Q65.cjs → chunk-IIAQISBG.cjs}

@@ -1,4 +1,17 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/theme/theme-context.ts
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/theme/appearance.ts
+function appearanceFor(theme) {
+  const barContent = theme.mode === "dark" ? "light" : "dark";
+  return {
+    colorMode: theme.mode,
+    barContent,
+    statusBarStyle: barContent === "light" ? "light-content" : "dark-content",
+    background: theme.colors.background,
+    foreground: theme.colors.foreground,
+    border: theme.colors.border
+  };
+}
+
+// src/theme/theme-context.ts
 var _react = require('react');
 var ThemeContext = _react.createContext.call(void 0, null);
 
@@ -14,6 +27,9 @@ function useXAUITheme() {
 function useColorMode() {
   return useXAUITheme().mode;
 }
+function useAppearance() {
+  return appearanceFor(useXAUITheme());
+}
 function useThemeColor(token) {
   const { colors } = useXAUITheme();
   return Array.isArray(token) ? token.map((key) => colors[key]) : colors[token];
@@ -90,29 +106,6 @@ function contrastOn(hex, light, dark) {
   return lightnessOf(hex) > 0.62 ? dark : light;
 }
 
-// src/theme/derive-tint.ts
-var cache = /* @__PURE__ */ new Map();
-function deriveTint(tint, theme) {
-  const key = `${theme.id}|${theme.mode}|${tint}`;
-  const hit = cache.get(key);
-  if (hit) return hit;
-  if (!isHex(tint)) {
-    throw new Error(
-      `XAUI: color="${tint}" must be a hex value (#rgb or #rrggbb). A tint's contrasted, soft and pressed slices are derived in OKLab, which cannot read rgba() or a named colour. Pass the hex here and put the transparency in \`style\`.`
-    );
-  }
-  const foreground = contrastOn(tint, theme.colors.snow, theme.colors.eclipse);
-  const derived = {
-    base: tint,
-    foreground,
-    soft: alpha(tint, 0.15),
-    softForeground: mix(tint, theme.colors.foreground, 0.2),
-    pressed: mix(tint, foreground, 0.1),
-    softPressed: alpha(tint, 0.2)
-  };
-  cache.set(key, derived);
-  return derived;
-}
 
 
 
@@ -122,4 +115,10 @@ function deriveTint(tint, theme) {
 
 
 
-exports.ThemeContext = ThemeContext; exports.useXAUITheme = useXAUITheme; exports.useColorMode = useColorMode; exports.useThemeColor = useThemeColor; exports.mix = mix; exports.alpha = alpha; exports.deriveTint = deriveTint;
+
+
+
+
+
+
+exports.appearanceFor = appearanceFor; exports.ThemeContext = ThemeContext; exports.useXAUITheme = useXAUITheme; exports.useColorMode = useColorMode; exports.useAppearance = useAppearance; exports.useThemeColor = useThemeColor; exports.isHex = isHex; exports.hexToRgb = hexToRgb; exports.rgbToHex = rgbToHex; exports.rgbToOklab = rgbToOklab; exports.oklabToRgb = oklabToRgb; exports.mix = mix; exports.alpha = alpha; exports.contrastOn = contrastOn;

package/dist/chunk-ILXKBDC6.cjs

@@ -0,0 +1,209 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 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 _chunkGZAGWNQMcjs = require('./chunk-GZAGWNQM.cjs');
+
+
+
+var _chunkEKS3W46Mcjs = require('./chunk-EKS3W46M.cjs');
+
+
+var _chunkWFEMJCXOcjs = require('./chunk-WFEMJCXO.cjs');
+
+
+
+
+var _chunkGSZDN6EZcjs = require('./chunk-GSZDN6EZ.cjs');
+
+
+var _chunkCDRGTUYFcjs = require('./chunk-CDRGTUYF.cjs');
+
+
+var _chunkTK44VBIEcjs = require('./chunk-TK44VBIE.cjs');
+
+// src/components/combobox/combobox-indicator.tsx
+var _react = require('react');
+var _reactnative = require('react-native');
+
+
+
+
+
+var _reactnativereanimated = require('react-native-reanimated'); var _reactnativereanimated2 = _interopRequireDefault(_reactnativereanimated);
+var _jsxruntime = require('react/jsx-runtime');
+var HIT_SLOP = 8;
+function ComboboxIndicator(props) {
+  const { as = _chunkGSZDN6EZcjs.ChevronDownIcon, accessibilityLabel } = props;
+  const { indicatorStyle, isOpen, isDisabled, toggle } = _chunkGZAGWNQMcjs.useAutocomplete.call(void 0, );
+  const progress = _reactnativereanimated.useSharedValue.call(void 0, isOpen ? 1 : 0);
+  _react.useEffect.call(void 0, () => {
+    progress.set(_reactnativereanimated.withSpring.call(void 0, isOpen ? 1 : 0, _chunkEKS3W46Mcjs.INDICATOR_SPRING));
+  }, [isOpen, progress]);
+  const rotation = _reactnativereanimated.useAnimatedStyle.call(void 0, () => ({
+    transform: [
+      {
+        rotate: `${_reactnativereanimated.interpolate.call(void 0, progress.get(), [0, 1], [_chunkEKS3W46Mcjs.INDICATOR_ROTATION[0], _chunkEKS3W46Mcjs.INDICATOR_ROTATION[1]])}deg`
+      }
+    ]
+  }));
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _reactnative.Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel,
+      accessibilityState: { disabled: isDisabled, expanded: isOpen },
+      disabled: isDisabled,
+      hitSlop: HIT_SLOP,
+      onPress: toggle,
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactnativereanimated2.default.View, { style: [indicatorStyle, rotation], children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGSZDN6EZcjs.Icon, { as }) })
+    }
+  );
+}
+ComboboxIndicator.displayName = "XAUI.Combobox.Indicator";
+
+// src/components/combobox/combobox-input.tsx
+
+
+
+var sheet = _reactnative.StyleSheet.create({ input: { flex: 1 } });
+var ComboboxInput = _react.forwardRef.call(void 0, 
+  function ComboboxInput2({
+    opensOnChange = true,
+    opensOnFocus = true,
+    style,
+    onFocus,
+    onChangeText,
+    ...props
+  }, ref) {
+    const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+    const {
+      valueStyle,
+      placeholderColor,
+      value,
+      query,
+      setQuery,
+      isOpen,
+      isDisabled,
+      open,
+      labelFor
+    } = _chunkGZAGWNQMcjs.useAutocomplete.call(void 0, );
+    const handleChangeText = _react.useCallback.call(void 0, 
+      (next) => {
+        setQuery(next);
+        _optionalChain([onChangeText, 'optionalCall', _ => _(next)]);
+        if (opensOnChange && !isOpen) open();
+      },
+      [isOpen, onChangeText, open, opensOnChange, setQuery]
+    );
+    const handleFocus = _react.useCallback.call(void 0, 
+      (event) => {
+        _optionalChain([onFocus, 'optionalCall', _2 => _2(event)]);
+        if (opensOnFocus) open();
+      },
+      [onFocus, open, opensOnFocus]
+    );
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _reactnative.TextInput,
+      {
+        ref,
+        value: isOpen ? query : value !== void 0 && labelFor(value) || "",
+        onChangeText: handleChangeText,
+        onFocus: handleFocus,
+        editable: !isDisabled,
+        autoCorrect: false,
+        autoCapitalize: "none",
+        placeholderTextColor: placeholderColor,
+        ...rest,
+        style: [valueStyle, sheet.input, styleProps, style]
+      }
+    );
+  }
+);
+ComboboxInput.displayName = "XAUI.Combobox.Input";
+
+// src/components/combobox/combobox.tsx
+
+function ComboboxRoot(props) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGZAGWNQMcjs.Autocomplete, { ...props });
+}
+ComboboxRoot.displayName = "XAUI.Combobox.Root";
+
+// src/components/combobox/combobox-trigger.tsx
+
+
+
+var ComboboxTrigger = _react.forwardRef.call(void 0, 
+  function ComboboxTrigger2({
+    children,
+    asChild = false,
+    accessibilityRole = "combobox",
+    accessibilityState,
+    style,
+    onLayout,
+    ...props
+  }, ref) {
+    const { triggerStyle, glyph, isOpen, isDisabled, isInvalid, setAnchor } = _chunkGZAGWNQMcjs.useAutocomplete.call(void 0, );
+    const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+    const node = _react.useRef.call(void 0, null);
+    const refs = _chunkWFEMJCXOcjs.useMergedRef.call(void 0, node, ref);
+    const measure = _react.useCallback.call(void 0, () => {
+      _optionalChain([node, 'access', _3 => _3.current, 'optionalAccess', _4 => _4.measureInWindow, 'call', _5 => _5((x, y, width, height) => {
+        setAnchor({ x, y, width, height });
+      })]);
+    }, [setAnchor]);
+    const handleLayout = _react.useCallback.call(void 0, 
+      (event) => {
+        _optionalChain([onLayout, 'optionalCall', _6 => _6(event)]);
+        measure();
+      },
+      [measure, onLayout]
+    );
+    _react.useEffect.call(void 0, () => {
+      if (isOpen) measure();
+    }, [isOpen, measure]);
+    const Root = asChild ? _chunkCDRGTUYFcjs.Slot : _reactnative.View;
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGSZDN6EZcjs.IconContext.Provider, { value: glyph, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      Root,
+      {
+        ref: refs,
+        accessibilityRole,
+        accessibilityState: {
+          disabled: isDisabled,
+          expanded: isOpen,
+          ...accessibilityState
+        },
+        "aria-invalid": isInvalid || void 0,
+        ...rest,
+        onLayout: handleLayout,
+        style: [triggerStyle, styleProps, style],
+        children
+      }
+    ) });
+  }
+);
+ComboboxTrigger.displayName = "XAUI.Combobox.Trigger";
+
+// src/components/combobox/index.ts
+var Combobox = Object.assign(ComboboxRoot, {
+  Trigger: ComboboxTrigger,
+  Input: ComboboxInput,
+  Indicator: ComboboxIndicator,
+  Overlay: _chunkGZAGWNQMcjs.AutocompleteOverlay,
+  Content: _chunkGZAGWNQMcjs.AutocompleteContent,
+  Item: _chunkGZAGWNQMcjs.AutocompleteItem,
+  ItemLabel: _chunkGZAGWNQMcjs.AutocompleteItemLabel,
+  Empty: _chunkGZAGWNQMcjs.AutocompleteEmpty
+});
+
+
+
+
+
+
+
+exports.ComboboxIndicator = ComboboxIndicator; exports.ComboboxInput = ComboboxInput; exports.ComboboxRoot = ComboboxRoot; exports.ComboboxTrigger = ComboboxTrigger; exports.Combobox = Combobox;

package/dist/chunk-IMYNCMCL.js

@@ -0,0 +1,211 @@
+import {
+  progressFraction
+} from "./chunk-DAWXJTAC.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/radial-chart/radial-chart.tsx
+import { useMemo } from "react";
+import { View } from "react-native";
+import { Circle, Svg } from "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 = createRecipe({
+  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
+import { jsx, jsxs } from "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 = useXAUITheme();
+  const [styleProps, rest] = useStyleProps(props);
+  const frame = useOptionalChart();
+  const { ink, colors } = useChartInk({
+    variant: variant ?? frame?.variant,
+    size,
+    color: color ?? frame?.color,
+    isDisabled: isDisabled || (frame?.isDisabled ?? false),
+    count: data.length
+  });
+  const styles = radialChartRecipe.resolve({
+    theme,
+    selection: { size },
+    states: { disabled: isDisabled }
+  });
+  const { diameter, thickness: step } = SIZES[size];
+  const arcs = useMemo(() => {
+    const stroke = thickness ?? step;
+    const { strokeWidth, rings } = radialRings({
+      diameter,
+      count: data.length,
+      thickness: stroke,
+      gap: 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 = 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 = progressFraction(values[index], 0, target);
+      return {
+        key: String(row[labelKey] ?? index),
+        color: 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__ */ jsxs(View, { ...rest, style: [styles.root, styleProps, style], children: [
+    /* @__PURE__ */ jsx(View, { style: styles.canvas, children: /* @__PURE__ */ jsxs(Svg, { width: diameter, height: diameter, children: [
+      hasTrack ? arcs.map((arc) => /* @__PURE__ */ jsx(
+        Circle,
+        {
+          cx: centre,
+          cy: centre,
+          r: arc.radius,
+          stroke: ink.gridColor,
+          strokeWidth: arc.strokeWidth,
+          fill: "none"
+        },
+        `${arc.key}-track`
+      )) : null,
+      arcs.map((arc) => /* @__PURE__ */ jsx(
+        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__ */ jsx(View, { style: styles.center, children })
+  ] });
+}
+RadialChart.displayName = "XAUI.RadialChart";
+
+export {
+  radialChartRecipe,
+  RadialChart
+};