@xaui/native 0.0.21 → 0.0.24

package/README.md

@@ -79,8 +79,6 @@ function Banner() {
 </Button>
 ```
 
-`useButtonStyles` exposes the internal calculations if you need to derive custom layouts (spacing, colors, shadows, spinner size).
-
 ### `ActivityIndicator`
 
 - Variants: `circular` (default size 40) and `linear` (custom height)
@@ -96,6 +94,201 @@ function Banner() {
 />
 ```
 
+### `ExpansionPanel`
+
+- Variants: `light`, `bordered`, `splitted`
+- Selection modes: `toggle` (single expansion) or `multiple` (simultaneous expansions)
+- Supports disabled items, compact mode, and custom appearance
+
+```tsx
+import { ExpansionPanel, ExpansionPanelItem } from '@xaui/native/expansion-panel'
+
+;<ExpansionPanel variant="light" selectionMode="toggle" showDivider>
+  <ExpansionPanelItem title="Section 1" itemKey="section1">
+    <Text>Content for section 1</Text>
+  </ExpansionPanelItem>
+  <ExpansionPanelItem title="Section 2" itemKey="section2">
+    <Text>Content for section 2</Text>
+  </ExpansionPanelItem>
+</ExpansionPanel>
+```
+
+### `Avatar`
+
+- Variants: `circle`, `square`, `rounded`
+- Sizes: `xs`, `sm`, `md`, `lg`, `xl`
+- Supports images, icons, or text initials
+- Fallback support when image fails to load
+
+```tsx
+import { Avatar } from '@xaui/native/avatar'
+
+// With image
+<Avatar src="https://example.com/avatar.jpg" size="lg" variant="circle" />
+
+// With icon
+<Avatar icon={<UserIcon />} size="md" variant="rounded" />
+
+// With text initials
+<Avatar name="John Doe" size="sm" variant="square" />
+```
+
+### `Badge`
+
+- Variants: `solid`, `outlined`, `flat`, `light`, `faded`
+- Sizes: `xs`, `sm`, `md`, `lg`
+- Supports icons, custom colors, and notification dots
+
+```tsx
+import { Badge } from '@xaui/native/badge'
+
+<Badge themeColor="danger" variant="solid" size="md">
+  99+
+</Badge>
+
+<Badge themeColor="success" variant="outlined" showDot>
+  Online
+</Badge>
+```
+
+### `Checkbox`
+
+- Variants: `solid`, `outlined`, `flat`
+- Sizes: `xs`, `sm`, `md`, `lg`
+- Supports indeterminate state, custom icons, and line-through text
+
+```tsx
+import { Checkbox } from '@xaui/native/checkbox'
+
+;<Checkbox
+  isSelected={isChecked}
+  onValueChange={setIsChecked}
+  themeColor="primary"
+  size="md"
+>
+  Accept terms and conditions
+</Checkbox>
+```
+
+### `Chip`
+
+- Variants: `solid`, `outlined`, `flat`, `light`, `faded`
+- Sizes: `xs`, `sm`, `md`, `lg`
+- Supports start/end content, close button, and selection state
+
+```tsx
+import { Chip } onPress={() => console.log('Chip pressed')}>
+  Tag Label
+</Chip>
+```
+
+### `Divider`
+
+- Orientations: `horizontal`, `vertical`
+- Supports custom color and size
+
+```tsx
+import { Divider } from '@xaui/native/divider'
+
+<Divider orientation="horizontal" size={2} />
+<Divider orientation="vertical" size={1} color="#E5E7EB" />
+```
+
+### `Radio` & `RadioGroup`
+
+- Variants: `solid`, `outlined`, `flat`
+- Sizes: `xs`, `sm`, `md`, `lg`
+- Group support with controlled state
+
+```tsx
+import { Radio, RadioGroup } from '@xaui/native/radio'
+
+;<RadioGroup value={selected} onValueChange={setSelected}>
+  <Radio value="option1" themeColor="primary">
+    Option 1
+  </Radio>
+  <Radio value="option2" themeColor="primary">
+    Option 2
+  </Radio>
+</RadioGroup>
+```
+
+### `Switch`
+
+- Sizes: `xs`, `sm`, `md`, `lg`
+- Supports icons inside the thumb
+
+```tsx
+import { Switch } from '@xaui/native/switch'
+
+;<Switch
+  isSelected={isEnabled}
+  onValueChange={setIsEnabled}
+  size="md"
+  themeColor="success"
+/>
+```
+
+### View Components
+
+#### `Center`
+
+Centers its child both vertically and horizontally.
+
+```tsx
+import { Center } from '@xaui/native/center'
+
+;<Center style={{ flex: 1 }}>
+  <Text>Centered content</Text>
+</Center>
+```
+
+#### `Column` & `Row`
+
+Flexbox layout helpers with Flutter-like API.
+
+```tsx
+import { Column, Row } from '@xaui/native/view'
+
+<Column mainAxisAlignment="center" crossAxisAlignment="stretch" gap={16}>
+  <Text>Item 1</Text>
+  <Text>Item 2</Text>
+</Column>
+
+<Row mainAxisAlignment="space-between" crossAxisAlignment="center">
+  <Text>Left</Text>
+  <Text>Right</Text>
+</Row>
+```
+
+#### `Spacer` & `SizedBox`
+
+Utility components for spacing.
+
+```tsx
+import { Spacer, SizedBox } from '@xaui/native/view'
+
+<Row>
+  <Text>Left</Text>
+  <Spacer />
+  <Text>Right</Text>
+</Row>
+
+<SizedBox height={20} width={10} />
+```
+
+#### `RoundedView`
+
+View with rounded corners and optional border.
+
+```tsx
+import { RoundedView } from '@xaui/native/rounded-view'
+
+;<RoundedView borderRadius={16} borderWidth={2} borderColor="#E5E7EB" padding={20}>
+  <Text>Content with rounded corners</Text>
+</RoundedView>
+```
+
 ## Theme hooks & utilities
 
 - `useXUITheme()` must be used within `XUIProvider`; it throws if the provider is missing.

package/dist/alert/index.js

@@ -1,8 +1,7 @@
-import "../chunk-DXXNBF5P.js";
 import {
   useBorderRadiusStyles,
   useXUITheme
-} from "../chunk-LTKYHG5V.js";
+} from "../chunk-URBEEDFX.js";
 
 // src/components/alert/alert.tsx
 import React2, {

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.cts

@@ -0,0 +1,52 @@
+import React, { ReactNode } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { T as ThemeColor } from '../index-BOw6tbkc.cjs';
+
+type AppBarVariant = 'docked' | 'floating';
+type AppBarProps = {
+    /**
+     * AppBar layout variant.
+     * - docked: full-width app bar
+     * - floating: rounded app bar that does not span full screen width
+     * @default 'docked'
+     */
+    variant?: AppBarVariant;
+    /**
+     * Elevation intensity.
+     * @default 0
+     */
+    elevation?: number;
+    /**
+     * Theme color used for the app bar surface.
+     * @default 'default'
+     */
+    themeColor?: ThemeColor;
+    /**
+     * AppBar content.
+     */
+    children?: ReactNode;
+    /**
+     * Custom style for the app bar surface.
+     */
+    style?: StyleProp<ViewStyle>;
+};
+type AppBarSlotProps = {
+    /**
+     * Slot content.
+     */
+    children?: ReactNode;
+    /**
+     * Custom style for this slot.
+     */
+    style?: StyleProp<ViewStyle>;
+};
+type AppBarStartContentProps = AppBarSlotProps;
+type AppBarContentProps = AppBarSlotProps;
+type AppBarEndContentProps = AppBarSlotProps;
+
+declare const AppBar: React.FC<AppBarProps>;
+declare const AppBarStartContent: React.FC<AppBarStartContentProps>;
+declare const AppBarContent: React.FC<AppBarContentProps>;
+declare const AppBarEndContent: React.FC<AppBarEndContentProps>;
+
+export { AppBar, AppBarContent, type AppBarContentProps, AppBarEndContent, type AppBarEndContentProps, type AppBarProps, type AppBarSlotProps, AppBarStartContent, type AppBarStartContentProps, type AppBarVariant };

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

@@ -0,0 +1,52 @@
+import React, { ReactNode } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { T as ThemeColor } from '../index-BOw6tbkc.js';
+
+type AppBarVariant = 'docked' | 'floating';
+type AppBarProps = {
+    /**
+     * AppBar layout variant.
+     * - docked: full-width app bar
+     * - floating: rounded app bar that does not span full screen width
+     * @default 'docked'
+     */
+    variant?: AppBarVariant;
+    /**
+     * Elevation intensity.
+     * @default 0
+     */
+    elevation?: number;
+    /**
+     * Theme color used for the app bar surface.
+     * @default 'default'
+     */
+    themeColor?: ThemeColor;
+    /**
+     * AppBar content.
+     */
+    children?: ReactNode;
+    /**
+     * Custom style for the app bar surface.
+     */
+    style?: StyleProp<ViewStyle>;
+};
+type AppBarSlotProps = {
+    /**
+     * Slot content.
+     */
+    children?: ReactNode;
+    /**
+     * Custom style for this slot.
+     */
+    style?: StyleProp<ViewStyle>;
+};
+type AppBarStartContentProps = AppBarSlotProps;
+type AppBarContentProps = AppBarSlotProps;
+type AppBarEndContentProps = AppBarSlotProps;
+
+declare const AppBar: React.FC<AppBarProps>;
+declare const AppBarStartContent: React.FC<AppBarStartContentProps>;
+declare const AppBarContent: React.FC<AppBarContentProps>;
+declare const AppBarEndContent: React.FC<AppBarEndContentProps>;
+
+export { AppBar, AppBarContent, type AppBarContentProps, AppBarEndContent, type AppBarEndContentProps, type AppBarProps, type AppBarSlotProps, AppBarStartContent, type AppBarStartContentProps, type AppBarVariant };

package/dist/app-bar/index.js

@@ -0,0 +1,142 @@
+import {
+  useXUITheme
+} from "../chunk-4KSZLONZ.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
+};