themelia-react-ui 2.0.0 → 2.0.1

package/dist/components/features/table/table.types.d.ts

@@ -76,10 +76,17 @@ export interface DataTableStrings {
     emptyState: {
         message: string;
     };
-    /** Overflow menu for the surface as a whole. */
+    /** Row actions column and its overflow menu. */
     actions: {
+        /** Header of the row actions column. */
         triggerLabel: string;
         srLabel: string;
+        /**
+         * Accessible name of each row's More actions trigger. Defaults to "More
+         * actions"; an override that sets only `triggerLabel` keeps naming the
+         * trigger with it, as before 2.0.1.
+         */
+        menuLabel?: string;
     };
     filter: {
         searchPlaceholder: string;
@@ -156,6 +163,7 @@ export interface DataTableSelectionToolbarContext<TData extends object> {
     table: Table<TData>;
     selectedRows: TData[];
     selectedRowCount: number;
+    /** `totalRowCount` when supplied, else `pagination.total`, else the rows in `data`. */
     totalRowCount: number;
     rowSelection: RowSelectionState;
     clearSelection: () => void;
@@ -302,15 +310,32 @@ export interface DataTableProps<TData extends object, TValue> {
     /** Content below the table body, above the pagination footer. */
     footerContent?: React.ReactNode;
     /**
-     * Custom selected-row toolbar. `undefined` renders the package default,
-     * `null` / `false` suppresses it, and a function receives the selected row
-     * context for a fully custom toolbar.
+     * Custom selected-row toolbar. `undefined` renders the package default, a
+     * `BatchActionBar` from `themelia-react-ui/base/batch-action-bar`; `null` /
+     * `false` suppresses it, and a node or a function receiving the selected row
+     * context replaces it while rows are selected.
      */
     selectionToolbar?: React.ReactNode | ((context: DataTableSelectionToolbarContext<TData>) => React.ReactNode);
-    /** Optional bulk action slot rendered in the package default selection toolbar. */
+    /**
+     * Bulk actions rendered in the default selection toolbar, before its Clear
+     * button. The toolbar only shows while rows are selected, so these actions
+     * need no disabled state for an empty selection.
+     */
     bulkActions?: React.ReactNode | ((context: DataTableSelectionToolbarContext<TData>) => React.ReactNode);
-    /** Merged onto the selection toolbar. */
+    /** Merged onto the default selection toolbar. */
     selectionToolbarClassName?: string;
+    /**
+     * Where the default selection toolbar sits. `floating` (default) docks it to
+     * the bottom centre of the viewport, so it stays reachable while a long table
+     * scrolls; `inline` keeps it in flow between the topbar and the table.
+     */
+    selectionToolbarPlacement?: 'floating' | 'inline';
+    /**
+     * Total rows in the whole result, for the selection summary ("3 of 1,250
+     * rows selected") and `DataTableSelectionToolbarContext.totalRowCount`.
+     * Defaults to `pagination.total`, else the rows in `data`.
+     */
+    totalRowCount?: number;
     /**
      * Row actions, as a static array or a factory receiving the row.
      *
@@ -439,7 +464,7 @@ export interface DataTableActionsProps<TData> {
     row: TData;
     /** static actions or a factory for per-row actions */
     actions: TableAction<TData>[] | ((row: TData) => TableAction<TData>[]);
-    /** Optional menu label (defaults to strings.actions.triggerLabel) */
+    /** Accessible name of the More actions trigger. Defaults to `strings.actions.menuLabel`. */
     menuLabel?: string;
     /** Display mode: always menu, always inline, or auto by breakpoint (default: 'menu' to preserve behavior) */
     displayMode?: 'menu' | 'inline' | 'auto';

package/dist/components/layout/page/index.d.ts

@@ -1,4 +1,4 @@
 export { Page } from './page';
 export { PageHeader } from './partials/page-header';
 export { PageActions } from './partials/page-actions';
-export { defaultPageActionsStrings, type PageHeaderAction, type PageHeaderProps, type PageHeaderSlots, type PageActionsProps, type PageActionsDisplay, type PageAction, type PageActionContext, type PageActionsStrings, type PageProps, type PageSlotProps, } from './page.types';
+export { defaultPageActionsStrings, type PageHeaderAction, type PageHeaderProps, type PageHeaderSlots, type PageHeaderTabs, type PageActionsProps, type PageActionsDisplay, type PageAction, type PageActionContext, type PageActionsStrings, type PageProps, type PageSlotProps, } from './page.types';

package/dist/components/layout/page/page.types.d.ts

@@ -11,6 +11,8 @@ import type { ContainerGutter, ContainerMaxWidth, ContainerProps } from '../cont
 import type { StringsProp } from '../../../lib/strings';
 import type { BadgeTone } from '../../base/badge';
 import type { ActionPresentation } from '../../../lib/action-presentation';
+import type { PageHeaderAction } from '../../base/navigation/page-header';
+import type { OverflowTabItem } from '../../base/navigation';
 export interface PageTitleBadge {
     /** Display label. */
     label: ReactNode;
@@ -18,39 +20,22 @@ export interface PageTitleBadge {
     tone?: BadgeTone;
     key?: Key;
 }
-/**
- * A page command described by its role. `primaryAction` and `secondaryActions`
- * choose the treatment, so a command carries no tone or button style.
- */
-export interface PageHeaderAction {
-    /** Stable key. Defaults to the command's position. */
-    id?: string;
-    /** Visible command text. */
-    label: ReactNode;
-    /** Runs the command. When both are set, `onClick` wins over `href`. */
-    onClick?: () => void;
-    /** Navigates through the header's `renderLink` instead of running a callback. */
-    href?: string;
-    target?: string;
-    rel?: string;
-    /** Marks the destination as leaving the app; forwarded to `renderLink`. */
-    external?: boolean;
-    /** Leading glyph. Pass a Lucide icon component. */
-    icon?: ComponentType<{
-        className?: string;
-    }>;
-    /** Shows the pending indicator and blocks activation. */
-    loading?: boolean;
-    /** Blocks activation while keeping the command visible. */
-    disabled?: boolean;
-    /** Set false to omit the command, for example without permission. */
-    visible?: boolean;
+export type { PageHeaderAction } from '../../base/navigation/page-header';
+/** Section tabs under a record's header. */
+export interface PageHeaderTabs {
+    /** Sections in order. `badge` shows a count chip beside the label. */
+    items: OverflowTabItem[];
+    /** Id of the active section. */
+    value?: string;
     /**
-     * Irreversible or harmful command. A destructive secondary command moves to
-     * the More actions menu; a destructive primary command keeps its place with
-     * the destructive treatment. Confirm it from the handler, e.g. ConfirmDialog.
+     * Fired with the id of the chosen section. Switch the content or route here;
+     * an item `href` renders a native link.
      */
-    destructive?: boolean;
+    onValueChange?: (id: string) => void;
+    /** Accessible name of the tab list. Default: `'Sections'`. */
+    label?: string;
+    /** Label of the trigger that holds tabs which do not fit. Default: `'More'`. */
+    moreLabel?: string;
 }
 export interface PageHeaderSlots {
     /** Replaces the leading back control entirely. */
@@ -89,18 +74,25 @@ export interface PageHeaderProps extends LayoutNavigationAdapter {
     /** Chips shown beside the page title. */
     titleBadges?: PageTitleBadge[];
     /**
-     * The page's one main command: a solid primary button at the trailing end,
-     * visible at every width.
+     * The page's one main command: a solid primary button after the secondary
+     * commands, visible at every width.
      */
     primaryAction?: PageHeaderAction;
     /**
      * Supporting commands in priority order. The first two render as outline
-     * buttons; the rest, and every destructive command, move into the More
-     * actions menu. Below `sm`, all secondary commands collapse into that menu.
+     * buttons before the primary command; the rest, and every destructive
+     * command, move into the More actions menu, which always closes the row.
+     * Below `sm`, all secondary commands collapse into that menu.
      */
     secondaryActions?: readonly PageHeaderAction[];
     /** Accessible name of the More actions menu trigger. */
     moreActionsLabel?: string;
+    /**
+     * Section tabs under the header, for a record split into sections such as
+     * documents and history. Tabs that do not fit move into a More menu, and
+     * the active tab stays visible.
+     */
+    tabs?: PageHeaderTabs;
     /**
      * Custom controls before the role-based commands, such as a period select.
      * Prefer `primaryAction` and `secondaryActions` for commands.
@@ -121,6 +113,7 @@ export interface PageActionContext {
     isInline: boolean;
     renderLink: LayoutLinkRenderer;
 }
+/** @deprecated Use PageHeaderAction with `primaryAction` and `secondaryActions`. */
 export interface PageAction extends ActionPresentation {
     id?: string;
     /** Display label. */
@@ -154,7 +147,11 @@ export interface PageActionsProps extends LayoutNavigationAdapter {
     actions?: PageAction[];
     /** How actions are presented — inline, menu, or responsive. */
     display?: PageActionsDisplay;
-    /** Inline action button scale. Defaults to `sm`; set `md` for normal page-header buttons. */
+    /**
+     * Inline action button scale, which the More actions square beside them
+     * matches. Defaults to `sm`; set `md` for normal page-header buttons. A
+     * menu-only ribbon follows the provider scale.
+     */
     size?: ButtonSize;
     /** Width at which responsive actions collapse into a menu. */
     breakpoint?: number;

package/dist/components/layout/page/partials/page-actions.d.ts

@@ -1,2 +1,3 @@
 import { type PageActionsProps } from '../page.types';
+/** @deprecated Pass page commands as `primaryAction` and `secondaryActions`; use ActionButtons for a toolbar row. */
 export declare function PageActions({ actions, display, size, breakpoint, maxInlineActions, renderLink, strings: stringsProp, className, inlineClassName, menuClassName, renderAction, }: PageActionsProps): import("react").JSX.Element | null;

package/dist/components/layout/page/partials/page-header.d.ts

@@ -1,2 +1,2 @@
 import type { PageHeaderProps } from '../page.types';
-export declare function PageHeader({ title, description, textGap, headingTag, titleIcon: TitleIcon, titleIconHref, onTitleIconClick, titleIconLabel, backHref, onBack, backLabel, titleBadges, primaryAction, secondaryActions, moreActionsLabel, actions, slots, renderLink, className, contentClassName, actionsClassName, titleClassName, titleIconClassName, descriptionClassName, }: PageHeaderProps): import("react").JSX.Element;
+export declare function PageHeader({ title, description, textGap, headingTag, titleIcon: TitleIcon, titleIconHref, onTitleIconClick, titleIconLabel, backHref, onBack, backLabel, titleBadges, primaryAction, secondaryActions, moreActionsLabel, tabs, actions, slots, renderLink, className, contentClassName, actionsClassName, titleClassName, titleIconClassName, descriptionClassName, }: PageHeaderProps): import("react").JSX.Element;

package/dist/components/layout/settings/settings.d.ts

@@ -1,4 +1,5 @@
 import type { ComponentType, ReactNode } from 'react';
+import { type PageHeaderAction } from '../../base/navigation/page-header/page-header-commands';
 import { type StringsProp } from '../../../lib/strings';
 import { type LayoutNavigationAdapter } from '../layout.types';
 export interface AsideNavShellStrings {
@@ -45,8 +46,21 @@ export interface AsideNavShellProps extends LayoutNavigationAdapter {
     children?: ReactNode;
     /** Content beside the main settings panel. */
     aside?: ReactNode;
-    /** Controls offered on the surface. */
+    /**
+     * Non-command controls beside the title, such as a scope select. They
+     * render before the role-based commands.
+     */
     actions?: ReactNode;
+    /** The page's one main command: a solid primary button, visible at every width. */
+    primaryAction?: PageHeaderAction;
+    /**
+     * Supporting commands in priority order, as in Page headers: the first two
+     * render as outline buttons before the primary command; the rest, and every
+     * destructive command, move into the More actions menu, which closes the row.
+     */
+    secondaryActions?: readonly PageHeaderAction[];
+    /** Accessible name of the More actions menu trigger. Default: `'More actions'`. */
+    moreActionsLabel?: string;
     /** Content below the body. */
     footer?: ReactNode;
     className?: string;
@@ -58,7 +72,7 @@ export interface AsideNavShellProps extends LayoutNavigationAdapter {
     strings?: StringsProp<AsideNavShellStrings>;
 }
 export type SettingsShellProps = AsideNavShellProps;
-export declare function AsideNavShell({ title, description, groups, currentId, currentPath, children, aside, actions, footer, className, navClassName, contentClassName, renderLink, strings: stringsProp, }: AsideNavShellProps): import("react").JSX.Element;
+export declare function AsideNavShell({ title, description, groups, currentId, currentPath, children, aside, actions, primaryAction, secondaryActions, moreActionsLabel, footer, className, navClassName, contentClassName, renderLink, strings: stringsProp, }: AsideNavShellProps): import("react").JSX.Element;
 export declare namespace AsideNavShell {
     var displayName: string;
 }

package/dist/components/layout/workspace/workspace.types.d.ts

@@ -2,6 +2,7 @@ import type { CSSProperties, HTMLAttributes, MouseEvent, ReactNode } from 'react
 import type { LayoutIconComponent, LayoutNavigationAdapter } from '../layout.types';
 import type { StringsProp } from '../../../lib/strings';
 import type { TextGap } from '../../base/structure';
+import type { PageHeaderAction } from '../../base/navigation/page-header';
 import type { WorkspaceLocaleStripStrings, WorkspaceNavStrings, WorkspaceRecordHeaderStrings } from './workspace.strings';
 export type WorkspaceContentWidth = 'default' | 'wide' | 'full';
 export interface WorkspaceLayoutStyle extends CSSProperties {
@@ -42,7 +43,7 @@ export interface WorkspaceRecordHeaderMetadataItem {
     /** Current value. Controlled. */
     value: ReactNode;
 }
-export interface WorkspaceRecordHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+export interface WorkspaceRecordHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>, LayoutNavigationAdapter {
     /** Title/supporting-copy rhythm. Defaults to dense. */
     textGap?: TextGap;
     /** Surface title. */
@@ -53,10 +54,26 @@ export interface WorkspaceRecordHeaderProps extends Omit<HTMLAttributes<HTMLDivE
     badges?: ReactNode;
     /** Label/value facts under the record title. */
     metadata?: WorkspaceRecordHeaderMetadataItem[];
-    /** Controls offered on the surface. */
+    /**
+     * Non-command controls, such as a locale or period select. They render
+     * before the role-based commands.
+     */
     actions?: ReactNode;
-    /** Lower-emphasis controls beside the primary action. */
-    secondaryActions?: ReactNode;
+    /**
+     * The record's one main command: a solid primary button after the secondary
+     * commands, visible at every width.
+     */
+    primaryAction?: PageHeaderAction;
+    /**
+     * Supporting commands in priority order, as in Page headers: the first two
+     * render as outline buttons before the primary command; the rest, and every
+     * destructive command, move into the More actions menu, which closes the
+     * row. Rendered elements are still accepted for existing headers; pass
+     * command objects instead.
+     */
+    secondaryActions?: ReactNode | readonly PageHeaderAction[];
+    /** Accessible name of the More actions menu trigger. Default: `'More actions'`. */
+    moreActionsLabel?: string;
     /** Current state, shown as a chip. */
     status?: ReactNode;
     /** Illustration or imagery beside the form. */

package/dist/components/typography/rich-text/index.d.ts

@@ -1,2 +1,2 @@
 export { RichText } from './rich-text';
-export type { RichTextProps } from './rich-text';
+export type { RichTextProps, RichTextImageRendering, RichTextImageAttributes, RenderRichTextImage } from './rich-text';

package/dist/components/typography/rich-text/rich-text-tree.d.ts

@@ -0,0 +1,19 @@
+import { type ReactNode } from 'react';
+import type { Root } from 'hast';
+/** An image in sanitized rich text, as handed to `renderImage`. */
+export interface RichTextImageAttributes {
+    /** Source that passed the package image policy (http, https, blob or relative). */
+    src: string;
+    /** Text alternative; empty for a decorative image. */
+    alt: string;
+    title?: string;
+    width?: number;
+    height?: number;
+}
+export type RenderRichTextImage = (image: RichTextImageAttributes) => ReactNode;
+/**
+ * Renders an already sanitized tree as React elements, so each image can be
+ * the consumer's own component (a framework image, a lightbox trigger) while
+ * the surrounding markup keeps its structure. Server and client output match.
+ */
+export declare function renderRichTextTree(tree: Root, renderImage: RenderRichTextImage): ReactNode;

package/dist/components/typography/rich-text/rich-text.d.ts

@@ -1,6 +1,22 @@
 import type { TextProps } from '../text';
+import { type RenderRichTextImage } from './rich-text-tree';
+export type { RenderRichTextImage, RichTextImageAttributes } from './rich-text-tree';
+/** Image rendering for read-only rich text. */
+export interface RichTextImageRendering {
+    /**
+     * Renders each image, for example with a framework image component. It
+     * receives only sources that passed the package image policy.
+     */
+    renderImage?: RenderRichTextImage;
+}
 export interface RichTextProps extends Omit<TextProps, 'children' | 'content' | 'dangerouslySetInnerHTML'> {
     /** HTML sanitized through the package allowlist before rendering. */
     html?: string | null;
+    /**
+     * Keeps images whose source is a web URL, a `blob:` preview or a relative
+     * path (script and `data:` sources are removed). Pass `renderImage` to draw
+     * each image with your own component. Default: images are removed.
+     */
+    images?: boolean | RichTextImageRendering;
 }
 export declare const RichText: import("react").ForwardRefExoticComponent<RichTextProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/typography/text-link.d.ts

@@ -3,11 +3,12 @@ import type { TextProps } from './text';
 /**
  * Inline-link mechanics shared by `TextLink` and the link primitives. As a flex
  * or grid item the link hugs its text, so neither the hit area nor the focus
- * ring stretches across the row. The full-strength ring uses the small radius
- * role and follows every line of a wrapped link. Links keep one colour whether
+ * ring stretches across the row. The shared focus edge sits just outside the
+ * glyphs inside the soft halo, uses the small radius role and follows every line
+ * of a wrapped link. Links keep one colour whether
  * or not they were visited: the role colour is explicit.
  */
-export declare const inlineLinkClassName = "w-fit max-w-full rounded-radius-xs outline-none box-decoration-clone transition-colors motion-reduce:transition-none focus-visible:ring-2 focus-visible:ring-ring";
+export declare const inlineLinkClassName: string;
 /** Underline geometry shared with content links: proportional to the text size. */
 export declare const linkUnderlineClassName = "underline decoration-current underline-offset-[0.2em]";
 export interface TextLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'type'>, Pick<TextProps, 'type' | 'size' | 'weight' | 'align' | 'lineHeight'> {

package/dist/components/ui/checkbox.d.ts

@@ -3,9 +3,10 @@ export interface CheckboxProps extends Omit<CheckboxPrimitive.Root.Props, 'onCha
     onCheckedChange?: (checked: boolean | 'indeterminate') => void;
 }
 /**
- * Raw checkbox recipe. The boundary is the shared `--input` control border
- * (3:1 on every surface), focus is the shared full-strength ring, and invalid
- * follows the field-state contract (soft halo, full-strength ring on focus).
+ * Raw checkbox recipe. The boundary is the shared `--input` control border, the
+ * same one every field and outline button draws; focus is the shared focus frame,
+ * and invalid follows the field-state contract (destructive border, destructive
+ * halo on focus). Checked and invalid borders win over the focus border.
  */
 declare function Checkbox({ className, onCheckedChange, ...props }: CheckboxProps): import("react").JSX.Element;
 export { Checkbox };

package/dist/components/ui/overlay.recipes.d.ts

@@ -1,15 +1,6 @@
-import * as React from 'react';
 /**
  * One modal scrim recipe: a plain tint from the shared semantic token. No
  * backdrop blur — the page behind a modal stays recognisable and the tint alone
  * separates the surface.
  */
 export declare const modalBackdropRecipe = "fixed inset-0 z-50 bg-(--overlay-backdrop)";
-/**
- * Marks which edges of a scrolling modal region are hiding content:
- * `data-scroll-start` while content is scrolled out above, `data-scroll-end`
- * while more content remains below. The modal region recipe draws a rule only
- * on those edges, so a body that fits draws none. Attributes are written to the
- * node directly, so scrolling never re-renders the region.
- */
-export declare function useScrollEdges<T extends HTMLElement>(forwardedRef?: React.Ref<T>): React.RefCallback<T>;

package/dist/components/ui/switch.d.ts

@@ -1,8 +1,8 @@
 import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
 /**
  * Raw switch recipe. The unchecked track is the shared `--input` control
- * boundary; focus is the shared full-strength 2px ring. Invalid keeps the soft
- * destructive halo and turns it full strength on focus, like the field frames.
+ * boundary; focus is the shared focus frame, and invalid follows the field-state
+ * contract (destructive border, destructive halo on focus) like every field.
  */
 declare function Switch({ className, size, ...props }: SwitchPrimitive.Root.Props & {
     size?: "sm" | "default";

package/dist/{containers-D_L4mTVb.js → containers-DmWiJa2I.js}

@@ -1,63 +1,64 @@
 "use client";
-import { t as e } from "./utils-Cospvlj1.js";
-import { o as t } from "./structure.recipes-EPz60cU8.js";
-import { t as n } from "./container.recipes-D9t8MHR3.js";
-import { forwardRef as r } from "react";
-import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
-import { useRender as s } from "@base-ui/react/use-render";
+import { t as e } from "./utils-l5LpDw2z.js";
+import { t } from "./focus-recipes-B653VaLq.js";
+import { o as n } from "./structure.recipes-EPz60cU8.js";
+import { t as r } from "./container.recipes-D9t8MHR3.js";
+import { forwardRef as i } from "react";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+import { useRender as c } from "@base-ui/react/use-render";
 //#region src/components/layout/containers/content-container.tsx
-var c = r(function({ className: t, maxWidth: r, gutter: i, render: a, ...o }, c) {
-	return s({
+var l = i(function({ className: t, maxWidth: n, gutter: i, render: a, ...o }, s) {
+	return c({
 		defaultTagName: "div",
-		ref: c,
+		ref: s,
 		render: a,
 		props: {
 			...o,
-			className: e("container--component @container/content", n({
-				maxWidth: r,
+			className: e("container--component @container/content", r({
+				maxWidth: n,
 				gutter: i
 			}), t)
 		},
 		state: {}
 	});
 });
-c.displayName = "Container";
+l.displayName = "Container";
 //#endregion
 //#region src/components/layout/containers/page-viewport.tsx
-var l = r(function({ className: t, render: n, tabIndex: r = 0, ...i }, a) {
-	return s({
+var u = i(function({ className: n, render: r, tabIndex: i = 0, ...a }, o) {
+	return c({
 		defaultTagName: "div",
-		ref: a,
-		render: n,
+		ref: o,
+		render: r,
 		props: {
-			...i,
-			tabIndex: r,
-			className: e("page-viewport--component min-h-0 min-w-0 flex-1 overflow-auto overscroll-contain [scrollbar-gutter:stable] @container/page focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset", t)
+			...a,
+			tabIndex: i,
+			className: e(`page-viewport--component min-h-0 min-w-0 flex-1 overflow-auto overscroll-contain [scrollbar-gutter:stable] @container/page focus-visible:outline-none ${t.inset}`, n)
 		},
 		state: {}
 	});
 });
-l.displayName = "PageViewport";
+u.displayName = "PageViewport";
 //#endregion
 //#region src/components/layout/containers/section.tsx
-var u = r(function({ className: n, gap: r, render: i, ...a }, o) {
-	return s({
+var d = i(function({ className: t, gap: r, render: i, ...a }, o) {
+	return c({
 		defaultTagName: "section",
 		ref: o,
 		render: i,
 		props: {
 			...a,
-			className: e("section--component", t({ gap: r ?? "xl" }), n)
+			className: e("section--component", n({ gap: r ?? "xl" }), t)
 		},
 		state: {}
 	});
 });
-u.displayName = "Section";
+d.displayName = "Section";
 //#endregion
 //#region src/components/layout/containers/two-column-layout.tsx
-var d = r(function({ header: t, main: n, aside: r, footer: c, stickyAside: l = !1, adaptTo: u = "viewport", slotProps: d, className: f, render: p, ...m }, h) {
+var f = i(function({ header: t, main: n, aside: r, footer: i, stickyAside: l = !1, adaptTo: u = "viewport", slotProps: d, className: f, render: p, ...m }, h) {
 	let { className: g, ..._ } = d?.header ?? {}, { className: v, ...y } = d?.main ?? {}, { className: b, ...x } = d?.aside ?? {}, { className: S, ...C } = d?.footer ?? {};
-	return s({
+	return c({
 		defaultTagName: "div",
 		ref: h,
 		render: p,
@@ -65,38 +66,38 @@ var d = r(function({ header: t, main: n, aside: r, footer: c, stickyAside: l = !
 			...m,
 			"data-slot": "two-column-layout",
 			className: e("two-column-layout--component grid min-w-0 grid-cols-1 gap-space-2xl", u === "container" ? "@3xl:grid-cols-[minmax(0,2fr)_minmax(18rem,1fr)]" : "lg:grid-cols-[minmax(0,2fr)_minmax(18rem,1fr)]", f),
-			children: /* @__PURE__ */ o(i, { children: [
-				t == null ? null : /* @__PURE__ */ a("div", {
+			children: /* @__PURE__ */ s(a, { children: [
+				t == null ? null : /* @__PURE__ */ o("div", {
 					..._,
 					"data-slot": "two-column-layout-header",
 					className: e("two-column-layout--header col-span-full min-w-0", g),
 					children: t
 				}),
-				/* @__PURE__ */ a("div", {
+				/* @__PURE__ */ o("div", {
 					...y,
 					"data-slot": "two-column-layout-main",
 					className: e("two-column-layout--main min-h-0 min-w-0", v),
 					children: n
 				}),
-				/* @__PURE__ */ a("aside", {
+				/* @__PURE__ */ o("aside", {
 					...x,
 					"data-slot": "two-column-layout-aside",
 					className: e("two-column-layout--aside min-h-0 min-w-0", l && (u === "container" ? "@3xl:sticky @3xl:top-space-2xl @3xl:self-start" : "lg:sticky lg:top-space-2xl lg:self-start"), b),
 					children: r
 				}),
-				c == null ? null : /* @__PURE__ */ a("div", {
+				i == null ? null : /* @__PURE__ */ o("div", {
 					...C,
 					"data-slot": "two-column-layout-footer",
 					className: e("two-column-layout--footer col-span-full min-w-0", S),
-					children: c
+					children: i
 				})
 			] })
 		},
 		state: {}
 	});
 });
-d.displayName = "TwoColumnLayout";
+f.displayName = "TwoColumnLayout";
 //#endregion
-export { c as i, u as n, l as r, d as t };
+export { l as i, d as n, u as r, f as t };
 
-//# sourceMappingURL=containers-D_L4mTVb.js.map
+//# sourceMappingURL=containers-DmWiJa2I.js.map

package/dist/containers-DmWiJa2I.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"containers-DmWiJa2I.js","names":["_Fragment","cn","stackRecipe","containerRecipe","Fragment$1","Container","forwardRef","props","useRender","className","PageViewport","focusRecipes","Section","gap","TwoColumnLayout","headerClassName","headerProps","slotProps","mainClassName","mainProps","asideClassName","asideProps","footerClassName","footerProps","adaptTo","header","main","stickyAside","aside","footer"],"sources":["../src/components/layout/containers/content-container.tsx","../src/components/layout/containers/page-viewport.tsx","../src/components/layout/containers/section.tsx","../src/components/layout/containers/two-column-layout.tsx"],"sourcesContent":["import { useRender } from '@base-ui/react/use-render';\nimport { forwardRef } from 'react';\n\nimport { cn } from '../../../lib/utils';\n\nimport { containerRecipe } from './container.recipes';\nimport type { ContainerProps } from './containers.types';\n\n/** Container — one centered content-width and inline-gutter owner. */\nexport const Container = forwardRef<HTMLDivElement, ContainerProps>(function Container(\n\t{ className, maxWidth, gutter, render, ...props },\n\tref,\n) {\n\treturn useRender({\n\t\tdefaultTagName: 'div',\n\t\tref,\n\t\trender,\n\t\tprops: {\n\t\t\t...props,\n\t\t\tclassName: cn('container--component @container/content', containerRecipe({ maxWidth, gutter }), className),\n\t\t},\n\t\tstate: {},\n\t});\n});\n\nContainer.displayName = 'Container';\n","import { useRender } from '@base-ui/react/use-render';\nimport { forwardRef } from 'react';\n\nimport { cn } from '../../../lib/utils';\n\nimport type { PageViewportProps } from './containers.types';\nimport { focusRecipes } from '../../../lib/focus-recipes';\n\n/** PageViewport — the single page-scroll and page-container-query owner. */\nexport const PageViewport = forwardRef<HTMLDivElement, PageViewportProps>(function PageViewport(\n\t{ className, render, tabIndex = 0, ...props },\n\tref,\n) {\n\treturn useRender({\n\t\tdefaultTagName: 'div',\n\t\tref,\n\t\trender,\n\t\tprops: {\n\t\t\t...props,\n\t\t\ttabIndex,\n\t\t\tclassName: cn(\n\t\t\t\t`page-viewport--component min-h-0 min-w-0 flex-1 overflow-auto overscroll-contain [scrollbar-gutter:stable] @container/page focus-visible:outline-none ${focusRecipes.inset}`,\n\t\t\t\tclassName,\n\t\t\t),\n\t\t},\n\t\tstate: {},\n\t});\n});\n\nPageViewport.displayName = 'PageViewport';\n","import { useRender } from '@base-ui/react/use-render';\nimport { forwardRef } from 'react';\n\nimport { stackRecipe } from '../../base/structure/structure.recipes';\nimport { cn } from '../../../lib/utils';\n\nimport type { SectionProps } from './containers.types';\n\n/** Section — a semantic vertical-rhythm owner for page content groups. */\nexport const Section = forwardRef<HTMLElement, SectionProps>(function Section(\n\t{ className, gap, render, ...props },\n\tref,\n) {\n\treturn useRender({\n\t\tdefaultTagName: 'section',\n\t\tref,\n\t\trender,\n\t\tprops: {\n\t\t\t...props,\n\t\t\tclassName: cn('section--component', stackRecipe({ gap: gap ?? 'xl' }), className),\n\t\t},\n\t\tstate: {},\n\t});\n});\n\nSection.displayName = 'Section';\n","import { useRender } from '@base-ui/react/use-render';\nimport { forwardRef } from 'react';\nimport type { ReactNode } from 'react';\n\nimport { cn } from '../../../lib/utils';\nimport type { LayoutSlotAttributes } from '../layout.types';\n\nexport interface TwoColumnLayoutSlotProps {\n\theader?: LayoutSlotAttributes<HTMLDivElement>;\n\tmain?: LayoutSlotAttributes<HTMLDivElement>;\n\taside?: LayoutSlotAttributes<HTMLElement>;\n\tfooter?: LayoutSlotAttributes<HTMLDivElement>;\n}\n\nexport interface TwoColumnLayoutProps extends useRender.ComponentProps<'div'> {\n\t/** Optional content spanning both columns before the work regions. */\n\theader?: ReactNode;\n\t/** Primary detail, form, or index content. */\n\tmain: ReactNode;\n\t/** Secondary summary, support, or action rail. */\n\taside: ReactNode;\n\t/** Optional content spanning both columns after the work regions. */\n\tfooter?: ReactNode;\n\t/** Keep the aside visible while the nearest page viewport scrolls. */\n\tstickyAside?: boolean;\n\t/** Preserve viewport breakpoints by default, or adapt inside Container/PageViewport. */\n\tadaptTo?: 'viewport' | 'container';\n\t/** Native attributes for each stable region. */\n\tslotProps?: TwoColumnLayoutSlotProps;\n}\n\n/** TwoColumnLayout — one truthful, stable-order main/aside grid. */\nexport const TwoColumnLayout = forwardRef<HTMLDivElement, TwoColumnLayoutProps>(\n\tfunction TwoColumnLayout(\n\t\t{\n\t\t\theader,\n\t\t\tmain,\n\t\t\taside,\n\t\t\tfooter,\n\t\t\tstickyAside = false,\n\t\t\tadaptTo = 'viewport',\n\t\t\tslotProps,\n\t\t\tclassName,\n\t\t\trender,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) {\n\t\tconst { className: headerClassName, ...headerProps } = slotProps?.header ?? {};\n\t\tconst { className: mainClassName, ...mainProps } = slotProps?.main ?? {};\n\t\tconst { className: asideClassName, ...asideProps } = slotProps?.aside ?? {};\n\t\tconst { className: footerClassName, ...footerProps } = slotProps?.footer ?? {};\n\n\t\treturn useRender({\n\t\t\tdefaultTagName: 'div',\n\t\t\tref,\n\t\t\trender,\n\t\t\tprops: {\n\t\t\t\t...props,\n\t\t\t\t'data-slot': 'two-column-layout',\n\t\t\t\tclassName: cn(\n\t\t\t\t\t'two-column-layout--component grid min-w-0 grid-cols-1 gap-space-2xl',\n\t\t\t\t\tadaptTo === 'container' ? '@3xl:grid-cols-[minmax(0,2fr)_minmax(18rem,1fr)]' : 'lg:grid-cols-[minmax(0,2fr)_minmax(18rem,1fr)]',\n\t\t\t\t\tclassName,\n\t\t\t\t),\n\t\t\t\tchildren: (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{header !== undefined && header !== null ? (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t{...headerProps}\n\t\t\t\t\t\t\t\tdata-slot=\"two-column-layout-header\"\n\t\t\t\t\t\t\t\tclassName={cn('two-column-layout--header col-span-full min-w-0', headerClassName)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{header}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t{...mainProps}\n\t\t\t\t\t\t\tdata-slot=\"two-column-layout-main\"\n\t\t\t\t\t\t\tclassName={cn('two-column-layout--main min-h-0 min-w-0', mainClassName)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{main}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<aside\n\t\t\t\t\t\t\t{...asideProps}\n\t\t\t\t\t\t\tdata-slot=\"two-column-layout-aside\"\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t'two-column-layout--aside min-h-0 min-w-0',\n\t\t\t\t\t\t\t\tstickyAside && (adaptTo === 'container' ? '@3xl:sticky @3xl:top-space-2xl @3xl:self-start' : 'lg:sticky lg:top-space-2xl lg:self-start'),\n\t\t\t\t\t\t\t\tasideClassName,\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{aside}\n\t\t\t\t\t\t</aside>\n\t\t\t\t\t\t{footer !== undefined && footer !== null ? (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t{...footerProps}\n\t\t\t\t\t\t\t\tdata-slot=\"two-column-layout-footer\"\n\t\t\t\t\t\t\t\tclassName={cn('two-column-layout--footer col-span-full min-w-0', footerClassName)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{footer}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) : null}\n\t\t\t\t\t</>\n\t\t\t\t),\n\t\t\t},\n\t\t\tstate: {},\n\t\t});\n\t},\n);\n\nTwoColumnLayout.displayName = 'TwoColumnLayout';\n"],"mappings":";;;;;;;;;AASA,IAAaK,IAAYC,EAA2C,SACnE,EAAE,cAAW,aAAU,WAAQ,WAAQ,GAAGC,KAC1C,GACC;CACD,OAAOC,EAAU;EAChB,gBAAgB;EAChB;EACA;EACA,OAAO;GACN,GAAGD;GACH,WAAWN,EAAG,2CAA2CE,EAAgB;IAAE;IAAU;GAAO,CAAC,GAAGM,CAAS;EAC1G;EACA,OAAO,CAAC;CACT,CAAC;AACF,CAAC;AAED,EAAU,cAAc;;;AChBxB,IAAaC,IAAeJ,EAA8C,SACzE,EAAE,cAAW,WAAQ,cAAW,GAAG,GAAGC,KACtC,GACC;CACD,OAAOC,EAAU;EAChB,gBAAgB;EAChB;EACA;EACA,OAAO;GACN,GAAGD;GACH;GACA,WAAWN,EACV,yJAAyJU,EAAa,SACtKF,CACD;EACD;EACA,OAAO,CAAC;CACT,CAAC;AACF,CAAC;AAED,EAAa,cAAc;;;ACpB3B,IAAaG,IAAUN,EAAsC,SAC5D,EAAE,cAAW,QAAK,WAAQ,GAAGC,KAC7B,GACC;CACD,OAAOC,EAAU;EAChB,gBAAgB;EAChB;EACA;EACA,OAAO;GACN,GAAGD;GACH,WAAWN,EAAG,sBAAsBC,EAAY,EAAE,KAAKW,KAAO,KAAK,CAAC,GAAGJ,CAAS;EACjF;EACA,OAAO,CAAC;CACT,CAAC;AACF,CAAC;AAED,EAAQ,cAAc;;;ACOtB,IAAaK,IAAkBR,EAC9B,SACC,EACC,WACA,SACA,UACA,WACA,iBAAc,IACd,aAAU,YACV,cACA,cACA,WACA,GAAGC,KAEJ,GACC;CACD,IAAM,EAAE,WAAWQ,GAAiB,GAAGC,MAAgBC,GAAW,UAAU,CAAC,GACvE,EAAE,WAAWC,GAAe,GAAGC,MAAcF,GAAW,QAAQ,CAAC,GACjE,EAAE,WAAWG,GAAgB,GAAGC,MAAeJ,GAAW,SAAS,CAAC,GACpE,EAAE,WAAWK,GAAiB,GAAGC,MAAgBN,GAAW,UAAU,CAAC;CAE7E,OAAOT,EAAU;EAChB,gBAAgB;EAChB;EACA;EACA,OAAO;GACN,GAAGD;GACH,aAAa;GACb,WAAWN,EACV,uEACAuB,MAAY,cAAc,qDAAqD,kDAC/Ef,CACD;GACA,UACC,kBAAAT,GAAA,EAAA,UAAA;IACEyB,KAAmC,OAQhC,OAPH,kBAAC,OAAD;KACC,GAAIT;KACJ,aAAU;KACV,WAAWf,EAAG,mDAAmDc,CAAe;KAE/E,UAAAU;IACG,CAAA;IAEN,kBAAC,OAAD;KACC,GAAIN;KACJ,aAAU;KACV,WAAWlB,EAAG,2CAA2CiB,CAAa;KAErE,UAAAQ;IACG,CAAA;IACL,kBAAC,SAAD;KACC,GAAIL;KACJ,aAAU;KACV,WAAWpB,EACV,4CACA0B,MAAgBH,MAAY,cAAc,mDAAmD,6CAC7FJ,CACD;KAEC,UAAAQ;IACK,CAAA;IACNC,KAAmC,OAQhC,OAPH,kBAAC,OAAD;KACC,GAAIN;KACJ,aAAU;KACV,WAAWtB,EAAG,mDAAmDqB,CAAe;KAE/E,UAAAO;IACG,CAAA;GAEL,EAAA,CAAA;EAEJ;EACA,OAAO,CAAC;CACT,CAAC;AACF,CACD;AAEA,EAAgB,cAAc"}

package/dist/{copyable-DDjTeW_j.js → copyable-B3Gwgdqc.js}

@@ -1,8 +1,8 @@
 "use client";
 import { useStrings as e } from "./lib/strings.js";
-import { t } from "./utils-Cospvlj1.js";
-import { s as n } from "./typography-CAr3dQhX.js";
-import { t as r } from "./button-BS3KDg00.js";
+import { t } from "./utils-l5LpDw2z.js";
+import { n } from "./buttons-SbIcm1HJ.js";
+import { s as r } from "./typography-DTRkE9zL.js";
 import { forwardRef as i, useEffect as a, useState as o } from "react";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
 import { Check as l, Copy as u } from "lucide-react";
@@ -33,12 +33,12 @@ var f = {
 		...S,
 		children: [/* @__PURE__ */ s("span", {
 			className: "copyable--content min-w-0 text-link-color",
-			children: O ? p : /* @__PURE__ */ s(n, {
+			children: O ? p : /* @__PURE__ */ s(r, {
 				tag: "span",
 				className: t(m && "font-mono", h && "block truncate", "text-link-color", _),
 				children: p ?? i
 			})
-		}), /* @__PURE__ */ s(r, {
+		}), /* @__PURE__ */ s(n, {
 			...j,
 			type: "button",
 			size: "sm",
@@ -62,4 +62,4 @@ p.displayName = "Copyable";
 //#endregion
 export { f as n, p as t };
 
-//# sourceMappingURL=copyable-DDjTeW_j.js.map
+//# sourceMappingURL=copyable-B3Gwgdqc.js.map