@usableapp/cardds 0.7.84 → 0.7.85

package/dist/stamp/StampOn.d.ts

@@ -15,6 +15,11 @@ export interface StampOnProps extends ComponentProps<'div'> {
     onAtChange?: (at: StampAt) => void;
     /** a draggable stamp's accessible name ("แสตมป์ของต้น") */
     label?: string;
+    /** the stamp sticks ITSELF: as it comes onto the screen it is struck onto its place (shown large, pressed down to its size). Nobody
+     *  picked it or pressed to stick it — the app shows it when its own move (send) begins. With `onArrived` */
+    arrive?: boolean;
+    /** an arriving stamp has LANDED (its strike ended; at once where motion is off) — the app does what follows: sends, closes */
+    onArrived?: () => void;
 }
 /**
  * StampOn — a Stamp (the child) stuck on a surface at the place the member chose. The surface is the nearest positioned box:
@@ -22,5 +27,6 @@ export interface StampOnProps extends ComponentProps<'div'> {
  * The stamp is the SMALL size: 48 × 60 on any surface, whatever the surface's size (`--stamp-sm-size`, one tap wide).
  * With `onAtChange` the member drags it (finger or mouse; the arrow keys move it too): while the finger holds, the stamp writes its
  * own place, and on letting go it ASKS — the app owns `at`. It never leaves the surface.
+ * With `arrive` it sticks itself: struck onto its place as it comes on, and `onArrived` tells the app it has landed.
  */
-export declare function StampOn({ at, defaultAt, turn, onAtChange, label, className, style, children, ...rest }: StampOnProps): import("react").JSX.Element;
+export declare function StampOn({ at, defaultAt, turn, onAtChange, label, arrive, onArrived, className, style, onAnimationEnd, children, ...rest }: StampOnProps): import("react").JSX.Element;

package/dist/stamp/StampOn.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { cx } from '../cx.js';
-import { useControlled } from '../state.js';
+import { reducedMotion, useControlled } from '../state.js';
 const MIDDLE = { x: 0.5, y: 0.5 };
 const STEP = 0.02; // an arrow key's move: a share of the surface
 const MOVES = { ArrowLeft: [-STEP, 0], ArrowRight: [STEP, 0], ArrowUp: [0, -STEP], ArrowDown: [0, STEP] };
@@ -15,6 +15,7 @@ function within(el, x, y) {
     const mx = el.offsetWidth / 2 / box.clientWidth, my = el.offsetHeight / 2 / box.clientHeight;
     return { x: round(clamp(x, mx, 1 - mx)), y: round(clamp(y, my, 1 - my)) };
 }
+const STRIKE = 'stamp-on-strike'; // css/stamp.css
 const write = (el, at) => { el.style.setProperty('--stamp-on-x', String(at.x)); el.style.setProperty('--stamp-on-y', String(at.y)); };
 /**
  * StampOn — a Stamp (the child) stuck on a surface at the place the member chose. The surface is the nearest positioned box:
@@ -22,8 +23,9 @@ const write = (el, at) => { el.style.setProperty('--stamp-on-x', String(at.x));
  * The stamp is the SMALL size: 48 × 60 on any surface, whatever the surface's size (`--stamp-sm-size`, one tap wide).
  * With `onAtChange` the member drags it (finger or mouse; the arrow keys move it too): while the finger holds, the stamp writes its
  * own place, and on letting go it ASKS — the app owns `at`. It never leaves the surface.
+ * With `arrive` it sticks itself: struck onto its place as it comes on, and `onArrived` tells the app it has landed.
  */
-export function StampOn({ at, defaultAt = MIDDLE, turn = 0, onAtChange, label, className, style, children, ...rest }) {
+export function StampOn({ at, defaultAt = MIDDLE, turn = 0, onAtChange, label, arrive, onArrived, className, style, onAnimationEnd, children, ...rest }) {
     const [shown, request] = useControlled(at, defaultAt, onAtChange);
     const [held, setHeld] = useState(false);
     const grip = useRef(null);
@@ -64,7 +66,16 @@ export function StampOn({ at, defaultAt = MIDDLE, turn = 0, onAtChange, label, c
         e.preventDefault();
         ask(within(e.currentTarget, shown.x + by[0], shown.y + by[1]));
     };
+    const landed = useRef(onArrived);
+    landed.current = onArrived;
+    useEffect(() => { if (arrive && reducedMotion())
+        landed.current?.(); }, [arrive]); // no strike to wait for
+    const struck = (e) => {
+        onAnimationEnd?.(e);
+        if (arrive && e.target === e.currentTarget && e.animationName === STRIKE)
+            onArrived?.();
+    };
     const place = { '--stamp-on-x': shown.x, '--stamp-on-y': shown.y, '--stamp-on-turn': turn, ...style };
     const drag = moves ? { tabIndex: 0, role: 'group', 'aria-label': label, onPointerDown: down, onPointerMove: move, onPointerUp: up, onPointerCancel: up, onKeyDown: key } : null;
-    return (_jsx("div", { className: cx('stamp-on', moves && 'stamp-on--move', held && 'is-held', className), style: place, ...rest, ...drag, children: children }));
+    return (_jsx("div", { className: cx('stamp-on', moves && 'stamp-on--move', arrive && 'stamp-on--arrive', held && 'is-held', className), style: place, onAnimationEnd: struck, ...rest, ...drag, children: children }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usableapp/cardds",
-  "version": "0.7.84",
+  "version": "0.7.85",
   "license": "UNLICENSED",
   "type": "module",
   "description": "card-first mobile design system, React-first: the components in src/ are thin wrappers over the CSS contract (css/*.css stays the only truth); gallery/ shows every story live (npm run dev), tests/ measures the geometry.",