@stateglyph/transitions 0.1.0 → 0.2.0

package/README.md

@@ -1,23 +1,19 @@
 # @stateglyph/transitions
 
-Optional, accessible CSS transitions for StateGlyph React icons.
+Optional CSS timing presets for StateGlyph's built-in animated state changes.
 
 ```bash
 npm install @stateglyph/react @stateglyph/transitions
 ```
 
-Import the stylesheet once near the root of your application:
-
 ```ts
 import "@stateglyph/transitions/styles.css";
 ```
 
-StateGlyph components expose their definition's transition through a
-`data-transition` attribute, so no wrapper or per-icon class is required. The
-stylesheet implements `crossfade`, `scale-fade`, `rotate`, `slide`, and
-`morph`, plus continuous rotation for loading states.
-
-You can customize timing with CSS custom properties:
+React components and CLI-generated components animate without this stylesheet.
+The renderer retains the outgoing glyph while the incoming glyph enters, using
+`crossfade`, `scale-fade`, `rotate`, `slide`, or a blur blend named `morph`.
+The optional stylesheet sets timing defaults using `data-transition`.
 
 ```css
 .status-icon {
@@ -27,4 +23,7 @@ You can customize timing with CSS custom properties:
 }
 ```
 
-All animation is disabled when the user enables reduced motion.
+Set a custom duration on a class or parent scope. Explicit React `duration` and
+`spinDuration` props take precedence over CSS variables. Use `animated={false}`
+to disable animation on one component. Live reduced-motion preferences disable
+both state transitions and continuous rotation.

package/dist/styles.css

@@ -1,82 +1,32 @@
 :where([data-state-icon][data-transition]) {
-  transform-box: fill-box;
-  transform-origin: center;
+  --stateglyph-preset-spin-duration: 900ms;
+  --stateglyph-preset-easing: cubic-bezier(0.22, 1, 0.36, 1);
 }
 
 [data-state-icon][data-transition="crossfade"] {
-  animation: stateglyph-crossfade var(--stateglyph-duration, 180ms)
-    var(--stateglyph-easing, ease-out) both;
+  --stateglyph-preset-duration: 180ms;
 }
-
 [data-state-icon][data-transition="scale-fade"] {
-  animation: stateglyph-scale-fade var(--stateglyph-duration, 200ms)
-    var(--stateglyph-easing, cubic-bezier(0.22, 1, 0.36, 1)) both;
+  --stateglyph-preset-duration: 200ms;
 }
-
 [data-state-icon][data-transition="rotate"] {
-  animation: stateglyph-rotate var(--stateglyph-duration, 240ms)
-    var(--stateglyph-easing, cubic-bezier(0.22, 1, 0.36, 1)) both;
+  --stateglyph-preset-duration: 240ms;
 }
-
 [data-state-icon][data-transition="slide"] {
-  animation: stateglyph-slide var(--stateglyph-duration, 220ms)
-    var(--stateglyph-easing, cubic-bezier(0.22, 1, 0.36, 1)) both;
+  --stateglyph-preset-duration: 220ms;
 }
-
 [data-state-icon][data-transition="morph"] {
-  animation: stateglyph-morph var(--stateglyph-duration, 240ms)
-    var(--stateglyph-easing, cubic-bezier(0.22, 1, 0.36, 1)) both;
-}
-
-[data-state-icon][data-state-continuous="true"] {
-  animation: stateglyph-spin var(--stateglyph-spin-duration, 900ms) linear
-    infinite;
-}
-
-@keyframes stateglyph-crossfade {
-  from {
-    opacity: 0;
-  }
-}
-
-@keyframes stateglyph-scale-fade {
-  from {
-    opacity: 0;
-    transform: scale(0.82);
-  }
-}
-
-@keyframes stateglyph-rotate {
-  from {
-    opacity: 0;
-    transform: rotate(-35deg) scale(0.9);
-  }
-}
-
-@keyframes stateglyph-slide {
-  from {
-    opacity: 0;
-    transform: translateY(18%);
-  }
-}
-
-@keyframes stateglyph-morph {
-  from {
-    opacity: 0;
-    filter: blur(2px);
-    transform: scale(0.9) rotate(-8deg);
-  }
+  --stateglyph-preset-duration: 240ms;
 }
 
-@keyframes stateglyph-spin {
-  to {
-    transform: rotate(360deg);
-  }
+[data-state-layer] {
+  transform-box: view-box;
+  transform-origin: center;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  [data-state-icon][data-transition],
-  [data-state-icon][data-state-continuous="true"] {
-    animation: none;
+  [data-state-icon][data-transition] {
+    --stateglyph-preset-duration: 0ms;
+    --stateglyph-preset-spin-duration: 0ms;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stateglyph/transitions",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "CSS transitions for StateGlyph React icons.",
   "license": "MIT",
   "author": "Kamalveer Singh",