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

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,
@@ -16,7 +17,6 @@ import {
 
 export type VideoProps = React.HTMLAttributes<HTMLDivElement> &
   VideoVariants & {
-    css?: string;
     video: string;
     poster?: string;
     isAutoPlay?: boolean;
@@ -29,85 +29,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>
+  );
+};

package/src/components/Video/theme.ts

@@ -0,0 +1,104 @@
+const themeVideoBase = {
+  video: {
+    playButton: {
+      border: 'none',
+      borderRadius: '1000px',
+      iconColor: '#FF7377',
+      backgroundColor: '#FF7377',
+      width: {
+        mobile: '50px',
+        sm: '50px',
+        md: '50px',
+        lg: '75px',
+        xl: '75px',
+        '2xl': '75px',
+      },
+      height: {
+        mobile: '50px',
+        sm: '50px',
+        md: '50px',
+        lg: '75px',
+        xl: '75px',
+        '2xl': '75px',
+      },
+    },
+    pauseButton: {
+      border: 'none',
+      borderRadius: '1000px',
+      iconColor: '#FF7377',
+      backgroundColor: '#FF7377',
+      width: {
+        mobile: '50px',
+        sm: '50px',
+        md: '50px',
+        lg: '75px',
+        xl: '75px',
+        '2xl': '75px',
+      },
+      height: {
+        mobile: '50px',
+        sm: '50px',
+        md: '50px',
+        lg: '75px',
+        xl: '75px',
+        '2xl': '75px',
+      },
+    },
+    soundButton: {
+      border: 'none',
+      borderRadius: '1000px',
+      iconColor: '#FF7377',
+      backgroundColor: '#FF7377',
+      width: {
+        mobile: '50px',
+        sm: '50px',
+        md: '50px',
+        lg: '75px',
+        xl: '75px',
+        '2xl': '75px',
+      },
+      height: {
+        mobile: '50px',
+        sm: '50px',
+        md: '50px',
+        lg: '75px',
+        xl: '75px',
+        '2xl': '75px',
+      },
+    },
+    closeButton: {
+      border: 'none',
+      borderRadius: '1000px',
+      iconColor: '#FF7377',
+      backgroundColor: '#FF7377',
+      width: {
+        mobile: '50px',
+        sm: '50px',
+        md: '50px',
+        lg: '75px',
+        xl: '75px',
+        '2xl': '75px',
+      },
+      height: {
+        mobile: '50px',
+        sm: '50px',
+        md: '50px',
+        lg: '75px',
+        xl: '75px',
+        '2xl': '75px',
+      },
+    },
+  },
+};
+
+export const themeVideoLight = {
+  video: {
+    ...themeVideoBase.video,
+  },
+};
+
+export const themeVideoDark = {
+  video: {
+    ...themeVideoBase.video,
+  },
+};

package/src/index.ts

@@ -10,68 +10,38 @@ export { breakpoints, queries } from './styles/mediaqueries';
 // Components
 export { ThemeToggle } from './components/ThemeToggle';
 
-export * from './components/Button/export';
 export * from './components/Actions/export';
+export * from './components/Button/export';
+export * from './components/Carousel/export';
+export * from './components/Columns/export';
 
-export { Section, type SectionProps } from './components/Section';
-export { type SectionVariants } from './components/Section/styles.css';
-
-export { Main, type MainProps } from './components/Main';
-
-export { Header, type HeaderProps } from './components/Header';
-
-export { Footer, type FooterProps } from './components/Footer';
-
-export { Nav, type NavProps } from './components/Nav';
-
-export { Icon, type IconProps } from './components/Icon';
+export * from './components/Section/export';
+export * from './components/Main/export';
 
-export { Heading, type HeadingProps } from './components/Heading';
+export * from './components/Header/export';
+export * from './components/Footer/export';
 
-export { Modal, type ModalProps } from './components/Modal';
-export { type ModalVariants } from './components/Modal/styles.css';
+export * from './components/Nav/export';
 
-export { Logo, type LogoProps } from './components/Logo';
+export * from './components/Icon/export';
 
-export { Columns, type ColumnsProps } from './components/Columns';
+export * from './components/Heading/export';
 
-export { Carousel, type CarouselProps } from './components/Carousel';
-export { type CarouselVariants } from './components/Carousel/styles.css';
+export * from './components/Modal/export';
 
-export { ConsentCookie, type ConsentCookieProps } from './components/ConsentCookie/ConsentCookie';
-export { type ConsentCookieVariants } from './components/ConsentCookie/ConsentCookie.css';
+export * from './components/Logo/export';
 
-export { KeyNumber, type KeyNumberProps } from './components/KeyNumber';
-export { type KeyNumberVariants } from './components/KeyNumber/styles.css';
+export * from './components/ConsentCookie/export';
 
-export { NavSocial, type NavSocialProps } from './components/NavSocial';
-export { type Social } from './components/NavSocial/types';
+export * from './components/KeyNumber/export';
 
-export { NavLegal, type NavLegalProps } from './components/NavLegal';
+export * from './components/NavSocial/export';
+export * from './components/NavLegal/export';
 
-export { LanguageSwitcher, type LanguageSwitcherProps, type Locale } from './components/LanguageSwitcher';
-export { type LanguageSwitcherVariants } from './components/LanguageSwitcher/styles.css';
+export * from './components/LanguageSwitcher/export';
 
 // Video Components
-export { Video, type VideoProps } from './components/Video';
-export { type VideoVariants } from './components/Video/styles.css';
+export * from './components/Video/export';
 
 // Form Components
-export { Form, type FormProps } from './components/Form/Form';
-export { type FormVariants } from './components/Form/Form.css';
-
-export { Row, type RowProps } from './components/Form/Row/Row';
-export { type RowVariants } from './components/Form/Row/Row.css';
-
-export { TextField, type TextFieldProps, type InputType } from './components/Form/TextField/TextField';
-export { type TextFieldVariants } from './components/Form/TextField/TextField.css';
-
-// Form TextField Subcomponents
-export { Label, type LabelProps } from './components/Form/TextField/Label/Label';
-export { type LabelVariants } from './components/Form/TextField/Label/Label.css';
-
-export { Input, type InputProps, type InputType as InputFieldType } from './components/Form/TextField/Input/Input';
-export { type InputVariants } from './components/Form/TextField/Input/Input.css';
-
-export { Textarea, type TextareaProps } from './components/Form/TextField/Textarea/Textarea';
-export { type TextareaVariants } from './components/Form/TextField/Textarea/Textarea.css';
+export * from './components/Form/export';