@courtneyring/components-library 1.0.30 → 1.0.32

package/dist/presets/animations 4.js

@@ -0,0 +1,24 @@
+const t = {
+  from: { opacity: 0, y: 16 },
+  to: { opacity: 1, y: 0, duration: 0.85, ease: "power2.out" },
+  start: "top 78%"
+}, o = {
+  from: { opacity: 0 },
+  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,
+  e as imageFadeFromWhite
+};

package/dist/presets/animations.js

@@ -0,0 +1,24 @@
+const t = {
+  from: { opacity: 0, y: 16 },
+  to: { opacity: 1, y: 0, duration: 0.85, ease: "power2.out" },
+  start: "top 78%"
+}, o = {
+  from: { opacity: 0 },
+  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,
+  e as imageFadeFromWhite
+};

package/dist/utils/breakpoints 4.js

@@ -0,0 +1,8 @@
+const t = ({ innerWidth: s }) => s >= 992, e = ({ innerWidth: s }) => s > 1200, o = ({ innerWidth: s }) => s >= 992 && s < 1200, r = ({ innerWidth: s }) => s >= 768 && s < 992, n = ({ innerWidth: s }) => s < 768;
+export {
+  t as isDesktop,
+  e as isLargeDesktop,
+  n as isMobile,
+  o as isSmallDesktop,
+  r as isTablet
+};

package/dist/utils/gsapSetup 4.js

@@ -0,0 +1,8 @@
+import { g as r } from "../index-BmTo-IS6.js";
+import { S as e } from "../ScrollTrigger-6HnikosL.js";
+function o() {
+  return r.core.globals().ScrollTrigger || r.registerPlugin(e), r;
+}
+export {
+  o as ensureGsapRegistered
+};

package/dist/utils/gsapSetup.js

@@ -1,7 +1,8 @@
-import { g as r, S as e } from "../ScrollTrigger-DDbij8gI.js";
-function i() {
+import { g as r } from "../index-BmTo-IS6.js";
+import { S as e } from "../ScrollTrigger-6HnikosL.js";
+function o() {
   return r.core.globals().ScrollTrigger || r.registerPlugin(e), r;
 }
 export {
-  i as ensureGsapRegistered
+  o as ensureGsapRegistered
 };

package/dist/utils/parse 4.js

@@ -0,0 +1,12 @@
+import { jsx as t } from "react/jsx-runtime";
+import l from "react";
+function o(r) {
+  return l.isValidElement(r);
+}
+const i = (r) => (Array.isArray(r) ? r : [r]).map(
+  (e, a) => o(e) ? /* @__PURE__ */ t(l.Fragment, { children: e }, `seg-${a}`) : /* @__PURE__ */ t("p", { children: e }, `seg-${a}`)
+);
+export {
+  i as default,
+  o as isReactElement
+};

package/dist/utils/parse.js

@@ -1,12 +1,12 @@
 import { jsx as t } from "react/jsx-runtime";
-import o from "react";
-function c(r) {
-  return o.isValidElement(r);
+import l from "react";
+function o(r) {
+  return l.isValidElement(r);
 }
-const m = (r) => (Array.isArray(r) ? r : [r]).map(
-  (e, a) => c(e) ? /* @__PURE__ */ t(o.Fragment, { children: e }, `seg-${a}`) : /* @__PURE__ */ t("p", { children: e }, `seg-${a}`)
+const i = (r) => (Array.isArray(r) ? r : [r]).map(
+  (e, a) => o(e) ? /* @__PURE__ */ t(l.Fragment, { children: e }, `seg-${a}`) : /* @__PURE__ */ t("p", { children: e }, `seg-${a}`)
 );
 export {
-  m as default,
-  c as isReactElement
+  i as default,
+  o as isReactElement
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@courtneyring/components-library",
-  "version": "1.0.30",
+  "version": "1.0.32",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -8,14 +8,17 @@
   "exports": {
     ".": {
       "default": "./dist/index.js"
-    }
+    },
+    "./styles": "./src/styles/index.scss"
   },
   "files": [
-    "dist"
+    "dist",
+    "src/styles"
   ],
   "scripts": {
     "dev": "vite",
-    "build": "vite build --watch",
+    "build": "vite build",
+    "watch": "rm -rf dist && vite build --watch",
     "lint": "eslint .",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
@@ -23,8 +26,10 @@
     "publish-package": "npm publish --access public"
   },
   "dependencies": {
+    "@googlemaps/js-api-loader": "^2.0.2",
     "@gsap/react": "^2.1.2",
     "@next/third-parties": "^16.1.6",
+    "@vis.gl/react-google-maps": "^1.8.3",
     "classnames": "^2.5.1",
     "gsap": "^3.13.0",
     "moment": "^2.30.1",

package/src/styles/_breakpoints.scss

@@ -0,0 +1,107 @@
+@use "sass:map";
+
+$breakpoints: (
+  //Small mobile
+  "xxs": 0,
+  // Standard Mobile
+  "xs": 390px,
+  // Small Tablet Portrait
+  "sm": 625px,
+  // Large Tablet Portrait
+  "md": 800px,
+  // Small Landscape
+  "lg": 992px,
+  // Large Landscape
+  "xl": 1200px,
+  // XL Landscape
+  "xxl": 1600px
+);
+
+
+
+
+@mixin xxs {
+  @media (min-width: map.get($breakpoints, "xxs")) {
+    @content;
+  }
+}
+
+@mixin xs {
+  @media (min-width: map.get($breakpoints, "xs")) {
+    @content;
+  }
+}
+
+@mixin sm {
+  @media (min-width: map.get($breakpoints, "sm")) {
+    @content;
+  }
+}
+
+@mixin md {
+  @media (min-width: map.get($breakpoints, "md")) {
+    @content;
+  }
+}
+
+@mixin lg {
+  @media (min-width: map.get($breakpoints, "lg")) {
+    @content;
+  }
+}
+
+@mixin xl {
+  @media (min-width: map.get($breakpoints, "xl")) {
+    @content;
+  }
+}
+
+@mixin xxl {
+  @media (min-width: map.get($breakpoints, "xxl")) {
+    @content;
+  }
+}
+
+@mixin breakpoint($bp: 0) {
+  @media (max-width: $bp) {
+    @content;
+  }
+}
+
+@mixin landscape {
+  @media (orientation: landscape) {
+    @content;
+  }
+}
+
+@mixin portrait {
+  @media (orientation: portrait) {
+    @content;
+  }
+}
+
+@mixin viewport($bp, $orientation) {
+  $width: map.get($breakpoints, $bp);
+
+  @if $width ==null {
+    @error "Unknown breakpoint `#{$bp}`.";
+  }
+
+  @if $orientation !=portrait and $orientation !=landscape {
+    @error "Orientation must be `portrait` or `landscape`.";
+  }
+
+  @media (min-width: $width) and (orientation: $orientation) {
+    @content;
+  }
+}
+
+@mixin landscape-or($bp-landscape, $bp-any) {
+  $width-landscape: map.get($breakpoints, $bp-landscape);
+  $width-any: map.get($breakpoints, $bp-any);
+
+  @media (min-width: $width-landscape) and (orientation: landscape),
+  (min-width: $width-any) {
+    @content;
+  }
+}

package/src/styles/_colors.scss

@@ -0,0 +1,50 @@
+@use "sass:string";
+@use "sass:meta";
+@use "sass:map";
+
+//TEMP
+$color-primary: var(--color-primary-dark);
+
+$color-primary-dark: var(--color-primary-dark);
+$color-primary-medium: var(--color-primary-medium);
+$color-primary-light: var(--color-primary-light);
+$color-secondary: var(--color-secondary);
+$color-white: var(--color-white);
+$color-neutral-light: var(--color-neutral-light);
+$color-neutral-medium: var(--color-neutral-medium);
+$color-neutral-dark: var(--color-neutral-dark);
+
+$theme-colors: (
+  "color-primary-dark": (
+    background-color: $color-primary-dark,
+    color: $color-white,
+  ),
+  "color-primary-medium": (
+    background-color: $color-primary-medium,
+    color: $color-white,
+  ),
+  "color-primary-light": (
+    background-color: $color-primary-light,
+    color: $color-neutral-dark,
+  ),
+  "color-secondary": (
+    background-color: $color-secondary,
+    color: $color-neutral-dark,
+  ),
+  "color-neutral-dark": (
+    background-color: $color-neutral-dark,
+    color: $color-white,
+  ),
+  "color-neutral-medium": (
+    background-color: $color-neutral-medium,
+    color: $color-white,
+  ),
+  "color-neutral-light": (
+    background-color: $color-neutral-light,
+    color: $color-neutral-dark,
+  ),
+  "color-white": (
+    background-color: $color-white,
+    color: $color-neutral-dark,
+  ),
+);

package/src/styles/_fonts.scss

@@ -0,0 +1,238 @@
+@use "sass:map";
+@use "breakpoints";
+@use "sass:string";
+@use "sass:list";
+
+// Fonts
+$font-primary: var(--font-primary);
+$font-secondary: var(--font-secondary);
+
+$type-scale: (
+  body: (
+    xxs: (
+      font-size: 20px,
+      line-height: 1.2,
+    ),
+    xs: (
+      font-size: 22px,
+    ),
+    md-portrait: (
+      font-size: 28px,
+    ),
+    md-landscape: (
+      font-size: 18px,
+      line-height: 1.3
+    ),
+    lg-portrait: (
+      font-size: 24px,
+      line-height: 1.2,
+    ),
+    lg-landscape: (
+      font-size: 24px,
+      line-height: 1.3,
+    ),
+    xl: (
+      font-size: 24px,
+      // line-height: 1.5,
+    ),
+    xxl: (
+      line-height: 1.7,
+    ),
+  ),
+  header: (
+    xxs: (
+      font-size: 28px,
+      line-height: 1.2,
+    ),
+  ),
+  strong: (
+    xxs: (
+      font-weight: 500,
+      font-size: 24px,
+    ),
+    md-portrait: (
+      font-size: 30px,
+    ),
+    md-landscape: (
+      font-size: 20px,
+    ),
+    lg: (
+      font-size: 28px,
+    ),
+  ),
+  small: (
+    xxs: (
+      font-size: 18px,
+    ),
+    md-landscape: (
+      font-size: 18px,
+    ),
+    md-portrait: (
+      font-size: 22px,
+    ),
+    lg-landscape: (
+      font-size: 20px,
+      line-height: 1,
+    ),
+    lg-portrait: (
+      font-size: 22px,
+      line-height: 1,
+    ),
+  ),
+  h2: (
+    xxs: (
+      font-family: $font-secondary,
+      font-size: 38px,
+      line-height: 1,
+    ),
+    xs: (
+      font-size: 40px,
+      line-height: 1.2,
+    ),
+    sm: (
+      font-size: 46px,
+    ),
+    md-landscape: (
+      font-size: 36px,
+    ),
+    md-portrait: (
+      font-size: 50px,
+    ),
+    lg-landscape: (
+      font-size: 40px,
+    ),
+    xl: (
+      font-size: 55px,
+    ),
+  ),
+  h3: (
+    xxs: (
+      font-size: 22px,
+      line-height: 1,
+      text-transform: uppercase,
+      letter-spacing: 2px,
+      // margin-bottom: 15px,
+    ),
+    sm: (
+      font-size: 26px,
+    ),
+    md-landscape: (
+      font-size: 20px,
+    ),
+    md-portrait: (
+      font-size: 30px,
+    ),
+    lg: (
+      font-size: 24px,
+    )
+  ),
+  h4: (
+    xxs: (
+      font-weight: 560,
+      font-size: 26px,
+      line-height: 1,
+      margin-bottom: 10px,
+    ),
+    sm: (
+      font-size: 26px,
+    ),
+    md-landscape: (
+      font-size: 20px,
+    ),
+    md-portrait: (
+      font-size: 30px,
+    ),
+    lg-landscape: (
+      font-size: 28px,
+    ),
+  ),
+  h5: (
+    xxs: (
+      font-size: 24px,
+      line-height: 1,
+      // margin-bottom: 10px,
+    ),
+    sm: (
+      font-size: 26px,
+    ),
+    md-landscape: (
+      font-size: 20px,
+    ),
+    md-portrait: (
+      font-size: 30px,
+    ),
+    lg-landscape: (
+      font-size: 28px,
+    ),
+  ),
+);
+
+// @mixin type($name) {
+//   $style: map.get($type-scale, $name);
+
+//   // --- Loop through other breakpoints ---
+//   @each $bp, $width in breakpoints.$breakpoints {
+//     $bp-styles: map.get($style, $bp);
+//     @if $bp-styles {
+//       @media (min-width: $width) {
+//         @each $prop, $value in $bp-styles {
+//           #{$prop}: #{$value};
+//         }
+//       }
+//     }
+//   }
+// }
+@mixin type($name) {
+  $style: map.get($type-scale, $name);
+
+  @each $key, $styles in $style {
+    $parts: string.split($key, "-");
+    $bp: list.nth($parts, 1);
+    $orientation: if(list.length($parts) > 1, list.nth($parts, 2), null);
+    $width: map.get(breakpoints.$breakpoints, $bp);
+
+    @if $width {
+      $media: "(min-width: #{$width})";
+
+      @if $orientation {
+        $media: "#{$media} and (orientation: #{$orientation})";
+      }
+
+      @media #{$media} {
+        @each $prop, $value in $styles {
+          #{$prop}: #{$value};
+        }
+      }
+    }
+  }
+}
+
+// Font Sizes
+$size-xlarge: 60px;
+$size-large: 50px;
+$size-medium-large: 40px;
+$size-medium: 32px;
+$size-small-medium: 28px;
+$size-small: 24px;
+$size-xsmall: 20px;
+$size-tiny: 16px;
+$size-xtiny: 13px;
+
+$theme-sizes: (
+  "xlarge": $size-xlarge,
+  "large": $size-large,
+  "mediumLarge": $size-medium-large,
+  "medium": $size-medium,
+  "smallMedium": $size-small-medium,
+  "small": $size-small,
+  "xsmall": $size-xsmall,
+  "tiny": $size-tiny,
+  "xtiny": $size-xtiny,
+);
+
+@mixin parsedText($selector) {
+  #{$selector},
+  #{$selector} > * {
+    @content;
+  }
+}

package/src/styles/_mixins.scss

@@ -0,0 +1,114 @@
+@use "sass:map";
+@use "sass:list";
+@use "colors";
+@use "sizes";
+@use "breakpoints";
+@use "sass:string";
+
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@mixin color($selector: null, $prop: null, $nested...) {
+  @each $name, $value in colors.$theme-colors {
+    &[data-color="#{$name}"] {
+      @if list.length($nested) > 0 and $selector and $prop {
+        @each $nest in $nested {
+          & #{$nest} {
+            #{$selector}: map.get($value, $prop);
+          }
+        }
+      }
+      @else if $selector and $prop {
+        #{$selector}: map.get($value, $prop);
+      } @else {
+        @each $property, $val in $value {
+          #{$property}: #{$val};
+        }
+      }
+    }
+  }
+}
+
+@mixin respond($bp, $orientation: null) {
+  $width: map.get(breakpoints.$breakpoints, $bp);
+
+  @if $width {
+    $media: "(min-width: #{$width})";
+
+    @if $orientation {
+      $media: "#{$media} and (orientation: #{$orientation})";
+    }
+
+    @media #{$media} {
+      @content;
+    }
+  }
+}
+
+@function parse-breakpoint-key($key) {
+  $parts: string.split($key, "-");
+
+  $bp: list.nth($parts, 1);
+  $orientation: if(list.length($parts) > 1, list.nth($parts, 2), null);
+
+  @return (bp: $bp, orientation: $orientation);
+}
+
+//TODO: Fix me
+@mixin override-container(
+  $selector,
+  $vertical: true,
+  $horizontal: true,
+  $sizes,
+  $resets
+) {
+  @each $bp in $sizes {
+    $parsed: parse-breakpoint-key($bp);
+
+    $bp: map.get($parsed, bp);
+    $orientation: map.get($parsed, orientation);
+
+    @include respond($bp, $orientation) {
+      @if $vertical {
+        $v: map.get(sizes.$container-padding-vals, $bp, v);
+        #{$selector} {
+          margin-top: -#{$v}px;
+          margin-bottom: -#{$v}px;
+        }
+      }
+      @if $horizontal {
+        $h: map.get(sizes.$container-padding-vals, $bp, h);
+        #{$selector} {
+          width: calc(100% + #{$h * 2}px);
+          margin-left: -#{$h}px;
+        }
+      }
+    }
+  }
+
+  @each $bp in $resets {
+    $parsed: parse-breakpoint-key($bp);
+
+    $bp: map.get($parsed, bp);
+    $orientation: map.get($parsed, orientation);
+    @include respond($bp, $orientation) {
+      #{$selector} {
+        margin-top: 0px;
+        margin-bottom: 0px;
+        width: 100%;
+        margin-left: 0px;
+      }
+    }
+  }
+}
+
+@mixin maskedImage {
+  & img {
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+  }
+}