@nocoo/basalt 2.0.3 → 2.1.0

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

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

package/dist/components/input-area.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn as e } from "../utils/cn.js";
-import { FOCUS_BORDER as t } from "./overlay.js";
-import { controlSurfaceClass as n } from "../utils/control-surface.js";
+import { controlSurfaceClass as t } from "../utils/control-surface.js";
+import { FOCUS_BORDER as n } from "./overlay.js";
 import * as r from "react";
 import { jsx as i } from "react/jsx-runtime";
 //#region src/components/input-area.tsx
@@ -16,7 +16,7 @@ var a = {
 	"data-lpignore": "true"
 }, s = r.forwardRef(({ className: r, size: s = "default", passwordManagerIgnore: c = !1, ...l }, u) => /* @__PURE__ */ i("textarea", {
 	ref: u,
-	className: n(e("flex w-full text-basalt-foreground shadow-xs placeholder:text-basalt-muted-foreground disabled:cursor-not-allowed disabled:border-transparent disabled:text-basalt-muted-foreground/40", a[s], t, "aria-invalid:border-basalt-destructive aria-invalid:focus-visible:border-basalt-destructive", c && "keeper-ignore", r)),
+	className: t(e("flex w-full text-basalt-foreground shadow-xs placeholder:text-basalt-muted-foreground disabled:cursor-not-allowed disabled:border-transparent disabled:text-basalt-muted-foreground/40", a[s], n, "aria-invalid:border-basalt-destructive aria-invalid:focus-visible:border-basalt-destructive", c && "keeper-ignore", r)),
 	...l,
 	...c ? o : {}
 }));

package/dist/components/input-group.js

@@ -1,12 +1,12 @@
 "use client";
 import { cn as e } from "../utils/cn.js";
-import { Button as t } from "./button.js";
-import { controlSurfaceClass as n } from "../utils/control-surface.js";
+import { controlSurfaceClass as t } from "../utils/control-surface.js";
+import { Button as n } from "./button.js";
 import { Input as r } from "./input.js";
 import * as i from "react";
 import { jsx as a } from "react/jsx-runtime";
 //#region src/components/input-group.tsx
-var o = i.createContext(!1), s = i.forwardRef(({ className: t, disabled: r, onClick: i, children: s, ...c }, l) => /* @__PURE__ */ a(o.Provider, {
+var o = i.createContext(!1), s = i.forwardRef(({ className: n, disabled: r, onClick: i, children: s, ...c }, l) => /* @__PURE__ */ a(o.Provider, {
 	value: !!r,
 	children: /* @__PURE__ */ a("div", {
 		ref: l,
@@ -14,7 +14,7 @@ var o = i.createContext(!1), s = i.forwardRef(({ className: t, disabled: r, onCl
 		"data-disabled": r ? "" : void 0,
 		"aria-disabled": r || void 0,
 		inert: r || void 0,
-		className: n(e("flex h-9 w-full items-center shadow-xs", "[&>:first-child]:rounded-l-basalt-md [&>:last-child]:rounded-r-basalt-md", "outline-hidden focus-within:border-basalt-ring", "has-[[data-slot=input-group-addon-start]]:[&_input]:pl-2", "has-[[data-slot=input-group-addon-end]]:[&_input]:pr-2", "has-[[data-slot=input-group-suffix]]:[&_input]:flex-none", "has-[[data-slot=input-group-suffix]]:[&_input]:[field-sizing:content]", "has-[[data-slot=input-group-suffix]]:[&_input]:pr-0", "data-[disabled]:pointer-events-none data-[disabled]:opacity-50", t)),
+		className: t(e("flex h-9 w-full items-center shadow-xs", "[&>:first-child]:rounded-l-basalt-md [&>:last-child]:rounded-r-basalt-md", "outline-hidden focus-within:border-basalt-ring", "has-[[data-slot=input-group-addon-start]]:[&_input]:pl-2", "has-[[data-slot=input-group-addon-end]]:[&_input]:pr-2", "has-[[data-slot=input-group-suffix]]:[&_input]:flex-none", "has-[[data-slot=input-group-suffix]]:[&_input]:[field-sizing:content]", "has-[[data-slot=input-group-suffix]]:[&_input]:pr-0", "data-[disabled]:pointer-events-none data-[disabled]:opacity-50", n)),
 		onClick: (e) => {
 			i?.(e), !(e.defaultPrevented || r) && (e.target.closest("input, textarea, button, a") || e.currentTarget.querySelector("input")?.focus());
 		},
@@ -54,14 +54,14 @@ function u({ className: t, children: n, ...r }) {
 	});
 }
 u.displayName = "InputGroup.Suffix";
-var d = i.forwardRef(({ className: n, variant: r = "ghost", size: s = "icon", disabled: c, ...l }, u) => {
+var d = i.forwardRef(({ className: t, variant: r = "ghost", size: s = "icon", disabled: c, ...l }, u) => {
 	let d = i.useContext(o);
-	return /* @__PURE__ */ a(t, {
+	return /* @__PURE__ */ a(n, {
 		ref: u,
 		variant: r,
 		size: s,
 		disabled: c || d,
-		className: e("h-7 w-7 shrink-0 rounded-basalt-sm", n),
+		className: e("h-7 w-7 shrink-0 rounded-basalt-sm", t),
 		...l
 	});
 });

package/dist/components/input.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn as e } from "../utils/cn.js";
-import { FOCUS_BORDER as t } from "./overlay.js";
-import { controlSurfaceClass as n } from "../utils/control-surface.js";
+import { controlSurfaceClass as t } from "../utils/control-surface.js";
+import { FOCUS_BORDER as n } from "./overlay.js";
 import * as r from "react";
 import { jsx as i } from "react/jsx-runtime";
 //#region src/components/input.tsx
@@ -16,7 +16,7 @@ var a = {
 	"data-lpignore": "true"
 }, s = r.forwardRef(({ className: r, type: s, size: c = "default", passwordManagerIgnore: l = !1, ...u }, d) => /* @__PURE__ */ i("input", {
 	type: s,
-	className: n(e("flex w-full text-basalt-foreground shadow-xs file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-basalt-muted-foreground disabled:cursor-not-allowed disabled:border-transparent disabled:text-basalt-muted-foreground/40", a[c], t, "aria-invalid:border-basalt-destructive aria-invalid:focus-visible:border-basalt-destructive", l && "keeper-ignore", r)),
+	className: t(e("flex w-full text-basalt-foreground shadow-xs file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-basalt-muted-foreground disabled:cursor-not-allowed disabled:border-transparent disabled:text-basalt-muted-foreground/40", a[c], n, "aria-invalid:border-basalt-destructive aria-invalid:focus-visible:border-basalt-destructive", l && "keeper-ignore", r)),
 	ref: d,
 	...u,
 	...l ? o : {}

package/dist/components/label.js

@@ -1,34 +1,35 @@
 "use client";
 import { cn as e } from "../utils/cn.js";
-import { Tooltip as t, TooltipContent as n, TooltipProvider as r, TooltipTrigger as i } from "./tooltip.js";
-import * as a from "react";
-import { Info as o } from "lucide-react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-import * as l from "@radix-ui/react-label";
+import { BASALT_UI_CLASS as t } from "../utils/control-surface.js";
+import { Tooltip as n, TooltipContent as r, TooltipProvider as i, TooltipTrigger as a } from "./tooltip.js";
+import * as o from "react";
+import { Info as s } from "lucide-react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import * as u from "@radix-ui/react-label";
 //#region src/components/label.tsx
-var u = a.forwardRef(({ className: a, children: u, showOptional: d = !1, tooltip: f, ...p }, m) => /* @__PURE__ */ c(l.Root, {
-	ref: m,
-	className: e("inline-flex items-center gap-1 text-sm font-medium leading-none text-basalt-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70", a),
-	...p,
+var d = o.forwardRef(({ className: o, children: d, showOptional: f = !1, tooltip: p, ...m }, h) => /* @__PURE__ */ l(u.Root, {
+	ref: h,
+	className: e(t, "inline-flex items-center gap-1 text-sm font-medium leading-none text-basalt-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70", o),
+	...m,
 	children: [
-		u,
-		d ? /* @__PURE__ */ s("span", {
+		d,
+		f ? /* @__PURE__ */ c("span", {
 			className: "font-normal text-basalt-muted-foreground",
 			children: "(optional)"
 		}) : null,
-		f ? /* @__PURE__ */ s(r, { children: /* @__PURE__ */ c(t, { children: [/* @__PURE__ */ s(i, {
+		p ? /* @__PURE__ */ c(i, { children: /* @__PURE__ */ l(n, { children: [/* @__PURE__ */ c(a, {
 			asChild: !0,
-			children: /* @__PURE__ */ s("button", {
+			children: /* @__PURE__ */ c("button", {
 				type: "button",
 				"aria-label": "More information",
 				className: "inline-flex size-4 shrink-0 items-center justify-center text-basalt-muted-foreground hover:text-basalt-foreground",
-				children: /* @__PURE__ */ s(o, { className: "size-3.5" })
+				children: /* @__PURE__ */ c(s, { className: "size-3.5" })
 			})
-		}), /* @__PURE__ */ s(n, { children: f })] }) }) : null
+		}), /* @__PURE__ */ c(r, { children: p })] }) }) : null
 	]
 }));
-u.displayName = l.Root.displayName;
+d.displayName = u.Root.displayName;
 //#endregion
-export { u as Label };
+export { d as Label };
 
 //# sourceMappingURL=label.js.map

package/dist/components/label.js.map

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

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

@@ -37,7 +37,7 @@ export type LayerCardLoadingProps = Omit<HTMLAttributes<HTMLDivElement>, "aria-l
      */
     label?: string;
 };
-export type LayerCardEmptyProps = Omit<HTMLAttributes<HTMLDivElement>, "title"> & {
+export type LayerCardEmptyProps = Omit<HTMLAttributes<HTMLDivElement>, "title" | "children"> & {
     /**
      * Empty-state heading.
      * @default "No content"
@@ -51,6 +51,14 @@ export type LayerCardEmptyProps = Omit<HTMLAttributes<HTMLDivElement>, "title">
      * Optional empty-state icon.
      */
     icon?: ReactNode;
+    /**
+     * Optional interactive action element rendered below empty content.
+     */
+    action?: ReactNode;
+    /**
+     * Custom supporting content or custom layout rendered between description and action.
+     */
+    children?: ReactNode;
 };
 declare function LayerCardHeader({ className, ...props }: LayerCardSectionProps): import("react").JSX.Element;
 declare function LayerCardBody({ className, ...props }: LayerCardSectionProps): import("react").JSX.Element;
@@ -59,7 +67,7 @@ declare function LayerCardPrimary(props: LayerCardWellProps): import("react").JS
 declare function LayerCardSecondary(props: LayerCardSectionProps): import("react").JSX.Element;
 declare function LayerCardFooter({ className, ...props }: LayerCardSectionProps): import("react").JSX.Element;
 declare function LayerCardLoading({ label, className, ...props }: LayerCardLoadingProps): import("react").JSX.Element;
-declare function LayerCardEmpty({ title, description, icon, className, ...props }: LayerCardEmptyProps): import("react").JSX.Element;
+declare function LayerCardEmpty({ title, description, icon, action, children, className, ...props }: LayerCardEmptyProps): import("react").JSX.Element;
 export declare const LayerCard: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "className"> & {
     /**
      * Additional classes for the card root.

package/dist/components/layer-card.js

@@ -1,137 +1,140 @@
 "use client";
 import { cn as e } from "../utils/cn.js";
-import { Empty as t } from "./empty.js";
-import { SkeletonLine as n } from "./skeleton-line.js";
-import { Children as r, Fragment as i, cloneElement as a, forwardRef as o, isValidElement as s } from "react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { BASALT_UI_CLASS as t } from "../utils/control-surface.js";
+import { Empty as n } from "./empty.js";
+import { SkeletonLine as r } from "./skeleton-line.js";
+import { Children as i, Fragment as a, cloneElement as o, forwardRef as s, isValidElement as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/components/layer-card.tsx
-var u = "overflow-hidden rounded-basalt-lg text-basalt-foreground", d = {
+var d = `${t} overflow-hidden rounded-basalt-lg text-basalt-foreground`, f = {
 	none: "",
 	sm: "p-3",
 	md: "p-4",
 	lg: "p-6"
 };
-function f(e) {
-	return s(e);
-}
 function p(e) {
+	return c(e);
+}
+function m(e) {
 	return e.type;
 }
-function m(e, t) {
-	return r.toArray(e).some((e) => f(e) ? t(p(e)) ? !0 : p(e) === i && m(e.props.children, t) : !1);
+function h(e, t) {
+	return i.toArray(e).some((e) => p(e) ? t(m(e)) ? !0 : m(e) === a && h(e.props.children, t) : !1);
 }
-function h(t, n) {
-	return n ? r.map(t, (t) => {
-		if (!f(t)) return t;
-		if (p(t) === i) return a(t, { children: h(t.props.children, n) });
-		if (p(t) === _ || p(t) === x) {
+function g(t, n) {
+	return n ? i.map(t, (t) => {
+		if (!p(t)) return t;
+		if (m(t) === a) return o(t, { children: g(t.props.children, n) });
+		if (m(t) === v || m(t) === S) {
 			let n = t;
-			return a(n, { className: e(n.props.className, "border-b border-basalt-border") });
+			return o(n, { className: e(n.props.className, "border-b border-basalt-border") });
 		}
 		return t;
 	}) : t;
 }
-var g = o(({ className: t, children: n, outlined: r = !1, padding: i = "md", ...a }, o) => {
-	let s = m(n, (e) => T.has(e)), l = m(n, (e) => e === y || e === b), f = m(n, (e) => e === v) && !l;
-	return /* @__PURE__ */ c("div", {
+var _ = s(({ className: t, children: n, outlined: r = !1, padding: i = "md", ...a }, o) => {
+	let s = h(n, (e) => E.has(e)), c = h(n, (e) => e === b || e === x), u = h(n, (e) => e === y) && !c;
+	return /* @__PURE__ */ l("div", {
 		ref: o,
 		"data-basalt-surface": "",
-		className: e(u, s ? "flex w-full flex-col" : d[i], r && "ring-1 ring-basalt-border/40", t),
+		className: e(d, s ? "flex w-full flex-col" : f[i], r && "ring-1 ring-basalt-border/40", t),
 		...a,
-		children: h(n, f)
+		children: g(n, u)
 	});
 });
-g.displayName = "LayerCard";
-function _({ className: t, ...n }) {
-	return /* @__PURE__ */ c("div", {
+_.displayName = "LayerCard";
+function v({ className: t, ...n }) {
+	return /* @__PURE__ */ l("div", {
 		className: e("flex min-w-0 items-start justify-between gap-4 px-4 py-3 text-basalt-muted-foreground", t),
 		...n
 	});
 }
-_.displayName = "LayerCard.Header";
-function v({ className: t, ...n }) {
-	return /* @__PURE__ */ c("div", {
+v.displayName = "LayerCard.Header";
+function y({ className: t, ...n }) {
+	return /* @__PURE__ */ l("div", {
 		className: e("min-w-0 p-4", t),
 		...n
 	});
 }
-v.displayName = "LayerCard.Body";
-function y({ className: t, outlined: n = !1, ...r }) {
-	return /* @__PURE__ */ c("div", {
+y.displayName = "LayerCard.Body";
+function b({ className: t, outlined: n = !1, ...r }) {
+	return /* @__PURE__ */ l("div", {
 		"data-basalt-surface": "",
 		className: e("min-w-0 p-4", n && "ring-1 ring-basalt-border/40", t),
 		...r
 	});
 }
-y.displayName = "LayerCard.Well";
-function b(e) {
-	return /* @__PURE__ */ c(y, { ...e });
-}
-b.displayName = "LayerCard.Primary";
+b.displayName = "LayerCard.Well";
 function x(e) {
-	return /* @__PURE__ */ c(_, { ...e });
+	return /* @__PURE__ */ l(b, { ...e });
 }
-x.displayName = "LayerCard.Secondary";
-function S({ className: t, ...n }) {
-	return /* @__PURE__ */ c("div", {
+x.displayName = "LayerCard.Primary";
+function S(e) {
+	return /* @__PURE__ */ l(v, { ...e });
+}
+S.displayName = "LayerCard.Secondary";
+function C({ className: t, ...n }) {
+	return /* @__PURE__ */ l("div", {
 		className: e("flex flex-wrap items-center justify-end gap-2 border-t border-basalt-border px-4 py-3", t),
 		...n
 	});
 }
-S.displayName = "LayerCard.Footer";
-function C({ label: t = "Loading", className: r, ...i }) {
-	return /* @__PURE__ */ l("div", {
+C.displayName = "LayerCard.Footer";
+function w({ label: t = "Loading", className: n, ...i }) {
+	return /* @__PURE__ */ u("div", {
 		role: "status",
 		"aria-label": t,
-		className: e("space-y-3 p-4", r),
+		className: e("space-y-3 p-4", n),
 		...i,
 		children: [
-			/* @__PURE__ */ c(n, {
+			/* @__PURE__ */ l(r, {
 				minWidth: 100,
 				maxWidth: 100
 			}),
-			/* @__PURE__ */ c(n, {
+			/* @__PURE__ */ l(r, {
 				minWidth: 72,
 				maxWidth: 72
 			}),
-			/* @__PURE__ */ c(n, {
+			/* @__PURE__ */ l(r, {
 				minWidth: 88,
 				maxWidth: 88
 			})
 		]
 	});
 }
-C.displayName = "LayerCard.Loading";
-function w({ title: n = "No content", description: r, icon: i, className: a, ...o }) {
-	return /* @__PURE__ */ c(t, {
-		title: n,
+w.displayName = "LayerCard.Loading";
+function T({ title: t = "No content", description: r, icon: i, action: a, children: o, className: s, ...c }) {
+	return /* @__PURE__ */ l(n, {
+		title: t,
 		description: r,
 		icon: i,
-		className: e("p-8", a),
-		...o
+		action: a,
+		className: e("p-8", s),
+		...c,
+		children: o
 	});
 }
-w.displayName = "LayerCard.Empty";
-var T = /* @__PURE__ */ new Set([
-	_,
+T.displayName = "LayerCard.Empty";
+var E = /* @__PURE__ */ new Set([
 	v,
 	y,
-	S,
+	b,
 	C,
 	w,
-	b,
-	x
-]), E = Object.assign(g, {
-	Primary: b,
-	Secondary: x,
-	Header: _,
-	Body: v,
-	Well: y,
-	Footer: S,
-	Loading: C,
-	Empty: w
+	T,
+	x,
+	S
+]), D = Object.assign(_, {
+	Primary: x,
+	Secondary: S,
+	Header: v,
+	Body: y,
+	Well: b,
+	Footer: C,
+	Loading: w,
+	Empty: T
 });
 //#endregion
-export { E as LayerCard };
+export { D as LayerCard };
 
 //# sourceMappingURL=layer-card.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"layer-card.js","names":[],"sources":["../../src/components/layer-card.tsx"],"sourcesContent":["import {\n\tChildren,\n\tcloneElement,\n\tFragment,\n\tforwardRef,\n\ttype HTMLAttributes,\n\tisValidElement,\n\ttype ReactElement,\n\ttype ReactNode,\n} from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { Empty } from \"./empty\";\nimport { SkeletonLine } from \"./skeleton-line\";\n\nconst ROOT_CLASSES = \"overflow-hidden rounded-basalt-lg text-basalt-foreground\";\nconst PADDING_CLASSES = {\n\tnone: \"\",\n\tsm: \"p-3\",\n\tmd: \"p-4\",\n\tlg: \"p-6\",\n} as const;\n\nexport type LayerCardPadding = keyof typeof PADDING_CLASSES;\n\nexport type LayerCardProps = Omit<HTMLAttributes<HTMLDivElement>, \"className\"> & {\n\t/**\n\t * Additional classes for the card root.\n\t */\n\tclassName?: string;\n\t/**\n\t * Draw a hairline ring. Default grouping is luminance only.\n\t * @default false\n\t */\n\toutlined?: boolean;\n\t/**\n\t * Inner spacing for unstructured card content.\n\t * @default \"md\"\n\t */\n\tpadding?: LayerCardPadding;\n};\nexport type LayerCardSectionProps = HTMLAttributes<HTMLDivElement>;\nexport type LayerCardWellProps = LayerCardSectionProps & {\n\t/**\n\t * Draw a hairline ring on a nested well.\n\t * @default false\n\t */\n\toutlined?: boolean;\n};\nexport type LayerCardLoadingProps = Omit<HTMLAttributes<HTMLDivElement>, \"aria-label\"> & {\n\t/**\n\t * Accessible label announced for the loading state.\n\t * @default \"Loading\"\n\t */\n\tlabel?: string;\n};\nexport type LayerCardEmptyProps = Omit<HTMLAttributes<HTMLDivElement>, \"title\"> & {\n\t/**\n\t * Empty-state heading.\n\t * @default \"No content\"\n\t */\n\ttitle?: string;\n\t/**\n\t * Supporting empty-state text.\n\t */\n\tdescription?: string;\n\t/**\n\t * Optional empty-state icon.\n\t */\n\ticon?: ReactNode;\n};\n\nfunction isElement(child: ReactNode): child is ReactElement<{ children?: ReactNode }> {\n\treturn isValidElement(child);\n}\n\nfunction childType(child: ReactElement): unknown {\n\treturn child.type;\n}\n\nfunction hasSlot(children: ReactNode, match: (type: unknown) => boolean): boolean {\n\treturn Children.toArray(children).some((child) => {\n\t\tif (!isElement(child)) {\n\t\t\treturn false;\n\t\t}\n\t\tif (match(childType(child))) {\n\t\t\treturn true;\n\t\t}\n\t\tif (childType(child) === Fragment) {\n\t\t\treturn hasSlot(child.props.children, match);\n\t\t}\n\t\treturn false;\n\t});\n}\n\nfunction decorateHeaders(children: ReactNode, divided: boolean): ReactNode {\n\tif (!divided) {\n\t\treturn children;\n\t}\n\treturn Children.map(children, (child) => {\n\t\tif (!isElement(child)) {\n\t\t\treturn child;\n\t\t}\n\t\tif (childType(child) === Fragment) {\n\t\t\treturn cloneElement(child, {\n\t\t\t\tchildren: decorateHeaders(child.props.children, divided),\n\t\t\t});\n\t\t}\n\t\tif (childType(child) === LayerCardHeader || childType(child) === LayerCardSecondary) {\n\t\t\tconst typed = child as ReactElement<{ className?: string }>;\n\t\t\treturn cloneElement(typed, {\n\t\t\t\tclassName: cn(typed.props.className, \"border-b border-basalt-border\"),\n\t\t\t});\n\t\t}\n\t\treturn child;\n\t});\n}\n\nconst LayerCardRoot = forwardRef<HTMLDivElement, LayerCardProps>(\n\t({ className, children, outlined = false, padding = \"md\", ...props }, ref) => {\n\t\tconst structured = hasSlot(children, (type) => STRUCTURED_TYPES.has(type));\n\t\tconst hasWell = hasSlot(\n\t\t\tchildren,\n\t\t\t(type) => type === LayerCardWell || type === LayerCardPrimary,\n\t\t);\n\t\tconst hasBody = hasSlot(children, (type) => type === LayerCardBody);\n\t\tconst headerDivided = hasBody && !hasWell;\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\tdata-basalt-surface=\"\"\n\t\t\t\tclassName={cn(\n\t\t\t\t\tROOT_CLASSES,\n\t\t\t\t\tstructured ? \"flex w-full flex-col\" : PADDING_CLASSES[padding],\n\t\t\t\t\toutlined && \"ring-1 ring-basalt-border/40\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{decorateHeaders(children, headerDivided)}\n\t\t\t</div>\n\t\t);\n\t},\n);\nLayerCardRoot.displayName = \"LayerCard\";\n\nfunction LayerCardHeader({ className, ...props }: LayerCardSectionProps) {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"flex min-w-0 items-start justify-between gap-4 px-4 py-3 text-basalt-muted-foreground\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\nLayerCardHeader.displayName = \"LayerCard.Header\";\n\nfunction LayerCardBody({ className, ...props }: LayerCardSectionProps) {\n\treturn <div className={cn(\"min-w-0 p-4\", className)} {...props} />;\n}\nLayerCardBody.displayName = \"LayerCard.Body\";\n\nfunction LayerCardWell({ className, outlined = false, ...props }: LayerCardWellProps) {\n\treturn (\n\t\t<div\n\t\t\tdata-basalt-surface=\"\"\n\t\t\tclassName={cn(\"min-w-0 p-4\", outlined && \"ring-1 ring-basalt-border/40\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\nLayerCardWell.displayName = \"LayerCard.Well\";\n\nfunction LayerCardPrimary(props: LayerCardWellProps) {\n\treturn <LayerCardWell {...props} />;\n}\nLayerCardPrimary.displayName = \"LayerCard.Primary\";\n\nfunction LayerCardSecondary(props: LayerCardSectionProps) {\n\treturn <LayerCardHeader {...props} />;\n}\nLayerCardSecondary.displayName = \"LayerCard.Secondary\";\n\nfunction LayerCardFooter({ className, ...props }: LayerCardSectionProps) {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"flex flex-wrap items-center justify-end gap-2 border-t border-basalt-border px-4 py-3\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\nLayerCardFooter.displayName = \"LayerCard.Footer\";\n\nfunction LayerCardLoading({ label = \"Loading\", className, ...props }: LayerCardLoadingProps) {\n\treturn (\n\t\t<div role=\"status\" aria-label={label} className={cn(\"space-y-3 p-4\", className)} {...props}>\n\t\t\t<SkeletonLine minWidth={100} maxWidth={100} />\n\t\t\t<SkeletonLine minWidth={72} maxWidth={72} />\n\t\t\t<SkeletonLine minWidth={88} maxWidth={88} />\n\t\t</div>\n\t);\n}\nLayerCardLoading.displayName = \"LayerCard.Loading\";\n\nfunction LayerCardEmpty({\n\ttitle = \"No content\",\n\tdescription,\n\ticon,\n\tclassName,\n\t...props\n}: LayerCardEmptyProps) {\n\treturn (\n\t\t<Empty\n\t\t\ttitle={title}\n\t\t\tdescription={description}\n\t\t\ticon={icon}\n\t\t\tclassName={cn(\"p-8\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\nLayerCardEmpty.displayName = \"LayerCard.Empty\";\n\nconst STRUCTURED_TYPES = new Set<unknown>([\n\tLayerCardHeader,\n\tLayerCardBody,\n\tLayerCardWell,\n\tLayerCardFooter,\n\tLayerCardLoading,\n\tLayerCardEmpty,\n\tLayerCardPrimary,\n\tLayerCardSecondary,\n]);\n\nexport const LayerCard = Object.assign(LayerCardRoot, {\n\tPrimary: LayerCardPrimary,\n\tSecondary: LayerCardSecondary,\n\tHeader: LayerCardHeader,\n\tBody: LayerCardBody,\n\tWell: LayerCardWell,\n\tFooter: LayerCardFooter,\n\tLoading: LayerCardLoading,\n\tEmpty: LayerCardEmpty,\n});\n"],"mappings":"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"}
+{"version":3,"file":"layer-card.js","names":[],"sources":["../../src/components/layer-card.tsx"],"sourcesContent":["import {\n\tChildren,\n\tcloneElement,\n\tFragment,\n\tforwardRef,\n\ttype HTMLAttributes,\n\tisValidElement,\n\ttype ReactElement,\n\ttype ReactNode,\n} from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { Empty } from \"./empty\";\nimport { SkeletonLine } from \"./skeleton-line\";\n\nconst ROOT_CLASSES = `${BASALT_UI_CLASS} overflow-hidden rounded-basalt-lg text-basalt-foreground`;\nconst PADDING_CLASSES = {\n\tnone: \"\",\n\tsm: \"p-3\",\n\tmd: \"p-4\",\n\tlg: \"p-6\",\n} as const;\n\nexport type LayerCardPadding = keyof typeof PADDING_CLASSES;\n\nexport type LayerCardProps = Omit<HTMLAttributes<HTMLDivElement>, \"className\"> & {\n\t/**\n\t * Additional classes for the card root.\n\t */\n\tclassName?: string;\n\t/**\n\t * Draw a hairline ring. Default grouping is luminance only.\n\t * @default false\n\t */\n\toutlined?: boolean;\n\t/**\n\t * Inner spacing for unstructured card content.\n\t * @default \"md\"\n\t */\n\tpadding?: LayerCardPadding;\n};\nexport type LayerCardSectionProps = HTMLAttributes<HTMLDivElement>;\nexport type LayerCardWellProps = LayerCardSectionProps & {\n\t/**\n\t * Draw a hairline ring on a nested well.\n\t * @default false\n\t */\n\toutlined?: boolean;\n};\nexport type LayerCardLoadingProps = Omit<HTMLAttributes<HTMLDivElement>, \"aria-label\"> & {\n\t/**\n\t * Accessible label announced for the loading state.\n\t * @default \"Loading\"\n\t */\n\tlabel?: string;\n};\nexport type LayerCardEmptyProps = Omit<HTMLAttributes<HTMLDivElement>, \"title\" | \"children\"> & {\n\t/**\n\t * Empty-state heading.\n\t * @default \"No content\"\n\t */\n\ttitle?: string;\n\t/**\n\t * Supporting empty-state text.\n\t */\n\tdescription?: string;\n\t/**\n\t * Optional empty-state icon.\n\t */\n\ticon?: ReactNode;\n\t/**\n\t * Optional interactive action element rendered below empty content.\n\t */\n\taction?: ReactNode;\n\t/**\n\t * Custom supporting content or custom layout rendered between description and action.\n\t */\n\tchildren?: ReactNode;\n};\n\nfunction isElement(child: ReactNode): child is ReactElement<{ children?: ReactNode }> {\n\treturn isValidElement(child);\n}\n\nfunction childType(child: ReactElement): unknown {\n\treturn child.type;\n}\n\nfunction hasSlot(children: ReactNode, match: (type: unknown) => boolean): boolean {\n\treturn Children.toArray(children).some((child) => {\n\t\tif (!isElement(child)) {\n\t\t\treturn false;\n\t\t}\n\t\tif (match(childType(child))) {\n\t\t\treturn true;\n\t\t}\n\t\tif (childType(child) === Fragment) {\n\t\t\treturn hasSlot(child.props.children, match);\n\t\t}\n\t\treturn false;\n\t});\n}\n\nfunction decorateHeaders(children: ReactNode, divided: boolean): ReactNode {\n\tif (!divided) {\n\t\treturn children;\n\t}\n\treturn Children.map(children, (child) => {\n\t\tif (!isElement(child)) {\n\t\t\treturn child;\n\t\t}\n\t\tif (childType(child) === Fragment) {\n\t\t\treturn cloneElement(child, {\n\t\t\t\tchildren: decorateHeaders(child.props.children, divided),\n\t\t\t});\n\t\t}\n\t\tif (childType(child) === LayerCardHeader || childType(child) === LayerCardSecondary) {\n\t\t\tconst typed = child as ReactElement<{ className?: string }>;\n\t\t\treturn cloneElement(typed, {\n\t\t\t\tclassName: cn(typed.props.className, \"border-b border-basalt-border\"),\n\t\t\t});\n\t\t}\n\t\treturn child;\n\t});\n}\n\nconst LayerCardRoot = forwardRef<HTMLDivElement, LayerCardProps>(\n\t({ className, children, outlined = false, padding = \"md\", ...props }, ref) => {\n\t\tconst structured = hasSlot(children, (type) => STRUCTURED_TYPES.has(type));\n\t\tconst hasWell = hasSlot(\n\t\t\tchildren,\n\t\t\t(type) => type === LayerCardWell || type === LayerCardPrimary,\n\t\t);\n\t\tconst hasBody = hasSlot(children, (type) => type === LayerCardBody);\n\t\tconst headerDivided = hasBody && !hasWell;\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\tdata-basalt-surface=\"\"\n\t\t\t\tclassName={cn(\n\t\t\t\t\tROOT_CLASSES,\n\t\t\t\t\tstructured ? \"flex w-full flex-col\" : PADDING_CLASSES[padding],\n\t\t\t\t\toutlined && \"ring-1 ring-basalt-border/40\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{decorateHeaders(children, headerDivided)}\n\t\t\t</div>\n\t\t);\n\t},\n);\nLayerCardRoot.displayName = \"LayerCard\";\n\nfunction LayerCardHeader({ className, ...props }: LayerCardSectionProps) {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"flex min-w-0 items-start justify-between gap-4 px-4 py-3 text-basalt-muted-foreground\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\nLayerCardHeader.displayName = \"LayerCard.Header\";\n\nfunction LayerCardBody({ className, ...props }: LayerCardSectionProps) {\n\treturn <div className={cn(\"min-w-0 p-4\", className)} {...props} />;\n}\nLayerCardBody.displayName = \"LayerCard.Body\";\n\nfunction LayerCardWell({ className, outlined = false, ...props }: LayerCardWellProps) {\n\treturn (\n\t\t<div\n\t\t\tdata-basalt-surface=\"\"\n\t\t\tclassName={cn(\"min-w-0 p-4\", outlined && \"ring-1 ring-basalt-border/40\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\nLayerCardWell.displayName = \"LayerCard.Well\";\n\nfunction LayerCardPrimary(props: LayerCardWellProps) {\n\treturn <LayerCardWell {...props} />;\n}\nLayerCardPrimary.displayName = \"LayerCard.Primary\";\n\nfunction LayerCardSecondary(props: LayerCardSectionProps) {\n\treturn <LayerCardHeader {...props} />;\n}\nLayerCardSecondary.displayName = \"LayerCard.Secondary\";\n\nfunction LayerCardFooter({ className, ...props }: LayerCardSectionProps) {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"flex flex-wrap items-center justify-end gap-2 border-t border-basalt-border px-4 py-3\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\nLayerCardFooter.displayName = \"LayerCard.Footer\";\n\nfunction LayerCardLoading({ label = \"Loading\", className, ...props }: LayerCardLoadingProps) {\n\treturn (\n\t\t<div role=\"status\" aria-label={label} className={cn(\"space-y-3 p-4\", className)} {...props}>\n\t\t\t<SkeletonLine minWidth={100} maxWidth={100} />\n\t\t\t<SkeletonLine minWidth={72} maxWidth={72} />\n\t\t\t<SkeletonLine minWidth={88} maxWidth={88} />\n\t\t</div>\n\t);\n}\nLayerCardLoading.displayName = \"LayerCard.Loading\";\n\nfunction LayerCardEmpty({\n\ttitle = \"No content\",\n\tdescription,\n\ticon,\n\taction,\n\tchildren,\n\tclassName,\n\t...props\n}: LayerCardEmptyProps) {\n\treturn (\n\t\t<Empty\n\t\t\ttitle={title}\n\t\t\tdescription={description}\n\t\t\ticon={icon}\n\t\t\taction={action}\n\t\t\tclassName={cn(\"p-8\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</Empty>\n\t);\n}\nLayerCardEmpty.displayName = \"LayerCard.Empty\";\n\nconst STRUCTURED_TYPES = new Set<unknown>([\n\tLayerCardHeader,\n\tLayerCardBody,\n\tLayerCardWell,\n\tLayerCardFooter,\n\tLayerCardLoading,\n\tLayerCardEmpty,\n\tLayerCardPrimary,\n\tLayerCardSecondary,\n]);\n\nexport const LayerCard = Object.assign(LayerCardRoot, {\n\tPrimary: LayerCardPrimary,\n\tSecondary: LayerCardSecondary,\n\tHeader: LayerCardHeader,\n\tBody: LayerCardBody,\n\tWell: LayerCardWell,\n\tFooter: LayerCardFooter,\n\tLoading: LayerCardLoading,\n\tEmpty: LayerCardEmpty,\n});\n"],"mappings":"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"}

package/dist/components/loader.d.ts

@@ -1,4 +1,12 @@
 import { type SVGAttributes } from "react";
-export declare function Loader({ className, size, ...props }: SVGAttributes<SVGSVGElement> & {
+export interface LoaderProps extends SVGAttributes<SVGSVGElement> {
+    /**
+     * Width and height of the loader spinner in pixels.
+     *
+     * Note: Controls both the SVG width and height dimensions.
+     *
+     * @default 24
+     */
     size?: number;
-}): import("react").JSX.Element;
+}
+export declare function Loader({ className, size, ...props }: LoaderProps): import("react").JSX.Element;

package/dist/components/loader.js.map

@@ -1 +1 @@
-{"version":3,"file":"loader.js","names":[],"sources":["../../src/components/loader.tsx"],"sourcesContent":["import { type SVGAttributes, useId } from \"react\";\nimport { cn } from \"../utils/cn\";\n\nexport function Loader({\n\tclassName,\n\tsize = 24,\n\t...props\n}: SVGAttributes<SVGSVGElement> & { size?: number }) {\n\tconst gradientId = `basalt-loader-${useId().replace(/:/g, \"\")}`;\n\treturn (\n\t\t<svg\n\t\t\tviewBox=\"0 0 24 24\"\n\t\t\trole=\"status\"\n\t\t\taria-label=\"Loading\"\n\t\t\t{...props}\n\t\t\twidth={size}\n\t\t\theight={size}\n\t\t\tclassName={cn(\n\t\t\t\t\"origin-center animate-basalt-loader text-basalt-primary motion-reduce:animate-none\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t<defs>\n\t\t\t\t<linearGradient id={gradientId} x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n\t\t\t\t\t<stop offset=\"0%\" stopColor=\"currentColor\" stopOpacity=\"0\" />\n\t\t\t\t\t<stop offset=\"55%\" stopColor=\"currentColor\" stopOpacity=\"0.35\" />\n\t\t\t\t\t<stop offset=\"100%\" stopColor=\"currentColor\" stopOpacity=\"1\" />\n\t\t\t\t</linearGradient>\n\t\t\t</defs>\n\t\t\t<circle\n\t\t\t\tcx=\"12\"\n\t\t\t\tcy=\"12\"\n\t\t\t\tr=\"9.5\"\n\t\t\t\tfill=\"none\"\n\t\t\t\topacity=\"0.12\"\n\t\t\t\tstroke=\"currentColor\"\n\t\t\t\tstrokeWidth=\"2.25\"\n\t\t\t/>\n\t\t\t<circle\n\t\t\t\tcx=\"12\"\n\t\t\t\tcy=\"12\"\n\t\t\t\tr=\"9.5\"\n\t\t\t\tfill=\"none\"\n\t\t\t\tstroke={`url(#${gradientId})`}\n\t\t\t\tstrokeWidth=\"2.25\"\n\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\tstrokeDasharray=\"36 60\"\n\t\t\t/>\n\t\t</svg>\n\t);\n}\n"],"mappings":";;;;;AAGA,SAAgB,EAAO,EACtB,cACA,UAAO,IACP,GAAG,KACiD;CACpD,IAAM,IAAa,iBAAiB,EAAM,CAAC,CAAC,QAAQ,MAAM,EAAE;CAC5D,OACC,kBAAC,OAAD;EACC,SAAQ;EACR,MAAK;EACL,cAAW;EACX,GAAI;EACJ,OAAO;EACP,QAAQ;EACR,WAAW,EACV,sFACA,CACD;EAVD,UAAA;GAYC,kBAAC,QAAD,EAAA,UACC,kBAAC,kBAAD;IAAgB,IAAI;IAAY,IAAG;IAAK,IAAG;IAAK,IAAG;IAAO,IAAG;IAA7D,UAAA;KACC,kBAAC,QAAD;MAAM,QAAO;MAAK,WAAU;MAAe,aAAY;KAAK,CAAA;KAC5D,kBAAC,QAAD;MAAM,QAAO;MAAM,WAAU;MAAe,aAAY;KAAQ,CAAA;KAChE,kBAAC,QAAD;MAAM,QAAO;MAAO,WAAU;MAAe,aAAY;KAAK,CAAA;IAC/C;GACX,CAAA,EAAA,CAAA;GACN,kBAAC,UAAD;IACC,IAAG;IACH,IAAG;IACH,GAAE;IACF,MAAK;IACL,SAAQ;IACR,QAAO;IACP,aAAY;GACZ,CAAA;GACD,kBAAC,UAAD;IACC,IAAG;IACH,IAAG;IACH,GAAE;IACF,MAAK;IACL,QAAQ,QAAQ,EAAW;IAC3B,aAAY;IACZ,eAAc;IACd,iBAAgB;GAChB,CAAA;EACG;;AAEP"}
+{"version":3,"file":"loader.js","names":[],"sources":["../../src/components/loader.tsx"],"sourcesContent":["import { type SVGAttributes, useId } from \"react\";\nimport { cn } from \"../utils/cn\";\n\nexport interface LoaderProps extends SVGAttributes<SVGSVGElement> {\n\t/**\n\t * Width and height of the loader spinner in pixels.\n\t *\n\t * Note: Controls both the SVG width and height dimensions.\n\t *\n\t * @default 24\n\t */\n\tsize?: number;\n}\n\nexport function Loader({ className, size = 24, ...props }: LoaderProps) {\n\tconst gradientId = `basalt-loader-${useId().replace(/:/g, \"\")}`;\n\treturn (\n\t\t<svg\n\t\t\tviewBox=\"0 0 24 24\"\n\t\t\trole=\"status\"\n\t\t\taria-label=\"Loading\"\n\t\t\t{...props}\n\t\t\twidth={size}\n\t\t\theight={size}\n\t\t\tclassName={cn(\n\t\t\t\t\"origin-center animate-basalt-loader text-basalt-primary motion-reduce:animate-none\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t<defs>\n\t\t\t\t<linearGradient id={gradientId} x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n\t\t\t\t\t<stop offset=\"0%\" stopColor=\"currentColor\" stopOpacity=\"0\" />\n\t\t\t\t\t<stop offset=\"55%\" stopColor=\"currentColor\" stopOpacity=\"0.35\" />\n\t\t\t\t\t<stop offset=\"100%\" stopColor=\"currentColor\" stopOpacity=\"1\" />\n\t\t\t\t</linearGradient>\n\t\t\t</defs>\n\t\t\t<circle\n\t\t\t\tcx=\"12\"\n\t\t\t\tcy=\"12\"\n\t\t\t\tr=\"9.5\"\n\t\t\t\tfill=\"none\"\n\t\t\t\topacity=\"0.12\"\n\t\t\t\tstroke=\"currentColor\"\n\t\t\t\tstrokeWidth=\"2.25\"\n\t\t\t/>\n\t\t\t<circle\n\t\t\t\tcx=\"12\"\n\t\t\t\tcy=\"12\"\n\t\t\t\tr=\"9.5\"\n\t\t\t\tfill=\"none\"\n\t\t\t\tstroke={`url(#${gradientId})`}\n\t\t\t\tstrokeWidth=\"2.25\"\n\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\tstrokeDasharray=\"36 60\"\n\t\t\t/>\n\t\t</svg>\n\t);\n}\n"],"mappings":";;;;;AAcA,SAAgB,EAAO,EAAE,cAAW,UAAO,IAAI,GAAG,KAAsB;CACvE,IAAM,IAAa,iBAAiB,EAAM,CAAC,CAAC,QAAQ,MAAM,EAAE;CAC5D,OACC,kBAAC,OAAD;EACC,SAAQ;EACR,MAAK;EACL,cAAW;EACX,GAAI;EACJ,OAAO;EACP,QAAQ;EACR,WAAW,EACV,sFACA,CACD;EAVD,UAAA;GAYC,kBAAC,QAAD,EAAA,UACC,kBAAC,kBAAD;IAAgB,IAAI;IAAY,IAAG;IAAK,IAAG;IAAK,IAAG;IAAO,IAAG;IAA7D,UAAA;KACC,kBAAC,QAAD;MAAM,QAAO;MAAK,WAAU;MAAe,aAAY;KAAK,CAAA;KAC5D,kBAAC,QAAD;MAAM,QAAO;MAAM,WAAU;MAAe,aAAY;KAAQ,CAAA;KAChE,kBAAC,QAAD;MAAM,QAAO;MAAO,WAAU;MAAe,aAAY;KAAK,CAAA;IAC/C;GACX,CAAA,EAAA,CAAA;GACN,kBAAC,UAAD;IACC,IAAG;IACH,IAAG;IACH,GAAE;IACF,MAAK;IACL,SAAQ;IACR,QAAO;IACP,aAAY;GACZ,CAAA;GACD,kBAAC,UAAD;IACC,IAAG;IACH,IAAG;IACH,GAAE;IACF,MAAK;IACL,QAAQ,QAAQ,EAAW;IAC3B,aAAY;IACZ,eAAc;IACd,iBAAgB;GAChB,CAAA;EACG;;AAEP"}