@vvedantb/ui 0.33.0 → 0.34.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vvedantb/ui",
-  "version": "0.33.0",
+  "version": "0.34.0",
   "license": "MIT",
   "description": "Shared React 19 UI for web apps: one main JavaScript entry (primitives, shell pieces, app helpers including the Convex and Clerk provider, VITE env parsing and ensure-user, artifact viewers over the @vvedantb/server artifacts core, native tokens), a client entry without @vvedantb/server, convex or Clerk for Chrome extensions, design-token CSS, shared Tailwind v4 CSS, a Tailwind preset and packaged Instrument Sans fonts.",
   "type": "module",

package/tokens/README.md

@@ -13,7 +13,7 @@ Design tokens and shared Tailwind v4 CSS for the vvedantb web apps. The CSS and
 | `@vvedantb/ui/tokens/css/modal.css` | `src/css/modal.css` | `.t-modal`, `.is-open`, `.is-closing` and `t-modal-presence-wait` (`@layer components`). |
 | `@vvedantb/ui/tokens/css/tabs.css` | `src/css/tabs.css` | `.t-tabs` container (0.15.0), `.t-tab` with its press scale, active colour, `.t-tabs-pill`, small-screen `.t-tabs` scrolling. |
 | `@vvedantb/ui/tokens/css/tabs-pills.css` | `src/css/tabs-pills.css` | `--tabs-*` colour variables, `.t-tabs--segmented`, `.t-tabs--pills` and pill hover / active fills. |
-| `@vvedantb/ui/tokens/css/utilities.css` | `src/css/utilities.css` | `@utility hit-target` and `@utility reveal-on-hover`. `rounded-surface` moved to `tokens.css` in 0.7.1. |
+| `@vvedantb/ui/tokens/css/utilities.css` | `src/css/utilities.css` | `@utility hit-target`, `reveal-on-hover`, `motion-press`, `motion-base`, `motion-emphasized` and `scrollbar-none`. The motion utilities read `--motion-fast`, `--motion-base`, `--motion-ease-out` and `--motion-ease-emphasized`, with defaults in the utility. `rounded-surface` moved to `tokens.css` in 0.7.1. |
 | `@vvedantb/ui/tokens/css/scrollbar-thin.css` | `src/css/scrollbar-thin.css` | `.scrollbar-thin` (`@layer utilities`, always emitted). Imported by `tokens.css` from 0.15.0. |
 | `@vvedantb/ui/tokens/css/clear-input.css` | `src/css/clear-input.css` | `ClearInput` layers (`.t-clear*`) and the `--clear-*` / `--glow-*` timings. Imported by `tokens.css`. From 0.15.1 the layers clip in `.t-clear-clip`, so `.t-clear` keeps the focus ring, and the placeholder layer only shows during `.is-clearing`. |
 | `@vvedantb/ui/tokens/css/motion.css` | `src/css/motion.css` | `.ui-page-enter`, `.ui-enter`, `.ui-enter-up`, `.ui-stagger`, their keyframes and reduced-motion rules, and the `html[data-page-motion="off"]` overrides for `PageMotionProvider`. Imported by `tokens.css`. |
@@ -72,7 +72,7 @@ Tailwind inlines an `@import` where it sits, even in the middle of a file (it mu
 | `modal.css` | `--modal-open-dur`, `--modal-close-dur`, `--modal-scale`, `--modal-scale-close`, `--modal-ease` | tokens.css (0.15.0), or app `:root` with the compat file |
 | `tabs.css` | `--tabs-dur`, `--tabs-ease` (tokens.css, or app `:root` with the compat file); `--tabs-text-muted`, `--tabs-text-active`, `--tabs-pill-bg` | colours: tabs-pills.css or the app theme |
 | `tabs-pills.css` | `--muted`, `--segment`, `--segment-foreground`, `--default` | tokens.css or the app theme |
-| `utilities.css` | `--breakpoint-sm` (Tailwind default or app theme) | Tailwind |
+| `utilities.css` | `--breakpoint-sm` (Tailwind default or app theme); optional `--motion-*` | Tailwind |
 | `scrollbar-thin.css` | `--scrollbar` | tokens.css or the app theme |
 | `clear-input.css`, `motion.css` | none (own `:root` defaults) | |
 | `type-scale.css` | none (own `@theme` values) | |

package/tokens/src/css/compat-shadcn-rgb.css

@@ -81,6 +81,16 @@
   border-radius: clamp(0.75rem, var(--radius), 1rem);
 }
 
+@utility rounded-t-surface {
+  border-radius: clamp(0.75rem, var(--radius), 1rem)
+    clamp(0.75rem, var(--radius), 1rem) 0 0;
+}
+
+@utility rounded-b-surface {
+  border-radius: 0 0 clamp(0.75rem, var(--radius), 1rem)
+    clamp(0.75rem, var(--radius), 1rem);
+}
+
 @utility rounded-menu-item {
   border-radius: min(var(--radius), 0.5rem);
 }

package/tokens/src/css/utilities.css

@@ -1,6 +1,13 @@
 /*
  * @vvedantb/ui/tokens/css/utilities.css: Tailwind `@utility` helpers. Generated
  * only when used, and they take variants (e.g. `max-sm:hit-target`).
+ *
+ * The motion utilities read these variables. Set them on :root to change
+ * (defaults shown):
+ *   --motion-fast: 150ms (press feedback)
+ *   --motion-base: 220ms (colour, shadow, opacity)
+ *   --motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1)
+ *   --motion-ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1)
  */
 
 /* Extends sub-40px controls to a 40x40px tap target without changing layout.
@@ -32,3 +39,52 @@
     }
   }
 }
+
+/* Each motion utility lists `scale`, `translate` and `rotate` as well as
+   `transform`. Tailwind v4 compiles `scale-[0.98]` to `scale: 0.98` and
+   `translate-x-*` to `translate: ...`, the individual transform properties.
+   `transition-property: transform` does not match them, so without them a
+   press or slide would not animate. */
+
+/* Hover and state changes: colour, shadow, opacity and transforms. */
+@utility motion-base {
+  transition-property:
+    color, background-color, border-color, box-shadow, transform, scale,
+    translate, rotate, opacity;
+  transition-duration: var(--motion-base, 220ms);
+  transition-timing-function: var(--motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1));
+}
+
+/* Movement on screen: transforms, opacity and shadow on the emphasized curve. */
+@utility motion-emphasized {
+  transition-property: transform, scale, translate, rotate, opacity, box-shadow;
+  transition-duration: var(--motion-base, 220ms);
+  transition-timing-function: var(--motion-ease-emphasized, cubic-bezier(0.2, 0.8, 0.2, 1));
+}
+
+/* Pressable controls: pair with `active:scale-[0.97]`. The press runs on
+   --motion-fast and colour trails on --motion-base. It covers colour too,
+   because Tailwind's `transition-colors` comes later in the sheet at the same
+   specificity and would replace this whole declaration. So call sites need no
+   separate `transition-*` class. */
+@utility motion-press {
+  transition-property:
+    transform, scale, translate, rotate, color, background-color, border-color,
+    box-shadow, opacity, fill, stroke;
+  transition-duration:
+    var(--motion-fast, 150ms), var(--motion-fast, 150ms),
+    var(--motion-fast, 150ms), var(--motion-fast, 150ms),
+    var(--motion-base, 220ms), var(--motion-base, 220ms),
+    var(--motion-base, 220ms), var(--motion-base, 220ms),
+    var(--motion-base, 220ms), var(--motion-base, 220ms),
+    var(--motion-base, 220ms);
+  transition-timing-function: var(--motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1));
+}
+
+/* Hides the scrollbar. The element still scrolls (wheel, drag, script). */
+@utility scrollbar-none {
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}

package/tokens/src/tokens.css

@@ -118,6 +118,16 @@
   border-radius: clamp(0.75rem, var(--radius), 1rem);
 }
 
+@utility rounded-t-surface {
+  border-radius: clamp(0.75rem, var(--radius), 1rem)
+    clamp(0.75rem, var(--radius), 1rem) 0 0;
+}
+
+@utility rounded-b-surface {
+  border-radius: 0 0 clamp(0.75rem, var(--radius), 1rem)
+    clamp(0.75rem, var(--radius), 1rem);
+}
+
 @utility rounded-menu-item {
   border-radius: min(var(--radius), 0.5rem);
 }