@thewhatmatters/wmds 0.2.0

package/dist/components/atoms/IconButton/IconButton.d.ts

@@ -0,0 +1,49 @@
+import { type ButtonHTMLAttributes, type ReactElement } from "react";
+import { type ButtonRole, type IconButtonSize } from "../Button/buttonStyles";
+export type { ButtonRole, IconButtonSize } from "../Button/buttonStyles";
+export { buttonRoles } from "../Button/buttonStyles";
+export type IconButtonInsetSize = "sm" | "md" | "lg";
+/** Layout-only — not for colors, borders, or typography overrides. */
+export type IconButtonLayoutClassName = string;
+export interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "aria-label" | "children" | "className" | "role" | "size" | "title"> {
+    /** Lucide icon — `import { … } from "lucide-react"`. */
+    icon: ReactElement;
+    /** Required — specific action name for screen readers (e.g. "Delete conversation"). */
+    "aria-label": string;
+    /** Action role. Default: `ghost` (toolbars). FAB pattern forces `primary`. */
+    role?: ButtonRole;
+    /** Toolbar / FAB size — or inset dismiss tier when `inset` is set. Default: `md`. */
+    size?: IconButtonSize | IconButtonInsetSize;
+    /** Inset dismiss — compact hit target for chip innards; `size` uses sm | md | lg inset scale. */
+    inset?: boolean;
+    /** Native tooltip for sighted users — defaults to `aria-label`. Pass `""` to suppress. */
+    title?: string;
+    /** FAB pattern — primary fill + elevated shadow. */
+    fab?: boolean;
+    /** Shows spinner instead of icon — async feedback. */
+    loading?: boolean;
+    disabled?: boolean;
+    type?: "button" | "submit" | "reset";
+    /**
+     * Compose IconButton chrome onto another element (Base UI `render`) — e.g.
+     * `render={<a href="/" />}` for a circular brand mark. Not with `fab` or `inset`.
+     * `disabled` maps to `aria-disabled` on non-button elements.
+     */
+    render?: ReactElement;
+    className?: IconButtonLayoutClassName;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;
+    "aria-current"?: React.AriaAttributes["aria-current"];
+    "aria-haspopup"?: boolean | "menu" | "dialog" | "listbox" | "tree" | "grid";
+    "aria-expanded"?: boolean;
+    "aria-controls"?: string;
+    id?: string;
+    name?: string;
+    form?: string;
+}
+/**
+ * Icon-only action control — circular hit target; **`aria-label` required**.
+ * Use when space is tight and the icon is universally understood; otherwise use `Button` with a label.
+ */
+export declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=IconButton.d.ts.map

package/dist/components/atoms/IconButton/IconButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/IconButton/IconButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,oBAAoB,EAAE,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAIjF,OAAO,EAIL,KAAK,UAAU,EACf,KAAK,cAAc,EACpB,MAAM,wBAAwB,CAAC;AAUhC,YAAY,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACzE,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD,MAAM,MAAM,mBAAmB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAErD,sEAAsE;AACtE,MAAM,MAAM,yBAAyB,GAAG,MAAM,CAAC;AAE/C,MAAM,WAAW,eACf,SAAQ,IAAI,CACV,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,YAAY,GAAG,UAAU,GAAG,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CACpE;IACD,wDAAwD;IACxD,IAAI,EAAE,YAAY,CAAC;IACnB,uFAAuF;IACvF,YAAY,EAAE,MAAM,CAAC;IACrB,8EAA8E;IAC9E,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,qFAAqF;IACrF,IAAI,CAAC,EAAE,cAAc,GAAG,mBAAmB,CAAC;IAC5C,iGAAiG;IACjG,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,0FAA0F;IAC1F,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,sDAAsD;IACtD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC;;;;OAIG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,SAAS,CAAC,EAAE,yBAAyB,CAAC;IACtC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACrD,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;IAC1D,cAAc,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;IACtD,eAAe,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;IAC5E,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAaD;;;GAGG;AACH,eAAO,MAAM,UAAU,+GAuHrB,CAAC"}

package/dist/components/atoms/IconButton/IconButton.js

@@ -0,0 +1,84 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { buttonBaseClasses as t, buttonRoleClasses as n, iconButtonSizeClasses as r } from "../Button/buttonStyles.js";
+import { ButtonIcon as i } from "../Button/ButtonIcon.js";
+import { ButtonSpinner as a } from "../Button/ButtonSpinner.js";
+import { iconButtonExpandedStyle as o, iconButtonInsetHitClasses as s, iconButtonInsetIconSizeClasses as c, iconButtonShapeClass as l } from "./iconButtonStyles.js";
+import { forwardRef as u } from "react";
+import { jsx as d } from "react/jsx-runtime";
+import { useRender as f } from "@base-ui/react/use-render";
+//#region src/components/atoms/IconButton/IconButton.tsx
+function p(e) {
+	e.fab && e.role != null && e.role !== "primary" && console.warn("[WMDS IconButton] `fab` uses primary role — omit `role` or set `primary`."), e.render != null && (e.fab || e.inset) && console.warn("[WMDS IconButton] `render` is not supported with `fab` or `inset`.");
+}
+var m = u(function({ icon: u, "aria-label": m, role: h, size: g = "md", inset: _ = !1, title: v, fab: y = !1, loading: b = !1, disabled: x, type: S = "button", render: C, className: w, onClick: T, onKeyDown: E, "aria-current": D, "aria-haspopup": O, "aria-expanded": k, "aria-controls": A, id: j, name: M, form: N, ...P }, F) {
+	p({
+		fab: y,
+		role: h,
+		render: C,
+		inset: _
+	});
+	let I = y ? "primary" : h ?? "ghost", L = x || b, R = v === void 0 ? m : v, z = _ ? g : null, B = _ ? s[z ?? "md"] : r[g], V = e(t, "justify-center", n[I], B, l, _ && "focus-visible:ring-offset-1 focus-visible:ring-offset-surface", y && "shadow-soft-card", w), H = b ? /* @__PURE__ */ d(a, { size: _ ? "xs" : g }) : _ ? /* @__PURE__ */ d("span", {
+		className: e("inline-flex shrink-0 items-center justify-center text-inherit [&>svg]:size-full", c[z ?? "md"]),
+		"aria-hidden": !0,
+		children: u
+	}) : /* @__PURE__ */ d(i, {
+		size: g,
+		children: u
+	});
+	return f({
+		render: C,
+		ref: F,
+		defaultTagName: "button",
+		props: C ? {
+			...P,
+			className: V,
+			"aria-label": m,
+			"aria-current": D,
+			"aria-haspopup": O,
+			"aria-expanded": k,
+			"aria-controls": A,
+			"aria-busy": b || void 0,
+			"aria-disabled": L ? !0 : void 0,
+			"data-disabled": L ? "" : void 0,
+			"data-role": I,
+			"data-size": g,
+			"data-pattern": y ? "fab" : _ ? "inset" : "icon",
+			"data-loading": b || void 0,
+			title: R === "" ? void 0 : R,
+			tabIndex: L ? -1 : P.tabIndex,
+			onClick: T,
+			onKeyDown: E,
+			id: j,
+			name: M,
+			form: N,
+			style: k && I === "ghost" ? o : void 0,
+			children: H
+		} : {
+			...P,
+			className: V,
+			type: S,
+			disabled: L,
+			"aria-busy": b || void 0,
+			"aria-label": m,
+			"aria-current": D,
+			"aria-haspopup": O,
+			"aria-expanded": k,
+			"aria-controls": A,
+			title: R === "" ? void 0 : R,
+			onClick: T,
+			onKeyDown: E,
+			id: j,
+			name: M,
+			form: N,
+			style: k && I === "ghost" ? o : void 0,
+			"data-role": I,
+			"data-size": g,
+			"data-pattern": y ? "fab" : _ ? "inset" : "icon",
+			"data-loading": b || void 0,
+			children: H
+		}
+	});
+});
+//#endregion
+export { m as IconButton };

package/dist/components/atoms/IconButton/iconButtonStyles.d.ts

@@ -0,0 +1,17 @@
+/** Circular icon-only control — square hit target from {@link iconButtonSizeClasses}. */
+export declare const iconButtonShapeClass = "shrink-0 rounded-full";
+/** Expanded disclosure/menu trigger — retain the ghost hover surface while open. */
+export declare const iconButtonExpandedStyle: {
+    backgroundColor: "color-mix(in srgb, currentColor 5%, transparent)";
+};
+/** FAB pattern — raised elevation on primary fill. */
+export declare const iconButtonFabClasses = "shadow-soft-card";
+/** Pill shell for a compact row of ghost IconButtons — Pattern: toolbar group. */
+export declare const iconButtonToolbarGroupClasses = "inline-flex items-center gap-1 rounded-full border border-border bg-surface p-1";
+/** Inset dismiss hit targets — removable Chip trailing × (pairs with sm | md | lg). */
+export declare const iconButtonInsetHitClasses: Record<"sm" | "md" | "lg", string>;
+/** Inset dismiss glyph scale — paired with {@link iconButtonInsetHitClasses}. */
+export declare const iconButtonInsetIconSizeClasses: Record<"sm" | "md" | "lg", string>;
+/** Tighter focus ring when nested inside a chip or compact row shell. */
+export declare const iconButtonInsetFocusClasses = "focus-visible:ring-offset-1 focus-visible:ring-offset-surface";
+//# sourceMappingURL=iconButtonStyles.d.ts.map

package/dist/components/atoms/IconButton/iconButtonStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"iconButtonStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/IconButton/iconButtonStyles.ts"],"names":[],"mappings":"AAEA,yFAAyF;AACzF,eAAO,MAAM,oBAAoB,0BAA0B,CAAC;AAE5D,oFAAoF;AACpF,eAAO,MAAM,uBAAuB;;CAEX,CAAC;AAE1B,sDAAsD;AACtD,eAAO,MAAM,oBAAoB,qBAAqB,CAAC;AAEvD,kFAAkF;AAClF,eAAO,MAAM,6BAA6B,oFACyC,CAAC;AAEpF,uFAAuF;AACvF,eAAO,MAAM,yBAAyB,EAAE,MAAM,CAAC,IAAI,GAAG,IAAI,GAAG,IAAI,EAAE,MAAM,CAIxE,CAAC;AAEF,iFAAiF;AACjF,eAAO,MAAM,8BAA8B,EAAE,MAAM,CAAC,IAAI,GAAG,IAAI,GAAG,IAAI,EAAE,MAAM,CAI7E,CAAC;AAEF,yEAAyE;AACzE,eAAO,MAAM,2BAA2B,kEACyB,CAAC"}

package/dist/components/atoms/IconButton/iconButtonStyles.js

@@ -0,0 +1,13 @@
+"use client";
+//#region src/components/atoms/IconButton/iconButtonStyles.ts
+var e = "shrink-0 rounded-full", t = { backgroundColor: "color-mix(in srgb, currentColor 5%, transparent)" }, n = "shadow-soft-card", r = {
+	sm: "size-5",
+	md: "size-6",
+	lg: "size-7"
+}, i = {
+	sm: "size-2.5 shrink-0 stroke-current",
+	md: "size-3 shrink-0 stroke-current",
+	lg: "size-3.5 shrink-0 stroke-current"
+}, a = "focus-visible:ring-offset-1 focus-visible:ring-offset-surface";
+//#endregion
+export { t as iconButtonExpandedStyle, n as iconButtonFabClasses, a as iconButtonInsetFocusClasses, r as iconButtonInsetHitClasses, i as iconButtonInsetIconSizeClasses, e as iconButtonShapeClass };

package/dist/components/atoms/Input/Input.d.ts

@@ -0,0 +1,37 @@
+import { type InputHTMLAttributes, type ReactElement } from "react";
+import { type InputMessagePosition, type InputSize, type InputStatus } from "./inputShellStyles";
+export type { InputMessagePosition, InputSize, InputStatus } from "./inputShellStyles";
+export { inputMessagePositions, inputSizes, inputStatuses } from "./inputShellStyles";
+/** Layout-only — not for colors, borders, or typography overrides. */
+export type InputLayoutClassName = string;
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+    size?: InputSize;
+    /** Optional visible label — omit for bare inputs. No label asterisk; use `endBadge` for Required. */
+    label?: string;
+    /** Neutral helper below the control — hidden when validation `message` is shown. */
+    description?: string;
+    /** Validation status — border + trailing icon. */
+    status?: InputStatus;
+    /** Validation copy in integrated status band — requires `status`; omit for status-only (border + icon). */
+    message?: string;
+    /** Status band placement when `message` is set — default `bottom`. */
+    messagePosition?: InputMessagePosition;
+    /** Trailing spinner — async validation. Combinable with `endBadge`. */
+    loading?: boolean;
+    /** Leading Lucide icon. */
+    icon?: ReactElement;
+    /**
+     * Trailing inset inside the shell — pass {@link Badge} (e.g. Required).
+     * Atoms cannot import Badge; compose at call site. Combinable with `status` / `loading`.
+     */
+    endBadge?: ReactElement;
+    /** Inside Search — no outer shell; parent pill owns border and focus ring. */
+    inline?: boolean;
+    className?: InputLayoutClassName;
+}
+/**
+ * Single-line pill text input — validation via `status`, `message`, and trailing icon.
+ * Bare by default; optional `label` (ADR-0006). Required fields: `endBadge` + `required`, not asterisks.
+ */
+export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=Input.d.ts.map

package/dist/components/atoms/Input/Input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,mBAAmB,EACxB,KAAK,YAAY,EAClB,MAAM,OAAO,CAAC;AAKf,OAAO,EA0BL,KAAK,oBAAoB,EACzB,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,oBAAoB,CAAC;AAE5B,YAAY,EAAE,oBAAoB,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACvF,OAAO,EAAE,qBAAqB,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEtF,sEAAsE;AACtE,MAAM,MAAM,oBAAoB,GAAG,MAAM,CAAC;AAE1C,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC3D,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,qGAAqG;IACrG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oFAAoF;IACpF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kDAAkD;IAClD,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,2GAA2G;IAC3G,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,sEAAsE;IACtE,eAAe,CAAC,EAAE,oBAAoB,CAAC;IACvC,uEAAuE;IACvE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2BAA2B;IAC3B,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,8EAA8E;IAC9E,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,oBAAoB,CAAC;CAClC;AAyCD;;;GAGG;AACH,eAAO,MAAM,KAAK,yGAqKhB,CAAC"}

package/dist/components/atoms/Input/Input.js

@@ -0,0 +1,105 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { typographyClass as t } from "../../../lib/typography.js";
+import { inputAttachedFieldClasses as n, inputAttachedInputClasses as r, inputBaseClasses as i, inputCompoundInnerFieldClassesFor as a, inputCompoundShellClassesFor as o, inputControlStackClasses as s, inputDisabledClasses as ee, inputEndBadgeAndStatusGapClasses as c, inputEndBadgeGapClasses as l, inputEndBadgeWrapperClasses as u, inputFieldStackClasses as d, inputIconGapClasses as f, inputIconPositionClasses as p, inputIconSizeClasses as m, inputInlineClasses as h, inputMessagePositions as g, inputShellClasses as _, inputSizeClasses as v, inputSizes as y, inputSoloFocusRingBaseClasses as b, inputSoloFocusRingColorClasses as x, inputSoloRadiusClasses as S, inputStatusGapClasses as C, inputStatusShellClasses as w, inputStatuses as T, inputTrailingInsetClasses as E, inputTrailingInsetPositionClasses as te } from "./inputShellStyles.js";
+import { InputStatusBanner as ne } from "../inputShared/InputStatusBanner.js";
+import { InputTrailingAffordance as re } from "../inputShared/InputTrailingAffordance.js";
+import { forwardRef as D, useId as ie } from "react";
+import { Fragment as ae, jsx as O, jsxs as k } from "react/jsx-runtime";
+//#region src/components/atoms/Input/Input.tsx
+function A(e) {
+	e.label == null && e["aria-label"] == null && e["aria-labelledby"] == null && console.warn("[WMDS Input] Provide `label`, `aria-label`, or `aria-labelledby`.");
+}
+function j(e) {
+	e.message != null && e.status == null && console.warn("[WMDS Input] `message` requires `status`."), e.inline && (e.label != null || e.description != null || e.status != null || e.message != null) && console.warn("[WMDS Input] `inline` is for Search rows only — omit label, description, and validation.");
+}
+function M(e, t, n) {
+	return t && n ? c[e] : t ? l[e] : n ? C[e] : !1;
+}
+var N = D(function({ size: c = "md", label: l, description: g, status: y, message: C, messagePosition: T = "bottom", loading: D = !1, icon: N, endBadge: P, inline: F = !1, className: I, disabled: L, id: R, "aria-describedby": z, ...B }, V) {
+	let H = ie(), U = R ?? H;
+	A({
+		label: l,
+		"aria-label": B["aria-label"],
+		"aria-labelledby": B["aria-labelledby"]
+	}), j({
+		status: y,
+		message: C,
+		messagePosition: T,
+		loading: D,
+		inline: F,
+		label: l,
+		description: g
+	});
+	let W = C != null && C.length > 0 && y != null, G = P != null, K = !W && (D || y != null), q = N != null, J = M(c, G, K), Y = g != null && !W ? `${U}-description` : void 0, X = W ? `${U}-message` : void 0, oe = [
+		z,
+		Y,
+		X
+	].filter(Boolean).join(" ") || void 0, Z = /* @__PURE__ */ k(ae, { children: [
+		q ? /* @__PURE__ */ O("span", {
+			className: e("pointer-events-none absolute top-1/2 inline-flex -translate-y-1/2 [&>svg]:size-full [&>svg]:shrink-0 [&>svg]:stroke-current", p[c], m[c]),
+			"aria-hidden": !0,
+			children: N
+		}) : null,
+		/* @__PURE__ */ O("input", {
+			...B,
+			ref: V,
+			id: U,
+			disabled: L,
+			"aria-invalid": y === "error" || void 0,
+			"aria-describedby": oe,
+			className: e(ee, W ? e(n, v[c], q && f[c], J, r) : e(i, F ? e(h, q && f[c], I ?? v[c]) : e(v[c], q && f[c], J, y == null ? _[c] : e("border", w[y]), S[c], b, y == null ? x.default : x[y], I)))
+		}),
+		G || K ? /* @__PURE__ */ k("span", {
+			className: e(E, te[c]),
+			children: [G ? /* @__PURE__ */ O("span", {
+				className: u,
+				children: P
+			}) : null, K ? /* @__PURE__ */ O(re, {
+				size: c,
+				status: D ? void 0 : y,
+				loading: D
+			}) : null]
+		}) : null
+	] }), Q = W && y != null && X != null ? /* @__PURE__ */ O(ne, {
+		status: y,
+		message: C,
+		messageId: X,
+		size: c,
+		messagePosition: T
+	}) : null, $ = W && y != null ? /* @__PURE__ */ k("div", {
+		className: o(c, y),
+		children: [
+			T === "top" ? Q : null,
+			/* @__PURE__ */ O("div", {
+				className: a(c, y, T),
+				children: Z
+			}),
+			T === "bottom" ? Q : null
+		]
+	}) : /* @__PURE__ */ O("div", {
+		className: e(F ? "relative flex min-w-0 flex-1 items-center" : s),
+		children: /* @__PURE__ */ O("div", {
+			className: "relative flex w-full items-center",
+			children: Z
+		})
+	});
+	return F || l == null && g == null ? $ : /* @__PURE__ */ k("div", {
+		className: d,
+		children: [
+			l == null ? null : /* @__PURE__ */ O("label", {
+				htmlFor: U,
+				className: e(t("ui-label"), L && "opacity-50"),
+				children: l
+			}),
+			$,
+			Y == null ? null : /* @__PURE__ */ O("p", {
+				id: Y,
+				className: t("caption"),
+				children: g
+			})
+		]
+	});
+});
+//#endregion
+export { N as Input, g as inputMessagePositions, y as inputSizes, T as inputStatuses };

package/dist/components/atoms/Input/inputShellStyles.d.ts

@@ -0,0 +1,99 @@
+export declare const inputSizes: readonly ["sm", "md", "lg"];
+export type InputSize = (typeof inputSizes)[number];
+export declare const inputStatuses: readonly ["error", "warning", "success"];
+export type InputStatus = (typeof inputStatuses)[number];
+export declare const inputMessagePositions: readonly ["top", "bottom"];
+export type InputMessagePosition = (typeof inputMessagePositions)[number];
+/** Input shell — text + focus ring share one eased fade (`slow` ≈ 280ms). */
+export declare const inputShellTransitionClasses: string;
+export declare const inputBaseClasses: string;
+/** Solo shell — ring sits on the input with page offset. */
+export declare const inputSoloFocusRingBaseClasses = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-body";
+export declare const inputSoloFocusRingColorClasses: {
+    readonly default: "focus-visible:ring-focus-ring";
+    readonly error: "focus-visible:ring-error-focus-ring";
+    readonly warning: "focus-visible:ring-warning-focus-ring";
+    readonly success: "focus-visible:ring-success-focus-ring";
+};
+/** Focus ring on compound validation shell ([Astryx ChatComposer](https://astryx.atmeta.com/components/ChatComposer)). */
+export declare const inputCompoundShellFocusRingClasses: Record<InputStatus, string>;
+/** @deprecated Use {@link inputCompoundShellFocusRingClasses}. */
+export declare const inputValidationShellFocusRingClasses: Record<"success" | "warning" | "error", string>;
+/** @deprecated Use {@link inputCompoundShellFocusRingClasses}. */
+export declare const inputCompoundInnerFocusRingClasses: Record<"success" | "warning" | "error", string>;
+/** @deprecated Use {@link inputCompoundShellFocusRingClasses}. */
+export declare const inputCompoundFocusRingClasses: Record<"success" | "warning" | "error", string>;
+export declare const inputSizeClasses: Record<InputSize, string>;
+export declare const inputShellBorderClasses = "border border-border-control";
+export declare const inputShellElevationClasses = "shadow-raised";
+export declare const inputShellClasses: Record<InputSize, string>;
+/** Solo shell — pill only. */
+export declare const inputSoloRadiusClasses: Record<InputSize, string>;
+export declare const inputStatusShellClasses: Record<InputStatus, string>;
+/** Compound outer radius — capsule around the pill + message band. */
+export declare const inputCompoundOuterRadiusClasses: Record<InputSize, string>;
+/** Banner tucks under the pill equator (~half field height). */
+export declare const inputCompoundBannerOverlapBottomClasses: Record<InputSize, string>;
+export declare const inputCompoundBannerOverlapTopPadClasses: Record<InputSize, string>;
+export declare const inputCompoundFieldOverlapTopClasses: Record<InputSize, string>;
+/** @deprecated Use {@link inputCompoundBannerOverlapBottomClasses}. */
+export declare const inputCompoundBannerOverlapClasses: string;
+/** @deprecated Use {@link inputCompoundBannerOverlapTopPadClasses}. */
+export declare const inputCompoundBannerOverlapTopClasses: string;
+/** Compound stack — field floats above banner; focus ring stays on the field only. */
+export declare function inputCompoundShellClassesFor(_size?: InputSize, _status?: InputStatus): string;
+/** Inner field — full pill radius on all four corners; owns focus ring when message is set. */
+export declare function inputCompoundInnerFieldClassesFor(size: InputSize, status: InputStatus, messagePosition: InputMessagePosition): string;
+/** Tinted status band — layered behind the field; overlap keeps the field's bottom radius visible. */
+export declare function inputStatusBannerClassesFor(status: InputStatus, size: InputSize, messagePosition: InputMessagePosition): string;
+/** Status band fills — shared with **TextArea** overlap variants. */
+export declare const inputStatusBannerSurfaceClasses: Record<InputStatus, string>;
+/** @deprecated Use {@link inputStatusBannerClassesFor}. */
+export declare const inputStatusBannerClasses: Record<InputStatus, string>;
+export declare const inputStatusBannerIconClasses: Record<InputStatus, string>;
+/** @deprecated Use {@link inputCompoundShellClassesFor}. */
+export declare function inputValidationShellClassesFor(size: InputSize, status: InputStatus): string;
+/** @deprecated Use {@link inputCompoundShellClassesFor}. */
+export declare function inputCompoundOuterClassesFor(size: InputSize): string;
+/** @deprecated Nested tray removed. */
+export declare const inputCompoundOuterPaddingClasses: Record<InputSize, string>;
+/** @deprecated Use {@link inputCompoundInnerFieldClassesFor}. */
+export declare const inputCompoundInnerClasses = "relative flex w-full items-center rounded-full border border-border-control bg-surface";
+/** @deprecated Use {@link inputStatusShellClasses}. */
+export declare const inputCompoundInnerBorderClasses: Record<InputStatus, string>;
+/** @deprecated Status copy lives in {@link inputStatusBannerClasses}. */
+export declare const inputCompoundFooterClasses: Record<InputStatus, string>;
+/** @deprecated Flat compound — use {@link inputCompoundOuterClassesFor}. */
+export declare const inputCompoundWrapperRadiusClasses: Record<InputSize, string>;
+/** @deprecated Flat compound — use {@link inputCompoundOuterClassesFor}. */
+export declare function inputCompoundWrapperClassesFor(size: InputSize): string;
+export declare const inputIconGapClasses: Record<InputSize, string>;
+export declare const inputStatusGapClasses: Record<InputSize, string>;
+/** Right inset when trailing {@link Badge} sits inside the shell (e.g. Required). */
+export declare const inputEndBadgeGapClasses: Record<InputSize, string>;
+/** Right inset when both end badge and status/loading show. */
+export declare const inputEndBadgeAndStatusGapClasses: Record<InputSize, string>;
+export declare const inputTrailingInsetPositionClasses: Record<InputSize, string>;
+export declare const inputTrailingInsetClasses = "pointer-events-none absolute top-1/2 flex -translate-y-1/2 items-center gap-1.5";
+export declare const inputEndBadgeWrapperClasses = "pointer-events-none shrink-0";
+export declare const inputIconPositionClasses: Record<InputSize, string>;
+export declare const inputIconSizeClasses: Record<InputSize, string>;
+export declare const inputStatusIconSizeClasses: Record<InputSize, string>;
+export declare const inputSpinnerSizeClasses: Record<InputSize, string>;
+export declare const inputStatusIconClasses: Record<InputStatus, string>;
+export declare const inputStatusFooterClasses: Record<InputStatus, string>;
+/** Single shell when input + validation footer attach — border on wrapper only (no shadow-raised stack). */
+export declare const inputCompoundWrapperClasses: Record<InputSize, string>;
+export declare const inputCompoundStatusBorderClasses: Record<InputStatus, string>;
+/** Input inside validation shell — shell owns border, bg, and focus ring. */
+export declare const inputAttachedFieldClasses: string;
+export declare const inputAttachedInputClasses = "rounded-none border-0 shadow-none focus-visible:outline-none focus-visible:ring-0";
+/** Input inside Search / inline row — parent owns shell and focus ring. */
+export declare const inputInlineClasses = "rounded-none border-0 bg-transparent shadow-none focus-visible:outline-none focus-visible:ring-0";
+/** @deprecated Split shells removed — use {@link inputCompoundWrapperClasses}. */
+export declare const inputAttachedShellClasses = "border-b-0";
+export declare const inputDisabledClasses = "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50";
+export declare const inputFieldStackClasses = "flex w-full flex-col gap-1.5";
+export declare const inputControlStackClasses = "flex w-full flex-col gap-1.5";
+export declare const inputDisabledLabelClasses = "opacity-50";
+//# sourceMappingURL=inputShellStyles.d.ts.map

package/dist/components/atoms/Input/inputShellStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inputShellStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Input/inputShellStyles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,UAAU,6BAA8B,CAAC;AAEtD,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;AAEpD,eAAO,MAAM,aAAa,0CAA2C,CAAC;AAEtE,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAEzD,eAAO,MAAM,qBAAqB,4BAA6B,CAAC;AAEhE,MAAM,MAAM,oBAAoB,GAAG,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,CAAC,CAAC;AAE1E,6EAA6E;AAC7E,eAAO,MAAM,2BAA2B,QACiE,CAAC;AAE1G,eAAO,MAAM,gBAAgB,QAGA,CAAC;AAE9B,4DAA4D;AAC5D,eAAO,MAAM,6BAA6B,+GACoE,CAAC;AAE/G,eAAO,MAAM,8BAA8B;;;;;CAKjC,CAAC;AAEX,0HAA0H;AAC1H,eAAO,MAAM,kCAAkC,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAO1E,CAAC;AAEF,kEAAkE;AAClE,eAAO,MAAM,oCAAoC,iDAAqC,CAAC;AAEvF,kEAAkE;AAClE,eAAO,MAAM,kCAAkC,iDAAqC,CAAC;AAErF,kEAAkE;AAClE,eAAO,MAAM,6BAA6B,iDAAqC,CAAC;AAEhF,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAItD,CAAC;AAEF,eAAO,MAAM,uBAAuB,iCAAiC,CAAC;AAEtE,eAAO,MAAM,0BAA0B,kBAAkB,CAAC;AAE1D,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAIvD,CAAC;AAEF,8BAA8B;AAC9B,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAI5D,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAI/D,CAAC;AAEF,sEAAsE;AACtE,eAAO,MAAM,+BAA+B,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAIrE,CAAC;AAEF,gEAAgE;AAChE,eAAO,MAAM,uCAAuC,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAI7E,CAAC;AAEF,eAAO,MAAM,uCAAuC,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAI7E,CAAC;AAEF,eAAO,MAAM,mCAAmC,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAIzE,CAAC;AAEF,uEAAuE;AACvE,eAAO,MAAM,iCAAiC,QAA6C,CAAC;AAE5F,uEAAuE;AACvE,eAAO,MAAM,oCAAoC,QAA6C,CAAC;AAE/F,sFAAsF;AACtF,wBAAgB,4BAA4B,CAAC,KAAK,CAAC,EAAE,SAAS,EAAE,OAAO,CAAC,EAAE,WAAW,GAAG,MAAM,CAE7F;AAED,+FAA+F;AAC/F,wBAAgB,iCAAiC,CAC/C,IAAI,EAAE,SAAS,EACf,MAAM,EAAE,WAAW,EACnB,eAAe,EAAE,oBAAoB,GACpC,MAAM,CASR;AAED,sGAAsG;AACtG,wBAAgB,2BAA2B,CACzC,MAAM,EAAE,WAAW,EACnB,IAAI,EAAE,SAAS,EACf,eAAe,EAAE,oBAAoB,GACpC,MAAM,CAgBR;AAED,qEAAqE;AACrE,eAAO,MAAM,+BAA+B,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAIvE,CAAC;AAEF,2DAA2D;AAC3D,eAAO,MAAM,wBAAwB,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAIhE,CAAC;AAEF,eAAO,MAAM,4BAA4B,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAIpE,CAAC;AAEF,4DAA4D;AAC5D,wBAAgB,8BAA8B,CAAC,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW,GAAG,MAAM,CAE3F;AAED,4DAA4D;AAC5D,wBAAgB,4BAA4B,CAAC,IAAI,EAAE,SAAS,GAAG,MAAM,CAEpE;AAED,uCAAuC;AACvC,eAAO,MAAM,gCAAgC,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAItE,CAAC;AAEF,iEAAiE;AACjE,eAAO,MAAM,yBAAyB,2FACoD,CAAC;AAE3F,uDAAuD;AACvD,eAAO,MAAM,+BAA+B,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAA2B,CAAC;AAEpG,yEAAyE;AACzE,eAAO,MAAM,0BAA0B,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAIlE,CAAC;AAEF,4EAA4E;AAC5E,eAAO,MAAM,iCAAiC,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAIvE,CAAC;AAEF,4EAA4E;AAC5E,wBAAgB,8BAA8B,CAAC,IAAI,EAAE,SAAS,GAAG,MAAM,CAEtE;AAED,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAIzD,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAI3D,CAAC;AAEF,qFAAqF;AACrF,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAI7D,CAAC;AAEF,+DAA+D;AAC/D,eAAO,MAAM,gCAAgC,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAItE,CAAC;AAEF,eAAO,MAAM,iCAAiC,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAIvE,CAAC;AAEF,eAAO,MAAM,yBAAyB,oFAC6C,CAAC;AAEpF,eAAO,MAAM,2BAA2B,iCAAiC,CAAC;AAE1E,eAAO,MAAM,wBAAwB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAI9D,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAI1D,CAAC;AAEF,eAAO,MAAM,0BAA0B,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAIhE,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAI7D,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAI9D,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAA8B,CAAC;AAEhG,4GAA4G;AAC5G,eAAO,MAAM,2BAA2B,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAIjE,CAAC;AAEF,eAAO,MAAM,gCAAgC,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAAmC,CAAC;AAE7G,6EAA6E;AAC7E,eAAO,MAAM,yBAAyB,QAET,CAAC;AAE9B,eAAO,MAAM,yBAAyB,sFAC+C,CAAC;AAEtF,2EAA2E;AAC3E,eAAO,MAAM,kBAAkB,qGACqE,CAAC;AAErG,kFAAkF;AAClF,eAAO,MAAM,yBAAyB,eAAe,CAAC;AAEtD,eAAO,MAAM,oBAAoB,iFAAiF,CAAC;AAEnH,eAAO,MAAM,sBAAsB,iCAAiC,CAAC;AAErE,eAAO,MAAM,wBAAwB,iCAAiC,CAAC;AAEvE,eAAO,MAAM,yBAAyB,eAAe,CAAC"}

package/dist/components/atoms/Input/inputShellStyles.js

@@ -0,0 +1,119 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { motionTransition as t } from "../../../lib/motion.js";
+//#region src/components/atoms/Input/inputShellStyles.ts
+var n = [
+	"sm",
+	"md",
+	"lg"
+], r = [
+	"error",
+	"warning",
+	"success"
+], i = ["top", "bottom"], a = `transition-[color,background-color,box-shadow,border-color,outline-color] ${t("fast")}`, o = "w-full min-w-0 bg-surface font-sans font-normal tracking-normal text-fg placeholder:text-disabled " + a, s = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-body", c = {
+	default: "focus-visible:ring-focus-ring",
+	error: "focus-visible:ring-error-focus-ring",
+	warning: "focus-visible:ring-warning-focus-ring",
+	success: "focus-visible:ring-success-focus-ring"
+}, l = {
+	error: "focus-within:outline-none focus-within:ring-2 focus-within:ring-error-focus-ring focus-within:ring-offset-2 focus-within:ring-offset-body",
+	warning: "focus-within:outline-none focus-within:ring-2 focus-within:ring-warning-focus-ring focus-within:ring-offset-2 focus-within:ring-offset-body",
+	success: "focus-within:outline-none focus-within:ring-2 focus-within:ring-success-focus-ring focus-within:ring-offset-2 focus-within:ring-offset-body"
+}, u = {
+	sm: "h-8 px-2.5 text-xs leading-none",
+	md: "h-11 px-3 text-sm leading-none",
+	lg: "min-h-12 px-4 text-base leading-none"
+}, d = "border border-border-control", f = "shadow-raised", p = {
+	sm: e(d, f),
+	md: e(d, f),
+	lg: e(d, f)
+}, m = {
+	sm: "rounded-full",
+	md: "rounded-full",
+	lg: "rounded-full"
+}, h = {
+	error: "border-error",
+	warning: "border-warning",
+	success: "border-success"
+}, g = {
+	sm: "-mt-4 pt-6",
+	md: "-mt-[1.375rem] pt-8",
+	lg: "-mt-6 pt-8"
+}, _ = {
+	sm: "pb-6",
+	md: "pb-8",
+	lg: "pb-8"
+}, v = {
+	sm: "-mt-4",
+	md: "-mt-[1.375rem]",
+	lg: "-mt-6"
+};
+g.md, _.md;
+function y(t, n) {
+	return e("relative flex w-full flex-col", a);
+}
+function b(t, n, r) {
+	return e("relative z-10 flex w-full items-center border bg-surface shadow-sm", m[t], h[n], l[n], r === "top" && v[t], a);
+}
+function x(t, n, r) {
+	return r === "bottom" ? e("relative z-0 flex w-full items-center gap-2 px-3 pb-3 leading-snug", g[n], "rounded-b-[1.375rem]", S[t]) : e("relative z-0 flex w-full items-center gap-2 px-3 pt-2.5 leading-snug", _[n], "rounded-t-[1.375rem]", S[t]);
+}
+var S = {
+	error: "bg-error-muted text-error",
+	warning: "bg-warning-muted text-warning",
+	success: "bg-success-muted text-success"
+};
+e("flex items-center gap-2 px-3 py-2.5 leading-snug", S.error), e("flex items-center gap-2 px-3 py-2.5 leading-snug", S.warning), e("flex items-center gap-2 px-3 py-2.5 leading-snug", S.success);
+var C = {
+	error: "size-4 shrink-0 stroke-current",
+	warning: "size-4 shrink-0 stroke-current",
+	success: "size-4 shrink-0 stroke-current"
+};
+function w(e) {
+	return y(e, "error");
+}
+var T = {
+	sm: "pl-8",
+	md: "pl-10",
+	lg: "pl-11"
+}, E = {
+	sm: "pr-8",
+	md: "pr-10",
+	lg: "pr-11"
+}, D = {
+	sm: "pr-[4.5rem]",
+	md: "pr-20",
+	lg: "pr-24"
+}, O = {
+	sm: "pr-[6.5rem]",
+	md: "pr-28",
+	lg: "pr-32"
+}, k = {
+	sm: "right-2.5",
+	md: "right-3",
+	lg: "right-3.5"
+}, A = "pointer-events-none absolute top-1/2 flex -translate-y-1/2 items-center gap-1.5", j = "pointer-events-none shrink-0", M = {
+	sm: "left-2.5",
+	md: "left-3",
+	lg: "left-3.5"
+}, N = {
+	sm: "size-3.5 shrink-0 stroke-current text-muted",
+	md: "size-4 shrink-0 stroke-current text-muted",
+	lg: "size-4 shrink-0 stroke-current text-muted"
+}, P = {
+	sm: "size-4 shrink-0 stroke-current",
+	md: "size-4 shrink-0 stroke-current",
+	lg: "size-5 shrink-0 stroke-current"
+}, F = {
+	sm: "size-3.5 shrink-0",
+	md: "size-4 shrink-0",
+	lg: "size-4 shrink-0"
+}, I = {
+	error: "text-error",
+	warning: "text-warning",
+	success: "text-success"
+};
+w("sm"), w("md"), w("lg");
+var L = "w-full min-w-0 bg-transparent font-sans font-normal tracking-normal text-fg placeholder:text-disabled " + a, R = "rounded-none border-0 shadow-none focus-visible:outline-none focus-visible:ring-0", z = "rounded-none border-0 bg-transparent shadow-none focus-visible:outline-none focus-visible:ring-0", B = "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", V = "flex w-full flex-col gap-1.5", H = "flex w-full flex-col gap-1.5", U = "opacity-50";
+//#endregion
+export { L as inputAttachedFieldClasses, R as inputAttachedInputClasses, o as inputBaseClasses, g as inputCompoundBannerOverlapBottomClasses, _ as inputCompoundBannerOverlapTopPadClasses, v as inputCompoundFieldOverlapTopClasses, b as inputCompoundInnerFieldClassesFor, w as inputCompoundOuterClassesFor, y as inputCompoundShellClassesFor, l as inputCompoundShellFocusRingClasses, H as inputControlStackClasses, B as inputDisabledClasses, U as inputDisabledLabelClasses, O as inputEndBadgeAndStatusGapClasses, D as inputEndBadgeGapClasses, j as inputEndBadgeWrapperClasses, V as inputFieldStackClasses, T as inputIconGapClasses, M as inputIconPositionClasses, N as inputIconSizeClasses, z as inputInlineClasses, i as inputMessagePositions, d as inputShellBorderClasses, p as inputShellClasses, f as inputShellElevationClasses, a as inputShellTransitionClasses, u as inputSizeClasses, n as inputSizes, s as inputSoloFocusRingBaseClasses, c as inputSoloFocusRingColorClasses, m as inputSoloRadiusClasses, F as inputSpinnerSizeClasses, x as inputStatusBannerClassesFor, C as inputStatusBannerIconClasses, S as inputStatusBannerSurfaceClasses, E as inputStatusGapClasses, I as inputStatusIconClasses, P as inputStatusIconSizeClasses, h as inputStatusShellClasses, r as inputStatuses, A as inputTrailingInsetClasses, k as inputTrailingInsetPositionClasses };

package/dist/components/atoms/Kbd/Kbd.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from "react";
+import { type KbdSize } from "./kbdStyles";
+export type { KbdSize } from "./kbdStyles";
+export { kbdSizes } from "./kbdStyles";
+/** Layout-only — margin or flex placement; not for re-theming the keycap. */
+export type KbdLayoutClassName = string;
+export interface KbdProps {
+    /** Visible key label, such as `K`, `⌘`, `Enter`, or `Esc`. */
+    children: ReactNode;
+    size?: KbdSize;
+    /** Accessible expansion for symbolic key labels when needed. */
+    "aria-label"?: string;
+    /** Layout-only: margin or flex placement. */
+    className?: KbdLayoutClassName;
+}
+/** Semantic keyboard keycap for shortcuts and command hints. */
+export declare function Kbd({ children, size, "aria-label": ariaLabel, className, }: KbdProps): import("react").JSX.Element;
+//# sourceMappingURL=Kbd.d.ts.map

package/dist/components/atoms/Kbd/Kbd.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Kbd.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Kbd/Kbd.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAGL,KAAK,OAAO,EACb,MAAM,aAAa,CAAC;AAErB,YAAY,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,6EAA6E;AAC7E,MAAM,MAAM,kBAAkB,GAAG,MAAM,CAAC;AAExC,MAAM,WAAW,QAAQ;IACvB,8DAA8D;IAC9D,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,gEAAgE;IAChE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,kBAAkB,CAAC;CAChC;AAED,gEAAgE;AAChE,wBAAgB,GAAG,CAAC,EAClB,QAAQ,EACR,IAAW,EACX,YAAY,EAAE,SAAS,EACvB,SAAS,GACV,EAAE,QAAQ,+BAUV"}

package/dist/components/atoms/Kbd/Kbd.js

@@ -0,0 +1,15 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { kbdBaseClasses as t, kbdSizeClasses as n, kbdSizes as r } from "./kbdStyles.js";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/atoms/Kbd/Kbd.tsx
+function a({ children: r, size: a = "sm", "aria-label": o, className: s }) {
+	return /* @__PURE__ */ i("kbd", {
+		"aria-label": o,
+		className: e(t, n[a], s),
+		"data-size": a,
+		children: r
+	});
+}
+//#endregion
+export { a as Kbd, r as kbdSizes };

package/dist/components/atoms/Kbd/kbdStyles.d.ts

@@ -0,0 +1,5 @@
+export declare const kbdSizes: readonly ["sm", "md"];
+export type KbdSize = (typeof kbdSizes)[number];
+export declare const kbdBaseClasses = "inline-flex shrink-0 items-center justify-center rounded-md border border-border bg-body font-mono font-medium leading-none text-fg shadow-[0_1px_0_0_var(--color-border-emphasized)]";
+export declare const kbdSizeClasses: Record<KbdSize, string>;
+//# sourceMappingURL=kbdStyles.d.ts.map

package/dist/components/atoms/Kbd/kbdStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"kbdStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Kbd/kbdStyles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ,uBAAwB,CAAC;AAE9C,MAAM,MAAM,OAAO,GAAG,CAAC,OAAO,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC;AAEhD,eAAO,MAAM,cAAc,0LAC8J,CAAC;AAE1L,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,OAAO,EAAE,MAAM,CAGlD,CAAC"}

package/dist/components/atoms/Kbd/kbdStyles.js

@@ -0,0 +1,8 @@
+"use client";
+//#region src/components/atoms/Kbd/kbdStyles.ts
+var e = ["sm", "md"], t = "inline-flex shrink-0 items-center justify-center rounded-md border border-border bg-body font-mono font-medium leading-none text-fg shadow-[0_1px_0_0_var(--color-border-emphasized)]", n = {
+	sm: "h-5 min-w-5 px-1 text-[0.625rem]",
+	md: "h-6 min-w-6 px-1.5 text-xs"
+};
+//#endregion
+export { t as kbdBaseClasses, n as kbdSizeClasses, e as kbdSizes };

package/dist/components/atoms/Kbd/useKbdChoiceKeys.d.ts

@@ -0,0 +1,21 @@
+export interface UseKbdChoiceKeysOptions {
+    /**
+     * When false, digit listeners stay idle. Use while the numbered choices are
+     * on screen (for example, step 1 of a starter gate).
+     */
+    enabled?: boolean;
+    /**
+     * `KeyboardEvent.key` → select handler. Keys are usually `"1"`…`"4"`.
+     * Each handler must match the click path for that choice (toggle / select).
+     */
+    choices: Readonly<Record<string, () => void>>;
+}
+/**
+ * Window-level shortcuts for numbered choices documented with **Kbd**.
+ *
+ * **Kbd** stays display-only — this hook owns the select behavior so Pattern
+ * Show code can copy both. Ignores editable targets (`input`, `textarea`,
+ * `select`, contenteditable) and meta/ctrl/alt chords.
+ */
+export declare function useKbdChoiceKeys({ enabled, choices, }: UseKbdChoiceKeysOptions): void;
+//# sourceMappingURL=useKbdChoiceKeys.d.ts.map