@evinvest/uikit 0.26.0 → 0.29.1

package/dist/components/dialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useControllableState } from \"../primitives/use-controllable-state\";\nimport { useDismissableLayer } 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}\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  return (\n    <DialogContext.Provider value={{ open: isOpen, setOpen, triggerRef }}>\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, setOpen } = useDialog();\n  return (\n    <div\n      data-slot=\"dialog-overlay\"\n      data-state={open ? \"open\" : \"closed\"}\n      onClick={() => setOpen(false)}\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 } = 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  });\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 />\n      <div\n        data-slot=\"dialog-content\"\n        role=\"dialog\"\n        aria-modal=\"true\"\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        {children}\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\nexport function DialogTitle({ className, ...props }: React.ComponentProps<\"h2\">) {\n  return (\n    <h2\n      data-slot=\"dialog-title\"\n      className={cn(DIALOG_TITLE, className)}\n      {...props}\n    />\n  );\n}\n\nexport function DialogDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"dialog-description\"\n      className={cn(DIALOG_DESCRIPTION, className)}\n      {...props}\n    />\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/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 } 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}\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  return (\n    <DialogContext.Provider value={{ open: isOpen, setOpen, triggerRef }}>\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, setOpen } = useDialog();\n  return (\n    <div\n      data-slot=\"dialog-overlay\"\n      data-state={open ? \"open\" : \"closed\"}\n      onClick={() => setOpen(false)}\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 } = 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  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 />\n      <div\n        data-slot=\"dialog-content\"\n        role=\"dialog\"\n        aria-modal=\"true\"\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\nexport function DialogTitle({ className, ...props }: React.ComponentProps<\"h2\">) {\n  return (\n    <h2\n      data-slot=\"dialog-title\"\n      className={cn(DIALOG_TITLE, className)}\n      {...props}\n    />\n  );\n}\n\nexport function DialogDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\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

@@ -3,6 +3,7 @@ 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";
@@ -242,6 +243,12 @@ function DrawerContent({ className, children, ...props }) {
     openedAtRef,
     onClose: () => setOpen(false)
   });
+  const dismissRef = useDismissableLayer({
+    enabled: open,
+    onDismiss: () => setOpen(false),
+    pointerOutside: false,
+    modal: true
+  });
   if (!present) return null;
   const state = closing ? "closed" : "open";
   return /* @__PURE__ */ jsxs(Portal, { children: [
@@ -263,10 +270,7 @@ function DrawerContent({ className, children, ...props }) {
         "data-slot": "drawer-content",
         "data-state": state,
         "data-vaul-drawer-direction": direction,
-        ref: mergeRefs(scopeRef, panelRef),
-        onKeyDown: (e) => {
-          if (e.key === "Escape") setOpen(false);
-        },
+        ref: mergeRefs(scopeRef, panelRef, dismissRef),
         onTransitionEnd: (e) => {
           if (closing && e.propertyName === "transform" && e.target === e.currentTarget) {
             setPresent(false);
@@ -291,7 +295,7 @@ function DrawerContent({ className, children, ...props }) {
             {
               "data-slot": "drawer-body",
               className: DRAWER_BODY,
-              children
+              children: /* @__PURE__ */ jsx(DismissableLayerScope, { layer: dismissRef, children })
             }
           )
         ]

package/dist/components/drawer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/drawer.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useControllableState } from \"../primitives/use-controllable-state\";\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  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        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)}\n        onKeyDown={(e) => {\n          if (e.key === \"Escape\") setOpen(false);\n        }}\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          {children}\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":[]}
+{"version":3,"sources":["../../src/components/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 } 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\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        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

@@ -4,7 +4,7 @@ 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 { useDismissableLayer } from "../primitives/dismissable-layer.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";
@@ -63,6 +63,7 @@ function DropdownMenuTrigger({ asChild = false, onClick, ...props }) {
 function DropdownMenuContent({
   className,
   sideOffset = 4,
+  align = "start",
   children,
   ...props
 }) {
@@ -72,7 +73,7 @@ function DropdownMenuContent({
     anchorRef,
     open,
     side: "bottom",
-    align: "start",
+    align,
     offset: sideOffset
   });
   const dismissRef = useDismissableLayer({
@@ -84,11 +85,14 @@ function DropdownMenuContent({
   const items = () => Array.from(
     contentRef.current?.querySelectorAll("[role^='menuitem']") ?? []
   ).filter((el) => el.getAttribute("data-disabled") === null);
-  const { activeIndex, onKeyDown: rovingKeyDown } = useRovingFocus({
-    count: 64,
+  const { activeIndex, setActiveIndex, onKeyDown: rovingKeyDown } = useRovingFocus({
+    count: () => items().length,
     orientation: "vertical",
     loop: true
   });
+  React.useEffect(() => {
+    if (!open) setActiveIndex(0);
+  }, [open, setActiveIndex]);
   React.useEffect(() => {
     if (!open) return;
     items()[activeIndex]?.focus();
@@ -103,10 +107,7 @@ function DropdownMenuContent({
       "data-side": side,
       role: "menu",
       tabIndex: -1,
-      onKeyDown: (e) => {
-        rovingKeyDown(e);
-        if (e.key === "Escape") setOpen(false);
-      },
+      onKeyDown: rovingKeyDown,
       ref: mergeRefs(floatingRef, dismissRef, presRef, contentRef),
       style,
       className: cn(
@@ -114,7 +115,7 @@ function DropdownMenuContent({
         className
       ),
       ...props,
-      children
+      children: /* @__PURE__ */ jsx(DismissableLayerScope, { layer: dismissRef, children })
     }
   ) }) });
 }
@@ -124,6 +125,7 @@ function DropdownMenuGroup({ className, ...props }) {
   return /* @__PURE__ */ jsx("div", { "data-slot": "dropdown-menu-group", role: "group", className, ...props });
 }
 function DropdownMenuItem({
+  asChild = false,
   className,
   inset,
   variant = "neutral",
@@ -133,8 +135,9 @@ function DropdownMenuItem({
   ...props
 }) {
   const close = React.useContext(DropdownMenuCloseContext);
+  const Comp = asChild ? Slot : "div";
   return /* @__PURE__ */ jsx(
-    "div",
+    Comp,
     {
       "data-slot": "dropdown-menu-item",
       "data-inset": inset ? "" : void 0,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/dropdown-menu.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useControllableState } from \"../primitives/use-controllable-state\";\nimport { useFloating } from \"../primitives/use-floating\";\nimport { useDismissableLayer } from \"../primitives/dismissable-layer\";\nimport { usePresence } from \"../primitives/presence\";\nimport { useRovingFocus } from \"../primitives/use-roving-focus\";\nimport { mergeRefs } from \"../primitives/merge-refs\";\nimport { Portal } from \"../primitives/portal\";\nimport { Slot } from \"../primitives/slot\";\nimport {\n  DROPDOWN_MENU_CHECK_ITEM,\n  DROPDOWN_MENU_CONTENT,\n  DROPDOWN_MENU_ITEM,\n  DROPDOWN_MENU_ITEM_INDICATOR,\n  DROPDOWN_MENU_LABEL,\n  DROPDOWN_MENU_SEPARATOR,\n  DROPDOWN_MENU_SHORTCUT,\n  DROPDOWN_MENU_SUB_CONTENT,\n  DROPDOWN_MENU_SUB_TRIGGER,\n} from \"../generated/dropdown-menu\";\n\ninterface DropdownMenuContextValue {\n  open: boolean;\n  setOpen: (next: boolean) => void;\n  anchorRef: React.RefObject<HTMLElement | null>;\n}\n\nconst DropdownMenuContext = React.createContext<DropdownMenuContextValue | null>(\n  null,\n);\n\nfunction useDropdownMenu(): DropdownMenuContextValue {\n  const ctx = React.useContext(DropdownMenuContext);\n  if (!ctx) throw new Error(\"DropdownMenu parts must be used within <DropdownMenu>\");\n  return ctx;\n}\n\nexport interface DropdownMenuProps {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  children?: React.ReactNode;\n}\n\nexport function DropdownMenu({ open, defaultOpen = false, onOpenChange, children }: DropdownMenuProps) {\n  const [isOpen, setOpen] = useControllableState<boolean>({\n    ...(open !== undefined ? { value: open } : {}),\n    defaultValue: defaultOpen,\n    ...(onOpenChange ? { onChange: onOpenChange } : {}),\n  });\n  const anchorRef = React.useRef<HTMLElement | null>(null);\n  return (\n    <DropdownMenuContext.Provider value={{ open: isOpen, setOpen, anchorRef }}>\n      <div data-slot=\"dropdown-menu\">{children}</div>\n    </DropdownMenuContext.Provider>\n  );\n}\n\nexport function DropdownMenuPortal({ children }: { children?: React.ReactNode }) {\n  return <Portal>{children}</Portal>;\n}\n\nexport interface DropdownMenuTriggerProps extends React.ComponentProps<\"button\"> {\n  asChild?: boolean;\n}\n\nexport function DropdownMenuTrigger({ asChild = false, onClick, ...props }: DropdownMenuTriggerProps) {\n  const { open, setOpen, anchorRef } = useDropdownMenu();\n  const Comp = asChild ? Slot : \"button\";\n  return (\n    <Comp\n      data-slot=\"dropdown-menu-trigger\"\n      aria-haspopup=\"menu\"\n      aria-expanded={open}\n      data-state={open ? \"open\" : \"closed\"}\n      ref={anchorRef as React.Ref<HTMLButtonElement>}\n      onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n        onClick?.(e);\n        setOpen(!open);\n      }}\n      {...(props as Record<string, unknown>)}\n    />\n  );\n}\n\nexport interface DropdownMenuContentProps extends React.ComponentProps<\"div\"> {\n  sideOffset?: number;\n}\n\nexport function DropdownMenuContent({\n  className,\n  sideOffset = 4,\n  children,\n  ...props\n}: DropdownMenuContentProps) {\n  const { open, setOpen, anchorRef } = useDropdownMenu();\n  const { isPresent, ref: presRef } = usePresence(open);\n  const { floatingRef, style, side } = useFloating({\n    anchorRef,\n    open,\n    side: \"bottom\",\n    align: \"start\",\n    offset: sideOffset,\n  });\n  const dismissRef = useDismissableLayer({\n    enabled: open,\n    onDismiss: () => setOpen(false),\n    exclude: [anchorRef],\n  });\n  const contentRef = React.useRef<HTMLDivElement | null>(null);\n  // Roving focus across rendered menu items: ArrowUp/Down move the active item.\n  const items = () =>\n    Array.from(\n      contentRef.current?.querySelectorAll<HTMLElement>(\"[role^='menuitem']\") ?? [],\n    ).filter((el) => el.getAttribute(\"data-disabled\") === null);\n  const { activeIndex, onKeyDown: rovingKeyDown } = useRovingFocus({\n    count: 64,\n    orientation: \"vertical\",\n    loop: true,\n  });\n  React.useEffect(() => {\n    if (!open) return;\n    items()[activeIndex]?.focus();\n  }, [open, activeIndex]);\n  // Selecting an item closes the menu: items call this through context.\n  const close = React.useCallback(() => setOpen(false), [setOpen]);\n  if (!isPresent) return null;\n  return (\n    <Portal>\n      <DropdownMenuCloseContext.Provider value={close}>\n        <div\n          data-slot=\"dropdown-menu-content\"\n          data-state={open ? \"open\" : \"closed\"}\n          data-side={side}\n          role=\"menu\"\n          tabIndex={-1}\n          onKeyDown={(e) => {\n            rovingKeyDown(e);\n            if (e.key === \"Escape\") setOpen(false);\n          }}\n          ref={mergeRefs(floatingRef, dismissRef, presRef, contentRef)}\n          style={style}\n          className={cn(\n            DROPDOWN_MENU_CONTENT,\n            className,\n          )}\n          {...(props as Record<string, unknown>)}\n        >\n          {children}\n        </div>\n      </DropdownMenuCloseContext.Provider>\n    </Portal>\n  );\n}\n\nconst DropdownMenuCloseContext = React.createContext<() => void>(() => {});\n\nexport function DropdownMenuGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div data-slot=\"dropdown-menu-group\" role=\"group\" className={className} {...props} />;\n}\n\nexport interface DropdownMenuItemProps extends React.ComponentProps<\"div\"> {\n  inset?: boolean;\n  variant?: \"neutral\" | \"destructive\";\n  disabled?: boolean;\n}\n\nexport function DropdownMenuItem({\n  className,\n  inset,\n  variant = \"neutral\",\n  disabled,\n  onClick,\n  onKeyDown,\n  ...props\n}: DropdownMenuItemProps) {\n  const close = React.useContext(DropdownMenuCloseContext);\n  return (\n    <div\n      data-slot=\"dropdown-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        DROPDOWN_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 DropdownMenuCheckboxItemProps extends React.ComponentProps<\"div\"> {\n  checked?: boolean;\n  disabled?: boolean;\n}\n\nexport function DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  disabled,\n  onClick,\n  ...props\n}: DropdownMenuCheckboxItemProps) {\n  const close = React.useContext(DropdownMenuCloseContext);\n  return (\n    <div\n      data-slot=\"dropdown-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        DROPDOWN_MENU_CHECK_ITEM,\n        className,\n      )}\n      onClick={(e) => {\n        if (disabled) return;\n        onClick?.(e);\n        close();\n      }}\n      {...props}\n    >\n      <span className={DROPDOWN_MENU_ITEM_INDICATOR}>\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 DropdownMenuRadioGroupContextValue {\n  value: string | undefined;\n  setValue: (next: string) => void;\n}\n\nconst DropdownMenuRadioGroupContext =\n  React.createContext<DropdownMenuRadioGroupContextValue | null>(null);\n\nexport interface DropdownMenuRadioGroupProps extends Omit<React.ComponentProps<\"div\">, \"onChange\"> {\n  value?: string;\n  onValueChange?: (value: string) => void;\n}\n\nexport function DropdownMenuRadioGroup({\n  className,\n  value,\n  onValueChange,\n  children,\n  ...props\n}: DropdownMenuRadioGroupProps) {\n  const ctx = React.useMemo<DropdownMenuRadioGroupContextValue>(\n    () => ({ value, setValue: (next) => onValueChange?.(next) }),\n    [value, onValueChange],\n  );\n  return (\n    <DropdownMenuRadioGroupContext.Provider value={ctx}>\n      <div data-slot=\"dropdown-menu-radio-group\" role=\"group\" className={className} {...props}>\n        {children}\n      </div>\n    </DropdownMenuRadioGroupContext.Provider>\n  );\n}\n\nexport interface DropdownMenuRadioItemProps extends React.ComponentProps<\"div\"> {\n  value: string;\n  disabled?: boolean;\n}\n\nexport function DropdownMenuRadioItem({\n  className,\n  children,\n  value,\n  disabled,\n  onClick,\n  ...props\n}: DropdownMenuRadioItemProps) {\n  const close = React.useContext(DropdownMenuCloseContext);\n  const group = React.useContext(DropdownMenuRadioGroupContext);\n  const checked = group?.value === value;\n  return (\n    <div\n      data-slot=\"dropdown-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        DROPDOWN_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={DROPDOWN_MENU_ITEM_INDICATOR}>\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 DropdownMenuLabelProps extends React.ComponentProps<\"div\"> {\n  inset?: boolean;\n}\n\nexport function DropdownMenuLabel({ className, inset, ...props }: DropdownMenuLabelProps) {\n  return (\n    <div\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset ? \"\" : undefined}\n      className={cn(DROPDOWN_MENU_LABEL, className)}\n      {...props}\n    />\n  );\n}\n\nexport function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dropdown-menu-separator\"\n      role=\"separator\"\n      className={cn(DROPDOWN_MENU_SEPARATOR, className)}\n      {...props}\n    />\n  );\n}\n\nexport function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(DROPDOWN_MENU_SHORTCUT, className)}\n      {...props}\n    />\n  );\n}\n\n// Sub-menus render inline (nested) rather than in a separate floating layer: the\n// sub-content is revealed in place when its trigger toggles, simplifying the\n// nesting Radix portals each level. data-state still reflects open/closed.\ninterface DropdownMenuSubContextValue {\n  open: boolean;\n  setOpen: (next: boolean) => void;\n}\n\nconst DropdownMenuSubContext = React.createContext<DropdownMenuSubContextValue | null>(null);\n\nexport interface DropdownMenuSubProps {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  children?: React.ReactNode;\n}\n\nexport function DropdownMenuSub({ open, defaultOpen = false, onOpenChange, children }: DropdownMenuSubProps) {\n  const [isOpen, setOpen] = useControllableState<boolean>({\n    ...(open !== undefined ? { value: open } : {}),\n    defaultValue: defaultOpen,\n    ...(onOpenChange ? { onChange: onOpenChange } : {}),\n  });\n  return (\n    <DropdownMenuSubContext.Provider value={{ open: isOpen, setOpen }}>\n      <div data-slot=\"dropdown-menu-sub\">{children}</div>\n    </DropdownMenuSubContext.Provider>\n  );\n}\n\nexport interface DropdownMenuSubTriggerProps extends React.ComponentProps<\"div\"> {\n  inset?: boolean;\n}\n\nexport function DropdownMenuSubTrigger({ className, inset, children, onClick, ...props }: DropdownMenuSubTriggerProps) {\n  const ctx = React.useContext(DropdownMenuSubContext);\n  return (\n    <div\n      data-slot=\"dropdown-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        DROPDOWN_MENU_SUB_TRIGGER,\n        className,\n      )}\n      onClick={(e) => {\n        onClick?.(e);\n        ctx?.setOpen(!ctx.open);\n      }}\n      {...props}\n    >\n      {children}\n      <svg className=\"ml-auto size-4\" 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 DropdownMenuSubContent({ className, children, ...props }: React.ComponentProps<\"div\">) {\n  const ctx = React.useContext(DropdownMenuSubContext);\n  if (!ctx?.open) return null;\n  return (\n    <div\n      data-slot=\"dropdown-menu-sub-content\"\n      data-state=\"open\"\n      role=\"menu\"\n      className={cn(\n        DROPDOWN_MENU_SUB_CONTENT,\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/dropdown-menu.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useControllableState } from \"../primitives/use-controllable-state\";\nimport { useFloating } from \"../primitives/use-floating\";\nimport { DismissableLayerScope, useDismissableLayer } from \"../primitives/dismissable-layer\";\nimport { usePresence } from \"../primitives/presence\";\nimport { useRovingFocus } from \"../primitives/use-roving-focus\";\nimport { mergeRefs } from \"../primitives/merge-refs\";\nimport { Portal } from \"../primitives/portal\";\nimport { Slot } from \"../primitives/slot\";\nimport {\n  DROPDOWN_MENU_CHECK_ITEM,\n  DROPDOWN_MENU_CONTENT,\n  DROPDOWN_MENU_ITEM,\n  DROPDOWN_MENU_ITEM_INDICATOR,\n  DROPDOWN_MENU_LABEL,\n  DROPDOWN_MENU_SEPARATOR,\n  DROPDOWN_MENU_SHORTCUT,\n  DROPDOWN_MENU_SUB_CONTENT,\n  DROPDOWN_MENU_SUB_TRIGGER,\n} from \"../generated/dropdown-menu\";\n\ninterface DropdownMenuContextValue {\n  open: boolean;\n  setOpen: (next: boolean) => void;\n  anchorRef: React.RefObject<HTMLElement | null>;\n}\n\nconst DropdownMenuContext = React.createContext<DropdownMenuContextValue | null>(\n  null,\n);\n\nfunction useDropdownMenu(): DropdownMenuContextValue {\n  const ctx = React.useContext(DropdownMenuContext);\n  if (!ctx) throw new Error(\"DropdownMenu parts must be used within <DropdownMenu>\");\n  return ctx;\n}\n\nexport interface DropdownMenuProps {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  children?: React.ReactNode;\n}\n\nexport function DropdownMenu({ open, defaultOpen = false, onOpenChange, children }: DropdownMenuProps) {\n  const [isOpen, setOpen] = useControllableState<boolean>({\n    ...(open !== undefined ? { value: open } : {}),\n    defaultValue: defaultOpen,\n    ...(onOpenChange ? { onChange: onOpenChange } : {}),\n  });\n  const anchorRef = React.useRef<HTMLElement | null>(null);\n  return (\n    <DropdownMenuContext.Provider value={{ open: isOpen, setOpen, anchorRef }}>\n      <div data-slot=\"dropdown-menu\">{children}</div>\n    </DropdownMenuContext.Provider>\n  );\n}\n\nexport function DropdownMenuPortal({ children }: { children?: React.ReactNode }) {\n  return <Portal>{children}</Portal>;\n}\n\nexport interface DropdownMenuTriggerProps extends React.ComponentProps<\"button\"> {\n  asChild?: boolean;\n}\n\nexport function DropdownMenuTrigger({ asChild = false, onClick, ...props }: DropdownMenuTriggerProps) {\n  const { open, setOpen, anchorRef } = useDropdownMenu();\n  const Comp = asChild ? Slot : \"button\";\n  return (\n    <Comp\n      data-slot=\"dropdown-menu-trigger\"\n      aria-haspopup=\"menu\"\n      aria-expanded={open}\n      data-state={open ? \"open\" : \"closed\"}\n      ref={anchorRef as React.Ref<HTMLButtonElement>}\n      onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n        onClick?.(e);\n        setOpen(!open);\n      }}\n      {...(props as Record<string, unknown>)}\n    />\n  );\n}\n\nexport interface DropdownMenuContentProps extends React.ComponentProps<\"div\"> {\n  sideOffset?: number;\n  align?: \"start\" | \"center\" | \"end\";\n}\n\nexport function DropdownMenuContent({\n  className,\n  sideOffset = 4,\n  align = \"start\",\n  children,\n  ...props\n}: DropdownMenuContentProps) {\n  const { open, setOpen, anchorRef } = useDropdownMenu();\n  const { isPresent, ref: presRef } = usePresence(open);\n  const { floatingRef, style, side } = useFloating({\n    anchorRef,\n    open,\n    side: \"bottom\",\n    align,\n    offset: sideOffset,\n  });\n  const dismissRef = useDismissableLayer({\n    enabled: open,\n    onDismiss: () => setOpen(false),\n    exclude: [anchorRef],\n  });\n  const contentRef = React.useRef<HTMLDivElement | null>(null);\n  // Roving focus across rendered menu items: ArrowUp/Down move the active item.\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: a menu reopens on its first item, and an index left past\n  // the end (items gone while closed) would focus nothing.\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  // Selecting an item closes the menu: items call this through context.\n  const close = React.useCallback(() => setOpen(false), [setOpen]);\n  if (!isPresent) return null;\n  return (\n    <Portal>\n      <DropdownMenuCloseContext.Provider value={close}>\n        <div\n          data-slot=\"dropdown-menu-content\"\n          data-state={open ? \"open\" : \"closed\"}\n          data-side={side}\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(floatingRef, dismissRef, presRef, contentRef)}\n          style={style}\n          className={cn(\n            DROPDOWN_MENU_CONTENT,\n            className,\n          )}\n          {...(props as Record<string, unknown>)}\n        >\n          <DismissableLayerScope layer={dismissRef}>{children}</DismissableLayerScope>\n        </div>\n      </DropdownMenuCloseContext.Provider>\n    </Portal>\n  );\n}\n\nconst DropdownMenuCloseContext = React.createContext<() => void>(() => {});\n\nexport function DropdownMenuGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div data-slot=\"dropdown-menu-group\" role=\"group\" className={className} {...props} />;\n}\n\nexport interface DropdownMenuItemProps extends React.ComponentProps<\"div\"> {\n  /** Render the child (a link) as the item. */\n  asChild?: boolean;\n  inset?: boolean;\n  variant?: \"neutral\" | \"destructive\";\n  disabled?: boolean;\n}\n\nexport function DropdownMenuItem({\n  asChild = false,\n  className,\n  inset,\n  variant = \"neutral\",\n  disabled,\n  onClick,\n  onKeyDown,\n  ...props\n}: DropdownMenuItemProps) {\n  const close = React.useContext(DropdownMenuCloseContext);\n  const Comp = asChild ? Slot : \"div\";\n  return (\n    <Comp\n      data-slot=\"dropdown-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        DROPDOWN_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 DropdownMenuCheckboxItemProps extends React.ComponentProps<\"div\"> {\n  checked?: boolean;\n  disabled?: boolean;\n}\n\nexport function DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  disabled,\n  onClick,\n  ...props\n}: DropdownMenuCheckboxItemProps) {\n  const close = React.useContext(DropdownMenuCloseContext);\n  return (\n    <div\n      data-slot=\"dropdown-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        DROPDOWN_MENU_CHECK_ITEM,\n        className,\n      )}\n      onClick={(e) => {\n        if (disabled) return;\n        onClick?.(e);\n        close();\n      }}\n      {...props}\n    >\n      <span className={DROPDOWN_MENU_ITEM_INDICATOR}>\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 DropdownMenuRadioGroupContextValue {\n  value: string | undefined;\n  setValue: (next: string) => void;\n}\n\nconst DropdownMenuRadioGroupContext =\n  React.createContext<DropdownMenuRadioGroupContextValue | null>(null);\n\nexport interface DropdownMenuRadioGroupProps extends Omit<React.ComponentProps<\"div\">, \"onChange\"> {\n  value?: string;\n  onValueChange?: (value: string) => void;\n}\n\nexport function DropdownMenuRadioGroup({\n  className,\n  value,\n  onValueChange,\n  children,\n  ...props\n}: DropdownMenuRadioGroupProps) {\n  const ctx = React.useMemo<DropdownMenuRadioGroupContextValue>(\n    () => ({ value, setValue: (next) => onValueChange?.(next) }),\n    [value, onValueChange],\n  );\n  return (\n    <DropdownMenuRadioGroupContext.Provider value={ctx}>\n      <div data-slot=\"dropdown-menu-radio-group\" role=\"group\" className={className} {...props}>\n        {children}\n      </div>\n    </DropdownMenuRadioGroupContext.Provider>\n  );\n}\n\nexport interface DropdownMenuRadioItemProps extends React.ComponentProps<\"div\"> {\n  value: string;\n  disabled?: boolean;\n}\n\nexport function DropdownMenuRadioItem({\n  className,\n  children,\n  value,\n  disabled,\n  onClick,\n  ...props\n}: DropdownMenuRadioItemProps) {\n  const close = React.useContext(DropdownMenuCloseContext);\n  const group = React.useContext(DropdownMenuRadioGroupContext);\n  const checked = group?.value === value;\n  return (\n    <div\n      data-slot=\"dropdown-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        DROPDOWN_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={DROPDOWN_MENU_ITEM_INDICATOR}>\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 DropdownMenuLabelProps extends React.ComponentProps<\"div\"> {\n  inset?: boolean;\n}\n\nexport function DropdownMenuLabel({ className, inset, ...props }: DropdownMenuLabelProps) {\n  return (\n    <div\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset ? \"\" : undefined}\n      className={cn(DROPDOWN_MENU_LABEL, className)}\n      {...props}\n    />\n  );\n}\n\nexport function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dropdown-menu-separator\"\n      role=\"separator\"\n      className={cn(DROPDOWN_MENU_SEPARATOR, className)}\n      {...props}\n    />\n  );\n}\n\nexport function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(DROPDOWN_MENU_SHORTCUT, className)}\n      {...props}\n    />\n  );\n}\n\n// Sub-menus render inline (nested) rather than in a separate floating layer: the\n// sub-content is revealed in place when its trigger toggles, simplifying the\n// nesting Radix portals each level. data-state still reflects open/closed.\ninterface DropdownMenuSubContextValue {\n  open: boolean;\n  setOpen: (next: boolean) => void;\n}\n\nconst DropdownMenuSubContext = React.createContext<DropdownMenuSubContextValue | null>(null);\n\nexport interface DropdownMenuSubProps {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  children?: React.ReactNode;\n}\n\nexport function DropdownMenuSub({ open, defaultOpen = false, onOpenChange, children }: DropdownMenuSubProps) {\n  const [isOpen, setOpen] = useControllableState<boolean>({\n    ...(open !== undefined ? { value: open } : {}),\n    defaultValue: defaultOpen,\n    ...(onOpenChange ? { onChange: onOpenChange } : {}),\n  });\n  return (\n    <DropdownMenuSubContext.Provider value={{ open: isOpen, setOpen }}>\n      <div data-slot=\"dropdown-menu-sub\">{children}</div>\n    </DropdownMenuSubContext.Provider>\n  );\n}\n\nexport interface DropdownMenuSubTriggerProps extends React.ComponentProps<\"div\"> {\n  inset?: boolean;\n}\n\nexport function DropdownMenuSubTrigger({ className, inset, children, onClick, ...props }: DropdownMenuSubTriggerProps) {\n  const ctx = React.useContext(DropdownMenuSubContext);\n  return (\n    <div\n      data-slot=\"dropdown-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        DROPDOWN_MENU_SUB_TRIGGER,\n        className,\n      )}\n      onClick={(e) => {\n        onClick?.(e);\n        ctx?.setOpen(!ctx.open);\n      }}\n      {...props}\n    >\n      {children}\n      <svg className=\"ml-auto size-4\" 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 DropdownMenuSubContent({ className, children, ...props }: React.ComponentProps<\"div\">) {\n  const ctx = React.useContext(DropdownMenuSubContext);\n  if (!ctx?.open) return null;\n  return (\n    <div\n      data-slot=\"dropdown-menu-sub-content\"\n      data-state=\"open\"\n      role=\"menu\"\n      className={cn(\n        DROPDOWN_MENU_SUB_CONTENT,\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n"],"mappings":";AAwDM,cAkLF,YAlLE;AAtDN,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,4BAA4B;AACrC,SAAS,mBAAmB;AAC5B,SAAS,uBAAuB,2BAA2B;AAC3D,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAC1B,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAQP,MAAM,sBAAsB,MAAM;AAAA,EAChC;AACF;AAEA,SAAS,kBAA4C;AACnD,QAAM,MAAM,MAAM,WAAW,mBAAmB;AAChD,MAAI,CAAC,IAAK,OAAM,IAAI,MAAM,uDAAuD;AACjF,SAAO;AACT;AASO,SAAS,aAAa,EAAE,MAAM,cAAc,OAAO,cAAc,SAAS,GAAsB;AACrG,QAAM,CAAC,QAAQ,OAAO,IAAI,qBAA8B;AAAA,IACtD,GAAI,SAAS,SAAY,EAAE,OAAO,KAAK,IAAI,CAAC;AAAA,IAC5C,cAAc;AAAA,IACd,GAAI,eAAe,EAAE,UAAU,aAAa,IAAI,CAAC;AAAA,EACnD,CAAC;AACD,QAAM,YAAY,MAAM,OAA2B,IAAI;AACvD,SACE,oBAAC,oBAAoB,UAApB,EAA6B,OAAO,EAAE,MAAM,QAAQ,SAAS,UAAU,GACtE,8BAAC,SAAI,aAAU,iBAAiB,UAAS,GAC3C;AAEJ;AAEO,SAAS,mBAAmB,EAAE,SAAS,GAAmC;AAC/E,SAAO,oBAAC,UAAQ,UAAS;AAC3B;AAMO,SAAS,oBAAoB,EAAE,UAAU,OAAO,SAAS,GAAG,MAAM,GAA6B;AACpG,QAAM,EAAE,MAAM,SAAS,UAAU,IAAI,gBAAgB;AACrD,QAAM,OAAO,UAAU,OAAO;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,iBAAc;AAAA,MACd,iBAAe;AAAA,MACf,cAAY,OAAO,SAAS;AAAA,MAC5B,KAAK;AAAA,MACL,SAAS,CAAC,MAA2C;AACnD,kBAAU,CAAC;AACX,gBAAQ,CAAC,IAAI;AAAA,MACf;AAAA,MACC,GAAI;AAAA;AAAA,EACP;AAEJ;AAOO,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA,aAAa;AAAA,EACb,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACL,GAA6B;AAC3B,QAAM,EAAE,MAAM,SAAS,UAAU,IAAI,gBAAgB;AACrD,QAAM,EAAE,WAAW,KAAK,QAAQ,IAAI,YAAY,IAAI;AACpD,QAAM,EAAE,aAAa,OAAO,KAAK,IAAI,YAAY;AAAA,IAC/C;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA,QAAQ;AAAA,EACV,CAAC;AACD,QAAM,aAAa,oBAAoB;AAAA,IACrC,SAAS;AAAA,IACT,WAAW,MAAM,QAAQ,KAAK;AAAA,IAC9B,SAAS,CAAC,SAAS;AAAA,EACrB,CAAC;AACD,QAAM,aAAa,MAAM,OAA8B,IAAI;AAE3D,QAAM,QAAQ,MACZ,MAAM;AAAA,IACJ,WAAW,SAAS,iBAA8B,oBAAoB,KAAK,CAAC;AAAA,EAC9E,EAAE,OAAO,CAAC,OAAO,GAAG,aAAa,eAAe,MAAM,IAAI;AAC5D,QAAM,EAAE,aAAa,gBAAgB,WAAW,cAAc,IAAI,eAAe;AAAA,IAC/E,OAAO,MAAM,MAAM,EAAE;AAAA,IACrB,aAAa;AAAA,IACb,MAAM;AAAA,EACR,CAAC;AAGD,QAAM,UAAU,MAAM;AACpB,QAAI,CAAC,KAAM,gBAAe,CAAC;AAAA,EAC7B,GAAG,CAAC,MAAM,cAAc,CAAC;AACzB,QAAM,UAAU,MAAM;AACpB,QAAI,CAAC,KAAM;AACX,UAAM,EAAE,WAAW,GAAG,MAAM;AAAA,EAC9B,GAAG,CAAC,MAAM,WAAW,CAAC;AAEtB,QAAM,QAAQ,MAAM,YAAY,MAAM,QAAQ,KAAK,GAAG,CAAC,OAAO,CAAC;AAC/D,MAAI,CAAC,UAAW,QAAO;AACvB,SACE,oBAAC,UACC,8BAAC,yBAAyB,UAAzB,EAAkC,OAAO,OACxC;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,cAAY,OAAO,SAAS;AAAA,MAC5B,aAAW;AAAA,MACX,MAAK;AAAA,MACL,UAAU;AAAA,MAGV,WAAW;AAAA,MACX,KAAK,UAAU,aAAa,YAAY,SAAS,UAAU;AAAA,MAC3D;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAI;AAAA,MAEL,8BAAC,yBAAsB,OAAO,YAAa,UAAS;AAAA;AAAA,EACtD,GACF,GACF;AAEJ;AAEA,MAAM,2BAA2B,MAAM,cAA0B,MAAM;AAAC,CAAC;AAElE,SAAS,kBAAkB,EAAE,WAAW,GAAG,MAAM,GAAgC;AACtF,SAAO,oBAAC,SAAI,aAAU,uBAAsB,MAAK,SAAQ,WAAuB,GAAG,OAAO;AAC5F;AAUO,SAAS,iBAAiB;AAAA,EAC/B,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA0B;AACxB,QAAM,QAAQ,MAAM,WAAW,wBAAwB;AACvD,QAAM,OAAO,UAAU,OAAO;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,cAAY,QAAQ,KAAK;AAAA,MACzB,gBAAc;AAAA,MACd,iBAAe,WAAW,KAAK;AAAA,MAC/B,MAAK;AAAA,MACL,UAAU,WAAW,SAAY;AAAA,MACjC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACA,SAAS,CAAC,MAAM;AACd,YAAI,SAAU;AACd,kBAAU,CAAC;AACX,cAAM;AAAA,MACR;AAAA,MACA,WAAW,CAAC,MAAM;AAChB,oBAAY,CAAC;AACb,YAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,YAAE,eAAe;AACjB,UAAC,EAAE,cAA8B,MAAM;AAAA,QACzC;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAOO,SAAS,yBAAyB;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAkC;AAChC,QAAM,QAAQ,MAAM,WAAW,wBAAwB;AACvD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,MAAK;AAAA,MACL,gBAAc;AAAA,MACd,cAAY,UAAU,YAAY;AAAA,MAClC,iBAAe,WAAW,KAAK;AAAA,MAC/B,UAAU,WAAW,SAAY;AAAA,MACjC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACA,SAAS,CAAC,MAAM;AACd,YAAI,SAAU;AACd,kBAAU,CAAC;AACX,cAAM;AAAA,MACR;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,4BAAC,UAAK,WAAW,8BACd,oBACC,oBAAC,SAAI,WAAU,UAAS,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,eAAc,SAAQ,gBAAe,SAAQ,eAAY,QACrJ,8BAAC,UAAK,GAAE,mBAAkB,GAC5B,IACE,MACN;AAAA,QACC;AAAA;AAAA;AAAA,EACH;AAEJ;AAOA,MAAM,gCACJ,MAAM,cAAyD,IAAI;AAO9D,SAAS,uBAAuB;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAgC;AAC9B,QAAM,MAAM,MAAM;AAAA,IAChB,OAAO,EAAE,OAAO,UAAU,CAAC,SAAS,gBAAgB,IAAI,EAAE;AAAA,IAC1D,CAAC,OAAO,aAAa;AAAA,EACvB;AACA,SACE,oBAAC,8BAA8B,UAA9B,EAAuC,OAAO,KAC7C,8BAAC,SAAI,aAAU,6BAA4B,MAAK,SAAQ,WAAuB,GAAG,OAC/E,UACH,GACF;AAEJ;AAOO,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA+B;AAC7B,QAAM,QAAQ,MAAM,WAAW,wBAAwB;AACvD,QAAM,QAAQ,MAAM,WAAW,6BAA6B;AAC5D,QAAM,UAAU,OAAO,UAAU;AACjC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,MAAK;AAAA,MACL,gBAAc;AAAA,MACd,cAAY,UAAU,YAAY;AAAA,MAClC,iBAAe,WAAW,KAAK;AAAA,MAC/B,UAAU,WAAW,SAAY;AAAA,MACjC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACA,SAAS,CAAC,MAAM;AACd,YAAI,SAAU;AACd,kBAAU,CAAC;AACX,eAAO,SAAS,KAAK;AACrB,cAAM;AAAA,MACR;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,4BAAC,UAAK,WAAW,8BACd,oBACC,oBAAC,SAAI,WAAU,uBAAsB,SAAQ,aAAY,eAAY,QACnE,8BAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK,GACjC,IACE,MACN;AAAA,QACC;AAAA;AAAA;AAAA,EACH;AAEJ;AAMO,SAAS,kBAAkB,EAAE,WAAW,OAAO,GAAG,MAAM,GAA2B;AACxF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,cAAY,QAAQ,KAAK;AAAA,MACzB,WAAW,GAAG,qBAAqB,SAAS;AAAA,MAC3C,GAAG;AAAA;AAAA,EACN;AAEJ;AAEO,SAAS,sBAAsB,EAAE,WAAW,GAAG,MAAM,GAAgC;AAC1F,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,MAAK;AAAA,MACL,WAAW,GAAG,yBAAyB,SAAS;AAAA,MAC/C,GAAG;AAAA;AAAA,EACN;AAEJ;AAEO,SAAS,qBAAqB,EAAE,WAAW,GAAG,MAAM,GAAiC;AAC1F,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,wBAAwB,SAAS;AAAA,MAC9C,GAAG;AAAA;AAAA,EACN;AAEJ;AAUA,MAAM,yBAAyB,MAAM,cAAkD,IAAI;AASpF,SAAS,gBAAgB,EAAE,MAAM,cAAc,OAAO,cAAc,SAAS,GAAyB;AAC3G,QAAM,CAAC,QAAQ,OAAO,IAAI,qBAA8B;AAAA,IACtD,GAAI,SAAS,SAAY,EAAE,OAAO,KAAK,IAAI,CAAC;AAAA,IAC5C,cAAc;AAAA,IACd,GAAI,eAAe,EAAE,UAAU,aAAa,IAAI,CAAC;AAAA,EACnD,CAAC;AACD,SACE,oBAAC,uBAAuB,UAAvB,EAAgC,OAAO,EAAE,MAAM,QAAQ,QAAQ,GAC9D,8BAAC,SAAI,aAAU,qBAAqB,UAAS,GAC/C;AAEJ;AAMO,SAAS,uBAAuB,EAAE,WAAW,OAAO,UAAU,SAAS,GAAG,MAAM,GAAgC;AACrH,QAAM,MAAM,MAAM,WAAW,sBAAsB;AACnD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,cAAY,QAAQ,KAAK;AAAA,MACzB,cAAY,KAAK,OAAO,SAAS;AAAA,MACjC,MAAK;AAAA,MACL,iBAAc;AAAA,MACd,iBAAe,KAAK;AAAA,MACpB,UAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACA,SAAS,CAAC,MAAM;AACd,kBAAU,CAAC;AACX,aAAK,QAAQ,CAAC,IAAI,IAAI;AAAA,MACxB;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,QACD,oBAAC,SAAI,WAAU,kBAAiB,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,eAAc,SAAQ,gBAAe,SAAQ,eAAY,QAC7J,8BAAC,UAAK,GAAE,iBAAgB,GAC1B;AAAA;AAAA;AAAA,EACF;AAEJ;AAEO,SAAS,uBAAuB,EAAE,WAAW,UAAU,GAAG,MAAM,GAAgC;AACrG,QAAM,MAAM,MAAM,WAAW,sBAAsB;AACnD,MAAI,CAAC,KAAK,KAAM,QAAO;AACvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,cAAW;AAAA,MACX,MAAK;AAAA,MACL,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/components/field.js

@@ -4,13 +4,8 @@ import * as React from "react";
 import { cn } from "../lib/cn.js";
 import { Label } from "./label.js";
 import { walkElements } from "../primitives/walk-elements.js";
-import { Checkbox } from "./checkbox.js";
+import { isLabelable, markLabelable } from "../primitives/labelable.js";
 import { FieldControlContext, useFieldClaims } from "./field-context.js";
-import { Input } from "./input.js";
-import { NativeSelect } from "./native-select.js";
-import { SelectTrigger } from "./select.js";
-import { Switch } from "./switch.js";
-import { Textarea } from "./textarea.js";
 import {
   FIELD_BASE,
   FIELD_SET,
@@ -82,6 +77,7 @@ function Field({
     }
   ) });
 }
+markLabelable(Field);
 function FieldContent({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     "div",
@@ -107,14 +103,13 @@ function FieldLabel({ className, htmlFor, children, ...props }) {
   );
 }
 const LABELABLE_TAGS = /* @__PURE__ */ new Set(["input", "select", "textarea", "button"]);
-const LABELABLE_KIT = /* @__PURE__ */ new Set([Input, Textarea, NativeSelect, Checkbox, Switch, SelectTrigger, Field]);
 function wrapsControl(children) {
   let found = false;
   walkElements(children, (element) => {
     if (found) return false;
     const { type } = element;
     const props = element.props;
-    if (typeof type === "string" ? LABELABLE_TAGS.has(type) && props.type !== "hidden" : LABELABLE_KIT.has(type)) {
+    if (typeof type === "string" ? LABELABLE_TAGS.has(type) && props.type !== "hidden" : isLabelable(type)) {
       found = true;
     }
     return !found;

package/dist/components/field.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/field.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { Label } from \"./label\";\nimport { walkElements } from \"../primitives/walk-elements\";\nimport { Checkbox } from \"./checkbox\";\nimport { FieldControlContext, useFieldClaims } from \"./field-context\";\nimport { Input } from \"./input\";\nimport { NativeSelect } from \"./native-select\";\nimport { SelectTrigger } from \"./select\";\nimport { Switch } from \"./switch\";\nimport { Textarea } from \"./textarea\";\nimport {\n  FIELD_BASE,\n  FIELD_SET,\n  FIELD_LEGEND,\n  FIELD_GROUP,\n  FIELD_CONTENT,\n  FIELD_LABEL,\n  FIELD_TITLE,\n  FIELD_DESCRIPTION,\n  FIELD_SEPARATOR,\n  FIELD_SEPARATOR_LINE,\n  FIELD_SEPARATOR_CONTENT,\n  FIELD_ERROR,\n  fieldOrientation,\n  type FieldOrientation,\n} from \"../generated/field\";\n\nexport type { FieldOrientation };\n\nexport function FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(FIELD_SET, className)}\n      {...props}\n    />\n  );\n}\n\nexport function FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(FIELD_LEGEND, className)}\n      {...props}\n    />\n  );\n}\n\nexport function FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(FIELD_GROUP, className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * A labelled control. `Field` mints one id and hands it to both ends: its\n * `FieldLabel` takes it as `for`, and the kit's `Input`, `Textarea`,\n * `NativeSelect`, `SelectTrigger`, `Checkbox` and `Switch` take it as `id` —\n * each only when the caller passed none. `controlId` names the id instead of\n * minting one. One control per `Field`: a field that holds two has to name\n * their ids by hand, or both would claim the one id (a development warning\n * says so).\n */\nexport function Field({\n  className,\n  orientation = \"vertical\",\n  controlId,\n  ...props\n}: React.ComponentProps<\"div\"> & { orientation?: FieldOrientation; controlId?: string }) {\n  const minted = React.useId();\n  const claim = useFieldClaims();\n  const id = controlId ?? minted;\n  const control = React.useMemo(() => ({ id, claim }), [id, claim]);\n  return (\n    <FieldControlContext.Provider value={control}>\n      <div\n        role=\"group\"\n        data-slot=\"field\"\n        data-orientation={orientation}\n        className={cn(FIELD_BASE, fieldOrientation[orientation], className)}\n        {...props}\n      />\n    </FieldControlContext.Provider>\n  );\n}\n\nexport function FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(FIELD_CONTENT, className)}\n      {...props}\n    />\n  );\n}\n\nexport interface FieldLabelProps extends Omit<React.ComponentProps<typeof Label>, \"htmlFor\"> {\n  /** `null` opts out of the `Field`'s id: the label then has no `for` at all. */\n  htmlFor?: string | null;\n}\n\n/**\n * Takes its `Field`'s id as `for` unless it wraps a control itself — a label\n * around an `<input>` already labels it, and a `for` pointing elsewhere would\n * steal the click. A control inside a component of yours is invisible to that\n * check; pass `htmlFor={null}` there.\n */\nexport function FieldLabel({ className, htmlFor, children, ...props }: FieldLabelProps) {\n  const field = React.useContext(FieldControlContext);\n  const target = htmlFor === null ? undefined : (htmlFor ?? (wrapsControl(children) ? undefined : field?.id));\n  return (\n    <Label\n      data-slot=\"field-label\"\n      htmlFor={target}\n      className={cn(FIELD_LABEL, className)}\n      {...props}\n    >\n      {children}\n    </Label>\n  );\n}\n\n// The labelable elements (HTML's list, less `output`/`meter`/`progress`, which a\n// field label never wraps) and the kit's controls that render one — plus a\n// nested `Field`, the choice-card shape, whose control is labelled by its own.\nconst LABELABLE_TAGS = new Set([\"input\", \"select\", \"textarea\", \"button\"]);\nconst LABELABLE_KIT: ReadonlySet<unknown> = new Set([Input, Textarea, NativeSelect, Checkbox, Switch, SelectTrigger, Field]);\n\nfunction wrapsControl(children: React.ReactNode): boolean {\n  let found = false;\n  walkElements(children, (element) => {\n    if (found) return false;\n    const { type } = element;\n    const props = element.props as { type?: unknown };\n    if (typeof type === \"string\" ? LABELABLE_TAGS.has(type) && props.type !== \"hidden\" : LABELABLE_KIT.has(type)) {\n      found = true;\n    }\n    return !found;\n  });\n  return found;\n}\n\nexport function FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(FIELD_TITLE, className)}\n      {...props}\n    />\n  );\n}\n\nexport function FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(FIELD_DESCRIPTION, className)}\n      {...props}\n    />\n  );\n}\n\nexport function FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & { children?: React.ReactNode }) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(FIELD_SEPARATOR, className)}\n      {...props}\n    >\n      <div role=\"separator\" className={FIELD_SEPARATOR_LINE} />\n      {children && (\n        <span\n          className={FIELD_SEPARATOR_CONTENT}\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  );\n}\n\nexport function FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  errors?: Array<{ message?: string } | undefined>;\n}) {\n  const content = React.useMemo(() => {\n    if (children) {\n      return children;\n    }\n\n    if (!errors) {\n      return null;\n    }\n\n    if (errors?.length === 1 && errors[0]?.message) {\n      return errors[0].message;\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {errors.map(\n          (error, index) => error?.message && <li key={index}>{error.message}</li>,\n        )}\n      </ul>\n    );\n  }, [children, errors]);\n\n  if (!content) {\n    return null;\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(FIELD_ERROR, className)}\n      {...props}\n    >\n      {content}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/field.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { Label } from \"./label\";\nimport { walkElements } from \"../primitives/walk-elements\";\nimport { isLabelable, markLabelable } from \"../primitives/labelable\";\nimport { FieldControlContext, useFieldClaims } from \"./field-context\";\nimport {\n  FIELD_BASE,\n  FIELD_SET,\n  FIELD_LEGEND,\n  FIELD_GROUP,\n  FIELD_CONTENT,\n  FIELD_LABEL,\n  FIELD_TITLE,\n  FIELD_DESCRIPTION,\n  FIELD_SEPARATOR,\n  FIELD_SEPARATOR_LINE,\n  FIELD_SEPARATOR_CONTENT,\n  FIELD_ERROR,\n  fieldOrientation,\n  type FieldOrientation,\n} from \"../generated/field\";\n\nexport type { FieldOrientation };\n\nexport function FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(FIELD_SET, className)}\n      {...props}\n    />\n  );\n}\n\nexport function FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(FIELD_LEGEND, className)}\n      {...props}\n    />\n  );\n}\n\nexport function FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(FIELD_GROUP, className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * A labelled control. `Field` mints one id and hands it to both ends: its\n * `FieldLabel` takes it as `for`, and the kit's `Input`, `Textarea`,\n * `NativeSelect`, `SelectTrigger`, `Checkbox` and `Switch` take it as `id` —\n * each only when the caller passed none. `controlId` names the id instead of\n * minting one. One control per `Field`: a field that holds two has to name\n * their ids by hand, or both would claim the one id (a development warning\n * says so).\n */\nexport function Field({\n  className,\n  orientation = \"vertical\",\n  controlId,\n  ...props\n}: React.ComponentProps<\"div\"> & { orientation?: FieldOrientation; controlId?: string }) {\n  const minted = React.useId();\n  const claim = useFieldClaims();\n  const id = controlId ?? minted;\n  const control = React.useMemo(() => ({ id, claim }), [id, claim]);\n  return (\n    <FieldControlContext.Provider value={control}>\n      <div\n        role=\"group\"\n        data-slot=\"field\"\n        data-orientation={orientation}\n        className={cn(FIELD_BASE, fieldOrientation[orientation], className)}\n        {...props}\n      />\n    </FieldControlContext.Provider>\n  );\n}\n\nmarkLabelable(Field);\n\nexport function FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(FIELD_CONTENT, className)}\n      {...props}\n    />\n  );\n}\n\nexport interface FieldLabelProps extends Omit<React.ComponentProps<typeof Label>, \"htmlFor\"> {\n  /** `null` opts out of the `Field`'s id: the label then has no `for` at all. */\n  htmlFor?: string | null;\n}\n\n/**\n * Takes its `Field`'s id as `for` unless it wraps a control itself — a label\n * around an `<input>` already labels it, and a `for` pointing elsewhere would\n * steal the click. A control inside a component of yours is invisible to that\n * check; pass `htmlFor={null}` there.\n */\nexport function FieldLabel({ className, htmlFor, children, ...props }: FieldLabelProps) {\n  const field = React.useContext(FieldControlContext);\n  const target = htmlFor === null ? undefined : (htmlFor ?? (wrapsControl(children) ? undefined : field?.id));\n  return (\n    <Label\n      data-slot=\"field-label\"\n      htmlFor={target}\n      className={cn(FIELD_LABEL, className)}\n      {...props}\n    >\n      {children}\n    </Label>\n  );\n}\n\n// The labelable elements (HTML's list, less `output`/`meter`/`progress`, which a\n// field label never wraps) and the kit's controls that render one — plus a\n// nested `Field`, the choice-card shape, whose control is labelled by its own.\n// The kit's controls carry a mark (`primitives/labelable`) rather than sitting\n// in a set here: a set would import every control into every page with a Field.\nconst LABELABLE_TAGS = new Set([\"input\", \"select\", \"textarea\", \"button\"]);\n\nfunction wrapsControl(children: React.ReactNode): boolean {\n  let found = false;\n  walkElements(children, (element) => {\n    if (found) return false;\n    const { type } = element;\n    const props = element.props as { type?: unknown };\n    if (typeof type === \"string\" ? LABELABLE_TAGS.has(type) && props.type !== \"hidden\" : isLabelable(type)) {\n      found = true;\n    }\n    return !found;\n  });\n  return found;\n}\n\nexport function FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(FIELD_TITLE, className)}\n      {...props}\n    />\n  );\n}\n\nexport function FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(FIELD_DESCRIPTION, className)}\n      {...props}\n    />\n  );\n}\n\nexport function FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & { children?: React.ReactNode }) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(FIELD_SEPARATOR, className)}\n      {...props}\n    >\n      <div role=\"separator\" className={FIELD_SEPARATOR_LINE} />\n      {children && (\n        <span\n          className={FIELD_SEPARATOR_CONTENT}\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  );\n}\n\nexport function FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  errors?: Array<{ message?: string } | undefined>;\n}) {\n  const content = React.useMemo(() => {\n    if (children) {\n      return children;\n    }\n\n    if (!errors) {\n      return null;\n    }\n\n    if (errors?.length === 1 && errors[0]?.message) {\n      return errors[0].message;\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {errors.map(\n          (error, index) => error?.message && <li key={index}>{error.message}</li>,\n        )}\n      </ul>\n    );\n  }, [children, errors]);\n\n  if (!content) {\n    return null;\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(FIELD_ERROR, className)}\n      {...props}\n    >\n      {content}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/info-tip.js

@@ -4,7 +4,7 @@ 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 { useDismissableLayer } from "../primitives/dismissable-layer.js";
+import { DismissableLayerScope, useDismissableLayer } from "../primitives/dismissable-layer.js";
 import { usePresence } from "../primitives/presence.js";
 import { useHoverIntent } from "../primitives/use-hover-intent.js";
 import { mergeRefs } from "../primitives/merge-refs.js";
@@ -149,7 +149,7 @@ function InfoTipContent({
       style,
       className: cn(POPOVER_CONTENT, "w-64 p-3 text-sm", className),
       ...props,
-      children
+      children: /* @__PURE__ */ jsx(DismissableLayerScope, { layer: dismissRef, children })
     }
   ) });
 }

package/dist/components/info-tip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/info-tip.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useControllableState } from \"../primitives/use-controllable-state\";\nimport { useFloating } from \"../primitives/use-floating\";\nimport { useDismissableLayer } from \"../primitives/dismissable-layer\";\nimport { usePresence } from \"../primitives/presence\";\nimport { useHoverIntent } from \"../primitives/use-hover-intent\";\nimport { mergeRefs } from \"../primitives/merge-refs\";\nimport { Portal } from \"../primitives/portal\";\nimport { Slot } from \"../primitives/slot\";\nimport { POPOVER_CONTENT } from \"../generated/popover\";\n\n/**\n * `InfoTip` — the ⓘ-beside-a-label *toggletip*. It reuses the popover machinery\n * (controllable state + floating + dismissable layer + portal) but deliberately\n * NOT the tooltip ARIA: the trigger is a real `<button aria-expanded aria-controls>`\n * and the bubble is a `role=\"status\"` live region, never `role=\"tooltip\"`. That is\n * the pattern that stays correct across mouse, keyboard and touch (a `role=tooltip`\n * is hover/focus-only and never opens on tap). Hover-with-intent (~0.5s) is layered\n * on as a mouse-only enhancement; click/tap/Enter/Space toggle instantly.\n *\n * The bubble holds plain, non-interactive help text — it does not trap focus and\n * nothing inside it is focusable, so there is no focus to manage or return.\n */\ninterface InfoTipContextValue {\n  open: boolean;\n  setOpen: (next: boolean) => void;\n  anchorRef: React.RefObject<HTMLElement | null>;\n  contentId: string;\n}\n\nconst InfoTipContext = React.createContext<InfoTipContextValue | null>(null);\n\nfunction useInfoTip(): InfoTipContextValue {\n  const ctx = React.useContext(InfoTipContext);\n  if (!ctx) throw new Error(\"InfoTip parts must be used within <InfoTip>\");\n  return ctx;\n}\n\nexport interface InfoTipProps {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  children?: React.ReactNode;\n}\n\nexport function InfoTip({\n  open,\n  defaultOpen = false,\n  onOpenChange,\n  children,\n}: InfoTipProps) {\n  const [isOpen, setOpen] = useControllableState<boolean>({\n    ...(open !== undefined ? { value: open } : {}),\n    defaultValue: defaultOpen,\n    ...(onOpenChange ? { onChange: onOpenChange } : {}),\n  });\n  const anchorRef = React.useRef<HTMLElement | null>(null);\n  const contentId = React.useId();\n  return (\n    <InfoTipContext.Provider\n      value={{ open: isOpen, setOpen, anchorRef, contentId }}\n    >\n      {children}\n    </InfoTipContext.Provider>\n  );\n}\n\n// lucide `info`, inlined per the kit's no-lucide-dep icon convention.\nfunction InfoGlyph({ className }: { className?: string }) {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden\n      className={cn(\"size-4\", className)}\n    >\n      <circle cx=\"12\" cy=\"12\" r=\"10\" />\n      <path d=\"M12 16v-4\" />\n      <path d=\"M12 8h.01\" />\n    </svg>\n  );\n}\n\nexport interface InfoTipTriggerProps extends React.ComponentProps<\"button\"> {\n  asChild?: boolean;\n  /** Accessible name for the icon-only button. */\n  label?: string;\n  /** Milliseconds the mouse must dwell before the tip opens on hover. */\n  hoverDelay?: number;\n}\n\nexport function InfoTipTrigger({\n  asChild = false,\n  label = \"More information\",\n  hoverDelay = 500,\n  className,\n  onClick,\n  onBlur,\n  onPointerEnter,\n  onPointerLeave,\n  children,\n  ...props\n}: InfoTipTriggerProps) {\n  const { open, setOpen, anchorRef, contentId } = useInfoTip();\n  const hover = useHoverIntent({\n    onOpen: () => setOpen(true),\n    onClose: () => setOpen(false),\n    openDelay: hoverDelay,\n  });\n  const Comp = asChild ? Slot : \"button\";\n  return (\n    <Comp\n      data-slot=\"info-tip-trigger\"\n      data-state={open ? \"open\" : \"closed\"}\n      type={asChild ? undefined : \"button\"}\n      aria-label={label}\n      aria-expanded={open}\n      aria-controls={contentId}\n      ref={anchorRef as React.Ref<never>}\n      className={cn(\n        \"inline-flex size-4 shrink-0 cursor-help items-center justify-center rounded-full align-middle text-ink-soft outline-none transition-colors hover:text-ink focus-visible:ring-2 focus-visible:ring-ring data-[state=open]:text-accent-debug\",\n        className,\n      )}\n      onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n        onClick?.(e);\n        setOpen(!open);\n      }}\n      onBlur={(e: React.FocusEvent<HTMLButtonElement>) => {\n        onBlur?.(e);\n        setOpen(false);\n      }}\n      onPointerEnter={(e: React.PointerEvent<HTMLButtonElement>) => {\n        onPointerEnter?.(e);\n        hover.onPointerEnter(e);\n      }}\n      onPointerLeave={(e: React.PointerEvent<HTMLButtonElement>) => {\n        onPointerLeave?.(e);\n        hover.onPointerLeave(e);\n      }}\n      {...(props as Record<string, unknown>)}\n    >\n      {children ?? <InfoGlyph />}\n    </Comp>\n  );\n}\n\nexport interface InfoTipContentProps extends React.ComponentProps<\"div\"> {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n  align?: \"start\" | \"center\" | \"end\";\n  sideOffset?: number;\n}\n\nexport function InfoTipContent({\n  className,\n  side: sideProp = \"bottom\",\n  align = \"center\",\n  sideOffset = 6,\n  children,\n  ...props\n}: InfoTipContentProps) {\n  const { open, setOpen, anchorRef, contentId } = useInfoTip();\n  const { isPresent, ref: presRef } = usePresence(open);\n  const { floatingRef, style, side } = useFloating({\n    anchorRef,\n    open,\n    side: sideProp,\n    align,\n    offset: sideOffset,\n  });\n  const dismissRef = useDismissableLayer({\n    enabled: open,\n    onDismiss: () => setOpen(false),\n    exclude: [anchorRef],\n  });\n  if (!isPresent) return null;\n  return (\n    <Portal>\n      <div\n        id={contentId}\n        role=\"status\"\n        aria-live=\"polite\"\n        data-slot=\"info-tip-content\"\n        data-state={open ? \"open\" : \"closed\"}\n        data-side={side}\n        data-align={align}\n        ref={mergeRefs(floatingRef, dismissRef, presRef)}\n        style={style}\n        className={cn(POPOVER_CONTENT, \"w-64 p-3 text-sm\", className)}\n        {...(props as Record<string, unknown>)}\n      >\n        {children}\n      </div>\n    </Portal>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/info-tip.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useControllableState } from \"../primitives/use-controllable-state\";\nimport { useFloating } from \"../primitives/use-floating\";\nimport { DismissableLayerScope, useDismissableLayer } from \"../primitives/dismissable-layer\";\nimport { usePresence } from \"../primitives/presence\";\nimport { useHoverIntent } from \"../primitives/use-hover-intent\";\nimport { mergeRefs } from \"../primitives/merge-refs\";\nimport { Portal } from \"../primitives/portal\";\nimport { Slot } from \"../primitives/slot\";\nimport { POPOVER_CONTENT } from \"../generated/popover\";\n\n/**\n * `InfoTip` — the ⓘ-beside-a-label *toggletip*. It reuses the popover machinery\n * (controllable state + floating + dismissable layer + portal) but deliberately\n * NOT the tooltip ARIA: the trigger is a real `<button aria-expanded aria-controls>`\n * and the bubble is a `role=\"status\"` live region, never `role=\"tooltip\"`. That is\n * the pattern that stays correct across mouse, keyboard and touch (a `role=tooltip`\n * is hover/focus-only and never opens on tap). Hover-with-intent (~0.5s) is layered\n * on as a mouse-only enhancement; click/tap/Enter/Space toggle instantly.\n *\n * The bubble holds plain, non-interactive help text — it does not trap focus and\n * nothing inside it is focusable, so there is no focus to manage or return.\n */\ninterface InfoTipContextValue {\n  open: boolean;\n  setOpen: (next: boolean) => void;\n  anchorRef: React.RefObject<HTMLElement | null>;\n  contentId: string;\n}\n\nconst InfoTipContext = React.createContext<InfoTipContextValue | null>(null);\n\nfunction useInfoTip(): InfoTipContextValue {\n  const ctx = React.useContext(InfoTipContext);\n  if (!ctx) throw new Error(\"InfoTip parts must be used within <InfoTip>\");\n  return ctx;\n}\n\nexport interface InfoTipProps {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  children?: React.ReactNode;\n}\n\nexport function InfoTip({\n  open,\n  defaultOpen = false,\n  onOpenChange,\n  children,\n}: InfoTipProps) {\n  const [isOpen, setOpen] = useControllableState<boolean>({\n    ...(open !== undefined ? { value: open } : {}),\n    defaultValue: defaultOpen,\n    ...(onOpenChange ? { onChange: onOpenChange } : {}),\n  });\n  const anchorRef = React.useRef<HTMLElement | null>(null);\n  const contentId = React.useId();\n  return (\n    <InfoTipContext.Provider\n      value={{ open: isOpen, setOpen, anchorRef, contentId }}\n    >\n      {children}\n    </InfoTipContext.Provider>\n  );\n}\n\n// lucide `info`, inlined per the kit's no-lucide-dep icon convention.\nfunction InfoGlyph({ className }: { className?: string }) {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden\n      className={cn(\"size-4\", className)}\n    >\n      <circle cx=\"12\" cy=\"12\" r=\"10\" />\n      <path d=\"M12 16v-4\" />\n      <path d=\"M12 8h.01\" />\n    </svg>\n  );\n}\n\nexport interface InfoTipTriggerProps extends React.ComponentProps<\"button\"> {\n  asChild?: boolean;\n  /** Accessible name for the icon-only button. */\n  label?: string;\n  /** Milliseconds the mouse must dwell before the tip opens on hover. */\n  hoverDelay?: number;\n}\n\nexport function InfoTipTrigger({\n  asChild = false,\n  label = \"More information\",\n  hoverDelay = 500,\n  className,\n  onClick,\n  onBlur,\n  onPointerEnter,\n  onPointerLeave,\n  children,\n  ...props\n}: InfoTipTriggerProps) {\n  const { open, setOpen, anchorRef, contentId } = useInfoTip();\n  const hover = useHoverIntent({\n    onOpen: () => setOpen(true),\n    onClose: () => setOpen(false),\n    openDelay: hoverDelay,\n  });\n  const Comp = asChild ? Slot : \"button\";\n  return (\n    <Comp\n      data-slot=\"info-tip-trigger\"\n      data-state={open ? \"open\" : \"closed\"}\n      type={asChild ? undefined : \"button\"}\n      aria-label={label}\n      aria-expanded={open}\n      aria-controls={contentId}\n      ref={anchorRef as React.Ref<never>}\n      className={cn(\n        \"inline-flex size-4 shrink-0 cursor-help items-center justify-center rounded-full align-middle text-ink-soft outline-none transition-colors hover:text-ink focus-visible:ring-2 focus-visible:ring-ring data-[state=open]:text-accent-debug\",\n        className,\n      )}\n      onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n        onClick?.(e);\n        setOpen(!open);\n      }}\n      onBlur={(e: React.FocusEvent<HTMLButtonElement>) => {\n        onBlur?.(e);\n        setOpen(false);\n      }}\n      onPointerEnter={(e: React.PointerEvent<HTMLButtonElement>) => {\n        onPointerEnter?.(e);\n        hover.onPointerEnter(e);\n      }}\n      onPointerLeave={(e: React.PointerEvent<HTMLButtonElement>) => {\n        onPointerLeave?.(e);\n        hover.onPointerLeave(e);\n      }}\n      {...(props as Record<string, unknown>)}\n    >\n      {children ?? <InfoGlyph />}\n    </Comp>\n  );\n}\n\nexport interface InfoTipContentProps extends React.ComponentProps<\"div\"> {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n  align?: \"start\" | \"center\" | \"end\";\n  sideOffset?: number;\n}\n\nexport function InfoTipContent({\n  className,\n  side: sideProp = \"bottom\",\n  align = \"center\",\n  sideOffset = 6,\n  children,\n  ...props\n}: InfoTipContentProps) {\n  const { open, setOpen, anchorRef, contentId } = useInfoTip();\n  const { isPresent, ref: presRef } = usePresence(open);\n  const { floatingRef, style, side } = useFloating({\n    anchorRef,\n    open,\n    side: sideProp,\n    align,\n    offset: sideOffset,\n  });\n  const dismissRef = useDismissableLayer({\n    enabled: open,\n    onDismiss: () => setOpen(false),\n    exclude: [anchorRef],\n  });\n  if (!isPresent) return null;\n  return (\n    <Portal>\n      <div\n        id={contentId}\n        role=\"status\"\n        aria-live=\"polite\"\n        data-slot=\"info-tip-content\"\n        data-state={open ? \"open\" : \"closed\"}\n        data-side={side}\n        data-align={align}\n        ref={mergeRefs(floatingRef, dismissRef, presRef)}\n        style={style}\n        className={cn(POPOVER_CONTENT, \"w-64 p-3 text-sm\", className)}\n        {...(props as Record<string, unknown>)}\n      >\n        <DismissableLayerScope layer={dismissRef}>{children}</DismissableLayerScope>\n      </div>\n    </Portal>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/input.js

@@ -3,6 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../lib/cn.js";
 import { INPUT_BASE, inputSizeClasses } from "../generated/input.js";
+import { markLabelable } from "../primitives/labelable.js";
 import { useFieldControlId } from "./field-context.js";
 const Input = React.forwardRef(
   function Input2({ className, type, id, size = "md", ...props }, ref) {
@@ -20,6 +21,7 @@ const Input = React.forwardRef(
     );
   }
 );
+markLabelable(Input);
 export {
   Input
 };

package/dist/components/input.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/input.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { INPUT_BASE, inputSizeClasses, type InputSize } from \"../generated/input\";\nimport { useFieldControlId } from \"./field-context\";\n\nexport type { InputSize };\n\n// The native `size` attribute (a width in characters) gives way to the kit's\n// scale, as it does on `NativeSelect`; a width belongs in `className`.\nexport interface InputProps extends Omit<React.ComponentPropsWithoutRef<\"input\">, \"size\"> {\n  size?: InputSize;\n}\n\n// `forwardRef` rather than a `ref` prop so the handle also reaches the element\n// under React 18, where function components drop `ref`.\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n  function Input({ className, type, id, size = \"md\", ...props }, ref) {\n    return (\n      <input\n        ref={ref}\n        type={type}\n        id={useFieldControlId(id)}\n        data-slot=\"input\"\n        data-size={size}\n        className={cn(INPUT_BASE, inputSizeClasses[size], className)}\n        {...props}\n      />\n    );\n  },\n);\n"],"mappings":";AAoBM;AAlBN,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,YAAY,wBAAwC;AAC7D,SAAS,yBAAyB;AAY3B,MAAM,QAAQ,MAAM;AAAA,EACzB,SAASA,OAAM,EAAE,WAAW,MAAM,IAAI,OAAO,MAAM,GAAG,MAAM,GAAG,KAAK;AAClE,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,IAAI,kBAAkB,EAAE;AAAA,QACxB,aAAU;AAAA,QACV,aAAW;AAAA,QACX,WAAW,GAAG,YAAY,iBAAiB,IAAI,GAAG,SAAS;AAAA,QAC1D,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;","names":["Input"]}
+{"version":3,"sources":["../../src/components/input.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { INPUT_BASE, inputSizeClasses, type InputSize } from \"../generated/input\";\nimport { markLabelable } from \"../primitives/labelable\";\nimport { useFieldControlId } from \"./field-context\";\n\nexport type { InputSize };\n\n// The native `size` attribute (a width in characters) gives way to the kit's\n// scale, as it does on `NativeSelect`; a width belongs in `className`.\nexport interface InputProps extends Omit<React.ComponentPropsWithoutRef<\"input\">, \"size\"> {\n  size?: InputSize;\n}\n\n// `forwardRef` rather than a `ref` prop so the handle also reaches the element\n// under React 18, where function components drop `ref`.\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n  function Input({ className, type, id, size = \"md\", ...props }, ref) {\n    return (\n      <input\n        ref={ref}\n        type={type}\n        id={useFieldControlId(id)}\n        data-slot=\"input\"\n        data-size={size}\n        className={cn(INPUT_BASE, inputSizeClasses[size], className)}\n        {...props}\n      />\n    );\n  },\n);\n\nmarkLabelable(Input);\n"],"mappings":";AAqBM;AAnBN,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,YAAY,wBAAwC;AAC7D,SAAS,qBAAqB;AAC9B,SAAS,yBAAyB;AAY3B,MAAM,QAAQ,MAAM;AAAA,EACzB,SAASA,OAAM,EAAE,WAAW,MAAM,IAAI,OAAO,MAAM,GAAG,MAAM,GAAG,KAAK;AAClE,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,IAAI,kBAAkB,EAAE;AAAA,QACxB,aAAU;AAAA,QACV,aAAW;AAAA,QACX,WAAW,GAAG,YAAY,iBAAiB,IAAI,GAAG,SAAS;AAAA,QAC1D,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,cAAc,KAAK;","names":["Input"]}