@burtson-labs/ui 0.13.1 → 0.14.1

package/dist/components/connection-status.js

@@ -1,9 +1,10 @@
-import { cn } from "../lib/utils.js";
+"use client";
+import { cn, focusRingClasses } from "../lib/utils.js";
 import { Alert, AlertDescription, AlertTitle } from "./alert.js";
 import { Button } from "./button.js";
 import { Status } from "./status.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
-import "react";
+import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import CloudOff from "@burtson-labs/icons/react/cloud-off";
 import WifiOff from "@burtson-labs/icons/react/wifi-off";
@@ -29,7 +30,7 @@ var connection = {
 	},
 	error: {
 		text: "Connection failed",
-		tone: "danger"
+		tone: "destructive"
 	},
 	unknown: {
 		text: "Status unknown",
@@ -56,7 +57,7 @@ var sync = {
 	},
 	error: {
 		text: "Sync failed",
-		tone: "danger"
+		tone: "destructive"
 	},
 	unknown: {
 		text: "Sync status unknown",
@@ -70,8 +71,9 @@ function WithDetail({ detail, children }) {
 		children
 	}), /* @__PURE__ */ jsx(TooltipContent, { children: detail })] });
 }
-function StatusLine({ slot, state, text, tone, pulse, detail, onRetry, className, ...props }) {
+var StatusLine = React.forwardRef(function StatusLine({ slot, state, text, tone, pulse, detail, onRetry, className, ...props }, ref) {
 	return /* @__PURE__ */ jsxs("div", {
+		ref,
 		"data-slot": slot,
 		"data-state": state,
 		role: "status",
@@ -83,7 +85,7 @@ function StatusLine({ slot, state, text, tone, pulse, detail, onRetry, className
 				status: tone,
 				pulse,
 				tabIndex: detail ? 0 : void 0,
-				className: "rounded-sm outline-none focus-visible:ring-[3px] focus-visible:ring-ring/20",
+				className: cn("rounded-sm", focusRingClasses, detail && "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-['']"),
 				children: [text, detail && typeof detail === "string" && /* @__PURE__ */ jsxs("span", {
 					className: "sr-only",
 					children: [". ", detail]
@@ -98,11 +100,12 @@ function StatusLine({ slot, state, text, tone, pulse, detail, onRetry, className
 			children: "Retry"
 		})]
 	});
-}
+});
 /** A dot and a word for a live connection: model provider, gateway, socket. */
-function ConnectionStatus({ state, label, detail, onRetry, ...props }) {
+var ConnectionStatus = React.forwardRef(function ConnectionStatus({ state, label, detail, onRetry, ...props }, ref) {
 	const c = connection[state];
 	return /* @__PURE__ */ jsx(StatusLine, {
+		ref,
 		slot: "connection-status",
 		state,
 		text: label ?? c.text,
@@ -112,17 +115,18 @@ function ConnectionStatus({ state, label, detail, onRetry, ...props }) {
 		onRetry: state === "offline" || state === "error" ? onRetry : void 0,
 		...props
 	});
-}
+});
 /** Whether local changes have reached the server. */
-function SyncStatus({ state, lastSynced, pendingCount, detail, onRetry, formatTime = (d) => d.toLocaleTimeString([], {
+var SyncStatus = React.forwardRef(function SyncStatus({ state, lastSynced, pendingCount, detail, onRetry, formatTime = (d) => d.toLocaleTimeString([], {
 	hour: "numeric",
 	minute: "2-digit"
-}), ...props }) {
+}), ...props }, ref) {
 	const s = sync[state];
 	let text = s.text;
 	if (state === "synced" && lastSynced) text = `Synced ${formatTime(lastSynced)}`;
 	if (state === "pending" && pendingCount) text = `${pendingCount} ${pendingCount === 1 ? "change" : "changes"} not synced yet`;
 	return /* @__PURE__ */ jsx(StatusLine, {
+		ref,
 		slot: "sync-status",
 		state,
 		text,
@@ -132,15 +136,16 @@ function SyncStatus({ state, lastSynced, pendingCount, detail, onRetry, formatTi
 		onRetry: state === "error" ? onRetry : void 0,
 		...props
 	});
-}
+});
 /**
 * A full-width notice for connection trouble. It renders nothing while
 * connected, connecting or unknown, so it can stay mounted.
 */
-function ConnectionBanner({ state, description, onRetry, className, ...props }) {
+var ConnectionBanner = React.forwardRef(function ConnectionBanner({ state, description, onRetry, className, ...props }, ref) {
 	if (state !== "offline" && state !== "error" && state !== "reconnecting") return null;
 	const title = state === "offline" ? "You are offline" : state === "reconnecting" ? "Reconnecting…" : "Could not connect";
 	return /* @__PURE__ */ jsxs(Alert, {
+		ref,
 		"data-slot": "connection-banner",
 		"data-state": state,
 		variant: state === "error" ? "destructive" : "warning",
@@ -160,7 +165,7 @@ function ConnectionBanner({ state, description, onRetry, className, ...props })
 			})]
 		})]
 	});
-}
+});
 //#endregion
 export { ConnectionBanner, ConnectionStatus, SyncStatus };
 

package/dist/components/connection-status.js.map

@@ -1 +1 @@
-{"version":3,"file":"connection-status.js","names":[],"sources":["../../src/components/connection-status.tsx"],"sourcesContent":["import CloudOff from '@burtson-labs/icons/react/cloud-off';\nimport WifiOff from '@burtson-labs/icons/react/wifi-off';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nimport { Alert, AlertDescription, AlertTitle } from './alert';\nimport { Button } from './button';\nimport { Status } from './status';\nimport { Tooltip, TooltipContent, TooltipTrigger } from './tooltip';\n\ntype Tone = 'neutral' | 'brand' | 'success' | 'warning' | 'danger' | 'info';\n\n/**\n * The host reports the state; these components only present it. `unknown`\n * means nobody has checked yet and never reads as connected.\n */\nexport type ConnectionState =\n  'connected' | 'connecting' | 'reconnecting' | 'offline' | 'error' | 'unknown';\n\nconst connection: Record<ConnectionState, { text: string; tone: Tone; pulse?: boolean }> = {\n  connected: { text: 'Connected', tone: 'success' },\n  connecting: { text: 'Connecting', tone: 'info', pulse: true },\n  reconnecting: { text: 'Reconnecting', tone: 'warning', pulse: true },\n  offline: { text: 'Offline', tone: 'neutral' },\n  error: { text: 'Connection failed', tone: 'danger' },\n  unknown: { text: 'Status unknown', tone: 'neutral' },\n};\n\nexport type SyncState = 'synced' | 'syncing' | 'pending' | 'offline' | 'error' | 'unknown';\n\nconst sync: Record<SyncState, { text: string; tone: Tone; pulse?: boolean }> = {\n  synced: { text: 'Synced', tone: 'success' },\n  syncing: { text: 'Syncing', tone: 'info', pulse: true },\n  pending: { text: 'Changes not synced yet', tone: 'warning' },\n  offline: { text: 'Offline, saved on this device', tone: 'neutral' },\n  error: { text: 'Sync failed', tone: 'danger' },\n  unknown: { text: 'Sync status unknown', tone: 'neutral' },\n};\n\nfunction WithDetail({\n  detail,\n  children,\n}: {\n  detail?: React.ReactNode;\n  children: React.ReactElement;\n}) {\n  if (!detail) return children;\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>{children}</TooltipTrigger>\n      <TooltipContent>{detail}</TooltipContent>\n    </Tooltip>\n  );\n}\n\nfunction StatusLine({\n  slot,\n  state,\n  text,\n  tone,\n  pulse,\n  detail,\n  onRetry,\n  className,\n  ...props\n}: Omit<React.ComponentProps<'div'>, 'children'> & {\n  slot: string;\n  state: string;\n  text: React.ReactNode;\n  tone: Tone;\n  pulse?: boolean;\n  detail?: React.ReactNode;\n  onRetry?: () => void;\n}) {\n  return (\n    <div\n      data-slot={slot}\n      data-state={state}\n      role=\"status\"\n      className={cn('inline-flex items-center gap-2', className)}\n      {...props}\n    >\n      <WithDetail detail={detail}>\n        <Status\n          status={tone}\n          pulse={pulse}\n          tabIndex={detail ? 0 : undefined}\n          className=\"rounded-sm outline-none focus-visible:ring-[3px] focus-visible:ring-ring/20\"\n        >\n          {text}\n          {detail && typeof detail === 'string' && <span className=\"sr-only\">. {detail}</span>}\n        </Status>\n      </WithDetail>\n      {onRetry && (\n        <Button type=\"button\" variant=\"link\" size=\"xs\" className=\"h-auto px-0\" onClick={onRetry}>\n          Retry\n        </Button>\n      )}\n    </div>\n  );\n}\n\nexport interface ConnectionStatusProps extends Omit<React.ComponentProps<'div'>, 'children'> {\n  state: ConnectionState;\n  /** Overrides the default text, e.g. \"Connected to Ollama\". */\n  label?: React.ReactNode;\n  /** More detail in a tooltip, e.g. the endpoint or last error. */\n  detail?: React.ReactNode;\n  /** Offered when offline or failed. */\n  onRetry?: () => void;\n}\n\n/** A dot and a word for a live connection: model provider, gateway, socket. */\nfunction ConnectionStatus({ state, label, detail, onRetry, ...props }: ConnectionStatusProps) {\n  const c = connection[state];\n  return (\n    <StatusLine\n      slot=\"connection-status\"\n      state={state}\n      text={label ?? c.text}\n      tone={c.tone}\n      pulse={c.pulse}\n      detail={detail}\n      onRetry={state === 'offline' || state === 'error' ? onRetry : undefined}\n      {...props}\n    />\n  );\n}\n\nexport interface SyncStatusProps extends Omit<React.ComponentProps<'div'>, 'children'> {\n  state: SyncState;\n  /** When the last successful sync finished. */\n  lastSynced?: Date;\n  /** Changes waiting to go up. */\n  pendingCount?: number;\n  detail?: React.ReactNode;\n  /** Offered when sync failed. */\n  onRetry?: () => void;\n  /** Formats `lastSynced`; the default is the local time. */\n  formatTime?: (date: Date) => string;\n}\n\n/** Whether local changes have reached the server. */\nfunction SyncStatus({\n  state,\n  lastSynced,\n  pendingCount,\n  detail,\n  onRetry,\n  formatTime = (d) => d.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }),\n  ...props\n}: SyncStatusProps) {\n  const s = sync[state];\n  let text = s.text;\n  if (state === 'synced' && lastSynced) text = `Synced ${formatTime(lastSynced)}`;\n  if (state === 'pending' && pendingCount)\n    text = `${pendingCount} ${pendingCount === 1 ? 'change' : 'changes'} not synced yet`;\n  return (\n    <StatusLine\n      slot=\"sync-status\"\n      state={state}\n      text={text}\n      tone={s.tone}\n      pulse={s.pulse}\n      detail={detail}\n      onRetry={state === 'error' ? onRetry : undefined}\n      {...props}\n    />\n  );\n}\n\nexport interface ConnectionBannerProps extends Omit<React.ComponentProps<'div'>, 'children'> {\n  state: ConnectionState;\n  /** What still works, e.g. \"Messages you send will go out when you reconnect.\" */\n  description?: React.ReactNode;\n  onRetry?: () => void;\n}\n\n/**\n * A full-width notice for connection trouble. It renders nothing while\n * connected, connecting or unknown, so it can stay mounted.\n */\nfunction ConnectionBanner({\n  state,\n  description,\n  onRetry,\n  className,\n  ...props\n}: ConnectionBannerProps) {\n  if (state !== 'offline' && state !== 'error' && state !== 'reconnecting') return null;\n  const title =\n    state === 'offline'\n      ? 'You are offline'\n      : state === 'reconnecting'\n        ? 'Reconnecting…'\n        : 'Could not connect';\n  return (\n    <Alert\n      data-slot=\"connection-banner\"\n      data-state={state}\n      variant={state === 'error' ? 'destructive' : 'warning'}\n      className={cn('items-center', className)}\n      {...props}\n    >\n      {state === 'offline' ? <WifiOff aria-hidden /> : <CloudOff aria-hidden />}\n      <div className=\"flex min-w-0 flex-wrap items-center justify-between gap-x-4 gap-y-2\">\n        <div className=\"min-w-0\">\n          <AlertTitle>{title}</AlertTitle>\n          {description && <AlertDescription>{description}</AlertDescription>}\n        </div>\n        {onRetry && state !== 'reconnecting' && (\n          <Button type=\"button\" size=\"sm\" variant=\"outline\" onClick={onRetry}>\n            Retry\n          </Button>\n        )}\n      </div>\n    </Alert>\n  );\n}\n\nexport { ConnectionBanner, ConnectionStatus, SyncStatus };\n"],"mappings":"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"}
+{"version":3,"file":"connection-status.js","names":[],"sources":["../../src/components/connection-status.tsx"],"sourcesContent":["import CloudOff from '@burtson-labs/icons/react/cloud-off';\nimport WifiOff from '@burtson-labs/icons/react/wifi-off';\nimport * as React from 'react';\n\nimport { cn, focusRingClasses, touchTargetRowClasses } from '../lib/utils';\n\nimport { Alert, AlertDescription, AlertTitle } from './alert';\nimport { Button } from './button';\nimport { Status } from './status';\nimport { Tooltip, TooltipContent, TooltipTrigger } from './tooltip';\n\ntype Tone = 'neutral' | 'brand' | 'success' | 'warning' | 'destructive' | 'info';\n\n/**\n * The host reports the state; these components only present it. `unknown`\n * means nobody has checked yet and never reads as connected.\n */\nexport type ConnectionState =\n  'connected' | 'connecting' | 'reconnecting' | 'offline' | 'error' | 'unknown';\n\nconst connection: Record<ConnectionState, { text: string; tone: Tone; pulse?: boolean }> = {\n  connected: { text: 'Connected', tone: 'success' },\n  connecting: { text: 'Connecting', tone: 'info', pulse: true },\n  reconnecting: { text: 'Reconnecting', tone: 'warning', pulse: true },\n  offline: { text: 'Offline', tone: 'neutral' },\n  error: { text: 'Connection failed', tone: 'destructive' },\n  unknown: { text: 'Status unknown', tone: 'neutral' },\n};\n\nexport type SyncState = 'synced' | 'syncing' | 'pending' | 'offline' | 'error' | 'unknown';\n\nconst sync: Record<SyncState, { text: string; tone: Tone; pulse?: boolean }> = {\n  synced: { text: 'Synced', tone: 'success' },\n  syncing: { text: 'Syncing', tone: 'info', pulse: true },\n  pending: { text: 'Changes not synced yet', tone: 'warning' },\n  offline: { text: 'Offline, saved on this device', tone: 'neutral' },\n  error: { text: 'Sync failed', tone: 'destructive' },\n  unknown: { text: 'Sync status unknown', tone: 'neutral' },\n};\n\nfunction WithDetail({\n  detail,\n  children,\n}: {\n  detail?: React.ReactNode;\n  children: React.ReactElement;\n}) {\n  if (!detail) return children;\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>{children}</TooltipTrigger>\n      <TooltipContent>{detail}</TooltipContent>\n    </Tooltip>\n  );\n}\n\ninterface StatusLineProps extends Omit<React.ComponentProps<'div'>, 'children'> {\n  slot: string;\n  state: string;\n  text: React.ReactNode;\n  tone: Tone;\n  pulse?: boolean;\n  detail?: React.ReactNode;\n  onRetry?: () => void;\n}\n\nconst StatusLine = React.forwardRef<HTMLDivElement, StatusLineProps>(function StatusLine(\n  { slot, state, text, tone, pulse, detail, onRetry, className, ...props },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      data-slot={slot}\n      data-state={state}\n      role=\"status\"\n      className={cn('inline-flex items-center gap-2', className)}\n      {...props}\n    >\n      <WithDetail detail={detail}>\n        <Status\n          status={tone}\n          pulse={pulse}\n          tabIndex={detail ? 0 : undefined}\n          className={cn('rounded-sm', focusRingClasses, detail && touchTargetRowClasses)}\n        >\n          {text}\n          {detail && typeof detail === 'string' && <span className=\"sr-only\">. {detail}</span>}\n        </Status>\n      </WithDetail>\n      {onRetry && (\n        <Button type=\"button\" variant=\"link\" size=\"xs\" className=\"h-auto px-0\" onClick={onRetry}>\n          Retry\n        </Button>\n      )}\n    </div>\n  );\n});\n\nexport interface ConnectionStatusProps extends Omit<React.ComponentProps<'div'>, 'children'> {\n  state: ConnectionState;\n  /** Overrides the default text, e.g. \"Connected to Ollama\". */\n  label?: React.ReactNode;\n  /** More detail in a tooltip, e.g. the endpoint or last error. */\n  detail?: React.ReactNode;\n  /** Offered when offline or failed. */\n  onRetry?: () => void;\n}\n\n/** A dot and a word for a live connection: model provider, gateway, socket. */\nconst ConnectionStatus = React.forwardRef<HTMLDivElement, ConnectionStatusProps>(\n  function ConnectionStatus({ state, label, detail, onRetry, ...props }, ref) {\n    const c = connection[state];\n    return (\n      <StatusLine\n        ref={ref}\n        slot=\"connection-status\"\n        state={state}\n        text={label ?? c.text}\n        tone={c.tone}\n        pulse={c.pulse}\n        detail={detail}\n        onRetry={state === 'offline' || state === 'error' ? onRetry : undefined}\n        {...props}\n      />\n    );\n  },\n);\n\nexport interface SyncStatusProps extends Omit<React.ComponentProps<'div'>, 'children'> {\n  state: SyncState;\n  /** When the last successful sync finished. */\n  lastSynced?: Date;\n  /** Changes waiting to go up. */\n  pendingCount?: number;\n  detail?: React.ReactNode;\n  /** Offered when sync failed. */\n  onRetry?: () => void;\n  /** Formats `lastSynced`; the default is the local time. */\n  formatTime?: (date: Date) => string;\n}\n\n/** Whether local changes have reached the server. */\nconst SyncStatus = React.forwardRef<HTMLDivElement, SyncStatusProps>(function SyncStatus(\n  {\n    state,\n    lastSynced,\n    pendingCount,\n    detail,\n    onRetry,\n    formatTime = (d) => d.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }),\n    ...props\n  },\n  ref,\n) {\n  const s = sync[state];\n  let text = s.text;\n  if (state === 'synced' && lastSynced) text = `Synced ${formatTime(lastSynced)}`;\n  if (state === 'pending' && pendingCount)\n    text = `${pendingCount} ${pendingCount === 1 ? 'change' : 'changes'} not synced yet`;\n  return (\n    <StatusLine\n      ref={ref}\n      slot=\"sync-status\"\n      state={state}\n      text={text}\n      tone={s.tone}\n      pulse={s.pulse}\n      detail={detail}\n      onRetry={state === 'error' ? onRetry : undefined}\n      {...props}\n    />\n  );\n});\n\nexport interface ConnectionBannerProps extends Omit<React.ComponentProps<'div'>, 'children'> {\n  state: ConnectionState;\n  /** What still works, e.g. \"Messages you send will go out when you reconnect.\" */\n  description?: React.ReactNode;\n  onRetry?: () => void;\n}\n\n/**\n * A full-width notice for connection trouble. It renders nothing while\n * connected, connecting or unknown, so it can stay mounted.\n */\nconst ConnectionBanner = React.forwardRef<HTMLDivElement, ConnectionBannerProps>(\n  function ConnectionBanner({ state, description, onRetry, className, ...props }, ref) {\n    if (state !== 'offline' && state !== 'error' && state !== 'reconnecting') return null;\n    const title =\n      state === 'offline'\n        ? 'You are offline'\n        : state === 'reconnecting'\n          ? 'Reconnecting…'\n          : 'Could not connect';\n    return (\n      <Alert\n        ref={ref}\n        data-slot=\"connection-banner\"\n        data-state={state}\n        variant={state === 'error' ? 'destructive' : 'warning'}\n        className={cn('items-center', className)}\n        {...props}\n      >\n        {state === 'offline' ? <WifiOff aria-hidden /> : <CloudOff aria-hidden />}\n        <div className=\"flex min-w-0 flex-wrap items-center justify-between gap-x-4 gap-y-2\">\n          <div className=\"min-w-0\">\n            <AlertTitle>{title}</AlertTitle>\n            {description && <AlertDescription>{description}</AlertDescription>}\n          </div>\n          {onRetry && state !== 'reconnecting' && (\n            <Button type=\"button\" size=\"sm\" variant=\"outline\" onClick={onRetry}>\n              Retry\n            </Button>\n          )}\n        </div>\n      </Alert>\n    );\n  },\n);\n\nexport { ConnectionBanner, ConnectionStatus, SyncStatus };\n"],"mappings":"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"}

package/dist/components/context-menu.d.ts

@@ -1,5 +1,5 @@
-import { ContextMenu as ContextMenuPrimitive } from 'radix-ui';
 import * as React from 'react';
+import * as ContextMenuPrimitive from '../primitives/vendor/radix/react-context-menu';
 /**
  * A right-click menu. Wrap the target in ContextMenuTrigger (use asChild to keep
  * your element); the menu opens at the pointer, and from the keyboard with the
@@ -7,24 +7,25 @@ import * as React from 'react';
  * DropdownMenu, so a command can appear in both.
  */
 declare function ContextMenu(props: React.ComponentProps<typeof ContextMenuPrimitive.Root>): React.JSX.Element;
-declare function ContextMenuTrigger(props: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>): React.JSX.Element;
+declare const ContextMenuTrigger: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuTriggerProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 declare function ContextMenuGroup(props: React.ComponentProps<typeof ContextMenuPrimitive.Group>): React.JSX.Element;
-declare function ContextMenuContent({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Content>): React.JSX.Element;
-declare function ContextMenuItem({ className, inset, variant, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
+declare const ContextMenuContent: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface ContextMenuItemProps extends React.ComponentProps<typeof ContextMenuPrimitive.Item> {
     inset?: boolean;
     variant?: 'default' | 'destructive';
-}): React.JSX.Element;
-declare function ContextMenuCheckboxItem({ className, children, checked, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>): React.JSX.Element;
+}
+declare const ContextMenuItem: React.ForwardRefExoticComponent<Omit<ContextMenuItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuCheckboxItem: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare function ContextMenuRadioGroup(props: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>): React.JSX.Element;
-declare function ContextMenuRadioItem({ className, children, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>): React.JSX.Element;
-declare function ContextMenuLabel({ className, inset, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
+declare const ContextMenuRadioItem: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuLabel: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuLabelProps & React.RefAttributes<HTMLDivElement> & {
     inset?: boolean;
-}): React.JSX.Element;
-declare function ContextMenuSeparator({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Separator>): React.JSX.Element;
-declare function ContextMenuShortcut({ className, ...props }: React.ComponentProps<'span'>): React.JSX.Element;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuSeparator: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuShortcut: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 declare function ContextMenuSub(props: React.ComponentProps<typeof ContextMenuPrimitive.Sub>): React.JSX.Element;
-declare function ContextMenuSubTrigger({ className, inset, children, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
+declare const ContextMenuSubTrigger: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSubTriggerProps & React.RefAttributes<HTMLDivElement> & {
     inset?: boolean;
-}): React.JSX.Element;
-declare function ContextMenuSubContent({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>): React.JSX.Element;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuSubContent: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, };

package/dist/components/context-menu.js

@@ -1,7 +1,8 @@
+"use client";
 import { cn } from "../lib/utils.js";
-import { menuItemClasses, surfaceClasses } from "./popover.js";
-import { ContextMenu } from "radix-ui";
-import "react";
+import { menuItemClasses, menuLabelClasses, surfaceClasses } from "./popover.js";
+import { CheckboxItem, Content, Group, Item, ItemIndicator, Label, Portal, RadioGroup, RadioItem, Root, Separator, Sub, SubContent, SubTrigger, Trigger } from "../primitives/vendor/radix/react-context-menu/context-menu.js";
+import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import ChevronRight from "@burtson-labs/icons/react/chevron-right";
 import Check from "@burtson-labs/icons/react/check";
@@ -12,102 +13,111 @@ import Check from "@burtson-labs/icons/react/check";
 * context-menu key or Shift+F10 on the focused target. Same rows as
 * DropdownMenu, so a command can appear in both.
 */
-function ContextMenu$1(props) {
-	return /* @__PURE__ */ jsx(ContextMenu.Root, {
+function ContextMenu(props) {
+	return /* @__PURE__ */ jsx(Root, {
 		"data-slot": "context-menu",
 		...props
 	});
 }
-function ContextMenuTrigger(props) {
-	return /* @__PURE__ */ jsx(ContextMenu.Trigger, {
+var ContextMenuTrigger = React.forwardRef(function ContextMenuTrigger(props, ref) {
+	return /* @__PURE__ */ jsx(Trigger, {
+		ref,
 		"data-slot": "context-menu-trigger",
 		...props
 	});
-}
+});
 function ContextMenuGroup(props) {
-	return /* @__PURE__ */ jsx(ContextMenu.Group, {
+	return /* @__PURE__ */ jsx(Group, {
 		"data-slot": "context-menu-group",
 		...props
 	});
 }
-function ContextMenuContent({ className, ...props }) {
-	return /* @__PURE__ */ jsx(ContextMenu.Portal, { children: /* @__PURE__ */ jsx(ContextMenu.Content, {
+var ContextMenuContent = React.forwardRef(function ContextMenuContent({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Content, {
+		ref,
 		"data-slot": "context-menu-content",
 		className: cn(surfaceClasses, "max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto p-1", className),
 		...props
 	}) });
-}
-function ContextMenuItem({ className, inset, variant = "default", ...props }) {
-	return /* @__PURE__ */ jsx(ContextMenu.Item, {
+});
+var ContextMenuItem = React.forwardRef(function ContextMenuItem({ className, inset, variant = "default", ...props }, ref) {
+	return /* @__PURE__ */ jsx(Item, {
+		ref,
 		"data-slot": "context-menu-item",
 		"data-inset": inset || void 0,
 		"data-variant": variant,
 		className: cn(menuItemClasses, "data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:*:[svg]:!text-destructive", className),
 		...props
 	});
-}
-function ContextMenuCheckboxItem({ className, children, checked, ...props }) {
-	return /* @__PURE__ */ jsxs(ContextMenu.CheckboxItem, {
+});
+var ContextMenuCheckboxItem = React.forwardRef(function ContextMenuCheckboxItem({ className, children, checked, ...props }, ref) {
+	return /* @__PURE__ */ jsxs(CheckboxItem, {
+		ref,
 		"data-slot": "context-menu-checkbox-item",
 		className: cn(menuItemClasses, "pl-8", className),
 		checked,
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center",
-			children: /* @__PURE__ */ jsx(ContextMenu.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, {
+			children: /* @__PURE__ */ jsx(ItemIndicator, { children: /* @__PURE__ */ jsx(Check, {
 				className: "size-4 text-foreground",
 				"aria-hidden": true
 			}) })
 		}), children]
 	});
-}
+});
 function ContextMenuRadioGroup(props) {
-	return /* @__PURE__ */ jsx(ContextMenu.RadioGroup, {
+	return /* @__PURE__ */ jsx(RadioGroup, {
 		"data-slot": "context-menu-radio-group",
 		...props
 	});
 }
-function ContextMenuRadioItem({ className, children, ...props }) {
-	return /* @__PURE__ */ jsxs(ContextMenu.RadioItem, {
+var ContextMenuRadioItem = React.forwardRef(function ContextMenuRadioItem({ className, children, ...props }, ref) {
+	return /* @__PURE__ */ jsxs(RadioItem, {
+		ref,
 		"data-slot": "context-menu-radio-item",
 		className: cn(menuItemClasses, "pl-8", className),
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center",
-			children: /* @__PURE__ */ jsx(ContextMenu.ItemIndicator, { children: /* @__PURE__ */ jsx("span", { className: "block size-2 rounded-full bg-foreground" }) })
+			children: /* @__PURE__ */ jsx(ItemIndicator, { children: /* @__PURE__ */ jsx("span", { className: "block size-2 rounded-full bg-foreground" }) })
 		}), children]
 	});
-}
-function ContextMenuLabel({ className, inset, ...props }) {
-	return /* @__PURE__ */ jsx(ContextMenu.Label, {
+});
+var ContextMenuLabel = React.forwardRef(function ContextMenuLabel({ className, inset, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Label, {
+		ref,
 		"data-slot": "context-menu-label",
 		"data-inset": inset || void 0,
-		className: cn("px-2 pt-2 pb-1 text-[11px] font-semibold tracking-[0.08em] text-muted-foreground uppercase data-[inset]:pl-8", className),
+		className: cn(menuLabelClasses, "data-[inset]:pl-8", className),
 		...props
 	});
-}
-function ContextMenuSeparator({ className, ...props }) {
-	return /* @__PURE__ */ jsx(ContextMenu.Separator, {
+});
+var ContextMenuSeparator = React.forwardRef(function ContextMenuSeparator({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Separator, {
+		ref,
 		"data-slot": "context-menu-separator",
 		className: cn("-mx-1 my-1 h-px bg-border", className),
 		...props
 	});
-}
-function ContextMenuShortcut({ className, ...props }) {
+});
+var ContextMenuShortcut = React.forwardRef(function ContextMenuShortcut({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("span", {
+		ref,
 		"data-slot": "context-menu-shortcut",
 		className: cn("ml-auto text-xs tracking-widest text-muted-foreground", className),
 		...props
 	});
-}
+});
 function ContextMenuSub(props) {
-	return /* @__PURE__ */ jsx(ContextMenu.Sub, {
+	return /* @__PURE__ */ jsx(Sub, {
 		"data-slot": "context-menu-sub",
 		...props
 	});
 }
-function ContextMenuSubTrigger({ className, inset, children, ...props }) {
-	return /* @__PURE__ */ jsxs(ContextMenu.SubTrigger, {
+var ContextMenuSubTrigger = React.forwardRef(function ContextMenuSubTrigger({ className, inset, children, ...props }, ref) {
+	return /* @__PURE__ */ jsxs(SubTrigger, {
+		ref,
 		"data-slot": "context-menu-sub-trigger",
 		"data-inset": inset || void 0,
 		className: cn(menuItemClasses, "data-[state=open]:bg-secondary", className),
@@ -117,15 +127,16 @@ function ContextMenuSubTrigger({ className, inset, children, ...props }) {
 			"aria-hidden": true
 		})]
 	});
-}
-function ContextMenuSubContent({ className, ...props }) {
-	return /* @__PURE__ */ jsx(ContextMenu.Portal, { children: /* @__PURE__ */ jsx(ContextMenu.SubContent, {
+});
+var ContextMenuSubContent = React.forwardRef(function ContextMenuSubContent({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(SubContent, {
+		ref,
 		"data-slot": "context-menu-sub-content",
 		className: cn(surfaceClasses, "min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden p-1", className),
 		...props
 	}) });
-}
+});
 //#endregion
-export { ContextMenu$1 as ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger };
+export { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger };
 
 //# sourceMappingURL=context-menu.js.map

package/dist/components/context-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"context-menu.js","names":["ContextMenu","ContextMenuPrimitive","itemClasses"],"sources":["../../src/components/context-menu.tsx"],"sourcesContent":["import Check from '@burtson-labs/icons/react/check';\nimport ChevronRight from '@burtson-labs/icons/react/chevron-right';\nimport { ContextMenu as ContextMenuPrimitive } from 'radix-ui';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nimport { menuItemClasses as itemClasses, surfaceClasses } from './popover';\n\n/**\n * A right-click menu. Wrap the target in ContextMenuTrigger (use asChild to keep\n * your element); the menu opens at the pointer, and from the keyboard with the\n * context-menu key or Shift+F10 on the focused target. Same rows as\n * DropdownMenu, so a command can appear in both.\n */\nfunction ContextMenu(props: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />;\n}\n\nfunction ContextMenuTrigger(props: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {\n  return <ContextMenuPrimitive.Trigger data-slot=\"context-menu-trigger\" {...props} />;\n}\n\nfunction ContextMenuGroup(props: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {\n  return <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />;\n}\n\nfunction ContextMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Content\n        data-slot=\"context-menu-content\"\n        className={cn(\n          surfaceClasses,\n          'max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto p-1',\n          className,\n        )}\n        {...props}\n      />\n    </ContextMenuPrimitive.Portal>\n  );\n}\n\nfunction ContextMenuItem({\n  className,\n  inset,\n  variant = 'default',\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {\n  inset?: boolean;\n  variant?: 'default' | 'destructive';\n}) {\n  return (\n    <ContextMenuPrimitive.Item\n      data-slot=\"context-menu-item\"\n      data-inset={inset || undefined}\n      data-variant={variant}\n      className={cn(\n        itemClasses,\n        'data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:*:[svg]:!text-destructive',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      className={cn(itemClasses, 'pl-8', className)}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <ContextMenuPrimitive.ItemIndicator>\n          <Check className=\"size-4 text-foreground\" aria-hidden />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.CheckboxItem>\n  );\n}\n\nfunction ContextMenuRadioGroup(\n  props: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>,\n) {\n  return <ContextMenuPrimitive.RadioGroup data-slot=\"context-menu-radio-group\" {...props} />;\n}\n\nfunction ContextMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot=\"context-menu-radio-item\"\n      className={cn(itemClasses, 'pl-8', className)}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <ContextMenuPrimitive.ItemIndicator>\n          <span className=\"block size-2 rounded-full bg-foreground\" />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.RadioItem>\n  );\n}\n\nfunction ContextMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & { inset?: boolean }) {\n  return (\n    <ContextMenuPrimitive.Label\n      data-slot=\"context-menu-label\"\n      data-inset={inset || undefined}\n      className={cn(\n        'px-2 pt-2 pb-1 text-[11px] font-semibold tracking-[0.08em] text-muted-foreground uppercase data-[inset]:pl-8',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ContextMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {\n  return (\n    <ContextMenuPrimitive.Separator\n      data-slot=\"context-menu-separator\"\n      className={cn('-mx-1 my-1 h-px bg-border', className)}\n      {...props}\n    />\n  );\n}\n\nfunction ContextMenuShortcut({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)}\n      {...props}\n    />\n  );\n}\n\nfunction ContextMenuSub(props: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {\n  return <ContextMenuPrimitive.Sub data-slot=\"context-menu-sub\" {...props} />;\n}\n\nfunction ContextMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & { inset?: boolean }) {\n  return (\n    <ContextMenuPrimitive.SubTrigger\n      data-slot=\"context-menu-sub-trigger\"\n      data-inset={inset || undefined}\n      className={cn(itemClasses, 'data-[state=open]:bg-secondary', className)}\n      {...props}\n    >\n      {children}\n      <ChevronRight className=\"ml-auto size-4\" aria-hidden />\n    </ContextMenuPrimitive.SubTrigger>\n  );\n}\n\nfunction ContextMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.SubContent\n        data-slot=\"context-menu-sub-content\"\n        className={cn(\n          surfaceClasses,\n          'min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden p-1',\n          className,\n        )}\n        {...props}\n      />\n    </ContextMenuPrimitive.Portal>\n  );\n}\n\nexport {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuGroup,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n};\n"],"mappings":"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"}
+{"version":3,"file":"context-menu.js","names":["ContextMenuPrimitive.Root","ContextMenuPrimitive.Trigger","ContextMenuPrimitive.Group","ContextMenuPrimitive.Portal","ContextMenuPrimitive.Content","ContextMenuPrimitive.Item","itemClasses","ContextMenuPrimitive.CheckboxItem","ContextMenuPrimitive.ItemIndicator","ContextMenuPrimitive.RadioGroup","ContextMenuPrimitive.RadioItem","ContextMenuPrimitive.Label","ContextMenuPrimitive.Separator","ContextMenuPrimitive.Sub","ContextMenuPrimitive.SubTrigger","ContextMenuPrimitive.SubContent"],"sources":["../../src/components/context-menu.tsx"],"sourcesContent":["import Check from '@burtson-labs/icons/react/check';\nimport ChevronRight from '@burtson-labs/icons/react/chevron-right';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\nimport * as ContextMenuPrimitive from '../primitives/vendor/radix/react-context-menu';\n\nimport { menuItemClasses as itemClasses, menuLabelClasses, surfaceClasses } from './popover';\n\n/**\n * A right-click menu. Wrap the target in ContextMenuTrigger (use asChild to keep\n * your element); the menu opens at the pointer, and from the keyboard with the\n * context-menu key or Shift+F10 on the focused target. Same rows as\n * DropdownMenu, so a command can appear in both.\n */\nfunction ContextMenu(props: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />;\n}\n\nconst ContextMenuTrigger = React.forwardRef<\n  HTMLSpanElement,\n  React.ComponentProps<typeof ContextMenuPrimitive.Trigger>\n>(function ContextMenuTrigger(props, ref) {\n  return <ContextMenuPrimitive.Trigger ref={ref} data-slot=\"context-menu-trigger\" {...props} />;\n});\n\nfunction ContextMenuGroup(props: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {\n  return <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />;\n}\n\nconst ContextMenuContent = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof ContextMenuPrimitive.Content>\n>(function ContextMenuContent({ className, ...props }, ref) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Content\n        ref={ref}\n        data-slot=\"context-menu-content\"\n        className={cn(\n          surfaceClasses,\n          'max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto p-1',\n          className,\n        )}\n        {...props}\n      />\n    </ContextMenuPrimitive.Portal>\n  );\n});\n\nexport interface ContextMenuItemProps extends React.ComponentProps<\n  typeof ContextMenuPrimitive.Item\n> {\n  inset?: boolean;\n  variant?: 'default' | 'destructive';\n}\n\nconst ContextMenuItem = React.forwardRef<HTMLDivElement, ContextMenuItemProps>(\n  function ContextMenuItem({ className, inset, variant = 'default', ...props }, ref) {\n    return (\n      <ContextMenuPrimitive.Item\n        ref={ref}\n        data-slot=\"context-menu-item\"\n        data-inset={inset || undefined}\n        data-variant={variant}\n        className={cn(\n          itemClasses,\n          'data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:*:[svg]:!text-destructive',\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\n\nconst ContextMenuCheckboxItem = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>\n>(function ContextMenuCheckboxItem({ className, children, checked, ...props }, ref) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      ref={ref}\n      data-slot=\"context-menu-checkbox-item\"\n      className={cn(itemClasses, 'pl-8', className)}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <ContextMenuPrimitive.ItemIndicator>\n          <Check className=\"size-4 text-foreground\" aria-hidden />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.CheckboxItem>\n  );\n});\n\nfunction ContextMenuRadioGroup(\n  props: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>,\n) {\n  return <ContextMenuPrimitive.RadioGroup data-slot=\"context-menu-radio-group\" {...props} />;\n}\n\nconst ContextMenuRadioItem = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>\n>(function ContextMenuRadioItem({ className, children, ...props }, ref) {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      ref={ref}\n      data-slot=\"context-menu-radio-item\"\n      className={cn(itemClasses, 'pl-8', className)}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <ContextMenuPrimitive.ItemIndicator>\n          <span className=\"block size-2 rounded-full bg-foreground\" />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.RadioItem>\n  );\n});\n\nconst ContextMenuLabel = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof ContextMenuPrimitive.Label> & { inset?: boolean }\n>(function ContextMenuLabel({ className, inset, ...props }, ref) {\n  return (\n    <ContextMenuPrimitive.Label\n      ref={ref}\n      data-slot=\"context-menu-label\"\n      data-inset={inset || undefined}\n      className={cn(menuLabelClasses, 'data-[inset]:pl-8', className)}\n      {...props}\n    />\n  );\n});\n\nconst ContextMenuSeparator = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof ContextMenuPrimitive.Separator>\n>(function ContextMenuSeparator({ className, ...props }, ref) {\n  return (\n    <ContextMenuPrimitive.Separator\n      ref={ref}\n      data-slot=\"context-menu-separator\"\n      className={cn('-mx-1 my-1 h-px bg-border', className)}\n      {...props}\n    />\n  );\n});\n\nconst ContextMenuShortcut = React.forwardRef<HTMLSpanElement, React.ComponentProps<'span'>>(\n  function ContextMenuShortcut({ className, ...props }, ref) {\n    return (\n      <span\n        ref={ref}\n        data-slot=\"context-menu-shortcut\"\n        className={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)}\n        {...props}\n      />\n    );\n  },\n);\n\nfunction ContextMenuSub(props: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {\n  return <ContextMenuPrimitive.Sub data-slot=\"context-menu-sub\" {...props} />;\n}\n\nconst ContextMenuSubTrigger = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & { inset?: boolean }\n>(function ContextMenuSubTrigger({ className, inset, children, ...props }, ref) {\n  return (\n    <ContextMenuPrimitive.SubTrigger\n      ref={ref}\n      data-slot=\"context-menu-sub-trigger\"\n      data-inset={inset || undefined}\n      className={cn(itemClasses, 'data-[state=open]:bg-secondary', className)}\n      {...props}\n    >\n      {children}\n      <ChevronRight className=\"ml-auto size-4\" aria-hidden />\n    </ContextMenuPrimitive.SubTrigger>\n  );\n});\n\nconst ContextMenuSubContent = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof ContextMenuPrimitive.SubContent>\n>(function ContextMenuSubContent({ className, ...props }, ref) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.SubContent\n        ref={ref}\n        data-slot=\"context-menu-sub-content\"\n        className={cn(\n          surfaceClasses,\n          'min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden p-1',\n          className,\n        )}\n        {...props}\n      />\n    </ContextMenuPrimitive.Portal>\n  );\n});\n\nexport {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuGroup,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n};\n"],"mappings":"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"}

package/dist/components/conversation.d.ts

@@ -10,5 +10,5 @@ export interface ConversationProps extends React.ComponentProps<'div'> {
  * streams, unless the reader has scrolled up; then a "Jump to latest" button
  * appears instead of yanking them back down.
  */
-declare function Conversation({ children, empty, label, className, ...props }: ConversationProps): React.JSX.Element;
+declare const Conversation: React.ForwardRefExoticComponent<Omit<ConversationProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { Conversation };

package/dist/components/conversation.js

@@ -1,4 +1,5 @@
-import { cn } from "../lib/utils.js";
+"use client";
+import { cn, focusRingClasses } from "../lib/utils.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import ArrowDown from "@burtson-labs/icons/react/arrow-down";
@@ -8,7 +9,7 @@ import ArrowDown from "@burtson-labs/icons/react/arrow-down";
 * streams, unless the reader has scrolled up; then a "Jump to latest" button
 * appears instead of yanking them back down.
 */
-function Conversation({ children, empty, label = "Conversation", className, ...props }) {
+var Conversation = React.forwardRef(function Conversation({ children, empty, label = "Conversation", className, ...props }, ref) {
 	const scroller = React.useRef(null);
 	const content = React.useRef(null);
 	const pinned = React.useRef(true);
@@ -43,6 +44,7 @@ function Conversation({ children, empty, label = "Conversation", className, ...p
 		setAtBottom(bottom);
 	};
 	return /* @__PURE__ */ jsxs("div", {
+		ref,
 		"data-slot": "conversation",
 		className: cn("relative min-h-0", className),
 		...props,
@@ -54,7 +56,7 @@ function Conversation({ children, empty, label = "Conversation", className, ...p
 			"aria-relevant": "additions text",
 			tabIndex: 0,
 			onScroll,
-			className: "size-full overflow-y-auto outline-none focus-visible:ring-[3px] focus-visible:ring-ring/20",
+			className: cn("size-full overflow-y-auto", focusRingClasses, "focus-visible:outline-offset-[-2px]"),
 			children: /* @__PURE__ */ jsx("div", {
 				ref: content,
 				className: "grid gap-5 p-4",
@@ -67,11 +69,11 @@ function Conversation({ children, empty, label = "Conversation", className, ...p
 				setAtBottom(true);
 				scrollToBottom(typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth");
 			},
-			className: "absolute bottom-3 left-1/2 inline-flex -translate-x-1/2 animate-in items-center gap-1.5 rounded-full border border-border-strong bg-surface-raised px-3 py-1.5 text-xs font-semibold shadow-md outline-none hover:bg-muted focus-visible:ring-[3px] focus-visible:ring-ring/20 [&_svg]:size-3.5",
+			className: cn("absolute bottom-3 left-1/2 inline-flex -translate-x-1/2 animate-in items-center gap-1.5 rounded-full border border-border-strong bg-surface-raised px-3 py-1.5 text-xs font-semibold shadow-md hover:bg-muted [&_svg]:size-3.5 pointer-coarse:min-h-11", "outline-none focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"),
 			children: [/* @__PURE__ */ jsx(ArrowDown, { "aria-hidden": true }), " Jump to latest"]
 		})]
 	});
-}
+});
 //#endregion
 export { Conversation };
 

package/dist/components/conversation.js.map

@@ -1 +1 @@
-{"version":3,"file":"conversation.js","names":[],"sources":["../../src/components/conversation.tsx"],"sourcesContent":["import ArrowDown from '@burtson-labs/icons/react/arrow-down';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nexport interface ConversationProps extends React.ComponentProps<'div'> {\n  /** Shown instead of the messages when there are none. */\n  empty?: React.ReactNode;\n  /** Accessible name for the message log. */\n  label?: string;\n}\n\n/**\n * A scrolling message log that stays pinned to the newest message while it\n * streams, unless the reader has scrolled up; then a \"Jump to latest\" button\n * appears instead of yanking them back down.\n */\nfunction Conversation({\n  children,\n  empty,\n  label = 'Conversation',\n  className,\n  ...props\n}: ConversationProps) {\n  const scroller = React.useRef<HTMLDivElement>(null);\n  const content = React.useRef<HTMLDivElement>(null);\n  const pinned = React.useRef(true);\n  const [atBottom, setAtBottom] = React.useState(true);\n  const hasMessages = React.Children.toArray(children).length > 0;\n\n  const scrollToBottom = React.useCallback((behavior: ScrollBehavior = 'auto') => {\n    const el = scroller.current;\n    if (!el) return;\n    if (typeof el.scrollTo === 'function') el.scrollTo({ top: el.scrollHeight, behavior });\n    else el.scrollTop = el.scrollHeight;\n  }, []);\n\n  React.useEffect(() => {\n    const el = content.current;\n    if (!el || typeof ResizeObserver === 'undefined') return;\n    // Content grows while a reply streams; follow it only if pinned.\n    const ro = new ResizeObserver(() => {\n      if (pinned.current) scrollToBottom();\n    });\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, [scrollToBottom]);\n\n  React.useEffect(() => {\n    if (pinned.current) scrollToBottom();\n  }, [children, scrollToBottom]);\n\n  const onScroll = () => {\n    const el = scroller.current;\n    if (!el) return;\n    const bottom = el.scrollHeight - el.scrollTop - el.clientHeight < 32;\n    pinned.current = bottom;\n    setAtBottom(bottom);\n  };\n\n  return (\n    <div data-slot=\"conversation\" className={cn('relative min-h-0', className)} {...props}>\n      <div\n        ref={scroller}\n        role=\"log\"\n        aria-label={label}\n        aria-live=\"polite\"\n        aria-relevant=\"additions text\"\n        // A scrollable region must be reachable by keyboard (WCAG 2.1.1).\n        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n        tabIndex={0}\n        onScroll={onScroll}\n        className=\"size-full overflow-y-auto outline-none focus-visible:ring-[3px] focus-visible:ring-ring/20\"\n      >\n        <div ref={content} className=\"grid gap-5 p-4\">\n          {hasMessages ? children : empty}\n        </div>\n      </div>\n      {!atBottom && (\n        <button\n          type=\"button\"\n          onClick={() => {\n            pinned.current = true;\n            setAtBottom(true);\n            scrollToBottom(\n              typeof matchMedia === 'function' &&\n                matchMedia('(prefers-reduced-motion: reduce)').matches\n                ? 'auto'\n                : 'smooth',\n            );\n          }}\n          className=\"absolute bottom-3 left-1/2 inline-flex -translate-x-1/2 animate-in items-center gap-1.5 rounded-full border border-border-strong bg-surface-raised px-3 py-1.5 text-xs font-semibold shadow-md outline-none hover:bg-muted focus-visible:ring-[3px] focus-visible:ring-ring/20 [&_svg]:size-3.5\"\n        >\n          <ArrowDown aria-hidden /> Jump to latest\n        </button>\n      )}\n    </div>\n  );\n}\n\nexport { Conversation };\n"],"mappings":";;;;;;;;;;AAiBA,SAAS,aAAa,EACpB,UACA,OACA,QAAQ,gBACR,WACA,GAAG,SACiB;CACpB,MAAM,WAAW,MAAM,OAAuB,IAAI;CAClD,MAAM,UAAU,MAAM,OAAuB,IAAI;CACjD,MAAM,SAAS,MAAM,OAAO,IAAI;CAChC,MAAM,CAAC,UAAU,eAAe,MAAM,SAAS,IAAI;CACnD,MAAM,cAAc,MAAM,SAAS,QAAQ,QAAQ,CAAC,CAAC,SAAS;CAE9D,MAAM,iBAAiB,MAAM,aAAa,WAA2B,WAAW;EAC9E,MAAM,KAAK,SAAS;EACpB,IAAI,CAAC,IAAI;EACT,IAAI,OAAO,GAAG,aAAa,YAAY,GAAG,SAAS;GAAE,KAAK,GAAG;GAAc;EAAS,CAAC;OAChF,GAAG,YAAY,GAAG;CACzB,GAAG,CAAC,CAAC;CAEL,MAAM,gBAAgB;EACpB,MAAM,KAAK,QAAQ;EACnB,IAAI,CAAC,MAAM,OAAO,mBAAmB,aAAa;EAElD,MAAM,KAAK,IAAI,qBAAqB;GAClC,IAAI,OAAO,SAAS,eAAe;EACrC,CAAC;EACD,GAAG,QAAQ,EAAE;EACb,aAAa,GAAG,WAAW;CAC7B,GAAG,CAAC,cAAc,CAAC;CAEnB,MAAM,gBAAgB;EACpB,IAAI,OAAO,SAAS,eAAe;CACrC,GAAG,CAAC,UAAU,cAAc,CAAC;CAE7B,MAAM,iBAAiB;EACrB,MAAM,KAAK,SAAS;EACpB,IAAI,CAAC,IAAI;EACT,MAAM,SAAS,GAAG,eAAe,GAAG,YAAY,GAAG,eAAe;EAClE,OAAO,UAAU;EACjB,YAAY,MAAM;CACpB;CAEA,OACE,qBAAC,OAAD;EAAK,aAAU;EAAe,WAAW,GAAG,oBAAoB,SAAS;EAAG,GAAI;EAAhF,UAAA,CACE,oBAAC,OAAD;GACE,KAAK;GACL,MAAK;GACL,cAAY;GACZ,aAAU;GACV,iBAAc;GAGd,UAAU;GACA;GACV,WAAU;GAEV,UAAA,oBAAC,OAAD;IAAK,KAAK;IAAS,WAAU;IAC1B,UAAA,cAAc,WAAW;GACvB,CAAA;EACF,CAAA,GACJ,CAAC,YACA,qBAAC,UAAD;GACE,MAAK;GACL,eAAe;IACb,OAAO,UAAU;IACjB,YAAY,IAAI;IAChB,eACE,OAAO,eAAe,cACpB,WAAW,kCAAkC,CAAC,CAAC,UAC7C,SACA,QACN;GACF;GACA,WAAU;GAZZ,UAAA,CAcE,oBAAC,WAAD,EAAW,eAAA,KAAa,CAAA,GAAC,iBACnB;EAEP,CAAA,CAAA;;AAET"}
+{"version":3,"file":"conversation.js","names":[],"sources":["../../src/components/conversation.tsx"],"sourcesContent":["import ArrowDown from '@burtson-labs/icons/react/arrow-down';\nimport * as React from 'react';\n\nimport { cn, focusRingClasses } from '../lib/utils';\n\nexport interface ConversationProps extends React.ComponentProps<'div'> {\n  /** Shown instead of the messages when there are none. */\n  empty?: React.ReactNode;\n  /** Accessible name for the message log. */\n  label?: string;\n}\n\n/**\n * A scrolling message log that stays pinned to the newest message while it\n * streams, unless the reader has scrolled up; then a \"Jump to latest\" button\n * appears instead of yanking them back down.\n */\nconst Conversation = React.forwardRef<HTMLDivElement, ConversationProps>(function Conversation(\n  { children, empty, label = 'Conversation', className, ...props },\n  ref,\n) {\n  const scroller = React.useRef<HTMLDivElement>(null);\n  const content = React.useRef<HTMLDivElement>(null);\n  const pinned = React.useRef(true);\n  const [atBottom, setAtBottom] = React.useState(true);\n  const hasMessages = React.Children.toArray(children).length > 0;\n\n  const scrollToBottom = React.useCallback((behavior: ScrollBehavior = 'auto') => {\n    const el = scroller.current;\n    if (!el) return;\n    if (typeof el.scrollTo === 'function') el.scrollTo({ top: el.scrollHeight, behavior });\n    else el.scrollTop = el.scrollHeight;\n  }, []);\n\n  React.useEffect(() => {\n    const el = content.current;\n    if (!el || typeof ResizeObserver === 'undefined') return;\n    // Content grows while a reply streams; follow it only if pinned.\n    const ro = new ResizeObserver(() => {\n      if (pinned.current) scrollToBottom();\n    });\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, [scrollToBottom]);\n\n  React.useEffect(() => {\n    if (pinned.current) scrollToBottom();\n  }, [children, scrollToBottom]);\n\n  const onScroll = () => {\n    const el = scroller.current;\n    if (!el) return;\n    const bottom = el.scrollHeight - el.scrollTop - el.clientHeight < 32;\n    pinned.current = bottom;\n    setAtBottom(bottom);\n  };\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"conversation\"\n      className={cn('relative min-h-0', className)}\n      {...props}\n    >\n      <div\n        ref={scroller}\n        role=\"log\"\n        aria-label={label}\n        aria-live=\"polite\"\n        aria-relevant=\"additions text\"\n        // A scrollable region must be reachable by keyboard (WCAG 2.1.1).\n        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n        tabIndex={0}\n        onScroll={onScroll}\n        className={cn(\n          'size-full overflow-y-auto',\n          focusRingClasses,\n          'focus-visible:outline-offset-[-2px]',\n        )}\n      >\n        <div ref={content} className=\"grid gap-5 p-4\">\n          {hasMessages ? children : empty}\n        </div>\n      </div>\n      {!atBottom && (\n        <button\n          type=\"button\"\n          onClick={() => {\n            pinned.current = true;\n            setAtBottom(true);\n            scrollToBottom(\n              typeof matchMedia === 'function' &&\n                matchMedia('(prefers-reduced-motion: reduce)').matches\n                ? 'auto'\n                : 'smooth',\n            );\n          }}\n          className={cn(\n            'absolute bottom-3 left-1/2 inline-flex -translate-x-1/2 animate-in items-center gap-1.5 rounded-full border border-border-strong bg-surface-raised px-3 py-1.5 text-xs font-semibold shadow-md hover:bg-muted [&_svg]:size-3.5 pointer-coarse:min-h-11',\n            focusRingClasses,\n          )}\n        >\n          <ArrowDown aria-hidden /> Jump to latest\n        </button>\n      )}\n    </div>\n  );\n});\n\nexport { Conversation };\n"],"mappings":";;;;;;;;;;;AAiBA,IAAM,eAAe,MAAM,WAA8C,SAAS,aAChF,EAAE,UAAU,OAAO,QAAQ,gBAAgB,WAAW,GAAG,SACzD,KACA;CACA,MAAM,WAAW,MAAM,OAAuB,IAAI;CAClD,MAAM,UAAU,MAAM,OAAuB,IAAI;CACjD,MAAM,SAAS,MAAM,OAAO,IAAI;CAChC,MAAM,CAAC,UAAU,eAAe,MAAM,SAAS,IAAI;CACnD,MAAM,cAAc,MAAM,SAAS,QAAQ,QAAQ,CAAC,CAAC,SAAS;CAE9D,MAAM,iBAAiB,MAAM,aAAa,WAA2B,WAAW;EAC9E,MAAM,KAAK,SAAS;EACpB,IAAI,CAAC,IAAI;EACT,IAAI,OAAO,GAAG,aAAa,YAAY,GAAG,SAAS;GAAE,KAAK,GAAG;GAAc;EAAS,CAAC;OAChF,GAAG,YAAY,GAAG;CACzB,GAAG,CAAC,CAAC;CAEL,MAAM,gBAAgB;EACpB,MAAM,KAAK,QAAQ;EACnB,IAAI,CAAC,MAAM,OAAO,mBAAmB,aAAa;EAElD,MAAM,KAAK,IAAI,qBAAqB;GAClC,IAAI,OAAO,SAAS,eAAe;EACrC,CAAC;EACD,GAAG,QAAQ,EAAE;EACb,aAAa,GAAG,WAAW;CAC7B,GAAG,CAAC,cAAc,CAAC;CAEnB,MAAM,gBAAgB;EACpB,IAAI,OAAO,SAAS,eAAe;CACrC,GAAG,CAAC,UAAU,cAAc,CAAC;CAE7B,MAAM,iBAAiB;EACrB,MAAM,KAAK,SAAS;EACpB,IAAI,CAAC,IAAI;EACT,MAAM,SAAS,GAAG,eAAe,GAAG,YAAY,GAAG,eAAe;EAClE,OAAO,UAAU;EACjB,YAAY,MAAM;CACpB;CAEA,OACE,qBAAC,OAAD;EACO;EACL,aAAU;EACV,WAAW,GAAG,oBAAoB,SAAS;EAC3C,GAAI;EAJN,UAAA,CAME,oBAAC,OAAD;GACE,KAAK;GACL,MAAK;GACL,cAAY;GACZ,aAAU;GACV,iBAAc;GAGd,UAAU;GACA;GACV,WAAW,GACT,6BACA,kBACA,qCACF;GAEA,UAAA,oBAAC,OAAD;IAAK,KAAK;IAAS,WAAU;IAC1B,UAAA,cAAc,WAAW;GACvB,CAAA;EACF,CAAA,GACJ,CAAC,YACA,qBAAC,UAAD;GACE,MAAK;GACL,eAAe;IACb,OAAO,UAAU;IACjB,YAAY,IAAI;IAChB,eACE,OAAO,eAAe,cACpB,WAAW,kCAAkC,CAAC,CAAC,UAC7C,SACA,QACN;GACF;GACA,WAAW,GACT,0PAAA,4HAEF;GAfF,UAAA,CAiBE,oBAAC,WAAD,EAAW,eAAA,KAAa,CAAA,GAAC,iBACnB;EAEP,CAAA,CAAA;;AAET,CAAC"}

package/dist/components/copy-button.d.ts

@@ -13,5 +13,5 @@ export interface CopyButtonProps extends Omit<IconButtonProps, 'label' | 'childr
  * browser blocks the clipboard it raises a toast (needs a mounted Toaster)
  * asking the person to copy by hand.
  */
-declare function CopyButton({ value, label, variant, size, onCopySuccess, onCopyError, ...props }: CopyButtonProps): React.JSX.Element;
+declare const CopyButton: React.ForwardRefExoticComponent<Omit<CopyButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export { CopyButton };

package/dist/components/copy-button.js

@@ -1,3 +1,4 @@
+"use client";
 import { IconButton } from "./icon-button.js";
 import { toast } from "./toaster.js";
 import * as React from "react";
@@ -10,7 +11,7 @@ import Copy from "@burtson-labs/icons/react/copy";
 * browser blocks the clipboard it raises a toast (needs a mounted Toaster)
 * asking the person to copy by hand.
 */
-function CopyButton({ value, label = "Copy", variant = "ghost", size = "icon-sm", onCopySuccess, onCopyError, ...props }) {
+var CopyButton = React.forwardRef(function CopyButton({ value, label = "Copy", variant = "ghost", size = "icon-sm", onCopySuccess, onCopyError, ...props }, ref) {
 	const [message, setMessage] = React.useState("");
 	const [copied, setCopied] = React.useState(false);
 	const timer = React.useRef(void 0);
@@ -34,6 +35,7 @@ function CopyButton({ value, label = "Copy", variant = "ghost", size = "icon-sm"
 		}
 	};
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(IconButton, {
+		ref,
 		"data-slot": "copy-button",
 		label: copied ? "Copied" : label,
 		variant,
@@ -49,7 +51,7 @@ function CopyButton({ value, label = "Copy", variant = "ghost", size = "icon-sm"
 		className: "sr-only",
 		children: message
 	})] });
-}
+});
 //#endregion
 export { CopyButton };
 

package/dist/components/copy-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"copy-button.js","names":["_Fragment"],"sources":["../../src/components/copy-button.tsx"],"sourcesContent":["import Check from '@burtson-labs/icons/react/check';\nimport Copy from '@burtson-labs/icons/react/copy';\nimport * as React from 'react';\n\nimport { IconButton, type IconButtonProps } from './icon-button';\nimport { toast } from './toaster';\n\nexport interface CopyButtonProps extends Omit<IconButtonProps, 'label' | 'children' | 'onClick'> {\n  /** The text to put on the clipboard. */\n  value: string;\n  /** Accessible name, e.g. \"Copy API key\". */\n  label?: string;\n  onCopySuccess?: () => void;\n  onCopyError?: (error: unknown) => void;\n}\n\n/**\n * Icon button that copies `value` and shows a check for a moment. When the\n * browser blocks the clipboard it raises a toast (needs a mounted Toaster)\n * asking the person to copy by hand.\n */\nfunction CopyButton({\n  value,\n  label = 'Copy',\n  variant = 'ghost',\n  size = 'icon-sm',\n  onCopySuccess,\n  onCopyError,\n  ...props\n}: CopyButtonProps) {\n  const [message, setMessage] = React.useState('');\n  const [copied, setCopied] = React.useState(false);\n  const timer = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n  React.useEffect(() => () => clearTimeout(timer.current), []);\n\n  const copy = async () => {\n    try {\n      await navigator.clipboard.writeText(value);\n      setCopied(true);\n      setMessage('Copied to clipboard.');\n      onCopySuccess?.();\n      clearTimeout(timer.current);\n      timer.current = setTimeout(() => setCopied(false), 1600);\n    } catch (error) {\n      setMessage('Copy blocked. Select the text and copy it manually.');\n      onCopyError?.(error);\n      toast({\n        title: 'Copy blocked by the browser',\n        description: 'Select the text and copy it by hand.',\n        variant: 'destructive',\n      });\n    }\n  };\n\n  return (\n    <>\n      <IconButton\n        data-slot=\"copy-button\"\n        label={copied ? 'Copied' : label}\n        variant={variant}\n        size={size}\n        onClick={() => void copy()}\n        {...props}\n      >\n        {copied ? <Check aria-hidden className=\"text-success\" /> : <Copy aria-hidden />}\n      </IconButton>\n      <span role=\"status\" className=\"sr-only\">\n        {message}\n      </span>\n    </>\n  );\n}\n\nexport { CopyButton };\n"],"mappings":";;;;;;;;;;;;AAqBA,SAAS,WAAW,EAClB,OACA,QAAQ,QACR,UAAU,SACV,OAAO,WACP,eACA,aACA,GAAG,SACe;CAClB,MAAM,CAAC,SAAS,cAAc,MAAM,SAAS,EAAE;CAC/C,MAAM,CAAC,QAAQ,aAAa,MAAM,SAAS,KAAK;CAChD,MAAM,QAAQ,MAAM,OAAkD,KAAA,CAAS;CAC/E,MAAM,sBAAsB,aAAa,MAAM,OAAO,GAAG,CAAC,CAAC;CAE3D,MAAM,OAAO,YAAY;EACvB,IAAI;GACF,MAAM,UAAU,UAAU,UAAU,KAAK;GACzC,UAAU,IAAI;GACd,WAAW,sBAAsB;GACjC,gBAAgB;GAChB,aAAa,MAAM,OAAO;GAC1B,MAAM,UAAU,iBAAiB,UAAU,KAAK,GAAG,IAAI;EACzD,SAAS,OAAO;GACd,WAAW,qDAAqD;GAChE,cAAc,KAAK;GACnB,MAAM;IACJ,OAAO;IACP,aAAa;IACb,SAAS;GACX,CAAC;EACH;CACF;CAEA,OACE,qBAAAA,UAAA,EAAA,UAAA,CACE,oBAAC,YAAD;EACE,aAAU;EACV,OAAO,SAAS,WAAW;EAClB;EACH;EACN,eAAe,KAAK,KAAK;EACzB,GAAI;EAEH,UAAA,SAAS,oBAAC,OAAD;GAAO,eAAA;GAAY,WAAU;EAAgB,CAAA,IAAI,oBAAC,MAAD,EAAM,eAAA,KAAa,CAAA;CACpE,CAAA,GACZ,oBAAC,QAAD;EAAM,MAAK;EAAS,WAAU;EAC3B,UAAA;CACG,CAAA,CACN,EAAA,CAAA;AAEN"}
+{"version":3,"file":"copy-button.js","names":["_Fragment"],"sources":["../../src/components/copy-button.tsx"],"sourcesContent":["import Check from '@burtson-labs/icons/react/check';\nimport Copy from '@burtson-labs/icons/react/copy';\nimport * as React from 'react';\n\nimport { IconButton, type IconButtonProps } from './icon-button';\nimport { toast } from './toaster';\n\nexport interface CopyButtonProps extends Omit<IconButtonProps, 'label' | 'children' | 'onClick'> {\n  /** The text to put on the clipboard. */\n  value: string;\n  /** Accessible name, e.g. \"Copy API key\". */\n  label?: string;\n  onCopySuccess?: () => void;\n  onCopyError?: (error: unknown) => void;\n}\n\n/**\n * Icon button that copies `value` and shows a check for a moment. When the\n * browser blocks the clipboard it raises a toast (needs a mounted Toaster)\n * asking the person to copy by hand.\n */\nconst CopyButton = React.forwardRef<HTMLButtonElement, CopyButtonProps>(function CopyButton(\n  {\n    value,\n    label = 'Copy',\n    variant = 'ghost',\n    size = 'icon-sm',\n    onCopySuccess,\n    onCopyError,\n    ...props\n  },\n  ref,\n) {\n  const [message, setMessage] = React.useState('');\n  const [copied, setCopied] = React.useState(false);\n  const timer = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n  React.useEffect(() => () => clearTimeout(timer.current), []);\n\n  const copy = async () => {\n    try {\n      await navigator.clipboard.writeText(value);\n      setCopied(true);\n      setMessage('Copied to clipboard.');\n      onCopySuccess?.();\n      clearTimeout(timer.current);\n      timer.current = setTimeout(() => setCopied(false), 1600);\n    } catch (error) {\n      setMessage('Copy blocked. Select the text and copy it manually.');\n      onCopyError?.(error);\n      toast({\n        title: 'Copy blocked by the browser',\n        description: 'Select the text and copy it by hand.',\n        variant: 'destructive',\n      });\n    }\n  };\n\n  return (\n    <>\n      <IconButton\n        ref={ref}\n        data-slot=\"copy-button\"\n        label={copied ? 'Copied' : label}\n        variant={variant}\n        size={size}\n        onClick={() => void copy()}\n        {...props}\n      >\n        {copied ? <Check aria-hidden className=\"text-success\" /> : <Copy aria-hidden />}\n      </IconButton>\n      <span role=\"status\" className=\"sr-only\">\n        {message}\n      </span>\n    </>\n  );\n});\n\nexport { CopyButton };\n"],"mappings":";;;;;;;;;;;;;AAqBA,IAAM,aAAa,MAAM,WAA+C,SAAS,WAC/E,EACE,OACA,QAAQ,QACR,UAAU,SACV,OAAO,WACP,eACA,aACA,GAAG,SAEL,KACA;CACA,MAAM,CAAC,SAAS,cAAc,MAAM,SAAS,EAAE;CAC/C,MAAM,CAAC,QAAQ,aAAa,MAAM,SAAS,KAAK;CAChD,MAAM,QAAQ,MAAM,OAAkD,KAAA,CAAS;CAC/E,MAAM,sBAAsB,aAAa,MAAM,OAAO,GAAG,CAAC,CAAC;CAE3D,MAAM,OAAO,YAAY;EACvB,IAAI;GACF,MAAM,UAAU,UAAU,UAAU,KAAK;GACzC,UAAU,IAAI;GACd,WAAW,sBAAsB;GACjC,gBAAgB;GAChB,aAAa,MAAM,OAAO;GAC1B,MAAM,UAAU,iBAAiB,UAAU,KAAK,GAAG,IAAI;EACzD,SAAS,OAAO;GACd,WAAW,qDAAqD;GAChE,cAAc,KAAK;GACnB,MAAM;IACJ,OAAO;IACP,aAAa;IACb,SAAS;GACX,CAAC;EACH;CACF;CAEA,OACE,qBAAAA,UAAA,EAAA,UAAA,CACE,oBAAC,YAAD;EACO;EACL,aAAU;EACV,OAAO,SAAS,WAAW;EAClB;EACH;EACN,eAAe,KAAK,KAAK;EACzB,GAAI;EAEH,UAAA,SAAS,oBAAC,OAAD;GAAO,eAAA;GAAY,WAAU;EAAgB,CAAA,IAAI,oBAAC,MAAD,EAAM,eAAA,KAAa,CAAA;CACpE,CAAA,GACZ,oBAAC,QAAD;EAAM,MAAK;EAAS,WAAU;EAC3B,UAAA;CACG,CAAA,CACN,EAAA,CAAA;AAEN,CAAC"}