@vamos-ui/react 0.0.0-stage → 0.2.0

package/dist/components/progress.d.ts

@@ -0,0 +1,79 @@
+import * as React from "react";
+export type ProgressTone = "accent" | "success" | "warning" | "danger" | "auto";
+declare const progressLabels: {
+    of: string;
+    loading: string;
+};
+interface SharedProgressProps {
+    /** Current value. `null` / `undefined` → indeterminate. Values above `max` are allowed (quota overrun). */
+    value?: number | null;
+    /** Default 100. */
+    max?: number;
+    /**
+     * `"accent"` (default; turns success when complete), a status colour, or `"auto"` for quotas:
+     * above 80% warning, at or above 100% danger.
+     */
+    tone?: ProgressTone;
+    /** How the value reads (visible and `aria-valuetext`): `"42%"` or `"1,240 of 5,000"`. Default `"percent"`. */
+    display?: "percent" | "fraction";
+    /** Override the announced value text entirely. */
+    valueText?: string;
+    labels?: Partial<typeof progressLabels>;
+}
+export declare const progressTrackVariants: (props?: ({
+    size?: "sm" | "md" | "xs" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface ProgressProps extends SharedProgressProps, Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    /** 2 / 4 / 8 px. Default `"sm"`. */
+    size?: "xs" | "sm" | "md";
+    /** Visible label above the bar (linked with `aria-labelledby`). Without it, pass `aria-label`. */
+    label?: React.ReactNode;
+    /** Show the value at the end of the label row, or render your own. */
+    showValue?: boolean | ((value: number, max: number) => React.ReactNode);
+    /** Small text under the bar ("About 2 minutes left"). */
+    hint?: React.ReactNode;
+}
+/**
+ * Task progress or quota use. `role="progressbar"` with `aria-valuenow/min/max` and a localized
+ * `aria-valuetext` ("42%" in English, "%42" in Turkish). Fills from the inline start (right in RTL).
+ *
+ * ```tsx
+ * <Progress label="Uploading 4 files" value={42} showValue />
+ * <Progress label="Contacts imported" value={1240} max={5000} display="fraction" showValue />
+ * <Progress label="Storage" value={9.2} max={10} tone="auto" />
+ * <Progress aria-label="Loading" value={null} />
+ * ```
+ */
+export declare const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;
+declare const CIRCLE: {
+    readonly sm: {
+        readonly px: 18;
+        readonly stroke: 2.5;
+    };
+    readonly md: {
+        readonly px: 40;
+        readonly stroke: 3.5;
+    };
+    readonly lg: {
+        readonly px: 64;
+        readonly stroke: 4.5;
+    };
+};
+export interface ProgressCircleProps extends SharedProgressProps, Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    /** 18 / 40 / 64 px. `sm` sits inline next to text. Default `"md"`. */
+    size?: keyof typeof CIRCLE;
+    /** Show the value in the centre (md and lg). Default `true` for lg. */
+    showValue?: boolean;
+    /** Content in the centre instead of the value (an icon, "3/5"). */
+    children?: React.ReactNode;
+}
+/**
+ * Compact circular progress: profile completion, a step ring, an inline upload. Needs an
+ * accessible name (`aria-label` or `aria-labelledby`).
+ *
+ * ```tsx
+ * <ProgressCircle aria-label="Profile complete" value={72} size="lg" />
+ * ```
+ */
+export declare const ProgressCircle: React.ForwardRefExoticComponent<ProgressCircleProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/progress.js

@@ -0,0 +1,97 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/cn.js";
+import { useLabels } from "../lib/labels.js";
+import { useFormat } from "../lib/locale.js";
+const progressLabels = { of: "{value} of {max}", loading: "Loading…" };
+function resolveTone(tone, ratio) {
+    if (tone === "auto")
+        return ratio == null ? "accent" : ratio >= 1 ? "danger" : ratio > 0.8 ? "warning" : "accent";
+    if (tone === "accent" && ratio != null && ratio >= 1)
+        return "success";
+    return tone;
+}
+function useProgressModel({ value, max = 100, tone = "accent", display = "percent", valueText, labels }) {
+    const f = useFormat();
+    const t = useLabels("progress", progressLabels, labels);
+    const indeterminate = value == null || Number.isNaN(value);
+    const safeMax = max > 0 ? max : 100;
+    const ratio = indeterminate ? null : Math.max(0, value) / safeMax;
+    const fill = ratio == null ? 0 : Math.min(1, ratio);
+    const text = indeterminate
+        ? undefined
+        : (valueText ?? (display === "fraction" ? t("of", { value: f.number(value), max: f.number(safeMax) }) : f.percent(ratio, { maximumFractionDigits: 0 })));
+    return { indeterminate, ratio, fill, text, max: safeMax, tone: resolveTone(tone, ratio), t };
+}
+const fillColor = {
+    accent: "bg-accent",
+    success: "bg-success",
+    warning: "bg-warning",
+    danger: "bg-danger",
+};
+const strokeColor = {
+    accent: "stroke-accent-ink",
+    success: "stroke-success",
+    warning: "stroke-warning",
+    danger: "stroke-danger",
+};
+const valueColor = {
+    accent: "text-fg",
+    success: "text-success",
+    warning: "text-warning",
+    danger: "text-danger",
+};
+/* ------------------------------------------------------------------ */
+/* Linear                                                               */
+/* ------------------------------------------------------------------ */
+export const progressTrackVariants = cva("relative w-full overflow-hidden rounded-full bg-track", {
+    variants: {
+        size: { xs: "h-0.5", sm: "h-1", md: "h-2" },
+    },
+    defaultVariants: { size: "sm" },
+});
+/**
+ * Task progress or quota use. `role="progressbar"` with `aria-valuenow/min/max` and a localized
+ * `aria-valuetext` ("42%" in English, "%42" in Turkish). Fills from the inline start (right in RTL).
+ *
+ * ```tsx
+ * <Progress label="Uploading 4 files" value={42} showValue />
+ * <Progress label="Contacts imported" value={1240} max={5000} display="fraction" showValue />
+ * <Progress label="Storage" value={9.2} max={10} tone="auto" />
+ * <Progress aria-label="Loading" value={null} />
+ * ```
+ */
+export const Progress = React.forwardRef(function Progress({ value, max, tone, display, valueText, labels, size, label, showValue, hint, className, id, ...props }, ref) {
+    const m = useProgressModel({ value, max, tone, display, valueText, labels });
+    const autoId = React.useId();
+    const baseId = id ?? `progress${autoId.replace(/:/g, "")}`;
+    const labelId = label ? `${baseId}-label` : undefined;
+    const hintId = hint ? `${baseId}-hint` : undefined;
+    const shownValue = m.indeterminate || !showValue ? null : typeof showValue === "function" ? showValue(value, m.max) : m.text;
+    const bar = (_jsx("div", { ref: label || hint ? undefined : ref, id: label || hint ? undefined : id, role: "progressbar", "aria-labelledby": labelId, "aria-describedby": hintId, "aria-valuemin": 0, "aria-valuemax": m.indeterminate ? undefined : m.max, "aria-valuenow": m.indeterminate ? undefined : Math.min(value, m.max), "aria-valuetext": m.indeterminate ? (label ? undefined : m.t("loading")) : m.text, "data-slot": "progress", "data-state": m.indeterminate ? "indeterminate" : m.ratio >= 1 ? "complete" : "loading", "data-tone": m.tone, className: cn("vui-progress", progressTrackVariants({ size }), !(label || hint) && className), ...(label || hint ? {} : props), children: _jsx("div", { "data-slot": "progress-indicator", className: cn("vui-progress-indicator h-full w-full origin-left rounded-full rtl:origin-right", fillColor[m.tone]), style: m.indeterminate ? undefined : { transform: `scaleX(${m.fill})` } }) }));
+    if (!label && !hint && !shownValue)
+        return bar;
+    return (_jsxs("div", { ref: ref, id: id, "data-slot": "progress-field", className: cn("grid w-full gap-1.5", className), ...props, children: [label || shownValue ? (_jsxs("div", { className: "flex items-baseline justify-between gap-3 text-[13px]", children: [label ? (_jsx("span", { id: labelId, className: "min-w-0 truncate font-medium text-fg", children: label })) : (_jsx("span", {})), shownValue ? (_jsx("span", { "aria-hidden": true, className: cn("shrink-0 font-mono text-xs tabular", valueColor[m.tone] === "text-fg" ? "text-fg-muted" : valueColor[m.tone]), children: shownValue })) : null] })) : null, bar, hint ? (_jsx("p", { id: hintId, className: "text-xs text-fg-muted", children: hint })) : null] }));
+});
+/* ------------------------------------------------------------------ */
+/* Circular                                                             */
+/* ------------------------------------------------------------------ */
+const CIRCLE = { sm: { px: 18, stroke: 2.5 }, md: { px: 40, stroke: 3.5 }, lg: { px: 64, stroke: 4.5 } };
+/**
+ * Compact circular progress: profile completion, a step ring, an inline upload. Needs an
+ * accessible name (`aria-label` or `aria-labelledby`).
+ *
+ * ```tsx
+ * <ProgressCircle aria-label="Profile complete" value={72} size="lg" />
+ * ```
+ */
+export const ProgressCircle = React.forwardRef(function ProgressCircle({ value, max, tone, display, valueText, labels, size = "md", showValue, children, className, ...props }, ref) {
+    const m = useProgressModel({ value, max, tone, display, valueText, labels });
+    const { px, stroke } = CIRCLE[size];
+    const r = (px - stroke) / 2;
+    const showCenter = size !== "sm" && (children != null || (showValue ?? size === "lg"));
+    const pct = m.indeterminate ? 26 : m.fill * 100;
+    return (_jsxs("div", { ref: ref, role: "progressbar", "aria-valuemin": 0, "aria-valuemax": m.indeterminate ? undefined : m.max, "aria-valuenow": m.indeterminate ? undefined : Math.min(value, m.max), "aria-valuetext": m.indeterminate ? m.t("loading") : m.text, "data-slot": "progress-circle", "data-state": m.indeterminate ? "indeterminate" : m.ratio >= 1 ? "complete" : "loading", "data-tone": m.tone, className: cn("vui-progress-circle relative inline-flex shrink-0 items-center justify-center", className), style: { width: px, height: px }, ...props, children: [_jsxs("svg", { width: px, height: px, viewBox: `0 0 ${px} ${px}`, "aria-hidden": true, focusable: "false", className: "-rotate-90 rtl:-scale-y-100", children: [_jsx("circle", { cx: px / 2, cy: px / 2, r: r, fill: "none", strokeWidth: stroke, className: "stroke-track" }), _jsx("g", { className: "vui-progress-arc", children: _jsx("circle", { cx: px / 2, cy: px / 2, r: r, fill: "none", strokeWidth: stroke, strokeLinecap: "round", pathLength: 100, strokeDasharray: `${pct} 100`, className: cn(strokeColor[m.tone], "transition-[stroke-dasharray] duration-300 motion-reduce:transition-none", pct === 0 && "opacity-0") }) })] }), showCenter ? (_jsx("span", { "aria-hidden": true, className: cn("absolute inset-0 flex items-center justify-center font-mono tabular", size === "lg" ? "text-[13px] font-medium" : "text-[10px]", valueColor[m.tone]), children: children ?? (m.indeterminate ? null : display === "fraction" ? `${value}/${m.max}` : m.text) })) : null] }));
+});

package/dist/components/radio-group.d.ts

@@ -0,0 +1,43 @@
+import * as React from "react";
+import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
+export interface RadioGroupOption<V extends string = string> {
+    value: V;
+    label: React.ReactNode;
+    description?: React.ReactNode;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+}
+export interface RadioGroupProps<V extends string = string> extends Omit<React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>, "value" | "defaultValue" | "onValueChange" | "orientation"> {
+    /** Selected value; `null` = nothing selected (controlled). */
+    value?: V | null;
+    defaultValue?: V | null;
+    onValueChange?: (value: V) => void;
+    /** Shorthand for the options. Or compose `RadioGroupItem` children. */
+    items?: RadioGroupOption<V>[];
+    /**
+     * `"default"`: circle + label. `"card"`: selectable tiles with icon and description (plans).
+     * `"segmented"`: a compact segmented control for short labels (a form value, not a view switch —
+     * use `ToggleGroup` for toolbar/view state).
+     */
+    variant?: "default" | "card" | "segmented";
+    orientation?: "vertical" | "horizontal";
+    size?: "sm" | "md";
+    invalid?: boolean;
+    /** Focusable, but the selection can't change (`aria-readonly`). */
+    readOnly?: boolean;
+}
+export declare const RadioGroup: <V extends string = string>(props: RadioGroupProps<V> & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => React.ReactElement;
+export interface RadioGroupItemProps extends Omit<React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>, "children"> {
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    /** Leading icon (card and segmented variants). */
+    icon?: React.ReactNode;
+    /** Free content for a card (price, badge) under the label. */
+    children?: React.ReactNode;
+    /** Classes for the radio circle (default variant). */
+    controlClassName?: string;
+}
+/** One option inside a `RadioGroup`. */
+export declare const RadioGroupItem: React.ForwardRefExoticComponent<RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/radio-group.js

@@ -0,0 +1,81 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
+import { cn } from "../lib/cn.js";
+import { mergeIds } from "../lib/compose-refs.js";
+import { FieldContextReset, useFieldContext } from "../lib/field-context.js";
+import { useControllableState } from "../lib/use-controllable-state.js";
+const RadioGroupContext = React.createContext({ variant: "default", size: "md", value: null });
+const segmentedTrack = "inline-flex w-fit max-w-full items-stretch gap-0.5 rounded-ui border border-line bg-selected p-[3px] has-[:focus-visible]:border-ring aria-invalid:border-danger";
+/**
+ * Pick exactly one of a small set: post visibility, invoice type, plan. WAI-ARIA radio group on
+ * Radix (one tab stop, arrow keys move and select). Labelled by the surrounding Field / Fieldset.
+ *
+ * ```tsx
+ * <Field label="Visibility">
+ *   <RadioGroup name="visibility" defaultValue="public" items={[{ value: "public", label: "Public" }, { value: "private", label: "Private" }]} />
+ * </Field>
+ * <RadioGroup variant="segmented" items={…} aria-label="Billing period" />
+ * ```
+ */
+function RadioGroupInner({ value: valueProp, defaultValue, onValueChange, items, variant = "default", orientation, size = "md", invalid, readOnly, disabled, required, name, id, className, children, "aria-labelledby": labelledBy, "aria-describedby": describedBy, ...props }, ref) {
+    const field = useFieldContext();
+    const [value, setValue] = useControllableState({
+        value: valueProp,
+        defaultValue: defaultValue ?? null,
+        onChange: (v) => {
+            if (v !== null)
+                onValueChange?.(v);
+        },
+        name: "RadioGroup",
+    });
+    const dir = orientation ?? (variant === "segmented" ? "horizontal" : "vertical");
+    const isInvalid = invalid ?? field?.invalid;
+    const isReadOnly = readOnly ?? field?.readOnly;
+    const isRequired = required ?? field?.required;
+    const ctx = React.useMemo(() => ({ variant, size, value, readOnly: isReadOnly }), [variant, size, value, isReadOnly]);
+    return (_jsx(RadioGroupPrimitive.Root, { ...props, ref: ref, "data-slot": "radio-group", "data-variant": variant, id: id ?? field?.id, name: name ?? field?.name, disabled: disabled ?? (field?.disabled || undefined), required: isRequired || undefined, "aria-labelledby": labelledBy ?? (props["aria-label"] ? undefined : field?.labelId), "aria-describedby": mergeIds(field?.describedBy, describedBy), "aria-invalid": isInvalid || undefined, "aria-readonly": isReadOnly || undefined, orientation: dir, 
+        // Radix treats "" as "no selection".
+        value: value ?? "", onValueChange: (v) => {
+            if (isReadOnly)
+                return;
+            setValue(v);
+        }, className: cn("group/radio", variant === "segmented"
+            ? segmentedTrack
+            : variant === "card"
+                ? dir === "horizontal"
+                    ? "grid gap-2.5 sm:grid-cols-[repeat(auto-fit,minmax(12rem,1fr))]"
+                    : "grid gap-2.5"
+                : dir === "horizontal"
+                    ? "flex flex-wrap items-start gap-x-6 gap-y-2.5"
+                    : "grid gap-2.5", className), children: _jsx(FieldContextReset, { children: _jsxs(RadioGroupContext.Provider, { value: ctx, children: [items?.map((item) => (_jsx(RadioGroupItem, { value: item.value, label: item.label, description: item.description, icon: item.icon, disabled: item.disabled }, item.value))), children] }) }) }));
+}
+export const RadioGroup = React.forwardRef(RadioGroupInner);
+const circle = "peer relative inline-flex shrink-0 items-center justify-center rounded-full border border-field-border-hover bg-field outline-none transition-[border-color,box-shadow,background-color] duration-150 hover:border-fg-subtle focus-visible:border-ring focus-visible:shadow-[0_0_0_3px_var(--accent-soft)] data-[state=checked]:border-accent-ink disabled:cursor-not-allowed disabled:opacity-45 group-aria-invalid/radio:border-danger";
+/** One option inside a `RadioGroup`. */
+export const RadioGroupItem = React.forwardRef(function RadioGroupItem({ label, description, icon, children, className, controlClassName, id: idProp, "aria-describedby": describedBy, onKeyDown, ...props }, ref) {
+    const { variant, size, value: selected, readOnly } = React.useContext(RadioGroupContext);
+    const autoId = React.useId();
+    const id = idProp ?? `rd${autoId.replace(/:/g, "")}`;
+    const labelId = `${id}-label`;
+    const descId = description ? `${id}-desc` : undefined;
+    const checked = selected === props.value;
+    const guard = (e) => {
+        onKeyDown?.(e);
+        if (readOnly && e.key === " ")
+            e.preventDefault();
+    };
+    if (variant === "segmented") {
+        return (_jsxs(RadioGroupPrimitive.Item, { ref: ref, id: id, "data-slot": "radio-segment", "aria-describedby": describedBy, onKeyDown: guard, className: cn("relative inline-flex min-w-0 flex-auto items-center justify-center gap-1.5 whitespace-nowrap rounded-[calc(var(--radius)-5px)] font-medium text-fg-muted outline-none", "transition-[background-color,color,box-shadow] duration-150 hover:text-fg", "focus-visible:shadow-[0_0_0_2px_var(--ring)]", "data-[state=checked]:bg-(--segment-thumb) data-[state=checked]:text-fg data-[state=checked]:shadow-(--segment-thumb-shadow)", "disabled:pointer-events-none disabled:opacity-45 [&_svg]:shrink-0", size === "sm" ? "h-[calc(var(--control-h)-0.5rem-8px)] px-2.5 text-xs [&_svg]:size-3.5" : "h-[calc(var(--control-h)-8px)] px-3.5 text-[13px] [&_svg]:size-4", className), ...props, children: [icon, label ?? children] }));
+    }
+    const dot = (_jsx(RadioGroupPrimitive.Item, { ref: ref, id: id, "data-slot": "radio", "aria-labelledby": label ? labelId : undefined, "aria-describedby": mergeIds(descId, describedBy), onKeyDown: guard, className: cn(circle, size === "sm" ? "size-4" : "size-[18px]", controlClassName, !label && className), ...props, children: _jsx(RadioGroupPrimitive.Indicator, { "data-slot": "radio-indicator", className: cn("ui-radio-dot rounded-full bg-accent-ink", size === "sm" ? "size-1.5" : "size-2") }) }));
+    if (!label)
+        return dot;
+    const textSize = size === "sm" ? "text-[13px]" : "text-sm";
+    const descSize = size === "sm" ? "text-[11.5px]" : "text-xs";
+    if (variant === "card") {
+        return (_jsxs("label", { htmlFor: id, "data-slot": "radio-card", "data-state": checked ? "checked" : "unchecked", "data-disabled": props.disabled ? "" : undefined, className: cn("relative flex cursor-pointer items-start gap-3 rounded-ui border border-field-border bg-field p-3.5 transition-[background-color,border-color,box-shadow] duration-150", "hover:border-field-border-hover glass:border-field-border-hover", "has-[:focus-visible]:border-ring has-[:focus-visible]:shadow-[0_0_0_3px_var(--accent-soft)]", "data-[state=checked]:border-accent-ink data-[state=checked]:bg-[color-mix(in_oklch,var(--accent-base)_11%,transparent)] data-[state=checked]:shadow-[inset_0_0_0_1px_var(--accent-ink)]", "group-aria-invalid/radio:border-danger data-disabled:cursor-not-allowed data-disabled:opacity-50", className), children: [icon ? _jsx("span", { className: "mt-px flex size-8 shrink-0 items-center justify-center rounded-ui-sm bg-surface-2 text-fg-muted [&_svg]:size-4", children: icon }) : null, _jsxs("span", { className: "grid min-w-0 flex-1 gap-0.5", children: [_jsx("span", { id: labelId, className: cn("font-medium text-fg", textSize), children: label }), description ? (_jsx("span", { id: descId, className: cn("text-pretty leading-[1.45] text-fg-muted", descSize), children: description })) : null, children ? _jsx("span", { className: "mt-1.5 block", children: children }) : null] }), _jsx("span", { className: "mt-px", children: dot })] }));
+    }
+    return (_jsxs("div", { "data-slot": "radio-row", className: cn("flex items-start gap-2.5", className), children: [_jsx("span", { className: cn("flex shrink-0 items-center", size === "sm" ? "h-[19.5px]" : "h-5"), children: dot }), _jsxs("label", { htmlFor: id, className: cn("grid min-w-0 select-none gap-0.5", props.disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer"), children: [_jsx("span", { id: labelId, className: cn("leading-5 text-fg", textSize), children: label }), description ? (_jsx("span", { id: descId, className: cn("text-pretty leading-[1.45] text-fg-muted", descSize), children: description })) : null, children] })] }));
+});

package/dist/components/record-detail-layout.d.ts

@@ -0,0 +1,167 @@
+import * as React from "react";
+declare const recordLabels: {
+    pager: string;
+    pagerLabel: string;
+    previous: string;
+    next: string;
+    details: string;
+    facts: string;
+    saving: string;
+    notFound: string;
+    notFoundDescription: string;
+    forbidden: string;
+    forbiddenDescription: string;
+    loading: string;
+    resizeAside: string;
+};
+export type RecordLayoutLabels = Partial<typeof recordLabels>;
+export interface SidePaneHandleProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+    /** Current pane width in px. */
+    value: number;
+    min?: number;
+    max?: number;
+    /** Width restored on double-click. */
+    defaultValue?: number;
+    onValueChange: (width: number) => void;
+    /** Which edge of the pane the handle sits on. A pane at the inline end has its handle on its `start` edge. */
+    edge?: "start" | "end";
+    /** Keyboard step in px. Default 16 (Shift: ×4). */
+    step?: number;
+    /** Accessible name. */
+    "aria-label": string;
+}
+/**
+ * The drag edge of a side column (WAI-ARIA window splitter: focusable `separator` with
+ * `aria-valuenow`; arrows resize, Shift+arrows in bigger steps, Home/End jump to min/max,
+ * double-click resets). Logical: works in RTL.
+ */
+export declare const SidePaneHandle: React.ForwardRefExoticComponent<SidePaneHandleProps & React.RefAttributes<HTMLDivElement>>;
+export type RecordLayoutState = "ready" | "loading" | "not-found" | "forbidden";
+export interface RecordLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Side column at the inline `end` (default) or `start`. */
+    asidePosition?: "end" | "start";
+    /** Side column width in px (controlled with `onAsideWidthChange`). */
+    asideWidth?: number;
+    /** Initial width when uncontrolled. Default 320. */
+    defaultAsideWidth?: number;
+    onAsideWidthChange?: (width: number) => void;
+    /** Lets the user drag (or arrow-key) the side column's edge. */
+    resizable?: boolean;
+    minAsideWidth?: number;
+    maxAsideWidth?: number;
+    /** `loading` shows a skeleton page; `not-found` / `forbidden` a full-page empty state. */
+    state?: RecordLayoutState;
+    /** Replace the default not-found page. */
+    notFound?: React.ReactNode;
+    /** Replace the default forbidden page. */
+    forbidden?: React.ReactNode;
+    /** Hides header actions. Pair with read-only fields. */
+    readOnly?: boolean;
+    labels?: RecordLayoutLabels;
+}
+/**
+ * The "show one record" page: record header (media, title, status, key facts, actions, pager),
+ * a main column (tabs, overview, activity, related lists) and a side column of details.
+ * Below 42rem (672px) of its own width the side column moves under the header and its
+ * sections fold, and the key facts become a horizontal strip. It measures itself, not the
+ * viewport, so it works the same beside an App shell sidebar or in a split view.
+ *
+ * ```tsx
+ * <RecordLayout>
+ *   <RecordHeader media={<Avatar name="Jane Doe" size="xl" />} title="Jane Doe" subtitle="Head of Ops · Acme"
+ *     status={<Badge tone="success">Customer</Badge>} facts={[{ label: "Owner", value: "Meltem Aydın" }]}
+ *     pager={<RecordPager index={3} total={128} prevHref="/contacts/41" nextHref="/contacts/43" />} />
+ *   <RecordMain>{tabs}</RecordMain>
+ *   <RecordAside><RecordAsideSection title="Details"><DescriptionList … /></RecordAsideSection></RecordAside>
+ * </RecordLayout>
+ * ```
+ */
+export declare const RecordLayout: React.ForwardRefExoticComponent<RecordLayoutProps & React.RefAttributes<HTMLDivElement>>;
+export interface RecordFact {
+    label: React.ReactNode;
+    value: React.ReactNode;
+}
+export interface RecordHeaderProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
+    /** Avatar, logo or icon well. */
+    media?: React.ReactNode;
+    /** The page's `<h1>`. */
+    title: React.ReactNode;
+    /** "Head of Operations · Acme Corp". */
+    subtitle?: React.ReactNode;
+    /** Status badge next to the title. */
+    status?: React.ReactNode;
+    /** Key facts under the title: owner, stage, value, last contact. */
+    facts?: RecordFact[];
+    /** Header actions. Hidden when the layout is `readOnly`. */
+    actions?: React.ReactNode;
+    /** "← Contacts" link up a level. */
+    back?: {
+        href: string;
+        label: string;
+    };
+    /** `RecordPager` (top end). */
+    pager?: React.ReactNode;
+    /** Shows "Saving…" next to the title while inline edits save. */
+    saving?: boolean;
+    /** `sm` for nested or compact records. Default `md`. */
+    size?: "sm" | "md";
+    /** Skeleton for the title and subtitle. */
+    loading?: boolean;
+    labels?: RecordLayoutLabels;
+}
+/** The record's header: back link + pager, media, h1, status, subtitle, actions and key facts. */
+export declare const RecordHeader: React.ForwardRefExoticComponent<RecordHeaderProps & React.RefAttributes<HTMLElement>>;
+export interface RecordPagerProps extends Omit<React.HTMLAttributes<HTMLElement>, "onChange"> {
+    /** 1-based position of this record in the list it came from. */
+    index: number;
+    total: number;
+    prevHref?: string;
+    nextHref?: string;
+    /** Called instead of (or as well as) navigating. */
+    onPrevious?: () => void;
+    onNext?: () => void;
+    /** Register `k` (previous) and `j` (next). Ignored while typing in a field. Default `true`. */
+    shortcuts?: boolean;
+    labels?: RecordLayoutLabels;
+}
+/** "3 of 128" with previous/next buttons and `j` / `k` shortcuts. */
+export declare const RecordPager: React.ForwardRefExoticComponent<RecordPagerProps & React.RefAttributes<HTMLElement>>;
+export interface RecordMainProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Route tabs (`TabsLinkList`) above the content. For in-page tabs, put `<Tabs>` in `children`. */
+    tabs?: React.ReactNode;
+}
+/** The main column: tabs, overview, activity, related lists. */
+export declare const RecordMain: React.ForwardRefExoticComponent<RecordMainProps & React.RefAttributes<HTMLDivElement>>;
+export interface RecordSectionProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    /** Trailing control in the section header ("View all", "Log call"). */
+    action?: React.ReactNode;
+    /** Body padding. `none` for edge-to-edge tables and timelines. Default `md`. */
+    padding?: "none" | "md";
+}
+/** A titled card in the main column: overview, activity, related deals. `<section aria-labelledby>`. */
+export declare const RecordSection: React.ForwardRefExoticComponent<RecordSectionProps & React.RefAttributes<HTMLElement>>;
+export interface RecordAsideProps extends React.HTMLAttributes<HTMLElement> {
+    /** Accessible name of the complementary landmark. Default "Details". */
+    "aria-label"?: string;
+    labels?: RecordLayoutLabels;
+}
+/** The side column (`<aside>`): description lists, owners, tags, related records. */
+export declare const RecordAside: React.ForwardRefExoticComponent<RecordAsideProps & React.RefAttributes<HTMLElement>>;
+export interface RecordAsideSectionProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
+    title: React.ReactNode;
+    /** Trailing control ("Edit", "+"). */
+    action?: React.ReactNode;
+    /** Let the user fold the section on wide screens too. On narrow layouts every section folds. */
+    collapsible?: boolean;
+    /** Default `true` on wide layouts; narrow layouts start folded unless `open` is controlled. */
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Heading level to fit the page outline. Default 2. */
+    headingLevel?: 2 | 3;
+}
+/** A titled block in the side column; folds like an accordion item when space is short. */
+export declare const RecordAsideSection: React.ForwardRefExoticComponent<RecordAsideSectionProps & React.RefAttributes<HTMLElement>>;
+export {};