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

package/dist/chunk-IEEUSJBJ.js

@@ -0,0 +1,408 @@
+import {
+  useControllableState
+} from "./chunk-F6W3JQ7K.js";
+import {
+  PressableFeedback
+} from "./chunk-XZ42OWKC.js";
+import {
+  usePressState
+} from "./chunk-423RQBOX.js";
+import {
+  Icon
+} from "./chunk-JN6IRT2M.js";
+import {
+  childrenToString
+} from "./chunk-WFZDAXDI.js";
+import {
+  createRecipe,
+  radiusAxis
+} from "./chunk-DKVXTMIJ.js";
+import {
+  Slot,
+  createSlotContext
+} from "./chunk-TTZOIXKE.js";
+import {
+  warnDev
+} from "./chunk-EGLLDKN6.js";
+import {
+  useXAUITheme
+} from "./chunk-Z6JBWRPL.js";
+import {
+  useStyleProps
+} from "./chunk-M63GFNKV.js";
+
+// src/components/toggle-button/toggle-button.context.ts
+var [ToggleButtonProvider, useToggleButton] = createSlotContext("ToggleButton");
+
+// src/components/toggle-button/toggle-button-icon.tsx
+import { jsx } from "react/jsx-runtime";
+function ToggleButtonIcon({ size, color, ...rest }) {
+  const { icon } = useToggleButton();
+  return /* @__PURE__ */ jsx(Icon, { size: size ?? icon.size, color: color ?? icon.color, ...rest });
+}
+ToggleButtonIcon.displayName = "XAUI.ToggleButton.Icon";
+
+// src/components/toggle-button/toggle-button-group.tsx
+import { forwardRef, useCallback, useMemo } from "react";
+import { View } from "react-native";
+
+// src/components/toggle-button/toggle-button-group.context.ts
+import { createContext, useContext } from "react";
+var ToggleButtonGroupContext = createContext(
+  null
+);
+ToggleButtonGroupContext.displayName = "XAUI.ToggleButton.Group.Context";
+var ToggleButtonGroupProvider = ToggleButtonGroupContext.Provider;
+function useOptionalToggleButtonGroup() {
+  return useContext(ToggleButtonGroupContext);
+}
+function useToggleButtonGroup() {
+  const value = useOptionalToggleButtonGroup();
+  if (value === null) {
+    throw new Error(
+      "XAUI: useToggleButtonGroup must be called inside <ToggleButton.Group>."
+    );
+  }
+  return value;
+}
+
+// src/components/toggle-button/toggle-button-group.recipe.ts
+var SLOTS = ["root"];
+var toggleButtonGroupRecipe = createRecipe({
+  slots: SLOTS,
+  variants: {
+    orientation: {
+      horizontal: () => ({
+        root: { flexDirection: "row", flexWrap: "wrap", alignItems: "center" }
+      }),
+      vertical: () => ({
+        root: { flexDirection: "column", alignItems: "flex-start" }
+      })
+    }
+  },
+  base: (theme) => ({ root: { gap: theme.spacing(2) } }),
+  defaultVariants: {
+    orientation: "horizontal"
+  }
+});
+
+// src/components/toggle-button/toggle-button-group.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var ToggleButtonGroup = forwardRef(
+  function ToggleButtonGroup2({
+    children,
+    value: controlledValue,
+    defaultValue,
+    onValueChange,
+    orientation,
+    variant,
+    size,
+    radius,
+    color,
+    isDisabled = false,
+    asChild = false,
+    accessibilityRole,
+    style,
+    ...props
+  }, ref) {
+    const theme = useXAUITheme();
+    const [styleProps, rest] = useStyleProps(props);
+    const [value, setValue] = useControllableState({
+      value: controlledValue,
+      defaultValue,
+      onChange: onValueChange
+    });
+    const styles = toggleButtonGroupRecipe.resolve({
+      theme,
+      selection: { orientation }
+    });
+    const select = useCallback((next) => setValue(next), [setValue]);
+    const context = useMemo(
+      () => ({ value, select, variant, size, radius, color, isDisabled }),
+      [value, select, variant, size, radius, color, isDisabled]
+    );
+    const rootStyle = [styles.root, styleProps, style];
+    return /* @__PURE__ */ jsx2(ToggleButtonGroupProvider, { value: context, children: asChild ? /* @__PURE__ */ jsx2(
+      Slot,
+      {
+        ref,
+        accessibilityRole: accessibilityRole ?? "radiogroup",
+        ...rest,
+        style: rootStyle,
+        children
+      }
+    ) : /* @__PURE__ */ jsx2(
+      View,
+      {
+        ref,
+        accessibilityRole: accessibilityRole ?? "radiogroup",
+        ...rest,
+        style: rootStyle,
+        children
+      }
+    ) });
+  }
+);
+ToggleButtonGroup.displayName = "XAUI.ToggleButton.Group";
+
+// src/components/toggle-button/toggle-button-label.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { Text } from "react-native";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var ToggleButtonLabel = forwardRef2(
+  function ToggleButtonLabel2({ children, style, numberOfLines = 1, ...props }, ref) {
+    const { labelStyle } = useToggleButton();
+    const [styleProps, rest] = useStyleProps(props);
+    return /* @__PURE__ */ jsx3(
+      Text,
+      {
+        ref,
+        numberOfLines,
+        style: [labelStyle, styleProps, style],
+        ...rest,
+        children
+      }
+    );
+  }
+);
+ToggleButtonLabel.displayName = "XAUI.ToggleButton.Label";
+
+// src/components/toggle-button/toggle-button.tsx
+import { forwardRef as forwardRef3, useCallback as useCallback2, useMemo as useMemo2 } from "react";
+import { StyleSheet } from "react-native";
+
+// src/components/toggle-button/toggle-button.recipe.ts
+var SLOTS2 = [
+  "root",
+  "rootPressed",
+  "rootSelected",
+  "label",
+  "labelSelected",
+  "icon",
+  "iconSelected"
+];
+var VARIANT_TOKENS = {
+  primary: {
+    bg: "default",
+    bgPressed: "defaultPressed",
+    fg: "defaultForeground",
+    bgSelected: "accent",
+    fgSelected: "accentForeground"
+  },
+  secondary: {
+    bg: "defaultSoft",
+    bgPressed: "defaultSoftPressed",
+    fg: "defaultSoftForeground",
+    bgSelected: "accentSoft",
+    fgSelected: "accentSoftForeground"
+  },
+  ghost: {
+    fg: "foreground",
+    fgSelected: "accent"
+  }
+};
+function sizeAxis(step) {
+  const { size, padding, gap, glyph, radius } = step;
+  return (theme) => ({
+    root: {
+      height: theme.controlHeights[size],
+      paddingHorizontal: theme.spacing(padding),
+      gap: theme.spacing(gap),
+      borderRadius: theme.radius[radius]
+    },
+    label: {
+      fontSize: theme.fontSizes[size],
+      lineHeight: theme.lineHeights[size]
+    },
+    icon: { fontSize: theme.fontSizes[glyph] }
+  });
+}
+var toggleButtonRecipe = createRecipe({
+  slots: SLOTS2,
+  base: (theme) => ({
+    root: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      alignSelf: "flex-start",
+      borderWidth: 0,
+      borderCurve: "continuous"
+    },
+    label: {
+      fontFamily: theme.fontFamilies.body,
+      fontWeight: theme.fontWeights.medium
+    }
+  }),
+  variantTokens: VARIANT_TOKENS,
+  paint: (_theme, colors) => ({
+    root: { backgroundColor: colors.bg },
+    rootPressed: { backgroundColor: colors.bgPressed },
+    rootSelected: { backgroundColor: colors.bgSelected },
+    label: { color: colors.fg },
+    labelSelected: { color: colors.fgSelected },
+    icon: { color: colors.fg },
+    iconSelected: { color: colors.fgSelected }
+  }),
+  variants: {
+    size: {
+      xs: sizeAxis({ size: "xs", padding: 3, gap: 1, glyph: "sm", radius: "3xl" }),
+      sm: sizeAxis({
+        size: "sm",
+        padding: 3.5,
+        gap: 1.5,
+        glyph: "md",
+        radius: "3xl"
+      }),
+      md: sizeAxis({ size: "md", padding: 4, gap: 2, glyph: "lg", radius: "3xl" }),
+      lg: sizeAxis({ size: "lg", padding: 5, gap: 2.5, glyph: "xl", radius: "4xl" })
+    },
+    radius: radiusAxis("root"),
+    isIconOnly: {
+      true: () => ({ root: { paddingHorizontal: 0, aspectRatio: 1 } })
+    }
+  },
+  states: {
+    disabled: (theme) => ({ root: { opacity: theme.opacity.disabled } })
+  },
+  defaultVariants: { variant: "primary", size: "md" }
+});
+
+// src/components/toggle-button/toggle-button.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var ToggleButtonRoot = forwardRef3(
+  function ToggleButton({
+    children,
+    variant,
+    size,
+    radius,
+    color,
+    value,
+    isSelected,
+    defaultSelected = false,
+    onSelectedChange,
+    isDisabled = false,
+    isIconOnly = false,
+    asChild = false,
+    accessibilityRole = "button",
+    accessibilityState,
+    style,
+    onPress,
+    onPressIn,
+    onPressOut,
+    ...props
+  }, ref) {
+    const theme = useXAUITheme();
+    const [styleProps, rest] = useStyleProps(props);
+    const [isPressed, press] = usePressState({ onPressIn, onPressOut });
+    const group = useOptionalToggleButtonGroup();
+    const inGroup = group !== null && value !== void 0;
+    const [selected, setSelected] = useControllableState({
+      value: isSelected ?? (inGroup ? group.value === value : void 0),
+      defaultValue: defaultSelected,
+      onChange: onSelectedChange
+    });
+    const resolvedVariant = variant ?? group?.variant;
+    const resolvedSize = size ?? group?.size;
+    const resolvedRadius = radius ?? group?.radius;
+    const resolvedColor = color ?? group?.color;
+    const disabled = isDisabled || (group?.isDisabled ?? false);
+    const handlePress = useCallback2(
+      (event) => {
+        setSelected(inGroup ? true : (current) => !current);
+        if (inGroup) group.select(value);
+        onPress?.(event);
+      },
+      [onPress, setSelected, inGroup, group, value]
+    );
+    const selection = {
+      variant: resolvedVariant,
+      size: resolvedSize,
+      radius: resolvedRadius,
+      isIconOnly: isIconOnly ? "true" : void 0
+    };
+    const states = { disabled };
+    const styles = toggleButtonRecipe.resolve({ theme, selection, states });
+    const tint = resolvedColor ? toggleButtonRecipe.tint({ theme, color: resolvedColor, selection, states }) : void 0;
+    const renderState = useMemo2(
+      () => ({ isSelected: selected, isPressed, isDisabled: disabled }),
+      [selected, isPressed, disabled]
+    );
+    const context = useMemo2(() => {
+      const labelStyle = [
+        styles.label,
+        selected && styles.labelSelected,
+        tint?.label,
+        selected && tint?.labelSelected
+      ];
+      const iconStyle = StyleSheet.flatten([
+        styles.icon,
+        selected && styles.iconSelected,
+        tint?.icon,
+        selected && tint?.iconSelected
+      ]);
+      return {
+        ...renderState,
+        labelStyle,
+        icon: {
+          size: iconStyle.fontSize,
+          color: typeof iconStyle.color === "string" ? iconStyle.color : void 0
+        }
+      };
+    }, [styles, tint, selected, renderState]);
+    const rootStyle = [
+      styles.root,
+      selected && styles.rootSelected,
+      !selected && isPressed && styles.rootPressed,
+      tint?.root,
+      selected && tint?.rootSelected,
+      !selected && isPressed && tint?.rootPressed,
+      styleProps,
+      typeof style === "function" ? style({ pressed: isPressed }) : style
+    ];
+    const renderedChildren = typeof children === "function" ? children(renderState) : children;
+    const text = childrenToString(renderedChildren);
+    if (isIconOnly && !rest.accessibilityLabel && !rest["aria-label"]) {
+      warnDev(
+        "ToggleButton: an icon-only toggle needs an `accessibilityLabel` \u2014 there is no text for a screen reader to read."
+      );
+    }
+    return /* @__PURE__ */ jsx4(ToggleButtonProvider, { value: context, children: /* @__PURE__ */ jsx4(
+      PressableFeedback,
+      {
+        ref,
+        isPressed,
+        isDisabled: disabled,
+        asChild,
+        accessibilityRole: accessibilityRole ?? (inGroup ? "radio" : "button"),
+        accessibilityState: {
+          ...accessibilityState,
+          disabled,
+          ...inGroup ? { checked: selected } : { selected }
+        },
+        ...rest,
+        "aria-checked": inGroup ? selected : void 0,
+        "aria-pressed": inGroup ? void 0 : selected,
+        style: rootStyle,
+        onPress: handlePress,
+        onPressIn: press.onPressIn,
+        onPressOut: press.onPressOut,
+        children: asChild ? renderedChildren : text !== null ? /* @__PURE__ */ jsx4(ToggleButtonLabel, { children: text }) : renderedChildren
+      }
+    ) });
+  }
+);
+ToggleButtonRoot.displayName = "XAUI.ToggleButton.Root";
+
+// src/components/toggle-button/index.ts
+var ToggleButton2 = Object.assign(ToggleButtonRoot, {
+  Label: ToggleButtonLabel,
+  Icon: ToggleButtonIcon,
+  Group: ToggleButtonGroup
+});
+
+export {
+  useToggleButton,
+  useToggleButtonGroup,
+  toggleButtonRecipe,
+  ToggleButton2 as ToggleButton
+};

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-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
+};