@askrjs/themes 0.0.2 → 0.0.4

package/dist/components/list-group/list-group.js

@@ -0,0 +1,43 @@
+import { classes } from "../_internal/classes.js";
+import { jsx } from "@askrjs/askr/jsx-runtime";
+import { Slot } from "@askrjs/askr/foundations";
+import { mergeProps } from "@askrjs/askr/foundations/utilities";
+//#region src/components/list-group/list-group.tsx
+function ListGroup(props) {
+	const { children, class: className, flush = false, orientation = "vertical", ref, ...rest } = props;
+	return /* @__PURE__ */ jsx("ul", {
+		...rest,
+		ref,
+		class: classes("list-group", flush ? "list-group-flush" : void 0, orientation === "horizontal" ? "list-group-horizontal" : void 0, className),
+		"data-flush": flush ? "true" : "false",
+		"data-orientation": orientation,
+		"data-slot": "list-group",
+		children
+	});
+}
+function ListGroupItem(props) {
+	const { action = false, active = false, asChild, children, disabled = false, ref, class: className, ...rest } = props;
+	const finalProps = mergeProps(rest, {
+		class: classes("list-group-item", action ? "list-group-item-action" : void 0, active ? "active" : void 0, disabled ? "disabled" : void 0, className),
+		ref,
+		"aria-current": active ? "page" : void 0,
+		"aria-disabled": disabled ? "true" : void 0,
+		"data-action": action ? "true" : void 0,
+		"data-active": active ? "true" : void 0,
+		"data-disabled": disabled ? "true" : void 0,
+		"data-slot": "list-group-item"
+	});
+	if (asChild) return /* @__PURE__ */ jsx(Slot, {
+		asChild: true,
+		...finalProps,
+		children
+	});
+	return /* @__PURE__ */ jsx("li", {
+		...finalProps,
+		children
+	});
+}
+//#endregion
+export { ListGroup, ListGroupItem };
+
+//# sourceMappingURL=list-group.js.map

package/dist/components/list-group/list-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-group.js","names":[],"sources":["../../../src/components/list-group/list-group.tsx"],"sourcesContent":["import { Slot } from \"@askrjs/askr/foundations\";\nimport { mergeProps } from \"@askrjs/askr/foundations/utilities\";\nimport { classes } from \"../_internal/classes\";\nimport type {\n  ListGroupItemAsChildProps,\n  ListGroupItemProps,\n  ListGroupProps,\n} from \"./list-group.types\";\n\nexport function ListGroup(props: ListGroupProps): JSX.Element {\n  const {\n    children,\n    class: className,\n    flush = false,\n    orientation = \"vertical\",\n    ref,\n    ...rest\n  } = props;\n\n  return (\n    <ul\n      {...rest}\n      ref={ref}\n      class={classes(\n        \"list-group\",\n        flush ? \"list-group-flush\" : undefined,\n        orientation === \"horizontal\" ? \"list-group-horizontal\" : undefined,\n        className,\n      )}\n      data-flush={flush ? \"true\" : \"false\"}\n      data-orientation={orientation}\n      data-slot=\"list-group\"\n    >\n      {children}\n    </ul>\n  );\n}\n\nexport function ListGroupItem(props: ListGroupItemProps): JSX.Element;\nexport function ListGroupItem(props: ListGroupItemAsChildProps): JSX.Element;\nexport function ListGroupItem(props: ListGroupItemProps | ListGroupItemAsChildProps): JSX.Element {\n  const {\n    action = false,\n    active = false,\n    asChild,\n    children,\n    disabled = false,\n    ref,\n    class: className,\n    ...rest\n  } = props;\n  const finalProps = mergeProps(rest, {\n    class: classes(\n      \"list-group-item\",\n      action ? \"list-group-item-action\" : undefined,\n      active ? \"active\" : undefined,\n      disabled ? \"disabled\" : undefined,\n      className,\n    ),\n    ref,\n    \"aria-current\": active ? \"page\" : undefined,\n    \"aria-disabled\": disabled ? \"true\" : undefined,\n    \"data-action\": action ? \"true\" : undefined,\n    \"data-active\": active ? \"true\" : undefined,\n    \"data-disabled\": disabled ? \"true\" : undefined,\n    \"data-slot\": \"list-group-item\",\n  });\n\n  if (asChild) {\n    return <Slot asChild {...finalProps} children={children} />;\n  }\n\n  return <li {...finalProps}>{children}</li>;\n}\n"],"mappings":";;;;;AASA,SAAgB,UAAU,OAAoC;CAC5D,MAAM,EACJ,UACA,OAAO,WACP,QAAQ,OACR,cAAc,YACd,KACA,GAAG,SACD;CAEJ,OACE,oBAAC,MAAD;EACE,GAAI;EACC;EACL,OAAO,QACL,cACA,QAAQ,qBAAqB,KAAA,GAC7B,gBAAgB,eAAe,0BAA0B,KAAA,GACzD,UACD;EACD,cAAY,QAAQ,SAAS;EAC7B,oBAAkB;EAClB,aAAU;EAET;EACE,CAAA;;AAMT,SAAgB,cAAc,OAAoE;CAChG,MAAM,EACJ,SAAS,OACT,SAAS,OACT,SACA,UACA,WAAW,OACX,KACA,OAAO,WACP,GAAG,SACD;CACJ,MAAM,aAAa,WAAW,MAAM;EAClC,OAAO,QACL,mBACA,SAAS,2BAA2B,KAAA,GACpC,SAAS,WAAW,KAAA,GACpB,WAAW,aAAa,KAAA,GACxB,UACD;EACD;EACA,gBAAgB,SAAS,SAAS,KAAA;EAClC,iBAAiB,WAAW,SAAS,KAAA;EACrC,eAAe,SAAS,SAAS,KAAA;EACjC,eAAe,SAAS,SAAS,KAAA;EACjC,iBAAiB,WAAW,SAAS,KAAA;EACrC,aAAa;EACd,CAAC;CAEF,IAAI,SACF,OAAO,oBAAC,MAAD;EAAM,SAAA;EAAQ,GAAI;EAAsB;EAAY,CAAA;CAG7D,OAAO,oBAAC,MAAD;EAAI,GAAI;EAAa;EAAc,CAAA"}

package/dist/components/list-group/list-group.types.d.ts

@@ -0,0 +1,32 @@
+import { JSXElement } from "@askrjs/askr/foundations";
+import { Ref } from "@askrjs/askr/foundations/utilities";
+
+//#region src/components/list-group/list-group.types.d.ts
+type ListGroupOrientation = "vertical" | "horizontal";
+type UlProps = Omit<JSX.IntrinsicElements["ul"], "children" | "ref">;
+type LiProps = Omit<JSX.IntrinsicElements["li"], "children" | "ref">;
+type ListGroupProps = UlProps & {
+  children?: unknown;
+  flush?: boolean;
+  orientation?: ListGroupOrientation;
+  ref?: Ref<HTMLUListElement>;
+};
+type ListGroupItemProps = LiProps & {
+  action?: boolean;
+  active?: boolean;
+  asChild?: false;
+  children?: unknown;
+  disabled?: boolean;
+  ref?: Ref<HTMLLIElement>;
+};
+type ListGroupItemAsChildProps = LiProps & {
+  action?: boolean;
+  active?: boolean;
+  asChild: true;
+  children: JSXElement;
+  disabled?: boolean;
+  ref?: Ref<unknown>;
+};
+//#endregion
+export { ListGroupItemAsChildProps, ListGroupItemProps, ListGroupOrientation, ListGroupProps };
+//# sourceMappingURL=list-group.types.d.ts.map

package/dist/components/nav/index.d.ts

@@ -0,0 +1,2 @@
+import { NavAsChildProps, NavDivProps, NavItemAsChildProps, NavItemProps, NavItemVariant, NavLinkProps, NavListProps, NavNavProps, NavOrientation, NavProps, NavVariant } from "./nav.types.js";
+import { Nav, NavItem, NavLink } from "./nav.js";

package/dist/components/nav/nav.d.ts

@@ -0,0 +1,13 @@
+import { NavAsChildProps, NavDivProps, NavItemAsChildProps, NavItemProps, NavLinkProps, NavListProps, NavNavProps } from "./nav.types.js";
+
+//#region src/components/nav/nav.d.ts
+declare function Nav(props: NavNavProps): JSX.Element;
+declare function Nav(props: NavDivProps): JSX.Element;
+declare function Nav(props: NavListProps): JSX.Element;
+declare function Nav(props: NavAsChildProps): JSX.Element;
+declare function NavItem(props: NavItemProps): JSX.Element;
+declare function NavItem(props: NavItemAsChildProps): JSX.Element;
+declare function NavLink(props: NavLinkProps): JSX.Element;
+//#endregion
+export { Nav, NavItem, NavLink };
+//# sourceMappingURL=nav.d.ts.map

package/dist/components/nav/nav.js

@@ -0,0 +1,113 @@
+import { classes } from "../_internal/classes.js";
+import { mergeProps } from "../_internal/merge-props.js";
+import { resolvePathname } from "../_internal/pathname.js";
+import { jsx } from "@askrjs/askr/jsx-runtime";
+import { Slot } from "@askrjs/askr/foundations";
+import { currentRoute, navigate } from "@askrjs/askr/router";
+//#region src/components/nav/nav.tsx
+function navItemClasses(variant, className) {
+	return classes("nav-item", "navbar-item", variant === "icon" && "nav-item-icon", variant === "icon" && "navbar-item-icon", className);
+}
+function normalizePathname(pathname) {
+	return pathname.endsWith("/") && pathname !== "/" ? pathname.slice(0, -1) : pathname;
+}
+function getCurrentPathname() {
+	if (typeof window === "undefined") return null;
+	return normalizePathname(window.location.pathname || "/");
+}
+function getReactiveCurrentPathname() {
+	try {
+		return normalizePathname(currentRoute().path || "/");
+	} catch {
+		return getCurrentPathname();
+	}
+}
+function shouldHandleClientNavigation(event, target, targetPathname) {
+	if (targetPathname === null || target) return false;
+	return !event.defaultPrevented && (event.button ?? 0) === 0 && !event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey;
+}
+function isActiveNavLink(currentPathname, targetPathname, match = "prefix") {
+	if (targetPathname === "/") return currentPathname === "/";
+	if (match === "exact") return currentPathname === targetPathname;
+	return currentPathname === targetPathname || currentPathname.startsWith(`${targetPathname}/`);
+}
+function Nav(props) {
+	const as = "as" in props ? props.as : "nav";
+	const className = "class" in props ? props.class : void 0;
+	const { asChild, children, orientation = "horizontal", variant = "default", ref, ...rest } = props;
+	const finalProps = mergeProps(rest, {
+		ref,
+		class: classes("nav", className),
+		"data-slot": "nav",
+		"data-orientation": orientation,
+		"data-variant": variant
+	});
+	if (asChild) return /* @__PURE__ */ jsx(Slot, {
+		asChild: true,
+		...finalProps,
+		children
+	});
+	if (as === "div") return /* @__PURE__ */ jsx("div", {
+		...finalProps,
+		children
+	});
+	if (as === "ul") return /* @__PURE__ */ jsx("ul", {
+		...finalProps,
+		children
+	});
+	return /* @__PURE__ */ jsx("nav", {
+		...finalProps,
+		children
+	});
+}
+function NavItem(props) {
+	const { asChild, children, ref, class: className, match: _match, variant = "default", ...rest } = props;
+	const finalProps = mergeProps(rest, {
+		ref,
+		class: navItemClasses(variant, className),
+		"data-slot": "nav-item",
+		"data-variant": variant
+	});
+	if (asChild) return /* @__PURE__ */ jsx(Slot, {
+		asChild: true,
+		...finalProps,
+		children
+	});
+	return /* @__PURE__ */ jsx("a", {
+		...finalProps,
+		children
+	});
+}
+function NavLink(props) {
+	const { children, href, onClick, ref, class: className, match = "prefix", target, variant = "default", ...rest } = props;
+	const currentPathname = getReactiveCurrentPathname();
+	const targetPathname = resolvePathname(href);
+	const isActive = currentPathname !== null && targetPathname !== null && isActiveNavLink(currentPathname, targetPathname, match);
+	const linkProps = mergeProps(rest, {
+		href,
+		target,
+		ref,
+		class: navItemClasses(variant, className),
+		"data-slot": "nav-link",
+		"data-variant": variant
+	});
+	const finalProps = isActive ? mergeProps({
+		"aria-current": "page",
+		"data-active": "true"
+	}, linkProps) : linkProps;
+	const handleClick = (event) => {
+		onClick?.(event);
+		if (!shouldHandleClientNavigation(event, target, targetPathname)) return;
+		event.preventDefault();
+		navigate(href);
+	};
+	return /* @__PURE__ */ jsx("a", {
+		...finalProps,
+		onClick: handleClick,
+		children
+	});
+}
+//#endregion
+export { Nav, NavItem, NavLink };
+
+//# sourceMappingURL=nav.js.map

package/dist/components/nav/nav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav.js","names":[],"sources":["../../../src/components/nav/nav.tsx"],"sourcesContent":["import { Slot } from \"@askrjs/askr/foundations\";\nimport { currentRoute, navigate } from \"@askrjs/askr/router\";\nimport { classes } from \"../_internal/classes\";\nimport { mergeProps } from \"../_internal/merge-props\";\nimport { resolvePathname } from \"../_internal/pathname\";\nimport type {\n  NavAsChildProps,\n  NavDivProps,\n  NavItemAsChildProps,\n  NavItemProps,\n  NavItemVariant,\n  NavLinkProps,\n  NavListProps,\n  NavNavProps,\n  NavProps,\n} from \"./nav.types\";\n\nfunction navItemClasses(variant: NavItemVariant, className: unknown): string | undefined {\n  return classes(\n    \"nav-item\",\n    \"navbar-item\",\n    variant === \"icon\" && \"nav-item-icon\",\n    variant === \"icon\" && \"navbar-item-icon\",\n    className,\n  );\n}\n\nfunction normalizePathname(pathname: string): string {\n  return pathname.endsWith(\"/\") && pathname !== \"/\" ? pathname.slice(0, -1) : pathname;\n}\n\nfunction getCurrentPathname(): string | null {\n  if (typeof window === \"undefined\") {\n    return null;\n  }\n\n  return normalizePathname(window.location.pathname || \"/\");\n}\n\nfunction getReactiveCurrentPathname(): string | null {\n  try {\n    return normalizePathname(currentRoute().path || \"/\");\n  } catch {\n    return getCurrentPathname();\n  }\n}\n\nfunction shouldHandleClientNavigation(\n  event: MouseEvent,\n  target: string | undefined,\n  targetPathname: string | null,\n): boolean {\n  if (targetPathname === null || target) {\n    return false;\n  }\n\n  return (\n    !event.defaultPrevented &&\n    (event.button ?? 0) === 0 &&\n    !event.altKey &&\n    !event.ctrlKey &&\n    !event.metaKey &&\n    !event.shiftKey\n  );\n}\n\nfunction isActiveNavLink(\n  currentPathname: string,\n  targetPathname: string,\n  match: NavLinkProps[\"match\"] = \"prefix\",\n): boolean {\n  if (targetPathname === \"/\") {\n    return currentPathname === \"/\";\n  }\n\n  if (match === \"exact\") {\n    return currentPathname === targetPathname;\n  }\n\n  return currentPathname === targetPathname || currentPathname.startsWith(`${targetPathname}/`);\n}\n\nexport function Nav(props: NavNavProps): JSX.Element;\nexport function Nav(props: NavDivProps): JSX.Element;\nexport function Nav(props: NavListProps): JSX.Element;\nexport function Nav(props: NavAsChildProps): JSX.Element;\nexport function Nav(props: NavProps): JSX.Element {\n  const as = \"as\" in props ? props.as : \"nav\";\n  const className = \"class\" in props ? props.class : undefined;\n  const {\n    asChild,\n    children,\n    orientation = \"horizontal\",\n    variant = \"default\",\n    ref,\n    ...rest\n  } = props;\n  const finalProps = mergeProps(rest, {\n    ref,\n    class: classes(\"nav\", className),\n    \"data-slot\": \"nav\",\n    \"data-orientation\": orientation,\n    \"data-variant\": variant,\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  if (as === \"ul\") {\n    return <ul {...finalProps}>{children}</ul>;\n  }\n\n  return <nav {...finalProps}>{children}</nav>;\n}\n\nexport function NavItem(props: NavItemProps): JSX.Element;\nexport function NavItem(props: NavItemAsChildProps): JSX.Element;\nexport function NavItem(props: NavItemProps | NavItemAsChildProps): JSX.Element {\n  const {\n    asChild,\n    children,\n    ref,\n    class: className,\n    match: _match,\n    variant = \"default\",\n    ...rest\n  } = props as (NavItemProps | NavItemAsChildProps) & { match?: unknown };\n  void _match;\n\n  const finalProps = mergeProps(rest, {\n    ref,\n    class: navItemClasses(variant, className),\n    \"data-slot\": \"nav-item\",\n    \"data-variant\": variant,\n  });\n\n  if (asChild) {\n    return <Slot asChild {...finalProps} children={children} />;\n  }\n\n  return <a {...finalProps}>{children}</a>;\n}\n\nexport function NavLink(props: NavLinkProps): JSX.Element {\n  const {\n    children,\n    href,\n    onClick,\n    ref,\n    class: className,\n    match = \"prefix\",\n    target,\n    variant = \"default\",\n    ...rest\n  } = props as NavLinkProps & { onClick?: (event: MouseEvent) => void };\n  const currentPathname = getReactiveCurrentPathname();\n  const targetPathname = resolvePathname(href);\n  const isActive =\n    currentPathname !== null &&\n    targetPathname !== null &&\n    isActiveNavLink(currentPathname, targetPathname, match);\n\n  const linkProps = mergeProps(rest, {\n    href,\n    target,\n    ref,\n    class: navItemClasses(variant, className),\n    \"data-slot\": \"nav-link\",\n    \"data-variant\": variant,\n  });\n\n  const finalProps = isActive\n    ? mergeProps(\n        {\n          \"aria-current\": \"page\",\n          \"data-active\": \"true\",\n        },\n        linkProps,\n      )\n    : linkProps;\n\n  const handleClick = (event: MouseEvent) => {\n    onClick?.(event);\n\n    if (!shouldHandleClientNavigation(event, target, targetPathname)) {\n      return;\n    }\n\n    event.preventDefault();\n    navigate(href);\n  };\n\n  return (\n    <a {...finalProps} onClick={handleClick}>\n      {children}\n    </a>\n  );\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,56 @@
+import { JSXElement } from "@askrjs/askr/foundations";
+import { Ref } from "@askrjs/askr/foundations/utilities";
+import { LinkProps } from "@askrjs/askr/router";
+
+//#region src/components/nav/nav.types.d.ts
+type NavOrientation = "horizontal" | "vertical";
+type NavVariant = "default" | "tabs" | "pills";
+type NavItemVariant = "default" | "icon";
+type NavLinkMatch = "prefix" | "exact";
+type NavOwnProps = {
+  children?: unknown;
+  orientation?: NavOrientation;
+  variant?: NavVariant;
+  as?: "nav" | "div" | "ul";
+};
+type NavNavProps = Omit<JSX.IntrinsicElements["nav"], "children" | "ref"> & NavOwnProps & {
+  as?: "nav";
+  asChild?: false;
+  ref?: Ref<HTMLElement>;
+};
+type NavDivProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref"> & NavOwnProps & {
+  as: "div";
+  asChild?: false;
+  ref?: Ref<HTMLDivElement>;
+};
+type NavListProps = Omit<JSX.IntrinsicElements["ul"], "children" | "ref"> & NavOwnProps & {
+  as: "ul";
+  asChild?: false;
+  ref?: Ref<HTMLUListElement>;
+};
+type NavAsChildProps = Omit<NavOwnProps, "as"> & {
+  asChild: true;
+  children: JSXElement;
+  ref?: Ref<unknown>;
+};
+type NavProps = NavNavProps | NavDivProps | NavListProps | NavAsChildProps;
+type NavItemOwnProps = {
+  children?: unknown;
+  variant?: NavItemVariant;
+};
+type NavItemProps = Omit<JSX.IntrinsicElements["a"], "children" | "ref"> & NavItemOwnProps & {
+  asChild?: false;
+  ref?: Ref<HTMLAnchorElement>;
+};
+type NavItemAsChildProps = Omit<JSX.IntrinsicElements["a"], "children" | "ref"> & NavItemOwnProps & {
+  asChild: true;
+  children: JSXElement;
+  ref?: Ref<unknown>;
+};
+type NavLinkOwnProps = NavItemOwnProps & {
+  match?: NavLinkMatch;
+};
+type NavLinkProps = LinkProps & NavLinkOwnProps;
+//#endregion
+export { NavAsChildProps, NavDivProps, NavItemAsChildProps, NavItemProps, NavItemVariant, NavLinkProps, NavListProps, NavNavProps, NavOrientation, NavProps, NavVariant };
+//# sourceMappingURL=nav.types.d.ts.map

package/dist/components/navbar/index.d.ts

@@ -1,2 +1,5 @@
-export { NavBrand, Navbar, NavGroup, NavItem, NavLink } from "./navbar";
-export type { NavBrandProps, NavbarProps, NavGroupProps, NavItemAsChildProps, NavItemProps, NavItemVariant, NavLinkProps, } from "./navbar.types";
+import { NavItemAsChildProps, NavItemProps, NavItemVariant, NavLinkProps } from "../nav/nav.types.js";
+import { NavItem, NavLink } from "../nav/nav.js";
+import { CollapseBreakpoint, CollapseIconPlacement, Collapsible } from "../shell/shell-nav.types.js";
+import { NavBrandProps, NavGroupProps, NavToggleProps, NavbarProps } from "./navbar.types.js";
+import { NavBrand, NavGroup, NavToggle, Navbar } from "./navbar.js";

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

@@ -0,0 +1,48 @@
+import { renderShellPanel } from "../shell/shell-panel.js";
+import { NavbarResponsiveContext } from "./navbar.context.js";
+import { readContext } from "@askrjs/askr";
+//#region src/components/navbar/navbar-panel.tsx
+function NavbarPanel(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(NavbarResponsiveContext);
+		} catch {
+			return {
+				active: () => false,
+				collapseLabel: () => "Menu",
+				closePanel: () => void 0,
+				panelId: () => void 0,
+				panelOpen: () => false,
+				togglePanel: () => void 0
+			};
+		}
+	})() : {
+		active: () => false,
+		collapseLabel: () => "Menu",
+		closePanel: () => void 0,
+		panelId: () => void 0,
+		panelOpen: () => false,
+		togglePanel: () => void 0
+	};
+	const active = activeProp ?? responsive.active();
+	const open = openProp ?? responsive.panelOpen();
+	const panelId = panelIdProp ?? responsive.panelId();
+	return renderShellPanel({
+		active,
+		brand,
+		children,
+		className,
+		collapseLabel: collapseLabelProp ?? responsive.collapseLabel(),
+		onClose: onClose ?? responsive.closePanel,
+		open,
+		panelId,
+		prefix: "navbar",
+		ref,
+		rest
+	});
+}
+//#endregion
+export { NavbarPanel };
+
+//# sourceMappingURL=navbar-panel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"navbar-panel.js","names":[],"sources":["../../../src/components/navbar/navbar-panel.tsx"],"sourcesContent":["import { readContext } from \"@askrjs/askr\";\nimport { renderShellPanel } from \"../shell/shell-panel\";\nimport { NavbarResponsiveContext } from \"./navbar.context\";\nimport type { NavbarPanelProps } from \"./navbar.types\";\n\nexport function NavbarPanel(props: NavbarPanelProps): 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(NavbarResponsiveContext);\n        } catch {\n          return {\n            active: () => false,\n            collapseLabel: () => \"Menu\",\n            closePanel: () => undefined,\n            panelId: () => undefined,\n            panelOpen: () => false,\n            togglePanel: () => undefined,\n          };\n        }\n      })()\n    : {\n        active: () => false,\n        collapseLabel: () => \"Menu\",\n        closePanel: () => undefined,\n        panelId: () => undefined,\n        panelOpen: () => false,\n        togglePanel: () => 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    onClose: closePanel,\n    open,\n    panelId,\n    prefix: \"navbar\",\n    ref,\n    rest,\n  });\n}\n"],"mappings":";;;;AAKA,SAAgB,YAAY,OAA6C;CACvE,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,wBAAwB;UACrC;GACN,OAAO;IACL,cAAc;IACd,qBAAqB;IACrB,kBAAkB,KAAA;IAClB,eAAe,KAAA;IACf,iBAAiB;IACjB,mBAAmB,KAAA;IACpB;;KAED,GACJ;EACE,cAAc;EACd,qBAAqB;EACrB,kBAAkB,KAAA;EAClB,eAAe,KAAA;EACf,iBAAiB;EACjB,mBAAmB,KAAA;EACpB;CACL,MAAM,SAAS,cAAc,WAAW,QAAQ;CAChD,MAAM,OAAO,YAAY,WAAW,WAAW;CAC/C,MAAM,UAAU,eAAe,WAAW,SAAS;CAInD,OAAO,iBAAiB;EACtB;EACA;EACA;EACA;EACA,eARoB,qBAAqB,WAAW,eAAe;EASnE,SARiB,WAAW,WAAW;EASvC;EACA;EACA,QAAQ;EACR;EACA;EACD,CAAC"}

package/dist/components/navbar/navbar.context.js

@@ -0,0 +1,13 @@
+import { defineContext } from "@askrjs/askr";
+const NavbarResponsiveContext = defineContext({
+	active: () => false,
+	collapseLabel: () => "Menu",
+	closePanel: () => void 0,
+	panelId: () => void 0,
+	panelOpen: () => false,
+	togglePanel: () => void 0
+});
+//#endregion
+export { NavbarResponsiveContext };
+
+//# sourceMappingURL=navbar.context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"navbar.context.js","names":[],"sources":["../../../src/components/navbar/navbar.context.ts"],"sourcesContent":["import { defineContext } from \"@askrjs/askr\";\n\nexport type NavbarResponsiveContextValue = {\n  active: () => boolean;\n  collapseLabel: () => string;\n  closePanel: () => void;\n  panelId: () => string | undefined;\n  panelOpen: () => boolean;\n  togglePanel: () => void;\n};\n\nconst defaultResponsiveContext: NavbarResponsiveContextValue = {\n  active: () => false,\n  collapseLabel: () => \"Menu\",\n  closePanel: () => undefined,\n  panelId: () => undefined,\n  panelOpen: () => false,\n  togglePanel: () => undefined,\n};\n\nexport const NavbarResponsiveContext =\n  defineContext<NavbarResponsiveContextValue>(defaultResponsiveContext);\n"],"mappings":";AAoBA,MAAa,0BACX,cAA4C;CAT5C,cAAc;CACd,qBAAqB;CACrB,kBAAkB,KAAA;CAClB,eAAe,KAAA;CACf,iBAAiB;CACjB,mBAAmB,KAAA;CAIyB,CAAyB"}

package/dist/components/navbar/navbar.d.ts

@@ -1,7 +1,45 @@
-import type { NavBrandProps, NavGroupProps, NavItemAsChildProps, NavItemProps, NavLinkProps, NavbarProps } from "./navbar.types";
-export declare function Navbar(props: NavbarProps): JSX.Element;
-export declare function NavBrand(props: NavBrandProps): JSX.Element;
-export declare function NavGroup(props: NavGroupProps): JSX.Element;
-export declare function NavItem(props: NavItemProps): JSX.Element;
-export declare function NavItem(props: NavItemAsChildProps): JSX.Element;
-export declare function NavLink(props: NavLinkProps): JSX.Element;
+import { NavBrandProps, NavGroupProps, NavToggleProps, NavbarProps } from "./navbar.types.js";
+
+//#region src/components/navbar/navbar.d.ts
+/**
+ * Responsive mobile-first navbar component.
+ *
+ * Composition: Navbar should contain NavBrand (extracted to mobile panel), NavGroup items with optional align,
+ * and NavLink children. Brand must be first child to appear in mobile menu.
+ *
+ * @example
+ * <Navbar breakpoint="md" aria-label="Main navigation">
+ *   <NavBrand><a href="/">Logo</a></NavBrand>
+ *   <NavGroup align="center">
+ *     <NavLink href="/docs">Docs</NavLink>
+ *   </NavGroup>
+ *   <NavGroup align="end">
+ *     <NavLink href="/settings">Settings</NavLink>
+ *   </NavGroup>
+ * </Navbar>
+ */
+declare function Navbar(props: NavbarProps): JSX.Element;
+/**
+ * Menu toggle button for responsive navbar collapse.
+ * Auto-renders when navbar is responsive (collapseBelow set).
+ */
+declare function NavToggle(props: NavToggleProps): JSX.Element | null;
+/**
+ * Brand/logo container displayed in navbar and mobile panel header.
+ */
+declare function NavBrand(props: NavBrandProps): JSX.Element;
+/**
+ * Navigation group for organizing related nav items.
+ *
+ * @param align - Alignment: "start" (default), "center", or "end". Using align="end" automatically right-aligns the group.
+ * @param label - Optional accessible label for grouped items.
+ *
+ * @example
+ * <NavGroup align="center">
+ *   <NavLink href="/docs">Docs</NavLink>
+ * </NavGroup>
+ */
+declare function NavGroup(props: NavGroupProps): JSX.Element;
+//#endregion
+export { NavBrand, NavGroup, NavToggle, Navbar };
+//# sourceMappingURL=navbar.d.ts.map

package/dist/components/navbar/navbar.js

@@ -0,0 +1,221 @@
+import { classes } from "../_internal/classes.js";
+import { mergeProps } from "../_internal/merge-props.js";
+import { isJsxElement, toChildArray } from "../_internal/jsx.js";
+import { ShellPanelWatcher, ShellResponsiveWatcher, renderKeyedShellChildren } from "../shell/shell-responsive.js";
+import { renderNavbarCollapseContents } from "./navbar.render.js";
+import { NavbarResponsiveContext } from "./navbar.context.js";
+import { NavbarPanel } from "./navbar-panel.js";
+import { isNavbarCollapsed, resolveNavGroupAlign } from "./navbar.shared.js";
+import { Fragment, jsx, jsxs } from "@askrjs/askr/jsx-runtime";
+import { state } from "@askrjs/askr";
+//#region src/components/navbar/navbar.tsx
+/**
+* Extracts the first NavBrand child to display in the mobile panel.
+* NavBrand should be the first child of Navbar for it to appear in the mobile menu.
+*/
+function findNavbarBrand(children) {
+	return toChildArray(children).find((child) => isJsxElement(child) && child.type === NavBrand);
+}
+function withoutNavbarBrand(children) {
+	return toChildArray(children).filter((child) => !(isJsxElement(child) && child.type === NavBrand));
+}
+/**
+* Responsive mobile-first navbar component.
+*
+* Composition: Navbar should contain NavBrand (extracted to mobile panel), NavGroup items with optional align,
+* and NavLink children. Brand must be first child to appear in mobile menu.
+*
+* @example
+* <Navbar breakpoint="md" aria-label="Main navigation">
+*   <NavBrand><a href="/">Logo</a></NavBrand>
+*   <NavGroup align="center">
+*     <NavLink href="/docs">Docs</NavLink>
+*   </NavGroup>
+*   <NavGroup align="end">
+*     <NavLink href="/settings">Settings</NavLink>
+*   </NavGroup>
+* </Navbar>
+*/
+function Navbar(props) {
+	const { children, breakpoint, collapseIcon, collapseIconPlacement = "start", collapseLabel, ref, class: className, id, "aria-label": ariaLabel, ...rest } = props;
+	const effectiveCollapseLabel = collapseLabel ?? "Menu";
+	const responsiveChildren = toChildArray(children);
+	const desktopChildren = renderKeyedShellChildren(responsiveChildren, "navbar-desktop");
+	const panelChildren = renderKeyedShellChildren(withoutNavbarBrand(responsiveChildren), "navbar-panel");
+	const responsiveCollapsedState = breakpoint !== void 0 ? state(isNavbarCollapsed(breakpoint)) : void 0;
+	const mobileMenuState = state(false);
+	const mobileMenuOpen = mobileMenuState();
+	const panelId = typeof id === "string" ? `${id}-panel` : void 0;
+	const responsiveCollapsed = breakpoint !== void 0 ? responsiveCollapsedState?.() : false;
+	const panelOpen = Boolean(responsiveCollapsed && mobileMenuOpen);
+	const closePanel = () => mobileMenuState.set(false);
+	const closePanelOnNavActivation = (event) => {
+		const target = event.target;
+		if (!(target instanceof Element)) return;
+		if (target.closest("a[data-slot=\"nav-link\"], a[data-slot=\"nav-item\"], a.navbar-item")) closePanel();
+	};
+	const togglePanel = () => {
+		mobileMenuState.set(!mobileMenuState());
+	};
+	const contextValue = {
+		active: () => breakpoint !== void 0,
+		collapseLabel: () => effectiveCollapseLabel,
+		closePanel,
+		panelId: () => panelId,
+		panelOpen: () => Boolean(responsiveCollapsedState?.() && mobileMenuOpen),
+		togglePanel
+	};
+	const panelBrand = findNavbarBrand(responsiveChildren);
+	const finalProps = mergeProps(rest, {
+		"aria-label": ariaLabel,
+		ref,
+		class: classes("navbar", className),
+		"data-collapse-below": breakpoint,
+		"data-responsive-collapsed": responsiveCollapsed ? "true" : "false",
+		"data-slot": "navbar"
+	});
+	return /* @__PURE__ */ jsx(NavbarResponsiveContext.Scope, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsxs("nav", {
+			...finalProps,
+			children: [
+				breakpoint !== void 0 ? /* @__PURE__ */ jsx("div", {
+					class: "navbar-mobile",
+					"data-slot": "navbar-mobile",
+					children: /* @__PURE__ */ jsx(NavToggle, {
+						active: breakpoint !== void 0,
+						"aria-controls": panelId,
+						"aria-label": effectiveCollapseLabel,
+						icon: collapseIcon,
+						iconPlacement: collapseIconPlacement,
+						label: effectiveCollapseLabel,
+						onToggle: togglePanel,
+						open: panelOpen,
+						panelId
+					})
+				}) : null,
+				/* @__PURE__ */ jsx("div", {
+					class: "navbar-shell",
+					"data-slot": "navbar-shell",
+					children: desktopChildren
+				}),
+				breakpoint !== void 0 ? /* @__PURE__ */ jsx(NavbarPanel, {
+					active: breakpoint !== void 0,
+					brand: panelBrand,
+					collapseLabel: effectiveCollapseLabel,
+					onClose: closePanel,
+					onClick: closePanelOnNavActivation,
+					open: panelOpen,
+					panelId,
+					children: panelChildren
+				}) : null,
+				responsiveCollapsed && mobileMenuOpen ? /* @__PURE__ */ jsx("button", {
+					"aria-label": `Close ${effectiveCollapseLabel}`,
+					class: "navbar-backdrop",
+					"data-slot": "navbar-backdrop",
+					"data-state": "open",
+					tabIndex: -1,
+					type: "button",
+					onClick: closePanel
+				}) : null,
+				breakpoint !== void 0 ? /* @__PURE__ */ jsx(ShellResponsiveWatcher, {
+					breakpoint,
+					isCollapsed: isNavbarCollapsed,
+					onResize: (nextCollapsed) => {
+						responsiveCollapsedState?.set(nextCollapsed);
+					},
+					onExpand: () => {
+						mobileMenuState?.set(false);
+					}
+				}) : null,
+				/* @__PURE__ */ jsx(ShellPanelWatcher, {
+					contentId: panelId,
+					open: panelOpen,
+					panelSlot: "navbar-panel",
+					onClose: closePanel
+				})
+			]
+		})
+	});
+}
+/**
+* Menu toggle button for responsive navbar collapse.
+* Auto-renders when navbar is responsive (collapseBelow set).
+*/
+function NavToggle(props) {
+	const { children, class: className, active, icon, iconPlacement = "start", label = "Menu", ref, onToggle, open, panelId, ...rest } = props;
+	if (active === false) return null;
+	const isOpen = open === true;
+	return /* @__PURE__ */ jsx("button", {
+		...mergeProps(rest, {
+			ref,
+			class: classes("navbar-toggle", className),
+			"aria-controls": panelId,
+			"aria-expanded": isOpen ? "true" : "false",
+			"aria-label": label,
+			"data-slot": "navbar-toggle",
+			"data-state": isOpen ? "open" : "closed",
+			type: "button",
+			onClick: () => onToggle?.()
+		}),
+		children: children ?? renderNavbarCollapseContents(label, icon, iconPlacement)
+	});
+}
+/**
+* Brand/logo container displayed in navbar and mobile panel header.
+*/
+function NavBrand(props) {
+	const { children, ref, class: className, ...rest } = props;
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		ref,
+		class: classes("navbar-brand", className),
+		"data-slot": "navbar-brand",
+		children
+	});
+}
+/**
+* Navigation group for organizing related nav items.
+*
+* @param align - Alignment: "start" (default), "center", or "end". Using align="end" automatically right-aligns the group.
+* @param label - Optional accessible label for grouped items.
+*
+* @example
+* <NavGroup align="center">
+*   <NavLink href="/docs">Docs</NavLink>
+* </NavGroup>
+*/
+function NavGroup(props) {
+	const { children, id, ref, class: className, label, ...rest } = props;
+	const rawAlign = rest["data-align"];
+	const align = props.align ?? (rawAlign === "start" || rawAlign === "center" || rawAlign === "end" ? rawAlign : void 0);
+	const hasLabel = label !== void 0 && label !== null;
+	const labelId = hasLabel && id ? `${id}-label` : void 0;
+	const accessibleLabel = typeof label === "string" ? label : void 0;
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		id,
+		ref,
+		class: classes("navbar-group", className),
+		"aria-label": labelId ? void 0 : accessibleLabel,
+		"aria-labelledby": labelId,
+		role: hasLabel ? "group" : rest.role,
+		"data-align": resolveNavGroupAlign(align),
+		"data-has-label": hasLabel ? "true" : void 0,
+		"data-slot": "navbar-group",
+		children: hasLabel ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+			id: labelId,
+			class: "navbar-group-label",
+			"data-slot": "navbar-group-label",
+			children: label
+		}), /* @__PURE__ */ jsx("div", {
+			class: "navbar-group-body",
+			"data-slot": "navbar-group-body",
+			children
+		})] }) : children
+	});
+}
+//#endregion
+export { NavBrand, NavGroup, NavToggle, Navbar };
+
+//# sourceMappingURL=navbar.js.map