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

package/package.json

@@ -1,32 +1,22 @@
 {
   "name": "@latte-macchiat-io/latte-vanilla-components",
-  "version": "0.0.176",
+  "version": "0.0.178",
   "description": "Beautiful components for amazing projects, with a touch of Vanilla 🥤",
   "type": "module",
-  "main": "./dist/index.cjs.js",
-  "module": "./dist/index.es.js",
-  "types": "./dist/types/index.d.ts",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
   "sideEffects": false,
   "exports": {
-    ".": {
-      "types": "./dist/types/index.d.ts",
-      "import": "./dist/index.es.js",
-      "require": "./dist/index.cjs.js"
-    },
-    "./css": {
-      "types": "./dist/types/css/index.d.ts",
-      "import": "./dist/css/index.js",
-      "require": "./dist/css/index.cjs"
-    },
+    ".": "./src/index.ts",
     "./*.css.ts": "./src/*.css.ts",
-    "./src/*": "./src/*",
-    "./dist/*": "./dist/*"
+    "./src/*": "./src/*"
   },
   "files": [
-    "dist",
     "src/**/*.css.ts",
     "src/**/*.ts",
+    "src/**/*.tsx",
     "!src/**/*.stories.ts",
+    "!src/**/stories.ts",
     "!src/**/*.test.ts"
   ],
   "peerDependencies": {
@@ -57,7 +47,6 @@
     "@vanilla-extract/dynamic": "^2.1.5",
     "@vanilla-extract/recipes": "^0.5.7",
     "@vanilla-extract/sprinkles": "^1.6.5",
-    "@vitejs/plugin-react": "^5.0.2",
     "clsx": "^2.1.1",
     "eslint": "^9.15.0",
     "eslint-config-prettier": "^10.0.1",
@@ -67,9 +56,7 @@
     "prettier": "^3.4.2",
     "storybook": "^8.5.2",
     "typescript": "5.6.3",
-    "typescript-eslint": "^8.21.0",
-    "vite": "^7.1.4",
-    "vite-plugin-dts": "^4.5.4"
+    "typescript-eslint": "^8.21.0"
   },
   "engines": {
     "node": ">=20.9.0",
@@ -81,7 +68,7 @@
     ]
   },
   "scripts": {
-    "build": "vite build",
+    "build": "echo \"Source-only distribution - no build needed\"",
     "test": "echo \"Error: no test specified\" && exit 1",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",

package/src/assets/styles/mediaqueries.tsx

@@ -0,0 +1,24 @@
+export const breakpoints1 = [
+  640 /* Small devices (portrait tablets and large phones, 640px and up) */, 768 /* Medium devices (landscape tablets, 768px and up) */,
+  1024 /* Large devices (laptops/desktops, 1024px and up) */, 1680 /* Extra large devices (large laptops and desktops, 1280px and up) */,
+];
+
+export const mq = breakpoints1.map((bp) => `(min-width: ${bp}px)`);
+
+export const breakpoints = {
+  mobile: 0, // Mobile par défaut
+  sm: 640, // Mobile large
+  md: 768, // Tablette
+  lg: 1024, // Petit laptop
+  xl: 1280, // Desktop
+  '2xl': 1536, // Grand écran
+} as const;
+
+export const queries = {
+  mobile: `screen and (min-width: ${breakpoints.mobile}px)`,
+  sm: `screen and (min-width: ${breakpoints.sm}px)`,
+  md: `screen and (min-width: ${breakpoints.md}px)`,
+  lg: `screen and (min-width: ${breakpoints.lg}px)`,
+  xl: `screen and (min-width: ${breakpoints.xl}px)`,
+  '2xl': `screen and (min-width: ${breakpoints['2xl']}px)`,
+};

package/src/components/Actions/Actions.tsx

@@ -0,0 +1,132 @@
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { actionsRecipe, type ActionsVariants } from './Actions.css';
+import { sprinkles, type Sprinkles } from '../../styles/sprinkles.css';
+
+export interface ActionsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, Sprinkles, NonNullable<ActionsVariants> {
+  css?: string;
+  as?: 'div' | 'section' | 'footer';
+}
+
+export const Actions = forwardRef<HTMLDivElement, ActionsProps>(
+  (
+    {
+      children,
+      align,
+      direction,
+      spacing,
+      wrap,
+      fullWidth,
+      as: Component = 'div',
+      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 (
+      <Component
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        ref={ref as any}
+        className={clsx(
+          actionsRecipe({ align, direction, spacing, wrap, fullWidth }),
+          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}>
+        {children}
+      </Component>
+    );
+  }
+);
+
+Actions.displayName = 'Actions';

package/src/components/Actions/export.tsx

@@ -0,0 +1,4 @@
+// export { Actions } from '.';
+// export type { ActionsProps } from '.';
+
+// export { styles as ActionsStyles } from './styles.css';

package/src/components/{Main/stories.ts → Actions/stories.tsx}

@@ -1,13 +1,15 @@
 // import type { Meta, StoryObj } from '@storybook/react';
-//
+
+// import { Actions, Button } from '../../index';
+// import { actionsStyle } from './styles.css';
+
 // import { defaultTheme } from '../../assets/styles/default-theme';
-// import { Main } from '.';
-// import { mainStyle } from './styles.css';
-//
+// import { buttonStyle } from '../Button/styles.css';
+
 // // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-// const meta = {
-//   title: 'Latte Components / Layout / Main',
-//   component: Main,
+// const meta: Meta<typeof Actions> = {
+//   title: 'Latte Components / 3. Buttons / Actions',
+//   component: Actions,
 //   parameters: {
 //     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
 //     layout: 'centered',
@@ -17,17 +19,16 @@
 //   // 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
-// } satisfies Meta<typeof Main>;
-//
+// };
+
 // 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: {
-//     className: mainStyle,
 //     theme: defaultTheme,
-//     children:
-//       'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+//     className: actionsStyle,
+//     children: <Button className={buttonStyle}>Button</Button>,
 //   },
 // };

package/src/components/Button/Button.tsx

@@ -0,0 +1,132 @@
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { buttonRecipe, type ButtonVariants } from './Button.css';
+import { sprinkles, Sprinkles } from '../../styles/sprinkles.css';
+
+export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color'>, Sprinkles, NonNullable<ButtonVariants> {
+  css?: string;
+  isPending?: boolean;
+  asChild?: boolean;
+}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      variant,
+      size,
+      fullWidth,
+      isPending = false,
+      disabled,
+      css,
+      className,
+      children,
+      // 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 (
+      <button
+        ref={ref}
+        className={clsx(
+          buttonRecipe({ variant, size, fullWidth }),
+          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
+        )}
+        disabled={disabled || isPending}
+        {...htmlProps}>
+        {isPending ? 'Loading...' : children}
+      </button>
+    );
+  }
+);
+
+Button.displayName = 'Button';

package/src/components/Button/export.tsx

@@ -0,0 +1,5 @@
+// export { Button } from './Button';
+// export type { ButtonProps } from '.';
+// export { Type as ButtonType, Size as ButtonSize, Style as ButtonStyle, Variant as ButtonVariant } from './types';
+
+// export { styles as ButtonStyles } from './styles.css';