themelia-ui 1.0.0

package/docs/generated/components/layout--auth.md

@@ -0,0 +1,188 @@
+<!-- GENERATED by scripts/gen-consumer-docs.mjs — do not edit. -->
+
+# `layout/auth`
+
+Sign-in, registration and recovery pages share a centred card and optional split panel.
+
+## Selection
+
+- **Use when:** Sign-in, registration and recovery pages share a centred card and optional split panel.
+- **Avoid when:** The page sits inside the authenticated shell.
+- **Consider instead:** `layout/page`, `layout/containers`
+- **Stability:** stable.
+
+## Import
+
+```tsx fragment — import-only example
+import { AuthCard } from "themelia-ui/layout/auth"
+import "themelia-ui/layout/auth.css"
+```
+
+## Composition
+
+This family composes `base/typography`.
+
+Application policy—routing, fetching, persistence, permissions, and translation—stays
+outside the package and arrives through the public props, callbacks, slots, or accessors below.
+
+## Public declarations
+
+### `AuthCard`
+
+Kind: callable.
+
+```text
+({ surface, eyebrow, title, description, headerEnd, banner, media, footer, level, className, children, ...props }: AuthCardProps) => import("react").JSX.Element
+```
+
+### `AuthCardProps`
+
+Kind: interface.
+
+Extends: `Omit<ComponentProps<"div">, "title">`.
+
+| member | required | type |
+| --- | :-: | --- |
+| `surface` | no | `"card" \| "bare"` |
+| `eyebrow` | no | `ReactNode` |
+| `title` | no | `ReactNode` |
+| `description` | no | `ReactNode` |
+| `headerEnd` | no | `ReactNode` |
+| `banner` | no | `ReactNode` |
+| `media` | no | `ReactNode` |
+| `footer` | no | `ReactNode` |
+| `level` | no | `1 \| 2 \| 3` |
+
+### `AuthFooterLinks`
+
+Kind: callable.
+
+```text
+({ links, label, leadingIcon, renderLink, className, }: AuthFooterLinksProps) => import("react").JSX.Element | null
+```
+
+### `AuthShell`
+
+Kind: callable.
+
+```text
+({ brand, eyebrow, title, description, headerEnd, banner, cardMedia, cardFooter, postCard, footer, footerLinks, policyLinks, languageLinks, languageSwitcher, size, variant, align, splitPanel, splitSide, splitMobile, level, contentRender, strings, renderLink, className, children, ...props }: AuthShellProps) => import("react").JSX.Element
+```
+
+### `AuthShellProps`
+
+Kind: interface.
+
+Extends: `LayoutNavigationAdapter`, `Omit<ComponentProps<"div">, "title">`.
+
+| member | required | type |
+| --- | :-: | --- |
+| `contentRender` | no | `useRender.ComponentProps<"main">["render"]` |
+| `brand` | no | `AuthBrand` |
+| `eyebrow` | no | `ReactNode` |
+| `title` | no | `ReactNode` |
+| `description` | no | `ReactNode` |
+| `headerEnd` | no | `ReactNode` |
+| `banner` | no | `ReactNode` |
+| `cardMedia` | no | `ReactNode` |
+| `cardFooter` | no | `ReactNode` |
+| `postCard` | no | `ReactNode` |
+| `footer` | no | `ReactNode` |
+| `footerLinks` | no | `AuthLink[]` |
+| `policyLinks` | no | `AuthLink[]` |
+| `languageLinks` | no | `AuthLink[]` |
+| `languageSwitcher` | no | `ReactNode` |
+| `size` | no | `AuthShellSize` |
+| `variant` | no | `AuthShellVariant` |
+| `align` | no | `"center" \| "start"` |
+| `splitPanel` | no | `ReactNode` |
+| `splitSide` | no | `AuthSplitSide` |
+| `splitMobile` | no | `AuthSplitMobile` |
+| `level` | no | `1 \| 2 \| 3` |
+| `strings` | no | `Partial<AuthShellStrings>` |
+
+### `AuthShellStrings`
+
+Kind: interface.
+
+| member | required | type |
+| --- | :-: | --- |
+| `languageLabel` | yes | `string` |
+| `helpLabel` | yes | `string` |
+| `legalLabel` | yes | `string` |
+
+### `AuthSplitPanel`
+
+Kind: callable.
+
+```text
+({ form, panel, panelPosition, panelMobile, className, ...props }: AuthSplitPanelProps) => import("react").JSX.Element
+```
+
+### `AuthSplitPanelProps`
+
+Kind: interface.
+
+Extends: `ComponentProps<"div">`.
+
+| member | required | type |
+| --- | :-: | --- |
+| `form` | yes | `ReactNode` |
+| `panel` | no | `ReactNode` |
+| `panelPosition` | no | `AuthSplitSide` |
+| `panelMobile` | no | `AuthSplitMobile` |
+
+### `defaultAuthShellStrings`
+
+Kind: const.
+
+```text
+AuthShellStrings
+```
+
+## Preview recipes
+
+Preview route: Auth shells — `/auth-shell`
+
+### AuthShell
+
+```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
+<AuthShell
+  brand={{ logo: <Logo />, label: "Acme", description: "Operations console", href: "/" }}
+  title="Sign in"
+  description="Use your work account."
+  banner={<Alert tone="warning">That link has expired.</Alert>}
+  postCard={<Text size="sm">New here? <TextLink>Create an account</TextLink></Text>}
+  footerLinks={help}
+  policyLinks={policy}
+>
+  {fields}
+</AuthShell>
+```
+
+### AuthCard
+
+```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
+<AuthCard
+  eyebrow="Step 2 of 3"
+  title="Confirm your email"
+  headerEnd={<Badge>2 / 3</Badge>}
+  media={<Illustration />}
+  footer={<Button buttonStyle="ghost">Back</Button>}
+>
+  {fields}
+</AuthCard>
+```
+
+### Split
+
+```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
+<AuthShell
+  variant="split"
+  splitSide="start"
+  splitPanel={<Marketing />}
+  title="Sign in"
+>
+  {fields}
+</AuthShell>
+```

package/docs/generated/components/layout--containers.md

@@ -0,0 +1,146 @@
+<!-- GENERATED by scripts/gen-consumer-docs.mjs — do not edit. -->
+
+# `layout/containers`
+
+A page region needs width constraint, a titled section, or a two-column split.
+
+## Selection
+
+- **Use when:** A page region needs width constraint, a titled section, or a two-column split.
+- **Avoid when:** The children are peers needing only spacing, or the region is the app shell.
+- **Consider instead:** `base/structure`, `layout/workspace`
+- **Stability:** stable.
+
+## Import
+
+```tsx fragment — import-only example
+import { Container } from "themelia-ui/layout/containers"
+import "themelia-ui/layout/containers.css"
+```
+
+## Composition
+
+This family has no component-family dependencies.
+
+Application policy—routing, fetching, persistence, permissions, and translation—stays
+outside the package and arrives through the public props, callbacks, slots, or accessors below.
+
+## Public declarations
+
+### `Container`
+
+Kind: const.
+
+```text
+React.ForwardRefExoticComponent<Omit<ContainerProps, "ref"> & React.RefAttributes<HTMLDivElement>>
+```
+
+### `ContainerGutter`
+
+Kind: type.
+
+```text
+"none" | "sm" | "md" | "lg"
+```
+
+### `ContainerMaxWidth`
+
+Kind: type.
+
+```text
+"sm" | "md" | "lg" | "xl" | "2xl" | "full"
+```
+
+### `ContainerProps`
+
+Kind: interface.
+
+Extends: `React.ComponentProps<"div">`.
+
+| member | required | type |
+| --- | :-: | --- |
+| `maxWidth` | no | `ContainerMaxWidth` |
+| `gutter` | no | `ContainerGutter` |
+
+### `PageViewport`
+
+Kind: const.
+
+```text
+React.ForwardRefExoticComponent<Omit<PageViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>
+```
+
+### `PageViewportProps`
+
+Kind: interface.
+
+Extends: `React.ComponentProps<"div">`.
+
+No own members are present in the normalized public snapshot.
+
+### `Section`
+
+Kind: const.
+
+```text
+React.ForwardRefExoticComponent<Omit<SectionProps, "ref"> & React.RefAttributes<HTMLElement>>
+```
+
+### `SectionProps`
+
+Kind: interface.
+
+Extends: `React.ComponentProps<"section">`.
+
+No own members are present in the normalized public snapshot.
+
+### `TwoColumnLayout`
+
+Kind: const.
+
+```text
+React.ForwardRefExoticComponent<Omit<TwoColumnLayoutProps, "ref"> & React.RefAttributes<HTMLDivElement>>
+```
+
+### `TwoColumnLayoutProps`
+
+Kind: interface.
+
+Extends: `Omit<React.ComponentProps<"div">, "children">`.
+
+| member | required | type |
+| --- | :-: | --- |
+| `header` | no | `React.ReactNode` |
+| `main` | yes | `React.ReactNode` |
+| `aside` | yes | `React.ReactNode` |
+| `footer` | no | `React.ReactNode` |
+| `stickyAside` | no | `boolean` |
+| `asidePosition` | no | `"start" \| "end"` |
+
+## Preview recipes
+
+Preview route: Containers — `/containers`
+
+### The four blocks
+
+```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
+<PageViewport>
+  <Container maxWidth="xl" gutter="md">
+    <Section>
+      <PageHeading title="Invoices" />
+      <Card>…</Card>
+    </Section>
+  </Container>
+</PageViewport>
+```
+
+### TwoColumnLayout
+
+```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
+<TwoColumnLayout
+  main={<InvoiceForm />}
+  aside={<SummaryCard />}
+  asidePosition="end"
+  stickyAside
+/>
+```

package/docs/generated/components/layout--header.md

@@ -0,0 +1,220 @@
+<!-- GENERATED by scripts/gen-consumer-docs.mjs — do not edit. -->
+
+# `layout/header`
+
+The application header carries breadcrumbs, search, notifications and the user menu.
+
+## Selection
+
+- **Use when:** The application header carries breadcrumbs, search, notifications and the user menu.
+- **Avoid when:** The heading names a page rather than the application.
+- **Consider instead:** `layout/page`, `base/navigation`
+- **Stability:** stable.
+
+## Import
+
+```tsx fragment — import-only example
+import { Header } from "themelia-ui/layout/header"
+import "themelia-ui/layout/header.css"
+```
+
+## Composition
+
+This family composes `base/action-menu`, `base/avatar`, `base/buttons`, `base/display`, `base/dropdown-menu`, `base/navigation`, `base/popover`, `base/sidebar`, `base/typography`.
+
+Application policy—routing, fetching, persistence, permissions, and translation—stays
+outside the package and arrives through the public props, callbacks, slots, or accessors below.
+
+## Public declarations
+
+### `defaultHeaderBreadcrumbsStrings`
+
+Kind: const.
+
+```text
+HeaderBreadcrumbsStrings
+```
+
+### `defaultHeaderNotificationsStrings`
+
+Kind: const.
+
+```text
+HeaderNotificationsStrings
+```
+
+### `defaultHeaderSearchStrings`
+
+Kind: const.
+
+```text
+HeaderSearchStrings
+```
+
+### `defaultHeaderUserMenuStrings`
+
+Kind: const.
+
+```text
+HeaderUserMenuStrings
+```
+
+### `Header`
+
+Kind: callable.
+
+```text
+({ showBreadcrumbs, showSidebarTrigger, breadcrumbs, homeCrumb, breadcrumbsStrings, slots, renderLink, className, contentClassName, children, ...props }: HeaderProps) => React.JSX.Element
+```
+
+### `HeaderBreadcrumbs`
+
+Kind: callable.
+
+```text
+({ breadcrumbs, homeCrumb, strings, showSidebarTrigger, triggerSlot, className, }: HeaderBreadcrumbsProps) => import("react").JSX.Element
+```
+
+### `HeaderBreadcrumbsStrings`
+
+Kind: interface.
+
+| member | required | type |
+| --- | :-: | --- |
+| `label` | yes | `string` |
+
+### `HeaderGlobalSearchTrigger`
+
+Kind: callable.
+
+```text
+({ onOpen, onOpenChange, ...props }: HeaderGlobalSearchTriggerProps) => import("react").JSX.Element
+```
+
+### `HeaderNotifications`
+
+Kind: callable.
+
+```text
+({ notifications, unreadCount, onNotificationClick, onMarkAllRead, onViewAll, viewAllHref, renderLink, align, side, strings, className, contentClassName, renderNotification, }: HeaderNotificationsProps) => import("react").JSX.Element
+```
+
+### `HeaderNotificationsStrings`
+
+Kind: interface.
+
+| member | required | type |
+| --- | :-: | --- |
+| `trigger` | yes | `string` |
+| `heading` | yes | `string` |
+| `markAllRead` | yes | `string` |
+| `empty` | yes | `string` |
+| `viewAll` | yes | `string` |
+| `unread` | yes | `(count: number) => string` |
+| `unreadItem` | yes | `string` |
+
+### `HeaderProps`
+
+Kind: interface.
+
+Extends: `React.ComponentProps<"header">`, `LayoutNavigationAdapter`.
+
+| member | required | type |
+| --- | :-: | --- |
+| `showBreadcrumbs` | no | `boolean` |
+| `showSidebarTrigger` | no | `boolean` |
+| `breadcrumbs` | no | `Crumb[]` |
+| `homeCrumb` | no | `Crumb \| null` |
+| `breadcrumbsStrings` | no | `Partial<HeaderBreadcrumbsStrings>` |
+| `slots` | no | `HeaderSlots` |
+| `contentClassName` | no | `string` |
+
+### `HeaderSearch`
+
+Kind: callable.
+
+```text
+({ onOpen, shortcutModifier, enableShortcut, strings, className, shortcutSlot, }: HeaderSearchProps) => import("react").JSX.Element
+```
+
+### `HeaderSearchStrings`
+
+Kind: interface.
+
+| member | required | type |
+| --- | :-: | --- |
+| `placeholder` | yes | `string` |
+| `shortcutMac` | yes | `string` |
+| `shortcutPc` | yes | `string` |
+
+### `HeaderSlots`
+
+Kind: interface.
+
+| member | required | type |
+| --- | :-: | --- |
+| `brand` | no | `React.ReactNode` |
+| `breadcrumbs` | no | `React.ReactNode` |
+| `left` | no | `React.ReactNode` |
+| `center` | no | `React.ReactNode` |
+| `right` | no | `React.ReactNode` |
+
+### `HeaderToolButton`
+
+Kind: const.
+
+```text
+import('react').ForwardRefExoticComponent<HeaderToolButtonProps & import('react').RefAttributes<HTMLButtonElement>>
+```
+
+### `HeaderToolPopover`
+
+Kind: callable.
+
+```text
+({ label, icon, open, defaultOpen, onOpenChange, active, disabled, badge, align, side, sideOffset, className, triggerClassName, contentClassName, children, }: HeaderToolPopoverProps) => import("react").JSX.Element
+```
+
+### `HeaderUserMenu`
+
+Kind: callable.
+
+```text
+({ user, showIdentity, showEmail, customContent, onProfile, onSettings, onLogout, align, side, strings, className, contentClassName, renderTrigger, }: HeaderUserMenuProps) => import("react").JSX.Element
+```
+
+### `HeaderUserMenuStrings`
+
+Kind: interface.
+
+| member | required | type |
+| --- | :-: | --- |
+| `profile` | yes | `string` |
+| `settings` | yes | `string` |
+| `logout` | yes | `string` |
+| `trigger` | yes | `string` |
+
+## Preview recipes
+
+Preview route: Header — `/header`
+
+### Header
+
+```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
+<Header
+  breadcrumbs={[{ label: "Billing", href: "/billing" }, { label: "Invoices" }]}
+  slots={{
+    center: <SearchInput />,
+    right: <><Notifications /><Account /></>,
+  }}
+/>
+```
+
+### Breadcrumbs are built in
+
+```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
+<Header
+  homeCrumb={{ label: "Home", href: "/" }}
+  breadcrumbs={[{ label: "Settings", href: "/settings" }, { label: "Members" }]}
+/>
+```