@refraction-ui/react 0.20.0 → 0.21.0

package/dist/{chunk-F7B64KT3.js → chunk-NKCWOPNX.js}

@@ -74,6 +74,10 @@ var buttonVariants = cva({
       destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
       outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
       secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+      // Soft tinted brand fill — lower-emphasis primary action (issue #485).
+      soft: "bg-primary-soft text-primary-soft-foreground shadow-sm hover:bg-primary-soft/80",
+      // Second brand accent (issue #485).
+      tertiary: "bg-tertiary text-tertiary-foreground shadow-sm hover:bg-tertiary/90",
       ghost: "hover:bg-accent hover:text-accent-foreground",
       link: "text-primary underline-offset-4 hover:underline"
     },
@@ -184,4 +188,4 @@ export {
   buttonVariants,
   Button
 };
-//# sourceMappingURL=chunk-F7B64KT3.js.map
+//# sourceMappingURL=chunk-NKCWOPNX.js.map

package/dist/chunk-NKCWOPNX.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../button/src/button.ts", "../../button/src/button.styles.ts", "../../react-button/src/button.tsx"],
+  "sourcesContent": ["import type { AccessibilityProps, KeyboardHandlerMap } from '@refraction-ui/shared'\nimport { Keys } from '@refraction-ui/shared'\n\n/**\n * `primary` is an alias of `default` — included so the universal React-ecosystem\n * muscle-memory (`<Button variant=\"primary\">`) renders as the most-emphasized\n * button instead of falling through to the unstyled base. See issue #201.\n */\nexport type ButtonVariant =\n  | 'default'\n  | 'primary'\n  | 'destructive'\n  | 'outline'\n  | 'secondary'\n  | 'ghost'\n  | 'link'\n  // Issue #485 — soft tinted brand fill + a real second brand accent.\n  | 'soft'\n  | 'tertiary'\n\n/** Variants that map to the same visual style as `default`. */\nexport const BUTTON_VARIANT_ALIASES: Partial<Record<ButtonVariant, ButtonVariant>> = {\n  primary: 'default',\n}\n\n/** Resolve an alias to its canonical variant. Pass-through for unknown/undefined. */\nexport function resolveButtonVariant(variant: ButtonVariant | undefined): ButtonVariant | undefined {\n  if (!variant) return variant\n  return BUTTON_VARIANT_ALIASES[variant] ?? variant\n}\nexport type ButtonSize = 'xs' | 'sm' | 'default' | 'lg' | 'icon'\n\nexport interface ButtonProps {\n  variant?: ButtonVariant\n  size?: ButtonSize\n  disabled?: boolean\n  loading?: boolean\n  asChild?: boolean\n  type?: 'button' | 'submit' | 'reset'\n}\n\nexport interface ButtonAPI {\n  /** ARIA attributes to spread on the element */\n  ariaProps: Partial<AccessibilityProps>\n  /** Keyboard handlers to attach */\n  keyboardHandlers: KeyboardHandlerMap\n  /** Whether interaction should be blocked */\n  isInteractive: boolean\n  /** Data attributes for CSS styling hooks */\n  dataAttributes: Record<string, string>\n}\n\nexport function createButton(props: ButtonProps = {}): ButtonAPI {\n  const { disabled = false, loading = false } = props\n  const isInteractive = !disabled && !loading\n\n  const ariaProps: Partial<AccessibilityProps> = {}\n  if (disabled) {\n    ariaProps['aria-disabled'] = true\n  }\n  if (loading) {\n    ariaProps['aria-disabled'] = true\n    ariaProps['aria-label'] = ariaProps['aria-label'] ?? undefined\n  }\n\n  const dataAttributes: Record<string, string> = {}\n  if (loading) {\n    dataAttributes['data-loading'] = ''\n  }\n  if (disabled) {\n    dataAttributes['data-disabled'] = ''\n  }\n\n  const keyboardHandlers: KeyboardHandlerMap = {}\n  if (!isInteractive) {\n    keyboardHandlers[Keys.Enter] = (e) => e.preventDefault()\n    keyboardHandlers[Keys.Space] = (e) => e.preventDefault()\n  }\n\n  return {\n    ariaProps,\n    keyboardHandlers,\n    isInteractive,\n    dataAttributes,\n  }\n}\n\nexport function getButtonType(props: ButtonProps): string {\n  return props.type ?? 'button'\n}\n", "import { cva } from '@refraction-ui/shared'\nimport type { TokenContract } from '@refraction-ui/shared'\n\nexport const buttonTokens: TokenContract = {\n  name: 'button',\n  tokens: {\n    bg: { variable: '--rfr-button-bg', fallback: 'hsl(var(--primary))' },\n    fg: { variable: '--rfr-button-fg', fallback: 'hsl(var(--primary-foreground))' },\n    border: { variable: '--rfr-button-border', fallback: 'hsl(var(--border))' },\n    radius: { variable: '--rfr-button-radius', fallback: 'var(--radius)' },\n    ring: { variable: '--rfr-button-ring', fallback: 'hsl(var(--ring))' },\n  },\n}\n\nexport const buttonVariants = cva({\n  base: 'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0',\n  variants: {\n    variant: {\n      default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',\n      // Alias for `default` — see resolveButtonVariant + issue #201. Same classes\n      // so styling stays identical even if a consumer reaches into `buttonVariants`\n      // directly without going through resolveButtonVariant.\n      primary: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',\n      destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',\n      outline: 'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',\n      secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',\n      // Soft tinted brand fill — lower-emphasis primary action (issue #485).\n      soft: 'bg-primary-soft text-primary-soft-foreground shadow-sm hover:bg-primary-soft/80',\n      // Second brand accent (issue #485).\n      tertiary: 'bg-tertiary text-tertiary-foreground shadow-sm hover:bg-tertiary/90',\n      ghost: 'hover:bg-accent hover:text-accent-foreground',\n      link: 'text-primary underline-offset-4 hover:underline',\n    },\n    size: {\n      xs: 'h-7 rounded px-2 text-xs',\n      sm: 'h-8 rounded-md px-3 text-xs',\n      default: 'h-9 px-4 py-2',\n      lg: 'h-10 rounded-md px-8',\n      icon: 'h-9 w-9',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n    size: 'default',\n  },\n})\n", "import * as React from 'react'\nimport {\n  createButton,\n  buttonVariants,\n  getButtonType,\n  resolveButtonVariant,\n  type ButtonVariant,\n  type ButtonSize,\n} from '@refraction-ui/button'\nimport { useShortcut, ShortcutHint } from '@refraction-ui/react-keyboard-shortcut'\nimport { cn } from '@refraction-ui/shared'\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: ButtonVariant\n  size?: ButtonSize\n  loading?: boolean\n  asChild?: boolean\n  shortcut?: string\n  action?: string\n}\n\n/**\n * Button component — renders a styled button with variant and size support.\n *\n * Uses the headless @refraction-ui/button core for state, ARIA, and keyboard handling.\n * Styling via Tailwind utility classes (no external CSS-in-JS).\n */\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  function Button({ variant, size, loading, asChild, className, disabled, children, shortcut, action, ...props }, ref) {\n    // `primary` is an ecosystem-muscle-memory alias for `default` — resolve it\n    // here so styling, aria, and data attributes all see the canonical variant.\n    // See issue #201.\n    const resolvedVariant = resolveButtonVariant(variant)\n    const api = createButton({ variant: resolvedVariant, size, disabled, loading, asChild, type: props.type })\n    const classes = cn(buttonVariants({ variant: resolvedVariant, size }), className)\n    \n    const internalRef = React.useRef<HTMLButtonElement>(null)\n    const mergedRef = React.useCallback(\n      (node: HTMLButtonElement | null) => {\n        internalRef.current = node\n        if (typeof ref === 'function') ref(node)\n        else if (ref) ref.current = node\n      },\n      [ref]\n    )\n\n    useShortcut({\n      shortcut,\n      action,\n      enabled: !disabled && !loading && (!!shortcut || !!action),\n      onTrigger: () => {\n        internalRef.current?.click()\n      },\n    })\n\n    // When asChild, render the child element directly with button props merged in.\n    // This allows <Button asChild><a href=\"/\">Link</a></Button>\n    if (asChild && React.isValidElement(children)) {\n      return React.cloneElement(children as React.ReactElement<Record<string, unknown>>, {\n        ref: mergedRef,\n        className: cn(classes, (children.props as Record<string, unknown>).className as string, 'relative'),\n        type: getButtonType({ type: props.type }),\n        ...api.ariaProps,\n        ...api.dataAttributes,\n        ...props,\n        children: (\n          <>\n            {(shortcut || action) && <ShortcutHint shortcut={shortcut} action={action} className=\"right-4\" />}\n            {(children.props as Record<string, unknown>).children}\n          </>\n        )\n      })\n    }\n\n    return (\n      <button\n        ref={mergedRef}\n        type={getButtonType({ type: props.type }) as 'button' | 'submit' | 'reset'}\n        className={cn(classes, 'relative')}\n        disabled={disabled || loading}\n        {...api.ariaProps}\n        {...api.dataAttributes}\n        {...props}\n      >\n        {(shortcut || action) && <ShortcutHint shortcut={shortcut} action={action} className=\"right-4\" />}\n        {loading && (\n          <svg\n            className=\"animate-spin h-4 w-4\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            aria-hidden=\"true\"\n          >\n            <circle\n              className=\"opacity-25\"\n              cx=\"12\"\n              cy=\"12\"\n              r=\"10\"\n              stroke=\"currentColor\"\n              strokeWidth=\"4\"\n            />\n            <path\n              className=\"opacity-75\"\n              fill=\"currentColor\"\n              d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n            />\n          </svg>\n        )}\n        {children}\n      </button>\n    )\n  },\n)\n"],
+  "mappings": "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",
+  "names": ["Button"]
+}

package/dist/index.cjs

@@ -1751,7 +1751,14 @@ function AuthGuard({
 }
 
 // ../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 = {};
@@ -1775,7 +1782,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]",
@@ -2071,6 +2083,10 @@ var buttonVariants = cva({
       destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
       outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
       secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+      // Soft tinted brand fill — lower-emphasis primary action (issue #485).
+      soft: "bg-primary-soft text-primary-soft-foreground shadow-sm hover:bg-primary-soft/80",
+      // Second brand accent (issue #485).
+      tertiary: "bg-tertiary text-tertiary-foreground shadow-sm hover:bg-tertiary/90",
       ghost: "hover:bg-accent hover:text-accent-foreground",
       link: "text-primary underline-offset-4 hover:underline"
     },
@@ -16496,6 +16512,8 @@ var slideViewerProgressBarVariants = cva({
 var slideTypeBadgeVariants = cva({
   base: "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium",
   variants: {
+    // Slide-type accents are a content-category palette (lesson/quiz/exercise…),
+    // not status tones — deliberately not routed through the theme tokens.
     type: {
       lesson: "bg-blue-100 text-blue-800",
       quiz: "bg-purple-100 text-purple-800",
@@ -18200,6 +18218,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" },
@@ -18723,7 +18744,7 @@ var avatarPresenceDotVariants = cva({
     },
     status: {
       online: "bg-success",
-      offline: "bg-gray-400",
+      offline: "bg-neutral",
       away: "bg-warning",
       busy: "bg-destructive",
       dnd: "bg-destructive"
@@ -18807,8 +18828,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",
@@ -18816,6 +18845,7 @@ var cardVariants = cva({
     }
   },
   defaultVariants: {
+    variant: "default",
     padding: "none"
   }
 });
@@ -18845,9 +18875,9 @@ var cardFooterVariants = cva({
   base: "flex items-center p-6 pt-0"
 });
 var Card = React52__namespace.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__ */ jsxRuntime.jsx(
         Slot,
@@ -20000,7 +20030,7 @@ var presenceDotVariants = cva({
   variants: {
     status: {
       online: "bg-success",
-      offline: "bg-gray-400",
+      offline: "bg-neutral",
       away: "bg-warning",
       busy: "bg-destructive",
       dnd: "bg-destructive"
@@ -20846,8 +20876,8 @@ var statusDotVariants = cva({
       error: "bg-destructive",
       warning: "bg-warning",
       info: "bg-info",
-      pending: "bg-orange-500",
-      neutral: "bg-gray-400"
+      pending: "bg-pending",
+      neutral: "bg-neutral"
     }
   },
   defaultVariants: {
@@ -20862,8 +20892,8 @@ var statusPulseVariants = cva({
       error: "bg-destructive",
       warning: "bg-warning",
       info: "bg-info",
-      pending: "bg-orange-500",
-      neutral: "bg-gray-400"
+      pending: "bg-pending",
+      neutral: "bg-neutral"
     }
   },
   defaultVariants: {
@@ -24951,8 +24981,16 @@ var separatorVariants = cva({
   base: "",
   variants: {
     orientation: {
-      horizontal: "h-px w-full bg-border",
-      vertical: "w-px h-full bg-border"
+      horizontal: "h-px w-full",
+      vertical: "w-px h-full"
+    },
+    // Line color (issue #485). `default` is the standard border token;
+    // `subtle` uses the hairline `border-subtle` token for a lighter rule.
+    // Keeping the color here (not in `orientation`) keeps every existing call
+    // pixel-identical while adding the subtle option.
+    tone: {
+      default: "bg-border",
+      subtle: "bg-border-subtle"
     },
     labeled: {
       true: "flex items-center",
@@ -24961,31 +24999,35 @@ var separatorVariants = cva({
   },
   defaultVariants: {
     orientation: "horizontal",
+    tone: "default",
     labeled: "false"
   }
 });
 var separatorLineClass = "h-px flex-1 bg-border";
+var separatorSubtleLineClass = "h-px flex-1 bg-border-subtle";
 var separatorLabelClass = "px-3 text-xs uppercase tracking-wide text-muted-foreground";
 var Separator = React52__namespace.forwardRef(
   function Separator2({
     orientation = "horizontal",
+    tone = "default",
     label,
     decorative = true,
     className,
     ...props
   }, ref) {
     if (orientation === "horizontal" && label != null) {
+      const lineClass = tone === "subtle" ? separatorSubtleLineClass : separatorLineClass;
       return /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
           ref,
           role: "none",
-          className: cn(separatorVariants({ labeled: "true" }), className),
+          className: cn(separatorVariants({ labeled: "true", tone }), className),
           ...props,
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: separatorLineClass }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: lineClass }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: separatorLabelClass, children: label }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: separatorLineClass })
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: lineClass })
           ]
         }
       );
@@ -24998,7 +25040,7 @@ var Separator = React52__namespace.forwardRef(
       "div",
       {
         ref,
-        className: cn(separatorVariants({ orientation }), className),
+        className: cn(separatorVariants({ orientation, tone }), className),
         ...ariaProps,
         ...dataAttributes,
         ...props
@@ -27707,6 +27749,8 @@ var stickyNoteVariants = cva({
     "min-w-[160px] min-h-[120px]"
   ].join(" "),
   variants: {
+    // Named paper colors are product semantics (physical sticky notes),
+    // not status tones — deliberately not routed through the theme tokens.
     color: {
       yellow: "bg-yellow-100 text-yellow-900",
       pink: "bg-pink-100 text-pink-900",