@latte-macchiat-io/latte-vanilla-components 0.0.158 → 0.0.160

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;

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

@@ -0,0 +1,77 @@
+import { RecipeVariants } from '@vanilla-extract/recipes';
+declare const iconPath: string;
+export declare const iconRecipe: import('@vanilla-extract/recipes').RuntimeFn<{
+    size: {
+        xs: {
+            width: "12px";
+            height: "12px";
+        };
+        sm: {
+            width: "16px";
+            height: "16px";
+        };
+        md: {
+            width: "24px";
+            height: "24px";
+        };
+        lg: {
+            width: "32px";
+            height: "32px";
+        };
+        xl: {
+            width: "48px";
+            height: "48px";
+        };
+        '2xl': {
+            width: "64px";
+            height: "64px";
+        };
+    };
+    color: {
+        current: {
+            fill: "currentColor";
+        };
+        primary: {
+            fill: `var(--${string})`;
+        };
+        secondary: {
+            fill: `var(--${string})`;
+        };
+        accent: {
+            fill: `var(--${string})`;
+        };
+        text: {
+            fill: `var(--${string})`;
+        };
+        textSecondary: {
+            fill: `var(--${string})`;
+        };
+        error: {
+            fill: `var(--${string})`;
+        };
+        success: {
+            fill: `var(--${string})`;
+        };
+        warning: {
+            fill: `var(--${string})`;
+        };
+        info: {
+            fill: `var(--${string})`;
+        };
+    };
+    interactive: {
+        true: {
+            cursor: "pointer";
+            ':hover': {
+                transform: "scale(1.1)";
+                opacity: number;
+            };
+            ':active': {
+                transform: "scale(0.95)";
+            };
+        };
+        false: {};
+    };
+}>;
+export { iconPath };
+export type IconVariants = RecipeVariants<typeof iconRecipe>;

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

@@ -0,0 +1,12 @@
+import { IconVariants } from './Icon.css';
+import { default as iconPaths } from './path';
+import { Sprinkles } from '../../styles/sprinkles.css';
+export interface IconProps extends Omit<React.SVGProps<SVGSVGElement>, 'color' | 'size'>, Sprinkles, NonNullable<IconVariants> {
+    css?: string;
+    icon?: keyof typeof iconPaths;
+    iconPath?: string;
+    customSize?: number;
+    customColor?: string;
+    viewBox?: string;
+}
+export declare const Icon: import('react').ForwardRefExoticComponent<Omit<IconProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;

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

@@ -1,3 +0,0 @@
-export { Icon } from '.';
-export type { IconProps } from '.';
-export { styles as IconStyles } from './styles.css';

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

@@ -1,11 +0,0 @@
-import { WithClassName } from '../../types/withClassName';
-import { Theme } from '../../types/theme';
-export type IconProps = {
-    theme?: Theme;
-    icon?: string;
-    iconPath?: string;
-    size?: number;
-    color?: string;
-    viewBox?: string;
-};
-export declare const Icon: ({ icon, size, iconPath, color, theme, viewBox, className, }: IconProps & WithClassName) => import("react").JSX.Element;

package/dist/types/components/Icon/stories.d.ts

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ icon, size, iconPath, color, theme, viewBox, className, }: import('.').IconProps & import('../../types/withClassName').WithClassName) => import("react").JSX.Element;
+    component: import('react').ForwardRefExoticComponent<Omit<import('./Icon').IconProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
     parameters: {
         layout: string;
     };

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

@@ -0,0 +1,46 @@
+import { RecipeVariants } from '@vanilla-extract/recipes';
+declare const keyNumberValue: string;
+declare const keyNumberLabel: string;
+export declare const keyNumberRecipe: import('@vanilla-extract/recipes').RuntimeFn<{
+    size: {
+        sm: {};
+        md: {};
+        lg: {};
+    };
+    variant: {
+        default: {};
+        highlighted: {
+            padding: `var(--${string})`;
+            backgroundColor: `var(--${string})`;
+            borderRadius: `var(--${string})`;
+            boxShadow: `var(--${string})`;
+        };
+        outlined: {
+            padding: `var(--${string})`;
+            border: `2px solid var(--${string})`;
+            borderRadius: `var(--${string})`;
+        };
+    };
+    align: {
+        left: {
+            alignItems: "flex-start";
+            textAlign: "left";
+        };
+        center: {
+            alignItems: "center";
+            textAlign: "center";
+        };
+        right: {
+            alignItems: "flex-end";
+            textAlign: "right";
+        };
+    };
+    color: {
+        default: {};
+        primary: {};
+        accent: {};
+        success: {};
+    };
+}>;
+export { keyNumberValue, keyNumberLabel };
+export type KeyNumberVariants = RecipeVariants<typeof keyNumberRecipe>;

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

@@ -0,0 +1,15 @@
+import { KeyNumberVariants } from './KeyNumber.css';
+import { Sprinkles } from '../../styles/sprinkles.css';
+export interface KeyNumberProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, Sprinkles, NonNullable<KeyNumberVariants> {
+    css?: string;
+    value: number;
+    label: string;
+    suffix?: string;
+    prefix?: string;
+    duration?: number;
+    threshold?: number;
+    separator?: string;
+    decimals?: number;
+    as?: 'div' | 'section' | 'article';
+}
+export declare const KeyNumber: import('react').ForwardRefExoticComponent<KeyNumberProps & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -1,3 +0,0 @@
-export { KeyNumber } from '.';
-export type { KeyNumberProps } from '.';
-export { styles as KeyNumberStyles } from './styles.css';

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

@@ -1,9 +0,0 @@
-import { Theme } from '../../types/theme';
-import { WithClassName } from '../../types/withClassName';
-export type KeyNumberProps = {
-    label: string;
-    theme?: Theme;
-    suffix: string;
-    keyNumber: number;
-};
-export declare const KeyNumber: ({ label, suffix, keyNumber, className, theme, }: KeyNumberProps & WithClassName) => import("react").JSX.Element;

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

@@ -0,0 +1,18 @@
+import { RecipeVariants } from '@vanilla-extract/recipes';
+declare const languageSwitcherSelect: string;
+declare const languageSwitcherIcon: string;
+export declare const languageSwitcherRecipe: import('@vanilla-extract/recipes').RuntimeFn<{
+    variant: {
+        default: {};
+        minimal: {};
+        outlined: {};
+        filled: {};
+    };
+    size: {
+        sm: {};
+        md: {};
+        lg: {};
+    };
+}>;
+export { languageSwitcherSelect, languageSwitcherIcon };
+export type LanguageSwitcherVariants = RecipeVariants<typeof languageSwitcherRecipe>;

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

@@ -0,0 +1,16 @@
+import { LanguageSwitcherVariants } from './LanguageSwitcher.css';
+import { Sprinkles } from '../../styles/sprinkles.css';
+export interface Locale {
+    code: string;
+    name: string;
+    label?: string;
+}
+export interface LanguageSwitcherProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'onChange'>, Sprinkles, NonNullable<LanguageSwitcherVariants> {
+    css?: string;
+    locales: Locale[];
+    currentLocale: string;
+    onChange: (locale: string) => void;
+    disabled?: boolean;
+    placeholder?: string;
+}
+export declare const LanguageSwitcher: import('react').ForwardRefExoticComponent<LanguageSwitcherProps & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -1,3 +0,0 @@
-export { LanguageSwitcher } from '.';
-export type { LanguageSwitcherProps } from '.';
-export { styles as LanguageSwitcherStyles } from './styles.css';

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

@@ -1,15 +0,0 @@
-import { Theme } from '../../types/theme';
-import { WithClassName } from '../../types/withClassName';
-export type LanguageSwitcherProps = {
-    theme?: Theme;
-    locales: string[];
-    currentLocale: string;
-    translations: {
-        [locale: string]: string;
-    };
-    handleChange: (event: {
-        target: HTMLSelectElement;
-    }) => void;
-};
-export declare const LanguageSwitcher: ({ currentLocale, handleChange, locales, theme, className, translations, }: LanguageSwitcherProps & WithClassName) => import("react").JSX.Element;
-export default LanguageSwitcher;

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

@@ -0,0 +1,54 @@
+import { RecipeVariants } from '@vanilla-extract/recipes';
+export declare const logoRecipe: import('@vanilla-extract/recipes').RuntimeFn<{
+    size: {
+        xs: {
+            width: "80px";
+            height: "auto";
+        };
+        sm: {
+            width: "120px";
+            height: "auto";
+        };
+        md: {
+            width: "160px";
+            height: "auto";
+        };
+        lg: {
+            width: "200px";
+            height: "auto";
+        };
+        xl: {
+            width: "240px";
+            height: "auto";
+        };
+        auto: {
+            width: "auto";
+            height: "auto";
+        };
+    };
+    variant: {
+        default: {};
+        link: {
+            cursor: "pointer";
+            transition: "all 0.3s ease-in-out";
+            ':hover': {
+                opacity: "0.8";
+                transform: "scale(1.05)";
+            };
+            ':focus': {
+                outline: "2px solid";
+                outlineColor: `var(--${string})`;
+                outlineOffset: "2px";
+                borderRadius: `var(--${string})`;
+            };
+        };
+    };
+    responsive: {
+        true: {
+            maxWidth: "100%";
+            height: "auto";
+        };
+        false: {};
+    };
+}>;
+export type LogoVariants = RecipeVariants<typeof logoRecipe>;

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

@@ -0,0 +1,8 @@
+import { LogoVariants } from './Logo.css';
+import { Sprinkles } from '../../styles/sprinkles.css';
+export interface LogoProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, Sprinkles, NonNullable<LogoVariants> {
+    css?: string;
+    as?: 'div' | 'a' | 'span';
+    href?: string;
+}
+export declare const Logo: import('react').ForwardRefExoticComponent<LogoProps & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -1,3 +0,0 @@
-export { Logo } from '.';
-export type { LogoProps } from '.';
-export { styles as LogoStyles } from './styles.css';

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

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

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

@@ -0,0 +1,32 @@
+import { RecipeVariants } from '@vanilla-extract/recipes';
+export declare const mainRecipe: import('@vanilla-extract/recipes').RuntimeFn<{
+    centered: {
+        true: {
+            justifyContent: "center";
+            alignItems: "center";
+        };
+        false: {
+            justifyContent: "flex-start";
+            alignItems: "stretch";
+        };
+    };
+    fullWidth: {
+        true: {
+            maxWidth: "100%";
+        };
+        false: {
+            maxWidth: `var(--${string})`;
+        };
+    };
+    noPadding: {
+        true: {
+            paddingTop: "0";
+            paddingBottom: "0";
+        };
+        false: {
+            paddingTop: `var(--${string})`;
+            paddingBottom: `var(--${string})`;
+        };
+    };
+}>;
+export type MainVariants = RecipeVariants<typeof mainRecipe>;

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

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

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

@@ -1,3 +0,0 @@
-export { Main } from '.';
-export type { MainProps } from '.';
-export { styles as MainStyles } from './styles.css';

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

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

package/dist/types/components/Main/stories.d.ts

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ children, className, theme }: import('.').MainProps & import('../../types/withClassName').WithClassName) => import("react").JSX.Element;
+    component: any;
     parameters: {
         layout: string;
     };

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

@@ -0,0 +1,82 @@
+import { RecipeVariants } from '@vanilla-extract/recipes';
+declare const modalCloseButton: string;
+export declare const modalRecipe: import('@vanilla-extract/recipes').RuntimeFn<{
+    size: {
+        sm: {};
+        md: {};
+        lg: {};
+        xl: {};
+        full: {
+            padding: number;
+        };
+    };
+    centered: {
+        true: {
+            alignItems: "center";
+            justifyContent: "center";
+        };
+        false: {
+            alignItems: "flex-start";
+            justifyContent: "center";
+            paddingTop: "5vh";
+        };
+    };
+}>;
+export declare const modalContentRecipe: import('@vanilla-extract/recipes').RuntimeFn<{
+    size: {
+        sm: {
+            padding: `var(--${string})`;
+            '@media': {
+                [x: string]: {
+                    maxWidth: "400px";
+                };
+            };
+        };
+        md: {
+            padding: `var(--${string})`;
+            '@media': {
+                [x: string]: {
+                    maxWidth: "500px";
+                };
+            };
+        };
+        lg: {
+            padding: `var(--${string})`;
+            '@media': {
+                [x: string]: {
+                    maxWidth: "700px";
+                };
+            };
+        };
+        xl: {
+            padding: `var(--${string})`;
+            '@media': {
+                [x: string]: {
+                    maxWidth: "900px";
+                };
+            };
+        };
+        full: {
+            width: "100vw";
+            height: "100vh";
+            maxWidth: "none";
+            maxHeight: "none";
+            borderRadius: number;
+            padding: `var(--${string})`;
+        };
+    };
+    align: {
+        left: {
+            textAlign: "left";
+        };
+        center: {
+            textAlign: "center";
+        };
+        right: {
+            textAlign: "right";
+        };
+    };
+}>;
+export { modalCloseButton };
+export type ModalVariants = RecipeVariants<typeof modalRecipe>;
+export type ModalContentVariants = RecipeVariants<typeof modalContentRecipe>;

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

@@ -0,0 +1,15 @@
+import { ModalContentVariants, ModalVariants } from './Modal.css';
+import { Sprinkles } from '../../styles/sprinkles.css';
+export interface ModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, Sprinkles, NonNullable<ModalVariants> {
+    css?: string;
+    isOpen: boolean;
+    onClose?: () => void;
+    showCloseButton?: boolean;
+    closeOnBackdropClick?: boolean;
+    closeOnEscape?: boolean;
+    contentProps?: ModalContentVariants & {
+        css?: string;
+        className?: string;
+    };
+}
+export declare const Modal: import('react').ForwardRefExoticComponent<ModalProps & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -1,3 +0,0 @@
-export { Modal } from '.';
-export type { ModalProps } from '.';
-export { styles as ModalStyles } from './styles.css';

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

@@ -1,10 +0,0 @@
-import { Theme } from '../../types/theme';
-import { WithClassName } from '../../types/withClassName';
-import { Align } from './types';
-export type ModalProps = {
-    theme?: Theme;
-    align?: Align;
-    onModalHide?: () => void;
-    children: React.ReactNode;
-};
-export declare const Modal: ({ children, align, theme, onModalHide, className, }: ModalProps & WithClassName) => import("react").JSX.Element;

package/dist/types/components/Modal/styles.css.d.ts

@@ -19,19 +19,6 @@ export declare const styles: {
     position: string;
     width: string;
     height: string;
-    selectors: {
-        '&:before': {
-            content: string;
-            position: string;
-            top: number;
-            left: number;
-            right: number;
-            bottom: number;
-            opacity: `var(--${string})`;
-            backgroundColor: `var(--${string})`;
-            backdropFilter: string;
-        };
-    };
 };
 export declare const modalStyle: string;
 export declare const modalContentStyle: string;

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

@@ -0,0 +1,52 @@
+import { RecipeVariants } from '@vanilla-extract/recipes';
+export declare const navRecipe: import('@vanilla-extract/recipes').RuntimeFn<{
+    orientation: {
+        horizontal: {
+            flexDirection: "row";
+            alignItems: "center";
+        };
+        vertical: {
+            flexDirection: "column";
+            alignItems: "flex-start";
+        };
+        responsive: {
+            flexDirection: "column";
+            alignItems: "flex-start";
+            '@media': {
+                [x: string]: {
+                    flexDirection: "row";
+                    alignItems: "center";
+                };
+            };
+        };
+    };
+    variant: {
+        default: {
+            gap: `var(--${string})`;
+        };
+        compact: {
+            gap: `var(--${string})`;
+        };
+        spacious: {
+            gap: `var(--${string})`;
+        };
+    };
+    justify: {
+        start: {
+            justifyContent: "flex-start";
+        };
+        center: {
+            justifyContent: "center";
+        };
+        end: {
+            justifyContent: "flex-end";
+        };
+        between: {
+            justifyContent: "space-between";
+        };
+        around: {
+            justifyContent: "space-around";
+        };
+    };
+}>;
+export type NavVariants = RecipeVariants<typeof navRecipe>;

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

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

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

@@ -1,3 +0,0 @@
-export { Nav } from '.';
-export type { NavProps } from '.';
-export { styles as NavStyles } from './styles.css';

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

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