@puzzle-ui/ui 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,38 @@
+const require_index = require("../../navigation/link/index.cjs");
+;/* empty css                  */
+let _puzzle_ui_core = require("@puzzle-ui/core");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/components/layout/breadcrumbs/index.tsx
+const Breadcrumbs = ({ items, className, style, "aria-label": ariaLabel = "Breadcrumbs", ...navProps }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
+		...navProps,
+		"aria-label": ariaLabel,
+		className: (0, _puzzle_ui_core.cn)("puzzle-breadcrumbs", className),
+		style,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ol", {
+			className: "puzzle-breadcrumbs__list",
+			children: items.map((item, index) => {
+				const isCurrent = index === items.length - 1;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+					className: (0, _puzzle_ui_core.cn)("puzzle-breadcrumbs__item", isCurrent && "puzzle-breadcrumbs__item--current"),
+					"aria-current": isCurrent ? "page" : void 0,
+					children: [item.leadingIcon != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "puzzle-breadcrumbs__icon",
+						"aria-hidden": "true",
+						children: item.leadingIcon
+					}), isCurrent || item.href === void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "puzzle-breadcrumbs__label",
+						children: item.label
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.Link, {
+						className: "puzzle-breadcrumbs__link",
+						href: item.href,
+						children: item.label
+					})]
+				}, index);
+			})
+		})
+	});
+};
+exports.Breadcrumbs = Breadcrumbs;
+
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["cn","Link"],"sources":["../../../../src/components/layout/breadcrumbs/index.tsx"],"sourcesContent":["import type { ComponentPropsWithRef, ReactNode } from \"react\";\nimport { cn } from \"@puzzle-ui/core\";\nimport { Link } from \"../../navigation/link\";\nimport \"./breadcrumbs.css\";\n\ntype BreadcrumbLinkItem = {\n  label: ReactNode;\n  href: string;\n  leadingIcon?: ReactNode;\n};\n\ntype BreadcrumbCurrentItem = {\n  label: ReactNode;\n  leadingIcon?: ReactNode;\n  href?: never;\n};\n\ntype BreadcrumbItem = BreadcrumbLinkItem | BreadcrumbCurrentItem;\n\ntype BreadcrumbsOwnProps = {\n  items: [...BreadcrumbLinkItem[], BreadcrumbCurrentItem];\n};\n\ntype BreadcrumbsProps = BreadcrumbsOwnProps &\n  Omit<ComponentPropsWithRef<\"nav\">, keyof BreadcrumbsOwnProps>;\n\nconst Breadcrumbs = ({\n  items,\n  className,\n  style,\n  \"aria-label\": ariaLabel = \"Breadcrumbs\",\n  ...navProps\n}: BreadcrumbsProps) => {\n  return (\n    <nav\n      {...navProps}\n      aria-label={ariaLabel}\n      className={cn(\"puzzle-breadcrumbs\", className)}\n      style={style}\n    >\n      <ol className=\"puzzle-breadcrumbs__list\">\n        {items.map((item, index) => {\n          const isCurrent = index === items.length - 1;\n\n          return (\n            <li\n              key={index}\n              className={cn(\n                \"puzzle-breadcrumbs__item\",\n                isCurrent && \"puzzle-breadcrumbs__item--current\",\n              )}\n              aria-current={isCurrent ? \"page\" : undefined}\n            >\n              {item.leadingIcon != null && (\n                <span className=\"puzzle-breadcrumbs__icon\" aria-hidden=\"true\">\n                  {item.leadingIcon}\n                </span>\n              )}\n\n              {isCurrent || item.href === undefined ? (\n                <span className=\"puzzle-breadcrumbs__label\">{item.label}</span>\n              ) : (\n                <Link className=\"puzzle-breadcrumbs__link\" href={item.href}>\n                  {item.label}\n                </Link>\n              )}\n            </li>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n};\n\nexport { Breadcrumbs, type BreadcrumbItem, type BreadcrumbsProps };\n"],"mappings":";;;;;AA0BA,MAAM,eAAe,EACnB,OACA,WACA,OACA,cAAc,YAAY,eAC1B,GAAG,eACmB;CACtB,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,GAAI;EACJ,cAAY;EACZ,YAAA,GAAWA,gBAAAA,GAAAA,CAAG,sBAAsB,SAAS;EACtC;EAEP,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;GAAI,WAAU;GACX,UAAA,MAAM,KAAK,MAAM,UAAU;IAC1B,MAAM,YAAY,UAAU,MAAM,SAAS;IAE3C,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,MAAD;KAEE,YAAA,GAAWA,gBAAAA,GAAAA,CACT,4BACA,aAAa,mCACf;KACA,gBAAc,YAAY,SAAS,KAAA;KANrC,UAAA,CAQG,KAAK,eAAe,QACnB,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;MAAM,WAAU;MAA2B,eAAY;MACpD,UAAA,KAAK;KACF,CAAA,GAGP,aAAa,KAAK,SAAS,KAAA,IAC1B,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;MAAM,WAAU;MAA6B,UAAA,KAAK;KAAY,CAAA,IAE9D,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,MAAD;MAAM,WAAU;MAA2B,MAAM,KAAK;MACnD,UAAA,KAAK;KACF,CAAA,CAEN;IApBG,GAAA,KAoBH;GAER,CAAC;EACC,CAAA;CACD,CAAA;AAET"}

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

@@ -0,0 +1,18 @@
+import { ComponentPropsWithRef, ReactNode } from "react";
+type BreadcrumbLinkItem = {
+  label: ReactNode;
+  href: string;
+  leadingIcon?: ReactNode;
+};
+type BreadcrumbCurrentItem = {
+  label: ReactNode;
+  leadingIcon?: ReactNode;
+  href?: never;
+};
+type BreadcrumbItem = BreadcrumbLinkItem | BreadcrumbCurrentItem;
+type BreadcrumbsOwnProps = {
+  items: [...BreadcrumbLinkItem[], BreadcrumbCurrentItem];
+};
+type BreadcrumbsProps = BreadcrumbsOwnProps & Omit<ComponentPropsWithRef<"nav">, keyof BreadcrumbsOwnProps>;
+declare const Breadcrumbs: ({ items, className, style, "aria-label": ariaLabel, ...navProps }: BreadcrumbsProps) => import("react").JSX.Element;
+export { type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps };

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

@@ -0,0 +1,18 @@
+import { ComponentPropsWithRef, ReactNode } from "react";
+type BreadcrumbLinkItem = {
+  label: ReactNode;
+  href: string;
+  leadingIcon?: ReactNode;
+};
+type BreadcrumbCurrentItem = {
+  label: ReactNode;
+  leadingIcon?: ReactNode;
+  href?: never;
+};
+type BreadcrumbItem = BreadcrumbLinkItem | BreadcrumbCurrentItem;
+type BreadcrumbsOwnProps = {
+  items: [...BreadcrumbLinkItem[], BreadcrumbCurrentItem];
+};
+type BreadcrumbsProps = BreadcrumbsOwnProps & Omit<ComponentPropsWithRef<"nav">, keyof BreadcrumbsOwnProps>;
+declare const Breadcrumbs: ({ items, className, style, "aria-label": ariaLabel, ...navProps }: BreadcrumbsProps) => import("react").JSX.Element;
+export { type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps };

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

@@ -0,0 +1,38 @@
+import { Link } from "../../navigation/link/index.js";
+import "./breadcrumbs.css";
+import { cn } from "@puzzle-ui/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/layout/breadcrumbs/index.tsx
+const Breadcrumbs = ({ items, className, style, "aria-label": ariaLabel = "Breadcrumbs", ...navProps }) => {
+	return /* @__PURE__ */ jsx("nav", {
+		...navProps,
+		"aria-label": ariaLabel,
+		className: cn("puzzle-breadcrumbs", className),
+		style,
+		children: /* @__PURE__ */ jsx("ol", {
+			className: "puzzle-breadcrumbs__list",
+			children: items.map((item, index) => {
+				const isCurrent = index === items.length - 1;
+				return /* @__PURE__ */ jsxs("li", {
+					className: cn("puzzle-breadcrumbs__item", isCurrent && "puzzle-breadcrumbs__item--current"),
+					"aria-current": isCurrent ? "page" : void 0,
+					children: [item.leadingIcon != null && /* @__PURE__ */ jsx("span", {
+						className: "puzzle-breadcrumbs__icon",
+						"aria-hidden": "true",
+						children: item.leadingIcon
+					}), isCurrent || item.href === void 0 ? /* @__PURE__ */ jsx("span", {
+						className: "puzzle-breadcrumbs__label",
+						children: item.label
+					}) : /* @__PURE__ */ jsx(Link, {
+						className: "puzzle-breadcrumbs__link",
+						href: item.href,
+						children: item.label
+					})]
+				}, index);
+			})
+		})
+	});
+};
+export { Breadcrumbs };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/layout/breadcrumbs/index.tsx"],"sourcesContent":["import type { ComponentPropsWithRef, ReactNode } from \"react\";\nimport { cn } from \"@puzzle-ui/core\";\nimport { Link } from \"../../navigation/link\";\nimport \"./breadcrumbs.css\";\n\ntype BreadcrumbLinkItem = {\n  label: ReactNode;\n  href: string;\n  leadingIcon?: ReactNode;\n};\n\ntype BreadcrumbCurrentItem = {\n  label: ReactNode;\n  leadingIcon?: ReactNode;\n  href?: never;\n};\n\ntype BreadcrumbItem = BreadcrumbLinkItem | BreadcrumbCurrentItem;\n\ntype BreadcrumbsOwnProps = {\n  items: [...BreadcrumbLinkItem[], BreadcrumbCurrentItem];\n};\n\ntype BreadcrumbsProps = BreadcrumbsOwnProps &\n  Omit<ComponentPropsWithRef<\"nav\">, keyof BreadcrumbsOwnProps>;\n\nconst Breadcrumbs = ({\n  items,\n  className,\n  style,\n  \"aria-label\": ariaLabel = \"Breadcrumbs\",\n  ...navProps\n}: BreadcrumbsProps) => {\n  return (\n    <nav\n      {...navProps}\n      aria-label={ariaLabel}\n      className={cn(\"puzzle-breadcrumbs\", className)}\n      style={style}\n    >\n      <ol className=\"puzzle-breadcrumbs__list\">\n        {items.map((item, index) => {\n          const isCurrent = index === items.length - 1;\n\n          return (\n            <li\n              key={index}\n              className={cn(\n                \"puzzle-breadcrumbs__item\",\n                isCurrent && \"puzzle-breadcrumbs__item--current\",\n              )}\n              aria-current={isCurrent ? \"page\" : undefined}\n            >\n              {item.leadingIcon != null && (\n                <span className=\"puzzle-breadcrumbs__icon\" aria-hidden=\"true\">\n                  {item.leadingIcon}\n                </span>\n              )}\n\n              {isCurrent || item.href === undefined ? (\n                <span className=\"puzzle-breadcrumbs__label\">{item.label}</span>\n              ) : (\n                <Link className=\"puzzle-breadcrumbs__link\" href={item.href}>\n                  {item.label}\n                </Link>\n              )}\n            </li>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n};\n\nexport { Breadcrumbs, type BreadcrumbItem, type BreadcrumbsProps };\n"],"mappings":";;;;;AA0BA,MAAM,eAAe,EACnB,OACA,WACA,OACA,cAAc,YAAY,eAC1B,GAAG,eACmB;CACtB,OACE,oBAAC,OAAD;EACE,GAAI;EACJ,cAAY;EACZ,WAAW,GAAG,sBAAsB,SAAS;EACtC;EAEP,UAAA,oBAAC,MAAD;GAAI,WAAU;GACX,UAAA,MAAM,KAAK,MAAM,UAAU;IAC1B,MAAM,YAAY,UAAU,MAAM,SAAS;IAE3C,OACE,qBAAC,MAAD;KAEE,WAAW,GACT,4BACA,aAAa,mCACf;KACA,gBAAc,YAAY,SAAS,KAAA;KANrC,UAAA,CAQG,KAAK,eAAe,QACnB,oBAAC,QAAD;MAAM,WAAU;MAA2B,eAAY;MACpD,UAAA,KAAK;KACF,CAAA,GAGP,aAAa,KAAK,SAAS,KAAA,IAC1B,oBAAC,QAAD;MAAM,WAAU;MAA6B,UAAA,KAAK;KAAY,CAAA,IAE9D,oBAAC,MAAD;MAAM,WAAU;MAA2B,MAAM,KAAK;MACnD,UAAA,KAAK;KACF,CAAA,CAEN;IApBG,GAAA,KAoBH;GAER,CAAC;EACC,CAAA;CACD,CAAA;AAET"}

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

@@ -0,0 +1,240 @@
+.puzzle-collapsable-sidebar {
+  --puzzle-sidebar-collapsed-width: 3.5rem;
+  --puzzle-sidebar-expanded-max-width: 20rem;
+  top: var(--puzzle-sticky-offset, 0px);
+  z-index: var(--puzzle-z-index-navigation, 250);
+  width: var(--puzzle-sidebar-collapsed-width);
+  min-width: 0;
+  height: auto;
+  min-height: calc(100svh - var(--puzzle-sticky-offset, 0px));
+  max-height: calc(100svh - var(--puzzle-sticky-offset, 0px));
+  box-sizing: border-box;
+  color: var(--puzzle-color-text);
+  background: var(--puzzle-color-surface);
+  border-right: 1px solid var(--puzzle-color-border);
+  transition: width var(--puzzle-duration-normal, .25s) var(--puzzle-easing-standard, ease),
+        box-shadow var(--puzzle-duration-normal, .25s) var(--puzzle-easing-standard, ease);
+  flex-direction: column;
+  flex: none;
+  align-self: flex-start;
+  display: flex;
+  position: sticky;
+}
+
+.puzzle-collapsable-sidebar:not(.collapsed) {
+  width: min(var(--puzzle-sidebar-expanded-max-width), 40vw);
+  max-width: min(var(--puzzle-sidebar-expanded-max-width), 40vw);
+}
+
+.puzzle-collapsable-sidebar__navigation {
+  overscroll-behavior: contain;
+  min-width: 0;
+  min-height: 0;
+  padding: var(--puzzle-space-2, .5rem);
+  flex: auto;
+  overflow: hidden auto;
+}
+
+.puzzle-collapsable-sidebar__sections {
+  gap: var(--puzzle-space-2, .5rem);
+  flex-direction: column;
+  width: 100%;
+  min-width: 100%;
+  display: flex;
+}
+
+.puzzle-collapsable-sidebar__group {
+  flex-direction: column;
+  width: 100%;
+  min-width: 0;
+  display: flex;
+}
+
+.puzzle-collapsable-sidebar__group + .puzzle-collapsable-sidebar__group {
+  padding-top: var(--puzzle-space-2, .5rem);
+  border-top: 1px solid var(--puzzle-color-border);
+}
+
+.puzzle-collapsable-sidebar__group-label {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: var(--puzzle-sidebar-expanded-max-width);
+  padding: var(--puzzle-space-1, .25rem) var(--puzzle-space-2, .5rem);
+  color: var(--puzzle-color-text-muted);
+  text-transform: uppercase;
+  overflow-wrap: anywhere;
+  opacity: 1;
+  transition: max-width var(--puzzle-duration-normal, .25s) var(--puzzle-easing-standard, ease),
+        opacity var(--puzzle-duration-fast, .15s) ease,
+        padding var(--puzzle-duration-normal, .25s) ease;
+  margin: 0;
+  font-weight: bold;
+  display: block;
+  overflow: hidden;
+}
+
+.puzzle-collapsable-sidebar.collapsed .puzzle-collapsable-sidebar__group-label {
+  opacity: 0;
+  white-space: nowrap;
+  max-width: 0;
+  padding-inline: 0;
+}
+
+.puzzle-collapsable-sidebar__group-items {
+  gap: var(--puzzle-space-1, .25rem);
+  flex-direction: column;
+  width: 100%;
+  min-width: 100%;
+  display: flex;
+}
+
+.puzzle-collapsable-sidebar__item {
+  box-sizing: border-box;
+  align-items: center;
+  gap: var(--puzzle-space-3, .75rem);
+  width: 100%;
+  min-width: 0;
+  min-height: 2.75rem;
+  padding: var(--puzzle-space-2, .5rem);
+  border-radius: var(--puzzle-radius-md, .5rem);
+  color: var(--puzzle-color-text-muted);
+  font: inherit;
+  font-size: var(--puzzle-font-size-sm, .875rem);
+  text-align: left;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: color var(--puzzle-duration-fast, .15s) ease,
+        background-color var(--puzzle-duration-fast, .15s) ease;
+  background: none;
+  border: 0;
+  text-decoration: none;
+  display: flex;
+}
+
+.puzzle-collapsable-sidebar__item:hover {
+  color: var(--puzzle-color-text);
+  background: var(--puzzle-color-surface-sunken, var(--puzzle-color-surface));
+}
+
+.puzzle-collapsable-sidebar__item.active, .puzzle-collapsable-sidebar__item[data-active="true"] {
+  color: var(--puzzle-color-primary, var(--puzzle-color-text));
+  background: var(--puzzle-color-surface-elevated);
+}
+
+.puzzle-collapsable-sidebar__icon {
+  flex: 0 0 1.5rem;
+  justify-content: center;
+  align-items: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  display: inline-flex;
+}
+
+.puzzle-collapsable-sidebar__icon > * {
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.puzzle-collapsable-sidebar__label {
+  opacity: 0;
+  white-space: nowrap;
+  overflow-wrap: anywhere;
+  min-width: 0;
+  max-width: 0;
+  transition: max-width var(--puzzle-duration-normal, .25s) var(--puzzle-easing-standard, ease),
+        opacity var(--puzzle-duration-fast, .15s) ease;
+  flex: auto;
+  display: inline-block;
+  overflow: hidden;
+}
+
+.puzzle-collapsable-sidebar:not(.collapsed) .puzzle-collapsable-sidebar__label {
+  max-width: var(--puzzle-sidebar-expanded-max-width);
+  opacity: 1;
+  white-space: normal;
+  transition-delay: 0s, 75ms;
+}
+
+.puzzle-collapsable-sidebar__toggle {
+  width: 55px;
+  height: 2.75rem;
+  padding: var(--puzzle-space-2, .5rem);
+  border-radius: var(--puzzle-radius-md, .5rem);
+  color: var(--puzzle-color-text-muted, var(--puzzle-color-text));
+  font: inherit;
+  cursor: pointer;
+  background: none;
+  border: 0;
+  flex: none;
+  justify-content: center;
+  align-self: flex-end;
+  align-items: center;
+  font-size: 1.5rem;
+  display: flex;
+}
+
+.puzzle-collapsable-sidebar__toggle:hover {
+  color: var(--puzzle-color-text);
+  background: var(--puzzle-color-surface-elevated);
+}
+
+.puzzle-collapsable-sidebar.expand-inline:not(.collapsed) {
+  flex-basis: auto;
+}
+
+.puzzle-collapsable-sidebar.expand-over {
+  overflow: visible;
+}
+
+.puzzle-collapsable-sidebar.expand-over:not(.collapsed) {
+  z-index: calc(var(--puzzle-z-index-navigation, 250) + 1);
+  box-shadow: var(--puzzle-shadow-lg, 4px 0 16px #0000001a);
+}
+
+.puzzle-collapsable-sidebar a:focus-visible, .puzzle-collapsable-sidebar button:focus-visible {
+  outline: 2px solid var(--puzzle-color-ring);
+  outline-offset: 2px;
+}
+
+.puzzle-collapsable-sidebar.expand-over {
+  width: var(--puzzle-sidebar-collapsed-width);
+  max-width: var(--puzzle-sidebar-collapsed-width);
+  overflow: visible;
+}
+
+.puzzle-collapsable-sidebar.expand-over .puzzle-collapsable-sidebar__navigation {
+  inset: calc(2.75rem + var(--puzzle-space-2, .5rem) * 2) auto 0 0;
+  box-sizing: border-box;
+  width: var(--puzzle-sidebar-collapsed-width);
+  max-width: var(--puzzle-sidebar-collapsed-width);
+  background: var(--puzzle-color-surface);
+  box-shadow: none;
+  transition: width var(--puzzle-duration-normal, .25s) var(--puzzle-easing-standard, ease),
+        max-width var(--puzzle-duration-normal, .25s) var(--puzzle-easing-standard, ease),
+        box-shadow var(--puzzle-duration-normal, .25s) ease;
+  position: absolute;
+}
+
+.puzzle-collapsable-sidebar.expand-over:not(.collapsed) .puzzle-collapsable-sidebar__navigation {
+  width: min(var(--puzzle-sidebar-expanded-max-width), 40vw);
+  max-width: min(var(--puzzle-sidebar-expanded-max-width), 40vw);
+  box-shadow: var(--puzzle-shadow-lg, 4px 0 16px #0000001a);
+}
+
+.puzzle-collapsable-sidebar.expand-over .puzzle-collapsable-sidebar__toggle {
+  z-index: 1;
+  position: relative;
+}
+
+@media (width <= 767px) {
+  .puzzle-collapsable-sidebar.expand-inline:not(.collapsed), .puzzle-collapsable-sidebar.expand-over:not(.collapsed) .puzzle-collapsable-sidebar__navigation {
+    width: min(var(--puzzle-sidebar-expanded-max-width), 100vw);
+    max-width: min(var(--puzzle-sidebar-expanded-max-width), 100vw);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .puzzle-collapsable-sidebar, .puzzle-collapsable-sidebar__navigation, .puzzle-collapsable-sidebar__item, .puzzle-collapsable-sidebar__label, .puzzle-collapsable-sidebar__group-label {
+    transition: none;
+  }
+}

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

@@ -0,0 +1,107 @@
+"use client";
+const require_index = require("../../navigation/link/index.cjs");
+;/* empty css                          */
+const require_text = require("../../typography/text.cjs");
+let _puzzle_ui_core = require("@puzzle-ui/core");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/components/layout/collapsable-sidebar/index.tsx
+const isSidebarGroup = (entry) => "items" in entry;
+const SidebarItemRenderer = ({ item, collapsed }) => {
+	const className = (0, _puzzle_ui_core.cn)("puzzle-collapsable-sidebar__item", item.active && "active");
+	const content = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: "puzzle-collapsable-sidebar__icon",
+		"aria-hidden": "true",
+		children: item.icon
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: "puzzle-collapsable-sidebar__label",
+		children: item.label
+	})] });
+	if ("href" in item && item.href !== void 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("section", {
+		className: "puzzle-collapsable-sidebar__group",
+		"aria-labelledby": group.label ? headingId : void 0,
+		children: [group.label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text.Text, {
+			id: headingId,
+			type: "overline",
+			as: "h2",
+			className: "puzzle-collapsable-sidebar__group-label",
+			children: group.label
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "puzzle-collapsable-sidebar__group-items",
+			children: group.items.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarItemRenderer, {
+				item,
+				collapsed
+			}, item.id))
+		})]
+	});
+};
+const CollapsableSidebar = ({ items, expand = "inline", collapsed: controlledCollapsed, defaultCollapsed = true, onCollapsedChange, ariaLabel = "Main navigation", className, style }) => {
+	const [internalCollapsed, setInternalCollapsed] = (0, react.useState)(defaultCollapsed);
+	const idPrefix = `puzzle-sidebar-${(0, react.useId)()}`;
+	const isControlled = controlledCollapsed !== void 0;
+	const collapsed = isControlled ? controlledCollapsed : internalCollapsed;
+	const toggleCollapsed = () => {
+		const nextCollapsed = !collapsed;
+		if (!isControlled) setInternalCollapsed(nextCollapsed);
+		onCollapsedChange?.(nextCollapsed);
+	};
+	const classes = (0, _puzzle_ui_core.cn)("puzzle-collapsable-sidebar", `expand-${expand}`, collapsed && "collapsed", className);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("aside", {
+		className: classes,
+		"data-collapsed": collapsed,
+		"data-expand": expand,
+		style,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("span", {
+				"aria-hidden": "true",
+				children: collapsed ? "›" : "‹"
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
+			id: `${idPrefix}-navigation`,
+			className: "puzzle-collapsable-sidebar__navigation",
+			"aria-label": ariaLabel,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "puzzle-collapsable-sidebar__sections",
+				children: items.map((entry) => isSidebarGroup(entry) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarGroupRenderer, {
+					group: entry,
+					collapsed,
+					idPrefix
+				}, entry.id) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "puzzle-collapsable-sidebar__group-items",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarItemRenderer, {
+						item: entry,
+						collapsed
+					})
+				}, entry.id))
+			})
+		})]
+	});
+};
+exports.CollapsableSidebar = CollapsableSidebar;
+
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["cn","Link","Text","useState","useId"],"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,aAAA,GAAYA,gBAAAA,GAAAA,CAChB,oCACA,KAAK,UAAU,QACjB;CAEA,MAAM,UACJ,iBAAA,GAAA,kBAAA,KAAA,CAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;EAAM,WAAU;EAAmC,eAAY;EAC5D,UAAA,KAAK;CACF,CAAA,GAEN,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;EAAM,WAAU;EAAqC,UAAA,KAAK;CAAY,CAAA,CACtE,EAAA,CAAA;CAGJ,IAAI,UAAU,QAAQ,KAAK,SAAS,KAAA,GAClC,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,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,iBAAA,GAAA,kBAAA,IAAA,CAAC,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,iBAAA,GAAA,kBAAA,KAAA,CAAC,WAAD;EACE,WAAU;EACV,mBAAiB,MAAM,QAAQ,YAAY,KAAA;EAF7C,UAAA,CAIG,MAAM,SACL,iBAAA,GAAA,kBAAA,IAAA,CAACC,aAAAA,MAAD;GACE,IAAI;GACJ,MAAK;GACL,IAAG;GACH,WAAU;GAET,UAAA,MAAM;EACH,CAAA,GAGR,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAAK,WAAU;GACZ,UAAA,MAAM,MAAM,KAAK,SAChB,iBAAA,GAAA,kBAAA,IAAA,CAAC,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,yBAAA,GAAwBC,MAAAA,SAAAA,CAAS,gBAAgB;CAE3E,MAAM,WAAW,mBAAA,GAAkBC,MAAAA,MAAAA,CAAM;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,WAAA,GAAUJ,gBAAAA,GAAAA,CACd,8BACA,UAAU,UACV,aAAa,aACb,SACF;CAEA,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,SAAD;EACE,WAAW;EACX,kBAAgB;EAChB,eAAa;EACN;EAJT,UAAA,CAME,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;GACE,MAAK;GACL,WAAU;GACV,SAAS;GACT,cAAY,YAAY,mBAAmB;GAC3C,iBAAe,CAAC;GAChB,iBAAe,GAAG,SAAS;GAE3B,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IAAM,eAAY;IAAQ,UAAA,YAAY,MAAM;GAAU,CAAA;EAChD,CAAA,GAER,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GACE,IAAI,GAAG,SAAS;GAChB,WAAU;GACV,cAAY;GAEZ,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IAAK,WAAU;IACZ,UAAA,MAAM,KAAK,UACV,eAAe,KAAK,IAClB,iBAAA,GAAA,kBAAA,IAAA,CAAC,sBAAD;KAEE,OAAO;KACI;KACD;IACX,GAJM,MAAM,EAIZ,IAED,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;KAEE,WAAU;KAEV,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,qBAAD;MAAqB,MAAM;MAAkB;KAAY,CAAA;IACtD,GAJE,MAAM,EAIR,CAET;GACG,CAAA;EACF,CAAA,CACA;;AAEX"}

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

@@ -0,0 +1,35 @@
+import { CSSProperties, MouseEventHandler, ReactNode } from "react";
+type SidebarItemBase = {
+  id: string;
+  icon: ReactNode;
+  label: string;
+  active?: boolean;
+};
+type WithLink = {
+  href: string;
+  onClick?: never;
+};
+type WithClickHandler = {
+  onClick: MouseEventHandler<HTMLButtonElement>;
+  href?: never;
+};
+type CollapsableSidebarItem = SidebarItemBase & (WithLink | WithClickHandler);
+type CollapsableSidebarGroup = {
+  id: string;
+  label?: string;
+  items: CollapsableSidebarItem[];
+};
+type CollapsableSidebarEntry = CollapsableSidebarItem | CollapsableSidebarGroup;
+type CollapsableSidebarExpansion = "inline" | "over";
+type CollapsableSidebarProps = {
+  items: CollapsableSidebarEntry[];
+  expand?: CollapsableSidebarExpansion;
+  collapsed?: boolean;
+  defaultCollapsed?: boolean;
+  onCollapsedChange?: (collapsed: boolean) => void;
+  ariaLabel?: string;
+  className?: string;
+  style?: CSSProperties;
+};
+declare const CollapsableSidebar: ({ items, expand, collapsed: controlledCollapsed, defaultCollapsed, onCollapsedChange, ariaLabel, className, style }: CollapsableSidebarProps) => import("react").JSX.Element;
+export { CollapsableSidebar, type CollapsableSidebarEntry, type CollapsableSidebarExpansion, type CollapsableSidebarGroup, type CollapsableSidebarItem, type CollapsableSidebarProps, type SidebarItemBase, type WithClickHandler, type WithLink };

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

@@ -0,0 +1,35 @@
+import { CSSProperties, MouseEventHandler, ReactNode } from "react";
+type SidebarItemBase = {
+  id: string;
+  icon: ReactNode;
+  label: string;
+  active?: boolean;
+};
+type WithLink = {
+  href: string;
+  onClick?: never;
+};
+type WithClickHandler = {
+  onClick: MouseEventHandler<HTMLButtonElement>;
+  href?: never;
+};
+type CollapsableSidebarItem = SidebarItemBase & (WithLink | WithClickHandler);
+type CollapsableSidebarGroup = {
+  id: string;
+  label?: string;
+  items: CollapsableSidebarItem[];
+};
+type CollapsableSidebarEntry = CollapsableSidebarItem | CollapsableSidebarGroup;
+type CollapsableSidebarExpansion = "inline" | "over";
+type CollapsableSidebarProps = {
+  items: CollapsableSidebarEntry[];
+  expand?: CollapsableSidebarExpansion;
+  collapsed?: boolean;
+  defaultCollapsed?: boolean;
+  onCollapsedChange?: (collapsed: boolean) => void;
+  ariaLabel?: string;
+  className?: string;
+  style?: CSSProperties;
+};
+declare const CollapsableSidebar: ({ items, expand, collapsed: controlledCollapsed, defaultCollapsed, onCollapsedChange, ariaLabel, className, style }: CollapsableSidebarProps) => import("react").JSX.Element;
+export { CollapsableSidebar, type CollapsableSidebarEntry, type CollapsableSidebarExpansion, type CollapsableSidebarGroup, type CollapsableSidebarItem, type CollapsableSidebarProps, type SidebarItemBase, type WithClickHandler, type WithLink };