@thewhatmatters/wmds 0.4.0 → 0.4.2

package/dist/components/molecules/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,188 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { ButtonIcon as t } from "../../atoms/Button/ButtonIcon.js";
+import { IconButton as n } from "../../atoms/IconButton/IconButton.js";
+import { Dropdown as r } from "../Dropdown/Dropdown.js";
+import { measureDropdownMenuStyle as i } from "../Dropdown/dropdownMenuPosition.js";
+import { breadcrumbItemClasses as a, breadcrumbLinkClasses as o, breadcrumbListClasses as s, breadcrumbMoreClasses as c, breadcrumbPageClasses as l, breadcrumbSeparatorClasses as u, breadcrumbSeparators as d, breadcrumbSlashClasses as f, breadcrumbTextClasses as p, breadcrumbVariantClasses as m, breadcrumbVariants as h } from "./breadcrumbStyles.js";
+import { Fragment as g, useCallback as _, useEffect as v, useId as y, useLayoutEffect as b, useRef as x, useState as S } from "react";
+import { ChevronRight as C, Ellipsis as w } from "lucide-react";
+import { jsx as T, jsxs as E } from "react/jsx-runtime";
+import { useRender as D } from "@base-ui/react/use-render";
+//#region src/components/molecules/Breadcrumb/Breadcrumb.tsx
+var O = {
+	nav: "Breadcrumb",
+	more: (e) => `Show ${e} more ${e === 1 ? "page" : "pages"}`
+};
+function k(e, t = 4) {
+	let n = Math.max(3, Math.floor(t)), r = e.length - 1, i = (e, t) => ({
+		kind: "item",
+		item: e,
+		current: t === r
+	});
+	if (e.length <= n) return e.map(i);
+	let a = n - 2;
+	return [
+		i(e[0], 0),
+		{
+			kind: "more",
+			items: e.slice(1, e.length - a)
+		},
+		...e.slice(e.length - a).map((t, n) => i(t, e.length - a + n))
+	];
+}
+function A(e) {
+	return e.id ?? e.href ?? e.label;
+}
+function j(e) {
+	return /* @__PURE__ */ T("a", { href: e.href });
+}
+function M(e) {
+	return e.href != null;
+}
+function N({ item: e, renderLink: t }) {
+	return D({
+		render: t(e),
+		props: {
+			className: o,
+			title: e.label,
+			children: e.label
+		}
+	});
+}
+function P({ separator: e }) {
+	return /* @__PURE__ */ T("li", {
+		role: "presentation",
+		"aria-hidden": "true",
+		className: u,
+		children: e === "slash" ? /* @__PURE__ */ T("span", {
+			className: f,
+			children: "/"
+		}) : /* @__PURE__ */ T(t, {
+			size: "xs",
+			children: /* @__PURE__ */ T(C, {})
+		})
+	});
+}
+function F({ items: e, label: t, renderLink: a }) {
+	let o = y(), s = x(null), l = x(null), u = x(null), [d, f] = S(!1), [p, m] = S(null), h = x(!1), g = _(() => {
+		let t = l.current;
+		t != null && m(i(t, e.map((e) => ({ label: e.label })), {
+			align: "start",
+			widthMode: "content"
+		}));
+	}, [e]), C = _((e) => {
+		f(!1), m(null), e && l.current?.querySelector("button")?.focus();
+	}, []);
+	b(() => {
+		if (d) return g(), window.addEventListener("resize", g), window.addEventListener("scroll", g, !0), () => {
+			window.removeEventListener("resize", g), window.removeEventListener("scroll", g, !0);
+		};
+	}, [d, g]), v(() => {
+		!d || p == null || !h.current || (h.current = !1, u.current?.querySelector("a, [href], button")?.focus());
+	}, [d, p]), v(() => {
+		if (!d) return;
+		function e(e) {
+			s.current != null && !s.current.contains(e.target) && C(!1);
+		}
+		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+	}, [d, C]);
+	function D() {
+		return [...u.current?.querySelectorAll("a, [href], button") ?? []];
+	}
+	function O(e) {
+		if (!d) {
+			e.key === "ArrowDown" && (e.preventDefault(), h.current = !0, f(!0));
+			return;
+		}
+		if (e.key === "Escape") {
+			e.preventDefault(), C(!0);
+			return;
+		}
+		if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
+		let t = D();
+		if (t.length === 0) return;
+		e.preventDefault();
+		let n = t.indexOf(document.activeElement), r = e.key === "ArrowDown" ? 1 : -1;
+		t[n === -1 ? r === 1 ? 0 : t.length - 1 : (n + r + t.length) % t.length]?.focus();
+	}
+	function k(e) {
+		if (!d) return;
+		let t = e.relatedTarget;
+		(t == null || !s.current?.contains(t)) && C(!1);
+	}
+	return /* @__PURE__ */ E("div", {
+		ref: s,
+		className: c,
+		onKeyDown: O,
+		onBlur: k,
+		children: [/* @__PURE__ */ T("div", {
+			ref: l,
+			className: "inline-flex",
+			children: /* @__PURE__ */ T(n, {
+				size: "sm",
+				icon: /* @__PURE__ */ T(w, {}),
+				"aria-label": t,
+				title: "",
+				"aria-expanded": d,
+				"aria-controls": d ? o : void 0,
+				onClick: () => {
+					d ? C(!1) : (h.current = !0, f(!0));
+				}
+			})
+		}), d && p != null ? /* @__PURE__ */ T("div", {
+			ref: u,
+			children: /* @__PURE__ */ T(r.Menu, {
+				id: o,
+				"aria-label": t,
+				style: p,
+				children: e.map((e) => /* @__PURE__ */ T("li", { children: M(e) ? /* @__PURE__ */ T(r.Item, {
+					truncate: !1,
+					render: a(e),
+					onClick: () => C(!1),
+					children: e.label
+				}) : /* @__PURE__ */ T(r.Item, {
+					truncate: !1,
+					disabled: !0,
+					children: e.label
+				}) }, A(e)))
+			})
+		}) : null]
+	});
+}
+function I({ items: t, maxItems: n = 4, separator: r = "chevron", variant: i = "sans", renderLink: o = j, labels: c, className: u }) {
+	let d = {
+		...O,
+		...c
+	}, f = k(t, n);
+	return /* @__PURE__ */ T("nav", {
+		"aria-label": d.nav,
+		className: u,
+		"data-variant": i,
+		children: /* @__PURE__ */ T("ol", {
+			className: e(s, m[i]),
+			children: f.map((e, t) => /* @__PURE__ */ E(g, { children: [t > 0 ? /* @__PURE__ */ T(P, { separator: r }) : null, /* @__PURE__ */ T("li", {
+				className: a,
+				children: e.kind === "more" ? /* @__PURE__ */ T(F, {
+					items: e.items,
+					label: d.more(e.items.length),
+					renderLink: o
+				}) : e.current ? /* @__PURE__ */ T("span", {
+					className: l,
+					"aria-current": "page",
+					title: e.item.label,
+					children: e.item.label
+				}) : M(e.item) ? /* @__PURE__ */ T(N, {
+					item: e.item,
+					renderLink: o
+				}) : /* @__PURE__ */ T("span", {
+					className: p,
+					title: e.item.label,
+					children: e.item.label
+				})
+			})] }, e.kind === "more" ? "more" : A(e.item)))
+		})
+	});
+}
+//#endregion
+export { I as Breadcrumb, O as breadcrumbDefaultLabels, d as breadcrumbSeparators, k as breadcrumbSlots, h as breadcrumbVariants };

package/dist/components/molecules/Breadcrumb/breadcrumbStyles.d.ts

@@ -0,0 +1,21 @@
+export declare const breadcrumbSeparators: readonly ["chevron", "slash"];
+/** Between crumbs: a chevron (default) or a slash. */
+export type BreadcrumbSeparator = (typeof breadcrumbSeparators)[number];
+export declare const breadcrumbVariants: readonly ["sans", "mono"];
+/** `sans` (default) — body type. `mono` — `type-eyebrow` caps, for editorial pages beside **SectionCaption**. */
+export type BreadcrumbVariant = (typeof breadcrumbVariants)[number];
+export declare const breadcrumbListClasses = "m-0 flex min-w-0 list-none flex-wrap items-center gap-x-1.5 gap-y-1 p-0 sm:gap-x-2";
+export declare const breadcrumbVariantClasses: Record<BreadcrumbVariant, string>;
+export declare const breadcrumbItemClasses = "inline-flex min-w-0 items-center";
+/** A link crumb — muted, darkening with an underline on hover, the focus ring. */
+export declare const breadcrumbLinkClasses: string;
+/** The current page — the last crumb, not a link. */
+export declare const breadcrumbPageClasses: string;
+/** A crumb with no link that is not the current page. */
+export declare const breadcrumbTextClasses: string;
+export declare const breadcrumbSeparatorClasses = "inline-flex shrink-0 items-center text-muted";
+/** The slash separator — a character in the crumbs' own type. */
+export declare const breadcrumbSlashClasses = "select-none";
+/** Holds the 36px "…" control in the text line without growing the row. */
+export declare const breadcrumbMoreClasses = "relative -mx-2.5 -my-2 inline-flex";
+//# sourceMappingURL=breadcrumbStyles.d.ts.map

package/dist/components/molecules/Breadcrumb/breadcrumbStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Breadcrumb/breadcrumbStyles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,oBAAoB,+BAAgC,CAAC;AAElE,sDAAsD;AACtD,MAAM,MAAM,mBAAmB,GAAG,CAAC,OAAO,oBAAoB,CAAC,CAAC,MAAM,CAAC,CAAC;AAExE,eAAO,MAAM,kBAAkB,2BAA4B,CAAC;AAE5D,iHAAiH;AACjH,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAC;AAEpE,eAAO,MAAM,qBAAqB,uFAAuF,CAAC;AAE1H,eAAO,MAAM,wBAAwB,EAAE,MAAM,CAAC,iBAAiB,EAAE,MAAM,CAGtE,CAAC;AAEF,eAAO,MAAM,qBAAqB,qCAAqC,CAAC;AAKxE,kFAAkF;AAClF,eAAO,MAAM,qBAAqB,QAOjC,CAAC;AAEF,qDAAqD;AACrD,eAAO,MAAM,qBAAqB,QAAwC,CAAC;AAE3E,yDAAyD;AACzD,eAAO,MAAM,qBAAqB,QAA2C,CAAC;AAE9E,eAAO,MAAM,0BAA0B,iDAAiD,CAAC;AAEzF,iEAAiE;AACjE,eAAO,MAAM,sBAAsB,gBAAgB,CAAC;AAEpD,2EAA2E;AAC3E,eAAO,MAAM,qBAAqB,uCAAuC,CAAC"}

package/dist/components/molecules/Breadcrumb/breadcrumbStyles.js

@@ -0,0 +1,11 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { typographyClass as t } from "../../../lib/typography.js";
+import { motionTransition as n } from "../../../lib/motion.js";
+//#region src/components/molecules/Breadcrumb/breadcrumbStyles.ts
+var r = ["chevron", "slash"], i = ["sans", "mono"], a = "m-0 flex min-w-0 list-none flex-wrap items-center gap-x-1.5 gap-y-1 p-0 sm:gap-x-2", o = {
+	sans: e(t("body"), "text-muted"),
+	mono: t("eyebrow")
+}, s = "inline-flex min-w-0 items-center", c = "block max-w-[10rem] truncate sm:max-w-[16rem] lg:max-w-[24rem]", l = e(c, "rounded-sm text-muted underline decoration-transparent decoration-solid underline-offset-4", "transition-[color,text-decoration-color]", n("fast"), "hover:text-fg hover:decoration-current", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-body"), u = e(c, "text-fg"), d = e(c, "text-muted"), f = "inline-flex shrink-0 items-center text-muted", p = "select-none", m = "relative -mx-2.5 -my-2 inline-flex";
+//#endregion
+export { s as breadcrumbItemClasses, l as breadcrumbLinkClasses, a as breadcrumbListClasses, m as breadcrumbMoreClasses, u as breadcrumbPageClasses, f as breadcrumbSeparatorClasses, r as breadcrumbSeparators, p as breadcrumbSlashClasses, d as breadcrumbTextClasses, o as breadcrumbVariantClasses, i as breadcrumbVariants };

package/dist/components/molecules/CheckboxGroup/CheckboxGroupItem.d.ts

@@ -4,9 +4,13 @@ export interface CheckboxGroupItemProps {
     value: string;
     label: string;
     description?: string;
+    /** Trailing count — how many results the option matches. See **Checkbox** `count`. */
+    count?: number;
+    /** What screen readers hear for `count`, for example "2 posts". Default: the number. */
+    countLabel?: string;
     disabled?: boolean;
     className?: CheckboxLayoutClassName;
 }
 /** One option inside **CheckboxGroup** — wires `checked` when group `values` / `onValuesChange` are set. */
-export declare function CheckboxGroupItem({ value, label, description, disabled, className, }: CheckboxGroupItemProps): import("react").JSX.Element;
+export declare function CheckboxGroupItem({ value, label, description, count, countLabel, disabled, className, }: CheckboxGroupItemProps): import("react").JSX.Element;
 //# sourceMappingURL=CheckboxGroupItem.d.ts.map

package/dist/components/molecules/CheckboxGroup/CheckboxGroupItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroupItem.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/CheckboxGroup/CheckboxGroupItem.tsx"],"names":[],"mappings":"AACA,OAAO,EAAY,KAAK,uBAAuB,EAAE,MAAM,+BAA+B,CAAC;AAGvF,MAAM,WAAW,sBAAsB;IACrC,qDAAqD;IACrD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,uBAAuB,CAAC;CACrC;AAED,4GAA4G;AAC5G,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,KAAK,EACL,WAAW,EACX,QAAQ,EACR,SAAS,GACV,EAAE,sBAAsB,+BAoCxB"}
+{"version":3,"file":"CheckboxGroupItem.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/CheckboxGroup/CheckboxGroupItem.tsx"],"names":[],"mappings":"AACA,OAAO,EAAY,KAAK,uBAAuB,EAAE,MAAM,+BAA+B,CAAC;AAGvF,MAAM,WAAW,sBAAsB;IACrC,qDAAqD;IACrD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sFAAsF;IACtF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wFAAwF;IACxF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,uBAAuB,CAAC;CACrC;AAED,4GAA4G;AAC5G,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,KAAK,EACL,WAAW,EACX,KAAK,EACL,UAAU,EACV,QAAQ,EACR,SAAS,GACV,EAAE,sBAAsB,+BAsCxB"}

package/dist/components/molecules/CheckboxGroup/CheckboxGroupItem.js

@@ -4,19 +4,21 @@ import { useCheckboxGroupContext as t } from "./CheckboxGroupContext.js";
 import "react";
 import { jsx as n } from "react/jsx-runtime";
 //#region src/components/molecules/CheckboxGroup/CheckboxGroupItem.tsx
-function r({ value: r, label: i, description: a, disabled: o, className: s }) {
-	let c = t(), l = c?.disabled ?? !1, u = c?.size ?? "md", d = c?.values, f = c?.onValuesChange, p = d != null && f != null, m = p ? d.includes(r) : void 0, h = p ? (e) => {
-		let t = e.target.checked ? [...d, r] : d.filter((e) => e !== r);
-		f(t);
+function r({ value: r, label: i, description: a, count: o, countLabel: s, disabled: c, className: l }) {
+	let u = t(), d = u?.disabled ?? !1, f = u?.size ?? "md", p = u?.values, m = u?.onValuesChange, h = p != null && m != null, g = h ? p.includes(r) : void 0, _ = h ? (e) => {
+		let t = e.target.checked ? [...p, r] : p.filter((e) => e !== r);
+		m(t);
 	} : void 0;
-	return p || console.warn("[WMDS CheckboxGroup] Item requires group `values` and `onValuesChange`, or use bare **Checkbox** children."), /* @__PURE__ */ n(e, {
+	return h || console.warn("[WMDS CheckboxGroup] Item requires group `values` and `onValuesChange`, or use bare **Checkbox** children."), /* @__PURE__ */ n(e, {
 		label: i,
 		description: a,
-		size: u,
-		checked: m,
-		disabled: l || o,
-		onChange: h,
-		className: s
+		count: o,
+		countLabel: s,
+		size: f,
+		checked: g,
+		disabled: d || c,
+		onChange: _,
+		className: l
 	});
 }
 //#endregion

package/dist/components/molecules/DescriptionList/DescriptionList.d.ts

@@ -0,0 +1,37 @@
+import { type ReactNode } from "react";
+import { type DescriptionListLayout, type DescriptionListRule, type DescriptionListVariant } from "./descriptionListStyles";
+export { descriptionListLayouts, descriptionListRules, descriptionListVariants, type DescriptionListLayout, type DescriptionListRule, type DescriptionListVariant, } from "./descriptionListStyles";
+/** Layout-only — width, margin, or grid placement. */
+export type DescriptionListLayoutClassName = string;
+export interface DescriptionListProps {
+    /** Rows' default layout: `inline` (value beside the name, default) or `stacked` (value under it). */
+    layout?: DescriptionListLayout;
+    /** The hairline between rows: `solid` (default), `dotted`, or `none`. */
+    rule?: DescriptionListRule;
+    /** `sans` (default) — caption name, body value. `mono` — eyebrow name, mono caps value (metadata). */
+    variant?: DescriptionListVariant;
+    /** **DescriptionList.Item** rows. */
+    children: ReactNode;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    className?: DescriptionListLayoutClassName;
+}
+export interface DescriptionListItemProps {
+    /** The name — rendered as `dt`. */
+    name: ReactNode;
+    /** The value — text, one or more **Badge**, or a row of **Button** — rendered as `dd`. */
+    children: ReactNode;
+    /** Overrides the list's `layout` for this row — for example `stacked` for a row of actions. */
+    layout?: DescriptionListLayout;
+    className?: DescriptionListLayoutClassName;
+}
+/**
+ * A list of facts — each row a name and a value, with a rule between rows. Renders `dl`, `dt`, and
+ * `dd`. Values take text, **Badge** tags, or **Button** actions.
+ */
+declare function DescriptionListRoot({ layout, rule, variant, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className, }: DescriptionListProps): import("react").JSX.Element;
+declare function DescriptionListItem({ name, children, layout: layoutProp, className }: DescriptionListItemProps): import("react").JSX.Element;
+export declare const DescriptionList: typeof DescriptionListRoot & {
+    Item: typeof DescriptionListItem;
+};
+//# sourceMappingURL=DescriptionList.d.ts.map

package/dist/components/molecules/DescriptionList/DescriptionList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DescriptionList.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/DescriptionList/DescriptionList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE3E,OAAO,EAOL,KAAK,qBAAqB,EAC1B,KAAK,mBAAmB,EACxB,KAAK,sBAAsB,EAC5B,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EACL,sBAAsB,EACtB,oBAAoB,EACpB,uBAAuB,EACvB,KAAK,qBAAqB,EAC1B,KAAK,mBAAmB,EACxB,KAAK,sBAAsB,GAC5B,MAAM,yBAAyB,CAAC;AAEjC,sDAAsD;AACtD,MAAM,MAAM,8BAA8B,GAAG,MAAM,CAAC;AAEpD,MAAM,WAAW,oBAAoB;IACnC,qGAAqG;IACrG,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,yEAAyE;IACzE,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,sGAAsG;IACtG,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC,qCAAqC;IACrC,QAAQ,EAAE,SAAS,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,8BAA8B,CAAC;CAC5C;AAED,MAAM,WAAW,wBAAwB;IACvC,mCAAmC;IACnC,IAAI,EAAE,SAAS,CAAC;IAChB,0FAA0F;IAC1F,QAAQ,EAAE,SAAS,CAAC;IACpB,+FAA+F;IAC/F,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,SAAS,CAAC,EAAE,8BAA8B,CAAC;CAC5C;AAcD;;;GAGG;AACH,iBAAS,mBAAmB,CAAC,EAC3B,MAAiB,EACjB,IAAc,EACd,OAAgB,EAChB,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,SAAS,GACV,EAAE,oBAAoB,+BAgBtB;AAED,iBAAS,mBAAmB,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,wBAAwB,+BAevG;AAED,eAAO,MAAM,eAAe;;CAE1B,CAAC"}

package/dist/components/molecules/DescriptionList/DescriptionList.js

@@ -0,0 +1,50 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { descriptionListLayouts as t, descriptionListNameClasses as n, descriptionListRootClasses as r, descriptionListRowLayoutClasses as i, descriptionListRuleClasses as a, descriptionListRules as o, descriptionListValueClasses as s, descriptionListValueFlowClasses as c, descriptionListVariants as l } from "./descriptionListStyles.js";
+import { createContext as u, useContext as d, useMemo as f } from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/components/molecules/DescriptionList/DescriptionList.tsx
+var h = u({
+	layout: "inline",
+	rule: "solid",
+	variant: "sans"
+});
+function g({ layout: t = "inline", rule: n = "solid", variant: i = "sans", children: a, "aria-label": o, "aria-labelledby": s, className: c }) {
+	let l = f(() => ({
+		layout: t,
+		rule: n,
+		variant: i
+	}), [
+		t,
+		n,
+		i
+	]);
+	return /* @__PURE__ */ p(h.Provider, {
+		value: l,
+		children: /* @__PURE__ */ p("dl", {
+			className: e(r, c),
+			"aria-label": o,
+			"aria-labelledby": s,
+			"data-rule": n,
+			"data-variant": i,
+			children: a
+		})
+	});
+}
+function _({ name: t, children: r, layout: o, className: l }) {
+	let u = d(h), f = o ?? u.layout;
+	return /* @__PURE__ */ m("div", {
+		className: e(i[f], a[u.rule], l),
+		"data-layout": f,
+		children: [/* @__PURE__ */ p("dt", {
+			className: n[u.variant],
+			children: t
+		}), /* @__PURE__ */ p("dd", {
+			className: e(s[u.variant], c[f]),
+			children: r
+		})]
+	});
+}
+var v = Object.assign(g, { Item: _ });
+//#endregion
+export { v as DescriptionList, t as descriptionListLayouts, o as descriptionListRules, l as descriptionListVariants };

package/dist/components/molecules/DescriptionList/descriptionListStyles.d.ts

@@ -0,0 +1,21 @@
+export declare const descriptionListLayouts: readonly ["inline", "stacked"];
+/** `inline` — the value beside the name. `stacked` — the value under the name (tags, actions). */
+export type DescriptionListLayout = (typeof descriptionListLayouts)[number];
+export declare const descriptionListRules: readonly ["solid", "dotted", "none"];
+/** The hairline between rows — `solid` (default) or the quieter `dotted`; `none` for no rule. */
+export type DescriptionListRule = (typeof descriptionListRules)[number];
+export declare const descriptionListVariants: readonly ["sans", "mono"];
+/**
+ * `sans` (default) — the name in caption type, the value in body type. `mono` — editorial metadata:
+ * the name as an eyebrow and the value in mono caps with tabular figures.
+ */
+export type DescriptionListVariant = (typeof descriptionListVariants)[number];
+export declare const descriptionListRootClasses = "m-0 flex w-full min-w-0 flex-col";
+/** The rule under each row; the last row keeps it, closing the list. */
+export declare const descriptionListRuleClasses: Record<DescriptionListRule, string>;
+export declare const descriptionListRowLayoutClasses: Record<DescriptionListLayout, string>;
+export declare const descriptionListNameClasses: Record<DescriptionListVariant, string>;
+export declare const descriptionListValueClasses: Record<DescriptionListVariant, string>;
+/** Several values — tags, actions — wrap in a row with a gap. */
+export declare const descriptionListValueFlowClasses: Record<DescriptionListLayout, string>;
+//# sourceMappingURL=descriptionListStyles.d.ts.map

package/dist/components/molecules/DescriptionList/descriptionListStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"descriptionListStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/DescriptionList/descriptionListStyles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,sBAAsB,gCAAiC,CAAC;AAErE,kGAAkG;AAClG,MAAM,MAAM,qBAAqB,GAAG,CAAC,OAAO,sBAAsB,CAAC,CAAC,MAAM,CAAC,CAAC;AAE5E,eAAO,MAAM,oBAAoB,sCAAuC,CAAC;AAEzE,iGAAiG;AACjG,MAAM,MAAM,mBAAmB,GAAG,CAAC,OAAO,oBAAoB,CAAC,CAAC,MAAM,CAAC,CAAC;AAExE,eAAO,MAAM,uBAAuB,2BAA4B,CAAC;AAEjE;;;GAGG;AACH,MAAM,MAAM,sBAAsB,GAAG,CAAC,OAAO,uBAAuB,CAAC,CAAC,MAAM,CAAC,CAAC;AAE9E,eAAO,MAAM,0BAA0B,qCAAqC,CAAC;AAE7E,wEAAwE;AACxE,eAAO,MAAM,0BAA0B,EAAE,MAAM,CAAC,mBAAmB,EAAE,MAAM,CAI1E,CAAC;AAEF,eAAO,MAAM,+BAA+B,EAAE,MAAM,CAAC,qBAAqB,EAAE,MAAM,CAGjF,CAAC;AAEF,eAAO,MAAM,0BAA0B,EAAE,MAAM,CAAC,sBAAsB,EAAE,MAAM,CAG7E,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,MAAM,CAAC,sBAAsB,EAAE,MAAM,CAG9E,CAAC;AAEF,iEAAiE;AACjE,eAAO,MAAM,+BAA+B,EAAE,MAAM,CAAC,qBAAqB,EAAE,MAAM,CAGjF,CAAC"}

package/dist/components/molecules/DescriptionList/descriptionListStyles.js

@@ -0,0 +1,27 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { typographyClass as t } from "../../../lib/typography.js";
+//#region src/components/molecules/DescriptionList/descriptionListStyles.ts
+var n = ["inline", "stacked"], r = [
+	"solid",
+	"dotted",
+	"none"
+], i = ["sans", "mono"], a = "m-0 flex w-full min-w-0 flex-col", o = {
+	solid: "border-b border-border",
+	dotted: "border-b border-dotted border-border-emphasized",
+	none: ""
+}, s = {
+	inline: "grid grid-cols-[minmax(0,2fr)_minmax(0,3fr)] items-baseline gap-x-4 py-3",
+	stacked: "flex flex-col gap-2.5 py-3"
+}, c = {
+	sans: e("m-0", t("caption")),
+	mono: e("m-0", t("eyebrow"))
+}, l = {
+	sans: e("m-0 min-w-0", t("body")),
+	mono: "m-0 min-w-0 type-eyebrow tabular-nums text-fg"
+}, u = {
+	inline: "flex flex-wrap items-baseline gap-x-2 gap-y-1.5",
+	stacked: "flex flex-wrap items-center gap-2"
+};
+//#endregion
+export { n as descriptionListLayouts, c as descriptionListNameClasses, a as descriptionListRootClasses, s as descriptionListRowLayoutClasses, o as descriptionListRuleClasses, r as descriptionListRules, l as descriptionListValueClasses, u as descriptionListValueFlowClasses, i as descriptionListVariants };

package/dist/components/molecules/Dropdown/DropdownItem.d.ts

@@ -1,4 +1,4 @@
-import type { ButtonHTMLAttributes, ReactNode } from "react";
+import type { ButtonHTMLAttributes, ReactElement, ReactNode } from "react";
 /** Layout-only — not for row colors or typography overrides. */
 export type DropdownItemLayoutClassName = string;
 export interface DropdownItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
@@ -14,10 +14,15 @@ export interface DropdownItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonE
     active?: boolean;
     /** When false, label stays full width — **Select** listbox. Default true for action menus. */
     truncate?: boolean;
+    /**
+     * Compose the row onto another element (Base UI `render`) — `render={<a href="/docs" />}` for a
+     * menu of links, such as **Breadcrumb**'s collapsed pages. `disabled` maps to `aria-disabled`.
+     */
+    render?: ReactElement;
     className?: DropdownItemLayoutClassName;
 }
 /**
  * Dropdown row — start | label | end. Used by **Select** listbox options and future menu patterns.
  */
-export declare function DropdownItem({ children, start, end, selected, active, truncate, disabled, className, type, ...props }: DropdownItemProps): import("react").JSX.Element;
+export declare function DropdownItem({ children, start, end, selected, active, truncate, disabled, className, type, render, ...props }: DropdownItemProps): import("react").JSX.Element;
 //# sourceMappingURL=DropdownItem.d.ts.map

package/dist/components/molecules/Dropdown/DropdownItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownItem.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Dropdown/DropdownItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAc7D,gEAAgE;AAChE,MAAM,MAAM,2BAA2B,GAAG,MAAM,CAAC;AAEjD,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IACjE,yBAAyB;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,wEAAwE;IACxE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,oFAAoF;IACpF,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uDAAuD;IACvD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,8FAA8F;IAC9F,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,2BAA2B,CAAC;CACzC;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,KAAK,EACL,GAAG,EACH,QAAgB,EAChB,MAAc,EACd,QAAe,EACf,QAAQ,EACR,SAAS,EACT,IAAe,EACf,GAAG,KAAK,EACT,EAAE,iBAAiB,+BAmCnB"}
+{"version":3,"file":"DropdownItem.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Dropdown/DropdownItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAc3E,gEAAgE;AAChE,MAAM,MAAM,2BAA2B,GAAG,MAAM,CAAC;AAEjD,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IACjE,yBAAyB;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,wEAAwE;IACxE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,oFAAoF;IACpF,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uDAAuD;IACvD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,8FAA8F;IAC9F,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,SAAS,CAAC,EAAE,2BAA2B,CAAC;CACzC;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,KAAK,EACL,GAAG,EACH,QAAgB,EAChB,MAAc,EACd,QAAe,EACf,QAAQ,EACR,SAAS,EACT,IAAe,EACf,MAAM,EACN,GAAG,KAAK,EACT,EAAE,iBAAiB,+BA2CnB"}

package/dist/components/molecules/Dropdown/DropdownItem.js

@@ -2,35 +2,51 @@
 import { cn as e } from "../../../lib/cn.js";
 import { dropdownItemButtonClasses as t, dropdownItemEndClasses as n, dropdownItemLabelClasses as r, dropdownItemLabelFullClasses as i, dropdownItemSelectedCheckClasses as a, dropdownItemStartClasses as o } from "./dropdownStyles.js";
 import { Check as s } from "lucide-react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+import { useRender as d } from "@base-ui/react/use-render";
 //#region src/components/molecules/Dropdown/DropdownItem.tsx
-function u({ children: u, start: d, end: f, selected: p = !1, active: m = !1, truncate: h = !0, disabled: g, className: _, type: v = "button", ...y }) {
-	let b = p ? /* @__PURE__ */ c("span", {
+function f({ children: d, start: f, end: m, selected: h = !1, active: g = !1, truncate: _ = !0, disabled: v, className: y, type: b = "button", render: x, ...S }) {
+	let C = h ? /* @__PURE__ */ l("span", {
 		className: a,
 		"aria-hidden": !0,
-		children: /* @__PURE__ */ c(s, { strokeWidth: 2 })
-	}) : f == null ? null : /* @__PURE__ */ c("span", {
+		children: /* @__PURE__ */ l(s, { strokeWidth: 2 })
+	}) : m == null ? null : /* @__PURE__ */ l("span", {
 		className: n,
-		children: f
+		children: m
+	}), w = e(t, h && "hover:bg-transparent focus-visible:bg-transparent", g && !h && "bg-accent-muted", v && "pointer-events-none opacity-50", y), T = /* @__PURE__ */ u(c, { children: [
+		f == null ? null : /* @__PURE__ */ l("span", {
+			className: o,
+			"aria-hidden": !0,
+			children: f
+		}),
+		/* @__PURE__ */ l("span", {
+			className: _ ? r : i,
+			children: d
+		}),
+		C
+	] });
+	return /* @__PURE__ */ l(p, {
+		...S,
+		render: x,
+		type: b,
+		disabled: v,
+		className: w,
+		children: T
 	});
-	return /* @__PURE__ */ l("button", {
-		...y,
-		type: v,
-		disabled: g,
-		className: e(t, p && "hover:bg-transparent focus-visible:bg-transparent", m && !p && "bg-accent-muted", g && "pointer-events-none opacity-50", _),
-		children: [
-			d == null ? null : /* @__PURE__ */ c("span", {
-				className: o,
-				"aria-hidden": !0,
-				children: d
-			}),
-			/* @__PURE__ */ c("span", {
-				className: h ? r : i,
-				children: u
-			}),
-			b
-		]
+}
+function p({ render: e, type: t, disabled: n, ...r }) {
+	return d({
+		render: e,
+		defaultTagName: "button",
+		props: e ? {
+			...r,
+			"aria-disabled": n ? !0 : void 0
+		} : {
+			...r,
+			type: t,
+			disabled: n
+		}
 	});
 }
 //#endregion
-export { u as DropdownItem };
+export { f as DropdownItem };

package/dist/components/molecules/IndexList/IndexList.d.ts

@@ -0,0 +1,58 @@
+import { type ReactNode } from "react";
+import { type IndexListSize, type IndexListTitleElement } from "./indexListStyles";
+export { indexListSizes, indexListTitleElements, type IndexListSize, type IndexListTitleElement, } from "./indexListStyles";
+/** Layout-only — width, margin, or grid placement. */
+export type IndexListLayoutClassName = string;
+export interface IndexListCaptions {
+    /** Over the meta column, in sentence case — for example "Date". The "/" marker comes with it. */
+    meta: ReactNode;
+    /** Over the titles, for example "Name". */
+    title: ReactNode;
+}
+export interface IndexListProps {
+    /**
+     * Column captions over the rows, on the rows' own tracks. Hidden where the list is narrower than
+     * 32rem (phones, narrow columns) and each row is one column. Visual only — the rows carry their
+     * own meaning.
+     */
+    captions?: IndexListCaptions;
+    /** Title scale: `lg` type-display-3 (default), `md` type-heading-1, `sm` type-heading-3. */
+    size?: IndexListSize;
+    /** The heading element around each title. Default: `h2`. */
+    titleAs?: IndexListTitleElement;
+    /** Shown in place of the rows when there are none — for example "No posts match these filters." */
+    empty?: ReactNode;
+    /** Names the list for screen readers, for example "Posts". */
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    /** **IndexList.Item** rows. */
+    children?: ReactNode;
+    className?: IndexListLayoutClassName;
+}
+export interface IndexListItemProps {
+    /** The row's title — a link to `href`. */
+    title: string;
+    href: string;
+    /** The meta column, for example a `<time>`. Above the title where the list is one column. */
+    meta?: ReactNode;
+    /** A short preview. When set, a control at the row's end expands it under the title. */
+    preview?: ReactNode;
+    /** Uncontrolled preview state. */
+    defaultOpen?: boolean;
+    /** Controlled preview state. */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Names the preview control. Default: "Preview: {title}". */
+    previewLabel?: string;
+    className?: IndexListLayoutClassName;
+}
+/**
+ * Editorial index — a ruled list where each row has a meta column, a large linked title, and an
+ * optional preview that expands under the title. Optional column captions share the rows' tracks.
+ */
+declare function IndexListRoot({ captions, size, titleAs, empty, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children, className, }: IndexListProps): import("react").JSX.Element;
+declare function IndexListItem({ title, href, meta, preview, defaultOpen, open: openProp, onOpenChange, previewLabel, className, }: IndexListItemProps): import("react").JSX.Element;
+export declare const IndexList: typeof IndexListRoot & {
+    Item: typeof IndexListItem;
+};
+//# sourceMappingURL=IndexList.d.ts.map

package/dist/components/molecules/IndexList/IndexList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IndexList.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/IndexList/IndexList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAKf,OAAO,EAiBL,KAAK,aAAa,EAClB,KAAK,qBAAqB,EAC3B,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EACL,cAAc,EACd,sBAAsB,EACtB,KAAK,aAAa,EAClB,KAAK,qBAAqB,GAC3B,MAAM,mBAAmB,CAAC;AAE3B,sDAAsD;AACtD,MAAM,MAAM,wBAAwB,GAAG,MAAM,CAAC;AAE9C,MAAM,WAAW,iBAAiB;IAChC,iGAAiG;IACjG,IAAI,EAAE,SAAS,CAAC;IAChB,2CAA2C;IAC3C,KAAK,EAAE,SAAS,CAAC;CAClB;AAED,MAAM,WAAW,cAAc;IAC7B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,4FAA4F;IAC5F,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,qBAAqB,CAAC;IAChC,mGAAmG;IACnG,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,8DAA8D;IAC9D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,wBAAwB,CAAC;CACtC;AAED,MAAM,WAAW,kBAAkB;IACjC,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,6FAA6F;IAC7F,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,wFAAwF;IACxF,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,kCAAkC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gCAAgC;IAChC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,8DAA8D;IAC9D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,wBAAwB,CAAC;CACtC;AASD;;;GAGG;AACH,iBAAS,aAAa,CAAC,EACrB,QAAQ,EACR,IAAW,EACX,OAAc,EACd,KAAK,EACL,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,QAAQ,EACR,SAAS,GACV,EAAE,cAAc,+BA8BhB;AAED,iBAAS,aAAa,CAAC,EACrB,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,WAAmB,EACnB,IAAI,EAAE,QAAQ,EACd,YAAY,EACZ,YAAY,EACZ,SAAS,GACV,EAAE,kBAAkB,+BA6CpB;AAED,eAAO,MAAM,SAAS;;CAEpB,CAAC"}