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

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 './';

package/src/components/Main/index.tsx

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

package/src/components/Main/theme.ts

@@ -0,0 +1,19 @@
+const themeMainBase = {
+  main: {
+    minHeight: '45vh',
+  },
+};
+
+export const themeMainLight = {
+  main: {
+    ...themeMainBase.main,
+    backgroundColor: '#FCEFE6',
+  },
+};
+
+export const themeMainDark = {
+  main: {
+    ...themeMainBase.main,
+    backgroundColor: '#FCEFE6',
+  },
+};

package/src/components/Modal/export.tsx

@@ -1,4 +1,2 @@
-// export { Modal } from '.';
-// export type { ModalProps } from '.';
-
-// export { styles as ModalStyles } from './styles.css';
+export { Modal, type ModalProps } from './';
+export { type ModalVariants } from './styles.css';

package/src/components/Modal/index.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { clsx } from 'clsx';
-import { forwardRef, useState } from 'react';
+import { useState } from 'react';
 
 import { modal, modalContentCloseButton, modalContentRecipe, type ModalVariants } from './styles.css';
 
@@ -11,12 +11,11 @@ import { Icon } from '../Icon';
 
 export type ModalProps = React.HTMLAttributes<HTMLDivElement> &
   ModalVariants & {
-    css?: string;
     triggerLabel: string;
     children: React.ReactNode;
   };
 
-export const Modal = forwardRef<HTMLDivElement, ModalProps>(({ triggerLabel, css, className, children, align }, ref) => {
+export const Modal = ({ triggerLabel, className, children, align }: ModalProps) => {
   const [isOpen, setIsOpen] = useState(false);
 
   return (
@@ -27,7 +26,7 @@ export const Modal = forwardRef<HTMLDivElement, ModalProps>(({ triggerLabel, css
 
       {isOpen && (
         <div className={modal} role="dialog" aria-modal="true">
-          <div ref={ref} className={clsx(modalContentRecipe({ align }), css, className)}>
+          <div className={clsx(modalContentRecipe({ align }), className)}>
             <button type="button" className={modalContentCloseButton} onClick={() => setIsOpen(false)}>
               <Icon icon="close" />
             </button>
@@ -37,4 +36,4 @@ export const Modal = forwardRef<HTMLDivElement, ModalProps>(({ triggerLabel, css
       )}
     </>
   );
-});
+};

package/src/components/Modal/theme.ts

@@ -0,0 +1,31 @@
+const themeModalBase = {
+  modal: {
+    border: 'none',
+    overlayBlur: '0',
+    borderRadius: '30px',
+
+    closeButtonRightPosition: { mobile: '15px', sm: '15px', md: '30px', lg: '30px', xl: '50px', '2xl': '50px' },
+    closeButtonTopPosition: { 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' },
+    width: { mobile: '100%', sm: '200px', md: '600px', lg: '600px', xl: '800px', '2xl': '800px' },
+    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 themeModalLight = {
+  modal: {
+    ...themeModalBase.modal,
+    backgroundColor: '#000000',
+    overlayBackgroundColor: '#000000',
+  },
+};
+
+export const themeModalDark = {
+  modal: {
+    ...themeModalBase.modal,
+    backgroundColor: '#000000',
+    overlayBackgroundColor: '#000000',
+  },
+};

package/src/components/Nav/export.tsx

@@ -1,4 +1 @@
-// export { Nav } from '.';
-// export type { NavProps } from '.';
-
-// export { styles as NavStyles } from './styles.css';
+export { Nav, type NavProps } from './';

package/src/components/Nav/index.tsx

@@ -1,20 +1,12 @@
 'use client';
 
 import { clsx } from 'clsx';
-import { forwardRef } from 'react';
 
-import { navRecipe } from './styles.css';
+import { navRecipe, NavVariants } from './styles.css';
 
-export type NavProps = React.HTMLAttributes<HTMLDivElement> & {
-  css?: string;
-  direction?: 'column' | 'row';
-  children: React.ReactNode;
-};
+export type NavProps = React.HTMLAttributes<HTMLDivElement> &
+  NavVariants & {
+    children: React.ReactNode;
+  };
 
-export const Nav = forwardRef<HTMLDivElement, NavProps>(({ children, css, className, direction = 'column' }, ref) => {
-  return (
-    <div ref={ref} className={clsx(navRecipe({ direction }), css, className)}>
-      {children}
-    </div>
-  );
-});
+export const Nav = ({ children, className, direction }: NavProps) => <div className={clsx(navRecipe({ direction }), className)}>{children}</div>;

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

@@ -1,4 +1,4 @@
-import { recipe } from '@vanilla-extract/recipes';
+import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 
 import { themeContract } from '../../theme/contract.css';
 import { generateResponsiveMedia } from '../../utils/generateResponsiveMedia';
@@ -28,3 +28,5 @@ export const navRecipe = recipe({
     direction: 'column',
   },
 });
+
+export type NavVariants = RecipeVariants<typeof navRecipe>;

package/src/components/Nav/theme.ts

@@ -0,0 +1,24 @@
+const themeNavBase = {
+  nav: {
+    gap: {
+      mobile: '5px',
+      sm: '5px',
+      md: '10px',
+      lg: '10px',
+      xl: '15px',
+      '2xl': '15px',
+    },
+  },
+};
+
+export const themeNavLight = {
+  nav: {
+    ...themeNavBase.nav,
+  },
+};
+
+export const themeNavDark = {
+  nav: {
+    ...themeNavBase.nav,
+  },
+};

package/src/components/NavLegal/export.tsx

@@ -1,4 +1 @@
-// export { NavLegal } from '.';
-// export type { NavLegalProps } from '.';
-
-// export { styles as NavLegalStyles } from './styles.css';
+export { NavLegal, type NavLegalProps } from './';

package/src/components/NavLegal/index.tsx

@@ -1,15 +1,9 @@
 import { clsx } from 'clsx';
-import { forwardRef } from 'react';
 
 import { navLegalRecipe } from './styles.css';
 
 export type NavLegalProps = React.HTMLAttributes<HTMLDivElement> & {
-  css?: string;
   children: React.ReactNode;
 };
 
-export const NavLegal = forwardRef<HTMLDivElement, NavLegalProps>(({ css, className, children }, ref) => (
-  <div ref={ref} className={clsx(navLegalRecipe(), css, className)}>
-    {children}
-  </div>
-));
+export const NavLegal = ({ className, children }: NavLegalProps) => <div className={clsx(navLegalRecipe(), className)}>{children}</div>;

package/src/components/NavLegal/theme.ts

@@ -0,0 +1,24 @@
+const themeNavLegalBase = {
+  navLegal: {
+    gap: {
+      mobile: '5px',
+      sm: '5px',
+      md: '10px',
+      lg: '10px',
+      xl: '15px',
+      '2xl': '15px',
+    },
+  },
+};
+
+export const themeNavLegalLight = {
+  navLegal: {
+    ...themeNavLegalBase.navLegal,
+  },
+};
+
+export const themeNavLegalDark = {
+  navLegal: {
+    ...themeNavLegalBase.navLegal,
+  },
+};

package/src/components/NavSocial/export.tsx

@@ -1,5 +1,2 @@
-// export { NavSocial } from '.';
-// export type { NavSocialProps } from '.';
-
-// export type { Social as SocialType } from './types';
-// export { styles as NavSocialStyles } from './styles.css';
+export { NavSocial, type NavSocialProps } from './';
+export { type Social } from './types';

package/src/components/NavSocial/index.tsx

@@ -1,5 +1,4 @@
 import { clsx } from 'clsx';
-import { forwardRef } from 'react';
 
 import { navSocialLink, navSocialRecipe } from './styles.css';
 import { Social } from './types';
@@ -8,23 +7,20 @@ import icons from '../Icon/path';
 
 export type NavSocialProps = React.HTMLAttributes<HTMLDivElement> & {
   navSocial: { name: Social; link: string }[];
-  css?: string;
 };
 
-export const NavSocial = forwardRef<HTMLDivElement, NavSocialProps>(({ navSocial, css, className }, ref) => {
-  return (
-    <div ref={ref} className={clsx(navSocialRecipe(), css, className)}>
-      {navSocial?.map(({ name, link }, index) => {
-        const capitalized = name[0].toUpperCase() + name.slice(1);
+export const NavSocial = ({ navSocial, className }: NavSocialProps) => (
+  <div className={clsx(navSocialRecipe(), className)}>
+    {navSocial?.map(({ name, link }, index) => {
+      const capitalized = name[0].toUpperCase() + name.slice(1);
 
-        return (
-          <div key={`navSocialItem-${index}`} className={navSocialLink}>
-            <a target="_blank" rel="noopener noreferrer" aria-label={name} href={link}>
-              <Icon icon={`social${capitalized}` as keyof typeof icons} />
-            </a>
-          </div>
-        );
-      })}
-    </div>
-  );
-});
+      return (
+        <div key={`navSocialItem-${index}`} className={navSocialLink}>
+          <a target="_blank" rel="noopener noreferrer" aria-label={name} href={link}>
+            <Icon icon={`social${capitalized}` as keyof typeof icons} />
+          </a>
+        </div>
+      );
+    })}
+  </div>
+);

package/src/components/NavSocial/theme.ts

@@ -0,0 +1,34 @@
+const themeNavSocialBase = {
+  navSocial: {
+    transition: 'all 0.5s ease-in-out',
+
+    gap: {
+      mobile: '5px',
+      sm: '5px',
+      md: '10px',
+      lg: '10px',
+      xl: '15px',
+      '2xl': '15px',
+    },
+  },
+};
+
+export const themeNavSocialLight = {
+  navSocial: {
+    ...themeNavSocialBase.navSocial,
+    colors: {
+      defaultIcon: '#FF7377',
+      defaultIconHover: '#000000',
+    },
+  },
+};
+
+export const themeNavSocialDark = {
+  navSocial: {
+    ...themeNavSocialBase.navSocial,
+    colors: {
+      defaultIcon: '#FF7377',
+      defaultIconHover: '#000000',
+    },
+  },
+};

package/src/components/Section/export.tsx

@@ -1,6 +1,2 @@
-// export { Section } from '.';
-// export type { SectionProps } from '.';
-// export { Align as SectionAlign } from './types';
-
-// export * as allStyles from './styles.css';
-// export { styles as SectionStyles } from './styles.css';
+export { Section, type SectionProps } from './';
+export { type SectionVariants } from './styles.css';

package/src/components/Section/index.tsx

@@ -1,18 +1,14 @@
 import { clsx } from 'clsx';
-import { forwardRef } from 'react';
 
 import { sectionContent, sectionRecipe, type SectionVariants } from './styles.css';
 
 export type SectionProps = React.HTMLAttributes<HTMLDivElement> &
   SectionVariants & {
-    css?: string;
     children: React.ReactNode;
   };
 
-export const Section = forwardRef<HTMLElement, SectionProps>(
-  ({ align, isDark, isFullHeight, withPaddingTop, withPaddingBottom, css, className, children }, ref) => (
-    <section ref={ref} className={clsx(sectionRecipe({ align, isDark, isFullHeight, withPaddingTop, withPaddingBottom }), css, className)}>
-      <div className={sectionContent}>{children}</div>
-    </section>
-  )
+export const Section = ({ align, isDark, isFullHeight, withPaddingTop, withPaddingBottom, className, children }: SectionProps) => (
+  <section className={clsx(sectionRecipe({ align, isDark, isFullHeight, withPaddingTop, withPaddingBottom }), className)}>
+    <div className={sectionContent}>{children}</div>
+  </section>
 );

package/src/components/Section/theme.ts

@@ -0,0 +1,40 @@
+const themeSectionBase = {
+  section: {
+    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 themeSectionLight = {
+  section: {
+    ...themeSectionBase.section,
+  },
+};
+
+export const themeSectionDark = {
+  section: {
+    ...themeSectionBase.section,
+  },
+};

package/src/components/Video/export.tsx

@@ -1,2 +1,2 @@
-// export { Video } from '.';
-// export type { VideoProps } from '.';
+export { Video, type VideoProps } from './';
+export { type VideoVariants } from './styles.css';