@puzzle-ui/ui 0.3.0 → 0.5.0

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

@@ -0,0 +1,17 @@
+import { SeparatorOrientation } from "./separator.utils.js";
+import { ComponentPropsWithRef } from "react";
+type SeparatorProps = Omit<ComponentPropsWithRef<"div">, "children" | "role" | "aria-orientation"> & {
+  /**
+   * The orientation of the separator.
+   * @default "horizontal"
+   */
+  orientation?: SeparatorOrientation;
+  /**
+   * Whether the separator is purely decorative.
+   * Decorative separators are hidden from assistive technology.
+   * @default true
+   */
+  decorative?: boolean;
+};
+declare const Separator: ({ orientation, decorative, className, ref, ...props }: SeparatorProps) => import("react").JSX.Element;
+export { Separator, type SeparatorOrientation, type SeparatorProps };

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

@@ -0,0 +1,18 @@
+import { getSeparatorSemantics } from "./separator.utils.js";
+import "./separator.css";
+import { cn } from "@puzzle-ui/core";
+import { jsx } from "react/jsx-runtime";
+// src/components/layout/separator/index.tsx
+const Separator = ({ orientation = "horizontal", decorative = true, className, ref, ...props }) => {
+	const semantics = getSeparatorSemantics(orientation, decorative);
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		...semantics,
+		ref,
+		className: cn("puzzle-separator", className),
+		"data-orientation": orientation
+	});
+};
+export { Separator };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/layout/separator/index.tsx"],"sourcesContent":["import { cn } from \"@puzzle-ui/core\";\nimport type { ComponentPropsWithRef } from \"react\";\nimport { getSeparatorSemantics } from \"./separator.utils\";\nimport type { SeparatorOrientation } from \"./separator.utils\";\nimport \"./separator.css\";\n\ntype SeparatorProps = Omit<\n  ComponentPropsWithRef<\"div\">,\n  \"children\" | \"role\" | \"aria-orientation\"\n> & {\n  /**\n   * The orientation of the separator.\n   * @default \"horizontal\"\n   */\n  orientation?: SeparatorOrientation;\n\n  /**\n   * Whether the separator is purely decorative.\n   * Decorative separators are hidden from assistive technology.\n   * @default true\n   */\n  decorative?: boolean;\n};\n\nconst Separator = ({\n  orientation = \"horizontal\",\n  decorative = true,\n  className,\n  ref,\n  ...props\n}: SeparatorProps) => {\n  const semantics = getSeparatorSemantics(orientation, decorative);\n\n  return (\n    <div\n      {...props}\n      {...semantics}\n      ref={ref}\n      className={cn(\"puzzle-separator\", className)}\n      data-orientation={orientation}\n    />\n  );\n};\n\nexport { Separator, type SeparatorProps, type SeparatorOrientation };\n"],"mappings":";;;;;AAwBA,MAAM,aAAa,EACjB,cAAc,cACd,aAAa,MACb,WACA,KACA,GAAG,YACiB;CACpB,MAAM,YAAY,sBAAsB,aAAa,UAAU;CAE/D,OACE,oBAAC,OAAD;EACE,GAAI;EACJ,GAAI;EACC;EACL,WAAW,GAAG,oBAAoB,SAAS;EAC3C,oBAAkB;CACnB,CAAA;AAEL"}

package/dist/components/layout/separator/separator.css

@@ -0,0 +1,15 @@
+.puzzle-separator {
+  background-color: var(--puzzle-color-border);
+  flex-shrink: 0;
+  display: block;
+}
+
+.puzzle-separator[data-orientation="horizontal"] {
+  width: 100%;
+  height: var(--puzzle-border-width, 1px);
+}
+
+.puzzle-separator[data-orientation="vertical"] {
+  width: var(--puzzle-border-width, 1px);
+  height: 100%;
+}

package/dist/components/layout/separator/separator.utils.cjs

@@ -0,0 +1,11 @@
+// src/components/layout/separator/separator.utils.ts
+const getSeparatorSemantics = (orientation, decorative) => {
+	if (decorative) return { role: "none" };
+	return {
+		role: "separator",
+		...orientation === "vertical" ? { "aria-orientation": "vertical" } : {}
+	};
+};
+exports.getSeparatorSemantics = getSeparatorSemantics;
+
+//# sourceMappingURL=separator.utils.cjs.map

package/dist/components/layout/separator/separator.utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"separator.utils.cjs","names":[],"sources":["../../../../src/components/layout/separator/separator.utils.ts"],"sourcesContent":["type SeparatorOrientation = \"horizontal\" | \"vertical\";\n\ntype SeparatorSemantics =\n  | {\n      role: \"none\";\n      \"aria-orientation\"?: undefined;\n    }\n  | {\n      role: \"separator\";\n      \"aria-orientation\"?: \"vertical\";\n    };\n\nconst getSeparatorSemantics = (\n  orientation: SeparatorOrientation,\n  decorative: boolean,\n): SeparatorSemantics => {\n  if (decorative) {\n    return {\n      role: \"none\",\n    };\n  }\n\n  return {\n    role: \"separator\",\n    ...(orientation === \"vertical\"\n      ? { \"aria-orientation\": \"vertical\" as const }\n      : {}),\n  };\n};\n\nexport {\n  getSeparatorSemantics,\n  type SeparatorOrientation,\n  type SeparatorSemantics,\n};\n"],"mappings":";AAYA,MAAM,yBACJ,aACA,eACuB;CACvB,IAAI,YACF,OAAO,EACL,MAAM,OACR;CAGF,OAAO;EACL,MAAM;EACN,GAAI,gBAAgB,aAChB,EAAE,oBAAoB,WAAoB,IAC1C,CAAC;CACP;AACF"}

package/dist/components/layout/separator/separator.utils.d.cts

@@ -0,0 +1,2 @@
+type SeparatorOrientation = "horizontal" | "vertical";
+export type { SeparatorOrientation };

package/dist/components/layout/separator/separator.utils.d.ts

@@ -0,0 +1,2 @@
+type SeparatorOrientation = "horizontal" | "vertical";
+export type { SeparatorOrientation };

package/dist/components/layout/separator/separator.utils.js

@@ -0,0 +1,11 @@
+// src/components/layout/separator/separator.utils.ts
+const getSeparatorSemantics = (orientation, decorative) => {
+	if (decorative) return { role: "none" };
+	return {
+		role: "separator",
+		...orientation === "vertical" ? { "aria-orientation": "vertical" } : {}
+	};
+};
+export { getSeparatorSemantics };
+
+//# sourceMappingURL=separator.utils.js.map

package/dist/components/layout/separator/separator.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"separator.utils.js","names":[],"sources":["../../../../src/components/layout/separator/separator.utils.ts"],"sourcesContent":["type SeparatorOrientation = \"horizontal\" | \"vertical\";\n\ntype SeparatorSemantics =\n  | {\n      role: \"none\";\n      \"aria-orientation\"?: undefined;\n    }\n  | {\n      role: \"separator\";\n      \"aria-orientation\"?: \"vertical\";\n    };\n\nconst getSeparatorSemantics = (\n  orientation: SeparatorOrientation,\n  decorative: boolean,\n): SeparatorSemantics => {\n  if (decorative) {\n    return {\n      role: \"none\",\n    };\n  }\n\n  return {\n    role: \"separator\",\n    ...(orientation === \"vertical\"\n      ? { \"aria-orientation\": \"vertical\" as const }\n      : {}),\n  };\n};\n\nexport {\n  getSeparatorSemantics,\n  type SeparatorOrientation,\n  type SeparatorSemantics,\n};\n"],"mappings":";AAYA,MAAM,yBACJ,aACA,eACuB;CACvB,IAAI,YACF,OAAO,EACL,MAAM,OACR;CAGF,OAAO;EACL,MAAM;EACN,GAAI,gBAAgB,aAChB,EAAE,oBAAoB,WAAoB,IAC1C,CAAC;CACP;AACF"}

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

@@ -3,7 +3,7 @@ let _puzzle_ui_core = require("@puzzle-ui/core");
 let react = require("react");
 let react_jsx_runtime = require("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 = (0, _puzzle_ui_core.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 = _puzzle_ui_core.BREAKPOINTS.flatMap((breakpoint) => {
+		const value = responsiveAlignH[breakpoint];
+		return value ? [`align-h-${breakpoint}-${value}`] : [];
+	});
+	const responsiveAlignVClasses = _puzzle_ui_core.BREAKPOINTS.flatMap((breakpoint) => {
+		const value = responsiveAlignV[breakpoint];
+		return value ? [`align-v-${breakpoint}-${value}`] : [];
+	});
+	const classes = (0, _puzzle_ui_core.cn)("puzzle-stack", ...directionClasses, reverse && "reverse", wrap, `gap-${gap}`, ...responsiveAlignHClasses, ...responsiveAlignVClasses, hasAlignment && "has-alignment", className);
 	const childrenWithDividers = divider ? react.Children.toArray(children).flatMap((child, index, arr) => {
 		if (index === arr.length - 1) return [child];
 		const dividerKey = `stack-divider-${(0, react.isValidElement)(child) ? child.key : index}`;

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["BREAKPOINTS","cn","Children","isValidElement","cloneElement","createElement","Fragment"],"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,mBAAmBA,gBAAAA,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,WAAA,GAAUC,gBAAAA,GAAAA,CACd,gBACA,GAAG,kBACH,WAAW,WACX,MACA,OAAO,OACP,UAAU,WAAW,UACrB,UAAU,WAAW,UACrB,gBAAgB,iBAChB,SACF;CAEA,MAAM,uBAAuB,UACzBC,MAAAA,SAAS,QAAQ,QAAQ,CAAC,CAAC,SAAS,OAAO,OAAO,QAAQ;EACxD,IAAI,UAAU,IAAI,SAAS,GACzB,OAAO,CAAC,KAAK;EAIf,MAAM,aAAa,kBAAA,GAAiBC,MAAAA,eAAAA,CAAe,KAAK,IAAI,MAAM,MAAM;EAKxE,OAAO,CAAC,QAAA,GAJcA,MAAAA,eAAAA,CAAe,OAAO,KAAA,GACxCC,MAAAA,aAAAA,CAAa,SAAS,EAAE,KAAK,WAAW,CAAC,KAAA,GACzCC,MAAAA,cAAAA,CAAcC,MAAAA,UAAU,EAAE,KAAK,WAAW,GAAG,OAAO,CAE5B;CAC9B,CAAC,IACD;CAEJ,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD;EAAW,WAAW;EAAS,GAAI;EAChC,UAAA;CACQ,CAAA;AAEf"}
+{"version":3,"file":"index.cjs","names":["BREAKPOINTS","cn","Children","isValidElement","cloneElement","createElement","Fragment"],"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,mBAAmBA,gBAAAA,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,0BAA0BA,gBAAAA,YAAY,SAAS,eAAe;EAClE,MAAM,QAAQ,iBAAiB;EAE/B,OAAO,QAAQ,CAAC,WAAW,WAAW,GAAG,OAAO,IAAI,CAAC;CACvD,CAAC;CAED,MAAM,0BAA0BA,gBAAAA,YAAY,SAAS,eAAe;EAClE,MAAM,QAAQ,iBAAiB;EAE/B,OAAO,QAAQ,CAAC,WAAW,WAAW,GAAG,OAAO,IAAI,CAAC;CACvD,CAAC;CAED,MAAM,WAAA,GAAUC,gBAAAA,GAAAA,CACd,gBACA,GAAG,kBACH,WAAW,WACX,MACA,OAAO,OACP,GAAG,yBACH,GAAG,yBACH,gBAAgB,iBAChB,SACF;CAEA,MAAM,uBAAuB,UACzBC,MAAAA,SAAS,QAAQ,QAAQ,CAAC,CAAC,SAAS,OAAO,OAAO,QAAQ;EACxD,IAAI,UAAU,IAAI,SAAS,GACzB,OAAO,CAAC,KAAK;EAIf,MAAM,aAAa,kBAAA,GAAiBC,MAAAA,eAAAA,CAAe,KAAK,IAAI,MAAM,MAAM;EAKxE,OAAO,CAAC,QAAA,GAJcA,MAAAA,eAAAA,CAAe,OAAO,KAAA,GACxCC,MAAAA,aAAAA,CAAa,SAAS,EAAE,KAAK,WAAW,CAAC,KAAA,GACzCC,MAAAA,cAAAA,CAAcC,MAAAA,UAAU,EAAE,KAAK,WAAW,GAAG,OAAO,CAE5B;CAC9B,CAAC,IACD;CAEJ,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD;EAAW,WAAW;EAAS,GAAI;EAChC,UAAA;CACQ,CAAA;AAEf"}

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

@@ -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.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"}