@igne-agency/react-web-ui 0.0.0-stage → 0.2.1

package/dist/components/date-range-field/date-range-field.js

@@ -0,0 +1,167 @@
+import { dayRangeToIso, isoToDay, isoToDayRange } from "../../lib/calendar/temporal-value.js";
+import { useFieldState } from "../field/use-field-state.js";
+import { useTimeZone } from "../time-zone-provider/time-zone-provider.js";
+import { DateRangeInput } from "./date-range-input.js";
+import { c } from "react/compiler-runtime";
+import { useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+// src/components/date-range-field/date-range-field.tsx
+/**
+* A labelled start and end date, typed or picked from one range calendar. Its
+* value is a pair of inclusive ISO plain-date strings;
+* `isoDateRangeToInstants` turns it into query bounds.
+*
+* @example
+* <DateRangeField
+* 	label="Declaration period"
+* 	optionalLabel="optional"
+* 	openCalendarLabel="Open calendar"
+* 	{...calendarLabels}
+* 	visibleMonths={narrow ? 1 : 2}
+* 	value={period}
+* 	onValueChange={setPeriod}
+* />
+*/
+var DateRangeField = (t0) => {
+	const $ = c(46);
+	const { label, description, errors, requiredness, optionalLabel, dirty, touched, pending, openCalendarLabel, previousMonthLabel, nextMonthLabel, monthLabel, yearLabel, noMatchingYearLabel, value, defaultValue, onValueChange, onBlur, minValue, maxValue, visibleMonths, startName, endName, disabled, readOnly, className } = t0;
+	const triggerRef = useRef(null);
+	const timeZone = useTimeZone();
+	let t1;
+	if ($[0] !== timeZone || $[1] !== value) {
+		t1 = isoToDayRange(value, timeZone);
+		$[0] = timeZone;
+		$[1] = value;
+		$[2] = t1;
+	} else t1 = $[2];
+	const range = t1;
+	const t2 = range !== null;
+	let t3;
+	if ($[3] !== dirty || $[4] !== disabled || $[5] !== errors || $[6] !== pending || $[7] !== readOnly || $[8] !== requiredness || $[9] !== t2 || $[10] !== touched) {
+		t3 = {
+			errors,
+			requiredness,
+			dirty,
+			touched,
+			pending,
+			disabled,
+			readOnly,
+			filled: t2
+		};
+		$[3] = dirty;
+		$[4] = disabled;
+		$[5] = errors;
+		$[6] = pending;
+		$[7] = readOnly;
+		$[8] = requiredness;
+		$[9] = t2;
+		$[10] = touched;
+		$[11] = t3;
+	} else t3 = $[11];
+	const field = useFieldState(t3);
+	const { phase } = field;
+	const fieldState = field.state;
+	let t4;
+	if ($[12] !== defaultValue || $[13] !== endName || $[14] !== field.disabled || $[15] !== field.invalid || $[16] !== fieldState || $[17] !== maxValue || $[18] !== minValue || $[19] !== monthLabel || $[20] !== nextMonthLabel || $[21] !== noMatchingYearLabel || $[22] !== onBlur || $[23] !== onValueChange || $[24] !== openCalendarLabel || $[25] !== phase || $[26] !== previousMonthLabel || $[27] !== range || $[28] !== readOnly || $[29] !== requiredness || $[30] !== startName || $[31] !== timeZone || $[32] !== value || $[33] !== visibleMonths || $[34] !== yearLabel) {
+		t4 = (t5) => {
+			const { labelId, describedBy, controlId } = t5;
+			return /* @__PURE__ */ jsx(DateRangeInput.Root, {
+				state: fieldState,
+				"aria-labelledby": labelId,
+				"aria-describedby": describedBy,
+				value: value === void 0 ? void 0 : range,
+				defaultValue: isoToDayRange(defaultValue, timeZone) ?? void 0,
+				onChange: (next) => onValueChange?.(dayRangeToIso(next)),
+				onBlur,
+				minValue: isoToDay(minValue, timeZone) ?? void 0,
+				maxValue: isoToDay(maxValue, timeZone) ?? void 0,
+				startName: startName ?? `${controlId}-start`,
+				endName: endName ?? `${controlId}-end`,
+				isDisabled: field.disabled,
+				isReadOnly: readOnly,
+				isRequired: requiredness === "required",
+				isInvalid: field.invalid,
+				children: (t6) => {
+					const { isFocusWithin } = t6;
+					return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(DateRangeInput.Group, {
+						state: {
+							...fieldState,
+							focused: isFocusWithin
+						},
+						children: [
+							/* @__PURE__ */ jsx(DateRangeInput.Input, { slot: "start" }),
+							/* @__PURE__ */ jsx(DateRangeInput.Separator, {}),
+							/* @__PURE__ */ jsx(DateRangeInput.Input, { slot: "end" }),
+							/* @__PURE__ */ jsx(DateRangeInput.Spacer, {}),
+							phase !== "fresh" && /* @__PURE__ */ jsx(DateRangeInput.Pending, {}),
+							/* @__PURE__ */ jsx(DateRangeInput.Trigger, {
+								label: openCalendarLabel,
+								ref: triggerRef
+							})
+						]
+					}), /* @__PURE__ */ jsx(DateRangeInput.Popup, {
+						triggerRef,
+						children: /* @__PURE__ */ jsx(DateRangeInput.Calendar, {
+							visibleMonths,
+							previousMonthLabel,
+							nextMonthLabel,
+							monthLabel,
+							yearLabel,
+							noMatchingYearLabel
+						})
+					})] });
+				}
+			});
+		};
+		$[12] = defaultValue;
+		$[13] = endName;
+		$[14] = field.disabled;
+		$[15] = field.invalid;
+		$[16] = fieldState;
+		$[17] = maxValue;
+		$[18] = minValue;
+		$[19] = monthLabel;
+		$[20] = nextMonthLabel;
+		$[21] = noMatchingYearLabel;
+		$[22] = onBlur;
+		$[23] = onValueChange;
+		$[24] = openCalendarLabel;
+		$[25] = phase;
+		$[26] = previousMonthLabel;
+		$[27] = range;
+		$[28] = readOnly;
+		$[29] = requiredness;
+		$[30] = startName;
+		$[31] = timeZone;
+		$[32] = value;
+		$[33] = visibleMonths;
+		$[34] = yearLabel;
+		$[35] = t4;
+	} else t4 = $[35];
+	let t5;
+	if ($[36] !== className || $[37] !== description || $[38] !== dirty || $[39] !== errors || $[40] !== label || $[41] !== optionalLabel || $[42] !== requiredness || $[43] !== t4 || $[44] !== touched) {
+		t5 = /* @__PURE__ */ jsx(DateRangeInput.Frame, {
+			label,
+			description,
+			errors,
+			requiredness,
+			optionalLabel,
+			dirty,
+			touched,
+			className,
+			children: t4
+		});
+		$[36] = className;
+		$[37] = description;
+		$[38] = dirty;
+		$[39] = errors;
+		$[40] = label;
+		$[41] = optionalLabel;
+		$[42] = requiredness;
+		$[43] = t4;
+		$[44] = touched;
+		$[45] = t5;
+	} else t5 = $[45];
+	return t5;
+};
+export { DateRangeField };

package/dist/components/date-range-field/date-range-input.d.ts

@@ -0,0 +1,51 @@
+import type { CalendarDate } from "@internationalized/date";
+import type { ReactNode, Ref } from "react";
+import { type DateRangePickerProps as AriaDateRangePickerProps } from "react-aria-components";
+import { TemporalFrame, TemporalGroup, TemporalPopup, TemporalRangeCalendar, TemporalRangeInput, TemporalRangeSeparator, TemporalRangeSpacer, type TemporalStateProps } from "../../lib/calendar/temporal.tsx";
+import { Field } from "../field/index.ts";
+export type DateRangeInputRootProps = AriaDateRangePickerProps<CalendarDate> & TemporalStateProps;
+declare const DateRangeInputRoot: ({ state, ...props }: DateRangeInputRootProps) => ReactNode;
+export type DateRangeInputTriggerProps = Readonly<{
+    /** Accessible name, such as "Open calendar". */
+    label: string;
+    ref?: Ref<HTMLButtonElement>;
+}>;
+declare const DateRangeInputTrigger: ({ label, ref, }: DateRangeInputTriggerProps) => ReactNode;
+/** The parts of a date range input. */
+export type DateRangeInputParts = Readonly<{
+    Frame: typeof TemporalFrame;
+    Root: typeof DateRangeInputRoot;
+    Group: typeof TemporalGroup;
+    Input: typeof TemporalRangeInput;
+    Separator: typeof TemporalRangeSeparator;
+    Spacer: typeof TemporalRangeSpacer;
+    Trigger: typeof DateRangeInputTrigger;
+    Popup: typeof TemporalPopup;
+    Calendar: typeof TemporalRangeCalendar;
+    Pending: typeof Field.Pending;
+}>;
+/**
+ * The styled parts of a react-aria `DateRangePicker`, a start and an end date
+ * entry plus a range calendar popover, carrying the field frame's ids rather
+ * than a label of their own. For the ordinary case, use `DateRangeField`.
+ *
+ * @example
+ * <DateRangeInput.Root aria-labelledby={labelId}>
+ * 	{({ isFocusWithin }) => (
+ * 		<>
+ * 			<DateRangeInput.Group state={{ focused: isFocusWithin }}>
+ * 				<DateRangeInput.Input slot="start" />
+ * 				<DateRangeInput.Separator />
+ * 				<DateRangeInput.Input slot="end" />
+ * 				<DateRangeInput.Spacer />
+ * 				<DateRangeInput.Trigger label="Open calendar" />
+ * 			</DateRangeInput.Group>
+ * 			<DateRangeInput.Popup>
+ * 				<DateRangeInput.Calendar {...calendarLabels} />
+ * 			</DateRangeInput.Popup>
+ * 		</>
+ * 	)}
+ * </DateRangeInput.Root>
+ */
+export declare const DateRangeInput: DateRangeInputParts;
+export {};

package/dist/components/date-range-field/date-range-input.js

@@ -0,0 +1,109 @@
+import SvgDateRange from "../../vendor/@material-design-icons/svg/outlined/date_range.js";
+import { todayIn } from "../../lib/calendar/temporal-value.js";
+import { TemporalFrame, TemporalGroup, TemporalPopup, TemporalRangeCalendar, TemporalRangeInput, TemporalRangeSeparator, TemporalRangeSpacer, TemporalTrigger } from "../../lib/calendar/temporal.js";
+import { Field } from "../field/field.js";
+import { fieldStateAttributes } from "../field/field-state.js";
+import { useTimeZone } from "../time-zone-provider/time-zone-provider.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { DateRangePicker } from "react-aria-components";
+// src/components/date-range-field/date-range-input.tsx
+var DateRangeInputRoot = (t0) => {
+	const $ = c(13);
+	let props;
+	let state;
+	if ($[0] !== t0) {
+		({state, ...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+		$[2] = state;
+	} else {
+		props = $[1];
+		state = $[2];
+	}
+	const t1 = useTimeZone();
+	let t2;
+	if ($[3] !== t1) {
+		t2 = todayIn(t1);
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== state) {
+		t3 = state ?? {};
+		$[5] = state;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t3) {
+		t4 = fieldStateAttributes(t3);
+		$[7] = t3;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== props || $[10] !== t2 || $[11] !== t4) {
+		t5 = /* @__PURE__ */ jsx(DateRangePicker, {
+			validationBehavior: "aria",
+			placeholderValue: t2,
+			...t4,
+			...props
+		});
+		$[9] = props;
+		$[10] = t2;
+		$[11] = t4;
+		$[12] = t5;
+	} else t5 = $[12];
+	return t5;
+};
+var DateRangeInputTrigger = (t0) => {
+	const $ = c(3);
+	const { label, ref } = t0;
+	let t1;
+	if ($[0] !== label || $[1] !== ref) {
+		t1 = /* @__PURE__ */ jsx(TemporalTrigger, {
+			icon: SvgDateRange,
+			label,
+			ref
+		});
+		$[0] = label;
+		$[1] = ref;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
+};
+/**
+* The styled parts of a react-aria `DateRangePicker`, a start and an end date
+* entry plus a range calendar popover, carrying the field frame's ids rather
+* than a label of their own. For the ordinary case, use `DateRangeField`.
+*
+* @example
+* <DateRangeInput.Root aria-labelledby={labelId}>
+* 	{({ isFocusWithin }) => (
+* 		<>
+* 			<DateRangeInput.Group state={{ focused: isFocusWithin }}>
+* 				<DateRangeInput.Input slot="start" />
+* 				<DateRangeInput.Separator />
+* 				<DateRangeInput.Input slot="end" />
+* 				<DateRangeInput.Spacer />
+* 				<DateRangeInput.Trigger label="Open calendar" />
+* 			</DateRangeInput.Group>
+* 			<DateRangeInput.Popup>
+* 				<DateRangeInput.Calendar {...calendarLabels} />
+* 			</DateRangeInput.Popup>
+* 		</>
+* 	)}
+* </DateRangeInput.Root>
+*/
+var DateRangeInput = {
+	Frame: TemporalFrame,
+	Root: DateRangeInputRoot,
+	Group: TemporalGroup,
+	Input: TemporalRangeInput,
+	Separator: TemporalRangeSeparator,
+	Spacer: TemporalRangeSpacer,
+	Trigger: DateRangeInputTrigger,
+	Popup: TemporalPopup,
+	Calendar: TemporalRangeCalendar,
+	Pending: Field.Pending
+};
+export { DateRangeInput };

package/dist/components/date-range-field/index.d.ts

@@ -0,0 +1,4 @@
+export { type IsoDateRange, isoDateRangeToInstants, } from "../../lib/calendar/temporal-value.ts";
+export * from "./date-range-field.tsx";
+export * from "./date-range-input.tsx";
+export * from "./tsf-date-range-field.tsx";

package/dist/components/date-range-field/index.js

@@ -0,0 +1,5 @@
+import { isoDateRangeToInstants } from "../../lib/calendar/temporal-value.js";
+import { DateRangeField } from "./date-range-field.js";
+import { DateRangeInput } from "./date-range-input.js";
+import { TSFDateRangeField } from "./tsf-date-range-field.js";
+export { DateRangeField, DateRangeInput, TSFDateRangeField, isoDateRangeToInstants };

package/dist/components/date-range-field/tsf-date-range-field.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+import { type ConnectedFieldProps } from "../../lib/forms/use-connected-field.ts";
+import { type DateRangeFieldProps } from "./date-range-field.tsx";
+export type TSFDateRangeFieldProps = Omit<DateRangeFieldProps, keyof ConnectedFieldProps | "value" | "defaultValue" | "onValueChange" | "startName" | "endName">;
+/**
+ * `DateRangeField` bound to the TanStack Form field it renders in, reached as
+ * `field.DateRangeField`. The field's value is a pair of inclusive ISO plain
+ * dates, or `null`.
+ *
+ * @example
+ * <form.AppField name="period">
+ * 	{field => <field.DateRangeField label="Period" optionalLabel="optional" openCalendarLabel="Open calendar" {...calendarLabels} />}
+ * </form.AppField>
+ */
+export declare const TSFDateRangeField: (props: TSFDateRangeFieldProps) => ReactNode;

package/dist/components/date-range-field/tsf-date-range-field.js

@@ -0,0 +1,58 @@
+import { useConnectedField } from "../../lib/forms/use-connected-field.js";
+import { DateRangeField } from "./date-range-field.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+// src/components/date-range-field/tsf-date-range-field.tsx
+/**
+* `DateRangeField` bound to the TanStack Form field it renders in, reached as
+* `field.DateRangeField`. The field's value is a pair of inclusive ISO plain
+* dates, or `null`.
+*
+* @example
+* <form.AppField name="period">
+* 	{field => <field.DateRangeField label="Period" optionalLabel="optional" openCalendarLabel="Open calendar" {...calendarLabels} />}
+* </form.AppField>
+*/
+var TSFDateRangeField = (props) => {
+	const $ = c(12);
+	const { field, props: t0 } = useConnectedField();
+	let connected;
+	let name;
+	if ($[0] !== t0) {
+		({name, ...connected} = t0);
+		$[0] = t0;
+		$[1] = connected;
+		$[2] = name;
+	} else {
+		connected = $[1];
+		name = $[2];
+	}
+	const t1 = `${name}.start`;
+	const t2 = `${name}.end`;
+	let t3;
+	if ($[3] !== field) {
+		t3 = (next) => field.handleChange(next);
+		$[3] = field;
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] !== connected || $[6] !== field.state.value || $[7] !== props || $[8] !== t1 || $[9] !== t2 || $[10] !== t3) {
+		t4 = /* @__PURE__ */ jsx(DateRangeField, {
+			...props,
+			...connected,
+			startName: t1,
+			endName: t2,
+			value: field.state.value,
+			onValueChange: t3
+		});
+		$[5] = connected;
+		$[6] = field.state.value;
+		$[7] = props;
+		$[8] = t1;
+		$[9] = t2;
+		$[10] = t3;
+		$[11] = t4;
+	} else t4 = $[11];
+	return t4;
+};
+export { TSFDateRangeField };

package/dist/components/detail-list/detail-list.css

@@ -0,0 +1,32 @@
+@layer kit.reset, kit.base, kit.components;
+@layer kit.components {
+  ._list_16bh4_3 {
+    display: grid;
+    gap: var(--detail-list-gap, var(--sys-unit-4));
+  }
+  ._iconRow_16bh4_7, ._row_16bh4_7 {
+    display: grid;
+    align-items: center;
+    gap: var(--detail-list-column-gap, var(--sys-unit-4));
+    overflow-wrap: anywhere;
+  }
+  ._row_16bh4_7 {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
+  }
+  ._row_16bh4_7:has(> ._action_16bh4_16) {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto;
+  }
+  ._iconRow_16bh4_7 {
+    grid-template-columns: auto minmax(0, 1fr);
+    align-items: start;
+  }
+  ._iconRow_16bh4_7:has(> ._action_16bh4_16) {
+    grid-template-columns: auto minmax(0, 1fr) auto;
+  }
+  ._term_16bh4_26 {
+    color: var(--detail-list-term-fg, var(--sys-color-text-muted));
+  }
+  ._action_16bh4_16 {
+    justify-self: end;
+  }
+}

package/dist/components/detail-list/detail-list.d.ts

@@ -0,0 +1,41 @@
+import type { ReactNode } from "react";
+import { type SvgComponent } from "../icon/icon.tsx";
+type PartProps = Readonly<{
+    className?: string;
+    children?: ReactNode;
+}>;
+type RowAction = Readonly<{
+    /** A control at the row's end, whose label names the term it acts on. */
+    action?: ReactNode;
+}>;
+export type DetailListRootProps = PartProps;
+export type DetailListRowProps = PartProps & RowAction & Readonly<{
+    /** What the detail is, such as "Phone number". */
+    term: ReactNode;
+}>;
+export type DetailListIconRowProps = PartProps & RowAction & Readonly<{
+    /** The pictogram that stands for the term. */
+    svg: SvgComponent;
+    /** The term the pictogram stands for, as its accessible name. */
+    label: string;
+}>;
+declare const Root: ({ className, children, }: DetailListRootProps) => ReactNode;
+declare const Row: ({ term, action, className, children, }: DetailListRowProps) => ReactNode;
+declare const IconRow: ({ svg, label, action, className, children, }: DetailListIconRowProps) => ReactNode;
+type DetailListNamespace = Readonly<{
+    Root: typeof Root;
+    Row: typeof Row;
+    IconRow: typeof IconRow;
+}>;
+/**
+ * Stored information, as the terms that name it and the details that answer
+ * them, in a description list. `IconRow` is a row whose term is a pictogram.
+ * A row's `action` sits at its end, and its control names the term it acts on.
+ *
+ * @example
+ * <DetailList.Root>
+ * 	<DetailList.Row term="Phone number">{client.phone}</DetailList.Row>
+ * </DetailList.Root>
+ */
+export declare const DetailList: DetailListNamespace;
+export {};

package/dist/components/detail-list/detail-list.js

@@ -0,0 +1,163 @@
+import { Icon } from "../icon/icon.js";
+import detail_list_module_default from "./detail-list.module.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+// src/components/detail-list/detail-list.tsx
+var Root = (t0) => {
+	const $ = c(5);
+	const { className, children } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = clsx(detail_list_module_default.list, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== children || $[3] !== t1) {
+		t2 = /* @__PURE__ */ jsx("dl", {
+			className: t1,
+			children
+		});
+		$[2] = children;
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	return t2;
+};
+var ActionSlot = (t0) => {
+	const $ = c(2);
+	const { action } = t0;
+	let t1;
+	if ($[0] !== action) {
+		t1 = action === void 0 ? null : /* @__PURE__ */ jsx("dd", {
+			className: detail_list_module_default.action,
+			children: action
+		});
+		$[0] = action;
+		$[1] = t1;
+	} else t1 = $[1];
+	return t1;
+};
+var Row = (t0) => {
+	const $ = c(13);
+	const { term, action, className, children } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = clsx(detail_list_module_default.row, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== term) {
+		t2 = /* @__PURE__ */ jsx("dt", {
+			className: detail_list_module_default.term,
+			children: term
+		});
+		$[2] = term;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== children) {
+		t3 = /* @__PURE__ */ jsx("dd", {
+			className: detail_list_module_default.detail,
+			children
+		});
+		$[4] = children;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== action) {
+		t4 = /* @__PURE__ */ jsx(ActionSlot, { action });
+		$[6] = action;
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== t1 || $[9] !== t2 || $[10] !== t3 || $[11] !== t4) {
+		t5 = /* @__PURE__ */ jsxs("div", {
+			className: t1,
+			children: [
+				t2,
+				t3,
+				t4
+			]
+		});
+		$[8] = t1;
+		$[9] = t2;
+		$[10] = t3;
+		$[11] = t4;
+		$[12] = t5;
+	} else t5 = $[12];
+	return t5;
+};
+var IconRow = (t0) => {
+	const $ = c(14);
+	const { svg, label, action, className, children } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = clsx(detail_list_module_default.iconRow, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== label || $[3] !== svg) {
+		t2 = /* @__PURE__ */ jsx("dt", {
+			className: detail_list_module_default.term,
+			children: /* @__PURE__ */ jsx(Icon, {
+				svg,
+				label
+			})
+		});
+		$[2] = label;
+		$[3] = svg;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== children) {
+		t3 = /* @__PURE__ */ jsx("dd", {
+			className: detail_list_module_default.detail,
+			children
+		});
+		$[5] = children;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== action) {
+		t4 = /* @__PURE__ */ jsx(ActionSlot, { action });
+		$[7] = action;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t1 || $[10] !== t2 || $[11] !== t3 || $[12] !== t4) {
+		t5 = /* @__PURE__ */ jsxs("div", {
+			className: t1,
+			children: [
+				t2,
+				t3,
+				t4
+			]
+		});
+		$[9] = t1;
+		$[10] = t2;
+		$[11] = t3;
+		$[12] = t4;
+		$[13] = t5;
+	} else t5 = $[13];
+	return t5;
+};
+/**
+* Stored information, as the terms that name it and the details that answer
+* them, in a description list. `IconRow` is a row whose term is a pictogram.
+* A row's `action` sits at its end, and its control names the term it acts on.
+*
+* @example
+* <DetailList.Root>
+* 	<DetailList.Row term="Phone number">{client.phone}</DetailList.Row>
+* </DetailList.Root>
+*/
+var DetailList = {
+	Root,
+	Row,
+	IconRow
+};
+export { DetailList };

package/dist/components/detail-list/detail-list.module.js

@@ -0,0 +1,14 @@
+import './detail-list.css';// src/components/detail-list/detail-list.module.scss
+var list = "_list_16bh4_3";
+var iconRow = "_iconRow_16bh4_7";
+var row = "_row_16bh4_7";
+var action = "_action_16bh4_16";
+var term = "_term_16bh4_26";
+var detail_list_module_default = {
+	list,
+	iconRow,
+	row,
+	action,
+	term
+};
+export { action, detail_list_module_default as default, iconRow, list, row, term };

package/dist/components/detail-list/index.d.ts

@@ -0,0 +1 @@
+export * from "./detail-list.tsx";

package/dist/components/detail-list/index.js

@@ -0,0 +1 @@
+export { DetailList } from "./detail-list.js";