@eifi1/ui-kit 0.4.1 → 0.5.0

package/dist/components/hover-menu.d.ts

@@ -1,7 +1,15 @@
 import * as react from 'react';
-import { ReactNode } from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-interface HoverMenuProps {
+/**
+ * Exported and `<div>`-shaped: the top bar composes several of these side by side, and
+ * telling them apart — in a test, in a guided tour, in an accessibility tree — needs an
+ * attribute the kit does not know about. A closed prop list dropped every one of them.
+ *
+ * `children` is omitted from the div attributes because here it is a render prop taking
+ * the panel's `close`, not a `ReactNode`.
+ */
+interface HoverMenuProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
     trigger: (state: {
         open: boolean;
         toggle: () => void;
@@ -9,8 +17,16 @@ interface HoverMenuProps {
     children: (close: () => void) => ReactNode;
     align?: "left" | "right";
     panelClassName?: string;
+    /** Extra classes for the WRAPPER (the panel has {@link panelClassName}). */
+    className?: string;
+    /**
+     * @deprecated Use the DOM spelling `aria-label`, which now reaches the wrapper like
+     * any other attribute. Kept working because keksdose, kastlan and lenkbank all pass
+     * this today and a rename to save one line of resolution is not a patch release; it
+     * loses to `aria-label` wherever both are given. Removal is a later minor.
+     */
     ariaLabel?: string;
 }
-declare function HoverMenu({ trigger, children, align, panelClassName, ariaLabel }: HoverMenuProps): react.JSX.Element;
+declare function HoverMenu({ trigger, children, align, panelClassName, className, ariaLabel, "aria-label": ariaLabelAttr, ...rest }: HoverMenuProps): react.JSX.Element;
 
-export { HoverMenu };
+export { HoverMenu, type HoverMenuProps };

package/dist/components/hover-menu.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { cn } from "../lib/cn.js";
@@ -5,7 +6,16 @@ import { useOutsideClick } from "../hooks/use-dismiss.js";
 const OPEN_DELAY_MS = 120;
 const CLOSE_DELAY_MS = 120;
 let activeClose = null;
-function HoverMenu({ trigger, children, align = "right", panelClassName, ariaLabel }) {
+function HoverMenu({
+  trigger,
+  children,
+  align = "right",
+  panelClassName,
+  className,
+  ariaLabel,
+  "aria-label": ariaLabelAttr,
+  ...rest
+}) {
   const wrapperRef = useRef(null);
   const [phase, setPhase] = useState("closed");
   const open = phase === "open" || phase === "closing";
@@ -74,11 +84,12 @@ function HoverMenu({ trigger, children, align = "right", panelClassName, ariaLab
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ...rest,
       ref: wrapperRef,
-      className: "relative",
+      className: cn("relative", className),
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
-      "aria-label": ariaLabel,
+      "aria-label": ariaLabelAttr ?? ariaLabel,
       children: [
         trigger({ open, toggle }),
         open && /* @__PURE__ */ jsx(
@@ -95,7 +106,7 @@ function HoverMenu({ trigger, children, align = "right", panelClassName, ariaLab
               {
                 role: "menu",
                 className: cn(
-                  "min-w-44 max-w-[calc(100vw-1rem)] rounded-md border border-slate-200 bg-white shadow-lg dark:border-slate-700 dark:bg-slate-900",
+                  "min-w-44 max-w-[calc(100vw-1rem)] rounded-md border border-[var(--border)] bg-[var(--bg-surface)] shadow-lg",
                   panelClassName
                 ),
                 children: children(close)

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/hover-menu.tsx"],"sourcesContent":["import { useCallback, useEffect, useLayoutEffect, useRef, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useOutsideClick } from \"../hooks/use-dismiss\";\n\ninterface HoverMenuProps {\n  trigger: (state: { open: boolean; toggle: () => void }) => ReactNode;\n  children: (close: () => void) => ReactNode;\n  align?: \"left\" | \"right\";\n  panelClassName?: string;\n  ariaLabel?: string;\n}\n\n// Hovering waits briefly before opening so sweeping the cursor across a row of\n// triggers doesn't flash menus; closing waits so the cursor can travel from\n// trigger to panel. Click/keyboard toggling is instant (no \"opening\" phase).\nconst OPEN_DELAY_MS = 120;\nconst CLOSE_DELAY_MS = 120;\n\ntype Phase = \"closed\" | \"opening\" | \"open\" | \"closing\";\n\n// Only one hover menu may show its panel at a time across the app — opening\n// one closes whichever was open, so adjacent top-bar menus can't overlap\n// (feedback #251). Module-level is fine: there is one cursor per document.\nlet activeClose: (() => void) | null = null;\n\nexport function HoverMenu({ trigger, children, align = \"right\", panelClassName, ariaLabel }: HoverMenuProps) {\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const [phase, setPhase] = useState<Phase>(\"closed\");\n  const open = phase === \"open\" || phase === \"closing\";\n\n  // Whether the panel is open *because hover opened it*, vs. an explicit\n  // click/keyboard toggle. A real mouse click on the trigger is always\n  // preceded by a real mouseenter — the cursor has to land on the button\n  // before it can be clicked — so once hover has opened the panel, the click\n  // that inevitably follows is the same physical gesture, not a request to\n  // close what was just opened (feedback #19). Toggling closed on click stays\n  // for keyboard/touch activation, which reaches \"open\" without going through\n  // the hover path.\n  const openedByHoverRef = useRef(false);\n\n  const close = useCallback(() => {\n    openedByHoverRef.current = false;\n    setPhase(\"closed\");\n  }, []);\n\n  const toggle = useCallback(\n    () =>\n      setPhase((p) => {\n        if (p === \"open\" || p === \"closing\") return openedByHoverRef.current ? p : \"closed\";\n        openedByHoverRef.current = false;\n        return \"open\";\n      }),\n    [],\n  );\n\n  const handleMouseEnter = useCallback(\n    () => setPhase((p) => (p === \"closing\" ? \"open\" : p === \"closed\" ? \"opening\" : p)),\n    [],\n  );\n\n  const handleMouseLeave = useCallback(\n    () => setPhase((p) => (p === \"opening\" ? \"closed\" : p === \"open\" ? \"closing\" : p)),\n    [],\n  );\n\n  // Drive the delayed transitions; unmount/phase changes cancel the timer.\n  useEffect(() => {\n    if (phase === \"opening\") {\n      const id = setTimeout(() => {\n        openedByHoverRef.current = true;\n        setPhase(\"open\");\n      }, OPEN_DELAY_MS);\n      return () => clearTimeout(id);\n    }\n    if (phase === \"closing\") {\n      const id = setTimeout(() => setPhase(\"closed\"), CLOSE_DELAY_MS);\n      return () => clearTimeout(id);\n    }\n  }, [phase]);\n\n  // Claim the \"active menu\" slot while our panel is visible, closing the\n  // previous holder. Cleanup releases the slot only if we still hold it\n  // (a successor that displaced us has already overwritten it).\n  useEffect(() => {\n    if (!open) return;\n    if (activeClose !== close) activeClose?.();\n    activeClose = close;\n    return () => {\n      if (activeClose === close) activeClose = null;\n    };\n  }, [open, close]);\n\n  useOutsideClick(wrapperRef, close, open);\n\n  // Keep the panel inside the viewport (feedback #85): a wide panel anchored to a\n  // trigger near a screen edge would otherwise spill off it (on mobile the guided-\n  // tours menu ran off the left). Once open, measure and translate it horizontally\n  // just enough to sit within an 8px margin. Recomputed on each open; `shiftX` is\n  // subtracted first so the measurement is against the natural position.\n  const panelRef = useRef<HTMLDivElement>(null);\n  const [shiftX, setShiftX] = useState(0);\n  useLayoutEffect(() => {\n    if (!open) {\n      setShiftX(0);\n      return;\n    }\n    const el = panelRef.current;\n    if (!el) return;\n    const rect = el.getBoundingClientRect();\n    if (rect.width === 0) return; // unmeasured (e.g. jsdom) — leave as-is\n    const margin = 8;\n    const naturalLeft = rect.left - shiftX;\n    const naturalRight = rect.right - shiftX;\n    let next = 0;\n    if (naturalRight > window.innerWidth - margin) next = window.innerWidth - margin - naturalRight;\n    if (naturalLeft + next < margin) next = margin - naturalLeft;\n    setShiftX(next);\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- recompute only on open/close\n  }, [open]);\n\n  return (\n    <div\n      ref={wrapperRef}\n      className=\"relative\"\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      aria-label={ariaLabel}\n    >\n      {trigger({ open, toggle })}\n      {open && (\n        <div\n          ref={panelRef}\n          className={cn(\n            \"absolute top-full z-40 pt-2\",\n            align === \"right\" ? \"right-0\" : \"left-0\",\n          )}\n          style={shiftX ? { transform: `translateX(${shiftX}px)` } : undefined}\n        >\n          <div\n            role=\"menu\"\n            className={cn(\n              \"min-w-44 max-w-[calc(100vw-1rem)] rounded-md border border-slate-200 bg-white shadow-lg dark:border-slate-700 dark:bg-slate-900\",\n              panelClassName,\n            )}\n          >\n            {children(close)}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/hover-menu.tsx"],"sourcesContent":["import { useCallback, useEffect, useLayoutEffect, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useOutsideClick } from \"../hooks/use-dismiss\";\n\n/**\n * Exported and `<div>`-shaped: the top bar composes several of these side by side, and\n * telling them apart — in a test, in a guided tour, in an accessibility tree — needs an\n * attribute the kit does not know about. A closed prop list dropped every one of them.\n *\n * `children` is omitted from the div attributes because here it is a render prop taking\n * the panel's `close`, not a `ReactNode`.\n */\nexport interface HoverMenuProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  trigger: (state: { open: boolean; toggle: () => void }) => ReactNode;\n  children: (close: () => void) => ReactNode;\n  align?: \"left\" | \"right\";\n  panelClassName?: string;\n  /** Extra classes for the WRAPPER (the panel has {@link panelClassName}). */\n  className?: string;\n  /**\n   * @deprecated Use the DOM spelling `aria-label`, which now reaches the wrapper like\n   * any other attribute. Kept working because keksdose, kastlan and lenkbank all pass\n   * this today and a rename to save one line of resolution is not a patch release; it\n   * loses to `aria-label` wherever both are given. Removal is a later minor.\n   */\n  ariaLabel?: string;\n}\n\n// Hovering waits briefly before opening so sweeping the cursor across a row of\n// triggers doesn't flash menus; closing waits so the cursor can travel from\n// trigger to panel. Click/keyboard toggling is instant (no \"opening\" phase).\nconst OPEN_DELAY_MS = 120;\nconst CLOSE_DELAY_MS = 120;\n\ntype Phase = \"closed\" | \"opening\" | \"open\" | \"closing\";\n\n// Only one hover menu may show its panel at a time across the app — opening\n// one closes whichever was open, so adjacent top-bar menus can't overlap\n// (feedback #251). Module-level is fine: there is one cursor per document.\nlet activeClose: (() => void) | null = null;\n\nexport function HoverMenu({\n  trigger,\n  children,\n  align = \"right\",\n  panelClassName,\n  className,\n  ariaLabel,\n  \"aria-label\": ariaLabelAttr,\n  ...rest\n}: HoverMenuProps) {\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const [phase, setPhase] = useState<Phase>(\"closed\");\n  const open = phase === \"open\" || phase === \"closing\";\n\n  // Whether the panel is open *because hover opened it*, vs. an explicit\n  // click/keyboard toggle. A real mouse click on the trigger is always\n  // preceded by a real mouseenter — the cursor has to land on the button\n  // before it can be clicked — so once hover has opened the panel, the click\n  // that inevitably follows is the same physical gesture, not a request to\n  // close what was just opened (feedback #19). Toggling closed on click stays\n  // for keyboard/touch activation, which reaches \"open\" without going through\n  // the hover path.\n  const openedByHoverRef = useRef(false);\n\n  const close = useCallback(() => {\n    openedByHoverRef.current = false;\n    setPhase(\"closed\");\n  }, []);\n\n  const toggle = useCallback(\n    () =>\n      setPhase((p) => {\n        if (p === \"open\" || p === \"closing\") return openedByHoverRef.current ? p : \"closed\";\n        openedByHoverRef.current = false;\n        return \"open\";\n      }),\n    [],\n  );\n\n  const handleMouseEnter = useCallback(\n    () => setPhase((p) => (p === \"closing\" ? \"open\" : p === \"closed\" ? \"opening\" : p)),\n    [],\n  );\n\n  const handleMouseLeave = useCallback(\n    () => setPhase((p) => (p === \"opening\" ? \"closed\" : p === \"open\" ? \"closing\" : p)),\n    [],\n  );\n\n  // Drive the delayed transitions; unmount/phase changes cancel the timer.\n  useEffect(() => {\n    if (phase === \"opening\") {\n      const id = setTimeout(() => {\n        openedByHoverRef.current = true;\n        setPhase(\"open\");\n      }, OPEN_DELAY_MS);\n      return () => clearTimeout(id);\n    }\n    if (phase === \"closing\") {\n      const id = setTimeout(() => setPhase(\"closed\"), CLOSE_DELAY_MS);\n      return () => clearTimeout(id);\n    }\n  }, [phase]);\n\n  // Claim the \"active menu\" slot while our panel is visible, closing the\n  // previous holder. Cleanup releases the slot only if we still hold it\n  // (a successor that displaced us has already overwritten it).\n  useEffect(() => {\n    if (!open) return;\n    if (activeClose !== close) activeClose?.();\n    activeClose = close;\n    return () => {\n      if (activeClose === close) activeClose = null;\n    };\n  }, [open, close]);\n\n  useOutsideClick(wrapperRef, close, open);\n\n  // Keep the panel inside the viewport (feedback #85): a wide panel anchored to a\n  // trigger near a screen edge would otherwise spill off it (on mobile the guided-\n  // tours menu ran off the left). Once open, measure and translate it horizontally\n  // just enough to sit within an 8px margin. Recomputed on each open; `shiftX` is\n  // subtracted first so the measurement is against the natural position.\n  const panelRef = useRef<HTMLDivElement>(null);\n  const [shiftX, setShiftX] = useState(0);\n  useLayoutEffect(() => {\n    if (!open) {\n      setShiftX(0);\n      return;\n    }\n    const el = panelRef.current;\n    if (!el) return;\n    const rect = el.getBoundingClientRect();\n    if (rect.width === 0) return; // unmeasured (e.g. jsdom) — leave as-is\n    const margin = 8;\n    const naturalLeft = rect.left - shiftX;\n    const naturalRight = rect.right - shiftX;\n    let next = 0;\n    if (naturalRight > window.innerWidth - margin) next = window.innerWidth - margin - naturalRight;\n    if (naturalLeft + next < margin) next = margin - naturalLeft;\n    setShiftX(next);\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- recompute only on open/close\n  }, [open]);\n\n  return (\n    <div\n      // `...rest` first: the hover handlers below are the whole component, and a caller\n      // passing one of its own must not silently replace them.\n      {...rest}\n      ref={wrapperRef}\n      className={cn(\"relative\", className)}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      // The DOM spelling wins; {@link HoverMenuProps.ariaLabel} is the deprecated alias\n      // three apps still pass, so it stays as the fallback rather than as the answer.\n      aria-label={ariaLabelAttr ?? ariaLabel}\n    >\n      {trigger({ open, toggle })}\n      {open && (\n        <div\n          ref={panelRef}\n          className={cn(\n            \"absolute top-full z-40 pt-2\",\n            align === \"right\" ? \"right-0\" : \"left-0\",\n          )}\n          style={shiftX ? { transform: `translateX(${shiftX}px)` } : undefined}\n        >\n          <div\n            role=\"menu\"\n            className={cn(\n              \"min-w-44 max-w-[calc(100vw-1rem)] rounded-md border border-[var(--border)] bg-[var(--bg-surface)] shadow-lg\",\n              panelClassName,\n            )}\n          >\n            {children(close)}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/mini-calendar.d.ts

@@ -1,9 +1,75 @@
 import * as react from 'react';
+import { ComponentPropsWithoutRef } from 'react';
 
-interface MiniCalendarProps {
+/**
+ * Every string this calendar can speak — the `miniCalendar` namespace of
+ * `<UiKitProvider labels>`, overridable per instance through the `labels` prop. The
+ * package carries no translation catalog (see the README), so the English defaults
+ * below are a starting point and not a commitment. `previousMonth`/`nextMonth` were already props for the
+ * reason the audit records: a German app reached this component through a bare
+ * re-export and announced its two icon-only arrows in English on a page whose
+ * `<html lang>` says `de`.
+ *
+ * The month caption is deliberately NOT here. It is produced by `Intl` from the
+ * `locale` prop, so it is already in the user's language, and the grid takes its
+ * accessible name from that element rather than from a string someone has to
+ * translate a second time.
+ *
+ * The ones that interpolate a date are FUNCTIONS taking the formatted date, for the
+ * reason `DataTableLabels` gives for its counted strings: a value glued into an
+ * English template literal is untranslatable, and the grammar around a date moves
+ * with it in most languages.
+ */
+interface MiniCalendarLabels {
+    previousMonth: string;
+    nextMonth: string;
+    /**
+     * Accessible name of one day cell, given that day formatted in `locale`
+     * ("Monday, 14 September 2026").
+     *
+     * The name has to carry the WHOLE date. The visible text of a cell is the day
+     * number alone, and "14" on its own tells a screen-reader user nothing — not the
+     * month they have arrowed into, not the year, not the weekday they are picking.
+     */
+    day: (date: string) => string;
+    /** Range mode: what the NEXT click will set. Spoken after every click, and the
+     *  grid's description while the panel is open. */
+    chooseStart: string;
+    chooseEnd: string;
+    /** Range mode: spoken after the click that set the start. */
+    startSelected: (date: string) => string;
+    /** Range mode: spoken after the click that completed the range. */
+    rangeSelected: (from: string, to: string) => string;
+}
+/** English defaults. Exported as the `miniCalendar` namespace of `UiKitLabels`
+ *  (src/i18n), the complete reference a translation is written against. */
+declare const DEFAULT_MINI_CALENDAR_LABELS: MiniCalendarLabels;
+/**
+ * `onSelect` is omitted from the `<div>` attributes and kept as this component's own:
+ * the DOM event of that name is a text-selection event taking one argument, and this one
+ * answers with the two ISO dates a range is made of. Everything else a `<div>` takes
+ * passes through to the root, so a tour anchor or a test id can find the calendar —
+ * before this, a closed prop list dropped both (audit §api-design).
+ */
+interface MiniCalendarProps extends Omit<ComponentPropsWithoutRef<"div">, "onSelect"> {
     from: string;
     to: string;
-    locale: string;
+    /**
+     * BCP 47 tag for the month caption, the weekday heads, the day numbers and the
+     * spoken dates. Optional since the kit grew `<UiKitProvider locale>`: a calendar
+     * NESTED in another kit component (the data table's date filter) has no call site
+     * of its own to pass one at, so it reads the provider's. Without either, `Intl`
+     * uses the runtime's default.
+     */
+    locale?: string;
+    /**
+     * The weekday the grid starts on, `0` = Sunday … `6` = Saturday (as `Date#getDay`).
+     * Defaults to the LOCALE's first day — Monday in most of Europe, Sunday in the US,
+     * Saturday in much of the Arab world — which is what the user's own wall calendar
+     * does. It was hard-wired to Monday before, which is wrong for most of the people
+     * who use a Sunday-first calendar and invisible to the people who wrote this one.
+     */
+    weekStartsOn?: WeekDay;
     onSelect: (from: string, to: string) => void;
     /** `"range"` (default) = two-click from→to; `"single"` = one click selects a
      *  single day (emitted as `onSelect(iso, iso)`). */
@@ -11,23 +77,45 @@ interface MiniCalendarProps {
     /** Optional inclusive ISO bounds; days outside `[min, max]` are disabled. */
     min?: string;
     max?: string;
-    /** Screen-reader names for the two month arrows. The package carries no
-     *  translation catalog (see the README), so every user-facing string is a prop
-     *  with an English default — these two were the exception, and a German app
-     *  reached this component through a bare re-export and announced them in
-     *  English on a page whose `<html lang>` says `de`. */
-    labels?: {
-        previousMonth?: string;
-        nextMonth?: string;
-    };
+    /** User-facing strings; see {@link MiniCalendarLabels}. */
+    labels?: Partial<MiniCalendarLabels>;
+    /**
+     * Take focus to the day the grid opens on — the selected one, or today — when this
+     * calendar mounts. For a panel that opened BECAUSE the user asked to pick a date:
+     * landing them on the day they are editing is the difference between one arrow key
+     * and a hunt through 42 cells.
+     *
+     * Off by default, and not called `autoFocus`, because it is not the same promise as
+     * the DOM attribute of that name: a calendar rendered INLINE (the data-table's
+     * column filter draws one above its from/to inputs) must not take the page's focus
+     * merely by existing.
+     */
+    focusOnOpen?: boolean;
+    /** Extra classes for the calendar's root. */
+    className?: string;
 }
+type WeekDay = 0 | 1 | 2 | 3 | 4 | 5 | 6;
 /**
  * Month-grid range picker used by the data-table date filter. Click once to set
  * the start (and clear the end), click again to set the end; clicking with a
- * full range already selected starts over. Monday-first, locale-aware labels.
+ * full range already selected starts over. The week starts where the locale's does
+ * (or at `weekStartsOn`), and every label comes from `Intl` in that locale.
  * In `single` mode each click selects one day. Days outside `min`/`max` (when
  * given) are disabled.
+ *
+ * **It is a grid, in the APG sense** (audit §a11y, "MiniCalendar is unusable with a
+ * keyboard or screen reader"). Before this it was 42 buttons in a `grid-cols-7` div:
+ * every one of them in the tab order, none of them saying which date it was, and no
+ * way to reach next month without a mouse. Now the month is a `role="grid"` of rows
+ * and `gridcell`s, exactly one day is tabbable (the roving tabindex), and the arrows
+ * walk the calendar the way the pattern says — day, week, month — crossing into the
+ * neighbouring month by MOVING the grid rather than stopping at its edge.
+ *
+ * Out-of-range days are `aria-disabled` rather than `disabled`, which is the APG
+ * guidance and not a shortcut: a `disabled` button cannot be focused, so a bounded
+ * month would have holes that the roving tabindex falls into. They stay reachable and
+ * readable, and the click handler is what refuses them.
  */
-declare function MiniCalendar({ from, to, locale, onSelect, mode, min, max, labels, }: MiniCalendarProps): react.JSX.Element;
+declare function MiniCalendar({ from, to, locale: localeProp, weekStartsOn, onSelect, mode, min, max, labels: labelsProp, focusOnOpen, className, ...rest }: MiniCalendarProps): react.JSX.Element;
 
-export { MiniCalendar, type MiniCalendarProps };
+export { DEFAULT_MINI_CALENDAR_LABELS, MiniCalendar, type MiniCalendarLabels, type MiniCalendarProps, type WeekDay };

package/dist/components/mini-calendar.js

@@ -1,61 +1,171 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useMemo, useState } from "react";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "../lib/cn.js";
+import { useAnnounce } from "../hooks/use-announce.js";
 import { parseIsoDate, sameYmd, toLocalIso } from "../lib/dates.js";
+import { useKitLabels, useKitLocale } from "../i18n/kit-labels.js";
+const DEFAULT_MINI_CALENDAR_LABELS = {
+  previousMonth: "Previous month",
+  nextMonth: "Next month",
+  day: (date) => date,
+  chooseStart: "Choose a start date",
+  chooseEnd: "Choose an end date",
+  startSelected: (date) => `${date} selected as the start. Choose an end date.`,
+  rangeSelected: (from, to) => `${from} to ${to} selected. Choose a start date to begin again.`
+};
+const DAY_NAME_FORMAT = {
+  weekday: "long",
+  day: "numeric",
+  month: "long",
+  year: "numeric"
+};
+function localeWeekStart(locale) {
+  try {
+    const tag = locale ?? new Intl.DateTimeFormat().resolvedOptions().locale;
+    const loc = new Intl.Locale(tag);
+    const firstDay = (loc.getWeekInfo?.() ?? loc.weekInfo)?.firstDay;
+    if (typeof firstDay === "number") return firstDay % 7;
+  } catch {
+  }
+  return 1;
+}
+const weekdayIndex = (d, weekStart) => (d.getDay() - weekStart + 7) % 7;
+function stepMonths(d, months) {
+  const day = d.getDate();
+  const out = new Date(d.getFullYear(), d.getMonth() + months, 1);
+  const lastOfTarget = new Date(out.getFullYear(), out.getMonth() + 1, 0).getDate();
+  out.setDate(Math.min(day, lastOfTarget));
+  return out;
+}
 function MiniCalendar({
   from,
   to,
-  locale,
+  locale: localeProp,
+  weekStartsOn,
   onSelect,
   mode = "range",
   min,
   max,
-  labels
+  labels: labelsProp,
+  focusOnOpen,
+  className,
+  ...rest
 }) {
+  const labels = useKitLabels("miniCalendar", DEFAULT_MINI_CALENDAR_LABELS, labelsProp);
+  const locale = useKitLocale(localeProp);
+  const weekStart = useMemo(
+    () => weekStartsOn ?? localeWeekStart(locale),
+    [weekStartsOn, locale]
+  );
+  const dayNumber = useMemo(() => new Intl.NumberFormat(locale), [locale]);
   const fromDate = parseIsoDate(from);
   const toDate = parseIsoDate(to);
   const minDate = min ? parseIsoDate(min) : null;
   const maxDate = max ? parseIsoDate(max) : null;
   const isDisabled = (d) => Boolean(minDate && d < minDate || maxDate && d > maxDate);
-  const initial = fromDate ?? toDate ?? /* @__PURE__ */ new Date();
-  const [view, setView] = useState({
-    year: initial.getFullYear(),
-    month: initial.getMonth()
+  const gridRef = useRef(null);
+  const id = useId();
+  const monthId = `${id}-month`;
+  const hintId = `${id}-hint`;
+  const { announce, regionProps } = useAnnounce();
+  const [activeIso, setActiveIso] = useState(() => {
+    const start = fromDate ?? toDate ?? /* @__PURE__ */ new Date();
+    if (minDate && start < minDate) return toLocalIso(minDate);
+    if (maxDate && start > maxDate) return toLocalIso(maxDate);
+    return toLocalIso(start);
   });
-  const [lastKey, setLastKey] = useState(`${from}|${to}`);
-  const currentKey = `${from}|${to}`;
-  if (currentKey !== lastKey) {
-    setLastKey(currentKey);
-    const next = parseIsoDate(from) ?? parseIsoDate(to);
-    if (next && (next.getFullYear() !== view.year || next.getMonth() !== view.month)) {
-      setView({ year: next.getFullYear(), month: next.getMonth() });
-    }
+  const [lastValue, setLastValue] = useState({ from, to });
+  if (lastValue.from !== from || lastValue.to !== to) {
+    const changed = lastValue.from !== from ? from : to;
+    setLastValue({ from, to });
+    const next = parseIsoDate(changed) ?? fromDate ?? toDate;
+    if (next && toLocalIso(next) !== activeIso) setActiveIso(toLocalIso(next));
   }
+  const activeDate = parseIsoDate(activeIso) ?? /* @__PURE__ */ new Date();
+  const view = { year: activeDate.getFullYear(), month: activeDate.getMonth() };
   const firstOfMonth = new Date(view.year, view.month, 1);
   const lastOfMonth = new Date(view.year, view.month + 1, 0);
-  const startWeekday = (firstOfMonth.getDay() + 6) % 7;
+  const startWeekday = weekdayIndex(firstOfMonth, weekStart);
   const cells = [];
   for (let i = 0; i < startWeekday; i++) cells.push(null);
   for (let d = 1; d <= lastOfMonth.getDate(); d++) cells.push(new Date(view.year, view.month, d));
   while (cells.length % 7 !== 0) cells.push(null);
+  const weeks = [];
+  for (let i = 0; i < cells.length; i += 7) weeks.push(cells.slice(i, i + 7));
   const monthLabel = firstOfMonth.toLocaleDateString(locale, { month: "long", year: "numeric" });
+  const formatDay = (d) => d.toLocaleDateString(locale, DAY_NAME_FORMAT);
   const weekdayLabels = useMemo(() => {
-    const ref = new Date(2024, 0, 1);
+    const ref = new Date(2024, 0, 7 + weekStart);
     return Array.from({ length: 7 }, (_, i) => {
       const d = new Date(ref);
       d.setDate(ref.getDate() + i);
-      return d.toLocaleDateString(locale, { weekday: "narrow" });
-    });
-  }, [locale]);
-  const move = (delta) => {
-    setView((v) => {
-      const d = new Date(v.year, v.month + delta, 1);
-      return { year: d.getFullYear(), month: d.getMonth() };
+      return {
+        narrow: d.toLocaleDateString(locale, { weekday: "narrow" }),
+        long: d.toLocaleDateString(locale, { weekday: "long" })
+      };
     });
+  }, [locale, weekStart]);
+  const pendingFocus = useRef(null);
+  useEffect(() => {
+    const iso = pendingFocus.current;
+    if (!iso) return;
+    pendingFocus.current = null;
+    gridRef.current?.querySelector(`[data-iso="${iso}"]`)?.focus();
+  });
+  useEffect(() => {
+    if (!focusOnOpen) return;
+    gridRef.current?.querySelector('[tabindex="0"]')?.focus();
+  }, [focusOnOpen]);
+  const moveTo = (d, focus) => {
+    const iso = toLocalIso(d);
+    if (iso === activeIso) return;
+    if (focus) pendingFocus.current = iso;
+    setActiveIso(iso);
+  };
+  const onDayKeyDown = (e) => {
+    const next = new Date(activeDate);
+    switch (e.key) {
+      case "ArrowLeft":
+        next.setDate(next.getDate() - 1);
+        break;
+      case "ArrowRight":
+        next.setDate(next.getDate() + 1);
+        break;
+      case "ArrowUp":
+        next.setDate(next.getDate() - 7);
+        break;
+      case "ArrowDown":
+        next.setDate(next.getDate() + 7);
+        break;
+      case "Home":
+        next.setDate(next.getDate() - weekdayIndex(next, weekStart));
+        break;
+      case "End":
+        next.setDate(next.getDate() + (6 - weekdayIndex(next, weekStart)));
+        break;
+      // Shift+Page is the year step, as in the APG example. It is the only way to
+      // reach a birth year without holding PageUp for four hundred keystrokes.
+      case "PageUp":
+        next.setTime(stepMonths(next, e.shiftKey ? -12 : -1).getTime());
+        break;
+      case "PageDown":
+        next.setTime(stepMonths(next, e.shiftKey ? 12 : 1).getTime());
+        break;
+      default:
+        return;
+    }
+    e.preventDefault();
+    moveTo(next, true);
+  };
+  const moveMonth = (delta) => {
+    moveTo(stepMonths(activeDate, delta), false);
   };
   const handleClick = (d) => {
+    if (isDisabled(d)) return;
     const iso = toLocalIso(d);
+    moveTo(d, false);
     if (mode === "single") {
       onSelect(iso, iso);
       return;
@@ -64,70 +174,146 @@ function MiniCalendar({
     const tt = parseIsoDate(to);
     if (!f || f && tt) {
       onSelect(iso, "");
+      announce(labels.startSelected(formatDay(d)));
       return;
     }
     if (d < f) {
       onSelect(iso, toLocalIso(f));
+      announce(labels.rangeSelected(formatDay(d), formatDay(f)));
     } else {
       onSelect(toLocalIso(f), iso);
+      announce(labels.rangeSelected(formatDay(f), formatDay(d)));
     }
   };
   const today = /* @__PURE__ */ new Date();
+  const hasBand = Boolean(fromDate && toDate && !sameYmd(fromDate, toDate));
+  const daysInMonth = (d) => new Date(d.getFullYear(), d.getMonth() + 1, 0).getDate();
   const inRange = (d) => {
     if (!fromDate || !toDate) return false;
     return d >= fromDate && d <= toDate;
   };
-  return /* @__PURE__ */ jsxs("div", { className: "select-none", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between pb-1", children: [
-      /* @__PURE__ */ jsx(
-        "button",
+  const awaitingEnd = Boolean(fromDate) && !toDate;
+  const rangeHint = awaitingEnd ? labels.chooseEnd : labels.chooseStart;
+  return (
+    // The caller's classes come last, so tailwind-merge lets them win the way
+    // `className` does everywhere else in the kit; `...rest` first, as in the rest of
+    // this wave, so nothing from outside can take the grid's own wiring away.
+    /* @__PURE__ */ jsxs("div", { ...rest, className: cn("select-none", className), children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between pb-1", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => moveMonth(-1),
+            "aria-label": labels.previousMonth,
+            className: "rounded p-1 text-[var(--text-muted)] hover:bg-[var(--bg-hover)]",
+            children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            id: monthId,
+            "aria-live": "polite",
+            className: "text-xs font-medium capitalize text-[var(--text-secondary)]",
+            children: monthLabel
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => moveMonth(1),
+            "aria-label": labels.nextMonth,
+            className: "rounded p-1 text-[var(--text-muted)] hover:bg-[var(--bg-hover)]",
+            children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(
+        "div",
         {
-          type: "button",
-          onClick: () => move(-1),
-          "aria-label": labels?.previousMonth ?? "Previous month",
-          className: "rounded p-1 text-slate-500 hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-800",
-          children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4" })
+          ref: gridRef,
+          role: "grid",
+          "aria-labelledby": monthId,
+          "aria-describedby": mode === "range" ? hintId : void 0,
+          className: "grid gap-y-0.5",
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                role: "row",
+                className: "grid grid-cols-7 text-center text-[10px] font-medium uppercase text-[var(--text-placeholder)]",
+                children: weekdayLabels.map((w, i) => /* @__PURE__ */ jsx("div", { role: "columnheader", "aria-label": w.long, className: "py-0.5", children: w.narrow }, i))
+              }
+            ),
+            weeks.map((week, wi) => (
+              // No column gap: the days of a range join into ONE band. With a gap each day
+              // was its own tinted box, and a selected fortnight read as fourteen chips.
+              /* @__PURE__ */ jsx("div", { role: "row", className: "grid grid-cols-7", children: week.map((d, di) => {
+                if (!d) return /* @__PURE__ */ jsx("div", { role: "gridcell", className: "h-8" }, di);
+                const iso = toLocalIso(d);
+                const disabled = isDisabled(d);
+                const isStart = !disabled && fromDate && sameYmd(d, fromDate);
+                const isEnd = !disabled && toDate && sameYmd(d, toDate);
+                const isToday = sameYmd(d, today);
+                const isInRange = !disabled && inRange(d) && !isStart && !isEnd;
+                const isActive = iso === activeIso;
+                const banded = hasBand && !disabled && (isStart || isEnd || isInRange);
+                const lastOfMonth2 = d.getDate() === daysInMonth(d);
+                const band = banded ? cn(
+                  "pointer-events-none absolute inset-y-0 bg-[var(--brand-bg)]",
+                  isStart ? "start-1/2 end-0" : isEnd ? "start-0 end-1/2" : "inset-x-0",
+                  isInRange && (di === 0 || d.getDate() === 1) && "rounded-s-full",
+                  isInRange && (di === 6 || lastOfMonth2) && "rounded-e-full",
+                  isStart && (di === 6 || lastOfMonth2) && "hidden",
+                  isEnd && (di === 0 || d.getDate() === 1) && "hidden"
+                ) : null;
+                return /* @__PURE__ */ jsxs("div", { role: "none", className: "relative flex h-8 items-center justify-center", children: [
+                  band && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: band }),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      role: "gridcell",
+                      "data-iso": iso,
+                      tabIndex: isActive ? 0 : -1,
+                      "aria-label": labels.day(formatDay(d)),
+                      "aria-selected": Boolean(isStart || isEnd || isInRange),
+                      "aria-disabled": disabled || void 0,
+                      "aria-current": isToday ? "date" : void 0,
+                      onClick: () => handleClick(d),
+                      onKeyDown: onDayKeyDown,
+                      className: cn(
+                        "relative size-8 rounded-full text-xs tabular-nums transition-colors",
+                        // A grid you can walk with the keyboard needs to show where the
+                        // keyboard IS. Inset because the cells sit half a pixel apart and
+                        // an outset ring would be drawn over by its neighbours; the
+                        // colour flips on the selected days for the reason the numpad's
+                        // "Done" key does — a --brand ring on a --brand fill is a ring
+                        // that exists only in the DOM.
+                        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset",
+                        isStart || isEnd ? "focus-visible:ring-[var(--brand-contrast)]" : "focus-visible:ring-[var(--brand)]",
+                        disabled ? "cursor-not-allowed text-[var(--text-placeholder)]" : isStart || isEnd ? "bg-[var(--brand)] text-[var(--brand-contrast)] hover:bg-[var(--brand-hover)]" : isInRange ? "font-medium text-[var(--brand-muted)] hover:bg-[var(--brand-bg-hover)]" : "text-[var(--text-primary)] hover:bg-[var(--bg-hover)]",
+                        isToday && !isStart && !isEnd && !isInRange && !disabled && "ring-1 ring-inset ring-[var(--border-strong)]"
+                      ),
+                      children: dayNumber.format(d.getDate())
+                    },
+                    di
+                  )
+                ] }, di);
+              }) }, wi)
+            ))
+          ]
         }
       ),
-      /* @__PURE__ */ jsx("div", { className: "text-xs font-medium capitalize text-slate-700 dark:text-slate-200", children: monthLabel }),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: () => move(1),
-          "aria-label": labels?.nextMonth ?? "Next month",
-          className: "rounded p-1 text-slate-500 hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-800",
-          children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4" })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-0.5 text-center text-[10px] font-medium uppercase text-slate-400 dark:text-slate-500", children: weekdayLabels.map((w, i) => /* @__PURE__ */ jsx("div", { className: "py-0.5", children: w }, i)) }),
-    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-0.5", children: cells.map((d, i) => {
-      if (!d) return /* @__PURE__ */ jsx("div", { className: "h-7" }, i);
-      const disabled = isDisabled(d);
-      const isStart = !disabled && fromDate && sameYmd(d, fromDate);
-      const isEnd = !disabled && toDate && sameYmd(d, toDate);
-      const isToday = sameYmd(d, today);
-      const isInRange = !disabled && inRange(d) && !isStart && !isEnd;
-      return /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          disabled,
-          onClick: () => handleClick(d),
-          className: cn(
-            "h-7 text-xs rounded transition-colors",
-            disabled ? "cursor-not-allowed text-slate-300 dark:text-slate-600" : isStart || isEnd ? "bg-sky-600 text-white hover:bg-sky-700 dark:bg-sky-500 dark:hover:bg-sky-400" : isInRange ? "bg-sky-100 text-sky-800 hover:bg-sky-200 dark:bg-sky-500/20 dark:text-sky-200" : "text-slate-700 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800",
-            isToday && !isStart && !isEnd && !isInRange && !disabled && "ring-1 ring-inset ring-slate-300 dark:ring-slate-600"
-          ),
-          children: d.getDate()
-        },
-        i
-      );
-    }) })
-  ] });
+      mode === "range" && /* @__PURE__ */ jsx("span", { id: hintId, className: "sr-only-fixed", children: rangeHint }),
+      /* @__PURE__ */ jsx("span", { ...regionProps })
+    ] })
+  );
 }
 export {
+  DEFAULT_MINI_CALENDAR_LABELS,
   MiniCalendar
 };
 //# sourceMappingURL=mini-calendar.js.map