diff --git a/src/__tests__/motion.test.ts b/src/__tests__/motion.test.ts new file mode 100644 index 0000000..a93219e --- /dev/null +++ b/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); + }); +}); diff --git a/src/theme/index.ts b/src/theme/index.ts new file mode 100644 index 0000000..16c088d --- /dev/null +++ b/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'; diff --git a/src/theme/motion.ts b/src/theme/motion.ts new file mode 100644 index 0000000..782d064 --- /dev/null +++ b/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' +>;