themelia-react-ui 0.0.0-stage → 1.0.0

package/dist/components/base/date-pickers/time-picker.d.ts

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { type StringsProp } from '../../../lib/strings';
+import { type FormControlSize } from '../../../lib/ui-provider';
+export interface TimePickerStrings {
+    /** Trigger text in `mode="popover"` when there is no value. */
+    placeholder: string;
+    /** Accessible name for the hours segment. */
+    hours: string;
+    /** Accessible name for the minutes segment. */
+    minutes: string;
+    /** Accessible name for the seconds segment. Only rendered when `precision` is `'seconds'`. */
+    seconds: string;
+    /** Copy for the ante-meridiem half of the day. Only rendered when `format` is `'12'`. */
+    am: string;
+    /** Copy for the post-meridiem half of the day. Only rendered when `format` is `'12'`. */
+    pm: string;
+}
+export declare const defaultTimePickerStrings: TimePickerStrings;
+export interface TimePickerProps {
+    /**
+     * Selected time as `'HH:mm'` or `'HH:mm:ss'`, always on a 24-hour clock
+     * regardless of `format`. Controlled. `null` or omitted leaves every
+     * segment blank.
+     */
+    value?: string | null;
+    /**
+     * Fired with the next time in the same shape as `value` — `'HH:mm'` when
+     * `precision` is `'minutes'`, `'HH:mm:ss'` when it is `'seconds'`. Fires
+     * while typing and again on blur, always with a time aligned to `step`,
+     * so a listener never sees a value `step` forbids. The segments keep
+     * showing exactly what was typed until blur snaps them to that value.
+     */
+    onValueChange?: (value: string | null) => void;
+    /**
+     * `'inline'` renders the segments directly; `'popover'` puts them behind a
+     * field-shaped trigger showing the formatted time. Default: `'inline'`.
+     */
+    mode?: 'inline' | 'popover';
+    /** Clock convention. `'12'` adds the AM/PM segment. Default: `'24'`. */
+    format?: '12' | '24';
+    /** Finest segment offered. Default: `'minutes'`. */
+    precision?: 'minutes' | 'seconds';
+    /**
+     * Alignment granularity, **in seconds**. Emitted times are snapped to the
+     * nearest legal step; the display snaps on blur. Default: `60`.
+     */
+    step?: number;
+    /** Control-height preset. Falls back to `UIProvider.density.defaultScale`. */
+    size?: FormControlSize;
+    /** Disables every segment, and the trigger in `mode="popover"`. */
+    disabled?: boolean;
+    /** Applies invalid control styling. Validation copy remains owned by `FormField`. */
+    invalid?: boolean;
+    /** Trigger text in `mode="popover"` when there is no value. Wins over `strings.placeholder`. */
+    placeholder?: string;
+    /** String overrides merged over defaults. */
+    strings?: StringsProp<TimePickerStrings>;
+    /** Merged onto the outermost node. */
+    className?: string;
+    /**
+     * Lands on the popover trigger, or on the hours segment when inline, so
+     * `<FormField label>` — which clones its child with a generated `id` —
+     * gets a real `htmlFor` target.
+     */
+    id?: string;
+}
+/**
+ * TimePicker — segmented time-of-day input, inline or behind a popover trigger.
+ */
+export declare const TimePicker: React.ForwardRefExoticComponent<TimePickerProps & React.RefAttributes<HTMLElement>>;

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

@@ -0,0 +1,25 @@
+import type { TextGap } from '../structure';
+/**
+ * AlertDialog — structured base wrapper around the shadcn alert-dialog
+ * primitive. Higher-level confirmation recipes belong in features/overlays.
+ */
+import * as React from 'react';
+import { AlertDialog as AlertDialogPrimitive, AlertDialogOverlay, AlertDialogPortal } from '../../ui/alert-dialog';
+export declare const AlertDialog: typeof AlertDialogPrimitive;
+export declare const AlertDialogTrigger: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").AlertDialogTrigger.Props<unknown>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const AlertDialogContent: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").AlertDialogPopupProps & {
+    size?: "default" | "sm";
+} & {
+    container?: import("../../../lib/theme-scope").ThemePortalContainer;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const AlertDialogHeader: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "ref"> & {
+    textGap?: TextGap;
+} & React.RefAttributes<HTMLDivElement>>;
+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>>;
+export declare const AlertDialogDescription: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AlertDialogDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export declare const AlertDialogMedia: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const AlertDialogAction: React.ForwardRefExoticComponent<Omit<Omit<import("../../ui/button").Button.Props, "ref"> & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+export declare const AlertDialogCancel: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").AlertDialogCloseProps & Pick<Omit<import("../../ui/button").Button.Props, "ref"> & React.RefAttributes<HTMLElement>, "size" | "variant">, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { AlertDialogOverlay, AlertDialogPortal };

package/dist/components/base/display/boolean-indicator.d.ts

@@ -0,0 +1,25 @@
+import React, { type ComponentPropsWithoutRef } from 'react';
+import { type BadgeTone } from '../badge';
+import { type StringsProp } from '../../../lib/strings';
+export interface BooleanIndicatorStrings {
+    true: string;
+    false: string;
+}
+export declare const defaultBooleanIndicatorStrings: BooleanIndicatorStrings;
+export interface BooleanIndicatorProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
+    /** What the flag describes, rendered as the row's `DisplayLabel`. */
+    label: React.ReactNode;
+    /** The flag. `null` reads as unknown and uses the false presentation. Defaults to `false`. */
+    value?: boolean | null;
+    /** Shows the check/cross glyph beside the badge text. Defaults to `true`. */
+    showIcon?: boolean;
+    /** Badge tone when `value` is true. Defaults to `success`. */
+    trueTone?: BadgeTone;
+    /** Badge tone when `value` is false. Defaults to `secondary`. */
+    falseTone?: BadgeTone;
+    /** Merged onto the badge. */
+    badgeClassName?: string;
+    /** Overrides the yes/no copy. */
+    strings?: StringsProp<BooleanIndicatorStrings>;
+}
+export declare const BooleanIndicator: React.ForwardRefExoticComponent<BooleanIndicatorProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,21 @@
+/** Tokenized base wrappers for inline disclosure behavior. */
+import type { ComponentProps } from 'react';
+import { Collapsible as CollapsiblePrimitive, CollapsibleContent as CollapsibleContentPrimitive, CollapsibleTrigger as CollapsibleTriggerPrimitive } from '../../ui/collapsible';
+export type CollapsibleProps = ComponentProps<typeof CollapsiblePrimitive>;
+export type CollapsibleTriggerProps = ComponentProps<typeof CollapsibleTriggerPrimitive>;
+export type CollapsibleContentProps = ComponentProps<typeof CollapsibleContentPrimitive>;
+/** Root disclosure state. Supports controlled and uncontrolled open state. */
+export declare function Collapsible({ className, ...props }: CollapsibleProps): import("react").JSX.Element;
+export declare namespace Collapsible {
+    var displayName: string;
+}
+/** Consumer-blocks control that toggles the disclosure panel. */
+export declare function CollapsibleTrigger({ className, children, ...props }: CollapsibleTriggerProps): import("react").JSX.Element;
+export declare namespace CollapsibleTrigger {
+    var displayName: string;
+}
+/** Mount-aware disclosure panel. The caller owns its surface and content. */
+export declare function CollapsibleContent({ className, children, ...props }: CollapsibleContentProps): import("react").JSX.Element;
+export declare namespace CollapsibleContent {
+    var displayName: string;
+}

package/dist/components/base/display/content-block.d.ts

@@ -0,0 +1,73 @@
+/** @deprecated Use Card with surface="flat" and padding="none" for unframed content. */
+import { type HTMLAttributes, type ReactNode } from 'react';
+import type { ActionMenuAction } from '../action-menu';
+import type { StructureGap } from '../structure';
+import type { AlertTone } from '../feedback';
+import { type StringsProp } from '../../../lib/strings';
+import type { CardSurface, ComponentScale } from '../../../lib/component-vocabulary';
+import { type ContentBlockStrings } from './content-block.strings';
+export type ContentBlockPadding = ComponentScale;
+export type ContentBlockSurface = CardSurface;
+export type ContentBlockTitleSize = ComponentScale;
+export interface ContentBlockProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Leading glyph on the title line, muted and shrink-proof. */
+    icon?: ReactNode;
+    /** Block title. */
+    title?: ReactNode;
+    /** Supporting sentence under the title. */
+    description?: ReactNode;
+    /** Content immediately after the title, before the tooltip affordance. */
+    titleSuffix?: ReactNode;
+    /** Explanatory copy behind an info affordance on the title line. */
+    tooltip?: ReactNode;
+    /** Accessible name for the tooltip trigger. Defaults to the `tooltipLabel` string. */
+    tooltipAriaLabel?: string;
+    /** Full-width row above the title, inside the header. */
+    headerStart?: ReactNode;
+    /**
+     * Single control at the end of the header, before the overflow menu.
+     * Use `actions` instead for a list of commands.
+     */
+    headerAction?: ReactNode;
+    /** Content at the end of the header, before `headerAction` and the overflow menu. */
+    headerEnd?: ReactNode;
+    /** Overflow menu at the far end of the header. */
+    actions?: readonly ActionMenuAction[];
+    /** Accessible name for the overflow trigger. Defaults to the `actionsLabel` string. */
+    actionsLabel?: string;
+    /** Content between the alert and `children`. */
+    contentTop?: ReactNode;
+    /** Content after `children`. */
+    contentBottom?: ReactNode;
+    /** Muted text in the footer band. Renders alongside `footerSlot`. */
+    footerText?: ReactNode;
+    /** Full-width footer band under the content, for a single primary action. */
+    footerSlot?: ReactNode;
+    /** Banner between the header and the content. */
+    alert?: ReactNode;
+    /** Tone of the `alert` banner. */
+    alertTone?: AlertTone;
+    /** Optional structural padding. Omit it to keep the block card-free. */
+    padding?: ContentBlockPadding;
+    /** Optional surface chrome. Omit it to inherit the caller's surface. */
+    surface?: ContentBlockSurface;
+    /** Title typography. Defaults to the compact title size. */
+    titleSize?: ContentBlockTitleSize;
+    /** Draws a rule between the header and the content. */
+    headerDivider?: boolean;
+    /** Draws a rule between the content and the footer. */
+    footerDivider?: boolean;
+    /** Merged onto the header region. */
+    headerClassName?: string;
+    /** Merged onto the content region. */
+    contentClassName?: string;
+    /** Optional semantic spacing between direct content children. */
+    contentGap?: StructureGap;
+    /** Merged onto the footer region. */
+    footerClassName?: string;
+    /** Overrides the block's own copy (overflow-menu and tooltip labels). */
+    strings?: StringsProp<ContentBlockStrings>;
+}
+/** Migration adapter only; Card owns all rendering, slots and surface recipes. */
+export declare const ContentBlock: import("react").ForwardRefExoticComponent<ContentBlockProps & import("react").RefAttributes<HTMLDivElement>>;
+export { defaultContentBlockStrings, type ContentBlockStrings } from './content-block.strings';

package/dist/components/base/display/content-block.strings.d.ts

@@ -0,0 +1,5 @@
+export interface ContentBlockStrings {
+    actionsLabel: string;
+    tooltipLabel: string;
+}
+export declare const defaultContentBlockStrings: ContentBlockStrings;

package/dist/components/base/display/date-block.d.ts

@@ -0,0 +1,70 @@
+/**
+ * DateBlock — a semantic calendar tile for event, schedule, and timeline rows.
+ *
+ * The stacked layout owns a compact fixed-format tile; the inline layout is a
+ * lower-emphasis date stamp. Both share locale resolution, machine-readable
+ * `<time>` semantics, size/tone variants, optional year display, and flexible
+ * time metadata (including time ranges supplied as consumer content).
+ */
+import { type Locale } from 'date-fns';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { type DateInput } from '../../primitives';
+import { type ComponentScale } from '../../../lib/ui-provider';
+import { type StringsProp } from '../../../lib/strings';
+import type { SemanticTone } from '../../../lib/component-vocabulary';
+export type DateBlockLayout = 'stacked' | 'inline';
+export type DateBlockTimePlacement = 'inline' | 'below' | 'hidden';
+export type DateBlockTone = SemanticTone;
+export type DateBlockVariant = 'default' | 'muted' | 'inverse';
+export type DateBlockSize = ComponentScale;
+export interface DateBlockStrings {
+    /** Separator between the inline date and time metadata. */
+    separator: string;
+    /** Accessible name used when `date` is empty or invalid. */
+    unavailableLabel: string;
+}
+export declare const defaultDateBlockStrings: DateBlockStrings;
+export interface DateBlockProps extends Omit<ComponentPropsWithoutRef<'time'>, 'children' | 'dateTime'> {
+    /** Date instance, ISO string, unix timestamp, or an empty value. */
+    date?: DateInput;
+    /** Time or time-range metadata, already formatted by the consumer. */
+    time?: ReactNode;
+    /** Override the machine-readable value placed on the native `<time>`. */
+    dateTime?: string;
+    /** date-fns locale. Falls back to `<UIProvider dates={{ locale }}>`. */
+    locale?: Locale;
+    /** Visual layout. @default "stacked" */
+    layout?: DateBlockLayout;
+    /** Where time metadata renders. Defaults to `inline` for inline layout and `below` for stacked. */
+    timePlacement?: DateBlockTimePlacement;
+    /** Semantic color treatment. @default "neutral" */
+    tone?: DateBlockTone;
+    /** Structural surface treatment. @default "default" */
+    variant?: DateBlockVariant;
+    /** Structural scale. Falls back to `UIProvider.density.defaultScale`, then `md`. */
+    size?: DateBlockSize;
+    /** Render a bounded surface. Defaults to `true` for stacked and `false` for inline. */
+    boxed?: boolean;
+    /** Show the weekday heading. @default true */
+    showWeekday?: boolean;
+    /** Show the month label. @default true */
+    showMonth?: boolean;
+    /** Show the year label for cross-year schedules and timelines. @default false */
+    showYear?: boolean;
+    /** Visual fallback for an empty or invalid date. @default "—" */
+    emptyLabel?: ReactNode;
+    /** date-fns day-of-month format. @default "d" */
+    dayFormat?: string;
+    /** date-fns weekday format. @default "EEE" */
+    weekdayFormat?: string;
+    /** date-fns month format. @default "MMM" */
+    monthFormat?: string;
+    /** date-fns year format. @default "yyyy" */
+    yearFormat?: string;
+    /** Overrides this surface's own copy. */
+    strings?: StringsProp<DateBlockStrings>;
+}
+export declare function DateBlock({ date, time, dateTime, locale: localeProp, layout, timePlacement, tone, variant, size: sizeProp, boxed, showWeekday, showMonth, showYear, emptyLabel, dayFormat, weekdayFormat, monthFormat, yearFormat, className, strings: stringsProp, 'aria-label': ariaLabel, ...props }: DateBlockProps): import("react").JSX.Element;
+export declare namespace DateBlock {
+    var displayName: string;
+}

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

@@ -0,0 +1,35 @@
+import type { TextGap } from '../structure';
+/**
+ * Dialog — structured base wrapper around the shadcn dialog primitive.
+ *
+ * Primitive state and composition props pass through unchanged. The package
+ * wrapper supplies deliberate modal anatomy: separated header and footer,
+ * a scroll-owning body, tokenized spacing, and stable BEM hooks.
+ */
+import * as React from 'react';
+import { Dialog as DialogPrimitive, DialogOverlay, DialogPortal } from '../../ui/dialog';
+export declare const Dialog: typeof DialogPrimitive;
+export declare const DialogTrigger: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").DialogTrigger.Props<unknown> & {
+    asChild?: boolean;
+}, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const DialogClose: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").AlertDialogCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const DialogContent: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").AlertDialogPopupProps & {
+    showCloseButton?: boolean;
+} & {
+    container?: import("../../../lib/theme-scope").ThemePortalContainer;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+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 fixed 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;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const DialogTitle: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").AlertDialogTitleProps & {
+    asChild?: boolean;
+}, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+export declare const DialogDescription: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").AlertDialogDescriptionProps & {
+    asChild?: boolean;
+}, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export { DialogOverlay, DialogPortal };

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

@@ -0,0 +1,45 @@
+/**
+ * IconBadge — circular or square icon container with a tinted background.
+ * Workhorse for "row leading icon" and "feature illustration" patterns —
+ * 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`).
+ * For a fully-saturated mark (primary fill, inverse foreground), use
+ * `tone="primary"` and pass `solid`.
+ *
+ * Warning takes `--warning-accent` rather than `--warning-foreground`: the
+ * latter is the colour for text on a SOLID warning fill and stays near-black
+ * in both themes, so on a 20% tint it vanished in dark (1.87 contrast). Amber
+ * is intrinsically light, so — as with `--primary-accent` — the tone needs a
+ * separate foreground token that darkens in light and brightens in dark.
+ */
+import type { ComponentProps, ElementType, ReactNode } from 'react';
+import { type ComponentScale } from '../../../../lib/ui-provider';
+import type { SemanticTone } from '../../../../lib/component-vocabulary';
+export type IconBadgeSize = ComponentScale;
+export type IconBadgeShape = 'circle' | 'square';
+export type IconBadgeTone = SemanticTone;
+export interface IconBadgeProps extends Omit<ComponentProps<'span'>, 'children'> {
+    /** Leading glyph. */
+    icon?: ElementType;
+    children?: ReactNode;
+    /** Size preset. */
+    size?: IconBadgeSize;
+    shape?: IconBadgeShape;
+    /** Semantic tone driving the entry's colour. */
+    tone?: IconBadgeTone;
+    /** When true, fills the badge with the tone color and inverts the icon. */
+    solid?: boolean;
+    /**
+     * When true, renders a hairline `border-border/60` around the badge.
+     * Useful for compact "secret list" / "key list" rows where the icon
+     * needs a subtle outline against the surrounding card surface
+     * (see `blocks/admin/api-key-list`).
+     */
+    bordered?: boolean;
+}
+export declare function IconBadge({ icon: Icon, children, size: sizeProp, shape, tone, solid, bordered, className, role, 'aria-hidden': ariaHidden, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }: IconBadgeProps): import("react").JSX.Element;
+export declare namespace IconBadge {
+    var displayName: string;
+}

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

@@ -0,0 +1 @@
+export { IconBadge, type IconBadgeProps, type IconBadgeSize, type IconBadgeShape, type IconBadgeTone, } from './icon-badge';

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

@@ -0,0 +1,5 @@
+import type { ComponentScale } from '../../../lib/ui-provider';
+export type IconScale = ComponentScale;
+export declare const ICON_SIZE_CLASSNAMES: Record<IconScale, string>;
+export declare const ICON_CHILD_SIZE_CLASSNAMES: Record<IconScale, string>;
+export declare const ICON_DESCENDANT_SIZE_CLASSNAMES: Record<IconScale, string>;

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

@@ -0,0 +1,31 @@
+/**
+ * Low-level display chrome: the parts that frame, divide, reveal, or annotate
+ * other content without being content themselves.
+ *
+ * Separators and scroll areas bound a region; collapsibles reveal one;
+ * headed content uses Card from base/cards; ContentBlock is a migration adapter;
+ * tooltips, icon badges, boolean indicators and date blocks annotate a value in
+ * place; `VisuallyHidden` and `PlaceholderPattern` handle the two edges —
+ * present to assistive technology only, and present but deliberately blank.
+ *
+ * Five neighbours own what used to sit here:
+ * `themelia-react-ui/base/avatar` for identity media,
+ * `themelia-react-ui/base/feedback` for alerts, progress, empty and
+ * loading/error states, `themelia-react-ui/base/skeleton` for loading
+ * geometry, and — kept apart so their optional peers never reach this barrel —
+ * `themelia-react-ui/base/chart` for Recharts helpers and
+ * `themelia-react-ui/base/qr-code` for QR rendering.
+ * Modal anatomy is not published from base at all — `Dialog` and
+ * `AlertDialog` back `themelia-react-ui/features/overlays`, which is the
+ * only supported modal surface.
+ */
+export { PlaceholderPattern, type PlaceholderPatternProps } from './placeholder-pattern';
+export { VisuallyHidden, type VisuallyHiddenProps } from './visually-hidden';
+export { DateBlock, defaultDateBlockStrings, type DateBlockProps, type DateBlockStrings, type DateBlockLayout, type DateBlockSize, type DateBlockTimePlacement, type DateBlockTone, type DateBlockVariant, } from './date-block';
+export * from './collapsible';
+export * from './content-block';
+export { BooleanIndicator, type BooleanIndicatorProps } from './boolean-indicator';
+export * from './scroll-area';
+export * from './separator';
+export * from './tooltip';
+export * from './icon-badge';

package/dist/components/base/display/placeholder-pattern.d.ts

@@ -0,0 +1,7 @@
+export interface PlaceholderPatternProps {
+    className?: string;
+}
+export declare function PlaceholderPattern({ className }: PlaceholderPatternProps): import("react").JSX.Element;
+export declare namespace PlaceholderPattern {
+    var displayName: string;
+}

package/dist/components/base/display/scroll-area.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area';
+export type ScrollAreaProps = ScrollAreaPrimitive.Root.Props & {
+    /** Axes with custom scrollbar chrome. Defaults to vertical. */
+    orientation?: 'vertical' | 'horizontal' | 'both';
+    viewportRef?: React.Ref<HTMLDivElement>;
+    viewportClassName?: string;
+    scrollbarClassName?: string;
+};
+declare function ScrollArea({ orientation, className, viewportClassName, scrollbarClassName, viewportRef, children, ...props }: ScrollAreaProps): React.JSX.Element;
+declare function ScrollBar({ className, orientation, ...props }: ScrollAreaPrimitive.Scrollbar.Props): React.JSX.Element;
+export { ScrollArea, ScrollBar };

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { Separator as PrimitiveSeparator } from '../../ui/separator';
+export interface SeparatorProps extends React.ComponentPropsWithoutRef<typeof PrimitiveSeparator> {
+    /** Render the rule as a dashed line instead of a solid border fill. */
+    dashed?: boolean;
+}
+export declare function Separator({ className, dashed, ...props }: SeparatorProps): React.JSX.Element;
+export declare namespace Separator {
+    var displayName: string;
+}

package/dist/components/base/display/surface-title.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+/** One wrapping title/suffix composition shared by cards and content structures. */
+export declare function SurfaceTitle({ title, suffix, size, className, suffixClassName, dataSlot }: {
+    title?: ReactNode;
+    suffix?: ReactNode;
+    size?: 'sm' | 'base' | 'lg';
+    className?: string;
+    suffixClassName?: string;
+    dataSlot?: string;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,28 @@
+/** Tokenized base wrappers for short, non-interactive contextual help. */
+import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';
+import { type ComponentProps } from 'react';
+import { TooltipContent as TooltipContentPrimitive, TooltipProvider as TooltipProviderPrimitive, TooltipTrigger as TooltipTriggerPrimitive } from '../../ui/tooltip';
+export type TooltipProps = ComponentProps<typeof BaseTooltip.Root>;
+export type TooltipProviderProps = ComponentProps<typeof TooltipProviderPrimitive>;
+export type TooltipTriggerProps = ComponentProps<typeof TooltipTriggerPrimitive>;
+export type TooltipContentProps = ComponentProps<typeof TooltipContentPrimitive>;
+/** Tooltip state root. It does not render a DOM node. */
+export declare function Tooltip(props: TooltipProps): import("react").JSX.Element;
+export declare namespace Tooltip {
+    var displayName: string;
+}
+/** Shared delay provider for a group of tooltip roots. Nested Tooltip roots reuse it. */
+export declare function TooltipProvider(props: TooltipProviderProps): import("react").JSX.Element;
+export declare namespace TooltipProvider {
+    var displayName: string;
+}
+/** Polymorphic tooltip anchor. */
+export declare function TooltipTrigger({ className, ...props }: TooltipTriggerProps): import("react").JSX.Element;
+export declare namespace TooltipTrigger {
+    var displayName: string;
+}
+/** Inverse contextual-help surface with package spacing and typography. */
+export declare function TooltipContent({ children, className, ...props }: TooltipContentProps): import("react").JSX.Element;
+export declare namespace TooltipContent {
+    var displayName: string;
+}

package/dist/components/base/display/visually-hidden.d.ts

@@ -0,0 +1,14 @@
+/**
+ * VisuallyHidden — hides content from sighted users while keeping it readable
+ * by assistive tech (screen readers, voice). Use to label icon-only buttons,
+ * give context to status changes, or expose extra structure for AT users.
+ */
+import * as React from 'react';
+export interface VisuallyHiddenProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export declare function VisuallyHidden({ children, className }: VisuallyHiddenProps): React.JSX.Element;
+export declare namespace VisuallyHidden {
+    var displayName: string;
+}

package/dist/components/base/feedback/alert.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Alert — base notice primitive with semantic variants and responsive actions.
+ *
+ * Package-owned notice inspired by ReUI's alert layout. Consumers import this
+ * base alert for the library's typography, token, and DOM-hook contract.
+ */
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import { type VariantProps } from 'class-variance-authority';
+import type { SemanticTone } from '../../../lib/component-vocabulary';
+declare const alertVariants: (props?: ({
+    tone?: "neutral" | "primary" | "secondary" | "info" | "success" | "warning" | "destructive" | null | undefined;
+    variant?: "default" | "inverse" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type AlertVariant = NonNullable<VariantProps<typeof alertVariants>['variant']>;
+export type AlertTone = SemanticTone;
+export interface AlertProps extends ComponentPropsWithoutRef<'div'>, VariantProps<typeof alertVariants> {
+}
+declare const Alert: import("react").ForwardRefExoticComponent<AlertProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const AlertTitle: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const AlertDescription: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export interface AlertMetadataProps extends ComponentPropsWithoutRef<'dl'> {
+    /** Metadata items or consumer-owned definition-list content. */
+    children?: ReactNode;
+    /** Accessible name for the fact group when the alert title is not sufficient. */
+    'aria-label'?: string;
+    /** Consumer styling hook merged with the tokenized defaults. */
+    className?: string;
+}
+/**
+ * Compact semantic facts associated with an alert. Use `aria-label` when the
+ * surrounding title does not already describe the metadata group.
+ */
+declare const AlertMetadata: import("react").ForwardRefExoticComponent<AlertMetadataProps & import("react").RefAttributes<HTMLDListElement>>;
+export interface AlertMetadataItemProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
+    /** Consumer styling hook merged with the tokenized defaults. */
+    className?: string;
+    /** Decorative or semantic leading media. Decorative icons should be aria-hidden. */
+    icon?: ReactNode;
+    /** User-provided metadata key; the Alert component owns no copy. */
+    label: ReactNode;
+    /** User-provided metadata value. May contain a package value primitive. */
+    value: ReactNode;
+    /** Applies tabular monospace figures to simple numeric values. */
+    numeric?: boolean;
+}
+/** A label/value pair rendered with native `dt` and `dd` semantics. */
+declare const AlertMetadataItem: import("react").ForwardRefExoticComponent<AlertMetadataItemProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const AlertAction: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export { Alert, AlertTitle, AlertDescription, AlertMetadata, AlertMetadataItem, AlertAction, };

package/dist/components/base/feedback/empty.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Tokenized low-level empty-state parts.
+ *
+ * Use the blocks `EmptyState` for an opinionated ready-made state. These
+ * parts are for consumers that need to assemble their own media/content/action
+ * anatomy without importing the internal shadcn primitive.
+ */
+import type { ComponentProps } from 'react';
+import { Empty as EmptyPrimitive, EmptyContent as EmptyContentPrimitive, EmptyDescription as EmptyDescriptionPrimitive, EmptyHeader as EmptyHeaderPrimitive, EmptyMedia as EmptyMediaPrimitive, EmptyTitle as EmptyTitlePrimitive } from '../../ui/empty';
+export type EmptyProps = ComponentProps<typeof EmptyPrimitive>;
+export type EmptyContentProps = ComponentProps<typeof EmptyContentPrimitive>;
+export type EmptyDescriptionProps = ComponentProps<typeof EmptyDescriptionPrimitive>;
+export type EmptyHeaderProps = ComponentProps<typeof EmptyHeaderPrimitive>;
+export type EmptyMediaProps = ComponentProps<typeof EmptyMediaPrimitive>;
+export interface EmptyTitleProps extends ComponentProps<typeof EmptyTitlePrimitive> {
+    /** Accessible heading level used by the default `role="heading"` output. */
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
+}
+/** Root layout for a consumer-blocks empty state. */
+export declare function Empty({ className, ...props }: EmptyProps): import("react").JSX.Element;
+export declare namespace Empty {
+    var displayName: string;
+}
+/** Centered title and description stack. */
+export declare function EmptyHeader({ className, ...props }: EmptyHeaderProps): import("react").JSX.Element;
+export declare namespace EmptyHeader {
+    var displayName: string;
+}
+/** Optional icon or illustration region. */
+export declare function EmptyMedia({ className, ...props }: EmptyMediaProps): import("react").JSX.Element;
+export declare namespace EmptyMedia {
+    var displayName: string;
+}
+/** Empty-state heading calibrated to the admin typography scale. */
+export declare function EmptyTitle({ className, headingLevel, role, 'aria-level': ariaLevel, children, ...props }: EmptyTitleProps): import("react").JSX.Element;
+export declare namespace EmptyTitle {
+    var displayName: string;
+}
+/** Supporting explanation for the absence of content. */
+export declare function EmptyDescription({ className, children, ...props }: EmptyDescriptionProps): import("react").JSX.Element;
+export declare namespace EmptyDescription {
+    var displayName: string;
+}
+/** Actions or next-step content rendered below the explanation. */
+export declare function EmptyContent({ className, children, ...props }: EmptyContentProps): import("react").JSX.Element;
+export declare namespace EmptyContent {
+    var displayName: string;
+}