@burtson-labs/ui 0.14.0 → 0.15.0

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,6 +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
@@ -10,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, {
@@ -34,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,6 +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
@@ -35,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),
@@ -85,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 * as React from 'react';
 import * as SwitchPrimitive from '../primitives/vendor/radix/react-switch';
-declare function Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>): React.JSX.Element;
-export { 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 };

package/dist/components/switch.js

@@ -1,21 +1,98 @@
 "use client";
-import { cn } from "../lib/utils.js";
+import { cn, focusRingClasses, touchTargetClasses } from "../lib/utils.js";
 import { Root as Switch$1, SwitchThumb } from "../primitives/vendor/radix/react-switch/switch.js";
-import "react";
-import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/switch.tsx
-function Switch({ className, ...props }) {
+/**
+* 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.
+*/
+var Switch = React.forwardRef(function Switch({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Switch$1, {
+		ref,
 		"data-slot": "switch",
-		className: cn("peer inline-flex h-5 w-9 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-colors outline-none focus-visible:ring-[3px] focus-visible:ring-ring/20 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-border-strong", className),
+		className: cn("peer inline-flex h-5 w-9 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-colors disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input data-[state=unchecked]:hover:bg-muted-foreground/70 dark:data-[state=checked]:bg-brand", focusRingClasses, touchTargetClasses, className),
 		...props,
 		children: /* @__PURE__ */ jsx(SwitchThumb, {
 			"data-slot": "switch-thumb",
-			className: "pointer-events-none block size-4 rounded-full bg-background shadow-sm ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-1px)] data-[state=unchecked]:translate-x-px dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground/80"
+			className: "pointer-events-none block size-4 rounded-full bg-background shadow-sm ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-1px)] data-[state=unchecked]:translate-x-px dark:data-[state=checked]:bg-background dark:data-[state=unchecked]:bg-foreground/80"
 		})
 	});
-}
+});
+/**
+* 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.
+*/
+var SwitchRow = React.forwardRef(function SwitchRow({ label, description, badge, inset, before, id: idProp, className, rowClassName, children, ...props }, ref) {
+	const auto = React.useId();
+	const id = idProp ?? auto;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "switch-row",
+		className: cn("grid grid-cols-[minmax(0,1fr)_auto] items-start gap-x-4", before && "gap-y-2 sm:grid-cols-[minmax(0,1fr)_auto_auto]", inset && "px-4 py-3.5 sm:px-5 sm:py-4", rowClassName),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "grid min-w-0 gap-1",
+				children: [
+					/* @__PURE__ */ jsxs("label", {
+						htmlFor: id,
+						className: "flex min-h-5 flex-wrap items-center gap-x-2 gap-y-1 text-sm leading-5 font-medium",
+						children: [label, badge]
+					}),
+					description && /* @__PURE__ */ jsx("p", {
+						id: `${id}-description`,
+						className: "text-[13px] leading-5 text-muted-foreground",
+						children: description
+					}),
+					children
+				]
+			}),
+			before && /* @__PURE__ */ jsx("div", {
+				className: "col-start-1 row-start-2 flex items-center sm:col-start-2 sm:row-start-1 sm:-my-2",
+				children: before
+			}),
+			/* @__PURE__ */ jsx(Switch, {
+				ref,
+				id,
+				"aria-describedby": description ? `${id}-description` : void 0,
+				className: cn("col-start-2 row-start-1", before && "sm:col-start-3", className),
+				...props
+			})
+		]
+	});
+});
+/** SwitchRows (with `inset`) divided by rules, in a Card or a bordered box. */
+var SwitchList = React.forwardRef(function SwitchList({ bordered, className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "switch-list",
+		className: cn("grid divide-y divide-border", bordered && "rounded-lg border", className),
+		...props
+	});
+});
+/**
+* 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.)
+*/
+var InlineSwitch = React.forwardRef(function InlineSwitch({ label, id: idProp, className, rowClassName, ...props }, ref) {
+	const auto = React.useId();
+	const id = idProp ?? auto;
+	return /* @__PURE__ */ jsxs("label", {
+		htmlFor: id,
+		"data-slot": "inline-switch",
+		className: cn("flex min-h-5 cursor-pointer items-center gap-2.5 text-sm leading-5 has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-60 pointer-coarse:min-h-11", rowClassName),
+		children: [/* @__PURE__ */ jsx(Switch, {
+			ref,
+			id,
+			className,
+			...props
+		}), label]
+	});
+});
 //#endregion
-export { Switch };
+export { InlineSwitch, Switch, SwitchList, SwitchRow };
 
 //# sourceMappingURL=switch.js.map

package/dist/components/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.js","names":["SwitchPrimitive.Root","SwitchPrimitive.Thumb"],"sources":["../../src/components/switch.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../lib/utils';\nimport * as SwitchPrimitive from '../primitives/vendor/radix/react-switch';\n\nfunction Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>) {\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      className={cn(\n        'peer inline-flex h-5 w-9 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-colors outline-none focus-visible:ring-[3px] focus-visible:ring-ring/20 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-border-strong',\n        className,\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className=\"pointer-events-none block size-4 rounded-full bg-background shadow-sm ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-1px)] data-[state=unchecked]:translate-x-px dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground/80\"\n      />\n    </SwitchPrimitive.Root>\n  );\n}\n\nexport { Switch };\n"],"mappings":";;;;;;AAKA,SAAS,OAAO,EAAE,WAAW,GAAG,SAA4D;CAC1F,OACE,oBAACA,UAAD;EACE,aAAU;EACV,WAAW,GACT,8SACA,SACF;EACA,GAAI;EAEJ,UAAA,oBAACC,aAAD;GACE,aAAU;GACV,WAAU;EACX,CAAA;CACmB,CAAA;AAE1B"}
+{"version":3,"file":"switch.js","names":["SwitchPrimitive.Root","SwitchPrimitive.Thumb"],"sources":["../../src/components/switch.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn, focusRingClasses, touchTargetClasses } from '../lib/utils';\nimport * as SwitchPrimitive from '../primitives/vendor/radix/react-switch';\n\n/**\n * A 36×20 toggle with a 44px hit area on touch screens; the off track is the\n * field border tone (`input`, 3:1 on the page), the on track primary in light\n * mode and brand in dark mode (see Checkbox), focus the shared 2px outline.\n */\nconst Switch = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<typeof SwitchPrimitive.Root>\n>(function Switch({ className, ...props }, ref) {\n  return (\n    <SwitchPrimitive.Root\n      ref={ref}\n      data-slot=\"switch\"\n      className={cn(\n        'peer inline-flex h-5 w-9 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-colors disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input data-[state=unchecked]:hover:bg-muted-foreground/70 dark:data-[state=checked]:bg-brand',\n        focusRingClasses,\n        touchTargetClasses,\n        className,\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className=\"pointer-events-none block size-4 rounded-full bg-background shadow-sm ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-1px)] data-[state=unchecked]:translate-x-px dark:data-[state=checked]:bg-background dark:data-[state=unchecked]:bg-foreground/80\"\n      />\n    </SwitchPrimitive.Root>\n  );\n});\n\nexport interface SwitchRowProps extends Omit<\n  React.ComponentProps<typeof SwitchPrimitive.Root>,\n  'children'\n> {\n  /** The setting's name. */\n  label: React.ReactNode;\n  /** What it does, under the name. */\n  description?: React.ReactNode;\n  /** Beside the label: a Badge such as \"Always on\". */\n  badge?: React.ReactNode;\n  /** Padding for a row in a SwitchList. */\n  inset?: boolean;\n  /** 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. */\n  before?: React.ReactNode;\n  /** Extra classes for the row; className goes to the switch. */\n  rowClassName?: string;\n  /** Extra lines under the description. */\n  children?: React.ReactNode;\n}\n\n/**\n * A setting that is on or off: what it is (and what it does) on the left,\n * the switch on the right, level with the first line of the label. Several\n * of them stack in a SwitchList.\n */\nconst SwitchRow = React.forwardRef<HTMLButtonElement, SwitchRowProps>(function SwitchRow(\n  {\n    label,\n    description,\n    badge,\n    inset,\n    before,\n    id: idProp,\n    className,\n    rowClassName,\n    children,\n    ...props\n  },\n  ref,\n) {\n  const auto = React.useId();\n  const id = idProp ?? auto;\n  return (\n    <div\n      data-slot=\"switch-row\"\n      className={cn(\n        'grid grid-cols-[minmax(0,1fr)_auto] items-start gap-x-4',\n        before && 'gap-y-2 sm:grid-cols-[minmax(0,1fr)_auto_auto]',\n        inset && 'px-4 py-3.5 sm:px-5 sm:py-4',\n        rowClassName,\n      )}\n    >\n      <div className=\"grid min-w-0 gap-1\">\n        <label\n          htmlFor={id}\n          className=\"flex min-h-5 flex-wrap items-center gap-x-2 gap-y-1 text-sm leading-5 font-medium\"\n        >\n          {label}\n          {badge}\n        </label>\n        {description && (\n          <p id={`${id}-description`} className=\"text-[13px] leading-5 text-muted-foreground\">\n            {description}\n          </p>\n        )}\n        {children}\n      </div>\n      {before && (\n        <div className=\"col-start-1 row-start-2 flex items-center sm:col-start-2 sm:row-start-1 sm:-my-2\">\n          {before}\n        </div>\n      )}\n      <Switch\n        ref={ref}\n        id={id}\n        aria-describedby={description ? `${id}-description` : undefined}\n        className={cn('col-start-2 row-start-1', before && 'sm:col-start-3', className)}\n        {...props}\n      />\n    </div>\n  );\n});\n\nexport interface SwitchListProps extends React.ComponentProps<'div'> {\n  /** A rounded border around the list, for a list that is not already in a Card. */\n  bordered?: boolean;\n}\n\n/** SwitchRows (with `inset`) divided by rules, in a Card or a bordered box. */\nconst SwitchList = React.forwardRef<HTMLDivElement, SwitchListProps>(function SwitchList(\n  { bordered, className, ...props },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      data-slot=\"switch-list\"\n      className={cn('grid divide-y divide-border', bordered && 'rounded-lg border', className)}\n      {...props}\n    />\n  );\n});\n\nexport interface InlineSwitchProps extends Omit<\n  React.ComponentProps<typeof SwitchPrimitive.Root>,\n  'children'\n> {\n  label: React.ReactNode;\n  /** Extra classes for the label; className goes to the switch. */\n  rowClassName?: string;\n}\n\n/**\n * A filter that is on or off, in a row of filters: the switch first, its\n * label after it, at least 44px tall on touch screens. (Settings put the\n * switch on the right: SwitchRow.)\n */\nconst InlineSwitch = React.forwardRef<HTMLButtonElement, InlineSwitchProps>(function InlineSwitch(\n  { label, id: idProp, className, rowClassName, ...props },\n  ref,\n) {\n  const auto = React.useId();\n  const id = idProp ?? auto;\n  return (\n    <label\n      htmlFor={id}\n      data-slot=\"inline-switch\"\n      className={cn(\n        'flex min-h-5 cursor-pointer items-center gap-2.5 text-sm leading-5 has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-60 pointer-coarse:min-h-11',\n        rowClassName,\n      )}\n    >\n      <Switch ref={ref} id={id} className={className} {...props} />\n      {label}\n    </label>\n  );\n});\n\nexport { InlineSwitch, Switch, SwitchList, SwitchRow };\n"],"mappings":";;;;;;;;;;;AAUA,IAAM,SAAS,MAAM,WAGnB,SAAS,OAAO,EAAE,WAAW,GAAG,SAAS,KAAK;CAC9C,OACE,oBAACA,UAAD;EACO;EACL,aAAU;EACV,WAAW,GACT,4TACA,kBACA,oBACA,SACF;EACA,GAAI;EAEJ,UAAA,oBAACC,aAAD;GACE,aAAU;GACV,WAAU;EACX,CAAA;CACmB,CAAA;AAE1B,CAAC;;;;;;AA2BD,IAAM,YAAY,MAAM,WAA8C,SAAS,UAC7E,EACE,OACA,aACA,OACA,OACA,QACA,IAAI,QACJ,WACA,cACA,UACA,GAAG,SAEL,KACA;CACA,MAAM,OAAO,MAAM,MAAM;CACzB,MAAM,KAAK,UAAU;CACrB,OACE,qBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,2DACA,UAAU,kDACV,SAAS,+BACT,YACF;EAPF,UAAA;GASE,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,qBAAC,SAAD;MACE,SAAS;MACT,WAAU;MAFZ,UAAA,CAIG,OACA,KACI;;KACN,eACC,oBAAC,KAAD;MAAG,IAAI,GAAG,GAAG;MAAe,WAAU;MACnC,UAAA;KACA,CAAA;KAEJ;IACE;;GACJ,UACC,oBAAC,OAAD;IAAK,WAAU;IACZ,UAAA;GACE,CAAA;GAEP,oBAAC,QAAD;IACO;IACD;IACJ,oBAAkB,cAAc,GAAG,GAAG,gBAAgB,KAAA;IACtD,WAAW,GAAG,2BAA2B,UAAU,kBAAkB,SAAS;IAC9E,GAAI;GACL,CAAA;EACE;;AAET,CAAC;;AAQD,IAAM,aAAa,MAAM,WAA4C,SAAS,WAC5E,EAAE,UAAU,WAAW,GAAG,SAC1B,KACA;CACA,OACE,oBAAC,OAAD;EACO;EACL,aAAU;EACV,WAAW,GAAG,+BAA+B,YAAY,qBAAqB,SAAS;EACvF,GAAI;CACL,CAAA;AAEL,CAAC;;;;;;AAgBD,IAAM,eAAe,MAAM,WAAiD,SAAS,aACnF,EAAE,OAAO,IAAI,QAAQ,WAAW,cAAc,GAAG,SACjD,KACA;CACA,MAAM,OAAO,MAAM,MAAM;CACzB,MAAM,KAAK,UAAU;CACrB,OACE,qBAAC,SAAD;EACE,SAAS;EACT,aAAU;EACV,WAAW,GACT,4JACA,YACF;EANF,UAAA,CAQE,oBAAC,QAAD;GAAa;GAAS;GAAe;GAAW,GAAI;EAAQ,CAAA,GAC3D,KACI;;AAEX,CAAC"}

package/dist/components/table.d.ts

@@ -17,21 +17,38 @@ export interface TableProps extends React.ComponentProps<'table'> {
      * can scroll it (WCAG 2.1.1, axe scrollable-region-focusable).
      */
     scrollLabel?: string;
+    /**
+     * Keep the first column in view while the table scrolls sideways (a name
+     * column beside numbers). The pinned cells take the surface colour.
+     */
+    pinFirstColumn?: boolean;
+    /**
+     * The line under a table that scrolls sideways, until it is scrolled to the
+     * end. Shown on touch screens only (a mouse has a scrollbar). `false`
+     * turns it off.
+     */
+    overflowHint?: React.ReactNode | false;
 }
-declare function Table({ className, density, stickyHeader, containerClassName, containerProps, scrollLabel, ...props }: TableProps): React.JSX.Element;
-declare function TableHeader({ className, ...props }: React.ComponentProps<'thead'>): React.JSX.Element;
-declare function TableBody({ className, ...props }: React.ComponentProps<'tbody'>): React.JSX.Element;
-declare function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>): React.JSX.Element;
-/** Set `data-state="selected"` (or `selected`) to mark a chosen row. */
-declare function TableRow({ className, selected, ...props }: React.ComponentProps<'tr'> & {
+/** How a box overflows sideways: more to the `end`, more to the `start`, or `both`. */
+export declare function overflowState(el: {
+    scrollLeft: number;
+    scrollWidth: number;
+    clientWidth: number;
+}): 'start' | 'end' | 'both' | undefined;
+declare const Table: React.ForwardRefExoticComponent<Omit<TableProps, "ref"> & React.RefAttributes<HTMLTableElement>>;
+declare const TableHeader: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableBody: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableFooter: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & React.RefAttributes<HTMLTableSectionElement>>;
+/** Set `selected` to mark a chosen row: a soft fill and a brand bar on its left edge. */
+declare const TableRow: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLTableRowElement> & React.HTMLAttributes<HTMLTableRowElement> & {
     selected?: boolean;
-}): React.JSX.Element;
+}, "ref"> & React.RefAttributes<HTMLTableRowElement>>;
 /** `numeric` right-aligns with tabular figures, for counts, money and durations. */
-declare function TableHead({ className, numeric, ...props }: React.ComponentProps<'th'> & {
+declare const TableHead: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLTableHeaderCellElement> & React.ThHTMLAttributes<HTMLTableHeaderCellElement> & {
     numeric?: boolean;
-}): React.JSX.Element;
-declare function TableCell({ className, numeric, ...props }: React.ComponentProps<'td'> & {
+}, "ref"> & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableCell: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLTableDataCellElement> & React.TdHTMLAttributes<HTMLTableDataCellElement> & {
     numeric?: boolean;
-}): React.JSX.Element;
-declare function TableCaption({ className, ...props }: React.ComponentProps<'caption'>): React.JSX.Element;
+}, "ref"> & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableCaption: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLTableCaptionElement>>;
 export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };