@xaui/native 0.1.4 → 0.2.0

package/README.md

@@ -25,14 +25,10 @@ The package also relies on `@xaui/core/theme` for the shared tokens.
 
 ```tsx
 import { XUIProvider } from '@xaui/native/core'
-import { theme, darkTheme } from '@xaui/core/theme'
+import { theme } from '@xaui/core/theme'
 
 export default function App() {
-  return (
-    <XUIProvider theme={theme} darkTheme={darkTheme}>
-      {/* your screens */}
-    </XUIProvider>
-  )
+  return <XUIProvider theme={theme}>{/* your screens */}</XUIProvider>
 }
 ```
 
@@ -47,8 +43,8 @@ function Banner() {
   const mode = useColorMode()
 
   return (
-    <View style={{ backgroundColor: theme.colors.primary.background }}>
-      <Text style={{ color: theme.colors.primary.foreground }}>
+    <View style={{ backgroundColor: theme.colors.primary.container }}>
+      <Text style={{ color: theme.colors.primary.onContainer }}>
         Current mode: {mode}
       </Text>
     </View>
@@ -60,117 +56,117 @@ function Banner() {
 
 This table lists all public components exported by `@xaui/native` and their import path.
 
-| Name | Description | Usage |
-| --- | --- | --- |
-| `XUIProvider` | Theme provider for all XAUI native components. | `import { XUIProvider } from '@xaui/native/core'` |
-| `Portal` | Renders content in a portal host layer. | `import { Portal } from '@xaui/native/core'` |
-| `PortalHost` | Host container for portal content. | `import { PortalHost } from '@xaui/native/core'` |
-| `Button` | Pressable button with variants, sizes, and loading state. | `import { Button } from '@xaui/native/button'` |
-| `IconButton` | Compact icon-only button variant. | `import { IconButton } from '@xaui/native/button'` |
-| `Checkbox` | Selection control with checked/indeterminate states. | `import { Checkbox } from '@xaui/native/checkbox'` |
-| `ExpansionPanel` | Accordion container for expandable sections. | `import { ExpansionPanel } from '@xaui/native/expansion-panel'` |
-| `ExpansionPanelItem` | Expandable item inside `ExpansionPanel`. | `import { ExpansionPanelItem } from '@xaui/native/expansion-panel'` |
-| `Progress` | Progress indicator with linear/circular rendering. | `import { Progress } from '@xaui/native/progress'` |
-| `ActivityIndicator` | Animated loading indicator component. | `import { ActivityIndicator } from '@xaui/native/indicator'` |
-| `Switch` | Toggle switch control. | `import { Switch } from '@xaui/native/switch'` |
-| `Slider` | Draggable value selector slider. | `import { Slider } from '@xaui/native/slider'` |
-| `Select` | Select input with trigger and list behavior. | `import { Select } from '@xaui/native/select'` |
-| `SelectItem` | Select option item for `Select`. | `import { SelectItem } from '@xaui/native/select'` |
-| `Dialog` | Modal dialog container component. | `import { Dialog } from '@xaui/native/dialog'` |
-| `DialogHeader` | Header section for `Dialog`. | `import { DialogHeader } from '@xaui/native/dialog'` |
-| `DialogBody` | Body/content section for `Dialog`. | `import { DialogBody } from '@xaui/native/dialog'` |
-| `DialogFooter` | Footer/actions section for `Dialog`. | `import { DialogFooter } from '@xaui/native/dialog'` |
-| `Divider` | Horizontal or vertical separator line. | `import { Divider } from '@xaui/native/divider'` |
-| `Drawer` | Side sheet / drawer container. | `import { Drawer } from '@xaui/native/drawer'` |
-| `Skeleton` | Placeholder loading block. | `import { Skeleton } from '@xaui/native/skeleton'` |
-| `Avatar` | User avatar (image, initials, icon). | `import { Avatar } from '@xaui/native/avatar'` |
-| `AvatarGroup` | Grouped avatars with overlap/stacking. | `import { AvatarGroup } from '@xaui/native/avatar'` |
-| `Badge` | Status/count badge component. | `import { Badge } from '@xaui/native/badge'` |
-| `Alert` | Contextual alert/message banner. | `import { Alert } from '@xaui/native/alert'` |
-| `Autocomplete` | Input with dynamic suggestions. | `import { Autocomplete } from '@xaui/native/autocomplete'` |
-| `AutocompleteItem` | Suggestion item for `Autocomplete`. | `import { AutocompleteItem } from '@xaui/native/autocomplete'` |
-| `DatePicker` | Date selection input/picker. | `import { DatePicker } from '@xaui/native/datepicker'` |
-| `Typography` | Themed text component with variants. | `import { Typography } from '@xaui/native/typography'` |
-| `TextSpan` | Text group primitive that shares inherited styles across nested typography. | `import { TextSpan } from '@xaui/native/typography'` |
-| `Column` | Vertical flex layout helper. | `import { Column } from '@xaui/native/view'` |
-| `Row` | Horizontal flex layout helper. | `import { Row } from '@xaui/native/view'` |
-| `Spacer` | Flexible space element in layouts. | `import { Spacer } from '@xaui/native/view'` |
-| `Padding` | Wrapper applying padding shortcuts. | `import { Padding } from '@xaui/native/view'` |
-| `Margin` | Wrapper applying margin shortcuts. | `import { Margin } from '@xaui/native/view'` |
-| `SizedBox` | Fixed width/height spacing box. | `import { SizedBox } from '@xaui/native/view'` |
-| `PositionedView` | Absolute/fixed positioning helper view. | `import { PositionedView } from '@xaui/native/view'` |
-| `BlurView` | Blurred background container. | `import { BlurView } from '@xaui/native/view'` |
-| `RoundedView` | View with configurable rounded corners. | `import { RoundedView } from '@xaui/native/view'` |
-| `AspectRatio` | Maintains a fixed aspect ratio for content. | `import { AspectRatio } from '@xaui/native/view'` |
-| `Grid` | Grid layout container. | `import { Grid } from '@xaui/native/view'` |
-| `GridItem` | Item element for `Grid`. | `import { GridItem } from '@xaui/native/view'` |
-| `GridBuilder` | Builder-based grid rendering helper. | `import { GridBuilder } from '@xaui/native/view'` |
-| `ConditionalView` | Conditionally renders with optional animation. | `import { ConditionalView } from '@xaui/native/view'` |
-| `MasonryGrid` | Masonry-style responsive grid container. | `import { MasonryGrid } from '@xaui/native/view'` |
-| `MasonryGridItem` | Item element for `MasonryGrid`. | `import { MasonryGridItem } from '@xaui/native/view'` |
-| `MasonryGridBuilder` | Builder-based masonry rendering helper. | `import { MasonryGridBuilder } from '@xaui/native/view'` |
-| `Carousel` | Swipeable carousel for paged content. | `import { Carousel } from '@xaui/native/carousel'` |
-| `SegmentButton` | Segmented control container. | `import { SegmentButton } from '@xaui/native/segment-button'` |
-| `SegmentButtonItem` | Segment item for `SegmentButton`. | `import { SegmentButtonItem } from '@xaui/native/segment-button'` |
-| `Tabs` | Tabs container with active tab state. | `import { Tabs } from '@xaui/native/tabs'` |
-| `Tab` | Individual tab item for `Tabs`. | `import { Tab } from '@xaui/native/tabs'` |
-| `Pager` | Paged container with swipe navigation. | `import { Pager } from '@xaui/native/pager'` |
-| `PagerItem` | Page item for `Pager`. | `import { PagerItem } from '@xaui/native/pager'` |
-| `Chip` | Compact labeled action/filter chip. | `import { Chip } from '@xaui/native/chip'` |
-| `ChipGroup` | Group manager for chip selection. | `import { ChipGroup } from '@xaui/native/chip'` |
-| `ChipItem` | Item variant used inside `ChipGroup`. | `import { ChipItem } from '@xaui/native/chip'` |
-| `BottomSheet` | Bottom sheet modal/panel. | `import { BottomSheet } from '@xaui/native/bottom-sheet'` |
-| `BottomTabBar` | Bottom navigation tab bar container. | `import { BottomTabBar } from '@xaui/native/bottom-tab-bar'` |
-| `BottomTabBarItem` | Tab item for `BottomTabBar`. | `import { BottomTabBarItem } from '@xaui/native/bottom-tab-bar'` |
-| `Menu` | Anchored contextual menu. | `import { Menu } from '@xaui/native/menu'` |
-| `MenuItem` | Action item for `Menu`. | `import { MenuItem } from '@xaui/native/menu'` |
-| `Fab` | Floating action button. | `import { Fab } from '@xaui/native/fab'` |
-| `FabMenu` | Expandable floating action menu. | `import { FabMenu } from '@xaui/native/fab-menu'` |
-| `FabMenuItem` | Action item for `FabMenu`. | `import { FabMenuItem } from '@xaui/native/fab-menu'` |
-| `FeatureDiscovery` | Spotlight/coach-mark discovery overlay. | `import { FeatureDiscovery } from '@xaui/native/feature-discovery'` |
-| `Card` | Card container surface. | `import { Card } from '@xaui/native/card'` |
-| `CardHeader` | Header section for `Card`. | `import { CardHeader } from '@xaui/native/card'` |
-| `CardBody` | Body/content section for `Card`. | `import { CardBody } from '@xaui/native/card'` |
-| `CardFooter` | Footer/actions section for `Card`. | `import { CardFooter } from '@xaui/native/card'` |
-| `CardTitle` | Title text slot for `Card`. | `import { CardTitle } from '@xaui/native/card'` |
-| `CardDescription` | Description text slot for `Card`. | `import { CardDescription } from '@xaui/native/card'` |
-| `TextInput` | Standard text input field. | `import { TextInput } from '@xaui/native/input'` |
-| `TextArea` | Multiline text input field. | `import { TextArea } from '@xaui/native/input'` |
-| `DateInput` | Date-only formatted input. | `import { DateInput } from '@xaui/native/input'` |
-| `TimeInput` | Time-only formatted input. | `import { TimeInput } from '@xaui/native/input'` |
-| `DateTimeInput` | Combined date-time formatted input. | `import { DateTimeInput } from '@xaui/native/input'` |
-| `OTPInput` | One-time password segmented input. | `import { OTPInput } from '@xaui/native/input'` |
-| `NumberInput` | Numeric input with controls/formatting. | `import { NumberInput } from '@xaui/native/input'` |
-| `List` | List container with selection options. | `import { List } from '@xaui/native/list'` |
-| `ListItem` | Item row for `List`. | `import { ListItem } from '@xaui/native/list'` |
-| `ListBuilder` | Builder-based dynamic list helper. | `import { ListBuilder } from '@xaui/native/list'` |
-| `Radio` | Single radio option control. | `import { Radio } from '@xaui/native/radio'` |
-| `RadioGroup` | Group controller for radio options. | `import { RadioGroup } from '@xaui/native/radio'` |
-| `Toolbar` | App toolbar/action bar container. | `import { Toolbar } from '@xaui/native/toolbar'` |
-| `ToolbarAction` | Action button/item for `Toolbar`. | `import { ToolbarAction } from '@xaui/native/toolbar'` |
-| `AppBar` | Top app bar container. | `import { AppBar } from '@xaui/native/app-bar'` |
-| `AppBarStartContent` | Leading slot for `AppBar`. | `import { AppBarStartContent } from '@xaui/native/app-bar'` |
-| `AppBarContent` | Main content slot for `AppBar`. | `import { AppBarContent } from '@xaui/native/app-bar'` |
-| `AppBarEndContent` | Trailing slot for `AppBar`. | `import { AppBarEndContent } from '@xaui/native/app-bar'` |
-| `TimePicker` | Time picker main component. | `import { TimePicker } from '@xaui/native/timepicker'` |
-| `TimePickerDialog` | Dialog variant for time selection. | `import { TimePickerDialog } from '@xaui/native/timepicker'` |
-| `TimePickerTrigger` | Trigger component for opening time picker UI. | `import { TimePickerTrigger } from '@xaui/native/timepicker'` |
-| `Stepper` | Multi-step progress/navigation component. | `import { Stepper } from '@xaui/native/stepper'` |
-| `StepperItem` | Individual step for `Stepper`. | `import { StepperItem } from '@xaui/native/stepper'` |
-| `MenuBox` | Menu box container with animated items. | `import { MenuBox } from '@xaui/native/menubox'` |
-| `MenuBoxItem` | Action item for `MenuBox`. | `import { MenuBoxItem } from '@xaui/native/menubox'` |
-| `DonutChartCard` | Card component rendering a donut chart. | `import { DonutChartCard } from '@xaui/native/chart'` |
-| `VerticalBarChartCard` | Card component rendering vertical bars. | `import { VerticalBarChartCard } from '@xaui/native/chart'` |
-| `PieChartCard` | Card component rendering a pie chart. | `import { PieChartCard } from '@xaui/native/chart'` |
-| `LineChartCard` | Card component rendering a line chart. | `import { LineChartCard } from '@xaui/native/chart'` |
-| `HeatmapChartCard` | Card component rendering a heatmap chart. | `import { HeatmapChartCard } from '@xaui/native/chart'` |
+| Name                   | Description                                                                 | Usage                                                               |
+| ---------------------- | --------------------------------------------------------------------------- | ------------------------------------------------------------------- |
+| `XUIProvider`          | Theme provider for all XAUI native components.                              | `import { XUIProvider } from '@xaui/native/core'`                   |
+| `Portal`               | Renders content in a portal host layer.                                     | `import { Portal } from '@xaui/native/core'`                        |
+| `PortalHost`           | Host container for portal content.                                          | `import { PortalHost } from '@xaui/native/core'`                    |
+| `Button`               | Pressable button with variants, sizes, and loading state.                   | `import { Button } from '@xaui/native/button'`                      |
+| `IconButton`           | Compact icon-only button variant.                                           | `import { IconButton } from '@xaui/native/button'`                  |
+| `Checkbox`             | Selection control with checked/indeterminate states.                        | `import { Checkbox } from '@xaui/native/checkbox'`                  |
+| `ExpansionPanel`       | Accordion container for expandable sections.                                | `import { ExpansionPanel } from '@xaui/native/expansion-panel'`     |
+| `ExpansionPanelItem`   | Expandable item inside `ExpansionPanel`.                                    | `import { ExpansionPanelItem } from '@xaui/native/expansion-panel'` |
+| `Progress`             | Progress indicator with linear/circular rendering.                          | `import { Progress } from '@xaui/native/progress'`                  |
+| `ActivityIndicator`    | Animated loading indicator component.                                       | `import { ActivityIndicator } from '@xaui/native/indicator'`        |
+| `Switch`               | Toggle switch control.                                                      | `import { Switch } from '@xaui/native/switch'`                      |
+| `Slider`               | Draggable value selector slider.                                            | `import { Slider } from '@xaui/native/slider'`                      |
+| `Select`               | Select input with trigger and list behavior.                                | `import { Select } from '@xaui/native/select'`                      |
+| `SelectItem`           | Select option item for `Select`.                                            | `import { SelectItem } from '@xaui/native/select'`                  |
+| `Dialog`               | Modal dialog container component.                                           | `import { Dialog } from '@xaui/native/dialog'`                      |
+| `DialogHeader`         | Header section for `Dialog`.                                                | `import { DialogHeader } from '@xaui/native/dialog'`                |
+| `DialogBody`           | Body/content section for `Dialog`.                                          | `import { DialogBody } from '@xaui/native/dialog'`                  |
+| `DialogFooter`         | Footer/actions section for `Dialog`.                                        | `import { DialogFooter } from '@xaui/native/dialog'`                |
+| `Divider`              | Horizontal or vertical separator line.                                      | `import { Divider } from '@xaui/native/divider'`                    |
+| `Drawer`               | Side sheet / drawer container.                                              | `import { Drawer } from '@xaui/native/drawer'`                      |
+| `Skeleton`             | Placeholder loading block.                                                  | `import { Skeleton } from '@xaui/native/skeleton'`                  |
+| `Avatar`               | User avatar (image, initials, icon).                                        | `import { Avatar } from '@xaui/native/avatar'`                      |
+| `AvatarGroup`          | Grouped avatars with overlap/stacking.                                      | `import { AvatarGroup } from '@xaui/native/avatar'`                 |
+| `Badge`                | Status/count badge component.                                               | `import { Badge } from '@xaui/native/badge'`                        |
+| `Alert`                | Contextual alert/message banner.                                            | `import { Alert } from '@xaui/native/alert'`                        |
+| `Autocomplete`         | Input with dynamic suggestions.                                             | `import { Autocomplete } from '@xaui/native/autocomplete'`          |
+| `AutocompleteItem`     | Suggestion item for `Autocomplete`.                                         | `import { AutocompleteItem } from '@xaui/native/autocomplete'`      |
+| `DatePicker`           | Date selection input/picker.                                                | `import { DatePicker } from '@xaui/native/datepicker'`              |
+| `Typography`           | Themed text component with variants.                                        | `import { Typography } from '@xaui/native/typography'`              |
+| `TextSpan`             | Text group primitive that shares inherited styles across nested typography. | `import { TextSpan } from '@xaui/native/typography'`                |
+| `Column`               | Vertical flex layout helper.                                                | `import { Column } from '@xaui/native/view'`                        |
+| `Row`                  | Horizontal flex layout helper.                                              | `import { Row } from '@xaui/native/view'`                           |
+| `Spacer`               | Flexible space element in layouts.                                          | `import { Spacer } from '@xaui/native/view'`                        |
+| `Padding`              | Wrapper applying padding shortcuts.                                         | `import { Padding } from '@xaui/native/view'`                       |
+| `Margin`               | Wrapper applying margin shortcuts.                                          | `import { Margin } from '@xaui/native/view'`                        |
+| `SizedBox`             | Fixed width/height spacing box.                                             | `import { SizedBox } from '@xaui/native/view'`                      |
+| `PositionedView`       | Absolute/fixed positioning helper view.                                     | `import { PositionedView } from '@xaui/native/view'`                |
+| `BlurView`             | Blurred background container.                                               | `import { BlurView } from '@xaui/native/view'`                      |
+| `RoundedView`          | View with configurable rounded corners.                                     | `import { RoundedView } from '@xaui/native/view'`                   |
+| `AspectRatio`          | Maintains a fixed aspect ratio for content.                                 | `import { AspectRatio } from '@xaui/native/view'`                   |
+| `Grid`                 | Grid layout container.                                                      | `import { Grid } from '@xaui/native/view'`                          |
+| `GridItem`             | Item element for `Grid`.                                                    | `import { GridItem } from '@xaui/native/view'`                      |
+| `GridBuilder`          | Builder-based grid rendering helper.                                        | `import { GridBuilder } from '@xaui/native/view'`                   |
+| `ConditionalView`      | Conditionally renders with optional animation.                              | `import { ConditionalView } from '@xaui/native/view'`               |
+| `MasonryGrid`          | Masonry-style responsive grid container.                                    | `import { MasonryGrid } from '@xaui/native/view'`                   |
+| `MasonryGridItem`      | Item element for `MasonryGrid`.                                             | `import { MasonryGridItem } from '@xaui/native/view'`               |
+| `MasonryGridBuilder`   | Builder-based masonry rendering helper.                                     | `import { MasonryGridBuilder } from '@xaui/native/view'`            |
+| `Carousel`             | Swipeable carousel for paged content.                                       | `import { Carousel } from '@xaui/native/carousel'`                  |
+| `SegmentButton`        | Segmented control container.                                                | `import { SegmentButton } from '@xaui/native/segment-button'`       |
+| `SegmentButtonItem`    | Segment item for `SegmentButton`.                                           | `import { SegmentButtonItem } from '@xaui/native/segment-button'`   |
+| `Tabs`                 | Tabs container with active tab state.                                       | `import { Tabs } from '@xaui/native/tabs'`                          |
+| `Tab`                  | Individual tab item for `Tabs`.                                             | `import { Tab } from '@xaui/native/tabs'`                           |
+| `Pager`                | Paged container with swipe navigation.                                      | `import { Pager } from '@xaui/native/pager'`                        |
+| `PagerItem`            | Page item for `Pager`.                                                      | `import { PagerItem } from '@xaui/native/pager'`                    |
+| `Chip`                 | Compact labeled action/filter chip.                                         | `import { Chip } from '@xaui/native/chip'`                          |
+| `ChipGroup`            | Group manager for chip selection.                                           | `import { ChipGroup } from '@xaui/native/chip'`                     |
+| `ChipItem`             | Item variant used inside `ChipGroup`.                                       | `import { ChipItem } from '@xaui/native/chip'`                      |
+| `BottomSheet`          | Bottom sheet modal/panel.                                                   | `import { BottomSheet } from '@xaui/native/bottom-sheet'`           |
+| `BottomTabBar`         | Bottom navigation tab bar container.                                        | `import { BottomTabBar } from '@xaui/native/bottom-tab-bar'`        |
+| `BottomTabBarItem`     | Tab item for `BottomTabBar`.                                                | `import { BottomTabBarItem } from '@xaui/native/bottom-tab-bar'`    |
+| `Menu`                 | Anchored contextual menu.                                                   | `import { Menu } from '@xaui/native/menu'`                          |
+| `MenuItem`             | Action item for `Menu`.                                                     | `import { MenuItem } from '@xaui/native/menu'`                      |
+| `Fab`                  | Floating action button.                                                     | `import { Fab } from '@xaui/native/fab'`                            |
+| `FabMenu`              | Expandable floating action menu.                                            | `import { FabMenu } from '@xaui/native/fab-menu'`                   |
+| `FabMenuItem`          | Action item for `FabMenu`.                                                  | `import { FabMenuItem } from '@xaui/native/fab-menu'`               |
+| `FeatureDiscovery`     | Spotlight/coach-mark discovery overlay.                                     | `import { FeatureDiscovery } from '@xaui/native/feature-discovery'` |
+| `Card`                 | Card container surface.                                                     | `import { Card } from '@xaui/native/card'`                          |
+| `CardHeader`           | Header section for `Card`.                                                  | `import { CardHeader } from '@xaui/native/card'`                    |
+| `CardBody`             | Body/content section for `Card`.                                            | `import { CardBody } from '@xaui/native/card'`                      |
+| `CardFooter`           | Footer/actions section for `Card`.                                          | `import { CardFooter } from '@xaui/native/card'`                    |
+| `CardTitle`            | Title text slot for `Card`.                                                 | `import { CardTitle } from '@xaui/native/card'`                     |
+| `CardDescription`      | Description text slot for `Card`.                                           | `import { CardDescription } from '@xaui/native/card'`               |
+| `TextInput`            | Standard text input field.                                                  | `import { TextInput } from '@xaui/native/input'`                    |
+| `TextArea`             | Multiline text input field.                                                 | `import { TextArea } from '@xaui/native/input'`                     |
+| `DateInput`            | Date-only formatted input.                                                  | `import { DateInput } from '@xaui/native/input'`                    |
+| `TimeInput`            | Time-only formatted input.                                                  | `import { TimeInput } from '@xaui/native/input'`                    |
+| `DateTimeInput`        | Combined date-time formatted input.                                         | `import { DateTimeInput } from '@xaui/native/input'`                |
+| `OTPInput`             | One-time password segmented input.                                          | `import { OTPInput } from '@xaui/native/input'`                     |
+| `NumberInput`          | Numeric input with controls/formatting.                                     | `import { NumberInput } from '@xaui/native/input'`                  |
+| `List`                 | List container with selection options.                                      | `import { List } from '@xaui/native/list'`                          |
+| `ListItem`             | Item row for `List`.                                                        | `import { ListItem } from '@xaui/native/list'`                      |
+| `ListBuilder`          | Builder-based dynamic list helper.                                          | `import { ListBuilder } from '@xaui/native/list'`                   |
+| `Radio`                | Single radio option control.                                                | `import { Radio } from '@xaui/native/radio'`                        |
+| `RadioGroup`           | Group controller for radio options.                                         | `import { RadioGroup } from '@xaui/native/radio'`                   |
+| `Toolbar`              | App toolbar/action bar container.                                           | `import { Toolbar } from '@xaui/native/toolbar'`                    |
+| `ToolbarAction`        | Action button/item for `Toolbar`.                                           | `import { ToolbarAction } from '@xaui/native/toolbar'`              |
+| `AppBar`               | Top app bar container.                                                      | `import { AppBar } from '@xaui/native/app-bar'`                     |
+| `AppBarStartContent`   | Leading slot for `AppBar`.                                                  | `import { AppBarStartContent } from '@xaui/native/app-bar'`         |
+| `AppBarContent`        | Main content slot for `AppBar`.                                             | `import { AppBarContent } from '@xaui/native/app-bar'`              |
+| `AppBarEndContent`     | Trailing slot for `AppBar`.                                                 | `import { AppBarEndContent } from '@xaui/native/app-bar'`           |
+| `TimePicker`           | Time picker main component.                                                 | `import { TimePicker } from '@xaui/native/timepicker'`              |
+| `TimePickerDialog`     | Dialog variant for time selection.                                          | `import { TimePickerDialog } from '@xaui/native/timepicker'`        |
+| `TimePickerTrigger`    | Trigger component for opening time picker UI.                               | `import { TimePickerTrigger } from '@xaui/native/timepicker'`       |
+| `Stepper`              | Multi-step progress/navigation component.                                   | `import { Stepper } from '@xaui/native/stepper'`                    |
+| `StepperItem`          | Individual step for `Stepper`.                                              | `import { StepperItem } from '@xaui/native/stepper'`                |
+| `MenuBox`              | Menu box container with animated items.                                     | `import { MenuBox } from '@xaui/native/menubox'`                    |
+| `MenuBoxItem`          | Action item for `MenuBox`.                                                  | `import { MenuBoxItem } from '@xaui/native/menubox'`                |
+| `DonutChartCard`       | Card component rendering a donut chart.                                     | `import { DonutChartCard } from '@xaui/native/chart'`               |
+| `VerticalBarChartCard` | Card component rendering vertical bars.                                     | `import { VerticalBarChartCard } from '@xaui/native/chart'`         |
+| `PieChartCard`         | Card component rendering a pie chart.                                       | `import { PieChartCard } from '@xaui/native/chart'`                 |
+| `LineChartCard`        | Card component rendering a line chart.                                      | `import { LineChartCard } from '@xaui/native/chart'`                |
+| `HeatmapChartCard`     | Card component rendering a heatmap chart.                                   | `import { HeatmapChartCard } from '@xaui/native/chart'`             |
 
 ## Theme hooks & utilities
 
 - `useXUITheme()` must be used within `XUIProvider`; it throws if the provider is missing.
 - `useXUIColors()` is a shortcut for reading just the color tokens.
 - `useColorMode()` returns `light` or `dark` based on React Native's `useColorScheme()`.
-- `XUIProvider` accepts `theme` and `darkTheme` as `DeepPartial<XUITheme>` so you can override partial token sets without redefining the entire theme.
+- `XUIProvider` accepts a single `theme` object (`DeepPartial<XUITheme>`) for partial token overrides.
 
 ## Testing & build
 

package/dist/alert/index.cjs

@@ -2,7 +2,7 @@
 
 
 
-var _chunkRZJFCDFScjs = require('../chunk-RZJFCDFS.cjs');
+var _chunk7UFBLUMVcjs = require('../chunk-7UFBLUMV.cjs');
 
 // src/components/alert/alert.tsx
 
@@ -64,7 +64,7 @@ var styles = _reactnative.StyleSheet.create({
 
 var _core = require('@xaui/core');
 var useAlertColorScheme = (themeColor) => {
-  const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
+  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
   const safeThemeColor = _core.getSafeThemeColor.call(void 0, themeColor);
   return {
     theme,
@@ -75,8 +75,7 @@ var useAlertColorScheme = (themeColor) => {
 var useAlertContainerStyles = (themeColor, variant) => {
   const { theme, colorScheme, isDefault } = useAlertColorScheme(themeColor);
   const containerStyles = _react.useMemo.call(void 0, () => {
-    const isDark = theme.mode === "dark";
-    const backgroundColor = variant === "solid" ? isDark ? colorScheme.background : colorScheme.main : variant === "flat" ? isDark ? _core.withOpacity.call(void 0, colorScheme.background, 0.5) : colorScheme.background : variant === "faded" ? _core.withOpacity.call(void 0, colorScheme.background, 0.75) : "transparent";
+    const backgroundColor = variant === "solid" ? colorScheme.main : variant === "flat" ? colorScheme.container : variant === "faded" ? _core.withOpacity.call(void 0, colorScheme.container, 0.75) : "transparent";
     const borderWidth = variant === "bordered" || variant === "faded" ? theme.borderWidth.md : 0;
     const borderColor = variant === "bordered" ? _core.withOpacity.call(void 0, colorScheme.main, 0.75) : variant === "faded" ? _core.withOpacity.call(void 0, isDefault ? theme.colors.foreground : colorScheme.main, 0.25) : "transparent";
     return {
@@ -92,8 +91,7 @@ var useAlertContainerStyles = (themeColor, variant) => {
 var useAlertIconWrapperStyles = (themeColor, variant) => {
   const { theme, colorScheme, isDefault } = useAlertColorScheme(themeColor);
   const iconWrapperStyles = _react.useMemo.call(void 0, () => {
-    const isDark = theme.mode === "dark";
-    const backgroundColor = variant === "solid" ? _core.withOpacity.call(void 0, isDark ? colorScheme.main : colorScheme.foreground, 0.16) : _core.withOpacity.call(void 0, isDefault ? theme.colors.foreground : colorScheme.main, 0.12);
+    const backgroundColor = variant === "solid" ? _core.withOpacity.call(void 0, colorScheme.onMain, 0.16) : _core.withOpacity.call(void 0, isDefault ? theme.colors.foreground : colorScheme.main, 0.12);
     const borderWidth = variant === "bordered" || variant === "faded" ? theme.borderWidth.xs : 0;
     const borderColor = _core.withOpacity.call(void 0, 
       isDefault ? theme.colors.foreground : colorScheme.main,
@@ -110,8 +108,7 @@ var useAlertIconWrapperStyles = (themeColor, variant) => {
 var useAlertTextStyles = (themeColor, variant) => {
   const { theme, colorScheme, isDefault } = useAlertColorScheme(themeColor);
   const textStyles = _react.useMemo.call(void 0, () => {
-    const isDark = theme.mode === "dark";
-    const baseTextColor = variant === "solid" ? isDark ? colorScheme.main : colorScheme.foreground : isDefault ? theme.colors.foreground : colorScheme.main;
+    const baseTextColor = variant === "solid" ? colorScheme.onMain : variant === "flat" || variant === "faded" ? isDefault ? theme.colors.foreground : colorScheme.onContainer : isDefault ? theme.colors.foreground : colorScheme.main;
     return {
       titleStyles: {
         color: baseTextColor,
@@ -240,7 +237,7 @@ var Alert = ({
   const visible = isControlled ? isVisible : internalVisible;
   const opacity = _reactnativereanimated.useSharedValue.call(void 0, 1);
   const scale = _reactnativereanimated.useSharedValue.call(void 0, 1);
-  const radiusStyles = _chunkRZJFCDFScjs.useBorderRadiusStyles.call(void 0, radius);
+  const radiusStyles = _chunk7UFBLUMVcjs.useBorderRadiusStyles.call(void 0, radius);
   const containerStyles = useAlertContainerStyles(themeColor, variant);
   const iconWrapperStyles = useAlertIconWrapperStyles(themeColor, variant);
   const { titleStyles, descriptionStyles, iconColor, closeButtonColor } = useAlertTextStyles(themeColor, variant);

package/dist/alert/index.js

@@ -2,7 +2,7 @@ import "../chunk-SHBDANQN.js";
 import {
   useBorderRadiusStyles,
   useXUITheme
-} from "../chunk-LVNBYERF.js";
+} from "../chunk-RBSA4NH4.js";
 
 // src/components/alert/alert.tsx
 import React2, {
@@ -75,8 +75,7 @@ var useAlertColorScheme = (themeColor) => {
 var useAlertContainerStyles = (themeColor, variant) => {
   const { theme, colorScheme, isDefault } = useAlertColorScheme(themeColor);
   const containerStyles = useMemo(() => {
-    const isDark = theme.mode === "dark";
-    const backgroundColor = variant === "solid" ? isDark ? colorScheme.background : colorScheme.main : variant === "flat" ? isDark ? withOpacity(colorScheme.background, 0.5) : colorScheme.background : variant === "faded" ? withOpacity(colorScheme.background, 0.75) : "transparent";
+    const backgroundColor = variant === "solid" ? colorScheme.main : variant === "flat" ? colorScheme.container : variant === "faded" ? withOpacity(colorScheme.container, 0.75) : "transparent";
     const borderWidth = variant === "bordered" || variant === "faded" ? theme.borderWidth.md : 0;
     const borderColor = variant === "bordered" ? withOpacity(colorScheme.main, 0.75) : variant === "faded" ? withOpacity(isDefault ? theme.colors.foreground : colorScheme.main, 0.25) : "transparent";
     return {
@@ -92,8 +91,7 @@ var useAlertContainerStyles = (themeColor, variant) => {
 var useAlertIconWrapperStyles = (themeColor, variant) => {
   const { theme, colorScheme, isDefault } = useAlertColorScheme(themeColor);
   const iconWrapperStyles = useMemo(() => {
-    const isDark = theme.mode === "dark";
-    const backgroundColor = variant === "solid" ? withOpacity(isDark ? colorScheme.main : colorScheme.foreground, 0.16) : withOpacity(isDefault ? theme.colors.foreground : colorScheme.main, 0.12);
+    const backgroundColor = variant === "solid" ? withOpacity(colorScheme.onMain, 0.16) : withOpacity(isDefault ? theme.colors.foreground : colorScheme.main, 0.12);
     const borderWidth = variant === "bordered" || variant === "faded" ? theme.borderWidth.xs : 0;
     const borderColor = withOpacity(
       isDefault ? theme.colors.foreground : colorScheme.main,
@@ -110,8 +108,7 @@ var useAlertIconWrapperStyles = (themeColor, variant) => {
 var useAlertTextStyles = (themeColor, variant) => {
   const { theme, colorScheme, isDefault } = useAlertColorScheme(themeColor);
   const textStyles = useMemo(() => {
-    const isDark = theme.mode === "dark";
-    const baseTextColor = variant === "solid" ? isDark ? colorScheme.main : colorScheme.foreground : isDefault ? theme.colors.foreground : colorScheme.main;
+    const baseTextColor = variant === "solid" ? colorScheme.onMain : variant === "flat" || variant === "faded" ? isDefault ? theme.colors.foreground : colorScheme.onContainer : isDefault ? theme.colors.foreground : colorScheme.main;
     return {
       titleStyles: {
         color: baseTextColor,

package/dist/app-bar/index.cjs

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }require('../chunk-56RPWZD2.cjs');
 
 
-var _chunkRZJFCDFScjs = require('../chunk-RZJFCDFS.cjs');
+var _chunk7UFBLUMVcjs = require('../chunk-7UFBLUMV.cjs');
 
 // src/components/app-bar/app-bar.tsx
 var _react = require('react'); var _react2 = _interopRequireDefault(_react);
@@ -23,7 +23,7 @@ var resolveShadowStyle = (elevation, shadows) => {
   return shadows.xl;
 };
 var useAppBarElevationStyles = (elevation = 0) => {
-  const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
+  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
   return _react.useMemo.call(void 0, () => {
     if (elevation <= 0) {
       return {};
@@ -94,13 +94,13 @@ var AppBar = ({
   children,
   style
 }) => {
-  const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
+  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
   const elevationStyles = useAppBarElevationStyles(elevation);
   const isFloating = variant === "floating";
   const safeThemeColor = _core.getSafeThemeColor.call(void 0, themeColor);
   const colorScheme = theme.colors[safeThemeColor];
   const isDefaultThemeColor = safeThemeColor === "default";
-  const backgroundColor = isDefaultThemeColor ? theme.mode === "dark" ? theme.colors.default.background : isFloating ? theme.palette.gray[200] : "#FFFFFF" : colorScheme.background;
+  const backgroundColor = isDefaultThemeColor ? theme.mode === "dark" ? theme.colors.default.container : isFloating ? theme.palette.gray[200] : "#FFFFFF" : colorScheme.container;
   const borderBottomColor = isDefaultThemeColor ? theme.mode === "dark" ? "rgba(255, 255, 255, 0.06)" : "rgba(0, 0, 0, 0.08)" : colorScheme.main;
   return /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: [styles.container, isFloating && styles.floatingContainer] }, /* @__PURE__ */ _react2.default.createElement(
     _reactnative.View,

package/dist/app-bar/index.js

@@ -1,7 +1,7 @@
 import "../chunk-SHBDANQN.js";
 import {
   useXUITheme
-} from "../chunk-LVNBYERF.js";
+} from "../chunk-RBSA4NH4.js";
 
 // src/components/app-bar/app-bar.tsx
 import React from "react";
@@ -100,7 +100,7 @@ var AppBar = ({
   const safeThemeColor = getSafeThemeColor(themeColor);
   const colorScheme = theme.colors[safeThemeColor];
   const isDefaultThemeColor = safeThemeColor === "default";
-  const backgroundColor = isDefaultThemeColor ? theme.mode === "dark" ? theme.colors.default.background : isFloating ? theme.palette.gray[200] : "#FFFFFF" : colorScheme.background;
+  const backgroundColor = isDefaultThemeColor ? theme.mode === "dark" ? theme.colors.default.container : isFloating ? theme.palette.gray[200] : "#FFFFFF" : colorScheme.container;
   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,

package/dist/autocomplete/index.cjs

@@ -5,7 +5,7 @@ require('../chunk-56RPWZD2.cjs');
 
 
 
-var _chunkRZJFCDFScjs = require('../chunk-RZJFCDFS.cjs');
+var _chunk7UFBLUMVcjs = require('../chunk-7UFBLUMV.cjs');
 
 // src/components/autocomplete/autocomplete.tsx
 var _react = require('react'); var _react2 = _interopRequireDefault(_react);
@@ -24,13 +24,13 @@ var AutocompleteContext = _react.createContext.call(void 0, {
 var _core = require('@xaui/core');
 var _palette = require('@xaui/core/palette');
 var useAutocompleteColorScheme = (themeColor) => {
-  const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
+  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
   const safeThemeColor = _core.getSafeThemeColor.call(void 0, themeColor);
   const colorScheme = theme.colors[safeThemeColor];
   return { theme, colorScheme };
 };
 var useAutocompleteSizeStyles = (size) => {
-  const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
+  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
   return _react.useMemo.call(void 0, () => {
     const sizes = {
       xs: {
@@ -66,7 +66,7 @@ var useAutocompleteSizeStyles = (size) => {
   }, [size, theme]);
 };
 var useAutocompleteRadiusStyles = (radius) => {
-  const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
+  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
   const radiusStyles = _react.useMemo.call(void 0, () => {
     const radii = {
       none: theme.borderRadius.none,
@@ -93,28 +93,23 @@ var useAutocompleteVariantStyles = (themeColor, variant, isInvalid) => {
   const { theme, colorScheme } = useAutocompleteColorScheme(themeColor);
   return _react.useMemo.call(void 0, () => {
     let borderColor = isInvalid ? theme.colors.danger.main : colorScheme.main;
-    if ((variant === "outlined" || variant === "faded") && themeColor === "default") {
+    if (variant === "bordered" && themeColor === "default") {
       borderColor = _palette.colors.gray[300];
     }
     const styles4 = {
-      outlined: {
+      bordered: {
         backgroundColor: "transparent",
         borderWidth: theme.borderWidth.md,
         borderColor
       },
-      flat: {
-        backgroundColor: colorScheme.background,
+      colored: {
+        backgroundColor: _core.withOpacity.call(void 0, colorScheme.container, 0.5),
         borderWidth: 0
       },
       light: {
         backgroundColor: "transparent",
         borderWidth: 0
       },
-      faded: {
-        backgroundColor: `${colorScheme.background}90`,
-        borderWidth: theme.borderWidth.md,
-        borderColor
-      },
       underlined: {
         backgroundColor: "transparent",
         borderBottomWidth: theme.borderWidth.md,
@@ -140,7 +135,7 @@ var useAutocompleteLabelStyle = (themeColor, isInvalid, labelSize) => {
   }, [isInvalid, labelSize, theme, themeColor, colorScheme]);
 };
 var useAutocompleteHelperColor = (isInvalid) => {
-  const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
+  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
   return _react.useMemo.call(void 0, () => {
     if (isInvalid) {
       return theme.colors.danger.main;
@@ -434,7 +429,7 @@ var AutocompleteDialogHeader = ({
   onFocus,
   onBlur
 }) => {
-  const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
+  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
   return /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: styles2.header }, title ? /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: styles2.titleRow }, /* @__PURE__ */ _react2.default.createElement(
     _reactnative.Pressable,
     {
@@ -455,7 +450,7 @@ var AutocompleteDialogHeader = ({
       style: [
         styles2.input,
         {
-          backgroundColor: theme.colors.default.background,
+          backgroundColor: theme.colors.default.container,
           color: theme.colors.foreground
         },
         inputTextStyle
@@ -534,7 +529,7 @@ var AutocompleteDialog = ({
   onFocus,
   onBlur
 }) => {
-  const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
+  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
   const { width: screenWidth, height: screenHeight } = _reactnative.useWindowDimensions.call(void 0, );
   const fadeAnim = _react.useRef.call(void 0, new _reactnative.Animated.Value(0)).current;
   const slideAnim = _react.useRef.call(void 0, new _reactnative.Animated.Value(0)).current;
@@ -562,7 +557,7 @@ var AutocompleteDialog = ({
     [children]
   );
   const checkmarkColor = theme.colors[themeColor].main;
-  const checkmarkBackgroundColor = theme.colors[themeColor].background;
+  const checkmarkBackgroundColor = theme.colors[themeColor].container;
   useAutocompleteDialogAnimation({ visible, fadeAnim, slideAnim, scaleAnim });
   _react.useEffect.call(void 0, () => {
     if (!visible) return;
@@ -632,7 +627,7 @@ var AutocompleteDialog = ({
       onBlur
     }
   );
-  return /* @__PURE__ */ _react2.default.createElement(_chunkRZJFCDFScjs.Portal, null, /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: [overlayStyle, style] }, /* @__PURE__ */ _react2.default.createElement(_reactnative.Animated.View, { style: [styles2.backdrop, { opacity: fadeAnim }] }), /* @__PURE__ */ _react2.default.createElement(_reactnative.Animated.View, { style: [styles2.dialogContainer, containerAnimatedStyle] }, /* @__PURE__ */ _react2.default.createElement(
+  return /* @__PURE__ */ _react2.default.createElement(_chunk7UFBLUMVcjs.Portal, null, /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: [overlayStyle, style] }, /* @__PURE__ */ _react2.default.createElement(_reactnative.Animated.View, { style: [styles2.backdrop, { opacity: fadeAnim }] }), /* @__PURE__ */ _react2.default.createElement(_reactnative.Animated.View, { style: [styles2.dialogContainer, containerAnimatedStyle] }, /* @__PURE__ */ _react2.default.createElement(
     _reactnative.View,
     {
       style: [styles2.container, { backgroundColor: theme.colors.background }]
@@ -748,7 +743,7 @@ var AutocompleteTrigger = ({
 var defaultPlaceholder = "Search...";
 var Autocomplete = ({
   children,
-  variant = "flat",
+  variant = "colored",
   themeColor = "default",
   size = "md",
   radius = "md",
@@ -820,7 +815,7 @@ var Autocomplete = ({
       (item) => defaultFilterFunction(item.labelText, currentInputValue)
     );
   }, [disableLocalFilter, items, currentInputValue]);
-  const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
+  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
   const sizeStyles = useAutocompleteSizeStyles(size);
   const { radiusStyles } = useAutocompleteRadiusStyles(radius);
   const variantStyles = useAutocompleteVariantStyles(themeColor, variant, isInvalid);
@@ -981,7 +976,7 @@ var styles3 = _reactnative.StyleSheet.create({
 
 
 var useAutocompleteItemSizeStyles = (size) => {
-  const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
+  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
   return _react.useMemo.call(void 0, () => {
     const sizes = {
       xs: {
@@ -1013,7 +1008,7 @@ var useAutocompleteItemSizeStyles = (size) => {
   }, [size, theme]);
 };
 var useAutocompleteItemBackgroundColor = (themeColor, isSelected) => {
-  const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
+  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
   const safeThemeColor = _core.getSafeThemeColor.call(void 0, themeColor);
   const colorScheme = theme.colors[safeThemeColor];
   return _react.useMemo.call(void 0, () => {
@@ -1021,7 +1016,7 @@ var useAutocompleteItemBackgroundColor = (themeColor, isSelected) => {
   }, [isSelected, colorScheme]);
 };
 var useAutocompleteItemTextColors = () => {
-  const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
+  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
   return _react.useMemo.call(void 0, () => {
     return {
       textColor: theme.colors.foreground,
@@ -1030,7 +1025,7 @@ var useAutocompleteItemTextColors = () => {
   }, [theme]);
 };
 var useAutocompleteItemCheckmarkColor = (themeColor) => {
-  const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
+  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
   const safeThemeColor = _core.getSafeThemeColor.call(void 0, themeColor);
   const colorScheme = theme.colors[safeThemeColor];
   return _react.useMemo.call(void 0, () => {