@latte-macchiat-io/latte-vanilla-components 0.0.527 → 0.0.528

package/package.json

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

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

@@ -1,7 +1,7 @@
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 
+import { generateResponsiveMedia } from '../../styles/utils/generateResponsiveMedia';
 import { themeContract } from '../../theme/contract.css';
-import { generateResponsiveMedia } from '../../utils/generateResponsiveMedia';
 
 export const actionsRecipe = recipe(
   {

package/src/components/Box/Alert/styles.css.ts

@@ -1,8 +1,8 @@
 import { globalStyle, style } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 
+import { generateResponsiveMedia } from '../../../styles/utils/generateResponsiveMedia';
 import { themeContract } from '../../../theme/contract.css';
-import { generateResponsiveMedia } from '../../../utils/generateResponsiveMedia';
 
 export const alertBoxBase = style({});
 

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

@@ -2,7 +2,7 @@ import { style } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 import { queries, themeContract } from '@latte-macchiat-io/latte-vanilla-components';
 
-import { generateResponsiveMedia } from '../../utils/generateResponsiveMedia';
+import { generateResponsiveMedia } from '../../styles/utils/generateResponsiveMedia';
 
 export const boxBase = style({
   width: '100%',

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

@@ -1,8 +1,8 @@
 import { globalStyle, style } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 
+import { generateResponsiveMedia } from '../../styles/utils/generateResponsiveMedia';
 import { themeContract } from '../../theme/contract.css';
-import { generateResponsiveMedia } from '../../utils/generateResponsiveMedia';
 
 export const buttonBase = style({
   border: 'none',

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

@@ -3,10 +3,9 @@ import { calc } from '@vanilla-extract/css-utils';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 
 import { queries } from '../../styles/mediaqueries';
+import { generateResponsiveMedia } from '../../styles/utils/generateResponsiveMedia';
 import { themeContract } from '../../theme/contract.css';
 
-import { generateResponsiveMedia } from '../../utils/generateResponsiveMedia';
-
 export const carouselRecipe = recipe(
   {
     base: {

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

@@ -1,8 +1,8 @@
 import { globalStyle, style } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 import { queries } from '../../styles/mediaqueries';
+import { generateResponsiveMedia } from '../../styles/utils/generateResponsiveMedia';
 import { themeContract } from '../../theme/contract.css';
-import { generateResponsiveMedia } from '../../utils/generateResponsiveMedia';
 
 export const columnsBase = style({
   display: 'grid',

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

@@ -1,6 +1,6 @@
 import { keyframes, style } from '@vanilla-extract/css';
+import { generateResponsiveMedia } from '../../styles/utils/generateResponsiveMedia';
 import { themeContract } from '../../theme/contract.css';
-import { generateResponsiveMedia } from '../../utils/generateResponsiveMedia';
 
 const fadeIn = keyframes({
   from: { opacity: '0' },

package/src/components/ExpandCollapse/Item/styles.css.ts

@@ -1,7 +1,7 @@
 import { globalStyle, style } from '@vanilla-extract/css';
 
+import { generateResponsiveMedia } from '../../../styles/utils/generateResponsiveMedia';
 import { themeContract } from '../../../theme/contract.css';
-import { generateResponsiveMedia } from '../../../utils/generateResponsiveMedia';
 
 export const collapseExpandItem = style({
   gap: 0,

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

@@ -1,7 +1,7 @@
 import { style } from '@vanilla-extract/css';
 
+import { generateResponsiveMedia } from '../../styles/utils/generateResponsiveMedia';
 import { themeContract } from '../../theme/contract.css';
-import { generateResponsiveMedia } from '../../utils/generateResponsiveMedia';
 
 export const collapseExpand = style({
   display: 'flex',

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

@@ -1,7 +1,7 @@
 import { globalStyle, style } from '@vanilla-extract/css';
 
 import { themeContract } from '../..';
-import { generateResponsiveMedia } from '../../utils/generateResponsiveMedia';
+import { generateResponsiveMedia } from '../../styles/utils/generateResponsiveMedia';
 
 export const footerRecipe = style([
   {

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

@@ -1,7 +1,7 @@
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 
+import { generateResponsiveMedia } from '../../../styles/utils/generateResponsiveMedia';
 import { themeContract } from '../../../theme/contract.css';
-import { generateResponsiveMedia } from '../../../utils/generateResponsiveMedia';
 
 export const rowRecipe = recipe(
   {

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

@@ -1,8 +1,8 @@
 import { style } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 
+import { generateResponsiveMedia } from '../../../styles/utils/generateResponsiveMedia';
 import { themeContract } from '../../../theme/contract.css';
-import { generateResponsiveMedia } from '../../../utils/generateResponsiveMedia';
 
 export const selectRecipe = recipe(
   {

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

@@ -1,7 +1,7 @@
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 
+import { generateResponsiveMedia } from '../../../../styles/utils/generateResponsiveMedia';
 import { themeContract } from '../../../../theme/contract.css';
-import { generateResponsiveMedia } from '../../../../utils/generateResponsiveMedia';
 
 export const inputRecipe = recipe(
   {

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

@@ -1,7 +1,7 @@
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 
+import { generateResponsiveMedia } from '../../../../styles/utils/generateResponsiveMedia';
 import { themeContract } from '../../../../theme/contract.css';
-import { generateResponsiveMedia } from '../../../../utils/generateResponsiveMedia';
 
 export const textareaRecipe = recipe(
   {

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

@@ -1,8 +1,8 @@
 import { globalStyle, style } from '@vanilla-extract/css';
 import { recipe } from '@vanilla-extract/recipes';
 
+import { generateResponsiveMedia } from '../../styles/utils/generateResponsiveMedia';
 import { themeContract } from '../../theme/contract.css';
-import { generateResponsiveMedia } from '../../utils/generateResponsiveMedia';
 
 const formBase = style({
   display: 'flex',

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

@@ -2,7 +2,7 @@ import { globalStyle, style } from '@vanilla-extract/css';
 import { recipe } from '@vanilla-extract/recipes';
 
 import { queries, themeContract } from '../..';
-import { generateResponsiveMedia } from '../../utils/generateResponsiveMedia';
+import { generateResponsiveMedia } from '../../styles/utils/generateResponsiveMedia';
 
 export const headerBase = style({
   zIndex: 40,

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

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

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

@@ -1,7 +1,7 @@
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
+import { generateResponsiveMedia } from '../../styles/utils/generateResponsiveMedia';
 import { themeContract } from '../../theme/contract.css';
-import { generateResponsiveMedia } from '../../utils/generateResponsiveMedia';
 
 export const keyNumberRecipe = recipe(
   {

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

@@ -1,8 +1,8 @@
 import { globalStyle, style } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 
+import { generateResponsiveMedia } from '../../styles/utils/generateResponsiveMedia';
 import { themeContract } from '../../theme/contract.css';
-import { generateResponsiveMedia } from '../../utils/generateResponsiveMedia';
 
 export const listBase = style(
   {

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

@@ -1,8 +1,8 @@
 import { style } from '@vanilla-extract/css';
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
+import { generateResponsiveMedia } from '../../styles/utils/generateResponsiveMedia';
 import { themeContract } from '../../theme/contract.css';
-import { generateResponsiveMedia } from '../../utils/generateResponsiveMedia';
 
 export const modal = style(
   {

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

@@ -1,7 +1,7 @@
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 
+import { generateResponsiveMedia } from '../../styles/utils/generateResponsiveMedia';
 import { themeContract } from '../../theme/contract.css';
-import { generateResponsiveMedia } from '../../utils/generateResponsiveMedia';
 
 export const navRecipe = recipe(
   {

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

@@ -1,8 +1,8 @@
 import { style } from '@vanilla-extract/css';
 import { recipe } from '@vanilla-extract/recipes';
 
+import { generateResponsiveMedia } from '../../styles/utils/generateResponsiveMedia';
 import { themeContract } from '../../theme/contract.css';
-import { generateResponsiveMedia } from '../../utils/generateResponsiveMedia';
 
 export const navLegalRecipe = recipe(
   {

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

@@ -1,8 +1,8 @@
 import { globalStyle, style } from '@vanilla-extract/css';
 import { recipe } from '@vanilla-extract/recipes';
 
+import { generateResponsiveMedia } from '../../styles/utils/generateResponsiveMedia';
 import { themeContract } from '../../theme/contract.css';
-import { generateResponsiveMedia } from '../../utils/generateResponsiveMedia';
 
 export const navSocialRecipe = recipe(
   {

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

@@ -1,8 +1,8 @@
 import { globalStyle, style } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 
+import { generateResponsiveMedia } from '../../styles/utils/generateResponsiveMedia';
 import { themeContract } from '../../theme/contract.css';
-import { generateResponsiveMedia } from '../../utils/generateResponsiveMedia';
 
 export const paragraph = style({
   marginLeft: 'auto',

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

@@ -1,8 +1,8 @@
 import { style } from '@vanilla-extract/css';
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
+import { calcResponsiveSubtract, generateResponsiveMedia } from '../../styles/utils/generateResponsiveMedia';
 import { themeContract } from '../../theme/contract.css';
-import { calcResponsiveSubtract, generateResponsiveMedia } from '../../utils/generateResponsiveMedia';
 
 export const sectionRecipe = recipe(
   {

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

@@ -1,9 +1,8 @@
 import { style } from '@vanilla-extract/css';
 
+import { generateResponsiveMedia } from '../../styles/utils/generateResponsiveMedia';
 import { themeContract } from '../../theme/contract.css';
 
-import { generateResponsiveMedia } from '../../utils/generateResponsiveMedia';
-
 export const spacer = style({
   border: 0,
   backgroundColor: 'transparent',

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

@@ -3,9 +3,9 @@ import { calc } from '@vanilla-extract/css-utils';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 
 import { queries } from '../../styles/mediaqueries';
+import { generateResponsiveMedia } from '../../styles/utils/generateResponsiveMedia';
 import { themeContract } from '../../theme/contract.css';
 import { addPixelsToBreakpoints } from '../../utils/addPixelsToBreakpoints';
-import { generateResponsiveMedia } from '../../utils/generateResponsiveMedia';
 
 export const videoRecipe = recipe(
   {

package/src/styles/mediaqueries.ts

@@ -1,5 +1,3 @@
-export type Breakpoints = 'mobile' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
-
 export const breakpoints = {
   mobile: 0,
   sm: 640,

package/src/styles/types.ts

@@ -0,0 +1 @@
+export type Breakpoints = 'mobile' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';

package/src/styles/utils/calcResponsiveSubtract.ts

@@ -0,0 +1,47 @@
+import { Breakpoints } from '../types';
+
+// A responsive value can be a string, number, or anything with a toString method
+type ResponsiveValue = string | number | { toString(): string };
+
+// Map of breakpoint keys to responsive values
+type BreakpointMap = Partial<Record<Breakpoints, ResponsiveValue>>;
+
+// Ordered list of breakpoints to iterate over
+const BPS: Breakpoints[] = ['mobile', 'sm', 'md', 'lg', 'xl', '2xl'];
+/**
+ * Generate a responsive calc() subtraction: calc(base - other).
+ *
+ * - base: static value (string/number), e.g. "100vh"
+ * - other: either a single value or a BreakpointMap
+ *
+ * Example:
+ * calcResponsiveSubtract('100vh', { mobile: '50px', md: '80px' })
+ *
+ * => {
+ *   mobile: "calc(100vh - 50px)",
+ *   md: "calc(100vh - 80px)"
+ * }
+ */
+export function calcResponsiveSubtract(base: ResponsiveValue, other: ResponsiveValue | BreakpointMap): BreakpointMap {
+  const build = (otherVal: ResponsiveValue) => `calc(${String(base)} - ${String(otherVal)})`;
+
+  const out: BreakpointMap = {};
+
+  const isMapLike = other && typeof other === 'object' && !Array.isArray(other) && Object.keys(other).some((k) => BPS.includes(k as Breakpoints));
+
+  if (isMapLike) {
+    const map = other as BreakpointMap;
+    for (const bp of BPS) {
+      const token = map[bp];
+      if (token === undefined) continue;
+      out[bp] = build(token);
+    }
+  } else {
+    const token = other as ResponsiveValue;
+    for (const bp of BPS) {
+      out[bp] = build(token);
+    }
+  }
+
+  return out;
+}

package/src/{utils → styles/utils}/generateResponsiveMedia.ts

@@ -1,17 +1,15 @@
 // utils/generateResponsive.ts
-import { queries } from '../styles/mediaqueries';
-
-// Define the supported breakpoint keys
-type BreakpointKey = 'mobile' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+import { queries } from '../mediaqueries';
+import { Breakpoints } from '../types';
 
 // A responsive value can be a string, number, or anything with a toString method
 type ResponsiveValue = string | number | { toString(): string };
 
 // Map of breakpoint keys to responsive values
-type BreakpointMap = Partial<Record<BreakpointKey, ResponsiveValue>>;
+type BreakpointMap = Partial<Record<Breakpoints, ResponsiveValue>>;
 
 // Ordered list of breakpoints to iterate over
-const BPS: BreakpointKey[] = ['mobile', 'sm', 'md', 'lg', 'xl', '2xl'];
+const BPS: Breakpoints[] = ['mobile', 'sm', 'md', 'lg', 'xl', '2xl'];
 
 /**
  * Generates a fully responsive CSS object for Vanilla Extract
@@ -41,7 +39,7 @@ export function generateResponsiveMedia(
   // 1️⃣ Process normal CSS properties
   for (const [cssProp, valOrMap] of Object.entries(props)) {
     const isMapLike =
-      valOrMap && typeof valOrMap === 'object' && !Array.isArray(valOrMap) && Object.keys(valOrMap).some((k) => BPS.includes(k as BreakpointKey));
+      valOrMap && typeof valOrMap === 'object' && !Array.isArray(valOrMap) && Object.keys(valOrMap).some((k) => BPS.includes(k as Breakpoints));
 
     if (isMapLike) {
       // Responsive map provided
@@ -89,41 +87,3 @@ export function generateResponsiveMedia(
 
   return result;
 }
-
-/**
- * Generate a responsive calc() subtraction: calc(base - other).
- *
- * - base: static value (string/number), e.g. "100vh"
- * - other: either a single value or a BreakpointMap
- *
- * Example:
- * calcResponsiveSubtract('100vh', { mobile: '50px', md: '80px' })
- *
- * => {
- *   mobile: "calc(100vh - 50px)",
- *   md: "calc(100vh - 80px)"
- * }
- */
-export function calcResponsiveSubtract(base: ResponsiveValue, other: ResponsiveValue | BreakpointMap): BreakpointMap {
-  const build = (otherVal: ResponsiveValue) => `calc(${String(base)} - ${String(otherVal)})`;
-
-  const out: BreakpointMap = {};
-
-  const isMapLike = other && typeof other === 'object' && !Array.isArray(other) && Object.keys(other).some((k) => BPS.includes(k as BreakpointKey));
-
-  if (isMapLike) {
-    const map = other as BreakpointMap;
-    for (const bp of BPS) {
-      const token = map[bp];
-      if (token === undefined) continue;
-      out[bp] = build(token);
-    }
-  } else {
-    const token = other as ResponsiveValue;
-    for (const bp of BPS) {
-      out[bp] = build(token);
-    }
-  }
-
-  return out;
-}