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

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/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';

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/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>;
+};