@xaui/native 0.0.9 → 0.0.11

package/dist/alert/index.d.ts

@@ -0,0 +1,90 @@
+import React, { ReactNode } from 'react';
+import { ViewStyle, TextStyle } from 'react-native';
+import { T as ThemeColor } from '../index-BOw6tbkc.js';
+
+type AlertVariant = 'solid' | 'bordered' | 'flat' | 'faded';
+type AlertRadius = 'none' | 'sm' | 'md' | 'lg' | 'full';
+type AlertEvents = {
+    /**
+     * Callback fired when the alert is closed.
+     */
+    onClose?: () => void;
+    /**
+     * Callback fired when the alert visibility changes.
+     */
+    onVisibleChange?: (isVisible: boolean) => void;
+};
+type AlertCustomAppearance = {
+    /**
+     * Custom style for the alert container.
+     */
+    container?: ViewStyle;
+    /**
+     * Custom style for the alert title.
+     */
+    title?: TextStyle;
+    /**
+     * Custom style for the alert description.
+     */
+    description?: TextStyle;
+};
+type AlertProps = {
+    /**
+     * The title of the alert.
+     */
+    title?: ReactNode;
+    /**
+     * The description content of the alert.
+     */
+    description?: ReactNode;
+    /**
+     * Custom icon to display inside the alert.
+     */
+    icon?: ReactNode;
+    /**
+     * The theme color of the alert.
+     * @default 'default'
+     */
+    themeColor?: ThemeColor;
+    /**
+     * The variant of the alert.
+     * @default 'flat'
+     */
+    variant?: AlertVariant;
+    /**
+     * The border radius of the alert.
+     * @default 'md'
+     */
+    radius?: AlertRadius;
+    /**
+     * Whether the alert can be closed with a close button.
+     * @default false
+     */
+    isClosable?: boolean;
+    /**
+     * Whether to hide the icon.
+     * @default false
+     */
+    hideIcon?: boolean;
+    /**
+     * Custom close button element.
+     */
+    closeButton?: ReactNode;
+    /**
+     * Whether the alert is visible.
+     * @default true
+     */
+    isVisible?: boolean;
+    /**
+     * Custom appearance styles for all alert parts
+     */
+    customAppearance?: AlertCustomAppearance;
+    /**
+     * Additional content rendered below the description.
+     */
+    children?: ReactNode;
+} & AlertEvents;
+
+declare const Alert: React.FC<AlertProps>;
+
+export { Alert, type AlertProps, type AlertVariant };

package/dist/alert/index.js

@@ -0,0 +1,8 @@
+import {
+  Alert
+} from "../chunk-OFYJYQ2M.js";
+import "../chunk-SIXET7TJ.js";
+import "../chunk-NBRASCX4.js";
+export {
+  Alert
+};

package/dist/autocomplete/index.cjs

@@ -1141,8 +1141,7 @@ var Autocomplete = ({
   disableLocalFilter = false,
   inputValue,
   defaultInputValue,
-  style,
-  textStyle,
+  customAppearance,
   onClose,
   onOpenChange,
   onSelectionChange,
@@ -1298,8 +1297,8 @@ var Autocomplete = ({
       labelText: typeof label === "string" ? label : void 0,
       isLabelInside,
       clearIcon,
-      style,
-      textStyle,
+      style: customAppearance?.container,
+      textStyle: customAppearance?.text,
       onPress: handleTriggerPress,
       onClear: handleClear,
       onLayout: handleTriggerLayout
@@ -1441,8 +1440,7 @@ var AutocompleteItem = ({
   isDisabled = false,
   isSelected = false,
   isReadOnly = false,
-  style,
-  textStyle,
+  customAppearance,
   onSelected
 }) => {
   const context = (0, import_react20.useContext)(AutocompleteContext);
@@ -1469,7 +1467,7 @@ var AutocompleteItem = ({
           backgroundColor
         },
         isItemDisabled && styles3.disabled,
-        style
+        customAppearance?.container
       ]
     },
     startContent,
@@ -1479,7 +1477,7 @@ var AutocompleteItem = ({
         style: [
           styles3.title,
           { fontSize: sizeStyles.titleSize, color: labelColor },
-          textStyle
+          customAppearance?.text
         ]
       },
       label

package/dist/autocomplete/index.d.cts

@@ -5,6 +5,26 @@ import { T as ThemeColor, S as Size, R as Radius } from '../index-BOw6tbkc.cjs';
 type AutocompleteVariant = 'outlined' | 'flat' | 'light' | 'faded' | 'underlined';
 type AutocompleteLabelPlacement = 'inside' | 'outside' | 'outside-left' | 'outside-top';
 type AutocompleteMenuTrigger = 'focus' | 'input' | 'manual';
+type AutocompleteCustomAppearance = {
+    /**
+     * Custom styles for the container
+     */
+    container?: ViewStyle;
+    /**
+     * Custom styles for the text
+     */
+    text?: TextStyle;
+};
+type AutocompleteItemCustomAppearance = {
+    /**
+     * Custom styles for the container
+     */
+    container?: ViewStyle;
+    /**
+     * Custom styles for the text
+     */
+    text?: TextStyle;
+};
 type AutocompleteProps = {
     children: ReactNode;
     variant?: AutocompleteVariant;
@@ -33,8 +53,7 @@ type AutocompleteProps = {
     inputValue?: string;
     defaultInputValue?: string;
     menuTrigger?: AutocompleteMenuTrigger;
-    style?: ViewStyle;
-    textStyle?: TextStyle;
+    customAppearance?: AutocompleteCustomAppearance;
 } & AutocompletePrivateProps & AutocompleteEvents;
 type AutocompletePrivateProps = {
     _isRequired?: boolean;
@@ -58,8 +77,7 @@ type AutocompleteItemProps = {
     isDisabled?: boolean;
     isSelected?: boolean;
     isReadOnly?: boolean;
-    style?: ViewStyle;
-    textStyle?: TextStyle;
+    customAppearance?: AutocompleteItemCustomAppearance;
     onSelected?: () => void;
 };
 

package/dist/autocomplete/index.d.ts

@@ -5,6 +5,26 @@ import { T as ThemeColor, S as Size, R as Radius } from '../index-BOw6tbkc.js';
 type AutocompleteVariant = 'outlined' | 'flat' | 'light' | 'faded' | 'underlined';
 type AutocompleteLabelPlacement = 'inside' | 'outside' | 'outside-left' | 'outside-top';
 type AutocompleteMenuTrigger = 'focus' | 'input' | 'manual';
+type AutocompleteCustomAppearance = {
+    /**
+     * Custom styles for the container
+     */
+    container?: ViewStyle;
+    /**
+     * Custom styles for the text
+     */
+    text?: TextStyle;
+};
+type AutocompleteItemCustomAppearance = {
+    /**
+     * Custom styles for the container
+     */
+    container?: ViewStyle;
+    /**
+     * Custom styles for the text
+     */
+    text?: TextStyle;
+};
 type AutocompleteProps = {
     children: ReactNode;
     variant?: AutocompleteVariant;
@@ -33,8 +53,7 @@ type AutocompleteProps = {
     inputValue?: string;
     defaultInputValue?: string;
     menuTrigger?: AutocompleteMenuTrigger;
-    style?: ViewStyle;
-    textStyle?: TextStyle;
+    customAppearance?: AutocompleteCustomAppearance;
 } & AutocompletePrivateProps & AutocompleteEvents;
 type AutocompletePrivateProps = {
     _isRequired?: boolean;
@@ -58,8 +77,7 @@ type AutocompleteItemProps = {
     isDisabled?: boolean;
     isSelected?: boolean;
     isReadOnly?: boolean;
-    style?: ViewStyle;
-    textStyle?: TextStyle;
+    customAppearance?: AutocompleteItemCustomAppearance;
     onSelected?: () => void;
 };
 

package/dist/autocomplete/index.js

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

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