@burtson-labs/ui 0.14.0 → 0.14.1

package/dist/components/attachment.js

@@ -5,10 +5,10 @@ import { Progress } from "./progress.js";
 import { Spinner } from "./spinner.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import X from "@burtson-labs/icons/react/x";
 import AlertCircle from "@burtson-labs/icons/react/alert-circle";
 import FileText from "@burtson-labs/icons/react/file-text";
 import RotateCw from "@burtson-labs/icons/react/rotate-cw";
-import X from "@burtson-labs/icons/react/x";
 //#region src/components/attachment.tsx
 var stateText = {
 	queued: "Waiting",
@@ -40,12 +40,13 @@ var InTray = React.createContext(false);
 * One attached file: name, size, state, progress, and remove/retry. State
 * changes are announced politely; a failure says why.
 */
-function AttachmentItem({ name, size, state = "ready", progress, error, preview, icon, onRemove, onRetry, layout = "chip", className, ...props }) {
+var AttachmentItem = React.forwardRef(function AttachmentItem({ name, size, state = "ready", progress, error, preview, icon, onRemove, onRetry, layout = "chip", className, ...props }, ref) {
 	const inTray = React.useContext(InTray);
 	const busy = state === "uploading" || state === "parsing";
 	const failed = state === "failed";
 	const meta = [size !== void 0 ? formatBytes(size) : null, stateText[state]].filter(Boolean).join(" · ");
 	return /* @__PURE__ */ jsxs("div", {
+		ref,
 		"data-slot": "attachment-item",
 		"data-state": state,
 		"data-layout": layout,
@@ -112,12 +113,13 @@ function AttachmentItem({ name, size, state = "ready", progress, error, preview,
 			})
 		]
 	});
-}
+});
 /** Attachments waiting to send, in a row that scrolls sideways when full. */
-function AttachmentTray({ label = "Attachments", className, children, ...props }) {
+var AttachmentTray = React.forwardRef(function AttachmentTray({ label = "Attachments", className, children, ...props }, ref) {
 	return /* @__PURE__ */ jsx(InTray.Provider, {
 		value: true,
 		children: /* @__PURE__ */ jsx("div", {
+			ref,
 			"data-slot": "attachment-tray",
 			role: "list",
 			"aria-label": label,
@@ -126,14 +128,15 @@ function AttachmentTray({ label = "Attachments", className, children, ...props }
 			children
 		})
 	});
-}
+});
 /** A list of uploads with a summary: "2 of 4 ready, 1 failed". */
-function UploadQueue({ files, title = "Uploads", onRemove, onRetry, empty, className, ...props }) {
+var UploadQueue = React.forwardRef(function UploadQueue({ files, title = "Uploads", onRemove, onRetry, empty, className, ...props }, ref) {
 	const headingId = React.useId();
 	const ready = files.filter((f) => f.state === "ready").length;
 	const failed = files.filter((f) => f.state === "failed").length;
 	const summary = files.length ? `${ready} of ${files.length} ready${failed ? `, ${failed} failed` : ""}` : "";
 	return /* @__PURE__ */ jsxs("section", {
+		ref,
 		"data-slot": "upload-queue",
 		"aria-labelledby": headingId,
 		className: cn("grid gap-2", className),
@@ -170,7 +173,7 @@ function UploadQueue({ files, title = "Uploads", onRemove, onRetry, empty, class
 			})
 		})]
 	});
-}
+});
 //#endregion
 export { AttachmentItem, AttachmentTray, UploadQueue, formatBytes };
 

package/dist/components/attachment.js.map

@@ -1 +1 @@
-{"version":3,"file":"attachment.js","names":[],"sources":["../../src/components/attachment.tsx"],"sourcesContent":["import AlertCircle from '@burtson-labs/icons/react/alert-circle';\nimport FileText from '@burtson-labs/icons/react/file-text';\nimport RotateCw from '@burtson-labs/icons/react/rotate-cw';\nimport X from '@burtson-labs/icons/react/x';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nimport { Button } from './button';\nimport { Progress } from './progress';\nimport { Spinner } from './spinner';\n\n/**\n * Where a file is on its way into a message. The app owns the upload and the\n * parsing; these components only show the state it reports.\n */\nexport type AttachmentState = 'queued' | 'uploading' | 'parsing' | 'ready' | 'failed';\n\nconst stateText: Record<AttachmentState, string> = {\n  queued: 'Waiting',\n  uploading: 'Uploading',\n  parsing: 'Reading',\n  ready: 'Ready',\n  failed: 'Failed',\n};\n\n/** 1536 → \"1.5 KB\". */\nexport function formatBytes(bytes: number): string {\n  if (!Number.isFinite(bytes) || bytes < 0) return '';\n  if (bytes < 1024) return `${bytes} B`;\n  const units = ['KB', 'MB', 'GB', 'TB'];\n  let value = bytes / 1024;\n  let unit = 0;\n  while (value >= 1024 && unit < units.length - 1) {\n    value /= 1024;\n    unit++;\n  }\n  return `${value < 10 ? value.toFixed(1) : Math.round(value)} ${units[unit]}`;\n}\n\nconst InTray = React.createContext(false);\n\nexport interface AttachmentItemProps extends Omit<React.ComponentProps<'div'>, 'children'> {\n  name: string;\n  /** Bytes. */\n  size?: number;\n  state?: AttachmentState;\n  /** 0–100 while uploading or reading. Leave out for an indeterminate bar. */\n  progress?: number;\n  /** Why it failed, in words the person can act on. */\n  error?: string;\n  /** A thumbnail URL for images. */\n  preview?: string;\n  /** Replaces the file icon. */\n  icon?: React.ReactNode;\n  onRemove?: () => void;\n  onRetry?: () => void;\n  /** `chip` sits in a composer; `row` fills an upload list. */\n  layout?: 'chip' | 'row';\n}\n\n/**\n * One attached file: name, size, state, progress, and remove/retry. State\n * changes are announced politely; a failure says why.\n */\nfunction AttachmentItem({\n  name,\n  size,\n  state = 'ready',\n  progress,\n  error,\n  preview,\n  icon,\n  onRemove,\n  onRetry,\n  layout = 'chip',\n  className,\n  ...props\n}: AttachmentItemProps) {\n  const inTray = React.useContext(InTray);\n  const busy = state === 'uploading' || state === 'parsing';\n  const failed = state === 'failed';\n  const meta = [size !== undefined ? formatBytes(size) : null, stateText[state]]\n    .filter(Boolean)\n    .join(' · ');\n  return (\n    <div\n      data-slot=\"attachment-item\"\n      data-state={state}\n      data-layout={layout}\n      role={inTray ? 'listitem' : undefined}\n      aria-busy={busy || undefined}\n      className={cn(\n        'group/attachment relative flex min-w-0 items-center gap-2.5 rounded-md border bg-surface text-sm',\n        layout === 'chip' ? 'w-60 max-w-full shrink-0 p-1.5 pr-1' : 'w-full p-2.5',\n        failed && 'border-destructive/40 bg-destructive/5',\n        className,\n      )}\n      {...props}\n    >\n      <div\n        className={cn(\n          'grid shrink-0 place-items-center overflow-hidden rounded-sm bg-muted text-muted-foreground [&_svg]:size-4',\n          layout === 'chip' ? 'size-9' : 'size-10',\n        )}\n      >\n        {preview ? (\n          <img src={preview} alt=\"\" className=\"size-full object-cover\" />\n        ) : failed ? (\n          <AlertCircle className=\"text-destructive\" aria-hidden />\n        ) : busy ? (\n          <Spinner className=\"size-4\" role=\"presentation\" aria-hidden />\n        ) : (\n          (icon ?? <FileText aria-hidden />)\n        )}\n      </div>\n      <div className=\"grid min-w-0 flex-1 gap-1\">\n        <span className=\"truncate font-medium text-foreground\" title={name}>\n          {name}\n        </span>\n        <span\n          aria-live=\"polite\"\n          className={cn('truncate text-xs', failed ? 'text-destructive' : 'text-muted-foreground')}\n        >\n          <span className=\"sr-only\">{name}: </span>\n          {failed && error ? error : meta}\n        </span>\n        {busy && (\n          <Progress value={progress} aria-label={`${stateText[state]} ${name}`} className=\"h-1\" />\n        )}\n      </div>\n      {failed && onRetry && (\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          aria-label={`Retry ${name}`}\n          title=\"Retry\"\n          onClick={onRetry}\n        >\n          <RotateCw />\n        </Button>\n      )}\n      {onRemove && (\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          aria-label={`Remove ${name}`}\n          title=\"Remove\"\n          onClick={onRemove}\n        >\n          <X />\n        </Button>\n      )}\n    </div>\n  );\n}\n\nexport interface AttachmentTrayProps extends React.ComponentProps<'div'> {\n  /** Accessible name for the list. */\n  label?: string;\n}\n\n/** Attachments waiting to send, in a row that scrolls sideways when full. */\nfunction AttachmentTray({\n  label = 'Attachments',\n  className,\n  children,\n  ...props\n}: AttachmentTrayProps) {\n  return (\n    <InTray.Provider value={true}>\n      <div\n        data-slot=\"attachment-tray\"\n        role=\"list\"\n        aria-label={label}\n        className={cn('flex max-w-full gap-1.5 overflow-x-auto pb-0.5', className)}\n        {...props}\n      >\n        {children}\n      </div>\n    </InTray.Provider>\n  );\n}\n\nexport interface UploadQueueFile {\n  id: string;\n  name: string;\n  size?: number;\n  state: AttachmentState;\n  progress?: number;\n  error?: string;\n}\n\nexport interface UploadQueueProps extends Omit<React.ComponentProps<'section'>, 'title'> {\n  files: UploadQueueFile[];\n  title?: React.ReactNode;\n  onRemove?: (id: string) => void;\n  onRetry?: (id: string) => void;\n  /** Shown when there are no files. */\n  empty?: React.ReactNode;\n}\n\n/** A list of uploads with a summary: \"2 of 4 ready, 1 failed\". */\nfunction UploadQueue({\n  files,\n  title = 'Uploads',\n  onRemove,\n  onRetry,\n  empty,\n  className,\n  ...props\n}: UploadQueueProps) {\n  const headingId = React.useId();\n  const ready = files.filter((f) => f.state === 'ready').length;\n  const failed = files.filter((f) => f.state === 'failed').length;\n  const summary = files.length\n    ? `${ready} of ${files.length} ready${failed ? `, ${failed} failed` : ''}`\n    : '';\n  return (\n    <section\n      data-slot=\"upload-queue\"\n      aria-labelledby={headingId}\n      className={cn('grid gap-2', className)}\n      {...props}\n    >\n      <div className=\"flex items-baseline justify-between gap-3\">\n        <h3 id={headingId} className=\"text-sm font-semibold\">\n          {title}\n        </h3>\n        <span className=\"text-xs text-muted-foreground tabular-nums\">{summary}</span>\n      </div>\n      {files.length === 0 ? (\n        empty ? (\n          <div className=\"text-sm text-muted-foreground\">{empty}</div>\n        ) : null\n      ) : (\n        <InTray.Provider value={true}>\n          <div role=\"list\" aria-labelledby={headingId} className=\"grid gap-1.5\">\n            {files.map((f) => (\n              <AttachmentItem\n                key={f.id}\n                layout=\"row\"\n                name={f.name}\n                size={f.size}\n                state={f.state}\n                progress={f.progress}\n                error={f.error}\n                onRemove={onRemove ? () => onRemove(f.id) : undefined}\n                onRetry={onRetry ? () => onRetry(f.id) : undefined}\n              />\n            ))}\n          </div>\n        </InTray.Provider>\n      )}\n    </section>\n  );\n}\n\nexport { AttachmentItem, AttachmentTray, UploadQueue };\n"],"mappings":"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"}
+{"version":3,"file":"attachment.js","names":[],"sources":["../../src/components/attachment.tsx"],"sourcesContent":["import AlertCircle from '@burtson-labs/icons/react/alert-circle';\nimport FileText from '@burtson-labs/icons/react/file-text';\nimport RotateCw from '@burtson-labs/icons/react/rotate-cw';\nimport X from '@burtson-labs/icons/react/x';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nimport { Button } from './button';\nimport { Progress } from './progress';\nimport { Spinner } from './spinner';\n\n/**\n * Where a file is on its way into a message. The app owns the upload and the\n * parsing; these components only show the state it reports.\n */\nexport type AttachmentState = 'queued' | 'uploading' | 'parsing' | 'ready' | 'failed';\n\nconst stateText: Record<AttachmentState, string> = {\n  queued: 'Waiting',\n  uploading: 'Uploading',\n  parsing: 'Reading',\n  ready: 'Ready',\n  failed: 'Failed',\n};\n\n/** 1536 → \"1.5 KB\". */\nexport function formatBytes(bytes: number): string {\n  if (!Number.isFinite(bytes) || bytes < 0) return '';\n  if (bytes < 1024) return `${bytes} B`;\n  const units = ['KB', 'MB', 'GB', 'TB'];\n  let value = bytes / 1024;\n  let unit = 0;\n  while (value >= 1024 && unit < units.length - 1) {\n    value /= 1024;\n    unit++;\n  }\n  return `${value < 10 ? value.toFixed(1) : Math.round(value)} ${units[unit]}`;\n}\n\nconst InTray = React.createContext(false);\n\nexport interface AttachmentItemProps extends Omit<React.ComponentProps<'div'>, 'children'> {\n  name: string;\n  /** Bytes. */\n  size?: number;\n  state?: AttachmentState;\n  /** 0–100 while uploading or reading. Leave out for an indeterminate bar. */\n  progress?: number;\n  /** Why it failed, in words the person can act on. */\n  error?: string;\n  /** A thumbnail URL for images. */\n  preview?: string;\n  /** Replaces the file icon. */\n  icon?: React.ReactNode;\n  onRemove?: () => void;\n  onRetry?: () => void;\n  /** `chip` sits in a composer; `row` fills an upload list. */\n  layout?: 'chip' | 'row';\n}\n\n/**\n * One attached file: name, size, state, progress, and remove/retry. State\n * changes are announced politely; a failure says why.\n */\nconst AttachmentItem = React.forwardRef<HTMLDivElement, AttachmentItemProps>(\n  function AttachmentItem(\n    {\n      name,\n      size,\n      state = 'ready',\n      progress,\n      error,\n      preview,\n      icon,\n      onRemove,\n      onRetry,\n      layout = 'chip',\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    const inTray = React.useContext(InTray);\n    const busy = state === 'uploading' || state === 'parsing';\n    const failed = state === 'failed';\n    const meta = [size !== undefined ? formatBytes(size) : null, stateText[state]]\n      .filter(Boolean)\n      .join(' · ');\n    return (\n      <div\n        ref={ref}\n        data-slot=\"attachment-item\"\n        data-state={state}\n        data-layout={layout}\n        role={inTray ? 'listitem' : undefined}\n        aria-busy={busy || undefined}\n        className={cn(\n          'group/attachment relative flex min-w-0 items-center gap-2.5 rounded-md border bg-surface text-sm',\n          layout === 'chip' ? 'w-60 max-w-full shrink-0 p-1.5 pr-1' : 'w-full p-2.5',\n          failed && 'border-destructive/40 bg-destructive/5',\n          className,\n        )}\n        {...props}\n      >\n        <div\n          className={cn(\n            'grid shrink-0 place-items-center overflow-hidden rounded-sm bg-muted text-muted-foreground [&_svg]:size-4',\n            layout === 'chip' ? 'size-9' : 'size-10',\n          )}\n        >\n          {preview ? (\n            <img src={preview} alt=\"\" className=\"size-full object-cover\" />\n          ) : failed ? (\n            <AlertCircle className=\"text-destructive\" aria-hidden />\n          ) : busy ? (\n            <Spinner className=\"size-4\" role=\"presentation\" aria-hidden />\n          ) : (\n            (icon ?? <FileText aria-hidden />)\n          )}\n        </div>\n        <div className=\"grid min-w-0 flex-1 gap-1\">\n          <span className=\"truncate font-medium text-foreground\" title={name}>\n            {name}\n          </span>\n          <span\n            aria-live=\"polite\"\n            className={cn(\n              'truncate text-xs',\n              failed ? 'text-destructive' : 'text-muted-foreground',\n            )}\n          >\n            <span className=\"sr-only\">{name}: </span>\n            {failed && error ? error : meta}\n          </span>\n          {busy && (\n            <Progress value={progress} aria-label={`${stateText[state]} ${name}`} className=\"h-1\" />\n          )}\n        </div>\n        {failed && onRetry && (\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            aria-label={`Retry ${name}`}\n            title=\"Retry\"\n            onClick={onRetry}\n          >\n            <RotateCw />\n          </Button>\n        )}\n        {onRemove && (\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            aria-label={`Remove ${name}`}\n            title=\"Remove\"\n            onClick={onRemove}\n          >\n            <X />\n          </Button>\n        )}\n      </div>\n    );\n  },\n);\n\nexport interface AttachmentTrayProps extends React.ComponentProps<'div'> {\n  /** Accessible name for the list. */\n  label?: string;\n}\n\n/** Attachments waiting to send, in a row that scrolls sideways when full. */\nconst AttachmentTray = React.forwardRef<HTMLDivElement, AttachmentTrayProps>(\n  function AttachmentTray({ label = 'Attachments', className, children, ...props }, ref) {\n    return (\n      <InTray.Provider value={true}>\n        <div\n          ref={ref}\n          data-slot=\"attachment-tray\"\n          role=\"list\"\n          aria-label={label}\n          className={cn('flex max-w-full gap-1.5 overflow-x-auto pb-0.5', className)}\n          {...props}\n        >\n          {children}\n        </div>\n      </InTray.Provider>\n    );\n  },\n);\n\nexport interface UploadQueueFile {\n  id: string;\n  name: string;\n  size?: number;\n  state: AttachmentState;\n  progress?: number;\n  error?: string;\n}\n\nexport interface UploadQueueProps extends Omit<React.ComponentProps<'section'>, 'title'> {\n  files: UploadQueueFile[];\n  title?: React.ReactNode;\n  onRemove?: (id: string) => void;\n  onRetry?: (id: string) => void;\n  /** Shown when there are no files. */\n  empty?: React.ReactNode;\n}\n\n/** A list of uploads with a summary: \"2 of 4 ready, 1 failed\". */\nconst UploadQueue = React.forwardRef<HTMLElement, UploadQueueProps>(function UploadQueue(\n  { files, title = 'Uploads', onRemove, onRetry, empty, className, ...props },\n  ref,\n) {\n  const headingId = React.useId();\n  const ready = files.filter((f) => f.state === 'ready').length;\n  const failed = files.filter((f) => f.state === 'failed').length;\n  const summary = files.length\n    ? `${ready} of ${files.length} ready${failed ? `, ${failed} failed` : ''}`\n    : '';\n  return (\n    <section\n      ref={ref}\n      data-slot=\"upload-queue\"\n      aria-labelledby={headingId}\n      className={cn('grid gap-2', className)}\n      {...props}\n    >\n      <div className=\"flex items-baseline justify-between gap-3\">\n        <h3 id={headingId} className=\"text-sm font-semibold\">\n          {title}\n        </h3>\n        <span className=\"text-xs text-muted-foreground tabular-nums\">{summary}</span>\n      </div>\n      {files.length === 0 ? (\n        empty ? (\n          <div className=\"text-sm text-muted-foreground\">{empty}</div>\n        ) : null\n      ) : (\n        <InTray.Provider value={true}>\n          <div role=\"list\" aria-labelledby={headingId} className=\"grid gap-1.5\">\n            {files.map((f) => (\n              <AttachmentItem\n                key={f.id}\n                layout=\"row\"\n                name={f.name}\n                size={f.size}\n                state={f.state}\n                progress={f.progress}\n                error={f.error}\n                onRemove={onRemove ? () => onRemove(f.id) : undefined}\n                onRetry={onRetry ? () => onRetry(f.id) : undefined}\n              />\n            ))}\n          </div>\n        </InTray.Provider>\n      )}\n    </section>\n  );\n});\n\nexport { AttachmentItem, AttachmentTray, UploadQueue };\n"],"mappings":"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"}

package/dist/components/audio-player.d.ts

@@ -33,7 +33,7 @@ export interface AudioPlayerProps extends Omit<React.ComponentProps<'div'>, 'tit
  * time, speed (1×, 1.5×, 2×), download and a transcript. The waveform is a
  * slider for screen readers.
  */
-declare function AudioPlayer({ src, peaks, title, duration: knownDuration, transcript, downloadName, variant, onPlayChange, className, ...props }: AudioPlayerProps): React.JSX.Element;
+declare const AudioPlayer: React.ForwardRefExoticComponent<Omit<AudioPlayerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 /** A voice note inside a message: the compact AudioPlayer. */
-declare function VoiceMessage(props: Omit<AudioPlayerProps, 'variant'>): React.JSX.Element;
+declare const VoiceMessage: React.ForwardRefExoticComponent<Omit<Omit<AudioPlayerProps, "variant">, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { AudioPlayer, VoiceMessage };

package/dist/components/audio-player.js

@@ -1,5 +1,5 @@
 "use client";
-import { cn } from "../lib/utils.js";
+import { cn, focusRingClasses } from "../lib/utils.js";
 import { Button } from "./button.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -63,7 +63,7 @@ var SPEEDS = [
 * time, speed (1×, 1.5×, 2×), download and a transcript. The waveform is a
 * slider for screen readers.
 */
-function AudioPlayer({ src, peaks, title = "Audio", duration: knownDuration, transcript, downloadName, variant = "default", onPlayChange, className, ...props }) {
+var AudioPlayer = React.forwardRef(function AudioPlayer({ src, peaks, title = "Audio", duration: knownDuration, transcript, downloadName, variant = "default", onPlayChange, className, ...props }, ref) {
 	const audio = React.useRef(null);
 	const [playing, setPlaying] = React.useState(false);
 	const [current, setCurrent] = React.useState(0);
@@ -117,6 +117,7 @@ function AudioPlayer({ src, peaks, title = "Audio", duration: knownDuration, tra
 	};
 	const bars = peaks && peaks.length ? peaks : null;
 	return /* @__PURE__ */ jsxs("div", {
+		ref,
 		"data-slot": "audio-player",
 		"data-variant": variant,
 		className: cn("grid min-w-0 gap-2 rounded-lg border bg-surface text-foreground", compact ? "w-full max-w-sm p-2" : "p-3", className),
@@ -169,7 +170,7 @@ function AudioPlayer({ src, peaks, title = "Audio", duration: knownDuration, tra
 							if (!rect.width || !total) return;
 							seek((e.clientX - rect.left) / rect.width * total);
 						},
-						className: cn("relative flex min-w-0 flex-1 cursor-pointer items-center rounded-sm outline-none focus-visible:ring-[3px] focus-visible:ring-ring/20", compact ? "h-7" : "h-9"),
+						className: cn("relative flex min-w-0 flex-1 cursor-pointer items-center rounded-sm", focusRingClasses, compact ? "h-7" : "h-9", "pointer-coarse:h-11"),
 						children: bars ? /* @__PURE__ */ jsx("div", {
 							"aria-hidden": true,
 							className: "flex h-full w-full items-center gap-[2px]",
@@ -236,15 +237,16 @@ function AudioPlayer({ src, peaks, title = "Audio", duration: knownDuration, tra
 			})
 		]
 	});
-}
+});
 /** A voice note inside a message: the compact AudioPlayer. */
-function VoiceMessage(props) {
+var VoiceMessage = React.forwardRef(function VoiceMessage(props, ref) {
 	return /* @__PURE__ */ jsx(AudioPlayer, {
+		ref,
 		title: "Voice message",
 		...props,
 		variant: "compact"
 	});
-}
+});
 //#endregion
 export { AudioPlayer, VoiceMessage, computePeaks, formatDuration, peaksFromChannelData };
 

package/dist/components/audio-player.js.map

@@ -1 +1 @@
-{"version":3,"file":"audio-player.js","names":[],"sources":["../../src/components/audio-player.tsx"],"sourcesContent":["import Download from '@burtson-labs/icons/react/download';\nimport FileText from '@burtson-labs/icons/react/file-text';\nimport Pause from '@burtson-labs/icons/react/pause';\nimport Play from '@burtson-labs/icons/react/play';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nimport { Button } from './button';\n\n/** 83.4 → \"1:23\"; 3723 → \"1:02:03\". */\nexport function formatDuration(seconds: number): string {\n  if (!Number.isFinite(seconds) || seconds < 0) return '0:00';\n  const s = Math.floor(seconds);\n  const h = Math.floor(s / 3600);\n  const m = Math.floor((s % 3600) / 60);\n  const sec = String(s % 60).padStart(2, '0');\n  return h ? `${h}:${String(m).padStart(2, '0')}:${sec}` : `${m}:${sec}`;\n}\n\n/**\n * Reduce decoded audio to `bars` peak heights between 0 and 1 (the loudest\n * sample in each slice, normalised to the loudest slice).\n */\nexport function peaksFromChannelData(data: Float32Array, bars = 48): number[] {\n  if (!data.length || bars < 1) return [];\n  const size = Math.max(1, Math.floor(data.length / bars));\n  const peaks: number[] = [];\n  for (let b = 0; b < bars; b++) {\n    let max = 0;\n    const end = Math.min(data.length, (b + 1) * size);\n    for (let i = b * size; i < end; i++) {\n      const v = Math.abs(data[i] ?? 0);\n      if (v > max) max = v;\n    }\n    peaks.push(max);\n  }\n  const top = Math.max(...peaks) || 1;\n  return peaks.map((p) => p / top);\n}\n\n/**\n * Decode an audio file or URL with Web Audio and return its peaks for\n * AudioPlayer. Browser only; for long files compute peaks on the server.\n */\nexport async function computePeaks(source: Blob | string, bars = 48): Promise<number[]> {\n  const Ctx =\n    globalThis.AudioContext ??\n    (globalThis as unknown as { webkitAudioContext?: typeof AudioContext }).webkitAudioContext;\n  if (!Ctx) throw new Error('Web Audio is not available in this browser.');\n  const buf =\n    typeof source === 'string'\n      ? await (await fetch(source)).arrayBuffer()\n      : await source.arrayBuffer();\n  const ctx = new Ctx();\n  try {\n    const audio = await ctx.decodeAudioData(buf);\n    return peaksFromChannelData(audio.getChannelData(0), bars);\n  } finally {\n    void ctx.close();\n  }\n}\n\nconst SPEEDS = [1, 1.5, 2] as const;\n\nexport interface AudioPlayerProps extends Omit<React.ComponentProps<'div'>, 'title'> {\n  src: string;\n  /** Waveform heights 0–1 (see computePeaks). Leave out for a plain progress bar. */\n  peaks?: number[];\n  /** Name read out with the controls, e.g. \"Voice note from Dana\". */\n  title?: string;\n  /** Known length in seconds, shown before the file has loaded. */\n  duration?: number;\n  /** Text of the recording; adds a Transcript toggle. */\n  transcript?: React.ReactNode;\n  /** Adds a download link with this file name. */\n  downloadName?: string;\n  /** `compact` fits inside a message bubble. */\n  variant?: 'default' | 'compact';\n  onPlayChange?: (playing: boolean) => void;\n}\n\n/**\n * Plays one recording: play and pause, a waveform you can click or drive\n * with the arrow keys (5 seconds a step, Home and End), elapsed and total\n * time, speed (1×, 1.5×, 2×), download and a transcript. The waveform is a\n * slider for screen readers.\n */\nfunction AudioPlayer({\n  src,\n  peaks,\n  title = 'Audio',\n  duration: knownDuration,\n  transcript,\n  downloadName,\n  variant = 'default',\n  onPlayChange,\n  className,\n  ...props\n}: AudioPlayerProps) {\n  const audio = React.useRef<HTMLAudioElement>(null);\n  const [playing, setPlaying] = React.useState(false);\n  const [current, setCurrent] = React.useState(0);\n  const [duration, setDuration] = React.useState(knownDuration ?? 0);\n  const [speed, setSpeed] = React.useState<(typeof SPEEDS)[number]>(1);\n  const [showTranscript, setShowTranscript] = React.useState(false);\n  const [failed, setFailed] = React.useState(false);\n  const transcriptId = React.useId();\n  const compact = variant === 'compact';\n  const total = duration || knownDuration || 0;\n  const ratio = total ? Math.min(1, current / total) : 0;\n\n  React.useEffect(() => {\n    if (audio.current) audio.current.playbackRate = speed;\n  }, [speed]);\n\n  const seek = (t: number) => {\n    const el = audio.current;\n    const clamped = Math.max(0, Math.min(total || t, t));\n    if (el) el.currentTime = clamped;\n    setCurrent(clamped);\n  };\n\n  const togglePlay = async () => {\n    const el = audio.current;\n    if (!el) return;\n    if (el.paused) {\n      try {\n        await el.play();\n      } catch {\n        setFailed(true);\n      }\n    } else el.pause();\n  };\n\n  const onKeyDown = (e: React.KeyboardEvent) => {\n    const step = { ArrowRight: 5, ArrowUp: 5, ArrowLeft: -5, ArrowDown: -5 }[e.key];\n    if (step !== undefined) {\n      e.preventDefault();\n      seek(current + step);\n    } else if (e.key === 'Home') {\n      e.preventDefault();\n      seek(0);\n    } else if (e.key === 'End') {\n      e.preventDefault();\n      seek(total);\n    } else if (e.key === ' ' || e.key === 'Enter') {\n      e.preventDefault();\n      void togglePlay();\n    }\n  };\n\n  const bars = peaks && peaks.length ? peaks : null;\n\n  return (\n    <div\n      data-slot=\"audio-player\"\n      data-variant={variant}\n      className={cn(\n        'grid min-w-0 gap-2 rounded-lg border bg-surface text-foreground',\n        compact ? 'w-full max-w-sm p-2' : 'p-3',\n        className,\n      )}\n      {...props}\n    >\n      {/* eslint-disable-next-line jsx-a11y/media-has-caption -- the transcript prop is the text alternative */}\n      <audio\n        ref={audio}\n        src={src}\n        preload=\"metadata\"\n        onLoadedMetadata={(e) => {\n          const d = e.currentTarget.duration;\n          if (Number.isFinite(d)) setDuration(d);\n        }}\n        onTimeUpdate={(e) => setCurrent(e.currentTarget.currentTime)}\n        onPlay={() => {\n          setPlaying(true);\n          onPlayChange?.(true);\n        }}\n        onPause={() => {\n          setPlaying(false);\n          onPlayChange?.(false);\n        }}\n        onEnded={() => setCurrent(0)}\n        onError={() => setFailed(true)}\n      />\n      <div className=\"flex min-w-0 items-center gap-2\">\n        <Button\n          type=\"button\"\n          size={compact ? 'icon-sm' : 'icon'}\n          variant={playing ? 'secondary' : 'default'}\n          aria-label={playing ? `Pause ${title}` : `Play ${title}`}\n          onClick={() => void togglePlay()}\n          disabled={failed}\n          className=\"shrink-0 rounded-full pointer-coarse:size-11\"\n        >\n          {playing ? <Pause className=\"fill-current\" /> : <Play className=\"fill-current\" />}\n        </Button>\n        <div\n          role=\"slider\"\n          tabIndex={failed ? -1 : 0}\n          aria-label={`Seek ${title}`}\n          aria-valuemin={0}\n          aria-valuemax={Math.round(total)}\n          aria-valuenow={Math.round(current)}\n          aria-valuetext={`${formatDuration(current)} of ${formatDuration(total)}`}\n          onKeyDown={onKeyDown}\n          onClick={(e) => {\n            const rect = e.currentTarget.getBoundingClientRect();\n            if (!rect.width || !total) return;\n            seek(((e.clientX - rect.left) / rect.width) * total);\n          }}\n          className={cn(\n            'relative flex min-w-0 flex-1 cursor-pointer items-center rounded-sm outline-none focus-visible:ring-[3px] focus-visible:ring-ring/20',\n            compact ? 'h-7' : 'h-9',\n          )}\n        >\n          {bars ? (\n            <div aria-hidden className=\"flex h-full w-full items-center gap-[2px]\">\n              {bars.map((p, i) => (\n                <span\n                  key={i}\n                  className={cn(\n                    'min-w-[2px] flex-1 rounded-full transition-colors duration-[var(--duration-fast)] ease-[var(--ease-standard)]',\n                    (i + 0.5) / bars.length <= ratio ? 'bg-brand' : 'bg-border-strong',\n                  )}\n                  style={{ height: `${Math.max(12, Math.round(p * 100))}%` }}\n                />\n              ))}\n            </div>\n          ) : (\n            <div aria-hidden className=\"h-1.5 w-full overflow-hidden rounded-full bg-muted\">\n              <div className=\"h-full rounded-full bg-brand\" style={{ width: `${ratio * 100}%` }} />\n            </div>\n          )}\n        </div>\n        <span className=\"shrink-0 font-mono text-[11px] text-muted-foreground tabular-nums\">\n          {playing || current ? formatDuration(current) : formatDuration(total)}\n        </span>\n      </div>\n      {failed ? (\n        <p role=\"alert\" className=\"text-xs text-destructive\">\n          This recording could not be played.\n        </p>\n      ) : (\n        <div className=\"flex flex-wrap items-center gap-1\">\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"xs\"\n            aria-label={`Playback speed ${speed}×`}\n            onClick={() => setSpeed(SPEEDS[(SPEEDS.indexOf(speed) + 1) % SPEEDS.length] ?? 1)}\n            className=\"font-mono tabular-nums\"\n          >\n            {speed}×\n          </Button>\n          {transcript && (\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              size=\"xs\"\n              aria-expanded={showTranscript}\n              aria-controls={transcriptId}\n              onClick={() => setShowTranscript((v) => !v)}\n            >\n              <FileText /> Transcript\n            </Button>\n          )}\n          {downloadName && (\n            <Button variant=\"ghost\" size=\"xs\" asChild>\n              <a href={src} download={downloadName}>\n                <Download /> Download\n              </a>\n            </Button>\n          )}\n        </div>\n      )}\n      {transcript && showTranscript && (\n        <div\n          id={transcriptId}\n          className=\"animate-in rounded-md bg-muted/60 p-2.5 text-sm leading-6 text-muted-foreground\"\n        >\n          {transcript}\n        </div>\n      )}\n    </div>\n  );\n}\n\n/** A voice note inside a message: the compact AudioPlayer. */\nfunction VoiceMessage(props: Omit<AudioPlayerProps, 'variant'>) {\n  return <AudioPlayer title=\"Voice message\" {...props} variant=\"compact\" />;\n}\n\nexport { AudioPlayer, VoiceMessage };\n"],"mappings":"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"}
+{"version":3,"file":"audio-player.js","names":[],"sources":["../../src/components/audio-player.tsx"],"sourcesContent":["import Download from '@burtson-labs/icons/react/download';\nimport FileText from '@burtson-labs/icons/react/file-text';\nimport Pause from '@burtson-labs/icons/react/pause';\nimport Play from '@burtson-labs/icons/react/play';\nimport * as React from 'react';\n\nimport { cn, focusRingClasses } from '../lib/utils';\n\nimport { Button } from './button';\n\n/** 83.4 → \"1:23\"; 3723 → \"1:02:03\". */\nexport function formatDuration(seconds: number): string {\n  if (!Number.isFinite(seconds) || seconds < 0) return '0:00';\n  const s = Math.floor(seconds);\n  const h = Math.floor(s / 3600);\n  const m = Math.floor((s % 3600) / 60);\n  const sec = String(s % 60).padStart(2, '0');\n  return h ? `${h}:${String(m).padStart(2, '0')}:${sec}` : `${m}:${sec}`;\n}\n\n/**\n * Reduce decoded audio to `bars` peak heights between 0 and 1 (the loudest\n * sample in each slice, normalised to the loudest slice).\n */\nexport function peaksFromChannelData(data: Float32Array, bars = 48): number[] {\n  if (!data.length || bars < 1) return [];\n  const size = Math.max(1, Math.floor(data.length / bars));\n  const peaks: number[] = [];\n  for (let b = 0; b < bars; b++) {\n    let max = 0;\n    const end = Math.min(data.length, (b + 1) * size);\n    for (let i = b * size; i < end; i++) {\n      const v = Math.abs(data[i] ?? 0);\n      if (v > max) max = v;\n    }\n    peaks.push(max);\n  }\n  const top = Math.max(...peaks) || 1;\n  return peaks.map((p) => p / top);\n}\n\n/**\n * Decode an audio file or URL with Web Audio and return its peaks for\n * AudioPlayer. Browser only; for long files compute peaks on the server.\n */\nexport async function computePeaks(source: Blob | string, bars = 48): Promise<number[]> {\n  const Ctx =\n    globalThis.AudioContext ??\n    (globalThis as unknown as { webkitAudioContext?: typeof AudioContext }).webkitAudioContext;\n  if (!Ctx) throw new Error('Web Audio is not available in this browser.');\n  const buf =\n    typeof source === 'string'\n      ? await (await fetch(source)).arrayBuffer()\n      : await source.arrayBuffer();\n  const ctx = new Ctx();\n  try {\n    const audio = await ctx.decodeAudioData(buf);\n    return peaksFromChannelData(audio.getChannelData(0), bars);\n  } finally {\n    void ctx.close();\n  }\n}\n\nconst SPEEDS = [1, 1.5, 2] as const;\n\nexport interface AudioPlayerProps extends Omit<React.ComponentProps<'div'>, 'title'> {\n  src: string;\n  /** Waveform heights 0–1 (see computePeaks). Leave out for a plain progress bar. */\n  peaks?: number[];\n  /** Name read out with the controls, e.g. \"Voice note from Dana\". */\n  title?: string;\n  /** Known length in seconds, shown before the file has loaded. */\n  duration?: number;\n  /** Text of the recording; adds a Transcript toggle. */\n  transcript?: React.ReactNode;\n  /** Adds a download link with this file name. */\n  downloadName?: string;\n  /** `compact` fits inside a message bubble. */\n  variant?: 'default' | 'compact';\n  onPlayChange?: (playing: boolean) => void;\n}\n\n/**\n * Plays one recording: play and pause, a waveform you can click or drive\n * with the arrow keys (5 seconds a step, Home and End), elapsed and total\n * time, speed (1×, 1.5×, 2×), download and a transcript. The waveform is a\n * slider for screen readers.\n */\nconst AudioPlayer = React.forwardRef<HTMLDivElement, AudioPlayerProps>(function AudioPlayer(\n  {\n    src,\n    peaks,\n    title = 'Audio',\n    duration: knownDuration,\n    transcript,\n    downloadName,\n    variant = 'default',\n    onPlayChange,\n    className,\n    ...props\n  },\n  ref,\n) {\n  const audio = React.useRef<HTMLAudioElement>(null);\n  const [playing, setPlaying] = React.useState(false);\n  const [current, setCurrent] = React.useState(0);\n  const [duration, setDuration] = React.useState(knownDuration ?? 0);\n  const [speed, setSpeed] = React.useState<(typeof SPEEDS)[number]>(1);\n  const [showTranscript, setShowTranscript] = React.useState(false);\n  const [failed, setFailed] = React.useState(false);\n  const transcriptId = React.useId();\n  const compact = variant === 'compact';\n  const total = duration || knownDuration || 0;\n  const ratio = total ? Math.min(1, current / total) : 0;\n\n  React.useEffect(() => {\n    if (audio.current) audio.current.playbackRate = speed;\n  }, [speed]);\n\n  const seek = (t: number) => {\n    const el = audio.current;\n    const clamped = Math.max(0, Math.min(total || t, t));\n    if (el) el.currentTime = clamped;\n    setCurrent(clamped);\n  };\n\n  const togglePlay = async () => {\n    const el = audio.current;\n    if (!el) return;\n    if (el.paused) {\n      try {\n        await el.play();\n      } catch {\n        setFailed(true);\n      }\n    } else el.pause();\n  };\n\n  const onKeyDown = (e: React.KeyboardEvent) => {\n    const step = { ArrowRight: 5, ArrowUp: 5, ArrowLeft: -5, ArrowDown: -5 }[e.key];\n    if (step !== undefined) {\n      e.preventDefault();\n      seek(current + step);\n    } else if (e.key === 'Home') {\n      e.preventDefault();\n      seek(0);\n    } else if (e.key === 'End') {\n      e.preventDefault();\n      seek(total);\n    } else if (e.key === ' ' || e.key === 'Enter') {\n      e.preventDefault();\n      void togglePlay();\n    }\n  };\n\n  const bars = peaks && peaks.length ? peaks : null;\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"audio-player\"\n      data-variant={variant}\n      className={cn(\n        'grid min-w-0 gap-2 rounded-lg border bg-surface text-foreground',\n        compact ? 'w-full max-w-sm p-2' : 'p-3',\n        className,\n      )}\n      {...props}\n    >\n      {/* eslint-disable-next-line jsx-a11y/media-has-caption -- the transcript prop is the text alternative */}\n      <audio\n        ref={audio}\n        src={src}\n        preload=\"metadata\"\n        onLoadedMetadata={(e) => {\n          const d = e.currentTarget.duration;\n          if (Number.isFinite(d)) setDuration(d);\n        }}\n        onTimeUpdate={(e) => setCurrent(e.currentTarget.currentTime)}\n        onPlay={() => {\n          setPlaying(true);\n          onPlayChange?.(true);\n        }}\n        onPause={() => {\n          setPlaying(false);\n          onPlayChange?.(false);\n        }}\n        onEnded={() => setCurrent(0)}\n        onError={() => setFailed(true)}\n      />\n      <div className=\"flex min-w-0 items-center gap-2\">\n        <Button\n          type=\"button\"\n          size={compact ? 'icon-sm' : 'icon'}\n          variant={playing ? 'secondary' : 'default'}\n          aria-label={playing ? `Pause ${title}` : `Play ${title}`}\n          onClick={() => void togglePlay()}\n          disabled={failed}\n          className=\"shrink-0 rounded-full pointer-coarse:size-11\"\n        >\n          {playing ? <Pause className=\"fill-current\" /> : <Play className=\"fill-current\" />}\n        </Button>\n        <div\n          role=\"slider\"\n          tabIndex={failed ? -1 : 0}\n          aria-label={`Seek ${title}`}\n          aria-valuemin={0}\n          aria-valuemax={Math.round(total)}\n          aria-valuenow={Math.round(current)}\n          aria-valuetext={`${formatDuration(current)} of ${formatDuration(total)}`}\n          onKeyDown={onKeyDown}\n          onClick={(e) => {\n            const rect = e.currentTarget.getBoundingClientRect();\n            if (!rect.width || !total) return;\n            seek(((e.clientX - rect.left) / rect.width) * total);\n          }}\n          className={cn(\n            'relative flex min-w-0 flex-1 cursor-pointer items-center rounded-sm',\n            focusRingClasses,\n            compact ? 'h-7' : 'h-9',\n            'pointer-coarse:h-11',\n          )}\n        >\n          {bars ? (\n            <div aria-hidden className=\"flex h-full w-full items-center gap-[2px]\">\n              {bars.map((p, i) => (\n                <span\n                  key={i}\n                  className={cn(\n                    'min-w-[2px] flex-1 rounded-full transition-colors duration-[var(--duration-fast)] ease-[var(--ease-standard)]',\n                    (i + 0.5) / bars.length <= ratio ? 'bg-brand' : 'bg-border-strong',\n                  )}\n                  style={{ height: `${Math.max(12, Math.round(p * 100))}%` }}\n                />\n              ))}\n            </div>\n          ) : (\n            <div aria-hidden className=\"h-1.5 w-full overflow-hidden rounded-full bg-muted\">\n              <div className=\"h-full rounded-full bg-brand\" style={{ width: `${ratio * 100}%` }} />\n            </div>\n          )}\n        </div>\n        <span className=\"shrink-0 font-mono text-[11px] text-muted-foreground tabular-nums\">\n          {playing || current ? formatDuration(current) : formatDuration(total)}\n        </span>\n      </div>\n      {failed ? (\n        <p role=\"alert\" className=\"text-xs text-destructive\">\n          This recording could not be played.\n        </p>\n      ) : (\n        <div className=\"flex flex-wrap items-center gap-1\">\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"xs\"\n            aria-label={`Playback speed ${speed}×`}\n            onClick={() => setSpeed(SPEEDS[(SPEEDS.indexOf(speed) + 1) % SPEEDS.length] ?? 1)}\n            className=\"font-mono tabular-nums\"\n          >\n            {speed}×\n          </Button>\n          {transcript && (\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              size=\"xs\"\n              aria-expanded={showTranscript}\n              aria-controls={transcriptId}\n              onClick={() => setShowTranscript((v) => !v)}\n            >\n              <FileText /> Transcript\n            </Button>\n          )}\n          {downloadName && (\n            <Button variant=\"ghost\" size=\"xs\" asChild>\n              <a href={src} download={downloadName}>\n                <Download /> Download\n              </a>\n            </Button>\n          )}\n        </div>\n      )}\n      {transcript && showTranscript && (\n        <div\n          id={transcriptId}\n          className=\"animate-in rounded-md bg-muted/60 p-2.5 text-sm leading-6 text-muted-foreground\"\n        >\n          {transcript}\n        </div>\n      )}\n    </div>\n  );\n});\n\n/** A voice note inside a message: the compact AudioPlayer. */\nconst VoiceMessage = React.forwardRef<HTMLDivElement, Omit<AudioPlayerProps, 'variant'>>(\n  function VoiceMessage(props, ref) {\n    return <AudioPlayer ref={ref} title=\"Voice message\" {...props} variant=\"compact\" />;\n  },\n);\n\nexport { AudioPlayer, VoiceMessage };\n"],"mappings":"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"}

package/dist/components/avatar.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as AvatarPrimitive from '../primitives/vendor/radix/react-avatar';
-declare function Avatar({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root>): React.JSX.Element;
-declare function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>): React.JSX.Element;
-declare function AvatarFallback({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>): React.JSX.Element;
+declare const Avatar: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+declare const AvatarImage: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
+declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export { Avatar, AvatarFallback, AvatarImage };

package/dist/components/avatar.js

@@ -1,30 +1,33 @@
 "use client";
 import { cn } from "../lib/utils.js";
 import { Avatar as Avatar$1, AvatarFallback as AvatarFallback$1, AvatarImage as AvatarImage$1 } from "../primitives/vendor/radix/react-avatar/avatar.js";
-import "react";
+import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/avatar.tsx
-function Avatar({ className, ...props }) {
+var Avatar = React.forwardRef(function Avatar({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Avatar$1, {
+		ref,
 		"data-slot": "avatar",
 		className: cn("relative flex size-8 shrink-0 overflow-hidden rounded-full", className),
 		...props
 	});
-}
-function AvatarImage({ className, ...props }) {
+});
+var AvatarImage = React.forwardRef(function AvatarImage({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(AvatarImage$1, {
+		ref,
 		"data-slot": "avatar-image",
 		className: cn("aspect-square size-full object-cover", className),
 		...props
 	});
-}
-function AvatarFallback({ className, ...props }) {
+});
+var AvatarFallback = React.forwardRef(function AvatarFallback({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(AvatarFallback$1, {
+		ref,
 		"data-slot": "avatar-fallback",
 		className: cn("flex size-full items-center justify-center rounded-full border border-brand/15 bg-brand-soft text-xs font-semibold text-brand-soft-foreground", className),
 		...props
 	});
-}
+});
 //#endregion
 export { Avatar, AvatarFallback, AvatarImage };
 

package/dist/components/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","names":["AvatarPrimitive.Root","AvatarPrimitive.Image","AvatarPrimitive.Fallback"],"sources":["../../src/components/avatar.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../lib/utils';\nimport * as AvatarPrimitive from '../primitives/vendor/radix/react-avatar';\n\nfunction Avatar({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root>) {\n  return (\n    <AvatarPrimitive.Root\n      data-slot=\"avatar\"\n      className={cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', className)}\n      {...props}\n    />\n  );\n}\n\nfunction AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>) {\n  return (\n    <AvatarPrimitive.Image\n      data-slot=\"avatar-image\"\n      className={cn('aspect-square size-full object-cover', className)}\n      {...props}\n    />\n  );\n}\n\nfunction AvatarFallback({\n  className,\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {\n  return (\n    <AvatarPrimitive.Fallback\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        'flex size-full items-center justify-center rounded-full border border-brand/15 bg-brand-soft text-xs font-semibold text-brand-soft-foreground',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Avatar, AvatarFallback, AvatarImage };\n"],"mappings":";;;;;;AAKA,SAAS,OAAO,EAAE,WAAW,GAAG,SAA4D;CAC1F,OACE,oBAACA,UAAD;EACE,aAAU;EACV,WAAW,GAAG,8DAA8D,SAAS;EACrF,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA6D;CAChG,OACE,oBAACC,eAAD;EACE,aAAU;EACV,WAAW,GAAG,wCAAwC,SAAS;EAC/D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,eAAe,EACtB,WACA,GAAG,SACqD;CACxD,OACE,oBAACC,kBAAD;EACE,aAAU;EACV,WAAW,GACT,iJACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"avatar.js","names":["AvatarPrimitive.Root","AvatarPrimitive.Image","AvatarPrimitive.Fallback"],"sources":["../../src/components/avatar.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../lib/utils';\nimport * as AvatarPrimitive from '../primitives/vendor/radix/react-avatar';\n\nconst Avatar = React.forwardRef<HTMLSpanElement, React.ComponentProps<typeof AvatarPrimitive.Root>>(\n  function Avatar({ className, ...props }, ref) {\n    return (\n      <AvatarPrimitive.Root\n        ref={ref}\n        data-slot=\"avatar\"\n        className={cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', className)}\n        {...props}\n      />\n    );\n  },\n);\n\nconst AvatarImage = React.forwardRef<\n  HTMLImageElement,\n  React.ComponentProps<typeof AvatarPrimitive.Image>\n>(function AvatarImage({ className, ...props }, ref) {\n  return (\n    <AvatarPrimitive.Image\n      ref={ref}\n      data-slot=\"avatar-image\"\n      className={cn('aspect-square size-full object-cover', className)}\n      {...props}\n    />\n  );\n});\n\nconst AvatarFallback = React.forwardRef<\n  HTMLSpanElement,\n  React.ComponentProps<typeof AvatarPrimitive.Fallback>\n>(function AvatarFallback({ className, ...props }, ref) {\n  return (\n    <AvatarPrimitive.Fallback\n      ref={ref}\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        'flex size-full items-center justify-center rounded-full border border-brand/15 bg-brand-soft text-xs font-semibold text-brand-soft-foreground',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\n\nexport { Avatar, AvatarFallback, AvatarImage };\n"],"mappings":";;;;;;AAKA,IAAM,SAAS,MAAM,WACnB,SAAS,OAAO,EAAE,WAAW,GAAG,SAAS,KAAK;CAC5C,OACE,oBAACA,UAAD;EACO;EACL,aAAU;EACV,WAAW,GAAG,8DAA8D,SAAS;EACrF,GAAI;CACL,CAAA;AAEL,CACF;AAEA,IAAM,cAAc,MAAM,WAGxB,SAAS,YAAY,EAAE,WAAW,GAAG,SAAS,KAAK;CACnD,OACE,oBAACC,eAAD;EACO;EACL,aAAU;EACV,WAAW,GAAG,wCAAwC,SAAS;EAC/D,GAAI;CACL,CAAA;AAEL,CAAC;AAED,IAAM,iBAAiB,MAAM,WAG3B,SAAS,eAAe,EAAE,WAAW,GAAG,SAAS,KAAK;CACtD,OACE,oBAACC,kBAAD;EACO;EACL,aAAU;EACV,WAAW,GACT,iJACA,SACF;EACA,GAAI;CACL,CAAA;AAEL,CAAC"}

package/dist/components/badge.d.ts

@@ -6,5 +6,5 @@ declare const badgeVariants: (props?: ({
 export interface BadgeProps extends React.ComponentProps<'span'>, VariantProps<typeof badgeVariants> {
     asChild?: boolean;
 }
-declare function Badge({ className, variant, asChild, ...props }: BadgeProps): React.JSX.Element;
+declare const Badge: React.ForwardRefExoticComponent<Omit<BadgeProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export { Badge, badgeVariants };

package/dist/components/badge.js

@@ -1,30 +1,32 @@
 "use client";
-import { cn } from "../lib/utils.js";
+import { cn, focusRingClasses } from "../lib/utils.js";
 import { Root as Slot } from "../primitives/vendor/radix/react-slot/slot.js";
-import "react";
+import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/components/badge.tsx
-var badgeVariants = cva("inline-flex w-fit shrink-0 items-center gap-1.5 rounded-full border px-2 py-0.5 text-[11px] font-semibold leading-4 whitespace-nowrap outline-none transition-colors focus-visible:ring-[3px] focus-visible:ring-ring/20 [&>svg]:size-3", {
+var badgeVariants = cva(`inline-flex w-fit shrink-0 items-center gap-1.5 rounded-full border px-2 py-0.5 text-[11px] font-semibold leading-4 whitespace-nowrap transition-colors ${focusRingClasses} [&>svg]:size-3`, {
 	variants: { variant: {
 		default: "border-border bg-surface-muted text-foreground",
 		secondary: "border-border bg-surface-muted text-foreground",
 		brand: "border-brand/20 bg-brand-soft text-brand-soft-foreground",
-		success: "border-success/20 bg-success/10 text-success",
-		warning: "border-warning/20 bg-warning/10 text-warning",
-		destructive: "border-destructive/20 bg-destructive/10 text-destructive",
-		info: "border-info/20 bg-info/10 text-info",
+		success: "border-success/20 bg-success/10 text-[color-mix(in_srgb,var(--success)_75%,var(--foreground))]",
+		warning: "border-warning/20 bg-warning/10 text-[color-mix(in_srgb,var(--warning)_75%,var(--foreground))]",
+		destructive: "border-destructive/20 bg-destructive/10 text-[color-mix(in_srgb,var(--destructive)_75%,var(--foreground))]",
+		info: "border-info/20 bg-info/10 text-[color-mix(in_srgb,var(--info)_75%,var(--foreground))]",
 		outline: "border-border-strong bg-transparent text-muted-foreground"
 	} },
 	defaultVariants: { variant: "default" }
 });
-function Badge({ className, variant, asChild = false, ...props }) {
+var Badge = React.forwardRef(function Badge({ className, variant, asChild = false, ...props }, ref) {
 	return /* @__PURE__ */ jsx(asChild ? Slot : "span", {
+		ref,
 		"data-slot": "badge",
-		className: cn(badgeVariants({ variant }), className),
+		"data-variant": variant ?? "default",
+		className: cn(badgeVariants({ variant }), asChild && "relative pointer-coarse:before:absolute pointer-coarse:before:inset-x-0 pointer-coarse:before:top-1/2 pointer-coarse:before:h-11 pointer-coarse:before:-translate-y-1/2 pointer-coarse:before:content-['']", className),
 		...props
 	});
-}
+});
 //#endregion
 export { Badge, badgeVariants };
 

package/dist/components/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","names":["Slot.Root"],"sources":["../../src/components/badge.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\nimport * as Slot from '../primitives/vendor/radix/react-slot';\n\nconst badgeVariants = cva(\n  'inline-flex w-fit shrink-0 items-center gap-1.5 rounded-full border px-2 py-0.5 text-[11px] font-semibold leading-4 whitespace-nowrap outline-none transition-colors focus-visible:ring-[3px] focus-visible:ring-ring/20 [&>svg]:size-3',\n  {\n    variants: {\n      variant: {\n        default: 'border-border bg-surface-muted text-foreground',\n        // 0.x name for the neutral tag; kept so existing apps keep compiling.\n        secondary: 'border-border bg-surface-muted text-foreground',\n        brand: 'border-brand/20 bg-brand-soft text-brand-soft-foreground',\n        success: 'border-success/20 bg-success/10 text-success',\n        warning: 'border-warning/20 bg-warning/10 text-warning',\n        destructive: 'border-destructive/20 bg-destructive/10 text-destructive',\n        info: 'border-info/20 bg-info/10 text-info',\n        outline: 'border-border-strong bg-transparent text-muted-foreground',\n      },\n    },\n    defaultVariants: { variant: 'default' },\n  },\n);\n\nexport interface BadgeProps\n  extends React.ComponentProps<'span'>, VariantProps<typeof badgeVariants> {\n  asChild?: boolean;\n}\n\nfunction Badge({ className, variant, asChild = false, ...props }: BadgeProps) {\n  const Comp = asChild ? Slot.Root : 'span';\n  return (\n    <Comp data-slot=\"badge\" className={cn(badgeVariants({ variant }), className)} {...props} />\n  );\n}\n\nexport { Badge, badgeVariants };\n"],"mappings":";;;;;;;AAMA,IAAM,gBAAgB,IACpB,2OACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EAET,WAAW;EACX,OAAO;EACP,SAAS;EACT,SAAS;EACT,aAAa;EACb,MAAM;EACN,SAAS;CACX,EACF;CACA,iBAAiB,EAAE,SAAS,UAAU;AACxC,CACF;AAOA,SAAS,MAAM,EAAE,WAAW,SAAS,UAAU,OAAO,GAAG,SAAqB;CAE5E,OACE,oBAFW,UAAUA,OAAY,QAEjC;EAAM,aAAU;EAAQ,WAAW,GAAG,cAAc,EAAE,QAAQ,CAAC,GAAG,SAAS;EAAG,GAAI;CAAQ,CAAA;AAE9F"}
+{"version":3,"file":"badge.js","names":["Slot.Root"],"sources":["../../src/components/badge.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport * as React from 'react';\n\nimport { cn, focusRingClasses, touchTargetRowClasses } from '../lib/utils';\nimport * as Slot from '../primitives/vendor/radix/react-slot';\n\nconst badgeVariants = cva(\n  `inline-flex w-fit shrink-0 items-center gap-1.5 rounded-full border px-2 py-0.5 text-[11px] font-semibold leading-4 whitespace-nowrap transition-colors ${focusRingClasses} [&>svg]:size-3`,\n  {\n    variants: {\n      variant: {\n        default: 'border-border bg-surface-muted text-foreground',\n        // 0.x name for the neutral tag; kept so existing apps keep compiling.\n        secondary: 'border-border bg-surface-muted text-foreground',\n        brand: 'border-brand/20 bg-brand-soft text-brand-soft-foreground',\n        // Status text is the tone mixed a quarter toward the foreground: the\n        // plain tone reads at 4.3–4.5:1 on its own tint, the mixed one at 6:1\n        // (4.5:1 inside a terminal Card). Mixing toward the foreground darkens\n        // it in light mode and lightens it in dark mode and in a terminal Card,\n        // which re-points --foreground.\n        success:\n          'border-success/20 bg-success/10 text-[color-mix(in_srgb,var(--success)_75%,var(--foreground))]',\n        warning:\n          'border-warning/20 bg-warning/10 text-[color-mix(in_srgb,var(--warning)_75%,var(--foreground))]',\n        destructive:\n          'border-destructive/20 bg-destructive/10 text-[color-mix(in_srgb,var(--destructive)_75%,var(--foreground))]',\n        info: 'border-info/20 bg-info/10 text-[color-mix(in_srgb,var(--info)_75%,var(--foreground))]',\n        outline: 'border-border-strong bg-transparent text-muted-foreground',\n      },\n    },\n    defaultVariants: { variant: 'default' },\n  },\n);\n\nexport interface BadgeProps\n  extends React.ComponentProps<'span'>, VariantProps<typeof badgeVariants> {\n  asChild?: boolean;\n}\n\nconst Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(function Badge(\n  { className, variant, asChild = false, ...props },\n  ref,\n) {\n  const Comp = asChild ? Slot.Root : 'span';\n  return (\n    <Comp\n      ref={ref}\n      data-slot=\"badge\"\n      data-variant={variant ?? 'default'}\n      // A badge that is a link or button (asChild) gets a 44px hit area on touch screens.\n      className={cn(badgeVariants({ variant }), asChild && touchTargetRowClasses, className)}\n      {...props}\n    />\n  );\n});\n\nexport { Badge, badgeVariants };\n"],"mappings":";;;;;;;AAMA,IAAM,gBAAgB,IACpB,2JAA2J,iBAAiB,kBAC5K;CACE,UAAU,EACR,SAAS;EACP,SAAS;EAET,WAAW;EACX,OAAO;EAMP,SACE;EACF,SACE;EACF,aACE;EACF,MAAM;EACN,SAAS;CACX,EACF;CACA,iBAAiB,EAAE,SAAS,UAAU;AACxC,CACF;AAOA,IAAM,QAAQ,MAAM,WAAwC,SAAS,MACnE,EAAE,WAAW,SAAS,UAAU,OAAO,GAAG,SAC1C,KACA;CAEA,OACE,oBAFW,UAAUA,OAAY,QAEjC;EACO;EACL,aAAU;EACV,gBAAc,WAAW;EAEzB,WAAW,GAAG,cAAc,EAAE,QAAQ,CAAC,GAAG,WAAA,8MAAkC,SAAS;EACrF,GAAI;CACL,CAAA;AAEL,CAAC"}

package/dist/components/breadcrumb.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
-declare function Breadcrumb(props: React.ComponentProps<'nav'>): React.JSX.Element;
-declare function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>): React.JSX.Element;
-declare function BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>): React.JSX.Element;
-declare function BreadcrumbLink({ asChild, className, ...props }: React.ComponentProps<'a'> & {
+declare const Breadcrumb: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+declare const BreadcrumbList: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> & React.RefAttributes<HTMLOListElement>>;
+declare const BreadcrumbItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+declare const BreadcrumbLink: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLAnchorElement> & React.AnchorHTMLAttributes<HTMLAnchorElement> & {
     asChild?: boolean;
-}): React.JSX.Element;
-declare function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>): React.JSX.Element;
-declare function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<'li'>): React.JSX.Element;
-declare function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<'span'>): React.JSX.Element;
+}, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+declare const BreadcrumbPage: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+declare const BreadcrumbSeparator: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+declare const BreadcrumbEllipsis: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, };

package/dist/components/breadcrumb.js

@@ -1,41 +1,46 @@
 "use client";
-import { cn } from "../lib/utils.js";
+import { cn, focusRingClasses } from "../lib/utils.js";
 import { Root as Slot } from "../primitives/vendor/radix/react-slot/slot.js";
-import "react";
+import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import ChevronRight from "@burtson-labs/icons/react/chevron-right";
 import MoreHorizontal from "@burtson-labs/icons/react/more-horizontal";
 //#region src/components/breadcrumb.tsx
-function Breadcrumb(props) {
+var Breadcrumb = React.forwardRef(function Breadcrumb(props, ref) {
 	return /* @__PURE__ */ jsx("nav", {
+		ref,
 		"aria-label": "Breadcrumb",
 		"data-slot": "breadcrumb",
 		...props
 	});
-}
-function BreadcrumbList({ className, ...props }) {
+});
+var BreadcrumbList = React.forwardRef(function BreadcrumbList({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("ol", {
+		ref,
 		"data-slot": "breadcrumb-list",
 		className: cn("flex flex-wrap items-center gap-1.5 text-sm break-words text-muted-foreground", className),
 		...props
 	});
-}
-function BreadcrumbItem({ className, ...props }) {
+});
+var BreadcrumbItem = React.forwardRef(function BreadcrumbItem({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("li", {
+		ref,
 		"data-slot": "breadcrumb-item",
 		className: cn("inline-flex items-center gap-1.5", className),
 		...props
 	});
-}
-function BreadcrumbLink({ asChild, className, ...props }) {
+});
+var BreadcrumbLink = React.forwardRef(function BreadcrumbLink({ asChild, className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(asChild ? Slot : "a", {
+		ref,
 		"data-slot": "breadcrumb-link",
-		className: cn("transition-colors hover:text-foreground", className),
+		className: cn("rounded-xs transition-colors hover:text-foreground", focusRingClasses, className),
 		...props
 	});
-}
-function BreadcrumbPage({ className, ...props }) {
+});
+var BreadcrumbPage = React.forwardRef(function BreadcrumbPage({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("span", {
+		ref,
 		"data-slot": "breadcrumb-page",
 		role: "link",
 		"aria-disabled": "true",
@@ -43,9 +48,10 @@ function BreadcrumbPage({ className, ...props }) {
 		className: cn("font-medium text-foreground", className),
 		...props
 	});
-}
-function BreadcrumbSeparator({ children, className, ...props }) {
+});
+var BreadcrumbSeparator = React.forwardRef(function BreadcrumbSeparator({ children, className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("li", {
+		ref,
 		"data-slot": "breadcrumb-separator",
 		role: "presentation",
 		"aria-hidden": "true",
@@ -53,9 +59,10 @@ function BreadcrumbSeparator({ children, className, ...props }) {
 		...props,
 		children: children ?? /* @__PURE__ */ jsx(ChevronRight, {})
 	});
-}
-function BreadcrumbEllipsis({ className, ...props }) {
+});
+var BreadcrumbEllipsis = React.forwardRef(function BreadcrumbEllipsis({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsxs("span", {
+		ref,
 		"data-slot": "breadcrumb-ellipsis",
 		role: "presentation",
 		"aria-hidden": "true",
@@ -66,7 +73,7 @@ function BreadcrumbEllipsis({ className, ...props }) {
 			children: "More"
 		})]
 	});
-}
+});
 //#endregion
 export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator };
 

package/dist/components/breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.js","names":["Slot.Root"],"sources":["../../src/components/breadcrumb.tsx"],"sourcesContent":["import ChevronRight from '@burtson-labs/icons/react/chevron-right';\nimport MoreHorizontal from '@burtson-labs/icons/react/more-horizontal';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\nimport * as Slot from '../primitives/vendor/radix/react-slot';\n\nfunction Breadcrumb(props: React.ComponentProps<'nav'>) {\n  return <nav aria-label=\"Breadcrumb\" data-slot=\"breadcrumb\" {...props} />;\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        'flex flex-wrap items-center gap-1.5 text-sm break-words text-muted-foreground',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>) {\n  return (\n    <li\n      data-slot=\"breadcrumb-item\"\n      className={cn('inline-flex items-center gap-1.5', className)}\n      {...props}\n    />\n  );\n}\n\nfunction BreadcrumbLink({\n  asChild,\n  className,\n  ...props\n}: React.ComponentProps<'a'> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : 'a';\n  return (\n    <Comp\n      data-slot=\"breadcrumb-link\"\n      className={cn('transition-colors hover:text-foreground', className)}\n      {...props}\n    />\n  );\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn('font-medium text-foreground', className)}\n      {...props}\n    />\n  );\n}\n\nfunction BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<'li'>) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn('[&>svg]:size-3.5', className)}\n      {...props}\n    >\n      {children ?? <ChevronRight />}\n    </li>\n  );\n}\n\nfunction BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn('flex size-9 items-center justify-center', className)}\n      {...props}\n    >\n      <MoreHorizontal className=\"size-4\" />\n      <span className=\"sr-only\">More</span>\n    </span>\n  );\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n};\n"],"mappings":";;;;;;;;AAOA,SAAS,WAAW,OAAoC;CACtD,OAAO,oBAAC,OAAD;EAAK,cAAW;EAAa,aAAU;EAAa,GAAI;CAAQ,CAAA;AACzE;AAEA,SAAS,eAAe,EAAE,WAAW,GAAG,SAAqC;CAC3E,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GACT,iFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,eAAe,EAAE,WAAW,GAAG,SAAqC;CAC3E,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GAAG,oCAAoC,SAAS;EAC3D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,eAAe,EACtB,SACA,WACA,GAAG,SACiD;CAEpD,OACE,oBAFW,UAAUA,OAAY,KAEjC;EACE,aAAU;EACV,WAAW,GAAG,2CAA2C,SAAS;EAClE,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,eAAe,EAAE,WAAW,GAAG,SAAuC;CAC7E,OACE,oBAAC,QAAD;EACE,aAAU;EACV,MAAK;EACL,iBAAc;EACd,gBAAa;EACb,WAAW,GAAG,+BAA+B,SAAS;EACtD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,oBAAoB,EAAE,UAAU,WAAW,GAAG,SAAqC;CAC1F,OACE,oBAAC,MAAD;EACE,aAAU;EACV,MAAK;EACL,eAAY;EACZ,WAAW,GAAG,oBAAoB,SAAS;EAC3C,GAAI;EAEH,UAAA,YAAY,oBAAC,cAAD,CAAe,CAAA;CAC1B,CAAA;AAER;AAEA,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAuC;CACjF,OACE,qBAAC,QAAD;EACE,aAAU;EACV,MAAK;EACL,eAAY;EACZ,WAAW,GAAG,2CAA2C,SAAS;EAClE,GAAI;EALN,UAAA,CAOE,oBAAC,gBAAD,EAAgB,WAAU,SAAU,CAAA,GACpC,oBAAC,QAAD;GAAM,WAAU;GAAU,UAAA;EAAU,CAAA,CAChC;;AAEV"}
+{"version":3,"file":"breadcrumb.js","names":["Slot.Root"],"sources":["../../src/components/breadcrumb.tsx"],"sourcesContent":["import ChevronRight from '@burtson-labs/icons/react/chevron-right';\nimport MoreHorizontal from '@burtson-labs/icons/react/more-horizontal';\nimport * as React from 'react';\n\nimport { cn, focusRingClasses } from '../lib/utils';\nimport * as Slot from '../primitives/vendor/radix/react-slot';\n\nconst Breadcrumb = React.forwardRef<HTMLElement, React.ComponentProps<'nav'>>(\n  function Breadcrumb(props, ref) {\n    return <nav ref={ref} aria-label=\"Breadcrumb\" data-slot=\"breadcrumb\" {...props} />;\n  },\n);\n\nconst BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentProps<'ol'>>(\n  function BreadcrumbList({ className, ...props }, ref) {\n    return (\n      <ol\n        ref={ref}\n        data-slot=\"breadcrumb-list\"\n        className={cn(\n          'flex flex-wrap items-center gap-1.5 text-sm break-words text-muted-foreground',\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\n\nconst BreadcrumbItem = React.forwardRef<HTMLLIElement, React.ComponentProps<'li'>>(\n  function BreadcrumbItem({ className, ...props }, ref) {\n    return (\n      <li\n        ref={ref}\n        data-slot=\"breadcrumb-item\"\n        className={cn('inline-flex items-center gap-1.5', className)}\n        {...props}\n      />\n    );\n  },\n);\n\nconst BreadcrumbLink = React.forwardRef<\n  HTMLAnchorElement,\n  React.ComponentProps<'a'> & { asChild?: boolean }\n>(function BreadcrumbLink({ asChild, className, ...props }, ref) {\n  const Comp = asChild ? Slot.Root : 'a';\n  return (\n    <Comp\n      ref={ref}\n      data-slot=\"breadcrumb-link\"\n      className={cn(\n        'rounded-xs transition-colors hover:text-foreground',\n        focusRingClasses,\n        className,\n      )}\n      {...props}\n    />\n  );\n});\n\nconst BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentProps<'span'>>(\n  function BreadcrumbPage({ className, ...props }, ref) {\n    return (\n      <span\n        ref={ref}\n        data-slot=\"breadcrumb-page\"\n        role=\"link\"\n        aria-disabled=\"true\"\n        aria-current=\"page\"\n        className={cn('font-medium text-foreground', className)}\n        {...props}\n      />\n    );\n  },\n);\n\nconst BreadcrumbSeparator = React.forwardRef<HTMLLIElement, React.ComponentProps<'li'>>(\n  function BreadcrumbSeparator({ children, className, ...props }, ref) {\n    return (\n      <li\n        ref={ref}\n        data-slot=\"breadcrumb-separator\"\n        role=\"presentation\"\n        aria-hidden=\"true\"\n        className={cn('[&>svg]:size-3.5', className)}\n        {...props}\n      >\n        {children ?? <ChevronRight />}\n      </li>\n    );\n  },\n);\n\nconst BreadcrumbEllipsis = React.forwardRef<HTMLSpanElement, React.ComponentProps<'span'>>(\n  function BreadcrumbEllipsis({ className, ...props }, ref) {\n    return (\n      <span\n        ref={ref}\n        data-slot=\"breadcrumb-ellipsis\"\n        role=\"presentation\"\n        aria-hidden=\"true\"\n        className={cn('flex size-9 items-center justify-center', className)}\n        {...props}\n      >\n        <MoreHorizontal className=\"size-4\" />\n        <span className=\"sr-only\">More</span>\n      </span>\n    );\n  },\n);\n\nexport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n};\n"],"mappings":";;;;;;;;AAOA,IAAM,aAAa,MAAM,WACvB,SAAS,WAAW,OAAO,KAAK;CAC9B,OAAO,oBAAC,OAAD;EAAU;EAAK,cAAW;EAAa,aAAU;EAAa,GAAI;CAAQ,CAAA;AACnF,CACF;AAEA,IAAM,iBAAiB,MAAM,WAC3B,SAAS,eAAe,EAAE,WAAW,GAAG,SAAS,KAAK;CACpD,OACE,oBAAC,MAAD;EACO;EACL,aAAU;EACV,WAAW,GACT,iFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL,CACF;AAEA,IAAM,iBAAiB,MAAM,WAC3B,SAAS,eAAe,EAAE,WAAW,GAAG,SAAS,KAAK;CACpD,OACE,oBAAC,MAAD;EACO;EACL,aAAU;EACV,WAAW,GAAG,oCAAoC,SAAS;EAC3D,GAAI;CACL,CAAA;AAEL,CACF;AAEA,IAAM,iBAAiB,MAAM,WAG3B,SAAS,eAAe,EAAE,SAAS,WAAW,GAAG,SAAS,KAAK;CAE/D,OACE,oBAFW,UAAUA,OAAY,KAEjC;EACO;EACL,aAAU;EACV,WAAW,GACT,sDACA,kBACA,SACF;EACA,GAAI;CACL,CAAA;AAEL,CAAC;AAED,IAAM,iBAAiB,MAAM,WAC3B,SAAS,eAAe,EAAE,WAAW,GAAG,SAAS,KAAK;CACpD,OACE,oBAAC,QAAD;EACO;EACL,aAAU;EACV,MAAK;EACL,iBAAc;EACd,gBAAa;EACb,WAAW,GAAG,+BAA+B,SAAS;EACtD,GAAI;CACL,CAAA;AAEL,CACF;AAEA,IAAM,sBAAsB,MAAM,WAChC,SAAS,oBAAoB,EAAE,UAAU,WAAW,GAAG,SAAS,KAAK;CACnE,OACE,oBAAC,MAAD;EACO;EACL,aAAU;EACV,MAAK;EACL,eAAY;EACZ,WAAW,GAAG,oBAAoB,SAAS;EAC3C,GAAI;EAEH,UAAA,YAAY,oBAAC,cAAD,CAAe,CAAA;CAC1B,CAAA;AAER,CACF;AAEA,IAAM,qBAAqB,MAAM,WAC/B,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAS,KAAK;CACxD,OACE,qBAAC,QAAD;EACO;EACL,aAAU;EACV,MAAK;EACL,eAAY;EACZ,WAAW,GAAG,2CAA2C,SAAS;EAClE,GAAI;EANN,UAAA,CAQE,oBAAC,gBAAD,EAAgB,WAAU,SAAU,CAAA,GACpC,oBAAC,QAAD;GAAM,WAAU;GAAU,UAAA;EAAU,CAAA,CAChC;;AAEV,CACF"}

package/dist/components/button.d.ts

@@ -2,11 +2,18 @@ import { type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const buttonVariants: (props?: ({
     variant?: "secondary" | "destructive" | "brand" | "link" | "default" | "outline" | "soft" | "ghost" | null | undefined;
-    size?: "default" | "icon" | "xs" | "sm" | "lg" | "icon-sm" | "icon-lg" | null | undefined;
+    size?: "sm" | "lg" | "default" | "icon" | "xs" | "icon-sm" | "icon-lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface ButtonProps extends React.ComponentProps<'button'>, VariantProps<typeof buttonVariants> {
     asChild?: boolean;
     loading?: boolean;
 }
+/**
+ * The action primitive. On touch screens every button is at least 44px
+ * (`pointer-coarse:min-h-8` opts a button in a dense header out); link-styled
+ * buttons stay inline. `data-variant` and `data-size` are set for CSS that
+ * needs them. A trigger's `asChild` replaces `data-slot` with its own
+ * (`dialog-trigger`), which is why the sizing lives in the classes.
+ */
 declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export { Button, buttonVariants };