@latte-macchiat-io/latte-vanilla-components 0.0.196 → 0.0.198

package/package.json

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

package/src/components/Footer/index.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 

package/src/components/Footer/stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { Footer } from '../../index';
+import { Footer } from './index';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta: Meta<typeof Footer> = {

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

@@ -2,14 +2,14 @@ import { assignInlineVars } from '@vanilla-extract/dynamic';
 import { useEffect } from 'react';
 
 import { headerOverlayStyle, vars } from './styles.css';
-import { WithClassName } from '../../../types/withClassName';
 
 export interface HeaderOverlayProps {
+  css?: string;
   isOpen: boolean;
   children: React.ReactNode;
 }
 
-const HeaderOverlay = ({ isOpen = false, children, className }: HeaderOverlayProps & WithClassName) => {
+const HeaderOverlay = ({ isOpen = false, children, css }: HeaderOverlayProps) => {
   useEffect(() => {
     const html = document.getElementsByTagName('html')[0];
     html.style.overflow = '';
@@ -19,7 +19,7 @@ const HeaderOverlay = ({ isOpen = false, children, className }: HeaderOverlayPro
 
   return (
     <div
-      className={`${headerOverlayStyle} ${className}`}
+      className={`${headerOverlayStyle} ${css}`}
       style={assignInlineVars({
         [vars.overlayBottom]: !isOpen ? '100%' : '-100vh',
         [vars.overlayTransform]: isOpen ? 'translate(0, 0)' : 'translate(0, -100%)',

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

@@ -1,14 +1,14 @@
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import { toggleNavBarStyle, toggleNavStyle, vars } from './styles.css';
-import { WithClassName } from '../../../types/withClassName';
 
 export type ToggleNavProps = {
+  css?: string;
   isNavOpen: boolean;
   onToggleNav: () => void;
   displayOnDesktop: boolean;
 };
 
-export const ToggleNav = ({ isNavOpen = false, onToggleNav, displayOnDesktop, className }: ToggleNavProps & WithClassName) => {
+export const ToggleNav = ({ isNavOpen = false, onToggleNav, displayOnDesktop, css }: ToggleNavProps) => {
   const handleClick = () => {
     window.scrollTo({ top: 0, behavior: 'smooth' });
     onToggleNav();
@@ -16,7 +16,7 @@ export const ToggleNav = ({ isNavOpen = false, onToggleNav, displayOnDesktop, cl
 
   return (
     <button
-      className={`${toggleNavStyle} ${className}`}
+      className={`${toggleNavStyle} ${css}`}
       style={assignInlineVars({
         [vars.displayOnDesktop]: displayOnDesktop ? 'block' : 'none',
       })}

package/src/components/Heading/styles.css.ts

@@ -1,8 +1,7 @@
 import { style } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
-
-import { sprinkles } from '../../../styles/sprinkles.css';
-import { themeContract } from '../../../theme/contract.css';
+import { sprinkles } from '../../styles/sprinkles.css';
+import { themeContract } from '../../theme/contract.css';
 
 export const headingRecipe = recipe({
   base: style({

package/src/components/Section/stories.tsx

@@ -176,10 +176,10 @@ export const HeroSection: Story = {
           Build amazing applications with our comprehensive component library. Get started in minutes and scale to millions of users.
         </p>
         <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap', justifyContent: 'center' }}>
-          <Button variant="secondary" size="lg">
+          <Button variant="primary" size="lg">
             Get Started Free
           </Button>
-          <Button variant="ghost" size="lg" style={{ borderColor: 'white', color: 'white' }}>
+          <Button variant="secondary" size="lg">
             Watch Demo
           </Button>
         </div>
@@ -275,7 +275,7 @@ export const CallToActionSection: Story = {
           <Button variant="primary" size="lg">
             Start Building
           </Button>
-          <Button variant="ghost" size="lg" style={{ borderColor: 'white', color: 'white' }}>
+          <Button variant="secondary" size="lg">
             View Documentation
           </Button>
         </div>

package/src/components/ThemeTest/ThemeTest.css.ts

@@ -1,11 +1,11 @@
 import { style } from '@vanilla-extract/css';
-import { themeContract } from '../../../theme/contract.css';
+import { themeContract } from '../../theme/contract.css';
 
 export const testStyle = style({
-  padding: themeContract.space.large,
+  padding: themeContract.space.lg,
   backgroundColor: themeContract.colors.primary,
   color: themeContract.colors.text,
-  borderRadius: themeContract.radii.medium,
-  margin: themeContract.space.medium,
+  borderRadius: themeContract.radii.md,
+  margin: themeContract.space.md,
   border: `2px solid ${themeContract.colors.border}`,
-});
+});

package/src/index.ts

@@ -24,6 +24,8 @@ export { Nav, type NavProps } from './components/Nav';
 
 export { Icon, type IconProps } from './components/Icon';
 
+export { Heading, type HeadingProps } from './components/Heading';
+
 export { Modal, type ModalProps } from './components/Modal';
 export { type ModalVariants } from './components/Modal/styles.css';