@rfdtech/components 1.4.0 → 1.7.0

package/README.md

@@ -65,194 +65,106 @@ npm install @rfdtech/components
 
 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`.
 
-## AppSwitcher
-
-Google Apps–style 9-dot launcher for switching between GSL systems. Drop it into your header to let users jump between products.
 
-### Usage
+## Hooks
 
-**Remote fetch** — loads systems from `GET {baseUrl}/v1/me/apps` with a bearer token:
+Shared hooks for URL-driven overlay state and router integration. See the [Hooks](/docs/hooks) docs page for full API reference.
 
 ```tsx
-import { AppSwitcher } from "@rfdtech/components";
-
-function Header({ baseUrl, accessToken }: { baseUrl: string; accessToken: string }) {
-  return (
-    <AppSwitcher
-      baseUrl={baseUrl}
-      accessToken={accessToken}
-      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 }
-}
-```
+import {
+  Dialog,
+  DialogContent,
+  useDialogSearchParam,
+  useModalSearchParam,
+} from "@rfdtech/components";
 
-**Static apps** — pass a list directly instead of fetching:
+const { open, data, onOpenChange, openWith } = useDialogSearchParam<{
+  userId: string;
+}>("edit-profile");
 
-```tsx
-const apps = [
-  {
-    id: "mail",
-    name: "Mail",
-    icon: "https://example.com/mail.png",
-    href: "https://mail.example.com",
-  },
-];
+openWith({ userId: "42" });
 
-<AppSwitcher apps={apps} title="System directory" />
+<Dialog open={open} onOpenChange={onOpenChange}>
+  <DialogContent>Edit user {data?.userId}</DialogContent>
+</Dialog>
 ```
 
-### 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 |
+Exports: `useSearchParamOverlay`, `useDialogSearchParam`, `useModalSearchParam`, `createSearchParamAdapter`, `createBrowserSearchParamAdapter`, `readOverlayData`, `writeOverlayData`, `clearOverlayData`, `getDataPrefix`. Types: `SearchParamOverlayState`, `SearchParamOverlayData`, `SearchParamAdapter`, `UseSearchParamOverlayOptions`, `UseSearchParamOverlayReturn`.
 
-\* Required when `apps` is not provided.
 
-### Types
+## AppSwitcher
 
-All types are exported from `@rfdtech/components`.
+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.
 
-```ts
-interface AppItem {
-  id: string;
-  name: string;
-  icon: ReactNode | string;
-  href?: string;
-  onClick?: (app: AppItem) => void;
-  disabled?: boolean;
-  badge?: string;
-  metadata?: MeApp;
-}
+See the [AppSwitcher](/docs/app-switcher) docs page for props and exported types.
 
-interface MeApp {
-  system_id: string;
-  system_name: string;
-  system_code: string;
-  frontend_url: string;
-  role: string;
-  permissions: string[];
-}
+```tsx
+import { AppSwitcher, type AppItem } from "@rfdtech/components";
 
-interface MeAppsResponse {
-  success: boolean;
-  message: string;
-  data: { apps: MeApp[] };
-  meta: { count: number };
+function Header({ apps, loading }: { apps: AppItem[]; loading: boolean }) {
+  return (
+    <AppSwitcher
+      apps={apps}
+      loading={loading}
+      title="System directory"
+      onAppSelect={(app) => console.log(app.name)}
+    />
+  );
 }
 ```
 
-Also exported: `AppSwitcherProps`, `UseMeAppsOptions`, `UseMeAppsReturn`, `UseAppSwitcherOptions`, `UseAppSwitcherReturn`.
+Props: `apps`, `loading`, `loadingLabel`, `columns`, `open`, `onOpenChange`, `onAppSelect`, `triggerLabel`, `trigger`, `title`, `footer`, `placement`, `closeOnSelect`, `className`, `style`. Exported types: `AppSwitcherProps`, `AppItem`, `UseAppSwitcherOptions`, `UseAppSwitcherReturn`.
 
-### Hooks
+Also exported: `AppSwitcherItem`, `GridIcon`, `SystemAppIcon`, `useAppSwitcher`.
 
-**`useMeApps`** — fetch and map systems from `/v1/me/apps`:
 
-```tsx
-import { useMeApps } from "@rfdtech/components";
+## Badge
+
+Compact inline label for status, counts, and metadata with semantic color variants. See the [Badge](/docs/badge) docs page for props and exported types.
 
-const { apps, loading, error, refetch } = useMeApps({
-  baseUrl: "https://api.example.com",
-  accessToken: "<token>",
-});
+```tsx
+import { Badge } from "@rfdtech/components";
+
+<Badge variant="success">Active</Badge>
+<Badge variant="warning">Pending</Badge>
+<Badge variant="error">Failed</Badge>
+<Badge variant="outline" size="md">
+  Draft
+</Badge>
 ```
 
-**`useAppSwitcher`** — headless open/close state for custom UI:
+Props: `variant`, `size`, `classNames`, `className`, and standard `span` attributes. Exported types: `BadgeProps`, `BadgeClassNames`, `BadgeVariant`, `BadgeSize`.
 
-```tsx
-import { useAppSwitcher } from "@rfdtech/components";
 
-const { open, toggle, close, triggerRef, panelRef } = useAppSwitcher();
-```
+## Breadcrumb
 
-### Utilities
+Compound breadcrumb primitives for hierarchical page trails. See the [Breadcrumb](/docs/breadcrumb) docs page for props and exported types.
 
 ```tsx
 import {
-  buildMeAppsUrl,
-  createMeAppsRequestInit,
-  fetchMeApps,
-  mapMeAppToAppItem,
-  mapMeAppsToAppItems,
-  MeAppsFetchError,
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
 } 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);
+<Breadcrumb>
+  <BreadcrumbList>
+    <BreadcrumbItem>
+      <BreadcrumbLink href="/">Home</BreadcrumbLink>
+    </BreadcrumbItem>
+    <BreadcrumbSeparator />
+    <BreadcrumbItem>
+      <BreadcrumbPage>Profile</BreadcrumbPage>
+    </BreadcrumbItem>
+  </BreadcrumbList>
+</Breadcrumb>
 ```
 
-| 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` |
+Exported parts: `Breadcrumb`, `BreadcrumbList`, `BreadcrumbItem`, `BreadcrumbLink`, `BreadcrumbPage`, `BreadcrumbSeparator`, `BreadcrumbEllipsis`. Exported types: `BreadcrumbProps`, `BreadcrumbLinkProps`, `BreadcrumbPageProps`, and related `*ClassNames` interfaces.
 
-### 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.
 
 ## BulkImportModal
 
@@ -402,6 +314,398 @@ 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`.
+
+
+## Command
+
+Compound command menu primitives for searchable, keyboard-navigable action lists. Supports inline pickers and modal palettes via `CommandDialog`. See the [Command](/docs/command) docs page for props and exported types.
+
+```tsx
+import {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandShortcut,
+  useCommandShortcut,
+} from "@rfdtech/components";
+
+<Command label="Field picker">
+  <CommandInput placeholder="Search fields..." />
+  <CommandList>
+    <CommandEmpty>No results.</CommandEmpty>
+    <CommandGroup heading="Fields">
+      <CommandItem value="email" onSelect={() => setField("email")}>
+        Email
+      </CommandItem>
+    </CommandGroup>
+  </CommandList>
+</Command>
+
+<CommandDialog open={open} onOpenChange={setOpen} shortcut label="Command menu">
+  <CommandInput placeholder="Type a command..." />
+  <CommandList>
+    <CommandItem onSelect={() => go("/dashboard")}>Dashboard</CommandItem>
+    <CommandItem onSelect={signOut}>
+      Sign out
+      <CommandShortcut><span>⌘</span><span>Q</span></CommandShortcut>
+    </CommandItem>
+  </CommandList>
+</CommandDialog>
+```
+
+Exports: `Command`, `CommandDialog`, `CommandInput`, `CommandList`, `CommandEmpty`, `CommandGroup`, `CommandItem`, `CommandSeparator`, `CommandLoading`, `CommandShortcut`, `useCommandShortcut`. Exported types: `CommandProps`, `CommandDialogProps`, `CommandItemProps`, `CommandShortcutProps`, `UseCommandShortcutOptions`, and related `*ClassNames` types.
+
+
+## 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`.
+
+
+## Dialog
+
+Compound dialog primitives for modal overlays. See the [Dialog](/docs/dialog) docs page for props and exported types.
+
+```tsx
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+} from "@rfdtech/components";
+
+<Dialog open={open} onOpenChange={setOpen}>
+  <DialogTrigger asChild>
+    <Button variant="secondary">Edit profile</Button>
+  </DialogTrigger>
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogContent showCloseButton>
+      <DialogTitle>Edit profile</DialogTitle>
+      <DialogDescription>Make changes here.</DialogDescription>
+    </DialogContent>
+  </DialogPortal>
+</Dialog>
+```
+
+Props: `Dialog` — `open`, `defaultOpen`, `onOpenChange`. `DialogContent` — `showCloseButton`, `classNames`, `className`. Styled parts also support part-level `classNames`. Exported types: `DialogOverlayProps`, `DialogContentProps`, `DialogTitleProps`, `DialogDescriptionProps`, and related `*ClassNames` interfaces.
+
+
+## Modal
+
+Compound modal primitives for near full-viewport overlays with header, body, and footer slots. See the [Modal](/docs/modal) docs page for props and exported types.
+
+```tsx
+import {
+  Button,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalDescription,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  ModalPortal,
+  ModalTitle,
+  ModalTrigger,
+} from "@rfdtech/components";
+
+<Modal open={open} onOpenChange={setOpen}>
+  <ModalTrigger asChild>
+    <Button variant="secondary">Review changes</Button>
+  </ModalTrigger>
+  <ModalPortal>
+    <ModalOverlay />
+    <ModalContent showCloseButton>
+      <ModalHeader>
+        <ModalTitle>Review changes</ModalTitle>
+        <ModalDescription>Confirm before publishing.</ModalDescription>
+      </ModalHeader>
+      <ModalBody>{children}</ModalBody>
+      <ModalFooter>
+        <Button variant="ghost" onClick={() => setOpen(false)}>Cancel</Button>
+        <Button onClick={() => setOpen(false)}>Publish</Button>
+      </ModalFooter>
+    </ModalContent>
+  </ModalPortal>
+</Modal>
+```
+
+Props: `Modal` — `open`, `defaultOpen`, `onOpenChange`. `ModalContent` — `showCloseButton`, `classNames`, `className`. Layout parts (`ModalHeader`, `ModalBody`, `ModalFooter`) support part-level `classNames`. Exported types: `ModalOverlayProps`, `ModalContentProps`, `ModalHeaderProps`, `ModalTitleProps`, `ModalDescriptionProps`, `ModalBodyProps`, `ModalFooterProps`, and related `*ClassNames` interfaces.
+
+
+## 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`.
+
+
+## ProgressBar
+
+Accessible progress indicator for task completion and loading states. See the [ProgressBar](/docs/progress-bar) docs page for props and exported types.
+
+```tsx
+import { ProgressBar } from "@rfdtech/components";
+
+<ProgressBar value={60} label="Upload progress" showValue />
+<ProgressBar value={100} variant="success" />
+<ProgressBar indeterminate label="Loading" size="md" />
+```
+
+Props: `value`, `max`, `variant`, `size`, `indeterminate`, `label`, `showValue`, `classNames`, `className`, and standard `div` attributes. Exported types: `ProgressBarProps`, `ProgressBarClassNames`, `ProgressBarVariant`, `ProgressBarSize`.
+
+
+## Sidebar
+
+Compound sidebar primitives for app shells and section navigation. Desktop uses a sticky card-style rail with optional collapse; mobile uses an offcanvas drawer with trigger and overlay. See the [Sidebar](/docs/sidebar) docs page for props and exported types.
+
+```tsx
+import {
+  Sidebar,
+  SidebarCollapse,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarItem,
+  SidebarLink,
+  SidebarNav,
+  SidebarOverlay,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@rfdtech/components";
+
+<SidebarProvider>
+  <SidebarTrigger>Open menu</SidebarTrigger>
+  <SidebarOverlay />
+  <Sidebar>
+    <SidebarHeader>
+      <div className="gsl-sidebar__header-brand">
+        <span className="gsl-sidebar__header-title">GSL Admin</span>
+      </div>
+      <SidebarCollapse />
+    </SidebarHeader>
+    <SidebarContent>
+      <SidebarNav aria-label="Main">
+        <SidebarGroup>
+          <SidebarGroupLabel>General</SidebarGroupLabel>
+          <SidebarItem>
+            <SidebarLink href="/dashboard" icon={<DashboardIcon />} active={path === "/dashboard"}>
+              Dashboard
+            </SidebarLink>
+          </SidebarItem>
+        </SidebarGroup>
+      </SidebarNav>
+    </SidebarContent>
+  </Sidebar>
+  <main>{children}</main>
+</SidebarProvider>
+```
+
+Exports: `SidebarProvider`, `useSidebar`, `Sidebar`, `SidebarBadge`, `SidebarCollapse`, `SidebarTrigger`, `SidebarOverlay`, `SidebarHeader`, `SidebarContent`, `SidebarFooter`, `SidebarNav`, `SidebarGroup`, `SidebarGroupLabel`, `SidebarItem`, `SidebarLink`. Exported types: `SidebarProviderProps`, `SidebarProps`, `SidebarLinkProps`, `SidebarBadgeProps`, `SidebarCollapseProps`, and related `*ClassNames` types.
+
+
+## Sheet
+
+Compound sheet primitives for edge-sliding panels. See the [Sheet](/docs/sheet) docs page for props and exported types.
+
+```tsx
+import {
+  Button,
+  Sheet,
+  SheetBody,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetOverlay,
+  SheetPortal,
+  SheetTitle,
+  SheetTrigger,
+} from "@rfdtech/components";
+
+<Sheet open={open} onOpenChange={setOpen}>
+  <SheetTrigger asChild>
+    <Button variant="secondary">Open filters</Button>
+  </SheetTrigger>
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetContent side="right" showCloseButton>
+      <SheetHeader>
+        <SheetTitle>Filters</SheetTitle>
+        <SheetDescription>Refine the results below.</SheetDescription>
+      </SheetHeader>
+      <SheetBody>{children}</SheetBody>
+      <SheetFooter>
+        <Button variant="ghost" onClick={() => setOpen(false)}>Reset</Button>
+        <Button onClick={() => setOpen(false)}>Apply</Button>
+      </SheetFooter>
+    </SheetContent>
+  </SheetPortal>
+</Sheet>
+```
+
+Props: `Sheet` — `open`, `defaultOpen`, `onOpenChange`. `SheetContent` — `side`, `showCloseButton`, `classNames`, `className`. Layout parts support part-level `classNames`. Exported types: `SheetSide`, `SheetOverlayProps`, `SheetContentProps`, `SheetHeaderProps`, `SheetTitleProps`, `SheetDescriptionProps`, `SheetBodyProps`, `SheetFooterProps`, and related `*ClassNames` interfaces.
+
+
+## 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,4 +1,4 @@
 import type { AppSwitcherProps } from "../../types/app-switcher";
 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":"AAIA,OAAO,KAAK,EAAW,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAG1E,OAAO,2BAA2B,CAAC;AAcnC,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,+BAwGlB"}
+{"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"}

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

@@ -2,10 +2,6 @@ export { AppSwitcher } from "./AppSwitcher";
 export { AppSwitcherItem } from "./AppSwitcherItem";
 export { GridIcon } from "./GridIcon";
 export { SystemAppIcon } from "./SystemAppIcon";
-export { fetchMeApps, MeAppsFetchError } from "./api/fetchMeApps";
-export { buildMeAppsUrl, createMeAppsRequestInit, } from "./api/meAppsClient";
-export { mapMeAppToAppItem, mapMeAppsToAppItems, } from "./api/mapMeAppToAppItem";
 export { useAppSwitcher } from "./hooks/useAppSwitcher";
-export { useMeApps } from "./hooks/useMeApps";
-export type { AppItem, AppSwitcherProps, MeApp, MeAppsResponse, UseMeAppsOptions, UseMeAppsReturn, UseAppSwitcherOptions, UseAppSwitcherReturn, } from "../../types/app-switcher";
+export type { AppItem, AppSwitcherProps, UseAppSwitcherOptions, UseAppSwitcherReturn, } from "../../types/app-switcher";
 //# sourceMappingURL=index.d.ts.map