@eifi1/ui-kit 0.4.0 → 0.5.0

package/dist/components/modal.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ReactNode, KeyboardEvent, MouseEvent } from 'react';
+import { ComponentPropsWithoutRef, ReactNode, KeyboardEvent, MouseEvent } from 'react';
 
 /**
  * Backdrop handlers that close only when a press starts AND ends on the
@@ -12,7 +12,13 @@ declare function useBackdropClose(onClose: () => void): {
     onMouseDown: (e: MouseEvent<HTMLDivElement>) => void;
     onMouseUp: (e: MouseEvent<HTMLDivElement>) => void;
 };
-interface ModalProps {
+/**
+ * `extends ComponentPropsWithoutRef<"div">` so anything a `<div>` takes reaches the
+ * PANEL — the element with `role="dialog"`, which is the one a consumer means. That is
+ * where a `data-tour` anchor, a test id, an `aria-describedby` or an `aria-label` has
+ * to land; before this, a closed prop list dropped all four silently (audit §api-design).
+ */
+interface ModalProps extends ComponentPropsWithoutRef<"div"> {
     /** Invoked on backdrop click and on Escape. */
     onClose: () => void;
     children: ReactNode;
@@ -71,6 +77,6 @@ interface ModalProps {
  * into the panel on open and back to the trigger on close, a Tab focus trap, and
  * `role="dialog"`/`aria-modal`.
  */
-declare function Modal({ onClose, children, size, className, labelledBy, onKeyDown, fullBleed, draggable, }: ModalProps): react.ReactPortal;
+declare function Modal({ onClose, children, size, className, labelledBy, onKeyDown, fullBleed, draggable, style, ...rest }: ModalProps): react.ReactPortal;
 
 export { Modal, type ModalProps, useBackdropClose };

package/dist/components/modal.js

@@ -1,32 +1,42 @@
+"use client";
 import { jsx } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
+import { useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { cn } from "../lib/cn.js";
+import { useFocusTrap } from "../hooks/use-focus-trap.js";
 import { useBodyScrollLock } from "../hooks/use-body-scroll-lock.js";
 import { useOverlayHistory } from "../hooks/use-overlay-history.js";
 import { useCloseTransition } from "../hooks/use-close-transition.js";
 function useDragOffset(enabled) {
   const [offset, setOffset] = useState(null);
   const from = useRef(null);
-  const onPointerMove = (e) => {
-    const start = from.current;
-    if (!start) return;
-    setOffset({ x: start.ox + e.clientX - start.x, y: start.oy + e.clientY - start.y });
-  };
-  const onPointerUp = () => {
+  const endDrag = () => {
     from.current = null;
-    window.removeEventListener("pointermove", onPointerMove);
-    window.removeEventListener("pointerup", onPointerUp);
   };
   return {
     style: offset ? { transform: `translate(${offset.x}px, ${offset.y}px)` } : void 0,
-    onPointerDown: !enabled ? void 0 : (e) => {
-      if (e.button !== 0 || window.innerWidth < 768) return;
-      const target = e.target;
-      if (target.closest("input,textarea,select,button,a,[role='button']")) return;
-      from.current = { x: e.clientX, y: e.clientY, ox: offset?.x ?? 0, oy: offset?.y ?? 0 };
-      window.addEventListener("pointermove", onPointerMove);
-      window.addEventListener("pointerup", onPointerUp);
+    handlers: !enabled ? void 0 : {
+      onPointerDown: (e) => {
+        if (e.button !== 0 || window.innerWidth < 768) return;
+        const target = e.target;
+        if (target.closest("input,textarea,select,button,a,[role='button']")) return;
+        from.current = { x: e.clientX, y: e.clientY, ox: offset?.x ?? 0, oy: offset?.y ?? 0 };
+        try {
+          e.currentTarget.setPointerCapture(e.pointerId);
+        } catch {
+        }
+      },
+      onPointerMove: (e) => {
+        const start = from.current;
+        if (!start) return;
+        setOffset({ x: start.ox + e.clientX - start.x, y: start.oy + e.clientY - start.y });
+      },
+      onPointerUp: endDrag,
+      // A cancel (the browser taking the pointer for a scroll or a gesture) and a
+      // lost capture both mean no `pointerup` is coming. Without them the drag would
+      // stay "live" and the next move over the panel would jump it.
+      onPointerCancel: endDrag,
+      onLostPointerCapture: endDrag
     }
   };
 }
@@ -43,7 +53,6 @@ function useBackdropClose(onClose) {
     }
   };
 }
-const FOCUSABLE = 'a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex="-1"])';
 function Modal({
   onClose,
   children,
@@ -52,7 +61,9 @@ function Modal({
   labelledBy,
   onKeyDown,
   fullBleed,
-  draggable
+  draggable,
+  style,
+  ...rest
 }) {
   const panelRef = useRef(null);
   const drag = useDragOffset(Boolean(draggable));
@@ -60,13 +71,7 @@ function Modal({
   const backdropClose = useBackdropClose(requestClose);
   useOverlayHistory(true, requestClose);
   useBodyScrollLock(true);
-  useEffect(() => {
-    const previouslyFocused = document.activeElement;
-    panelRef.current?.focus();
-    return () => {
-      previouslyFocused?.focus?.();
-    };
-  }, []);
+  useFocusTrap(panelRef, { active: true, initialFocus: "container" });
   const handleKeyDown = (e) => {
     onKeyDown?.(e);
     if (e.defaultPrevented) return;
@@ -75,23 +80,6 @@ function Modal({
       requestClose();
       return;
     }
-    if (e.key !== "Tab") return;
-    const focusables = panelRef.current?.querySelectorAll(FOCUSABLE);
-    if (!focusables || focusables.length === 0) {
-      e.preventDefault();
-      panelRef.current?.focus();
-      return;
-    }
-    const first = focusables[0];
-    const last = focusables[focusables.length - 1];
-    const active = document.activeElement;
-    if (e.shiftKey && (active === first || active === panelRef.current)) {
-      e.preventDefault();
-      last.focus();
-    } else if (!e.shiftKey && active === last) {
-      e.preventDefault();
-      first.focus();
-    }
   };
   return createPortal(
     /* @__PURE__ */ jsx(
@@ -109,17 +97,18 @@ function Modal({
         children: /* @__PURE__ */ jsx(
           "div",
           {
+            ...rest,
             ref: panelRef,
             role: "dialog",
             "aria-modal": "true",
             "aria-labelledby": labelledBy,
             tabIndex: -1,
             onKeyDown: handleKeyDown,
-            onPointerDown: drag.onPointerDown,
-            style: drag.style,
+            ...drag.handlers,
+            style: { ...style, ...drag.style },
             className: cn(
               closing ? "animate-sheet-out md:animate-none" : "animate-sheet md:animate-none",
-              "w-full rounded-lg border border-slate-200 bg-white shadow-sm outline-none dark:border-slate-800 dark:bg-slate-900",
+              "w-full rounded-lg border border-[var(--border)] bg-[var(--bg-surface)] shadow-sm outline-none",
               { md: "max-w-md", lg: "max-w-lg", xl: "max-w-3xl" }[size],
               // A panel taller than the screen has to scroll ITSELF. The backdrop is
               // `fixed inset-0` and the body is scroll-locked while a dialog is open, so

package/dist/components/modal.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/modal.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport type {\n  KeyboardEvent,\n  MouseEvent as ReactMouseEvent,\n  PointerEvent as ReactPointerEvent,\n  ReactNode,\n} from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useBodyScrollLock } from \"../hooks/use-body-scroll-lock\";\nimport { useOverlayHistory } from \"../hooks/use-overlay-history\";\nimport { useCloseTransition } from \"../hooks/use-close-transition\";\n\n/**\n * Drag the panel by its top strip, in pointer space (dev#460).\n *\n * Deliberately not a library and not persisted: the offset is component state that\n * dies with the dialog. It starts only on a press that lands on the panel's own\n * chrome — never on a field, a button or a link, which is what keeps \"drag to select\n * text in the textarea\" working. Above `md` only: below it the panel is a\n * full-width bottom sheet with nothing beside it to uncover.\n */\nfunction useDragOffset(enabled: boolean) {\n  const [offset, setOffset] = useState<{ x: number; y: number } | null>(null);\n  const from = useRef<{ x: number; y: number; ox: number; oy: number } | null>(null);\n\n  const onPointerMove = (e: PointerEvent) => {\n    const start = from.current;\n    if (!start) return;\n    setOffset({ x: start.ox + e.clientX - start.x, y: start.oy + e.clientY - start.y });\n  };\n  const onPointerUp = () => {\n    from.current = null;\n    window.removeEventListener(\"pointermove\", onPointerMove);\n    window.removeEventListener(\"pointerup\", onPointerUp);\n  };\n\n  return {\n    style: offset ? { transform: `translate(${offset.x}px, ${offset.y}px)` } : undefined,\n    onPointerDown: !enabled\n      ? undefined\n      : (e: ReactPointerEvent<HTMLDivElement>) => {\n          if (e.button !== 0 || window.innerWidth < 768) return;\n          const target = e.target as HTMLElement;\n          // Only the panel itself and its non-interactive chrome start a drag; a\n          // press inside any control belongs to that control.\n          if (target.closest(\"input,textarea,select,button,a,[role='button']\")) return;\n          from.current = { x: e.clientX, y: e.clientY, ox: offset?.x ?? 0, oy: offset?.y ?? 0 };\n          window.addEventListener(\"pointermove\", onPointerMove);\n          window.addEventListener(\"pointerup\", onPointerUp);\n        },\n  };\n}\n\n/**\n * Backdrop handlers that close only when a press starts AND ends on the\n * backdrop itself. A plain onClick fires on mouseup, so dragging a text\n * selection that starts inside the panel and releases over the backdrop would\n * dismiss the dialog (feedback #254) — and the reverse drag would too, since\n * click targets the common ancestor of the down/up elements.\n */\nexport function useBackdropClose(onClose: () => void) {\n  const pressStartedOnBackdrop = useRef(false);\n  return {\n    onMouseDown: (e: ReactMouseEvent<HTMLDivElement>) => {\n      pressStartedOnBackdrop.current = e.target === e.currentTarget;\n    },\n    onMouseUp: (e: ReactMouseEvent<HTMLDivElement>) => {\n      const started = pressStartedOnBackdrop.current;\n      pressStartedOnBackdrop.current = false;\n      if (started && e.target === e.currentTarget) onClose();\n    },\n  };\n}\n\n// Tab-cycle target set: the interactive descendants the focus trap rotates\n// through. Querying live (per keystroke) means dynamically rendered fields are\n// included automatically.\nconst FOCUSABLE =\n  'a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex=\"-1\"])';\n\nexport interface ModalProps {\n  /** Invoked on backdrop click and on Escape. */\n  onClose: () => void;\n  children: ReactNode;\n  /**\n   * Panel max-width: `md` (28rem), `lg` (32rem), `xl` (48rem).\n   *\n   * `xl` exists because two callers had already written `className=\"max-w-3xl\"` to\n   * reach it — the payee backfill's preview table and the price-merge dialog, both\n   * of which hold a list and several fields rather than one question. A caller\n   * patching a missing size IS the signal that the size is missing, and a\n   * hand-written width in a `className` is a width nothing else can line up with.\n   *\n   * The panel is `w-full` under every one of them, so the cap only bites once the\n   * viewport is wider than it: on a phone all three are the same full-width bottom\n   * sheet. Nothing here may introduce a `min-w-*`, which is what would break that.\n   */\n  size?: \"md\" | \"lg\" | \"xl\";\n  /** Extra classes for the panel (e.g. `space-y-3` for form content spacing). */\n  className?: string;\n  /** id of the heading element, wired to `aria-labelledby`. */\n  labelledBy?: string;\n  /**\n   * Extra key handling on the panel (e.g. Ctrl/Cmd+Enter to submit). Runs first;\n   * if it calls `preventDefault()` the built-in Escape/Tab handling is skipped\n   * for that event.\n   */\n  onKeyDown?: (e: KeyboardEvent<HTMLDivElement>) => void;\n  /**\n   * Drop the backdrop's mobile margin so the panel can reach the screen edges\n   * (a full-screen sheet on phones). The panel still needs its own\n   * `h-[100dvh] max-w-full rounded-none` classes via `className` to fill it; the\n   * desktop `md:p-4` margin is kept. Defaults to false (padded on all sizes).\n   */\n  fullBleed?: boolean;\n  /**\n   * Let the user drag the panel out of the way by its top edge (Keksdose feedback\n   * dev#460: *\"Make the feedback dialog draggable so I can see behind it if it\n   * blocks something.\"*).\n   *\n   * Opt-in, because it only makes sense for a dialog whose content is ABOUT the page\n   * behind it — the feedback composer is the case, an ordinary form is not, and a\n   * draggable panel that has nothing to reveal is a control that can only get lost.\n   *\n   * Pointer-only by design: it is a \"move this out of the way\" gesture, not a layout\n   * choice worth persisting, and the position resets when the dialog closes. On a\n   * phone the panel is a bottom sheet the width of the screen, so dragging is\n   * suppressed there — there is nothing beside it to see.\n   */\n  draggable?: boolean;\n}\n\n/**\n * Centered (bottom-sheet on mobile) modal dialog: dimmed backdrop, single\n * rounded panel. Owns the overlay mechanics that the hand-rolled dialogs each\n * re-implemented or lacked — backdrop-click + Escape to close, the platform Back\n * gesture (Keksdose feedback #172), background scroll lock (feedback #204), focus\n * into the panel on open and back to the trigger on close, a Tab focus trap, and\n * `role=\"dialog\"`/`aria-modal`.\n */\nexport function Modal({\n  onClose,\n  children,\n  size = \"md\",\n  className,\n  labelledBy,\n  onKeyDown,\n  fullBleed,\n  draggable,\n}: ModalProps) {\n  const panelRef = useRef<HTMLDivElement>(null);\n  const drag = useDragOffset(Boolean(draggable));\n  // The panel lowers itself before the caller unmounts it (live #320 rework). Every\n  // dismissal below goes through `requestClose`; `onClose` still does the closing, one\n  // animation later. A caller that closes the dialog ITSELF — after a save, say —\n  // unmounts with no exit, which is the documented limit of this.\n  const { closing, requestClose } = useCloseTransition(onClose);\n  const backdropClose = useBackdropClose(requestClose);\n  // Back means the same as Escape here. On a phone Escape doesn't exist, so without\n  // this the only way out of a dialog is finding its close button — and Back, the\n  // gesture everyone reaches for, navigated the page underneath instead (#172).\n  // Mounted only while open, hence the constant `true`.\n  useOverlayHistory(true, requestClose);\n\n  // Mounted only while open, hence the constant `true`. Through the shared hook and\n  // not by hand: this component's own save/restore copy was one half of the pair that\n  // left the page permanently unscrollable when a dialog containing an open sheet was\n  // closed — see the note in use-body-scroll-lock.ts.\n  useBodyScrollLock(true);\n\n  useEffect(() => {\n    const previouslyFocused = document.activeElement as HTMLElement | null;\n    // Focus the panel itself (not the first field) so opening doesn't pop the\n    // mobile keyboard, while still moving focus into the dialog for keyboard and\n    // screen-reader users.\n    panelRef.current?.focus();\n    return () => {\n      previouslyFocused?.focus?.();\n    };\n  }, []);\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(e);\n    if (e.defaultPrevented) return;\n    if (e.key === \"Escape\") {\n      e.stopPropagation();\n      requestClose();\n      return;\n    }\n    if (e.key !== \"Tab\") return;\n    // Keep Tab within the dialog. Elements inside a portal'd panel (e.g. an open\n    // dropdown) live outside this subtree, so this handler never fires for them\n    // — they manage their own focus.\n    const focusables = panelRef.current?.querySelectorAll<HTMLElement>(FOCUSABLE);\n    if (!focusables || focusables.length === 0) {\n      e.preventDefault();\n      panelRef.current?.focus();\n      return;\n    }\n    const first = focusables[0];\n    const last = focusables[focusables.length - 1];\n    const active = document.activeElement;\n    if (e.shiftKey && (active === first || active === panelRef.current)) {\n      e.preventDefault();\n      last.focus();\n    } else if (!e.shiftKey && active === last) {\n      e.preventDefault();\n      first.focus();\n    }\n  };\n\n  // Portal to <body> so the `fixed inset-0 z-50` overlay escapes whatever stacking\n  // context its caller sits in. Rendered inline, a modal opened from e.g. the top\n  // bar (a z-30 context) could paint BELOW a sibling z-30 sticky element like the\n  // expanded transaction editor (feedback #320). The tour/command-palette overlays\n  // already portal for the same reason.\n  return createPortal(\n    <div\n      className={cn(\n        // Live #320. The panel below rises only where it is bottom-anchored: from md up\n        // it is centred, and a centred box sliding up from off-screen reads as a\n        // different component arriving rather than as the same one settling.\n        closing ? \"animate-overlay-out\" : \"animate-overlay\",\n        \"fixed inset-0 z-50 flex items-end justify-center bg-black/40 md:items-center\",\n        fullBleed ? \"p-0 md:p-4\" : \"p-4\",\n      )}\n      {...backdropClose}\n    >\n      <div\n        ref={panelRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={labelledBy}\n        tabIndex={-1}\n        onKeyDown={handleKeyDown}\n        onPointerDown={drag.onPointerDown}\n        style={drag.style}\n        className={cn(\n          closing ? \"animate-sheet-out md:animate-none\" : \"animate-sheet md:animate-none\",\n          \"w-full rounded-lg border border-slate-200 bg-white shadow-sm outline-none dark:border-slate-800 dark:bg-slate-900\",\n          { md: \"max-w-md\", lg: \"max-w-lg\", xl: \"max-w-3xl\" }[size],\n          // A panel taller than the screen has to scroll ITSELF. The backdrop is\n          // `fixed inset-0` and the body is scroll-locked while a dialog is open, so\n          // without this the overflow simply had nowhere to go: on a phone the panel\n          // is bottom-anchored, so it grew UPWARD past the top edge and the part that\n          // went past it could not be reached by any gesture (Keksdose live #254, on\n          // the price-merge dialog — but it was every dialog with more than a screen\n          // of content). `max-h-full` resolves against the backdrop's content box,\n          // which is the viewport minus its own padding, so the panel stops exactly\n          // where the screen does; `overscroll-contain` keeps the fling inside it.\n          //\n          // Three callers had already patched themselves with `max-h-[90vh]` +\n          // an inner scroller. Those still win — `cn` is tailwind-merge — and this is\n          // the default they should not have needed.\n          \"max-h-full overflow-y-auto overscroll-contain\",\n          \"p-4\",\n          // The grab affordance sits on the panel's own top strip: a drag handle of\n          // its own would be one more control in a dialog that is mostly one field.\n          draggable && \"md:[&>*:first-child]:cursor-grab\",\n          className,\n        )}\n      >\n        {children}\n      </div>\n    </div>,\n    document.body,\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/modal.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport type {\n  ComponentPropsWithoutRef,\n  KeyboardEvent,\n  MouseEvent as ReactMouseEvent,\n  PointerEvent as ReactPointerEvent,\n  ReactNode,\n} from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useFocusTrap } from \"../hooks/use-focus-trap\";\nimport { useBodyScrollLock } from \"../hooks/use-body-scroll-lock\";\nimport { useOverlayHistory } from \"../hooks/use-overlay-history\";\nimport { useCloseTransition } from \"../hooks/use-close-transition\";\n\n/**\n * Drag the panel by its top strip, in pointer space (dev#460).\n *\n * Deliberately not a library and not persisted: the offset is component state that\n * dies with the dialog. It starts only on a press that lands on the panel's own\n * chrome — never on a field, a button or a link, which is what keeps \"drag to select\n * text in the textarea\" working. Above `md` only: below it the panel is a\n * full-width bottom sheet with nothing beside it to uncover.\n *\n * The whole gesture stays on the PANEL — captured pointer, React handlers — rather than\n * on `window`. The first shape of this added `pointermove`/`pointerup` to `window` from\n * inside the `pointerdown` handler and took them off again from the `pointerup` handler,\n * so the teardown ran only if the gesture ended: React never sees a listener added from\n * an event handler, and an unmount mid-drag left a live `pointermove` on `window` for\n * the life of the page, pinning this hook's state with it. The one caller that enables\n * dragging is the feedback composer, which closes ITSELF on submit — a Ctrl+Enter sent\n * with the pointer still down is exactly that order of events, once per drag.\n */\nfunction useDragOffset(enabled: boolean) {\n  const [offset, setOffset] = useState<{ x: number; y: number } | null>(null);\n  const from = useRef<{ x: number; y: number; ox: number; oy: number } | null>(null);\n\n  const endDrag = () => {\n    from.current = null;\n  };\n\n  return {\n    style: offset ? { transform: `translate(${offset.x}px, ${offset.y}px)` } : undefined,\n    handlers: !enabled\n      ? undefined\n      : {\n          onPointerDown: (e: ReactPointerEvent<HTMLDivElement>) => {\n            if (e.button !== 0 || window.innerWidth < 768) return;\n            const target = e.target as HTMLElement;\n            // Only the panel itself and its non-interactive chrome start a drag; a\n            // press inside any control belongs to that control.\n            if (target.closest(\"input,textarea,select,button,a,[role='button']\")) return;\n            from.current = { x: e.clientX, y: e.clientY, ox: offset?.x ?? 0, oy: offset?.y ?? 0 };\n            try {\n              // Capture is what lets the handlers live on the panel: every later\n              // pointer event for this pointer retargets here, so the drag keeps\n              // working once the pointer outruns the panel's own box — which it always\n              // does, since the panel moves out from under it.\n              e.currentTarget.setPointerCapture(e.pointerId);\n            } catch {\n              // jsdom implements no pointer capture, and a browser throws\n              // NotFoundError for a pointerId that is already gone. Neither is worth\n              // refusing the drag: uncaptured, the panel still gets the moves that\n              // land on it.\n            }\n          },\n          onPointerMove: (e: ReactPointerEvent<HTMLDivElement>) => {\n            const start = from.current;\n            if (!start) return;\n            setOffset({ x: start.ox + e.clientX - start.x, y: start.oy + e.clientY - start.y });\n          },\n          onPointerUp: endDrag,\n          // A cancel (the browser taking the pointer for a scroll or a gesture) and a\n          // lost capture both mean no `pointerup` is coming. Without them the drag would\n          // stay \"live\" and the next move over the panel would jump it.\n          onPointerCancel: endDrag,\n          onLostPointerCapture: endDrag,\n        },\n  };\n}\n\n/**\n * Backdrop handlers that close only when a press starts AND ends on the\n * backdrop itself. A plain onClick fires on mouseup, so dragging a text\n * selection that starts inside the panel and releases over the backdrop would\n * dismiss the dialog (feedback #254) — and the reverse drag would too, since\n * click targets the common ancestor of the down/up elements.\n */\nexport function useBackdropClose(onClose: () => void) {\n  const pressStartedOnBackdrop = useRef(false);\n  return {\n    onMouseDown: (e: ReactMouseEvent<HTMLDivElement>) => {\n      pressStartedOnBackdrop.current = e.target === e.currentTarget;\n    },\n    onMouseUp: (e: ReactMouseEvent<HTMLDivElement>) => {\n      const started = pressStartedOnBackdrop.current;\n      pressStartedOnBackdrop.current = false;\n      if (started && e.target === e.currentTarget) onClose();\n    },\n  };\n}\n\n// Tab-cycle target set: the interactive descendants the focus trap rotates\n// through. Querying live (per keystroke) means dynamically rendered fields are\n// included automatically.\n/**\n * `extends ComponentPropsWithoutRef<\"div\">` so anything a `<div>` takes reaches the\n * PANEL — the element with `role=\"dialog\"`, which is the one a consumer means. That is\n * where a `data-tour` anchor, a test id, an `aria-describedby` or an `aria-label` has\n * to land; before this, a closed prop list dropped all four silently (audit §api-design).\n */\nexport interface ModalProps extends ComponentPropsWithoutRef<\"div\"> {\n  /** Invoked on backdrop click and on Escape. */\n  onClose: () => void;\n  children: ReactNode;\n  /**\n   * Panel max-width: `md` (28rem), `lg` (32rem), `xl` (48rem).\n   *\n   * `xl` exists because two callers had already written `className=\"max-w-3xl\"` to\n   * reach it — the payee backfill's preview table and the price-merge dialog, both\n   * of which hold a list and several fields rather than one question. A caller\n   * patching a missing size IS the signal that the size is missing, and a\n   * hand-written width in a `className` is a width nothing else can line up with.\n   *\n   * The panel is `w-full` under every one of them, so the cap only bites once the\n   * viewport is wider than it: on a phone all three are the same full-width bottom\n   * sheet. Nothing here may introduce a `min-w-*`, which is what would break that.\n   */\n  size?: \"md\" | \"lg\" | \"xl\";\n  /** Extra classes for the panel (e.g. `space-y-3` for form content spacing). */\n  className?: string;\n  /** id of the heading element, wired to `aria-labelledby`. */\n  labelledBy?: string;\n  /**\n   * Extra key handling on the panel (e.g. Ctrl/Cmd+Enter to submit). Runs first;\n   * if it calls `preventDefault()` the built-in Escape/Tab handling is skipped\n   * for that event.\n   */\n  onKeyDown?: (e: KeyboardEvent<HTMLDivElement>) => void;\n  /**\n   * Drop the backdrop's mobile margin so the panel can reach the screen edges\n   * (a full-screen sheet on phones). The panel still needs its own\n   * `h-[100dvh] max-w-full rounded-none` classes via `className` to fill it; the\n   * desktop `md:p-4` margin is kept. Defaults to false (padded on all sizes).\n   */\n  fullBleed?: boolean;\n  /**\n   * Let the user drag the panel out of the way by its top edge (Keksdose feedback\n   * dev#460: *\"Make the feedback dialog draggable so I can see behind it if it\n   * blocks something.\"*).\n   *\n   * Opt-in, because it only makes sense for a dialog whose content is ABOUT the page\n   * behind it — the feedback composer is the case, an ordinary form is not, and a\n   * draggable panel that has nothing to reveal is a control that can only get lost.\n   *\n   * Pointer-only by design: it is a \"move this out of the way\" gesture, not a layout\n   * choice worth persisting, and the position resets when the dialog closes. On a\n   * phone the panel is a bottom sheet the width of the screen, so dragging is\n   * suppressed there — there is nothing beside it to see.\n   */\n  draggable?: boolean;\n}\n\n/**\n * Centered (bottom-sheet on mobile) modal dialog: dimmed backdrop, single\n * rounded panel. Owns the overlay mechanics that the hand-rolled dialogs each\n * re-implemented or lacked — backdrop-click + Escape to close, the platform Back\n * gesture (Keksdose feedback #172), background scroll lock (feedback #204), focus\n * into the panel on open and back to the trigger on close, a Tab focus trap, and\n * `role=\"dialog\"`/`aria-modal`.\n */\nexport function Modal({\n  onClose,\n  children,\n  size = \"md\",\n  className,\n  labelledBy,\n  onKeyDown,\n  fullBleed,\n  draggable,\n  style,\n  ...rest\n}: ModalProps) {\n  const panelRef = useRef<HTMLDivElement>(null);\n  const drag = useDragOffset(Boolean(draggable));\n  // The panel lowers itself before the caller unmounts it (live #320 rework). Every\n  // dismissal below goes through `requestClose`; `onClose` still does the closing, one\n  // animation later. A caller that closes the dialog ITSELF — after a save, say —\n  // unmounts with no exit, which is the documented limit of this.\n  const { closing, requestClose } = useCloseTransition(onClose);\n  const backdropClose = useBackdropClose(requestClose);\n  // Back means the same as Escape here. On a phone Escape doesn't exist, so without\n  // this the only way out of a dialog is finding its close button — and Back, the\n  // gesture everyone reaches for, navigated the page underneath instead (#172).\n  // Mounted only while open, hence the constant `true`.\n  useOverlayHistory(true, requestClose);\n\n  // Mounted only while open, hence the constant `true`. Through the shared hook and\n  // not by hand: this component's own save/restore copy was one half of the pair that\n  // left the page permanently unscrollable when a dialog containing an open sheet was\n  // closed — see the note in use-body-scroll-lock.ts.\n  useBodyScrollLock(true);\n\n  // Focus the panel itself (not the first field) so opening doesn't pop the mobile\n  // keyboard, while still moving focus into the dialog for keyboard and screen-reader\n  // users. Through the shared hook since this component is where it came from — the\n  // hook adds per-keystroke recomputation, a guard on restoring to a detached node,\n  // and nesting, none of which this copy had.\n  useFocusTrap(panelRef, { active: true, initialFocus: \"container\" });\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(e);\n    if (e.defaultPrevented) return;\n    if (e.key === \"Escape\") {\n      e.stopPropagation();\n      requestClose();\n      return;\n    }\n    // Tab containment lives in useFocusTrap, which listens on the panel itself.\n  };\n\n  // Portal to <body> so the `fixed inset-0 z-50` overlay escapes whatever stacking\n  // context its caller sits in. Rendered inline, a modal opened from e.g. the top\n  // bar (a z-30 context) could paint BELOW a sibling z-30 sticky element like the\n  // expanded transaction editor (feedback #320). The tour/command-palette overlays\n  // already portal for the same reason.\n  return createPortal(\n    <div\n      className={cn(\n        // Live #320. The panel below rises only where it is bottom-anchored: from md up\n        // it is centred, and a centred box sliding up from off-screen reads as a\n        // different component arriving rather than as the same one settling.\n        closing ? \"animate-overlay-out\" : \"animate-overlay\",\n        \"fixed inset-0 z-50 flex items-end justify-center bg-black/40 md:items-center\",\n        fullBleed ? \"p-0 md:p-4\" : \"p-4\",\n      )}\n      {...backdropClose}\n    >\n      <div\n        // `...rest` FIRST, everything the dialog needs to be a dialog after it. A\n        // wrapper that spreads its own props through to this one cannot then take away\n        // the role, the modality or the `tabIndex={-1}` that `useFocusTrap` needs —\n        // losing any of the three is silent, and the symptom (a dialog a screen reader\n        // walks straight out of) shows up nowhere near the call site that caused it.\n        {...rest}\n        ref={panelRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={labelledBy}\n        tabIndex={-1}\n        onKeyDown={handleKeyDown}\n        {...drag.handlers}\n        // MERGED, not replaced: `drag.style` is undefined until a drag starts, so\n        // assigning it outright would drop a caller's own `style` on every render but\n        // the ones where the panel is being dragged.\n        style={{ ...style, ...drag.style }}\n        className={cn(\n          closing ? \"animate-sheet-out md:animate-none\" : \"animate-sheet md:animate-none\",\n          \"w-full rounded-lg border border-[var(--border)] bg-[var(--bg-surface)] shadow-sm outline-none\",\n          { md: \"max-w-md\", lg: \"max-w-lg\", xl: \"max-w-3xl\" }[size],\n          // A panel taller than the screen has to scroll ITSELF. The backdrop is\n          // `fixed inset-0` and the body is scroll-locked while a dialog is open, so\n          // without this the overflow simply had nowhere to go: on a phone the panel\n          // is bottom-anchored, so it grew UPWARD past the top edge and the part that\n          // went past it could not be reached by any gesture (Keksdose live #254, on\n          // the price-merge dialog — but it was every dialog with more than a screen\n          // of content). `max-h-full` resolves against the backdrop's content box,\n          // which is the viewport minus its own padding, so the panel stops exactly\n          // where the screen does; `overscroll-contain` keeps the fling inside it.\n          //\n          // Three callers had already patched themselves with `max-h-[90vh]` +\n          // an inner scroller. Those still win — `cn` is tailwind-merge — and this is\n          // the default they should not have needed.\n          \"max-h-full overflow-y-auto overscroll-contain\",\n          \"p-4\",\n          // The grab affordance sits on the panel's own top strip: a drag handle of\n          // its own would be one more control in a dialog that is mostly one field.\n          draggable && \"md:[&>*:first-child]:cursor-grab\",\n          className,\n        )}\n      >\n        {children}\n      </div>\n    </div>,\n    document.body,\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/month-picker.d.ts

@@ -0,0 +1,79 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+
+/**
+ * Every string the month picker can speak. The month and year names are NOT here —
+ * they come from `Intl` in the `locale` prop, so they are already in the user's
+ * language. What is left is the two icon-only year arrows, whose `aria-label` is the
+ * only name they have, the panel's name, and a month cell's name.
+ */
+interface MonthPickerLabels {
+    previousYear: string;
+    nextYear: string;
+    /** The popover's accessible name (`role="dialog"`). */
+    panel: string;
+    /**
+     * Accessible name of one month cell, given that month and its year formatted in
+     * `locale` ("August 2026"). The cell's visible text is the short month alone, and
+     * "Aug" read out on its own does not say which year the grid is on.
+     */
+    month: (monthYear: string) => string;
+}
+/** The English starting point every override is merged onto. Exported (unlike the
+ *  calendar's) because it is asked for by name: a host building its own translation
+ *  table can spread it rather than re-typing four keys to change one. */
+declare const DEFAULT_MONTH_PICKER_LABELS: MonthPickerLabels;
+/**
+ * `onChange` is omitted from the `<div>` attributes: the DOM event of that name carries
+ * a `FormEvent`, and this one answers with a month key. Everything else reaches the
+ * field's root, so a test id or a `data-tour` anchor can find it.
+ */
+interface MonthPickerProps extends Omit<ComponentPropsWithoutRef<"div">, "onChange"> {
+    /**
+     * The selected month as a `"YYYY-MM"` key, or `""` for none.
+     *
+     * A string rather than `{ year, month }` or a `Date`, for the reason every date in
+     * this kit is one: it is what `monthKey()` in `lib/dates` produces, it sorts
+     * chronologically so the bounds are plain `<` / `>`, and it crosses a URL or an API
+     * without a serialiser. A `{ year, month }` caller converts with
+     * `` `${year}-${pad(month)}` `` (month 1–12) and back with `key.split("-").map(Number)`.
+     */
+    value: string;
+    /** Called with the picked month as `"YYYY-MM"`. */
+    onChange: (month: string) => void;
+    /** Drives the month and year names (`Intl.DateTimeFormat`). Defaults to the
+     *  `<UiKitProvider>` locale, then the runtime's. */
+    locale?: string;
+    /**
+     * Inclusive bounds, as `"YYYY-MM"`. A full ISO date (`"YYYY-MM-DD"`) is accepted and
+     * read as its month, so a host holding "the first day we have data for" can pass it
+     * straight in. Months outside are shown but refuse selection; a year arrow is
+     * disabled once the whole year beyond it is out of bounds.
+     */
+    min?: string;
+    max?: string;
+    /** Embedded top-boundary label, matching the other field-shaped controls. */
+    label?: ReactNode;
+    /** Trigger text when `value` is `""`. */
+    placeholder?: string;
+    disabled?: boolean;
+    /** Required and unanswered — {@link FIELD_INVALID}. See {@link Input}'s `invalid`. */
+    invalid?: boolean;
+    /** Intl options for the trigger's text (default: long month + numeric year). */
+    formatOptions?: Intl.DateTimeFormatOptions;
+    /**
+     * The month to ring as "now", as `"YYYY-MM"`. Defaults to the local calendar's
+     * current month; pass one to pin it (a test, a host with its own notion of today).
+     */
+    currentMonth?: string;
+    /** User-facing strings; see {@link MonthPickerLabels}. */
+    labels?: Partial<MonthPickerLabels>;
+    /** Extra classes for the field's root. */
+    className?: string;
+    /** Extra classes for the trigger button — e.g. a compact `h-9 w-auto` trigger
+     *  sitting between two icon buttons in a toolbar. */
+    triggerClassName?: string;
+}
+declare function MonthPicker({ value, onChange, locale: localeProp, min, max, label, placeholder, disabled, invalid, formatOptions, currentMonth, labels: labelsProp, className, triggerClassName, ...rest }: MonthPickerProps): react.JSX.Element;
+
+export { DEFAULT_MONTH_PICKER_LABELS, MonthPicker, type MonthPickerLabels, type MonthPickerProps };

package/dist/components/month-picker.js

@@ -0,0 +1,342 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
+import { Calendar, ChevronLeft, ChevronRight } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { monthKey, pad } from "../lib/dates.js";
+import { FieldLabel, FIELD_FLOATING_PAD, FIELD_INVALID, FIELD_TRIGGER } from "./ui.js";
+import { Popover } from "./popover.js";
+import { useKitLabels, useKitLocale } from "../i18n/kit-labels.js";
+const DEFAULT_MONTH_PICKER_LABELS = {
+  previousYear: "Previous year",
+  nextYear: "Next year",
+  panel: "Choose a month",
+  month: (monthYear) => monthYear
+};
+function useMonthPickerLabels(partial) {
+  return useKitLabels("monthPicker", DEFAULT_MONTH_PICKER_LABELS, partial);
+}
+const KEY = /^(\d{4})-(\d{2})/;
+function parseMonth(key) {
+  const m = key ? KEY.exec(key) : null;
+  if (!m) return null;
+  const month = Number(m[2]);
+  return month >= 1 && month <= 12 ? { year: Number(m[1]), month } : null;
+}
+function toKey({ year, month }) {
+  return `${year}-${pad(month)}`;
+}
+function shiftMonth(ym, delta) {
+  const index = ym.year * 12 + (ym.month - 1) + delta;
+  return { year: Math.floor(index / 12), month: index % 12 + 1 };
+}
+function boundKey(bound) {
+  const ym = parseMonth(bound);
+  return ym ? toKey(ym) : null;
+}
+function firstOf({ year, month }) {
+  return new Date(year, month - 1, 1);
+}
+const DEFAULT_TRIGGER_FORMAT = { month: "long", year: "numeric" };
+const MONTH_NAME_FORMAT = { month: "long", year: "numeric" };
+function MonthFieldTrigger({
+  open,
+  toggle,
+  triggerRef,
+  triggerText,
+  hasValue,
+  labelledBy,
+  valueId,
+  panelId,
+  padded,
+  disabled,
+  invalid,
+  className
+}) {
+  const wasOpen = useRef(false);
+  useEffect(() => {
+    const justClosed = wasOpen.current && !open;
+    wasOpen.current = open;
+    if (!justClosed) return;
+    const active = document.activeElement;
+    if (!active || active === document.body) triggerRef.current?.focus();
+  }, [open, triggerRef]);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref: triggerRef,
+      type: "button",
+      disabled,
+      onClick: toggle,
+      role: "combobox",
+      "aria-haspopup": "dialog",
+      "aria-controls": panelId,
+      "aria-expanded": open,
+      "aria-invalid": invalid || void 0,
+      "aria-labelledby": labelledBy,
+      className: cn(
+        FIELD_TRIGGER,
+        "pe-9",
+        padded && FIELD_FLOATING_PAD,
+        disabled && "cursor-not-allowed opacity-50",
+        invalid && FIELD_INVALID,
+        className
+      ),
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          id: valueId,
+          className: cn("truncate", !hasValue && "text-[var(--text-placeholder)]"),
+          children: triggerText || " "
+        }
+      )
+    }
+  );
+}
+const COLUMNS = 3;
+function MonthGrid({
+  value,
+  onPick,
+  locale,
+  minKey,
+  maxKey,
+  currentKey,
+  labels
+}) {
+  const outOfBounds = (key) => Boolean(minKey && key < minKey || maxKey && key > maxKey);
+  const [active, setActive] = useState(() => {
+    const start = value ? toKey(value) : currentKey;
+    if (minKey && start < minKey) return parseMonth(minKey);
+    if (maxKey && start > maxKey) return parseMonth(maxKey);
+    return parseMonth(start);
+  });
+  const year = active.year;
+  const gridRef = useRef(null);
+  const captionId = `${useId()}-year`;
+  const shortNames = useMemo(() => {
+    const fmt = new Intl.DateTimeFormat(locale, { month: "short" });
+    return Array.from({ length: 12 }, (_, i) => fmt.format(new Date(2e3, i, 1)));
+  }, [locale]);
+  const longName = useMemo(() => new Intl.DateTimeFormat(locale, MONTH_NAME_FORMAT), [locale]);
+  const yearCaption = new Intl.DateTimeFormat(locale, { year: "numeric" }).format(
+    firstOf({ year, month: 1 })
+  );
+  const pendingFocus = useRef(null);
+  useEffect(() => {
+    const key = pendingFocus.current;
+    if (!key) return;
+    pendingFocus.current = null;
+    gridRef.current?.querySelector(`[data-month="${key}"]`)?.focus();
+  });
+  useEffect(() => {
+    gridRef.current?.querySelector('[tabindex="0"]')?.focus();
+  }, []);
+  const moveTo = (next, focus) => {
+    if (focus) pendingFocus.current = toKey(next);
+    setActive(next);
+  };
+  const onCellKeyDown = (e) => {
+    const rtl = e.currentTarget.closest("[dir]")?.getAttribute("dir") === "rtl";
+    const col = (active.month - 1) % COLUMNS;
+    let delta;
+    switch (e.key) {
+      case "ArrowLeft":
+        delta = rtl ? 1 : -1;
+        break;
+      case "ArrowRight":
+        delta = rtl ? -1 : 1;
+        break;
+      case "ArrowUp":
+        delta = -COLUMNS;
+        break;
+      case "ArrowDown":
+        delta = COLUMNS;
+        break;
+      case "Home":
+        delta = -col;
+        break;
+      case "End":
+        delta = COLUMNS - 1 - col;
+        break;
+      case "PageUp":
+        delta = -12;
+        break;
+      case "PageDown":
+        delta = 12;
+        break;
+      default:
+        return;
+    }
+    e.preventDefault();
+    if (delta !== 0) moveTo(shiftMonth(active, delta), true);
+  };
+  const prevBlocked = Boolean(minKey && toKey({ year: year - 1, month: 12 }) < minKey);
+  const nextBlocked = Boolean(maxKey && toKey({ year: year + 1, month: 1 }) > maxKey);
+  const selectedKey = value ? toKey(value) : null;
+  const arrow = "flex size-7 items-center justify-center rounded text-[var(--text-muted)] hover:bg-[var(--bg-hover)] disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent";
+  return /* @__PURE__ */ jsxs("div", { className: "select-none", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": labels.previousYear,
+          disabled: prevBlocked,
+          onClick: () => moveTo(shiftMonth(active, -12), false),
+          className: arrow,
+          children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4 rtl:-scale-x-100" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          id: captionId,
+          "aria-live": "polite",
+          className: "text-sm font-semibold tabular-nums text-[var(--text-primary)]",
+          children: yearCaption
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": labels.nextYear,
+          disabled: nextBlocked,
+          onClick: () => moveTo(shiftMonth(active, 12), false),
+          className: arrow,
+          children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4 rtl:-scale-x-100" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { ref: gridRef, role: "grid", "aria-labelledby": captionId, className: "grid gap-1", children: Array.from({ length: 12 / COLUMNS }, (_, row) => /* @__PURE__ */ jsx("div", { role: "row", className: "grid grid-cols-3 gap-1", children: Array.from({ length: COLUMNS }, (_2, c) => {
+      const ym = { year, month: row * COLUMNS + c + 1 };
+      const key = toKey(ym);
+      const disabled = outOfBounds(key);
+      const selected = key === selectedKey;
+      const current = key === currentKey;
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          role: "gridcell",
+          "data-month": key,
+          tabIndex: ym.month === active.month ? 0 : -1,
+          "aria-label": labels.month(longName.format(firstOf(ym))),
+          "aria-selected": selected,
+          "aria-disabled": disabled || void 0,
+          "aria-current": current ? "date" : void 0,
+          onClick: () => {
+            if (disabled) return;
+            setActive(ym);
+            onPick(key);
+          },
+          onKeyDown: onCellKeyDown,
+          className: cn(
+            "rounded px-2 py-1.5 text-sm capitalize transition-colors",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset",
+            // A --brand ring on a --brand fill exists only in the DOM.
+            selected && !disabled ? "focus-visible:ring-[var(--brand-contrast)]" : "focus-visible:ring-[var(--brand)]",
+            disabled ? "cursor-not-allowed text-[var(--text-placeholder)]" : selected ? "bg-[var(--brand)] text-[var(--brand-contrast)] hover:bg-[var(--brand-hover)]" : "text-[var(--text-primary)] hover:bg-[var(--bg-hover)]",
+            current && !selected && !disabled && "ring-1 ring-inset ring-[var(--border-strong)]"
+          ),
+          children: shortNames[ym.month - 1]
+        },
+        c
+      );
+    }) }, row)) })
+  ] });
+}
+function upperFirst(text, locale) {
+  return text.charAt(0).toLocaleUpperCase(locale) + text.slice(1);
+}
+function MonthPicker({
+  value,
+  onChange,
+  locale: localeProp,
+  min,
+  max,
+  label,
+  placeholder,
+  disabled,
+  invalid,
+  formatOptions,
+  currentMonth,
+  labels: labelsProp,
+  className,
+  triggerClassName,
+  ...rest
+}) {
+  const labels = useMonthPickerLabels(labelsProp);
+  const locale = useKitLocale(localeProp);
+  const selected = parseMonth(value);
+  const minKey = boundKey(min);
+  const maxKey = boundKey(max);
+  const currentKey = boundKey(currentMonth) ?? monthKey(/* @__PURE__ */ new Date());
+  const triggerText = selected ? upperFirst(
+    new Intl.DateTimeFormat(locale, formatOptions ?? DEFAULT_TRIGGER_FORMAT).format(
+      firstOf(selected)
+    ),
+    locale
+  ) : placeholder ?? "";
+  const id = useId();
+  const labelId = `${id}-label`;
+  const valueId = `${id}-value`;
+  const panelId = `${id}-panel`;
+  const named = typeof label === "string";
+  return /* @__PURE__ */ jsxs("div", { ...rest, className: cn("relative", className), children: [
+    label !== void 0 && /* @__PURE__ */ jsx(FieldLabel, { children: label }),
+    named && /* @__PURE__ */ jsx("span", { id: labelId, "aria-hidden": true, className: "sr-only-fixed", children: label }),
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        width: 256,
+        panelId,
+        labels: { panel: labels.panel },
+        trigger: ({ open, toggle, ref }) => /* @__PURE__ */ jsx(
+          MonthFieldTrigger,
+          {
+            open,
+            toggle,
+            triggerRef: ref,
+            triggerText,
+            hasValue: selected != null,
+            labelledBy: named ? `${labelId} ${valueId}` : valueId,
+            valueId,
+            panelId,
+            padded: label !== void 0,
+            disabled,
+            invalid,
+            className: triggerClassName
+          }
+        ),
+        children: (close) => /* @__PURE__ */ jsx(
+          MonthGrid,
+          {
+            value: selected,
+            locale,
+            minKey,
+            maxKey,
+            currentKey,
+            labels,
+            onPick: (key) => {
+              onChange(key);
+              close();
+            }
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Calendar,
+      {
+        "aria-hidden": true,
+        className: "pointer-events-none absolute end-2.5 top-1/2 size-4 -translate-y-1/2 text-[var(--text-placeholder)]"
+      }
+    )
+  ] });
+}
+export {
+  DEFAULT_MONTH_PICKER_LABELS,
+  MonthPicker
+};
+//# sourceMappingURL=month-picker.js.map