feat(theme): motion presets (timing, easing, stagger)

src/__tests__/motion.test.ts

@@ -0,0 +1,24 @@
+import { motion } from '../theme/motion';
+
+describe('motion', () => {
+  it('exports bezier strings for easing presets', () => {
+    expect(motion.easeOutQuart).toBe('cubic-bezier(0.25, 1, 0.5, 1)');
+    expect(motion.easeOutExpo).toBe('cubic-bezier(0.16, 1, 0.3, 1)');
+    expect(motion.easeOutBack).toBe('cubic-bezier(0.34, 1.56, 0.64, 1)');
+    expect(motion.easeInOutQuart).toBe('cubic-bezier(0.76, 0, 0.24, 1)');
+  });
+
+  it('exports duration presets in ms', () => {
+    expect(motion.duration.instant).toBe(80);
+    expect(motion.duration.fast).toBe(160);
+    expect(motion.duration.normal).toBe(240);
+    expect(motion.duration.slow).toBe(380);
+    expect(motion.duration.pulse).toBe(800);
+    expect(motion.duration.pulseSlow).toBe(1600);
+  });
+
+  it('exports stagger offsets', () => {
+    expect(motion.stagger.row).toBe(50);
+    expect(motion.stagger.item).toBe(80);
+  });
+});

src/theme/index.ts

@@ -0,0 +1,5 @@
+export { colors } from './colors';
+export { radius } from './radius';
+export { spacing } from './spacing';
+export { typography } from './typography';
+export { motion } from './motion';

src/theme/motion.ts

@@ -0,0 +1,26 @@
+export const motion = {
+  easeOutQuart: 'cubic-bezier(0.25, 1, 0.5, 1)',
+  easeOutExpo: 'cubic-bezier(0.16, 1, 0.3, 1)',
+  easeOutBack: 'cubic-bezier(0.34, 1.56, 0.64, 1)',
+  easeInOutQuart: 'cubic-bezier(0.76, 0, 0.24, 1)',
+
+  duration: {
+    instant: 80,
+    fast: 160,
+    normal: 240,
+    slow: 380,
+    pulse: 800,
+    pulseSlow: 1600,
+  },
+
+  stagger: {
+    row: 50,
+    item: 80,
+  },
+} as const;
+
+export type MotionDuration = keyof typeof motion.duration;
+export type MotionEasing = keyof Pick<
+  typeof motion,
+  'easeOutQuart' | 'easeOutExpo' | 'easeOutBack' | 'easeInOutQuart'
+>;