@latte-macchiat-io/latte-vanilla-components 0.0.190 → 0.0.192

package/README.md

@@ -1,7 +1,9 @@
-# 🥤 Latte Vanilla Components
+# 🥤 Latte Vanilla Components [![npm version](https://img.shields.io/npm/v/@latte-macchiat-io/latte-vanilla-components?style=flat-square)](https://www.npmjs.com/package/@latte-macchiat-io/latte-vanilla-components)
 
-Beautiful, type-safe React components powered by Vanilla Extract CSS. Build modern interfaces with a professional design
-system that's both powerful and easy to use.
+Beautiful, type-safe React components powered by Vanilla Extract CSS for amazing projects, with a touch of Vanilla 🥤
+
+Intended for internal use by the 👩‍💻🧑‍💻 [latte-macchiat.io](https://latte-macchiat.io) team, we can't offer official support, but feel free to reach out
+with questions, feedback or project ideas!
 
 ## ✨ Features
 
@@ -12,6 +14,14 @@ system that's both powerful and easy to use.
 - ⚡ **Developer Experience** - Hot reloading, IntelliSense, documentation
 - 🎯 **Production Ready** - Optimized builds, minimal bundle size
 
+## 🤓 Philosophy
+
+This library is shipped as raw code (ESM + TypeScript) to be compiled in your project, allowing full
+customization and tree-shaking. It is not a pre-built design system, but rather a set of building blocks
+to create your own unique designs.
+
+You will need to set up Vanilla Extract in your build system (Next.js, Vite, etc.) to use this library.
+
 ## 📦 Installation
 
 ```bash
@@ -30,7 +40,7 @@ yarn add @latte-macchiat-io/latte-vanilla-components
 
 ```typescript
 // src/styles/theme.css.ts
-import {createDarkTheme, createLightTheme} from "@latte-macchiat-io/latte-vanilla-components";
+import { createDarkTheme, createLightTheme } from "@latte-macchiat-io/latte-vanilla-components";
 
 // Create and apply the default light theme (minimal setup)
 createLightTheme();
@@ -221,8 +231,8 @@ All components are mobile-first and responsive:
 
 ```typescript
 // next.config.js
-import type {NextConfig} from "next";
-import {createVanillaExtractPlugin} from "@vanilla-extract/next-plugin";
+import type { NextConfig } from "next";
+import { createVanillaExtractPlugin } from "@vanilla-extract/next-plugin";
 
 const nextConfig: NextConfig = {
   /* config options here */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latte-macchiat-io/latte-vanilla-components",
-  "version": "0.0.190",
+  "version": "0.0.192",
   "description": "Beautiful components for amazing projects, with a touch of Vanilla 🥤",
   "type": "module",
   "main": "./src/index.ts",
@@ -65,6 +65,9 @@
       "plugin:storybook/recommended"
     ]
   },
+  "dependencies": {
+    "@vanilla-extract/css-utils": "^0.1.6"
+  },
   "scripts": {
     "build": "echo \"Source-only distribution - no build needed\"",
     "test": "echo \"Error: no test specified\" && exit 1",

package/src/components/Actions/index.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+
+import { actionsRecipe, type ActionsVariants } from './styles.css';
+
+export type ActionsProps = React.HTMLAttributes<HTMLDivElement> &
+  ActionsVariants & {
+    css?: string;
+    children: React.ReactNode;
+  };
+
+export const Actions = forwardRef<HTMLDivElement, ActionsProps>(({ align, direction, css, className, children }, ref) => (
+  <div ref={ref} className={clsx(actionsRecipe({ align, direction }), css, className)}>
+    {children}
+  </div>
+));
+
+Actions.displayName = 'Actions';

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

@@ -0,0 +1,54 @@
+import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
+
+import { themeContract } from '../../theme/contract.css';
+import { generateResponsiveMedia } from '../../utils/generateResponsiveMedia';
+
+export const actionsRecipe = recipe({
+  base: [
+    {
+      width: '100%',
+      display: 'flex',
+      flexWrap: 'wrap',
+
+      '@media': {
+        ...generateResponsiveMedia({
+          gap: themeContract.actions.gap,
+          paddingTop: themeContract.actions.paddingBottom,
+          paddingBottom: themeContract.actions.paddingBottom,
+        }),
+      },
+    },
+  ],
+
+  variants: {
+    align: {
+      left: {
+        alignItems: 'flex-start',
+        justifyContent: 'flex-start',
+      },
+      center: {
+        alignItems: 'center',
+        justifyContent: 'center',
+      },
+      right: {
+        alignItems: 'flex-end',
+        justifyContent: 'flex-end',
+      },
+    },
+    direction: {
+      row: {
+        flexDirection: 'row',
+      },
+      column: {
+        flexDirection: 'column',
+      },
+    },
+  },
+
+  defaultVariants: {
+    align: 'left',
+    direction: 'row',
+  },
+});
+
+export type ActionsVariants = RecipeVariants<typeof actionsRecipe>;

package/src/components/Button/index.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import { clsx } from 'clsx';
+import { type ComponentPropsWithoutRef, forwardRef } from 'react';
+
+import { buttonRecipe, type ButtonVariants } from './styles.css';
+
+export type ButtonProps = ComponentPropsWithoutRef<'button'> &
+  ButtonVariants & {
+    css?: string;
+    isPending?: boolean;
+    isDisabled?: boolean;
+  };
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ variant, style, size, fullWidth, isPending = false, isDisabled, css, className, children, onClick }, ref) => {
+    return (
+      <button
+        ref={ref}
+        onClick={onClick}
+        disabled={isDisabled || isPending}
+        className={clsx(buttonRecipe({ variant, style, size, fullWidth }), css, className)}>
+        {isPending ? 'Loading…' : children}
+      </button>
+    );
+  }
+);
+
+Button.displayName = 'Button';

package/src/components/Button/stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import React from 'react';
-import { Button } from './Button';
-import { Section } from '../Section/Section';
+import { Section } from '../Section';
+import { Button } from '.';
 
 const meta: Meta<typeof Button> = {
   title: 'Interactive Components/Button',
@@ -74,13 +74,6 @@ export const Secondary: Story = {
   },
 };
 
-export const Ghost: Story = {
-  args: {
-    variant: 'ghost',
-    children: 'Ghost Button',
-  },
-};
-
 // Size Variants
 export const Small: Story = {
   args: {
@@ -141,7 +134,6 @@ export const AllVariants: Story = {
       <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap', alignItems: 'center' }}>
         <Button variant="primary">Primary</Button>
         <Button variant="secondary">Secondary</Button>
-        <Button variant="ghost">Ghost</Button>
       </div>
     </Section>
   ),
@@ -202,15 +194,12 @@ export const InteractiveExample: Story = {
           <div style={{ display: 'flex', gap: '0.5rem' }}>
             <Button variant="primary">Save</Button>
             <Button variant="secondary">Cancel</Button>
-            <Button variant="danger">Delete</Button>
           </div>
         </div>
 
         <div>
           <h3>Navigation</h3>
           <div style={{ display: 'flex', gap: '0.5rem' }}>
-            <Button variant="ghost">← Back</Button>
-            <Button variant="ghost">Skip</Button>
             <Button variant="primary">Next →</Button>
           </div>
         </div>
@@ -231,15 +220,8 @@ export const WithCustomStyling: Story = {
   render: () => (
     <Section>
       <div style={{ display: 'flex', gap: '1rem', flexDirection: 'column' }}>
-        <Button variant="primary" borderRadius="full" padding="lg">
-          Rounded Button
-        </Button>
-        <Button variant="secondary" fontSize="lg" fontWeight="bold">
-          Large Text Button
-        </Button>
-        <Button variant="ghost" boxShadow="lg">
-          Shadow Button
-        </Button>
+        <Button variant="primary">Rounded Button</Button>
+        <Button variant="secondary">Large Text Button</Button>
       </div>
     </Section>
   ),

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

@@ -0,0 +1,131 @@
+import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
+
+import { themeContract } from '../../theme/contract.css';
+import { generateResponsiveMedia } from '../../utils/generateResponsiveMedia';
+
+export const buttonRecipe = recipe({
+  base: {
+    border: 'none',
+    outline: 'none',
+    cursor: 'pointer',
+    alignItems: 'center',
+    textDecoration: 'none',
+    display: 'inline-flex',
+    justifyContent: 'center',
+
+    minWidth: themeContract.button.minWidth,
+    fontWeight: themeContract.button.fontWeight,
+    transition: themeContract.button.transition,
+    fontFamily: themeContract.button.fontFamily,
+    borderRadius: themeContract.button.borderRadius,
+    letterSpacing: themeContract.button.letterSpacing,
+
+    ':hover': {
+      opacity: '0.8',
+    },
+
+    ':active': {},
+
+    ':focus-visible': {},
+
+    ':disabled': {
+      opacity: '0.5',
+      pointerEvents: 'none',
+    },
+  },
+
+  variants: {
+    variant: {
+      primary: {
+        color: themeContract.button.variant.primary.color,
+        backgroundColor: themeContract.button.variant.primary.backgroundColor,
+      },
+
+      secondary: {
+        color: themeContract.button.variant.secondary.color,
+        backgroundColor: themeContract.button.variant.secondary.backgroundColor,
+      },
+    },
+
+    style: {
+      outline: {
+        backgroundColor: 'transparent',
+      },
+    },
+
+    size: {
+      sm: [
+        {
+          fontSize: themeContract.fontSizes.sm,
+
+          '@media': {
+            ...generateResponsiveMedia({
+              paddingTop: themeContract.button.size.small.paddingTop,
+              paddingLeft: themeContract.button.size.small.paddingLeft,
+              paddingRight: themeContract.button.size.small.paddingRight,
+              paddingBottom: themeContract.button.size.small.paddingBottom,
+            }),
+          },
+        },
+      ],
+      md: [
+        {
+          fontSize: themeContract.fontSizes.md,
+
+          '@media': {
+            ...generateResponsiveMedia({
+              paddingTop: themeContract.button.size.medium.paddingTop,
+              paddingLeft: themeContract.button.size.medium.paddingLeft,
+              paddingRight: themeContract.button.size.medium.paddingRight,
+              paddingBottom: themeContract.button.size.medium.paddingBottom,
+            }),
+          },
+        },
+      ],
+      lg: [
+        {
+          fontSize: themeContract.fontSizes.lg,
+
+          '@media': {
+            ...generateResponsiveMedia({
+              paddingTop: themeContract.button.size.large.paddingTop,
+              paddingLeft: themeContract.button.size.large.paddingLeft,
+              paddingRight: themeContract.button.size.large.paddingRight,
+              paddingBottom: themeContract.button.size.large.paddingBottom,
+            }),
+          },
+        },
+      ],
+    },
+
+    fullWidth: {
+      true: {
+        width: '100%',
+      },
+    },
+  },
+
+  compoundVariants: [
+    {
+      variants: { variant: 'primary', style: 'outline' },
+      style: {
+        color: themeContract.button.variant.primary.backgroundColor,
+        border: `1px solid ${themeContract.button.variant.primary.backgroundColor}`,
+      },
+    },
+    {
+      variants: { variant: 'secondary', style: 'outline' },
+      style: {
+        color: themeContract.button.variant.secondary.backgroundColor,
+        border: `1px solid ${themeContract.button.variant.secondary.backgroundColor}`,
+      },
+    },
+  ],
+
+  defaultVariants: {
+    size: 'md',
+    variant: 'primary',
+  },
+});
+
+export type ButtonVariants = RecipeVariants<typeof buttonRecipe>;

package/src/components/Carousel/{Carousel.tsx → index.tsx}

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { clsx } from 'clsx';
 import { forwardRef, ReactNode, useEffect, useRef, useState } from 'react';
+
 import {
   carouselBullet,
   carouselBulletActive,
@@ -12,10 +13,10 @@ import {
   carouselRecipe,
   carouselSlide,
   type CarouselVariants,
-} from './Carousel.css';
+} from './styles.css';
+
 import { breakpoints } from '../../styles/mediaqueries';
-import { sprinkles, type Sprinkles } from '../../styles/sprinkles.css';
-import { Icon } from '../Icon/Icon';
+import { Icon } from '../Icon';
 
 interface UseWindowSizeReturn {
   width: number | undefined;
@@ -45,7 +46,7 @@ const useWindowSize = (): UseWindowSizeReturn => {
   return windowSize;
 };
 
-export interface CarouselProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'gap'>, Sprinkles, NonNullable<CarouselVariants> {
+export interface CarouselProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'gap'>, NonNullable<CarouselVariants> {
   css?: string;
   data: ReactNode[];
   itemsPerView?: number;
@@ -53,8 +54,7 @@ export interface CarouselProps extends Omit<React.HTMLAttributes<HTMLDivElement>
   showBullets?: boolean;
   autoplay?: boolean;
   autoplayInterval?: number;
-  gap?: any;
-  as?: 'div' | 'section';
+  gap?: number; // simple px value
 }
 
 export const Carousel = forwardRef<HTMLDivElement, CarouselProps>(
@@ -67,53 +67,9 @@ export const Carousel = forwardRef<HTMLDivElement, CarouselProps>(
       autoplay = false,
       autoplayInterval = 3000,
       gap = 16,
-      fullWidth,
-      as: Component = 'div',
+      isFullWidth,
       css,
       className,
-      // Extract sprinkles props
-      margin,
-      marginTop,
-      marginBottom,
-      marginLeft,
-      marginRight,
-      padding,
-      paddingTop,
-      paddingBottom,
-      paddingLeft,
-      paddingRight,
-      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
@@ -129,7 +85,7 @@ export const Carousel = forwardRef<HTMLDivElement, CarouselProps>(
     const isTablet = windowWidth !== undefined && windowWidth > breakpoints.md;
     const isDesktop = windowWidth !== undefined && windowWidth > breakpoints.lg;
 
-    // Calculate visible items based on screen size
+    // 🔹 Adapter le nombre d’items visibles selon le viewport
     useEffect(() => {
       if (isDesktop) {
         setVisibleItems(itemsPerView);
@@ -140,7 +96,7 @@ export const Carousel = forwardRef<HTMLDivElement, CarouselProps>(
       }
     }, [isTablet, isDesktop, itemsPerView]);
 
-    // Calculate item width
+    // 🔹 Calcul largeur d’un item
     useEffect(() => {
       const calculateItemWidth = () => {
         if (carouselRef.current) {
@@ -155,7 +111,7 @@ export const Carousel = forwardRef<HTMLDivElement, CarouselProps>(
       return () => window.removeEventListener('resize', calculateItemWidth);
     }, [visibleItems, gap]);
 
-    // Autoplay functionality
+    // 🔹 Autoplay
     useEffect(() => {
       if (!autoplay) return;
 
@@ -169,7 +125,7 @@ export const Carousel = forwardRef<HTMLDivElement, CarouselProps>(
       return () => clearInterval(interval);
     }, [autoplay, autoplayInterval, data.length, visibleItems]);
 
-    // Touch/swipe handling
+    // 🔹 Swipe mobile
     useEffect(() => {
       const carousel = carouselRef.current;
       if (!carousel) return;
@@ -192,10 +148,8 @@ export const Carousel = forwardRef<HTMLDivElement, CarouselProps>(
 
         if (Math.abs(diff) > swipeThreshold) {
           if (diff > 0) {
-            // Swipe left - next
             handleNext();
           } else {
-            // Swipe right - previous
             handlePrevious();
           }
         }
@@ -228,65 +182,14 @@ export const Carousel = forwardRef<HTMLDivElement, CarouselProps>(
     const maxIndex = Math.max(0, data.length - visibleItems);
 
     return (
-      <Component
-        ref={ref as any}
-        className={clsx(
-          carouselRecipe({ fullWidth }),
-          sprinkles({
-            margin,
-            marginTop,
-            marginBottom,
-            marginLeft,
-            marginRight,
-            padding,
-            paddingTop,
-            paddingBottom,
-            paddingLeft,
-            paddingRight,
-            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}>
+      <div ref={ref as any} className={clsx(carouselRecipe({ isFullWidth }), css, className)} {...htmlProps}>
         <div ref={carouselRef} className={carouselContent}>
           <div
             ref={slideRef}
             className={carouselSlide}
             style={{
-              transform: `translateX(${translateX}px)`,
               gap: `${gap}px`,
+              transform: `translateX(${translateX}px)`,
             }}>
             {data.map((item, index) => (
               <div key={index} className={carouselItem} style={{ width: `${itemWidth}px` }}>
@@ -299,10 +202,10 @@ export const Carousel = forwardRef<HTMLDivElement, CarouselProps>(
         {showNavButtons && (
           <div className={carouselNav}>
             <button type="button" className={carouselNavButton} onClick={handlePrevious} disabled={currentIndex === 0} aria-label="Previous slide">
-              <Icon icon="arrowBack" size="md" />
+              <Icon icon="arrowBack" />
             </button>
             <button type="button" className={carouselNavButton} onClick={handleNext} disabled={currentIndex >= maxIndex} aria-label="Next slide">
-              <Icon icon="arrowForward" size="md" />
+              <Icon icon="arrowForward" />
             </button>
           </div>
         )}
@@ -313,14 +216,14 @@ export const Carousel = forwardRef<HTMLDivElement, CarouselProps>(
               <button
                 key={index}
                 type="button"
-                className={clsx(carouselBullet, index === currentIndex && carouselBulletActive)}
-                onClick={() => handleBulletClick(index)}
                 aria-label={`Go to slide ${index + 1}`}
+                onClick={() => handleBulletClick(index)}
+                className={clsx(carouselBullet, index === currentIndex && carouselBulletActive)}
               />
             ))}
           </div>
         )}
-      </Component>
+      </div>
     );
   }
 );