@nocoo/basalt 2.0.0-rc.1 → 2.0.2

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/loading-screen.js

@@ -10,11 +10,15 @@ 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: "relative",
-			children: [/* @__PURE__ */ n("div", {
-				className: "flex h-72 w-72 items-center justify-center overflow-hidden rounded-full bg-basalt-secondary p-6 ring-1 ring-basalt-border",
-				children: a ?? /* @__PURE__ */ n(t, { className: "h-28 w-28 text-basalt-muted-foreground" })
-			}), /* @__PURE__ */ n("div", { className: "absolute inset-[-4px] animate-basalt-spin rounded-full border-[3px] border-transparent border-t-basalt-primary motion-reduce:animate-none" })]
+			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",
+				style: { width: "6rem" },
+				children: /* @__PURE__ */ n("span", {
+					className: "absolute inset-0 animate-basalt-shimmer motion-reduce:animate-none",
+					style: { background: "linear-gradient(to right, transparent, hsl(var(--basalt-foreground) / 0.5), transparent)" }
+				})
+			})]
 		})
 	});
 }

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

@@ -1 +1 @@
-{"version":3,"file":"loading-screen.js","names":[],"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=\"relative\">\n\t\t\t\t<div className=\"flex h-72 w-72 items-center justify-center overflow-hidden rounded-full bg-basalt-secondary p-6 ring-1 ring-basalt-border\">\n\t\t\t\t\t{mark ?? <BasaltMark className=\"h-28 w-28 text-basalt-muted-foreground\" />}\n\t\t\t\t</div>\n\t\t\t\t<div className=\"absolute inset-[-4px] animate-basalt-spin rounded-full border-[3px] border-transparent border-t-basalt-primary motion-reduce:animate-none\" />\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;AAIA,SAAgB,EAAc,EAC7B,WAAQ,WACR,SACA,cACA,GAAG,KAID;CACF,OACC,kBAAC,OAAD;EACC,MAAK;EACL,cAAY;EACZ,WAAW,EACV,4EACA,CACD;EACA,GAAI;EAEJ,UAAA,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACC,kBAAC,OAAD;IAAK,WAAU;IACb,UAAA,KAAQ,kBAAC,GAAD,EAAY,WAAU,yCAA0C,CAAA;GACrE,CAAA,GACL,kBAAC,OAAD,EAAK,WAAU,4IAA6I,CAAA,CACxJ;;CACD,CAAA;AAEP"}
+{"version":3,"file":"loading-screen.js","names":[],"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,SAAgB,EAAc,EAC7B,WAAQ,WACR,SACA,cACA,GAAG,KAID;CACF,OACC,kBAAC,OAAD;EACC,MAAK;EACL,cAAY;EACZ,WAAW,EACV,4EACA,CACD;EACA,GAAI;EAEJ,UAAA,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,KAAQ,kBAAC,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"}

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/resource-list.d.ts

@@ -0,0 +1,10 @@
+export type ResourceListRow = {
+    name: string;
+    status: string;
+};
+export type ResourceListProps = {
+    title: string;
+    description?: string;
+    data: ResourceListRow[];
+};
+export declare function ResourceList({ title, description, data }: ResourceListProps): import("react").JSX.Element;

package/dist/components/resource-list.js

@@ -0,0 +1,30 @@
+"use client";
+import { DataTable as e } from "./data-table.js";
+import { PageHeader as t } from "./page-header.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/resource-list.tsx
+var i = [{
+	id: "name",
+	header: "Name",
+	accessor: (e) => e.name
+}, {
+	id: "status",
+	header: "Status",
+	accessor: (e) => e.status
+}];
+function a({ title: a, description: o, data: s }) {
+	return /* @__PURE__ */ r("div", {
+		className: "space-y-4",
+		children: [/* @__PURE__ */ n(t, {
+			title: a,
+			description: o
+		}), /* @__PURE__ */ n(e, {
+			data: s,
+			columns: i
+		})]
+	});
+}
+//#endregion
+export { a as ResourceList };
+
+//# sourceMappingURL=resource-list.js.map

package/dist/components/resource-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resource-list.js","names":[],"sources":["../../src/components/resource-list.tsx"],"sourcesContent":["import { DataTable, type DataTableColumn } from \"./data-table\";\nimport { PageHeader } from \"./page-header\";\n\nexport type ResourceListRow = {\n\tname: string;\n\tstatus: string;\n};\n\nexport type ResourceListProps = {\n\ttitle: string;\n\tdescription?: string;\n\tdata: ResourceListRow[];\n};\n\nconst COLUMNS: DataTableColumn<ResourceListRow>[] = [\n\t{ id: \"name\", header: \"Name\", accessor: (row) => row.name },\n\t{ id: \"status\", header: \"Status\", accessor: (row) => row.status },\n];\n\nexport function ResourceList({ title, description, data }: ResourceListProps) {\n\treturn (\n\t\t<div className=\"space-y-4\">\n\t\t\t<PageHeader title={title} description={description} />\n\t\t\t<DataTable data={data} columns={COLUMNS} />\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;AAcA,IAAM,IAA8C,CACnD;CAAE,IAAI;CAAQ,QAAQ;CAAQ,WAAW,MAAQ,EAAI;AAAK,GAC1D;CAAE,IAAI;CAAU,QAAQ;CAAU,WAAW,MAAQ,EAAI;AAAO,CACjE;AAEA,SAAgB,EAAa,EAAE,UAAO,gBAAa,WAA2B;CAC7E,OACC,kBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACC,kBAAC,GAAD;GAAmB;GAAoB;EAAc,CAAA,GACrD,kBAAC,GAAD;GAAiB;GAAM,SAAS;EAAU,CAAA,CACtC;;AAEP"}

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;

package/dist/components/section-rule.js

@@ -0,0 +1,44 @@
+"use client";
+import { cn as e } from "../utils/cn.js";
+import { Tooltip as t, TooltipContent as n, TooltipProvider as r, TooltipTrigger as i } from "./tooltip.js";
+import { Info as a } from "lucide-react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/section-rule.tsx
+function c({ title: c, hint: l, actions: u, className: d, children: f, ...p }) {
+	return /* @__PURE__ */ s("section", {
+		className: e("space-y-3", d),
+		...p,
+		children: [/* @__PURE__ */ s("div", {
+			className: "flex items-center gap-3",
+			children: [
+				/* @__PURE__ */ s("div", {
+					className: "flex min-w-0 items-center gap-1.5",
+					children: [/* @__PURE__ */ o("h2", {
+						className: "text-xs font-medium tracking-wider text-basalt-muted-foreground uppercase",
+						children: c
+					}), l ? /* @__PURE__ */ o(r, { children: /* @__PURE__ */ s(t, { children: [/* @__PURE__ */ o(i, {
+						asChild: !0,
+						children: /* @__PURE__ */ o("button", {
+							type: "button",
+							"aria-label": "More information",
+							className: "inline-flex size-4 shrink-0 items-center justify-center text-basalt-muted-foreground hover:text-basalt-foreground",
+							children: /* @__PURE__ */ o(a, { className: "size-3.5" })
+						})
+					}), /* @__PURE__ */ o(n, { children: l })] }) }) : null]
+				}),
+				/* @__PURE__ */ o("div", {
+					className: "h-px min-w-4 flex-1 border-t border-dashed border-basalt-border",
+					"aria-hidden": "true"
+				}),
+				u ? /* @__PURE__ */ o("div", {
+					className: "flex shrink-0 flex-wrap items-center justify-end gap-2",
+					children: u
+				}) : null
+			]
+		}), f]
+	});
+}
+//#endregion
+export { c as SectionRule };
+
+//# sourceMappingURL=section-rule.js.map

package/dist/components/section-rule.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"section-rule.js","names":[],"sources":["../../src/components/section-rule.tsx"],"sourcesContent":["import { Info } from \"lucide-react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"./tooltip\";\n\nexport type SectionRuleProps = Omit<HTMLAttributes<HTMLElement>, \"title\"> & {\n\t/** Section title shown before the dashed rule. */\n\ttitle: ReactNode;\n\t/** Info tooltip beside the title. */\n\thint?: ReactNode;\n\t/** Actions on the right of the dashed rule. */\n\tactions?: ReactNode;\n};\n\nexport function SectionRule({\n\ttitle,\n\thint,\n\tactions,\n\tclassName,\n\tchildren,\n\t...props\n}: SectionRuleProps) {\n\treturn (\n\t\t<section className={cn(\"space-y-3\", className)} {...props}>\n\t\t\t<div className=\"flex items-center gap-3\">\n\t\t\t\t<div className=\"flex min-w-0 items-center gap-1.5\">\n\t\t\t\t\t<h2 className=\"text-xs font-medium tracking-wider text-basalt-muted-foreground uppercase\">\n\t\t\t\t\t\t{title}\n\t\t\t\t\t</h2>\n\t\t\t\t\t{hint ? (\n\t\t\t\t\t\t<TooltipProvider>\n\t\t\t\t\t\t\t<Tooltip>\n\t\t\t\t\t\t\t\t<TooltipTrigger asChild>\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\taria-label=\"More information\"\n\t\t\t\t\t\t\t\t\t\tclassName=\"inline-flex size-4 shrink-0 items-center justify-center text-basalt-muted-foreground hover:text-basalt-foreground\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<Info className=\"size-3.5\" />\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t</TooltipTrigger>\n\t\t\t\t\t\t\t\t<TooltipContent>{hint}</TooltipContent>\n\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t</TooltipProvider>\n\t\t\t\t\t) : null}\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"h-px min-w-4 flex-1 border-t border-dashed border-basalt-border\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t/>\n\t\t\t\t{actions ? (\n\t\t\t\t\t<div className=\"flex shrink-0 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{children}\n\t\t</section>\n\t);\n}\n"],"mappings":";;;;;;AAcA,SAAgB,EAAY,EAC3B,UACA,SACA,YACA,cACA,aACA,GAAG,KACiB;CACpB,OACC,kBAAC,WAAD;EAAS,WAAW,EAAG,aAAa,CAAS;EAAG,GAAI;EAApD,UAAA,CACC,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IACC,kBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACC,kBAAC,MAAD;MAAI,WAAU;MACZ,UAAA;KACE,CAAA,GACH,IACA,kBAAC,GAAD,EAAA,UACC,kBAAC,GAAD,EAAA,UAAA,CACC,kBAAC,GAAD;MAAgB,SAAA;MACf,UAAA,kBAAC,UAAD;OACC,MAAK;OACL,cAAW;OACX,WAAU;OAEV,UAAA,kBAAC,GAAD,EAAM,WAAU,WAAY,CAAA;MACrB,CAAA;KACO,CAAA,GAChB,kBAAC,GAAD,EAAA,UAAiB,EAAqB,CAAA,CAC9B,EAAA,CAAA,EACO,CAAA,IACd,IACA;;IACL,kBAAC,OAAD;KACC,WAAU;KACV,eAAY;IACZ,CAAA;IACA,IACA,kBAAC,OAAD;KAAK,WAAU;KAA0D,UAAA;IAAa,CAAA,IACnF;GACA;EACJ,CAAA,GAAA,CACO;;AAEX"}

package/dist/components/sheet.d.ts

@@ -6,10 +6,10 @@ export declare const SheetClose: React.ForwardRefExoticComponent<DialogPrimitive
 export declare const SheetTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
 export declare const SheetDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
 declare const SIDE: {
-    readonly right: "fixed inset-y-0 right-0 box-border flex h-full w-80 flex-col gap-3 border-l border-basalt-border bg-basalt-popover p-6 text-sm text-basalt-popover-foreground shadow-lg";
-    readonly left: "fixed inset-y-0 left-0 box-border flex h-full w-80 flex-col gap-3 border-r border-basalt-border bg-basalt-popover p-6 text-sm text-basalt-popover-foreground shadow-lg";
-    readonly top: "fixed inset-x-0 top-0 box-border flex h-80 w-full flex-col gap-3 border-b border-basalt-border bg-basalt-popover p-6 text-sm text-basalt-popover-foreground shadow-lg";
-    readonly bottom: "fixed inset-x-0 bottom-0 box-border flex h-80 w-full flex-col gap-3 border-t border-basalt-border bg-basalt-popover p-6 text-sm text-basalt-popover-foreground shadow-lg";
+    readonly right: "fixed inset-y-0 right-0 box-border flex h-full w-80 flex-col gap-3 border-l border-basalt-border p-6 text-sm text-basalt-foreground shadow-lg";
+    readonly left: "fixed inset-y-0 left-0 box-border flex h-full w-80 flex-col gap-3 border-r border-basalt-border p-6 text-sm text-basalt-foreground shadow-lg";
+    readonly top: "fixed inset-x-0 top-0 box-border flex h-80 w-full flex-col gap-3 border-b border-basalt-border p-6 text-sm text-basalt-foreground shadow-lg";
+    readonly bottom: "fixed inset-x-0 bottom-0 box-border flex h-80 w-full flex-col gap-3 border-t border-basalt-border p-6 text-sm text-basalt-foreground shadow-lg";
 };
 export type SheetSide = keyof typeof SIDE;
 export declare const SheetContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {

package/dist/components/sheet.js

@@ -18,12 +18,13 @@ var d = r.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ i(o.Descript
 }));
 d.displayName = o.Description.displayName;
 var f = {
-	right: "fixed inset-y-0 right-0 box-border flex h-full w-80 flex-col gap-3 border-l border-basalt-border bg-basalt-popover p-6 text-sm text-basalt-popover-foreground shadow-lg",
-	left: "fixed inset-y-0 left-0 box-border flex h-full w-80 flex-col gap-3 border-r border-basalt-border bg-basalt-popover p-6 text-sm text-basalt-popover-foreground shadow-lg",
-	top: "fixed inset-x-0 top-0 box-border flex h-80 w-full flex-col gap-3 border-b border-basalt-border bg-basalt-popover p-6 text-sm text-basalt-popover-foreground shadow-lg",
-	bottom: "fixed inset-x-0 bottom-0 box-border flex h-80 w-full flex-col gap-3 border-t border-basalt-border bg-basalt-popover p-6 text-sm text-basalt-popover-foreground shadow-lg"
+	right: "fixed inset-y-0 right-0 box-border flex h-full w-80 flex-col gap-3 border-l border-basalt-border p-6 text-sm text-basalt-foreground shadow-lg",
+	left: "fixed inset-y-0 left-0 box-border flex h-full w-80 flex-col gap-3 border-r border-basalt-border p-6 text-sm text-basalt-foreground shadow-lg",
+	top: "fixed inset-x-0 top-0 box-border flex h-80 w-full flex-col gap-3 border-b border-basalt-border p-6 text-sm text-basalt-foreground shadow-lg",
+	bottom: "fixed inset-x-0 bottom-0 box-border flex h-80 w-full flex-col gap-3 border-t border-basalt-border p-6 text-sm text-basalt-foreground shadow-lg"
 }, p = r.forwardRef(({ className: r, side: s = "right", children: c, ...l }, u) => /* @__PURE__ */ a(o.Portal, { children: [/* @__PURE__ */ i(o.Overlay, { className: e("fixed inset-0 bg-black/50 backdrop-blur-xs", t, n) }), /* @__PURE__ */ i(o.Content, {
 	ref: u,
+	"data-basalt-surface-root": "",
 	className: e(t, n, f[s], r),
 	...l,
 	style: {

package/dist/components/sheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"sheet.js","names":[],"sources":["../../src/components/sheet.tsx"],"sourcesContent":["import * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { OVERLAY_LAYER, OVERLAY_MOTION } from \"./overlay\";\n\nexport const Sheet = DialogPrimitive.Root;\nexport const SheetTrigger = DialogPrimitive.Trigger;\nexport const SheetClose = DialogPrimitive.Close;\nexport const SheetTitle = React.forwardRef<\n\tReact.ElementRef<typeof DialogPrimitive.Title>,\n\tReact.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Title\n\t\tref={ref}\n\t\tclassName={cn(\"text-lg font-semibold leading-none tracking-tight\", className)}\n\t\t{...props}\n\t/>\n));\nSheetTitle.displayName = DialogPrimitive.Title.displayName;\n\nexport const SheetDescription = React.forwardRef<\n\tReact.ElementRef<typeof DialogPrimitive.Description>,\n\tReact.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Description\n\t\tref={ref}\n\t\tclassName={cn(\"text-sm text-basalt-muted-foreground\", className)}\n\t\t{...props}\n\t/>\n));\nSheetDescription.displayName = DialogPrimitive.Description.displayName;\n\nconst SIDE = {\n\tright:\n\t\t\"fixed inset-y-0 right-0 box-border flex h-full w-80 flex-col gap-3 border-l border-basalt-border bg-basalt-popover p-6 text-sm text-basalt-popover-foreground shadow-lg\",\n\tleft: \"fixed inset-y-0 left-0 box-border flex h-full w-80 flex-col gap-3 border-r border-basalt-border bg-basalt-popover p-6 text-sm text-basalt-popover-foreground shadow-lg\",\n\ttop: \"fixed inset-x-0 top-0 box-border flex h-80 w-full flex-col gap-3 border-b border-basalt-border bg-basalt-popover p-6 text-sm text-basalt-popover-foreground shadow-lg\",\n\tbottom:\n\t\t\"fixed inset-x-0 bottom-0 box-border flex h-80 w-full flex-col gap-3 border-t border-basalt-border bg-basalt-popover p-6 text-sm text-basalt-popover-foreground shadow-lg\",\n} as const;\n\nexport type SheetSide = keyof typeof SIDE;\n\nexport const SheetContent = React.forwardRef<\n\tReact.ElementRef<typeof DialogPrimitive.Content>,\n\tReact.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & { side?: SheetSide }\n>(({ className, side = \"right\", children, ...props }, ref) => (\n\t<DialogPrimitive.Portal>\n\t\t<DialogPrimitive.Overlay\n\t\t\tclassName={cn(\"fixed inset-0 bg-black/50 backdrop-blur-xs\", OVERLAY_LAYER, OVERLAY_MOTION)}\n\t\t/>\n\t\t<DialogPrimitive.Content\n\t\t\tref={ref}\n\t\t\tclassName={cn(OVERLAY_LAYER, OVERLAY_MOTION, SIDE[side], className)}\n\t\t\t{...props}\n\t\t\tstyle={{ boxSizing: \"border-box\", ...props.style }}\n\t\t>\n\t\t\t{children}\n\t\t</DialogPrimitive.Content>\n\t</DialogPrimitive.Portal>\n));\nSheetContent.displayName = \"SheetContent\";\n\nexport const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n\t<div className={cn(\"flex flex-col space-y-2 text-left\", className)} {...props} />\n);\nSheetHeader.displayName = \"SheetHeader\";\n\nexport const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n\t<div\n\t\tclassName={cn(\"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\", className)}\n\t\t{...props}\n\t/>\n);\nSheetFooter.displayName = \"SheetFooter\";\n"],"mappings":";;;;;;;AAKA,IAAa,IAAQ,EAAgB,MACxB,IAAe,EAAgB,SAC/B,IAAa,EAAgB,OAC7B,IAAa,EAAM,YAG7B,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAgB,OAAjB;CACM;CACL,WAAW,EAAG,qDAAqD,CAAS;CAC5E,GAAI;AACJ,CAAA,CACD;AACD,EAAW,cAAc,EAAgB,MAAM;AAE/C,IAAa,IAAmB,EAAM,YAGnC,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAgB,aAAjB;CACM;CACL,WAAW,EAAG,wCAAwC,CAAS;CAC/D,GAAI;AACJ,CAAA,CACD;AACD,EAAiB,cAAc,EAAgB,YAAY;AAE3D,IAAM,IAAO;CACZ,OACC;CACD,MAAM;CACN,KAAK;CACL,QACC;AACF,GAIa,IAAe,EAAM,YAG/B,EAAE,cAAW,UAAO,SAAS,aAAU,GAAG,KAAS,MACrD,kBAAC,EAAgB,QAAjB,EAAA,UAAA,CACC,kBAAC,EAAgB,SAAjB,EACC,WAAW,EAAG,8CAA8C,GAAe,CAAc,EACzF,CAAA,GACD,kBAAC,EAAgB,SAAjB;CACM;CACL,WAAW,EAAG,GAAe,GAAgB,EAAK,IAAO,CAAS;CAClE,GAAI;CACJ,OAAO;EAAE,WAAW;EAAc,GAAG,EAAM;CAAM;CAEhD;AACuB,CAAA,CACF,EAAA,CAAA,CACxB;AACD,EAAa,cAAc;AAE3B,IAAa,KAAe,EAAE,cAAW,GAAG,QAC3C,kBAAC,OAAD;CAAK,WAAW,EAAG,qCAAqC,CAAS;CAAG,GAAI;AAAQ,CAAA;AAEjF,EAAY,cAAc;AAE1B,IAAa,KAAe,EAAE,cAAW,GAAG,QAC3C,kBAAC,OAAD;CACC,WAAW,EAAG,0DAA0D,CAAS;CACjF,GAAI;AACJ,CAAA;AAEF,EAAY,cAAc"}
+{"version":3,"file":"sheet.js","names":[],"sources":["../../src/components/sheet.tsx"],"sourcesContent":["import * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { OVERLAY_LAYER, OVERLAY_MOTION } from \"./overlay\";\n\nexport const Sheet = DialogPrimitive.Root;\nexport const SheetTrigger = DialogPrimitive.Trigger;\nexport const SheetClose = DialogPrimitive.Close;\nexport const SheetTitle = React.forwardRef<\n\tReact.ElementRef<typeof DialogPrimitive.Title>,\n\tReact.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Title\n\t\tref={ref}\n\t\tclassName={cn(\"text-lg font-semibold leading-none tracking-tight\", className)}\n\t\t{...props}\n\t/>\n));\nSheetTitle.displayName = DialogPrimitive.Title.displayName;\n\nexport const SheetDescription = React.forwardRef<\n\tReact.ElementRef<typeof DialogPrimitive.Description>,\n\tReact.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Description\n\t\tref={ref}\n\t\tclassName={cn(\"text-sm text-basalt-muted-foreground\", className)}\n\t\t{...props}\n\t/>\n));\nSheetDescription.displayName = DialogPrimitive.Description.displayName;\n\nconst SIDE = {\n\tright:\n\t\t\"fixed inset-y-0 right-0 box-border flex h-full w-80 flex-col gap-3 border-l border-basalt-border p-6 text-sm text-basalt-foreground shadow-lg\",\n\tleft: \"fixed inset-y-0 left-0 box-border flex h-full w-80 flex-col gap-3 border-r border-basalt-border p-6 text-sm text-basalt-foreground shadow-lg\",\n\ttop: \"fixed inset-x-0 top-0 box-border flex h-80 w-full flex-col gap-3 border-b border-basalt-border p-6 text-sm text-basalt-foreground shadow-lg\",\n\tbottom:\n\t\t\"fixed inset-x-0 bottom-0 box-border flex h-80 w-full flex-col gap-3 border-t border-basalt-border p-6 text-sm text-basalt-foreground shadow-lg\",\n} as const;\n\nexport type SheetSide = keyof typeof SIDE;\n\nexport const SheetContent = React.forwardRef<\n\tReact.ElementRef<typeof DialogPrimitive.Content>,\n\tReact.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & { side?: SheetSide }\n>(({ className, side = \"right\", children, ...props }, ref) => (\n\t<DialogPrimitive.Portal>\n\t\t<DialogPrimitive.Overlay\n\t\t\tclassName={cn(\"fixed inset-0 bg-black/50 backdrop-blur-xs\", OVERLAY_LAYER, OVERLAY_MOTION)}\n\t\t/>\n\t\t<DialogPrimitive.Content\n\t\t\tref={ref}\n\t\t\tdata-basalt-surface-root=\"\"\n\t\t\tclassName={cn(OVERLAY_LAYER, OVERLAY_MOTION, SIDE[side], className)}\n\t\t\t{...props}\n\t\t\tstyle={{ boxSizing: \"border-box\", ...props.style }}\n\t\t>\n\t\t\t{children}\n\t\t</DialogPrimitive.Content>\n\t</DialogPrimitive.Portal>\n));\nSheetContent.displayName = \"SheetContent\";\n\nexport const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n\t<div className={cn(\"flex flex-col space-y-2 text-left\", className)} {...props} />\n);\nSheetHeader.displayName = \"SheetHeader\";\n\nexport const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n\t<div\n\t\tclassName={cn(\"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\", className)}\n\t\t{...props}\n\t/>\n);\nSheetFooter.displayName = \"SheetFooter\";\n"],"mappings":";;;;;;;AAKA,IAAa,IAAQ,EAAgB,MACxB,IAAe,EAAgB,SAC/B,IAAa,EAAgB,OAC7B,IAAa,EAAM,YAG7B,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAgB,OAAjB;CACM;CACL,WAAW,EAAG,qDAAqD,CAAS;CAC5E,GAAI;AACJ,CAAA,CACD;AACD,EAAW,cAAc,EAAgB,MAAM;AAE/C,IAAa,IAAmB,EAAM,YAGnC,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAgB,aAAjB;CACM;CACL,WAAW,EAAG,wCAAwC,CAAS;CAC/D,GAAI;AACJ,CAAA,CACD;AACD,EAAiB,cAAc,EAAgB,YAAY;AAE3D,IAAM,IAAO;CACZ,OACC;CACD,MAAM;CACN,KAAK;CACL,QACC;AACF,GAIa,IAAe,EAAM,YAG/B,EAAE,cAAW,UAAO,SAAS,aAAU,GAAG,KAAS,MACrD,kBAAC,EAAgB,QAAjB,EAAA,UAAA,CACC,kBAAC,EAAgB,SAAjB,EACC,WAAW,EAAG,8CAA8C,GAAe,CAAc,EACzF,CAAA,GACD,kBAAC,EAAgB,SAAjB;CACM;CACL,4BAAyB;CACzB,WAAW,EAAG,GAAe,GAAgB,EAAK,IAAO,CAAS;CAClE,GAAI;CACJ,OAAO;EAAE,WAAW;EAAc,GAAG,EAAM;CAAM;CAEhD;AACuB,CAAA,CACF,EAAA,CAAA,CACxB;AACD,EAAa,cAAc;AAE3B,IAAa,KAAe,EAAE,cAAW,GAAG,QAC3C,kBAAC,OAAD;CAAK,WAAW,EAAG,qCAAqC,CAAS;CAAG,GAAI;AAAQ,CAAA;AAEjF,EAAY,cAAc;AAE1B,IAAa,KAAe,EAAE,cAAW,GAAG,QAC3C,kBAAC,OAAD;CACC,WAAW,EAAG,0DAA0D,CAAS;CACjF,GAAI;AACJ,CAAA;AAEF,EAAY,cAAc"}

package/dist/components/sidebar.js

@@ -250,6 +250,7 @@ function F({ name: t, email: n, avatar: r, action: i, className: a }) {
 }
 function I({ className: t, ...n }) {
 	return /* @__PURE__ */ v("div", {
+		"data-basalt-surface-root": "",
 		className: e("min-h-0 flex-1 overflow-y-auto rounded-[16px] bg-basalt-card p-3 text-basalt-card-foreground shadow-sm ring-1 ring-basalt-border/40 md:rounded-basalt-island md:p-5", t),
 		...n
 	});