@misoto22/design 0.6.1 → 0.8.0

package/dist/components/AspectRatio/AspectRatio.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/AspectRatio/AspectRatio.tsx"],"sourcesContent":["import type { CSSProperties, HTMLAttributes, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\nexport interface AspectRatioProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Width over height. A number (`16 / 9`) or the CSS form (`'16 / 9'`).\n   *\n   * It is a style rather than a class because Tailwind can only generate what\n   * it can read verbatim in the source, and this value arrives at runtime.\n   */\n  ratio?: number | string\n  children?: ReactNode\n}\n\n/**\n * A box that keeps its shape whatever is inside it.\n *\n * The one layout primitive that is genuinely hard to hand-roll. The `padding-\n * top: 56.25%` trick everyone reaches for is a percentage of the WIDTH, which\n * is why it works at all and also why it silently breaks the moment the box is\n * a flex or grid child — and it takes the element's own padding with it. The\n * modern `aspect-ratio` property does the same job in one line, and only holds\n * if nothing inside forces a height, which is what the absolute positioning\n * below guarantees.\n *\n * So: the box declares the ratio, and every direct child is stretched to fill\n * it and taken out of flow. That means a child with no intrinsic size at all —\n * an empty `<div>`, a map that measures its container, a skeleton — still gets\n * the full box, and an `<img>` or `<video>` is cropped to cover it rather than\n * letterboxed. Content that must not be cropped should set `object-contain` on\n * itself.\n *\n * Reach for this when the height must be known before the content loads: a\n * media grid that would otherwise reflow every time an image arrives is the\n * usual case, and that reflow is the layout shift a Core Web Vitals score is\n * measuring.\n *\n * @example\n * <AspectRatio ratio={16 / 9}><img src={cover} alt=\"\" /></AspectRatio>\n * @example\n * <AspectRatio ratio=\"1 / 1\" className=\"rounded-(--radius) border border-(--rule-2)\">\n *   <Skeleton />\n * </AspectRatio>\n */\nexport function AspectRatio({\n  ratio = 16 / 9,\n  className,\n  style,\n  children,\n  ...rest\n}: AspectRatioProps) {\n  const box: CSSProperties = { aspectRatio: String(ratio), ...style }\n\n  return (\n    <div\n      style={box}\n      className={cn(\n        'relative w-full overflow-hidden',\n        // Every direct child fills the box, so nothing inside can push the\n        // height around and break the ratio the box just declared.\n        '[&>*]:absolute [&>*]:inset-0 [&>*]:size-full',\n        '[&>img]:object-cover [&>video]:object-cover',\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport default AspectRatio\n"],"mappings":"AAsDI;AArDJ,SAAS,UAAU;AA2CZ,SAAS,YAAY;AAAA,EAC1B,QAAQ,KAAK;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAqB;AACnB,QAAM,MAAqB,EAAE,aAAa,OAAO,KAAK,GAAG,GAAG,MAAM;AAElE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,WAAW;AAAA,QACT;AAAA;AAAA;AAAA,QAGA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,sBAAQ;","names":[]}

package/dist/components/Avatar/Avatar.d.ts

@@ -5,9 +5,13 @@ import * as AvatarPrimitive from '@radix-ui/react-avatar';
 interface AvatarProps extends Omit<ComponentProps<typeof AvatarPrimitive.Root>, 'children'> {
     src?: string;
     /**
-     * Describes the person, not the picture. Empty string is correct and
-     * deliberate when the name is already printed beside the avatar — repeating
-     * it makes a screen reader say it twice.
+     * Describes the person, not the picture. It names the circle itself rather
+     * than the image inside it, because the image is the optional half and most
+     * rows of a real list render as initials.
+     *
+     * Empty string is correct and deliberate when the name is already printed
+     * beside the avatar: the circle then leaves the accessibility tree entirely,
+     * rather than repeating a name a screen reader has just read.
      */
     alt: string;
     /** Shown while the image loads and if it never does. Usually initials. */
@@ -21,6 +25,11 @@ interface AvatarProps extends Omit<ComponentProps<typeof AvatarPrimitive.Root>,
  * or is still loading — a hand-rolled `onError` swap flashes the initials on
  * every render before the cache answers.
  *
+ * The ROOT carries the accessible name, not the image. `alt` on the image
+ * reaches the DOM only when `src` does, and the initials are aria-hidden, so an
+ * avatar with no photograph announced nothing at all however carefully `alt`
+ * was written — and a user list where photographs are optional is full of them.
+ *
  * @example
  * <Avatar src={user.photo} alt={user.name} fallback="HC" />
  */

package/dist/components/Avatar/Avatar.js

@@ -8,9 +8,12 @@ const SIZE = {
   lg: "size-12 text-[13px]"
 };
 function Avatar({ src, alt, fallback, size = "md", className, ...rest }) {
+  const named = alt.trim() !== "";
   return /* @__PURE__ */ jsxs(
     AvatarPrimitive.Root,
     {
+      role: named ? "img" : void 0,
+      "aria-label": named ? alt : void 0,
       className: cn(
         "relative inline-flex shrink-0 overflow-hidden rounded-full border border-(--rule) bg-(--stone)",
         SIZE[size],
@@ -18,7 +21,9 @@ function Avatar({ src, alt, fallback, size = "md", className, ...rest }) {
       ),
       ...rest,
       children: [
-        src && /* @__PURE__ */ jsx(AvatarPrimitive.Image, { src, alt, className: "size-full object-cover" }),
+        src && // Empty, deliberately: the root above is the one element that names
+        // this person, and a second name here is the same person read twice.
+        /* @__PURE__ */ jsx(AvatarPrimitive.Image, { src, alt: "", className: "size-full object-cover" }),
         /* @__PURE__ */ jsx(
           AvatarPrimitive.Fallback,
           {

package/dist/components/Avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["'use client'\n\nimport * as AvatarPrimitive from '@radix-ui/react-avatar'\nimport type { ComponentProps } from 'react'\nimport { cn } from '../../lib/cn'\n\nexport interface AvatarProps extends Omit<ComponentProps<typeof AvatarPrimitive.Root>, 'children'> {\n  src?: string\n  /**\n   * Describes the person, not the picture. Empty string is correct and\n   * deliberate when the name is already printed beside the avatar — repeating\n   * it makes a screen reader say it twice.\n   */\n  alt: string\n  /** Shown while the image loads and if it never does. Usually initials. */\n  fallback: string\n  size?: 'sm' | 'md' | 'lg'\n}\n\nconst SIZE = {\n  sm: 'size-7 text-[10px]',\n  md: 'size-9 text-[11px]',\n  lg: 'size-12 text-[13px]',\n} as const\n\n/**\n * A person, as a circle.\n *\n * Wraps Radix so the fallback appears only after the image has actually failed\n * or is still loading — a hand-rolled `onError` swap flashes the initials on\n * every render before the cache answers.\n *\n * @example\n * <Avatar src={user.photo} alt={user.name} fallback=\"HC\" />\n */\nexport function Avatar({ src, alt, fallback, size = 'md', className, ...rest }: AvatarProps) {\n  return (\n    <AvatarPrimitive.Root\n      className={cn(\n        'relative inline-flex shrink-0 overflow-hidden rounded-full border border-(--rule) bg-(--stone)',\n        SIZE[size],\n        className,\n      )}\n      {...rest}\n    >\n      {src && (\n        <AvatarPrimitive.Image src={src} alt={alt} className=\"size-full object-cover\" />\n      )}\n      <AvatarPrimitive.Fallback\n        // Nothing to announce: either the image's alt carries the identity, or\n        // the name is printed beside it. Initials read aloud are noise.\n        aria-hidden=\"true\"\n        className=\"grid size-full place-items-center font-mono uppercase tracking-wider text-(--ink-3-aa)\"\n      >\n        {fallback}\n      </AvatarPrimitive.Fallback>\n    </AvatarPrimitive.Root>\n  )\n}\n\nexport default Avatar\n"],"mappings":";AAqCI,SASI,KATJ;AAnCJ,YAAY,qBAAqB;AAEjC,SAAS,UAAU;AAenB,MAAM,OAAO;AAAA,EACX,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAYO,SAAS,OAAO,EAAE,KAAK,KAAK,UAAU,OAAO,MAAM,WAAW,GAAG,KAAK,GAAgB;AAC3F,SACE;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,KAAK,IAAI;AAAA,QACT;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,eACC,oBAAC,gBAAgB,OAAhB,EAAsB,KAAU,KAAU,WAAU,0BAAyB;AAAA,QAEhF;AAAA,UAAC,gBAAgB;AAAA,UAAhB;AAAA,YAGC,eAAY;AAAA,YACZ,WAAU;AAAA,YAET;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,iBAAQ;","names":[]}
+{"version":3,"sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["'use client'\n\nimport * as AvatarPrimitive from '@radix-ui/react-avatar'\nimport type { ComponentProps } from 'react'\nimport { cn } from '../../lib/cn'\n\nexport interface AvatarProps extends Omit<ComponentProps<typeof AvatarPrimitive.Root>, 'children'> {\n  src?: string\n  /**\n   * Describes the person, not the picture. It names the circle itself rather\n   * than the image inside it, because the image is the optional half and most\n   * rows of a real list render as initials.\n   *\n   * Empty string is correct and deliberate when the name is already printed\n   * beside the avatar: the circle then leaves the accessibility tree entirely,\n   * rather than repeating a name a screen reader has just read.\n   */\n  alt: string\n  /** Shown while the image loads and if it never does. Usually initials. */\n  fallback: string\n  size?: 'sm' | 'md' | 'lg'\n}\n\nconst SIZE = {\n  sm: 'size-7 text-[10px]',\n  md: 'size-9 text-[11px]',\n  lg: 'size-12 text-[13px]',\n} as const\n\n/**\n * A person, as a circle.\n *\n * Wraps Radix so the fallback appears only after the image has actually failed\n * or is still loading — a hand-rolled `onError` swap flashes the initials on\n * every render before the cache answers.\n *\n * The ROOT carries the accessible name, not the image. `alt` on the image\n * reaches the DOM only when `src` does, and the initials are aria-hidden, so an\n * avatar with no photograph announced nothing at all however carefully `alt`\n * was written — and a user list where photographs are optional is full of them.\n *\n * @example\n * <Avatar src={user.photo} alt={user.name} fallback=\"HC\" />\n */\nexport function Avatar({ src, alt, fallback, size = 'md', className, ...rest }: AvatarProps) {\n  // An empty alt takes no role at all rather than an unnamed one: `role=\"img\"`\n  // with nothing to say is a violation, and the empty string exists precisely\n  // to say there is nothing to add.\n  const named = alt.trim() !== ''\n\n  return (\n    <AvatarPrimitive.Root\n      role={named ? 'img' : undefined}\n      aria-label={named ? alt : undefined}\n      className={cn(\n        'relative inline-flex shrink-0 overflow-hidden rounded-full border border-(--rule) bg-(--stone)',\n        SIZE[size],\n        className,\n      )}\n      {...rest}\n    >\n      {src && (\n        // Empty, deliberately: the root above is the one element that names\n        // this person, and a second name here is the same person read twice.\n        <AvatarPrimitive.Image src={src} alt=\"\" className=\"size-full object-cover\" />\n      )}\n      <AvatarPrimitive.Fallback\n        // Nothing to announce: the root carries the identity whether or not the\n        // photograph ever arrives. Initials read aloud are noise.\n        aria-hidden=\"true\"\n        className=\"grid size-full place-items-center font-mono uppercase tracking-wider text-(--ink-3-aa)\"\n      >\n        {fallback}\n      </AvatarPrimitive.Fallback>\n    </AvatarPrimitive.Root>\n  )\n}\n\nexport default Avatar\n"],"mappings":";AAmDI,SAaI,KAbJ;AAjDJ,YAAY,qBAAqB;AAEjC,SAAS,UAAU;AAmBnB,MAAM,OAAO;AAAA,EACX,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAiBO,SAAS,OAAO,EAAE,KAAK,KAAK,UAAU,OAAO,MAAM,WAAW,GAAG,KAAK,GAAgB;AAI3F,QAAM,QAAQ,IAAI,KAAK,MAAM;AAE7B,SACE;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACC,MAAM,QAAQ,QAAQ;AAAA,MACtB,cAAY,QAAQ,MAAM;AAAA,MAC1B,WAAW;AAAA,QACT;AAAA,QACA,KAAK,IAAI;AAAA,QACT;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA;AAAA,QAGC,oBAAC,gBAAgB,OAAhB,EAAsB,KAAU,KAAI,IAAG,WAAU,0BAAyB;AAAA,QAE7E;AAAA,UAAC,gBAAgB;AAAA,UAAhB;AAAA,YAGC,eAAY;AAAA,YACZ,WAAU;AAAA,YAET;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,iBAAQ;","names":[]}

package/dist/components/Breadcrumb/Breadcrumb.d.ts

@@ -23,6 +23,12 @@ interface BreadcrumbProps extends HTMLAttributes<HTMLElement> {
  * Separators live in `<li aria-hidden>` so the trail is read as its items and
  * not as "home slash work slash".
  *
+ * A middle crumb with no `href` is a defect that is invisible twice over: it
+ * renders as plain text in the same `--ink-3-aa` as the links beside it, and it
+ * carries no `aria-current` either — so it reads as the page the reader is on
+ * when it is not, and neither the browser nor a review says a word. The console
+ * does, in development.
+ *
  * @example
  * <Breadcrumb items={[{ label: 'Components', href: '/components' }, { label: 'Button' }]} />
  */

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Fragment } from "react";
 import { cn } from "../../lib/cn.js";
+import { DEV, warn } from "../../lib/warn.js";
 function Breadcrumb({
   items,
   label = "Breadcrumb",
@@ -8,6 +9,7 @@ function Breadcrumb({
   className,
   ...rest
 }) {
+  if (DEV) warnUnlinked(items);
   return /* @__PURE__ */ jsx("nav", { "aria-label": label, className: cn("mono-meta text-(--ink-3-aa)", className), ...rest, children: /* @__PURE__ */ jsx("ol", { className: "m-0 flex list-none flex-wrap items-center gap-2 p-0", children: items.map((item, index) => {
     const last = index === items.length - 1;
     return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -23,6 +25,19 @@ function Breadcrumb({
     ] }, index);
   }) }) });
 }
+function warnUnlinked(items) {
+  items.forEach((item, index) => {
+    if (item.href || index === items.length - 1) return;
+    const named = typeof item.label === "string" ? `"${item.label}"` : `at ${index}`;
+    warn({
+      code: "BREADCRUMB_CRUMB_NOT_LINKED",
+      problem: `The crumb ${named} has no href, so it renders as plain text in the same colour as the links beside it and takes no aria-current. It reads as the current page, and it is not.`,
+      field: `items[${index}]`,
+      fix: "Give every crumb but the last an href, or drop the crumb if there is nothing to link to.",
+      component: "Breadcrumb"
+    });
+  });
+}
 var Breadcrumb_default = Breadcrumb;
 export {
   Breadcrumb,

package/dist/components/Breadcrumb/Breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import { Fragment } from 'react'\nimport type { HTMLAttributes, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\nexport interface Crumb {\n  label: ReactNode\n  /** Omit on the last crumb — the page you are already on is not a link. */\n  href?: string\n}\n\nexport interface BreadcrumbProps extends HTMLAttributes<HTMLElement> {\n  items: Crumb[]\n  /** Names this trail when a page has more than one. */\n  label?: string\n  /** Rendered between crumbs. A slash by default; it is decorative either way. */\n  separator?: ReactNode\n}\n\n/**\n * Where you are, as a path.\n *\n * The last crumb is plain text with `aria-current=\"page\"` rather than a link to\n * itself — a self-link is the most common breadcrumb bug, and it makes a screen\n * reader offer a navigation that goes nowhere.\n *\n * Separators live in `<li aria-hidden>` so the trail is read as its items and\n * not as \"home slash work slash\".\n *\n * @example\n * <Breadcrumb items={[{ label: 'Components', href: '/components' }, { label: 'Button' }]} />\n */\nexport function Breadcrumb({\n  items,\n  label = 'Breadcrumb',\n  separator = '/',\n  className,\n  ...rest\n}: BreadcrumbProps) {\n  return (\n    <nav aria-label={label} className={cn('mono-meta text-(--ink-3-aa)', className)} {...rest}>\n      <ol className=\"m-0 flex list-none flex-wrap items-center gap-2 p-0\">\n        {items.map((item, index) => {\n          const last = index === items.length - 1\n          return (\n            <Fragment key={index}>\n              <li className=\"min-w-0\">\n                {item.href && !last ? (\n                  <a\n                    href={item.href}\n                    className=\"text-(--ink-3-aa) underline decoration-transparent underline-offset-4 transition-colors duration-(--duration-fast) hover:text-(--ink) hover:decoration-(--rule-2)\"\n                  >\n                    {item.label}\n                  </a>\n                ) : (\n                  <span aria-current={last ? 'page' : undefined} className={last ? 'text-(--ink)' : undefined}>\n                    {item.label}\n                  </span>\n                )}\n              </li>\n              {!last && (\n                <li aria-hidden=\"true\" className=\"select-none text-(--rule-2)\">\n                  {separator}\n                </li>\n              )}\n            </Fragment>\n          )\n        })}\n      </ol>\n    </nav>\n  )\n}\n\nexport default Breadcrumb\n"],"mappings":"AA4CY,SAGM,KAHN;AA5CZ,SAAS,gBAAgB;AAEzB,SAAS,UAAU;AA6BZ,SAAS,WAAW;AAAA,EACzB;AAAA,EACA,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,SACE,oBAAC,SAAI,cAAY,OAAO,WAAW,GAAG,+BAA+B,SAAS,GAAI,GAAG,MACnF,8BAAC,QAAG,WAAU,uDACX,gBAAM,IAAI,CAAC,MAAM,UAAU;AAC1B,UAAM,OAAO,UAAU,MAAM,SAAS;AACtC,WACE,qBAAC,YACC;AAAA,0BAAC,QAAG,WAAU,WACX,eAAK,QAAQ,CAAC,OACb;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,KAAK;AAAA,UACX,WAAU;AAAA,UAET,eAAK;AAAA;AAAA,MACR,IAEA,oBAAC,UAAK,gBAAc,OAAO,SAAS,QAAW,WAAW,OAAO,iBAAiB,QAC/E,eAAK,OACR,GAEJ;AAAA,MACC,CAAC,QACA,oBAAC,QAAG,eAAY,QAAO,WAAU,+BAC9B,qBACH;AAAA,SAlBW,KAoBf;AAAA,EAEJ,CAAC,GACH,GACF;AAEJ;AAEA,IAAO,qBAAQ;","names":[]}
+{"version":3,"sources":["../../../src/components/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import { Fragment } from 'react'\nimport type { HTMLAttributes, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\nimport { DEV, warn } from '../../lib/warn'\n\nexport interface Crumb {\n  label: ReactNode\n  /** Omit on the last crumb — the page you are already on is not a link. */\n  href?: string\n}\n\nexport interface BreadcrumbProps extends HTMLAttributes<HTMLElement> {\n  items: Crumb[]\n  /** Names this trail when a page has more than one. */\n  label?: string\n  /** Rendered between crumbs. A slash by default; it is decorative either way. */\n  separator?: ReactNode\n}\n\n/**\n * Where you are, as a path.\n *\n * The last crumb is plain text with `aria-current=\"page\"` rather than a link to\n * itself — a self-link is the most common breadcrumb bug, and it makes a screen\n * reader offer a navigation that goes nowhere.\n *\n * Separators live in `<li aria-hidden>` so the trail is read as its items and\n * not as \"home slash work slash\".\n *\n * A middle crumb with no `href` is a defect that is invisible twice over: it\n * renders as plain text in the same `--ink-3-aa` as the links beside it, and it\n * carries no `aria-current` either — so it reads as the page the reader is on\n * when it is not, and neither the browser nor a review says a word. The console\n * does, in development.\n *\n * @example\n * <Breadcrumb items={[{ label: 'Components', href: '/components' }, { label: 'Button' }]} />\n */\nexport function Breadcrumb({\n  items,\n  label = 'Breadcrumb',\n  separator = '/',\n  className,\n  ...rest\n}: BreadcrumbProps) {\n  if (DEV) warnUnlinked(items)\n\n  return (\n    <nav aria-label={label} className={cn('mono-meta text-(--ink-3-aa)', className)} {...rest}>\n      <ol className=\"m-0 flex list-none flex-wrap items-center gap-2 p-0\">\n        {items.map((item, index) => {\n          const last = index === items.length - 1\n          return (\n            <Fragment key={index}>\n              <li className=\"min-w-0\">\n                {item.href && !last ? (\n                  <a\n                    href={item.href}\n                    className=\"text-(--ink-3-aa) underline decoration-transparent underline-offset-4 transition-colors duration-(--duration-fast) hover:text-(--ink) hover:decoration-(--rule-2)\"\n                  >\n                    {item.label}\n                  </a>\n                ) : (\n                  <span aria-current={last ? 'page' : undefined} className={last ? 'text-(--ink)' : undefined}>\n                    {item.label}\n                  </span>\n                )}\n              </li>\n              {!last && (\n                <li aria-hidden=\"true\" className=\"select-none text-(--rule-2)\">\n                  {separator}\n                </li>\n              )}\n            </Fragment>\n          )\n        })}\n      </ol>\n    </nav>\n  )\n}\n\n/**\n * Dev only: every crumb but the last owes the reader a destination.\n *\n * The label is a ReactNode, so a crumb whose label is not a string is named by\n * its position instead — the message has to identify the crumb well enough to\n * repair the call without opening anything.\n */\nfunction warnUnlinked(items: Crumb[]): void {\n  items.forEach((item, index) => {\n    if (item.href || index === items.length - 1) return\n    const named = typeof item.label === 'string' ? `\"${item.label}\"` : `at ${index}`\n\n    warn({\n      code: 'BREADCRUMB_CRUMB_NOT_LINKED',\n      problem: `The crumb ${named} has no href, so it renders as plain text in the same colour as the links beside it and takes no aria-current. It reads as the current page, and it is not.`,\n      field: `items[${index}]`,\n      fix: 'Give every crumb but the last an href, or drop the crumb if there is nothing to link to.',\n      component: 'Breadcrumb',\n    })\n  })\n}\n\nexport default Breadcrumb\n"],"mappings":"AAqDY,SAGM,KAHN;AArDZ,SAAS,gBAAgB;AAEzB,SAAS,UAAU;AACnB,SAAS,KAAK,YAAY;AAmCnB,SAAS,WAAW;AAAA,EACzB;AAAA,EACA,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,MAAI,IAAK,cAAa,KAAK;AAE3B,SACE,oBAAC,SAAI,cAAY,OAAO,WAAW,GAAG,+BAA+B,SAAS,GAAI,GAAG,MACnF,8BAAC,QAAG,WAAU,uDACX,gBAAM,IAAI,CAAC,MAAM,UAAU;AAC1B,UAAM,OAAO,UAAU,MAAM,SAAS;AACtC,WACE,qBAAC,YACC;AAAA,0BAAC,QAAG,WAAU,WACX,eAAK,QAAQ,CAAC,OACb;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,KAAK;AAAA,UACX,WAAU;AAAA,UAET,eAAK;AAAA;AAAA,MACR,IAEA,oBAAC,UAAK,gBAAc,OAAO,SAAS,QAAW,WAAW,OAAO,iBAAiB,QAC/E,eAAK,OACR,GAEJ;AAAA,MACC,CAAC,QACA,oBAAC,QAAG,eAAY,QAAO,WAAU,+BAC9B,qBACH;AAAA,SAlBW,KAoBf;AAAA,EAEJ,CAAC,GACH,GACF;AAEJ;AASA,SAAS,aAAa,OAAsB;AAC1C,QAAM,QAAQ,CAAC,MAAM,UAAU;AAC7B,QAAI,KAAK,QAAQ,UAAU,MAAM,SAAS,EAAG;AAC7C,UAAM,QAAQ,OAAO,KAAK,UAAU,WAAW,IAAI,KAAK,KAAK,MAAM,MAAM,KAAK;AAE9E,SAAK;AAAA,MACH,MAAM;AAAA,MACN,SAAS,aAAa,KAAK;AAAA,MAC3B,OAAO,SAAS,KAAK;AAAA,MACrB,KAAK;AAAA,MACL,WAAW;AAAA,IACb,CAAC;AAAA,EACH,CAAC;AACH;AAEA,IAAO,qBAAQ;","names":[]}

package/dist/components/Button/Button.js

@@ -1,6 +1,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Slot } from "@radix-ui/react-slot";
 import { cn } from "../../lib/cn.js";
+import { DEV, warn } from "../../lib/warn.js";
 import { Spinner } from "../Spinner/Spinner.js";
 const BASE = "inline-flex items-center justify-center gap-(--control-gap) rounded-(--radius) font-sans transition-[opacity,color,border-color,background-color] duration-(--duration-fast) ease-(--ease-out-expo) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none aria-disabled:opacity-(--disabled-opacity) aria-disabled:pointer-events-none";
 const VARIANT = {
@@ -37,6 +38,19 @@ function Button(props) {
     className
   } = props;
   const cls = cn(BASE, VARIANT[variant], iconOnly ? ICON_SIZE[size] : SIZE[size], className);
+  if (DEV && iconOnly) {
+    const named = typeof props["aria-label"] === "string" && props["aria-label"].trim() !== "";
+    const described = typeof props["aria-labelledby"] === "string";
+    if (!named && !described) {
+      warn({
+        code: "BUTTON_ICON_ONLY_UNNAMED",
+        problem: 'An iconOnly Button has no text, so without an accessible name a screen reader announces it as "button" and nothing else.',
+        field: "aria-label",
+        fix: 'Add aria-label with the action the button performs, e.g. aria-label="Delete invoice".',
+        component: "Button"
+      });
+    }
+  }
   const spinnerTone = variant === "primary" || variant === "danger" ? "current" : "default";
   const decoration = /* @__PURE__ */ jsxs(Fragment, { children: [
     loading && /* @__PURE__ */ jsx(Spinner, { size: SPINNER_SIZE[size], tone: spinnerTone, label: null }),

package/dist/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot'\nimport type { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\nimport { Spinner } from '../Spinner/Spinner'\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger'\nexport type ButtonSize = 'sm' | 'md' | 'lg'\n\n/**\n * The base every variant shares.\n *\n * It reads `--radius`, the CONTROL step, which is the same corner an `Input`,\n * a `Select` trigger and a `Textarea` draw. It used to be a pill, and a pill\n * beside an 8px field is two different ideas of what a control is — the one\n * inconsistency in the system that every reader noticed and none of the\n * component pages could explain. Everything on the control line now agrees,\n * and the capsule is kept for the things that genuinely are one: a badge, a\n * status pill, a segmented strip, a progress track.\n *\n * It does not move on hover. An earlier base lifted a pixel and asked for a\n * shadow the White Reset does not have — `--shadow` resolves to `none`, so that\n * hover state was invisible on every button in the system while still costing a\n * transition. Opacity carries the filled hover; the border carries the outlined\n * one.\n *\n * The transition names its properties rather than using `all`, so a layout\n * change (a width that grows when the label becomes \"Saving…\") is instant\n * instead of sliding.\n */\nconst BASE =\n  'inline-flex items-center justify-center gap-(--control-gap) rounded-(--radius) font-sans transition-[opacity,color,border-color,background-color] duration-(--duration-fast) ease-(--ease-out-expo) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none aria-disabled:opacity-(--disabled-opacity) aria-disabled:pointer-events-none'\n\nconst VARIANT: Record<ButtonVariant, string> = {\n  primary: 'bg-(--accent) text-(--accent-foreground) border border-(--accent) hover:opacity-85',\n  secondary: 'border border-(--rule-2) text-(--ink) bg-transparent hover:border-(--ink)',\n  ghost: 'border border-transparent text-(--ink-2) hover:text-(--ink) hover:bg-(--stone)',\n  /* The one place chroma is allowed on a control, and only because the action\n     is destructive — that is a state, not a brand colour. */\n  danger: 'bg-(--danger) text-(--paper) border border-(--danger) hover:opacity-85',\n}\n\n/**\n * `min-h` rather than `h`, so a button that wraps to two lines grows instead of\n * clipping.\n *\n * The heights come from the density tokens rather than from a literal, so a\n * subtree marked `data-density=\"compact\"` shrinks its controls without a single\n * call site being told. At the default density `md` is 44px — the pointer\n * target WCAG 2.5.5 asks for.\n */\nconst SIZE: Record<ButtonSize, string> = {\n  sm: 'min-h-(--control-h-sm) px-(--control-px-sm) py-(--control-py-sm) text-[13px]',\n  md: 'min-h-(--control-h-md) px-(--control-px-md) py-(--control-py-md) text-sm',\n  lg: 'min-h-(--control-h-lg) px-(--control-px-lg) py-(--control-py-lg) text-[15px]',\n}\n\n/** Square, because an icon has no label to give the box its width. */\nconst ICON_SIZE: Record<ButtonSize, string> = {\n  sm: 'size-(--control-h-sm) p-0',\n  md: 'size-(--control-h-md) p-0',\n  lg: 'size-(--control-h-lg) p-0',\n}\n\nconst SPINNER_SIZE: Record<ButtonSize, 'sm' | 'md'> = { sm: 'sm', md: 'sm', lg: 'md' }\n\ninterface CommonProps {\n  children?: ReactNode\n  /**\n   * Which action this is. `primary` is the one thing the screen wants you to\n   * do, so there is at most one per view; `danger` is reserved for destructive\n   * actions and is the only place chroma is allowed on a control.\n   */\n  variant?: ButtonVariant\n  /** 36 / 44 / 48px tall. `md` meets the pointer-target floor on its own. */\n  size?: ButtonSize\n  /** Optional mono keycap glyph rendered after the label (e.g. \"P\"). */\n  keycap?: string\n  /**\n   * Swaps the leading content for a spinner and blocks interaction. The label\n   * stays put — a button that empties out while it works loses its width, and\n   * the page reflows under the pointer that just clicked it.\n   */\n  loading?: boolean\n  /**\n   * Square control with no label. REQUIRES `aria-label`: an icon-only button\n   * with no accessible name is invisible to a screen reader, and this is the\n   * single most common way a design system ships an unusable control.\n   */\n  iconOnly?: boolean\n  /**\n   * Render the child element instead of a `<button>`, keeping these styles.\n   * Use it to hand the styling to a router's `Link` — `asChild` is what keeps\n   * this package free of any one router.\n   *\n   * The decoration slots (`keycap`, `loading`) are not injected into a slotted\n   * child; compose them inside it yourself.\n   *\n   * @example\n   * <Button asChild><Link href=\"/work\">Work</Link></Button>\n   */\n  asChild?: boolean\n  className?: string\n}\n\ntype ButtonAsLink = CommonProps &\n  Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'className' | 'children'> & { href: string }\n\ntype ButtonAsButton = CommonProps &\n  Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'children'> & { href?: undefined }\n\nexport type ButtonProps = ButtonAsLink | ButtonAsButton\n\nfunction Keycap({ glyph }: { glyph: string }) {\n  return (\n    <span className=\"rounded-(--radius-sm) border border-current px-2 py-0.5 font-mono text-[11px] opacity-55\">\n      {glyph}\n    </span>\n  )\n}\n\n/**\n * The system's action.\n *\n * Renders a `<button>`, or an `<a>` when given `href`, or whatever you hand it\n * via `asChild`. No router is imported, so the package stays framework-agnostic\n * and a Next or React Router app wires its own `Link` at the call site.\n *\n * Server-component friendly: there is no client boundary here, so it renders in\n * a static page as well as an interactive one.\n *\n * @example\n * <Button variant=\"secondary\" keycap=\"P\">View projects</Button>\n * @example\n * <Button loading disabled>Saving…</Button>\n * @example\n * <Button iconOnly aria-label=\"Close\"><X size={16} /></Button>\n */\nexport function Button(props: ButtonProps) {\n  const {\n    children,\n    variant = 'primary',\n    size = 'md',\n    keycap,\n    loading = false,\n    iconOnly = false,\n    asChild = false,\n    className,\n  } = props\n\n  const cls = cn(BASE, VARIANT[variant], iconOnly ? ICON_SIZE[size] : SIZE[size], className)\n\n  // A filled ground needs a spinner in the inherited colour; an outlined one\n  // reads better against the page's own rule scale.\n  const spinnerTone = variant === 'primary' || variant === 'danger' ? 'current' : 'default'\n  const decoration = (\n    <>\n      {loading && <Spinner size={SPINNER_SIZE[size]} tone={spinnerTone} label={null} />}\n      {children}\n      {keycap && <Keycap glyph={keycap} />}\n    </>\n  )\n\n  if (asChild) {\n    const { children: _c, variant: _v, size: _s, keycap: _k, loading: _l, iconOnly: _i, asChild: _a, className: _cn, ...rest } = props\n    return (\n      <Slot className={cls} {...rest}>\n        {children}\n      </Slot>\n    )\n  }\n\n  if (props.href !== undefined) {\n    const { children: _c, variant: _v, size: _s, keycap: _k, loading: _l, iconOnly: _i, asChild: _a, className: _cn, href, ...rest } = props\n    return (\n      <a\n        href={href}\n        className={cls}\n        // A link cannot be `disabled`; `aria-disabled` plus the pointer-events\n        // rule in BASE is the accessible equivalent.\n        aria-disabled={loading || undefined}\n        {...rest}\n      >\n        {decoration}\n      </a>\n    )\n  }\n\n  const { children: _c, variant: _v, size: _s, keycap: _k, loading: _l, iconOnly: _i, asChild: _a, className: _cn, ...rest } = props\n  return (\n    <button\n      type={rest.type ?? 'button'}\n      aria-busy={loading || undefined}\n      disabled={rest.disabled || loading}\n      className={cls}\n      {...rest}\n    >\n      {decoration}\n    </button>\n  )\n}\n\nexport default Button\n"],"mappings":"AAkHI,SAyCA,UAzCA,KAyCA,YAzCA;AAlHJ,SAAS,YAAY;AAErB,SAAS,UAAU;AACnB,SAAS,eAAe;AA0BxB,MAAM,OACJ;AAEF,MAAM,UAAyC;AAAA,EAC7C,SAAS;AAAA,EACT,WAAW;AAAA,EACX,OAAO;AAAA;AAAA;AAAA,EAGP,QAAQ;AACV;AAWA,MAAM,OAAmC;AAAA,EACvC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAGA,MAAM,YAAwC;AAAA,EAC5C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,eAAgD,EAAE,IAAI,MAAM,IAAI,MAAM,IAAI,KAAK;AAiDrF,SAAS,OAAO,EAAE,MAAM,GAAsB;AAC5C,SACE,oBAAC,UAAK,WAAU,4FACb,iBACH;AAEJ;AAmBO,SAAS,OAAO,OAAoB;AACzC,QAAM;AAAA,IACJ;AAAA,IACA,UAAU;AAAA,IACV,OAAO;AAAA,IACP;AAAA,IACA,UAAU;AAAA,IACV,WAAW;AAAA,IACX,UAAU;AAAA,IACV;AAAA,EACF,IAAI;AAEJ,QAAM,MAAM,GAAG,MAAM,QAAQ,OAAO,GAAG,WAAW,UAAU,IAAI,IAAI,KAAK,IAAI,GAAG,SAAS;AAIzF,QAAM,cAAc,YAAY,aAAa,YAAY,WAAW,YAAY;AAChF,QAAM,aACJ,iCACG;AAAA,eAAW,oBAAC,WAAQ,MAAM,aAAa,IAAI,GAAG,MAAM,aAAa,OAAO,MAAM;AAAA,IAC9E;AAAA,IACA,UAAU,oBAAC,UAAO,OAAO,QAAQ;AAAA,KACpC;AAGF,MAAI,SAAS;AACX,UAAM,EAAE,UAAUA,KAAI,SAASC,KAAI,MAAMC,KAAI,QAAQC,KAAI,SAASC,KAAI,UAAUC,KAAI,SAASC,KAAI,WAAWC,MAAK,GAAGC,MAAK,IAAI;AAC7H,WACE,oBAAC,QAAK,WAAW,KAAM,GAAGA,OACvB,UACH;AAAA,EAEJ;AAEA,MAAI,MAAM,SAAS,QAAW;AAC5B,UAAM,EAAE,UAAUR,KAAI,SAASC,KAAI,MAAMC,KAAI,QAAQC,KAAI,SAASC,KAAI,UAAUC,KAAI,SAASC,KAAI,WAAWC,MAAK,MAAM,GAAGC,MAAK,IAAI;AACnI,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,QAGX,iBAAe,WAAW;AAAA,QACzB,GAAGA;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,QAAM,EAAE,UAAU,IAAI,SAAS,IAAI,MAAM,IAAI,QAAQ,IAAI,SAAS,IAAI,UAAU,IAAI,SAAS,IAAI,WAAW,KAAK,GAAG,KAAK,IAAI;AAC7H,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,KAAK,QAAQ;AAAA,MACnB,aAAW,WAAW;AAAA,MACtB,UAAU,KAAK,YAAY;AAAA,MAC3B,WAAW;AAAA,MACV,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,iBAAQ;","names":["_c","_v","_s","_k","_l","_i","_a","_cn","rest"]}
+{"version":3,"sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot'\nimport type { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\nimport { DEV, warn } from '../../lib/warn'\nimport { Spinner } from '../Spinner/Spinner'\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger'\nexport type ButtonSize = 'sm' | 'md' | 'lg'\n\n/**\n * The base every variant shares.\n *\n * It reads `--radius`, the CONTROL step, which is the same corner an `Input`,\n * a `Select` trigger and a `Textarea` draw. It used to be a pill, and a pill\n * beside an 8px field is two different ideas of what a control is — the one\n * inconsistency in the system that every reader noticed and none of the\n * component pages could explain. Everything on the control line now agrees,\n * and the capsule is kept for the things that genuinely are one: a badge, a\n * status pill, a segmented strip, a progress track.\n *\n * It does not move on hover. An earlier base lifted a pixel and asked for a\n * shadow the White Reset does not have — `--shadow` resolves to `none`, so that\n * hover state was invisible on every button in the system while still costing a\n * transition. Opacity carries the filled hover; the border carries the outlined\n * one.\n *\n * The transition names its properties rather than using `all`, so a layout\n * change (a width that grows when the label becomes \"Saving…\") is instant\n * instead of sliding.\n */\nconst BASE =\n  'inline-flex items-center justify-center gap-(--control-gap) rounded-(--radius) font-sans transition-[opacity,color,border-color,background-color] duration-(--duration-fast) ease-(--ease-out-expo) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none aria-disabled:opacity-(--disabled-opacity) aria-disabled:pointer-events-none'\n\nconst VARIANT: Record<ButtonVariant, string> = {\n  primary: 'bg-(--accent) text-(--accent-foreground) border border-(--accent) hover:opacity-85',\n  secondary: 'border border-(--rule-2) text-(--ink) bg-transparent hover:border-(--ink)',\n  ghost: 'border border-transparent text-(--ink-2) hover:text-(--ink) hover:bg-(--stone)',\n  /* The one place chroma is allowed on a control, and only because the action\n     is destructive — that is a state, not a brand colour. */\n  danger: 'bg-(--danger) text-(--paper) border border-(--danger) hover:opacity-85',\n}\n\n/**\n * `min-h` rather than `h`, so a button that wraps to two lines grows instead of\n * clipping.\n *\n * The heights come from the density tokens rather than from a literal, so a\n * subtree marked `data-density=\"compact\"` shrinks its controls without a single\n * call site being told. At the default density `md` is 44px — the pointer\n * target WCAG 2.5.5 asks for.\n */\nconst SIZE: Record<ButtonSize, string> = {\n  sm: 'min-h-(--control-h-sm) px-(--control-px-sm) py-(--control-py-sm) text-[13px]',\n  md: 'min-h-(--control-h-md) px-(--control-px-md) py-(--control-py-md) text-sm',\n  lg: 'min-h-(--control-h-lg) px-(--control-px-lg) py-(--control-py-lg) text-[15px]',\n}\n\n/** Square, because an icon has no label to give the box its width. */\nconst ICON_SIZE: Record<ButtonSize, string> = {\n  sm: 'size-(--control-h-sm) p-0',\n  md: 'size-(--control-h-md) p-0',\n  lg: 'size-(--control-h-lg) p-0',\n}\n\nconst SPINNER_SIZE: Record<ButtonSize, 'sm' | 'md'> = { sm: 'sm', md: 'sm', lg: 'md' }\n\ninterface CommonProps {\n  children?: ReactNode\n  /**\n   * Which action this is. `primary` is the one thing the screen wants you to\n   * do, so there is at most one per view; `danger` is reserved for destructive\n   * actions and is the only place chroma is allowed on a control.\n   */\n  variant?: ButtonVariant\n  /** 36 / 44 / 48px tall. `md` meets the pointer-target floor on its own. */\n  size?: ButtonSize\n  /** Optional mono keycap glyph rendered after the label (e.g. \"P\"). */\n  keycap?: string\n  /**\n   * Swaps the leading content for a spinner and blocks interaction. The label\n   * stays put — a button that empties out while it works loses its width, and\n   * the page reflows under the pointer that just clicked it.\n   */\n  loading?: boolean\n  /**\n   * Square control with no label. REQUIRES `aria-label`: an icon-only button\n   * with no accessible name is invisible to a screen reader, and this is the\n   * single most common way a design system ships an unusable control.\n   */\n  iconOnly?: boolean\n  /**\n   * Render the child element instead of a `<button>`, keeping these styles.\n   * Use it to hand the styling to a router's `Link` — `asChild` is what keeps\n   * this package free of any one router.\n   *\n   * The decoration slots (`keycap`, `loading`) are not injected into a slotted\n   * child; compose them inside it yourself.\n   *\n   * @example\n   * <Button asChild><Link href=\"/work\">Work</Link></Button>\n   */\n  asChild?: boolean\n  className?: string\n}\n\ntype ButtonAsLink = CommonProps &\n  Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'className' | 'children'> & { href: string }\n\ntype ButtonAsButton = CommonProps &\n  Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'children'> & { href?: undefined }\n\nexport type ButtonProps = ButtonAsLink | ButtonAsButton\n\nfunction Keycap({ glyph }: { glyph: string }) {\n  return (\n    <span className=\"rounded-(--radius-sm) border border-current px-2 py-0.5 font-mono text-[11px] opacity-55\">\n      {glyph}\n    </span>\n  )\n}\n\n/**\n * The system's action.\n *\n * Renders a `<button>`, or an `<a>` when given `href`, or whatever you hand it\n * via `asChild`. No router is imported, so the package stays framework-agnostic\n * and a Next or React Router app wires its own `Link` at the call site.\n *\n * Server-component friendly: there is no client boundary here, so it renders in\n * a static page as well as an interactive one.\n *\n * @example\n * <Button variant=\"secondary\" keycap=\"P\">View projects</Button>\n * @example\n * <Button loading disabled>Saving…</Button>\n * @example\n * <Button iconOnly aria-label=\"Close\"><X size={16} /></Button>\n */\nexport function Button(props: ButtonProps) {\n  const {\n    children,\n    variant = 'primary',\n    size = 'md',\n    keycap,\n    loading = false,\n    iconOnly = false,\n    asChild = false,\n    className,\n  } = props\n\n  const cls = cn(BASE, VARIANT[variant], iconOnly ? ICON_SIZE[size] : SIZE[size], className)\n\n  if (DEV && iconOnly) {\n    // The control renders correctly and is announced as \"button\" and nothing\n    // else. Nothing about the rendered page says so, which is why this is the\n    // single most common way a design system ships an unusable control.\n    const named =\n      typeof props['aria-label'] === 'string' && props['aria-label'].trim() !== ''\n    const described = typeof props['aria-labelledby'] === 'string'\n    if (!named && !described) {\n      warn({\n        code: 'BUTTON_ICON_ONLY_UNNAMED',\n        problem:\n          'An iconOnly Button has no text, so without an accessible name a screen reader announces it as \"button\" and nothing else.',\n        field: 'aria-label',\n        fix: 'Add aria-label with the action the button performs, e.g. aria-label=\"Delete invoice\".',\n        component: 'Button',\n      })\n    }\n  }\n\n  // A filled ground needs a spinner in the inherited colour; an outlined one\n  // reads better against the page's own rule scale.\n  const spinnerTone = variant === 'primary' || variant === 'danger' ? 'current' : 'default'\n  const decoration = (\n    <>\n      {loading && <Spinner size={SPINNER_SIZE[size]} tone={spinnerTone} label={null} />}\n      {children}\n      {keycap && <Keycap glyph={keycap} />}\n    </>\n  )\n\n  if (asChild) {\n    const { children: _c, variant: _v, size: _s, keycap: _k, loading: _l, iconOnly: _i, asChild: _a, className: _cn, ...rest } = props\n    return (\n      <Slot className={cls} {...rest}>\n        {children}\n      </Slot>\n    )\n  }\n\n  if (props.href !== undefined) {\n    const { children: _c, variant: _v, size: _s, keycap: _k, loading: _l, iconOnly: _i, asChild: _a, className: _cn, href, ...rest } = props\n    return (\n      <a\n        href={href}\n        className={cls}\n        // A link cannot be `disabled`; `aria-disabled` plus the pointer-events\n        // rule in BASE is the accessible equivalent.\n        aria-disabled={loading || undefined}\n        {...rest}\n      >\n        {decoration}\n      </a>\n    )\n  }\n\n  const { children: _c, variant: _v, size: _s, keycap: _k, loading: _l, iconOnly: _i, asChild: _a, className: _cn, ...rest } = props\n  return (\n    <button\n      type={rest.type ?? 'button'}\n      aria-busy={loading || undefined}\n      disabled={rest.disabled || loading}\n      className={cls}\n      {...rest}\n    >\n      {decoration}\n    </button>\n  )\n}\n\nexport default Button\n"],"mappings":"AAmHI,SA4DA,UA5DA,KA4DA,YA5DA;AAnHJ,SAAS,YAAY;AAErB,SAAS,UAAU;AACnB,SAAS,KAAK,YAAY;AAC1B,SAAS,eAAe;AA0BxB,MAAM,OACJ;AAEF,MAAM,UAAyC;AAAA,EAC7C,SAAS;AAAA,EACT,WAAW;AAAA,EACX,OAAO;AAAA;AAAA;AAAA,EAGP,QAAQ;AACV;AAWA,MAAM,OAAmC;AAAA,EACvC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAGA,MAAM,YAAwC;AAAA,EAC5C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,eAAgD,EAAE,IAAI,MAAM,IAAI,MAAM,IAAI,KAAK;AAiDrF,SAAS,OAAO,EAAE,MAAM,GAAsB;AAC5C,SACE,oBAAC,UAAK,WAAU,4FACb,iBACH;AAEJ;AAmBO,SAAS,OAAO,OAAoB;AACzC,QAAM;AAAA,IACJ;AAAA,IACA,UAAU;AAAA,IACV,OAAO;AAAA,IACP;AAAA,IACA,UAAU;AAAA,IACV,WAAW;AAAA,IACX,UAAU;AAAA,IACV;AAAA,EACF,IAAI;AAEJ,QAAM,MAAM,GAAG,MAAM,QAAQ,OAAO,GAAG,WAAW,UAAU,IAAI,IAAI,KAAK,IAAI,GAAG,SAAS;AAEzF,MAAI,OAAO,UAAU;AAInB,UAAM,QACJ,OAAO,MAAM,YAAY,MAAM,YAAY,MAAM,YAAY,EAAE,KAAK,MAAM;AAC5E,UAAM,YAAY,OAAO,MAAM,iBAAiB,MAAM;AACtD,QAAI,CAAC,SAAS,CAAC,WAAW;AACxB,WAAK;AAAA,QACH,MAAM;AAAA,QACN,SACE;AAAA,QACF,OAAO;AAAA,QACP,KAAK;AAAA,QACL,WAAW;AAAA,MACb,CAAC;AAAA,IACH;AAAA,EACF;AAIA,QAAM,cAAc,YAAY,aAAa,YAAY,WAAW,YAAY;AAChF,QAAM,aACJ,iCACG;AAAA,eAAW,oBAAC,WAAQ,MAAM,aAAa,IAAI,GAAG,MAAM,aAAa,OAAO,MAAM;AAAA,IAC9E;AAAA,IACA,UAAU,oBAAC,UAAO,OAAO,QAAQ;AAAA,KACpC;AAGF,MAAI,SAAS;AACX,UAAM,EAAE,UAAUA,KAAI,SAASC,KAAI,MAAMC,KAAI,QAAQC,KAAI,SAASC,KAAI,UAAUC,KAAI,SAASC,KAAI,WAAWC,MAAK,GAAGC,MAAK,IAAI;AAC7H,WACE,oBAAC,QAAK,WAAW,KAAM,GAAGA,OACvB,UACH;AAAA,EAEJ;AAEA,MAAI,MAAM,SAAS,QAAW;AAC5B,UAAM,EAAE,UAAUR,KAAI,SAASC,KAAI,MAAMC,KAAI,QAAQC,KAAI,SAASC,KAAI,UAAUC,KAAI,SAASC,KAAI,WAAWC,MAAK,MAAM,GAAGC,MAAK,IAAI;AACnI,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,QAGX,iBAAe,WAAW;AAAA,QACzB,GAAGA;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,QAAM,EAAE,UAAU,IAAI,SAAS,IAAI,MAAM,IAAI,QAAQ,IAAI,SAAS,IAAI,UAAU,IAAI,SAAS,IAAI,WAAW,KAAK,GAAG,KAAK,IAAI;AAC7H,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,KAAK,QAAQ;AAAA,MACnB,aAAW,WAAW;AAAA,MACtB,UAAU,KAAK,YAAY;AAAA,MAC3B,WAAW;AAAA,MACV,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,iBAAQ;","names":["_c","_v","_s","_k","_l","_i","_a","_cn","rest"]}

package/dist/components/Calendar/Calendar.d.ts

@@ -1,7 +1,29 @@
 import * as react from 'react';
 import { DayPickerProps } from 'react-day-picker';
 
-type CalendarProps = DayPickerProps;
+/**
+ * The strings the month-and-year picker says, none of which react-day-picker
+ * knows about — its own `labels` prop covers its own chrome, and this panel is
+ * ours. English by default, and exposed for the same reason `AppShell` exposes
+ * `openLabel`: every one of these controls is an icon or a bare number, so the
+ * string IS the control as far as a screen reader is concerned.
+ *
+ * The month names already follow `locale`, which is what made the chrome around
+ * them read as an oversight rather than as a policy.
+ */
+interface CalendarLabels {
+    /** Names the panel showing twelve months. */
+    monthPanelLabel?: string;
+    /** Names the panel showing a page of years. */
+    yearPanelLabel?: string;
+    /** The two chevrons that browse a year at a time, inside the month panel. */
+    previousYearLabel?: string;
+    nextYearLabel?: string;
+    /** The two chevrons that page the year grid, twenty-four at a time. */
+    earlierYearsLabel?: string;
+    laterYearsLabel?: string;
+}
+type CalendarProps = DayPickerProps & CalendarLabels;
 /**
  * A month, as a grid of days.
  *
@@ -17,12 +39,16 @@ type CalendarProps = DayPickerProps;
  * library's OWN class is kept on each slot, because passing a class REPLACES it
  * and every `.rdp-*` selector downstream depends on those.
  *
+ * The month names follow `locale`. The picker's own chrome — the two panels and
+ * the four chevrons that browse them — follows `CalendarLabels`, because
+ * `locale` cannot supply strings this package invented.
+ *
  * @example
  * <Calendar mode="single" selected={date} onSelect={setDate} />
  * @example
  * // A birth date: widen the years, since the default span is deliberately short.
  * <Calendar mode="single" startMonth={new Date(1920, 0)} endMonth={new Date()} />
  */
-declare function Calendar({ className, classNames, components, ...props }: CalendarProps): react.JSX.Element;
+declare function Calendar({ className, classNames, components, monthPanelLabel, yearPanelLabel, previousYearLabel, nextYearLabel, earlierYearsLabel, laterYearsLabel, ...props }: CalendarProps): react.JSX.Element;
 
-export { Calendar, type CalendarProps, Calendar as default };
+export { Calendar, type CalendarLabels, type CalendarProps, Calendar as default };

package/dist/components/Calendar/Calendar.js

@@ -1,7 +1,14 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDown, ChevronLeft, ChevronRight } from "lucide-react";
-import { createContext, useContext, useEffect, useMemo, useRef, useState } from "react";
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
 import {
   DayPicker,
   useDayPicker
@@ -9,12 +16,21 @@ import {
 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()
+  endMonth: /* @__PURE__ */ new Date(),
+  labels: DEFAULT_LABELS
 });
 function useLabels() {
   const { dayPickerProps } = useDayPicker();
@@ -38,7 +54,7 @@ function MonthYearPanel({
   year: browsing,
   month
 }) {
-  const { setOpen, startMonth, endMonth } = useContext(PickerContext);
+  const { setOpen, startMonth, endMonth, labels: names } = useContext(PickerContext);
   const { goToMonth } = useDayPicker();
   const labels = useLabels();
   const year = browsing ?? month.getFullYear();
@@ -64,13 +80,13 @@ function MonthYearPanel({
     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: "Year", children: [
+    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": "Earlier years",
+            "aria-label": names.earlierYearsLabel,
             disabled: !back,
             onClick: () => move(-1),
             className: STEP,
@@ -86,7 +102,7 @@ function MonthYearPanel({
           "button",
           {
             type: "button",
-            "aria-label": "Later years",
+            "aria-label": names.laterYearsLabel,
             disabled: !forward,
             onClick: () => move(1),
             className: STEP,
@@ -107,13 +123,13 @@ function MonthYearPanel({
       )) })
     ] }, "years");
   }
-  return /* @__PURE__ */ jsxs(Panel, { label: "Month and year", children: [
+  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": "Previous year",
+          "aria-label": names.previousYearLabel,
           disabled: year <= firstYear,
           onClick: () => setOpen({ index, view: "months", year: year - 1 }),
           className: STEP,
@@ -133,7 +149,7 @@ function MonthYearPanel({
         "button",
         {
           type: "button",
-          "aria-label": "Next year",
+          "aria-label": names.nextYearLabel,
           disabled: year >= lastYear,
           onClick: () => setOpen({ index, view: "months", year: year + 1 }),
           className: STEP,
@@ -162,12 +178,25 @@ function Panel({ label, children }) {
     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: "group",
+      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
     }
@@ -229,14 +258,33 @@ function CalendarCaption({ calendarMonth, displayIndex, className, ...rest }) {
     }
   );
 }
-function Calendar({ className, classNames, components, ...props }) {
+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 }, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(PickerContext, { value: { open, setOpen, startMonth, endMonth, labels }, children: /* @__PURE__ */ jsx(
     DayPicker,
     {
       showOutsideDays: true,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["'use client'\n\nimport { ChevronDown, ChevronLeft, ChevronRight } from 'lucide-react'\nimport { createContext, useContext, useEffect, useMemo, useRef, useState, type ReactNode } from 'react'\nimport {\n  DayPicker,\n  useDayPicker,\n  type DayPickerProps,\n  type MonthCaptionProps,\n} from 'react-day-picker'\nimport { cn } from '../../lib/cn'\n\nexport type CalendarProps = DayPickerProps\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\ninterface PickerState {\n  open: PickerOpen | null\n  setOpen: (next: PickerOpen | null) => void\n  startMonth: Date\n  endMonth: Date\n}\n\nconst PickerContext = createContext<PickerState>({\n  open: null,\n  setOpen: () => {},\n  startMonth: new Date(),\n  endMonth: new Date(),\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 } = 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=\"Year\">\n        <div className=\"mb-1 flex items-center justify-between gap-1\">\n          <button\n            type=\"button\"\n            aria-label=\"Earlier years\"\n            disabled={!back}\n            onClick={() => move(-1)}\n            className={STEP}\n          >\n            <ChevronLeft size={16} strokeWidth={1.5} 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=\"Later years\"\n            disabled={!forward}\n            onClick={() => move(1)}\n            className={STEP}\n          >\n            <ChevronRight size={16} strokeWidth={1.5} 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=\"Month and year\">\n      <div className=\"mb-1 flex items-center justify-between gap-1\">\n        <button\n          type=\"button\"\n          aria-label=\"Previous year\"\n          disabled={year <= firstYear}\n          onClick={() => setOpen({ index, view: 'months', year: year - 1 })}\n          className={STEP}\n        >\n          <ChevronLeft size={16} strokeWidth={1.5} 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=\"Next year\"\n          disabled={year >= lastYear}\n          onClick={() => setOpen({ index, view: 'months', year: year + 1 })}\n          className={STEP}\n        >\n          <ChevronRight size={16} strokeWidth={1.5} 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. It is a `group` rather than a `dialog`: nothing\n * here is modal, and announcing a dialog that Tab walks straight out of is\n * worse than announcing nothing.\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  return (\n    <div\n      ref={box}\n      role=\"group\"\n      aria-label={label}\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        <ChevronDown\n          size={16}\n          strokeWidth={1.5}\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 * @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({ className, classNames, components, ...props }: CalendarProps) {\n  const now = new Date()\n  const [open, setOpen] = useState<PickerState['open']>(null)\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 }}>\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              <ChevronLeft size={16} strokeWidth={1.5} aria-hidden {...rest} />\n            ) : (\n              <ChevronRight size={16} strokeWidth={1.5} 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":[]}
+{"version":3,"sources":["../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["'use client'\n\nimport { ChevronDown, ChevronLeft, ChevronRight } from 'lucide-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            <ChevronLeft size={16} strokeWidth={1.5} 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            <ChevronRight size={16} strokeWidth={1.5} 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          <ChevronLeft size={16} strokeWidth={1.5} 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          <ChevronRight size={16} strokeWidth={1.5} 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        <ChevronDown\n          size={16}\n          strokeWidth={1.5}\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              <ChevronLeft size={16} strokeWidth={1.5} aria-hidden {...rest} />\n            ) : (\n              <ChevronRight size={16} strokeWidth={1.5} 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

@@ -18,6 +18,12 @@ interface CardProps extends HTMLAttributes<HTMLDivElement> {
  * 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.
  *

package/dist/components/Card/Card.js

@@ -6,7 +6,7 @@ const VARIANT = {
   flat: "border border-transparent bg-transparent"
 };
 function Card({ variant = "outline", className, children, ...rest }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("rounded-(--radius-lg)", VARIANT[variant], className), ...rest, children });
+  return /* @__PURE__ */ jsx("div", { className: cn("overflow-hidden rounded-(--radius-lg)", VARIANT[variant], className), ...rest, children });
 }
 function CardHeader({ className, children, ...rest }) {
   return /* @__PURE__ */ jsx(