@nocoo/basalt 2.0.0 → 2.0.3

package/dist/components/dock.js

@@ -0,0 +1,116 @@
+"use client";
+import { cn as e } from "../utils/cn.js";
+import { OVERLAY_LAYER as t, OVERLAY_MOTION as n } from "./overlay.js";
+import { dialogOverlayClass as r } from "./dialog.js";
+import { useEffect as i, useRef as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/dock.tsx
+var c = "button:not([disabled]), [href], input:not([disabled]):not([type=\"hidden\"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])", l = "[data-radix-popper-content-wrapper], [data-radix-select-viewport]";
+function u(e) {
+	return e ? [...e.querySelectorAll(c)].filter((e) => {
+		if (e.closest("[inert], [hidden]") || e.tabIndex < 0 || window.getComputedStyle(e).visibility === "hidden") return !1;
+		for (let t = e; t; t = t.parentElement) if (window.getComputedStyle(t).display === "none") return !1;
+		return !0;
+	}) : [];
+}
+function d({ className: t, children: n }) {
+	return /* @__PURE__ */ o("div", {
+		className: e("flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto px-3 py-3", t),
+		children: n
+	});
+}
+function f({ open: c, mode: d = "push", width: f = "clamp(300px, 32.5vw, 546px)", onDismiss: p, dismissLabel: m = "Dismiss", className: h, children: g, "aria-label": _ }) {
+	let v = d === "overlay", y = a(null), b = a(null), x = (e) => {
+		y.current = e;
+	}, S = a(!v && c), C = a(null);
+	i(() => {
+		if (c) {
+			if (S.current) return;
+			C.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+			let e = window.setTimeout(() => {
+				let e = y.current;
+				(u(e)[0] ?? e)?.focus(), S.current = !0;
+			}, 0);
+			return () => window.clearTimeout(e);
+		}
+		S.current &&= (C.current?.focus?.(), C.current = null, !1);
+	}, [c]), i(() => {
+		if (!v || !c) return;
+		let e = (e) => {
+			if (e.key === "Escape") {
+				if (e.defaultPrevented || !p) return;
+				e.preventDefault(), p();
+				return;
+			}
+			if (e.key !== "Tab") return;
+			let t = b.current;
+			if (!t) return;
+			let n = u(t);
+			if (n.length === 0) {
+				e.preventDefault(), y.current?.focus();
+				return;
+			}
+			let r = n[0], i = n[n.length - 1], a = document.activeElement;
+			if (a instanceof Element) {
+				let e = a.closest("[role='dialog'], [role='alertdialog']");
+				if (e && e !== y.current && !t.contains(e) || a.closest(l)) return;
+			}
+			if (!(a instanceof Node) || !t.contains(a) || !e.shiftKey && a === i) {
+				e.preventDefault(), r?.focus();
+				return;
+			}
+			e.shiftKey && a === r && (e.preventDefault(), i?.focus());
+		};
+		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
+	}, [
+		v,
+		c,
+		p
+	]);
+	let w = e("overflow-hidden bg-basalt-background transition-[width] duration-300 ease-in-out", v ? e("absolute top-0 right-0 h-full", t) : "sticky top-0 h-screen shrink-0", n, h), T = { width: c ? f : 0 }, E = /* @__PURE__ */ o("div", {
+		className: "flex h-full flex-col bg-basalt-card shadow-lg ring-1 ring-basalt-border/40",
+		style: { width: f },
+		children: g
+	});
+	return v ? /* @__PURE__ */ s("div", {
+		ref: b,
+		className: e("absolute inset-0", t, !c && "pointer-events-none"),
+		children: [p ? /* @__PURE__ */ o("button", {
+			type: "button",
+			tabIndex: c ? 0 : -1,
+			"aria-label": m,
+			"aria-hidden": !c,
+			"data-state": c ? "open" : "closed",
+			className: e(r("absolute"), !c && "opacity-0"),
+			onClick: c ? p : void 0
+		}) : /* @__PURE__ */ o("div", {
+			"aria-hidden": !0,
+			"data-state": c ? "open" : "closed",
+			className: e(r("absolute"), !c && "opacity-0")
+		}), /* @__PURE__ */ o("div", {
+			ref: x,
+			role: "dialog",
+			"aria-modal": c ? !0 : void 0,
+			"aria-label": _,
+			className: w,
+			style: T,
+			"aria-hidden": !c,
+			inert: !c || void 0,
+			tabIndex: c ? -1 : void 0,
+			children: E
+		})]
+	}) : /* @__PURE__ */ o("aside", {
+		ref: x,
+		className: w,
+		style: T,
+		"aria-label": _,
+		"aria-hidden": !c,
+		inert: !c || void 0,
+		tabIndex: c ? -1 : void 0,
+		children: E
+	});
+}
+//#endregion
+export { f as Dock, d as DockBody };
+
+//# sourceMappingURL=dock.js.map

package/dist/components/dock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dock.js","names":[],"sources":["../../src/components/dock.tsx"],"sourcesContent":["import { type ReactNode, useEffect, useRef } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { dialogOverlayClass } from \"./dialog\";\nimport { OVERLAY_LAYER, OVERLAY_MOTION } from \"./overlay\";\n\nconst FOCUSABLE =\n\t'button:not([disabled]), [href], input:not([disabled]):not([type=\"hidden\"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\nconst PORTAL_FOCUS = \"[data-radix-popper-content-wrapper], [data-radix-select-viewport]\";\n\nfunction tabbables(root: HTMLElement | null) {\n\tif (!root) {\n\t\treturn [];\n\t}\n\treturn [...root.querySelectorAll<HTMLElement>(FOCUSABLE)].filter((node) => {\n\t\tif (node.closest(\"[inert], [hidden]\")) {\n\t\t\treturn false;\n\t\t}\n\t\tif (node.tabIndex < 0) {\n\t\t\treturn false;\n\t\t}\n\t\tif (window.getComputedStyle(node).visibility === \"hidden\") {\n\t\t\treturn false;\n\t\t}\n\t\tfor (let current: HTMLElement | null = node; current; current = current.parentElement) {\n\t\t\tif (window.getComputedStyle(current).display === \"none\") {\n\t\t\t\treturn false;\n\t\t\t}\n\t\t}\n\t\treturn true;\n\t});\n}\n\nexport type DockMode = \"overlay\" | \"push\";\n\nexport interface DockProps {\n\t/**\n\t * Whether the dock occupies its width.\n\t */\n\topen: boolean;\n\t/**\n\t * `push` shrinks the main column. `overlay` covers it with a Dialog scrim.\n\t * @default \"push\"\n\t */\n\tmode?: DockMode;\n\t/**\n\t * Width when open.\n\t * @default \"clamp(300px, 32.5vw, 546px)\"\n\t */\n\twidth?: string;\n\t/**\n\t * Overlay scrim click. Ignored in push mode.\n\t */\n\tonDismiss?: () => void;\n\t/**\n\t * Overlay scrim accessible name.\n\t * @default \"Dismiss\"\n\t */\n\tdismissLabel?: string;\n\t/**\n\t * Accessible name.\n\t */\n\t\"aria-label\": string;\n\tclassName?: string;\n\tchildren: ReactNode;\n}\n\nexport interface DockBodyProps {\n\tclassName?: string;\n\tchildren: ReactNode;\n}\n\nexport function DockBody({ className, children }: DockBodyProps) {\n\treturn (\n\t\t<div className={cn(\"flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto px-3 py-3\", className)}>\n\t\t\t{children}\n\t\t</div>\n\t);\n}\n\nexport function Dock({\n\topen,\n\tmode = \"push\",\n\twidth = \"clamp(300px, 32.5vw, 546px)\",\n\tonDismiss,\n\tdismissLabel = \"Dismiss\",\n\tclassName,\n\tchildren,\n\t\"aria-label\": ariaLabel,\n}: DockProps) {\n\tconst overlay = mode === \"overlay\";\n\tconst panelRef = useRef<HTMLElement | null>(null);\n\tconst overlayRootRef = useRef<HTMLDivElement>(null);\n\tconst setPanel = (node: HTMLElement | null) => {\n\t\tpanelRef.current = node;\n\t};\n\tconst wasOpen = useRef(!overlay && open);\n\tconst previousFocus = useRef<HTMLElement | null>(null);\n\n\tuseEffect(() => {\n\t\tif (open) {\n\t\t\tif (wasOpen.current) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tpreviousFocus.current =\n\t\t\t\tdocument.activeElement instanceof HTMLElement ? document.activeElement : null;\n\t\t\tconst timer = window.setTimeout(() => {\n\t\t\t\tconst root = panelRef.current;\n\t\t\t\tconst nodes = tabbables(root);\n\t\t\t\t(nodes[0] ?? root)?.focus();\n\t\t\t\twasOpen.current = true;\n\t\t\t}, 0);\n\t\t\treturn () => window.clearTimeout(timer);\n\t\t}\n\t\tif (wasOpen.current) {\n\t\t\tpreviousFocus.current?.focus?.();\n\t\t\tpreviousFocus.current = null;\n\t\t\twasOpen.current = false;\n\t\t}\n\t}, [open]);\n\n\tuseEffect(() => {\n\t\tif (!overlay || !open) {\n\t\t\treturn;\n\t\t}\n\t\tconst onKeyDown = (event: KeyboardEvent) => {\n\t\t\tif (event.key === \"Escape\") {\n\t\t\t\tif (event.defaultPrevented || !onDismiss) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tevent.preventDefault();\n\t\t\t\tonDismiss();\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (event.key !== \"Tab\") {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst root = overlayRootRef.current;\n\t\t\tif (!root) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst nodes = tabbables(root);\n\t\t\tif (nodes.length === 0) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tpanelRef.current?.focus();\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst first = nodes[0];\n\t\t\tconst last = nodes[nodes.length - 1];\n\t\t\tconst active = document.activeElement;\n\t\t\tif (active instanceof Element) {\n\t\t\t\tconst nestedModal = active.closest(\"[role='dialog'], [role='alertdialog']\");\n\t\t\t\tif (nestedModal && nestedModal !== panelRef.current && !root.contains(nestedModal)) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tif (active.closest(PORTAL_FOCUS)) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t}\n\t\t\tif (\n\t\t\t\t!(active instanceof Node) ||\n\t\t\t\t!root.contains(active) ||\n\t\t\t\t(!event.shiftKey && active === last)\n\t\t\t) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tfirst?.focus();\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (event.shiftKey && active === first) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tlast?.focus();\n\t\t\t}\n\t\t};\n\t\twindow.addEventListener(\"keydown\", onKeyDown);\n\t\treturn () => window.removeEventListener(\"keydown\", onKeyDown);\n\t}, [overlay, open, onDismiss]);\n\tconst panelClass = cn(\n\t\t\"overflow-hidden bg-basalt-background transition-[width] duration-300 ease-in-out\",\n\t\toverlay ? cn(\"absolute top-0 right-0 h-full\", OVERLAY_LAYER) : \"sticky top-0 h-screen shrink-0\",\n\t\tOVERLAY_MOTION,\n\t\tclassName,\n\t);\n\tconst panelStyle = { width: open ? width : 0 };\n\tconst inner = (\n\t\t<div\n\t\t\tclassName=\"flex h-full flex-col bg-basalt-card shadow-lg ring-1 ring-basalt-border/40\"\n\t\t\tstyle={{ width }}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t);\n\n\tif (!overlay) {\n\t\treturn (\n\t\t\t<aside\n\t\t\t\tref={setPanel}\n\t\t\t\tclassName={panelClass}\n\t\t\t\tstyle={panelStyle}\n\t\t\t\taria-label={ariaLabel}\n\t\t\t\taria-hidden={!open}\n\t\t\t\tinert={!open || undefined}\n\t\t\t\ttabIndex={open ? -1 : undefined}\n\t\t\t>\n\t\t\t\t{inner}\n\t\t\t</aside>\n\t\t);\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tref={overlayRootRef}\n\t\t\tclassName={cn(\"absolute inset-0\", OVERLAY_LAYER, !open && \"pointer-events-none\")}\n\t\t>\n\t\t\t{onDismiss ? (\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\ttabIndex={open ? 0 : -1}\n\t\t\t\t\taria-label={dismissLabel}\n\t\t\t\t\taria-hidden={!open}\n\t\t\t\t\tdata-state={open ? \"open\" : \"closed\"}\n\t\t\t\t\tclassName={cn(dialogOverlayClass(\"absolute\"), !open && \"opacity-0\")}\n\t\t\t\t\tonClick={open ? onDismiss : undefined}\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<div\n\t\t\t\t\taria-hidden\n\t\t\t\t\tdata-state={open ? \"open\" : \"closed\"}\n\t\t\t\t\tclassName={cn(dialogOverlayClass(\"absolute\"), !open && \"opacity-0\")}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t<div\n\t\t\t\tref={setPanel}\n\t\t\t\trole=\"dialog\"\n\t\t\t\taria-modal={open ? true : undefined}\n\t\t\t\taria-label={ariaLabel}\n\t\t\t\tclassName={panelClass}\n\t\t\t\tstyle={panelStyle}\n\t\t\t\taria-hidden={!open}\n\t\t\t\tinert={!open || undefined}\n\t\t\t\ttabIndex={open ? -1 : undefined}\n\t\t\t>\n\t\t\t\t{inner}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"],"mappings":"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"}

package/dist/components/fab.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+export type FabPlacement = "absolute" | "fixed";
+export interface FabProps {
+    /**
+     * When true, the launcher hides so a dock can take the corner.
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * Viewport pin versus containing frame.
+     * @default "fixed"
+     */
+    placement?: FabPlacement;
+    /**
+     * Accessible name.
+     */
+    "aria-label": string;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    children?: React.ReactNode;
+    className?: string;
+    disabled?: boolean;
+}
+export declare const Fab: React.ForwardRefExoticComponent<FabProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/fab.js

@@ -0,0 +1,25 @@
+"use client";
+import { cn as e } from "../utils/cn.js";
+import { OVERLAY_LAYER as t, OVERLAY_MOTION as n } from "./overlay.js";
+import { Button as r } from "./button.js";
+import * as i from "react";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/components/fab.tsx
+var o = i.forwardRef(({ open: i = !1, placement: o = "fixed", className: s, children: c, onClick: l, "aria-label": u, disabled: d }, f) => /* @__PURE__ */ a(r, {
+	ref: f,
+	size: "icon",
+	"aria-label": u,
+	"aria-expanded": i,
+	"aria-hidden": i || void 0,
+	tabIndex: i ? -1 : 0,
+	inert: i || void 0,
+	disabled: d,
+	onClick: i ? void 0 : l,
+	className: e(o === "absolute" ? "absolute" : "fixed", "right-4 bottom-4 h-16 w-16 rounded-full shadow-lg", t, "transition-[transform,opacity] duration-300 ease-in-out", n, i ? "pointer-events-none scale-75 opacity-0" : "hover:scale-[1.03] active:scale-[0.98]", s),
+	children: c
+}));
+o.displayName = "Fab";
+//#endregion
+export { o as Fab };
+
+//# sourceMappingURL=fab.js.map

package/dist/components/fab.js.map

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

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

@@ -11,13 +11,25 @@ export type LayerCardProps = Omit<HTMLAttributes<HTMLDivElement>, "className"> &
      * Additional classes for the card root.
      */
     className?: string;
+    /**
+     * Draw a hairline ring. Default grouping is luminance only.
+     * @default false
+     */
+    outlined?: boolean;
     /**
      * Inner spacing for unstructured card content.
-     * @default "none"
+     * @default "md"
      */
     padding?: LayerCardPadding;
 };
 export type LayerCardSectionProps = HTMLAttributes<HTMLDivElement>;
+export type LayerCardWellProps = LayerCardSectionProps & {
+    /**
+     * Draw a hairline ring on a nested well.
+     * @default false
+     */
+    outlined?: boolean;
+};
 export type LayerCardLoadingProps = Omit<HTMLAttributes<HTMLDivElement>, "aria-label"> & {
     /**
      * Accessible label announced for the loading state.
@@ -40,10 +52,11 @@ export type LayerCardEmptyProps = Omit<HTMLAttributes<HTMLDivElement>, "title">
      */
     icon?: ReactNode;
 };
-declare function LayerCardSecondary({ className, ...props }: LayerCardSectionProps): import("react").JSX.Element;
-declare function LayerCardPrimary({ className, ...props }: LayerCardSectionProps): import("react").JSX.Element;
 declare function LayerCardHeader({ className, ...props }: LayerCardSectionProps): import("react").JSX.Element;
 declare function LayerCardBody({ className, ...props }: LayerCardSectionProps): import("react").JSX.Element;
+declare function LayerCardWell({ className, outlined, ...props }: LayerCardWellProps): import("react").JSX.Element;
+declare function LayerCardPrimary(props: LayerCardWellProps): import("react").JSX.Element;
+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;
@@ -52,9 +65,14 @@ export declare const LayerCard: import("react").ForwardRefExoticComponent<Omit<H
      * Additional classes for the card root.
      */
     className?: string;
+    /**
+     * Draw a hairline ring. Default grouping is luminance only.
+     * @default false
+     */
+    outlined?: boolean;
     /**
      * Inner spacing for unstructured card content.
-     * @default "none"
+     * @default "md"
      */
     padding?: LayerCardPadding;
 } & import("react").RefAttributes<HTMLDivElement>> & {
@@ -62,6 +80,7 @@ export declare const LayerCard: import("react").ForwardRefExoticComponent<Omit<H
     Secondary: typeof LayerCardSecondary;
     Header: typeof LayerCardHeader;
     Body: typeof LayerCardBody;
+    Well: typeof LayerCardWell;
     Footer: typeof LayerCardFooter;
     Loading: typeof LayerCardLoading;
     Empty: typeof LayerCardEmpty;

package/dist/components/layer-card.js

@@ -2,85 +2,108 @@
 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, forwardRef as a, isValidElement as o } from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
+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";
 //#region src/components/layer-card.tsx
-var l = "overflow-hidden rounded-basalt-lg bg-basalt-bright shadow-xs ring-1 ring-basalt-border", u = "flex w-full flex-col overflow-hidden rounded-basalt-lg bg-basalt-muted text-base ring-1 ring-basalt-border", d = "-my-2 flex items-center gap-2 bg-basalt-muted p-4 text-base font-medium text-basalt-muted-foreground", f = "relative flex flex-col gap-2 overflow-hidden rounded-basalt-lg bg-basalt-bright p-4 pr-3 text-basalt-foreground ring-1 ring-basalt-border", p = {
+var u = "overflow-hidden rounded-basalt-lg text-basalt-foreground", d = {
 	none: "",
 	sm: "p-3",
 	md: "p-4",
 	lg: "p-6"
 };
-function m(e) {
-	return r.toArray(e).some((e) => o(e) ? e.type === _ || e.type === g || e.type === i && m(e.props.children) : !1);
+function f(e) {
+	return s(e);
 }
-var h = a(({ className: t, children: n, padding: r = "none", ...i }, a) => /* @__PURE__ */ s("div", {
-	ref: a,
-	className: e(m(n) ? u : l, p[r], t),
-	...i,
-	children: n
-}));
-h.displayName = "LayerCard";
-function g({ className: t, ...n }) {
-	return /* @__PURE__ */ s("div", {
-		className: e(d, t),
-		...n
-	});
+function p(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);
 }
-g.displayName = "LayerCard.Secondary";
+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) {
+			let n = t;
+			return a(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", {
+		ref: o,
+		"data-basalt-surface": "",
+		className: e(u, s ? "flex w-full flex-col" : d[i], r && "ring-1 ring-basalt-border/40", t),
+		...a,
+		children: h(n, f)
+	});
+});
+g.displayName = "LayerCard";
 function _({ className: t, ...n }) {
-	return /* @__PURE__ */ s("div", {
-		className: e(f, t),
+	return /* @__PURE__ */ c("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.Primary";
+_.displayName = "LayerCard.Header";
 function v({ className: t, ...n }) {
-	return /* @__PURE__ */ s("div", {
-		className: e("flex min-w-0 items-start justify-between gap-4 border-b border-basalt-border px-4 py-3", t),
+	return /* @__PURE__ */ c("div", {
+		className: e("min-w-0 p-4", t),
 		...n
 	});
 }
-v.displayName = "LayerCard.Header";
-function y({ className: t, ...n }) {
-	return /* @__PURE__ */ s("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", {
+		"data-basalt-surface": "",
+		className: e("min-w-0 p-4", n && "ring-1 ring-basalt-border/40", t),
+		...r
 	});
 }
-y.displayName = "LayerCard.Body";
-function b({ className: t, ...n }) {
-	return /* @__PURE__ */ s("div", {
+y.displayName = "LayerCard.Well";
+function b(e) {
+	return /* @__PURE__ */ c(y, { ...e });
+}
+b.displayName = "LayerCard.Primary";
+function x(e) {
+	return /* @__PURE__ */ c(_, { ...e });
+}
+x.displayName = "LayerCard.Secondary";
+function S({ className: t, ...n }) {
+	return /* @__PURE__ */ c("div", {
 		className: e("flex flex-wrap items-center justify-end gap-2 border-t border-basalt-border px-4 py-3", t),
 		...n
 	});
 }
-b.displayName = "LayerCard.Footer";
-function x({ label: t = "Loading", className: r, ...i }) {
-	return /* @__PURE__ */ c("div", {
+S.displayName = "LayerCard.Footer";
+function C({ label: t = "Loading", className: r, ...i }) {
+	return /* @__PURE__ */ l("div", {
 		role: "status",
 		"aria-label": t,
 		className: e("space-y-3 p-4", r),
 		...i,
 		children: [
-			/* @__PURE__ */ s(n, {
+			/* @__PURE__ */ c(n, {
 				minWidth: 100,
 				maxWidth: 100
 			}),
-			/* @__PURE__ */ s(n, {
+			/* @__PURE__ */ c(n, {
 				minWidth: 72,
 				maxWidth: 72
 			}),
-			/* @__PURE__ */ s(n, {
+			/* @__PURE__ */ c(n, {
 				minWidth: 88,
 				maxWidth: 88
 			})
 		]
 	});
 }
-x.displayName = "LayerCard.Loading";
-function S({ title: n = "No content", description: r, icon: i, className: a, ...o }) {
-	return /* @__PURE__ */ s(t, {
+C.displayName = "LayerCard.Loading";
+function w({ title: n = "No content", description: r, icon: i, className: a, ...o }) {
+	return /* @__PURE__ */ c(t, {
 		title: n,
 		description: r,
 		icon: i,
@@ -88,17 +111,27 @@ function S({ title: n = "No content", description: r, icon: i, className: a, ...
 		...o
 	});
 }
-S.displayName = "LayerCard.Empty";
-var C = Object.assign(h, {
-	Primary: _,
-	Secondary: g,
-	Header: v,
-	Body: y,
-	Footer: b,
-	Loading: x,
-	Empty: S
+w.displayName = "LayerCard.Empty";
+var T = /* @__PURE__ */ new Set([
+	_,
+	v,
+	y,
+	S,
+	C,
+	w,
+	b,
+	x
+]), E = Object.assign(g, {
+	Primary: b,
+	Secondary: x,
+	Header: _,
+	Body: v,
+	Well: y,
+	Footer: S,
+	Loading: C,
+	Empty: w
 });
 //#endregion
-export { C as LayerCard };
+export { E 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\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 SURFACE_CLASSES =\n\t\"overflow-hidden rounded-basalt-lg bg-basalt-bright shadow-xs ring-1 ring-basalt-border\";\nconst LAYERED_ROOT_CLASSES =\n\t\"flex w-full flex-col overflow-hidden rounded-basalt-lg bg-basalt-muted text-base ring-1 ring-basalt-border\";\nconst SECONDARY_CLASSES =\n\t\"-my-2 flex items-center gap-2 bg-basalt-muted p-4 text-base font-medium text-basalt-muted-foreground\";\nconst PRIMARY_CLASSES =\n\t\"relative flex flex-col gap-2 overflow-hidden rounded-basalt-lg bg-basalt-bright p-4 pr-3 text-basalt-foreground ring-1 ring-basalt-border\";\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 * Inner spacing for unstructured card content.\n\t * @default \"none\"\n\t */\n\tpadding?: LayerCardPadding;\n};\nexport type LayerCardSectionProps = HTMLAttributes<HTMLDivElement>;\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 hasLayerCardSections(children: ReactNode): boolean {\n\treturn Children.toArray(children).some((child): boolean => {\n\t\tif (!isValidElement(child)) {\n\t\t\treturn false;\n\t\t}\n\t\tif (child.type === LayerCardPrimary || child.type === LayerCardSecondary) {\n\t\t\treturn true;\n\t\t}\n\t\tif (child.type === Fragment) {\n\t\t\tconst fragmentChild = child as ReactElement<{ children?: ReactNode }>;\n\t\t\treturn hasLayerCardSections(fragmentChild.props.children);\n\t\t}\n\t\treturn false;\n\t});\n}\n\nconst LayerCardRoot = forwardRef<HTMLDivElement, LayerCardProps>(\n\t({ className, children, padding = \"none\", ...props }, ref) => (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\thasLayerCardSections(children) ? LAYERED_ROOT_CLASSES : SURFACE_CLASSES,\n\t\t\t\tPADDING_CLASSES[padding],\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t),\n);\nLayerCardRoot.displayName = \"LayerCard\";\n\nfunction LayerCardSecondary({ className, ...props }: LayerCardSectionProps) {\n\treturn <div className={cn(SECONDARY_CLASSES, className)} {...props} />;\n}\nLayerCardSecondary.displayName = \"LayerCard.Secondary\";\n\nfunction LayerCardPrimary({ className, ...props }: LayerCardSectionProps) {\n\treturn <div className={cn(PRIMARY_CLASSES, className)} {...props} />;\n}\nLayerCardPrimary.displayName = \"LayerCard.Primary\";\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 border-b 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}\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 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\nexport const LayerCard = Object.assign(LayerCardRoot, {\n\tPrimary: LayerCardPrimary,\n\tSecondary: LayerCardSecondary,\n\tHeader: LayerCardHeader,\n\tBody: LayerCardBody,\n\tFooter: LayerCardFooter,\n\tLoading: LayerCardLoading,\n\tEmpty: LayerCardEmpty,\n});\n"],"mappings":";;;;;;;AAaA,IAAM,IACL,0FACK,IACL,8GACK,IACL,wGACK,IACL,6IACK,IAAkB;CACvB,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;AACL;AAuCA,SAAS,EAAqB,GAA8B;CAC3D,OAAO,EAAS,QAAQ,CAAQ,CAAC,CAAC,MAAM,MAClC,EAAe,CAAK,IAGrB,EAAM,SAAS,KAAoB,EAAM,SAAS,KAGlD,EAAM,SAAS,KAEX,EAAqB,EAAc,MAAM,QAAQ,IAPjD,EAUR;AACF;AAEA,IAAM,IAAgB,GACpB,EAAE,cAAW,aAAU,aAAU,QAAQ,GAAG,KAAS,MACrD,kBAAC,OAAD;CACM;CACL,WAAW,EACV,EAAqB,CAAQ,IAAI,IAAuB,GACxD,EAAgB,IAChB,CACD;CACA,GAAI;CAEH;AACG,CAAA,CAEP;AACA,EAAc,cAAc;AAE5B,SAAS,EAAmB,EAAE,cAAW,GAAG,KAAgC;CAC3E,OAAO,kBAAC,OAAD;EAAK,WAAW,EAAG,GAAmB,CAAS;EAAG,GAAI;CAAQ,CAAA;AACtE;AACA,EAAmB,cAAc;AAEjC,SAAS,EAAiB,EAAE,cAAW,GAAG,KAAgC;CACzE,OAAO,kBAAC,OAAD;EAAK,WAAW,EAAG,GAAiB,CAAS;EAAG,GAAI;CAAQ,CAAA;AACpE;AACA,EAAiB,cAAc;AAE/B,SAAS,EAAgB,EAAE,cAAW,GAAG,KAAgC;CACxE,OACC,kBAAC,OAAD;EACC,WAAW,EACV,0FACA,CACD;EACA,GAAI;CACJ,CAAA;AAEH;AACA,EAAgB,cAAc;AAE9B,SAAS,EAAc,EAAE,cAAW,GAAG,KAAgC;CACtE,OAAO,kBAAC,OAAD;EAAK,WAAW,EAAG,eAAe,CAAS;EAAG,GAAI;CAAQ,CAAA;AAClE;AACA,EAAc,cAAc;AAE5B,SAAS,EAAgB,EAAE,cAAW,GAAG,KAAgC;CACxE,OACC,kBAAC,OAAD;EACC,WAAW,EACV,yFACA,CACD;EACA,GAAI;CACJ,CAAA;AAEH;AACA,EAAgB,cAAc;AAE9B,SAAS,EAAiB,EAAE,WAAQ,WAAW,cAAW,GAAG,KAAgC;CAC5F,OACC,kBAAC,OAAD;EAAK,MAAK;EAAS,cAAY;EAAO,WAAW,EAAG,iBAAiB,CAAS;EAAG,GAAI;EAArF,UAAA;GACC,kBAAC,GAAD;IAAc,UAAU;IAAK,UAAU;GAAM,CAAA;GAC7C,kBAAC,GAAD;IAAc,UAAU;IAAI,UAAU;GAAK,CAAA;GAC3C,kBAAC,GAAD;IAAc,UAAU;IAAI,UAAU;GAAK,CAAA;EACvC;;AAEP;AACA,EAAiB,cAAc;AAE/B,SAAS,EAAe,EACvB,WAAQ,cACR,gBACA,SACA,cACA,GAAG,KACoB;CACvB,OACC,kBAAC,GAAD;EACQ;EACM;EACP;EACN,WAAW,EAAG,OAAO,CAAS;EAC9B,GAAI;CACJ,CAAA;AAEH;AACA,EAAe,cAAc;AAE7B,IAAa,IAAY,OAAO,OAAO,GAAe;CACrD,SAAS;CACT,WAAW;CACX,QAAQ;CACR,MAAM;CACN,QAAQ;CACR,SAAS;CACT,OAAO;AACR,CAAC"}
+{"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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"}

package/dist/components/page-header.d.ts

@@ -9,11 +9,11 @@ export interface PageHeaderProps {
     title: React.ReactNode;
     /** Supporting text below the title. */
     description?: React.ReactNode;
-    /** A short label above the title. */
-    eyebrow?: React.ReactNode;
     /** Trail of parent pages. */
     breadcrumbs?: readonly PageHeaderBreadcrumb[];
-    /** Actions aligned beside the title on wide screens. */
+    /** Right-side title-row actions. Put the create button last. */
     actions?: React.ReactNode;
+    /** Own-row filters. Keep short filters in actions. */
+    filters?: React.ReactNode;
 }
-export declare function PageHeader({ actions, breadcrumbs, description, eyebrow, title }: PageHeaderProps): React.JSX.Element;
+export declare function PageHeader({ actions, breadcrumbs, description, filters, title }: PageHeaderProps): React.JSX.Element;

package/dist/components/page-header.js

@@ -3,38 +3,35 @@ import { Breadcrumbs as e } from "./breadcrumbs.js";
 import * as t from "react";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/components/page-header.tsx
-function i({ actions: i, breadcrumbs: a, description: o, eyebrow: s, title: c }) {
+function i({ actions: i, breadcrumbs: a, description: o, filters: s, title: c }) {
 	let l = t.useId();
 	return /* @__PURE__ */ r("header", {
 		"aria-labelledby": l,
-		className: "rounded-basalt-lg bg-basalt-bright p-5 shadow-xs ring-1 ring-basalt-border md:p-6",
-		children: [a && a.length > 0 ? /* @__PURE__ */ n(e, {
-			items: [...a],
-			className: "mb-3"
-		}) : null, /* @__PURE__ */ r("div", {
-			className: "flex flex-col gap-4 md:flex-row md:items-start md:justify-between",
-			children: [/* @__PURE__ */ r("div", {
-				className: "min-w-0 flex-1 space-y-2",
-				children: [
-					s ? /* @__PURE__ */ n("p", {
-						className: "text-xs font-medium text-basalt-muted-foreground",
-						children: s
-					}) : null,
-					/* @__PURE__ */ n("h1", {
+		className: "space-y-4",
+		children: [
+			a && a.length > 0 ? /* @__PURE__ */ n(e, { items: [...a] }) : null,
+			/* @__PURE__ */ r("div", {
+				className: "flex flex-col gap-4 md:flex-row md:items-start md:justify-between",
+				children: [/* @__PURE__ */ r("div", {
+					className: "min-w-0 flex-1 space-y-1",
+					children: [/* @__PURE__ */ n("h1", {
 						id: l,
 						className: "text-2xl font-semibold tracking-tight text-basalt-foreground",
 						children: c
-					}),
-					o ? /* @__PURE__ */ n("p", {
+					}), o ? /* @__PURE__ */ n("p", {
 						className: "text-sm text-basalt-muted-foreground",
 						children: o
-					}) : null
-				]
-			}), i ? /* @__PURE__ */ n("div", {
+					}) : null]
+				}), i ? /* @__PURE__ */ n("div", {
+					className: "flex flex-wrap items-center justify-end gap-2",
+					children: i
+				}) : null]
+			}),
+			s ? /* @__PURE__ */ n("div", {
 				className: "flex flex-wrap items-center gap-2",
-				children: i
-			}) : null]
-		})]
+				children: s
+			}) : null
+		]
 	});
 }
 //#endregion

package/dist/components/page-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"page-header.js","names":[],"sources":["../../src/components/page-header.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Breadcrumbs } from \"./breadcrumbs\";\n\nexport interface PageHeaderBreadcrumb {\n\thref?: string;\n\tlabel: React.ReactNode;\n\ticon?: React.ReactNode;\n}\n\nexport interface PageHeaderProps {\n\t/** The page title, rendered as the only heading. */\n\ttitle: React.ReactNode;\n\t/** Supporting text below the title. */\n\tdescription?: React.ReactNode;\n\t/** A short label above the title. */\n\teyebrow?: React.ReactNode;\n\t/** Trail of parent pages. */\n\tbreadcrumbs?: readonly PageHeaderBreadcrumb[];\n\t/** Actions aligned beside the title on wide screens. */\n\tactions?: React.ReactNode;\n}\n\nexport function PageHeader({ actions, breadcrumbs, description, eyebrow, title }: PageHeaderProps) {\n\tconst titleId = React.useId();\n\n\treturn (\n\t\t// biome-ignore lint/a11y/useAriaPropsSupportedByRole: the title heading names this header\n\t\t<header\n\t\t\taria-labelledby={titleId}\n\t\t\tclassName=\"rounded-basalt-lg bg-basalt-bright p-5 shadow-xs ring-1 ring-basalt-border md:p-6\"\n\t\t>\n\t\t\t{breadcrumbs && breadcrumbs.length > 0 ? (\n\t\t\t\t<Breadcrumbs items={[...breadcrumbs]} className=\"mb-3\" />\n\t\t\t) : null}\n\t\t\t<div className=\"flex flex-col gap-4 md:flex-row md:items-start md:justify-between\">\n\t\t\t\t<div className=\"min-w-0 flex-1 space-y-2\">\n\t\t\t\t\t{eyebrow ? (\n\t\t\t\t\t\t<p className=\"text-xs font-medium text-basalt-muted-foreground\">{eyebrow}</p>\n\t\t\t\t\t) : null}\n\t\t\t\t\t<h1 id={titleId} className=\"text-2xl font-semibold tracking-tight text-basalt-foreground\">\n\t\t\t\t\t\t{title}\n\t\t\t\t\t</h1>\n\t\t\t\t\t{description ? (\n\t\t\t\t\t\t<p className=\"text-sm text-basalt-muted-foreground\">{description}</p>\n\t\t\t\t\t) : null}\n\t\t\t\t</div>\n\t\t\t\t{actions ? <div className=\"flex flex-wrap items-center gap-2\">{actions}</div> : null}\n\t\t\t</div>\n\t\t</header>\n\t);\n}\n"],"mappings":";;;;;AAsBA,SAAgB,EAAW,EAAE,YAAS,gBAAa,gBAAa,YAAS,YAA0B;CAClG,IAAM,IAAU,EAAM,MAAM;CAE5B,OAEC,kBAAC,UAAD;EACC,mBAAiB;EACjB,WAAU;EAFX,UAAA,CAIE,KAAe,EAAY,SAAS,IACpC,kBAAC,GAAD;GAAa,OAAO,CAAC,GAAG,CAAW;GAAG,WAAU;EAAQ,CAAA,IACrD,MACJ,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACC,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,IACA,kBAAC,KAAD;MAAG,WAAU;MAAoD,UAAA;KAAW,CAAA,IACzE;KACJ,kBAAC,MAAD;MAAI,IAAI;MAAS,WAAU;MACzB,UAAA;KACE,CAAA;KACH,IACA,kBAAC,KAAD;MAAG,WAAU;MAAwC,UAAA;KAAe,CAAA,IACjE;IACA;GACJ,CAAA,GAAA,IAAU,kBAAC,OAAD;IAAK,WAAU;IAAqC,UAAA;GAAa,CAAA,IAAI,IAC5E;EACE,CAAA,CAAA;;AAEV"}
+{"version":3,"file":"page-header.js","names":[],"sources":["../../src/components/page-header.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Breadcrumbs } from \"./breadcrumbs\";\n\nexport interface PageHeaderBreadcrumb {\n\thref?: string;\n\tlabel: React.ReactNode;\n\ticon?: React.ReactNode;\n}\n\nexport interface PageHeaderProps {\n\t/** The page title, rendered as the only heading. */\n\ttitle: React.ReactNode;\n\t/** Supporting text below the title. */\n\tdescription?: React.ReactNode;\n\t/** Trail of parent pages. */\n\tbreadcrumbs?: readonly PageHeaderBreadcrumb[];\n\t/** Right-side title-row actions. Put the create button last. */\n\tactions?: React.ReactNode;\n\t/** Own-row filters. Keep short filters in actions. */\n\tfilters?: React.ReactNode;\n}\n\nexport function PageHeader({ actions, breadcrumbs, description, filters, title }: PageHeaderProps) {\n\tconst titleId = React.useId();\n\n\treturn (\n\t\t// biome-ignore lint/a11y/useAriaPropsSupportedByRole: the title heading names this header\n\t\t<header aria-labelledby={titleId} className=\"space-y-4\">\n\t\t\t{breadcrumbs && breadcrumbs.length > 0 ? <Breadcrumbs items={[...breadcrumbs]} /> : null}\n\t\t\t<div className=\"flex flex-col gap-4 md:flex-row md:items-start md:justify-between\">\n\t\t\t\t<div className=\"min-w-0 flex-1 space-y-1\">\n\t\t\t\t\t<h1 id={titleId} className=\"text-2xl font-semibold tracking-tight text-basalt-foreground\">\n\t\t\t\t\t\t{title}\n\t\t\t\t\t</h1>\n\t\t\t\t\t{description ? (\n\t\t\t\t\t\t<p className=\"text-sm text-basalt-muted-foreground\">{description}</p>\n\t\t\t\t\t) : null}\n\t\t\t\t</div>\n\t\t\t\t{actions ? (\n\t\t\t\t\t<div className=\"flex flex-wrap items-center justify-end gap-2\">{actions}</div>\n\t\t\t\t) : null}\n\t\t\t</div>\n\t\t\t{filters ? <div className=\"flex flex-wrap items-center gap-2\">{filters}</div> : null}\n\t\t</header>\n\t);\n}\n"],"mappings":";;;;;AAsBA,SAAgB,EAAW,EAAE,YAAS,gBAAa,gBAAa,YAAS,YAA0B;CAClG,IAAM,IAAU,EAAM,MAAM;CAE5B,OAEC,kBAAC,UAAD;EAAQ,mBAAiB;EAAS,WAAU;EAA5C,UAAA;GACE,KAAe,EAAY,SAAS,IAAI,kBAAC,GAAD,EAAa,OAAO,CAAC,GAAG,CAAW,EAAI,CAAA,IAAI;GACpF,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACC,kBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACC,kBAAC,MAAD;MAAI,IAAI;MAAS,WAAU;MACzB,UAAA;KACE,CAAA,GACH,IACA,kBAAC,KAAD;MAAG,WAAU;MAAwC,UAAA;KAAe,CAAA,IACjE,IACA;IACJ,CAAA,GAAA,IACA,kBAAC,OAAD;KAAK,WAAU;KAAiD,UAAA;IAAa,CAAA,IAC1E,IACA;;GACJ,IAAU,kBAAC,OAAD;IAAK,WAAU;IAAqC,UAAA;GAAa,CAAA,IAAI;EACzE;;AAEV"}

package/dist/components/section-rule.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export type SectionRuleProps = Omit<HTMLAttributes<HTMLElement>, "title"> & {
+    /** Section title shown before the dashed rule. */
+    title: ReactNode;
+    /** Info tooltip beside the title. */
+    hint?: ReactNode;
+    /** Actions on the right of the dashed rule. */
+    actions?: ReactNode;
+};
+export declare function SectionRule({ title, hint, actions, className, children, ...props }: SectionRuleProps): import("react").JSX.Element;