@puzzle-ui/ui 0.4.0 → 0.5.1

package/dist/components/layout/stack/index.d.ts

@@ -4,20 +4,22 @@ type StackDirection = "row" | "col";
 type ResponsiveDirection = ResponsiveValue<StackDirection>;
 type StackMainAlignment = "start" | "center" | "end" | "stretch" | "around" | "between" | "evenly";
 type StackCrossAlignment = "start" | "center" | "end" | "stretch";
+type ResponsiveMainAlignment = ResponsiveValue<StackMainAlignment>;
+type ResponsiveCrossAlignment = ResponsiveValue<StackCrossAlignment>;
 type StackRowProps = {
   direction: "row";
-  alignH?: StackMainAlignment;
-  alignV?: StackCrossAlignment;
+  alignH?: ResponsiveMainAlignment;
+  alignV?: ResponsiveCrossAlignment;
 };
 type StackColProps = {
   direction?: "col";
-  alignH?: StackCrossAlignment;
-  alignV?: StackMainAlignment;
+  alignH?: ResponsiveCrossAlignment;
+  alignV?: ResponsiveMainAlignment;
 };
 type StackResponsiveProps = {
   direction: ResponsiveDirection;
-  alignH?: StackMainAlignment;
-  alignV?: StackMainAlignment;
+  alignH?: ResponsiveMainAlignment;
+  alignV?: ResponsiveMainAlignment;
 };
 type StackOwnProps<C extends ElementType> = {
   as?: C;

package/dist/components/layout/stack/index.js

@@ -3,7 +3,7 @@ import { BREAKPOINTS, cn } from "@puzzle-ui/core";
 import { Children, Fragment, cloneElement, createElement, isValidElement } from "react";
 import { jsx } from "react/jsx-runtime";
 // src/components/layout/stack/index.tsx
-const Stack = ({ as: Component = "div", direction = "col", alignH, alignV, wrap = "nowrap", gap = "md", divider, reverse = false, children, className, ...props }) => {
+const Stack = ({ as: Component = "div", direction = "col", alignH, alignV, wrap = "wrap", gap = "md", divider, reverse = false, children, className, ...props }) => {
 	const directions = typeof direction === "string" ? { mobile: direction } : {
 		...direction,
 		mobile: direction.mobile ?? "col"
@@ -13,7 +13,23 @@ const Stack = ({ as: Component = "div", direction = "col", alignH, alignV, wrap
 		return value ? [`direction-${breakpoint}-${value}`] : [];
 	});
 	const hasAlignment = alignH !== void 0 || alignV !== void 0;
-	const classes = cn("puzzle-stack", ...directionClasses, reverse && "reverse", wrap, `gap-${gap}`, alignH && `align-h-${alignH}`, alignV && `align-v-${alignV}`, hasAlignment && "has-alignment", className);
+	const responsiveAlignH = typeof alignH === "string" ? { mobile: alignH } : {
+		...alignH,
+		mobile: alignH?.mobile ?? "start"
+	};
+	const responsiveAlignV = typeof alignV === "string" ? { mobile: alignV } : {
+		...alignV,
+		mobile: alignV?.mobile ?? "start"
+	};
+	const responsiveAlignHClasses = BREAKPOINTS.flatMap((breakpoint) => {
+		const value = responsiveAlignH[breakpoint];
+		return value ? [`align-h-${breakpoint}-${value}`] : [];
+	});
+	const responsiveAlignVClasses = BREAKPOINTS.flatMap((breakpoint) => {
+		const value = responsiveAlignV[breakpoint];
+		return value ? [`align-v-${breakpoint}-${value}`] : [];
+	});
+	const classes = cn("puzzle-stack", ...directionClasses, reverse && "reverse", wrap, `gap-${gap}`, ...responsiveAlignHClasses, ...responsiveAlignVClasses, hasAlignment && "has-alignment", className);
 	const childrenWithDividers = divider ? Children.toArray(children).flatMap((child, index, arr) => {
 		if (index === arr.length - 1) return [child];
 		const dividerKey = `stack-divider-${isValidElement(child) ? child.key : index}`;

package/dist/components/layout/stack/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/layout/stack/index.tsx"],"sourcesContent":["import { BREAKPOINTS, cn } from \"@puzzle-ui/core\";\nimport {\n  Children,\n  cloneElement,\n  createElement,\n  Fragment,\n  isValidElement,\n  type ComponentPropsWithRef,\n  type ElementType,\n  type ReactNode,\n} from \"react\";\nimport type { ResponsiveValue } from \"@puzzle-ui/core\";\nimport \"./stack.css\";\n\ntype StackDirection = \"row\" | \"col\";\ntype ResponsiveDirection = ResponsiveValue<StackDirection>;\n\ntype StackMainAlignment =\n  | \"start\"\n  | \"center\"\n  | \"end\"\n  | \"stretch\"\n  | \"around\"\n  | \"between\"\n  | \"evenly\";\n\ntype StackCrossAlignment = \"start\" | \"center\" | \"end\" | \"stretch\";\n\ntype StackRowProps = {\n  direction: \"row\";\n  alignH?: StackMainAlignment;\n  alignV?: StackCrossAlignment;\n};\n\ntype StackColProps = {\n  direction?: \"col\";\n  alignH?: StackCrossAlignment;\n  alignV?: StackMainAlignment;\n};\n\ntype StackResponsiveProps = {\n  direction: ResponsiveDirection;\n  alignH?: StackMainAlignment;\n  alignV?: StackMainAlignment;\n};\n\ntype StackOwnProps<C extends ElementType> = {\n  as?: C;\n  wrap?: \"wrap\" | \"nowrap\" | \"wrap-reverse\";\n  gap?: \"0\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n  divider?: ReactNode;\n  reverse?: boolean;\n} & (StackRowProps | StackColProps | StackResponsiveProps);\n\ntype StackProps<C extends ElementType = \"div\"> = StackOwnProps<C> &\n  Omit<ComponentPropsWithRef<C>, keyof StackOwnProps<C> | \"as\">;\n\nconst Stack = ({\n  as: Component = \"div\",\n  direction = \"col\",\n  alignH,\n  alignV,\n  wrap = \"nowrap\",\n  gap = \"md\",\n  divider,\n  reverse = false,\n  children,\n  className,\n  ...props\n}: StackProps<ElementType>) => {\n  const directions: ResponsiveDirection =\n    typeof direction === \"string\"\n      ? { mobile: direction }\n      : {\n          ...direction,\n          mobile: direction.mobile ?? \"col\",\n        };\n\n  const directionClasses = BREAKPOINTS.flatMap((breakpoint) => {\n    const value = directions[breakpoint];\n\n    return value ? [`direction-${breakpoint}-${value}`] : [];\n  });\n\n  const hasAlignment = alignH !== undefined || alignV !== undefined;\n\n  const classes = cn(\n    \"puzzle-stack\",\n    ...directionClasses,\n    reverse && \"reverse\",\n    wrap,\n    `gap-${gap}`,\n    alignH && `align-h-${alignH}`,\n    alignV && `align-v-${alignV}`,\n    hasAlignment && \"has-alignment\",\n    className,\n  );\n\n  const childrenWithDividers = divider\n    ? Children.toArray(children).flatMap((child, index, arr) => {\n        if (index === arr.length - 1) {\n          return [child];\n        }\n\n        // Children keep the keys assigned by Children.toArray; only dividers get new ones.\n        const dividerKey = `stack-divider-${isValidElement(child) ? child.key : index}`;\n        const clonedDivider = isValidElement(divider)\n          ? cloneElement(divider, { key: dividerKey })\n          : createElement(Fragment, { key: dividerKey }, divider);\n\n        return [child, clonedDivider];\n      })\n    : children;\n\n  return (\n    <Component className={classes} {...props}>\n      {childrenWithDividers}\n    </Component>\n  );\n};\n\nexport {\n  Stack,\n  type StackProps,\n  type ResponsiveDirection,\n  type StackMainAlignment,\n  type StackCrossAlignment,\n};\n"],"mappings":";;;;;AAyDA,MAAM,SAAS,EACb,IAAI,YAAY,OAChB,YAAY,OACZ,QACA,QACA,OAAO,UACP,MAAM,MACN,SACA,UAAU,OACV,UACA,WACA,GAAG,YAC0B;CAC7B,MAAM,aACJ,OAAO,cAAc,WACjB,EAAE,QAAQ,UAAU,IACpB;EACE,GAAG;EACH,QAAQ,UAAU,UAAU;CAC9B;CAEN,MAAM,mBAAmB,YAAY,SAAS,eAAe;EAC3D,MAAM,QAAQ,WAAW;EAEzB,OAAO,QAAQ,CAAC,aAAa,WAAW,GAAG,OAAO,IAAI,CAAC;CACzD,CAAC;CAED,MAAM,eAAe,WAAW,KAAA,KAAa,WAAW,KAAA;CAExD,MAAM,UAAU,GACd,gBACA,GAAG,kBACH,WAAW,WACX,MACA,OAAO,OACP,UAAU,WAAW,UACrB,UAAU,WAAW,UACrB,gBAAgB,iBAChB,SACF;CAEA,MAAM,uBAAuB,UACzB,SAAS,QAAQ,QAAQ,CAAC,CAAC,SAAS,OAAO,OAAO,QAAQ;EACxD,IAAI,UAAU,IAAI,SAAS,GACzB,OAAO,CAAC,KAAK;EAIf,MAAM,aAAa,iBAAiB,eAAe,KAAK,IAAI,MAAM,MAAM;EAKxE,OAAO,CAAC,OAJc,eAAe,OAAO,IACxC,aAAa,SAAS,EAAE,KAAK,WAAW,CAAC,IACzC,cAAc,UAAU,EAAE,KAAK,WAAW,GAAG,OAAO,CAE5B;CAC9B,CAAC,IACD;CAEJ,OACE,oBAAC,WAAD;EAAW,WAAW;EAAS,GAAI;EAChC,UAAA;CACQ,CAAA;AAEf"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/layout/stack/index.tsx"],"sourcesContent":["import { BREAKPOINTS, cn } from \"@puzzle-ui/core\";\nimport {\n  Children,\n  cloneElement,\n  createElement,\n  Fragment,\n  isValidElement,\n  type ComponentPropsWithRef,\n  type ElementType,\n  type ReactNode,\n} from \"react\";\nimport type { ResponsiveConfig, ResponsiveValue } from \"@puzzle-ui/core\";\nimport \"./stack.css\";\n\ntype StackDirection = \"row\" | \"col\";\ntype ResponsiveDirection = ResponsiveValue<StackDirection>;\n\ntype StackMainAlignment =\n  | \"start\"\n  | \"center\"\n  | \"end\"\n  | \"stretch\"\n  | \"around\"\n  | \"between\"\n  | \"evenly\";\n\ntype StackCrossAlignment = \"start\" | \"center\" | \"end\" | \"stretch\";\n\ntype ResponsiveMainAlignment = ResponsiveValue<StackMainAlignment>;\ntype ResponsiveCrossAlignment = ResponsiveValue<StackCrossAlignment>;\n\ntype StackRowProps = {\n  direction: \"row\";\n  alignH?: ResponsiveMainAlignment;\n  alignV?: ResponsiveCrossAlignment;\n};\n\ntype StackColProps = {\n  direction?: \"col\";\n  alignH?: ResponsiveCrossAlignment;\n  alignV?: ResponsiveMainAlignment;\n};\n\ntype StackResponsiveProps = {\n  direction: ResponsiveDirection;\n  alignH?: ResponsiveMainAlignment;\n  alignV?: ResponsiveMainAlignment;\n};\n\ntype StackOwnProps<C extends ElementType> = {\n  as?: C;\n  wrap?: \"wrap\" | \"nowrap\" | \"wrap-reverse\";\n  gap?: \"0\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n  divider?: ReactNode;\n  reverse?: boolean;\n} & (StackRowProps | StackColProps | StackResponsiveProps);\n\ntype StackProps<C extends ElementType = \"div\"> = StackOwnProps<C> &\n  Omit<ComponentPropsWithRef<C>, keyof StackOwnProps<C> | \"as\">;\n\nconst Stack = ({\n  as: Component = \"div\",\n  direction = \"col\",\n  alignH,\n  alignV,\n  wrap = \"wrap\",\n  gap = \"md\",\n  divider,\n  reverse = false,\n  children,\n  className,\n  ...props\n}: StackProps<ElementType>) => {\n  const directions: ResponsiveConfig<StackDirection> =\n    typeof direction === \"string\"\n      ? { mobile: direction }\n      : {\n          ...direction,\n          mobile: direction.mobile ?? \"col\",\n        };\n\n  const directionClasses = BREAKPOINTS.flatMap((breakpoint) => {\n    const value = directions[breakpoint];\n\n    return value ? [`direction-${breakpoint}-${value}`] : [];\n  });\n\n  const hasAlignment = alignH !== undefined || alignV !== undefined;\n\n  const responsiveAlignH: ResponsiveConfig<StackMainAlignment> =\n    typeof alignH === \"string\"\n      ? { mobile: alignH }\n      : { ...alignH, mobile: alignH?.mobile ?? \"start\" };\n  const responsiveAlignV: ResponsiveConfig<StackMainAlignment> =\n    typeof alignV === \"string\"\n      ? { mobile: alignV }\n      : { ...alignV, mobile: alignV?.mobile ?? \"start\" };\n  const responsiveAlignHClasses = BREAKPOINTS.flatMap((breakpoint) => {\n    const value = responsiveAlignH[breakpoint];\n\n    return value ? [`align-h-${breakpoint}-${value}`] : [];\n  });\n\n  const responsiveAlignVClasses = BREAKPOINTS.flatMap((breakpoint) => {\n    const value = responsiveAlignV[breakpoint];\n\n    return value ? [`align-v-${breakpoint}-${value}`] : [];\n  });\n\n  const classes = cn(\n    \"puzzle-stack\",\n    ...directionClasses,\n    reverse && \"reverse\",\n    wrap,\n    `gap-${gap}`,\n    ...responsiveAlignHClasses,\n    ...responsiveAlignVClasses,\n    hasAlignment && \"has-alignment\",\n    className,\n  );\n\n  const childrenWithDividers = divider\n    ? Children.toArray(children).flatMap((child, index, arr) => {\n        if (index === arr.length - 1) {\n          return [child];\n        }\n\n        // Children keep the keys assigned by Children.toArray; only dividers get new ones.\n        const dividerKey = `stack-divider-${isValidElement(child) ? child.key : index}`;\n        const clonedDivider = isValidElement(divider)\n          ? cloneElement(divider, { key: dividerKey })\n          : createElement(Fragment, { key: dividerKey }, divider);\n\n        return [child, clonedDivider];\n      })\n    : children;\n\n  return (\n    <Component className={classes} {...props}>\n      {childrenWithDividers}\n    </Component>\n  );\n};\n\nexport {\n  Stack,\n  type StackProps,\n  type ResponsiveDirection,\n  type StackMainAlignment,\n  type StackCrossAlignment,\n};\n"],"mappings":";;;;;AA4DA,MAAM,SAAS,EACb,IAAI,YAAY,OAChB,YAAY,OACZ,QACA,QACA,OAAO,QACP,MAAM,MACN,SACA,UAAU,OACV,UACA,WACA,GAAG,YAC0B;CAC7B,MAAM,aACJ,OAAO,cAAc,WACjB,EAAE,QAAQ,UAAU,IACpB;EACE,GAAG;EACH,QAAQ,UAAU,UAAU;CAC9B;CAEN,MAAM,mBAAmB,YAAY,SAAS,eAAe;EAC3D,MAAM,QAAQ,WAAW;EAEzB,OAAO,QAAQ,CAAC,aAAa,WAAW,GAAG,OAAO,IAAI,CAAC;CACzD,CAAC;CAED,MAAM,eAAe,WAAW,KAAA,KAAa,WAAW,KAAA;CAExD,MAAM,mBACJ,OAAO,WAAW,WACd,EAAE,QAAQ,OAAO,IACjB;EAAE,GAAG;EAAQ,QAAQ,QAAQ,UAAU;CAAQ;CACrD,MAAM,mBACJ,OAAO,WAAW,WACd,EAAE,QAAQ,OAAO,IACjB;EAAE,GAAG;EAAQ,QAAQ,QAAQ,UAAU;CAAQ;CACrD,MAAM,0BAA0B,YAAY,SAAS,eAAe;EAClE,MAAM,QAAQ,iBAAiB;EAE/B,OAAO,QAAQ,CAAC,WAAW,WAAW,GAAG,OAAO,IAAI,CAAC;CACvD,CAAC;CAED,MAAM,0BAA0B,YAAY,SAAS,eAAe;EAClE,MAAM,QAAQ,iBAAiB;EAE/B,OAAO,QAAQ,CAAC,WAAW,WAAW,GAAG,OAAO,IAAI,CAAC;CACvD,CAAC;CAED,MAAM,UAAU,GACd,gBACA,GAAG,kBACH,WAAW,WACX,MACA,OAAO,OACP,GAAG,yBACH,GAAG,yBACH,gBAAgB,iBAChB,SACF;CAEA,MAAM,uBAAuB,UACzB,SAAS,QAAQ,QAAQ,CAAC,CAAC,SAAS,OAAO,OAAO,QAAQ;EACxD,IAAI,UAAU,IAAI,SAAS,GACzB,OAAO,CAAC,KAAK;EAIf,MAAM,aAAa,iBAAiB,eAAe,KAAK,IAAI,MAAM,MAAM;EAKxE,OAAO,CAAC,OAJc,eAAe,OAAO,IACxC,aAAa,SAAS,EAAE,KAAK,WAAW,CAAC,IACzC,cAAc,UAAU,EAAE,KAAK,WAAW,GAAG,OAAO,CAE5B;CAC9B,CAAC,IACD;CAEJ,OACE,oBAAC,WAAD;EAAW,WAAW;EAAS,GAAI;EAChC,UAAA;CACQ,CAAA;AAEf"}

package/dist/components/layout/stack/stack.css

@@ -1,10 +1,19 @@
 .puzzle-stack {
+  --stack-align-h: flex-start;
+  --stack-align-v: flex-start;
+  --stack-main-alignment: var(--stack-align-v);
+  --stack-cross-alignment: var(--stack-align-h);
   gap: var(--puzzle-space-4, 1rem);
   justify-content: flex-start;
   align-items: stretch;
   display: flex;
 }
 
+.puzzle-stack.has-alignment {
+  justify-content: var(--stack-main-alignment);
+  align-items: var(--stack-cross-alignment);
+}
+
 .puzzle-stack.nowrap {
   flex-wrap: nowrap;
 }
@@ -30,18 +39,20 @@
 }
 
 .puzzle-stack.gap-md {
-  gap: var(--puzzle-space-3, .75rem);
+  gap: var(--puzzle-space-4, 1rem);
 }
 
 .puzzle-stack.gap-lg {
-  gap: var(--puzzle-space-4, 1rem);
+  gap: var(--puzzle-space-8, 2rem);
 }
 
 .puzzle-stack.gap-xl {
-  gap: var(--puzzle-space-5, 1.25rem);
+  gap: var(--puzzle-space-16, 4rem);
 }
 
 .puzzle-stack.direction-mobile-row {
+  --stack-main-alignment: var(--stack-align-h);
+  --stack-cross-alignment: var(--stack-align-v);
   flex-direction: row;
 }
 
@@ -50,6 +61,8 @@
 }
 
 .puzzle-stack.direction-mobile-col {
+  --stack-main-alignment: var(--stack-align-v);
+  --stack-cross-alignment: var(--stack-align-h);
   flex-direction: column;
 }
 
@@ -57,52 +70,66 @@
   flex-direction: column-reverse;
 }
 
-.puzzle-stack.direction-mobile-row.align-h-start, .puzzle-stack.direction-mobile-col.align-v-start {
-  justify-content: flex-start;
+.puzzle-stack.align-h-mobile-start {
+  --stack-align-h: flex-start;
 }
 
-.puzzle-stack.direction-mobile-row.align-h-center, .puzzle-stack.direction-mobile-col.align-v-center {
-  justify-content: center;
+.puzzle-stack.align-h-mobile-center {
+  --stack-align-h: center;
 }
 
-.puzzle-stack.direction-mobile-row.align-h-end, .puzzle-stack.direction-mobile-col.align-v-end {
-  justify-content: flex-end;
+.puzzle-stack.align-h-mobile-end {
+  --stack-align-h: flex-end;
 }
 
-.puzzle-stack.direction-mobile-row.align-h-stretch, .puzzle-stack.direction-mobile-col.align-v-stretch {
-  justify-content: stretch;
+.puzzle-stack.align-h-mobile-stretch {
+  --stack-align-h: stretch;
 }
 
-.puzzle-stack.direction-mobile-row.align-h-around, .puzzle-stack.direction-mobile-col.align-v-around {
-  justify-content: space-around;
+.puzzle-stack.align-h-mobile-around {
+  --stack-align-h: space-around;
 }
 
-.puzzle-stack.direction-mobile-row.align-h-between, .puzzle-stack.direction-mobile-col.align-v-between {
-  justify-content: space-between;
+.puzzle-stack.align-h-mobile-between {
+  --stack-align-h: space-between;
 }
 
-.puzzle-stack.direction-mobile-row.align-h-evenly, .puzzle-stack.direction-mobile-col.align-v-evenly {
-  justify-content: space-evenly;
+.puzzle-stack.align-h-mobile-evenly {
+  --stack-align-h: space-evenly;
 }
 
-.puzzle-stack.direction-mobile-row.align-v-start, .puzzle-stack.direction-mobile-col.align-h-start {
-  align-items: flex-start;
+.puzzle-stack.align-v-mobile-start {
+  --stack-align-v: flex-start;
 }
 
-.puzzle-stack.direction-mobile-row.align-v-center, .puzzle-stack.direction-mobile-col.align-h-center {
-  align-items: center;
+.puzzle-stack.align-v-mobile-center {
+  --stack-align-v: center;
 }
 
-.puzzle-stack.direction-mobile-row.align-v-end, .puzzle-stack.direction-mobile-col.align-h-end {
-  align-items: flex-end;
+.puzzle-stack.align-v-mobile-end {
+  --stack-align-v: flex-end;
 }
 
-.puzzle-stack.direction-mobile-row.align-v-stretch, .puzzle-stack.direction-mobile-col.align-h-stretch {
-  align-items: stretch;
+.puzzle-stack.align-v-mobile-stretch {
+  --stack-align-v: stretch;
+}
+
+.puzzle-stack.align-v-mobile-around {
+  --stack-align-v: space-around;
+}
+
+.puzzle-stack.align-v-mobile-between {
+  --stack-align-v: space-between;
+}
+
+.puzzle-stack.align-v-mobile-evenly {
+  --stack-align-v: space-evenly;
 }
 
 @media (width >= 768px) {
   .puzzle-stack.direction-tablet-row {
+    --stack-main-alignment: var(--stack-align-h);
+    --stack-cross-alignment: var(--stack-align-v);
     flex-direction: row;
   }
 
@@ -111,6 +138,8 @@
   }
 
   .puzzle-stack.direction-tablet-col {
+    --stack-main-alignment: var(--stack-align-v);
+    --stack-cross-alignment: var(--stack-align-h);
     flex-direction: column;
   }
 
@@ -118,58 +147,67 @@
     flex-direction: column-reverse;
   }
 
-  .puzzle-stack.direction-tablet-row.has-alignment, .puzzle-stack.direction-tablet-col.has-alignment {
-    justify-content: flex-start;
-    align-items: stretch;
+  .puzzle-stack.align-h-tablet-start {
+    --stack-align-h: flex-start;
   }
 
-  .puzzle-stack.direction-tablet-row.align-h-start, .puzzle-stack.direction-tablet-col.align-v-start {
-    justify-content: flex-start;
+  .puzzle-stack.align-h-tablet-center {
+    --stack-align-h: center;
   }
 
-  .puzzle-stack.direction-tablet-row.align-h-center, .puzzle-stack.direction-tablet-col.align-v-center {
-    justify-content: center;
+  .puzzle-stack.align-h-tablet-end {
+    --stack-align-h: flex-end;
   }
 
-  .puzzle-stack.direction-tablet-row.align-h-end, .puzzle-stack.direction-tablet-col.align-v-end {
-    justify-content: flex-end;
+  .puzzle-stack.align-h-tablet-stretch {
+    --stack-align-h: stretch;
   }
 
-  .puzzle-stack.direction-tablet-row.align-h-stretch, .puzzle-stack.direction-tablet-col.align-v-stretch {
-    justify-content: stretch;
+  .puzzle-stack.align-h-tablet-around {
+    --stack-align-h: space-around;
   }
 
-  .puzzle-stack.direction-tablet-row.align-h-around, .puzzle-stack.direction-tablet-col.align-v-around {
-    justify-content: space-around;
+  .puzzle-stack.align-h-tablet-between {
+    --stack-align-h: space-between;
   }
 
-  .puzzle-stack.direction-tablet-row.align-h-between, .puzzle-stack.direction-tablet-col.align-v-between {
-    justify-content: space-between;
+  .puzzle-stack.align-h-tablet-evenly {
+    --stack-align-h: space-evenly;
   }
 
-  .puzzle-stack.direction-tablet-row.align-h-evenly, .puzzle-stack.direction-tablet-col.align-v-evenly {
-    justify-content: space-evenly;
+  .puzzle-stack.align-v-tablet-start {
+    --stack-align-v: flex-start;
   }
 
-  .puzzle-stack.direction-tablet-row.align-v-start, .puzzle-stack.direction-tablet-col.align-h-start {
-    align-items: flex-start;
+  .puzzle-stack.align-v-tablet-center {
+    --stack-align-v: center;
   }
 
-  .puzzle-stack.direction-tablet-row.align-v-center, .puzzle-stack.direction-tablet-col.align-h-center {
-    align-items: center;
+  .puzzle-stack.align-v-tablet-end {
+    --stack-align-v: flex-end;
   }
 
-  .puzzle-stack.direction-tablet-row.align-v-end, .puzzle-stack.direction-tablet-col.align-h-end {
-    align-items: flex-end;
+  .puzzle-stack.align-v-tablet-stretch {
+    --stack-align-v: stretch;
   }
 
-  .puzzle-stack.direction-tablet-row.align-v-stretch, .puzzle-stack.direction-tablet-col.align-h-stretch {
-    align-items: stretch;
+  .puzzle-stack.align-v-tablet-around {
+    --stack-align-v: space-around;
+  }
+
+  .puzzle-stack.align-v-tablet-between {
+    --stack-align-v: space-between;
+  }
+
+  .puzzle-stack.align-v-tablet-evenly {
+    --stack-align-v: space-evenly;
   }
 }
 
 @media (width >= 1024px) {
   .puzzle-stack.direction-desktop-row {
+    --stack-main-alignment: var(--stack-align-h);
+    --stack-cross-alignment: var(--stack-align-v);
     flex-direction: row;
   }
 
@@ -178,6 +216,8 @@
   }
 
   .puzzle-stack.direction-desktop-col {
+    --stack-main-alignment: var(--stack-align-v);
+    --stack-cross-alignment: var(--stack-align-h);
     flex-direction: column;
   }
 
@@ -185,119 +225,59 @@
     flex-direction: column-reverse;
   }
 
-  .puzzle-stack.direction-desktop-row.has-alignment, .puzzle-stack.direction-desktop-col.has-alignment {
-    justify-content: flex-start;
-    align-items: stretch;
-  }
-
-  .puzzle-stack.direction-desktop-row.align-h-start, .puzzle-stack.direction-desktop-col.align-v-start {
-    justify-content: flex-start;
-  }
-
-  .puzzle-stack.direction-desktop-row.align-h-center, .puzzle-stack.direction-desktop-col.align-v-center {
-    justify-content: center;
-  }
-
-  .puzzle-stack.direction-desktop-row.align-h-end, .puzzle-stack.direction-desktop-col.align-v-end {
-    justify-content: flex-end;
+  .puzzle-stack.align-h-desktop-start {
+    --stack-align-h: flex-start;
   }
 
-  .puzzle-stack.direction-desktop-row.align-h-stretch, .puzzle-stack.direction-desktop-col.align-v-stretch {
-    justify-content: stretch;
-  }
-
-  .puzzle-stack.direction-desktop-row.align-h-around, .puzzle-stack.direction-desktop-col.align-v-around {
-    justify-content: space-around;
-  }
-
-  .puzzle-stack.direction-desktop-row.align-h-between, .puzzle-stack.direction-desktop-col.align-v-between {
-    justify-content: space-between;
-  }
-
-  .puzzle-stack.direction-desktop-row.align-h-evenly, .puzzle-stack.direction-desktop-col.align-v-evenly {
-    justify-content: space-evenly;
-  }
-
-  .puzzle-stack.direction-desktop-row.align-v-start, .puzzle-stack.direction-desktop-col.align-h-start {
-    align-items: flex-start;
-  }
-
-  .puzzle-stack.direction-desktop-row.align-v-center, .puzzle-stack.direction-desktop-col.align-h-center {
-    align-items: center;
-  }
-
-  .puzzle-stack.direction-desktop-row.align-v-end, .puzzle-stack.direction-desktop-col.align-h-end {
-    align-items: flex-end;
-  }
-
-  .puzzle-stack.direction-desktop-row.align-v-stretch, .puzzle-stack.direction-desktop-col.align-h-stretch {
-    align-items: stretch;
-  }
-}
-
-@media (width >= 1440px) {
-  .puzzle-stack.direction-hd-row {
-    flex-direction: row;
-  }
-
-  .puzzle-stack.direction-hd-row.reverse {
-    flex-direction: row-reverse;
-  }
-
-  .puzzle-stack.direction-hd-col {
-    flex-direction: column;
-  }
-
-  .puzzle-stack.direction-hd-col.reverse {
-    flex-direction: column-reverse;
+  .puzzle-stack.align-h-desktop-center {
+    --stack-align-h: center;
   }
 
-  .puzzle-stack.direction-hd-row.has-alignment, .puzzle-stack.direction-hd-col.has-alignment {
-    justify-content: flex-start;
-    align-items: stretch;
+  .puzzle-stack.align-h-desktop-end {
+    --stack-align-h: flex-end;
   }
 
-  .puzzle-stack.direction-hd-row.align-h-start, .puzzle-stack.direction-hd-col.align-v-start {
-    justify-content: flex-start;
+  .puzzle-stack.align-h-desktop-stretch {
+    --stack-align-h: stretch;
   }
 
-  .puzzle-stack.direction-hd-row.align-h-center, .puzzle-stack.direction-hd-col.align-v-center {
-    justify-content: center;
+  .puzzle-stack.align-h-desktop-around {
+    --stack-align-h: space-around;
   }
 
-  .puzzle-stack.direction-hd-row.align-h-end, .puzzle-stack.direction-hd-col.align-v-end {
-    justify-content: flex-end;
+  .puzzle-stack.align-h-desktop-between {
+    --stack-align-h: space-between;
   }
 
-  .puzzle-stack.direction-hd-row.align-h-stretch, .puzzle-stack.direction-hd-col.align-v-stretch {
-    justify-content: stretch;
+  .puzzle-stack.align-h-desktop-evenly {
+    --stack-align-h: space-evenly;
   }
 
-  .puzzle-stack.direction-hd-row.align-h-around, .puzzle-stack.direction-hd-col.align-v-around {
-    justify-content: space-around;
+  .puzzle-stack.align-v-desktop-start {
+    --stack-align-v: flex-start;
   }
 
-  .puzzle-stack.direction-hd-row.align-h-between, .puzzle-stack.direction-hd-col.align-v-between {
-    justify-content: space-between;
+  .puzzle-stack.align-v-desktop-center {
+    --stack-align-v: center;
   }
 
-  .puzzle-stack.direction-hd-row.align-h-evenly, .puzzle-stack.direction-hd-col.align-v-evenly {
-    justify-content: space-evenly;
+  .puzzle-stack.align-v-desktop-end {
+    --stack-align-v: flex-end;
   }
 
-  .puzzle-stack.direction-hd-row.align-v-start, .puzzle-stack.direction-hd-col.align-h-start {
-    align-items: flex-start;
+  .puzzle-stack.align-v-desktop-stretch {
+    --stack-align-v: stretch;
   }
 
-  .puzzle-stack.direction-hd-row.align-v-center, .puzzle-stack.direction-hd-col.align-h-center {
-    align-items: center;
+  .puzzle-stack.align-v-desktop-around {
+    --stack-align-v: space-around;
   }
 
-  .puzzle-stack.direction-hd-row.align-v-end, .puzzle-stack.direction-hd-col.align-h-end {
-    align-items: flex-end;
+  .puzzle-stack.align-v-desktop-between {
+    --stack-align-v: space-between;
   }
 
-  .puzzle-stack.direction-hd-row.align-v-stretch, .puzzle-stack.direction-hd-col.align-h-stretch {
-    align-items: stretch;
+  .puzzle-stack.align-v-desktop-evenly {
+    --stack-align-v: space-evenly;
   }
 }

package/dist/components/navigation/carousel/index.cjs

@@ -157,7 +157,10 @@ const Carousel = ({ renderItem, getItemKey, panelsPerView, itemWidth, gap = 0, c
 	}, [
 		items.length,
 		itemOrderSignature,
-		measureLayout
+		measureLayout,
+		gaps.mobile,
+		gaps.tablet,
+		gaps.desktop
 	]);
 	/**
 	* currentPanel is always an item index.