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

package/src/components/Modal/Modal.tsx

@@ -0,0 +1,194 @@
+import { clsx } from 'clsx';
+import { forwardRef, useEffect, useState } from 'react';
+import { modalCloseButton, modalContentRecipe, type ModalContentVariants, modalRecipe, type ModalVariants } from './Modal.css';
+import { sprinkles, type Sprinkles } from '../../styles/sprinkles.css';
+import { Icon } from '../Icon/Icon';
+
+export interface ModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, Sprinkles, NonNullable<ModalVariants> {
+  css?: string;
+  isOpen: boolean;
+  onClose?: () => void;
+  showCloseButton?: boolean;
+  closeOnBackdropClick?: boolean;
+  closeOnEscape?: boolean;
+  contentProps?: ModalContentVariants & {
+    css?: string;
+    className?: string;
+  };
+}
+
+export const Modal = forwardRef<HTMLDivElement, ModalProps>(
+  (
+    {
+      children,
+      isOpen,
+      onClose,
+      showCloseButton = true,
+      closeOnBackdropClick = true,
+      closeOnEscape = true,
+      contentProps = {},
+      size,
+      centered,
+      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 [shouldRender, setShouldRender] = useState(isOpen);
+
+    useEffect(() => {
+      if (isOpen) {
+        setShouldRender(true);
+        document.body.style.overflow = 'hidden';
+      } else {
+        const timer = setTimeout(() => setShouldRender(false), 300);
+        document.body.style.overflow = '';
+        return () => clearTimeout(timer);
+      }
+    }, [isOpen]);
+
+    useEffect(() => {
+      const handleEscape = (event: KeyboardEvent) => {
+        if (closeOnEscape && event.key === 'Escape' && onClose) {
+          onClose();
+        }
+      };
+
+      if (isOpen) {
+        document.addEventListener('keydown', handleEscape);
+        return () => document.removeEventListener('keydown', handleEscape);
+      }
+    }, [isOpen, closeOnEscape, onClose]);
+
+    const handleBackdropClick = (event: React.MouseEvent) => {
+      if (closeOnBackdropClick && event.target === event.currentTarget && onClose) {
+        onClose();
+      }
+    };
+
+    if (!shouldRender) return null;
+
+    return (
+      <div
+        ref={ref}
+        className={clsx(
+          modalRecipe({ size, centered }),
+          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
+        )}
+        onClick={handleBackdropClick}
+        role="dialog"
+        aria-modal="true"
+        {...htmlProps}>
+        <div
+          className={clsx(
+            modalContentRecipe({
+              size: contentProps.size || size,
+              align: contentProps.align,
+            }),
+            contentProps.css,
+            contentProps.className
+          )}>
+          {showCloseButton && onClose && (
+            <button type="button" className={modalCloseButton} onClick={onClose} aria-label="Close modal">
+              <Icon icon="close" size="sm" />
+            </button>
+          )}
+          {children}
+        </div>
+      </div>
+    );
+  }
+);
+
+Modal.displayName = 'Modal';

package/src/components/Modal/export.tsx

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

package/src/components/Modal/types.tsx

@@ -0,0 +1,5 @@
+export enum Align {
+  Center,
+  Left,
+  Right,
+}

package/src/components/Nav/Nav.tsx

@@ -0,0 +1,129 @@
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { navRecipe, type NavVariants } from './Nav.css';
+import { sprinkles, type Sprinkles } from '../../styles/sprinkles.css';
+
+export interface NavProps extends Omit<React.HTMLAttributes<HTMLElement>, 'color'>, Sprinkles, NonNullable<NavVariants> {
+  css?: string;
+  as?: 'nav' | 'div' | 'ul';
+}
+
+export const Nav = forwardRef<HTMLElement, NavProps>(
+  (
+    {
+      children,
+      orientation,
+      variant,
+      justify,
+      as: Component = 'nav',
+      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 as any}
+        className={clsx(
+          navRecipe({ orientation, variant, justify }),
+          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>
+    );
+  }
+);
+
+Nav.displayName = 'Nav';

package/src/components/Nav/export.tsx

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

package/src/components/Nav/stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Nav } from '../../index';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta: Meta<typeof Nav> = {
+  title: 'Latte Components / 6. Nav / Main',
+  component: Nav,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  // 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
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Default: Story = {
+  args: {
+    children: '',
+  },
+};

package/src/components/NavLegal/NavLegal.tsx

@@ -0,0 +1,133 @@
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { navLegalRecipe, type NavLegalVariants } from './NavLegal.css';
+import { sprinkles, type Sprinkles } from '../../styles/sprinkles.css';
+
+export interface NavLegalProps extends Omit<React.HTMLAttributes<HTMLElement>, 'color'>, Sprinkles, NonNullable<NavLegalVariants> {
+  css?: string;
+  as?: 'nav' | 'div' | 'footer';
+}
+
+export const NavLegal = forwardRef<HTMLElement, NavLegalProps>(
+  (
+    {
+      children,
+      orientation,
+      size,
+      variant,
+      align,
+      as: Component = 'nav',
+      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
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        ref={ref as any}
+        className={clsx(
+          navLegalRecipe({ orientation, size, variant, align }),
+          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
+        )}
+        role="navigation"
+        aria-label="Legal navigation"
+        {...htmlProps}>
+        {children}
+      </Component>
+    );
+  }
+);
+
+NavLegal.displayName = 'NavLegal';

package/src/components/NavLegal/export.tsx

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

package/src/components/NavLegal/stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { NavLegal } from '../../index';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta: Meta<typeof NavLegal> = {
+  title: 'Latte Components / 6. Nav / Legal',
+  component: NavLegal,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  // 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
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Default: Story = {
+  args: {
+    children: '',
+  },
+};

package/src/components/NavLegal/types.tsx

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

package/src/components/NavSocial/NavSocial.tsx

@@ -0,0 +1,169 @@
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { navSocialLink, navSocialRecipe, type NavSocialVariants } from './NavSocial.css';
+import { sprinkles, type Sprinkles } from '../../styles/sprinkles.css';
+import { Icon } from '../Icon/Icon';
+
+export type SocialNetwork = 'instagram' | 'linkedIn' | 'facebook' | 'pinterest' | 'spotify' | 'X' | 'youtube' | 'tiktok';
+
+export interface SocialLink {
+  name: SocialNetwork;
+  url: string;
+  label?: string;
+}
+
+export interface NavSocialProps extends Omit<React.HTMLAttributes<HTMLElement>, 'color'>, Sprinkles, NonNullable<NavSocialVariants> {
+  css?: string;
+  links: SocialLink[];
+  iconSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  as?: 'nav' | 'div' | 'ul';
+}
+
+export const NavSocial = forwardRef<HTMLElement, NavSocialProps>(
+  (
+    {
+      links,
+      iconSize = 'md',
+      orientation,
+      size,
+      variant,
+      as: Component = 'nav',
+      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 getSocialIcon = (name: SocialNetwork): string => {
+      const iconMap: Record<SocialNetwork, string> = {
+        instagram: 'socialInstagram',
+        linkedIn: 'socialLinkedIn',
+        facebook: 'socialFacebook',
+        pinterest: 'socialPinterest',
+        spotify: 'socialSpotify',
+        X: 'socialX',
+        youtube: 'socialYoutube',
+        tiktok: 'socialTiktok',
+      };
+      return iconMap[name];
+    };
+
+    return (
+      <Component
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        ref={ref as any}
+        className={clsx(
+          navSocialRecipe({ orientation, size, variant }),
+          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
+        )}
+        role="navigation"
+        aria-label="Social media links"
+        {...htmlProps}>
+        {links.map((social, index) => (
+          <a
+            key={`${social.name}-${index}`}
+            href={social.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className={navSocialLink}
+            aria-label={social.label || `Visit our ${social.name} page`}>
+            {/*eslint-disable-next-line @typescript-eslint/no-explicit-any*/}
+            <Icon icon={getSocialIcon(social.name) as any} size={iconSize} aria-hidden="true" />
+          </a>
+        ))}
+      </Component>
+    );
+  }
+);
+
+NavSocial.displayName = 'NavSocial';