@thewhatmatters/wmds 0.3.0 → 0.4.1

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/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"}

package/dist/components/molecules/IndexList/IndexList.js

@@ -0,0 +1,96 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { IconButton as t } from "../../atoms/IconButton/IconButton.js";
+import { TextLink as n } from "../../atoms/TextLink/TextLink.js";
+import { indexListCaptionsClasses as r, indexListChevronClasses as i, indexListEmptyClasses as a, indexListItemClasses as o, indexListListClasses as s, indexListMetaClasses as c, indexListPanelClasses as l, indexListPanelContentClasses as u, indexListPanelInnerClasses as d, indexListRootClasses as f, indexListSizes as p, indexListTitleCellClasses as m, indexListTitleClasses as h, indexListTitleElements as g, indexListTitleSizeClasses as _, indexListToggleAlignClasses as v } from "./indexListStyles.js";
+import { Children as y, createContext as b, useContext as x, useId as S, useMemo as C, useState as w } from "react";
+import { ChevronDown as T } from "lucide-react";
+import { jsx as E, jsxs as D } from "react/jsx-runtime";
+//#region src/components/molecules/IndexList/IndexList.tsx
+var O = b({
+	size: "lg",
+	titleAs: "h2"
+});
+function k({ captions: t, size: n = "lg", titleAs: i = "h2", empty: o, "aria-label": c, "aria-labelledby": l, children: u, className: d }) {
+	let p = y.toArray(u).length > 0, m = C(() => ({
+		size: n,
+		titleAs: i
+	}), [n, i]);
+	return /* @__PURE__ */ E(O.Provider, {
+		value: m,
+		children: /* @__PURE__ */ D("div", {
+			className: e(f, d),
+			"data-size": n,
+			children: [p && t != null ? /* @__PURE__ */ D("div", {
+				className: r,
+				"aria-hidden": "true",
+				"data-index-list-captions": "",
+				children: [/* @__PURE__ */ D("span", { children: ["/ ", t.meta] }), /* @__PURE__ */ D("span", {
+					className: "@lg:col-start-2",
+					children: ["/ ", t.title]
+				})]
+			}) : null, p ? /* @__PURE__ */ E("ul", {
+				role: "list",
+				"aria-label": c,
+				"aria-labelledby": l,
+				className: e(s, t != null && "@lg:border-t-0"),
+				children: u
+			}) : o == null ? null : /* @__PURE__ */ E("div", {
+				className: a,
+				"data-index-list-empty": "",
+				children: o
+			})]
+		})
+	});
+}
+function A({ title: r, href: a, meta: s, preview: f, defaultOpen: p = !1, open: g, onOpenChange: y, previewLabel: b, className: C }) {
+	let { size: k, titleAs: A } = x(O), j = S(), [M, N] = w(p), P = g !== void 0, F = P ? g : M, I = f != null;
+	function L() {
+		let e = !F;
+		P || N(e), y?.(e);
+	}
+	return /* @__PURE__ */ D("li", {
+		className: e(o, C),
+		children: [
+			s == null ? null : /* @__PURE__ */ E("div", {
+				className: c,
+				children: s
+			}),
+			/* @__PURE__ */ D("div", {
+				className: m,
+				children: [/* @__PURE__ */ E(A, {
+					className: e(h, _[k]),
+					children: /* @__PURE__ */ E(n, {
+						variant: "quiet",
+						href: a,
+						children: r
+					})
+				}), I ? /* @__PURE__ */ E(t, {
+					size: "md",
+					className: v[k],
+					icon: /* @__PURE__ */ E(T, { className: e(i, F && "rotate-180") }),
+					"aria-label": b ?? `Preview: ${r}`,
+					title: "",
+					"aria-expanded": F,
+					"aria-controls": j,
+					onClick: L
+				}) : null]
+			}),
+			I ? /* @__PURE__ */ E("div", {
+				className: e("motion-collapse", l),
+				"data-visible": F ? "true" : "false",
+				children: /* @__PURE__ */ E("div", {
+					id: j,
+					className: d,
+					children: /* @__PURE__ */ E("div", {
+						className: u,
+						children: f
+					})
+				})
+			}) : null
+		]
+	});
+}
+var j = Object.assign(k, { Item: A });
+//#endregion
+export { j as IndexList, p as indexListSizes, g as indexListTitleElements };

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

@@ -0,0 +1,29 @@
+export declare const indexListSizes: readonly ["lg", "md", "sm"];
+/** Title scale — `lg` type-display-3, `md` type-heading-1, `sm` type-heading-3. */
+export type IndexListSize = (typeof indexListSizes)[number];
+export declare const indexListTitleElements: readonly ["h2", "h3", "h4"];
+export type IndexListTitleElement = (typeof indexListTitleElements)[number];
+export declare const indexListRootClasses = "@container flex w-full min-w-0 flex-col";
+/** Column captions — hidden below 32rem, where the rows are one column. */
+export declare const indexListCaptionsClasses: string;
+export declare const indexListListClasses = "m-0 list-none p-0 border-t border-border";
+/** With captions, their rule is the list's top rule — until they hide in one column. */
+export declare const indexListListCaptionedClasses = "@lg:border-t-0";
+/** One row: meta over the title in one column; meta beside it on two tracks, on the title's first baseline. */
+export declare const indexListItemClasses: string;
+export declare const indexListMetaClasses: string;
+/** Title cell — the linked title, then the preview control at the row's end. */
+export declare const indexListTitleCellClasses = "flex min-w-0 items-start gap-3 @lg:col-start-2";
+export declare const indexListTitleSizeClasses: Record<IndexListSize, string>;
+export declare const indexListTitleClasses = "min-w-0 flex-1 text-pretty text-fg";
+/** Centers the 44px preview control on the title's first line, at each size. */
+export declare const indexListToggleAlignClasses: Record<IndexListSize, string>;
+export declare const indexListChevronClasses: string;
+export declare const indexListChevronOpenClasses = "rotate-180";
+/** The preview panel sits under the title, in the title column. */
+export declare const indexListPanelClasses = "@lg:col-start-2";
+export declare const indexListPanelInnerClasses = "overflow-hidden";
+export declare const indexListPanelContentClasses: string;
+/** Empty state — between the same rules as the rows. */
+export declare const indexListEmptyClasses = "border-y border-border py-8";
+//# sourceMappingURL=indexListStyles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"indexListStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/IndexList/indexListStyles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,cAAc,6BAA8B,CAAC;AAE1D,mFAAmF;AACnF,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC;AAE5D,eAAO,MAAM,sBAAsB,6BAA8B,CAAC;AAElE,MAAM,MAAM,qBAAqB,GAAG,CAAC,OAAO,sBAAsB,CAAC,CAAC,MAAM,CAAC,CAAC;AAU5E,eAAO,MAAM,oBAAoB,4CAA4C,CAAC;AAE9E,2EAA2E;AAC3E,eAAO,MAAM,wBAAwB,QAIpC,CAAC;AAEF,eAAO,MAAM,oBAAoB,6CAA6C,CAAC;AAE/E,wFAAwF;AACxF,eAAO,MAAM,6BAA6B,mBAAmB,CAAC;AAE9D,+GAA+G;AAC/G,eAAO,MAAM,oBAAoB,QAGhC,CAAC;AAEF,eAAO,MAAM,oBAAoB,QAA+D,CAAC;AAEjG,gFAAgF;AAChF,eAAO,MAAM,yBAAyB,mDAAmD,CAAC;AAE1F,eAAO,MAAM,yBAAyB,EAAE,MAAM,CAAC,aAAa,EAAE,MAAM,CAInE,CAAC;AAEF,eAAO,MAAM,qBAAqB,uCAAuC,CAAC;AAE1E,gFAAgF;AAChF,eAAO,MAAM,2BAA2B,EAAE,MAAM,CAAC,aAAa,EAAE,MAAM,CAIrE,CAAC;AAEF,eAAO,MAAM,uBAAuB,QAAyD,CAAC;AAE9F,eAAO,MAAM,2BAA2B,eAAe,CAAC;AAExD,mEAAmE;AACnE,eAAO,MAAM,qBAAqB,oBAAoB,CAAC;AAEvD,eAAO,MAAM,0BAA0B,oBAAoB,CAAC;AAE5D,eAAO,MAAM,4BAA4B,QAA4D,CAAC;AAEtG,wDAAwD;AACxD,eAAO,MAAM,qBAAqB,gCAAgC,CAAC"}

package/dist/components/molecules/IndexList/indexListStyles.js

@@ -0,0 +1,24 @@
+"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/IndexList/indexListStyles.ts
+var r = [
+	"lg",
+	"md",
+	"sm"
+], i = [
+	"h2",
+	"h3",
+	"h4"
+], a = "@lg:grid @lg:grid-cols-[7.5rem_minmax(0,1fr)] @lg:gap-x-[var(--grid-column-gap,1.5rem)]", o = "@container flex w-full min-w-0 flex-col", s = e("@max-lg:hidden border-b border-border-emphasized pb-3 text-muted", a, t("eyebrow")), c = "m-0 list-none p-0 border-t border-border", l = "@lg:border-t-0", u = e("flex flex-col border-b border-border py-4 @lg:items-baseline", a), d = e(t("caption"), "mb-1 tabular-nums @lg:mb-0"), f = "flex min-w-0 items-start gap-3 @lg:col-start-2", p = {
+	lg: "type-display-3",
+	md: "type-heading-1",
+	sm: "type-heading-3"
+}, m = "min-w-0 flex-1 text-pretty text-fg", h = {
+	lg: "mt-[calc((var(--text-display-3-size)*var(--text-display-3-leading)-2.75rem)/2)]",
+	md: "mt-[calc((var(--text-heading-1-size)*var(--text-heading-1-leading)-2.75rem)/2)]",
+	sm: "mt-[calc((var(--text-heading-3-size)*var(--text-heading-3-leading)-2.75rem)/2)]"
+}, g = e("transition-transform", n("medium")), _ = "rotate-180", v = "@lg:col-start-2", y = "overflow-hidden", b = e(t("body"), "text-muted pt-2 pb-1 pr-14"), x = "border-y border-border py-8";
+//#endregion
+export { s as indexListCaptionsClasses, g as indexListChevronClasses, _ as indexListChevronOpenClasses, x as indexListEmptyClasses, u as indexListItemClasses, l as indexListListCaptionedClasses, c as indexListListClasses, d as indexListMetaClasses, v as indexListPanelClasses, b as indexListPanelContentClasses, y as indexListPanelInnerClasses, o as indexListRootClasses, r as indexListSizes, f as indexListTitleCellClasses, m as indexListTitleClasses, i as indexListTitleElements, p as indexListTitleSizeClasses, h as indexListToggleAlignClasses };

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

@@ -1,4 +1,4 @@
-import { type TextareaHTMLAttributes } from "react";
+import { type ReactNode, type TextareaHTMLAttributes } from "react";
 /** Layout-only — width, margin, flex placement. Not for colors. */
 export type PromptBarLayoutClassName = string;
 export declare const promptBarPlaceholder = "Ask anything\u2026";
@@ -21,6 +21,16 @@ export interface PromptBarProps extends Omit<TextareaHTMLAttributes<HTMLTextArea
     /** Accessible name for the send control. Default: "Send". */
     sendLabel?: string;
     disabled?: boolean;
+    /**
+     * Leading slot inside the pill — a brand mark or **Avatar** `sm` (2.25rem). Decorative or
+     * labeled by the caller; not a control.
+     */
+    start?: ReactNode;
+    /**
+     * Extra inset controls before send — for example a mic **IconButton** `sm` `role="secondary"`.
+     * The caller owns the handler and accessible name.
+     */
+    end?: ReactNode;
     className?: PromptBarLayoutClassName;
 }
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"PromptBar.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/PromptBar/PromptBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,sBAAsB,EAC5B,MAAM,OAAO,CAAC;AAaf,mEAAmE;AACnE,MAAM,MAAM,wBAAwB,GAAG,MAAM,CAAC;AAE9C,eAAO,MAAM,oBAAoB,uBAAkB,CAAC;AAEpD,MAAM,WAAW,cACf,SAAQ,IAAI,CACV,sBAAsB,CAAC,mBAAmB,CAAC,EAC3C,UAAU,GAAG,WAAW,GAAG,cAAc,GAAG,UAAU,GAAG,aAAa,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CACnG;IACD,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0BAA0B;IAC1B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,+BAA+B;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8DAA8D;IAC9D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,wBAAwB,CAAC;CACtC;AAMD;;;;;GAKG;AACH,eAAO,MAAM,SAAS,gHA2EpB,CAAC"}
+{"version":3,"file":"PromptBar.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/PromptBar/PromptBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,sBAAsB,EAC5B,MAAM,OAAO,CAAC;AAgBf,mEAAmE;AACnE,MAAM,MAAM,wBAAwB,GAAG,MAAM,CAAC;AAE9C,eAAO,MAAM,oBAAoB,uBAAkB,CAAC;AAEpD,MAAM,WAAW,cACf,SAAQ,IAAI,CACV,sBAAsB,CAAC,mBAAmB,CAAC,EAC3C,UAAU,GAAG,WAAW,GAAG,cAAc,GAAG,UAAU,GAAG,aAAa,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CACnG;IACD,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0BAA0B;IAC1B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,+BAA+B;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8DAA8D;IAC9D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,SAAS,CAAC,EAAE,wBAAwB,CAAC;CACtC;AAMD;;;;;GAKG;AACH,eAAO,MAAM,SAAS,gHAqFpB,CAAC"}

package/dist/components/molecules/PromptBar/PromptBar.js

@@ -2,55 +2,66 @@
 import { cn as e } from "../../../lib/cn.js";
 import { IconButton as t } from "../../atoms/IconButton/IconButton.js";
 import { TextArea as n } from "../../atoms/TextArea/TextArea.js";
-import { promptBarFieldClasses as r, promptBarSendClasses as i, promptBarSendMutedClasses as a, promptBarSendReadyClasses as o, promptBarShellClasses as s } from "./promptBarStyles.js";
-import { forwardRef as c, useState as l } from "react";
-import { ArrowRight as u } from "lucide-react";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { promptBarEndSlotClasses as r, promptBarFieldClasses as i, promptBarSendClasses as a, promptBarSendMutedClasses as o, promptBarSendReadyClasses as s, promptBarShellClasses as c, promptBarShellStartPadClasses as l, promptBarStartSlotClasses as u } from "./promptBarStyles.js";
+import { forwardRef as d, useState as f } from "react";
+import { ArrowRight as p } from "lucide-react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
 //#region src/components/molecules/PromptBar/PromptBar.tsx
-var p = "Ask anything…";
-function m(e) {
+var g = "Ask anything…";
+function _(e) {
 	return e.trim().length > 0;
 }
-var h = c(function({ value: c, defaultValue: h = "", onValueChange: g, onSend: _, placeholder: v = p, "aria-label": y = "Ask anything", sendLabel: b = "Send", disabled: x = !1, className: S, onKeyDown: C, ...w }, T) {
-	let E = c !== void 0, [D, O] = l(h), k = E ? c : D, A = !x && m(k);
-	function j(e) {
-		E || O(e), g?.(e);
+var v = d(function({ value: d, defaultValue: v = "", onValueChange: y, onSend: b, placeholder: x = g, "aria-label": S = "Ask anything", sendLabel: C = "Send", disabled: w = !1, start: T, end: E, className: D, onKeyDown: O, ...k }, A) {
+	let j = d !== void 0, [M, N] = f(v), P = j ? d : M, F = !w && _(P);
+	function I(e) {
+		j || N(e), y?.(e);
 	}
-	function M() {
-		A && (_?.(k), E || O(""));
+	function L() {
+		F && (b?.(P), j || N(""));
 	}
-	function N(e) {
-		C?.(e), !e.defaultPrevented && (e.key !== "Enter" || e.shiftKey || e.nativeEvent.isComposing || (e.preventDefault(), M()));
+	function R(e) {
+		O?.(e), !e.defaultPrevented && (e.key !== "Enter" || e.shiftKey || e.nativeEvent.isComposing || (e.preventDefault(), L()));
 	}
-	return /* @__PURE__ */ f("div", {
-		className: e(s, S),
-		children: [/* @__PURE__ */ d(n, {
-			...w,
-			ref: T,
-			inline: !0,
-			rows: 1,
-			resize: "none",
-			value: k,
-			placeholder: v,
-			"aria-label": y,
-			disabled: x,
-			className: r,
-			onChange: (e) => {
-				j(e.target.value);
-			},
-			onKeyDown: N
-		}), /* @__PURE__ */ d(t, {
-			type: "button",
-			role: "primary",
-			size: "sm",
-			icon: /* @__PURE__ */ d(u, { strokeWidth: 2 }),
-			"aria-label": b,
-			title: b,
-			disabled: !A,
-			className: e(i, A ? o : a),
-			onClick: M
-		})]
+	return /* @__PURE__ */ h("div", {
+		className: e(c, T == null ? l.field : l.slot, D),
+		children: [
+			T == null ? null : /* @__PURE__ */ m("div", {
+				className: u,
+				children: T
+			}),
+			/* @__PURE__ */ m(n, {
+				...k,
+				ref: A,
+				inline: !0,
+				rows: 1,
+				resize: "none",
+				value: P,
+				placeholder: x,
+				"aria-label": S,
+				disabled: w,
+				className: i,
+				onChange: (e) => {
+					I(e.target.value);
+				},
+				onKeyDown: R
+			}),
+			E == null ? null : /* @__PURE__ */ m("div", {
+				className: r,
+				children: E
+			}),
+			/* @__PURE__ */ m(t, {
+				type: "button",
+				role: "primary",
+				size: "sm",
+				icon: /* @__PURE__ */ m(p, { strokeWidth: 2 }),
+				"aria-label": C,
+				title: C,
+				disabled: !F,
+				className: e(a, F ? s : o),
+				onClick: L
+			})
+		]
 	});
 });
 //#endregion
-export { h as PromptBar, p as promptBarPlaceholder };
+export { v as PromptBar, g as promptBarPlaceholder };

package/dist/components/molecules/PromptBar/promptBarStyles.d.ts

@@ -5,6 +5,22 @@
  * The shell owns the single focus ring (inset, so it does not stack a second edge).
  */
 export declare const promptBarShellClasses: string;
+/**
+ * Leading inset. The text starts 1.25rem in; with a `start` slot the slot takes the same
+ * 0.5rem inset as the send circle, and the field keeps 0.25rem more air than the shell gap.
+ */
+export declare const promptBarShellStartPadClasses: {
+    readonly field: "pl-5";
+    readonly slot: "pl-2";
+};
+/**
+ * Leading slot — a brand mark or avatar at the send circle's size (2.25rem), pinned to the
+ * last line like the send control. Its width is the content's, so a caller can fold the mark
+ * away: at zero width the field starts 1.25rem in, the same as without a slot.
+ */
+export declare const promptBarStartSlotClasses = "mr-1 flex h-9 shrink-0 items-center justify-center";
+/** Trailing slot — extra inset controls (for example a mic **IconButton** `sm`) before send. */
+export declare const promptBarEndSlotClasses = "flex shrink-0 items-end gap-2";
 /**
  * Empty is one line — min height matches the send circle, with padding that centers that line.
  * Grows with the text, stops at three lines (`max-h`), then scrolls.

package/dist/components/molecules/PromptBar/promptBarStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"promptBarStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/PromptBar/promptBarStyles.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,QAGN,CAAC;AAE7B;;;GAGG;AACH,eAAO,MAAM,qBAAqB,QAEf,CAAC;AAEpB;;GAEG;AACH,eAAO,MAAM,oBAAoB,kFACgD,CAAC;AAElF,0DAA0D;AAC1D,eAAO,MAAM,yBAAyB,8DAA8D,CAAC;AAErG;;;GAGG;AACH,eAAO,MAAM,yBAAyB,qDAAqD,CAAC"}
+{"version":3,"file":"promptBarStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/PromptBar/promptBarStyles.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,QAGN,CAAC;AAE7B;;;GAGG;AACH,eAAO,MAAM,6BAA6B;;;CAGhC,CAAC;AAEX;;;;GAIG;AACH,eAAO,MAAM,yBAAyB,uDAAuD,CAAC;AAE9F,gGAAgG;AAChG,eAAO,MAAM,uBAAuB,kCAAkC,CAAC;AAEvE;;;GAGG;AACH,eAAO,MAAM,qBAAqB,QAEf,CAAC;AAEpB;;GAEG;AACH,eAAO,MAAM,oBAAoB,kFACgD,CAAC;AAElF,0DAA0D;AAC1D,eAAO,MAAM,yBAAyB,8DAA8D,CAAC;AAErG;;;GAGG;AACH,eAAO,MAAM,yBAAyB,qDAAqD,CAAC"}

package/dist/components/molecules/PromptBar/promptBarStyles.js

@@ -1,6 +1,9 @@
 "use client";
 import { focusRingTransitionClasses as e } from "../../../lib/motion.js";
 //#region src/components/molecules/PromptBar/promptBarStyles.ts
-var t = "flex w-full items-end gap-2 rounded-[1.625rem] border border-border-control bg-surface p-2 pl-5 focus-within:outline-none focus-within:ring-2 focus-within:ring-inset focus-within:ring-focus-ring " + e, n = "min-h-9 min-w-0 flex-1 overflow-y-auto py-2 type-body [field-sizing:content] max-h-[4.75rem]", r = "focus-visible:!ring-0 focus-visible:!ring-offset-0 focus-visible:!shadow-none", i = "!bg-brand !text-on-brand hover:!bg-brand active:!bg-brand", a = "!bg-neutral !text-disabled disabled:!opacity-100";
+var t = "flex w-full items-end gap-2 rounded-[1.625rem] border border-border-control bg-surface p-2 focus-within:outline-none focus-within:ring-2 focus-within:ring-inset focus-within:ring-focus-ring " + e, n = {
+	field: "pl-5",
+	slot: "pl-2"
+}, r = "mr-1 flex h-9 shrink-0 items-center justify-center", i = "flex shrink-0 items-end gap-2", a = "min-h-9 min-w-0 flex-1 overflow-y-auto py-2 type-body [field-sizing:content] max-h-[4.75rem]", o = "focus-visible:!ring-0 focus-visible:!ring-offset-0 focus-visible:!shadow-none", s = "!bg-brand !text-on-brand hover:!bg-brand active:!bg-brand", c = "!bg-neutral !text-disabled disabled:!opacity-100";
 //#endregion
-export { n as promptBarFieldClasses, r as promptBarSendClasses, a as promptBarSendMutedClasses, i as promptBarSendReadyClasses, t as promptBarShellClasses };
+export { i as promptBarEndSlotClasses, a as promptBarFieldClasses, o as promptBarSendClasses, c as promptBarSendMutedClasses, s as promptBarSendReadyClasses, t as promptBarShellClasses, n as promptBarShellStartPadClasses, r as promptBarStartSlotClasses };