@latte-macchiat-io/latte-vanilla-components 0.0.324 → 0.0.326

package/package.json

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

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

@@ -5,6 +5,7 @@ import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 import { queries } from '../../styles/mediaqueries';
 import { themeContract } from '../../theme/contract.css';
 
+import { generateResponsive } from '../../utils/generateResponsive';
 import { generateResponsiveMedia } from '../../utils/generateResponsiveMedia';
 import { generateResponsiveMediaCalc } from '../../utils/generateResponsiveMediaCalc';
 import { mergeResponsiveMedias } from '../../utils/mergeResponsiveMedias';
@@ -185,11 +186,18 @@ export const carouselBullets = style({
   position: 'absolute',
   justifyContent: 'center',
 
-  '@media': mergeResponsiveMedias(
-    generateResponsiveMedia({
+  '@media': generateResponsive(
+    {
       gap: themeContract.carousel.bullet.gap,
-    }),
-    generateResponsiveMediaCalc('top', '100%', themeContract.carousel.bullet.positionVerticalOffset, '+')
+    },
+    [
+      {
+        property: 'top',
+        base: '100%',
+        offset: themeContract.carousel.bullet.positionVerticalOffset,
+        operator: '+',
+      },
+    ]
   ),
 });
 

package/src/utils/generateResponsive.ts

@@ -0,0 +1,80 @@
+// utils/generateResponsive.ts
+import { queries } from '../styles/mediaqueries';
+
+type BreakpointKey = 'mobile' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+type ResponsiveValue = string | number | { toString(): string };
+type BreakpointMap = Partial<Record<BreakpointKey, ResponsiveValue>>;
+
+const BPS: BreakpointKey[] = ['mobile', 'sm', 'md', 'lg', 'xl', '2xl'];
+
+/**
+ * Generate fully responsive CSS object for Vanilla Extract
+ *
+ * @param props - normal CSS properties (string/number or responsive map)
+ * @param calcProps - optional array of calc() rules
+ * @returns object ready for `@media` in Vanilla Extract
+ */
+export function generateResponsive(
+  props: Record<string, ResponsiveValue | BreakpointMap>,
+  calcProps?: Array<{
+    property: string;
+    base: ResponsiveValue | BreakpointMap;
+    offset: ResponsiveValue | BreakpointMap;
+    operator?: string; // + - * / ...
+  }>
+): Record<string, Record<string, string>> {
+  const result: Record<string, Record<string, string>> = {};
+
+  const toCssValue = (v: ResponsiveValue) => {
+    const s = String(v);
+    return s.startsWith('--') ? `var(${s})` : s;
+  };
+
+  // 1️⃣ Normal props
+  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));
+
+    if (isMapLike) {
+      const map = valOrMap as BreakpointMap;
+      for (const bp of BPS) {
+        const token = map[bp];
+        if (token === undefined) continue;
+        const media = queries[bp as keyof typeof queries];
+        if (!result[media]) result[media] = {};
+        result[media][cssProp] = toCssValue(token);
+      }
+    } else {
+      // single value => apply to all breakpoints
+      const token = valOrMap as ResponsiveValue;
+      for (const bp of BPS) {
+        const media = queries[bp as keyof typeof queries];
+        if (!result[media]) result[media] = {};
+        result[media][cssProp] = toCssValue(token);
+      }
+    }
+  }
+
+  // 2️⃣ Calc props
+  if (calcProps) {
+    for (const { property, base, offset, operator = '+' } of calcProps) {
+      for (const bp of BPS) {
+        const media = queries[bp as keyof typeof queries];
+
+        // ✅ TypeScript safe access
+        const baseValue =
+          typeof base === 'object' && !Array.isArray(base) ? ((base as BreakpointMap)[bp] ?? Object.values(base as BreakpointMap)[0]) : base;
+
+        const offsetValue =
+          typeof offset === 'object' && !Array.isArray(offset)
+            ? ((offset as BreakpointMap)[bp] ?? Object.values(offset as BreakpointMap)[0])
+            : offset;
+
+        if (!result[media]) result[media] = {};
+        result[media][property] = `calc(${baseValue} ${operator} ${offsetValue})`;
+      }
+    }
+  }
+
+  return result;
+}