@burtson-labs/ui 0.14.0 → 0.14.1

package/dist/components/dropdown-menu.js

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../lib/utils.js";
 import { CheckboxItem, Content, Group, Item, ItemIndicator, Label, Portal, RadioGroup, RadioItem, Root, Separator, Sub, SubContent, SubTrigger, Trigger } from "../primitives/vendor/radix/react-dropdown-menu/dropdown-menu.js";
-import { menuItemClasses, surfaceClasses } from "./popover.js";
-import "react";
+import { menuItemClasses, menuLabelClasses, surfaceClasses } from "./popover.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";
@@ -13,37 +13,41 @@ function DropdownMenu(props) {
 		...props
 	});
 }
-function DropdownMenuTrigger(props) {
+var DropdownMenuTrigger = React.forwardRef(function DropdownMenuTrigger(props, ref) {
 	return /* @__PURE__ */ jsx(Trigger, {
+		ref,
 		"data-slot": "dropdown-menu-trigger",
 		...props
 	});
-}
+});
 function DropdownMenuGroup(props) {
 	return /* @__PURE__ */ jsx(Group, {
 		"data-slot": "dropdown-menu-group",
 		...props
 	});
 }
-function DropdownMenuContent({ className, sideOffset = 4, ...props }) {
+var DropdownMenuContent = React.forwardRef(function DropdownMenuContent({ className, sideOffset = 4, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Content, {
+		ref,
 		"data-slot": "dropdown-menu-content",
 		sideOffset,
 		className: cn(surfaceClasses, "max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto p-1", className),
 		...props
 	}) });
-}
-function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
+});
+var DropdownMenuItem = React.forwardRef(function DropdownMenuItem({ className, inset, variant = "default", ...props }, ref) {
 	return /* @__PURE__ */ jsx(Item, {
+		ref,
 		"data-slot": "dropdown-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 DropdownMenuCheckboxItem({ className, children, checked, ...props }) {
+});
+var DropdownMenuCheckboxItem = React.forwardRef(function DropdownMenuCheckboxItem({ className, children, checked, ...props }, ref) {
 	return /* @__PURE__ */ jsxs(CheckboxItem, {
+		ref,
 		"data-slot": "dropdown-menu-checkbox-item",
 		className: cn(menuItemClasses, "pl-8", className),
 		checked,
@@ -56,15 +60,16 @@ function DropdownMenuCheckboxItem({ className, children, checked, ...props }) {
 			}) })
 		}), children]
 	});
-}
+});
 function DropdownMenuRadioGroup(props) {
 	return /* @__PURE__ */ jsx(RadioGroup, {
 		"data-slot": "dropdown-menu-radio-group",
 		...props
 	});
 }
-function DropdownMenuRadioItem({ className, children, ...props }) {
+var DropdownMenuRadioItem = React.forwardRef(function DropdownMenuRadioItem({ className, children, ...props }, ref) {
 	return /* @__PURE__ */ jsxs(RadioItem, {
+		ref,
 		"data-slot": "dropdown-menu-radio-item",
 		className: cn(menuItemClasses, "pl-8", className),
 		...props,
@@ -73,37 +78,41 @@ function DropdownMenuRadioItem({ className, children, ...props }) {
 			children: /* @__PURE__ */ jsx(ItemIndicator, { children: /* @__PURE__ */ jsx("span", { className: "block size-2 rounded-full bg-foreground" }) })
 		}), children]
 	});
-}
-function DropdownMenuLabel({ className, inset, ...props }) {
+});
+var DropdownMenuLabel = React.forwardRef(function DropdownMenuLabel({ className, inset, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Label, {
+		ref,
 		"data-slot": "dropdown-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 DropdownMenuSeparator({ className, ...props }) {
+});
+var DropdownMenuSeparator = React.forwardRef(function DropdownMenuSeparator({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Separator, {
+		ref,
 		"data-slot": "dropdown-menu-separator",
 		className: cn("-mx-1 my-1 h-px bg-border", className),
 		...props
 	});
-}
-function DropdownMenuShortcut({ className, ...props }) {
+});
+var DropdownMenuShortcut = React.forwardRef(function DropdownMenuShortcut({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("span", {
+		ref,
 		"data-slot": "dropdown-menu-shortcut",
 		className: cn("ml-auto text-xs tracking-widest text-muted-foreground", className),
 		...props
 	});
-}
+});
 function DropdownMenuSub(props) {
 	return /* @__PURE__ */ jsx(Sub, {
 		"data-slot": "dropdown-menu-sub",
 		...props
 	});
 }
-function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
+var DropdownMenuSubTrigger = React.forwardRef(function DropdownMenuSubTrigger({ className, inset, children, ...props }, ref) {
 	return /* @__PURE__ */ jsxs(SubTrigger, {
+		ref,
 		"data-slot": "dropdown-menu-sub-trigger",
 		"data-inset": inset || void 0,
 		className: cn(menuItemClasses, "data-[state=open]:bg-secondary", className),
@@ -113,14 +122,15 @@ function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
 			"aria-hidden": true
 		})]
 	});
-}
-function DropdownMenuSubContent({ className, ...props }) {
+});
+var DropdownMenuSubContent = React.forwardRef(function DropdownMenuSubContent({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(SubContent, {
+		ref,
 		"data-slot": "dropdown-menu-sub-content",
 		className: cn(surfaceClasses, "min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden p-1", className),
 		...props
 	}) });
-}
+});
 //#endregion
 export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger };
 

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown-menu.js","names":["DropdownMenuPrimitive.Root","DropdownMenuPrimitive.Trigger","DropdownMenuPrimitive.Group","DropdownMenuPrimitive.Portal","DropdownMenuPrimitive.Content","DropdownMenuPrimitive.Item","itemClasses","DropdownMenuPrimitive.CheckboxItem","DropdownMenuPrimitive.ItemIndicator","DropdownMenuPrimitive.RadioGroup","DropdownMenuPrimitive.RadioItem","DropdownMenuPrimitive.Label","DropdownMenuPrimitive.Separator","DropdownMenuPrimitive.Sub","DropdownMenuPrimitive.SubTrigger","DropdownMenuPrimitive.SubContent"],"sources":["../../src/components/dropdown-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 DropdownMenuPrimitive from '../primitives/vendor/radix/react-dropdown-menu';\n\nimport { menuItemClasses as itemClasses, surfaceClasses } from './popover';\n\nfunction DropdownMenu(props: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n  return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />;\n}\n\nfunction DropdownMenuTrigger(props: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n  return <DropdownMenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />;\n}\n\nfunction DropdownMenuGroup(props: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {\n  return <DropdownMenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />;\n}\n\nfunction DropdownMenuContent({\n  className,\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.Content\n        data-slot=\"dropdown-menu-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          surfaceClasses,\n          'max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto p-1',\n          className,\n        )}\n        {...props}\n      />\n    </DropdownMenuPrimitive.Portal>\n  );\n}\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = 'default',\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n  inset?: boolean;\n  variant?: 'default' | 'destructive';\n}) {\n  return (\n    <DropdownMenuPrimitive.Item\n      data-slot=\"dropdown-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 DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-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        <DropdownMenuPrimitive.ItemIndicator>\n          <Check className=\"size-4 text-foreground\" aria-hidden />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.CheckboxItem>\n  );\n}\n\nfunction DropdownMenuRadioGroup(\n  props: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>,\n) {\n  return <DropdownMenuPrimitive.RadioGroup data-slot=\"dropdown-menu-radio-group\" {...props} />;\n}\n\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      data-slot=\"dropdown-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        <DropdownMenuPrimitive.ItemIndicator>\n          <span className=\"block size-2 rounded-full bg-foreground\" />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.RadioItem>\n  );\n}\n\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & { inset?: boolean }) {\n  return (\n    <DropdownMenuPrimitive.Label\n      data-slot=\"dropdown-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 DropdownMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {\n  return (\n    <DropdownMenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn('-mx-1 my-1 h-px bg-border', className)}\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuShortcut({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)}\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuSub(props: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {\n  return <DropdownMenuPrimitive.Sub data-slot=\"dropdown-menu-sub\" {...props} />;\n}\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & { inset?: boolean }) {\n  return (\n    <DropdownMenuPrimitive.SubTrigger\n      data-slot=\"dropdown-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    </DropdownMenuPrimitive.SubTrigger>\n  );\n}\n\nfunction DropdownMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.SubContent\n        data-slot=\"dropdown-menu-sub-content\"\n        className={cn(\n          surfaceClasses,\n          'min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden p-1',\n          className,\n        )}\n        {...props}\n      />\n    </DropdownMenuPrimitive.Portal>\n  );\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n};\n"],"mappings":"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"}
+{"version":3,"file":"dropdown-menu.js","names":["DropdownMenuPrimitive.Root","DropdownMenuPrimitive.Trigger","DropdownMenuPrimitive.Group","DropdownMenuPrimitive.Portal","DropdownMenuPrimitive.Content","DropdownMenuPrimitive.Item","itemClasses","DropdownMenuPrimitive.CheckboxItem","DropdownMenuPrimitive.ItemIndicator","DropdownMenuPrimitive.RadioGroup","DropdownMenuPrimitive.RadioItem","DropdownMenuPrimitive.Label","DropdownMenuPrimitive.Separator","DropdownMenuPrimitive.Sub","DropdownMenuPrimitive.SubTrigger","DropdownMenuPrimitive.SubContent"],"sources":["../../src/components/dropdown-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 DropdownMenuPrimitive from '../primitives/vendor/radix/react-dropdown-menu';\n\nimport { menuItemClasses as itemClasses, menuLabelClasses, surfaceClasses } from './popover';\n\nfunction DropdownMenu(props: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n  return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />;\n}\n\nconst DropdownMenuTrigger = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>\n>(function DropdownMenuTrigger(props, ref) {\n  return <DropdownMenuPrimitive.Trigger ref={ref} data-slot=\"dropdown-menu-trigger\" {...props} />;\n});\n\nfunction DropdownMenuGroup(props: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {\n  return <DropdownMenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />;\n}\n\nconst DropdownMenuContent = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof DropdownMenuPrimitive.Content>\n>(function DropdownMenuContent({ className, sideOffset = 4, ...props }, ref) {\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.Content\n        ref={ref}\n        data-slot=\"dropdown-menu-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          surfaceClasses,\n          'max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto p-1',\n          className,\n        )}\n        {...props}\n      />\n    </DropdownMenuPrimitive.Portal>\n  );\n});\n\nexport interface DropdownMenuItemProps extends React.ComponentProps<\n  typeof DropdownMenuPrimitive.Item\n> {\n  inset?: boolean;\n  variant?: 'default' | 'destructive';\n}\n\nconst DropdownMenuItem = React.forwardRef<HTMLDivElement, DropdownMenuItemProps>(\n  function DropdownMenuItem({ className, inset, variant = 'default', ...props }, ref) {\n    return (\n      <DropdownMenuPrimitive.Item\n        ref={ref}\n        data-slot=\"dropdown-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 DropdownMenuCheckboxItem = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>\n>(function DropdownMenuCheckboxItem({ className, children, checked, ...props }, ref) {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      ref={ref}\n      data-slot=\"dropdown-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        <DropdownMenuPrimitive.ItemIndicator>\n          <Check className=\"size-4 text-foreground\" aria-hidden />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.CheckboxItem>\n  );\n});\n\nfunction DropdownMenuRadioGroup(\n  props: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>,\n) {\n  return <DropdownMenuPrimitive.RadioGroup data-slot=\"dropdown-menu-radio-group\" {...props} />;\n}\n\nconst DropdownMenuRadioItem = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>\n>(function DropdownMenuRadioItem({ className, children, ...props }, ref) {\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      ref={ref}\n      data-slot=\"dropdown-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        <DropdownMenuPrimitive.ItemIndicator>\n          <span className=\"block size-2 rounded-full bg-foreground\" />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.RadioItem>\n  );\n});\n\nconst DropdownMenuLabel = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof DropdownMenuPrimitive.Label> & { inset?: boolean }\n>(function DropdownMenuLabel({ className, inset, ...props }, ref) {\n  return (\n    <DropdownMenuPrimitive.Label\n      ref={ref}\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset || undefined}\n      className={cn(menuLabelClasses, 'data-[inset]:pl-8', className)}\n      {...props}\n    />\n  );\n});\n\nconst DropdownMenuSeparator = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof DropdownMenuPrimitive.Separator>\n>(function DropdownMenuSeparator({ className, ...props }, ref) {\n  return (\n    <DropdownMenuPrimitive.Separator\n      ref={ref}\n      data-slot=\"dropdown-menu-separator\"\n      className={cn('-mx-1 my-1 h-px bg-border', className)}\n      {...props}\n    />\n  );\n});\n\nconst DropdownMenuShortcut = React.forwardRef<HTMLSpanElement, React.ComponentProps<'span'>>(\n  function DropdownMenuShortcut({ className, ...props }, ref) {\n    return (\n      <span\n        ref={ref}\n        data-slot=\"dropdown-menu-shortcut\"\n        className={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)}\n        {...props}\n      />\n    );\n  },\n);\n\nfunction DropdownMenuSub(props: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {\n  return <DropdownMenuPrimitive.Sub data-slot=\"dropdown-menu-sub\" {...props} />;\n}\n\nconst DropdownMenuSubTrigger = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & { inset?: boolean }\n>(function DropdownMenuSubTrigger({ className, inset, children, ...props }, ref) {\n  return (\n    <DropdownMenuPrimitive.SubTrigger\n      ref={ref}\n      data-slot=\"dropdown-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    </DropdownMenuPrimitive.SubTrigger>\n  );\n});\n\nconst DropdownMenuSubContent = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>\n>(function DropdownMenuSubContent({ className, ...props }, ref) {\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.SubContent\n        ref={ref}\n        data-slot=\"dropdown-menu-sub-content\"\n        className={cn(\n          surfaceClasses,\n          'min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden p-1',\n          className,\n        )}\n        {...props}\n      />\n    </DropdownMenuPrimitive.Portal>\n  );\n});\n\nexport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n};\n"],"mappings":";;;;;;;;;AASA,SAAS,aAAa,OAAgE;CACpF,OAAO,oBAACA,MAAD;EAA4B,aAAU;EAAgB,GAAI;CAAQ,CAAA;AAC3E;AAEA,IAAM,sBAAsB,MAAM,WAGhC,SAAS,oBAAoB,OAAO,KAAK;CACzC,OAAO,oBAACC,SAAD;EAAoC;EAAK,aAAU;EAAwB,GAAI;CAAQ,CAAA;AAChG,CAAC;AAED,SAAS,kBAAkB,OAAiE;CAC1F,OAAO,oBAACC,OAAD;EAA6B,aAAU;EAAsB,GAAI;CAAQ,CAAA;AAClF;AAEA,IAAM,sBAAsB,MAAM,WAGhC,SAAS,oBAAoB,EAAE,WAAW,aAAa,GAAG,GAAG,SAAS,KAAK;CAC3E,OACE,oBAACC,QAAD,EAAA,UACE,oBAACC,SAAD;EACO;EACL,aAAU;EACE;EACZ,WAAW,GACT,gBACA,qKACA,SACF;EACA,GAAI;CACL,CAAA,EAC2B,CAAA;AAElC,CAAC;AASD,IAAM,mBAAmB,MAAM,WAC7B,SAAS,iBAAiB,EAAE,WAAW,OAAO,UAAU,WAAW,GAAG,SAAS,KAAK;CAClF,OACE,oBAACC,MAAD;EACO;EACL,aAAU;EACV,cAAY,SAAS,KAAA;EACrB,gBAAc;EACd,WAAW,GACTC,iBACA,uJACA,SACF;EACA,GAAI;CACL,CAAA;AAEL,CACF;AAEA,IAAM,2BAA2B,MAAM,WAGrC,SAAS,yBAAyB,EAAE,WAAW,UAAU,SAAS,GAAG,SAAS,KAAK;CACnF,OACE,qBAACC,cAAD;EACO;EACL,aAAU;EACV,WAAW,GAAGD,iBAAa,QAAQ,SAAS;EACnC;EACT,GAAI;EALN,UAAA,CAOE,oBAAC,QAAD;GAAM,WAAU;GACd,UAAA,oBAACE,eAAD,EAAA,UACE,oBAAC,OAAD;IAAO,WAAU;IAAyB,eAAA;GAAa,CAAA,EACpB,CAAA;EACjC,CAAA,GACL,QACiC;;AAExC,CAAC;AAED,SAAS,uBACP,OACA;CACA,OAAO,oBAACC,YAAD;EAAkC,aAAU;EAA4B,GAAI;CAAQ,CAAA;AAC7F;AAEA,IAAM,wBAAwB,MAAM,WAGlC,SAAS,sBAAsB,EAAE,WAAW,UAAU,GAAG,SAAS,KAAK;CACvE,OACE,qBAACC,WAAD;EACO;EACL,aAAU;EACV,WAAW,GAAGJ,iBAAa,QAAQ,SAAS;EAC5C,GAAI;EAJN,UAAA,CAME,oBAAC,QAAD;GAAM,WAAU;GACd,UAAA,oBAACE,eAAD,EAAA,UACE,oBAAC,QAAD,EAAM,WAAU,0CAA2C,CAAA,EACxB,CAAA;EACjC,CAAA,GACL,QAC8B;;AAErC,CAAC;AAED,IAAM,oBAAoB,MAAM,WAG9B,SAAS,kBAAkB,EAAE,WAAW,OAAO,GAAG,SAAS,KAAK;CAChE,OACE,oBAACG,OAAD;EACO;EACL,aAAU;EACV,cAAY,SAAS,KAAA;EACrB,WAAW,GAAG,kBAAkB,qBAAqB,SAAS;EAC9D,GAAI;CACL,CAAA;AAEL,CAAC;AAED,IAAM,wBAAwB,MAAM,WAGlC,SAAS,sBAAsB,EAAE,WAAW,GAAG,SAAS,KAAK;CAC7D,OACE,oBAACC,WAAD;EACO;EACL,aAAU;EACV,WAAW,GAAG,6BAA6B,SAAS;EACpD,GAAI;CACL,CAAA;AAEL,CAAC;AAED,IAAM,uBAAuB,MAAM,WACjC,SAAS,qBAAqB,EAAE,WAAW,GAAG,SAAS,KAAK;CAC1D,OACE,oBAAC,QAAD;EACO;EACL,aAAU;EACV,WAAW,GAAG,yDAAyD,SAAS;EAChF,GAAI;CACL,CAAA;AAEL,CACF;AAEA,SAAS,gBAAgB,OAA+D;CACtF,OAAO,oBAACC,KAAD;EAA2B,aAAU;EAAoB,GAAI;CAAQ,CAAA;AAC9E;AAEA,IAAM,yBAAyB,MAAM,WAGnC,SAAS,uBAAuB,EAAE,WAAW,OAAO,UAAU,GAAG,SAAS,KAAK;CAC/E,OACE,qBAACC,YAAD;EACO;EACL,aAAU;EACV,cAAY,SAAS,KAAA;EACrB,WAAW,GAAGR,iBAAa,kCAAkC,SAAS;EACtE,GAAI;EALN,UAAA,CAOG,UACD,oBAAC,cAAD;GAAc,WAAU;GAAiB,eAAA;EAAa,CAAA,CACtB;;AAEtC,CAAC;AAED,IAAM,yBAAyB,MAAM,WAGnC,SAAS,uBAAuB,EAAE,WAAW,GAAG,SAAS,KAAK;CAC9D,OACE,oBAACH,QAAD,EAAA,UACE,oBAACY,YAAD;EACO;EACL,aAAU;EACV,WAAW,GACT,gBACA,4FACA,SACF;EACA,GAAI;CACL,CAAA,EAC2B,CAAA;AAElC,CAAC"}

package/dist/components/editor-tabs.d.ts

@@ -43,5 +43,5 @@ export interface EditorTabsProps extends Omit<React.ComponentProps<'div'>, 'chil
  * and PageDown move the tab. Middle-click closes. The strip scrolls when the
  * tabs overflow and keeps the active tab in view.
  */
-declare function EditorTabs({ tabs, activeId, onActiveChange, onClose, onMove, actions, onTabContextMenu, className, 'aria-label': ariaLabel, ...props }: EditorTabsProps): React.JSX.Element;
+declare const EditorTabs: React.ForwardRefExoticComponent<Omit<EditorTabsProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { EditorTabs };

package/dist/components/editor-tabs.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 X from "@burtson-labs/icons/react/x";
@@ -10,7 +10,7 @@ import X from "@burtson-labs/icons/react/x";
 * and PageDown move the tab. Middle-click closes. The strip scrolls when the
 * tabs overflow and keeps the active tab in view.
 */
-function EditorTabs({ tabs, activeId, onActiveChange, onClose, onMove, actions, onTabContextMenu, className, "aria-label": ariaLabel, ...props }) {
+var EditorTabs = React.forwardRef(function EditorTabs({ tabs, activeId, onActiveChange, onClose, onMove, actions, onTabContextMenu, className, "aria-label": ariaLabel, ...props }, ref) {
 	const baseId = React.useId();
 	const tabRefs = React.useRef(/* @__PURE__ */ new Map());
 	const listRef = React.useRef(null);
@@ -110,6 +110,7 @@ function EditorTabs({ tabs, activeId, onActiveChange, onClose, onMove, actions,
 		if (handled) event.preventDefault();
 	};
 	return /* @__PURE__ */ jsxs("div", {
+		ref,
 		"data-slot": "editor-tabs",
 		className: cn("flex h-9 min-w-0 items-stretch border-b bg-surface-muted", className),
 		...props,
@@ -166,7 +167,7 @@ function EditorTabs({ tabs, activeId, onActiveChange, onClose, onMove, actions,
 							onFocus: () => setFocusedId(tab.id),
 							onClick: () => onActiveChange(tab.id),
 							onKeyDown: (event) => onKeyDown(event, tab),
-							className: cn("flex h-full min-w-0 items-center gap-1.5 ps-3 outline-none focus-visible:shadow-[inset_0_0_0_1px_var(--ring)]", closeable ? "pe-1" : "pe-3"),
+							className: cn("flex h-full min-w-0 items-center gap-1.5 ps-3", focusRingClasses, "focus-visible:outline-offset-[-2px]", closeable ? "pe-1" : "pe-3"),
 							children: [
 								tab.icon && /* @__PURE__ */ jsx("span", {
 									"aria-hidden": true,
@@ -194,7 +195,7 @@ function EditorTabs({ tabs, activeId, onActiveChange, onClose, onMove, actions,
 							"aria-label": `Close ${tab.label}`,
 							title: "Close (Delete)",
 							onClick: () => onClose?.(tab.id),
-							className: "me-1 flex size-5 shrink-0 items-center justify-center rounded-xs text-muted-foreground outline-none hover:bg-muted hover:text-foreground",
+							className: cn("me-1 flex size-5 shrink-0 items-center justify-center rounded-xs text-muted-foreground hover:bg-muted hover:text-foreground", focusRingClasses, "focus-visible:outline-offset-[-1px]"),
 							children: [tab.dirty && /* @__PURE__ */ jsx("span", {
 								"aria-hidden": true,
 								className: "size-2 rounded-full bg-foreground/70 group-hover/tab:hidden"
@@ -215,7 +216,7 @@ function EditorTabs({ tabs, activeId, onActiveChange, onClose, onMove, actions,
 			children: actions
 		})]
 	});
-}
+});
 //#endregion
 export { EditorTabs };
 

package/dist/components/editor-tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"editor-tabs.js","names":[],"sources":["../../src/components/editor-tabs.tsx"],"sourcesContent":["import X from '@burtson-labs/icons/react/x';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nexport interface EditorTab {\n  /** Stable identity, usually the file path. */\n  id: string;\n  label: string;\n  /** Full path or context; the tooltip and the accessible description. */\n  description?: string;\n  icon?: React.ReactNode;\n  /** Unsaved changes: a dot replaces the close button until hover. */\n  dirty?: boolean;\n  /** Default true. */\n  closeable?: boolean;\n  /** A preview tab that the next opened file replaces; shown in italics. */\n  preview?: boolean;\n  /** The id of the panel this tab shows, for aria-controls. */\n  controls?: string;\n}\n\nexport interface EditorTabsProps extends Omit<\n  React.ComponentProps<'div'>,\n  'children' | 'aria-label'\n> {\n  tabs: EditorTab[];\n  activeId: string | null;\n  onActiveChange: (id: string) => void;\n  /**\n   * A request to close. The component never removes a tab itself: for a dirty\n   * tab, ask the person (save, discard, cancel) and then update `tabs`.\n   */\n  onClose?: (id: string) => void;\n  /**\n   * Reorder by drag or Ctrl+Shift+PageUp/PageDown. `toIndex` is the new position.\n   * Dragging uses pointer events, not HTML5 drag and drop, so it also works in\n   * desktop webviews (Tauri, Electron) that intercept native drags.\n   */\n  onMove?: (id: string, toIndex: number) => void;\n  /** Required: e.g. \"Open editors\". */\n  'aria-label': string;\n  /** Right-hand slot for split, more and similar buttons. */\n  actions?: React.ReactNode;\n  /** Right-click on a tab. */\n  onTabContextMenu?: (id: string, event: React.MouseEvent) => void;\n}\n\n/**\n * The strip of open files above an editor. One tab stop; Left/Right/Home/End\n * move focus, Enter or Space opens, Delete asks to close, Ctrl+Shift+PageUp\n * and PageDown move the tab. Middle-click closes. The strip scrolls when the\n * tabs overflow and keeps the active tab in view.\n */\nfunction EditorTabs({\n  tabs,\n  activeId,\n  onActiveChange,\n  onClose,\n  onMove,\n  actions,\n  onTabContextMenu,\n  className,\n  'aria-label': ariaLabel,\n  ...props\n}: EditorTabsProps) {\n  const baseId = React.useId();\n  const tabRefs = React.useRef(new Map<string, HTMLButtonElement>());\n  const listRef = React.useRef<HTMLDivElement>(null);\n  const [focusedId, setFocusedId] = React.useState<string | null>(null);\n  const [dragId, setDragId] = React.useState<string | null>(null);\n  // The gap a dragged tab would land in: 0 is before the first tab,\n  // tabs.length after the last.\n  const [dropGap, setDropGap] = React.useState<number | null>(null);\n  // Set once a press becomes a drag, so the click that ends it does nothing.\n  const dragged = React.useRef(false);\n  const dragCleanup = React.useRef<(() => void) | null>(null);\n  React.useEffect(() => () => dragCleanup.current?.(), []);\n  const lastIds = React.useRef<string[]>([]);\n  const hadFocus = React.useRef(false);\n\n  const ids = tabs.map((t) => t.id);\n  const idsKey = ids.join('\\u0000');\n  const tabStop =\n    (focusedId && ids.includes(focusedId) ? focusedId : null) ??\n    (activeId && ids.includes(activeId) ? activeId : null) ??\n    ids[0] ??\n    null;\n\n  React.useEffect(() => {\n    if (activeId)\n      tabRefs.current.get(activeId)?.scrollIntoView?.({ block: 'nearest', inline: 'nearest' });\n  }, [activeId]);\n\n  // After a close, keep keyboard focus in the strip: the active tab if the\n  // app picked one, else the neighbour at the closed tab's position.\n  React.useLayoutEffect(() => {\n    if (focusedId && !ids.includes(focusedId)) {\n      const next =\n        (activeId && ids.includes(activeId) ? activeId : null) ??\n        ids[Math.min(Math.max(0, lastIds.current.indexOf(focusedId)), ids.length - 1)] ??\n        null;\n      setFocusedId(next);\n      const active = document.activeElement;\n      if (next && hadFocus.current && (!active || active === document.body))\n        tabRefs.current.get(next)?.focus();\n    }\n    lastIds.current = ids;\n    // ids is derived from tabs each render; idsKey is its stable form.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [focusedId, idsKey, activeId]);\n\n  /** Which gap the pointer is over, measured from the rendered tabs. */\n  const gapAt = (clientX: number) => {\n    const els = Array.from(\n      listRef.current?.querySelectorAll<HTMLElement>('[data-slot=\"editor-tab\"]') ?? [],\n    );\n    const rtl = listRef.current ? getComputedStyle(listRef.current).direction === 'rtl' : false;\n    for (let i = 0; i < els.length; i++) {\n      const rect = els[i]!.getBoundingClientRect();\n      const mid = rect.left + rect.width / 2;\n      if (rtl ? clientX > mid : clientX < mid) return i;\n    }\n    return els.length;\n  };\n\n  const startDrag = (event: React.PointerEvent, id: string) => {\n    if (!onMove || event.button !== 0) return;\n    dragCleanup.current?.();\n    dragged.current = false;\n    const downX = event.clientX;\n    const move = (e: PointerEvent) => {\n      // A few pixels of slop so an ordinary click is not read as a drag.\n      if (!dragged.current && Math.abs(e.clientX - downX) < 4) return;\n      if (!dragged.current) {\n        dragged.current = true;\n        setDragId(id);\n      }\n      setDropGap(gapAt(e.clientX));\n    };\n    const stop = (e: PointerEvent | null) => {\n      window.removeEventListener('pointermove', move);\n      window.removeEventListener('pointerup', up);\n      window.removeEventListener('pointercancel', cancel);\n      dragCleanup.current = null;\n      if (e && dragged.current) {\n        const from = lastIds.current.indexOf(id);\n        const gap = gapAt(e.clientX);\n        const to = gap > from ? gap - 1 : gap;\n        if (from !== -1 && to !== from) onMove(id, to);\n      }\n      setDragId(null);\n      setDropGap(null);\n    };\n    const up = (e: PointerEvent) => stop(e);\n    const cancel = () => stop(null);\n    window.addEventListener('pointermove', move);\n    window.addEventListener('pointerup', up);\n    window.addEventListener('pointercancel', cancel);\n    dragCleanup.current = () => stop(null);\n  };\n\n  const focusTab = (id: string | undefined) => {\n    if (!id) return;\n    setFocusedId(id);\n    tabRefs.current.get(id)?.focus();\n  };\n\n  const onKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>, tab: EditorTab) => {\n    const i = ids.indexOf(tab.id);\n    const rtl = listRef.current ? getComputedStyle(listRef.current).direction === 'rtl' : false;\n    const [prev, next] = rtl ? ['ArrowRight', 'ArrowLeft'] : ['ArrowLeft', 'ArrowRight'];\n    let handled = true;\n    if (event.ctrlKey && event.shiftKey && (event.key === 'PageUp' || event.key === 'PageDown')) {\n      const to = event.key === 'PageUp' ? i - 1 : i + 1;\n      if (onMove && to >= 0 && to < ids.length) onMove(tab.id, to);\n    } else if (event.key === prev) focusTab(ids[(i - 1 + ids.length) % ids.length]);\n    else if (event.key === next) focusTab(ids[(i + 1) % ids.length]);\n    else if (event.key === 'Home') focusTab(ids[0]);\n    else if (event.key === 'End') focusTab(ids[ids.length - 1]);\n    else if (event.key === 'Delete' && tab.closeable !== false && onClose) onClose(tab.id);\n    else handled = false;\n    if (handled) event.preventDefault();\n  };\n\n  return (\n    <div\n      data-slot=\"editor-tabs\"\n      className={cn('flex h-9 min-w-0 items-stretch border-b bg-surface-muted', className)}\n      {...props}\n    >\n      <div\n        ref={listRef}\n        role=\"tablist\"\n        aria-label={ariaLabel}\n        aria-orientation=\"horizontal\"\n        className=\"flex min-w-0 flex-1 items-stretch overflow-x-auto [scrollbar-width:thin]\"\n        onFocus={() => (hadFocus.current = true)}\n        onBlur={(event) => {\n          if (!listRef.current?.contains(event.relatedTarget)) hadFocus.current = false;\n        }}\n      >\n        {tabs.map((tab, i) => {\n          const active = tab.id === activeId;\n          const closeable = tab.closeable !== false && Boolean(onClose);\n          const tabId = `${baseId}-tab-${i}`;\n          return (\n            <div\n              key={tab.id}\n              data-slot=\"editor-tab\"\n              data-state={active ? 'active' : 'inactive'}\n              data-dirty={tab.dirty || undefined}\n              data-dragging={dragId === tab.id || undefined}\n              data-drop={\n                dragId === null\n                  ? undefined\n                  : dropGap === i\n                    ? 'before'\n                    : dropGap === tabs.length && i === tabs.length - 1\n                      ? 'after'\n                      : undefined\n              }\n              onPointerDown={(event) => startDrag(event, tab.id)}\n              onClickCapture={(event) => {\n                // Swallow the click that ends a drag.\n                if (dragged.current) {\n                  dragged.current = false;\n                  event.stopPropagation();\n                  event.preventDefault();\n                }\n              }}\n              onAuxClick={(event) => {\n                if (event.button === 1 && closeable) {\n                  event.preventDefault();\n                  onClose?.(tab.id);\n                }\n              }}\n              onContextMenu={\n                onTabContextMenu ? (event) => onTabContextMenu(tab.id, event) : undefined\n              }\n              className={cn(\n                'group/tab relative flex max-w-60 shrink-0 items-center border-e text-[13px] text-muted-foreground',\n                'hover:bg-muted/60 data-[state=active]:bg-background data-[state=active]:text-foreground',\n                // The active tab's top edge carries the brand colour.\n                'data-[state=active]:before:absolute data-[state=active]:before:inset-x-0 data-[state=active]:before:top-0 data-[state=active]:before:h-0.5 data-[state=active]:before:bg-brand data-[state=active]:before:content-[\"\"]',\n                'data-[dragging]:opacity-50 data-[dragging]:select-none',\n                // Where a dragged tab will land.\n                'data-[drop=before]:shadow-[inset_2px_0_0_var(--brand)] data-[drop=after]:shadow-[inset_-2px_0_0_var(--brand)]',\n              )}\n            >\n              <button\n                ref={(el) => {\n                  if (el) tabRefs.current.set(tab.id, el);\n                  else tabRefs.current.delete(tab.id);\n                }}\n                type=\"button\"\n                role=\"tab\"\n                id={tabId}\n                aria-selected={active}\n                aria-controls={tab.controls}\n                aria-describedby={tab.description ? `${tabId}-desc` : undefined}\n                title={tab.description}\n                tabIndex={tab.id === tabStop ? 0 : -1}\n                onFocus={() => setFocusedId(tab.id)}\n                onClick={() => onActiveChange(tab.id)}\n                onKeyDown={(event) => onKeyDown(event, tab)}\n                className={cn(\n                  'flex h-full min-w-0 items-center gap-1.5 ps-3 outline-none focus-visible:shadow-[inset_0_0_0_1px_var(--ring)]',\n                  closeable ? 'pe-1' : 'pe-3',\n                )}\n              >\n                {tab.icon && (\n                  <span aria-hidden className=\"flex shrink-0 [&_svg]:size-4\">\n                    {tab.icon}\n                  </span>\n                )}\n                <span className={cn('truncate', tab.preview && 'italic')}>{tab.label}</span>\n                {tab.dirty && <span className=\"sr-only\">, unsaved changes</span>}\n              </button>\n              {tab.description && (\n                <span id={`${tabId}-desc`} hidden>\n                  {tab.description}\n                </span>\n              )}\n              {closeable ? (\n                <button\n                  type=\"button\"\n                  tabIndex={-1}\n                  aria-label={`Close ${tab.label}`}\n                  title=\"Close (Delete)\"\n                  onClick={() => onClose?.(tab.id)}\n                  className=\"me-1 flex size-5 shrink-0 items-center justify-center rounded-xs text-muted-foreground outline-none hover:bg-muted hover:text-foreground\"\n                >\n                  {tab.dirty && (\n                    <span\n                      aria-hidden\n                      className=\"size-2 rounded-full bg-foreground/70 group-hover/tab:hidden\"\n                    />\n                  )}\n                  <X\n                    aria-hidden\n                    className={cn(\n                      'size-3.5',\n                      tab.dirty\n                        ? 'hidden group-hover/tab:block'\n                        : 'opacity-0 group-hover/tab:opacity-100 group-data-[state=active]/tab:opacity-100 group-focus-within/tab:opacity-100',\n                    )}\n                  />\n                </button>\n              ) : tab.dirty ? (\n                <span aria-hidden className=\"me-3 size-2 shrink-0 rounded-full bg-foreground/70\" />\n              ) : null}\n            </div>\n          );\n        })}\n      </div>\n      {actions && (\n        <div data-slot=\"editor-tabs-actions\" className=\"flex shrink-0 items-center gap-0.5 px-1\">\n          {actions}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport { EditorTabs };\n"],"mappings":"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"}
+{"version":3,"file":"editor-tabs.js","names":[],"sources":["../../src/components/editor-tabs.tsx"],"sourcesContent":["import X from '@burtson-labs/icons/react/x';\nimport * as React from 'react';\n\nimport { cn, focusRingClasses } from '../lib/utils';\n\nexport interface EditorTab {\n  /** Stable identity, usually the file path. */\n  id: string;\n  label: string;\n  /** Full path or context; the tooltip and the accessible description. */\n  description?: string;\n  icon?: React.ReactNode;\n  /** Unsaved changes: a dot replaces the close button until hover. */\n  dirty?: boolean;\n  /** Default true. */\n  closeable?: boolean;\n  /** A preview tab that the next opened file replaces; shown in italics. */\n  preview?: boolean;\n  /** The id of the panel this tab shows, for aria-controls. */\n  controls?: string;\n}\n\nexport interface EditorTabsProps extends Omit<\n  React.ComponentProps<'div'>,\n  'children' | 'aria-label'\n> {\n  tabs: EditorTab[];\n  activeId: string | null;\n  onActiveChange: (id: string) => void;\n  /**\n   * A request to close. The component never removes a tab itself: for a dirty\n   * tab, ask the person (save, discard, cancel) and then update `tabs`.\n   */\n  onClose?: (id: string) => void;\n  /**\n   * Reorder by drag or Ctrl+Shift+PageUp/PageDown. `toIndex` is the new position.\n   * Dragging uses pointer events, not HTML5 drag and drop, so it also works in\n   * desktop webviews (Tauri, Electron) that intercept native drags.\n   */\n  onMove?: (id: string, toIndex: number) => void;\n  /** Required: e.g. \"Open editors\". */\n  'aria-label': string;\n  /** Right-hand slot for split, more and similar buttons. */\n  actions?: React.ReactNode;\n  /** Right-click on a tab. */\n  onTabContextMenu?: (id: string, event: React.MouseEvent) => void;\n}\n\n/**\n * The strip of open files above an editor. One tab stop; Left/Right/Home/End\n * move focus, Enter or Space opens, Delete asks to close, Ctrl+Shift+PageUp\n * and PageDown move the tab. Middle-click closes. The strip scrolls when the\n * tabs overflow and keeps the active tab in view.\n */\nconst EditorTabs = React.forwardRef<HTMLDivElement, EditorTabsProps>(function EditorTabs(\n  {\n    tabs,\n    activeId,\n    onActiveChange,\n    onClose,\n    onMove,\n    actions,\n    onTabContextMenu,\n    className,\n    'aria-label': ariaLabel,\n    ...props\n  },\n  ref,\n) {\n  const baseId = React.useId();\n  const tabRefs = React.useRef(new Map<string, HTMLButtonElement>());\n  const listRef = React.useRef<HTMLDivElement>(null);\n  const [focusedId, setFocusedId] = React.useState<string | null>(null);\n  const [dragId, setDragId] = React.useState<string | null>(null);\n  // The gap a dragged tab would land in: 0 is before the first tab,\n  // tabs.length after the last.\n  const [dropGap, setDropGap] = React.useState<number | null>(null);\n  // Set once a press becomes a drag, so the click that ends it does nothing.\n  const dragged = React.useRef(false);\n  const dragCleanup = React.useRef<(() => void) | null>(null);\n  React.useEffect(() => () => dragCleanup.current?.(), []);\n  const lastIds = React.useRef<string[]>([]);\n  const hadFocus = React.useRef(false);\n\n  const ids = tabs.map((t) => t.id);\n  const idsKey = ids.join('\\u0000');\n  const tabStop =\n    (focusedId && ids.includes(focusedId) ? focusedId : null) ??\n    (activeId && ids.includes(activeId) ? activeId : null) ??\n    ids[0] ??\n    null;\n\n  React.useEffect(() => {\n    if (activeId)\n      tabRefs.current.get(activeId)?.scrollIntoView?.({ block: 'nearest', inline: 'nearest' });\n  }, [activeId]);\n\n  // After a close, keep keyboard focus in the strip: the active tab if the\n  // app picked one, else the neighbour at the closed tab's position.\n  React.useLayoutEffect(() => {\n    if (focusedId && !ids.includes(focusedId)) {\n      const next =\n        (activeId && ids.includes(activeId) ? activeId : null) ??\n        ids[Math.min(Math.max(0, lastIds.current.indexOf(focusedId)), ids.length - 1)] ??\n        null;\n      setFocusedId(next);\n      const active = document.activeElement;\n      if (next && hadFocus.current && (!active || active === document.body))\n        tabRefs.current.get(next)?.focus();\n    }\n    lastIds.current = ids;\n    // ids is derived from tabs each render; idsKey is its stable form.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [focusedId, idsKey, activeId]);\n\n  /** Which gap the pointer is over, measured from the rendered tabs. */\n  const gapAt = (clientX: number) => {\n    const els = Array.from(\n      listRef.current?.querySelectorAll<HTMLElement>('[data-slot=\"editor-tab\"]') ?? [],\n    );\n    const rtl = listRef.current ? getComputedStyle(listRef.current).direction === 'rtl' : false;\n    for (let i = 0; i < els.length; i++) {\n      const rect = els[i]!.getBoundingClientRect();\n      const mid = rect.left + rect.width / 2;\n      if (rtl ? clientX > mid : clientX < mid) return i;\n    }\n    return els.length;\n  };\n\n  const startDrag = (event: React.PointerEvent, id: string) => {\n    if (!onMove || event.button !== 0) return;\n    dragCleanup.current?.();\n    dragged.current = false;\n    const downX = event.clientX;\n    const move = (e: PointerEvent) => {\n      // A few pixels of slop so an ordinary click is not read as a drag.\n      if (!dragged.current && Math.abs(e.clientX - downX) < 4) return;\n      if (!dragged.current) {\n        dragged.current = true;\n        setDragId(id);\n      }\n      setDropGap(gapAt(e.clientX));\n    };\n    const stop = (e: PointerEvent | null) => {\n      window.removeEventListener('pointermove', move);\n      window.removeEventListener('pointerup', up);\n      window.removeEventListener('pointercancel', cancel);\n      dragCleanup.current = null;\n      if (e && dragged.current) {\n        const from = lastIds.current.indexOf(id);\n        const gap = gapAt(e.clientX);\n        const to = gap > from ? gap - 1 : gap;\n        if (from !== -1 && to !== from) onMove(id, to);\n      }\n      setDragId(null);\n      setDropGap(null);\n    };\n    const up = (e: PointerEvent) => stop(e);\n    const cancel = () => stop(null);\n    window.addEventListener('pointermove', move);\n    window.addEventListener('pointerup', up);\n    window.addEventListener('pointercancel', cancel);\n    dragCleanup.current = () => stop(null);\n  };\n\n  const focusTab = (id: string | undefined) => {\n    if (!id) return;\n    setFocusedId(id);\n    tabRefs.current.get(id)?.focus();\n  };\n\n  const onKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>, tab: EditorTab) => {\n    const i = ids.indexOf(tab.id);\n    const rtl = listRef.current ? getComputedStyle(listRef.current).direction === 'rtl' : false;\n    const [prev, next] = rtl ? ['ArrowRight', 'ArrowLeft'] : ['ArrowLeft', 'ArrowRight'];\n    let handled = true;\n    if (event.ctrlKey && event.shiftKey && (event.key === 'PageUp' || event.key === 'PageDown')) {\n      const to = event.key === 'PageUp' ? i - 1 : i + 1;\n      if (onMove && to >= 0 && to < ids.length) onMove(tab.id, to);\n    } else if (event.key === prev) focusTab(ids[(i - 1 + ids.length) % ids.length]);\n    else if (event.key === next) focusTab(ids[(i + 1) % ids.length]);\n    else if (event.key === 'Home') focusTab(ids[0]);\n    else if (event.key === 'End') focusTab(ids[ids.length - 1]);\n    else if (event.key === 'Delete' && tab.closeable !== false && onClose) onClose(tab.id);\n    else handled = false;\n    if (handled) event.preventDefault();\n  };\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"editor-tabs\"\n      className={cn('flex h-9 min-w-0 items-stretch border-b bg-surface-muted', className)}\n      {...props}\n    >\n      <div\n        ref={listRef}\n        role=\"tablist\"\n        aria-label={ariaLabel}\n        aria-orientation=\"horizontal\"\n        className=\"flex min-w-0 flex-1 items-stretch overflow-x-auto [scrollbar-width:thin]\"\n        onFocus={() => (hadFocus.current = true)}\n        onBlur={(event) => {\n          if (!listRef.current?.contains(event.relatedTarget)) hadFocus.current = false;\n        }}\n      >\n        {tabs.map((tab, i) => {\n          const active = tab.id === activeId;\n          const closeable = tab.closeable !== false && Boolean(onClose);\n          const tabId = `${baseId}-tab-${i}`;\n          return (\n            <div\n              key={tab.id}\n              data-slot=\"editor-tab\"\n              data-state={active ? 'active' : 'inactive'}\n              data-dirty={tab.dirty || undefined}\n              data-dragging={dragId === tab.id || undefined}\n              data-drop={\n                dragId === null\n                  ? undefined\n                  : dropGap === i\n                    ? 'before'\n                    : dropGap === tabs.length && i === tabs.length - 1\n                      ? 'after'\n                      : undefined\n              }\n              onPointerDown={(event) => startDrag(event, tab.id)}\n              onClickCapture={(event) => {\n                // Swallow the click that ends a drag.\n                if (dragged.current) {\n                  dragged.current = false;\n                  event.stopPropagation();\n                  event.preventDefault();\n                }\n              }}\n              onAuxClick={(event) => {\n                if (event.button === 1 && closeable) {\n                  event.preventDefault();\n                  onClose?.(tab.id);\n                }\n              }}\n              onContextMenu={\n                onTabContextMenu ? (event) => onTabContextMenu(tab.id, event) : undefined\n              }\n              className={cn(\n                'group/tab relative flex max-w-60 shrink-0 items-center border-e text-[13px] text-muted-foreground',\n                'hover:bg-muted/60 data-[state=active]:bg-background data-[state=active]:text-foreground',\n                // The active tab's top edge carries the brand colour.\n                'data-[state=active]:before:absolute data-[state=active]:before:inset-x-0 data-[state=active]:before:top-0 data-[state=active]:before:h-0.5 data-[state=active]:before:bg-brand data-[state=active]:before:content-[\"\"]',\n                'data-[dragging]:opacity-50 data-[dragging]:select-none',\n                // Where a dragged tab will land.\n                'data-[drop=before]:shadow-[inset_2px_0_0_var(--brand)] data-[drop=after]:shadow-[inset_-2px_0_0_var(--brand)]',\n              )}\n            >\n              <button\n                ref={(el) => {\n                  if (el) tabRefs.current.set(tab.id, el);\n                  else tabRefs.current.delete(tab.id);\n                }}\n                type=\"button\"\n                role=\"tab\"\n                id={tabId}\n                aria-selected={active}\n                aria-controls={tab.controls}\n                aria-describedby={tab.description ? `${tabId}-desc` : undefined}\n                title={tab.description}\n                tabIndex={tab.id === tabStop ? 0 : -1}\n                onFocus={() => setFocusedId(tab.id)}\n                onClick={() => onActiveChange(tab.id)}\n                onKeyDown={(event) => onKeyDown(event, tab)}\n                className={cn(\n                  'flex h-full min-w-0 items-center gap-1.5 ps-3',\n                  focusRingClasses,\n                  'focus-visible:outline-offset-[-2px]',\n                  closeable ? 'pe-1' : 'pe-3',\n                )}\n              >\n                {tab.icon && (\n                  <span aria-hidden className=\"flex shrink-0 [&_svg]:size-4\">\n                    {tab.icon}\n                  </span>\n                )}\n                <span className={cn('truncate', tab.preview && 'italic')}>{tab.label}</span>\n                {tab.dirty && <span className=\"sr-only\">, unsaved changes</span>}\n              </button>\n              {tab.description && (\n                <span id={`${tabId}-desc`} hidden>\n                  {tab.description}\n                </span>\n              )}\n              {closeable ? (\n                <button\n                  type=\"button\"\n                  tabIndex={-1}\n                  aria-label={`Close ${tab.label}`}\n                  title=\"Close (Delete)\"\n                  onClick={() => onClose?.(tab.id)}\n                  className={cn(\n                    'me-1 flex size-5 shrink-0 items-center justify-center rounded-xs text-muted-foreground hover:bg-muted hover:text-foreground',\n                    focusRingClasses,\n                    'focus-visible:outline-offset-[-1px]',\n                  )}\n                >\n                  {tab.dirty && (\n                    <span\n                      aria-hidden\n                      className=\"size-2 rounded-full bg-foreground/70 group-hover/tab:hidden\"\n                    />\n                  )}\n                  <X\n                    aria-hidden\n                    className={cn(\n                      'size-3.5',\n                      tab.dirty\n                        ? 'hidden group-hover/tab:block'\n                        : 'opacity-0 group-hover/tab:opacity-100 group-data-[state=active]/tab:opacity-100 group-focus-within/tab:opacity-100',\n                    )}\n                  />\n                </button>\n              ) : tab.dirty ? (\n                <span aria-hidden className=\"me-3 size-2 shrink-0 rounded-full bg-foreground/70\" />\n              ) : null}\n            </div>\n          );\n        })}\n      </div>\n      {actions && (\n        <div data-slot=\"editor-tabs-actions\" className=\"flex shrink-0 items-center gap-0.5 px-1\">\n          {actions}\n        </div>\n      )}\n    </div>\n  );\n});\n\nexport { EditorTabs };\n"],"mappings":"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"}

package/dist/components/empty-state.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-declare function EmptyState({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
-declare function EmptyStateIcon({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
-declare function EmptyStateTitle({ className, children, ...props }: React.ComponentProps<'h3'>): React.JSX.Element;
-declare function EmptyStateDescription({ className, ...props }: React.ComponentProps<'p'>): React.JSX.Element;
-declare function EmptyStateActions({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare const EmptyState: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const EmptyStateIcon: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const EmptyStateTitle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const EmptyStateDescription: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+declare const EmptyStateActions: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { EmptyState, EmptyStateActions, EmptyStateDescription, EmptyStateIcon, EmptyStateTitle };

package/dist/components/empty-state.js

@@ -1,44 +1,49 @@
 "use client";
 import { cn } from "../lib/utils.js";
-import "react";
+import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/empty-state.tsx
-function EmptyState({ className, ...props }) {
+var EmptyState = React.forwardRef(function EmptyState({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("div", {
+		ref,
 		"data-slot": "empty-state",
 		className: cn("flex min-h-64 flex-col items-center justify-center rounded-xl border border-dashed border-border-strong bg-surface-muted/60 px-6 py-10 text-center", className),
 		...props
 	});
-}
-function EmptyStateIcon({ className, ...props }) {
+});
+var EmptyStateIcon = React.forwardRef(function EmptyStateIcon({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("div", {
+		ref,
 		"data-slot": "empty-state-icon",
 		className: cn("mb-4 grid size-10 place-items-center rounded-lg border border-brand/15 bg-brand-soft text-brand [&_svg]:size-5", className),
 		...props
 	});
-}
-function EmptyStateTitle({ className, children, ...props }) {
+});
+var EmptyStateTitle = React.forwardRef(function EmptyStateTitle({ className, children, ...props }, ref) {
 	return /* @__PURE__ */ jsx("h3", {
+		ref,
 		"data-slot": "empty-state-title",
 		className: cn("text-sm font-semibold text-foreground", className),
 		...props,
 		children
 	});
-}
-function EmptyStateDescription({ className, ...props }) {
+});
+var EmptyStateDescription = React.forwardRef(function EmptyStateDescription({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("p", {
+		ref,
 		"data-slot": "empty-state-description",
 		className: cn("mt-1 max-w-md text-sm leading-5 text-muted-foreground", className),
 		...props
 	});
-}
-function EmptyStateActions({ className, ...props }) {
+});
+var EmptyStateActions = React.forwardRef(function EmptyStateActions({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("div", {
+		ref,
 		"data-slot": "empty-state-actions",
 		className: cn("mt-5 flex flex-wrap justify-center gap-2", className),
 		...props
 	});
-}
+});
 //#endregion
 export { EmptyState, EmptyStateActions, EmptyStateDescription, EmptyStateIcon, EmptyStateTitle };
 

package/dist/components/empty-state.js.map

@@ -1 +1 @@
-{"version":3,"file":"empty-state.js","names":[],"sources":["../../src/components/empty-state.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nfunction EmptyState({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"empty-state\"\n      className={cn(\n        'flex min-h-64 flex-col items-center justify-center rounded-xl border border-dashed border-border-strong bg-surface-muted/60 px-6 py-10 text-center',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction EmptyStateIcon({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"empty-state-icon\"\n      className={cn(\n        'mb-4 grid size-10 place-items-center rounded-lg border border-brand/15 bg-brand-soft text-brand [&_svg]:size-5',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction EmptyStateTitle({ className, children, ...props }: React.ComponentProps<'h3'>) {\n  return (\n    <h3\n      data-slot=\"empty-state-title\"\n      className={cn('text-sm font-semibold text-foreground', className)}\n      {...props}\n    >\n      {children}\n    </h3>\n  );\n}\n\nfunction EmptyStateDescription({ className, ...props }: React.ComponentProps<'p'>) {\n  return (\n    <p\n      data-slot=\"empty-state-description\"\n      className={cn('mt-1 max-w-md text-sm leading-5 text-muted-foreground', className)}\n      {...props}\n    />\n  );\n}\n\nfunction EmptyStateActions({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"empty-state-actions\"\n      className={cn('mt-5 flex flex-wrap justify-center gap-2', className)}\n      {...props}\n    />\n  );\n}\n\nexport { EmptyState, EmptyStateActions, EmptyStateDescription, EmptyStateIcon, EmptyStateTitle };\n"],"mappings":";;;;;AAIA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,sJACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,eAAe,EAAE,WAAW,GAAG,SAAsC;CAC5E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,kHACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,gBAAgB,EAAE,WAAW,UAAU,GAAG,SAAqC;CACtF,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GAAG,yCAAyC,SAAS;EAChE,GAAI;EAEH;CACC,CAAA;AAER;AAEA,SAAS,sBAAsB,EAAE,WAAW,GAAG,SAAoC;CACjF,OACE,oBAAC,KAAD;EACE,aAAU;EACV,WAAW,GAAG,yDAAyD,SAAS;EAChF,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,kBAAkB,EAAE,WAAW,GAAG,SAAsC;CAC/E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,4CAA4C,SAAS;EACnE,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"empty-state.js","names":[],"sources":["../../src/components/empty-state.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nconst EmptyState = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(\n  function EmptyState({ className, ...props }, ref) {\n    return (\n      <div\n        ref={ref}\n        data-slot=\"empty-state\"\n        className={cn(\n          'flex min-h-64 flex-col items-center justify-center rounded-xl border border-dashed border-border-strong bg-surface-muted/60 px-6 py-10 text-center',\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\n\nconst EmptyStateIcon = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(\n  function EmptyStateIcon({ className, ...props }, ref) {\n    return (\n      <div\n        ref={ref}\n        data-slot=\"empty-state-icon\"\n        className={cn(\n          'mb-4 grid size-10 place-items-center rounded-lg border border-brand/15 bg-brand-soft text-brand [&_svg]:size-5',\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\n\nconst EmptyStateTitle = React.forwardRef<HTMLHeadingElement, React.ComponentProps<'h3'>>(\n  function EmptyStateTitle({ className, children, ...props }, ref) {\n    return (\n      <h3\n        ref={ref}\n        data-slot=\"empty-state-title\"\n        className={cn('text-sm font-semibold text-foreground', className)}\n        {...props}\n      >\n        {children}\n      </h3>\n    );\n  },\n);\n\nconst EmptyStateDescription = React.forwardRef<HTMLParagraphElement, React.ComponentProps<'p'>>(\n  function EmptyStateDescription({ className, ...props }, ref) {\n    return (\n      <p\n        ref={ref}\n        data-slot=\"empty-state-description\"\n        className={cn('mt-1 max-w-md text-sm leading-5 text-muted-foreground', className)}\n        {...props}\n      />\n    );\n  },\n);\n\nconst EmptyStateActions = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(\n  function EmptyStateActions({ className, ...props }, ref) {\n    return (\n      <div\n        ref={ref}\n        data-slot=\"empty-state-actions\"\n        className={cn('mt-5 flex flex-wrap justify-center gap-2', className)}\n        {...props}\n      />\n    );\n  },\n);\n\nexport { EmptyState, EmptyStateActions, EmptyStateDescription, EmptyStateIcon, EmptyStateTitle };\n"],"mappings":";;;;;AAIA,IAAM,aAAa,MAAM,WACvB,SAAS,WAAW,EAAE,WAAW,GAAG,SAAS,KAAK;CAChD,OACE,oBAAC,OAAD;EACO;EACL,aAAU;EACV,WAAW,GACT,sJACA,SACF;EACA,GAAI;CACL,CAAA;AAEL,CACF;AAEA,IAAM,iBAAiB,MAAM,WAC3B,SAAS,eAAe,EAAE,WAAW,GAAG,SAAS,KAAK;CACpD,OACE,oBAAC,OAAD;EACO;EACL,aAAU;EACV,WAAW,GACT,kHACA,SACF;EACA,GAAI;CACL,CAAA;AAEL,CACF;AAEA,IAAM,kBAAkB,MAAM,WAC5B,SAAS,gBAAgB,EAAE,WAAW,UAAU,GAAG,SAAS,KAAK;CAC/D,OACE,oBAAC,MAAD;EACO;EACL,aAAU;EACV,WAAW,GAAG,yCAAyC,SAAS;EAChE,GAAI;EAEH;CACC,CAAA;AAER,CACF;AAEA,IAAM,wBAAwB,MAAM,WAClC,SAAS,sBAAsB,EAAE,WAAW,GAAG,SAAS,KAAK;CAC3D,OACE,oBAAC,KAAD;EACO;EACL,aAAU;EACV,WAAW,GAAG,yDAAyD,SAAS;EAChF,GAAI;CACL,CAAA;AAEL,CACF;AAEA,IAAM,oBAAoB,MAAM,WAC9B,SAAS,kBAAkB,EAAE,WAAW,GAAG,SAAS,KAAK;CACvD,OACE,oBAAC,OAAD;EACO;EACL,aAAU;EACV,WAAW,GAAG,4CAA4C,SAAS;EACnE,GAAI;CACL,CAAA;AAEL,CACF"}

package/dist/components/error-summary.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+export interface ErrorSummaryItem {
+    /** The id of the field with the problem; the entry links to it. */
+    id: string;
+    message: React.ReactNode;
+}
+export interface ErrorSummaryProps extends Omit<React.ComponentProps<'div'>, 'children' | 'title' | 'onSelect'> {
+    /** Nothing renders while this is empty. */
+    errors: ErrorSummaryItem[];
+    title?: React.ReactNode;
+    /** Called with the field id when an entry is chosen, after the field is focused. */
+    onSelect?: (id: string) => void;
+}
+/**
+ * The errors of a long form, at the top of it after a failed submit, each a
+ * link to its field. Focus moves here when errors appear, so a screen reader
+ * hears the list; choosing an entry focuses the field and scrolls it into
+ * view.
+ */
+declare const ErrorSummary: React.ForwardRefExoticComponent<Omit<ErrorSummaryProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { ErrorSummary };

package/dist/components/error-summary.js

@@ -0,0 +1,62 @@
+"use client";
+import { cn, focusRingClasses } from "../lib/utils.js";
+import { Alert, AlertDescription, AlertTitle } from "./alert.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import AlertCircle from "@burtson-labs/icons/react/alert-circle";
+//#region src/components/error-summary.tsx
+/**
+* The errors of a long form, at the top of it after a failed submit, each a
+* link to its field. Focus moves here when errors appear, so a screen reader
+* hears the list; choosing an entry focuses the field and scrolls it into
+* view.
+*/
+var ErrorSummary = React.forwardRef(function ErrorSummary({ errors, title = "Fix these to continue", onSelect, className, ...props }, ref) {
+	const local = React.useRef(null);
+	const count = errors.length;
+	React.useEffect(() => {
+		if (count) local.current?.focus();
+	}, [count]);
+	if (!count) return null;
+	return /* @__PURE__ */ jsx("div", {
+		ref: (node) => {
+			local.current = node;
+			if (typeof ref === "function") ref(node);
+			else if (ref) ref.current = node;
+		},
+		tabIndex: -1,
+		"data-slot": "error-summary",
+		className: cn("outline-none", className),
+		...props,
+		children: /* @__PURE__ */ jsxs(Alert, {
+			variant: "destructive",
+			children: [
+				/* @__PURE__ */ jsx(AlertCircle, {}),
+				/* @__PURE__ */ jsx(AlertTitle, { children: title }),
+				/* @__PURE__ */ jsx(AlertDescription, { children: /* @__PURE__ */ jsx("ul", {
+					className: "grid gap-0.5",
+					children: errors.map(({ id, message }) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", {
+						href: `#${id}`,
+						className: cn("rounded-xs text-foreground underline underline-offset-2 hover:text-destructive", focusRingClasses),
+						onClick: (event) => {
+							const el = document.getElementById(id);
+							if (!el) return;
+							event.preventDefault();
+							el.focus();
+							el.scrollIntoView?.({
+								block: "center",
+								behavior: typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth"
+							});
+							onSelect?.(id);
+						},
+						children: message
+					}) }, id))
+				}) })
+			]
+		})
+	});
+});
+//#endregion
+export { ErrorSummary };
+
+//# sourceMappingURL=error-summary.js.map

package/dist/components/error-summary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"error-summary.js","names":[],"sources":["../../src/components/error-summary.tsx"],"sourcesContent":["import AlertCircle from '@burtson-labs/icons/react/alert-circle';\nimport * as React from 'react';\n\nimport { cn, focusRingClasses } from '../lib/utils';\n\nimport { Alert, AlertDescription, AlertTitle } from './alert';\n\nexport interface ErrorSummaryItem {\n  /** The id of the field with the problem; the entry links to it. */\n  id: string;\n  message: React.ReactNode;\n}\n\nexport interface ErrorSummaryProps extends Omit<\n  React.ComponentProps<'div'>,\n  'children' | 'title' | 'onSelect'\n> {\n  /** Nothing renders while this is empty. */\n  errors: ErrorSummaryItem[];\n  title?: React.ReactNode;\n  /** Called with the field id when an entry is chosen, after the field is focused. */\n  onSelect?: (id: string) => void;\n}\n\n/**\n * The errors of a long form, at the top of it after a failed submit, each a\n * link to its field. Focus moves here when errors appear, so a screen reader\n * hears the list; choosing an entry focuses the field and scrolls it into\n * view.\n */\nconst ErrorSummary = React.forwardRef<HTMLDivElement, ErrorSummaryProps>(function ErrorSummary(\n  { errors, title = 'Fix these to continue', onSelect, className, ...props },\n  ref,\n) {\n  const local = React.useRef<HTMLDivElement | null>(null);\n  const count = errors.length;\n  React.useEffect(() => {\n    if (count) local.current?.focus();\n  }, [count]);\n  if (!count) return null;\n  return (\n    <div\n      ref={(node) => {\n        local.current = node;\n        if (typeof ref === 'function') ref(node);\n        else if (ref) ref.current = node;\n      }}\n      tabIndex={-1}\n      data-slot=\"error-summary\"\n      className={cn('outline-none', className)}\n      {...props}\n    >\n      <Alert variant=\"destructive\">\n        <AlertCircle />\n        <AlertTitle>{title}</AlertTitle>\n        <AlertDescription>\n          <ul className=\"grid gap-0.5\">\n            {errors.map(({ id, message }) => (\n              <li key={id}>\n                <a\n                  href={`#${id}`}\n                  className={cn(\n                    'rounded-xs text-foreground underline underline-offset-2 hover:text-destructive',\n                    focusRingClasses,\n                  )}\n                  onClick={(event) => {\n                    const el = document.getElementById(id);\n                    if (!el) return;\n                    event.preventDefault();\n                    el.focus();\n                    el.scrollIntoView?.({\n                      block: 'center',\n                      behavior:\n                        typeof matchMedia === 'function' &&\n                        matchMedia('(prefers-reduced-motion: reduce)').matches\n                          ? 'auto'\n                          : 'smooth',\n                    });\n                    onSelect?.(id);\n                  }}\n                >\n                  {message}\n                </a>\n              </li>\n            ))}\n          </ul>\n        </AlertDescription>\n      </Alert>\n    </div>\n  );\n});\n\nexport { ErrorSummary };\n"],"mappings":";;;;;;;;;;;;;AA8BA,IAAM,eAAe,MAAM,WAA8C,SAAS,aAChF,EAAE,QAAQ,QAAQ,yBAAyB,UAAU,WAAW,GAAG,SACnE,KACA;CACA,MAAM,QAAQ,MAAM,OAA8B,IAAI;CACtD,MAAM,QAAQ,OAAO;CACrB,MAAM,gBAAgB;EACpB,IAAI,OAAO,MAAM,SAAS,MAAM;CAClC,GAAG,CAAC,KAAK,CAAC;CACV,IAAI,CAAC,OAAO,OAAO;CACnB,OACE,oBAAC,OAAD;EACE,MAAM,SAAS;GACb,MAAM,UAAU;GAChB,IAAI,OAAO,QAAQ,YAAY,IAAI,IAAI;QAClC,IAAI,KAAK,IAAI,UAAU;EAC9B;EACA,UAAU;EACV,aAAU;EACV,WAAW,GAAG,gBAAgB,SAAS;EACvC,GAAI;EAEJ,UAAA,qBAAC,OAAD;GAAO,SAAQ;GAAf,UAAA;IACE,oBAAC,aAAD,CAAc,CAAA;IACd,oBAAC,YAAD,EAAA,UAAa,MAAkB,CAAA;IAC/B,oBAAC,kBAAD,EAAA,UACE,oBAAC,MAAD;KAAI,WAAU;KACX,UAAA,OAAO,KAAK,EAAE,IAAI,cACjB,oBAAC,MAAD,EAAA,UACE,oBAAC,KAAD;MACE,MAAM,IAAI;MACV,WAAW,GACT,kFACA,gBACF;MACA,UAAU,UAAU;OAClB,MAAM,KAAK,SAAS,eAAe,EAAE;OACrC,IAAI,CAAC,IAAI;OACT,MAAM,eAAe;OACrB,GAAG,MAAM;OACT,GAAG,iBAAiB;QAClB,OAAO;QACP,UACE,OAAO,eAAe,cACtB,WAAW,kCAAkC,CAAC,CAAC,UAC3C,SACA;OACR,CAAC;OACD,WAAW,EAAE;MACf;MAEC,UAAA;KACA,CAAA,EACD,GAzBK,EAyBL,CACL;IACC,CAAA,EACY,CAAA;GACb;;CACJ,CAAA;AAET,CAAC"}