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

package/src/components/{Icon/stories.ts → ConsentCookie/stories.tsx}

@@ -1,11 +1,11 @@
 // import type { Meta, StoryObj } from '@storybook/react';
-// import { defaultTheme } from '../../assets/styles/default-theme';
-// import { Icon } from '../../index';
+//
+// import { ConsentCookie } from '.';
 //
 // // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-// const meta = {
-//   title: 'Latte Components / 1. Global / Icon',
-//   component: Icon,
+// const meta: Meta<typeof ConsentCookie> = {
+//   title: 'Latte Components / 5. Consent / Cookie',
+//   component: ConsentCookie,
 //   parameters: {
 //     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
 //     layout: 'centered',
@@ -15,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 Icon>;
+// };
 //
 // export default meta;
 // type Story = StoryObj<typeof meta>;
@@ -23,7 +23,6 @@
 // // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 // export const Default: Story = {
 //   args: {
-//     icon: 'close',
-//     theme: defaultTheme,
+//     children: 'Cookies with your latte? In accordance with our cookies policy',
 //   },
 // };

package/src/components/Footer/Footer.tsx

@@ -0,0 +1,130 @@
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { footerRecipe, type FooterVariants } from './Footer.css';
+import { sprinkles, type Sprinkles } from '../../styles/sprinkles.css';
+
+export interface FooterProps extends Omit<React.HTMLAttributes<HTMLElement>, 'color'>, Sprinkles, NonNullable<FooterVariants> {
+  css?: string;
+  as?: 'footer' | 'div';
+}
+
+export const Footer = forwardRef<HTMLElement, FooterProps>(
+  (
+    {
+      children,
+      variant,
+      size,
+      layout,
+      as: Component = 'footer',
+      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(
+          footerRecipe({ variant, size, layout }),
+          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>
+    );
+  }
+);
+
+Footer.displayName = 'Footer';

package/src/components/Footer/export.tsx

@@ -0,0 +1,4 @@
+// export { Footer } from '.';
+// export type { FooterProps } from '.';
+
+// export { styles as FooterStyles } from './styles.css';

package/src/components/Footer/stories.tsx

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

package/src/components/Form/Form.tsx

@@ -0,0 +1,127 @@
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { formRecipe, type FormVariants } from './Form.css';
+import { sprinkles, type Sprinkles } from '../../styles/sprinkles.css';
+
+export interface FormProps extends Omit<React.FormHTMLAttributes<HTMLFormElement>, 'color'>, Sprinkles, NonNullable<FormVariants> {
+  css?: string;
+  children: React.ReactNode;
+}
+
+export const Form = forwardRef<HTMLFormElement, FormProps>(
+  (
+    {
+      children,
+      spacing,
+      layout,
+      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 (
+      <form
+        ref={ref}
+        className={clsx(
+          formRecipe({ spacing, layout }),
+          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}
+      </form>
+    );
+  }
+);
+
+Form.displayName = 'Form';

package/src/components/Form/Row/Row.tsx

@@ -0,0 +1,137 @@
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { rowRecipe, type RowVariants } from './Row.css';
+import { sprinkles, type Sprinkles } from '../../../styles/sprinkles.css';
+
+export interface RowProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, Sprinkles, NonNullable<RowVariants> {
+  css?: string;
+  children: React.ReactNode;
+  isActions?: boolean;
+  isMessage?: boolean;
+}
+
+export const Row = forwardRef<HTMLDivElement, RowProps>(
+  (
+    {
+      children,
+      align,
+      variant,
+      spacing,
+      isActions = false,
+      isMessage = false,
+      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
+  ) => {
+    // Determine the variant based on the props
+    let computedVariant = variant;
+    if (isActions) computedVariant = 'actions';
+    if (isMessage) computedVariant = 'message';
+
+    return (
+      <div
+        ref={ref}
+        className={clsx(
+          rowRecipe({ align, variant: computedVariant, 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}
+      </div>
+    );
+  }
+);
+
+Row.displayName = 'Row';

package/src/components/Form/Row/stories.tsx

@@ -0,0 +1,41 @@
+// import type { Meta, StoryObj } from '@storybook/react';
+//
+// import { TextField } from '../TextField';
+//
+// import { Row } from '.';
+//
+// // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+// const meta: Meta<typeof Row> = {
+//   title: 'Latte Components / Form / Row',
+//   component: Row,
+//   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: <TextField name="hello" label="hello" />,
+//   },
+// };
+//
+// export const MultipleChildren: Story = {
+//   args: {
+//     children: (
+//       <>
+//         <TextField name="hello" label="hello" />
+//         <TextField name="hello" label="hello" />
+//       </>
+//     ),
+//   },
+// };

package/src/components/Form/TextField/Input/Input.tsx

@@ -0,0 +1,139 @@
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { inputRecipe, type InputVariants } from './Input.css';
+import { sprinkles, type Sprinkles } from '../../../../styles/sprinkles.css';
+
+export type InputType = 'text' | 'email' | 'search' | 'number' | 'hidden' | 'password' | 'tel' | 'url' | 'date' | 'time' | 'datetime-local' | 'color';
+
+export interface InputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'color' | 'size' | 'height' | 'width'>,
+    Sprinkles,
+    NonNullable<InputVariants> {
+  css?: string;
+  name: string;
+  type?: InputType;
+  hasError?: boolean;
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      name,
+      type = 'text',
+      hasError = false,
+      size,
+      variant,
+      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 (
+      <input
+        ref={ref}
+        id={name}
+        name={name}
+        type={type}
+        className={clsx(
+          inputRecipe({ 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
+        )}
+        data-error={hasError}
+        {...htmlProps}
+      />
+    );
+  }
+);
+
+Input.displayName = 'Input';

package/src/components/Form/TextField/Input/export.tsx

@@ -0,0 +1,6 @@
+// export { TextFieldInput } from '.';
+// export type { TextFieldInputProps } from '.';
+
+// export { Type as InputType } from './types';
+
+// export { styles as InputStyles } from './styles.css';