@xaui/native 0.0.9 → 0.0.11

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
+};

package/dist/badge/index.cjs

@@ -0,0 +1,270 @@
+"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/badge/index.ts
+var badge_exports = {};
+__export(badge_exports, {
+  Badge: () => Badge
+});
+module.exports = __toCommonJS(badge_exports);
+
+// src/components/badge/badge.tsx
+var import_react7 = __toESM(require("react"), 1);
+var import_react_native5 = require("react-native");
+
+// src/components/badge/badge.style.ts
+var import_react_native = require("react-native");
+var styles = import_react_native.StyleSheet.create({
+  container: {
+    position: "relative",
+    alignSelf: "flex-start"
+  },
+  badge: {
+    position: "absolute",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  text: {
+    textAlign: "center",
+    fontWeight: "600",
+    includeFontPadding: false,
+    textAlignVertical: "center"
+  }
+});
+
+// src/components/badge/badge.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/badge/badge.hook.ts
+var sizeMap = {
+  sm: { height: 16, minWidth: 16, dot: 8 },
+  md: { height: 20, minWidth: 20, dot: 10 },
+  lg: { height: 24, minWidth: 24, dot: 12 }
+};
+var fontSizeMap = {
+  sm: 9,
+  md: 10,
+  lg: 12
+};
+function useBadgeSizeStyles(size, isDot, isOneChar) {
+  const theme = useXUITheme();
+  return (0, import_react6.useMemo)(() => {
+    const { height, minWidth, dot } = sizeMap[size];
+    const fontSize = fontSizeMap[size];
+    if (isDot) {
+      return {
+        height: dot,
+        minWidth: dot,
+        paddingHorizontal: 0,
+        fontSize
+      };
+    }
+    if (isOneChar) {
+      return {
+        height,
+        minWidth: height,
+        paddingHorizontal: 0,
+        fontSize
+      };
+    }
+    const paddingHorizontal = size === "sm" ? theme.spacing.xs : theme.spacing.sm;
+    return {
+      height,
+      minWidth,
+      paddingHorizontal,
+      fontSize
+    };
+  }, [isDot, isOneChar, size, theme]);
+}
+function useBadgeVariantStyles(themeColor, variant) {
+  const theme = useXUITheme();
+  const safeThemeColor = (0, import_core.getSafeThemeColor)(themeColor);
+  const colorScheme = theme.colors[safeThemeColor];
+  return (0, import_react6.useMemo)(() => {
+    if (variant === "flat") {
+      return {
+        backgroundColor: colorScheme.background,
+        color: colorScheme.main
+      };
+    }
+    if (variant === "faded") {
+      return {
+        backgroundColor: (0, import_core.withOpacity)(colorScheme.background, 0.7),
+        color: colorScheme.main
+      };
+    }
+    if (variant === "shadow") {
+      return {
+        backgroundColor: colorScheme.main,
+        color: colorScheme.foreground,
+        shadow: theme.shadows.sm
+      };
+    }
+    return {
+      backgroundColor: colorScheme.main,
+      color: colorScheme.foreground
+    };
+  }, [colorScheme, theme, variant]);
+}
+function useBadgeRadiusStyles(radius, height) {
+  const theme = useXUITheme();
+  return (0, import_react6.useMemo)(() => {
+    if (radius === "full") {
+      return { borderRadius: height / 2 };
+    }
+    return { borderRadius: theme.borderRadius[radius] };
+  }, [height, radius, theme.borderRadius]);
+}
+function useBadgePlacementStyles(placement, height) {
+  return (0, import_react6.useMemo)(() => {
+    const offset = Math.round(height * 0.3);
+    switch (placement) {
+      case "top-left":
+        return { top: -offset, left: -offset };
+      case "bottom-right":
+        return { bottom: -offset, right: -offset };
+      case "bottom-left":
+        return { bottom: -offset, left: -offset };
+      case "top-right":
+      default:
+        return { top: -offset, right: -offset };
+    }
+  }, [height, placement]);
+}
+
+// src/components/badge/badge.tsx
+var Badge = ({
+  children,
+  content,
+  themeColor = "primary",
+  variant = "solid",
+  size = "md",
+  radius = "full",
+  placement = "top-right",
+  showOutline = true,
+  disableOutline = false,
+  isInvisible = false,
+  isDot = false,
+  isOneChar = false,
+  disableAnimation = false,
+  customAppearance
+}) => {
+  const shouldRender = !isInvisible && (isDot || content !== void 0);
+  if (!shouldRender && !children) {
+    return null;
+  }
+  const forceOneChar = isOneChar || radius === "full";
+  const sizeStyles = useBadgeSizeStyles(size, isDot, forceOneChar);
+  const variantStyles = useBadgeVariantStyles(themeColor, variant);
+  const radiusStyles = useBadgeRadiusStyles(radius, sizeStyles.height);
+  const placementStyles = useBadgePlacementStyles(placement, sizeStyles.height);
+  const outlineEnabled = disableOutline ? false : showOutline;
+  const outlineStyles = outlineEnabled ? { borderWidth: 1, borderColor: "#FFFFFF" } : { borderWidth: 0, borderColor: "transparent" };
+  const badgeContent = isDot ? null : content;
+  return /* @__PURE__ */ import_react7.default.createElement(import_react_native5.View, { style: [styles.container, customAppearance?.container] }, children, shouldRender && /* @__PURE__ */ import_react7.default.createElement(
+    import_react_native5.View,
+    {
+      style: [
+        styles.badge,
+        {
+          minWidth: sizeStyles.minWidth,
+          height: sizeStyles.height,
+          paddingHorizontal: sizeStyles.paddingHorizontal,
+          backgroundColor: variantStyles.backgroundColor,
+          opacity: disableAnimation ? 1 : 1
+        },
+        radiusStyles,
+        placementStyles,
+        outlineStyles,
+        variantStyles.shadow,
+        customAppearance?.badge
+      ],
+      accessible: true,
+      accessibilityRole: "text"
+    },
+    badgeContent !== void 0 && badgeContent !== null && /* @__PURE__ */ import_react7.default.createElement(
+      import_react_native5.Text,
+      {
+        style: [
+          styles.text,
+          {
+            fontSize: sizeStyles.fontSize,
+            color: variantStyles.color
+          },
+          customAppearance?.text
+        ]
+      },
+      badgeContent
+    )
+  ));
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Badge
+});

package/dist/badge/index.d.cts

@@ -0,0 +1,94 @@
+import React, { ReactNode } from 'react';
+import { ViewStyle, TextStyle } from 'react-native';
+import { T as ThemeColor, R as Radius } from '../index-BOw6tbkc.cjs';
+
+type BadgeVariant = 'solid' | 'flat' | 'faded' | 'shadow';
+type BadgeSize = 'sm' | 'md' | 'lg';
+type BadgePlacement = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+type BadgeCustomAppearance = {
+    /**
+     * Custom styles for the container
+     */
+    container?: ViewStyle;
+    /**
+     * Custom styles for the badge
+     */
+    badge?: ViewStyle;
+    /**
+     * Custom styles for the text
+     */
+    text?: TextStyle;
+};
+type BadgeProps = {
+    /**
+     * Content rendered inside the badge.
+     */
+    content?: ReactNode;
+    /**
+     * The badge color.
+     * @default 'primary'
+     */
+    themeColor?: ThemeColor;
+    /**
+     * The badge variant.
+     * @default 'solid'
+     */
+    variant?: BadgeVariant;
+    /**
+     * The badge size.
+     * @default 'md'
+     */
+    size?: BadgeSize;
+    /**
+     * The badge radius.
+     * @default 'full'
+     */
+    radius?: Radius;
+    /**
+     * Placement relative to children.
+     * @default 'top-right'
+     */
+    placement?: BadgePlacement;
+    /**
+     * Show outline around badge.
+     * @default true
+     */
+    showOutline?: boolean;
+    /**
+     * Disable outline around badge.
+     * @default false
+     */
+    disableOutline?: boolean;
+    /**
+     * Hide the badge.
+     * @default false
+     */
+    isInvisible?: boolean;
+    /**
+     * Render dot style badge.
+     * @default false
+     */
+    isDot?: boolean;
+    /**
+     * Render badge as one character size.
+     * @default false
+     */
+    isOneChar?: boolean;
+    /**
+     * Disable badge animation.
+     * @default false
+     */
+    disableAnimation?: boolean;
+    /**
+     * Custom appearance styles for badge parts
+     */
+    customAppearance?: BadgeCustomAppearance;
+    /**
+     * Wrapped component.
+     */
+    children?: ReactNode;
+};
+
+declare const Badge: React.FC<BadgeProps>;
+
+export { Badge, type BadgeProps };

package/dist/badge/index.d.ts

@@ -0,0 +1,94 @@
+import React, { ReactNode } from 'react';
+import { ViewStyle, TextStyle } from 'react-native';
+import { T as ThemeColor, R as Radius } from '../index-BOw6tbkc.js';
+
+type BadgeVariant = 'solid' | 'flat' | 'faded' | 'shadow';
+type BadgeSize = 'sm' | 'md' | 'lg';
+type BadgePlacement = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+type BadgeCustomAppearance = {
+    /**
+     * Custom styles for the container
+     */
+    container?: ViewStyle;
+    /**
+     * Custom styles for the badge
+     */
+    badge?: ViewStyle;
+    /**
+     * Custom styles for the text
+     */
+    text?: TextStyle;
+};
+type BadgeProps = {
+    /**
+     * Content rendered inside the badge.
+     */
+    content?: ReactNode;
+    /**
+     * The badge color.
+     * @default 'primary'
+     */
+    themeColor?: ThemeColor;
+    /**
+     * The badge variant.
+     * @default 'solid'
+     */
+    variant?: BadgeVariant;
+    /**
+     * The badge size.
+     * @default 'md'
+     */
+    size?: BadgeSize;
+    /**
+     * The badge radius.
+     * @default 'full'
+     */
+    radius?: Radius;
+    /**
+     * Placement relative to children.
+     * @default 'top-right'
+     */
+    placement?: BadgePlacement;
+    /**
+     * Show outline around badge.
+     * @default true
+     */
+    showOutline?: boolean;
+    /**
+     * Disable outline around badge.
+     * @default false
+     */
+    disableOutline?: boolean;
+    /**
+     * Hide the badge.
+     * @default false
+     */
+    isInvisible?: boolean;
+    /**
+     * Render dot style badge.
+     * @default false
+     */
+    isDot?: boolean;
+    /**
+     * Render badge as one character size.
+     * @default false
+     */
+    isOneChar?: boolean;
+    /**
+     * Disable badge animation.
+     * @default false
+     */
+    disableAnimation?: boolean;
+    /**
+     * Custom appearance styles for badge parts
+     */
+    customAppearance?: BadgeCustomAppearance;
+    /**
+     * Wrapped component.
+     */
+    children?: ReactNode;
+};
+
+declare const Badge: React.FC<BadgeProps>;
+
+export { Badge, type BadgeProps };