@xaui/native 0.0.27 → 0.0.29

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 bamory grams
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -2,6 +2,8 @@
 
 React Native components and hooks that extend the core `@xaui/core` theme system. This mobile layer ships animated primitives (buttons, indicators, hooks) ready to use with `XUIProvider`.
 
+**[Full documentation → ui.xtartapp.com](https://ui.xtartapp.com)**
+
 ## Installation
 
 ```bash
@@ -54,234 +56,109 @@ function Banner() {
 }
 ```
 
-## Key components
-
-### `Button`
-
-- Variants: `solid`, `outlined`, `flat`, `light`, `faded`
-- Sizes: `xs`, `sm`, `md`, `lg`
-- Radii: `none`, `sm`, `md`, `lg`, `full`
-- Supports start/end content, `fullWidth`, `isDisabled`, `isLoading` with an integrated spinner
-- Declarative press animations (scale, opacity, spring)
-
-```tsx
-<Button
-  themeColor="primary"
-  variant="solid"
-  elevation={2}
-  size="lg"
-  radius="full"
-  isLoading={saving}
-  spinnerPlacement="end"
-  onPress={handleSave}
->
-  Save changes
-</Button>
-```
-
-### `ActivityIndicator`
-
-- Variants: `circular` (default size 40) and `linear` (custom height)
-- Draws from the theme colors (`primary`, `secondary`, etc.) and optionally renders a track with `showTrack`
-- `disableAnimation` is provided for snapshots or silent loading states
-
-```tsx
-<ActivityIndicator
-  variant="linear"
-  themeColor="secondary"
-  showTrack
-  borderRadius={4}
-/>
-```
-
-### `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>
-```
+## Components (exhaustive)
+
+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'` |
+| `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'` |
+| `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