@puzzle-ui/ui 0.4.0 → 0.5.0

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

@@ -1,13 +1,19 @@
+const require_container_utils = require("../container/container.utils.cjs");
 ;/* empty css              */
 ;/* empty css                           */
 let _puzzle_ui_core = require("@puzzle-ui/core");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/components/layout/section/index.tsx
-const Section = ({ children, className, theme = "default", fullWidth = false, noPadding = false, compactTop = false, compactBottom = false, divider = false }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-		className: (0, _puzzle_ui_core.cn)("puzzle-section", !fullWidth && "puzzle-container", compactTop && "puzzle-section--compact-top", compactBottom && "puzzle-section--compact-bottom", noPadding && "puzzle-section--no-padding", className),
+const Section = ({ children, className, theme = "default", fullWidth = false, noPadding = false, compactTop = false, compactBottom = false, divider = false, as: Component = "section" }) => {
+	const constrainContent = theme !== "default" && !fullWidth;
+	const content = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [children, divider && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("hr", { className: "puzzle-section--divider" })] });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
+		className: (0, _puzzle_ui_core.cn)("puzzle-section", !fullWidth && !constrainContent && ["puzzle-container", require_container_utils.getContainerPresetClass("container")], compactTop && "puzzle-section--compact-top", compactBottom && "puzzle-section--compact-bottom", noPadding && "puzzle-section--no-padding", className),
 		"data-theme": theme,
-		children: [children, divider && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("hr", { className: "puzzle-section--divider" })]
+		children: constrainContent ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: (0, _puzzle_ui_core.cn)("puzzle-section__content", "puzzle-container", require_container_utils.getContainerPresetClass("container")),
+			children: content
+		}) : content
 	});
 };
 exports.Section = Section;

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["cn"],"sources":["../../../../src/components/layout/section/index.tsx"],"sourcesContent":["import { cn } from \"@puzzle-ui/core\";\nimport type { SectionProps } from \"./types\";\n\nimport \"./section.css\";\nimport \"../container/container.css\";\n\nexport const Section = ({\n  children,\n  className,\n  theme = \"default\",\n  fullWidth = false,\n  noPadding = false,\n  compactTop = false,\n  compactBottom = false,\n  divider = false,\n}: SectionProps) => {\n  return (\n    <section\n      className={cn(\n        \"puzzle-section\",\n        !fullWidth && \"puzzle-container\",\n        compactTop && \"puzzle-section--compact-top\",\n        compactBottom && \"puzzle-section--compact-bottom\",\n        noPadding && \"puzzle-section--no-padding\",\n        className,\n      )}\n      data-theme={theme}\n    >\n      {children}\n      {divider && <hr className=\"puzzle-section--divider\" />}\n    </section>\n  );\n};\n"],"mappings":";;;;;AAMA,MAAa,WAAW,EACtB,UACA,WACA,QAAQ,WACR,YAAY,OACZ,YAAY,OACZ,aAAa,OACb,gBAAgB,OAChB,UAAU,YACQ;CAClB,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,WAAD;EACE,YAAA,GAAWA,gBAAAA,GAAAA,CACT,kBACA,CAAC,aAAa,oBACd,cAAc,+BACd,iBAAiB,kCACjB,aAAa,8BACb,SACF;EACA,cAAY;EATd,UAAA,CAWG,UACA,WAAW,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD,EAAI,WAAU,0BAA2B,CAAA,CAC9C;;AAEb"}
+{"version":3,"file":"index.cjs","names":["cn","getContainerPresetClass"],"sources":["../../../../src/components/layout/section/index.tsx"],"sourcesContent":["import { cn } from \"@puzzle-ui/core\";\nimport type { SectionProps } from \"./types\";\nimport { getContainerPresetClass } from \"../container/container.utils\";\n\nimport \"./section.css\";\nimport \"../container/container.css\";\n\nexport const Section = ({\n  children,\n  className,\n  theme = \"default\",\n  fullWidth = false,\n  noPadding = false,\n  compactTop = false,\n  compactBottom = false,\n  divider = false,\n  as: Component = \"section\",\n}: SectionProps) => {\n  const constrainContent = theme !== \"default\" && !fullWidth;\n  const content = (\n    <>\n      {children}\n      {divider && <hr className=\"puzzle-section--divider\" />}\n    </>\n  );\n\n  return (\n    <Component\n      className={cn(\n        \"puzzle-section\",\n        !fullWidth && !constrainContent && [\n          \"puzzle-container\",\n          getContainerPresetClass(\"container\"),\n        ],\n        compactTop && \"puzzle-section--compact-top\",\n        compactBottom && \"puzzle-section--compact-bottom\",\n        noPadding && \"puzzle-section--no-padding\",\n        className,\n      )}\n      data-theme={theme}\n    >\n      {constrainContent ? (\n        <div\n          className={cn(\n            \"puzzle-section__content\",\n            \"puzzle-container\",\n            getContainerPresetClass(\"container\"),\n          )}\n        >\n          {content}\n        </div>\n      ) : content}\n    </Component>\n  );\n};\n"],"mappings":";;;;;;AAOA,MAAa,WAAW,EACtB,UACA,WACA,QAAQ,WACR,YAAY,OACZ,YAAY,OACZ,aAAa,OACb,gBAAgB,OAChB,UAAU,OACV,IAAI,YAAY,gBACE;CAClB,MAAM,mBAAmB,UAAU,aAAa,CAAC;CACjD,MAAM,UACJ,iBAAA,GAAA,kBAAA,KAAA,CAAA,kBAAA,UAAA,EAAA,UAAA,CACG,UACA,WAAW,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD,EAAI,WAAU,0BAA2B,CAAA,CACrD,EAAA,CAAA;CAGJ,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD;EACE,YAAA,GAAWA,gBAAAA,GAAAA,CACT,kBACA,CAAC,aAAa,CAAC,oBAAoB,CACjC,oBACAC,wBAAAA,wBAAwB,WAAW,CACrC,GACA,cAAc,+BACd,iBAAiB,kCACjB,aAAa,8BACb,SACF;EACA,cAAY;EAEX,UAAA,mBACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GACE,YAAA,GAAWD,gBAAAA,GAAAA,CACT,2BACA,oBACAC,wBAAAA,wBAAwB,WAAW,CACrC;GAEC,UAAA;EACE,CAAA,IACH;CACK,CAAA;AAEf"}

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

@@ -1,2 +1,2 @@
 import { SectionProps } from "./types.cjs";
-export declare const Section: ({ children, className, theme, fullWidth, noPadding, compactTop, compactBottom, divider }: SectionProps) => import("react").JSX.Element;
+export declare const Section: ({ children, className, theme, fullWidth, noPadding, compactTop, compactBottom, divider, as: Component }: SectionProps) => import("react").JSX.Element;

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

@@ -1,2 +1,2 @@
 import { SectionProps } from "./types.js";
-export declare const Section: ({ children, className, theme, fullWidth, noPadding, compactTop, compactBottom, divider }: SectionProps) => import("react").JSX.Element;
+export declare const Section: ({ children, className, theme, fullWidth, noPadding, compactTop, compactBottom, divider, as: Component }: SectionProps) => import("react").JSX.Element;

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

@@ -1,13 +1,19 @@
+import { getContainerPresetClass } from "../container/container.utils.js";
 import "./section.css";
 import "../container/container.css";
 import { cn } from "@puzzle-ui/core";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 // src/components/layout/section/index.tsx
-const Section = ({ children, className, theme = "default", fullWidth = false, noPadding = false, compactTop = false, compactBottom = false, divider = false }) => {
-	return /* @__PURE__ */ jsxs("section", {
-		className: cn("puzzle-section", !fullWidth && "puzzle-container", compactTop && "puzzle-section--compact-top", compactBottom && "puzzle-section--compact-bottom", noPadding && "puzzle-section--no-padding", className),
+const Section = ({ children, className, theme = "default", fullWidth = false, noPadding = false, compactTop = false, compactBottom = false, divider = false, as: Component = "section" }) => {
+	const constrainContent = theme !== "default" && !fullWidth;
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [children, divider && /* @__PURE__ */ jsx("hr", { className: "puzzle-section--divider" })] });
+	return /* @__PURE__ */ jsx(Component, {
+		className: cn("puzzle-section", !fullWidth && !constrainContent && ["puzzle-container", getContainerPresetClass("container")], compactTop && "puzzle-section--compact-top", compactBottom && "puzzle-section--compact-bottom", noPadding && "puzzle-section--no-padding", className),
 		"data-theme": theme,
-		children: [children, divider && /* @__PURE__ */ jsx("hr", { className: "puzzle-section--divider" })]
+		children: constrainContent ? /* @__PURE__ */ jsx("div", {
+			className: cn("puzzle-section__content", "puzzle-container", getContainerPresetClass("container")),
+			children: content
+		}) : content
 	});
 };
 export { Section };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/layout/section/index.tsx"],"sourcesContent":["import { cn } from \"@puzzle-ui/core\";\nimport type { SectionProps } from \"./types\";\n\nimport \"./section.css\";\nimport \"../container/container.css\";\n\nexport const Section = ({\n  children,\n  className,\n  theme = \"default\",\n  fullWidth = false,\n  noPadding = false,\n  compactTop = false,\n  compactBottom = false,\n  divider = false,\n}: SectionProps) => {\n  return (\n    <section\n      className={cn(\n        \"puzzle-section\",\n        !fullWidth && \"puzzle-container\",\n        compactTop && \"puzzle-section--compact-top\",\n        compactBottom && \"puzzle-section--compact-bottom\",\n        noPadding && \"puzzle-section--no-padding\",\n        className,\n      )}\n      data-theme={theme}\n    >\n      {children}\n      {divider && <hr className=\"puzzle-section--divider\" />}\n    </section>\n  );\n};\n"],"mappings":";;;;;AAMA,MAAa,WAAW,EACtB,UACA,WACA,QAAQ,WACR,YAAY,OACZ,YAAY,OACZ,aAAa,OACb,gBAAgB,OAChB,UAAU,YACQ;CAClB,OACE,qBAAC,WAAD;EACE,WAAW,GACT,kBACA,CAAC,aAAa,oBACd,cAAc,+BACd,iBAAiB,kCACjB,aAAa,8BACb,SACF;EACA,cAAY;EATd,UAAA,CAWG,UACA,WAAW,oBAAC,MAAD,EAAI,WAAU,0BAA2B,CAAA,CAC9C;;AAEb"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/layout/section/index.tsx"],"sourcesContent":["import { cn } from \"@puzzle-ui/core\";\nimport type { SectionProps } from \"./types\";\nimport { getContainerPresetClass } from \"../container/container.utils\";\n\nimport \"./section.css\";\nimport \"../container/container.css\";\n\nexport const Section = ({\n  children,\n  className,\n  theme = \"default\",\n  fullWidth = false,\n  noPadding = false,\n  compactTop = false,\n  compactBottom = false,\n  divider = false,\n  as: Component = \"section\",\n}: SectionProps) => {\n  const constrainContent = theme !== \"default\" && !fullWidth;\n  const content = (\n    <>\n      {children}\n      {divider && <hr className=\"puzzle-section--divider\" />}\n    </>\n  );\n\n  return (\n    <Component\n      className={cn(\n        \"puzzle-section\",\n        !fullWidth && !constrainContent && [\n          \"puzzle-container\",\n          getContainerPresetClass(\"container\"),\n        ],\n        compactTop && \"puzzle-section--compact-top\",\n        compactBottom && \"puzzle-section--compact-bottom\",\n        noPadding && \"puzzle-section--no-padding\",\n        className,\n      )}\n      data-theme={theme}\n    >\n      {constrainContent ? (\n        <div\n          className={cn(\n            \"puzzle-section__content\",\n            \"puzzle-container\",\n            getContainerPresetClass(\"container\"),\n          )}\n        >\n          {content}\n        </div>\n      ) : content}\n    </Component>\n  );\n};\n"],"mappings":";;;;;;AAOA,MAAa,WAAW,EACtB,UACA,WACA,QAAQ,WACR,YAAY,OACZ,YAAY,OACZ,aAAa,OACb,gBAAgB,OAChB,UAAU,OACV,IAAI,YAAY,gBACE;CAClB,MAAM,mBAAmB,UAAU,aAAa,CAAC;CACjD,MAAM,UACJ,qBAAA,UAAA,EAAA,UAAA,CACG,UACA,WAAW,oBAAC,MAAD,EAAI,WAAU,0BAA2B,CAAA,CACrD,EAAA,CAAA;CAGJ,OACE,oBAAC,WAAD;EACE,WAAW,GACT,kBACA,CAAC,aAAa,CAAC,oBAAoB,CACjC,oBACA,wBAAwB,WAAW,CACrC,GACA,cAAc,+BACd,iBAAiB,kCACjB,aAAa,8BACb,SACF;EACA,cAAY;EAEX,UAAA,mBACC,oBAAC,OAAD;GACE,WAAW,GACT,2BACA,oBACA,wBAAwB,WAAW,CACrC;GAEC,UAAA;EACE,CAAA,IACH;CACK,CAAA;AAEf"}

package/dist/components/layout/section/section.css

@@ -5,7 +5,7 @@
 }
 
 .puzzle-section {
-  --section-padding-y: var(--puzzle-container-gutter, clamp(1rem, 3vw, 3rem));
+  --section-padding-y: var(--puzzle-container-gutter, clamp(2rem, 6vw, 6rem));
   --section-gap: var(--puzzle-space-4, 1rem);
   gap: var(--section-gap);
   box-sizing: border-box;
@@ -18,6 +18,12 @@
   display: flex;
 }
 
+.puzzle-section__content {
+  gap: var(--section-gap);
+  flex-direction: column;
+  display: flex;
+}
+
 .puzzle-section--divider {
   border: none;
   border-top: var(--puzzle-border-width, 1px) solid var(--puzzle-color-border);
@@ -36,12 +42,12 @@
   padding-block: 0;
 }
 
-.puzzle-section[data-theme="normal"] {
+.puzzle-section[data-theme="default"] {
   --section-background: var(--puzzle-color-background);
   --section-color: var(--puzzle-color-text);
 }
 
-.puzzle-section[data-theme="normal"] .puzzle-section--divider {
+.puzzle-section[data-theme="default"] .puzzle-section--divider {
   border-top-color: var(--puzzle-color-border);
 }
 

package/dist/components/layout/section/types.d.cts

@@ -1,8 +1,7 @@
-import { ReactNode } from "react";
+import { ComponentPropsWithRef, ElementType } from "react";
 export type SectionTheme = "default" | "light" | "dark" | "primary" | "secondary" | "accent";
-export type SectionProps = {
-  children?: ReactNode;
-  className?: string;
+export type SectionOwnProps<C extends ElementType = "section"> = {
+  as?: C;
   theme?: SectionTheme;
   fullWidth?: boolean;
   noPadding?: boolean;
@@ -10,4 +9,5 @@ export type SectionProps = {
   compactTop?: boolean;
   compactBottom?: boolean;
   divider?: boolean;
-};
+};
+export type SectionProps<C extends ElementType = "section"> = Omit<ComponentPropsWithRef<C>, keyof SectionOwnProps<C> | "as"> & SectionOwnProps<C>;

package/dist/components/layout/section/types.d.ts

@@ -1,8 +1,7 @@
-import { ReactNode } from "react";
+import { ComponentPropsWithRef, ElementType } from "react";
 export type SectionTheme = "default" | "light" | "dark" | "primary" | "secondary" | "accent";
-export type SectionProps = {
-  children?: ReactNode;
-  className?: string;
+export type SectionOwnProps<C extends ElementType = "section"> = {
+  as?: C;
   theme?: SectionTheme;
   fullWidth?: boolean;
   noPadding?: boolean;
@@ -10,4 +9,5 @@ export type SectionProps = {
   compactTop?: boolean;
   compactBottom?: boolean;
   divider?: boolean;
-};
+};
+export type SectionProps<C extends ElementType = "section"> = Omit<ComponentPropsWithRef<C>, keyof SectionOwnProps<C> | "as"> & SectionOwnProps<C>;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["getSeparatorSemantics","cn"],"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,YAAYA,wBAAAA,sBAAsB,aAAa,UAAU;CAE/D,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,GAAI;EACJ,GAAI;EACC;EACL,YAAA,GAAWC,gBAAAA,GAAAA,CAAG,oBAAoB,SAAS;EAC3C,oBAAkB;CACnB,CAAA;AAEL"}

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

@@ -0,0 +1,17 @@
+import { SeparatorOrientation } from "./separator.utils.cjs";
+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.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"}