@burtson-labs/ui 0.14.0 → 0.15.0

package/dist/components/sheet.js

@@ -1,7 +1,8 @@
 "use client";
 import { cn } from "../lib/utils.js";
 import { Close as DialogClose, Content as DialogContent, Description as DialogDescription, Dialog, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from "../primitives/vendor/radix/react-dialog/dialog.js";
-import "react";
+import { overlayClasses, overlayCloseClasses } from "./dialog.js";
+import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import X from "@burtson-labs/icons/react/x";
 //#region src/components/sheet.tsx
@@ -11,31 +12,36 @@ function Sheet(props) {
 		...props
 	});
 }
-function SheetTrigger(props) {
+var SheetTrigger = React.forwardRef(function SheetTrigger(props, ref) {
 	return /* @__PURE__ */ jsx(DialogTrigger, {
+		ref,
 		"data-slot": "sheet-trigger",
 		...props
 	});
-}
-function SheetClose(props) {
+});
+var SheetClose = React.forwardRef(function SheetClose(props, ref) {
 	return /* @__PURE__ */ jsx(DialogClose, {
+		ref,
 		"data-slot": "sheet-close",
 		...props
 	});
-}
+});
 var sideClasses = {
 	right: "inset-y-0 right-0 h-full w-3/4 border-l [--bl-sheet-x:100%] sm:max-w-sm",
 	left: "inset-y-0 left-0 h-full w-3/4 border-r [--bl-sheet-x:-100%] sm:max-w-sm",
 	top: "inset-x-0 top-0 max-h-[85dvh] rounded-b-xl border-b pt-[env(safe-area-inset-top)] [--bl-sheet-x:0] [--bl-sheet-y:-100%]",
 	bottom: "inset-x-0 bottom-0 max-h-[85dvh] rounded-t-xl border-t pb-[env(safe-area-inset-bottom)] [--bl-sheet-x:0] [--bl-sheet-y:100%]"
 };
-function SheetContent({ className, children, side = "right", handle = side === "bottom", showCloseButton = true, ...props }) {
+/** A panel from an edge: 16px radius on the free corners, elevation 5. */
+var SheetContent = React.forwardRef(function SheetContent({ className, children, side = "right", handle = side === "bottom", showCloseButton = true, ...props }, ref) {
 	return /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogOverlay, {
 		"data-slot": "sheet-overlay",
-		className: "fixed inset-0 z-50 bg-black/55 backdrop-blur-[3px] data-[state=closed]:animate-fade-out data-[state=open]:animate-fade-in"
+		className: overlayClasses
 	}), /* @__PURE__ */ jsxs(DialogContent, {
+		ref,
 		"data-slot": "sheet-content",
-		className: cn("fixed z-50 max-h-dvh overflow-y-auto overscroll-contain flex flex-col gap-4 border-border-strong bg-surface-raised text-foreground shadow-[0_24px_80px_rgb(0_0_0_/_0.28)] outline-none data-[state=closed]:animate-sheet-out data-[state=open]:animate-sheet-in", sideClasses[side], className),
+		"data-side": side,
+		className: cn("fixed z-50 max-h-dvh overflow-y-auto overscroll-contain flex flex-col gap-4 border-border-strong bg-surface-raised text-foreground shadow-xl outline-none data-[state=closed]:animate-sheet-out data-[state=open]:animate-sheet-in", sideClasses[side], className),
 		...props,
 		children: [
 			handle && /* @__PURE__ */ jsx("div", {
@@ -45,7 +51,8 @@ function SheetContent({ className, children, side = "right", handle = side === "
 			}),
 			children,
 			showCloseButton && /* @__PURE__ */ jsxs(DialogClose, {
-				className: cn("absolute right-3 grid size-8 place-items-center rounded-md text-muted-foreground transition-colors outline-none hover:bg-muted hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/20 pointer-coarse:size-11 [&_svg]:size-4 pointer-coarse:[&_svg]:size-5", side === "top" ? "top-[calc(env(safe-area-inset-top)+0.75rem)]" : "top-3"),
+				"data-slot": "sheet-close",
+				className: cn(overlayCloseClasses, side === "top" && "top-[calc(env(safe-area-inset-top)+0.75rem)] pointer-coarse:top-[calc(env(safe-area-inset-top)+0.5rem)]"),
 				children: [/* @__PURE__ */ jsx(X, { "aria-hidden": true }), /* @__PURE__ */ jsx("span", {
 					className: "sr-only",
 					children: "Close"
@@ -53,35 +60,39 @@ function SheetContent({ className, children, side = "right", handle = side === "
 			})
 		]
 	})] });
-}
-function SheetHeader({ className, ...props }) {
+});
+var SheetHeader = React.forwardRef(function SheetHeader({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("div", {
+		ref,
 		"data-slot": "sheet-header",
-		className: cn("flex flex-col gap-1.5 p-4", className),
+		className: cn("flex flex-col gap-1.5 p-4 pr-12", className),
 		...props
 	});
-}
-function SheetFooter({ className, ...props }) {
+});
+var SheetFooter = React.forwardRef(function SheetFooter({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("div", {
+		ref,
 		"data-slot": "sheet-footer",
 		className: cn("mt-auto flex flex-col gap-2 p-4", className),
 		...props
 	});
-}
-function SheetTitle({ className, ...props }) {
+});
+var SheetTitle = React.forwardRef(function SheetTitle({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(DialogTitle, {
+		ref,
 		"data-slot": "sheet-title",
 		className: cn("text-base font-semibold tracking-[-0.02em] text-foreground", className),
 		...props
 	});
-}
-function SheetDescription({ className, ...props }) {
+});
+var SheetDescription = React.forwardRef(function SheetDescription({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(DialogDescription, {
+		ref,
 		"data-slot": "sheet-description",
-		className: cn("text-sm text-muted-foreground", className),
+		className: cn("text-sm leading-5 text-muted-foreground", className),
 		...props
 	});
-}
+});
 //#endregion
 export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger };
 

package/dist/components/sheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"sheet.js","names":["SheetPrimitive.Root","SheetPrimitive.Trigger","SheetPrimitive.Close","SheetPrimitive.Portal","SheetPrimitive.Overlay","SheetPrimitive.Content","SheetPrimitive.Title","SheetPrimitive.Description"],"sources":["../../src/components/sheet.tsx"],"sourcesContent":["import X from '@burtson-labs/icons/react/x';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\nimport * as SheetPrimitive from '../primitives/vendor/radix/react-dialog';\n\nfunction Sheet(props: React.ComponentProps<typeof SheetPrimitive.Root>) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />;\n}\n\nfunction SheetTrigger(props: React.ComponentProps<typeof SheetPrimitive.Trigger>) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />;\n}\n\nfunction SheetClose(props: React.ComponentProps<typeof SheetPrimitive.Close>) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />;\n}\n\nconst sideClasses = {\n  right: 'inset-y-0 right-0 h-full w-3/4 border-l [--bl-sheet-x:100%] sm:max-w-sm',\n  left: 'inset-y-0 left-0 h-full w-3/4 border-r [--bl-sheet-x:-100%] sm:max-w-sm',\n  // Top and bottom sheets are the mobile drawers. Each keeps clear of the\n  // notch or home indicator on its edge (safe-area insets).\n  top: 'inset-x-0 top-0 max-h-[85dvh] rounded-b-xl border-b pt-[env(safe-area-inset-top)] [--bl-sheet-x:0] [--bl-sheet-y:-100%]',\n  bottom:\n    'inset-x-0 bottom-0 max-h-[85dvh] rounded-t-xl border-t pb-[env(safe-area-inset-bottom)] [--bl-sheet-x:0] [--bl-sheet-y:100%]',\n} as const;\n\nfunction SheetContent({\n  className,\n  children,\n  side = 'right',\n  handle = side === 'bottom',\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Content> & {\n  side?: keyof typeof sideClasses;\n  /**\n   * The X in the corner. Turn it off when the sheet draws its own header\n   * with a close control (a SheetClose), so there are not two.\n   */\n  showCloseButton?: boolean;\n  /**\n   * A grab bar at the top edge, the cue that this is a drawer. Visual only:\n   * it does not drag; close with the button, Escape or the overlay. On by\n   * default for bottom sheets.\n   */\n  handle?: boolean;\n}) {\n  return (\n    <SheetPrimitive.Portal>\n      <SheetPrimitive.Overlay\n        data-slot=\"sheet-overlay\"\n        className=\"fixed inset-0 z-50 bg-black/55 backdrop-blur-[3px] data-[state=closed]:animate-fade-out data-[state=open]:animate-fade-in\"\n      />\n      <SheetPrimitive.Content\n        data-slot=\"sheet-content\"\n        className={cn(\n          'fixed z-50 max-h-dvh overflow-y-auto overscroll-contain flex flex-col gap-4 border-border-strong bg-surface-raised text-foreground shadow-[0_24px_80px_rgb(0_0_0_/_0.28)] outline-none data-[state=closed]:animate-sheet-out data-[state=open]:animate-sheet-in',\n          sideClasses[side],\n          className,\n        )}\n        {...props}\n      >\n        {handle && (\n          <div\n            data-slot=\"sheet-handle\"\n            aria-hidden\n            className=\"mx-auto mt-2 -mb-2 h-1 w-10 shrink-0 rounded-full bg-border-strong\"\n          />\n        )}\n        {children}\n        {/* 44px on touch screens, 32px with a mouse. */}\n        {showCloseButton && (\n          <SheetPrimitive.Close\n            className={cn(\n              'absolute right-3 grid size-8 place-items-center rounded-md text-muted-foreground transition-colors outline-none hover:bg-muted hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/20 pointer-coarse:size-11 [&_svg]:size-4 pointer-coarse:[&_svg]:size-5',\n              side === 'top' ? 'top-[calc(env(safe-area-inset-top)+0.75rem)]' : 'top-3',\n            )}\n          >\n            <X aria-hidden />\n            <span className=\"sr-only\">Close</span>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Content>\n    </SheetPrimitive.Portal>\n  );\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn('flex flex-col gap-1.5 p-4', className)}\n      {...props}\n    />\n  );\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn('mt-auto flex flex-col gap-2 p-4', className)}\n      {...props}\n    />\n  );\n}\n\nfunction SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Title>) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn('text-base font-semibold tracking-[-0.02em] text-foreground', className)}\n      {...props}\n    />\n  );\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Description>) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn('text-sm text-muted-foreground', className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n};\n"],"mappings":";;;;;;;AAMA,SAAS,MAAM,OAAyD;CACtE,OAAO,oBAACA,QAAD;EAAqB,aAAU;EAAQ,GAAI;CAAQ,CAAA;AAC5D;AAEA,SAAS,aAAa,OAA4D;CAChF,OAAO,oBAACC,eAAD;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;AAEA,SAAS,WAAW,OAA0D;CAC5E,OAAO,oBAACC,aAAD;EAAsB,aAAU;EAAc,GAAI;CAAQ,CAAA;AACnE;AAEA,IAAM,cAAc;CAClB,OAAO;CACP,MAAM;CAGN,KAAK;CACL,QACE;AACJ;AAEA,SAAS,aAAa,EACpB,WACA,UACA,OAAO,SACP,SAAS,SAAS,UAClB,kBAAkB,MAClB,GAAG,SAcF;CACD,OACE,qBAACC,cAAD,EAAA,UAAA,CACE,oBAACC,eAAD;EACE,aAAU;EACV,WAAU;CACX,CAAA,GACD,qBAACC,eAAD;EACE,aAAU;EACV,WAAW,GACT,mQACA,YAAY,OACZ,SACF;EACA,GAAI;EAPN,UAAA;GASG,UACC,oBAAC,OAAD;IACE,aAAU;IACV,eAAA;IACA,WAAU;GACX,CAAA;GAEF;GAEA,mBACC,qBAACH,aAAD;IACE,WAAW,GACT,gRACA,SAAS,QAAQ,iDAAiD,OACpE;IAJF,UAAA,CAME,oBAAC,GAAD,EAAG,eAAA,KAAa,CAAA,GAChB,oBAAC,QAAD;KAAM,WAAU;KAAU,UAAA;IAAW,CAAA,CACjB;;EAEF;CACH,CAAA,CAAA,EAAA,CAAA;AAE3B;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,6BAA6B,SAAS;EACpD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,mCAAmC,SAAS;EAC1D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,SAA4D;CAC9F,OACE,oBAACI,aAAD;EACE,aAAU;EACV,WAAW,GAAG,8DAA8D,SAAS;EACrF,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,iBAAiB,EACxB,WACA,GAAG,SACuD;CAC1D,OACE,oBAACC,mBAAD;EACE,aAAU;EACV,WAAW,GAAG,iCAAiC,SAAS;EACxD,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"sheet.js","names":["SheetPrimitive.Root","SheetPrimitive.Trigger","SheetPrimitive.Close","SheetPrimitive.Portal","SheetPrimitive.Overlay","SheetPrimitive.Content","SheetPrimitive.Title","SheetPrimitive.Description"],"sources":["../../src/components/sheet.tsx"],"sourcesContent":["import X from '@burtson-labs/icons/react/x';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\nimport * as SheetPrimitive from '../primitives/vendor/radix/react-dialog';\n\nimport { overlayClasses, overlayCloseClasses } from './dialog';\n\nfunction Sheet(props: React.ComponentProps<typeof SheetPrimitive.Root>) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />;\n}\n\nconst SheetTrigger = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<typeof SheetPrimitive.Trigger>\n>(function SheetTrigger(props, ref) {\n  return <SheetPrimitive.Trigger ref={ref} data-slot=\"sheet-trigger\" {...props} />;\n});\n\nconst SheetClose = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<typeof SheetPrimitive.Close>\n>(function SheetClose(props, ref) {\n  return <SheetPrimitive.Close ref={ref} data-slot=\"sheet-close\" {...props} />;\n});\n\nconst sideClasses = {\n  right: 'inset-y-0 right-0 h-full w-3/4 border-l [--bl-sheet-x:100%] sm:max-w-sm',\n  left: 'inset-y-0 left-0 h-full w-3/4 border-r [--bl-sheet-x:-100%] sm:max-w-sm',\n  // Top and bottom sheets are the mobile drawers. Each keeps clear of the\n  // notch or home indicator on its edge (safe-area insets).\n  top: 'inset-x-0 top-0 max-h-[85dvh] rounded-b-xl border-b pt-[env(safe-area-inset-top)] [--bl-sheet-x:0] [--bl-sheet-y:-100%]',\n  bottom:\n    'inset-x-0 bottom-0 max-h-[85dvh] rounded-t-xl border-t pb-[env(safe-area-inset-bottom)] [--bl-sheet-x:0] [--bl-sheet-y:100%]',\n} as const;\n\nexport interface SheetContentProps extends React.ComponentProps<typeof SheetPrimitive.Content> {\n  side?: keyof typeof sideClasses;\n  /**\n   * The X in the corner. Turn it off when the sheet draws its own header\n   * with a close control (a SheetClose), so there are not two.\n   */\n  showCloseButton?: boolean;\n  /**\n   * A grab bar at the top edge, the cue that this is a drawer. Visual only:\n   * it does not drag; close with the button, Escape or the overlay. On by\n   * default for bottom sheets.\n   */\n  handle?: boolean;\n}\n\n/** A panel from an edge: 16px radius on the free corners, elevation 5. */\nconst SheetContent = React.forwardRef<HTMLDivElement, SheetContentProps>(function SheetContent(\n  {\n    className,\n    children,\n    side = 'right',\n    handle = side === 'bottom',\n    showCloseButton = true,\n    ...props\n  },\n  ref,\n) {\n  return (\n    <SheetPrimitive.Portal>\n      <SheetPrimitive.Overlay data-slot=\"sheet-overlay\" className={overlayClasses} />\n      <SheetPrimitive.Content\n        ref={ref}\n        data-slot=\"sheet-content\"\n        data-side={side}\n        className={cn(\n          'fixed z-50 max-h-dvh overflow-y-auto overscroll-contain flex flex-col gap-4 border-border-strong bg-surface-raised text-foreground shadow-xl outline-none data-[state=closed]:animate-sheet-out data-[state=open]:animate-sheet-in',\n          sideClasses[side],\n          className,\n        )}\n        {...props}\n      >\n        {handle && (\n          <div\n            data-slot=\"sheet-handle\"\n            aria-hidden\n            className=\"mx-auto mt-2 -mb-2 h-1 w-10 shrink-0 rounded-full bg-border-strong\"\n          />\n        )}\n        {children}\n        {showCloseButton && (\n          <SheetPrimitive.Close\n            data-slot=\"sheet-close\"\n            className={cn(\n              overlayCloseClasses,\n              side === 'top' &&\n                'top-[calc(env(safe-area-inset-top)+0.75rem)] pointer-coarse:top-[calc(env(safe-area-inset-top)+0.5rem)]',\n            )}\n          >\n            <X aria-hidden />\n            <span className=\"sr-only\">Close</span>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Content>\n    </SheetPrimitive.Portal>\n  );\n});\n\nconst SheetHeader = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(\n  function SheetHeader({ className, ...props }, ref) {\n    return (\n      <div\n        ref={ref}\n        data-slot=\"sheet-header\"\n        className={cn('flex flex-col gap-1.5 p-4 pr-12', className)}\n        {...props}\n      />\n    );\n  },\n);\n\nconst SheetFooter = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(\n  function SheetFooter({ className, ...props }, ref) {\n    return (\n      <div\n        ref={ref}\n        data-slot=\"sheet-footer\"\n        className={cn('mt-auto flex flex-col gap-2 p-4', className)}\n        {...props}\n      />\n    );\n  },\n);\n\nconst SheetTitle = React.forwardRef<\n  HTMLHeadingElement,\n  React.ComponentProps<typeof SheetPrimitive.Title>\n>(function SheetTitle({ className, ...props }, ref) {\n  return (\n    <SheetPrimitive.Title\n      ref={ref}\n      data-slot=\"sheet-title\"\n      className={cn('text-base font-semibold tracking-[-0.02em] text-foreground', className)}\n      {...props}\n    />\n  );\n});\n\nconst SheetDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.ComponentProps<typeof SheetPrimitive.Description>\n>(function SheetDescription({ className, ...props }, ref) {\n  return (\n    <SheetPrimitive.Description\n      ref={ref}\n      data-slot=\"sheet-description\"\n      className={cn('text-sm leading-5 text-muted-foreground', className)}\n      {...props}\n    />\n  );\n});\n\nexport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n};\n"],"mappings":";;;;;;;;AAQA,SAAS,MAAM,OAAyD;CACtE,OAAO,oBAACA,QAAD;EAAqB,aAAU;EAAQ,GAAI;CAAQ,CAAA;AAC5D;AAEA,IAAM,eAAe,MAAM,WAGzB,SAAS,aAAa,OAAO,KAAK;CAClC,OAAO,oBAACC,eAAD;EAA6B;EAAK,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACjF,CAAC;AAED,IAAM,aAAa,MAAM,WAGvB,SAAS,WAAW,OAAO,KAAK;CAChC,OAAO,oBAACC,aAAD;EAA2B;EAAK,aAAU;EAAc,GAAI;CAAQ,CAAA;AAC7E,CAAC;AAED,IAAM,cAAc;CAClB,OAAO;CACP,MAAM;CAGN,KAAK;CACL,QACE;AACJ;;AAkBA,IAAM,eAAe,MAAM,WAA8C,SAAS,aAChF,EACE,WACA,UACA,OAAO,SACP,SAAS,SAAS,UAClB,kBAAkB,MAClB,GAAG,SAEL,KACA;CACA,OACE,qBAACC,cAAD,EAAA,UAAA,CACE,oBAACC,eAAD;EAAwB,aAAU;EAAgB,WAAW;CAAiB,CAAA,GAC9E,qBAACC,eAAD;EACO;EACL,aAAU;EACV,aAAW;EACX,WAAW,GACT,sOACA,YAAY,OACZ,SACF;EACA,GAAI;EATN,UAAA;GAWG,UACC,oBAAC,OAAD;IACE,aAAU;IACV,eAAA;IACA,WAAU;GACX,CAAA;GAEF;GACA,mBACC,qBAACH,aAAD;IACE,aAAU;IACV,WAAW,GACT,qBACA,SAAS,SACP,yGACJ;IANF,UAAA,CAQE,oBAAC,GAAD,EAAG,eAAA,KAAa,CAAA,GAChB,oBAAC,QAAD;KAAM,WAAU;KAAU,UAAA;IAAW,CAAA,CACjB;;EAEF;CACH,CAAA,CAAA,EAAA,CAAA;AAE3B,CAAC;AAED,IAAM,cAAc,MAAM,WACxB,SAAS,YAAY,EAAE,WAAW,GAAG,SAAS,KAAK;CACjD,OACE,oBAAC,OAAD;EACO;EACL,aAAU;EACV,WAAW,GAAG,mCAAmC,SAAS;EAC1D,GAAI;CACL,CAAA;AAEL,CACF;AAEA,IAAM,cAAc,MAAM,WACxB,SAAS,YAAY,EAAE,WAAW,GAAG,SAAS,KAAK;CACjD,OACE,oBAAC,OAAD;EACO;EACL,aAAU;EACV,WAAW,GAAG,mCAAmC,SAAS;EAC1D,GAAI;CACL,CAAA;AAEL,CACF;AAEA,IAAM,aAAa,MAAM,WAGvB,SAAS,WAAW,EAAE,WAAW,GAAG,SAAS,KAAK;CAClD,OACE,oBAACI,aAAD;EACO;EACL,aAAU;EACV,WAAW,GAAG,8DAA8D,SAAS;EACrF,GAAI;CACL,CAAA;AAEL,CAAC;AAED,IAAM,mBAAmB,MAAM,WAG7B,SAAS,iBAAiB,EAAE,WAAW,GAAG,SAAS,KAAK;CACxD,OACE,oBAACC,mBAAD;EACO;EACL,aAAU;EACV,WAAW,GAAG,2CAA2C,SAAS;EAClE,GAAI;CACL,CAAA;AAEL,CAAC"}

package/dist/components/skeleton.d.ts

@@ -1,3 +1,4 @@
 import * as React from 'react';
-declare function Skeleton({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+/** A placeholder block. Give it the size of what it stands in for; hidden from screen readers. */
+declare const Skeleton: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { Skeleton };

package/dist/components/skeleton.js

@@ -1,16 +1,18 @@
 "use client";
 import { cn } from "../lib/utils.js";
-import "react";
+import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/skeleton.tsx
-function Skeleton({ className, ...props }) {
+/** A placeholder block. Give it the size of what it stands in for; hidden from screen readers. */
+var Skeleton = React.forwardRef(function Skeleton({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("div", {
+		ref,
 		"data-slot": "skeleton",
 		"aria-hidden": true,
-		className: cn("animate-pulse rounded-md bg-foreground/[0.06]", className),
+		className: cn("animate-pulse rounded-md bg-foreground/[0.08]", className),
 		...props
 	});
-}
+});
 //#endregion
 export { Skeleton };
 

package/dist/components/skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.js","names":[],"sources":["../../src/components/skeleton.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nfunction Skeleton({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"skeleton\"\n      aria-hidden\n      className={cn('animate-pulse rounded-md bg-foreground/[0.06]', className)}\n      {...props}\n    />\n  );\n}\n\nexport { Skeleton };\n"],"mappings":";;;;;AAIA,SAAS,SAAS,EAAE,WAAW,GAAG,SAAsC;CACtE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,eAAA;EACA,WAAW,GAAG,iDAAiD,SAAS;EACxE,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"skeleton.js","names":[],"sources":["../../src/components/skeleton.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\n/** A placeholder block. Give it the size of what it stands in for; hidden from screen readers. */\nconst Skeleton = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(function Skeleton(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      data-slot=\"skeleton\"\n      aria-hidden\n      className={cn('animate-pulse rounded-md bg-foreground/[0.08]', className)}\n      {...props}\n    />\n  );\n});\n\nexport { Skeleton };\n"],"mappings":";;;;;;AAKA,IAAM,WAAW,MAAM,WAAwD,SAAS,SACtF,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAAC,OAAD;EACO;EACL,aAAU;EACV,eAAA;EACA,WAAW,GAAG,iDAAiD,SAAS;EACxE,GAAI;CACL,CAAA;AAEL,CAAC"}

package/dist/components/slider.d.ts

@@ -1,15 +1,19 @@
 import * as React from 'react';
-export interface SliderProps extends Omit<React.ComponentProps<'input'>, 'type' | 'value' | 'onChange'> {
-    value: number;
-    onValueChange: (value: number) => void;
+export interface SliderProps extends Omit<React.ComponentProps<'input'>, 'type' | 'value' | 'defaultValue' | 'onChange'> {
+    /** Controlled value. Leave out for an uncontrolled slider. */
+    value?: number;
+    /** The starting value when uncontrolled. */
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
     min?: number;
     max?: number;
     step?: number;
 }
 /**
  * A single-value range slider on the native input, so keyboard, touch and
- * screen readers work without extra code. Pass `aria-valuetext` when the raw
- * number isn't meaningful ("45% change").
+ * screen readers work without extra code. The track is 6px; the thumb 16px,
+ * with the whole 44px-tall input as its target on touch screens. Pass
+ * `aria-valuetext` when the raw number isn't meaningful ("45% change").
  */
-declare function Slider({ className, value, onValueChange, min, max, step, style, ...props }: SliderProps): React.JSX.Element;
+declare const Slider: React.ForwardRefExoticComponent<Omit<SliderProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export { Slider };

package/dist/components/slider.js

@@ -1,31 +1,39 @@
 "use client";
 import { cn } from "../lib/utils.js";
-import "react";
+import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/slider.tsx
 /**
 * A single-value range slider on the native input, so keyboard, touch and
-* screen readers work without extra code. Pass `aria-valuetext` when the raw
-* number isn't meaningful ("45% change").
+* screen readers work without extra code. The track is 6px; the thumb 16px,
+* with the whole 44px-tall input as its target on touch screens. Pass
+* `aria-valuetext` when the raw number isn't meaningful ("45% change").
 */
-function Slider({ className, value, onValueChange, min = 0, max = 100, step = 1, style, ...props }) {
+var Slider = React.forwardRef(function Slider({ className, value: valueProp, defaultValue, onValueChange, min = 0, max = 100, step = 1, style, ...props }, ref) {
+	const [own, setOwn] = React.useState(defaultValue ?? min);
+	const value = valueProp ?? own;
 	const percent = max > min ? Math.min(100, Math.max(0, (value - min) / (max - min) * 100)) : 0;
 	return /* @__PURE__ */ jsx("input", {
+		ref,
 		type: "range",
 		"data-slot": "slider",
 		min,
 		max,
 		step,
 		value,
-		onChange: (event) => onValueChange(Number(event.target.value)),
+		onChange: (event) => {
+			const next = Number(event.target.value);
+			if (valueProp === void 0) setOwn(next);
+			onValueChange?.(next);
+		},
 		style: {
 			...style,
 			["--bl-slider-fill"]: `${percent}%`
 		},
-		className: cn("h-5 w-full min-w-0 cursor-pointer appearance-none bg-transparent outline-none disabled:cursor-not-allowed disabled:opacity-60", "[&::-webkit-slider-runnable-track]:h-1.5 [&::-webkit-slider-runnable-track]:rounded-full", "[&::-webkit-slider-runnable-track]:bg-[linear-gradient(to_right,var(--color-brand)_var(--bl-slider-fill),var(--color-muted)_var(--bl-slider-fill))]", "[&::-moz-range-track]:h-1.5 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-muted", "[&::-moz-range-progress]:h-1.5 [&::-moz-range-progress]:rounded-full [&::-moz-range-progress]:bg-brand", "[&::-webkit-slider-thumb]:-mt-[5px] [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-brand [&::-webkit-slider-thumb]:bg-background [&::-webkit-slider-thumb]:shadow-sm", "[&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-brand [&::-moz-range-thumb]:bg-background", "focus-visible:[&::-webkit-slider-thumb]:ring-[3px] focus-visible:[&::-webkit-slider-thumb]:ring-ring/30", "focus-visible:[&::-moz-range-thumb]:ring-[3px] focus-visible:[&::-moz-range-thumb]:ring-ring/30", className),
+		className: cn("h-5 w-full min-w-0 cursor-pointer appearance-none bg-transparent outline-none disabled:cursor-not-allowed disabled:opacity-60 pointer-coarse:h-11", "[&::-webkit-slider-runnable-track]:h-1.5 [&::-webkit-slider-runnable-track]:rounded-full", "[&::-webkit-slider-runnable-track]:bg-[linear-gradient(to_right,var(--color-brand)_var(--bl-slider-fill),var(--color-border-strong)_var(--bl-slider-fill))]", "[&::-moz-range-track]:h-1.5 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-border-strong", "[&::-moz-range-progress]:h-1.5 [&::-moz-range-progress]:rounded-full [&::-moz-range-progress]:bg-brand", "[&::-webkit-slider-thumb]:-mt-[5px] [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-brand [&::-webkit-slider-thumb]:bg-background [&::-webkit-slider-thumb]:shadow-sm", "[&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-brand [&::-moz-range-thumb]:bg-background", "focus-visible:[&::-webkit-slider-thumb]:shadow-[0_0_0_2px_var(--background),0_0_0_4px_var(--ring)]", "focus-visible:[&::-moz-range-thumb]:shadow-[0_0_0_2px_var(--background),0_0_0_4px_var(--ring)]", className),
 		...props
 	});
-}
+});
 //#endregion
 export { Slider };
 

package/dist/components/slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.js","names":[],"sources":["../../src/components/slider.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nexport interface SliderProps extends Omit<\n  React.ComponentProps<'input'>,\n  'type' | 'value' | 'onChange'\n> {\n  value: number;\n  onValueChange: (value: number) => void;\n  min?: number;\n  max?: number;\n  step?: number;\n}\n\n/**\n * A single-value range slider on the native input, so keyboard, touch and\n * screen readers work without extra code. Pass `aria-valuetext` when the raw\n * number isn't meaningful (\"45% change\").\n */\nfunction Slider({\n  className,\n  value,\n  onValueChange,\n  min = 0,\n  max = 100,\n  step = 1,\n  style,\n  ...props\n}: SliderProps) {\n  const percent = max > min ? Math.min(100, Math.max(0, ((value - min) / (max - min)) * 100)) : 0;\n  return (\n    <input\n      type=\"range\"\n      data-slot=\"slider\"\n      min={min}\n      max={max}\n      step={step}\n      value={value}\n      onChange={(event) => onValueChange(Number(event.target.value))}\n      style={{ ...style, ['--bl-slider-fill' as string]: `${percent}%` }}\n      className={cn(\n        'h-5 w-full min-w-0 cursor-pointer appearance-none bg-transparent outline-none disabled:cursor-not-allowed disabled:opacity-60',\n        // Track: brand up to the thumb, muted after it.\n        '[&::-webkit-slider-runnable-track]:h-1.5 [&::-webkit-slider-runnable-track]:rounded-full',\n        '[&::-webkit-slider-runnable-track]:bg-[linear-gradient(to_right,var(--color-brand)_var(--bl-slider-fill),var(--color-muted)_var(--bl-slider-fill))]',\n        '[&::-moz-range-track]:h-1.5 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-muted',\n        '[&::-moz-range-progress]:h-1.5 [&::-moz-range-progress]:rounded-full [&::-moz-range-progress]:bg-brand',\n        '[&::-webkit-slider-thumb]:-mt-[5px] [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-brand [&::-webkit-slider-thumb]:bg-background [&::-webkit-slider-thumb]:shadow-sm',\n        '[&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-brand [&::-moz-range-thumb]:bg-background',\n        'focus-visible:[&::-webkit-slider-thumb]:ring-[3px] focus-visible:[&::-webkit-slider-thumb]:ring-ring/30',\n        'focus-visible:[&::-moz-range-thumb]:ring-[3px] focus-visible:[&::-moz-range-thumb]:ring-ring/30',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Slider };\n"],"mappings":";;;;;;;;;;AAoBA,SAAS,OAAO,EACd,WACA,OACA,eACA,MAAM,GACN,MAAM,KACN,OAAO,GACP,OACA,GAAG,SACW;CACd,MAAM,UAAU,MAAM,MAAM,KAAK,IAAI,KAAK,KAAK,IAAI,IAAK,QAAQ,QAAQ,MAAM,OAAQ,GAAG,CAAC,IAAI;CAC9F,OACE,oBAAC,SAAD;EACE,MAAK;EACL,aAAU;EACL;EACA;EACC;EACC;EACP,WAAW,UAAU,cAAc,OAAO,MAAM,OAAO,KAAK,CAAC;EAC7D,OAAO;GAAE,GAAG;IAAQ,qBAA+B,GAAG,QAAQ;EAAG;EACjE,WAAW,GACT,iIAEA,4FACA,uJACA,iGACA,0GACA,+SACA,yKACA,2GACA,mGACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"slider.js","names":[],"sources":["../../src/components/slider.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nexport interface SliderProps extends Omit<\n  React.ComponentProps<'input'>,\n  'type' | 'value' | 'defaultValue' | 'onChange'\n> {\n  /** Controlled value. Leave out for an uncontrolled slider. */\n  value?: number;\n  /** The starting value when uncontrolled. */\n  defaultValue?: number;\n  onValueChange?: (value: number) => void;\n  min?: number;\n  max?: number;\n  step?: number;\n}\n\n/**\n * A single-value range slider on the native input, so keyboard, touch and\n * screen readers work without extra code. The track is 6px; the thumb 16px,\n * with the whole 44px-tall input as its target on touch screens. Pass\n * `aria-valuetext` when the raw number isn't meaningful (\"45% change\").\n */\nconst Slider = React.forwardRef<HTMLInputElement, SliderProps>(function Slider(\n  {\n    className,\n    value: valueProp,\n    defaultValue,\n    onValueChange,\n    min = 0,\n    max = 100,\n    step = 1,\n    style,\n    ...props\n  },\n  ref,\n) {\n  const [own, setOwn] = React.useState(defaultValue ?? min);\n  const value = valueProp ?? own;\n  const percent = max > min ? Math.min(100, Math.max(0, ((value - min) / (max - min)) * 100)) : 0;\n  return (\n    <input\n      ref={ref}\n      type=\"range\"\n      data-slot=\"slider\"\n      min={min}\n      max={max}\n      step={step}\n      value={value}\n      onChange={(event) => {\n        const next = Number(event.target.value);\n        if (valueProp === undefined) setOwn(next);\n        onValueChange?.(next);\n      }}\n      style={{ ...style, ['--bl-slider-fill' as string]: `${percent}%` }}\n      className={cn(\n        'h-5 w-full min-w-0 cursor-pointer appearance-none bg-transparent outline-none disabled:cursor-not-allowed disabled:opacity-60 pointer-coarse:h-11',\n        // Track: brand up to the thumb, the strong border tone after it.\n        '[&::-webkit-slider-runnable-track]:h-1.5 [&::-webkit-slider-runnable-track]:rounded-full',\n        '[&::-webkit-slider-runnable-track]:bg-[linear-gradient(to_right,var(--color-brand)_var(--bl-slider-fill),var(--color-border-strong)_var(--bl-slider-fill))]',\n        '[&::-moz-range-track]:h-1.5 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-border-strong',\n        '[&::-moz-range-progress]:h-1.5 [&::-moz-range-progress]:rounded-full [&::-moz-range-progress]:bg-brand',\n        '[&::-webkit-slider-thumb]:-mt-[5px] [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-brand [&::-webkit-slider-thumb]:bg-background [&::-webkit-slider-thumb]:shadow-sm',\n        '[&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-brand [&::-moz-range-thumb]:bg-background',\n        // Focus: the 2px ring-colour outline, 2px out, drawn as shadows on the\n        // thumb (outlines on range thumbs are not reliable across engines).\n        'focus-visible:[&::-webkit-slider-thumb]:shadow-[0_0_0_2px_var(--background),0_0_0_4px_var(--ring)]',\n        'focus-visible:[&::-moz-range-thumb]:shadow-[0_0_0_2px_var(--background),0_0_0_4px_var(--ring)]',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\n\nexport { Slider };\n"],"mappings":";;;;;;;;;;;AAwBA,IAAM,SAAS,MAAM,WAA0C,SAAS,OACtE,EACE,WACA,OAAO,WACP,cACA,eACA,MAAM,GACN,MAAM,KACN,OAAO,GACP,OACA,GAAG,SAEL,KACA;CACA,MAAM,CAAC,KAAK,UAAU,MAAM,SAAS,gBAAgB,GAAG;CACxD,MAAM,QAAQ,aAAa;CAC3B,MAAM,UAAU,MAAM,MAAM,KAAK,IAAI,KAAK,KAAK,IAAI,IAAK,QAAQ,QAAQ,MAAM,OAAQ,GAAG,CAAC,IAAI;CAC9F,OACE,oBAAC,SAAD;EACO;EACL,MAAK;EACL,aAAU;EACL;EACA;EACC;EACC;EACP,WAAW,UAAU;GACnB,MAAM,OAAO,OAAO,MAAM,OAAO,KAAK;GACtC,IAAI,cAAc,KAAA,GAAW,OAAO,IAAI;GACxC,gBAAgB,IAAI;EACtB;EACA,OAAO;GAAE,GAAG;IAAQ,qBAA+B,GAAG,QAAQ;EAAG;EACjE,WAAW,GACT,qJAEA,4FACA,+JACA,yGACA,0GACA,+SACA,yKAGA,sGACA,kGACA,SACF;EACA,GAAI;CACL,CAAA;AAEL,CAAC"}

package/dist/components/source.d.ts

@@ -20,12 +20,12 @@ export interface SourceCitationProps extends Omit<React.ComponentProps<typeof Po
     source: Source;
 }
 /** An inline [n] marker in an answer; opens the source it points to. */
-declare function SourceCitation({ index, source, className, ...props }: SourceCitationProps): React.JSX.Element;
+declare const SourceCitation: React.ForwardRefExoticComponent<Omit<SourceCitationProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export interface SourceListProps extends React.ComponentProps<'section'> {
     sources: Source[];
     /** Heading; also the list's accessible name. */
     label?: string;
 }
 /** Numbered sources under an answer, in citation order. */
-declare function SourceList({ sources, label, className, ...props }: SourceListProps): React.JSX.Element | null;
+declare const SourceList: React.ForwardRefExoticComponent<Omit<SourceListProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export { SourceCitation, SourceList };

package/dist/components/source.js

@@ -1,5 +1,5 @@
 "use client";
-import { cn } from "../lib/utils.js";
+import { cn, focusRingClasses } from "../lib/utils.js";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -45,7 +45,7 @@ function SourceBody({ source, index }) {
 						href,
 						target: "_blank",
 						rel: "noopener noreferrer",
-						className: "min-w-0 font-medium text-foreground underline-offset-2 outline-none hover:underline focus-visible:underline",
+						className: cn("min-w-0 rounded-xs font-medium text-foreground underline-offset-2 hover:underline", focusRingClasses),
 						children: [/* @__PURE__ */ jsx("span", {
 							className: "line-clamp-2",
 							children: source.title
@@ -75,11 +75,12 @@ function SourceBody({ source, index }) {
 	});
 }
 /** An inline [n] marker in an answer; opens the source it points to. */
-function SourceCitation({ index, source, className, ...props }) {
+var SourceCitation = React.forwardRef(function SourceCitation({ index, source, className, ...props }, ref) {
 	return /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+		ref,
 		"data-slot": "source-citation",
 		"aria-label": `Source ${index}: ${source.title}`,
-		className: cn("mx-0.5 inline-grid h-4 min-w-4 translate-y-[-0.1em] place-items-center rounded-xs border bg-surface-muted px-1 align-baseline font-mono text-[10px] leading-none font-semibold text-muted-foreground tabular-nums transition-colors outline-none hover:border-brand/40 hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/20 data-[state=open]:border-brand data-[state=open]:text-foreground", className),
+		className: cn("mx-0.5 inline-grid h-4 min-w-4 translate-y-[-0.1em] place-items-center rounded-xs border bg-surface-muted px-1 align-baseline font-mono text-[10px] leading-none font-semibold text-muted-foreground tabular-nums transition-colors hover:border-brand/40 hover:text-foreground data-[state=open]:border-brand data-[state=open]:text-foreground", focusRingClasses, className),
 		...props,
 		children: index
 	}), /* @__PURE__ */ jsx(PopoverContent, {
@@ -88,12 +89,13 @@ function SourceCitation({ index, source, className, ...props }) {
 		className: "w-80 p-3 text-sm",
 		children: /* @__PURE__ */ jsx(SourceBody, { source })
 	})] });
-}
+});
 /** Numbered sources under an answer, in citation order. */
-function SourceList({ sources, label = "Sources", className, ...props }) {
+var SourceList = React.forwardRef(function SourceList({ sources, label = "Sources", className, ...props }, ref) {
 	const headingId = React.useId();
 	if (sources.length === 0) return null;
 	return /* @__PURE__ */ jsxs("section", {
+		ref,
 		"data-slot": "source-list",
 		"aria-labelledby": headingId,
 		className: cn("grid gap-2", className),
@@ -113,7 +115,7 @@ function SourceList({ sources, label = "Sources", className, ...props }) {
 			}, source.id))
 		})]
 	});
-}
+});
 //#endregion
 export { SourceCitation, SourceList, safeSourceHref };
 

package/dist/components/source.js.map

@@ -1 +1 @@
-{"version":3,"file":"source.js","names":[],"sources":["../../src/components/source.tsx"],"sourcesContent":["import ExternalLink from '@burtson-labs/icons/react/external-link';\nimport FileText from '@burtson-labs/icons/react/file-text';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nimport { Popover, PopoverContent, PopoverTrigger } from './popover';\n\n/** Where an answer came from. The app supplies provenance; this only shows it. */\nexport interface Source {\n  id: string;\n  title: string;\n  /** Only http(s) links are rendered as links. */\n  url?: string;\n  /** The passage the answer relied on. */\n  snippet?: string;\n  /** Short location, e.g. \"page 4\" or \"Updated 2 days ago\". */\n  meta?: string;\n  icon?: React.ReactNode;\n}\n\n/** An http(s) URL, or undefined for anything else (javascript:, data:, relative). */\nexport function safeSourceHref(url: string | undefined): string | undefined {\n  if (!url) return undefined;\n  try {\n    const parsed = new URL(url);\n    return parsed.protocol === 'https:' || parsed.protocol === 'http:' ? parsed.href : undefined;\n  } catch {\n    return undefined;\n  }\n}\n\nfunction hostOf(href: string | undefined): string | undefined {\n  if (!href) return undefined;\n  try {\n    return new URL(href).hostname.replace(/^www\\./, '');\n  } catch {\n    return undefined;\n  }\n}\n\nfunction SourceBody({ source, index }: { source: Source; index?: number }) {\n  const href = safeSourceHref(source.url);\n  const host = hostOf(href);\n  const location = [host, source.meta].filter(Boolean).join(' · ');\n  return (\n    <div className=\"grid min-w-0 gap-1\">\n      <div className=\"flex min-w-0 items-start gap-2\">\n        {index !== undefined && (\n          <span className=\"mt-px grid h-5 min-w-5 shrink-0 place-items-center rounded-sm border bg-surface-muted px-1 font-mono text-[11px] font-semibold text-muted-foreground tabular-nums\">\n            {index}\n          </span>\n        )}\n        <span className=\"mt-0.5 shrink-0 text-muted-foreground [&_svg]:size-4\">\n          {source.icon ?? <FileText aria-hidden />}\n        </span>\n        {href ? (\n          <a\n            href={href}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            className=\"min-w-0 font-medium text-foreground underline-offset-2 outline-none hover:underline focus-visible:underline\"\n          >\n            <span className=\"line-clamp-2\">{source.title}</span>\n            <span className=\"sr-only\"> (opens in a new tab)</span>\n          </a>\n        ) : (\n          <span className=\"line-clamp-2 min-w-0 font-medium text-foreground\">{source.title}</span>\n        )}\n        {href && (\n          <ExternalLink className=\"mt-1 size-3 shrink-0 text-muted-foreground\" aria-hidden />\n        )}\n      </div>\n      {location && <p className=\"truncate text-xs text-muted-foreground\">{location}</p>}\n      {source.snippet && (\n        <blockquote className=\"line-clamp-3 border-l-2 pl-2 text-xs leading-5 text-muted-foreground\">\n          {source.snippet}\n        </blockquote>\n      )}\n    </div>\n  );\n}\n\nexport interface SourceCitationProps extends Omit<\n  React.ComponentProps<typeof PopoverTrigger>,\n  'children'\n> {\n  /** 1-based number shown in the text; matches the SourceList entry. */\n  index: number;\n  source: Source;\n}\n\n/** An inline [n] marker in an answer; opens the source it points to. */\nfunction SourceCitation({ index, source, className, ...props }: SourceCitationProps) {\n  return (\n    <Popover>\n      <PopoverTrigger\n        data-slot=\"source-citation\"\n        aria-label={`Source ${index}: ${source.title}`}\n        className={cn(\n          'mx-0.5 inline-grid h-4 min-w-4 translate-y-[-0.1em] place-items-center rounded-xs border bg-surface-muted px-1 align-baseline font-mono text-[10px] leading-none font-semibold text-muted-foreground tabular-nums transition-colors outline-none hover:border-brand/40 hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/20 data-[state=open]:border-brand data-[state=open]:text-foreground',\n          className,\n        )}\n        {...props}\n      >\n        {index}\n      </PopoverTrigger>\n      <PopoverContent side=\"top\" align=\"start\" className=\"w-80 p-3 text-sm\">\n        <SourceBody source={source} />\n      </PopoverContent>\n    </Popover>\n  );\n}\n\nexport interface SourceListProps extends React.ComponentProps<'section'> {\n  sources: Source[];\n  /** Heading; also the list's accessible name. */\n  label?: string;\n}\n\n/** Numbered sources under an answer, in citation order. */\nfunction SourceList({ sources, label = 'Sources', className, ...props }: SourceListProps) {\n  const headingId = React.useId();\n  if (sources.length === 0) return null;\n  return (\n    <section\n      data-slot=\"source-list\"\n      aria-labelledby={headingId}\n      className={cn('grid gap-2', className)}\n      {...props}\n    >\n      <h3\n        id={headingId}\n        className=\"text-[11px] font-semibold tracking-[0.06em] text-muted-foreground uppercase\"\n      >\n        {label}\n      </h3>\n      <ol className=\"grid gap-1.5 sm:grid-cols-2\">\n        {sources.map((source, i) => (\n          <li\n            key={source.id}\n            className=\"min-w-0 rounded-md border bg-surface p-2.5 text-sm transition-colors hover:border-border-strong\"\n          >\n            <SourceBody source={source} index={i + 1} />\n          </li>\n        ))}\n      </ol>\n    </section>\n  );\n}\n\nexport { SourceCitation, SourceList };\n"],"mappings":";;;;;;;;;AAsBA,SAAgB,eAAe,KAA6C;CAC1E,IAAI,CAAC,KAAK,OAAO,KAAA;CACjB,IAAI;EACF,MAAM,SAAS,IAAI,IAAI,GAAG;EAC1B,OAAO,OAAO,aAAa,YAAY,OAAO,aAAa,UAAU,OAAO,OAAO,KAAA;CACrF,QAAQ;EACN;CACF;AACF;AAEA,SAAS,OAAO,MAA8C;CAC5D,IAAI,CAAC,MAAM,OAAO,KAAA;CAClB,IAAI;EACF,OAAO,IAAI,IAAI,IAAI,CAAC,CAAC,SAAS,QAAQ,UAAU,EAAE;CACpD,QAAQ;EACN;CACF;AACF;AAEA,SAAS,WAAW,EAAE,QAAQ,SAA6C;CACzE,MAAM,OAAO,eAAe,OAAO,GAAG;CAEtC,MAAM,WAAW,CADJ,OAAO,IACF,GAAM,OAAO,IAAI,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,KAAK;CAC/D,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA;GACE,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACG,UAAU,KAAA,KACT,oBAAC,QAAD;MAAM,WAAU;MACb,UAAA;KACG,CAAA;KAER,oBAAC,QAAD;MAAM,WAAU;MACb,UAAA,OAAO,QAAQ,oBAAC,UAAD,EAAU,eAAA,KAAa,CAAA;KACnC,CAAA;KACL,OACC,qBAAC,KAAD;MACQ;MACN,QAAO;MACP,KAAI;MACJ,WAAU;MAJZ,UAAA,CAME,oBAAC,QAAD;OAAM,WAAU;OAAgB,UAAA,OAAO;MAAY,CAAA,GACnD,oBAAC,QAAD;OAAM,WAAU;OAAU,UAAA;MAA2B,CAAA,CACpD;KAEH,CAAA,IAAA,oBAAC,QAAD;MAAM,WAAU;MAAoD,UAAA,OAAO;KAAY,CAAA;KAExF,QACC,oBAAC,cAAD;MAAc,WAAU;MAA6C,eAAA;KAAa,CAAA;IAEjF;;GACJ,YAAY,oBAAC,KAAD;IAAG,WAAU;IAA0C,UAAA;GAAY,CAAA;GAC/E,OAAO,WACN,oBAAC,cAAD;IAAY,WAAU;IACnB,UAAA,OAAO;GACE,CAAA;EAEX;;AAET;;AAYA,SAAS,eAAe,EAAE,OAAO,QAAQ,WAAW,GAAG,SAA8B;CACnF,OACE,qBAAC,SAAD,EAAA,UAAA,CACE,oBAAC,gBAAD;EACE,aAAU;EACV,cAAY,UAAU,MAAM,IAAI,OAAO;EACvC,WAAW,GACT,qZACA,SACF;EACA,GAAI;EAEH,UAAA;CACa,CAAA,GAChB,oBAAC,gBAAD;EAAgB,MAAK;EAAM,OAAM;EAAQ,WAAU;EACjD,UAAA,oBAAC,YAAD,EAAoB,OAAS,CAAA;CACf,CAAA,CACT,EAAA,CAAA;AAEb;;AASA,SAAS,WAAW,EAAE,SAAS,QAAQ,WAAW,WAAW,GAAG,SAA0B;CACxF,MAAM,YAAY,MAAM,MAAM;CAC9B,IAAI,QAAQ,WAAW,GAAG,OAAO;CACjC,OACE,qBAAC,WAAD;EACE,aAAU;EACV,mBAAiB;EACjB,WAAW,GAAG,cAAc,SAAS;EACrC,GAAI;EAJN,UAAA,CAME,oBAAC,MAAD;GACE,IAAI;GACJ,WAAU;GAET,UAAA;EACC,CAAA,GACJ,oBAAC,MAAD;GAAI,WAAU;GACX,UAAA,QAAQ,KAAK,QAAQ,MACpB,oBAAC,MAAD;IAEE,WAAU;IAEV,UAAA,oBAAC,YAAD;KAAoB;KAAQ,OAAO,IAAI;IAAI,CAAA;GACzC,GAJG,OAAO,EAIV,CACL;EACC,CAAA,CACG;;AAEb"}
+{"version":3,"file":"source.js","names":[],"sources":["../../src/components/source.tsx"],"sourcesContent":["import ExternalLink from '@burtson-labs/icons/react/external-link';\nimport FileText from '@burtson-labs/icons/react/file-text';\nimport * as React from 'react';\n\nimport { cn, focusRingClasses } from '../lib/utils';\n\nimport { Popover, PopoverContent, PopoverTrigger } from './popover';\n\n/** Where an answer came from. The app supplies provenance; this only shows it. */\nexport interface Source {\n  id: string;\n  title: string;\n  /** Only http(s) links are rendered as links. */\n  url?: string;\n  /** The passage the answer relied on. */\n  snippet?: string;\n  /** Short location, e.g. \"page 4\" or \"Updated 2 days ago\". */\n  meta?: string;\n  icon?: React.ReactNode;\n}\n\n/** An http(s) URL, or undefined for anything else (javascript:, data:, relative). */\nexport function safeSourceHref(url: string | undefined): string | undefined {\n  if (!url) return undefined;\n  try {\n    const parsed = new URL(url);\n    return parsed.protocol === 'https:' || parsed.protocol === 'http:' ? parsed.href : undefined;\n  } catch {\n    return undefined;\n  }\n}\n\nfunction hostOf(href: string | undefined): string | undefined {\n  if (!href) return undefined;\n  try {\n    return new URL(href).hostname.replace(/^www\\./, '');\n  } catch {\n    return undefined;\n  }\n}\n\nfunction SourceBody({ source, index }: { source: Source; index?: number }) {\n  const href = safeSourceHref(source.url);\n  const host = hostOf(href);\n  const location = [host, source.meta].filter(Boolean).join(' · ');\n  return (\n    <div className=\"grid min-w-0 gap-1\">\n      <div className=\"flex min-w-0 items-start gap-2\">\n        {index !== undefined && (\n          <span className=\"mt-px grid h-5 min-w-5 shrink-0 place-items-center rounded-sm border bg-surface-muted px-1 font-mono text-[11px] font-semibold text-muted-foreground tabular-nums\">\n            {index}\n          </span>\n        )}\n        <span className=\"mt-0.5 shrink-0 text-muted-foreground [&_svg]:size-4\">\n          {source.icon ?? <FileText aria-hidden />}\n        </span>\n        {href ? (\n          <a\n            href={href}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            className={cn(\n              'min-w-0 rounded-xs font-medium text-foreground underline-offset-2 hover:underline',\n              focusRingClasses,\n            )}\n          >\n            <span className=\"line-clamp-2\">{source.title}</span>\n            <span className=\"sr-only\"> (opens in a new tab)</span>\n          </a>\n        ) : (\n          <span className=\"line-clamp-2 min-w-0 font-medium text-foreground\">{source.title}</span>\n        )}\n        {href && (\n          <ExternalLink className=\"mt-1 size-3 shrink-0 text-muted-foreground\" aria-hidden />\n        )}\n      </div>\n      {location && <p className=\"truncate text-xs text-muted-foreground\">{location}</p>}\n      {source.snippet && (\n        <blockquote className=\"line-clamp-3 border-l-2 pl-2 text-xs leading-5 text-muted-foreground\">\n          {source.snippet}\n        </blockquote>\n      )}\n    </div>\n  );\n}\n\nexport interface SourceCitationProps extends Omit<\n  React.ComponentProps<typeof PopoverTrigger>,\n  'children'\n> {\n  /** 1-based number shown in the text; matches the SourceList entry. */\n  index: number;\n  source: Source;\n}\n\n/** An inline [n] marker in an answer; opens the source it points to. */\nconst SourceCitation = React.forwardRef<HTMLButtonElement, SourceCitationProps>(\n  function SourceCitation({ index, source, className, ...props }, ref) {\n    return (\n      <Popover>\n        <PopoverTrigger\n          ref={ref}\n          data-slot=\"source-citation\"\n          aria-label={`Source ${index}: ${source.title}`}\n          className={cn(\n            'mx-0.5 inline-grid h-4 min-w-4 translate-y-[-0.1em] place-items-center rounded-xs border bg-surface-muted px-1 align-baseline font-mono text-[10px] leading-none font-semibold text-muted-foreground tabular-nums transition-colors hover:border-brand/40 hover:text-foreground data-[state=open]:border-brand data-[state=open]:text-foreground',\n            focusRingClasses,\n            className,\n          )}\n          {...props}\n        >\n          {index}\n        </PopoverTrigger>\n        <PopoverContent side=\"top\" align=\"start\" className=\"w-80 p-3 text-sm\">\n          <SourceBody source={source} />\n        </PopoverContent>\n      </Popover>\n    );\n  },\n);\n\nexport interface SourceListProps extends React.ComponentProps<'section'> {\n  sources: Source[];\n  /** Heading; also the list's accessible name. */\n  label?: string;\n}\n\n/** Numbered sources under an answer, in citation order. */\nconst SourceList = React.forwardRef<HTMLElement, SourceListProps>(function SourceList(\n  { sources, label = 'Sources', className, ...props },\n  ref,\n) {\n  const headingId = React.useId();\n  if (sources.length === 0) return null;\n  return (\n    <section\n      ref={ref}\n      data-slot=\"source-list\"\n      aria-labelledby={headingId}\n      className={cn('grid gap-2', className)}\n      {...props}\n    >\n      <h3\n        id={headingId}\n        className=\"text-[11px] font-semibold tracking-[0.06em] text-muted-foreground uppercase\"\n      >\n        {label}\n      </h3>\n      <ol className=\"grid gap-1.5 sm:grid-cols-2\">\n        {sources.map((source, i) => (\n          <li\n            key={source.id}\n            className=\"min-w-0 rounded-md border bg-surface p-2.5 text-sm transition-colors hover:border-border-strong\"\n          >\n            <SourceBody source={source} index={i + 1} />\n          </li>\n        ))}\n      </ol>\n    </section>\n  );\n});\n\nexport { SourceCitation, SourceList };\n"],"mappings":";;;;;;;;;AAsBA,SAAgB,eAAe,KAA6C;CAC1E,IAAI,CAAC,KAAK,OAAO,KAAA;CACjB,IAAI;EACF,MAAM,SAAS,IAAI,IAAI,GAAG;EAC1B,OAAO,OAAO,aAAa,YAAY,OAAO,aAAa,UAAU,OAAO,OAAO,KAAA;CACrF,QAAQ;EACN;CACF;AACF;AAEA,SAAS,OAAO,MAA8C;CAC5D,IAAI,CAAC,MAAM,OAAO,KAAA;CAClB,IAAI;EACF,OAAO,IAAI,IAAI,IAAI,CAAC,CAAC,SAAS,QAAQ,UAAU,EAAE;CACpD,QAAQ;EACN;CACF;AACF;AAEA,SAAS,WAAW,EAAE,QAAQ,SAA6C;CACzE,MAAM,OAAO,eAAe,OAAO,GAAG;CAEtC,MAAM,WAAW,CADJ,OAAO,IACF,GAAM,OAAO,IAAI,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,KAAK;CAC/D,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA;GACE,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACG,UAAU,KAAA,KACT,oBAAC,QAAD;MAAM,WAAU;MACb,UAAA;KACG,CAAA;KAER,oBAAC,QAAD;MAAM,WAAU;MACb,UAAA,OAAO,QAAQ,oBAAC,UAAD,EAAU,eAAA,KAAa,CAAA;KACnC,CAAA;KACL,OACC,qBAAC,KAAD;MACQ;MACN,QAAO;MACP,KAAI;MACJ,WAAW,GACT,qFACA,gBACF;MAPF,UAAA,CASE,oBAAC,QAAD;OAAM,WAAU;OAAgB,UAAA,OAAO;MAAY,CAAA,GACnD,oBAAC,QAAD;OAAM,WAAU;OAAU,UAAA;MAA2B,CAAA,CACpD;KAEH,CAAA,IAAA,oBAAC,QAAD;MAAM,WAAU;MAAoD,UAAA,OAAO;KAAY,CAAA;KAExF,QACC,oBAAC,cAAD;MAAc,WAAU;MAA6C,eAAA;KAAa,CAAA;IAEjF;;GACJ,YAAY,oBAAC,KAAD;IAAG,WAAU;IAA0C,UAAA;GAAY,CAAA;GAC/E,OAAO,WACN,oBAAC,cAAD;IAAY,WAAU;IACnB,UAAA,OAAO;GACE,CAAA;EAEX;;AAET;;AAYA,IAAM,iBAAiB,MAAM,WAC3B,SAAS,eAAe,EAAE,OAAO,QAAQ,WAAW,GAAG,SAAS,KAAK;CACnE,OACE,qBAAC,SAAD,EAAA,UAAA,CACE,oBAAC,gBAAD;EACO;EACL,aAAU;EACV,cAAY,UAAU,MAAM,IAAI,OAAO;EACvC,WAAW,GACT,oVACA,kBACA,SACF;EACA,GAAI;EAEH,UAAA;CACa,CAAA,GAChB,oBAAC,gBAAD;EAAgB,MAAK;EAAM,OAAM;EAAQ,WAAU;EACjD,UAAA,oBAAC,YAAD,EAAoB,OAAS,CAAA;CACf,CAAA,CACT,EAAA,CAAA;AAEb,CACF;;AASA,IAAM,aAAa,MAAM,WAAyC,SAAS,WACzE,EAAE,SAAS,QAAQ,WAAW,WAAW,GAAG,SAC5C,KACA;CACA,MAAM,YAAY,MAAM,MAAM;CAC9B,IAAI,QAAQ,WAAW,GAAG,OAAO;CACjC,OACE,qBAAC,WAAD;EACO;EACL,aAAU;EACV,mBAAiB;EACjB,WAAW,GAAG,cAAc,SAAS;EACrC,GAAI;EALN,UAAA,CAOE,oBAAC,MAAD;GACE,IAAI;GACJ,WAAU;GAET,UAAA;EACC,CAAA,GACJ,oBAAC,MAAD;GAAI,WAAU;GACX,UAAA,QAAQ,KAAK,QAAQ,MACpB,oBAAC,MAAD;IAEE,WAAU;IAEV,UAAA,oBAAC,YAAD;KAAoB;KAAQ,OAAO,IAAI;IAAI,CAAA;GACzC,GAJG,OAAO,EAIV,CACL;EACC,CAAA,CACG;;AAEb,CAAC"}

package/dist/components/spinner.d.ts

@@ -1,6 +1,8 @@
 import Loader from '@burtson-labs/icons/react/loader';
 import * as React from 'react';
-declare function Spinner({ className, label, ...props }: React.ComponentProps<typeof Loader> & {
+export interface SpinnerProps extends React.ComponentProps<typeof Loader> {
+    /** What is loading, for screen readers. */
     label?: string;
-}): React.JSX.Element;
+}
+declare const Spinner: React.ForwardRefExoticComponent<Omit<SpinnerProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
 export { Spinner };

package/dist/components/spinner.js

@@ -1,18 +1,19 @@
 "use client";
 import { cn } from "../lib/utils.js";
-import "react";
+import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import Loader from "@burtson-labs/icons/react/loader";
 //#region src/components/spinner.tsx
-function Spinner({ className, label = "Loading", ...props }) {
+var Spinner = React.forwardRef(function Spinner({ className, label = "Loading", ...props }, ref) {
 	return /* @__PURE__ */ jsx(Loader, {
+		ref,
 		role: "status",
 		"aria-label": label,
 		"data-slot": "spinner",
 		className: cn("size-4 animate-spin", className),
 		...props
 	});
-}
+});
 //#endregion
 export { Spinner };
 

package/dist/components/spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.js","names":[],"sources":["../../src/components/spinner.tsx"],"sourcesContent":["import Loader from '@burtson-labs/icons/react/loader';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nfunction Spinner({\n  className,\n  label = 'Loading',\n  ...props\n}: React.ComponentProps<typeof Loader> & { label?: string }) {\n  return (\n    <Loader\n      role=\"status\"\n      aria-label={label}\n      data-slot=\"spinner\"\n      className={cn('size-4 animate-spin', className)}\n      {...props}\n    />\n  );\n}\n\nexport { Spinner };\n"],"mappings":";;;;;;AAKA,SAAS,QAAQ,EACf,WACA,QAAQ,WACR,GAAG,SACwD;CAC3D,OACE,oBAAC,QAAD;EACE,MAAK;EACL,cAAY;EACZ,aAAU;EACV,WAAW,GAAG,uBAAuB,SAAS;EAC9C,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"spinner.js","names":[],"sources":["../../src/components/spinner.tsx"],"sourcesContent":["import Loader from '@burtson-labs/icons/react/loader';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nexport interface SpinnerProps extends React.ComponentProps<typeof Loader> {\n  /** What is loading, for screen readers. */\n  label?: string;\n}\n\nconst Spinner = React.forwardRef<SVGSVGElement, SpinnerProps>(function Spinner(\n  { className, label = 'Loading', ...props },\n  ref,\n) {\n  return (\n    <Loader\n      ref={ref}\n      role=\"status\"\n      aria-label={label}\n      data-slot=\"spinner\"\n      className={cn('size-4 animate-spin', className)}\n      {...props}\n    />\n  );\n});\n\nexport { Spinner };\n"],"mappings":";;;;;;AAUA,IAAM,UAAU,MAAM,WAAwC,SAAS,QACrE,EAAE,WAAW,QAAQ,WAAW,GAAG,SACnC,KACA;CACA,OACE,oBAAC,QAAD;EACO;EACL,MAAK;EACL,cAAY;EACZ,aAAU;EACV,WAAW,GAAG,uBAAuB,SAAS;EAC9C,GAAI;CACL,CAAA;AAEL,CAAC"}

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

@@ -7,5 +7,30 @@ export interface StatCardProps extends React.ComponentProps<typeof Card> {
     detail?: React.ReactNode;
     trend?: React.ReactNode;
 }
-declare function StatCard({ label, value, icon, detail, trend, className, ...props }: StatCardProps): React.JSX.Element;
-export { StatCard };
+/** One metric with context. A row of them on a phone is better as a StatStrip. */
+declare const StatCard: React.ForwardRefExoticComponent<Omit<StatCardProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface StatStripItem {
+    label: React.ReactNode;
+    value: React.ReactNode;
+    detail?: React.ReactNode;
+    /** Makes the figure a link to this page. */
+    href?: string;
+    /** Makes the figure a button. */
+    onSelect?: () => void;
+}
+export interface StatStripProps extends Omit<React.ComponentProps<typeof Card>, 'children'> {
+    /** Two to four figures. */
+    stats: StatStripItem[];
+    /**
+     * Renders each linked figure through your router's link: it receives
+     * `href` and the figure's content as children.
+     */
+    renderLink?: (href: string, children: React.ReactNode, className: string) => React.ReactNode;
+}
+/**
+ * Up to four headline figures in one card, side by side: the phone form of a
+ * row of StatCards, which would otherwise stack into a screen of boxes. A
+ * figure with `href` or `onSelect` is a target.
+ */
+declare const StatStrip: React.ForwardRefExoticComponent<Omit<StatStripProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { StatCard, StatStrip };

package/dist/components/stat-card.js

@@ -1,12 +1,15 @@
 "use client";
-import { cn } from "../lib/utils.js";
+import { cn, focusRingClasses } from "../lib/utils.js";
 import { Card } from "./card.js";
-import "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/stat-card.tsx
-function StatCard({ label, value, icon, detail, trend, className, ...props }) {
+/** One metric with context. A row of them on a phone is better as a StatStrip. */
+var StatCard = React.forwardRef(function StatCard({ label, value, icon, detail, trend, className, ...props }, ref) {
 	return /* @__PURE__ */ jsxs(Card, {
+		ref,
 		density: "compact",
+		"data-slot": "stat-card",
 		className: cn("min-w-0", className),
 		...props,
 		children: [/* @__PURE__ */ jsxs("div", {
@@ -15,29 +18,86 @@ function StatCard({ label, value, icon, detail, trend, className, ...props }) {
 				className: "min-w-0",
 				children: [
 					/* @__PURE__ */ jsx("div", {
-						className: "text-[11px] font-semibold tracking-[0.08em] text-muted-foreground uppercase",
+						"data-slot": "stat-card-label",
+						className: "text-[11px] font-semibold tracking-[0.06em] text-muted-foreground uppercase",
 						children: label
 					}),
 					/* @__PURE__ */ jsx("div", {
-						className: "mt-1 truncate text-2xl font-semibold tracking-[-0.035em] text-foreground",
+						"data-slot": "stat-card-value",
+						className: "mt-1 truncate text-2xl font-semibold tracking-[-0.035em] text-foreground tabular-nums",
 						children: value
 					}),
 					detail ? /* @__PURE__ */ jsx("div", {
+						"data-slot": "stat-card-detail",
 						className: "mt-1 text-xs text-muted-foreground",
 						children: detail
 					}) : null
 				]
 			}), icon ? /* @__PURE__ */ jsx("div", {
-				className: "grid size-9 shrink-0 place-items-center rounded-lg border border-brand/15 bg-brand-soft text-brand [&_svg]:size-4.5",
+				className: "grid size-9 shrink-0 place-items-center rounded-lg border border-brand/15 bg-brand-soft text-brand [&_svg]:size-4",
 				children: icon
 			}) : null]
 		}), trend ? /* @__PURE__ */ jsx("div", {
+			"data-slot": "stat-card-trend",
 			className: "border-t border-border px-4 py-2.5 text-xs",
 			children: trend
 		}) : null]
 	});
-}
+});
+/**
+* Up to four headline figures in one card, side by side: the phone form of a
+* row of StatCards, which would otherwise stack into a screen of boxes. A
+* figure with `href` or `onSelect` is a target.
+*/
+var StatStrip = React.forwardRef(function StatStrip({ stats, renderLink, className, ...props }, ref) {
+	const cell = cn("grid min-w-0 content-start px-3 py-3 text-left first:rounded-l-[inherit] last:rounded-r-[inherit]", focusRingClasses, "focus-visible:outline-offset-[-2px]");
+	const interactive = cn(cell, "transition-colors hover:bg-muted/60 active:bg-muted");
+	return /* @__PURE__ */ jsx(Card, {
+		ref,
+		"data-slot": "stat-strip",
+		className: cn("gap-0 py-0", className),
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "grid divide-x divide-border",
+			style: { gridTemplateColumns: `repeat(${Math.max(1, stats.length)}, minmax(0, 1fr))` },
+			children: stats.map((s, i) => {
+				const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "text-[10.5px] leading-4 font-semibold tracking-[0.06em] text-muted-foreground uppercase",
+						children: s.label
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "mt-1 text-xl font-semibold tracking-[-0.03em] tabular-nums",
+						children: s.value
+					}),
+					s.detail && /* @__PURE__ */ jsx("span", {
+						className: "mt-0.5 text-[11.5px] leading-4 text-muted-foreground",
+						children: s.detail
+					})
+				] });
+				if (s.href) return /* @__PURE__ */ jsx(React.Fragment, { children: renderLink ? renderLink(s.href, body, interactive) : /* @__PURE__ */ jsx("a", {
+					href: s.href,
+					"data-slot": "stat-strip-item",
+					className: interactive,
+					children: body
+				}) }, i);
+				if (s.onSelect) return /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"data-slot": "stat-strip-item",
+					onClick: s.onSelect,
+					className: interactive,
+					children: body
+				}, i);
+				return /* @__PURE__ */ jsx("div", {
+					"data-slot": "stat-strip-item",
+					className: cell,
+					children: body
+				}, i);
+			})
+		})
+	});
+});
 //#endregion
-export { StatCard };
+export { StatCard, StatStrip };
 
 //# sourceMappingURL=stat-card.js.map