@rfdtech/components 1.1.0 → 1.5.0

package/README.md

@@ -20,10 +20,21 @@ After upgrading the package, clear Vite's dependency cache if styles look stale:
 
 ## Shared theming
 
-All components share design tokens defined in [`src/styles/theme.css`](src/styles/theme.css). Tokens are applied on `:root` when a component is imported.
+Wrap your app in `ThemeProvider` for light, dark, and system themes. Design tokens live in [`src/styles/theme.css`](src/styles/theme.css) and apply to `.gsl-theme`, `document.documentElement`, and all components (including portaled modals and popovers).
 
-| Token | Default | Use |
-|-------|---------|-----|
+```tsx
+import { ThemeProvider } from "@rfdtech/components";
+import "@rfdtech/components/style.css";
+
+<ThemeProvider defaultTheme="system">
+  <App />
+</ThemeProvider>
+```
+
+Use `useTheme()` to read or change the active theme at runtime. See the [Theme](/docs/theme) docs page for token reference and controlled mode.
+
+| Token | Light default | Use |
+|-------|---------------|-----|
 | `--gsl-primary` | `#dc2626` | Buttons, focus rings, accents |
 | `--gsl-primary-light` | `#fef2f2` | Selected rows, hover fills |
 | `--gsl-bg` | `#ffffff` | Surfaces |
@@ -35,7 +46,7 @@ All components share design tokens defined in [`src/styles/theme.css`](src/style
 | `--gsl-success` | `#16a34a` | Success states |
 | `--gsl-warning` | `#eab308` | Warnings |
 
-Override on a component root or any ancestor:
+You can still override tokens on any ancestor without `ThemeProvider`:
 
 ```css
 .my-app {
@@ -49,467 +60,37 @@ Override on a component root or any ancestor:
 ## Install
 
 ```bash
-npm install @rfdtech/components react react-dom
+npm install @rfdtech/components
 ```
 
-## AppSwitcher
+Requires React 18+. npm 7+ auto-installs `react` and `react-dom` as peer dependencies. Radix UI and other runtime packages are included as dependencies of `@rfdtech/components`.
 
-Google Apps–style 9-dot launcher for switching between GSL systems. Drop it into your header to let users jump between products.
 
-### Usage
+## AppSwitcher
+
+Google Apps–style 9-dot launcher for switching between GSL systems. Drop it into your header to let users jump between products. Pass `apps` directly from your own data layer; use `loading` while data is being fetched.
 
-**Remote fetch** — loads systems from `GET {baseUrl}/v1/me/apps` with a bearer token:
+See the [AppSwitcher](/docs/app-switcher) docs page for props and exported types.
 
 ```tsx
-import { AppSwitcher } from "@rfdtech/components";
+import { AppSwitcher, type AppItem } from "@rfdtech/components";
 
-function Header({ baseUrl, accessToken }: { baseUrl: string; accessToken: string }) {
+function Header({ apps, loading }: { apps: AppItem[]; loading: boolean }) {
   return (
     <AppSwitcher
-      baseUrl={baseUrl}
-      accessToken={accessToken}
+      apps={apps}
+      loading={loading}
       title="System directory"
-      onAppSelect={(app) => console.log(app.name, app.metadata)}
-    />
-  );
-}
-```
-
-Expected API response:
-
-```json
-{
-  "success": true,
-  "message": "Available systems retrieved.",
-  "data": {
-    "apps": [
-      {
-        "system_id": "gov-portal",
-        "system_name": "Governance Portal",
-        "system_code": "GOV-123456",
-        "frontend_url": "http://178.105.154.224:3001",
-        "role": "registrar",
-        "permissions": ["cases:review"]
-      }
-    ]
-  },
-  "meta": { "count": 1 }
-}
-```
-
-**Static apps** — pass a list directly instead of fetching:
-
-```tsx
-const apps = [
-  {
-    id: "mail",
-    name: "Mail",
-    icon: "https://example.com/mail.png",
-    href: "https://mail.example.com",
-  },
-];
-
-<AppSwitcher apps={apps} title="System directory" />
-```
-
-### Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `apps` | `AppItem[]` | — | Static apps to show in the grid |
-| `baseUrl` | `string` | required* | API base URL, e.g. `https://api.example.com` |
-| `accessToken` | `string` | required* | Bearer access token |
-| `columns` | `number` | `3` | Number of grid columns |
-| `open` | `boolean` | — | Controlled open state |
-| `onOpenChange` | `(open: boolean) => void` | — | Open state callback |
-| `onAppSelect` | `(app: AppItem) => void` | — | Called when an app is selected |
-| `triggerLabel` | `string` | `"Open app switcher"` | Accessible label for trigger |
-| `trigger` | `ReactNode` | 9-dot icon | Custom trigger element |
-| `title` | `string` | — | Panel header title |
-| `footer` | `ReactNode` | — | Footer content below the grid |
-| `placement` | `"bottom-end" \| "bottom-start" \| "bottom"` | `"bottom-end"` | Panel position |
-| `closeOnSelect` | `boolean` | `true` | Close panel after selection |
-| `className` | `string` | — | Root CSS class |
-| `style` | `CSSProperties` | — | Root inline styles |
-
-\* Required when `apps` is not provided.
-
-### Types
-
-All types are exported from `@rfdtech/components`.
-
-```ts
-interface AppItem {
-  id: string;
-  name: string;
-  icon: ReactNode | string;
-  href?: string;
-  onClick?: (app: AppItem) => void;
-  disabled?: boolean;
-  badge?: string;
-  metadata?: MeApp;
-}
-
-interface MeApp {
-  system_id: string;
-  system_name: string;
-  system_code: string;
-  frontend_url: string;
-  role: string;
-  permissions: string[];
-}
-
-interface MeAppsResponse {
-  success: boolean;
-  message: string;
-  data: { apps: MeApp[] };
-  meta: { count: number };
-}
-```
-
-Also exported: `AppSwitcherProps`, `UseMeAppsOptions`, `UseMeAppsReturn`, `UseAppSwitcherOptions`, `UseAppSwitcherReturn`.
-
-### Hooks
-
-**`useMeApps`** — fetch and map systems from `/v1/me/apps`:
-
-```tsx
-import { useMeApps } from "@rfdtech/components";
-
-const { apps, loading, error, refetch } = useMeApps({
-  baseUrl: "https://api.example.com",
-  accessToken: "<token>",
-});
-```
-
-**`useAppSwitcher`** — headless open/close state for custom UI:
-
-```tsx
-import { useAppSwitcher } from "@rfdtech/components";
-
-const { open, toggle, close, triggerRef, panelRef } = useAppSwitcher();
-```
-
-### Utilities
-
-```tsx
-import {
-  buildMeAppsUrl,
-  createMeAppsRequestInit,
-  fetchMeApps,
-  mapMeAppToAppItem,
-  mapMeAppsToAppItems,
-  MeAppsFetchError,
-} from "@rfdtech/components";
-
-const url = buildMeAppsUrl("https://api.example.com");
-const init = createMeAppsRequestInit("<token>");
-const response = await fetchMeApps(url, init);
-const apps = mapMeAppsToAppItems(response.data.apps);
-```
-
-| Export | Description |
-|--------|-------------|
-| `buildMeAppsUrl(baseUrl)` | Builds `{baseUrl}/v1/me/apps`, or `/v1/me/apps` when `baseUrl` is empty |
-| `createMeAppsRequestInit(accessToken)` | Returns fetch options with `Authorization: Bearer ...` |
-| `fetchMeApps(url, init?)` | Fetches and validates the API response; throws `MeAppsFetchError` on failure |
-| `mapMeAppToAppItem(app)` | Maps one `MeApp` to an `AppItem` |
-| `mapMeAppsToAppItems(apps)` | Maps an array of `MeApp` values to `AppItem[]` |
-| `MeAppsFetchError` | Error thrown when the HTTP request fails or `success` is `false` |
-
-### Subcomponents
-
-Also exported for custom layouts:
-
-- `AppSwitcherItem` — single app grid cell
-- `GridIcon` — default 9-dot trigger icon
-- `SystemAppIcon` — initials avatar for API-fetched apps
-
-### Theming
-
-Override shared tokens on `.gsl-app-switcher` (see [Shared theming](#shared-theming)). `--gsl-focus` aliases to `--gsl-primary`.
-
-```css
-.my-switcher {
-  --gsl-primary: #dc2626;
-  --gsl-hover: #f1f3f4;
-  --gsl-columns: 4;
-}
-```
-
-### CORS
-
-When fetching from a remote `baseUrl` in the browser, the API must allow the host application's origin. Configure CORS on your backend or proxy `/v1` through your dev server during local development.
-
-## Dropdown
-
-Single-value select with a combobox trigger and portaled listbox. Use for forms and filters where the user picks one option from a list.
-
-### Usage
-
-```tsx
-import { Dropdown } from "@rfdtech/components";
-
-function DepartmentFilter() {
-  const [department, setDepartment] = useState<string | null>(null);
-
-  return (
-    <Dropdown
-      ariaLabel="Department"
-      value={department}
-      onChange={setDepartment}
-      placeholder="Choose department..."
-      clearable
-      options={[
-        { value: "finance", label: "Finance" },
-        { value: "hr", label: "Human Resources" },
-      ]}
+      onAppSelect={(app) => console.log(app.name)}
     />
   );
 }
 ```
 
-### Props
+Props: `apps`, `loading`, `loadingLabel`, `columns`, `open`, `onOpenChange`, `onAppSelect`, `triggerLabel`, `trigger`, `title`, `footer`, `placement`, `closeOnSelect`, `className`, `style`. Exported types: `AppSwitcherProps`, `AppItem`, `UseAppSwitcherOptions`, `UseAppSwitcherReturn`.
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `ariaLabel` | `string` | required | Accessible label for the combobox |
-| `value` | `string \| null` | required | Selected option value |
-| `onChange` | `(value: string \| null) => void` | required | Called when selection changes |
-| `options` | `DropdownOption[]` | required | `{ value, label, disabled? }` items |
-| `placeholder` | `string` | `"Select..."` | Text shown when no value is selected |
-| `clearable` | `boolean` | `false` | Show placeholder as a clear option |
-| `disabled` | `boolean` | `false` | Disable the trigger |
-| `open` | `boolean` | — | Controlled open state |
-| `onOpenChange` | `(open: boolean) => void` | — | Open state callback |
-| `className` | `string` | — | Root CSS class |
-| `style` | `CSSProperties` | — | Root inline styles |
+Also exported: `AppSwitcherItem`, `GridIcon`, `SystemAppIcon`, `useAppSwitcher`.
 
-## Combobox
-
-Text-input combobox with debounced async search. Use when options are loaded from an API based on what the user types.
-
-### Usage
-
-```tsx
-import { Combobox } from "@rfdtech/components";
-import type { DropdownOption } from "@rfdtech/components";
-
-const loadUsers = (query: string): Promise<DropdownOption[]> =>
-  fetch(`/api/users?q=${encodeURIComponent(query)}`).then((r) => r.json());
-
-function UserPicker() {
-  const [userId, setUserId] = useState<string | null>(null);
-
-  return (
-    <Combobox
-      ariaLabel="User"
-      value={userId}
-      onChange={setUserId}
-      loadOptions={loadUsers}
-      placeholder="Search users..."
-      clearable
-      getOptionLabel={(id) => cachedUsers.get(id)}
-    />
-  );
-}
-```
-
-The component caches the selected option label internally. Pass `getOptionLabel` when the value may be set before options are loaded (e.g. editing an existing record).
-
-### Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `ariaLabel` | `string` | required | Accessible label for the combobox input |
-| `value` | `string \| null` | required | Selected option value |
-| `onChange` | `(value: string \| null) => void` | required | Called when selection changes |
-| `loadOptions` | `(query: string) => Promise<DropdownOption[]>` | required | Async search function |
-| `placeholder` | `string` | `"Search..."` | Input placeholder |
-| `debounceMs` | `number` | `300` | Debounce delay before calling `loadOptions` |
-| `minSearchLength` | `number` | `0` | Minimum query length before searching |
-| `getOptionLabel` | `(value: string) => string \| undefined` | — | Resolve label for a value not in current results |
-| `noResultsText` | `string` | `"No results"` | Text when search returns no options |
-| `loadingText` | `string` | `"Loading..."` | Accessible label for the loading spinner |
-| `clearable` | `boolean` | `false` | Show a clear button when a value is selected |
-| `disabled` | `boolean` | `false` | Disable the input |
-| `open` | `boolean` | — | Controlled open state |
-| `onOpenChange` | `(open: boolean) => void` | — | Open state callback |
-| `className` | `string` | — | Root CSS class |
-| `style` | `CSSProperties` | — | Root inline styles |
-
-## InputMask
-
-Pattern-based masked text input for phone numbers, dates, and other formatted fields.
-
-### Mask syntax
-
-| Token | Accepts |
-|-------|---------|
-| `#` | Digit (`0-9`) |
-| `A` | Letter (`a-z`, `A-Z`) |
-| `*` | Alphanumeric |
-| Other characters | Literals inserted automatically |
-
-### Usage
-
-```tsx
-import { INPUT_MASK_PRESETS, InputMask } from "@rfdtech/components";
-
-function ContactForm() {
-  const [phone, setPhone] = useState("");
-  const [rawPhone, setRawPhone] = useState("");
-
-  return (
-    <InputMask
-      ariaLabel="Phone number"
-      mask={INPUT_MASK_PRESETS.phoneGh}
-      value={phone}
-      onChange={setPhone}
-      onValueChange={setRawPhone}
-      placeholder="0XX XXX XXXX"
-      inputMode="tel"
-    />
-  );
-}
-```
-
-`onChange` receives the masked display value (e.g. `024 123 4567`). `onValueChange` receives only the slot characters (e.g. `0241234567`).
-
-### Presets
-
-`INPUT_MASK_PRESETS` includes `phoneGh`, `phoneIntlGh`, `date`, and `time`. Pass any custom pattern string to `mask`.
-
-### Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `mask` | `string` | required | Pattern string (`#`, `A`, `*`, literals) |
-| `ariaLabel` | `string` | required | Accessible label for the input |
-| `value` | `string` | — | Masked display value (controlled) |
-| `defaultValue` | `string` | `""` | Initial value (uncontrolled) |
-| `onChange` | `(masked: string) => void` | — | Called with masked display value |
-| `onValueChange` | `(unmasked: string) => void` | — | Called with raw slot characters |
-| `placeholder` | `string` | — | Placeholder text |
-| `disabled` | `boolean` | `false` | Disable the input |
-| `id` | `string` | — | Input `id` attribute |
-| `name` | `string` | — | Input `name` attribute |
-| `inputMode` | `string` | `"text"` | Mobile keyboard hint |
-| `className` | `string` | — | Root CSS class |
-| `style` | `CSSProperties` | — | Root inline styles |
-
-## DataTable
-
-Read-focused data table with column sorting and pagination. Pass `data` for client-side sorting and pagination; use `loading` when data is fetched by the parent.
-
-`DataTable` composes the standalone [`Pagination`](#pagination) component for its footer.
-
-### Usage
-
-```tsx
-import { DataTable } from "@rfdtech/components";
-
-const columns = [
-  { key: "name", label: "Name", sortable: true },
-  { key: "department", label: "Department", sortable: true },
-];
-
-const { data, loading } = useStaff();
-
-<DataTable
-  columns={columns}
-  data={data}
-  loading={loading}
-  emptyText="No staff found."
-  pageSize={10}
-  onRowClick={(row) => console.log(row.name)}
-/>
-```
-
-Sorting and pagination run in the browser against the `data` array you provide.
-
-### Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `columns` | `DataTableColumn[]` | required | Column definitions |
-| `data` | `T[]` | required | Rows to display |
-| `loading` | `boolean` | `false` | Show loading spinner and disable controls |
-| `getRowId` | `(row, index) => string \| number` | index | Stable row key |
-| `pageSize` | `number` | `10` | Initial rows per page |
-| `pageSizeOptions` | `number[]` | `[10, 25, 50]` | Page size choices |
-| `emptyText` | `string` | `"No results found."` | Empty state message |
-| `loadingLabel` | `string` | `"Loading data"` | Accessible label for loading spinner |
-| `onRowClick` | `(row: T) => void` | — | Row click handler |
-| `className` | `string` | — | Root CSS class |
-| `style` | `CSSProperties` | — | Root inline styles |
-
-## Pagination
-
-Standalone pagination footer with result summary, rows-per-page dropdown, and previous/next controls. Used by `DataTable` but can be composed independently.
-
-### Usage
-
-```tsx
-import { Pagination } from "@rfdtech/components";
-
-<Pagination
-  page={page}
-  pageSize={pageSize}
-  total={total}
-  onPageChange={setPage}
-  onPageSizeChange={setPageSize}
-/>
-```
-
-### Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `page` | `number` | required | Current page (1-based) |
-| `pageSize` | `number` | required | Rows per page |
-| `total` | `number` | required | Total row count |
-| `pageSizeOptions` | `number[]` | `[10, 25, 50]` | Page size choices |
-| `loading` | `boolean` | `false` | Disable controls while loading |
-| `emptySummaryText` | `string` | `"Showing 0 results"` | Summary when `total` is 0 |
-| `onPageChange` | `(page: number) => void` | required | Page change callback |
-| `onPageSizeChange` | `(pageSize: number) => void` | required | Page size change callback |
-| `className` | `string` | — | Root CSS class |
-| `style` | `CSSProperties` | — | Root inline styles |
-
-## DropdownMenu
-
-Action menu triggered by a custom button. Use for row actions, overflow menus, and navigation shortcuts.
-
-### Usage
-
-```tsx
-import { DropdownMenu } from "@rfdtech/components";
-
-<DropdownMenu
-  ariaLabel="Row actions"
-  trigger={<span>⋮</span>}
-  items={[
-    { id: "edit", label: "Edit", onSelect: () => console.log("edit") },
-    { id: "docs", label: "Docs", href: "https://example.com/docs" },
-    { id: "delete", label: "Delete", onSelect: () => {}, destructive: true },
-  ]}
-/>
-```
-
-### Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `trigger` | `ReactNode \| (state) => ReactNode` | required | Button content or render prop |
-| `items` | `DropdownMenuItem[]` | required | Menu entries |
-| `ariaLabel` | `string` | required | Accessible label for trigger and menu |
-| `placement` | `"bottom-start" \| "bottom-end" \| "bottom"` | `"bottom-end"` | Panel position |
-| `closeOnSelect` | `boolean` | `true` | Close after an item is chosen |
-| `open` | `boolean` | — | Controlled open state |
-| `onOpenChange` | `(open: boolean) => void` | — | Open state callback |
-| `className` | `string` | — | Root CSS class |
-| `style` | `CSSProperties` | — | Root inline styles |
 
 ## BulkImportModal
 
@@ -659,6 +240,170 @@ To change the gutter size, override `--gsl-bulk-import-gutter` on `.gsl-bulk-imp
 }
 ```
 
+
+## Button
+
+Shared button with primary, secondary, outline, and ghost variants, plus loading and disabled states. See the [Button](/docs/button) docs page for props and exported types.
+
+```tsx
+import { Button } from "@rfdtech/components";
+
+<Button variant="primary" onClick={() => save()}>
+  Save
+</Button>
+
+<Button loading loadingLabel="Saving">
+  Save
+</Button>
+
+<Button disabled>Unavailable</Button>
+
+<Button
+  variant="outline"
+  classNames={{ root: "min-w-32", label: "font-semibold" }}
+>
+  Custom
+</Button>
+```
+
+Props: `variant`, `size`, `loading`, `loadingLabel`, `classNames`, and standard `button` attributes. Exported types: `ButtonProps`, `ButtonClassNames`, `ButtonVariant`, `ButtonSize`.
+
+
+## Checkbox
+
+Accessible checkbox with optional label and part-level `classNames`. See the [Checkbox](/docs/checkbox) docs page for props and exported types.
+
+```tsx
+import { Checkbox } from "@rfdtech/components";
+
+<Checkbox
+  label="Accept terms and conditions"
+  checked={accepted}
+  onCheckedChange={setAccepted}
+/>
+
+<Checkbox
+  aria-label="Select row"
+  checked={selected}
+  onCheckedChange={setSelected}
+/>
+```
+
+Props: `checked`, `defaultChecked`, `onCheckedChange`, `label`, `disabled`, `required`, `name`, `value`, `id`, `aria-label`, `classNames`, `className`. Exported types: `CheckboxProps`, `CheckboxClassNames`.
+
+
+## RadioGroup
+
+Single-choice radio group with optional labels and descriptions on each `Radio` item. Use `variant="card"` for bordered choice cards. See the [RadioGroup](/docs/radio-group) docs page for props and exported types.
+
+```tsx
+import { Radio, RadioGroup } from "@rfdtech/components";
+
+<RadioGroup variant="card" value={plan} onValueChange={setPlan}>
+  <Radio
+    value="starter"
+    label="Starter"
+    description="For individuals getting started."
+  />
+  <Radio
+    value="team"
+    label="Team"
+    description="Collaborate with up to 10 members."
+  />
+</RadioGroup>
+```
+
+Props: `RadioGroup` — `value`, `defaultValue`, `onValueChange`, `name`, `disabled`, `required`, `orientation`, `variant`, `classNames`, `className`, `children`. `Radio` — `value`, `label`, `description`, `disabled`, `id`, `aria-label`, `classNames`, `className`. Exported types: `RadioGroupProps`, `RadioProps`, `RadioGroupClassNames`, `RadioClassNames`, `RadioGroupVariant`.
+
+
+## Dropdown
+
+Select-style dropdown for choosing one option from a list. See the [Dropdown](/docs/dropdown) docs page for props and exported types.
+
+```tsx
+import { Dropdown } from "@rfdtech/components";
+
+<Dropdown
+  aria-label="Field"
+  value={value}
+  onValueChange={setValue}
+  options={[
+    { value: "email", label: "Email" },
+    { value: "name", label: "Full name" },
+  ]}
+  placeholder="Select..."
+  clearable
+/>
+```
+
+Props: `value`, `onValueChange`, `options`, `placeholder`, `clearable`, `disabled`, `aria-label`, `classNames`, `className`. Exported types: `DropdownProps`, `DropdownOption`, `DropdownClassNames`.
+
+
+## Popover
+
+Compound popover primitives for floating panels. See the [Popover](/docs/popover) docs page for props and exported types.
+
+```tsx
+import {
+  Button,
+  Popover,
+  PopoverClose,
+  PopoverContent,
+  PopoverTrigger,
+} from "@rfdtech/components";
+
+<Popover>
+  <PopoverTrigger asChild>
+    <Button variant="secondary">Actions</Button>
+  </PopoverTrigger>
+  <PopoverContent
+    side="bottom"
+    align="end"
+    sideOffset={4}
+    className="gsl-popover--menu"
+  >
+    <div className="gsl-popover__menu" role="menu">
+      <PopoverClose asChild>
+        <button type="button" className="gsl-popover__menu-item" role="menuitem">
+          Edit
+        </button>
+      </PopoverClose>
+      <PopoverClose asChild>
+        <button
+          type="button"
+          className="gsl-popover__menu-item gsl-popover__menu-item--destructive"
+          role="menuitem"
+        >
+          Delete
+        </button>
+      </PopoverClose>
+    </div>
+  </PopoverContent>
+</Popover>
+```
+
+Exports: `Popover`, `PopoverTrigger`, `PopoverContent`, `PopoverPortal`, `PopoverAnchor`, `PopoverClose`. Exported types: `PopoverContentProps`, `PopoverContentClassNames`.
+
+
+## Tabs
+
+Compound tabs primitives for switching between related panels. See the [Tabs](/docs/tabs) docs page for props and exported types.
+
+```tsx
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@rfdtech/components";
+
+<Tabs defaultValue="account" variant="line">
+  <TabsList>
+    <TabsTrigger value="account">Account</TabsTrigger>
+    <TabsTrigger value="security">Security</TabsTrigger>
+  </TabsList>
+  <TabsContent value="account">Account settings</TabsContent>
+  <TabsContent value="security">Security settings</TabsContent>
+</Tabs>
+```
+
+Exports: `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`. Props: `Tabs` — `value`, `defaultValue`, `onValueChange`, `orientation`, `activationMode`, `variant`, `classNames`, `className`, `children`. `TabsTrigger` — `value`, `disabled`, `classNames`, `className`. Exported types: `TabsProps`, `TabsListProps`, `TabsTriggerProps`, `TabsContentProps`, `TabsVariant`, `TabsClassNames`, `TabsListClassNames`, `TabsTriggerClassNames`, `TabsContentClassNames`.
+
 ## Development
 
 ```bash

package/dist/components/app-switcher/AppSwitcher.d.ts

@@ -1,5 +1,4 @@
 import type { AppSwitcherProps } from "../../types/app-switcher";
-import "../../styles/theme.css";
 import "./styles/app-switcher.css";
-export declare function AppSwitcher({ apps: appsProp, baseUrl, accessToken, open: controlledOpen, onOpenChange, onAppSelect, columns, triggerLabel, trigger, title, footer, className, style, placement, closeOnSelect, }: AppSwitcherProps): import("react").JSX.Element;
+export declare function AppSwitcher({ apps, loading, loadingLabel, open: controlledOpen, onOpenChange, onAppSelect, columns, triggerLabel, trigger, title, footer, className, style, placement, closeOnSelect, }: AppSwitcherProps): import("react").JSX.Element;
 //# sourceMappingURL=AppSwitcher.d.ts.map

package/dist/components/app-switcher/AppSwitcher.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppSwitcher.d.ts","sourceRoot":"","sources":["../../../src/components/app-switcher/AppSwitcher.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAW,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAG1E,OAAO,wBAAwB,CAAC;AAChC,OAAO,2BAA2B,CAAC;AAEnC,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EAAE,QAAQ,EACd,OAAO,EACP,WAAW,EACX,IAAI,EAAE,cAAc,EACpB,YAAY,EACZ,WAAW,EACX,OAAW,EACX,YAAkC,EAClC,OAAO,EACP,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,SAAwB,EACxB,aAAoB,GACrB,EAAE,gBAAgB,+BA6GlB"}
+{"version":3,"file":"AppSwitcher.d.ts","sourceRoot":"","sources":["../../../src/components/app-switcher/AppSwitcher.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAW,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAG1E,OAAO,2BAA2B,CAAC;AAcnC,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,OAAe,EACf,YAAmC,EACnC,IAAI,EAAE,cAAc,EACpB,YAAY,EACZ,WAAW,EACX,OAAW,EACX,YAAkC,EAClC,OAAO,EACP,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,SAAwB,EACxB,aAAoB,GACrB,EAAE,gBAAgB,+BAoGlB"}