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

package/dist/chunk-WYRM77XM.cjs

@@ -0,0 +1,411 @@
+"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 _chunkGSZDN6EZcjs = require('./chunk-GSZDN6EZ.cjs');
+var _chunkFHNIGHN5cjs = require('./chunk-FHNIGHN5.cjs');
+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/avatar/avatar-fallback.tsx
+var _react = require('react');
+var _reactnative = require('react-native');
+
+// src/components/avatar/avatar-initials.tsx
+
+// src/components/avatar/avatar.context.ts
+var [AvatarProvider, useAvatar] = _chunkCDRGTUYFcjs.createSlotContext.call(void 0, "Avatar");
+
+// src/components/avatar/avatar-initials.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var AvatarInitials = _react.forwardRef.call(void 0, function AvatarInitials2({
+  children,
+  style,
+  ...props
+}, ref) {
+  const {
+    initialsStyle
+  } = useAvatar();
+  const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+  return /* @__PURE__ */_jsxruntime.jsx.call(void 0, _reactnative.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
+
+var AvatarFallback = _react.forwardRef.call(void 0, function AvatarFallback2({
+  children,
+  style,
+  ...props
+}, ref) {
+  const {
+    fallbackStyle,
+    icon
+  } = useAvatar();
+  const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+  const text = _chunkFHNIGHN5cjs.childrenToString.call(void 0, children);
+  const content = text !== null ? /* @__PURE__ */_jsxruntime.jsx.call(void 0, AvatarInitials, {
+    children: text
+  }) : children;
+  return /* @__PURE__ */_jsxruntime.jsx.call(void 0, _reactnative.View, {
+    ref,
+    style: [fallbackStyle, styleProps, style],
+    ...rest,
+    children: /* @__PURE__ */_jsxruntime.jsx.call(void 0, _chunkGSZDN6EZcjs.IconContext.Provider, {
+      value: icon,
+      children: content
+    })
+  });
+});
+AvatarFallback.displayName = "XAUI.Avatar.Fallback";
+
+// src/components/avatar/avatar-image.tsx
+
+var _reactnativereanimated = require('react-native-reanimated');
+var _reactnativereanimated2 = _interopRequireDefault(_reactnativereanimated);
+
+// src/components/avatar/avatar.style.ts
+
+var avatarSheet = _reactnative.StyleSheet.create({
+  image: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    start: 0,
+    end: 0
+  }
+});
+
+// src/components/avatar/avatar-image.tsx
+
+var FADE_DURATION = 200;
+var AvatarImage = _react.forwardRef.call(void 0, function AvatarImage2({
+  animation = true,
+  style,
+  ...props
+}, ref) {
+  const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+  const frameStyle = [avatarSheet.image, styleProps, style];
+  if (!animation) return /* @__PURE__ */_jsxruntime.jsx.call(void 0, _reactnative.Image, {
+    ref,
+    ...rest,
+    style: frameStyle
+  });
+  return /* @__PURE__ */_jsxruntime.jsx.call(void 0, FadingImage, {
+    ref,
+    ...rest,
+    style: frameStyle
+  });
+});
+AvatarImage.displayName = "XAUI.Avatar.Image";
+const _worklet_10924181756987_init_data = {
+  code: "function chunkWYRM77XMCjs1(){const{opacity}=this.__closure;return{opacity:opacity.value};}",
+  location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-WYRM77XM.cjs",
+  sourceMap: "{\"version\":3,\"names\":[\"chunkWYRM77XMCjs1\",\"opacity\",\"__closure\",\"value\"],\"sources\":[\"/home/runner/work/xaui/xaui/packages/native/dist/chunk-WYRM77XM.cjs\"],\"mappings\":\"AAsG+E,SAAAA,iBAAMA,CAAA,QAAAC,OAAA,OAAAC,SAAA,CAE/E,MAAO,CAAED,OAAO,CAAEA,OAAO,CAACE,KAAM,CAAC,CACnC\",\"ignoreList\":[]}"
+};
+var FadingImage = _react.forwardRef.call(void 0, function FadingImage2({
+  onLoad,
+  style,
+  ...props
+}, ref) {
+  const opacity = _reactnativereanimated.useSharedValue.call(void 0, 0);
+  const handleLoad = _react.useCallback.call(void 0, event => {
+    opacity.value = _reactnativereanimated.withTiming.call(void 0, 1, {
+      duration: FADE_DURATION
+    });
+    _optionalChain([onLoad, 'optionalCall', _ => _(event)]);
+  }, [opacity, onLoad]);
+  const animatedStyle = _reactnativereanimated.useAnimatedStyle.call(void 0, function chunkWYRM77XMCjs1Factory({
+    _worklet_10924181756987_init_data,
+    opacity
+  }) {
+    const _e = [new global.Error(), -2, -27];
+    const chunkWYRM77XMCjs1 = function () {
+      return {
+        opacity: opacity.value
+      };
+    };
+    chunkWYRM77XMCjs1.__closure = {
+      opacity
+    };
+    chunkWYRM77XMCjs1.__workletHash = 10924181756987;
+    chunkWYRM77XMCjs1.__pluginVersion = "0.7.4";
+    chunkWYRM77XMCjs1.__initData = _worklet_10924181756987_init_data;
+    chunkWYRM77XMCjs1.__stackDetails = _e;
+    return chunkWYRM77XMCjs1;
+  }({
+    _worklet_10924181756987_init_data,
+    opacity
+  }), [opacity]);
+  return /* @__PURE__ */_jsxruntime.jsx.call(void 0, _reactnativereanimated2.default.Image, {
+    ref,
+    ...props,
+    onLoad: handleLoad,
+    style: [style, animatedStyle]
+  });
+});
+
+// src/components/avatar/avatar.tsx
+
+// 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 = _chunkSL3V7R2Ycjs.createRecipe.call(void 0, {
+  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: _chunkSL3V7R2Ycjs.radiusAxis.call(void 0, "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
+
+var AvatarRoot = _react.forwardRef.call(void 0, function Avatar({
+  children,
+  variant,
+  size,
+  radius,
+  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,
+    size,
+    radius
+  };
+  const styles = avatarRecipe.resolve({
+    theme,
+    selection
+  });
+  const tint = color ? avatarRecipe.tint({
+    theme,
+    color,
+    selection
+  }) : void 0;
+  const context = _react.useMemo.call(void 0, () => {
+    const icon = _reactnative.StyleSheet.flatten([styles.icon, _optionalChain([tint, 'optionalAccess', _2 => _2.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, _optionalChain([tint, 'optionalAccess', _3 => _3.root]), styleProps, style];
+  const text = _chunkFHNIGHN5cjs.childrenToString.call(void 0, children);
+  const content = text !== null ? /* @__PURE__ */_jsxruntime.jsx.call(void 0, AvatarFallback, {
+    children: text
+  }) : children;
+  const Root = asChild ? _chunkCDRGTUYFcjs.Slot : _reactnative.View;
+  return /* @__PURE__ */_jsxruntime.jsx.call(void 0, AvatarProvider, {
+    value: context,
+    children: /* @__PURE__ */_jsxruntime.jsx.call(void 0, 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
+});
+exports.useAvatar = useAvatar;
+exports.avatarRecipe = avatarRecipe;
+exports.Avatar = Avatar2;