@latte-macchiat-io/latte-vanilla-components 0.0.187 → 0.0.188

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latte-macchiat-io/latte-vanilla-components",
-  "version": "0.0.187",
+  "version": "0.0.188",
   "description": "Beautiful components for amazing projects, with a touch of Vanilla 🥤",
   "type": "module",
   "main": "./src/index.ts",
@@ -47,6 +47,7 @@
     "clsx": "^2.1.1",
     "eslint": "^9.15.0",
     "eslint-config-prettier": "^10.0.1",
+    "eslint-import-resolver-typescript": "^4.4.4",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-storybook": "^9.1.5",

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

@@ -1,7 +1,7 @@
 import { style } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
-import { themeContract } from '../../theme';
 import { queries } from '../../styles/mediaqueries';
+import { themeContract } from '../../themes/contract.css';
 
 const actionsBase = style({
   display: 'flex',

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

@@ -1,5 +1,5 @@
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
-import { themeContract } from '../../theme';
+import { themeContract } from '../../themes/contract.css';
 
 export const buttonRecipe = recipe({
   base: {

package/src/components/Button/stories.tsx

@@ -81,18 +81,11 @@ export const Ghost: Story = {
   },
 };
 
-export const Destructive: Story = {
-  args: {
-    variant: 'destructive',
-    children: 'Destructive Button',
-  },
-};
-
 // Size Variants
 export const Small: Story = {
   args: {
     variant: 'primary',
-    size: 'small',
+    size: 'sm',
     children: 'Small Button',
   },
 };
@@ -100,7 +93,7 @@ export const Small: Story = {
 export const Medium: Story = {
   args: {
     variant: 'primary',
-    size: 'medium',
+    size: 'md',
     children: 'Medium Button',
   },
 };
@@ -108,7 +101,7 @@ export const Medium: Story = {
 export const Large: Story = {
   args: {
     variant: 'primary',
-    size: 'large',
+    size: 'lg',
     children: 'Large Button',
   },
 };
@@ -149,7 +142,6 @@ export const AllVariants: Story = {
         <Button variant="primary">Primary</Button>
         <Button variant="secondary">Secondary</Button>
         <Button variant="ghost">Ghost</Button>
-        <Button variant="destructive">Destructive</Button>
       </div>
     </Section>
   ),
@@ -167,13 +159,13 @@ export const AllSizes: Story = {
   render: () => (
     <Section>
       <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
-        <Button variant="primary" size="small">
+        <Button variant="primary" size="sm">
           Small
         </Button>
-        <Button variant="primary" size="medium">
+        <Button variant="primary" size="md">
           Medium
         </Button>
-        <Button variant="primary" size="large">
+        <Button variant="primary" size="lg">
           Large
         </Button>
       </div>
@@ -196,10 +188,10 @@ export const InteractiveExample: Story = {
         <div>
           <h3>Call to Action</h3>
           <div style={{ display: 'flex', gap: '1rem' }}>
-            <Button variant="primary" size="large">
+            <Button variant="primary" size="lg">
               Get Started
             </Button>
-            <Button variant="secondary" size="large">
+            <Button variant="secondary" size="lg">
               Learn More
             </Button>
           </div>
@@ -210,7 +202,7 @@ export const InteractiveExample: Story = {
           <div style={{ display: 'flex', gap: '0.5rem' }}>
             <Button variant="primary">Save</Button>
             <Button variant="secondary">Cancel</Button>
-            <Button variant="destructive">Delete</Button>
+            <Button variant="danger">Delete</Button>
           </div>
         </div>
 

package/src/components/Carousel/Carousel.css.ts

@@ -1,7 +1,7 @@
 import { keyframes, style } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 import { queries } from '../../styles/mediaqueries';
-import { themeContract } from '../../theme';
+import { themeContract } from '../../themes/contract.css';
 keyframes({
   '0%': { transform: 'translateX(0)' },
   '100%': { transform: 'translateX(var(--slide-offset))' },

package/src/components/Columns/Columns.css.ts

@@ -1,7 +1,7 @@
 import { style } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 import { queries } from '../../styles/mediaqueries';
-import { themeContract } from '../../theme';
+import { themeContract } from '../../themes/contract.css';
 
 const columnsBase = style({
   display: 'flex',

package/src/components/ConsentCookie/ConsentCookie.css.ts

@@ -1,7 +1,7 @@
 import { keyframes, style } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 import { queries } from '../../styles/mediaqueries';
-import { themeContract } from '../../theme/contract.css';
+import { themeContract } from '../../themes/contract.css';
 
 const fadeIn = keyframes({
   from: { opacity: '0' },

package/src/components/Footer/Footer.css.ts

@@ -1,7 +1,7 @@
 import { style } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 import { queries } from '../../styles/mediaqueries';
-import { themeContract } from '../../theme/contract.css';
+import { themeContract } from '../../themes/contract.css';
 
 const footerBase = style({
   display: 'flex',

package/src/components/Form/Form.css.ts

@@ -1,6 +1,6 @@
 import { style } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
-import { themeContract } from '../../theme';
+import { themeContract } from '../../themes/contract.css';
 
 const formBase = style({
   width: '100%',

package/src/components/Form/Row/Row.css.ts

@@ -1,6 +1,6 @@
 import { style } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
-import { themeContract } from '../../../theme/contract.css';
+import { themeContract } from '../../../themes/contract.css';
 
 const rowBase = style({
   display: 'flex',

package/src/components/Form/TextField/Input/Input.css.ts

@@ -1,6 +1,6 @@
 import { style } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
-import { themeContract } from '../../../../theme/contract.css';
+import { themeContract } from '../../../../themes/contract.css';
 
 const inputBase = style({
   appearance: 'none',

package/src/components/Form/TextField/Label/Label.css.ts

@@ -1,6 +1,6 @@
 import { style } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
-import { themeContract } from '../../../../theme/contract.css';
+import { themeContract } from '../../../../themes/contract.css';
 
 const labelBase = style({
   fontFamily: themeContract.fonts.body,

package/src/components/Form/TextField/TextField.css.ts

@@ -1,6 +1,6 @@
 import { style } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
-import { themeContract } from '../../../theme/contract.css';
+import { themeContract } from '../../../themes/contract.css';
 
 const textFieldBase = style({
   display: 'flex',

package/src/components/Form/TextField/Textarea/Textarea.css.ts

@@ -1,6 +1,6 @@
 import { style } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
-import { themeContract } from '../../../../theme/contract.css';
+import { themeContract } from '../../../../themes/contract.css';
 
 const textareaBase = style({
   appearance: 'none',

package/src/components/Header/Header.css.ts

@@ -1,7 +1,7 @@
 import { style } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 import { queries } from '../../styles/mediaqueries';
-import { themeContract } from '../../theme';
+import { themeContract } from '../../themes/contract.css';
 
 const headerBase = style({
   display: 'flex',

package/src/components/Header/HeaderOverlay/index.tsx

@@ -1,8 +1,8 @@
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import { useEffect } from 'react';
-import { WithClassName } from '@/types/withClassName';
 
 import { headerOverlayStyle, vars } from './styles.css';
+import { WithClassName } from '../../../types/withClassName';
 
 export interface HeaderOverlayProps {
   isOpen: boolean;

package/src/components/Header/HeaderOverlay/styles.css.ts

@@ -1,5 +1,4 @@
-import { createVar, style, CSSProperties } from '@vanilla-extract/css';
-import { mq } from '../../../assets/styles/mediaqueries';
+import { createVar, style } from '@vanilla-extract/css';
 
 export const vars = {
   overlayBottom: createVar(),
@@ -25,9 +24,10 @@ export const headerOverlayStyle = style({
   transform: vars.overlayTransform,
   transition: 'transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0)',
 
-  '@media': {
-    [mq[0]]: { gap: 'var(--overlayGap0, 20px)' },
-    [mq[1]]: { gap: 'var(--overlayGap1, 30px)' },
-    [mq[2]]: { gap: 'var(--overlayGap2, 40px)' },
-  },
+  // TODO responsive with sprinkles
+  // '@media': {
+  //   [mq[0]]: { gap: 'var(--overlayGap0, 20px)' },
+  //   [mq[1]]: { gap: 'var(--overlayGap1, 30px)' },
+  //   [mq[2]]: { gap: 'var(--overlayGap2, 40px)' },
+  // },
 });

package/src/components/Header/ToggleNav/index.tsx

@@ -1,17 +1,14 @@
 import { assignInlineVars } from '@vanilla-extract/dynamic';
-import { Theme } from '@/types/theme';
-import { WithClassName } from '@/types/withClassName';
 import { toggleNavBarStyle, toggleNavStyle, vars } from './styles.css';
-import { defaultTheme } from '../../../assets/styles/default-theme';
+import { WithClassName } from '../../../types/withClassName';
 
 export type ToggleNavProps = {
-  theme?: Theme;
   isNavOpen: boolean;
   onToggleNav: () => void;
   displayOnDesktop: boolean;
 };
 
-export const ToggleNav = ({ theme = defaultTheme, isNavOpen = false, onToggleNav, displayOnDesktop, className }: ToggleNavProps & WithClassName) => {
+export const ToggleNav = ({ isNavOpen = false, onToggleNav, displayOnDesktop, className }: ToggleNavProps & WithClassName) => {
   const handleClick = () => {
     window.scrollTo({ top: 0, behavior: 'smooth' });
     onToggleNav();

package/src/components/Icon/Icon.css.ts

@@ -1,6 +1,5 @@
 import { style } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
-import { themeContract } from '../../theme';
 
 const iconBase = style({
   display: 'inline-block',

package/src/components/KeyNumber/KeyNumber.css.ts

@@ -1,7 +1,7 @@
 import { style } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 import { queries } from '../../styles/mediaqueries';
-import { themeContract } from '../../theme';
+import { themeContract } from '../../themes/contract.css';
 
 const keyNumberBase = style({
   display: 'flex',

package/src/components/LanguageSwitcher/LanguageSwitcher.css.ts

@@ -1,6 +1,6 @@
 import { style } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
-import { themeContract } from '../../theme';
+import { themeContract } from '../../themes/contract.css';
 
 const languageSwitcherBase = style({
   position: 'relative',

package/src/components/Logo/Logo.css.ts

@@ -1,6 +1,6 @@
 import { style } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
-import { themeContract } from '../../theme';
+import { themeContract } from '../../themes/contract.css';
 
 const logoBase = style({
   display: 'inline-block',

package/src/components/Main/Main.css.ts

@@ -1,6 +1,6 @@
 import { style } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
-import { themeContract } from '../../theme';
+import { themeContract } from '../../themes/contract.css';
 
 const mainBase = style({
   display: 'flex',

package/src/components/Modal/Modal.css.ts

@@ -1,7 +1,7 @@
 import { keyframes, style } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 import { queries } from '../../styles/mediaqueries';
-import { themeContract } from '../../theme';
+import { themeContract } from '../../themes/contract.css';
 
 const fadeIn = keyframes({
   from: { opacity: '0' },

package/src/components/Modal/stories.tsx

@@ -77,13 +77,7 @@ const InteractiveModal = ({ size = 'medium', centered = true, ...args }: any) =>
       <Button variant="primary" onClick={() => setIsOpen(true)}>
         Open Modal
       </Button>
-      <Modal
-        isOpen={isOpen}
-        onClose={() => setIsOpen(false)}
-        size={size}
-        centered={centered}
-        {...args}
-      >
+      <Modal isOpen={isOpen} onClose={() => setIsOpen(false)} size={size} centered={centered} {...args}>
         <div style={{ padding: '2rem' }}>
           <h2>Modal Title</h2>
           <p>This is the modal content. You can put any React components here.</p>
@@ -104,7 +98,7 @@ const InteractiveModal = ({ size = 'medium', centered = true, ...args }: any) =>
 export const Default: Story = {
   render: (args) => <InteractiveModal {...args} />,
   args: {
-    size: 'medium',
+    size: 'md',
     centered: true,
     showCloseButton: true,
     closeOnBackdropClick: true,
@@ -195,24 +189,15 @@ export const ConfirmationDialog: Story = {
 
     return (
       <Section>
-        <Button variant="destructive" onClick={() => setIsOpen(true)}>
+        <Button variant="danger" onClick={() => setIsOpen(true)}>
           Delete Item
         </Button>
-        <Modal
-          isOpen={isOpen}
-          onClose={() => setIsOpen(false)}
-          size="small"
-          centered={true}
-        >
+        <Modal isOpen={isOpen} onClose={() => setIsOpen(false)} size="sm" centered={true}>
           <div style={{ padding: '2rem', textAlign: 'center' }}>
-            <h3 style={{ color: 'var(--latte-colors-error)', marginBottom: '1rem' }}>
-              Delete Confirmation
-            </h3>
-            <p style={{ marginBottom: '2rem' }}>
-              Are you sure you want to delete this item? This action cannot be undone.
-            </p>
+            <h3 style={{ color: 'var(--latte-colors-error)', marginBottom: '1rem' }}>Delete Confirmation</h3>
+            <p style={{ marginBottom: '2rem' }}>Are you sure you want to delete this item? This action cannot be undone.</p>
             <div style={{ display: 'flex', gap: '1rem', justifyContent: 'center' }}>
-              <Button variant="destructive" onClick={() => setIsOpen(false)}>
+              <Button variant="danger" onClick={() => setIsOpen(false)}>
                 Delete
               </Button>
               <Button variant="secondary" onClick={() => setIsOpen(false)}>
@@ -242,58 +227,46 @@ export const FormModal: Story = {
         <Button variant="primary" onClick={() => setIsOpen(true)}>
           Add New User
         </Button>
-        <Modal
-          isOpen={isOpen}
-          onClose={() => setIsOpen(false)}
-          size="medium"
-          centered={true}
-        >
+        <Modal isOpen={isOpen} onClose={() => setIsOpen(false)} size="md" centered={true}>
           <div style={{ padding: '2rem' }}>
             <h2 style={{ marginBottom: '2rem' }}>Add New User</h2>
             <form style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
               <div>
-                <label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: '500' }}>
-                  Name
-                </label>
-                <input 
-                  type="text" 
-                  style={{ 
-                    width: '100%', 
-                    padding: '0.75rem', 
+                <label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: '500' }}>Name</label>
+                <input
+                  type="text"
+                  style={{
+                    width: '100%',
+                    padding: '0.75rem',
                     border: '1px solid var(--latte-colors-border)',
                     borderRadius: 'var(--latte-radii-md)',
-                    fontSize: 'var(--latte-fontSizes-md)'
-                  }} 
+                    fontSize: 'var(--latte-fontSizes-md)',
+                  }}
                 />
               </div>
               <div>
-                <label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: '500' }}>
-                  Email
-                </label>
-                <input 
-                  type="email" 
-                  style={{ 
-                    width: '100%', 
-                    padding: '0.75rem', 
+                <label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: '500' }}>Email</label>
+                <input
+                  type="email"
+                  style={{
+                    width: '100%',
+                    padding: '0.75rem',
                     border: '1px solid var(--latte-colors-border)',
                     borderRadius: 'var(--latte-radii-md)',
-                    fontSize: 'var(--latte-fontSizes-md)'
-                  }} 
+                    fontSize: 'var(--latte-fontSizes-md)',
+                  }}
                 />
               </div>
               <div>
-                <label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: '500' }}>
-                  Role
-                </label>
-                <select 
-                  style={{ 
-                    width: '100%', 
-                    padding: '0.75rem', 
+                <label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: '500' }}>Role</label>
+                <select
+                  style={{
+                    width: '100%',
+                    padding: '0.75rem',
                     border: '1px solid var(--latte-colors-border)',
                     borderRadius: 'var(--latte-radii-md)',
-                    fontSize: 'var(--latte-fontSizes-md)'
-                  }}
-                >
+                    fontSize: 'var(--latte-fontSizes-md)',
+                  }}>
                   <option>User</option>
                   <option>Admin</option>
                   <option>Moderator</option>
@@ -347,50 +320,42 @@ export const ImageGallery: Story = {
               key={index}
               src={src}
               alt={`Gallery ${index + 1}`}
-              style={{ 
-                width: '100%', 
-                height: '150px', 
-                objectFit: 'cover', 
+              style={{
+                width: '100%',
+                height: '150px',
+                objectFit: 'cover',
                 borderRadius: 'var(--latte-radii-md)',
-                cursor: 'pointer'
+                cursor: 'pointer',
               }}
               onClick={() => openImage(index)}
             />
           ))}
         </div>
-        <Modal
-          isOpen={isOpen}
-          onClose={() => setIsOpen(false)}
-          size="large"
-          centered={true}
-        >
+        <Modal isOpen={isOpen} onClose={() => setIsOpen(false)} size="lg" centered={true}>
           <div style={{ padding: '1rem' }}>
             <img
               src={images[selectedImage]}
               alt={`Gallery ${selectedImage + 1}`}
-              style={{ 
-                width: '100%', 
-                height: 'auto', 
-                borderRadius: 'var(--latte-radii-md)'
+              style={{
+                width: '100%',
+                height: 'auto',
+                borderRadius: 'var(--latte-radii-md)',
               }}
             />
-            <div style={{ 
-              marginTop: '1rem', 
-              display: 'flex', 
-              justifyContent: 'space-between', 
-              alignItems: 'center' 
-            }}>
-              <Button 
-                variant="ghost" 
-                onClick={() => setSelectedImage((prev) => (prev > 0 ? prev - 1 : images.length - 1))}
-              >
+            <div
+              style={{
+                marginTop: '1rem',
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+              }}>
+              <Button variant="ghost" onClick={() => setSelectedImage((prev) => (prev > 0 ? prev - 1 : images.length - 1))}>
                 ← Previous
               </Button>
-              <span>Image {selectedImage + 1} of {images.length}</span>
-              <Button 
-                variant="ghost" 
-                onClick={() => setSelectedImage((prev) => (prev < images.length - 1 ? prev + 1 : 0))}
-              >
+              <span>
+                Image {selectedImage + 1} of {images.length}
+              </span>
+              <Button variant="ghost" onClick={() => setSelectedImage((prev) => (prev < images.length - 1 ? prev + 1 : 0))}>
                 Next →
               </Button>
             </div>
@@ -406,4 +371,4 @@ export const ImageGallery: Story = {
       },
     },
   },
-};
+};

package/src/components/Nav/Nav.css.ts

@@ -1,7 +1,7 @@
 import { style } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 import { queries } from '../../styles/mediaqueries';
-import { themeContract } from '../../theme';
+import { themeContract } from '../../themes/contract.css';
 
 const navBase = style({
   display: 'flex',

package/src/components/Nav/Nav.tsx

@@ -68,6 +68,7 @@ export const Nav = forwardRef<HTMLElement, NavProps>(
   ) => {
     return (
       <Component
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         ref={ref as any}
         className={clsx(
           navRecipe({ orientation, variant, justify }),

package/src/components/NavLegal/NavLegal.css.ts

@@ -1,7 +1,7 @@
 import { style } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 import { queries } from '../../styles/mediaqueries';
-import { themeContract } from '../../theme';
+import { themeContract } from '../../themes/contract.css';
 
 const navLegalBase = style({
   display: 'flex',

package/src/components/NavSocial/NavSocial.css.ts

@@ -1,7 +1,7 @@
 import { style } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 import { queries } from '../../styles/mediaqueries';
-import { themeContract } from '../../theme/contract.css';
+import { themeContract } from '../../themes/contract.css';
 
 const navSocialBase = style({
   display: 'flex',

package/src/components/Section/Section.css.ts

@@ -1,6 +1,6 @@
 import { style } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
-import { themeContract } from '../../theme';
+import { themeContract } from '../../themes/contract.css';
 
 const sectionBase = style({
   width: '100%',