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

package/dist/components/Form/TextField/TextField.css.ts

@@ -1,139 +0,0 @@
-import { style } from '@vanilla-extract/css';
-import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
-import { themeContract } from '../../../theme/contract.css';
-
-const textFieldBase = style({
-  display: 'flex',
-  flexDirection: 'column',
-  width: '100%',
-  gap: themeContract.space.xs,
-});
-
-const labelBase = style({
-  fontFamily: themeContract.fonts.body,
-  fontSize: themeContract.fontSizes.sm,
-  fontWeight: themeContract.fontWeights.medium,
-  color: themeContract.colors.text,
-  lineHeight: themeContract.lineHeights.tight,
-
-  // selectors: {
-  //   '&[data-required="true"]': {
-  //     selectors: {
-  //       '&::after': {
-  //         content: ' *',
-  //         color: themeContract.colors.error,
-  //       },
-  //     },
-  //   },
-  // },
-});
-
-const inputBase = style({
-  appearance: 'none',
-  backgroundColor: themeContract.colors.background,
-  border: `1px solid ${themeContract.colors.border}`,
-  borderRadius: themeContract.radii.md,
-  color: themeContract.colors.text,
-  fontFamily: themeContract.fonts.body,
-  fontSize: themeContract.fontSizes.sm,
-  lineHeight: themeContract.lineHeights.normal,
-  padding: `${themeContract.space.sm} ${themeContract.space.md}`,
-  transition: 'all 0.2s ease-in-out',
-  width: '100%',
-
-  '::placeholder': {
-    color: themeContract.colors.textSecondary,
-  },
-
-  ':hover': {
-    borderColor: themeContract.colors.primary,
-  },
-
-  ':focus': {
-    outline: '2px solid',
-    outlineColor: themeContract.colors.primary,
-    outlineOffset: '2px',
-    borderColor: themeContract.colors.primary,
-  },
-
-  ':disabled': {
-    backgroundColor: themeContract.colors.surface,
-    color: themeContract.colors.textSecondary,
-    cursor: 'not-allowed',
-    opacity: '0.6',
-  },
-
-  // selectors: {
-  //   '&[data-error="true"]': {
-  //     borderColor: themeContract.colors.error,
-  //   },
-  //   '&[data-error="true"]:focus': {
-  //     outlineColor: themeContract.colors.error,
-  //     borderColor: themeContract.colors.error,
-  //   },
-  // },
-});
-
-const textareaBase = style([
-  inputBase,
-  {
-    resize: 'vertical',
-    minHeight: '80px',
-  },
-]);
-
-const messageContainer = style({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: themeContract.space.xs,
-});
-
-const errorMessage = style({
-  color: themeContract.colors.error,
-  fontSize: themeContract.fontSizes.xs,
-  lineHeight: themeContract.lineHeights.tight,
-  fontFamily: themeContract.fonts.body,
-});
-
-export const textFieldRecipe = recipe({
-  base: textFieldBase,
-
-  variants: {
-    size: {
-      sm: {
-        gap: themeContract.space.xs,
-
-        // selectors: {
-        //   [`& .${labelBase}`]: {
-        //     fontSize: themeContract.fontSizes.xs,
-        //   },
-        //   [`& .${inputBase}`]: {
-        //     fontSize: themeContract.fontSizes.xs,
-        //     padding: `${themeContract.space.xs} ${themeContract.space.sm}`,
-        //   },
-        // },
-      },
-      md: {},
-      lg: {
-        gap: themeContract.space.sm,
-
-        // selectors: {
-        //   [`& .${labelBase}`]: {
-        //     fontSize: themeContract.fontSizes.md,
-        //   },
-        //   [`& .${inputBase}`]: {
-        //     fontSize: themeContract.fontSizes.md,
-        //     padding: `${themeContract.space.md} ${themeContract.space.lg}`,
-        //   },
-        // },
-      },
-    },
-  },
-
-  defaultVariants: {
-    size: 'md',
-  },
-});
-
-export { labelBase, inputBase, textareaBase, messageContainer, errorMessage };
-export type TextFieldVariants = RecipeVariants<typeof textFieldRecipe>;

package/dist/components/Form/TextField/Textarea/Textarea.css.ts

@@ -1,121 +0,0 @@
-import { style } from '@vanilla-extract/css';
-import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
-import { themeContract } from '../../../../theme/contract.css';
-
-const textareaBase = style({
-  appearance: 'none',
-  backgroundColor: themeContract.colors.background,
-  border: `1px solid ${themeContract.colors.border}`,
-  borderRadius: themeContract.radii.md,
-  color: themeContract.colors.text,
-  fontFamily: themeContract.fonts.body,
-  fontSize: themeContract.fontSizes.sm,
-  lineHeight: themeContract.lineHeights.normal,
-  padding: `${themeContract.space.sm} ${themeContract.space.md}`,
-  transition: 'all 0.2s ease-in-out',
-  width: '100%',
-  resize: 'vertical',
-  minHeight: '80px',
-
-  '::placeholder': {
-    color: themeContract.colors.textSecondary,
-  },
-
-  ':hover': {
-    borderColor: themeContract.colors.primary,
-  },
-
-  ':focus': {
-    outline: '2px solid',
-    outlineColor: themeContract.colors.primary,
-    outlineOffset: '2px',
-    borderColor: themeContract.colors.primary,
-  },
-
-  ':disabled': {
-    backgroundColor: themeContract.colors.surface,
-    color: themeContract.colors.textSecondary,
-    cursor: 'not-allowed',
-    opacity: '0.6',
-    resize: 'none',
-  },
-
-  selectors: {
-    '&[data-error="true"]': {
-      borderColor: themeContract.colors.error,
-    },
-    '&[data-error="true"]:focus': {
-      outlineColor: themeContract.colors.error,
-      borderColor: themeContract.colors.error,
-    },
-  },
-});
-
-export const textareaRecipe = recipe({
-  base: textareaBase,
-
-  variants: {
-    size: {
-      sm: {
-        fontSize: themeContract.fontSizes.xs,
-        padding: `${themeContract.space.xs} ${themeContract.space.sm}`,
-        minHeight: '60px',
-      },
-      md: {},
-      lg: {
-        fontSize: themeContract.fontSizes.md,
-        padding: `${themeContract.space.md} ${themeContract.space.lg}`,
-        minHeight: '100px',
-      },
-    },
-    variant: {
-      default: {},
-      filled: {
-        backgroundColor: themeContract.colors.surface,
-        border: 'none',
-
-        ':focus': {
-          backgroundColor: themeContract.colors.background,
-          border: `1px solid ${themeContract.colors.primary}`,
-        },
-      },
-      outlined: {
-        backgroundColor: 'transparent',
-      },
-      underlined: {
-        backgroundColor: 'transparent',
-        border: 'none',
-        borderBottom: `1px solid ${themeContract.colors.border}`,
-        borderRadius: 0,
-        padding: `${themeContract.space.sm} 0`,
-
-        ':focus': {
-          borderBottom: `2px solid ${themeContract.colors.primary}`,
-          outline: 'none',
-        },
-      },
-    },
-    resize: {
-      vertical: {
-        resize: 'vertical',
-      },
-      horizontal: {
-        resize: 'horizontal',
-      },
-      both: {
-        resize: 'both',
-      },
-      none: {
-        resize: 'none',
-      },
-    },
-  },
-
-  defaultVariants: {
-    size: 'md',
-    variant: 'default',
-    resize: 'vertical',
-  },
-});
-
-export type TextareaVariants = RecipeVariants<typeof textareaRecipe>;

package/dist/components/Header/Header.css.ts

@@ -1,111 +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 headerBase = style({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  width: '100%',
-  height: themeContract.header.height,
-  backgroundColor: themeContract.colors.background,
-  color: themeContract.colors.text,
-  zIndex: 30,
-  paddingLeft: themeContract.space.md,
-  paddingRight: themeContract.space.md,
-  paddingTop: themeContract.space.sm,
-  paddingBottom: themeContract.space.sm,
-  gap: themeContract.space.md,
-
-  '@media': {
-    [queries.md]: {
-      paddingLeft: themeContract.space.lg,
-      paddingRight: themeContract.space.lg,
-      gap: themeContract.space.lg,
-    },
-    [queries.lg]: {
-      paddingLeft: themeContract.space.xl,
-      paddingRight: themeContract.space.xl,
-      gap: themeContract.space.xl,
-    },
-  },
-
-  // selectors: {
-  //   '& a': {
-  //     transition: 'all 0.3s ease-in-out',
-  //     textDecoration: 'none',
-  //     color: 'inherit',
-  //   },
-  //   '& a:hover': {
-  //     opacity: '0.7',
-  //     transform: 'translateY(-1px)',
-  //   },
-  // },
-});
-
-export const headerRecipe = recipe({
-  base: headerBase,
-
-  variants: {
-    // position: {
-    //   relative: {
-    //     position: 'relative',
-    //   },
-    //   fixed: {
-    //     position: 'fixed',
-    //     top: 0,
-    //     left: 0,
-    //     right: 0,
-    //   },
-    //   sticky: {
-    //     position: 'sticky',
-    //     top: 0,
-    //   },
-    // },
-    variant: {
-      default: {
-        backgroundColor: themeContract.colors.background,
-        borderBottom: `1px solid ${themeContract.colors.border}`,
-      },
-      transparent: {
-        backgroundColor: 'transparent',
-        borderBottom: 'none',
-      },
-      dark: {
-        backgroundColor: themeContract.colors.surface,
-        color: themeContract.colors.textLight,
-      },
-    },
-    size: {
-      sm: {
-        height: '60px',
-        paddingTop: themeContract.space.xs,
-        paddingBottom: themeContract.space.xs,
-      },
-      md: {
-        height: themeContract.header.height,
-        paddingTop: themeContract.space.sm,
-        paddingBottom: themeContract.space.sm,
-      },
-      lg: {
-        height: '100px',
-        paddingTop: themeContract.space.md,
-        paddingBottom: themeContract.space.md,
-      },
-    },
-  },
-
-  defaultVariants: {
-    // position: 'relative',
-    variant: 'default',
-    size: 'md',
-  },
-});
-
-export const headerPlaceholder = style({
-  height: themeContract.header.height,
-  width: '100%',
-});
-
-export type HeaderVariants = RecipeVariants<typeof headerRecipe>;

package/dist/components/Header/HeaderOverlay/styles.css.ts

@@ -1,33 +0,0 @@
-import { createVar, style, CSSProperties } from '@vanilla-extract/css';
-import { mq } from '../../../assets/styles/mediaqueries';
-
-export const vars = {
-  overlayBottom: createVar(),
-  overlayTransform: createVar(),
-};
-
-export const headerOverlayStyle = style({
-  top: 0,
-  left: 0,
-  zIndex: 40,
-  width: '100vw',
-  display: 'flex',
-  height: '100vh',
-  position: 'fixed',
-  overflow: 'hidden',
-  textAlign: 'center',
-  alignItems: 'center',
-  flexDirection: 'column',
-  transformOrigin: '0% 0%',
-  justifyContent: 'center',
-  gap: 'var(--overlayGap, 20px)', // valeur par défaut, à remplacer via assignInlineVars si nécessaire
-  bottom: vars.overlayBottom,
-  transform: vars.overlayTransform,
-  transition: 'transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0)',
-
-  '@media': {
-    [mq[0]]: { gap: 'var(--overlayGap0, 20px)' },
-    [mq[1]]: { gap: 'var(--overlayGap1, 30px)' },
-    [mq[2]]: { gap: 'var(--overlayGap2, 40px)' },
-  },
-});

package/dist/components/Header/ToggleNav/styles.css.ts

@@ -1,40 +0,0 @@
-import { createVar, globalStyle, style } from '@vanilla-extract/css';
-
-export const vars = {
-  displayOnDesktop: createVar(),
-};
-
-export const toggleNavStyle = style({
-  border: 0,
-  width: '25px',
-  height: '12px',
-  zIndex: 60,
-  marginLeft: 0,
-  cursor: 'pointer',
-  position: 'relative',
-
-  '@media': {
-    'screen and (min-width: 1024px)': {
-      display: vars.displayOnDesktop,
-    },
-  },
-});
-
-export const toggleNavBarStyle = style({
-  height: '2px',
-  width: '25px',
-  marginBottom: '8px',
-  display: 'block',
-  position: 'relative',
-  transformOrigin: 'center center',
-  transition: 'all 0.5s ease-in-out',
-});
-
-// Style dynamique pour chaque ligne via data attribute
-globalStyle(`${toggleNavBarStyle}[data-open="true"]:nth-of-type(1)`, {
-  transform: 'rotate(45deg) translate(4px, 3px)',
-});
-
-globalStyle(`${toggleNavBarStyle}[data-open="true"]:nth-of-type(2)`, {
-  transform: 'rotate(-45deg) translate(4px, -3px)',
-});

package/dist/components/Icon/Icon.css.ts

@@ -1,102 +0,0 @@
-import { style } from '@vanilla-extract/css';
-import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
-import { themeContract } from '../../theme';
-
-const iconBase = style({
-  display: 'inline-block',
-  verticalAlign: 'middle',
-  fill: 'currentColor',
-  flexShrink: 0,
-  transition: 'all 0.3s ease-in-out',
-});
-
-const iconPath = style({
-  transition: 'fill 0.3s ease-in-out',
-});
-
-export const iconRecipe = recipe({
-  base: iconBase,
-
-  variants: {
-    size: {
-      xs: {
-        width: '12px',
-        height: '12px',
-      },
-      sm: {
-        width: '16px',
-        height: '16px',
-      },
-      md: {
-        width: '24px',
-        height: '24px',
-      },
-      lg: {
-        width: '32px',
-        height: '32px',
-      },
-      xl: {
-        width: '48px',
-        height: '48px',
-      },
-      '2xl': {
-        width: '64px',
-        height: '64px',
-      },
-    },
-    // color: {
-    //   current: {
-    //     fill: 'currentColor',
-    //   },
-    //   primary: {
-    //     fill: themeContract.colors.primary,
-    //   },
-    //   secondary: {
-    //     fill: themeContract.colors.secondary,
-    //   },
-    //   accent: {
-    //     fill: themeContract.colors.accent,
-    //   },
-    //   text: {
-    //     fill: themeContract.colors.text,
-    //   },
-    //   textSecondary: {
-    //     fill: themeContract.colors.textSecondary,
-    //   },
-    //   error: {
-    //     fill: themeContract.colors.error,
-    //   },
-    //   success: {
-    //     fill: themeContract.colors.success,
-    //   },
-    //   warning: {
-    //     fill: themeContract.colors.warning,
-    //   },
-    //   info: {
-    //     fill: themeContract.colors.info,
-    //   },
-    // },
-    interactive: {
-      true: {
-        cursor: 'pointer',
-        ':hover': {
-          transform: 'scale(1.1)',
-          opacity: 0.8,
-        },
-        ':active': {
-          transform: 'scale(0.95)',
-        },
-      },
-      false: {},
-    },
-  },
-
-  defaultVariants: {
-    size: 'md',
-    // color: 'current',
-    interactive: false,
-  },
-});
-
-export { iconPath };
-export type IconVariants = RecipeVariants<typeof iconRecipe>;

package/dist/components/KeyNumber/KeyNumber.css.ts

@@ -1,158 +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 keyNumberBase = style({
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-  textAlign: 'center',
-  color: themeContract.colors.text,
-});
-
-const keyNumberValue = style({
-  fontSize: themeContract.fontSizes.lg,
-  paddingBottom: themeContract.space.md,
-  fontWeight: '400',
-
-  '@media': {
-    [queries.lg]: {
-      paddingBottom: themeContract.space.lg,
-    },
-  },
-
-  // selectors: {
-  //   '& span': {
-  //     fontSize: themeContract.fontSizes['4xl'],
-  //     lineHeight: themeContract.lineHeights.tight,
-  //     fontWeight: 'bold',
-  //     display: 'inline-block',
-
-  //     '@media': {
-  //       [queries.md]: {
-  //         fontSize: '3rem',
-  //       },
-  //       [queries.lg]: {
-  //         fontSize: '4rem',
-  //       },
-  //     },
-  //   },
-  // },
-});
-
-const keyNumberLabel = style({
-  fontSize: themeContract.fontSizes.md,
-  color: themeContract.colors.textSecondary,
-  lineHeight: themeContract.lineHeights.normal,
-  margin: 0,
-
-  '@media': {
-    [queries.md]: {
-      fontSize: themeContract.fontSizes.lg,
-    },
-  },
-});
-
-export const keyNumberRecipe = recipe({
-  base: keyNumberBase,
-
-  variants: {
-    size: {
-      sm: {
-        // selectors: {
-        //   [`& .${keyNumberValue}`]: {
-        //     fontSize: themeContract.fontSizes.md,
-        //   },
-        //   [`& .${keyNumberValue} span`]: {
-        //     fontSize: themeContract.fontSizes['2xl'],
-        //   },
-        //   [`& .${keyNumberLabel}`]: {
-        //     fontSize: themeContract.fontSizes.sm,
-        //   },
-        // },
-      },
-      md: {},
-      lg: {
-        // selectors: {
-        //   [`& .${keyNumberValue}`]: {
-        //     fontSize: themeContract.fontSizes.xl,
-        //   },
-        //   [`& .${keyNumberValue} span`]: {
-        //     fontSize: '5rem',
-        //     '@media': {
-        //       [queries.lg]: {
-        //         fontSize: '6rem',
-        //       },
-        //     },
-        //   },
-        //   [`& .${keyNumberLabel}`]: {
-        //     fontSize: themeContract.fontSizes.xl,
-        //   },
-        // },
-      },
-    },
-    variant: {
-      default: {},
-      highlighted: {
-        padding: themeContract.space.lg,
-        backgroundColor: themeContract.colors.surface,
-        borderRadius: themeContract.radii.lg,
-        boxShadow: themeContract.shadows.md,
-      },
-      outlined: {
-        padding: themeContract.space.lg,
-        border: `2px solid ${themeContract.colors.border}`,
-        borderRadius: themeContract.radii.lg,
-      },
-    },
-    align: {
-      left: {
-        alignItems: 'flex-start',
-        textAlign: 'left',
-      },
-      center: {
-        alignItems: 'center',
-        textAlign: 'center',
-      },
-      right: {
-        alignItems: 'flex-end',
-        textAlign: 'right',
-      },
-    },
-    // color: {
-    //   default: {},
-    //   primary: {
-    //     // selectors: {
-    //     //   [`& .${keyNumberValue} span`]: {
-    //     //     color: themeContract.colors.primary,
-    //     //   },
-    //     // },
-    //   },
-    //   accent: {
-    //     // selectors: {
-    //     //   [`& .${keyNumberValue} span`]: {
-    //     //     color: themeContract.colors.accent,
-    //     //   },
-    //     // },
-    //   },
-    //   success: {
-    //     // selectors: {
-    //     //   [`& .${keyNumberValue} span`]: {
-    //     //     color: themeContract.colors.success,
-    //     //   },
-    //     // },
-    //   },
-    // },
-  },
-
-  defaultVariants: {
-    size: 'md',
-    variant: 'default',
-    align: 'center',
-    // color: 'default',
-  },
-});
-
-export { keyNumberValue, keyNumberLabel };
-export type KeyNumberVariants = RecipeVariants<typeof keyNumberRecipe>;