@nocoo/basalt 2.0.3 → 2.1.0

package/dist/components/filter-bar.js

@@ -0,0 +1,52 @@
+"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 { X as r } from "lucide-react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/filter-bar.tsx
+function o({ label: r, children: o, chips: s, active: c = !1, onClear: l, clearLabel: u = "Clear filters", className: d }) {
+	return /* @__PURE__ */ a("div", {
+		role: "group",
+		"aria-label": r,
+		className: e(t, "min-w-0 space-y-3", d),
+		children: [/* @__PURE__ */ a("div", {
+			className: "flex flex-wrap items-end gap-3 [&>*]:min-w-0",
+			children: [o, c && l && /* @__PURE__ */ i(n, {
+				size: "sm",
+				variant: "ghost",
+				onClick: l,
+				children: u
+			})]
+		}), s != null && /* @__PURE__ */ i("div", {
+			className: "flex flex-wrap items-center gap-2",
+			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),
+		children: [/* @__PURE__ */ a("span", {
+			className: "min-w-0 break-words",
+			children: [/* @__PURE__ */ a("span", {
+				className: "text-basalt-muted-foreground",
+				children: [n, ": "]
+			}), o]
+		}), /* @__PURE__ */ i("button", {
+			type: "button",
+			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",
+			children: /* @__PURE__ */ i(r, {
+				className: "size-3",
+				"aria-hidden": "true"
+			})
+		})]
+	});
+}
+//#endregion
+export { o as FilterBar, s as FilterChip };
+
+//# sourceMappingURL=filter-bar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"filter-bar.js","names":[],"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,SAAgB,EAAU,EACzB,UACA,aACA,UACA,YAAS,IACT,YACA,gBAAa,iBACb,gBACkB;CAClB,OACC,kBAAC,OAAD;EACC,MAAK;EACL,cAAY;EACZ,WAAW,EAAG,GAAiB,qBAAqB,CAAS;EAH9D,UAAA,CAKC,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,GACA,KAAU,KACV,kBAAC,GAAD;IAAQ,MAAK;IAAK,SAAQ;IAAQ,SAAS;IACzC,UAAA;GACM,CAAA,CAEL;EACJ,CAAA,GAAA,KAAS,QAAQ,kBAAC,OAAD;GAAK,WAAU;GAAqC,UAAA;EAAW,CAAA,CAC7E;;AAEP;AAiBA,SAAgB,EAAW,EAC1B,UACA,UACA,aACA,gBACA,cAAW,IACX,gBACmB;CACnB,OACC,kBAAC,QAAD;EACC,WAAW,EACV,GACA,8HACA,CACD;EALD,UAAA,CAOC,kBAAC,QAAD;GAAM,WAAU;GAAhB,UAAA,CACC,kBAAC,QAAD;IAAM,WAAU;IAAhB,UAAA,CAAgD,GAAM,IAAQ;GAC7D,CAAA,GAAA,CACI;EACN,CAAA,GAAA,kBAAC,UAAD;GACC,MAAK;GACK;GACV,cAAY,KAAe,UAAU;GACrC,SAAS;GACT,WAAU;GAEV,UAAA,kBAAC,GAAD;IAAG,WAAU;IAAS,eAAY;GAAQ,CAAA;EACnC,CAAA,CACH;;AAER"}

package/dist/components/flow.js

@@ -1,19 +1,20 @@
 "use client";
 import { cn as e } from "../utils/cn.js";
-import { Children as t, Fragment as n, useId as r } from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { BASALT_UI_CLASS as t } from "../utils/control-surface.js";
+import { Children as n, Fragment as r, useId as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/components/flow.tsx
-function o() {
-	let e = `flow-arrow-${r().replace(/:/g, "")}`;
-	return /* @__PURE__ */ i("li", {
+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",
-		children: /* @__PURE__ */ a("svg", {
+		children: /* @__PURE__ */ o("svg", {
 			viewBox: "0 0 40 16",
 			className: "h-4 w-10 overflow-visible",
 			overflow: "visible",
 			"aria-hidden": "true",
-			children: [/* @__PURE__ */ i("defs", { children: /* @__PURE__ */ i("marker", {
+			children: [/* @__PURE__ */ a("defs", { children: /* @__PURE__ */ a("marker", {
 				id: e,
 				markerWidth: "8",
 				markerHeight: "8",
@@ -21,12 +22,12 @@ function o() {
 				refY: "4",
 				orient: "auto",
 				markerUnits: "userSpaceOnUse",
-				children: /* @__PURE__ */ i("path", {
+				children: /* @__PURE__ */ a("path", {
 					d: "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",
 					fill: "currentColor",
 					stroke: "none"
 				})
-			}) }), /* @__PURE__ */ i("path", {
+			}) }), /* @__PURE__ */ a("path", {
 				d: "M 0 8 L 32 8",
 				fill: "none",
 				stroke: "currentColor",
@@ -36,21 +37,21 @@ function o() {
 		})
 	});
 }
-function s({ className: r, children: s, "aria-label": c = "Flow" }) {
-	let l = t.toArray(s);
-	return /* @__PURE__ */ i("ol", {
-		"aria-label": c,
-		className: e("flex items-center", r),
-		children: l.map((e, t) => /* @__PURE__ */ a(n, { children: [e, t < l.length - 1 ? /* @__PURE__ */ i(o, {}) : null] }, t))
+function c({ className: i, children: c, "aria-label": l = "Flow" }) {
+	let u = n.toArray(c);
+	return /* @__PURE__ */ a("ol", {
+		"aria-label": l,
+		className: e(t, "flex items-center", i),
+		children: u.map((e, t) => /* @__PURE__ */ o(r, { children: [e, t < u.length - 1 ? /* @__PURE__ */ a(s, {}) : null] }, t))
 	});
 }
-function c({ children: e }) {
-	return /* @__PURE__ */ i("li", {
+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",
 		children: e
 	});
 }
 //#endregion
-export { s as Flow, c as FlowNode };
+export { c as Flow, l as FlowNode };
 
 //# sourceMappingURL=flow.js.map

package/dist/components/flow.js.map

@@ -1 +1 @@
-{"version":3,"file":"flow.js","names":[],"sources":["../../src/components/flow.tsx"],"sourcesContent":["import { Children, Fragment, type ReactNode, useId } from \"react\";\nimport { cn } from \"../utils/cn\";\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(\"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":";;;;;AAGA,SAAS,IAAY;CACpB,IAAM,IAAK,cAAc,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,QAAQ,EAAG;GACtB,CAAA,CACG;;CACF,CAAA;AAEN;AAkBA,SAAgB,EAAK,EAAE,cAAW,aAAU,cAAc,IAAY,UAAqB;CAC1F,IAAM,IAAQ,EAAS,QAAQ,CAAQ;CACvC,OACC,kBAAC,MAAD;EAAI,cAAY;EAAW,WAAW,EAAG,qBAAqB,CAAS;EACrE,UAAA,EAAM,KAAK,GAAO,MAClB,kBAAC,GAAD,EAAA,UAAA,CACE,GACA,IAAQ,EAAM,SAAS,IAAI,kBAAC,GAAD,CAAY,CAAA,IAAI,IACnC,EAAA,GAHK,CAGL,CACV;CACE,CAAA;AAEN;AASA,SAAgB,EAAS,EAAE,eAA2B;CACrD,OACC,kBAAC,MAAD;EAAI,WAAU;EACZ;CACE,CAAA;AAEN"}
+{"version":3,"file":"flow.js","names":[],"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,SAAS,IAAY;CACpB,IAAM,IAAK,cAAc,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,QAAQ,EAAG;GACtB,CAAA,CACG;;CACF,CAAA;AAEN;AAkBA,SAAgB,EAAK,EAAE,cAAW,aAAU,cAAc,IAAY,UAAqB;CAC1F,IAAM,IAAQ,EAAS,QAAQ,CAAQ;CACvC,OACC,kBAAC,MAAD;EAAI,cAAY;EAAW,WAAW,EAAG,GAAiB,qBAAqB,CAAS;EACtF,UAAA,EAAM,KAAK,GAAO,MAClB,kBAAC,GAAD,EAAA,UAAA,CACE,GACA,IAAQ,EAAM,SAAS,IAAI,kBAAC,GAAD,CAAY,CAAA,IAAI,IACnC,EAAA,GAHK,CAGL,CACV;CACE,CAAA;AAEN;AASA,SAAgB,EAAS,EAAE,eAA2B;CACrD,OACC,kBAAC,MAAD;EAAI,WAAU;EACZ;CACE,CAAA;AAEN"}

package/dist/components/grid.d.ts

@@ -12,4 +12,6 @@ export type GridProps = {
     children?: ReactNode;
 };
 export declare function Grid({ className, columns, style, ...props }: GridProps & HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
-export declare function GridItem({ className, ...props }: 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.map

@@ -1 +1 @@
-{"version":3,"file":"grid.js","names":[],"sources":["../../src/components/grid.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../utils/cn\";\n\nexport type GridProps = {\n\t/**\n\t * Number of equal columns.\n\t * @default 2\n\t */\n\tcolumns?: number;\n\t/**\n\t * Additional classes for the grid.\n\t */\n\tclassName?: string;\n\tchildren?: ReactNode;\n};\n\nexport function Grid({\n\tclassName,\n\tcolumns = 2,\n\tstyle,\n\t...props\n}: GridProps & HTMLAttributes<HTMLDivElement>) {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\"grid gap-3\", className)}\n\t\t\t{...props}\n\t\t\tstyle={{\n\t\t\t\tgridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,\n\t\t\t\t...style,\n\t\t\t}}\n\t\t/>\n\t);\n}\n\nexport function GridItem({ className, ...props }: HTMLAttributes<HTMLDivElement>) {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"flex items-center justify-center rounded-basalt-lg bg-basalt-secondary px-6 py-8 text-sm\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n"],"mappings":";;;;AAgBA,SAAgB,EAAK,EACpB,cACA,aAAU,GACV,UACA,GAAG,KAC2C;CAC9C,OACC,kBAAC,OAAD;EACC,WAAW,EAAG,cAAc,CAAS;EACrC,GAAI;EACJ,OAAO;GACN,qBAAqB,UAAU,EAAQ;GACvC,GAAG;EACJ;CACA,CAAA;AAEH;AAEA,SAAgB,EAAS,EAAE,cAAW,GAAG,KAAyC;CACjF,OACC,kBAAC,OAAD;EACC,WAAW,EACV,4FACA,CACD;EACA,GAAI;CACJ,CAAA;AAEH"}
+{"version":3,"file":"grid.js","names":[],"sources":["../../src/components/grid.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../utils/cn\";\n\nexport type GridProps = {\n\t/**\n\t * Number of equal columns.\n\t * @default 2\n\t */\n\tcolumns?: number;\n\t/**\n\t * Additional classes for the grid.\n\t */\n\tclassName?: string;\n\tchildren?: ReactNode;\n};\n\nexport function Grid({\n\tclassName,\n\tcolumns = 2,\n\tstyle,\n\t...props\n}: GridProps & HTMLAttributes<HTMLDivElement>) {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\"grid gap-3\", className)}\n\t\t\t{...props}\n\t\t\tstyle={{\n\t\t\t\tgridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,\n\t\t\t\t...style,\n\t\t\t}}\n\t\t/>\n\t);\n}\n\nexport interface GridItemProps extends HTMLAttributes<HTMLDivElement> {}\n\nexport function GridItem({ className, ...props }: GridItemProps) {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"flex items-center justify-center rounded-basalt-lg bg-basalt-secondary px-6 py-8 text-sm\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n"],"mappings":";;;;AAgBA,SAAgB,EAAK,EACpB,cACA,aAAU,GACV,UACA,GAAG,KAC2C;CAC9C,OACC,kBAAC,OAAD;EACC,WAAW,EAAG,cAAc,CAAS;EACrC,GAAI;EACJ,OAAO;GACN,qBAAqB,UAAU,EAAQ;GACvC,GAAG;EACJ;CACA,CAAA;AAEH;AAIA,SAAgB,EAAS,EAAE,cAAW,GAAG,KAAwB;CAChE,OACC,kBAAC,OAAD;EACC,WAAW,EACV,4FACA,CACD;EACA,GAAI;CACJ,CAAA;AAEH"}

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

@@ -1,5 +1,115 @@
 import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
 import * as React from "react";
+type RadixHoverCardProps = React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Root>;
+type RadixHoverCardTriggerProps = React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Trigger>;
+type RadixHoverCardContentProps = React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>;
+export interface HoverCardProps extends Omit<RadixHoverCardProps, "open" | "defaultOpen" | "onOpenChange" | "openDelay" | "closeDelay"> {
+    /**
+     * Controlled open state of the hover card.
+     */
+    open?: RadixHoverCardProps["open"];
+    /**
+     * Open state of the hover card when initially rendered in uncontrolled mode.
+     * @default false
+     */
+    defaultOpen?: RadixHoverCardProps["defaultOpen"];
+    /**
+     * Callback invoked when open state changes.
+     */
+    onOpenChange?: RadixHoverCardProps["onOpenChange"];
+    /**
+     * Delay in milliseconds before the hover card opens after hovering trigger.
+     * @default 700
+     */
+    openDelay?: RadixHoverCardProps["openDelay"];
+    /**
+     * Delay in milliseconds before the hover card closes after hover leaves trigger or content.
+     * @default 300
+     */
+    closeDelay?: RadixHoverCardProps["closeDelay"];
+}
 export declare const HoverCard: React.FC<HoverCardPrimitive.HoverCardProps>;
+export interface HoverCardTriggerProps extends Omit<RadixHoverCardTriggerProps, "asChild"> {
+    /**
+     * Change the default rendered anchor element to the child element, merging props and behavior.
+     * @default false
+     */
+    asChild?: RadixHoverCardTriggerProps["asChild"];
+}
 export declare const HoverCardTrigger: React.ForwardRefExoticComponent<HoverCardPrimitive.HoverCardTriggerProps & React.RefAttributes<HTMLAnchorElement>>;
-export declare const HoverCardContent: React.ForwardRefExoticComponent<Omit<HoverCardPrimitive.HoverCardContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface HoverCardContentProps extends Omit<RadixHoverCardContentProps, "side" | "sideOffset" | "align" | "alignOffset" | "avoidCollisions" | "collisionBoundary" | "collisionPadding" | "arrowPadding" | "sticky" | "hideWhenDetached" | "forceMount" | "onEscapeKeyDown" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside"> {
+    /**
+     * Preferred placement side relative to trigger.
+     * @default "bottom"
+     */
+    side?: RadixHoverCardContentProps["side"];
+    /**
+     * Distance in pixels between trigger and floating content panel.
+     * @default 8
+     */
+    sideOffset?: RadixHoverCardContentProps["sideOffset"];
+    /**
+     * Preferred alignment along the side axis.
+     * @default "center"
+     */
+    align?: RadixHoverCardContentProps["align"];
+    /**
+     * Offset in pixels from the start or end alignment position.
+     * @default 0
+     */
+    alignOffset?: RadixHoverCardContentProps["alignOffset"];
+    /**
+     * Whether to reposition content to avoid viewport boundary collisions.
+     * @default true
+     */
+    avoidCollisions?: RadixHoverCardContentProps["avoidCollisions"];
+    /**
+     * Element or elements bounding boundary collision calculations.
+     * @default []
+     */
+    collisionBoundary?: RadixHoverCardContentProps["collisionBoundary"];
+    /**
+     * Virtual padding from collision boundaries in pixels.
+     * @default 0
+     */
+    collisionPadding?: RadixHoverCardContentProps["collisionPadding"];
+    /**
+     * Padding in pixels between popper arrow and floating panel edge.
+     * @default 0
+     */
+    arrowPadding?: RadixHoverCardContentProps["arrowPadding"];
+    /**
+     * Sticky positioning behavior along the align axis when overflowing.
+     * @default "partial"
+     */
+    sticky?: RadixHoverCardContentProps["sticky"];
+    /**
+     * Whether to hide content completely when trigger is fully occluded.
+     * @default false
+     */
+    hideWhenDetached?: RadixHoverCardContentProps["hideWhenDetached"];
+    /**
+     * Force mounting content in DOM for external animation controls.
+     * When forceMount is true, the content remains mounted even when closed.
+     * The caller is responsible for visibility transitions and unmounting after animation completes.
+     */
+    forceMount?: true;
+    /**
+     * Callback fired when the Escape key is down on the dismissable layer. Can be prevented.
+     */
+    onEscapeKeyDown?: RadixHoverCardContentProps["onEscapeKeyDown"];
+    /**
+     * Callback fired when a pointerdown event happens outside the bounds of the dismissable layer. Can be prevented.
+     */
+    onPointerDownOutside?: RadixHoverCardContentProps["onPointerDownOutside"];
+    /**
+     * Callback fired when focus moves outside the bounds of the dismissable layer. Can be prevented.
+     */
+    onFocusOutside?: RadixHoverCardContentProps["onFocusOutside"];
+    /**
+     * Callback fired when an interaction (pointerdown or focus) happens outside the bounds of the dismissable layer. Can be prevented.
+     */
+    onInteractOutside?: RadixHoverCardContentProps["onInteractOutside"];
+}
+export declare const HoverCardContent: React.ForwardRefExoticComponent<HoverCardContentProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/hover-card.js

@@ -5,12 +5,15 @@ import * as r from "react";
 import { jsx as i } from "react/jsx-runtime";
 import * as a from "@radix-ui/react-hover-card";
 //#region src/components/hover-card.tsx
-var o = a.Root, s = a.Trigger, c = r.forwardRef(({ className: r, sideOffset: o = 8, ...s }, c) => /* @__PURE__ */ i(a.Portal, { children: /* @__PURE__ */ i(a.Content, {
-	ref: c,
-	sideOffset: o,
-	className: e(t, n, "w-64 rounded-basalt-md border border-basalt-border bg-basalt-popover p-4 text-basalt-popover-foreground shadow-md", r),
-	...s
-}) }));
+var o = a.Root, s = a.Trigger, c = r.forwardRef(({ className: r, sideOffset: o = 8, ...s }, c) => /* @__PURE__ */ i(a.Portal, {
+	forceMount: s.forceMount,
+	children: /* @__PURE__ */ i(a.Content, {
+		ref: c,
+		sideOffset: o,
+		className: e(t, n, "w-64 rounded-basalt-md border border-basalt-border bg-basalt-popover p-4 text-basalt-popover-foreground shadow-md", r),
+		...s
+	})
+}));
 c.displayName = a.Content.displayName;
 //#endregion
 export { o as HoverCard, c as HoverCardContent, s as HoverCardTrigger };

package/dist/components/hover-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"hover-card.js","names":[],"sources":["../../src/components/hover-card.tsx"],"sourcesContent":["import * as HoverCardPrimitive from \"@radix-ui/react-hover-card\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { MENU_GAP, OVERLAY_LAYER, OVERLAY_MOTION } from \"./overlay\";\n\nexport const HoverCard = HoverCardPrimitive.Root;\nexport const HoverCardTrigger = HoverCardPrimitive.Trigger;\n\nexport const HoverCardContent = React.forwardRef<\n\tReact.ElementRef<typeof HoverCardPrimitive.Content>,\n\tReact.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>\n>(({ className, sideOffset = MENU_GAP, ...props }, ref) => (\n\t<HoverCardPrimitive.Portal>\n\t\t<HoverCardPrimitive.Content\n\t\t\tref={ref}\n\t\t\tsideOffset={sideOffset}\n\t\t\tclassName={cn(\n\t\t\t\tOVERLAY_LAYER,\n\t\t\t\tOVERLAY_MOTION,\n\t\t\t\t\"w-64 rounded-basalt-md border border-basalt-border bg-basalt-popover p-4 text-basalt-popover-foreground shadow-md\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t</HoverCardPrimitive.Portal>\n));\nHoverCardContent.displayName = HoverCardPrimitive.Content.displayName;\n"],"mappings":";;;;;;;AAKA,IAAa,IAAY,EAAmB,MAC/B,IAAmB,EAAmB,SAEtC,IAAmB,EAAM,YAGnC,EAAE,cAAW,gBAAA,GAAuB,GAAG,KAAS,MAClD,kBAAC,EAAmB,QAApB,EAAA,UACC,kBAAC,EAAmB,SAApB;CACM;CACO;CACZ,WAAW,EACV,GACA,GACA,qHACA,CACD;CACA,GAAI;AACJ,CAAA,EACyB,CAAA,CAC3B;AACD,EAAiB,cAAc,EAAmB,QAAQ"}
+{"version":3,"file":"hover-card.js","names":[],"sources":["../../src/components/hover-card.tsx"],"sourcesContent":["import * as HoverCardPrimitive from \"@radix-ui/react-hover-card\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { MENU_GAP, OVERLAY_LAYER, OVERLAY_MOTION } from \"./overlay\";\n\ntype RadixHoverCardProps = React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Root>;\ntype RadixHoverCardTriggerProps = React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Trigger>;\ntype RadixHoverCardContentProps = React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>;\n\nexport interface HoverCardProps\n\textends Omit<\n\t\tRadixHoverCardProps,\n\t\t\"open\" | \"defaultOpen\" | \"onOpenChange\" | \"openDelay\" | \"closeDelay\"\n\t> {\n\t/**\n\t * Controlled open state of the hover card.\n\t */\n\topen?: RadixHoverCardProps[\"open\"];\n\t/**\n\t * Open state of the hover card when initially rendered in uncontrolled mode.\n\t * @default false\n\t */\n\tdefaultOpen?: RadixHoverCardProps[\"defaultOpen\"];\n\t/**\n\t * Callback invoked when open state changes.\n\t */\n\tonOpenChange?: RadixHoverCardProps[\"onOpenChange\"];\n\t/**\n\t * Delay in milliseconds before the hover card opens after hovering trigger.\n\t * @default 700\n\t */\n\topenDelay?: RadixHoverCardProps[\"openDelay\"];\n\t/**\n\t * Delay in milliseconds before the hover card closes after hover leaves trigger or content.\n\t * @default 300\n\t */\n\tcloseDelay?: RadixHoverCardProps[\"closeDelay\"];\n}\n\nexport const HoverCard = HoverCardPrimitive.Root;\n\nexport interface HoverCardTriggerProps extends Omit<RadixHoverCardTriggerProps, \"asChild\"> {\n\t/**\n\t * Change the default rendered anchor element to the child element, merging props and behavior.\n\t * @default false\n\t */\n\tasChild?: RadixHoverCardTriggerProps[\"asChild\"];\n}\n\nexport const HoverCardTrigger = HoverCardPrimitive.Trigger;\n\nexport interface HoverCardContentProps\n\textends Omit<\n\t\tRadixHoverCardContentProps,\n\t\t| \"side\"\n\t\t| \"sideOffset\"\n\t\t| \"align\"\n\t\t| \"alignOffset\"\n\t\t| \"avoidCollisions\"\n\t\t| \"collisionBoundary\"\n\t\t| \"collisionPadding\"\n\t\t| \"arrowPadding\"\n\t\t| \"sticky\"\n\t\t| \"hideWhenDetached\"\n\t\t| \"forceMount\"\n\t\t| \"onEscapeKeyDown\"\n\t\t| \"onPointerDownOutside\"\n\t\t| \"onFocusOutside\"\n\t\t| \"onInteractOutside\"\n\t> {\n\t/**\n\t * Preferred placement side relative to trigger.\n\t * @default \"bottom\"\n\t */\n\tside?: RadixHoverCardContentProps[\"side\"];\n\t/**\n\t * Distance in pixels between trigger and floating content panel.\n\t * @default 8\n\t */\n\tsideOffset?: RadixHoverCardContentProps[\"sideOffset\"];\n\t/**\n\t * Preferred alignment along the side axis.\n\t * @default \"center\"\n\t */\n\talign?: RadixHoverCardContentProps[\"align\"];\n\t/**\n\t * Offset in pixels from the start or end alignment position.\n\t * @default 0\n\t */\n\talignOffset?: RadixHoverCardContentProps[\"alignOffset\"];\n\t/**\n\t * Whether to reposition content to avoid viewport boundary collisions.\n\t * @default true\n\t */\n\tavoidCollisions?: RadixHoverCardContentProps[\"avoidCollisions\"];\n\t/**\n\t * Element or elements bounding boundary collision calculations.\n\t * @default []\n\t */\n\tcollisionBoundary?: RadixHoverCardContentProps[\"collisionBoundary\"];\n\t/**\n\t * Virtual padding from collision boundaries in pixels.\n\t * @default 0\n\t */\n\tcollisionPadding?: RadixHoverCardContentProps[\"collisionPadding\"];\n\t/**\n\t * Padding in pixels between popper arrow and floating panel edge.\n\t * @default 0\n\t */\n\tarrowPadding?: RadixHoverCardContentProps[\"arrowPadding\"];\n\t/**\n\t * Sticky positioning behavior along the align axis when overflowing.\n\t * @default \"partial\"\n\t */\n\tsticky?: RadixHoverCardContentProps[\"sticky\"];\n\t/**\n\t * Whether to hide content completely when trigger is fully occluded.\n\t * @default false\n\t */\n\thideWhenDetached?: RadixHoverCardContentProps[\"hideWhenDetached\"];\n\t/**\n\t * Force mounting content in DOM for external animation controls.\n\t * When forceMount is true, the content remains mounted even when closed.\n\t * The caller is responsible for visibility transitions and unmounting after animation completes.\n\t */\n\tforceMount?: true;\n\t/**\n\t * Callback fired when the Escape key is down on the dismissable layer. Can be prevented.\n\t */\n\tonEscapeKeyDown?: RadixHoverCardContentProps[\"onEscapeKeyDown\"];\n\t/**\n\t * Callback fired when a pointerdown event happens outside the bounds of the dismissable layer. Can be prevented.\n\t */\n\tonPointerDownOutside?: RadixHoverCardContentProps[\"onPointerDownOutside\"];\n\t/**\n\t * Callback fired when focus moves outside the bounds of the dismissable layer. Can be prevented.\n\t */\n\tonFocusOutside?: RadixHoverCardContentProps[\"onFocusOutside\"];\n\t/**\n\t * Callback fired when an interaction (pointerdown or focus) happens outside the bounds of the dismissable layer. Can be prevented.\n\t */\n\tonInteractOutside?: RadixHoverCardContentProps[\"onInteractOutside\"];\n}\n\nexport const HoverCardContent = React.forwardRef<\n\tReact.ElementRef<typeof HoverCardPrimitive.Content>,\n\tHoverCardContentProps\n>(({ className, sideOffset = MENU_GAP, ...props }, ref) => (\n\t<HoverCardPrimitive.Portal forceMount={props.forceMount}>\n\t\t<HoverCardPrimitive.Content\n\t\t\tref={ref}\n\t\t\tsideOffset={sideOffset}\n\t\t\tclassName={cn(\n\t\t\t\tOVERLAY_LAYER,\n\t\t\t\tOVERLAY_MOTION,\n\t\t\t\t\"w-64 rounded-basalt-md border border-basalt-border bg-basalt-popover p-4 text-basalt-popover-foreground shadow-md\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t</HoverCardPrimitive.Portal>\n));\nHoverCardContent.displayName = HoverCardPrimitive.Content.displayName;\n"],"mappings":";;;;;;;AAuCA,IAAa,IAAY,EAAmB,MAU/B,IAAmB,EAAmB,SA+FtC,IAAmB,EAAM,YAGnC,EAAE,cAAW,gBAAA,GAAuB,GAAG,KAAS,MAClD,kBAAC,EAAmB,QAApB;CAA2B,YAAY,EAAM;CAC5C,UAAA,kBAAC,EAAmB,SAApB;EACM;EACO;EACZ,WAAW,EACV,GACA,GACA,qHACA,CACD;EACA,GAAI;CACJ,CAAA;AACyB,CAAA,CAC3B;AACD,EAAiB,cAAc,EAAmB,QAAQ"}

package/dist/components/icon-picker.d.ts

@@ -0,0 +1,34 @@
+import { type ReactNode } from "react";
+export interface IconPickerOption {
+    /** Stable application-owned identifier. */
+    value: string;
+    /** Visible selection text and accessible icon name. */
+    label: string;
+    /** Caller-rendered icon, from a deliberately small subset. */
+    icon: ReactNode;
+    /** Exclude this option from selection and keyboard navigation. */
+    disabled?: boolean;
+}
+export interface IconPickerProps {
+    /** Accessible picker name. */
+    label: string;
+    /** Caller-supplied icon subset; the library never imports an icon catalog. */
+    options: readonly IconPickerOption[];
+    /** Controlled icon identifier. */
+    value?: string;
+    /** Initial uncontrolled icon identifier. */
+    defaultValue?: string;
+    /** Selection request. */
+    onValueChange?: (value: string) => void;
+    /** Disable selection. @default false */
+    disabled?: boolean;
+    /** Empty selection prompt. @default "Choose icon" */
+    placeholder?: string;
+    /** Search placeholder. @default "Search icons…" */
+    searchPlaceholder?: string;
+    /** Empty-search text. @default "No icons found." */
+    emptyLabel?: string;
+    /** Additional root classes. */
+    className?: string;
+}
+export declare function IconPicker({ label, options, value, defaultValue, onValueChange, disabled, placeholder, searchPlaceholder, emptyLabel, className, }: IconPickerProps): import("react").JSX.Element;

package/dist/components/icon-picker.js

@@ -0,0 +1,77 @@
+"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";
+//#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, {
+			asChild: !0,
+			children: /* @__PURE__ */ f(n, {
+				variant: "outline",
+				disabled: v,
+				"aria-label": p,
+				className: e(t, "max-w-full", S),
+				children: [
+					/* @__PURE__ */ d("span", {
+						"aria-hidden": "true",
+						className: "shrink-0",
+						children: A?.icon
+					}),
+					/* @__PURE__ */ d("span", {
+						className: "truncate",
+						children: A?.label ?? y
+					}),
+					/* @__PURE__ */ d(u, { className: "shrink-0" })
+				]
+			})
+		}), /* @__PURE__ */ f(a, {
+			align: "start",
+			className: "w-72 max-w-[calc(100vw-2rem)] space-y-3 p-3",
+			"aria-label": p,
+			children: [
+				/* @__PURE__ */ d(r, {
+					"aria-label": `${p}: search`,
+					value: D,
+					placeholder: b,
+					onChange: (e) => O(e.target.value)
+				}),
+				/* @__PURE__ */ d(s, {
+					type: "single",
+					"aria-label": p,
+					value: k,
+					className: "flex h-auto flex-wrap justify-start gap-1 rounded-basalt-lg p-1",
+					onValueChange: (e) => {
+						e && (h === void 0 && w(e), _?.(e), E(!1), O(""));
+					},
+					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))
+				}),
+				j.length === 0 && /* @__PURE__ */ d("p", {
+					role: "status",
+					className: "text-sm text-basalt-muted-foreground",
+					children: x
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { p as IconPicker };
+
+//# sourceMappingURL=icon-picker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icon-picker.js","names":[],"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,SAAgB,EAAW,EAC1B,UACA,YACA,UACA,kBAAe,IACf,kBACA,cAAW,IACX,iBAAc,eACd,uBAAoB,iBACpB,gBAAa,mBACb,gBACmB;CACnB,IAAM,CAAC,GAAY,KAAiB,EAAS,CAAY,GACnD,CAAC,GAAM,KAAW,EAAS,EAAK,GAChC,CAAC,GAAO,KAAY,EAAS,EAAE,GAC/B,IAAW,KAAS,GACpB,IAAS,EAAQ,MAAM,MAAW,EAAO,UAAU,CAAQ,GAC3D,IAAU,EAAQ,QAAQ,MAC/B,EAAO,MAAM,kBAAkB,CAAC,CAAC,SAAS,EAAM,KAAK,CAAC,CAAC,kBAAkB,CAAC,CAC3E;CACA,OACC,kBAAC,GAAD;EAAS,MAAM,KAAQ,CAAC;EAAU,cAAc;EAAhD,UAAA,CACC,kBAAC,GAAD;GAAgB,SAAA;GACf,UAAA,kBAAC,GAAD;IACC,SAAQ;IACE;IACV,cAAY;IACZ,WAAW,EAAG,GAAiB,cAAc,CAAS;IAJvD,UAAA;KAMC,kBAAC,QAAD;MAAM,eAAY;MAAO,WAAU;MACjC,UAAA,GAAQ;KACJ,CAAA;KACN,kBAAC,QAAD;MAAM,WAAU;MAAY,UAAA,GAAQ,SAAS;KAAkB,CAAA;KAC/D,kBAAC,GAAD,EAAa,WAAU,WAAY,CAAA;IAC5B;;EACO,CAAA,GAChB,kBAAC,GAAD;GACC,OAAM;GACN,WAAU;GACV,cAAY;GAHb,UAAA;IAKC,kBAAC,GAAD;KACC,cAAY,GAAG,EAAM;KACrB,OAAO;KACP,aAAa;KACb,WAAW,MAAU,EAAS,EAAM,OAAO,KAAK;IAChD,CAAA;IACD,kBAAC,GAAD;KACC,MAAK;KACL,cAAY;KACZ,OAAO;KACP,WAAU;KACV,gBAAgB,MAAS;MACnB,MACD,MAAU,KAAA,KAAW,EAAc,CAAI,GAC3C,IAAgB,CAAI,GACpB,EAAQ,EAAK,GACb,EAAS,EAAE;KACZ;KAEC,UAAA,EAAQ,KAAK,MACb,kBAAC,GAAD;MAEC,OAAO,EAAK;MACZ,UAAU,EAAK;MACf,cAAY,EAAK;MACjB,OAAO,EAAK;MACZ,WAAU;MAET,UAAA,EAAK;KACU,GARX,EAAK,KAQM,CACjB;IACW,CAAA;IACZ,EAAQ,WAAW,KACnB,kBAAC,KAAD;KAAG,MAAK;KAAS,WAAU;KACzB,UAAA;IACC,CAAA;GAEW;EACR,CAAA,CAAA;;AAEX"}

package/dist/components/inline-editable.d.ts

@@ -0,0 +1,46 @@
+export type InlineEditableChangeReason = "edit" | "save" | "blur" | "cancel";
+export interface InlineEditableProps {
+    /** Accessible name of the edited field. */
+    label: string;
+    /** Committed value, owned by the application. */
+    value: string;
+    /** Persist the draft. Return a promise to keep the editor pending; rejection preserves the draft. */
+    onSave: (value: string) => void | Promise<void>;
+    /** Controlled edit mode. */
+    editing?: boolean;
+    /** Initial uncontrolled edit mode. @default false */
+    defaultEditing?: boolean;
+    /** Edit-mode requests with their cause, including blur that must not steal focus. */
+    onEditingChange?: (editing: boolean, reason: InlineEditableChangeReason) => void;
+    /** External pending state. @default false */
+    pending?: boolean;
+    /** Application-owned error message. */
+    error?: string;
+    /** Disable editing and saving. @default false */
+    disabled?: boolean;
+    /** Reject an empty draft. @default true */
+    required?: boolean;
+    /** Trim whitespace before validation and save. @default true */
+    trim?: boolean;
+    /** Commit when focus leaves the whole editor, including its actions. @default true */
+    saveOnBlur?: boolean;
+    /** Return a validation message to retain the draft without invoking onSave. */
+    validate?: (value: string) => string | undefined;
+    /** Empty committed-value prompt. @default "Untitled" */
+    placeholder?: string;
+    /** Edit action label prefix. @default "Edit" */
+    editLabel?: string;
+    /** Save action text. @default "Save" */
+    saveLabel?: string;
+    /** Cancel action text. @default "Cancel" */
+    cancelLabel?: string;
+    /** Pending announcement. @default "Saving…" */
+    pendingLabel?: string;
+    /** Empty-value validation message. @default "Enter a value." */
+    requiredLabel?: string;
+    /** Fallback for non-Error rejections. @default "Could not save changes." */
+    errorLabel?: string;
+    /** Additional root classes. */
+    className?: string;
+}
+export declare function InlineEditable({ label, value, onSave, editing, defaultEditing, onEditingChange, pending, error, disabled, required, trim, saveOnBlur, validate, placeholder, editLabel, saveLabel, cancelLabel, pendingLabel, requiredLabel, errorLabel, className, }: InlineEditableProps): import("react").JSX.Element;

package/dist/components/inline-editable.js

@@ -0,0 +1,124 @@
+"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 { useEffect as i, useId as a, useLayoutEffect as o, useRef as s, useState as c } from "react";
+import { Pencil as l } from "lucide-react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/components/inline-editable.tsx
+function f({ label: f, value: p, onSave: m, editing: h, defaultEditing: g = !1, onEditingChange: _, pending: v = !1, error: y, disabled: b = !1, required: x = !0, trim: S = !0, saveOnBlur: C = !0, validate: w, placeholder: T = "Untitled", editLabel: E = "Edit", saveLabel: D = "Save", cancelLabel: O = "Cancel", pendingLabel: k = "Saving…", requiredLabel: A = "Enter a value.", errorLabel: j = "Could not save changes.", className: M }) {
+	let [N, P] = c(g), [F, I] = c(p), [L, R] = c(!1), [z, B] = c(), V = s(null), H = s(null), U = s(!0), W = s(0), G = s(!1), K = s(!1), q = a(), J = h ?? N, Y = v || L, X = y ?? z;
+	i(() => (U.current = !0, () => {
+		U.current = !1, W.current += 1;
+	}), []), o(() => {
+		J && !b ? (V.current?.focus(), V.current?.select()) : !J && K.current && (K.current = !1, H.current?.focus());
+	}, [J, b]), i(() => {
+		J || (W.current += 1, G.current = !1, R(!1), I(p), B(void 0));
+	}, [J, p]);
+	function Z(e, t) {
+		h === void 0 && P(e), _?.(e, t);
+	}
+	function Q(e) {
+		K.current = e !== "blur", Z(!1, e);
+	}
+	async function $(e) {
+		if (!J || b || Y || G.current) return;
+		let t = S ? F.trim() : F, n = x && !t ? A : w?.(t);
+		if (n) {
+			B(n);
+			return;
+		}
+		if (t === p) {
+			Q(e);
+			return;
+		}
+		G.current = !0, R(!0), B(void 0);
+		let r = ++W.current;
+		try {
+			await m(t), U.current && r === W.current && Q(e);
+		} catch (e) {
+			U.current && r === W.current && B(e instanceof Error && e.message ? e.message : j);
+		} finally {
+			U.current && r === W.current && (G.current = !1, R(!1));
+		}
+	}
+	return /* @__PURE__ */ d("div", {
+		role: "group",
+		"aria-label": f,
+		"aria-busy": Y,
+		className: e(t, "min-w-0 space-y-2", M),
+		onBlur: (e) => {
+			C && !e.currentTarget.contains(e.relatedTarget) && $("blur");
+		},
+		children: [
+			J ? /* @__PURE__ */ d("div", {
+				className: "flex flex-wrap items-center gap-2",
+				children: [
+					/* @__PURE__ */ u(r, {
+						ref: V,
+						"aria-label": f,
+						className: "min-w-0 flex-1 basis-32",
+						value: F,
+						disabled: b,
+						readOnly: Y,
+						"aria-invalid": !!X,
+						"aria-describedby": X ? `${q}-error` : void 0,
+						onChange: (e) => {
+							I(e.target.value), B(void 0);
+						},
+						onKeyDown: (e) => {
+							e.nativeEvent.isComposing || (e.key === "Enter" && (e.preventDefault(), $("save")), e.key === "Escape" && !Y && (e.preventDefault(), e.stopPropagation(), I(p), B(void 0), Q("cancel")));
+						}
+					}),
+					/* @__PURE__ */ u(n, {
+						size: "sm",
+						disabled: b || Y,
+						onClick: () => void $("save"),
+						children: D
+					}),
+					/* @__PURE__ */ u(n, {
+						size: "sm",
+						variant: "ghost",
+						disabled: Y,
+						onClick: () => {
+							I(p), B(void 0), Q("cancel");
+						},
+						children: O
+					})
+				]
+			}) : /* @__PURE__ */ d("button", {
+				ref: H,
+				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",
+				onClick: () => {
+					I(p), B(void 0), Z(!0, "edit");
+				},
+				children: [/* @__PURE__ */ u("span", {
+					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",
+					"aria-hidden": "true"
+				})]
+			}),
+			Y && /* @__PURE__ */ u("p", {
+				role: "status",
+				className: "text-xs text-basalt-muted-foreground",
+				children: k
+			}),
+			X && /* @__PURE__ */ u("p", {
+				id: `${q}-error`,
+				role: "alert",
+				className: "text-xs text-basalt-destructive",
+				children: X
+			})
+		]
+	});
+}
+//#endregion
+export { f as InlineEditable };
+
+//# sourceMappingURL=inline-editable.js.map