@latte-macchiat-io/latte-vanilla-components 0.0.175 → 0.0.177

package/dist/styles/sprinkles.css.ts

@@ -1,84 +0,0 @@
-import { createSprinkles, defineProperties } from '@vanilla-extract/sprinkles';
-import { queries } from './mediaqueries';
-import { themeContract } from '../theme';
-
-const responsiveProperties = defineProperties({
-  conditions: {
-    mobile: {},
-    sm: { '@media': queries.sm },
-    md: { '@media': queries.md },
-    lg: { '@media': queries.lg },
-    xl: { '@media': queries.xl },
-    '2xl': { '@media': queries['2xl'] },
-  },
-  defaultCondition: 'mobile',
-
-  properties: {
-    // Spacing
-    padding: themeContract.space,
-    paddingTop: themeContract.space,
-    paddingBottom: themeContract.space,
-    paddingLeft: themeContract.space,
-    paddingRight: themeContract.space,
-    margin: themeContract.space,
-    marginTop: themeContract.space,
-    marginBottom: themeContract.space,
-    marginLeft: themeContract.space,
-    marginRight: themeContract.space,
-    gap: themeContract.space,
-
-    // Layout
-    display: ['none', 'block', 'inline', 'inline-block', 'flex', 'inline-flex', 'grid', 'inline-grid'],
-    flexDirection: ['row', 'column', 'row-reverse', 'column-reverse'],
-    // alignItems: ['stretch', 'flex-start', 'center', 'flex-end', 'baseline'],
-    justifyContent: ['flex-start', 'center', 'flex-end', 'space-between', 'space-around', 'space-evenly'],
-    flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
-    flex: ['1', 'auto', 'initial', 'none'],
-
-    // Dimensions
-    width: ['auto', '100%', '50%', '33.333333%', '25%', 'fit-content', 'min-content', 'max-content'],
-    height: ['auto', '100%', '100vh', 'fit-content', 'min-content', 'max-content'],
-    minWidth: ['0', '100%', 'fit-content', 'min-content', 'max-content'],
-    maxWidth: [themeContract.maxWidth],
-    minHeight: ['0', '100%', '100vh'],
-
-    // Position
-    position: ['static', 'relative', 'absolute', 'fixed', 'sticky'],
-    top: themeContract.space,
-    bottom: themeContract.space,
-    left: themeContract.space,
-    right: themeContract.space,
-    zIndex: [0, 10, 20, 30, 40, 50],
-
-    // Typography
-    fontSize: themeContract.fontSizes,
-    fontFamily: themeContract.fonts,
-    lineHeight: themeContract.lineHeights,
-    textAlign: ['left', 'center', 'right', 'justify'],
-    fontWeight: ['normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900'],
-
-    // Colors
-    color: themeContract.colors,
-    backgroundColor: themeContract.colors,
-
-    // Border
-    borderRadius: themeContract.radii,
-    borderWidth: ['0', '1px', '2px', '4px'],
-    borderStyle: ['none', 'solid', 'dashed', 'dotted'],
-    borderColor: themeContract.colors,
-
-    // Effects
-    boxShadow: themeContract.shadows,
-    opacity: ['0', '0.25', '0.5', '0.75', '1'],
-
-    // Overflow
-    overflow: ['visible', 'hidden', 'scroll', 'auto'],
-    overflowX: ['visible', 'hidden', 'scroll', 'auto'],
-    overflowY: ['visible', 'hidden', 'scroll', 'auto'],
-  },
-});
-
-// Export both configuration and function for consumer customization
-export { responsiveProperties };
-export const sprinkles = createSprinkles(responsiveProperties);
-export type Sprinkles = Parameters<typeof sprinkles>[0];

package/dist/theme/contract.css.ts

@@ -1,83 +0,0 @@
-import { createGlobalThemeContract } from '@vanilla-extract/css';
-
-// Define a theme contract with design tokens using createGlobalThemeContract
-// This enables predictable CSS variable names for external consumption and runtime overrides
-export const themeContract = createGlobalThemeContract({
-  colors: {
-    primary: null,
-    secondary: null,
-    accent: null,
-    background: null,
-    surface: null,
-    text: null,
-    textSecondary: null,
-    textLight: null,
-    border: null,
-    error: null,
-    warning: null,
-    success: null,
-    info: null,
-  },
-  space: {
-    none: null,
-    xs: null,
-    sm: null,
-    md: null,
-    lg: null,
-    xl: null,
-    '2xl': null,
-  },
-  radii: {
-    none: null,
-    sm: null,
-    md: null,
-    lg: null,
-    xl: null,
-    full: null,
-  },
-  fonts: {
-    body: null,
-    heading: null,
-    mono: null,
-  },
-  fontSizes: {
-    xs: null,
-    sm: null,
-    md: null,
-    lg: null,
-    xl: null,
-    '2xl': null,
-    '3xl': null,
-    '4xl': null,
-  },
-  fontWeights: {
-    light: null,
-    normal: null,
-    medium: null,
-    semibold: null,
-    bold: null,
-  },
-  lineHeights: {
-    tight: null,
-    normal: null,
-    relaxed: null,
-  },
-  shadows: {
-    none: null,
-    sm: null,
-    md: null,
-    lg: null,
-    xl: null,
-  },
-  maxWidth: null,
-  section: {
-    paddingTop: null,
-    paddingBottom: null,
-  },
-  header: {
-    height: null,
-  },
-  footer: {
-    height: null,
-  },
-}, (value) => `latte-${value}`);

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

@@ -1,74 +0,0 @@
-import { RecipeVariants } from '@vanilla-extract/recipes';
-export declare const actionsRecipe: import('@vanilla-extract/recipes').RuntimeFn<{
-    align: {
-        left: {
-            justifyContent: "flex-start";
-            alignItems: "flex-start";
-        };
-        center: {
-            justifyContent: "center";
-            alignItems: "center";
-        };
-        right: {
-            justifyContent: "flex-end";
-            alignItems: "flex-end";
-        };
-    };
-    direction: {
-        row: {
-            flexDirection: "row";
-        };
-        column: {
-            flexDirection: "column";
-        };
-        'row-reverse': {
-            flexDirection: "row-reverse";
-        };
-        'column-reverse': {
-            flexDirection: "column-reverse";
-        };
-    };
-    spacing: {
-        none: {
-            gap: "0";
-            paddingTop: "0";
-        };
-        xs: {
-            gap: `var(--${string})`;
-            paddingTop: `var(--${string})`;
-        };
-        sm: {
-            gap: `var(--${string})`;
-            paddingTop: `var(--${string})`;
-        };
-        md: {
-            gap: `var(--${string})`;
-            paddingTop: `var(--${string})`;
-        };
-        lg: {
-            gap: `var(--${string})`;
-            paddingTop: `var(--${string})`;
-        };
-        xl: {
-            gap: `var(--${string})`;
-            paddingTop: `var(--${string})`;
-        };
-    };
-    wrap: {
-        true: {
-            flexWrap: "wrap";
-        };
-        false: {
-            flexWrap: "nowrap";
-        };
-    };
-    fullWidth: {
-        true: {
-            width: "100%";
-        };
-        false: {
-            width: "auto";
-        };
-    };
-}>;
-export type ActionsVariants = RecipeVariants<typeof actionsRecipe>;

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

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

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

@@ -1,65 +0,0 @@
-import { RecipeVariants } from '@vanilla-extract/recipes';
-export declare const buttonRecipe: import('@vanilla-extract/recipes').RuntimeFn<{
-    variant: {
-        primary: {
-            backgroundColor: `var(--${string})`;
-            color: `var(--${string})`;
-            ':hover': {
-                backgroundColor: `var(--${string})`;
-            };
-        };
-        secondary: {
-            backgroundColor: `var(--${string})`;
-            color: `var(--${string})`;
-            ':hover': {
-                backgroundColor: `var(--${string})`;
-            };
-        };
-        outline: {
-            backgroundColor: "transparent";
-            color: `var(--${string})`;
-            border: `1px solid var(--${string})`;
-            ':hover': {
-                backgroundColor: `var(--${string})`;
-                borderColor: `var(--${string})`;
-            };
-        };
-        ghost: {
-            backgroundColor: "transparent";
-            color: `var(--${string})`;
-            ':hover': {
-                backgroundColor: `var(--${string})`;
-            };
-        };
-        danger: {
-            backgroundColor: `var(--${string})`;
-            color: `var(--${string})`;
-            ':hover': {
-                opacity: "0.9";
-            };
-        };
-    };
-    size: {
-        sm: {
-            padding: `var(--${string}) var(--${string})`;
-            fontSize: `var(--${string})`;
-            borderRadius: `var(--${string})`;
-        };
-        md: {
-            padding: `var(--${string}) var(--${string})`;
-            fontSize: `var(--${string})`;
-            borderRadius: `var(--${string})`;
-        };
-        lg: {
-            padding: `var(--${string}) var(--${string})`;
-            fontSize: `var(--${string})`;
-            borderRadius: `var(--${string})`;
-        };
-    };
-    fullWidth: {
-        true: {
-            width: "100%";
-        };
-    };
-}>;
-export type ButtonVariants = RecipeVariants<typeof buttonRecipe>;

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

@@ -1,8 +0,0 @@
-import { ButtonVariants } from './Button.css';
-import { Sprinkles } from '../../styles/sprinkles.css';
-export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color'>, Sprinkles, NonNullable<ButtonVariants> {
-    css?: string;
-    isPending?: boolean;
-    asChild?: boolean;
-}
-export declare const Button: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;

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

@@ -1,33 +0,0 @@
-import { RecipeVariants } from '@vanilla-extract/recipes';
-declare const carouselContent: string;
-declare const carouselSlide: string;
-declare const carouselItem: string;
-declare const carouselNav: string;
-declare const carouselNavButton: string;
-declare const carouselBullets: string;
-declare const carouselBullet: string;
-export declare const carouselRecipe: import('@vanilla-extract/recipes').RuntimeFn<{
-    fullWidth: {
-        true: {
-            width: "100vw";
-            marginLeft: `calc((100vw - var(--${string})) / -2)`;
-            marginRight: `calc((100vw - var(--${string})) / -2)`;
-            '@media': {
-                [x: string]: {
-                    marginLeft: `calc(-1 * var(--${string}))`;
-                    marginRight: `calc(-1 * var(--${string}))`;
-                };
-                'screen and (max-width: 1500px)': {
-                    marginLeft: `calc(-1 * var(--${string}))`;
-                    marginRight: `calc(-1 * var(--${string}))`;
-                };
-            };
-        };
-        false: {
-            width: "100%";
-        };
-    };
-}>;
-declare const carouselBulletActive: string;
-export { carouselContent, carouselSlide, carouselItem, carouselNav, carouselNavButton, carouselBullets, carouselBullet, carouselBulletActive };
-export type CarouselVariants = RecipeVariants<typeof carouselRecipe>;

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

@@ -1,15 +0,0 @@
-import { ReactNode } from 'react';
-import { CarouselVariants } from './Carousel.css';
-import { Sprinkles } from '../../styles/sprinkles.css';
-export interface CarouselProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'gap'>, Sprinkles, NonNullable<CarouselVariants> {
-    css?: string;
-    data: ReactNode[];
-    itemsPerView?: number;
-    showNavButtons?: boolean;
-    showBullets?: boolean;
-    autoplay?: boolean;
-    autoplayInterval?: number;
-    gap?: any;
-    as?: 'div' | 'section';
-}
-export declare const Carousel: import('react').ForwardRefExoticComponent<CarouselProps & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -1,104 +0,0 @@
-import { RecipeVariants } from '@vanilla-extract/recipes';
-declare const columnWidths: {
-    1: string;
-    2: string;
-    3: string;
-    4: string;
-    6: string;
-    12: string;
-};
-export declare const columnsRecipe: import('@vanilla-extract/recipes').RuntimeFn<{
-    align: {
-        left: {
-            textAlign: "left";
-            justifyContent: "flex-start";
-        };
-        center: {
-            textAlign: "center";
-            justifyContent: "center";
-        };
-        right: {
-            textAlign: "right";
-            justifyContent: "flex-end";
-        };
-    };
-    spacing: {
-        none: {
-            gap: "0";
-        };
-        sm: {
-            gap: `var(--${string})`;
-            '@media': {
-                [x: string]: {
-                    gap: `var(--${string})`;
-                };
-            };
-        };
-        md: {
-            gap: `var(--${string})`;
-            '@media': {
-                [x: string]: {
-                    gap: `var(--${string})`;
-                };
-            };
-        };
-        lg: {
-            gap: `var(--${string})`;
-            '@media': {
-                [x: string]: {
-                    gap: `var(--${string})`;
-                };
-            };
-        };
-    };
-    wrap: {
-        true: {
-            flexWrap: "wrap";
-        };
-        false: {
-            flexWrap: "nowrap";
-        };
-    };
-    reverse: {
-        true: {
-            '@media': {
-                [x: string]: {
-                    flexDirection: "row-reverse";
-                };
-            };
-        };
-        false: {};
-    };
-    alignItems: {
-        start: {
-            '@media': {
-                [x: string]: {
-                    alignItems: "flex-start";
-                };
-            };
-        };
-        center: {
-            '@media': {
-                [x: string]: {
-                    alignItems: "center";
-                };
-            };
-        };
-        end: {
-            '@media': {
-                [x: string]: {
-                    alignItems: "flex-end";
-                };
-            };
-        };
-        stretch: {
-            '@media': {
-                [x: string]: {
-                    alignItems: "stretch";
-                };
-            };
-        };
-    };
-}>;
-export { columnWidths };
-export type ColumnsVariants = RecipeVariants<typeof columnsRecipe>;

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

@@ -1,8 +0,0 @@
-import { ColumnsVariants, columnWidths } from './Columns.css';
-import { Sprinkles } from '../../styles/sprinkles.css';
-export interface ColumnsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, Sprinkles, NonNullable<ColumnsVariants> {
-    css?: string;
-    columns?: (keyof typeof columnWidths)[];
-    as?: 'div' | 'section' | 'article';
-}
-export declare const Columns: import('react').ForwardRefExoticComponent<ColumnsProps & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -1,15 +0,0 @@
-import { RecipeVariants } from '@vanilla-extract/recipes';
-declare const consentContent: string;
-declare const consentActions: string;
-export declare const consentRecipe: import('@vanilla-extract/recipes').RuntimeFn<{
-    variant: {
-        modal: {};
-        banner: {
-            '::before': {
-                display: "none";
-            };
-        };
-    };
-}>;
-export { consentContent, consentActions };
-export type ConsentCookieVariants = RecipeVariants<typeof consentRecipe>;

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

@@ -1,17 +0,0 @@
-import { ConsentCookieVariants } from './ConsentCookie.css';
-import { Sprinkles } from '../../styles/sprinkles.css';
-export interface ConsentCookieProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, Sprinkles, NonNullable<ConsentCookieVariants> {
-    css?: string;
-    cookieName?: string;
-    cookieExpirationDays?: number;
-    onAccept?: () => void;
-    onReject?: () => void;
-    translations?: {
-        actions: {
-            accept: string;
-            reject: string;
-        };
-    };
-    enableGoogleAnalytics?: boolean;
-}
-export declare const ConsentCookie: import('react').ForwardRefExoticComponent<ConsentCookieProps & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -1,50 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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/stories.d.ts

@@ -1,6 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Footer } from '../../index';
-declare const meta: Meta<typeof Footer>;
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Default: Story;

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

@@ -1,46 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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>>;