@nocoo/basalt 2.2.0 → 3.0.0

package/dist/components/icon-picker.js

@@ -1,77 +1,105 @@
 "use client";
 import { cn as e } from "../utils/cn.js";
 import { BASALT_UI_CLASS as t } from "../utils/control-surface.js";
-import { Button as n } from "./button.js";
-import { Input as r } from "./input.js";
-import { Popover as i, PopoverContent as a, PopoverTrigger as o } from "./popover.js";
-import { ToggleGroup as s, ToggleGroupItem as c } from "./toggle-group.js";
-import { useState as l } from "react";
-import { ChevronDown as u } from "lucide-react";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { FOCUS_INSET as n } from "./overlay.js";
+import { Button as r } from "./button.js";
+import { Input as i } from "./input.js";
+import { Popover as a, PopoverContent as o, PopoverTrigger as s } from "./popover.js";
+import { useState as c } from "react";
+import { Check as l, ChevronDown as u, Search as d } from "lucide-react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import * as m from "@radix-ui/react-toggle-group";
 //#region src/components/icon-picker.tsx
-function p({ label: p, options: m, value: h, defaultValue: g = "", onValueChange: _, disabled: v = !1, placeholder: y = "Choose icon", searchPlaceholder: b = "Search icons…", emptyLabel: x = "No icons found.", className: S }) {
-	let [C, w] = l(g), [T, E] = l(!1), [D, O] = l(""), k = h ?? C, A = m.find((e) => e.value === k), j = m.filter((e) => e.label.toLocaleLowerCase().includes(D.trim().toLocaleLowerCase()));
-	return /* @__PURE__ */ f(i, {
-		open: T && !v,
-		onOpenChange: E,
-		children: [/* @__PURE__ */ d(o, {
+function h({ label: h, options: g, value: _, defaultValue: v = "", onValueChange: y, disabled: b = !1, placeholder: x = "Choose icon", searchPlaceholder: S = "Search icons…", emptyLabel: C = "No icons found.", id: w, "aria-invalid": T, "aria-describedby": E, className: D }) {
+	let [O, k] = c(v), [A, j] = c(!1), [M, N] = c(""), P = _ ?? O, F = g.find((e) => e.value === P), I = g.filter((e) => e.label.toLocaleLowerCase().includes(M.trim().toLocaleLowerCase()));
+	return /* @__PURE__ */ p(a, {
+		open: A && !b,
+		onOpenChange: (e) => {
+			j(e), e || N("");
+		},
+		children: [/* @__PURE__ */ f(s, {
 			asChild: !0,
-			children: /* @__PURE__ */ f(n, {
+			children: /* @__PURE__ */ p(r, {
 				variant: "outline",
-				disabled: v,
-				"aria-label": p,
-				className: e(t, "max-w-full", S),
+				disabled: b,
+				id: w,
+				"aria-invalid": T,
+				"aria-describedby": E,
+				"aria-label": `${h}: ${F?.label ?? x}`,
+				className: e(t, "max-w-full", D),
 				children: [
-					/* @__PURE__ */ d("span", {
+					/* @__PURE__ */ f("span", {
 						"aria-hidden": "true",
 						className: "shrink-0",
-						children: A?.icon
+						children: F?.icon
 					}),
-					/* @__PURE__ */ d("span", {
+					/* @__PURE__ */ f("span", {
 						className: "truncate",
-						children: A?.label ?? y
+						children: F?.label ?? x
 					}),
-					/* @__PURE__ */ d(u, { className: "shrink-0" })
+					/* @__PURE__ */ f(u, { className: "shrink-0" })
 				]
 			})
-		}), /* @__PURE__ */ f(a, {
+		}), /* @__PURE__ */ p(o, {
 			align: "start",
-			className: "w-72 max-w-[calc(100vw-2rem)] space-y-3 p-3",
-			"aria-label": p,
+			arrow: !1,
+			className: "w-basalt-72 max-w-[calc(100vw-2rem)] space-y-basalt-layout-sm",
+			"aria-label": h,
 			children: [
-				/* @__PURE__ */ d(r, {
-					"aria-label": `${p}: search`,
-					value: D,
-					placeholder: b,
-					onChange: (e) => O(e.target.value)
+				/* @__PURE__ */ p("div", {
+					className: "relative",
+					children: [/* @__PURE__ */ f(d, {
+						"aria-hidden": "true",
+						className: "pointer-events-none absolute left-basalt-space-lg top-1/2 size-basalt-icon -translate-y-1/2 text-basalt-muted-foreground"
+					}), /* @__PURE__ */ f(i, {
+						className: "pl-basalt-card-xl",
+						"aria-label": `${h}: search`,
+						value: M,
+						placeholder: S,
+						onChange: (e) => N(e.target.value)
+					})]
 				}),
-				/* @__PURE__ */ d(s, {
+				/* @__PURE__ */ f(m.Root, {
 					type: "single",
-					"aria-label": p,
-					value: k,
-					className: "flex h-auto flex-wrap justify-start gap-1 rounded-basalt-lg p-1",
+					"aria-label": h,
+					value: P,
+					className: "grid max-h-basalt-64 grid-cols-2 gap-basalt-space-lg overflow-y-auto",
 					onValueChange: (e) => {
-						e && (h === void 0 && w(e), _?.(e), E(!1), O(""));
+						e && (_ === void 0 && k(e), y?.(e), j(!1), N(""));
 					},
-					children: j.map((e) => /* @__PURE__ */ d(c, {
-						value: e.value,
-						disabled: e.disabled,
-						"aria-label": e.label,
-						title: e.label,
-						className: "size-10",
-						children: e.icon
-					}, e.value))
+					children: I.map((t) => /* @__PURE__ */ p(m.Item, {
+						value: t.value,
+						disabled: t.disabled,
+						"aria-label": t.label,
+						title: t.label,
+						className: e("group relative flex min-w-0 flex-col items-center justify-center gap-basalt-space-lg rounded-basalt-md p-basalt-layout-sm text-basalt-foreground data-[state=on]:bg-basalt-primary data-[state=on]:text-basalt-primary-foreground disabled:cursor-not-allowed disabled:opacity-40", n, "data-[state=on]:focus-visible:ring-basalt-primary-foreground"),
+						children: [
+							/* @__PURE__ */ f("span", {
+								"aria-hidden": "true",
+								className: "flex size-basalt-6 items-center justify-center [&>svg]:size-basalt-6",
+								children: t.icon
+							}),
+							/* @__PURE__ */ f("span", {
+								className: "max-w-full break-words text-basalt-sm font-medium",
+								children: t.label
+							}),
+							/* @__PURE__ */ f(l, {
+								"aria-hidden": "true",
+								className: "absolute right-basalt-space-sm top-basalt-space-sm size-basalt-icon-sm opacity-0 group-data-[state=on]:opacity-100"
+							})
+						]
+					}, t.value))
 				}),
-				j.length === 0 && /* @__PURE__ */ d("p", {
+				I.length === 0 && /* @__PURE__ */ f("p", {
 					role: "status",
-					className: "text-sm text-basalt-muted-foreground",
-					children: x
+					className: "text-basalt-base text-basalt-muted-foreground",
+					children: C
 				})
 			]
 		})]
 	});
 }
 //#endregion
-export { p as IconPicker };
+export { h as IconPicker };
 
 //# sourceMappingURL=icon-picker.js.map

package/dist/components/icon-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-picker.js","names":["IconPicker","localValue","setLocalValue","useState","defaultValue","open","setOpen","query","setQuery","selected","value","option","options","matches","Popover","disabled","PopoverTrigger","Button","label","cn","BASALT_UI_CLASS","className","placeholder","ChevronDown","PopoverContent","Input","searchPlaceholder","event","ToggleGroup","next","onValueChange","ToggleGroupItem","item","emptyLabel"],"sources":["../../src/components/icon-picker.tsx"],"sourcesContent":["import { ChevronDown } from \"lucide-react\";\nimport { type ReactNode, useState } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { Button } from \"./button\";\nimport { Input } from \"./input\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"./popover\";\nimport { ToggleGroup, ToggleGroupItem } from \"./toggle-group\";\n\nexport interface IconPickerOption {\n\t/** Stable application-owned identifier. */\n\tvalue: string;\n\t/** Visible selection text and accessible icon name. */\n\tlabel: string;\n\t/** Caller-rendered icon, from a deliberately small subset. */\n\ticon: ReactNode;\n\t/** Exclude this option from selection and keyboard navigation. */\n\tdisabled?: boolean;\n}\nexport interface IconPickerProps {\n\t/** Accessible picker name. */\n\tlabel: string;\n\t/** Caller-supplied icon subset; the library never imports an icon catalog. */\n\toptions: readonly IconPickerOption[];\n\t/** Controlled icon identifier. */\n\tvalue?: string;\n\t/** Initial uncontrolled icon identifier. */\n\tdefaultValue?: string;\n\t/** Selection request. */\n\tonValueChange?: (value: string) => void;\n\t/** Disable selection. @default false */\n\tdisabled?: boolean;\n\t/** Empty selection prompt. @default \"Choose icon\" */\n\tplaceholder?: string;\n\t/** Search placeholder. @default \"Search icons…\" */\n\tsearchPlaceholder?: string;\n\t/** Empty-search text. @default \"No icons found.\" */\n\temptyLabel?: string;\n\t/** Additional root classes. */\n\tclassName?: string;\n}\nexport function IconPicker({\n\tlabel,\n\toptions,\n\tvalue,\n\tdefaultValue = \"\",\n\tonValueChange,\n\tdisabled = false,\n\tplaceholder = \"Choose icon\",\n\tsearchPlaceholder = \"Search icons…\",\n\temptyLabel = \"No icons found.\",\n\tclassName,\n}: IconPickerProps) {\n\tconst [localValue, setLocalValue] = useState(defaultValue);\n\tconst [open, setOpen] = useState(false);\n\tconst [query, setQuery] = useState(\"\");\n\tconst selected = value ?? localValue;\n\tconst option = options.find((option) => option.value === selected);\n\tconst matches = options.filter((option) =>\n\t\toption.label.toLocaleLowerCase().includes(query.trim().toLocaleLowerCase()),\n\t);\n\treturn (\n\t\t<Popover open={open && !disabled} onOpenChange={setOpen}>\n\t\t\t<PopoverTrigger asChild>\n\t\t\t\t<Button\n\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\taria-label={label}\n\t\t\t\t\tclassName={cn(BASALT_UI_CLASS, \"max-w-full\", className)}\n\t\t\t\t>\n\t\t\t\t\t<span aria-hidden=\"true\" className=\"shrink-0\">\n\t\t\t\t\t\t{option?.icon}\n\t\t\t\t\t</span>\n\t\t\t\t\t<span className=\"truncate\">{option?.label ?? placeholder}</span>\n\t\t\t\t\t<ChevronDown className=\"shrink-0\" />\n\t\t\t\t</Button>\n\t\t\t</PopoverTrigger>\n\t\t\t<PopoverContent\n\t\t\t\talign=\"start\"\n\t\t\t\tclassName=\"w-72 max-w-[calc(100vw-2rem)] space-y-3 p-3\"\n\t\t\t\taria-label={label}\n\t\t\t>\n\t\t\t\t<Input\n\t\t\t\t\taria-label={`${label}: search`}\n\t\t\t\t\tvalue={query}\n\t\t\t\t\tplaceholder={searchPlaceholder}\n\t\t\t\t\tonChange={(event) => setQuery(event.target.value)}\n\t\t\t\t/>\n\t\t\t\t<ToggleGroup\n\t\t\t\t\ttype=\"single\"\n\t\t\t\t\taria-label={label}\n\t\t\t\t\tvalue={selected}\n\t\t\t\t\tclassName=\"flex h-auto flex-wrap justify-start gap-1 rounded-basalt-lg p-1\"\n\t\t\t\t\tonValueChange={(next) => {\n\t\t\t\t\t\tif (!next) return;\n\t\t\t\t\t\tif (value === undefined) setLocalValue(next);\n\t\t\t\t\t\tonValueChange?.(next);\n\t\t\t\t\t\tsetOpen(false);\n\t\t\t\t\t\tsetQuery(\"\");\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{matches.map((item) => (\n\t\t\t\t\t\t<ToggleGroupItem\n\t\t\t\t\t\t\tkey={item.value}\n\t\t\t\t\t\t\tvalue={item.value}\n\t\t\t\t\t\t\tdisabled={item.disabled}\n\t\t\t\t\t\t\taria-label={item.label}\n\t\t\t\t\t\t\ttitle={item.label}\n\t\t\t\t\t\t\tclassName=\"size-10\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{item.icon}\n\t\t\t\t\t\t</ToggleGroupItem>\n\t\t\t\t\t))}\n\t\t\t\t</ToggleGroup>\n\t\t\t\t{matches.length === 0 && (\n\t\t\t\t\t<p role=\"status\" className=\"text-sm text-basalt-muted-foreground\">\n\t\t\t\t\t\t{emptyLabel}\n\t\t\t\t\t</p>\n\t\t\t\t)}\n\t\t\t</PopoverContent>\n\t\t</Popover>\n\t);\n}\n"],"mappings":";;;;;;;;;;;AAyCA,SAAgBA,EAAW,EAC1B,UACA,YACA,UACA,kBAAe,IACf,kBACA,cAAW,IACX,iBAAc,eACd,uBAAoB,iBACpB,gBAAa,mBACb,gBACmB;CACnB,IAAM,CAACC,GAAYC,KAAiBC,EAASC,CAAY,GACnD,CAACC,GAAMC,KAAWH,EAAS,EAAK,GAChC,CAACI,GAAOC,KAAYL,EAAS,EAAE,GAC/BM,IAAWC,KAAST,GACpBU,IAASC,EAAQ,MAAM,MAAWD,EAAO,UAAUF,CAAQ,GAC3DI,IAAUD,EAAQ,QAAQ,MAC/BD,EAAO,MAAM,kBAAkB,CAAC,CAAC,SAASJ,EAAM,KAAK,CAAC,CAAC,kBAAkB,CAAC,CAC3E;CACA,OACC,kBAACO,GAAD;EAAS,MAAMT,KAAQ,CAACU;EAAU,cAAcT;EAAhD,UAAA,CACC,kBAACU,GAAD;GAAgB,SAAA;GACf,UAAA,kBAACC,GAAD;IACC,SAAQ;IACE;IACV,cAAYC;IACZ,WAAWC,EAAGC,GAAiB,cAAcC,CAAS;IAJvD,UAAA;KAMC,kBAAC,QAAD;MAAM,eAAY;MAAO,WAAU;MACjC,UAAAV,GAAQ;KACJ,CAAA;KACN,kBAAC,QAAD;MAAM,WAAU;MAAY,UAAAA,GAAQ,SAASW;KAAkB,CAAA;KAC/D,kBAACC,GAAD,EAAa,WAAU,WAAY,CAAA;IAC5B;;EACO,CAAA,GAChB,kBAACC,GAAD;GACC,OAAM;GACN,WAAU;GACV,cAAYN;GAHb,UAAA;IAKC,kBAACO,GAAD;KACC,cAAY,GAAGP,EAAM;KACrB,OAAOX;KACP,aAAamB;KACb,WAAW,MAAUlB,EAASmB,EAAM,OAAO,KAAK;IAChD,CAAA;IACD,kBAACC,GAAD;KACC,MAAK;KACL,cAAYV;KACZ,OAAOT;KACP,WAAU;KACV,gBAAgB,MAAS;MACxB,AAAKoB,MACDnB,MAAU,KAAA,KAAWR,EAAc2B,CAAI,GAC3CC,IAAgBD,CAAI,GACpBvB,EAAQ,EAAK,GACbE,EAAS,EAAE;KACZ;KAEC,UAAAK,EAAQ,KAAK,MACb,kBAACkB,GAAD;MAEC,OAAOC,EAAK;MACZ,UAAUA,EAAK;MACf,cAAYA,EAAK;MACjB,OAAOA,EAAK;MACZ,WAAU;MAET,UAAAA,EAAK;KACU,GARXA,EAAK,KAQM,CACjB;IACW,CAAA;IACZnB,EAAQ,WAAW,KACnB,kBAAC,KAAD;KAAG,MAAK;KAAS,WAAU;KACzB,UAAAoB;IACC,CAAA;GAEW;EACR,CAAA,CAAA;;AAEX"}
+{"version":3,"file":"icon-picker.js","names":["ToggleGroupPrimitive","IconPicker","ariaInvalid","describedBy","localValue","setLocalValue","useState","defaultValue","open","setOpen","query","setQuery","selected","value","option","options","matches","Popover","disabled","next","PopoverTrigger","Button","label","placeholder","cn","BASALT_UI_CLASS","className","ChevronDown","PopoverContent","Search","Input","searchPlaceholder","event","onValueChange","item","FOCUS_INSET","Check","emptyLabel"],"sources":["../../src/components/icon-picker.tsx"],"sourcesContent":["import * as ToggleGroupPrimitive from \"@radix-ui/react-toggle-group\";\nimport { Check, ChevronDown, Search } from \"lucide-react\";\nimport { type AriaAttributes, type ReactNode, useState } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { Button } from \"./button\";\nimport { Input } from \"./input\";\nimport { FOCUS_INSET } from \"./overlay\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"./popover\";\n\nexport interface IconPickerOption {\n\t/** Stable application-owned identifier. */\n\tvalue: string;\n\t/** Visible selection text and accessible icon name. */\n\tlabel: string;\n\t/** Caller-rendered icon, from a deliberately small subset. */\n\ticon: ReactNode;\n\t/** Exclude this option from selection and keyboard navigation. */\n\tdisabled?: boolean;\n}\nexport interface IconPickerProps {\n\t/** Accessible picker name. */\n\tlabel: string;\n\t/** Caller-supplied icon subset; the library never imports an icon catalog. */\n\toptions: readonly IconPickerOption[];\n\t/** Controlled icon identifier. */\n\tvalue?: string;\n\t/** Initial uncontrolled icon identifier. */\n\tdefaultValue?: string;\n\t/** Selection request. */\n\tonValueChange?: (value: string) => void;\n\t/** Disable selection. @default false */\n\tdisabled?: boolean;\n\t/** Empty selection prompt. @default \"Choose icon\" */\n\tplaceholder?: string;\n\t/** Search placeholder. @default \"Search icons…\" */\n\tsearchPlaceholder?: string;\n\t/** Empty-search text. @default \"No icons found.\" */\n\temptyLabel?: string;\n\t/** Forwarded to the trigger so Field and Label can own it. */\n\tid?: string;\n\t/** Forwarded to the trigger; Field sets it while the value is invalid. */\n\t\"aria-invalid\"?: AriaAttributes[\"aria-invalid\"];\n\t/** Forwarded to the trigger; Field points it at the hint or error. */\n\t\"aria-describedby\"?: string;\n\t/** Additional root classes. */\n\tclassName?: string;\n}\nexport function IconPicker({\n\tlabel,\n\toptions,\n\tvalue,\n\tdefaultValue = \"\",\n\tonValueChange,\n\tdisabled = false,\n\tplaceholder = \"Choose icon\",\n\tsearchPlaceholder = \"Search icons…\",\n\temptyLabel = \"No icons found.\",\n\tid,\n\t\"aria-invalid\": ariaInvalid,\n\t\"aria-describedby\": describedBy,\n\tclassName,\n}: IconPickerProps) {\n\tconst [localValue, setLocalValue] = useState(defaultValue);\n\tconst [open, setOpen] = useState(false);\n\tconst [query, setQuery] = useState(\"\");\n\tconst selected = value ?? localValue;\n\tconst option = options.find((option) => option.value === selected);\n\tconst matches = options.filter((option) =>\n\t\toption.label.toLocaleLowerCase().includes(query.trim().toLocaleLowerCase()),\n\t);\n\treturn (\n\t\t<Popover\n\t\t\topen={open && !disabled}\n\t\t\tonOpenChange={(next) => {\n\t\t\t\tsetOpen(next);\n\t\t\t\tif (!next) setQuery(\"\");\n\t\t\t}}\n\t\t>\n\t\t\t<PopoverTrigger asChild>\n\t\t\t\t<Button\n\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\tid={id}\n\t\t\t\t\taria-invalid={ariaInvalid}\n\t\t\t\t\taria-describedby={describedBy}\n\t\t\t\t\taria-label={`${label}: ${option?.label ?? placeholder}`}\n\t\t\t\t\tclassName={cn(BASALT_UI_CLASS, \"max-w-full\", className)}\n\t\t\t\t>\n\t\t\t\t\t<span aria-hidden=\"true\" className=\"shrink-0\">\n\t\t\t\t\t\t{option?.icon}\n\t\t\t\t\t</span>\n\t\t\t\t\t<span className=\"truncate\">{option?.label ?? placeholder}</span>\n\t\t\t\t\t<ChevronDown className=\"shrink-0\" />\n\t\t\t\t</Button>\n\t\t\t</PopoverTrigger>\n\t\t\t<PopoverContent\n\t\t\t\talign=\"start\"\n\t\t\t\tarrow={false}\n\t\t\t\tclassName=\"w-basalt-72 max-w-[calc(100vw-2rem)] space-y-basalt-layout-sm\"\n\t\t\t\taria-label={label}\n\t\t\t>\n\t\t\t\t<div className=\"relative\">\n\t\t\t\t\t<Search\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\tclassName=\"pointer-events-none absolute left-basalt-space-lg top-1/2 size-basalt-icon -translate-y-1/2 text-basalt-muted-foreground\"\n\t\t\t\t\t/>\n\t\t\t\t\t<Input\n\t\t\t\t\t\tclassName=\"pl-basalt-card-xl\"\n\t\t\t\t\t\taria-label={`${label}: search`}\n\t\t\t\t\t\tvalue={query}\n\t\t\t\t\t\tplaceholder={searchPlaceholder}\n\t\t\t\t\t\tonChange={(event) => setQuery(event.target.value)}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t<ToggleGroupPrimitive.Root\n\t\t\t\t\ttype=\"single\"\n\t\t\t\t\taria-label={label}\n\t\t\t\t\tvalue={selected}\n\t\t\t\t\tclassName=\"grid max-h-basalt-64 grid-cols-2 gap-basalt-space-lg overflow-y-auto\"\n\t\t\t\t\tonValueChange={(next) => {\n\t\t\t\t\t\tif (!next) return;\n\t\t\t\t\t\tif (value === undefined) setLocalValue(next);\n\t\t\t\t\t\tonValueChange?.(next);\n\t\t\t\t\t\tsetOpen(false);\n\t\t\t\t\t\tsetQuery(\"\");\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{matches.map((item) => (\n\t\t\t\t\t\t<ToggleGroupPrimitive.Item\n\t\t\t\t\t\t\tkey={item.value}\n\t\t\t\t\t\t\tvalue={item.value}\n\t\t\t\t\t\t\tdisabled={item.disabled}\n\t\t\t\t\t\t\taria-label={item.label}\n\t\t\t\t\t\t\ttitle={item.label}\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t// Accent choice grid: selection is the documented primary fill and its\n\t\t\t\t\t\t\t\t// contrast-corrected foreground, never a control fill plus a frame.\n\t\t\t\t\t\t\t\t\"group relative flex min-w-0 flex-col items-center justify-center gap-basalt-space-lg rounded-basalt-md p-basalt-layout-sm text-basalt-foreground data-[state=on]:bg-basalt-primary data-[state=on]:text-basalt-primary-foreground disabled:cursor-not-allowed disabled:opacity-40\",\n\t\t\t\t\t\t\t\tFOCUS_INSET,\n\t\t\t\t\t\t\t\t\"data-[state=on]:focus-visible:ring-basalt-primary-foreground\",\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\tclassName=\"flex size-basalt-6 items-center justify-center [&>svg]:size-basalt-6\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{item.icon}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t<span className=\"max-w-full break-words text-basalt-sm font-medium\">\n\t\t\t\t\t\t\t\t{item.label}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t<Check\n\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\tclassName=\"absolute right-basalt-space-sm top-basalt-space-sm size-basalt-icon-sm opacity-0 group-data-[state=on]:opacity-100\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</ToggleGroupPrimitive.Item>\n\t\t\t\t\t))}\n\t\t\t\t</ToggleGroupPrimitive.Root>\n\t\t\t\t{matches.length === 0 && (\n\t\t\t\t\t<p role=\"status\" className=\"text-basalt-base text-basalt-muted-foreground\">\n\t\t\t\t\t\t{emptyLabel}\n\t\t\t\t\t</p>\n\t\t\t\t)}\n\t\t\t</PopoverContent>\n\t\t</Popover>\n\t);\n}\n"],"mappings":";;;;;;;;;;;;AAgDA,SAAgBC,EAAW,EAC1B,UACA,YACA,UACA,kBAAe,IACf,kBACA,cAAW,IACX,iBAAc,eACd,uBAAoB,iBACpB,gBAAa,mBACb,OACA,gBAAgBC,GAChB,oBAAoBC,GACpB,gBACmB;CACnB,IAAM,CAACC,GAAYC,KAAiBC,EAASC,CAAY,GACnD,CAACC,GAAMC,KAAWH,EAAS,EAAK,GAChC,CAACI,GAAOC,KAAYL,EAAS,EAAE,GAC/BM,IAAWC,KAAST,GACpBU,IAASC,EAAQ,MAAM,MAAWD,EAAO,UAAUF,CAAQ,GAC3DI,IAAUD,EAAQ,QAAQ,MAC/BD,EAAO,MAAM,kBAAkB,CAAC,CAAC,SAASJ,EAAM,KAAK,CAAC,CAAC,kBAAkB,CAAC,CAC3E;CACA,OACC,kBAACO,GAAD;EACC,MAAMT,KAAQ,CAACU;EACf,eAAe,MAAS;GAEvB,AADAT,EAAQU,CAAI,GACPA,KAAMR,EAAS,EAAE;EACvB;EALD,UAAA,CAOC,kBAACS,GAAD;GAAgB,SAAA;GACf,UAAA,kBAACC,GAAD;IACC,SAAQ;IACE;IACN;IACJ,gBAAcnB;IACd,oBAAkBC;IAClB,cAAY,GAAGmB,EAAM,IAAIR,GAAQ,SAASS;IAC1C,WAAWC,EAAGC,GAAiB,cAAcC,CAAS;IAPvD,UAAA;KASC,kBAAC,QAAD;MAAM,eAAY;MAAO,WAAU;MACjC,UAAAZ,GAAQ;KACJ,CAAA;KACN,kBAAC,QAAD;MAAM,WAAU;MAAY,UAAAA,GAAQ,SAASS;KAAkB,CAAA;KAC/D,kBAACI,GAAD,EAAa,WAAU,WAAY,CAAA;IAC5B;;EACO,CAAA,GAChB,kBAACC,GAAD;GACC,OAAM;GACN,OAAO;GACP,WAAU;GACV,cAAYN;GAJb,UAAA;IAMC,kBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACC,kBAACO,GAAD;MACC,eAAY;MACZ,WAAU;KACV,CAAA,GACD,kBAACC,GAAD;MACC,WAAU;MACV,cAAY,GAAGR,EAAM;MACrB,OAAOZ;MACP,aAAaqB;MACb,WAAW,MAAUpB,EAASqB,EAAM,OAAO,KAAK;KAChD,CAAA,CACG;;IACL,kBAAChC,EAAqB,MAAtB;KACC,MAAK;KACL,cAAYsB;KACZ,OAAOV;KACP,WAAU;KACV,gBAAgB,MAAS;MACxB,AAAKO,MACDN,MAAU,KAAA,KAAWR,EAAcc,CAAI,GAC3Cc,IAAgBd,CAAI,GACpBV,EAAQ,EAAK,GACbE,EAAS,EAAE;KACZ;KAEC,UAAAK,EAAQ,KAAK,MACb,kBAAChB,EAAqB,MAAtB;MAEC,OAAOkC,EAAK;MACZ,UAAUA,EAAK;MACf,cAAYA,EAAK;MACjB,OAAOA,EAAK;MACZ,WAAWV,EAGV,qRACAW,GACA,8DACD;MAZD,UAAA;OAcC,kBAAC,QAAD;QACC,eAAY;QACZ,WAAU;QAET,UAAAD,EAAK;OACD,CAAA;OACN,kBAAC,QAAD;QAAM,WAAU;QACd,UAAAA,EAAK;OACD,CAAA;OACN,kBAACE,GAAD;QACC,eAAY;QACZ,WAAU;OACV,CAAA;MACyB;KA1BrB,GAAAF,EAAK,KA0BgB,CAC3B;IACyB,CAAA;IAC1BlB,EAAQ,WAAW,KACnB,kBAAC,KAAD;KAAG,MAAK;KAAS,WAAU;KACzB,UAAAqB;IACC,CAAA;GAEW;EACR,CAAA,CAAA;;AAEX"}

package/dist/components/inline-editable.js

@@ -47,13 +47,13 @@ function f({ label: f, value: p, onSave: m, editing: h, defaultEditing: g = !1,
 		role: "group",
 		"aria-label": f,
 		"aria-busy": Y,
-		className: e(t, "min-w-0 space-y-2", M),
+		className: e(t, "min-w-0 space-y-basalt-space-lg", M),
 		onBlur: (e) => {
 			C && !e.currentTarget.contains(e.relatedTarget) && $("blur");
 		},
 		children: [
 			J ? /* @__PURE__ */ d("div", {
-				className: "flex flex-wrap items-center gap-2",
+				className: "flex flex-wrap items-center gap-basalt-space-lg",
 				children: [
 					/* @__PURE__ */ u(r, {
 						ref: V,
@@ -92,7 +92,7 @@ function f({ label: f, value: p, onSave: m, editing: h, defaultEditing: g = !1,
 				type: "button",
 				disabled: b || v,
 				"aria-label": `${E} ${f}`,
-				className: "group flex max-w-full items-center gap-2 rounded-basalt-md px-1 py-1 text-left text-sm hover:bg-basalt-accent focus-visible:outline-2 focus-visible:outline-basalt-ring disabled:opacity-50",
+				className: "group flex max-w-full items-center gap-basalt-space-lg rounded-basalt-md px-basalt-space-sm py-basalt-space-sm text-left text-basalt-base hover:bg-basalt-hover focus-visible:outline-2 focus-visible:outline-basalt-ring disabled:opacity-50",
 				onClick: () => {
 					I(p), B(void 0), Z(!0, "edit");
 				},
@@ -100,19 +100,19 @@ function f({ label: f, value: p, onSave: m, editing: h, defaultEditing: g = !1,
 					className: e("min-w-0 break-words", !p && "text-basalt-muted-foreground"),
 					children: p || T
 				}), /* @__PURE__ */ u(l, {
-					className: "size-3.5 shrink-0 text-basalt-muted-foreground",
+					className: "size-basalt-icon shrink-0 text-basalt-muted-foreground",
 					"aria-hidden": "true"
 				})]
 			}),
 			Y && /* @__PURE__ */ u("p", {
 				role: "status",
-				className: "text-xs text-basalt-muted-foreground",
+				className: "text-basalt-sm text-basalt-muted-foreground",
 				children: k
 			}),
 			X && /* @__PURE__ */ u("p", {
 				id: `${q}-error`,
 				role: "alert",
-				className: "text-xs text-basalt-destructive",
+				className: "text-basalt-sm text-basalt-destructive",
 				children: X
 			})
 		]

package/dist/components/inline-editable.js.map

@@ -1 +1 @@
-{"version":3,"file":"inline-editable.js","names":["InlineEditable","localEditing","setLocalEditing","useState","defaultEditing","draft","setDraft","value","saving","setSaving","failure","setFailure","input","useRef","trigger","mounted","operation","locked","restore","id","useId","isEditing","editing","busy","pending","message","error","useEffect","useLayoutEffect","disabled","changeEditing","next","onEditingChange","reason","finish","save","trim","invalid","required","requiredLabel","validate","ticket","onSave","cause","errorLabel","label","cn","BASALT_UI_CLASS","className","saveOnBlur","event","Input","Button","saveLabel","cancelLabel","editLabel","placeholder","Pencil","pendingLabel"],"sources":["../../src/components/inline-editable.tsx"],"sourcesContent":["import { Pencil } from \"lucide-react\";\nimport { useEffect, useId, useLayoutEffect, useRef, useState } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { Button } from \"./button\";\nimport { Input } from \"./input\";\n\nexport type InlineEditableChangeReason = \"edit\" | \"save\" | \"blur\" | \"cancel\";\nexport interface InlineEditableProps {\n\t/** Accessible name of the edited field. */\n\tlabel: string;\n\t/** Committed value, owned by the application. */\n\tvalue: string;\n\t/** Persist the draft. Return a promise to keep the editor pending; rejection preserves the draft. */\n\tonSave: (value: string) => void | Promise<void>;\n\t/** Controlled edit mode. */\n\tediting?: boolean;\n\t/** Initial uncontrolled edit mode. @default false */\n\tdefaultEditing?: boolean;\n\t/** Edit-mode requests with their cause, including blur that must not steal focus. */\n\tonEditingChange?: (editing: boolean, reason: InlineEditableChangeReason) => void;\n\t/** External pending state. @default false */\n\tpending?: boolean;\n\t/** Application-owned error message. */\n\terror?: string;\n\t/** Disable editing and saving. @default false */\n\tdisabled?: boolean;\n\t/** Reject an empty draft. @default true */\n\trequired?: boolean;\n\t/** Trim whitespace before validation and save. @default true */\n\ttrim?: boolean;\n\t/** Commit when focus leaves the whole editor, including its actions. @default true */\n\tsaveOnBlur?: boolean;\n\t/** Return a validation message to retain the draft without invoking onSave. */\n\tvalidate?: (value: string) => string | undefined;\n\t/** Empty committed-value prompt. @default \"Untitled\" */\n\tplaceholder?: string;\n\t/** Edit action label prefix. @default \"Edit\" */\n\teditLabel?: string;\n\t/** Save action text. @default \"Save\" */\n\tsaveLabel?: string;\n\t/** Cancel action text. @default \"Cancel\" */\n\tcancelLabel?: string;\n\t/** Pending announcement. @default \"Saving…\" */\n\tpendingLabel?: string;\n\t/** Empty-value validation message. @default \"Enter a value.\" */\n\trequiredLabel?: string;\n\t/** Fallback for non-Error rejections. @default \"Could not save changes.\" */\n\terrorLabel?: string;\n\t/** Additional root classes. */\n\tclassName?: string;\n}\n\nexport function InlineEditable({\n\tlabel,\n\tvalue,\n\tonSave,\n\tediting,\n\tdefaultEditing = false,\n\tonEditingChange,\n\tpending = false,\n\terror,\n\tdisabled = false,\n\trequired = true,\n\ttrim = true,\n\tsaveOnBlur = true,\n\tvalidate,\n\tplaceholder = \"Untitled\",\n\teditLabel = \"Edit\",\n\tsaveLabel = \"Save\",\n\tcancelLabel = \"Cancel\",\n\tpendingLabel = \"Saving…\",\n\trequiredLabel = \"Enter a value.\",\n\terrorLabel = \"Could not save changes.\",\n\tclassName,\n}: InlineEditableProps) {\n\tconst [localEditing, setLocalEditing] = useState(defaultEditing);\n\tconst [draft, setDraft] = useState(value);\n\tconst [saving, setSaving] = useState(false);\n\tconst [failure, setFailure] = useState<string>();\n\tconst input = useRef<HTMLInputElement>(null);\n\tconst trigger = useRef<HTMLButtonElement>(null);\n\tconst mounted = useRef(true);\n\tconst operation = useRef(0);\n\tconst locked = useRef(false);\n\tconst restore = useRef(false);\n\tconst id = useId();\n\tconst isEditing = editing ?? localEditing;\n\tconst busy = pending || saving;\n\tconst message = error ?? failure;\n\tuseEffect(() => {\n\t\tmounted.current = true;\n\t\treturn () => {\n\t\t\tmounted.current = false;\n\t\t\toperation.current += 1;\n\t\t};\n\t}, []);\n\tuseLayoutEffect(() => {\n\t\tif (isEditing && !disabled) {\n\t\t\tinput.current?.focus();\n\t\t\tinput.current?.select();\n\t\t} else if (!isEditing && restore.current) {\n\t\t\trestore.current = false;\n\t\t\ttrigger.current?.focus();\n\t\t}\n\t}, [isEditing, disabled]);\n\tuseEffect(() => {\n\t\tif (!isEditing) {\n\t\t\toperation.current += 1;\n\t\t\tlocked.current = false;\n\t\t\tsetSaving(false);\n\t\t\tsetDraft(value);\n\t\t\tsetFailure(undefined);\n\t\t}\n\t}, [isEditing, value]);\n\tfunction changeEditing(next: boolean, reason: InlineEditableChangeReason) {\n\t\tif (editing === undefined) setLocalEditing(next);\n\t\tonEditingChange?.(next, reason);\n\t}\n\tfunction finish(reason: InlineEditableChangeReason) {\n\t\trestore.current = reason !== \"blur\";\n\t\tchangeEditing(false, reason);\n\t}\n\tasync function save(reason: \"save\" | \"blur\") {\n\t\tif (!isEditing || disabled || busy || locked.current) return;\n\t\tconst next = trim ? draft.trim() : draft;\n\t\tconst invalid = required && !next ? requiredLabel : validate?.(next);\n\t\tif (invalid) {\n\t\t\tsetFailure(invalid);\n\t\t\treturn;\n\t\t}\n\t\tif (next === value) {\n\t\t\tfinish(reason);\n\t\t\treturn;\n\t\t}\n\t\tlocked.current = true;\n\t\tsetSaving(true);\n\t\tsetFailure(undefined);\n\t\tconst ticket = ++operation.current;\n\t\ttry {\n\t\t\tawait onSave(next);\n\t\t\tif (mounted.current && ticket === operation.current) finish(reason);\n\t\t} catch (cause) {\n\t\t\tif (mounted.current && ticket === operation.current)\n\t\t\t\tsetFailure(cause instanceof Error && cause.message ? cause.message : errorLabel);\n\t\t} finally {\n\t\t\tif (mounted.current && ticket === operation.current) {\n\t\t\t\tlocked.current = false;\n\t\t\t\tsetSaving(false);\n\t\t\t}\n\t\t}\n\t}\n\treturn (\n\t\t<div\n\t\t\trole=\"group\"\n\t\t\taria-label={label}\n\t\t\taria-busy={busy}\n\t\t\tclassName={cn(BASALT_UI_CLASS, \"min-w-0 space-y-2\", className)}\n\t\t\tonBlur={(event) => {\n\t\t\t\tif (saveOnBlur && !event.currentTarget.contains(event.relatedTarget)) void save(\"blur\");\n\t\t\t}}\n\t\t>\n\t\t\t{isEditing ? (\n\t\t\t\t<div className=\"flex flex-wrap items-center gap-2\">\n\t\t\t\t\t<Input\n\t\t\t\t\t\tref={input}\n\t\t\t\t\t\taria-label={label}\n\t\t\t\t\t\tclassName=\"min-w-0 flex-1 basis-32\"\n\t\t\t\t\t\tvalue={draft}\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\treadOnly={busy}\n\t\t\t\t\t\taria-invalid={!!message}\n\t\t\t\t\t\taria-describedby={message ? `${id}-error` : undefined}\n\t\t\t\t\t\tonChange={(event) => {\n\t\t\t\t\t\t\tsetDraft(event.target.value);\n\t\t\t\t\t\t\tsetFailure(undefined);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonKeyDown={(event) => {\n\t\t\t\t\t\t\tif (event.nativeEvent.isComposing) return;\n\t\t\t\t\t\t\tif (event.key === \"Enter\") {\n\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\tvoid save(\"save\");\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tif (event.key === \"Escape\" && !busy) {\n\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\tsetDraft(value);\n\t\t\t\t\t\t\t\tsetFailure(undefined);\n\t\t\t\t\t\t\t\tfinish(\"cancel\");\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t\t<Button size=\"sm\" disabled={disabled || busy} onClick={() => void save(\"save\")}>\n\t\t\t\t\t\t{saveLabel}\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\tdisabled={busy}\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\tsetDraft(value);\n\t\t\t\t\t\t\tsetFailure(undefined);\n\t\t\t\t\t\t\tfinish(\"cancel\");\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{cancelLabel}\n\t\t\t\t\t</Button>\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\t<button\n\t\t\t\t\tref={trigger}\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tdisabled={disabled || pending}\n\t\t\t\t\taria-label={`${editLabel} ${label}`}\n\t\t\t\t\tclassName=\"group flex max-w-full items-center gap-2 rounded-basalt-md px-1 py-1 text-left text-sm hover:bg-basalt-accent focus-visible:outline-2 focus-visible:outline-basalt-ring disabled:opacity-50\"\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\tsetDraft(value);\n\t\t\t\t\t\tsetFailure(undefined);\n\t\t\t\t\t\tchangeEditing(true, \"edit\");\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<span className={cn(\"min-w-0 break-words\", !value && \"text-basalt-muted-foreground\")}>\n\t\t\t\t\t\t{value || placeholder}\n\t\t\t\t\t</span>\n\t\t\t\t\t<Pencil className=\"size-3.5 shrink-0 text-basalt-muted-foreground\" aria-hidden=\"true\" />\n\t\t\t\t</button>\n\t\t\t)}\n\t\t\t{busy && (\n\t\t\t\t<p role=\"status\" className=\"text-xs text-basalt-muted-foreground\">\n\t\t\t\t\t{pendingLabel}\n\t\t\t\t</p>\n\t\t\t)}\n\t\t\t{message && (\n\t\t\t\t<p id={`${id}-error`} role=\"alert\" className=\"text-xs text-basalt-destructive\">\n\t\t\t\t\t{message}\n\t\t\t\t</p>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n"],"mappings":"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"}
+{"version":3,"file":"inline-editable.js","names":["InlineEditable","localEditing","setLocalEditing","useState","defaultEditing","draft","setDraft","value","saving","setSaving","failure","setFailure","input","useRef","trigger","mounted","operation","locked","restore","id","useId","isEditing","editing","busy","pending","message","error","useEffect","useLayoutEffect","disabled","changeEditing","next","onEditingChange","reason","finish","save","trim","invalid","required","requiredLabel","validate","ticket","onSave","cause","errorLabel","label","cn","BASALT_UI_CLASS","className","saveOnBlur","event","Input","Button","saveLabel","cancelLabel","editLabel","placeholder","Pencil","pendingLabel"],"sources":["../../src/components/inline-editable.tsx"],"sourcesContent":["import { Pencil } from \"lucide-react\";\nimport { useEffect, useId, useLayoutEffect, useRef, useState } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { Button } from \"./button\";\nimport { Input } from \"./input\";\n\nexport type InlineEditableChangeReason = \"edit\" | \"save\" | \"blur\" | \"cancel\";\nexport interface InlineEditableProps {\n\t/** Accessible name of the edited field. */\n\tlabel: string;\n\t/** Committed value, owned by the application. */\n\tvalue: string;\n\t/** Persist the draft. Return a promise to keep the editor pending; rejection preserves the draft. */\n\tonSave: (value: string) => void | Promise<void>;\n\t/** Controlled edit mode. */\n\tediting?: boolean;\n\t/** Initial uncontrolled edit mode. @default false */\n\tdefaultEditing?: boolean;\n\t/** Edit-mode requests with their cause, including blur that must not steal focus. */\n\tonEditingChange?: (editing: boolean, reason: InlineEditableChangeReason) => void;\n\t/** External pending state. @default false */\n\tpending?: boolean;\n\t/** Application-owned error message. */\n\terror?: string;\n\t/** Disable editing and saving. @default false */\n\tdisabled?: boolean;\n\t/** Reject an empty draft. @default true */\n\trequired?: boolean;\n\t/** Trim whitespace before validation and save. @default true */\n\ttrim?: boolean;\n\t/** Commit when focus leaves the whole editor, including its actions. @default true */\n\tsaveOnBlur?: boolean;\n\t/** Return a validation message to retain the draft without invoking onSave. */\n\tvalidate?: (value: string) => string | undefined;\n\t/** Empty committed-value prompt. @default \"Untitled\" */\n\tplaceholder?: string;\n\t/** Edit action label prefix. @default \"Edit\" */\n\teditLabel?: string;\n\t/** Save action text. @default \"Save\" */\n\tsaveLabel?: string;\n\t/** Cancel action text. @default \"Cancel\" */\n\tcancelLabel?: string;\n\t/** Pending announcement. @default \"Saving…\" */\n\tpendingLabel?: string;\n\t/** Empty-value validation message. @default \"Enter a value.\" */\n\trequiredLabel?: string;\n\t/** Fallback for non-Error rejections. @default \"Could not save changes.\" */\n\terrorLabel?: string;\n\t/** Additional root classes. */\n\tclassName?: string;\n}\n\nexport function InlineEditable({\n\tlabel,\n\tvalue,\n\tonSave,\n\tediting,\n\tdefaultEditing = false,\n\tonEditingChange,\n\tpending = false,\n\terror,\n\tdisabled = false,\n\trequired = true,\n\ttrim = true,\n\tsaveOnBlur = true,\n\tvalidate,\n\tplaceholder = \"Untitled\",\n\teditLabel = \"Edit\",\n\tsaveLabel = \"Save\",\n\tcancelLabel = \"Cancel\",\n\tpendingLabel = \"Saving…\",\n\trequiredLabel = \"Enter a value.\",\n\terrorLabel = \"Could not save changes.\",\n\tclassName,\n}: InlineEditableProps) {\n\tconst [localEditing, setLocalEditing] = useState(defaultEditing);\n\tconst [draft, setDraft] = useState(value);\n\tconst [saving, setSaving] = useState(false);\n\tconst [failure, setFailure] = useState<string>();\n\tconst input = useRef<HTMLInputElement>(null);\n\tconst trigger = useRef<HTMLButtonElement>(null);\n\tconst mounted = useRef(true);\n\tconst operation = useRef(0);\n\tconst locked = useRef(false);\n\tconst restore = useRef(false);\n\tconst id = useId();\n\tconst isEditing = editing ?? localEditing;\n\tconst busy = pending || saving;\n\tconst message = error ?? failure;\n\tuseEffect(() => {\n\t\tmounted.current = true;\n\t\treturn () => {\n\t\t\tmounted.current = false;\n\t\t\toperation.current += 1;\n\t\t};\n\t}, []);\n\tuseLayoutEffect(() => {\n\t\tif (isEditing && !disabled) {\n\t\t\tinput.current?.focus();\n\t\t\tinput.current?.select();\n\t\t} else if (!isEditing && restore.current) {\n\t\t\trestore.current = false;\n\t\t\ttrigger.current?.focus();\n\t\t}\n\t}, [isEditing, disabled]);\n\tuseEffect(() => {\n\t\tif (!isEditing) {\n\t\t\toperation.current += 1;\n\t\t\tlocked.current = false;\n\t\t\tsetSaving(false);\n\t\t\tsetDraft(value);\n\t\t\tsetFailure(undefined);\n\t\t}\n\t}, [isEditing, value]);\n\tfunction changeEditing(next: boolean, reason: InlineEditableChangeReason) {\n\t\tif (editing === undefined) setLocalEditing(next);\n\t\tonEditingChange?.(next, reason);\n\t}\n\tfunction finish(reason: InlineEditableChangeReason) {\n\t\trestore.current = reason !== \"blur\";\n\t\tchangeEditing(false, reason);\n\t}\n\tasync function save(reason: \"save\" | \"blur\") {\n\t\tif (!isEditing || disabled || busy || locked.current) return;\n\t\tconst next = trim ? draft.trim() : draft;\n\t\tconst invalid = required && !next ? requiredLabel : validate?.(next);\n\t\tif (invalid) {\n\t\t\tsetFailure(invalid);\n\t\t\treturn;\n\t\t}\n\t\tif (next === value) {\n\t\t\tfinish(reason);\n\t\t\treturn;\n\t\t}\n\t\tlocked.current = true;\n\t\tsetSaving(true);\n\t\tsetFailure(undefined);\n\t\tconst ticket = ++operation.current;\n\t\ttry {\n\t\t\tawait onSave(next);\n\t\t\tif (mounted.current && ticket === operation.current) finish(reason);\n\t\t} catch (cause) {\n\t\t\tif (mounted.current && ticket === operation.current)\n\t\t\t\tsetFailure(cause instanceof Error && cause.message ? cause.message : errorLabel);\n\t\t} finally {\n\t\t\tif (mounted.current && ticket === operation.current) {\n\t\t\t\tlocked.current = false;\n\t\t\t\tsetSaving(false);\n\t\t\t}\n\t\t}\n\t}\n\treturn (\n\t\t<div\n\t\t\trole=\"group\"\n\t\t\taria-label={label}\n\t\t\taria-busy={busy}\n\t\t\tclassName={cn(BASALT_UI_CLASS, \"min-w-0 space-y-basalt-space-lg\", className)}\n\t\t\tonBlur={(event) => {\n\t\t\t\tif (saveOnBlur && !event.currentTarget.contains(event.relatedTarget)) void save(\"blur\");\n\t\t\t}}\n\t\t>\n\t\t\t{isEditing ? (\n\t\t\t\t<div className=\"flex flex-wrap items-center gap-basalt-space-lg\">\n\t\t\t\t\t<Input\n\t\t\t\t\t\tref={input}\n\t\t\t\t\t\taria-label={label}\n\t\t\t\t\t\tclassName=\"min-w-0 flex-1 basis-32\"\n\t\t\t\t\t\tvalue={draft}\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\treadOnly={busy}\n\t\t\t\t\t\taria-invalid={!!message}\n\t\t\t\t\t\taria-describedby={message ? `${id}-error` : undefined}\n\t\t\t\t\t\tonChange={(event) => {\n\t\t\t\t\t\t\tsetDraft(event.target.value);\n\t\t\t\t\t\t\tsetFailure(undefined);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonKeyDown={(event) => {\n\t\t\t\t\t\t\tif (event.nativeEvent.isComposing) return;\n\t\t\t\t\t\t\tif (event.key === \"Enter\") {\n\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\tvoid save(\"save\");\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tif (event.key === \"Escape\" && !busy) {\n\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\tsetDraft(value);\n\t\t\t\t\t\t\t\tsetFailure(undefined);\n\t\t\t\t\t\t\t\tfinish(\"cancel\");\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t\t<Button size=\"sm\" disabled={disabled || busy} onClick={() => void save(\"save\")}>\n\t\t\t\t\t\t{saveLabel}\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\tdisabled={busy}\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\tsetDraft(value);\n\t\t\t\t\t\t\tsetFailure(undefined);\n\t\t\t\t\t\t\tfinish(\"cancel\");\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{cancelLabel}\n\t\t\t\t\t</Button>\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\t<button\n\t\t\t\t\tref={trigger}\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tdisabled={disabled || pending}\n\t\t\t\t\taria-label={`${editLabel} ${label}`}\n\t\t\t\t\tclassName=\"group flex max-w-full items-center gap-basalt-space-lg rounded-basalt-md px-basalt-space-sm py-basalt-space-sm text-left text-basalt-base hover:bg-basalt-hover focus-visible:outline-2 focus-visible:outline-basalt-ring disabled:opacity-50\"\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\tsetDraft(value);\n\t\t\t\t\t\tsetFailure(undefined);\n\t\t\t\t\t\tchangeEditing(true, \"edit\");\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<span className={cn(\"min-w-0 break-words\", !value && \"text-basalt-muted-foreground\")}>\n\t\t\t\t\t\t{value || placeholder}\n\t\t\t\t\t</span>\n\t\t\t\t\t<Pencil\n\t\t\t\t\t\tclassName=\"size-basalt-icon shrink-0 text-basalt-muted-foreground\"\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t/>\n\t\t\t\t</button>\n\t\t\t)}\n\t\t\t{busy && (\n\t\t\t\t<p role=\"status\" className=\"text-basalt-sm text-basalt-muted-foreground\">\n\t\t\t\t\t{pendingLabel}\n\t\t\t\t</p>\n\t\t\t)}\n\t\t\t{message && (\n\t\t\t\t<p id={`${id}-error`} role=\"alert\" className=\"text-basalt-sm text-basalt-destructive\">\n\t\t\t\t\t{message}\n\t\t\t\t</p>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n"],"mappings":"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"}

package/dist/components/input-area.js

@@ -6,9 +6,9 @@ import * as r from "react";
 import { jsx as i } from "react/jsx-runtime";
 //#region src/components/input-area.tsx
 var a = {
-	sm: "min-h-[64px] px-2.5 py-1.5 text-xs",
-	default: "min-h-[80px] px-3 py-2 text-sm",
-	lg: "min-h-[96px] px-4 py-2 text-base"
+	sm: "min-h-basalt-textarea-sm px-basalt-space-lg py-basalt-space-md text-basalt-sm",
+	default: "min-h-basalt-textarea px-basalt-control-x py-basalt-space-lg text-basalt-base",
+	lg: "min-h-basalt-textarea-lg px-basalt-control-x-lg py-basalt-space-lg text-basalt-lg"
 }, o = {
 	"data-1p-ignore": "true",
 	"data-bwignore": "true",

package/dist/components/input-area.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-area.js","names":["React","INPUT_AREA_SIZE_CLASS","PASSWORD_MANAGER_MARKERS","InputArea","props","controlSurfaceClass","cn","size","FOCUS_BORDER","passwordManagerIgnore","className"],"sources":["../../src/components/input-area.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { controlSurfaceClass } from \"../utils/control-surface\";\nimport { FOCUS_BORDER } from \"./overlay\";\n\nexport type InputAreaSize = \"sm\" | \"default\" | \"lg\";\n\nconst INPUT_AREA_SIZE_CLASS: Record<InputAreaSize, string> = {\n\tsm: \"min-h-[64px] px-2.5 py-1.5 text-xs\",\n\tdefault: \"min-h-[80px] px-3 py-2 text-sm\",\n\tlg: \"min-h-[96px] px-4 py-2 text-base\",\n};\n\nconst PASSWORD_MANAGER_MARKERS = {\n\t\"data-1p-ignore\": \"true\",\n\t\"data-bwignore\": \"true\",\n\t\"data-form-type\": \"other\",\n\t\"data-lpignore\": \"true\",\n} as const;\n\nexport type InputAreaProps = Omit<React.ComponentProps<\"textarea\">, \"rows\"> & {\n\t/**\n\t * The visible text row count.\n\t */\n\trows?: number;\n\t/**\n\t * The visual size of the text area.\n\t * @default default\n\t */\n\tsize?: InputAreaSize;\n\t/**\n\t * Ignore password managers on this field.\n\t * @default false\n\t */\n\tpasswordManagerIgnore?: boolean;\n};\n\nexport const InputArea = React.forwardRef<HTMLTextAreaElement, InputAreaProps>(\n\t({ className, size = \"default\", passwordManagerIgnore = false, ...props }, ref) => (\n\t\t<textarea\n\t\t\tref={ref}\n\t\t\tclassName={controlSurfaceClass(\n\t\t\t\tcn(\n\t\t\t\t\t\"flex w-full text-basalt-foreground shadow-xs placeholder:text-basalt-muted-foreground disabled:cursor-not-allowed disabled:border-transparent disabled:text-basalt-muted-foreground/40\",\n\t\t\t\t\tINPUT_AREA_SIZE_CLASS[size],\n\t\t\t\t\tFOCUS_BORDER,\n\t\t\t\t\t\"aria-invalid:border-basalt-destructive aria-invalid:focus-visible:border-basalt-destructive\",\n\t\t\t\t\tpasswordManagerIgnore && \"keeper-ignore\",\n\t\t\t\t\tclassName,\n\t\t\t\t),\n\t\t\t)}\n\t\t\t{...props}\n\t\t\t{...(passwordManagerIgnore ? PASSWORD_MANAGER_MARKERS : {})}\n\t\t/>\n\t),\n);\nInputArea.displayName = \"InputArea\";\n"],"mappings":";;;;;;;AAOA,IAAMC,IAAuD;CAC5D,IAAI;CACJ,SAAS;CACT,IAAI;AACL,GAEMC,IAA2B;CAChC,kBAAkB;CAClB,iBAAiB;CACjB,kBAAkB;CAClB,iBAAiB;AAClB,GAmBaC,IAAYH,EAAM,YAC7B,EAAE,cAAW,UAAO,WAAW,2BAAwB,IAAO,GAAGI,KAAS,MAC1E,kBAAC,YAAD;CACM;CACL,WAAWC,EACVC,EACC,0LACAL,EAAsBM,IACtBC,GACA,+FACAC,KAAyB,iBACzBC,CACD,CACD;CACA,GAAIN;CACJ,GAAKK,IAAwBP,IAA2B,CAAC;AACzD,CAAA,CAEH;AACA,EAAU,cAAc"}
+{"version":3,"file":"input-area.js","names":["React","INPUT_AREA_SIZE_CLASS","PASSWORD_MANAGER_MARKERS","InputArea","props","controlSurfaceClass","cn","size","FOCUS_BORDER","passwordManagerIgnore","className"],"sources":["../../src/components/input-area.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { controlSurfaceClass } from \"../utils/control-surface\";\nimport { FOCUS_BORDER } from \"./overlay\";\n\nexport type InputAreaSize = \"sm\" | \"default\" | \"lg\";\n\nconst INPUT_AREA_SIZE_CLASS: Record<InputAreaSize, string> = {\n\tsm: \"min-h-basalt-textarea-sm px-basalt-space-lg py-basalt-space-md text-basalt-sm\",\n\tdefault: \"min-h-basalt-textarea px-basalt-control-x py-basalt-space-lg text-basalt-base\",\n\tlg: \"min-h-basalt-textarea-lg px-basalt-control-x-lg py-basalt-space-lg text-basalt-lg\",\n};\n\nconst PASSWORD_MANAGER_MARKERS = {\n\t\"data-1p-ignore\": \"true\",\n\t\"data-bwignore\": \"true\",\n\t\"data-form-type\": \"other\",\n\t\"data-lpignore\": \"true\",\n} as const;\n\nexport type InputAreaProps = Omit<React.ComponentProps<\"textarea\">, \"rows\"> & {\n\t/**\n\t * The visible text row count.\n\t */\n\trows?: number;\n\t/**\n\t * The visual size of the text area.\n\t * @default default\n\t */\n\tsize?: InputAreaSize;\n\t/**\n\t * Ignore password managers on this field.\n\t * @default false\n\t */\n\tpasswordManagerIgnore?: boolean;\n};\n\nexport const InputArea = React.forwardRef<HTMLTextAreaElement, InputAreaProps>(\n\t({ className, size = \"default\", passwordManagerIgnore = false, ...props }, ref) => (\n\t\t<textarea\n\t\t\tref={ref}\n\t\t\tclassName={controlSurfaceClass(\n\t\t\t\tcn(\n\t\t\t\t\t\"flex w-full text-basalt-foreground shadow-xs placeholder:text-basalt-muted-foreground disabled:cursor-not-allowed disabled:border-transparent disabled:text-basalt-muted-foreground/40\",\n\t\t\t\t\tINPUT_AREA_SIZE_CLASS[size],\n\t\t\t\t\tFOCUS_BORDER,\n\t\t\t\t\t\"aria-invalid:border-basalt-destructive aria-invalid:focus-visible:border-basalt-destructive\",\n\t\t\t\t\tpasswordManagerIgnore && \"keeper-ignore\",\n\t\t\t\t\tclassName,\n\t\t\t\t),\n\t\t\t)}\n\t\t\t{...props}\n\t\t\t{...(passwordManagerIgnore ? PASSWORD_MANAGER_MARKERS : {})}\n\t\t/>\n\t),\n);\nInputArea.displayName = \"InputArea\";\n"],"mappings":";;;;;;;AAOA,IAAMC,IAAuD;CAC5D,IAAI;CACJ,SAAS;CACT,IAAI;AACL,GAEMC,IAA2B;CAChC,kBAAkB;CAClB,iBAAiB;CACjB,kBAAkB;CAClB,iBAAiB;AAClB,GAmBaC,IAAYH,EAAM,YAC7B,EAAE,cAAW,UAAO,WAAW,2BAAwB,IAAO,GAAGI,KAAS,MAC1E,kBAAC,YAAD;CACM;CACL,WAAWC,EACVC,EACC,0LACAL,EAAsBM,IACtBC,GACA,+FACAC,KAAyB,iBACzBC,CACD,CACD;CACA,GAAIN;CACJ,GAAKK,IAAwBP,IAA2B,CAAC;AACzD,CAAA,CAEH;AACA,EAAU,cAAc"}

package/dist/components/input-group.js

@@ -14,7 +14,7 @@ var o = i.createContext(!1), s = i.forwardRef(({ className: n, disabled: r, onCl
 		"data-disabled": r ? "" : void 0,
 		"aria-disabled": r || void 0,
 		inert: r || void 0,
-		className: t(e("flex h-9 w-full items-center shadow-xs", "[&>:first-child]:rounded-l-basalt-md [&>:last-child]:rounded-r-basalt-md", "outline-hidden focus-within:border-basalt-ring", "has-[[data-slot=input-group-addon-start]]:[&_input]:pl-2", "has-[[data-slot=input-group-addon-end]]:[&_input]:pr-2", "has-[[data-slot=input-group-suffix]]:[&_input]:flex-none", "has-[[data-slot=input-group-suffix]]:[&_input]:[field-sizing:content]", "has-[[data-slot=input-group-suffix]]:[&_input]:pr-0", "data-[disabled]:pointer-events-none data-[disabled]:opacity-50", n)),
+		className: t(e("flex w-full items-center text-basalt-base shadow-xs", "[&>:first-child]:rounded-l-basalt-md [&>:last-child]:rounded-r-basalt-md", "outline-hidden focus-within:border-basalt-ring", "has-[[data-slot=input-group-addon-start]]:[&_input]:pl-basalt-space-lg", "has-[[data-slot=input-group-addon-end]]:[&_input]:pr-basalt-space-lg", "has-[[data-slot=input-group-suffix]]:[&_input]:flex-none", "has-[[data-slot=input-group-suffix]]:[&_input]:[field-sizing:content]", "has-[[data-slot=input-group-suffix]]:[&_input]:pr-0", "data-[disabled]:pointer-events-none data-[disabled]:opacity-50", n)),
 		onClick: (e) => {
 			i?.(e), !(e.defaultPrevented || r) && (e.target.closest("input, textarea, button, a") || e.currentTarget.querySelector("input")?.focus());
 		},
@@ -28,7 +28,7 @@ var c = i.forwardRef(({ className: t, disabled: n, ...s }, c) => {
 	return /* @__PURE__ */ a(r, {
 		ref: c,
 		disabled: n || l,
-		className: e("h-full min-w-0 w-auto! flex-1 rounded-none border-0 bg-transparent px-3 py-0 shadow-none", "outline-hidden focus-visible:border-transparent focus-visible:ring-0", t),
+		className: e("min-w-0 w-auto! flex-1 rounded-none border-0 bg-transparent px-basalt-space-lg shadow-none", "outline-hidden focus-visible:border-transparent focus-visible:ring-0", t),
 		...s
 	});
 });
@@ -36,7 +36,7 @@ c.displayName = "InputGroup.Input";
 function l({ align: t = "start", className: n, children: r, ...i }) {
 	return /* @__PURE__ */ a("div", {
 		"data-slot": t === "end" ? "input-group-addon-end" : "input-group-addon-start",
-		className: e("pointer-events-none flex shrink-0 items-center text-basalt-muted-foreground *:pointer-events-auto [&_svg]:size-4", t === "start" ? "-order-1 pl-3" : "order-1 pr-3", n),
+		className: e("pointer-events-none flex shrink-0 items-center text-basalt-muted-foreground *:pointer-events-auto [&_svg]:size-basalt-icon-lg", t === "start" ? "-order-1 pl-basalt-space-lg" : "order-1 pr-basalt-space-lg", n),
 		...i,
 		children: r
 	});
@@ -45,7 +45,7 @@ l.displayName = "InputGroup.Addon";
 function u({ className: t, children: n, ...r }) {
 	return /* @__PURE__ */ a("div", {
 		"data-slot": "input-group-suffix",
-		className: e("pointer-events-none flex min-w-0 flex-1 items-center pr-3 text-basalt-muted-foreground select-none", t),
+		className: e("pointer-events-none flex min-w-0 flex-1 items-center pr-basalt-space-lg text-basalt-muted-foreground select-none", t),
 		...r,
 		children: /* @__PURE__ */ a("span", {
 			className: "truncate",
@@ -61,7 +61,7 @@ var d = i.forwardRef(({ className: t, variant: r = "ghost", size: s = "icon", di
 		variant: r,
 		size: s,
 		disabled: c || d,
-		className: e("h-7 w-7 shrink-0 rounded-basalt-sm", t),
+		className: e("basalt-action-inset shrink-0 rounded-basalt-sm", t),
 		...l
 	});
 });

package/dist/components/input-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-group.js","names":["React","InputGroupDisabled","InputGroupRoot","props","disabled","controlSurfaceClass","cn","className","onClick","event","InputGroupInput","groupDisabled","Input","InputGroupAddon","align","InputGroupSuffix","InputGroupButton","Button","InputGroup"],"sources":["../../src/components/input-group.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { controlSurfaceClass } from \"../utils/control-surface\";\nimport { Button, type ButtonProps } from \"./button\";\nimport { Input } from \"./input\";\n\nexport type InputGroupProps = React.HTMLAttributes<HTMLDivElement> & {\n\t/**\n\t * Disable the input and nested actions.\n\t * @default false\n\t */\n\tdisabled?: boolean;\n};\n\nconst InputGroupDisabled = React.createContext(false);\n\nconst InputGroupRoot = React.forwardRef<HTMLDivElement, InputGroupProps>(\n\t({ className, disabled, onClick, children, ...props }, ref) => (\n\t\t<InputGroupDisabled.Provider value={Boolean(disabled)}>\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\tdata-slot=\"input-group\"\n\t\t\t\tdata-disabled={disabled ? \"\" : undefined}\n\t\t\t\taria-disabled={disabled || undefined}\n\t\t\t\tinert={disabled || undefined}\n\t\t\t\tclassName={controlSurfaceClass(\n\t\t\t\t\tcn(\n\t\t\t\t\t\t\"flex h-9 w-full items-center shadow-xs\",\n\t\t\t\t\t\t\"[&>:first-child]:rounded-l-basalt-md [&>:last-child]:rounded-r-basalt-md\",\n\t\t\t\t\t\t\"outline-hidden focus-within:border-basalt-ring\",\n\t\t\t\t\t\t\"has-[[data-slot=input-group-addon-start]]:[&_input]:pl-2\",\n\t\t\t\t\t\t\"has-[[data-slot=input-group-addon-end]]:[&_input]:pr-2\",\n\t\t\t\t\t\t\"has-[[data-slot=input-group-suffix]]:[&_input]:flex-none\",\n\t\t\t\t\t\t\"has-[[data-slot=input-group-suffix]]:[&_input]:[field-sizing:content]\",\n\t\t\t\t\t\t\"has-[[data-slot=input-group-suffix]]:[&_input]:pr-0\",\n\t\t\t\t\t\t\"data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t),\n\t\t\t\t)}\n\t\t\t\tonClick={(event) => {\n\t\t\t\t\tonClick?.(event);\n\t\t\t\t\tif (event.defaultPrevented || disabled) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tconst target = event.target as HTMLElement;\n\t\t\t\t\tif (target.closest(\"input, textarea, button, a\")) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tevent.currentTarget.querySelector(\"input\")?.focus();\n\t\t\t\t}}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</InputGroupDisabled.Provider>\n\t),\n);\nInputGroupRoot.displayName = \"InputGroup\";\n\nexport type InputGroupInputProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof Input>,\n\t\"type\" | \"size\" | \"passwordManagerIgnore\"\n> & {\n\t/**\n\t * The type of input control to render.\n\t */\n\ttype?: React.HTMLInputTypeAttribute;\n};\n\nconst InputGroupInput = React.forwardRef<HTMLInputElement, InputGroupInputProps>(\n\t({ className, disabled, ...props }, ref) => {\n\t\tconst groupDisabled = React.useContext(InputGroupDisabled);\n\t\treturn (\n\t\t\t<Input\n\t\t\t\tref={ref}\n\t\t\t\tdisabled={disabled || groupDisabled}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"h-full min-w-0 w-auto! flex-1 rounded-none border-0 bg-transparent px-3 py-0 shadow-none\",\n\t\t\t\t\t\"outline-hidden focus-visible:border-transparent focus-visible:ring-0\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nInputGroupInput.displayName = \"InputGroup.Input\";\n\nexport type InputGroupAddonProps = React.HTMLAttributes<HTMLDivElement> & {\n\t/**\n\t * Place the addon at the start or end of the group.\n\t * @default start\n\t */\n\talign?: \"start\" | \"end\";\n};\n\nfunction InputGroupAddon({ align = \"start\", className, children, ...props }: InputGroupAddonProps) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot={align === \"end\" ? \"input-group-addon-end\" : \"input-group-addon-start\"}\n\t\t\tclassName={cn(\n\t\t\t\t\"pointer-events-none flex shrink-0 items-center text-basalt-muted-foreground *:pointer-events-auto [&_svg]:size-4\",\n\t\t\t\talign === \"start\" ? \"-order-1 pl-3\" : \"order-1 pr-3\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t);\n}\nInputGroupAddon.displayName = \"InputGroup.Addon\";\n\nexport type InputGroupSuffixProps = React.HTMLAttributes<HTMLDivElement>;\n\nfunction InputGroupSuffix({ className, children, ...props }: InputGroupSuffixProps) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"input-group-suffix\"\n\t\t\tclassName={cn(\n\t\t\t\t\"pointer-events-none flex min-w-0 flex-1 items-center pr-3 text-basalt-muted-foreground select-none\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<span className=\"truncate\">{children}</span>\n\t\t</div>\n\t);\n}\nInputGroupSuffix.displayName = \"InputGroup.Suffix\";\n\nexport interface InputGroupButtonProps\n\textends Omit<ButtonProps, \"variant\" | \"size\" | \"asChild\" | \"loading\" | \"icon\"> {\n\t/**\n\t * Visual style for the nested action.\n\t * @default ghost\n\t */\n\tvariant?: ButtonProps[\"variant\"];\n\t/**\n\t * Size for the nested action.\n\t * @default icon\n\t */\n\tsize?: ButtonProps[\"size\"];\n\t/**\n\t * Render the nested action through its child element.\n\t * @default false\n\t */\n\tasChild?: boolean;\n\t/**\n\t * Show a spinner and disable the nested action.\n\t * @default false\n\t */\n\tloading?: boolean;\n\t/**\n\t * Icon rendered before the nested action label.\n\t */\n\ticon?: React.ReactNode;\n}\n\nconst InputGroupButton = React.forwardRef<HTMLButtonElement, InputGroupButtonProps>(\n\t({ className, variant = \"ghost\", size = \"icon\", disabled, ...props }, ref) => {\n\t\tconst groupDisabled = React.useContext(InputGroupDisabled);\n\t\treturn (\n\t\t\t<Button\n\t\t\t\tref={ref}\n\t\t\t\tvariant={variant}\n\t\t\t\tsize={size}\n\t\t\t\tdisabled={disabled || groupDisabled}\n\t\t\t\tclassName={cn(\"h-7 w-7 shrink-0 rounded-basalt-sm\", className)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nInputGroupButton.displayName = \"InputGroup.Button\";\n\nexport const InputGroup = Object.assign(InputGroupRoot, {\n\tInput: InputGroupInput,\n\tAddon: InputGroupAddon,\n\tSuffix: InputGroupSuffix,\n\tButton: InputGroupButton,\n});\n"],"mappings":";;;;;;;;AAcA,IAAMC,IAAqBD,EAAM,cAAc,EAAK,GAE9CE,IAAiBF,EAAM,YAC3B,EAAE,cAAW,aAAU,YAAS,aAAU,GAAGG,KAAS,MACtD,kBAACF,EAAmB,UAApB;CAA6B,OAAO,EAAQG;CAC3C,UAAA,kBAAC,OAAD;EACM;EACL,aAAU;EACV,iBAAeA,IAAW,KAAK,KAAA;EAC/B,iBAAeA,KAAY,KAAA;EAC3B,OAAOA,KAAY,KAAA;EACnB,WAAWC,EACVC,EACC,0CACA,4EACA,kDACA,4DACA,0DACA,4DACA,yEACA,uDACA,kEACAC,CACD,CACD;EACA,UAAU,MAAU;GAEnB,AADAC,IAAUC,CAAK,GACX,IAAM,oBAAoBL,OAGfK,EAAM,OACV,QAAQ,4BAA4B,KAG/CA,EAAM,cAAc,cAAc,OAAO,CAAC,EAAE,MAAM;EACnD;EACA,GAAIN;EAEH;CACG,CAAA;AACuB,CAAA,CAE/B;AACA,EAAe,cAAc;AAY7B,IAAMO,IAAkBV,EAAM,YAC5B,EAAE,cAAW,aAAU,GAAGG,KAAS,MAAQ;CAC3C,IAAMQ,IAAgBX,EAAM,WAAWC,CAAkB;CACzD,OACC,kBAACW,GAAD;EACM;EACL,UAAUR,KAAYO;EACtB,WAAWL,EACV,4FACA,wEACAC,CACD;EACA,GAAIJ;CACJ,CAAA;AAEH,CACD;AACA,EAAgB,cAAc;AAU9B,SAASU,EAAgB,EAAE,WAAQ,SAAS,cAAW,aAAU,GAAGV,KAA+B;CAClG,OACC,kBAAC,OAAD;EACC,aAAWW,MAAU,QAAQ,0BAA0B;EACvD,WAAWR,EACV,oHACAQ,MAAU,UAAU,kBAAkB,gBACtCP,CACD;EACA,GAAIJ;EAEH;CACG,CAAA;AAEP;AACA,EAAgB,cAAc;AAI9B,SAASY,EAAiB,EAAE,cAAW,aAAU,GAAGZ,KAAgC;CACnF,OACC,kBAAC,OAAD;EACC,aAAU;EACV,WAAWG,EACV,sGACAC,CACD;EACA,GAAIJ;EAEJ,UAAA,kBAAC,QAAD;GAAM,WAAU;GAAY;EAAe,CAAA;CACvC,CAAA;AAEP;AACA,EAAiB,cAAc;AA8B/B,IAAMa,IAAmBhB,EAAM,YAC7B,EAAE,cAAW,aAAU,SAAS,UAAO,QAAQ,aAAU,GAAGG,KAAS,MAAQ;CAC7E,IAAMQ,IAAgBX,EAAM,WAAWC,CAAkB;CACzD,OACC,kBAACgB,GAAD;EACM;EACI;EACH;EACN,UAAUb,KAAYO;EACtB,WAAWL,EAAG,sCAAsCC,CAAS;EAC7D,GAAIJ;CACJ,CAAA;AAEH,CACD;AACA,EAAiB,cAAc;AAE/B,IAAae,IAAa,OAAO,OAAOhB,GAAgB;CACvD,OAAOQ;CACP,OAAOG;CACP,QAAQE;CACR,QAAQC;AACT,CAAC"}
+{"version":3,"file":"input-group.js","names":["React","InputGroupDisabled","InputGroupRoot","props","disabled","controlSurfaceClass","cn","className","onClick","event","InputGroupInput","groupDisabled","Input","InputGroupAddon","align","InputGroupSuffix","InputGroupButton","Button","InputGroup"],"sources":["../../src/components/input-group.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { controlSurfaceClass } from \"../utils/control-surface\";\nimport { Button, type ButtonProps } from \"./button\";\nimport { Input } from \"./input\";\n\nexport type InputGroupProps = React.HTMLAttributes<HTMLDivElement> & {\n\t/**\n\t * Disable the input and nested actions.\n\t * @default false\n\t */\n\tdisabled?: boolean;\n};\n\nconst InputGroupDisabled = React.createContext(false);\n\nconst InputGroupRoot = React.forwardRef<HTMLDivElement, InputGroupProps>(\n\t({ className, disabled, onClick, children, ...props }, ref) => (\n\t\t<InputGroupDisabled.Provider value={Boolean(disabled)}>\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\tdata-slot=\"input-group\"\n\t\t\t\tdata-disabled={disabled ? \"\" : undefined}\n\t\t\t\taria-disabled={disabled || undefined}\n\t\t\t\tinert={disabled || undefined}\n\t\t\t\tclassName={controlSurfaceClass(\n\t\t\t\t\tcn(\n\t\t\t\t\t\t\"flex w-full items-center text-basalt-base shadow-xs\",\n\t\t\t\t\t\t\"[&>:first-child]:rounded-l-basalt-md [&>:last-child]:rounded-r-basalt-md\",\n\t\t\t\t\t\t\"outline-hidden focus-within:border-basalt-ring\",\n\t\t\t\t\t\t\"has-[[data-slot=input-group-addon-start]]:[&_input]:pl-basalt-space-lg\",\n\t\t\t\t\t\t\"has-[[data-slot=input-group-addon-end]]:[&_input]:pr-basalt-space-lg\",\n\t\t\t\t\t\t\"has-[[data-slot=input-group-suffix]]:[&_input]:flex-none\",\n\t\t\t\t\t\t\"has-[[data-slot=input-group-suffix]]:[&_input]:[field-sizing:content]\",\n\t\t\t\t\t\t\"has-[[data-slot=input-group-suffix]]:[&_input]:pr-0\",\n\t\t\t\t\t\t\"data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t),\n\t\t\t\t)}\n\t\t\t\tonClick={(event) => {\n\t\t\t\t\tonClick?.(event);\n\t\t\t\t\tif (event.defaultPrevented || disabled) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tconst target = event.target as HTMLElement;\n\t\t\t\t\tif (target.closest(\"input, textarea, button, a\")) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tevent.currentTarget.querySelector(\"input\")?.focus();\n\t\t\t\t}}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</InputGroupDisabled.Provider>\n\t),\n);\nInputGroupRoot.displayName = \"InputGroup\";\n\nexport type InputGroupInputProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof Input>,\n\t\"type\" | \"size\" | \"passwordManagerIgnore\"\n> & {\n\t/**\n\t * The type of input control to render.\n\t */\n\ttype?: React.HTMLInputTypeAttribute;\n};\n\nconst InputGroupInput = React.forwardRef<HTMLInputElement, InputGroupInputProps>(\n\t({ className, disabled, ...props }, ref) => {\n\t\tconst groupDisabled = React.useContext(InputGroupDisabled);\n\t\treturn (\n\t\t\t<Input\n\t\t\t\tref={ref}\n\t\t\t\tdisabled={disabled || groupDisabled}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"min-w-0 w-auto! flex-1 rounded-none border-0 bg-transparent px-basalt-space-lg shadow-none\",\n\t\t\t\t\t\"outline-hidden focus-visible:border-transparent focus-visible:ring-0\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nInputGroupInput.displayName = \"InputGroup.Input\";\n\nexport type InputGroupAddonProps = React.HTMLAttributes<HTMLDivElement> & {\n\t/**\n\t * Place the addon at the start or end of the group.\n\t * @default start\n\t */\n\talign?: \"start\" | \"end\";\n};\n\nfunction InputGroupAddon({ align = \"start\", className, children, ...props }: InputGroupAddonProps) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot={align === \"end\" ? \"input-group-addon-end\" : \"input-group-addon-start\"}\n\t\t\tclassName={cn(\n\t\t\t\t\"pointer-events-none flex shrink-0 items-center text-basalt-muted-foreground *:pointer-events-auto [&_svg]:size-basalt-icon-lg\",\n\t\t\t\talign === \"start\" ? \"-order-1 pl-basalt-space-lg\" : \"order-1 pr-basalt-space-lg\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t);\n}\nInputGroupAddon.displayName = \"InputGroup.Addon\";\n\nexport type InputGroupSuffixProps = React.HTMLAttributes<HTMLDivElement>;\n\nfunction InputGroupSuffix({ className, children, ...props }: InputGroupSuffixProps) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"input-group-suffix\"\n\t\t\tclassName={cn(\n\t\t\t\t\"pointer-events-none flex min-w-0 flex-1 items-center pr-basalt-space-lg text-basalt-muted-foreground select-none\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<span className=\"truncate\">{children}</span>\n\t\t</div>\n\t);\n}\nInputGroupSuffix.displayName = \"InputGroup.Suffix\";\n\nexport interface InputGroupButtonProps\n\textends Omit<ButtonProps, \"variant\" | \"size\" | \"asChild\" | \"loading\" | \"icon\"> {\n\t/**\n\t * Visual style for the nested action.\n\t * @default ghost\n\t */\n\tvariant?: ButtonProps[\"variant\"];\n\t/**\n\t * Size for the nested action.\n\t * @default icon\n\t */\n\tsize?: ButtonProps[\"size\"];\n\t/**\n\t * Render the nested action through its child element.\n\t * @default false\n\t */\n\tasChild?: boolean;\n\t/**\n\t * Show a spinner and disable the nested action.\n\t * @default false\n\t */\n\tloading?: boolean;\n\t/**\n\t * Icon rendered before the nested action label.\n\t */\n\ticon?: React.ReactNode;\n}\n\nconst InputGroupButton = React.forwardRef<HTMLButtonElement, InputGroupButtonProps>(\n\t({ className, variant = \"ghost\", size = \"icon\", disabled, ...props }, ref) => {\n\t\tconst groupDisabled = React.useContext(InputGroupDisabled);\n\t\treturn (\n\t\t\t<Button\n\t\t\t\tref={ref}\n\t\t\t\tvariant={variant}\n\t\t\t\tsize={size}\n\t\t\t\tdisabled={disabled || groupDisabled}\n\t\t\t\tclassName={cn(\"basalt-action-inset shrink-0 rounded-basalt-sm\", className)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nInputGroupButton.displayName = \"InputGroup.Button\";\n\nexport const InputGroup = Object.assign(InputGroupRoot, {\n\tInput: InputGroupInput,\n\tAddon: InputGroupAddon,\n\tSuffix: InputGroupSuffix,\n\tButton: InputGroupButton,\n});\n"],"mappings":";;;;;;;;AAcA,IAAMC,IAAqBD,EAAM,cAAc,EAAK,GAE9CE,IAAiBF,EAAM,YAC3B,EAAE,cAAW,aAAU,YAAS,aAAU,GAAGG,KAAS,MACtD,kBAACF,EAAmB,UAApB;CAA6B,OAAO,EAAQG;CAC3C,UAAA,kBAAC,OAAD;EACM;EACL,aAAU;EACV,iBAAeA,IAAW,KAAK,KAAA;EAC/B,iBAAeA,KAAY,KAAA;EAC3B,OAAOA,KAAY,KAAA;EACnB,WAAWC,EACVC,EACC,uDACA,4EACA,kDACA,0EACA,wEACA,4DACA,yEACA,uDACA,kEACAC,CACD,CACD;EACA,UAAU,MAAU;GAEnB,AADAC,IAAUC,CAAK,GACX,IAAM,oBAAoBL,OAGfK,EAAM,OACV,QAAQ,4BAA4B,KAG/CA,EAAM,cAAc,cAAc,OAAO,CAAC,EAAE,MAAM;EACnD;EACA,GAAIN;EAEH;CACG,CAAA;AACuB,CAAA,CAE/B;AACA,EAAe,cAAc;AAY7B,IAAMO,IAAkBV,EAAM,YAC5B,EAAE,cAAW,aAAU,GAAGG,KAAS,MAAQ;CAC3C,IAAMQ,IAAgBX,EAAM,WAAWC,CAAkB;CACzD,OACC,kBAACW,GAAD;EACM;EACL,UAAUR,KAAYO;EACtB,WAAWL,EACV,8FACA,wEACAC,CACD;EACA,GAAIJ;CACJ,CAAA;AAEH,CACD;AACA,EAAgB,cAAc;AAU9B,SAASU,EAAgB,EAAE,WAAQ,SAAS,cAAW,aAAU,GAAGV,KAA+B;CAClG,OACC,kBAAC,OAAD;EACC,aAAWW,MAAU,QAAQ,0BAA0B;EACvD,WAAWR,EACV,iIACAQ,MAAU,UAAU,gCAAgC,8BACpDP,CACD;EACA,GAAIJ;EAEH;CACG,CAAA;AAEP;AACA,EAAgB,cAAc;AAI9B,SAASY,EAAiB,EAAE,cAAW,aAAU,GAAGZ,KAAgC;CACnF,OACC,kBAAC,OAAD;EACC,aAAU;EACV,WAAWG,EACV,oHACAC,CACD;EACA,GAAIJ;EAEJ,UAAA,kBAAC,QAAD;GAAM,WAAU;GAAY;EAAe,CAAA;CACvC,CAAA;AAEP;AACA,EAAiB,cAAc;AA8B/B,IAAMa,IAAmBhB,EAAM,YAC7B,EAAE,cAAW,aAAU,SAAS,UAAO,QAAQ,aAAU,GAAGG,KAAS,MAAQ;CAC7E,IAAMQ,IAAgBX,EAAM,WAAWC,CAAkB;CACzD,OACC,kBAACgB,GAAD;EACM;EACI;EACH;EACN,UAAUb,KAAYO;EACtB,WAAWL,EAAG,kDAAkDC,CAAS;EACzE,GAAIJ;CACJ,CAAA;AAEH,CACD;AACA,EAAiB,cAAc;AAE/B,IAAae,IAAa,OAAO,OAAOhB,GAAgB;CACvD,OAAOQ;CACP,OAAOG;CACP,QAAQE;CACR,QAAQC;AACT,CAAC"}

package/dist/components/input.js

@@ -6,9 +6,9 @@ import * as r from "react";
 import { jsx as i } from "react/jsx-runtime";
 //#region src/components/input.tsx
 var a = {
-	sm: "h-8 px-2.5 py-1.5 text-xs",
-	default: "h-9 px-3 py-2 text-sm",
-	lg: "h-10 px-4 py-2 text-base"
+	sm: "basalt-action basalt-action-sm",
+	default: "basalt-action",
+	lg: "basalt-action basalt-action-lg"
 }, o = {
 	"data-1p-ignore": "true",
 	"data-bwignore": "true",
@@ -16,7 +16,7 @@ var a = {
 	"data-lpignore": "true"
 }, s = r.forwardRef(({ className: r, type: s, size: c = "default", passwordManagerIgnore: l = !1, ...u }, d) => /* @__PURE__ */ i("input", {
 	type: s,
-	className: t(e("flex w-full text-basalt-foreground shadow-xs file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-basalt-muted-foreground disabled:cursor-not-allowed disabled:border-transparent disabled:text-basalt-muted-foreground/40", a[c], n, "aria-invalid:border-basalt-destructive aria-invalid:focus-visible:border-basalt-destructive", l && "keeper-ignore", r)),
+	className: t(e("flex w-full text-basalt-foreground shadow-xs file:border-0 file:bg-transparent file:text-basalt-base file:font-medium placeholder:text-basalt-muted-foreground disabled:cursor-not-allowed disabled:border-transparent disabled:text-basalt-muted-foreground/40", a[c], n, "aria-invalid:border-basalt-destructive aria-invalid:focus-visible:border-basalt-destructive", l && "keeper-ignore", r)),
 	ref: d,
 	...u,
 	...l ? o : {}

package/dist/components/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","names":["React","INPUT_SIZE_CLASS","PASSWORD_MANAGER_MARKERS","Input","props","controlSurfaceClass","cn","size","FOCUS_BORDER","passwordManagerIgnore","className"],"sources":["../../src/components/input.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { controlSurfaceClass } from \"../utils/control-surface\";\nimport { FOCUS_BORDER } from \"./overlay\";\n\nexport type InputSize = \"sm\" | \"default\" | \"lg\";\n\nconst INPUT_SIZE_CLASS: Record<InputSize, string> = {\n\tsm: \"h-8 px-2.5 py-1.5 text-xs\",\n\tdefault: \"h-9 px-3 py-2 text-sm\",\n\tlg: \"h-10 px-4 py-2 text-base\",\n};\n\nconst PASSWORD_MANAGER_MARKERS = {\n\t\"data-1p-ignore\": \"true\",\n\t\"data-bwignore\": \"true\",\n\t\"data-form-type\": \"other\",\n\t\"data-lpignore\": \"true\",\n} as const;\n\nexport type InputProps = Omit<React.ComponentProps<\"input\">, \"type\" | \"size\"> & {\n\t/**\n\t * The type of input control to render.\n\t */\n\ttype?: React.HTMLInputTypeAttribute;\n\t/**\n\t * The visual size of the input.\n\t * @default default\n\t */\n\tsize?: InputSize;\n\t/**\n\t * Ignore password managers on this field.\n\t * @default false\n\t */\n\tpasswordManagerIgnore?: boolean;\n};\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n\t({ className, type, size = \"default\", passwordManagerIgnore = false, ...props }, ref) => (\n\t\t<input\n\t\t\ttype={type}\n\t\t\tclassName={controlSurfaceClass(\n\t\t\t\tcn(\n\t\t\t\t\t\"flex w-full text-basalt-foreground shadow-xs file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-basalt-muted-foreground disabled:cursor-not-allowed disabled:border-transparent disabled:text-basalt-muted-foreground/40\",\n\t\t\t\t\tINPUT_SIZE_CLASS[size],\n\t\t\t\t\tFOCUS_BORDER,\n\t\t\t\t\t\"aria-invalid:border-basalt-destructive aria-invalid:focus-visible:border-basalt-destructive\",\n\t\t\t\t\tpasswordManagerIgnore && \"keeper-ignore\",\n\t\t\t\t\tclassName,\n\t\t\t\t),\n\t\t\t)}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t\t{...(passwordManagerIgnore ? PASSWORD_MANAGER_MARKERS : {})}\n\t\t/>\n\t),\n);\nInput.displayName = \"Input\";\n"],"mappings":";;;;;;;AAOA,IAAMC,IAA8C;CACnD,IAAI;CACJ,SAAS;CACT,IAAI;AACL,GAEMC,IAA2B;CAChC,kBAAkB;CAClB,iBAAiB;CACjB,kBAAkB;CAClB,iBAAiB;AAClB,GAmBaC,IAAQH,EAAM,YACzB,EAAE,cAAW,SAAM,UAAO,WAAW,2BAAwB,IAAO,GAAGI,KAAS,MAChF,kBAAC,SAAD;CACO;CACN,WAAWC,EACVC,EACC,0PACAL,EAAiBM,IACjBC,GACA,+FACAC,KAAyB,iBACzBC,CACD,CACD;CACK;CACL,GAAIN;CACJ,GAAKK,IAAwBP,IAA2B,CAAC;AACzD,CAAA,CAEH;AACA,EAAM,cAAc"}
+{"version":3,"file":"input.js","names":["React","INPUT_SIZE_CLASS","PASSWORD_MANAGER_MARKERS","Input","props","controlSurfaceClass","cn","size","FOCUS_BORDER","passwordManagerIgnore","className"],"sources":["../../src/components/input.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { controlSurfaceClass } from \"../utils/control-surface\";\nimport { FOCUS_BORDER } from \"./overlay\";\n\nexport type InputSize = \"sm\" | \"default\" | \"lg\";\n\nconst INPUT_SIZE_CLASS: Record<InputSize, string> = {\n\tsm: \"basalt-action basalt-action-sm\",\n\tdefault: \"basalt-action\",\n\tlg: \"basalt-action basalt-action-lg\",\n};\n\nconst PASSWORD_MANAGER_MARKERS = {\n\t\"data-1p-ignore\": \"true\",\n\t\"data-bwignore\": \"true\",\n\t\"data-form-type\": \"other\",\n\t\"data-lpignore\": \"true\",\n} as const;\n\nexport type InputProps = Omit<React.ComponentProps<\"input\">, \"type\" | \"size\"> & {\n\t/**\n\t * The type of input control to render.\n\t */\n\ttype?: React.HTMLInputTypeAttribute;\n\t/**\n\t * The visual size of the input.\n\t * @default default\n\t */\n\tsize?: InputSize;\n\t/**\n\t * Ignore password managers on this field.\n\t * @default false\n\t */\n\tpasswordManagerIgnore?: boolean;\n};\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n\t({ className, type, size = \"default\", passwordManagerIgnore = false, ...props }, ref) => (\n\t\t<input\n\t\t\ttype={type}\n\t\t\tclassName={controlSurfaceClass(\n\t\t\t\tcn(\n\t\t\t\t\t\"flex w-full text-basalt-foreground shadow-xs file:border-0 file:bg-transparent file:text-basalt-base file:font-medium placeholder:text-basalt-muted-foreground disabled:cursor-not-allowed disabled:border-transparent disabled:text-basalt-muted-foreground/40\",\n\t\t\t\t\tINPUT_SIZE_CLASS[size],\n\t\t\t\t\tFOCUS_BORDER,\n\t\t\t\t\t\"aria-invalid:border-basalt-destructive aria-invalid:focus-visible:border-basalt-destructive\",\n\t\t\t\t\tpasswordManagerIgnore && \"keeper-ignore\",\n\t\t\t\t\tclassName,\n\t\t\t\t),\n\t\t\t)}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t\t{...(passwordManagerIgnore ? PASSWORD_MANAGER_MARKERS : {})}\n\t\t/>\n\t),\n);\nInput.displayName = \"Input\";\n"],"mappings":";;;;;;;AAOA,IAAMC,IAA8C;CACnD,IAAI;CACJ,SAAS;CACT,IAAI;AACL,GAEMC,IAA2B;CAChC,kBAAkB;CAClB,iBAAiB;CACjB,kBAAkB;CAClB,iBAAiB;AAClB,GAmBaC,IAAQH,EAAM,YACzB,EAAE,cAAW,SAAM,UAAO,WAAW,2BAAwB,IAAO,GAAGI,KAAS,MAChF,kBAAC,SAAD;CACO;CACN,WAAWC,EACVC,EACC,mQACAL,EAAiBM,IACjBC,GACA,+FACAC,KAAyB,iBACzBC,CACD,CACD;CACK;CACL,GAAIN;CACJ,GAAKK,IAAwBP,IAA2B,CAAC;AACzD,CAAA,CAEH;AACA,EAAM,cAAc"}

package/dist/components/label.js

@@ -9,7 +9,7 @@ import * as u from "@radix-ui/react-label";
 //#region src/components/label.tsx
 var d = o.forwardRef(({ className: o, children: d, showOptional: f = !1, tooltip: p, ...m }, h) => /* @__PURE__ */ l(u.Root, {
 	ref: h,
-	className: e(t, "inline-flex items-center gap-1 text-sm font-medium leading-none text-basalt-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70", o),
+	className: e(t, "inline-flex items-center gap-basalt-space-sm text-basalt-base font-medium leading-basalt-tight text-basalt-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70", o),
 	...m,
 	children: [
 		d,
@@ -22,8 +22,8 @@ var d = o.forwardRef(({ className: o, children: d, showOptional: f = !1, tooltip
 			children: /* @__PURE__ */ c("button", {
 				type: "button",
 				"aria-label": "More information",
-				className: "inline-flex size-4 shrink-0 items-center justify-center text-basalt-muted-foreground hover:text-basalt-foreground",
-				children: /* @__PURE__ */ c(s, { className: "size-3.5" })
+				className: "inline-flex size-basalt-icon-lg shrink-0 items-center justify-center text-basalt-muted-foreground hover:text-basalt-foreground",
+				children: /* @__PURE__ */ c(s, { className: "size-basalt-icon" })
 			})
 		}), /* @__PURE__ */ c(r, { children: p })] }) }) : null
 	]

package/dist/components/label.js.map

@@ -1 +1 @@
-{"version":3,"file":"label.js","names":["React","LabelPrimitive","Label","props","cn","BASALT_UI_CLASS","className","children","showOptional","tooltip","TooltipProvider","Tooltip","TooltipTrigger","Info","TooltipContent"],"sources":["../../src/components/label.tsx"],"sourcesContent":["import * as LabelPrimitive from \"@radix-ui/react-label\";\nimport { Info } from \"lucide-react\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"./tooltip\";\n\nexport type LabelProps = React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & {\n\t/**\n\t * Show gray (optional) after the label.\n\t * @default false\n\t */\n\tshowOptional?: boolean;\n\t/** Info icon with hover text. */\n\ttooltip?: React.ReactNode;\n};\n\nexport const Label = React.forwardRef<React.ElementRef<typeof LabelPrimitive.Root>, LabelProps>(\n\t({ className, children, showOptional = false, tooltip, ...props }, ref) => (\n\t\t<LabelPrimitive.Root\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\t\"inline-flex items-center gap-1 text-sm font-medium leading-none text-basalt-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t\t{showOptional ? (\n\t\t\t\t<span className=\"font-normal text-basalt-muted-foreground\">(optional)</span>\n\t\t\t) : null}\n\t\t\t{tooltip ? (\n\t\t\t\t<TooltipProvider>\n\t\t\t\t\t<Tooltip>\n\t\t\t\t\t\t<TooltipTrigger asChild>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\taria-label=\"More information\"\n\t\t\t\t\t\t\t\tclassName=\"inline-flex size-4 shrink-0 items-center justify-center text-basalt-muted-foreground hover:text-basalt-foreground\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Info className=\"size-3.5\" />\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</TooltipTrigger>\n\t\t\t\t\t\t<TooltipContent>{tooltip}</TooltipContent>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t</TooltipProvider>\n\t\t\t) : null}\n\t\t</LabelPrimitive.Root>\n\t),\n);\nLabel.displayName = LabelPrimitive.Root.displayName;\n"],"mappings":";;;;;;;;;AAiBA,IAAaE,IAAQF,EAAM,YACzB,EAAE,cAAW,aAAU,kBAAe,IAAO,YAAS,GAAGG,KAAS,MAClE,kBAACF,EAAe,MAAhB;CACM;CACL,WAAWG,EACVC,GACA,oJACAC,CACD;CACA,GAAIH;CAPL,UAAA;EASEI;EACAC,IACA,kBAAC,QAAD;GAAM,WAAU;GAA2C,UAAA;EAAgB,CAAA,IACxE;EACHC,IACA,kBAACC,GAAD,EAAA,UACC,kBAACC,GAAD,EAAA,UAAA,CACC,kBAACC,GAAD;GAAgB,SAAA;GACf,UAAA,kBAAC,UAAD;IACC,MAAK;IACL,cAAW;IACX,WAAU;IAEV,UAAA,kBAACC,GAAD,EAAM,WAAU,WAAY,CAAA;GACrB,CAAA;EACO,CAAA,GAChB,kBAACC,GAAD,EAAA,UAAiBL,EAAwB,CAAA,CACjC,EAAA,CAAA,EACO,CAAA,IACd;CACgB;AAEvB,CAAA,CAAA;AACA,EAAM,cAAcR,EAAe,KAAK"}
+{"version":3,"file":"label.js","names":["React","LabelPrimitive","Label","props","cn","BASALT_UI_CLASS","className","children","showOptional","tooltip","TooltipProvider","Tooltip","TooltipTrigger","Info","TooltipContent"],"sources":["../../src/components/label.tsx"],"sourcesContent":["import * as LabelPrimitive from \"@radix-ui/react-label\";\nimport { Info } from \"lucide-react\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"./tooltip\";\n\nexport type LabelProps = React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & {\n\t/**\n\t * Show gray (optional) after the label.\n\t * @default false\n\t */\n\tshowOptional?: boolean;\n\t/** Info icon with hover text. */\n\ttooltip?: React.ReactNode;\n};\n\nexport const Label = React.forwardRef<React.ElementRef<typeof LabelPrimitive.Root>, LabelProps>(\n\t({ className, children, showOptional = false, tooltip, ...props }, ref) => (\n\t\t<LabelPrimitive.Root\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\t\"inline-flex items-center gap-basalt-space-sm text-basalt-base font-medium leading-basalt-tight text-basalt-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t\t{showOptional ? (\n\t\t\t\t<span className=\"font-normal text-basalt-muted-foreground\">(optional)</span>\n\t\t\t) : null}\n\t\t\t{tooltip ? (\n\t\t\t\t<TooltipProvider>\n\t\t\t\t\t<Tooltip>\n\t\t\t\t\t\t<TooltipTrigger asChild>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\taria-label=\"More information\"\n\t\t\t\t\t\t\t\tclassName=\"inline-flex size-basalt-icon-lg shrink-0 items-center justify-center text-basalt-muted-foreground hover:text-basalt-foreground\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Info className=\"size-basalt-icon\" />\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</TooltipTrigger>\n\t\t\t\t\t\t<TooltipContent>{tooltip}</TooltipContent>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t</TooltipProvider>\n\t\t\t) : null}\n\t\t</LabelPrimitive.Root>\n\t),\n);\nLabel.displayName = LabelPrimitive.Root.displayName;\n"],"mappings":";;;;;;;;;AAiBA,IAAaE,IAAQF,EAAM,YACzB,EAAE,cAAW,aAAU,kBAAe,IAAO,YAAS,GAAGG,KAAS,MAClE,kBAACF,EAAe,MAAhB;CACM;CACL,WAAWG,EACVC,GACA,mLACAC,CACD;CACA,GAAIH;CAPL,UAAA;EASEI;EACAC,IACA,kBAAC,QAAD;GAAM,WAAU;GAA2C,UAAA;EAAgB,CAAA,IACxE;EACHC,IACA,kBAACC,GAAD,EAAA,UACC,kBAACC,GAAD,EAAA,UAAA,CACC,kBAACC,GAAD;GAAgB,SAAA;GACf,UAAA,kBAAC,UAAD;IACC,MAAK;IACL,cAAW;IACX,WAAU;IAEV,UAAA,kBAACC,GAAD,EAAM,WAAU,mBAAoB,CAAA;GAC7B,CAAA;EACO,CAAA,GAChB,kBAACC,GAAD,EAAA,UAAiBL,EAAwB,CAAA,CACjC,EAAA,CAAA,EACO,CAAA,IACd;CACgB;AAEvB,CAAA,CAAA;AACA,EAAM,cAAcR,EAAe,KAAK"}

package/dist/components/layer-card.d.ts

@@ -1,9 +1,10 @@
 import { type HTMLAttributes, type ReactNode } from "react";
 declare const PADDING_CLASSES: {
     readonly none: "";
-    readonly sm: "p-3";
-    readonly md: "p-4";
-    readonly lg: "p-6";
+    readonly sm: "p-basalt-card-sm";
+    readonly md: "p-basalt-card";
+    readonly lg: "p-basalt-card-lg";
+    readonly xl: "p-basalt-card-xl";
 };
 export type LayerCardPadding = keyof typeof PADDING_CLASSES;
 export type LayerCardProps = Omit<HTMLAttributes<HTMLDivElement>, "className"> & {
@@ -23,6 +24,10 @@ export type LayerCardProps = Omit<HTMLAttributes<HTMLDivElement>, "className"> &
     padding?: LayerCardPadding;
 };
 export type LayerCardSectionProps = HTMLAttributes<HTMLDivElement>;
+export type LayerCardHeaderProps = LayerCardSectionProps & {
+    /** Apply header insets to one child, such as a CollapsibleTrigger, without another wrapper. @default false */
+    asChild?: boolean;
+};
 export type LayerCardWellProps = LayerCardSectionProps & {
     /**
      * Draw a hairline ring on a nested well.
@@ -60,7 +65,7 @@ export type LayerCardEmptyProps = Omit<HTMLAttributes<HTMLDivElement>, "title" |
      */
     children?: ReactNode;
 };
-declare function LayerCardHeader({ className, ...props }: LayerCardSectionProps): import("react").JSX.Element;
+declare function LayerCardHeader({ className, asChild, ...props }: LayerCardHeaderProps): import("react").JSX.Element;
 declare function LayerCardBody({ className, ...props }: LayerCardSectionProps): import("react").JSX.Element;
 declare function LayerCardWell({ className, outlined, ...props }: LayerCardWellProps): import("react").JSX.Element;
 declare function LayerCardPrimary(props: LayerCardWellProps): import("react").JSX.Element;