@latte-macchiat-io/latte-vanilla-components 0.0.211 → 0.0.213

package/package.json

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

package/src/components/Header/index.tsx

@@ -1,17 +1,17 @@
 import { clsx } from 'clsx';
 import { useState } from 'react';
 
-import { headerOverlayRecipe, headerPlaceholder, headerRecipe, headerToggleNav } from './styles.css';
+import { headerOverlayRecipe, headerPlaceholder, headerRecipe, headerToggleNav, HeaderToggleNavVariants } from './styles.css';
 
-export type HeaderProps = React.HTMLAttributes<HTMLDivElement> & {
-  isFixed?: boolean;
-  hideToggleNav?: boolean;
-  children: React.ReactNode;
-  childrenOverlay?: React.ReactNode;
-  childrenToggleNav?: React.ReactNode;
-};
+export type HeaderProps = React.HTMLAttributes<HTMLDivElement> &
+  HeaderToggleNavVariants & {
+    isFixed?: boolean;
+    children: React.ReactNode;
+    childrenOverlay?: React.ReactNode;
+    childrenToggleNav?: React.ReactNode;
+  };
 
-export const Header = ({ children, childrenOverlay, childrenToggleNav, isFixed = false, hideToggleNav = false, className }: HeaderProps) => {
+export const Header = ({ children, childrenOverlay, childrenToggleNav, isFixed = false, visibility, className }: HeaderProps) => {
   const [isNavOpen, setNavOpen] = useState(false);
   const onToggleNav = () => setNavOpen(!isNavOpen);
 
@@ -22,8 +22,8 @@ export const Header = ({ children, childrenOverlay, childrenToggleNav, isFixed =
 
         {children}
 
-        {!hideToggleNav && (
-          <button onClick={onToggleNav} aria-label="Toggle navigation" className={headerToggleNav}>
+        {visibility !== 'hide' && (
+          <button onClick={onToggleNav} aria-label="Toggle navigation" className={headerToggleNav({ visibility })}>
             {childrenToggleNav}
           </button>
         )}

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

@@ -1,6 +1,6 @@
 import { style } from '@vanilla-extract/css';
 import { recipe } from '@vanilla-extract/recipes';
-import { themeContract } from '../..';
+import { queries, themeContract } from '../..';
 import { generateResponsiveMedia } from '../../utils/generateResponsiveMedia';
 
 export const headerRecipe = recipe({
@@ -52,13 +52,6 @@ export const headerPlaceholder = style([
   },
 ]);
 
-export const headerToggleNav = style([
-  {
-    border: 0,
-    zIndex: 30,
-  },
-]);
-
 export const headerOverlayRecipe = recipe({
   base: {
     inset: 0,
@@ -86,4 +79,30 @@ export const headerOverlayRecipe = recipe({
   },
 });
 
+export const headerToggleNav = recipe({
+  base: {
+    border: 0,
+    zIndex: 30,
+  },
+
+  variants: {
+    visibility: {
+      show: { display: 'block' },
+      hide: { display: 'none' },
+      mobileOnly: {
+        display: 'block',
+        '@media': {
+          [queries.md]: {
+            display: 'none',
+          },
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    visibility: 'mobileOnly',
+  },
+});
+
+export type HeaderToggleNavVariants = Parameters<typeof headerToggleNav>[0];
 export type HeaderOverlayVariants = Parameters<typeof headerOverlayRecipe>[0];

package/src/components/Section/stories.tsx

@@ -33,14 +33,14 @@ The Section component provides consistent spacing and layout for content section
       options: ['left', 'center', 'right'],
       description: 'Text alignment for the section content',
     },
-    isDark: {
-      control: 'boolean',
-      description: 'Apply dark background styling',
-    },
     isFullHeight: {
       control: 'boolean',
       description: 'Make the section take full viewport height',
     },
+    withPaddingTop: {
+      control: 'boolean',
+      description: '',
+    },
   },
 };
 

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

@@ -24,18 +24,15 @@ export const sectionRecipe = recipe({
 
   variants: {
     variant: {
-      transparent: {
-        color: themeContract.section.variant.transparent.color,
-        backgroundColor: themeContract.section.variant.transparent.backgroundColor,
-      },
       primary: {
-        color: themeContract.section.variant.primary.color,
         backgroundColor: themeContract.section.variant.primary.backgroundColor,
       },
       secondary: {
-        color: themeContract.section.variant.secondary.color,
         backgroundColor: themeContract.section.variant.secondary.backgroundColor,
       },
+      transparent: {
+        backgroundColor: themeContract.section.variant.transparent.backgroundColor,
+      },
     },
 
     align: {

package/src/components/Section/theme.ts

@@ -9,10 +9,10 @@ const themeSectionBase = {
       '2xl': '50px',
     },
     paddingTop: {
-      mobile: '15px',
-      sm: '15px',
-      md: '30px',
-      lg: '30px',
+      mobile: '50px',
+      sm: '50px',
+      md: '50px',
+      lg: '50px',
       xl: '50px',
       '2xl': '50px',
     },
@@ -33,15 +33,12 @@ export const themeSectionLight = {
 
     variant: {
       transparent: {
-        color: '',
         backgroundColor: '',
       },
       primary: {
-        color: '',
         backgroundColor: '',
       },
       secondary: {
-        color: '',
         backgroundColor: '',
       },
     },
@@ -54,15 +51,12 @@ export const themeSectionDark = {
 
     variant: {
       transparent: {
-        color: '',
         backgroundColor: '',
       },
       primary: {
-        color: '',
         backgroundColor: '',
       },
       secondary: {
-        color: '',
         backgroundColor: '',
       },
     },

package/src/theme/contract.css.ts

@@ -114,15 +114,12 @@ export const themeContract = createGlobalThemeContract({
   section: {
     variant: {
       transparent: {
-        color: 'latte-section-variant-transparent-color',
         backgroundColor: 'latte-section-variant-transparent-backgroundColor',
       },
       primary: {
-        color: 'latte-section-variant-primary-color',
         backgroundColor: 'latte-section-variant-primary-backgroundColor',
       },
       secondary: {
-        color: 'latte-section-variant-secondary-color',
         backgroundColor: 'latte-section-variant-secondary-backgroundColor',
       },
     },