@evinvest/uikit 0.11.0 → 0.11.2

package/styles/motion.css

@@ -1,172 +0,0 @@
-/*
- * 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;
-  }
-}