themelia-react-ui 2.0.0 → 2.0.2

package/dist/components/base/chart/chart.d.ts

@@ -7,10 +7,7 @@
  */
 import * as React from 'react';
 import * as RechartsPrimitive from 'recharts';
-declare const THEMES: {
-    readonly light: "";
-    readonly dark: ".dark";
-};
+type ChartTheme = 'light' | 'dark';
 export type ChartConfig = Record<string, {
     /** Axis label for the hovered position. Supplied by Recharts. */
     label?: React.ReactNode;
@@ -21,7 +18,7 @@ export type ChartConfig = Record<string, {
     theme?: never;
 } | {
     color?: never;
-    theme: Record<keyof typeof THEMES, string>;
+    theme: Record<ChartTheme, string>;
 })>;
 export type ChartPayloadItem = {
     dataKey?: string | number;

package/dist/components/base/choice-inputs/checkbox.d.ts

@@ -4,8 +4,8 @@ import { type CheckboxProps } from '../../ui/checkbox';
  *
  * The primitive renders an inline-flex square, so token size utilities render
  * as a box instead of collapsing to the two border lines. Its boundary is the
- * shared `--input` control border, which keeps 3:1 contrast on every surface in
- * both themes, like the other field and choice controls.
+ * shared `--input` control border, the same one every field, choice control and
+ * outline button draws.
  *
  * The root ref accepts the actual HTMLElement, including custom button renders.
  * The compact corner recipe derives from the shared theme radius, so scoped

package/dist/components/base/choice-inputs/choice-types.d.ts

@@ -55,12 +55,24 @@ export declare const choiceListSizeTokens: Record<ChoiceSize, string>;
 /**
  * Shared option-card states for CardRadioGroup and CardCheckboxGroup: the resting
  * `border-border` divider (declared beside `border` by each owner) steps up to the
- * 3:1 control boundary on hover, and keyboard focus draws the shared full-strength
- * ring. Selection and validation are added by each owner.
+ * control boundary on hover, and keyboard focus draws the shared focus frame.
+ * Selection and validation are added by each owner as data/aria variants, so they
+ * keep their border while focused.
  */
-export declare const choiceCardStateClasses = "hover:border-input focus-visible:ring-2 focus-visible:ring-ring";
+export declare const choiceCardStateClasses: string;
 /** Optional option glyph: one neutral tile in every state, so colour stays for meaning. */
 export declare const choiceCardIconClasses = "inline-flex shrink-0 items-center justify-center rounded-inner bg-muted text-muted-foreground";
-/** Shared selected-card marker and content clearance; derives from action/icon geometry. */
-export declare const choiceCardMarkerClasses = "absolute top-space-sm end-space-sm size-action-sm text-primary-foreground fill-primary stroke-primary-foreground";
-export declare const choiceCardMarkerClearance = "[&>*:not(svg)]:max-w-[calc(100%_-_var(--height-action)*8/9*var(--density-scale))]";
+/**
+ * A control track exactly one label line tall. Pair it with the label's own text
+ * role (size and leading) and align the row to its start: a checkbox, radio,
+ * switch or selection marker then centres on the label's first line at every
+ * scale, whether or not the label wraps.
+ */
+export declare const choiceControlTrackClasses = "flex h-lh shrink-0 items-center";
+/**
+ * Shared selected-card marker, derived from action geometry. It sits in a
+ * `choiceControlTrackClasses` track beside the option label, inside a slot that
+ * keeps its width while unselected so selecting never rewraps the label.
+ */
+export declare const choiceCardMarkerClasses = "size-action-sm shrink-0 text-primary-foreground fill-primary stroke-primary-foreground";
+export declare const choiceCardMarkerSlotClasses = "inline-flex size-action-sm shrink-0 items-center justify-center";

package/dist/components/base/combobox/combobox.strings.d.ts

@@ -0,0 +1,7 @@
+/** Accessible labels owned by the base combobox's generated controls. */
+export interface ComboboxControlStrings {
+    clear: string;
+    toggle: string;
+    remove: string;
+}
+export declare const defaultComboboxControlStrings: ComboboxControlStrings;

package/dist/components/base/combobox/index.d.ts

@@ -2,18 +2,44 @@
  * Base wrapper for `ui/combobox`.
  *
  * This family is the sole importer of `@/components/ui/combobox`: it re-exports
- * the Base UI combobox anatomy untouched so every other layer composes the
- * parts without reaching into `ui/`. The searchable recipe built on top of this
+ * the Base UI combobox anatomy with shared recipes and accessible control labels
+ * so every other layer composes the parts without reaching into `ui/`. The searchable recipe built on top of this
  * anatomy — `Combobox`, `MultiCombobox`, `AsyncResourceCombobox`, and the
  * headless hooks — lives in `features/combobox`.
  *
  * The compound root is exported as `ComboboxRoot` so the canonical `Combobox`
  * name stays with the opinionated feature component.
  */
-export { Combobox as ComboboxRoot, ComboboxInputTrigger, ComboboxValue, ComboboxClear, ComboboxPortal, ComboboxPositioner, ComboboxList, ComboboxItemIndicator, ComboboxEmpty, ComboboxStatus, ComboboxGroup, ComboboxGroupLabel, ComboboxCollection, ComboboxChips, ComboboxChip, ComboboxChipsInput, ComboboxBackdrop, ComboboxArrow, useComboboxFilter, } from '../../ui/combobox';
+export { Combobox as ComboboxRoot, ComboboxValue, ComboboxPortal, ComboboxPositioner, ComboboxList, ComboboxItemIndicator, ComboboxEmpty, ComboboxStatus, ComboboxGroup, ComboboxGroupLabel, ComboboxCollection, ComboboxChips, ComboboxChipsInput, ComboboxBackdrop, ComboboxArrow, useComboboxFilter, } from '../../ui/combobox';
 import { type ComponentProps } from 'react';
-import { ComboboxItem as Item, ComboboxPopup as Popup, ComboboxInput as Input, ComboboxTrigger as Trigger, ComboboxSeparator as Separator } from '../../ui/combobox';
+import { ComboboxItem as Item, ComboboxPopup as Popup, ComboboxInput as Input, ComboboxInputTrigger as InputTrigger, ComboboxClear as Clear, ComboboxChip as Chip, ComboboxTrigger as Trigger, ComboboxSeparator as Separator } from '../../ui/combobox';
 import { type CollectionDensity } from '../popover/popover.recipes';
+import { type StringsProp } from '../../../lib/strings';
+import { type ComboboxControlStrings } from './combobox.strings';
+export { defaultComboboxControlStrings, type ComboboxControlStrings } from './combobox.strings';
+export type ComboboxInputTriggerProps = Omit<ComponentProps<typeof InputTrigger>, 'clearLabel' | 'toggleLabel'> & {
+    /** Accessible labels for the generated clear and toggle buttons. */
+    strings?: StringsProp<Pick<ComboboxControlStrings, 'clear' | 'toggle'>>;
+};
+export declare function ComboboxInputTrigger({ strings: stringsProp, ...props }: ComboboxInputTriggerProps): import("react").FunctionComponentElement<Omit<import("@base-ui/react").AutocompleteInputProps, "size"> & {
+    showClear?: boolean;
+    clearLabel?: string;
+    toggleLabel?: string;
+    size?: import("../../ui/combobox").ComboboxSize;
+    error?: boolean;
+}>;
+export type ComboboxClearProps = ComponentProps<typeof Clear> & {
+    /** Accessible label; an explicit aria-label takes precedence. */
+    strings?: StringsProp<Pick<ComboboxControlStrings, 'clear'>>;
+};
+export declare function ComboboxClear({ strings: stringsProp, ...props }: ComboboxClearProps): import("react").FunctionComponentElement<import("@base-ui/react").AutocompleteClearProps>;
+export type ComboboxChipProps = Omit<ComponentProps<typeof Chip>, 'removeLabel'> & {
+    /** Accessible label for the generated removal button. */
+    strings?: StringsProp<Pick<ComboboxControlStrings, 'remove'>>;
+};
+export declare function ComboboxChip({ strings: stringsProp, ...props }: ComboboxChipProps): import("react").FunctionComponentElement<import("@base-ui/react").ComboboxChipProps & {
+    removeLabel?: string;
+}>;
 export declare function ComboboxPopup({ className, ...props }: ComponentProps<typeof Popup>): import("react").FunctionComponentElement<import("@base-ui/react").AutocompletePopupProps>;
 export declare function ComboboxInput({ className, ...props }: ComponentProps<typeof Input>): import("react").FunctionComponentElement<import("@base-ui/react").AutocompleteInputProps>;
 export declare function ComboboxTrigger({ className, ...props }: ComponentProps<typeof Trigger>): import("react").FunctionComponentElement<import("@base-ui/react").ComboboxTriggerProps>;

package/dist/components/base/display/alert-dialog.d.ts

@@ -4,9 +4,9 @@ import type { TextGap } from '../structure';
  *
  * Not published from any entrypoint: applications use `ConfirmDialog` from
  * `themelia-react-ui/features/overlays`, which owns the decision lifecycle.
- * The surface shares the modal shell, region and typography geometry of the
- * internal Dialog wrapper; the heading sits inside the scrolling body because
- * a confirmation reads as one block above its pinned answers.
+ * The surface shares the modal shell, region, rule and typography geometry of
+ * the internal Dialog wrapper: a pinned heading region, an optional scrolling
+ * body and pinned answers, with one rule between adjacent visible regions.
  */
 import * as React from 'react';
 import { AlertDialog as AlertDialogPrimitive, AlertDialogOverlay, AlertDialogPortal } from '../../ui/alert-dialog';
@@ -17,10 +17,11 @@ export declare const AlertDialogContent: React.ForwardRefExoticComponent<Omit<im
 } & {
     container?: import("../../../lib/theme-scope").ThemePortalContainer;
 }, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export declare const AlertDialogHeader: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "ref"> & {
+export declare const AlertDialogHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     textGap?: TextGap;
+    align?: "start" | "center";
 } & React.RefAttributes<HTMLDivElement>>;
-/** Scroll-owning region above the pinned answers; rules appear only on edges hiding content. */
+/** Scroll-owning region between the pinned heading and the pinned answers. */
 export declare const AlertDialogBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 export declare const AlertDialogFooter: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare const AlertDialogTitle: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AlertDialogTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;

package/dist/components/base/display/dialog.d.ts

@@ -5,9 +5,9 @@ import type { TextGap } from '../structure';
  * Not published from any entrypoint: applications use `ActionDialog` (or
  * `ConfirmDialog`) from `themelia-react-ui/features/overlays`, which owns the
  * lifecycle, focus, dismissal and action contract. This wrapper supplies the
- * modal geometry those features share: one framed popover surface whose shell
- * owns the block inset and the gap between header, scrolling body and footer,
- * as Card does, with no static rules between regions.
+ * modal geometry those features share: one framed popover surface whose
+ * header, scrolling body and footer each own their inset, with exactly one rule
+ * between adjacent visible regions (`modalRegionRecipes`).
  */
 import * as React from 'react';
 import { Dialog as DialogPrimitive, DialogOverlay, DialogPortal } from '../../ui/dialog';
@@ -24,11 +24,7 @@ export declare const DialogContent: React.ForwardRefExoticComponent<Omit<import(
 export declare const DialogHeader: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "ref"> & {
     textGap?: TextGap;
 } & React.RefAttributes<HTMLDivElement>>;
-/**
- * Scroll-owning content region between the pinned dialog header and footer.
- * A rule appears on its top or bottom edge only while content is scrolled out
- * of view there.
- */
+/** Scroll-owning content region between the pinned dialog header and footer. */
 export declare const DialogBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 export declare const DialogFooter: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
     showCloseButton?: boolean;

package/dist/components/base/display/icon-badge/icon-badge.d.ts

@@ -4,7 +4,7 @@
  * coupon checks, conversation initials, search-result tones, AI-bot avatars.
  *
  * Tones reuse the shadcn semantic tokens, with the foreground colour picked
- * to read against a 10–15% background tint (e.g. `bg-success/15 text-success`).
+ * to read against its tone's shared tint (`toneRecipes`, contrast-tested).
  * For a fully-saturated mark (primary fill, inverse foreground), use
  * `tone="primary"` and pass `solid`.
  *

package/dist/components/base/forms/form-sizing.d.ts

@@ -1,4 +1,10 @@
 import type { ComponentScale } from '../../../lib/component-vocabulary';
+/** Ordinary heights for compound frames that retain auto-height and class overrides. */
+export declare const formControlHeightClasses: {
+    sm: string;
+    md: string;
+    lg: string;
+};
 export declare const formControlSizeClasses: {
     sm: string;
     md: string;
@@ -60,20 +66,23 @@ export declare const formControlMinHeightClasses: {
     lg: string;
 };
 /**
- * Canonical "input-shaped trigger" chrome — used by any control that
- * renders as a button-style trigger but visually has to read as a form
- * field (DatePicker, TimePicker, the inner Select inside composite
- * fields, etc.). Mirrors `Input`'s `border-input rounded-inner
- * bg-transparent focus-visible:ring` chrome (no shadow — the library
- * is intentionally flat) plus the size-driven height + horizontal
- * padding.
+ * The one field frame, drawn by `Input` on its native field and by
+ * `formFieldTriggerClasses` on button-shaped triggers: the `--input` boundary,
+ * inner radius, transparent fill (the library is intentionally flat), control
+ * height, editable text size, control padding and the shared focus, invalid and
+ * disabled states. Layout (`flex`, width) stays with each owner.
  *
  * The displayed value is the field's value, so it follows the editable text
- * recipe: on coarse pointers it matches the touch input size of an adjoining
- * `Input` instead of rendering a step smaller.
- *
- * Kept here so the chrome lives in exactly one place — when we tweak
- * the canonical input look, every trigger picks it up.
+ * recipe: on coarse pointers a trigger matches the touch input size of an
+ * adjoining `Input` instead of rendering a step smaller.
+ */
+export declare function formFieldFrameClasses(size: ComponentScale): string;
+/**
+ * Canonical "input-shaped trigger" chrome — used by any control that
+ * renders as a button-style trigger but visually has to read as a form
+ * field (DatePicker, TimePicker, Cascader, the inner Select inside composite
+ * fields, etc.). It is `Input`'s own frame plus button resets, so when the
+ * canonical input look changes every trigger picks it up.
  */
 export declare function formFieldTriggerClasses(size: ComponentScale): string;
 export declare const formTextareaSizeClasses: {
@@ -88,9 +97,9 @@ export declare const formTextareaSizeClasses: {
  * line height, so the inset follows the editable text size on every pointer.
  */
 export declare const formTextareaInsetClasses: {
-    sm: string;
-    md: string;
-    lg: string;
+    readonly sm: "py-[calc((var(--height-control)*8/9*var(--density-scale)-1lh)/2-1px)]";
+    readonly md: "py-[calc((var(--height-control)*var(--density-scale)-1lh)/2-1px)]";
+    readonly lg: "py-[calc((var(--height-control)*10/9*var(--density-scale)-1lh)/2-1px)]";
 };
 /**
  * Top offsets that centre multi-line field affordances on the first line, where a
@@ -114,5 +123,7 @@ export declare const formLabelSizeClasses: {
     md: string;
     lg: string;
 };
+/** Field labels share one line box, so a label row lines up beside its field at every size. */
+export declare const formLabelLineClass = "leading-6";
 export declare function resolveFormControlSize(sizeProp: ComponentScale | undefined, defaultScale: ComponentScale | undefined): ComponentScale;
 export declare function resolveFormLabelSize(sizeProp: ComponentScale | undefined, defaultScale: ComponentScale | undefined): ComponentScale;

package/dist/components/base/metadata-list/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * metadata-list — label/value facts about one entity.
+ *
+ * A base structure: it composes typography, primitives and base display parts,
+ * and any surface (Card, panel, drawer or block) places it. Previously
+ * published from `themelia-react-ui/blocks/data-display`, which re-exports it
+ * as a deprecated compatibility path.
+ */
+export { MetadataList, defaultMetadataListStrings } from './metadata-list';
+export type { MetadataDensity, MetadataInlineListItem, MetadataLayout, MetadataListItem, MetadataListProps, MetadataListStrings, } from './metadata-list';
+export { MetadataValue } from './metadata-value';
+export type { MetadataValueDescriptor, MetadataValueKind, MetadataValueProps, } from './metadata-value';

package/dist/components/{blocks/data-display/metadata → base/metadata-list}/metadata-list.d.ts

@@ -1,37 +1,28 @@
-/**
- * MetadataList — flexible label/value list for entity metadata.
- *
- * Three layouts:
- *  - `grid` (default): label-on-top, value-below cells for entity details.
- *  - `rows`: two-column definition rows with hairline separators.
- *  - `inline`: label/separator/value pairs that wrap, suitable for
- *    pill-style summaries (e.g. "Created Jan 4 · By Alice · v3.2").
- *
- * Each item supports an optional icon, tooltip, React-node value, custom
- * `render`, and per-item `emptyLabel`. Falls back to the shared `EMPTY` when
- * both are missing. Returns `null` when the list is empty so callers can render
- * unconditionally.
- */
-import { type LucideIcon } from 'lucide-react';
 import React from 'react';
-import { type ResponsiveValue } from '../../../base/structure';
-import { type StringsProp } from '../../../../lib/strings';
+import { type ResponsiveValue } from '../structure';
+import { type StringsProp } from '../../../lib/strings';
 import { defaultMetadataListStrings, type MetadataListStrings } from './metadata-list.strings';
 import { type MetadataValueDescriptor } from './metadata-value';
 export type { MetadataListStrings };
 export { defaultMetadataListStrings };
 export type MetadataListItem = {
-    /** Stable identity for this entry. */
+    /** Stable identity for this entry. Without one the label and index stand in. */
     id?: string;
     /** Display label. */
     label: React.ReactNode;
+    /** A node, or a descriptor that names the fact's kind. */
     value?: React.ReactNode | MetadataValueDescriptor | null;
-    /** Supporting copy shown under the label. */
+    /** Supporting copy shown under the value. */
     description?: React.ReactNode | null;
+    /** Shown from an info trigger beside the label, named after the label through `strings.formatInfoAriaLabel`. */
     tooltip?: React.ReactNode;
-    /** Leading glyph. */
-    icon?: LucideIcon;
+    /** Leading glyph. Any component that accepts `className`, including Lucide icons. */
+    icon?: React.ComponentType<{
+        className?: string;
+    }>;
+    /** Shown when this item's value is absent, in place of the list's `emptyLabel`. */
     emptyLabel?: React.ReactNode;
+    /** Takes over the value. The output sits in the value box, so it inherits the value's type role. */
     render?: (item: MetadataListItem) => React.ReactNode;
 };
 export type MetadataInlineListItem = Omit<MetadataListItem, 'description'> & {
@@ -54,7 +45,11 @@ type MetadataListSharedProps = {
     className?: string;
     /** Character placed between a label and its value. Defaults to a colon. */
     separator?: string;
-    /** Divider between items — `true` for the default rule, or a character for inline layouts. */
+    /**
+     * Divider between items, off by default. In `rows`, any truthy value draws a
+     * rule between rows (never at the ends). In `inline`, `true` places a middle
+     * dot (`·`) and a string places that character.
+     */
     itemSeparator?: boolean | string;
     /** Per-instance string overrides (deep-merged over `defaultMetadataListStrings`). */
     strings?: StringsProp<MetadataListStrings>;
@@ -64,15 +59,23 @@ type MetadataGridRowsProps = MetadataListSharedProps & {
     items: MetadataListItem[];
     /** `grid` flows items into `columns`; `rows` stacks them one per line. Default: `grid`. */
     layout?: 'grid' | 'rows';
+    /**
+     * Rows layout only. `start` (default) places values and descriptions at the
+     * start of proportional label/value tracks; `end` pins them to the row's end
+     * edge, for figures that read down a column.
+     */
+    valueAlign?: 'start' | 'end';
 };
 type MetadataInlineProps = MetadataListSharedProps & {
-    /** Values to render, without labels. */
+    /** Label/value pairs run together on wrapping lines. Inline items take no description. */
     items: MetadataInlineListItem[];
-    /** Runs the values together on one line, separated by `itemSeparator`. */
+    /** Runs the label/value pairs together on one line, separated by `itemSeparator`. */
     layout: 'inline';
+    /** Not used by the inline layout. */
+    valueAlign?: never;
 };
 export type MetadataListProps = MetadataGridRowsProps | MetadataInlineProps;
-export declare function MetadataList({ items, columns, density, emptyLabel, title, titleSeparator, className, layout, separator, itemSeparator, strings: stringsProp, }: MetadataListProps): React.JSX.Element | null;
+export declare function MetadataList({ items, columns, density, emptyLabel, title, titleSeparator, className, layout, separator, itemSeparator, valueAlign, strings: stringsProp, }: MetadataListProps): React.JSX.Element | null;
 export declare namespace MetadataList {
     var displayName: string;
 }

package/dist/components/{blocks/data-display/metadata → base/metadata-list}/metadata-value.d.ts

@@ -6,8 +6,8 @@
  */
 import type { ReactNode } from 'react';
 import type { Locale } from 'date-fns';
-import { type BadgeProps } from '../../../base/badge';
-import { type DateInput, type DatePreset, type MoneyProps, type TimeProps } from '../../../primitives';
+import { type BadgeProps } from '../badge';
+import { type DateInput, type DatePreset, type MoneyProps, type TimeProps } from '../../primitives';
 export type MetadataValueKind = 'text' | 'mono' | 'email' | 'phone' | 'url' | 'link' | 'date' | 'time' | 'datetime' | 'money' | 'badge' | 'node' | 'empty';
 type MetadataDisplayValue = Exclude<ReactNode, null | undefined>;
 type MetadataDateInput = Exclude<DateInput, null | undefined>;

package/dist/components/base/navigation/index.d.ts

@@ -16,6 +16,6 @@ export { LanguageSwitcher, type LanguageSwitcherProps } from './language-switche
 export { NavigationTabs, defaultNavigationTabsStrings, type NavigationTabItem, type NavigationTabsProps, type NavigationTabsStrings, type NavigationTabsVariant, } from './navigation-tabs';
 export { Tabs, TabsContent, TabsList, TabsTrigger, type TabsListProps } from './tabs';
 export { defaultTabsScrollStrings, type TabsScrollStrings } from './tab-scroll-viewport';
-export { PageHeading, type PageHeadingProps, type PageHeadingBadge, } from './page-header';
+export { PageHeading, type PageHeadingProps, type PageHeadingBadge, type PageHeaderAction, type PageHeaderLinkRenderProps, type PageHeaderLinkRenderer, } from './page-header';
 export { OverflowTabBar, defaultOverflowTabBarStrings, type OverflowTabBarProps, type OverflowTabBarStrings, type OverflowTabItem, } from './overflow-tab-bar';
 export { PaginationPrimitive, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, defaultPaginationStrings, type PaginationContentProps, type PaginationEllipsisProps, type PaginationItemProps, type PaginationLinkProps, type PaginationNextProps, type PaginationPreviousProps, type PaginationProps, type PaginationStrings, } from './pagination';

package/dist/components/base/navigation/page-header/index.d.ts

@@ -1 +1,2 @@
 export { PageHeading, type PageHeadingProps, type PageHeadingBadge, } from './page-header';
+export { type PageHeaderAction, type PageHeaderLinkRenderProps, type PageHeaderLinkRenderer, } from './page-header-commands';

package/dist/components/base/navigation/page-header/page-header-commands.d.ts

@@ -0,0 +1,73 @@
+/**
+ * PageHeaderCommands — role-based commands for page and record headers.
+ *
+ * The role chooses each command's treatment and place: outline secondary
+ * commands, then one solid primary command, then the More actions menu for
+ * overflow and destructive commands, which always closes the row. Below `sm`,
+ * secondary commands collapse into that menu through CSS alone, so server and
+ * client markup agree. PageHeading owns the row, so every header that takes
+ * `primaryAction` and `secondaryActions` places its commands the same way.
+ */
+import type { ComponentType, MouseEvent, ReactNode } from 'react';
+/**
+ * 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;
+    /**
+     * 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.
+     */
+    destructive?: boolean;
+}
+/** What a header hands its link renderer for an `href` command. */
+export interface PageHeaderLinkRenderProps {
+    href: string;
+    children: ReactNode;
+    className?: string;
+    target?: string;
+    rel?: string;
+    /** Marks the destination as leaving the app. */
+    external?: boolean;
+    onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+    'aria-label'?: string;
+}
+/** Renders framework links for `href` commands. Layout `renderLink` functions fit. */
+export type PageHeaderLinkRenderer = (props: PageHeaderLinkRenderProps) => ReactNode;
+/** Native anchor fallback, matching the layout default: external links open a new tab. */
+export declare const defaultPageHeaderLinkRenderer: PageHeaderLinkRenderer;
+/** Secondary commands rendered as buttons from `sm` up; later ones overflow. */
+export declare const PAGE_HEADER_INLINE_SECONDARY_LIMIT = 2;
+export interface PageHeaderCommandsProps {
+    primaryAction?: PageHeaderAction;
+    secondaryActions?: readonly PageHeaderAction[];
+    /** Accessible name of the More actions menu trigger. */
+    moreActionsLabel: string;
+    renderLink?: PageHeaderLinkRenderer;
+}
+/** Whether the header has any role-based command to render. */
+export declare function hasPageHeaderCommands(primaryAction: PageHeaderAction | undefined, secondaryActions: readonly PageHeaderAction[] | undefined): boolean;
+export declare function PageHeaderCommands({ primaryAction, secondaryActions, moreActionsLabel, renderLink, }: PageHeaderCommandsProps): import("react").JSX.Element | null;

package/dist/components/base/navigation/page-header/page-header.d.ts

@@ -2,12 +2,15 @@
  * PageHeading — reusable visual heading block for sections and resources.
  * Higher-level layout components add routing/back behavior around this base
  * visual primitive instead of reimplementing title, description, badge, and
- * action spacing.
+ * action spacing. `primaryAction` and `secondaryActions` describe commands by
+ * role; the heading owns their treatment and placement for every header built
+ * on it.
  */
 import type { Key, ReactNode } from 'react';
 import { type HeadingTag } from '../../../typography';
 import { type BadgeTone } from '../../badge';
 import { type TextGap } from '../../structure';
+import { type PageHeaderAction, type PageHeaderLinkRenderer } from './page-header-commands';
 export interface PageHeadingBadge {
     label: ReactNode;
     tone?: BadgeTone;
@@ -58,8 +61,28 @@ export interface PageHeadingProps {
     titleSuffix?: ReactNode;
     /** Content directly beneath the description, sharing its alignment — a metadata line. */
     afterDescription?: ReactNode;
-    /** Independent actions column beside the copy; follows it on narrow widths. */
+    /**
+     * Independent actions column beside the copy; follows it on narrow widths.
+     * Holds non-command controls such as a period select; they render before
+     * the role-based commands.
+     */
     actions?: ReactNode;
+    /**
+     * The header'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 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. Default: `'More actions'`. */
+    moreActionsLabel?: string;
+    /** Renders `href` commands as framework links. Defaults to a native anchor. */
+    renderLink?: PageHeaderLinkRenderer;
     /** Content below the whole header block, above the separator. */
     children?: ReactNode;
     /** Merged onto the `<header>` root. */
@@ -85,7 +108,7 @@ export interface PageHeadingProps {
      */
     withSeparator?: boolean;
 }
-export declare function PageHeading({ eyebrow, title, description, textGap, headingTag, badge, badges, breadcrumbs, leading, beforeTitle, titlePrefix, titleSuffix, afterDescription, actions, children, className, contentClassName, eyebrowClassName, titleClassName, titleRowClassName, descriptionClassName, actionsClassName, withSeparator, }: PageHeadingProps): import("react").JSX.Element;
+export declare function PageHeading({ eyebrow, title, description, textGap, headingTag, badge, badges, breadcrumbs, leading, beforeTitle, titlePrefix, titleSuffix, afterDescription, actions, primaryAction, secondaryActions, moreActionsLabel, renderLink, children, className, contentClassName, eyebrowClassName, titleClassName, titleRowClassName, descriptionClassName, actionsClassName, withSeparator, }: PageHeadingProps): import("react").JSX.Element;
 export declare namespace PageHeading {
     var displayName: string;
 }

package/dist/components/base/navigation/pagination.d.ts

@@ -2,6 +2,7 @@ import { type ComponentProps, type ReactNode } from 'react';
 import { Pagination as UIPagination, PaginationContent as UIPaginationContent, PaginationItem as UIPaginationItem } from '../../ui/pagination';
 import { type ButtonProps } from '../buttons';
 import { type StringsProp } from '../../../lib/strings';
+import { type ComponentScale } from '../../../lib/ui-provider';
 export interface PaginationStrings {
     navigationLabel: string;
     morePages: string;
@@ -23,6 +24,8 @@ export interface PaginationProps extends ComponentProps<typeof UIPagination> {
 }
 export type PaginationContentProps = ComponentProps<typeof UIPaginationContent>;
 export type PaginationEllipsisProps = ComponentProps<'span'> & {
+    /** Matches page-link geometry; falls back to the provider scale. */
+    size?: ComponentScale;
     /** Copy for the control. */
     label?: string;
     /** Overrides the pagination copy. */
@@ -54,8 +57,8 @@ export type PaginationPreviousProps = PaginationLinkProps & {
  */
 export declare function PaginationPrimitive({ className, strings: stringsProp, children, 'aria-label': ariaLabel, ...props }: PaginationProps): import("react").JSX.Element;
 export declare function PaginationContent({ className, ...props }: PaginationContentProps): import("react").JSX.Element;
-export declare function PaginationEllipsis({ className, label, strings: stringsProp, ...props }: PaginationEllipsisProps): import("react").JSX.Element;
+export declare function PaginationEllipsis({ className, label, size: sizeProp, strings: stringsProp, ...props }: PaginationEllipsisProps): import("react").JSX.Element;
 export declare function PaginationItem(props: PaginationItemProps): import("react").JSX.Element;
-export declare function PaginationLink({ className, children, active, ...props }: PaginationLinkProps): import("react").JSX.Element;
+export declare function PaginationLink({ className, children, active, size: sizeProp, ...props }: PaginationLinkProps): import("react").JSX.Element;
 export declare function PaginationPrevious({ className, text, strings: stringsProp, children: _children, ...props }: PaginationPreviousProps): import("react").JSX.Element;
 export declare function PaginationNext({ className, text, strings: stringsProp, children: _children, ...props }: PaginationNextProps): import("react").JSX.Element;

package/dist/components/base/popover/popover.recipes.d.ts

@@ -1,7 +1,21 @@
 import { type RowDensity } from '../../../lib/row-recipes';
 /** Shared anchored-surface chrome; Menu and Popover retain their own accessible behavior. */
+/**
+ * One width scale for anchored surfaces. Menus, pickers and popovers choose a
+ * step rather than a number; the viewport bound in `popoverRecipes.surface`
+ * still keeps every step clear of a narrow screen's edges.
+ */
+export declare const popoverWidthRecipes: {
+    readonly xs: "w-48";
+    readonly sm: "w-56";
+    readonly md: "w-72";
+    readonly lg: "w-80";
+    readonly xl: "w-90";
+    /** Floor for a menu that otherwise follows its trigger's width. */
+    readonly menuMin: "min-w-40";
+};
 export declare const popoverRecipes: {
-    readonly surface: "box-border rounded-radius border border-border bg-popover text-popover-foreground shadow-md ring-0";
+    readonly surface: "box-border max-w-[calc(100vw-2rem)] rounded-radius border border-border bg-popover text-popover-foreground shadow-md ring-0";
     readonly display: "p-surface";
     readonly menu: "p-surface-xs";
     readonly menuRegion: "px-surface-xs py-space-md";

package/dist/components/base/sheet/sheet.d.ts

@@ -7,9 +7,9 @@ import type { TextGap } from '../structure';
  * which owns the lifecycle, focus, dismissal and action contract; the
  * `themelia-react-ui/base/sheet` entrypoint remains only as a deprecated
  * compatibility surface. The panel shares the modal geometry of the internal
- * Dialog wrapper: the shell owns the block inset and the gap between header,
- * scrolling body and footer, regions own their inline inset, and one edge rule
- * separates the panel from the page.
+ * Dialog wrapper: header, scrolling body and footer each own their inset, one
+ * rule separates adjacent visible regions, and one edge rule separates the
+ * panel from the page.
  */
 import * as React from 'react';
 import { Sheet as SheetPrimitive } from '../../ui/sheet';
@@ -29,11 +29,7 @@ export declare const SheetContent: React.ForwardRefExoticComponent<Omit<import("
 export declare const SheetHeader: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "ref"> & {
     textGap?: TextGap;
 } & React.RefAttributes<HTMLDivElement>>;
-/**
- * Scroll-owning content region between the pinned sheet header and footer.
- * A rule appears on its top or bottom edge only while content is scrolled out
- * of view there.
- */
+/** Scroll-owning content region between the pinned sheet header and footer. */
 export declare const SheetBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 export declare const SheetFooter: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare const SheetTitle: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").AlertDialogTitleProps & {

package/dist/components/base/signature-pad/signature-pad.types.d.ts

@@ -54,7 +54,11 @@ export interface SignaturePadProps extends Omit<ComponentPropsWithoutRef<'div'>,
     name?: string;
     form?: string;
     required?: boolean;
-    /** Shows the keyboard-accessible typed signature alternative. @default true */
+    /**
+     * Shows the keyboard-accessible typed signature alternative. The typed name is
+     * drawn and exported in the pad's font family: the theme sans unless a font is
+     * set on the pad through `className` or `style`. @default true
+     */
     allowTypedSignature?: boolean;
     /** Ink diameter in CSS drawing pixels; pen pressure varies it. @default 2 */
     strokeWidth?: number;