@motir/design-system 0.1.0

package/dist/components/theme/StyleVignette.js

@@ -0,0 +1,382 @@
+import { BookOpen, Search, SlidersHorizontal } from 'lucide-react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { forwardRef } from 'react';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/theme/StyleVignette.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var spinnerVariants = cva(
+  "inline-block animate-spin rounded-full border-current border-t-transparent",
+  {
+    variants: {
+      size: {
+        sm: "h-4 w-4 border-[1.5px]",
+        md: "h-5 w-5 border-2",
+        lg: "h-8 w-8 border-[3px]"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+);
+var Spinner = forwardRef(function Spinner2({ className, size, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      role: "status",
+      "aria-label": rest["aria-label"] ?? "Loading",
+      className: cn(spinnerVariants({ size }), className),
+      ...rest
+    }
+  );
+});
+var buttonVariants = cva(
+  cn(
+    // Base layout
+    "inline-flex items-center justify-center gap-2",
+    // Typography
+    "font-sans text-sm font-medium leading-none",
+    // Shape — semantic tokens that flip with the active style
+    "rounded-(--radius-btn)",
+    // Interaction
+    "transition-[transform,background-color,border-color,color] duration-(--transition-duration)",
+    "active:scale-(--active-scale)",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+    "disabled:pointer-events-none disabled:opacity-50"
+  ),
+  {
+    variants: {
+      variant: {
+        primary: "bg-(--el-accent) text-(--el-accent-text) hover:opacity-90",
+        secondary: "bg-transparent text-(--el-text) border border-(--el-button-border) hover:bg-(--el-surface)",
+        ghost: "bg-transparent text-(--el-text) hover:bg-(--el-surface)",
+        danger: "bg-(--el-danger) text-(--el-danger-text) hover:opacity-90"
+      },
+      size: {
+        sm: "h-(--height-btn-sm) px-3 text-xs",
+        md: "h-(--height-btn-md) px-(--spacing-btn-x)",
+        lg: "h-(--height-btn-lg) px-6 text-base"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md"
+    }
+  }
+);
+forwardRef(function Button2({ variant, size, loading, leftIcon, rightIcon, disabled, className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      type: "button",
+      "data-variant": variant ?? "primary",
+      className: cn(buttonVariants({ variant, size }), className),
+      disabled: disabled || loading,
+      "aria-busy": loading || void 0,
+      ...rest,
+      children: [
+        loading ? /* @__PURE__ */ jsx(Spinner, { size: size === "lg" ? "md" : "sm", "aria-hidden": true }) : leftIcon ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "inline-flex", children: leftIcon }) : null,
+        /* @__PURE__ */ jsx("span", { children }),
+        !loading && rightIcon ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "inline-flex", children: rightIcon }) : null
+      ]
+    }
+  );
+});
+var cardVariants = cva(
+  cn(
+    "rounded-(--radius-card) border border-(--el-border)",
+    "p-(--spacing-card-padding)",
+    "transition-shadow duration-(--transition-duration)"
+  ),
+  {
+    variants: {
+      tint: {
+        none: "bg-(--el-card)",
+        peach: "bg-(--el-tint-peach) border-transparent",
+        rose: "bg-(--el-tint-rose) border-transparent",
+        mint: "bg-(--el-tint-mint) border-transparent",
+        lavender: "bg-(--el-tint-lavender) border-transparent",
+        sky: "bg-(--el-tint-sky) border-transparent",
+        yellow: "bg-(--el-tint-yellow) border-transparent"
+      },
+      clickable: {
+        true: "cursor-pointer hover:shadow-(--shadow-card) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+        false: ""
+      }
+    },
+    defaultVariants: { tint: "none", clickable: false }
+  }
+);
+var Card = forwardRef(function Card2({ tint, clickable, header, footer, className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(cardVariants({ tint, clickable }), className),
+      "data-tilt": "",
+      ...tint && tint !== "none" ? {} : { "data-surface": "card" },
+      ...clickable ? { tabIndex: 0, role: "button" } : {},
+      ...rest,
+      children: [
+        header ? /* @__PURE__ */ jsx("div", { "data-tilt-layer": "front", className: "mb-(--spacing-md)", children: header }) : null,
+        /* @__PURE__ */ jsx("div", { children }),
+        footer ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-tilt-layer": "back",
+            className: "border-(--el-border) mt-(--spacing-md) border-t pt-(--spacing-md)",
+            children: footer
+          }
+        ) : null
+      ]
+    }
+  );
+});
+var pillVariants = cva(
+  cn(
+    "inline-flex items-center gap-1",
+    "rounded-(--radius-badge)",
+    "px-(--spacing-chip-x) py-(--spacing-chip-y)",
+    "font-sans text-xs font-medium",
+    "border"
+  ),
+  {
+    variants: {
+      // All colored tones carry the semantic hue in the TINT BACKGROUND and use
+      // adaptive dark/light TEXT (`--color-charcoal`: #37352f light, #e5e5e5
+      // dark) — the same pattern `planned` always used. The previous saturated
+      // hue-on-tint TEXT failed WCAG AA (≈2.5–3.8:1 light, 3.2–4.0:1 dark);
+      // charcoal-on-tint clears ~10:1 in both modes (PRODECT_FINDINGS #35).
+      status: {
+        planned: "bg-(--el-tint-lavender) text-(--el-text-strong) border-transparent",
+        "in-progress": "bg-(--el-tint-sky) text-(--el-text-strong) border-transparent",
+        done: "bg-(--el-tint-mint) text-(--el-text-strong) border-transparent"
+      },
+      severity: {
+        info: "bg-(--el-tint-sky) text-(--el-text-strong) border-transparent",
+        success: "bg-(--el-tint-mint) text-(--el-text-strong) border-transparent",
+        warning: "bg-(--el-tint-peach) text-(--el-text-strong) border-transparent",
+        danger: "bg-(--el-tint-rose) text-(--el-text-strong) border-transparent"
+      },
+      // Priority chips (MOTIR-1273 · 1266.2) — a 5-step diverging ramp keyed off
+      // the `--el-priority-*` hues, un-collapsing `medium` and `lowest` (both
+      // were `tone="neutral"` grey). Each hue is diluted to a 14% tint over
+      // `--el-surface` so charcoal `--el-text-strong` clears AA in both themes
+      // (the hue lives in the background — finding #35); the redundant direction
+      // icon (PRIORITY_META) is the non-colour cue. `medium` (slate) and
+      // `lowest` (stone) resolve to two distinct greys in every palette.
+      priority: {
+        highest: "bg-[color-mix(in_srgb,var(--el-priority-highest)_14%,var(--el-surface))] text-(--el-text-strong) border-transparent",
+        high: "bg-[color-mix(in_srgb,var(--el-priority-high)_14%,var(--el-surface))] text-(--el-text-strong) border-transparent",
+        medium: "bg-[color-mix(in_srgb,var(--el-priority-medium)_14%,var(--el-surface))] text-(--el-text-strong) border-transparent",
+        low: "bg-[color-mix(in_srgb,var(--el-priority-low)_14%,var(--el-surface))] text-(--el-text-strong) border-transparent",
+        lowest: "bg-[color-mix(in_srgb,var(--el-priority-lowest)_14%,var(--el-surface))] text-(--el-text-strong) border-transparent"
+      },
+      // Project membership roles (Story 6.4 · design/projects access-members):
+      // admin → lavender, member → sky, viewer → mint — the hue in the tint,
+      // charcoal text (AA-safe, finding #35), same recipe as `status`. Routed
+      // through the DEDICATED `--el-role-*` tokens (MOTIR-1274 · 1266.3) so a
+      // palette can tune roles apart from the other --el-tint-* meanings; each
+      // defaults to its prior tint (zero visual change).
+      memberRole: {
+        admin: "bg-(--el-role-admin) text-(--el-text-strong) border-transparent",
+        member: "bg-(--el-role-member) text-(--el-text-strong) border-transparent",
+        viewer: "bg-(--el-role-viewer) text-(--el-text-strong) border-transparent"
+      },
+      // Organization roles (Story 6.10 · design/org-admin): owner → lavender
+      // (the highest, brand-purple tier), admin → sky, member → mint — the hue
+      // in the tint, charcoal text (AA-safe, finding #35), same recipe as above.
+      // Dedicated `--el-org-role-*` tokens (MOTIR-1274 · 1266.3); zero change.
+      orgRole: {
+        owner: "bg-(--el-org-role-owner) text-(--el-text-strong) border-transparent",
+        admin: "bg-(--el-org-role-admin) text-(--el-text-strong) border-transparent",
+        member: "bg-(--el-org-role-member) text-(--el-text-strong) border-transparent"
+      },
+      tone: {
+        neutral: "bg-(--el-chip-bg) text-(--el-text-secondary) border-(--el-chip-border)",
+        // Epic-level privacy "Not public" badge (Story 6.14 · design
+        // epic-privacy panels 1/2/6b) — lavender tint, charcoal text, the same
+        // AA-safe recipe as `status="planned"` / `memberRole="admin"` (≈9.7:1).
+        // Dedicated `--el-privacy-private` token (MOTIR-1274 · 1266.3); the
+        // matching `--el-privacy-public` is defined ahead of a "public" badge.
+        private: "bg-(--el-privacy-private) text-(--el-text-strong) border-transparent",
+        // Inactive "Archived" badge (MOTIR-1276 · 1266.5) — a QUIET muted fill
+        // with slate ink, not a hued tint: archived is an inactive state, not a
+        // severity. Dedicated `--el-archived-pill-*` tokens so a palette can tune
+        // the inactive badge apart from the neutral chip; AA-safe (slate on muted
+        // clears AA both themes).
+        archived: "bg-(--el-archived-pill-bg) text-(--el-archived-pill-text) border-transparent"
+      }
+    },
+    defaultVariants: {}
+  }
+);
+var Pill = forwardRef(function Pill2({ status, severity, priority, memberRole, orgRole, tone, className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      className: cn(
+        pillVariants({ status, severity, priority, memberRole, orgRole, tone }),
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+});
+function Bar({ accent, widthPct }) {
+  return /* @__PURE__ */ jsx("div", { className: "h-[6px] w-full overflow-hidden rounded-(--radius-badge) bg-(--el-muted)", children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "h-full rounded-(--radius-badge)",
+        accent ? "bg-(--el-accent)" : "bg-(--el-border-strong)"
+      ),
+      style: { width: `${widthPct}%` }
+    }
+  ) });
+}
+function ListRow({ dotVar, label, chip }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-[11px] text-(--el-text-secondary)", children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "size-2 shrink-0 rounded-full",
+        style: { background: `var(${dotVar})` },
+        "aria-hidden": true
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "truncate", children: label }),
+    /* @__PURE__ */ jsx("span", { className: "ml-auto shrink-0 rounded-(--radius-badge) bg-(--el-surface) px-(--spacing-chip-x) py-(--spacing-chip-y) text-[9px] font-medium text-(--el-text-secondary)", children: chip })
+  ] });
+}
+function StyleVignette({ styleId, palette, type, label, className }) {
+  const axisAttrs = {};
+  if (styleId) axisAttrs["data-style"] = styleId;
+  if (palette) axisAttrs["data-palette"] = palette;
+  if (type) axisAttrs["data-type"] = type;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...axisAttrs,
+      role: "img",
+      "aria-label": label ?? "Design style preview",
+      className: cn(
+        "style-vignette relative isolate overflow-hidden",
+        "rounded-(--radius-card) border border-(--el-border) bg-(--el-surface)",
+        "shadow-(--shadow-subtle)",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "sv-canvas pointer-events-none absolute inset-0 -z-10", "aria-hidden": true }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 p-3", children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              "data-surface": "sidebar",
+              className: "flex items-center gap-2 rounded-(--radius-control) bg-(--el-sidebar-bg) px-3 py-2",
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "size-2.5 rounded-full bg-(--el-accent)", "aria-hidden": true }),
+                /* @__PURE__ */ jsx("span", { className: "font-serif text-[12px] font-semibold text-(--el-text)", children: "Acme" }),
+                /* @__PURE__ */ jsx("span", { className: "ml-2 rounded-(--radius-control) bg-(--el-accent) px-2 py-[3px] text-[10px] font-medium text-(--el-accent-text)", children: "Board" }),
+                /* @__PURE__ */ jsx("span", { className: "text-[10px] text-(--el-text-muted)", children: "Backlog" }),
+                /* @__PURE__ */ jsx("span", { className: "text-[10px] text-(--el-text-muted)", children: "Reports" }),
+                /* @__PURE__ */ jsx("span", { className: "ml-auto size-5 rounded-full bg-(--el-muted)", "aria-hidden": true })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[1.4fr_1fr] gap-3", children: [
+            /* @__PURE__ */ jsxs(Card, { className: "flex flex-col gap-2 !p-3", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx(BookOpen, { className: "size-4 text-(--el-type-story)", "aria-hidden": true }),
+                /* @__PURE__ */ jsx("span", { className: "truncate font-serif text-[13px] font-semibold text-(--el-text)", children: "Ship the billing flow" }),
+                /* @__PURE__ */ jsx(Pill, { status: "in-progress", className: "ml-auto !text-[9px]", children: "In progress" })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+                /* @__PURE__ */ jsx(ListRow, { dotVar: "--el-success", label: "Invoice schema", chip: "Done" }),
+                /* @__PURE__ */ jsx(ListRow, { dotVar: "--el-warning", label: "Dunning emails", chip: "Review" }),
+                /* @__PURE__ */ jsx(ListRow, { dotVar: "--el-info", label: "Stripe webhook", chip: "To do" })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "mt-0.5 flex flex-col gap-1.5", children: [
+                /* @__PURE__ */ jsx(Bar, { accent: true, widthPct: 66 }),
+                /* @__PURE__ */ jsx(Bar, { widthPct: 38 })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "pointer-events-none absolute -inset-1 rounded-(--radius-card) bg-black/10",
+                  "aria-hidden": true
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  "data-surface": "modal",
+                  className: "relative flex flex-col gap-2 rounded-(--radius-modal) border border-(--el-border) bg-(--el-page-bg) p-3 shadow-(--shadow-modal)",
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "font-serif text-[12px] font-semibold text-(--el-text)", children: "New invoice" }),
+                    /* @__PURE__ */ jsx(Bar, { widthPct: 100 }),
+                    /* @__PURE__ */ jsx(Bar, { widthPct: 72 }),
+                    /* @__PURE__ */ jsxs("div", { className: "mt-1 flex gap-2", children: [
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: cn(
+                            buttonVariants({ variant: "primary", size: "sm" }),
+                            "!h-7 !px-3 !text-[10px]"
+                          ),
+                          children: "Create"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: cn(
+                            buttonVariants({ variant: "ghost", size: "sm" }),
+                            "!h-7 !px-3 !text-[10px]"
+                          ),
+                          children: "Cancel"
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              "data-surface": "input",
+              className: "flex h-(--height-input) items-center gap-2 rounded-(--radius-input) border border-(--el-border-strong) bg-(--el-page-bg) px-(--spacing-input-x) text-[11px] text-(--el-text-muted)",
+              children: [
+                /* @__PURE__ */ jsx(Search, { className: "size-3.5", "aria-hidden": true }),
+                /* @__PURE__ */ jsx("span", { children: "Search work items\u2026" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: cn(buttonVariants({ variant: "primary", size: "sm" }), "!text-[11px]"), children: "New work item" }),
+            /* @__PURE__ */ jsxs("span", { className: cn(buttonVariants({ variant: "ghost", size: "sm" }), "!text-[11px]"), children: [
+              /* @__PURE__ */ jsx(SlidersHorizontal, { className: "size-3.5", "aria-hidden": true }),
+              "Filter"
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+var StyleVignette_default = StyleVignette;
+
+export { StyleVignette, StyleVignette_default as default };
+//# sourceMappingURL=StyleVignette.js.map
+//# sourceMappingURL=StyleVignette.js.map

package/dist/components/theme/StyleVignette.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/cn.ts","../../../src/components/ui/Spinner.tsx","../../../src/components/ui/Button.tsx","../../../src/components/ui/Card.tsx","../../../src/components/ui/Pill.tsx","../../../src/components/theme/StyleVignette.tsx"],"names":["Spinner","cva","forwardRef","Button","jsx","Card","jsxs","Pill"],"mappings":"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","file":"StyleVignette.js","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/**\n * Merge Tailwind class names without conflicts.\n *\n * `clsx` handles conditional inclusion (booleans, undefineds, arrays);\n * `twMerge` resolves conflicting Tailwind classes (later wins, e.g.\n * `px-2 px-4` → `px-4`). Together they are the de facto standard for\n * composing Tailwind classes in React components.\n *\n * @example\n * cn('px-2 py-1', isActive && 'bg-primary', className)\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","import { forwardRef, type HTMLAttributes } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\n\n/**\n * Spinner — pure CSS rotation indicator.\n *\n * Three sizes; works standalone or inside a Button's loading state.\n *\n * @example\n * <Spinner size=\"md\" />\n * <Spinner size=\"sm\" aria-label=\"Loading\" />\n */\nconst spinnerVariants = cva(\n  'inline-block animate-spin rounded-full border-current border-t-transparent',\n  {\n    variants: {\n      size: {\n        sm: 'h-4 w-4 border-[1.5px]',\n        md: 'h-5 w-5 border-2',\n        lg: 'h-8 w-8 border-[3px]',\n      },\n    },\n    defaultVariants: { size: 'md' },\n  },\n);\n\nexport interface SpinnerProps\n  extends Omit<HTMLAttributes<HTMLSpanElement>, 'role'>, VariantProps<typeof spinnerVariants> {}\n\nexport const Spinner = forwardRef<HTMLSpanElement, SpinnerProps>(function Spinner(\n  { className, size, ...rest },\n  ref,\n) {\n  return (\n    <span\n      ref={ref}\n      role=\"status\"\n      aria-label={rest['aria-label'] ?? 'Loading'}\n      className={cn(spinnerVariants({ size }), className)}\n      {...rest}\n    />\n  );\n});\n","import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { Spinner } from './Spinner';\nimport { cn } from '../../utils/cn';\n\n/**\n * Button — primary interactive primitive.\n *\n * Variants × sizes × states. The `loading` state shows an inline Spinner\n * and disables the button. Use semantic Tailwind token classes; never\n * hardcode colors. Shape responds to `data-style` via\n * `--radius-btn` (rectangles in default, pills in `soft`).\n *\n * @example\n * <Button variant=\"primary\" size=\"md\">Save</Button>\n * <Button variant=\"ghost\" leftIcon={<Plus />} loading>Saving…</Button>\n */\n// Exported so a Next `<Link>` can render AS a styled button (an anchor styled\n// with the button variants — keeps real-link semantics for navigation) without\n// nesting a <button> inside an <a>. Used by the /ready empty state's \"View all\n// issues\" link (Subtask 7.0.6).\nexport const buttonVariants = cva(\n  cn(\n    // Base layout\n    'inline-flex items-center justify-center gap-2',\n    // Typography\n    'font-sans text-sm font-medium leading-none',\n    // Shape — semantic tokens that flip with the active style\n    'rounded-(--radius-btn)',\n    // Interaction\n    'transition-[transform,background-color,border-color,color] duration-(--transition-duration)',\n    'active:scale-(--active-scale)',\n    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-background',\n    'disabled:pointer-events-none disabled:opacity-50',\n  ),\n  {\n    variants: {\n      variant: {\n        primary: 'bg-(--el-accent) text-(--el-accent-text) hover:opacity-90',\n        secondary:\n          'bg-transparent text-(--el-text) border border-(--el-button-border) hover:bg-(--el-surface)',\n        ghost: 'bg-transparent text-(--el-text) hover:bg-(--el-surface)',\n        danger: 'bg-(--el-danger) text-(--el-danger-text) hover:opacity-90',\n      },\n      size: {\n        sm: 'h-(--height-btn-sm) px-3 text-xs',\n        md: 'h-(--height-btn-md) px-(--spacing-btn-x)',\n        lg: 'h-(--height-btn-lg) px-6 text-base',\n      },\n    },\n    defaultVariants: {\n      variant: 'primary',\n      size: 'md',\n    },\n  },\n);\n\nexport interface ButtonProps\n  extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {\n  /** Shows inline Spinner + disables interaction. */\n  loading?: boolean;\n  /** Icon rendered before the label. */\n  leftIcon?: ReactNode;\n  /** Icon rendered after the label. */\n  rightIcon?: ReactNode;\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  { variant, size, loading, leftIcon, rightIcon, disabled, className, children, ...rest },\n  ref,\n) {\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      // `data-variant` is the hook the 3D / Immersive style uses to give FILLED\n      // buttons physical thickness (a solid palette-derived base edge) + a\n      // press-DOWN (7.3.39). Inert under every other style.\n      data-variant={variant ?? 'primary'}\n      className={cn(buttonVariants({ variant, size }), className)}\n      disabled={disabled || loading}\n      aria-busy={loading || undefined}\n      {...rest}\n    >\n      {loading ? (\n        <Spinner size={size === 'lg' ? 'md' : 'sm'} aria-hidden />\n      ) : leftIcon ? (\n        <span aria-hidden className=\"inline-flex\">\n          {leftIcon}\n        </span>\n      ) : null}\n      <span>{children}</span>\n      {!loading && rightIcon ? (\n        <span aria-hidden className=\"inline-flex\">\n          {rightIcon}\n        </span>\n      ) : null}\n    </button>\n  );\n});\n","import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\n\n/**\n * Card — content container with optional header/footer slots and tint variants.\n *\n * Compose with `header` / `footer` props for the common pattern, or just\n * pass children for a bare card. `clickable` makes the whole card a button\n * (use `onClick` + Enter/Space; pass `href` to render as `<a>` instead).\n *\n * Tint variants use the pastel feature tints from the palette\n * (peach/rose/mint/lavender/sky/yellow) — apply sparingly, never to\n * page-level surfaces.\n *\n * @example\n * <Card header={<h3>Title</h3>}>Body content</Card>\n * <Card tint=\"lavender\" clickable onClick={open}>Pastel card</Card>\n * <Card tint=\"mint\"><a href=\"/x\">Link wrapper</a></Card>\n */\nconst cardVariants = cva(\n  cn(\n    'rounded-(--radius-card) border border-(--el-border)',\n    'p-(--spacing-card-padding)',\n    'transition-shadow duration-(--transition-duration)',\n  ),\n  {\n    variants: {\n      tint: {\n        none: 'bg-(--el-card)',\n        peach: 'bg-(--el-tint-peach) border-transparent',\n        rose: 'bg-(--el-tint-rose) border-transparent',\n        mint: 'bg-(--el-tint-mint) border-transparent',\n        lavender: 'bg-(--el-tint-lavender) border-transparent',\n        sky: 'bg-(--el-tint-sky) border-transparent',\n        yellow: 'bg-(--el-tint-yellow) border-transparent',\n      },\n      clickable: {\n        true: 'cursor-pointer hover:shadow-(--shadow-card) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-background',\n        false: '',\n      },\n    },\n    defaultVariants: { tint: 'none', clickable: false },\n  },\n);\n\nexport interface CardProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'children'>, VariantProps<typeof cardVariants> {\n  header?: ReactNode;\n  footer?: ReactNode;\n  children?: ReactNode;\n}\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(function Card(\n  { tint, clickable, header, footer, className, children, ...rest },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      className={cn(cardVariants({ tint, clickable }), className)}\n      // `data-tilt` is the hook the 3D / Immersive style's pointer-parallax\n      // engine (ImmersiveTilt, 7.3.39) uses to tip this tile toward the cursor.\n      // Inert for every other style + under reduced motion; harmless otherwise.\n      data-tilt=\"\"\n      // `data-surface` is the hook a surface-MATERIAL style (e.g. glassmorphism)\n      // uses to frost this panel — see globals.css's material layer. Only the\n      // default (untinted) card opts in; a pastel-tint feature card keeps its\n      // opaque tint, never a frosted overlay that would wash the hue out.\n      {...(tint && tint !== 'none' ? {} : { 'data-surface': 'card' })}\n      {...(clickable ? { tabIndex: 0, role: 'button' } : {})}\n      {...rest}\n    >\n      {/* `data-tilt-layer` lifts the slot onto a translateZ plane under the 3D /\n          Immersive style (7.3.39) so it PARALLAXES above the card face as the\n          card tilts — `front` (the header/title pops most), `back` (the footer\n          sits nearer the face). Inert under every other style + reduced motion.\n          The body stays on the face so arbitrary content never renders on a\n          skewed Z-plane. */}\n      {header ? (\n        <div data-tilt-layer=\"front\" className=\"mb-(--spacing-md)\">\n          {header}\n        </div>\n      ) : null}\n      <div>{children}</div>\n      {footer ? (\n        <div\n          data-tilt-layer=\"back\"\n          className=\"border-(--el-border) mt-(--spacing-md) border-t pt-(--spacing-md)\"\n        >\n          {footer}\n        </div>\n      ) : null}\n    </div>\n  );\n});\n","import { forwardRef, type HTMLAttributes } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\n\n/**\n * Pill — compact status or severity label. Pure span, no interaction.\n *\n * Variant axes (use exactly one):\n *  - `status`: planned | in-progress | done — Motir's Subtask lifecycle states.\n *  - `severity`: info | success | warning | danger — semantic UI states.\n *  - `priority`: highest | high | medium | low | lowest — work-item priority, a\n *    5-step diverging ramp (`--el-priority-*` hue tinted over the surface, plus a\n *    redundant direction icon). The single source of truth is `PRIORITY_META`.\n *  - `memberRole`: admin | member | viewer — a project membership role\n *    (Story 6.4), one hued tint per role. (Named `memberRole`, not `role`, so\n *    it can't collide with the DOM `role` ARIA attribute on the span.)\n *  - `orgRole`: owner | admin | member — an ORGANIZATION role (Story 6.10),\n *    sitting above the workspace `memberRole`. owner → lavender (the highest,\n *    brand-purple tier), admin → sky, member → mint — per the org-admin design.\n *  - `tone`: neutral — a non-semantic chip (counts, metadata). Dark text on a\n *    neutral surface. `private` — the epic-level-privacy \"Not public\" badge\n *    (Story 6.14 · design epic-privacy panels 1/2/6b): lavender tint + charcoal\n *    text, the same AA-safe recipe as `status=\"planned\"` / `memberRole=\"admin\"`.\n *\n * All tones use adaptive dark/light text (`--color-charcoal`) on a hued tint,\n * so every variant clears WCAG AA contrast in both light and dark modes\n * (the hue lives in the background, not the text — PRODECT_FINDINGS #35).\n *\n * Always uses `--radius-badge` for fully rounded ends regardless of display style.\n *\n * @example\n * <Pill status=\"in-progress\">In progress</Pill>\n * <Pill severity=\"danger\">Validation failed</Pill>\n * <Pill tone=\"neutral\">3 members</Pill>\n */\nconst pillVariants = cva(\n  cn(\n    'inline-flex items-center gap-1',\n    'rounded-(--radius-badge)',\n    'px-(--spacing-chip-x) py-(--spacing-chip-y)',\n    'font-sans text-xs font-medium',\n    'border',\n  ),\n  {\n    variants: {\n      // All colored tones carry the semantic hue in the TINT BACKGROUND and use\n      // adaptive dark/light TEXT (`--color-charcoal`: #37352f light, #e5e5e5\n      // dark) — the same pattern `planned` always used. The previous saturated\n      // hue-on-tint TEXT failed WCAG AA (≈2.5–3.8:1 light, 3.2–4.0:1 dark);\n      // charcoal-on-tint clears ~10:1 in both modes (PRODECT_FINDINGS #35).\n      status: {\n        planned: 'bg-(--el-tint-lavender) text-(--el-text-strong) border-transparent',\n        'in-progress': 'bg-(--el-tint-sky) text-(--el-text-strong) border-transparent',\n        done: 'bg-(--el-tint-mint) text-(--el-text-strong) border-transparent',\n      },\n      severity: {\n        info: 'bg-(--el-tint-sky) text-(--el-text-strong) border-transparent',\n        success: 'bg-(--el-tint-mint) text-(--el-text-strong) border-transparent',\n        warning: 'bg-(--el-tint-peach) text-(--el-text-strong) border-transparent',\n        danger: 'bg-(--el-tint-rose) text-(--el-text-strong) border-transparent',\n      },\n      // Priority chips (MOTIR-1273 · 1266.2) — a 5-step diverging ramp keyed off\n      // the `--el-priority-*` hues, un-collapsing `medium` and `lowest` (both\n      // were `tone=\"neutral\"` grey). Each hue is diluted to a 14% tint over\n      // `--el-surface` so charcoal `--el-text-strong` clears AA in both themes\n      // (the hue lives in the background — finding #35); the redundant direction\n      // icon (PRIORITY_META) is the non-colour cue. `medium` (slate) and\n      // `lowest` (stone) resolve to two distinct greys in every palette.\n      priority: {\n        highest:\n          'bg-[color-mix(in_srgb,var(--el-priority-highest)_14%,var(--el-surface))] text-(--el-text-strong) border-transparent',\n        high: 'bg-[color-mix(in_srgb,var(--el-priority-high)_14%,var(--el-surface))] text-(--el-text-strong) border-transparent',\n        medium:\n          'bg-[color-mix(in_srgb,var(--el-priority-medium)_14%,var(--el-surface))] text-(--el-text-strong) border-transparent',\n        low: 'bg-[color-mix(in_srgb,var(--el-priority-low)_14%,var(--el-surface))] text-(--el-text-strong) border-transparent',\n        lowest:\n          'bg-[color-mix(in_srgb,var(--el-priority-lowest)_14%,var(--el-surface))] text-(--el-text-strong) border-transparent',\n      },\n      // Project membership roles (Story 6.4 · design/projects access-members):\n      // admin → lavender, member → sky, viewer → mint — the hue in the tint,\n      // charcoal text (AA-safe, finding #35), same recipe as `status`. Routed\n      // through the DEDICATED `--el-role-*` tokens (MOTIR-1274 · 1266.3) so a\n      // palette can tune roles apart from the other --el-tint-* meanings; each\n      // defaults to its prior tint (zero visual change).\n      memberRole: {\n        admin: 'bg-(--el-role-admin) text-(--el-text-strong) border-transparent',\n        member: 'bg-(--el-role-member) text-(--el-text-strong) border-transparent',\n        viewer: 'bg-(--el-role-viewer) text-(--el-text-strong) border-transparent',\n      },\n      // Organization roles (Story 6.10 · design/org-admin): owner → lavender\n      // (the highest, brand-purple tier), admin → sky, member → mint — the hue\n      // in the tint, charcoal text (AA-safe, finding #35), same recipe as above.\n      // Dedicated `--el-org-role-*` tokens (MOTIR-1274 · 1266.3); zero change.\n      orgRole: {\n        owner: 'bg-(--el-org-role-owner) text-(--el-text-strong) border-transparent',\n        admin: 'bg-(--el-org-role-admin) text-(--el-text-strong) border-transparent',\n        member: 'bg-(--el-org-role-member) text-(--el-text-strong) border-transparent',\n      },\n      tone: {\n        neutral: 'bg-(--el-chip-bg) text-(--el-text-secondary) border-(--el-chip-border)',\n        // Epic-level privacy \"Not public\" badge (Story 6.14 · design\n        // epic-privacy panels 1/2/6b) — lavender tint, charcoal text, the same\n        // AA-safe recipe as `status=\"planned\"` / `memberRole=\"admin\"` (≈9.7:1).\n        // Dedicated `--el-privacy-private` token (MOTIR-1274 · 1266.3); the\n        // matching `--el-privacy-public` is defined ahead of a \"public\" badge.\n        private: 'bg-(--el-privacy-private) text-(--el-text-strong) border-transparent',\n        // Inactive \"Archived\" badge (MOTIR-1276 · 1266.5) — a QUIET muted fill\n        // with slate ink, not a hued tint: archived is an inactive state, not a\n        // severity. Dedicated `--el-archived-pill-*` tokens so a palette can tune\n        // the inactive badge apart from the neutral chip; AA-safe (slate on muted\n        // clears AA both themes).\n        archived: 'bg-(--el-archived-pill-bg) text-(--el-archived-pill-text) border-transparent',\n      },\n    },\n    defaultVariants: {},\n  },\n);\n\nexport interface PillProps\n  extends HTMLAttributes<HTMLSpanElement>, VariantProps<typeof pillVariants> {}\n\nexport const Pill = forwardRef<HTMLSpanElement, PillProps>(function Pill(\n  { status, severity, priority, memberRole, orgRole, tone, className, children, ...rest },\n  ref,\n) {\n  return (\n    <span\n      ref={ref}\n      className={cn(\n        pillVariants({ status, severity, priority, memberRole, orgRole, tone }),\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </span>\n  );\n});\n","import type { ReactNode } from 'react';\nimport { BookOpen, Search, SlidersHorizontal } from 'lucide-react';\nimport { cn } from '../../utils/cn';\nimport { buttonVariants } from '../ui/Button';\nimport { Card } from '../ui/Card';\nimport { Pill } from '../ui/Pill';\nimport type { StyleId } from '../../theme/styles';\nimport type { PaletteId } from '../../theme/palettes';\nimport type { TypeId } from '../../theme/typography';\n\n/**\n * StyleVignette — the LIVE preview specimen that makes a design axis's FEEL\n * legible (Subtask 7.3.37 / MOTIR-1050).\n *\n * The fix for \"I only see typography change\": instead of a token-swatch table,\n * this is a composed, realistic MINI-SURFACE — a nav rail, a work-item card, a\n * search input, a button row, and a floating modal — rendered LIVE under a\n * style's shape/feel tokens + component overrides (and, independently, a palette\n * and a type pairing). Switching any axis re-shapes / re-skins / re-types the\n * whole vignette, so the user sees the product's feel, not a colour chip.\n *\n * ── Two modes ────────────────────────────────────────────────────────────\n *   • LIVE (no axis props) — the wrapper sets NO `data-*` axis attribute, so it\n *     INHERITS the active theme from `<html>` (driven by `theme-context`). Use\n *     this for the appearance-settings preview and the design-step showcase: the\n *     vignette re-renders automatically as the global selection changes.\n *   • SCOPED (any of `styleId` / `palette` / `type`) — the wrapper carries that\n *     axis attribute, so the globals.css axis block recomputes the tokens for\n *     this subtree ONLY. Use this for the onboarding Style gallery (one vignette\n *     per style) and the Palette step (one style re-rendered under each palette).\n *\n * Built on the `app/tokens/page.tsx` specimen pattern: real `--el-*` colour\n * tokens + element-semantic shape tokens + the `data-surface` material hooks, so\n * surface-material styles (glassmorphism's frosted glass, cybercore's glow grid)\n * apply exactly as they do in the shipped app. NEVER a Tier-0 `--color-*` or a\n * raw `rounded-*`/`p-*`/`h-*` (the colour + shape token rules in CLAUDE.md).\n *\n * Nesting caveat: a SCOPED base entry (`warm-editorial` / `motir` palette /\n * `motir` type) has no globals.css override block, so when it is nested under a\n * NON-base `<html>` it inherits that ancestor's axis rather than resetting to\n * the base. In the real consumers this never bites — onboarding runs against the\n * default `<html>`, and the appearance preview uses LIVE mode (inherits the\n * active selection it is meant to show). Full nested-base isolation (a reset\n * block or an iframe) is a noted follow-up if a future consumer needs it.\n */\n\nexport interface StyleVignetteProps {\n  /** Scope the vignette to a specific style; omit to inherit the active style. */\n  styleId?: StyleId;\n  /** Scope the vignette to a specific palette; omit to inherit the active palette. */\n  palette?: PaletteId;\n  /** Scope the vignette to a specific type pairing; omit to inherit the active type. */\n  type?: TypeId;\n  /**\n   * Accessible name for the preview region. The vignette is decorative chrome,\n   * so it is announced as a single labelled image rather than a pile of\n   * read-out controls.\n   */\n  label?: string;\n  className?: string;\n}\n\n/** A muted progress bar; `accent` tints it with the active accent. */\nfunction Bar({ accent, widthPct }: { accent?: boolean; widthPct: number }) {\n  return (\n    <div className=\"h-[6px] w-full overflow-hidden rounded-(--radius-badge) bg-(--el-muted)\">\n      <div\n        className={cn(\n          'h-full rounded-(--radius-badge)',\n          accent ? 'bg-(--el-accent)' : 'bg-(--el-border-strong)',\n        )}\n        style={{ width: `${widthPct}%` }}\n      />\n    </div>\n  );\n}\n\n/** One row of the work-item card's mini list — a status dot + label + chip. */\nfunction ListRow({ dotVar, label, chip }: { dotVar: string; label: string; chip: string }) {\n  return (\n    <div className=\"flex items-center gap-2 text-[11px] text-(--el-text-secondary)\">\n      <span\n        className=\"size-2 shrink-0 rounded-full\"\n        style={{ background: `var(${dotVar})` }}\n        aria-hidden\n      />\n      <span className=\"truncate\">{label}</span>\n      <span className=\"ml-auto shrink-0 rounded-(--radius-badge) bg-(--el-surface) px-(--spacing-chip-x) py-(--spacing-chip-y) text-[9px] font-medium text-(--el-text-secondary)\">\n        {chip}\n      </span>\n    </div>\n  );\n}\n\nexport function StyleVignette({ styleId, palette, type, label, className }: StyleVignetteProps) {\n  // Only emit an axis attribute when the caller pins it; an omitted axis stays\n  // inherited (LIVE mode), which is how the appearance preview follows the\n  // global selection without re-implementing the theme context.\n  const axisAttrs: Record<string, string> = {};\n  if (styleId) axisAttrs['data-style'] = styleId;\n  if (palette) axisAttrs['data-palette'] = palette;\n  if (type) axisAttrs['data-type'] = type;\n\n  return (\n    <div\n      {...axisAttrs}\n      role=\"img\"\n      aria-label={label ?? 'Design style preview'}\n      className={cn(\n        'style-vignette relative isolate overflow-hidden',\n        'rounded-(--radius-card) border border-(--el-border) bg-(--el-surface)',\n        'shadow-(--shadow-subtle)',\n        className,\n      )}\n    >\n      {/* Material canvas: transparent for flat styles; the glassmorphism gradient\n          / cybercore grid is painted here via the descendant rules in\n          globals.css (a preview can't lean on the body-scoped canvas). */}\n      <span className=\"sv-canvas pointer-events-none absolute inset-0 -z-10\" aria-hidden />\n\n      <div className=\"flex flex-col gap-3 p-3\">\n        {/* NAV — a compact rail; data-surface lets a material style frost it. */}\n        <div\n          data-surface=\"sidebar\"\n          className=\"flex items-center gap-2 rounded-(--radius-control) bg-(--el-sidebar-bg) px-3 py-2\"\n        >\n          <span className=\"size-2.5 rounded-full bg-(--el-accent)\" aria-hidden />\n          <span className=\"font-serif text-[12px] font-semibold text-(--el-text)\">Acme</span>\n          <span className=\"ml-2 rounded-(--radius-control) bg-(--el-accent) px-2 py-[3px] text-[10px] font-medium text-(--el-accent-text)\">\n            Board\n          </span>\n          <span className=\"text-[10px] text-(--el-text-muted)\">Backlog</span>\n          <span className=\"text-[10px] text-(--el-text-muted)\">Reports</span>\n          <span className=\"ml-auto size-5 rounded-full bg-(--el-muted)\" aria-hidden />\n        </div>\n\n        <div className=\"grid grid-cols-[1.4fr_1fr] gap-3\">\n          {/* WORK-ITEM CARD — the centrepiece: type hue + serif title + status. */}\n          <Card className=\"flex flex-col gap-2 !p-3\">\n            <div className=\"flex items-center gap-2\">\n              {/* A decorative story-type icon in its `--el-type-story` hue. The\n                  package can't depend on motir-core's domain `IssueTypeIcon`\n                  (which maps work-item kinds → glyphs), so the vignette inlines\n                  the same glyph + hue directly — pixel-identical, boundary-clean. */}\n              <BookOpen className=\"size-4 text-(--el-type-story)\" aria-hidden />\n              <span className=\"truncate font-serif text-[13px] font-semibold text-(--el-text)\">\n                Ship the billing flow\n              </span>\n              <Pill status=\"in-progress\" className=\"ml-auto !text-[9px]\">\n                In progress\n              </Pill>\n            </div>\n            <div className=\"flex flex-col gap-1.5\">\n              <ListRow dotVar=\"--el-success\" label=\"Invoice schema\" chip=\"Done\" />\n              <ListRow dotVar=\"--el-warning\" label=\"Dunning emails\" chip=\"Review\" />\n              <ListRow dotVar=\"--el-info\" label=\"Stripe webhook\" chip=\"To do\" />\n            </div>\n            <div className=\"mt-0.5 flex flex-col gap-1.5\">\n              <Bar accent widthPct={66} />\n              <Bar widthPct={38} />\n            </div>\n          </Card>\n\n          {/* MODAL — a floating dialog panel; modal radius + elevation + scrim. */}\n          <div className=\"relative\">\n            <span\n              className=\"pointer-events-none absolute -inset-1 rounded-(--radius-card) bg-black/10\"\n              aria-hidden\n            />\n            <div\n              data-surface=\"modal\"\n              className=\"relative flex flex-col gap-2 rounded-(--radius-modal) border border-(--el-border) bg-(--el-page-bg) p-3 shadow-(--shadow-modal)\"\n            >\n              <span className=\"font-serif text-[12px] font-semibold text-(--el-text)\">\n                New invoice\n              </span>\n              <Bar widthPct={100} />\n              <Bar widthPct={72} />\n              <div className=\"mt-1 flex gap-2\">\n                <span\n                  className={cn(\n                    buttonVariants({ variant: 'primary', size: 'sm' }),\n                    '!h-7 !px-3 !text-[10px]',\n                  )}\n                >\n                  Create\n                </span>\n                <span\n                  className={cn(\n                    buttonVariants({ variant: 'ghost', size: 'sm' }),\n                    '!h-7 !px-3 !text-[10px]',\n                  )}\n                >\n                  Cancel\n                </span>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        {/* INPUT — a search field; data-surface lets a material style fill it. */}\n        <div\n          data-surface=\"input\"\n          className=\"flex h-(--height-input) items-center gap-2 rounded-(--radius-input) border border-(--el-border-strong) bg-(--el-page-bg) px-(--spacing-input-x) text-[11px] text-(--el-text-muted)\"\n        >\n          <Search className=\"size-3.5\" aria-hidden />\n          <span>Search work items…</span>\n        </div>\n\n        {/* BUTTON ROW — primary + ghost, exact Button silhouettes (non-interactive). */}\n        <div className=\"flex gap-2\">\n          <span className={cn(buttonVariants({ variant: 'primary', size: 'sm' }), '!text-[11px]')}>\n            New work item\n          </span>\n          <span className={cn(buttonVariants({ variant: 'ghost', size: 'sm' }), '!text-[11px]')}>\n            <SlidersHorizontal className=\"size-3.5\" aria-hidden />\n            Filter\n          </span>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default StyleVignette as (props: StyleVignetteProps) => ReactNode;\n"]}

package/dist/components/ui/Button.d.ts

@@ -0,0 +1,32 @@
+import * as react from 'react';
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+/**
+ * Button — primary interactive primitive.
+ *
+ * Variants × sizes × states. The `loading` state shows an inline Spinner
+ * and disables the button. Use semantic Tailwind token classes; never
+ * hardcode colors. Shape responds to `data-style` via
+ * `--radius-btn` (rectangles in default, pills in `soft`).
+ *
+ * @example
+ * <Button variant="primary" size="md">Save</Button>
+ * <Button variant="ghost" leftIcon={<Plus />} loading>Saving…</Button>
+ */
+declare const buttonVariants: (props?: ({
+    variant?: "primary" | "secondary" | "ghost" | "danger" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    /** Shows inline Spinner + disables interaction. */
+    loading?: boolean;
+    /** Icon rendered before the label. */
+    leftIcon?: ReactNode;
+    /** Icon rendered after the label. */
+    rightIcon?: ReactNode;
+}
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+export { Button, type ButtonProps, buttonVariants };

package/dist/components/ui/Button.js

@@ -0,0 +1,92 @@
+import { forwardRef } from 'react';
+import { cva } from 'class-variance-authority';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/ui/Button.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var spinnerVariants = cva(
+  "inline-block animate-spin rounded-full border-current border-t-transparent",
+  {
+    variants: {
+      size: {
+        sm: "h-4 w-4 border-[1.5px]",
+        md: "h-5 w-5 border-2",
+        lg: "h-8 w-8 border-[3px]"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+);
+var Spinner = forwardRef(function Spinner2({ className, size, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      role: "status",
+      "aria-label": rest["aria-label"] ?? "Loading",
+      className: cn(spinnerVariants({ size }), className),
+      ...rest
+    }
+  );
+});
+var buttonVariants = cva(
+  cn(
+    // Base layout
+    "inline-flex items-center justify-center gap-2",
+    // Typography
+    "font-sans text-sm font-medium leading-none",
+    // Shape — semantic tokens that flip with the active style
+    "rounded-(--radius-btn)",
+    // Interaction
+    "transition-[transform,background-color,border-color,color] duration-(--transition-duration)",
+    "active:scale-(--active-scale)",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+    "disabled:pointer-events-none disabled:opacity-50"
+  ),
+  {
+    variants: {
+      variant: {
+        primary: "bg-(--el-accent) text-(--el-accent-text) hover:opacity-90",
+        secondary: "bg-transparent text-(--el-text) border border-(--el-button-border) hover:bg-(--el-surface)",
+        ghost: "bg-transparent text-(--el-text) hover:bg-(--el-surface)",
+        danger: "bg-(--el-danger) text-(--el-danger-text) hover:opacity-90"
+      },
+      size: {
+        sm: "h-(--height-btn-sm) px-3 text-xs",
+        md: "h-(--height-btn-md) px-(--spacing-btn-x)",
+        lg: "h-(--height-btn-lg) px-6 text-base"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md"
+    }
+  }
+);
+var Button = forwardRef(function Button2({ variant, size, loading, leftIcon, rightIcon, disabled, className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      type: "button",
+      "data-variant": variant ?? "primary",
+      className: cn(buttonVariants({ variant, size }), className),
+      disabled: disabled || loading,
+      "aria-busy": loading || void 0,
+      ...rest,
+      children: [
+        loading ? /* @__PURE__ */ jsx(Spinner, { size: size === "lg" ? "md" : "sm", "aria-hidden": true }) : leftIcon ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "inline-flex", children: leftIcon }) : null,
+        /* @__PURE__ */ jsx("span", { children }),
+        !loading && rightIcon ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "inline-flex", children: rightIcon }) : null
+      ]
+    }
+  );
+});
+
+export { Button, buttonVariants };
+//# sourceMappingURL=Button.js.map
+//# sourceMappingURL=Button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/cn.ts","../../../src/components/ui/Spinner.tsx","../../../src/components/ui/Button.tsx"],"names":["Spinner","cva","forwardRef","Button","jsx"],"mappings":"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","file":"Button.js","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/**\n * Merge Tailwind class names without conflicts.\n *\n * `clsx` handles conditional inclusion (booleans, undefineds, arrays);\n * `twMerge` resolves conflicting Tailwind classes (later wins, e.g.\n * `px-2 px-4` → `px-4`). Together they are the de facto standard for\n * composing Tailwind classes in React components.\n *\n * @example\n * cn('px-2 py-1', isActive && 'bg-primary', className)\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","import { forwardRef, type HTMLAttributes } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\n\n/**\n * Spinner — pure CSS rotation indicator.\n *\n * Three sizes; works standalone or inside a Button's loading state.\n *\n * @example\n * <Spinner size=\"md\" />\n * <Spinner size=\"sm\" aria-label=\"Loading\" />\n */\nconst spinnerVariants = cva(\n  'inline-block animate-spin rounded-full border-current border-t-transparent',\n  {\n    variants: {\n      size: {\n        sm: 'h-4 w-4 border-[1.5px]',\n        md: 'h-5 w-5 border-2',\n        lg: 'h-8 w-8 border-[3px]',\n      },\n    },\n    defaultVariants: { size: 'md' },\n  },\n);\n\nexport interface SpinnerProps\n  extends Omit<HTMLAttributes<HTMLSpanElement>, 'role'>, VariantProps<typeof spinnerVariants> {}\n\nexport const Spinner = forwardRef<HTMLSpanElement, SpinnerProps>(function Spinner(\n  { className, size, ...rest },\n  ref,\n) {\n  return (\n    <span\n      ref={ref}\n      role=\"status\"\n      aria-label={rest['aria-label'] ?? 'Loading'}\n      className={cn(spinnerVariants({ size }), className)}\n      {...rest}\n    />\n  );\n});\n","import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { Spinner } from './Spinner';\nimport { cn } from '../../utils/cn';\n\n/**\n * Button — primary interactive primitive.\n *\n * Variants × sizes × states. The `loading` state shows an inline Spinner\n * and disables the button. Use semantic Tailwind token classes; never\n * hardcode colors. Shape responds to `data-style` via\n * `--radius-btn` (rectangles in default, pills in `soft`).\n *\n * @example\n * <Button variant=\"primary\" size=\"md\">Save</Button>\n * <Button variant=\"ghost\" leftIcon={<Plus />} loading>Saving…</Button>\n */\n// Exported so a Next `<Link>` can render AS a styled button (an anchor styled\n// with the button variants — keeps real-link semantics for navigation) without\n// nesting a <button> inside an <a>. Used by the /ready empty state's \"View all\n// issues\" link (Subtask 7.0.6).\nexport const buttonVariants = cva(\n  cn(\n    // Base layout\n    'inline-flex items-center justify-center gap-2',\n    // Typography\n    'font-sans text-sm font-medium leading-none',\n    // Shape — semantic tokens that flip with the active style\n    'rounded-(--radius-btn)',\n    // Interaction\n    'transition-[transform,background-color,border-color,color] duration-(--transition-duration)',\n    'active:scale-(--active-scale)',\n    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-background',\n    'disabled:pointer-events-none disabled:opacity-50',\n  ),\n  {\n    variants: {\n      variant: {\n        primary: 'bg-(--el-accent) text-(--el-accent-text) hover:opacity-90',\n        secondary:\n          'bg-transparent text-(--el-text) border border-(--el-button-border) hover:bg-(--el-surface)',\n        ghost: 'bg-transparent text-(--el-text) hover:bg-(--el-surface)',\n        danger: 'bg-(--el-danger) text-(--el-danger-text) hover:opacity-90',\n      },\n      size: {\n        sm: 'h-(--height-btn-sm) px-3 text-xs',\n        md: 'h-(--height-btn-md) px-(--spacing-btn-x)',\n        lg: 'h-(--height-btn-lg) px-6 text-base',\n      },\n    },\n    defaultVariants: {\n      variant: 'primary',\n      size: 'md',\n    },\n  },\n);\n\nexport interface ButtonProps\n  extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {\n  /** Shows inline Spinner + disables interaction. */\n  loading?: boolean;\n  /** Icon rendered before the label. */\n  leftIcon?: ReactNode;\n  /** Icon rendered after the label. */\n  rightIcon?: ReactNode;\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  { variant, size, loading, leftIcon, rightIcon, disabled, className, children, ...rest },\n  ref,\n) {\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      // `data-variant` is the hook the 3D / Immersive style uses to give FILLED\n      // buttons physical thickness (a solid palette-derived base edge) + a\n      // press-DOWN (7.3.39). Inert under every other style.\n      data-variant={variant ?? 'primary'}\n      className={cn(buttonVariants({ variant, size }), className)}\n      disabled={disabled || loading}\n      aria-busy={loading || undefined}\n      {...rest}\n    >\n      {loading ? (\n        <Spinner size={size === 'lg' ? 'md' : 'sm'} aria-hidden />\n      ) : leftIcon ? (\n        <span aria-hidden className=\"inline-flex\">\n          {leftIcon}\n        </span>\n      ) : null}\n      <span>{children}</span>\n      {!loading && rightIcon ? (\n        <span aria-hidden className=\"inline-flex\">\n          {rightIcon}\n        </span>\n      ) : null}\n    </button>\n  );\n});\n"]}