@webstacks/ui 0.4.2 → 0.4.4

package/dist/index.js

@@ -868,6 +868,34 @@ var columnMap = {
   11: "grid-cols-11",
   12: "grid-cols-12"
 };
+var mdColumnMap = {
+  1: "md:grid-cols-1",
+  2: "md:grid-cols-2",
+  3: "md:grid-cols-3",
+  4: "md:grid-cols-4",
+  5: "md:grid-cols-5",
+  6: "md:grid-cols-6",
+  7: "md:grid-cols-7",
+  8: "md:grid-cols-8",
+  9: "md:grid-cols-9",
+  10: "md:grid-cols-10",
+  11: "md:grid-cols-11",
+  12: "md:grid-cols-12"
+};
+var lgColumnMap = {
+  1: "lg:grid-cols-1",
+  2: "lg:grid-cols-2",
+  3: "lg:grid-cols-3",
+  4: "lg:grid-cols-4",
+  5: "lg:grid-cols-5",
+  6: "lg:grid-cols-6",
+  7: "lg:grid-cols-7",
+  8: "lg:grid-cols-8",
+  9: "lg:grid-cols-9",
+  10: "lg:grid-cols-10",
+  11: "lg:grid-cols-11",
+  12: "lg:grid-cols-12"
+};
 var Grid = React11.forwardRef(
   ({ as: Comp = "div", className, columns = 12, gap, gapX, gapY, align, justify, ...props }, ref) => {
     let columnClasses;
@@ -876,8 +904,8 @@ var Grid = React11.forwardRef(
     } else {
       const classes = [];
       if (columns.narrow) classes.push(columnMap[columns.narrow]);
-      if (columns.regular) classes.push(`md:${columnMap[columns.regular]}`);
-      if (columns.wide) classes.push(`lg:${columnMap[columns.wide]}`);
+      if (columns.regular) classes.push(mdColumnMap[columns.regular]);
+      if (columns.wide) classes.push(lgColumnMap[columns.wide]);
       columnClasses = classes.join(" ");
     }
     return /* @__PURE__ */ jsx10(
@@ -942,6 +970,34 @@ var spanMap = {
   11: "col-span-11",
   12: "col-span-12"
 };
+var mdSpanMap = {
+  1: "md:col-span-1",
+  2: "md:col-span-2",
+  3: "md:col-span-3",
+  4: "md:col-span-4",
+  5: "md:col-span-5",
+  6: "md:col-span-6",
+  7: "md:col-span-7",
+  8: "md:col-span-8",
+  9: "md:col-span-9",
+  10: "md:col-span-10",
+  11: "md:col-span-11",
+  12: "md:col-span-12"
+};
+var lgSpanMap = {
+  1: "lg:col-span-1",
+  2: "lg:col-span-2",
+  3: "lg:col-span-3",
+  4: "lg:col-span-4",
+  5: "lg:col-span-5",
+  6: "lg:col-span-6",
+  7: "lg:col-span-7",
+  8: "lg:col-span-8",
+  9: "lg:col-span-9",
+  10: "lg:col-span-10",
+  11: "lg:col-span-11",
+  12: "lg:col-span-12"
+};
 var GridColumn = React11.forwardRef(
   ({ as: Comp = "div", className, span, start, ...props }, ref) => {
     let spanClasses;
@@ -950,8 +1006,8 @@ var GridColumn = React11.forwardRef(
     } else if (span) {
       const classes = [];
       if (span.narrow) classes.push(spanMap[span.narrow]);
-      if (span.regular) classes.push(`md:${spanMap[span.regular]}`);
-      if (span.wide) classes.push(`lg:${spanMap[span.wide]}`);
+      if (span.regular) classes.push(mdSpanMap[span.regular]);
+      if (span.wide) classes.push(lgSpanMap[span.wide]);
       spanClasses = classes.join(" ");
     } else {
       spanClasses = "";
@@ -1400,6 +1456,14 @@ var directionMap = {
   horizontal: "flex-row",
   vertical: "flex-col"
 };
+var mdDirectionMap = {
+  horizontal: "md:flex-row",
+  vertical: "md:flex-col"
+};
+var lgDirectionMap = {
+  horizontal: "lg:flex-row",
+  vertical: "lg:flex-col"
+};
 var gapMap = {
   none: "gap-0",
   condensed: "gap-2",
@@ -1407,6 +1471,20 @@ var gapMap = {
   spacious: "gap-6",
   "extra-spacious": "gap-8"
 };
+var mdGapMap = {
+  none: "md:gap-0",
+  condensed: "md:gap-2",
+  normal: "md:gap-4",
+  spacious: "md:gap-6",
+  "extra-spacious": "md:gap-8"
+};
+var lgGapMap = {
+  none: "lg:gap-0",
+  condensed: "lg:gap-2",
+  normal: "lg:gap-4",
+  spacious: "lg:gap-6",
+  "extra-spacious": "lg:gap-8"
+};
 var alignMap = {
   start: "items-start",
   center: "items-center",
@@ -1414,6 +1492,20 @@ var alignMap = {
   stretch: "items-stretch",
   baseline: "items-baseline"
 };
+var mdAlignMap = {
+  start: "md:items-start",
+  center: "md:items-center",
+  end: "md:items-end",
+  stretch: "md:items-stretch",
+  baseline: "md:items-baseline"
+};
+var lgAlignMap = {
+  start: "lg:items-start",
+  center: "lg:items-center",
+  end: "lg:items-end",
+  stretch: "lg:items-stretch",
+  baseline: "lg:items-baseline"
+};
 var justifyMap = {
   start: "justify-start",
   center: "justify-center",
@@ -1422,16 +1514,37 @@ var justifyMap = {
   "space-around": "justify-around",
   "space-evenly": "justify-evenly"
 };
-function resolveResponsive3(value, map) {
+var mdJustifyMap = {
+  start: "md:justify-start",
+  center: "md:justify-center",
+  end: "md:justify-end",
+  "space-between": "md:justify-between",
+  "space-around": "md:justify-around",
+  "space-evenly": "md:justify-evenly"
+};
+var lgJustifyMap = {
+  start: "lg:justify-start",
+  center: "lg:justify-center",
+  end: "lg:justify-end",
+  "space-between": "lg:justify-between",
+  "space-around": "lg:justify-around",
+  "space-evenly": "lg:justify-evenly"
+};
+function resolveResponsive3(value, maps) {
   if (!value) return [];
-  if (typeof value === "string") return [map[value]].filter(Boolean);
+  if (typeof value === "string") return [maps.narrow[value]].filter(Boolean);
   const classes = [];
-  const prefixes = { narrow: "", regular: "md:", wide: "lg:" };
-  for (const [bp, val] of Object.entries(value)) {
-    if (val && map[val]) {
-      const prefix = prefixes[bp] || "";
-      classes.push(`${prefix}${map[val]}`);
-    }
+  if (value.narrow) {
+    const cls = maps.narrow[value.narrow];
+    if (cls) classes.push(cls);
+  }
+  if (value.regular) {
+    const cls = maps.regular[value.regular];
+    if (cls) classes.push(cls);
+  }
+  if (value.wide) {
+    const cls = maps.wide[value.wide];
+    if (cls) classes.push(cls);
   }
   return classes;
 }
@@ -1448,10 +1561,10 @@ var Stack = React15.forwardRef(
     ...props
   }, ref) => {
     const responsiveClasses = [
-      ...resolveResponsive3(direction, directionMap),
-      ...resolveResponsive3(gap, gapMap),
-      ...resolveResponsive3(align, alignMap),
-      ...resolveResponsive3(justify, justifyMap)
+      ...resolveResponsive3(direction, { narrow: directionMap, regular: mdDirectionMap, wide: lgDirectionMap }),
+      ...resolveResponsive3(gap, { narrow: gapMap, regular: mdGapMap, wide: lgGapMap }),
+      ...resolveResponsive3(align, { narrow: alignMap, regular: mdAlignMap, wide: lgAlignMap }),
+      ...resolveResponsive3(justify, { narrow: justifyMap, regular: mdJustifyMap, wide: lgJustifyMap })
     ];
     const isResponsiveDirection = typeof direction === "object";
     const isResponsiveGap = typeof gap === "object";