@misoto22/folio 0.0.0 → 0.17.0

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

@@ -0,0 +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. 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/Badge/Badge.d.ts

@@ -0,0 +1,30 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+type BadgeTone = 'neutral' | 'success' | 'warning' | 'danger' | 'outline';
+interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    children: ReactNode;
+    /**
+     * `neutral` is the default and the right answer nearly always. The three
+     * status tones are the system's only chroma and are bound to STATE — a badge
+     * that is red because the design wanted a red badge is the thing this scale
+     * exists to prevent.
+     */
+    tone?: BadgeTone;
+}
+/**
+ * A count, a state, a small inline marker.
+ *
+ * Mono and small, so it reads as metadata rather than as content. A badge is
+ * not interactive — if it can be clicked or dismissed it is a `Tag` or a
+ * button, and giving this one an `onClick` produces a control a keyboard cannot
+ * reach.
+ *
+ * @example
+ * <Badge>12</Badge>
+ * @example
+ * <Badge tone="success">Deployed</Badge>
+ */
+declare function Badge({ children, tone, className, ...rest }: BadgeProps): react.JSX.Element;
+
+export { Badge, type BadgeProps, type BadgeTone, Badge as default };

package/dist/components/Badge/Badge.js

@@ -0,0 +1,29 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+const TONE = {
+  neutral: "bg-(--stone) text-(--ink-2) border-transparent",
+  success: "bg-(--ok-soft) text-(--ok) border-transparent",
+  warning: "bg-(--warn-soft) text-(--warn) border-transparent",
+  danger: "bg-(--danger-soft) text-(--danger) border-transparent",
+  outline: "bg-transparent text-(--ink-2) border-(--rule-2)"
+};
+function Badge({ children, tone = "neutral", className, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "inline-flex items-center gap-1.5 rounded-(--radius-sm) border px-2.5 py-1 font-(family-name:--label-font) text-xs tracking-[calc(0.025em*var(--label-tracking-scale))]",
+        TONE[tone],
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+}
+var Badge_default = Badge;
+export {
+  Badge,
+  Badge_default as default
+};
+//# sourceMappingURL=Badge.js.map

package/dist/components/Badge/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\nexport type BadgeTone = 'neutral' | 'success' | 'warning' | 'danger' | 'outline'\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  children: ReactNode\n  /**\n   * `neutral` is the default and the right answer nearly always. The three\n   * status tones are the system's only chroma and are bound to STATE — a badge\n   * that is red because the design wanted a red badge is the thing this scale\n   * exists to prevent.\n   */\n  tone?: BadgeTone\n}\n\nconst TONE: Record<BadgeTone, string> = {\n  neutral: 'bg-(--stone) text-(--ink-2) border-transparent',\n  success: 'bg-(--ok-soft) text-(--ok) border-transparent',\n  warning: 'bg-(--warn-soft) text-(--warn) border-transparent',\n  danger: 'bg-(--danger-soft) text-(--danger) border-transparent',\n  outline: 'bg-transparent text-(--ink-2) border-(--rule-2)',\n}\n\n/**\n * A count, a state, a small inline marker.\n *\n * Mono and small, so it reads as metadata rather than as content. A badge is\n * not interactive — if it can be clicked or dismissed it is a `Tag` or a\n * button, and giving this one an `onClick` produces a control a keyboard cannot\n * reach.\n *\n * @example\n * <Badge>12</Badge>\n * @example\n * <Badge tone=\"success\">Deployed</Badge>\n */\nexport function Badge({ children, tone = 'neutral', className, ...rest }: BadgeProps) {\n  return (\n    <span\n      className={cn(\n        'inline-flex items-center gap-1.5 rounded-(--radius-sm) border px-2.5 py-1 font-(family-name:--label-font) text-xs tracking-[calc(0.025em*var(--label-tracking-scale))]',\n        TONE[tone],\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </span>\n  )\n}\n\nexport default Badge\n"],"mappings":"AAuCI;AAtCJ,SAAS,UAAU;AAenB,MAAM,OAAkC;AAAA,EACtC,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AACX;AAeO,SAAS,MAAM,EAAE,UAAU,OAAO,WAAW,WAAW,GAAG,KAAK,GAAe;AACpF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,KAAK,IAAI;AAAA,QACT;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,gBAAQ;","names":[]}

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

@@ -0,0 +1,37 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+interface Crumb {
+    label: ReactNode;
+    /** Omit on the last crumb — the page you are already on is not a link. */
+    href?: string;
+}
+interface BreadcrumbProps extends HTMLAttributes<HTMLElement> {
+    items: Crumb[];
+    /** Names this trail when a page has more than one. */
+    label?: string;
+    /** Rendered between crumbs. A slash by default; it is decorative either way. */
+    separator?: ReactNode;
+}
+/**
+ * Where you are, as a path.
+ *
+ * The last crumb is plain text with `aria-current="page"` rather than a link to
+ * itself — a self-link is the most common breadcrumb bug, and it makes a screen
+ * reader offer a navigation that goes nowhere.
+ *
+ * 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' }]} />
+ */
+declare function Breadcrumb({ items, label, separator, className, ...rest }: BreadcrumbProps): react.JSX.Element;
+
+export { Breadcrumb, type BreadcrumbProps, type Crumb, Breadcrumb as default };

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,46 @@
+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",
+  separator = "/",
+  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: [
+      /* @__PURE__ */ jsx("li", { className: "min-w-0", children: item.href && !last ? /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: item.href,
+          className: "text-(--ink-3-aa) underline decoration-transparent underline-offset-4 transition-colors duration-(--duration-fast) hover:text-(--ink) hover:decoration-(--rule-2)",
+          children: item.label
+        }
+      ) : /* @__PURE__ */ jsx("span", { "aria-current": last ? "page" : void 0, className: last ? "text-(--ink)" : void 0, children: item.label }) }),
+      !last && /* @__PURE__ */ jsx("li", { "aria-hidden": "true", className: "select-none text-(--rule-2)", children: separator })
+    ] }, 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,
+  Breadcrumb_default as default
+};
+//# sourceMappingURL=Breadcrumb.js.map

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

@@ -0,0 +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'\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.d.ts

@@ -0,0 +1,70 @@
+import * as react from 'react';
+import { ReactNode, AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react';
+
+type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
+type ButtonSize = 'sm' | 'md' | 'lg';
+interface CommonProps {
+    children?: ReactNode;
+    /**
+     * Which action this is. `primary` is the one thing the screen wants you to
+     * do, so there is at most one per view; `danger` is reserved for destructive
+     * actions and is the only place chroma is allowed on a control.
+     */
+    variant?: ButtonVariant;
+    /** 36 / 44 / 48px tall. `md` meets the pointer-target floor on its own. */
+    size?: ButtonSize;
+    /** Optional mono keycap glyph rendered after the label (e.g. "P"). */
+    keycap?: string;
+    /**
+     * Swaps the leading content for a spinner and blocks interaction. The label
+     * stays put — a button that empties out while it works loses its width, and
+     * the page reflows under the pointer that just clicked it.
+     */
+    loading?: boolean;
+    /**
+     * Square control with no label. REQUIRES `aria-label`: an icon-only button
+     * with no accessible name is invisible to a screen reader, and this is the
+     * single most common way a design system ships an unusable control.
+     */
+    iconOnly?: boolean;
+    /**
+     * Render the child element instead of a `<button>`, keeping these styles.
+     * Use it to hand the styling to a router's `Link` — `asChild` is what keeps
+     * this package free of any one router.
+     *
+     * The decoration slots (`keycap`, `loading`) are not injected into a slotted
+     * child; compose them inside it yourself.
+     *
+     * @example
+     * <Button asChild><Link href="/work">Work</Link></Button>
+     */
+    asChild?: boolean;
+    className?: string;
+}
+type ButtonAsLink = CommonProps & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'className' | 'children'> & {
+    href: string;
+};
+type ButtonAsButton = CommonProps & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'children'> & {
+    href?: undefined;
+};
+type ButtonProps = ButtonAsLink | ButtonAsButton;
+/**
+ * The system's action.
+ *
+ * Renders a `<button>`, or an `<a>` when given `href`, or whatever you hand it
+ * via `asChild`. No router is imported, so the package stays framework-agnostic
+ * and a Next or React Router app wires its own `Link` at the call site.
+ *
+ * Server-component friendly: there is no client boundary here, so it renders in
+ * a static page as well as an interactive one.
+ *
+ * @example
+ * <Button variant="secondary" keycap="P">View projects</Button>
+ * @example
+ * <Button loading disabled>Saving…</Button>
+ * @example
+ * <Button iconOnly aria-label="Close"><X size={16} /></Button>
+ */
+declare function Button(props: ButtonProps): react.JSX.Element;
+
+export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, Button as default };

package/dist/components/Button/Button.js

@@ -0,0 +1,95 @@
+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 = {
+  primary: "bg-(--action) text-(--action-foreground) border border-(--action) hover:opacity-85",
+  secondary: "border border-(--rule-2) text-(--ink) bg-transparent hover:border-(--ink)",
+  ghost: "border border-transparent text-(--ink-2) hover:text-(--ink) hover:bg-(--stone)",
+  /* The one place chroma is allowed on a control, and only because the action
+     is destructive — that is a state, not a brand colour. */
+  danger: "bg-(--danger) text-(--paper) border border-(--danger) hover:opacity-85"
+};
+const SIZE = {
+  sm: "min-h-(--control-h-sm) px-(--control-px-sm) py-(--control-py-sm) text-[13px] leading-(--control-lh)",
+  md: "min-h-(--control-h-md) px-(--control-px-md) py-(--control-py-md) text-sm leading-(--control-lh)",
+  lg: "min-h-(--control-h-lg) px-(--control-px-lg) py-(--control-py-lg) text-[15px] leading-(--control-lh)"
+};
+const ICON_SIZE = {
+  sm: "size-(--control-h-sm) p-0",
+  md: "size-(--control-h-md) p-0",
+  lg: "size-(--control-h-lg) p-0"
+};
+const SPINNER_SIZE = { sm: "sm", md: "sm", lg: "md" };
+function Keycap({ glyph }) {
+  return /* @__PURE__ */ jsx("span", { className: "rounded-(--radius-sm) border border-current px-2 py-0.5 font-mono text-[11px] opacity-55", children: glyph });
+}
+function Button(props) {
+  const {
+    children,
+    variant = "primary",
+    size = "md",
+    keycap,
+    loading = false,
+    iconOnly = false,
+    asChild = false,
+    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 }),
+    children,
+    keycap && /* @__PURE__ */ jsx(Keycap, { glyph: keycap })
+  ] });
+  if (asChild) {
+    const { children: _c2, variant: _v2, size: _s2, keycap: _k2, loading: _l2, iconOnly: _i2, asChild: _a2, className: _cn2, ...rest2 } = props;
+    return /* @__PURE__ */ jsx(Slot, { className: cls, ...rest2, children });
+  }
+  if (props.href !== void 0) {
+    const { children: _c2, variant: _v2, size: _s2, keycap: _k2, loading: _l2, iconOnly: _i2, asChild: _a2, className: _cn2, href, ...rest2 } = props;
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        href,
+        className: cls,
+        "aria-disabled": loading || void 0,
+        ...rest2,
+        children: decoration
+      }
+    );
+  }
+  const { children: _c, variant: _v, size: _s, keycap: _k, loading: _l, iconOnly: _i, asChild: _a, className: _cn, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: rest.type ?? "button",
+      "aria-busy": loading || void 0,
+      disabled: rest.disabled || loading,
+      className: cls,
+      ...rest,
+      children: decoration
+    }
+  );
+}
+var Button_default = Button;
+export {
+  Button,
+  Button_default as default
+};
+//# sourceMappingURL=Button.js.map

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

@@ -0,0 +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 { 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-(--action) text-(--action-foreground) border border-(--action) 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 *\n * `--control-lh` is what makes those numbers true rather than aspirational. A\n * floor only binds while the box is under it, and the box is the line plus the\n * padding plus the border — so a label inheriting the body's 1.6 leading put\n * `sm` at 39px against its own 36px token, `md` at 46 against 44 and `lg` at 50\n * against 48. Every size was two to three pixels taller than the number\n * documenting it, which is also how a masthead sized from `--control-h-sm`\n * ended up with a search field standing proud of every icon beside it.\n */\nconst SIZE: Record<ButtonSize, string> = {\n  sm: 'min-h-(--control-h-sm) px-(--control-px-sm) py-(--control-py-sm) text-[13px] leading-(--control-lh)',\n  md: 'min-h-(--control-h-md) px-(--control-px-md) py-(--control-py-md) text-sm leading-(--control-lh)',\n  lg: 'min-h-(--control-h-lg) px-(--control-px-lg) py-(--control-py-lg) text-[15px] leading-(--control-lh)',\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":"AA2HI,SA4DA,UA5DA,KA4DA,YA5DA;AA3HJ,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;AAmBA,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

@@ -0,0 +1,54 @@
+import * as react from 'react';
+import { DayPickerProps } from 'react-day-picker';
+
+/**
+ * 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.
+ *
+ * Wraps react-day-picker rather than building a calendar, and the reason is the
+ * long tail: a month grid is easy, and everything around it is not — the
+ * keyboard contract (arrows move a day, Page moves a month, Home and End reach
+ * the week's ends), the `aria-live` announcement when the month changes, week
+ * numbering, the first day of the week varying by locale, and the fact that
+ * "today" and "selected" are different states a screen reader must hear apart.
+ *
+ * Every class is replaced rather than layered over the library's stylesheet, so
+ * nothing here depends on a CSS file this package does not control — but the
+ * 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, monthPanelLabel, yearPanelLabel, previousYearLabel, nextYearLabel, earlierYearsLabel, laterYearsLabel, ...props }: CalendarProps): react.JSX.Element;
+
+export { Calendar, type CalendarLabels, type CalendarProps, Calendar as default };