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

package/src/components/ConsentCookie/index.tsx

@@ -0,0 +1,104 @@
+import { clsx } from 'clsx';
+import { useEffect, useState } from 'react';
+
+import { getCookie, setCookie } from './cookie';
+import { consentActions, consentContent, type ConsentCookieVariants, consentRecipe } from './styles.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'>, NonNullable<ConsentCookieVariants> {
+  cookieName?: string;
+  cookieExpirationDays?: number;
+  onAccept?: () => void;
+  onReject?: () => void;
+  translations?: {
+    actions: {
+      accept: string;
+      reject: string;
+    };
+  };
+  enableGoogleAnalytics?: boolean;
+}
+
+export const ConsentCookie = ({
+  variant,
+  onAccept,
+  onReject,
+  children,
+  className,
+  translations,
+  cookieName = 'consent',
+  cookieExpirationDays = 365,
+  enableGoogleAnalytics = true,
+}: ConsentCookieProps) => {
+  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 className={clsx(consentRecipe({ variant }), className)} role="dialog" aria-modal="true" aria-labelledby="consent-title">
+      <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/Footer/export.tsx

@@ -1,4 +1 @@
-// export { Footer } from '.';
-// export type { FooterProps } from '.';
-
-// export { styles as FooterStyles } from './styles.css';
+export { Footer, type FooterProps } from './';

package/src/components/Footer/index.tsx

@@ -1,17 +1,9 @@
 import { clsx } from 'clsx';
-import { forwardRef } from 'react';
 
 import { footerRecipe } from './styles.css';
 
 export type FooterProps = React.HTMLAttributes<HTMLDivElement> & {
-  css?: string;
   children: React.ReactNode;
 };
 
-export const Footer = forwardRef<HTMLDivElement, FooterProps>(({ children, css, className }, ref) => {
-  return (
-    <footer ref={ref} className={clsx(footerRecipe, css, className)}>
-      {children}
-    </footer>
-  );
-});
+export const Footer = ({ children, className }: FooterProps) => <footer className={clsx(footerRecipe, className)}>{children}</footer>;

package/src/components/Footer/theme.ts

@@ -0,0 +1,51 @@
+const themeFooterBase = {
+  footer: {
+    fontSize: '0.8em',
+    height: {
+      mobile: '15px',
+      sm: '15px',
+      md: '30px',
+      lg: '30px',
+      xl: '50px',
+      '2xl': '50px',
+    },
+    gap: {
+      mobile: '15px',
+      sm: '15px',
+      md: '30px',
+      lg: '30px',
+      xl: '50px',
+      '2xl': '50px',
+    },
+    paddingTop: {
+      mobile: '15px',
+      sm: '15px',
+      md: '30px',
+      lg: '30px',
+      xl: '50px',
+      '2xl': '50px',
+    },
+    paddingBottom: {
+      mobile: '15px',
+      sm: '15px',
+      md: '30px',
+      lg: '30px',
+      xl: '50px',
+      '2xl': '50px',
+    },
+  },
+};
+
+export const themeFooterLight = {
+  footer: {
+    ...themeFooterBase.footer,
+    backgroundColor: '#FF7377',
+  },
+};
+
+export const themeFooterDark = {
+  footer: {
+    ...themeFooterBase.footer,
+    backgroundColor: '#FF7377',
+  },
+};

package/src/components/Form/Form.tsx

@@ -4,7 +4,6 @@ import { formRecipe, type FormVariants } from './Form.css';
 import { sprinkles, type Sprinkles } from '../../styles/sprinkles.css';
 
 export interface FormProps extends Omit<React.FormHTMLAttributes<HTMLFormElement>, 'color'>, Sprinkles, NonNullable<FormVariants> {
-  css?: string;
   children: React.ReactNode;
 }
 
@@ -14,7 +13,6 @@ export const Form = forwardRef<HTMLFormElement, FormProps>(
       children,
       spacing,
       layout,
-      css,
       className,
       // Extract sprinkles props
       margin,
@@ -114,7 +112,6 @@ export const Form = forwardRef<HTMLFormElement, FormProps>(
             overflowX,
             overflowY,
           }),
-          css,
           className
         )}
         {...htmlProps}>

package/src/components/Form/Row/Row.tsx

@@ -4,7 +4,6 @@ import { rowRecipe, type RowVariants } from './Row.css';
 import { sprinkles, type Sprinkles } from '../../../styles/sprinkles.css';
 
 export interface RowProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, Sprinkles, NonNullable<RowVariants> {
-  css?: string;
   children: React.ReactNode;
   isActions?: boolean;
   isMessage?: boolean;
@@ -19,7 +18,6 @@ export const Row = forwardRef<HTMLDivElement, RowProps>(
       spacing,
       isActions = false,
       isMessage = false,
-      css,
       className,
       // Extract sprinkles props
       margin,
@@ -124,7 +122,6 @@ export const Row = forwardRef<HTMLDivElement, RowProps>(
             overflowX,
             overflowY,
           }),
-          css,
           className
         )}
         {...htmlProps}>

package/src/components/Form/TextField/Input/Input.tsx

@@ -9,7 +9,6 @@ export interface InputProps
   extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'color' | 'size' | 'height' | 'width'>,
     Sprinkles,
     NonNullable<InputVariants> {
-  css?: string;
   name: string;
   type?: InputType;
   hasError?: boolean;
@@ -23,7 +22,6 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
       hasError = false,
       size,
       variant,
-      css,
       className,
       // Extract sprinkles props
       margin,
@@ -126,7 +124,6 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
             overflowX,
             overflowY,
           }),
-          css,
           className
         )}
         data-error={hasError}

package/src/components/Form/TextField/Label/Label.tsx

@@ -4,7 +4,6 @@ import { labelRecipe, type LabelVariants } from './Label.css';
 import { sprinkles, type Sprinkles } from '../../../../styles/sprinkles.css';
 
 export interface LabelProps extends Omit<React.LabelHTMLAttributes<HTMLLabelElement>, 'color'>, Sprinkles, NonNullable<LabelVariants> {
-  css?: string;
   label: string;
   name: string;
   required?: boolean;
@@ -18,7 +17,6 @@ export const Label = forwardRef<HTMLLabelElement, LabelProps>(
       required = false,
       size,
       variant,
-      css,
       className,
       // Extract sprinkles props
       margin,
@@ -119,7 +117,6 @@ export const Label = forwardRef<HTMLLabelElement, LabelProps>(
             overflowX,
             overflowY,
           }),
-          css,
           className
         )}
         data-required={required}

package/src/components/Form/TextField/TextField.tsx

@@ -6,7 +6,6 @@ import { sprinkles, type Sprinkles } from '../../../styles/sprinkles.css';
 export type InputType = 'text' | 'email' | 'search' | 'number' | 'hidden' | 'password' | 'textarea';
 
 export interface TextFieldProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'onChange'>, Sprinkles, NonNullable<TextFieldVariants> {
-  css?: string;
   name: string;
   label?: string;
   value?: string;
@@ -33,7 +32,6 @@ export const TextField = forwardRef<HTMLDivElement, TextFieldProps>(
       type = 'text',
       onChange,
       size,
-      css,
       className,
       // Extract sprinkles props
       margin,
@@ -141,7 +139,6 @@ export const TextField = forwardRef<HTMLDivElement, TextFieldProps>(
             overflowX,
             overflowY,
           }),
-          css,
           className
         )}
         {...htmlProps}>

package/src/components/Form/TextField/Textarea/Textarea.tsx

@@ -7,7 +7,6 @@ export interface TextareaProps
   extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'color' | 'size'>,
     Sprinkles,
     NonNullable<TextareaVariants> {
-  css?: string;
   name: string;
   hasError?: boolean;
 }
@@ -20,7 +19,6 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
       size,
       variant,
       resize,
-      css,
       className,
       // Extract sprinkles props
       margin,
@@ -122,7 +120,6 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
             overflowX,
             overflowY,
           }),
-          css,
           className
         )}
         data-error={hasError}

package/src/components/Form/export.tsx

@@ -1,4 +1,18 @@
-// export { Form } from '.';
-// export type { FormProps } from '.';
+export { Form, type FormProps } from './Form';
+export { type FormVariants } from './Form.css';
 
-// export { styles as FormStyles } from './styles.css';
+export { Row, type RowProps } from '../Form/Row/Row';
+export { type RowVariants } from '../Form/Row/Row.css';
+
+export { TextField, type TextFieldProps, type InputType } from '../Form/TextField/TextField';
+export { type TextFieldVariants } from '../Form/TextField/TextField.css';
+
+// Form TextField Subcomponents
+export { Label, type LabelProps } from '../Form/TextField/Label/Label';
+export { type LabelVariants } from '../Form/TextField/Label/Label.css';
+
+export { Input, type InputProps, type InputType as InputFieldType } from '../Form/TextField/Input/Input';
+export { type InputVariants } from '../Form/TextField/Input/Input.css';
+
+export { Textarea, type TextareaProps } from '../Form/TextField/Textarea/Textarea';
+export { type TextareaVariants } from '../Form/TextField/Textarea/Textarea.css';

package/src/components/Header/export.tsx

@@ -1,4 +1 @@
-// export { Header } from '.';
-// export type { HeaderProps } from '.';
-
-// export { styles as HeaderStyles } from './styles.css';
+export { Header, type HeaderProps } from './';

package/src/components/Header/index.tsx

@@ -1,10 +1,9 @@
 import { clsx } from 'clsx';
-import { forwardRef, useState } from 'react';
+import { useState } from 'react';
 
 import { headerOverlayRecipe, headerPlaceholder, headerRecipe, headerToggleNav } from './styles.css';
 
 export type HeaderProps = React.HTMLAttributes<HTMLDivElement> & {
-  css?: string;
   isFixed?: boolean;
   hideToggleNav?: boolean;
   children: React.ReactNode;
@@ -12,40 +11,25 @@ export type HeaderProps = React.HTMLAttributes<HTMLDivElement> & {
   childrenToggleNav?: React.ReactNode;
 };
 
-export const Header = forwardRef<HTMLDivElement, HeaderProps>(
-  (
-    {
-      children,
-      childrenOverlay,
-      childrenToggleNav,
-      isFixed = false,
-      hideToggleNav = false,
+export const Header = ({ children, childrenOverlay, childrenToggleNav, isFixed = false, hideToggleNav = false, className }: HeaderProps) => {
+  const [isNavOpen, setNavOpen] = useState(false);
+  const onToggleNav = () => setNavOpen(!isNavOpen);
 
-      css,
-      className,
-    },
-    ref
-  ) => {
-    const [isNavOpen, setNavOpen] = useState(false);
+  return (
+    <>
+      <header className={clsx(headerRecipe({ isFixed }), className)}>
+        {childrenOverlay && <div className={headerOverlayRecipe({ isOpen: isNavOpen })}>{childrenOverlay}</div>}
 
-    const onToggleNav = () => setNavOpen(!isNavOpen);
+        {children}
 
-    return (
-      <>
-        <header ref={ref} className={clsx(headerRecipe({ isFixed }), css, className)}>
-          {childrenOverlay && <div className={headerOverlayRecipe({ isOpen: isNavOpen })}>{childrenOverlay}</div>}
+        {!hideToggleNav && (
+          <button onClick={onToggleNav} aria-label="Toggle navigation" className={headerToggleNav}>
+            {childrenToggleNav}
+          </button>
+        )}
+      </header>
 
-          {children}
-
-          {!hideToggleNav && (
-            <button onClick={onToggleNav} aria-label="Toggle navigation" className={headerToggleNav}>
-              {childrenToggleNav}
-            </button>
-          )}
-        </header>
-
-        {isFixed && <div className={headerPlaceholder} />}
-      </>
-    );
-  }
-);
+      {isFixed && <div className={headerPlaceholder} />}
+    </>
+  );
+};

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

@@ -61,11 +61,11 @@ export const headerToggleNav = style([
 
 export const headerOverlayRecipe = recipe({
   base: {
-    position: 'fixed',
     inset: 0,
+    zIndex: 25,
+    position: 'fixed',
     backgroundColor: 'rgba(0,0,0,0.6)',
     transition: 'opacity 0.3s ease-in-out, visibility 0.3s ease-in-out',
-    zIndex: 25,
   },
 
   variants: {

package/src/components/Header/theme.ts

@@ -0,0 +1,51 @@
+const themeHeaderBase = {
+  header: {
+    fontSize: '1.2em',
+    height: {
+      mobile: '15px',
+      sm: '15px',
+      md: '30px',
+      lg: '30px',
+      xl: '50px',
+      '2xl': '50px',
+    },
+    gap: {
+      mobile: '15px',
+      sm: '15px',
+      md: '30px',
+      lg: '30px',
+      xl: '50px',
+      '2xl': '50px',
+    },
+    paddingTop: {
+      mobile: '15px',
+      sm: '15px',
+      md: '30px',
+      lg: '30px',
+      xl: '50px',
+      '2xl': '50px',
+    },
+    paddingBottom: {
+      mobile: '15px',
+      sm: '15px',
+      md: '30px',
+      lg: '30px',
+      xl: '50px',
+      '2xl': '50px',
+    },
+  },
+};
+
+export const themeHeaderLight = {
+  header: {
+    ...themeHeaderBase.header,
+    backgroundColor: '#FF7377',
+  },
+};
+
+export const themeHeaderDark = {
+  header: {
+    ...themeHeaderBase.header,
+    backgroundColor: '#FF7377',
+  },
+};

package/src/components/Heading/export.tsx

@@ -0,0 +1 @@
+export { Heading, type HeadingProps } from './';

package/src/components/Heading/index.tsx

@@ -1,22 +1,16 @@
 import { clsx } from 'clsx';
-import { forwardRef } from 'react';
 
 import { headingRecipe, HeadingVariants } from './styles.css';
 import { AllowedHeading } from './types';
 
 export type HeadingProps = React.HTMLAttributes<HTMLHeadingElement> &
   HeadingVariants & {
-    css?: string;
     as: AllowedHeading;
     children: React.ReactNode;
   };
 
-export const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(({ as, size, weight, align, css, className, children }, ref) => {
+export const Heading = ({ as, size, weight, align, className, children }: HeadingProps) => {
   const Component = as as AllowedHeading;
 
-  return (
-    <Component ref={ref} className={clsx(headingRecipe({ size, weight, align }), css, className)}>
-      {children}
-    </Component>
-  );
-});
+  return <Component className={clsx(headingRecipe({ size, weight, align }), className)}>{children}</Component>;
+};

package/src/components/Icon/export.tsx

@@ -1,4 +1 @@
-// export { Icon } from '.';
-// export type { IconProps } from '.';
-
-// export { styles as IconStyles } from './styles.css';
+export { Icon, type IconProps } from './';

package/src/components/Icon/index.tsx

@@ -1,24 +1,23 @@
-import { CSSProperties } from 'react';
+import clsx from 'clsx';
 
 import path from './path';
 
 import { iconRecipe } from './style.css';
 import { themeContract } from '../../theme/contract.css';
 
-export type IconProps = {
+export type IconProps = React.HTMLAttributes<HTMLDivElement> & {
   icon?: string;
   size?: number;
   color?: string;
   viewBox?: string;
   iconPath?: string;
-  styles?: CSSProperties;
 };
 
-export const Icon = ({ icon = '', size = 24, styles = {}, iconPath = '', color = themeContract.icon.color, viewBox = '0 0 24 24' }: IconProps) => {
+export const Icon = ({ icon = '', className, size = 24, iconPath = '', viewBox = '0 0 24 24', color = themeContract.icon.color }: IconProps) => {
   const d = iconPath || path[icon as keyof typeof path];
 
   return (
-    <svg className={iconRecipe} viewBox={viewBox} width={`${size}px`} height={`${size}px`} style={styles}>
+    <svg className={clsx(iconRecipe, className)} viewBox={viewBox} width={`${size}px`} height={`${size}px`}>
       <path className={iconPath} d={d} fill={color} />
     </svg>
   );

package/src/components/Icon/theme.ts

@@ -0,0 +1,17 @@
+const themeIconBase = {
+  icon: {},
+};
+
+export const themeIconLight = {
+  icon: {
+    ...themeIconBase.icon,
+    color: '#FF7377',
+  },
+};
+
+export const themeIconDark = {
+  icon: {
+    ...themeIconBase.icon,
+    color: '#FF7377',
+  },
+};

package/src/components/KeyNumber/export.tsx

@@ -1,4 +1,2 @@
-// export { KeyNumber } from '.';
-// export type { KeyNumberProps } from '.';
-
-// export { styles as KeyNumberStyles } from './styles.css';
+export { KeyNumber, type KeyNumberProps } from './';
+export { type KeyNumberVariants } from './styles.css';

package/src/components/KeyNumber/index.tsx

@@ -3,6 +3,7 @@
 import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import CountUp from 'react-countup';
+
 import { useInView } from 'react-intersection-observer';
 
 import { keyNumberRecipe, keyNumberValueRecipe, KeyNumberValueVariants, type KeyNumberVariants } from './styles.css';
@@ -10,7 +11,6 @@ import { keyNumberRecipe, keyNumberValueRecipe, KeyNumberValueVariants, type Key
 export type KeyNumberProps = React.HTMLAttributes<HTMLDivElement> &
   KeyNumberVariants &
   KeyNumberValueVariants & {
-    css?: string;
     value: number;
     suffix?: string;
     prefix?: string;
@@ -21,7 +21,7 @@ export type KeyNumberProps = React.HTMLAttributes<HTMLDivElement> &
   };
 
 export const KeyNumber = forwardRef<HTMLDivElement, KeyNumberProps>(
-  ({ value, suffix = '', prefix = '', duration = 2, threshold = 0.3, separator = ',', decimals = 0, size, align, vAlign, css, className }, ref) => {
+  ({ value, suffix = '', prefix = '', duration = 2, threshold = 0.3, separator = ',', decimals = 0, size, align, vAlign, className }, ref) => {
     const [inViewRef, inView] = useInView({
       threshold,
       triggerOnce: true,
@@ -39,7 +39,7 @@ export const KeyNumber = forwardRef<HTMLDivElement, KeyNumberProps>(
             }
           }
         }}
-        className={clsx(keyNumberRecipe({ align, vAlign }), css, className)}>
+        className={clsx(keyNumberRecipe({ align, vAlign }), className)}>
         {prefix}&nbsp;
         <CountUp end={inView ? value : 0} duration={duration} separator={separator} decimals={decimals} className={keyNumberValueRecipe({ size })} />
         &nbsp;{suffix}

package/src/components/KeyNumber/theme.ts

@@ -0,0 +1,22 @@
+const themeKeyNumberBase = {
+  keyNumber: {
+    fontSize: {
+      large: '2.5em',
+      xlarge: '4em',
+    },
+    paddingTop: { mobile: '15px', sm: '15px', md: '30px', lg: '30px', xl: '50px', '2xl': '50px' },
+    paddingBottom: { mobile: '15px', sm: '15px', md: '30px', lg: '30px', xl: '50px', '2xl': '50px' },
+  },
+};
+
+export const themeKeyNumberLight = {
+  keyNumber: {
+    ...themeKeyNumberBase.keyNumber,
+  },
+};
+
+export const themeKeyNumberDark = {
+  keyNumber: {
+    ...themeKeyNumberBase.keyNumber,
+  },
+};

package/src/components/LanguageSwitcher/export.tsx

@@ -1,4 +1,2 @@
-// export { LanguageSwitcher } from '.';
-// export type { LanguageSwitcherProps } from '.';
-
-// export { styles as LanguageSwitcherStyles } from './styles.css';
+export { LanguageSwitcher, type LanguageSwitcherProps, type Locale } from './';
+export { type LanguageSwitcherVariants } from './styles.css';