@latte-macchiat-io/latte-vanilla-components 0.0.202 → 0.0.203

package/src/theme/contract.css.ts

@@ -219,22 +219,6 @@ export const themeContract = createGlobalThemeContract({
       xl: 'latte-columns-gap-xl',
       '2xl': 'latte-columns-gap-2xl',
     },
-    flex: {
-      mobile: 'latte-columns-flex-mobile',
-      sm: 'latte-columns-flex-sm',
-      md: 'latte-columns-flex-md',
-      lg: 'latte-columns-flex-lg',
-      xl: 'latte-columns-flex-xl',
-      '2xl': 'latte-columns-flex-2xl',
-    },
-    maxWidth: {
-      mobile: 'latte-columns-maxWidth-mobile',
-      sm: 'latte-columns-maxWidth-sm',
-      md: 'latte-columns-maxWidth-md',
-      lg: 'latte-columns-maxWidth-lg',
-      xl: 'latte-columns-maxWidth-xl',
-      '2xl': 'latte-columns-maxWidth-2xl',
-    },
   },
 
   actions: {

package/src/utils/useWindowSize.ts

@@ -0,0 +1,29 @@
+import { useEffect, useState } from 'react';
+
+interface UseWindowSizeReturn {
+  width: number | undefined;
+  height: number | undefined;
+}
+
+export const useWindowSize = (): UseWindowSizeReturn => {
+  const [windowSize, setWindowSize] = useState<UseWindowSizeReturn>({
+    width: undefined,
+    height: undefined,
+  });
+
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+    };
+
+    window.addEventListener('resize', handleResize);
+    handleResize();
+
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  return windowSize;
+};

package/src/components/ConsentCookie/ConsentCookie.tsx

@@ -1,200 +0,0 @@
-import { clsx } from 'clsx';
-import { forwardRef, useEffect, useState } from 'react';
-import { consentActions, consentContent, type ConsentCookieVariants, consentRecipe } from './ConsentCookie.css';
-import { getCookie, setCookie } from './cookie';
-import { sprinkles, type Sprinkles } from '../../styles/sprinkles.css';
-import { Button } from '../Button/';
-
-// Declare window object including gtag to avoid TypeScript errors
-declare const window: Window &
-  typeof globalThis & {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    gtag: any;
-  };
-
-export interface ConsentCookieProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, Sprinkles, NonNullable<ConsentCookieVariants> {
-  css?: string;
-  cookieName?: string;
-  cookieExpirationDays?: number;
-  onAccept?: () => void;
-  onReject?: () => void;
-  translations?: {
-    actions: {
-      accept: string;
-      reject: string;
-    };
-  };
-  enableGoogleAnalytics?: boolean;
-}
-
-export const ConsentCookie = forwardRef<HTMLDivElement, ConsentCookieProps>(
-  (
-    {
-      children,
-      variant,
-      cookieName = 'consent',
-      cookieExpirationDays = 365,
-      onAccept,
-      onReject,
-      translations,
-      enableGoogleAnalytics = true,
-      css,
-      className,
-      // Extract sprinkles props
-      margin,
-      marginTop,
-      marginBottom,
-      marginLeft,
-      marginRight,
-      padding,
-      paddingTop,
-      paddingBottom,
-      paddingLeft,
-      paddingRight,
-      gap,
-      display,
-      flexDirection,
-      justifyContent,
-      flexWrap,
-      flex,
-      width,
-      height,
-      minWidth,
-      maxWidth,
-      minHeight,
-      zIndex,
-      fontSize,
-      fontFamily,
-      lineHeight,
-      textAlign,
-      fontWeight,
-      color,
-      backgroundColor,
-      borderRadius,
-      borderWidth,
-      borderStyle,
-      borderColor,
-      boxShadow,
-      opacity,
-      overflow,
-      overflowX,
-      overflowY,
-      ...htmlProps
-    },
-    ref
-  ) => {
-    const [showConsent, setShowConsent] = useState(false);
-
-    const handleAccept = () => {
-      setShowConsent(false);
-      setCookie(cookieName, 'true', cookieExpirationDays);
-
-      if (enableGoogleAnalytics && typeof window !== 'undefined' && typeof window.gtag !== 'undefined') {
-        window.gtag('consent', 'update', {
-          analytics_storage: 'granted',
-        });
-      }
-
-      onAccept?.();
-    };
-
-    const handleReject = () => {
-      setShowConsent(false);
-      setCookie(cookieName, 'false', cookieExpirationDays);
-
-      if (enableGoogleAnalytics && typeof window !== 'undefined' && typeof window.gtag !== 'undefined') {
-        window.gtag('consent', 'update', {
-          analytics_storage: 'denied',
-        });
-      }
-
-      onReject?.();
-    };
-
-    useEffect(() => {
-      const consentValue = getCookie(cookieName);
-      const shouldShowConsent = consentValue !== 'true' && consentValue !== 'false';
-      const areCookiesAccepted = consentValue === 'true';
-
-      if (shouldShowConsent) {
-        setShowConsent(true);
-      }
-
-      // Set initial Google Analytics consent
-      if (enableGoogleAnalytics && typeof window !== 'undefined' && typeof window.gtag !== 'undefined') {
-        const gAnalyticsConsent = areCookiesAccepted ? 'granted' : 'denied';
-        window.gtag('consent', 'update', {
-          analytics_storage: gAnalyticsConsent,
-        });
-      }
-    }, [cookieName, enableGoogleAnalytics]);
-
-    if (!showConsent) return null;
-
-    return (
-      <div
-        ref={ref}
-        className={clsx(
-          consentRecipe({ variant }),
-          sprinkles({
-            margin,
-            marginTop,
-            marginBottom,
-            marginLeft,
-            marginRight,
-            padding,
-            paddingTop,
-            paddingBottom,
-            paddingLeft,
-            paddingRight,
-            gap,
-            display,
-            flexDirection,
-            justifyContent,
-            flexWrap,
-            flex,
-            width,
-            height,
-            minWidth,
-            maxWidth,
-            minHeight,
-            zIndex,
-            fontSize,
-            fontFamily,
-            lineHeight,
-            textAlign,
-            fontWeight,
-            color,
-            backgroundColor,
-            borderRadius,
-            borderWidth,
-            borderStyle,
-            borderColor,
-            boxShadow,
-            opacity,
-            overflow,
-            overflowX,
-            overflowY,
-          }),
-          css,
-          className
-        )}
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby="consent-title"
-        {...htmlProps}>
-        <div className={consentContent}>
-          {children}
-          <div className={consentActions}>
-            <Button size="sm" onClick={handleReject}>
-              {translations?.actions.reject || 'Reject'}
-            </Button>
-            <Button variant="primary" size="sm" onClick={handleAccept}>
-              {translations?.actions.accept || 'Accept'}
-            </Button>
-          </div>
-        </div>
-      </div>
-    );
-  }
-);

package/src/components/Header/HeaderOverlay/index.tsx

@@ -1,32 +0,0 @@
-import { assignInlineVars } from '@vanilla-extract/dynamic';
-import { useEffect } from 'react';
-
-import { headerOverlayStyle, vars } from './styles.css';
-
-export interface HeaderOverlayProps {
-  css?: string;
-  isOpen: boolean;
-  children: React.ReactNode;
-}
-
-const HeaderOverlay = ({ isOpen = false, children, css }: HeaderOverlayProps) => {
-  useEffect(() => {
-    const html = document.getElementsByTagName('html')[0];
-    html.style.overflow = '';
-
-    if (isOpen) html.style.overflow = 'hidden';
-  }, [isOpen]);
-
-  return (
-    <div
-      className={`${headerOverlayStyle} ${css}`}
-      style={assignInlineVars({
-        [vars.overlayBottom]: !isOpen ? '100%' : '-100vh',
-        [vars.overlayTransform]: isOpen ? 'translate(0, 0)' : 'translate(0, -100%)',
-      })}>
-      {children}
-    </div>
-  );
-};
-
-export default HeaderOverlay;

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

@@ -1,33 +0,0 @@
-import { createVar, style } from '@vanilla-extract/css';
-
-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)',
-
-  // TODO responsive with sprinkles
-  // '@media': {
-  //   [mq[0]]: { gap: 'var(--overlayGap0, 20px)' },
-  //   [mq[1]]: { gap: 'var(--overlayGap1, 30px)' },
-  //   [mq[2]]: { gap: 'var(--overlayGap2, 40px)' },
-  // },
-});

package/src/components/Header/ToggleNav/index.tsx

@@ -1,29 +0,0 @@
-import { assignInlineVars } from '@vanilla-extract/dynamic';
-import { toggleNavBarStyle, toggleNavStyle, vars } from './styles.css';
-
-export type ToggleNavProps = {
-  css?: string;
-  isNavOpen: boolean;
-  onToggleNav: () => void;
-  displayOnDesktop: boolean;
-};
-
-export const ToggleNav = ({ isNavOpen = false, onToggleNav, displayOnDesktop, css }: ToggleNavProps) => {
-  const handleClick = () => {
-    window.scrollTo({ top: 0, behavior: 'smooth' });
-    onToggleNav();
-  };
-
-  return (
-    <button
-      className={`${toggleNavStyle} ${css}`}
-      style={assignInlineVars({
-        [vars.displayOnDesktop]: displayOnDesktop ? 'block' : 'none',
-      })}
-      onClick={handleClick}
-      aria-label="Toggle nav">
-      <span className={toggleNavBarStyle} data-open={isNavOpen ? 'true' : 'false'} />
-      <span className={toggleNavBarStyle} data-open={isNavOpen ? 'true' : 'false'} />
-    </button>
-  );
-};

package/src/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/src/components/ThemeTest/ThemeTest.css.ts

@@ -1,11 +0,0 @@
-import { style } from '@vanilla-extract/css';
-import { themeContract } from '../../theme/contract.css';
-
-export const testStyle = style({
-  padding: themeContract.space.lg,
-  backgroundColor: themeContract.colors.primary,
-  color: themeContract.colors.text,
-  borderRadius: themeContract.radii.md,
-  margin: themeContract.space.md,
-  border: `2px solid ${themeContract.colors.border}`,
-});

package/src/components/ThemeTest/ThemeTest.tsx

@@ -1,12 +0,0 @@
-import { testStyle } from './ThemeTest.css';
-
-export function ThemeTest() {
-  return (
-    <div className={testStyle}>
-      <h3>Theme Test Component</h3>
-      <p>Background should be primary color</p>
-      <p>Text should be theme text color</p>
-      <p>This should change when you toggle the theme!</p>
-    </div>
-  );
-}