@askrjs/themes 0.0.9 → 0.0.11

package/dist/components/grid/grid.js

@@ -0,0 +1,76 @@
+import { classes } from "../_internal/classes.js";
+import { mergeProps } from "../_internal/merge-props.js";
+import { styleDeclarationsToClass } from "../_internal/style.js";
+import { mergeLayoutStyles } from "../_internal/block-layout.js";
+import { jsx } from "@askrjs/askr/jsx-runtime";
+//#region src/components/grid/grid.tsx
+const DEFAULT_ELEMENT = "div";
+const BREAKPOINTS = [
+	"base",
+	"sm",
+	"md",
+	"lg",
+	"xl"
+];
+const SPACE_TOKEN_MAP = {
+	"0": "0",
+	xs: "var(--ak-space-xs)",
+	sm: "var(--ak-space-sm)",
+	md: "var(--ak-space-md)",
+	lg: "var(--ak-space-lg)",
+	xl: "var(--ak-space-xl)",
+	"2xl": "var(--ak-space-2xl)",
+	"3xl": "var(--ak-space-3xl)",
+	page: "var(--ak-layout-page-gutter)"
+};
+function isResponsiveValue(value) {
+	return Boolean(value && typeof value === "object" && !Array.isArray(value) && BREAKPOINTS.some((breakpoint) => breakpoint in value));
+}
+function normalizeResponsiveValue(value) {
+	if (value === void 0) return void 0;
+	if (isResponsiveValue(value)) return value;
+	return { base: value };
+}
+function resolveColumns(value) {
+	if (typeof value === "number") return `repeat(${value}, minmax(0, 1fr))`;
+	return value.trim() || "minmax(0, 1fr)";
+}
+function resolveGap(value) {
+	return SPACE_TOKEN_MAP[value] ?? value;
+}
+function resolveAlign(value) {
+	if (value === "start") return "start";
+	if (value === "end") return "end";
+	return value;
+}
+function setResponsiveVar(styles, property, value, resolve) {
+	const normalized = normalizeResponsiveValue(value);
+	if (!normalized) return;
+	for (const breakpoint of BREAKPOINTS) {
+		const breakpointValue = normalized[breakpoint];
+		if (breakpointValue === void 0) continue;
+		const resolved = resolve(breakpointValue);
+		if (resolved === void 0 || resolved === "") continue;
+		styles[`--ak-grid-${property}-${breakpoint}`] = resolved;
+	}
+}
+function Grid(props) {
+	const { as, columns, gap, align, children, class: classProp, className, ref, style: userStyle, ...rest } = props;
+	const styles = {};
+	setResponsiveVar(styles, "columns", columns, resolveColumns);
+	setResponsiveVar(styles, "gap", gap, resolveGap);
+	setResponsiveVar(styles, "align", align, resolveAlign);
+	const finalProps = mergeProps(rest, {
+		ref,
+		class: classes("grid", classProp, className, styleDeclarationsToClass(mergeLayoutStyles(styles, userStyle))),
+		"data-slot": "grid"
+	});
+	return /* @__PURE__ */ jsx(as ?? DEFAULT_ELEMENT, {
+		...finalProps,
+		children
+	});
+}
+//#endregion
+export { Grid };
+
+//# sourceMappingURL=grid.js.map

package/dist/components/grid/grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.js","names":[],"sources":["../../../src/components/grid/grid.tsx"],"sourcesContent":["import { classes } from \"../_internal/classes\";\nimport { mergeLayoutStyles } from \"../_internal/block-layout\";\nimport { mergeProps } from \"../_internal/merge-props\";\nimport { styleDeclarationsToClass } from \"../_internal/style\";\nimport type { BlockSpace, LayoutBreakpoint, ResponsiveValue } from \"../_internal/block-layout\";\nimport type { GridAlign, GridColumns, GridElement, GridProps } from \"./grid.types\";\n\nconst DEFAULT_ELEMENT = \"div\";\nconst BREAKPOINTS: readonly LayoutBreakpoint[] = [\"base\", \"sm\", \"md\", \"lg\", \"xl\"];\n\nconst SPACE_TOKEN_MAP: Record<BlockSpace, string> = {\n  \"0\": \"0\",\n  xs: \"var(--ak-space-xs)\",\n  sm: \"var(--ak-space-sm)\",\n  md: \"var(--ak-space-md)\",\n  lg: \"var(--ak-space-lg)\",\n  xl: \"var(--ak-space-xl)\",\n  \"2xl\": \"var(--ak-space-2xl)\",\n  \"3xl\": \"var(--ak-space-3xl)\",\n  page: \"var(--ak-layout-page-gutter)\",\n};\n\nfunction isResponsiveValue<T>(\n  value: ResponsiveValue<T> | undefined,\n): value is Partial<Record<LayoutBreakpoint, T>> {\n  return Boolean(\n    value &&\n    typeof value === \"object\" &&\n    !Array.isArray(value) &&\n    BREAKPOINTS.some((breakpoint) => breakpoint in value),\n  );\n}\n\nfunction normalizeResponsiveValue<T>(\n  value: ResponsiveValue<T> | undefined,\n): Partial<Record<LayoutBreakpoint, T>> | undefined {\n  if (value === undefined) return undefined;\n  if (isResponsiveValue(value)) return value;\n  return { base: value };\n}\n\nfunction resolveColumns(value: GridColumns): string {\n  if (typeof value === \"number\") {\n    return `repeat(${value}, minmax(0, 1fr))`;\n  }\n\n  const trimmed = value.trim();\n  return trimmed || \"minmax(0, 1fr)\";\n}\n\nfunction resolveGap(value: BlockSpace): string {\n  return SPACE_TOKEN_MAP[value] ?? value;\n}\n\nfunction resolveAlign(value: GridAlign): string {\n  if (value === \"start\") return \"start\";\n  if (value === \"end\") return \"end\";\n  return value;\n}\n\nfunction setResponsiveVar<T>(\n  styles: Record<string, string | number>,\n  property: string,\n  value: ResponsiveValue<T> | undefined,\n  resolve: (value: T) => string | number | undefined,\n) {\n  const normalized = normalizeResponsiveValue(value);\n  if (!normalized) return;\n\n  for (const breakpoint of BREAKPOINTS) {\n    const breakpointValue = normalized[breakpoint];\n    if (breakpointValue === undefined) continue;\n    const resolved = resolve(breakpointValue);\n    if (resolved === undefined || resolved === \"\") continue;\n    styles[`--ak-grid-${property}-${breakpoint}`] = resolved;\n  }\n}\n\nexport function Grid<TElement extends GridElement = \"div\">(\n  props: GridProps<TElement>,\n): JSX.Element {\n  const {\n    as,\n    columns,\n    gap,\n    align,\n    children,\n    class: classProp,\n    className,\n    ref,\n    style: userStyle,\n    ...rest\n  } = props as GridProps<GridElement> & {\n    class?: unknown;\n    className?: unknown;\n    style?: unknown;\n  };\n\n  const styles: Record<string, string | number> = {};\n  setResponsiveVar(styles, \"columns\", columns, resolveColumns);\n  setResponsiveVar(styles, \"gap\", gap, resolveGap);\n  setResponsiveVar(styles, \"align\", align, resolveAlign);\n\n  const generatedClass = styleDeclarationsToClass(mergeLayoutStyles(styles, userStyle));\n  const finalProps = mergeProps(rest, {\n    ref,\n    class: classes(\"grid\", classProp, className, generatedClass),\n    \"data-slot\": \"grid\",\n  });\n\n  const Element = (as ?? DEFAULT_ELEMENT) as keyof JSX.IntrinsicElements;\n  return <Element {...finalProps}>{children}</Element>;\n}\n"],"mappings":";;;;;;AAOA,MAAM,kBAAkB;AACxB,MAAM,cAA2C;CAAC;CAAQ;CAAM;CAAM;CAAM;AAAI;AAEhF,MAAM,kBAA8C;CAClD,KAAK;CACL,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACP,OAAO;CACP,MAAM;AACR;AAEA,SAAS,kBACP,OAC+C;CAC/C,OAAO,QACL,SACA,OAAO,UAAU,YACjB,CAAC,MAAM,QAAQ,KAAK,KACpB,YAAY,MAAM,eAAe,cAAc,KAAK,CACtD;AACF;AAEA,SAAS,yBACP,OACkD;CAClD,IAAI,UAAU,KAAA,GAAW,OAAO,KAAA;CAChC,IAAI,kBAAkB,KAAK,GAAG,OAAO;CACrC,OAAO,EAAE,MAAM,MAAM;AACvB;AAEA,SAAS,eAAe,OAA4B;CAClD,IAAI,OAAO,UAAU,UACnB,OAAO,UAAU,MAAM;CAIzB,OADgB,MAAM,KACT,KAAK;AACpB;AAEA,SAAS,WAAW,OAA2B;CAC7C,OAAO,gBAAgB,UAAU;AACnC;AAEA,SAAS,aAAa,OAA0B;CAC9C,IAAI,UAAU,SAAS,OAAO;CAC9B,IAAI,UAAU,OAAO,OAAO;CAC5B,OAAO;AACT;AAEA,SAAS,iBACP,QACA,UACA,OACA,SACA;CACA,MAAM,aAAa,yBAAyB,KAAK;CACjD,IAAI,CAAC,YAAY;CAEjB,KAAK,MAAM,cAAc,aAAa;EACpC,MAAM,kBAAkB,WAAW;EACnC,IAAI,oBAAoB,KAAA,GAAW;EACnC,MAAM,WAAW,QAAQ,eAAe;EACxC,IAAI,aAAa,KAAA,KAAa,aAAa,IAAI;EAC/C,OAAO,aAAa,SAAS,GAAG,gBAAgB;CAClD;AACF;AAEA,SAAgB,KACd,OACa;CACb,MAAM,EACJ,IACA,SACA,KACA,OACA,UACA,OAAO,WACP,WACA,KACA,OAAO,WACP,GAAG,SACD;CAMJ,MAAM,SAA0C,CAAC;CACjD,iBAAiB,QAAQ,WAAW,SAAS,cAAc;CAC3D,iBAAiB,QAAQ,OAAO,KAAK,UAAU;CAC/C,iBAAiB,QAAQ,SAAS,OAAO,YAAY;CAGrD,MAAM,aAAa,WAAW,MAAM;EAClC;EACA,OAAO,QAAQ,QAAQ,WAAW,WAHb,yBAAyB,kBAAkB,QAAQ,SAAS,CAGvB,CAAC;EAC3D,aAAa;CACf,CAAC;CAGD,OAAO,oBADU,MAAM,iBAChB;EAAS,GAAI;EAAa;CAAkB,CAAA;AACrD"}

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

@@ -0,0 +1,19 @@
+import { BlockSpace, ResponsiveValue } from "../_internal/block-layout.js";
+import { Ref } from "@askrjs/askr/foundations/utilities";
+
+//#region src/components/grid/grid.types.d.ts
+type GridElement = "div" | "section" | "ul";
+type GridColumns = number | string;
+type GridAlign = "start" | "center" | "end" | "stretch";
+type GridIntrinsicProps<TElement extends GridElement> = Omit<JSX.IntrinsicElements[TElement], "children" | "ref">;
+type GridProps<TElement extends GridElement = "div"> = GridIntrinsicProps<TElement> & {
+  as?: TElement;
+  columns?: ResponsiveValue<GridColumns>;
+  gap?: ResponsiveValue<BlockSpace>;
+  align?: ResponsiveValue<GridAlign>;
+  children?: unknown;
+  ref?: Ref<HTMLElement>;
+};
+//#endregion
+export { GridAlign, GridColumns, GridElement, GridProps };
+//# sourceMappingURL=grid.types.d.ts.map

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

@@ -0,0 +1,2 @@
+import { GridAlign, GridColumns, GridElement, GridProps } from "./grid.types.js";
+import { Grid } from "./grid.js";

package/dist/components/header/header.js

@@ -1,14 +1,17 @@
-import { classes } from "../_internal/classes.js";
+import { Block } from "../block/block.js";
 import { jsx } from "@askrjs/askr/jsx-runtime";
 //#region src/components/header/header.tsx
 function Header(props) {
-	const { children, position = "static", ref, class: className, ...rest } = props;
-	return /* @__PURE__ */ jsx("header", {
+	const { children, position, sticky = position === "sticky", ...rest } = props;
+	return /* @__PURE__ */ jsx(Block, {
+		as: "header",
+		sticky,
+		top: sticky ? "0" : void 0,
+		zIndex: sticky ? "header" : void 0,
+		background: "surface",
+		borderBottom: true,
 		...rest,
-		ref,
-		class: classes("header", className),
 		"data-slot": "header",
-		"data-position": position,
 		children
 	});
 }

package/dist/components/header/header.js.map

@@ -1 +1 @@
-{"version":3,"file":"header.js","names":[],"sources":["../../../src/components/header/header.tsx"],"sourcesContent":["import { classes } from \"../_internal/classes\";\nimport type { HeaderProps } from \"./header.types\";\n\nexport function Header(props: HeaderProps): JSX.Element {\n  const { children, position = \"static\", ref, class: className, ...rest } = props;\n\n  return (\n    <header\n      {...rest}\n      ref={ref}\n      class={classes(\"header\", className)}\n      data-slot=\"header\"\n      data-position={position}\n    >\n      {children}\n    </header>\n  );\n}\n"],"mappings":";;;AAGA,SAAgB,OAAO,OAAiC;CACtD,MAAM,EAAE,UAAU,WAAW,UAAU,KAAK,OAAO,WAAW,GAAG,SAAS;CAE1E,OACE,oBAAC,UAAD;EACE,GAAI;EACC;EACL,OAAO,QAAQ,UAAU,SAAS;EAClC,aAAU;EACV,iBAAe;EAEd;CACK,CAAA;AAEZ"}
+{"version":3,"file":"header.js","names":[],"sources":["../../../src/components/header/header.tsx"],"sourcesContent":["import { Block } from \"../block\";\nimport type { HeaderProps } from \"./header.types\";\n\nexport function Header(props: HeaderProps): JSX.Element {\n  const { children, position, sticky = position === \"sticky\", ...rest } = props;\n\n  return (\n    <Block\n      as=\"header\"\n      sticky={sticky}\n      top={sticky ? \"0\" : undefined}\n      zIndex={sticky ? \"header\" : undefined}\n      background=\"surface\"\n      borderBottom\n      {...rest}\n      data-slot=\"header\"\n    >\n      {children}\n    </Block>\n  );\n}\n"],"mappings":";;;AAGA,SAAgB,OAAO,OAAiC;CACtD,MAAM,EAAE,UAAU,UAAU,SAAS,aAAa,UAAU,GAAG,SAAS;CAExE,OACE,oBAAC,OAAD;EACE,IAAG;EACK;EACR,KAAK,SAAS,MAAM,KAAA;EACpB,QAAQ,SAAS,WAAW,KAAA;EAC5B,YAAW;EACX,cAAA;EACA,GAAI;EACJ,aAAU;EAET;CACI,CAAA;AAEX"}

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

@@ -1,9 +1,9 @@
+import { BlockElementProps } from "../block/block.types.js";
 //#region src/components/header/header.types.d.ts
-type HeaderPosition = "static" | "relative" | "sticky" | "absolute" | "fixed";
-type HeaderProps = Omit<JSX.IntrinsicElements["header"], "children"> & {
-  position?: HeaderPosition;
-  children?: unknown;
+type HeaderProps = Omit<BlockElementProps<"header">, "as" | "sticky"> & {
+  position?: "sticky" | "static";
+  sticky?: boolean;
 };
 //#endregion
-export { HeaderPosition, HeaderProps };
+export { HeaderProps };
 //# sourceMappingURL=header.types.d.ts.map

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

@@ -0,0 +1,2 @@
+import { HeaderProps } from "./header.types.js";
+import { Header } from "./header.js";

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

@@ -0,0 +1,2 @@
+import { MainProps } from "./main.types.js";
+import { Main } from "./main.js";

package/dist/components/main/main.d.ts

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

package/dist/components/main/main.js

@@ -0,0 +1,17 @@
+import { Block } from "../block/block.js";
+import { jsx } from "@askrjs/askr/jsx-runtime";
+//#region src/components/main/main.tsx
+function Main(props) {
+	const { children, ...rest } = props;
+	return /* @__PURE__ */ jsx(Block, {
+		as: "main",
+		grow: true,
+		...rest,
+		"data-slot": "main",
+		children
+	});
+}
+//#endregion
+export { Main };
+
+//# sourceMappingURL=main.js.map

package/dist/components/main/main.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.js","names":[],"sources":["../../../src/components/main/main.tsx"],"sourcesContent":["import { Block } from \"../block\";\nimport type { MainProps } from \"./main.types\";\n\nexport function Main(props: MainProps): JSX.Element {\n  const { children, ...rest } = props;\n\n  return (\n    <Block as=\"main\" grow {...rest} data-slot=\"main\">\n      {children}\n    </Block>\n  );\n}\n"],"mappings":";;;AAGA,SAAgB,KAAK,OAA+B;CAClD,MAAM,EAAE,UAAU,GAAG,SAAS;CAE9B,OACE,oBAAC,OAAD;EAAO,IAAG;EAAO,MAAA;EAAK,GAAI;EAAM,aAAU;EACvC;CACI,CAAA;AAEX"}

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

@@ -0,0 +1,6 @@
+import { BlockElementProps } from "../block/block.types.js";
+//#region src/components/main/main.types.d.ts
+type MainProps = Omit<BlockElementProps<"main">, "as">;
+//#endregion
+export { MainProps };
+//# sourceMappingURL=main.types.d.ts.map

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

@@ -1,2 +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";
+import { NavItemAsChildProps, NavItemProps, NavLinkProps, PillProps, PillsAsChildProps, PillsProps, TabProps, TabsAsChildProps, TabsProps } from "./nav.types.js";
+import { NavItem, NavLink, Pill, Pills, Tab, Tabs } from "./nav.js";

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

@@ -1,13 +1,15 @@
-import { NavAsChildProps, NavDivProps, NavItemAsChildProps, NavItemProps, NavLinkProps, NavListProps, NavNavProps } from "./nav.types.js";
+import { NavItemAsChildProps, NavItemProps, NavLinkProps, PillProps, PillsAsChildProps, PillsProps, TabProps, TabsAsChildProps, TabsProps } 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 Tabs(props: TabsProps): JSX.Element;
+declare function Tabs(props: TabsAsChildProps): JSX.Element;
+declare function Pills(props: PillsProps): JSX.Element;
+declare function Pills(props: PillsAsChildProps): JSX.Element;
+declare function Tab(props: TabProps): JSX.Element;
+declare function Pill(props: PillProps): 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 };
+export { NavItem, NavLink, Pill, Pills, Tab, Tabs };
 //# sourceMappingURL=nav.d.ts.map

package/dist/components/nav/nav.js

@@ -1,13 +1,11 @@
 import { classes } from "../_internal/classes.js";
 import { mergeProps } from "../_internal/merge-props.js";
+import { Block } from "../block/block.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";
+import { Link, 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;
 }
@@ -22,92 +20,129 @@ function getReactiveCurrentPathname() {
 		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";
+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 renderNavSet(props, slot) {
 	const className = "class" in props ? props.class : void 0;
-	const { asChild, children, orientation = "horizontal", variant = "default", ref, ...rest } = props;
+	const { asChild, children, ref, ...rest } = props;
 	const finalProps = mergeProps(rest, {
 		ref,
-		class: classes("nav", className),
-		"data-slot": "nav",
-		"data-orientation": orientation,
-		"data-variant": variant
+		class: classes(slot, className),
+		"data-slot": slot
 	});
 	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;
+function renderRoutedLink(props, slot, options = {}) {
+	const { active, children, href, onClick, ref, class: className, match = "prefix", target, ...rest } = props;
+	const resolvedSlot = (options.inheritSlot && typeof rest["data-slot"] === "string" ? String(rest["data-slot"]) : void 0) ?? slot;
+	const inheritedNavClass = slot === "nav-item" && resolvedSlot !== "nav-item" ? "nav-item" : void 0;
+	const { "data-slot": _dataSlot, ...childRest } = rest;
 	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({
+	const routeActive = currentPathname !== null && targetPathname !== null && isActiveNavLink(currentPathname, targetPathname, match);
+	const isActive = active ?? routeActive;
+	const activeProps = isActive ? {
 		"aria-current": "page",
 		"data-active": "true"
-	}, linkProps) : linkProps;
+	} : { "data-active": void 0 };
+	const useRouterLink = targetPathname !== null && !target && typeof onClick !== "function";
+	const childProps = {
+		...childRest,
+		href,
+		target
+	};
 	const handleClick = (event) => {
 		onClick?.(event);
 		if (!shouldHandleClientNavigation(event, target, targetPathname)) return;
 		event.preventDefault();
 		navigate(href);
 	};
-	return /* @__PURE__ */ jsx("a", {
-		...finalProps,
-		onClick: handleClick,
+	return /* @__PURE__ */ jsx(Block, {
+		asChild: true,
+		paddingX: "sm",
+		paddingY: "xs",
+		radius: resolvedSlot === "pill" ? "round" : "md",
+		background: isActive && options.activeBackground ? "selected" : void 0,
+		ref,
+		class: classes(options.className, inheritedNavClass, className),
+		"data-slot": resolvedSlot,
+		...activeProps,
+		children: useRouterLink ? /* @__PURE__ */ jsx(Link, {
+			...childProps,
+			children
+		}) : /* @__PURE__ */ jsx("a", {
+			...childProps,
+			onClick: handleClick,
+			children
+		})
+	});
+}
+function Tabs(props) {
+	return renderNavSet(props, "tabs");
+}
+function Pills(props) {
+	return renderNavSet(props, "pills");
+}
+function Tab(props) {
+	return renderRoutedLink(props, "tab", { className: "tab" });
+}
+function Pill(props) {
+	return renderRoutedLink(props, "pill", {
+		activeBackground: true,
+		className: "pill"
+	});
+}
+function NavItem(props) {
+	const { asChild, active = false, children, ref, class: className, match: _match, ...rest } = props;
+	if (asChild) return /* @__PURE__ */ jsx(Block, {
+		asChild: true,
+		paddingX: "sm",
+		paddingY: "xs",
+		radius: "md",
+		background: active ? "selected" : void 0,
+		...rest,
+		ref,
+		class: className,
+		"data-active": active ? "true" : void 0,
+		"data-slot": "nav-item",
 		children
 	});
+	return /* @__PURE__ */ jsx(Block, {
+		as: "a",
+		paddingX: "sm",
+		paddingY: "xs",
+		radius: "md",
+		background: active ? "selected" : void 0,
+		...rest,
+		ref,
+		class: className,
+		"data-active": active ? "true" : void 0,
+		"data-slot": "nav-item",
+		children
+	});
+}
+function NavLink(props) {
+	return renderRoutedLink(props, "nav-item", {
+		activeBackground: true,
+		inheritSlot: true
+	});
 }
 //#endregion
-export { Nav, NavItem, NavLink };
+export { NavItem, NavLink, Pill, Pills, Tab, Tabs };
 
 //# sourceMappingURL=nav.js.map

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

@@ -1 +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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"}
+{"version":3,"file":"nav.js","names":[],"sources":["../../../src/components/nav/nav.tsx"],"sourcesContent":["import { Slot } from \"@askrjs/askr/foundations\";\nimport { currentRoute, Link, navigate } from \"@askrjs/askr/router\";\nimport { Block } from \"../block\";\nimport { classes } from \"../_internal/classes\";\nimport { mergeProps } from \"../_internal/merge-props\";\nimport { resolvePathname } from \"../_internal/pathname\";\nimport type {\n  NavItemAsChildProps,\n  NavItemProps,\n  NavLinkProps,\n  PillProps,\n  PillsAsChildProps,\n  PillsProps,\n  TabProps,\n  TabsAsChildProps,\n  TabsProps,\n} from \"./nav.types\";\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 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\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 renderNavSet(\n  props: TabsProps | TabsAsChildProps | PillsProps | PillsAsChildProps,\n  slot: \"tabs\" | \"pills\",\n): JSX.Element {\n  const className = \"class\" in props ? props.class : undefined;\n  const { asChild, children, ref, ...rest } = props;\n  const finalProps = mergeProps(rest, {\n    ref,\n    class: classes(slot, className),\n    \"data-slot\": slot,\n  });\n\n  if (asChild) {\n    return <Slot asChild {...finalProps} children={children as JSX.Element} />;\n  }\n\n  return <nav {...finalProps}>{children}</nav>;\n}\n\nfunction renderRoutedLink(\n  props: NavLinkProps | TabProps | PillProps,\n  slot: \"nav-item\" | \"tab\" | \"pill\",\n  options: { activeBackground?: boolean; className?: string; inheritSlot?: boolean } = {},\n): JSX.Element {\n  const {\n    active,\n    children,\n    href,\n    onClick,\n    ref,\n    class: className,\n    match = \"prefix\",\n    target,\n    ...rest\n  } = props as NavLinkProps & { onClick?: (event: MouseEvent) => void };\n  const inheritedSlot =\n    options.inheritSlot && typeof (rest as Record<string, unknown>)[\"data-slot\"] === \"string\"\n      ? String((rest as Record<string, unknown>)[\"data-slot\"])\n      : undefined;\n  const resolvedSlot = (inheritedSlot ?? slot) as \"nav-item\" | \"tab\" | \"pill\";\n  const inheritedNavClass =\n    slot === \"nav-item\" && resolvedSlot !== \"nav-item\" ? \"nav-item\" : undefined;\n  const { \"data-slot\": _dataSlot, ...childRest } = rest as Record<string, unknown>;\n  void _dataSlot;\n  const currentPathname = getReactiveCurrentPathname();\n  const targetPathname = resolvePathname(href);\n  const routeActive =\n    currentPathname !== null &&\n    targetPathname !== null &&\n    isActiveNavLink(currentPathname, targetPathname, match);\n  const isActive = active ?? routeActive;\n  const activeProps = isActive\n    ? {\n        \"aria-current\": \"page\" as const,\n        \"data-active\": \"true\" as const,\n      }\n    : {\n        \"data-active\": undefined,\n      };\n  const useRouterLink = targetPathname !== null && !target && typeof onClick !== \"function\";\n  const childProps = {\n    ...childRest,\n    href,\n    target,\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    <Block\n      asChild\n      paddingX=\"sm\"\n      paddingY=\"xs\"\n      radius={resolvedSlot === \"pill\" ? \"round\" : \"md\"}\n      background={isActive && options.activeBackground ? \"selected\" : undefined}\n      ref={ref}\n      class={classes(options.className, inheritedNavClass, className)}\n      data-slot={resolvedSlot}\n      {...activeProps}\n    >\n      {useRouterLink ? (\n        <Link {...childProps}>{children}</Link>\n      ) : (\n        <a {...childProps} onClick={handleClick}>\n          {children}\n        </a>\n      )}\n    </Block>\n  );\n}\n\nexport function Tabs(props: TabsProps): JSX.Element;\nexport function Tabs(props: TabsAsChildProps): JSX.Element;\nexport function Tabs(props: TabsProps | TabsAsChildProps): JSX.Element {\n  return renderNavSet(props, \"tabs\");\n}\n\nexport function Pills(props: PillsProps): JSX.Element;\nexport function Pills(props: PillsAsChildProps): JSX.Element;\nexport function Pills(props: PillsProps | PillsAsChildProps): JSX.Element {\n  return renderNavSet(props, \"pills\");\n}\n\nexport function Tab(props: TabProps): JSX.Element {\n  return renderRoutedLink(props, \"tab\", { className: \"tab\" });\n}\n\nexport function Pill(props: PillProps): JSX.Element {\n  return renderRoutedLink(props, \"pill\", { activeBackground: true, className: \"pill\" });\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    active = false,\n    children,\n    ref,\n    class: className,\n    match: _match,\n    ...rest\n  } = props as (NavItemProps | NavItemAsChildProps) & { match?: unknown };\n  void _match;\n\n  if (asChild) {\n    return (\n      <Block\n        asChild\n        paddingX=\"sm\"\n        paddingY=\"xs\"\n        radius=\"md\"\n        background={active ? \"selected\" : undefined}\n        {...rest}\n        ref={ref}\n        class={className}\n        data-active={active ? \"true\" : undefined}\n        data-slot=\"nav-item\"\n      >\n        {children}\n      </Block>\n    );\n  }\n\n  return (\n    <Block\n      as=\"a\"\n      paddingX=\"sm\"\n      paddingY=\"xs\"\n      radius=\"md\"\n      background={active ? \"selected\" : undefined}\n      {...rest}\n      ref={ref}\n      class={className}\n      data-active={active ? \"true\" : undefined}\n      data-slot=\"nav-item\"\n    >\n      {children}\n    </Block>\n  );\n}\n\nexport function NavLink(props: NavLinkProps): JSX.Element {\n  return renderRoutedLink(props, \"nav-item\", { activeBackground: true, inheritSlot: true });\n}\n"],"mappings":"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"}

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

@@ -3,40 +3,34 @@ 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 = {
+type TabsOwnProps = {
   children?: unknown;
-  orientation?: NavOrientation;
-  variant?: NavVariant;
-  as?: "nav" | "div" | "ul";
 };
-type NavNavProps = Omit<JSX.IntrinsicElements["nav"], "children" | "ref"> & NavOwnProps & {
-  as?: "nav";
+type TabsProps = Omit<JSX.IntrinsicElements["nav"], "children" | "ref"> & TabsOwnProps & {
   asChild?: false;
   ref?: Ref<HTMLElement>;
 };
-type NavDivProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref"> & NavOwnProps & {
-  as: "div";
-  asChild?: false;
-  ref?: Ref<HTMLDivElement>;
+type TabsAsChildProps = Omit<JSX.IntrinsicElements["nav"], "children" | "ref"> & TabsOwnProps & {
+  asChild: true;
+  children: JSXElement;
+  ref?: Ref<unknown>;
 };
-type NavListProps = Omit<JSX.IntrinsicElements["ul"], "children" | "ref"> & NavOwnProps & {
-  as: "ul";
+type PillsOwnProps = {
+  children?: unknown;
+};
+type PillsProps = Omit<JSX.IntrinsicElements["nav"], "children" | "ref"> & PillsOwnProps & {
   asChild?: false;
-  ref?: Ref<HTMLUListElement>;
+  ref?: Ref<HTMLElement>;
 };
-type NavAsChildProps = Omit<NavOwnProps, "as"> & {
+type PillsAsChildProps = Omit<JSX.IntrinsicElements["nav"], "children" | "ref"> & PillsOwnProps & {
   asChild: true;
   children: JSXElement;
   ref?: Ref<unknown>;
 };
-type NavProps = NavNavProps | NavDivProps | NavListProps | NavAsChildProps;
 type NavItemOwnProps = {
+  active?: boolean;
   children?: unknown;
-  variant?: NavItemVariant;
 };
 type NavItemProps = Omit<JSX.IntrinsicElements["a"], "children" | "ref"> & NavItemOwnProps & {
   asChild?: false;
@@ -51,6 +45,8 @@ type NavLinkOwnProps = NavItemOwnProps & {
   match?: NavLinkMatch;
 };
 type NavLinkProps = LinkProps & NavLinkOwnProps;
+type TabProps = LinkProps & NavLinkOwnProps;
+type PillProps = LinkProps & NavLinkOwnProps;
 //#endregion
-export { NavAsChildProps, NavDivProps, NavItemAsChildProps, NavItemProps, NavItemVariant, NavLinkProps, NavListProps, NavNavProps, NavOrientation, NavProps, NavVariant };
+export { NavItemAsChildProps, NavItemProps, NavLinkProps, PillProps, PillsAsChildProps, PillsProps, TabProps, TabsAsChildProps, TabsProps };
 //# sourceMappingURL=nav.types.d.ts.map

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

@@ -1,5 +1,4 @@
-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";
+import { NavBrandProps, NavDropdownProps, NavGroupProps, NavbarCollapseBreakpoint, NavbarProps } from "./navbar.types.js";
+import { NavBrand, NavDropdown, NavGroup, Navbar } from "./navbar.js";
+import { NavItemAsChildProps, NavItemProps, NavLinkProps } from "../nav/nav.types.js";
+import { NavItem, NavLink } from "../nav/nav.js";

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

@@ -1,45 +1,10 @@
-import { NavBrandProps, NavGroupProps, NavToggleProps, NavbarProps } from "./navbar.types.js";
+import { NavBrandProps, NavDropdownProps, NavGroupProps, 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;
+declare function NavDropdown(props: NavDropdownProps): JSX.Element;
 //#endregion
-export { NavBrand, NavGroup, NavToggle, Navbar };
+export { NavBrand, NavDropdown, NavGroup, Navbar };
 //# sourceMappingURL=navbar.d.ts.map