@courtneyring/components-library 1.0.31 → 1.0.32

package/dist/presets/{animations 3.js → animations 4.js }

@@ -4,16 +4,21 @@ const t = {
   start: "top 78%"
 }, o = {
   from: { opacity: 0 },
-  to: { opacity: 1, duration: 0.85, ease: "power2.out" },
+  to: { opacity: 1, duration: 1.5, ease: "power2.out" },
   start: "top 78%"
 }, a = {
   from: { opacity: 0, y: 20 },
   to: { opacity: 1, y: 0, duration: 0.7, ease: "power2.out" },
   stagger: 0.1,
   start: "top 80%"
+}, e = {
+  from: { opacity: 0, filter: "brightness(2) saturate(0)" },
+  to: { opacity: 1, filter: "brightness(1) saturate(1)", duration: 1.2, ease: "power2.out" },
+  start: "top 85%"
 };
 export {
   o as appleFade,
   t as appleReveal,
-  a as appleStagger
+  a as appleStagger,
+  e as imageFadeFromWhite
 };

package/dist/presets/animations.js

@@ -4,16 +4,21 @@ const t = {
   start: "top 78%"
 }, o = {
   from: { opacity: 0 },
-  to: { opacity: 1, duration: 0.85, ease: "power2.out" },
+  to: { opacity: 1, duration: 1.5, ease: "power2.out" },
   start: "top 78%"
 }, a = {
   from: { opacity: 0, y: 20 },
   to: { opacity: 1, y: 0, duration: 0.7, ease: "power2.out" },
   stagger: 0.1,
   start: "top 80%"
+}, e = {
+  from: { opacity: 0, filter: "brightness(2) saturate(0)" },
+  to: { opacity: 1, filter: "brightness(1) saturate(1)", duration: 1.2, ease: "power2.out" },
+  start: "top 85%"
 };
 export {
   o as appleFade,
   t as appleReveal,
-  a as appleStagger
+  a as appleStagger,
+  e as imageFadeFromWhite
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@courtneyring/components-library",
-  "version": "1.0.31",
+  "version": "1.0.32",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -17,7 +17,8 @@
   ],
   "scripts": {
     "dev": "vite",
-    "build": "vite build && cp -r dist/* dist/",
+    "build": "vite build",
+    "watch": "rm -rf dist && vite build --watch",
     "lint": "eslint .",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",

package/src/styles/_fonts.scss

@@ -33,7 +33,7 @@ $type-scale: (
     ),
     xl: (
       font-size: 24px,
-      line-height: 1.5,
+      // line-height: 1.5,
     ),
     xxl: (
       line-height: 1.7,
@@ -122,12 +122,9 @@ $type-scale: (
     md-portrait: (
       font-size: 30px,
     ),
-    lg-portrait: (
-      font-size: 24spx
-    ),
-    lg-landscape: (
-      font-size: 28px,
-    ),
+    lg: (
+      font-size: 24px,
+    )
   ),
   h4: (
     xxs: (

package/src/styles/_reveal.scss

@@ -0,0 +1,93 @@
+// _reveal.scss
+// Mixins and base styles for useReveal, useRevealGroup, useRevealChildren
+// ------------------------------------------------------------------
+// Usage:
+//   @use "reveal";
+//
+//   .myElement { @include reveal.fade-up; }
+//   .myElement { @include reveal.fade-in; }
+//   .myElement { @include reveal.fade-left; }
+//   .myElement { @include reveal.fade-right; }
+//   .myElement { @include reveal.scale-up; }
+
+@mixin base {
+    transition-delay: var(--reveal-delay, 0s);
+
+    &.is-visible {
+        opacity: 1;
+        transform: none;
+    }
+}
+
+// Fade up (most common — replaces gsap y: 30)
+@mixin fade-up($duration: 0.6s, $ease: ease, $distance: 30px) {
+    opacity: 0;
+    transform: translateY($distance);
+    transition: opacity $duration $ease, transform $duration $ease;
+    @include base;
+}
+
+// Fade in (opacity only)
+@mixin fade-in($duration: 0.6s, $ease: ease) {
+    opacity: 0;
+    transition: opacity $duration $ease;
+    @include base;
+}
+
+// Fade from left
+@mixin fade-left($duration: 0.6s, $ease: ease, $distance: 24px) {
+    opacity: 0;
+    transform: translateX(-$distance);
+    transition: opacity $duration $ease, transform $duration $ease;
+    @include base;
+}
+
+// Fade from right
+@mixin fade-right($duration: 0.6s, $ease: ease, $distance: 24px) {
+    opacity: 0;
+    transform: translateX($distance);
+    transition: opacity $duration $ease, transform $duration $ease;
+    @include base;
+}
+
+// Scale up
+@mixin scale-up($duration: 0.6s, $ease: ease, $from: 0.92) {
+    opacity: 0;
+    transform: scale($from);
+    transition: opacity $duration $ease, transform $duration $ease;
+    @include base;
+}
+
+// Reduced motion override — put this once at the root level
+@mixin reduced-motion-reset {
+    @media (prefers-reduced-motion: reduce) {
+        * {
+            animation-duration: 0.01ms !important;
+            transition-duration: 0.01ms !important;
+        }
+    }
+}
+
+
+
+@mixin fade-from-white {
+    @keyframes fadeOutWhite {
+        0% {
+            opacity: 1;
+        }
+
+        100% {
+            opacity: 0;
+            pointer-events: none;
+        }
+    }
+
+    &::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background: white;
+        animation: fadeOutWhite 3s ease forwards;
+        z-index: 1;
+    }
+}

package/src/styles/_sizes.scss

@@ -92,6 +92,7 @@ $container-max-width-wide: 1800px;
         $v: map.get($val, v);
 
         padding: #{$v}px #{$h}px;
+        scroll-margin-top: #{$v}px;
       }
     }
   }

package/dist/AccordionItem-BlVXPxrh.js

@@ -1,40 +0,0 @@
-import { jsxs as _, jsx as c } from "react/jsx-runtime";
-import r from "./utils/parse.js";
-import { c as t } from "./index-B2JRaoNz.js";
-import './assets/AccordionItem.css';const s = "_accordion_1l59q_1", d = "_title_1l59q_8", l = "_accordion__item_1l59q_11", m = "_header_1l59q_14", p = "_accordion__icon_1l59q_101", b = "_open_1l59q_175", h = "_accordion__button_1l59q_179", q = "_accordion__content_1l59q_249", N = "_body_1l59q_257", o = {
-  accordion: s,
-  title: d,
-  accordion__item: l,
-  header: m,
-  accordion__icon: p,
-  open: b,
-  accordion__button: h,
-  accordion__content: q,
-  body: N
-}, f = ({ title: a, body: i, toggleFn: e, isOpen: n }) => /* @__PURE__ */ _("div", { className: t(o.accordion__item, n && o.open), children: [
-  /* @__PURE__ */ _(
-    "button",
-    {
-      className: t(o.accordion__button),
-      onClick: () => e(!n),
-      children: [
-        /* @__PURE__ */ _("div", { className: o.accordion__icon, children: [
-          /* @__PURE__ */ c("span", {}),
-          /* @__PURE__ */ c("span", { className: `${n ? o.open : ""}` })
-        ] }),
-        /* @__PURE__ */ c("span", { className: o.title, children: a })
-      ]
-    }
-  ),
-  /* @__PURE__ */ c(
-    "div",
-    {
-      className: t(o.accordion__content, n && o.open),
-      children: /* @__PURE__ */ c("div", { className: o.body, children: r(i) })
-    }
-  )
-] });
-export {
-  f as A,
-  o as s
-};