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

package/dist/chunk-UFTCTTKK.js

@@ -0,0 +1,381 @@
+import { IconContext } from "./chunk-FHUYHV6J.js";
+import { createRecipe, radiusAxis } from "./chunk-4GTAZM2C.js";
+import { useXAUITheme } from "./chunk-A3EGFI6T.js";
+import { Slot, childrenToString, createSlotContext } from "./chunk-K72UDPVN.js";
+import { useStyleProps } from "./chunk-M63GFNKV.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_11788124035832_init_data = {
+  code: "function chunkUFTCTTKKJs1(){const{opacity}=this.__closure;return{opacity:opacity.value};}",
+  location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-UFTCTTKK.js",
+  sourceMap: "{\"version\":3,\"names\":[\"chunkUFTCTTKKJs1\",\"opacity\",\"__closure\",\"value\"],\"sources\":[\"/home/runner/work/xaui/xaui/packages/native/dist/chunk-UFTCTTKK.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 chunkUFTCTTKKJs1Factory({
+    _worklet_11788124035832_init_data,
+    opacity
+  }) {
+    const _e = [new global.Error(), -2, -27];
+    const chunkUFTCTTKKJs1 = function () {
+      return {
+        opacity: opacity.value
+      };
+    };
+    chunkUFTCTTKKJs1.__closure = {
+      opacity
+    };
+    chunkUFTCTTKKJs1.__workletHash = 11788124035832;
+    chunkUFTCTTKKJs1.__pluginVersion = "0.7.4";
+    chunkUFTCTTKKJs1.__initData = _worklet_11788124035832_init_data;
+    chunkUFTCTTKKJs1.__stackDetails = _e;
+    return chunkUFTCTTKKJs1;
+  }({
+    _worklet_11788124035832_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 };