@xaui/native 0.9.1-alpha.4 → 0.9.1-alpha.40

package/dist/chunk-H7DS4IO7.js

@@ -0,0 +1,198 @@
+import {
+  createRecipe,
+  radiusAxis
+} from "./chunk-4GTAZM2C.js";
+import {
+  useXAUITheme
+} from "./chunk-A3EGFI6T.js";
+import {
+  Slot,
+  childrenToString
+} from "./chunk-K72UDPVN.js";
+import {
+  useStyleProps
+} from "./chunk-M63GFNKV.js";
+
+// src/components/badge/badge.tsx
+import { forwardRef, useMemo } from "react";
+import { Text, View } from "react-native";
+
+// src/components/badge/badge.recipe.ts
+var SLOTS = ["root", "label"];
+var VARIANT_TOKENS = {
+  primary: { bg: "accent", fg: "accentForeground" },
+  secondary: { bg: "accentSoft", fg: "accentSoftForeground" },
+  default: { bg: "default", fg: "defaultForeground" },
+  tertiary: { border: "border", fg: "foreground" },
+  ghost: { fg: "foreground" },
+  success: { bg: "success", fg: "successForeground" },
+  "success-soft": { bg: "successSoft", fg: "successSoftForeground" },
+  warning: { bg: "warning", fg: "warningForeground" },
+  "warning-soft": { bg: "warningSoft", fg: "warningSoftForeground" },
+  danger: { bg: "danger", fg: "dangerForeground" },
+  "danger-soft": { bg: "dangerSoft", fg: "dangerSoftForeground" }
+};
+function sizeAxis(step) {
+  return (theme) => {
+    const height = theme.spacing(step.height);
+    return {
+      root: {
+        height,
+        minWidth: height,
+        paddingHorizontal: theme.spacing(step.padding)
+      },
+      label: { fontSize: theme.fontSizes[step.label] }
+    };
+  };
+}
+function dotAxis(diameter) {
+  return (theme) => {
+    const size = theme.spacing(diameter);
+    return {
+      root: { height: size, width: size, minWidth: size, paddingHorizontal: 0 }
+    };
+  };
+}
+var BADGE_DEFAULT_SIZE = "md";
+var SIZES = {
+  xs: { height: 4, padding: 1.25, label: "xs", dot: 1.5 },
+  sm: { height: 4.5, padding: 1.5, label: "xs", dot: 2 },
+  md: { height: 5, padding: 1.5, label: "xs", dot: 2.5 },
+  lg: { height: 6, padding: 2, label: "sm", dot: 3 }
+};
+function badgeOffset(theme, size, isDot) {
+  const step = SIZES[size];
+  return theme.spacing(isDot ? step.dot : step.height) / 2;
+}
+var badgeRecipe = createRecipe({
+  slots: SLOTS,
+  base: (theme) => ({
+    root: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      borderWidth: 0,
+      // The capsule at every size, which is what makes a two-digit count read as one
+      // object. `radius` is still there for the square marker.
+      borderRadius: theme.radius.full,
+      // Squircle corners for when `radius` overrides the pill. Free on Android.
+      borderCurve: "continuous"
+    },
+    label: {
+      fontFamily: theme.fontFamilies.body,
+      fontWeight: theme.fontWeights.semibold,
+      // Android reserves leading above and below the glyphs, which in a 16pt box is the
+      // difference between a centred digit and one sitting low.
+      includeFontPadding: false,
+      // No `lineHeight`: the scale's leading is taller than the box at every size here,
+      // and the root centres the label anyway.
+      textAlign: "center"
+    }
+  }),
+  variantTokens: VARIANT_TOKENS,
+  /**
+   * Where the variant's colours land, for every variant at once. The border width follows
+   * the *presence* of the border role, so `ghost` needs no rule of its own.
+   */
+  paint: (theme, colors) => ({
+    root: {
+      backgroundColor: colors.bg,
+      borderColor: colors.border,
+      borderWidth: colors.border ? theme.borderWidth.default : 0
+    },
+    label: { color: colors.fg }
+  }),
+  /** Declaration order is application order: `dot` overrides the box `size` set, and
+   *  `radius` overrides the capsule from `base`. */
+  variants: {
+    size: {
+      xs: sizeAxis(SIZES.xs),
+      sm: sizeAxis(SIZES.sm),
+      md: sizeAxis(SIZES.md),
+      lg: sizeAxis(SIZES.lg)
+    },
+    /**
+     * The same four keys as `size`, and the root selects it with the resolved size when
+     * `isDot` is set and with nothing when it is not — an axis left unselected contributes
+     * nothing, which is exactly "this badge has a label". A `{ true, false }` axis would
+     * have needed a `false` branch with nothing to say, and a `size × isDot` compound
+     * would have been sixteen entries for four measurements.
+     */
+    dot: {
+      xs: dotAxis(SIZES.xs.dot),
+      sm: dotAxis(SIZES.sm.dot),
+      md: dotAxis(SIZES.md.dot),
+      lg: dotAxis(SIZES.lg.dot)
+    },
+    radius: radiusAxis("root")
+  },
+  /**
+   * `danger`, where every other component in the library defaults to the first name in its
+   * ladder. A badge is overwhelmingly the count of something that wants attention — unread,
+   * failed, overdue — and a red one is what `<Badge>3</Badge>` means. The accent count is a
+   * `variant` away.
+   */
+  defaultVariants: { variant: "danger", size: BADGE_DEFAULT_SIZE }
+});
+
+// src/components/badge/badge.utils.ts
+function placementInsets(placement, offset) {
+  if (!placement) return void 0;
+  const vertical = placement.startsWith("top") ? { top: -offset } : { bottom: -offset };
+  const horizontal = placement.endsWith("start") ? { start: -offset } : { end: -offset };
+  return { position: "absolute", ...vertical, ...horizontal };
+}
+
+// src/components/badge/badge.tsx
+import { jsx } from "react/jsx-runtime";
+var Badge = forwardRef(function Badge2({
+  children,
+  variant,
+  size,
+  radius,
+  color,
+  isDot = false,
+  placement,
+  asChild = false,
+  style,
+  ...props
+}, ref) {
+  const theme = useXAUITheme();
+  const [styleProps, rest] = useStyleProps(props);
+  const resolvedSize = size ?? BADGE_DEFAULT_SIZE;
+  const selection = {
+    variant,
+    size,
+    radius,
+    // An axis left unselected contributes nothing, which is exactly "this badge has a
+    // label" — no `false` branch with nothing to say.
+    dot: isDot ? resolvedSize : void 0
+  };
+  const styles = badgeRecipe.resolve({ theme, selection });
+  const tint = color ? badgeRecipe.tint({ theme, color, selection }) : void 0;
+  const insets = useMemo(
+    () => placementInsets(placement, badgeOffset(theme, resolvedSize, isDot)),
+    [placement, theme, resolvedSize, isDot]
+  );
+  const rootStyle = [styles.root, tint?.root, insets, styleProps, style];
+  const text = childrenToString(children);
+  const label = text !== null ? /* @__PURE__ */ jsx(Text, { style: [styles.label, tint?.label], numberOfLines: 1, children: text }) : children;
+  const content = isDot ? null : label;
+  const Root = asChild ? Slot : View;
+  return /* @__PURE__ */ jsx(
+    Root,
+    {
+      ref,
+      ...rest,
+      style: rootStyle,
+      children: asChild ? children : content
+    }
+  );
+});
+Badge.displayName = "XAUI.Badge";
+
+export {
+  badgeRecipe,
+  placementInsets,
+  Badge
+};

package/dist/chunk-HDVVZG4S.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 _chunkFNEUOBCVcjs = require('./chunk-FNEUOBCV.cjs');
+
+
+var _chunk57SJ4LJFcjs = require('./chunk-57SJ4LJF.cjs');
+
+
+
+var _chunk7GHM4GKLcjs = require('./chunk-7GHM4GKL.cjs');
+
+
+var _chunkTK44VBIEcjs = require('./chunk-TK44VBIE.cjs');
+
+// src/components/badge/badge.tsx
+var _react = require('react');
+var _reactnative = require('react-native');
+
+// src/components/badge/badge.recipe.ts
+var SLOTS = ["root", "label"];
+var VARIANT_TOKENS = {
+  primary: { bg: "accent", fg: "accentForeground" },
+  secondary: { bg: "accentSoft", fg: "accentSoftForeground" },
+  default: { bg: "default", fg: "defaultForeground" },
+  tertiary: { border: "border", fg: "foreground" },
+  ghost: { fg: "foreground" },
+  success: { bg: "success", fg: "successForeground" },
+  "success-soft": { bg: "successSoft", fg: "successSoftForeground" },
+  warning: { bg: "warning", fg: "warningForeground" },
+  "warning-soft": { bg: "warningSoft", fg: "warningSoftForeground" },
+  danger: { bg: "danger", fg: "dangerForeground" },
+  "danger-soft": { bg: "dangerSoft", fg: "dangerSoftForeground" }
+};
+function sizeAxis(step) {
+  return (theme) => {
+    const height = theme.spacing(step.height);
+    return {
+      root: {
+        height,
+        minWidth: height,
+        paddingHorizontal: theme.spacing(step.padding)
+      },
+      label: { fontSize: theme.fontSizes[step.label] }
+    };
+  };
+}
+function dotAxis(diameter) {
+  return (theme) => {
+    const size = theme.spacing(diameter);
+    return {
+      root: { height: size, width: size, minWidth: size, paddingHorizontal: 0 }
+    };
+  };
+}
+var BADGE_DEFAULT_SIZE = "md";
+var SIZES = {
+  xs: { height: 4, padding: 1.25, label: "xs", dot: 1.5 },
+  sm: { height: 4.5, padding: 1.5, label: "xs", dot: 2 },
+  md: { height: 5, padding: 1.5, label: "xs", dot: 2.5 },
+  lg: { height: 6, padding: 2, label: "sm", dot: 3 }
+};
+function badgeOffset(theme, size, isDot) {
+  const step = SIZES[size];
+  return theme.spacing(isDot ? step.dot : step.height) / 2;
+}
+var badgeRecipe = _chunkFNEUOBCVcjs.createRecipe.call(void 0, {
+  slots: SLOTS,
+  base: (theme) => ({
+    root: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      borderWidth: 0,
+      // The capsule at every size, which is what makes a two-digit count read as one
+      // object. `radius` is still there for the square marker.
+      borderRadius: theme.radius.full,
+      // Squircle corners for when `radius` overrides the pill. Free on Android.
+      borderCurve: "continuous"
+    },
+    label: {
+      fontFamily: theme.fontFamilies.body,
+      fontWeight: theme.fontWeights.semibold,
+      // Android reserves leading above and below the glyphs, which in a 16pt box is the
+      // difference between a centred digit and one sitting low.
+      includeFontPadding: false,
+      // No `lineHeight`: the scale's leading is taller than the box at every size here,
+      // and the root centres the label anyway.
+      textAlign: "center"
+    }
+  }),
+  variantTokens: VARIANT_TOKENS,
+  /**
+   * Where the variant's colours land, for every variant at once. The border width follows
+   * the *presence* of the border role, so `ghost` needs no rule of its own.
+   */
+  paint: (theme, colors) => ({
+    root: {
+      backgroundColor: colors.bg,
+      borderColor: colors.border,
+      borderWidth: colors.border ? theme.borderWidth.default : 0
+    },
+    label: { color: colors.fg }
+  }),
+  /** Declaration order is application order: `dot` overrides the box `size` set, and
+   *  `radius` overrides the capsule from `base`. */
+  variants: {
+    size: {
+      xs: sizeAxis(SIZES.xs),
+      sm: sizeAxis(SIZES.sm),
+      md: sizeAxis(SIZES.md),
+      lg: sizeAxis(SIZES.lg)
+    },
+    /**
+     * The same four keys as `size`, and the root selects it with the resolved size when
+     * `isDot` is set and with nothing when it is not — an axis left unselected contributes
+     * nothing, which is exactly "this badge has a label". A `{ true, false }` axis would
+     * have needed a `false` branch with nothing to say, and a `size × isDot` compound
+     * would have been sixteen entries for four measurements.
+     */
+    dot: {
+      xs: dotAxis(SIZES.xs.dot),
+      sm: dotAxis(SIZES.sm.dot),
+      md: dotAxis(SIZES.md.dot),
+      lg: dotAxis(SIZES.lg.dot)
+    },
+    radius: _chunkFNEUOBCVcjs.radiusAxis.call(void 0, "root")
+  },
+  /**
+   * `danger`, where every other component in the library defaults to the first name in its
+   * ladder. A badge is overwhelmingly the count of something that wants attention — unread,
+   * failed, overdue — and a red one is what `<Badge>3</Badge>` means. The accent count is a
+   * `variant` away.
+   */
+  defaultVariants: { variant: "danger", size: BADGE_DEFAULT_SIZE }
+});
+
+// src/components/badge/badge.utils.ts
+function placementInsets(placement, offset) {
+  if (!placement) return void 0;
+  const vertical = placement.startsWith("top") ? { top: -offset } : { bottom: -offset };
+  const horizontal = placement.endsWith("start") ? { start: -offset } : { end: -offset };
+  return { position: "absolute", ...vertical, ...horizontal };
+}
+
+// src/components/badge/badge.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var Badge = _react.forwardRef.call(void 0, function Badge2({
+  children,
+  variant,
+  size,
+  radius,
+  color,
+  isDot = false,
+  placement,
+  asChild = false,
+  style,
+  ...props
+}, ref) {
+  const theme = _chunk57SJ4LJFcjs.useXAUITheme.call(void 0, );
+  const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+  const resolvedSize = _nullishCoalesce(size, () => ( BADGE_DEFAULT_SIZE));
+  const selection = {
+    variant,
+    size,
+    radius,
+    // An axis left unselected contributes nothing, which is exactly "this badge has a
+    // label" — no `false` branch with nothing to say.
+    dot: isDot ? resolvedSize : void 0
+  };
+  const styles = badgeRecipe.resolve({ theme, selection });
+  const tint = color ? badgeRecipe.tint({ theme, color, selection }) : void 0;
+  const insets = _react.useMemo.call(void 0, 
+    () => placementInsets(placement, badgeOffset(theme, resolvedSize, isDot)),
+    [placement, theme, resolvedSize, isDot]
+  );
+  const rootStyle = [styles.root, _optionalChain([tint, 'optionalAccess', _ => _.root]), insets, styleProps, style];
+  const text = _chunk7GHM4GKLcjs.childrenToString.call(void 0, children);
+  const label = text !== null ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactnative.Text, { style: [styles.label, _optionalChain([tint, 'optionalAccess', _2 => _2.label])], numberOfLines: 1, children: text }) : children;
+  const content = isDot ? null : label;
+  const Root = asChild ? _chunk7GHM4GKLcjs.Slot : _reactnative.View;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    Root,
+    {
+      ref,
+      ...rest,
+      style: rootStyle,
+      children: asChild ? children : content
+    }
+  );
+});
+Badge.displayName = "XAUI.Badge";
+
+
+
+
+
+exports.badgeRecipe = badgeRecipe; exports.placementInsets = placementInsets; exports.Badge = Badge;

package/dist/chunk-IKJVLJKT.js

@@ -0,0 +1,151 @@
+import { createRecipe, radiusAxis } from "./chunk-4GTAZM2C.js";
+import { useXAUITheme } from "./chunk-A3EGFI6T.js";
+import { useStyleProps } from "./chunk-M63GFNKV.js";
+
+// src/components/skeleton/skeleton.tsx
+import { forwardRef, useEffect } from "react";
+import { View } from "react-native";
+import Animated, { Easing, cancelAnimation, useAnimatedStyle, useSharedValue, withRepeat, withTiming } from "react-native-reanimated";
+
+// src/components/skeleton/skeleton.recipe.ts
+var SLOTS = ["root"];
+var VARIANT_TOKENS = {
+  default: {
+    bg: "default"
+  }
+};
+var skeletonRecipe = createRecipe({
+  slots: SLOTS,
+  base: () => ({
+    // Squircle corners, free on Android and what keeps a `full` radius from reading as a
+    // stadium at small sizes. Nothing else: a skeleton has no size of its own — see the
+    // component for why R14 is the whole sizing API here.
+    root: {
+      borderCurve: "continuous"
+    }
+  }),
+  variantTokens: VARIANT_TOKENS,
+  paint: (_theme, colors) => ({
+    root: {
+      backgroundColor: colors.bg
+    }
+  }),
+  variants: {
+    radius: radiusAxis("root")
+  },
+  /**
+   * `md` is the block, and `full` is what an avatar placeholder passes. There is no `size`
+   * default because there is no `size`: the caller gives the block its dimensions with
+   * R14's `width` and `height`, because only they know the shape of the thing that is
+   * missing.
+   */
+  /**
+   * `variant` is named here and nowhere else: there is one, the caller cannot choose it,
+   * and the recipe still needs it selected for `paint` and the tint to resolve.
+   */
+  defaultVariants: {
+    variant: "default",
+    radius: "md"
+  }
+});
+
+// src/components/skeleton/skeleton.tsx
+import { Fragment, jsx } from "react/jsx-runtime";
+var PULSE_DURATION = 1e3;
+var PULSE_MIN_OPACITY = 0.5;
+var Skeleton = forwardRef(function Skeleton2({
+  radius,
+  color,
+  isLoading = true,
+  animation = true,
+  children,
+  style,
+  ...props
+}, ref) {
+  const theme = useXAUITheme();
+  const [styleProps, rest] = useStyleProps(props);
+  const selection = {
+    radius
+  };
+  const styles = skeletonRecipe.resolve({
+    theme,
+    selection
+  });
+  const tint = color ? skeletonRecipe.tint({
+    theme,
+    color,
+    selection
+  }) : void 0;
+  if (!isLoading) return /* @__PURE__ */jsx(Fragment, {
+    children
+  });
+  const blockProps = {
+    // A block stands in for content that is not there. Announcing its absence is `busy`
+    // on whatever region is loading, not a stop on each rectangle. Both stay overridable
+    // (R9) for the caller whose skeleton really is the whole screen.
+    accessibilityElementsHidden: true,
+    importantForAccessibility: "no-hide-descendants",
+    ...rest
+  };
+  const blockStyle = [styles.root, tint?.root, styleProps, style];
+  if (!animation) return /* @__PURE__ */jsx(View, {
+    ref,
+    ...blockProps,
+    style: blockStyle
+  });
+  return /* @__PURE__ */jsx(PulsingBlock, {
+    ref,
+    ...blockProps,
+    style: blockStyle
+  });
+});
+Skeleton.displayName = "XAUI.Skeleton";
+const _worklet_948977267547_init_data = {
+  code: "function chunkIKJVLJKTJs1(){const{opacity}=this.__closure;return{opacity:opacity.value};}",
+  location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-IKJVLJKT.js",
+  sourceMap: "{\"version\":3,\"names\":[\"chunkIKJVLJKTJs1\",\"opacity\",\"__closure\",\"value\"],\"sources\":[\"/home/runner/work/xaui/xaui/packages/native/dist/chunk-IKJVLJKT.js\"],\"mappings\":\"AAyF2C,SAAAA,gBAAMA,CAAA,QAAAC,OAAA,OAAAC,SAAA,CAE3C,MAAO,CAAED,OAAO,CAAEA,OAAO,CAACE,KAAM,CAAC,CACnC\",\"ignoreList\":[]}"
+};
+var PulsingBlock = forwardRef(function PulsingBlock2({
+  style,
+  ...props
+}, ref) {
+  const opacity = useSharedValue(1);
+  useEffect(() => {
+    opacity.value = withRepeat(withTiming(PULSE_MIN_OPACITY, {
+      duration: PULSE_DURATION,
+      easing: Easing.inOut(Easing.ease)
+    }), -1,
+    // Reversed, so the block breathes rather than snapping back to full at each turn.
+    true);
+    return () => cancelAnimation(opacity);
+  }, [opacity]);
+  const animatedStyle = useAnimatedStyle(function chunkIKJVLJKTJs1Factory({
+    _worklet_948977267547_init_data,
+    opacity
+  }) {
+    const _e = [new global.Error(), -2, -27];
+    const chunkIKJVLJKTJs1 = function () {
+      return {
+        opacity: opacity.value
+      };
+    };
+    chunkIKJVLJKTJs1.__closure = {
+      opacity
+    };
+    chunkIKJVLJKTJs1.__workletHash = 948977267547;
+    chunkIKJVLJKTJs1.__pluginVersion = "0.7.4";
+    chunkIKJVLJKTJs1.__initData = _worklet_948977267547_init_data;
+    chunkIKJVLJKTJs1.__stackDetails = _e;
+    return chunkIKJVLJKTJs1;
+  }({
+    _worklet_948977267547_init_data,
+    opacity
+  }), [opacity]);
+  return /* @__PURE__ */jsx(Animated.View, {
+    ref,
+    ...props,
+    style: [style, animatedStyle]
+  });
+});
+PulsingBlock.displayName = "XAUI.Skeleton.Block";
+export { skeletonRecipe, Skeleton };