lanre-ds 0.2.0 → 0.2.1

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lanre-ds",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "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,12 @@
 .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); }
 @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; }
 }