@proteos/ui 0.55.0 → 0.57.0

package/dist/{chunk-IKAX76MB.js → chunk-NSE4VW3Z.js}

@@ -8,10 +8,27 @@ import { jsx } from 'react/jsx-runtime';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+var ctaClasses = [
+  "bg-ink text-surface border-ink",
+  "hovered:bg-accent-ink hovered:border-accent-ink"
+];
+var raisedClasses = [
+  "bg-surface text-ink border-rule shadow-[var(--shadow-rest)]",
+  "hovered:bg-surface-2 hovered:border-rule-strong",
+  "pressed:bg-surface-3 pressed:shadow-none",
+  "focus-visible:shadow-[var(--shadow-focus),var(--shadow-rest)]"
+];
+var mutedClasses = [
+  "bg-surface-3 text-ink-2 border-transparent",
+  "hovered:bg-surface-4 hovered:text-ink",
+  "pressed:bg-[color-mix(in_oklab,var(--color-ink)_8%,var(--color-surface-4))]"
+];
 var buttonStyles = tv({
   base: [
     "inline-flex items-center justify-center gap-2 whitespace-nowrap cursor-pointer",
-    "font-mono tracking-[-0.005em] border border-transparent",
+    // Button labels are human copy, not machine fact — Inter 500 (DESIGN.md
+    // typography.body), not the mono reserved for ids, timestamps and badges.
+    "font-sans font-medium tracking-[-0.005em] border border-transparent",
     "transition-[background-color,color,border-color,box-shadow,transform] duration-150",
     "outline-none pressed:translate-y-px",
     "focus-visible:shadow-[var(--shadow-focus)]",
@@ -19,26 +36,31 @@ var buttonStyles = tv({
   ],
   variants: {
     variant: {
-      primary: ["bg-ink text-surface border-ink", "hover:bg-accent-ink hover:border-accent-ink"],
-      // Hover uses accent-2 — the token DESIGN.md reserves for "hover on
-      // accent". accent-ink is a text-on-tinted-surface color and flips
-      // light in dark mode, so it can't double as a hover fill here.
-      accent: [
-        "bg-accent text-[#f0efe8] border-accent",
-        "hover:bg-accent-2 hover:border-accent-2"
-      ],
-      secondary: ["bg-transparent text-ink border-ink", "hover:bg-ink hover:text-surface"],
+      cta: ctaClasses,
+      accent: ctaClasses,
+      primary: raisedClasses,
+      secondary: mutedClasses,
       ghost: [
-        "bg-bg text-ink-2 border-rule-strong",
-        "hover:bg-surface-2 hover:text-ink hover:border-ink-4"
+        "bg-transparent text-ink-2 border-transparent",
+        "hovered:bg-surface-3 hovered:text-ink",
+        "pressed:bg-surface-4"
+      ],
+      subtle: [
+        "bg-transparent text-ink-3 border-transparent",
+        "hovered:bg-surface-2 hovered:text-ink",
+        "pressed:bg-surface-3"
       ],
-      // Transparent at rest, paper-fill on hover. The toolbar / sidebar
-      // register — pairs with `size="icon-md"` for top-bar icon buttons.
-      subtle: ["bg-transparent text-ink-3 border-transparent", "hover:bg-surface-2 hover:text-ink"],
       link: [
         "bg-transparent text-ink-2 border-transparent",
         "px-0.5 border-b border-b-ink-4",
-        "hover:text-ink hover:border-b-ink"
+        "hovered:text-ink hovered:border-b-ink"
+      ],
+      // `text-surface`, not white: dark's --color-danger is a light salmon, and
+      // the surface token flips dark with it while white would fail contrast.
+      danger: [
+        "bg-danger text-surface border-danger",
+        "hovered:bg-[color-mix(in_oklab,var(--color-danger)_88%,var(--color-ink))]",
+        "hovered:border-[color-mix(in_oklab,var(--color-danger)_88%,var(--color-ink))]"
       ]
     },
     size: {
@@ -51,8 +73,8 @@ var buttonStyles = tv({
       "icon-lg": "size-[42px] p-0 [&_svg]:size-[18px]"
     },
     // Corner shape. Default is rounded (soft 10px radius — the standard
-    // Proteos button), `pill` is the fully-rounded legacy treatment.
-    // The `link` variant overrides both to a flat underline.
+    // Proteos button), `pill` is the fully-rounded treatment for a small set
+    // of prominent CTAs. The `link` variant overrides both to a flat underline.
     shape: {
       rounded: "rounded-md",
       pill: "rounded-pill"
@@ -64,7 +86,9 @@ var buttonStyles = tv({
     { variant: "link", size: "lg", class: "px-0.5 py-0" },
     // Link never takes a corner radius — it's an underline, not a box.
     { variant: "link", shape: "rounded", class: "rounded-none" },
-    { variant: "link", shape: "pill", class: "rounded-none" }
+    { variant: "link", shape: "pill", class: "rounded-none" },
+    // Destructive confirms get the terracotta halo instead of the indigo one.
+    { variant: "danger", class: "focus-visible:shadow-[var(--shadow-focus-danger)]" }
   ],
   defaultVariants: {
     variant: "primary",
@@ -109,5 +133,5 @@ function Skeleton({ shape, className, ...props }) {
 }
 
 export { Button, Skeleton, buttonStyles, cn, skeletonStyles };
-//# sourceMappingURL=chunk-IKAX76MB.js.map
-//# sourceMappingURL=chunk-IKAX76MB.js.map
+//# sourceMappingURL=chunk-NSE4VW3Z.js.map
+//# sourceMappingURL=chunk-NSE4VW3Z.js.map

package/dist/chunk-NSE4VW3Z.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/cn.ts","../src/components/button/button.tsx","../src/components/skeleton/skeleton.tsx"],"names":["AriaButton","tv","jsx"],"mappings":";;;;;;;AAGO,SAAS,MAAM,MAAA,EAA8B;AAClD,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACuBA,IAAM,UAAA,GAAa;AAAA,EACjB,gCAAA;AAAA,EACA;AACF,CAAA;AAIA,IAAM,aAAA,GAAgB;AAAA,EACpB,6DAAA;AAAA,EACA,iDAAA;AAAA,EACA,0CAAA;AAAA,EACA;AACF,CAAA;AAGA,IAAM,YAAA,GAAe;AAAA,EACnB,4CAAA;AAAA,EACA,uCAAA;AAAA,EACA;AACF,CAAA;AAEO,IAAM,eAAe,EAAA,CAAG;AAAA,EAC7B,IAAA,EAAM;AAAA,IACJ,gFAAA;AAAA;AAAA;AAAA,IAGA,qEAAA;AAAA,IACA,oFAAA;AAAA,IACA,qCAAA;AAAA,IACA,4CAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,GAAA,EAAK,UAAA;AAAA,MACL,MAAA,EAAQ,UAAA;AAAA,MACR,OAAA,EAAS,aAAA;AAAA,MACT,SAAA,EAAW,YAAA;AAAA,MACX,KAAA,EAAO;AAAA,QACL,8CAAA;AAAA,QACA,uCAAA;AAAA,QACA;AAAA,OACF;AAAA,MACA,MAAA,EAAQ;AAAA,QACN,8CAAA;AAAA,QACA,uCAAA;AAAA,QACA;AAAA,OACF;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,8CAAA;AAAA,QACA,gCAAA;AAAA,QACA;AAAA,OACF;AAAA;AAAA;AAAA,MAGA,MAAA,EAAQ;AAAA,QACN,sCAAA;AAAA,QACA,2EAAA;AAAA,QACA;AAAA;AACF,KACF;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,EAAA,EAAI,oCAAA;AAAA,MACJ,EAAA,EAAI,0CAAA;AAAA,MACJ,EAAA,EAAI,yCAAA;AAAA;AAAA,MAEJ,SAAA,EAAW,6BAAA;AAAA,MACX,SAAA,EAAW,gCAAA;AAAA,MACX,SAAA,EAAW;AAAA,KACb;AAAA;AAAA;AAAA;AAAA,IAIA,KAAA,EAAO;AAAA,MACL,OAAA,EAAS,YAAA;AAAA,MACT,IAAA,EAAM;AAAA;AACR,GACF;AAAA,EACA,gBAAA,EAAkB;AAAA,IAChB,EAAE,OAAA,EAAS,MAAA,EAAQ,IAAA,EAAM,IAAA,EAAM,OAAO,aAAA,EAAc;AAAA,IACpD,EAAE,OAAA,EAAS,MAAA,EAAQ,IAAA,EAAM,IAAA,EAAM,OAAO,aAAA,EAAc;AAAA,IACpD,EAAE,OAAA,EAAS,MAAA,EAAQ,IAAA,EAAM,IAAA,EAAM,OAAO,aAAA,EAAc;AAAA;AAAA,IAEpD,EAAE,OAAA,EAAS,MAAA,EAAQ,KAAA,EAAO,SAAA,EAAW,OAAO,cAAA,EAAe;AAAA,IAC3D,EAAE,OAAA,EAAS,MAAA,EAAQ,KAAA,EAAO,MAAA,EAAQ,OAAO,cAAA,EAAe;AAAA;AAAA,IAExD,EAAE,OAAA,EAAS,QAAA,EAAU,KAAA,EAAO,mDAAA;AAAoD,GAClF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,OAAA,EAAS,SAAA;AAAA,IACT,IAAA,EAAM,IAAA;AAAA,IACN,KAAA,EAAO;AAAA;AAEX,CAAC;AAKM,SAAS,MAAA,CAAO,EAAE,OAAA,EAAS,IAAA,EAAM,OAAO,SAAA,EAAW,GAAG,OAAM,EAAgB;AACjF,EAAA,uBACE,GAAA;AAAA,IAACA,QAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,SAAA,EAAW,CAAC,WAAA,KACV,EAAA;AAAA,QACE,YAAA,CAAa,EAAE,OAAA,EAAS,IAAA,EAAM,OAAO,CAAA;AAAA,QACrC,OAAO,SAAA,KAAc,UAAA,GAAa,SAAA,CAAU,WAAW,CAAA,GAAI;AAAA;AAC7D;AAAA,GAEJ;AAEJ;AC5HO,IAAM,iBAAiBC,EAAAA,CAAG;AAAA,EAC/B,IAAA,EAAM,CAAC,eAAA,EAAiB,cAAc,CAAA;AAAA,EACtC,QAAA,EAAU;AAAA,IACR,KAAA,EAAO;AAAA,MACL,IAAA,EAAM,YAAA;AAAA,MACN,MAAA,EAAQ,cAAA;AAAA;AAAA;AAAA,MAGR,IAAA,EAAM;AAAA;AACR,GACF;AAAA,EACA,eAAA,EAAiB,EAAE,KAAA,EAAO,MAAA;AAC5B,CAAC;AAKM,SAAS,SAAS,EAAE,KAAA,EAAO,SAAA,EAAW,GAAG,OAAM,EAAkB;AACtE,EAAA,uBACEC,GAAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MAIC,aAAA,EAAY,MAAA;AAAA,MACX,GAAG,KAAA;AAAA,MACJ,WAAW,EAAA,CAAG,cAAA,CAAe,EAAE,KAAA,EAAO,GAAG,SAAS;AAAA;AAAA,GACpD;AAEJ","file":"chunk-NSE4VW3Z.js","sourcesContent":["import { type ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs))\n}\n","import { Button as AriaButton, type ButtonProps as AriaButtonProps } from 'react-aria-components'\nimport { tv, type VariantProps } from 'tailwind-variants'\n\nimport { cn } from '../../lib/cn'\n\n/* =========================================================================\n   Button — emphasis ladder, top to bottom:\n\n     cta        ink fill. The one strong action per view (never two visible).\n     primary    raised white: `surface` fill, `rule-strong` hairline, rest\n                shadow. The everyday button; the default variant.\n     secondary  muted: `surface-3` fill, no border. Cancel / supporting actions.\n     ghost      secondary's chrome, only on hover. Invisible at rest.\n     subtle     borderless text button (toolbars, icon buttons).\n     link       inline underline.\n     danger     solid terracotta for destructive confirms.\n\n   `accent` is a frozen alias of `cta` — variant names are part of the runtime\n   contract for module component bundles, so nothing is ever removed.\n\n   Interaction state comes from React Aria's data attributes (`hovered:`,\n   `pressed:` — see the @custom-variant block in styles.css); `focus-visible:`\n   and `disabled:` stay on the native pseudo-classes because the RAC root IS\n   the focusable <button>. Hover is always a colour step on the surface ramp,\n   never opacity; press is translateY(1px) plus one more ramp step.\n   ========================================================================= */\n\n// Ink fill with the indigo-tinted hover. Kept verbatim from the old primary.\nconst ctaClasses = [\n  'bg-ink text-surface border-ink',\n  'hovered:bg-accent-ink hovered:border-accent-ink',\n]\n\n// Raised white: a lighter inner on the darker page ground. On a white card the\n// hairline + rest shadow carry it. Press sinks one step and drops the shadow.\nconst raisedClasses = [\n  'bg-surface text-ink border-rule shadow-[var(--shadow-rest)]',\n  'hovered:bg-surface-2 hovered:border-rule-strong',\n  'pressed:bg-surface-3 pressed:shadow-none',\n  'focus-visible:shadow-[var(--shadow-focus),var(--shadow-rest)]',\n]\n\n// Muted gray fill, no border. One step quieter than primary.\nconst mutedClasses = [\n  'bg-surface-3 text-ink-2 border-transparent',\n  'hovered:bg-surface-4 hovered:text-ink',\n  'pressed:bg-[color-mix(in_oklab,var(--color-ink)_8%,var(--color-surface-4))]',\n]\n\nexport const buttonStyles = tv({\n  base: [\n    'inline-flex items-center justify-center gap-2 whitespace-nowrap cursor-pointer',\n    // Button labels are human copy, not machine fact — Inter 500 (DESIGN.md\n    // typography.body), not the mono reserved for ids, timestamps and badges.\n    'font-sans font-medium tracking-[-0.005em] border border-transparent',\n    'transition-[background-color,color,border-color,box-shadow,transform] duration-150',\n    'outline-none pressed:translate-y-px',\n    'focus-visible:shadow-[var(--shadow-focus)]',\n    'disabled:opacity-45 disabled:cursor-not-allowed disabled:pointer-events-none',\n  ],\n  variants: {\n    variant: {\n      cta: ctaClasses,\n      accent: ctaClasses,\n      primary: raisedClasses,\n      secondary: mutedClasses,\n      ghost: [\n        'bg-transparent text-ink-2 border-transparent',\n        'hovered:bg-surface-3 hovered:text-ink',\n        'pressed:bg-surface-4',\n      ],\n      subtle: [\n        'bg-transparent text-ink-3 border-transparent',\n        'hovered:bg-surface-2 hovered:text-ink',\n        'pressed:bg-surface-3',\n      ],\n      link: [\n        'bg-transparent text-ink-2 border-transparent',\n        'px-0.5 border-b border-b-ink-4',\n        'hovered:text-ink hovered:border-b-ink',\n      ],\n      // `text-surface`, not white: dark's --color-danger is a light salmon, and\n      // the surface token flips dark with it while white would fail contrast.\n      danger: [\n        'bg-danger text-surface border-danger',\n        'hovered:bg-[color-mix(in_oklab,var(--color-danger)_88%,var(--color-ink))]',\n        'hovered:border-[color-mix(in_oklab,var(--color-danger)_88%,var(--color-ink))]',\n      ],\n    },\n    size: {\n      sm: 'text-xs px-3 py-1.5 [&_svg]:size-3',\n      md: 'text-[13px] px-4 py-[9px] [&_svg]:size-3',\n      lg: 'text-sm px-[22px] py-3 [&_svg]:size-3.5',\n      // Square dimensions for icon-only buttons. Requires an `aria-label`.\n      'icon-sm': 'size-7 p-0 [&_svg]:size-3.5',\n      'icon-md': 'size-[34px] p-0 [&_svg]:size-4',\n      'icon-lg': 'size-[42px] p-0 [&_svg]:size-[18px]',\n    },\n    // Corner shape. Default is rounded (soft 10px radius — the standard\n    // Proteos button), `pill` is the fully-rounded treatment for a small set\n    // of prominent CTAs. The `link` variant overrides both to a flat underline.\n    shape: {\n      rounded: 'rounded-md',\n      pill: 'rounded-pill',\n    },\n  },\n  compoundVariants: [\n    { variant: 'link', size: 'sm', class: 'px-0.5 py-0' },\n    { variant: 'link', size: 'md', class: 'px-0.5 py-0' },\n    { variant: 'link', size: 'lg', class: 'px-0.5 py-0' },\n    // Link never takes a corner radius — it's an underline, not a box.\n    { variant: 'link', shape: 'rounded', class: 'rounded-none' },\n    { variant: 'link', shape: 'pill', class: 'rounded-none' },\n    // Destructive confirms get the terracotta halo instead of the indigo one.\n    { variant: 'danger', class: 'focus-visible:shadow-[var(--shadow-focus-danger)]' },\n  ],\n  defaultVariants: {\n    variant: 'primary',\n    size: 'md',\n    shape: 'rounded',\n  },\n})\n\nexport type ButtonVariants = VariantProps<typeof buttonStyles>\nexport type ButtonProps = AriaButtonProps & ButtonVariants\n\nexport function Button({ variant, size, shape, className, ...props }: ButtonProps) {\n  return (\n    <AriaButton\n      {...props}\n      className={(renderProps) =>\n        cn(\n          buttonStyles({ variant, size, shape }),\n          typeof className === 'function' ? className(renderProps) : className,\n        )\n      }\n    />\n  )\n}\n","import type { HTMLAttributes } from 'react'\nimport { tv, type VariantProps } from 'tailwind-variants'\n\nimport { cn } from '../../lib/cn'\n\n/* =========================================================================\n   Skeleton — content placeholder for loading states.\n   Purely presentational, so it doesn't wrap a React Aria primitive (RAC has\n   no Skeleton — interactive primitives only). Accessibility lives in props:\n   - decorative skeletons get `aria-hidden` so screen readers ignore them\n   - skeletons that *announce* the loading state should be wrapped in a\n     `role=\"status\"` region by the consumer (e.g. AppLayoutSkeleton).\n   ========================================================================= */\n\nexport const skeletonStyles = tv({\n  base: ['animate-pulse', 'bg-surface-3'],\n  variants: {\n    shape: {\n      rect: 'rounded-md',\n      circle: 'rounded-full',\n      // `text` matches a typical line of body text — width is up to the\n      // consumer; the rounded-sm + height keep proportions sensible.\n      text: 'h-4 w-full rounded-sm',\n    },\n  },\n  defaultVariants: { shape: 'rect' },\n})\n\nexport type SkeletonVariants = VariantProps<typeof skeletonStyles>\nexport type SkeletonProps = HTMLAttributes<HTMLDivElement> & SkeletonVariants\n\nexport function Skeleton({ shape, className, ...props }: SkeletonProps) {\n  return (\n    <div\n      // Decorative by default. Consumers that want screen readers to announce\n      // the loading state should wrap a Skeleton group in `role=\"status\"`\n      // and pass `aria-hidden={false}` here, or just rely on the wrapper.\n      aria-hidden=\"true\"\n      {...props}\n      className={cn(skeletonStyles({ shape }), className)}\n    />\n  )\n}\n"]}

package/dist/{chunk-MWAXK66H.cjs → chunk-NWGG5WFL.cjs}

@@ -10,10 +10,27 @@ var jsxRuntime = require('react/jsx-runtime');
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
+var ctaClasses = [
+  "bg-ink text-surface border-ink",
+  "hovered:bg-accent-ink hovered:border-accent-ink"
+];
+var raisedClasses = [
+  "bg-surface text-ink border-rule shadow-[var(--shadow-rest)]",
+  "hovered:bg-surface-2 hovered:border-rule-strong",
+  "pressed:bg-surface-3 pressed:shadow-none",
+  "focus-visible:shadow-[var(--shadow-focus),var(--shadow-rest)]"
+];
+var mutedClasses = [
+  "bg-surface-3 text-ink-2 border-transparent",
+  "hovered:bg-surface-4 hovered:text-ink",
+  "pressed:bg-[color-mix(in_oklab,var(--color-ink)_8%,var(--color-surface-4))]"
+];
 var buttonStyles = tailwindVariants.tv({
   base: [
     "inline-flex items-center justify-center gap-2 whitespace-nowrap cursor-pointer",
-    "font-mono tracking-[-0.005em] border border-transparent",
+    // Button labels are human copy, not machine fact — Inter 500 (DESIGN.md
+    // typography.body), not the mono reserved for ids, timestamps and badges.
+    "font-sans font-medium tracking-[-0.005em] border border-transparent",
     "transition-[background-color,color,border-color,box-shadow,transform] duration-150",
     "outline-none pressed:translate-y-px",
     "focus-visible:shadow-[var(--shadow-focus)]",
@@ -21,26 +38,31 @@ var buttonStyles = tailwindVariants.tv({
   ],
   variants: {
     variant: {
-      primary: ["bg-ink text-surface border-ink", "hover:bg-accent-ink hover:border-accent-ink"],
-      // Hover uses accent-2 — the token DESIGN.md reserves for "hover on
-      // accent". accent-ink is a text-on-tinted-surface color and flips
-      // light in dark mode, so it can't double as a hover fill here.
-      accent: [
-        "bg-accent text-[#f0efe8] border-accent",
-        "hover:bg-accent-2 hover:border-accent-2"
-      ],
-      secondary: ["bg-transparent text-ink border-ink", "hover:bg-ink hover:text-surface"],
+      cta: ctaClasses,
+      accent: ctaClasses,
+      primary: raisedClasses,
+      secondary: mutedClasses,
       ghost: [
-        "bg-bg text-ink-2 border-rule-strong",
-        "hover:bg-surface-2 hover:text-ink hover:border-ink-4"
+        "bg-transparent text-ink-2 border-transparent",
+        "hovered:bg-surface-3 hovered:text-ink",
+        "pressed:bg-surface-4"
+      ],
+      subtle: [
+        "bg-transparent text-ink-3 border-transparent",
+        "hovered:bg-surface-2 hovered:text-ink",
+        "pressed:bg-surface-3"
       ],
-      // Transparent at rest, paper-fill on hover. The toolbar / sidebar
-      // register — pairs with `size="icon-md"` for top-bar icon buttons.
-      subtle: ["bg-transparent text-ink-3 border-transparent", "hover:bg-surface-2 hover:text-ink"],
       link: [
         "bg-transparent text-ink-2 border-transparent",
         "px-0.5 border-b border-b-ink-4",
-        "hover:text-ink hover:border-b-ink"
+        "hovered:text-ink hovered:border-b-ink"
+      ],
+      // `text-surface`, not white: dark's --color-danger is a light salmon, and
+      // the surface token flips dark with it while white would fail contrast.
+      danger: [
+        "bg-danger text-surface border-danger",
+        "hovered:bg-[color-mix(in_oklab,var(--color-danger)_88%,var(--color-ink))]",
+        "hovered:border-[color-mix(in_oklab,var(--color-danger)_88%,var(--color-ink))]"
       ]
     },
     size: {
@@ -53,8 +75,8 @@ var buttonStyles = tailwindVariants.tv({
       "icon-lg": "size-[42px] p-0 [&_svg]:size-[18px]"
     },
     // Corner shape. Default is rounded (soft 10px radius — the standard
-    // Proteos button), `pill` is the fully-rounded legacy treatment.
-    // The `link` variant overrides both to a flat underline.
+    // Proteos button), `pill` is the fully-rounded treatment for a small set
+    // of prominent CTAs. The `link` variant overrides both to a flat underline.
     shape: {
       rounded: "rounded-md",
       pill: "rounded-pill"
@@ -66,7 +88,9 @@ var buttonStyles = tailwindVariants.tv({
     { variant: "link", size: "lg", class: "px-0.5 py-0" },
     // Link never takes a corner radius — it's an underline, not a box.
     { variant: "link", shape: "rounded", class: "rounded-none" },
-    { variant: "link", shape: "pill", class: "rounded-none" }
+    { variant: "link", shape: "pill", class: "rounded-none" },
+    // Destructive confirms get the terracotta halo instead of the indigo one.
+    { variant: "danger", class: "focus-visible:shadow-[var(--shadow-focus-danger)]" }
   ],
   defaultVariants: {
     variant: "primary",
@@ -115,5 +139,5 @@ exports.Skeleton = Skeleton;
 exports.buttonStyles = buttonStyles;
 exports.cn = cn;
 exports.skeletonStyles = skeletonStyles;
-//# sourceMappingURL=chunk-MWAXK66H.cjs.map
-//# sourceMappingURL=chunk-MWAXK66H.cjs.map
+//# sourceMappingURL=chunk-NWGG5WFL.cjs.map
+//# sourceMappingURL=chunk-NWGG5WFL.cjs.map

package/dist/chunk-NWGG5WFL.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/cn.ts","../src/components/button/button.tsx","../src/components/skeleton/skeleton.tsx"],"names":["twMerge","clsx","tv","jsx","AriaButton"],"mappings":"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","file":"chunk-NWGG5WFL.cjs","sourcesContent":["import { type ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs))\n}\n","import { Button as AriaButton, type ButtonProps as AriaButtonProps } from 'react-aria-components'\nimport { tv, type VariantProps } from 'tailwind-variants'\n\nimport { cn } from '../../lib/cn'\n\n/* =========================================================================\n   Button — emphasis ladder, top to bottom:\n\n     cta        ink fill. The one strong action per view (never two visible).\n     primary    raised white: `surface` fill, `rule-strong` hairline, rest\n                shadow. The everyday button; the default variant.\n     secondary  muted: `surface-3` fill, no border. Cancel / supporting actions.\n     ghost      secondary's chrome, only on hover. Invisible at rest.\n     subtle     borderless text button (toolbars, icon buttons).\n     link       inline underline.\n     danger     solid terracotta for destructive confirms.\n\n   `accent` is a frozen alias of `cta` — variant names are part of the runtime\n   contract for module component bundles, so nothing is ever removed.\n\n   Interaction state comes from React Aria's data attributes (`hovered:`,\n   `pressed:` — see the @custom-variant block in styles.css); `focus-visible:`\n   and `disabled:` stay on the native pseudo-classes because the RAC root IS\n   the focusable <button>. Hover is always a colour step on the surface ramp,\n   never opacity; press is translateY(1px) plus one more ramp step.\n   ========================================================================= */\n\n// Ink fill with the indigo-tinted hover. Kept verbatim from the old primary.\nconst ctaClasses = [\n  'bg-ink text-surface border-ink',\n  'hovered:bg-accent-ink hovered:border-accent-ink',\n]\n\n// Raised white: a lighter inner on the darker page ground. On a white card the\n// hairline + rest shadow carry it. Press sinks one step and drops the shadow.\nconst raisedClasses = [\n  'bg-surface text-ink border-rule shadow-[var(--shadow-rest)]',\n  'hovered:bg-surface-2 hovered:border-rule-strong',\n  'pressed:bg-surface-3 pressed:shadow-none',\n  'focus-visible:shadow-[var(--shadow-focus),var(--shadow-rest)]',\n]\n\n// Muted gray fill, no border. One step quieter than primary.\nconst mutedClasses = [\n  'bg-surface-3 text-ink-2 border-transparent',\n  'hovered:bg-surface-4 hovered:text-ink',\n  'pressed:bg-[color-mix(in_oklab,var(--color-ink)_8%,var(--color-surface-4))]',\n]\n\nexport const buttonStyles = tv({\n  base: [\n    'inline-flex items-center justify-center gap-2 whitespace-nowrap cursor-pointer',\n    // Button labels are human copy, not machine fact — Inter 500 (DESIGN.md\n    // typography.body), not the mono reserved for ids, timestamps and badges.\n    'font-sans font-medium tracking-[-0.005em] border border-transparent',\n    'transition-[background-color,color,border-color,box-shadow,transform] duration-150',\n    'outline-none pressed:translate-y-px',\n    'focus-visible:shadow-[var(--shadow-focus)]',\n    'disabled:opacity-45 disabled:cursor-not-allowed disabled:pointer-events-none',\n  ],\n  variants: {\n    variant: {\n      cta: ctaClasses,\n      accent: ctaClasses,\n      primary: raisedClasses,\n      secondary: mutedClasses,\n      ghost: [\n        'bg-transparent text-ink-2 border-transparent',\n        'hovered:bg-surface-3 hovered:text-ink',\n        'pressed:bg-surface-4',\n      ],\n      subtle: [\n        'bg-transparent text-ink-3 border-transparent',\n        'hovered:bg-surface-2 hovered:text-ink',\n        'pressed:bg-surface-3',\n      ],\n      link: [\n        'bg-transparent text-ink-2 border-transparent',\n        'px-0.5 border-b border-b-ink-4',\n        'hovered:text-ink hovered:border-b-ink',\n      ],\n      // `text-surface`, not white: dark's --color-danger is a light salmon, and\n      // the surface token flips dark with it while white would fail contrast.\n      danger: [\n        'bg-danger text-surface border-danger',\n        'hovered:bg-[color-mix(in_oklab,var(--color-danger)_88%,var(--color-ink))]',\n        'hovered:border-[color-mix(in_oklab,var(--color-danger)_88%,var(--color-ink))]',\n      ],\n    },\n    size: {\n      sm: 'text-xs px-3 py-1.5 [&_svg]:size-3',\n      md: 'text-[13px] px-4 py-[9px] [&_svg]:size-3',\n      lg: 'text-sm px-[22px] py-3 [&_svg]:size-3.5',\n      // Square dimensions for icon-only buttons. Requires an `aria-label`.\n      'icon-sm': 'size-7 p-0 [&_svg]:size-3.5',\n      'icon-md': 'size-[34px] p-0 [&_svg]:size-4',\n      'icon-lg': 'size-[42px] p-0 [&_svg]:size-[18px]',\n    },\n    // Corner shape. Default is rounded (soft 10px radius — the standard\n    // Proteos button), `pill` is the fully-rounded treatment for a small set\n    // of prominent CTAs. The `link` variant overrides both to a flat underline.\n    shape: {\n      rounded: 'rounded-md',\n      pill: 'rounded-pill',\n    },\n  },\n  compoundVariants: [\n    { variant: 'link', size: 'sm', class: 'px-0.5 py-0' },\n    { variant: 'link', size: 'md', class: 'px-0.5 py-0' },\n    { variant: 'link', size: 'lg', class: 'px-0.5 py-0' },\n    // Link never takes a corner radius — it's an underline, not a box.\n    { variant: 'link', shape: 'rounded', class: 'rounded-none' },\n    { variant: 'link', shape: 'pill', class: 'rounded-none' },\n    // Destructive confirms get the terracotta halo instead of the indigo one.\n    { variant: 'danger', class: 'focus-visible:shadow-[var(--shadow-focus-danger)]' },\n  ],\n  defaultVariants: {\n    variant: 'primary',\n    size: 'md',\n    shape: 'rounded',\n  },\n})\n\nexport type ButtonVariants = VariantProps<typeof buttonStyles>\nexport type ButtonProps = AriaButtonProps & ButtonVariants\n\nexport function Button({ variant, size, shape, className, ...props }: ButtonProps) {\n  return (\n    <AriaButton\n      {...props}\n      className={(renderProps) =>\n        cn(\n          buttonStyles({ variant, size, shape }),\n          typeof className === 'function' ? className(renderProps) : className,\n        )\n      }\n    />\n  )\n}\n","import type { HTMLAttributes } from 'react'\nimport { tv, type VariantProps } from 'tailwind-variants'\n\nimport { cn } from '../../lib/cn'\n\n/* =========================================================================\n   Skeleton — content placeholder for loading states.\n   Purely presentational, so it doesn't wrap a React Aria primitive (RAC has\n   no Skeleton — interactive primitives only). Accessibility lives in props:\n   - decorative skeletons get `aria-hidden` so screen readers ignore them\n   - skeletons that *announce* the loading state should be wrapped in a\n     `role=\"status\"` region by the consumer (e.g. AppLayoutSkeleton).\n   ========================================================================= */\n\nexport const skeletonStyles = tv({\n  base: ['animate-pulse', 'bg-surface-3'],\n  variants: {\n    shape: {\n      rect: 'rounded-md',\n      circle: 'rounded-full',\n      // `text` matches a typical line of body text — width is up to the\n      // consumer; the rounded-sm + height keep proportions sensible.\n      text: 'h-4 w-full rounded-sm',\n    },\n  },\n  defaultVariants: { shape: 'rect' },\n})\n\nexport type SkeletonVariants = VariantProps<typeof skeletonStyles>\nexport type SkeletonProps = HTMLAttributes<HTMLDivElement> & SkeletonVariants\n\nexport function Skeleton({ shape, className, ...props }: SkeletonProps) {\n  return (\n    <div\n      // Decorative by default. Consumers that want screen readers to announce\n      // the loading state should wrap a Skeleton group in `role=\"status\"`\n      // and pass `aria-hidden={false}` here, or just rely on the wrapper.\n      aria-hidden=\"true\"\n      {...props}\n      className={cn(skeletonStyles({ shape }), className)}\n    />\n  )\n}\n"]}