@omerdlw/base-framework 1.0.5 → 2.0.0

package/templates/motion/modal.ts

@@ -0,0 +1,79 @@
+import type { ModalMotion, ModalPositionMotion } from "@omerdlw/base-framework/modules/modal";
+import { motion, tween } from "./tokens";
+
+const { durations, easings, springs } = motion;
+
+const REST = "translate3d(0, 0px, 0) scale(1)";
+
+const surfaceEnter = tween(durations.slow, easings.enter);
+const surfaceExit = tween(durations.fast, easings.exit);
+
+// Edge sheets slide fully in from their edge.
+const sheet = (offset: string): ModalPositionMotion => ({
+  variants: {
+    hidden: { opacity: 0, transform: offset },
+    visible: { opacity: 1, transform: REST, transition: surfaceEnter },
+    exit: { opacity: 0, transform: offset, transition: surfaceExit },
+  },
+});
+
+// A header or footer row settles a little after the dialog, from its own side.
+const row = (offset: string, delay: number) => ({
+  hidden: { opacity: 0, transform: offset },
+  visible: {
+    opacity: 1,
+    transform: REST,
+    transition: { delay, duration: durations.base, ease: easings.enter },
+  },
+  exit: {
+    opacity: 0,
+    transform: offset,
+    transition: { duration: durations.micro, ease: easings.exit },
+  },
+});
+
+// defineTheme(modalTheme, { slots, motion: modalMotion })
+export const modalMotion: ModalMotion = {
+  backdrop: {
+    hidden: { opacity: 0 },
+    visible: { opacity: 1, transition: tween(durations.slow, easings.enter) },
+    exit: { opacity: 0, transition: tween(durations.fast, easings.enter) },
+  },
+  content: {
+    hidden: { opacity: 0, transform: "translate3d(0px, 12px, 0) scale(0.98)" },
+    visible: {
+      opacity: 1,
+      transform: REST,
+      transition: { delay: 0.04, ...tween(durations.base, easings.enter) },
+    },
+    exit: {
+      opacity: 0,
+      transform: "translate3d(0px, 12px, 0) scale(0.98)",
+      transition: tween(durations.fast, easings.exit),
+    },
+  },
+  header: row("translate3d(0px, -6px, 0) scale(0.99)", 0.02),
+  footer: row("translate3d(0px, 6px, 0) scale(0.99)", 0.06),
+  positions: {
+    center: {
+      variants: {
+        hidden: { opacity: 0, transform: "translate3d(0px, 12px, 0) scale(0.95)" },
+        visible: {
+          opacity: 1,
+          transform: REST,
+          transition: { duration: durations.moderate, ease: easings.enter },
+        },
+        exit: {
+          opacity: 0,
+          transform: "translate3d(0px, 8px, 0) scale(0.96)",
+          transition: { duration: durations.fast, ease: easings.exit },
+        },
+      },
+      transition: springs.panel,
+    },
+    top: sheet("translate3d(0px, -100%, 0) scale(1)"),
+    right: sheet("translate3d(100%, 0px, 0) scale(1)"),
+    bottom: sheet("translate3d(0px, 100%, 0) scale(1)"),
+    left: sheet("translate3d(-100%, 0px, 0) scale(1)"),
+  },
+};

package/templates/motion/notification.ts

@@ -0,0 +1,27 @@
+import type { NotificationMotion } from "@omerdlw/base-framework/modules/notification";
+import { motion, tween } from "./tokens";
+
+const { durations, easings } = motion;
+
+const enter = tween(durations.moderate, easings.emphasized);
+
+// defineTheme(notificationTheme, { slots, motion: notificationMotion })
+export const notificationMotion: NotificationMotion = {
+  transition: enter,
+  toast: {
+    hidden: {
+      opacity: 0,
+      transform: "translate3d(0, -10px, 0) scale(0.96)",
+    },
+    visible: {
+      opacity: 1,
+      transform: "translate3d(0, 0px, 0) scale(1)",
+      transition: enter,
+    },
+    exit: {
+      opacity: 0,
+      transform: "translate3d(0, -6px, 0) scale(0.98)",
+      transition: tween(durations.fast, easings.exit),
+    },
+  },
+};

package/templates/motion/tokens.ts

@@ -0,0 +1,47 @@
+import { defineMotion } from "@omerdlw/base-framework/tokens";
+
+// Your app's motion vocabulary. The framework ships no animation of its own:
+// every module plays what your theme files give it, written with these words.
+// This folder is the framework's original motion, as a starting point; copy it
+// into your app (e.g. src/config/theme/motion/) and make it yours.
+//
+// tempo stretches everything a module animates (durations, delays, staggers,
+// choreography timers, springs). Write values at tempo 1.
+export const motion = defineMotion({
+  tempo: 1,
+  reducedMotion: "user",
+  durations: {
+    instant: 0.08,
+    micro: 0.18,
+    fast: 0.28,
+    base: 0.36,
+    moderate: 0.44,
+    slow: 0.58,
+    cinematic: 0.86,
+  },
+  easings: {
+    // How things arrive.
+    enter: [0.25, 1, 0.5, 1],
+    // Arrivals that should read as a reveal.
+    emphasized: [0.16, 1, 0.3, 1],
+    // Heavy surfaces settling.
+    weighted: [0.22, 1, 0.36, 1],
+    // A move between two resting points.
+    move: [0.65, 0, 0.35, 1],
+    // How things leave.
+    exit: [0.5, 0, 1, 1],
+    // A landing that slightly overshoots.
+    overshoot: [0.34, 1.56, 0.64, 1],
+  },
+  springs: {
+    press: { type: "spring", stiffness: 420, damping: 34, mass: 0.35 },
+    tap: { type: "spring", stiffness: 520, damping: 30, mass: 0.28 },
+    badge: { type: "spring", stiffness: 360, damping: 30, mass: 0.45 },
+    tooltip: { damping: 28, stiffness: 350 },
+    deck: { type: "spring", stiffness: 210, damping: 34, mass: 1.2 },
+    panel: { type: "spring", stiffness: 240, damping: 28, mass: 0.85 },
+  },
+});
+
+export const tween = (duration: number, ease: readonly [number, number, number, number]) =>
+  ({ type: "tween", duration, ease }) as const;

package/templates/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true
+  },
+  "include": ["./**/*.ts", "../src/**/*"]
+}

package/dist/modules/ambient/color.d.ts

@@ -1,16 +0,0 @@
-import type { AmbientPalette, OklchColor } from "./types";
-export declare const COLOR_EXTRACT_CONFIG: Readonly<{
-    readonly blackChromaFactor: 0.35;
-    readonly primaryLightness: 0.74;
-    readonly maxBlackChroma: 0.055;
-    readonly blackLightness: 0.15;
-    readonly cacheLimit: 100;
-    readonly maxChroma: 0.28;
-    readonly minChroma: 0.03;
-    readonly sampleSize: 32;
-}>;
-export declare function srgbToLinear(c: number): number;
-export declare function rgbToOklch(r: number, g: number, b: number): OklchColor;
-export declare function oklchToString(l: number | string, c: number | string, h: number | string, alpha?: number | string): string;
-export declare function derivePalette(sampled: OklchColor): AmbientPalette;
-//# sourceMappingURL=color.d.ts.map

package/dist/modules/ambient/color.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../src/modules/ambient/color.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1D,eAAO,MAAM,oBAAoB;;;;;;;;;EAStB,CAAC;AAEZ,wBAAgB,YAAY,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAG9C;AAED,wBAAgB,UAAU,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,UAAU,CAyBtE;AAED,wBAAgB,aAAa,CAC3B,CAAC,EAAE,MAAM,GAAG,MAAM,EAClB,CAAC,EAAE,MAAM,GAAG,MAAM,EAClB,CAAC,EAAE,MAAM,GAAG,MAAM,EAClB,KAAK,GAAE,MAAM,GAAG,MAAU,GACzB,MAAM,CASR;AAED,wBAAgB,aAAa,CAAC,OAAO,EAAE,UAAU,GAAG,cAAc,CAuBjE"}