@latte-macchiat-io/latte-vanilla-components 0.0.176 → 0.0.177

package/dist/components/NavLegal/NavLegal.css.ts

@@ -1,121 +0,0 @@
-import { style } from '@vanilla-extract/css';
-import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
-import { queries } from '../../styles/mediaqueries';
-import { themeContract } from '../../theme';
-
-const navLegalBase = style({
-  display: 'flex',
-  alignItems: 'center',
-  gap: themeContract.space.md,
-  fontSize: themeContract.fontSizes.sm,
-  color: themeContract.colors.textSecondary,
-  flexDirection: 'column',
-
-  '@media': {
-    [queries.md]: {
-      flexDirection: 'row',
-      gap: themeContract.space.lg,
-    },
-  },
-
-  // selectors: {
-  //   '& a': {
-  //     color: 'inherit',
-  //     textDecoration: 'none',
-  //     transition: 'all 0.3s ease-in-out',
-  //     borderRadius: themeContract.radii.sm,
-  //     padding: `${themeContract.space.xs} ${themeContract.space.sm}`,
-  //   },
-  //   '& a:hover': {
-  //     color: themeContract.colors.primary,
-  //     backgroundColor: themeContract.colors.surface,
-  //   },
-  //   '& a:focus': {
-  //     outline: '2px solid',
-  //     outlineColor: themeContract.colors.primary,
-  //     outlineOffset: '2px',
-  //   },
-  // },
-});
-
-export const navLegalRecipe = recipe({
-  base: navLegalBase,
-
-  variants: {
-    orientation: {
-      horizontal: {
-        flexDirection: 'row',
-      },
-      vertical: {
-        flexDirection: 'column',
-        alignItems: 'flex-start',
-      },
-      responsive: {
-        flexDirection: 'column',
-        alignItems: 'flex-start',
-
-        '@media': {
-          [queries.md]: {
-            flexDirection: 'row',
-            alignItems: 'center',
-          },
-        },
-      },
-    },
-    size: {
-      sm: {
-        fontSize: themeContract.fontSizes.xs,
-        gap: themeContract.space.sm,
-      },
-      md: {
-        fontSize: themeContract.fontSizes.sm,
-        gap: themeContract.space.md,
-      },
-      lg: {
-        fontSize: themeContract.fontSizes.md,
-        gap: themeContract.space.lg,
-      },
-    },
-    variant: {
-      default: {},
-      compact: {
-        gap: themeContract.space.sm,
-
-        // selectors: {
-        //   '& a': {
-        //     padding: `${themeContract.space.xs} ${themeContract.space.xs}`,
-        //   },
-        // },
-      },
-      spacious: {
-        gap: themeContract.space.xl,
-
-        // selectors: {
-        //   '& a': {
-        //     padding: `${themeContract.space.sm} ${themeContract.space.md}`,
-        //   },
-        // },
-      },
-    },
-    align: {
-      left: {
-        justifyContent: 'flex-start',
-      },
-      center: {
-        justifyContent: 'center',
-      },
-      right: {
-        justifyContent: 'flex-end',
-      },
-    },
-  },
-
-  defaultVariants: {
-    orientation: 'responsive',
-    size: 'md',
-    variant: 'default',
-    align: 'left',
-  },
-});
-
-export type NavLegalVariants = RecipeVariants<typeof navLegalRecipe>;

package/dist/components/NavSocial/NavSocial.css.ts

@@ -1,121 +0,0 @@
-import { style } from '@vanilla-extract/css';
-import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
-import { queries } from '../../styles/mediaqueries';
-import { themeContract } from '../../theme/contract.css';
-
-const navSocialBase = style({
-  display: 'flex',
-  alignItems: 'center',
-  gap: themeContract.space.md,
-
-  '@media': {
-    [queries.md]: {
-      gap: themeContract.space.lg,
-    },
-  },
-});
-
-const navSocialLink = style({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  textDecoration: 'none',
-  color: 'inherit',
-  transition: 'all 0.3s ease-in-out',
-  borderRadius: themeContract.radii.full,
-  padding: themeContract.space.xs,
-
-  // ':hover': {
-  //   transform: 'translateY(-2px) scale(1.1)',
-  //   color: themeContract.colors.primary,
-  // },
-
-  // ':focus': {
-  //   outline: '2px solid',
-  //   outlineColor: themeContract.colors.primary,
-  //   outlineOffset: '2px',
-  // },
-
-  // ':active': {
-  //   transform: 'translateY(0) scale(1.05)',
-  // },
-});
-
-export const navSocialRecipe = recipe({
-  base: navSocialBase,
-
-  variants: {
-    orientation: {
-      horizontal: {
-        flexDirection: 'row',
-      },
-      vertical: {
-        flexDirection: 'column',
-      },
-    },
-    size: {
-      sm: {
-        gap: themeContract.space.sm,
-
-        // selectors: {
-        //   [`& .${navSocialLink}`]: {
-        //     padding: themeContract.space.xs,
-        //   },
-        // },
-      },
-      md: {
-        gap: themeContract.space.md,
-      },
-      lg: {
-        gap: themeContract.space.lg,
-
-        // selectors: {
-        //   [`& .${navSocialLink}`]: {
-        //     padding: themeContract.space.sm,
-        //   },
-        // },
-      },
-    },
-    variant: {
-      default: {},
-      rounded: {
-        // selectors: {
-        //   [`& .${navSocialLink}`]: {
-        //     backgroundColor: themeContract.colors.surface,
-        //     borderRadius: themeContract.radii.full,
-        //     width: '40px',
-        //     height: '40px',
-        //   },
-        //   [`& .${navSocialLink}:hover`]: {
-        //     backgroundColor: themeContract.colors.primary,
-        //     color: themeContract.colors.background,
-        //   },
-        // },
-      },
-      outlined: {
-        // selectors: {
-        //   [`& .${navSocialLink}`]: {
-        //     border: `1px solid ${themeContract.colors.border}`,
-        //     borderRadius: themeContract.radii.md,
-        //     width: '40px',
-        //     height: '40px',
-        //   },
-        //   [`& .${navSocialLink}:hover`]: {
-        //     borderColor: themeContract.colors.primary,
-        //     backgroundColor: themeContract.colors.primary,
-        //     color: themeContract.colors.background,
-        //   },
-        // },
-      },
-    },
-  },
-
-  defaultVariants: {
-    orientation: 'horizontal',
-    size: 'md',
-    variant: 'default',
-  },
-});
-
-export { navSocialLink };
-export type NavSocialVariants = RecipeVariants<typeof navSocialRecipe>;

package/dist/components/Section/Section.css.ts

@@ -1,101 +0,0 @@
-import { style } from '@vanilla-extract/css';
-import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
-import { themeContract } from '../../theme';
-
-const sectionBase = style({
-  width: '100%',
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-  justifyContent: 'flex-start',
-  paddingTop: themeContract.section.paddingTop,
-  paddingBottom: themeContract.section.paddingBottom,
-  paddingLeft: themeContract.space.md,
-  paddingRight: themeContract.space.md,
-  maxWidth: themeContract.maxWidth,
-  margin: '0 auto',
-  position: 'relative',
-
-  '@media': {
-    'screen and (min-width: 768px)': {
-      paddingLeft: themeContract.space.lg,
-      paddingRight: themeContract.space.lg,
-    },
-    'screen and (min-width: 1024px)': {
-      paddingLeft: themeContract.space.xl,
-      paddingRight: themeContract.space.xl,
-    },
-  },
-});
-
-export const sectionRecipe = recipe({
-  base: sectionBase,
-
-  variants: {
-    align: {
-      left: {
-        textAlign: 'left',
-        alignItems: 'flex-start',
-      },
-      center: {
-        textAlign: 'center',
-        alignItems: 'center',
-      },
-      right: {
-        textAlign: 'right',
-        alignItems: 'flex-end',
-      },
-    },
-    isDark: {
-      true: {
-        backgroundColor: themeContract.colors.surface,
-        color: themeContract.colors.textLight,
-      },
-      false: {
-        backgroundColor: themeContract.colors.background,
-        color: themeContract.colors.text,
-      },
-    },
-    isFullHeight: {
-      true: {
-        minHeight: '100vh',
-        justifyContent: 'center',
-      },
-      false: {
-        minHeight: 'auto',
-        justifyContent: 'flex-start',
-      },
-    },
-    spacing: {
-      none: {
-        paddingTop: '0',
-        paddingBottom: '0',
-      },
-      sm: {
-        paddingTop: themeContract.space.md,
-        paddingBottom: themeContract.space.md,
-      },
-      md: {
-        paddingTop: themeContract.section.paddingTop,
-        paddingBottom: themeContract.section.paddingBottom,
-      },
-      lg: {
-        paddingTop: themeContract.space.xl,
-        paddingBottom: themeContract.space.xl,
-      },
-      xl: {
-        paddingTop: themeContract.space['2xl'],
-        paddingBottom: themeContract.space['2xl'],
-      },
-    },
-  },
-
-  defaultVariants: {
-    align: 'left',
-    isDark: false,
-    isFullHeight: false,
-    spacing: 'md',
-  },
-});
-
-export type SectionVariants = RecipeVariants<typeof sectionRecipe>;

package/dist/components/Video/Video.css.ts

@@ -1,210 +0,0 @@
-import { style } from '@vanilla-extract/css';
-import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
-import { themeContract } from '../../theme/contract.css';
-
-const videoBase = style({
-  position: 'relative',
-  overflow: 'hidden',
-  backgroundColor: themeContract.colors.background,
-});
-
-const videoElement = style({
-  top: '50%',
-  left: '50%',
-  width: 'auto',
-  minWidth: '100%',
-  minHeight: '100%',
-  position: 'absolute',
-  transform: 'translate(-50%, -50%)',
-});
-
-const videoPoster = style({
-  top: 0,
-  left: 0,
-  width: '100%',
-  height: '100%',
-  position: 'absolute',
-  opacity: 1,
-  transition: 'opacity 0.3s ease-in-out',
-  pointerEvents: 'auto',
-
-  // selectors: {
-  //   '&[data-playing="true"]': {
-  //     opacity: 0,
-  //     pointerEvents: 'none',
-  //   },
-  // },
-});
-
-const posterImage = style({
-  width: '100%',
-  height: '100%',
-  minWidth: '100%',
-  minHeight: '100%',
-  objectFit: 'cover',
-});
-
-const playButton = style({
-  position: 'absolute',
-  top: '50%',
-  left: '50%',
-  transform: 'translate(-50%, -50%)',
-  border: 'none',
-  borderRadius: themeContract.radii.full,
-  backgroundColor: 'rgba(0, 0, 0, 0.7)',
-  color: themeContract.colors.background,
-  cursor: 'pointer',
-  transition: 'all 0.3s ease-in-out',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  opacity: 1,
-  pointerEvents: 'auto',
-
-  ':hover': {
-    backgroundColor: 'rgba(0, 0, 0, 0.9)',
-    transform: 'translate(-50%, -50%) scale(1.1)',
-  },
-
-  ':focus': {
-    outline: '2px solid',
-    outlineColor: themeContract.colors.primary,
-    outlineOffset: '2px',
-  },
-
-  // selectors: {
-  //   '&[data-playing="true"]': {
-  //     opacity: 0,
-  //     pointerEvents: 'none',
-  //   },
-  //   '&[data-hidden="true"]': {
-  //     display: 'none',
-  //   },
-  // },
-});
-
-const controlButton = style({
-  position: 'absolute',
-  border: 'none',
-  borderRadius: themeContract.radii.md,
-  backgroundColor: 'rgba(0, 0, 0, 0.7)',
-  color: themeContract.colors.background,
-  cursor: 'pointer',
-  transition: 'all 0.3s ease-in-out',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-
-  // ':hover': {
-  //   backgroundColor: 'rgba(0, 0, 0, 0.9)',
-  // },
-
-  // ':focus': {
-  //   outline: '2px solid',
-  //   outlineColor: themeContract.colors.primary,
-  //   outlineOffset: '2px',
-  // },
-});
-
-const closeButton = style([
-  controlButton,
-  {
-    top: themeContract.space.md,
-    right: themeContract.space.md,
-    width: '40px',
-    height: '40px',
-
-    '@media': {
-      'screen and (min-width: 768px)': {
-        width: '48px',
-        height: '48px',
-        top: themeContract.space.lg,
-        right: themeContract.space.lg,
-      },
-    },
-  },
-]);
-
-const pauseButton = style([
-  controlButton,
-  {
-    bottom: themeContract.space.md,
-    right: '80px',
-    width: '40px',
-    height: '40px',
-
-    '@media': {
-      'screen and (min-width: 768px)': {
-        width: '48px',
-        height: '48px',
-        bottom: themeContract.space.lg,
-        right: '100px',
-      },
-    },
-  },
-]);
-
-const soundButton = style([
-  controlButton,
-  {
-    bottom: themeContract.space.md,
-    right: themeContract.space.md,
-    width: '40px',
-    height: '40px',
-
-    '@media': {
-      'screen and (min-width: 768px)': {
-        width: '48px',
-        height: '48px',
-        bottom: themeContract.space.lg,
-        right: themeContract.space.lg,
-      },
-    },
-  },
-]);
-
-export const videoRecipe = recipe({
-  base: videoBase,
-
-  variants: {
-    size: {
-      sm: {
-        width: '300px',
-        height: '200px',
-      },
-      md: {
-        width: '500px',
-        height: '300px',
-      },
-      lg: {
-        width: '800px',
-        height: '450px',
-      },
-      fullWidth: {
-        width: '100vw',
-        height: 0,
-        paddingBottom: '56.25%', // 16:9 aspect ratio
-        position: 'relative',
-      },
-    },
-    aspectRatio: {
-      '16:9': {
-        aspectRatio: '16/9',
-      },
-      '4:3': {
-        aspectRatio: '4/3',
-      },
-      '1:1': {
-        aspectRatio: '1/1',
-      },
-    },
-  },
-
-  defaultVariants: {
-    size: 'md',
-    aspectRatio: '16:9',
-  },
-});
-
-export { videoElement, videoPoster, posterImage, playButton, closeButton, pauseButton, soundButton };
-export type VideoVariants = RecipeVariants<typeof videoRecipe>;

package/dist/components/VideoFullWidth/VideoFullWidth.css.ts

@@ -1,50 +0,0 @@
-import { style } from '@vanilla-extract/css';
-import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
-import { themeContract } from '../../theme/contract.css';
-
-const videoFullWidthBase = style({
-  height: 0,
-  width: '100vw',
-  overflow: 'hidden',
-  position: 'relative',
-  paddingBottom: '56.25%', // 16:9 aspect ratio
-  backgroundColor: themeContract.colors.background,
-
-  // Break out of container padding
-  marginLeft: `calc(-50vw + 50%)`,
-  marginRight: `calc(-50vw + 50%)`,
-
-  '@media': {
-    'screen and (min-width: 768px)': {
-      marginLeft: `calc(-50vw + 50%)`,
-      marginRight: `calc(-50vw + 50%)`,
-    },
-  },
-});
-
-export const videoFullWidthRecipe = recipe({
-  base: videoFullWidthBase,
-
-  variants: {
-    aspectRatio: {
-      '16:9': {
-        paddingBottom: '56.25%',
-      },
-      '4:3': {
-        paddingBottom: '75%',
-      },
-      '1:1': {
-        paddingBottom: '100%',
-      },
-      '21:9': {
-        paddingBottom: '42.86%',
-      },
-    },
-  },
-
-  defaultVariants: {
-    aspectRatio: '16:9',
-  },
-});
-
-export type VideoFullWidthVariants = RecipeVariants<typeof videoFullWidthRecipe>;

package/dist/css/index.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../theme.css-CNjMk-g_.cjs");exports.actionsRecipe=e.actionsRecipe;exports.buttonRecipe=e.buttonRecipe;exports.carouselRecipe=e.carouselRecipe;exports.columnsRecipe=e.columnsRecipe;exports.consentRecipe=e.consentRecipe;exports.createDarkTheme=e.createDarkTheme;exports.createLightTheme=e.createLightTheme;exports.footerRecipe=e.footerRecipe;exports.formRecipe=e.formRecipe;exports.headerRecipe=e.headerRecipe;exports.iconRecipe=e.iconRecipe;exports.inputRecipe=e.inputRecipe;exports.keyNumberRecipe=e.keyNumberRecipe;exports.labelRecipe=e.labelRecipe;exports.languageSwitcherRecipe=e.languageSwitcherRecipe;exports.logoRecipe=e.logoRecipe;exports.mainRecipe=e.mainRecipe;exports.modalContentRecipe=e.modalContentRecipe;exports.modalRecipe=e.modalRecipe;exports.navLegalRecipe=e.navLegalRecipe;exports.navRecipe=e.navRecipe;exports.navSocialRecipe=e.navSocialRecipe;exports.responsiveProperties=e.responsiveProperties;exports.rowRecipe=e.rowRecipe;exports.sectionRecipe=e.sectionRecipe;exports.sprinkles=e.sprinkles;exports.textFieldRecipe=e.textFieldRecipe;exports.textareaRecipe=e.textareaRecipe;exports.themeContract=e.themeContract;exports.videoFullWidthRecipe=e.videoFullWidthRecipe;exports.videoRecipe=e.videoRecipe;

package/dist/css/index.js

@@ -1,34 +0,0 @@
-import { b as i, d as s, e as c, f as p, g as R, a as o, c as t, h as n, i as r, o as l, p as m, k as d, q as h, l as u, u as v, v as g, w as b, y as f, x as k, A as x, z as w, B as C, r as y, j as D, C as F, s as L, m as S, n as T, t as j, E as q, D as z } from "../theme.css-Dj6kL9o0.js";
-export {
-  i as actionsRecipe,
-  s as buttonRecipe,
-  c as carouselRecipe,
-  p as columnsRecipe,
-  R as consentRecipe,
-  o as createDarkTheme,
-  t as createLightTheme,
-  n as footerRecipe,
-  r as formRecipe,
-  l as headerRecipe,
-  m as iconRecipe,
-  d as inputRecipe,
-  h as keyNumberRecipe,
-  u as labelRecipe,
-  v as languageSwitcherRecipe,
-  g as logoRecipe,
-  b as mainRecipe,
-  f as modalContentRecipe,
-  k as modalRecipe,
-  x as navLegalRecipe,
-  w as navRecipe,
-  C as navSocialRecipe,
-  y as responsiveProperties,
-  D as rowRecipe,
-  F as sectionRecipe,
-  L as sprinkles,
-  S as textFieldRecipe,
-  T as textareaRecipe,
-  j as themeContract,
-  q as videoFullWidthRecipe,
-  z as videoRecipe
-};