@kennycorrea/ui 0.11.3 → 1.6.1

package/dist/organisms/Sidebar/Sidebar.d.ts

@@ -0,0 +1,48 @@
+import { type ReactNode } from 'react';
+import { type Breakpoint } from '../../hooks/breakpoints.js';
+import { type NavItemProps } from '../../molecules/NavItem/NavItem.js';
+export interface SidebarSection {
+    /** React key. Defaults to the label, then the index. */
+    id?: string;
+    /** A small heading over the section. Hidden (still read out) while collapsed. */
+    label?: string;
+    items: NavItemProps[];
+}
+export interface SidebarProps {
+    /** Top slot: a logo or workspace switcher. */
+    header?: ReactNode;
+    /**
+     * What the header shows while the sidebar is an icon rail: a logo mark rather than the full
+     * wordmark, which would wrap in 64px. Default: `header`.
+     */
+    collapsedHeader?: ReactNode;
+    sections: SidebarSection[];
+    /** Bottom slot, above the collapse toggle: help links, a user menu. */
+    footer?: ReactNode;
+    /** Controlled icon-rail state on wide screens. */
+    collapsed?: boolean;
+    defaultCollapsed?: boolean;
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /** Shows the collapse toggle. Default `true`. */
+    collapsible?: boolean;
+    /** Overrides the landmark's name (otherwise the `mainNavigation` UI string). */
+    'aria-label'?: string;
+    /**
+     * Outside an AppShell: the breakpoint from which the sidebar is persistent (default `md`), and
+     * the off-canvas panel's open state below it. Inside one, the shell provides all three.
+     */
+    breakpoint?: Breakpoint;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Where the off-canvas panel portals. Default: the nearest `<Theme>`. */
+    container?: HTMLElement | null;
+}
+/**
+ * The main navigation. From `breakpoint` up it is a persistent column that can collapse to an
+ * icon rail; below it, an off-canvas panel from the start edge with a scrim, a focus trap and
+ * Escape, which closes again when an item is chosen.
+ *
+ * Inside an `AppShell`, the shell decides which and the Topbar's menu button opens the panel.
+ * Without matchMedia (on the server) it renders the persistent column.
+ */
+export declare function Sidebar({ header, collapsedHeader, sections, footer, collapsed: collapsedProp, defaultCollapsed, onCollapsedChange, collapsible, 'aria-label': ariaLabel, breakpoint, open, onOpenChange, container, }: SidebarProps): import("react").JSX.Element;

package/dist/organisms/Sidebar/Sidebar.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as RadixDialog from '@radix-ui/react-dialog';
+import { Cross1Icon, DoubleArrowLeftIcon, DoubleArrowRightIcon } from '@radix-ui/react-icons';
+import { Theme } from '@radix-ui/themes';
+import { useId, useState } from 'react';
+import { Tooltip } from '../../atoms/Tooltip/Tooltip.js';
+import { minWidth } from '../../hooks/breakpoints.js';
+import { useControllableState } from '../../hooks/useControllableState.js';
+import { useMediaQuery } from '../../hooks/useMediaQuery.js';
+import { NavContext } from '../../molecules/NavItem/context.js';
+import { NavItem } from '../../molecules/NavItem/NavItem.js';
+import { useUiStrings } from '../../strings.js';
+import { useThemePortalTarget } from '../../utils/themePortal.js';
+import { useShell } from '../AppShell/context.js';
+function Sections({ sections, label, id, }) {
+    return (_jsx("nav", { id: id, "aria-label": label, className: "ui-sidebar__nav", children: sections.map((section, i) => {
+            const headingId = `${id}-s${i}`;
+            return (_jsxs("div", { className: "ui-sidebar__section", children: [section.label ? (_jsx("h2", { id: headingId, className: "ui-sidebar__section-label", children: section.label })) : null, _jsx("ul", { className: "ui-sidebar__list", "aria-labelledby": section.label ? headingId : undefined, children: section.items.map((item) => (_jsx(NavItem, { ...item }, item.id ?? item.label))) })] }, section.id ?? section.label ?? i));
+        }) }));
+}
+/**
+ * The main navigation. From `breakpoint` up it is a persistent column that can collapse to an
+ * icon rail; below it, an off-canvas panel from the start edge with a scrim, a focus trap and
+ * Escape, which closes again when an item is chosen.
+ *
+ * Inside an `AppShell`, the shell decides which and the Topbar's menu button opens the panel.
+ * Without matchMedia (on the server) it renders the persistent column.
+ */
+export function Sidebar({ header, collapsedHeader, sections, footer, collapsed: collapsedProp, defaultCollapsed = false, onCollapsedChange, collapsible = true, 'aria-label': ariaLabel, breakpoint = 'md', open, onOpenChange, container, }) {
+    const strings = useUiStrings();
+    const shell = useShell();
+    const ownWide = useMediaQuery(minWidth(shell?.breakpoint ?? breakpoint));
+    const [ownOpen, setOwnOpen] = useState(false);
+    const [collapsed, setCollapsed] = useControllableState({
+        value: collapsedProp,
+        defaultValue: defaultCollapsed,
+        onChange: onCollapsedChange,
+    });
+    const { anchorRef, target, resolved } = useThemePortalTarget(container);
+    const navId = useId();
+    const wide = shell ? shell.wide : ownWide;
+    const panelOpen = shell ? shell.navOpen : (open ?? ownOpen);
+    const setPanelOpen = (next) => {
+        if (shell)
+            shell.setNavOpen(next);
+        else if (open === undefined)
+            setOwnOpen(next);
+        onOpenChange?.(next);
+    };
+    const label = ariaLabel ?? strings.mainNavigation;
+    if (wide) {
+        const toggleLabel = collapsed ? strings.expandSidebar : strings.collapseSidebar;
+        const railHeader = collapsed ? (collapsedHeader ?? header) : header;
+        return (_jsxs("div", { className: "ui-sidebar", "data-collapsed": collapsed ? '' : undefined, children: [railHeader ? _jsx("div", { className: "ui-sidebar__header", children: railHeader }) : null, _jsx(NavContext.Provider, { value: { collapsed }, children: _jsx(Sections, { sections: sections, label: label, id: navId }) }), footer || collapsible ? (_jsxs("div", { className: "ui-sidebar__footer", children: [footer, collapsible ? (_jsx(Tooltip, { label: collapsed ? toggleLabel : undefined, children: _jsxs("button", { type: "button", className: "ui-nav-item", "aria-expanded": !collapsed, "aria-controls": navId, onClick: () => setCollapsed(!collapsed), children: [_jsx("span", { className: "ui-nav-item__icon", "aria-hidden": "true", children: collapsed ? _jsx(DoubleArrowRightIcon, {}) : _jsx(DoubleArrowLeftIcon, {}) }), _jsx("span", { className: "ui-nav-item__label", children: toggleLabel })] }) })) : null] })) : null] }));
+    }
+    const panel = (_jsxs(_Fragment, { children: [_jsx(RadixDialog.Overlay, { className: "ui-sidebar-overlay" }), _jsxs(RadixDialog.Content, { className: "ui-sidebar-panel", "aria-describedby": undefined, children: [_jsx(RadixDialog.Title, { className: "ui-sr-only", children: label }), _jsxs("div", { className: "ui-sidebar__header", children: [_jsx("div", { className: "min-w-0 flex-1", children: header }), _jsxs(RadixDialog.Close, { className: "ui-nav-item ui-sidebar__close", children: [_jsx("span", { className: "ui-nav-item__icon", "aria-hidden": "true", children: _jsx(Cross1Icon, {}) }), _jsx("span", { className: "ui-sr-only", children: strings.closeNavigation })] })] }), _jsx(NavContext.Provider, { value: { collapsed: false, onNavigate: () => setPanelOpen(false) }, children: _jsx(Sections, { sections: sections, label: label, id: navId }) }), footer ? _jsx("div", { className: "ui-sidebar__footer", children: footer }) : null] })] }));
+    const anchor = _jsx("span", { ref: anchorRef, hidden: true });
+    if (!resolved)
+        return anchor;
+    return (_jsxs(RadixDialog.Root, { open: panelOpen, onOpenChange: setPanelOpen, children: [anchor, _jsx(RadixDialog.Portal, { container: target ?? undefined, children: target ? _jsx(Theme, { hasBackground: false, children: panel }) : panel })] }));
+}

package/dist/organisms/Sidebar/index.d.ts

@@ -0,0 +1 @@
+export * from './Sidebar.js';

package/dist/organisms/Sidebar/index.js

@@ -0,0 +1 @@
+export * from './Sidebar.js';

package/dist/organisms/Topbar/Topbar.d.ts

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+export interface TopbarProps {
+    /** Before the title: breadcrumbs, a logo on narrow screens. */
+    leading?: ReactNode;
+    /** A short page or app title. Not a heading: the page's `h1` belongs to PageHeader. */
+    title?: ReactNode;
+    /** A search field. Sits between title and actions from 768px; on its own row below that. */
+    search?: ReactNode;
+    /** Icon buttons, a notification bell, a UserMenu. */
+    actions?: ReactNode;
+    /**
+     * The button that opens the off-canvas Sidebar. Default: shown inside an AppShell whenever
+     * the sidebar is off-canvas. Pass `false` to hide it, or `true` with `onMenuClick` outside one.
+     */
+    showMenuButton?: boolean;
+    onMenuClick?: () => void;
+    className?: string;
+}
+/**
+ * The bar across the top of the content column: a `header` landmark, sticky, on the bar
+ * material. Narrow screens get the menu button that opens the Sidebar, and the search moves to
+ * a second row so neither it nor the title is squeezed.
+ */
+export declare function Topbar({ leading, title, search, actions, showMenuButton, onMenuClick, className, }: TopbarProps): import("react").JSX.Element;

package/dist/organisms/Topbar/Topbar.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { HamburgerMenuIcon } from '@radix-ui/react-icons';
+import { useUiStrings } from '../../strings.js';
+import { useShell } from '../AppShell/context.js';
+/**
+ * The bar across the top of the content column: a `header` landmark, sticky, on the bar
+ * material. Narrow screens get the menu button that opens the Sidebar, and the search moves to
+ * a second row so neither it nor the title is squeezed.
+ */
+export function Topbar({ leading, title, search, actions, showMenuButton, onMenuClick, className, }) {
+    const strings = useUiStrings();
+    const shell = useShell();
+    const menu = showMenuButton ?? (shell ? !shell.wide : false);
+    return (_jsxs("header", { className: ['ui-topbar', className].filter(Boolean).join(' '), children: [_jsxs("div", { className: "ui-topbar__lead", children: [menu ? (_jsx("button", { type: "button", className: "ui-nav-item ui-topbar__menu", "aria-label": strings.openNavigation, "aria-expanded": shell?.navOpen ?? false, onClick: () => {
+                            shell?.setNavOpen(true);
+                            onMenuClick?.();
+                        }, children: _jsx("span", { className: "ui-nav-item__icon", "aria-hidden": "true", children: _jsx(HamburgerMenuIcon, {}) }) })) : null, leading] }), title ? _jsx("div", { className: "ui-topbar__title", children: title }) : _jsx("div", {}), search ? _jsx("div", { className: "ui-topbar__search", children: search }) : null, actions ? _jsx("div", { className: "ui-topbar__actions", children: actions }) : null] }));
+}

package/dist/organisms/Topbar/index.d.ts

@@ -0,0 +1 @@
+export * from './Topbar.js';

package/dist/organisms/Topbar/index.js

@@ -0,0 +1 @@
+export * from './Topbar.js';

package/dist/organisms/index.d.ts

@@ -0,0 +1,11 @@
+export * from './AppShell/index.js';
+export * from './AuthForms/index.js';
+export * from './BulkActionBar/index.js';
+export * from './Chart/index.js';
+export * from './DataTable/index.js';
+export * from './DateRangePicker/index.js';
+export * from './FilterBar/index.js';
+export * from './PageHeader/index.js';
+export * from './PageTabs/index.js';
+export * from './Sidebar/index.js';
+export * from './Topbar/index.js';

package/dist/organisms/index.js

@@ -0,0 +1,11 @@
+export * from './AppShell/index.js';
+export * from './AuthForms/index.js';
+export * from './BulkActionBar/index.js';
+export * from './Chart/index.js';
+export * from './DataTable/index.js';
+export * from './DateRangePicker/index.js';
+export * from './FilterBar/index.js';
+export * from './PageHeader/index.js';
+export * from './PageTabs/index.js';
+export * from './Sidebar/index.js';
+export * from './Topbar/index.js';

package/dist/strings.d.ts

@@ -2,16 +2,16 @@ import { type ReactNode } from 'react';
 /**
  * The handful of strings the atoms say on their own behalf.
  *
- * **The dictionaries stay in the apps, deliberately** — that is a decision in the product
- * brief, and it is the right one: a shared dictionary would make every string in three
- * products one product's business. But two atoms do have something to say without being told.
- * A standing `Spinner` has to announce that a wait is in progress, and a `Select` with no
- * placeholder has to say something in the trigger.
+ * **The dictionaries stay in the apps, deliberately.** A shared dictionary would make every
+ * string in every consuming app this library's business. But some components do have
+ * something to say without being told: a standing `Spinner` has to announce that a wait is in
+ * progress, and a `Select` with no placeholder has to say something in the trigger.
  *
- * So the package declares what it needs and the host supplies it. English defaults, not
- * Portuguese: an app that forgets to wrap gets something legible rather than something wrong,
- * and Portuguese here would be a translatable string living in the shared package, which is
- * exactly what this avoids.
+ * So the package declares what it needs and the host supplies it. The defaults are English, so
+ * an app that forgets to wrap gets something legible, and no translation lives in the package.
+ *
+ * Anything that carries a value is a function, not a template string, so a language can put
+ * the number where its grammar wants it ("3 selected", "3 seleccionados").
  */
 export interface UiStrings {
     /** Announced by a standing spinner. */
@@ -46,22 +46,115 @@ export interface UiStrings {
     refreshing: string;
     /** ScrollStrip: the accessible name of the scrollable region, when none is passed. */
     scrollableRegion: string;
+    /** AppShell: the skip link that jumps past the navigation to the main content. */
+    skipToContent: string;
+    /** Sidebar: the navigation landmark's name. */
+    mainNavigation: string;
+    /** Topbar: the button that opens the navigation on small screens. */
+    openNavigation: string;
+    /** Sidebar: the close button of the navigation panel on small screens. */
+    closeNavigation: string;
+    /** Sidebar: the collapse toggle, while expanded. */
+    collapseSidebar: string;
+    /** Sidebar: the collapse toggle, while collapsed. */
+    expandSidebar: string;
+    /** Breadcrumbs: the landmark's name. */
+    breadcrumbs: string;
+    /** Breadcrumbs: the menu that holds the collapsed middle items. */
+    showMoreBreadcrumbs: string;
+    /** Link: appended, visually hidden, to links that open a new tab. */
+    opensInNewTab: string;
+    /** UserMenu: the trigger's name when the name itself is hidden. */
+    userMenu: string;
+    /** ThemeToggle: the group's name and its three options. */
+    appearance: string;
+    light: string;
+    dark: string;
+    system: string;
+    /** AccentPicker: the group's name. */
+    accent: string;
+    /** Pill: the remove button's name. */
+    remove: (label: string) => string;
+    /** EmptyState default inside DataTable when there are no rows. */
+    noResults: string;
+    /** ErrorState: the default title, the retry button, and the disclosure for details. */
+    somethingWentWrong: string;
+    retry: string;
+    showDetails: string;
+    /** Pagination: the landmark's name, the two step buttons, and the page-size label. */
+    pagination: string;
+    previousPage: string;
+    nextPage: string;
+    rowsPerPage: string;
+    /** Pagination: one page button's name. */
+    goToPage: (page: number) => string;
+    /** Pagination: the compact "page of" text. */
+    pageOf: (page: number, pageCount: number) => string;
+    /** Pagination: which rows are showing, e.g. "1–25 of 500". */
+    rangeOf: (from: number, to: number, total: number) => string;
+    /** DataTable: the header checkbox, and each row's. */
+    selectAll: string;
+    selectRow: (row: string) => string;
+    /** DataTable: the row-actions menu button's name. */
+    actionsFor: (row: string) => string;
+    /** BulkActionBar: the toolbar's name, the selection count, and the clear button. */
+    bulkActions: string;
+    selectedCount: (count: number) => string;
+    clearSelection: string;
+    /** SearchField: its accessible name when none is given, and the clear button. */
+    search: string;
+    clearSearch: string;
+    /** FilterPopover: the trigger's default label, and its footer. FilterBar: the clear-all. */
+    filters: string;
+    apply: string;
+    reset: string;
+    clearFilters: string;
+    /** FilterBar: names the group of active-filter pills. */
+    activeFilters: string;
+    /** FilterPopover: appended to the trigger's name when filters are active. */
+    activeCount: (count: number) => string;
+    /** ErrorSummary: its heading. */
+    fixErrors: (count: number) => string;
+    /** Calendar: the month step buttons. */
+    previousMonth: string;
+    nextMonth: string;
+    /** DateInput / DateRangePicker: the trigger text while nothing is chosen. */
+    chooseDate: string;
+    chooseDates: string;
+    /** DateRangePicker: names the list of preset ranges. */
+    datePresets: string;
+    /** ChartFrame: the toggle between the chart and its data table. */
+    viewAsTable: string;
+    viewAsChart: string;
+    /** PasswordInput: the visibility toggle's name. It is a toggle (`aria-pressed`), so one name. */
+    showPassword: string;
 }
 /**
- * Feeds the atoms their strings, once, near the root.
+ * Feeds the components their strings, once, near the root.
  *
  * Every app wraps its tree in this and passes its own dictionary's words through. It takes a
  * partial so an app that only cares about one of them says only that.
+ *
+ * `locale` is the BCP 47 tag that dates, numbers and money are formatted in (through `Intl`).
+ * Formatting rather than translating: "21 de setembro" comes from the locale, not from a
+ * string. Left out, it inherits from an outer provider, and with none the runtime's default.
  */
-export declare function UiStringsProvider({ strings, children, }: {
+export declare function UiStringsProvider({ strings, locale, children, }: {
     strings: Partial<UiStrings>;
+    locale?: string;
     children: ReactNode;
 }): import("react").JSX.Element;
 /**
- * No error when there is no provider, unlike the apps' own `useCopy`.
+ * No error when there is no provider.
  *
- * A missing provider there is a bug — the dictionary is the app. Here it is a host that did
- * not need to override anything, which is a legitimate way to use this package and must not
- * throw in a component as ordinary as a spinner.
+ * A host that did not need to override anything is a legitimate way to use this package, and
+ * a component as ordinary as a spinner must not throw because of it.
  */
 export declare function useUiStrings(): UiStrings;
+/**
+ * The locale passed to the nearest `UiStringsProvider`, for `Intl` formatters.
+ *
+ * `undefined` means "the runtime's default", which is what `Intl` already does with
+ * `undefined`, so the value can be passed straight through.
+ */
+export declare function useUiLocale(): string | undefined;

package/dist/strings.js

@@ -20,24 +20,90 @@ const DEFAULTS = {
     back: 'Back',
     refreshing: 'Refreshing',
     scrollableRegion: 'Scrollable content',
+    skipToContent: 'Skip to content',
+    mainNavigation: 'Main navigation',
+    openNavigation: 'Open navigation',
+    closeNavigation: 'Close navigation',
+    collapseSidebar: 'Collapse sidebar',
+    expandSidebar: 'Expand sidebar',
+    breadcrumbs: 'Breadcrumbs',
+    showMoreBreadcrumbs: 'Show hidden breadcrumbs',
+    opensInNewTab: '(opens in a new tab)',
+    userMenu: 'Account menu',
+    appearance: 'Appearance',
+    light: 'Light',
+    dark: 'Dark',
+    system: 'System',
+    accent: 'Accent colour',
+    remove: (label) => `Remove ${label}`,
+    noResults: 'No results',
+    somethingWentWrong: 'Something went wrong',
+    retry: 'Try again',
+    showDetails: 'Details',
+    pagination: 'Pagination',
+    previousPage: 'Previous page',
+    nextPage: 'Next page',
+    rowsPerPage: 'Rows per page',
+    goToPage: (page) => `Page ${page}`,
+    pageOf: (page, pageCount) => `Page ${page} of ${pageCount}`,
+    rangeOf: (from, to, total) => `${from}–${to} of ${total}`,
+    selectAll: 'Select all rows',
+    selectRow: (row) => `Select ${row}`,
+    actionsFor: (row) => `Actions for ${row}`,
+    bulkActions: 'Bulk actions',
+    selectedCount: (count) => `${count} selected`,
+    clearSelection: 'Clear selection',
+    search: 'Search',
+    clearSearch: 'Clear search',
+    filters: 'Filters',
+    apply: 'Apply',
+    reset: 'Reset',
+    clearFilters: 'Clear all',
+    activeFilters: 'Active filters',
+    activeCount: (count) => `${count} active`,
+    fixErrors: (count) => count === 1
+        ? 'There is 1 problem with this form'
+        : `There are ${count} problems with this form`,
+    previousMonth: 'Previous month',
+    nextMonth: 'Next month',
+    chooseDate: 'Choose a date',
+    chooseDates: 'Choose dates',
+    datePresets: 'Quick ranges',
+    viewAsTable: 'View as table',
+    viewAsChart: 'View as chart',
+    showPassword: 'Show password',
 };
 const StringsContext = createContext(DEFAULTS);
+const LocaleContext = createContext(undefined);
 /**
- * Feeds the atoms their strings, once, near the root.
+ * Feeds the components their strings, once, near the root.
  *
  * Every app wraps its tree in this and passes its own dictionary's words through. It takes a
  * partial so an app that only cares about one of them says only that.
+ *
+ * `locale` is the BCP 47 tag that dates, numbers and money are formatted in (through `Intl`).
+ * Formatting rather than translating: "21 de setembro" comes from the locale, not from a
+ * string. Left out, it inherits from an outer provider, and with none the runtime's default.
  */
-export function UiStringsProvider({ strings, children, }) {
-    return (_jsx(StringsContext.Provider, { value: { ...DEFAULTS, ...strings }, children: children }));
+export function UiStringsProvider({ strings, locale, children, }) {
+    const outerLocale = useContext(LocaleContext);
+    return (_jsx(LocaleContext.Provider, { value: locale ?? outerLocale, children: _jsx(StringsContext.Provider, { value: { ...DEFAULTS, ...strings }, children: children }) }));
 }
 /**
- * No error when there is no provider, unlike the apps' own `useCopy`.
+ * No error when there is no provider.
  *
- * A missing provider there is a bug — the dictionary is the app. Here it is a host that did
- * not need to override anything, which is a legitimate way to use this package and must not
- * throw in a component as ordinary as a spinner.
+ * A host that did not need to override anything is a legitimate way to use this package, and
+ * a component as ordinary as a spinner must not throw because of it.
  */
 export function useUiStrings() {
     return useContext(StringsContext);
 }
+/**
+ * The locale passed to the nearest `UiStringsProvider`, for `Intl` formatters.
+ *
+ * `undefined` means "the runtime's default", which is what `Intl` already does with
+ * `undefined`, so the value can be passed straight through.
+ */
+export function useUiLocale() {
+    return useContext(LocaleContext);
+}

package/dist/templates/AdminLayout/AdminLayout.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+import { type AppShellProps } from '../../organisms/AppShell/AppShell.js';
+export interface AdminLayoutProps extends Omit<AppShellProps, 'children'> {
+    /** A `PageHeader`, above the content and inside the same width. */
+    header?: ReactNode;
+    children: ReactNode;
+    /** `default` caps the content at `--content-max-width`; `full` uses the whole column. */
+    width?: 'default' | 'full';
+}
+/**
+ * An AppShell with a page inside it: the header and content share one centred column, padded
+ * by `--page-gutter`. A slot layout only; routing, data and auth belong to the app.
+ */
+export declare function AdminLayout({ header, children, width, ...shell }: AdminLayoutProps): import("react").JSX.Element;

package/dist/templates/AdminLayout/AdminLayout.js

@@ -0,0 +1,9 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { AppShell } from '../../organisms/AppShell/AppShell.js';
+/**
+ * An AppShell with a page inside it: the header and content share one centred column, padded
+ * by `--page-gutter`. A slot layout only; routing, data and auth belong to the app.
+ */
+export function AdminLayout({ header, children, width = 'default', ...shell }) {
+    return (_jsx(AppShell, { ...shell, children: _jsxs("div", { className: "ui-admin-content", "data-width": width, children: [header, children] }) }));
+}

package/dist/templates/AdminLayout/index.d.ts

@@ -0,0 +1 @@
+export * from './AdminLayout.js';

package/dist/templates/AdminLayout/index.js

@@ -0,0 +1 @@
+export * from './AdminLayout.js';

package/dist/templates/AuthLayout/AuthLayout.d.ts

@@ -0,0 +1,28 @@
+import type { ReactNode } from 'react';
+export interface AuthLayoutProps {
+    /** A logo, above the title. */
+    brand?: ReactNode;
+    /** The page's `h1`: "Sign in", "Create your account". */
+    title: ReactNode;
+    description?: ReactNode;
+    /** One of the auth forms, or your own. */
+    children: ReactNode;
+    /** Under the card: links to the other auth pages, legal text. */
+    footer?: ReactNode;
+    /**
+     * A panel beside the card from 1024px: a product image, a quote. Decorative from a reader's
+     * point of view, so keep anything essential in the card. Hidden on smaller screens.
+     */
+    aside?: ReactNode;
+    /** Top corner controls: a ThemeToggle, a language switch. */
+    toolbar?: ReactNode;
+    className?: string;
+}
+/**
+ * The frame for sign-in, sign-up and password pages, outside the app shell.
+ *
+ * A centred card on a canvas; from 1024px, an optional panel beside it. Below 520px the card
+ * loses its border and fills the screen, because a card inside a phone's edges only wastes
+ * width. The whole page is the `main` landmark, with the title as its `h1`.
+ */
+export declare function AuthLayout({ brand, title, description, children, footer, aside, toolbar, className, }: AuthLayoutProps): import("react").JSX.Element;

package/dist/templates/AuthLayout/AuthLayout.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The frame for sign-in, sign-up and password pages, outside the app shell.
+ *
+ * A centred card on a canvas; from 1024px, an optional panel beside it. Below 520px the card
+ * loses its border and fills the screen, because a card inside a phone's edges only wastes
+ * width. The whole page is the `main` landmark, with the title as its `h1`.
+ */
+export function AuthLayout({ brand, title, description, children, footer, aside, toolbar, className, }) {
+    return (_jsxs("div", { className: ['ui-auth', className].filter(Boolean).join(' '), "data-has-aside": aside ? '' : undefined, children: [aside ? _jsx("div", { className: "ui-auth__aside", children: aside }) : null, _jsxs("main", { className: "ui-auth__main", children: [toolbar ? _jsx("div", { className: "ui-auth__toolbar", children: toolbar }) : null, _jsxs("div", { className: "ui-auth__card", children: [brand ? _jsx("div", { className: "ui-auth__brand", children: brand }) : null, _jsx("h1", { className: "ui-auth__title", children: title }), description ? _jsx("p", { className: "ui-auth__description", children: description }) : null, children] }), footer ? _jsx("div", { className: "ui-auth__footer", children: footer }) : null] })] }));
+}

package/dist/templates/AuthLayout/index.d.ts

@@ -0,0 +1 @@
+export * from './AuthLayout.js';

package/dist/templates/AuthLayout/index.js

@@ -0,0 +1 @@
+export * from './AuthLayout.js';

package/dist/templates/DashboardPage/DashboardPage.d.ts

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+export interface DashboardPageProps {
+    /** A PageHeader. */
+    header?: ReactNode;
+    /** A StatGroup. */
+    stats?: ReactNode;
+    /** Widgets: ChartFrames, Cards, tables. Wrap one in `DashboardWidget` to make it wider. */
+    children: ReactNode;
+    /** The most columns at full width. Default 3. */
+    columns?: 2 | 3 | 4;
+    className?: string;
+}
+/**
+ * A page of widgets. The grid follows the page's own width (a container query): one column
+ * below 640px, two from there, and `columns` from 1024px.
+ */
+export declare function DashboardPage({ header, stats, children, columns, className, }: DashboardPageProps): import("react").JSX.Element;
+export interface DashboardWidgetProps {
+    /** Columns to span once there is more than one. `full` spans the row. Default 1. */
+    span?: 1 | 2 | 'full';
+    children: ReactNode;
+    className?: string;
+}
+/** A grid cell in DashboardPage that spans more than one column on wide pages. */
+export declare function DashboardWidget({ span, children, className }: DashboardWidgetProps): import("react").JSX.Element;

package/dist/templates/DashboardPage/DashboardPage.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A page of widgets. The grid follows the page's own width (a container query): one column
+ * below 640px, two from there, and `columns` from 1024px.
+ */
+export function DashboardPage({ header, stats, children, columns = 3, className, }) {
+    return (_jsxs("div", { className: ['ui-dashboard ui-list-page', className].filter(Boolean).join(' '), children: [header, stats, _jsx("div", { className: "ui-dashboard__grid", "data-columns": columns, children: children })] }));
+}
+/** A grid cell in DashboardPage that spans more than one column on wide pages. */
+export function DashboardWidget({ span = 1, children, className }) {
+    return (_jsx("div", { className: ['ui-dashboard__widget', className].filter(Boolean).join(' '), "data-span": span, children: children }));
+}

package/dist/templates/DashboardPage/index.d.ts

@@ -0,0 +1 @@
+export * from './DashboardPage.js';

package/dist/templates/DashboardPage/index.js

@@ -0,0 +1 @@
+export * from './DashboardPage.js';

package/dist/templates/DetailPage/DetailPage.d.ts

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+export interface DetailPageProps {
+    /** A PageHeader (with PageTabs in its `tabs` slot, usually). */
+    header?: ReactNode;
+    /** The main content. */
+    children: ReactNode;
+    /** A side column of facts: a KeyValueList in a Card, say. */
+    aside?: ReactNode;
+    /** Names the aside's `complementary` landmark. Required with `aside`. */
+    asideLabel?: string;
+    className?: string;
+}
+/**
+ * One record: header, main content and an optional side column.
+ *
+ * The side column sits beside the main content once the page is 960px wide (a container
+ * query, so a narrow panel counts as narrow), and below it otherwise. It comes after the main
+ * content in the DOM either way, so reading and tab order match what is primary.
+ */
+export declare function DetailPage({ header, children, aside, asideLabel, className }: DetailPageProps): import("react").JSX.Element;

package/dist/templates/DetailPage/DetailPage.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * One record: header, main content and an optional side column.
+ *
+ * The side column sits beside the main content once the page is 960px wide (a container
+ * query, so a narrow panel counts as narrow), and below it otherwise. It comes after the main
+ * content in the DOM either way, so reading and tab order match what is primary.
+ */
+export function DetailPage({ header, children, aside, asideLabel, className }) {
+    return (_jsxs("div", { className: ['ui-detail-page', className].filter(Boolean).join(' '), children: [header, _jsxs("div", { className: "ui-detail-page__body", "data-has-aside": aside ? '' : undefined, children: [_jsx("div", { className: "min-w-0", children: children }), aside ? _jsx("aside", { "aria-label": asideLabel, children: aside }) : null] })] }));
+}

package/dist/templates/DetailPage/index.d.ts

@@ -0,0 +1 @@
+export * from './DetailPage.js';

package/dist/templates/DetailPage/index.js

@@ -0,0 +1 @@
+export * from './DetailPage.js';