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

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

package/src/components/Video/index.tsx

@@ -1,7 +1,8 @@
 'use client';
 
 import { clsx } from 'clsx';
-import { forwardRef, useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
+
 import {
   closeButton,
   pauseButton,
@@ -29,85 +30,79 @@ export type VideoProps = React.HTMLAttributes<HTMLDivElement> &
     onEnded?: () => void;
   };
 
-export const Video = forwardRef<HTMLDivElement, VideoProps>(
-  (
-    {
-      video,
-      poster,
-      isAutoPlay = false,
-      startMuted = false,
-      showControls = false,
-      hidePlayButton = false,
-      isPlayingFullScreen = false,
-      onPlay,
-      onClose,
-      onEnded,
-      size,
-      css,
-      className,
-    },
-    ref
-  ) => {
-    const videoRef = useRef<HTMLVideoElement>(null);
-    const [isPlaying, setIsPlaying] = useState(false);
-    const [isMuted, setIsMuted] = useState(isAutoPlay || startMuted);
-
-    const playVideo = () => {
-      onPlay?.();
-      videoRef.current?.play();
-      setIsPlaying(true);
-    };
-
-    const closeVideo = () => {
-      onClose?.();
-      videoRef.current?.pause();
-      setIsPlaying(false);
-    };
-
-    const pauseVideo = () => {
-      videoRef.current?.pause();
-      setIsPlaying(false);
-    };
-
-    const toggleMutedVideo = () => {
-      const newIsMuted = !isMuted;
-      setIsMuted(newIsMuted);
-      if (videoRef.current) videoRef.current.muted = newIsMuted;
-    };
-
-    const handleVideoEnded = () => {
-      onEnded?.();
-      closeVideo();
-    };
-
-    useEffect(() => {
-      if (videoRef.current) videoRef.current.muted = isMuted;
-    }, [isMuted]);
-
-    return (
-      <div ref={ref} className={clsx(videoRecipe({ size }), css, className)}>
-        <video ref={videoRef} className={videoElement} playsInline muted={isMuted} autoPlay={isAutoPlay} onEnded={handleVideoEnded}>
-          <source src={video} type="video/mp4" />
-        </video>
-
-        {poster && (
-          <div className={videoPoster} data-playing={isPlaying}>
-            <img src={poster} alt="Video poster" className={posterImage} />
-          </div>
-        )}
-
-        {!hidePlayButton && !isAutoPlay && (
-          <button className={playButton} data-playing={isPlaying} onClick={playVideo} aria-label="Play video" type="button" />
-        )}
-
-        {isPlayingFullScreen && <button className={closeButton} onClick={closeVideo} aria-label="Close video" type="button" />}
-
-        {isPlaying && showControls && <button className={pauseButton} onClick={pauseVideo} aria-label="Pause video" type="button" />}
-
-        {showControls && (
-          <button className={soundButton} onClick={toggleMutedVideo} aria-label={isMuted ? 'Unmute video' : 'Mute video'} type="button" />
-        )}
-      </div>
-    );
-  }
-);
+export const Video = ({
+  video,
+  poster,
+  isAutoPlay = false,
+  startMuted = false,
+  showControls = false,
+  hidePlayButton = false,
+  isPlayingFullScreen = false,
+  onPlay,
+  onClose,
+  onEnded,
+  size,
+  className,
+}: VideoProps) => {
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [isMuted, setIsMuted] = useState(isAutoPlay || startMuted);
+
+  const playVideo = () => {
+    onPlay?.();
+    videoRef.current?.play();
+    setIsPlaying(true);
+  };
+
+  const closeVideo = () => {
+    onClose?.();
+    videoRef.current?.pause();
+    setIsPlaying(false);
+  };
+
+  const pauseVideo = () => {
+    videoRef.current?.pause();
+    setIsPlaying(false);
+  };
+
+  const toggleMutedVideo = () => {
+    const newIsMuted = !isMuted;
+    setIsMuted(newIsMuted);
+    if (videoRef.current) videoRef.current.muted = newIsMuted;
+  };
+
+  const handleVideoEnded = () => {
+    onEnded?.();
+    closeVideo();
+  };
+
+  useEffect(() => {
+    if (videoRef.current) videoRef.current.muted = isMuted;
+  }, [isMuted]);
+
+  return (
+    <div className={clsx(videoRecipe({ size }), className)}>
+      <video ref={videoRef} className={videoElement} playsInline muted={isMuted} autoPlay={isAutoPlay} onEnded={handleVideoEnded}>
+        <source src={video} type="video/mp4" />
+      </video>
+
+      {poster && (
+        <div className={videoPoster} data-playing={isPlaying}>
+          <img src={poster} alt="Video poster" className={posterImage} />
+        </div>
+      )}
+
+      {!hidePlayButton && !isAutoPlay && (
+        <button className={playButton} data-playing={isPlaying} onClick={playVideo} aria-label="Play video" type="button" />
+      )}
+
+      {isPlayingFullScreen && <button className={closeButton} onClick={closeVideo} aria-label="Close video" type="button" />}
+
+      {isPlaying && showControls && <button className={pauseButton} onClick={pauseVideo} aria-label="Pause video" type="button" />}
+
+      {showControls && (
+        <button className={soundButton} onClick={toggleMutedVideo} aria-label={isMuted ? 'Unmute video' : 'Mute video'} type="button" />
+      )}
+    </div>
+  );
+};