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

package/package.json

@@ -1,29 +1,17 @@
 {
   "name": "@latte-macchiat-io/latte-vanilla-components",
-  "version": "0.0.176",
+  "version": "0.0.177",
   "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/**/*.stories.ts",
@@ -57,7 +45,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 +54,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 +66,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/dist/components/Actions/Actions.css.ts

@@ -1,113 +0,0 @@
-import { style } from '@vanilla-extract/css';
-import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
-import { themeContract } from '../../theme';
-import { queries } from '../../styles/mediaqueries';
-
-const actionsBase = style({
-  display: 'flex',
-  flexWrap: 'wrap',
-
-  gap: themeContract.space.sm,
-  paddingTop: themeContract.space.sm,
-  width: '100%',
-
-  '@media': {
-    [queries.lg]: {
-      gap: themeContract.space.md,
-      paddingTop: themeContract.space.md,
-    },
-  },
-});
-
-export const actionsRecipe = recipe({
-  base: actionsBase,
-
-  variants: {
-    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: themeContract.space.xs,
-        paddingTop: themeContract.space.xs,
-      },
-      sm: {
-        gap: themeContract.space.sm,
-        paddingTop: themeContract.space.sm,
-      },
-      md: {
-        gap: themeContract.space.md,
-        paddingTop: themeContract.space.md,
-      },
-      lg: {
-        gap: themeContract.space.lg,
-        paddingTop: themeContract.space.lg,
-      },
-      xl: {
-        gap: themeContract.space.xl,
-        paddingTop: themeContract.space.xl,
-      },
-    },
-    wrap: {
-      true: {
-        flexWrap: 'wrap',
-      },
-      false: {
-        flexWrap: 'nowrap',
-      },
-    },
-    fullWidth: {
-      true: {
-        width: '100%',
-
-        // selectors: {
-        //   '& > *': {
-        //     flex: '1',
-        //   },
-        // },
-      },
-      false: {
-        width: 'auto',
-      },
-    },
-  },
-
-  defaultVariants: {
-    align: 'left',
-    direction: 'row',
-    spacing: 'sm',
-    wrap: true,
-    fullWidth: false,
-  },
-});
-
-export type ActionsVariants = RecipeVariants<typeof actionsRecipe>;

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

@@ -1,119 +0,0 @@
-import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
-import { themeContract } from '../../theme';
-
-export const buttonRecipe = recipe({
-  base: {
-    display: 'inline-flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: themeContract.space.md,
-    borderRadius: themeContract.radii.md,
-    border: 'none',
-    cursor: 'pointer',
-    fontFamily: themeContract.fonts.body,
-    fontSize: themeContract.fontSizes.md,
-    fontWeight: '500',
-    lineHeight: themeContract.lineHeights.tight,
-    textDecoration: 'none',
-    transition: 'all 0.2s ease-in-out',
-    outline: 'none',
-
-    ':hover': {
-      transform: 'translateY(-1px)',
-      boxShadow: themeContract.shadows.md,
-    },
-
-    ':active': {
-      transform: 'translateY(0)',
-    },
-
-    ':focus-visible': {
-      outline: '2px solid',
-      outlineColor: themeContract.colors.primary,
-      outlineOffset: '2px',
-    },
-
-    ':disabled': {
-      opacity: '0.5',
-      cursor: 'not-allowed',
-      transform: 'none',
-      boxShadow: 'none',
-    },
-  },
-
-  variants: {
-    variant: {
-      primary: {
-        backgroundColor: themeContract.colors.primary,
-        color: themeContract.colors.background,
-
-        ':hover': {
-          backgroundColor: themeContract.colors.accent,
-        },
-      },
-      secondary: {
-        backgroundColor: themeContract.colors.secondary,
-        color: themeContract.colors.text,
-
-        ':hover': {
-          backgroundColor: themeContract.colors.surface,
-        },
-      },
-      outline: {
-        backgroundColor: 'transparent',
-        color: themeContract.colors.text,
-        border: `1px solid ${themeContract.colors.border}`,
-
-        ':hover': {
-          backgroundColor: themeContract.colors.surface,
-          borderColor: themeContract.colors.primary,
-        },
-      },
-      ghost: {
-        backgroundColor: 'transparent',
-        color: themeContract.colors.text,
-
-        ':hover': {
-          backgroundColor: themeContract.colors.surface,
-        },
-      },
-      danger: {
-        backgroundColor: themeContract.colors.error,
-        color: themeContract.colors.background,
-
-        ':hover': {
-          opacity: '0.9',
-        },
-      },
-    },
-    size: {
-      sm: {
-        padding: `${themeContract.space.xs} ${themeContract.space.sm}`,
-        fontSize: themeContract.fontSizes.sm,
-        borderRadius: themeContract.radii.sm,
-      },
-      md: {
-        padding: `${themeContract.space.sm} ${themeContract.space.md}`,
-        fontSize: themeContract.fontSizes.md,
-        borderRadius: themeContract.radii.md,
-      },
-      lg: {
-        padding: `${themeContract.space.md} ${themeContract.space.lg}`,
-        fontSize: themeContract.fontSizes.lg,
-        borderRadius: themeContract.radii.lg,
-      },
-    },
-    fullWidth: {
-      true: {
-        width: '100%',
-      },
-    },
-  },
-
-  defaultVariants: {
-    variant: 'primary',
-    size: 'md',
-  },
-});
-
-export type ButtonVariants = RecipeVariants<typeof buttonRecipe>;

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

@@ -1,179 +0,0 @@
-import { keyframes, style } from '@vanilla-extract/css';
-import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
-import { queries } from '../../styles/mediaqueries';
-import { themeContract } from '../../theme';
-keyframes({
-  '0%': { transform: 'translateX(0)' },
-  '100%': { transform: 'translateX(var(--slide-offset))' },
-});
-
-const carouselBase = style({
-  position: 'relative',
-  overflow: 'hidden',
-  width: '100%',
-});
-
-const carouselContent = style({
-  width: '100%',
-  position: 'relative',
-});
-
-const carouselSlide = style({
-  display: 'flex',
-  position: 'relative',
-  transition: 'transform 0.3s ease-in-out',
-  willChange: 'transform',
-});
-
-const carouselItem = style({
-  width: '100%',
-  display: 'flex',
-  position: 'relative',
-  alignItems: 'stretch',
-  flexShrink: 0,
-});
-
-const carouselNav = style({
-  position: 'absolute',
-  bottom: 0,
-  left: 0,
-  right: 0,
-  zIndex: 30,
-  width: '100%',
-  maxWidth: themeContract.maxWidth,
-  display: 'flex',
-  justifyContent: 'flex-end',
-  pointerEvents: 'none',
-  gap: themeContract.space.sm,
-  padding: themeContract.space.md,
-});
-
-const carouselNavButton = style({
-  border: 'none',
-  borderRadius: themeContract.radii.full,
-  backgroundColor: themeContract.colors.background,
-  color: themeContract.colors.text,
-  padding: themeContract.space.sm,
-  cursor: 'pointer',
-  pointerEvents: 'auto',
-  transition: 'all 0.3s ease-in-out',
-  boxShadow: themeContract.shadows.md,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  width: '48px',
-  height: '48px',
-
-  // ':hover': {
-  //   transform: 'scale(1.1)',
-  //   backgroundColor: themeContract.colors.primary,
-  //   color: themeContract.colors.background,
-  // },
-
-  // ':focus': {
-  //   outline: '2px solid',
-  //   outlineColor: themeContract.colors.primary,
-  //   outlineOffset: '2px',
-  // },
-
-  // ':disabled': {
-  //   opacity: '0.5',
-  //   cursor: 'not-allowed',
-  //   transform: 'none',
-  // },
-  // selectors: {
-  //   ':disabled:hover': {
-  //     transform: 'none',
-  //     backgroundColor: themeContract.colors.background,
-  //     color: themeContract.colors.text,
-  //   },
-  // },
-});
-
-const carouselBullets = style({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  gap: themeContract.space.md,
-  marginTop: themeContract.space.lg,
-
-  '@media': {
-    [queries.lg]: {
-      marginTop: themeContract.space.xl,
-    },
-  },
-});
-
-const carouselBullet = style({
-  width: '12px',
-  height: '12px',
-  borderRadius: themeContract.radii.full,
-  backgroundColor: themeContract.colors.border,
-  cursor: 'pointer',
-  transition: 'all 0.3s ease-in-out',
-  border: 'none',
-
-  ':hover': {
-    transform: 'scale(1.2)',
-    backgroundColor: themeContract.colors.primary,
-  },
-
-  ':focus': {
-    outline: '2px solid',
-    outlineColor: themeContract.colors.primary,
-    outlineOffset: '2px',
-  },
-
-  '@media': {
-    [queries.md]: {
-      width: '16px',
-      height: '16px',
-    },
-  },
-});
-
-export const carouselRecipe = recipe({
-  base: carouselBase,
-
-  variants: {
-    fullWidth: {
-      true: {
-        width: '100vw',
-        marginLeft: `calc((100vw - ${themeContract.maxWidth}) / -2)`,
-        marginRight: `calc((100vw - ${themeContract.maxWidth}) / -2)`,
-
-        '@media': {
-          'screen and (max-width: 1500px)': {
-            marginLeft: `calc(-1 * ${themeContract.space.md})`,
-            marginRight: `calc(-1 * ${themeContract.space.md})`,
-          },
-          [queries.md]: {
-            marginLeft: `calc(-1 * ${themeContract.space.lg})`,
-            marginRight: `calc(-1 * ${themeContract.space.lg})`,
-          },
-          [queries.lg]: {
-            marginLeft: `calc(-1 * ${themeContract.space.xl})`,
-            marginRight: `calc(-1 * ${themeContract.space.xl})`,
-          },
-        },
-      },
-      false: {
-        width: '100%',
-      },
-    },
-  },
-
-  defaultVariants: {
-    fullWidth: false,
-  },
-});
-
-const carouselBulletActive = style({
-  backgroundColor: themeContract.colors.primary,
-  pointerEvents: 'none',
-  opacity: 1,
-});
-
-export { carouselContent, carouselSlide, carouselItem, carouselNav, carouselNavButton, carouselBullets, carouselBullet, carouselBulletActive };
-
-export type CarouselVariants = RecipeVariants<typeof carouselRecipe>;

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

@@ -1,185 +0,0 @@
-import { style } from '@vanilla-extract/css';
-import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
-import { queries } from '../../styles/mediaqueries';
-import { themeContract } from '../../theme';
-
-const columnsBase = style({
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'flex-start',
-  justifyContent: 'flex-start',
-  width: '100%',
-  gap: themeContract.space.md,
-
-  '@media': {
-    [queries.md]: {
-      flexDirection: 'row',
-      alignItems: 'stretch',
-      gap: themeContract.space.lg,
-    },
-    [queries.lg]: {
-      gap: themeContract.space.xl,
-    },
-  },
-});
-
-// Generate column width utilities
-const columnWidths = {
-  1: style({
-    '@media': {
-      [queries.md]: {
-        flex: '0 0 100%',
-        maxWidth: '100%',
-      },
-    },
-  }),
-  2: style({
-    '@media': {
-      [queries.md]: {
-        flex: '0 0 50%',
-        maxWidth: '50%',
-      },
-    },
-  }),
-  3: style({
-    '@media': {
-      [queries.md]: {
-        flex: '0 0 33.333333%',
-        maxWidth: '33.333333%',
-      },
-    },
-  }),
-  4: style({
-    '@media': {
-      [queries.md]: {
-        flex: '0 0 25%',
-        maxWidth: '25%',
-      },
-    },
-  }),
-  6: style({
-    '@media': {
-      [queries.md]: {
-        flex: '0 0 16.666667%',
-        maxWidth: '16.666667%',
-      },
-    },
-  }),
-  12: style({
-    '@media': {
-      [queries.md]: {
-        flex: '0 0 8.333333%',
-        maxWidth: '8.333333%',
-      },
-    },
-  }),
-};
-
-export const columnsRecipe = recipe({
-  base: columnsBase,
-
-  variants: {
-    align: {
-      left: {
-        textAlign: 'left',
-        justifyContent: 'flex-start',
-      },
-      center: {
-        textAlign: 'center',
-        justifyContent: 'center',
-      },
-      right: {
-        textAlign: 'right',
-        justifyContent: 'flex-end',
-      },
-    },
-    spacing: {
-      none: {
-        gap: '0',
-      },
-      sm: {
-        gap: themeContract.space.sm,
-        '@media': {
-          [queries.md]: {
-            gap: themeContract.space.md,
-          },
-        },
-      },
-      md: {
-        gap: themeContract.space.md,
-        '@media': {
-          [queries.md]: {
-            gap: themeContract.space.lg,
-          },
-        },
-      },
-      lg: {
-        gap: themeContract.space.lg,
-        '@media': {
-          [queries.md]: {
-            gap: themeContract.space.xl,
-          },
-        },
-      },
-    },
-    wrap: {
-      true: {
-        flexWrap: 'wrap',
-      },
-      false: {
-        flexWrap: 'nowrap',
-      },
-    },
-    reverse: {
-      true: {
-        '@media': {
-          [queries.md]: {
-            flexDirection: 'row-reverse',
-          },
-        },
-      },
-      false: {},
-    },
-    alignItems: {
-      start: {
-        '@media': {
-          [queries.md]: {
-            alignItems: 'flex-start',
-          },
-        },
-      },
-      center: {
-        '@media': {
-          [queries.md]: {
-            alignItems: 'center',
-          },
-        },
-      },
-      end: {
-        '@media': {
-          [queries.md]: {
-            alignItems: 'flex-end',
-          },
-        },
-      },
-      stretch: {
-        '@media': {
-          [queries.md]: {
-            alignItems: 'stretch',
-          },
-        },
-      },
-    },
-  },
-
-  defaultVariants: {
-    align: 'left',
-    spacing: 'md',
-    wrap: true,
-    reverse: false,
-    alignItems: 'stretch',
-  },
-});
-
-export { columnWidths };
-export type ColumnsVariants = RecipeVariants<typeof columnsRecipe>;