@rfdtech/components 1.7.0 → 1.12.0

package/README.md

@@ -92,6 +92,65 @@ openWith({ userId: "42" });
 Exports: `useSearchParamOverlay`, `useDialogSearchParam`, `useModalSearchParam`, `createSearchParamAdapter`, `createBrowserSearchParamAdapter`, `readOverlayData`, `writeOverlayData`, `clearOverlayData`, `getDataPrefix`. Types: `SearchParamOverlayState`, `SearchParamOverlayData`, `SearchParamAdapter`, `UseSearchParamOverlayOptions`, `UseSearchParamOverlayReturn`.
 
 
+## AppHeader
+
+Compound header bar with `AppHeader`, `AppHeaderSearch`, `AppHeaderActions`, `AppHeaderNotifications`, and `AppHeaderProfile`. Nest search on the left and group switcher, notifications, and profile inside `AppHeaderActions` on the right.
+
+See the [AppHeader](/docs/app-header) docs page for props and exported types.
+
+```tsx
+import {
+  AppHeader,
+  AppHeaderActions,
+  AppHeaderSearch,
+  AppHeaderNotifications,
+  AppHeaderProfile,
+  AppSwitcher,
+} from "@rfdtech/components";
+
+<AppHeader>
+  <AppHeaderSearch onSearch={setQuery} data={results} />
+  <AppHeaderActions>
+    <AppSwitcher apps={apps} />
+    <AppHeaderNotifications loading={loading}>
+      {notifications.map((n) => (
+        <div key={n.id} className="gsl-notif-popover__item">
+          <div className="gsl-notif-popover__body-text">{n.text}</div>
+          <div className="gsl-notif-popover__body-time">{n.time}</div>
+        </div>
+      ))}
+    </AppHeaderNotifications>
+    <AppHeaderProfile user={{ name: "Kwame", role: "Admin", initials: "KA" }} variant="basic">
+      <button className="gsl-profile-popover__action">Settings</button>
+    </AppHeaderProfile>
+  </AppHeaderActions>
+</AppHeader>
+```
+
+Props: `AppHeader` — `className`, `children`. `AppHeaderActions` — `className`, `children`. Exported types: `AppHeaderProps`, `AppHeaderActionsProps`, `AppHeaderSearchProps`, `AppHeaderSearchDataGroup`, `AppHeaderSearchItem`, `AppHeaderNotificationsProps`, `AppHeaderProfileProps`, `AppUser`.
+
+
+## AppLayout
+
+Application layout container that auto-positions `AppHeader`, `AppSidebar`, and `AppBody` by component type. Sidebar on the left, header sticky at the top, main content filling the rest. See the [AppLayout](/docs/app-layout) docs page for props and exported types.
+
+```tsx
+import { AppLayout, AppSidebar, AppBody } from "@rfdtech/components";
+
+<AppLayout>
+  <AppHeader>
+    <AppHeaderActions>
+      <AppSwitcher apps={apps} />
+    </AppHeaderActions>
+  </AppHeader>
+  <AppSidebar>{/* sidebar */}</AppSidebar>
+  <AppBody>{/* page */}</AppBody>
+</AppLayout>
+```
+
+Props: `AppLayout` — `children`, `className`. `AppSidebar` — `children`, `className`. `AppBody` — `children`, `className`. Exported types: `AppLayoutProps`, `AppSidebarProps`, `AppBodyProps`.
+
+
 ## 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.
@@ -173,7 +232,7 @@ Four-step modal wizard for importing spreadsheet data (.xlsx, .xls, .csv). Parsi
 ### Usage
 
 ```tsx
-import { BulkImportModal } from "@rfdtech/components";
+import { BulkImportModal, useModalSearchParam } from "@rfdtech/components";
 
 const fields = [
   { key: "email", label: "Email", required: true },
@@ -181,13 +240,18 @@ const fields = [
   { key: "student_id", label: "Student ID" },
 ];
 
+const { open, onOpenChange, openWith } = useModalSearchParam("bulk-import");
+
+<button type="button" onClick={() => openWith()}>Import students</button>
+
 <BulkImportModal
   open={open}
-  onOpenChange={setOpen}
+  onOpenChange={onOpenChange}
   title="Import students"
   fields={fields}
   onComplete={(result) => {
     console.log(result.rows, result.errors);
+    onOpenChange(false);
   }}
 />
 ```
@@ -343,6 +407,21 @@ import { Button } from "@rfdtech/components";
 Props: `variant`, `size`, `loading`, `loadingLabel`, `classNames`, and standard `button` attributes. Exported types: `ButtonProps`, `ButtonClassNames`, `ButtonVariant`, `ButtonSize`.
 
 
+## Card
+
+Surface card wrapper with optional header and design tokens for padding and background. Uses `--gsl-surface-card` for background and `--gsl-card-padding` for inner spacing. See the [Card](/docs/card) docs page for props and exported types.
+
+```tsx
+import { Card } from "@rfdtech/components";
+
+<Card header="Profile">
+  <p>Content goes here.</p>
+</Card>
+```
+
+Props: `header`, `children`, `classNames`, `className`, plus standard `div` attributes. Exported types: `CardProps`, `CardClassNames`.
+
+
 ## Checkbox
 
 Accessible checkbox with optional label and part-level `classNames`. See the [Checkbox](/docs/checkbox) docs page for props and exported types.
@@ -366,6 +445,57 @@ import { Checkbox } from "@rfdtech/components";
 Props: `checked`, `defaultChecked`, `onCheckedChange`, `label`, `disabled`, `required`, `name`, `value`, `id`, `aria-label`, `classNames`, `className`. Exported types: `CheckboxProps`, `CheckboxClassNames`.
 
 
+## CountrySelector
+
+Country selector dropdown with flag emoji, country name, search filtering, and keyboard navigation. Built on `@radix-ui/react-popover`. See the [CountrySelector](/docs/country-selector) docs page for props and exported types.
+
+```tsx
+import { CountrySelector } from "@rfdtech/components";
+
+<CountrySelector onChange={(code) => console.log(code)} />
+
+<CountrySelector defaultValue="US" />
+```
+
+Props: `value`, `defaultValue`, `onChange`, `placeholder`, `invalid`, `disabled`, `classNames`, `className`. Exported types: `CountrySelectorProps`, `CountrySelectorClassNames`.
+
+
+## DateRangeSelector
+
+Date range picker with a single trigger showing the selected range, a calendar popover for two-click range selection, and auto-swap to keep start before end. See the [DateRangeSelector](/docs/date-range-selector) docs page for props and exported types.
+
+```tsx
+import { DateRangeSelector } from "@rfdtech/components";
+
+<DateRangeSelector onChange={(range) => console.log(range)} />
+
+<DateRangeSelector
+  defaultValue={{ start: new Date(2026, 5, 1), end: new Date(2026, 5, 18) }}
+/>
+```
+
+Props: `value`, `defaultValue`, `onChange`, `placeholder`, `formatOptions`, `invalid`, `disabled`, `min`, `max`, `classNames`, `className`. Exported types: `DateRangeSelectorProps`, `DateRangeSelectorClassNames`, `DateRangeValue`.
+
+
+## DateSelector
+
+Date picker for choosing a single date from a calendar grid. Built on `@radix-ui/react-popover`. See the [DateSelector](/docs/date-selector) docs page for props and exported types.
+
+```tsx
+import { DateSelector } from "@rfdtech/components";
+
+<DateSelector onChange={(date) => console.log(date)} />
+
+<DateSelector
+  placeholder="Pick a date"
+  min={new Date(2025, 0, 1)}
+  max={new Date(2026, 11, 31)}
+/>
+```
+
+Props: `value`, `defaultValue`, `onChange`, `placeholder`, `formatOptions`, `invalid`, `disabled`, `min`, `max`, `classNames`, `className`. Exported types: `DateSelectorProps`, `DateSelectorClassNames`.
+
+
 ## 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.
@@ -380,7 +510,7 @@ import {
   CommandItem,
   CommandList,
   CommandShortcut,
-  useCommandShortcut,
+  useDialogSearchParam,
 } from "@rfdtech/components";
 
 <Command label="Field picker">
@@ -395,7 +525,11 @@ import {
   </CommandList>
 </Command>
 
-<CommandDialog open={open} onOpenChange={setOpen} shortcut label="Command menu">
+const { open, onOpenChange, openWith } = useDialogSearchParam("command-menu");
+
+<Button onClick={() => openWith()}>Open command menu</Button>
+
+<CommandDialog open={open} onOpenChange={onOpenChange} shortcut label="Command menu">
   <CommandInput placeholder="Type a command..." />
   <CommandList>
     <CommandItem onSelect={() => go("/dashboard")}>Dashboard</CommandItem>
@@ -457,6 +591,89 @@ import { Dropdown } from "@rfdtech/components";
 Props: `value`, `onValueChange`, `options`, `placeholder`, `clearable`, `disabled`, `aria-label`, `classNames`, `className`. Exported types: `DropdownProps`, `DropdownOption`, `DropdownClassNames`.
 
 
+## Form
+
+Field, Input, and Textarea primitives for accessible form layouts. See the [Form](/docs/form) docs page for props and exported types.
+
+```tsx
+import {
+  Field,
+  FieldControl,
+  FieldDescription,
+  FieldLabel,
+  Input,
+  Textarea,
+} from "@rfdtech/components";
+
+<Field>
+  <FieldLabel>Email</FieldLabel>
+  <FieldControl>
+    <Input type="email" placeholder="you@example.com" />
+  </FieldControl>
+  <FieldDescription>We will never share your email.</FieldDescription>
+</Field>
+```
+
+Exports: `Field`, `FieldLabel`, `FieldDescription`, `FieldError`, `FieldControl`, `Input`, `Textarea`. Types: `FieldProps`, `FieldClassNames`, `InputProps`, `TextareaProps`.
+
+
+## FormField
+
+react-hook-form adapters with Zod validation support. See the [FormField](/docs/form-field) docs page for props and exported types.
+
+```bash
+npm install react-hook-form zod @hookform/resolvers
+```
+
+```tsx
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import {
+  Button,
+  Field,
+  FieldControl,
+  FieldError,
+  FieldLabel,
+  Form,
+  FormField,
+  Input,
+} from "@rfdtech/components";
+
+const formSchema = z.object({
+  email: z.string().min(1, "Email is required").email("Enter a valid email address"),
+});
+
+type FormValues = z.infer<typeof formSchema>;
+
+const form = useForm<FormValues>({
+  resolver: zodResolver(formSchema),
+  defaultValues: { email: "" },
+});
+
+<Form {...form}>
+  <form onSubmit={form.handleSubmit(onSubmit)}>
+    <FormField
+      control={form.control}
+      name="email"
+      render={({ field, fieldState }) => (
+        <Field invalid={!!fieldState.error}>
+          <FieldLabel>Email</FieldLabel>
+          <FieldControl>
+            <Input type="email" {...field} />
+          </FieldControl>
+          <FieldError>{fieldState.error?.message}</FieldError>
+        </Field>
+      )}
+    />
+    <Button type="submit">Save</Button>
+  </form>
+</Form>
+```
+
+Exports: `Form`, `FormField`, `useFormField`. Types: `FormProps`, `FormFieldProps`, `UseFormFieldReturn`.
+
+
 ## Dialog
 
 Compound dialog primitives for modal overlays. See the [Dialog](/docs/dialog) docs page for props and exported types.
@@ -470,18 +687,25 @@ import {
   DialogOverlay,
   DialogPortal,
   DialogTitle,
-  DialogTrigger,
+  useDialogSearchParam,
 } from "@rfdtech/components";
 
-<Dialog open={open} onOpenChange={setOpen}>
-  <DialogTrigger asChild>
-    <Button variant="secondary">Edit profile</Button>
-  </DialogTrigger>
+const { open, data, onOpenChange, openWith } = useDialogSearchParam<{
+  userId: string;
+}>("edit-profile");
+
+<Button variant="secondary" onClick={() => openWith({ userId: "42" })}>
+  Edit profile
+</Button>
+
+<Dialog open={open} onOpenChange={onOpenChange}>
   <DialogPortal>
     <DialogOverlay />
     <DialogContent showCloseButton>
       <DialogTitle>Edit profile</DialogTitle>
-      <DialogDescription>Make changes here.</DialogDescription>
+      <DialogDescription>
+        Make changes here. Editing user {data?.userId}.
+      </DialogDescription>
     </DialogContent>
   </DialogPortal>
 </Dialog>
@@ -490,6 +714,45 @@ import {
 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.
 
 
+## Draggable
+
+Repositionable panel primitive with optional handle and bounded pointer dragging. See the [Draggable](/docs/draggable) docs page for props and exported types.
+
+```tsx
+import { Draggable, DraggableHandle } from "@rfdtech/components";
+
+<div style={{ position: "relative", height: 240 }}>
+  <Draggable defaultPosition={{ x: 24, y: 24 }} bounds="parent">
+    <DraggableHandle aria-label="Drag card" />
+    <div>Drag me</div>
+  </Draggable>
+</div>
+```
+
+Exports: `Draggable`, `DraggableHandle`, `useDraggable`, `clampPosition`. Types: `DraggableProps`, `DraggableHandleProps`, `DraggablePosition`, `DraggableBounds`, `DraggableAxis`, `UseDraggableOptions`, `UseDraggableReturn`.
+
+
+## MetricCard
+
+Compact dashboard card for displaying a metric value, label, trend indicator, and optional icon or description. Variants (`default`, `primary`, `success`, `warning`, `error`) only affect the trend color — background and text stay neutral. Use the `color` prop for custom accent colors.
+
+See the [MetricCard](/docs/metric-card) docs page for props and exported types.
+
+```tsx
+import { MetricCard } from "@rfdtech/components";
+
+<MetricCard
+  label="Revenue"
+  value="$128.4k"
+  trend="up"
+  trendValue="+12.5%"
+  description="Total revenue this quarter"
+/>
+```
+
+Props: `label`, `value`, `icon`, `description`, `trend`, `trendValue`, `variant`, `color`, `classNames`, `className`, plus standard `div` attributes. Exported types: `MetricCardProps`, `MetricCardClassNames`, `MetricCardVariant`, `MetricTrend`.
+
+
 ## 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.
@@ -506,13 +769,16 @@ import {
   ModalOverlay,
   ModalPortal,
   ModalTitle,
-  ModalTrigger,
+  useModalSearchParam,
 } from "@rfdtech/components";
 
-<Modal open={open} onOpenChange={setOpen}>
-  <ModalTrigger asChild>
-    <Button variant="secondary">Review changes</Button>
-  </ModalTrigger>
+const { open, onOpenChange, openWith } = useModalSearchParam("review-changes");
+
+<Button variant="secondary" onClick={() => openWith()}>
+  Review changes
+</Button>
+
+<Modal open={open} onOpenChange={onOpenChange}>
   <ModalPortal>
     <ModalOverlay />
     <ModalContent showCloseButton>
@@ -522,8 +788,8 @@ import {
       </ModalHeader>
       <ModalBody>{children}</ModalBody>
       <ModalFooter>
-        <Button variant="ghost" onClick={() => setOpen(false)}>Cancel</Button>
-        <Button onClick={() => setOpen(false)}>Publish</Button>
+        <Button variant="ghost" onClick={() => onOpenChange(false)}>Cancel</Button>
+        <Button onClick={() => onOpenChange(false)}>Publish</Button>
       </ModalFooter>
     </ModalContent>
   </ModalPortal>
@@ -533,6 +799,51 @@ import {
 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.
 
 
+## NetworkOperator
+
+Network operator selector with operator image thumbnails (MTN, Vodafone, AirtelTigo, Glo), search filtering, and keyboard navigation. Built on `@radix-ui/react-popover`. See the [NetworkOperator](/docs/network-operator) docs page for props and exported types.
+
+```tsx
+import { NetworkOperator } from "@rfdtech/components";
+
+<NetworkOperator onChange={(value) => console.log(value)} />
+
+<NetworkOperator defaultValue="mtn" />
+```
+
+Props: `value`, `defaultValue`, `onChange`, `options`, `placeholder`, `invalid`, `disabled`, `classNames`, `className`. Exported types: `NetworkOperatorProps`, `NetworkOperatorOption`, `NetworkOperatorClassNames`.
+
+
+## OtpInput
+
+One-time password input with configurable digit length, paste support, keyboard navigation (arrow keys, backspace), auto-focus advancement, and `onComplete` callback. See the [OtpInput](/docs/otp-input) docs page for props and exported types.
+
+```tsx
+import { OtpInput } from "@rfdtech/components";
+
+<OtpInput onChange={(val) => console.log(val)} />
+
+<OtpInput length={4} onComplete={(val) => console.log("Done:", val)} />
+```
+
+Props: `length`, `value`, `onChange`, `onComplete`, `invalid`, `disabled`, `name`, `classNames`, `className`. Exported types: `OtpInputProps`, `OtpInputClassNames`.
+
+
+## PhoneNumberInput
+
+Phone number input with a country code selector (flag + dial code prefix) that auto-detects the country from the number prefix as the user types. Built on `@radix-ui/react-popover`. See the [PhoneNumberInput](/docs/phone-number-input) docs page for props and exported types.
+
+```tsx
+import { PhoneNumberInput } from "@rfdtech/components";
+
+<PhoneNumberInput defaultCountry="GH" onChange={(val) => console.log(val)} />
+
+<PhoneNumberInput value="+2332054321022" />
+```
+
+Props: `value`, `defaultValue`, `onChange`, `invalid`, `disabled`, `classNames`, `className`. Exported types: `PhoneNumberInputProps`, `PhoneNumberInputClassNames`.
+
+
 ## Popover
 
 Compound popover primitives for floating panels. See the [Popover](/docs/popover) docs page for props and exported types.
@@ -687,6 +998,84 @@ import {
 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.
 
 
+## Sortable
+
+Reorderable list primitive with optional drag handles and keyboard support. See the [Sortable](/docs/sortable) docs page for props and exported types.
+
+```tsx
+import { useState } from "react";
+import {
+  Sortable,
+  SortableHandle,
+  SortableItem,
+  SortableList,
+} from "@rfdtech/components";
+
+const [items, setItems] = useState(["alpha", "beta", "gamma"]);
+
+<Sortable items={items} onReorder={setItems}>
+  <SortableList>
+    {items.map((id) => (
+      <SortableItem key={id} id={id}>
+        <SortableHandle aria-label={`Reorder ${id}`} />
+        <span>{id}</span>
+      </SortableItem>
+    ))}
+  </SortableList>
+</Sortable>
+```
+
+Exports: `Sortable`, `SortableList`, `SortableItem`, `SortableHandle`, `reorderItems`. Types: `SortableProps`, `SortableListProps`, `SortableItemProps`, `SortableHandleProps`, `SortableId`, `SortableStrategy`, `SortableClassNames`.
+
+
+## Table
+
+Compound table with URL-driven search, pagination, filter, sort, row selection, bulk actions, and loading skeletons. See the [Table](/docs/table) docs page for props and exported types.
+
+```tsx
+import { useState } from "react";
+import {
+  Table,
+  TableHeader,
+  TableSearch,
+  TableContent,
+  TableBulkActions,
+  TableFooter,
+  TablePagination,
+} from "@rfdtech/components";
+
+const [selected, setSelected] = useState<Set<string | number>>(new Set());
+
+<Table paramPrefix="users">
+  <TableHeader>
+    <TableSearch placeholder="Search users..." />
+  </TableHeader>
+  <TableContent
+    selectable
+    selectedIds={selected}
+    onSelectionChange={setSelected}
+    columns={[
+      { id: "name", header: "Name", accessorKey: "name", sortable: true },
+      { id: "email", header: "Email", accessorKey: "email", sortable: true },
+    ]}
+    data={users}
+    rowKey={(u) => u.id}
+  />
+  <TableBulkActions
+    selectedIds={selected}
+    actions={[
+      { id: "delete", label: "Delete", icon: <Trash2 size={14} />, onClick: (ids) => handleDelete(ids), destructive: true },
+    ]}
+  />
+  <TableFooter>
+    <TablePagination totalPages={5} totalItems={50} />
+  </TableFooter>
+</Table>
+```
+
+Props: `paramPrefix`, `classNames`, `className`. Exports: `Table`, `TableHeader`, `TableSearch`, `TableFilter`, `TableContent`, `TableBulkActions`, `TableFooter`, `TablePagination`. Types: `TableProps`, `TableHeaderProps`, `TableContentProps`, `TableFooterProps`, `TableSearchProps`, `TableFilterProps`, `TableBulkActionsProps`, `TableBulkAction`, `TableBulkActionsClassNames`, `TableClassNames`, `PaginationControlsProps`, `TableColumn`.
+
+
 ## Tabs
 
 Compound tabs primitives for switching between related panels. See the [Tabs](/docs/tabs) docs page for props and exported types.
@@ -706,6 +1095,54 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@rfdtech/components";
 
 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`.
 
+
+## Toast
+
+Transient notifications with an imperative `useToast` hook, powered by Sonner. See the [Toast](/docs/toast) docs page for props and exported types.
+
+```tsx
+import { CheckCircle2 } from "lucide-react";
+import { ToastProvider, Toaster, useToast } from "@rfdtech/components";
+
+<ToastProvider>
+  <App />
+  <Toaster />
+</ToastProvider>
+
+const { toast } = useToast();
+
+toast({
+  title: "Profile saved",
+  description: "Your changes were applied.",
+  variant: "success",
+  icon: <CheckCircle2 size={18} strokeWidth={2} aria-hidden />,
+});
+```
+
+Exports: `ToastProvider`, `Toaster`, `useToast`. Types: `ToastOptions`, `ToastVariant`, `ToastProviderProps`, `ToasterProps`, `UseToastReturn`, `ToastClassNames`, `ToastAction`, `ToastReturn`.
+
+
+## UploadField
+
+File upload with dashed-border dropzone, cloud upload icon, auto-generated file type/size support text, file cards with type icons, and a primary action button. See the [UploadField](/docs/upload-field) docs page for props and exported types.
+
+```tsx
+import { UploadField } from "@rfdtech/components";
+
+<UploadField
+  accept=".csv"
+  maxSize={10 * 1024 * 1024}
+  onChange={(file) => console.log(file)}
+/>
+
+<UploadField accept="image/*" maxSize={5 * 1024 * 1024} />
+```
+
+Props: `accept`, `multiple`, `maxSize`, `value`, `onChange`, `invalid`, `disabled`, `name`, `classNames`, `className`. Exported types: `UploadFieldProps`, `UploadFieldClassNames`.
+
+Props: `accept`, `multiple`, `maxSize`, `value`, `onChange`, `invalid`, `disabled`, `placeholder`, `classNames`, `className`. Exported types: `UploadFieldProps`, `UploadFieldClassNames`.
+
+
 ## Development
 
 ```bash

package/dist/components/app-header/AppHeader.d.ts

@@ -0,0 +1,5 @@
+import type { AppHeaderProps, AppHeaderActionsProps } from "../../types/app-header";
+import "./styles/app-header.css";
+export declare const AppHeader: import("react").ForwardRefExoticComponent<AppHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const AppHeaderActions: import("react").ForwardRefExoticComponent<AppHeaderActionsProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=AppHeader.d.ts.map

package/dist/components/app-header/AppHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppHeader.d.ts","sourceRoot":"","sources":["../../../src/components/app-header/AppHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAEpF,OAAO,yBAAyB,CAAC;AAEjC,eAAO,MAAM,SAAS,2GAQrB,CAAC;AAEF,eAAO,MAAM,gBAAgB,kHAQ5B,CAAC"}

package/dist/components/app-header/AppHeader.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=AppHeader.test.d.ts.map

package/dist/components/app-header/AppHeader.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppHeader.test.d.ts","sourceRoot":"","sources":["../../../src/components/app-header/AppHeader.test.tsx"],"names":[],"mappings":""}

package/dist/components/app-header/AppHeaderNotifications.d.ts

@@ -0,0 +1,3 @@
+import type { AppHeaderNotificationsProps } from "../../types/app-header";
+export declare const AppHeaderNotifications: import("react").ForwardRefExoticComponent<AppHeaderNotificationsProps & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=AppHeaderNotifications.d.ts.map

package/dist/components/app-header/AppHeaderNotifications.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppHeaderNotifications.d.ts","sourceRoot":"","sources":["../../../src/components/app-header/AppHeaderNotifications.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,wBAAwB,CAAC;AAK1E,eAAO,MAAM,sBAAsB,2HA8ClC,CAAC"}

package/dist/components/app-header/AppHeaderProfile.d.ts

@@ -0,0 +1,3 @@
+import type { AppHeaderProfileProps } from "../../types/app-header";
+export declare const AppHeaderProfile: import("react").ForwardRefExoticComponent<AppHeaderProfileProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=AppHeaderProfile.d.ts.map

package/dist/components/app-header/AppHeaderProfile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppHeaderProfile.d.ts","sourceRoot":"","sources":["../../../src/components/app-header/AppHeaderProfile.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAW,MAAM,wBAAwB,CAAC;AAK7E,eAAO,MAAM,gBAAgB,kHAmG3B,CAAC"}

package/dist/components/app-header/AppHeaderSearch.d.ts

@@ -0,0 +1,4 @@
+import type { AppHeaderSearchProps } from "../../types/app-header";
+import "./styles/app-header.css";
+export declare const AppHeaderSearch: import("react").ForwardRefExoticComponent<AppHeaderSearchProps & import("react").RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=AppHeaderSearch.d.ts.map

package/dist/components/app-header/AppHeaderSearch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppHeaderSearch.d.ts","sourceRoot":"","sources":["../../../src/components/app-header/AppHeaderSearch.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EACV,oBAAoB,EAGrB,MAAM,wBAAwB,CAAC;AAGhC,OAAO,yBAAyB,CAAC;AAEjC,eAAO,MAAM,eAAe,mHAyE1B,CAAC"}

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

@@ -0,0 +1,6 @@
+export { AppHeader, AppHeaderActions } from "./AppHeader";
+export { AppHeaderSearch } from "./AppHeaderSearch";
+export { AppHeaderNotifications } from "./AppHeaderNotifications";
+export { AppHeaderProfile } from "./AppHeaderProfile";
+export type { AppHeaderProps, AppHeaderActionsProps, AppHeaderSearchProps, AppHeaderSearchDataGroup, AppHeaderSearchItem, AppHeaderNotificationsProps, AppHeaderProfileProps, AppUser, } from "../../types/app-header";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/app-header/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/app-header/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EACV,cAAc,EACd,qBAAqB,EACrB,oBAAoB,EACpB,wBAAwB,EACxB,mBAAmB,EACnB,2BAA2B,EAC3B,qBAAqB,EACrB,OAAO,GACR,MAAM,wBAAwB,CAAC"}

package/dist/components/app-layout/AppBody.d.ts

@@ -0,0 +1,7 @@
+import { type ReactNode } from "react";
+export interface AppBodyProps {
+    children?: ReactNode;
+    className?: string;
+}
+export declare const AppBody: import("react").ForwardRefExoticComponent<AppBodyProps & import("react").RefAttributes<HTMLElement>>;
+//# sourceMappingURL=AppBody.d.ts.map

package/dist/components/app-layout/AppBody.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppBody.d.ts","sourceRoot":"","sources":["../../../src/components/app-layout/AppBody.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGnD,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,OAAO,sGAQnB,CAAC"}

package/dist/components/app-layout/AppLayout.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode } from "react";
+import "./styles/app-layout.css";
+export interface AppLayoutProps {
+    children?: ReactNode;
+    className?: string;
+}
+export declare const AppLayout: import("react").ForwardRefExoticComponent<AppLayoutProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=AppLayout.d.ts.map

package/dist/components/app-layout/AppLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppLayout.d.ts","sourceRoot":"","sources":["../../../src/components/app-layout/AppLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,yBAAyB,CAAC;AAEjC,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,SAAS,2GA4BrB,CAAC"}

package/dist/components/app-layout/AppLayout.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=AppLayout.test.d.ts.map