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

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,5 +1,4 @@
 import { clsx } from 'clsx';
-import { forwardRef } from 'react';
 
 import { footerRecipe } from './styles.css';
 
@@ -8,10 +7,4 @@ export type FooterProps = React.HTMLAttributes<HTMLDivElement> & {
   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, css, className }: FooterProps) => <footer className={clsx(footerRecipe, css, 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/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,5 +1,4 @@
 import { clsx } from 'clsx';
-import { forwardRef } from 'react';
 
 import { headingRecipe, HeadingVariants } from './styles.css';
 import { AllowedHeading } from './types';
@@ -11,12 +10,8 @@ export type HeadingProps = React.HTMLAttributes<HTMLHeadingElement> &
     children: React.ReactNode;
   };
 
-export const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(({ as, size, weight, align, css, className, children }, ref) => {
+export const Heading = ({ as, size, weight, align, css, 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 }), css, 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';

package/src/components/LanguageSwitcher/index.tsx

@@ -1,5 +1,4 @@
 import { clsx } from 'clsx';
-import { forwardRef } from 'react';
 import { languageSwitcherIcon, languageSwitcherRecipe, languageSwitcherSelect, type LanguageSwitcherVariants } from './styles.css';
 
 import { Icon } from '../Icon';
@@ -10,69 +9,44 @@ export interface Locale {
   label?: string;
 }
 
-export interface LanguageSwitcherProps
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'onChange'>,
-    NonNullable<LanguageSwitcherVariants> {
-  css?: string;
-  locales: Locale[];
-  currentLocale: string;
-  onChange: (locale: string) => void;
-  disabled?: boolean;
-  placeholder?: string;
-}
-
-export const LanguageSwitcher = forwardRef<HTMLDivElement, LanguageSwitcherProps>(
-  (
-    {
-      locales,
-      currentLocale,
-      onChange,
-      disabled = false,
-      placeholder,
-      variant,
-      size,
-      css,
-      className,
-
-      ...htmlProps
-    },
-    ref
-  ) => {
-    const handleSelectChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-      onChange(event.target.value);
-    };
+export type LanguageSwitcherProps = React.HTMLAttributes<HTMLDivElement> &
+  LanguageSwitcherVariants & {
+    locales: Locale[];
+    disabled?: boolean;
+    placeholder?: string;
+    currentLocale: string;
+    onChange: (locale: string) => void;
+  };
 
-    return (
-      <div
-        ref={ref}
-        className={clsx(
-          languageSwitcherRecipe({ variant, size }),
+export const LanguageSwitcher = ({
+  size,
+  locales,
+  variant,
+  onChange,
+  className,
+  placeholder,
+  currentLocale,
+  disabled = false,
+}: LanguageSwitcherProps) => {
+  const handleSelectChange = (event: React.ChangeEvent<HTMLSelectElement>) => onChange(event.target.value);
 
-          css,
-          className
+  return (
+    <div className={clsx(languageSwitcherRecipe({ variant, size }), className)}>
+      <select className={languageSwitcherSelect} value={currentLocale} onChange={handleSelectChange} disabled={disabled} aria-label="Switch language">
+        {placeholder && (
+          <option value="" disabled>
+            {placeholder}
+          </option>
         )}
-        {...htmlProps}>
-        <select
-          className={languageSwitcherSelect}
-          value={currentLocale}
-          onChange={handleSelectChange}
-          disabled={disabled}
-          aria-label="Switch language">
-          {placeholder && (
-            <option value="" disabled>
-              {placeholder}
-            </option>
-          )}
-          {locales.map((locale) => (
-            <option key={locale.code} value={locale.code} disabled={locale.code === currentLocale}>
-              {locale.label || locale.name}
-            </option>
-          ))}
-        </select>
-        <div className={languageSwitcherIcon}>
-          <Icon icon="caret" />
-        </div>
+        {locales.map((locale) => (
+          <option key={locale.code} value={locale.code} disabled={locale.code === currentLocale}>
+            {locale.label || locale.name}
+          </option>
+        ))}
+      </select>
+      <div className={languageSwitcherIcon}>
+        <Icon icon="caret" />
       </div>
-    );
-  }
-);
+    </div>
+  );
+};

package/src/components/Logo/export.tsx

@@ -1,4 +1 @@
-// export { Logo } from '.';
-// export type { LogoProps } from '.';
-
-// export { styles as LogoStyles } from './styles.css';
+export { Logo, type LogoProps } from './';

package/src/components/Logo/index.tsx

@@ -1,13 +1,10 @@
 import { clsx } from 'clsx';
 import { ReactNode } from 'react';
 
-import { logoBase } from './styles.css';
+import { logo } from './styles.css';
 
 export type LogoProps = React.HTMLAttributes<HTMLDivElement> & {
-  css?: string;
   children?: ReactNode;
 };
 
-export const Logo = ({ children, css, className }: LogoProps) => {
-  return <div className={clsx(logoBase, css, className)}>{children}</div>;
-};
+export const Logo = ({ children, className }: LogoProps) => <div className={clsx(logo, className)}>{children}</div>;

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

@@ -1,12 +1,12 @@
 import { globalStyle, style } from '@vanilla-extract/css';
 
-export const logoBase = style({
+export const logo = style({
   alignItems: 'center',
   display: 'inline-flex',
   justifyContent: 'center',
 });
 
-globalStyle(`${logoBase} img`, {
+globalStyle(`${logo} img`, {
   width: '100%',
   height: 'auto',
   maxWidth: '100%',

package/src/components/Main/export.tsx

@@ -1,4 +1 @@
-// export { Main } from '.';
-// export type { MainProps } from '.';
-
-// export { styles as MainStyles } from './styles.css';
+export { Main, type MainProps } from './';