@latte-macchiat-io/latte-vanilla-components 0.0.177 → 0.0.179

package/src/components/NavSocial/export.tsx

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

package/src/components/{Columns/stories.ts → NavSocial/stories.tsx}

@@ -1,10 +1,11 @@
 // import type { Meta, StoryObj } from '@storybook/react';
-// import { Columns } from '.';
+//
+// import { NavSocial } from '../../index';
 //
 // // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-// const meta = {
-//   title: 'Latte Components / Layout / Columns',
-//   component: Columns,
+// const meta: Meta<typeof NavSocial> = {
+//   title: 'Latte Components / 6. Nav / Social',
+//   component: NavSocial,
 //   parameters: {
 //     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
 //     layout: 'centered',
@@ -14,7 +15,7 @@
 //   // More on argTypes: https://storybook.js.org/docs/api/argtypes
 //   argTypes: {},
 //   // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
-// } satisfies Meta<typeof Columns>;
+// };
 //
 // export default meta;
 // type Story = StoryObj<typeof meta>;
@@ -22,14 +23,11 @@
 // // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 // export const Default: Story = {
 //   args: {
-//     columns: [6, 6],
-//     children: '<div>Column 1</div> <div>Column 2</div>',
-//   },
-// };
-//
-// export const Default3Col: Story = {
-//   args: {
-//     columns: [4, 4, 4],
-//     children: '<div>Column 1</div> <div>Column 2</div> <div>Column 3</div>',
+//     navSocial: [
+//       {
+//         name: 'instagram',
+//         link: 'https://www.instagram.com/',
+//       },
+//     ],
 //   },
 // };

package/src/components/NavSocial/types.tsx

@@ -0,0 +1 @@
+export type Social = 'instagram' | 'linkedIn' | 'facebook' | 'pinterest' | 'spotify' | 'X' | 'youtube' | 'tiktok';

package/src/components/Section/Section.tsx

@@ -0,0 +1,130 @@
+'use client';
+
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { sectionRecipe, type SectionVariants } from './Section.css';
+import { sprinkles, type Sprinkles } from '../../styles/sprinkles.css';
+
+export interface SectionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, Sprinkles, NonNullable<SectionVariants> {
+  css?: string;
+  as?: 'section' | 'div' | 'main' | 'article' | 'aside';
+}
+
+export const Section = forwardRef<HTMLDivElement, SectionProps>(
+  (
+    {
+      children,
+      align,
+      isDark,
+      isFullHeight,
+      spacing,
+      as: Component = 'section',
+      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 (
+      <Component
+        ref={ref}
+        className={clsx(
+          sectionRecipe({ align, isDark, isFullHeight, spacing }),
+          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}>
+        {children}
+      </Component>
+    );
+  }
+);

package/src/components/Section/export.tsx

@@ -0,0 +1,6 @@
+// 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';

package/src/components/ToRemove/ToRemove.tsx

@@ -0,0 +1,3 @@
+export const ToRemove = () => {
+  return <div>ToRemove</div>;
+};

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/src/index.ts

@@ -87,7 +87,7 @@ export { type TextareaVariants } from './components/Form/TextField/Textarea/Text
 export { ToRemove } from './components/ToRemove/ToRemove';
 
 // Theme utilities
-export { createDarkTheme, createLightTheme, type ThemeOverrides } from './utils/theme.css';
+export { createDarkTheme, createLightTheme, type ThemeOverrides } from './utils/theme';
 // Theme contract and values
 export { themeContract } from './theme/contract.css';
 export { baseLightTheme, baseDarkTheme } from './theme/baseThemeValues';