@xaui/native 0.9.1-alpha.32 → 0.9.1-alpha.34

package/dist/chunk-LZK77LFX.js

@@ -0,0 +1,198 @@
+import {
+  Slot,
+  childrenToString
+} from "./chunk-YXPYOOHU.js";
+import {
+  createRecipe,
+  radiusAxis
+} from "./chunk-4GTAZM2C.js";
+import {
+  useStyleProps
+} from "./chunk-MEYCZS32.js";
+import {
+  useXAUITheme
+} from "./chunk-A3EGFI6T.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-ZA6RT3XQ.js

@@ -0,0 +1,381 @@
+import { IconContext } from "./chunk-WJPQARJ5.js";
+import { Slot, childrenToString, createSlotContext } from "./chunk-YXPYOOHU.js";
+import { createRecipe, radiusAxis } from "./chunk-4GTAZM2C.js";
+import { useStyleProps } from "./chunk-MEYCZS32.js";
+import { useXAUITheme } from "./chunk-A3EGFI6T.js";
+
+// src/components/avatar/avatar-fallback.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { View } from "react-native";
+
+// src/components/avatar/avatar-initials.tsx
+import { forwardRef } from "react";
+import { Text } from "react-native";
+
+// src/components/avatar/avatar.context.ts
+var [AvatarProvider, useAvatar] = createSlotContext("Avatar");
+
+// src/components/avatar/avatar-initials.tsx
+import { jsx } from "react/jsx-runtime";
+var AvatarInitials = forwardRef(function AvatarInitials2({
+  children,
+  style,
+  ...props
+}, ref) {
+  const {
+    initialsStyle
+  } = useAvatar();
+  const [styleProps, rest] = useStyleProps(props);
+  return /* @__PURE__ */jsx(Text, {
+    ref,
+    accessibilityElementsHidden: true,
+    importantForAccessibility: "no",
+    numberOfLines: 1,
+    ...rest,
+    style: [initialsStyle, styleProps, style],
+    children
+  });
+});
+AvatarInitials.displayName = "XAUI.Avatar.Initials";
+
+// src/components/avatar/avatar-fallback.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var AvatarFallback = forwardRef2(function AvatarFallback2({
+  children,
+  style,
+  ...props
+}, ref) {
+  const {
+    fallbackStyle,
+    icon
+  } = useAvatar();
+  const [styleProps, rest] = useStyleProps(props);
+  const text = childrenToString(children);
+  const content = text !== null ? /* @__PURE__ */jsx2(AvatarInitials, {
+    children: text
+  }) : children;
+  return /* @__PURE__ */jsx2(View, {
+    ref,
+    style: [fallbackStyle, styleProps, style],
+    ...rest,
+    children: /* @__PURE__ */jsx2(IconContext.Provider, {
+      value: icon,
+      children: content
+    })
+  });
+});
+AvatarFallback.displayName = "XAUI.Avatar.Fallback";
+
+// src/components/avatar/avatar-image.tsx
+import { forwardRef as forwardRef3, useCallback } from "react";
+import { Image } from "react-native";
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
+
+// src/components/avatar/avatar.style.ts
+import { StyleSheet } from "react-native";
+var avatarSheet = StyleSheet.create({
+  image: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    start: 0,
+    end: 0
+  }
+});
+
+// src/components/avatar/avatar-image.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var FADE_DURATION = 200;
+var AvatarImage = forwardRef3(function AvatarImage2({
+  animation = true,
+  style,
+  ...props
+}, ref) {
+  const [styleProps, rest] = useStyleProps(props);
+  const frameStyle = [avatarSheet.image, styleProps, style];
+  if (!animation) return /* @__PURE__ */jsx3(Image, {
+    ref,
+    ...rest,
+    style: frameStyle
+  });
+  return /* @__PURE__ */jsx3(FadingImage, {
+    ref,
+    ...rest,
+    style: frameStyle
+  });
+});
+AvatarImage.displayName = "XAUI.Avatar.Image";
+const _worklet_9106607863565_init_data = {
+  code: "function chunkZA6RT3XQJs1(){const{opacity}=this.__closure;return{opacity:opacity.value};}",
+  location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-ZA6RT3XQ.js",
+  sourceMap: "{\"version\":3,\"names\":[\"chunkZA6RT3XQJs1\",\"opacity\",\"__closure\",\"value\"],\"sources\":[\"/home/runner/work/xaui/xaui/packages/native/dist/chunk-ZA6RT3XQ.js\"],\"mappings\":\"AAoG2C,SAAAA,gBAAMA,CAAA,QAAAC,OAAA,OAAAC,SAAA,CAE3C,MAAO,CAAED,OAAO,CAAEA,OAAO,CAACE,KAAM,CAAC,CACnC\",\"ignoreList\":[]}"
+};
+var FadingImage = forwardRef3(function FadingImage2({
+  onLoad,
+  style,
+  ...props
+}, ref) {
+  const opacity = useSharedValue(0);
+  const handleLoad = useCallback(event => {
+    opacity.value = withTiming(1, {
+      duration: FADE_DURATION
+    });
+    onLoad?.(event);
+  }, [opacity, onLoad]);
+  const animatedStyle = useAnimatedStyle(function chunkZA6RT3XQJs1Factory({
+    _worklet_9106607863565_init_data,
+    opacity
+  }) {
+    const _e = [new global.Error(), -2, -27];
+    const chunkZA6RT3XQJs1 = function () {
+      return {
+        opacity: opacity.value
+      };
+    };
+    chunkZA6RT3XQJs1.__closure = {
+      opacity
+    };
+    chunkZA6RT3XQJs1.__workletHash = 9106607863565;
+    chunkZA6RT3XQJs1.__pluginVersion = "0.7.4";
+    chunkZA6RT3XQJs1.__initData = _worklet_9106607863565_init_data;
+    chunkZA6RT3XQJs1.__stackDetails = _e;
+    return chunkZA6RT3XQJs1;
+  }({
+    _worklet_9106607863565_init_data,
+    opacity
+  }), [opacity]);
+  return /* @__PURE__ */jsx3(Animated.Image, {
+    ref,
+    ...props,
+    onLoad: handleLoad,
+    style: [style, animatedStyle]
+  });
+});
+
+// src/components/avatar/avatar.tsx
+import { forwardRef as forwardRef4, useMemo } from "react";
+import { StyleSheet as StyleSheet2, View as View2 } from "react-native";
+
+// src/components/avatar/avatar.recipe.ts
+var SLOTS = ["root", "fallback", "initials", "icon"];
+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 diameter = theme.spacing(step.diameter);
+    return {
+      root: {
+        width: diameter,
+        height: diameter
+      },
+      initials: {
+        fontSize: theme.fontSizes[step.initials],
+        lineHeight: theme.lineHeights[step.initials]
+      },
+      icon: {
+        fontSize: theme.fontSizes[step.glyph]
+      }
+    };
+  };
+}
+var SIZES = {
+  xs: {
+    diameter: 8,
+    initials: "xs",
+    glyph: "xs"
+  },
+  sm: {
+    diameter: 10,
+    initials: "xs",
+    glyph: "sm"
+  },
+  md: {
+    diameter: 12,
+    initials: "sm",
+    glyph: "md"
+  },
+  lg: {
+    diameter: 16,
+    initials: "md",
+    glyph: "xl"
+  }
+};
+var avatarRecipe = createRecipe({
+  slots: SLOTS,
+  base: theme => ({
+    root: {
+      alignItems: "center",
+      justifyContent: "center",
+      // The clip is what makes a square photo round, so unlike on the `Chip` it is not
+      // optional here: without it the image is a rectangle sitting over a circle.
+      overflow: "hidden",
+      // Squircle corners for when `radius` overrides the circle. Free on Android.
+      borderCurve: "continuous",
+      borderWidth: 0
+    },
+    fallback: {
+      width: "100%",
+      height: "100%",
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    initials: {
+      fontFamily: theme.fontFamilies.body,
+      fontWeight: theme.fontWeights.medium,
+      // Two letters in a circle sit off-centre by the descender otherwise.
+      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 to say it has
+   * no edge.
+   *
+   * The image takes no colour: it is a photograph, and tinting one is what `Icon`'s
+   * `source` form is for.
+   */
+  paint: (theme, colors) => ({
+    root: {
+      backgroundColor: colors.bg,
+      borderColor: colors.border,
+      borderWidth: colors.border ? theme.borderWidth.default : 0
+    },
+    initials: {
+      color: colors.fg
+    },
+    icon: {
+      color: colors.fg
+    }
+  }),
+  /** Declaration order is application order: `radius` overrides the circle `base` set. */
+  variants: {
+    size: {
+      xs: sizeAxis(SIZES.xs),
+      sm: sizeAxis(SIZES.sm),
+      md: sizeAxis(SIZES.md),
+      lg: sizeAxis(SIZES.lg)
+    },
+    radius: radiusAxis("root")
+  },
+  /**
+   * A circle at every size, where HeroUI fixes one large radius for all three — which
+   * makes their small avatars round and their large ones squircles. `full` says the shape
+   * the name means once, and `radius` is still there for the logo that wants a square.
+   */
+  defaultVariants: {
+    variant: "default",
+    size: "md",
+    radius: "full"
+  }
+});
+
+// src/components/avatar/avatar.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var AvatarRoot = forwardRef4(function Avatar({
+  children,
+  variant,
+  size,
+  radius,
+  color,
+  asChild = false,
+  style,
+  ...props
+}, ref) {
+  const theme = useXAUITheme();
+  const [styleProps, rest] = useStyleProps(props);
+  const selection = {
+    variant,
+    size,
+    radius
+  };
+  const styles = avatarRecipe.resolve({
+    theme,
+    selection
+  });
+  const tint = color ? avatarRecipe.tint({
+    theme,
+    color,
+    selection
+  }) : void 0;
+  const context = useMemo(() => {
+    const icon = StyleSheet2.flatten([styles.icon, tint?.icon]);
+    return {
+      fallbackStyle: styles.fallback,
+      initialsStyle: tint ? [styles.initials, tint.initials] : styles.initials,
+      icon: {
+        size: icon.fontSize,
+        // `ColorValue` also covers the platform's opaque colours, which `Icon` cannot
+        // hand to a third-party component expecting a string.
+        color: typeof icon.color === "string" ? icon.color : void 0
+      }
+    };
+  }, [styles, tint]);
+  const rootStyle = [styles.root, tint?.root, styleProps, style];
+  const text = childrenToString(children);
+  const content = text !== null ? /* @__PURE__ */jsx4(AvatarFallback, {
+    children: text
+  }) : children;
+  const Root = asChild ? Slot : View2;
+  return /* @__PURE__ */jsx4(AvatarProvider, {
+    value: context,
+    children: /* @__PURE__ */jsx4(Root, {
+      ref,
+      ...rest,
+      style: rootStyle,
+      children: asChild ? children : content
+    })
+  });
+});
+AvatarRoot.displayName = "XAUI.Avatar.Root";
+
+// src/components/avatar/index.ts
+var Avatar2 = Object.assign(AvatarRoot, {
+  Image: AvatarImage,
+  Fallback: AvatarFallback,
+  Initials: AvatarInitials
+});
+export { useAvatar, avatarRecipe, Avatar2 as Avatar };

package/dist/components/alert/index.cjs

@@ -4,10 +4,10 @@
 
 var _chunkK7LLERKTcjs = require('../../chunk-K7LLERKT.cjs');
 require('../../chunk-CYS6U374.cjs');
+require('../../chunk-PCWT2YBE.cjs');
 require('../../chunk-6M7RUU7V.cjs');
 require('../../chunk-7DPL3ZDS.cjs');
 require('../../chunk-EJQCQPET.cjs');
-require('../../chunk-PCWT2YBE.cjs');
 require('../../chunk-54FJOKAN.cjs');
 require('../../chunk-H4E4HDEP.cjs');
 require('../../chunk-FNEUOBCV.cjs');

package/dist/components/alert/index.js

@@ -4,10 +4,10 @@ import {
   useAlert
 } from "../../chunk-AYOVBZAX.js";
 import "../../chunk-U3RDU3HU.js";
+import "../../chunk-WJPQARJ5.js";
 import "../../chunk-XNNJM5DQ.js";
 import "../../chunk-423RQBOX.js";
 import "../../chunk-EGLLDKN6.js";
-import "../../chunk-WJPQARJ5.js";
 import "../../chunk-YXPYOOHU.js";
 import "../../chunk-36PRYGAM.js";
 import "../../chunk-4GTAZM2C.js";

package/dist/components/avatar/index.cjs

@@ -0,0 +1,17 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+
+
+var _chunkI66VMLHEcjs = require('../../chunk-I66VMLHE.cjs');
+require('../../chunk-PCWT2YBE.cjs');
+require('../../chunk-54FJOKAN.cjs');
+require('../../chunk-H4E4HDEP.cjs');
+require('../../chunk-FNEUOBCV.cjs');
+require('../../chunk-I6ZB3FZI.cjs');
+require('../../chunk-57SJ4LJF.cjs');
+require('../../chunk-MC7SY2QH.cjs');
+
+
+
+
+exports.Avatar = _chunkI66VMLHEcjs.Avatar; exports.avatarRecipe = _chunkI66VMLHEcjs.avatarRecipe; exports.useAvatar = _chunkI66VMLHEcjs.useAvatar;