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

package/src/components/Logo/Logo.tsx

@@ -0,0 +1,137 @@
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { logoRecipe, type LogoVariants } from './Logo.css';
+import { sprinkles, type Sprinkles } from '../../styles/sprinkles.css';
+
+export interface LogoProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, Sprinkles, NonNullable<LogoVariants> {
+  css?: string;
+  as?: 'div' | 'a' | 'span';
+  href?: string;
+}
+
+export const Logo = forwardRef<HTMLDivElement, LogoProps>(
+  (
+    {
+      children,
+      size,
+      variant,
+      responsive,
+      as: Component = 'div',
+      href,
+      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
+  ) => {
+    // If href is provided, use 'a' tag and set variant to 'link'
+    // TODO const FinalComponent = href ? 'a' : Component;
+    const finalVariant = href ? 'link' : variant;
+
+    return (
+      <div
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        ref={ref as any}
+        // TODO href={href}
+        className={clsx(
+          logoRecipe({ size, variant: finalVariant, responsive }),
+          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}
+      </div>
+    );
+  }
+);
+
+Logo.displayName = 'Logo';

package/src/components/Logo/export.tsx

@@ -0,0 +1,4 @@
+// export { Logo } from '.';
+// export type { LogoProps } from '.';
+
+// export { styles as LogoStyles } from './styles.css';

package/src/components/Logo/stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Logo } from '../../index';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta: Meta<typeof Logo> = {
+  title: 'Latte Components / 1. Global / Logo',
+  component: Logo,
+  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: <img src="" alt="" />,
+  },
+};

package/src/components/Main/Main.tsx

@@ -0,0 +1,130 @@
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+
+import { mainRecipe, type MainVariants } from './Main.css';
+import { sprinkles, type Sprinkles } from '../../styles/sprinkles.css';
+
+export interface MainProps extends Omit<React.HTMLAttributes<HTMLElement>, 'color'>, Sprinkles, NonNullable<MainVariants> {
+  css?: string;
+  as?: 'main' | 'div';
+}
+
+export const Main = forwardRef<HTMLElement, MainProps>(
+  (
+    {
+      children,
+      centered,
+      fullWidth,
+      noPadding,
+      as: Component = 'main',
+      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(
+          mainRecipe({ centered, fullWidth, noPadding }),
+          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>
+    );
+  }
+);
+
+Main.displayName = 'Main';

package/src/components/Main/export.tsx

@@ -0,0 +1,4 @@
+// export { Main } from '.';
+// export type { MainProps } from '.';
+
+// export { styles as MainStyles } from './styles.css';

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: '',
+  },
+};