@xaui/native 0.0.10 → 0.0.11

package/dist/autocomplete/index.js

@@ -1,9 +1,9 @@
 import {
   Autocomplete,
   AutocompleteItem
-} from "../chunk-SVYTCEGB.js";
-import "../chunk-GBHQCAKW.js";
+} from "../chunk-W7JJVPK5.js";
 import "../chunk-RE3CO277.js";
+import "../chunk-GBHQCAKW.js";
 import "../chunk-SIXET7TJ.js";
 import "../chunk-NBRASCX4.js";
 export {

package/dist/avatar/index.cjs

@@ -0,0 +1,355 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/avatar/index.ts
+var avatar_exports = {};
+__export(avatar_exports, {
+  Avatar: () => Avatar,
+  AvatarGroup: () => AvatarGroup
+});
+module.exports = __toCommonJS(avatar_exports);
+
+// src/components/avatar/avatar.tsx
+var import_react7 = __toESM(require("react"), 1);
+var import_react_native5 = require("react-native");
+
+// src/components/avatar/avatar.style.ts
+var import_react_native = require("react-native");
+var styles = import_react_native.StyleSheet.create({
+  container: {
+    overflow: "hidden",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  image: {
+    width: "100%",
+    height: "100%"
+  },
+  fallback: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  group: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  grid: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "flex-start"
+  }
+});
+
+// src/components/avatar/avatar.hook.ts
+var import_react6 = require("react");
+var import_core = require("@xaui/core");
+
+// src/core/theme-context.tsx
+var import_react4 = __toESM(require("react"), 1);
+var import_react_native3 = require("react-native");
+var import_theme = require("@xaui/core/theme");
+var import_palette = require("@xaui/core/palette");
+
+// src/core/portal/portal.tsx
+var import_react2 = require("react");
+
+// src/core/portal/portal-context.ts
+var import_react = require("react");
+var PortalContext = (0, import_react.createContext)(null);
+
+// src/core/portal/portal-host.tsx
+var import_react3 = __toESM(require("react"), 1);
+var import_react_native2 = require("react-native");
+var hostStyles = import_react_native2.StyleSheet.create({
+  container: {
+    flex: 1
+  }
+});
+
+// src/core/theme-context.tsx
+var XUIThemeContext = (0, import_react4.createContext)(null);
+
+// src/core/theme-hooks.ts
+var import_react5 = require("react");
+var import_react_native4 = require("react-native");
+function useXUITheme() {
+  const theme = (0, import_react5.useContext)(XUIThemeContext);
+  if (!theme) {
+    throw new Error("useXUITheme must be used within XUIProvider");
+  }
+  return theme;
+}
+
+// src/core/index.ts
+var import_theme2 = require("@xaui/core/theme");
+
+// src/components/avatar/avatar.hook.ts
+var sizeMap = {
+  xs: 24,
+  sm: 32,
+  md: 40,
+  lg: 48
+};
+function resolveAvatarSize(size) {
+  if (typeof size === "number") {
+    return size;
+  }
+  return sizeMap[size];
+}
+function useAvatarSizeStyles(size) {
+  const theme = useXUITheme();
+  const resolvedSize = (0, import_react6.useMemo)(() => resolveAvatarSize(size), [size]);
+  const fontSize = (0, import_react6.useMemo)(() => {
+    if (typeof size === "number") {
+      return Math.max(10, Math.round(size * 0.4));
+    }
+    return theme.fontSizes[size];
+  }, [size, theme]);
+  return {
+    size: resolvedSize,
+    fontSize
+  };
+}
+function useAvatarRadiusStyles(radius, size) {
+  const theme = useXUITheme();
+  return (0, import_react6.useMemo)(() => {
+    if (radius === "full") {
+      return { borderRadius: size / 2 };
+    }
+    const radii = {
+      none: theme.borderRadius.none,
+      sm: theme.borderRadius.sm,
+      md: theme.borderRadius.md,
+      lg: theme.borderRadius.lg,
+      full: theme.borderRadius.full
+    };
+    return { borderRadius: radii[radius] };
+  }, [radius, size, theme]);
+}
+function useAvatarColors(themeColor, isDisabled) {
+  const theme = useXUITheme();
+  const safeThemeColor = (0, import_core.getSafeThemeColor)(themeColor);
+  const colorScheme = theme.colors[safeThemeColor];
+  const backgroundColor = (0, import_react6.useMemo)(() => {
+    if (isDisabled) {
+      return theme.colors.background;
+    }
+    return colorScheme.background;
+  }, [colorScheme.background, isDisabled, theme.colors.background]);
+  const textColor = (0, import_react6.useMemo)(() => {
+    if (safeThemeColor === "default") {
+      return theme.colors.foreground;
+    }
+    return colorScheme.main;
+  }, [safeThemeColor, colorScheme.main, theme.colors.foreground]);
+  return {
+    backgroundColor,
+    textColor,
+    borderColor: colorScheme.main
+  };
+}
+function getDefaultInitials(name) {
+  const trimmed = name.trim();
+  if (!trimmed) {
+    return "";
+  }
+  const parts = trimmed.split(/\s+/);
+  if (parts.length === 1) {
+    return parts[0].slice(0, 2).toUpperCase();
+  }
+  return `${parts[0][0]}${parts[parts.length - 1][0]}`.toUpperCase();
+}
+
+// src/components/avatar/avatar.tsx
+var Avatar = ({
+  src,
+  name,
+  icon,
+  fallback,
+  size = "md",
+  radius = "full",
+  themeColor = "default",
+  isBordered = false,
+  isDisabled = false,
+  showFallback = false,
+  getInitials,
+  customAppearance
+}) => {
+  const [isError, setIsError] = import_react7.default.useState(false);
+  const { size: resolvedSize, fontSize } = useAvatarSizeStyles(size);
+  const radiusStyles = useAvatarRadiusStyles(radius, resolvedSize);
+  const { backgroundColor, textColor, borderColor } = useAvatarColors(
+    themeColor,
+    isDisabled
+  );
+  const accessibilityLabel = name ?? "Avatar";
+  const shouldShowFallback = showFallback || !src || isError;
+  const initials = name ? (getInitials ?? getDefaultInitials)(name) : "";
+  return /* @__PURE__ */ import_react7.default.createElement(
+    import_react_native5.View,
+    {
+      style: [
+        styles.container,
+        {
+          width: resolvedSize,
+          height: resolvedSize,
+          backgroundColor,
+          opacity: isDisabled ? 0.6 : 1,
+          borderWidth: isBordered ? 1 : 0,
+          borderColor: isBordered ? borderColor : "transparent"
+        },
+        radiusStyles,
+        customAppearance?.container
+      ],
+      accessible: true,
+      accessibilityRole: "image",
+      accessibilityLabel
+    },
+    !shouldShowFallback && src ? /* @__PURE__ */ import_react7.default.createElement(
+      import_react_native5.Image,
+      {
+        source: { uri: src },
+        style: [styles.image, radiusStyles, customAppearance?.image],
+        accessibilityLabel,
+        onError: () => setIsError(true)
+      }
+    ) : /* @__PURE__ */ import_react7.default.createElement(import_react_native5.View, { style: [styles.fallback, { width: "100%", height: "100%" }] }, fallback ?? icon ?? /* @__PURE__ */ import_react7.default.createElement(
+      import_react_native5.Text,
+      {
+        style: [
+          {
+            color: textColor,
+            fontSize,
+            fontWeight: "600"
+          },
+          customAppearance?.text
+        ]
+      },
+      initials
+    ))
+  );
+};
+
+// src/components/avatar/avatar-group.tsx
+var import_react8 = __toESM(require("react"), 1);
+var import_react_native6 = require("react-native");
+var AvatarGroup = ({
+  children,
+  max,
+  total,
+  size = "md",
+  radius = "full",
+  themeColor = "default",
+  isBordered = false,
+  isDisabled = false,
+  isGrid = false,
+  renderCount,
+  customAppearance
+}) => {
+  const theme = useXUITheme();
+  const resolvedSize = resolveAvatarSize(size);
+  const spacing = theme.spacing.xs;
+  const overlap = Math.round(resolvedSize * 0.28);
+  const allChildren = import_react8.default.Children.toArray(children).filter(
+    (child) => import_react8.default.isValidElement(child)
+  );
+  const totalCount = total ?? allChildren.length;
+  const maxCount = max ?? totalCount;
+  const visibleChildren = allChildren.slice(0, maxCount);
+  const remaining = Math.max(0, totalCount - maxCount);
+  const enhanced = visibleChildren.map((child, index) => {
+    const childProps = child.props;
+    return /* @__PURE__ */ import_react8.default.createElement(
+      import_react_native6.View,
+      {
+        key: child.key ?? index,
+        style: isGrid ? { marginRight: spacing, marginBottom: spacing } : { marginLeft: index === 0 ? 0 : -overlap, zIndex: index }
+      },
+      import_react8.default.cloneElement(child, {
+        size: childProps.size ?? size,
+        radius: childProps.radius ?? radius,
+        themeColor: childProps.themeColor ?? themeColor,
+        isBordered: childProps.isBordered ?? isBordered,
+        isDisabled: childProps.isDisabled ?? isDisabled
+      })
+    );
+  });
+  const countNode = remaining > 0 ? renderCount?.(remaining) ?? /* @__PURE__ */ import_react8.default.createElement(
+    Avatar,
+    {
+      name: `+${remaining}`,
+      showFallback: true,
+      size,
+      radius,
+      themeColor,
+      isBordered,
+      isDisabled,
+      fallback: /* @__PURE__ */ import_react8.default.createElement(
+        import_react_native6.Text,
+        {
+          style: {
+            color: theme.colors.foreground,
+            fontSize: Math.max(10, Math.round(resolvedSize * 0.35)),
+            fontWeight: "600"
+          }
+        },
+        "+",
+        remaining
+      )
+    }
+  ) : null;
+  if (countNode) {
+    enhanced.push(
+      /* @__PURE__ */ import_react8.default.createElement(
+        import_react_native6.View,
+        {
+          key: "avatar-count",
+          style: isGrid ? { marginRight: spacing, marginBottom: spacing } : {
+            marginLeft: enhanced.length === 0 ? 0 : -overlap,
+            zIndex: enhanced.length
+          }
+        },
+        countNode
+      )
+    );
+  }
+  return /* @__PURE__ */ import_react8.default.createElement(
+    import_react_native6.View,
+    {
+      style: [isGrid ? styles.grid : styles.group, customAppearance?.container],
+      accessible: true
+    },
+    enhanced
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Avatar,
+  AvatarGroup
+});

package/dist/avatar/index.d.cts

@@ -0,0 +1,123 @@
+import React, { ReactNode } from 'react';
+import { ViewStyle, ImageStyle, TextStyle } from 'react-native';
+import { S as Size, R as Radius, T as ThemeColor } from '../index-BOw6tbkc.cjs';
+
+type AvatarSize = Size | number;
+type AvatarCustomAppearance = {
+    /**
+     * Custom styles for the container
+     */
+    container?: ViewStyle;
+    /**
+     * Custom styles for the image
+     */
+    image?: ImageStyle;
+    /**
+     * Custom styles for the fallback text
+     */
+    text?: TextStyle;
+};
+type AvatarProps = {
+    /**
+     * Avatar image source URL.
+     */
+    src?: string;
+    /**
+     * Avatar name used for initials fallback.
+     */
+    name?: string;
+    /**
+     * Custom icon rendered when no image is available.
+     */
+    icon?: ReactNode;
+    /**
+     * Custom fallback rendered when no image is available.
+     */
+    fallback?: ReactNode;
+    /**
+     * Avatar size preset or custom number.
+     * @default 'md'
+     */
+    size?: AvatarSize;
+    /**
+     * Avatar radius.
+     * @default 'full'
+     */
+    radius?: Radius;
+    /**
+     * Theme color for avatar background and text.
+     */
+    themeColor?: ThemeColor;
+    /**
+     * Show border around avatar.
+     */
+    isBordered?: boolean;
+    /**
+     * Disabled state.
+     */
+    isDisabled?: boolean;
+    /**
+     * Show fallback content when image is missing or fails.
+     * @default false
+     */
+    showFallback?: boolean;
+    /**
+     * Custom initials generator.
+     */
+    getInitials?: (name: string) => string;
+    /**
+     * Custom appearance styles for avatar parts
+     */
+    customAppearance?: AvatarCustomAppearance;
+};
+type AvatarGroupProps = {
+    children?: ReactNode;
+    /**
+     * Max avatars to display before showing count.
+     */
+    max?: number;
+    /**
+     * Total avatars count if different from children length.
+     */
+    total?: number;
+    /**
+     * Shared avatar size.
+     */
+    size?: AvatarSize;
+    /**
+     * Shared avatar radius.
+     */
+    radius?: Radius;
+    /**
+     * Shared theme color.
+     */
+    themeColor?: ThemeColor;
+    /**
+     * Show border around avatars.
+     */
+    isBordered?: boolean;
+    /**
+     * Disabled state for all avatars.
+     */
+    isDisabled?: boolean;
+    /**
+     * Render avatars in a grid layout.
+     */
+    isGrid?: boolean;
+    /**
+     * Custom renderer for the count avatar.
+     */
+    renderCount?: (count: number) => ReactNode;
+    /**
+     * Custom appearance styles for group container
+     */
+    customAppearance?: {
+        container?: ViewStyle;
+    };
+};
+
+declare const Avatar: React.FC<AvatarProps>;
+
+declare const AvatarGroup: React.FC<AvatarGroupProps>;
+
+export { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps };

package/dist/avatar/index.d.ts

@@ -0,0 +1,123 @@
+import React, { ReactNode } from 'react';
+import { ViewStyle, ImageStyle, TextStyle } from 'react-native';
+import { S as Size, R as Radius, T as ThemeColor } from '../index-BOw6tbkc.js';
+
+type AvatarSize = Size | number;
+type AvatarCustomAppearance = {
+    /**
+     * Custom styles for the container
+     */
+    container?: ViewStyle;
+    /**
+     * Custom styles for the image
+     */
+    image?: ImageStyle;
+    /**
+     * Custom styles for the fallback text
+     */
+    text?: TextStyle;
+};
+type AvatarProps = {
+    /**
+     * Avatar image source URL.
+     */
+    src?: string;
+    /**
+     * Avatar name used for initials fallback.
+     */
+    name?: string;
+    /**
+     * Custom icon rendered when no image is available.
+     */
+    icon?: ReactNode;
+    /**
+     * Custom fallback rendered when no image is available.
+     */
+    fallback?: ReactNode;
+    /**
+     * Avatar size preset or custom number.
+     * @default 'md'
+     */
+    size?: AvatarSize;
+    /**
+     * Avatar radius.
+     * @default 'full'
+     */
+    radius?: Radius;
+    /**
+     * Theme color for avatar background and text.
+     */
+    themeColor?: ThemeColor;
+    /**
+     * Show border around avatar.
+     */
+    isBordered?: boolean;
+    /**
+     * Disabled state.
+     */
+    isDisabled?: boolean;
+    /**
+     * Show fallback content when image is missing or fails.
+     * @default false
+     */
+    showFallback?: boolean;
+    /**
+     * Custom initials generator.
+     */
+    getInitials?: (name: string) => string;
+    /**
+     * Custom appearance styles for avatar parts
+     */
+    customAppearance?: AvatarCustomAppearance;
+};
+type AvatarGroupProps = {
+    children?: ReactNode;
+    /**
+     * Max avatars to display before showing count.
+     */
+    max?: number;
+    /**
+     * Total avatars count if different from children length.
+     */
+    total?: number;
+    /**
+     * Shared avatar size.
+     */
+    size?: AvatarSize;
+    /**
+     * Shared avatar radius.
+     */
+    radius?: Radius;
+    /**
+     * Shared theme color.
+     */
+    themeColor?: ThemeColor;
+    /**
+     * Show border around avatars.
+     */
+    isBordered?: boolean;
+    /**
+     * Disabled state for all avatars.
+     */
+    isDisabled?: boolean;
+    /**
+     * Render avatars in a grid layout.
+     */
+    isGrid?: boolean;
+    /**
+     * Custom renderer for the count avatar.
+     */
+    renderCount?: (count: number) => ReactNode;
+    /**
+     * Custom appearance styles for group container
+     */
+    customAppearance?: {
+        container?: ViewStyle;
+    };
+};
+
+declare const Avatar: React.FC<AvatarProps>;
+
+declare const AvatarGroup: React.FC<AvatarGroupProps>;
+
+export { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps };

package/dist/avatar/index.js

@@ -0,0 +1,9 @@
+import {
+  Avatar,
+  AvatarGroup
+} from "../chunk-4LFRYVSR.js";
+import "../chunk-NBRASCX4.js";
+export {
+  Avatar,
+  AvatarGroup
+};