@latte-macchiat-io/latte-vanilla-components 0.0.201 → 0.0.203

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latte-macchiat-io/latte-vanilla-components",
-  "version": "0.0.201",
+  "version": "0.0.203",
   "description": "Beautiful components for amazing projects, with a touch of Vanilla 🥤",
   "type": "module",
   "main": "./src/index.ts",

package/src/components/Actions/index.tsx

@@ -1,5 +1,4 @@
 import { clsx } from 'clsx';
-import { forwardRef } from 'react';
 
 import { actionsRecipe, type ActionsVariants } from './styles.css';
 
@@ -8,8 +7,6 @@ export type ActionsProps = React.HTMLAttributes<HTMLDivElement> &
     children: React.ReactNode;
   };
 
-export const Actions = forwardRef<HTMLDivElement, ActionsProps>(({ align, direction, className, children }, ref) => (
-  <div ref={ref} className={clsx(actionsRecipe({ align, direction }), className)}>
-    {children}
-  </div>
-));
+export const Actions = ({ align, direction, className, children }: ActionsProps) => (
+  <div className={clsx(actionsRecipe({ align, direction }), className)}>{children}</div>
+);

package/src/components/Actions/stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
+import { Button } from '../Button';
 import { Actions } from '.';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
@@ -24,6 +25,11 @@ type Story = StoryObj<typeof meta>;
 // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const Default: Story = {
   args: {
-    children: <div>hello</div>,
+    children: (
+      <>
+        <Button>hello</Button>
+        <Button>hello</Button>
+      </>
+    ),
   },
 };

package/src/components/Button/export.tsx

@@ -1,5 +1,2 @@
-// 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';
+export { Button, type ButtonProps } from './';
+export { type ButtonVariants } from './styles.css';

package/src/components/Button/index.tsx

@@ -1,27 +1,32 @@
 'use client';
 
 import { clsx } from 'clsx';
-import { type ComponentPropsWithoutRef, forwardRef } from 'react';
 
 import { buttonRecipe, type ButtonVariants } from './styles.css';
 
-export type ButtonProps = ComponentPropsWithoutRef<'button'> &
+export type ButtonProps = React.HTMLAttributes<HTMLButtonElement> &
   ButtonVariants & {
     css?: string;
     isPending?: boolean;
     isDisabled?: boolean;
+    translation?: {
+      isPendingLabel: string;
+    };
   };
 
-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>
-    );
-  }
+export const Button = ({
+  size,
+  style,
+  variant,
+  onClick,
+  children,
+  fullWidth,
+  className,
+  isPending = false,
+  isDisabled = false,
+  translation = { isPendingLabel: 'Loading...' },
+}: ButtonProps) => (
+  <button onClick={onClick} disabled={isDisabled || isPending} className={clsx(buttonRecipe({ variant, style, size, fullWidth }), className)}>
+    {isPending ? translation.isPendingLabel : children}
+  </button>
 );

package/src/components/Button/stories.tsx

@@ -1,235 +1,28 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import React from 'react';
-import { Section } from '../Section';
+
 import { Button } from '.';
 
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta: Meta<typeof Button> = {
-  title: 'Interactive Components/Button',
+  title: 'Latte Components / 1. Global / Button',
   component: Button,
   parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
     layout: 'centered',
-    docs: {
-      description: {
-        component: `
-The Button component is a versatile, accessible button that supports multiple variants, sizes, and states.
-
-## Features
-- Multiple variants (primary, secondary, ghost, destructive)
-- Different sizes (small, medium, large)
-- Full width option
-- Loading/pending state
-- Fully accessible (ARIA compliant)
-- Theme-aware colors
-- TypeScript support
-        `,
-      },
-    },
   },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ['autodocs'],
-  argTypes: {
-    variant: {
-      control: 'select',
-      options: ['primary', 'secondary', 'ghost', 'destructive'],
-      description: 'Visual style of the button',
-    },
-    size: {
-      control: 'select',
-      options: ['small', 'medium', 'large'],
-      description: 'Size of the button',
-    },
-    fullWidth: {
-      control: 'boolean',
-      description: 'Whether the button should take full width of its container',
-    },
-    isPending: {
-      control: 'boolean',
-      description: 'Shows loading state',
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Disables the button',
-    },
-    children: {
-      control: 'text',
-      description: 'Button content',
-    },
-  },
+  // 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
 };
 
 export default meta;
-type Story = StoryObj<typeof Button>;
-
-// Basic Stories
-export const Primary: Story = {
-  args: {
-    variant: 'primary',
-    children: 'Primary Button',
-  },
-};
-
-export const Secondary: Story = {
-  args: {
-    variant: 'secondary',
-    children: 'Secondary Button',
-  },
-};
-
-// Size Variants
-export const Small: Story = {
-  args: {
-    variant: 'primary',
-    size: 'sm',
-    children: 'Small Button',
-  },
-};
+type Story = StoryObj<typeof meta>;
 
-export const Medium: Story = {
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Default: Story = {
   args: {
-    variant: 'primary',
-    size: 'md',
-    children: 'Medium Button',
-  },
-};
-
-export const Large: Story = {
-  args: {
-    variant: 'primary',
-    size: 'lg',
-    children: 'Large Button',
-  },
-};
-
-// States
-export const Loading: Story = {
-  args: {
-    variant: 'primary',
-    children: 'Loading Button',
-    isPending: true,
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    variant: 'primary',
-    children: 'Disabled Button',
-    disabled: true,
-  },
-};
-
-export const FullWidth: Story = {
-  args: {
-    variant: 'primary',
-    children: 'Full Width Button',
-    fullWidth: true,
-  },
-  parameters: {
-    layout: 'padded',
-  },
-};
-
-// All Variants Showcase
-export const AllVariants: Story = {
-  render: () => (
-    <Section>
-      <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap', alignItems: 'center' }}>
-        <Button variant="primary">Primary</Button>
-        <Button variant="secondary">Secondary</Button>
-      </div>
-    </Section>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: 'All available button variants displayed together.',
-      },
-    },
-  },
-};
-
-// All Sizes Showcase
-export const AllSizes: Story = {
-  render: () => (
-    <Section>
-      <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
-        <Button variant="primary" size="sm">
-          Small
-        </Button>
-        <Button variant="primary" size="md">
-          Medium
-        </Button>
-        <Button variant="primary" size="lg">
-          Large
-        </Button>
-      </div>
-    </Section>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: 'All available button sizes displayed together.',
-      },
-    },
-  },
-};
-
-// Interactive Example
-export const InteractiveExample: Story = {
-  render: () => (
-    <Section>
-      <div style={{ display: 'grid', gap: '2rem' }}>
-        <div>
-          <h3>Call to Action</h3>
-          <div style={{ display: 'flex', gap: '1rem' }}>
-            <Button variant="primary" size="lg">
-              Get Started
-            </Button>
-            <Button variant="secondary" size="lg">
-              Learn More
-            </Button>
-          </div>
-        </div>
-
-        <div>
-          <h3>Form Actions</h3>
-          <div style={{ display: 'flex', gap: '0.5rem' }}>
-            <Button variant="primary">Save</Button>
-            <Button variant="secondary">Cancel</Button>
-          </div>
-        </div>
-
-        <div>
-          <h3>Navigation</h3>
-          <div style={{ display: 'flex', gap: '0.5rem' }}>
-            <Button variant="primary">Next →</Button>
-          </div>
-        </div>
-      </div>
-    </Section>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Real-world usage examples showing different button combinations.',
-      },
-    },
-  },
-};
-
-// With Custom Styling
-export const WithCustomStyling: Story = {
-  render: () => (
-    <Section>
-      <div style={{ display: 'flex', gap: '1rem', flexDirection: 'column' }}>
-        <Button variant="primary">Rounded Button</Button>
-        <Button variant="secondary">Large Text Button</Button>
-      </div>
-    </Section>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Buttons with custom styling using sprinkles utilities.',
-      },
-    },
+    children: 'Button',
   },
 };

package/src/components/Button/theme.ts

@@ -0,0 +1,149 @@
+const themeButtonBase = {
+  button: {
+    minWidth: '100',
+    fontWeight: '500',
+    letterSpacing: '0.2',
+    borderRadius: '15px',
+    fontFamily: 'system-ui, sans-serif',
+    transition: 'all 0.3s ease-in-out',
+
+    size: {
+      small: {
+        paddingTop: {
+          mobile: '5px',
+          sm: '5px',
+          md: '5px',
+          lg: '5px',
+          xl: '5px',
+          '2xl': '5px',
+        },
+        paddingLeft: {
+          mobile: '5px',
+          sm: '5px',
+          md: '5px',
+          lg: '5px',
+          xl: '5px',
+          '2xl': '5px',
+        },
+        paddingRight: {
+          mobile: '5px',
+          sm: '5px',
+          md: '5px',
+          lg: '5px',
+          xl: '5px',
+          '2xl': '5px',
+        },
+        paddingBottom: {
+          mobile: '5px',
+          sm: '5px',
+          md: '5px',
+          lg: '5px',
+          xl: '5px',
+          '2xl': '5px',
+        },
+      },
+      medium: {
+        paddingTop: {
+          mobile: '5px',
+          sm: '5px',
+          md: '10px',
+          lg: '10px',
+          xl: '15px',
+          '2xl': '15px',
+        },
+        paddingLeft: {
+          mobile: '5px',
+          sm: '5px',
+          md: '10px',
+          lg: '10px',
+          xl: '15px',
+          '2xl': '15px',
+        },
+        paddingRight: {
+          mobile: '5px',
+          sm: '5px',
+          md: '10px',
+          lg: '10px',
+          xl: '15px',
+          '2xl': '15px',
+        },
+        paddingBottom: {
+          mobile: '5px',
+          sm: '5px',
+          md: '10px',
+          lg: '10px',
+          xl: '15px',
+          '2xl': '15px',
+        },
+      },
+      large: {
+        paddingTop: {
+          mobile: '10px',
+          sm: '10px',
+          md: '15px',
+          lg: '15px',
+          xl: '20px',
+          '2xl': '20px',
+        },
+        paddingLeft: {
+          mobile: '10px',
+          sm: '10px',
+          md: '15px',
+          lg: '15px',
+          xl: '20px',
+          '2xl': '20px',
+        },
+        paddingRight: {
+          mobile: '10px',
+          sm: '10px',
+          md: '15px',
+          lg: '15px',
+          xl: '20px',
+          '2xl': '20px',
+        },
+        paddingBottom: {
+          mobile: '10px',
+          sm: '10px',
+          md: '15px',
+          lg: '15px',
+          xl: '20px',
+          '2xl': '20px',
+        },
+      },
+    },
+  },
+};
+
+export const themeButtonLight = {
+  button: {
+    ...themeButtonBase.button,
+
+    variant: {
+      primary: {
+        color: '#FF7377',
+        backgroundColor: '#FF7377',
+      },
+      secondary: {
+        color: '#FF7377',
+        backgroundColor: '#FF7377',
+      },
+    },
+  },
+};
+
+export const themeButtonDark = {
+  button: {
+    ...themeButtonBase.button,
+
+    variant: {
+      primary: {
+        color: '#FF7377',
+        backgroundColor: '#FF7377',
+      },
+      secondary: {
+        color: '#FF7377',
+        backgroundColor: '#FF7377',
+      },
+    },
+  },
+};

package/src/components/Carousel/export.tsx

@@ -1,4 +1,2 @@
-// export { Carousel } from '.';
-// export type { CarouselProps } from '.';
-
-// export { styles as CarouselStyles } from './styles.css';
+export { Carousel, type CarouselProps } from './';
+export { type CarouselVariants } from './styles.css';