@xaui/native 0.0.23 → 0.0.25

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,195 @@ 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/{components/alert/alert.type.d.ts → alert/index.d.cts}

@@ -1,9 +1,10 @@
-import { ReactNode } from 'react';
-import type { TextStyle, ViewStyle } from 'react-native';
-import type { ThemeColor } from '../../types';
-export type AlertVariant = 'solid' | 'bordered' | 'flat' | 'faded';
-export type AlertRadius = 'none' | 'sm' | 'md' | 'lg' | 'full';
-export type AlertEvents = {
+import React, { ReactNode } from 'react';
+import { ViewStyle, TextStyle } from 'react-native';
+import { T as ThemeColor } from '../index-BOw6tbkc.cjs';
+
+type AlertVariant = 'solid' | 'bordered' | 'flat' | 'faded';
+type AlertRadius = 'none' | 'sm' | 'md' | 'lg' | 'full';
+type AlertEvents = {
     /**
      * Callback fired when the alert is closed.
      */
@@ -27,7 +28,7 @@ type AlertCustomAppearance = {
      */
     description?: TextStyle;
 };
-export type AlertProps = {
+type AlertProps = {
     /**
      * The title of the alert.
      */
@@ -83,5 +84,7 @@ export type AlertProps = {
      */
     children?: ReactNode;
 } & AlertEvents;
-export {};
-//# sourceMappingURL=alert.type.d.ts.map
+
+declare const Alert: React.FC<AlertProps>;
+
+export { Alert, type AlertProps, type AlertVariant };

package/dist/alert/index.d.ts

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

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

@@ -1,3 +1,52 @@
-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
+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

@@ -1,7 +1,6 @@
-import "../chunk-DXXNBF5P.js";
 import {
   useXUITheme
-} from "../chunk-LTKYHG5V.js";
+} from "../chunk-4KSZLONZ.js";
 
 // src/components/app-bar/app-bar.tsx
 import React from "react";

package/dist/{components/autocomplete/autocomplete.type.d.mts → autocomplete/index.d.cts}

@@ -1,9 +1,10 @@
-import type { ReactNode } from 'react';
-import type { TextStyle, ViewStyle } from 'react-native';
-import type { Radius, Size, ThemeColor } from '../../types';
-export type AutocompleteVariant = 'outlined' | 'flat' | 'light' | 'faded' | 'underlined';
-export type AutocompleteLabelPlacement = 'inside' | 'outside' | 'outside-left' | 'outside-top';
-export type AutocompleteMenuTrigger = 'focus' | 'input' | 'manual';
+import React, { ReactNode } from 'react';
+import { ViewStyle, TextStyle } from 'react-native';
+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
@@ -24,7 +25,7 @@ type AutocompleteItemCustomAppearance = {
      */
     text?: TextStyle;
 };
-export type AutocompleteProps = {
+type AutocompleteProps = {
     children: ReactNode;
     variant?: AutocompleteVariant;
     themeColor?: ThemeColor;
@@ -54,10 +55,10 @@ export type AutocompleteProps = {
     menuTrigger?: AutocompleteMenuTrigger;
     customAppearance?: AutocompleteCustomAppearance;
 } & AutocompletePrivateProps & AutocompleteEvents;
-export type AutocompletePrivateProps = {
+type AutocompletePrivateProps = {
     _isRequired?: boolean;
 };
-export type AutocompleteEvents = {
+type AutocompleteEvents = {
     onClose?: () => void;
     onOpenChange?: (isOpen: boolean) => void;
     onSelectionChange?: (key: string | null) => void;
@@ -66,7 +67,7 @@ export type AutocompleteEvents = {
     onFocus?: () => void;
     onBlur?: () => void;
 };
-export type AutocompleteItemProps = {
+type AutocompleteItemProps = {
     label: ReactNode;
     value: string;
     description?: ReactNode;
@@ -79,5 +80,9 @@ export type AutocompleteItemProps = {
     customAppearance?: AutocompleteItemCustomAppearance;
     onSelected?: () => void;
 };
-export {};
-//# sourceMappingURL=autocomplete.type.d.ts.map
+
+declare const Autocomplete: React.FC<AutocompleteProps>;
+
+declare const AutocompleteItem: React.FC<AutocompleteItemProps>;
+
+export { Autocomplete, AutocompleteItem, type AutocompleteItemProps, type AutocompleteProps };

package/dist/autocomplete/index.d.ts

@@ -1,4 +1,88 @@
-export { Autocomplete } from './autocomplete';
-export { AutocompleteItem } from './autocomplete-item';
-export type { AutocompleteProps, AutocompleteItemProps } from './autocomplete.type';
-//# sourceMappingURL=index.d.ts.map
+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 };