@nocoo/basalt 2.2.0 → 3.1.0

package/dist/components/editable-nav-item.js

@@ -1,90 +1,95 @@
 "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 { Link as r } from "./link.js";
-import { InlineEditable as i } from "./inline-editable.js";
-import { useId as a, useLayoutEffect as o, useRef as s, useState as c } from "react";
-import { Folder as l, Pencil as u } from "lucide-react";
-import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+import { FOCUS_INSET as n } from "./overlay.js";
+import { Button as r } from "./button.js";
+import { Link as i } from "./link.js";
+import { NAV_ROW_CLASS as a } from "../utils/navigation.js";
+import { InlineEditable as o } from "./inline-editable.js";
+import { useId as s, useLayoutEffect as c, useRef as l, useState as u } from "react";
+import { Folder as d, Pencil as f } from "lucide-react";
+import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
 //#region src/components/editable-nav-item.tsx
-function m({ label: l, href: m, onSelect: h, selected: g = !1, icon: _, count: v, actions: y, onRename: b, disabled: x = !1, renameLabel: S = "Rename", saveLabel: C = "Save", cancelLabel: w = "Cancel", className: T }) {
-	let [E, D] = c(!1), O = a(), k = s(null), A = s(!1);
-	o(() => {
-		!E && A.current && (A.current = !1, k.current?.focus());
-	}, [E]);
-	let j = /* @__PURE__ */ p(d, { children: [
-		/* @__PURE__ */ f("span", {
-			className: "shrink-0",
+function g({ label: d, href: g, onSelect: _, selected: v = !1, icon: y, count: b, actions: x, onRename: S, disabled: C = !1, renameLabel: w = "Rename", saveLabel: T = "Save", cancelLabel: E = "Cancel", className: D }) {
+	let [O, k] = u(!1), A = s(), j = l(null), M = l(!1);
+	c(() => {
+		!O && M.current && (M.current = !1, j.current?.focus());
+	}, [O]);
+	let N = /* @__PURE__ */ h(p, { children: [
+		y && /* @__PURE__ */ m("span", {
+			className: "flex size-basalt-icon-lg shrink-0 items-center justify-center [&>svg]:size-basalt-icon-lg",
 			"aria-hidden": "true",
-			children: _
+			children: y
 		}),
-		/* @__PURE__ */ f("span", {
+		/* @__PURE__ */ m("span", {
 			className: "min-w-0 flex-1 truncate text-left",
-			children: l
+			children: d
 		}),
-		v != null && /* @__PURE__ */ p("span", {
-			id: O,
-			className: "shrink-0 text-xs tabular-nums text-basalt-muted-foreground",
-			children: [" ", v]
+		b != null && /* @__PURE__ */ h("span", {
+			id: A,
+			className: "shrink-0 text-basalt-sm tabular-nums text-basalt-muted-foreground",
+			children: [" ", b]
 		})
 	] });
-	return /* @__PURE__ */ f("div", {
-		className: e(t, "min-w-0 rounded-basalt-md", g && "bg-basalt-accent", T),
-		children: E && b ? /* @__PURE__ */ f(i, {
-			className: "p-2",
-			label: `${S} ${l}`,
-			value: l,
+	return /* @__PURE__ */ m("div", {
+		"data-basalt-hover-item": O ? void 0 : "",
+		"data-hover-selected": v && !O,
+		"data-disabled": C ? "" : void 0,
+		className: e(t, "basalt-nav-item min-w-0 shrink-0 rounded-basalt-md data-disabled:cursor-default data-disabled:hover:bg-transparent", D),
+		children: O && S ? /* @__PURE__ */ m(o, {
+			className: "p-basalt-space-lg",
+			label: `${w} ${d}`,
+			value: d,
 			editing: !0,
-			onSave: b,
-			saveLabel: C,
-			cancelLabel: w,
-			disabled: x,
+			onSave: S,
+			saveLabel: T,
+			cancelLabel: E,
+			disabled: C,
 			onEditingChange: (e, t) => {
-				A.current = !e && t !== "blur", D(e);
+				M.current = !e && t !== "blur", k(e);
 			}
-		}) : /* @__PURE__ */ p("div", {
-			className: "flex min-w-0 items-center gap-1",
+		}) : /* @__PURE__ */ h("div", {
+			className: "flex min-w-0 items-center gap-basalt-nav-gap",
 			children: [
-				/* @__PURE__ */ f(n, {
-					asChild: !!m,
+				/* @__PURE__ */ m(r, {
+					asChild: !!g,
 					variant: "ghost",
-					disabled: x,
-					className: "min-w-0 flex-1 justify-start gap-2",
-					"aria-current": g ? "page" : void 0,
-					"aria-label": l,
-					"aria-describedby": v == null ? void 0 : O,
-					onClick: h,
-					children: m ? /* @__PURE__ */ f(r, {
-						href: m,
+					disabled: C,
+					className: e(a, n, "h-auto flex-1 justify-start hover:bg-transparent hover:border-transparent focus-visible:ring-offset-0"),
+					"aria-current": v ? "page" : void 0,
+					"aria-label": d,
+					"aria-describedby": b == null ? void 0 : A,
+					onClick: _,
+					children: g ? /* @__PURE__ */ m(i, {
+						href: g,
 						className: "text-inherit no-underline hover:no-underline",
-						children: j
-					}) : j
+						children: N
+					}) : N
 				}),
-				b && /* @__PURE__ */ f(n, {
-					ref: k,
+				S && /* @__PURE__ */ m(r, {
+					ref: j,
 					size: "icon",
 					variant: "ghost",
-					disabled: x,
-					"aria-label": `${S} ${l}`,
-					onClick: () => D(!0),
-					children: /* @__PURE__ */ f(u, {})
+					disabled: C,
+					"aria-label": `${w} ${d}`,
+					onClick: () => k(!0),
+					children: /* @__PURE__ */ m(f, {})
 				}),
-				y && /* @__PURE__ */ f("div", {
-					className: "flex shrink-0 items-center gap-1",
-					children: y
+				x && /* @__PURE__ */ m("div", {
+					className: "flex shrink-0 items-center gap-basalt-space-sm",
+					children: x
 				})
 			]
 		})
 	});
 }
-function h({ icon: e = /* @__PURE__ */ f(l, { className: "size-4" }), ...t }) {
-	return /* @__PURE__ */ f(m, {
+function _({ icon: e = /* @__PURE__ */ m(d, { className: "size-basalt-icon-lg" }), ...t }) {
+	return /* @__PURE__ */ m(g, {
 		icon: e,
 		...t
 	});
 }
 //#endregion
-export { m as EditableNavItem, h as FolderNavItem };
+export { g as EditableNavItem, _ as FolderNavItem };
 
 //# sourceMappingURL=editable-nav-item.js.map

package/dist/components/editable-nav-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"editable-nav-item.js","names":["_Fragment","Fragment$1","EditableNavItem","editing","setEditing","useState","countId","useId","rename","useRef","restore","content","icon","label","count","cn","BASALT_UI_CLASS","selected","className","onRename","InlineEditable","renameLabel","next","reason","Button","href","onSelect","Link","Pencil","actions","FolderNavItem","Folder","props"],"sources":["../../src/components/editable-nav-item.tsx"],"sourcesContent":["import { Folder, Pencil } from \"lucide-react\";\nimport { type ReactNode, useId, useLayoutEffect, useRef, useState } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { Button } from \"./button\";\nimport { InlineEditable } from \"./inline-editable\";\nimport { Link } from \"./link\";\n\nexport interface EditableNavItemProps {\n\t/** Current display name. */\n\tlabel: string;\n\t/** Application route, interpreted by LinkProvider. */\n\thref?: string;\n\t/** Navigation/selection request. */\n\tonSelect?: () => void;\n\t/** Selected location. @default false */\n\tselected?: boolean;\n\t/** Caller-owned leading icon. */\n\ticon?: ReactNode;\n\t/** Caller-formatted count or status. */\n\tcount?: ReactNode;\n\t/** Separate row actions, never nested inside the navigation button/link. */\n\tactions?: ReactNode;\n\t/** Enable renaming; rejected promises keep the editor and draft available. */\n\tonRename?: (name: string) => void | Promise<void>;\n\t/** Disable navigation and renaming. Application action slots retain their own permissions. @default false */\n\tdisabled?: boolean;\n\t/** Rename action prefix. @default \"Rename\" */\n\trenameLabel?: string;\n\t/** Accessible save action. @default \"Save\" */\n\tsaveLabel?: string;\n\t/** Accessible cancel action. @default \"Cancel\" */\n\tcancelLabel?: string;\n\t/** Additional root classes. */\n\tclassName?: string;\n}\nexport function EditableNavItem({\n\tlabel,\n\thref,\n\tonSelect,\n\tselected = false,\n\ticon,\n\tcount,\n\tactions,\n\tonRename,\n\tdisabled = false,\n\trenameLabel = \"Rename\",\n\tsaveLabel = \"Save\",\n\tcancelLabel = \"Cancel\",\n\tclassName,\n}: EditableNavItemProps) {\n\tconst [editing, setEditing] = useState(false);\n\tconst countId = useId();\n\tconst rename = useRef<HTMLButtonElement>(null);\n\tconst restore = useRef(false);\n\tuseLayoutEffect(() => {\n\t\tif (!editing && restore.current) {\n\t\t\trestore.current = false;\n\t\t\trename.current?.focus();\n\t\t}\n\t}, [editing]);\n\tconst content = (\n\t\t<>\n\t\t\t<span className=\"shrink-0\" aria-hidden=\"true\">\n\t\t\t\t{icon}\n\t\t\t</span>\n\t\t\t<span className=\"min-w-0 flex-1 truncate text-left\">{label}</span>\n\t\t\t{count != null && (\n\t\t\t\t<span id={countId} className=\"shrink-0 text-xs tabular-nums text-basalt-muted-foreground\">\n\t\t\t\t\t{\" \"}\n\t\t\t\t\t{count}\n\t\t\t\t</span>\n\t\t\t)}\n\t\t</>\n\t);\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\t\"min-w-0 rounded-basalt-md\",\n\t\t\t\tselected && \"bg-basalt-accent\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t{editing && onRename ? (\n\t\t\t\t<InlineEditable\n\t\t\t\t\tclassName=\"p-2\"\n\t\t\t\t\tlabel={`${renameLabel} ${label}`}\n\t\t\t\t\tvalue={label}\n\t\t\t\t\tediting\n\t\t\t\t\tonSave={onRename}\n\t\t\t\t\tsaveLabel={saveLabel}\n\t\t\t\t\tcancelLabel={cancelLabel}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\tonEditingChange={(next, reason) => {\n\t\t\t\t\t\trestore.current = !next && reason !== \"blur\";\n\t\t\t\t\t\tsetEditing(next);\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<div className=\"flex min-w-0 items-center gap-1\">\n\t\t\t\t\t<Button\n\t\t\t\t\t\tasChild={!!href}\n\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\tclassName=\"min-w-0 flex-1 justify-start gap-2\"\n\t\t\t\t\t\taria-current={selected ? \"page\" : undefined}\n\t\t\t\t\t\taria-label={label}\n\t\t\t\t\t\taria-describedby={count != null ? countId : undefined}\n\t\t\t\t\t\tonClick={onSelect}\n\t\t\t\t\t>\n\t\t\t\t\t\t{href ? (\n\t\t\t\t\t\t\t<Link href={href} className=\"text-inherit no-underline hover:no-underline\">\n\t\t\t\t\t\t\t\t{content}\n\t\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\tcontent\n\t\t\t\t\t\t)}\n\t\t\t\t\t</Button>\n\t\t\t\t\t{onRename && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tref={rename}\n\t\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t\taria-label={`${renameLabel} ${label}`}\n\t\t\t\t\t\t\tonClick={() => setEditing(true)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Pencil />\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t)}\n\t\t\t\t\t{actions && <div className=\"flex shrink-0 items-center gap-1\">{actions}</div>}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n\nexport type FolderNavItemProps = EditableNavItemProps;\n/** Folder presentation with an overridable icon; no tree, router or permission model. */\nexport function FolderNavItem({\n\ticon = <Folder className=\"size-4\" />,\n\t...props\n}: FolderNavItemProps) {\n\treturn <EditableNavItem icon={icon} {...props} />;\n}\n"],"mappings":";;;;;;;;;;AAoCA,SAAgBE,EAAgB,EAC/B,UACA,SACA,aACA,cAAW,IACX,SACA,UACA,YACA,aACA,cAAW,IACX,iBAAc,UACd,eAAY,QACZ,iBAAc,UACd,gBACwB;CACxB,IAAM,CAACC,GAASC,KAAcC,EAAS,EAAK,GACtCC,IAAUC,EAAM,GAChBC,IAASC,EAA0B,IAAI,GACvCC,IAAUD,EAAO,EAAK;CAC5B,QAAsB;EACrB,AAAI,CAACN,KAAWO,EAAQ,YACvB,EAAQ,UAAU,IAClBF,EAAO,SAAS,MAAM;CAExB,GAAG,CAACL,CAAO,CAAC;CACZ,IAAMQ,IACL,kBAAAX,GAAA,EAAA,UAAA;EACC,kBAAC,QAAD;GAAM,WAAU;GAAW,eAAY;GACrC,UAAAY;EACI,CAAA;EACN,kBAAC,QAAD;GAAM,WAAU;GAAqC,UAAAC;EAAY,CAAA;EAChEC,KAAS,QACT,kBAAC,QAAD;GAAM,IAAIR;GAAS,WAAU;GAA7B,UAAA,CACE,KACAQ,CACI;;CAEN,EAAA,CAAA;CAEH,OACC,kBAAC,OAAD;EACC,WAAWC,EACVC,GACA,6BACAC,KAAY,oBACZC,CACD;EAEC,UAAAf,KAAWgB,IACX,kBAACC,GAAD;GACC,WAAU;GACV,OAAO,GAAGC,EAAY,GAAGR;GACzB,OAAOA;GACP,SAAA;GACA,QAAQM;GACG;GACE;GACH;GACV,kBAAkB,GAAM,MAAW;IAElC,AADA,EAAQ,UAAU,CAACG,KAAQC,MAAW,QACtCnB,EAAWkB,CAAI;GAChB;EACA,CAAA,IAED,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IACC,kBAACE,GAAD;KACC,SAAS,CAAC,CAACC;KACX,SAAQ;KACE;KACV,WAAU;KACV,gBAAcR,IAAW,SAAS,KAAA;KAClC,cAAYJ;KACZ,oBAAkBC,KAAS,OAAiB,KAAA,IAAVR;KAClC,SAASoB;KAER,UAAAD,IACA,kBAACE,GAAD;MAAY;MAAM,WAAU;MAC1B,UAAAhB;KACI,CAAA,IAENA;IAEM,CAAA;IACPQ,KACA,kBAACK,GAAD;KACC,KAAKhB;KACL,MAAK;KACL,SAAQ;KACE;KACV,cAAY,GAAGa,EAAY,GAAGR;KAC9B,eAAeT,EAAW,EAAI;KAE9B,UAAA,kBAACwB,GAAD,CAAS,CAAA;IACF,CAAA;IAERC,KAAW,kBAAC,OAAD;KAAK,WAAU;KAAoC,UAAAA;IAAa,CAAA;GACxE;;CAEF,CAAA;AAEP;AAIA,SAAgBC,EAAc,EAC7B,UAAO,kBAACC,GAAD,EAAQ,WAAU,SAAU,CAAA,GACnC,GAAGC,KACmB;CACtB,OAAO,kBAAC9B,GAAD;EAAuB;EAAM,GAAI8B;CAAQ,CAAA;AACjD"}
+{"version":3,"file":"editable-nav-item.js","names":["_Fragment","Fragment$1","EditableNavItem","editing","setEditing","useState","countId","useId","rename","useRef","restore","content","icon","label","count","selected","disabled","cn","BASALT_UI_CLASS","className","onRename","InlineEditable","renameLabel","next","reason","Button","href","NAV_ROW_CLASS","FOCUS_INSET","onSelect","Link","Pencil","actions","FolderNavItem","Folder","props"],"sources":["../../src/components/editable-nav-item.tsx"],"sourcesContent":["import { Folder, Pencil } from \"lucide-react\";\nimport { type ReactNode, useId, useLayoutEffect, useRef, useState } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { NAV_ROW_CLASS } from \"../utils/navigation\";\nimport { Button } from \"./button\";\nimport { InlineEditable } from \"./inline-editable\";\nimport { Link } from \"./link\";\nimport { FOCUS_INSET } from \"./overlay\";\n\nexport interface EditableNavItemProps {\n\t/** Current display name. */\n\tlabel: string;\n\t/** Application route, interpreted by LinkProvider. */\n\thref?: string;\n\t/** Navigation/selection request. */\n\tonSelect?: () => void;\n\t/** Selected location. @default false */\n\tselected?: boolean;\n\t/** Caller-owned leading icon. */\n\ticon?: ReactNode;\n\t/** Caller-formatted count or status. */\n\tcount?: ReactNode;\n\t/** Separate row actions, never nested inside the navigation button/link. */\n\tactions?: ReactNode;\n\t/** Enable renaming; rejected promises keep the editor and draft available. */\n\tonRename?: (name: string) => void | Promise<void>;\n\t/** Disable navigation and renaming. Application action slots retain their own permissions. @default false */\n\tdisabled?: boolean;\n\t/** Rename action prefix. @default \"Rename\" */\n\trenameLabel?: string;\n\t/** Accessible save action. @default \"Save\" */\n\tsaveLabel?: string;\n\t/** Accessible cancel action. @default \"Cancel\" */\n\tcancelLabel?: string;\n\t/** Additional root classes. */\n\tclassName?: string;\n}\nexport function EditableNavItem({\n\tlabel,\n\thref,\n\tonSelect,\n\tselected = false,\n\ticon,\n\tcount,\n\tactions,\n\tonRename,\n\tdisabled = false,\n\trenameLabel = \"Rename\",\n\tsaveLabel = \"Save\",\n\tcancelLabel = \"Cancel\",\n\tclassName,\n}: EditableNavItemProps) {\n\tconst [editing, setEditing] = useState(false);\n\tconst countId = useId();\n\tconst rename = useRef<HTMLButtonElement>(null);\n\tconst restore = useRef(false);\n\tuseLayoutEffect(() => {\n\t\tif (!editing && restore.current) {\n\t\t\trestore.current = false;\n\t\t\trename.current?.focus();\n\t\t}\n\t}, [editing]);\n\tconst content = (\n\t\t<>\n\t\t\t{icon && (\n\t\t\t\t<span\n\t\t\t\t\tclassName=\"flex size-basalt-icon-lg shrink-0 items-center justify-center [&>svg]:size-basalt-icon-lg\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t>\n\t\t\t\t\t{icon}\n\t\t\t\t</span>\n\t\t\t)}\n\t\t\t<span className=\"min-w-0 flex-1 truncate text-left\">{label}</span>\n\t\t\t{count != null && (\n\t\t\t\t<span\n\t\t\t\t\tid={countId}\n\t\t\t\t\tclassName=\"shrink-0 text-basalt-sm tabular-nums text-basalt-muted-foreground\"\n\t\t\t\t>\n\t\t\t\t\t{\" \"}\n\t\t\t\t\t{count}\n\t\t\t\t</span>\n\t\t\t)}\n\t\t</>\n\t);\n\treturn (\n\t\t<div\n\t\t\tdata-basalt-hover-item={editing ? undefined : \"\"}\n\t\t\tdata-hover-selected={selected && !editing}\n\t\t\tdata-disabled={disabled ? \"\" : undefined}\n\t\t\tclassName={cn(\n\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\t\"basalt-nav-item min-w-0 shrink-0 rounded-basalt-md data-disabled:cursor-default data-disabled:hover:bg-transparent\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t{editing && onRename ? (\n\t\t\t\t<InlineEditable\n\t\t\t\t\tclassName=\"p-basalt-space-lg\"\n\t\t\t\t\tlabel={`${renameLabel} ${label}`}\n\t\t\t\t\tvalue={label}\n\t\t\t\t\tediting\n\t\t\t\t\tonSave={onRename}\n\t\t\t\t\tsaveLabel={saveLabel}\n\t\t\t\t\tcancelLabel={cancelLabel}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\tonEditingChange={(next, reason) => {\n\t\t\t\t\t\trestore.current = !next && reason !== \"blur\";\n\t\t\t\t\t\tsetEditing(next);\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<div className=\"flex min-w-0 items-center gap-basalt-nav-gap\">\n\t\t\t\t\t<Button\n\t\t\t\t\t\tasChild={!!href}\n\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\tNAV_ROW_CLASS,\n\t\t\t\t\t\t\tFOCUS_INSET,\n\t\t\t\t\t\t\t\"h-auto flex-1 justify-start hover:bg-transparent hover:border-transparent focus-visible:ring-offset-0\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t\taria-current={selected ? \"page\" : undefined}\n\t\t\t\t\t\taria-label={label}\n\t\t\t\t\t\taria-describedby={count != null ? countId : undefined}\n\t\t\t\t\t\tonClick={onSelect}\n\t\t\t\t\t>\n\t\t\t\t\t\t{href ? (\n\t\t\t\t\t\t\t<Link href={href} className=\"text-inherit no-underline hover:no-underline\">\n\t\t\t\t\t\t\t\t{content}\n\t\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\tcontent\n\t\t\t\t\t\t)}\n\t\t\t\t\t</Button>\n\t\t\t\t\t{onRename && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tref={rename}\n\t\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t\taria-label={`${renameLabel} ${label}`}\n\t\t\t\t\t\t\tonClick={() => setEditing(true)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Pencil />\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t)}\n\t\t\t\t\t{actions && (\n\t\t\t\t\t\t<div className=\"flex shrink-0 items-center gap-basalt-space-sm\">{actions}</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n\nexport type FolderNavItemProps = EditableNavItemProps;\n/** Folder presentation with an overridable icon; no tree, router or permission model. */\nexport function FolderNavItem({\n\ticon = <Folder className=\"size-basalt-icon-lg\" />,\n\t...props\n}: FolderNavItemProps) {\n\treturn <EditableNavItem icon={icon} {...props} />;\n}\n"],"mappings":";;;;;;;;;;;;AAsCA,SAAgBE,EAAgB,EAC/B,UACA,SACA,aACA,cAAW,IACX,SACA,UACA,YACA,aACA,cAAW,IACX,iBAAc,UACd,eAAY,QACZ,iBAAc,UACd,gBACwB;CACxB,IAAM,CAACC,GAASC,KAAcC,EAAS,EAAK,GACtCC,IAAUC,EAAM,GAChBC,IAASC,EAA0B,IAAI,GACvCC,IAAUD,EAAO,EAAK;CAC5B,QAAsB;EACrB,AAAI,CAACN,KAAWO,EAAQ,YACvB,EAAQ,UAAU,IAClBF,EAAO,SAAS,MAAM;CAExB,GAAG,CAACL,CAAO,CAAC;CACZ,IAAMQ,IACL,kBAAAX,GAAA,EAAA,UAAA;EACEY,KACA,kBAAC,QAAD;GACC,WAAU;GACV,eAAY;GAEX,UAAAA;EACI,CAAA;EAEP,kBAAC,QAAD;GAAM,WAAU;GAAqC,UAAAC;EAAY,CAAA;EAChEC,KAAS,QACT,kBAAC,QAAD;GACC,IAAIR;GACJ,WAAU;GAFX,UAAA,CAIE,KACAQ,CACI;;CAEN,EAAA,CAAA;CAEH,OACC,kBAAC,OAAD;EACC,0BAAwBX,IAAU,KAAA,IAAY;EAC9C,uBAAqBY,KAAY,CAACZ;EAClC,iBAAea,IAAW,KAAK,KAAA;EAC/B,WAAWC,EACVC,GACA,sHACAC,CACD;EAEC,UAAAhB,KAAWiB,IACX,kBAACC,GAAD;GACC,WAAU;GACV,OAAO,GAAGC,EAAY,GAAGT;GACzB,OAAOA;GACP,SAAA;GACA,QAAQO;GACG;GACE;GACH;GACV,kBAAkB,GAAM,MAAW;IAElC,AADA,EAAQ,UAAU,CAACG,KAAQC,MAAW,QACtCpB,EAAWmB,CAAI;GAChB;EACA,CAAA,IAED,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IACC,kBAACE,GAAD;KACC,SAAS,CAAC,CAACC;KACX,SAAQ;KACE;KACV,WAAWT,EACVU,GACAC,GACA,uGACD;KACA,gBAAcb,IAAW,SAAS,KAAA;KAClC,cAAYF;KACZ,oBAAkBC,KAAS,OAAiB,KAAA,IAAVR;KAClC,SAASuB;KAER,UAAAH,IACA,kBAACI,GAAD;MAAY;MAAM,WAAU;MAC1B,UAAAnB;KACI,CAAA,IAENA;IAEM,CAAA;IACPS,KACA,kBAACK,GAAD;KACC,KAAKjB;KACL,MAAK;KACL,SAAQ;KACE;KACV,cAAY,GAAGc,EAAY,GAAGT;KAC9B,eAAeT,EAAW,EAAI;KAE9B,UAAA,kBAAC2B,GAAD,CAAS,CAAA;IACF,CAAA;IAERC,KACA,kBAAC,OAAD;KAAK,WAAU;KAAkD,UAAAA;IAAa,CAAA;GAE3E;;CAEF,CAAA;AAEP;AAIA,SAAgBC,EAAc,EAC7B,UAAO,kBAACC,GAAD,EAAQ,WAAU,sBAAuB,CAAA,GAChD,GAAGC,KACmB;CACtB,OAAO,kBAACjC,GAAD;EAAuB;EAAM,GAAIiC;CAAQ,CAAA;AACjD"}

package/dist/components/empty.js

@@ -5,27 +5,27 @@ import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/components/empty.tsx
 function i({ title: i = "No results", description: a, icon: o, action: s, children: c, className: l, ...u }) {
 	return /* @__PURE__ */ r("div", {
-		className: e(t, "flex flex-col items-center gap-2 text-center", l),
+		className: e(t, "flex flex-col items-center gap-basalt-space-lg text-center", l),
 		...u,
 		children: [
 			o ? /* @__PURE__ */ n("div", {
-				className: "text-basalt-muted-foreground [&_svg]:size-8",
+				className: "text-basalt-muted-foreground [&_svg]:size-basalt-8",
 				children: o
 			}) : null,
 			/* @__PURE__ */ n("p", {
-				className: "text-sm font-medium text-basalt-foreground",
+				className: "text-basalt-base font-medium text-basalt-foreground",
 				children: i
 			}),
 			a ? /* @__PURE__ */ n("p", {
-				className: "text-xs text-basalt-muted-foreground",
+				className: "text-basalt-sm text-basalt-muted-foreground",
 				children: a
 			}) : null,
 			c == null ? null : /* @__PURE__ */ n("div", {
-				className: "text-xs text-basalt-muted-foreground",
+				className: "text-basalt-sm text-basalt-muted-foreground",
 				children: c
 			}),
 			s == null ? null : /* @__PURE__ */ n("div", {
-				className: "mt-2 flex items-center justify-center gap-2",
+				className: "mt-basalt-space-lg flex items-center justify-center gap-basalt-space-lg",
 				children: s
 			})
 		]

package/dist/components/empty.js.map

@@ -1 +1 @@
-{"version":3,"file":"empty.js","names":["Empty","props","cn","BASALT_UI_CLASS","className","icon","title","description","children","action"],"sources":["../../src/components/empty.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\n\nexport interface EmptyProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\" | \"children\"> {\n\t/**\n\t * Primary title text displayed in the empty state.\n\t *\n\t * @default \"No results\"\n\t */\n\ttitle?: string;\n\n\t/**\n\t * Secondary supporting description text rendered below the title.\n\t */\n\tdescription?: string;\n\n\t/**\n\t * Visual icon element rendered above the title.\n\t */\n\ticon?: ReactNode;\n\n\t/**\n\t * Interactive call-to-action element (e.g. Button or Link) rendered below content.\n\t */\n\taction?: ReactNode;\n\n\t/**\n\t * Custom supporting content or custom layout rendered between description and action.\n\t */\n\tchildren?: ReactNode;\n}\n\nexport function Empty({\n\ttitle = \"No results\",\n\tdescription,\n\ticon,\n\taction,\n\tchildren,\n\tclassName,\n\t...props\n}: EmptyProps) {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(BASALT_UI_CLASS, \"flex flex-col items-center gap-2 text-center\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{icon ? <div className=\"text-basalt-muted-foreground [&_svg]:size-8\">{icon}</div> : null}\n\t\t\t<p className=\"text-sm font-medium text-basalt-foreground\">{title}</p>\n\t\t\t{description ? <p className=\"text-xs text-basalt-muted-foreground\">{description}</p> : null}\n\t\t\t{children !== undefined && children !== null ? (\n\t\t\t\t<div className=\"text-xs text-basalt-muted-foreground\">{children}</div>\n\t\t\t) : null}\n\t\t\t{action !== undefined && action !== null ? (\n\t\t\t\t<div className=\"mt-2 flex items-center justify-center gap-2\">{action}</div>\n\t\t\t) : null}\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;AAiCA,SAAgBA,EAAM,EACrB,WAAQ,cACR,gBACA,SACA,WACA,aACA,cACA,GAAGC,KACW;CACd,OACC,kBAAC,OAAD;EACC,WAAWC,EAAGC,GAAiB,gDAAgDC,CAAS;EACxF,GAAIH;EAFL,UAAA;GAIEI,IAAO,kBAAC,OAAD;IAAK,WAAU;IAA+C,UAAAA;GAAU,CAAA,IAAI;GACpF,kBAAC,KAAD;IAAG,WAAU;IAA8C,UAAAC;GAAS,CAAA;GACnEC,IAAc,kBAAC,KAAD;IAAG,WAAU;IAAwC,UAAAA;GAAe,CAAA,IAAI;GACtFC,KAAuC,OAEpC,OADH,kBAAC,OAAD;IAAK,WAAU;IAAwC;GAAc,CAAA;GAErEC,KAAmC,OAEhC,OADH,kBAAC,OAAD;IAAK,WAAU;IAA+C,UAAAA;GAAY,CAAA;EAEvE;;AAEP"}
+{"version":3,"file":"empty.js","names":["Empty","props","cn","BASALT_UI_CLASS","className","icon","title","description","children","action"],"sources":["../../src/components/empty.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\n\nexport interface EmptyProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\" | \"children\"> {\n\t/**\n\t * Primary title text displayed in the empty state.\n\t *\n\t * @default \"No results\"\n\t */\n\ttitle?: string;\n\n\t/**\n\t * Secondary supporting description text rendered below the title.\n\t */\n\tdescription?: string;\n\n\t/**\n\t * Visual icon element rendered above the title.\n\t */\n\ticon?: ReactNode;\n\n\t/**\n\t * Interactive call-to-action element (e.g. Button or Link) rendered below content.\n\t */\n\taction?: ReactNode;\n\n\t/**\n\t * Custom supporting content or custom layout rendered between description and action.\n\t */\n\tchildren?: ReactNode;\n}\n\nexport function Empty({\n\ttitle = \"No results\",\n\tdescription,\n\ticon,\n\taction,\n\tchildren,\n\tclassName,\n\t...props\n}: EmptyProps) {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\t\"flex flex-col items-center gap-basalt-space-lg text-center\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{icon ? (\n\t\t\t\t<div className=\"text-basalt-muted-foreground [&_svg]:size-basalt-8\">{icon}</div>\n\t\t\t) : null}\n\t\t\t<p className=\"text-basalt-base font-medium text-basalt-foreground\">{title}</p>\n\t\t\t{description ? (\n\t\t\t\t<p className=\"text-basalt-sm text-basalt-muted-foreground\">{description}</p>\n\t\t\t) : null}\n\t\t\t{children !== undefined && children !== null ? (\n\t\t\t\t<div className=\"text-basalt-sm text-basalt-muted-foreground\">{children}</div>\n\t\t\t) : null}\n\t\t\t{action !== undefined && action !== null ? (\n\t\t\t\t<div className=\"mt-basalt-space-lg flex items-center justify-center gap-basalt-space-lg\">\n\t\t\t\t\t{action}\n\t\t\t\t</div>\n\t\t\t) : null}\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;AAiCA,SAAgBA,EAAM,EACrB,WAAQ,cACR,gBACA,SACA,WACA,aACA,cACA,GAAGC,KACW;CACd,OACC,kBAAC,OAAD;EACC,WAAWC,EACVC,GACA,8DACAC,CACD;EACA,GAAIH;EANL,UAAA;GAQEI,IACA,kBAAC,OAAD;IAAK,WAAU;IAAsD,UAAAA;GAAU,CAAA,IAC5E;GACJ,kBAAC,KAAD;IAAG,WAAU;IAAuD,UAAAC;GAAS,CAAA;GAC5EC,IACA,kBAAC,KAAD;IAAG,WAAU;IAA+C,UAAAA;GAAe,CAAA,IACxE;GACHC,KAAuC,OAEpC,OADH,kBAAC,OAAD;IAAK,WAAU;IAA+C;GAAc,CAAA;GAE5EC,KAAmC,OAIhC,OAHH,kBAAC,OAAD;IAAK,WAAU;IACb,UAAAA;GACG,CAAA;EAEF;;AAEP"}

package/dist/components/fab.js

@@ -15,7 +15,7 @@ var o = i.forwardRef(({ open: i = !1, placement: o = "fixed", className: s, chil
 	inert: i || void 0,
 	disabled: d,
 	onClick: i ? void 0 : l,
-	className: e(o === "absolute" ? "absolute" : "fixed", "right-4 bottom-4 h-16 w-16 rounded-full shadow-lg", t, "transition-[transform,opacity] duration-300 ease-in-out", n, i ? "pointer-events-none scale-75 opacity-0" : "hover:scale-[1.03] active:scale-[0.98]", s),
+	className: e(o === "absolute" ? "absolute" : "fixed", "right-basalt-4 bottom-basalt-4 h-basalt-16 w-basalt-16 rounded-basalt-full shadow-lg", t, "transition-[transform,opacity] basalt-motion duration-basalt-normal ease-basalt", n, i ? "pointer-events-none scale-75 opacity-0" : "hover:scale-[1.03] active:scale-[0.98]", s),
 	children: c
 }));
 o.displayName = "Fab";

package/dist/components/fab.js.map

@@ -1 +1 @@
-{"version":3,"file":"fab.js","names":["React","Fab","ariaLabel","Button","open","onClick","cn","placement","OVERLAY_LAYER","OVERLAY_MOTION","className"],"sources":["../../src/components/fab.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { Button } from \"./button\";\nimport { OVERLAY_LAYER, OVERLAY_MOTION } from \"./overlay\";\n\nexport type FabPlacement = \"absolute\" | \"fixed\";\n\nexport interface FabProps {\n\t/**\n\t * When true, the launcher hides so a dock can take the corner.\n\t * @default false\n\t */\n\topen?: boolean;\n\t/**\n\t * Viewport pin versus containing frame.\n\t * @default \"fixed\"\n\t */\n\tplacement?: FabPlacement;\n\t/**\n\t * Accessible name.\n\t */\n\t\"aria-label\": string;\n\tonClick?: React.MouseEventHandler<HTMLButtonElement>;\n\tchildren?: React.ReactNode;\n\tclassName?: string;\n\tdisabled?: boolean;\n}\n\nexport const Fab = React.forwardRef<HTMLButtonElement, FabProps>(\n\t(\n\t\t{\n\t\t\topen = false,\n\t\t\tplacement = \"fixed\",\n\t\t\tclassName,\n\t\t\tchildren,\n\t\t\tonClick,\n\t\t\t\"aria-label\": ariaLabel,\n\t\t\tdisabled,\n\t\t},\n\t\tref,\n\t) => (\n\t\t<Button\n\t\t\tref={ref}\n\t\t\tsize=\"icon\"\n\t\t\taria-label={ariaLabel}\n\t\t\taria-expanded={open}\n\t\t\taria-hidden={open || undefined}\n\t\t\ttabIndex={open ? -1 : 0}\n\t\t\tinert={open || undefined}\n\t\t\tdisabled={disabled}\n\t\t\tonClick={open ? undefined : onClick}\n\t\t\tclassName={cn(\n\t\t\t\tplacement === \"absolute\" ? \"absolute\" : \"fixed\",\n\t\t\t\t\"right-4 bottom-4 h-16 w-16 rounded-full shadow-lg\",\n\t\t\t\tOVERLAY_LAYER,\n\t\t\t\t\"transition-[transform,opacity] duration-300 ease-in-out\",\n\t\t\t\tOVERLAY_MOTION,\n\t\t\t\topen ? \"pointer-events-none scale-75 opacity-0\" : \"hover:scale-[1.03] active:scale-[0.98]\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t{children}\n\t\t</Button>\n\t),\n);\nFab.displayName = \"Fab\";\n"],"mappings":";;;;;;;AA4BA,IAAaC,IAAMD,EAAM,YAEvB,EACC,UAAO,IACP,eAAY,SACZ,cACA,aACA,YACA,cAAcE,GACd,eAED,MAEA,kBAACC,GAAD;CACM;CACL,MAAK;CACL,cAAYD;CACZ,iBAAeE;CACf,eAAaA,KAAQ,KAAA;CACrB,UAAUA,IAAO,KAAK;CACtB,OAAOA,KAAQ,KAAA;CACL;CACV,SAASA,IAAO,KAAA,IAAYC;CAC5B,WAAWC,EACVC,MAAc,aAAa,aAAa,SACxC,qDACAC,GACA,2DACAC,GACAL,IAAO,2CAA2C,0CAClDM,CACD;CAEC;AACM,CAAA,CAEV;AACA,EAAI,cAAc"}
+{"version":3,"file":"fab.js","names":["React","Fab","ariaLabel","Button","open","onClick","cn","placement","OVERLAY_LAYER","OVERLAY_MOTION","className"],"sources":["../../src/components/fab.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { Button } from \"./button\";\nimport { OVERLAY_LAYER, OVERLAY_MOTION } from \"./overlay\";\n\nexport type FabPlacement = \"absolute\" | \"fixed\";\n\nexport interface FabProps {\n\t/**\n\t * When true, the launcher hides so a dock can take the corner.\n\t * @default false\n\t */\n\topen?: boolean;\n\t/**\n\t * Viewport pin versus containing frame.\n\t * @default \"fixed\"\n\t */\n\tplacement?: FabPlacement;\n\t/**\n\t * Accessible name.\n\t */\n\t\"aria-label\": string;\n\tonClick?: React.MouseEventHandler<HTMLButtonElement>;\n\tchildren?: React.ReactNode;\n\tclassName?: string;\n\tdisabled?: boolean;\n}\n\nexport const Fab = React.forwardRef<HTMLButtonElement, FabProps>(\n\t(\n\t\t{\n\t\t\topen = false,\n\t\t\tplacement = \"fixed\",\n\t\t\tclassName,\n\t\t\tchildren,\n\t\t\tonClick,\n\t\t\t\"aria-label\": ariaLabel,\n\t\t\tdisabled,\n\t\t},\n\t\tref,\n\t) => (\n\t\t<Button\n\t\t\tref={ref}\n\t\t\tsize=\"icon\"\n\t\t\taria-label={ariaLabel}\n\t\t\taria-expanded={open}\n\t\t\taria-hidden={open || undefined}\n\t\t\ttabIndex={open ? -1 : 0}\n\t\t\tinert={open || undefined}\n\t\t\tdisabled={disabled}\n\t\t\tonClick={open ? undefined : onClick}\n\t\t\tclassName={cn(\n\t\t\t\tplacement === \"absolute\" ? \"absolute\" : \"fixed\",\n\t\t\t\t\"right-basalt-4 bottom-basalt-4 h-basalt-16 w-basalt-16 rounded-basalt-full shadow-lg\",\n\t\t\t\tOVERLAY_LAYER,\n\t\t\t\t\"transition-[transform,opacity] basalt-motion duration-basalt-normal ease-basalt\",\n\t\t\t\tOVERLAY_MOTION,\n\t\t\t\topen ? \"pointer-events-none scale-75 opacity-0\" : \"hover:scale-[1.03] active:scale-[0.98]\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t{children}\n\t\t</Button>\n\t),\n);\nFab.displayName = \"Fab\";\n"],"mappings":";;;;;;;AA4BA,IAAaC,IAAMD,EAAM,YAEvB,EACC,UAAO,IACP,eAAY,SACZ,cACA,aACA,YACA,cAAcE,GACd,eAED,MAEA,kBAACC,GAAD;CACM;CACL,MAAK;CACL,cAAYD;CACZ,iBAAeE;CACf,eAAaA,KAAQ,KAAA;CACrB,UAAUA,IAAO,KAAK;CACtB,OAAOA,KAAQ,KAAA;CACL;CACV,SAASA,IAAO,KAAA,IAAYC;CAC5B,WAAWC,EACVC,MAAc,aAAa,aAAa,SACxC,wFACAC,GACA,mFACAC,GACAL,IAAO,2CAA2C,0CAClDM,CACD;CAEC;AACM,CAAA,CAEV;AACA,EAAI,cAAc"}

package/dist/components/field.js

@@ -16,7 +16,7 @@ var c = r.forwardRef(({ label: o, htmlFor: c, hint: l, error: u, required: d, la
 	return /* @__PURE__ */ a("div", {
 		ref: g,
 		...h,
-		className: e(t, "flex flex-col gap-1.5", p),
+		className: e(t, "flex flex-col gap-basalt-field-gap", p),
 		children: [
 			/* @__PURE__ */ i(n, {
 				htmlFor: y,
@@ -31,12 +31,12 @@ var c = r.forwardRef(({ label: o, htmlFor: c, hint: l, error: u, required: d, la
 			}) : m,
 			l && !C ? /* @__PURE__ */ i("p", {
 				id: b,
-				className: "text-xs text-basalt-muted-foreground",
+				className: "text-basalt-sm text-basalt-muted-foreground",
 				children: l
 			}) : null,
 			C ? /* @__PURE__ */ i("p", {
 				id: x,
-				className: "text-xs text-basalt-destructive",
+				className: "text-basalt-sm text-basalt-destructive",
 				role: "alert",
 				children: S
 			}) : null

package/dist/components/field.js.map

@@ -1 +1 @@
-{"version":3,"file":"field.js","names":["React","isStructuredError","error","fieldErrorMessage","Field","props","generatedId","child","children","controlId","htmlFor","hintId","errorId","errorMessage","hasError","mergedDescribedBy","hint","cn","BASALT_UI_CLASS","className","Label","required","labelTooltip","label"],"sources":["../../src/components/field.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { Label } from \"./label\";\n\nexport type FieldError = Exclude<React.ReactNode, undefined> | { message: React.ReactNode };\n\ntype FieldControlProps = {\n\tid?: string;\n\t\"aria-describedby\"?: string;\n\t\"aria-invalid\"?: boolean | \"true\" | \"false\";\n};\n\nexport interface FieldProps\n\textends Omit<React.ComponentPropsWithoutRef<\"div\">, \"children\" | \"className\"> {\n\t/**\n\t * Visible label.\n\t */\n\tlabel: React.ReactNode;\n\t/**\n\t * Associates the label and described-by ids.\n\t */\n\thtmlFor?: string;\n\t/**\n\t * Supporting text when there is no error.\n\t */\n\thint?: React.ReactNode;\n\t/**\n\t * Replaces the hint and marks the control invalid.\n\t */\n\terror?: FieldError;\n\t/**\n\t * When false, show (optional) after the label.\n\t */\n\trequired?: boolean;\n\t/**\n\t * Info icon with hover text on the label.\n\t */\n\tlabelTooltip?: React.ReactNode;\n\t/**\n\t * Additional classes for the field root.\n\t */\n\tclassName?: string;\n\t/**\n\t * The control or content to render.\n\t */\n\tchildren: React.ReactNode;\n}\n\nfunction isStructuredError(error: FieldError): error is { message: React.ReactNode } {\n\treturn (\n\t\ttypeof error === \"object\" &&\n\t\terror !== null &&\n\t\t!Array.isArray(error) &&\n\t\t!React.isValidElement(error) &&\n\t\t\"message\" in error\n\t);\n}\n\nfunction fieldErrorMessage(error: FieldError | undefined): React.ReactNode | undefined {\n\tif (error == null) {\n\t\treturn undefined;\n\t}\n\treturn isStructuredError(error) ? error.message : error;\n}\n\nexport const Field = React.forwardRef<HTMLDivElement, FieldProps>(\n\t({ label, htmlFor, hint, error, required, labelTooltip, className, children, ...props }, ref) => {\n\t\tconst generatedId = React.useId();\n\t\tconst child = React.isValidElement(children)\n\t\t\t? (children as React.ReactElement<FieldControlProps>)\n\t\t\t: null;\n\t\tconst controlId = child ? (htmlFor ?? child.props.id ?? generatedId) : htmlFor;\n\t\tconst hintId = controlId ? `${controlId}-hint` : undefined;\n\t\tconst errorId = controlId ? `${controlId}-error` : undefined;\n\t\tconst errorMessage = fieldErrorMessage(error);\n\t\tconst hasError = Boolean(errorMessage);\n\t\tconst describedBy = [hasError ? errorId : null, !hasError && hint ? hintId : null]\n\t\t\t.filter(Boolean)\n\t\t\t.join(\" \");\n\t\tconst mergedDescribedBy = [describedBy, child?.props[\"aria-describedby\"]]\n\t\t\t.filter(Boolean)\n\t\t\t.join(\" \");\n\t\treturn (\n\t\t\t<div ref={ref} {...props} className={cn(BASALT_UI_CLASS, \"flex flex-col gap-1.5\", className)}>\n\t\t\t\t<Label htmlFor={controlId} showOptional={required === false} tooltip={labelTooltip}>\n\t\t\t\t\t{label}\n\t\t\t\t</Label>\n\t\t\t\t{child\n\t\t\t\t\t? React.cloneElement(child, {\n\t\t\t\t\t\t\tid: controlId,\n\t\t\t\t\t\t\t\"aria-invalid\": hasError ? true : child.props[\"aria-invalid\"],\n\t\t\t\t\t\t\t\"aria-describedby\": mergedDescribedBy || undefined,\n\t\t\t\t\t\t})\n\t\t\t\t\t: children}\n\t\t\t\t{hint && !hasError ? (\n\t\t\t\t\t<p id={hintId} className=\"text-xs text-basalt-muted-foreground\">\n\t\t\t\t\t\t{hint}\n\t\t\t\t\t</p>\n\t\t\t\t) : null}\n\t\t\t\t{hasError ? (\n\t\t\t\t\t<p id={errorId} className=\"text-xs text-basalt-destructive\" role=\"alert\">\n\t\t\t\t\t\t{errorMessage}\n\t\t\t\t\t</p>\n\t\t\t\t) : null}\n\t\t\t</div>\n\t\t);\n\t},\n);\nField.displayName = \"Field\";\n"],"mappings":";;;;;;;AAiDA,SAASC,EAAkB,GAA0D;CACpF,OACC,OAAOC,KAAU,cACjBA,KACA,CAAC,MAAM,QAAQA,CAAK,KACpB,CAACF,EAAM,eAAeE,CAAK,KAC3B,aAAaA;AAEf;AAEA,SAASC,EAAkB,GAA4D;CACtF,IAAID,KAAS,MAGb,OAAOD,EAAkBC,CAAK,IAAIA,EAAM,UAAUA;AACnD;AAEA,IAAaE,IAAQJ,EAAM,YACzB,EAAE,UAAO,YAAS,SAAM,UAAO,aAAU,iBAAc,cAAW,aAAU,GAAGK,KAAS,MAAQ;CAChG,IAAMC,IAAcN,EAAM,MAAM,GAC1BO,IAAQP,EAAM,eAAeQ,CAAQ,IACvCA,IACD,MACGC,IAAYF,IAASG,KAAWH,EAAM,MAAM,MAAMD,IAAeI,GACjEC,IAASF,IAAY,GAAGA,EAAU,SAAS,KAAA,GAC3CG,IAAUH,IAAY,GAAGA,EAAU,UAAU,KAAA,GAC7CI,IAAeV,EAAkBD,CAAK,GACtCY,IAAW,EAAQD,GAInBE,IAAoB,CAHN,CAACD,IAAWF,IAAU,MAAM,CAACE,KAAYE,IAAOL,IAAS,IAAI,CAAC,CAChF,OAAO,OAAO,CAAC,CACf,KAAK,GACoB,GAAaJ,GAAO,MAAM,mBAAmB,CAAC,CACvE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CACV,OACC,kBAAC,OAAD;EAAU;EAAK,GAAIF;EAAO,WAAWY,EAAGC,GAAiB,yBAAyBC,CAAS;EAA3F,UAAA;GACC,kBAACC,GAAD;IAAO,SAASX;IAAW,cAAcY,MAAa;IAAO,SAASC;IACpE,UAAAC;GACK,CAAA;GACNhB,IACEP,EAAM,aAAaO,GAAO;IAC1B,IAAIE;IACJ,gBAAgBK,IAAW,KAAOP,EAAM,MAAM;IAC9C,oBAAoBQ,KAAqB,KAAA;GAC1C,CAAC,IACAP;GACFQ,KAAQ,CAACF,IACT,kBAAC,KAAD;IAAG,IAAIH;IAAQ,WAAU;IACvB,UAAAK;GACC,CAAA,IACA;GACHF,IACA,kBAAC,KAAD;IAAG,IAAIF;IAAS,WAAU;IAAkC,MAAK;IAC/D,UAAAC;GACC,CAAA,IACA;EACA;;AAEP,CACD;AACA,EAAM,cAAc"}
+{"version":3,"file":"field.js","names":["React","isStructuredError","error","fieldErrorMessage","Field","props","generatedId","child","children","controlId","htmlFor","hintId","errorId","errorMessage","hasError","mergedDescribedBy","hint","cn","BASALT_UI_CLASS","className","Label","required","labelTooltip","label"],"sources":["../../src/components/field.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { Label } from \"./label\";\n\nexport type FieldError = Exclude<React.ReactNode, undefined> | { message: React.ReactNode };\n\ntype FieldControlProps = {\n\tid?: string;\n\t\"aria-describedby\"?: string;\n\t\"aria-invalid\"?: boolean | \"true\" | \"false\";\n};\n\nexport interface FieldProps\n\textends Omit<React.ComponentPropsWithoutRef<\"div\">, \"children\" | \"className\"> {\n\t/**\n\t * Visible label.\n\t */\n\tlabel: React.ReactNode;\n\t/**\n\t * Associates the label and described-by ids.\n\t */\n\thtmlFor?: string;\n\t/**\n\t * Supporting text when there is no error.\n\t */\n\thint?: React.ReactNode;\n\t/**\n\t * Replaces the hint and marks the control invalid.\n\t */\n\terror?: FieldError;\n\t/**\n\t * When false, show (optional) after the label.\n\t */\n\trequired?: boolean;\n\t/**\n\t * Info icon with hover text on the label.\n\t */\n\tlabelTooltip?: React.ReactNode;\n\t/**\n\t * Additional classes for the field root.\n\t */\n\tclassName?: string;\n\t/**\n\t * The control or content to render.\n\t */\n\tchildren: React.ReactNode;\n}\n\nfunction isStructuredError(error: FieldError): error is { message: React.ReactNode } {\n\treturn (\n\t\ttypeof error === \"object\" &&\n\t\terror !== null &&\n\t\t!Array.isArray(error) &&\n\t\t!React.isValidElement(error) &&\n\t\t\"message\" in error\n\t);\n}\n\nfunction fieldErrorMessage(error: FieldError | undefined): React.ReactNode | undefined {\n\tif (error == null) {\n\t\treturn undefined;\n\t}\n\treturn isStructuredError(error) ? error.message : error;\n}\n\nexport const Field = React.forwardRef<HTMLDivElement, FieldProps>(\n\t({ label, htmlFor, hint, error, required, labelTooltip, className, children, ...props }, ref) => {\n\t\tconst generatedId = React.useId();\n\t\tconst child = React.isValidElement(children)\n\t\t\t? (children as React.ReactElement<FieldControlProps>)\n\t\t\t: null;\n\t\tconst controlId = child ? (htmlFor ?? child.props.id ?? generatedId) : htmlFor;\n\t\tconst hintId = controlId ? `${controlId}-hint` : undefined;\n\t\tconst errorId = controlId ? `${controlId}-error` : undefined;\n\t\tconst errorMessage = fieldErrorMessage(error);\n\t\tconst hasError = Boolean(errorMessage);\n\t\tconst describedBy = [hasError ? errorId : null, !hasError && hint ? hintId : null]\n\t\t\t.filter(Boolean)\n\t\t\t.join(\" \");\n\t\tconst mergedDescribedBy = [describedBy, child?.props[\"aria-describedby\"]]\n\t\t\t.filter(Boolean)\n\t\t\t.join(\" \");\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t\tclassName={cn(BASALT_UI_CLASS, \"flex flex-col gap-basalt-field-gap\", className)}\n\t\t\t>\n\t\t\t\t<Label htmlFor={controlId} showOptional={required === false} tooltip={labelTooltip}>\n\t\t\t\t\t{label}\n\t\t\t\t</Label>\n\t\t\t\t{child\n\t\t\t\t\t? React.cloneElement(child, {\n\t\t\t\t\t\t\tid: controlId,\n\t\t\t\t\t\t\t\"aria-invalid\": hasError ? true : child.props[\"aria-invalid\"],\n\t\t\t\t\t\t\t\"aria-describedby\": mergedDescribedBy || undefined,\n\t\t\t\t\t\t})\n\t\t\t\t\t: children}\n\t\t\t\t{hint && !hasError ? (\n\t\t\t\t\t<p id={hintId} className=\"text-basalt-sm text-basalt-muted-foreground\">\n\t\t\t\t\t\t{hint}\n\t\t\t\t\t</p>\n\t\t\t\t) : null}\n\t\t\t\t{hasError ? (\n\t\t\t\t\t<p id={errorId} className=\"text-basalt-sm text-basalt-destructive\" role=\"alert\">\n\t\t\t\t\t\t{errorMessage}\n\t\t\t\t\t</p>\n\t\t\t\t) : null}\n\t\t\t</div>\n\t\t);\n\t},\n);\nField.displayName = \"Field\";\n"],"mappings":";;;;;;;AAiDA,SAASC,EAAkB,GAA0D;CACpF,OACC,OAAOC,KAAU,cACjBA,KACA,CAAC,MAAM,QAAQA,CAAK,KACpB,CAACF,EAAM,eAAeE,CAAK,KAC3B,aAAaA;AAEf;AAEA,SAASC,EAAkB,GAA4D;CACtF,IAAID,KAAS,MAGb,OAAOD,EAAkBC,CAAK,IAAIA,EAAM,UAAUA;AACnD;AAEA,IAAaE,IAAQJ,EAAM,YACzB,EAAE,UAAO,YAAS,SAAM,UAAO,aAAU,iBAAc,cAAW,aAAU,GAAGK,KAAS,MAAQ;CAChG,IAAMC,IAAcN,EAAM,MAAM,GAC1BO,IAAQP,EAAM,eAAeQ,CAAQ,IACvCA,IACD,MACGC,IAAYF,IAASG,KAAWH,EAAM,MAAM,MAAMD,IAAeI,GACjEC,IAASF,IAAY,GAAGA,EAAU,SAAS,KAAA,GAC3CG,IAAUH,IAAY,GAAGA,EAAU,UAAU,KAAA,GAC7CI,IAAeV,EAAkBD,CAAK,GACtCY,IAAW,EAAQD,GAInBE,IAAoB,CAHN,CAACD,IAAWF,IAAU,MAAM,CAACE,KAAYE,IAAOL,IAAS,IAAI,CAAC,CAChF,OAAO,OAAO,CAAC,CACf,KAAK,GACoB,GAAaJ,GAAO,MAAM,mBAAmB,CAAC,CACvE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CACV,OACC,kBAAC,OAAD;EACM;EACL,GAAIF;EACJ,WAAWY,EAAGC,GAAiB,sCAAsCC,CAAS;EAH/E,UAAA;GAKC,kBAACC,GAAD;IAAO,SAASX;IAAW,cAAcY,MAAa;IAAO,SAASC;IACpE,UAAAC;GACK,CAAA;GACNhB,IACEP,EAAM,aAAaO,GAAO;IAC1B,IAAIE;IACJ,gBAAgBK,IAAW,KAAOP,EAAM,MAAM;IAC9C,oBAAoBQ,KAAqB,KAAA;GAC1C,CAAC,IACAP;GACFQ,KAAQ,CAACF,IACT,kBAAC,KAAD;IAAG,IAAIH;IAAQ,WAAU;IACvB,UAAAK;GACC,CAAA,IACA;GACHF,IACA,kBAAC,KAAD;IAAG,IAAIF;IAAS,WAAU;IAAyC,MAAK;IACtE,UAAAC;GACC,CAAA,IACA;EACA;;AAEP,CACD;AACA,EAAM,cAAc"}

package/dist/components/file-dropzone.js

@@ -31,7 +31,7 @@ function u({ label: u, description: d, accept: f = "", multiple: p = !0, maxFile
 	return /* @__PURE__ */ s("div", {
 		role: "group",
 		"aria-label": u,
-		className: e(t, "min-w-0 space-y-2", C),
+		className: e(t, "min-w-0 space-y-basalt-space-lg", C),
 		children: [
 			/* @__PURE__ */ o("input", {
 				ref: w,
@@ -65,30 +65,30 @@ function u({ label: u, description: d, accept: f = "", multiple: p = !0, maxFile
 				onDrop: (e) => {
 					e.preventDefault(), e.stopPropagation(), T.current = 0, D(!1), j(Array.from(e.dataTransfer.files));
 				},
-				className: e("flex w-full min-w-0 flex-col items-center gap-2 rounded-basalt-lg border-2 border-dashed px-4 py-7 text-center transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-basalt-ring disabled:cursor-not-allowed disabled:opacity-50", E && !_ ? "border-basalt-primary bg-basalt-accent" : "border-basalt-border bg-basalt-card hover:bg-basalt-accent"),
+				className: e("flex w-full min-w-0 flex-col items-center gap-basalt-space-lg rounded-basalt-lg border-2 border-dashed px-basalt-card py-basalt-card text-center transition-colors basalt-motion focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-basalt-ring disabled:cursor-not-allowed disabled:opacity-50", E && !_ ? "border-basalt-primary bg-basalt-selected" : "border-basalt-border bg-basalt-control hover:bg-basalt-hover"),
 				children: [
 					/* @__PURE__ */ o(a, {
-						className: "size-6 text-basalt-muted-foreground",
+						className: "size-basalt-icon-display text-basalt-muted-foreground",
 						"aria-hidden": "true"
 					}),
 					/* @__PURE__ */ o("span", {
-						className: "text-sm font-medium",
+						className: "text-basalt-base font-medium",
 						children: E && !_ ? x : u
 					}),
 					d && /* @__PURE__ */ o("span", {
 						id: `${A}-description`,
-						className: "text-xs text-basalt-muted-foreground",
+						className: "text-basalt-sm text-basalt-muted-foreground",
 						children: d
 					}),
 					/* @__PURE__ */ o("span", {
-						className: "rounded-basalt-md border border-basalt-border px-3 py-1 text-xs",
+						className: "rounded-basalt-md border border-basalt-border px-basalt-space-lg py-basalt-space-sm text-basalt-sm",
 						children: b
 					})
 				]
 			}),
 			O.length > 0 && /* @__PURE__ */ o("ul", {
 				role: "alert",
-				className: "space-y-1 text-xs text-basalt-destructive",
+				className: "space-y-basalt-space-sm text-basalt-sm text-basalt-destructive",
 				children: O.map((e, t) => /* @__PURE__ */ o("li", {
 					className: "break-words",
 					children: S ? S(e) : `${e.file.name}: ${l[e.code]}`

package/dist/components/file-dropzone.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-dropzone.js","names":["accepts","rules","accept","rule","file","REASONS","FileDropzone","input","useRef","depth","dragging","setDragging","useState","rejections","setRejections","id","useId","receive","disabled","accepted","rejected","limit","multiple","maxFiles","files","code","maxSize","fileCount","onFilesAccepted","onFilesRejected","label","cn","BASALT_UI_CLASS","className","event","browseLabel","description","Upload","dropLabel","formatRejection","item","index"],"sources":["../../src/components/file-dropzone.tsx"],"sourcesContent":["import { Upload } from \"lucide-react\";\nimport { useId, useRef, useState } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\n\nexport interface FileRejection {\n\t/** Original File; the component never creates preview URLs. */\n\tfile: File;\n\t/** Machine-readable reason for application handling. */\n\tcode: \"file-invalid-type\" | \"file-too-large\" | \"too-many-files\";\n}\n\nexport interface FileDropzoneProps {\n\t/** Visible and accessible upload field name. */\n\tlabel: string;\n\t/** Optional file requirements shown under the label. */\n\tdescription?: string;\n\t/** Accepted extensions/MIME types using native accept syntax, e.g. .pdf,image/*. */\n\taccept?: string;\n\t/** Allow multiple files. @default true */\n\tmultiple?: boolean;\n\t/** Maximum accepted file count including fileCount. @default Infinity */\n\tmaxFiles?: number;\n\t/** Number already held by the application. @default 0 */\n\tfileCount?: number;\n\t/** Maximum size of an individual file in bytes. @default Infinity */\n\tmaxSize?: number;\n\t/** Prevent both file browsing and drops. @default false */\n\tdisabled?: boolean;\n\t/** Accepted files from this gesture; transport and queue ownership belong to the caller. */\n\tonFilesAccepted: (files: File[]) => void;\n\t/** Rejected files from this gesture, with one primary reason per file. */\n\tonFilesRejected?: (rejections: FileRejection[]) => void;\n\t/** Browse action text. @default \"Browse files\" */\n\tbrowseLabel?: string;\n\t/** Text while a file is dragged over the field. @default \"Drop files here\" */\n\tdropLabel?: string;\n\t/** Localized rejection message; defaults to a name and reason. */\n\tformatRejection?: (rejection: FileRejection) => string;\n\t/** Additional root classes. */\n\tclassName?: string;\n}\n\nfunction accepts(file: File, accept: string) {\n\tconst rules = accept\n\t\t.split(\",\")\n\t\t.map((rule) => rule.trim().toLowerCase())\n\t\t.filter(Boolean);\n\treturn (\n\t\trules.length === 0 ||\n\t\trules.some((rule) =>\n\t\t\trule.startsWith(\".\")\n\t\t\t\t? file.name.toLowerCase().endsWith(rule)\n\t\t\t\t: rule.endsWith(\"/*\")\n\t\t\t\t\t? file.type.toLowerCase().startsWith(rule.slice(0, -1))\n\t\t\t\t\t: file.type.toLowerCase() === rule,\n\t\t)\n\t);\n}\n\nconst REASONS = {\n\t\"file-invalid-type\": \"File type is not accepted.\",\n\t\"file-too-large\": \"File exceeds the size limit.\",\n\t\"too-many-files\": \"File count limit reached.\",\n};\n\nexport function FileDropzone({\n\tlabel,\n\tdescription,\n\taccept = \"\",\n\tmultiple = true,\n\tmaxFiles = Infinity,\n\tfileCount = 0,\n\tmaxSize = Infinity,\n\tdisabled = false,\n\tonFilesAccepted,\n\tonFilesRejected,\n\tbrowseLabel = \"Browse files\",\n\tdropLabel = \"Drop files here\",\n\tformatRejection,\n\tclassName,\n}: FileDropzoneProps) {\n\tconst input = useRef<HTMLInputElement>(null);\n\tconst depth = useRef(0);\n\tconst [dragging, setDragging] = useState(false);\n\tconst [rejections, setRejections] = useState<FileRejection[]>([]);\n\tconst id = useId();\n\tfunction receive(files: File[]) {\n\t\tif (disabled) return;\n\t\tconst accepted: File[] = [];\n\t\tconst rejected: FileRejection[] = [];\n\t\tconst limit = Math.max(0, multiple ? maxFiles : Math.min(1, maxFiles));\n\t\tfor (const file of files) {\n\t\t\tconst code = !accepts(file, accept)\n\t\t\t\t? \"file-invalid-type\"\n\t\t\t\t: file.size > maxSize\n\t\t\t\t\t? \"file-too-large\"\n\t\t\t\t\t: accepted.length + fileCount >= limit\n\t\t\t\t\t\t? \"too-many-files\"\n\t\t\t\t\t\t: null;\n\t\t\tif (code) rejected.push({ file, code });\n\t\t\telse accepted.push(file);\n\t\t}\n\t\tsetRejections(rejected);\n\t\tif (accepted.length) onFilesAccepted(accepted);\n\t\tif (rejected.length) onFilesRejected?.(rejected);\n\t}\n\treturn (\n\t\t<div\n\t\t\trole=\"group\"\n\t\t\taria-label={label}\n\t\t\tclassName={cn(BASALT_UI_CLASS, \"min-w-0 space-y-2\", className)}\n\t\t>\n\t\t\t<input\n\t\t\t\tref={input}\n\t\t\t\ttype=\"file\"\n\t\t\t\taccept={accept}\n\t\t\t\tmultiple={multiple}\n\t\t\t\tdisabled={disabled}\n\t\t\t\ttabIndex={-1}\n\t\t\t\taria-label={label}\n\t\t\t\tclassName=\"hidden\"\n\t\t\t\tonChange={(event) => {\n\t\t\t\t\treceive(Array.from(event.currentTarget.files ?? []));\n\t\t\t\t\tevent.currentTarget.value = \"\";\n\t\t\t\t}}\n\t\t\t/>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tdisabled={disabled}\n\t\t\t\taria-label={`${browseLabel}: ${label}`}\n\t\t\t\taria-describedby={description ? `${id}-description` : undefined}\n\t\t\t\tdata-drag-active={dragging && !disabled}\n\t\t\t\tonClick={() => input.current?.click()}\n\t\t\t\tonDragEnter={(event) => {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tdepth.current += 1;\n\t\t\t\t\tif (!disabled) setDragging(true);\n\t\t\t\t}}\n\t\t\t\tonDragOver={(event) => {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tif (!disabled) event.dataTransfer.dropEffect = \"copy\";\n\t\t\t\t}}\n\t\t\t\tonDragLeave={(event) => {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tdepth.current = Math.max(0, depth.current - 1);\n\t\t\t\t\tif (depth.current === 0) setDragging(false);\n\t\t\t\t}}\n\t\t\t\tonDrop={(event) => {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tdepth.current = 0;\n\t\t\t\t\tsetDragging(false);\n\t\t\t\t\treceive(Array.from(event.dataTransfer.files));\n\t\t\t\t}}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"flex w-full min-w-0 flex-col items-center gap-2 rounded-basalt-lg border-2 border-dashed px-4 py-7 text-center transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-basalt-ring disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\t\t\tdragging && !disabled\n\t\t\t\t\t\t? \"border-basalt-primary bg-basalt-accent\"\n\t\t\t\t\t\t: \"border-basalt-border bg-basalt-card hover:bg-basalt-accent\",\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t<Upload className=\"size-6 text-basalt-muted-foreground\" aria-hidden=\"true\" />\n\t\t\t\t<span className=\"text-sm font-medium\">{dragging && !disabled ? dropLabel : label}</span>\n\t\t\t\t{description && (\n\t\t\t\t\t<span id={`${id}-description`} className=\"text-xs text-basalt-muted-foreground\">\n\t\t\t\t\t\t{description}\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t\t<span className=\"rounded-basalt-md border border-basalt-border px-3 py-1 text-xs\">\n\t\t\t\t\t{browseLabel}\n\t\t\t\t</span>\n\t\t\t</button>\n\t\t\t{rejections.length > 0 && (\n\t\t\t\t<ul role=\"alert\" className=\"space-y-1 text-xs text-basalt-destructive\">\n\t\t\t\t\t{rejections.map((item, index) => (\n\t\t\t\t\t\t<li key={`${item.file.name}-${index}`} className=\"break-words\">\n\t\t\t\t\t\t\t{formatRejection ? formatRejection(item) : `${item.file.name}: ${REASONS[item.code]}`}\n\t\t\t\t\t\t</li>\n\t\t\t\t\t))}\n\t\t\t\t</ul>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n"],"mappings":"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"}
+{"version":3,"file":"file-dropzone.js","names":["accepts","rules","accept","rule","file","REASONS","FileDropzone","input","useRef","depth","dragging","setDragging","useState","rejections","setRejections","id","useId","receive","disabled","accepted","rejected","limit","multiple","maxFiles","files","code","maxSize","fileCount","onFilesAccepted","onFilesRejected","label","cn","BASALT_UI_CLASS","className","event","browseLabel","description","Upload","dropLabel","formatRejection","item","index"],"sources":["../../src/components/file-dropzone.tsx"],"sourcesContent":["import { Upload } from \"lucide-react\";\nimport { useId, useRef, useState } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\n\nexport interface FileRejection {\n\t/** Original File; the component never creates preview URLs. */\n\tfile: File;\n\t/** Machine-readable reason for application handling. */\n\tcode: \"file-invalid-type\" | \"file-too-large\" | \"too-many-files\";\n}\n\nexport interface FileDropzoneProps {\n\t/** Visible and accessible upload field name. */\n\tlabel: string;\n\t/** Optional file requirements shown under the label. */\n\tdescription?: string;\n\t/** Accepted extensions/MIME types using native accept syntax, e.g. .pdf,image/*. */\n\taccept?: string;\n\t/** Allow multiple files. @default true */\n\tmultiple?: boolean;\n\t/** Maximum accepted file count including fileCount. @default Infinity */\n\tmaxFiles?: number;\n\t/** Number already held by the application. @default 0 */\n\tfileCount?: number;\n\t/** Maximum size of an individual file in bytes. @default Infinity */\n\tmaxSize?: number;\n\t/** Prevent both file browsing and drops. @default false */\n\tdisabled?: boolean;\n\t/** Accepted files from this gesture; transport and queue ownership belong to the caller. */\n\tonFilesAccepted: (files: File[]) => void;\n\t/** Rejected files from this gesture, with one primary reason per file. */\n\tonFilesRejected?: (rejections: FileRejection[]) => void;\n\t/** Browse action text. @default \"Browse files\" */\n\tbrowseLabel?: string;\n\t/** Text while a file is dragged over the field. @default \"Drop files here\" */\n\tdropLabel?: string;\n\t/** Localized rejection message; defaults to a name and reason. */\n\tformatRejection?: (rejection: FileRejection) => string;\n\t/** Additional root classes. */\n\tclassName?: string;\n}\n\nfunction accepts(file: File, accept: string) {\n\tconst rules = accept\n\t\t.split(\",\")\n\t\t.map((rule) => rule.trim().toLowerCase())\n\t\t.filter(Boolean);\n\treturn (\n\t\trules.length === 0 ||\n\t\trules.some((rule) =>\n\t\t\trule.startsWith(\".\")\n\t\t\t\t? file.name.toLowerCase().endsWith(rule)\n\t\t\t\t: rule.endsWith(\"/*\")\n\t\t\t\t\t? file.type.toLowerCase().startsWith(rule.slice(0, -1))\n\t\t\t\t\t: file.type.toLowerCase() === rule,\n\t\t)\n\t);\n}\n\nconst REASONS = {\n\t\"file-invalid-type\": \"File type is not accepted.\",\n\t\"file-too-large\": \"File exceeds the size limit.\",\n\t\"too-many-files\": \"File count limit reached.\",\n};\n\nexport function FileDropzone({\n\tlabel,\n\tdescription,\n\taccept = \"\",\n\tmultiple = true,\n\tmaxFiles = Infinity,\n\tfileCount = 0,\n\tmaxSize = Infinity,\n\tdisabled = false,\n\tonFilesAccepted,\n\tonFilesRejected,\n\tbrowseLabel = \"Browse files\",\n\tdropLabel = \"Drop files here\",\n\tformatRejection,\n\tclassName,\n}: FileDropzoneProps) {\n\tconst input = useRef<HTMLInputElement>(null);\n\tconst depth = useRef(0);\n\tconst [dragging, setDragging] = useState(false);\n\tconst [rejections, setRejections] = useState<FileRejection[]>([]);\n\tconst id = useId();\n\tfunction receive(files: File[]) {\n\t\tif (disabled) return;\n\t\tconst accepted: File[] = [];\n\t\tconst rejected: FileRejection[] = [];\n\t\tconst limit = Math.max(0, multiple ? maxFiles : Math.min(1, maxFiles));\n\t\tfor (const file of files) {\n\t\t\tconst code = !accepts(file, accept)\n\t\t\t\t? \"file-invalid-type\"\n\t\t\t\t: file.size > maxSize\n\t\t\t\t\t? \"file-too-large\"\n\t\t\t\t\t: accepted.length + fileCount >= limit\n\t\t\t\t\t\t? \"too-many-files\"\n\t\t\t\t\t\t: null;\n\t\t\tif (code) rejected.push({ file, code });\n\t\t\telse accepted.push(file);\n\t\t}\n\t\tsetRejections(rejected);\n\t\tif (accepted.length) onFilesAccepted(accepted);\n\t\tif (rejected.length) onFilesRejected?.(rejected);\n\t}\n\treturn (\n\t\t<div\n\t\t\trole=\"group\"\n\t\t\taria-label={label}\n\t\t\tclassName={cn(BASALT_UI_CLASS, \"min-w-0 space-y-basalt-space-lg\", className)}\n\t\t>\n\t\t\t<input\n\t\t\t\tref={input}\n\t\t\t\ttype=\"file\"\n\t\t\t\taccept={accept}\n\t\t\t\tmultiple={multiple}\n\t\t\t\tdisabled={disabled}\n\t\t\t\ttabIndex={-1}\n\t\t\t\taria-label={label}\n\t\t\t\tclassName=\"hidden\"\n\t\t\t\tonChange={(event) => {\n\t\t\t\t\treceive(Array.from(event.currentTarget.files ?? []));\n\t\t\t\t\tevent.currentTarget.value = \"\";\n\t\t\t\t}}\n\t\t\t/>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tdisabled={disabled}\n\t\t\t\taria-label={`${browseLabel}: ${label}`}\n\t\t\t\taria-describedby={description ? `${id}-description` : undefined}\n\t\t\t\tdata-drag-active={dragging && !disabled}\n\t\t\t\tonClick={() => input.current?.click()}\n\t\t\t\tonDragEnter={(event) => {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tdepth.current += 1;\n\t\t\t\t\tif (!disabled) setDragging(true);\n\t\t\t\t}}\n\t\t\t\tonDragOver={(event) => {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tif (!disabled) event.dataTransfer.dropEffect = \"copy\";\n\t\t\t\t}}\n\t\t\t\tonDragLeave={(event) => {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tdepth.current = Math.max(0, depth.current - 1);\n\t\t\t\t\tif (depth.current === 0) setDragging(false);\n\t\t\t\t}}\n\t\t\t\tonDrop={(event) => {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tdepth.current = 0;\n\t\t\t\t\tsetDragging(false);\n\t\t\t\t\treceive(Array.from(event.dataTransfer.files));\n\t\t\t\t}}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"flex w-full min-w-0 flex-col items-center gap-basalt-space-lg rounded-basalt-lg border-2 border-dashed px-basalt-card py-basalt-card text-center transition-colors basalt-motion focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-basalt-ring disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\t\t\tdragging && !disabled\n\t\t\t\t\t\t? \"border-basalt-primary bg-basalt-selected\"\n\t\t\t\t\t\t: \"border-basalt-border bg-basalt-control hover:bg-basalt-hover\",\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t<Upload\n\t\t\t\t\tclassName=\"size-basalt-icon-display text-basalt-muted-foreground\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t/>\n\t\t\t\t<span className=\"text-basalt-base font-medium\">\n\t\t\t\t\t{dragging && !disabled ? dropLabel : label}\n\t\t\t\t</span>\n\t\t\t\t{description && (\n\t\t\t\t\t<span id={`${id}-description`} className=\"text-basalt-sm text-basalt-muted-foreground\">\n\t\t\t\t\t\t{description}\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t\t<span className=\"rounded-basalt-md border border-basalt-border px-basalt-space-lg py-basalt-space-sm text-basalt-sm\">\n\t\t\t\t\t{browseLabel}\n\t\t\t\t</span>\n\t\t\t</button>\n\t\t\t{rejections.length > 0 && (\n\t\t\t\t<ul role=\"alert\" className=\"space-y-basalt-space-sm text-basalt-sm text-basalt-destructive\">\n\t\t\t\t\t{rejections.map((item, index) => (\n\t\t\t\t\t\t<li key={`${item.file.name}-${index}`} className=\"break-words\">\n\t\t\t\t\t\t\t{formatRejection ? formatRejection(item) : `${item.file.name}: ${REASONS[item.code]}`}\n\t\t\t\t\t\t</li>\n\t\t\t\t\t))}\n\t\t\t\t</ul>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n"],"mappings":"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"}

package/dist/components/filter-bar.js

@@ -9,9 +9,9 @@ function o({ label: r, children: o, chips: s, active: c = !1, onClear: l, clearL
 	return /* @__PURE__ */ a("div", {
 		role: "group",
 		"aria-label": r,
-		className: e(t, "min-w-0 space-y-3", d),
+		className: e(t, "min-w-0 space-y-basalt-space-lg", d),
 		children: [/* @__PURE__ */ a("div", {
-			className: "flex flex-wrap items-end gap-3 [&>*]:min-w-0",
+			className: "flex flex-wrap items-end gap-basalt-space-lg [&>*]:min-w-0",
 			children: [o, c && l && /* @__PURE__ */ i(n, {
 				size: "sm",
 				variant: "ghost",
@@ -19,14 +19,14 @@ function o({ label: r, children: o, chips: s, active: c = !1, onClear: l, clearL
 				children: u
 			})]
 		}), s != null && /* @__PURE__ */ i("div", {
-			className: "flex flex-wrap items-center gap-2",
+			className: "flex flex-wrap items-center gap-basalt-space-lg",
 			children: s
 		})]
 	});
 }
 function s({ label: n, value: o, onRemove: s, removeLabel: c, disabled: l = !1, className: u }) {
 	return /* @__PURE__ */ a("span", {
-		className: e(t, "inline-flex max-w-full items-center gap-1 rounded-full border border-basalt-border bg-basalt-accent py-1 pl-3 pr-1 text-xs", u),
+		className: e(t, "inline-flex max-w-full items-center gap-basalt-space-sm rounded-basalt-full border border-basalt-border bg-basalt-selected py-basalt-space-sm pl-basalt-space-lg pr-basalt-space-sm text-basalt-sm", u),
 		children: [/* @__PURE__ */ a("span", {
 			className: "min-w-0 break-words",
 			children: [/* @__PURE__ */ a("span", {
@@ -38,9 +38,9 @@ function s({ label: n, value: o, onRemove: s, removeLabel: c, disabled: l = !1,
 			disabled: l,
 			"aria-label": c ?? `Remove ${n}`,
 			onClick: s,
-			className: "shrink-0 rounded-full p-1 focus-visible:outline-2 focus-visible:outline-basalt-ring disabled:opacity-50",
+			className: "shrink-0 rounded-basalt-full p-basalt-space-sm focus-visible:outline-2 focus-visible:outline-basalt-ring disabled:opacity-50",
 			children: /* @__PURE__ */ i(r, {
-				className: "size-3",
+				className: "size-basalt-icon-sm",
 				"aria-hidden": "true"
 			})
 		})]

package/dist/components/filter-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-bar.js","names":["FilterBar","label","cn","BASALT_UI_CLASS","className","children","active","onClear","Button","clearLabel","chips","FilterChip","value","removeLabel","onRemove","X"],"sources":["../../src/components/filter-bar.tsx"],"sourcesContent":["import { X } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { Button } from \"./button\";\n\nexport interface FilterBarProps {\n\t/** Accessible group name. */\n\tlabel: string;\n\t/** Application-owned search, select, and date controls. */\n\tchildren: ReactNode;\n\t/** Active chips, shown on their own wrapping row. */\n\tchips?: ReactNode;\n\t/** Whether the clear action is available. @default false */\n\tactive?: boolean;\n\t/** Requests clearing application-owned filters. */\n\tonClear?: () => void;\n\t/** Clear action text. @default \"Clear filters\" */\n\tclearLabel?: string;\n\t/** Additional root classes. */\n\tclassName?: string;\n}\n\n/** Layout only; URL serialization, query execution, and date presets belong to the caller. */\nexport function FilterBar({\n\tlabel,\n\tchildren,\n\tchips,\n\tactive = false,\n\tonClear,\n\tclearLabel = \"Clear filters\",\n\tclassName,\n}: FilterBarProps) {\n\treturn (\n\t\t<div\n\t\t\trole=\"group\"\n\t\t\taria-label={label}\n\t\t\tclassName={cn(BASALT_UI_CLASS, \"min-w-0 space-y-3\", className)}\n\t\t>\n\t\t\t<div className=\"flex flex-wrap items-end gap-3 [&>*]:min-w-0\">\n\t\t\t\t{children}\n\t\t\t\t{active && onClear && (\n\t\t\t\t\t<Button size=\"sm\" variant=\"ghost\" onClick={onClear}>\n\t\t\t\t\t\t{clearLabel}\n\t\t\t\t\t</Button>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t{chips != null && <div className=\"flex flex-wrap items-center gap-2\">{chips}</div>}\n\t\t</div>\n\t);\n}\n\nexport interface FilterChipProps {\n\t/** Filter dimension, e.g. Status. */\n\tlabel: string;\n\t/** Display value. */\n\tvalue: ReactNode;\n\t/** Requests removal from the application's filter state. */\n\tonRemove: () => void;\n\t/** Full accessible removal label; defaults to Remove plus the dimension label. */\n\tremoveLabel?: string;\n\t/** Disable removal. @default false */\n\tdisabled?: boolean;\n\t/** Additional root classes. */\n\tclassName?: string;\n}\n\nexport function FilterChip({\n\tlabel,\n\tvalue,\n\tonRemove,\n\tremoveLabel,\n\tdisabled = false,\n\tclassName,\n}: FilterChipProps) {\n\treturn (\n\t\t<span\n\t\t\tclassName={cn(\n\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\t\"inline-flex max-w-full items-center gap-1 rounded-full border border-basalt-border bg-basalt-accent py-1 pl-3 pr-1 text-xs\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t<span className=\"min-w-0 break-words\">\n\t\t\t\t<span className=\"text-basalt-muted-foreground\">{label}: </span>\n\t\t\t\t{value}\n\t\t\t</span>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tdisabled={disabled}\n\t\t\t\taria-label={removeLabel ?? `Remove ${label}`}\n\t\t\t\tonClick={onRemove}\n\t\t\t\tclassName=\"shrink-0 rounded-full p-1 focus-visible:outline-2 focus-visible:outline-basalt-ring disabled:opacity-50\"\n\t\t\t>\n\t\t\t\t<X className=\"size-3\" aria-hidden=\"true\" />\n\t\t\t</button>\n\t\t</span>\n\t);\n}\n"],"mappings":";;;;;;;AAwBA,SAAgBA,EAAU,EACzB,UACA,aACA,UACA,YAAS,IACT,YACA,gBAAa,iBACb,gBACkB;CAClB,OACC,kBAAC,OAAD;EACC,MAAK;EACL,cAAYC;EACZ,WAAWC,EAAGC,GAAiB,qBAAqBC,CAAS;EAH9D,UAAA,CAKC,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACEC,GACAC,KAAUC,KACV,kBAACC,GAAD;IAAQ,MAAK;IAAK,SAAQ;IAAQ,SAASD;IACzC,UAAAE;GACM,CAAA,CAEL;EACJ,CAAA,GAAAC,KAAS,QAAQ,kBAAC,OAAD;GAAK,WAAU;GAAqC,UAAAA;EAAW,CAAA,CAC7E;;AAEP;AAiBA,SAAgBC,EAAW,EAC1B,UACA,UACA,aACA,gBACA,cAAW,IACX,gBACmB;CACnB,OACC,kBAAC,QAAD;EACC,WAAWT,EACVC,GACA,8HACAC,CACD;EALD,UAAA,CAOC,kBAAC,QAAD;GAAM,WAAU;GAAhB,UAAA,CACC,kBAAC,QAAD;IAAM,WAAU;IAAhB,UAAA,CAAgDH,GAAM,IAAQ;GAC7D,CAAA,GAAAW,CACI;EACN,CAAA,GAAA,kBAAC,UAAD;GACC,MAAK;GACK;GACV,cAAYC,KAAe,UAAUZ;GACrC,SAASa;GACT,WAAU;GAEV,UAAA,kBAACC,GAAD;IAAG,WAAU;IAAS,eAAY;GAAQ,CAAA;EACnC,CAAA,CACH;;AAER"}
+{"version":3,"file":"filter-bar.js","names":["FilterBar","label","cn","BASALT_UI_CLASS","className","children","active","onClear","Button","clearLabel","chips","FilterChip","value","removeLabel","onRemove","X"],"sources":["../../src/components/filter-bar.tsx"],"sourcesContent":["import { X } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { Button } from \"./button\";\n\nexport interface FilterBarProps {\n\t/** Accessible group name. */\n\tlabel: string;\n\t/** Application-owned search, select, and date controls. */\n\tchildren: ReactNode;\n\t/** Active chips, shown on their own wrapping row. */\n\tchips?: ReactNode;\n\t/** Whether the clear action is available. @default false */\n\tactive?: boolean;\n\t/** Requests clearing application-owned filters. */\n\tonClear?: () => void;\n\t/** Clear action text. @default \"Clear filters\" */\n\tclearLabel?: string;\n\t/** Additional root classes. */\n\tclassName?: string;\n}\n\n/** Layout only; URL serialization, query execution, and date presets belong to the caller. */\nexport function FilterBar({\n\tlabel,\n\tchildren,\n\tchips,\n\tactive = false,\n\tonClear,\n\tclearLabel = \"Clear filters\",\n\tclassName,\n}: FilterBarProps) {\n\treturn (\n\t\t<div\n\t\t\trole=\"group\"\n\t\t\taria-label={label}\n\t\t\tclassName={cn(BASALT_UI_CLASS, \"min-w-0 space-y-basalt-space-lg\", className)}\n\t\t>\n\t\t\t<div className=\"flex flex-wrap items-end gap-basalt-space-lg [&>*]:min-w-0\">\n\t\t\t\t{children}\n\t\t\t\t{active && onClear && (\n\t\t\t\t\t<Button size=\"sm\" variant=\"ghost\" onClick={onClear}>\n\t\t\t\t\t\t{clearLabel}\n\t\t\t\t\t</Button>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t{chips != null && (\n\t\t\t\t<div className=\"flex flex-wrap items-center gap-basalt-space-lg\">{chips}</div>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n\nexport interface FilterChipProps {\n\t/** Filter dimension, e.g. Status. */\n\tlabel: string;\n\t/** Display value. */\n\tvalue: ReactNode;\n\t/** Requests removal from the application's filter state. */\n\tonRemove: () => void;\n\t/** Full accessible removal label; defaults to Remove plus the dimension label. */\n\tremoveLabel?: string;\n\t/** Disable removal. @default false */\n\tdisabled?: boolean;\n\t/** Additional root classes. */\n\tclassName?: string;\n}\n\nexport function FilterChip({\n\tlabel,\n\tvalue,\n\tonRemove,\n\tremoveLabel,\n\tdisabled = false,\n\tclassName,\n}: FilterChipProps) {\n\treturn (\n\t\t<span\n\t\t\tclassName={cn(\n\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\t\"inline-flex max-w-full items-center gap-basalt-space-sm rounded-basalt-full border border-basalt-border bg-basalt-selected py-basalt-space-sm pl-basalt-space-lg pr-basalt-space-sm text-basalt-sm\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t<span className=\"min-w-0 break-words\">\n\t\t\t\t<span className=\"text-basalt-muted-foreground\">{label}: </span>\n\t\t\t\t{value}\n\t\t\t</span>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tdisabled={disabled}\n\t\t\t\taria-label={removeLabel ?? `Remove ${label}`}\n\t\t\t\tonClick={onRemove}\n\t\t\t\tclassName=\"shrink-0 rounded-basalt-full p-basalt-space-sm focus-visible:outline-2 focus-visible:outline-basalt-ring disabled:opacity-50\"\n\t\t\t>\n\t\t\t\t<X className=\"size-basalt-icon-sm\" aria-hidden=\"true\" />\n\t\t\t</button>\n\t\t</span>\n\t);\n}\n"],"mappings":";;;;;;;AAwBA,SAAgBA,EAAU,EACzB,UACA,aACA,UACA,YAAS,IACT,YACA,gBAAa,iBACb,gBACkB;CAClB,OACC,kBAAC,OAAD;EACC,MAAK;EACL,cAAYC;EACZ,WAAWC,EAAGC,GAAiB,mCAAmCC,CAAS;EAH5E,UAAA,CAKC,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACEC,GACAC,KAAUC,KACV,kBAACC,GAAD;IAAQ,MAAK;IAAK,SAAQ;IAAQ,SAASD;IACzC,UAAAE;GACM,CAAA,CAEL;EACJ,CAAA,GAAAC,KAAS,QACT,kBAAC,OAAD;GAAK,WAAU;GAAmD,UAAAA;EAAW,CAAA,CAE1E;;AAEP;AAiBA,SAAgBC,EAAW,EAC1B,UACA,UACA,aACA,gBACA,cAAW,IACX,gBACmB;CACnB,OACC,kBAAC,QAAD;EACC,WAAWT,EACVC,GACA,sMACAC,CACD;EALD,UAAA,CAOC,kBAAC,QAAD;GAAM,WAAU;GAAhB,UAAA,CACC,kBAAC,QAAD;IAAM,WAAU;IAAhB,UAAA,CAAgDH,GAAM,IAAQ;GAC7D,CAAA,GAAAW,CACI;EACN,CAAA,GAAA,kBAAC,UAAD;GACC,MAAK;GACK;GACV,cAAYC,KAAe,UAAUZ;GACrC,SAASa;GACT,WAAU;GAEV,UAAA,kBAACC,GAAD;IAAG,WAAU;IAAsB,eAAY;GAAQ,CAAA;EAChD,CAAA,CACH;;AAER"}

package/dist/components/flow.js

@@ -8,10 +8,10 @@ function s() {
 	let e = `flow-arrow-${i().replace(/:/g, "")}`;
 	return /* @__PURE__ */ a("li", {
 		"aria-hidden": "true",
-		className: "flex w-10 shrink-0 items-center text-basalt-muted-foreground",
+		className: "flex w-basalt-10 shrink-0 items-center text-basalt-muted-foreground",
 		children: /* @__PURE__ */ o("svg", {
 			viewBox: "0 0 40 16",
-			className: "h-4 w-10 overflow-visible",
+			className: "h-basalt-4 w-basalt-10 overflow-visible",
 			overflow: "visible",
 			"aria-hidden": "true",
 			children: [/* @__PURE__ */ a("defs", { children: /* @__PURE__ */ a("marker", {
@@ -47,7 +47,8 @@ function c({ className: i, children: c, "aria-label": l = "Flow" }) {
 }
 function l({ children: e }) {
 	return /* @__PURE__ */ a("li", {
-		className: "rounded-basalt-md border border-basalt-border bg-basalt-secondary px-3 py-2 text-sm",
+		"data-basalt-surface": "",
+		className: "rounded-basalt-md border border-basalt-border px-basalt-layout py-basalt-layout-sm text-basalt-base",
 		children: e
 	});
 }

package/dist/components/flow.js.map

@@ -1 +1 @@
-{"version":3,"file":"flow.js","names":["FlowArrow","id","useId","Flow","ariaLabel","nodes","Children","children","cn","BASALT_UI_CLASS","className","Fragment","child","index","FlowNode"],"sources":["../../src/components/flow.tsx"],"sourcesContent":["import { Children, Fragment, type ReactNode, useId } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\n\nfunction FlowArrow() {\n\tconst id = `flow-arrow-${useId().replace(/:/g, \"\")}`;\n\treturn (\n\t\t<li aria-hidden=\"true\" className=\"flex w-10 shrink-0 items-center text-basalt-muted-foreground\">\n\t\t\t<svg\n\t\t\t\tviewBox=\"0 0 40 16\"\n\t\t\t\tclassName=\"h-4 w-10 overflow-visible\"\n\t\t\t\toverflow=\"visible\"\n\t\t\t\taria-hidden=\"true\"\n\t\t\t>\n\t\t\t\t<defs>\n\t\t\t\t\t<marker\n\t\t\t\t\t\tid={id}\n\t\t\t\t\t\tmarkerWidth=\"8\"\n\t\t\t\t\t\tmarkerHeight=\"8\"\n\t\t\t\t\t\trefX=\"0\"\n\t\t\t\t\t\trefY=\"4\"\n\t\t\t\t\t\torient=\"auto\"\n\t\t\t\t\t\tmarkerUnits=\"userSpaceOnUse\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td=\"M 0,1.5 Q 0,0 1.5,0 Q 3.5,1 5.8,3.2 Q 6.5,4 5.8,4.8 Q 3.5,7 1.5,8 Q 0,8 0,6.5 Z\"\n\t\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t\t\tstroke=\"none\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</marker>\n\t\t\t\t</defs>\n\t\t\t\t<path\n\t\t\t\t\td=\"M 0 8 L 32 8\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\tstrokeWidth=\"2\"\n\t\t\t\t\tmarkerEnd={`url(#${id})`}\n\t\t\t\t/>\n\t\t\t</svg>\n\t\t</li>\n\t);\n}\n\nexport type FlowProps = {\n\t/**\n\t * Accessible name for the step list.\n\t * @default \"Flow\"\n\t */\n\t\"aria-label\"?: string;\n\t/**\n\t * Additional classes for the list.\n\t */\n\tclassName?: string;\n\t/**\n\t * Step nodes.\n\t */\n\tchildren: ReactNode;\n};\n\nexport function Flow({ className, children, \"aria-label\": ariaLabel = \"Flow\" }: FlowProps) {\n\tconst nodes = Children.toArray(children);\n\treturn (\n\t\t<ol aria-label={ariaLabel} className={cn(BASALT_UI_CLASS, \"flex items-center\", className)}>\n\t\t\t{nodes.map((child, index) => (\n\t\t\t\t<Fragment key={index}>\n\t\t\t\t\t{child}\n\t\t\t\t\t{index < nodes.length - 1 ? <FlowArrow /> : null}\n\t\t\t\t</Fragment>\n\t\t\t))}\n\t\t</ol>\n\t);\n}\n\nexport type FlowNodeProps = {\n\t/**\n\t * Label for the step.\n\t */\n\tchildren: ReactNode;\n};\n\nexport function FlowNode({ children }: FlowNodeProps) {\n\treturn (\n\t\t<li className=\"rounded-basalt-md border border-basalt-border bg-basalt-secondary px-3 py-2 text-sm\">\n\t\t\t{children}\n\t\t</li>\n\t);\n}\n"],"mappings":";;;;;;AAIA,SAASA,IAAY;CACpB,IAAMC,IAAK,cAAcC,EAAM,CAAC,CAAC,QAAQ,MAAM,EAAE;CACjD,OACC,kBAAC,MAAD;EAAI,eAAY;EAAO,WAAU;EAChC,UAAA,kBAAC,OAAD;GACC,SAAQ;GACR,WAAU;GACV,UAAS;GACT,eAAY;GAJb,UAAA,CAMC,kBAAC,QAAD,EAAA,UACC,kBAAC,UAAD;IACK;IACJ,aAAY;IACZ,cAAa;IACb,MAAK;IACL,MAAK;IACL,QAAO;IACP,aAAY;IAEZ,UAAA,kBAAC,QAAD;KACC,GAAE;KACF,MAAK;KACL,QAAO;IACP,CAAA;GACM,CAAA,EACH,CAAA,GACN,kBAAC,QAAD;IACC,GAAE;IACF,MAAK;IACL,QAAO;IACP,aAAY;IACZ,WAAW,QAAQD,EAAG;GACtB,CAAA,CACG;;CACF,CAAA;AAEN;AAkBA,SAAgBE,EAAK,EAAE,cAAW,aAAU,cAAcC,IAAY,UAAqB;CAC1F,IAAMC,IAAQC,EAAS,QAAQC,CAAQ;CACvC,OACC,kBAAC,MAAD;EAAI,cAAYH;EAAW,WAAWI,EAAGC,GAAiB,qBAAqBC,CAAS;EACtF,UAAAL,EAAM,KAAK,GAAO,MAClB,kBAACM,GAAD,EAAA,UAAA,CACEC,GACAC,IAAQR,EAAM,SAAS,IAAI,kBAACL,GAAD,CAAY,CAAA,IAAI,IACnC,EAAA,GAHKa,CAGL,CACV;CACE,CAAA;AAEN;AASA,SAAgBC,EAAS,EAAE,eAA2B;CACrD,OACC,kBAAC,MAAD;EAAI,WAAU;EACZ;CACE,CAAA;AAEN"}
+{"version":3,"file":"flow.js","names":["FlowArrow","id","useId","Flow","ariaLabel","nodes","Children","children","cn","BASALT_UI_CLASS","className","Fragment","child","index","FlowNode"],"sources":["../../src/components/flow.tsx"],"sourcesContent":["import { Children, Fragment, type ReactNode, useId } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\n\nfunction FlowArrow() {\n\tconst id = `flow-arrow-${useId().replace(/:/g, \"\")}`;\n\treturn (\n\t\t<li\n\t\t\taria-hidden=\"true\"\n\t\t\tclassName=\"flex w-basalt-10 shrink-0 items-center text-basalt-muted-foreground\"\n\t\t>\n\t\t\t<svg\n\t\t\t\tviewBox=\"0 0 40 16\"\n\t\t\t\tclassName=\"h-basalt-4 w-basalt-10 overflow-visible\"\n\t\t\t\toverflow=\"visible\"\n\t\t\t\taria-hidden=\"true\"\n\t\t\t>\n\t\t\t\t<defs>\n\t\t\t\t\t<marker\n\t\t\t\t\t\tid={id}\n\t\t\t\t\t\tmarkerWidth=\"8\"\n\t\t\t\t\t\tmarkerHeight=\"8\"\n\t\t\t\t\t\trefX=\"0\"\n\t\t\t\t\t\trefY=\"4\"\n\t\t\t\t\t\torient=\"auto\"\n\t\t\t\t\t\tmarkerUnits=\"userSpaceOnUse\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td=\"M 0,1.5 Q 0,0 1.5,0 Q 3.5,1 5.8,3.2 Q 6.5,4 5.8,4.8 Q 3.5,7 1.5,8 Q 0,8 0,6.5 Z\"\n\t\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t\t\tstroke=\"none\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</marker>\n\t\t\t\t</defs>\n\t\t\t\t<path\n\t\t\t\t\td=\"M 0 8 L 32 8\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\tstrokeWidth=\"2\"\n\t\t\t\t\tmarkerEnd={`url(#${id})`}\n\t\t\t\t/>\n\t\t\t</svg>\n\t\t</li>\n\t);\n}\n\nexport type FlowProps = {\n\t/**\n\t * Accessible name for the step list.\n\t * @default \"Flow\"\n\t */\n\t\"aria-label\"?: string;\n\t/**\n\t * Additional classes for the list.\n\t */\n\tclassName?: string;\n\t/**\n\t * Step nodes.\n\t */\n\tchildren: ReactNode;\n};\n\nexport function Flow({ className, children, \"aria-label\": ariaLabel = \"Flow\" }: FlowProps) {\n\tconst nodes = Children.toArray(children);\n\treturn (\n\t\t<ol aria-label={ariaLabel} className={cn(BASALT_UI_CLASS, \"flex items-center\", className)}>\n\t\t\t{nodes.map((child, index) => (\n\t\t\t\t<Fragment key={index}>\n\t\t\t\t\t{child}\n\t\t\t\t\t{index < nodes.length - 1 ? <FlowArrow /> : null}\n\t\t\t\t</Fragment>\n\t\t\t))}\n\t\t</ol>\n\t);\n}\n\nexport type FlowNodeProps = {\n\t/**\n\t * Label for the step.\n\t */\n\tchildren: ReactNode;\n};\n\nexport function FlowNode({ children }: FlowNodeProps) {\n\treturn (\n\t\t<li\n\t\t\tdata-basalt-surface=\"\"\n\t\t\tclassName=\"rounded-basalt-md border border-basalt-border px-basalt-layout py-basalt-layout-sm text-basalt-base\"\n\t\t>\n\t\t\t{children}\n\t\t</li>\n\t);\n}\n"],"mappings":";;;;;;AAIA,SAASA,IAAY;CACpB,IAAMC,IAAK,cAAcC,EAAM,CAAC,CAAC,QAAQ,MAAM,EAAE;CACjD,OACC,kBAAC,MAAD;EACC,eAAY;EACZ,WAAU;EAEV,UAAA,kBAAC,OAAD;GACC,SAAQ;GACR,WAAU;GACV,UAAS;GACT,eAAY;GAJb,UAAA,CAMC,kBAAC,QAAD,EAAA,UACC,kBAAC,UAAD;IACK;IACJ,aAAY;IACZ,cAAa;IACb,MAAK;IACL,MAAK;IACL,QAAO;IACP,aAAY;IAEZ,UAAA,kBAAC,QAAD;KACC,GAAE;KACF,MAAK;KACL,QAAO;IACP,CAAA;GACM,CAAA,EACH,CAAA,GACN,kBAAC,QAAD;IACC,GAAE;IACF,MAAK;IACL,QAAO;IACP,aAAY;IACZ,WAAW,QAAQD,EAAG;GACtB,CAAA,CACG;;CACF,CAAA;AAEN;AAkBA,SAAgBE,EAAK,EAAE,cAAW,aAAU,cAAcC,IAAY,UAAqB;CAC1F,IAAMC,IAAQC,EAAS,QAAQC,CAAQ;CACvC,OACC,kBAAC,MAAD;EAAI,cAAYH;EAAW,WAAWI,EAAGC,GAAiB,qBAAqBC,CAAS;EACtF,UAAAL,EAAM,KAAK,GAAO,MAClB,kBAACM,GAAD,EAAA,UAAA,CACEC,GACAC,IAAQR,EAAM,SAAS,IAAI,kBAACL,GAAD,CAAY,CAAA,IAAI,IACnC,EAAA,GAHKa,CAGL,CACV;CACE,CAAA;AAEN;AASA,SAAgBC,EAAS,EAAE,eAA2B;CACrD,OACC,kBAAC,MAAD;EACC,uBAAoB;EACpB,WAAU;EAET;CACE,CAAA;AAEN"}

package/dist/components/grid.d.ts

@@ -5,13 +5,15 @@ export type GridProps = {
      * @default 2
      */
     columns?: number;
+    /** Space between layout items: 12, 16, 24 or 32px reference. @default "md" */
+    gap?: "sm" | "md" | "lg" | "xl";
     /**
      * Additional classes for the grid.
      */
     className?: string;
     children?: ReactNode;
 };
-export declare function Grid({ className, columns, style, ...props }: GridProps & HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+export declare function Grid({ className, columns, gap, style, ...props }: GridProps & HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
 export interface GridItemProps extends HTMLAttributes<HTMLDivElement> {
 }
 export declare function GridItem({ className, ...props }: GridItemProps): import("react").JSX.Element;

package/dist/components/grid.js

@@ -2,23 +2,30 @@
 import { cn as e } from "../utils/cn.js";
 import { jsx as t } from "react/jsx-runtime";
 //#region src/components/grid.tsx
-function n({ className: n, columns: r = 2, style: i, ...a }) {
+var n = {
+	sm: "gap-basalt-layout-sm",
+	md: "gap-basalt-layout",
+	lg: "gap-basalt-layout-lg",
+	xl: "gap-basalt-layout-xl"
+};
+function r({ className: r, columns: i = 2, gap: a = "md", style: o, ...s }) {
 	return /* @__PURE__ */ t("div", {
-		className: e("grid gap-3", n),
-		...a,
+		className: e("grid", n[a], r),
+		...s,
 		style: {
-			gridTemplateColumns: `repeat(${r}, minmax(0, 1fr))`,
-			...i
+			gridTemplateColumns: `repeat(${i}, minmax(0, 1fr))`,
+			...o
 		}
 	});
 }
-function r({ className: n, ...r }) {
+function i({ className: n, ...r }) {
 	return /* @__PURE__ */ t("div", {
-		className: e("flex items-center justify-center rounded-basalt-lg bg-basalt-secondary px-6 py-8 text-sm", n),
+		"data-basalt-surface": "",
+		className: e("flex items-center justify-center rounded-basalt-lg p-basalt-card text-basalt-base", n),
 		...r
 	});
 }
 //#endregion
-export { n as Grid, r as GridItem };
+export { r as Grid, i as GridItem };
 
 //# sourceMappingURL=grid.js.map