@evinvest/uikit 0.10.0 → 0.11.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@evinvest/uikit",
-  "version": "0.10.0",
+  "version": "0.11.1",
   "description": "Dep-light React UI kit: shadcn-semantics components with zero @radix-ui / cva, mirroring the ev_lib::uikit Rust feature. Ships the shared design tokens.",
   "license": "BlueOak-1.0.0",
   "publishConfig": {
@@ -17,7 +17,9 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
-    "./styles/tokens.css": "./styles/tokens.css"
+    "./styles/tokens.css": "./styles/tokens.css",
+    "./styles/tokens-legacy.css": "./styles/tokens-legacy.css",
+    "./styles/motion.css": "./styles/motion.css"
   },
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
@@ -35,7 +37,7 @@
     "build": "tsup",
     "test": "vitest run",
     "typecheck": "tsc --noEmit",
-    "prepare": "mkdir -p styles && cp ../../tokens.css styles/tokens.css && tsup",
+    "prepare": "mkdir -p styles && cp ../../tokens.css ../../tokens-legacy.css ../../motion.css styles/ && tsup",
     "prepublishOnly": "node scripts/verify-pack.mjs"
   },
   "peerDependencies": {

package/styles/motion.css

@@ -0,0 +1,172 @@
+/*
+ * Toast (sonner) enter/exit motion, shared by both ports. Imported by the token
+ * sheets so the lifecycle ships with the theme contract.
+ */
+
+/* ── Toast stacking (Sonner-style), shared by both ports via data-stack ──────
+   Both `ev_lib::uikit` (Dioxus) and `@evinvest/uikit` (React) set data-stack on the
+   toaster and drive the same machine: toasts are absolutely stacked at the
+   pinned edge, pile up collapsed (front three peeking, each lifted + scaled by
+   --index and clamped to --front-height), and spread to --offset on hover /
+   keyboard focus (pure CSS — no JS state). Vars: the toaster sets --front-height
+   + --gap; each toast sets --index, --z-index, --offset, --initial-height. React
+   measures real heights; Dioxus can't (host-only), so it feeds a constant height
+   — collapse is exact, expansion is uniform. The enter is a keyframe (plays on
+   DOM insertion, so it works in both ports without a JS mount flip),
+   `data-state=closed` slides out, and the node is dropped on the transitionend. */
+
+[data-slot="toaster"][data-stack] [data-slot="toast"] {
+  position: absolute;
+  --y: translateY(0);
+  opacity: 1;
+  z-index: var(--z-index, 1);
+  transform: var(--y) translateX(var(--swipe-x, 0px));
+  /* a plain easeOut (no overshoot) so a restack settles instead of bouncing
+     back past its slot */
+  transition:
+    transform 350ms cubic-bezier(0.21, 0.8, 0.4, 1),
+    opacity 350ms,
+    height 350ms;
+  /* the enter is a keyframe (plays on DOM insertion in both ports — no JS mount
+     flip, whose pre-paint timing the Dioxus effect couldn't drive). It animates
+     the independent `translate` property, NOT `transform`, so it *composes* with
+     the stack transform instead of overriding it: a toast pushed back mid-enter
+     keeps repositioning smoothly instead of fighting the keyframe (rapid-fire
+     lag). */
+  animation: ev-toast-enter 350ms cubic-bezier(0.21, 0.8, 0.4, 1) backwards;
+}
+@keyframes ev-toast-enter {
+  from {
+    opacity: 0;
+    translate: 0 var(--enter-y, 100%);
+  }
+  to {
+    opacity: 1;
+    translate: 0 0;
+  }
+}
+
+/* pin to the toaster's edge; set the lift sign + the off-screen enter offset */
+[data-slot="toaster"][data-stack][data-y-position="bottom"] [data-slot="toast"] {
+  bottom: 0;
+  --lift: -1;
+  --enter-y: 100%;
+}
+[data-slot="toaster"][data-stack][data-y-position="top"] [data-slot="toast"] {
+  top: 0;
+  --lift: 1;
+  --enter-y: -100%;
+}
+
+/* closing: slide back off + fade out; the node is dropped on its transitionend */
+[data-slot="toaster"][data-stack] [data-slot="toast"][data-state="closed"] {
+  --y: translateY(var(--enter-y));
+  opacity: 0;
+}
+
+/* collapsed: back toasts lift + shrink by depth, clamp to the front height */
+[data-slot="toaster"][data-stack]
+  [data-slot="toast"][data-state="open"][data-front="false"] {
+  --y: translateY(calc(var(--lift) * var(--gap) * var(--index)))
+    scale(calc(1 - var(--index) * 0.05));
+  height: var(--front-height);
+}
+[data-slot="toaster"][data-stack] [data-slot="toast"][data-front="false"] > * {
+  opacity: 0;
+  transition: opacity 300ms;
+}
+/* only the front three show while collapsed */
+[data-slot="toaster"][data-stack] [data-slot="toast"][data-visible="false"] {
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* expanded (hover / keyboard focus): spread to the offset, real height, content
+   + overflow back */
+[data-slot="toaster"][data-stack]:hover [data-slot="toast"][data-state="open"],
+[data-slot="toaster"][data-stack]:focus-within
+  [data-slot="toast"][data-state="open"] {
+  --y: translateY(calc(var(--lift) * var(--offset)));
+  height: var(--initial-height);
+}
+[data-slot="toaster"][data-stack]:hover [data-slot="toast"] > *,
+[data-slot="toaster"][data-stack]:focus-within [data-slot="toast"] > *,
+[data-slot="toaster"][data-stack]:hover [data-slot="toast"][data-visible="false"],
+[data-slot="toaster"][data-stack]:focus-within
+  [data-slot="toast"][data-visible="false"] {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* a transparent strip over the gap so the hover area stays contiguous between
+   spread toasts (otherwise the pointer falls through the gap and it collapses) */
+[data-slot="toaster"][data-stack] [data-slot="toast"]::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: calc(var(--gap) + 1px);
+}
+[data-slot="toaster"][data-stack][data-y-position="bottom"]
+  [data-slot="toast"]::after {
+  bottom: 100%;
+}
+[data-slot="toaster"][data-stack][data-y-position="top"]
+  [data-slot="toast"]::after {
+  top: 100%;
+}
+
+/* 1:1 finger tracking during a swipe — kill the transition */
+[data-slot="toaster"][data-stack] [data-slot="toast"][data-swiping="true"] {
+  transition: none;
+}
+
+/* auto-dismiss without a host timer: a no-op "life" animation runs for --life,
+   then its `animationend` fires (the toast closes itself). Hovering/focusing the
+   stack pauses just that animation (animation-play-state's 2nd slot), so the
+   countdown holds — and resumes with the elapsed time preserved — while the
+   enter (1st slot) keeps running. Persistent toasts set data-autodismiss=false,
+   so they get no life animation. (The React port uses setTimeout instead.) */
+@keyframes ev-toast-life {
+  from {
+    --ev-life: 0;
+  }
+  to {
+    --ev-life: 1;
+  }
+}
+[data-slot="toaster"][data-stack]
+  [data-slot="toast"][data-autodismiss="true"][data-state="open"] {
+  animation:
+    ev-toast-enter 350ms cubic-bezier(0.21, 0.8, 0.4, 1) backwards,
+    ev-toast-life var(--life) linear;
+}
+[data-slot="toaster"][data-stack]:hover
+  [data-slot="toast"][data-autodismiss="true"],
+[data-slot="toaster"][data-stack]:focus-within
+  [data-slot="toast"][data-autodismiss="true"] {
+  animation-play-state: running, paused;
+}
+
+/* reduced motion: opacity-only enter + near-instant transform (still fires
+   transitionend, so exit removal works), no height animation */
+@keyframes ev-toast-fade-in {
+  from {
+    opacity: 0;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="toaster"][data-stack] [data-slot="toast"] {
+    transition:
+      transform 1ms linear,
+      opacity 200ms;
+    animation: ev-toast-fade-in 200ms;
+  }
+  /* keep the auto-dismiss life animation under reduced motion */
+  [data-slot="toaster"][data-stack]
+    [data-slot="toast"][data-autodismiss="true"][data-state="open"] {
+    animation:
+      ev-toast-fade-in 200ms,
+      ev-toast-life var(--life) linear;
+  }
+}

package/styles/tokens-legacy.css

@@ -0,0 +1,66 @@
+/*
+ * The pre-0.10 token vocabulary, layered over the current one.
+ *
+ * Import this instead of `tokens.css` while a consumer still writes
+ * `text-main-mist`, `bg-sidebar`, `text-muted-foreground` and friends in its own
+ * markup. It re-declares every old utility name and re-points the current tokens
+ * at the old values, so a kit component styled `bg-card text-ink` renders exactly
+ * what `bg-card text-card-foreground` rendered.
+ *
+ * Paired with the `legacy` Cargo feature and the `./styles/tokens-legacy.css`
+ * export of `@evinvest/uikit`. Both go away together once every consumer has
+ * moved; see docs/spec/accents.md for the model that replaces this.
+ */
+
+@import "./tokens.css";
+
+@theme inline {
+  --color-foreground: var(--ink);
+  --color-card-foreground: var(--ink);
+  --color-popover-foreground: var(--ink);
+  --color-primary-foreground: var(--on-primary);
+  --color-secondary-foreground: var(--on-secondary);
+  --color-accent: var(--hover);
+  --color-accent-foreground: var(--ink);
+  --color-destructive: var(--accent-error);
+  --color-destructive-foreground: var(--on-accent-error);
+
+  /* the sidebar namespace was eight aliases of tokens that already existed */
+  --color-sidebar: var(--secondary);
+  --color-sidebar-foreground: var(--ink);
+  --color-sidebar-primary: var(--primary);
+  --color-sidebar-primary-foreground: var(--on-primary);
+  --color-sidebar-accent: var(--hover);
+  --color-sidebar-accent-foreground: var(--ink);
+  --color-sidebar-border: var(--border);
+  --color-sidebar-ring: var(--ring);
+
+  --color-main-brand: var(--brand);
+  --color-main-black: var(--background);
+  --color-main-surface: var(--secondary);
+  --color-main-card: var(--card);
+  --color-main-mist: #e6e1d3;
+  --color-main-accent-t1: var(--accent-debug);
+  --color-main-accent-t2: var(--positive);
+  --color-main-accent-t3: var(--accent-warn);
+  --color-main-accent-t4: var(--chart-4);
+
+  --color-level-trace: var(--accent-trace);
+  --color-level-debug: var(--accent-debug);
+  --color-level-info: var(--accent-info);
+  --color-level-warn: var(--accent-warn);
+  --color-level-error: #da251d;
+}
+
+/* The seven tokens whose value moved. Everything else in `tokens.css` already
+ * carries its pre-0.10 value. */
+:root,
+.dark {
+  --ink: white;
+  --ink-mid: #e6e1d3;
+  --ink-soft: color-mix(in srgb, #e6e1d3 65%, transparent);
+  --hover: color-mix(in srgb, #e6e1d3 8%, transparent);
+  --border: color-mix(in srgb, #e6e1d3 14%, transparent);
+  --input: color-mix(in srgb, #e6e1d3 20%, transparent);
+  --on-secondary: white;
+}