@evinvest/uikit 0.30.0 → 0.32.0

package/dist/components/atomic/command.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/atomic/command.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { useControllableState } from \"../../primitives/use-controllable-state\";\nimport { DismissableLayerScope, useDismissableLayer, useModalScrimStyle } from \"../../primitives/dismissable-layer\";\nimport { useFocusScope } from \"../../primitives/focus-scope\";\nimport { mergeRefs } from \"../../primitives/merge-refs\";\nimport { Portal } from \"../../primitives/portal\";\nimport {\n  COMMAND_DIALOG_COMMAND,\n  COMMAND_DIALOG_CONTENT,\n  COMMAND_DIALOG_OVERLAY,\n  COMMAND_EMPTY,\n  COMMAND_GROUP,\n  COMMAND_INPUT,\n  COMMAND_INPUT_WRAPPER,\n  COMMAND_ITEM,\n  COMMAND_LIST,\n  COMMAND_ROOT,\n  COMMAND_SEPARATOR,\n  COMMAND_SHORTCUT,\n} from \"../../generated/command\";\n\ninterface CommandContextValue {\n  search: string;\n  setSearch: (next: string) => void;\n  /// Registers a `CommandItem`'s value so `CommandEmpty` can tell \"nothing\n  /// matched\" from \"nothing is here\", and its select handler so Enter can fire\n  /// it. Items register even while filtered out.\n  registerItem: (id: string, value: string, select: () => void) => void;\n  unregisterItem: (id: string) => void;\n  /// The active query: trimmed, so blank input is not a search, and lowercased.\n  /// Shared by the item filter and the empty-state gate so the two can never\n  /// disagree.\n  query: string;\n  /// `null` filters the item out; a number is its CSS `order`, `0` while\n  /// nothing is being ranked.\n  order: (value: string) => number | null;\n  hasMatches: boolean;\n  listId: string;\n  /// DOM id of the highlighted item. Focus stays in the input and points here\n  /// through `aria-activedescendant` (the ARIA combobox pattern), so items\n  /// never need to be tabbable.\n  activeId: string | null;\n  activate: (id: string) => void;\n}\n\nconst CommandContext = React.createContext<CommandContextValue | null>(null);\n\nfunction useCommand(): CommandContextValue {\n  const ctx = React.useContext(CommandContext);\n  if (!ctx) throw new Error(\"Command parts must be used within <Command>\");\n  return ctx;\n}\n\nexport interface CommandProps extends React.ComponentProps<\"div\"> {\n  search?: string;\n  defaultSearch?: string;\n  onSearchChange?: (search: string) => void;\n  /// `false` hands filtering to the caller (e.g. rows that are a server\n  /// response to the query): every mounted item renders, in the caller's\n  /// order, and `CommandEmpty` counts mounted items. Defaults to `true`.\n  shouldFilter?: boolean;\n}\n\nconst ITEM_SELECTOR = '[data-slot=\"command-item\"]:not([aria-disabled=\"true\"])';\n\n/// fzf v1: per space-separated term, the shortest window ending at the first\n/// full subsequence match, scored for word starts and runs, charged for gaps.\n/// `null` when a term does not match.\nfunction fuzzyScore(value: string, query: string): number | null {\n  const hay = [...value.toLowerCase()];\n  let total = 0;\n  for (const term of query.split(/\\s+/)) {\n    const needle = [...term];\n    let k = 0;\n    let end = -1;\n    for (let i = 0; i < hay.length; i++) {\n      if (hay[i] === needle[k] && ++k === needle.length) {\n        end = i;\n        break;\n      }\n    }\n    if (end < 0) return null;\n    let start = end;\n    for (let i = end, j = needle.length - 1; j >= 0; i--) {\n      if (hay[i] === needle[j]) {\n        start = i;\n        j--;\n      }\n    }\n    let prev = -1;\n    for (let i = start, j = 0; j < needle.length; i++) {\n      if (hay[i] !== needle[j]) continue;\n      total += 16;\n      if (i === 0 || !/[\\p{L}\\p{N}]/u.test(hay[i - 1]!)) total += 8;\n      if (j > 0) total += i === prev + 1 ? 4 : -(3 + (i - prev - 2));\n      prev = i;\n      j++;\n    }\n  }\n  return total;\n}\n\n/// Keyboard highlight over the items currently in the DOM, in the order on\n/// screen — each container's rows by their CSS `order`, then DOM order — so it\n/// follows whatever the filter (or the caller) rendered rather than the order\n/// items happened to register in.\nfunction useCommandNavigation(\n  query: string,\n  handlers: React.RefObject<Map<string, () => void>>,\n) {\n  const rootRef = React.useRef<HTMLDivElement>(null);\n  const [activeId, setActiveId] = React.useState<string | null>(null);\n  // Until the user moves the highlight it tracks the first row, so results\n  // that arrive after the keystroke (or reorder under it) put Enter on the top\n  // hit. Once moved, it sticks for as long as that row stays.\n  const userMoved = React.useRef(false);\n\n  const enabledItems = React.useCallback((): HTMLElement[] => {\n    const root = rootRef.current;\n    if (!root) return [];\n    const byParent = new Map<Element | null, HTMLElement[]>();\n    for (const el of root.querySelectorAll<HTMLElement>(ITEM_SELECTOR)) {\n      if (el.closest('[data-slot=\"command\"]') !== root) continue;\n      const rows = byParent.get(el.parentElement) ?? [];\n      rows.push(el);\n      byParent.set(el.parentElement, rows);\n    }\n    return [...byParent.values()].flatMap((rows) =>\n      rows.sort((a, b) => Number(a.style.order) - Number(b.style.order)),\n    );\n  }, []);\n\n  React.useEffect(() => {\n    userMoved.current = false;\n  }, [query]);\n\n  // No deps on purpose: the caller can change the rendered rows on any render;\n  // setting an unchanged id bails out without re-rendering.\n  React.useEffect(() => {\n    const els = enabledItems();\n    const moved = userMoved.current;\n    setActiveId((prev) =>\n      moved && prev !== null && els.some((el) => el.id === prev)\n        ? prev\n        : (els[0]?.id ?? null),\n    );\n  });\n\n  const activate = React.useCallback((id: string) => {\n    userMoved.current = true;\n    setActiveId(id);\n  }, []);\n\n  const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (event.nativeEvent.isComposing) return;\n    // Only the search field drives the list: Enter or an arrow on a button\n    // inside Command (an action in `CommandEmpty`, a footer) stays its own.\n    const field = event.target as HTMLElement;\n    if (field.dataset[\"slot\"] !== \"command-input\") return;\n    const els = enabledItems();\n    const current = els.findIndex((el) => el.id === activeId);\n    const last = els.length - 1;\n    let next: number;\n    switch (event.key) {\n      case \"ArrowDown\":\n        next = current < 0 ? 0 : Math.min(current + 1, last);\n        break;\n      case \"ArrowUp\":\n        next = current < 0 ? last : Math.max(current - 1, 0);\n        break;\n      // Home / End are left to the caret: the field is editable (ARIA APG\n      // editable combobox).\n      case \"Enter\": {\n        const select =\n          activeId !== null && current >= 0\n            ? handlers.current.get(activeId)\n            : undefined;\n        if (select) {\n          event.preventDefault();\n          select();\n        }\n        return;\n      }\n      default:\n        return;\n    }\n    const target = els[next];\n    if (!target) return;\n    event.preventDefault();\n    activate(target.id);\n    // Optional call: jsdom implements no `scrollIntoView`.\n    target.scrollIntoView?.({ block: \"nearest\" });\n  };\n\n  return { rootRef, activeId, activate, onKeyDown };\n}\n\nexport function Command({\n  className,\n  search,\n  defaultSearch = \"\",\n  onSearchChange,\n  shouldFilter = true,\n  children,\n  ref,\n  onKeyDown,\n  ...props\n}: CommandProps) {\n  const [currentSearch, setSearch] = useControllableState<string>({\n    ...(search !== undefined ? { value: search } : {}),\n    defaultValue: defaultSearch,\n    ...(onSearchChange ? { onChange: onSearchChange } : {}),\n  });\n\n  const [items, setItems] = React.useState<ReadonlyMap<string, string>>(\n    () => new Map(),\n  );\n  const handlers = React.useRef(new Map<string, () => void>());\n  const registerItem = React.useCallback(\n    (id: string, value: string, select: () => void) => {\n      handlers.current.set(id, select);\n      setItems((prev) => {\n        if (prev.get(id) === value) return prev;\n        const next = new Map(prev);\n        next.set(id, value);\n        return next;\n      });\n    },\n    [],\n  );\n  const unregisterItem = React.useCallback((id: string) => {\n    handlers.current.delete(id);\n    setItems((prev) => {\n      if (!prev.has(id)) return prev;\n      const next = new Map(prev);\n      next.delete(id);\n      return next;\n    });\n  }, []);\n\n  const query = currentSearch.trim().toLowerCase();\n  const order = React.useCallback(\n    (value: string) => {\n      if (!shouldFilter || query === \"\") return 0;\n      const score = fuzzyScore(value, query);\n      return score === null ? null : -score;\n    },\n    [query, shouldFilter],\n  );\n  const hasMatches = React.useMemo(\n    () => [...items.values()].some((value) => order(value) !== null),\n    [items, order],\n  );\n\n  const listId = React.useId();\n  const nav = useCommandNavigation(query, handlers);\n\n  return (\n    <CommandContext.Provider\n      value={{\n        search: currentSearch,\n        setSearch,\n        registerItem,\n        unregisterItem,\n        query,\n        order,\n        hasMatches,\n        listId,\n        activeId: nav.activeId,\n        activate: nav.activate,\n      }}\n    >\n      <div\n        data-slot=\"command\"\n        ref={mergeRefs(nav.rootRef, ref)}\n        className={cn(COMMAND_ROOT, className)}\n        onKeyDown={(e) => {\n          onKeyDown?.(e);\n          if (!e.defaultPrevented) nav.onKeyDown(e);\n        }}\n        {...props}\n      >\n        {children}\n      </div>\n    </CommandContext.Provider>\n  );\n}\n\nexport interface CommandDialogProps {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /// See `CommandProps.shouldFilter`.\n  shouldFilter?: boolean;\n  className?: string;\n  children?: React.ReactNode;\n}\n\nexport function CommandDialog({\n  open,\n  defaultOpen = false,\n  onOpenChange,\n  shouldFilter = true,\n  className,\n  children,\n}: CommandDialogProps) {\n  const [isOpen, setOpen] = useControllableState<boolean>({\n    ...(open !== undefined ? { value: open } : {}),\n    defaultValue: defaultOpen,\n    ...(onOpenChange ? { onChange: onOpenChange } : {}),\n  });\n  const scopeRef = useFocusScope(isOpen);\n  // Outside clicks stay with the overlay, as in Drawer: it is what \"outside\" means.\n  const dismissRef = useDismissableLayer({\n    enabled: isOpen,\n    onDismiss: () => setOpen(false),\n    pointerOutside: false,\n    modal: true,\n  });\n  const scrimStyle = useModalScrimStyle(dismissRef);\n  if (!isOpen) return null;\n  return (\n    <Portal>\n      <div\n        data-slot=\"command-overlay\"\n        className={COMMAND_DIALOG_OVERLAY}\n        style={scrimStyle}\n        onClick={() => setOpen(false)}\n      />\n      <div\n        role=\"dialog\"\n        aria-modal=\"true\"\n        data-slot=\"command-dialog\"\n        ref={mergeRefs(scopeRef, dismissRef)}\n        className={cn(COMMAND_DIALOG_CONTENT, className)}\n      >\n        <Command className={COMMAND_DIALOG_COMMAND} shouldFilter={shouldFilter}>\n          <DismissableLayerScope layer={dismissRef}>{children}</DismissableLayerScope>\n        </Command>\n      </div>\n    </Portal>\n  );\n}\n\nexport function CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<\"input\">) {\n  const { search, setSearch, listId, activeId } = useCommand();\n  return (\n    <div className={COMMAND_INPUT_WRAPPER} data-slot=\"command-input-wrapper\">\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        className=\"size-4 shrink-0 opacity-50\"\n        aria-hidden=\"true\"\n      >\n        <circle cx=\"11\" cy=\"11\" r=\"8\" />\n        <path d=\"m21 21-4.3-4.3\" />\n      </svg>\n      <input\n        type=\"text\"\n        role=\"combobox\"\n        data-slot=\"command-input\"\n        aria-autocomplete=\"list\"\n        aria-expanded={true}\n        aria-controls={listId}\n        aria-activedescendant={activeId ?? undefined}\n        autoComplete=\"off\"\n        value={search}\n        onChange={(e) => setSearch(e.target.value)}\n        className={cn(COMMAND_INPUT, className)}\n        {...props}\n      />\n    </div>\n  );\n}\n\nexport function CommandList({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { listId } = useCommand();\n  return (\n    <div\n      role=\"listbox\"\n      id={listId}\n      data-slot=\"command-list\"\n      className={cn(COMMAND_LIST, className)}\n      {...props}\n    />\n  );\n}\n\n/// Renders only when a search is under way and no item matched it — never next\n/// to results, and never before the user has typed. With `shouldFilter={false}`\n/// \"matched\" means \"is mounted\": the caller's rows are the results.\nexport function CommandEmpty({ className, children, ...props }: React.ComponentProps<\"div\">) {\n  const { query, hasMatches } = useCommand();\n  if (query === \"\" || hasMatches) return null;\n  return (\n    <div\n      data-slot=\"command-empty\"\n      className={cn(COMMAND_EMPTY, className)}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport interface CommandGroupProps extends React.ComponentProps<\"div\"> {\n  heading?: string;\n}\n\nexport function CommandGroup({ className, heading, children, ...props }: CommandGroupProps) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"command-group\"\n      className={cn(COMMAND_GROUP, className)}\n      {...props}\n    >\n      {heading ? <div data-slot=\"command-group-heading\">{heading}</div> : null}\n      {children}\n    </div>\n  );\n}\n\nexport interface CommandItemProps\n  extends Omit<React.ComponentProps<\"div\">, \"onSelect\"> {\n  value: string;\n  disabled?: boolean;\n  onSelect?: (value: string) => void;\n}\n\nexport function CommandItem({\n  className,\n  value,\n  disabled = false,\n  onSelect,\n  id: idProp,\n  onPointerMove,\n  children,\n  ...props\n}: CommandItemProps) {\n  const { registerItem, unregisterItem, order, activeId, activate } = useCommand();\n  const reactId = React.useId();\n  // The DOM id is what `aria-activedescendant` points at, so a caller's own id\n  // has to be the one registered.\n  const id = idProp ?? reactId;\n  // Read at select time, so an inline `onSelect` doesn't re-register every render.\n  const onSelectRef = React.useRef(onSelect);\n  React.useEffect(() => {\n    onSelectRef.current = onSelect;\n  });\n  // Registered whether or not this item survives the filter below, so\n  // `CommandEmpty` gates on the search, not on who happens to be mounted.\n  React.useEffect(() => {\n    registerItem(id, value, () => onSelectRef.current?.(value));\n    return () => unregisterItem(id);\n  }, [id, value, registerItem, unregisterItem]);\n\n  const rank = order(value);\n  if (rank === null) return null;\n  const selected = activeId === id;\n  return (\n    <div\n      role=\"option\"\n      id={id}\n      data-slot=\"command-item\"\n      data-disabled={disabled}\n      data-selected={selected}\n      aria-selected={selected}\n      aria-disabled={disabled || undefined}\n      tabIndex={-1}\n      onClick={() => {\n        if (!disabled) onSelect?.(value);\n      }}\n      onPointerMove={(e) => {\n        onPointerMove?.(e);\n        if (!disabled && !selected) activate(id);\n      }}\n      className={cn(COMMAND_ITEM, className)}\n      {...props}\n      style={{ ...props.style, order: rank }}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport function CommandSeparator({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"command-separator\"\n      className={cn(COMMAND_SEPARATOR, className)}\n      {...props}\n    />\n  );\n}\n\nexport function CommandShortcut({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn(COMMAND_SHORTCUT, className)}\n      {...props}\n    />\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/{container.js → atomic/container.js}

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
-import { cn } from "../lib/cn.js";
-import { CONTAINER_BASE } from "../generated/container.js";
+import { cn } from "../../lib/cn.js";
+import { CONTAINER_BASE } from "../../generated/container.js";
 function Container({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     "div",

package/dist/components/atomic/container.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/atomic/container.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { CONTAINER_BASE } from \"../../generated/container\";\n\nexport type ContainerProps = React.ComponentProps<\"div\">;\n\n/**\n * Page-width wrapper: centres content, caps it at `--page-max` and applies the\n * responsive `--page-px` gutter (tighter on mobile, roomier ≥ sm). Standardises\n * the `<div className=\"container\">` consumers were repeating, so the page gutter\n * and max width live in one token-driven place.\n */\nexport function Container({ className, ...props }: ContainerProps) {\n  return (\n    <div\n      data-slot=\"container\"\n      className={cn(CONTAINER_BASE, className)}\n      {...props}\n    />\n  );\n}\n"],"mappings":"AAcI;AAdJ,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,sBAAsB;AAUxB,SAAS,UAAU,EAAE,WAAW,GAAG,MAAM,GAAmB;AACjE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,gBAAgB,SAAS;AAAA,MACtC,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}

package/dist/components/{context-menu.js → atomic/context-menu.js}

@@ -1,14 +1,15 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { cn } from "../lib/cn.js";
-import { useControllableState } from "../primitives/use-controllable-state.js";
-import { DismissableLayerScope, useDismissableLayer } from "../primitives/dismissable-layer.js";
-import { usePresence } from "../primitives/presence.js";
-import { useRovingFocus } from "../primitives/use-roving-focus.js";
-import { mergeRefs } from "../primitives/merge-refs.js";
-import { Portal } from "../primitives/portal.js";
-import { Slot } from "../primitives/slot.js";
+import { cn } from "../../lib/cn.js";
+import { useControllableState } from "../../primitives/use-controllable-state.js";
+import { DismissableLayerScope, useDismissableLayer } from "../../primitives/dismissable-layer.js";
+import { usePresence } from "../../primitives/presence.js";
+import { useRovingFocus } from "../../primitives/use-roving-focus.js";
+import { useHoverIntent } from "../../primitives/use-hover-intent.js";
+import { mergeRefs } from "../../primitives/merge-refs.js";
+import { Portal } from "../../primitives/portal.js";
+import { Slot } from "../../primitives/slot.js";
 import {
   CONTEXT_MENU_CHECK_ITEM,
   CONTEXT_MENU_CONTENT,
@@ -18,7 +19,7 @@ import {
   CONTEXT_MENU_SHORTCUT,
   CONTEXT_MENU_SUB_CONTENT,
   CONTEXT_MENU_SUB_TRIGGER
-} from "../generated/context-menu.js";
+} from "../../generated/context-menu.js";
 const ContextMenuContext = React.createContext(null);
 function useContextMenu() {
   const ctx = React.useContext(ContextMenuContext);
@@ -149,9 +150,9 @@ function ContextMenuCheckboxItem({
   checked,
   disabled,
   onClick,
+  onKeyDown,
   ...props
 }) {
-  const close = React.useContext(ContextMenuCloseContext);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -168,7 +169,13 @@ function ContextMenuCheckboxItem({
       onClick: (e) => {
         if (disabled) return;
         onClick?.(e);
-        close();
+      },
+      onKeyDown: (e) => {
+        onKeyDown?.(e);
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          e.currentTarget.click();
+        }
       },
       ...props,
       children: [
@@ -269,13 +276,29 @@ function ContextMenuSub({ open, defaultOpen = false, onOpenChange, children }) {
     defaultValue: defaultOpen,
     ...onOpenChange ? { onChange: onOpenChange } : {}
   });
-  return /* @__PURE__ */ jsx(ContextMenuSubContext.Provider, { value: { open: isOpen, setOpen }, children: /* @__PURE__ */ jsx("div", { "data-slot": "context-menu-sub", children }) });
+  const triggerRef = React.useRef(null);
+  const focusFirst = React.useRef(false);
+  const hover = useHoverIntent({
+    onOpen: () => setOpen(true),
+    onClose: () => setOpen(false),
+    openDelay: 100,
+    closeDelay: 150
+  });
+  return /* @__PURE__ */ jsx(ContextMenuSubContext.Provider, { value: { open: isOpen, setOpen, triggerRef, focusFirst }, children: /* @__PURE__ */ jsx("div", { "data-slot": "context-menu-sub", ...hover, children }) });
 }
-function ContextMenuSubTrigger({ className, inset, children, onClick, ...props }) {
+function ContextMenuSubTrigger({
+  className,
+  inset,
+  children,
+  onClick,
+  onKeyDown,
+  ...props
+}) {
   const ctx = React.useContext(ContextMenuSubContext);
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ref: ctx?.triggerRef,
       "data-slot": "context-menu-sub-trigger",
       "data-inset": inset ? "" : void 0,
       "data-state": ctx?.open ? "open" : "closed",
@@ -291,6 +314,14 @@ function ContextMenuSubTrigger({ className, inset, children, onClick, ...props }
         onClick?.(e);
         ctx?.setOpen(!ctx.open);
       },
+      onKeyDown: (e) => {
+        onKeyDown?.(e);
+        if (!ctx || e.key !== "ArrowRight" && e.key !== "Enter" && e.key !== " ") return;
+        e.preventDefault();
+        e.stopPropagation();
+        ctx.focusFirst.current = true;
+        ctx.setOpen(true);
+      },
       ...props,
       children: [
         children,
@@ -299,12 +330,29 @@ function ContextMenuSubTrigger({ className, inset, children, onClick, ...props }
     }
   );
 }
-function ContextMenuSubContent({ className, children, ...props }) {
+function ContextMenuSubContent({ className, children, onKeyDown, ...props }) {
   const ctx = React.useContext(ContextMenuSubContext);
+  const ref = React.useRef(null);
+  const open = ctx?.open ?? false;
+  React.useEffect(() => {
+    if (!open || !ctx?.focusFirst.current) return;
+    ctx.focusFirst.current = false;
+    ref.current?.querySelector("[role^='menuitem']")?.focus();
+  }, [open, ctx]);
   if (!ctx?.open) return null;
   return /* @__PURE__ */ jsx(
     "div",
     {
+      ref,
+      onKeyDown: (e) => {
+        onKeyDown?.(e);
+        if (e.key === "ArrowLeft" || e.key === "Escape") {
+          e.preventDefault();
+          e.stopPropagation();
+          ctx.setOpen(false);
+          ctx.triggerRef.current?.focus();
+        }
+      },
       "data-slot": "context-menu-sub-content",
       "data-state": "open",
       role: "menu",

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/atomic/context-menu.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { useControllableState } from \"../../primitives/use-controllable-state\";\nimport { DismissableLayerScope, useDismissableLayer } from \"../../primitives/dismissable-layer\";\nimport { usePresence } from \"../../primitives/presence\";\nimport { useRovingFocus } from \"../../primitives/use-roving-focus\";\nimport { useHoverIntent } from \"../../primitives/use-hover-intent\";\nimport { mergeRefs } from \"../../primitives/merge-refs\";\nimport { Portal } from \"../../primitives/portal\";\nimport { Slot } from \"../../primitives/slot\";\nimport {\n  CONTEXT_MENU_CHECK_ITEM,\n  CONTEXT_MENU_CONTENT,\n  CONTEXT_MENU_ITEM,\n  CONTEXT_MENU_LABEL,\n  CONTEXT_MENU_SEPARATOR,\n  CONTEXT_MENU_SHORTCUT,\n  CONTEXT_MENU_SUB_CONTENT,\n  CONTEXT_MENU_SUB_TRIGGER,\n} from \"../../generated/context-menu\";\n\ninterface ContextMenuContextValue {\n  open: boolean;\n  setOpen: (next: boolean) => void;\n  point: { x: number; y: number };\n  setPoint: (p: { x: number; y: number }) => void;\n}\n\nconst ContextMenuContext = React.createContext<ContextMenuContextValue | null>(null);\n\nfunction useContextMenu(): ContextMenuContextValue {\n  const ctx = React.useContext(ContextMenuContext);\n  if (!ctx) throw new Error(\"ContextMenu parts must be used within <ContextMenu>\");\n  return ctx;\n}\n\nexport interface ContextMenuProps {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  children?: React.ReactNode;\n}\n\nexport function ContextMenu({ open, defaultOpen = false, onOpenChange, children }: ContextMenuProps) {\n  const [isOpen, setOpen] = useControllableState<boolean>({\n    ...(open !== undefined ? { value: open } : {}),\n    defaultValue: defaultOpen,\n    ...(onOpenChange ? { onChange: onOpenChange } : {}),\n  });\n  const [point, setPoint] = React.useState({ x: 0, y: 0 });\n  return (\n    <ContextMenuContext.Provider value={{ open: isOpen, setOpen, point, setPoint }}>\n      <div data-slot=\"context-menu\">{children}</div>\n    </ContextMenuContext.Provider>\n  );\n}\n\nexport function ContextMenuPortal({ children }: { children?: React.ReactNode }) {\n  return <Portal>{children}</Portal>;\n}\n\nexport interface ContextMenuTriggerProps extends React.ComponentProps<\"div\"> {\n  asChild?: boolean;\n}\n\nexport function ContextMenuTrigger({ asChild = false, onContextMenu, ...props }: ContextMenuTriggerProps) {\n  const { setOpen, setPoint } = useContextMenu();\n  const Comp = asChild ? Slot : \"div\";\n  return (\n    <Comp\n      data-slot=\"context-menu-trigger\"\n      onContextMenu={(e: React.MouseEvent<HTMLDivElement>) => {\n        onContextMenu?.(e);\n        e.preventDefault();\n        setPoint({ x: e.clientX, y: e.clientY });\n        setOpen(true);\n      }}\n      {...(props as Record<string, unknown>)}\n    />\n  );\n}\n\nexport function ContextMenuGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div data-slot=\"context-menu-group\" role=\"group\" className={className} {...props} />;\n}\n\nconst ContextMenuCloseContext = React.createContext<() => void>(() => {});\n\nexport function ContextMenuContent({ className, children, ...props }: React.ComponentProps<\"div\">) {\n  const { open, setOpen, point } = useContextMenu();\n  const { isPresent, ref: presRef } = usePresence(open);\n  const dismissRef = useDismissableLayer({\n    enabled: open,\n    onDismiss: () => setOpen(false),\n  });\n  const contentRef = React.useRef<HTMLDivElement | null>(null);\n  const items = () =>\n    Array.from(\n      contentRef.current?.querySelectorAll<HTMLElement>(\"[role^='menuitem']\") ?? [],\n    ).filter((el) => el.getAttribute(\"data-disabled\") === null);\n  const { activeIndex, setActiveIndex, onKeyDown: rovingKeyDown } = useRovingFocus({\n    count: () => items().length,\n    orientation: \"vertical\",\n    loop: true,\n  });\n  // Reset on close: reopen on the first item, never on an index past the end.\n  React.useEffect(() => {\n    if (!open) setActiveIndex(0);\n  }, [open, setActiveIndex]);\n  React.useEffect(() => {\n    if (!open) return;\n    items()[activeIndex]?.focus();\n  }, [open, activeIndex]);\n  const close = React.useCallback(() => setOpen(false), [setOpen]);\n  if (!isPresent) return null;\n  return (\n    <Portal>\n      <ContextMenuCloseContext.Provider value={close}>\n        <div\n          data-slot=\"context-menu-content\"\n          data-state={open ? \"open\" : \"closed\"}\n          data-side=\"bottom\"\n          role=\"menu\"\n          tabIndex={-1}\n          // Escape is the stack's (useDismissableLayer): it closes this menu\n          // only while it is the top layer.\n          onKeyDown={rovingKeyDown}\n          ref={mergeRefs(dismissRef, presRef, contentRef)}\n          style={{ position: \"fixed\", top: point.y, left: point.x }}\n          className={cn(\n            CONTEXT_MENU_CONTENT,\n            className,\n          )}\n          {...(props as Record<string, unknown>)}\n        >\n          <DismissableLayerScope layer={dismissRef}>{children}</DismissableLayerScope>\n        </div>\n      </ContextMenuCloseContext.Provider>\n    </Portal>\n  );\n}\n\nexport interface ContextMenuItemProps extends React.ComponentProps<\"div\"> {\n  inset?: boolean;\n  variant?: \"neutral\" | \"destructive\";\n  disabled?: boolean;\n}\n\nexport function ContextMenuItem({\n  className,\n  inset,\n  variant = \"neutral\",\n  disabled,\n  onClick,\n  onKeyDown,\n  ...props\n}: ContextMenuItemProps) {\n  const close = React.useContext(ContextMenuCloseContext);\n  return (\n    <div\n      data-slot=\"context-menu-item\"\n      data-inset={inset ? \"\" : undefined}\n      data-variant={variant}\n      data-disabled={disabled ? \"\" : undefined}\n      role=\"menuitem\"\n      tabIndex={disabled ? undefined : -1}\n      className={cn(\n        CONTEXT_MENU_ITEM,\n        className,\n      )}\n      onClick={(e) => {\n        if (disabled) return;\n        onClick?.(e);\n        close();\n      }}\n      onKeyDown={(e) => {\n        onKeyDown?.(e);\n        if (e.key === \"Enter\" || e.key === \" \") {\n          e.preventDefault();\n          (e.currentTarget as HTMLElement).click();\n        }\n      }}\n      {...props}\n    />\n  );\n}\n\nexport interface ContextMenuCheckboxItemProps extends React.ComponentProps<\"div\"> {\n  checked?: boolean;\n  disabled?: boolean;\n}\n\nexport function ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  disabled,\n  onClick,\n  onKeyDown,\n  ...props\n}: ContextMenuCheckboxItemProps) {\n  // No close: several boxes can be toggled in one visit.\n  return (\n    <div\n      data-slot=\"context-menu-checkbox-item\"\n      role=\"menuitemcheckbox\"\n      aria-checked={checked}\n      data-state={checked ? \"checked\" : \"unchecked\"}\n      data-disabled={disabled ? \"\" : undefined}\n      tabIndex={disabled ? undefined : -1}\n      className={cn(\n        CONTEXT_MENU_CHECK_ITEM,\n        className,\n      )}\n      onClick={(e) => {\n        if (disabled) return;\n        onClick?.(e);\n      }}\n      onKeyDown={(e) => {\n        onKeyDown?.(e);\n        if (e.key === \"Enter\" || e.key === \" \") {\n          e.preventDefault();\n          (e.currentTarget as HTMLElement).click();\n        }\n      }}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        {checked ? (\n          <svg className=\"size-4\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n            <path d=\"M20 6 9 17l-5-5\" />\n          </svg>\n        ) : null}\n      </span>\n      {children}\n    </div>\n  );\n}\n\ninterface ContextMenuRadioGroupContextValue {\n  value: string | undefined;\n  setValue: (next: string) => void;\n}\n\nconst ContextMenuRadioGroupContext =\n  React.createContext<ContextMenuRadioGroupContextValue | null>(null);\n\nexport interface ContextMenuRadioGroupProps extends Omit<React.ComponentProps<\"div\">, \"onChange\"> {\n  value?: string;\n  onValueChange?: (value: string) => void;\n}\n\nexport function ContextMenuRadioGroup({\n  className,\n  value,\n  onValueChange,\n  children,\n  ...props\n}: ContextMenuRadioGroupProps) {\n  const ctx = React.useMemo<ContextMenuRadioGroupContextValue>(\n    () => ({ value, setValue: (next) => onValueChange?.(next) }),\n    [value, onValueChange],\n  );\n  return (\n    <ContextMenuRadioGroupContext.Provider value={ctx}>\n      <div data-slot=\"context-menu-radio-group\" role=\"group\" className={className} {...props}>\n        {children}\n      </div>\n    </ContextMenuRadioGroupContext.Provider>\n  );\n}\n\nexport interface ContextMenuRadioItemProps extends React.ComponentProps<\"div\"> {\n  value: string;\n  disabled?: boolean;\n}\n\nexport function ContextMenuRadioItem({\n  className,\n  children,\n  value,\n  disabled,\n  onClick,\n  ...props\n}: ContextMenuRadioItemProps) {\n  const close = React.useContext(ContextMenuCloseContext);\n  const group = React.useContext(ContextMenuRadioGroupContext);\n  const checked = group?.value === value;\n  return (\n    <div\n      data-slot=\"context-menu-radio-item\"\n      role=\"menuitemradio\"\n      aria-checked={checked}\n      data-state={checked ? \"checked\" : \"unchecked\"}\n      data-disabled={disabled ? \"\" : undefined}\n      tabIndex={disabled ? undefined : -1}\n      className={cn(\n        CONTEXT_MENU_CHECK_ITEM,\n        className,\n      )}\n      onClick={(e) => {\n        if (disabled) return;\n        onClick?.(e);\n        group?.setValue(value);\n        close();\n      }}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        {checked ? (\n          <svg className=\"size-2 fill-current\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n            <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          </svg>\n        ) : null}\n      </span>\n      {children}\n    </div>\n  );\n}\n\nexport interface ContextMenuLabelProps extends React.ComponentProps<\"div\"> {\n  inset?: boolean;\n}\n\nexport function ContextMenuLabel({ className, inset, ...props }: ContextMenuLabelProps) {\n  return (\n    <div\n      data-slot=\"context-menu-label\"\n      data-inset={inset ? \"\" : undefined}\n      className={cn(CONTEXT_MENU_LABEL, className)}\n      {...props}\n    />\n  );\n}\n\nexport function ContextMenuSeparator({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"context-menu-separator\"\n      role=\"separator\"\n      className={cn(CONTEXT_MENU_SEPARATOR, className)}\n      {...props}\n    />\n  );\n}\n\nexport function ContextMenuShortcut({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn(CONTEXT_MENU_SHORTCUT, className)}\n      {...props}\n    />\n  );\n}\n\n// Sub-menus render inline (nested) rather than in a separate floating layer:\n// the sub-content is revealed in place when its trigger toggles.\ninterface ContextMenuSubContextValue {\n  open: boolean;\n  setOpen: (next: boolean) => void;\n  triggerRef: React.RefObject<HTMLDivElement | null>;\n  /** Set by a keyboard open, so the first item takes focus; a pointer open leaves focus alone. */\n  focusFirst: React.RefObject<boolean>;\n}\n\nconst ContextMenuSubContext = React.createContext<ContextMenuSubContextValue | null>(null);\n\nexport interface ContextMenuSubProps {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  children?: React.ReactNode;\n}\n\nexport function ContextMenuSub({ open, defaultOpen = false, onOpenChange, children }: ContextMenuSubProps) {\n  const [isOpen, setOpen] = useControllableState<boolean>({\n    ...(open !== undefined ? { value: open } : {}),\n    defaultValue: defaultOpen,\n    ...(onOpenChange ? { onChange: onOpenChange } : {}),\n  });\n  const triggerRef = React.useRef<HTMLDivElement | null>(null);\n  const focusFirst = React.useRef(false);\n  const hover = useHoverIntent({\n    onOpen: () => setOpen(true),\n    onClose: () => setOpen(false),\n    openDelay: 100,\n    closeDelay: 150,\n  });\n  return (\n    <ContextMenuSubContext.Provider value={{ open: isOpen, setOpen, triggerRef, focusFirst }}>\n      <div data-slot=\"context-menu-sub\" {...hover}>\n        {children}\n      </div>\n    </ContextMenuSubContext.Provider>\n  );\n}\n\nexport interface ContextMenuSubTriggerProps extends React.ComponentProps<\"div\"> {\n  inset?: boolean;\n}\n\nexport function ContextMenuSubTrigger({\n  className,\n  inset,\n  children,\n  onClick,\n  onKeyDown,\n  ...props\n}: ContextMenuSubTriggerProps) {\n  const ctx = React.useContext(ContextMenuSubContext);\n  return (\n    <div\n      ref={ctx?.triggerRef}\n      data-slot=\"context-menu-sub-trigger\"\n      data-inset={inset ? \"\" : undefined}\n      data-state={ctx?.open ? \"open\" : \"closed\"}\n      role=\"menuitem\"\n      aria-haspopup=\"menu\"\n      aria-expanded={ctx?.open}\n      tabIndex={-1}\n      className={cn(\n        CONTEXT_MENU_SUB_TRIGGER,\n        className,\n      )}\n      onClick={(e) => {\n        onClick?.(e);\n        ctx?.setOpen(!ctx.open);\n      }}\n      onKeyDown={(e) => {\n        onKeyDown?.(e);\n        if (!ctx || (e.key !== \"ArrowRight\" && e.key !== \"Enter\" && e.key !== \" \")) return;\n        e.preventDefault();\n        e.stopPropagation();\n        ctx.focusFirst.current = true;\n        ctx.setOpen(true);\n      }}\n      {...props}\n    >\n      {children}\n      <svg className=\"ml-auto\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n        <path d=\"m9 18 6-6-6-6\" />\n      </svg>\n    </div>\n  );\n}\n\nexport function ContextMenuSubContent({ className, children, onKeyDown, ...props }: React.ComponentProps<\"div\">) {\n  const ctx = React.useContext(ContextMenuSubContext);\n  const ref = React.useRef<HTMLDivElement | null>(null);\n  const open = ctx?.open ?? false;\n  React.useEffect(() => {\n    if (!open || !ctx?.focusFirst.current) return;\n    ctx.focusFirst.current = false;\n    ref.current?.querySelector<HTMLElement>(\"[role^='menuitem']\")?.focus();\n  }, [open, ctx]);\n  if (!ctx?.open) return null;\n  return (\n    <div\n      ref={ref}\n      onKeyDown={(e) => {\n        onKeyDown?.(e);\n        if (e.key === \"ArrowLeft\" || e.key === \"Escape\") {\n          // Closes this flyout only; Escape would otherwise reach the whole menu's dismissal.\n          e.preventDefault();\n          e.stopPropagation();\n          ctx.setOpen(false);\n          ctx.triggerRef.current?.focus();\n        }\n      }}\n      data-slot=\"context-menu-sub-content\"\n      data-state=\"open\"\n      role=\"menu\"\n      className={cn(\n        CONTEXT_MENU_SUB_CONTENT,\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/{dialog.js → atomic/dialog.js}

@@ -1,14 +1,14 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { cn } from "../lib/cn.js";
-import { useControllableState } from "../primitives/use-controllable-state.js";
-import { DismissableLayerScope, useDismissableLayer } from "../primitives/dismissable-layer.js";
-import { useFocusScope } from "../primitives/focus-scope.js";
-import { usePresence } from "../primitives/presence.js";
-import { mergeRefs } from "../primitives/merge-refs.js";
-import { Portal } from "../primitives/portal.js";
-import { Slot } from "../primitives/slot.js";
+import { cn } from "../../lib/cn.js";
+import { useControllableState } from "../../primitives/use-controllable-state.js";
+import { DismissableLayerScope, useDismissableLayer, useModalScrimStyle } from "../../primitives/dismissable-layer.js";
+import { useFocusScope } from "../../primitives/focus-scope.js";
+import { usePresence } from "../../primitives/presence.js";
+import { mergeRefs } from "../../primitives/merge-refs.js";
+import { Portal } from "../../primitives/portal.js";
+import { Slot } from "../../primitives/slot.js";
 import {
   DIALOG_CLOSE,
   DIALOG_CONTENT,
@@ -17,7 +17,7 @@ import {
   DIALOG_HEADER,
   DIALOG_OVERLAY,
   DIALOG_TITLE
-} from "../generated/dialog.js";
+} from "../../generated/dialog.js";
 const DialogContext = React.createContext(null);
 function useDialog() {
   const ctx = React.useContext(DialogContext);
@@ -105,6 +105,7 @@ function DialogContent({
     exclude: [triggerRef],
     modal: true
   });
+  const scrimStyle = useModalScrimStyle(dismissRef);
   React.useEffect(() => {
     if (!open) return;
     const prev = document.body.style.overflow;
@@ -115,7 +116,7 @@ function DialogContent({
   }, [open]);
   if (!isPresent) return null;
   return /* @__PURE__ */ jsxs(Portal, { children: [
-    /* @__PURE__ */ jsx(DialogOverlay, {}),
+    /* @__PURE__ */ jsx(DialogOverlay, { style: scrimStyle }),
     /* @__PURE__ */ jsxs(
       "div",
       {

package/dist/components/atomic/dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/atomic/dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { useControllableState } from \"../../primitives/use-controllable-state\";\nimport { DismissableLayerScope, useDismissableLayer, useModalScrimStyle } from \"../../primitives/dismissable-layer\";\nimport { type InitialFocus, useFocusScope } from \"../../primitives/focus-scope\";\nimport { usePresence } from \"../../primitives/presence\";\nimport { mergeRefs } from \"../../primitives/merge-refs\";\nimport { Portal } from \"../../primitives/portal\";\nimport { Slot } from \"../../primitives/slot\";\nimport {\n  DIALOG_CLOSE,\n  DIALOG_CONTENT,\n  DIALOG_DESCRIPTION,\n  DIALOG_FOOTER,\n  DIALOG_HEADER,\n  DIALOG_OVERLAY,\n  DIALOG_TITLE,\n} from \"../../generated/dialog\";\n\ninterface DialogContextValue {\n  open: boolean;\n  setOpen: (next: boolean) => void;\n  triggerRef: React.RefObject<HTMLElement | null>;\n  /** Ids of the mounted DialogTitle / DialogDescription; unset while none is. */\n  titleId: string | undefined;\n  descriptionId: string | undefined;\n  setTitleId: React.Dispatch<React.SetStateAction<string | undefined>>;\n  setDescriptionId: React.Dispatch<React.SetStateAction<string | undefined>>;\n}\n\nconst DialogContext = React.createContext<DialogContextValue | null>(null);\n\nfunction useDialog(): DialogContextValue {\n  const ctx = React.useContext(DialogContext);\n  if (!ctx) throw new Error(\"Dialog parts must be used within <Dialog>\");\n  return ctx;\n}\n\nexport interface DialogProps {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  children?: React.ReactNode;\n}\n\nexport function Dialog({ open, defaultOpen = false, onOpenChange, children }: DialogProps) {\n  const [isOpen, setOpen] = useControllableState<boolean>({\n    ...(open !== undefined ? { value: open } : {}),\n    defaultValue: defaultOpen,\n    ...(onOpenChange ? { onChange: onOpenChange } : {}),\n  });\n  const triggerRef = React.useRef<HTMLElement | null>(null);\n  const [titleId, setTitleId] = React.useState<string | undefined>(undefined);\n  const [descriptionId, setDescriptionId] = React.useState<string | undefined>(undefined);\n  return (\n    <DialogContext.Provider\n      value={{ open: isOpen, setOpen, triggerRef, titleId, descriptionId, setTitleId, setDescriptionId }}\n    >\n      {children}\n    </DialogContext.Provider>\n  );\n}\n\nexport interface DialogTriggerProps extends React.ComponentProps<\"button\"> {\n  asChild?: boolean;\n}\n\nexport function DialogTrigger({ asChild = false, onClick, ...props }: DialogTriggerProps) {\n  const { open, setOpen, triggerRef } = useDialog();\n  const Comp = asChild ? Slot : \"button\";\n  return (\n    <Comp\n      data-slot=\"dialog-trigger\"\n      aria-expanded={open}\n      ref={triggerRef as React.Ref<HTMLButtonElement>}\n      onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n        onClick?.(e);\n        setOpen(true);\n      }}\n      {...(props as Record<string, unknown>)}\n    />\n  );\n}\n\nexport type DialogPortalProps = { children?: React.ReactNode };\n\nexport function DialogPortal({ children }: DialogPortalProps) {\n  return <>{children}</>;\n}\n\nexport interface DialogOverlayProps extends React.ComponentProps<\"div\"> {}\n\nexport function DialogOverlay({ className, ...props }: DialogOverlayProps) {\n  const { open } = useDialog();\n  // No onClick: the content's dismissable layer already closes on the\n  // pointer-down that lands here, and a second path called onOpenChange(false)\n  // twice for one press whenever the overlay was still hit by the click\n  // (a host that closes later, CSS without the closed-state pointer-events).\n  return (\n    <div\n      data-slot=\"dialog-overlay\"\n      data-state={open ? \"open\" : \"closed\"}\n      className={cn(DIALOG_OVERLAY, className)}\n      {...(props as Record<string, unknown>)}\n    />\n  );\n}\n\nconst XIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    {...props}\n  >\n    <path d=\"M18 6 6 18M6 6l12 12\" />\n  </svg>\n);\n\nexport interface DialogContentProps extends React.ComponentProps<\"div\"> {\n  showCloseButton?: boolean;\n  /** Where focus lands on open. Default `first` — a dialog is usually a short form. */\n  initialFocus?: InitialFocus;\n}\n\nexport function DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  initialFocus = \"first\",\n  ...props\n}: DialogContentProps) {\n  const { open, setOpen, triggerRef, titleId, descriptionId } = useDialog();\n  const { isPresent, ref: presRef } = usePresence(open);\n  const focusRef = useFocusScope(open, { initialFocus, returnFocusTo: triggerRef });\n  const dismissRef = useDismissableLayer({\n    enabled: open,\n    onDismiss: () => setOpen(false),\n    exclude: [triggerRef],\n    modal: true,\n  });\n  const scrimStyle = useModalScrimStyle(dismissRef);\n  React.useEffect(() => {\n    if (!open) return;\n    const prev = document.body.style.overflow;\n    document.body.style.overflow = \"hidden\";\n    return () => {\n      document.body.style.overflow = prev;\n    };\n  }, [open]);\n  if (!isPresent) return null;\n  return (\n    <Portal>\n      <DialogOverlay style={scrimStyle} />\n      <div\n        data-slot=\"dialog-content\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={titleId}\n        aria-describedby={descriptionId}\n        data-state={open ? \"open\" : \"closed\"}\n        ref={mergeRefs(focusRef, dismissRef, presRef as React.Ref<HTMLDivElement>)}\n        className={cn(DIALOG_CONTENT, className)}\n        {...(props as Record<string, unknown>)}\n      >\n        <DismissableLayerScope layer={dismissRef}>{children}</DismissableLayerScope>\n        {showCloseButton && (\n          <button\n            type=\"button\"\n            data-slot=\"dialog-close\"\n            onClick={() => setOpen(false)}\n            className={DIALOG_CLOSE}\n          >\n            <XIcon />\n            <span className=\"sr-only\">Close</span>\n          </button>\n        )}\n      </div>\n    </Portal>\n  );\n}\n\nexport interface DialogCloseProps extends React.ComponentProps<\"button\"> {\n  asChild?: boolean;\n}\n\nexport function DialogClose({ asChild = false, onClick, ...props }: DialogCloseProps) {\n  const { setOpen } = useDialog();\n  const Comp = asChild ? Slot : \"button\";\n  return (\n    <Comp\n      data-slot=\"dialog-close\"\n      onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n        onClick?.(e);\n        setOpen(false);\n      }}\n      {...(props as Record<string, unknown>)}\n    />\n  );\n}\n\nexport function DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(DIALOG_HEADER, className)}\n      {...props}\n    />\n  );\n}\n\nexport function DialogFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(DIALOG_FOOTER, className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * Announces `id` as the dialog's title or description while the part is\n * mounted. A layout effect, so the reference is in place before the first\n * paint of an opening dialog and gone with the part — DialogContent never\n * points at an id that is not in the document. Outside a Dialog there is\n * nothing to register with: the part renders as before rather than throwing,\n * since it never needed the context until now.\n */\nfunction useRegisteredId(\n  own: string | undefined,\n  register: React.Dispatch<React.SetStateAction<string | undefined>> | undefined,\n): string {\n  const generated = React.useId();\n  const id = own ?? generated;\n  React.useLayoutEffect(() => {\n    if (!register) return;\n    register(id);\n    // Clear only our own id: a title mounted after this one has already taken the slot.\n    return () => register((current) => (current === id ? undefined : current));\n  }, [id, register]);\n  return id;\n}\n\nexport function DialogTitle({ className, id, ...props }: React.ComponentProps<\"h2\">) {\n  const titleId = useRegisteredId(id, React.useContext(DialogContext)?.setTitleId);\n  return (\n    <h2\n      id={titleId}\n      data-slot=\"dialog-title\"\n      className={cn(DIALOG_TITLE, className)}\n      {...props}\n    />\n  );\n}\n\nexport function DialogDescription({ className, id, ...props }: React.ComponentProps<\"p\">) {\n  const descriptionId = useRegisteredId(id, React.useContext(DialogContext)?.setDescriptionId);\n  return (\n    <p\n      id={descriptionId}\n      data-slot=\"dialog-description\"\n      className={cn(DIALOG_DESCRIPTION, className)}\n      {...props}\n    />\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/{drawer.js → atomic/drawer.js}

@@ -1,13 +1,13 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { cn } from "../lib/cn.js";
-import { useControllableState } from "../primitives/use-controllable-state.js";
-import { DismissableLayerScope, useDismissableLayer } from "../primitives/dismissable-layer.js";
-import { useFocusScope } from "../primitives/focus-scope.js";
-import { mergeRefs } from "../primitives/merge-refs.js";
-import { Portal } from "../primitives/portal.js";
-import { Slot } from "../primitives/slot.js";
+import { cn } from "../../lib/cn.js";
+import { useControllableState } from "../../primitives/use-controllable-state.js";
+import { DismissableLayerScope, useDismissableLayer, useModalScrimStyle } from "../../primitives/dismissable-layer.js";
+import { useFocusScope } from "../../primitives/focus-scope.js";
+import { mergeRefs } from "../../primitives/merge-refs.js";
+import { Portal } from "../../primitives/portal.js";
+import { Slot } from "../../primitives/slot.js";
 import {
   DRAWER_BODY,
   DRAWER_CONTENT_BASE,
@@ -18,7 +18,7 @@ import {
   DRAWER_OVERLAY,
   DRAWER_TITLE,
   drawerDirectionClasses
-} from "../generated/drawer.js";
+} from "../../generated/drawer.js";
 const CLOSE_THRESHOLD = 0.25;
 const VELOCITY_THRESHOLD = 0.4;
 const DRAG_AFTER_OPEN_MS = 500;
@@ -249,6 +249,7 @@ function DrawerContent({ className, children, ...props }) {
     pointerOutside: false,
     modal: true
   });
+  const scrimStyle = useModalScrimStyle(dismissRef);
   if (!present) return null;
   const state = closing ? "closed" : "open";
   return /* @__PURE__ */ jsxs(Portal, { children: [
@@ -259,6 +260,7 @@ function DrawerContent({ className, children, ...props }) {
         "data-slot": "drawer-overlay",
         "data-state": state,
         className: DRAWER_OVERLAY,
+        style: scrimStyle,
         onClick: () => setOpen(false)
       }
     ),

package/dist/components/atomic/drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/atomic/drawer.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { useControllableState } from \"../../primitives/use-controllable-state\";\nimport { DismissableLayerScope, useDismissableLayer, useModalScrimStyle } from \"../../primitives/dismissable-layer\";\nimport { useFocusScope } from \"../../primitives/focus-scope\";\nimport { mergeRefs } from \"../../primitives/merge-refs\";\nimport { Portal } from \"../../primitives/portal\";\nimport { Slot } from \"../../primitives/slot\";\nimport {\n  DRAWER_BODY,\n  DRAWER_CONTENT_BASE,\n  DRAWER_DESCRIPTION,\n  DRAWER_FOOTER,\n  DRAWER_HANDLE,\n  DRAWER_HEADER,\n  DRAWER_OVERLAY,\n  DRAWER_TITLE,\n  drawerDirectionClasses,\n  type DrawerDirection,\n} from \"../../generated/drawer\";\n\nexport type { DrawerDirection };\n\n// Drag-to-dismiss tuning (pointer physics, TS-only — Rust stays render-only).\n// Values from Vaul: a release past 25% of the panel's size along the drag\n// axis, or a flick faster than 0.4px/ms, closes; anything short snaps back.\n// Drags are refused for the first 500ms after opening so the enter finishes.\nconst CLOSE_THRESHOLD = 0.25;\nconst VELOCITY_THRESHOLD = 0.4;\nconst DRAG_AFTER_OPEN_MS = 500;\n// The closing node is dropped on its exit `transitionend`; this is the safety\n// net for when that never fires (display:none ancestor, tab hidden, a full\n// drag that left the panel exactly at its off-screen transform). Just past\n// the 500ms transition in motion.css.\nconst EXIT_FALLBACK_MS = 600;\n\ninterface DrawerContextValue {\n  open: boolean;\n  setOpen: (next: boolean) => void;\n  direction: DrawerDirection;\n  triggerRef: React.RefObject<HTMLElement | null>;\n}\n\nconst DrawerContext = React.createContext<DrawerContextValue | null>(null);\n\nfunction useDrawer(): DrawerContextValue {\n  const ctx = React.useContext(DrawerContext);\n  if (!ctx) throw new Error(\"Drawer parts must be used within <Drawer>\");\n  return ctx;\n}\n\nexport interface DrawerProps {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  direction?: DrawerDirection;\n  children?: React.ReactNode;\n}\n\nexport function Drawer({\n  open,\n  defaultOpen = false,\n  onOpenChange,\n  direction = \"bottom\",\n  children,\n}: DrawerProps) {\n  const [isOpen, setOpen] = useControllableState<boolean>({\n    ...(open !== undefined ? { value: open } : {}),\n    defaultValue: defaultOpen,\n    ...(onOpenChange ? { onChange: onOpenChange } : {}),\n  });\n  const triggerRef = React.useRef<HTMLElement | null>(null);\n  return (\n    <DrawerContext.Provider value={{ open: isOpen, setOpen, direction, triggerRef }}>\n      <div data-slot=\"drawer\">{children}</div>\n    </DrawerContext.Provider>\n  );\n}\n\nexport interface DrawerTriggerProps extends React.ComponentProps<\"button\"> {\n  asChild?: boolean;\n}\n\nexport function DrawerTrigger({ asChild = false, onClick, ...props }: DrawerTriggerProps) {\n  const { setOpen, triggerRef } = useDrawer();\n  const Comp = asChild ? Slot : \"button\";\n  return (\n    <Comp\n      data-slot=\"drawer-trigger\"\n      ref={triggerRef as React.Ref<HTMLButtonElement>}\n      onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n        onClick?.(e);\n        setOpen(true);\n      }}\n      {...(props as Record<string, unknown>)}\n    />\n  );\n}\n\nexport interface DrawerCloseProps extends React.ComponentProps<\"button\"> {\n  asChild?: boolean;\n}\n\nexport function DrawerClose({ asChild = false, onClick, ...props }: DrawerCloseProps) {\n  const { setOpen } = useDrawer();\n  const Comp = asChild ? Slot : \"button\";\n  return (\n    <Comp\n      data-slot=\"drawer-close\"\n      onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n        onClick?.(e);\n        setOpen(false);\n      }}\n      {...(props as Record<string, unknown>)}\n    />\n  );\n}\n\n/**\n * Standalone scrim, redundant with the one {@link DrawerContent} renders (as in\n * shadcn). Mounted only while open; the animated exit lives on the content's\n * own scrim.\n */\nexport function DrawerOverlay({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { open, setOpen } = useDrawer();\n  if (!open) return null;\n  return (\n    <div\n      data-slot=\"drawer-overlay\"\n      data-state=\"open\"\n      onClick={() => setOpen(false)}\n      className={cn(DRAWER_OVERLAY, className)}\n      {...props}\n    />\n  );\n}\n\n// Positive delta = the finger moved towards the docked edge (bottom: down,\n// top: up, right: right, left: left), i.e. the closing direction.\nconst EDGE_SIGN: Record<DrawerDirection, 1 | -1> = {\n  bottom: 1,\n  top: -1,\n  right: 1,\n  left: -1,\n};\n\nfunction isVertical(direction: DrawerDirection): boolean {\n  return direction === \"bottom\" || direction === \"top\";\n}\n\nfunction translateAlong(direction: DrawerDirection, px: number): string {\n  return isVertical(direction) ? `translate3d(0, ${px}px, 0)` : `translate3d(${px}px, 0, 0)`;\n}\n\n// Vaul's over-drag curve: the panel barely moves past its docked edge. Only\n// starts displacing once the finger has gone ~6px (log(v + 1) > 2); before\n// that the curve is negative, which reads as \"stay home\".\nfunction dampen(px: number): number {\n  return Math.max(8 * (Math.log(px + 1) - 2), 0);\n}\n\n// Vaul's `shouldDrag`, minus snap points. `towardsEdge` false = the user is\n// pulling the panel further open, which on a vertical sheet is the scroll\n// gesture — hand it to the scroller. The scroll walk is vertical-only: a\n// horizontal sheet never competes with its body's vertical scroll.\nfunction shouldDrag(\n  target: EventTarget | null,\n  panel: HTMLElement,\n  direction: DrawerDirection,\n  towardsEdge: boolean,\n): boolean {\n  if (!(target instanceof Element)) return false;\n  if (target.tagName === \"SELECT\") return false; // https://github.com/emilkowalski/vaul/issues/483\n  if (target.closest(\"[data-vaul-no-drag]\")) return false;\n  if (!isVertical(direction)) return true;\n  if (!towardsEdge) return false;\n  const selection = window.getSelection?.()?.toString();\n  if (selection && selection.length > 0) return false;\n  // any scroller between the finger and the panel that isn't at its top owns\n  // the gesture; the user can scroll up and the next move re-asks\n  let el: Element | null = target;\n  while (el && el !== panel) {\n    if (el.scrollHeight > el.clientHeight && el.scrollTop > 0) return false;\n    el = el.parentElement;\n  }\n  return true;\n}\n\ninterface DragGesture {\n  pointerId: number;\n  // the element under the finger at pointerdown — once the panel captures the\n  // pointer, every later event's `target` is the panel itself, and the scroll\n  // walk in `shouldDrag` would never see the scroller it started in\n  target: EventTarget | null;\n  start: number; // clientX/Y along the axis\n  time: number;\n  size: number; // panel extent along the axis, for the close threshold + scrim fade\n  allowed: boolean | null; // null = undecided; true sticks for the gesture (Vaul's isAllowedToDrag)\n  delta: number;\n}\n\n// ── drag-to-dismiss (Vaul pointer physics) ────────────────────────────────\n// No React state on the hot path: the gesture lives in a ref and every move is\n// one inline `transform` write on the panel plus one `opacity` write on the\n// scrim. Not a CSS var: a custom-property change re-resolves inherited values\n// across the whole subtree, per move.\nfunction useDrawerDrag(opts: {\n  panelRef: React.RefObject<HTMLDivElement | null>;\n  scrimRef: React.RefObject<HTMLDivElement | null>;\n  direction: DrawerDirection;\n  open: boolean;\n  present: boolean;\n  openedAtRef: React.RefObject<number>;\n  onClose: () => void;\n}) {\n  const { panelRef, scrimRef, direction, open, present, openedAtRef, onClose } = opts;\n  const dragRef = React.useRef<DragGesture | null>(null);\n\n  // Native scroll suppression. Once a gesture is allowed, the browser must not\n  // turn the same touch into a scroll/overscroll of a body sitting at its top —\n  // that would pointercancel us mid-drag. Pointer events precede the compat\n  // touch events, so `allowed` is already decided when this runs. React's\n  // onTouchMove is passive, hence the manual listener.\n  React.useEffect(() => {\n    if (!present) return;\n    const panel = panelRef.current;\n    if (!panel) return;\n    const onTouchMove = (e: TouchEvent) => {\n      if (dragRef.current?.allowed) e.preventDefault();\n    };\n    panel.addEventListener(\"touchmove\", onTouchMove, { passive: false });\n    return () => panel.removeEventListener(\"touchmove\", onTouchMove);\n  }, [present, panelRef]);\n\n  const axisPos = (e: React.PointerEvent) => (isVertical(direction) ? e.clientY : e.clientX);\n\n  const onPointerDown = (e: React.PointerEvent<HTMLDivElement>) => {\n    const panel = panelRef.current;\n    // one gesture at a time: a second finger must not reset the first one's\n    // state and leave the panel stranded mid-drag\n    if (!panel || e.button > 0 || !open || dragRef.current) return;\n    const target = e.target as HTMLElement;\n    if (target.closest('[data-slot=\"drawer-close\"]')) return;\n    // React bubbles portal events (a Select's listbox, a Popover) through the\n    // tree; a drag can only start from the panel's own DOM\n    if (!panel.contains(target)) return;\n    const rect = panel.getBoundingClientRect();\n    dragRef.current = {\n      pointerId: e.pointerId,\n      target,\n      start: axisPos(e),\n      time: Date.now(),\n      size: isVertical(direction) ? rect.height : rect.width,\n      allowed: null,\n      delta: 0,\n    };\n    // Capture on the element under the finger, not the panel (Vaul does the\n    // same): a click's target is the common ancestor of pointerdown and\n    // pointerup, so capturing on the panel would steal every click from the\n    // buttons and links inside. No preventDefault either — inputs inside the\n    // sheet must still focus on tap.\n    try {\n      target.setPointerCapture?.(e.pointerId);\n    } catch {\n      // jsdom / unsupported — capture is a nice-to-have, the drag works without it\n    }\n  };\n\n  const onPointerMove = (e: React.PointerEvent<HTMLDivElement>) => {\n    const drag = dragRef.current;\n    const panel = panelRef.current;\n    if (!drag || !panel) return;\n    const delta = (axisPos(e) - drag.start) * EDGE_SIGN[direction];\n    drag.delta = delta;\n    if (!drag.allowed) {\n      if (Date.now() - openedAtRef.current < DRAG_AFTER_OPEN_MS) return;\n      // refused on this move only — the user may scroll the body to its top\n      // and carry on, so the gesture stays alive\n      if (!shouldDrag(drag.target, panel, direction, delta > 0)) return;\n      drag.allowed = true;\n      panel.setAttribute(\"data-dragging\", \"true\"); // CSS drops the transitions for 1:1 tracking\n      scrimRef.current?.setAttribute(\"data-dragging\", \"true\");\n    }\n    const scrim = scrimRef.current;\n    if (delta < 0) {\n      panel.style.transform = translateAlong(direction, -dampen(-delta) * EDGE_SIGN[direction]);\n      if (scrim) scrim.style.opacity = \"1\";\n      return;\n    }\n    panel.style.transform = translateAlong(direction, delta * EDGE_SIGN[direction]);\n    if (scrim) {\n      scrim.style.opacity = `${Math.min(1, Math.max(0, 1 - delta / drag.size))}`;\n    }\n  };\n\n  // Release hands styling back to the CSS: with the inline transform gone and\n  // data-dragging cleared in the same frame, the restored transition carries\n  // the panel from wherever the finger left it — home on a snap-back, or (with\n  // data-state=closed committed by `onClose` in the same frame) straight off.\n  const endGesture = (e: React.PointerEvent<HTMLDivElement>, cancelled: boolean) => {\n    const drag = dragRef.current;\n    const panel = panelRef.current;\n    if (!drag || !panel || e.pointerId !== drag.pointerId) return;\n    dragRef.current = null;\n    try {\n      (drag.target as HTMLElement).releasePointerCapture?.(drag.pointerId);\n    } catch {\n      // jsdom / unsupported\n    }\n    if (!drag.allowed) return;\n    panel.removeAttribute(\"data-dragging\");\n    panel.style.transform = \"\";\n    const scrim = scrimRef.current;\n    if (scrim) {\n      scrim.removeAttribute(\"data-dragging\");\n      scrim.style.opacity = \"\";\n    }\n    if (cancelled || drag.delta <= 0) return;\n    const dt = Date.now() - drag.time;\n    const velocity = dt > 0 ? drag.delta / dt : 0;\n    if (velocity > VELOCITY_THRESHOLD || drag.delta >= drag.size * CLOSE_THRESHOLD) {\n      onClose();\n    }\n  };\n\n  return {\n    onPointerDown,\n    onPointerMove,\n    onPointerUp: (e: React.PointerEvent<HTMLDivElement>) => endGesture(e, false),\n    onPointerCancel: (e: React.PointerEvent<HTMLDivElement>) => endGesture(e, true),\n  };\n}\n\n/**\n * The panel plus its scrim. Presence outlives `open`: once it turns false the\n * panel flips to `data-state=\"closed\"` and is unmounted when its exit\n * `transform` transition ends (or the fallback timer fires). Re-opening\n * mid-exit just flips the state back and the same transition carries the\n * panel home. Drag-to-dismiss is TS-only pointer physics; opt a region out\n * with `data-vaul-no-drag`.\n */\nexport function DrawerContent({ className, children, ...props }: React.ComponentProps<\"div\">) {\n  const { open, setOpen, direction, triggerRef } = useDrawer();\n  // Derived during render so the panel is in the same commit that opened it —\n  // the enter keyframe plays on insertion, no mount flip needed.\n  const [present, setPresent] = React.useState(open);\n  if (open && !present) setPresent(true);\n  const closing = present && !open;\n\n  const scopeRef = useFocusScope(open, { returnFocusTo: triggerRef });\n  const panelRef = React.useRef<HTMLDivElement | null>(null);\n  const scrimRef = React.useRef<HTMLDivElement | null>(null);\n  const openedAtRef = React.useRef(0);\n\n  React.useEffect(() => {\n    if (open) openedAtRef.current = Date.now();\n  }, [open]);\n\n  React.useEffect(() => {\n    if (!open) return;\n    const prev = document.body.style.overflow;\n    document.body.style.overflow = \"hidden\";\n    return () => {\n      document.body.style.overflow = prev;\n    };\n  }, [open]);\n\n  // Safety net for a missed exit transitionend; the cleanup is what cancels it\n  // on re-open.\n  React.useEffect(() => {\n    if (!closing) return;\n    const id = setTimeout(() => setPresent(false), EXIT_FALLBACK_MS);\n    return () => clearTimeout(id);\n  }, [closing]);\n\n  const drag = useDrawerDrag({\n    panelRef,\n    scrimRef,\n    direction,\n    open,\n    present,\n    openedAtRef,\n    onClose: () => setOpen(false),\n  });\n\n  // On the stack for Escape, and modal so the layers below ignore every press\n  // while it is open — its scrim included. Outside clicks stay with the scrim:\n  // it covers everything but the layers above, so a press on a toast or a\n  // nested Dialog's backdrop is not a click away from the Drawer.\n  const dismissRef = useDismissableLayer({\n    enabled: open,\n    onDismiss: () => setOpen(false),\n    pointerOutside: false,\n    modal: true,\n  });\n  const scrimStyle = useModalScrimStyle(dismissRef);\n\n  if (!present) return null;\n  const state = closing ? \"closed\" : \"open\";\n  return (\n    <Portal>\n      <div\n        ref={scrimRef}\n        data-slot=\"drawer-overlay\"\n        data-state={state}\n        className={DRAWER_OVERLAY}\n        style={scrimStyle}\n        onClick={() => setOpen(false)}\n      />\n      <div\n        role=\"dialog\"\n        aria-modal=\"true\"\n        data-slot=\"drawer-content\"\n        data-state={state}\n        data-vaul-drawer-direction={direction}\n        ref={mergeRefs(scopeRef, panelRef, dismissRef)}\n        // transitionend bubbles from children (a hover on a button inside),\n        // so pin it to the panel's own exit transform\n        onTransitionEnd={(e) => {\n          if (closing && e.propertyName === \"transform\" && e.target === e.currentTarget) {\n            setPresent(false);\n          }\n        }}\n        onPointerDown={drag.onPointerDown}\n        onPointerMove={drag.onPointerMove}\n        onPointerUp={drag.onPointerUp}\n        onPointerCancel={drag.onPointerCancel}\n        className={cn(DRAWER_CONTENT_BASE, drawerDirectionClasses[direction], className)}\n        {...(props as Record<string, unknown>)}\n      >\n        {direction === \"bottom\" ? (\n          <div\n            data-slot=\"drawer-handle\"\n            className={DRAWER_HANDLE}\n          />\n        ) : null}\n        <div\n          data-slot=\"drawer-body\"\n          className={DRAWER_BODY}\n        >\n          <DismissableLayerScope layer={dismissRef}>{children}</DismissableLayerScope>\n        </div>\n      </div>\n    </Portal>\n  );\n}\n\nexport function DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(DRAWER_HEADER, className)}\n      {...props}\n    />\n  );\n}\n\nexport function DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(DRAWER_FOOTER, className)}\n      {...props}\n    />\n  );\n}\n\nexport function DrawerTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-title\"\n      className={cn(DRAWER_TITLE, className)}\n      {...props}\n    />\n  );\n}\n\nexport function DrawerDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-description\"\n      className={cn(DRAWER_DESCRIPTION, className)}\n      {...props}\n    />\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/{dropdown-menu.js → atomic/dropdown-menu.js}

@@ -1,15 +1,16 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { cn } from "../lib/cn.js";
-import { useControllableState } from "../primitives/use-controllable-state.js";
-import { useFloating } from "../primitives/use-floating.js";
-import { DismissableLayerScope, useDismissableLayer } from "../primitives/dismissable-layer.js";
-import { usePresence } from "../primitives/presence.js";
-import { useRovingFocus } from "../primitives/use-roving-focus.js";
-import { mergeRefs } from "../primitives/merge-refs.js";
-import { Portal } from "../primitives/portal.js";
-import { Slot } from "../primitives/slot.js";
+import { cn } from "../../lib/cn.js";
+import { useControllableState } from "../../primitives/use-controllable-state.js";
+import { useFloating } from "../../primitives/use-floating.js";
+import { DismissableLayerScope, useDismissableLayer } from "../../primitives/dismissable-layer.js";
+import { usePresence } from "../../primitives/presence.js";
+import { useRovingFocus } from "../../primitives/use-roving-focus.js";
+import { useHoverIntent } from "../../primitives/use-hover-intent.js";
+import { mergeRefs } from "../../primitives/merge-refs.js";
+import { Portal } from "../../primitives/portal.js";
+import { Slot } from "../../primitives/slot.js";
 import {
   DROPDOWN_MENU_CHECK_ITEM,
   DROPDOWN_MENU_CONTENT,
@@ -20,7 +21,7 @@ import {
   DROPDOWN_MENU_SHORTCUT,
   DROPDOWN_MENU_SUB_CONTENT,
   DROPDOWN_MENU_SUB_TRIGGER
-} from "../generated/dropdown-menu.js";
+} from "../../generated/dropdown-menu.js";
 const DropdownMenuContext = React.createContext(
   null
 );
@@ -97,6 +98,17 @@ function DropdownMenuContent({
     if (!open) return;
     items()[activeIndex]?.focus();
   }, [open, activeIndex]);
+  const wasOpen = React.useRef(false);
+  React.useEffect(() => {
+    if (open) {
+      wasOpen.current = true;
+      return;
+    }
+    if (!wasOpen.current) return;
+    wasOpen.current = false;
+    const active = document.activeElement;
+    if (!active || active === document.body || contentRef.current?.contains(active)) anchorRef.current?.focus();
+  }, [open, anchorRef]);
   const close = React.useCallback(() => setOpen(false), [setOpen]);
   if (!isPresent) return null;
   return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(DropdownMenuCloseContext.Provider, { value: close, children: /* @__PURE__ */ jsx(
@@ -171,9 +183,9 @@ function DropdownMenuCheckboxItem({
   checked,
   disabled,
   onClick,
+  onKeyDown,
   ...props
 }) {
-  const close = React.useContext(DropdownMenuCloseContext);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -190,7 +202,13 @@ function DropdownMenuCheckboxItem({
       onClick: (e) => {
         if (disabled) return;
         onClick?.(e);
-        close();
+      },
+      onKeyDown: (e) => {
+        onKeyDown?.(e);
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          e.currentTarget.click();
+        }
       },
       ...props,
       children: [
@@ -291,13 +309,29 @@ function DropdownMenuSub({ open, defaultOpen = false, onOpenChange, children })
     defaultValue: defaultOpen,
     ...onOpenChange ? { onChange: onOpenChange } : {}
   });
-  return /* @__PURE__ */ jsx(DropdownMenuSubContext.Provider, { value: { open: isOpen, setOpen }, children: /* @__PURE__ */ jsx("div", { "data-slot": "dropdown-menu-sub", children }) });
+  const triggerRef = React.useRef(null);
+  const focusFirst = React.useRef(false);
+  const hover = useHoverIntent({
+    onOpen: () => setOpen(true),
+    onClose: () => setOpen(false),
+    openDelay: 100,
+    closeDelay: 150
+  });
+  return /* @__PURE__ */ jsx(DropdownMenuSubContext.Provider, { value: { open: isOpen, setOpen, triggerRef, focusFirst }, children: /* @__PURE__ */ jsx("div", { "data-slot": "dropdown-menu-sub", ...hover, children }) });
 }
-function DropdownMenuSubTrigger({ className, inset, children, onClick, ...props }) {
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  onClick,
+  onKeyDown,
+  ...props
+}) {
   const ctx = React.useContext(DropdownMenuSubContext);
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ref: ctx?.triggerRef,
       "data-slot": "dropdown-menu-sub-trigger",
       "data-inset": inset ? "" : void 0,
       "data-state": ctx?.open ? "open" : "closed",
@@ -313,6 +347,14 @@ function DropdownMenuSubTrigger({ className, inset, children, onClick, ...props
         onClick?.(e);
         ctx?.setOpen(!ctx.open);
       },
+      onKeyDown: (e) => {
+        onKeyDown?.(e);
+        if (!ctx || e.key !== "ArrowRight" && e.key !== "Enter" && e.key !== " ") return;
+        e.preventDefault();
+        e.stopPropagation();
+        ctx.focusFirst.current = true;
+        ctx.setOpen(true);
+      },
       ...props,
       children: [
         children,
@@ -321,12 +363,29 @@ function DropdownMenuSubTrigger({ className, inset, children, onClick, ...props
     }
   );
 }
-function DropdownMenuSubContent({ className, children, ...props }) {
+function DropdownMenuSubContent({ className, children, onKeyDown, ...props }) {
   const ctx = React.useContext(DropdownMenuSubContext);
+  const ref = React.useRef(null);
+  const open = ctx?.open ?? false;
+  React.useEffect(() => {
+    if (!open || !ctx?.focusFirst.current) return;
+    ctx.focusFirst.current = false;
+    ref.current?.querySelector("[role^='menuitem']")?.focus();
+  }, [open, ctx]);
   if (!ctx?.open) return null;
   return /* @__PURE__ */ jsx(
     "div",
     {
+      ref,
+      onKeyDown: (e) => {
+        onKeyDown?.(e);
+        if (e.key === "ArrowLeft" || e.key === "Escape") {
+          e.preventDefault();
+          e.stopPropagation();
+          ctx.setOpen(false);
+          ctx.triggerRef.current?.focus();
+        }
+      },
       "data-slot": "dropdown-menu-sub-content",
       "data-state": "open",
       role: "menu",