# @fayegram-ai/faye-ui/patterns

Public exports and dependency-resolved component properties, with usage and rendering guidance.

## Import

```tsx
import { AppShell, PageHeader, EmptyState } from '@fayegram-ai/faye-ui/patterns';
```

[Usage and behavior guide](/docs/patterns/) · [API JSON](/api/packages/patterns/index.json)

This entry has no declared client boundary; individual exported behavior still follows its rendering contract.

## Public exports

| Name | Kind | Resolved declaration type |
|---|---|---|
| `AppShell` | value | `({ sidebar, header, footer, sidebarLabel, mainAs: Main, mainId, mainLabel, height, scroll, className, children, ...props }: AppShellProps) => import("react").JSX.Element` |
| `AppShellProps` | type | `AppShellProps` |
| `PageHeader` | value | `({ eyebrow, title, description, actions, headingLevel, titleSize, className, ...props }: Omit<HTMLAttributes<HTMLElement>, "title"> & { eyebrow?: ReactNode; headingLevel?: 1 \| 2 \| 3 \| 4 \| 5 \| 6; titleSize?: HeadingProps["size"]; title: ReactNode; description?: ReactNode; actions?: ReactNode; }) => import("react").JSX.Element` |
| `EmptyState` | value | `({ title, description, icon, action, className, ...props }: Omit<HTMLAttributes<HTMLDivElement>, "title"> & { title: ReactNode; description?: ReactNode; icon?: ReactNode; action?: ReactNode; }) => import("react").JSX.Element` |
| `FormSection` | value | `({ title, description, children, ...props }: Omit<HTMLAttributes<HTMLFieldSetElement>, "title"> & { title: ReactNode; description?: ReactNode; }) => import("react").JSX.Element` |
| `FilterBar` | value | `({ children, className, ...props }: HTMLAttributes<HTMLDivElement>) => import("react").JSX.Element` |
| `SearchField` | value | `({ label, id, ...props }: SearchFieldProps) => import("react").JSX.Element` |
| `SearchFieldProps` | type | `SearchFieldProps` |
| `Toaster` | value | `(input?: ToasterProps) => import("react").JSX.Element` |
| `useToastQueue` | value | `() => { enqueue: (options: ToastQueueOptions) => string; clear: () => void; pendingCount: number; }` |
| `ToastPlacement` | type | `ToastPlacement` |
| `ToastTone` | type | `ToastTone` |
| `ToasterProps` | type | `ToasterProps` |
| `ToastQueueOptions` | type | `ToastManagerAddOptions<object>` |
| `CommandPalette` | value | `(input: CommandPaletteProps) => import("react").JSX.Element` |
| `Command` | type | `Command` |
| `CommandPaletteProps` | type | `CommandPaletteProps` |
| `TransferList` | value | `(input: TransferListProps) => import("react").JSX.Element` |
| `TransferItem` | type | `TransferItem` |
| `TransferListProps` | type | `TransferListProps` |
| `AppBar` | value | `({ children, className, ...props }: HTMLAttributes<HTMLElement>) => import("react").JSX.Element` |
| `ScrollAppBar` | value | `({ hidden, elevated, className, ...props }: HTMLAttributes<HTMLElement> & { hidden?: boolean; elevated?: boolean; }) => import("react").JSX.Element` |
| `BottomNavigation` | value | `({ items, current, label, className, ...props }: HTMLAttributes<HTMLElement> & { items: readonly NavigationItem[]; current?: string; label?: string; }) => import("react").JSX.Element` |
| `NavigationItem` | type | `NavigationItem` |
| `FloatingAction` | value | `({ edge, className, ...props }: ButtonProps & { edge?: "start" \| "end"; }) => import("react").JSX.Element` |
| `FloatingActions` | value | `({ label, items, edge, direction, openOnHover, triggerProps, positionerProps, popupProps, ...rootProps }: FloatingActionsProps) => import("react").JSX.Element` |
| `FloatingActionItem` | type | `FloatingActionItem` |
| `FloatingActionsProps` | type | `FloatingActionsProps` |
| `CollapsedBreadcrumbs` | value | `({ items, maxItems, beforeCollapse, afterCollapse, expandLabel, ...props }: CollapsedBreadcrumbsProps) => import("react").JSX.Element` |
| `CollapsedBreadcrumbsProps` | type | `CollapsedBreadcrumbsProps` |
| `NavigationDrawer` | value | `({ open, onOpenChange, title, navigation, miniNavigation, mode, edge, toggleLabel, closeLabel, triggerProps, closeProps, desktopTriggerProps, desktopCloseProps, className, children, ...props }: NavigationDrawerProps) => import("react").JSX.Element` |
| `NavigationDrawerProps` | type | `NavigationDrawerProps` |
| `AccessibilityPreferences` | value | `({ value, onValueChange, labels, disabled, className, ...props }: AccessibilityPreferencesProps) => import("react").JSX.Element` |
| `AccessibilityPreferencesValue` | type | `AccessibilityPreferencesValue` |
| `AccessibilityPreferencesProps` | type | `AccessibilityPreferencesProps` |



## Defaults and customization

Defaults and native behavior are documented in the linked family guide. This reference does not infer a default from an optional property.

Use semantic tokens, public part hooks and customization sheets. Keep visual configuration separate from application state.

## State, events and accessibility

For interactive controls, pair a controlled value/open prop with its corresponding change callback; default props initialize uncontrolled state. Keep application validation and submission policy explicit. Name controls with visible labels, name icon-only actions on the button, and preserve focus and dismissal behavior when replacing parts. Use native form names and submit/reset types where supported. See the usage guide for component-specific behavior and live examples.

## Declaration authority

Generated from `packages/faye-ui/dist/patterns/index.d.ts` after the semantic package build. Common native/React attributes are intentionally omitted from property tables. Generic overloads, discriminated unions and complete inherited attributes remain authoritative in installed TypeScript declarations. [React DOM attributes](https://react.dev/reference/react-dom/components/common) and [Base UI component contracts](https://base-ui.com/react/overview/quick-start) describe the inherited foundations.