@misoto22/design 0.3.1

package/dist/components/Button/Button.js

@@ -0,0 +1,81 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cn } from "../../lib/cn.js";
+import { Spinner } from "../Spinner/Spinner.js";
+const BASE = "inline-flex items-center justify-center gap-(--control-gap) rounded-(--radius-pill) 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-(--accent) text-(--accent-foreground) border border-(--accent) 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]",
+  md: "min-h-(--control-h-md) px-(--control-px-md) py-(--control-py-md) text-sm",
+  lg: "min-h-(--control-h-lg) px-(--control-px-lg) py-(--control-py-lg) text-[15px]"
+};
+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-pill) 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);
+  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 { 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 * A pill, and it does not move on hover. An earlier base lifted a pixel and\n * asked for a shadow the White Reset does not have — `--shadow` resolves to\n * `none`, so that hover state was invisible on every button in the system while\n * still costing a transition. Opacity carries the filled hover; the border\n * carries the outlined 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-pill) 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-pill) 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":"AA0GI,SAyCA,UAzCA,KAyCA,YAzCA;AA1GJ,SAAS,YAAY;AAErB,SAAS,UAAU;AACnB,SAAS,eAAe;AAkBxB,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,8FACb,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"]}

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

@@ -0,0 +1,28 @@
+import * as react from 'react';
+import { DayPickerProps } from 'react-day-picker';
+
+type CalendarProps = DayPickerProps;
+/**
+ * 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.
+ *
+ * @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, captionLayout, components, ...props }: CalendarProps): react.JSX.Element;
+
+export { Calendar, type CalendarProps, Calendar as default };

package/dist/components/Calendar/Calendar.js

@@ -0,0 +1,87 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { DayPicker } from "react-day-picker";
+import { cn } from "../../lib/cn.js";
+import { Select, SelectItem } from "../Select/Select.js";
+function CalendarDropdown({ options, value, onChange, "aria-label": label }) {
+  return /* @__PURE__ */ jsx(
+    Select,
+    {
+      label: label ?? "Select",
+      value: value === void 0 ? void 0 : String(value),
+      onValueChange: (next) => onChange?.({ target: { value: next } }),
+      contentClassName: "max-h-[10rem]",
+      className: "h-8 w-auto min-w-24 gap-1.5 border-transparent px-2 py-1 font-heading text-[length:var(--fs-item)] hover:border-(--rule-2)",
+      children: (options ?? []).map((option) => /* @__PURE__ */ jsx(SelectItem, { value: String(option.value), disabled: option.disabled, children: option.label }, option.value))
+    }
+  );
+}
+const DEFAULT_SPAN = 10;
+function Calendar({ className, classNames, captionLayout, components, ...props }) {
+  const now = /* @__PURE__ */ new Date();
+  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(
+    DayPicker,
+    {
+      showOutsideDays: true,
+      captionLayout: captionLayout ?? "dropdown",
+      startMonth: props.startMonth ?? new Date(now.getFullYear() - DEFAULT_SPAN, 0),
+      endMonth: props.endMonth ?? new Date(now.getFullYear() + DEFAULT_SPAN, 11),
+      className: cn("w-fit p-3", className),
+      components: {
+        Chevron: ({ orientation, ...rest }) => orientation === "left" ? /* @__PURE__ */ jsx(ChevronLeft, { size: 16, strokeWidth: 1.5, "aria-hidden": true, ...rest }) : /* @__PURE__ */ jsx(ChevronRight, { size: 16, strokeWidth: 1.5, "aria-hidden": true, ...rest }),
+        Dropdown: CalendarDropdown,
+        ...components
+      },
+      classNames: {
+        // `rdp-root` is kept deliberately. Passing a class for a slot REPLACES
+        // the library's own, so overriding `root` silently removed the hook
+        // that every `.rdp-*` selector — ours and a consumer's — depends on.
+        root: "rdp-root relative",
+        // The nav renders BEFORE the months in the DOM, so left in the flow it
+        // stacks its two arrows above the grid. Taking it out of the flow puts
+        // them where they belong — one at each end of the caption.
+        nav: "absolute inset-x-3 top-3 z-1 flex items-center justify-between",
+        months: "flex flex-col gap-4 sm:flex-row",
+        month: "flex flex-col gap-3",
+        month_caption: "flex h-9 items-center justify-center",
+        dropdowns: "flex items-center gap-1",
+        dropdown_root: "relative inline-flex items-center",
+        month_grid: "w-full border-collapse",
+        weekdays: "flex",
+        weekday: "w-9 mono-meta font-normal text-(--ink-3-aa)",
+        week: "mt-1 flex w-full",
+        // The band lives on the CELL and the mark lives on the BUTTON. Keeping
+        // them apart is what lets a range be one continuous wash while both of
+        // its ends stay round — the previous arrangement flattened the corners
+        // of whichever day was an end, and a one-day range is BOTH ends, so it
+        // came out as a square.
+        day: "relative p-0 text-center",
+        day_button: "relative z-1 inline-flex size-9 items-center justify-center rounded-(--radius-pill) text-sm text-(--ink-2) transition-colors duration-(--duration-fast) hover:bg-(--stone) hover:text-(--ink)",
+        selected: isRange ? "" : FILL,
+        // Today is an outline, not a fill — it is a fact about the calendar,
+        // not a choice the reader made, and the two must not look alike.
+        today: "[&>button]:ring-1 [&>button]:ring-(--rule-hard) [&>button]:ring-inset",
+        outside: "[&>button]:text-(--ink-3-aa)",
+        disabled: "[&>button]:opacity-(--disabled-opacity) [&>button]:pointer-events-none",
+        // The wash lives on the CELL and the mark on the BUTTON, which is what
+        // lets a range read as one continuous band while both of its ends stay
+        // round. A middle day gets the wash and no fill; the ends get both.
+        range_middle: "bg-(--accent-muted) [&>button]:text-(--ink) [&>button:hover]:bg-(--stone)",
+        range_start: cn("bg-(--accent-muted) rounded-s-(--radius-pill)", FILL),
+        range_end: cn("bg-(--accent-muted) rounded-e-(--radius-pill)", FILL),
+        hidden: "invisible",
+        ...classNames
+      },
+      ...props
+    }
+  );
+}
+var Calendar_default = Calendar;
+export {
+  Calendar,
+  Calendar_default as default
+};
+//# sourceMappingURL=Calendar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["'use client'\n\nimport { ChevronLeft, ChevronRight } from 'lucide-react'\nimport { DayPicker, type DayPickerProps, type DropdownProps } from 'react-day-picker'\nimport { cn } from '../../lib/cn'\nimport { Select, SelectItem } from '../Select/Select'\n\nexport type CalendarProps = DayPickerProps\n\n/**\n * Month and year, as the system's own `Select`.\n *\n * The library renders a native `<select>` here. Two problems with that: the\n * option list is drawn by the operating system, so it carries none of these\n * tokens and looks like a different product the moment it opens; and with a\n * wide year range it becomes a hundred-row list the platform renders as one\n * enormous column.\n *\n * The adapter is the small awkward part — the library hands back a native\n * change event, so a value from our Select is wrapped to look like one. That is\n * contained here rather than leaking into every call site.\n */\nfunction CalendarDropdown({ options, value, onChange, 'aria-label': label }: DropdownProps) {\n  return (\n    <Select\n      label={label ?? 'Select'}\n      value={value === undefined ? undefined : String(value)}\n      onValueChange={(next) =>\n        onChange?.({ target: { value: next } } as React.ChangeEvent<HTMLSelectElement>)\n      }\n      // A third of the calendar's height. The default list is as tall as the\n      // month grid, so opening the year picker blotted out the thing the reader\n      // opened it in order to change.\n      contentClassName=\"max-h-[10rem]\"\n      className=\"h-8 w-auto min-w-24 gap-1.5 border-transparent px-2 py-1 font-heading text-[length:var(--fs-item)] hover:border-(--rule-2)\"\n    >\n      {(options ?? []).map((option) => (\n        <SelectItem key={option.value} value={String(option.value)} disabled={option.disabled}>\n          {option.label}\n        </SelectItem>\n      ))}\n    </Select>\n  )\n}\n\n/** Ten years either side of now — see the note on `startMonth` below. */\nconst DEFAULT_SPAN = 10\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, captionLayout, components, ...props }: CalendarProps) {\n  const now = new Date()\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    <DayPicker\n      showOutsideDays\n      // Month and year as dropdowns, not two arrows. Stepping a month at a time\n      // is fine for \"next Tuesday\" and useless for a date two years back.\n      captionLayout={captionLayout ?? 'dropdown'}\n      // Ten years either side, NOT a century. A hundred-and-eleven-row year\n      // list is a scroll, not a choice — and the case that needs one (a birth\n      // date) is rare enough to ask for it explicitly. Both ends are props, so\n      // widening is one line at the call site.\n      startMonth={props.startMonth ?? new Date(now.getFullYear() - DEFAULT_SPAN, 0)}\n      endMonth={props.endMonth ?? new Date(now.getFullYear() + DEFAULT_SPAN, 11)}\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        Dropdown: CalendarDropdown,\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        nav: 'absolute inset-x-3 top-3 z-1 flex items-center justify-between',\n        months: 'flex flex-col gap-4 sm:flex-row',\n        month: 'flex flex-col gap-3',\n        month_caption: 'flex h-9 items-center justify-center',\n        dropdowns: 'flex items-center gap-1',\n        dropdown_root: 'relative inline-flex items-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  )\n}\n\nexport default Calendar\n"],"mappings":";AAqCQ;AAnCR,SAAS,aAAa,oBAAoB;AAC1C,SAAS,iBAA0D;AACnE,SAAS,UAAU;AACnB,SAAS,QAAQ,kBAAkB;AAiBnC,SAAS,iBAAiB,EAAE,SAAS,OAAO,UAAU,cAAc,MAAM,GAAkB;AAC1F,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,SAAS;AAAA,MAChB,OAAO,UAAU,SAAY,SAAY,OAAO,KAAK;AAAA,MACrD,eAAe,CAAC,SACd,WAAW,EAAE,QAAQ,EAAE,OAAO,KAAK,EAAE,CAAyC;AAAA,MAKhF,kBAAiB;AAAA,MACjB,WAAU;AAAA,MAER,sBAAW,CAAC,GAAG,IAAI,CAAC,WACpB,oBAAC,cAA8B,OAAO,OAAO,OAAO,KAAK,GAAG,UAAU,OAAO,UAC1E,iBAAO,SADO,OAAO,KAExB,CACD;AAAA;AAAA,EACH;AAEJ;AAGA,MAAM,eAAe;AAuBd,SAAS,SAAS,EAAE,WAAW,YAAY,eAAe,YAAY,GAAG,MAAM,GAAkB;AACtG,QAAM,MAAM,oBAAI,KAAK;AAYrB,QAAM,UAAU,MAAM,SAAS;AAC/B,QAAM,OACJ;AAEF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,iBAAe;AAAA,MAGf,eAAe,iBAAiB;AAAA,MAKhC,YAAY,MAAM,cAAc,IAAI,KAAK,IAAI,YAAY,IAAI,cAAc,CAAC;AAAA,MAC5E,UAAU,MAAM,YAAY,IAAI,KAAK,IAAI,YAAY,IAAI,cAAc,EAAE;AAAA,MACzE,WAAW,GAAG,aAAa,SAAS;AAAA,MACpC,YAAY;AAAA,QACV,SAAS,CAAC,EAAE,aAAa,GAAG,KAAK,MAC/B,gBAAgB,SACd,oBAAC,eAAY,MAAM,IAAI,aAAa,KAAK,eAAW,MAAE,GAAG,MAAM,IAE/D,oBAAC,gBAAa,MAAM,IAAI,aAAa,KAAK,eAAW,MAAE,GAAG,MAAM;AAAA,QAEpE,UAAU;AAAA,QACV,GAAG;AAAA,MACL;AAAA,MACA,YAAY;AAAA;AAAA;AAAA;AAAA,QAIV,MAAM;AAAA;AAAA;AAAA;AAAA,QAIN,KAAK;AAAA,QACL,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,eAAe;AAAA,QACf,WAAW;AAAA,QACX,eAAe;AAAA,QACf,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,SAAS;AAAA,QACT,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMN,KAAK;AAAA,QACL,YACE;AAAA,QACF,UAAU,UAAU,KAAK;AAAA;AAAA;AAAA,QAGzB,OAAO;AAAA,QACP,SAAS;AAAA,QACT,UAAU;AAAA;AAAA;AAAA;AAAA,QAIV,cAAc;AAAA,QACd,aAAa,GAAG,iDAAiD,IAAI;AAAA,QACrE,WAAW,GAAG,iDAAiD,IAAI;AAAA,QACnE,QAAQ;AAAA,QACR,GAAG;AAAA,MACL;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,IAAO,mBAAQ;","names":[]}

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

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

package/dist/components/Card/Card.js

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

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

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

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

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

package/dist/components/Checkbox/Checkbox.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check, Minus } from "lucide-react";
+import { cn } from "../../lib/cn.js";
+function Checkbox({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    CheckboxPrimitive.Root,
+    {
+      className: cn(
+        "inline-flex size-[18px] shrink-0 items-center justify-center rounded-(--radius-sm) border border-(--rule-2) bg-(--paper) text-(--accent-foreground) transition-colors duration-(--duration-fast) data-[state=checked]:border-(--accent) data-[state=checked]:bg-(--accent) data-[state=indeterminate]:border-(--accent) data-[state=indeterminate]:bg-(--accent) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current", children: props.checked === "indeterminate" ? /* @__PURE__ */ jsx(Minus, { className: "size-3", strokeWidth: 3, "aria-hidden": true }) : /* @__PURE__ */ jsx(Check, { className: "size-3", strokeWidth: 3, "aria-hidden": true }) })
+    }
+  );
+}
+var Checkbox_default = Checkbox;
+export {
+  Checkbox,
+  Checkbox_default as default
+};
+//# sourceMappingURL=Checkbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["'use client'\n\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox'\nimport { Check, Minus } from 'lucide-react'\nimport type { ComponentProps } from 'react'\nimport { cn } from '../../lib/cn'\n\nexport type CheckboxProps = ComponentProps<typeof CheckboxPrimitive.Root>\n\n/**\n * A choice that takes effect when the form is submitted.\n *\n * Supports the indeterminate state (`checked=\"indeterminate\"`), which is what a\n * \"select all\" header needs when only some rows are selected — a plain\n * unchecked box there tells the reader the opposite of the truth.\n *\n * Pair with `Field`, or wrap it in a `<label>` at the call site so the words\n * beside it are part of the click target.\n *\n * @example\n * <label className=\"flex items-center gap-2.5 text-sm\">\n *   <Checkbox defaultChecked /> Subscribe to updates\n * </label>\n */\nexport function Checkbox({ className, ...props }: CheckboxProps) {\n  return (\n    <CheckboxPrimitive.Root\n      className={cn(\n        'inline-flex size-[18px] shrink-0 items-center justify-center rounded-(--radius-sm) border border-(--rule-2) bg-(--paper) text-(--accent-foreground) transition-colors duration-(--duration-fast) data-[state=checked]:border-(--accent) data-[state=checked]:bg-(--accent) data-[state=indeterminate]:border-(--accent) data-[state=indeterminate]:bg-(--accent) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none',\n        className,\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator className=\"flex items-center justify-center text-current\">\n        {props.checked === 'indeterminate' ? (\n          <Minus className=\"size-3\" strokeWidth={3} aria-hidden />\n        ) : (\n          <Check className=\"size-3\" strokeWidth={3} aria-hidden />\n        )}\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport default Checkbox\n"],"mappings":";AAmCU;AAjCV,YAAY,uBAAuB;AACnC,SAAS,OAAO,aAAa;AAE7B,SAAS,UAAU;AAmBZ,SAAS,SAAS,EAAE,WAAW,GAAG,MAAM,GAAkB;AAC/D,SACE;AAAA,IAAC,kBAAkB;AAAA,IAAlB;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,8BAAC,kBAAkB,WAAlB,EAA4B,WAAU,iDACpC,gBAAM,YAAY,kBACjB,oBAAC,SAAM,WAAU,UAAS,aAAa,GAAG,eAAW,MAAC,IAEtD,oBAAC,SAAM,WAAU,UAAS,aAAa,GAAG,eAAW,MAAC,GAE1D;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,mBAAQ;","names":[]}

package/dist/components/Collapsible/Collapsible.d.ts

@@ -0,0 +1,31 @@
+import * as react from 'react';
+import { ComponentProps, ReactNode } from 'react';
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+
+/** Radix Collapsible root, as a typed passthrough. */
+declare const Collapsible: react.ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleProps & react.RefAttributes<HTMLDivElement>>;
+interface CollapsibleSectionProps extends Omit<ComponentProps<typeof CollapsiblePrimitive.Root>, 'children' | 'title'> {
+    /** What the trigger says. */
+    title: ReactNode;
+    children: ReactNode;
+}
+/**
+ * One thing that opens, on its own.
+ *
+ * The difference from `Accordion` is arithmetic: an accordion is a SET, and a
+ * set can coordinate — opening one closes another. A collapsible is one
+ * disclosure with nothing to coordinate with. Reaching for an accordion of one
+ * gets you a component managing a value you never read.
+ *
+ * The marker here is a chevron rather than the accordion's plus, and
+ * deliberately: this reveals more of the same thing, where an accordion row
+ * opens a distinct answer.
+ *
+ * @example
+ * <CollapsibleSection title="Advanced settings">
+ *   <Field label="Retries"><Input type="number" /></Field>
+ * </CollapsibleSection>
+ */
+declare function CollapsibleSection({ title, children, className, ...props }: CollapsibleSectionProps): react.JSX.Element;
+
+export { Collapsible, CollapsibleSection, type CollapsibleSectionProps, Collapsible as default };

package/dist/components/Collapsible/Collapsible.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+import { ChevronDown } from "lucide-react";
+import { cn } from "../../lib/cn.js";
+const Collapsible = CollapsiblePrimitive.Root;
+function CollapsibleSection({
+  title,
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(CollapsiblePrimitive.Root, { className: cn("w-full", className), ...props, children: [
+    /* @__PURE__ */ jsxs(CollapsiblePrimitive.Trigger, { className: "group flex w-full items-center justify-between gap-4 py-3 text-start text-sm text-(--ink) transition-colors duration-(--duration-fast) hover:text-(--ink-2)", children: [
+      title,
+      /* @__PURE__ */ jsx(
+        ChevronDown,
+        {
+          size: 16,
+          strokeWidth: 1.5,
+          "aria-hidden": true,
+          className: "shrink-0 text-(--ink-3-aa) transition-transform duration-(--duration-base) ease-(--ease-out-expo) group-data-[state=open]:rotate-180"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(CollapsiblePrimitive.Content, { className: "overflow-hidden text-sm leading-relaxed text-(--ink-2) data-[state=closed]:animate-[m22-collapsible-up_var(--duration-base)_var(--ease)] data-[state=open]:animate-[m22-collapsible-down_var(--duration-base)_var(--ease)]", children: /* @__PURE__ */ jsx("div", { className: "pb-3", children }) })
+  ] });
+}
+var Collapsible_default = Collapsible;
+export {
+  Collapsible,
+  CollapsibleSection,
+  Collapsible_default as default
+};
+//# sourceMappingURL=Collapsible.js.map

package/dist/components/Collapsible/Collapsible.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Collapsible/Collapsible.tsx"],"sourcesContent":["'use client'\n\nimport * as CollapsiblePrimitive from '@radix-ui/react-collapsible'\nimport { ChevronDown } from 'lucide-react'\nimport type { ComponentProps, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\n/** Radix Collapsible root, as a typed passthrough. */\nexport const Collapsible = CollapsiblePrimitive.Root\n\nexport interface CollapsibleSectionProps\n  extends Omit<ComponentProps<typeof CollapsiblePrimitive.Root>, 'children' | 'title'> {\n  /** What the trigger says. */\n  title: ReactNode\n  children: ReactNode\n}\n\n/**\n * One thing that opens, on its own.\n *\n * The difference from `Accordion` is arithmetic: an accordion is a SET, and a\n * set can coordinate — opening one closes another. A collapsible is one\n * disclosure with nothing to coordinate with. Reaching for an accordion of one\n * gets you a component managing a value you never read.\n *\n * The marker here is a chevron rather than the accordion's plus, and\n * deliberately: this reveals more of the same thing, where an accordion row\n * opens a distinct answer.\n *\n * @example\n * <CollapsibleSection title=\"Advanced settings\">\n *   <Field label=\"Retries\"><Input type=\"number\" /></Field>\n * </CollapsibleSection>\n */\nexport function CollapsibleSection({\n  title,\n  children,\n  className,\n  ...props\n}: CollapsibleSectionProps) {\n  return (\n    <CollapsiblePrimitive.Root className={cn('w-full', className)} {...props}>\n      <CollapsiblePrimitive.Trigger className=\"group flex w-full items-center justify-between gap-4 py-3 text-start text-sm text-(--ink) transition-colors duration-(--duration-fast) hover:text-(--ink-2)\">\n        {title}\n        <ChevronDown\n          size={16}\n          strokeWidth={1.5}\n          aria-hidden\n          className=\"shrink-0 text-(--ink-3-aa) transition-transform duration-(--duration-base) ease-(--ease-out-expo) group-data-[state=open]:rotate-180\"\n        />\n      </CollapsiblePrimitive.Trigger>\n      <CollapsiblePrimitive.Content className=\"overflow-hidden text-sm leading-relaxed text-(--ink-2) data-[state=closed]:animate-[m22-collapsible-up_var(--duration-base)_var(--ease)] data-[state=open]:animate-[m22-collapsible-down_var(--duration-base)_var(--ease)]\">\n        <div className=\"pb-3\">{children}</div>\n      </CollapsiblePrimitive.Content>\n    </CollapsiblePrimitive.Root>\n  )\n}\n\nexport default Collapsible\n"],"mappings":";AA0CM,SAEE,KAFF;AAxCN,YAAY,0BAA0B;AACtC,SAAS,mBAAmB;AAE5B,SAAS,UAAU;AAGZ,MAAM,cAAc,qBAAqB;AA0BzC,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA4B;AAC1B,SACE,qBAAC,qBAAqB,MAArB,EAA0B,WAAW,GAAG,UAAU,SAAS,GAAI,GAAG,OACjE;AAAA,yBAAC,qBAAqB,SAArB,EAA6B,WAAU,+JACrC;AAAA;AAAA,MACD;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,aAAa;AAAA,UACb,eAAW;AAAA,UACX,WAAU;AAAA;AAAA,MACZ;AAAA,OACF;AAAA,IACA,oBAAC,qBAAqB,SAArB,EAA6B,WAAU,8NACtC,8BAAC,SAAI,WAAU,QAAQ,UAAS,GAClC;AAAA,KACF;AAEJ;AAEA,IAAO,sBAAQ;","names":[]}

package/dist/components/Combobox/Combobox.d.ts

@@ -0,0 +1,63 @@
+import * as react from 'react';
+
+interface ComboboxOption {
+    value: string;
+    label: string;
+    /** Extra text matched by the filter but not shown as the label. */
+    keywords?: string[];
+    disabled?: boolean;
+}
+interface CommonProps {
+    options: ComboboxOption[];
+    /** Names the control. Required — the trigger's text is a value, not a label. */
+    label: string;
+    /** Shown on the trigger when nothing is chosen. */
+    placeholder?: string;
+    /** Placeholder inside the filter field. */
+    searchPlaceholder?: string;
+    /** Shown when the filter matches nothing. Say what WOULD match. */
+    emptyMessage?: string;
+    disabled?: boolean;
+    className?: string;
+}
+interface SingleProps extends CommonProps {
+    multiple?: false;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+}
+interface MultipleProps extends CommonProps {
+    /**
+     * Several at once. The trigger then summarises the choice rather than naming
+     * it — "3 selected" past a threshold, because a trigger that grows with its
+     * value reflows the form every time someone picks another one.
+     */
+    multiple: true;
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+}
+type ComboboxProps = SingleProps | MultipleProps;
+/**
+ * A select you can type into, choosing one or several.
+ *
+ * The line against `Select` is length, and it is not a matter of taste: a
+ * styled select is better up to roughly a dozen options, because a list nobody
+ * can filter is faster to scan than one they have to think about. Past that,
+ * this is the right answer.
+ *
+ * Filtering, the highlighted row and the arrow keys come from cmdk, which
+ * implements the ARIA combobox pattern properly: the highlight moves through
+ * `aria-activedescendant` while focus stays in the input. Hand-rolled comboboxes
+ * move focus into the list instead, and the typed text stops being editable.
+ *
+ * Controlled or uncontrolled, like every other form control here.
+ *
+ * @example
+ * <Combobox label="Framework" options={FRAMEWORKS} placeholder="Pick one" />
+ * @example
+ * <Combobox multiple label="Tags" options={TAGS} />
+ */
+declare function Combobox(props: ComboboxProps): react.JSX.Element;
+
+export { Combobox, type ComboboxOption, type ComboboxProps, Combobox as default };