lanre-ds 0.2.1 → 0.2.2

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.1",
+  "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

@@ -35,6 +35,10 @@
 @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; }
 }