@burtson-labs/ui 0.14.0 → 0.15.0

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

@@ -7,24 +7,25 @@ import * as ContextMenuPrimitive from '../primitives/vendor/radix/react-context-
  * 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,8 +1,8 @@
 "use client";
 import { cn } from "../lib/utils.js";
-import { menuItemClasses, surfaceClasses } from "./popover.js";
+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 "react";
+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";
@@ -19,36 +19,40 @@ function ContextMenu(props) {
 		...props
 	});
 }
-function ContextMenuTrigger(props) {
+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(Group, {
 		"data-slot": "context-menu-group",
 		...props
 	});
 }
-function ContextMenuContent({ className, ...props }) {
+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 }) {
+});
+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 }) {
+});
+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,
@@ -61,15 +65,16 @@ function ContextMenuCheckboxItem({ className, children, checked, ...props }) {
 			}) })
 		}), children]
 	});
-}
+});
 function ContextMenuRadioGroup(props) {
 	return /* @__PURE__ */ jsx(RadioGroup, {
 		"data-slot": "context-menu-radio-group",
 		...props
 	});
 }
-function ContextMenuRadioItem({ className, children, ...props }) {
+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,
@@ -78,37 +83,41 @@ function ContextMenuRadioItem({ className, children, ...props }) {
 			children: /* @__PURE__ */ jsx(ItemIndicator, { children: /* @__PURE__ */ jsx("span", { className: "block size-2 rounded-full bg-foreground" }) })
 		}), children]
 	});
-}
-function ContextMenuLabel({ className, inset, ...props }) {
+});
+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 }) {
+});
+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(Sub, {
 		"data-slot": "context-menu-sub",
 		...props
 	});
 }
-function ContextMenuSubTrigger({ className, inset, children, ...props }) {
+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),
@@ -118,14 +127,15 @@ function ContextMenuSubTrigger({ className, inset, children, ...props }) {
 			"aria-hidden": true
 		})]
 	});
-}
-function ContextMenuSubContent({ className, ...props }) {
+});
+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, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger };
 

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

@@ -1 +1 @@
-{"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, 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,5 +1,5 @@
 "use client";
-import { cn } from "../lib/utils.js";
+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";
@@ -9,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);
@@ -44,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,
@@ -55,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",
@@ -68,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

@@ -11,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);
@@ -35,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,
@@ -50,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"}

package/dist/components/data-table.d.ts

@@ -98,9 +98,14 @@ export interface DataTableProps<T> extends Omit<React.ComponentProps<'div'>, 'ch
     stickyHeader?: boolean;
     /**
      * Below this width the rows become a list of cards (see DataTableColumn
-     * `card`). `md` (768px) by default; `false` keeps the table everywhere.
+     * `card`). Cards need a column that says where it goes: with no `card`
+     * placement and no `cardsBelow`, the table stays a table (a scrolling
+     * region) at every width. Set `cardsBelow` (`md` is 768px) to get cards
+     * with the first column as the title; `false` keeps the table.
      */
     cardsBelow?: DataTableBreakpoint | false;
+    /** Keep the first column in view while the table scrolls sideways. */
+    pinFirstColumn?: boolean;
 }
 /**
  * A table recipe for records: sort, search, select, page, and row actions,
@@ -108,5 +113,5 @@ export interface DataTableProps<T> extends Omit<React.ComponentProps<'div'>, 'ch
  * come from a server; the table never reorders rows itself. On a phone the
  * rows become cards (`cardsBelow`), with the same columns.
  */
-declare function DataTable<T>({ 'aria-label': ariaLabel, columns, rows: rowsProp, getRowId, getRowLabel, sort, onSortChange, filter, onFilterChange, filterPlaceholder, selected, onSelectedChange, onRowAction, rowActions, page, pageCount, onPageChange, pageSummary, pageSize, pageSizeOptions, onPageSizeChange, totalRows, paginate, rowNoun, loading, error, onRetry, empty, toolbar, density, stickyHeader, cardsBelow, className, ...props }: DataTableProps<T>): React.JSX.Element;
+declare function DataTable<T>({ 'aria-label': ariaLabel, columns, rows: rowsProp, getRowId, getRowLabel, sort, onSortChange, filter, onFilterChange, filterPlaceholder, selected, onSelectedChange, onRowAction, rowActions, page, pageCount, onPageChange, pageSummary, pageSize, pageSizeOptions, onPageSizeChange, totalRows, paginate, rowNoun, loading, error, onRetry, empty, toolbar, density, stickyHeader, cardsBelow, pinFirstColumn, className, ...props }: DataTableProps<T>): React.JSX.Element;
 export { DataTable };

package/dist/components/data-table.js

@@ -1,7 +1,8 @@
 "use client";
-import { cn } from "../lib/utils.js";
+import { cn, focusRingClasses, noOutlineClasses } from "../lib/utils.js";
+import { useNarrowerThan } from "../lib/media.js";
 import { Button } from "./button.js";
-import { Input } from "./input.js";
+import { SearchInput } from "./input.js";
 import { Checkbox } from "./checkbox.js";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select.js";
 import { Pagination, pageWindow, paginationSummary, usePagination } from "./pagination.js";
@@ -9,38 +10,16 @@ import { Skeleton } from "./skeleton.js";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./table.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import Search from "@burtson-labs/icons/react/search";
 import ChevronsUpDown from "@burtson-labs/icons/react/chevrons-up-down";
 import ArrowUp from "@burtson-labs/icons/react/arrow-up";
 import ArrowDown from "@burtson-labs/icons/react/arrow-down";
 //#region src/components/data-table.tsx
-var BREAKPOINTS = {
-	sm: 640,
-	md: 768,
-	lg: 1024,
-	xl: 1280
-};
 var hideBelowClass = {
 	sm: "hidden sm:table-cell",
 	md: "hidden md:table-cell",
 	lg: "hidden lg:table-cell",
 	xl: "hidden xl:table-cell"
 };
-var subscribeNone = () => () => void 0;
-/**
-* True while the viewport is narrower than `bp`. Without matchMedia (server
-* render, tests) it is false, so the table is the fallback.
-*/
-function useNarrowerThan(bp) {
-	const query = bp ? `(max-width: ${BREAKPOINTS[bp] - .02}px)` : null;
-	const subscribe = React.useCallback((onChange) => {
-		if (!query || typeof matchMedia !== "function") return () => void 0;
-		const mq = matchMedia(query);
-		mq.addEventListener?.("change", onChange);
-		return () => mq.removeEventListener?.("change", onChange);
-	}, [query]);
-	return React.useSyncExternalStore(query ? subscribe : subscribeNone, () => Boolean(query && typeof matchMedia === "function" && matchMedia(query).matches), () => false);
-}
 var textOf = (node) => typeof node === "string" || typeof node === "number" ? String(node) : void 0;
 var nextSort = (current, id) => {
 	if (!current || current.columnId !== id) return {
@@ -59,7 +38,7 @@ var INTERACTIVE = "a,button,input,select,textarea,[role=\"checkbox\"],[role=\"me
 * come from a server; the table never reorders rows itself. On a phone the
 * rows become cards (`cardsBelow`), with the same columns.
 */
-function DataTable({ "aria-label": ariaLabel, columns, rows: rowsProp, getRowId, getRowLabel, sort, onSortChange, filter, onFilterChange, filterPlaceholder = "Search", selected, onSelectedChange, onRowAction, rowActions, page, pageCount, onPageChange, pageSummary, pageSize, pageSizeOptions, onPageSizeChange, totalRows, paginate, rowNoun, loading = false, error, onRetry, empty = "No results.", toolbar, density = "default", stickyHeader, cardsBelow = "md", className, ...props }) {
+function DataTable({ "aria-label": ariaLabel, columns, rows: rowsProp, getRowId, getRowLabel, sort, onSortChange, filter, onFilterChange, filterPlaceholder = "Search", selected, onSelectedChange, onRowAction, rowActions, page, pageCount, onPageChange, pageSummary, pageSize, pageSizeOptions, onPageSizeChange, totalRows, paginate, rowNoun, loading = false, error, onRetry, empty = "No results.", toolbar, density = "default", stickyHeader, cardsBelow, pinFirstColumn, className, ...props }) {
 	const paginateOptions = paginate === true ? {} : paginate || void 0;
 	const paging = usePagination(rowsProp, {
 		defaultPageSize: paginateOptions?.pageSize,
@@ -68,7 +47,8 @@ function DataTable({ "aria-label": ariaLabel, columns, rows: rowsProp, getRowId,
 		resetKey: `${filter ?? ""}\u0000${sort?.columnId ?? ""}\u0000${sort?.direction ?? ""}`
 	});
 	const rows = paginateOptions ? paging.rows : rowsProp;
-	const cards = useNarrowerThan(cardsBelow);
+	const placed = columns.some((c) => c.card !== void 0);
+	const cards = useNarrowerThan(cardsBelow ?? (placed ? "md" : false));
 	const uid = React.useId();
 	const selectable = Boolean(onSelectedChange);
 	const selectedSet = React.useMemo(() => new Set(selected ?? []), [selected]);
@@ -196,19 +176,12 @@ function DataTable({ "aria-label": ariaLabel, columns, rows: rowsProp, getRowId,
 	const toolbarNode = showToolbar && /* @__PURE__ */ jsxs("div", {
 		className: "flex flex-wrap items-center gap-2",
 		children: [
-			onFilterChange && /* @__PURE__ */ jsxs("div", {
-				className: "relative min-w-0 basis-full sm:max-w-xs sm:flex-1 sm:basis-0",
-				children: [/* @__PURE__ */ jsx(Search, {
-					className: "pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2 text-muted-foreground",
-					"aria-hidden": true
-				}), /* @__PURE__ */ jsx(Input, {
-					type: "search",
-					value: filter ?? "",
-					onChange: (e) => onFilterChange(e.target.value),
-					placeholder: filterPlaceholder,
-					"aria-label": `Search ${ariaLabel.toLowerCase()}`,
-					className: "pl-8"
-				})]
+			onFilterChange && /* @__PURE__ */ jsx(SearchInput, {
+				value: filter ?? "",
+				onChange: (e) => onFilterChange(e.target.value),
+				placeholder: filterPlaceholder,
+				"aria-label": `Search ${ariaLabel.toLowerCase()}`,
+				containerClassName: "min-w-0 basis-full sm:max-w-xs sm:flex-1 sm:basis-0"
 			}),
 			cardSelectAll,
 			selectable && /* @__PURE__ */ jsx("span", {
@@ -225,7 +198,7 @@ function DataTable({ "aria-label": ariaLabel, columns, rows: rowsProp, getRowId,
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "data-table",
 		"data-layout": cards ? "cards" : "table",
-		className: cn("grid min-w-0 grid-cols-[minmax(0,1fr)] gap-3", className),
+		className: cn("grid w-full min-w-0 grid-cols-[minmax(0,1fr)] gap-3", className),
 		...props,
 		children: [
 			toolbarNode,
@@ -252,6 +225,7 @@ function DataTable({ "aria-label": ariaLabel, columns, rows: rowsProp, getRowId,
 					"aria-busy": loading || void 0,
 					density,
 					stickyHeader,
+					pinFirstColumn,
 					className: cn(loading && rows.length > 0 && "opacity-60 transition-opacity"),
 					children: [/* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, {
 						className: "hover:bg-transparent",
@@ -274,7 +248,7 @@ function DataTable({ "aria-label": ariaLabel, columns, rows: rowsProp, getRowId,
 									children: col.sortable && onSortChange ? /* @__PURE__ */ jsxs("button", {
 										type: "button",
 										onClick: () => onSortChange(nextSort(sort, col.id)),
-										className: cn("-mx-1.5 inline-flex h-7 items-center gap-1 rounded-sm px-1.5 uppercase outline-none hover:bg-muted hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/20", sorted && "text-foreground", col.numeric && "flex-row-reverse"),
+										className: cn("-mx-1.5 inline-flex h-7 items-center gap-1 rounded-sm px-1.5 uppercase hover:bg-muted hover:text-foreground", focusRingClasses, "focus-visible:outline-offset-[-2px]", sorted && "text-foreground", col.numeric && "flex-row-reverse"),
 										children: [col.header, sorted === "asc" ? /* @__PURE__ */ jsx(ArrowUp, {
 											className: "size-3.5",
 											"aria-hidden": true
@@ -450,7 +424,7 @@ function DataTableCards({ "aria-label": ariaLabel, columns, rows, getRowId, getR
 										type: "button",
 										"data-row-action": "",
 										onClick: () => onRowAction(row),
-										className: "text-left outline-hidden! after:absolute after:inset-0 after:rounded-lg",
+										className: cn("text-left after:absolute after:inset-0 after:rounded-lg", noOutlineClasses),
 										children: show(c, row)
 									}) : show(c, row)
 								}, c.id))