@refraction-ui/react 0.20.0 → 0.21.0

package/dist/styles.css

@@ -65,11 +65,41 @@
      (Material blue) — a deliberate small cross-framework delta. */
   --info: 217 91% 60%;
   --info-foreground: 0 0% 100%;
+  --pending: 25 95% 53%;
+  --pending-foreground: 0 0% 100%;
+  --neutral: 220 9% 64%;
+  --neutral-foreground: 240 10% 10%;
 
   --border: 240 6% 92%;
   --input: 240 6% 92%;
   --ring: 250 50% 50%;
 
+  /* ─────────────────────────────────────────────────────────────────────
+     Extended semantic roles (issue #485) — additive, optional
+     ───────────────────────────────────────────────────────────────────── */
+  /* Brand depth: hover/active steps + a soft tinted brand fill */
+  --primary-hover: 250 50% 44%;
+  --primary-active: 250 50% 38%;
+  --primary-soft: 250 30% 95%;
+  --primary-soft-foreground: 250 50% 40%;
+  /* Convention: brand gradient from the primary → primary-active steps */
+  --primary-gradient: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary-active)));
+  /* Second brand accent */
+  --tertiary: 173 75% 29%;
+  --tertiary-foreground: 0 0% 100%;
+  --tertiary-soft: 173 35% 92%;
+  --tertiary-soft-foreground: 173 60% 26%;
+  /* Ink / surface */
+  --placeholder: 240 4% 52%;
+  --surface-subtle: 240 5% 97%;
+  --border-subtle: 240 6% 95%;
+  /* Extended status: resting/positive, caution, done */
+  --positive: 142 71% 35%;
+  --positive-foreground: 0 0% 100%;
+  --caution: 38 92% 50%;
+  --caution-foreground: 240 10% 10%;
+  --done: 217 91% 60%;
+
   /* Charts (colorblind-safe spread) */
   --chart-1: 250 50% 50%;
   --chart-2: 173 80% 36%;
@@ -98,6 +128,9 @@
   --radius-xl: 0.75rem;
   --radius-2xl: 1rem;
   --radius-full: 9999px;
+  /* Semantic shape roles (issue #485): pill track + large sheet/drawer corner */
+  --radius-pill: 9999px;
+  --radius-sheet: 1.5rem;
 
   --avatar-radius: 9999px;
   --badge-radius: 9999px;
@@ -276,11 +309,34 @@
   /* Lightened from 60% (light) to 65% lightness for contrast on dark surfaces */
   --info: 217 91% 65%;
   --info-foreground: 0 0% 98%;
+  --pending: 25 95% 53%;
+  --pending-foreground: 0 0% 100%;
+  --neutral: 220 9% 64%;
+  --neutral-foreground: 240 10% 10%;
 
   --border: 240 5% 16%;
   --input: 240 5% 16%;
   --ring: 250 50% 65%;
 
+  /* Extended semantic roles (issue #485) — dark mode */
+  --primary-hover: 250 50% 71%;
+  --primary-active: 250 50% 77%;
+  --primary-soft: 250 30% 20%;
+  --primary-soft-foreground: 250 60% 80%;
+  --primary-gradient: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary-active)));
+  --tertiary: 173 60% 55%;
+  --tertiary-foreground: 240 10% 4%;
+  --tertiary-soft: 173 30% 18%;
+  --tertiary-soft-foreground: 173 55% 70%;
+  --placeholder: 240 5% 48%;
+  --surface-subtle: 240 10% 6%;
+  --border-subtle: 240 5% 13%;
+  --positive: 142 71% 45%;
+  --positive-foreground: 0 0% 98%;
+  --caution: 38 92% 50%;
+  --caution-foreground: 240 10% 4%;
+  --done: 217 91% 65%;
+
   --chart-1: 250 50% 65%;
   --chart-2: 173 70% 50%;
   --chart-3: 38 92% 60%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refraction-ui/react",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "description": "All Refraction UI React components in one package — headless, accessible, zero-dependency",
   "type": "module",
   "main": "./dist/index.js",

package/dist/chunk-F7B64KT3.js.map

@@ -1,7 +0,0 @@
-{
-  "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\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      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"]
-}