@stateglyph/transitions 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Kamalveer Singh
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,30 @@
+# @stateglyph/transitions
+
+Optional, accessible CSS transitions for StateGlyph React icons.
+
+```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:
+
+```css
+.status-icon {
+  --stateglyph-duration: 300ms;
+  --stateglyph-spin-duration: 1.2s;
+  --stateglyph-easing: ease-in-out;
+}
+```
+
+All animation is disabled when the user enables reduced motion.

package/THIRD_PARTY_NOTICES.md

@@ -0,0 +1,52 @@
+# Third-party notices
+
+StateGlyph uses glyphs from [Lucide](https://lucide.dev/) through
+`lucide-react`. Lucide is licensed under the ISC License. Some Lucide glyphs
+are derived from Feather Icons and remain available under the MIT License.
+
+## Lucide Icons
+
+ISC License
+
+Copyright (c) 2026 Lucide Icons and Contributors
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY
+SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION
+OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN
+CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+
+## Feather Icons
+
+The following Lucide glyphs used by StateGlyph are derived from Feather Icons:
+`check`, `chevron-down`, `chevron-left`, `chevron-right`, `chevron-up`,
+`download`, `maximize`, `minimize`, `minimize-2`, `pause`, `sidebar`,
+`trash-2`, `upload`, and `x`.
+
+The MIT License (MIT)
+
+Copyright (c) 2013-present Cole Bemis
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+declare const stateGlyphTransitions: readonly ["crossfade", "scale-fade", "rotate", "slide", "morph"];
+type StateGlyphTransitionName = (typeof stateGlyphTransitions)[number];
+declare const stateGlyphTransitionDurations: {
+    crossfade: string;
+    "scale-fade": string;
+    rotate: string;
+    slide: string;
+    morph: string;
+};
+
+export { type StateGlyphTransitionName, stateGlyphTransitionDurations, stateGlyphTransitions };

package/dist/index.js

@@ -0,0 +1,19 @@
+// src/index.ts
+var stateGlyphTransitions = [
+  "crossfade",
+  "scale-fade",
+  "rotate",
+  "slide",
+  "morph"
+];
+var stateGlyphTransitionDurations = {
+  crossfade: "180ms",
+  "scale-fade": "200ms",
+  rotate: "240ms",
+  slide: "220ms",
+  morph: "240ms"
+};
+export {
+  stateGlyphTransitionDurations,
+  stateGlyphTransitions
+};

package/dist/styles.css

@@ -0,0 +1,82 @@
+:where([data-state-icon][data-transition]) {
+  transform-box: fill-box;
+  transform-origin: center;
+}
+
+[data-state-icon][data-transition="crossfade"] {
+  animation: stateglyph-crossfade var(--stateglyph-duration, 180ms)
+    var(--stateglyph-easing, ease-out) both;
+}
+
+[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;
+}
+
+[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;
+}
+
+[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;
+}
+
+[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);
+  }
+}
+
+@keyframes stateglyph-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-state-icon][data-transition],
+  [data-state-icon][data-state-continuous="true"] {
+    animation: none;
+  }
+}

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@stateglyph/transitions",
+  "version": "0.1.0",
+  "description": "CSS transitions for StateGlyph React icons.",
+  "license": "MIT",
+  "author": "Kamalveer Singh",
+  "keywords": [
+    "icons",
+    "css",
+    "transitions",
+    "animation",
+    "accessibility"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kamalhara/StateGlyph.git",
+    "directory": "packages/transitions"
+  },
+  "homepage": "https://github.com/kamalhara/StateGlyph#readme",
+  "bugs": {
+    "url": "https://github.com/kamalhara/StateGlyph/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "sideEffects": [
+    "./dist/styles.css"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE",
+    "THIRD_PARTY_NOTICES.md"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format esm --dts --clean && cp src/styles.css dist/styles.css",
+    "dev": "tsup src/index.ts --format esm --dts --watch",
+    "prepack": "node ../../scripts/sync-package-legal-files.mjs",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "engines": {
+    "node": ">=22.19.0"
+  }
+}