@nocoo/basalt 2.2.0 → 3.0.0

package/dist/components/layer-card.js

@@ -4,130 +4,135 @@ 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";
+import { Slot as l } from "@radix-ui/react-slot";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/components/layer-card.tsx
-var d = `${t} overflow-hidden rounded-basalt-lg text-basalt-foreground`, f = {
+var f = `${t} overflow-hidden rounded-basalt-lg text-basalt-foreground`, p = {
 	none: "",
-	sm: "p-3",
-	md: "p-4",
-	lg: "p-6"
+	sm: "p-basalt-card-sm",
+	md: "p-basalt-card",
+	lg: "p-basalt-card-lg",
+	xl: "p-basalt-card-xl"
 };
-function p(e) {
+function m(e) {
 	return c(e);
 }
-function m(e, t) {
-	return i.toArray(e).some((e) => p(e) ? t(e.type) ? !0 : e.type === a && m(e.props.children, t) : !1);
+function h(e, t) {
+	return i.toArray(e).some((e) => m(e) ? t(e.type) ? !0 : e.type === a && h(e.props.children, t) : !1);
 }
-function h(t, n) {
+function g(t, n) {
 	return n ? i.map(t, (t) => {
-		if (!p(t)) return t;
-		if (t.type === a) return o(t, { children: h(t.props.children, n) });
-		if (t.type === _ || t.type === x) {
+		if (!m(t)) return t;
+		if (t.type === a) return o(t, { children: g(t.props.children, n) });
+		if (t.type === v || t.type === S) {
 			let n = t;
 			return o(n, { className: e(n.props.className, "border-b border-basalt-border") });
 		}
 		return t;
 	}) : t;
 }
-var g = s(({ className: t, children: n, outlined: r = !1, padding: i = "md", ...a }, o) => {
-	let s = m(n, (e) => T.has(e)), c = m(n, (e) => e === y || e === b), u = m(n, (e) => e === v) && !c;
-	return /* @__PURE__ */ l("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), l = h(n, (e) => e === y) && !c;
+	return /* @__PURE__ */ u("div", {
 		ref: o,
 		"data-basalt-surface": "",
-		className: e(d, s ? "flex w-full flex-col" : f[i], r && "ring-1 ring-basalt-border/40", t),
+		"data-card-structured": s || void 0,
+		className: e(f, s ? "flex w-full flex-col" : p[i], r && "ring-1 ring-basalt-border/40", t),
 		...a,
-		children: h(n, u)
+		children: g(n, l)
 	});
 });
-g.displayName = "LayerCard";
-function _({ 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";
+function v({ className: t, asChild: n = !1, ...r }) {
+	return /* @__PURE__ */ u(n ? l : "div", {
+		"data-slot": "card-header",
+		className: e("flex min-w-0 justify-between gap-basalt-card px-basalt-card py-basalt-card-sm text-basalt-muted-foreground", n ? "w-full items-center" : "items-start", t),
+		...r
 	});
 }
-_.displayName = "LayerCard.Header";
-function v({ className: t, ...n }) {
-	return /* @__PURE__ */ l("div", {
-		className: e("min-w-0 p-4", t),
+v.displayName = "LayerCard.Header";
+function y({ className: t, ...n }) {
+	return /* @__PURE__ */ u("div", {
+		"data-slot": "card-body",
+		className: e("min-w-0 p-basalt-card", t),
 		...n
 	});
 }
-v.displayName = "LayerCard.Body";
-function y({ className: t, outlined: n = !1, ...r }) {
-	return /* @__PURE__ */ l("div", {
+y.displayName = "LayerCard.Body";
+function b({ className: t, outlined: n = !1, ...r }) {
+	return /* @__PURE__ */ u("div", {
 		"data-basalt-surface": "",
-		className: e("min-w-0 p-4", n && "ring-1 ring-basalt-border/40", t),
+		className: e("min-w-0 p-basalt-card", n && "ring-1 ring-basalt-border/40", t),
 		...r
 	});
 }
-y.displayName = "LayerCard.Well";
-function b(e) {
-	return /* @__PURE__ */ l(y, { ...e });
-}
-b.displayName = "LayerCard.Primary";
+b.displayName = "LayerCard.Well";
 function x(e) {
-	return /* @__PURE__ */ l(_, { ...e });
+	return /* @__PURE__ */ u(b, { ...e });
 }
-x.displayName = "LayerCard.Secondary";
-function S({ 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),
+x.displayName = "LayerCard.Primary";
+function S(e) {
+	return /* @__PURE__ */ u(v, { ...e });
+}
+S.displayName = "LayerCard.Secondary";
+function C({ className: t, ...n }) {
+	return /* @__PURE__ */ u("div", {
+		className: e("flex flex-wrap items-center justify-end gap-basalt-space-lg border-t border-basalt-border px-basalt-card py-basalt-card-sm", t),
 		...n
 	});
 }
-S.displayName = "LayerCard.Footer";
-function C({ label: t = "Loading", className: n, ...i }) {
-	return /* @__PURE__ */ u("div", {
+C.displayName = "LayerCard.Footer";
+function w({ label: t = "Loading", className: n, ...i }) {
+	return /* @__PURE__ */ d("div", {
 		role: "status",
 		"aria-label": t,
-		className: e("space-y-3 p-4", n),
+		className: e("space-y-basalt-space-lg p-basalt-card", n),
 		...i,
 		children: [
-			/* @__PURE__ */ l(r, {
+			/* @__PURE__ */ u(r, {
 				minWidth: 100,
 				maxWidth: 100
 			}),
-			/* @__PURE__ */ l(r, {
+			/* @__PURE__ */ u(r, {
 				minWidth: 72,
 				maxWidth: 72
 			}),
-			/* @__PURE__ */ l(r, {
+			/* @__PURE__ */ u(r, {
 				minWidth: 88,
 				maxWidth: 88
 			})
 		]
 	});
 }
-C.displayName = "LayerCard.Loading";
-function w({ title: t = "No content", className: r, ...i }) {
-	return /* @__PURE__ */ l(n, {
+w.displayName = "LayerCard.Loading";
+function T({ title: t = "No content", className: r, ...i }) {
+	return /* @__PURE__ */ u(n, {
 		title: t,
-		className: e("p-8", r),
+		className: e("p-basalt-card", r),
 		...i
 	});
 }
-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":["ROOT_CLASSES","BASALT_UI_CLASS","PADDING_CLASSES","isElement","isValidElement","child","hasSlot","Children","children","match","Fragment","decorateHeaders","divided","cloneElement","LayerCardHeader","LayerCardSecondary","typed","cn","LayerCardRoot","forwardRef","props","structured","STRUCTURED_TYPES","type","hasWell","LayerCardWell","LayerCardPrimary","headerDivided","LayerCardBody","padding","outlined","className","LayerCardFooter","LayerCardLoading","label","SkeletonLine","LayerCardEmpty","Empty","LayerCard"],"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 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(child.type)) {\n\t\t\treturn true;\n\t\t}\n\t\tif (child.type === 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 (child.type === 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 (child.type === LayerCardHeader || child.type === 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({ title = \"No content\", className, ...props }: LayerCardEmptyProps) {\n\treturn <Empty title={title} className={cn(\"p-8\", className)} {...props} />;\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":["ROOT_CLASSES","BASALT_UI_CLASS","PADDING_CLASSES","isElement","isValidElement","child","hasSlot","Children","children","match","Fragment","decorateHeaders","divided","cloneElement","LayerCardHeader","LayerCardSecondary","typed","cn","LayerCardRoot","forwardRef","props","structured","STRUCTURED_TYPES","type","hasWell","LayerCardWell","LayerCardPrimary","headerDivided","LayerCardBody","padding","outlined","className","asChild","Slot","LayerCardFooter","LayerCardLoading","label","SkeletonLine","LayerCardEmpty","Empty","LayerCard"],"sources":["../../src/components/layer-card.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport {\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-basalt-card-sm\",\n\tmd: \"p-basalt-card\",\n\tlg: \"p-basalt-card-lg\",\n\txl: \"p-basalt-card-xl\",\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 LayerCardHeaderProps = LayerCardSectionProps & {\n\t/** Apply header insets to one child, such as a CollapsibleTrigger, without another wrapper. @default false */\n\tasChild?: boolean;\n};\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 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(child.type)) {\n\t\t\treturn true;\n\t\t}\n\t\tif (child.type === 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 (child.type === 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 (child.type === LayerCardHeader || child.type === 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\tdata-card-structured={structured || undefined}\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, asChild = false, ...props }: LayerCardHeaderProps) {\n\tconst Component = asChild ? Slot : \"div\";\n\treturn (\n\t\t<Component\n\t\t\tdata-slot=\"card-header\"\n\t\t\tclassName={cn(\n\t\t\t\t\"flex min-w-0 justify-between gap-basalt-card px-basalt-card py-basalt-card-sm text-basalt-muted-foreground\",\n\t\t\t\tasChild ? \"w-full items-center\" : \"items-start\",\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 (\n\t\t<div data-slot=\"card-body\" className={cn(\"min-w-0 p-basalt-card\", className)} {...props} />\n\t);\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-basalt-card\", 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-basalt-space-lg border-t border-basalt-border px-basalt-card py-basalt-card-sm\",\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\n\t\t\trole=\"status\"\n\t\t\taria-label={label}\n\t\t\tclassName={cn(\"space-y-basalt-space-lg p-basalt-card\", className)}\n\t\t\t{...props}\n\t\t>\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({ title = \"No content\", className, ...props }: LayerCardEmptyProps) {\n\treturn <Empty title={title} className={cn(\"p-basalt-card\", className)} {...props} />;\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,12 +1,18 @@
-import { type SVGAttributes } from "react";
-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
-     */
+import type { HTMLAttributes } from "react";
+export interface LoaderProps extends Omit<HTMLAttributes<HTMLSpanElement>, "children"> {
+    /** Width and height of the pixel grid in CSS pixels. @default 16 */
     size?: number;
+    /** Visible loading text and default accessible name. @default "Loading" */
+    label?: string;
+    /** Display the text next to the grid. @default true */
+    showLabel?: boolean;
+    /** Display elapsed time after the delay. Time starts on mount. @default true */
+    showElapsed?: boolean;
+    /** Milliseconds before elapsed time is shown. @default 5000 */
+    elapsedDelayMs?: number;
+    /** Animate the clockwise trail around the eight perimeter cells. @default true */
+    animate?: boolean;
+    /** Apply a sweeping highlight to the label. @default true */
+    shimmer?: boolean;
 }
-export declare function Loader({ className, size, ...props }: LoaderProps): import("react").JSX.Element;
+export declare function Loader({ className, size, label, showLabel, showElapsed, elapsedDelayMs, animate, shimmer, ...props }: LoaderProps): import("react").JSX.Element;

package/dist/components/loader.js

@@ -1,66 +1,59 @@
 "use client";
 import { cn as e } from "../utils/cn.js";
-import { useId as t } from "react";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { BASALT_UI_CLASS as t } from "../utils/control-surface.js";
+import { useLoaderViewModel as n } from "../viewmodels/use-loader.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/components/loader.tsx
-function i({ className: i, size: a = 24, ...o }) {
-	let s = `basalt-loader-${t().replace(/:/g, "")}`;
-	return /* @__PURE__ */ r("svg", {
-		viewBox: "0 0 24 24",
+var a = [
+	0,
+	1,
+	2,
+	5,
+	8,
+	7,
+	6,
+	3
+];
+function o({ className: o, size: s = 16, label: c = "Loading", showLabel: l = !0, showElapsed: u = !0, elapsedDelayMs: d = 5e3, animate: f = !0, shimmer: p = !0, ...m }) {
+	let h = n(u, d);
+	return /* @__PURE__ */ i("span", {
 		role: "status",
-		"aria-label": "Loading",
-		...o,
-		width: a,
-		height: a,
-		className: e("origin-center animate-basalt-loader text-basalt-primary motion-reduce:animate-none", i),
+		"aria-label": c,
+		className: e(t, "inline-flex items-center gap-basalt-space-lg text-basalt-base text-basalt-muted-foreground", o),
+		...m,
 		children: [
-			/* @__PURE__ */ n("defs", { children: /* @__PURE__ */ r("linearGradient", {
-				id: s,
-				x1: "0%",
-				y1: "0%",
-				x2: "100%",
-				y2: "0%",
-				children: [
-					/* @__PURE__ */ n("stop", {
-						offset: "0%",
-						stopColor: "currentColor",
-						stopOpacity: "0"
-					}),
-					/* @__PURE__ */ n("stop", {
-						offset: "55%",
-						stopColor: "currentColor",
-						stopOpacity: "0.35"
-					}),
-					/* @__PURE__ */ n("stop", {
-						offset: "100%",
-						stopColor: "currentColor",
-						stopOpacity: "1"
-					})
-				]
-			}) }),
-			/* @__PURE__ */ n("circle", {
-				cx: "12",
-				cy: "12",
-				r: "9.5",
-				fill: "none",
-				opacity: "0.12",
-				stroke: "currentColor",
-				strokeWidth: "2.25"
+			/* @__PURE__ */ r("span", {
+				"aria-hidden": "true",
+				"data-basalt-loader": "",
+				"data-animated": f,
+				className: "grid shrink-0 grid-cols-3 gap-basalt-space-xs",
+				style: {
+					width: s,
+					height: s
+				},
+				children: a.map((e, t) => /* @__PURE__ */ r("span", {
+					"data-step": t,
+					className: "rounded-basalt-sm bg-current",
+					style: {
+						"--basalt-pixel-delay": `${t * 100 - 800}ms`,
+						gridArea: `${Math.floor(e / 3) + 1} / ${e % 3 + 1}`
+					}
+				}, `pixel-${e}`))
 			}),
-			/* @__PURE__ */ n("circle", {
-				cx: "12",
-				cy: "12",
-				r: "9.5",
-				fill: "none",
-				stroke: `url(#${s})`,
-				strokeWidth: "2.25",
-				strokeLinecap: "round",
-				strokeDasharray: "36 60"
+			l && /* @__PURE__ */ r("span", {
+				className: e("text-basalt-code font-medium", p && f && "basalt-shimmer-label"),
+				children: c
+			}),
+			h.visible && /* @__PURE__ */ r("span", {
+				"aria-hidden": "true",
+				"data-basalt-elapsed": "",
+				className: "font-mono text-basalt-sm tabular-nums",
+				children: h.text
 			})
 		]
 	});
 }
 //#endregion
-export { i as Loader };
+export { o as Loader };
 
 //# sourceMappingURL=loader.js.map

package/dist/components/loader.js.map

@@ -1 +1 @@
-{"version":3,"file":"loader.js","names":["Loader","props","gradientId","useId","size","cn","className"],"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,SAAgBA,EAAO,EAAE,cAAW,UAAO,IAAI,GAAGC,KAAsB;CACvE,IAAMC,IAAa,iBAAiBC,EAAM,CAAC,CAAC,QAAQ,MAAM,EAAE;CAC5D,OACC,kBAAC,OAAD;EACC,SAAQ;EACR,MAAK;EACL,cAAW;EACX,GAAIF;EACJ,OAAOG;EACP,QAAQA;EACR,WAAWC,EACV,sFACAC,CACD;EAVD,UAAA;GAYC,kBAAC,QAAD,EAAA,UACC,kBAAC,kBAAD;IAAgB,IAAIJ;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,QAAQA,EAAW;IAC3B,aAAY;IACZ,eAAc;IACd,iBAAgB;GAChB,CAAA;EACG;;AAEP"}
+{"version":3,"file":"loader.js","names":["ORBIT_ORDER","Loader","props","vm","useLoaderViewModel","showElapsed","elapsedDelayMs","label","cn","BASALT_UI_CLASS","className","animate","size","step","cell","showLabel","shimmer"],"sources":["../../src/components/loader.tsx"],"sourcesContent":["import type { CSSProperties, HTMLAttributes } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { useLoaderViewModel } from \"../viewmodels/use-loader\";\n\nexport interface LoaderProps extends Omit<HTMLAttributes<HTMLSpanElement>, \"children\"> {\n\t/** Width and height of the pixel grid in CSS pixels. @default 16 */\n\tsize?: number;\n\t/** Visible loading text and default accessible name. @default \"Loading\" */\n\tlabel?: string;\n\t/** Display the text next to the grid. @default true */\n\tshowLabel?: boolean;\n\t/** Display elapsed time after the delay. Time starts on mount. @default true */\n\tshowElapsed?: boolean;\n\t/** Milliseconds before elapsed time is shown. @default 5000 */\n\telapsedDelayMs?: number;\n\t/** Animate the clockwise trail around the eight perimeter cells. @default true */\n\tanimate?: boolean;\n\t/** Apply a sweeping highlight to the label. @default true */\n\tshimmer?: boolean;\n}\n\nconst ORBIT_ORDER = [0, 1, 2, 5, 8, 7, 6, 3];\n\nexport function Loader({\n\tclassName,\n\tsize = 16,\n\tlabel = \"Loading\",\n\tshowLabel = true,\n\tshowElapsed = true,\n\telapsedDelayMs = 5000,\n\tanimate = true,\n\tshimmer = true,\n\t...props\n}: LoaderProps) {\n\tconst vm = useLoaderViewModel(showElapsed, elapsedDelayMs);\n\treturn (\n\t\t<span\n\t\t\trole=\"status\"\n\t\t\taria-label={label}\n\t\t\tclassName={cn(\n\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\t\"inline-flex items-center gap-basalt-space-lg text-basalt-base text-basalt-muted-foreground\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<span\n\t\t\t\taria-hidden=\"true\"\n\t\t\t\tdata-basalt-loader=\"\"\n\t\t\t\tdata-animated={animate}\n\t\t\t\tclassName=\"grid shrink-0 grid-cols-3 gap-basalt-space-xs\"\n\t\t\t\tstyle={{ width: size, height: size }}\n\t\t\t>\n\t\t\t\t{ORBIT_ORDER.map((cell, step) => (\n\t\t\t\t\t<span\n\t\t\t\t\t\tkey={`pixel-${cell}`}\n\t\t\t\t\t\tdata-step={step}\n\t\t\t\t\t\tclassName=\"rounded-basalt-sm bg-current\"\n\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\"--basalt-pixel-delay\": `${step * 100 - 800}ms`,\n\t\t\t\t\t\t\t\tgridArea: `${Math.floor(cell / 3) + 1} / ${(cell % 3) + 1}`,\n\t\t\t\t\t\t\t} as CSSProperties\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t))}\n\t\t\t</span>\n\t\t\t{showLabel && (\n\t\t\t\t<span\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"text-basalt-code font-medium\",\n\t\t\t\t\t\tshimmer && animate && \"basalt-shimmer-label\",\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t{label}\n\t\t\t\t</span>\n\t\t\t)}\n\t\t\t{vm.visible && (\n\t\t\t\t<span\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tdata-basalt-elapsed=\"\"\n\t\t\t\t\tclassName=\"font-mono text-basalt-sm tabular-nums\"\n\t\t\t\t>\n\t\t\t\t\t{vm.text}\n\t\t\t\t</span>\n\t\t\t)}\n\t\t</span>\n\t);\n}\n"],"mappings":";;;;;;AAsBA,IAAMA,IAAc;CAAC;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;AAAC;AAE3C,SAAgBC,EAAO,EACtB,cACA,UAAO,IACP,WAAQ,WACR,eAAY,IACZ,iBAAc,IACd,oBAAiB,KACjB,aAAU,IACV,aAAU,IACV,GAAGC,KACY;CACf,IAAMC,IAAKC,EAAmBC,GAAaC,CAAc;CACzD,OACC,kBAAC,QAAD;EACC,MAAK;EACL,cAAYC;EACZ,WAAWC,EACVC,GACA,8FACAC,CACD;EACA,GAAIR;EARL,UAAA;GAUC,kBAAC,QAAD;IACC,eAAY;IACZ,sBAAmB;IACnB,iBAAeS;IACf,WAAU;IACV,OAAO;KAAE,OAAOC;KAAM,QAAQA;IAAK;IAElC,UAAAZ,EAAY,KAAK,GAAM,MACvB,kBAAC,QAAD;KAEC,aAAWa;KACX,WAAU;KACV,OACC;MACC,wBAAwB,GAAGA,IAAO,MAAM,IAAI;MAC5C,UAAU,GAAG,KAAK,MAAMC,IAAO,CAAC,IAAI,EAAE,KAAMA,IAAO,IAAK;KACzD;IAED,GATK,SAASA,GASd,CACD;GACI,CAAA;GACLC,KACA,kBAAC,QAAD;IACC,WAAWP,EACV,gCACAQ,KAAWL,KAAW,sBACvB;IAEC,UAAAJ;GACI,CAAA;GAENJ,EAAG,WACH,kBAAC,QAAD;IACC,eAAY;IACZ,uBAAoB;IACpB,WAAU;IAET,UAAAA,EAAG;GACC,CAAA;EAEF;;AAER"}

package/dist/components/loading-screen.js

@@ -10,9 +10,9 @@ function i({ label: i = "Loading", mark: a, className: o, ...s }) {
 		className: e("fixed inset-0 z-50 flex items-center justify-center bg-basalt-background", o),
 		...s,
 		children: /* @__PURE__ */ r("div", {
-			className: "flex flex-col items-center gap-4",
-			children: [a ?? /* @__PURE__ */ n(t, { className: "h-8 w-8 text-basalt-foreground" }), /* @__PURE__ */ n("div", {
-				className: "relative h-px overflow-hidden rounded-full bg-basalt-border",
+			className: "flex flex-col items-center gap-basalt-space-lg",
+			children: [a ?? /* @__PURE__ */ n(t, { className: "h-basalt-8 w-basalt-8 text-basalt-foreground" }), /* @__PURE__ */ n("div", {
+				className: "relative h-px overflow-hidden rounded-basalt-full bg-basalt-border",
 				style: { width: "6rem" },
 				children: /* @__PURE__ */ n("span", {
 					className: "absolute inset-0 animate-basalt-shimmer motion-reduce:animate-none",

package/dist/components/loading-screen.js.map

@@ -1 +1 @@
-{"version":3,"file":"loading-screen.js","names":["LoadingScreen","props","label","cn","className","mark","BasaltMark"],"sources":["../../src/components/loading-screen.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BasaltMark } from \"./basalt-mark\";\n\nexport function LoadingScreen({\n\tlabel = \"Loading\",\n\tmark,\n\tclassName,\n\t...props\n}: HTMLAttributes<HTMLDivElement> & {\n\tlabel?: string;\n\tmark?: ReactNode;\n}) {\n\treturn (\n\t\t<div\n\t\t\trole=\"status\"\n\t\t\taria-label={label}\n\t\t\tclassName={cn(\n\t\t\t\t\"fixed inset-0 z-50 flex items-center justify-center bg-basalt-background\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<div className=\"flex flex-col items-center gap-4\">\n\t\t\t\t{mark ?? <BasaltMark className=\"h-8 w-8 text-basalt-foreground\" />}\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"relative h-px overflow-hidden rounded-full bg-basalt-border\"\n\t\t\t\t\tstyle={{ width: \"6rem\" }}\n\t\t\t\t>\n\t\t\t\t\t<span\n\t\t\t\t\t\tclassName=\"absolute inset-0 animate-basalt-shimmer motion-reduce:animate-none\"\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tbackground:\n\t\t\t\t\t\t\t\t\"linear-gradient(to right, transparent, hsl(var(--basalt-foreground) / 0.5), transparent)\",\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;AAIA,SAAgBA,EAAc,EAC7B,WAAQ,WACR,SACA,cACA,GAAGC,KAID;CACF,OACC,kBAAC,OAAD;EACC,MAAK;EACL,cAAYC;EACZ,WAAWC,EACV,4EACAC,CACD;EACA,GAAIH;EAEJ,UAAA,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACEI,KAAQ,kBAACC,GAAD,EAAY,WAAU,iCAAkC,CAAA,GACjE,kBAAC,OAAD;IACC,WAAU;IACV,OAAO,EAAE,OAAO,OAAO;IAEvB,UAAA,kBAAC,QAAD;KACC,WAAU;KACV,OAAO,EACN,YACC,2FACF;IACA,CAAA;GACG,CAAA,CACD;;CACD,CAAA;AAEP"}
+{"version":3,"file":"loading-screen.js","names":["LoadingScreen","props","label","cn","className","mark","BasaltMark"],"sources":["../../src/components/loading-screen.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BasaltMark } from \"./basalt-mark\";\n\nexport function LoadingScreen({\n\tlabel = \"Loading\",\n\tmark,\n\tclassName,\n\t...props\n}: HTMLAttributes<HTMLDivElement> & {\n\tlabel?: string;\n\tmark?: ReactNode;\n}) {\n\treturn (\n\t\t<div\n\t\t\trole=\"status\"\n\t\t\taria-label={label}\n\t\t\tclassName={cn(\n\t\t\t\t\"fixed inset-0 z-50 flex items-center justify-center bg-basalt-background\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<div className=\"flex flex-col items-center gap-basalt-space-lg\">\n\t\t\t\t{mark ?? <BasaltMark className=\"h-basalt-8 w-basalt-8 text-basalt-foreground\" />}\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"relative h-px overflow-hidden rounded-basalt-full bg-basalt-border\"\n\t\t\t\t\tstyle={{ width: \"6rem\" }}\n\t\t\t\t>\n\t\t\t\t\t<span\n\t\t\t\t\t\tclassName=\"absolute inset-0 animate-basalt-shimmer motion-reduce:animate-none\"\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tbackground:\n\t\t\t\t\t\t\t\t\"linear-gradient(to right, transparent, hsl(var(--basalt-foreground) / 0.5), transparent)\",\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;AAIA,SAAgBA,EAAc,EAC7B,WAAQ,WACR,SACA,cACA,GAAGC,KAID;CACF,OACC,kBAAC,OAAD;EACC,MAAK;EACL,cAAYC;EACZ,WAAWC,EACV,4EACAC,CACD;EACA,GAAIH;EAEJ,UAAA,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACEI,KAAQ,kBAACC,GAAD,EAAY,WAAU,+CAAgD,CAAA,GAC/E,kBAAC,OAAD;IACC,WAAU;IACV,OAAO,EAAE,OAAO,OAAO;IAEvB,UAAA,kBAAC,QAAD;KACC,WAAU;KACV,OAAO,EACN,YACC,2FACF;IACA,CAAA;GACG,CAAA,CACD;;CACD,CAAA;AAEP"}

package/dist/components/menu-bar.js

@@ -2,45 +2,50 @@
 import { cn as e } from "../utils/cn.js";
 import { BASALT_UI_CLASS as t } from "../utils/control-surface.js";
 import { overlayItemClass as n, overlayPanelClass as r } from "./overlay.js";
-import * as i from "react";
-import { jsx as a } from "react/jsx-runtime";
-import * as o from "@radix-ui/react-menubar";
+import { useHoverHighlight as i } from "../utils/use-hover-highlight.js";
+import * as a from "react";
+import { jsx as o } from "react/jsx-runtime";
+import * as s from "@radix-ui/react-menubar";
 //#region src/components/menu-bar.tsx
-function s(e) {
-	return /* @__PURE__ */ a(f, { ...e });
-}
 function c(e) {
-	return /* @__PURE__ */ a(o.Menu, { ...e });
+	return /* @__PURE__ */ o(p, { ...e });
+}
+function l(e) {
+	return /* @__PURE__ */ o(s.Menu, { ...e });
 }
-var l = i.forwardRef(({ className: n, ...r }, i) => /* @__PURE__ */ a(o.Trigger, {
+var u = a.forwardRef(({ className: n, ...r }, i) => /* @__PURE__ */ o(s.Trigger, {
 	ref: i,
-	className: e(t, "inline-flex h-8 items-center rounded-basalt-sm px-3 text-sm font-medium outline-hidden hover:bg-basalt-accent data-[state=open]:bg-basalt-accent", n),
+	className: e(t, "inline-flex min-h-basalt-control items-center rounded-basalt-sm px-basalt-space-lg text-basalt-base font-medium outline-hidden hover:bg-basalt-hover data-[state=open]:bg-basalt-selected", n),
 	...r
 }));
-l.displayName = o.Trigger.displayName;
-var u = i.forwardRef(({ className: t, sideOffset: n = 8, ...i }, s) => /* @__PURE__ */ a(o.Portal, {
-	forceMount: i.forceMount,
-	children: /* @__PURE__ */ a(o.Content, {
-		ref: s,
-		sideOffset: n,
-		className: r(e("min-w-40", t)),
-		...i
-	})
-}));
-u.displayName = o.Content.displayName;
-var d = i.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ a(o.Item, {
+u.displayName = s.Trigger.displayName;
+var d = a.forwardRef(({ className: t, sideOffset: n = 8, ...a }, c) => {
+	let l = i(c);
+	return /* @__PURE__ */ o(s.Portal, {
+		forceMount: a.forceMount,
+		children: /* @__PURE__ */ o(s.Content, {
+			ref: l,
+			sideOffset: n,
+			className: r(e("basalt-hover-list min-w-basalt-40", t)),
+			...a
+		})
+	});
+});
+d.displayName = s.Content.displayName;
+var f = a.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ o(s.Item, {
+	"data-basalt-hover-item": "",
 	ref: i,
-	className: n(e("relative outline-hidden focus:bg-basalt-accent", t)),
+	className: n(e("relative outline-hidden", t)),
 	...r
 }));
-d.displayName = o.Item.displayName;
-function f({ className: n, ...r }) {
-	return /* @__PURE__ */ a(o.Root, {
-		className: e(t, "flex h-9 items-center gap-0.5 rounded-basalt-md border border-basalt-border bg-basalt-popover px-1", n),
+f.displayName = s.Item.displayName;
+function p({ className: n, ...r }) {
+	return /* @__PURE__ */ o(s.Root, {
+		className: e(t, "flex min-h-basalt-control items-center gap-basalt-space-xs rounded-basalt-md border border-basalt-border bg-basalt-popover px-basalt-space-sm py-basalt-space-xs", n),
 		...r
 	});
 }
 //#endregion
-export { s as MenuBar, u as MenuBarContent, d as MenuBarItem, c as MenuBarMenu, f as MenuBarRoot, l as MenuBarTrigger };
+export { c as MenuBar, d as MenuBarContent, f as MenuBarItem, l as MenuBarMenu, p as MenuBarRoot, u as MenuBarTrigger };
 
 //# sourceMappingURL=menu-bar.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"menu-bar.js","names":["React","MenubarPrimitive","MenuBar","MenuBarRoot","props","MenuBarMenu","MenuBarTrigger","cn","BASALT_UI_CLASS","className","MenuBarContent","overlayPanelClass","MenuBarItem","overlayItemClass"],"sources":["../../src/components/menu-bar.tsx"],"sourcesContent":["import * as MenubarPrimitive from \"@radix-ui/react-menubar\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { MENU_GAP, overlayItemClass, overlayPanelClass } from \"./overlay\";\n\ntype RadixMenubarProps = React.ComponentProps<typeof MenubarPrimitive.Root>;\ntype RadixMenubarMenuProps = React.ComponentProps<typeof MenubarPrimitive.Menu>;\ntype RadixMenubarTriggerProps = React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>;\ntype RadixMenubarContentProps = React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>;\ntype RadixMenubarItemProps = React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item>;\n\nexport interface MenuBarProps\n\textends Omit<\n\t\tRadixMenubarProps,\n\t\t\"value\" | \"defaultValue\" | \"onValueChange\" | \"loop\" | \"dir\" | \"asChild\"\n\t> {\n\t/**\n\t * Controlled value of the currently open menu.\n\t */\n\tvalue?: RadixMenubarProps[\"value\"];\n\t/**\n\t * Uncontrolled initial value of the open menu.\n\t * @default \"\"\n\t */\n\tdefaultValue?: RadixMenubarProps[\"defaultValue\"];\n\t/**\n\t * Callback invoked when the open menu value changes.\n\t */\n\tonValueChange?: RadixMenubarProps[\"onValueChange\"];\n\t/**\n\t * Whether keyboard navigation loops around when reaching ends.\n\t * @default true\n\t */\n\tloop?: RadixMenubarProps[\"loop\"];\n\t/**\n\t * Reading direction of the menubar.\n\t * @default \"ltr\"\n\t */\n\tdir?: RadixMenubarProps[\"dir\"];\n\t/**\n\t * Change the default rendered div element to the child element, merging props and behavior.\n\t * MenuBar forwards ref to HTMLDivElement and inherits native div attributes.\n\t * @default false\n\t */\n\tasChild?: RadixMenubarProps[\"asChild\"];\n}\n\nexport function MenuBar(props: MenuBarProps) {\n\treturn <MenuBarRoot {...props} />;\n}\n\nexport interface MenuBarMenuProps extends Omit<RadixMenubarMenuProps, \"value\"> {\n\t/**\n\t * Unique identifier value for this menu within the menubar.\n\t */\n\tvalue?: RadixMenubarMenuProps[\"value\"];\n}\n\nexport function MenuBarMenu(props: MenuBarMenuProps) {\n\treturn <MenubarPrimitive.Menu {...props} />;\n}\n\nexport interface MenuBarTriggerProps\n\textends Omit<RadixMenubarTriggerProps, \"disabled\" | \"asChild\"> {\n\t/**\n\t * Disable the menubar trigger button.\n\t * @default false\n\t */\n\tdisabled?: RadixMenubarTriggerProps[\"disabled\"];\n\t/**\n\t * Change the default rendered button element to the child element, merging props and behavior.\n\t * Trigger forwards ref to HTMLButtonElement and inherits native button attributes.\n\t * @default false\n\t */\n\tasChild?: RadixMenubarTriggerProps[\"asChild\"];\n}\n\nexport const MenuBarTrigger = React.forwardRef<\n\tReact.ElementRef<typeof MenubarPrimitive.Trigger>,\n\tMenuBarTriggerProps\n>(({ className, ...props }, ref) => (\n\t<MenubarPrimitive.Trigger\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\tBASALT_UI_CLASS,\n\t\t\t\"inline-flex h-8 items-center rounded-basalt-sm px-3 text-sm font-medium outline-hidden hover:bg-basalt-accent data-[state=open]:bg-basalt-accent\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nMenuBarTrigger.displayName = MenubarPrimitive.Trigger.displayName;\n\nexport interface MenuBarContentProps\n\textends Omit<\n\t\tRadixMenubarContentProps,\n\t\t| \"loop\"\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| \"asChild\"\n\t\t| \"onCloseAutoFocus\"\n\t\t| \"onEscapeKeyDown\"\n\t\t| \"onPointerDownOutside\"\n\t\t| \"onFocusOutside\"\n\t\t| \"onInteractOutside\"\n\t> {\n\t/**\n\t * Whether keyboard navigation loops around when reaching the start or end item.\n\t * @default false\n\t */\n\tloop?: RadixMenubarContentProps[\"loop\"];\n\t/**\n\t * Preferred placement side relative to the menu trigger.\n\t * @default \"bottom\"\n\t */\n\tside?: RadixMenubarContentProps[\"side\"];\n\t/**\n\t * Distance in pixels between trigger and floating content panel.\n\t * @default 4\n\t */\n\tsideOffset?: RadixMenubarContentProps[\"sideOffset\"];\n\t/**\n\t * Preferred alignment along the side axis.\n\t * @default \"start\"\n\t */\n\talign?: RadixMenubarContentProps[\"align\"];\n\t/**\n\t * Offset in pixels from the start or end alignment position.\n\t * @default 0\n\t */\n\talignOffset?: RadixMenubarContentProps[\"alignOffset\"];\n\t/**\n\t * Whether to reposition content to avoid viewport boundary collisions.\n\t * @default true\n\t */\n\tavoidCollisions?: RadixMenubarContentProps[\"avoidCollisions\"];\n\t/**\n\t * Element or elements bounding boundary collision calculations.\n\t * @default []\n\t */\n\tcollisionBoundary?: RadixMenubarContentProps[\"collisionBoundary\"];\n\t/**\n\t * Virtual padding from collision boundaries in pixels.\n\t * @default 0\n\t */\n\tcollisionPadding?: RadixMenubarContentProps[\"collisionPadding\"];\n\t/**\n\t * Padding in pixels between popper arrow and floating panel edge.\n\t * @default 0\n\t */\n\tarrowPadding?: RadixMenubarContentProps[\"arrowPadding\"];\n\t/**\n\t * Sticky positioning behavior along the align axis when overflowing.\n\t * @default \"partial\"\n\t */\n\tsticky?: RadixMenubarContentProps[\"sticky\"];\n\t/**\n\t * Whether to hide content completely when trigger is fully occluded.\n\t * @default false\n\t */\n\thideWhenDetached?: RadixMenubarContentProps[\"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 * Change the default rendered div element to the child element, merging props and behavior.\n\t * Content forwards ref to HTMLDivElement and inherits native div attributes.\n\t * @default false\n\t */\n\tasChild?: RadixMenubarContentProps[\"asChild\"];\n\t/**\n\t * Callback fired when auto-focusing on close. Can be prevented.\n\t */\n\tonCloseAutoFocus?: RadixMenubarContentProps[\"onCloseAutoFocus\"];\n\t/**\n\t * Callback fired when the Escape key is down on the dismissable layer. Can be prevented.\n\t */\n\tonEscapeKeyDown?: RadixMenubarContentProps[\"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?: RadixMenubarContentProps[\"onPointerDownOutside\"];\n\t/**\n\t * Callback fired when focus moves outside the bounds of the dismissable layer. Can be prevented.\n\t */\n\tonFocusOutside?: RadixMenubarContentProps[\"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?: RadixMenubarContentProps[\"onInteractOutside\"];\n}\n\nexport const MenuBarContent = React.forwardRef<\n\tReact.ElementRef<typeof MenubarPrimitive.Content>,\n\tMenuBarContentProps\n>(({ className, sideOffset = MENU_GAP, ...props }, ref) => (\n\t<MenubarPrimitive.Portal forceMount={props.forceMount}>\n\t\t<MenubarPrimitive.Content\n\t\t\tref={ref}\n\t\t\tsideOffset={sideOffset}\n\t\t\tclassName={overlayPanelClass(cn(\"min-w-40\", className))}\n\t\t\t{...props}\n\t\t/>\n\t</MenubarPrimitive.Portal>\n));\nMenuBarContent.displayName = MenubarPrimitive.Content.displayName;\n\nexport interface MenuBarItemProps\n\textends Omit<RadixMenubarItemProps, \"disabled\" | \"onSelect\" | \"textValue\" | \"asChild\"> {\n\t/**\n\t * Disable the menubar item.\n\t * @default false\n\t */\n\tdisabled?: RadixMenubarItemProps[\"disabled\"];\n\t/**\n\t * Event handler called when the menubar item is selected (via click or keyboard).\n\t */\n\tonSelect?: RadixMenubarItemProps[\"onSelect\"];\n\t/**\n\t * Optional text used for typeahead navigation. By default typeahead uses item text content.\n\t */\n\ttextValue?: RadixMenubarItemProps[\"textValue\"];\n\t/**\n\t * Change the default rendered div element to the child element, merging props and behavior.\n\t * Item forwards ref to HTMLDivElement and inherits native div attributes.\n\t * @default false\n\t */\n\tasChild?: RadixMenubarItemProps[\"asChild\"];\n}\n\nexport const MenuBarItem = React.forwardRef<\n\tReact.ElementRef<typeof MenubarPrimitive.Item>,\n\tMenuBarItemProps\n>(({ className, ...props }, ref) => (\n\t<MenubarPrimitive.Item\n\t\tref={ref}\n\t\tclassName={overlayItemClass(cn(\"relative outline-hidden focus:bg-basalt-accent\", className))}\n\t\t{...props}\n\t/>\n));\nMenuBarItem.displayName = MenubarPrimitive.Item.displayName;\n\nexport interface MenuBarRootProps extends MenuBarProps {}\n\nexport function MenuBarRoot({ className, ...props }: MenuBarRootProps) {\n\treturn (\n\t\t<MenubarPrimitive.Root\n\t\t\tclassName={cn(\n\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\t\"flex h-9 items-center gap-0.5 rounded-basalt-md border border-basalt-border bg-basalt-popover px-1\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n"],"mappings":";;;;;;;;AAgDA,SAAgBE,EAAQ,GAAqB;CAC5C,OAAO,kBAACC,GAAD,EAAa,GAAIC,EAAQ,CAAA;AACjC;AASA,SAAgBC,EAAY,GAAyB;CACpD,OAAO,kBAACJ,EAAiB,MAAlB,EAAuB,GAAIG,EAAQ,CAAA;AAC3C;AAiBA,IAAaE,IAAiBN,EAAM,YAGjC,EAAE,cAAW,GAAGI,KAAS,MAC3B,kBAACH,EAAiB,SAAlB;CACM;CACL,WAAWM,EACVC,GACA,oJACAC,CACD;CACA,GAAIL;AACJ,CAAA,CACD;AACD,EAAe,cAAcH,EAAiB,QAAQ;AAiHtD,IAAaS,IAAiBV,EAAM,YAGjC,EAAE,cAAW,gBAAA,GAAuB,GAAGI,KAAS,MAClD,kBAACH,EAAiB,QAAlB;CAAyB,YAAYG,EAAM;CAC1C,UAAA,kBAACH,EAAiB,SAAlB;EACM;EACO;EACZ,WAAWU,EAAkBJ,EAAG,YAAYE,CAAS,CAAC;EACtD,GAAIL;CACJ,CAAA;AACuB,CAAA,CACzB;AACD,EAAe,cAAcH,EAAiB,QAAQ;AAyBtD,IAAaW,IAAcZ,EAAM,YAG9B,EAAE,cAAW,GAAGI,KAAS,MAC3B,kBAACH,EAAiB,MAAlB;CACM;CACL,WAAWY,EAAiBN,EAAG,kDAAkDE,CAAS,CAAC;CAC3F,GAAIL;AACJ,CAAA,CACD;AACD,EAAY,cAAcH,EAAiB,KAAK;AAIhD,SAAgBE,EAAY,EAAE,cAAW,GAAGC,KAA2B;CACtE,OACC,kBAACH,EAAiB,MAAlB;EACC,WAAWM,EACVC,GACA,sGACAC,CACD;EACA,GAAIL;CACJ,CAAA;AAEH"}
+{"version":3,"file":"menu-bar.js","names":["React","MenubarPrimitive","MenuBar","MenuBarRoot","props","MenuBarMenu","MenuBarTrigger","cn","BASALT_UI_CLASS","className","MenuBarContent","highlightRef","useHoverHighlight","ref","overlayPanelClass","MenuBarItem","overlayItemClass"],"sources":["../../src/components/menu-bar.tsx"],"sourcesContent":["import * as MenubarPrimitive from \"@radix-ui/react-menubar\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { useHoverHighlight } from \"../utils/use-hover-highlight\";\nimport { MENU_GAP, overlayItemClass, overlayPanelClass } from \"./overlay\";\n\ntype RadixMenubarProps = React.ComponentProps<typeof MenubarPrimitive.Root>;\ntype RadixMenubarMenuProps = React.ComponentProps<typeof MenubarPrimitive.Menu>;\ntype RadixMenubarTriggerProps = React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>;\ntype RadixMenubarContentProps = React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>;\ntype RadixMenubarItemProps = React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item>;\n\nexport interface MenuBarProps\n\textends Omit<\n\t\tRadixMenubarProps,\n\t\t\"value\" | \"defaultValue\" | \"onValueChange\" | \"loop\" | \"dir\" | \"asChild\"\n\t> {\n\t/**\n\t * Controlled value of the currently open menu.\n\t */\n\tvalue?: RadixMenubarProps[\"value\"];\n\t/**\n\t * Uncontrolled initial value of the open menu.\n\t * @default \"\"\n\t */\n\tdefaultValue?: RadixMenubarProps[\"defaultValue\"];\n\t/**\n\t * Callback invoked when the open menu value changes.\n\t */\n\tonValueChange?: RadixMenubarProps[\"onValueChange\"];\n\t/**\n\t * Whether keyboard navigation loops around when reaching ends.\n\t * @default true\n\t */\n\tloop?: RadixMenubarProps[\"loop\"];\n\t/**\n\t * Reading direction of the menubar.\n\t * @default \"ltr\"\n\t */\n\tdir?: RadixMenubarProps[\"dir\"];\n\t/**\n\t * Change the default rendered div element to the child element, merging props and behavior.\n\t * MenuBar forwards ref to HTMLDivElement and inherits native div attributes.\n\t * @default false\n\t */\n\tasChild?: RadixMenubarProps[\"asChild\"];\n}\n\nexport function MenuBar(props: MenuBarProps) {\n\treturn <MenuBarRoot {...props} />;\n}\n\nexport interface MenuBarMenuProps extends Omit<RadixMenubarMenuProps, \"value\"> {\n\t/**\n\t * Unique identifier value for this menu within the menubar.\n\t */\n\tvalue?: RadixMenubarMenuProps[\"value\"];\n}\n\nexport function MenuBarMenu(props: MenuBarMenuProps) {\n\treturn <MenubarPrimitive.Menu {...props} />;\n}\n\nexport interface MenuBarTriggerProps\n\textends Omit<RadixMenubarTriggerProps, \"disabled\" | \"asChild\"> {\n\t/**\n\t * Disable the menubar trigger button.\n\t * @default false\n\t */\n\tdisabled?: RadixMenubarTriggerProps[\"disabled\"];\n\t/**\n\t * Change the default rendered button element to the child element, merging props and behavior.\n\t * Trigger forwards ref to HTMLButtonElement and inherits native button attributes.\n\t * @default false\n\t */\n\tasChild?: RadixMenubarTriggerProps[\"asChild\"];\n}\n\nexport const MenuBarTrigger = React.forwardRef<\n\tReact.ElementRef<typeof MenubarPrimitive.Trigger>,\n\tMenuBarTriggerProps\n>(({ className, ...props }, ref) => (\n\t<MenubarPrimitive.Trigger\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\tBASALT_UI_CLASS,\n\t\t\t\"inline-flex min-h-basalt-control items-center rounded-basalt-sm px-basalt-space-lg text-basalt-base font-medium outline-hidden hover:bg-basalt-hover data-[state=open]:bg-basalt-selected\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nMenuBarTrigger.displayName = MenubarPrimitive.Trigger.displayName;\n\nexport interface MenuBarContentProps\n\textends Omit<\n\t\tRadixMenubarContentProps,\n\t\t| \"loop\"\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| \"asChild\"\n\t\t| \"onCloseAutoFocus\"\n\t\t| \"onEscapeKeyDown\"\n\t\t| \"onPointerDownOutside\"\n\t\t| \"onFocusOutside\"\n\t\t| \"onInteractOutside\"\n\t> {\n\t/**\n\t * Whether keyboard navigation loops around when reaching the start or end item.\n\t * @default false\n\t */\n\tloop?: RadixMenubarContentProps[\"loop\"];\n\t/**\n\t * Preferred placement side relative to the menu trigger.\n\t * @default \"bottom\"\n\t */\n\tside?: RadixMenubarContentProps[\"side\"];\n\t/**\n\t * Distance in pixels between trigger and floating content panel.\n\t * @default 4\n\t */\n\tsideOffset?: RadixMenubarContentProps[\"sideOffset\"];\n\t/**\n\t * Preferred alignment along the side axis.\n\t * @default \"start\"\n\t */\n\talign?: RadixMenubarContentProps[\"align\"];\n\t/**\n\t * Offset in pixels from the start or end alignment position.\n\t * @default 0\n\t */\n\talignOffset?: RadixMenubarContentProps[\"alignOffset\"];\n\t/**\n\t * Whether to reposition content to avoid viewport boundary collisions.\n\t * @default true\n\t */\n\tavoidCollisions?: RadixMenubarContentProps[\"avoidCollisions\"];\n\t/**\n\t * Element or elements bounding boundary collision calculations.\n\t * @default []\n\t */\n\tcollisionBoundary?: RadixMenubarContentProps[\"collisionBoundary\"];\n\t/**\n\t * Virtual padding from collision boundaries in pixels.\n\t * @default 0\n\t */\n\tcollisionPadding?: RadixMenubarContentProps[\"collisionPadding\"];\n\t/**\n\t * Padding in pixels between popper arrow and floating panel edge.\n\t * @default 0\n\t */\n\tarrowPadding?: RadixMenubarContentProps[\"arrowPadding\"];\n\t/**\n\t * Sticky positioning behavior along the align axis when overflowing.\n\t * @default \"partial\"\n\t */\n\tsticky?: RadixMenubarContentProps[\"sticky\"];\n\t/**\n\t * Whether to hide content completely when trigger is fully occluded.\n\t * @default false\n\t */\n\thideWhenDetached?: RadixMenubarContentProps[\"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 * Change the default rendered div element to the child element, merging props and behavior.\n\t * Content forwards ref to HTMLDivElement and inherits native div attributes.\n\t * @default false\n\t */\n\tasChild?: RadixMenubarContentProps[\"asChild\"];\n\t/**\n\t * Callback fired when auto-focusing on close. Can be prevented.\n\t */\n\tonCloseAutoFocus?: RadixMenubarContentProps[\"onCloseAutoFocus\"];\n\t/**\n\t * Callback fired when the Escape key is down on the dismissable layer. Can be prevented.\n\t */\n\tonEscapeKeyDown?: RadixMenubarContentProps[\"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?: RadixMenubarContentProps[\"onPointerDownOutside\"];\n\t/**\n\t * Callback fired when focus moves outside the bounds of the dismissable layer. Can be prevented.\n\t */\n\tonFocusOutside?: RadixMenubarContentProps[\"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?: RadixMenubarContentProps[\"onInteractOutside\"];\n}\n\nexport const MenuBarContent = React.forwardRef<\n\tReact.ElementRef<typeof MenubarPrimitive.Content>,\n\tMenuBarContentProps\n>(({ className, sideOffset = MENU_GAP, ...props }, ref) => {\n\tconst highlightRef = useHoverHighlight(ref);\n\treturn (\n\t\t<MenubarPrimitive.Portal forceMount={props.forceMount}>\n\t\t\t<MenubarPrimitive.Content\n\t\t\t\tref={highlightRef}\n\t\t\t\tsideOffset={sideOffset}\n\t\t\t\tclassName={overlayPanelClass(cn(\"basalt-hover-list min-w-basalt-40\", className))}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</MenubarPrimitive.Portal>\n\t);\n});\nMenuBarContent.displayName = MenubarPrimitive.Content.displayName;\n\nexport interface MenuBarItemProps\n\textends Omit<RadixMenubarItemProps, \"disabled\" | \"onSelect\" | \"textValue\" | \"asChild\"> {\n\t/**\n\t * Disable the menubar item.\n\t * @default false\n\t */\n\tdisabled?: RadixMenubarItemProps[\"disabled\"];\n\t/**\n\t * Event handler called when the menubar item is selected (via click or keyboard).\n\t */\n\tonSelect?: RadixMenubarItemProps[\"onSelect\"];\n\t/**\n\t * Optional text used for typeahead navigation. By default typeahead uses item text content.\n\t */\n\ttextValue?: RadixMenubarItemProps[\"textValue\"];\n\t/**\n\t * Change the default rendered div element to the child element, merging props and behavior.\n\t * Item forwards ref to HTMLDivElement and inherits native div attributes.\n\t * @default false\n\t */\n\tasChild?: RadixMenubarItemProps[\"asChild\"];\n}\n\nexport const MenuBarItem = React.forwardRef<\n\tReact.ElementRef<typeof MenubarPrimitive.Item>,\n\tMenuBarItemProps\n>(({ className, ...props }, ref) => (\n\t<MenubarPrimitive.Item\n\t\tdata-basalt-hover-item=\"\"\n\t\tref={ref}\n\t\tclassName={overlayItemClass(cn(\"relative outline-hidden\", className))}\n\t\t{...props}\n\t/>\n));\nMenuBarItem.displayName = MenubarPrimitive.Item.displayName;\n\nexport interface MenuBarRootProps extends MenuBarProps {}\n\nexport function MenuBarRoot({ className, ...props }: MenuBarRootProps) {\n\treturn (\n\t\t<MenubarPrimitive.Root\n\t\t\tclassName={cn(\n\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\t\"flex min-h-basalt-control items-center gap-basalt-space-xs rounded-basalt-md border border-basalt-border bg-basalt-popover px-basalt-space-sm py-basalt-space-xs\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n"],"mappings":";;;;;;;;;AAiDA,SAAgBE,EAAQ,GAAqB;CAC5C,OAAO,kBAACC,GAAD,EAAa,GAAIC,EAAQ,CAAA;AACjC;AASA,SAAgBC,EAAY,GAAyB;CACpD,OAAO,kBAACJ,EAAiB,MAAlB,EAAuB,GAAIG,EAAQ,CAAA;AAC3C;AAiBA,IAAaE,IAAiBN,EAAM,YAGjC,EAAE,cAAW,GAAGI,KAAS,MAC3B,kBAACH,EAAiB,SAAlB;CACM;CACL,WAAWM,EACVC,GACA,6LACAC,CACD;CACA,GAAIL;AACJ,CAAA,CACD;AACD,EAAe,cAAcH,EAAiB,QAAQ;AAiHtD,IAAaS,IAAiBV,EAAM,YAGjC,EAAE,cAAW,gBAAA,GAAuB,GAAGI,KAAS,MAAQ;CAC1D,IAAMO,IAAeC,EAAkBC,CAAG;CAC1C,OACC,kBAACZ,EAAiB,QAAlB;EAAyB,YAAYG,EAAM;EAC1C,UAAA,kBAACH,EAAiB,SAAlB;GACC,KAAKU;GACO;GACZ,WAAWG,EAAkBP,EAAG,qCAAqCE,CAAS,CAAC;GAC/E,GAAIL;EACJ,CAAA;CACuB,CAAA;AAE3B,CAAC;AACD,EAAe,cAAcH,EAAiB,QAAQ;AAyBtD,IAAac,IAAcf,EAAM,YAG9B,EAAE,cAAW,GAAGI,KAAS,MAC3B,kBAACH,EAAiB,MAAlB;CACC,0BAAuB;CAClB;CACL,WAAWe,EAAiBT,EAAG,2BAA2BE,CAAS,CAAC;CACpE,GAAIL;AACJ,CAAA,CACD;AACD,EAAY,cAAcH,EAAiB,KAAK;AAIhD,SAAgBE,EAAY,EAAE,cAAW,GAAGC,KAA2B;CACtE,OACC,kBAACH,EAAiB,MAAlB;EACC,WAAWM,EACVC,GACA,oKACAC,CACD;EACA,GAAIL;CACJ,CAAA;AAEH"}

package/dist/components/meter.d.ts

@@ -2,22 +2,22 @@ export interface MeterProps {
     /**
      * Percentage value representing current meter progress (0..100).
      *
-     * Note: Rendered bar width is clamped to [0, 100]%; callers should provide 0..100,
-     * while underlying Radix validates and manages accessible value attributes.
+     * Values are clamped to [0, 100] for both segments and accessibility.
+     * Non-finite readings are displayed as unavailable.
      * Does not support arbitrary native HTML props, ref forwarding, min/max, or change callbacks.
      * @default 0
      */
     value?: number;
     /**
-     * Text label displayed above the meter bar and used as accessible name fallback.
+     * Text label displayed above the segmented meter and used as accessible name fallback.
      */
     label?: string;
     /**
-     * Custom text overriding the displayed percentage value text next to the label.
+     * Custom text overriding the value displayed beside the segments.
      */
     customValue?: string;
     /**
-     * Whether to hide the displayed value text next to the label.
+     * Whether to hide the value displayed beside the segments.
      * @default false
      */
     hideValue?: boolean;