@puzzle-ui/ui 0.0.0-stage → 0.1.0

package/dist/components/layout/page-layout/page-layout.css

@@ -0,0 +1,88 @@
+.puzzle-page-layout {
+  --puzzle-sticky-offset: 0px;
+  --puzzle-page-content-direction: column;
+  --puzzle-page-main-flex: 0 0 auto;
+  --puzzle-page-sidebar-flex: 0 1 auto;
+  --puzzle-page-sidebar-left-order: 1;
+  --puzzle-page-sidebar-right-order: 2;
+  width: 100%;
+  max-width: var(--puzzle-page-max-width, none);
+  min-height: var(--puzzle-page-min-height, 100vh);
+  min-height: var(--puzzle-page-min-height, 100svh);
+  box-sizing: border-box;
+  flex-direction: column;
+  margin-inline: auto;
+  display: flex;
+}
+
+.puzzle-page-layout__content {
+  flex: 1 0 auto;
+  flex-direction: var(--puzzle-page-content-direction);
+  gap: var(--puzzle-page-gap, 0);
+  row-gap: var(--puzzle-page-row-gap, var(--puzzle-page-gap, 0));
+  column-gap: var(--puzzle-page-column-gap, var(--puzzle-page-gap, 0));
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  display: flex;
+  overflow: visible;
+}
+
+.puzzle-page-layout__main {
+  order: 0;
+  flex: var(--puzzle-page-main-flex);
+  box-sizing: border-box;
+  min-width: 0;
+}
+
+.puzzle-page-layout__sidebar {
+  flex: var(--puzzle-page-sidebar-flex);
+  box-sizing: border-box;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.puzzle-page-layout__sidebar--left {
+  order: var(--puzzle-page-sidebar-left-order);
+}
+
+.puzzle-page-layout__sidebar--right {
+  order: var(--puzzle-page-sidebar-right-order);
+}
+
+.puzzle-page-layout__footer {
+  box-sizing: border-box;
+  flex: none;
+  min-width: 0;
+  display: flex;
+}
+
+@media (width <= 767.98px) {
+  .puzzle-page-layout[data-sidebar-placement-mobile="beside"] {
+    --puzzle-page-content-direction: row;
+    --puzzle-page-main-flex: 1 1 0;
+    --puzzle-page-sidebar-flex: 0 1 16rem;
+    --puzzle-page-sidebar-left-order: -1;
+    --puzzle-page-sidebar-right-order: 1;
+  }
+}
+
+@media (width >= 768px) and (width <= 1023.98px) {
+  .puzzle-page-layout[data-sidebar-placement-tablet="beside"] {
+    --puzzle-page-content-direction: row;
+    --puzzle-page-main-flex: 1 1 0;
+    --puzzle-page-sidebar-flex: 0 1 16rem;
+    --puzzle-page-sidebar-left-order: -1;
+    --puzzle-page-sidebar-right-order: 1;
+  }
+}
+
+@media (width >= 1024px) {
+  .puzzle-page-layout[data-sidebar-placement-desktop="beside"] {
+    --puzzle-page-content-direction: row;
+    --puzzle-page-main-flex: 1 1 0;
+    --puzzle-page-sidebar-flex: 0 1 16rem;
+    --puzzle-page-sidebar-left-order: -1;
+    --puzzle-page-sidebar-right-order: 1;
+  }
+}

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

@@ -0,0 +1,15 @@
+;/* 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),
+		"data-theme": theme,
+		children: [children, divider && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("hr", { className: "puzzle-section--divider" })]
+	});
+};
+exports.Section = Section;
+
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +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"}

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

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

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

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

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

@@ -0,0 +1,15 @@
+import "./section.css";
+import "../container/container.css";
+import { cn } from "@puzzle-ui/core";
+import { 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),
+		"data-theme": theme,
+		children: [children, divider && /* @__PURE__ */ jsx("hr", { className: "puzzle-section--divider" })]
+	});
+};
+export { Section };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,71 @@
+.puzzle-section-stack {
+  flex-direction: column;
+  min-width: 0;
+  display: flex;
+}
+
+.puzzle-section {
+  --section-padding-y: var(--puzzle-container-gutter, clamp(1rem, 3vw, 3rem));
+  --section-gap: var(--puzzle-space-4, 1rem);
+  gap: var(--section-gap);
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  padding-block: var(--section-padding-y);
+  background-color: var(--section-background);
+  color: var(--section-color);
+  flex-direction: column;
+  display: flex;
+}
+
+.puzzle-section--divider {
+  border: none;
+  border-top: var(--puzzle-border-width, 1px) solid var(--puzzle-color-border);
+  margin-top: var(--section-padding-y);
+}
+
+.puzzle-section--compact-top {
+  padding-block-start: calc(var(--section-padding-y) / 2);
+}
+
+.puzzle-section--compact-bottom {
+  padding-block-end: calc(var(--section-padding-y) / 2);
+}
+
+.puzzle-section--no-padding {
+  padding-block: 0;
+}
+
+.puzzle-section[data-theme="normal"] {
+  --section-background: var(--puzzle-color-background);
+  --section-color: var(--puzzle-color-text);
+}
+
+.puzzle-section[data-theme="normal"] .puzzle-section--divider {
+  border-top-color: var(--puzzle-color-border);
+}
+
+.puzzle-section[data-theme="light"] {
+  --section-background: var(--puzzle-color-surface);
+  --section-color: var(--puzzle-color-text);
+}
+
+.puzzle-section[data-theme="dark"] {
+  --section-background: var(--puzzle-color-surface-sunken);
+  --section-color: var(--puzzle-color-text);
+}
+
+.puzzle-section[data-theme="primary"] {
+  --section-background: var(--puzzle-color-primary);
+  --section-color: var(--puzzle-color-primary-foreground);
+}
+
+.puzzle-section[data-theme="secondary"] {
+  --section-background: var(--puzzle-color-secondary);
+  --section-color: var(--puzzle-color-secondary-foreground);
+}
+
+.puzzle-section[data-theme="accent"] {
+  --section-background: var(--puzzle-color-accent);
+  --section-color: var(--puzzle-color-accent-foreground);
+}

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

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+export type SectionTheme = "default" | "light" | "dark" | "primary" | "secondary" | "accent";
+export type SectionProps = {
+  children?: ReactNode;
+  className?: string;
+  theme?: SectionTheme;
+  fullWidth?: boolean;
+  noPadding?: boolean;
+  /** Internal: set by SectionStack. */
+  compactTop?: boolean;
+  compactBottom?: boolean;
+  divider?: boolean;
+};

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

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+export type SectionTheme = "default" | "light" | "dark" | "primary" | "secondary" | "accent";
+export type SectionProps = {
+  children?: ReactNode;
+  className?: string;
+  theme?: SectionTheme;
+  fullWidth?: boolean;
+  noPadding?: boolean;
+  /** Internal: set by SectionStack. */
+  compactTop?: boolean;
+  compactBottom?: boolean;
+  divider?: boolean;
+};

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

@@ -0,0 +1,29 @@
+const require_index = require("../section/index.cjs");
+let _puzzle_ui_core = require("@puzzle-ui/core");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/components/layout/section-stack/index.tsx
+const isSection = (node) => (0, react.isValidElement)(node) && node.type === require_index.Section;
+const SectionStack = ({ children, className, divideY }) => {
+	const sections = react.Children.toArray(children);
+	const enhancedSections = sections.map((child, index) => {
+		if (!isSection(child)) return child;
+		const previous = sections[index - 1];
+		const next = sections[index + 1];
+		const previousTheme = isSection(previous) ? previous.props.theme ?? "default" : void 0;
+		const nextTheme = isSection(next) ? next.props.theme ?? "default" : void 0;
+		const theme = child.props.theme ?? "default";
+		return (0, react.cloneElement)(child, {
+			compactTop: previousTheme === theme && index > 0,
+			compactBottom: nextTheme === theme && index < sections.length - 1,
+			divider: divideY && index < sections.length - 1
+		});
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, _puzzle_ui_core.cn)("puzzle-section-stack", className),
+		children: enhancedSections
+	});
+};
+exports.SectionStack = SectionStack;
+
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["isValidElement","Section","Children","cloneElement","cn"],"sources":["../../../../src/components/layout/section-stack/index.tsx"],"sourcesContent":["import { cn } from \"@puzzle-ui/core\";\nimport { cloneElement, isValidElement, type ReactElement, type ReactNode, Children } from \"react\";\nimport { Section } from \"../section\";\nimport { type SectionProps } from \"../section/types\";\n\nconst isSection = (node: ReactNode): node is ReactElement<SectionProps> =>\n  isValidElement(node) && node.type === Section;\n\ntype SectionStackProps = {\n  children: ReactNode;\n  className?: string;\n  divideY?: boolean;\n};\n\nconst SectionStack = ({ children, className, divideY }: SectionStackProps) => {\n  const sections = Children.toArray(children);\n\n  const enhancedSections = sections.map((child, index) => {\n    if (!isSection(child)) {\n      return child;\n    }\n\n    const previous = sections[index - 1];\n    const next = sections[index + 1];\n\n    const previousTheme = isSection(previous)\n      ? (previous.props.theme ?? \"default\")\n      : undefined;\n\n    const nextTheme = isSection(next)\n      ? (next.props.theme ?? \"default\")\n      : undefined;\n\n    const theme = child.props.theme ?? \"default\";\n    return cloneElement(child, {\n      compactTop: previousTheme === theme && index > 0,\n      compactBottom: nextTheme === theme && index < sections.length - 1,\n      divider: divideY && index < sections.length - 1,\n    });\n  });\n\n  return (\n    <div className={cn(\"puzzle-section-stack\", className)}>\n      {enhancedSections}\n    </div>\n  );\n};\n\nexport { SectionStack, type SectionStackProps };\n"],"mappings":";;;;;AAKA,MAAM,aAAa,UAAA,GACjBA,MAAAA,eAAAA,CAAe,IAAI,KAAK,KAAK,SAASC,cAAAA;AAQxC,MAAM,gBAAgB,EAAE,UAAU,WAAW,cAAiC;CAC5E,MAAM,WAAWC,MAAAA,SAAS,QAAQ,QAAQ;CAE1C,MAAM,mBAAmB,SAAS,KAAK,OAAO,UAAU;EACtD,IAAI,CAAC,UAAU,KAAK,GAClB,OAAO;EAGT,MAAM,WAAW,SAAS,QAAQ;EAClC,MAAM,OAAO,SAAS,QAAQ;EAE9B,MAAM,gBAAgB,UAAU,QAAQ,IACnC,SAAS,MAAM,SAAS,YACzB,KAAA;EAEJ,MAAM,YAAY,UAAU,IAAI,IAC3B,KAAK,MAAM,SAAS,YACrB,KAAA;EAEJ,MAAM,QAAQ,MAAM,MAAM,SAAS;EACnC,QAAA,GAAOC,MAAAA,aAAAA,CAAa,OAAO;GACzB,YAAY,kBAAkB,SAAS,QAAQ;GAC/C,eAAe,cAAc,SAAS,QAAQ,SAAS,SAAS;GAChE,SAAS,WAAW,QAAQ,SAAS,SAAS;EAChD,CAAC;CACH,CAAC;CAED,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,YAAA,GAAWC,gBAAAA,GAAAA,CAAG,wBAAwB,SAAS;EACjD,UAAA;CACE,CAAA;AAET"}

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

@@ -0,0 +1,8 @@
+import { ReactNode } from "react";
+type SectionStackProps = {
+  children: ReactNode;
+  className?: string;
+  divideY?: boolean;
+};
+declare const SectionStack: ({ children, className, divideY }: SectionStackProps) => import("react").JSX.Element;
+export { SectionStack, type SectionStackProps };

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

@@ -0,0 +1,8 @@
+import { ReactNode } from "react";
+type SectionStackProps = {
+  children: ReactNode;
+  className?: string;
+  divideY?: boolean;
+};
+declare const SectionStack: ({ children, className, divideY }: SectionStackProps) => import("react").JSX.Element;
+export { SectionStack, type SectionStackProps };

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

@@ -0,0 +1,29 @@
+import { Section } from "../section/index.js";
+import { cn } from "@puzzle-ui/core";
+import { Children, cloneElement, isValidElement } from "react";
+import { jsx } from "react/jsx-runtime";
+// src/components/layout/section-stack/index.tsx
+const isSection = (node) => isValidElement(node) && node.type === Section;
+const SectionStack = ({ children, className, divideY }) => {
+	const sections = Children.toArray(children);
+	const enhancedSections = sections.map((child, index) => {
+		if (!isSection(child)) return child;
+		const previous = sections[index - 1];
+		const next = sections[index + 1];
+		const previousTheme = isSection(previous) ? previous.props.theme ?? "default" : void 0;
+		const nextTheme = isSection(next) ? next.props.theme ?? "default" : void 0;
+		const theme = child.props.theme ?? "default";
+		return cloneElement(child, {
+			compactTop: previousTheme === theme && index > 0,
+			compactBottom: nextTheme === theme && index < sections.length - 1,
+			divider: divideY && index < sections.length - 1
+		});
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("puzzle-section-stack", className),
+		children: enhancedSections
+	});
+};
+export { SectionStack };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/layout/section-stack/index.tsx"],"sourcesContent":["import { cn } from \"@puzzle-ui/core\";\nimport { cloneElement, isValidElement, type ReactElement, type ReactNode, Children } from \"react\";\nimport { Section } from \"../section\";\nimport { type SectionProps } from \"../section/types\";\n\nconst isSection = (node: ReactNode): node is ReactElement<SectionProps> =>\n  isValidElement(node) && node.type === Section;\n\ntype SectionStackProps = {\n  children: ReactNode;\n  className?: string;\n  divideY?: boolean;\n};\n\nconst SectionStack = ({ children, className, divideY }: SectionStackProps) => {\n  const sections = Children.toArray(children);\n\n  const enhancedSections = sections.map((child, index) => {\n    if (!isSection(child)) {\n      return child;\n    }\n\n    const previous = sections[index - 1];\n    const next = sections[index + 1];\n\n    const previousTheme = isSection(previous)\n      ? (previous.props.theme ?? \"default\")\n      : undefined;\n\n    const nextTheme = isSection(next)\n      ? (next.props.theme ?? \"default\")\n      : undefined;\n\n    const theme = child.props.theme ?? \"default\";\n    return cloneElement(child, {\n      compactTop: previousTheme === theme && index > 0,\n      compactBottom: nextTheme === theme && index < sections.length - 1,\n      divider: divideY && index < sections.length - 1,\n    });\n  });\n\n  return (\n    <div className={cn(\"puzzle-section-stack\", className)}>\n      {enhancedSections}\n    </div>\n  );\n};\n\nexport { SectionStack, type SectionStackProps };\n"],"mappings":";;;;;AAKA,MAAM,aAAa,SACjB,eAAe,IAAI,KAAK,KAAK,SAAS;AAQxC,MAAM,gBAAgB,EAAE,UAAU,WAAW,cAAiC;CAC5E,MAAM,WAAW,SAAS,QAAQ,QAAQ;CAE1C,MAAM,mBAAmB,SAAS,KAAK,OAAO,UAAU;EACtD,IAAI,CAAC,UAAU,KAAK,GAClB,OAAO;EAGT,MAAM,WAAW,SAAS,QAAQ;EAClC,MAAM,OAAO,SAAS,QAAQ;EAE9B,MAAM,gBAAgB,UAAU,QAAQ,IACnC,SAAS,MAAM,SAAS,YACzB,KAAA;EAEJ,MAAM,YAAY,UAAU,IAAI,IAC3B,KAAK,MAAM,SAAS,YACrB,KAAA;EAEJ,MAAM,QAAQ,MAAM,MAAM,SAAS;EACnC,OAAO,aAAa,OAAO;GACzB,YAAY,kBAAkB,SAAS,QAAQ;GAC/C,eAAe,cAAc,SAAS,QAAQ,SAAS,SAAS;GAChE,SAAS,WAAW,QAAQ,SAAS,SAAS;EAChD,CAAC;CACH,CAAC;CAED,OACE,oBAAC,OAAD;EAAK,WAAW,GAAG,wBAAwB,SAAS;EACjD,UAAA;CACE,CAAA;AAET"}

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

@@ -0,0 +1,16 @@
+;/* empty css              */
+let _puzzle_ui_core = require("@puzzle-ui/core");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/components/layout/sidebar/index.tsx
+const Sidebar = ({ as, className, children, ...props }) => {
+	const Component = as ?? "aside";
+	const classes = (0, _puzzle_ui_core.cn)("puzzle-sidebar", className);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
+		className: classes,
+		...props,
+		children
+	});
+};
+exports.Sidebar = Sidebar;
+
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["cn"],"sources":["../../../../src/components/layout/sidebar/index.tsx"],"sourcesContent":["import { cn } from \"@puzzle-ui/core\";\nimport type { ComponentPropsWithRef, ElementType } from \"react\";\nimport \"./sidebar.css\";\n\ntype SidebarOwnProps<C extends ElementType> = {\n  as?: C;\n};\n\ntype SidebarProps<C extends ElementType = \"aside\"> = SidebarOwnProps<C> &\n  Omit<ComponentPropsWithRef<C>, keyof SidebarOwnProps<C> | \"as\">;\n\nconst Sidebar = <C extends ElementType = \"aside\">({\n  as,\n  className,\n  children,\n  ...props\n}: SidebarProps<C>) => {\n  const Component = as ?? \"aside\";\n  const classes = cn(\"puzzle-sidebar\", className);\n  return (\n    <Component className={classes} {...props}>\n      {children}\n    </Component>\n  );\n};\n\nexport { Sidebar, type SidebarProps };\n"],"mappings":";;;;AAWA,MAAM,WAA4C,EAChD,IACA,WACA,UACA,GAAG,YACkB;CACrB,MAAM,YAAY,MAAM;CACxB,MAAM,WAAA,GAAUA,gBAAAA,GAAAA,CAAG,kBAAkB,SAAS;CAC9C,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD;EAAW,WAAW;EAAS,GAAI;EAChC;CACQ,CAAA;AAEf"}

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

@@ -0,0 +1,7 @@
+import { ComponentPropsWithRef, ElementType } from "react";
+type SidebarOwnProps<C extends ElementType> = {
+  as?: C;
+};
+type SidebarProps<C extends ElementType = "aside"> = SidebarOwnProps<C> & Omit<ComponentPropsWithRef<C>, keyof SidebarOwnProps<C> | "as">;
+declare const Sidebar: <C extends ElementType = "aside">({ as, className, children, ...props }: SidebarProps<C>) => import("react").JSX.Element;
+export { Sidebar, type SidebarProps };

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

@@ -0,0 +1,7 @@
+import { ComponentPropsWithRef, ElementType } from "react";
+type SidebarOwnProps<C extends ElementType> = {
+  as?: C;
+};
+type SidebarProps<C extends ElementType = "aside"> = SidebarOwnProps<C> & Omit<ComponentPropsWithRef<C>, keyof SidebarOwnProps<C> | "as">;
+declare const Sidebar: <C extends ElementType = "aside">({ as, className, children, ...props }: SidebarProps<C>) => import("react").JSX.Element;
+export { Sidebar, type SidebarProps };

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

@@ -0,0 +1,16 @@
+import "./sidebar.css";
+import { cn } from "@puzzle-ui/core";
+import { jsx } from "react/jsx-runtime";
+// src/components/layout/sidebar/index.tsx
+const Sidebar = ({ as, className, children, ...props }) => {
+	const Component = as ?? "aside";
+	const classes = cn("puzzle-sidebar", className);
+	return /* @__PURE__ */ jsx(Component, {
+		className: classes,
+		...props,
+		children
+	});
+};
+export { Sidebar };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/layout/sidebar/index.tsx"],"sourcesContent":["import { cn } from \"@puzzle-ui/core\";\nimport type { ComponentPropsWithRef, ElementType } from \"react\";\nimport \"./sidebar.css\";\n\ntype SidebarOwnProps<C extends ElementType> = {\n  as?: C;\n};\n\ntype SidebarProps<C extends ElementType = \"aside\"> = SidebarOwnProps<C> &\n  Omit<ComponentPropsWithRef<C>, keyof SidebarOwnProps<C> | \"as\">;\n\nconst Sidebar = <C extends ElementType = \"aside\">({\n  as,\n  className,\n  children,\n  ...props\n}: SidebarProps<C>) => {\n  const Component = as ?? \"aside\";\n  const classes = cn(\"puzzle-sidebar\", className);\n  return (\n    <Component className={classes} {...props}>\n      {children}\n    </Component>\n  );\n};\n\nexport { Sidebar, type SidebarProps };\n"],"mappings":";;;;AAWA,MAAM,WAA4C,EAChD,IACA,WACA,UACA,GAAG,YACkB;CACrB,MAAM,YAAY,MAAM;CACxB,MAAM,UAAU,GAAG,kBAAkB,SAAS;CAC9C,OACE,oBAAC,WAAD;EAAW,WAAW;EAAS,GAAI;EAChC;CACQ,CAAA;AAEf"}

package/dist/components/layout/sidebar/sidebar.css

@@ -0,0 +1,21 @@
+.puzzle-sidebar {
+  top: var(--puzzle-sticky-offset, 0px);
+  width: 16rem;
+  min-width: 0;
+  max-width: 100%;
+  height: 100svh;
+  max-height: calc(100vh - var(--puzzle-sticky-offset, 0px));
+  max-height: calc(100svh - var(--puzzle-sticky-offset, 0px));
+  overscroll-behavior: contain;
+  box-sizing: border-box;
+  align-self: flex-start;
+  gap: var(--puzzle-space-2, .5rem);
+  color: var(--puzzle-color-text);
+  background: var(--puzzle-color-surface);
+  padding: var(--puzzle-space-4, 1rem);
+  flex-direction: column;
+  flex: 0 16rem;
+  display: flex;
+  position: sticky;
+  overflow-y: auto;
+}

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

@@ -0,0 +1,30 @@
+;/* 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/stack/index.tsx
+const Stack = ({ as: Component = "div", direction = "col", alignH, alignV, wrap = "nowrap", gap = "md", divider, reverse = false, children, className, ...props }) => {
+	const directions = typeof direction === "string" ? { mobile: direction } : {
+		...direction,
+		mobile: direction.mobile ?? "col"
+	};
+	const directionClasses = _puzzle_ui_core.BREAKPOINTS.flatMap((breakpoint) => {
+		const value = directions[breakpoint];
+		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 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}`;
+		return [child, (0, react.isValidElement)(divider) ? (0, react.cloneElement)(divider, { key: dividerKey }) : (0, react.createElement)(react.Fragment, { key: dividerKey }, divider)];
+	}) : children;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
+		className: classes,
+		...props,
+		children: childrenWithDividers
+	});
+};
+exports.Stack = Stack;
+
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,31 @@
+import { ComponentPropsWithRef, ElementType, ReactNode } from "react";
+import { ResponsiveValue } from "@puzzle-ui/core";
+type StackDirection = "row" | "col";
+type ResponsiveDirection = ResponsiveValue<StackDirection>;
+type StackMainAlignment = "start" | "center" | "end" | "stretch" | "around" | "between" | "evenly";
+type StackCrossAlignment = "start" | "center" | "end" | "stretch";
+type StackRowProps = {
+  direction: "row";
+  alignH?: StackMainAlignment;
+  alignV?: StackCrossAlignment;
+};
+type StackColProps = {
+  direction?: "col";
+  alignH?: StackCrossAlignment;
+  alignV?: StackMainAlignment;
+};
+type StackResponsiveProps = {
+  direction: ResponsiveDirection;
+  alignH?: StackMainAlignment;
+  alignV?: StackMainAlignment;
+};
+type StackOwnProps<C extends ElementType> = {
+  as?: C;
+  wrap?: "wrap" | "nowrap" | "wrap-reverse";
+  gap?: "0" | "xs" | "sm" | "md" | "lg" | "xl";
+  divider?: ReactNode;
+  reverse?: boolean;
+} & (StackRowProps | StackColProps | StackResponsiveProps);
+type StackProps<C extends ElementType = "div"> = StackOwnProps<C> & Omit<ComponentPropsWithRef<C>, keyof StackOwnProps<C> | "as">;
+declare const Stack: ({ as: Component, direction, alignH, alignV, wrap, gap, divider, reverse, children, className, ...props }: StackProps<ElementType>) => import("react").JSX.Element;
+export { type ResponsiveDirection, Stack, type StackCrossAlignment, type StackMainAlignment, type StackProps };

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

@@ -0,0 +1,31 @@
+import { ResponsiveValue } from "@puzzle-ui/core";
+import { ComponentPropsWithRef, ElementType, ReactNode } from "react";
+type StackDirection = "row" | "col";
+type ResponsiveDirection = ResponsiveValue<StackDirection>;
+type StackMainAlignment = "start" | "center" | "end" | "stretch" | "around" | "between" | "evenly";
+type StackCrossAlignment = "start" | "center" | "end" | "stretch";
+type StackRowProps = {
+  direction: "row";
+  alignH?: StackMainAlignment;
+  alignV?: StackCrossAlignment;
+};
+type StackColProps = {
+  direction?: "col";
+  alignH?: StackCrossAlignment;
+  alignV?: StackMainAlignment;
+};
+type StackResponsiveProps = {
+  direction: ResponsiveDirection;
+  alignH?: StackMainAlignment;
+  alignV?: StackMainAlignment;
+};
+type StackOwnProps<C extends ElementType> = {
+  as?: C;
+  wrap?: "wrap" | "nowrap" | "wrap-reverse";
+  gap?: "0" | "xs" | "sm" | "md" | "lg" | "xl";
+  divider?: ReactNode;
+  reverse?: boolean;
+} & (StackRowProps | StackColProps | StackResponsiveProps);
+type StackProps<C extends ElementType = "div"> = StackOwnProps<C> & Omit<ComponentPropsWithRef<C>, keyof StackOwnProps<C> | "as">;
+declare const Stack: ({ as: Component, direction, alignH, alignV, wrap, gap, divider, reverse, children, className, ...props }: StackProps<ElementType>) => import("react").JSX.Element;
+export { type ResponsiveDirection, Stack, type StackCrossAlignment, type StackMainAlignment, type StackProps };

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

@@ -0,0 +1,30 @@
+import "./stack.css";
+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 directions = typeof direction === "string" ? { mobile: direction } : {
+		...direction,
+		mobile: direction.mobile ?? "col"
+	};
+	const directionClasses = BREAKPOINTS.flatMap((breakpoint) => {
+		const value = directions[breakpoint];
+		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 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}`;
+		return [child, isValidElement(divider) ? cloneElement(divider, { key: dividerKey }) : createElement(Fragment, { key: dividerKey }, divider)];
+	}) : children;
+	return /* @__PURE__ */ jsx(Component, {
+		className: classes,
+		...props,
+		children: childrenWithDividers
+	});
+};
+export { Stack };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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"}