@latte-macchiat-io/latte-vanilla-components 0.0.159 → 0.0.161

package/dist/types/components/ConsentCookie/index.d.ts

@@ -1,15 +0,0 @@
-import { WithClassName } from '../../types/withClassName';
-import { Theme } from '../../types/theme';
-export type ConsentCookieProps = {
-    theme?: Theme;
-    children?: React.ReactNode;
-    cookieName?: string;
-    cookieExpirationDays?: number;
-    translations?: {
-        actions: {
-            accept: string;
-            reject: string;
-        };
-    };
-};
-export declare const ConsentCookie: ({ children, theme, cookieName, translations, cookieExpirationDays, className, }: ConsentCookieProps & WithClassName) => import("react").JSX.Element | null;

package/dist/types/components/Footer/Footer.css.d.ts

@@ -0,0 +1,50 @@
+import { RecipeVariants } from '@vanilla-extract/recipes';
+export declare const footerRecipe: import('@vanilla-extract/recipes').RuntimeFn<{
+    variant: {
+        default: {
+            backgroundColor: `var(--${string})`;
+            borderTop: `1px solid var(--${string})`;
+        };
+        dark: {
+            backgroundColor: `var(--${string})`;
+            color: `var(--${string})`;
+            borderTop: `1px solid var(--${string})`;
+        };
+        minimal: {
+            backgroundColor: "transparent";
+            borderTop: "none";
+        };
+    };
+    size: {
+        sm: {
+            paddingTop: `var(--${string})`;
+            paddingBottom: `var(--${string})`;
+            fontSize: `var(--${string})`;
+        };
+        md: {
+            paddingTop: `var(--${string})`;
+            paddingBottom: `var(--${string})`;
+            fontSize: `var(--${string})`;
+        };
+        lg: {
+            paddingTop: `var(--${string})`;
+            paddingBottom: `var(--${string})`;
+            fontSize: `var(--${string})`;
+        };
+    };
+    layout: {
+        stacked: {
+            flexDirection: "column";
+            textAlign: "center";
+        };
+        horizontal: {
+            '@media': {
+                [x: string]: {
+                    flexDirection: "row";
+                    textAlign: "left";
+                };
+            };
+        };
+    };
+}>;
+export type FooterVariants = RecipeVariants<typeof footerRecipe>;

package/dist/types/components/Footer/Footer.d.ts

@@ -0,0 +1,7 @@
+import { FooterVariants } from './Footer.css';
+import { Sprinkles } from '../../styles/sprinkles.css';
+export interface FooterProps extends Omit<React.HTMLAttributes<HTMLElement>, 'color'>, Sprinkles, NonNullable<FooterVariants> {
+    css?: string;
+    as?: 'footer' | 'div';
+}
+export declare const Footer: import('react').ForwardRefExoticComponent<FooterProps & import('react').RefAttributes<HTMLElement>>;

package/dist/types/components/Footer/export.d.ts

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

package/dist/types/components/Footer/index.d.ts

@@ -1,7 +0,0 @@
-import { Theme } from '../../types/theme';
-import { WithClassName } from '../../types/withClassName';
-export type FooterProps = {
-    theme?: Theme;
-    children: React.ReactNode;
-};
-export declare const Footer: ({ children, className, theme }: FooterProps & WithClassName) => import("react").JSX.Element;

package/dist/types/components/Form/Form.css.d.ts

@@ -0,0 +1,46 @@
+import { RecipeVariants } from '@vanilla-extract/recipes';
+export declare const formRecipe: import('@vanilla-extract/recipes').RuntimeFn<{
+    spacing: {
+        none: {
+            gap: number;
+        };
+        sm: {
+            display: "flex";
+            flexDirection: "column";
+            gap: `var(--${string})`;
+        };
+        md: {
+            display: "flex";
+            flexDirection: "column";
+            gap: `var(--${string})`;
+        };
+        lg: {
+            display: "flex";
+            flexDirection: "column";
+            gap: `var(--${string})`;
+        };
+        xl: {
+            display: "flex";
+            flexDirection: "column";
+            gap: `var(--${string})`;
+        };
+    };
+    layout: {
+        stacked: {
+            display: "flex";
+            flexDirection: "column";
+        };
+        inline: {
+            display: "flex";
+            flexDirection: "row";
+            flexWrap: "wrap";
+            alignItems: "flex-end";
+        };
+        grid: {
+            display: "grid";
+            gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))";
+            gap: `var(--${string})`;
+        };
+    };
+}>;
+export type FormVariants = RecipeVariants<typeof formRecipe>;

package/dist/types/components/Form/Form.d.ts

@@ -0,0 +1,7 @@
+import { FormVariants } from './Form.css';
+import { Sprinkles } from '../../styles/sprinkles.css';
+export interface FormProps extends Omit<React.FormHTMLAttributes<HTMLFormElement>, 'color'>, Sprinkles, NonNullable<FormVariants> {
+    css?: string;
+    children: React.ReactNode;
+}
+export declare const Form: import('react').ForwardRefExoticComponent<FormProps & import('react').RefAttributes<HTMLFormElement>>;

package/dist/types/components/Form/Row/Row.css.d.ts

@@ -0,0 +1,51 @@
+import { RecipeVariants } from '@vanilla-extract/recipes';
+export declare const rowRecipe: import('@vanilla-extract/recipes').RuntimeFn<{
+    align: {
+        left: {
+            justifyContent: "flex-start";
+            textAlign: "left";
+        };
+        center: {
+            justifyContent: "center";
+            textAlign: "center";
+        };
+        right: {
+            justifyContent: "flex-end";
+            textAlign: "right";
+        };
+    };
+    variant: {
+        default: {
+            flexDirection: "column";
+            gap: `var(--${string})`;
+        };
+        actions: {
+            flexDirection: "row";
+            alignItems: "center";
+            gap: `var(--${string})`;
+            marginTop: `var(--${string})`;
+        };
+        message: {
+            flexDirection: "column";
+            padding: `var(--${string})`;
+            backgroundColor: `var(--${string})`;
+            borderRadius: `var(--${string})`;
+            border: `1px solid var(--${string})`;
+        };
+    };
+    spacing: {
+        none: {
+            gap: number;
+        };
+        sm: {
+            gap: `var(--${string})`;
+        };
+        md: {
+            gap: `var(--${string})`;
+        };
+        lg: {
+            gap: `var(--${string})`;
+        };
+    };
+}>;
+export type RowVariants = RecipeVariants<typeof rowRecipe>;

package/dist/types/components/Form/Row/Row.d.ts

@@ -0,0 +1,9 @@
+import { RowVariants } from './Row.css';
+import { 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 declare const Row: import('react').ForwardRefExoticComponent<RowProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/types/components/Form/Row/index.d.ts

@@ -1,11 +0,0 @@
-import { WithClassName } from '../../../types/withClassName';
-import { Theme } from '../../../types/theme';
-import { Align } from './types';
-export type RowProps = {
-    align?: Align;
-    theme?: Theme;
-    isMessage?: boolean;
-    isActions?: boolean;
-    children: React.ReactNode;
-};
-export declare const Row: ({ children, theme, className, align, isMessage, isActions, }: RowProps & WithClassName) => import("react").JSX.Element;

package/dist/types/components/Form/TextField/Input/Input.css.d.ts

@@ -0,0 +1,32 @@
+import { RecipeVariants } from '@vanilla-extract/recipes';
+export declare const inputRecipe: import('@vanilla-extract/recipes').RuntimeFn<{
+    size: {
+        sm: {
+            fontSize: `var(--${string})`;
+            padding: `var(--${string}) var(--${string})`;
+        };
+        md: {};
+        lg: {
+            fontSize: `var(--${string})`;
+            padding: `var(--${string}) var(--${string})`;
+        };
+    };
+    variant: {
+        default: {};
+        filled: {
+            backgroundColor: `var(--${string})`;
+            border: "none";
+        };
+        outlined: {
+            backgroundColor: "transparent";
+        };
+        underlined: {
+            backgroundColor: "transparent";
+            border: "none";
+            borderBottom: `1px solid var(--${string})`;
+            borderRadius: number;
+            padding: `var(--${string}) 0`;
+        };
+    };
+}>;
+export type InputVariants = RecipeVariants<typeof inputRecipe>;

package/dist/types/components/Form/TextField/Input/Input.d.ts

@@ -0,0 +1,10 @@
+import { InputVariants } from './Input.css';
+import { 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 declare const Input: import('react').ForwardRefExoticComponent<InputProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/types/components/Form/TextField/Input/export.d.ts

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

package/dist/types/components/Form/TextField/Input/index.d.ts

@@ -1,18 +0,0 @@
-import { WithClassName } from '../../../../types/withClassName';
-import { Theme } from '../../../../types/theme';
-import { Type } from './types';
-export type TextFieldInputProps = {
-    type?: Type;
-    name: string;
-    theme?: Theme;
-    value?: string;
-    disabled?: boolean;
-    required?: boolean;
-    placeholder?: string;
-    onChange?: (e: {
-        target: {
-            value: string | undefined;
-        };
-    }) => void | undefined;
-};
-export declare const TextFieldInput: ({ name, value, type, disabled, placeholder, theme, onChange, className, }: TextFieldInputProps & WithClassName) => import("react").JSX.Element;

package/dist/types/components/Form/TextField/Label/Label.css.d.ts

@@ -0,0 +1,23 @@
+import { RecipeVariants } from '@vanilla-extract/recipes';
+export declare const labelRecipe: import('@vanilla-extract/recipes').RuntimeFn<{
+    size: {
+        sm: {
+            fontSize: `var(--${string})`;
+            paddingBottom: `var(--${string})`;
+        };
+        md: {};
+        lg: {
+            fontSize: `var(--${string})`;
+            paddingBottom: `var(--${string})`;
+        };
+    };
+    variant: {
+        default: {};
+        inline: {
+            display: "inline-block";
+            marginRight: `var(--${string})`;
+            paddingBottom: number;
+        };
+    };
+}>;
+export type LabelVariants = RecipeVariants<typeof labelRecipe>;

package/dist/types/components/Form/TextField/Label/Label.d.ts

@@ -0,0 +1,9 @@
+import { LabelVariants } from './Label.css';
+import { 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 declare const Label: import('react').ForwardRefExoticComponent<LabelProps & import('react').RefAttributes<HTMLLabelElement>>;

package/dist/types/components/Form/TextField/Label/index.d.ts

@@ -1,9 +0,0 @@
-import { WithClassName } from '../../../../types/withClassName';
-import { Theme } from '../../../../types/theme';
-export type TextFieldLabelProps = {
-    name: string;
-    label: string;
-    theme?: Theme;
-    required?: boolean;
-};
-export declare const TextFieldLabel: ({ name, label, required, theme, className, }: TextFieldLabelProps & WithClassName) => import("react").JSX.Element;

package/dist/types/components/Form/TextField/TextField.css.d.ts

@@ -0,0 +1,19 @@
+import { RecipeVariants } from '@vanilla-extract/recipes';
+declare const labelBase: string;
+declare const inputBase: string;
+declare const textareaBase: string;
+declare const messageContainer: string;
+declare const errorMessage: string;
+export declare const textFieldRecipe: import('@vanilla-extract/recipes').RuntimeFn<{
+    size: {
+        sm: {
+            gap: `var(--${string})`;
+        };
+        md: {};
+        lg: {
+            gap: `var(--${string})`;
+        };
+    };
+}>;
+export { labelBase, inputBase, textareaBase, messageContainer, errorMessage };
+export type TextFieldVariants = RecipeVariants<typeof textFieldRecipe>;

package/dist/types/components/Form/TextField/TextField.d.ts

@@ -0,0 +1,21 @@
+import { Sprinkles } from '../../../styles/sprinkles.css';
+import { TextFieldVariants } from './TextField.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 declare const TextField: import('react').ForwardRefExoticComponent<TextFieldProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/types/components/Form/TextField/Textarea/Textarea.css.d.ts

@@ -0,0 +1,56 @@
+import { RecipeVariants } from '@vanilla-extract/recipes';
+export declare const textareaRecipe: import('@vanilla-extract/recipes').RuntimeFn<{
+    size: {
+        sm: {
+            fontSize: `var(--${string})`;
+            padding: `var(--${string}) var(--${string})`;
+            minHeight: "60px";
+        };
+        md: {};
+        lg: {
+            fontSize: `var(--${string})`;
+            padding: `var(--${string}) var(--${string})`;
+            minHeight: "100px";
+        };
+    };
+    variant: {
+        default: {};
+        filled: {
+            backgroundColor: `var(--${string})`;
+            border: "none";
+            ':focus': {
+                backgroundColor: `var(--${string})`;
+                border: `1px solid var(--${string})`;
+            };
+        };
+        outlined: {
+            backgroundColor: "transparent";
+        };
+        underlined: {
+            backgroundColor: "transparent";
+            border: "none";
+            borderBottom: `1px solid var(--${string})`;
+            borderRadius: number;
+            padding: `var(--${string}) 0`;
+            ':focus': {
+                borderBottom: `2px solid var(--${string})`;
+                outline: "none";
+            };
+        };
+    };
+    resize: {
+        vertical: {
+            resize: "vertical";
+        };
+        horizontal: {
+            resize: "horizontal";
+        };
+        both: {
+            resize: "both";
+        };
+        none: {
+            resize: "none";
+        };
+    };
+}>;
+export type TextareaVariants = RecipeVariants<typeof textareaRecipe>;

package/dist/types/components/Form/TextField/Textarea/Textarea.d.ts

@@ -0,0 +1,8 @@
+import { TextareaVariants } from './Textarea.css';
+import { 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 declare const Textarea: import('react').ForwardRefExoticComponent<TextareaProps & import('react').RefAttributes<HTMLTextAreaElement>>;

package/dist/types/components/Form/TextField/Textarea/export.d.ts

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

package/dist/types/components/Form/TextField/Textarea/index.d.ts

@@ -1,16 +0,0 @@
-import { WithClassName } from '../../../../types/withClassName';
-import { Theme } from '../../../../types/theme';
-export type TextFieldTextareaProps = {
-    name: string;
-    value?: string;
-    rows?: number;
-    theme?: Theme;
-    disabled?: boolean;
-    placeholder?: string;
-    onChange?: (e: {
-        target: {
-            value: string | undefined;
-        };
-    }) => void | undefined;
-};
-export declare const TextFieldTextarea: ({ name, value, rows, disabled, placeholder, onChange, theme, className, }: TextFieldTextareaProps & WithClassName) => import("react").JSX.Element;

package/dist/types/components/Form/TextField/export.d.ts

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

package/dist/types/components/Form/TextField/index.d.ts

@@ -1,22 +0,0 @@
-import { WithClassName } from '../../../types/withClassName';
-import { Theme } from '../../../types/theme';
-import { Type as InputType } from './Input/types';
-import { Type as TextAreaType } from './Textarea/types';
-export type TextFieldProps = {
-    name: string;
-    theme?: Theme;
-    label?: string;
-    value?: string;
-    rows?: number;
-    disabled?: boolean;
-    required?: boolean;
-    placeholder?: string;
-    errors?: string | string[];
-    type?: InputType | TextAreaType;
-    onChange?: (e: {
-        target: {
-            value: string | undefined;
-        };
-    }) => void | undefined;
-};
-export declare const TextField: ({ name, label, value, rows, required, disabled, placeholder, errors, theme, onChange, type, className, }: TextFieldProps & WithClassName) => import("react").JSX.Element;

package/dist/types/components/Form/export.d.ts

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

package/dist/types/components/Form/index.d.ts

@@ -1,8 +0,0 @@
-import { WithClassName } from '../../types/withClassName';
-import { Theme } from '../../types/theme';
-export type FormProps = {
-    theme?: Theme;
-    children: React.ReactNode;
-    action: ((formData: FormData) => void | Promise<void>) | string;
-};
-export declare const Form: ({ action, children, theme, className }: FormProps & WithClassName) => import("react").JSX.Element;

package/dist/types/components/Header/Header.css.d.ts

@@ -0,0 +1,51 @@
+import { RecipeVariants } from '@vanilla-extract/recipes';
+export declare const headerRecipe: import('@vanilla-extract/recipes').RuntimeFn<{
+    position: {
+        relative: {
+            position: "relative";
+        };
+        fixed: {
+            position: "fixed";
+            top: number;
+            left: number;
+            right: number;
+        };
+        sticky: {
+            position: "sticky";
+            top: number;
+        };
+    };
+    variant: {
+        default: {
+            backgroundColor: `var(--${string})`;
+            borderBottom: `1px solid var(--${string})`;
+        };
+        transparent: {
+            backgroundColor: "transparent";
+            borderBottom: "none";
+        };
+        dark: {
+            backgroundColor: `var(--${string})`;
+            color: `var(--${string})`;
+        };
+    };
+    size: {
+        sm: {
+            height: "60px";
+            paddingTop: `var(--${string})`;
+            paddingBottom: `var(--${string})`;
+        };
+        md: {
+            height: `var(--${string})`;
+            paddingTop: `var(--${string})`;
+            paddingBottom: `var(--${string})`;
+        };
+        lg: {
+            height: "100px";
+            paddingTop: `var(--${string})`;
+            paddingBottom: `var(--${string})`;
+        };
+    };
+}>;
+export declare const headerPlaceholder: string;
+export type HeaderVariants = RecipeVariants<typeof headerRecipe>;

package/dist/types/components/Header/Header.d.ts

@@ -0,0 +1,11 @@
+import { HeaderVariants } from './Header.css';
+import { Sprinkles } from '../../styles/sprinkles.css';
+export interface HeaderProps extends Omit<React.HTMLAttributes<HTMLElement>, 'color'>, Sprinkles, NonNullable<HeaderVariants> {
+    css?: string;
+    isFixed?: boolean;
+    hideToggleNav?: boolean;
+    childrenOverlay?: React.ReactNode;
+    displayToggleNavOnDesktop?: boolean;
+    as?: 'header' | 'div';
+}
+export declare const Header: import('react').ForwardRefExoticComponent<HeaderProps & import('react').RefAttributes<HTMLElement>>;

package/dist/types/components/Header/HeaderOverlay/index.d.ts

@@ -1,9 +1,9 @@
-import { WithClassName } from '../../../types/withClassName';
 import { Theme } from '../../../types/theme';
+import { WithClassName } from '../../../types/withClassName';
 export interface HeaderOverlayProps {
     theme: Theme;
     isOpen: boolean;
     children: React.ReactNode;
 }
-declare const HeaderOverlay: ({ theme, isOpen, children, className, }: HeaderOverlayProps & WithClassName) => import("react").JSX.Element;
+declare const HeaderOverlay: ({ theme, isOpen, children, className }: HeaderOverlayProps & WithClassName) => import("react").JSX.Element;
 export default HeaderOverlay;

package/dist/types/components/Header/ToggleNav/index.d.ts

@@ -1,9 +1,9 @@
-import { WithClassName } from '../../../types/withClassName';
 import { Theme } from '../../../types/theme';
+import { WithClassName } from '../../../types/withClassName';
 export type ToggleNavProps = {
     theme?: Theme;
     isNavOpen: boolean;
     onToggleNav: () => void;
     displayOnDesktop: boolean;
 };
-export declare const ToggleNav: ({ theme, isNavOpen, onToggleNav, displayOnDesktop, className, }: ToggleNavProps & WithClassName) => import("react").JSX.Element;
+export declare const ToggleNav: ({ theme, isNavOpen, onToggleNav, displayOnDesktop, className }: ToggleNavProps & WithClassName) => import("react").JSX.Element;

package/dist/types/components/Header/export.d.ts

@@ -1,3 +0,0 @@
-export { Header } from '.';
-export type { HeaderProps } from '.';
-export { styles as HeaderStyles } from './styles.css';

package/dist/types/components/Header/index.d.ts

@@ -1,11 +0,0 @@
-import { WithClassName } from '../../types/withClassName';
-import { Theme } from '../../types/theme';
-export type HeaderProps = {
-    theme?: Theme;
-    isFixed?: boolean;
-    children: React.ReactNode;
-    hideToggleNav?: boolean;
-    childrenOverlay: React.ReactNode;
-    displayToggleNavOnDesktop?: boolean;
-};
-export declare const Header: ({ children, isFixed, childrenOverlay, theme, hideToggleNav, displayToggleNavOnDesktop, className, }: HeaderProps & WithClassName) => import("react").JSX.Element;