@latte-macchiat-io/latte-vanilla-components 0.0.166 → 0.0.168

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

@@ -0,0 +1,113 @@
+import { style } from '@vanilla-extract/css';
+import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
+import { queries } from '../../styles/mediaqueries';
+import { themeContract } from '../../theme';
+
+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/src/components/Button/Button.css.ts

@@ -0,0 +1,119 @@
+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/src/components/Carousel/Carousel.css.ts

@@ -0,0 +1,180 @@
+import { keyframes, style } from '@vanilla-extract/css';
+import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
+import { queries } from '../../styles/mediaqueries';
+import { themeContract } from '../../theme';
+
+const slideTransition = 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/src/components/Columns/Columns.css.ts

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