@nocoo/basalt 2.0.0 → 2.0.2

package/dist/components/alert-dialog.js

@@ -14,6 +14,7 @@ var c = i.Root, l = i.Trigger, u = i.Portal, d = a.forwardRef(({ className: e, .
 d.displayName = i.Overlay.displayName;
 var f = a.forwardRef(({ className: e, size: t = "base", ...n }, a) => /* @__PURE__ */ s(u, { children: [/* @__PURE__ */ o(d, {}), /* @__PURE__ */ o(i.Content, {
 	ref: a,
+	"data-basalt-surface-root": "",
 	className: r({
 		size: t,
 		className: e

package/dist/components/alert-dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog.js","names":[],"sources":["../../src/components/alert-dialog.tsx"],"sourcesContent":["import * as AlertDialogPrimitive from \"@radix-ui/react-alert-dialog\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { buttonVariants } from \"./button\";\nimport { type DialogSize, dialogOverlayClass, dialogPanelClass } from \"./dialog\";\n\nexport const AlertDialog = AlertDialogPrimitive.Root;\nexport const AlertDialogTrigger = AlertDialogPrimitive.Trigger;\nexport const AlertDialogPortal = AlertDialogPrimitive.Portal;\n\nexport const AlertDialogOverlay = React.forwardRef<\n\tReact.ElementRef<typeof AlertDialogPrimitive.Overlay>,\n\tReact.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n\t<AlertDialogPrimitive.Overlay ref={ref} className={dialogOverlayClass(className)} {...props} />\n));\nAlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;\n\nexport type AlertDialogContentProps = React.ComponentPropsWithoutRef<\n\ttypeof AlertDialogPrimitive.Content\n> & {\n\tsize?: DialogSize;\n};\n\nexport const AlertDialogContent = React.forwardRef<\n\tReact.ElementRef<typeof AlertDialogPrimitive.Content>,\n\tAlertDialogContentProps\n>(({ className, size = \"base\", ...props }, ref) => (\n\t<AlertDialogPortal>\n\t\t<AlertDialogOverlay />\n\t\t<AlertDialogPrimitive.Content\n\t\t\tref={ref}\n\t\t\tclassName={dialogPanelClass({ size, className })}\n\t\t\t{...props}\n\t\t/>\n\t</AlertDialogPortal>\n));\nAlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;\n\nexport const AlertDialogTitle = React.forwardRef<\n\tReact.ElementRef<typeof AlertDialogPrimitive.Title>,\n\tReact.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n\t<AlertDialogPrimitive.Title\n\t\tref={ref}\n\t\tclassName={cn(\"text-2xl font-semibold tracking-tight\", className)}\n\t\t{...props}\n\t/>\n));\nAlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;\n\nexport const AlertDialogDescription = React.forwardRef<\n\tReact.ElementRef<typeof AlertDialogPrimitive.Description>,\n\tReact.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n\t<AlertDialogPrimitive.Description\n\t\tref={ref}\n\t\tclassName={cn(\"text-base text-basalt-muted-foreground\", className)}\n\t\t{...props}\n\t/>\n));\nAlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;\n\nexport const AlertDialogCancel = React.forwardRef<\n\tReact.ElementRef<typeof AlertDialogPrimitive.Cancel>,\n\tReact.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>\n>(({ className, ...props }, ref) => (\n\t<AlertDialogPrimitive.Cancel\n\t\tref={ref}\n\t\tclassName={cn(buttonVariants({ variant: \"outline\" }), className)}\n\t\t{...props}\n\t/>\n));\nAlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;\n\nexport const AlertDialogAction = React.forwardRef<\n\tReact.ElementRef<typeof AlertDialogPrimitive.Action>,\n\tReact.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>\n>(({ className, ...props }, ref) => (\n\t<AlertDialogPrimitive.Action\n\t\tref={ref}\n\t\tclassName={cn(buttonVariants({ variant: \"destructive\" }), className)}\n\t\t{...props}\n\t/>\n));\nAlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;\n\nexport const AlertDialogHeader = ({\n\tclassName,\n\t...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n\t<div className={cn(\"flex flex-col space-y-2 text-left\", className)} {...props} />\n);\nAlertDialogHeader.displayName = \"AlertDialogHeader\";\n\nexport const AlertDialogFooter = ({\n\tclassName,\n\t...props\n}: 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);\nAlertDialogFooter.displayName = \"AlertDialogFooter\";\n"],"mappings":";;;;;;;;AAMA,IAAa,IAAc,EAAqB,MACnC,IAAqB,EAAqB,SAC1C,IAAoB,EAAqB,QAEzC,IAAqB,EAAM,YAGrC,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAqB,SAAtB;CAAmC;CAAK,WAAW,EAAmB,CAAS;CAAG,GAAI;AAAQ,CAAA,CAC9F;AACD,EAAmB,cAAc,EAAqB,QAAQ;AAQ9D,IAAa,IAAqB,EAAM,YAGrC,EAAE,cAAW,UAAO,QAAQ,GAAG,KAAS,MAC1C,kBAAC,GAAD,EAAA,UAAA,CACC,kBAAC,GAAD,CAAqB,CAAA,GACrB,kBAAC,EAAqB,SAAtB;CACM;CACL,WAAW,EAAiB;EAAE;EAAM;CAAU,CAAC;CAC/C,GAAI;AACJ,CAAA,CACiB,EAAA,CAAA,CACnB;AACD,EAAmB,cAAc,EAAqB,QAAQ;AAE9D,IAAa,IAAmB,EAAM,YAGnC,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAqB,OAAtB;CACM;CACL,WAAW,EAAG,yCAAyC,CAAS;CAChE,GAAI;AACJ,CAAA,CACD;AACD,EAAiB,cAAc,EAAqB,MAAM;AAE1D,IAAa,IAAyB,EAAM,YAGzC,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAqB,aAAtB;CACM;CACL,WAAW,EAAG,0CAA0C,CAAS;CACjE,GAAI;AACJ,CAAA,CACD;AACD,EAAuB,cAAc,EAAqB,YAAY;AAEtE,IAAa,IAAoB,EAAM,YAGpC,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAqB,QAAtB;CACM;CACL,WAAW,EAAG,EAAe,EAAE,SAAS,UAAU,CAAC,GAAG,CAAS;CAC/D,GAAI;AACJ,CAAA,CACD;AACD,EAAkB,cAAc,EAAqB,OAAO;AAE5D,IAAa,IAAoB,EAAM,YAGpC,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAqB,QAAtB;CACM;CACL,WAAW,EAAG,EAAe,EAAE,SAAS,cAAc,CAAC,GAAG,CAAS;CACnE,GAAI;AACJ,CAAA,CACD;AACD,EAAkB,cAAc,EAAqB,OAAO;AAE5D,IAAa,KAAqB,EACjC,cACA,GAAG,QAEH,kBAAC,OAAD;CAAK,WAAW,EAAG,qCAAqC,CAAS;CAAG,GAAI;AAAQ,CAAA;AAEjF,EAAkB,cAAc;AAEhC,IAAa,KAAqB,EACjC,cACA,GAAG,QAEH,kBAAC,OAAD;CACC,WAAW,EAAG,0DAA0D,CAAS;CACjF,GAAI;AACJ,CAAA;AAEF,EAAkB,cAAc"}
+{"version":3,"file":"alert-dialog.js","names":[],"sources":["../../src/components/alert-dialog.tsx"],"sourcesContent":["import * as AlertDialogPrimitive from \"@radix-ui/react-alert-dialog\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { buttonVariants } from \"./button\";\nimport { type DialogSize, dialogOverlayClass, dialogPanelClass } from \"./dialog\";\n\nexport const AlertDialog = AlertDialogPrimitive.Root;\nexport const AlertDialogTrigger = AlertDialogPrimitive.Trigger;\nexport const AlertDialogPortal = AlertDialogPrimitive.Portal;\n\nexport const AlertDialogOverlay = React.forwardRef<\n\tReact.ElementRef<typeof AlertDialogPrimitive.Overlay>,\n\tReact.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n\t<AlertDialogPrimitive.Overlay ref={ref} className={dialogOverlayClass(className)} {...props} />\n));\nAlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;\n\nexport type AlertDialogContentProps = React.ComponentPropsWithoutRef<\n\ttypeof AlertDialogPrimitive.Content\n> & {\n\tsize?: DialogSize;\n};\n\nexport const AlertDialogContent = React.forwardRef<\n\tReact.ElementRef<typeof AlertDialogPrimitive.Content>,\n\tAlertDialogContentProps\n>(({ className, size = \"base\", ...props }, ref) => (\n\t<AlertDialogPortal>\n\t\t<AlertDialogOverlay />\n\t\t<AlertDialogPrimitive.Content\n\t\t\tref={ref}\n\t\t\tdata-basalt-surface-root=\"\"\n\t\t\tclassName={dialogPanelClass({ size, className })}\n\t\t\t{...props}\n\t\t/>\n\t</AlertDialogPortal>\n));\nAlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;\n\nexport const AlertDialogTitle = React.forwardRef<\n\tReact.ElementRef<typeof AlertDialogPrimitive.Title>,\n\tReact.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n\t<AlertDialogPrimitive.Title\n\t\tref={ref}\n\t\tclassName={cn(\"text-2xl font-semibold tracking-tight\", className)}\n\t\t{...props}\n\t/>\n));\nAlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;\n\nexport const AlertDialogDescription = React.forwardRef<\n\tReact.ElementRef<typeof AlertDialogPrimitive.Description>,\n\tReact.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n\t<AlertDialogPrimitive.Description\n\t\tref={ref}\n\t\tclassName={cn(\"text-base text-basalt-muted-foreground\", className)}\n\t\t{...props}\n\t/>\n));\nAlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;\n\nexport const AlertDialogCancel = React.forwardRef<\n\tReact.ElementRef<typeof AlertDialogPrimitive.Cancel>,\n\tReact.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>\n>(({ className, ...props }, ref) => (\n\t<AlertDialogPrimitive.Cancel\n\t\tref={ref}\n\t\tclassName={cn(buttonVariants({ variant: \"outline\" }), className)}\n\t\t{...props}\n\t/>\n));\nAlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;\n\nexport const AlertDialogAction = React.forwardRef<\n\tReact.ElementRef<typeof AlertDialogPrimitive.Action>,\n\tReact.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>\n>(({ className, ...props }, ref) => (\n\t<AlertDialogPrimitive.Action\n\t\tref={ref}\n\t\tclassName={cn(buttonVariants({ variant: \"destructive\" }), className)}\n\t\t{...props}\n\t/>\n));\nAlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;\n\nexport const AlertDialogHeader = ({\n\tclassName,\n\t...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n\t<div className={cn(\"flex flex-col space-y-2 text-left\", className)} {...props} />\n);\nAlertDialogHeader.displayName = \"AlertDialogHeader\";\n\nexport const AlertDialogFooter = ({\n\tclassName,\n\t...props\n}: 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);\nAlertDialogFooter.displayName = \"AlertDialogFooter\";\n"],"mappings":";;;;;;;;AAMA,IAAa,IAAc,EAAqB,MACnC,IAAqB,EAAqB,SAC1C,IAAoB,EAAqB,QAEzC,IAAqB,EAAM,YAGrC,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAqB,SAAtB;CAAmC;CAAK,WAAW,EAAmB,CAAS;CAAG,GAAI;AAAQ,CAAA,CAC9F;AACD,EAAmB,cAAc,EAAqB,QAAQ;AAQ9D,IAAa,IAAqB,EAAM,YAGrC,EAAE,cAAW,UAAO,QAAQ,GAAG,KAAS,MAC1C,kBAAC,GAAD,EAAA,UAAA,CACC,kBAAC,GAAD,CAAqB,CAAA,GACrB,kBAAC,EAAqB,SAAtB;CACM;CACL,4BAAyB;CACzB,WAAW,EAAiB;EAAE;EAAM;CAAU,CAAC;CAC/C,GAAI;AACJ,CAAA,CACiB,EAAA,CAAA,CACnB;AACD,EAAmB,cAAc,EAAqB,QAAQ;AAE9D,IAAa,IAAmB,EAAM,YAGnC,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAqB,OAAtB;CACM;CACL,WAAW,EAAG,yCAAyC,CAAS;CAChE,GAAI;AACJ,CAAA,CACD;AACD,EAAiB,cAAc,EAAqB,MAAM;AAE1D,IAAa,IAAyB,EAAM,YAGzC,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAqB,aAAtB;CACM;CACL,WAAW,EAAG,0CAA0C,CAAS;CACjE,GAAI;AACJ,CAAA,CACD;AACD,EAAuB,cAAc,EAAqB,YAAY;AAEtE,IAAa,IAAoB,EAAM,YAGpC,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAqB,QAAtB;CACM;CACL,WAAW,EAAG,EAAe,EAAE,SAAS,UAAU,CAAC,GAAG,CAAS;CAC/D,GAAI;AACJ,CAAA,CACD;AACD,EAAkB,cAAc,EAAqB,OAAO;AAE5D,IAAa,IAAoB,EAAM,YAGpC,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAqB,QAAtB;CACM;CACL,WAAW,EAAG,EAAe,EAAE,SAAS,cAAc,CAAC,GAAG,CAAS;CACnE,GAAI;AACJ,CAAA,CACD;AACD,EAAkB,cAAc,EAAqB,OAAO;AAE5D,IAAa,KAAqB,EACjC,cACA,GAAG,QAEH,kBAAC,OAAD;CAAK,WAAW,EAAG,qCAAqC,CAAS;CAAG,GAAI;AAAQ,CAAA;AAEjF,EAAkB,cAAc;AAEhC,IAAa,KAAqB,EACjC,cACA,GAAG,QAEH,kBAAC,OAAD;CACC,WAAW,EAAG,0DAA0D,CAAS;CACjF,GAAI;AACJ,CAAA;AAEF,EAAkB,cAAc"}

package/dist/components/button.js

@@ -11,9 +11,9 @@ var c = i(`inline-flex items-center justify-center gap-2 rounded-basalt-md text-
 	variants: {
 		variant: {
 			default: "bg-basalt-primary text-basalt-primary-foreground hover:bg-basalt-primary/90",
-			secondary: "bg-basalt-secondary text-basalt-foreground hover:bg-basalt-accent",
+			secondary: "bg-basalt-control text-basalt-foreground hover:bg-basalt-accent",
 			destructive: "bg-basalt-destructive text-basalt-destructive-foreground hover:bg-basalt-destructive/90",
-			outline: "border border-basalt-border bg-basalt-secondary hover:bg-basalt-accent hover:text-basalt-accent-foreground",
+			outline: "border border-basalt-border bg-basalt-control hover:bg-basalt-accent hover:text-basalt-accent-foreground",
 			ghost: "hover:bg-basalt-accent hover:text-basalt-accent-foreground",
 			link: "text-basalt-primary underline-offset-4 hover:underline"
 		},

package/dist/components/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","names":[],"sources":["../../src/components/button.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Loader2 } from \"lucide-react\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { FOCUS_RING } from \"./overlay\";\n\nconst buttonVariants = cva(\n\t`inline-flex items-center justify-center gap-2 rounded-basalt-md text-sm font-medium transition-colors ${FOCUS_RING} disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0`,\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tdefault: \"bg-basalt-primary text-basalt-primary-foreground hover:bg-basalt-primary/90\",\n\t\t\t\tsecondary: \"bg-basalt-secondary text-basalt-foreground hover:bg-basalt-accent\",\n\t\t\t\tdestructive:\n\t\t\t\t\t\"bg-basalt-destructive text-basalt-destructive-foreground hover:bg-basalt-destructive/90\",\n\t\t\t\toutline:\n\t\t\t\t\t\"border border-basalt-border bg-basalt-secondary hover:bg-basalt-accent hover:text-basalt-accent-foreground\",\n\t\t\t\tghost: \"hover:bg-basalt-accent hover:text-basalt-accent-foreground\",\n\t\t\t\tlink: \"text-basalt-primary underline-offset-4 hover:underline\",\n\t\t\t},\n\t\t\tsize: {\n\t\t\t\tdefault: \"h-9 px-4 py-2\",\n\t\t\t\tsm: \"h-8 rounded-basalt-md px-3 text-xs\",\n\t\t\t\tlg: \"h-10 rounded-basalt-md px-6\",\n\t\t\t\ticon: \"h-9 w-9\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tvariant: \"default\",\n\t\t\tsize: \"default\",\n\t\t},\n\t},\n);\n\nexport interface ButtonProps\n\textends React.ButtonHTMLAttributes<HTMLButtonElement>,\n\t\tVariantProps<typeof buttonVariants> {\n\tasChild?: boolean;\n\tloading?: boolean;\n\ticon?: React.ReactNode;\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tvariant,\n\t\t\tsize,\n\t\t\tasChild = false,\n\t\t\ttype = \"button\",\n\t\t\tloading = false,\n\t\t\ticon,\n\t\t\tchildren,\n\t\t\tdisabled,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst Comp = asChild ? Slot : \"button\";\n\t\tif (asChild) {\n\t\t\treturn (\n\t\t\t\t<Comp className={cn(buttonVariants({ variant, size }), className)} ref={ref} {...props}>\n\t\t\t\t\t{children}\n\t\t\t\t</Comp>\n\t\t\t);\n\t\t}\n\t\tconst iconNode = loading ? (\n\t\t\t<Loader2 className=\"animate-basalt-spin\" aria-hidden=\"true\" />\n\t\t) : (\n\t\t\ticon\n\t\t);\n\t\treturn (\n\t\t\t<button\n\t\t\t\tclassName={cn(buttonVariants({ variant, size }), className)}\n\t\t\t\tref={ref}\n\t\t\t\ttype={type}\n\t\t\t\tdisabled={disabled || loading}\n\t\t\t\taria-busy={loading || undefined}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{iconNode}\n\t\t\t\t{children}\n\t\t\t</button>\n\t\t);\n\t},\n);\nButton.displayName = \"Button\";\n\nexport interface LinkButtonProps\n\textends React.AnchorHTMLAttributes<HTMLAnchorElement>,\n\t\tVariantProps<typeof buttonVariants> {\n\ticon?: React.ReactNode;\n}\n\nexport const LinkButton = React.forwardRef<HTMLAnchorElement, LinkButtonProps>(\n\t({ className, variant, size, icon, children, ...props }, ref) => (\n\t\t<a ref={ref} className={cn(buttonVariants({ variant, size }), className)} {...props}>\n\t\t\t{icon}\n\t\t\t{children}\n\t\t</a>\n\t),\n);\nLinkButton.displayName = \"LinkButton\";\n\nexport { buttonVariants };\n"],"mappings":";;;;;;;;;AAOA,IAAM,IAAiB,EACtB,yGAAyG,EAAW,gHACpH;CACC,UAAU;EACT,SAAS;GACR,SAAS;GACT,WAAW;GACX,aACC;GACD,SACC;GACD,OAAO;GACP,MAAM;EACP;EACA,MAAM;GACL,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,MAAM;EACP;CACD;CACA,iBAAiB;EAChB,SAAS;EACT,MAAM;CACP;AACD,CACD,GAUa,IAAS,EAAM,YAE1B,EACC,cACA,YACA,SACA,aAAU,IACV,UAAO,UACP,aAAU,IACV,SACA,aACA,aACA,GAAG,KAEJ,MACI;CACJ,IAAM,IAAO,IAAU,IAAO;CAC9B,IAAI,GACH,OACC,kBAAC,GAAD;EAAM,WAAW,EAAG,EAAe;GAAE;GAAS;EAAK,CAAC,GAAG,CAAS;EAAQ;EAAK,GAAI;EAC/E;CACI,CAAA;CAGR,IAAM,IAAW,IAChB,kBAAC,GAAD;EAAS,WAAU;EAAsB,eAAY;CAAQ,CAAA,IAE7D;CAED,OACC,kBAAC,UAAD;EACC,WAAW,EAAG,EAAe;GAAE;GAAS;EAAK,CAAC,GAAG,CAAS;EACrD;EACC;EACN,UAAU,KAAY;EACtB,aAAW,KAAW,KAAA;EACtB,GAAI;EANL,UAAA,CAQE,GACA,CACM;;AAEV,CACD;AACA,EAAO,cAAc;AAQrB,IAAa,IAAa,EAAM,YAC9B,EAAE,cAAW,YAAS,SAAM,SAAM,aAAU,GAAG,KAAS,MACxD,kBAAC,KAAD;CAAQ;CAAK,WAAW,EAAG,EAAe;EAAE;EAAS;CAAK,CAAC,GAAG,CAAS;CAAG,GAAI;CAA9E,UAAA,CACE,GACA,CACC;AAEL,CAAA,CAAA;AACA,EAAW,cAAc"}
+{"version":3,"file":"button.js","names":[],"sources":["../../src/components/button.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Loader2 } from \"lucide-react\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { FOCUS_RING } from \"./overlay\";\n\nconst buttonVariants = cva(\n\t`inline-flex items-center justify-center gap-2 rounded-basalt-md text-sm font-medium transition-colors ${FOCUS_RING} disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0`,\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tdefault: \"bg-basalt-primary text-basalt-primary-foreground hover:bg-basalt-primary/90\",\n\t\t\t\tsecondary: \"bg-basalt-control text-basalt-foreground hover:bg-basalt-accent\",\n\t\t\t\tdestructive:\n\t\t\t\t\t\"bg-basalt-destructive text-basalt-destructive-foreground hover:bg-basalt-destructive/90\",\n\t\t\t\toutline:\n\t\t\t\t\t\"border border-basalt-border bg-basalt-control hover:bg-basalt-accent hover:text-basalt-accent-foreground\",\n\t\t\t\tghost: \"hover:bg-basalt-accent hover:text-basalt-accent-foreground\",\n\t\t\t\tlink: \"text-basalt-primary underline-offset-4 hover:underline\",\n\t\t\t},\n\t\t\tsize: {\n\t\t\t\tdefault: \"h-9 px-4 py-2\",\n\t\t\t\tsm: \"h-8 rounded-basalt-md px-3 text-xs\",\n\t\t\t\tlg: \"h-10 rounded-basalt-md px-6\",\n\t\t\t\ticon: \"h-9 w-9\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tvariant: \"default\",\n\t\t\tsize: \"default\",\n\t\t},\n\t},\n);\n\nexport interface ButtonProps\n\textends React.ButtonHTMLAttributes<HTMLButtonElement>,\n\t\tVariantProps<typeof buttonVariants> {\n\tasChild?: boolean;\n\tloading?: boolean;\n\ticon?: React.ReactNode;\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tvariant,\n\t\t\tsize,\n\t\t\tasChild = false,\n\t\t\ttype = \"button\",\n\t\t\tloading = false,\n\t\t\ticon,\n\t\t\tchildren,\n\t\t\tdisabled,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst Comp = asChild ? Slot : \"button\";\n\t\tif (asChild) {\n\t\t\treturn (\n\t\t\t\t<Comp className={cn(buttonVariants({ variant, size }), className)} ref={ref} {...props}>\n\t\t\t\t\t{children}\n\t\t\t\t</Comp>\n\t\t\t);\n\t\t}\n\t\tconst iconNode = loading ? (\n\t\t\t<Loader2 className=\"animate-basalt-spin\" aria-hidden=\"true\" />\n\t\t) : (\n\t\t\ticon\n\t\t);\n\t\treturn (\n\t\t\t<button\n\t\t\t\tclassName={cn(buttonVariants({ variant, size }), className)}\n\t\t\t\tref={ref}\n\t\t\t\ttype={type}\n\t\t\t\tdisabled={disabled || loading}\n\t\t\t\taria-busy={loading || undefined}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{iconNode}\n\t\t\t\t{children}\n\t\t\t</button>\n\t\t);\n\t},\n);\nButton.displayName = \"Button\";\n\nexport interface LinkButtonProps\n\textends React.AnchorHTMLAttributes<HTMLAnchorElement>,\n\t\tVariantProps<typeof buttonVariants> {\n\ticon?: React.ReactNode;\n}\n\nexport const LinkButton = React.forwardRef<HTMLAnchorElement, LinkButtonProps>(\n\t({ className, variant, size, icon, children, ...props }, ref) => (\n\t\t<a ref={ref} className={cn(buttonVariants({ variant, size }), className)} {...props}>\n\t\t\t{icon}\n\t\t\t{children}\n\t\t</a>\n\t),\n);\nLinkButton.displayName = \"LinkButton\";\n\nexport { buttonVariants };\n"],"mappings":";;;;;;;;;AAOA,IAAM,IAAiB,EACtB,yGAAyG,EAAW,gHACpH;CACC,UAAU;EACT,SAAS;GACR,SAAS;GACT,WAAW;GACX,aACC;GACD,SACC;GACD,OAAO;GACP,MAAM;EACP;EACA,MAAM;GACL,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,MAAM;EACP;CACD;CACA,iBAAiB;EAChB,SAAS;EACT,MAAM;CACP;AACD,CACD,GAUa,IAAS,EAAM,YAE1B,EACC,cACA,YACA,SACA,aAAU,IACV,UAAO,UACP,aAAU,IACV,SACA,aACA,aACA,GAAG,KAEJ,MACI;CACJ,IAAM,IAAO,IAAU,IAAO;CAC9B,IAAI,GACH,OACC,kBAAC,GAAD;EAAM,WAAW,EAAG,EAAe;GAAE;GAAS;EAAK,CAAC,GAAG,CAAS;EAAQ;EAAK,GAAI;EAC/E;CACI,CAAA;CAGR,IAAM,IAAW,IAChB,kBAAC,GAAD;EAAS,WAAU;EAAsB,eAAY;CAAQ,CAAA,IAE7D;CAED,OACC,kBAAC,UAAD;EACC,WAAW,EAAG,EAAe;GAAE;GAAS;EAAK,CAAC,GAAG,CAAS;EACrD;EACC;EACN,UAAU,KAAY;EACtB,aAAW,KAAW,KAAA;EACtB,GAAI;EANL,UAAA,CAQE,GACA,CACM;;AAEV,CACD;AACA,EAAO,cAAc;AAQrB,IAAa,IAAa,EAAM,YAC9B,EAAE,cAAW,YAAS,SAAM,SAAM,aAAU,GAAG,KAAS,MACxD,kBAAC,KAAD;CAAQ;CAAK,WAAW,EAAG,EAAe;EAAE;EAAS;CAAK,CAAC,GAAG,CAAS;CAAG,GAAI;CAA9E,UAAA,CACE,GACA,CACC;AAEL,CAAA,CAAA;AACA,EAAW,cAAc"}

package/dist/components/description-list.d.ts

@@ -0,0 +1,21 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export type DescriptionListColumns = 1 | 2 | 3;
+export type DescriptionListProps = HTMLAttributes<HTMLDListElement> & {
+    /**
+     * Number of term/value columns from the small breakpoint up.
+     * @default 2
+     */
+    columns?: DescriptionListColumns;
+};
+declare function DescriptionListRoot({ className, columns, ...props }: DescriptionListProps): import("react").JSX.Element;
+export type DescriptionListItemProps = HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Term shown above the value.
+     */
+    term: ReactNode;
+};
+declare function DescriptionListItem({ term, className, children, ...props }: DescriptionListItemProps): import("react").JSX.Element;
+export declare const DescriptionList: typeof DescriptionListRoot & {
+    Item: typeof DescriptionListItem;
+};
+export {};

package/dist/components/description-list.js

@@ -0,0 +1,35 @@
+"use client";
+import { cn as e } from "../utils/cn.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/description-list.tsx
+var r = {
+	1: "sm:grid-cols-1",
+	2: "sm:grid-cols-2",
+	3: "sm:grid-cols-3"
+};
+function i({ className: n, columns: i = 2, ...a }) {
+	return /* @__PURE__ */ t("dl", {
+		className: e("grid gap-x-8 gap-y-3 text-sm", r[i], n),
+		...a
+	});
+}
+i.displayName = "DescriptionList";
+function a({ term: r, className: i, children: a, ...o }) {
+	return /* @__PURE__ */ n("div", {
+		className: e("min-w-0", i),
+		...o,
+		children: [/* @__PURE__ */ t("dt", {
+			className: "text-xs text-basalt-muted-foreground",
+			children: r
+		}), /* @__PURE__ */ t("dd", {
+			className: "mt-0.5 wrap-break-word text-basalt-foreground",
+			children: a
+		})]
+	});
+}
+a.displayName = "DescriptionList.Item";
+var o = Object.assign(i, { Item: a });
+//#endregion
+export { o as DescriptionList };
+
+//# sourceMappingURL=description-list.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"description-list.js","names":[],"sources":["../../src/components/description-list.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../utils/cn\";\n\nexport type DescriptionListColumns = 1 | 2 | 3;\n\nexport type DescriptionListProps = HTMLAttributes<HTMLDListElement> & {\n\t/**\n\t * Number of term/value columns from the small breakpoint up.\n\t * @default 2\n\t */\n\tcolumns?: DescriptionListColumns;\n};\n\nconst COLUMN_CLASS: Record<DescriptionListColumns, string> = {\n\t1: \"sm:grid-cols-1\",\n\t2: \"sm:grid-cols-2\",\n\t3: \"sm:grid-cols-3\",\n};\n\nfunction DescriptionListRoot({ className, columns = 2, ...props }: DescriptionListProps) {\n\treturn (\n\t\t<dl\n\t\t\tclassName={cn(\"grid gap-x-8 gap-y-3 text-sm\", COLUMN_CLASS[columns], className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\nDescriptionListRoot.displayName = \"DescriptionList\";\n\nexport type DescriptionListItemProps = HTMLAttributes<HTMLDivElement> & {\n\t/**\n\t * Term shown above the value.\n\t */\n\tterm: ReactNode;\n};\n\nfunction DescriptionListItem({ term, className, children, ...props }: DescriptionListItemProps) {\n\treturn (\n\t\t<div className={cn(\"min-w-0\", className)} {...props}>\n\t\t\t<dt className=\"text-xs text-basalt-muted-foreground\">{term}</dt>\n\t\t\t<dd className=\"mt-0.5 wrap-break-word text-basalt-foreground\">{children}</dd>\n\t\t</div>\n\t);\n}\nDescriptionListItem.displayName = \"DescriptionList.Item\";\n\nexport const DescriptionList = Object.assign(DescriptionListRoot, {\n\tItem: DescriptionListItem,\n});\n"],"mappings":";;;;AAaA,IAAM,IAAuD;CAC5D,GAAG;CACH,GAAG;CACH,GAAG;AACJ;AAEA,SAAS,EAAoB,EAAE,cAAW,aAAU,GAAG,GAAG,KAA+B;CACxF,OACC,kBAAC,MAAD;EACC,WAAW,EAAG,gCAAgC,EAAa,IAAU,CAAS;EAC9E,GAAI;CACJ,CAAA;AAEH;AACA,EAAoB,cAAc;AASlC,SAAS,EAAoB,EAAE,SAAM,cAAW,aAAU,GAAG,KAAmC;CAC/F,OACC,kBAAC,OAAD;EAAK,WAAW,EAAG,WAAW,CAAS;EAAG,GAAI;EAA9C,UAAA,CACC,kBAAC,MAAD;GAAI,WAAU;GAAwC,UAAA;EAAS,CAAA,GAC/D,kBAAC,MAAD;GAAI,WAAU;GAAiD;EAAa,CAAA,CACxE;;AAEP;AACA,EAAoB,cAAc;AAElC,IAAa,IAAkB,OAAO,OAAO,GAAqB,EACjE,MAAM,EACP,CAAC"}

package/dist/components/dialog.js

@@ -15,7 +15,7 @@ function c(r) {
 	return e("fixed inset-0 bg-black/40 backdrop-blur-md", t, "data-[state=open]:animate-basalt-overlay-in data-[state=closed]:animate-basalt-overlay-out", n, r);
 }
 function l({ size: r = "base", className: i } = {}) {
-	return e("fixed top-1/2 left-1/2 w-full max-h-[calc(100vh-2rem)] max-w-[calc(100vw-2rem)] origin-center -translate-x-1/2 -translate-y-1/2 overflow-y-auto rounded-basalt-lg bg-basalt-background p-8 text-basalt-foreground shadow-lg ring-1 ring-basalt-border", t, "data-[state=open]:animate-basalt-dialog-in data-[state=closed]:animate-basalt-dialog-out", n, s[r], i);
+	return e("fixed top-1/2 left-1/2 w-full max-h-[calc(100vh-2rem)] max-w-[calc(100vw-2rem)] origin-center -translate-x-1/2 -translate-y-1/2 overflow-y-auto rounded-basalt-lg p-8 text-basalt-foreground shadow-lg ring-1 ring-basalt-border", t, "data-[state=open]:animate-basalt-dialog-in data-[state=closed]:animate-basalt-dialog-out", n, s[r], i);
 }
 var u = o.Root, d = o.Trigger, f = o.Close, p = o.Portal, m = r.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ i(o.Overlay, {
 	ref: n,
@@ -25,6 +25,7 @@ var u = o.Root, d = o.Trigger, f = o.Close, p = o.Portal, m = r.forwardRef(({ cl
 m.displayName = o.Overlay.displayName;
 var h = r.forwardRef(({ className: e, children: t, size: n = "base", disablePointerDismissal: r = !1, onPointerDownOutside: s, onInteractOutside: c, ...u }, d) => /* @__PURE__ */ a(p, { children: [/* @__PURE__ */ i(m, {}), /* @__PURE__ */ i(o.Content, {
 	ref: d,
+	"data-basalt-surface-root": "",
 	className: l({
 		size: n,
 		className: e

package/dist/components/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","names":[],"sources":["../../src/components/dialog.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 DIALOG_SIZES = {\n\tsm: \"sm:w-72\",\n\tbase: \"sm:w-96\",\n\tlg: \"sm:w-[32rem]\",\n\txl: \"sm:w-[48rem]\",\n} as const;\n\nexport type DialogSize = keyof typeof DIALOG_SIZES;\n\nexport function dialogOverlayClass(className?: string) {\n\treturn cn(\n\t\t\"fixed inset-0 bg-black/40 backdrop-blur-md\",\n\t\tOVERLAY_LAYER,\n\t\t\"data-[state=open]:animate-basalt-overlay-in data-[state=closed]:animate-basalt-overlay-out\",\n\t\tOVERLAY_MOTION,\n\t\tclassName,\n\t);\n}\n\nexport function dialogPanelClass({\n\tsize = \"base\",\n\tclassName,\n}: {\n\tsize?: DialogSize;\n\tclassName?: string;\n} = {}) {\n\treturn cn(\n\t\t\"fixed top-1/2 left-1/2 w-full max-h-[calc(100vh-2rem)] max-w-[calc(100vw-2rem)] origin-center -translate-x-1/2 -translate-y-1/2 overflow-y-auto rounded-basalt-lg bg-basalt-background p-8 text-basalt-foreground shadow-lg ring-1 ring-basalt-border\",\n\t\tOVERLAY_LAYER,\n\t\t\"data-[state=open]:animate-basalt-dialog-in data-[state=closed]:animate-basalt-dialog-out\",\n\t\tOVERLAY_MOTION,\n\t\tDIALOG_SIZES[size],\n\t\tclassName,\n\t);\n}\n\nexport const Dialog = DialogPrimitive.Root;\nexport const DialogTrigger = DialogPrimitive.Trigger;\nexport const DialogClose = DialogPrimitive.Close;\nexport const DialogPortal = DialogPrimitive.Portal;\n\nexport const DialogOverlay = React.forwardRef<\n\tReact.ElementRef<typeof DialogPrimitive.Overlay>,\n\tReact.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Overlay ref={ref} className={dialogOverlayClass(className)} {...props} />\n));\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName;\n\nexport type DialogContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {\n\tsize?: DialogSize;\n\tdisablePointerDismissal?: boolean;\n};\n\nexport const DialogContent = React.forwardRef<\n\tReact.ElementRef<typeof DialogPrimitive.Content>,\n\tDialogContentProps\n>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tchildren,\n\t\t\tsize = \"base\",\n\t\t\tdisablePointerDismissal = false,\n\t\t\tonPointerDownOutside,\n\t\t\tonInteractOutside,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => (\n\t\t<DialogPortal>\n\t\t\t<DialogOverlay />\n\t\t\t<DialogPrimitive.Content\n\t\t\t\tref={ref}\n\t\t\t\tclassName={dialogPanelClass({ size, className })}\n\t\t\t\tonPointerDownOutside={(event) => {\n\t\t\t\t\tif (disablePointerDismissal) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t}\n\t\t\t\t\tonPointerDownOutside?.(event);\n\t\t\t\t}}\n\t\t\t\tonInteractOutside={(event) => {\n\t\t\t\t\tif (disablePointerDismissal) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t}\n\t\t\t\t\tonInteractOutside?.(event);\n\t\t\t\t}}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</DialogPrimitive.Content>\n\t\t</DialogPortal>\n\t),\n);\nDialogContent.displayName = DialogPrimitive.Content.displayName;\n\nexport const DialogTitle = 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-2xl font-semibold tracking-tight\", className)}\n\t\t{...props}\n\t/>\n));\nDialogTitle.displayName = DialogPrimitive.Title.displayName;\n\nexport const DialogDescription = 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-base text-basalt-muted-foreground\", className)}\n\t\t{...props}\n\t/>\n));\nDialogDescription.displayName = DialogPrimitive.Description.displayName;\n\nexport const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n\t<div className={cn(\"flex flex-col space-y-1.5 text-left\", className)} {...props} />\n);\nDialogHeader.displayName = \"DialogHeader\";\n\nexport const DialogFooter = ({ 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);\nDialogFooter.displayName = \"DialogFooter\";\n"],"mappings":";;;;;;;AAKA,IAAa,IAAe;CAC3B,IAAI;CACJ,MAAM;CACN,IAAI;CACJ,IAAI;AACL;AAIA,SAAgB,EAAmB,GAAoB;CACtD,OAAO,EACN,8CACA,GACA,8FACA,GACA,CACD;AACD;AAEA,SAAgB,EAAiB,EAChC,UAAO,QACP,iBAIG,CAAC,GAAG;CACP,OAAO,EACN,yPACA,GACA,4FACA,GACA,EAAa,IACb,CACD;AACD;AAEA,IAAa,IAAS,EAAgB,MACzB,IAAgB,EAAgB,SAChC,IAAc,EAAgB,OAC9B,IAAe,EAAgB,QAE/B,IAAgB,EAAM,YAGhC,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAgB,SAAjB;CAA8B;CAAK,WAAW,EAAmB,CAAS;CAAG,GAAI;AAAQ,CAAA,CACzF;AACD,EAAc,cAAc,EAAgB,QAAQ;AAOpD,IAAa,IAAgB,EAAM,YAKjC,EACC,cACA,aACA,UAAO,QACP,6BAA0B,IAC1B,yBACA,sBACA,GAAG,KAEJ,MAEA,kBAAC,GAAD,EAAA,UAAA,CACC,kBAAC,GAAD,CAAgB,CAAA,GAChB,kBAAC,EAAgB,SAAjB;CACM;CACL,WAAW,EAAiB;EAAE;EAAM;CAAU,CAAC;CAC/C,uBAAuB,MAAU;EAIhC,AAHI,KACH,EAAM,eAAe,GAEtB,IAAuB,CAAK;CAC7B;CACA,oBAAoB,MAAU;EAI7B,AAHI,KACH,EAAM,eAAe,GAEtB,IAAoB,CAAK;CAC1B;CACA,GAAI;CAEH;AACuB,CAAA,CACZ,EAAA,CAAA,CAEhB;AACA,EAAc,cAAc,EAAgB,QAAQ;AAEpD,IAAa,IAAc,EAAM,YAG9B,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAgB,OAAjB;CACM;CACL,WAAW,EAAG,yCAAyC,CAAS;CAChE,GAAI;AACJ,CAAA,CACD;AACD,EAAY,cAAc,EAAgB,MAAM;AAEhD,IAAa,IAAoB,EAAM,YAGpC,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAgB,aAAjB;CACM;CACL,WAAW,EAAG,0CAA0C,CAAS;CACjE,GAAI;AACJ,CAAA,CACD;AACD,EAAkB,cAAc,EAAgB,YAAY;AAE5D,IAAa,KAAgB,EAAE,cAAW,GAAG,QAC5C,kBAAC,OAAD;CAAK,WAAW,EAAG,uCAAuC,CAAS;CAAG,GAAI;AAAQ,CAAA;AAEnF,EAAa,cAAc;AAE3B,IAAa,KAAgB,EAAE,cAAW,GAAG,QAC5C,kBAAC,OAAD;CACC,WAAW,EAAG,0DAA0D,CAAS;CACjF,GAAI;AACJ,CAAA;AAEF,EAAa,cAAc"}
+{"version":3,"file":"dialog.js","names":[],"sources":["../../src/components/dialog.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 DIALOG_SIZES = {\n\tsm: \"sm:w-72\",\n\tbase: \"sm:w-96\",\n\tlg: \"sm:w-[32rem]\",\n\txl: \"sm:w-[48rem]\",\n} as const;\n\nexport type DialogSize = keyof typeof DIALOG_SIZES;\n\nexport function dialogOverlayClass(className?: string) {\n\treturn cn(\n\t\t\"fixed inset-0 bg-black/40 backdrop-blur-md\",\n\t\tOVERLAY_LAYER,\n\t\t\"data-[state=open]:animate-basalt-overlay-in data-[state=closed]:animate-basalt-overlay-out\",\n\t\tOVERLAY_MOTION,\n\t\tclassName,\n\t);\n}\n\nexport function dialogPanelClass({\n\tsize = \"base\",\n\tclassName,\n}: {\n\tsize?: DialogSize;\n\tclassName?: string;\n} = {}) {\n\treturn cn(\n\t\t\"fixed top-1/2 left-1/2 w-full max-h-[calc(100vh-2rem)] max-w-[calc(100vw-2rem)] origin-center -translate-x-1/2 -translate-y-1/2 overflow-y-auto rounded-basalt-lg p-8 text-basalt-foreground shadow-lg ring-1 ring-basalt-border\",\n\t\tOVERLAY_LAYER,\n\t\t\"data-[state=open]:animate-basalt-dialog-in data-[state=closed]:animate-basalt-dialog-out\",\n\t\tOVERLAY_MOTION,\n\t\tDIALOG_SIZES[size],\n\t\tclassName,\n\t);\n}\n\nexport const Dialog = DialogPrimitive.Root;\nexport const DialogTrigger = DialogPrimitive.Trigger;\nexport const DialogClose = DialogPrimitive.Close;\nexport const DialogPortal = DialogPrimitive.Portal;\n\nexport const DialogOverlay = React.forwardRef<\n\tReact.ElementRef<typeof DialogPrimitive.Overlay>,\n\tReact.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Overlay ref={ref} className={dialogOverlayClass(className)} {...props} />\n));\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName;\n\nexport type DialogContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {\n\tsize?: DialogSize;\n\tdisablePointerDismissal?: boolean;\n};\n\nexport const DialogContent = React.forwardRef<\n\tReact.ElementRef<typeof DialogPrimitive.Content>,\n\tDialogContentProps\n>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tchildren,\n\t\t\tsize = \"base\",\n\t\t\tdisablePointerDismissal = false,\n\t\t\tonPointerDownOutside,\n\t\t\tonInteractOutside,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => (\n\t\t<DialogPortal>\n\t\t\t<DialogOverlay />\n\t\t\t<DialogPrimitive.Content\n\t\t\t\tref={ref}\n\t\t\t\tdata-basalt-surface-root=\"\"\n\t\t\t\tclassName={dialogPanelClass({ size, className })}\n\t\t\t\tonPointerDownOutside={(event) => {\n\t\t\t\t\tif (disablePointerDismissal) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t}\n\t\t\t\t\tonPointerDownOutside?.(event);\n\t\t\t\t}}\n\t\t\t\tonInteractOutside={(event) => {\n\t\t\t\t\tif (disablePointerDismissal) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t}\n\t\t\t\t\tonInteractOutside?.(event);\n\t\t\t\t}}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</DialogPrimitive.Content>\n\t\t</DialogPortal>\n\t),\n);\nDialogContent.displayName = DialogPrimitive.Content.displayName;\n\nexport const DialogTitle = 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-2xl font-semibold tracking-tight\", className)}\n\t\t{...props}\n\t/>\n));\nDialogTitle.displayName = DialogPrimitive.Title.displayName;\n\nexport const DialogDescription = 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-base text-basalt-muted-foreground\", className)}\n\t\t{...props}\n\t/>\n));\nDialogDescription.displayName = DialogPrimitive.Description.displayName;\n\nexport const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n\t<div className={cn(\"flex flex-col space-y-1.5 text-left\", className)} {...props} />\n);\nDialogHeader.displayName = \"DialogHeader\";\n\nexport const DialogFooter = ({ 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);\nDialogFooter.displayName = \"DialogFooter\";\n"],"mappings":";;;;;;;AAKA,IAAa,IAAe;CAC3B,IAAI;CACJ,MAAM;CACN,IAAI;CACJ,IAAI;AACL;AAIA,SAAgB,EAAmB,GAAoB;CACtD,OAAO,EACN,8CACA,GACA,8FACA,GACA,CACD;AACD;AAEA,SAAgB,EAAiB,EAChC,UAAO,QACP,iBAIG,CAAC,GAAG;CACP,OAAO,EACN,oOACA,GACA,4FACA,GACA,EAAa,IACb,CACD;AACD;AAEA,IAAa,IAAS,EAAgB,MACzB,IAAgB,EAAgB,SAChC,IAAc,EAAgB,OAC9B,IAAe,EAAgB,QAE/B,IAAgB,EAAM,YAGhC,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAgB,SAAjB;CAA8B;CAAK,WAAW,EAAmB,CAAS;CAAG,GAAI;AAAQ,CAAA,CACzF;AACD,EAAc,cAAc,EAAgB,QAAQ;AAOpD,IAAa,IAAgB,EAAM,YAKjC,EACC,cACA,aACA,UAAO,QACP,6BAA0B,IAC1B,yBACA,sBACA,GAAG,KAEJ,MAEA,kBAAC,GAAD,EAAA,UAAA,CACC,kBAAC,GAAD,CAAgB,CAAA,GAChB,kBAAC,EAAgB,SAAjB;CACM;CACL,4BAAyB;CACzB,WAAW,EAAiB;EAAE;EAAM;CAAU,CAAC;CAC/C,uBAAuB,MAAU;EAIhC,AAHI,KACH,EAAM,eAAe,GAEtB,IAAuB,CAAK;CAC7B;CACA,oBAAoB,MAAU;EAI7B,AAHI,KACH,EAAM,eAAe,GAEtB,IAAoB,CAAK;CAC1B;CACA,GAAI;CAEH;AACuB,CAAA,CACZ,EAAA,CAAA,CAEhB;AACA,EAAc,cAAc,EAAgB,QAAQ;AAEpD,IAAa,IAAc,EAAM,YAG9B,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAgB,OAAjB;CACM;CACL,WAAW,EAAG,yCAAyC,CAAS;CAChE,GAAI;AACJ,CAAA,CACD;AACD,EAAY,cAAc,EAAgB,MAAM;AAEhD,IAAa,IAAoB,EAAM,YAGpC,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAgB,aAAjB;CACM;CACL,WAAW,EAAG,0CAA0C,CAAS;CACjE,GAAI;AACJ,CAAA,CACD;AACD,EAAkB,cAAc,EAAgB,YAAY;AAE5D,IAAa,KAAgB,EAAE,cAAW,GAAG,QAC5C,kBAAC,OAAD;CAAK,WAAW,EAAG,uCAAuC,CAAS;CAAG,GAAI;AAAQ,CAAA;AAEnF,EAAa,cAAc;AAE3B,IAAa,KAAgB,EAAE,cAAW,GAAG,QAC5C,kBAAC,OAAD;CACC,WAAW,EAAG,0DAA0D,CAAS;CACjF,GAAI;AACJ,CAAA;AAEF,EAAa,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":";;;;;;;AAcA,IAAM,IAAe,4DACf,IAAkB;CACvB,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;AACL;AAmDA,SAAS,EAAU,GAAmE;CACrF,OAAO,EAAe,CAAK;AAC5B;AAEA,SAAS,EAAU,GAA8B;CAChD,OAAO,EAAM;AACd;AAEA,SAAS,EAAQ,GAAqB,GAA4C;CACjF,OAAO,EAAS,QAAQ,CAAQ,CAAC,CAAC,MAAM,MAClC,EAAU,CAAK,IAGhB,EAAM,EAAU,CAAK,CAAC,IAClB,KAEJ,EAAU,CAAK,MAAM,KACjB,EAAQ,EAAM,MAAM,UAAU,CAAK,IANnC,EASR;AACF;AAEA,SAAS,EAAgB,GAAqB,GAA6B;CAI1E,OAHK,IAGE,EAAS,IAAI,IAAW,MAAU;EACxC,IAAI,CAAC,EAAU,CAAK,GACnB,OAAO;EAER,IAAI,EAAU,CAAK,MAAM,GACxB,OAAO,EAAa,GAAO,EAC1B,UAAU,EAAgB,EAAM,MAAM,UAAU,CAAO,EACxD,CAAC;EAEF,IAAI,EAAU,CAAK,MAAM,KAAmB,EAAU,CAAK,MAAM,GAAoB;GACpF,IAAM,IAAQ;GACd,OAAO,EAAa,GAAO,EAC1B,WAAW,EAAG,EAAM,MAAM,WAAW,+BAA+B,EACrE,CAAC;EACF;EACA,OAAO;CACR,CAAC,IAlBO;AAmBT;AAEA,IAAM,IAAgB,GACpB,EAAE,cAAW,aAAU,cAAW,IAAO,aAAU,MAAM,GAAG,KAAS,MAAQ;CAC7E,IAAM,IAAa,EAAQ,IAAW,MAAS,EAAiB,IAAI,CAAI,CAAC,GACnE,IAAU,EACf,IACC,MAAS,MAAS,KAAiB,MAAS,CAC9C,GAEM,IADU,EAAQ,IAAW,MAAS,MAAS,CAC/B,KAAW,CAAC;CAClC,OACC,kBAAC,OAAD;EACM;EACL,uBAAoB;EACpB,WAAW,EACV,GACA,IAAa,yBAAyB,EAAgB,IACtD,KAAY,gCACZ,CACD;EACA,GAAI;EAEH,UAAA,EAAgB,GAAU,CAAa;CACpC,CAAA;AAEP,CACD;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,EAAc,EAAE,cAAW,GAAG,KAAgC;CACtE,OAAO,kBAAC,OAAD;EAAK,WAAW,EAAG,eAAe,CAAS;EAAG,GAAI;CAAQ,CAAA;AAClE;AACA,EAAc,cAAc;AAE5B,SAAS,EAAc,EAAE,cAAW,cAAW,IAAO,GAAG,KAA6B;CACrF,OACC,kBAAC,OAAD;EACC,uBAAoB;EACpB,WAAW,EAAG,eAAe,KAAY,gCAAgC,CAAS;EAClF,GAAI;CACJ,CAAA;AAEH;AACA,EAAc,cAAc;AAE5B,SAAS,EAAiB,GAA2B;CACpD,OAAO,kBAAC,GAAD,EAAe,GAAI,EAAQ,CAAA;AACnC;AACA,EAAiB,cAAc;AAE/B,SAAS,EAAmB,GAA8B;CACzD,OAAO,kBAAC,GAAD,EAAiB,GAAI,EAAQ,CAAA;AACrC;AACA,EAAmB,cAAc;AAEjC,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,IAAM,oBAAmB,IAAI,IAAa;CACzC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACD,CAAC,GAEY,IAAY,OAAO,OAAO,GAAe;CACrD,SAAS;CACT,WAAW;CACX,QAAQ;CACR,MAAM;CACN,MAAM;CACN,QAAQ;CACR,SAAS;CACT,OAAO;AACR,CAAC"}

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;