@xaui/native 0.0.20 → 0.0.23

package/dist/alert/index.d.mts

@@ -0,0 +1,3 @@
+export { Alert } from './alert';
+export type { AlertProps, AlertVariant } from './alert.type';
+//# sourceMappingURL=index.d.ts.map

package/dist/alert/index.d.ts

@@ -1,90 +1,3 @@
-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 };
+export { Alert } from './alert';
+export type { AlertProps, AlertVariant } from './alert.type';
+//# sourceMappingURL=index.d.ts.map

package/dist/app-bar/index.cjs

@@ -0,0 +1,217 @@
+"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/app-bar/index.ts
+var app_bar_exports = {};
+__export(app_bar_exports, {
+  AppBar: () => AppBar,
+  AppBarContent: () => AppBarContent,
+  AppBarEndContent: () => AppBarEndContent,
+  AppBarStartContent: () => AppBarStartContent
+});
+module.exports = __toCommonJS(app_bar_exports);
+
+// src/components/app-bar/app-bar.tsx
+var import_react7 = __toESM(require("react"), 1);
+var import_react_native5 = require("react-native");
+var import_core2 = require("@xaui/core");
+
+// src/core/theme-context.tsx
+var import_react4 = __toESM(require("react"), 1);
+var import_react_native2 = 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_native = require("react-native");
+var hostStyles = import_react_native.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_native3 = 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/app-bar/app-bar.hook.ts
+var import_react6 = require("react");
+var resolveShadowStyle = (elevation, shadows) => {
+  if (elevation <= 1) {
+    return shadows.sm;
+  }
+  if (elevation <= 2) {
+    return shadows.md;
+  }
+  if (elevation <= 3) {
+    return shadows.lg;
+  }
+  return shadows.xl;
+};
+var useAppBarElevationStyles = (elevation = 0) => {
+  const theme = useXUITheme();
+  return (0, import_react6.useMemo)(() => {
+    if (elevation <= 0) {
+      return {};
+    }
+    return {
+      ...resolveShadowStyle(elevation, theme.shadows),
+      elevation
+    };
+  }, [elevation, theme.shadows]);
+};
+
+// src/components/app-bar/app-bar.style.ts
+var import_react_native4 = require("react-native");
+var styles = import_react_native4.StyleSheet.create({
+  container: {
+    width: "100%"
+  },
+  floatingContainer: {
+    paddingHorizontal: 16,
+    paddingVertical: 8
+  },
+  appBar: {
+    minHeight: 64,
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 16
+  },
+  docked: {
+    width: "100%",
+    borderRadius: 0
+  },
+  floating: {
+    width: "92%",
+    borderRadius: 9999,
+    alignSelf: "center"
+  },
+  startContent: {
+    flexShrink: 0,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    minWidth: 40
+  },
+  content: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: 12
+  },
+  endContent: {
+    flexShrink: 0,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    gap: 8,
+    minWidth: 40
+  }
+});
+
+// src/components/app-bar/app-bar.tsx
+var AppBar = ({
+  variant = "docked",
+  elevation = 0,
+  themeColor = "default",
+  children,
+  style
+}) => {
+  const theme = useXUITheme();
+  const elevationStyles = useAppBarElevationStyles(elevation);
+  const isFloating = variant === "floating";
+  const safeThemeColor = (0, import_core2.getSafeThemeColor)(themeColor);
+  const colorScheme = theme.colors[safeThemeColor];
+  const isDefaultThemeColor = safeThemeColor === "default";
+  const backgroundColor = isDefaultThemeColor ? theme.mode === "dark" ? theme.colors.default.background : "#FFFFFF" : colorScheme.background;
+  const borderBottomColor = isDefaultThemeColor ? theme.mode === "dark" ? "rgba(255, 255, 255, 0.06)" : "rgba(0, 0, 0, 0.08)" : colorScheme.main;
+  return /* @__PURE__ */ import_react7.default.createElement(import_react_native5.View, { style: [styles.container, isFloating && styles.floatingContainer] }, /* @__PURE__ */ import_react7.default.createElement(
+    import_react_native5.View,
+    {
+      style: [
+        styles.appBar,
+        isFloating ? styles.floating : styles.docked,
+        {
+          backgroundColor,
+          borderBottomWidth: isFloating ? 0 : 1,
+          borderBottomColor
+        },
+        elevationStyles,
+        style
+      ]
+    },
+    children
+  ));
+};
+var AppBarStartContent = ({
+  children,
+  style
+}) => {
+  return /* @__PURE__ */ import_react7.default.createElement(import_react_native5.View, { style: [styles.startContent, style] }, children);
+};
+var AppBarContent = ({
+  children,
+  style
+}) => {
+  return /* @__PURE__ */ import_react7.default.createElement(import_react_native5.View, { style: [styles.content, style] }, children);
+};
+var AppBarEndContent = ({
+  children,
+  style
+}) => {
+  return /* @__PURE__ */ import_react7.default.createElement(import_react_native5.View, { style: [styles.endContent, style] }, children);
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AppBar,
+  AppBarContent,
+  AppBarEndContent,
+  AppBarStartContent
+});

package/dist/app-bar/index.d.mts

@@ -0,0 +1,3 @@
+export { AppBar, AppBarStartContent, AppBarContent, AppBarEndContent } from './app-bar';
+export type { AppBarProps, AppBarVariant, AppBarSlotProps, AppBarStartContentProps, AppBarContentProps, AppBarEndContentProps, } from './app-bar.type';
+//# sourceMappingURL=index.d.ts.map

package/dist/app-bar/index.d.ts

@@ -0,0 +1,3 @@
+export { AppBar, AppBarStartContent, AppBarContent, AppBarEndContent } from './app-bar';
+export type { AppBarProps, AppBarVariant, AppBarSlotProps, AppBarStartContentProps, AppBarContentProps, AppBarEndContentProps, } from './app-bar.type';
+//# sourceMappingURL=index.d.ts.map

package/dist/app-bar/index.js

@@ -0,0 +1,143 @@
+import "../chunk-DXXNBF5P.js";
+import {
+  useXUITheme
+} from "../chunk-LTKYHG5V.js";
+
+// src/components/app-bar/app-bar.tsx
+import React from "react";
+import { View } from "react-native";
+import { getSafeThemeColor } from "@xaui/core";
+
+// src/components/app-bar/app-bar.hook.ts
+import { useMemo } from "react";
+var resolveShadowStyle = (elevation, shadows) => {
+  if (elevation <= 1) {
+    return shadows.sm;
+  }
+  if (elevation <= 2) {
+    return shadows.md;
+  }
+  if (elevation <= 3) {
+    return shadows.lg;
+  }
+  return shadows.xl;
+};
+var useAppBarElevationStyles = (elevation = 0) => {
+  const theme = useXUITheme();
+  return useMemo(() => {
+    if (elevation <= 0) {
+      return {};
+    }
+    return {
+      ...resolveShadowStyle(elevation, theme.shadows),
+      elevation
+    };
+  }, [elevation, theme.shadows]);
+};
+
+// src/components/app-bar/app-bar.style.ts
+import { StyleSheet } from "react-native";
+var styles = StyleSheet.create({
+  container: {
+    width: "100%"
+  },
+  floatingContainer: {
+    paddingHorizontal: 16,
+    paddingVertical: 8
+  },
+  appBar: {
+    minHeight: 64,
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 16
+  },
+  docked: {
+    width: "100%",
+    borderRadius: 0
+  },
+  floating: {
+    width: "92%",
+    borderRadius: 9999,
+    alignSelf: "center"
+  },
+  startContent: {
+    flexShrink: 0,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    minWidth: 40
+  },
+  content: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: 12
+  },
+  endContent: {
+    flexShrink: 0,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    gap: 8,
+    minWidth: 40
+  }
+});
+
+// src/components/app-bar/app-bar.tsx
+var AppBar = ({
+  variant = "docked",
+  elevation = 0,
+  themeColor = "default",
+  children,
+  style
+}) => {
+  const theme = useXUITheme();
+  const elevationStyles = useAppBarElevationStyles(elevation);
+  const isFloating = variant === "floating";
+  const safeThemeColor = getSafeThemeColor(themeColor);
+  const colorScheme = theme.colors[safeThemeColor];
+  const isDefaultThemeColor = safeThemeColor === "default";
+  const backgroundColor = isDefaultThemeColor ? theme.mode === "dark" ? theme.colors.default.background : "#FFFFFF" : colorScheme.background;
+  const borderBottomColor = isDefaultThemeColor ? theme.mode === "dark" ? "rgba(255, 255, 255, 0.06)" : "rgba(0, 0, 0, 0.08)" : colorScheme.main;
+  return /* @__PURE__ */ React.createElement(View, { style: [styles.container, isFloating && styles.floatingContainer] }, /* @__PURE__ */ React.createElement(
+    View,
+    {
+      style: [
+        styles.appBar,
+        isFloating ? styles.floating : styles.docked,
+        {
+          backgroundColor,
+          borderBottomWidth: isFloating ? 0 : 1,
+          borderBottomColor
+        },
+        elevationStyles,
+        style
+      ]
+    },
+    children
+  ));
+};
+var AppBarStartContent = ({
+  children,
+  style
+}) => {
+  return /* @__PURE__ */ React.createElement(View, { style: [styles.startContent, style] }, children);
+};
+var AppBarContent = ({
+  children,
+  style
+}) => {
+  return /* @__PURE__ */ React.createElement(View, { style: [styles.content, style] }, children);
+};
+var AppBarEndContent = ({
+  children,
+  style
+}) => {
+  return /* @__PURE__ */ React.createElement(View, { style: [styles.endContent, style] }, children);
+};
+export {
+  AppBar,
+  AppBarContent,
+  AppBarEndContent,
+  AppBarStartContent
+};

package/dist/autocomplete/index.d.mts

@@ -0,0 +1,4 @@
+export { Autocomplete } from './autocomplete';
+export { AutocompleteItem } from './autocomplete-item';
+export type { AutocompleteProps, AutocompleteItemProps } from './autocomplete.type';
+//# sourceMappingURL=index.d.ts.map

package/dist/autocomplete/index.d.ts

@@ -1,88 +1,4 @@
-import React, { ReactNode } from 'react';
-import { ViewStyle, TextStyle } from 'react-native';
-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;
-    themeColor?: ThemeColor;
-    size?: Size;
-    radius?: Radius;
-    placeholder?: string;
-    labelPlacement?: AutocompleteLabelPlacement;
-    label?: ReactNode;
-    description?: ReactNode;
-    errorMessage?: ReactNode;
-    startContent?: ReactNode;
-    endContent?: ReactNode;
-    selectorIcon?: ReactNode;
-    clearIcon?: ReactNode;
-    fullWidth?: boolean;
-    isDisabled?: boolean;
-    isInvalid?: boolean;
-    isReadOnly?: boolean;
-    isClearable?: boolean;
-    allowsCustomValue?: boolean;
-    forceSelection?: boolean;
-    allowsEmptyCollection?: boolean;
-    disableLocalFilter?: boolean;
-    disableAnimation?: boolean;
-    inputValue?: string;
-    defaultInputValue?: string;
-    menuTrigger?: AutocompleteMenuTrigger;
-    customAppearance?: AutocompleteCustomAppearance;
-} & AutocompletePrivateProps & AutocompleteEvents;
-type AutocompletePrivateProps = {
-    _isRequired?: boolean;
-};
-type AutocompleteEvents = {
-    onClose?: () => void;
-    onOpenChange?: (isOpen: boolean) => void;
-    onSelectionChange?: (key: string | null) => void;
-    onInputChange?: (value: string) => void;
-    onClear?: () => void;
-    onFocus?: () => void;
-    onBlur?: () => void;
-};
-type AutocompleteItemProps = {
-    label: ReactNode;
-    value: string;
-    description?: ReactNode;
-    startContent?: ReactNode;
-    endContent?: ReactNode;
-    selectedIcon?: ReactNode;
-    isDisabled?: boolean;
-    isSelected?: boolean;
-    isReadOnly?: boolean;
-    customAppearance?: AutocompleteItemCustomAppearance;
-    onSelected?: () => void;
-};
-
-declare const Autocomplete: React.FC<AutocompleteProps>;
-
-declare const AutocompleteItem: React.FC<AutocompleteItemProps>;
-
-export { Autocomplete, AutocompleteItem, type AutocompleteItemProps, type AutocompleteProps };
+export { Autocomplete } from './autocomplete';
+export { AutocompleteItem } from './autocomplete-item';
+export type { AutocompleteProps, AutocompleteItemProps } from './autocomplete.type';
+//# sourceMappingURL=index.d.ts.map

package/dist/avatar/index.d.mts

@@ -0,0 +1,4 @@
+export { Avatar } from './avatar';
+export { AvatarGroup } from './avatar-group';
+export type { AvatarProps, AvatarGroupProps } from './avatar.type';
+//# sourceMappingURL=index.d.ts.map

package/dist/avatar/index.d.ts

@@ -1,123 +1,4 @@
-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 };
+export { Avatar } from './avatar';
+export { AvatarGroup } from './avatar-group';
+export type { AvatarProps, AvatarGroupProps } from './avatar.type';
+//# sourceMappingURL=index.d.ts.map

package/dist/badge/index.d.mts

@@ -0,0 +1,3 @@
+export { Badge } from './badge';
+export type { BadgeProps } from './badge.type';
+//# sourceMappingURL=index.d.ts.map