hlmnhkl-ui 0.35.1 → 0.35.2

package/README.md

@@ -9,6 +9,10 @@ React components, measured down to the part you never see: the 44px tap area, th
 
 **[Docs](https://ui.hlmnhkl.my)** · [Installation](https://ui.hlmnhkl.my/installation) · [Components](https://ui.hlmnhkl.my/button) · [What's new](https://ui.hlmnhkl.my/changelog)
 
+<img alt="Four hlmnhkl/ui controls in use: a Dial turned to a new oven temperature, a RulerScrubber dragged and landing on a mark, a SwipeDeck card thrown right and the next thrown left, and a SplitFlap board flipping to new times." src="https://raw.githubusercontent.com/hilmanhaikal/hlmnhkl-ui/main/.github/assets/signature.gif" width="600">
+
+Controls that feel like real ones: Dial, RulerScrubber, SwipeDeck, SplitFlap and more. Plus the everyday parts every app needs: buttons, inputs, sheets, tables, menus and 60 more.
+
 ## Install
 
 From your app's folder, set it up once, then copy the components you need:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hlmnhkl-ui",
-  "version": "0.35.1",
+  "version": "0.35.2",
   "description": "React components in black, white and grey with one blue accent. Copy them into your app with npx hlmnhkl-ui add <name>.",
   "license": "MIT",
   "homepage": "https://ui.hlmnhkl.my",

package/src/components/SwipeDeck/SwipeDeck.module.css

@@ -147,8 +147,16 @@
   margin-inline: auto;
 }
 
+/* Registered so the fill can ease back after a throw instead of snapping off in one frame. */
+@property --fill {
+  syntax: '<number>';
+  inherits: true;
+  initial-value: 0;
+}
+
 .choice {
   --fill: 0;
+  transition: --fill var(--hl-motion-base) var(--hl-ease-out);
   position: relative;
   display: grid;
   min-block-size: var(--hl-control-h-lg);
@@ -172,6 +180,10 @@
   white-space: nowrap;
 }
 
+.root:has(.deck[data-dragging]) .choice {
+  transition: none;
+}
+
 /* The fill pours in from the button's inner edge toward the side the card goes, and the word under it turns to its ink. */
 .fill {
   position: absolute;

package/src/components/SwipeDeck/SwipeDeck.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { useEffect, useLayoutEffect, useRef, useState, type ComponentPropsWithRef, type KeyboardEvent, type PointerEvent, type ReactNode } from 'react'
+import { flushSync } from 'react-dom'
 import { cx } from '../../internal/cx'
 import { clamp, magnetTo, pull, speedTracker, springTo } from '../../internal/feel'
 import { UndoIcon } from '../../internal/icons'
@@ -133,8 +134,10 @@ export function SwipeDeck<T>({
 
   const finish = (side: Side) => {
     stop.current = () => {}
+    // The next card must be in place before the top card's transform resets, or the thrown card
+    // shows in the middle for a frame.
+    flushSync(() => commit(side))
     paint(0)
-    commit(side)
   }
 
   const fly = (side: Side, velocity: number) => {