@refraction-ui/react 0.20.1 → 0.21.0

package/dist/internal/badge/index.d.cts

@@ -1,6 +1,6 @@
 import { AccessibilityProps } from '../shared/index.cjs';
 
-type BadgeVariant = 'default' | 'primary' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning';
+type BadgeVariant = 'default' | 'primary' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning' | 'tertiary' | 'positive' | 'caution' | 'done';
 type BadgeSize = 'sm' | 'md';
 interface BadgeProps {
     variant?: BadgeVariant;
@@ -17,7 +17,7 @@ declare function getBadgeIcon(variant: BadgeVariant): string | undefined;
 declare function createBadge(props?: BadgeProps): BadgeAPI;
 
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "primary" | "secondary" | "destructive" | "outline" | "success" | "warning" | undefined;
+    variant?: "default" | "primary" | "secondary" | "destructive" | "outline" | "success" | "warning" | "tertiary" | "positive" | "caution" | "done" | undefined;
     size?: "sm" | "md" | undefined;
 } & {
     className?: string;

package/dist/internal/badge/index.d.ts

@@ -1,6 +1,6 @@
 import { AccessibilityProps } from '../shared/index.js';
 
-type BadgeVariant = 'default' | 'primary' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning';
+type BadgeVariant = 'default' | 'primary' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning' | 'tertiary' | 'positive' | 'caution' | 'done';
 type BadgeSize = 'sm' | 'md';
 interface BadgeProps {
     variant?: BadgeVariant;
@@ -17,7 +17,7 @@ declare function getBadgeIcon(variant: BadgeVariant): string | undefined;
 declare function createBadge(props?: BadgeProps): BadgeAPI;
 
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "primary" | "secondary" | "destructive" | "outline" | "success" | "warning" | undefined;
+    variant?: "default" | "primary" | "secondary" | "destructive" | "outline" | "success" | "warning" | "tertiary" | "positive" | "caution" | "done" | undefined;
     size?: "sm" | "md" | undefined;
 } & {
     className?: string;

package/dist/internal/button/index.d.cts

@@ -5,7 +5,7 @@ import { AccessibilityProps, KeyboardHandlerMap, TokenContract } from '../shared
  * muscle-memory (`<Button variant="primary">`) renders as the most-emphasized
  * button instead of falling through to the unstyled base. See issue #201.
  */
-type ButtonVariant = 'default' | 'primary' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
+type ButtonVariant = 'default' | 'primary' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link' | 'soft' | 'tertiary';
 /** Variants that map to the same visual style as `default`. */
 declare const BUTTON_VARIANT_ALIASES: Partial<Record<ButtonVariant, ButtonVariant>>;
 /** Resolve an alias to its canonical variant. Pass-through for unknown/undefined. */
@@ -34,7 +34,7 @@ declare function getButtonType(props: ButtonProps): string;
 
 declare const buttonTokens: TokenContract;
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "primary" | "destructive" | "outline" | "secondary" | "ghost" | "link" | undefined;
+    variant?: "default" | "primary" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "soft" | "tertiary" | undefined;
     size?: "default" | "xs" | "sm" | "lg" | "icon" | undefined;
 } & {
     className?: string;

package/dist/internal/button/index.d.ts

@@ -5,7 +5,7 @@ import { AccessibilityProps, KeyboardHandlerMap, TokenContract } from '../shared
  * muscle-memory (`<Button variant="primary">`) renders as the most-emphasized
  * button instead of falling through to the unstyled base. See issue #201.
  */
-type ButtonVariant = 'default' | 'primary' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
+type ButtonVariant = 'default' | 'primary' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link' | 'soft' | 'tertiary';
 /** Variants that map to the same visual style as `default`. */
 declare const BUTTON_VARIANT_ALIASES: Partial<Record<ButtonVariant, ButtonVariant>>;
 /** Resolve an alias to its canonical variant. Pass-through for unknown/undefined. */
@@ -34,7 +34,7 @@ declare function getButtonType(props: ButtonProps): string;
 
 declare const buttonTokens: TokenContract;
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "primary" | "destructive" | "outline" | "secondary" | "ghost" | "link" | undefined;
+    variant?: "default" | "primary" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "soft" | "tertiary" | undefined;
     size?: "default" | "xs" | "sm" | "lg" | "icon" | undefined;
 } & {
     className?: string;

package/dist/internal/card/index.d.cts

@@ -1,5 +1,12 @@
 import { AccessibilityProps, TokenContract } from '../shared/index.cjs';
 
+/**
+ * Visual tone of a card (issue #485).
+ * - `default` — the standard surface (activates the `--rfr-card-*` contract).
+ * - `subtle` — a lower-emphasis container on the subtle surface token.
+ * - `tertiary` — a tinted second-brand-accent card.
+ */
+type CardVariant = 'default' | 'subtle' | 'tertiary';
 interface CardProps {
     /** Optional accessible role override */
     role?: string;
@@ -29,7 +36,8 @@ declare function createCardFooter(): {
 
 declare const cardTokens: TokenContract;
 declare const cardVariants: (props?: ({
-    padding?: "none" | "default" | "compact" | undefined;
+    variant?: "default" | "subtle" | "tertiary" | undefined;
+    padding?: "default" | "none" | "compact" | undefined;
 } & {
     className?: string;
 }) | undefined) => string;
@@ -59,4 +67,4 @@ declare const cardFooterVariants: (props?: ({
     className?: string;
 }) | undefined) => string;
 
-export { type CardAPI, type CardProps, cardContentVariants, cardDescriptionVariants, cardFooterVariants, cardHeaderVariants, cardTitleVariants, cardTokens, cardVariants, createCard, createCardContent, createCardDescription, createCardFooter, createCardHeader, createCardTitle };
+export { type CardAPI, type CardProps, type CardVariant, cardContentVariants, cardDescriptionVariants, cardFooterVariants, cardHeaderVariants, cardTitleVariants, cardTokens, cardVariants, createCard, createCardContent, createCardDescription, createCardFooter, createCardHeader, createCardTitle };

package/dist/internal/card/index.d.ts

@@ -1,5 +1,12 @@
 import { AccessibilityProps, TokenContract } from '../shared/index.js';
 
+/**
+ * Visual tone of a card (issue #485).
+ * - `default` — the standard surface (activates the `--rfr-card-*` contract).
+ * - `subtle` — a lower-emphasis container on the subtle surface token.
+ * - `tertiary` — a tinted second-brand-accent card.
+ */
+type CardVariant = 'default' | 'subtle' | 'tertiary';
 interface CardProps {
     /** Optional accessible role override */
     role?: string;
@@ -29,7 +36,8 @@ declare function createCardFooter(): {
 
 declare const cardTokens: TokenContract;
 declare const cardVariants: (props?: ({
-    padding?: "none" | "default" | "compact" | undefined;
+    variant?: "default" | "subtle" | "tertiary" | undefined;
+    padding?: "default" | "none" | "compact" | undefined;
 } & {
     className?: string;
 }) | undefined) => string;
@@ -59,4 +67,4 @@ declare const cardFooterVariants: (props?: ({
     className?: string;
 }) | undefined) => string;
 
-export { type CardAPI, type CardProps, cardContentVariants, cardDescriptionVariants, cardFooterVariants, cardHeaderVariants, cardTitleVariants, cardTokens, cardVariants, createCard, createCardContent, createCardDescription, createCardFooter, createCardHeader, createCardTitle };
+export { type CardAPI, type CardProps, type CardVariant, cardContentVariants, cardDescriptionVariants, cardFooterVariants, cardHeaderVariants, cardTitleVariants, cardTokens, cardVariants, createCard, createCardContent, createCardDescription, createCardFooter, createCardHeader, createCardTitle };

package/dist/internal/react-card/index.d.cts

@@ -1,7 +1,10 @@
 import * as React from 'react';
+import { CardVariant } from '../card/index.cjs';
 export { CardAPI, CardProps, cardContentVariants, cardDescriptionVariants, cardFooterVariants, cardHeaderVariants, cardTitleVariants, cardTokens, cardVariants } from '../card/index.cjs';
 
 interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Visual tone of the card. Defaults to `'default'` (issue #485). */
+    variant?: CardVariant;
     /** Merge the card's classes/props onto the single child element instead of
      * rendering a `<div>` (Radix-style `asChild`) — e.g.
      * `<Card asChild><a href="/x">…</a></Card>` for a clickable card. Expects

package/dist/internal/react-card/index.d.ts

@@ -1,7 +1,10 @@
 import * as React from 'react';
+import { CardVariant } from '../card/index.js';
 export { CardAPI, CardProps, cardContentVariants, cardDescriptionVariants, cardFooterVariants, cardHeaderVariants, cardTitleVariants, cardTokens, cardVariants } from '../card/index.js';
 
 interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Visual tone of the card. Defaults to `'default'` (issue #485). */
+    variant?: CardVariant;
     /** Merge the card's classes/props onto the single child element instead of
      * rendering a `<div>` (Radix-style `asChild`) — e.g.
      * `<Card asChild><a href="/x">…</a></Card>` for a clickable card. Expects

package/dist/internal/react-separator/index.d.cts

@@ -1,9 +1,14 @@
 import * as React from 'react';
-import { SeparatorOrientation } from '../separator/index.cjs';
+import { SeparatorOrientation, SeparatorTone } from '../separator/index.cjs';
 
 interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Orientation of the separator. Defaults to `'horizontal'`. */
     orientation?: SeparatorOrientation;
+    /**
+     * Line tone. `'default'` uses the standard border token; `'subtle'` uses the
+     * hairline `border-subtle` token for a lighter rule (issue #485).
+     */
+    tone?: SeparatorTone;
     /**
      * Optional centered label. Only meaningful for horizontal separators —
      * renders a line on each side of the label (a "labeled divider").

package/dist/internal/react-separator/index.d.ts

@@ -1,9 +1,14 @@
 import * as React from 'react';
-import { SeparatorOrientation } from '../separator/index.js';
+import { SeparatorOrientation, SeparatorTone } from '../separator/index.js';
 
 interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Orientation of the separator. Defaults to `'horizontal'`. */
     orientation?: SeparatorOrientation;
+    /**
+     * Line tone. `'default'` uses the standard border token; `'subtle'` uses the
+     * hairline `border-subtle` token for a lighter rule (issue #485).
+     */
+    tone?: SeparatorTone;
     /**
      * Optional centered label. Only meaningful for horizontal separators —
      * renders a line on each side of the label (a "labeled divider").

package/dist/internal/separator/index.d.cts

@@ -43,13 +43,18 @@ declare function createSeparator(props?: SeparatorProps): SeparatorAPI;
  */
 declare const separatorVariants: (props?: ({
     orientation?: "horizontal" | "vertical" | undefined;
+    tone?: "default" | "subtle" | undefined;
     labeled?: "true" | "false" | undefined;
 } & {
     className?: string;
 }) | undefined) => string;
+/** Line tone for the separator rule and labeled-divider flanks. */
+type SeparatorTone = 'default' | 'subtle';
 /** Class for each flanking line in the labeled-divider variant. */
 declare const separatorLineClass = "h-px flex-1 bg-border";
+/** Hairline variant of {@link separatorLineClass} (issue #485). */
+declare const separatorSubtleLineClass = "h-px flex-1 bg-border-subtle";
 /** Class for the centered label in the labeled-divider variant. */
 declare const separatorLabelClass = "px-3 text-xs uppercase tracking-wide text-muted-foreground";
 
-export { type SeparatorAPI, type SeparatorOrientation, type SeparatorProps, createSeparator, separatorLabelClass, separatorLineClass, separatorVariants };
+export { type SeparatorAPI, type SeparatorOrientation, type SeparatorProps, type SeparatorTone, createSeparator, separatorLabelClass, separatorLineClass, separatorSubtleLineClass, separatorVariants };

package/dist/internal/separator/index.d.ts

@@ -43,13 +43,18 @@ declare function createSeparator(props?: SeparatorProps): SeparatorAPI;
  */
 declare const separatorVariants: (props?: ({
     orientation?: "horizontal" | "vertical" | undefined;
+    tone?: "default" | "subtle" | undefined;
     labeled?: "true" | "false" | undefined;
 } & {
     className?: string;
 }) | undefined) => string;
+/** Line tone for the separator rule and labeled-divider flanks. */
+type SeparatorTone = 'default' | 'subtle';
 /** Class for each flanking line in the labeled-divider variant. */
 declare const separatorLineClass = "h-px flex-1 bg-border";
+/** Hairline variant of {@link separatorLineClass} (issue #485). */
+declare const separatorSubtleLineClass = "h-px flex-1 bg-border-subtle";
 /** Class for the centered label in the labeled-divider variant. */
 declare const separatorLabelClass = "px-3 text-xs uppercase tracking-wide text-muted-foreground";
 
-export { type SeparatorAPI, type SeparatorOrientation, type SeparatorProps, createSeparator, separatorLabelClass, separatorLineClass, separatorVariants };
+export { type SeparatorAPI, type SeparatorOrientation, type SeparatorProps, type SeparatorTone, createSeparator, separatorLabelClass, separatorLineClass, separatorSubtleLineClass, separatorVariants };

package/dist/react-badge.js

@@ -10,7 +10,14 @@ import {
 import * as React from "react";
 
 // ../badge/dist/index.js
-var statusVariants = ["success", "warning", "destructive"];
+var statusVariants = [
+  "success",
+  "warning",
+  "destructive",
+  "positive",
+  "caution",
+  "done"
+];
 function createBadge(props = {}) {
   const { variant = "default" } = props;
   const ariaProps = {};
@@ -34,7 +41,12 @@ var badgeVariants = cva({
       destructive: "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80 font-semibold",
       outline: "text-foreground",
       success: "border-transparent bg-success text-success-foreground shadow hover:bg-success/80 font-semibold",
-      warning: "border-transparent bg-warning text-warning-foreground shadow hover:bg-warning/80 font-semibold"
+      warning: "border-transparent bg-warning text-warning-foreground shadow hover:bg-warning/80 font-semibold",
+      // Second brand accent + extended status roles (issue #485).
+      tertiary: "border-transparent bg-tertiary text-tertiary-foreground shadow hover:bg-tertiary/80 font-semibold",
+      positive: "border-transparent bg-positive text-positive-foreground shadow hover:bg-positive/80 font-semibold",
+      caution: "border-transparent bg-caution text-caution-foreground shadow hover:bg-caution/80 font-semibold",
+      done: "border-transparent bg-done text-info-foreground shadow hover:bg-done/80 font-semibold"
     },
     size: {
       sm: "px-2 py-0 text-[10px]",

package/dist/react-badge.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../badge/src/badge.ts", "../../badge/src/badge.styles.ts", "../../react-badge/src/badge.tsx"],
-  "sourcesContent": ["import type { AccessibilityProps } from '@refraction-ui/shared'\n\nexport type BadgeVariant = 'default' | 'primary' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning'\nexport type BadgeSize = 'sm' | 'md'\n\nexport interface BadgeProps {\n  variant?: BadgeVariant\n  size?: BadgeSize\n}\n\nexport interface BadgeAPI {\n  /** ARIA attributes to spread on the element */\n  ariaProps: Partial<AccessibilityProps>\n  /** Data attributes for CSS styling hooks */\n  dataAttributes: Record<string, string>\n}\n\nconst statusVariants: BadgeVariant[] = ['success', 'warning', 'destructive']\n\n/** Icon name for status badge variants — non-color indicator for colorblind safety */\nconst BADGE_ICONS: Partial<Record<BadgeVariant, string>> = {\n  success: 'check',\n  warning: 'alert',\n  destructive: 'x',\n}\n\n/** Get the icon name for a badge variant (undefined for non-status variants) */\nexport function getBadgeIcon(variant: BadgeVariant): string | undefined {\n  return BADGE_ICONS[variant]\n}\n\nexport function createBadge(props: BadgeProps = {}): BadgeAPI {\n  const { variant = 'default' } = props\n\n  const ariaProps: Partial<AccessibilityProps> = {}\n\n  if (statusVariants.includes(variant)) {\n    ariaProps.role = 'status'\n  }\n\n  const dataAttributes: Record<string, string> = {}\n  dataAttributes['data-variant'] = variant\n\n  return {\n    ariaProps,\n    dataAttributes,\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\n\nexport const badgeVariants = cva({\n  base: 'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',\n  variants: {\n    variant: {\n      default: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',\n      primary: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',\n      secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',\n      destructive: 'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80 font-semibold',\n      outline: 'text-foreground',\n      success: 'border-transparent bg-success text-success-foreground shadow hover:bg-success/80 font-semibold',\n      warning: 'border-transparent bg-warning text-warning-foreground shadow hover:bg-warning/80 font-semibold',\n    },\n    size: {\n      sm: 'px-2 py-0 text-[10px]',\n      md: 'px-2.5 py-0.5 text-xs',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n    size: 'md',\n  },\n})\n", "import * as React from 'react'\nimport {\n  createBadge,\n  badgeVariants,\n  type BadgeVariant,\n  type BadgeSize,\n} from '@refraction-ui/badge'\nimport { cn } from '@refraction-ui/shared'\nimport { Slot } from '@refraction-ui/react-slot'\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {\n  variant?: BadgeVariant\n  size?: BadgeSize\n  /** Merge the badge's classes/props onto the single child element instead of\n   * rendering a `<div>` (Radix-style `asChild`) — e.g.\n   * `<Badge asChild><a href=\"/x\">…</a></Badge>` for a linked badge. Expects\n   * exactly one React element child. */\n  asChild?: boolean\n}\n\n/**\n * Badge component — renders a styled badge with variant and size support.\n *\n * Uses the headless @refraction-ui/badge core for state and ARIA attributes.\n * Styling via Tailwind utility classes (no external CSS-in-JS).\n */\nexport const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(\n  function Badge({ variant, size, asChild = false, className, children, ...props }, ref) {\n    const api = createBadge({ variant, size })\n    const classes = cn(badgeVariants({ variant, size }), className)\n\n    if (asChild) {\n      return (\n        <Slot\n          ref={ref as React.Ref<HTMLElement>}\n          className={classes}\n          {...api.ariaProps}\n          {...api.dataAttributes}\n          {...props}\n        >\n          {children}\n        </Slot>\n      )\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={classes}\n        {...api.ariaProps}\n        {...api.dataAttributes}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  },\n)\n"],
-  "mappings": ";;;;;;;;;;;;AAiBA,IAAM,iBAAiC,CAAC,WAAW,WAAW,aAAa;AAcpE,SAAS,YAAY,QAAoB,CAAA,GAAc;AAC5D,QAAM,EAAE,UAAU,UAAA,IAAc;AAEhC,QAAM,YAAyC,CAAA;AAE/C,MAAI,eAAe,SAAS,OAAO,GAAG;AACpC,cAAU,OAAO;EACnB;AAEA,QAAM,iBAAyC,CAAA;AAC/C,iBAAe,cAAc,IAAI;AAEjC,SAAO;IACL;IACA;EAAA;AAEJ;AC7CO,IAAM,gBAAgB,IAAI;EAC/B,MAAM;EACN,UAAU;IACR,SAAS;MACP,SAAS;MACT,SAAS;MACT,WAAW;MACX,aAAa;MACb,SAAS;MACT,SAAS;MACT,SAAS;IAAA;IAEX,MAAM;MACJ,IAAI;MACJ,IAAI;IAAA;EACN;EAEF,iBAAiB;IACf,SAAS;IACT,MAAM;EAAA;AAEV,CAAC;;;;ACGM,IAAM,QAAc;EACzB,SAASA,OAAM,EAAE,SAAS,MAAM,UAAU,OAAO,WAAW,UAAU,GAAG,MAAA,GAAS,KAAK;AACrF,UAAM,MAAM,YAAY,EAAE,SAAS,KAAA,CAAM;AACzC,UAAM,UAAU,GAAG,cAAc,EAAE,SAAS,KAAA,CAAM,GAAG,SAAS;AAE9D,QAAI,SAAS;AACX,aACE;QAAC;QAAA;UACC;UACA,WAAW;UACV,GAAG,IAAI;UACP,GAAG,IAAI;UACP,GAAG;UAEH;QAAA;MAAA;IAGP;AAEA,WACE;MAAC;MAAA;QACC;QACA,WAAW;QACV,GAAG,IAAI;QACP,GAAG,IAAI;QACP,GAAG;QAEH;MAAA;IAAA;EAGP;AACF;",
+  "sourcesContent": ["import type { AccessibilityProps } from '@refraction-ui/shared'\n\nexport type BadgeVariant =\n  | 'default'\n  | 'primary'\n  | 'secondary'\n  | 'destructive'\n  | 'outline'\n  | 'success'\n  | 'warning'\n  // Issue #485 — second brand accent + extended status roles.\n  | 'tertiary'\n  | 'positive'\n  | 'caution'\n  | 'done'\nexport type BadgeSize = 'sm' | 'md'\n\nexport interface BadgeProps {\n  variant?: BadgeVariant\n  size?: BadgeSize\n}\n\nexport interface BadgeAPI {\n  /** ARIA attributes to spread on the element */\n  ariaProps: Partial<AccessibilityProps>\n  /** Data attributes for CSS styling hooks */\n  dataAttributes: Record<string, string>\n}\n\nconst statusVariants: BadgeVariant[] = [\n  'success',\n  'warning',\n  'destructive',\n  'positive',\n  'caution',\n  'done',\n]\n\n/** Icon name for status badge variants — non-color indicator for colorblind safety */\nconst BADGE_ICONS: Partial<Record<BadgeVariant, string>> = {\n  success: 'check',\n  warning: 'alert',\n  destructive: 'x',\n  positive: 'check',\n  caution: 'alert',\n  done: 'check',\n}\n\n/** Get the icon name for a badge variant (undefined for non-status variants) */\nexport function getBadgeIcon(variant: BadgeVariant): string | undefined {\n  return BADGE_ICONS[variant]\n}\n\nexport function createBadge(props: BadgeProps = {}): BadgeAPI {\n  const { variant = 'default' } = props\n\n  const ariaProps: Partial<AccessibilityProps> = {}\n\n  if (statusVariants.includes(variant)) {\n    ariaProps.role = 'status'\n  }\n\n  const dataAttributes: Record<string, string> = {}\n  dataAttributes['data-variant'] = variant\n\n  return {\n    ariaProps,\n    dataAttributes,\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\n\nexport const badgeVariants = cva({\n  base: 'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',\n  variants: {\n    variant: {\n      default: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',\n      primary: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',\n      secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',\n      destructive: 'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80 font-semibold',\n      outline: 'text-foreground',\n      success: 'border-transparent bg-success text-success-foreground shadow hover:bg-success/80 font-semibold',\n      warning: 'border-transparent bg-warning text-warning-foreground shadow hover:bg-warning/80 font-semibold',\n      // Second brand accent + extended status roles (issue #485).\n      tertiary: 'border-transparent bg-tertiary text-tertiary-foreground shadow hover:bg-tertiary/80 font-semibold',\n      positive: 'border-transparent bg-positive text-positive-foreground shadow hover:bg-positive/80 font-semibold',\n      caution: 'border-transparent bg-caution text-caution-foreground shadow hover:bg-caution/80 font-semibold',\n      done: 'border-transparent bg-done text-info-foreground shadow hover:bg-done/80 font-semibold',\n    },\n    size: {\n      sm: 'px-2 py-0 text-[10px]',\n      md: 'px-2.5 py-0.5 text-xs',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n    size: 'md',\n  },\n})\n", "import * as React from 'react'\nimport {\n  createBadge,\n  badgeVariants,\n  type BadgeVariant,\n  type BadgeSize,\n} from '@refraction-ui/badge'\nimport { cn } from '@refraction-ui/shared'\nimport { Slot } from '@refraction-ui/react-slot'\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {\n  variant?: BadgeVariant\n  size?: BadgeSize\n  /** Merge the badge's classes/props onto the single child element instead of\n   * rendering a `<div>` (Radix-style `asChild`) — e.g.\n   * `<Badge asChild><a href=\"/x\">…</a></Badge>` for a linked badge. Expects\n   * exactly one React element child. */\n  asChild?: boolean\n}\n\n/**\n * Badge component — renders a styled badge with variant and size support.\n *\n * Uses the headless @refraction-ui/badge core for state and ARIA attributes.\n * Styling via Tailwind utility classes (no external CSS-in-JS).\n */\nexport const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(\n  function Badge({ variant, size, asChild = false, className, children, ...props }, ref) {\n    const api = createBadge({ variant, size })\n    const classes = cn(badgeVariants({ variant, size }), className)\n\n    if (asChild) {\n      return (\n        <Slot\n          ref={ref as React.Ref<HTMLElement>}\n          className={classes}\n          {...api.ariaProps}\n          {...api.dataAttributes}\n          {...props}\n        >\n          {children}\n        </Slot>\n      )\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={classes}\n        {...api.ariaProps}\n        {...api.dataAttributes}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  },\n)\n"],
+  "mappings": ";;;;;;;;;;;;AA6BA,IAAM,iBAAiC;EACrC;EACA;EACA;EACA;EACA;EACA;AACF;AAiBO,SAAS,YAAY,QAAoB,CAAA,GAAc;AAC5D,QAAM,EAAE,UAAU,UAAA,IAAc;AAEhC,QAAM,YAAyC,CAAA;AAE/C,MAAI,eAAe,SAAS,OAAO,GAAG;AACpC,cAAU,OAAO;EACnB;AAEA,QAAM,iBAAyC,CAAA;AAC/C,iBAAe,cAAc,IAAI;AAEjC,SAAO;IACL;IACA;EAAA;AAEJ;ACnEO,IAAM,gBAAgB,IAAI;EAC/B,MAAM;EACN,UAAU;IACR,SAAS;MACP,SAAS;MACT,SAAS;MACT,WAAW;MACX,aAAa;MACb,SAAS;MACT,SAAS;MACT,SAAS;;MAET,UAAU;MACV,UAAU;MACV,SAAS;MACT,MAAM;IAAA;IAER,MAAM;MACJ,IAAI;MACJ,IAAI;IAAA;EACN;EAEF,iBAAiB;IACf,SAAS;IACT,MAAM;EAAA;AAEV,CAAC;;;;ACFM,IAAM,QAAc;EACzB,SAASA,OAAM,EAAE,SAAS,MAAM,UAAU,OAAO,WAAW,UAAU,GAAG,MAAA,GAAS,KAAK;AACrF,UAAM,MAAM,YAAY,EAAE,SAAS,KAAA,CAAM;AACzC,UAAM,UAAU,GAAG,cAAc,EAAE,SAAS,KAAA,CAAM,GAAG,SAAS;AAE9D,QAAI,SAAS;AACX,aACE;QAAC;QAAA;UACC;UACA,WAAW;UACV,GAAG,IAAI;UACP,GAAG,IAAI;UACP,GAAG;UAEH;QAAA;MAAA;IAGP;AAEA,WACE;MAAC;MAAA;QACC;QACA,WAAW;QACV,GAAG,IAAI;QACP,GAAG,IAAI;QACP,GAAG;QAEH;MAAA;IAAA;EAGP;AACF;",
   "names": ["Badge"]
 }

package/dist/react-browser-chrome-mock.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../browser-chrome-mock/src/browser-chrome-mock.ts", "../../browser-chrome-mock/src/browser-chrome-mock.styles.ts", "../../react-browser-chrome-mock/src/browser-chrome-mock.tsx"],
-  "sourcesContent": ["/** Recording or live stream status for the browser chrome mock. */\nexport type BrowserChromeStatus = 'live' | 'rec'\n\nexport interface BrowserChromeMockProps {\n  /** URL to display in the address bar. */\n  url: string\n  /** Optional status badge shown in the chrome bar. */\n  status?: BrowserChromeStatus\n}\n\nexport interface BrowserChromeMockAPI {\n  /** ARIA attributes to spread on the group element. */\n  ariaProps: { role: 'group'; 'aria-label': string }\n  /** Data attributes for styling hooks. */\n  dataAttributes: Record<string, string>\n}\n\n/** Split a URL into bold domain and normal path segments. */\nexport function splitUrl(url: string): { domain: string; path: string } {\n  const slashIndex = url.indexOf('/')\n  if (slashIndex === -1) {\n    return { domain: url, path: '' }\n  }\n  return {\n    domain: url.slice(0, slashIndex),\n    path: url.slice(slashIndex),\n  }\n}\n\n/**\n * Build the framework-agnostic props for a BrowserChromeMock.\n *\n * Returns a `role=\"group\"` aria label plus optional `data-status` so adapters\n * can hook CSS without duplicating logic.\n */\nexport function createBrowserChromeMock(\n  props: Pick<BrowserChromeMockProps, 'status'> = {},\n): BrowserChromeMockAPI {\n  const { status } = props\n\n  const ariaProps = {\n    role: 'group' as const,\n    'aria-label': 'Browser preview',\n  }\n\n  const dataAttributes: Record<string, string> = {}\n  if (status !== undefined) {\n    dataAttributes['data-status'] = status\n  }\n\n  return { ariaProps, dataAttributes }\n}\n", "import { cva } from '@refraction-ui/shared'\n\n/** Outer frame wrapping the chrome bar and content. */\nexport const browserChromeMockVariants = cva({\n  base: 'rounded-xl border border-border overflow-hidden bg-card',\n  variants: {},\n  defaultVariants: {},\n})\n\n/** The chrome toolbar row containing dots, URL bar, and optional badge. */\nexport const chromeBarClass =\n  'flex items-center gap-2 bg-muted/40 border-b border-border px-3 py-2'\n\n/** A single traffic-light dot. */\nexport const trafficDotClass = 'size-2.5 rounded-full border border-border'\n\n/** Centered URL bar. */\nexport const urlBarClass = 'flex-1 text-center font-mono text-[11px] text-muted-foreground'\n\n/** Bold domain segment inside the URL bar. */\nexport const urlDomainClass = 'font-semibold text-foreground'\n\n/**\n * Status badge shown in the chrome bar.\n *\n * live  → emerald tint (approved exception to semantic tokens)\n * rec   → destructive tint with a pulsing dot\n */\nexport const statusBadgeVariants = cva({\n  base: 'inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide',\n  variants: {\n    status: {\n      live: 'text-emerald-500 bg-emerald-500/10',\n      rec: 'text-destructive bg-destructive/10',\n    },\n  },\n  defaultVariants: {\n    status: 'live',\n  },\n})\n\n/** Inner content area that receives slotted/children content. */\nexport const contentAreaClass = 'p-0'\n", "import * as React from 'react'\nimport {\n  createBrowserChromeMock,\n  splitUrl,\n  browserChromeMockVariants,\n  chromeBarClass,\n  trafficDotClass,\n  urlBarClass,\n  urlDomainClass,\n  statusBadgeVariants,\n  contentAreaClass,\n  type BrowserChromeStatus,\n} from '@refraction-ui/browser-chrome-mock'\nimport { cn } from '@refraction-ui/shared'\n\nexport type { BrowserChromeStatus }\n\nexport interface BrowserChromeMockProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'content'> {\n  /** URL to display in the address bar. Bold domain + normal path. */\n  url: string\n  /** Optional status badge shown in the chrome bar. */\n  status?: BrowserChromeStatus\n}\n\n/** Three traffic-light dots rendered in the chrome bar. */\nconst TRAFFIC_DOTS = ['bg-red-400', 'bg-yellow-400', 'bg-green-400'] as const\n\n/**\n * BrowserChromeMock — a decorative browser window frame.\n *\n * Renders a mock browser chrome with traffic-light dots, a monospace URL bar\n * (bold domain + normal path), an optional live/rec status badge, and a\n * content area for arbitrary children. Logic and styles come from the headless\n * `@refraction-ui/browser-chrome-mock` core.\n */\nexport const BrowserChromeMock = React.forwardRef<\n  HTMLDivElement,\n  BrowserChromeMockProps\n>(function BrowserChromeMock({ url, status, className, children, ...props }, ref) {\n  const { ariaProps, dataAttributes } = createBrowserChromeMock({ status })\n  const { domain, path } = splitUrl(url)\n\n  return (\n    <div\n      ref={ref}\n      className={cn(browserChromeMockVariants(), className)}\n      {...ariaProps}\n      {...dataAttributes}\n      {...props}\n    >\n      {/* Chrome toolbar */}\n      <div className={chromeBarClass}>\n        {/* Traffic-light dots */}\n        <div className=\"flex items-center gap-1.5 shrink-0\">\n          {TRAFFIC_DOTS.map((color) => (\n            <span key={color} className={cn(trafficDotClass, color)} />\n          ))}\n        </div>\n\n        {/* URL bar */}\n        <div className={urlBarClass}>\n          <span className={urlDomainClass}>{domain}</span>\n          {path && <span>{path}</span>}\n        </div>\n\n        {/* Status badge */}\n        {status && (\n          <div className={statusBadgeVariants({ status })}>\n            {status === 'rec' && (\n              <span className=\"size-1.5 rounded-full bg-destructive animate-pulse\" />\n            )}\n            {status}\n          </div>\n        )}\n      </div>\n\n      {/* Content area */}\n      <div className={contentAreaClass}>{children}</div>\n    </div>\n  )\n})\n"],
-  "mappings": ";;;;;;;;;AAkBO,SAAS,SAAS,KAA+C;AACtE,QAAM,aAAa,IAAI,QAAQ,GAAG;AAClC,MAAI,eAAe,IAAI;AACrB,WAAO,EAAE,QAAQ,KAAK,MAAM,GAAA;EAC9B;AACA,SAAO;IACL,QAAQ,IAAI,MAAM,GAAG,UAAU;IAC/B,MAAM,IAAI,MAAM,UAAU;EAAA;AAE9B;AAQO,SAAS,wBACd,QAAgD,CAAA,GAC1B;AACtB,QAAM,EAAE,OAAA,IAAW;AAEnB,QAAM,YAAY;IAChB,MAAM;IACN,cAAc;EAAA;AAGhB,QAAM,iBAAyC,CAAA;AAC/C,MAAI,WAAW,QAAW;AACxB,mBAAe,aAAa,IAAI;EAClC;AAEA,SAAO,EAAE,WAAW,eAAA;AACtB;AChDO,IAAM,4BAA4B,IAAI;EAC3C,MAAM;EACN,UAAU,CAAA;EACV,iBAAiB,CAAA;AACnB,CAAC;AAGM,IAAM,iBACX;AAGK,IAAM,kBAAkB;AAGxB,IAAM,cAAc;AAGpB,IAAM,iBAAiB;AAQvB,IAAM,sBAAsB,IAAI;EACrC,MAAM;EACN,UAAU;IACR,QAAQ;MACN,MAAM;MACN,KAAK;IAAA;EACP;EAEF,iBAAiB;IACf,QAAQ;EAAA;AAEZ,CAAC;AAGM,IAAM,mBAAmB;;;;AChBhC,IAAM,eAAe,CAAC,cAAc,iBAAiB,cAAc;AAU5D,IAAM,oBAA0B,iBAGrC,SAASA,mBAAkB,EAAE,KAAK,QAAQ,WAAW,UAAU,GAAG,MAAA,GAAS,KAAK;AAChF,QAAM,EAAE,WAAW,eAAA,IAAmB,wBAAwB,EAAE,OAAA,CAAQ;AACxE,QAAM,EAAE,QAAQ,KAAA,IAAS,SAAS,GAAG;AAErC,SACE;IAAC;IAAA;MACC;MACA,WAAW,GAAG,0BAAA,GAA6B,SAAS;MACnD,GAAG;MACH,GAAG;MACH,GAAG;MAGJ,UAAA;QAAA,qBAAC,OAAA,EAAI,WAAW,gBAEd,UAAA;UAAA,oBAAC,OAAA,EAAI,WAAU,sCACZ,UAAA,aAAa,IAAI,CAAC,UACjB,oBAAC,QAAA,EAAiB,WAAW,GAAG,iBAAiB,KAAK,EAAA,GAA3C,KAA8C,CAC1D,EAAA,CACH;UAGA,qBAAC,OAAA,EAAI,WAAW,aACd,UAAA;YAAA,oBAAC,QAAA,EAAK,WAAW,gBAAiB,UAAA,OAAA,CAAO;YACxC,QAAQ,oBAAC,QAAA,EAAM,UAAA,KAAA,CAAK;UAAA,EAAA,CACvB;UAGC,UAAA,qBACE,OAAA,EAAI,WAAW,oBAAoB,EAAE,OAAA,CAAQ,GAC3C,UAAA;YAAA,WAAW,SACV,oBAAC,QAAA,EAAK,WAAU,qDAAA,CAAqD;YAEtE;UAAA,EAAA,CACH;QAAA,EAAA,CAEJ;QAGA,oBAAC,OAAA,EAAI,WAAW,kBAAmB,SAAA,CAAS;MAAA;IAAA;EAAA;AAGlD,CAAC;",
+  "sourcesContent": ["/** Recording or live stream status for the browser chrome mock. */\nexport type BrowserChromeStatus = 'live' | 'rec'\n\nexport interface BrowserChromeMockProps {\n  /** URL to display in the address bar. */\n  url: string\n  /** Optional status badge shown in the chrome bar. */\n  status?: BrowserChromeStatus\n}\n\nexport interface BrowserChromeMockAPI {\n  /** ARIA attributes to spread on the group element. */\n  ariaProps: { role: 'group'; 'aria-label': string }\n  /** Data attributes for styling hooks. */\n  dataAttributes: Record<string, string>\n}\n\n/** Split a URL into bold domain and normal path segments. */\nexport function splitUrl(url: string): { domain: string; path: string } {\n  const slashIndex = url.indexOf('/')\n  if (slashIndex === -1) {\n    return { domain: url, path: '' }\n  }\n  return {\n    domain: url.slice(0, slashIndex),\n    path: url.slice(slashIndex),\n  }\n}\n\n/**\n * Build the framework-agnostic props for a BrowserChromeMock.\n *\n * Returns a `role=\"group\"` aria label plus optional `data-status` so adapters\n * can hook CSS without duplicating logic.\n */\nexport function createBrowserChromeMock(\n  props: Pick<BrowserChromeMockProps, 'status'> = {},\n): BrowserChromeMockAPI {\n  const { status } = props\n\n  const ariaProps = {\n    role: 'group' as const,\n    'aria-label': 'Browser preview',\n  }\n\n  const dataAttributes: Record<string, string> = {}\n  if (status !== undefined) {\n    dataAttributes['data-status'] = status\n  }\n\n  return { ariaProps, dataAttributes }\n}\n", "import { cva } from '@refraction-ui/shared'\n\n/** Outer frame wrapping the chrome bar and content. */\nexport const browserChromeMockVariants = cva({\n  base: 'rounded-xl border border-border overflow-hidden bg-card',\n  variants: {},\n  defaultVariants: {},\n})\n\n/** The chrome toolbar row containing dots, URL bar, and optional badge. */\nexport const chromeBarClass =\n  'flex items-center gap-2 bg-muted/40 border-b border-border px-3 py-2'\n\n/** A single traffic-light dot. */\nexport const trafficDotClass = 'size-2.5 rounded-full border border-border'\n\n/** Centered URL bar. */\nexport const urlBarClass = 'flex-1 text-center font-mono text-[11px] text-muted-foreground'\n\n/** Bold domain segment inside the URL bar. */\nexport const urlDomainClass = 'font-semibold text-foreground'\n\n/**\n * Status badge shown in the chrome bar.\n *\n * live  → emerald tint (approved exception to semantic tokens)\n * rec   → destructive tint with a pulsing dot\n */\nexport const statusBadgeVariants = cva({\n  base: 'inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide',\n  variants: {\n    status: {\n      live: 'text-emerald-500 bg-emerald-500/10',\n      rec: 'text-destructive bg-destructive/10',\n    },\n  },\n  defaultVariants: {\n    status: 'live',\n  },\n})\n\n/** Inner content area that receives slotted/children content. */\nexport const contentAreaClass = 'p-0'\n", "import * as React from 'react'\nimport {\n  createBrowserChromeMock,\n  splitUrl,\n  browserChromeMockVariants,\n  chromeBarClass,\n  trafficDotClass,\n  urlBarClass,\n  urlDomainClass,\n  statusBadgeVariants,\n  contentAreaClass,\n  type BrowserChromeStatus,\n} from '@refraction-ui/browser-chrome-mock'\nimport { cn } from '@refraction-ui/shared'\n\nexport type { BrowserChromeStatus }\n\nexport interface BrowserChromeMockProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'content'> {\n  /** URL to display in the address bar. Bold domain + normal path. */\n  url: string\n  /** Optional status badge shown in the chrome bar. */\n  status?: BrowserChromeStatus\n}\n\n/** Three traffic-light dots rendered in the chrome bar. */\n// macOS window-chrome realism, not status tones — deliberately not tokenized.\nconst TRAFFIC_DOTS = ['bg-red-400', 'bg-yellow-400', 'bg-green-400'] as const\n\n/**\n * BrowserChromeMock — a decorative browser window frame.\n *\n * Renders a mock browser chrome with traffic-light dots, a monospace URL bar\n * (bold domain + normal path), an optional live/rec status badge, and a\n * content area for arbitrary children. Logic and styles come from the headless\n * `@refraction-ui/browser-chrome-mock` core.\n */\nexport const BrowserChromeMock = React.forwardRef<\n  HTMLDivElement,\n  BrowserChromeMockProps\n>(function BrowserChromeMock({ url, status, className, children, ...props }, ref) {\n  const { ariaProps, dataAttributes } = createBrowserChromeMock({ status })\n  const { domain, path } = splitUrl(url)\n\n  return (\n    <div\n      ref={ref}\n      className={cn(browserChromeMockVariants(), className)}\n      {...ariaProps}\n      {...dataAttributes}\n      {...props}\n    >\n      {/* Chrome toolbar */}\n      <div className={chromeBarClass}>\n        {/* Traffic-light dots */}\n        <div className=\"flex items-center gap-1.5 shrink-0\">\n          {TRAFFIC_DOTS.map((color) => (\n            <span key={color} className={cn(trafficDotClass, color)} />\n          ))}\n        </div>\n\n        {/* URL bar */}\n        <div className={urlBarClass}>\n          <span className={urlDomainClass}>{domain}</span>\n          {path && <span>{path}</span>}\n        </div>\n\n        {/* Status badge */}\n        {status && (\n          <div className={statusBadgeVariants({ status })}>\n            {status === 'rec' && (\n              <span className=\"size-1.5 rounded-full bg-destructive animate-pulse\" />\n            )}\n            {status}\n          </div>\n        )}\n      </div>\n\n      {/* Content area */}\n      <div className={contentAreaClass}>{children}</div>\n    </div>\n  )\n})\n"],
+  "mappings": ";;;;;;;;;AAkBO,SAAS,SAAS,KAA+C;AACtE,QAAM,aAAa,IAAI,QAAQ,GAAG;AAClC,MAAI,eAAe,IAAI;AACrB,WAAO,EAAE,QAAQ,KAAK,MAAM,GAAA;EAC9B;AACA,SAAO;IACL,QAAQ,IAAI,MAAM,GAAG,UAAU;IAC/B,MAAM,IAAI,MAAM,UAAU;EAAA;AAE9B;AAQO,SAAS,wBACd,QAAgD,CAAA,GAC1B;AACtB,QAAM,EAAE,OAAA,IAAW;AAEnB,QAAM,YAAY;IAChB,MAAM;IACN,cAAc;EAAA;AAGhB,QAAM,iBAAyC,CAAA;AAC/C,MAAI,WAAW,QAAW;AACxB,mBAAe,aAAa,IAAI;EAClC;AAEA,SAAO,EAAE,WAAW,eAAA;AACtB;AChDO,IAAM,4BAA4B,IAAI;EAC3C,MAAM;EACN,UAAU,CAAA;EACV,iBAAiB,CAAA;AACnB,CAAC;AAGM,IAAM,iBACX;AAGK,IAAM,kBAAkB;AAGxB,IAAM,cAAc;AAGpB,IAAM,iBAAiB;AAQvB,IAAM,sBAAsB,IAAI;EACrC,MAAM;EACN,UAAU;IACR,QAAQ;MACN,MAAM;MACN,KAAK;IAAA;EACP;EAEF,iBAAiB;IACf,QAAQ;EAAA;AAEZ,CAAC;AAGM,IAAM,mBAAmB;;;;ACfhC,IAAM,eAAe,CAAC,cAAc,iBAAiB,cAAc;AAU5D,IAAM,oBAA0B,iBAGrC,SAASA,mBAAkB,EAAE,KAAK,QAAQ,WAAW,UAAU,GAAG,MAAA,GAAS,KAAK;AAChF,QAAM,EAAE,WAAW,eAAA,IAAmB,wBAAwB,EAAE,OAAA,CAAQ;AACxE,QAAM,EAAE,QAAQ,KAAA,IAAS,SAAS,GAAG;AAErC,SACE;IAAC;IAAA;MACC;MACA,WAAW,GAAG,0BAAA,GAA6B,SAAS;MACnD,GAAG;MACH,GAAG;MACH,GAAG;MAGJ,UAAA;QAAA,qBAAC,OAAA,EAAI,WAAW,gBAEd,UAAA;UAAA,oBAAC,OAAA,EAAI,WAAU,sCACZ,UAAA,aAAa,IAAI,CAAC,UACjB,oBAAC,QAAA,EAAiB,WAAW,GAAG,iBAAiB,KAAK,EAAA,GAA3C,KAA8C,CAC1D,EAAA,CACH;UAGA,qBAAC,OAAA,EAAI,WAAW,aACd,UAAA;YAAA,oBAAC,QAAA,EAAK,WAAW,gBAAiB,UAAA,OAAA,CAAO;YACxC,QAAQ,oBAAC,QAAA,EAAM,UAAA,KAAA,CAAK;UAAA,EAAA,CACvB;UAGC,UAAA,qBACE,OAAA,EAAI,WAAW,oBAAoB,EAAE,OAAA,CAAQ,GAC3C,UAAA;YAAA,WAAW,SACV,oBAAC,QAAA,EAAK,WAAU,qDAAA,CAAqD;YAEtE;UAAA,EAAA,CACH;QAAA,EAAA,CAEJ;QAGA,oBAAC,OAAA,EAAI,WAAW,kBAAmB,SAAA,CAAS;MAAA;IAAA;EAAA;AAGlD,CAAC;",
   "names": ["BrowserChromeMock"]
 }

package/dist/react-button.js

@@ -2,7 +2,7 @@ import {
   Button,
   buttonTokens,
   buttonVariants
-} from "./chunk-F7B64KT3.js";
+} from "./chunk-NKCWOPNX.js";
 import "./chunk-WK2IIUFO.js";
 import "./chunk-ZF3OHCGV.js";
 export {

package/dist/react-card.js

@@ -44,8 +44,16 @@ var cardTokens = {
   }
 };
 var cardVariants = cva({
-  base: "rounded-lg border bg-card text-card-foreground shadow",
+  base: "rounded-lg border shadow",
   variants: {
+    variant: {
+      // Default — unchanged surface (bg-card + border via the global token).
+      default: "bg-card text-card-foreground",
+      // Lower-emphasis container on the subtle surface token (issue #485).
+      subtle: "bg-surface-subtle text-card-foreground",
+      // Tinted second-accent card (issue #485).
+      tertiary: "border-transparent bg-tertiary-soft text-tertiary-soft-foreground"
+    },
     padding: {
       none: "",
       default: "p-6",
@@ -53,6 +61,7 @@ var cardVariants = cva({
     }
   },
   defaultVariants: {
+    variant: "default",
     padding: "none"
   }
 });
@@ -85,9 +94,9 @@ var cardFooterVariants = cva({
 // ../react-card/dist/index.js
 import { jsx } from "react/jsx-runtime";
 var Card = React.forwardRef(
-  function Card2({ className, asChild = false, ...props }, ref) {
+  function Card2({ className, variant, asChild = false, ...props }, ref) {
     const api = createCard();
-    const classes = cn(cardVariants(), className);
+    const classes = cn(cardVariants({ variant }), className);
     if (asChild) {
       return /* @__PURE__ */ jsx(
         Slot,

package/dist/react-card.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../card/src/card.ts", "../../card/src/card.styles.ts", "../../react-card/src/card.tsx"],
-  "sourcesContent": ["import type { AccessibilityProps } from '@refraction-ui/shared'\n\nexport interface CardProps {\n  /** Optional accessible role override */\n  role?: string\n}\n\nexport interface CardAPI {\n  /** ARIA attributes to spread on the element */\n  ariaProps: Partial<AccessibilityProps>\n  /** Data attributes for CSS styling hooks */\n  dataAttributes: Record<string, string>\n}\n\nexport function createCard(props: CardProps = {}): CardAPI {\n  const ariaProps: Partial<AccessibilityProps> = {}\n  if (props.role) {\n    ariaProps.role = props.role\n  }\n\n  return {\n    ariaProps,\n    dataAttributes: { 'data-slot': 'card' },\n  }\n}\n\nexport function createCardHeader(): { dataAttributes: Record<string, string> } {\n  return { dataAttributes: { 'data-slot': 'card-header' } }\n}\n\nexport function createCardTitle(): { dataAttributes: Record<string, string> } {\n  return { dataAttributes: { 'data-slot': 'card-title' } }\n}\n\nexport function createCardDescription(): { dataAttributes: Record<string, string> } {\n  return { dataAttributes: { 'data-slot': 'card-description' } }\n}\n\nexport function createCardContent(): { dataAttributes: Record<string, string> } {\n  return { dataAttributes: { 'data-slot': 'card-content' } }\n}\n\nexport function createCardFooter(): { dataAttributes: Record<string, string> } {\n  return { dataAttributes: { 'data-slot': 'card-footer' } }\n}\n", "import { cva } from '@refraction-ui/shared'\nimport type { TokenContract } from '@refraction-ui/shared'\n\nexport const cardTokens: TokenContract = {\n  name: 'card',\n  tokens: {\n    bg: { variable: '--rfr-card-bg', fallback: 'hsl(var(--card))' },\n    fg: { variable: '--rfr-card-fg', fallback: 'hsl(var(--card-foreground))' },\n    border: { variable: '--rfr-card-border', fallback: 'hsl(var(--border))' },\n  },\n}\n\nexport const cardVariants = cva({\n  base: 'rounded-lg border bg-card text-card-foreground shadow',\n  variants: {\n    padding: {\n      none: '',\n      default: 'p-6',\n      compact: 'p-4',\n    },\n  },\n  defaultVariants: {\n    padding: 'none',\n  },\n})\n\nexport const cardHeaderVariants = cva({\n  base: 'flex flex-col space-y-1.5 p-6',\n})\n\nexport const cardTitleVariants = cva({\n  base: 'font-semibold leading-none tracking-tight',\n  variants: {\n    size: {\n      sm: 'text-lg',\n      default: 'text-2xl',\n      lg: 'text-3xl',\n    },\n  },\n  defaultVariants: {\n    size: 'default',\n  },\n})\n\nexport const cardDescriptionVariants = cva({\n  base: 'text-sm text-muted-foreground',\n})\n\nexport const cardContentVariants = cva({\n  base: 'p-6 pt-0',\n})\n\nexport const cardFooterVariants = cva({\n  base: 'flex items-center p-6 pt-0',\n})\n", "import * as React from 'react'\nimport {\n  createCard,\n  createCardHeader,\n  createCardTitle,\n  createCardDescription,\n  createCardContent,\n  createCardFooter,\n  cardVariants,\n  cardHeaderVariants,\n  cardTitleVariants,\n  cardDescriptionVariants,\n  cardContentVariants,\n  cardFooterVariants,\n} from '@refraction-ui/card'\nimport { cn } from '@refraction-ui/shared'\nimport { Slot } from '@refraction-ui/react-slot'\n\nexport interface CardProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Merge the card's classes/props onto the single child element instead of\n   * rendering a `<div>` (Radix-style `asChild`) — e.g.\n   * `<Card asChild><a href=\"/x\">…</a></Card>` for a clickable card. Expects\n   * exactly one React element child. */\n  asChild?: boolean\n}\n\n/**\n * Card -- a container with rounded corners, border, and shadow.\n */\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(\n  function Card({ className, asChild = false, ...props }, ref) {\n    const api = createCard()\n    const classes = cn(cardVariants(), className)\n\n    if (asChild) {\n      return (\n        <Slot\n          ref={ref as React.Ref<HTMLElement>}\n          className={classes}\n          {...api.ariaProps}\n          {...api.dataAttributes}\n          {...props}\n        />\n      )\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={classes}\n        {...api.ariaProps}\n        {...api.dataAttributes}\n        {...props}\n      />\n    )\n  },\n)\n\n/**\n * CardHeader -- top section of a card, typically contains title and description.\n */\nexport const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  function CardHeader({ className, ...props }, ref) {\n    const api = createCardHeader()\n    return (\n      <div\n        ref={ref}\n        className={cn(cardHeaderVariants(), className)}\n        {...api.dataAttributes}\n        {...props}\n      />\n    )\n  },\n)\n\n/**\n * CardTitle -- heading within a card header.\n */\nexport const CardTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(\n  function CardTitle({ className, ...props }, ref) {\n    const api = createCardTitle()\n    return (\n      <h3\n        ref={ref}\n        className={cn(cardTitleVariants(), className)}\n        {...api.dataAttributes}\n        {...props}\n      />\n    )\n  },\n)\n\n/**\n * CardDescription -- subtext within a card header.\n */\nexport const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(\n  function CardDescription({ className, ...props }, ref) {\n    const api = createCardDescription()\n    return (\n      <p\n        ref={ref}\n        className={cn(cardDescriptionVariants(), className)}\n        {...api.dataAttributes}\n        {...props}\n      />\n    )\n  },\n)\n\n/**\n * CardContent -- main body content area of a card.\n */\nexport const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  function CardContent({ className, ...props }, ref) {\n    const api = createCardContent()\n    return (\n      <div\n        ref={ref}\n        className={cn(cardContentVariants(), className)}\n        {...api.dataAttributes}\n        {...props}\n      />\n    )\n  },\n)\n\n/**\n * CardFooter -- bottom section of a card, typically contains actions.\n */\nexport const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  function CardFooter({ className, ...props }, ref) {\n    const api = createCardFooter()\n    return (\n      <div\n        ref={ref}\n        className={cn(cardFooterVariants(), className)}\n        {...api.dataAttributes}\n        {...props}\n      />\n    )\n  },\n)\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type { AccessibilityProps } from '@refraction-ui/shared'\n\n/**\n * Visual tone of a card (issue #485).\n * - `default` — the standard surface (activates the `--rfr-card-*` contract).\n * - `subtle` — a lower-emphasis container on the subtle surface token.\n * - `tertiary` — a tinted second-brand-accent card.\n */\nexport type CardVariant = 'default' | 'subtle' | 'tertiary'\n\nexport interface CardProps {\n  /** Optional accessible role override */\n  role?: string\n}\n\nexport interface CardAPI {\n  /** ARIA attributes to spread on the element */\n  ariaProps: Partial<AccessibilityProps>\n  /** Data attributes for CSS styling hooks */\n  dataAttributes: Record<string, string>\n}\n\nexport function createCard(props: CardProps = {}): CardAPI {\n  const ariaProps: Partial<AccessibilityProps> = {}\n  if (props.role) {\n    ariaProps.role = props.role\n  }\n\n  return {\n    ariaProps,\n    dataAttributes: { 'data-slot': 'card' },\n  }\n}\n\nexport function createCardHeader(): { dataAttributes: Record<string, string> } {\n  return { dataAttributes: { 'data-slot': 'card-header' } }\n}\n\nexport function createCardTitle(): { dataAttributes: Record<string, string> } {\n  return { dataAttributes: { 'data-slot': 'card-title' } }\n}\n\nexport function createCardDescription(): { dataAttributes: Record<string, string> } {\n  return { dataAttributes: { 'data-slot': 'card-description' } }\n}\n\nexport function createCardContent(): { dataAttributes: Record<string, string> } {\n  return { dataAttributes: { 'data-slot': 'card-content' } }\n}\n\nexport function createCardFooter(): { dataAttributes: Record<string, string> } {\n  return { dataAttributes: { 'data-slot': 'card-footer' } }\n}\n", "import { cva } from '@refraction-ui/shared'\nimport type { TokenContract } from '@refraction-ui/shared'\n\nexport const cardTokens: TokenContract = {\n  name: 'card',\n  tokens: {\n    bg: { variable: '--rfr-card-bg', fallback: 'hsl(var(--card))' },\n    fg: { variable: '--rfr-card-fg', fallback: 'hsl(var(--card-foreground))' },\n    border: { variable: '--rfr-card-border', fallback: 'hsl(var(--border))' },\n  },\n}\n\nexport const cardVariants = cva({\n  base: 'rounded-lg border shadow',\n  variants: {\n    variant: {\n      // Default — unchanged surface (bg-card + border via the global token).\n      default: 'bg-card text-card-foreground',\n      // Lower-emphasis container on the subtle surface token (issue #485).\n      subtle: 'bg-surface-subtle text-card-foreground',\n      // Tinted second-accent card (issue #485).\n      tertiary: 'border-transparent bg-tertiary-soft text-tertiary-soft-foreground',\n    },\n    padding: {\n      none: '',\n      default: 'p-6',\n      compact: 'p-4',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n    padding: 'none',\n  },\n})\n\nexport const cardHeaderVariants = cva({\n  base: 'flex flex-col space-y-1.5 p-6',\n})\n\nexport const cardTitleVariants = cva({\n  base: 'font-semibold leading-none tracking-tight',\n  variants: {\n    size: {\n      sm: 'text-lg',\n      default: 'text-2xl',\n      lg: 'text-3xl',\n    },\n  },\n  defaultVariants: {\n    size: 'default',\n  },\n})\n\nexport const cardDescriptionVariants = cva({\n  base: 'text-sm text-muted-foreground',\n})\n\nexport const cardContentVariants = cva({\n  base: 'p-6 pt-0',\n})\n\nexport const cardFooterVariants = cva({\n  base: 'flex items-center p-6 pt-0',\n})\n", "import * as React from 'react'\nimport {\n  createCard,\n  createCardHeader,\n  createCardTitle,\n  createCardDescription,\n  createCardContent,\n  createCardFooter,\n  cardVariants,\n  cardHeaderVariants,\n  cardTitleVariants,\n  cardDescriptionVariants,\n  cardContentVariants,\n  cardFooterVariants,\n  type CardVariant,\n} from '@refraction-ui/card'\nimport { cn } from '@refraction-ui/shared'\nimport { Slot } from '@refraction-ui/react-slot'\n\nexport interface CardProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Visual tone of the card. Defaults to `'default'` (issue #485). */\n  variant?: CardVariant\n  /** Merge the card's classes/props onto the single child element instead of\n   * rendering a `<div>` (Radix-style `asChild`) — e.g.\n   * `<Card asChild><a href=\"/x\">…</a></Card>` for a clickable card. Expects\n   * exactly one React element child. */\n  asChild?: boolean\n}\n\n/**\n * Card -- a container with rounded corners, border, and shadow.\n */\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(\n  function Card({ className, variant, asChild = false, ...props }, ref) {\n    const api = createCard()\n    const classes = cn(cardVariants({ variant }), className)\n\n    if (asChild) {\n      return (\n        <Slot\n          ref={ref as React.Ref<HTMLElement>}\n          className={classes}\n          {...api.ariaProps}\n          {...api.dataAttributes}\n          {...props}\n        />\n      )\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={classes}\n        {...api.ariaProps}\n        {...api.dataAttributes}\n        {...props}\n      />\n    )\n  },\n)\n\n/**\n * CardHeader -- top section of a card, typically contains title and description.\n */\nexport const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  function CardHeader({ className, ...props }, ref) {\n    const api = createCardHeader()\n    return (\n      <div\n        ref={ref}\n        className={cn(cardHeaderVariants(), className)}\n        {...api.dataAttributes}\n        {...props}\n      />\n    )\n  },\n)\n\n/**\n * CardTitle -- heading within a card header.\n */\nexport const CardTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(\n  function CardTitle({ className, ...props }, ref) {\n    const api = createCardTitle()\n    return (\n      <h3\n        ref={ref}\n        className={cn(cardTitleVariants(), className)}\n        {...api.dataAttributes}\n        {...props}\n      />\n    )\n  },\n)\n\n/**\n * CardDescription -- subtext within a card header.\n */\nexport const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(\n  function CardDescription({ className, ...props }, ref) {\n    const api = createCardDescription()\n    return (\n      <p\n        ref={ref}\n        className={cn(cardDescriptionVariants(), className)}\n        {...api.dataAttributes}\n        {...props}\n      />\n    )\n  },\n)\n\n/**\n * CardContent -- main body content area of a card.\n */\nexport const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  function CardContent({ className, ...props }, ref) {\n    const api = createCardContent()\n    return (\n      <div\n        ref={ref}\n        className={cn(cardContentVariants(), className)}\n        {...api.dataAttributes}\n        {...props}\n      />\n    )\n  },\n)\n\n/**\n * CardFooter -- bottom section of a card, typically contains actions.\n */\nexport const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  function CardFooter({ className, ...props }, ref) {\n    const api = createCardFooter()\n    return (\n      <div\n        ref={ref}\n        className={cn(cardFooterVariants(), className)}\n        {...api.dataAttributes}\n        {...props}\n      />\n    )\n  },\n)\n"],
+  "mappings": "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",
   "names": ["Card", "CardHeader", "CardTitle", "CardDescription", "CardContent", "CardFooter"]
 }

package/dist/react-diff-viewer.js

@@ -156,6 +156,9 @@ var diffViewerTokens = {
     sidebarBg: { variable: "--rfr-diff-sidebar-bg", fallback: "hsl(var(--muted))" },
     headerBg: { variable: "--rfr-diff-header-bg", fallback: "hsl(var(--muted))" },
     border: { variable: "--rfr-diff-border", fallback: "hsl(var(--border))" },
+    // Diff add/del colors are syntax semantics (like code highlighting), not
+    // theme status tones — deliberately NOT routed through the success/
+    // destructive tokens. The --rfr-diff-* variables are the theming seam.
     addBg: { variable: "--rfr-diff-add-bg", fallback: "rgba(46, 160, 67, 0.15)" },
     delBg: { variable: "--rfr-diff-del-bg", fallback: "rgba(248, 81, 73, 0.15)" },
     addFg: { variable: "--rfr-diff-add-fg", fallback: "#3fb950" },