@thewhatmatters/wmds 0.2.0

package/dist/components/molecules/SegmentedControl/SegmentedControlContext.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode } from "react";
+import type { SegmentedControlLayout, SegmentedControlSize } from "./segmentedControlStyles";
+export type SegmentedControlContextValue = {
+    layoutId: string;
+    size: SegmentedControlSize;
+    layout: SegmentedControlLayout;
+    value: string;
+    onValueChange: (value: string) => void;
+    disabled?: boolean;
+};
+export declare function SegmentedControlProvider({ value, children, }: {
+    value: SegmentedControlContextValue;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function useSegmentedControl(): SegmentedControlContextValue;
+//# sourceMappingURL=SegmentedControlContext.d.ts.map

package/dist/components/molecules/SegmentedControl/SegmentedControlContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControlContext.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/SegmentedControl/SegmentedControlContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAElE,OAAO,KAAK,EAAE,sBAAsB,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAE7F,MAAM,MAAM,4BAA4B,GAAG;IACzC,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,oBAAoB,CAAC;IAC3B,MAAM,EAAE,sBAAsB,CAAC;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAIF,wBAAgB,wBAAwB,CAAC,EACvC,KAAK,EACL,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,4BAA4B,CAAC;IACpC,QAAQ,EAAE,SAAS,CAAC;CACrB,+BAIA;AAED,wBAAgB,mBAAmB,iCAMlC"}

package/dist/components/molecules/SegmentedControl/SegmentedControlContext.js

@@ -0,0 +1,18 @@
+"use client";
+import { createContext as e, useContext as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/molecules/SegmentedControl/SegmentedControlContext.tsx
+var r = e(null);
+function i({ value: e, children: t }) {
+	return /* @__PURE__ */ n(r.Provider, {
+		value: e,
+		children: t
+	});
+}
+function a() {
+	let e = t(r);
+	if (e == null) throw Error("SegmentedControl.Item must be used within SegmentedControl.");
+	return e;
+}
+//#endregion
+export { i as SegmentedControlProvider, a as useSegmentedControl };

package/dist/components/molecules/SegmentedControl/SegmentedControlItem.d.ts

@@ -0,0 +1,25 @@
+import type { ReactNode } from "react";
+/** Layout-only — width in stretch layouts comes from the parent track. */
+export type SegmentedControlItemLayoutClassName = string;
+export interface SegmentedControlItemProps {
+    /** Stable selection value — required. */
+    value: string;
+    /** Primary segment label. */
+    children: ReactNode;
+    /** Leading affordance — icon or swatch (**ButtonIcon** / **BadgeIcon** from stories). */
+    start?: ReactNode;
+    /** Trailing meta — count or shortcut. */
+    end?: ReactNode;
+    disabled?: boolean;
+    className?: SegmentedControlItemLayoutClassName;
+}
+/**
+ * One segment inside {@link SegmentedControl} — start | label | end. Not a standalone export pattern.
+ */
+export declare function SegmentedControlItem({ value, children, start, end, disabled: itemDisabled, className, }: SegmentedControlItemProps): import("react").JSX.Element;
+/** Wraps segment buttons so the sliding thumb shares one layoutId scope. */
+export declare function SegmentedControlItemGroup({ layoutId, children, }: {
+    layoutId: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+//# sourceMappingURL=SegmentedControlItem.d.ts.map

package/dist/components/molecules/SegmentedControl/SegmentedControlItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControlItem.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/SegmentedControl/SegmentedControlItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAqBvC,0EAA0E;AAC1E,MAAM,MAAM,mCAAmC,GAAG,MAAM,CAAC;AAEzD,MAAM,WAAW,yBAAyB;IACxC,yCAAyC;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,6BAA6B;IAC7B,QAAQ,EAAE,SAAS,CAAC;IACpB,yFAAyF;IACzF,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,yCAAyC;IACzC,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,mCAAmC,CAAC;CACjD;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,KAAK,EACL,QAAQ,EACR,KAAK,EACL,GAAG,EACH,QAAQ,EAAE,YAAY,EACtB,SAAS,GACV,EAAE,yBAAyB,+BAqD3B;AAED,4EAA4E;AAC5E,wBAAgB,yBAAyB,CAAC,EACxC,QAAQ,EACR,QAAQ,GACT,EAAE;IACD,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;CACrB,+BAEA"}

package/dist/components/molecules/SegmentedControl/SegmentedControlItem.js

@@ -0,0 +1,55 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { motionTransitionProp as t } from "../../../lib/motion.js";
+import { segmentedDisabledClasses as n } from "../../../lib/segmentedControl.js";
+import { useSegmentedControl as r } from "./SegmentedControlContext.js";
+import { segmentedControlItemBodyClasses as i, segmentedControlItemClasses as a, segmentedControlItemEndClasses as o, segmentedControlItemGapClasses as s, segmentedControlItemLabelClasses as c, segmentedControlItemSelectedClasses as l, segmentedControlItemSizeClasses as u, segmentedControlItemStartClasses as d, segmentedControlItemUnselectedClasses as f, segmentedControlThumbClasses as p } from "./segmentedControlStyles.js";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { LayoutGroup as g, motion as _ } from "motion/react";
+//#region src/components/molecules/SegmentedControl/SegmentedControlItem.tsx
+function v({ value: g, children: v, start: y, end: b, disabled: x, className: S }) {
+	let C = r(), w = C.value === g, T = C.disabled || x;
+	return /* @__PURE__ */ h("button", {
+		type: "button",
+		role: "radio",
+		"aria-checked": w,
+		disabled: T,
+		onClick: () => {
+			T || w || C.onValueChange(g);
+		},
+		className: e(a, u[C.size], C.layout === "stretch" && "min-w-0 flex-1", n, w ? l : f, S),
+		"data-value": g,
+		"data-selected": w || void 0,
+		children: [w ? /* @__PURE__ */ m(_.span, {
+			layoutId: C.layoutId,
+			className: p,
+			transition: t("fast"),
+			"aria-hidden": !0
+		}) : null, /* @__PURE__ */ h("span", {
+			className: e(i, s[C.size], C.layout === "stretch" && "w-full"),
+			children: [
+				y == null ? null : /* @__PURE__ */ m("span", {
+					className: d[C.size],
+					"aria-hidden": !0,
+					children: y
+				}),
+				/* @__PURE__ */ m("span", {
+					className: c,
+					children: v
+				}),
+				b == null ? null : /* @__PURE__ */ m("span", {
+					className: o,
+					children: b
+				})
+			]
+		})]
+	});
+}
+function y({ layoutId: e, children: t }) {
+	return /* @__PURE__ */ m(g, {
+		id: e,
+		children: t
+	});
+}
+//#endregion
+export { v as SegmentedControlItem, y as SegmentedControlItemGroup };

package/dist/components/molecules/SegmentedControl/segmentedControlStyles.d.ts

@@ -0,0 +1,31 @@
+export declare const segmentedControlSizes: readonly ["sm", "md", "lg"];
+export type SegmentedControlSize = (typeof segmentedControlSizes)[number];
+export declare const segmentedControlLayouts: readonly ["hug", "stretch"];
+export type SegmentedControlLayout = (typeof segmentedControlLayouts)[number];
+/** Shared track — recessed `bg-body` well; inset padding matches Dropdown menu (`p-0.5`). */
+export declare const segmentedControlTrackClasses: string;
+export declare const segmentedControlTrackStretchClasses = "flex w-full min-w-0";
+/** Track shell — same pixel heights as **Chip** / cluster table (28 / 36 / 44px). */
+export declare const segmentedControlTrackSizeClasses: Record<SegmentedControlSize, string>;
+/**
+ * Segment label typography + horizontal pad — matches **Chip** filter shells at each tier.
+ * `size` prop names align 1:1 with cluster tiers (unlike **Button** xs/sm/md).
+ */
+export declare const segmentedControlItemSizeClasses: Record<SegmentedControlSize, string>;
+export declare const segmentedControlItemClasses: string;
+export declare const segmentedControlItemStretchClasses = "min-w-0 flex-1";
+export declare const segmentedControlItemBodyClasses = "relative z-10 inline-flex min-w-0 items-center justify-center";
+export declare const segmentedControlItemBodyStretchClasses = "w-full";
+/** Gap between start | label | end — matches **Chip** icon gaps at each tier. */
+export declare const segmentedControlItemGapClasses: Record<SegmentedControlSize, string>;
+/** Leading slot — icon or swatch from stories; wrap Lucide in **ButtonIcon** / **BadgeIcon**. */
+export declare const segmentedControlItemStartClasses: Record<SegmentedControlSize, string>;
+export declare const segmentedControlItemLabelClasses = "min-w-0 truncate";
+/** Trailing meta — count or key cap; prefer **BadgeSegmentCount** for filter-style totals. */
+export declare const segmentedControlItemEndClasses = "shrink-0 font-mono text-[10.5px] leading-none tabular-nums text-muted";
+export declare const segmentedControlItemSelectedClasses = "text-fg";
+/** Idle segment — `text-muted` (secondary text); hover promotes to primary ink. */
+export declare const segmentedControlItemUnselectedClasses = "text-muted hover:text-fg";
+/** Sliding selected segment — raised surface pill inside the body well. */
+export declare const segmentedControlThumbClasses = "pointer-events-none absolute inset-0 rounded-full bg-surface shadow-raised";
+//# sourceMappingURL=segmentedControlStyles.d.ts.map

package/dist/components/molecules/SegmentedControl/segmentedControlStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmentedControlStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/SegmentedControl/segmentedControlStyles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,qBAAqB,6BAA8B,CAAC;AAEjE,MAAM,MAAM,oBAAoB,GAAG,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,CAAC,CAAC;AAE1E,eAAO,MAAM,uBAAuB,6BAA8B,CAAC;AAEnE,MAAM,MAAM,sBAAsB,GAAG,CAAC,OAAO,uBAAuB,CAAC,CAAC,MAAM,CAAC,CAAC;AAE9E,6FAA6F;AAC7F,eAAO,MAAM,4BAA4B,QAGxC,CAAC;AAEF,eAAO,MAAM,mCAAmC,wBAAwB,CAAC;AAEzE,qFAAqF;AACrF,eAAO,MAAM,gCAAgC,EAAE,MAAM,CAAC,oBAAoB,EAAE,MAAM,CAIjF,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,+BAA+B,EAAE,MAAM,CAAC,oBAAoB,EAAE,MAAM,CAIhF,CAAC;AAEF,eAAO,MAAM,2BAA2B,QAIvC,CAAC;AAEF,eAAO,MAAM,kCAAkC,mBAAmB,CAAC;AAEnE,eAAO,MAAM,+BAA+B,kEACqB,CAAC;AAElE,eAAO,MAAM,sCAAsC,WAAW,CAAC;AAE/D,iFAAiF;AACjF,eAAO,MAAM,8BAA8B,EAAE,MAAM,CAAC,oBAAoB,EAAE,MAAM,CAI/E,CAAC;AAEF,iGAAiG;AACjG,eAAO,MAAM,gCAAgC,EAAE,MAAM,CAAC,oBAAoB,EAAE,MAAM,CAIjF,CAAC;AAEF,eAAO,MAAM,gCAAgC,qBAAqB,CAAC;AAEnE,8FAA8F;AAC9F,eAAO,MAAM,8BAA8B,0EAC8B,CAAC;AAE1E,eAAO,MAAM,mCAAmC,YAAY,CAAC;AAE7D,mFAAmF;AACnF,eAAO,MAAM,qCAAqC,6BAA6B,CAAC;AAEhF,2EAA2E;AAC3E,eAAO,MAAM,4BAA4B,+EACqC,CAAC"}

package/dist/components/molecules/SegmentedControl/segmentedControlStyles.js

@@ -0,0 +1,28 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { motionTransition as t } from "../../../lib/motion.js";
+import { clusterHeightClasses as n } from "../../../lib/clusterScale.js";
+//#region src/components/molecules/SegmentedControl/segmentedControlStyles.ts
+var r = [
+	"sm",
+	"md",
+	"lg"
+], i = ["hug", "stretch"], a = e("relative inline-flex items-stretch rounded-full bg-body p-0.5 shadow-hairline", t("fast")), o = "flex w-full min-w-0", s = {
+	sm: n.sm,
+	md: n.md,
+	lg: n.lg
+}, c = {
+	sm: "px-2.5 text-xs leading-none",
+	md: "px-3 text-sm leading-none",
+	lg: "px-4 text-sm leading-none"
+}, l = e("relative inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full font-sans font-medium tracking-normal", "transition-[color] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-inset", t("fast")), u = "min-w-0 flex-1", d = "relative z-10 inline-flex min-w-0 items-center justify-center", f = "w-full", p = {
+	sm: "gap-1",
+	md: "gap-1.5",
+	lg: "gap-2"
+}, m = {
+	sm: "flex shrink-0 items-center text-current [&>svg]:size-3 [&>svg]:shrink-0 [&>svg]:stroke-current",
+	md: "flex shrink-0 items-center text-current [&>svg]:size-3.5 [&>svg]:shrink-0 [&>svg]:stroke-current",
+	lg: "flex shrink-0 items-center text-current [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:stroke-current"
+}, h = "min-w-0 truncate", g = "shrink-0 font-mono text-[10.5px] leading-none tabular-nums text-muted", _ = "text-fg", v = "text-muted hover:text-fg", y = "pointer-events-none absolute inset-0 rounded-full bg-surface shadow-raised";
+//#endregion
+export { d as segmentedControlItemBodyClasses, f as segmentedControlItemBodyStretchClasses, l as segmentedControlItemClasses, g as segmentedControlItemEndClasses, p as segmentedControlItemGapClasses, h as segmentedControlItemLabelClasses, _ as segmentedControlItemSelectedClasses, c as segmentedControlItemSizeClasses, m as segmentedControlItemStartClasses, u as segmentedControlItemStretchClasses, v as segmentedControlItemUnselectedClasses, i as segmentedControlLayouts, r as segmentedControlSizes, y as segmentedControlThumbClasses, a as segmentedControlTrackClasses, s as segmentedControlTrackSizeClasses, o as segmentedControlTrackStretchClasses };

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

@@ -0,0 +1,34 @@
+import { type ReactNode } from "react";
+import { type SelectSize } from "./selectStyles";
+export type { SelectSize } from "./selectStyles";
+export { selectSizes } from "./selectStyles";
+/** Layout-only — width, margin in toolbars and Card headers. */
+export type SelectLayoutClassName = string;
+export type SelectOption = {
+    value: string;
+    label: string;
+    /** Leading slot — icon, checkbox, swatch (**Dropdown.Item** `start`). */
+    start?: ReactNode;
+    /** Trailing slot — shortcut, count, checkmark (**Dropdown.Item** `end`). */
+    end?: ReactNode;
+};
+export interface SelectProps {
+    options: SelectOption[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    placeholder?: string;
+    label?: string;
+    description?: string;
+    disabled?: boolean;
+    size?: SelectSize;
+    className?: SelectLayoutClassName;
+    id?: string;
+    "aria-label"?: string;
+}
+/**
+ * Pill select — Input-matched trigger + floating listbox panel.
+ * Compose in forms and Card headers (period filters).
+ */
+export declare function Select({ options, value: valueProp, defaultValue, onValueChange, placeholder, label, description, disabled, size, className, id: idProp, "aria-label": ariaLabel, }: SelectProps): import("react").JSX.Element;
+//# sourceMappingURL=Select.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,EASL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAKf,OAAO,EAcL,KAAK,UAAU,EAChB,MAAM,gBAAgB,CAAC;AAExB,YAAY,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,gEAAgE;AAChE,MAAM,MAAM,qBAAqB,GAAG,MAAM,CAAC;AAE3C,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,yEAAyE;IACzE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,4EAA4E;IAC5E,GAAG,CAAC,EAAE,SAAS,CAAC;CACjB,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,SAAS,CAAC,EAAE,qBAAqB,CAAC;IAClC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAqBD;;;GAGG;AACH,wBAAgB,MAAM,CAAC,EACrB,OAAO,EACP,KAAK,EAAE,SAAS,EAChB,YAAY,EACZ,aAAa,EACb,WAAuB,EACvB,KAAK,EACL,WAAW,EACX,QAAgB,EAChB,IAAW,EACX,SAAS,EACT,EAAE,EAAE,MAAM,EACV,YAAY,EAAE,SAAS,GACxB,EAAE,WAAW,+BAoQb"}

package/dist/components/molecules/Select/Select.js

@@ -0,0 +1,161 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { Dropdown as t } from "../Dropdown/Dropdown.js";
+import { measureSelectMenuStyle as n } from "./selectMenuPosition.js";
+import { selectDescriptionClasses as r, selectFieldStackClasses as i, selectLabelClasses as a, selectRootClasses as ee, selectShellClasses as o, selectSizes as s, selectTriggerCaretRotateClasses as c, selectTriggerCaretSlotClasses as l, selectTriggerInnerClasses as te, selectTriggerLabelClasses as ne } from "./selectStyles.js";
+import { useCallback as u, useEffect as d, useId as f, useLayoutEffect as p, useRef as m, useState as h } from "react";
+import { ChevronDown as g } from "lucide-react";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
+//#region src/components/molecules/Select/Select.tsx
+function y(e) {
+	e.label == null && e["aria-label"] == null && console.warn("[WMDS Select] Provide `label` or `aria-label`."), e.options.length === 0 && console.warn("[WMDS Select] `options` must not be empty.");
+}
+function b(e, t) {
+	if (t != null) return e.find((e) => e.value === t)?.label;
+}
+function x({ options: s, value: x, defaultValue: S, onValueChange: C, placeholder: re = "Select…", label: w, description: T, disabled: E = !1, size: D = "md", className: O, id: k, "aria-label": A }) {
+	let j = f(), M = k ?? j, N = `${M}-listbox`, P = T == null ? void 0 : `${M}-description`, F = m(null), I = m(null), [L, R] = h(!1), [z, B] = h(null), [V, H] = h(S), [U, W] = h(() => {
+		let e = x ?? S, t = s.findIndex((t) => t.value === e);
+		return t >= 0 ? t : 0;
+	}), G = x !== void 0, K = G ? x : V;
+	y({
+		label: w,
+		"aria-label": A,
+		options: s
+	});
+	let q = b(s, K), J = u(() => {
+		R(!1), B(null);
+	}, []), Y = u(() => {
+		let e = I.current;
+		e != null && B(n(e, s)), R(!0);
+	}, [s]), X = u((e) => {
+		G || H(e), C?.(e), J();
+	}, [
+		J,
+		G,
+		C
+	]), Z = u(() => {
+		let e = I.current;
+		e != null && B(n(e, s));
+	}, [s]);
+	p(() => {
+		if (L) return Z(), window.addEventListener("resize", Z), window.addEventListener("scroll", Z, !0), () => {
+			window.removeEventListener("resize", Z), window.removeEventListener("scroll", Z, !0);
+		};
+	}, [L, Z]), d(() => {
+		if (!L) return;
+		function e(e) {
+			F.current != null && !F.current.contains(e.target) && J();
+		}
+		return document.addEventListener("mousedown", e), () => {
+			document.removeEventListener("mousedown", e);
+		};
+	}, [J, L]), d(() => {
+		let e = s.findIndex((e) => e.value === K);
+		e >= 0 && W(e);
+	}, [s, K]);
+	function Q(e) {
+		W((t) => s.length === 0 ? 0 : (t + e + s.length) % s.length);
+	}
+	function ie(e) {
+		if (!E) switch (e.key) {
+			case "ArrowDown":
+				e.preventDefault(), L ? Q(1) : Y();
+				break;
+			case "ArrowUp":
+				e.preventDefault(), L ? Q(-1) : Y();
+				break;
+			case "Enter":
+			case " ":
+				if (e.preventDefault(), L) {
+					let e = s[U];
+					e != null && X(e.value);
+				} else Y();
+				break;
+			case "Escape": e.preventDefault(), J();
+		}
+	}
+	let $ = /* @__PURE__ */ v("div", {
+		ref: F,
+		className: e(ee, O),
+		children: [/* @__PURE__ */ _("div", {
+			ref: I,
+			className: e(o[D], E && "pointer-events-none opacity-50"),
+			"data-open": L ? "true" : "false",
+			children: /* @__PURE__ */ v("button", {
+				type: "button",
+				id: M,
+				disabled: E,
+				"aria-label": w == null ? A : void 0,
+				"aria-labelledby": w == null ? void 0 : `${M}-label`,
+				"aria-describedby": P,
+				"aria-haspopup": "listbox",
+				"aria-expanded": L,
+				"aria-controls": N,
+				onClick: () => {
+					E || (L ? J() : Y());
+				},
+				onKeyDown: ie,
+				className: te[D],
+				children: [/* @__PURE__ */ _("span", {
+					className: e(ne, q == null && "text-disabled"),
+					children: q ?? re
+				}), /* @__PURE__ */ _("span", {
+					className: l[D],
+					"aria-hidden": !0,
+					children: /* @__PURE__ */ _("span", {
+						className: e(c, L && "rotate-180"),
+						children: /* @__PURE__ */ _(g, { strokeWidth: 2 })
+					})
+				})]
+			})
+		}), L && z != null ? /* @__PURE__ */ _(t.Menu, {
+			id: N,
+			role: "listbox",
+			"aria-labelledby": M,
+			style: z,
+			children: s.map((e, n) => {
+				let r = e.value === K, i = n === U;
+				return /* @__PURE__ */ _("li", {
+					role: "presentation",
+					children: /* @__PURE__ */ _(t.Item, {
+						role: "option",
+						"aria-selected": r,
+						tabIndex: -1,
+						selected: r,
+						active: i,
+						truncate: !1,
+						start: e.start,
+						end: e.end,
+						onMouseEnter: () => {
+							W(n);
+						},
+						onClick: () => {
+							X(e.value);
+						},
+						children: e.label
+					})
+				}, e.value);
+			})
+		}) : null]
+	});
+	return w == null && T == null ? $ : /* @__PURE__ */ v("div", {
+		className: i,
+		children: [
+			w == null ? null : /* @__PURE__ */ _("label", {
+				id: `${M}-label`,
+				htmlFor: M,
+				className: e(a, E && "opacity-50"),
+				children: w
+			}),
+			$,
+			T == null ? null : /* @__PURE__ */ _("p", {
+				id: P,
+				className: r,
+				children: T
+			})
+		]
+	});
+}
+//#endregion
+export { x as Select, s as selectSizes };

package/dist/components/molecules/Select/selectMenuPosition.d.ts

@@ -0,0 +1,11 @@
+import type { CSSProperties, ReactNode } from "react";
+type SelectMenuMeasureOption = {
+    label: string;
+    start?: ReactNode;
+    end?: ReactNode;
+};
+/** Widest option row — labels, optional start, check or end meta. */
+export declare function measureSelectOptionsContentWidth(options: SelectMenuMeasureOption[]): number;
+export declare function measureSelectMenuStyle(shell: HTMLElement, options: SelectMenuMeasureOption[]): CSSProperties;
+export {};
+//# sourceMappingURL=selectMenuPosition.d.ts.map

package/dist/components/molecules/Select/selectMenuPosition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectMenuPosition.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Select/selectMenuPosition.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOtD,KAAK,uBAAuB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,GAAG,CAAC,EAAE,SAAS,CAAC;CACjB,CAAC;AAEF,qEAAqE;AACrE,wBAAgB,gCAAgC,CAAC,OAAO,EAAE,uBAAuB,EAAE,GAAG,MAAM,CAS3F;AAED,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,WAAW,EAClB,OAAO,EAAE,uBAAuB,EAAE,GACjC,aAAa,CASf"}

package/dist/components/molecules/Select/selectMenuPosition.js

@@ -0,0 +1,14 @@
+"use client";
+import { measureDropdownMenuStyle as e } from "../Dropdown/dropdownMenuPosition.js";
+//#region src/components/molecules/Select/selectMenuPosition.ts
+function t(t, n) {
+	let r = n.map((e) => ({
+		label: e.label,
+		start: e.start,
+		end: e.end,
+		selectionCheck: e.end == null
+	}));
+	return e(t, r, "start");
+}
+//#endregion
+export { t as measureSelectMenuStyle };

package/dist/components/molecules/Select/selectStyles.d.ts

@@ -0,0 +1,21 @@
+import { type InputSize } from "../../atoms/Input/inputShellStyles";
+export declare const selectSizes: readonly ["sm", "md", "lg"];
+export type SelectSize = InputSize;
+export declare const selectFieldStackClasses = "flex w-full flex-col gap-1.5";
+export declare const selectRootClasses = "relative w-full min-w-0";
+/** Outer pill — owns border, elevation, height, and focus ring (Search shell pattern). */
+export declare const selectShellClasses: Record<SelectSize, string>;
+export declare const selectShellDisabledClasses = "pointer-events-none opacity-50";
+/** Inner trigger — transparent; shell owns chrome and focus ring. */
+export declare const selectTriggerInnerClasses: Record<SelectSize, string>;
+export declare const selectTriggerLabelClasses = "min-w-0 flex-1 truncate";
+export declare const selectTriggerPlaceholderClasses = "text-disabled";
+/** Trailing caret column — fixed square; chevron SVG fills the slot. */
+export declare const selectTriggerCaretSlotClasses: Record<SelectSize, string>;
+export declare const selectTriggerCaretRotateClasses: string;
+export declare const selectTriggerCaretOpenClasses = "rotate-180";
+export { dropdownMenuOffsetPx as selectMenuOffsetPx } from "../Dropdown/dropdownStyles";
+export declare const selectDisabledLabelClasses = "opacity-50";
+export declare const selectLabelClasses: string;
+export declare const selectDescriptionClasses: string;
+//# sourceMappingURL=selectStyles.d.ts.map

package/dist/components/molecules/Select/selectStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Select/selectStyles.ts"],"names":[],"mappings":"AAGA,OAAO,EAIL,KAAK,SAAS,EACf,MAAM,oCAAoC,CAAC;AAE5C,eAAO,MAAM,WAAW,6BAAa,CAAC;AAEtC,MAAM,MAAM,UAAU,GAAG,SAAS,CAAC;AAEnC,eAAO,MAAM,uBAAuB,iCAAiC,CAAC;AAEtE,eAAO,MAAM,iBAAiB,4BAA4B,CAAC;AAU3D,0FAA0F;AAC1F,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAmBzD,CAAC;AAEF,eAAO,MAAM,0BAA0B,mCAAmC,CAAC;AAE3E,qEAAqE;AACrE,eAAO,MAAM,yBAAyB,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAgBhE,CAAC;AAEF,eAAO,MAAM,yBAAyB,4BAA4B,CAAC;AAEnE,eAAO,MAAM,+BAA+B,kBAAkB,CAAC;AAE/D,wEAAwE;AACxE,eAAO,MAAM,6BAA6B,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAIpE,CAAC;AAEF,eAAO,MAAM,+BAA+B,QAI3C,CAAC;AAEF,eAAO,MAAM,6BAA6B,eAAe,CAAC;AAE1D,OAAO,EAAE,oBAAoB,IAAI,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAExF,eAAO,MAAM,0BAA0B,eAAe,CAAC;AAEvD,eAAO,MAAM,kBAAkB,QAA8B,CAAC;AAE9D,eAAO,MAAM,wBAAwB,QAA6B,CAAC"}

package/dist/components/molecules/Select/selectStyles.js

@@ -0,0 +1,21 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { typographyClass as t } from "../../../lib/typography.js";
+import { focusRingTransitionClasses as n, motionTransition as r } from "../../../lib/motion.js";
+import { inputDisabledClasses as i, inputSizes as a, inputSoloRadiusClasses as o } from "../../atoms/Input/inputShellStyles.js";
+//#region src/components/molecules/Select/selectStyles.ts
+var s = a, c = "flex w-full flex-col gap-1.5", l = "relative w-full min-w-0", u = e("outline-none ring-2 ring-transparent ring-inset ring-offset-0", "focus-within:ring-focus-ring", "data-[open=true]:ring-focus-ring", n), d = {
+	sm: e("relative flex w-full min-w-0 items-center rounded-full border border-border-control bg-surface shadow-raised", o.sm, "h-8", u),
+	md: e("relative flex w-full min-w-0 items-center rounded-full border border-border-control bg-surface shadow-raised", o.md, "h-11", u),
+	lg: e("relative flex w-full min-w-0 items-center rounded-full border border-border-control bg-surface shadow-raised", o.lg, "min-h-12", u)
+}, f = "pointer-events-none opacity-50", p = {
+	sm: e("flex h-full w-full min-w-0 cursor-pointer items-center justify-between gap-2 border-0 bg-transparent px-2.5 text-left text-xs leading-none font-sans font-normal tracking-normal text-fg", "pr-2.5 shadow-none outline-none focus:outline-none focus-visible:outline-none", i),
+	md: e("flex h-full w-full min-w-0 cursor-pointer items-center justify-between gap-2 border-0 bg-transparent px-3 text-left text-sm leading-none font-sans font-normal tracking-normal text-fg", "pr-3 shadow-none outline-none focus:outline-none focus-visible:outline-none", i),
+	lg: e("flex h-full w-full min-w-0 cursor-pointer items-center justify-between gap-2 border-0 bg-transparent px-4 text-left text-base leading-none font-sans font-normal tracking-normal text-fg", "pr-3.5 shadow-none outline-none focus:outline-none focus-visible:outline-none", i)
+}, m = "min-w-0 flex-1 truncate", h = "text-disabled", g = {
+	sm: "flex size-3.5 shrink-0 items-center justify-center text-muted",
+	md: "flex size-4 shrink-0 items-center justify-center text-muted",
+	lg: "flex size-4 shrink-0 items-center justify-center text-muted"
+}, _ = e("inline-flex [&>svg]:size-full [&>svg]:shrink-0 [&>svg]:stroke-current", r("fast"), "transition-transform"), v = "rotate-180", y = "opacity-50", b = t("ui-label"), x = t("caption");
+//#endregion
+export { x as selectDescriptionClasses, y as selectDisabledLabelClasses, c as selectFieldStackClasses, b as selectLabelClasses, l as selectRootClasses, d as selectShellClasses, f as selectShellDisabledClasses, s as selectSizes, v as selectTriggerCaretOpenClasses, _ as selectTriggerCaretRotateClasses, g as selectTriggerCaretSlotClasses, p as selectTriggerInnerClasses, m as selectTriggerLabelClasses, h as selectTriggerPlaceholderClasses };

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

@@ -0,0 +1,33 @@
+import { type ReactNode } from "react";
+/** Layout-only — width or margin. */
+export type SelectableCardLayoutClassName = string;
+export interface SelectableCardGroupProps {
+    /** Accessible name for the checkbox group. */
+    label: string;
+    values: readonly string[];
+    onValuesChange: (values: string[]) => void;
+    /**
+     * Slot above the grid. Compose a hugged **SegmentedControl**
+     * for a fresh / refresh choice.
+     */
+    toggle?: ReactNode;
+    children: ReactNode;
+    className?: SelectableCardLayoutClassName;
+}
+export interface SelectableCardProps {
+    value: string;
+    title: string;
+    description?: string;
+    className?: SelectableCardLayoutClassName;
+}
+declare function SelectableCardGroup({ label, values, onValuesChange, toggle, children, className, }: SelectableCardGroupProps): import("react").JSX.Element;
+/**
+ * Multi-select card. The whole card is the checkbox.
+ * Checked state is **Badge** `iconOnly` with a Lucide check.
+ */
+declare function SelectableCardItem({ value, title, description, className, }: SelectableCardProps): import("react").JSX.Element;
+export declare const SelectableCard: typeof SelectableCardItem & {
+    Group: typeof SelectableCardGroup;
+};
+export {};
+//# sourceMappingURL=SelectableCard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectableCard.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/SelectableCard/SelectableCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAef,qCAAqC;AACrC,MAAM,MAAM,6BAA6B,GAAG,MAAM,CAAC;AAiBnD,MAAM,WAAW,wBAAwB;IACvC,8CAA8C;IAC9C,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,SAAS,MAAM,EAAE,CAAC;IAC1B,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC3C;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,6BAA6B,CAAC;CAC3C;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,6BAA6B,CAAC;CAC3C;AAED,iBAAS,mBAAmB,CAAC,EAC3B,KAAK,EACL,MAAM,EACN,cAAc,EACd,MAAM,EACN,QAAQ,EACR,SAAS,GACV,EAAE,wBAAwB,+BAqB1B;AAED;;;GAGG;AACH,iBAAS,kBAAkB,CAAC,EAC1B,KAAK,EACL,KAAK,EACL,WAAW,EACX,SAAS,GACV,EAAE,mBAAmB,+BAqCrB;AAED,eAAO,MAAM,cAAc;;CAEzB,CAAC"}

package/dist/components/molecules/SelectableCard/SelectableCard.js

@@ -0,0 +1,84 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { typographyClass as t } from "../../../lib/typography.js";
+import { Badge as n } from "../../atoms/Badge/Badge.js";
+import { selectableCardCheckedClasses as r, selectableCardClasses as i, selectableCardGridClasses as a, selectableCardGroupClasses as o, selectableCardMarkClasses as s, selectableCardToggleClasses as c } from "./selectableCardStyles.js";
+import { createContext as l, useContext as u, useId as d } from "react";
+import { Check as f } from "lucide-react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/components/molecules/SelectableCard/SelectableCard.tsx
+var h = l(null);
+function g(e) {
+	let t = u(h);
+	if (t == null) throw Error(`${e} must be used inside SelectableCard.Group.`);
+	return t;
+}
+function _({ label: t, values: n, onValuesChange: r, toggle: i, children: s, className: l }) {
+	function u(e) {
+		if (n.includes(e)) {
+			r(n.filter((t) => t !== e));
+			return;
+		}
+		r([...n, e]);
+	}
+	return /* @__PURE__ */ p(h.Provider, {
+		value: {
+			values: n,
+			onToggle: u
+		},
+		children: /* @__PURE__ */ m("div", {
+			role: "group",
+			"aria-label": t,
+			className: e(o, l),
+			children: [i == null ? null : /* @__PURE__ */ p("div", {
+				className: c,
+				children: i
+			}), /* @__PURE__ */ p("div", {
+				className: a,
+				children: s
+			})]
+		})
+	});
+}
+function v({ value: a, title: o, description: c, className: l }) {
+	let { values: u, onToggle: h } = g("SelectableCard"), _ = d(), v = d(), y = u.includes(a);
+	return /* @__PURE__ */ m("label", {
+		className: e(i, y && "border-brand", l),
+		"data-value": a,
+		"data-checked": y ? "true" : "false",
+		children: [
+			/* @__PURE__ */ p("input", {
+				type: "checkbox",
+				className: "sr-only",
+				checked: y,
+				"aria-labelledby": _,
+				"aria-describedby": c == null ? void 0 : v,
+				onChange: () => h(a)
+			}),
+			/* @__PURE__ */ p("span", {
+				id: _,
+				className: t("subheading"),
+				children: o
+			}),
+			c == null ? null : /* @__PURE__ */ p("span", {
+				id: v,
+				className: t("caption"),
+				children: c
+			}),
+			y ? /* @__PURE__ */ p("span", {
+				className: r,
+				children: /* @__PURE__ */ p(n, {
+					variant: "neutral",
+					iconOnly: !0,
+					icon: /* @__PURE__ */ p(f, { strokeWidth: 2 })
+				})
+			}) : /* @__PURE__ */ p("span", {
+				className: s,
+				"aria-hidden": !0
+			})
+		]
+	});
+}
+var y = Object.assign(v, { Group: _ });
+//#endregion
+export { y as SelectableCard };

package/dist/components/molecules/SelectableCard/selectableCardStyles.d.ts

@@ -0,0 +1,14 @@
+export declare const selectableCardGroupClasses = "flex w-full flex-col gap-8";
+/**
+ * The group is a column, so a default stretch would widen a hugged
+ * SegmentedControl to the grid. `self-start` keeps `layout="hug"`.
+ */
+export declare const selectableCardToggleClasses = "self-start";
+/** Two columns on mobile, three from the desktop grid (`lg`). */
+export declare const selectableCardGridClasses = "grid grid-cols-2 gap-3 lg:grid-cols-3 lg:gap-4";
+export declare const selectableCardClasses: string;
+export declare const selectableCardSelectedClasses = "border-brand";
+/** Unchecked corner — same 22px circle as Badge icon-only. Checked state swaps in Badge. */
+export declare const selectableCardMarkClasses = "pointer-events-none absolute top-4 right-4 size-[1.375rem] rounded-full border border-border bg-surface";
+export declare const selectableCardCheckedClasses = "pointer-events-none absolute top-4 right-4";
+//# sourceMappingURL=selectableCardStyles.d.ts.map

package/dist/components/molecules/SelectableCard/selectableCardStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectableCardStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/SelectableCard/selectableCardStyles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,0BAA0B,+BAA+B,CAAC;AAEvE;;;GAGG;AACH,eAAO,MAAM,2BAA2B,eAAe,CAAC;AAExD,iEAAiE;AACjE,eAAO,MAAM,yBAAyB,mDAAmD,CAAC;AAE1F,eAAO,MAAM,qBAAqB,QAKjC,CAAC;AAEF,eAAO,MAAM,6BAA6B,iBAAiB,CAAC;AAE5D,4FAA4F;AAC5F,eAAO,MAAM,yBAAyB,4GACqE,CAAC;AAE5G,eAAO,MAAM,4BAA4B,+CAA+C,CAAC"}

package/dist/components/molecules/SelectableCard/selectableCardStyles.js

@@ -0,0 +1,7 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { focusRingTransitionClasses as t } from "../../../lib/motion.js";
+//#region src/components/molecules/SelectableCard/selectableCardStyles.ts
+var n = "flex w-full flex-col gap-8", r = "self-start", i = "grid grid-cols-2 gap-3 lg:grid-cols-3 lg:gap-4", a = e("relative flex min-h-36 cursor-pointer flex-col gap-2 rounded-[var(--radius-card-shell)] bg-surface p-4 pr-12 text-left shadow-soft-card", "border-2 border-transparent", "has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-focus-ring has-[:focus-visible]:ring-offset-2 has-[:focus-visible]:ring-offset-body", t), o = "border-brand", s = "pointer-events-none absolute top-4 right-4 size-[1.375rem] rounded-full border border-border bg-surface", c = "pointer-events-none absolute top-4 right-4";
+//#endregion
+export { c as selectableCardCheckedClasses, a as selectableCardClasses, i as selectableCardGridClasses, n as selectableCardGroupClasses, s as selectableCardMarkClasses, o as selectableCardSelectedClasses, r as selectableCardToggleClasses };