hlmnhkl-ui 0.35.0 → 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.0",
+  "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",
@@ -25,7 +25,8 @@
   ],
   "scripts": {
     "typecheck": "tsc -p tsconfig.json",
-    "add": "node scripts/add.js"
+    "add": "node scripts/add.js",
+    "prepublishOnly": "node scripts/check-publish.mjs"
   },
   "devDependencies": {
     "@types/react": "^19.3.0",

package/scripts/add.js

@@ -41,6 +41,17 @@ const KINDS = [
   { key: 'theme', plural: 'Themes', folder: 'themes', pro: true, single: true },
 ].map((k) => ({ ...k, dir: join(SRC, k.folder) }))
 
+// The import lines as they read from the app's entry file. A folder inside src/ is written
+// relative to src/ (Vite, Next and most setups keep the entry there), so it can be pasted as is.
+function fromEntry(folder, both = true) {
+  const clean = folder.replace(/^\.\//, '').replace(/\/$/, '')
+  const inSrc = clean.startsWith('src/')
+  const rel = inSrc ? clean.slice(4) : clean
+  const where = inSrc ? 'in your entry file inside src/ (for example src/main.tsx):' : 'in a file at your project root:'
+  const lines = [`import './${rel}/tokens.css'`, ...(both ? [`import './${rel}/base.css'`] : [])]
+  return `${where}\n${lines.map((l) => `       ${l}`).join('\n')}`
+}
+
 function fail(message, usage = true) {
   console.error(`Error: ${message}`)
   if (usage) console.error(`\n${USAGE}`)
@@ -352,7 +363,7 @@ function runInit(opts) {
     if (!opts.dryRun) writeFileSync(config, `${JSON.stringify({ to: folder }, null, 2)}\n`)
     console.log(`  ${CONFIG}: added, so later commands put files in ${folder}`)
   }
-  console.log(`\nNext:\n  1. Import both once at your app root, tokens first:\n       import './${folder.replace(/^\.\//, '')}/tokens.css'\n       import './${folder.replace(/^\.\//, '')}/base.css'`)
+  console.log(`\nNext:\n  1. Import both once, tokens first, ${fromEntry(folder)}`)
   console.log(`  2. Add your first component: npx hlmnhkl-ui add button`)
   console.log(`  See everything there is: npx hlmnhkl-ui list, or ${SITE}`)
 }
@@ -417,7 +428,7 @@ function runAdd(opts) {
     for (const s of skipped) console.log(`  ${s}`)
     if (skipped.some((s) => /^(tokens|base)\.css /.test(s))) console.log('  tokens.css and base.css are never replaced, so your theme edits stay.')
   }
-  if (tokensNew) console.log(`Next: import ${join(opts.to || readConfig()?.to || DEFAULT_TO, 'tokens.css')} once at your app root (or run init).`)
+  if (tokensNew) console.log(`Next: import tokens.css once ${fromEntry(opts.to || readConfig()?.to || DEFAULT_TO, false)} (or run init).`)
   if (items.some((i) => i.kind === 'theme')) console.log('Themes: import each one after tokens.css, then set data-theme-brand or data-density on <html>.')
 }
 

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) => {