@puzzle-ui/ui 0.0.0-stage → 0.1.0

package/dist/components/layout/collapsable-sidebar/index.js

@@ -0,0 +1,107 @@
+"use client";
+import { Link } from "../../navigation/link/index.js";
+import "./collapsable-sidebar.css";
+import { Text } from "../../typography/text.js";
+import { cn } from "@puzzle-ui/core";
+import { useId, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+// src/components/layout/collapsable-sidebar/index.tsx
+const isSidebarGroup = (entry) => "items" in entry;
+const SidebarItemRenderer = ({ item, collapsed }) => {
+	const className = cn("puzzle-collapsable-sidebar__item", item.active && "active");
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+		className: "puzzle-collapsable-sidebar__icon",
+		"aria-hidden": "true",
+		children: item.icon
+	}), /* @__PURE__ */ jsx("span", {
+		className: "puzzle-collapsable-sidebar__label",
+		children: item.label
+	})] });
+	if ("href" in item && item.href !== void 0) return /* @__PURE__ */ jsx(Link, {
+		className,
+		href: item.href,
+		"aria-current": item.active ? "page" : void 0,
+		title: collapsed ? item.label : void 0,
+		"data-active": item.active || void 0,
+		children: content
+	});
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className,
+		onClick: item.onClick,
+		title: collapsed ? item.label : void 0,
+		"data-active": item.active || void 0,
+		children: content
+	});
+};
+const SidebarGroupRenderer = ({ group, collapsed, idPrefix }) => {
+	const headingId = `${idPrefix}-${group.id}`;
+	return /* @__PURE__ */ jsxs("section", {
+		className: "puzzle-collapsable-sidebar__group",
+		"aria-labelledby": group.label ? headingId : void 0,
+		children: [group.label && /* @__PURE__ */ jsx(Text, {
+			id: headingId,
+			type: "overline",
+			as: "h2",
+			className: "puzzle-collapsable-sidebar__group-label",
+			children: group.label
+		}), /* @__PURE__ */ jsx("div", {
+			className: "puzzle-collapsable-sidebar__group-items",
+			children: group.items.map((item) => /* @__PURE__ */ jsx(SidebarItemRenderer, {
+				item,
+				collapsed
+			}, item.id))
+		})]
+	});
+};
+const CollapsableSidebar = ({ items, expand = "inline", collapsed: controlledCollapsed, defaultCollapsed = true, onCollapsedChange, ariaLabel = "Main navigation", className, style }) => {
+	const [internalCollapsed, setInternalCollapsed] = useState(defaultCollapsed);
+	const idPrefix = `puzzle-sidebar-${useId()}`;
+	const isControlled = controlledCollapsed !== void 0;
+	const collapsed = isControlled ? controlledCollapsed : internalCollapsed;
+	const toggleCollapsed = () => {
+		const nextCollapsed = !collapsed;
+		if (!isControlled) setInternalCollapsed(nextCollapsed);
+		onCollapsedChange?.(nextCollapsed);
+	};
+	const classes = cn("puzzle-collapsable-sidebar", `expand-${expand}`, collapsed && "collapsed", className);
+	return /* @__PURE__ */ jsxs("aside", {
+		className: classes,
+		"data-collapsed": collapsed,
+		"data-expand": expand,
+		style,
+		children: [/* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "puzzle-collapsable-sidebar__toggle",
+			onClick: toggleCollapsed,
+			"aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
+			"aria-expanded": !collapsed,
+			"aria-controls": `${idPrefix}-navigation`,
+			children: /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				children: collapsed ? "›" : "‹"
+			})
+		}), /* @__PURE__ */ jsx("nav", {
+			id: `${idPrefix}-navigation`,
+			className: "puzzle-collapsable-sidebar__navigation",
+			"aria-label": ariaLabel,
+			children: /* @__PURE__ */ jsx("div", {
+				className: "puzzle-collapsable-sidebar__sections",
+				children: items.map((entry) => isSidebarGroup(entry) ? /* @__PURE__ */ jsx(SidebarGroupRenderer, {
+					group: entry,
+					collapsed,
+					idPrefix
+				}, entry.id) : /* @__PURE__ */ jsx("div", {
+					className: "puzzle-collapsable-sidebar__group-items",
+					children: /* @__PURE__ */ jsx(SidebarItemRenderer, {
+						item: entry,
+						collapsed
+					})
+				}, entry.id))
+			})
+		})]
+	});
+};
+export { CollapsableSidebar };
+
+//# sourceMappingURL=index.js.map

package/dist/components/layout/collapsable-sidebar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/layout/collapsable-sidebar/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"@puzzle-ui/core\";\nimport { Link } from \"../../navigation/link\";\nimport {\n  useId,\n  useState,\n  type CSSProperties,\n  type MouseEventHandler,\n  type ReactNode,\n} from \"react\";\nimport \"./collapsable-sidebar.css\";\nimport { Text } from \"../../typography/text\";\n\ntype SidebarItemBase = {\n  id: string;\n  icon: ReactNode;\n  label: string;\n  active?: boolean;\n};\n\ntype WithLink = {\n  href: string;\n  onClick?: never;\n};\n\ntype WithClickHandler = {\n  onClick: MouseEventHandler<HTMLButtonElement>;\n  href?: never;\n};\n\ntype CollapsableSidebarItem = SidebarItemBase & (WithLink | WithClickHandler);\n\ntype CollapsableSidebarGroup = {\n  id: string;\n  label?: string;\n  items: CollapsableSidebarItem[];\n};\n\ntype CollapsableSidebarEntry = CollapsableSidebarItem | CollapsableSidebarGroup;\n\ntype CollapsableSidebarExpansion = \"inline\" | \"over\";\n\ntype CollapsableSidebarProps = {\n  items: CollapsableSidebarEntry[];\n  expand?: CollapsableSidebarExpansion;\n  collapsed?: boolean;\n  defaultCollapsed?: boolean;\n  onCollapsedChange?: (collapsed: boolean) => void;\n  ariaLabel?: string;\n  className?: string;\n  style?: CSSProperties;\n};\n\nconst isSidebarGroup = (\n  entry: CollapsableSidebarEntry,\n): entry is CollapsableSidebarGroup => \"items\" in entry;\n\ntype SidebarItemRendererProps = {\n  item: CollapsableSidebarItem;\n  collapsed: boolean;\n};\n\nconst SidebarItemRenderer = ({ item, collapsed }: SidebarItemRendererProps) => {\n  const className = cn(\n    \"puzzle-collapsable-sidebar__item\",\n    item.active && \"active\",\n  );\n\n  const content = (\n    <>\n      <span className=\"puzzle-collapsable-sidebar__icon\" aria-hidden=\"true\">\n        {item.icon}\n      </span>\n\n      <span className=\"puzzle-collapsable-sidebar__label\">{item.label}</span>\n    </>\n  );\n\n  if (\"href\" in item && item.href !== undefined) {\n    return (\n      <Link\n        className={className}\n        href={item.href}\n        aria-current={item.active ? \"page\" : undefined}\n        title={collapsed ? item.label : undefined}\n        data-active={item.active || undefined}\n      >\n        {content}\n      </Link>\n    );\n  }\n\n  return (\n    <button\n      type=\"button\"\n      className={className}\n      onClick={item.onClick}\n      title={collapsed ? item.label : undefined}\n      data-active={item.active || undefined}\n    >\n      {content}\n    </button>\n  );\n};\n\ntype SidebarGroupRendererProps = {\n  group: CollapsableSidebarGroup;\n  collapsed: boolean;\n  idPrefix: string;\n};\n\nconst SidebarGroupRenderer = ({\n  group,\n  collapsed,\n  idPrefix,\n}: SidebarGroupRendererProps) => {\n  const headingId = `${idPrefix}-${group.id}`;\n\n  return (\n    <section\n      className=\"puzzle-collapsable-sidebar__group\"\n      aria-labelledby={group.label ? headingId : undefined}\n    >\n      {group.label && (\n        <Text\n          id={headingId}\n          type=\"overline\"\n          as=\"h2\"\n          className=\"puzzle-collapsable-sidebar__group-label\"\n        >\n          {group.label}\n        </Text>\n      )}\n\n      <div className=\"puzzle-collapsable-sidebar__group-items\">\n        {group.items.map((item) => (\n          <SidebarItemRenderer\n            key={item.id}\n            item={item}\n            collapsed={collapsed}\n          />\n        ))}\n      </div>\n    </section>\n  );\n};\n\nconst CollapsableSidebar = ({\n  items,\n  expand = \"inline\",\n  collapsed: controlledCollapsed,\n  defaultCollapsed = true,\n  onCollapsedChange,\n  ariaLabel = \"Main navigation\",\n  className,\n  style,\n}: CollapsableSidebarProps) => {\n  const [internalCollapsed, setInternalCollapsed] = useState(defaultCollapsed);\n\n  const idPrefix = `puzzle-sidebar-${useId()}`;\n\n  const isControlled = controlledCollapsed !== undefined;\n\n  const collapsed = isControlled ? controlledCollapsed : internalCollapsed;\n\n  const toggleCollapsed = () => {\n    const nextCollapsed = !collapsed;\n\n    if (!isControlled) {\n      setInternalCollapsed(nextCollapsed);\n    }\n\n    onCollapsedChange?.(nextCollapsed);\n  };\n\n  const classes = cn(\n    \"puzzle-collapsable-sidebar\",\n    `expand-${expand}`,\n    collapsed && \"collapsed\",\n    className,\n  );\n\n  return (\n    <aside\n      className={classes}\n      data-collapsed={collapsed}\n      data-expand={expand}\n      style={style}\n    >\n      <button\n        type=\"button\"\n        className=\"puzzle-collapsable-sidebar__toggle\"\n        onClick={toggleCollapsed}\n        aria-label={collapsed ? \"Expand sidebar\" : \"Collapse sidebar\"}\n        aria-expanded={!collapsed}\n        aria-controls={`${idPrefix}-navigation`}\n      >\n        <span aria-hidden=\"true\">{collapsed ? \"›\" : \"‹\"}</span>\n      </button>\n\n      <nav\n        id={`${idPrefix}-navigation`}\n        className=\"puzzle-collapsable-sidebar__navigation\"\n        aria-label={ariaLabel}\n      >\n        <div className=\"puzzle-collapsable-sidebar__sections\">\n          {items.map((entry) =>\n            isSidebarGroup(entry) ? (\n              <SidebarGroupRenderer\n                key={entry.id}\n                group={entry}\n                collapsed={collapsed}\n                idPrefix={idPrefix}\n              />\n            ) : (\n              <div\n                key={entry.id}\n                className=\"puzzle-collapsable-sidebar__group-items\"\n              >\n                <SidebarItemRenderer item={entry} collapsed={collapsed} />\n              </div>\n            ),\n          )}\n        </div>\n      </nav>\n    </aside>\n  );\n};\n\nexport {\n  CollapsableSidebar,\n  type CollapsableSidebarProps,\n  type CollapsableSidebarItem,\n  type CollapsableSidebarGroup,\n  type CollapsableSidebarEntry,\n  type CollapsableSidebarExpansion,\n  type SidebarItemBase,\n  type WithLink,\n  type WithClickHandler,\n};\n"],"mappings":";;;;;;;;AAsDA,MAAM,kBACJ,UACqC,WAAW;AAOlD,MAAM,uBAAuB,EAAE,MAAM,gBAA0C;CAC7E,MAAM,YAAY,GAChB,oCACA,KAAK,UAAU,QACjB;CAEA,MAAM,UACJ,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,QAAD;EAAM,WAAU;EAAmC,eAAY;EAC5D,UAAA,KAAK;CACF,CAAA,GAEN,oBAAC,QAAD;EAAM,WAAU;EAAqC,UAAA,KAAK;CAAY,CAAA,CACtE,EAAA,CAAA;CAGJ,IAAI,UAAU,QAAQ,KAAK,SAAS,KAAA,GAClC,OACE,oBAAC,MAAD;EACa;EACX,MAAM,KAAK;EACX,gBAAc,KAAK,SAAS,SAAS,KAAA;EACrC,OAAO,YAAY,KAAK,QAAQ,KAAA;EAChC,eAAa,KAAK,UAAU,KAAA;EAE3B,UAAA;CACG,CAAA;CAIV,OACE,oBAAC,UAAD;EACE,MAAK;EACM;EACX,SAAS,KAAK;EACd,OAAO,YAAY,KAAK,QAAQ,KAAA;EAChC,eAAa,KAAK,UAAU,KAAA;EAE3B,UAAA;CACK,CAAA;AAEZ;AAQA,MAAM,wBAAwB,EAC5B,OACA,WACA,eAC+B;CAC/B,MAAM,YAAY,GAAG,SAAS,GAAG,MAAM;CAEvC,OACE,qBAAC,WAAD;EACE,WAAU;EACV,mBAAiB,MAAM,QAAQ,YAAY,KAAA;EAF7C,UAAA,CAIG,MAAM,SACL,oBAAC,MAAD;GACE,IAAI;GACJ,MAAK;GACL,IAAG;GACH,WAAU;GAET,UAAA,MAAM;EACH,CAAA,GAGR,oBAAC,OAAD;GAAK,WAAU;GACZ,UAAA,MAAM,MAAM,KAAK,SAChB,oBAAC,qBAAD;IAEQ;IACK;GACZ,GAHM,KAAK,EAGX,CACF;EACE,CAAA,CACE;;AAEb;AAEA,MAAM,sBAAsB,EAC1B,OACA,SAAS,UACT,WAAW,qBACX,mBAAmB,MACnB,mBACA,YAAY,mBACZ,WACA,YAC6B;CAC7B,MAAM,CAAC,mBAAmB,wBAAwB,SAAS,gBAAgB;CAE3E,MAAM,WAAW,kBAAkB,MAAM;CAEzC,MAAM,eAAe,wBAAwB,KAAA;CAE7C,MAAM,YAAY,eAAe,sBAAsB;CAEvD,MAAM,wBAAwB;EAC5B,MAAM,gBAAgB,CAAC;EAEvB,IAAI,CAAC,cACH,qBAAqB,aAAa;EAGpC,oBAAoB,aAAa;CACnC;CAEA,MAAM,UAAU,GACd,8BACA,UAAU,UACV,aAAa,aACb,SACF;CAEA,OACE,qBAAC,SAAD;EACE,WAAW;EACX,kBAAgB;EAChB,eAAa;EACN;EAJT,UAAA,CAME,oBAAC,UAAD;GACE,MAAK;GACL,WAAU;GACV,SAAS;GACT,cAAY,YAAY,mBAAmB;GAC3C,iBAAe,CAAC;GAChB,iBAAe,GAAG,SAAS;GAE3B,UAAA,oBAAC,QAAD;IAAM,eAAY;IAAQ,UAAA,YAAY,MAAM;GAAU,CAAA;EAChD,CAAA,GAER,oBAAC,OAAD;GACE,IAAI,GAAG,SAAS;GAChB,WAAU;GACV,cAAY;GAEZ,UAAA,oBAAC,OAAD;IAAK,WAAU;IACZ,UAAA,MAAM,KAAK,UACV,eAAe,KAAK,IAClB,oBAAC,sBAAD;KAEE,OAAO;KACI;KACD;IACX,GAJM,MAAM,EAIZ,IAED,oBAAC,OAAD;KAEE,WAAU;KAEV,UAAA,oBAAC,qBAAD;MAAqB,MAAM;MAAkB;KAAY,CAAA;IACtD,GAJE,MAAM,EAIR,CAET;GACG,CAAA;EACF,CAAA,CACA;;AAEX"}

package/dist/components/layout/container/container.css

@@ -0,0 +1,24 @@
+.puzzle-container {
+  --_container-gutter: var(--puzzle-container-gutter, clamp(1rem, 3vw, 3rem));
+  box-sizing: border-box;
+  width: 100%;
+  padding-inline: var(--_container-gutter);
+  min-width: 0;
+  margin-inline: auto;
+}
+
+.puzzle-container--container {
+  max-width: var(--puzzle-container-width, 80rem);
+}
+
+.puzzle-container--content {
+  max-width: var(--puzzle-content-width, 64rem);
+}
+
+.puzzle-container--prose {
+  max-width: var(--puzzle-prose-width, 65ch);
+}
+
+.puzzle-container--full {
+  max-width: none;
+}

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

@@ -0,0 +1,11 @@
+// src/components/layout/container/container.utils.ts
+const CONTAINER_PRESET_CLASSES = {
+	container: "puzzle-container--container",
+	content: "puzzle-container--content",
+	prose: "puzzle-container--prose",
+	full: "puzzle-container--full"
+};
+const getContainerPresetClass = (preset) => CONTAINER_PRESET_CLASSES[preset];
+exports.getContainerPresetClass = getContainerPresetClass;
+
+//# sourceMappingURL=container.utils.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"container.utils.cjs","names":[],"sources":["../../../../src/components/layout/container/container.utils.ts"],"sourcesContent":["export type ContainerWidthPreset = \"container\" | \"content\" | \"prose\" | \"full\";\n\nconst CONTAINER_PRESET_CLASSES: Record<ContainerWidthPreset, string> = {\n  container: \"puzzle-container--container\",\n  content: \"puzzle-container--content\",\n  prose: \"puzzle-container--prose\",\n  full: \"puzzle-container--full\",\n};\n\nexport const getContainerPresetClass = (preset: ContainerWidthPreset): string =>\n  CONTAINER_PRESET_CLASSES[preset];\n"],"mappings":";AAEA,MAAM,2BAAiE;CACrE,WAAW;CACX,SAAS;CACT,OAAO;CACP,MAAM;AACR;AAEA,MAAa,2BAA2B,WACtC,yBAAyB"}

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

@@ -0,0 +1 @@
+export type ContainerWidthPreset = "container" | "content" | "prose" | "full";

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

@@ -0,0 +1 @@
+export type ContainerWidthPreset = "container" | "content" | "prose" | "full";

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

@@ -0,0 +1,11 @@
+// src/components/layout/container/container.utils.ts
+const CONTAINER_PRESET_CLASSES = {
+	container: "puzzle-container--container",
+	content: "puzzle-container--content",
+	prose: "puzzle-container--prose",
+	full: "puzzle-container--full"
+};
+const getContainerPresetClass = (preset) => CONTAINER_PRESET_CLASSES[preset];
+export { getContainerPresetClass };
+
+//# sourceMappingURL=container.utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"container.utils.js","names":[],"sources":["../../../../src/components/layout/container/container.utils.ts"],"sourcesContent":["export type ContainerWidthPreset = \"container\" | \"content\" | \"prose\" | \"full\";\n\nconst CONTAINER_PRESET_CLASSES: Record<ContainerWidthPreset, string> = {\n  container: \"puzzle-container--container\",\n  content: \"puzzle-container--content\",\n  prose: \"puzzle-container--prose\",\n  full: \"puzzle-container--full\",\n};\n\nexport const getContainerPresetClass = (preset: ContainerWidthPreset): string =>\n  CONTAINER_PRESET_CLASSES[preset];\n"],"mappings":";AAEA,MAAM,2BAAiE;CACrE,WAAW;CACX,SAAS;CACT,OAAO;CACP,MAAM;AACR;AAEA,MAAa,2BAA2B,WACtC,yBAAyB"}

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

@@ -0,0 +1,17 @@
+const require_container_utils = require("./container.utils.cjs");
+;/* empty css                */
+let _puzzle_ui_core = require("@puzzle-ui/core");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/components/layout/container/index.tsx
+const Container = ({ as, className, children, widthPreset = "container", ...rest }) => {
+	const Component = as ?? "div";
+	const classes = (0, _puzzle_ui_core.cn)("puzzle-container", require_container_utils.getContainerPresetClass(widthPreset), className);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
+		className: classes,
+		...rest,
+		children
+	});
+};
+exports.Container = Container;
+
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["cn","getContainerPresetClass"],"sources":["../../../../src/components/layout/container/index.tsx"],"sourcesContent":["import type { ElementType, ComponentPropsWithRef, ReactNode } from \"react\";\nimport { cn } from \"@puzzle-ui/core\";\nimport {\n  getContainerPresetClass,\n  type ContainerWidthPreset,\n} from \"./container.utils\";\nimport \"./container.css\";\n\ntype ContainerOwnProps<C extends ElementType> = {\n  as?: C;\n  className?: string;\n  children?: ReactNode;\n  widthPreset?: ContainerWidthPreset;\n};\n\ntype ContainerProps<C extends ElementType = \"div\"> = ContainerOwnProps<C> &\n  Omit<ComponentPropsWithRef<C>, keyof ContainerOwnProps<C> | \"as\">;\n\nconst Container = <C extends ElementType = \"div\">({\n  as,\n  className,\n  children,\n  widthPreset = \"container\",\n  ...rest\n}: ContainerProps<C>) => {\n  const Component = (as ?? \"div\") as ElementType;\n\n  const classes = cn(\n    \"puzzle-container\",\n    getContainerPresetClass(widthPreset),\n    className,\n  );\n\n  return (\n    <Component className={classes} {...rest}>\n      {children}\n    </Component>\n  );\n};\n\nexport { Container, type ContainerProps, type ContainerWidthPreset };\n"],"mappings":";;;;;AAkBA,MAAM,aAA4C,EAChD,IACA,WACA,UACA,cAAc,aACd,GAAG,WACoB;CACvB,MAAM,YAAa,MAAM;CAEzB,MAAM,WAAA,GAAUA,gBAAAA,GAAAA,CACd,oBACAC,wBAAAA,wBAAwB,WAAW,GACnC,SACF;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD;EAAW,WAAW;EAAS,GAAI;EAChC;CACQ,CAAA;AAEf"}

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

@@ -0,0 +1,11 @@
+import { ContainerWidthPreset } from "./container.utils.cjs";
+import { ComponentPropsWithRef, ElementType, ReactNode } from "react";
+type ContainerOwnProps<C extends ElementType> = {
+  as?: C;
+  className?: string;
+  children?: ReactNode;
+  widthPreset?: ContainerWidthPreset;
+};
+type ContainerProps<C extends ElementType = "div"> = ContainerOwnProps<C> & Omit<ComponentPropsWithRef<C>, keyof ContainerOwnProps<C> | "as">;
+declare const Container: <C extends ElementType = "div">({ as, className, children, widthPreset, ...rest }: ContainerProps<C>) => import("react").JSX.Element;
+export { Container, type ContainerProps, type ContainerWidthPreset };

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

@@ -0,0 +1,11 @@
+import { ContainerWidthPreset } from "./container.utils.js";
+import { ComponentPropsWithRef, ElementType, ReactNode } from "react";
+type ContainerOwnProps<C extends ElementType> = {
+  as?: C;
+  className?: string;
+  children?: ReactNode;
+  widthPreset?: ContainerWidthPreset;
+};
+type ContainerProps<C extends ElementType = "div"> = ContainerOwnProps<C> & Omit<ComponentPropsWithRef<C>, keyof ContainerOwnProps<C> | "as">;
+declare const Container: <C extends ElementType = "div">({ as, className, children, widthPreset, ...rest }: ContainerProps<C>) => import("react").JSX.Element;
+export { Container, type ContainerProps, type ContainerWidthPreset };

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

@@ -0,0 +1,17 @@
+import { getContainerPresetClass } from "./container.utils.js";
+import "./container.css";
+import { cn } from "@puzzle-ui/core";
+import { jsx } from "react/jsx-runtime";
+// src/components/layout/container/index.tsx
+const Container = ({ as, className, children, widthPreset = "container", ...rest }) => {
+	const Component = as ?? "div";
+	const classes = cn("puzzle-container", getContainerPresetClass(widthPreset), className);
+	return /* @__PURE__ */ jsx(Component, {
+		className: classes,
+		...rest,
+		children
+	});
+};
+export { Container };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/layout/container/index.tsx"],"sourcesContent":["import type { ElementType, ComponentPropsWithRef, ReactNode } from \"react\";\nimport { cn } from \"@puzzle-ui/core\";\nimport {\n  getContainerPresetClass,\n  type ContainerWidthPreset,\n} from \"./container.utils\";\nimport \"./container.css\";\n\ntype ContainerOwnProps<C extends ElementType> = {\n  as?: C;\n  className?: string;\n  children?: ReactNode;\n  widthPreset?: ContainerWidthPreset;\n};\n\ntype ContainerProps<C extends ElementType = \"div\"> = ContainerOwnProps<C> &\n  Omit<ComponentPropsWithRef<C>, keyof ContainerOwnProps<C> | \"as\">;\n\nconst Container = <C extends ElementType = \"div\">({\n  as,\n  className,\n  children,\n  widthPreset = \"container\",\n  ...rest\n}: ContainerProps<C>) => {\n  const Component = (as ?? \"div\") as ElementType;\n\n  const classes = cn(\n    \"puzzle-container\",\n    getContainerPresetClass(widthPreset),\n    className,\n  );\n\n  return (\n    <Component className={classes} {...rest}>\n      {children}\n    </Component>\n  );\n};\n\nexport { Container, type ContainerProps, type ContainerWidthPreset };\n"],"mappings":";;;;;AAkBA,MAAM,aAA4C,EAChD,IACA,WACA,UACA,cAAc,aACd,GAAG,WACoB;CACvB,MAAM,YAAa,MAAM;CAEzB,MAAM,UAAU,GACd,oBACA,wBAAwB,WAAW,GACnC,SACF;CAEA,OACE,oBAAC,WAAD;EAAW,WAAW;EAAS,GAAI;EAChC;CACQ,CAAA;AAEf"}

package/dist/components/layout/page-layout/index.cjs

@@ -0,0 +1,80 @@
+;/* empty css                  */
+let _puzzle_ui_core = require("@puzzle-ui/core");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/components/layout/page-layout/index.tsx
+const cx = (...values) => values.filter(Boolean).join(" ");
+const toCSSSize = (value) => value === void 0 ? void 0 : typeof value === "number" ? `${value}px` : value;
+const createRegion = (type) => {
+	const Region = (_props) => null;
+	Region.displayName = `PageLayout.${type}`;
+	return Object.assign(Region, { regionType: type });
+};
+const Header = createRegion("header");
+const Main = createRegion("main");
+const LeftSidebar = createRegion("leftSidebar");
+const RightSidebar = createRegion("rightSidebar");
+const Footer = createRegion("footer");
+const PageLayoutBase = ({ children, className, contentClassName, style, maxWidth, gap, rowGap, columnGap, contentPaddingInline, contentPaddingBlock, minHeight, sidebarPlacement }) => {
+	const placement = (0, _puzzle_ui_core.resolveResponsiveValue)(sidebarPlacement ?? {
+		mobile: "below",
+		tablet: "below",
+		desktop: "beside"
+	});
+	const regions = {};
+	react.Children.forEach(children, (child) => {
+		if (!(0, react.isValidElement)(child)) return;
+		const type = child.type;
+		if (type.regionType) regions[type.regionType] = child;
+	});
+	const renderRegion = (region, className, tag, ariaLabel) => {
+		if (!region) return null;
+		const { children: content, className: regionClassName, ...props } = region.props;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(tag, {
+			...props,
+			className: cx(className, regionClassName),
+			"aria-label": ariaLabel ?? props["aria-label"],
+			children: content
+		});
+	};
+	const layoutStyle = {
+		"--puzzle-page-max-width": toCSSSize(maxWidth),
+		"--puzzle-page-gap": toCSSSize(gap),
+		"--puzzle-page-row-gap": toCSSSize(rowGap),
+		"--puzzle-page-column-gap": toCSSSize(columnGap),
+		"--puzzle-page-padding-inline": toCSSSize(contentPaddingInline),
+		"--puzzle-page-padding-block": toCSSSize(contentPaddingBlock),
+		"--puzzle-page-min-height": toCSSSize(minHeight),
+		...style
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: cx("puzzle-page-layout", className),
+		style: layoutStyle,
+		"data-puzzle-page-layout": "",
+		"data-sidebar-placement-mobile": placement.mobile,
+		"data-sidebar-placement-tablet": placement.tablet,
+		"data-sidebar-placement-desktop": placement.desktop,
+		children: [
+			renderRegion(regions.header, "puzzle-page-layout__header", "header"),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: cx("puzzle-page-layout__content", contentClassName),
+				children: [
+					renderRegion(regions.main, "puzzle-page-layout__main", "main"),
+					renderRegion(regions.leftSidebar, "puzzle-page-layout__sidebar puzzle-page-layout__sidebar--left", "aside"),
+					renderRegion(regions.rightSidebar, "puzzle-page-layout__sidebar puzzle-page-layout__sidebar--right", "aside")
+				]
+			}),
+			renderRegion(regions.footer, "puzzle-page-layout__footer", "footer")
+		]
+	});
+};
+const PageLayout = Object.assign(PageLayoutBase, {
+	Header,
+	Main,
+	LeftSidebar,
+	RightSidebar,
+	Footer
+});
+exports.PageLayout = PageLayout;
+
+//# sourceMappingURL=index.cjs.map

package/dist/components/layout/page-layout/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["resolveResponsiveValue","isValidElement","Component"],"sources":["../../../../src/components/layout/page-layout/index.tsx"],"sourcesContent":["import {\n  Children,\n  isValidElement,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport { resolveResponsiveValue, type ResponsiveValue } from \"@puzzle-ui/core\";\n\nimport \"./page-layout.css\";\n\ntype CSSSize = string | number;\ntype SidebarPlacement = \"beside\" | \"below\";\n\ntype RegionProps = HTMLAttributes<HTMLElement> & {\n  children?: ReactNode;\n};\n\ntype PageLayoutProps = {\n  children: ReactNode;\n\n  className?: string;\n  contentClassName?: string;\n  style?: CSSProperties;\n\n  maxWidth?: CSSSize;\n  gap?: CSSSize;\n  rowGap?: CSSSize;\n  columnGap?: CSSSize;\n  contentPaddingInline?: CSSSize;\n  contentPaddingBlock?: CSSSize;\n  minHeight?: CSSSize;\n\n  sidebarPlacement?: ResponsiveValue<SidebarPlacement>;\n};\n\ntype RegionType = \"header\" | \"main\" | \"leftSidebar\" | \"rightSidebar\" | \"footer\";\n\ntype PageLayoutRegion = ReactElement<RegionProps> & {\n  type: RegionType;\n};\n\nconst cx = (...values: Array<string | undefined | false>): string =>\n  values.filter(Boolean).join(\" \");\n\nconst toCSSSize = (value: CSSSize | undefined): string | undefined =>\n  value === undefined\n    ? undefined\n    : typeof value === \"number\"\n      ? `${value}px`\n      : value;\n\nconst createRegion = (type: RegionType) => {\n  const Region = (_props: RegionProps) => null;\n\n  Region.displayName = `PageLayout.${type}`;\n\n  return Object.assign(Region, { regionType: type });\n};\n\nconst Header = createRegion(\"header\");\nconst Main = createRegion(\"main\");\nconst LeftSidebar = createRegion(\"leftSidebar\");\nconst RightSidebar = createRegion(\"rightSidebar\");\nconst Footer = createRegion(\"footer\");\n\nconst PageLayoutBase = ({\n  children,\n  className,\n  contentClassName,\n  style,\n  maxWidth,\n  gap,\n  rowGap,\n  columnGap,\n  contentPaddingInline,\n  contentPaddingBlock,\n  minHeight,\n  sidebarPlacement,\n}: PageLayoutProps) => {\n  const placement = resolveResponsiveValue<SidebarPlacement>(\n    sidebarPlacement ?? {\n      mobile: \"below\",\n      tablet: \"below\",\n      desktop: \"beside\",\n    },\n  );\n\n  const regions: Partial<Record<RegionType, ReactElement<RegionProps>>> = {};\n\n  Children.forEach(children, (child) => {\n    if (!isValidElement(child)) {\n      return;\n    }\n\n    const type = child.type as typeof Header;\n\n    if (type.regionType) {\n      regions[type.regionType] = child as ReactElement<RegionProps>;\n    }\n  });\n\n  const renderRegion = (\n    region: ReactElement<RegionProps> | undefined,\n    className: string,\n    tag: \"header\" | \"main\" | \"aside\" | \"footer\",\n    ariaLabel?: string,\n  ) => {\n    if (!region) {\n      return null;\n    }\n\n    const {\n      children: content,\n      className: regionClassName,\n      ...props\n    } = region.props;\n\n    const Component = tag;\n\n    return (\n      <Component\n        {...props}\n        className={cx(className, regionClassName)}\n        aria-label={ariaLabel ?? props[\"aria-label\"]}\n      >\n        {content}\n      </Component>\n    );\n  };\n\n  const layoutStyle = {\n    \"--puzzle-page-max-width\": toCSSSize(maxWidth),\n    \"--puzzle-page-gap\": toCSSSize(gap),\n    \"--puzzle-page-row-gap\": toCSSSize(rowGap),\n    \"--puzzle-page-column-gap\": toCSSSize(columnGap),\n    \"--puzzle-page-padding-inline\": toCSSSize(contentPaddingInline),\n    \"--puzzle-page-padding-block\": toCSSSize(contentPaddingBlock),\n    \"--puzzle-page-min-height\": toCSSSize(minHeight),\n    ...style,\n  } as CSSProperties;\n\n  return (\n    <div\n      className={cx(\"puzzle-page-layout\", className)}\n      style={layoutStyle}\n      data-puzzle-page-layout=\"\"\n      data-sidebar-placement-mobile={placement.mobile}\n      data-sidebar-placement-tablet={placement.tablet}\n      data-sidebar-placement-desktop={placement.desktop}\n    >\n      {renderRegion(regions.header, \"puzzle-page-layout__header\", \"header\")}\n\n      <div className={cx(\"puzzle-page-layout__content\", contentClassName)}>\n        {renderRegion(regions.main, \"puzzle-page-layout__main\", \"main\")}\n\n        {renderRegion(\n          regions.leftSidebar,\n          \"puzzle-page-layout__sidebar puzzle-page-layout__sidebar--left\",\n          \"aside\",\n        )}\n\n        {renderRegion(\n          regions.rightSidebar,\n          \"puzzle-page-layout__sidebar puzzle-page-layout__sidebar--right\",\n          \"aside\",\n        )}\n      </div>\n\n      {renderRegion(regions.footer, \"puzzle-page-layout__footer\", \"footer\")}\n    </div>\n  );\n};\n\ntype PageLayoutComponent = ((props: PageLayoutProps) => ReactElement) & {\n  Header: typeof Header;\n  Main: typeof Main;\n  LeftSidebar: typeof LeftSidebar;\n  RightSidebar: typeof RightSidebar;\n  Footer: typeof Footer;\n};\n\nconst PageLayout = Object.assign(PageLayoutBase, {\n  Header,\n  Main,\n  LeftSidebar,\n  RightSidebar,\n  Footer,\n}) as PageLayoutComponent;\n\nexport { PageLayout, type PageLayoutProps, type SidebarPlacement };\n"],"mappings":";;;;;AA2CA,MAAM,MAAM,GAAG,WACb,OAAO,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;AAEjC,MAAM,aAAa,UACjB,UAAU,KAAA,IACN,KAAA,IACA,OAAO,UAAU,WACf,GAAG,MAAM,MACT;AAER,MAAM,gBAAgB,SAAqB;CACzC,MAAM,UAAU,WAAwB;CAExC,OAAO,cAAc,cAAc;CAEnC,OAAO,OAAO,OAAO,QAAQ,EAAE,YAAY,KAAK,CAAC;AACnD;AAEA,MAAM,SAAS,aAAa,QAAQ;AACpC,MAAM,OAAO,aAAa,MAAM;AAChC,MAAM,cAAc,aAAa,aAAa;AAC9C,MAAM,eAAe,aAAa,cAAc;AAChD,MAAM,SAAS,aAAa,QAAQ;AAEpC,MAAM,kBAAkB,EACtB,UACA,WACA,kBACA,OACA,UACA,KACA,QACA,WACA,sBACA,qBACA,WACA,uBACqB;CACrB,MAAM,aAAA,GAAYA,gBAAAA,uBAAAA,CAChB,oBAAoB;EAClB,QAAQ;EACR,QAAQ;EACR,SAAS;CACX,CACF;CAEA,MAAM,UAAkE,CAAC;CAEzE,MAAA,SAAS,QAAQ,WAAW,UAAU;EACpC,IAAI,EAAA,GAACC,MAAAA,eAAAA,CAAe,KAAK,GACvB;EAGF,MAAM,OAAO,MAAM;EAEnB,IAAI,KAAK,YACP,QAAQ,KAAK,cAAc;CAE/B,CAAC;CAED,MAAM,gBACJ,QACA,WACA,KACA,cACG;EACH,IAAI,CAAC,QACH,OAAO;EAGT,MAAM,EACJ,UAAU,SACV,WAAW,iBACX,GAAG,UACD,OAAO;EAIX,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,KAAD;GACE,GAAI;GACJ,WAAW,GAAG,WAAW,eAAe;GACxC,cAAY,aAAa,MAAM;GAE9B,UAAA;EACQ,CAAA;CAEf;CAEA,MAAM,cAAc;EAClB,2BAA2B,UAAU,QAAQ;EAC7C,qBAAqB,UAAU,GAAG;EAClC,yBAAyB,UAAU,MAAM;EACzC,4BAA4B,UAAU,SAAS;EAC/C,gCAAgC,UAAU,oBAAoB;EAC9D,+BAA+B,UAAU,mBAAmB;EAC5D,4BAA4B,UAAU,SAAS;EAC/C,GAAG;CACL;CAEA,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EACE,WAAW,GAAG,sBAAsB,SAAS;EAC7C,OAAO;EACP,2BAAwB;EACxB,iCAA+B,UAAU;EACzC,iCAA+B,UAAU;EACzC,kCAAgC,UAAU;EAN5C,UAAA;GAQG,aAAa,QAAQ,QAAQ,8BAA8B,QAAQ;GAEpE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;IAAK,WAAW,GAAG,+BAA+B,gBAAgB;IAAlE,UAAA;KACG,aAAa,QAAQ,MAAM,4BAA4B,MAAM;KAE7D,aACC,QAAQ,aACR,iEACA,OACF;KAEC,aACC,QAAQ,cACR,kEACA,OACF;IACG;;GAEJ,aAAa,QAAQ,QAAQ,8BAA8B,QAAQ;EACjE;;AAET;AAUA,MAAM,aAAa,OAAO,OAAO,gBAAgB;CAC/C;CACA;CACA;CACA;CACA;AACF,CAAC"}

package/dist/components/layout/page-layout/index.d.cts

@@ -0,0 +1,61 @@
+import { CSSProperties, HTMLAttributes, ReactElement, ReactNode } from "react";
+import { ResponsiveValue } from "@puzzle-ui/core";
+type CSSSize = string | number;
+type SidebarPlacement = "beside" | "below";
+type RegionProps = HTMLAttributes<HTMLElement> & {
+  children?: ReactNode;
+};
+type PageLayoutProps = {
+  children: ReactNode;
+  className?: string;
+  contentClassName?: string;
+  style?: CSSProperties;
+  maxWidth?: CSSSize;
+  gap?: CSSSize;
+  rowGap?: CSSSize;
+  columnGap?: CSSSize;
+  contentPaddingInline?: CSSSize;
+  contentPaddingBlock?: CSSSize;
+  minHeight?: CSSSize;
+  sidebarPlacement?: ResponsiveValue<SidebarPlacement>;
+};
+type RegionType = "header" | "main" | "leftSidebar" | "rightSidebar" | "footer";
+declare const Header: {
+  (_props: RegionProps): null;
+  displayName: string;
+} & {
+  regionType: RegionType;
+};
+declare const Main: {
+  (_props: RegionProps): null;
+  displayName: string;
+} & {
+  regionType: RegionType;
+};
+declare const LeftSidebar: {
+  (_props: RegionProps): null;
+  displayName: string;
+} & {
+  regionType: RegionType;
+};
+declare const RightSidebar: {
+  (_props: RegionProps): null;
+  displayName: string;
+} & {
+  regionType: RegionType;
+};
+declare const Footer: {
+  (_props: RegionProps): null;
+  displayName: string;
+} & {
+  regionType: RegionType;
+};
+type PageLayoutComponent = ((props: PageLayoutProps) => ReactElement) & {
+  Header: typeof Header;
+  Main: typeof Main;
+  LeftSidebar: typeof LeftSidebar;
+  RightSidebar: typeof RightSidebar;
+  Footer: typeof Footer;
+};
+declare const PageLayout: PageLayoutComponent;
+export { PageLayout, type PageLayoutProps, type SidebarPlacement };

package/dist/components/layout/page-layout/index.d.ts

@@ -0,0 +1,61 @@
+import { ResponsiveValue } from "@puzzle-ui/core";
+import { CSSProperties, HTMLAttributes, ReactElement, ReactNode } from "react";
+type CSSSize = string | number;
+type SidebarPlacement = "beside" | "below";
+type RegionProps = HTMLAttributes<HTMLElement> & {
+  children?: ReactNode;
+};
+type PageLayoutProps = {
+  children: ReactNode;
+  className?: string;
+  contentClassName?: string;
+  style?: CSSProperties;
+  maxWidth?: CSSSize;
+  gap?: CSSSize;
+  rowGap?: CSSSize;
+  columnGap?: CSSSize;
+  contentPaddingInline?: CSSSize;
+  contentPaddingBlock?: CSSSize;
+  minHeight?: CSSSize;
+  sidebarPlacement?: ResponsiveValue<SidebarPlacement>;
+};
+type RegionType = "header" | "main" | "leftSidebar" | "rightSidebar" | "footer";
+declare const Header: {
+  (_props: RegionProps): null;
+  displayName: string;
+} & {
+  regionType: RegionType;
+};
+declare const Main: {
+  (_props: RegionProps): null;
+  displayName: string;
+} & {
+  regionType: RegionType;
+};
+declare const LeftSidebar: {
+  (_props: RegionProps): null;
+  displayName: string;
+} & {
+  regionType: RegionType;
+};
+declare const RightSidebar: {
+  (_props: RegionProps): null;
+  displayName: string;
+} & {
+  regionType: RegionType;
+};
+declare const Footer: {
+  (_props: RegionProps): null;
+  displayName: string;
+} & {
+  regionType: RegionType;
+};
+type PageLayoutComponent = ((props: PageLayoutProps) => ReactElement) & {
+  Header: typeof Header;
+  Main: typeof Main;
+  LeftSidebar: typeof LeftSidebar;
+  RightSidebar: typeof RightSidebar;
+  Footer: typeof Footer;
+};
+declare const PageLayout: PageLayoutComponent;
+export { PageLayout, type PageLayoutProps, type SidebarPlacement };

package/dist/components/layout/page-layout/index.js

@@ -0,0 +1,80 @@
+import "./page-layout.css";
+import { resolveResponsiveValue } from "@puzzle-ui/core";
+import { Children, isValidElement } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/layout/page-layout/index.tsx
+const cx = (...values) => values.filter(Boolean).join(" ");
+const toCSSSize = (value) => value === void 0 ? void 0 : typeof value === "number" ? `${value}px` : value;
+const createRegion = (type) => {
+	const Region = (_props) => null;
+	Region.displayName = `PageLayout.${type}`;
+	return Object.assign(Region, { regionType: type });
+};
+const Header = createRegion("header");
+const Main = createRegion("main");
+const LeftSidebar = createRegion("leftSidebar");
+const RightSidebar = createRegion("rightSidebar");
+const Footer = createRegion("footer");
+const PageLayoutBase = ({ children, className, contentClassName, style, maxWidth, gap, rowGap, columnGap, contentPaddingInline, contentPaddingBlock, minHeight, sidebarPlacement }) => {
+	const placement = resolveResponsiveValue(sidebarPlacement ?? {
+		mobile: "below",
+		tablet: "below",
+		desktop: "beside"
+	});
+	const regions = {};
+	Children.forEach(children, (child) => {
+		if (!isValidElement(child)) return;
+		const type = child.type;
+		if (type.regionType) regions[type.regionType] = child;
+	});
+	const renderRegion = (region, className, tag, ariaLabel) => {
+		if (!region) return null;
+		const { children: content, className: regionClassName, ...props } = region.props;
+		return /* @__PURE__ */ jsx(tag, {
+			...props,
+			className: cx(className, regionClassName),
+			"aria-label": ariaLabel ?? props["aria-label"],
+			children: content
+		});
+	};
+	const layoutStyle = {
+		"--puzzle-page-max-width": toCSSSize(maxWidth),
+		"--puzzle-page-gap": toCSSSize(gap),
+		"--puzzle-page-row-gap": toCSSSize(rowGap),
+		"--puzzle-page-column-gap": toCSSSize(columnGap),
+		"--puzzle-page-padding-inline": toCSSSize(contentPaddingInline),
+		"--puzzle-page-padding-block": toCSSSize(contentPaddingBlock),
+		"--puzzle-page-min-height": toCSSSize(minHeight),
+		...style
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx("puzzle-page-layout", className),
+		style: layoutStyle,
+		"data-puzzle-page-layout": "",
+		"data-sidebar-placement-mobile": placement.mobile,
+		"data-sidebar-placement-tablet": placement.tablet,
+		"data-sidebar-placement-desktop": placement.desktop,
+		children: [
+			renderRegion(regions.header, "puzzle-page-layout__header", "header"),
+			/* @__PURE__ */ jsxs("div", {
+				className: cx("puzzle-page-layout__content", contentClassName),
+				children: [
+					renderRegion(regions.main, "puzzle-page-layout__main", "main"),
+					renderRegion(regions.leftSidebar, "puzzle-page-layout__sidebar puzzle-page-layout__sidebar--left", "aside"),
+					renderRegion(regions.rightSidebar, "puzzle-page-layout__sidebar puzzle-page-layout__sidebar--right", "aside")
+				]
+			}),
+			renderRegion(regions.footer, "puzzle-page-layout__footer", "footer")
+		]
+	});
+};
+const PageLayout = Object.assign(PageLayoutBase, {
+	Header,
+	Main,
+	LeftSidebar,
+	RightSidebar,
+	Footer
+});
+export { PageLayout };
+
+//# sourceMappingURL=index.js.map

package/dist/components/layout/page-layout/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Component"],"sources":["../../../../src/components/layout/page-layout/index.tsx"],"sourcesContent":["import {\n  Children,\n  isValidElement,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport { resolveResponsiveValue, type ResponsiveValue } from \"@puzzle-ui/core\";\n\nimport \"./page-layout.css\";\n\ntype CSSSize = string | number;\ntype SidebarPlacement = \"beside\" | \"below\";\n\ntype RegionProps = HTMLAttributes<HTMLElement> & {\n  children?: ReactNode;\n};\n\ntype PageLayoutProps = {\n  children: ReactNode;\n\n  className?: string;\n  contentClassName?: string;\n  style?: CSSProperties;\n\n  maxWidth?: CSSSize;\n  gap?: CSSSize;\n  rowGap?: CSSSize;\n  columnGap?: CSSSize;\n  contentPaddingInline?: CSSSize;\n  contentPaddingBlock?: CSSSize;\n  minHeight?: CSSSize;\n\n  sidebarPlacement?: ResponsiveValue<SidebarPlacement>;\n};\n\ntype RegionType = \"header\" | \"main\" | \"leftSidebar\" | \"rightSidebar\" | \"footer\";\n\ntype PageLayoutRegion = ReactElement<RegionProps> & {\n  type: RegionType;\n};\n\nconst cx = (...values: Array<string | undefined | false>): string =>\n  values.filter(Boolean).join(\" \");\n\nconst toCSSSize = (value: CSSSize | undefined): string | undefined =>\n  value === undefined\n    ? undefined\n    : typeof value === \"number\"\n      ? `${value}px`\n      : value;\n\nconst createRegion = (type: RegionType) => {\n  const Region = (_props: RegionProps) => null;\n\n  Region.displayName = `PageLayout.${type}`;\n\n  return Object.assign(Region, { regionType: type });\n};\n\nconst Header = createRegion(\"header\");\nconst Main = createRegion(\"main\");\nconst LeftSidebar = createRegion(\"leftSidebar\");\nconst RightSidebar = createRegion(\"rightSidebar\");\nconst Footer = createRegion(\"footer\");\n\nconst PageLayoutBase = ({\n  children,\n  className,\n  contentClassName,\n  style,\n  maxWidth,\n  gap,\n  rowGap,\n  columnGap,\n  contentPaddingInline,\n  contentPaddingBlock,\n  minHeight,\n  sidebarPlacement,\n}: PageLayoutProps) => {\n  const placement = resolveResponsiveValue<SidebarPlacement>(\n    sidebarPlacement ?? {\n      mobile: \"below\",\n      tablet: \"below\",\n      desktop: \"beside\",\n    },\n  );\n\n  const regions: Partial<Record<RegionType, ReactElement<RegionProps>>> = {};\n\n  Children.forEach(children, (child) => {\n    if (!isValidElement(child)) {\n      return;\n    }\n\n    const type = child.type as typeof Header;\n\n    if (type.regionType) {\n      regions[type.regionType] = child as ReactElement<RegionProps>;\n    }\n  });\n\n  const renderRegion = (\n    region: ReactElement<RegionProps> | undefined,\n    className: string,\n    tag: \"header\" | \"main\" | \"aside\" | \"footer\",\n    ariaLabel?: string,\n  ) => {\n    if (!region) {\n      return null;\n    }\n\n    const {\n      children: content,\n      className: regionClassName,\n      ...props\n    } = region.props;\n\n    const Component = tag;\n\n    return (\n      <Component\n        {...props}\n        className={cx(className, regionClassName)}\n        aria-label={ariaLabel ?? props[\"aria-label\"]}\n      >\n        {content}\n      </Component>\n    );\n  };\n\n  const layoutStyle = {\n    \"--puzzle-page-max-width\": toCSSSize(maxWidth),\n    \"--puzzle-page-gap\": toCSSSize(gap),\n    \"--puzzle-page-row-gap\": toCSSSize(rowGap),\n    \"--puzzle-page-column-gap\": toCSSSize(columnGap),\n    \"--puzzle-page-padding-inline\": toCSSSize(contentPaddingInline),\n    \"--puzzle-page-padding-block\": toCSSSize(contentPaddingBlock),\n    \"--puzzle-page-min-height\": toCSSSize(minHeight),\n    ...style,\n  } as CSSProperties;\n\n  return (\n    <div\n      className={cx(\"puzzle-page-layout\", className)}\n      style={layoutStyle}\n      data-puzzle-page-layout=\"\"\n      data-sidebar-placement-mobile={placement.mobile}\n      data-sidebar-placement-tablet={placement.tablet}\n      data-sidebar-placement-desktop={placement.desktop}\n    >\n      {renderRegion(regions.header, \"puzzle-page-layout__header\", \"header\")}\n\n      <div className={cx(\"puzzle-page-layout__content\", contentClassName)}>\n        {renderRegion(regions.main, \"puzzle-page-layout__main\", \"main\")}\n\n        {renderRegion(\n          regions.leftSidebar,\n          \"puzzle-page-layout__sidebar puzzle-page-layout__sidebar--left\",\n          \"aside\",\n        )}\n\n        {renderRegion(\n          regions.rightSidebar,\n          \"puzzle-page-layout__sidebar puzzle-page-layout__sidebar--right\",\n          \"aside\",\n        )}\n      </div>\n\n      {renderRegion(regions.footer, \"puzzle-page-layout__footer\", \"footer\")}\n    </div>\n  );\n};\n\ntype PageLayoutComponent = ((props: PageLayoutProps) => ReactElement) & {\n  Header: typeof Header;\n  Main: typeof Main;\n  LeftSidebar: typeof LeftSidebar;\n  RightSidebar: typeof RightSidebar;\n  Footer: typeof Footer;\n};\n\nconst PageLayout = Object.assign(PageLayoutBase, {\n  Header,\n  Main,\n  LeftSidebar,\n  RightSidebar,\n  Footer,\n}) as PageLayoutComponent;\n\nexport { PageLayout, type PageLayoutProps, type SidebarPlacement };\n"],"mappings":";;;;;AA2CA,MAAM,MAAM,GAAG,WACb,OAAO,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;AAEjC,MAAM,aAAa,UACjB,UAAU,KAAA,IACN,KAAA,IACA,OAAO,UAAU,WACf,GAAG,MAAM,MACT;AAER,MAAM,gBAAgB,SAAqB;CACzC,MAAM,UAAU,WAAwB;CAExC,OAAO,cAAc,cAAc;CAEnC,OAAO,OAAO,OAAO,QAAQ,EAAE,YAAY,KAAK,CAAC;AACnD;AAEA,MAAM,SAAS,aAAa,QAAQ;AACpC,MAAM,OAAO,aAAa,MAAM;AAChC,MAAM,cAAc,aAAa,aAAa;AAC9C,MAAM,eAAe,aAAa,cAAc;AAChD,MAAM,SAAS,aAAa,QAAQ;AAEpC,MAAM,kBAAkB,EACtB,UACA,WACA,kBACA,OACA,UACA,KACA,QACA,WACA,sBACA,qBACA,WACA,uBACqB;CACrB,MAAM,YAAY,uBAChB,oBAAoB;EAClB,QAAQ;EACR,QAAQ;EACR,SAAS;CACX,CACF;CAEA,MAAM,UAAkE,CAAC;CAEzE,SAAS,QAAQ,WAAW,UAAU;EACpC,IAAI,CAAC,eAAe,KAAK,GACvB;EAGF,MAAM,OAAO,MAAM;EAEnB,IAAI,KAAK,YACP,QAAQ,KAAK,cAAc;CAE/B,CAAC;CAED,MAAM,gBACJ,QACA,WACA,KACA,cACG;EACH,IAAI,CAAC,QACH,OAAO;EAGT,MAAM,EACJ,UAAU,SACV,WAAW,iBACX,GAAG,UACD,OAAO;EAIX,OACE,oBAACA,KAAD;GACE,GAAI;GACJ,WAAW,GAAG,WAAW,eAAe;GACxC,cAAY,aAAa,MAAM;GAE9B,UAAA;EACQ,CAAA;CAEf;CAEA,MAAM,cAAc;EAClB,2BAA2B,UAAU,QAAQ;EAC7C,qBAAqB,UAAU,GAAG;EAClC,yBAAyB,UAAU,MAAM;EACzC,4BAA4B,UAAU,SAAS;EAC/C,gCAAgC,UAAU,oBAAoB;EAC9D,+BAA+B,UAAU,mBAAmB;EAC5D,4BAA4B,UAAU,SAAS;EAC/C,GAAG;CACL;CAEA,OACE,qBAAC,OAAD;EACE,WAAW,GAAG,sBAAsB,SAAS;EAC7C,OAAO;EACP,2BAAwB;EACxB,iCAA+B,UAAU;EACzC,iCAA+B,UAAU;EACzC,kCAAgC,UAAU;EAN5C,UAAA;GAQG,aAAa,QAAQ,QAAQ,8BAA8B,QAAQ;GAEpE,qBAAC,OAAD;IAAK,WAAW,GAAG,+BAA+B,gBAAgB;IAAlE,UAAA;KACG,aAAa,QAAQ,MAAM,4BAA4B,MAAM;KAE7D,aACC,QAAQ,aACR,iEACA,OACF;KAEC,aACC,QAAQ,cACR,kEACA,OACF;IACG;;GAEJ,aAAa,QAAQ,QAAQ,8BAA8B,QAAQ;EACjE;;AAET;AAUA,MAAM,aAAa,OAAO,OAAO,gBAAgB;CAC/C;CACA;CACA;CACA;CACA;AACF,CAAC"}