lanre-ds 0.2.0 → 0.2.2

package/components/contributor/RadioCard.jsx

@@ -1,22 +1,18 @@
 'use client';
-import React, { useState } from 'react';
+import React from 'react';
 
 const DROP = '0 14px 24px oklch(0.22 0.05 60 / 0.3)';
 const GLOW = '0 0 0 4px oklch(0.76 0.13 180 / 0.5), 0 0 28px oklch(0.76 0.13 180 / 0.6)';
 
-export function RadioCard({ checked = false, onChange, onClick, onPointerDown, onPointerUp, onPointerCancel, onPointerLeave, title, description, media, style, ...rest }) {
-  const [down, setDown] = useState(false);
-  // Your own handlers run alongside the card's, so passing one never breaks choosing or the press.
-  const press = (on, yours) => e => { setDown(on); if (yours) yours(e); };
+export function RadioCard({ checked = false, onChange, onClick, title, description, media, style, className, ...rest }) {
   return (
-    <button type="button" role="radio" aria-checked={checked} onClick={e => { if (onClick) onClick(e); if (onChange) onChange(true); }}
-      onPointerDown={press(true, onPointerDown)} onPointerUp={press(false, onPointerUp)} onPointerCancel={press(false, onPointerCancel)} onPointerLeave={press(false, onPointerLeave)}
+    <button type="button" role="radio" aria-checked={checked} className={'mp-radio-card' + (className ? ' ' + className : '')} onClick={e => { if (onClick) onClick(e); if (onChange) onChange(true); }}
       style={{ appearance: 'none', position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10, padding: '22px 12px 16px', boxSizing: 'border-box',
         borderRadius: 'var(--radius-lg)', border: '4px solid ' + (checked ? 'var(--teal-500)' : 'var(--cream-300)'),
         background: checked ? 'linear-gradient(180deg, var(--teal-100), #fff)' : 'linear-gradient(180deg, #fff, var(--cream-100))',
         boxShadow: checked ? '0 5px 0 var(--teal-700), ' + DROP + ', ' + GLOW : '0 5px 0 var(--cream-300), ' + DROP,
         font: 'inherit', textAlign: 'center', cursor: 'pointer', WebkitTapHighlightColor: 'transparent',
-        transition: 'transform var(--dur-fast) var(--ease-out)', transform: down ? 'translateY(3px)' : undefined, ...style }} {...rest}>
+        transition: 'transform var(--dur-fast) var(--ease-out)', ...style }} {...rest}>
       <span aria-hidden="true" style={{ position: 'absolute', right: 10, top: 10, width: 28, height: 28, boxSizing: 'border-box', borderRadius: '50%',
         border: '3px solid ' + (checked ? 'var(--teal-500)' : 'var(--stone-500)'), background: checked ? 'var(--teal-500)' : '#fff', boxShadow: 'inset 0 2px 3px oklch(0 0 0 / 0.1)',
         display: 'grid', placeItems: 'center', color: '#fff', fontSize: 14, animation: checked ? 'mp-radio-pop var(--dur-base) var(--ease-bounce) both' : undefined }}>

package/components/contributor/StepBar.jsx

@@ -25,16 +25,15 @@ export function StepBar({ steps = [], current = 0, labels = false, style, ...res
       <div style={{ position: 'relative' }}>
         <span aria-hidden="true" style={{ position: 'absolute', top: 12, left: slot / 2, right: slot / 2, height: 12, borderRadius: 999,
           background: 'var(--world-path)', boxShadow: '0 0 0 3px var(--world-path-edge), 0 4px 0 3px oklch(0.25 0.05 60 / 0.2)' }} />
-        <span aria-hidden="true" style={{ position: 'absolute', top: 16, left: slot / 2, width: slot * filled, height: 4, borderRadius: 999,
+        <span aria-hidden="true" className={advanced ? 'mp-trail-fill-grow' : undefined} style={{ position: 'absolute', top: 16, left: slot / 2, width: slot * filled, height: 4, borderRadius: 999,
           background: 'var(--green-500)', transition: 'width var(--dur-slow) var(--ease-out)',
-          ...(advanced ? { '--from': slot * Math.min(current - 1, filled) + 'px', '--to': slot * filled + 'px', animation: 'mp-trail-grow var(--dur-slow) var(--ease-out) 260ms both' } : null) }} />
+          ...(advanced ? { '--from': slot * Math.min(current - 1, filled) + 'px', '--to': slot * filled + 'px' } : null) }} />
         <ol style={{ position: 'relative', listStyle: 'none', margin: 0, padding: 0, display: 'flex' }}>
           {steps.map((label, i) => {
             const done = i < current, cur = i === current, justDone = advanced && i === current - 1;
             return (
               <li key={i} aria-current={cur ? 'step' : undefined} style={{ width: slot, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
-                <span aria-hidden="true" className={'mp-step' + (done ? ' mp-step-done' : cur ? ' mp-step-current' : '')}
-                  style={justDone ? { animation: 'mp-pop var(--dur-slow) var(--ease-bounce) 560ms both' } : undefined}>
+                <span aria-hidden="true" className={'mp-step' + (done ? ' mp-step-done' : cur ? ' mp-step-current' : '') + (justDone ? ' mp-step-pop' : '')}>
                   {done ? <i className="ph-bold ph-check" /> : i + 1}
                   {cur && <span style={{ position: 'absolute', inset: -4, borderRadius: '50%', animation: 'mp-pulse-ring 1.6s ease-out infinite' }} />}
                 </span>

package/components/contributor/UploadTile.jsx

@@ -1,5 +1,5 @@
 'use client';
-import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import React, { useEffect, useLayoutEffect, useRef } from 'react';
 import { Button } from '../buttons/Button';
 
 const useBrowserEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
@@ -11,18 +11,10 @@ const LINE = { display: 'inline-flex', alignItems: 'center', gap: 4 };
 const FONT = { fontFamily: 'inherit', fontStyle: 'inherit', lineHeight: 'inherit' };
 
 // Square cream key for moving and removing a block. One that can't act is aria-disabled rather than disabled,
-// so it keeps focus when its block reaches the top or the bottom.
+// so it keeps focus when its block reaches the top or the bottom. Its press is CSS (.mp-block-key:active), so a key press does it too.
 function Key({ label, disabled, onClick, buttonRef, children }) {
-  const [down, setDown] = useState(false);
-  const pressed = down && !disabled;
   return (
-    <button type="button" ref={buttonRef} aria-label={label} aria-disabled={disabled || undefined} onClick={disabled ? undefined : onClick}
-      onPointerDown={() => setDown(true)} onPointerUp={() => setDown(false)} onPointerCancel={() => setDown(false)} onPointerLeave={() => setDown(false)}
-      style={{ appearance: 'none', boxSizing: 'border-box', border: '2px solid var(--cream-300)', background: 'linear-gradient(180deg, #fff, var(--cream-100))',
-        boxShadow: pressed ? '0 1px 0 var(--cream-300)' : '0 3px 0 var(--cream-300), inset 0 2px 0 oklch(1 0 0 / 0.45)', width: 44, height: 44, borderRadius: 12,
-        display: 'grid', placeItems: 'center', ...FONT, fontWeight: 'inherit', fontSize: 18, color: 'var(--ink-700)', cursor: disabled ? 'default' : 'pointer', flex: 'none',
-        opacity: disabled ? 0.4 : undefined, transform: pressed ? 'translateY(2px)' : undefined,
-        transition: 'transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out)' }}>
+    <button type="button" ref={buttonRef} className="mp-block-key" aria-label={label} aria-disabled={disabled || undefined} onClick={disabled ? undefined : onClick}>
       {children}
     </button>
   );

package/components/viewer/WhoButton.d.ts

@@ -16,6 +16,8 @@ export interface WhoButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButt
   /** What it says before the reveal. Default "Ready to guess". */
   text?: string;
   onClick?: () => void;
+  /** The button itself, for putting focus back on it when the tray closes. */
+  ref?: React.Ref<HTMLButtonElement>;
 }
 
 export function WhoButton(props: WhoButtonProps): React.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lanre-ds",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Lanre: a design system for a casual exploration game. React components and CSS tokens.",
   "license": "MIT",
   "keywords": [

package/tokens/utilities.css

@@ -29,6 +29,16 @@
 .mp-step-done { --step-highlight: var(--step-done-highlight); --step-fill: var(--step-done-fill); --step-edge: var(--step-done-edge); --step-outline: var(--step-done-outline); }
 .mp-step-current { --step-highlight: var(--step-current-highlight); --step-fill: var(--step-current-fill); --step-edge: var(--step-current-edge); --step-outline: var(--step-current-outline); transform: translateY(-3px); }
 .mp-step-lg { width: 40px; height: 25px; font-size: 17px; transform: none; }
+/* StepBar's celebration: the fill grows, then the new marker pops. Classes, so reduced motion can switch them off (the rule below only shortens animations, and these wait before they start). */
+.mp-trail-fill-grow { animation: mp-trail-grow var(--dur-slow) var(--ease-out) 260ms both; }
+.mp-step-pop { animation: mp-pop var(--dur-slow) var(--ease-bounce) 560ms both; }
+@media (prefers-reduced-motion: reduce) { .mp-trail-fill-grow, .mp-step-pop { animation: none; } }
+/* RadioCard presses down like a bevelled button (CSS, so a key press does it too). */
+.mp-radio-card:active { transform: translateY(3px); }
+/* UploadTile's move and remove keys press down like a bevelled button. One that can't act (aria-disabled) stays still. */
+.mp-block-key { appearance: none; box-sizing: border-box; flex: none; width: 44px; height: 44px; border: 2px solid var(--cream-300); border-radius: 12px; background: linear-gradient(180deg, #fff, var(--cream-100)); box-shadow: 0 3px 0 var(--cream-300), inset 0 2px 0 oklch(1 0 0 / 0.45); display: grid; place-items: center; font-family: inherit; font-style: inherit; font-weight: inherit; line-height: inherit; font-size: 18px; color: var(--ink-700); cursor: pointer; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
+.mp-block-key[aria-disabled='true'] { opacity: 0.4; cursor: default; }
+.mp-block-key:active:not([aria-disabled='true']) { transform: translateY(2px); box-shadow: 0 1px 0 var(--cream-300); }
 @media (prefers-reduced-motion: reduce) {
   *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
 }