@stll/ui 0.59.1 → 0.60.0

package/dist/components/button.native-classes.js

@@ -0,0 +1,176 @@
+import { BUTTON_PLAIN_VARIANT, BUTTON_VARIANT_TOKENS } from "./button.shared.js";
+//#region src/components/button.native-classes.ts
+/** A control's box: centred content inside the variant's border. */
+const CONTROL = "items-center justify-center border";
+/**
+* Every shared size in a phone's metrics. A text size grows to the platform's
+* 44-point touch target where the web relies on a coarse-pointer hit area; a
+* smaller control keeps its look and reaches the target through `slop`.
+*/
+const SIZES = {
+	chip: {
+		box: `${CONTROL} min-h-7 gap-1.5 rounded-full px-2.5`,
+		label: "text-xs",
+		slop: 8
+	},
+	default: {
+		box: `${CONTROL} min-h-11 gap-2 rounded-lg px-4`,
+		label: "",
+		slop: 0
+	},
+	icon: {
+		box: `${CONTROL} size-11 rounded-lg`,
+		label: "",
+		slop: 0
+	},
+	"icon-lg": {
+		box: `${CONTROL} size-12 rounded-lg`,
+		label: "",
+		slop: 0
+	},
+	"icon-sm": {
+		box: `${CONTROL} size-8 rounded-lg`,
+		label: "",
+		slop: 6
+	},
+	"icon-xl": {
+		box: `${CONTROL} size-11 rounded-full`,
+		label: "",
+		slop: 0
+	},
+	"icon-2xs": {
+		box: `${CONTROL} size-5 rounded-md`,
+		label: "",
+		slop: 12
+	},
+	"icon-xs": {
+		box: `${CONTROL} size-7 rounded-md`,
+		label: "",
+		slop: 8
+	},
+	inline: {
+		box: "items-center gap-1",
+		label: "",
+		slop: 8
+	},
+	lg: {
+		box: `${CONTROL} min-h-12 gap-2 rounded-lg px-5`,
+		label: "",
+		slop: 0
+	},
+	row: {
+		box: "min-h-11 w-full items-start gap-3 py-3",
+		label: "",
+		slop: 0
+	},
+	sm: {
+		box: `${CONTROL} min-h-9 gap-1.5 rounded-lg px-3`,
+		label: "text-sm",
+		slop: 0
+	},
+	xl: {
+		box: `${CONTROL} min-h-14 gap-2 rounded-lg px-6`,
+		label: "text-lg",
+		slop: 0
+	},
+	xs: {
+		box: `${CONTROL} min-h-7 gap-1 rounded-md px-2`,
+		label: "text-sm",
+		slop: 8
+	}
+};
+/**
+* A phone has no hover: a pressed button answers with the fill the web shows
+* on hover, or dims when it already has one. `selected` is the pressed state
+* held (a row open beside the list, a chosen option).
+*/
+const PRESS = {
+	default: {
+		pressed: "active:opacity-80",
+		selected: ""
+	},
+	destructive: {
+		pressed: "active:bg-destructive/18",
+		selected: ""
+	},
+	"destructive-outline": {
+		pressed: "active:bg-destructive/4",
+		selected: ""
+	},
+	"destructive-ghost": {
+		pressed: "active:bg-destructive/10",
+		selected: "bg-destructive/10"
+	},
+	ghost: {
+		pressed: "active:bg-accent",
+		selected: "bg-accent"
+	},
+	link: {
+		pressed: "active:opacity-60",
+		selected: ""
+	},
+	muted: {
+		pressed: "active:bg-accent",
+		selected: "bg-accent"
+	},
+	"muted-destructive": {
+		pressed: "active:bg-destructive/10",
+		selected: "bg-destructive/10"
+	},
+	outline: {
+		pressed: "active:bg-accent",
+		selected: "bg-accent"
+	},
+	secondary: {
+		pressed: "active:bg-secondary/80",
+		selected: ""
+	},
+	plain: {
+		pressed: "active:opacity-80",
+		selected: "border-primary"
+	}
+};
+/**
+* `plain` has no fill, no label colour and no size; like the web's, it does
+* not dim when disabled, because its content says it is unavailable. It keeps
+* a transparent border that only `selected` colours, the phone's stand-in for
+* the web's inset ring.
+*/
+const PLAIN = {
+	shape: {
+		box: "rounded-lg border-2 border-transparent",
+		label: "",
+		slop: 0
+	},
+	tokens: {
+		surface: "",
+		label: ""
+	}
+};
+/** The Pressable's and the label's classes, and the touch slop, for a button. */
+const nativeButtonClassNames = ({ className, inactive, selected, size, variant }) => {
+	const plain = variant === BUTTON_PLAIN_VARIANT;
+	const shape = plain ? PLAIN.shape : SIZES[size ?? "default"];
+	const tokens = plain ? PLAIN.tokens : BUTTON_VARIANT_TOKENS[variant ?? "default"];
+	const press = PRESS[variant ?? "default"];
+	const dimmed = plain ? "" : "opacity-64";
+	const join = (names) => names.filter((name) => name !== "").join(" ");
+	return {
+		label: join([
+			tokens.label,
+			variant === "link" ? "text-foreground underline" : "",
+			shape.label
+		]),
+		pressable: join([
+			plain ? "" : "flex-row",
+			tokens.surface,
+			shape.box,
+			inactive ? dimmed : press.pressed,
+			selected ? press.selected : "",
+			className ?? ""
+		]),
+		slop: shape.slop
+	};
+};
+//#endregion
+export { nativeButtonClassNames };

package/dist/components/button.native.d.ts

@@ -8,8 +8,11 @@ type ButtonProps = Omit<PressableProps, "children" | "disabled"> & ButtonContrac
  * The web's `Button` (./button.tsx) on a phone: the same variants and sizes,
  * read from ./button.shared.ts, on a Pressable. A string child is set as the
  * button's label in its variant's colour; any other child is laid out as
- * given, which is how a row holds a glyph beside two lines of text.
+ * given, which is how a row holds a glyph beside two lines of text. A
+ * `plain` button paints no fill or label colour and ignores `size`: its
+ * children are its look, stacked as in a View, inside a border that shows
+ * only when it is selected. Its classes come from ./button.native-classes.ts.
  */
-export declare const Button: ({ accessibilityState, children, className, disabled, hitSlop, icon, loading, size, variant, ...props }: ButtonProps) => import("react").JSX.Element;
+export declare const Button: ({ accessibilityState, children, className, disabled, hitSlop, icon, loading, selected: selectedProp, size, variant: variantProp, ...props }: ButtonProps) => import("react").JSX.Element;
 //#endregion
 export {};

package/dist/components/button.native.js

@@ -1,138 +1,28 @@
-import { BUTTON_VARIANT_TOKENS } from "./button.shared.js";
+import { nativeButtonClassNames } from "./button.native-classes.js";
 import { Loader } from "./loader.native.js";
 import { Text as Text$1 } from "./text.native.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Pressable } from "react-native";
 //#region src/components/button.native.tsx
-/** A control's box: centred content inside the variant's border. */
-const CONTROL = "items-center justify-center border";
-/**
-* Every shared size in a phone's metrics. A text size grows to the platform's
-* 44-point touch target where the web relies on a coarse-pointer hit area; a
-* smaller control keeps its look and reaches the target through `slop`.
-*/
-const SIZES = {
-	chip: {
-		box: `${CONTROL} min-h-7 gap-1.5 rounded-full px-2.5`,
-		label: "text-xs",
-		slop: 8
-	},
-	default: {
-		box: `${CONTROL} min-h-11 gap-2 rounded-lg px-4`,
-		label: "",
-		slop: 0
-	},
-	icon: {
-		box: `${CONTROL} size-11 rounded-lg`,
-		label: "",
-		slop: 0
-	},
-	"icon-lg": {
-		box: `${CONTROL} size-12 rounded-lg`,
-		label: "",
-		slop: 0
-	},
-	"icon-sm": {
-		box: `${CONTROL} size-8 rounded-lg`,
-		label: "",
-		slop: 6
-	},
-	"icon-xl": {
-		box: `${CONTROL} size-11 rounded-full`,
-		label: "",
-		slop: 0
-	},
-	"icon-xs": {
-		box: `${CONTROL} size-7 rounded-md`,
-		label: "",
-		slop: 8
-	},
-	lg: {
-		box: `${CONTROL} min-h-12 gap-2 rounded-lg px-5`,
-		label: "",
-		slop: 0
-	},
-	row: {
-		box: "min-h-11 w-full items-start gap-3 py-3",
-		label: "",
-		slop: 0
-	},
-	sm: {
-		box: `${CONTROL} min-h-9 gap-1.5 rounded-lg px-3`,
-		label: "text-sm",
-		slop: 0
-	},
-	xl: {
-		box: `${CONTROL} min-h-14 gap-2 rounded-lg px-6`,
-		label: "text-lg",
-		slop: 0
-	},
-	xs: {
-		box: `${CONTROL} min-h-7 gap-1 rounded-md px-2`,
-		label: "text-sm",
-		slop: 8
-	}
-};
-/**
-* A phone has no hover: a pressed button answers with the fill the web shows
-* on hover, or dims when it already has one. `selected` is the pressed state
-* held (a row open beside the list, a chosen option).
-*/
-const PRESS = {
-	default: {
-		pressed: "active:opacity-80",
-		selected: ""
-	},
-	destructive: {
-		pressed: "active:bg-destructive/18",
-		selected: ""
-	},
-	"destructive-outline": {
-		pressed: "active:bg-destructive/4",
-		selected: ""
-	},
-	"destructive-ghost": {
-		pressed: "active:bg-destructive/10",
-		selected: "bg-destructive/10"
-	},
-	ghost: {
-		pressed: "active:bg-accent",
-		selected: "bg-accent"
-	},
-	link: {
-		pressed: "active:opacity-60",
-		selected: ""
-	},
-	muted: {
-		pressed: "active:bg-accent",
-		selected: "bg-accent"
-	},
-	outline: {
-		pressed: "active:bg-accent",
-		selected: "bg-accent"
-	},
-	secondary: {
-		pressed: "active:bg-secondary/80",
-		selected: ""
-	}
-};
 /**
 * The web's `Button` (./button.tsx) on a phone: the same variants and sizes,
 * read from ./button.shared.ts, on a Pressable. A string child is set as the
 * button's label in its variant's colour; any other child is laid out as
-* given, which is how a row holds a glyph beside two lines of text.
+* given, which is how a row holds a glyph beside two lines of text. A
+* `plain` button paints no fill or label colour and ignores `size`: its
+* children are its look, stacked as in a View, inside a border that shows
+* only when it is selected. Its classes come from ./button.native-classes.ts.
 */
-const Button = ({ accessibilityState, children, className, disabled = false, hitSlop, icon, loading = false, size, variant, ...props }) => {
-	const shape = SIZES[size ?? "default"];
-	const tokens = BUTTON_VARIANT_TOKENS[variant ?? "default"];
-	const press = PRESS[variant ?? "default"];
+const Button = ({ accessibilityState, children, className, disabled = false, hitSlop, icon, loading = false, selected: selectedProp, size, variant: variantProp, ...props }) => {
+	const variant = variantProp ?? (size === "inline" ? "link" : void 0);
 	const inactive = disabled || loading;
-	const selected = accessibilityState?.selected === true;
-	const label = [
-		tokens.label,
-		variant === "link" ? "text-foreground underline" : "",
-		shape.label
-	].filter((name) => name !== "").join(" ");
+	const look = nativeButtonClassNames({
+		className,
+		inactive,
+		selected: selectedProp === true || accessibilityState?.selected === true,
+		size,
+		variant
+	});
 	return /* @__PURE__ */ jsxs(Pressable, {
 		accessibilityRole: "button",
 		accessibilityState: {
@@ -140,22 +30,15 @@ const Button = ({ accessibilityState, children, className, disabled = false, hit
 			busy: loading,
 			disabled: inactive
 		},
-		className: [
-			"flex-row",
-			tokens.surface,
-			shape.box,
-			inactive ? "opacity-64" : press.pressed,
-			selected ? press.selected : "",
-			className ?? ""
-		].filter((name) => name !== "").join(" "),
+		className: look.pressable,
 		disabled: inactive,
-		hitSlop: hitSlop ?? (shape.slop === 0 ? void 0 : shape.slop),
+		hitSlop: hitSlop ?? (look.slop === 0 ? void 0 : look.slop),
 		...props,
 		children: [loading ? /* @__PURE__ */ jsx(Loader, {
 			size: "sm",
 			variant: "decorative"
 		}) : icon, typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsx(Text$1, {
-			className: label,
+			className: look.label,
 			variant: "button",
 			children
 		}) : children]

package/dist/components/button.shared.d.ts

@@ -34,6 +34,10 @@ export declare const BUTTON_VARIANT_TOKENS: {
     readonly surface: "border-transparent";
     readonly label: "text-muted-foreground";
   };
+  readonly "muted-destructive": {
+    readonly surface: "border-transparent";
+    readonly label: "text-muted-foreground";
+  };
   readonly outline: {
     readonly surface: "border-input bg-popover";
     readonly label: "text-foreground";
@@ -43,9 +47,19 @@ export declare const BUTTON_VARIANT_TOKENS: {
     readonly label: "text-secondary-foreground";
   };
 };
-export type ButtonVariant = keyof typeof BUTTON_VARIANT_TOKENS;
+/** A variant painted from its shared tokens above. */
+export type ButtonTokenVariant = keyof typeof BUTTON_VARIANT_TOKENS;
+/**
+ * `plain`: a click target whose look is its content (a card, a thumbnail, a
+ * cell, a passage). It has no tokens: neither renderer paints a box, border,
+ * type or press motion for it, and each keeps everything else its button
+ * owns (the disabled disposition, and on the web the tooltip and the focus
+ * ring). A `size` does not apply to it.
+ */
+export declare const BUTTON_PLAIN_VARIANT = "plain";
+export type ButtonVariant = ButtonTokenVariant | typeof BUTTON_PLAIN_VARIANT;
 /** Every size a button comes in, on every platform. */
-export declare const BUTTON_SIZES: readonly ["chip", "default", "icon", "icon-lg", "icon-sm", "icon-xl", "icon-xs", "lg", "row", "sm", "xl", "xs"];
+export declare const BUTTON_SIZES: readonly ["chip", "default", "icon", "icon-lg", "icon-sm", "icon-xl", "icon-2xs", "icon-xs", "inline", "lg", "row", "sm", "xl", "xs"];
 export type ButtonSize = (typeof BUTTON_SIZES)[number];
 /**
  * The props every button renderer accepts, with one meaning. A renderer adds
@@ -60,6 +74,14 @@ export type ButtonContract = {
   disabled?: boolean;
   /** A glyph before the label. */
   icon?: ReactNode;
+  /**
+   * The current choice in a set (a picked option, the active filter tab, the
+   * open item of a list): shows the variant's selected treatment, which is
+   * distinct from its hover or press. The accessibility state stays the
+   * caller's, because which one is right depends on the widget the button is
+   * part of.
+   */
+  selected?: boolean | undefined;
   children?: ReactNode;
 };
 //#endregion

package/dist/components/button.shared.js

@@ -33,6 +33,10 @@ const BUTTON_VARIANT_TOKENS = {
 		surface: "border-transparent",
 		label: "text-muted-foreground"
 	},
+	"muted-destructive": {
+		surface: "border-transparent",
+		label: "text-muted-foreground"
+	},
 	outline: {
 		surface: "border-input bg-popover",
 		label: "text-foreground"
@@ -42,6 +46,14 @@ const BUTTON_VARIANT_TOKENS = {
 		label: "text-secondary-foreground"
 	}
 };
+/**
+* `plain`: a click target whose look is its content (a card, a thumbnail, a
+* cell, a passage). It has no tokens: neither renderer paints a box, border,
+* type or press motion for it, and each keeps everything else its button
+* owns (the disabled disposition, and on the web the tooltip and the focus
+* ring). A `size` does not apply to it.
+*/
+const BUTTON_PLAIN_VARIANT = "plain";
 /** Every size a button comes in, on every platform. */
 const BUTTON_SIZES = [
 	"chip",
@@ -50,7 +62,9 @@ const BUTTON_SIZES = [
 	"icon-lg",
 	"icon-sm",
 	"icon-xl",
+	"icon-2xs",
 	"icon-xs",
+	"inline",
 	"lg",
 	"row",
 	"sm",
@@ -58,4 +72,4 @@ const BUTTON_SIZES = [
 	"xs"
 ];
 //#endregion
-export { BUTTON_SIZES, BUTTON_VARIANT_TOKENS };
+export { BUTTON_PLAIN_VARIANT, BUTTON_SIZES, BUTTON_VARIANT_TOKENS };

package/dist/components/combobox.d.ts

@@ -14,7 +14,9 @@ declare const ComboboxInput: ({ className, showTrigger, showClear, startAddon, s
   size?: ControlSize | number;
   ref?: React$1.Ref<HTMLInputElement>;
 }) => React$1.JSX.Element;
-declare const ComboboxTrigger: ({ className, ...props }: Combobox$1.Trigger.Props) => React$1.JSX.Element;
+declare const ComboboxTrigger: ({ className, variant, ...props }: Combobox$1.Trigger.Props & {
+  variant?: "plain" | "field";
+}) => React$1.JSX.Element;
 declare const ComboboxPopup: ({ className, children, side, sideOffset, alignOffset, align, ...props }: Combobox$1.Popup.Props & {
   align?: Combobox$1.Positioner.Props["align"];
   sideOffset?: Combobox$1.Positioner.Props["sideOffset"];

package/dist/components/combobox.js

@@ -5,6 +5,7 @@ import { OVERLAY_LAYER_CLASS_NAMES } from "../lib/overlay-layer.js";
 import { ScrollArea } from "./scroll-area.js";
 import { containedHandler } from "../hooks/use-contained-handler.js";
 import { CONTROL_SIZE } from "../lib/control-size.js";
+import "../lib/field-trigger.js";
 import { Input } from "./input.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React$1 from "react";
@@ -94,8 +95,8 @@ const COMBOBOX_ACTION_SIZE_CLASS_NAMES = {
 	[CONTROL_SIZE.default]: "end-0.5",
 	[CONTROL_SIZE.lg]: "end-0.5"
 };
-const ComboboxTrigger = ({ className, ...props }) => /* @__PURE__ */ jsx(Combobox$1.Trigger, {
-	className,
+const ComboboxTrigger = ({ className, variant = "plain", ...props }) => /* @__PURE__ */ jsx(Combobox$1.Trigger, {
+	className: cn(variant === "field" && "border-input bg-background text-foreground ring-ring/24 focus-visible:border-ring aria-invalid:border-destructive/36 focus-visible:aria-invalid:border-destructive/64 focus-visible:aria-invalid:ring-destructive/16 dark:bg-input/32 dark:aria-invalid:ring-destructive/24 relative inline-flex min-h-9 w-full min-w-36 items-center justify-center gap-2 rounded-lg border px-[calc(--spacing(3)-1px)] text-start text-base shadow-xs/5 outline-none select-none not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] focus-visible:ring-[3px] data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-8 sm:text-sm dark:not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [[data-disabled],:focus-visible,[aria-invalid],[data-pressed]]:shadow-none", className),
 	"data-slot": "combobox-trigger",
 	...props
 });

package/dist/components/date-picker-popover.d.ts

@@ -39,6 +39,8 @@ type DatePickerPopoverProps = {
    *  the control still has height; pass a call-to-action ("Select date…") to
    *  make the empty state self-explanatory. */
   placeholderLabel?: string;
+  /** Replaces the formatted date in the trigger, as a week range does. */
+  triggerLabel?: string;
   clearLabel?: string;
   defaultOpen?: boolean;
   open?: boolean;

package/dist/components/date-picker-popover.js

@@ -3,8 +3,8 @@ import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from "../icons.js";
 import { cn } from "../lib/utils.js";
 import { Button } from "./button.js";
 import { DirectionalIcon } from "./directional-icon.js";
-import { Input } from "./input.js";
 import { FIELD_TRIGGER_CLASS_NAME } from "../lib/field-trigger.js";
+import { Input } from "./input.js";
 import { getLocaleWeekInfo, getWeekendDays } from "../lib/week.js";
 import { DATE_PICKER_MODE, formatDateTimeValue, getHourOptions, getMinuteOptions, getTimeFieldNames, joinPickerTime, localDateFromTimestamp, millisecondsUntilNextLocalDate, parseDateTimeValue, resolveCalendarViewMonth, shiftCalendarDate, splitPickerTime } from "./date-picker-popover.logic.js";
 import { Popover, PopoverContent as PopoverPopup, PopoverTrigger } from "./popover.js";
@@ -252,8 +252,10 @@ const PICKER_SIZE_CLASS_NAMES = {
 		cell: "pointer-coarse:min-h-11 pointer-coarse:text-sm"
 	}
 };
+/** The trigger keeps its height with an em dash when nothing has a label. */
+const firstLabel = (...labels) => labels.find((label) => label !== null && label !== void 0) ?? "—";
 const DatePickerPopoverContent = (props) => {
-	const { id, labelledBy, className, disabled, hideClear, size = "compact", variant = "inline", mode = DATE_PICKER_MODE.date, value: rawValue, onChange, locale, isOverdue = false, showIcon = true, placeholderLabel, clearLabel = "Clear date", defaultOpen = false, open: controlledOpen, triggerRef, focusTriggerOnOpen = false, dateInputLabel, outOfRangeLabel, onOpenChange, todayLabel: todayLabelProp, overdueLabel, minDate, maxDate, isDateDisabled, layer = "default", today } = props;
+	const { id, labelledBy, className, disabled, hideClear, size = "compact", variant = "inline", mode = DATE_PICKER_MODE.date, value: rawValue, onChange, locale, isOverdue = false, showIcon = true, placeholderLabel, triggerLabel, clearLabel = "Clear date", defaultOpen = false, open: controlledOpen, triggerRef, focusTriggerOnOpen = false, dateInputLabel, outOfRangeLabel, onOpenChange, todayLabel: todayLabelProp, overdueLabel, minDate, maxDate, isDateDisabled, layer = "default", today } = props;
 	const selection = resolveSelection(mode, rawValue);
 	const value = selection.date;
 	const labels = resolvePopupLabels(props);
@@ -300,7 +302,7 @@ const DatePickerPopoverContent = (props) => {
 		isDayDisabled,
 		onChange
 	});
-	const displayLabel = formatSelection(locale, selection) ?? placeholderLabel ?? "—";
+	const displayLabel = firstLabel(triggerLabel, formatSelection(locale, selection), placeholderLabel);
 	const selectDay = (date) => {
 		switch (selection.mode) {
 			case DATE_PICKER_MODE.date:

package/dist/components/details-grid.d.ts

@@ -1,10 +1,29 @@
 import * as React$1 from "react";
 //#region src/components/details-grid.d.ts
-declare const DetailsGrid: ({ className, ...props }: React$1.ComponentProps<"dl">) => React$1.JSX.Element;
+/**
+ * - `sheet`: a fact sheet; small uppercase labels, up to three pairs per row
+ *   as the container widens.
+ * - `list`: one pair per row in body type with a muted label, for a short
+ *   list inside a card or dialog (who is signed in, which organization).
+ */
+type DetailsVariant = "sheet" | "list";
+/**
+ * - `horizontal`: each label beside its value. In a `list`, every label
+ *   shares one column sized to the longest.
+ * - `vertical`: each label above its value, for values too long to share a
+ *   row (a server address, a list of origins).
+ */
+type DetailsOrientation = "horizontal" | "vertical";
+type DetailsGridProps = React$1.ComponentProps<"dl"> & {
+  orientation?: DetailsOrientation;
+  variant?: DetailsVariant;
+};
+declare const DetailsGrid: ({ className, orientation, variant, ...props }: DetailsGridProps) => React$1.JSX.Element;
 type DetailsItemProps = React$1.ComponentProps<"div"> & {
   label: React$1.ReactNode;
+  /** `wide` spans every pair column of a `sheet`. */
   span?: "wide";
 };
 declare const DetailsItem: ({ label, children, span, className, ...props }: DetailsItemProps) => React$1.JSX.Element;
 //#endregion
-export { DetailsGrid, DetailsItem };
+export { DetailsGrid, DetailsItem, type DetailsOrientation, type DetailsVariant };

package/dist/components/details-grid.js

@@ -1,26 +1,81 @@
 import { cn } from "../lib/utils.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
 //#region src/components/details-grid.tsx
-const DetailsGrid = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
-	className: "@container min-w-0 [contain-intrinsic-inline-size:20rem]",
-	"data-slot": "details-grid-container",
-	children: /* @__PURE__ */ jsx("dl", {
-		className: cn("grid grid-cols-[repeat(auto-fit,minmax(min(100%,20rem),1fr))] gap-x-6 gap-y-2 font-sans @min-[64rem]:grid-cols-3", className),
-		"data-slot": "details-grid",
-		...props
-	})
-});
-const DetailsItem = ({ label, children, span, className, ...props }) => /* @__PURE__ */ jsxs("div", {
-	className: cn("grid min-w-0 grid-cols-[minmax(0,7rem)_minmax(0,1fr)] items-start gap-x-4 text-xs", span === "wide" && "col-span-full", className),
-	"data-slot": "details-item",
-	...props,
-	children: [/* @__PURE__ */ jsx("dt", {
-		className: "text-foreground-disabled min-w-0 font-medium tracking-wide wrap-anywhere uppercase",
-		children: label
-	}), /* @__PURE__ */ jsx("dd", {
-		className: "text-foreground-strong-muted min-w-0 wrap-anywhere",
-		children
-	})]
+const DetailsShapeContext = createContext({
+	orientation: "horizontal",
+	variant: "sheet"
 });
+const LIST_CLASS_NAME = {
+	horizontal: "grid grid-cols-[auto_minmax(0,1fr)] items-center gap-x-4 gap-y-1 text-sm",
+	vertical: "flex min-w-0 flex-col gap-2 text-sm"
+};
+const ITEM_CLASS_NAME = {
+	list: {
+		horizontal: "col-span-full grid grid-cols-subgrid items-center",
+		vertical: "flex min-w-0 flex-col gap-2"
+	},
+	sheet: {
+		horizontal: "grid min-w-0 grid-cols-[minmax(0,7rem)_minmax(0,1fr)] items-start gap-x-4 text-xs",
+		vertical: "flex min-w-0 flex-col gap-1 text-xs"
+	}
+};
+const LABEL_CLASS_NAME = {
+	list: {
+		horizontal: "text-muted-foreground min-w-0",
+		vertical: "font-medium"
+	},
+	sheet: {
+		horizontal: "text-foreground-disabled min-w-0 font-medium tracking-wide wrap-anywhere uppercase",
+		vertical: "text-foreground-disabled min-w-0 font-medium tracking-wide wrap-anywhere uppercase"
+	}
+};
+const VALUE_CLASS_NAME = {
+	list: "min-w-0 wrap-anywhere",
+	sheet: "text-foreground-strong-muted min-w-0 wrap-anywhere"
+};
+const DetailsGrid = ({ className, orientation = "horizontal", variant = "sheet", ...props }) => {
+	const shape = {
+		orientation,
+		variant
+	};
+	if (variant === "list") return /* @__PURE__ */ jsx(DetailsShapeContext.Provider, {
+		value: shape,
+		children: /* @__PURE__ */ jsx("dl", {
+			className: cn(LIST_CLASS_NAME[orientation], className),
+			"data-orientation": orientation,
+			"data-slot": "details-grid",
+			"data-variant": variant,
+			...props
+		})
+	});
+	return /* @__PURE__ */ jsx(DetailsShapeContext.Provider, {
+		value: shape,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "@container min-w-0 [contain-intrinsic-inline-size:20rem]",
+			"data-slot": "details-grid-container",
+			children: /* @__PURE__ */ jsx("dl", {
+				className: cn("grid grid-cols-[repeat(auto-fit,minmax(min(100%,20rem),1fr))] gap-x-6 gap-y-2 font-sans @min-[64rem]:grid-cols-3", className),
+				"data-slot": "details-grid",
+				...props
+			})
+		})
+	});
+};
+const DetailsItem = ({ label, children, span, className, ...props }) => {
+	const { orientation, variant } = useContext(DetailsShapeContext);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn(ITEM_CLASS_NAME[variant][orientation], variant === "sheet" && span === "wide" && "col-span-full", className),
+		"data-slot": "details-item",
+		...props,
+		children: [/* @__PURE__ */ jsx("dt", {
+			className: LABEL_CLASS_NAME[variant][orientation],
+			children: label
+		}), /* @__PURE__ */ jsx("dd", {
+			className: VALUE_CLASS_NAME[variant],
+			children
+		})]
+	});
+};
 //#endregion
 export { DetailsGrid, DetailsItem };