@misoto22/folio 0.0.0 → 0.17.0

package/dist/components/Calendar/Calendar.js

@@ -0,0 +1,369 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { RiArrowDownSLine, RiArrowLeftSLine, RiArrowRightSLine } from "@remixicon/react";
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import {
+  DayPicker,
+  useDayPicker
+} from "react-day-picker";
+import { cn } from "../../lib/cn.js";
+const DEFAULT_SPAN = 10;
+const YEAR_PAGE = 24;
+const DEFAULT_LABELS = {
+  monthPanelLabel: "Month and year",
+  yearPanelLabel: "Year",
+  previousYearLabel: "Previous year",
+  nextYearLabel: "Next year",
+  earlierYearsLabel: "Earlier years",
+  laterYearsLabel: "Later years"
+};
+const PickerContext = createContext({
+  open: null,
+  setOpen: () => {
+  },
+  startMonth: /* @__PURE__ */ new Date(),
+  endMonth: /* @__PURE__ */ new Date(),
+  labels: DEFAULT_LABELS
+});
+function useLabels() {
+  const { dayPickerProps } = useDayPicker();
+  const code = dayPickerProps.locale?.code ?? "en-US";
+  return useMemo(
+    () => ({
+      caption: new Intl.DateTimeFormat(code, { month: "long", year: "numeric" }),
+      month: new Intl.DateTimeFormat(code, { month: "short" })
+    }),
+    [code]
+  );
+}
+const STEP = "grid size-8 shrink-0 place-items-center rounded-(--radius) text-(--ink-2) transition-colors duration-(--duration-fast) hover:bg-(--stone) hover:text-(--ink) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none";
+const CELL = "rounded-(--radius-row) py-2 text-sm transition-colors duration-(--duration-fast) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none";
+const CELL_ON = "bg-(--accent) text-(--accent-foreground)";
+const CELL_OFF = "text-(--ink-2) hover:bg-(--stone) hover:text-(--ink)";
+function MonthYearPanel({
+  index,
+  view,
+  anchor,
+  year: browsing,
+  month
+}) {
+  const { setOpen, startMonth, endMonth, labels: names } = useContext(PickerContext);
+  const { goToMonth } = useDayPicker();
+  const labels = useLabels();
+  const year = browsing ?? month.getFullYear();
+  const showing = year === month.getFullYear() ? month.getMonth() : -1;
+  const firstYear = startMonth.getFullYear();
+  const lastYear = endMonth.getFullYear();
+  const go = (nextYear, nextMonth) => {
+    goToMonth(new Date(nextYear, nextMonth - index, 1));
+    setOpen(null);
+  };
+  const inRange = (nextYear, nextMonth) => {
+    const value = nextYear * 12 + nextMonth;
+    const low = startMonth.getFullYear() * 12 + startMonth.getMonth();
+    const high = endMonth.getFullYear() * 12 + endMonth.getMonth();
+    return value >= low && value <= high;
+  };
+  if (view === "years") {
+    const page = (candidate) => Math.floor((candidate - firstYear) / YEAR_PAGE) * YEAR_PAGE + firstYear;
+    const start = anchor ?? page(year);
+    const years = Array.from({ length: YEAR_PAGE }, (_, offset) => start + offset).filter(
+      (candidate) => candidate >= firstYear && candidate <= lastYear
+    );
+    const back = start - YEAR_PAGE >= firstYear;
+    const forward = start + YEAR_PAGE <= lastYear;
+    const move = (delta) => setOpen({ index, view: "years", anchor: start + delta * YEAR_PAGE });
+    return /* @__PURE__ */ jsxs(Panel, { label: names.yearPanelLabel, children: [
+      /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center justify-between gap-1", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": names.earlierYearsLabel,
+            disabled: !back,
+            onClick: () => move(-1),
+            className: STEP,
+            children: /* @__PURE__ */ jsx(RiArrowLeftSLine, { size: 16, "aria-hidden": true })
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: "mono-meta tabular-nums text-(--ink-3-aa)", children: [
+          years[0],
+          " \u2013 ",
+          years.at(-1)
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": names.laterYearsLabel,
+            disabled: !forward,
+            onClick: () => move(1),
+            className: STEP,
+            children: /* @__PURE__ */ jsx(RiArrowRightSLine, { size: 16, "aria-hidden": true })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("div", { "data-picker-grid": true, className: "grid grid-cols-4 gap-1", children: years.map((candidate) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-current": candidate === year ? "true" : void 0,
+          onClick: () => setOpen({ index, view: "months", year: candidate }),
+          className: cn(CELL, "tabular-nums", candidate === year ? CELL_ON : CELL_OFF),
+          children: candidate
+        },
+        candidate
+      )) })
+    ] }, "years");
+  }
+  return /* @__PURE__ */ jsxs(Panel, { label: names.monthPanelLabel, children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center justify-between gap-1", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": names.previousYearLabel,
+          disabled: year <= firstYear,
+          onClick: () => setOpen({ index, view: "months", year: year - 1 }),
+          className: STEP,
+          children: /* @__PURE__ */ jsx(RiArrowLeftSLine, { size: 16, "aria-hidden": true })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setOpen({ index, view: "years", anchor }),
+          className: "rounded-(--radius-row) px-3 py-1 font-heading text-[length:var(--fs-item)] tabular-nums text-(--ink) transition-colors duration-(--duration-fast) hover:bg-(--stone)",
+          children: year
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": names.nextYearLabel,
+          disabled: year >= lastYear,
+          onClick: () => setOpen({ index, view: "months", year: year + 1 }),
+          className: STEP,
+          children: /* @__PURE__ */ jsx(RiArrowRightSLine, { size: 16, "aria-hidden": true })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { "data-picker-grid": true, className: "grid grid-cols-3 gap-1", children: Array.from({ length: 12 }, (_, monthIndex) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-current": monthIndex === showing ? "true" : void 0,
+        disabled: !inRange(year, monthIndex),
+        onClick: () => go(year, monthIndex),
+        className: cn(CELL, monthIndex === showing ? CELL_ON : CELL_OFF),
+        children: labels.month.format(new Date(year, monthIndex, 1))
+      },
+      monthIndex
+    )) })
+  ] }, "months");
+}
+function Panel({ label, children }) {
+  const box = useRef(null);
+  useEffect(() => {
+    const grid = box.current?.querySelector("[data-picker-grid]");
+    const target = box.current?.querySelector("[aria-current]") ?? grid?.querySelector("button:not(:disabled)");
+    target?.focus();
+  }, []);
+  const stops = () => Array.from(box.current?.querySelectorAll("button:not([disabled])") ?? []);
+  const wrap = (event) => {
+    if (event.key !== "Tab") return;
+    const buttons = stops();
+    const first = buttons[0];
+    const last = buttons[buttons.length - 1];
+    if (!first || !last) return;
+    const [edge, opposite] = event.shiftKey ? [first, last] : [last, first];
+    if (document.activeElement !== edge) return;
+    event.preventDefault();
+    opposite.focus();
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: box,
+      role: "dialog",
+      "aria-label": label,
+      onKeyDown: wrap,
+      className: "absolute inset-x-0 bottom-0 top-12 z-2 flex flex-col justify-center bg-(--paper)",
+      children
+    }
+  );
+}
+function CalendarCaption({ calendarMonth, displayIndex, className, ...rest }) {
+  const { open, setOpen } = useContext(PickerContext);
+  const labels = useLabels();
+  const trigger = useRef(null);
+  const mine = open !== null && open.index === displayIndex;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className,
+      onKeyDown: (event) => {
+        if (event.key !== "Escape" || !mine) return;
+        event.stopPropagation();
+        setOpen(null);
+        trigger.current?.focus();
+      },
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            ref: trigger,
+            type: "button",
+            "aria-expanded": mine,
+            onClick: () => setOpen(mine ? null : { index: displayIndex, view: "months" }),
+            className: "group flex items-center gap-1.5 rounded-(--radius-row) px-2 py-1 font-heading text-[length:var(--fs-item)] text-(--ink) transition-colors duration-(--duration-fast) hover:bg-(--stone)",
+            children: [
+              labels.caption.format(calendarMonth.date),
+              /* @__PURE__ */ jsx(
+                RiArrowDownSLine,
+                {
+                  size: 16,
+                  "aria-hidden": true,
+                  className: cn(
+                    "shrink-0 text-(--ink-3-aa) transition-transform duration-(--duration-fast)",
+                    mine && "rotate-180"
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        mine && open !== null && /* @__PURE__ */ jsx(
+          MonthYearPanel,
+          {
+            index: displayIndex,
+            view: open.view,
+            anchor: open.anchor,
+            year: open.year,
+            month: calendarMonth.date
+          }
+        )
+      ]
+    }
+  );
+}
+function Calendar({
+  className,
+  classNames,
+  components,
+  monthPanelLabel,
+  yearPanelLabel,
+  previousYearLabel,
+  nextYearLabel,
+  earlierYearsLabel,
+  laterYearsLabel,
+  ...props
+}) {
+  const now = /* @__PURE__ */ new Date();
+  const [open, setOpen] = useState(null);
+  const labels = {
+    monthPanelLabel: monthPanelLabel ?? DEFAULT_LABELS.monthPanelLabel,
+    yearPanelLabel: yearPanelLabel ?? DEFAULT_LABELS.yearPanelLabel,
+    previousYearLabel: previousYearLabel ?? DEFAULT_LABELS.previousYearLabel,
+    nextYearLabel: nextYearLabel ?? DEFAULT_LABELS.nextYearLabel,
+    earlierYearsLabel: earlierYearsLabel ?? DEFAULT_LABELS.earlierYearsLabel,
+    laterYearsLabel: laterYearsLabel ?? DEFAULT_LABELS.laterYearsLabel
+  };
+  const startMonth = props.startMonth ?? new Date(now.getFullYear() - DEFAULT_SPAN, 0);
+  const endMonth = props.endMonth ?? new Date(now.getFullYear() + DEFAULT_SPAN, 11);
+  const isRange = props.mode === "range";
+  const FILL = "[&>button]:bg-(--accent) [&>button]:text-(--accent-foreground) [&>button:hover]:bg-(--accent) [&>button:hover]:text-(--accent-foreground)";
+  return /* @__PURE__ */ jsx(PickerContext, { value: { open, setOpen, startMonth, endMonth, labels }, children: /* @__PURE__ */ jsx(
+    DayPicker,
+    {
+      showOutsideDays: true,
+      captionLayout: "label",
+      startMonth,
+      endMonth,
+      className: cn("w-fit p-3", className),
+      components: {
+        Chevron: ({ orientation, ...rest }) => orientation === "left" ? /* @__PURE__ */ jsx(RiArrowLeftSLine, { size: 16, "aria-hidden": true, ...rest }) : /* @__PURE__ */ jsx(RiArrowRightSLine, { size: 16, "aria-hidden": true, ...rest }),
+        MonthCaption: CalendarCaption,
+        ...components
+      },
+      classNames: {
+        // `rdp-root` is kept deliberately. Passing a class for a slot REPLACES
+        // the library's own, so overriding `root` silently removed the hook
+        // that every `.rdp-*` selector — ours and a consumer's — depends on.
+        root: "rdp-root relative",
+        // The nav renders BEFORE the months in the DOM, so left in the flow it
+        // stacks its two arrows above the grid. Taking it out of the flow puts
+        // them where they belong — one at each end of the caption.
+        //
+        // `h-9` is what makes them line up. The caption is a 36px row and the
+        // nav was a 16px glyph pinned at the same top edge, so the arrows sat
+        // ten pixels above the month they belong to — close enough to read as
+        // a mistake and not close enough to read as a decision. Same height,
+        // same centre line.
+        //
+        // It steps away while the picker is open: two ways to change the
+        // month, one of them behind a panel, is one too many.
+        //
+        // `pointer-events-none` on the STRIP and back on for the two buttons:
+        // at the caption's full height it lies across the caption, and a bar
+        // with nothing in the middle of it was still eating the click on the
+        // month label underneath.
+        nav: cn(
+          "pointer-events-none absolute inset-x-3 top-3 z-1 flex h-9 items-center justify-between transition-opacity duration-(--duration-fast)",
+          open && "opacity-0"
+        ),
+        // The arrows are pointer targets, not glyphs: a 16px chevron with no
+        // box is a 16px hit area, which is under every guideline there is.
+        button_previous: cn(STEP, open ? "pointer-events-none" : "pointer-events-auto"),
+        button_next: cn(STEP, open ? "pointer-events-none" : "pointer-events-auto"),
+        months: "flex flex-col gap-4 sm:flex-row",
+        // Positioned, because the month picker covers this month's grid and
+        // nothing else — in a two-month range picker each pane opens its own.
+        month: "relative flex flex-col gap-3",
+        month_caption: "flex h-9 items-center justify-center",
+        month_grid: "w-full border-collapse",
+        weekdays: "flex",
+        weekday: "w-9 mono-meta font-normal text-(--ink-3-aa)",
+        week: "mt-1 flex w-full",
+        // The band lives on the CELL and the mark lives on the BUTTON. Keeping
+        // them apart is what lets a range be one continuous wash while both of
+        // its ends stay round — the previous arrangement flattened the corners
+        // of whichever day was an end, and a one-day range is BOTH ends, so it
+        // came out as a square.
+        day: "relative p-0 text-center",
+        day_button: "relative z-1 inline-flex size-9 items-center justify-center rounded-(--radius-pill) text-sm text-(--ink-2) transition-colors duration-(--duration-fast) hover:bg-(--stone) hover:text-(--ink)",
+        selected: isRange ? "" : FILL,
+        // Today is an outline, not a fill — it is a fact about the calendar,
+        // not a choice the reader made, and the two must not look alike.
+        today: "[&>button]:ring-1 [&>button]:ring-(--rule-hard) [&>button]:ring-inset",
+        outside: "[&>button]:text-(--ink-3-aa)",
+        disabled: "[&>button]:opacity-(--disabled-opacity) [&>button]:pointer-events-none",
+        // The wash lives on the CELL and the mark on the BUTTON, which is what
+        // lets a range read as one continuous band while both of its ends stay
+        // round. A middle day gets the wash and no fill; the ends get both.
+        range_middle: "bg-(--accent-muted) [&>button]:text-(--ink) [&>button:hover]:bg-(--stone)",
+        range_start: cn("bg-(--accent-muted) rounded-s-(--radius-pill)", FILL),
+        range_end: cn("bg-(--accent-muted) rounded-e-(--radius-pill)", FILL),
+        hidden: "invisible",
+        ...classNames
+      },
+      ...props
+    }
+  ) });
+}
+var Calendar_default = Calendar;
+export {
+  Calendar,
+  Calendar_default as default
+};
+//# sourceMappingURL=Calendar.js.map

package/dist/components/Calendar/Calendar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["'use client'\n\nimport { RiArrowDownSLine, RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/react'\nimport {\n  createContext,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type KeyboardEvent,\n  type ReactNode,\n} from 'react'\nimport {\n  DayPicker,\n  useDayPicker,\n  type DayPickerProps,\n  type MonthCaptionProps,\n} from 'react-day-picker'\nimport { cn } from '../../lib/cn'\n\n/**\n * The strings the month-and-year picker says, none of which react-day-picker\n * knows about — its own `labels` prop covers its own chrome, and this panel is\n * ours. English by default, and exposed for the same reason `AppShell` exposes\n * `openLabel`: every one of these controls is an icon or a bare number, so the\n * string IS the control as far as a screen reader is concerned.\n *\n * The month names already follow `locale`, which is what made the chrome around\n * them read as an oversight rather than as a policy.\n */\nexport interface CalendarLabels {\n  /** Names the panel showing twelve months. */\n  monthPanelLabel?: string\n  /** Names the panel showing a page of years. */\n  yearPanelLabel?: string\n  /** The two chevrons that browse a year at a time, inside the month panel. */\n  previousYearLabel?: string\n  nextYearLabel?: string\n  /** The two chevrons that page the year grid, twenty-four at a time. */\n  earlierYearsLabel?: string\n  laterYearsLabel?: string\n}\n\nexport type CalendarProps = DayPickerProps & CalendarLabels\n\n/** Ten years either side of now — see the note on `startMonth` below. */\nconst DEFAULT_SPAN = 10\n\n/** How many years one page of the year grid holds: four columns, six rows. */\nconst YEAR_PAGE = 24\n\ntype View = 'months' | 'years'\n\ninterface PickerOpen {\n  /** Which displayed month has its picker open. */\n  index: number\n  view: View\n  /** The first year of the page the year grid is showing, when it is showing. */\n  anchor?: number\n  /**\n   * The year the MONTH grid is showing, when it is not the displayed month's.\n   *\n   * The picker browses; it does not navigate. Stepping the year used to call\n   * `goToMonth` and close the panel, so `‹` on \"2026\" left the reader looking\n   * at a different month with the picker gone — one click that did two things,\n   * neither of them the one asked for. Now the arrows move this, the grid\n   * re-renders under them, and the calendar moves only when a month is chosen.\n   */\n  year?: number\n}\n\n/** Every label resolved, so nothing downstream has to know the defaults. */\ntype ResolvedLabels = Required<CalendarLabels>\n\nconst DEFAULT_LABELS: ResolvedLabels = {\n  monthPanelLabel: 'Month and year',\n  yearPanelLabel: 'Year',\n  previousYearLabel: 'Previous year',\n  nextYearLabel: 'Next year',\n  earlierYearsLabel: 'Earlier years',\n  laterYearsLabel: 'Later years',\n}\n\ninterface PickerState {\n  open: PickerOpen | null\n  setOpen: (next: PickerOpen | null) => void\n  startMonth: Date\n  endMonth: Date\n  labels: ResolvedLabels\n}\n\nconst PickerContext = createContext<PickerState>({\n  open: null,\n  setOpen: () => {},\n  startMonth: new Date(),\n  endMonth: new Date(),\n  labels: DEFAULT_LABELS,\n})\n\n/** `Intl` beats the library's formatter here: it takes a plain BCP 47 tag. */\nfunction useLabels() {\n  const { dayPickerProps } = useDayPicker()\n  const code = dayPickerProps.locale?.code ?? 'en-US'\n  return useMemo(\n    () => ({\n      caption: new Intl.DateTimeFormat(code, { month: 'long', year: 'numeric' }),\n      month: new Intl.DateTimeFormat(code, { month: 'short' }),\n    }),\n    [code],\n  )\n}\n\n/** The calendar's chrome buttons: the same corner every other control draws. */\nconst STEP =\n  'grid size-8 shrink-0 place-items-center rounded-(--radius) text-(--ink-2) transition-colors duration-(--duration-fast) hover:bg-(--stone) hover:text-(--ink) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none'\n\nconst CELL =\n  'rounded-(--radius-row) py-2 text-sm transition-colors duration-(--duration-fast) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none'\n/** The one that is showing, marked the way a chosen day is marked. */\nconst CELL_ON = 'bg-(--accent) text-(--accent-foreground)'\nconst CELL_OFF = 'text-(--ink-2) hover:bg-(--stone) hover:text-(--ink)'\n\n/**\n * The month and year picker, drawn IN PLACE of the day grid.\n *\n * The previous arrangement was two `Select`s in the caption, which portalled\n * their option lists over the grid — a ten-rem box showing three months at a\n * time with a scroll arrow at each end, floating on top of the calendar the\n * reader opened it to change. Three visible options out of twelve is not a\n * picker, and it covered the thing being picked for.\n *\n * Twelve months fit in a 3×4 grid at the exact size of the grid they replace,\n * so nothing overlaps, nothing scrolls, and the panel is the same shape as the\n * surface underneath it. Twenty years fit the same box in 4×5, which is why the\n * default span is ten years either side: one page, no paging.\n */\nfunction MonthYearPanel({\n  index,\n  view,\n  anchor,\n  year: browsing,\n  month,\n}: {\n  index: number\n  view: View\n  anchor?: number\n  year?: number\n  month: Date\n}) {\n  const { setOpen, startMonth, endMonth, labels: names } = useContext(PickerContext)\n  const { goToMonth } = useDayPicker()\n  const labels = useLabels()\n\n  /** The year being browsed, which is the displayed one until an arrow moves it. */\n  const year = browsing ?? month.getFullYear()\n  /** The month marked as current — only when the browsed year IS the shown one. */\n  const showing = year === month.getFullYear() ? month.getMonth() : -1\n  const firstYear = startMonth.getFullYear()\n  const lastYear = endMonth.getFullYear()\n\n  /**\n   * The offset is what makes this work in a two-month range picker: `goToMonth`\n   * always sets the FIRST displayed month, so picking September in the\n   * right-hand pane has to ask for August.\n   */\n  const go = (nextYear: number, nextMonth: number) => {\n    goToMonth(new Date(nextYear, nextMonth - index, 1))\n    setOpen(null)\n  }\n\n  const inRange = (nextYear: number, nextMonth: number) => {\n    const value = nextYear * 12 + nextMonth\n    const low = startMonth.getFullYear() * 12 + startMonth.getMonth()\n    const high = endMonth.getFullYear() * 12 + endMonth.getMonth()\n    return value >= low && value <= high\n  }\n\n  if (view === 'years') {\n    /**\n     * Pages TILE the range from its first year, rather than being centred on\n     * whichever year is showing. Centring left the first year of a range on no\n     * page at all when the range was not a whole number of pages long — the\n     * calendar offered a year it could never reach, and nothing said so.\n     */\n    const page = (candidate: number) =>\n      Math.floor((candidate - firstYear) / YEAR_PAGE) * YEAR_PAGE + firstYear\n    const start = anchor ?? page(year)\n    const years = Array.from({ length: YEAR_PAGE }, (_, offset) => start + offset).filter(\n      (candidate) => candidate >= firstYear && candidate <= lastYear,\n    )\n    const back = start - YEAR_PAGE >= firstYear\n    const forward = start + YEAR_PAGE <= lastYear\n    const move = (delta: number) =>\n      setOpen({ index, view: 'years', anchor: start + delta * YEAR_PAGE })\n\n    return (\n      <Panel key=\"years\" label={names.yearPanelLabel}>\n        <div className=\"mb-1 flex items-center justify-between gap-1\">\n          <button\n            type=\"button\"\n            aria-label={names.earlierYearsLabel}\n            disabled={!back}\n            onClick={() => move(-1)}\n            className={STEP}\n          >\n            <RiArrowLeftSLine size={16} aria-hidden />\n          </button>\n          <span className=\"mono-meta tabular-nums text-(--ink-3-aa)\">\n            {years[0]} – {years.at(-1)}\n          </span>\n          <button\n            type=\"button\"\n            aria-label={names.laterYearsLabel}\n            disabled={!forward}\n            onClick={() => move(1)}\n            className={STEP}\n          >\n            <RiArrowRightSLine size={16} aria-hidden />\n          </button>\n        </div>\n        <div data-picker-grid className=\"grid grid-cols-4 gap-1\">\n          {years.map((candidate) => (\n            <button\n              key={candidate}\n              type=\"button\"\n              aria-current={candidate === year ? 'true' : undefined}\n              onClick={() => setOpen({ index, view: 'months', year: candidate })}\n              className={cn(CELL, 'tabular-nums', candidate === year ? CELL_ON : CELL_OFF)}\n            >\n              {candidate}\n            </button>\n          ))}\n        </div>\n      </Panel>\n    )\n  }\n\n  return (\n    <Panel key=\"months\" label={names.monthPanelLabel}>\n      <div className=\"mb-1 flex items-center justify-between gap-1\">\n        <button\n          type=\"button\"\n          aria-label={names.previousYearLabel}\n          disabled={year <= firstYear}\n          onClick={() => setOpen({ index, view: 'months', year: year - 1 })}\n          className={STEP}\n        >\n          <RiArrowLeftSLine size={16} aria-hidden />\n        </button>\n        <button\n          type=\"button\"\n          onClick={() => setOpen({ index, view: 'years', anchor })}\n          className=\"rounded-(--radius-row) px-3 py-1 font-heading text-[length:var(--fs-item)] tabular-nums text-(--ink) transition-colors duration-(--duration-fast) hover:bg-(--stone)\"\n        >\n          {year}\n        </button>\n        <button\n          type=\"button\"\n          aria-label={names.nextYearLabel}\n          disabled={year >= lastYear}\n          onClick={() => setOpen({ index, view: 'months', year: year + 1 })}\n          className={STEP}\n        >\n          <RiArrowRightSLine size={16} aria-hidden />\n        </button>\n      </div>\n      <div data-picker-grid className=\"grid grid-cols-3 gap-1\">\n        {Array.from({ length: 12 }, (_, monthIndex) => (\n          <button\n            key={monthIndex}\n            type=\"button\"\n            aria-current={monthIndex === showing ? 'true' : undefined}\n            disabled={!inRange(year, monthIndex)}\n            onClick={() => go(year, monthIndex)}\n            className={cn(CELL, monthIndex === showing ? CELL_ON : CELL_OFF)}\n          >\n            {labels.month.format(new Date(year, monthIndex, 1))}\n          </button>\n        ))}\n      </div>\n    </Panel>\n  )\n}\n\n/**\n * The panel's box.\n *\n * `top-12` is the caption's own height plus the gap under it, so the panel\n * starts exactly where the weekday row does and ends where the last week does.\n * Sized against the grid rather than given a height of its own, because a fixed\n * height would be wrong in the month that needs a sixth week.\n *\n * Focus moves in when it opens and the month showing is what receives it, so a\n * keyboard reader lands on the current value rather than at the top of a grid\n * they then have to traverse. Tab then WRAPS inside the panel: it is drawn in\n * `--paper` over a day grid that is still mounted and still focusable, so Tab\n * used to leave the reader on a day they could not see, past the caption that\n * owns the Escape handler and therefore with no way back.\n *\n * `dialog` follows from that rather than decorating it. The role was `group`\n * for as long as Tab walked out — announcing a dialog nobody is held inside is\n * worse than announcing nothing — and the same rule, read the other way, is\n * what makes `dialog` correct now. No `aria-modal`: the panel covers this\n * month's grid, not the page, and the rest of the document is still there.\n */\nfunction Panel({ label, children }: { label: string; children: ReactNode }) {\n  const box = useRef<HTMLDivElement>(null)\n\n  // Keyed by view at the call site, so switching from months to years remounts\n  // this and the effect runs again. Without that the year grid replaced the\n  // button that had just been clicked, focus fell back to `<body>`, and Escape\n  // no longer reached the handler that closes the panel.\n  useEffect(() => {\n    // The current value if the panel is showing it, and otherwise the first\n    // cell in the grid. Browsing to another year leaves nothing marked current,\n    // and a panel that focuses nothing drops focus to `<body>` — where Escape\n    // no longer reaches the handler that closes it.\n    const grid = box.current?.querySelector('[data-picker-grid]')\n    const target =\n      box.current?.querySelector<HTMLButtonElement>('[aria-current]') ??\n      grid?.querySelector<HTMLButtonElement>('button:not(:disabled)')\n    target?.focus()\n  }, [])\n\n  // Every stop in here is a button; there is nothing else to collect, and a\n  // general focusable-element query would be a guess about markup this file\n  // writes itself. Disabled months are out of range and out of the tab order.\n  const stops = () =>\n    Array.from(box.current?.querySelectorAll<HTMLButtonElement>('button:not([disabled])') ?? [])\n\n  const wrap = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (event.key !== 'Tab') return\n    const buttons = stops()\n    const first = buttons[0]\n    const last = buttons[buttons.length - 1]\n    if (!first || !last) return\n\n    const [edge, opposite] = event.shiftKey ? [first, last] : [last, first]\n    if (document.activeElement !== edge) return\n\n    event.preventDefault()\n    opposite.focus()\n  }\n\n  return (\n    <div\n      ref={box}\n      role=\"dialog\"\n      aria-label={label}\n      onKeyDown={wrap}\n      className=\"absolute inset-x-0 bottom-0 top-12 z-2 flex flex-col justify-center bg-(--paper)\"\n    >\n      {children}\n    </div>\n  )\n}\n\n/**\n * The caption: the month and year, as one control that opens the picker.\n *\n * One button rather than two dropdowns. \"September 2026\" is how the date is\n * said, and splitting it into two controls with a chevron each put four\n * interactive things in a 250px caption that also has to hold two arrows.\n */\nfunction CalendarCaption({ calendarMonth, displayIndex, className, ...rest }: MonthCaptionProps) {\n  const { open, setOpen } = useContext(PickerContext)\n  const labels = useLabels()\n  const trigger = useRef<HTMLButtonElement>(null)\n  const mine = open !== null && open.index === displayIndex\n\n  return (\n    <div\n      className={className}\n      // Escape closes the picker and puts focus back where it came from. A\n      // panel that covers the grid and cannot be dismissed from the keyboard is\n      // a trap, however briefly.\n      onKeyDown={(event) => {\n        if (event.key !== 'Escape' || !mine) return\n        event.stopPropagation()\n        setOpen(null)\n        trigger.current?.focus()\n      }}\n      {...rest}\n    >\n      <button\n        ref={trigger}\n        type=\"button\"\n        aria-expanded={mine}\n        onClick={() => setOpen(mine ? null : { index: displayIndex, view: 'months' })}\n        className=\"group flex items-center gap-1.5 rounded-(--radius-row) px-2 py-1 font-heading text-[length:var(--fs-item)] text-(--ink) transition-colors duration-(--duration-fast) hover:bg-(--stone)\"\n      >\n        {labels.caption.format(calendarMonth.date)}\n        <RiArrowDownSLine\n          size={16}\n          aria-hidden\n          className={cn(\n            'shrink-0 text-(--ink-3-aa) transition-transform duration-(--duration-fast)',\n            mine && 'rotate-180',\n          )}\n        />\n      </button>\n      {mine && open !== null && (\n        <MonthYearPanel\n          index={displayIndex}\n          view={open.view}\n          anchor={open.anchor}\n          year={open.year}\n          month={calendarMonth.date}\n        />\n      )}\n    </div>\n  )\n}\n\n/**\n * A month, as a grid of days.\n *\n * Wraps react-day-picker rather than building a calendar, and the reason is the\n * long tail: a month grid is easy, and everything around it is not — the\n * keyboard contract (arrows move a day, Page moves a month, Home and End reach\n * the week's ends), the `aria-live` announcement when the month changes, week\n * numbering, the first day of the week varying by locale, and the fact that\n * \"today\" and \"selected\" are different states a screen reader must hear apart.\n *\n * Every class is replaced rather than layered over the library's stylesheet, so\n * nothing here depends on a CSS file this package does not control — but the\n * library's OWN class is kept on each slot, because passing a class REPLACES it\n * and every `.rdp-*` selector downstream depends on those.\n *\n * The month names follow `locale`. The picker's own chrome — the two panels and\n * the four chevrons that browse them — follows `CalendarLabels`, because\n * `locale` cannot supply strings this package invented.\n *\n * @example\n * <Calendar mode=\"single\" selected={date} onSelect={setDate} />\n * @example\n * // A birth date: widen the years, since the default span is deliberately short.\n * <Calendar mode=\"single\" startMonth={new Date(1920, 0)} endMonth={new Date()} />\n */\nexport function Calendar({\n  className,\n  classNames,\n  components,\n  monthPanelLabel,\n  yearPanelLabel,\n  previousYearLabel,\n  nextYearLabel,\n  earlierYearsLabel,\n  laterYearsLabel,\n  ...props\n}: CalendarProps) {\n  const now = new Date()\n  const [open, setOpen] = useState<PickerState['open']>(null)\n\n  // Destructured out of `props` above rather than forwarded: everything left in\n  // `props` goes to DayPicker, and these six are this package's own.\n  const labels: ResolvedLabels = {\n    monthPanelLabel: monthPanelLabel ?? DEFAULT_LABELS.monthPanelLabel,\n    yearPanelLabel: yearPanelLabel ?? DEFAULT_LABELS.yearPanelLabel,\n    previousYearLabel: previousYearLabel ?? DEFAULT_LABELS.previousYearLabel,\n    nextYearLabel: nextYearLabel ?? DEFAULT_LABELS.nextYearLabel,\n    earlierYearsLabel: earlierYearsLabel ?? DEFAULT_LABELS.earlierYearsLabel,\n    laterYearsLabel: laterYearsLabel ?? DEFAULT_LABELS.laterYearsLabel,\n  }\n\n  // Ten years either side, NOT a century. A hundred-and-eleven-row year list is\n  // a scroll, not a choice — and the case that needs one (a birth date) is rare\n  // enough to ask for it explicitly. Both ends are props, so widening is one\n  // line at the call site.\n  const startMonth = props.startMonth ?? new Date(now.getFullYear() - DEFAULT_SPAN, 0)\n  const endMonth = props.endMonth ?? new Date(now.getFullYear() + DEFAULT_SPAN, 11)\n\n  /**\n   * A one-day range is marked start AND end AND middle, all three.\n   *\n   * That is what made the earlier arrangement collapse: `range_middle` cleared\n   * the button's fill so a middle day would not look chosen, and on a one-day\n   * range that same rule cleared the fill of the only day there was. Deciding\n   * by mode instead of fighting it with `!important` means the two never\n   * describe the same button — in a range the fill belongs to the ends, and in\n   * single mode it belongs to `selected`.\n   */\n  const isRange = props.mode === 'range'\n  const FILL =\n    '[&>button]:bg-(--accent) [&>button]:text-(--accent-foreground) [&>button:hover]:bg-(--accent) [&>button:hover]:text-(--accent-foreground)'\n\n  return (\n    <PickerContext value={{ open, setOpen, startMonth, endMonth, labels }}>\n      <DayPicker\n        showOutsideDays\n        // The caption is one control that swaps the grid for a month picker, so\n        // the library's own dropdown layout is not wanted.\n        captionLayout=\"label\"\n        startMonth={startMonth}\n        endMonth={endMonth}\n        className={cn('w-fit p-3', className)}\n        components={{\n          Chevron: ({ orientation, ...rest }) =>\n            orientation === 'left' ? (\n              <RiArrowLeftSLine size={16} aria-hidden {...rest} />\n            ) : (\n              <RiArrowRightSLine size={16} aria-hidden {...rest} />\n            ),\n          MonthCaption: CalendarCaption,\n          ...components,\n        }}\n        classNames={{\n          // `rdp-root` is kept deliberately. Passing a class for a slot REPLACES\n          // the library's own, so overriding `root` silently removed the hook\n          // that every `.rdp-*` selector — ours and a consumer's — depends on.\n          root: 'rdp-root relative',\n          // The nav renders BEFORE the months in the DOM, so left in the flow it\n          // stacks its two arrows above the grid. Taking it out of the flow puts\n          // them where they belong — one at each end of the caption.\n          //\n          // `h-9` is what makes them line up. The caption is a 36px row and the\n          // nav was a 16px glyph pinned at the same top edge, so the arrows sat\n          // ten pixels above the month they belong to — close enough to read as\n          // a mistake and not close enough to read as a decision. Same height,\n          // same centre line.\n          //\n          // It steps away while the picker is open: two ways to change the\n          // month, one of them behind a panel, is one too many.\n          //\n          // `pointer-events-none` on the STRIP and back on for the two buttons:\n          // at the caption's full height it lies across the caption, and a bar\n          // with nothing in the middle of it was still eating the click on the\n          // month label underneath.\n          nav: cn(\n            'pointer-events-none absolute inset-x-3 top-3 z-1 flex h-9 items-center justify-between transition-opacity duration-(--duration-fast)',\n            open && 'opacity-0',\n          ),\n          // The arrows are pointer targets, not glyphs: a 16px chevron with no\n          // box is a 16px hit area, which is under every guideline there is.\n          button_previous: cn(STEP, open ? 'pointer-events-none' : 'pointer-events-auto'),\n          button_next: cn(STEP, open ? 'pointer-events-none' : 'pointer-events-auto'),\n          months: 'flex flex-col gap-4 sm:flex-row',\n          // Positioned, because the month picker covers this month's grid and\n          // nothing else — in a two-month range picker each pane opens its own.\n          month: 'relative flex flex-col gap-3',\n          month_caption: 'flex h-9 items-center justify-center',\n          month_grid: 'w-full border-collapse',\n          weekdays: 'flex',\n          weekday: 'w-9 mono-meta font-normal text-(--ink-3-aa)',\n          week: 'mt-1 flex w-full',\n          // The band lives on the CELL and the mark lives on the BUTTON. Keeping\n          // them apart is what lets a range be one continuous wash while both of\n          // its ends stay round — the previous arrangement flattened the corners\n          // of whichever day was an end, and a one-day range is BOTH ends, so it\n          // came out as a square.\n          day: 'relative p-0 text-center',\n          day_button:\n            'relative z-1 inline-flex size-9 items-center justify-center rounded-(--radius-pill) text-sm text-(--ink-2) transition-colors duration-(--duration-fast) hover:bg-(--stone) hover:text-(--ink)',\n          selected: isRange ? '' : FILL,\n          // Today is an outline, not a fill — it is a fact about the calendar,\n          // not a choice the reader made, and the two must not look alike.\n          today: '[&>button]:ring-1 [&>button]:ring-(--rule-hard) [&>button]:ring-inset',\n          outside: '[&>button]:text-(--ink-3-aa)',\n          disabled: '[&>button]:opacity-(--disabled-opacity) [&>button]:pointer-events-none',\n          // The wash lives on the CELL and the mark on the BUTTON, which is what\n          // lets a range read as one continuous band while both of its ends stay\n          // round. A middle day gets the wash and no fill; the ends get both.\n          range_middle: 'bg-(--accent-muted) [&>button]:text-(--ink) [&>button:hover]:bg-(--stone)',\n          range_start: cn('bg-(--accent-muted) rounded-s-(--radius-pill)', FILL),\n          range_end: cn('bg-(--accent-muted) rounded-e-(--radius-pill)', FILL),\n          hidden: 'invisible',\n          ...classNames,\n        }}\n        {...props}\n      />\n    </PickerContext>\n  )\n}\n\nexport default Calendar\n"],"mappings":"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","names":[]}

package/dist/components/Card/Card.d.ts

@@ -0,0 +1,55 @@
+import * as react from 'react';
+import { HTMLAttributes } from 'react';
+
+interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * `outline` is a hairline box on the page ground — the default, and correct
+     * for a card sitting among other cards. `plate` fills with the one reversed
+     * surface and is for a card that IS the point of its band; use at most one
+     * per screen. `flat` drops the border entirely, for a card whose grid already
+     * draws the rules between cells.
+     */
+    variant?: 'outline' | 'plate' | 'flat';
+}
+/**
+ * A bounded surface.
+ *
+ * No shadow, by law: depth in this system is a hairline and a change of ground,
+ * never a blur. A card that needs to read as raised is a `plate`, which
+ * separates by reversal instead.
+ *
+ * It clips to its own corner. A card that rounds and does not clip lays a
+ * full-bleed image's square corners over its round ones at all four corners,
+ * and the same goes for a filled first child — a defect that is invisible until
+ * the first card with an image at the top of it. Pass `overflow-visible` for
+ * the rarer card that deliberately overhangs.
+ *
+ * Compose with the named sub-parts, or drop children straight in when the card
+ * has no header or footer to speak of.
+ *
+ * @example
+ * <Card>
+ *   <CardHeader><CardTitle>Recent deploys</CardTitle><Badge>12</Badge></CardHeader>
+ *   <CardBody>…</CardBody>
+ *   <CardFooter>Updated just now</CardFooter>
+ * </Card>
+ */
+declare function Card({ variant, className, children, ...rest }: CardProps): react.JSX.Element;
+/** Header row — title on the left, an action or marker on the right. */
+declare function CardHeader({ className, children, ...rest }: HTMLAttributes<HTMLDivElement>): react.JSX.Element;
+/**
+ * The card's title, in the editorial serif.
+ *
+ * An `<h3>` by default, which is right inside a section with its own `<h2>` and
+ * wrong nearly everywhere else — pass `as` rather than leaving a page with a
+ * heading order that jumps.
+ */
+declare function CardTitle({ as: Comp, className, children, ...rest }: HTMLAttributes<HTMLHeadingElement> & {
+    as?: 'h2' | 'h3' | 'h4';
+}): react.JSX.Element;
+/** The content well. */
+declare function CardBody({ className, children, ...rest }: HTMLAttributes<HTMLDivElement>): react.JSX.Element;
+/** A quiet strip for metadata or secondary actions. */
+declare function CardFooter({ className, children, ...rest }: HTMLAttributes<HTMLDivElement>): react.JSX.Element;
+
+export { Card, CardBody, CardFooter, CardHeader, type CardProps, CardTitle, Card as default };

package/dist/components/Card/Card.js

@@ -0,0 +1,64 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+const VARIANT = {
+  outline: "border border-(--rule) bg-(--paper)",
+  plate: "border border-(--feature-surface) bg-(--feature-surface) text-(--on-feature) [--card-title:var(--on-feature)]",
+  flat: "border border-transparent bg-transparent"
+};
+function Card({ variant = "outline", className, children, ...rest }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("overflow-hidden rounded-(--radius-lg)", VARIANT[variant], className), ...rest, children });
+}
+function CardHeader({ className, children, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex items-center justify-between gap-4 border-b border-(--rule) px-5 py-4",
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+}
+function CardTitle({
+  as: Comp = "h3",
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      className: cn(
+        "m-0 font-heading text-[length:var(--fs-item)] font-normal text-[var(--card-title,var(--ink))]",
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+}
+function CardBody({ className, children, ...rest }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("p-5 text-sm leading-relaxed text-(--ink-2)", className), ...rest, children });
+}
+function CardFooter({ className, children, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("border-t border-(--rule) px-5 py-4 mono-meta text-(--ink-3-aa)", className),
+      ...rest,
+      children
+    }
+  );
+}
+var Card_default = Card;
+export {
+  Card,
+  CardBody,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Card_default as default
+};
+//# sourceMappingURL=Card.js.map

package/dist/components/Card/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react'\nimport { cn } from '../../lib/cn'\n\nexport interface CardProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * `outline` is a hairline box on the page ground — the default, and correct\n   * for a card sitting among other cards. `plate` fills with the one reversed\n   * surface and is for a card that IS the point of its band; use at most one\n   * per screen. `flat` drops the border entirely, for a card whose grid already\n   * draws the rules between cells.\n   */\n  variant?: 'outline' | 'plate' | 'flat'\n}\n\nconst VARIANT = {\n  outline: 'border border-(--rule) bg-(--paper)',\n  plate:\n    'border border-(--feature-surface) bg-(--feature-surface) text-(--on-feature) [--card-title:var(--on-feature)]',\n  flat: 'border border-transparent bg-transparent',\n} as const\n\n/**\n * A bounded surface.\n *\n * No shadow, by law: depth in this system is a hairline and a change of ground,\n * never a blur. A card that needs to read as raised is a `plate`, which\n * separates by reversal instead.\n *\n * It clips to its own corner. A card that rounds and does not clip lays a\n * full-bleed image's square corners over its round ones at all four corners,\n * and the same goes for a filled first child — a defect that is invisible until\n * the first card with an image at the top of it. Pass `overflow-visible` for\n * the rarer card that deliberately overhangs.\n *\n * Compose with the named sub-parts, or drop children straight in when the card\n * has no header or footer to speak of.\n *\n * @example\n * <Card>\n *   <CardHeader><CardTitle>Recent deploys</CardTitle><Badge>12</Badge></CardHeader>\n *   <CardBody>…</CardBody>\n *   <CardFooter>Updated just now</CardFooter>\n * </Card>\n */\nexport function Card({ variant = 'outline', className, children, ...rest }: CardProps) {\n  return (\n    <div className={cn('overflow-hidden rounded-(--radius-lg)', VARIANT[variant], className)} {...rest}>\n      {children}\n    </div>\n  )\n}\n\n/** Header row — title on the left, an action or marker on the right. */\nexport function CardHeader({ className, children, ...rest }: HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      className={cn(\n        'flex items-center justify-between gap-4 border-b border-(--rule) px-5 py-4',\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </div>\n  )\n}\n\n/**\n * The card's title, in the editorial serif.\n *\n * An `<h3>` by default, which is right inside a section with its own `<h2>` and\n * wrong nearly everywhere else — pass `as` rather than leaving a page with a\n * heading order that jumps.\n */\nexport function CardTitle({\n  as: Comp = 'h3',\n  className,\n  children,\n  ...rest\n}: HTMLAttributes<HTMLHeadingElement> & { as?: 'h2' | 'h3' | 'h4' }) {\n  return (\n    <Comp\n      // Reads the card's own title colour rather than --ink directly. A plate\n      // is a reversed surface, and a hardcoded ink title on it came out at\n      // 1.25:1 — invisible, and invisible only on the one variant whose whole\n      // job is to be different.\n      className={cn(\n        'm-0 font-heading text-[length:var(--fs-item)] font-normal text-[var(--card-title,var(--ink))]',\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </Comp>\n  )\n}\n\n/** The content well. */\nexport function CardBody({ className, children, ...rest }: HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div className={cn('p-5 text-sm leading-relaxed text-(--ink-2)', className)} {...rest}>\n      {children}\n    </div>\n  )\n}\n\n/** A quiet strip for metadata or secondary actions. */\nexport function CardFooter({ className, children, ...rest }: HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      className={cn('border-t border-(--rule) px-5 py-4 mono-meta text-(--ink-3-aa)', className)}\n      {...rest}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport default Card\n"],"mappings":"AA8CI;AA7CJ,SAAS,UAAU;AAanB,MAAM,UAAU;AAAA,EACd,SAAS;AAAA,EACT,OACE;AAAA,EACF,MAAM;AACR;AAyBO,SAAS,KAAK,EAAE,UAAU,WAAW,WAAW,UAAU,GAAG,KAAK,GAAc;AACrF,SACE,oBAAC,SAAI,WAAW,GAAG,yCAAyC,QAAQ,OAAO,GAAG,SAAS,GAAI,GAAG,MAC3F,UACH;AAEJ;AAGO,SAAS,WAAW,EAAE,WAAW,UAAU,GAAG,KAAK,GAAmC;AAC3F,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AASO,SAAS,UAAU;AAAA,EACxB,IAAI,OAAO;AAAA,EACX;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAqE;AACnE,SACE;AAAA,IAAC;AAAA;AAAA,MAKC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAGO,SAAS,SAAS,EAAE,WAAW,UAAU,GAAG,KAAK,GAAmC;AACzF,SACE,oBAAC,SAAI,WAAW,GAAG,8CAA8C,SAAS,GAAI,GAAG,MAC9E,UACH;AAEJ;AAGO,SAAS,WAAW,EAAE,WAAW,UAAU,GAAG,KAAK,GAAmC;AAC3F,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,kEAAkE,SAAS;AAAA,MACxF,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,eAAQ;","names":[]}

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,26 @@
+import * as react from 'react';
+import { ComponentProps } from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+
+type CheckboxProps = ComponentProps<typeof CheckboxPrimitive.Root>;
+/**
+ * A choice that takes effect when the form is submitted.
+ *
+ * Supports the indeterminate state (`checked="indeterminate"`), which is what a
+ * "select all" header needs when only some rows are selected — a plain
+ * unchecked box there tells the reader the opposite of the truth. Controlled or
+ * not: the glyph follows the state the box is actually in, so an uncontrolled
+ * `defaultChecked="indeterminate"` draws the dash rather than the tick that says
+ * the opposite.
+ *
+ * Pair with `Field`, or wrap it in a `<label>` at the call site so the words
+ * beside it are part of the click target.
+ *
+ * @example
+ * <label className="flex items-center gap-2.5 text-sm">
+ *   <Checkbox defaultChecked /> Subscribe to updates
+ * </label>
+ */
+declare function Checkbox({ className, onCheckedChange, ...props }: CheckboxProps): react.JSX.Element;
+
+export { Checkbox, type CheckboxProps, Checkbox as default };

package/dist/components/Checkbox/Checkbox.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { RiCheckLine, RiSubtractLine } from "@remixicon/react";
+import { useState } from "react";
+import { cn } from "../../lib/cn.js";
+function Checkbox({ className, onCheckedChange, ...props }) {
+  const [uncontrolled, setUncontrolled] = useState(
+    props.defaultChecked ?? false
+  );
+  const state = props.checked ?? uncontrolled;
+  const handleChange = (next) => {
+    if (props.checked === void 0) setUncontrolled(next);
+    onCheckedChange?.(next);
+  };
+  return /* @__PURE__ */ jsx(
+    CheckboxPrimitive.Root,
+    {
+      onCheckedChange: handleChange,
+      className: cn(
+        "inline-flex size-[18px] shrink-0 items-center justify-center rounded-(--radius-xs) border border-(--rule-2) bg-(--paper) text-(--accent-foreground) transition-colors duration-(--duration-fast) data-[state=checked]:border-(--accent) data-[state=checked]:bg-(--accent) data-[state=indeterminate]:border-(--accent) data-[state=indeterminate]:bg-(--accent) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current", children: state === "indeterminate" ? /* @__PURE__ */ jsx(RiSubtractLine, { className: "size-3", "aria-hidden": true }) : /* @__PURE__ */ jsx(RiCheckLine, { className: "size-3", "aria-hidden": true }) })
+    }
+  );
+}
+var Checkbox_default = Checkbox;
+export {
+  Checkbox,
+  Checkbox_default as default
+};
+//# sourceMappingURL=Checkbox.js.map

package/dist/components/Checkbox/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["'use client'\n\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox'\nimport { RiCheckLine, RiSubtractLine } from '@remixicon/react'\nimport { useState, type ComponentProps } from 'react'\nimport { cn } from '../../lib/cn'\n\nexport type CheckboxProps = ComponentProps<typeof CheckboxPrimitive.Root>\n\n/**\n * A choice that takes effect when the form is submitted.\n *\n * Supports the indeterminate state (`checked=\"indeterminate\"`), which is what a\n * \"select all\" header needs when only some rows are selected — a plain\n * unchecked box there tells the reader the opposite of the truth. Controlled or\n * not: the glyph follows the state the box is actually in, so an uncontrolled\n * `defaultChecked=\"indeterminate\"` draws the dash rather than the tick that says\n * the opposite.\n *\n * Pair with `Field`, or wrap it in a `<label>` at the call site so the words\n * beside it are part of the click target.\n *\n * @example\n * <label className=\"flex items-center gap-2.5 text-sm\">\n *   <Checkbox defaultChecked /> Subscribe to updates\n * </label>\n */\nexport function Checkbox({ className, onCheckedChange, ...props }: CheckboxProps) {\n  // Tracked here rather than read off `props.checked`, which is set only by a\n  // CONTROLLED box: an uncontrolled `defaultChecked=\"indeterminate\"` drew the\n  // tick — the \"all of them\" picture on a partly selected list, which is the one\n  // thing this state exists to avoid saying.\n  const [uncontrolled, setUncontrolled] = useState<CheckboxProps['checked']>(\n    props.defaultChecked ?? false,\n  )\n  const state = props.checked ?? uncontrolled\n\n  const handleChange = (next: NonNullable<CheckboxProps['checked']>) => {\n    if (props.checked === undefined) setUncontrolled(next)\n    onCheckedChange?.(next)\n  }\n\n  return (\n    <CheckboxPrimitive.Root\n      onCheckedChange={handleChange}\n      className={cn(\n        'inline-flex size-[18px] shrink-0 items-center justify-center rounded-(--radius-xs) border border-(--rule-2) bg-(--paper) text-(--accent-foreground) transition-colors duration-(--duration-fast) data-[state=checked]:border-(--accent) data-[state=checked]:bg-(--accent) data-[state=indeterminate]:border-(--accent) data-[state=indeterminate]:bg-(--accent) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none',\n        className,\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator className=\"flex items-center justify-center text-current\">\n        {state === 'indeterminate' ? (\n          <RiSubtractLine className=\"size-3\" aria-hidden />\n        ) : (\n          <RiCheckLine className=\"size-3\" aria-hidden />\n        )}\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport default Checkbox\n"],"mappings":";AAqDU;AAnDV,YAAY,uBAAuB;AACnC,SAAS,aAAa,sBAAsB;AAC5C,SAAS,gBAAqC;AAC9C,SAAS,UAAU;AAsBZ,SAAS,SAAS,EAAE,WAAW,iBAAiB,GAAG,MAAM,GAAkB;AAKhF,QAAM,CAAC,cAAc,eAAe,IAAI;AAAA,IACtC,MAAM,kBAAkB;AAAA,EAC1B;AACA,QAAM,QAAQ,MAAM,WAAW;AAE/B,QAAM,eAAe,CAAC,SAAgD;AACpE,QAAI,MAAM,YAAY,OAAW,iBAAgB,IAAI;AACrD,sBAAkB,IAAI;AAAA,EACxB;AAEA,SACE;AAAA,IAAC,kBAAkB;AAAA,IAAlB;AAAA,MACC,iBAAiB;AAAA,MACjB,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,8BAAC,kBAAkB,WAAlB,EAA4B,WAAU,iDACpC,oBAAU,kBACT,oBAAC,kBAAe,WAAU,UAAS,eAAW,MAAC,IAE/C,oBAAC,eAAY,WAAU,UAAS,eAAW,MAAC,GAEhD;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,mBAAQ;","names":[]}