rn-feav-ui 1.0.4 → 1.0.6

package/readme.md

@@ -1,12 +1,13 @@
 # rn-feav-ui
 
-Shadcn-style React Native UI kit with theme support (light/dark).
+Shadcn-style UI kit for React Native with `FEA`-prefixed component names to avoid import conflicts.
 
 ## Features
 
-- Simple, consistent “shadcn-like” components (Button/Input/Card/etc.)
-- Light/Dark mode via `ThemeFEAVUiProvider`
-- Pure React Native primitives (minimal native dependencies)
+- Full React Native component set (shadcn-inspired API and visuals)
+- Light/Dark theme tokens via `ThemeFEAVUiProvider`
+- TypeScript-ready auto-complete (`types` + `exports` configured)
+- No extra UI dependency required for core components
 
 ## Installation
 
@@ -14,28 +15,22 @@ Shadcn-style React Native UI kit with theme support (light/dark).
 npm install rn-feav-ui
 ```
 
-### TypeScript IntelliSense (auto-complete)
-
-Thư viện đã cấu hình `types`/`exports` nên bạn có thể import trực tiếp từ package root để IDE gợi ý component:
-
-```ts
-import { ButtonFEA, InputFEA, CardFEA, ThemeFEAVUiProvider } from "rn-feav-ui";
-```
-
-## Usage
-
-Wrap your app with the theme provider:
+## Quick Start
 
 ```tsx
 import * as React from "react";
-import { ThemeFEAVUiProvider } from "rn-feav-ui";
+import { ThemeFEAVUiProvider, SonnerFEA } from "rn-feav-ui";
 
 export default function App() {
-  return <ThemeFEAVUiProvider>{/* your screens */}</ThemeFEAVUiProvider>;
+  return (
+    <ThemeFEAVUiProvider>
+      <SonnerFEA>{/* screens */}</SonnerFEA>
+    </ThemeFEAVUiProvider>
+  );
 }
 ```
 
-Example (Button + Input + Dialog):
+Example:
 
 ```tsx
 import * as React from "react";
@@ -50,7 +45,6 @@ import {
 
 export function Example() {
   const [open, setOpen] = React.useState(false);
-
   return (
     <>
       <InputFEA placeholder="Email" />
@@ -69,19 +63,611 @@ export function Example() {
 }
 ```
 
-## Component List
+## Components
 
-Core components (exported from `rn-feav-ui`):
-- Layout/Surface: `CardFEA`, `GlassCardFEA`, `SeparatorFEA`
-- Navigation/Containers: `NavbarFEA`, `TabBarFEA`, `TabsFEA` (with `TabsListFEA`, `TabsTriggerFEA`, `TabsContentFEA`)
-- Inputs/Form: `InputFEA`, `TextareaFEA`, `LabelFEA`, `CheckboxFEA`, `SwitchFEA`
-- Feedback: `AlertFEA`, `ProgressFEA`, `SkeletonFEA`
-- Data display: `AvatarFEA`, `ListItemFEA`, `BadgeFEA`
-- Overlays: `ModalFEA`, `BottomSheetFEA`, `DialogFEA` (with `DialogHeaderFEA`, `DialogFooterFEA`)
-- Misc: `AccordionFEA`, `TypographyFEA`, `ButtonFEA`
+All exports are available directly from `rn-feav-ui`.
+
+- **Core**: `ButtonFEA`, `CardFEA`, `GlassCardFEA`, `TypographyFEA`, `SeparatorFEA`, `LabelFEA`, `BadgeFEA`, `AvatarFEA`, `AspectRatioFEA`, `KbdFEA`, `SpinnerFEA`, `SkeletonFEA`, `EmptyFEA`
+- **Form**: `InputFEA`, `TextareaFEA`, `CheckboxFEA`, `SwitchFEA`, `FieldFEA`, `InputGroupFEA`, `RadioGroupFEA`, `NativeSelectFEA`, `SelectFEA`, `ComboboxFEA`, `InputOTPFEA`, `DatePickerFEA`
+- **Overlay/Menu**: `DialogFEA`, `DialogHeaderFEA`, `DialogFooterFEA`, `AlertDialogFEA`, `ModalFEA`, `SheetFEA`, `DrawerFEA`, `PopoverFEA`, `DropdownMenuFEA`, `ContextMenuFEA`, `TooltipFEA`, `HoverCardFEA`, `CommandFEA`
+- **Navigation/Layout**: `NavbarFEA`, `TabBarFEA`, `TabsFEA`, `TabsListFEA`, `TabsTriggerFEA`, `TabsContentFEA`, `BreadcrumbFEA`, `NavigationMenuFEA`, `MenubarFEA`, `PaginationFEA`, `SidebarFEA`, `ScrollAreaFEA`
+- **Data/Display**: `ListItemFEA`, `TableFEA`, `TableHeadFEA`, `TableRowFEA`, `TableCellFEA`, `DataTableFEA`, `CalendarFEA`, `ChartFEA`
+- **Interaction**: `AccordionFEA`, `CollapsibleFEA`, `CollapsibleTriggerFEA`, `ToggleFEA`, `ToggleGroupFEA`, `SliderFEA`, `ResizableFEA`, `CarouselFEA`
+- **Toast**: `SonnerFEA`, `ToastFEA`, `useToastFEA`
+- **Theme helper**: `ThemeSwitchFEA`
 
 ## Showcase
 
-There is a full demo inside the repo at:
+Full demo screen:
 
 - `src/examples/Showcase.tsx`
+
+---
+
+## API Reference
+
+### Theme & hooks
+
+| Export | Description |
+| --- | --- |
+| `ThemeFEAVUiProvider` | Wraps the app; provides `theme` and `toggleTheme`. Props: `children: React.ReactNode`. |
+| `useTheme()` | Returns `{ theme, toggleTheme } \| null`. `theme` is `lightTheme \| darkTheme`. |
+| `lightTheme` / `darkTheme` | Exported from the package root for typing or static access: `import { lightTheme, darkTheme } from "rn-feav-ui"`. Prefer `useTheme()` at runtime inside components. |
+
+**`theme.colors` (semantic tokens)** include: `background`, `foreground`, `card`, `cardForeground`, `muted`, `mutedForeground`, `border`, `input`, `ring`, `primary`, `primaryForeground`, `secondary`, `secondaryForeground`, `destructive`, `destructiveForeground`, plus aliases `bg`, `text`, `glass`. See `src/theme/colors.ts`.
+
+| Export | Description |
+| --- | --- |
+| `SonnerFEA` | Toast host; wrap app (or subtree) so `useToastFEA()` works. Props: `children`. |
+| `useToastFEA()` | Returns `{ toast }`. `toast({ title, description?, variant? })` with `variant`: `"default"` \| `"destructive"`. |
+| `ToastFEA` | Alias of `SonnerFEA`. |
+
+---
+
+### Core
+
+#### `ButtonFEA`
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `title` | `string` | — | Button label. |
+| `variant` | `"primary" \| "glass" \| "soft" \| "outline" \| "ghost"` | `"primary"` | Visual style. |
+| `size` | `"default" \| "sm" \| "lg"` | `"default"` | Padding scale. |
+| `onPress` | `() => void` | — | Press handler. |
+| `disabled` | `boolean` | `false` | Disables interaction. |
+| `loading` | `boolean` | `false` | Shows spinner and blocks press. |
+| `leftIcon` / `rightIcon` | `React.ReactNode` | — | Optional icons around label. |
+| `fullWidth` | `boolean` | `false` | Stretches button to parent width. |
+| `style` | `StyleProp<ViewStyle>` | — | Root touchable / wrapper style. |
+| `textStyle` | `StyleProp<TextStyle>` | — | Label text style override. |
+| `testID` | `string` | — | Test identifier. |
+| `accessibilityLabel` / `accessibilityHint` / `accessibilityRole` / `accessibilityState` | `TouchableOpacityProps[...]` | — | Accessibility passthrough. |
+| `hitSlop` / `delayLongPress` / `activeOpacity` | `TouchableOpacityProps[...]` | — | Touchable behavior passthrough. |
+
+#### `CardFEA` / `GlassCardFEA`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `children` | `React.ReactNode` | Content. |
+| `style` | `StyleProp<ViewStyle>` | Container style. |
+| `onPress` (`CardFEA`) | `() => void` | If set, card becomes pressable. |
+| `testID` (`CardFEA`) | `string` | Root test identifier. |
+| `accessibilityLabel` / `accessibilityRole` / `accessibilityHint` (`CardFEA`) | `ViewProps[...]` | Accessibility props on root. |
+
+#### `TypographyFEA`
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `children` | `React.ReactNode` | — | Text content. |
+| `variant` | `"h1" \| "h2" \| "h3" \| "p" \| "small" \| "muted"` | `"p"` | Typography scale; `muted` uses `mutedForeground`. |
+| `style` | `StyleProp<TextStyle>` | — | `Text` style. |
+| `numberOfLines` | `number` | — | Truncates text after N lines. |
+| `ellipsizeMode` | `"head" \| "middle" \| "tail" \| "clip"` | — | Ellipsis behavior when truncated. |
+| `selectable` | `boolean` | — | Enables text selection/copy. |
+| `testID` | `string` | — | Test identifier. |
+| `maxFontSizeMultiplier` | `number` | — | Caps dynamic type scaling. |
+| `onPress` | `() => void` | — | Optional press handler. |
+| `accessibilityRole` | `"text" \| "header" \| "link" \| "none"` | — | Accessibility role. |
+
+#### `SeparatorFEA`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `style` | `StyleProp<ViewStyle>` | Line style (height 1, full width). |
+
+#### `LabelFEA`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `children` | `React.ReactNode` | Label text. |
+| `style` | `StyleProp<TextStyle>` | Text style. |
+| `required` | `boolean` | Appends red `*` when true. |
+| `disabled` | `boolean` | Reduces label opacity. |
+| `testID` | `string` | Test identifier. |
+| `nativeID` | `string` | Can be linked from input `accessibilityLabelledBy`. |
+| `numberOfLines` | `number` | Truncate label lines. |
+
+#### `BadgeFEA`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `label` | `string` | Badge text. |
+| `leftIcon` | `React.ReactNode` | Optional leading icon/dot. |
+| `style` | `StyleProp<ViewStyle>` | Container style. |
+| `textStyle` | `StyleProp<TextStyle>` | Badge label style. |
+| `testID` | `string` | Test identifier. |
+| `accessibilityLabel` | `string` | Accessible label override (defaults to `label`). |
+| `onPress` | `() => void` | Makes badge tappable (`Pressable`). |
+
+#### `AvatarFEA`
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `source` | `ImageSourcePropType` | — | If set, shows image. |
+| `fallback` | `string` | — | Initials (max 2 chars shown). |
+| `size` | `number` | `40` | Width/height of circle. |
+
+#### `AspectRatioFEA`
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `ratio` | `number` | `1` | `width / height` for `aspectRatio`. |
+| `children` | `React.ReactNode` | — | Content. |
+| `style` | `StyleProp<ViewStyle>` | — | Wrapper style. |
+
+#### `KbdFEA`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `children` | `React.ReactNode` | Keyboard hint text. |
+| `style` | `StyleProp<TextStyle>` | Inner text style. |
+
+#### `SpinnerFEA`
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `size` | `"small" \| "large"` | `"small"` | `ActivityIndicator` size. |
+| `style` | `StyleProp<ViewStyle>` | — | Wrapper style. |
+
+#### `SkeletonFEA`
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `height` | `number` | `80` | Block height. |
+| `borderRadius` | `number` | `12` | Corner radius. |
+| `marginVertical` | `number` | `8` | Vertical margin. |
+| `style` | `StyleProp<ViewStyle>` | — | Extra style. |
+
+#### `EmptyFEA`
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `title` | `string` | `"No data"` | Heading. |
+| `description` | `string` | — | Subtext. |
+| `style` | `StyleProp<ViewStyle>` | — | Container style. |
+
+---
+
+### Form
+
+#### `InputFEA`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `style` | `StyleProp<TextStyle>` | Passed to `TextInput`. |
+| `...TextInputProps` | `Omit<TextInputProps, "placeholderTextColor" \| "style">` | Forwards all standard RN `TextInput` props (e.g. `value`, `onChangeText`, `keyboardType`, `editable`, etc.). `placeholderTextColor` is themed internally. |
+
+#### `TextareaFEA`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `style` | `StyleProp<TextStyle>` | Multiline `TextInput` style. |
+| `...TextInputProps` | `Omit<TextInputProps, "placeholderTextColor" \| "style">` | Forwards RN `TextInput` props while forcing `multiline` and `textAlignVertical="top"`. |
+
+#### `CheckboxFEA`
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `checked` | `boolean` | — | Controlled checked state. |
+| `onChange` | `(next: boolean) => void` | — | Toggle handler. |
+| `label` | `string` | — | Optional label. |
+| `disabled` | `boolean` | `false` | Disables interaction. |
+| `size` | `number` | `18` | Checkbox square size. |
+| `style` | `StyleProp<ViewStyle>` | — | Row container style. |
+| `labelStyle` | `StyleProp<TextStyle>` | — | Label text style. |
+| `testID` | `string` | — | Test identifier. |
+| `accessibilityLabel` | `string` | — | Accessible label override. |
+
+#### `SwitchFEA`
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `value` | `boolean` | — | Controlled value. |
+| `onValueChange` | `(next: boolean) => void` | — | Change handler. |
+| `label` | `string` | — | Optional label row. |
+| `labelPosition` | `"left" \| "right"` | `"left"` | Places label before/after switch. |
+| `disabled` | `boolean` | `false` | — |
+| `style` | `StyleProp<ViewStyle>` | — | Row container. |
+| `testID` | `string` | — | Test identifier. |
+| `accessibilityLabel` | `string` | — | Accessibility label override. |
+| `thumbColor` | `ColorValue` | `"#ffffff"` | Thumb color override. |
+| `ios_backgroundColor` | `ColorValue` | — | iOS inactive background. |
+
+#### `FieldFEA`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `label` | `string` | Optional field label. |
+| `description` | `string` | Helper text (hidden if `error` set). |
+| `error` | `string` | Error message (takes priority over description). |
+| `children` | `React.ReactNode` | Input/control. |
+| `style` | `StyleProp<ViewStyle>` | Field wrapper. |
+
+#### `InputGroupFEA`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `children` | `React.ReactNode` | Grouped inputs. |
+| `style` | `StyleProp<ViewStyle>` | Bordered container. |
+
+#### `RadioGroupFEA`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `value` | `string` | Selected `value`. |
+| `onValueChange` | `(next: string) => void` | Selection change. |
+| `options` | `RadioOptionFEA[]` | `{ label, value, disabled? }`. |
+| `style` | `StyleProp<ViewStyle>` | — |
+
+#### `NativeSelectFEA` / `SelectFEA`
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `value` | `string` | — | Selected option `value`. |
+| `onValueChange` | `(next: string) => void` | — | Selection handler. |
+| `options` | `SelectOptionFEA[]` | — | `{ label, value, disabled? }`. |
+| `placeholder` | `string` | `"Select..."` | When nothing selected. |
+| `style` | `StyleProp<ViewStyle>` | — | Menu / trigger styling. |
+
+`SelectFEA` is an alias of `NativeSelectFEA`.
+
+#### `ComboboxFEA`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `value` | `string` | Selected value. |
+| `onValueChange` | `(next: string) => void` | — |
+| `options` | `ComboboxOptionFEA[]` | `{ label, value }`. |
+| `placeholder` | `string` | Trigger placeholder. |
+| `style` | `StyleProp<ViewStyle>` | — |
+
+#### `InputOTPFEA`
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `value` | `string` | — | Controlled OTP string. |
+| `onChange` | `(next: string) => void` | — | Updates full string. |
+| `length` | `number` | `6` | Number of cells. |
+| `style` | `StyleProp<ViewStyle>` | — | Row style. |
+
+#### `DatePickerFEA`
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `value` | `Date` | — | Current date (defaults internally to “now” for display). |
+| `onChange` | `(next: Date) => void` | — | Emits new date when Y/M/D changes. |
+| `startYear` | `number` | `1970` | Year list start. |
+| `endYear` | `number` | current year + 10 | Year list end. |
+| `style` | `StyleProp<ViewStyle>` | — | Row of selects. |
+
+---
+
+### Overlays & menus
+
+#### `DialogFEA`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `open` | `boolean` | Visibility. |
+| `onOpenChange` | `(next: boolean) => void` | Close/open; backdrop tap closes. |
+| `children` | `React.ReactNode` | Usually `DialogHeaderFEA` + body + `DialogFooterFEA`. |
+| `style` | `StyleProp<ViewStyle>` | Inner `CardFEA` style. |
+
+#### `DialogHeaderFEA` / `DialogFooterFEA`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `children` | `React.ReactNode` | Layout sections. |
+
+#### `AlertDialogFEA`
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `open` | `boolean` | — | — |
+| `onOpenChange` | `(next: boolean) => void` | — | — |
+| `title` | `string` | — | Heading. |
+| `description` | `string` | — | Body text. |
+| `cancelText` | `string` | `"Cancel"` | Cancel button label. |
+| `actionText` | `string` | `"Continue"` | Confirm button label. |
+| `destructive` | `boolean` | `false` | Uses softer/destructive styling for action. |
+| `onAction` | `() => void` | — | Runs before close on confirm. |
+
+#### `ModalFEA`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `visible` | `boolean` | Renders overlay + card when true. |
+| `children` | `React.ReactNode` | Content inside card. |
+| `style` | `StyleProp<ViewStyle>` | Card style. |
+
+#### `SheetFEA`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `open` | `boolean` | — |
+| `onOpenChange` | `(next: boolean) => void` | — |
+| `children` | `React.ReactNode` | Bottom sheet body. |
+| `style` | `StyleProp<ViewStyle>` | Card style. |
+
+#### `DrawerFEA`
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `open` | `boolean` | — | — |
+| `onOpenChange` | `(next: boolean) => void` | — | — |
+| `side` | `"left" \| "right"` | `"left"` | Slide from edge. |
+| `children` | `React.ReactNode` | — |
+| `style` | `StyleProp<ViewStyle>` | Panel style. |
+
+#### `PopoverFEA`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `open` | `boolean` | — |
+| `onOpenChange` | `(next: boolean) => void` | — |
+| `trigger` | `React.ReactNode` | Pressing toggles open (wrapped in `Pressable`). |
+| `children` | `React.ReactNode` | Popover body inside `CardFEA`. |
+| `contentStyle` | `StyleProp<ViewStyle>` | Inner card style. |
+
+#### `DropdownMenuFEA`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `open` | `boolean` | — |
+| `onOpenChange` | `(next: boolean) => void` | — |
+| `trigger` | `React.ReactNode` | Opens menu. |
+| `items` | `DropdownMenuItemFEA[]` | `{ label, onSelect?, destructive?, disabled? }`. |
+| `style` | `StyleProp<ViewStyle>` | Passed to popover content. |
+
+#### `ContextMenuFEA`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `items` | `DropdownMenuItemFEA[]` | Same as dropdown items. |
+| `children` | `React.ReactNode` | Long-press target. |
+
+#### `CommandFEA`
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `open` | `boolean` | — | — |
+| `onOpenChange` | `(next: boolean) => void` | — | — |
+| `trigger` | `React.ReactNode` | — |
+| `items` | `CommandItemFEA[]` | `{ label, value, keywords?, onSelect? }`. |
+| `placeholder` | `string` | `"Type a command or search..."` | Search field. |
+| `style` | `StyleProp<ViewStyle>` | — |
+
+#### `TooltipFEA` / `HoverCardFEA`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `text` | `string` | Tooltip copy. |
+| `children` | `React.ReactNode` | Tap to show brief modal-style hint. |
+
+`HoverCardFEA` is an alias of `TooltipFEA` (React Native has no hover).
+
+---
+
+### Navigation & layout
+
+#### `NavbarFEA`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `title` | `string` | Header title. |
+| `style` | `StyleProp<ViewStyle>` | — |
+
+#### `TabBarFEA`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `children` | `React.ReactNode` | Typically row of buttons. |
+| `style` | `StyleProp<ViewStyle>` | — |
+
+#### `TabsFEA` / `TabsListFEA` / `TabsTriggerFEA` / `TabsContentFEA`
+
+| Component | Main props |
+| --- | --- |
+| `TabsFEA` | `defaultValue: string`, `children` |
+| `TabsListFEA` | `children`, `style?` |
+| `TabsTriggerFEA` | `value: string`, `children` |
+| `TabsContentFEA` | `value: string`, `children` (shown when tab matches) |
+
+#### `BreadcrumbFEA`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `items` | `BreadcrumbItemFEA[]` | `{ label, onPress? }` — last item usually has no `onPress`. |
+| `separator` | `string` | Default `"/"`. |
+| `style` | `StyleProp<ViewStyle>` | — |
+
+#### `NavigationMenuFEA`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `value` | `string` | Active item `value`. |
+| `onValueChange` | `(next: string) => void` | — |
+| `items` | `NavigationMenuItemFEA[]` | `{ label, value, disabled? }`. |
+| `style` | `StyleProp<ViewStyle>` | — |
+
+#### `MenubarFEA`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `items` | `MenubarItemFEA[]` | `{ label, items: DropdownMenuItemFEA[] }` per top-level menu. |
+| `style` | `StyleProp<ViewStyle>` | Horizontal bar. |
+
+#### `PaginationFEA`
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `page` | `number` | — | Current page (1-based). |
+| `pageCount` | `number` | — | Total pages. |
+| `onPageChange` | `(next: number) => void` | — | Page navigation. |
+| `siblingCount` | `number` | `1` | Neighbor page buttons around current. |
+| `style` | `StyleProp<ViewStyle>` | — | Row style. |
+
+#### `SidebarFEA`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `open` | `boolean` | Uses `DrawerFEA` under the hood. |
+| `onOpenChange` | `(next: boolean) => void` | — |
+| `value` | `string` | Active item. |
+| `onValueChange` | `(next: string) => void` | Optional. |
+| `items` | `SidebarItemFEA[]` | `{ label, value, disabled? }`. |
+| `header` / `footer` | `React.ReactNode` | Optional slots. |
+| `style` | `StyleProp<ViewStyle>` | Drawer panel style. |
+
+#### `ScrollAreaFEA`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| Forwards | `ScrollViewProps` | Same as RN `ScrollView`; `showsVerticalScrollIndicator` defaults to `false`. |
+
+---
+
+### Data display
+
+#### `ListItemFEA`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `title` | `string` | Primary line. |
+| `subtitle` | `string` | Secondary line. |
+| `style` | `StyleProp<ViewStyle>` | — |
+
+#### `TableFEA` / `TableHeadFEA` / `TableRowFEA` / `TableCellFEA`
+
+| Component | Props |
+| --- | --- |
+| `TableFEA` | `children`, `style?` |
+| `TableHeadFEA` | `children`, `style?` |
+| `TableRowFEA` | `children`, `style?` |
+| `TableCellFEA` | `children`, `flex?` (default 1), `align?`: `"left"\|"center"\|"right"`, `style?` |
+
+#### `DataTableFEA<Row>`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `columns` | `DataTableColumnFEA<Row>[]` | `key`, `header`, `flex?`, `align?`, `render?`. |
+| `data` | `Row[]` | Row objects; cell = `row[key]` unless `render` set. |
+| `rowKey` | `(row, index) => string` | Optional stable keys. |
+| `style` / `headerStyle` | `StyleProp<ViewStyle>` | Table / header row. |
+
+#### `CalendarFEA`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `value` | `Date` | Selected day. |
+| `onChange` | `(next: Date) => void` | Day press. |
+| `style` | `StyleProp<ViewStyle>` | Container. |
+
+#### `ChartFEA`
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `data` | `ChartSeriesPointFEA[]` | — | `{ label, value }` bar series. |
+| `height` | `number` | `140` | Chart height. |
+| `title` | `string` | — | Optional heading. |
+| `style` | `StyleProp<ViewStyle>` | — | Container. |
+
+---
+
+### Interaction
+
+#### `AccordionFEA`
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `title` | `string` | — | Header. |
+| `children` | `React.ReactNode` | — | Collapsible body. |
+| `defaultOpen` | `boolean` | `false` | Initial open state. |
+| `style` | `StyleProp<ViewStyle>` | — | Card wrapper. |
+
+#### `CollapsibleFEA` / `CollapsibleTriggerFEA`
+
+| `CollapsibleFEA` | `open`, `onOpenChange`, `trigger?`, `children`, `style?` |
+| `CollapsibleTriggerFEA` | `title`, `open`, `onPress`, `style?` |
+
+#### `ToggleFEA`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `pressed` | `boolean` | — |
+| `onPressedChange` | `(next: boolean) => void` | — |
+| `children` | `React.ReactNode` | Label. |
+| `disabled` | `boolean` | — |
+| `style` | `StyleProp<ViewStyle>` | — |
+
+#### `ToggleGroupFEA`
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `type` | `"single" \| "multiple"` | `"single"` | Selection mode. |
+| `value` | `string \| string[]` | — | Selected value(s). |
+| `onValueChange` | `(next: string \| string[]) => void` | — | — |
+| `items` | `{ label, value, disabled? }[]` | — | — |
+| `style` | `StyleProp<ViewStyle>` | — | Row. |
+
+#### `SliderFEA`
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `value` | `number` | — | Current value. |
+| `onValueChange` | `(next: number) => void` | — | Snapped to `step`. |
+| `min` / `max` / `step` | `number` | `0` / `100` / `1` | Range. |
+| `style` | `StyleProp<ViewStyle>` | — | Track. |
+
+#### `ResizableFEA`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `width` / `height` | `DimensionValue` | RN dimension (number or `%`). |
+| `children` | `React.ReactNode` | — |
+| `style` | `StyleProp<ViewStyle>` | — |
+
+#### `CarouselFEA`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `children` | `React.ReactNode[]` | Pages (array of nodes). |
+| `pageWidth` | `number` | Optional fixed page width. |
+| `style` | `StyleProp<ViewStyle>` | `ScrollView` style. |
+
+#### `BottomSheetFEA`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `children` | `React.ReactNode` | Anchored bottom sheet content. |
+| `style` | `StyleProp<ViewStyle>` | Animated container. |
+
+---
+
+### Alerts & misc
+
+#### `AlertFEA`
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `title` | `string` | — | — |
+| `description` | `string` | — | — |
+| `variant` | `"default" \| "destructive"` | `"default"` | — |
+| `style` | `StyleProp<ViewStyle>` | — | — |
+
+#### `ProgressFEA`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `value` | `number` | 0–100 fill. |
+| `style` | `StyleProp<ViewStyle>` | Track. |
+
+#### `ThemeSwitchFEA`
+
+Renders a text button that calls `toggleTheme` from context. No props.
+
+---
+
+### TypeScript
+
+Import types when exported next to components, e.g. `DropdownMenuItemFEA`, `DataTableColumnFEA`, `SelectOptionFEA`, `BreadcrumbItemFEA`, `ChartSeriesPointFEA`, etc. Use your IDE “Go to definition” on `dist/**/*.d.ts` after `npm run build` for the exact emitted types.