@latte-macchiat-io/latte-vanilla-components 0.0.276 → 0.0.278

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latte-macchiat-io/latte-vanilla-components",
-  "version": "0.0.276",
+  "version": "0.0.278",
   "description": "Beautiful components for amazing projects, with a touch of Vanilla 🥤",
   "type": "module",
   "main": "./src/index.ts",

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

@@ -1,12 +1,11 @@
 import { clsx } from 'clsx';
-import { inputRecipe, type InputVariants } from './styles.css';
+import { inputRecipe } from './styles.css';
 
 import { InputType } from './types';
 
-export type InputProps = React.InputHTMLAttributes<HTMLInputElement> &
-  InputVariants & {
-    type?: InputType;
-  };
+export type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
+  type?: InputType;
+};
 
 export const Input = ({ name, type = 'text', value, required, placeholder, className }: InputProps) => (
   <input id={name} name={name} type={type} value={value} required={required} placeholder={placeholder} className={clsx(inputRecipe(), className)} />

package/src/components/Form/TextField/Textarea/index.tsx

@@ -1,13 +1,11 @@
 import { clsx } from 'clsx';
 
-import { textareaRecipe, type TextareaVariants } from './styles.css';
+import { textareaRecipe } from './styles.css';
 
-export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> &
-  TextareaVariants & {
-    name: string;
-    hasError?: boolean;
-  };
+export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
+  name: string;
+};
 
-export const Textarea = ({ name, size, variant, resize, rows, className }: TextareaProps) => (
-  <textarea id={name} rows={rows} name={name} className={clsx(textareaRecipe({ size, variant, resize }), className)} />
+export const Textarea = ({ name, rows, className }: TextareaProps) => (
+  <textarea id={name} rows={rows} name={name} className={clsx(textareaRecipe(), className)} />
 );

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

@@ -7,43 +7,46 @@ import { InputType } from './Input/types';
 import { errorMessage, messageContainer, textFieldRecipe } from './styles.css';
 import { Textarea } from './Textarea';
 
-export type TextFieldProps = React.HTMLAttributes<HTMLDivElement> & {
+type CommonProps = {
   name: string;
   label?: string;
-  value?: string;
-  rows?: number;
-  required?: boolean;
-  placeholder?: string;
   errors?: string | string[];
   type?: InputType | 'textarea';
-  onChange?: (e: { target: { value: string | undefined } }) => void | undefined;
 };
 
+export type TextFieldProps =
+  | (React.InputHTMLAttributes<HTMLInputElement> & CommonProps)
+  | (React.TextareaHTMLAttributes<HTMLTextAreaElement> & CommonProps);
+
 export const TextField = (props: TextFieldProps) => {
+  const { label, name, errors, type, className, ...rest } = props;
   const hasErrors = useMemo(() => {
-    if (!props.errors) return false;
-    if (Array.isArray(props.errors)) return props.errors.length > 0;
-    return Boolean(props.errors);
-  }, [props.errors]);
+    if (!errors) return false;
+    if (Array.isArray(errors)) return errors.length > 0;
+    return Boolean(errors);
+  }, [errors]);
 
-  const isTextarea = props.type === 'textarea';
+  const isTextarea = type === 'textarea';
 
   return (
-    <div className={clsx(textFieldRecipe(), props.className)}>
-      {props.label && <label htmlFor={props.name}>{props.label}</label>}
-
-      {isTextarea ? <Textarea {...props} /> : <Input {...props} />}
+    <div className={clsx(textFieldRecipe(), className)}>
+      {label && <label htmlFor={name}>{label}</label>}
 
+      {isTextarea ? (
+        <Textarea {...(rest as React.TextareaHTMLAttributes<HTMLTextAreaElement>)} name={name} />
+      ) : (
+        <Input {...(rest as React.InputHTMLAttributes<HTMLInputElement>)} name={name} type={type as InputType} />
+      )}
       {hasErrors && (
         <div className={messageContainer}>
-          {Array.isArray(props.errors) ? (
-            props.errors.map((error, index) => (
+          {Array.isArray(errors) ? (
+            errors.map((error, index) => (
               <span key={index} className={errorMessage}>
                 {error}
               </span>
             ))
           ) : (
-            <span className={errorMessage}>{props.errors}</span>
+            <span className={errorMessage}>{errors}</span>
           )}
         </div>
       )}

package/src/components/Paragraph/export.tsx

@@ -0,0 +1,2 @@
+export { Paragraph, type ParagraphProps } from '.';
+export { type ParagraphVariants } from './styles.css';

package/src/components/Paragraph/index.tsx

@@ -0,0 +1,12 @@
+import { clsx } from 'clsx';
+
+import { paragraphRecipe, type ParagraphVariants } from './styles.css';
+
+export type ParagraphProps = React.HTMLAttributes<HTMLDivElement> &
+  ParagraphVariants & {
+    children: React.ReactNode;
+  };
+
+export const Paragraph = ({ align, className, children }: ParagraphProps) => (
+  <p className={clsx(paragraphRecipe({ align }), className)}>{children}</p>
+);

package/src/components/Paragraph/stories.tsx

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

package/src/components/Paragraph/styles.css.ts

@@ -0,0 +1,60 @@
+import { globalStyle } from '@vanilla-extract/css';
+import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
+
+import { queries } from '../../styles/mediaqueries';
+import { themeContract } from '../../theme/contract.css';
+import { generateResponsiveMedia } from '../../utils/generateResponsiveMedia';
+
+export const paragraphRecipe = recipe(
+  {
+    base: [
+      {
+        fontWeight: 300,
+
+        '@media': {
+          ...generateResponsiveMedia({
+            paddingBottom: themeContract.paragraph.paddingBottom,
+          }),
+        },
+      },
+    ],
+
+    variants: {
+      align: {
+        left: {
+          alignItems: 'flex-start',
+          justifyContent: 'flex-start',
+        },
+        center: {
+          alignItems: 'center',
+          justifyContent: 'center',
+        },
+        right: {
+          alignItems: 'flex-end',
+          justifyContent: 'flex-end',
+        },
+      },
+    },
+
+    defaultVariants: {
+      align: 'left',
+    },
+  },
+  'actions'
+);
+
+globalStyle('p:last-of-type', {
+  paddingBottom: 0,
+});
+
+globalStyle('p + ul', {
+  paddingTop: 15,
+
+  '@media': {
+    [queries.sm]: {
+      paddingTop: 30,
+    },
+  },
+});
+
+export type ParagraphVariants = RecipeVariants<typeof paragraphRecipe>;

package/src/components/Paragraph/theme.ts

@@ -0,0 +1,24 @@
+const themeParagraphBase = {
+  paragraph: {
+    paddingBottom: {
+      mobile: '15px',
+      sm: '15px',
+      md: '30px',
+      lg: '30px',
+      xl: '50px',
+      '2xl': '50px',
+    },
+  },
+};
+
+export const themeParagraphLight = {
+  paragraph: {
+    ...themeParagraphBase.paragraph,
+  },
+};
+
+export const themeParagraphDark = {
+  paragraph: {
+    ...themeParagraphBase.paragraph,
+  },
+};

package/src/theme/baseThemeValues.ts

@@ -15,6 +15,7 @@ import { themeModalDark, themeModalLight } from '../components/Modal/theme';
 import { themeNavDark, themeNavLight } from '../components/Nav/theme';
 import { themeNavLegalDark, themeNavLegalLight } from '../components/NavLegal/theme';
 import { themeNavSocialDark, themeNavSocialLight } from '../components/NavSocial/theme';
+import { themeParagraphDark, themeParagraphLight } from '../components/Paragraph/theme';
 import { themeSectionDark, themeSectionLight } from '../components/Section/theme';
 import { themeVideoDark, themeVideoLight } from '../components/Video/theme';
 
@@ -124,6 +125,7 @@ export const baseLightTheme = {
 
   ...themeSectionLight,
   ...themeHeadingLight,
+  ...themeParagraphLight,
 
   ...themeActionsLight,
   ...themeButtonLight,
@@ -255,6 +257,7 @@ export const baseDarkTheme = {
 
   ...themeSectionDark,
   ...themeHeadingDark,
+  ...themeParagraphDark,
 
   ...themeActionsDark,
   ...themeButtonDark,

package/src/theme/contract.css.ts

@@ -374,6 +374,17 @@ export const themeContract = createGlobalThemeContract({
     },
   },
 
+  paragraph: {
+    paddingBottom: {
+      mobile: 'latte-paragraph-paddingBottom-mobile',
+      sm: 'latte-paragraph-paddingBottom-sm',
+      md: 'latte-paragraph-paddingBottom-md',
+      lg: 'latte-paragraph-paddingBottom-lg',
+      xl: 'latte-paragraph-paddingBottom-xl',
+      '2xl': 'latte-paragraph-paddingBottom-2xl',
+    },
+  },
+
   columns: {
     gap: {
       mobile: 'latte-columns-gap-mobile',

package/src/theme/createTheme.ts

@@ -21,6 +21,7 @@ export type ThemeOverrides = {
   icon?: Partial<typeof baseLightTheme.icon>;
   columns?: Partial<typeof baseLightTheme.columns>;
   heading?: Partial<typeof baseLightTheme.heading>;
+  paragraph?: Partial<typeof baseLightTheme.paragraph>;
   modal?: Partial<typeof baseLightTheme.modal>;
   keyNumber?: Partial<typeof baseLightTheme.keyNumber>;
   header?: Partial<typeof baseLightTheme.header>;
@@ -53,6 +54,7 @@ const createAppTheme = (selector: string, overrides: ThemeOverrides = {}) => {
     icon: { ...baseLightTheme.icon, ...overrides.icon },
     columns: { ...baseLightTheme.columns, ...overrides.columns },
     heading: { ...baseLightTheme.heading, ...overrides.heading },
+    paragraph: { ...baseLightTheme.paragraph, ...overrides.paragraph },
     modal: { ...baseLightTheme.modal, ...overrides.modal },
     keyNumber: { ...baseLightTheme.keyNumber, ...overrides.keyNumber },
     header: { ...baseLightTheme.header, ...overrides.header },
@@ -86,6 +88,7 @@ const createAppDarkTheme = (selector: string, overrides: ThemeOverrides = {}) =>
     icon: { ...baseDarkTheme.icon, ...overrides.icon },
     columns: { ...baseDarkTheme.columns, ...overrides.columns },
     heading: { ...baseDarkTheme.heading, ...overrides.heading },
+    paragraph: { ...baseDarkTheme.paragraph, ...overrides.paragraph },
     modal: { ...baseDarkTheme.modal, ...overrides.modal },
     keyNumber: { ...baseDarkTheme.keyNumber, ...overrides.keyNumber },
     header: { ...baseDarkTheme.header, ...overrides.header },