# @arkite-ui/core v0.23.1

> React components for multi-tenant SaaS admin panels. Tailwind CSS v4 +
> Radix UI + TypeScript. Pure UI only: no business logic, auth, stores, or
> routing — data comes in via props, events go out via callbacks.
>
> Arkite UI is an open-source project by Foson (https://foson.co), a Taiwan-based
> software company. Docs: https://ui.foson.co · Repo: https://github.com/foson-co/arkite-ui
> Not affiliated with Arkite NV (arkite.com, industrial operator guidance).

## Setup

```bash
pnpm add @arkite-ui/core
# peer deps: react react-dom tailwindcss zustand lucide-react
# optional:  framer-motion (Animated* variants)
```

```css
/* app.css — Tailwind v4, tokens included */
@import "tailwindcss";
@import "@arkite-ui/core/styles.css";
```

## Rules for generated code

1. Import UI from `@arkite-ui/core` — never rebuild primitives that exist (see inventory below).
2. Use semantic token utilities only (`bg-card`, `text-muted-foreground`, `border-border`) — never raw palette classes (`bg-red-50`), never `dark:` color overrides (tokens handle dark mode), never arbitrary values (`text-[13px]`).
3. Components follow the controlled/uncontrolled React convention: `value`+`onChange` controls, `defaultValue` doesn't.
4. Keep API calls, routes, and business models in the app layer.
5. Building a whole page? Match it against the recipes below **before** assembling one
   from scratch, then **install it instead of writing it**: `npx arkite-ui add <recipe>`
   writes the tested composition into the project (`--out`, `--name`, `--force`), leaving
   you only the sample data and API calls to replace. Generating the wiring by hand is
   the step that introduces bugs the recipe already solved.

Full design rules (color/spacing/typography/layout recipes): DESIGN.md, shipped
inside this package — also embedded in llms-full.txt.

## Core patterns

### Server-paginated table

`useServerTable` owns the six controlled props server mode needs; you supply
`data` + `totalRows` and fetch on `queryKey`:

```tsx
import { DataTable, useServerTable, type Column } from '@arkite-ui/core'

const table = useServerTable({ initialPageSize: 20 })
const [page, setPage] = useState({ items: [], total: 0 })
useEffect(() => {
  fetchUsers(table.query).then(setPage) // query = { page, pageSize, sort, filters }
}, [table.queryKey])

<DataTable columns={columns} data={page.items} totalRows={page.total}
  getRowKey={(r) => r.id} {...table.props} />
```

Client-side tables need none of that: pass `data` and the table filters,
sorts, and paginates itself.

### Toasts

```tsx
import { useToast, ToastContainer } from '@arkite-ui/core'

// once, near the app root:
<ToastContainer position="bottom-right" />

const toast = useToast()
toast.success('Saved', { description: 'Changes are live.' })

// error handling in catch blocks — wire the app's parser once at startup:
toast.configure({ formatError: getErrorMessage })
// then every call site is one line (title = prefix, description = parsed message):
catch (err) { toast.fromError(err, { prefix: 'Failed to save' }) }
```

### Theming

```tsx
import { createTheme, applyTheme } from '@arkite-ui/core'
applyTheme(createTheme({ primary: '#7c3aed' })) // HSL tokens from one hex
```

A project's brand belongs in a committed `arkite.theme.json`
(`{ name, primary, accent, radius }`) rather than hand-copied CSS variables.
Generate the CSS from it with `npx arkite-ui theme apply`, or in-process via
`themeFileToCSS(parseThemeFile(json))` from `@arkite-ui/core/theme` — a server-safe
entry that loads no components. `parseThemeFile` rejects malformed hex and
unknown keys, which `createTheme` alone would pass through as `NaN` tokens.

## Recipes — page-level compositions

Whole pages assembled from the library, each one rendered and tested in CI.
Machine-readable index: registry.json (ships in the package).
Install one with `npx arkite-ui add <name>` — do not retype it.

### crud-list-page — CRUD List Page

Search + filters over a sortable, selectable, paginated table, with bulk actions and a guarded destructive path.
- Use when: A list page whose rows are already in memory and the page needs filtering, sorting, multi-select, bulk actions, or a delete confirmation.
- Not when: The server does the filtering/sorting/slicing — use `server-side-table`. A read-only handful of rows with no interaction — use `Table` directly, no recipe needed.
- Composes: Badge, BulkActionBar, Button, DataTable, DeleteConfirmDialog, FilterBar, FilterBarActions, FilterBarFilters, FilterBarSearch, FilterSelect, PageHeader, ToastContainer, toast
- Source (ships in the package, copy it): src/stories/recipes/CrudListPage.demo.tsx — docs: https://ui.foson.co/?path=/docs/recipes-crud-list-page--docs

### server-side-table — Server-Side Table

A table whose sorting and pagination round-trip to the server: the page owns the query state, the API returns one slice plus a total.
- Use when: The API returns one pre-sorted page plus a total count, so the table can never know the full ordering — sorting and pagination must be controlled.
- Not when: All rows fit in memory — leave the table uncontrolled and use `crud-list-page`.
- Composes: Badge, DataTable, PageHeader, useServerTable
- Source (ships in the package, copy it): src/stories/recipes/ServerSideTable.demo.tsx — docs: https://ui.foson.co/?path=/docs/recipes-server-side-table--docs

### dashboard-page — Dashboard

A KPI row over compact widget cards — sparkline trends and a recent-activity table in one responsive grid.
- Use when: An overview page that answers 'is everything okay?' at a glance and links out for detail.
- Not when: The page IS the detail view, or the numbers need drill-down in place — build a list or detail page instead. Full charting belongs in a dedicated chart library, not `Sparkline`.
- Composes: Badge, Card, CardContent, CardHeader, DataTable, PageHeader, Sparkline, StatCard, StatGroup
- Source (ships in the package, copy it): src/stories/recipes/DashboardPage.demo.tsx — docs: https://ui.foson.co/?path=/docs/recipes-dashboard--docs

### detail-drawer-page — Detail + Drawer Edit

A record's read view with an edit drawer, a dirty-close guard, and a confirmed destructive action.
- Use when: Editing a record while the user still needs the record on screen for reference.
- Not when: The edit should interrupt and take over (short one-shot forms, confirmations) — use `Modal`. A full create/edit page with many sections — use `form-page`.
- Composes: Badge, Button, Card, ConfirmDialog, DescriptionItem, DescriptionList, Drawer, Form, FormActions, FormControl, FormField, FormLabel, FormMessage, Input, PageHeader, Textarea, ToastContainer, toast
- Source (ships in the package, copy it): src/stories/recipes/DetailDrawerPage.demo.tsx — docs: https://ui.foson.co/?path=/docs/recipes-detail-drawer-edit--docs

### form-page — Form Page

A sectioned create/edit page: grouped fields, mixed control types, submit-time validation, and a guarded submit.
- Use when: A create or edit page big enough to need sections, help text, and inline validation messages.
- Not when: The form is short enough to live in a drawer next to a read view — use `detail-drawer-page`.
- Composes: Button, Form, FormActions, FormControl, FormDescription, FormField, FormLabel, FormMessage, FormSection, Input, PageHeader, Select, Switch, Textarea, ToastContainer, toast
- Source (ships in the package, copy it): src/stories/recipes/FormPage.demo.tsx — docs: https://ui.foson.co/?path=/docs/recipes-form-page--docs

### tenant-admin-shell — Tenant Admin Shell

The app frame: localized AdminLayout with permission-aware navigation, the signed-in user, and a tenant switcher.
- Use when: Starting a multi-tenant admin app — this is the outermost shell every page renders inside.
- Not when: A single-tenant app with no tenant scope — use `AdminLayout` without `TenantSwitcher`.
- Composes: AdminLayout, Card, CardContent, CardHeader, DescriptionItem, DescriptionList, LocaleProvider, SegmentedControl, TenantSwitcher, toast, zhTW
- Source (ships in the package, copy it): src/stories/recipes/TenantAdminShell.demo.tsx — docs: https://ui.foson.co/?path=/docs/recipes-tenant-admin-shell--docs

## Export inventory

Components: ActionButtons, AdminLayout, Alert, Avatar, AvatarGroup, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbItemComponent, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbRoot, BreadcrumbSeparator, BulkActionBar, Button, Calendar, Card, CardContent, CardField, CardFooter, CardGrid, CardHeader, CardSurfaceContext, Checkbox, CheckboxCard, CircularProgress, CollapsibleSection, ColorPicker, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ConfirmDialog, Container, CopyButton, CopyInput, DataTable, DatePicker, DateRangePicker, DeleteConfirmDialog, DescriptionItem, DescriptionList, Divider, Drawer, DrawerBody, DrawerFooter, DrawerHeader, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, ErrorBoundary, ErrorState, FileTrigger, FileUpload, FileUploadButton, FilterBar, FilterBarActions, FilterBarFilters, FilterBarGroup, FilterBarSearch, FilterSelect, FilterToolbarContext, Form, FormActions, FormControl, FormDescription, FormField, FormLabel, FormMessage, FormSection, HStack, ImageUpload, ImperativeToastContainer, InfiniteScroll, InlineCode, Input, Kbd, Label, LoadingOverlay, LocaleProvider, Modal, ModalBody, ModalFooter, ModalHeader, Navbar, NavbarBrand, NavbarContent, NavbarDivider, NavbarItem, NavbarLink, NavbarSpacer, NoData, NoResults, NumberInput, PageHeader, Pagination, PasswordInput, PinInput, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, Radio, RadioGroup, ScrollFade, SearchInput, SegmentedControl, Select, SheetSelect, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarHeader, SidebarItem, SidebarToggle, SimpleTooltip, Skeleton, SkeletonAvatar, SkeletonCard, SkeletonTable, SkeletonText, Sparkline, Spinner, Stack, Stat, StatCard, StatGroup, StatusDot, Steps, Switch, Table, TableBody, TableCaption, TableCell, TableEmpty, TableFooter, TableHead, TableHeader, TableLoading, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TagInput, TenantSwitcher, Textarea, ThemeFileError, Timeline, Toast, ToastContainer, Toggle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Tree, VStack, ViewToggle, VirtualList

Hooks: useCommandPalette, useFormContext, useFormFieldContext, useLocale, useServerTable, useSidebar, useToast, useToastStore

Utilities: applyDarkTheme, applyTheme, chartColorList, chartColors, cn, createTheme, defaultTheme, enUS, forestTheme, neutralTheme, oceanTheme, parseThemeFile, themeFileToCSS, themePresets, themeToCSS, toast, zhTW

Full typed signatures for every export: llms-full.txt (or api-report.txt in the repo).

---

# DESIGN.md — Arkite UI Design System

> Machine-readable design spec for `@arkite-ui/core`. Feed this file to AI coding agents (and humans) building admin UIs with this library, so generated pages follow one consistent visual language instead of inventing their own.
>
> Source of truth: `src/styles/index.css` (tokens), `@arkite-ui/core/tokens` (JS values), Storybook (live docs). This file summarizes the rules; when in doubt, the code wins.

## Identity

**Arkite UI** is a component library for **multi-tenant SaaS admin panels**: data-dense, utilitarian, calm. React 18/19 + Tailwind CSS v4 + Radix UI. Light and dark mode are equal citizens — dark mode is automatic via tokens, never hand-tuned per page.

Design philosophy:

- **Clarity over decoration** — restrained color, generous whitespace inside a dense information layout
- **Semantic, not literal** — every color/radius/shadow flows through named tokens; nothing is hardcoded
- **Composable** — compound components (Card + CardHeader…), slots and render-props over configuration flags

## Hard rules (for AI agents)

1. **Import UI from `@arkite-ui/core`** (styles: `@arkite-ui/core/styles.css`). Never rebuild primitives that exist — check the component inventory below first.
2. **Never use raw Tailwind palette classes** (`bg-red-50`, `text-blue-800`, `text-gray-500`…). Use semantic utilities only: `bg-destructive-soft`, `text-muted-foreground`, `border-border`.
3. **Never write `dark:` color overrides.** Tokens already resolve dark mode. `dark:` is acceptable only for non-color adjustments in rare cases.
4. **Never use arbitrary values** (`text-[13px]`, `shadow-[…]`, `rounded-[…]`). Use the token scale; if a size seems missing, use the nearest step.
5. **Domain logic stays out of shared components.** API calls, routes, auth, and business models belong to the app layer; UI components receive data via props and emit events via callbacks.

## Color system

Colors are HSL triplets in CSS variables (`:root` light, `.dark` dark), exposed as Tailwind utilities via `@theme`. Always pair a background token with its `-foreground`.

### Core

| Token                                | Utility example                      | Use                            |
| ------------------------------------ | ------------------------------------ | ------------------------------ |
| `background` / `foreground`          | `bg-background text-foreground`      | Page base                      |
| `card` / `card-foreground`           | `bg-card`                            | Elevated surfaces              |
| `muted` / `muted-foreground`         | `text-muted-foreground`              | Secondary text, subtle fills   |
| `primary` / `primary-foreground`     | `bg-primary text-primary-foreground` | Brand actions (violet)         |
| `primary-hover`, `destructive-hover` | `hover:bg-primary-hover`             | Solid-fill hover (darkened)    |
| `secondary` / `secondary-foreground` | `bg-secondary`                       | Low-emphasis actions           |
| `accent` / `accent-foreground`       | `bg-accent`                          | Highlights (teal)              |
| `border`, `input`, `ring`            | `border-border`, `ring-ring`         | Hairlines, form borders, focus |

### Status (solid + soft layer)

Four statuses: `success` (green), `warning` (amber), `destructive` (red), `info` (blue). Each has:

- **Solid**: `bg-{status} text-{status}-foreground` — buttons, badges, dots
- **Soft layer**: `bg-{status}-soft text-{status}-soft-foreground border-{status}-border` — alerts, toasts, tinted panels

Naming rule: the "dangerous/negative" semantic is always **`destructive`** (never `error`) in variant props and tokens.

### Contrast (WCAG AA)

- Every built-in fg/bg pair — tokens, all four presets, light and dark, solid and soft — meets **WCAG AA (4.5:1)**, enforced by regression tests (`tokens.test.ts`, `presets.test.ts`). This is why rule 2 exists: paired tokens are guaranteed readable; hand-picked palette classes are not.
- Foreground follows **background luminance, not semantics**: light backgrounds get dark text, dark backgrounds get light text (e.g. dark-mode `info` is black-on-blue, not white). Never re-pair a `-foreground` onto a different background.
- `createTheme()` picks black/white foregrounds by real contrast ratio — any brand color yields AA-passing pairs automatically.
- Custom palettes (raw CSS variable overrides): validate with the Storybook **Foundation / Design Tokens → Contrast Audit** page.
- **Solid-fill hover darkens, never fades.** Use `hover:bg-primary-hover` / `hover:bg-destructive-hover`, not `hover:bg-primary/90`: on a white page the opacity form lightens the fill and drops white text below AA (default primary 5.11 → 4.31:1, #27). The `-hover` tokens are `color-mix(in oklab, <color> 88%, black)`, so they follow any `--primary` / `--destructive` override automatically and only raise text contrast; the hover pair is part of the `presets.test.ts` guard. Tune the shade by overriding `--color-primary-hover` / `--color-destructive-hover`.

### Charts & presence

`chart-1`…`chart-5` for data series (use in order). `status-online/offline/busy/away` for presence dots (use `StatusDot`).

## Typography

- Sans: Inter (system fallback). Mono: JetBrains Mono — code, IDs, `InlineCode`, `Kbd`.
- Scale: `text-2xs` (10px, micro labels) → `text-xs` (12px, captions/badges) → `text-sm` (14px, **default body in admin UIs**) → `text-base` (16px) → `text-xl`/`text-2xl`/`text-3xl` (headings via `PageHeader size`).
- Numbers in tables/counters: `tabular-nums` (Badge `count` variant has it built in).

## Spacing, radius, elevation

- **Spacing**: 4px grid (Tailwind scale). Cards: compound children pad `p-4`; the root's `padding` prop defaults to `none` (`padding="lg"` = `p-6`). `density="compact"` for dashboard widgets. Forms stack on `gap-4`; sections on `gap-6`.
- **Radius**: everything derives from one `--radius` (0.5rem): `rounded-lg` = var, `md` = −2px, `sm` = −4px. Pills/avatars use `rounded-full`. Changing `--radius` rethemes the whole library.
- **Elevation**: soft low-alpha shadow scale `shadow-xs` → `shadow-2xl`. Cards sit at `xs/sm`; popovers `md/lg`; modals `xl`. Special: `shadow-sticky-left`, `shadow-sticky-right`, `shadow-sticky-header` for sticky table edges.
- **Motion**: durations `fast` 100ms / `normal` 150ms / `slow` 300ms; easing tokens incl. `bounce`. Optional framer-motion components live in `@arkite-ui/core/motion`.

## Component inventory — what to reach for

| Need                                                              | Use                                                                                                                                                                                                                                                                                                                                                 | Not                                                                                                                                                                                      |
| ----------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- |
| Page title + actions                                              | `PageHeader` (`size`, `badge`, `onBack`)                                                                                                                                                                                                                                                                                                            | Hand-rolled flex headers                                                                                                                                                                 |
| Section on a page                                                 | `Card` (+`CardHeader actions`, `density="compact"` for widgets)                                                                                                                                                                                                                                                                                     | Bare bordered divs                                                                                                                                                                       |
| **Any tabular data — including plain read-only lists**            | `Table` family (`Table`/`TableHeader`/`TableRow`/`TableHead`/`TableBody`/`TableCell` + `TableEmpty`/`TableLoading` auto-colSpan rows) — styled `<table>` with tokens, dark mode, `compact` density, `variant="striped"`, `hoverable`, cell `align`/`numeric` (tabular figures), `stickyHeader`, `stickyLead`/`stickyAction` frozen columns built in | Raw `<table><td className="px-3 py-2 text-slate-600">` (hardcodes palette + dark mode by hand); hand-written `colSpan` empty rows; `text-right` repeated per cell                        |
| Data list w/ sorting/filters/selection/pagination                 | `DataTable` (column-config driven; `compact` density, `rowClassName` for conditional rows, `Column.pinned: 'left'⎮'right'` frozen columns; `minWidth` for wide tables; server-side via `totalRows` + `useServerTable`)                                                                                                                              | Rebuilding sort/pagination around a raw table                                                                                                                                            |
| A row of pills/tabs/chips that outgrows narrow viewports          | `ScrollFade` (edge fades driven by real scroll state, shown only where content is hidden)                                                                                                                                                                                                                                                           | Bare `overflow-x-auto` with no affordance; hand-rolled gradient CSS                                                                                                                      |
| Huge lists (1000+ rows)                                           | `VirtualList`                                                                                                                                                                                                                                                                                                                                       | Rendering everything                                                                                                                                                                     |
| KPI numbers                                                       | `Stat` / `StatCard` / `StatGroup` + `Sparkline`                                                                                                                                                                                                                                                                                                     | Custom stat blocks                                                                                                                                                                       |
| Filters above a table                                             | `FilterBar` (+`FilterBarSearch/Filters/Actions`, `FilterSelect`)                                                                                                                                                                                                                                                                                    | Ad-hoc toolbars                                                                                                                                                                          |
| A **labelled** filter cluster ("Period: 1D 7D 30D")               | `FilterBarGroup label="Period"` wrapping a `SegmentedControl` (2–5 mutually exclusive presets). `FilterSelect`'s `label` only prefixes its "all" option, so it cannot show a visible group label                                                                                                                                                    | A hand-rolled label `<span>` + flex row (ships without `flex-wrap`, so one group's width pushes the page sideways on mobile); hand-styled active/inactive pills with raw palette classes |
| Date range **inside a filter bar**                                | `DateRangePicker labelPlacement="inside"` — a stacked label adds a line above the inputs, so the default `"top"` leaves them sitting ~10px below the single-line controls next to them                                                                                                                                                              | Leaving `labelPlacement` at `"top"` in a toolbar and nudging it back into line with margins                                                                                              |
| Forms                                                             | `Form` family (`FormField label errorMessage`) + `Input`/`Select`/`Textarea`/`NumberInput`/`DatePicker`/`Combobox`/`TagInput`/`ColorPicker`/`FileUpload`/`ImageUpload`                                                                                                                                                                              | Uncontrolled raw inputs                                                                                                                                                                  |
| OTP / verification code                                           | `PinInput` (`length`, `type`, `onComplete`; SMS autofill built in)                                                                                                                                                                                                                                                                                  | Hand-styled single inputs with tracking CSS                                                                                                                                              |
| File pick from a custom trigger (thumbnail, icon, menu item)      | `FileTrigger` (headless — makes any element open the picker)                                                                                                                                                                                                                                                                                        | Hand-rolled hidden `<input type="file">`                                                                                                                                                 |
| Action styled as a text link (e.g. in a table cell)               | `Button variant="link"`                                                                                                                                                                                                                                                                                                                             | `eslint-disable` + raw `<button>` with underline classes                                                                                                                                 |
| Whole card/row clickable                                          | `Card interactive onClick` (button semantics, keyboard included); table rows: `DataTable onRowClick`                                                                                                                                                                                                                                                | Wrapping cards in raw `<button>` or clickable `<div>`s                                                                                                                                   |
| Mobile select                                                     | `SheetSelect` (bottom sheet)                                                                                                                                                                                                                                                                                                                        | Desktop `Select` on touch UIs                                                                                                                                                            |
| Binary toggle **in forms / settings pages**                       | `Switch` (canonical; `Toggle` is deprecated)                                                                                                                                                                                                                                                                                                        | Checkbox-as-toggle                                                                                                                                                                       |
| Toggleable status **inside a data table**                         | `Badge` wrapped in `Button variant="ghost" size="sm"` with `aria-pressed` — a clickable status pill. N switches down a column out-shout the data; a pill keeps density and stays scannable. Exception: `Switch` is fine when toggling IS the page's primary task (e.g. a feature-flag admin list) and there's at most one toggle column             | `Switch` repeated per row in dense tables; "making everything else heavier to compensate"                                                                                                |
| Confirmation                                                      | `ConfirmDialog` / `DeleteConfirmDialog`                                                                                                                                                                                                                                                                                                             | window.confirm, custom modals                                                                                                                                                            |
| Overlay panels                                                    | `Modal` (centered; height-capped with scrolling body) / `Drawer` (side/bottom) / `Popover` (anchored)                                                                                                                                                                                                                                               | Fixed-position divs; hand-rolled backdrop + focus trap                                                                                                                                   |
| Form dialog (fields in body, submit in footer)                    | `Modal onSubmit` — wraps the dialog in a real `<form>`, footer `type="submit"` button just works                                                                                                                                                                                                                                                    | `form="<id>"` attribute plumbing; re-implementing the dialog to get a form inside                                                                                                        |
| Notifications                                                     | `toast.success/error/…` + `ImperativeToastContainer` (or `useToast` + `ToastContainer`)                                                                                                                                                                                                                                                             | Custom snackbars                                                                                                                                                                         |
| Error in a `catch` block                                          | `toast.fromError(err, { prefix: '儲存失敗' })` — wire the app's parser ONCE at startup: `toast.configure({ formatError: getErrorMessage })`                                                                                                                                                                                                         | ``toast.error(`失敗：${getErrorMessage(err)}`)`` boilerplate at every call site                                                                                                          |
| Inline callout                                                    | `Alert` (`variant`, `dismissible onClose`)                                                                                                                                                                                                                                                                                                          | Colored divs                                                                                                                                                                             |
| Empty / error / loading                                           | `EmptyState` / `ErrorState` / `Skeleton` family / `Spinner` / `LoadingOverlay` (`fullscreen`)                                                                                                                                                                                                                                                       | Blank screens                                                                                                                                                                            |
| Status chips                                                      | `Badge` (7 variants + `count`, `max`) / `StatusDot`                                                                                                                                                                                                                                                                                                 | Colored spans                                                                                                                                                                            |
| App frame                                                         | `AdminLayout` (`sidebarVariant="classic                                                                                                                                                                                                                                                                                                             | rail"`, `subNav`, `classNames`, mobile: `hideSidebar="mobile"`+`bottomNav`) + `Sidebar`/`Navbar`/`Breadcrumb`/`TenantSwitcher`                                                           | Custom shells; global CSS targeting AdminLayout internals |
| Steps / history                                                   | `Steps`, `Timeline`, `Calendar`, `Tree`, `Pagination`                                                                                                                                                                                                                                                                                               | Custom widgets                                                                                                                                                                           |
| Tab strip down the side (landscape phones, scarce vertical space) | `Tabs orientation="vertical"` — also moves the `underline` active rule to the inline edge, sets `aria-orientation`, and switches arrow-key navigation to the up/down axis                                                                                                                                                                           | `className="flex-col"` on `TabsList` alone: the layout flips but the indicator, ARIA axis, and keyboard axis do not                                                                      |

**Table vs DataTable — the decision rule (field-tested across a 47-file consumer migration):**

1. **Data list with header semantics → `DataTable`.** This includes **runtime-determined dynamic columns** — one column per data source / schema field / period is fine: build the `Column<T>[]` array from the data itself. `cell(row, index)` receives the row index, so cross-row computation (compare with the previous row) works too. Don't fall back to a raw `<table>` just because columns aren't static.
2. **Headerless compact list / key-value display → `Table` family** — _less_ code than a column config, still inherits tokens, dark mode, `compact`, `stickyHeader`, frozen columns. It also maps 1:1 onto markdown/HTML renderer overrides (`td`/`th` → `TableCell`/`TableHead`; `align` tolerates HTML's deprecated values).
3. **Visual matrices** (cells are colored blocks, per-cell dynamic styling) → discrete/binary grades: `Column.cellClassName` (class string per row). **Continuous values** (heatmap alpha computed at runtime): `Column.cellStyle` — class strings can't express continuous values and Tailwind can't compile runtime-generated classes. Vertical headers: `Column.headerStyle` (`writingMode`).
4. **Wide tables → `minWidth`.** Declare the width the table needs (`minWidth={960}`) and it scrolls instead of squashing; edge fades turn on automatically. See Composition rules below for why, and why `pinned` is inert without it.

Never hand-roll a raw `<table>`: hardcoded `text-slate-*`/manual `dark:` styling always follows.

**Whole pages** — six tested compositions (CRUD list, server-side table, dashboard, detail + drawer edit, form page, tenant admin shell) ship with the package: machine-readable index in `registry.json`, source under `src/stories/recipes/`. Match the page you are building against each entry's `when` / `notWhen` **before** assembling one from scratch, then install it rather than retyping it — `npx arkite-ui add <recipe>` writes it into the project, already satisfying the composition rules below; what's left to change is the sample data and the API calls.

## Composition rules

Picking the right component is the easy half. Every one of these was found in consumer code where each component was correct on its own and the _pair_ was wrong — and all of them fail **silently**, which is why the library now says so at dev time.

| Rule                                                                 | Why                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | Dev warning                                    |
| -------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- |
| **Wide tables need `minWidth`, and `pinned` is inert without it**    | `width: 100%` + auto layout squeezes columns to min-content _before_ overflowing. With CJK headers (min-content = one glyph) a dense table collapses to ~30px columns and 4-line headers instead of scrolling, so frozen columns never engage. `Column.width` is a hint to the layout algorithm, not a floor                                                                                                                                                                                                                                            | ✅ `pinned` without `minWidth`                 |
| **`stickyHeader` sticks to whatever scrolls — let the table own it** | Sticky resolves against the nearest scrollport. Pass `maxHeight` (or `fillHeight` in a determinate-height flex chain) to `Table`/`DataTable`. Wrapping the table in your own `overflow-auto` box kills it: the header sticks to an inner box that never scrolls vertically and rides out of view. A11y attributes for the scroll region go through `wrapperProps` (`tabIndex`, `role`, `aria-label`)                                                                                                                                                    | ✅ `stickyHeader` without a height limit       |
| **Don't wrap `DataTable` in a `Card`**                               | It already renders a bordered, rounded surface, so a Card around it stacks two frames. For a title: `<Card padding="none">` + `CardHeader` + `<CardContent className="p-0">` + `bordered={false}` on the table                                                                                                                                                                                                                                                                                                                                          | ✅ bordered table inside a Card                |
| **Date range in a toolbar needs `labelPlacement="inside"`**          | A stacked label makes the control two lines tall, leaving its inputs ~10px below the single-line controls beside it                                                                                                                                                                                                                                                                                                                                                                                                                                     | ✅ `labelPlacement="top"` inside a `FilterBar` |
| **Labelled filter clusters go through `FilterBarGroup`**             | Hand-rolled label + flex row ships without `flex-wrap`/`min-w-0`, so one group's width pushes the whole page sideways on mobile                                                                                                                                                                                                                                                                                                                                                                                                                         | —                                              |
| **Vertical tabs go through `orientation`, not `className`**          | className flips the layout only; the `underline` indicator, `aria-orientation`, and the keyboard axis all stay horizontal                                                                                                                                                                                                                                                                                                                                                                                                                               | —                                              |
| **Don't hand-add safe-area padding to overlays**                     | `Drawer`, `AnimatedDrawer`, `SheetSelect` and `AdminLayout`'s `bottomNav` already pad every edge a cutout can reach — including left/right, which is what a _landscape_ phone's notch clips. Hand-rolled `pb-[env(safe-area-inset-bottom)]` both breaks hard rule 4 and covers one edge out of three, so it reads as fixed while still clipping on rotation. Insets are padding, so the panel keeps its `size` footprint; `env()` is 0 without `viewport-fit=cover`, making it inert on desktop. Your own `className` still wins if you need to opt out | —                                              |

Warnings are dev-only (stripped in production), fire once per rule, and read React context rather than inspecting parent DOM — so they survive wrappers and portals. They are tuned to stay silent on code that is already correct by other means: the Card rule, for instance, accepts a `className` that neutralises the frame.

## API conventions (follow when composing or wrapping)

- Change handlers on value components: **`onChange(value)`** (raw value, not event) — native-input wrappers keep React's event `onChange`
- Error display on form controls: **`error?: boolean` + `errorMessage?: string`**
- Open/close: **`open` + `onClose`** for dialogs/drawers/overlays; `defaultX` for uncontrolled counterparts. Exceptions: Radix passthrough components (Popover/Tooltip/DropdownMenu) and trigger-anchored pickers (Combobox/DatePicker/SheetSelect) expose Radix-style **`open` + `onOpenChange` + `defaultOpen`** — intentional, do not "fix"
- Non-overlay expand/collapse state uses the **`x` / `onXChange` / `defaultX`** triple (CollapsibleSection `open`, Sidebar `collapsed`)
- Sizes: **`sm | md | lg` as the baseline** (`md` default) — components may extend both ends (`xs`, `xl`, `icon`, `full`) when the domain calls for it; variants: `primary | secondary | outline | ghost | destructive` (Button additionally ships `gradient`)
- Semantic status values are `success | warning | destructive | info` — never `error`/`danger` in props. `EmptyState`'s `error` variant is a _scenario_ (error page), not a color, and `StatusDot`'s `online/offline/busy/away` is a presence axis — both are separate value domains
- Booleans are bare (`disabled`, `loading`, `open`) — never `isDisabled`
- Collection props: tabular/hierarchical data is **`data`** (DataTable/Tree/Sparkline), flat renderable lists are **`items`** (Timeline/VirtualList/Breadcrumb); `Steps.steps` is grandfathered. Key extraction is **`get{Noun}Key(x, index)`** (`getRowKey`, `getItemKey`)
- Selection callbacks: **`onSelect(value, object?)`** — first arg is the selected value/key, optional second is the full object. Multi-select checkbox trees/tables use **`onSelectionChange`**
- Navigation: data-layer props are **`path`** (router semantics), render-layer receives **`href`** (DOM semantics); custom link rendering is **`renderLink({ href, children, className, active })`** across all nav components
- Definition objects (table columns, nav items) may use short render-prop names (`cell`, `icon`) — the `renderX` rule applies to component props, not def-object fields
- Escape hatches: `className` everywhere (merged via `cn`), `renderX` props for custom item rendering. When a component renders more than one region, the extra regions are reachable through **`classNames`** (`AdminLayout.classNames.bottomNav`, `SheetSelect.classNames.sheet` — `className` stays on the primary/trigger element). Reach for `classNames` rather than out-specifying the component from global CSS: those selectors target internals and break silently on any markup change

## Theming

Brand retheme = override CSS variables (or `createTheme()` from a hex, `applyTheme()` at runtime). Four built-in presets: Default, Neutral, Ocean, Forest.

Prefer committing the brand as **`arkite.theme.json`** (`name`, `primary`, `accent`, `radius`) and generating from it — `npx arkite-ui theme apply`, or `themeFileToCSS(parseThemeFile(json))` from `@arkite-ui/core/theme` (server-safe, no components). Hand-copied CSS variables drift silently across projects; four values in a file diff. Because components consume only tokens, a future `[data-style="…"]` preset can restyle the entire library (radius, shadows, palette, density) with zero component changes.

## Localization

Every built-in string (placeholders, empty states, pagination, calendar month/weekday names, and all aria-labels) resolves through `LocaleProvider`. Rules:

1. **Chinese apps must mount `<LocaleProvider locale={zhTW}>` at the root** — without it, screen readers announce English aria-labels inside a Chinese UI.
2. Per-instance text still goes through props (`placeholder`, `emptyMessage`, …) — props always win over the locale.
3. Never hardcode UI strings that a component already provides via locale; partial locales (`{ spinner: { loading: '…' } }`) fall back to English per key.


---

# Full public API (typed)

type ActionButtonsProps {
  actions: ActionItem[]
  className?: string | undefined
  mode?: "dropdown" | "inline" | undefined
  size?: "md" | "sm" | undefined
  triggerIcon?: ReactNode
  triggerLabel?: string | undefined
}

type ActionItem {
  confirm?: { title?: string; description?: string; confirmLabel?: string; } | boolean | undefined
  disabled?: boolean | undefined
  hidden?: boolean | undefined
  icon?: ReactNode
  key?: string | undefined
  label: string
  onClick: () => void | Promise<void>
  separator?: boolean | undefined
  variant?: ButtonVariant | undefined
}

type AdminBrandConfig {
  collapsedLogo?: ReactNode
  logo?: ReactNode
  name: string
  shortName?: string | undefined
}

type AdminLayoutContext {
  currentPath: string
  hasPermission?: ((permissions: string[]) => boolean) | undefined
}

type AdminLayoutProps {
  basePath?: string | undefined
  bottomNav?: ReactNode
  brand: AdminBrandConfig
  children: ReactNode
  className?: string | undefined
  classNames?: { root?: string; sidebar?: string; navbar?: string; subNav?: string; main?: string; bottomNav?: string; } | undefined
  currentPath: string
  hasPermission?: ((permissions: string[]) => boolean) | undefined
  hideNavbar?: "mobile" | boolean | undefined
  hideSidebar?: "mobile" | boolean | undefined
  hideToast?: boolean | undefined
  navbarLeft?: ReactNode
  navbarRight?: ReactNode
  navigation: AdminNavGroup[]
  onLogout?: (() => void) | undefined
  onNavigate: (path: string) => void
  renderLink?: ((props: { href: string; children: ReactNode; className?: string; active?: boolean; }) => ReactNode) | undefined
  sidebarFooter?: ReactNode
  sidebarVariant?: "classic" | "rail" | undefined
  subNav?: ReactNode
  toastPosition?: "bottom-center" | "bottom-left" | "bottom-right" | "top-center" | "top-left" | "top-right" | undefined
  user?: AdminUserConfig | undefined
}

type AdminNavGroup {
  icon?: ReactNode
  items: AdminNavItem[]
  label: string
  path?: string | undefined
  visibleWhen?: ((context: AdminLayoutContext) => boolean) | undefined
}

type AdminNavItem {
  activeMatch?: string[] | undefined
  badge?: ReactNode
  disabled?: boolean | undefined
  external?: boolean | undefined
  icon?: ReactNode
  label: string
  path: string
  permissions?: string[] | undefined
}

type AdminUserConfig {
  avatarFallback?: string | undefined
  avatarSrc?: string | undefined
  email?: string | undefined
  name?: string | undefined
  roleBadgeVariant?: BadgeVariant | undefined
  roleLabel?: string | undefined
}

type AlertProps {
  customIcon?: ReactNode
  dismissible?: boolean | undefined
  icon?: boolean | undefined
  onClose?: (() => void) | undefined
  onDismiss?: (() => void) | undefined
  title?: ReactNode
  variant?: AlertVariant | undefined
}

type AlertVariant = AlertVariant

type ArkiteLocale {
  actionButtons: { label: string; }
  adminLayout: { primaryNavigation: string; logout: string; expandMenu: string; bottomNavigation: string; }
  breadcrumb: { label: string; }
  bulkActionBar: { selected: (count: number) => string; deselectAll: string; }
  calendar: { previousMonth: string; nextMonth: string; weekdays: [string, string, string, string, string, string, string]; weekdaysShort: [string, string, string, string, string, string, string]; }
  colorPicker: { pickColor: string; hexValue: string; presetColors: string; selectColor: (color: string) => string; }
  combobox: { placeholder: string; searchPlaceholder: string; emptyMessage: string; loading: string; }
  commandPalette: { label: string; }
  confirmDialog: { cancelLabel: string; confirmLabel: string; confirmTitle: string; confirmDescription: string; deleteTitle: (itemName: string) => string; deleteFallbackItem: string; deleteDescription: string; deleteLabel: string; }
  copyButton: { copy: string; copied: string; copyAria: string; copiedAria: string; copyValue: string; }
  dataTable: { emptyMessage: string; toggleColumns: string; selectAllRows: string; selectRow: (rowKey: string | number) => string; columns: string; expand: string; expandRow: string; collapseRow: string; sortBy: (header: string) => string; sortColumn: string; filterBy: (header: string) => string; clearFilter: string; loading: string; showing: (count: number, total: number) => string; }
  dateLocale: string
  datePicker: { placeholder: string; openCalendar: string; today: string; clearDate: string; }
  dateRangePicker: { startLabel: string; endLabel: string; clearDates: string; clear: string; selectRange: string; selectStart: string; selectEnd: string; }
  drawer: { close: string; }
  emptyState: { noResultsTitle: string; noResultsDescription: string; noDataTitle: string; noDataDescription: string; errorTitle: string; errorDescription: string; retryLabel: string; }
  fileUpload: { uploadFile: string; uploadFiles: string; uploadImage: string; addImage: string; upload: string; remove: string; replace: string; removeImage: string; preview: string; dropzone: string; anyFileType: string; acceptedTypes: (accept: string) => string; maxSizeNote: (size: string) => string; maxSizeHint: (size: string) => string; fileTooLarge: (name: string, size: string) => string; fileNotAccepted: (name: string) => string; tooManyFiles: (max: number) => string; }
  filterBar: { searchPlaceholder: string; }
  filterSelect: { all: string; }
  label: { optional: string; }
  modal: { close: string; }
  numberInput: { increment: string; decrement: string; }
  pageHeader: { back: string; }
  pagination: { label: string; rowsPerPage: string; firstPage: string; previousPage: string; nextPage: string; lastPage: string; pageLabel: (page: number) => string; rangeInfo: (start: number, end: number, total: number) => string; }
  passwordInput: { hide: string; show: string; }
  pinInput: { charLabel: (index: number, length: number) => string; }
  progress: { label: string; }
  searchInput: { clear: string; }
  sheetSelect: { placeholder: string; }
  sidebar: { toggle: string; }
  spinner: { loading: string; loadingText: string; }
  tagInput: { remove: (tag: string) => string; }
  tenantSwitcher: { allLabel: string; allDescription: string; emptyMessage: string; searchPlaceholder: string; }
  toast: { close: string; }
  tree: { collapse: string; expand: string; toggle: string; }
  viewToggle: { label: string; tableView: string; cardView: string; }
  virtualList: { label: string; empty: string; loadingMore: string; }
}

type AvatarGroupProps {
  children: ReactNode
  className?: string | undefined
  max?: number | undefined
  size?: AvatarSize | undefined
  spacing?: "loose" | "normal" | "tight" | undefined
}

type AvatarProps {
  alt?: string | undefined
  fallback?: string | undefined
  size?: AvatarSize | undefined
  status?: StatusType | undefined
  variant?: AvatarVariant | undefined
}

type AvatarSize = AvatarSize

type AvatarVariant = AvatarVariant

type BadgeProps {
  max?: number | undefined
  size?: BadgeSize | undefined
  variant?: BadgeVariant | undefined
}

type BadgeSize = BadgeSize

type BadgeVariant = BadgeVariant

type BreadcrumbEllipsisProps = BreadcrumbEllipsisProps

type BreadcrumbItemData {
  href?: string | undefined
  icon?: ReactNode
  label: ReactNode
}

type BreadcrumbItemProps = BreadcrumbItemProps

type BreadcrumbLinkProps {
  asChild?: boolean | undefined
  href?: string | undefined
}

type BreadcrumbListProps = BreadcrumbListProps

type BreadcrumbPageProps = BreadcrumbPageProps

type BreadcrumbProps {
  items: BreadcrumbItemData[]
  maxItems?: number | undefined
  renderLink?: ((props: { href: string; children: ReactNode; className?: string; active?: boolean; }) => ReactNode) | undefined
  separator?: ReactNode
  showHomeIcon?: boolean | undefined
}

type BreadcrumbRootProps = BreadcrumbRootProps

type BreadcrumbSeparatorProps = BreadcrumbSeparatorProps

type BulkActionBarProps {
  children?: ReactNode
  left?: ReactNode
  onClose?: (() => void) | undefined
  right?: ReactNode
  selectedCount: number
}

type ButtonProps {
  fullWidth?: boolean | undefined
  leftIcon?: ReactNode
  loading?: boolean | undefined
  rightIcon?: ReactNode
  size?: ButtonSize | undefined
  variant?: ButtonVariant | undefined
}

type ButtonSize = ButtonSize

type ButtonVariant = ButtonVariant

type CalendarProps {
  defaultMonth?: Date | undefined
  defaultValue?: Date | undefined
  disabledDates?: Date[] | undefined
  highlightedDates?: Date[] | undefined
  maxDate?: Date | undefined
  minDate?: Date | undefined
  month?: Date | undefined
  onMonthChange?: ((month: Date) => void) | undefined
  onSelect?: ((date: Date) => void) | undefined
  value?: Date | null | undefined
  weekStartsOn?: 0 | 1 | undefined
}

type CardContentProps {
  density?: CardDensity | undefined
}

type CardDensity = CardDensity

type CardFieldProps {
  children?: ReactNode
  label: string
  value?: ReactNode
}

type CardFooterProps {
  density?: CardDensity | undefined
}

type CardGridProps {
  columns?: 1 | 2 | 3 | 4 | undefined
}

type CardHeaderProps {
  action?: ReactNode
  actions?: ReactNode
  density?: CardDensity | undefined
  description?: ReactNode
  headingLevel?: 2 | 3 | 4 | 5 | 6 | undefined
  title?: ReactNode
}

type CardProps {
  bordered?: boolean | undefined
  density?: CardDensity | undefined
  hoverable?: boolean | undefined
  interactive?: boolean | undefined
  padding?: "lg" | "md" | "none" | "sm" | undefined
  shadow?: "lg" | "md" | "none" | "sm" | undefined
}

type ChartColorKey = 1 | 2 | 3 | 4 | 5

type CheckboxCardProps {
  description?: string | undefined
  error?: boolean | undefined
  errorMessage?: string | undefined
  label: string
}

type CheckboxProps {
  description?: string | undefined
  error?: boolean | undefined
  errorMessage?: string | undefined
  label?: string | undefined
  size?: CheckboxSize | undefined
}

type CheckboxSize = CheckboxSize

type CircularProgressProps {
  aria-label?: string | undefined
  diameter?: number | undefined
  indeterminate?: boolean | undefined
  max?: number | undefined
  showLabel?: boolean | undefined
  size?: number | undefined
  strokeWidth?: number | undefined
  value?: number | undefined
  variant?: ProgressVariant | undefined
}

type CollapsibleSectionProps {
  children: ReactNode
  defaultOpen?: boolean | undefined
  description?: string | undefined
  disabled?: boolean | undefined
  onOpenChange?: ((open: boolean) => void) | undefined
  open?: boolean | undefined
  rightSlot?: ReactNode
  title: ReactNode
}

type ColorPickerProps {
  className?: string | undefined
  defaultValue?: string | undefined
  disabled?: boolean | undefined
  error?: boolean | undefined
  errorMessage?: string | undefined
  onChange?: ((color: string) => void) | undefined
  presets?: string[] | undefined
  size?: ColorPickerSize | undefined
  value?: string | undefined
}

type ColorPickerSize = ColorPickerSize

type Column {
  align?: "center" | "left" | "right" | undefined
  cell?: ((row: T, index: number) => ReactNode) | undefined
  cellClassName?: ((row: T, index: number) => string) | string | undefined
  cellStyle?: ((row: T, index: number) => CSSProperties) | CSSProperties | undefined
  filterFn?: ((row: T, filterValue: string) => boolean) | undefined
  filterOptions?: string[] | undefined
  filterable?: boolean | undefined
  header: ReactNode
  headerClassName?: string | undefined
  headerStyle?: CSSProperties | undefined
  hidden?: "desktop" | "mobile" | boolean | undefined
  key: string
  pinned?: "left" | "right" | undefined
  sortable?: boolean | undefined
  width?: number | string | undefined
}

type ComboboxOption {
  description?: string | undefined
  disabled?: boolean | undefined
  icon?: ReactNode
  label: string
  value: string
}

type ComboboxProps {
  className?: string | undefined
  defaultOpen?: boolean | undefined
  defaultValue?: string | string[] | undefined
  disabled?: boolean | undefined
  emptyMessage?: string | undefined
  error?: boolean | undefined
  errorMessage?: string | undefined
  fullWidth?: boolean | undefined
  loading?: boolean | undefined
  multiple?: boolean | undefined
  onChange?: ((value: string | string[]) => void) | undefined
  onOpenChange?: ((open: boolean) => void) | undefined
  onSearch?: ((query: string) => void) | undefined
  open?: boolean | undefined
  options: ComboboxOption[]
  placeholder?: string | undefined
  renderOption?: ((option: ComboboxOption, selected: boolean) => ReactNode) | undefined
  searchPlaceholder?: string | undefined
  size?: ComboboxSize | undefined
  value?: string | string[] | undefined
}

type CommandDialogProps {
  children: ReactNode
  className?: string | undefined
  closeOnBackdropClick?: boolean | undefined
  closeOnEscape?: boolean | undefined
  onClose?: (() => void) | undefined
  onOpenChange?: ((open: boolean) => void) | undefined
  open: boolean
}

type ConfirmDialogProps {
  cancelLabel?: string | undefined
  className?: string | undefined
  closeOnBackdropClick?: boolean | undefined
  closeOnEscape?: boolean | undefined
  confirmLabel?: string | undefined
  description?: ReactNode
  icon?: ReactNode
  loading?: boolean | undefined
  onClose: () => void
  onConfirm: () => void
  open: boolean
  size?: ModalSize | undefined
  title: ReactNode
  variant?: "default" | "destructive" | "warning" | undefined
}

type ContainerProps {
  centered?: boolean | undefined
  padded?: boolean | undefined
  size?: ContainerSize | undefined
}

type ContainerSize = ContainerSize

type CopyButtonProps {
  children?: ReactNode
  feedbackDuration?: number | undefined
  onCopy?: (() => void) | undefined
  size?: ButtonSize | undefined
  value: string
  variant?: ButtonVariant | undefined
}

type CopyInputProps {
  className?: string | undefined
  feedbackDuration?: number | undefined
  onCopy?: (() => void) | undefined
  size?: InputSize | undefined
  value: string
}

type CreateThemeOptions {
  accent?: string | undefined
  name?: string | undefined
  primary: string
  radius?: string | undefined
}

type DataAttributes = DataAttributes

type DataTableProps {
  bordered?: boolean | undefined
  className?: string | undefined
  columnToggle?: boolean | undefined
  columns: Column<NoInfer<T>>[]
  compact?: boolean | undefined
  data: T[]
  defaultPageSize?: number | undefined
  defaultSelectedRows?: Set<string | number> | undefined
  emptyContent?: ReactNode
  expandable?: ((row: T, index: number) => ReactNode) | boolean | undefined
  fillHeight?: boolean | undefined
  filters?: Record<string, string[]> | undefined
  getRowKey?: ((row: T, index: number) => string | number) | undefined
  hoverable?: boolean | undefined
  isRowSelectable?: ((row: T, index: number) => boolean) | undefined
  loading?: boolean | undefined
  maxHeight?: number | string | undefined
  minWidth?: number | string | undefined
  onFilterChange?: ((filters: Record<string, string[]>) => void) | undefined
  onPageChange?: ((page: number) => void) | undefined
  onPageSizeChange?: ((pageSize: number) => void) | undefined
  onRowClick?: ((row: T, index: number) => void) | undefined
  onRowSelect?: ((row: T, selected: boolean) => void) | undefined
  onSelectionChange?: ((selected: Set<string | number>) => void) | undefined
  onSortChange?: ((sort: SortState | null) => void) | undefined
  page?: number | undefined
  pageSizeOptions?: number[] | undefined
  pagination?: boolean | undefined
  renderExpandedRow?: ((row: T, index: number) => ReactNode) | undefined
  rowClassName?: ((row: T, index: number) => string) | string | undefined
  scrollFade?: boolean | undefined
  selectable?: boolean | undefined
  selectedRows?: Set<string | number> | undefined
  sortState?: SortState | null | undefined
  stickyHeader?: boolean | undefined
  totalRows?: number | undefined
}

type DatePickerProps {
  clearable?: boolean | undefined
  defaultOpen?: boolean | undefined
  defaultValue?: Date | undefined
  disabledDates?: Date[] | undefined
  error?: boolean | undefined
  errorMessage?: string | undefined
  format?: string | undefined
  maxDate?: Date | undefined
  minDate?: Date | undefined
  onChange?: ((date: Date | null) => void) | undefined
  onOpenChange?: ((open: boolean) => void) | undefined
  open?: boolean | undefined
  size?: DatePickerSize | undefined
  value?: Date | null | undefined
}

type DatePickerSize = DatePickerSize

type DateRangePickerProps {
  defaultOpen?: boolean | undefined
  defaultValue?: DateRangeValue | undefined
  disabled?: boolean | undefined
  endDate?: Date | null | undefined
  endLabel?: string | undefined
  error?: boolean | undefined
  errorMessage?: string | undefined
  format?: string | undefined
  labelPlacement?: "inside" | "none" | "top" | undefined
  maxDate?: Date | undefined
  minDate?: Date | undefined
  onChange?: ((range: DateRangeValue) => void) | undefined
  onClear?: (() => void) | undefined
  onEndChange?: ((date: Date | null) => void) | undefined
  onOpenChange?: ((open: boolean) => void) | undefined
  onStartChange?: ((date: Date | null) => void) | undefined
  open?: boolean | undefined
  size?: DateRangePickerSize | undefined
  startDate?: Date | null | undefined
  startLabel?: string | undefined
  value?: DateRangeValue | undefined
  variant?: DateRangePickerVariant | undefined
}

type DateRangePickerSize = DateRangePickerSize

type DateRangePickerVariant = DateRangePickerVariant

type DateRangeValue {
  end: Date | null
  start: Date | null
}

type DeleteConfirmDialogProps {
  cancelLabel?: string | undefined
  className?: string | undefined
  closeOnBackdropClick?: boolean | undefined
  closeOnEscape?: boolean | undefined
  confirmLabel?: string | undefined
  description?: ReactNode
  icon?: ReactNode
  itemName?: string | undefined
  loading?: boolean | undefined
  onClose: () => void
  onConfirm: () => void
  open: boolean
  size?: ModalSize | undefined
  title?: ReactNode
}

type DescriptionItemProps {
  children?: ReactNode
  label: string
  value?: ReactNode
}

type DescriptionListProps {
  divider?: boolean | undefined
}

type DividerOrientation = DividerOrientation

type DividerProps {
  label?: string | undefined
  labelPosition?: "center" | "left" | "right" | undefined
  orientation?: DividerOrientation | undefined
}

type DrawerBodyProps = DrawerBodyProps

type DrawerFooterProps = DrawerFooterProps

type DrawerHeaderProps = DrawerHeaderProps

type DrawerPosition = DrawerPosition

type DrawerProps {
  closeOnBackdropClick?: boolean | undefined
  closeOnEscape?: boolean | undefined
  description?: ReactNode
  footer?: ReactNode
  onClose: () => void
  open: boolean
  position?: DrawerPosition | undefined
  showCloseButton?: boolean | undefined
  size?: DrawerSize | undefined
  title?: ReactNode
}

type DrawerSize = DrawerSize

type EmptyStatePresetProps {
  action?: ReactNode
  description?: ReactNode
  size?: "lg" | "md" | "sm" | undefined
  title?: ReactNode
}

type EmptyStateProps {
  action?: ReactNode
  description?: ReactNode
  icon?: ReactNode
  size?: "lg" | "md" | "sm" | undefined
  title?: ReactNode
  variant?: EmptyStateVariant | undefined
}

type EmptyStateVariant = EmptyStateVariant

type ErrorBoundaryProps {
  children: ReactNode
  className?: string | undefined
  fallback?: ((props: { error: Error; reset: () => void; }) => ReactNode) | ReactNode
  onError?: ((error: Error, errorInfo: ErrorInfo) => void) | undefined
}

type ErrorStateProps {
  action?: ReactNode
  description?: ReactNode
  onRetry?: (() => void) | undefined
  retryLabel?: string | undefined
  size?: "lg" | "md" | "sm" | undefined
  title?: ReactNode
}

type FileTriggerProps {
  accept?: string | undefined
  children: ReactElement<{ onClick?: (e: MouseEvent) => void; }, string | JSXElementConstructor<any>>
  disabled?: boolean | undefined
  multiple?: boolean | undefined
  onChange: (files: File[]) => void
}

type FileUploadButtonProps {
  accept?: string | undefined
  disabled?: boolean | undefined
  multiple?: boolean | undefined
  onChange?: ((files: File[]) => void) | undefined
}

type FileUploadProps {
  accept?: string | undefined
  children?: ReactNode
  disabled?: boolean | undefined
  dropzoneClassName?: string | undefined
  maxFiles?: number | undefined
  maxSize?: number | undefined
  multiple?: boolean | undefined
  onChange?: ((files: File[]) => void) | undefined
  onError?: ((error: string) => void) | undefined
  showFileList?: boolean | undefined
  value?: File[] | undefined
}

type FilterBarActionsProps {
  children: ReactNode
}

type FilterBarFiltersProps {
  children: ReactNode
}

type FilterBarGroupProps {
  children: ReactNode
  label: ReactNode
}

type FilterBarProps {
  children: ReactNode
}

type FilterBarSearchProps {
  onChange?: ((value: string) => void) | undefined
  placeholder?: string | undefined
  value?: string | undefined
}

type FilterSelectProps {
  allLabel?: false | string | undefined
  label?: string | undefined
  onChange?: ((value: string) => void) | undefined
  options?: readonly SelectOption[] | undefined
  size?: SelectSize | undefined
}

type FormActionsProps {
  align?: "between" | "center" | "left" | "right" | undefined
}

type FormControlProps = FormControlProps

type FormDescriptionProps = FormDescriptionProps

type FormFieldProps {
  disabled?: boolean | undefined
  error?: string | undefined
  errorMessage?: string | undefined
  label?: ReactNode
  name?: string | undefined
  required?: boolean | undefined
}

type FormLabelProps {
  optional?: boolean | undefined
  required?: boolean | undefined
}

type FormMessageProps {
  error?: string | undefined
  errorMessage?: string | undefined
}

type FormProps {
  disabled?: boolean | undefined
}

type FormSectionProps {
  description?: ReactNode
  title?: ReactNode
}

type ImageUploadProps {
  accept?: string | undefined
  className?: string | undefined
  disabled?: boolean | undefined
  error?: boolean | string | undefined
  errorMessage?: string | undefined
  loadingUrls?: string[] | undefined
  max?: number | undefined
  maxSize?: number | undefined
  onChange?: ((files: File[]) => void) | undefined
  onRemove?: ((url: string) => void) | undefined
  placeholder?: string | undefined
  value?: string[] | undefined
}

type ImperativeToastContainerProps {
  className?: string | undefined
  position?: ToastPosition | undefined
}

type InfiniteScrollProps {
  aria-label?: string | undefined
  className?: string | undefined
  dynamicSize?: boolean | undefined
  emptyContent?: ReactNode
  estimateSize?: number | undefined
  gap?: number | undefined
  getItemKey?: ((item: T, index: number) => string | number) | undefined
  hasMore: boolean
  height?: number | string | undefined
  innerClassName?: string | undefined
  items: T[]
  loading?: boolean | undefined
  loadingMore?: boolean | undefined
  loadingMoreContent?: ReactNode
  onLoadMore: () => void
  overscan?: number | undefined
  renderItem: (item: T, index: number, virtualItem: VirtualItem) => ReactNode
  threshold?: number | undefined
}

type InlineCodeProps {
  as?: "code" | "span" | undefined
}

type InputProps {
  error?: boolean | undefined
  errorMessage?: string | undefined
  fullWidth?: boolean | undefined
  leftAddon?: ReactNode
  rightAddon?: ReactNode
  size?: InputSize | undefined
}

type InputSize = InputSize

type KbdProps {
  size?: "md" | "sm" | undefined
}

type LabelProps {
  description?: string | undefined
  optional?: boolean | undefined
  required?: boolean | undefined
}

type LoadingOverlayProps {
  blur?: boolean | undefined
  children?: ReactNode
  fullscreen?: boolean | undefined
  label?: string | undefined
  open?: boolean | undefined
  size?: "lg" | "md" | "sm" | undefined
  visible?: boolean | undefined
}

type LocaleProviderProps {
  children: ReactNode
  locale?: PartialArkiteLocale | undefined
}

type ModalBodyProps = ModalBodyProps

type ModalFooterProps = ModalFooterProps

type ModalHeaderProps = ModalHeaderProps

type ModalProps {
  closeOnBackdropClick?: boolean | undefined
  closeOnEscape?: boolean | undefined
  description?: ReactNode
  footer?: ReactNode
  onClose: () => void
  onSubmit?: FormEventHandler<HTMLFormElement> | undefined
  open: boolean
  showCloseButton?: boolean | undefined
  size?: ModalSize | undefined
  title?: ReactNode
}

type ModalSize = ModalSize

type NavbarBrandProps {
  href?: string | undefined
  logo?: ReactNode
  name?: ReactNode
  renderLink?: ((props: { href: string; children: ReactNode; className?: string; active?: boolean; }) => ReactNode) | undefined
}

type NavbarContentProps {
  align?: "center" | "left" | "right" | undefined
}

type NavbarDividerProps = NavbarDividerProps

type NavbarItemProps {
  active?: boolean | undefined
}

type NavbarLinkProps {
  active?: boolean | undefined
  href?: string | undefined
  renderLink?: ((props: { href: string; children: ReactNode; className?: string; active?: boolean; }) => ReactNode) | undefined
}

type NavbarProps {
  bordered?: boolean | undefined
  height?: string | undefined
  sticky?: boolean | undefined
}

type NavbarSpacerProps = NavbarSpacerProps

type NumberInputProps {
  allowNegative?: boolean | undefined
  clampOnBlur?: boolean | undefined
  className?: string | undefined
  controls?: boolean | undefined
  defaultValue?: number | undefined
  disabled?: boolean | undefined
  error?: boolean | undefined
  errorMessage?: string | undefined
  max?: number | undefined
  min?: number | undefined
  onChange?: ((value: number | null) => void) | undefined
  placeholder?: string | undefined
  precision?: number | undefined
  prefix?: string | undefined
  size?: NumberInputSize | undefined
  step?: number | undefined
  suffix?: string | undefined
  value?: number | null | undefined
}

type NumberInputSize = NumberInputSize

type PageHeaderProps {
  actions?: ReactNode
  backLabel?: string | undefined
  badge?: ReactNode
  breadcrumb?: ReactNode
  description?: ReactNode
  onBack?: (() => void) | undefined
  size?: PageHeaderSize | undefined
  title: ReactNode
}

type PageHeaderSize = PageHeaderSize

type PaginationProps {
  currentPage: number
  mode?: "compact" | "full" | undefined
  onPageChange: (page: number) => void
  onPageSizeChange?: ((pageSize: number) => void) | undefined
  pageSize?: number | undefined
  pageSizeOptions?: number[] | undefined
  showPageSize?: boolean | undefined
  siblingCount?: number | undefined
  totalItems?: number | undefined
  totalPages: number
  variant?: "compact" | "full" | undefined
}

type PaginationState {
  pageIndex: number
  pageSize: number
}

type PartialArkiteLocale {
  actionButtons?: Partial<{ label: string; }> | undefined
  adminLayout?: Partial<{ primaryNavigation: string; logout: string; expandMenu: string; bottomNavigation: string; }> | undefined
  breadcrumb?: Partial<{ label: string; }> | undefined
  bulkActionBar?: Partial<{ selected: (count: number) => string; deselectAll: string; }> | undefined
  calendar?: Partial<{ previousMonth: string; nextMonth: string; weekdays: [string, string, string, string, string, string, string]; weekdaysShort: [string, string, string, string, string, string, string]; }> | undefined
  colorPicker?: Partial<{ pickColor: string; hexValue: string; presetColors: string; selectColor: (color: string) => string; }> | undefined
  combobox?: Partial<{ placeholder: string; searchPlaceholder: string; emptyMessage: string; loading: string; }> | undefined
  commandPalette?: Partial<{ label: string; }> | undefined
  confirmDialog?: Partial<{ cancelLabel: string; confirmLabel: string; confirmTitle: string; confirmDescription: string; deleteTitle: (itemName: string) => string; deleteFallbackItem: string; deleteDescription: string; deleteLabel: string; }> | undefined
  copyButton?: Partial<{ copy: string; copied: string; copyAria: string; copiedAria: string; copyValue: string; }> | undefined
  dataTable?: Partial<{ emptyMessage: string; toggleColumns: string; selectAllRows: string; selectRow: (rowKey: string | number) => string; columns: string; expand: string; expandRow: string; collapseRow: string; sortBy: (header: string) => string; sortColumn: string; filterBy: (header: string) => string; clearFilter: string; loading: string; showing: (count: number, total: number) => string; }> | undefined
  dateLocale?: string | undefined
  datePicker?: Partial<{ placeholder: string; openCalendar: string; today: string; clearDate: string; }> | undefined
  dateRangePicker?: Partial<{ startLabel: string; endLabel: string; clearDates: string; clear: string; selectRange: string; selectStart: string; selectEnd: string; }> | undefined
  drawer?: Partial<{ close: string; }> | undefined
  emptyState?: Partial<{ noResultsTitle: string; noResultsDescription: string; noDataTitle: string; noDataDescription: string; errorTitle: string; errorDescription: string; retryLabel: string; }> | undefined
  fileUpload?: Partial<{ uploadFile: string; uploadFiles: string; uploadImage: string; addImage: string; upload: string; remove: string; replace: string; removeImage: string; preview: string; dropzone: string; anyFileType: string; acceptedTypes: (accept: string) => string; maxSizeNote: (size: string) => string; maxSizeHint: (size: string) => string; fileTooLarge: (name: string, size: string) => string; fileNotAccepted: (name: string) => string; tooManyFiles: (max: number) => string; }> | undefined
  filterBar?: Partial<{ searchPlaceholder: string; }> | undefined
  filterSelect?: Partial<{ all: string; }> | undefined
  label?: Partial<{ optional: string; }> | undefined
  modal?: Partial<{ close: string; }> | undefined
  numberInput?: Partial<{ increment: string; decrement: string; }> | undefined
  pageHeader?: Partial<{ back: string; }> | undefined
  pagination?: Partial<{ label: string; rowsPerPage: string; firstPage: string; previousPage: string; nextPage: string; lastPage: string; pageLabel: (page: number) => string; rangeInfo: (start: number, end: number, total: number) => string; }> | undefined
  passwordInput?: Partial<{ hide: string; show: string; }> | undefined
  pinInput?: Partial<{ charLabel: (index: number, length: number) => string; }> | undefined
  progress?: Partial<{ label: string; }> | undefined
  searchInput?: Partial<{ clear: string; }> | undefined
  sheetSelect?: Partial<{ placeholder: string; }> | undefined
  sidebar?: Partial<{ toggle: string; }> | undefined
  spinner?: Partial<{ loading: string; loadingText: string; }> | undefined
  tagInput?: Partial<{ remove: (tag: string) => string; }> | undefined
  tenantSwitcher?: Partial<{ allLabel: string; allDescription: string; emptyMessage: string; searchPlaceholder: string; }> | undefined
  toast?: Partial<{ close: string; }> | undefined
  tree?: Partial<{ collapse: string; expand: string; toggle: string; }> | undefined
  viewToggle?: Partial<{ label: string; tableView: string; cardView: string; }> | undefined
  virtualList?: Partial<{ label: string; empty: string; loadingMore: string; }> | undefined
}

type PasswordInputProps {
  error?: boolean | undefined
  errorMessage?: string | undefined
  fullWidth?: boolean | undefined
  leftAddon?: ReactNode
  onVisibleChange?: ((visible: boolean) => void) | undefined
  size?: InputSize | undefined
  visible?: boolean | undefined
}

type PinInputProps {
  autoFocus?: boolean | undefined
  defaultValue?: string | undefined
  disabled?: boolean | undefined
  error?: boolean | undefined
  length?: number | undefined
  masked?: boolean | undefined
  onChange?: ((value: string) => void) | undefined
  onComplete?: ((value: string) => void) | undefined
  size?: PinInputSize | undefined
  type?: "alphanumeric" | "numeric" | undefined
  value?: string | undefined
}

type PinInputSize = PinInputSize

type PopoverContentProps {
  showArrow?: boolean | undefined
}

type PopoverProps {
  children: ReactNode
}

type ProgressProps {
  animated?: boolean | undefined
  aria-label?: string | undefined
  indeterminate?: boolean | undefined
  max?: number | undefined
  showLabel?: boolean | undefined
  size?: ProgressSize | undefined
  striped?: boolean | undefined
  value?: number | undefined
  variant?: ProgressVariant | undefined
}

type ProgressSize = ProgressSize

type ProgressVariant = ProgressVariant

type RadioGroupProps {
  className?: string | undefined
  defaultValue?: string | undefined
  disabled?: boolean | undefined
  error?: boolean | undefined
  errorMessage?: string | undefined
  name: string
  onChange?: ((value: string) => void) | undefined
  options: { value: string; label: string; description?: string; disabled?: boolean; }[]
  orientation?: "horizontal" | "vertical" | undefined
  size?: RadioSize | undefined
  value?: string | undefined
}

type RadioProps {
  description?: string | undefined
  error?: boolean | undefined
  errorMessage?: string | undefined
  label?: string | undefined
  size?: RadioSize | undefined
}

type RadioSize = RadioSize

type ScrollFadeProps {
  children: ReactNode
  className?: string | undefined
  scrollClassName?: string | undefined
}

type SearchInputProps {
  clearable?: boolean | undefined
  debounce?: number | undefined
  loading?: boolean | undefined
  onClear?: (() => void) | undefined
  onDebouncedChange?: ((value: string) => void) | undefined
  size?: "lg" | "md" | "sm" | undefined
}

type SegmentedControlOption {
  disabled?: boolean | undefined
  label: string
  value: T
}

type SegmentedControlProps {
  defaultValue?: T | undefined
  disabled?: boolean | undefined
  fullWidth?: boolean | undefined
  onChange?: ((value: T) => void) | undefined
  options: SegmentedControlOption<T>[]
  size?: SegmentedControlSize | undefined
  value?: T | undefined
}

type SegmentedControlSize = SegmentedControlSize

type SelectOption {
  disabled?: boolean | undefined
  label: string
  value: string
}

type SelectProps {
  error?: boolean | undefined
  errorMessage?: string | undefined
  fullWidth?: boolean | undefined
  leftIcon?: ReactNode
  options?: readonly SelectOption[] | undefined
  placeholder?: string | undefined
  size?: SelectSize | undefined
}

type SelectSize = SelectSize

type ServerTableQuery {
  filters: Record<string, string[]>
  page: number
  pageSize: number
  sort: SortState | null
}

type SheetSelectOption {
  description?: string | undefined
  disabled?: boolean | undefined
  label: string
  value: string
}

type SheetSelectProps {
  classNames?: { trigger?: string; sheet?: string; } | undefined
  defaultOpen?: boolean | undefined
  defaultValue?: string | undefined
  disabled?: boolean | undefined
  error?: boolean | undefined
  errorMessage?: string | undefined
  onChange?: ((value: string) => void) | undefined
  onOpenChange?: ((open: boolean) => void) | undefined
  open?: boolean | undefined
  options: readonly SheetSelectOption[]
  placeholder?: string | undefined
  renderOption?: ((option: SheetSelectOption, selected: boolean) => ReactNode) | undefined
  size?: SheetSelectSize | undefined
  title?: ReactNode
  value?: string | undefined
}

type SheetSelectSize = SheetSelectSize

type SidebarContentProps = SidebarContentProps

type SidebarFooterProps = SidebarFooterProps

type SidebarGroupProps {
  label?: ReactNode
}

type SidebarHeaderProps = SidebarHeaderProps

type SidebarItemProps {
  active?: boolean | undefined
  disabled?: boolean | undefined
  href?: string | undefined
  icon?: ReactNode
}

type SidebarProps {
  collapsed?: boolean | undefined
  collapsedWidth?: string | undefined
  collapsible?: boolean | undefined
  defaultCollapsed?: boolean | undefined
  onCollapsedChange?: ((collapsed: boolean) => void) | undefined
  width?: string | undefined
}

type SidebarToggleProps = SidebarToggleProps

type SimpleTooltipProps {
  children: ReactNode
  className?: string | undefined
  content: ReactNode
  delayDuration?: number | undefined
  side?: "bottom" | "left" | "right" | "top" | undefined
}

type SkeletonAvatarProps {
  animation?: "none" | "pulse" | "wave" | undefined
  height?: number | string | undefined
  size?: "lg" | "md" | "sm" | "xl" | undefined
  width?: number | string | undefined
}

type SkeletonCardProps {
  lines?: number | undefined
  showAvatar?: boolean | undefined
  showImage?: boolean | undefined
}

type SkeletonProps {
  animation?: "none" | "pulse" | "wave" | undefined
  height?: number | string | undefined
  variant?: "circular" | "default" | "rounded" | "text" | undefined
  width?: number | string | undefined
}

type SkeletonTableProps {
  columnWidths?: (string | number | undefined)[] | undefined
  columns?: number | undefined
  rows?: number | undefined
}

type SkeletonTextProps {
  animation?: "none" | "pulse" | "wave" | undefined
  height?: number | string | undefined
  lines?: number | undefined
  spacing?: "lg" | "md" | "sm" | undefined
  width?: number | string | undefined
}

type SortDirection = SortDirection

type SortState {
  direction: SortDirection
  key: string
}

type SparklineProps {
  color?: string | undefined
  data: number[] | null | undefined
  height?: number | undefined
  placeholder?: ReactNode
  strokeWidth?: number | undefined
  trend?: SparklineTrend | undefined
  width?: number | undefined
}

type SparklineTrend = SparklineTrend

type SpinnerProps {
  size?: SpinnerSize | undefined
}

type SpinnerSize = SpinnerSize

type StackAlign = StackAlign

type StackDirection = StackDirection

type StackJustify = StackJustify

type StackProps {
  align?: StackAlign | undefined
  direction?: StackDirection | undefined
  fullWidth?: boolean | undefined
  justify?: StackJustify | undefined
  spacing?: StackSpacing | undefined
  wrap?: boolean | undefined
}

type StackSpacing = StackSpacing

type StatCardProps {
  change?: ReactNode
  helpText?: ReactNode
  icon?: ReactNode
  label: ReactNode
  loading?: boolean | undefined
  trend?: StatTrend | undefined
  value: ReactNode
  variant?: "bordered" | "default" | "filled" | undefined
}

type StatGroupProps {
  columns?: 2 | 3 | 4 | undefined
}

type StatProps {
  change?: ReactNode
  helpText?: ReactNode
  icon?: ReactNode
  label: ReactNode
  loading?: boolean | undefined
  trend?: StatTrend | undefined
  value: ReactNode
}

type StatTrend = StatTrend

type StatusDotProps {
  pulse?: boolean | undefined
  size?: StatusDotSize | undefined
  status: StatusType
}

type StatusDotSize = StatusDotSize

type StatusType = StatusType

type StepItem {
  description?: string | undefined
  icon?: ReactNode
  label: string
}

type StepsProps {
  currentStep: number
  orientation?: "horizontal" | "vertical" | undefined
  size?: "md" | "sm" | undefined
  steps: StepItem[]
}

type StepsStatus = StepsStatus

type SwitchProps {
  description?: string | undefined
  error?: boolean | undefined
  errorMessage?: string | undefined
  label?: string | undefined
  size?: ToggleSize | undefined
}

type SwitchSize = ToggleSize

type TableBodyProps = TableBodyProps

type TableCaptionProps = TableCaptionProps

type TableCellProps {
  align?: TableAlign | undefined
  numeric?: boolean | undefined
  stickyAction?: boolean | undefined
  stickyLead?: boolean | undefined
}

type TableEmptyProps {
  children?: ReactNode
  className?: string | undefined
  colSpan?: number | undefined
}

type TableFooterProps = TableFooterProps

type TableHeadProps {
  align?: TableAlign | undefined
  sortDirection?: "asc" | "desc" | null | undefined
  sortable?: boolean | undefined
  stickyAction?: boolean | undefined
  stickyLead?: boolean | undefined
}

type TableHeaderProps = TableHeaderProps

type TableLoadingProps {
  children?: ReactNode
  className?: string | undefined
  colSpan?: number | undefined
}

type TableProps {
  bordered?: boolean | undefined
  compact?: boolean | undefined
  fillHeight?: boolean | undefined
  hoverable?: boolean | undefined
  maxHeight?: number | string | undefined
  minWidth?: number | string | undefined
  scrollFade?: boolean | undefined
  stickyHeader?: boolean | undefined
  variant?: "default" | "striped" | undefined
  wrapperClassName?: string | undefined
  wrapperProps?: (HTMLAttributes<HTMLDivElement> & DataAttributes) | undefined
}

type TableRowProps {
  selected?: boolean | undefined
}

type TabsContentProps {
  forceMount?: boolean | undefined
  value: string
}

type TabsListProps = TabsListProps

type TabsOrientation = TabsOrientation

type TabsProps {
  defaultValue?: string | undefined
  onChange?: ((value: string) => void) | undefined
  onValueChange?: ((value: string) => void) | undefined
  orientation?: TabsOrientation | undefined
  size?: TabsSize | undefined
  value?: string | undefined
  variant?: TabsVariant | undefined
}

type TabsSize = TabsSize

type TabsTriggerProps {
  disabled?: boolean | undefined
  icon?: ReactNode
  value: string
}

type TabsVariant = TabsVariant

type TagInputProps {
  allowDuplicates?: boolean | undefined
  className?: string | undefined
  disabled?: boolean | undefined
  error?: boolean | undefined
  errorMessage?: string | undefined
  max?: number | undefined
  maxLength?: number | undefined
  onChange: (tags: string[]) => void
  placeholder?: string | undefined
  size?: TagInputSize | undefined
  value: string[]
}

type TagInputSize = TagInputSize

type TenantItem {
  id: string
  logoUrl?: string | undefined
  name: string
  planLabel?: string | undefined
  slug?: string | undefined
  status?: string | undefined
  statusVariant?: BadgeVariant | undefined
}

type TenantSwitcherProps {
  allDescription?: string | undefined
  allLabel?: string | undefined
  className?: string | undefined
  currentTenant?: TenantItem | null | undefined
  emptyMessage?: string | undefined
  loading?: boolean | undefined
  onChange?: ((tenant: TenantItem | null) => void) | undefined
  onSearch?: ((query: string) => void) | undefined
  onSelect?: ((tenant: TenantItem | null) => void) | undefined
  renderTenant?: ((tenant: TenantItem, selected: boolean) => ReactNode) | undefined
  searchPlaceholder?: string | undefined
  showAllOption?: boolean | undefined
  tenants: TenantItem[]
  value?: TenantItem | null | undefined
}

type TextareaProps {
  autoResize?: boolean | undefined
  error?: boolean | undefined
  errorMessage?: string | undefined
  size?: TextareaSize | undefined
}

type TextareaSize = TextareaSize

type ThemeFile {
  accent?: string | undefined
  name?: string | undefined
  primary: string
  radius?: string | undefined
}

type ThemeFileToCSSOptions {
  selector?: string | undefined
  source?: string | undefined
}

type ThemePreset {
  dark: ThemeTokens
  light: ThemeTokens
  name: string
}

type ThemePresetName = "default" | "forest" | "neutral" | "ocean"

type ThemeTokens {
  accent-foreground: string
  accent: string
  background: string
  border: string
  card-foreground: string
  card: string
  destructive-border: string
  destructive-foreground: string
  destructive-soft-foreground: string
  destructive-soft: string
  destructive: string
  foreground: string
  info-border: string
  info-foreground: string
  info-soft-foreground: string
  info-soft: string
  info: string
  input: string
  muted-foreground: string
  muted: string
  primary-foreground: string
  primary: string
  radius: string
  ring: string
  secondary-foreground: string
  secondary: string
  success-border: string
  success-foreground: string
  success-soft-foreground: string
  success-soft: string
  success: string
  warning-border: string
  warning-foreground: string
  warning-soft-foreground: string
  warning-soft: string
  warning: string
}

type TimelineItem {
  date?: string | undefined
  description?: ReactNode
  icon?: ReactNode
  title: string
  variant?: TimelineVariant | undefined
}

type TimelineProps {
  items: TimelineItem[]
  size?: "md" | "sm" | undefined
}

type TimelineVariant = TimelineVariant

type ToastConfig {
  formatError?: ((error: unknown) => ReactNode) | undefined
}

type ToastContainerProps {
  className?: string | undefined
  position?: ToastPosition | undefined
}

type ToastData {
  action?: { label: string; onClick: () => void; } | undefined
  description?: ReactNode
  duration?: number | undefined
  id: string
  isLoading?: boolean | undefined
  title?: ReactNode
  variant?: ToastVariant | undefined
}

type ToastFromErrorOptions {
  action?: { label: string; onClick: () => void; } | undefined
  description?: ReactNode
  duration?: number | undefined
  isLoading?: boolean | undefined
  prefix?: ReactNode
}

type ToastItem {
  action?: { label: string; onClick: () => void; } | undefined
  description?: ReactNode
  duration?: number | undefined
  id: string
  isLoading?: boolean | undefined
  title?: ReactNode
  variant?: ToastVariant | undefined
}

type ToastOptions {
  action?: { label: string; onClick: () => void; } | undefined
  description?: ReactNode
  duration?: number | undefined
  isLoading?: boolean | undefined
}

type ToastPosition = ToastPosition

type ToastProps {
  action?: { label: string; onClick: () => void; } | undefined
  className?: string | undefined
  description?: ReactNode
  duration?: number | undefined
  id: string
  isLoading?: boolean | undefined
  onClose: () => void
  title?: ReactNode
  variant?: ToastVariant | undefined
}

type ToastVariant = ToastVariant

type ToggleProps {
  description?: string | undefined
  error?: boolean | undefined
  errorMessage?: string | undefined
  label?: string | undefined
  size?: ToggleSize | undefined
}

type ToggleSize = ToggleSize

type TooltipContentProps = Omit<TooltipPrimitive.TooltipContentProps & RefAttributes<HTMLDivElement>, "ref">

type TooltipProps {
  children: ReactNode
}

type TreeNode {
  children?: TreeNode[] | undefined
  disabled?: boolean | undefined
  icon?: ReactNode
  key: string
  label: ReactNode
}

type TreeProps {
  checkable?: boolean | undefined
  checkedKeys?: string[] | undefined
  className?: string | undefined
  data: TreeNode[]
  defaultCheckedKeys?: string[] | undefined
  defaultExpandedKeys?: string[] | undefined
  defaultSelectedKey?: string | undefined
  expandedKeys?: string[] | undefined
  onCheckChange?: ((keys: string[]) => void) | undefined
  onExpandChange?: ((keys: string[]) => void) | undefined
  onSelect?: ((key: string, node: TreeNode) => void) | undefined
  onSelectionChange?: ((keys: string[]) => void) | undefined
  selectedKey?: string | undefined
  showLines?: boolean | undefined
}

type UseServerTableOptions {
  initialFilters?: Record<string, string[]> | undefined
  initialPage?: number | undefined
  initialPageSize?: number | undefined
  initialSort?: SortState | null | undefined
}

type UseServerTableResult {
  props: { page: number; onPageChange: (page: number) => void; onPageSizeChange: (pageSize: number) => void; sortState: SortState | null; onSortChange: (sort: SortState | null) => void; filters: Record<string, string[]>; onFilterChange: (filters: Record<string, string[]>) => void; }
  query: ServerTableQuery
  queryKey: string
  reset: () => void
  setFilters: (filters: Record<string, string[]>) => void
  setPage: (page: number) => void
  setPageSize: (pageSize: number) => void
  setSort: (sort: SortState | null) => void
}

type ViewMode = ViewMode

type ViewToggleProps {
  className?: string | undefined
  defaultValue?: ViewMode | undefined
  onChange?: ((mode: ViewMode) => void) | undefined
  size?: "md" | "sm" | undefined
  value?: ViewMode | undefined
}

type VirtualListProps {
  aria-label?: string | undefined
  className?: string | undefined
  dynamicSize?: boolean | undefined
  emptyContent?: ReactNode
  estimateSize?: number | undefined
  gap?: number | undefined
  getItemKey?: ((item: T, index: number) => string | number) | undefined
  height?: number | string | undefined
  innerClassName?: string | undefined
  items: T[]
  loading?: boolean | undefined
  overscan?: number | undefined
  renderItem: (item: T, index: number, virtualItem: VirtualItem) => ReactNode
}

value ActionButtons: ForwardRefExoticComponent<ActionButtonsProps & RefAttributes<HTMLElement>>

value AdminLayout: ({ currentPath, navigation, brand, user, basePath, onNavigate, renderLink, hasPermission, onLogout, navbarLeft, navbarRight, sidebarFooter, sidebarVariant, subNav, toastPosition, hideToast, classNames, hideSidebar, hideNavbar, bottomNav, children, className, }: AdminLayoutProps) => JSX.Element

value Alert: ForwardRefExoticComponent<AlertProps & RefAttributes<HTMLDivElement>>

value Avatar: ForwardRefExoticComponent<AvatarProps & RefAttributes<HTMLImageElement>>

value AvatarGroup: ForwardRefExoticComponent<AvatarGroupProps & RefAttributes<HTMLDivElement>>

value Badge: ForwardRefExoticComponent<BadgeProps & RefAttributes<HTMLSpanElement>>

value Breadcrumb: ForwardRefExoticComponent<BreadcrumbProps & RefAttributes<HTMLElement>>

value BreadcrumbEllipsis: ForwardRefExoticComponent<BreadcrumbEllipsisProps & RefAttributes<HTMLSpanElement>>

value BreadcrumbItem: ForwardRefExoticComponent<BreadcrumbItemProps & RefAttributes<HTMLLIElement>>

value BreadcrumbItemComponent: ForwardRefExoticComponent<BreadcrumbItemProps & RefAttributes<HTMLLIElement>>

value BreadcrumbLink: ForwardRefExoticComponent<BreadcrumbLinkProps & RefAttributes<HTMLAnchorElement>>

value BreadcrumbList: ForwardRefExoticComponent<BreadcrumbListProps & RefAttributes<HTMLOListElement>>

value BreadcrumbPage: ForwardRefExoticComponent<BreadcrumbPageProps & RefAttributes<HTMLSpanElement>>

value BreadcrumbRoot: ForwardRefExoticComponent<BreadcrumbRootProps & RefAttributes<HTMLElement>>

value BreadcrumbSeparator: ForwardRefExoticComponent<BreadcrumbSeparatorProps & RefAttributes<HTMLSpanElement>>

value BulkActionBar: ForwardRefExoticComponent<BulkActionBarProps & RefAttributes<HTMLDivElement>>

value Button: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>>

value Calendar: ForwardRefExoticComponent<CalendarProps & RefAttributes<HTMLDivElement>>

value Card: ForwardRefExoticComponent<CardProps & RefAttributes<HTMLDivElement>>

value CardContent: ForwardRefExoticComponent<CardContentProps & RefAttributes<HTMLDivElement>>

value CardField: ForwardRefExoticComponent<CardFieldProps & RefAttributes<HTMLDivElement>>

value CardFooter: ForwardRefExoticComponent<CardFooterProps & RefAttributes<HTMLDivElement>>

value CardGrid: ForwardRefExoticComponent<CardGridProps & RefAttributes<HTMLDivElement>>

value CardHeader: ForwardRefExoticComponent<CardHeaderProps & RefAttributes<HTMLDivElement>>

value CardSurfaceContext: Context<boolean>

value Checkbox: ForwardRefExoticComponent<CheckboxProps & RefAttributes<HTMLInputElement>>

value CheckboxCard: ForwardRefExoticComponent<CheckboxCardProps & RefAttributes<HTMLInputElement>>

value CircularProgress: ForwardRefExoticComponent<CircularProgressProps & RefAttributes<HTMLDivElement>>

value CollapsibleSection: ForwardRefExoticComponent<CollapsibleSectionProps & RefAttributes<HTMLDivElement>>

value ColorPicker: ForwardRefExoticComponent<ColorPickerProps & RefAttributes<HTMLDivElement>>

value Combobox: ForwardRefExoticComponent<ComboboxProps & RefAttributes<HTMLButtonElement>>

value Command: ForwardRefExoticComponent<Omit<Children & Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof HTMLAttributes<HTMLDivElement> | "key"> & { ref?: Ref<HTMLDivElement>; } & { asChild?: boolean; }, keyof HTMLAttributes<HTMLDivElement> | "key" | "asChild"> & { label?: string; shouldFilter?: boolean; filter?: CommandFilter; defaultValue?: string; value?: string; onValueChange?: (value: string) => void; loop?: boolean; disablePointerSelection?: boolean; vimBindings?: boolean; } & RefAttributes<HTMLDivElement>, "ref"> & RefAttributes<HTMLDivElement>>

value CommandDialog: ForwardRefExoticComponent<CommandDialogProps & RefAttributes<HTMLDivElement>>

value CommandEmpty: ForwardRefExoticComponent<Omit<Children & Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof HTMLAttributes<HTMLDivElement> | "key"> & { ref?: Ref<HTMLDivElement>; } & { asChild?: boolean; }, keyof HTMLAttributes<HTMLDivElement> | "key" | "asChild"> & RefAttributes<HTMLDivElement>, "ref"> & RefAttributes<HTMLDivElement>>

value CommandGroup: ForwardRefExoticComponent<Omit<Children & Omit<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof HTMLAttributes<HTMLDivElement> | "key"> & { ref?: Ref<HTMLDivElement>; } & { asChild?: boolean; }, keyof HTMLAttributes<HTMLDivElement> | "key" | "asChild">, "value" | "heading"> & { heading?: ReactNode; value?: string; forceMount?: boolean; } & RefAttributes<HTMLDivElement>, "ref"> & RefAttributes<HTMLDivElement>>

value CommandInput: ForwardRefExoticComponent<Omit<Omit<Pick<Pick<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, keyof InputHTMLAttributes<HTMLInputElement> | "key"> & { ref?: Ref<HTMLInputElement>; } & { asChild?: boolean; }, keyof InputHTMLAttributes<HTMLInputElement> | "key" | "asChild">, "onChange" | "value" | "type"> & { value?: string; onValueChange?: (search: string) => void; } & RefAttributes<HTMLInputElement>, "ref"> & RefAttributes<HTMLInputElement>>

value CommandItem: ForwardRefExoticComponent<Omit<Children & Omit<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof HTMLAttributes<HTMLDivElement> | "key"> & { ref?: Ref<HTMLDivElement>; } & { asChild?: boolean; }, keyof HTMLAttributes<HTMLDivElement> | "key" | "asChild">, "onSelect" | "value" | "disabled"> & { disabled?: boolean; onSelect?: (value: string) => void; value?: string; keywords?: string[]; forceMount?: boolean; } & RefAttributes<HTMLDivElement>, "ref"> & RefAttributes<HTMLDivElement>>

value CommandList: ForwardRefExoticComponent<Omit<Children & Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof HTMLAttributes<HTMLDivElement> | "key"> & { ref?: Ref<HTMLDivElement>; } & { asChild?: boolean; }, keyof HTMLAttributes<HTMLDivElement> | "key" | "asChild"> & { label?: string; } & RefAttributes<HTMLDivElement>, "ref"> & RefAttributes<HTMLDivElement>>

value CommandSeparator: ForwardRefExoticComponent<Omit<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof HTMLAttributes<HTMLDivElement> | "key"> & { ref?: Ref<HTMLDivElement>; } & { asChild?: boolean; }, keyof HTMLAttributes<HTMLDivElement> | "key" | "asChild"> & { alwaysRender?: boolean; } & RefAttributes<HTMLDivElement>, "ref"> & RefAttributes<HTMLDivElement>>

value CommandShortcut: ({ className, children, ...props }: HTMLAttributes<HTMLSpanElement>) => JSX.Element

value ConfirmDialog: ForwardRefExoticComponent<ConfirmDialogProps & RefAttributes<HTMLDivElement>>

value Container: ForwardRefExoticComponent<ContainerProps & RefAttributes<HTMLDivElement>>

value CopyButton: ForwardRefExoticComponent<CopyButtonProps & RefAttributes<HTMLButtonElement>>

value CopyInput: ForwardRefExoticComponent<CopyInputProps & RefAttributes<HTMLInputElement>>

value DataTable: <T>({ data, columns, pagination, compact, pageSizeOptions, defaultPageSize, getRowKey, loading, emptyContent, onRowClick, rowClassName, selectable, hoverable, onRowSelect, isRowSelectable, selectedRows, defaultSelectedRows, onSelectionChange, expandable, renderExpandedRow, columnToggle, stickyHeader, maxHeight, minWidth, scrollFade, bordered, fillHeight, sortState: controlledSortState, onSortChange, filters: controlledFilters, onFilterChange, page: controlledPage, onPageChange, onPageSizeChange, totalRows, className, }: DataTableProps<T>) => JSX.Element

value DatePicker: ForwardRefExoticComponent<DatePickerProps & RefAttributes<HTMLInputElement>>

value DateRangePicker: ForwardRefExoticComponent<DateRangePickerProps & RefAttributes<HTMLDivElement>>

value DeleteConfirmDialog: ForwardRefExoticComponent<DeleteConfirmDialogProps & RefAttributes<HTMLDivElement>>

value DescriptionItem: ForwardRefExoticComponent<DescriptionItemProps & RefAttributes<HTMLDivElement>>

value DescriptionList: ForwardRefExoticComponent<DescriptionListProps & RefAttributes<HTMLDListElement>>

value Divider: ForwardRefExoticComponent<DividerProps & RefAttributes<HTMLDivElement>>

value Drawer: ForwardRefExoticComponent<DrawerProps & RefAttributes<HTMLDivElement>>

value DrawerBody: ForwardRefExoticComponent<DrawerBodyProps & RefAttributes<HTMLDivElement>>

value DrawerFooter: ForwardRefExoticComponent<DrawerFooterProps & RefAttributes<HTMLDivElement>>

value DrawerHeader: ForwardRefExoticComponent<DrawerHeaderProps & RefAttributes<HTMLDivElement>>

value DropdownMenu: FC<DropdownMenuPrimitive.DropdownMenuProps>

value DropdownMenuCheckboxItem: ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & RefAttributes<HTMLDivElement>, "ref"> & RefAttributes<HTMLDivElement>>

value DropdownMenuContent: ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & RefAttributes<HTMLDivElement>, "ref"> & RefAttributes<HTMLDivElement>>

value DropdownMenuGroup: ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & RefAttributes<HTMLDivElement>>

value DropdownMenuItem: ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & RefAttributes<HTMLDivElement>, "ref"> & { destructive?: boolean; } & RefAttributes<HTMLDivElement>>

value DropdownMenuLabel: ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & RefAttributes<HTMLDivElement>, "ref"> & { inset?: boolean; } & RefAttributes<HTMLDivElement>>

value DropdownMenuPortal: FC<DropdownMenuPrimitive.DropdownMenuPortalProps>

value DropdownMenuRadioGroup: ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & RefAttributes<HTMLDivElement>>

value DropdownMenuRadioItem: ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & RefAttributes<HTMLDivElement>, "ref"> & RefAttributes<HTMLDivElement>>

value DropdownMenuSeparator: ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & RefAttributes<HTMLDivElement>, "ref"> & RefAttributes<HTMLDivElement>>

value DropdownMenuShortcut: ({ className, ...props }: HTMLAttributes<HTMLSpanElement>) => JSX.Element

value DropdownMenuSub: FC<DropdownMenuPrimitive.DropdownMenuSubProps>

value DropdownMenuSubContent: ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & RefAttributes<HTMLDivElement>, "ref"> & RefAttributes<HTMLDivElement>>

value DropdownMenuSubTrigger: ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & RefAttributes<HTMLDivElement>, "ref"> & { inset?: boolean; } & RefAttributes<HTMLDivElement>>

value DropdownMenuTrigger: ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & RefAttributes<HTMLButtonElement>>

value EmptyState: ForwardRefExoticComponent<EmptyStateProps & RefAttributes<HTMLDivElement>>

value ErrorBoundary: typeof ErrorBoundary

value ErrorState: ForwardRefExoticComponent<ErrorStateProps & RefAttributes<HTMLDivElement>>

value FileTrigger: ({ accept, multiple, disabled, onChange, children, }: FileTriggerProps) => JSX.Element

value FileUpload: ForwardRefExoticComponent<FileUploadProps & RefAttributes<HTMLInputElement>>

value FileUploadButton: ForwardRefExoticComponent<FileUploadButtonProps & RefAttributes<HTMLButtonElement>>

value FilterBar: ForwardRefExoticComponent<FilterBarProps & RefAttributes<HTMLDivElement>>

value FilterBarActions: ForwardRefExoticComponent<FilterBarActionsProps & RefAttributes<HTMLDivElement>>

value FilterBarFilters: ForwardRefExoticComponent<FilterBarFiltersProps & RefAttributes<HTMLDivElement>>

value FilterBarGroup: ForwardRefExoticComponent<FilterBarGroupProps & RefAttributes<HTMLDivElement>>

value FilterBarSearch: ForwardRefExoticComponent<FilterBarSearchProps & RefAttributes<HTMLDivElement>>

value FilterSelect: ForwardRefExoticComponent<FilterSelectProps & RefAttributes<HTMLSelectElement>>

value FilterToolbarContext: Context<boolean>

value Form: ForwardRefExoticComponent<FormProps & RefAttributes<HTMLFormElement>>

value FormActions: ForwardRefExoticComponent<FormActionsProps & RefAttributes<HTMLDivElement>>

value FormControl: ForwardRefExoticComponent<FormControlProps & RefAttributes<HTMLDivElement>>

value FormDescription: ForwardRefExoticComponent<FormDescriptionProps & RefAttributes<HTMLParagraphElement>>

value FormField: ForwardRefExoticComponent<FormFieldProps & RefAttributes<HTMLDivElement>>

value FormLabel: ForwardRefExoticComponent<FormLabelProps & RefAttributes<HTMLLabelElement>>

value FormMessage: ForwardRefExoticComponent<FormMessageProps & RefAttributes<HTMLParagraphElement>>

value FormSection: ForwardRefExoticComponent<FormSectionProps & RefAttributes<HTMLFieldSetElement>>

value HStack: ForwardRefExoticComponent<Omit<StackProps, "direction"> & RefAttributes<HTMLDivElement>>

value ImageUpload: ForwardRefExoticComponent<ImageUploadProps & RefAttributes<HTMLInputElement>>

value ImperativeToastContainer: ForwardRefExoticComponent<ToastContainerProps & RefAttributes<HTMLDivElement>>

value InfiniteScroll: <T>(props: InfiniteScrollProps<T> & { ref?: ForwardedRef<HTMLDivElement>; }) => ReactElement

value InlineCode: ForwardRefExoticComponent<InlineCodeProps & RefAttributes<HTMLElement>>

value Input: ForwardRefExoticComponent<InputProps & RefAttributes<HTMLInputElement>>

value Kbd: ForwardRefExoticComponent<KbdProps & RefAttributes<HTMLElement>>

value Label: ForwardRefExoticComponent<LabelProps & RefAttributes<HTMLLabelElement>>

value LoadingOverlay: ForwardRefExoticComponent<LoadingOverlayProps & RefAttributes<HTMLDivElement>>

value LocaleProvider: ({ locale, children }: LocaleProviderProps) => JSX.Element

value Modal: ForwardRefExoticComponent<ModalProps & RefAttributes<HTMLDivElement>>

value ModalBody: ForwardRefExoticComponent<ModalBodyProps & RefAttributes<HTMLDivElement>>

value ModalFooter: ForwardRefExoticComponent<ModalFooterProps & RefAttributes<HTMLDivElement>>

value ModalHeader: ForwardRefExoticComponent<ModalHeaderProps & RefAttributes<HTMLDivElement>>

value Navbar: ForwardRefExoticComponent<NavbarProps & RefAttributes<HTMLElement>>

value NavbarBrand: ForwardRefExoticComponent<NavbarBrandProps & RefAttributes<HTMLDivElement>>

value NavbarContent: ForwardRefExoticComponent<NavbarContentProps & RefAttributes<HTMLDivElement>>

value NavbarDivider: ForwardRefExoticComponent<NavbarDividerProps & RefAttributes<HTMLDivElement>>

value NavbarItem: ForwardRefExoticComponent<NavbarItemProps & RefAttributes<HTMLDivElement>>

value NavbarLink: ForwardRefExoticComponent<NavbarLinkProps & RefAttributes<HTMLAnchorElement>>

value NavbarSpacer: ForwardRefExoticComponent<NavbarSpacerProps & RefAttributes<HTMLDivElement>>

value NoData: ForwardRefExoticComponent<EmptyStatePresetProps & RefAttributes<HTMLDivElement>>

value NoResults: ForwardRefExoticComponent<EmptyStatePresetProps & RefAttributes<HTMLDivElement>>

value NumberInput: ForwardRefExoticComponent<NumberInputProps & RefAttributes<HTMLInputElement>>

value PageHeader: ForwardRefExoticComponent<PageHeaderProps & RefAttributes<HTMLDivElement>>

value Pagination: ForwardRefExoticComponent<PaginationProps & RefAttributes<HTMLElement>>

value PasswordInput: ForwardRefExoticComponent<PasswordInputProps & RefAttributes<HTMLInputElement>>

value PinInput: ForwardRefExoticComponent<PinInputProps & RefAttributes<HTMLDivElement>>

value Popover: FC<PopoverPrimitive.PopoverProps>

value PopoverAnchor: ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & RefAttributes<HTMLDivElement>>

value PopoverClose: ForwardRefExoticComponent<PopoverPrimitive.PopoverCloseProps & RefAttributes<HTMLButtonElement>>

value PopoverContent: ForwardRefExoticComponent<PopoverContentProps & RefAttributes<HTMLDivElement>>

value PopoverTrigger: ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & RefAttributes<HTMLButtonElement>>

value Progress: ForwardRefExoticComponent<ProgressProps & RefAttributes<HTMLDivElement>>

value Radio: ForwardRefExoticComponent<RadioProps & RefAttributes<HTMLInputElement>>

value RadioGroup: ForwardRefExoticComponent<RadioGroupProps & RefAttributes<HTMLDivElement>>

value ScrollFade: ForwardRefExoticComponent<ScrollFadeProps & RefAttributes<HTMLDivElement>>

value SearchInput: ForwardRefExoticComponent<SearchInputProps & RefAttributes<HTMLInputElement>>

value SegmentedControl: <T extends string = string>(props: SegmentedControlProps<T> & { ref?: Ref<HTMLDivElement>; }) => ReactElement

value Select: ForwardRefExoticComponent<SelectProps & RefAttributes<HTMLSelectElement>>

value SheetSelect: ForwardRefExoticComponent<SheetSelectProps & RefAttributes<HTMLButtonElement>>

value Sidebar: ForwardRefExoticComponent<SidebarProps & RefAttributes<HTMLElement>>

value SidebarContent: ForwardRefExoticComponent<SidebarContentProps & RefAttributes<HTMLDivElement>>

value SidebarFooter: ForwardRefExoticComponent<SidebarFooterProps & RefAttributes<HTMLDivElement>>

value SidebarGroup: ForwardRefExoticComponent<SidebarGroupProps & RefAttributes<HTMLDivElement>>

value SidebarHeader: ForwardRefExoticComponent<SidebarHeaderProps & RefAttributes<HTMLDivElement>>

value SidebarItem: ForwardRefExoticComponent<SidebarItemProps & RefAttributes<HTMLButtonElement | HTMLAnchorElement>>

value SidebarToggle: ForwardRefExoticComponent<SidebarToggleProps & RefAttributes<HTMLButtonElement>>

value SimpleTooltip: ({ content, side, delayDuration, className, children, }: SimpleTooltipProps) => JSX.Element

value Skeleton: ForwardRefExoticComponent<SkeletonProps & RefAttributes<HTMLDivElement>>

value SkeletonAvatar: ForwardRefExoticComponent<SkeletonAvatarProps & RefAttributes<HTMLDivElement>>

value SkeletonCard: ForwardRefExoticComponent<SkeletonCardProps & RefAttributes<HTMLDivElement>>

value SkeletonTable: ForwardRefExoticComponent<SkeletonTableProps & RefAttributes<HTMLDivElement>>

value SkeletonText: ForwardRefExoticComponent<SkeletonTextProps & RefAttributes<HTMLDivElement>>

value Sparkline: ForwardRefExoticComponent<SparklineProps & RefAttributes<SVGSVGElement>>

value Spinner: ForwardRefExoticComponent<SpinnerProps & RefAttributes<HTMLDivElement>>

value Stack: ForwardRefExoticComponent<StackProps & RefAttributes<HTMLDivElement>>

value Stat: ForwardRefExoticComponent<StatProps & RefAttributes<HTMLDivElement>>

value StatCard: ForwardRefExoticComponent<StatCardProps & RefAttributes<HTMLDivElement>>

value StatGroup: ForwardRefExoticComponent<StatGroupProps & RefAttributes<HTMLDivElement>>

value StatusDot: ForwardRefExoticComponent<StatusDotProps & RefAttributes<HTMLSpanElement>>

value Steps: ForwardRefExoticComponent<StepsProps & RefAttributes<HTMLDivElement>>

value Switch: ForwardRefExoticComponent<ToggleProps & RefAttributes<HTMLInputElement>>

value Table: ForwardRefExoticComponent<TableProps & RefAttributes<HTMLTableElement>>

value TableBody: ForwardRefExoticComponent<TableBodyProps & RefAttributes<HTMLTableSectionElement>>

value TableCaption: ForwardRefExoticComponent<TableCaptionProps & RefAttributes<HTMLTableCaptionElement>>

value TableCell: ForwardRefExoticComponent<TableCellProps & RefAttributes<HTMLTableCellElement>>

value TableEmpty: ({ colSpan, children, className }: TableEmptyProps) => JSX.Element

value TableFooter: ForwardRefExoticComponent<TableFooterProps & RefAttributes<HTMLTableSectionElement>>

value TableHead: ForwardRefExoticComponent<TableHeadProps & RefAttributes<HTMLTableCellElement>>

value TableHeader: ForwardRefExoticComponent<TableHeaderProps & RefAttributes<HTMLTableSectionElement>>

value TableLoading: ({ colSpan, children, className }: TableLoadingProps) => JSX.Element

value TableRow: ForwardRefExoticComponent<TableRowProps & RefAttributes<HTMLTableRowElement>>

value Tabs: ForwardRefExoticComponent<TabsProps & RefAttributes<HTMLDivElement>>

value TabsContent: ForwardRefExoticComponent<TabsContentProps & RefAttributes<HTMLDivElement>>

value TabsList: ForwardRefExoticComponent<TabsListProps & RefAttributes<HTMLDivElement>>

value TabsTrigger: ForwardRefExoticComponent<TabsTriggerProps & RefAttributes<HTMLButtonElement>>

value TagInput: ForwardRefExoticComponent<TagInputProps & RefAttributes<HTMLInputElement>>

value TenantSwitcher: ForwardRefExoticComponent<TenantSwitcherProps & RefAttributes<HTMLDivElement>>

value Textarea: ForwardRefExoticComponent<TextareaProps & RefAttributes<HTMLTextAreaElement>>

value ThemeFileError: typeof ThemeFileError

value Timeline: ForwardRefExoticComponent<TimelineProps & RefAttributes<HTMLDivElement>>

value Toast: ({ id: _id, title, description, variant, duration, action, isLoading, onClose, className, }: ToastProps) => JSX.Element

value ToastContainer: ForwardRefExoticComponent<ToastContainerProps & RefAttributes<HTMLDivElement>>

value Toggle: ForwardRefExoticComponent<ToggleProps & RefAttributes<HTMLInputElement>>

value Tooltip: FC<TooltipPrimitive.TooltipProps>

value TooltipContent: ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & RefAttributes<HTMLDivElement>, "ref"> & RefAttributes<HTMLDivElement>>

value TooltipProvider: FC<TooltipPrimitive.TooltipProviderProps>

value TooltipTrigger: ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & RefAttributes<HTMLButtonElement>>

value Tree: ForwardRefExoticComponent<TreeProps & RefAttributes<HTMLDivElement>>

value VStack: ForwardRefExoticComponent<Omit<StackProps, "direction"> & RefAttributes<HTMLDivElement>>

value ViewToggle: ForwardRefExoticComponent<ViewToggleProps & RefAttributes<HTMLDivElement>>

value VirtualList: <T>(props: VirtualListProps<T> & { ref?: ForwardedRef<HTMLDivElement>; }) => ReactElement

value applyDarkTheme: (theme: ThemePreset, element?: HTMLElement) => void

value applyTheme: (theme: ThemePreset, element?: HTMLElement) => void

value chartColorList: readonly ["hsl(var(--chart-1))", "hsl(var(--chart-2))", "hsl(var(--chart-3))", "hsl(var(--chart-4))", "hsl(var(--chart-5))"]

value chartColors: { readonly 1: "hsl(var(--chart-1))"; readonly 2: "hsl(var(--chart-2))"; readonly 3: "hsl(var(--chart-3))"; readonly 4: "hsl(var(--chart-4))"; readonly 5: "hsl(var(--chart-5))"; }

value cn: (...inputs: ClassValue[]) => string

value createTheme: (options: CreateThemeOptions) => ThemePreset

value defaultTheme: ThemePreset

value enUS: ArkiteLocale

value forestTheme: ThemePreset

value neutralTheme: ThemePreset

value oceanTheme: ThemePreset

value parseThemeFile: (input: unknown) => ThemeFile

value themeFileToCSS: (file: ThemeFile, options?: ThemeFileToCSSOptions) => string

value themePresets: { readonly default: ThemePreset; readonly neutral: ThemePreset; readonly ocean: ThemePreset; readonly forest: ThemePreset; }

value themeToCSS: (theme: ThemePreset, selector?: string) => string

value toast: { show: (title: ReactNode, options?: Partial<Omit<ToastData, "id" | "title">>) => string; success: (title: ReactNode, options?: ToastOptions) => string; error: (title: ReactNode, options?: ToastOptions) => string; warning: (title: ReactNode, options?: ToastOptions) => string; info: (title: ReactNode, options?: ToastOptions) => string; loading: (title: ReactNode, options?: ToastOptions) => string; fromError: (err: unknown, options?: ToastFromErrorOptions) => string; configure: (next: ToastConfig) => void; dismiss: (id: string) => void; dismissAll: () => void; }

value useCommandPalette: () => { open: boolean; setOpen: Dispatch<SetStateAction<boolean>>; }

value useFormContext: () => FormContextValue

value useFormFieldContext: () => FormFieldContextValue

value useLocale: () => ArkiteLocale

value useServerTable: (options?: UseServerTableOptions) => UseServerTableResult

value useSidebar: () => SidebarContextValue

value useToast: () => ((options: Omit<ToastData, "id">) => string) & { show: (title: ReactNode, options?: ShorthandOptions) => string; success: (title: ReactNode, options?: ShorthandOptions) => string; error: (title: ReactNode, options?: ShorthandOptions) => string; warning: (title: ReactNode, options?: ShorthandOptions) => string; info: (title: ReactNode, options?: ShorthandOptions) => string; loading: (title: ReactNode, options?: ToastOptions) => string; fromError: (err: unknown, options?: ToastFromErrorOptions) => string; dismiss: (id: string) => void; dismissAll: () => void; clear: () => void; }

value useToastStore: UseBoundStore<StoreApi<ToastStoreState>>

value zhTW: ArkiteLocale