@burtson-labs/ui 0.13.1 → 0.14.1

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,4 +1,5 @@
-import { cn } from "../lib/utils.js";
+"use client";
+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";
@@ -44,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
@@ -74,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, {
@@ -87,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),
@@ -112,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,17 +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,11 +1,15 @@
-import { cn } from "../lib/utils.js";
+"use client";
+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", {
@@ -14,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

package/dist/components/stat-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"stat-card.js","names":[],"sources":["../../src/components/stat-card.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nimport { Card } from './card';\n\nexport interface StatCardProps extends React.ComponentProps<typeof Card> {\n  label: React.ReactNode;\n  value: React.ReactNode;\n  icon?: React.ReactNode;\n  detail?: React.ReactNode;\n  trend?: React.ReactNode;\n}\n\nfunction StatCard({ label, value, icon, detail, trend, className, ...props }: StatCardProps) {\n  return (\n    <Card density=\"compact\" className={cn('min-w-0', className)} {...props}>\n      <div className=\"flex items-start justify-between gap-4 p-4\">\n        <div className=\"min-w-0\">\n          <div className=\"text-[11px] font-semibold tracking-[0.08em] text-muted-foreground uppercase\">\n            {label}\n          </div>\n          <div className=\"mt-1 truncate text-2xl font-semibold tracking-[-0.035em] text-foreground\">\n            {value}\n          </div>\n          {detail ? <div className=\"mt-1 text-xs text-muted-foreground\">{detail}</div> : null}\n        </div>\n        {icon ? (\n          <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\">\n            {icon}\n          </div>\n        ) : null}\n      </div>\n      {trend ? <div className=\"border-t border-border px-4 py-2.5 text-xs\">{trend}</div> : null}\n    </Card>\n  );\n}\n\nexport { StatCard };\n"],"mappings":";;;;;AAcA,SAAS,SAAS,EAAE,OAAO,OAAO,MAAM,QAAQ,OAAO,WAAW,GAAG,SAAwB;CAC3F,OACE,qBAAC,MAAD;EAAM,SAAQ;EAAU,WAAW,GAAG,WAAW,SAAS;EAAG,GAAI;EAAjE,UAAA,CACE,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,oBAAC,OAAD;MAAK,WAAU;MACZ,UAAA;KACE,CAAA;KACL,oBAAC,OAAD;MAAK,WAAU;MACZ,UAAA;KACE,CAAA;KACJ,SAAS,oBAAC,OAAD;MAAK,WAAU;MAAsC,UAAA;KAAY,CAAA,IAAI;IAC5E;GACJ,CAAA,GAAA,OACC,oBAAC,OAAD;IAAK,WAAU;IACZ,UAAA;GACE,CAAA,IACH,IACD;EACJ,CAAA,GAAA,QAAQ,oBAAC,OAAD;GAAK,WAAU;GAA8C,UAAA;EAAW,CAAA,IAAI,IACjF;;AAEV"}
+{"version":3,"file":"stat-card.js","names":["_Fragment"],"sources":["../../src/components/stat-card.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn, focusRingClasses } from '../lib/utils';\n\nimport { Card } from './card';\n\nexport interface StatCardProps extends React.ComponentProps<typeof Card> {\n  label: React.ReactNode;\n  value: React.ReactNode;\n  icon?: React.ReactNode;\n  detail?: React.ReactNode;\n  trend?: React.ReactNode;\n}\n\n/** One metric with context. A row of them on a phone is better as a StatStrip. */\nconst StatCard = React.forwardRef<HTMLDivElement, StatCardProps>(function StatCard(\n  { label, value, icon, detail, trend, className, ...props },\n  ref,\n) {\n  return (\n    <Card\n      ref={ref}\n      density=\"compact\"\n      data-slot=\"stat-card\"\n      className={cn('min-w-0', className)}\n      {...props}\n    >\n      <div className=\"flex items-start justify-between gap-4 p-4\">\n        <div className=\"min-w-0\">\n          <div\n            data-slot=\"stat-card-label\"\n            className=\"text-[11px] font-semibold tracking-[0.06em] text-muted-foreground uppercase\"\n          >\n            {label}\n          </div>\n          <div\n            data-slot=\"stat-card-value\"\n            className=\"mt-1 truncate text-2xl font-semibold tracking-[-0.035em] text-foreground tabular-nums\"\n          >\n            {value}\n          </div>\n          {detail ? (\n            <div data-slot=\"stat-card-detail\" className=\"mt-1 text-xs text-muted-foreground\">\n              {detail}\n            </div>\n          ) : null}\n        </div>\n        {icon ? (\n          <div className=\"grid size-9 shrink-0 place-items-center rounded-lg border border-brand/15 bg-brand-soft text-brand [&_svg]:size-4\">\n            {icon}\n          </div>\n        ) : null}\n      </div>\n      {trend ? (\n        <div data-slot=\"stat-card-trend\" className=\"border-t border-border px-4 py-2.5 text-xs\">\n          {trend}\n        </div>\n      ) : null}\n    </Card>\n  );\n});\n\nexport interface StatStripItem {\n  label: React.ReactNode;\n  value: React.ReactNode;\n  detail?: React.ReactNode;\n  /** Makes the figure a link to this page. */\n  href?: string;\n  /** Makes the figure a button. */\n  onSelect?: () => void;\n}\n\nexport interface StatStripProps extends Omit<React.ComponentProps<typeof Card>, 'children'> {\n  /** Two to four figures. */\n  stats: StatStripItem[];\n  /**\n   * Renders each linked figure through your router's link: it receives\n   * `href` and the figure's content as children.\n   */\n  renderLink?: (href: string, children: React.ReactNode, className: string) => React.ReactNode;\n}\n\n/**\n * Up to four headline figures in one card, side by side: the phone form of a\n * row of StatCards, which would otherwise stack into a screen of boxes. A\n * figure with `href` or `onSelect` is a target.\n */\nconst StatStrip = React.forwardRef<HTMLDivElement, StatStripProps>(function StatStrip(\n  { stats, renderLink, className, ...props },\n  ref,\n) {\n  const cell = cn(\n    'grid min-w-0 content-start px-3 py-3 text-left first:rounded-l-[inherit] last:rounded-r-[inherit]',\n    focusRingClasses,\n    'focus-visible:outline-offset-[-2px]',\n  );\n  const interactive = cn(cell, 'transition-colors hover:bg-muted/60 active:bg-muted');\n  return (\n    <Card ref={ref} data-slot=\"stat-strip\" className={cn('gap-0 py-0', className)} {...props}>\n      <div\n        className=\"grid divide-x divide-border\"\n        style={{ gridTemplateColumns: `repeat(${Math.max(1, stats.length)}, minmax(0, 1fr))` }}\n      >\n        {stats.map((s, i) => {\n          const body = (\n            <>\n              <span className=\"text-[10.5px] leading-4 font-semibold tracking-[0.06em] text-muted-foreground uppercase\">\n                {s.label}\n              </span>\n              <span className=\"mt-1 text-xl font-semibold tracking-[-0.03em] tabular-nums\">\n                {s.value}\n              </span>\n              {s.detail && (\n                <span className=\"mt-0.5 text-[11.5px] leading-4 text-muted-foreground\">\n                  {s.detail}\n                </span>\n              )}\n            </>\n          );\n          if (s.href)\n            return (\n              <React.Fragment key={i}>\n                {renderLink ? (\n                  renderLink(s.href, body, interactive)\n                ) : (\n                  <a href={s.href} data-slot=\"stat-strip-item\" className={interactive}>\n                    {body}\n                  </a>\n                )}\n              </React.Fragment>\n            );\n          if (s.onSelect)\n            return (\n              <button\n                key={i}\n                type=\"button\"\n                data-slot=\"stat-strip-item\"\n                onClick={s.onSelect}\n                className={interactive}\n              >\n                {body}\n              </button>\n            );\n          return (\n            <div key={i} data-slot=\"stat-strip-item\" className={cell}>\n              {body}\n            </div>\n          );\n        })}\n      </div>\n    </Card>\n  );\n});\n\nexport { StatCard, StatStrip };\n"],"mappings":";;;;;;;AAeA,IAAM,WAAW,MAAM,WAA0C,SAAS,SACxE,EAAE,OAAO,OAAO,MAAM,QAAQ,OAAO,WAAW,GAAG,SACnD,KACA;CACA,OACE,qBAAC,MAAD;EACO;EACL,SAAQ;EACR,aAAU;EACV,WAAW,GAAG,WAAW,SAAS;EAClC,GAAI;EALN,UAAA,CAOE,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,oBAAC,OAAD;MACE,aAAU;MACV,WAAU;MAET,UAAA;KACE,CAAA;KACL,oBAAC,OAAD;MACE,aAAU;MACV,WAAU;MAET,UAAA;KACE,CAAA;KACJ,SACC,oBAAC,OAAD;MAAK,aAAU;MAAmB,WAAU;MACzC,UAAA;KACE,CAAA,IACH;IACD;GACJ,CAAA,GAAA,OACC,oBAAC,OAAD;IAAK,WAAU;IACZ,UAAA;GACE,CAAA,IACH,IACD;EACJ,CAAA,GAAA,QACC,oBAAC,OAAD;GAAK,aAAU;GAAkB,WAAU;GACxC,UAAA;EACE,CAAA,IACH,IACA;;AAEV,CAAC;;;;;;AA2BD,IAAM,YAAY,MAAM,WAA2C,SAAS,UAC1E,EAAE,OAAO,YAAY,WAAW,GAAG,SACnC,KACA;CACA,MAAM,OAAO,GACX,qGACA,kBACA,qCACF;CACA,MAAM,cAAc,GAAG,MAAM,qDAAqD;CAClF,OACE,oBAAC,MAAD;EAAW;EAAK,aAAU;EAAa,WAAW,GAAG,cAAc,SAAS;EAAG,GAAI;EACjF,UAAA,oBAAC,OAAD;GACE,WAAU;GACV,OAAO,EAAE,qBAAqB,UAAU,KAAK,IAAI,GAAG,MAAM,MAAM,EAAE,mBAAmB;GAEpF,UAAA,MAAM,KAAK,GAAG,MAAM;IACnB,MAAM,OACJ,qBAAAA,UAAA,EAAA,UAAA;KACE,oBAAC,QAAD;MAAM,WAAU;MACb,UAAA,EAAE;KACC,CAAA;KACN,oBAAC,QAAD;MAAM,WAAU;MACb,UAAA,EAAE;KACC,CAAA;KACL,EAAE,UACD,oBAAC,QAAD;MAAM,WAAU;MACb,UAAA,EAAE;KACC,CAAA;IAER,EAAA,CAAA;IAEJ,IAAI,EAAE,MACJ,OACE,oBAAC,MAAM,UAAP,EAAA,UACG,aACC,WAAW,EAAE,MAAM,MAAM,WAAW,IAEpC,oBAAC,KAAD;KAAG,MAAM,EAAE;KAAM,aAAU;KAAkB,WAAW;KACrD,UAAA;IACA,CAAA,EAES,GARK,CAQL;IAEpB,IAAI,EAAE,UACJ,OACE,oBAAC,UAAD;KAEE,MAAK;KACL,aAAU;KACV,SAAS,EAAE;KACX,WAAW;KAEV,UAAA;IACK,GAPD,CAOC;IAEZ,OACE,oBAAC,OAAD;KAAa,aAAU;KAAkB,WAAW;KACjD,UAAA;IACE,GAFK,CAEL;GAET,CAAC;EACE,CAAA;CACD,CAAA;AAEV,CAAC"}

package/dist/components/status.d.ts

@@ -1,12 +1,13 @@
 import { type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const statusDotVariants: (props?: ({
-    status?: "success" | "warning" | "info" | "brand" | "neutral" | "danger" | null | undefined;
+    status?: "destructive" | "success" | "warning" | "info" | "brand" | "neutral" | "danger" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-declare function StatusDot({ className, status, pulse, ...props }: React.ComponentProps<'span'> & VariantProps<typeof statusDotVariants> & {
+export type StatusTone = NonNullable<VariantProps<typeof statusDotVariants>['status']>;
+export interface StatusDotProps extends React.ComponentProps<'span'>, VariantProps<typeof statusDotVariants> {
+    /** A ripple for a live state (running, connecting). Still under reduced motion. */
     pulse?: boolean;
-}): React.JSX.Element;
-declare function Status({ className, status, pulse, children, ...props }: React.ComponentProps<'span'> & VariantProps<typeof statusDotVariants> & {
-    pulse?: boolean;
-}): React.JSX.Element;
+}
+declare const StatusDot: React.ForwardRefExoticComponent<Omit<StatusDotProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+declare const Status: React.ForwardRefExoticComponent<Omit<StatusDotProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export { Status, StatusDot, statusDotVariants };

package/dist/components/status.js

@@ -1,5 +1,6 @@
+"use client";
 import { cn } from "../lib/utils.js";
-import "react";
+import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/components/status.tsx
@@ -9,23 +10,29 @@ var statusDotVariants = cva("size-2 shrink-0 rounded-full ring-2 ring-current/10
 		brand: "bg-brand text-brand",
 		success: "bg-success text-success",
 		warning: "bg-warning text-warning",
+		destructive: "bg-destructive text-destructive",
+		/** 0.x name for `destructive`; kept so existing apps keep compiling. */
 		danger: "bg-destructive text-destructive",
 		info: "bg-info text-info"
 	} },
 	defaultVariants: { status: "neutral" }
 });
-function StatusDot({ className, status, pulse = false, ...props }) {
+var StatusDot = React.forwardRef(function StatusDot({ className, status, pulse = false, ...props }, ref) {
 	return /* @__PURE__ */ jsxs("span", {
+		ref,
 		"data-slot": "status-dot",
+		"data-status": status ?? "neutral",
 		className: cn("relative inline-flex", className),
 		"aria-hidden": "true",
 		...props,
 		children: [pulse ? /* @__PURE__ */ jsx("span", { className: cn(statusDotVariants({ status }), "absolute inset-0 animate-ping opacity-40 motion-reduce:hidden") }) : null, /* @__PURE__ */ jsx("span", { className: statusDotVariants({ status }) })]
 	});
-}
-function Status({ className, status, pulse, children, ...props }) {
+});
+var Status = React.forwardRef(function Status({ className, status, pulse, children, ...props }, ref) {
 	return /* @__PURE__ */ jsxs("span", {
+		ref,
 		"data-slot": "status",
+		"data-status": status ?? "neutral",
 		className: cn("inline-flex items-center gap-2 text-xs font-medium text-muted-foreground", className),
 		...props,
 		children: [/* @__PURE__ */ jsx(StatusDot, {
@@ -33,7 +40,7 @@ function Status({ className, status, pulse, children, ...props }) {
 			pulse
 		}), children]
 	});
-}
+});
 //#endregion
 export { Status, StatusDot, statusDotVariants };
 

package/dist/components/status.js.map

@@ -1 +1 @@
-{"version":3,"file":"status.js","names":[],"sources":["../../src/components/status.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nconst statusDotVariants = cva('size-2 shrink-0 rounded-full ring-2 ring-current/10', {\n  variants: {\n    status: {\n      neutral: 'bg-muted-foreground text-muted-foreground',\n      brand: 'bg-brand text-brand',\n      success: 'bg-success text-success',\n      warning: 'bg-warning text-warning',\n      danger: 'bg-destructive text-destructive',\n      info: 'bg-info text-info',\n    },\n  },\n  defaultVariants: { status: 'neutral' },\n});\n\nfunction StatusDot({\n  className,\n  status,\n  pulse = false,\n  ...props\n}: React.ComponentProps<'span'> & VariantProps<typeof statusDotVariants> & { pulse?: boolean }) {\n  return (\n    <span\n      data-slot=\"status-dot\"\n      className={cn('relative inline-flex', className)}\n      aria-hidden=\"true\"\n      {...props}\n    >\n      {pulse ? (\n        <span\n          className={cn(\n            statusDotVariants({ status }),\n            'absolute inset-0 animate-ping opacity-40 motion-reduce:hidden',\n          )}\n        />\n      ) : null}\n      <span className={statusDotVariants({ status })} />\n    </span>\n  );\n}\n\nfunction Status({\n  className,\n  status,\n  pulse,\n  children,\n  ...props\n}: React.ComponentProps<'span'> & VariantProps<typeof statusDotVariants> & { pulse?: boolean }) {\n  return (\n    <span\n      data-slot=\"status\"\n      className={cn(\n        'inline-flex items-center gap-2 text-xs font-medium text-muted-foreground',\n        className,\n      )}\n      {...props}\n    >\n      <StatusDot status={status} pulse={pulse} />\n      {children}\n    </span>\n  );\n}\n\nexport { Status, StatusDot, statusDotVariants };\n"],"mappings":";;;;;AAKA,IAAM,oBAAoB,IAAI,uDAAuD;CACnF,UAAU,EACR,QAAQ;EACN,SAAS;EACT,OAAO;EACP,SAAS;EACT,SAAS;EACT,QAAQ;EACR,MAAM;CACR,EACF;CACA,iBAAiB,EAAE,QAAQ,UAAU;AACvC,CAAC;AAED,SAAS,UAAU,EACjB,WACA,QACA,QAAQ,OACR,GAAG,SAC2F;CAC9F,OACE,qBAAC,QAAD;EACE,aAAU;EACV,WAAW,GAAG,wBAAwB,SAAS;EAC/C,eAAY;EACZ,GAAI;EAJN,UAAA,CAMG,QACC,oBAAC,QAAD,EACE,WAAW,GACT,kBAAkB,EAAE,OAAO,CAAC,GAC5B,+DACF,EACD,CAAA,IACC,MACJ,oBAAC,QAAD,EAAM,WAAW,kBAAkB,EAAE,OAAO,CAAC,EAAI,CAAA,CAC7C;;AAEV;AAEA,SAAS,OAAO,EACd,WACA,QACA,OACA,UACA,GAAG,SAC2F;CAC9F,OACE,qBAAC,QAAD;EACE,aAAU;EACV,WAAW,GACT,4EACA,SACF;EACA,GAAI;EANN,UAAA,CAQE,oBAAC,WAAD;GAAmB;GAAe;EAAQ,CAAA,GACzC,QACG;;AAEV"}
+{"version":3,"file":"status.js","names":[],"sources":["../../src/components/status.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nconst statusDotVariants = cva('size-2 shrink-0 rounded-full ring-2 ring-current/10', {\n  variants: {\n    status: {\n      neutral: 'bg-muted-foreground text-muted-foreground',\n      brand: 'bg-brand text-brand',\n      success: 'bg-success text-success',\n      warning: 'bg-warning text-warning',\n      destructive: 'bg-destructive text-destructive',\n      /** 0.x name for `destructive`; kept so existing apps keep compiling. */\n      danger: 'bg-destructive text-destructive',\n      info: 'bg-info text-info',\n    },\n  },\n  defaultVariants: { status: 'neutral' },\n});\n\nexport type StatusTone = NonNullable<VariantProps<typeof statusDotVariants>['status']>;\n\nexport interface StatusDotProps\n  extends React.ComponentProps<'span'>, VariantProps<typeof statusDotVariants> {\n  /** A ripple for a live state (running, connecting). Still under reduced motion. */\n  pulse?: boolean;\n}\n\nconst StatusDot = React.forwardRef<HTMLSpanElement, StatusDotProps>(function StatusDot(\n  { className, status, pulse = false, ...props },\n  ref,\n) {\n  return (\n    <span\n      ref={ref}\n      data-slot=\"status-dot\"\n      data-status={status ?? 'neutral'}\n      className={cn('relative inline-flex', className)}\n      aria-hidden=\"true\"\n      {...props}\n    >\n      {pulse ? (\n        <span\n          className={cn(\n            statusDotVariants({ status }),\n            'absolute inset-0 animate-ping opacity-40 motion-reduce:hidden',\n          )}\n        />\n      ) : null}\n      <span className={statusDotVariants({ status })} />\n    </span>\n  );\n});\n\nconst Status = React.forwardRef<HTMLSpanElement, StatusDotProps>(function Status(\n  { className, status, pulse, children, ...props },\n  ref,\n) {\n  return (\n    <span\n      ref={ref}\n      data-slot=\"status\"\n      data-status={status ?? 'neutral'}\n      className={cn(\n        'inline-flex items-center gap-2 text-xs font-medium text-muted-foreground',\n        className,\n      )}\n      {...props}\n    >\n      <StatusDot status={status} pulse={pulse} />\n      {children}\n    </span>\n  );\n});\n\nexport { Status, StatusDot, statusDotVariants };\n"],"mappings":";;;;;;AAKA,IAAM,oBAAoB,IAAI,uDAAuD;CACnF,UAAU,EACR,QAAQ;EACN,SAAS;EACT,OAAO;EACP,SAAS;EACT,SAAS;EACT,aAAa;;EAEb,QAAQ;EACR,MAAM;CACR,EACF;CACA,iBAAiB,EAAE,QAAQ,UAAU;AACvC,CAAC;AAUD,IAAM,YAAY,MAAM,WAA4C,SAAS,UAC3E,EAAE,WAAW,QAAQ,QAAQ,OAAO,GAAG,SACvC,KACA;CACA,OACE,qBAAC,QAAD;EACO;EACL,aAAU;EACV,eAAa,UAAU;EACvB,WAAW,GAAG,wBAAwB,SAAS;EAC/C,eAAY;EACZ,GAAI;EANN,UAAA,CAQG,QACC,oBAAC,QAAD,EACE,WAAW,GACT,kBAAkB,EAAE,OAAO,CAAC,GAC5B,+DACF,EACD,CAAA,IACC,MACJ,oBAAC,QAAD,EAAM,WAAW,kBAAkB,EAAE,OAAO,CAAC,EAAI,CAAA,CAC7C;;AAEV,CAAC;AAED,IAAM,SAAS,MAAM,WAA4C,SAAS,OACxE,EAAE,WAAW,QAAQ,OAAO,UAAU,GAAG,SACzC,KACA;CACA,OACE,qBAAC,QAAD;EACO;EACL,aAAU;EACV,eAAa,UAAU;EACvB,WAAW,GACT,4EACA,SACF;EACA,GAAI;EARN,UAAA,CAUE,oBAAC,WAAD;GAAmB;GAAe;EAAQ,CAAA,GACzC,QACG;;AAEV,CAAC"}

package/dist/components/steps.d.ts

@@ -23,5 +23,5 @@ export interface StepsProps extends React.ComponentProps<'ol'> {
  * phone a horizontal Steps collapses to the current step, "Step 2 of 5" and
  * a progress bar, instead of squeezing every title into a few letters.
  */
-declare function Steps({ items, current, orientation, compactBelow, formatCounter, className, ...props }: StepsProps): React.JSX.Element;
+declare const Steps: React.ForwardRefExoticComponent<Omit<StepsProps, "ref"> & React.RefAttributes<HTMLOListElement>>;
 export { Steps };

package/dist/components/steps.js

@@ -1,5 +1,6 @@
+"use client";
 import { cn } from "../lib/utils.js";
-import "react";
+import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import Check from "@burtson-labs/icons/react/check";
 //#region src/components/steps.tsx
@@ -34,10 +35,11 @@ var compactClasses = {
 * phone a horizontal Steps collapses to the current step, "Step 2 of 5" and
 * a progress bar, instead of squeezing every title into a few letters.
 */
-function Steps({ items, current, orientation = "horizontal", compactBelow = orientation === "horizontal" ? "sm" : false, formatCounter = (step, total) => `Step ${step} of ${total}`, className, ...props }) {
+var Steps = React.forwardRef(function Steps({ items, current, orientation = "horizontal", compactBelow = orientation === "horizontal" ? "sm" : false, formatCounter = (step, total) => `Step ${step} of ${total}`, className, ...props }, ref) {
 	const compact = compactBelow ? compactClasses[compactBelow] : null;
 	const focus = Math.min(Math.max(0, current), items.length - 1);
 	return /* @__PURE__ */ jsx("ol", {
+		ref,
 		"data-slot": "steps",
 		"data-orientation": orientation,
 		className: cn("flex gap-3", orientation === "horizontal" ? "flex-row items-start" : "flex-col", className),
@@ -84,7 +86,7 @@ function Steps({ items, current, orientation = "horizontal", compactBelow = orie
 			}, i);
 		})
 	});
-}
+});
 //#endregion
 export { Steps };
 

package/dist/components/steps.js.map

@@ -1 +1 @@
-{"version":3,"file":"steps.js","names":["_Fragment"],"sources":["../../src/components/steps.tsx"],"sourcesContent":["import Check from '@burtson-labs/icons/react/check';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nexport interface StepItem {\n  title: React.ReactNode;\n  description?: React.ReactNode;\n}\n\nexport type StepsBreakpoint = 'sm' | 'md' | 'lg';\n\nexport interface StepsProps extends React.ComponentProps<'ol'> {\n  items: StepItem[];\n  /** 0-based index of the step in progress; earlier steps show as done. */\n  current: number;\n  orientation?: 'horizontal' | 'vertical';\n  /**\n   * Below this width a horizontal Steps shows only where you are: the step's\n   * title, \"Step 2 of 5\" and a segmented progress bar. `sm` (640px) by\n   * default for horizontal steps; `false` keeps every step visible.\n   */\n  compactBelow?: StepsBreakpoint | false;\n  /** The compact counter's text. */\n  formatCounter?: (step: number, total: number) => string;\n}\n\n// Written out in full per breakpoint so Tailwind finds every class.\nconst compactClasses: Record<\n  StepsBreakpoint,\n  { other: string; item: string; marker: string; counter: string; bar: string; text: string }\n> = {\n  sm: {\n    other: 'max-sm:hidden',\n    item: 'max-sm:grid max-sm:grid-cols-[minmax(0,1fr)_auto] max-sm:items-baseline max-sm:gap-x-3 max-sm:gap-y-2',\n    marker: 'max-sm:hidden',\n    counter: 'hidden max-sm:block',\n    bar: 'hidden max-sm:flex max-sm:col-span-2',\n    text: 'max-sm:pt-0',\n  },\n  md: {\n    other: 'max-md:hidden',\n    item: 'max-md:grid max-md:grid-cols-[minmax(0,1fr)_auto] max-md:items-baseline max-md:gap-x-3 max-md:gap-y-2',\n    marker: 'max-md:hidden',\n    counter: 'hidden max-md:block',\n    bar: 'hidden max-md:flex max-md:col-span-2',\n    text: 'max-md:pt-0',\n  },\n  lg: {\n    other: 'max-lg:hidden',\n    item: 'max-lg:grid max-lg:grid-cols-[minmax(0,1fr)_auto] max-lg:items-baseline max-lg:gap-x-3 max-lg:gap-y-2',\n    marker: 'max-lg:hidden',\n    counter: 'hidden max-lg:block',\n    bar: 'hidden max-lg:flex max-lg:col-span-2',\n    text: 'max-lg:pt-0',\n  },\n};\n\n/**\n * Progress through a short multi-step flow (a wizard, an onboarding). On a\n * phone a horizontal Steps collapses to the current step, \"Step 2 of 5\" and\n * a progress bar, instead of squeezing every title into a few letters.\n */\nfunction Steps({\n  items,\n  current,\n  orientation = 'horizontal',\n  compactBelow = orientation === 'horizontal' ? 'sm' : false,\n  formatCounter = (step, total) => `Step ${step} of ${total}`,\n  className,\n  ...props\n}: StepsProps) {\n  const compact = compactBelow ? compactClasses[compactBelow] : null;\n  // The step the compact form shows: the current one, or the last when all are done.\n  const focus = Math.min(Math.max(0, current), items.length - 1);\n  return (\n    <ol\n      data-slot=\"steps\"\n      data-orientation={orientation}\n      className={cn(\n        'flex gap-3',\n        orientation === 'horizontal' ? 'flex-row items-start' : 'flex-col',\n        className,\n      )}\n      {...props}\n    >\n      {items.map((item, i) => {\n        const state = i < current ? 'complete' : i === current ? 'current' : 'upcoming';\n        const isFocus = compact && i === focus;\n        return (\n          <li\n            key={i}\n            data-state={state}\n            aria-current={state === 'current' ? 'step' : undefined}\n            className={cn(\n              'flex min-w-0 items-start gap-2.5',\n              orientation === 'horizontal' && 'flex-1',\n              compact && (isFocus ? compact.item : compact.other),\n            )}\n          >\n            <span\n              className={cn(\n                'grid size-6 shrink-0 place-items-center rounded-full border text-xs font-semibold tabular-nums',\n                state === 'complete' && 'border-primary bg-primary text-primary-foreground',\n                state === 'current' && 'border-brand bg-brand-soft text-brand',\n                state === 'upcoming' && 'border-border-strong text-muted-foreground',\n                isFocus && compact.marker,\n              )}\n            >\n              {state === 'complete' ? <Check className=\"size-3.5\" aria-hidden /> : i + 1}\n            </span>\n            <span className={cn('grid min-w-0 gap-0.5 pt-0.5', isFocus && compact.text)}>\n              <span\n                className={cn(\n                  'break-words text-[13px] font-semibold',\n                  state === 'upcoming' && 'text-muted-foreground',\n                )}\n              >\n                {item.title}\n                <span className=\"sr-only\">\n                  {state === 'complete' ? ' (done)' : state === 'current' ? ' (current)' : ''}\n                </span>\n              </span>\n              {item.description && (\n                <span className=\"text-xs text-muted-foreground\">{item.description}</span>\n              )}\n            </span>\n            {isFocus && (\n              <>\n                <span\n                  data-slot=\"steps-counter\"\n                  className={cn(\n                    'text-xs whitespace-nowrap text-muted-foreground tabular-nums',\n                    compact.counter,\n                  )}\n                >\n                  {formatCounter(focus + 1, items.length)}\n                </span>\n                <span data-slot=\"steps-bar\" aria-hidden className={cn('gap-1', compact.bar)}>\n                  {items.map((_, j) => (\n                    <span\n                      key={j}\n                      className={cn(\n                        'h-1 flex-1 rounded-full',\n                        j <= current ? 'bg-brand' : 'bg-muted',\n                      )}\n                    />\n                  ))}\n                </span>\n              </>\n            )}\n          </li>\n        );\n      })}\n    </ol>\n  );\n}\n\nexport { Steps };\n"],"mappings":";;;;;AA4BA,IAAM,iBAGF;CACF,IAAI;EACF,OAAO;EACP,MAAM;EACN,QAAQ;EACR,SAAS;EACT,KAAK;EACL,MAAM;CACR;CACA,IAAI;EACF,OAAO;EACP,MAAM;EACN,QAAQ;EACR,SAAS;EACT,KAAK;EACL,MAAM;CACR;CACA,IAAI;EACF,OAAO;EACP,MAAM;EACN,QAAQ;EACR,SAAS;EACT,KAAK;EACL,MAAM;CACR;AACF;;;;;;AAOA,SAAS,MAAM,EACb,OACA,SACA,cAAc,cACd,eAAe,gBAAgB,eAAe,OAAO,OACrD,iBAAiB,MAAM,UAAU,QAAQ,KAAK,MAAM,SACpD,WACA,GAAG,SACU;CACb,MAAM,UAAU,eAAe,eAAe,gBAAgB;CAE9D,MAAM,QAAQ,KAAK,IAAI,KAAK,IAAI,GAAG,OAAO,GAAG,MAAM,SAAS,CAAC;CAC7D,OACE,oBAAC,MAAD;EACE,aAAU;EACV,oBAAkB;EAClB,WAAW,GACT,cACA,gBAAgB,eAAe,yBAAyB,YACxD,SACF;EACA,GAAI;EAEH,UAAA,MAAM,KAAK,MAAM,MAAM;GACtB,MAAM,QAAQ,IAAI,UAAU,aAAa,MAAM,UAAU,YAAY;GACrE,MAAM,UAAU,WAAW,MAAM;GACjC,OACE,qBAAC,MAAD;IAEE,cAAY;IACZ,gBAAc,UAAU,YAAY,SAAS,KAAA;IAC7C,WAAW,GACT,oCACA,gBAAgB,gBAAgB,UAChC,YAAY,UAAU,QAAQ,OAAO,QAAQ,MAC/C;IARF,UAAA;KAUE,oBAAC,QAAD;MACE,WAAW,GACT,kGACA,UAAU,cAAc,qDACxB,UAAU,aAAa,yCACvB,UAAU,cAAc,8CACxB,WAAW,QAAQ,MACrB;MAEC,UAAA,UAAU,aAAa,oBAAC,OAAD;OAAO,WAAU;OAAW,eAAA;MAAa,CAAA,IAAI,IAAI;KACrE,CAAA;KACN,qBAAC,QAAD;MAAM,WAAW,GAAG,+BAA+B,WAAW,QAAQ,IAAI;MAA1E,UAAA,CACE,qBAAC,QAAD;OACE,WAAW,GACT,yCACA,UAAU,cAAc,uBAC1B;OAJF,UAAA,CAMG,KAAK,OACN,oBAAC,QAAD;QAAM,WAAU;QACb,UAAA,UAAU,aAAa,YAAY,UAAU,YAAY,eAAe;OACrE,CAAA,CACF;MACL,CAAA,GAAA,KAAK,eACJ,oBAAC,QAAD;OAAM,WAAU;OAAiC,UAAA,KAAK;MAAkB,CAAA,CAEtE;;KACL,WACC,qBAAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;MACE,aAAU;MACV,WAAW,GACT,gEACA,QAAQ,OACV;MAEC,UAAA,cAAc,QAAQ,GAAG,MAAM,MAAM;KAClC,CAAA,GACN,oBAAC,QAAD;MAAM,aAAU;MAAY,eAAA;MAAY,WAAW,GAAG,SAAS,QAAQ,GAAG;MACvE,UAAA,MAAM,KAAK,GAAG,MACb,oBAAC,QAAD,EAEE,WAAW,GACT,2BACA,KAAK,UAAU,aAAa,UAC9B,EACD,GALM,CAKN,CACF;KACG,CAAA,CACN,EAAA,CAAA;IAEF;GA5DG,GAAA,CA4DH;EAER,CAAC;CACC,CAAA;AAER"}
+{"version":3,"file":"steps.js","names":["_Fragment"],"sources":["../../src/components/steps.tsx"],"sourcesContent":["import Check from '@burtson-labs/icons/react/check';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nexport interface StepItem {\n  title: React.ReactNode;\n  description?: React.ReactNode;\n}\n\nexport type StepsBreakpoint = 'sm' | 'md' | 'lg';\n\nexport interface StepsProps extends React.ComponentProps<'ol'> {\n  items: StepItem[];\n  /** 0-based index of the step in progress; earlier steps show as done. */\n  current: number;\n  orientation?: 'horizontal' | 'vertical';\n  /**\n   * Below this width a horizontal Steps shows only where you are: the step's\n   * title, \"Step 2 of 5\" and a segmented progress bar. `sm` (640px) by\n   * default for horizontal steps; `false` keeps every step visible.\n   */\n  compactBelow?: StepsBreakpoint | false;\n  /** The compact counter's text. */\n  formatCounter?: (step: number, total: number) => string;\n}\n\n// Written out in full per breakpoint so Tailwind finds every class.\nconst compactClasses: Record<\n  StepsBreakpoint,\n  { other: string; item: string; marker: string; counter: string; bar: string; text: string }\n> = {\n  sm: {\n    other: 'max-sm:hidden',\n    item: 'max-sm:grid max-sm:grid-cols-[minmax(0,1fr)_auto] max-sm:items-baseline max-sm:gap-x-3 max-sm:gap-y-2',\n    marker: 'max-sm:hidden',\n    counter: 'hidden max-sm:block',\n    bar: 'hidden max-sm:flex max-sm:col-span-2',\n    text: 'max-sm:pt-0',\n  },\n  md: {\n    other: 'max-md:hidden',\n    item: 'max-md:grid max-md:grid-cols-[minmax(0,1fr)_auto] max-md:items-baseline max-md:gap-x-3 max-md:gap-y-2',\n    marker: 'max-md:hidden',\n    counter: 'hidden max-md:block',\n    bar: 'hidden max-md:flex max-md:col-span-2',\n    text: 'max-md:pt-0',\n  },\n  lg: {\n    other: 'max-lg:hidden',\n    item: 'max-lg:grid max-lg:grid-cols-[minmax(0,1fr)_auto] max-lg:items-baseline max-lg:gap-x-3 max-lg:gap-y-2',\n    marker: 'max-lg:hidden',\n    counter: 'hidden max-lg:block',\n    bar: 'hidden max-lg:flex max-lg:col-span-2',\n    text: 'max-lg:pt-0',\n  },\n};\n\n/**\n * Progress through a short multi-step flow (a wizard, an onboarding). On a\n * phone a horizontal Steps collapses to the current step, \"Step 2 of 5\" and\n * a progress bar, instead of squeezing every title into a few letters.\n */\nconst Steps = React.forwardRef<HTMLOListElement, StepsProps>(function Steps(\n  {\n    items,\n    current,\n    orientation = 'horizontal',\n    compactBelow = orientation === 'horizontal' ? 'sm' : false,\n    formatCounter = (step, total) => `Step ${step} of ${total}`,\n    className,\n    ...props\n  },\n  ref,\n) {\n  const compact = compactBelow ? compactClasses[compactBelow] : null;\n  // The step the compact form shows: the current one, or the last when all are done.\n  const focus = Math.min(Math.max(0, current), items.length - 1);\n  return (\n    <ol\n      ref={ref}\n      data-slot=\"steps\"\n      data-orientation={orientation}\n      className={cn(\n        'flex gap-3',\n        orientation === 'horizontal' ? 'flex-row items-start' : 'flex-col',\n        className,\n      )}\n      {...props}\n    >\n      {items.map((item, i) => {\n        const state = i < current ? 'complete' : i === current ? 'current' : 'upcoming';\n        const isFocus = compact && i === focus;\n        return (\n          <li\n            key={i}\n            data-state={state}\n            aria-current={state === 'current' ? 'step' : undefined}\n            className={cn(\n              'flex min-w-0 items-start gap-2.5',\n              orientation === 'horizontal' && 'flex-1',\n              compact && (isFocus ? compact.item : compact.other),\n            )}\n          >\n            <span\n              className={cn(\n                'grid size-6 shrink-0 place-items-center rounded-full border text-xs font-semibold tabular-nums',\n                state === 'complete' && 'border-primary bg-primary text-primary-foreground',\n                state === 'current' && 'border-brand bg-brand-soft text-brand',\n                state === 'upcoming' && 'border-border-strong text-muted-foreground',\n                isFocus && compact.marker,\n              )}\n            >\n              {state === 'complete' ? <Check className=\"size-3.5\" aria-hidden /> : i + 1}\n            </span>\n            <span className={cn('grid min-w-0 gap-0.5 pt-0.5', isFocus && compact.text)}>\n              <span\n                className={cn(\n                  'break-words text-[13px] font-semibold',\n                  state === 'upcoming' && 'text-muted-foreground',\n                )}\n              >\n                {item.title}\n                <span className=\"sr-only\">\n                  {state === 'complete' ? ' (done)' : state === 'current' ? ' (current)' : ''}\n                </span>\n              </span>\n              {item.description && (\n                <span className=\"text-xs text-muted-foreground\">{item.description}</span>\n              )}\n            </span>\n            {isFocus && (\n              <>\n                <span\n                  data-slot=\"steps-counter\"\n                  className={cn(\n                    'text-xs whitespace-nowrap text-muted-foreground tabular-nums',\n                    compact.counter,\n                  )}\n                >\n                  {formatCounter(focus + 1, items.length)}\n                </span>\n                <span data-slot=\"steps-bar\" aria-hidden className={cn('gap-1', compact.bar)}>\n                  {items.map((_, j) => (\n                    <span\n                      key={j}\n                      className={cn(\n                        'h-1 flex-1 rounded-full',\n                        j <= current ? 'bg-brand' : 'bg-muted',\n                      )}\n                    />\n                  ))}\n                </span>\n              </>\n            )}\n          </li>\n        );\n      })}\n    </ol>\n  );\n});\n\nexport { Steps };\n"],"mappings":";;;;;;AA4BA,IAAM,iBAGF;CACF,IAAI;EACF,OAAO;EACP,MAAM;EACN,QAAQ;EACR,SAAS;EACT,KAAK;EACL,MAAM;CACR;CACA,IAAI;EACF,OAAO;EACP,MAAM;EACN,QAAQ;EACR,SAAS;EACT,KAAK;EACL,MAAM;CACR;CACA,IAAI;EACF,OAAO;EACP,MAAM;EACN,QAAQ;EACR,SAAS;EACT,KAAK;EACL,MAAM;CACR;AACF;;;;;;AAOA,IAAM,QAAQ,MAAM,WAAyC,SAAS,MACpE,EACE,OACA,SACA,cAAc,cACd,eAAe,gBAAgB,eAAe,OAAO,OACrD,iBAAiB,MAAM,UAAU,QAAQ,KAAK,MAAM,SACpD,WACA,GAAG,SAEL,KACA;CACA,MAAM,UAAU,eAAe,eAAe,gBAAgB;CAE9D,MAAM,QAAQ,KAAK,IAAI,KAAK,IAAI,GAAG,OAAO,GAAG,MAAM,SAAS,CAAC;CAC7D,OACE,oBAAC,MAAD;EACO;EACL,aAAU;EACV,oBAAkB;EAClB,WAAW,GACT,cACA,gBAAgB,eAAe,yBAAyB,YACxD,SACF;EACA,GAAI;EAEH,UAAA,MAAM,KAAK,MAAM,MAAM;GACtB,MAAM,QAAQ,IAAI,UAAU,aAAa,MAAM,UAAU,YAAY;GACrE,MAAM,UAAU,WAAW,MAAM;GACjC,OACE,qBAAC,MAAD;IAEE,cAAY;IACZ,gBAAc,UAAU,YAAY,SAAS,KAAA;IAC7C,WAAW,GACT,oCACA,gBAAgB,gBAAgB,UAChC,YAAY,UAAU,QAAQ,OAAO,QAAQ,MAC/C;IARF,UAAA;KAUE,oBAAC,QAAD;MACE,WAAW,GACT,kGACA,UAAU,cAAc,qDACxB,UAAU,aAAa,yCACvB,UAAU,cAAc,8CACxB,WAAW,QAAQ,MACrB;MAEC,UAAA,UAAU,aAAa,oBAAC,OAAD;OAAO,WAAU;OAAW,eAAA;MAAa,CAAA,IAAI,IAAI;KACrE,CAAA;KACN,qBAAC,QAAD;MAAM,WAAW,GAAG,+BAA+B,WAAW,QAAQ,IAAI;MAA1E,UAAA,CACE,qBAAC,QAAD;OACE,WAAW,GACT,yCACA,UAAU,cAAc,uBAC1B;OAJF,UAAA,CAMG,KAAK,OACN,oBAAC,QAAD;QAAM,WAAU;QACb,UAAA,UAAU,aAAa,YAAY,UAAU,YAAY,eAAe;OACrE,CAAA,CACF;MACL,CAAA,GAAA,KAAK,eACJ,oBAAC,QAAD;OAAM,WAAU;OAAiC,UAAA,KAAK;MAAkB,CAAA,CAEtE;;KACL,WACC,qBAAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;MACE,aAAU;MACV,WAAW,GACT,gEACA,QAAQ,OACV;MAEC,UAAA,cAAc,QAAQ,GAAG,MAAM,MAAM;KAClC,CAAA,GACN,oBAAC,QAAD;MAAM,aAAU;MAAY,eAAA;MAAY,WAAW,GAAG,SAAS,QAAQ,GAAG;MACvE,UAAA,MAAM,KAAK,GAAG,MACb,oBAAC,QAAD,EAEE,WAAW,GACT,2BACA,KAAK,UAAU,aAAa,UAC9B,EACD,GALM,CAKN,CACF;KACG,CAAA,CACN,EAAA,CAAA;IAEF;GA5DG,GAAA,CA4DH;EAER,CAAC;CACC,CAAA;AAER,CAAC"}

package/dist/components/switch.d.ts

@@ -1,4 +1,48 @@
-import { Switch as SwitchPrimitive } from 'radix-ui';
 import * as React from 'react';
-declare function Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>): React.JSX.Element;
-export { Switch };
+import * as SwitchPrimitive from '../primitives/vendor/radix/react-switch';
+/**
+ * A 36×20 toggle with a 44px hit area on touch screens; the off track is the
+ * field border tone (`input`, 3:1 on the page), the on track primary in light
+ * mode and brand in dark mode (see Checkbox), focus the shared 2px outline.
+ */
+declare const Switch: React.ForwardRefExoticComponent<Omit<SwitchPrimitive.SwitchProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export interface SwitchRowProps extends Omit<React.ComponentProps<typeof SwitchPrimitive.Root>, 'children'> {
+    /** The setting's name. */
+    label: React.ReactNode;
+    /** What it does, under the name. */
+    description?: React.ReactNode;
+    /** Beside the label: a Badge such as "Always on". */
+    badge?: React.ReactNode;
+    /** Padding for a row in a SwitchList. */
+    inset?: boolean;
+    /** A control that belongs to the switch (a minutes field for "Alert when late"), beside it on wide screens and under the label on phones. */
+    before?: React.ReactNode;
+    /** Extra classes for the row; className goes to the switch. */
+    rowClassName?: string;
+    /** Extra lines under the description. */
+    children?: React.ReactNode;
+}
+/**
+ * A setting that is on or off: what it is (and what it does) on the left,
+ * the switch on the right, level with the first line of the label. Several
+ * of them stack in a SwitchList.
+ */
+declare const SwitchRow: React.ForwardRefExoticComponent<Omit<SwitchRowProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export interface SwitchListProps extends React.ComponentProps<'div'> {
+    /** A rounded border around the list, for a list that is not already in a Card. */
+    bordered?: boolean;
+}
+/** SwitchRows (with `inset`) divided by rules, in a Card or a bordered box. */
+declare const SwitchList: React.ForwardRefExoticComponent<Omit<SwitchListProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface InlineSwitchProps extends Omit<React.ComponentProps<typeof SwitchPrimitive.Root>, 'children'> {
+    label: React.ReactNode;
+    /** Extra classes for the label; className goes to the switch. */
+    rowClassName?: string;
+}
+/**
+ * A filter that is on or off, in a row of filters: the switch first, its
+ * label after it, at least 44px tall on touch screens. (Settings put the
+ * switch on the right: SwitchRow.)
+ */
+declare const InlineSwitch: React.ForwardRefExoticComponent<Omit<InlineSwitchProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { InlineSwitch, Switch, SwitchList, SwitchRow };