@latte-macchiat-io/latte-vanilla-components 0.0.176 → 0.0.178

package/src/components/Video/Video.tsx

@@ -0,0 +1,243 @@
+import { clsx } from 'clsx';
+import { forwardRef, useEffect, useRef, useState } from 'react';
+import {
+  closeButton,
+  pauseButton,
+  playButton,
+  posterImage,
+  soundButton,
+  videoElement,
+  videoPoster,
+  videoRecipe,
+  type VideoVariants,
+} from './Video.css';
+import { sprinkles, type Sprinkles } from '../../styles/sprinkles.css';
+import { Icon } from '../Icon/Icon';
+
+export interface VideoProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, Sprinkles, NonNullable<VideoVariants> {
+  css?: string;
+  video: string;
+  poster?: string;
+  isAutoPlay?: boolean;
+  startMuted?: boolean;
+  showControls?: boolean;
+  hidePlayButton?: boolean;
+  isVideoFullWidth?: boolean;
+  isPlayingFullScreen?: boolean;
+  onPlay?: () => void;
+  onClose?: () => void;
+  onEnded?: () => void;
+}
+
+export const Video = forwardRef<HTMLDivElement, VideoProps>(
+  (
+    {
+      video,
+      poster,
+      isAutoPlay = false,
+      startMuted = false,
+      showControls = false,
+      hidePlayButton = false,
+      isVideoFullWidth = false,
+      isPlayingFullScreen = false,
+      onPlay,
+      onClose,
+      onEnded,
+      size,
+      aspectRatio,
+      css,
+      className,
+      // Extract sprinkles props
+      margin,
+      marginTop,
+      marginBottom,
+      marginLeft,
+      marginRight,
+      padding,
+      paddingTop,
+      paddingBottom,
+      paddingLeft,
+      paddingRight,
+      gap,
+      display,
+      flexDirection,
+      justifyContent,
+      flexWrap,
+      flex,
+      width,
+      height,
+      minWidth,
+      maxWidth,
+      minHeight,
+      position,
+      top,
+      bottom,
+      left,
+      right,
+      zIndex,
+      fontSize,
+      fontFamily,
+      lineHeight,
+      textAlign,
+      fontWeight,
+      color,
+      backgroundColor,
+      borderRadius,
+      borderWidth,
+      borderStyle,
+      borderColor,
+      boxShadow,
+      opacity,
+      overflow,
+      overflowX,
+      overflowY,
+      ...htmlProps
+    },
+    ref
+  ) => {
+    const videoRef = useRef<HTMLVideoElement>(null);
+    const [isPlaying, setIsPlaying] = useState(false);
+    const [isMuted, setIsMuted] = useState(isAutoPlay || startMuted);
+
+    const playVideo = () => {
+      if (onPlay) onPlay();
+      videoRef.current?.play();
+      setIsPlaying(true);
+    };
+
+    const closeVideo = () => {
+      if (onClose) 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 = () => {
+      if (onEnded) onEnded();
+      closeVideo();
+    };
+
+    const onEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') closeVideo();
+    };
+
+    useEffect(() => {
+      window.addEventListener('keydown', onEscape);
+
+      return () => {
+        window.removeEventListener('keydown', onEscape);
+      };
+    }, []);
+
+    useEffect(() => {
+      if (videoRef.current) {
+        videoRef.current.muted = isMuted;
+      }
+    }, [isMuted]);
+
+    return (
+      <div
+        ref={ref}
+        className={clsx(
+          videoRecipe({
+            size: isVideoFullWidth ? 'fullWidth' : size,
+            aspectRatio,
+          }),
+          sprinkles({
+            margin,
+            marginTop,
+            marginBottom,
+            marginLeft,
+            marginRight,
+            padding,
+            paddingTop,
+            paddingBottom,
+            paddingLeft,
+            paddingRight,
+            gap,
+            display,
+            flexDirection,
+            justifyContent,
+            flexWrap,
+            flex,
+            width,
+            height,
+            minWidth,
+            maxWidth,
+            minHeight,
+            position,
+            top,
+            bottom,
+            left,
+            right,
+            zIndex,
+            fontSize,
+            fontFamily,
+            lineHeight,
+            textAlign,
+            fontWeight,
+            color,
+            backgroundColor,
+            borderRadius,
+            borderWidth,
+            borderStyle,
+            borderColor,
+            boxShadow,
+            opacity,
+            overflow,
+            overflowX,
+            overflowY,
+          }),
+          css,
+          className
+        )}
+        {...htmlProps}>
+        <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} sizes="2560" />
+          </div>
+        )}
+
+        {!hidePlayButton && !isAutoPlay && (
+          <button className={playButton} data-playing={isPlaying} onClick={playVideo} aria-label="Play video" type="button">
+            <Icon icon="play" size="lg" />
+          </button>
+        )}
+
+        {isPlayingFullScreen && (
+          <button className={closeButton} onClick={closeVideo} aria-label="Close video" type="button">
+            <Icon icon="close" size="md" />
+          </button>
+        )}
+
+        {isPlaying && showControls && (
+          <button className={pauseButton} onClick={pauseVideo} aria-label="Pause video" type="button">
+            <Icon icon="pause" size="md" />
+          </button>
+        )}
+
+        {showControls && (
+          <button className={soundButton} onClick={toggleMutedVideo} aria-label={isMuted ? 'Unmute video' : 'Mute video'} type="button">
+            <Icon icon={isMuted ? 'volumeMute' : 'volumeUp'} size="md" />
+          </button>
+        )}
+      </div>
+    );
+  }
+);
+
+Video.displayName = 'Video';

package/src/components/Video/export.tsx

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

package/src/components/VideoFullWidth/VideoFullWidth.tsx

@@ -0,0 +1,152 @@
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { videoFullWidthRecipe, type VideoFullWidthVariants } from './VideoFullWidth.css';
+import { sprinkles, type Sprinkles } from '../../styles/sprinkles.css';
+import { Video } from '../Video/Video';
+
+export interface VideoFullWidthProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, Sprinkles, NonNullable<VideoFullWidthVariants> {
+  css?: string;
+  video: string;
+  poster?: string;
+  isAutoPlay?: boolean;
+  startMuted?: boolean;
+  showControls?: boolean;
+  onPlay?: () => void;
+  onClose?: () => void;
+  onEnded?: () => void;
+}
+
+export const VideoFullWidth = forwardRef<HTMLDivElement, VideoFullWidthProps>(
+  (
+    {
+      video,
+      poster,
+      isAutoPlay = false,
+      startMuted = false,
+      showControls = false,
+      onPlay,
+      onClose,
+      onEnded,
+      aspectRatio,
+      css,
+      className,
+      // Extract sprinkles props
+      margin,
+      marginTop,
+      marginBottom,
+      marginLeft,
+      marginRight,
+      padding,
+      paddingTop,
+      paddingBottom,
+      paddingLeft,
+      paddingRight,
+      gap,
+      display,
+      flexDirection,
+      justifyContent,
+      flexWrap,
+      flex,
+      width,
+      height,
+      minWidth,
+      maxWidth,
+      minHeight,
+      position,
+      top,
+      bottom,
+      left,
+      right,
+      zIndex,
+      fontSize,
+      fontFamily,
+      lineHeight,
+      textAlign,
+      fontWeight,
+      color,
+      backgroundColor,
+      borderRadius,
+      borderWidth,
+      borderStyle,
+      borderColor,
+      boxShadow,
+      opacity,
+      overflow,
+      overflowX,
+      overflowY,
+      ...htmlProps
+    },
+    ref
+  ) => {
+    return (
+      <div
+        ref={ref}
+        className={clsx(
+          videoFullWidthRecipe({ aspectRatio }),
+          sprinkles({
+            margin,
+            marginTop,
+            marginBottom,
+            marginLeft,
+            marginRight,
+            padding,
+            paddingTop,
+            paddingBottom,
+            paddingLeft,
+            paddingRight,
+            gap,
+            display,
+            flexDirection,
+            justifyContent,
+            flexWrap,
+            flex,
+            width,
+            height,
+            minWidth,
+            maxWidth,
+            minHeight,
+            position,
+            top,
+            bottom,
+            left,
+            right,
+            zIndex,
+            fontSize,
+            fontFamily,
+            lineHeight,
+            textAlign,
+            fontWeight,
+            color,
+            backgroundColor,
+            borderRadius,
+            borderWidth,
+            borderStyle,
+            borderColor,
+            boxShadow,
+            opacity,
+            overflow,
+            overflowX,
+            overflowY,
+          }),
+          css,
+          className
+        )}
+        {...htmlProps}>
+        <Video
+          video={video}
+          poster={poster}
+          isAutoPlay={isAutoPlay}
+          startMuted={startMuted}
+          showControls={showControls}
+          onPlay={onPlay}
+          onClose={onClose}
+          onEnded={onEnded}
+          isVideoFullWidth
+          size="fullWidth"
+        />
+      </div>
+    );
+  }
+);
+
+VideoFullWidth.displayName = 'VideoFullWidth';

package/src/components/VideoFullWidth/export.tsx

@@ -0,0 +1,2 @@
+// export { VideoFullWidth } from './VideoFullWidth';
+// export type { VideoFullWidthProps } from './VideoFullWidth';

package/dist/components/Actions/Actions.css.ts

@@ -1,113 +0,0 @@
-import { style } from '@vanilla-extract/css';
-import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
-import { themeContract } from '../../theme';
-import { queries } from '../../styles/mediaqueries';
-
-const actionsBase = style({
-  display: 'flex',
-  flexWrap: 'wrap',
-
-  gap: themeContract.space.sm,
-  paddingTop: themeContract.space.sm,
-  width: '100%',
-
-  '@media': {
-    [queries.lg]: {
-      gap: themeContract.space.md,
-      paddingTop: themeContract.space.md,
-    },
-  },
-});
-
-export const actionsRecipe = recipe({
-  base: actionsBase,
-
-  variants: {
-    align: {
-      left: {
-        justifyContent: 'flex-start',
-        alignItems: 'flex-start',
-      },
-      center: {
-        justifyContent: 'center',
-        alignItems: 'center',
-      },
-      right: {
-        justifyContent: 'flex-end',
-        alignItems: 'flex-end',
-      },
-    },
-    direction: {
-      row: {
-        flexDirection: 'row',
-      },
-      column: {
-        flexDirection: 'column',
-      },
-      'row-reverse': {
-        flexDirection: 'row-reverse',
-      },
-      'column-reverse': {
-        flexDirection: 'column-reverse',
-      },
-    },
-    spacing: {
-      none: {
-        gap: '0',
-        paddingTop: '0',
-      },
-      xs: {
-        gap: themeContract.space.xs,
-        paddingTop: themeContract.space.xs,
-      },
-      sm: {
-        gap: themeContract.space.sm,
-        paddingTop: themeContract.space.sm,
-      },
-      md: {
-        gap: themeContract.space.md,
-        paddingTop: themeContract.space.md,
-      },
-      lg: {
-        gap: themeContract.space.lg,
-        paddingTop: themeContract.space.lg,
-      },
-      xl: {
-        gap: themeContract.space.xl,
-        paddingTop: themeContract.space.xl,
-      },
-    },
-    wrap: {
-      true: {
-        flexWrap: 'wrap',
-      },
-      false: {
-        flexWrap: 'nowrap',
-      },
-    },
-    fullWidth: {
-      true: {
-        width: '100%',
-
-        // selectors: {
-        //   '& > *': {
-        //     flex: '1',
-        //   },
-        // },
-      },
-      false: {
-        width: 'auto',
-      },
-    },
-  },
-
-  defaultVariants: {
-    align: 'left',
-    direction: 'row',
-    spacing: 'sm',
-    wrap: true,
-    fullWidth: false,
-  },
-});
-
-export type ActionsVariants = RecipeVariants<typeof actionsRecipe>;

package/dist/components/Button/Button.css.ts

@@ -1,119 +0,0 @@
-import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
-import { themeContract } from '../../theme';
-
-export const buttonRecipe = recipe({
-  base: {
-    display: 'inline-flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: themeContract.space.md,
-    borderRadius: themeContract.radii.md,
-    border: 'none',
-    cursor: 'pointer',
-    fontFamily: themeContract.fonts.body,
-    fontSize: themeContract.fontSizes.md,
-    fontWeight: '500',
-    lineHeight: themeContract.lineHeights.tight,
-    textDecoration: 'none',
-    transition: 'all 0.2s ease-in-out',
-    outline: 'none',
-
-    ':hover': {
-      transform: 'translateY(-1px)',
-      boxShadow: themeContract.shadows.md,
-    },
-
-    ':active': {
-      transform: 'translateY(0)',
-    },
-
-    ':focus-visible': {
-      outline: '2px solid',
-      outlineColor: themeContract.colors.primary,
-      outlineOffset: '2px',
-    },
-
-    ':disabled': {
-      opacity: '0.5',
-      cursor: 'not-allowed',
-      transform: 'none',
-      boxShadow: 'none',
-    },
-  },
-
-  variants: {
-    variant: {
-      primary: {
-        backgroundColor: themeContract.colors.primary,
-        color: themeContract.colors.background,
-
-        ':hover': {
-          backgroundColor: themeContract.colors.accent,
-        },
-      },
-      secondary: {
-        backgroundColor: themeContract.colors.secondary,
-        color: themeContract.colors.text,
-
-        ':hover': {
-          backgroundColor: themeContract.colors.surface,
-        },
-      },
-      outline: {
-        backgroundColor: 'transparent',
-        color: themeContract.colors.text,
-        border: `1px solid ${themeContract.colors.border}`,
-
-        ':hover': {
-          backgroundColor: themeContract.colors.surface,
-          borderColor: themeContract.colors.primary,
-        },
-      },
-      ghost: {
-        backgroundColor: 'transparent',
-        color: themeContract.colors.text,
-
-        ':hover': {
-          backgroundColor: themeContract.colors.surface,
-        },
-      },
-      danger: {
-        backgroundColor: themeContract.colors.error,
-        color: themeContract.colors.background,
-
-        ':hover': {
-          opacity: '0.9',
-        },
-      },
-    },
-    size: {
-      sm: {
-        padding: `${themeContract.space.xs} ${themeContract.space.sm}`,
-        fontSize: themeContract.fontSizes.sm,
-        borderRadius: themeContract.radii.sm,
-      },
-      md: {
-        padding: `${themeContract.space.sm} ${themeContract.space.md}`,
-        fontSize: themeContract.fontSizes.md,
-        borderRadius: themeContract.radii.md,
-      },
-      lg: {
-        padding: `${themeContract.space.md} ${themeContract.space.lg}`,
-        fontSize: themeContract.fontSizes.lg,
-        borderRadius: themeContract.radii.lg,
-      },
-    },
-    fullWidth: {
-      true: {
-        width: '100%',
-      },
-    },
-  },
-
-  defaultVariants: {
-    variant: 'primary',
-    size: 'md',
-  },
-});
-
-export type ButtonVariants = RecipeVariants<typeof buttonRecipe>;