@latte-macchiat-io/latte-vanilla-components 0.0.216 → 0.0.218

package/package.json

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

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

@@ -3,7 +3,7 @@ import { clsx } from 'clsx';
 import { bar, toggleNavButton } from './styles.css';
 
 export type HeaderToggleNavProps = {
-  isOpen: boolean;
+  isOpen?: boolean;
 };
 
 export const HeaderToggleNav = ({ isOpen }: HeaderToggleNavProps) => {

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

@@ -1,4 +1,5 @@
 import { style } from '@vanilla-extract/css';
+import { calc } from '@vanilla-extract/css-utils';
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
 import { themeContract } from '../../theme/contract.css';
@@ -67,6 +68,14 @@ export const sectionRecipe = recipe({
         justifyContent: 'flex-start',
       },
     },
+    isHeaderFixed: {
+      true: {
+        // minHeight: calc.subtract('100vh', themeContract.header.height),
+      },
+      false: {
+        minHeight: '100vh',
+      },
+    },
     withPaddingTop: {
       true: {
         '@media': {

package/src/components/ThemeToggle/export.tsx

@@ -0,0 +1 @@
+export { ThemeToggle, type ThemeToggleProps } from './';

package/src/components/ThemeToggle/index.tsx

@@ -1,8 +1,13 @@
 'use client';
 
+import clsx from 'clsx';
 import { useEffect, useState } from 'react';
 
-export function ThemeToggle() {
+import { themeToggleRecipe } from './styles.css';
+
+export type ThemeToggleProps = React.HTMLAttributes<HTMLDivElement> & {};
+
+export const ThemeToggle = ({ className }: ThemeToggleProps) => {
   const [theme, setTheme] = useState<'light' | 'dark'>('light');
 
   useEffect(() => {
@@ -23,8 +28,8 @@ export function ThemeToggle() {
   };
 
   return (
-    <button onClick={toggleTheme} aria-label="Toggle theme">
+    <button onClick={toggleTheme} aria-label="Toggle theme" className={clsx(themeToggleRecipe(), className)}>
       {theme === 'light' ? '🌙' : '☀️'}
     </button>
   );
-}
+};

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

@@ -0,0 +1,11 @@
+import { recipe } from '@vanilla-extract/recipes';
+
+export const themeToggleRecipe = recipe({
+  base: [
+    {
+      border: 0,
+
+      '@media': {},
+    },
+  ],
+});

package/src/index.ts

@@ -19,6 +19,7 @@ export * from './components/Section/export';
 export * from './components/Main/export';
 
 export * from './components/Header/export';
+export * from './components/Header/HeaderToggleNav/export';
 export * from './components/Footer/export';
 
 export * from './components/Nav/export';