@exsto/ds 0.0.1-rc.2 → 0.0.1-rc.21

package/dist/ui/src/components/ui/command/command.js

@@ -0,0 +1,118 @@
+"use client";
+import { cn } from "../../../lib/utils.js";
+import { popupItemClass } from "../../../lib/popup-list.js";
+import { ScrollArea } from "../scroll-area/scroll-area.js";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "../dialog/dialog.js";
+import { InputGroup, InputGroupAddon } from "../input-group/input-group.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { IconCheck, IconSearch } from "@tabler/icons-react";
+import { Command } from "cmdk";
+//#region ../ui/src/components/ui/command/command.tsx
+var Command$1 = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Command, {
+		"data-slot": "command",
+		className: cn("flex size-full flex-col overflow-hidden rounded-xl! bg-popover p-1 text-popover-foreground", className),
+		...props
+	});
+};
+var CommandDialog = ({ title = "Command Palette", description = "Search for a command to run...", children, className, showCloseButton = false, ...props }) => {
+	return /* @__PURE__ */ jsxs(Dialog, {
+		...props,
+		children: [/* @__PURE__ */ jsxs(DialogHeader, {
+			className: "sr-only",
+			children: [/* @__PURE__ */ jsx(DialogTitle, { children: title }), /* @__PURE__ */ jsx(DialogDescription, { children: description })]
+		}), /* @__PURE__ */ jsx(DialogContent, {
+			className: cn("top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0", className),
+			showCloseButton,
+			children
+		})]
+	});
+};
+var CommandInput = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "command-input-wrapper",
+		className: "border-b border-border p-1",
+		children: /* @__PURE__ */ jsxs(InputGroup, {
+			className: "h-8 border-transparent bg-transparent shadow-none *:data-[slot=input-group-addon]:pl-2 dark:bg-transparent",
+			children: [/* @__PURE__ */ jsx(Command.Input, {
+				"data-slot": "command-input",
+				className: cn("w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50", className),
+				...props
+			}), /* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsx(IconSearch, { className: "size-4 shrink-0 opacity-50" }) })]
+		})
+	});
+};
+/**
+* The palette's results list. The scroll container is the DS ScrollArea rather
+* than the primitive's own `overflow-y-auto`, because a list of results that
+* continues past the fold with no bar and no fade reads as a complete list. The
+* cap stays overridable: `cn` lets a caller's own `max-h-*` replace the default.
+*
+* The ScrollArea wraps the list from OUTSIDE rather than lining it: cmdk's list
+* carries `role="listbox"`, and a listbox may not contain presentation wrappers
+* (axe flags that as a critical aria-required-children violation). The options
+* have to stay direct children of the element that holds the role.
+*
+* cmdk keeps the active item in view with `scrollIntoView({ block: 'nearest' })`
+* on the item, which acts on the nearest scrollable ancestor, so that keeps
+* working now that the viewport is the one that scrolls. `scroll-py-1` goes on
+* the viewport for the same reason: it is what pads that scroll.
+*/
+var CommandList = ({ className, children, ...props }) => {
+	return /* @__PURE__ */ jsx(ScrollArea, {
+		type: "always",
+		fade: true,
+		fadeFrom: "popover",
+		className: cn("max-h-72", className),
+		viewPortClassName: "scroll-py-1",
+		children: /* @__PURE__ */ jsx(Command.List, {
+			"data-slot": "command-list",
+			className: "outline-none",
+			...props,
+			children
+		})
+	});
+};
+var CommandEmpty = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Command.Empty, {
+		"data-slot": "command-empty",
+		className: cn("py-6 text-center text-sm", className),
+		...props
+	});
+};
+var CommandGroup = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Command.Group, {
+		"data-slot": "command-group",
+		className: cn("overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground", className),
+		...props
+	});
+};
+var CommandSeparator = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Command.Separator, {
+		"data-slot": "command-separator",
+		className: cn("-mx-1 h-px bg-border", className),
+		...props
+	});
+};
+var CommandItem = ({ className, children, ...props }) => {
+	return /* @__PURE__ */ jsxs(Command.Item, {
+		"data-slot": "command-item",
+		className: cn("group/command-item", popupItemClass("cmdk"), className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(IconCheck, {
+			"data-slot": "command-item-indicator",
+			className: "mr-px ml-auto size-3.5 shrink-0 opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100"
+		})]
+	});
+};
+var CommandShortcut = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "command-shortcut",
+		className: cn("ml-auto text-xs tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground", className),
+		...props
+	});
+};
+//#endregion
+export { Command$1 as Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut };
+
+//# sourceMappingURL=command.js.map

package/dist/ui/src/components/ui/command/command.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"command.js","names":[],"sources":["../../../../../../../ui/src/components/ui/command/command.tsx"],"sourcesContent":["'use client';\n\nimport { popupItemClass } from '@edyn/ui/lib/popup-list';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { IconCheck, IconSearch } from '@tabler/icons-react';\nimport { Command as CommandPrimitive } from 'cmdk';\nimport type * as React from 'react';\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../dialog';\nimport { InputGroup, InputGroupAddon } from '../input-group';\nimport { ScrollArea } from '../scroll-area';\n\nexport const Command = ({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) => {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn('flex size-full flex-col overflow-hidden rounded-xl! bg-popover p-1 text-popover-foreground', className)}\n      {...props}\n    />\n  );\n};\n\nexport const CommandDialog = ({\n  title = 'Command Palette',\n  description = 'Search for a command to run...',\n  children,\n  className,\n  showCloseButton = false,\n  ...props\n}: Omit<React.ComponentProps<typeof Dialog>, 'children'> & {\n  title?: string;\n  description?: string;\n  className?: string;\n  showCloseButton?: boolean;\n  children: React.ReactNode;\n}) => {\n  return (\n    <Dialog {...props}>\n      <DialogHeader className=\"sr-only\">\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      <DialogContent className={cn('top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0', className)} showCloseButton={showCloseButton}>\n        {children}\n      </DialogContent>\n    </Dialog>\n  );\n};\n\nexport const CommandInput = ({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>) => {\n  return (\n    // Borderless, with a hairline under it: a grey block around the search field\n    // reads as a second surface inside the popup, and the caret already says\n    // where typing goes.\n    <div data-slot=\"command-input-wrapper\" className=\"border-b border-border p-1\">\n      <InputGroup className=\"h-8 border-transparent bg-transparent shadow-none *:data-[slot=input-group-addon]:pl-2 dark:bg-transparent\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn('w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50', className)}\n          {...props}\n        />\n        <InputGroupAddon>\n          <IconSearch className=\"size-4 shrink-0 opacity-50\" />\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  );\n};\n\n/**\n * The palette's results list. The scroll container is the DS ScrollArea rather\n * than the primitive's own `overflow-y-auto`, because a list of results that\n * continues past the fold with no bar and no fade reads as a complete list. The\n * cap stays overridable: `cn` lets a caller's own `max-h-*` replace the default.\n *\n * The ScrollArea wraps the list from OUTSIDE rather than lining it: cmdk's list\n * carries `role=\"listbox\"`, and a listbox may not contain presentation wrappers\n * (axe flags that as a critical aria-required-children violation). The options\n * have to stay direct children of the element that holds the role.\n *\n * cmdk keeps the active item in view with `scrollIntoView({ block: 'nearest' })`\n * on the item, which acts on the nearest scrollable ancestor, so that keeps\n * working now that the viewport is the one that scrolls. `scroll-py-1` goes on\n * the viewport for the same reason: it is what pads that scroll.\n */\nexport const CommandList = ({ className, children, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) => {\n  return (\n    <ScrollArea type=\"always\" fade fadeFrom=\"popover\" className={cn('max-h-72', className)} viewPortClassName=\"scroll-py-1\">\n      <CommandPrimitive.List data-slot=\"command-list\" className=\"outline-none\" {...props}>\n        {children}\n      </CommandPrimitive.List>\n    </ScrollArea>\n  );\n};\n\nexport const CommandEmpty = ({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) => {\n  return <CommandPrimitive.Empty data-slot=\"command-empty\" className={cn('py-6 text-center text-sm', className)} {...props} />;\n};\n\nexport const CommandGroup = ({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>) => {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"command-group\"\n      className={cn(\n        'overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const CommandSeparator = ({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Separator>) => {\n  return <CommandPrimitive.Separator data-slot=\"command-separator\" className={cn('-mx-1 h-px bg-border', className)} {...props} />;\n};\n\nexport const CommandItem = ({ className, children, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) => {\n  return (\n    <CommandPrimitive.Item data-slot=\"command-item\" className={cn('group/command-item', popupItemClass('cmdk'), className)} {...props}>\n      {children}\n      {/* The check keeps the end of the item whether it is shown or not, except\n          where a shortcut has it, so the list does not shift as the choice moves. */}\n      <IconCheck\n        data-slot=\"command-item-indicator\"\n        className=\"mr-px ml-auto size-3.5 shrink-0 opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100\"\n      />\n    </CommandPrimitive.Item>\n  );\n};\n\nexport const CommandShortcut = ({ className, ...props }: React.ComponentProps<'span'>) => {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn('ml-auto text-xs tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground', className)}\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;AAWA,IAAa,aAAW,EAAE,WAAW,GAAG,YAA2D;CACjG,OACE,oBAAC,SAAD;EACE,aAAU;EACV,WAAW,GAAG,8FAA8F,SAAS;EACrH,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,iBAAiB,EAC5B,QAAQ,mBACR,cAAc,kCACd,UACA,WACA,kBAAkB,OAClB,GAAG,YAOC;CACJ,OACE,qBAAC,QAAD;EAAQ,GAAI;EAAZ,UAAA,CACE,qBAAC,cAAD;GAAc,WAAU;GAAxB,UAAA,CACE,oBAAC,aAAD,EAAA,UAAc,MAAmB,CAAA,GACjC,oBAAC,mBAAD,EAAA,UAAoB,YAA+B,CAAA,CACvC;EACd,CAAA,GAAA,oBAAC,eAAD;GAAe,WAAW,GAAG,yDAAyD,SAAS;GAAoB;GAChH;EACY,CAAA,CACT;;AAEZ;AAEA,IAAa,gBAAgB,EAAE,WAAW,GAAG,YAAiE;CAC5G,OAIE,oBAAC,OAAD;EAAK,aAAU;EAAwB,WAAU;EAC/C,UAAA,qBAAC,YAAD;GAAY,WAAU;GAAtB,UAAA,CACE,oBAAC,QAAiB,OAAlB;IACE,aAAU;IACV,WAAW,GAAG,iFAAiF,SAAS;IACxG,GAAI;GACL,CAAA,GACD,oBAAC,iBAAD,EAAA,UACE,oBAAC,YAAD,EAAY,WAAU,6BAA8B,CAAA,EACrC,CAAA,CACP;;CACT,CAAA;AAET;;;;;;;;;;;;;;;;;AAkBA,IAAa,eAAe,EAAE,WAAW,UAAU,GAAG,YAAgE;CACpH,OACE,oBAAC,YAAD;EAAY,MAAK;EAAS,MAAA;EAAK,UAAS;EAAU,WAAW,GAAG,YAAY,SAAS;EAAG,mBAAkB;EACxG,UAAA,oBAAC,QAAiB,MAAlB;GAAuB,aAAU;GAAe,WAAU;GAAe,GAAI;GAC1E;EACoB,CAAA;CACb,CAAA;AAEhB;AAEA,IAAa,gBAAgB,EAAE,WAAW,GAAG,YAAiE;CAC5G,OAAO,oBAAC,QAAiB,OAAlB;EAAwB,aAAU;EAAgB,WAAW,GAAG,4BAA4B,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC7H;AAEA,IAAa,gBAAgB,EAAE,WAAW,GAAG,YAAiE;CAC5G,OACE,oBAAC,QAAiB,OAAlB;EACE,aAAU;EACV,WAAW,GACT,+NACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,oBAAoB,EAAE,WAAW,GAAG,YAAqE;CACpH,OAAO,oBAAC,QAAiB,WAAlB;EAA4B,aAAU;EAAoB,WAAW,GAAG,wBAAwB,SAAS;EAAG,GAAI;CAAQ,CAAA;AACjI;AAEA,IAAa,eAAe,EAAE,WAAW,UAAU,GAAG,YAAgE;CACpH,OACE,qBAAC,QAAiB,MAAlB;EAAuB,aAAU;EAAe,WAAW,GAAG,sBAAsB,eAAe,MAAM,GAAG,SAAS;EAAG,GAAI;EAA5H,UAAA,CACG,UAGD,oBAAC,WAAD;GACE,aAAU;GACV,WAAU;EACX,CAAA,CACoB;;AAE3B;AAEA,IAAa,mBAAmB,EAAE,WAAW,GAAG,YAA0C;CACxF,OACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GAAG,0GAA0G,SAAS;EACjI,GAAI;CACL,CAAA;AAEL"}

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

@@ -3,7 +3,7 @@ import type * as React from 'react';
 export declare const ContextMenu: ({ ...props }: ContextMenuPrimitive.Root.Props) => React.JSX.Element;
 export declare const ContextMenuPortal: ({ ...props }: ContextMenuPrimitive.Portal.Props) => React.JSX.Element;
 export declare const ContextMenuTrigger: ({ className, ...props }: ContextMenuPrimitive.Trigger.Props) => React.JSX.Element;
-export declare const ContextMenuContent: ({ className, align, alignOffset, side, sideOffset, ...props }: ContextMenuPrimitive.Popup.Props & Pick<ContextMenuPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">) => React.JSX.Element;
+export declare const ContextMenuContent: ({ className, children, align, alignOffset, side, sideOffset, ...props }: ContextMenuPrimitive.Popup.Props & Pick<ContextMenuPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">) => React.JSX.Element;
 export declare const ContextMenuGroup: ({ ...props }: ContextMenuPrimitive.Group.Props) => React.JSX.Element;
 export declare const ContextMenuLabel: ({ className, inset, ...props }: ContextMenuPrimitive.GroupLabel.Props & {
     inset?: boolean;

package/dist/ui/src/components/ui/context-menu/context-menu.js

@@ -0,0 +1,145 @@
+"use client";
+import { cn } from "../../../lib/utils.js";
+import { useExposedFocusGuards } from "../../../lib/focus-guards.js";
+import { POPUP_FRAME_CLASS, POPUP_GROUP_LABEL_CLASS, POPUP_ITEM_INDICATOR_CLASS, POPUP_LAYER_CLASS, POPUP_LIST_WIDTH_CLASS, popupItemClass } from "../../../lib/popup-list.js";
+import { PopupListScroll } from "../scroll-area/popup-list-scroll.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { IconCheck, IconChevronRight } from "@tabler/icons-react";
+import { ContextMenu } from "@base-ui/react/context-menu";
+//#region ../ui/src/components/ui/context-menu/context-menu.tsx
+var ContextMenu$1 = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(ContextMenu.Root, {
+		"data-slot": "context-menu",
+		...props
+	});
+};
+var ContextMenuPortal = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(ContextMenu.Portal, {
+		"data-slot": "context-menu-portal",
+		...props
+	});
+};
+var ContextMenuTrigger = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(ContextMenu.Trigger, {
+		"data-slot": "context-menu-trigger",
+		className: cn("select-none", className),
+		...props
+	});
+};
+var ContextMenuContent = ({ className, children, align = "start", alignOffset = 4, side = "right", sideOffset = 0, ...props }) => {
+	useExposedFocusGuards();
+	return /* @__PURE__ */ jsx(ContextMenu.Portal, { children: /* @__PURE__ */ jsx(ContextMenu.Positioner, {
+		className: cn(POPUP_LAYER_CLASS, "isolate outline-none"),
+		align,
+		alignOffset,
+		side,
+		sideOffset,
+		children: /* @__PURE__ */ jsx(ContextMenu.Popup, {
+			"data-slot": "context-menu-content",
+			className: cn("z-50 flex max-h-(--available-height) origin-(--transform-origin) flex-col overflow-hidden duration-100", POPUP_FRAME_CLASS, POPUP_LIST_WIDTH_CLASS, "data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", "motion-reduce:animate-none", className),
+			...props,
+			children: /* @__PURE__ */ jsx(PopupListScroll, {
+				focusable: false,
+				children: /* @__PURE__ */ jsx("div", {
+					className: "px-1",
+					children
+				})
+			})
+		})
+	}) });
+};
+var ContextMenuGroup = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(ContextMenu.Group, {
+		"data-slot": "context-menu-group",
+		...props
+	});
+};
+var ContextMenuLabel = ({ className, inset, ...props }) => {
+	return /* @__PURE__ */ jsx(ContextMenu.GroupLabel, {
+		"data-slot": "context-menu-label",
+		"data-inset": inset,
+		className: cn(POPUP_GROUP_LABEL_CLASS, "data-[inset=true]:pl-7", className),
+		...props
+	});
+};
+var ContextMenuItem = ({ className, inset, variant = "default", ...props }) => {
+	return /* @__PURE__ */ jsx(ContextMenu.Item, {
+		"data-slot": "context-menu-item",
+		"data-inset": inset,
+		"data-variant": variant,
+		className: cn("group/context-menu-item", popupItemClass(), "data-[inset=true]:pl-7", "data-[variant=destructive]:text-destructive data-[variant=destructive]:[&>svg]:text-destructive", "data-[variant=destructive]:data-highlighted:bg-destructive/10 data-[variant=destructive]:data-highlighted:text-destructive", className),
+		...props
+	});
+};
+var ContextMenuSub = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(ContextMenu.SubmenuRoot, {
+		"data-slot": "context-menu-sub",
+		...props
+	});
+};
+var ContextMenuSubTrigger = ({ className, inset, children, ...props }) => {
+	return /* @__PURE__ */ jsxs(ContextMenu.SubmenuTrigger, {
+		"data-slot": "context-menu-sub-trigger",
+		"data-inset": inset,
+		className: cn(popupItemClass(), "data-[inset=true]:pl-7 data-popup-open:bg-foreground/6 data-popup-open:[&>svg]:text-foreground", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(IconChevronRight, { className: "ml-auto" })]
+	});
+};
+var ContextMenuSubContent = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(ContextMenuContent, {
+		"data-slot": "context-menu-sub-content",
+		className: "shadow-lg",
+		side: "right",
+		...props
+	});
+};
+var ContextMenuCheckboxItem = ({ className, children, checked, inset, ...props }) => {
+	return /* @__PURE__ */ jsxs(ContextMenu.CheckboxItem, {
+		"data-slot": "context-menu-checkbox-item",
+		"data-inset": inset,
+		className: cn(popupItemClass("base-ui", true), "data-checked:font-medium data-[inset=true]:pl-7", className),
+		checked,
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: POPUP_ITEM_INDICATOR_CLASS,
+			children: /* @__PURE__ */ jsx(ContextMenu.CheckboxItemIndicator, { children: /* @__PURE__ */ jsx(IconCheck, {}) })
+		}), children]
+	});
+};
+var ContextMenuRadioGroup = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(ContextMenu.RadioGroup, {
+		"data-slot": "context-menu-radio-group",
+		...props
+	});
+};
+var ContextMenuRadioItem = ({ className, children, inset, ...props }) => {
+	return /* @__PURE__ */ jsxs(ContextMenu.RadioItem, {
+		"data-slot": "context-menu-radio-item",
+		"data-inset": inset,
+		className: cn(popupItemClass("base-ui", true), "data-checked:font-medium data-[inset=true]:pl-7", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: POPUP_ITEM_INDICATOR_CLASS,
+			children: /* @__PURE__ */ jsx(ContextMenu.RadioItemIndicator, { children: /* @__PURE__ */ jsx(IconCheck, {}) })
+		}), children]
+	});
+};
+var ContextMenuSeparator = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(ContextMenu.Separator, {
+		"data-slot": "context-menu-separator",
+		className: cn("-mx-1 my-1 h-px bg-border", className),
+		...props
+	});
+};
+var ContextMenuShortcut = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "context-menu-shortcut",
+		className: cn("ml-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground", className),
+		...props
+	});
+};
+//#endregion
+export { ContextMenu$1 as ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger };
+
+//# sourceMappingURL=context-menu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"context-menu.js","names":[],"sources":["../../../../../../../ui/src/components/ui/context-menu/context-menu.tsx"],"sourcesContent":["'use client';\n\nimport { ContextMenu as ContextMenuPrimitive } from '@base-ui/react/context-menu';\nimport { useExposedFocusGuards } from '@edyn/ui/lib/focus-guards';\nimport {\n  POPUP_FRAME_CLASS,\n  POPUP_GROUP_LABEL_CLASS,\n  POPUP_ITEM_INDICATOR_CLASS,\n  POPUP_LAYER_CLASS,\n  POPUP_LIST_WIDTH_CLASS,\n  popupItemClass,\n} from '@edyn/ui/lib/popup-list';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { IconCheck, IconChevronRight } from '@tabler/icons-react';\nimport type * as React from 'react';\nimport { PopupListScroll } from '../scroll-area';\n\nexport const ContextMenu = ({ ...props }: ContextMenuPrimitive.Root.Props) => {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />;\n};\n\nexport const ContextMenuPortal = ({ ...props }: ContextMenuPrimitive.Portal.Props) => {\n  return <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />;\n};\n\nexport const ContextMenuTrigger = ({ className, ...props }: ContextMenuPrimitive.Trigger.Props) => {\n  return <ContextMenuPrimitive.Trigger data-slot=\"context-menu-trigger\" className={cn('select-none', className)} {...props} />;\n};\n\nexport const ContextMenuContent = ({\n  className,\n  children,\n  align = 'start',\n  alignOffset = 4,\n  side = 'right',\n  sideOffset = 0,\n  ...props\n}: ContextMenuPrimitive.Popup.Props & Pick<ContextMenuPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>) => {\n  useExposedFocusGuards();\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Positioner\n        className={cn(POPUP_LAYER_CLASS, 'isolate outline-none')}\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <ContextMenuPrimitive.Popup\n          data-slot=\"context-menu-content\"\n          className={cn(\n            'z-50 flex max-h-(--available-height) origin-(--transform-origin) flex-col overflow-hidden duration-100',\n            POPUP_FRAME_CLASS,\n            POPUP_LIST_WIDTH_CLASS,\n            'data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n            'motion-reduce:animate-none',\n            className,\n          )}\n          {...props}\n        >\n          {/* A menu that outgrows the window scrolls in a ScrollArea like every other popup list, not in a native\n              scroll box; the air above and below the rows is POPUP_LIST_HEIGHT_CLASS's margin, so the content takes no vertical\n              padding. */}\n          <PopupListScroll focusable={false}>\n            <div className=\"px-1\">{children}</div>\n          </PopupListScroll>\n        </ContextMenuPrimitive.Popup>\n      </ContextMenuPrimitive.Positioner>\n    </ContextMenuPrimitive.Portal>\n  );\n};\n\nexport const ContextMenuGroup = ({ ...props }: ContextMenuPrimitive.Group.Props) => {\n  return <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />;\n};\n\nexport const ContextMenuLabel = ({\n  className,\n  inset,\n  ...props\n}: ContextMenuPrimitive.GroupLabel.Props & {\n  inset?: boolean;\n}) => {\n  return (\n    <ContextMenuPrimitive.GroupLabel\n      data-slot=\"context-menu-label\"\n      data-inset={inset}\n      className={cn(POPUP_GROUP_LABEL_CLASS, 'data-[inset=true]:pl-7', className)}\n      {...props}\n    />\n  );\n};\n\nexport const ContextMenuItem = ({\n  className,\n  inset,\n  variant = 'default',\n  ...props\n}: ContextMenuPrimitive.Item.Props & {\n  inset?: boolean;\n  variant?: 'default' | 'destructive';\n}) => {\n  return (\n    <ContextMenuPrimitive.Item\n      data-slot=\"context-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        'group/context-menu-item',\n        popupItemClass(),\n        'data-[inset=true]:pl-7',\n        // A destructive item keeps its own colour, and its own highlight with it, as in DropdownMenu.\n        'data-[variant=destructive]:text-destructive data-[variant=destructive]:[&>svg]:text-destructive',\n        'data-[variant=destructive]:data-highlighted:bg-destructive/10 data-[variant=destructive]:data-highlighted:text-destructive',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const ContextMenuSub = ({ ...props }: ContextMenuPrimitive.SubmenuRoot.Props) => {\n  return <ContextMenuPrimitive.SubmenuRoot data-slot=\"context-menu-sub\" {...props} />;\n};\n\nexport const ContextMenuSubTrigger = ({\n  className,\n  inset,\n  children,\n  ...props\n}: ContextMenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean;\n}) => {\n  return (\n    <ContextMenuPrimitive.SubmenuTrigger\n      data-slot=\"context-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        popupItemClass(),\n        // An open submenu holds its trigger in the highlight while the pointer is down in its panel.\n        'data-[inset=true]:pl-7 data-popup-open:bg-foreground/6 data-popup-open:[&>svg]:text-foreground',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <IconChevronRight className=\"ml-auto\" />\n    </ContextMenuPrimitive.SubmenuTrigger>\n  );\n};\n\nexport const ContextMenuSubContent = ({ ...props }: React.ComponentProps<typeof ContextMenuContent>) => {\n  return <ContextMenuContent data-slot=\"context-menu-sub-content\" className=\"shadow-lg\" side=\"right\" {...props} />;\n};\n\nexport const ContextMenuCheckboxItem = ({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: ContextMenuPrimitive.CheckboxItem.Props & {\n  inset?: boolean;\n}) => {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      data-inset={inset}\n      className={cn(popupItemClass('base-ui', true), 'data-checked:font-medium data-[inset=true]:pl-7', className)}\n      checked={checked}\n      {...props}\n    >\n      <span className={POPUP_ITEM_INDICATOR_CLASS}>\n        <ContextMenuPrimitive.CheckboxItemIndicator>\n          <IconCheck />\n        </ContextMenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.CheckboxItem>\n  );\n};\n\nexport const ContextMenuRadioGroup = ({ ...props }: ContextMenuPrimitive.RadioGroup.Props) => {\n  return <ContextMenuPrimitive.RadioGroup data-slot=\"context-menu-radio-group\" {...props} />;\n};\n\nexport const ContextMenuRadioItem = ({\n  className,\n  children,\n  inset,\n  ...props\n}: ContextMenuPrimitive.RadioItem.Props & {\n  inset?: boolean;\n}) => {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot=\"context-menu-radio-item\"\n      data-inset={inset}\n      className={cn(popupItemClass('base-ui', true), 'data-checked:font-medium data-[inset=true]:pl-7', className)}\n      {...props}\n    >\n      <span className={POPUP_ITEM_INDICATOR_CLASS}>\n        <ContextMenuPrimitive.RadioItemIndicator>\n          <IconCheck />\n        </ContextMenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.RadioItem>\n  );\n};\n\nexport const ContextMenuSeparator = ({ className, ...props }: ContextMenuPrimitive.Separator.Props) => {\n  return <ContextMenuPrimitive.Separator data-slot=\"context-menu-separator\" className={cn('-mx-1 my-1 h-px bg-border', className)} {...props} />;\n};\n\nexport const 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 group-focus/context-menu-item:text-accent-foreground', className)}\n      {...props}\n    />\n  );\n};\n"],"mappings":"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"}

package/dist/ui/src/components/ui/dialog/dialog.js

@@ -0,0 +1,94 @@
+import { cn } from "../../../lib/utils.js";
+import { Button } from "../button/button.js";
+import { useExposedFocusGuards } from "../../../lib/focus-guards.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { IconX } from "@tabler/icons-react";
+import { Dialog } from "@base-ui/react/dialog";
+//#region ../ui/src/components/ui/dialog/dialog.tsx
+var Dialog$1 = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Dialog.Root, {
+		"data-slot": "dialog",
+		...props
+	});
+};
+var DialogTrigger = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Dialog.Trigger, {
+		"data-slot": "dialog-trigger",
+		...props
+	});
+};
+var DialogPortal = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Dialog.Portal, {
+		"data-slot": "dialog-portal",
+		...props
+	});
+};
+var DialogClose = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Dialog.Close, {
+		"data-slot": "dialog-close",
+		...props
+	});
+};
+var DialogOverlay = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Dialog.Backdrop, {
+		"data-slot": "dialog-overlay",
+		className: cn("fixed inset-0 isolate z-50 bg-overlay duration-100 motion-reduce:animate-none supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0", className),
+		...props
+	});
+};
+var DialogContent = ({ className, children, showCloseButton = true, ...props }) => {
+	useExposedFocusGuards();
+	return /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsxs(Dialog.Popup, {
+		"data-slot": "dialog-content",
+		className: cn("fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 motion-reduce:animate-none outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
+		...props,
+		children: [children, showCloseButton && /* @__PURE__ */ jsxs(Dialog.Close, {
+			"data-slot": "dialog-close",
+			render: /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				className: "absolute top-2 right-2",
+				size: "icon-sm"
+			}),
+			children: [/* @__PURE__ */ jsx(IconX, {}), /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: "Close"
+			})]
+		})]
+	})] });
+};
+var DialogHeader = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dialog-header",
+		className: cn("flex flex-col gap-2", className),
+		...props
+	});
+};
+var DialogFooter = ({ className, showCloseButton = false, children, ...props }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "dialog-footer",
+		className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className),
+		...props,
+		children: [children, showCloseButton && /* @__PURE__ */ jsx(Dialog.Close, {
+			render: /* @__PURE__ */ jsx(Button, { variant: "outline" }),
+			children: "Close"
+		})]
+	});
+};
+var DialogTitle = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Dialog.Title, {
+		"data-slot": "dialog-title",
+		className: cn("text-base leading-none font-medium", className),
+		...props
+	});
+};
+var DialogDescription = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Dialog.Description, {
+		"data-slot": "dialog-description",
+		className: cn("text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground", className),
+		...props
+	});
+};
+//#endregion
+export { Dialog$1 as Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger };
+
+//# sourceMappingURL=dialog.js.map

package/dist/ui/src/components/ui/dialog/dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.js","names":[],"sources":["../../../../../../../ui/src/components/ui/dialog/dialog.tsx"],"sourcesContent":["import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';\nimport { useExposedFocusGuards } from '@edyn/ui/lib/focus-guards';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { IconX } from '@tabler/icons-react';\nimport type * as React from 'react';\nimport { Button } from '../button';\n\nexport const Dialog = ({ ...props }: DialogPrimitive.Root.Props) => {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />;\n};\n\nexport const DialogTrigger = ({ ...props }: DialogPrimitive.Trigger.Props) => {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />;\n};\n\nexport const DialogPortal = ({ ...props }: DialogPrimitive.Portal.Props) => {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />;\n};\n\nexport const DialogClose = ({ ...props }: DialogPrimitive.Close.Props) => {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />;\n};\n\nexport const DialogOverlay = ({ className, ...props }: DialogPrimitive.Backdrop.Props) => {\n  return (\n    <DialogPrimitive.Backdrop\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        'fixed inset-0 isolate z-50 bg-overlay duration-100 motion-reduce:animate-none supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const DialogContent = ({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: DialogPrimitive.Popup.Props & {\n  showCloseButton?: boolean;\n}) => {\n  useExposedFocusGuards();\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Popup\n        data-slot=\"dialog-content\"\n        className={cn(\n          'fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 motion-reduce:animate-none outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close data-slot=\"dialog-close\" render={<Button variant=\"ghost\" className=\"absolute top-2 right-2\" size=\"icon-sm\" />}>\n            <IconX />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Popup>\n    </DialogPortal>\n  );\n};\n\nexport const DialogHeader = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"dialog-header\" className={cn('flex flex-col gap-2', className)} {...props} />;\n};\n\nexport const DialogFooter = ({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<'div'> & {\n  showCloseButton?: boolean;\n}) => {\n  return (\n    <div data-slot=\"dialog-footer\" className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)} {...props}>\n      {children}\n      {showCloseButton && <DialogPrimitive.Close render={<Button variant=\"outline\" />}>Close</DialogPrimitive.Close>}\n    </div>\n  );\n};\n\nexport const DialogTitle = ({ className, ...props }: DialogPrimitive.Title.Props) => {\n  return <DialogPrimitive.Title data-slot=\"dialog-title\" className={cn('text-base leading-none font-medium', className)} {...props} />;\n};\n\nexport const DialogDescription = ({ className, ...props }: DialogPrimitive.Description.Props) => {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn('text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground', className)}\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;;;;;AAOA,IAAa,YAAU,EAAE,GAAG,YAAwC;CAClE,OAAO,oBAAC,OAAgB,MAAjB;EAAsB,aAAU;EAAS,GAAI;CAAQ,CAAA;AAC9D;AAEA,IAAa,iBAAiB,EAAE,GAAG,YAA2C;CAC5E,OAAO,oBAAC,OAAgB,SAAjB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;AAEA,IAAa,gBAAgB,EAAE,GAAG,YAA0C;CAC1E,OAAO,oBAAC,OAAgB,QAAjB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;AAEA,IAAa,eAAe,EAAE,GAAG,YAAyC;CACxE,OAAO,oBAAC,OAAgB,OAAjB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;AAEA,IAAa,iBAAiB,EAAE,WAAW,GAAG,YAA4C;CACxF,OACE,oBAAC,OAAgB,UAAjB;EACE,aAAU;EACV,WAAW,GACT,mNACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,iBAAiB,EAC5B,WACA,UACA,kBAAkB,MAClB,GAAG,YAGC;CACJ,sBAAsB;CACtB,OACE,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,eAAD,CAAgB,CAAA,GAChB,qBAAC,OAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GACT,qYACA,SACF;EACA,GAAI;EANN,UAAA,CAQG,UACA,mBACC,qBAAC,OAAgB,OAAjB;GAAuB,aAAU;GAAe,QAAQ,oBAAC,QAAD;IAAQ,SAAQ;IAAQ,WAAU;IAAyB,MAAK;GAAW,CAAA;GAAnI,UAAA,CACE,oBAAC,OAAD,CAAQ,CAAA,GACR,oBAAC,QAAD;IAAM,WAAU;IAAU,UAAA;GAAW,CAAA,CAChB;EAEJ,CAAA,CAAA;CACX,CAAA,CAAA,EAAA,CAAA;AAElB;AAEA,IAAa,gBAAgB,EAAE,WAAW,GAAG,YAAyC;CACpF,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAgB,WAAW,GAAG,uBAAuB,SAAS;EAAG,GAAI;CAAQ,CAAA;AACrG;AAEA,IAAa,gBAAgB,EAC3B,WACA,kBAAkB,OAClB,UACA,GAAG,YAGC;CACJ,OACE,qBAAC,OAAD;EAAK,aAAU;EAAgB,WAAW,GAAG,0DAA0D,SAAS;EAAG,GAAI;EAAvH,UAAA,CACG,UACA,mBAAmB,oBAAC,OAAgB,OAAjB;GAAuB,QAAQ,oBAAC,QAAD,EAAQ,SAAQ,UAAW,CAAA;GAAG,UAAA;EAA4B,CAAA,CAC1G;;AAET;AAEA,IAAa,eAAe,EAAE,WAAW,GAAG,YAAyC;CACnF,OAAO,oBAAC,OAAgB,OAAjB;EAAuB,aAAU;EAAe,WAAW,GAAG,sCAAsC,SAAS;EAAG,GAAI;CAAQ,CAAA;AACrI;AAEA,IAAa,qBAAqB,EAAE,WAAW,GAAG,YAA+C;CAC/F,OACE,oBAAC,OAAgB,aAAjB;EACE,aAAU;EACV,WAAW,GAAG,sGAAsG,SAAS;EAC7H,GAAI;CACL,CAAA;AAEL"}

package/dist/ui/src/components/ui/direction/direction.js

@@ -0,0 +1,2 @@
+import { DirectionProvider, useDirection } from "@base-ui/react/direction-provider";
+export { DirectionProvider, useDirection };

package/dist/ui/src/components/ui/drawer/drawer.js

@@ -0,0 +1,88 @@
+import { cn } from "../../../lib/utils.js";
+import { Button } from "../button/button.js";
+import { useExposedFocusGuards } from "../../../lib/focus-guards.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { IconX } from "@tabler/icons-react";
+import { Dialog } from "@base-ui/react/dialog";
+//#region ../ui/src/components/ui/drawer/drawer.tsx
+var Drawer = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Dialog.Root, {
+		"data-slot": "drawer",
+		...props
+	});
+};
+var DrawerTrigger = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Dialog.Trigger, {
+		"data-slot": "drawer-trigger",
+		...props
+	});
+};
+var DrawerClose = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Dialog.Close, {
+		"data-slot": "drawer-close",
+		...props
+	});
+};
+var DrawerOverlay = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Dialog.Backdrop, {
+		"data-slot": "drawer-overlay",
+		className: cn("fixed inset-0 isolate z-50 bg-overlay duration-100 motion-reduce:animate-none supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0", className),
+		...props
+	});
+};
+var DrawerContent = ({ className, children, side = "right", showCloseButton = true, ...props }) => {
+	useExposedFocusGuards();
+	return /* @__PURE__ */ jsxs(Dialog.Portal, {
+		"data-slot": "drawer-portal",
+		children: [/* @__PURE__ */ jsx(DrawerOverlay, {}), /* @__PURE__ */ jsxs(Dialog.Popup, {
+			"data-slot": "drawer-content",
+			"data-side": side,
+			className: cn("fixed z-50 flex flex-col gap-4 border-border bg-popover p-4 text-sm text-popover-foreground shadow-lg outline-none duration-100 motion-reduce:animate-none data-open:animate-in data-closed:animate-out", side === "right" && "inset-y-0 right-0 h-full w-3/4 max-w-sm border-l data-open:slide-in-from-right data-closed:slide-out-to-right", side === "left" && "inset-y-0 left-0 h-full w-3/4 max-w-sm border-r data-open:slide-in-from-left data-closed:slide-out-to-left", side === "top" && "inset-x-0 top-0 h-auto border-b data-open:slide-in-from-top data-closed:slide-out-to-top", side === "bottom" && "inset-x-0 bottom-0 h-auto border-t data-open:slide-in-from-bottom data-closed:slide-out-to-bottom", className),
+			...props,
+			children: [children, showCloseButton && /* @__PURE__ */ jsxs(Dialog.Close, {
+				"data-slot": "drawer-close",
+				render: /* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					className: "absolute top-2 right-2",
+					size: "icon-sm"
+				}),
+				children: [/* @__PURE__ */ jsx(IconX, {}), /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: "Close"
+				})]
+			})]
+		})]
+	});
+};
+var DrawerHeader = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "drawer-header",
+		className: cn("flex flex-col gap-2", className),
+		...props
+	});
+};
+var DrawerFooter = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "drawer-footer",
+		className: cn("mt-auto flex flex-col gap-2", className),
+		...props
+	});
+};
+var DrawerTitle = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Dialog.Title, {
+		"data-slot": "drawer-title",
+		className: cn("text-base leading-none font-medium", className),
+		...props
+	});
+};
+var DrawerDescription = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Dialog.Description, {
+		"data-slot": "drawer-description",
+		className: cn("text-sm text-muted-foreground", className),
+		...props
+	});
+};
+//#endregion
+export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger };
+
+//# sourceMappingURL=drawer.js.map

package/dist/ui/src/components/ui/drawer/drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.js","names":[],"sources":["../../../../../../../ui/src/components/ui/drawer/drawer.tsx"],"sourcesContent":["import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';\nimport { useExposedFocusGuards } from '@edyn/ui/lib/focus-guards';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { IconX } from '@tabler/icons-react';\nimport type * as React from 'react';\nimport { Button } from '../button';\n\n// A Drawer is a side-anchored overlay (a \"sheet\"): the same Base UI Dialog\n// primitive as Dialog, positioned against an edge with a slide animation. It is\n// click-triggered (no swipe). The swipe-gesture Drawer (Base UI's dedicated\n// drawer primitive) is a deferred enhancement.\n\nexport const Drawer = ({ ...props }: DialogPrimitive.Root.Props) => {\n  return <DialogPrimitive.Root data-slot=\"drawer\" {...props} />;\n};\n\nexport const DrawerTrigger = ({ ...props }: DialogPrimitive.Trigger.Props) => {\n  return <DialogPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />;\n};\n\nexport const DrawerClose = ({ ...props }: DialogPrimitive.Close.Props) => {\n  return <DialogPrimitive.Close data-slot=\"drawer-close\" {...props} />;\n};\n\nconst DrawerOverlay = ({ className, ...props }: DialogPrimitive.Backdrop.Props) => {\n  return (\n    <DialogPrimitive.Backdrop\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        'fixed inset-0 isolate z-50 bg-overlay duration-100 motion-reduce:animate-none supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\ntype TDrawerSide = 'left' | 'right' | 'top' | 'bottom';\n\nexport const DrawerContent = ({\n  className,\n  children,\n  side = 'right',\n  showCloseButton = true,\n  ...props\n}: DialogPrimitive.Popup.Props & {\n  side?: TDrawerSide;\n  showCloseButton?: boolean;\n}) => {\n  useExposedFocusGuards();\n  return (\n    <DialogPrimitive.Portal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DialogPrimitive.Popup\n        data-slot=\"drawer-content\"\n        data-side={side}\n        className={cn(\n          // duration-100 matches the overlay's duration so both exit animations finish\n          // together; a longer content animation leaves the overlay mounted after its\n          // fade-out ends, reverting it to full opacity (a visible flash on close).\n          // border-border is explicit because the portal renders outside .edx-root,\n          // where the scoped reset's default border color does not reach.\n          'fixed z-50 flex flex-col gap-4 border-border bg-popover p-4 text-sm text-popover-foreground shadow-lg outline-none duration-100 motion-reduce:animate-none data-open:animate-in data-closed:animate-out',\n          side === 'right' && 'inset-y-0 right-0 h-full w-3/4 max-w-sm border-l data-open:slide-in-from-right data-closed:slide-out-to-right',\n          side === 'left' && 'inset-y-0 left-0 h-full w-3/4 max-w-sm border-r data-open:slide-in-from-left data-closed:slide-out-to-left',\n          side === 'top' && 'inset-x-0 top-0 h-auto border-b data-open:slide-in-from-top data-closed:slide-out-to-top',\n          side === 'bottom' && 'inset-x-0 bottom-0 h-auto border-t data-open:slide-in-from-bottom data-closed:slide-out-to-bottom',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close data-slot=\"drawer-close\" render={<Button variant=\"ghost\" className=\"absolute top-2 right-2\" size=\"icon-sm\" />}>\n            <IconX />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Popup>\n    </DialogPrimitive.Portal>\n  );\n};\n\nexport const DrawerHeader = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"drawer-header\" className={cn('flex flex-col gap-2', className)} {...props} />;\n};\n\nexport const DrawerFooter = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"drawer-footer\" className={cn('mt-auto flex flex-col gap-2', className)} {...props} />;\n};\n\nexport const DrawerTitle = ({ className, ...props }: DialogPrimitive.Title.Props) => {\n  return <DialogPrimitive.Title data-slot=\"drawer-title\" className={cn('text-base leading-none font-medium', className)} {...props} />;\n};\n\nexport const DrawerDescription = ({ className, ...props }: DialogPrimitive.Description.Props) => {\n  return <DialogPrimitive.Description data-slot=\"drawer-description\" className={cn('text-sm text-muted-foreground', className)} {...props} />;\n};\n"],"mappings":";;;;;;;AAYA,IAAa,UAAU,EAAE,GAAG,YAAwC;CAClE,OAAO,oBAAC,OAAgB,MAAjB;EAAsB,aAAU;EAAS,GAAI;CAAQ,CAAA;AAC9D;AAEA,IAAa,iBAAiB,EAAE,GAAG,YAA2C;CAC5E,OAAO,oBAAC,OAAgB,SAAjB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;AAEA,IAAa,eAAe,EAAE,GAAG,YAAyC;CACxE,OAAO,oBAAC,OAAgB,OAAjB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;AAEA,IAAM,iBAAiB,EAAE,WAAW,GAAG,YAA4C;CACjF,OACE,oBAAC,OAAgB,UAAjB;EACE,aAAU;EACV,WAAW,GACT,mNACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAIA,IAAa,iBAAiB,EAC5B,WACA,UACA,OAAO,SACP,kBAAkB,MAClB,GAAG,YAIC;CACJ,sBAAsB;CACtB,OACE,qBAAC,OAAgB,QAAjB;EAAwB,aAAU;EAAlC,UAAA,CACE,oBAAC,eAAD,CAAgB,CAAA,GAChB,qBAAC,OAAgB,OAAjB;GACE,aAAU;GACV,aAAW;GACX,WAAW,GAMT,2MACA,SAAS,WAAW,iHACpB,SAAS,UAAU,8GACnB,SAAS,SAAS,4FAClB,SAAS,YAAY,qGACrB,SACF;GACA,GAAI;GAhBN,UAAA,CAkBG,UACA,mBACC,qBAAC,OAAgB,OAAjB;IAAuB,aAAU;IAAe,QAAQ,oBAAC,QAAD;KAAQ,SAAQ;KAAQ,WAAU;KAAyB,MAAK;IAAW,CAAA;IAAnI,UAAA,CACE,oBAAC,OAAD,CAAQ,CAAA,GACR,oBAAC,QAAD;KAAM,WAAU;KAAU,UAAA;IAAW,CAAA,CAChB;GAEJ,CAAA,CAAA;EACD,CAAA,CAAA;;AAE5B;AAEA,IAAa,gBAAgB,EAAE,WAAW,GAAG,YAAyC;CACpF,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAgB,WAAW,GAAG,uBAAuB,SAAS;EAAG,GAAI;CAAQ,CAAA;AACrG;AAEA,IAAa,gBAAgB,EAAE,WAAW,GAAG,YAAyC;CACpF,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAgB,WAAW,GAAG,+BAA+B,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC7G;AAEA,IAAa,eAAe,EAAE,WAAW,GAAG,YAAyC;CACnF,OAAO,oBAAC,OAAgB,OAAjB;EAAuB,aAAU;EAAe,WAAW,GAAG,sCAAsC,SAAS;EAAG,GAAI;CAAQ,CAAA;AACrI;AAEA,IAAa,qBAAqB,EAAE,WAAW,GAAG,YAA+C;CAC/F,OAAO,oBAAC,OAAgB,aAAjB;EAA6B,aAAU;EAAqB,WAAW,GAAG,iCAAiC,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC5I"}

package/dist/ui/src/components/ui/dropdown-menu/dropdown-menu.d.ts

@@ -3,7 +3,18 @@ import type * as React from 'react';
 export declare const DropdownMenu: ({ ...props }: MenuPrimitive.Root.Props) => React.JSX.Element;
 export declare const DropdownMenuPortal: ({ ...props }: MenuPrimitive.Portal.Props) => React.JSX.Element;
 export declare const DropdownMenuTrigger: ({ ...props }: MenuPrimitive.Trigger.Props) => React.JSX.Element;
-export declare const DropdownMenuContent: ({ align, alignOffset, side, sideOffset, className, ...props }: MenuPrimitive.Popup.Props & Pick<MenuPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">) => React.JSX.Element;
+/**
+ * Scrolls inside a DS ScrollArea like the other popup lists, with the bar shown
+ * for as long as the menu overflows and a fade on whichever end is cut off.
+ *
+ * Base UI puts `role="menu"` on this popup itself and offers no inner list part
+ * to move it onto, so the ScrollArea sits INSIDE the role. That is only legal
+ * because ScrollArea drops the `role="presentation"` Base UI gives its root,
+ * viewport and content: a menu may not own presentation wrappers (axe reports
+ * a critical aria-required-children violation), but it may own plain divs.
+ * e2e/a11y.spec.ts scans the open menu in both themes to keep it that way.
+ */
+export declare const DropdownMenuContent: ({ align, alignOffset, side, sideOffset, className, children, ...props }: MenuPrimitive.Popup.Props & Pick<MenuPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">) => React.JSX.Element;
 export declare const DropdownMenuGroup: ({ ...props }: MenuPrimitive.Group.Props) => React.JSX.Element;
 export declare const DropdownMenuLabel: ({ className, inset, ...props }: MenuPrimitive.GroupLabel.Props & {
     inset?: boolean;