@salesmind-ai/design-system 0.3.12 → 0.4.0

package/dist/motion-C651Ry6d.d.cts

@@ -0,0 +1,832 @@
+/**
+ * Duration tokens (seconds) for Framer Motion
+ */
+declare const DURATION: {
+    readonly micro: 0.15;
+    readonly short: 0.25;
+    readonly medium: 0.5;
+    readonly long: 1;
+};
+/**
+ * Easing definitions (cubic-bezier arrays) for Framer Motion
+ */
+declare const EASING: {
+    readonly standard: readonly [0.16, 1, 0.3, 1];
+    readonly emphasis: readonly [0.34, 1.56, 0.64, 1];
+    readonly exit: readonly [0.4, 0, 0.2, 1];
+    readonly linear: readonly [0, 0, 1, 1];
+};
+/**
+ * Standard transitions for Framer Motion
+ */
+declare const TRANSITION: {
+    readonly standard: {
+        readonly duration: 0.5;
+        readonly ease: readonly [0.16, 1, 0.3, 1];
+    };
+    readonly emphasis: {
+        readonly duration: 0.5;
+        readonly ease: readonly [0.34, 1.56, 0.64, 1];
+    };
+    readonly quick: {
+        readonly duration: 0.25;
+        readonly ease: readonly [0.16, 1, 0.3, 1];
+    };
+    readonly spring: {
+        readonly type: "spring";
+        readonly stiffness: 200;
+        readonly damping: 20;
+    };
+};
+/**
+ * Layout Tokens
+ */
+declare const DISTANCE: {
+    readonly sm: 4;
+    readonly md: 12;
+    readonly lg: 24;
+    readonly xl: 48;
+};
+/**
+ * Reusable Variants for Framer Motion
+ */
+declare const VARIANTS: {
+    readonly fadeIn: {
+        readonly hidden: {
+            readonly opacity: 0;
+        };
+        readonly visible: {
+            readonly opacity: 1;
+            readonly transition: {
+                readonly duration: 0.5;
+                readonly ease: readonly [0.16, 1, 0.3, 1];
+            };
+        };
+    };
+    readonly fadeUp: {
+        readonly hidden: {
+            readonly opacity: 0;
+            readonly y: 12;
+        };
+        readonly visible: {
+            readonly opacity: 1;
+            readonly y: 0;
+            readonly transition: {
+                readonly duration: 0.5;
+                readonly ease: readonly [0.16, 1, 0.3, 1];
+            };
+        };
+    };
+    readonly fadeDown: {
+        readonly hidden: {
+            readonly opacity: 0;
+            readonly y: -12;
+        };
+        readonly visible: {
+            readonly opacity: 1;
+            readonly y: 0;
+            readonly transition: {
+                readonly duration: 0.5;
+                readonly ease: readonly [0.16, 1, 0.3, 1];
+            };
+        };
+    };
+    readonly scaleIn: {
+        readonly hidden: {
+            readonly opacity: 0;
+            readonly scale: 0.95;
+        };
+        readonly visible: {
+            readonly opacity: 1;
+            readonly scale: 1;
+            readonly transition: {
+                readonly duration: 0.25;
+                readonly ease: readonly [0.34, 1.56, 0.64, 1];
+            };
+        };
+    };
+    readonly slideLeft: {
+        readonly hidden: {
+            readonly opacity: 0;
+            readonly x: 24;
+        };
+        readonly visible: {
+            readonly opacity: 1;
+            readonly x: 0;
+            readonly transition: {
+                readonly duration: 0.5;
+                readonly ease: readonly [0.16, 1, 0.3, 1];
+            };
+        };
+    };
+    readonly slideRight: {
+        readonly hidden: {
+            readonly opacity: 0;
+            readonly x: number;
+        };
+        readonly visible: {
+            readonly opacity: 1;
+            readonly x: 0;
+            readonly transition: {
+                readonly duration: 0.5;
+                readonly ease: readonly [0.16, 1, 0.3, 1];
+            };
+        };
+    };
+    readonly staggerContainer: {
+        readonly hidden: {
+            readonly opacity: 0;
+        };
+        readonly visible: {
+            readonly opacity: 1;
+            readonly transition: {
+                readonly staggerChildren: 0.08;
+                readonly delayChildren: 0.1;
+            };
+        };
+    };
+    readonly pulse: {
+        readonly hidden: {
+            readonly scale: 1;
+        };
+        readonly visible: {
+            readonly scale: readonly [1, 1.05, 1];
+            readonly transition: {
+                readonly duration: 1.5;
+                readonly repeat: number;
+                readonly ease: "easeInOut";
+            };
+        };
+    };
+    readonly impact: {
+        readonly hidden: {
+            readonly scale: 1;
+        };
+        readonly trigger: {
+            readonly scale: readonly [1, 0.95, 1.05, 1];
+            readonly transition: {
+                readonly duration: 0.4;
+                readonly ease: "backOut";
+            };
+        };
+    };
+};
+/** Stagger: eyebrow → title → subtitle → CTAs → media */
+declare const HERO_ENTRANCE: {
+    readonly container: {
+        readonly variants: {
+            readonly hidden: {
+                readonly opacity: 1;
+            };
+            readonly visible: {
+                readonly opacity: 1;
+                readonly transition: {
+                    readonly staggerChildren: 0.12;
+                    readonly delayChildren: 0.05;
+                };
+            };
+        };
+    };
+    readonly child: {
+        readonly variants: {
+            readonly hidden: {
+                readonly opacity: 0;
+                readonly y: 12;
+            };
+            readonly visible: {
+                readonly opacity: 1;
+                readonly y: 0;
+                readonly transition: {
+                    readonly duration: 0.5;
+                    readonly ease: readonly [0.16, 1, 0.3, 1];
+                };
+            };
+        };
+    };
+    readonly delays: {
+        readonly eyebrow: 0;
+        readonly title: 0.05;
+        readonly subtitle: 0.17;
+        readonly cta: 0.29;
+        readonly media: 0.41;
+    };
+};
+declare const SECTION_REVEAL: {
+    readonly container: {
+        readonly variants: {
+            readonly hidden: {
+                readonly opacity: 0;
+            };
+            readonly visible: {
+                readonly opacity: 1;
+                readonly transition: {
+                    readonly staggerChildren: 0.08;
+                    readonly delayChildren: 0.1;
+                };
+            };
+        };
+    };
+    readonly content: {
+        readonly variants: {
+            readonly hidden: {
+                readonly opacity: 0;
+                readonly y: 12;
+            };
+            readonly visible: {
+                readonly opacity: 1;
+                readonly y: 0;
+                readonly transition: {
+                    readonly duration: 0.5;
+                    readonly ease: readonly [0.16, 1, 0.3, 1];
+                };
+            };
+        };
+    };
+    readonly viewportMargin: "-15%";
+};
+declare const CARD_HOVER: {
+    readonly rest: {
+        readonly y: 0;
+        readonly scale: 1;
+    };
+    readonly hover: {
+        readonly y: -4;
+        readonly scale: 1.01;
+        readonly transition: {
+            readonly duration: 0.25;
+            readonly ease: readonly [0.16, 1, 0.3, 1];
+        };
+    };
+};
+declare const PANEL_CROSSFADE: {
+    readonly initial: {
+        readonly opacity: 0;
+        readonly y: 8;
+    };
+    readonly animate: {
+        readonly opacity: 1;
+        readonly y: 0;
+        readonly transition: {
+            readonly duration: 0.25;
+            readonly ease: readonly [0.16, 1, 0.3, 1];
+        };
+    };
+    readonly exit: {
+        readonly opacity: 0;
+        readonly y: -8;
+        readonly transition: {
+            readonly duration: 0.15;
+            readonly ease: readonly [0.4, 0, 0.2, 1];
+        };
+    };
+};
+declare const TAB_SLIDE: {
+    readonly transition: {
+        readonly type: "spring";
+        readonly stiffness: 200;
+        readonly damping: 20;
+    };
+    readonly layout: true;
+};
+declare const PRESETS: {
+    readonly heroEntrance: {
+        readonly container: {
+            readonly variants: {
+                readonly hidden: {
+                    readonly opacity: 1;
+                };
+                readonly visible: {
+                    readonly opacity: 1;
+                    readonly transition: {
+                        readonly staggerChildren: 0.12;
+                        readonly delayChildren: 0.05;
+                    };
+                };
+            };
+        };
+        readonly child: {
+            readonly variants: {
+                readonly hidden: {
+                    readonly opacity: 0;
+                    readonly y: 12;
+                };
+                readonly visible: {
+                    readonly opacity: 1;
+                    readonly y: 0;
+                    readonly transition: {
+                        readonly duration: 0.5;
+                        readonly ease: readonly [0.16, 1, 0.3, 1];
+                    };
+                };
+            };
+        };
+        readonly delays: {
+            readonly eyebrow: 0;
+            readonly title: 0.05;
+            readonly subtitle: 0.17;
+            readonly cta: 0.29;
+            readonly media: 0.41;
+        };
+    };
+    readonly sectionReveal: {
+        readonly container: {
+            readonly variants: {
+                readonly hidden: {
+                    readonly opacity: 0;
+                };
+                readonly visible: {
+                    readonly opacity: 1;
+                    readonly transition: {
+                        readonly staggerChildren: 0.08;
+                        readonly delayChildren: 0.1;
+                    };
+                };
+            };
+        };
+        readonly content: {
+            readonly variants: {
+                readonly hidden: {
+                    readonly opacity: 0;
+                    readonly y: 12;
+                };
+                readonly visible: {
+                    readonly opacity: 1;
+                    readonly y: 0;
+                    readonly transition: {
+                        readonly duration: 0.5;
+                        readonly ease: readonly [0.16, 1, 0.3, 1];
+                    };
+                };
+            };
+        };
+        readonly viewportMargin: "-15%";
+    };
+    readonly cardHover: {
+        readonly rest: {
+            readonly y: 0;
+            readonly scale: 1;
+        };
+        readonly hover: {
+            readonly y: -4;
+            readonly scale: 1.01;
+            readonly transition: {
+                readonly duration: 0.25;
+                readonly ease: readonly [0.16, 1, 0.3, 1];
+            };
+        };
+    };
+    readonly panelCrossfade: {
+        readonly initial: {
+            readonly opacity: 0;
+            readonly y: 8;
+        };
+        readonly animate: {
+            readonly opacity: 1;
+            readonly y: 0;
+            readonly transition: {
+                readonly duration: 0.25;
+                readonly ease: readonly [0.16, 1, 0.3, 1];
+            };
+        };
+        readonly exit: {
+            readonly opacity: 0;
+            readonly y: -8;
+            readonly transition: {
+                readonly duration: 0.15;
+                readonly ease: readonly [0.4, 0, 0.2, 1];
+            };
+        };
+    };
+    readonly tabSlide: {
+        readonly transition: {
+            readonly type: "spring";
+            readonly stiffness: 200;
+            readonly damping: 20;
+        };
+        readonly layout: true;
+    };
+};
+declare const REDUCED_VARIANTS: {
+    readonly fadeOnly: {
+        readonly hidden: {
+            readonly opacity: 0;
+        };
+        readonly visible: {
+            readonly opacity: 1;
+            readonly transition: {
+                readonly duration: 0.25;
+            };
+        };
+    };
+    readonly none: {
+        readonly hidden: {
+            readonly opacity: 1;
+        };
+        readonly visible: {
+            readonly opacity: 1;
+        };
+    };
+};
+declare const REDUCED_PANEL_CROSSFADE: {
+    readonly initial: {
+        readonly opacity: 0;
+    };
+    readonly animate: {
+        readonly opacity: 1;
+        readonly transition: {
+            readonly duration: 0.15;
+        };
+    };
+    readonly exit: {
+        readonly opacity: 0;
+        readonly transition: {
+            readonly duration: 0.15;
+        };
+    };
+};
+type AnimationVariant = 'fadeIn' | 'fadeUp' | 'fadeDown' | 'scaleIn' | 'slideLeft' | 'slideRight';
+declare const VARIANT_MAP: {
+    fadeIn: {
+        readonly hidden: {
+            readonly opacity: 0;
+        };
+        readonly visible: {
+            readonly opacity: 1;
+            readonly transition: {
+                readonly duration: 0.5;
+                readonly ease: readonly [0.16, 1, 0.3, 1];
+            };
+        };
+    };
+    fadeUp: {
+        readonly hidden: {
+            readonly opacity: 0;
+            readonly y: 12;
+        };
+        readonly visible: {
+            readonly opacity: 1;
+            readonly y: 0;
+            readonly transition: {
+                readonly duration: 0.5;
+                readonly ease: readonly [0.16, 1, 0.3, 1];
+            };
+        };
+    };
+    fadeDown: {
+        readonly hidden: {
+            readonly opacity: 0;
+            readonly y: -12;
+        };
+        readonly visible: {
+            readonly opacity: 1;
+            readonly y: 0;
+            readonly transition: {
+                readonly duration: 0.5;
+                readonly ease: readonly [0.16, 1, 0.3, 1];
+            };
+        };
+    };
+    scaleIn: {
+        readonly hidden: {
+            readonly opacity: 0;
+            readonly scale: 0.95;
+        };
+        readonly visible: {
+            readonly opacity: 1;
+            readonly scale: 1;
+            readonly transition: {
+                readonly duration: 0.25;
+                readonly ease: readonly [0.34, 1.56, 0.64, 1];
+            };
+        };
+    };
+    slideLeft: {
+        readonly hidden: {
+            readonly opacity: 0;
+            readonly x: 24;
+        };
+        readonly visible: {
+            readonly opacity: 1;
+            readonly x: 0;
+            readonly transition: {
+                readonly duration: 0.5;
+                readonly ease: readonly [0.16, 1, 0.3, 1];
+            };
+        };
+    };
+    slideRight: {
+        readonly hidden: {
+            readonly opacity: 0;
+            readonly x: number;
+        };
+        readonly visible: {
+            readonly opacity: 1;
+            readonly x: 0;
+            readonly transition: {
+                readonly duration: 0.5;
+                readonly ease: readonly [0.16, 1, 0.3, 1];
+            };
+        };
+    };
+};
+declare const MOTION: {
+    readonly DURATION: {
+        readonly micro: 0.15;
+        readonly short: 0.25;
+        readonly medium: 0.5;
+        readonly long: 1;
+    };
+    readonly EASING: {
+        readonly standard: readonly [0.16, 1, 0.3, 1];
+        readonly emphasis: readonly [0.34, 1.56, 0.64, 1];
+        readonly exit: readonly [0.4, 0, 0.2, 1];
+        readonly linear: readonly [0, 0, 1, 1];
+    };
+    readonly TRANSITION: {
+        readonly standard: {
+            readonly duration: 0.5;
+            readonly ease: readonly [0.16, 1, 0.3, 1];
+        };
+        readonly emphasis: {
+            readonly duration: 0.5;
+            readonly ease: readonly [0.34, 1.56, 0.64, 1];
+        };
+        readonly quick: {
+            readonly duration: 0.25;
+            readonly ease: readonly [0.16, 1, 0.3, 1];
+        };
+        readonly spring: {
+            readonly type: "spring";
+            readonly stiffness: 200;
+            readonly damping: 20;
+        };
+    };
+    readonly VARIANTS: {
+        readonly fadeIn: {
+            readonly hidden: {
+                readonly opacity: 0;
+            };
+            readonly visible: {
+                readonly opacity: 1;
+                readonly transition: {
+                    readonly duration: 0.5;
+                    readonly ease: readonly [0.16, 1, 0.3, 1];
+                };
+            };
+        };
+        readonly fadeUp: {
+            readonly hidden: {
+                readonly opacity: 0;
+                readonly y: 12;
+            };
+            readonly visible: {
+                readonly opacity: 1;
+                readonly y: 0;
+                readonly transition: {
+                    readonly duration: 0.5;
+                    readonly ease: readonly [0.16, 1, 0.3, 1];
+                };
+            };
+        };
+        readonly fadeDown: {
+            readonly hidden: {
+                readonly opacity: 0;
+                readonly y: -12;
+            };
+            readonly visible: {
+                readonly opacity: 1;
+                readonly y: 0;
+                readonly transition: {
+                    readonly duration: 0.5;
+                    readonly ease: readonly [0.16, 1, 0.3, 1];
+                };
+            };
+        };
+        readonly scaleIn: {
+            readonly hidden: {
+                readonly opacity: 0;
+                readonly scale: 0.95;
+            };
+            readonly visible: {
+                readonly opacity: 1;
+                readonly scale: 1;
+                readonly transition: {
+                    readonly duration: 0.25;
+                    readonly ease: readonly [0.34, 1.56, 0.64, 1];
+                };
+            };
+        };
+        readonly slideLeft: {
+            readonly hidden: {
+                readonly opacity: 0;
+                readonly x: 24;
+            };
+            readonly visible: {
+                readonly opacity: 1;
+                readonly x: 0;
+                readonly transition: {
+                    readonly duration: 0.5;
+                    readonly ease: readonly [0.16, 1, 0.3, 1];
+                };
+            };
+        };
+        readonly slideRight: {
+            readonly hidden: {
+                readonly opacity: 0;
+                readonly x: number;
+            };
+            readonly visible: {
+                readonly opacity: 1;
+                readonly x: 0;
+                readonly transition: {
+                    readonly duration: 0.5;
+                    readonly ease: readonly [0.16, 1, 0.3, 1];
+                };
+            };
+        };
+        readonly staggerContainer: {
+            readonly hidden: {
+                readonly opacity: 0;
+            };
+            readonly visible: {
+                readonly opacity: 1;
+                readonly transition: {
+                    readonly staggerChildren: 0.08;
+                    readonly delayChildren: 0.1;
+                };
+            };
+        };
+        readonly pulse: {
+            readonly hidden: {
+                readonly scale: 1;
+            };
+            readonly visible: {
+                readonly scale: readonly [1, 1.05, 1];
+                readonly transition: {
+                    readonly duration: 1.5;
+                    readonly repeat: number;
+                    readonly ease: "easeInOut";
+                };
+            };
+        };
+        readonly impact: {
+            readonly hidden: {
+                readonly scale: 1;
+            };
+            readonly trigger: {
+                readonly scale: readonly [1, 0.95, 1.05, 1];
+                readonly transition: {
+                    readonly duration: 0.4;
+                    readonly ease: "backOut";
+                };
+            };
+        };
+    };
+    readonly DISTANCE: {
+        readonly sm: 4;
+        readonly md: 12;
+        readonly lg: 24;
+        readonly xl: 48;
+    };
+    readonly PRESETS: {
+        readonly heroEntrance: {
+            readonly container: {
+                readonly variants: {
+                    readonly hidden: {
+                        readonly opacity: 1;
+                    };
+                    readonly visible: {
+                        readonly opacity: 1;
+                        readonly transition: {
+                            readonly staggerChildren: 0.12;
+                            readonly delayChildren: 0.05;
+                        };
+                    };
+                };
+            };
+            readonly child: {
+                readonly variants: {
+                    readonly hidden: {
+                        readonly opacity: 0;
+                        readonly y: 12;
+                    };
+                    readonly visible: {
+                        readonly opacity: 1;
+                        readonly y: 0;
+                        readonly transition: {
+                            readonly duration: 0.5;
+                            readonly ease: readonly [0.16, 1, 0.3, 1];
+                        };
+                    };
+                };
+            };
+            readonly delays: {
+                readonly eyebrow: 0;
+                readonly title: 0.05;
+                readonly subtitle: 0.17;
+                readonly cta: 0.29;
+                readonly media: 0.41;
+            };
+        };
+        readonly sectionReveal: {
+            readonly container: {
+                readonly variants: {
+                    readonly hidden: {
+                        readonly opacity: 0;
+                    };
+                    readonly visible: {
+                        readonly opacity: 1;
+                        readonly transition: {
+                            readonly staggerChildren: 0.08;
+                            readonly delayChildren: 0.1;
+                        };
+                    };
+                };
+            };
+            readonly content: {
+                readonly variants: {
+                    readonly hidden: {
+                        readonly opacity: 0;
+                        readonly y: 12;
+                    };
+                    readonly visible: {
+                        readonly opacity: 1;
+                        readonly y: 0;
+                        readonly transition: {
+                            readonly duration: 0.5;
+                            readonly ease: readonly [0.16, 1, 0.3, 1];
+                        };
+                    };
+                };
+            };
+            readonly viewportMargin: "-15%";
+        };
+        readonly cardHover: {
+            readonly rest: {
+                readonly y: 0;
+                readonly scale: 1;
+            };
+            readonly hover: {
+                readonly y: -4;
+                readonly scale: 1.01;
+                readonly transition: {
+                    readonly duration: 0.25;
+                    readonly ease: readonly [0.16, 1, 0.3, 1];
+                };
+            };
+        };
+        readonly panelCrossfade: {
+            readonly initial: {
+                readonly opacity: 0;
+                readonly y: 8;
+            };
+            readonly animate: {
+                readonly opacity: 1;
+                readonly y: 0;
+                readonly transition: {
+                    readonly duration: 0.25;
+                    readonly ease: readonly [0.16, 1, 0.3, 1];
+                };
+            };
+            readonly exit: {
+                readonly opacity: 0;
+                readonly y: -8;
+                readonly transition: {
+                    readonly duration: 0.15;
+                    readonly ease: readonly [0.4, 0, 0.2, 1];
+                };
+            };
+        };
+        readonly tabSlide: {
+            readonly transition: {
+                readonly type: "spring";
+                readonly stiffness: 200;
+                readonly damping: 20;
+            };
+            readonly layout: true;
+        };
+    };
+    readonly REDUCED_VARIANTS: {
+        readonly fadeOnly: {
+            readonly hidden: {
+                readonly opacity: 0;
+            };
+            readonly visible: {
+                readonly opacity: 1;
+                readonly transition: {
+                    readonly duration: 0.25;
+                };
+            };
+        };
+        readonly none: {
+            readonly hidden: {
+                readonly opacity: 1;
+            };
+            readonly visible: {
+                readonly opacity: 1;
+            };
+        };
+    };
+};
+
+export { type AnimationVariant as A, CARD_HOVER as C, DISTANCE as D, EASING as E, HERO_ENTRANCE as H, MOTION as M, PANEL_CROSSFADE as P, REDUCED_PANEL_CROSSFADE as R, SECTION_REVEAL as S, TAB_SLIDE as T, VARIANTS as V, DURATION as a, PRESETS as b, REDUCED_VARIANTS as c, TRANSITION as d, VARIANT_MAP as e };