@askrjs/themes 0.0.2 → 0.0.4

package/dist/components/shell/shell-panel.js

@@ -0,0 +1,54 @@
+import { classes } from "../_internal/classes.js";
+import { mergeProps } from "../_internal/merge-props.js";
+import { jsx, jsxs } from "@askrjs/askr/jsx-runtime";
+//#region src/components/shell/shell-panel.tsx
+function renderShellPanel(props) {
+	const { active, brand, children, className, collapseLabel, dataOrientation, onClose, open, panelId, prefix, ref, rest } = props;
+	if (active && !open) return null;
+	const panelClass = `${prefix}-panel`;
+	const headerClass = `${prefix}-panel-header`;
+	const closeClass = `${prefix}-panel-close`;
+	const headerSlot = `${prefix}-panel-header`;
+	const closeSlot = `${prefix}-panel-close`;
+	const finalProps = mergeProps(rest, {
+		ref,
+		class: classes(panelClass, className),
+		"aria-label": active ? collapseLabel : rest["aria-label"],
+		"aria-modal": active ? "true" : rest["aria-modal"],
+		"data-slot": panelClass,
+		"data-state": active ? open ? "open" : "closed" : "open",
+		id: panelId,
+		role: rest.role,
+		tabIndex: active ? -1 : rest.tabIndex,
+		...dataOrientation !== void 0 ? { "data-orientation": dataOrientation } : {}
+	});
+	if (active) {
+		finalProps.role = "dialog";
+		finalProps["aria-modal"] = "true";
+		finalProps["aria-label"] = collapseLabel;
+		finalProps.tabIndex = -1;
+		finalProps.id = panelId;
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		...finalProps,
+		children: [active ? /* @__PURE__ */ jsxs("div", {
+			class: headerClass,
+			"data-slot": headerSlot,
+			children: [brand, /* @__PURE__ */ jsx("button", {
+				"aria-label": `Close ${collapseLabel}`,
+				class: closeClass,
+				"data-slot": closeSlot,
+				type: "button",
+				onClick: () => onClose(),
+				children: /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					children: "x"
+				})
+			})]
+		}) : null, children]
+	});
+}
+//#endregion
+export { renderShellPanel };
+
+//# sourceMappingURL=shell-panel.js.map

package/dist/components/shell/shell-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shell-panel.js","names":[],"sources":["../../../src/components/shell/shell-panel.tsx"],"sourcesContent":["import { classes } from \"../_internal/classes\";\nimport { mergeProps } from \"../_internal/merge-props\";\n\nexport type ShellPanelRenderProps = {\n  active: boolean;\n  brand?: unknown;\n  children?: unknown;\n  className?: unknown;\n  collapseLabel: string;\n  dataOrientation?: string;\n  onClose: () => void;\n  open: boolean;\n  panelId?: string;\n  prefix: \"navbar\" | \"sidebar\";\n  ref?: unknown;\n  rest: Record<string, unknown>;\n};\n\nexport function renderShellPanel(props: ShellPanelRenderProps): JSX.Element | null {\n  const {\n    active,\n    brand,\n    children,\n    className,\n    collapseLabel,\n    dataOrientation,\n    onClose,\n    open,\n    panelId,\n    prefix,\n    ref,\n    rest,\n  } = props;\n\n  if (active && !open) {\n    return null;\n  }\n\n  const panelClass = `${prefix}-panel`;\n  const headerClass = `${prefix}-panel-header`;\n  const closeClass = `${prefix}-panel-close`;\n  const headerSlot = `${prefix}-panel-header`;\n  const closeSlot = `${prefix}-panel-close`;\n\n  const finalProps = mergeProps(rest, {\n    ref,\n    class: classes(panelClass, className),\n    \"aria-label\": active ? collapseLabel : rest[\"aria-label\"],\n    \"aria-modal\": active ? \"true\" : rest[\"aria-modal\"],\n    \"data-slot\": panelClass,\n    \"data-state\": active ? (open ? \"open\" : \"closed\") : \"open\",\n    id: panelId,\n    role: rest.role,\n    tabIndex: active ? -1 : rest.tabIndex,\n    ...(dataOrientation !== undefined ? { \"data-orientation\": dataOrientation } : {}),\n  }) as Record<string, unknown>;\n\n  if (active) {\n    finalProps.role = \"dialog\";\n    finalProps[\"aria-modal\"] = \"true\";\n    finalProps[\"aria-label\"] = collapseLabel;\n    finalProps.tabIndex = -1;\n    finalProps.id = panelId;\n  }\n\n  return (\n    <div {...finalProps}>\n      {active ? (\n        <div class={headerClass} data-slot={headerSlot}>\n          {brand}\n          <button\n            aria-label={`Close ${collapseLabel}`}\n            class={closeClass}\n            data-slot={closeSlot}\n            type=\"button\"\n            onClick={() => onClose()}\n          >\n            <span aria-hidden=\"true\">x</span>\n          </button>\n        </div>\n      ) : null}\n      {children}\n    </div>\n  );\n}\n"],"mappings":";;;;AAkBA,SAAgB,iBAAiB,OAAkD;CACjF,MAAM,EACJ,QACA,OACA,UACA,WACA,eACA,iBACA,SACA,MACA,SACA,QACA,KACA,SACE;CAEJ,IAAI,UAAU,CAAC,MACb,OAAO;CAGT,MAAM,aAAa,GAAG,OAAO;CAC7B,MAAM,cAAc,GAAG,OAAO;CAC9B,MAAM,aAAa,GAAG,OAAO;CAC7B,MAAM,aAAa,GAAG,OAAO;CAC7B,MAAM,YAAY,GAAG,OAAO;CAE5B,MAAM,aAAa,WAAW,MAAM;EAClC;EACA,OAAO,QAAQ,YAAY,UAAU;EACrC,cAAc,SAAS,gBAAgB,KAAK;EAC5C,cAAc,SAAS,SAAS,KAAK;EACrC,aAAa;EACb,cAAc,SAAU,OAAO,SAAS,WAAY;EACpD,IAAI;EACJ,MAAM,KAAK;EACX,UAAU,SAAS,KAAK,KAAK;EAC7B,GAAI,oBAAoB,KAAA,IAAY,EAAE,oBAAoB,iBAAiB,GAAG,EAAE;EACjF,CAAC;CAEF,IAAI,QAAQ;EACV,WAAW,OAAO;EAClB,WAAW,gBAAgB;EAC3B,WAAW,gBAAgB;EAC3B,WAAW,WAAW;EACtB,WAAW,KAAK;;CAGlB,OACE,qBAAC,OAAD;EAAK,GAAI;YAAT,CACG,SACC,qBAAC,OAAD;GAAK,OAAO;GAAa,aAAW;aAApC,CACG,OACD,oBAAC,UAAD;IACE,cAAY,SAAS;IACrB,OAAO;IACP,aAAW;IACX,MAAK;IACL,eAAe,SAAS;cAExB,oBAAC,QAAD;KAAM,eAAY;eAAO;KAAQ,CAAA;IAC1B,CAAA,CACL;OACJ,MACH,SACG"}

package/dist/components/shell/shell-responsive.js

@@ -0,0 +1,110 @@
+import { isJsxElement, toChildArray } from "../_internal/jsx.js";
+import { jsx } from "@askrjs/askr/jsx-runtime";
+import { For } from "@askrjs/askr/control";
+import { resource } from "@askrjs/askr/resources";
+//#region src/components/shell/shell-responsive.tsx
+let shellScrollLockCount = 0;
+let shellScrollLockPreviousValue = null;
+function acquireShellScrollLock() {
+	if (typeof document === "undefined") return;
+	const body = document.body;
+	if (shellScrollLockCount === 0) shellScrollLockPreviousValue = body.getAttribute("data-shell-scroll-lock");
+	shellScrollLockCount += 1;
+	body.setAttribute("data-shell-scroll-lock", "true");
+}
+function releaseShellScrollLock() {
+	if (typeof document === "undefined" || shellScrollLockCount === 0) return;
+	shellScrollLockCount -= 1;
+	if (shellScrollLockCount > 0) return;
+	const body = document.body;
+	if (shellScrollLockPreviousValue === null) body.removeAttribute("data-shell-scroll-lock");
+	else body.setAttribute("data-shell-scroll-lock", shellScrollLockPreviousValue);
+	shellScrollLockPreviousValue = null;
+}
+function isShellPanelChild(child, panelComponent) {
+	return isJsxElement(child) && child.type === panelComponent;
+}
+function renderKeyedShellChildren(children, keyPrefix) {
+	const keyedChildren = toChildArray(children).map((child, index) => {
+		if (!isJsxElement(child) || child.key != null) return child;
+		return {
+			...child,
+			key: `${keyPrefix}-${index}`
+		};
+	});
+	return /* @__PURE__ */ jsx(For, {
+		each: () => keyedChildren,
+		by: (child, index) => isJsxElement(child) && child.key != null ? String(child.key) : `${keyPrefix}-${index}`,
+		children: (child) => child
+	});
+}
+function renderKeyedShellPanelChildren(children, keyPrefix, panelProps) {
+	const keyedChildren = toChildArray(children).map((child, index) => {
+		if (!isJsxElement(child)) return child;
+		return {
+			...child,
+			key: child.key != null ? child.key : `${keyPrefix}-${index}`,
+			props: {
+				...child.props,
+				active: panelProps.active,
+				collapseLabel: panelProps.collapseLabel,
+				onClose: panelProps.onClose,
+				open: panelProps.open,
+				panelId: panelProps.panelId
+			}
+		};
+	});
+	return /* @__PURE__ */ jsx(For, {
+		each: () => keyedChildren,
+		by: (child, index) => isJsxElement(child) && child.key != null ? String(child.key) : `${keyPrefix}-${index}`,
+		children: (child) => child
+	});
+}
+function ShellResponsiveWatcher(props) {
+	const { breakpoint, isCollapsed, onExpand, onResize } = props;
+	resource(({ signal }) => {
+		const updateCollapsedState = () => {
+			const nextCollapsed = isCollapsed(breakpoint);
+			onResize(nextCollapsed);
+			if (!nextCollapsed) onExpand();
+		};
+		updateCollapsedState();
+		if (typeof window === "undefined") return null;
+		window.addEventListener("resize", updateCollapsedState);
+		signal.addEventListener("abort", () => {
+			window.removeEventListener("resize", updateCollapsedState);
+		}, { once: true });
+		return null;
+	}, [breakpoint]);
+	return null;
+}
+function ShellPanelWatcher(props) {
+	const { contentId, onClose, open, panelSlot } = props;
+	resource(({ signal }) => {
+		if (!open || typeof window === "undefined") {
+			releaseShellScrollLock();
+			return null;
+		}
+		const onKeyDown = (event) => {
+			if (event.key !== "Escape") return;
+			event.preventDefault();
+			onClose();
+		};
+		window.addEventListener("keydown", onKeyDown);
+		const focusFrame = typeof window.requestAnimationFrame === "function" ? window.requestAnimationFrame(() => {
+			((typeof contentId === "string" ? document.getElementById(contentId) : null) ?? document.querySelector(`[data-slot="${panelSlot}"][data-state="open"]`))?.focus({ preventScroll: true });
+		}) : void 0;
+		acquireShellScrollLock();
+		signal.addEventListener("abort", () => {
+			window.removeEventListener("keydown", onKeyDown);
+			if (focusFrame !== void 0 && typeof window.cancelAnimationFrame === "function") window.cancelAnimationFrame(focusFrame);
+			releaseShellScrollLock();
+		}, { once: true });
+		return null;
+	}, [open]);
+	return null;
+}
+//#endregion
+export { ShellPanelWatcher, ShellResponsiveWatcher, isShellPanelChild, renderKeyedShellChildren, renderKeyedShellPanelChildren };
+
+//# sourceMappingURL=shell-responsive.js.map

package/dist/components/shell/shell-responsive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shell-responsive.js","names":[],"sources":["../../../src/components/shell/shell-responsive.tsx"],"sourcesContent":["import { For } from \"@askrjs/askr/control\";\nimport { resource } from \"@askrjs/askr/resources\";\nimport type { JSXElement } from \"@askrjs/askr/foundations\";\nimport { isJsxElement, toChildArray } from \"../_internal/jsx\";\n\nexport type ShellResponsivePanelProps = {\n  active: boolean;\n  collapseLabel: string;\n  onClose: () => void;\n  open: boolean;\n  panelId?: string;\n};\n\nlet shellScrollLockCount = 0;\nlet shellScrollLockPreviousValue: string | null = null;\n\nfunction acquireShellScrollLock(): void {\n  if (typeof document === \"undefined\") return;\n\n  const body = document.body;\n  if (shellScrollLockCount === 0) {\n    shellScrollLockPreviousValue = body.getAttribute(\"data-shell-scroll-lock\");\n  }\n\n  shellScrollLockCount += 1;\n  body.setAttribute(\"data-shell-scroll-lock\", \"true\");\n}\n\nfunction releaseShellScrollLock(): void {\n  if (typeof document === \"undefined\" || shellScrollLockCount === 0) return;\n\n  shellScrollLockCount -= 1;\n  if (shellScrollLockCount > 0) return;\n\n  const body = document.body;\n  if (shellScrollLockPreviousValue === null) {\n    body.removeAttribute(\"data-shell-scroll-lock\");\n  } else {\n    body.setAttribute(\"data-shell-scroll-lock\", shellScrollLockPreviousValue);\n  }\n\n  shellScrollLockPreviousValue = null;\n}\n\nexport function isShellPanelChild(child: unknown, panelComponent: unknown): child is JSXElement {\n  return isJsxElement(child) && child.type === panelComponent;\n}\n\nexport function renderKeyedShellChildren(children: unknown, keyPrefix: string): JSX.Element {\n  const keyedChildren = toChildArray(children).map((child, index) => {\n    if (!isJsxElement(child) || child.key != null) {\n      return child;\n    }\n\n    return {\n      ...child,\n      key: `${keyPrefix}-${index}`,\n    };\n  });\n\n  return (\n    <For\n      each={() => keyedChildren}\n      by={(child, index) =>\n        isJsxElement(child) && child.key != null ? String(child.key) : `${keyPrefix}-${index}`\n      }\n    >\n      {(child) => child as never}\n    </For>\n  );\n}\n\nexport function renderKeyedShellPanelChildren(\n  children: unknown,\n  keyPrefix: string,\n  panelProps: ShellResponsivePanelProps,\n): JSX.Element {\n  const keyedChildren = toChildArray(children).map((child, index) => {\n    if (!isJsxElement(child)) {\n      return child;\n    }\n\n    return {\n      ...child,\n      key: child.key != null ? child.key : `${keyPrefix}-${index}`,\n      props: {\n        ...child.props,\n        active: panelProps.active,\n        collapseLabel: panelProps.collapseLabel,\n        onClose: panelProps.onClose,\n        open: panelProps.open,\n        panelId: panelProps.panelId,\n      },\n    };\n  });\n\n  return (\n    <For\n      each={() => keyedChildren}\n      by={(child, index) =>\n        isJsxElement(child) && child.key != null ? String(child.key) : `${keyPrefix}-${index}`\n      }\n    >\n      {(child) => child as never}\n    </For>\n  );\n}\n\nexport function ShellResponsiveWatcher<TBreakpoint extends string>(props: {\n  breakpoint: TBreakpoint;\n  isCollapsed: (breakpoint: TBreakpoint) => boolean;\n  onExpand: () => void;\n  onResize: (nextCollapsed: boolean) => void;\n}): JSX.Element | null {\n  const { breakpoint, isCollapsed, onExpand, onResize } = props;\n\n  resource(\n    ({ signal }: { signal: AbortSignal }) => {\n      const updateCollapsedState = () => {\n        const nextCollapsed = isCollapsed(breakpoint);\n        onResize(nextCollapsed);\n\n        if (!nextCollapsed) {\n          onExpand();\n        }\n      };\n\n      updateCollapsedState();\n\n      if (typeof window === \"undefined\") {\n        return null;\n      }\n\n      window.addEventListener(\"resize\", updateCollapsedState);\n      signal.addEventListener(\n        \"abort\",\n        () => {\n          window.removeEventListener(\"resize\", updateCollapsedState);\n        },\n        { once: true },\n      );\n\n      return null;\n    },\n    [breakpoint],\n  );\n\n  return null;\n}\n\nexport function ShellPanelWatcher(props: {\n  contentId?: string;\n  onClose: () => void;\n  open: boolean;\n  panelSlot: string;\n}): JSX.Element | null {\n  const { contentId, onClose, open, panelSlot } = props;\n\n  resource(\n    ({ signal }: { signal: AbortSignal }) => {\n      if (!open || typeof window === \"undefined\") {\n        releaseShellScrollLock();\n        return null;\n      }\n\n      const onKeyDown = (event: KeyboardEvent) => {\n        if (event.key !== \"Escape\") {\n          return;\n        }\n\n        event.preventDefault();\n        onClose();\n      };\n\n      window.addEventListener(\"keydown\", onKeyDown);\n\n      const focusFrame =\n        typeof window.requestAnimationFrame === \"function\"\n          ? window.requestAnimationFrame(() => {\n              const content =\n                (typeof contentId === \"string\" ? document.getElementById(contentId) : null) ??\n                document.querySelector<HTMLElement>(\n                  `[data-slot=\"${panelSlot}\"][data-state=\"open\"]`,\n                );\n\n              content?.focus({ preventScroll: true });\n            })\n          : undefined;\n\n      acquireShellScrollLock();\n\n      signal.addEventListener(\n        \"abort\",\n        () => {\n          window.removeEventListener(\"keydown\", onKeyDown);\n\n          if (focusFrame !== undefined && typeof window.cancelAnimationFrame === \"function\") {\n            window.cancelAnimationFrame(focusFrame);\n          }\n\n          releaseShellScrollLock();\n        },\n        { once: true },\n      );\n\n      return null;\n    },\n    [open],\n  );\n\n  return null;\n}\n"],"mappings":"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"}

package/dist/components/shell/shell.a11y.d.ts

@@ -0,0 +1,23 @@
+//#region src/components/shell/shell.a11y.d.ts
+declare const SHELL_A11Y_CONTRACT: {
+  readonly DATA_ATTRIBUTES: {
+    readonly slot: "data-slot";
+    readonly layout: "data-ak-layout";
+    readonly variant: "data-variant";
+    readonly gap: "data-gap";
+  };
+  readonly SLOT_VALUES: {
+    readonly root: "shell";
+    readonly nav: "shell-nav";
+    readonly main: "shell-main";
+  };
+  readonly VARIANT_VALUES: {
+    readonly sidebar: "sidebar";
+    readonly topbar: "topbar";
+    readonly rail: "rail";
+  };
+};
+type ShellA11yContract = typeof SHELL_A11Y_CONTRACT;
+//#endregion
+export { SHELL_A11Y_CONTRACT, ShellA11yContract };
+//# sourceMappingURL=shell.a11y.d.ts.map

package/dist/components/shell/shell.a11y.js

@@ -0,0 +1,23 @@
+//#region src/components/shell/shell.a11y.ts
+const SHELL_A11Y_CONTRACT = {
+	DATA_ATTRIBUTES: {
+		slot: "data-slot",
+		layout: "data-ak-layout",
+		variant: "data-variant",
+		gap: "data-gap"
+	},
+	SLOT_VALUES: {
+		root: "shell",
+		nav: "shell-nav",
+		main: "shell-main"
+	},
+	VARIANT_VALUES: {
+		sidebar: "sidebar",
+		topbar: "topbar",
+		rail: "rail"
+	}
+};
+//#endregion
+export { SHELL_A11Y_CONTRACT };
+
+//# sourceMappingURL=shell.a11y.js.map

package/dist/components/shell/shell.a11y.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shell.a11y.js","names":[],"sources":["../../../src/components/shell/shell.a11y.ts"],"sourcesContent":["export const SHELL_A11Y_CONTRACT = {\n  DATA_ATTRIBUTES: {\n    slot: \"data-slot\" as const,\n    layout: \"data-ak-layout\" as const,\n    variant: \"data-variant\" as const,\n    gap: \"data-gap\" as const,\n  },\n  SLOT_VALUES: {\n    root: \"shell\" as const,\n    nav: \"shell-nav\" as const,\n    main: \"shell-main\" as const,\n  },\n  VARIANT_VALUES: {\n    sidebar: \"sidebar\" as const,\n    topbar: \"topbar\" as const,\n    rail: \"rail\" as const,\n  },\n} as const;\n\nexport type ShellA11yContract = typeof SHELL_A11Y_CONTRACT;\n"],"mappings":";AAAA,MAAa,sBAAsB;CACjC,iBAAiB;EACf,MAAM;EACN,QAAQ;EACR,SAAS;EACT,KAAK;EACN;CACD,aAAa;EACX,MAAM;EACN,KAAK;EACL,MAAM;EACP;CACD,gBAAgB;EACd,SAAS;EACT,QAAQ;EACR,MAAM;EACP;CACF"}

package/dist/components/shell/shell.d.ts

@@ -0,0 +1,13 @@
+import { ShellAsChildProps, ShellDivProps, ShellMainAsChildProps, ShellMainDivProps, ShellMainMainProps, ShellNavAsChildProps, ShellNavDivProps } from "./shell.types.js";
+
+//#region src/components/shell/shell.d.ts
+declare function Shell(props: ShellDivProps): JSX.Element;
+declare function Shell(props: ShellAsChildProps): JSX.Element;
+declare function ShellNav(props: ShellNavDivProps): JSX.Element;
+declare function ShellNav(props: ShellNavAsChildProps): JSX.Element;
+declare function ShellMain(props: ShellMainMainProps): JSX.Element;
+declare function ShellMain(props: ShellMainDivProps): JSX.Element;
+declare function ShellMain(props: ShellMainAsChildProps): JSX.Element;
+//#endregion
+export { Shell, ShellMain, ShellNav };
+//# sourceMappingURL=shell.d.ts.map

package/dist/components/shell/shell.js

@@ -0,0 +1,69 @@
+import { classes } from "../_internal/classes.js";
+import { mergeProps } from "../_internal/merge-props.js";
+import { jsx } from "@askrjs/askr/jsx-runtime";
+import { Slot } from "@askrjs/askr/foundations";
+//#region src/components/shell/shell.tsx
+function Shell(props) {
+	const { asChild, children, class: className, variant = "sidebar", ref, ...rest } = props;
+	const finalProps = mergeProps(rest, {
+		ref,
+		class: classes("shell", className),
+		"data-slot": "shell",
+		"data-ak-layout": "true",
+		"data-variant": variant
+	});
+	if (asChild) return /* @__PURE__ */ jsx(Slot, {
+		asChild: true,
+		...finalProps,
+		children
+	});
+	return /* @__PURE__ */ jsx("div", {
+		...finalProps,
+		children
+	});
+}
+function ShellNav(props) {
+	const { asChild, children, class: className, ref, ...rest } = props;
+	const finalProps = mergeProps(rest, {
+		ref,
+		class: classes("shell-nav", className),
+		"data-slot": "shell-nav",
+		"data-ak-layout": "true"
+	});
+	if (asChild) return /* @__PURE__ */ jsx(Slot, {
+		asChild: true,
+		...finalProps,
+		children
+	});
+	return /* @__PURE__ */ jsx("div", {
+		...finalProps,
+		children
+	});
+}
+function ShellMain(props) {
+	const as = "as" in props ? props.as : "main";
+	const { asChild, children, class: className, ref, ...rest } = props;
+	const finalProps = mergeProps(rest, {
+		ref,
+		class: classes("shell-main", className),
+		"data-slot": "shell-main",
+		"data-ak-layout": "true"
+	});
+	if (asChild) return /* @__PURE__ */ jsx(Slot, {
+		asChild: true,
+		...finalProps,
+		children
+	});
+	if (as === "div") return /* @__PURE__ */ jsx("div", {
+		...finalProps,
+		children
+	});
+	return /* @__PURE__ */ jsx("main", {
+		...finalProps,
+		children
+	});
+}
+//#endregion
+export { Shell, ShellMain, ShellNav };
+
+//# sourceMappingURL=shell.js.map

package/dist/components/shell/shell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shell.js","names":[],"sources":["../../../src/components/shell/shell.tsx"],"sourcesContent":["import { Slot } from \"@askrjs/askr/foundations\";\nimport { classes } from \"../_internal/classes\";\nimport { mergeProps } from \"../_internal/merge-props\";\nimport type {\n  ShellAsChildProps,\n  ShellDivProps,\n  ShellMainAsChildProps,\n  ShellMainDivProps,\n  ShellMainMainProps,\n  ShellNavAsChildProps,\n  ShellNavDivProps,\n} from \"./shell.types\";\n\nexport function Shell(props: ShellDivProps): JSX.Element;\nexport function Shell(props: ShellAsChildProps): JSX.Element;\nexport function Shell(props: ShellDivProps | ShellAsChildProps) {\n  const { asChild, children, class: className, variant = \"sidebar\", ref, ...rest } = props;\n\n  const finalProps = mergeProps(rest, {\n    ref,\n    class: classes(\"shell\", className),\n    \"data-slot\": \"shell\",\n    \"data-ak-layout\": \"true\",\n    \"data-variant\": variant,\n  });\n\n  if (asChild) {\n    return <Slot asChild {...finalProps} children={children as JSX.Element} />;\n  }\n\n  return <div {...finalProps}>{children}</div>;\n}\n\nexport function ShellNav(props: ShellNavDivProps): JSX.Element;\nexport function ShellNav(props: ShellNavAsChildProps): JSX.Element;\nexport function ShellNav(props: ShellNavDivProps | ShellNavAsChildProps) {\n  const { asChild, children, class: className, ref, ...rest } = props;\n  const finalProps = mergeProps(rest, {\n    ref,\n    class: classes(\"shell-nav\", className),\n    \"data-slot\": \"shell-nav\",\n    \"data-ak-layout\": \"true\",\n  });\n\n  if (asChild) {\n    return <Slot asChild {...finalProps} children={children as JSX.Element} />;\n  }\n\n  return <div {...finalProps}>{children}</div>;\n}\n\nexport function ShellMain(props: ShellMainMainProps): JSX.Element;\nexport function ShellMain(props: ShellMainDivProps): JSX.Element;\nexport function ShellMain(props: ShellMainAsChildProps): JSX.Element;\nexport function ShellMain(props: ShellMainMainProps | ShellMainDivProps | ShellMainAsChildProps) {\n  const as = \"as\" in props ? props.as : \"main\";\n  const { asChild, children, class: className, ref, ...rest } = props;\n  const finalProps = mergeProps(rest, {\n    ref,\n    class: classes(\"shell-main\", className),\n    \"data-slot\": \"shell-main\",\n    \"data-ak-layout\": \"true\",\n  });\n\n  if (asChild) {\n    return <Slot asChild {...finalProps} children={children as JSX.Element} />;\n  }\n\n  if (as === \"div\") {\n    return <div {...finalProps}>{children}</div>;\n  }\n\n  return <main {...finalProps}>{children}</main>;\n}\n"],"mappings":";;;;;AAeA,SAAgB,MAAM,OAA0C;CAC9D,MAAM,EAAE,SAAS,UAAU,OAAO,WAAW,UAAU,WAAW,KAAK,GAAG,SAAS;CAEnF,MAAM,aAAa,WAAW,MAAM;EAClC;EACA,OAAO,QAAQ,SAAS,UAAU;EAClC,aAAa;EACb,kBAAkB;EAClB,gBAAgB;EACjB,CAAC;CAEF,IAAI,SACF,OAAO,oBAAC,MAAD;EAAM,SAAA;EAAQ,GAAI;EAAsB;EAA2B,CAAA;CAG5E,OAAO,oBAAC,OAAD;EAAK,GAAI;EAAa;EAAe,CAAA;;AAK9C,SAAgB,SAAS,OAAgD;CACvE,MAAM,EAAE,SAAS,UAAU,OAAO,WAAW,KAAK,GAAG,SAAS;CAC9D,MAAM,aAAa,WAAW,MAAM;EAClC;EACA,OAAO,QAAQ,aAAa,UAAU;EACtC,aAAa;EACb,kBAAkB;EACnB,CAAC;CAEF,IAAI,SACF,OAAO,oBAAC,MAAD;EAAM,SAAA;EAAQ,GAAI;EAAsB;EAA2B,CAAA;CAG5E,OAAO,oBAAC,OAAD;EAAK,GAAI;EAAa;EAAe,CAAA;;AAM9C,SAAgB,UAAU,OAAuE;CAC/F,MAAM,KAAK,QAAQ,QAAQ,MAAM,KAAK;CACtC,MAAM,EAAE,SAAS,UAAU,OAAO,WAAW,KAAK,GAAG,SAAS;CAC9D,MAAM,aAAa,WAAW,MAAM;EAClC;EACA,OAAO,QAAQ,cAAc,UAAU;EACvC,aAAa;EACb,kBAAkB;EACnB,CAAC;CAEF,IAAI,SACF,OAAO,oBAAC,MAAD;EAAM,SAAA;EAAQ,GAAI;EAAsB;EAA2B,CAAA;CAG5E,IAAI,OAAO,OACT,OAAO,oBAAC,OAAD;EAAK,GAAI;EAAa;EAAe,CAAA;CAG9C,OAAO,oBAAC,QAAD;EAAM,GAAI;EAAa;EAAgB,CAAA"}

package/dist/components/shell/shell.types.d.ts

@@ -0,0 +1,58 @@
+import { JSXElement } from "@askrjs/askr/foundations";
+import { Ref } from "@askrjs/askr/foundations/utilities";
+
+//#region src/components/shell/shell.types.d.ts
+type ShellVariant = "sidebar" | "topbar" | "rail";
+type ShellOwnProps = {
+  variant?: ShellVariant;
+  class?: string;
+  children?: unknown;
+};
+type ShellDivProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref"> & ShellOwnProps & {
+  asChild?: false;
+  ref?: Ref<HTMLDivElement>;
+};
+type ShellAsChildProps = Omit<ShellOwnProps, "as"> & {
+  asChild: true;
+  children: JSXElement;
+  ref?: Ref<unknown>;
+};
+type ShellProps = ShellDivProps | ShellAsChildProps;
+type ShellNavOwnProps = {
+  class?: string;
+  children?: unknown;
+};
+type ShellNavDivProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref"> & ShellNavOwnProps & {
+  asChild?: false;
+  ref?: Ref<HTMLDivElement>;
+};
+type ShellNavAsChildProps = Omit<ShellNavOwnProps, "as"> & {
+  asChild: true;
+  children: JSXElement;
+  ref?: Ref<unknown>;
+};
+type ShellNavProps = ShellNavDivProps | ShellNavAsChildProps;
+type ShellMainOwnProps = {
+  as?: "main" | "div";
+  class?: string;
+  children?: unknown;
+};
+type ShellMainMainProps = Omit<JSX.IntrinsicElements["main"], "children" | "ref"> & ShellMainOwnProps & {
+  as?: "main";
+  asChild?: false;
+  ref?: Ref<HTMLElement>;
+};
+type ShellMainDivProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref"> & ShellMainOwnProps & {
+  as: "div";
+  asChild?: false;
+  ref?: Ref<HTMLDivElement>;
+};
+type ShellMainAsChildProps = Omit<ShellMainOwnProps, "as"> & {
+  asChild: true;
+  children: JSXElement;
+  ref?: Ref<unknown>;
+};
+type ShellMainProps = ShellMainMainProps | ShellMainDivProps | ShellMainAsChildProps;
+//#endregion
+export { ShellAsChildProps, ShellDivProps, ShellMainAsChildProps, ShellMainDivProps, ShellMainMainProps, ShellMainProps, ShellNavAsChildProps, ShellNavDivProps, ShellNavProps, ShellOwnProps, ShellProps, ShellVariant };
+//# sourceMappingURL=shell.types.d.ts.map

package/dist/components/sidebar/sidebar-panel.d.ts

@@ -0,0 +1,7 @@
+import { SidebarPanelProps } from "./sidebar.types.js";
+
+//#region src/components/sidebar/sidebar-panel.d.ts
+declare function SidebarPanel(props: SidebarPanelProps): JSX.Element | null;
+//#endregion
+export { SidebarPanel };
+//# sourceMappingURL=sidebar-panel.d.ts.map

package/dist/components/sidebar/sidebar-panel.js

@@ -0,0 +1,59 @@
+import { renderShellPanel } from "../shell/shell-panel.js";
+import { SidebarResponsiveContext } from "./sidebar.context.js";
+import { readContext } from "@askrjs/askr";
+//#region src/components/sidebar/sidebar-panel.tsx
+function SidebarPanel(props) {
+	const { active: activeProp, brand, children, class: className, collapseLabel: collapseLabelProp, onClose, open: openProp, panelId: panelIdProp, ref, ...rest } = props;
+	const responsive = activeProp === void 0 || collapseLabelProp === void 0 || onClose === void 0 || openProp === void 0 || panelIdProp === void 0 ? (() => {
+		try {
+			return readContext(SidebarResponsiveContext);
+		} catch {
+			return {
+				active: () => false,
+				collapseLabel: () => "Menu",
+				closePanel: () => void 0,
+				iconCollapsed: () => false,
+				isRailCollapsible: () => false,
+				orientation: () => "vertical",
+				panelId: () => void 0,
+				panelOpen: () => false,
+				togglePanel: () => void 0,
+				toggleRail: () => void 0
+			};
+		}
+	})() : {
+		active: () => false,
+		collapseLabel: () => "Menu",
+		closePanel: () => void 0,
+		iconCollapsed: () => false,
+		isRailCollapsible: () => false,
+		orientation: () => "vertical",
+		panelId: () => void 0,
+		panelOpen: () => false,
+		togglePanel: () => void 0,
+		toggleRail: () => void 0
+	};
+	const active = activeProp ?? responsive.active();
+	const open = openProp ?? responsive.panelOpen();
+	const panelId = panelIdProp ?? responsive.panelId();
+	const collapseLabel = collapseLabelProp ?? responsive.collapseLabel();
+	const closePanel = onClose ?? responsive.closePanel;
+	return renderShellPanel({
+		active,
+		brand,
+		children,
+		className,
+		collapseLabel,
+		dataOrientation: responsive.orientation(),
+		onClose: closePanel,
+		open,
+		panelId,
+		prefix: "sidebar",
+		ref,
+		rest
+	});
+}
+//#endregion
+export { SidebarPanel };
+
+//# sourceMappingURL=sidebar-panel.js.map

package/dist/components/sidebar/sidebar-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-panel.js","names":[],"sources":["../../../src/components/sidebar/sidebar-panel.tsx"],"sourcesContent":["import { readContext } from \"@askrjs/askr\";\nimport { renderShellPanel } from \"../shell/shell-panel\";\nimport { SidebarResponsiveContext } from \"./sidebar.context\";\nimport type { SidebarPanelProps } from \"./sidebar.types\";\n\nexport function SidebarPanel(props: SidebarPanelProps): JSX.Element | null {\n  const {\n    active: activeProp,\n    brand,\n    children,\n    class: className,\n    collapseLabel: collapseLabelProp,\n    onClose,\n    open: openProp,\n    panelId: panelIdProp,\n    ref,\n    ...rest\n  } = props;\n  const needsResponsiveContext =\n    activeProp === undefined ||\n    collapseLabelProp === undefined ||\n    onClose === undefined ||\n    openProp === undefined ||\n    panelIdProp === undefined;\n  const responsive = needsResponsiveContext\n    ? (() => {\n        try {\n          return readContext(SidebarResponsiveContext);\n        } catch {\n          return {\n            active: () => false,\n            collapseLabel: () => \"Menu\",\n            closePanel: () => undefined,\n            iconCollapsed: () => false,\n            isRailCollapsible: () => false,\n            orientation: () => \"vertical\" as const,\n            panelId: () => undefined,\n            panelOpen: () => false,\n            togglePanel: () => undefined,\n            toggleRail: () => undefined,\n          };\n        }\n      })()\n    : {\n        active: () => false,\n        collapseLabel: () => \"Menu\",\n        closePanel: () => undefined,\n        iconCollapsed: () => false,\n        isRailCollapsible: () => false,\n        orientation: () => \"vertical\" as const,\n        panelId: () => undefined,\n        panelOpen: () => false,\n        togglePanel: () => undefined,\n        toggleRail: () => undefined,\n      };\n  const active = activeProp ?? responsive.active();\n  const open = openProp ?? responsive.panelOpen();\n  const panelId = panelIdProp ?? responsive.panelId();\n  const collapseLabel = collapseLabelProp ?? responsive.collapseLabel();\n  const closePanel = onClose ?? responsive.closePanel;\n\n  return renderShellPanel({\n    active,\n    brand,\n    children,\n    className,\n    collapseLabel,\n    dataOrientation: responsive.orientation(),\n    onClose: closePanel,\n    open,\n    panelId,\n    prefix: \"sidebar\",\n    ref,\n    rest,\n  });\n}\n"],"mappings":";;;;AAKA,SAAgB,aAAa,OAA8C;CACzE,MAAM,EACJ,QAAQ,YACR,OACA,UACA,OAAO,WACP,eAAe,mBACf,SACA,MAAM,UACN,SAAS,aACT,KACA,GAAG,SACD;CAOJ,MAAM,aALJ,eAAe,KAAA,KACf,sBAAsB,KAAA,KACtB,YAAY,KAAA,KACZ,aAAa,KAAA,KACb,gBAAgB,KAAA,WAEP;EACL,IAAI;GACF,OAAO,YAAY,yBAAyB;UACtC;GACN,OAAO;IACL,cAAc;IACd,qBAAqB;IACrB,kBAAkB,KAAA;IAClB,qBAAqB;IACrB,yBAAyB;IACzB,mBAAmB;IACnB,eAAe,KAAA;IACf,iBAAiB;IACjB,mBAAmB,KAAA;IACnB,kBAAkB,KAAA;IACnB;;KAED,GACJ;EACE,cAAc;EACd,qBAAqB;EACrB,kBAAkB,KAAA;EAClB,qBAAqB;EACrB,yBAAyB;EACzB,mBAAmB;EACnB,eAAe,KAAA;EACf,iBAAiB;EACjB,mBAAmB,KAAA;EACnB,kBAAkB,KAAA;EACnB;CACL,MAAM,SAAS,cAAc,WAAW,QAAQ;CAChD,MAAM,OAAO,YAAY,WAAW,WAAW;CAC/C,MAAM,UAAU,eAAe,WAAW,SAAS;CACnD,MAAM,gBAAgB,qBAAqB,WAAW,eAAe;CACrE,MAAM,aAAa,WAAW,WAAW;CAEzC,OAAO,iBAAiB;EACtB;EACA;EACA;EACA;EACA;EACA,iBAAiB,WAAW,aAAa;EACzC,SAAS;EACT;EACA;EACA,QAAQ;EACR;EACA;EACD,CAAC"}

package/dist/components/sidebar/sidebar-toggle.d.ts

@@ -0,0 +1,7 @@
+import { SidebarToggleProps } from "./sidebar.types.js";
+
+//#region src/components/sidebar/sidebar-toggle.d.ts
+declare function SidebarToggle(_props: SidebarToggleProps): null;
+//#endregion
+export { SidebarToggle };
+//# sourceMappingURL=sidebar-toggle.d.ts.map

package/dist/components/sidebar/sidebar-toggle.js

@@ -0,0 +1,8 @@
+//#region src/components/sidebar/sidebar-toggle.tsx
+function SidebarToggle(_props) {
+	return null;
+}
+//#endregion
+export { SidebarToggle };
+
+//# sourceMappingURL=sidebar-toggle.js.map

package/dist/components/sidebar/sidebar-toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-toggle.js","names":[],"sources":["../../../src/components/sidebar/sidebar-toggle.tsx"],"sourcesContent":["import type { SidebarToggleProps } from \"./sidebar.types\";\n\nexport function SidebarToggle(_props: SidebarToggleProps): null {\n  return null;\n}\n"],"mappings":";AAEA,SAAgB,cAAc,QAAkC;CAC9D,OAAO"}

package/dist/components/sidebar/sidebar.context.js

@@ -0,0 +1,21 @@
+import { defineContext } from "@askrjs/askr";
+//#region src/components/sidebar/sidebar.context.ts
+const defaultOrientation = () => "vertical";
+const defaultResponsiveContext = {
+	active: () => false,
+	collapseLabel: () => "Menu",
+	closePanel: () => void 0,
+	iconCollapsed: () => false,
+	isRailCollapsible: () => false,
+	orientation: defaultOrientation,
+	panelId: () => void 0,
+	panelOpen: () => false,
+	togglePanel: () => void 0,
+	toggleRail: () => void 0
+};
+const SidebarContext = defineContext({ orientation: defaultOrientation });
+const SidebarResponsiveContext = defineContext(defaultResponsiveContext);
+//#endregion
+export { SidebarContext, SidebarResponsiveContext };
+
+//# sourceMappingURL=sidebar.context.js.map

package/dist/components/sidebar/sidebar.context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar.context.js","names":[],"sources":["../../../src/components/sidebar/sidebar.context.ts"],"sourcesContent":["import { defineContext } from \"@askrjs/askr\";\n\nexport type SidebarContextValue = {\n  orientation: () => \"vertical\";\n};\n\nexport type SidebarResponsiveContextValue = {\n  active: () => boolean;\n  collapseLabel: () => string;\n  closePanel: () => void;\n  iconCollapsed: () => boolean;\n  isRailCollapsible: () => boolean;\n  orientation: () => \"vertical\";\n  panelId: () => string | undefined;\n  panelOpen: () => boolean;\n  togglePanel: () => void;\n  toggleRail: () => void;\n};\n\nconst defaultOrientation = () => \"vertical\" as const;\n\nconst defaultResponsiveContext: SidebarResponsiveContextValue = {\n  active: () => false,\n  collapseLabel: () => \"Menu\",\n  closePanel: () => undefined,\n  iconCollapsed: () => false,\n  isRailCollapsible: () => false,\n  orientation: defaultOrientation,\n  panelId: () => undefined,\n  panelOpen: () => false,\n  togglePanel: () => undefined,\n  toggleRail: () => undefined,\n};\n\nexport const SidebarContext = defineContext<SidebarContextValue>({\n  orientation: defaultOrientation,\n});\n\nexport const SidebarResponsiveContext =\n  defineContext<SidebarResponsiveContextValue>(defaultResponsiveContext);\n"],"mappings":";;AAmBA,MAAM,2BAA2B;AAEjC,MAAM,2BAA0D;CAC9D,cAAc;CACd,qBAAqB;CACrB,kBAAkB,KAAA;CAClB,qBAAqB;CACrB,yBAAyB;CACzB,aAAa;CACb,eAAe,KAAA;CACf,iBAAiB;CACjB,mBAAmB,KAAA;CACnB,kBAAkB,KAAA;CACnB;AAED,MAAa,iBAAiB,cAAmC,EAC/D,aAAa,oBACd,CAAC;AAEF,MAAa,2BACX,cAA6C,yBAAyB"}

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

@@ -0,0 +1,7 @@
+import { SidebarProps } from "./sidebar.types.js";
+
+//#region src/components/sidebar/sidebar.d.ts
+declare function Sidebar(props: SidebarProps): JSX.Element;
+//#endregion
+export { Sidebar };
+//# sourceMappingURL=sidebar.d.ts.map