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

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

@@ -0,0 +1,133 @@
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { labelRecipe, type LabelVariants } from './Label.css';
+import { sprinkles, type Sprinkles } from '../../../../styles/sprinkles.css';
+
+export interface LabelProps extends Omit<React.LabelHTMLAttributes<HTMLLabelElement>, 'color'>, Sprinkles, NonNullable<LabelVariants> {
+  css?: string;
+  label: string;
+  name: string;
+  required?: boolean;
+}
+
+export const Label = forwardRef<HTMLLabelElement, LabelProps>(
+  (
+    {
+      label,
+      name,
+      required = 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 (
+      <label
+        ref={ref}
+        htmlFor={name}
+        className={clsx(
+          labelRecipe({ 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-required={required}
+        {...htmlProps}>
+        {label}
+      </label>
+    );
+  }
+);
+
+Label.displayName = 'Label';

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

@@ -0,0 +1,4 @@
+// export { TextFieldLabel } from '.';
+// export type { TextFieldLabelProps } from '.';
+//
+// export { styles as TextFieldLabelStyles } from './styles.css';

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

@@ -0,0 +1,200 @@
+import { clsx } from 'clsx';
+import { forwardRef, useMemo } from 'react';
+import { errorMessage, inputBase, labelBase, messageContainer, textareaBase, textFieldRecipe, type TextFieldVariants } from './TextField.css';
+import { sprinkles, type Sprinkles } from '../../../styles/sprinkles.css';
+
+export type InputType = 'text' | 'email' | 'search' | 'number' | 'hidden' | 'password' | 'textarea';
+
+export interface TextFieldProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'onChange'>, Sprinkles, NonNullable<TextFieldVariants> {
+  css?: string;
+  name: string;
+  label?: string;
+  value?: string;
+  rows?: number;
+  disabled?: boolean;
+  required?: boolean;
+  placeholder?: string;
+  errors?: string | string[];
+  type?: InputType;
+  onChange?: (e: { target: { value: string | undefined } }) => void | undefined;
+}
+
+export const TextField = forwardRef<HTMLDivElement, TextFieldProps>(
+  (
+    {
+      name,
+      label,
+      value = '',
+      rows = 3,
+      disabled = false,
+      required = false,
+      placeholder = '',
+      errors,
+      type = 'text',
+      onChange,
+      size,
+      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 hasErrors = useMemo(() => {
+      if (!errors) return false;
+      if (Array.isArray(errors)) return errors.length > 0;
+      return Boolean(errors);
+    }, [errors]);
+
+    const isTextarea = type === 'textarea';
+
+    return (
+      <div
+        ref={ref}
+        className={clsx(
+          textFieldRecipe({ size }),
+          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}>
+        {label && (
+          <label htmlFor={name} className={labelBase} data-required={required}>
+            {label}
+          </label>
+        )}
+
+        {isTextarea ? (
+          <textarea
+            id={name}
+            name={name}
+            rows={rows}
+            value={value}
+            disabled={disabled}
+            placeholder={placeholder}
+            className={textareaBase}
+            onChange={onChange}
+            data-error={hasErrors}
+            required={required}
+          />
+        ) : (
+          <input
+            id={name}
+            name={name}
+            type={type}
+            value={value}
+            disabled={disabled}
+            placeholder={placeholder}
+            className={inputBase}
+            onChange={onChange}
+            data-error={hasErrors}
+            required={required}
+          />
+        )}
+
+        {hasErrors && (
+          <div className={messageContainer}>
+            {Array.isArray(errors) ? (
+              errors.map((error, index) => (
+                <span key={index} className={errorMessage}>
+                  {error}
+                </span>
+              ))
+            ) : (
+              <span className={errorMessage}>{errors}</span>
+            )}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+TextField.displayName = 'TextField';

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

@@ -0,0 +1,135 @@
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { textareaRecipe, type TextareaVariants } from './Textarea.css';
+import { sprinkles, type Sprinkles } from '../../../../styles/sprinkles.css';
+
+export interface TextareaProps
+  extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'color' | 'size'>,
+    Sprinkles,
+    NonNullable<TextareaVariants> {
+  css?: string;
+  name: string;
+  hasError?: boolean;
+}
+
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+  (
+    {
+      name,
+      hasError = false,
+      size,
+      variant,
+      resize,
+      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 (
+      <textarea
+        ref={ref}
+        id={name}
+        name={name}
+        className={clsx(
+          textareaRecipe({ size, variant, resize }),
+          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}
+      />
+    );
+  }
+);
+
+Textarea.displayName = 'Textarea';

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

@@ -0,0 +1,6 @@
+// export { TextFieldTextarea } from '.';
+// export type { TextFieldTextareaProps } from '.';
+
+// export { Type as TextareaType } from './types';
+
+// export { styles as TextareaStyles } from './styles.css';

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

@@ -0,0 +1,44 @@
+// import type { Meta, StoryObj } from '@storybook/react';
+//
+// import { TextFieldTextarea } from '../../../../index';
+//
+// // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+// const meta: Meta<typeof TextFieldTextarea> = {
+//   title: 'Latte Components / Form / Text Field / Textarea',
+//   component: TextFieldTextarea,
+//   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: {},
+// };
+//
+// export const Placeholder: Story = {
+//   args: {
+//     placeholder: "It's a placeholder",
+//   },
+// };
+//
+// export const Disabled: Story = {
+//   args: {
+//     disabled: true,
+//   },
+// };
+//
+// export const Rows10: Story = {
+//   args: {
+//     rows: 10,
+//   },
+// };

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

@@ -0,0 +1,4 @@
+// export { TextField } from '.';
+// export type { TextFieldProps } from '.';
+
+// export { styles as TextFieldStyles } from './styles.css';

package/src/components/Form/export.tsx

@@ -0,0 +1,4 @@
+// export { Form } from '.';
+// export type { FormProps } from '.';
+
+// export { styles as FormStyles } from './styles.css';

package/src/components/Header/Header.tsx

@@ -0,0 +1,158 @@
+import { clsx } from 'clsx';
+import { forwardRef, useState } from 'react';
+import { headerPlaceholder, headerRecipe, type HeaderVariants } from './Header.css';
+import { sprinkles, type Sprinkles } from '../../styles/sprinkles.css';
+
+export interface HeaderProps extends Omit<React.HTMLAttributes<HTMLElement>, 'color'>, Sprinkles, NonNullable<HeaderVariants> {
+  css?: string;
+  isFixed?: boolean; // Legacy prop for backwards compatibility
+  hideToggleNav?: boolean;
+  childrenOverlay?: React.ReactNode;
+  displayToggleNavOnDesktop?: boolean;
+  as?: 'header' | 'div';
+}
+
+export const Header = forwardRef<HTMLElement, HeaderProps>(
+  (
+    {
+      children,
+      position,
+      variant,
+      size,
+      isFixed, // Legacy prop
+      hideToggleNav,
+      childrenOverlay,
+      displayToggleNavOnDesktop,
+      as: Component = 'header',
+      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,
+      zIndex,
+      fontSize,
+      fontFamily,
+      lineHeight,
+      textAlign,
+      fontWeight,
+      color,
+      backgroundColor,
+      borderRadius,
+      borderWidth,
+      borderStyle,
+      borderColor,
+      boxShadow,
+      opacity,
+      overflow,
+      overflowX,
+      overflowY,
+      ...htmlProps
+    },
+    ref
+  ) => {
+    const [isNavOpen, setNavOpen] = useState(false);
+
+    // Handle legacy isFixed prop
+    const headerPosition = position || (isFixed ? 'fixed' : 'relative');
+
+    return (
+      <>
+        <Component
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          ref={ref as any}
+          className={clsx(
+            headerRecipe({ variant, size }),
+            sprinkles({
+              margin,
+              marginTop,
+              marginBottom,
+              marginLeft,
+              marginRight,
+              padding,
+              paddingTop,
+              paddingBottom,
+              paddingLeft,
+              paddingRight,
+              gap,
+              display,
+              flexDirection,
+              justifyContent,
+              flexWrap,
+              flex,
+              width,
+              height,
+              minWidth,
+              maxWidth,
+              minHeight,
+              zIndex,
+              fontSize,
+              fontFamily,
+              lineHeight,
+              textAlign,
+              fontWeight,
+              color,
+              backgroundColor,
+              borderRadius,
+              borderWidth,
+              borderStyle,
+              borderColor,
+              boxShadow,
+              opacity,
+              overflow,
+              overflowX,
+              overflowY,
+            }),
+            css,
+            className
+          )}
+          {...htmlProps}>
+          {/* Overlay for mobile navigation */}
+          {childrenOverlay && <div className={clsx('header-overlay', isNavOpen && 'header-overlay--open')}>{childrenOverlay}</div>}
+
+          {children}
+
+          {/* Toggle navigation button */}
+          {!hideToggleNav && (
+            <button
+              type="button"
+              className="header-nav-toggle"
+              onClick={() => setNavOpen(!isNavOpen)}
+              aria-expanded={isNavOpen}
+              aria-label="Toggle navigation">
+              <span className="sr-only">Toggle navigation</span>
+              <div className={`hamburger ${isNavOpen ? 'hamburger--open' : ''}`}>
+                <span></span>
+                <span></span>
+                <span></span>
+              </div>
+            </button>
+          )}
+        </Component>
+
+        {/* Placeholder for fixed headers */}
+        {(headerPosition === 'fixed' || isFixed) && <div className={headerPlaceholder} />}
+      </>
+    );
+  }
+);
+
+Header.displayName = 'Header';