@castui/cast-ui 4.8.0 → 4.10.0

package/dist/tokens/motion.js

@@ -0,0 +1,175 @@
+"use strict";
+/**
+ * Motion tokens — the single source for animation timing across Cast UI.
+ *
+ * Two layers, mirroring the colour and spacing token system:
+ *   Primitive  raw durations, cubic-bezier easings, spring configs.
+ *   Semantic   named roles (transition / feedback / loop) that components read.
+ *
+ * Motion is constant across density and colour mode. Density changes spacing
+ * only. Easings are real cubic-beziers, so the same numbers map 1:1 to the
+ * `motion` variable collection in the Figma kit and to CSS.
+ *
+ * Components never read a raw number. They read a semantic role through
+ * useMotion(), for example motion.transition.standard or motion.loop.spin.
+ *
+ * Theming: a cast-theme.json can carry a `motion` block (exported by the
+ * cast-sync plugin from the kit's `motion` variable collection). ThemeProvider
+ * accepts those primitive-level overrides via its `motion` prop and
+ * `resolveMotion` rebuilds every semantic role from them, so a brand can
+ * re-tune timing with no code changes.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.motionTokens = exports.loop = exports.feedback = exports.transition = exports.spring = exports.easing = exports.easingBezier = exports.cycle = exports.duration = void 0;
+exports.resolveMotion = resolveMotion;
+const react_native_1 = require("react-native");
+/** Primitive: transition durations in ms (state to state). */
+exports.duration = {
+    instant: 100,
+    fast: 150,
+    base: 220,
+    slow: 320,
+};
+/** Primitive: loop cycle lengths in ms (continuous, not state to state). */
+exports.cycle = {
+    pulse: 700,
+    spin: 800,
+    sweep: 1200,
+};
+/**
+ * Primitive: easing control points as cubic-bezier [x1, y1, x2, y2].
+ * This is the design-side value. The `motion` collection in the Figma kit
+ * carries these exact numbers (easing/{name}/{x1,y1,x2,y2}).
+ */
+exports.easingBezier = {
+    standard: [0.4, 0, 0.2, 1],
+    entrance: [0, 0, 0.2, 1],
+    exit: [0.4, 0, 1, 1],
+    emphasized: [0.7, -0.4, 0.4, 1.4],
+    linear: [0, 0, 1, 1],
+};
+/**
+ * Build a lazy easing function from bezier points. The Easing function is
+ * only created when an animation actually runs, so importing the tokens
+ * never touches the native Easing API. That keeps the library safe to
+ * import in any environment.
+ */
+function lazyEasing(points, linear) {
+    let fn = null;
+    return (value) => {
+        if (!fn) {
+            fn = linear ? react_native_1.Easing.linear : react_native_1.Easing.bezier(points[0], points[1], points[2], points[3]);
+        }
+        return fn(value);
+    };
+}
+function isLinear(points) {
+    return points[0] === 0 && points[1] === 0 && points[2] === 1 && points[3] === 1;
+}
+function buildEasings(beziers) {
+    return {
+        standard: lazyEasing(beziers.standard, isLinear(beziers.standard)),
+        entrance: lazyEasing(beziers.entrance, isLinear(beziers.entrance)),
+        exit: lazyEasing(beziers.exit, isLinear(beziers.exit)),
+        emphasized: lazyEasing(beziers.emphasized, isLinear(beziers.emphasized)),
+        linear: lazyEasing(beziers.linear, isLinear(beziers.linear)),
+    };
+}
+/** Primitive: easing as runtime functions (the code-side value). */
+exports.easing = buildEasings(exports.easingBezier);
+/** Primitive: spring configs for Animated.spring. */
+exports.spring = {
+    /** Overlay surfaces sliding in (drawer, bottom sheet). */
+    overlay: { damping: 22, stiffness: 220, mass: 0.9 },
+};
+function buildRoles(p) {
+    return {
+        transition: {
+            /** General state-to-state fade or slide. Backdrops, overlay fades. */
+            standard: { duration: p.duration.base, easing: p.easing.standard },
+            /** Something appearing. Decelerates as it lands. */
+            enter: { duration: p.duration.fast, easing: p.easing.entrance },
+            /** Something leaving. Accelerates as it goes. */
+            exit: { duration: p.duration.fast, easing: p.easing.exit },
+            /** Expand or collapse. Accordion chevron, height reveals. */
+            expand: { duration: p.duration.fast, easing: p.easing.standard },
+        },
+        feedback: {
+            /** Press-down scale on a pressable (reserved for future use). */
+            press: { duration: p.duration.instant, easing: p.easing.standard, scale: p.press.scale },
+            /** Error shake, e.g. input rejection. amplitude in px (future use). */
+            shake: { duration: p.duration.base, easing: p.easing.standard, amplitude: p.shake.amplitude },
+            /** Pop-in for a check, badge, or toast (future use). */
+            pop: { duration: p.duration.fast, easing: p.easing.emphasized },
+        },
+        loop: {
+            /** Spinner rotation. */
+            spin: { duration: p.cycle.spin, easing: p.easing.linear },
+            /** Skeleton pulse. Fades opacity between from and to. */
+            pulse: { duration: p.cycle.pulse, easing: p.easing.standard, from: p.pulse.from, to: p.pulse.to },
+            /** Progress indeterminate sweep. */
+            indeterminate: { duration: p.cycle.sweep, easing: p.easing.standard },
+        },
+    };
+}
+const defaultRoles = buildRoles({
+    duration: exports.duration,
+    cycle: exports.cycle,
+    easing: exports.easing,
+    press: { scale: 0.97 },
+    shake: { amplitude: 4 },
+    pulse: { from: 1, to: 0.5 },
+});
+exports.transition = defaultRoles.transition;
+exports.feedback = defaultRoles.feedback;
+exports.loop = defaultRoles.loop;
+/** The full default motion token set, exposed on the theme as `theme.motion`. */
+exports.motionTokens = {
+    duration: exports.duration,
+    cycle: exports.cycle,
+    easing: exports.easing,
+    easingBezier: exports.easingBezier,
+    spring: exports.spring,
+    transition: exports.transition,
+    feedback: exports.feedback,
+    loop: exports.loop,
+};
+/**
+ * Resolve a full motion token set from primitive-level overrides.
+ * With no overrides this returns the shared default set (no allocation).
+ * Semantic roles are always rebuilt from the merged primitives, so a
+ * duration override flows into every role that uses it.
+ */
+function resolveMotion(overrides) {
+    if (!overrides)
+        return exports.motionTokens;
+    const mergedDuration = { ...exports.duration, ...(overrides.duration ?? {}) };
+    const mergedCycle = { ...exports.cycle, ...(overrides.cycle ?? {}) };
+    const mergedBezier = {
+        ...exports.easingBezier,
+        ...(overrides.easingBezier ?? {}),
+    };
+    const mergedEasing = overrides.easingBezier ? buildEasings(mergedBezier) : exports.easing;
+    const mergedSpring = {
+        overlay: { ...exports.spring.overlay, ...(overrides.spring?.overlay ?? {}) },
+    };
+    const roles = buildRoles({
+        duration: mergedDuration,
+        cycle: mergedCycle,
+        easing: mergedEasing,
+        press: { scale: overrides.feedback?.press?.scale ?? 0.97 },
+        shake: { amplitude: overrides.feedback?.shake?.amplitude ?? 4 },
+        pulse: {
+            from: overrides.loop?.pulse?.from ?? 1,
+            to: overrides.loop?.pulse?.to ?? 0.5,
+        },
+    });
+    return {
+        duration: mergedDuration,
+        cycle: mergedCycle,
+        easing: mergedEasing,
+        easingBezier: mergedBezier,
+        spring: mergedSpring,
+        ...roles,
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@castui/cast-ui",
-  "version": "4.8.0",
+  "version": "4.10.0",
   "description": "A cross-platform design system for React Native (iOS, Android, Web) with multi-theme support.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -65,6 +65,7 @@
     "react-dom": "^19.2.4",
     "react-native": "^0.84.0",
     "react-native-web": "^0.21.2",
+    "remark-gfm": "^4.0.0",
     "storybook": "^10.2.8",
     "typescript": "^5.9.3"
   },