@kouji-ui/core 0.2.0 → 0.3.0

package/motion/motion.css

@@ -0,0 +1,90 @@
+/* ─────────────────────────────────────────────────────────────
+   @kouji-ui/core — motion preset library
+   Named, composable entrance/exit animations applied via the
+   `kjMotion` directive (or a bare `.kj-motion[data-kj-motion]`
+   element). Reduced-motion aware: every preset collapses to a
+   ~1ms opacity fade with no transform under
+   `prefers-reduced-motion: reduce` (WCAG 2.1 AAA 2.3.3).
+
+   Timing/easing/distance are read from `--kj-motion-*` custom
+   properties (themeable via @kouji-ui/themes) with inline
+   fallbacks so this file also works standalone.
+   ──────────────────────────────────────────────────────────── */
+
+@layer kj.component {
+  .kj-motion {
+    --_kj-motion-duration: var(--kj-motion-duration-md, 250ms);
+    --_kj-motion-ease: var(--kj-motion-ease, cubic-bezier(0.16, 1, 0.3, 1));
+    --_kj-motion-ease-in: var(--kj-motion-ease-in, cubic-bezier(0.7, 0, 0.84, 0));
+    --_kj-motion-ease-spring: var(--kj-motion-ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
+    --_kj-motion-distance: var(--kj-motion-distance, 0.5rem);
+
+    animation-duration: var(--_kj-motion-duration);
+    animation-timing-function: var(--_kj-motion-ease);
+    animation-fill-mode: both;
+  }
+
+  /* Exit keyframes ease "in" (accelerate away). */
+  .kj-motion[data-kj-motion-state="exit"] {
+    animation-timing-function: var(--_kj-motion-ease-in);
+  }
+
+  /* ── fade ─────────────────────────────────────────────── */
+  .kj-motion[data-kj-motion="fade"][data-kj-motion-state="enter"] { animation-name: kj-fade-in; }
+  .kj-motion[data-kj-motion="fade"][data-kj-motion-state="exit"]  { animation-name: kj-fade-out; }
+
+  /* ── slide-up / down / left / right (transform only) ──── */
+  .kj-motion[data-kj-motion="slide-up"][data-kj-motion-state="enter"]    { animation-name: kj-slide-up-in; }
+  .kj-motion[data-kj-motion="slide-up"][data-kj-motion-state="exit"]     { animation-name: kj-slide-up-out; }
+  .kj-motion[data-kj-motion="slide-down"][data-kj-motion-state="enter"]  { animation-name: kj-slide-down-in; }
+  .kj-motion[data-kj-motion="slide-down"][data-kj-motion-state="exit"]   { animation-name: kj-slide-down-out; }
+  .kj-motion[data-kj-motion="slide-left"][data-kj-motion-state="enter"]  { animation-name: kj-slide-left-in; }
+  .kj-motion[data-kj-motion="slide-left"][data-kj-motion-state="exit"]   { animation-name: kj-slide-left-out; }
+  .kj-motion[data-kj-motion="slide-right"][data-kj-motion-state="enter"] { animation-name: kj-slide-right-in; }
+  .kj-motion[data-kj-motion="slide-right"][data-kj-motion-state="exit"]  { animation-name: kj-slide-right-out; }
+
+  /* ── scale ────────────────────────────────────────────── */
+  .kj-motion[data-kj-motion="scale"][data-kj-motion-state="enter"] { animation-name: kj-scale-in; }
+  .kj-motion[data-kj-motion="scale"][data-kj-motion-state="exit"]  { animation-name: kj-scale-out; }
+
+  /* ── slide-up-fade (composed: transform + opacity) ────── */
+  .kj-motion[data-kj-motion="slide-up-fade"][data-kj-motion-state="enter"] { animation-name: kj-slide-up-fade-in; }
+  .kj-motion[data-kj-motion="slide-up-fade"][data-kj-motion-state="exit"]  { animation-name: kj-slide-up-fade-out; }
+
+  /* ── scale-spring (springy easing) ────────────────────── */
+  .kj-motion[data-kj-motion="scale-spring"] { animation-timing-function: var(--_kj-motion-ease-spring); }
+  .kj-motion[data-kj-motion="scale-spring"][data-kj-motion-state="enter"] { animation-name: kj-scale-in; }
+  .kj-motion[data-kj-motion="scale-spring"][data-kj-motion-state="exit"]  { animation-name: kj-scale-out; }
+
+  /* ── keyframes ────────────────────────────────────────── */
+  @keyframes kj-fade-in  { from { opacity: 0; } to { opacity: 1; } }
+  @keyframes kj-fade-out { from { opacity: 1; } to { opacity: 0; } }
+
+  @keyframes kj-slide-up-in     { from { transform: translateY(var(--_kj-motion-distance)); } to { transform: translateY(0); } }
+  @keyframes kj-slide-up-out    { from { transform: translateY(0); } to { transform: translateY(calc(-1 * var(--_kj-motion-distance))); } }
+  @keyframes kj-slide-down-in   { from { transform: translateY(calc(-1 * var(--_kj-motion-distance))); } to { transform: translateY(0); } }
+  @keyframes kj-slide-down-out  { from { transform: translateY(0); } to { transform: translateY(var(--_kj-motion-distance)); } }
+  @keyframes kj-slide-left-in   { from { transform: translateX(var(--_kj-motion-distance)); } to { transform: translateX(0); } }
+  @keyframes kj-slide-left-out  { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--_kj-motion-distance))); } }
+  @keyframes kj-slide-right-in  { from { transform: translateX(calc(-1 * var(--_kj-motion-distance))); } to { transform: translateX(0); } }
+  @keyframes kj-slide-right-out { from { transform: translateX(0); } to { transform: translateX(var(--_kj-motion-distance)); } }
+
+  @keyframes kj-scale-in  { from { transform: scale(0.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
+  @keyframes kj-scale-out { from { transform: scale(1); opacity: 1; } to { transform: scale(0.92); opacity: 0; } }
+
+  @keyframes kj-slide-up-fade-in  { from { transform: translateY(var(--_kj-motion-distance)); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
+  @keyframes kj-slide-up-fade-out { from { transform: translateY(0); opacity: 1; } to { transform: translateY(calc(-1 * var(--_kj-motion-distance))); opacity: 0; } }
+
+  /* ── reduced motion: strip movement, keep appearance ──────
+     Every preset collapses to a near-instant opacity fade. The 1ms
+     duration keeps `animationend` firing so state machines that await
+     it don't hang. WCAG 2.1 AAA 2.3.3 (Animation from Interactions). */
+  @media (prefers-reduced-motion: reduce) {
+    .kj-motion {
+      animation-duration: 1ms !important;
+      animation-timing-function: linear !important;
+    }
+    .kj-motion[data-kj-motion-state="enter"] { animation-name: kj-fade-in !important; }
+    .kj-motion[data-kj-motion-state="exit"]  { animation-name: kj-fade-out !important; }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kouji-ui/core",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Headless Angular 21 UI primitives — directives over CDK with WCAG 2.1 AAA semantics and zero CSS.",
   "license": "MIT",
   "repository": {
@@ -32,7 +32,18 @@
     "@angular/cdk": "^22.0.0",
     "@angular/forms": "^22.0.0",
     "rxjs": "^7.8.0",
-    "echarts": "^6.0.0"
+    "echarts": "^6.0.0",
+    "lexical": "^0.38.0",
+    "@lexical/rich-text": "^0.38.0",
+    "@lexical/list": "^0.38.0",
+    "@lexical/link": "^0.38.0",
+    "@lexical/history": "^0.38.0",
+    "@lexical/markdown": "^0.38.0",
+    "@lexical/code": "^0.38.0",
+    "@lexical/html": "^0.38.0",
+    "@lexical/selection": "^0.38.0",
+    "monaco-editor": "^0.55.0",
+    "@monaco-editor/loader": "^1.7.0"
   },
   "sideEffects": false,
   "type": "module",
@@ -47,6 +58,10 @@
       "style": "./typography/prose.css",
       "default": "./typography/prose.css"
     },
+    "./motion/motion.css": {
+      "style": "./motion/motion.css",
+      "default": "./motion/motion.css"
+    },
     "./package.json": {
       "default": "./package.json"
     },
@@ -58,6 +73,39 @@
   "peerDependenciesMeta": {
     "echarts": {
       "optional": true
+    },
+    "lexical": {
+      "optional": true
+    },
+    "@lexical/rich-text": {
+      "optional": true
+    },
+    "@lexical/list": {
+      "optional": true
+    },
+    "@lexical/link": {
+      "optional": true
+    },
+    "@lexical/history": {
+      "optional": true
+    },
+    "@lexical/markdown": {
+      "optional": true
+    },
+    "@lexical/code": {
+      "optional": true
+    },
+    "@lexical/html": {
+      "optional": true
+    },
+    "@lexical/selection": {
+      "optional": true
+    },
+    "monaco-editor": {
+      "optional": true
+    },
+    "@monaco-editor/loader": {
+      "optional": true
     }
   },
   "dependencies": {