@askrjs/themes 0.0.3 → 0.0.4

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

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

package/dist/components/navbar/navbar.render.js

@@ -0,0 +1,26 @@
+import { Fragment, jsx, jsxs } from "@askrjs/askr/jsx-runtime";
+//#region src/components/navbar/navbar.render.tsx
+function renderNavbarCollapseContents(collapseLabel, collapseIcon, collapseIconPlacement) {
+	const icon = /* @__PURE__ */ jsx("span", {
+		"data-slot": "navbar-toggle-icon",
+		"aria-hidden": "true",
+		children: collapseIcon ?? /* @__PURE__ */ jsxs("span", {
+			class: "navbar-toggle-glyph",
+			"data-slot": "navbar-toggle-glyph",
+			children: [
+				/* @__PURE__ */ jsx("span", {}),
+				/* @__PURE__ */ jsx("span", {}),
+				/* @__PURE__ */ jsx("span", {})
+			]
+		})
+	});
+	const label = /* @__PURE__ */ jsx("span", {
+		"data-slot": "navbar-toggle-label",
+		children: collapseLabel
+	});
+	return collapseIconPlacement === "end" ? /* @__PURE__ */ jsxs(Fragment, { children: [label, icon] }) : /* @__PURE__ */ jsxs(Fragment, { children: [icon, label] });
+}
+//#endregion
+export { renderNavbarCollapseContents };
+
+//# sourceMappingURL=navbar.render.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"navbar.render.js","names":[],"sources":["../../../src/components/navbar/navbar.render.tsx"],"sourcesContent":["import type { CollapseIconPlacement } from \"../shell/shell-nav.types\";\n\nexport function renderNavbarCollapseContents(\n  collapseLabel: string,\n  collapseIcon: unknown,\n  collapseIconPlacement: CollapseIconPlacement,\n): unknown {\n  const icon = (\n    <span data-slot=\"navbar-toggle-icon\" aria-hidden=\"true\">\n      {collapseIcon ?? (\n        <span class=\"navbar-toggle-glyph\" data-slot=\"navbar-toggle-glyph\">\n          <span />\n          <span />\n          <span />\n        </span>\n      )}\n    </span>\n  );\n  const label = <span data-slot=\"navbar-toggle-label\">{collapseLabel}</span>;\n\n  return collapseIconPlacement === \"end\" ? (\n    <>\n      {label}\n      {icon}\n    </>\n  ) : (\n    <>\n      {icon}\n      {label}\n    </>\n  );\n}\n"],"mappings":";;AAEA,SAAgB,6BACd,eACA,cACA,uBACS;CACT,MAAM,OACJ,oBAAC,QAAD;EAAM,aAAU;EAAqB,eAAY;YAC9C,gBACC,qBAAC,QAAD;GAAM,OAAM;GAAsB,aAAU;aAA5C;IACE,oBAAC,QAAD,EAAQ,CAAA;IACR,oBAAC,QAAD,EAAQ,CAAA;IACR,oBAAC,QAAD,EAAQ,CAAA;IACH;;EAEJ,CAAA;CAET,MAAM,QAAQ,oBAAC,QAAD;EAAM,aAAU;YAAuB;EAAqB,CAAA;CAE1E,OAAO,0BAA0B,QAC/B,qBAAA,UAAA,EAAA,UAAA,CACG,OACA,KACA,EAAA,CAAA,GAEH,qBAAA,UAAA,EAAA,UAAA,CACG,MACA,MACA,EAAA,CAAA"}

package/dist/components/navbar/navbar.shared.js

@@ -0,0 +1,18 @@
+//#region src/components/navbar/navbar.shared.ts
+const NAVBAR_COLLAPSE_BREAKPOINTS = {
+	sm: 640,
+	md: 768,
+	lg: 1024,
+	xl: 1280
+};
+function resolveNavGroupAlign(align) {
+	return align === "start" ? void 0 : align;
+}
+function isNavbarCollapsed(collapseBelow) {
+	if (typeof window === "undefined") return false;
+	return window.innerWidth < NAVBAR_COLLAPSE_BREAKPOINTS[collapseBelow];
+}
+//#endregion
+export { NAVBAR_COLLAPSE_BREAKPOINTS, isNavbarCollapsed, resolveNavGroupAlign };
+
+//# sourceMappingURL=navbar.shared.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"navbar.shared.js","names":[],"sources":["../../../src/components/navbar/navbar.shared.ts"],"sourcesContent":["import type { CollapseBreakpoint } from \"../shell/shell-nav.types\";\nimport type { NavGroupAlign } from \"./navbar.types\";\n\nexport const NAVBAR_COLLAPSE_BREAKPOINTS: Record<CollapseBreakpoint, number> = {\n  sm: 640,\n  md: 768,\n  lg: 1024,\n  xl: 1280,\n};\n\nexport function resolveNavGroupAlign(align: NavGroupAlign | undefined): string | undefined {\n  return align === \"start\" ? undefined : align;\n}\n\nexport function isNavbarCollapsed(collapseBelow: CollapseBreakpoint): boolean {\n  if (typeof window === \"undefined\") {\n    return false;\n  }\n\n  return window.innerWidth < NAVBAR_COLLAPSE_BREAKPOINTS[collapseBelow];\n}\n"],"mappings":";AAGA,MAAa,8BAAkE;CAC7E,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,SAAgB,qBAAqB,OAAsD;CACzF,OAAO,UAAU,UAAU,KAAA,IAAY;;AAGzC,SAAgB,kBAAkB,eAA4C;CAC5E,IAAI,OAAO,WAAW,aACpB,OAAO;CAGT,OAAO,OAAO,aAAa,4BAA4B"}

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

@@ -1,26 +1,33 @@
-import type { JSXElement, Ref } from "@askrjs/askr/foundations";
-import type { LinkProps } from "@askrjs/askr/router";
-export type NavbarProps = Omit<JSX.IntrinsicElements["nav"], "children"> & {
-    children?: unknown;
+import { NavItemAsChildProps, NavItemProps, NavItemVariant, NavLinkProps } from "../nav/nav.types.js";
+import { CollapseBreakpoint, CollapseIconPlacement } from "../shell/shell-nav.types.js";
+
+//#region src/components/navbar/navbar.types.d.ts
+type NavGroupAlign = "start" | "center" | "end";
+type NavbarProps = Omit<JSX.IntrinsicElements["nav"], "children"> & {
+  children?: unknown;
+  breakpoint?: CollapseBreakpoint;
+  collapseIcon?: unknown;
+  collapseIconPlacement?: CollapseIconPlacement;
+  collapseLabel?: string;
 };
-export type NavBrandProps = Omit<JSX.IntrinsicElements["div"], "children"> & {
-    children?: unknown;
+type NavBrandProps = Omit<JSX.IntrinsicElements["div"], "children"> & {
+  children?: unknown;
 };
-export type NavGroupProps = Omit<JSX.IntrinsicElements["div"], "children"> & {
-    children?: unknown;
+type NavToggleProps = Omit<JSX.IntrinsicElements["button"], "children" | "type" | "onClick"> & {
+  children?: unknown;
+  active?: boolean;
+  icon?: unknown;
+  iconPlacement?: CollapseIconPlacement;
+  label?: string;
+  onToggle?: () => void;
+  open?: boolean;
+  panelId?: string;
 };
-export type NavItemVariant = "default" | "icon";
-export type NavItemOwnProps = {
-    children?: unknown;
-    variant?: NavItemVariant;
+type NavGroupProps = Omit<JSX.IntrinsicElements["div"], "children"> & {
+  align?: NavGroupAlign;
+  children?: unknown;
+  label?: unknown;
 };
-export type NavItemProps = Omit<JSX.IntrinsicElements["a"], "children" | "ref"> & NavItemOwnProps & {
-    asChild?: false;
-    ref?: Ref<HTMLAnchorElement>;
-};
-export type NavItemAsChildProps = Omit<JSX.IntrinsicElements["a"], "children" | "ref"> & NavItemOwnProps & {
-    asChild: true;
-    children: JSXElement;
-    ref?: Ref<unknown>;
-};
-export type NavLinkProps = LinkProps & NavItemOwnProps;
+//#endregion
+export { NavBrandProps, NavGroupProps, NavToggleProps, NavbarProps };
+//# sourceMappingURL=navbar.types.d.ts.map

package/dist/components/overlays/dropdown-content.d.ts

@@ -0,0 +1,8 @@
+import { DropdownContentAsChildProps, DropdownContentProps } from "@askrjs/ui";
+
+//#region src/components/overlays/dropdown-content.d.ts
+declare function DropdownContent$1(props: DropdownContentProps): JSX.Element | null;
+declare function DropdownContent$1(props: DropdownContentAsChildProps): JSX.Element | null;
+//#endregion
+export { DropdownContent$1 as DropdownContent };
+//# sourceMappingURL=dropdown-content.d.ts.map

package/dist/components/overlays/dropdown-content.js

@@ -0,0 +1,18 @@
+import { DropdownContent } from "@askrjs/ui";
+import { Fragment, jsx } from "@askrjs/askr/jsx-runtime";
+//#region src/components/overlays/dropdown-content.tsx
+function DropdownContentBody(props) {
+	return /* @__PURE__ */ jsx(Fragment, { children: props.render() });
+}
+function DropdownContent$1(props) {
+	if ("asChild" in props && props.asChild) return /* @__PURE__ */ jsx(DropdownContent, { ...props });
+	const { children, ...rest } = props;
+	return /* @__PURE__ */ jsx(DropdownContent, {
+		...rest,
+		children: /* @__PURE__ */ jsx(DropdownContentBody, { render: () => children })
+	});
+}
+//#endregion
+export { DropdownContent$1 as DropdownContent };
+
+//# sourceMappingURL=dropdown-content.js.map

package/dist/components/overlays/dropdown-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-content.js","names":["DropdownContent","UiDropdownContent"],"sources":["../../../src/components/overlays/dropdown-content.tsx"],"sourcesContent":["import { DropdownContent as UiDropdownContent } from \"@askrjs/ui\";\nimport type { DropdownContentAsChildProps, DropdownContentProps } from \"@askrjs/ui\";\n\ntype DropdownContentBodyProps = {\n  render: () => unknown;\n};\n\nfunction DropdownContentBody(props: DropdownContentBodyProps): JSX.Element {\n  return <>{props.render()}</>;\n}\n\nexport function DropdownContent(props: DropdownContentProps): JSX.Element | null;\nexport function DropdownContent(props: DropdownContentAsChildProps): JSX.Element | null;\nexport function DropdownContent(\n  props: DropdownContentProps | DropdownContentAsChildProps,\n): JSX.Element | null {\n  if (\"asChild\" in props && props.asChild) {\n    return <UiDropdownContent {...props} />;\n  }\n\n  const { children, ...rest } = props as DropdownContentProps;\n\n  return (\n    <UiDropdownContent {...rest}>\n      <DropdownContentBody render={() => children} />\n    </UiDropdownContent>\n  );\n}\n"],"mappings":";;;AAOA,SAAS,oBAAoB,OAA8C;CACzE,OAAO,oBAAA,UAAA,EAAA,UAAG,MAAM,QAAQ,EAAI,CAAA;;AAK9B,SAAgBA,kBACd,OACoB;CACpB,IAAI,aAAa,SAAS,MAAM,SAC9B,OAAO,oBAACC,iBAAD,EAAmB,GAAI,OAAS,CAAA;CAGzC,MAAM,EAAE,UAAU,GAAG,SAAS;CAE9B,OACE,oBAACA,iBAAD;EAAmB,GAAI;YACrB,oBAAC,qBAAD,EAAqB,cAAc,UAAY,CAAA;EAC7B,CAAA"}

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

@@ -0,0 +1,2 @@
+import { PaginationEllipsisProps, PaginationItemAsChildProps, PaginationItemProps, PaginationLinkProps, PaginationProps } from "./pagination.types.js";
+import { Pagination, PaginationEllipsis, PaginationItem, PaginationLink } from "./pagination.js";

package/dist/components/pagination/pagination.d.ts

@@ -0,0 +1,11 @@
+import { PaginationEllipsisProps, PaginationItemAsChildProps, PaginationItemProps, PaginationLinkProps, PaginationProps } from "./pagination.types.js";
+
+//#region src/components/pagination/pagination.d.ts
+declare function Pagination(props: PaginationProps): JSX.Element;
+declare function PaginationItem(props: PaginationItemProps): JSX.Element;
+declare function PaginationItem(props: PaginationItemAsChildProps): JSX.Element;
+declare function PaginationLink(props: PaginationLinkProps): JSX.Element;
+declare function PaginationEllipsis(props: PaginationEllipsisProps): JSX.Element;
+//#endregion
+export { Pagination, PaginationEllipsis, PaginationItem, PaginationLink };
+//# sourceMappingURL=pagination.d.ts.map

package/dist/components/pagination/pagination.js

@@ -0,0 +1,95 @@
+import { classes } from "../_internal/classes.js";
+import { resolvePathname } from "../_internal/pathname.js";
+import { jsx } from "@askrjs/askr/jsx-runtime";
+import { Slot } from "@askrjs/askr/foundations";
+import { mergeProps } from "@askrjs/askr/foundations/utilities";
+import { navigate } from "@askrjs/askr/router";
+//#region src/components/pagination/pagination.tsx
+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 Pagination(props) {
+	const { children, class: className, label = "Pagination", ref, ...rest } = props;
+	return /* @__PURE__ */ jsx("nav", {
+		...rest,
+		ref,
+		class: classes("pagination", className),
+		"aria-label": label,
+		"data-slot": "pagination",
+		children: /* @__PURE__ */ jsx("ul", {
+			class: "pagination-list",
+			"data-slot": "pagination-list",
+			children
+		})
+	});
+}
+function PaginationItem(props) {
+	const { active = false, asChild, children, disabled = false, ref, class: className, ...rest } = props;
+	const finalProps = mergeProps(rest, {
+		class: classes("page-item", active ? "active" : void 0, disabled ? "disabled" : void 0, className),
+		ref,
+		"aria-current": active ? "page" : void 0,
+		"aria-disabled": disabled ? "true" : void 0,
+		"data-active": active ? "true" : void 0,
+		"data-disabled": disabled ? "true" : void 0,
+		"data-slot": "pagination-item"
+	});
+	if (asChild) return /* @__PURE__ */ jsx(Slot, {
+		asChild: true,
+		...finalProps,
+		children
+	});
+	return /* @__PURE__ */ jsx("li", {
+		...finalProps,
+		children
+	});
+}
+function PaginationLink(props) {
+	const { active = false, children, class: className, disabled = false, href, onClick, ref, target, ...rest } = props;
+	const hrefValue = href;
+	const targetValue = target;
+	const targetPathname = resolvePathname(hrefValue);
+	const isActive = active;
+	const linkProps = mergeProps(rest, {
+		href,
+		target: targetValue,
+		ref,
+		class: classes("page-link", active ? "active" : void 0, disabled ? "disabled" : void 0, className),
+		"aria-current": isActive ? "page" : void 0,
+		"aria-disabled": disabled ? "true" : void 0,
+		"data-active": isActive ? "true" : void 0,
+		"data-disabled": disabled ? "true" : void 0,
+		"data-slot": "pagination-link",
+		tabIndex: disabled ? -1 : void 0
+	});
+	const handleClick = (event) => {
+		onClick?.(event);
+		if (disabled || !shouldHandleClientNavigation(event, targetValue, targetPathname)) {
+			if (disabled) event.preventDefault();
+			return;
+		}
+		event.preventDefault();
+		navigate(hrefValue);
+	};
+	return /* @__PURE__ */ jsx("a", {
+		...linkProps,
+		onClick: handleClick,
+		children
+	});
+}
+function PaginationEllipsis(props) {
+	const { children, class: className, ref, ...rest } = props;
+	return /* @__PURE__ */ jsx("span", {
+		...rest,
+		ref,
+		class: classes("pagination-ellipsis", className),
+		"aria-hidden": "true",
+		"data-slot": "pagination-ellipsis",
+		children: children ?? "..."
+	});
+}
+//#endregion
+export { Pagination, PaginationEllipsis, PaginationItem, PaginationLink };
+
+//# sourceMappingURL=pagination.js.map

package/dist/components/pagination/pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.js","names":[],"sources":["../../../src/components/pagination/pagination.tsx"],"sourcesContent":["import { navigate } from \"@askrjs/askr/router\";\nimport { Slot } from \"@askrjs/askr/foundations\";\nimport { mergeProps } from \"@askrjs/askr/foundations/utilities\";\nimport { classes } from \"../_internal/classes\";\nimport { resolvePathname } from \"../_internal/pathname\";\nimport type {\n  PaginationEllipsisProps,\n  PaginationItemAsChildProps,\n  PaginationItemProps,\n  PaginationLinkProps,\n  PaginationProps,\n} from \"./pagination.types\";\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\nexport function Pagination(props: PaginationProps): JSX.Element {\n  const { children, class: className, label = \"Pagination\", ref, ...rest } = props;\n\n  return (\n    <nav\n      {...rest}\n      ref={ref}\n      class={classes(\"pagination\", className)}\n      aria-label={label}\n      data-slot=\"pagination\"\n    >\n      <ul class=\"pagination-list\" data-slot=\"pagination-list\">\n        {children}\n      </ul>\n    </nav>\n  );\n}\n\nexport function PaginationItem(props: PaginationItemProps): JSX.Element;\nexport function PaginationItem(props: PaginationItemAsChildProps): JSX.Element;\nexport function PaginationItem(\n  props: PaginationItemProps | PaginationItemAsChildProps,\n): JSX.Element {\n  const {\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      \"page-item\",\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-active\": active ? \"true\" : undefined,\n    \"data-disabled\": disabled ? \"true\" : undefined,\n    \"data-slot\": \"pagination-item\",\n  });\n\n  if (asChild) {\n    return <Slot asChild {...finalProps} children={children} />;\n  }\n\n  return <li {...finalProps}>{children}</li>;\n}\n\nexport function PaginationLink(props: PaginationLinkProps): JSX.Element {\n  const {\n    active = false,\n    children,\n    class: className,\n    disabled = false,\n    href,\n    onClick,\n    ref,\n    target,\n    ...rest\n  } = props as PaginationLinkProps & { onClick?: (event: MouseEvent) => void };\n  const hrefValue = href as string;\n  const targetValue = target as string | undefined;\n  const targetPathname = resolvePathname(hrefValue);\n  const isActive = active;\n\n  const linkProps = mergeProps(rest, {\n    href,\n    target: targetValue,\n    ref,\n    class: classes(\n      \"page-link\",\n      active ? \"active\" : undefined,\n      disabled ? \"disabled\" : undefined,\n      className,\n    ),\n    \"aria-current\": isActive ? \"page\" : undefined,\n    \"aria-disabled\": disabled ? \"true\" : undefined,\n    \"data-active\": isActive ? \"true\" : undefined,\n    \"data-disabled\": disabled ? \"true\" : undefined,\n    \"data-slot\": \"pagination-link\",\n    tabIndex: disabled ? -1 : undefined,\n  });\n\n  const handleClick = (event: MouseEvent) => {\n    onClick?.(event);\n\n    if (disabled || !shouldHandleClientNavigation(event, targetValue, targetPathname)) {\n      if (disabled) {\n        event.preventDefault();\n      }\n\n      return;\n    }\n\n    event.preventDefault();\n    navigate(hrefValue);\n  };\n\n  return (\n    <a {...linkProps} onClick={handleClick}>\n      {children}\n    </a>\n  );\n}\n\nexport function PaginationEllipsis(props: PaginationEllipsisProps): JSX.Element {\n  const { children, class: className, ref, ...rest } = props;\n\n  return (\n    <span\n      {...rest}\n      ref={ref}\n      class={classes(\"pagination-ellipsis\", className)}\n      aria-hidden=\"true\"\n      data-slot=\"pagination-ellipsis\"\n    >\n      {children ?? \"...\"}\n    </span>\n  );\n}\n"],"mappings":";;;;;;;AAaA,SAAS,6BACP,OACA,QACA,gBACS;CACT,IAAI,mBAAmB,QAAQ,QAC7B,OAAO;CAGT,OACE,CAAC,MAAM,qBACN,MAAM,UAAU,OAAO,KACxB,CAAC,MAAM,UACP,CAAC,MAAM,WACP,CAAC,MAAM,WACP,CAAC,MAAM;;AAIX,SAAgB,WAAW,OAAqC;CAC9D,MAAM,EAAE,UAAU,OAAO,WAAW,QAAQ,cAAc,KAAK,GAAG,SAAS;CAE3E,OACE,oBAAC,OAAD;EACE,GAAI;EACC;EACL,OAAO,QAAQ,cAAc,UAAU;EACvC,cAAY;EACZ,aAAU;YAEV,oBAAC,MAAD;GAAI,OAAM;GAAkB,aAAU;GACnC;GACE,CAAA;EACD,CAAA;;AAMV,SAAgB,eACd,OACa;CACb,MAAM,EACJ,SAAS,OACT,SACA,UACA,WAAW,OACX,KACA,OAAO,WACP,GAAG,SACD;CACJ,MAAM,aAAa,WAAW,MAAM;EAClC,OAAO,QACL,aACA,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,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;;AAG5C,SAAgB,eAAe,OAAyC;CACtE,MAAM,EACJ,SAAS,OACT,UACA,OAAO,WACP,WAAW,OACX,MACA,SACA,KACA,QACA,GAAG,SACD;CACJ,MAAM,YAAY;CAClB,MAAM,cAAc;CACpB,MAAM,iBAAiB,gBAAgB,UAAU;CACjD,MAAM,WAAW;CAEjB,MAAM,YAAY,WAAW,MAAM;EACjC;EACA,QAAQ;EACR;EACA,OAAO,QACL,aACA,SAAS,WAAW,KAAA,GACpB,WAAW,aAAa,KAAA,GACxB,UACD;EACD,gBAAgB,WAAW,SAAS,KAAA;EACpC,iBAAiB,WAAW,SAAS,KAAA;EACrC,eAAe,WAAW,SAAS,KAAA;EACnC,iBAAiB,WAAW,SAAS,KAAA;EACrC,aAAa;EACb,UAAU,WAAW,KAAK,KAAA;EAC3B,CAAC;CAEF,MAAM,eAAe,UAAsB;EACzC,UAAU,MAAM;EAEhB,IAAI,YAAY,CAAC,6BAA6B,OAAO,aAAa,eAAe,EAAE;GACjF,IAAI,UACF,MAAM,gBAAgB;GAGxB;;EAGF,MAAM,gBAAgB;EACtB,SAAS,UAAU;;CAGrB,OACE,oBAAC,KAAD;EAAG,GAAI;EAAW,SAAS;EACxB;EACC,CAAA;;AAIR,SAAgB,mBAAmB,OAA6C;CAC9E,MAAM,EAAE,UAAU,OAAO,WAAW,KAAK,GAAG,SAAS;CAErD,OACE,oBAAC,QAAD;EACE,GAAI;EACC;EACL,OAAO,QAAQ,uBAAuB,UAAU;EAChD,eAAY;EACZ,aAAU;YAET,YAAY;EACR,CAAA"}

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

@@ -0,0 +1,40 @@
+import { JSXElement } from "@askrjs/askr/foundations";
+import { Ref } from "@askrjs/askr/foundations/utilities";
+
+//#region src/components/pagination/pagination.types.d.ts
+type NavProps = Omit<JSX.IntrinsicElements["nav"], "children" | "ref" | "aria-label">;
+type LiProps = Omit<JSX.IntrinsicElements["li"], "children" | "ref">;
+type AnchorProps = Omit<JSX.IntrinsicElements["a"], "children" | "ref">;
+type PaginationProps = NavProps & {
+  children?: unknown;
+  label?: string;
+  ref?: Ref<HTMLElement>;
+};
+type PaginationItemProps = LiProps & {
+  active?: boolean;
+  asChild?: false;
+  children?: unknown;
+  disabled?: boolean;
+  ref?: Ref<HTMLLIElement>;
+};
+type PaginationItemAsChildProps = LiProps & {
+  active?: boolean;
+  asChild: true;
+  children: JSXElement;
+  disabled?: boolean;
+  ref?: Ref<unknown>;
+};
+type PaginationLinkProps = AnchorProps & {
+  active?: boolean;
+  children?: unknown;
+  disabled?: boolean;
+  href: string;
+  ref?: Ref<HTMLAnchorElement>;
+};
+type PaginationEllipsisProps = Omit<JSX.IntrinsicElements["span"], "children" | "ref"> & {
+  children?: unknown;
+  ref?: Ref<HTMLSpanElement>;
+};
+//#endregion
+export { PaginationEllipsisProps, PaginationItemAsChildProps, PaginationItemProps, PaginationLinkProps, PaginationProps };
+//# sourceMappingURL=pagination.types.d.ts.map

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

@@ -1,3 +1,3 @@
-export { Section } from "./section";
-export { SECTION_A11Y_CONTRACT, type SectionA11yContract } from "./section.a11y";
-export type { SectionProps, SectionOwnProps, SectionElementProps, SectionAsChildProps, } from "./section.types";
+import { SectionAsChildProps, SectionElementProps, SectionOwnProps, SectionProps } from "./section.types.js";
+import { Section } from "./section.js";
+import { SECTION_A11Y_CONTRACT, SectionA11yContract } from "./section.a11y.js";

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

@@ -1,11 +1,15 @@
-export declare const SECTION_A11Y_CONTRACT: {
-    readonly DATA_ATTRIBUTES: {
-        readonly slot: "data-slot";
-        readonly layout: "data-ak-layout";
-        readonly size: "data-size";
-    };
-    readonly SLOT_VALUES: {
-        readonly root: "section";
-    };
+//#region src/components/section/section.a11y.d.ts
+declare const SECTION_A11Y_CONTRACT: {
+  readonly DATA_ATTRIBUTES: {
+    readonly slot: "data-slot";
+    readonly layout: "data-ak-layout";
+    readonly size: "data-size";
+  };
+  readonly SLOT_VALUES: {
+    readonly root: "section";
+  };
 };
-export type SectionA11yContract = typeof SECTION_A11Y_CONTRACT;
+type SectionA11yContract = typeof SECTION_A11Y_CONTRACT;
+//#endregion
+export { SECTION_A11Y_CONTRACT, SectionA11yContract };
+//# sourceMappingURL=section.a11y.d.ts.map

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

@@ -1,3 +1,8 @@
-import type { SectionAsChildProps, SectionElementProps } from "./section.types";
-export declare function Section(props: SectionElementProps): JSX.Element;
-export declare function Section(props: SectionAsChildProps): JSX.Element;
+import { SectionAsChildProps, SectionElementProps } from "./section.types.js";
+
+//#region src/components/section/section.d.ts
+declare function Section(props: SectionElementProps): JSX.Element;
+declare function Section(props: SectionAsChildProps): JSX.Element;
+//#endregion
+export { Section };
+//# sourceMappingURL=section.d.ts.map

package/dist/{section → components/section}/section.js

@@ -1,6 +1,6 @@
 import { mergeProps } from "../_internal/merge-props.js";
 import { serializeResponsiveValueIf } from "../_internal/layout.js";
-import { applyBoxLayoutStyles, splitBoxLayoutProps, withBoxLayoutStyle } from "../_internal/box-layout.js";
+import { applyBoxLayoutStyles, splitBoxLayoutProps, withBoxLayoutClass } from "../_internal/box-layout.js";
 import { jsx } from "@askrjs/askr/jsx-runtime";
 import { Slot } from "@askrjs/askr/foundations";
 //#region src/components/section/section.tsx
@@ -17,12 +17,13 @@ function Section(props) {
 	const { boxProps, rest: passthroughProps } = splitBoxLayoutProps(rest);
 	const layoutStyle = {};
 	applyBoxLayoutStyles(layoutStyle, boxProps);
+	const layoutClass = withBoxLayoutClass(layoutStyle, userStyle);
 	const finalProps = mergeProps(passthroughProps, {
 		ref,
 		"data-slot": "section",
 		"data-ak-layout": "true",
 		"data-size": serializeResponsiveValueIf(size, isSectionSizeToken),
-		style: withBoxLayoutStyle(layoutStyle, userStyle)
+		...layoutClass ? { class: layoutClass } : {}
 	});
 	if (asChild) return /* @__PURE__ */ jsx(Slot, {
 		asChild: true,

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

@@ -0,0 +1 @@
+{"version":3,"file":"section.js","names":[],"sources":["../../../src/components/section/section.tsx"],"sourcesContent":["import { Slot } from \"@askrjs/askr/foundations\";\nimport { mergeProps } from \"../_internal/merge-props\";\nimport {\n  applyBoxLayoutStyles,\n  splitBoxLayoutProps,\n  withBoxLayoutClass,\n} from \"../_internal/box-layout\";\nimport { serializeResponsiveValueIf } from \"../_internal/layout\";\nimport type { SectionAsChildProps, SectionElementProps } from \"./section.types\";\n\nfunction isSectionSizeToken(value: unknown): value is string {\n  return typeof value === \"string\" && [\"1\", \"2\", \"3\", \"4\"].includes(value.trim());\n}\n\nexport function Section(props: SectionElementProps): JSX.Element;\nexport function Section(props: SectionAsChildProps): JSX.Element;\nexport function Section(props: SectionElementProps | SectionAsChildProps) {\n  const { asChild, children, size = \"3\", ref, style: userStyle, ...rest } = props;\n\n  const { boxProps, rest: passthroughProps } = splitBoxLayoutProps(rest);\n  const layoutStyle: Record<string, string | number> = {};\n  applyBoxLayoutStyles(layoutStyle, boxProps);\n  const layoutClass = withBoxLayoutClass(layoutStyle, userStyle);\n\n  const finalProps = mergeProps(passthroughProps, {\n    ref,\n    \"data-slot\": \"section\",\n    \"data-ak-layout\": \"true\",\n    \"data-size\": serializeResponsiveValueIf(size, isSectionSizeToken),\n    ...(layoutClass ? { class: layoutClass } : {}),\n  });\n\n  if (asChild) {\n    return <Slot asChild {...finalProps} children={children} />;\n  }\n\n  return <section {...finalProps}>{children}</section>;\n}\n"],"mappings":";;;;;;AAUA,SAAS,mBAAmB,OAAiC;CAC3D,OAAO,OAAO,UAAU,YAAY;EAAC;EAAK;EAAK;EAAK;EAAI,CAAC,SAAS,MAAM,MAAM,CAAC;;AAKjF,SAAgB,QAAQ,OAAkD;CACxE,MAAM,EAAE,SAAS,UAAU,OAAO,KAAK,KAAK,OAAO,WAAW,GAAG,SAAS;CAE1E,MAAM,EAAE,UAAU,MAAM,qBAAqB,oBAAoB,KAAK;CACtE,MAAM,cAA+C,EAAE;CACvD,qBAAqB,aAAa,SAAS;CAC3C,MAAM,cAAc,mBAAmB,aAAa,UAAU;CAE9D,MAAM,aAAa,WAAW,kBAAkB;EAC9C;EACA,aAAa;EACb,kBAAkB;EAClB,aAAa,2BAA2B,MAAM,mBAAmB;EACjE,GAAI,cAAc,EAAE,OAAO,aAAa,GAAG,EAAE;EAC9C,CAAC;CAEF,IAAI,SACF,OAAO,oBAAC,MAAD;EAAM,SAAA;EAAQ,GAAI;EAAsB;EAAY,CAAA;CAG7D,OAAO,oBAAC,WAAD;EAAS,GAAI;EAAa;EAAmB,CAAA"}

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

@@ -1,17 +1,23 @@
-import type { JSXElement, Ref } from "@askrjs/askr/foundations";
-import type { BoxLayoutOwnProps, LayoutResponsive } from "../box/box.types";
-export type SectionOwnProps = BoxLayoutOwnProps & {
-    size?: LayoutResponsive<"1" | "2" | "3" | "4">;
-    children?: unknown;
+import { BoxLayoutOwnProps, LayoutResponsive } from "../box/box.types.js";
+import { JSXElement } from "@askrjs/askr/foundations";
+import { Ref } from "@askrjs/askr/foundations/utilities";
+
+//#region src/components/section/section.types.d.ts
+type SectionOwnProps = BoxLayoutOwnProps & {
+  size?: LayoutResponsive<"1" | "2" | "3" | "4">;
+  children?: unknown;
 };
-export type SectionElementProps = Omit<JSX.IntrinsicElements["section"], "children" | "ref"> & SectionOwnProps & {
-    asChild?: false;
-    ref?: Ref<HTMLElement>;
+type SectionElementProps = Omit<JSX.IntrinsicElements["section"], "children" | "ref"> & SectionOwnProps & {
+  asChild?: false;
+  ref?: Ref<HTMLElement>;
 };
-export type SectionAsChildProps = SectionOwnProps & {
-    asChild: true;
-    children: JSXElement;
-    ref?: Ref<unknown>;
-    style?: JSX.IntrinsicElements["section"]["style"];
+type SectionAsChildProps = SectionOwnProps & {
+  asChild: true;
+  children: JSXElement;
+  ref?: Ref<unknown>;
+  style?: JSX.IntrinsicElements["section"]["style"];
 };
-export type SectionProps = SectionElementProps | SectionAsChildProps;
+type SectionProps = SectionElementProps | SectionAsChildProps;
+//#endregion
+export { SectionAsChildProps, SectionElementProps, SectionOwnProps, SectionProps };
+//# sourceMappingURL=section.types.d.ts.map

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

@@ -1,3 +1,3 @@
-export { Separator, Separator as Divider } from "./separator";
-export { SEPARATOR_A11Y_CONTRACT, type SeparatorA11yContract } from "./separator.a11y";
-export type { SeparatorProps, SeparatorProps as DividerProps, SeparatorOwnProps, SeparatorOwnProps as DividerOwnProps, SeparatorNativeProps, SeparatorNativeProps as DividerNativeProps, SeparatorAsChildProps, SeparatorAsChildProps as DividerAsChildProps, } from "./separator.types";
+import { SeparatorAsChildProps, SeparatorNativeProps, SeparatorOwnProps, SeparatorProps } from "./separator.types.js";
+import { Separator } from "./separator.js";
+import { SEPARATOR_A11Y_CONTRACT, SeparatorA11yContract } from "./separator.a11y.js";

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

@@ -1,13 +1,17 @@
+//#region src/components/separator/separator.a11y.d.ts
 /**
  * WAI-ARIA Separator Pattern.
  */
-export declare const SEPARATOR_A11Y_CONTRACT: {
-    readonly ROLE: "separator";
-    readonly DECORATIVE_ROLE: "presentation";
-    readonly ORIENTATION_ATTRIBUTE: "aria-orientation";
-    readonly DATA_ATTRIBUTES: {
-        readonly orientation: "data-orientation";
-    };
-    readonly DEFAULT_ORIENTATION: "horizontal";
+declare const SEPARATOR_A11Y_CONTRACT: {
+  readonly ROLE: "separator";
+  readonly DECORATIVE_ROLE: "presentation";
+  readonly ORIENTATION_ATTRIBUTE: "aria-orientation";
+  readonly DATA_ATTRIBUTES: {
+    readonly orientation: "data-orientation";
+  };
+  readonly DEFAULT_ORIENTATION: "horizontal";
 };
-export type SeparatorA11yContract = typeof SEPARATOR_A11Y_CONTRACT;
+type SeparatorA11yContract = typeof SEPARATOR_A11Y_CONTRACT;
+//#endregion
+export { SEPARATOR_A11Y_CONTRACT, SeparatorA11yContract };
+//# sourceMappingURL=separator.a11y.d.ts.map

package/dist/components/separator/separator.a11y.js

@@ -0,0 +1,15 @@
+//#region src/components/separator/separator.a11y.ts
+/**
+* WAI-ARIA Separator Pattern.
+*/
+const SEPARATOR_A11Y_CONTRACT = {
+	ROLE: "separator",
+	DECORATIVE_ROLE: "presentation",
+	ORIENTATION_ATTRIBUTE: "aria-orientation",
+	DATA_ATTRIBUTES: { orientation: "data-orientation" },
+	DEFAULT_ORIENTATION: "horizontal"
+};
+//#endregion
+export { SEPARATOR_A11Y_CONTRACT };
+
+//# sourceMappingURL=separator.a11y.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"separator.a11y.js","names":[],"sources":["../../../src/components/separator/separator.a11y.ts"],"sourcesContent":["/**\n * WAI-ARIA Separator Pattern.\n */\n\nexport const SEPARATOR_A11Y_CONTRACT = {\n  ROLE: \"separator\" as const,\n  DECORATIVE_ROLE: \"presentation\" as const,\n  ORIENTATION_ATTRIBUTE: \"aria-orientation\" as const,\n  DATA_ATTRIBUTES: {\n    orientation: \"data-orientation\" as const,\n  },\n  DEFAULT_ORIENTATION: \"horizontal\" as const,\n} as const;\n\nexport type SeparatorA11yContract = typeof SEPARATOR_A11Y_CONTRACT;\n"],"mappings":";;;;AAIA,MAAa,0BAA0B;CACrC,MAAM;CACN,iBAAiB;CACjB,uBAAuB;CACvB,iBAAiB,EACf,aAAa,oBACd;CACD,qBAAqB;CACtB"}

package/dist/components/separator/separator.d.ts

@@ -1,3 +1,8 @@
-import type { SeparatorAsChildProps, SeparatorNativeProps } from "./separator.types";
-export declare function Separator(props: SeparatorNativeProps): JSX.Element;
-export declare function Separator(props: SeparatorAsChildProps): JSX.Element;
+import { SeparatorAsChildProps, SeparatorNativeProps } from "./separator.types.js";
+
+//#region src/components/separator/separator.d.ts
+declare function Separator(props: SeparatorNativeProps): JSX.Element;
+declare function Separator(props: SeparatorAsChildProps): JSX.Element;
+//#endregion
+export { Separator };
+//# sourceMappingURL=separator.d.ts.map

package/dist/components/separator/separator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"separator.js","names":[],"sources":["../../../src/components/separator/separator.tsx"],"sourcesContent":["import { Slot } from \"@askrjs/askr/foundations\";\nimport { mergeProps } from \"../_internal/merge-props\";\nimport type { SeparatorAsChildProps, SeparatorNativeProps } from \"./separator.types\";\n\nexport function Separator(props: SeparatorNativeProps): JSX.Element;\nexport function Separator(props: SeparatorAsChildProps): JSX.Element;\nexport function Separator(props: SeparatorNativeProps | SeparatorAsChildProps) {\n  const { asChild, children, decorative = false, orientation = \"horizontal\", ref, ...rest } = props;\n\n  const finalProps = mergeProps(rest, {\n    ref,\n    \"data-slot\": \"separator\",\n    \"data-orientation\": orientation,\n    role: decorative ? \"presentation\" : \"separator\",\n    \"aria-orientation\": decorative ? undefined : orientation,\n  });\n\n  if (asChild) {\n    return <Slot asChild {...finalProps} children={children} />;\n  }\n\n  return <div {...finalProps}>{children}</div>;\n}\n"],"mappings":";;;;AAMA,SAAgB,UAAU,OAAqD;CAC7E,MAAM,EAAE,SAAS,UAAU,aAAa,OAAO,cAAc,cAAc,KAAK,GAAG,SAAS;CAE5F,MAAM,aAAa,WAAW,MAAM;EAClC;EACA,aAAa;EACb,oBAAoB;EACpB,MAAM,aAAa,iBAAiB;EACpC,oBAAoB,aAAa,KAAA,IAAY;EAC9C,CAAC;CAEF,IAAI,SACF,OAAO,oBAAC,MAAD;EAAM,SAAA;EAAQ,GAAI;EAAsB;EAAY,CAAA;CAG7D,OAAO,oBAAC,OAAD;EAAK,GAAI;EAAa;EAAe,CAAA"}

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

@@ -1,16 +1,22 @@
-import type { JSXElement, Ref } from "@askrjs/askr/foundations";
-export type SeparatorOwnProps = {
-    decorative?: boolean;
-    orientation?: "horizontal" | "vertical";
-    children?: unknown;
+import { JSXElement } from "@askrjs/askr/foundations";
+import { Ref } from "@askrjs/askr/foundations/utilities";
+
+//#region src/components/separator/separator.types.d.ts
+type SeparatorOwnProps = {
+  decorative?: boolean;
+  orientation?: "horizontal" | "vertical";
+  children?: unknown;
 };
-export type SeparatorNativeProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref"> & SeparatorOwnProps & {
-    asChild?: false;
-    ref?: Ref<HTMLDivElement>;
+type SeparatorNativeProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref"> & SeparatorOwnProps & {
+  asChild?: false;
+  ref?: Ref<HTMLDivElement>;
 };
-export type SeparatorAsChildProps = SeparatorOwnProps & {
-    asChild: true;
-    children: JSXElement;
-    ref?: Ref<unknown>;
+type SeparatorAsChildProps = SeparatorOwnProps & {
+  asChild: true;
+  children: JSXElement;
+  ref?: Ref<unknown>;
 };
-export type SeparatorProps = SeparatorNativeProps | SeparatorAsChildProps;
+type SeparatorProps = SeparatorNativeProps | SeparatorAsChildProps;
+//#endregion
+export { SeparatorAsChildProps, SeparatorNativeProps, SeparatorOwnProps, SeparatorProps };
+//# sourceMappingURL=separator.types.d.ts.map

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

@@ -0,0 +1,3 @@
+import { ShellAsChildProps, ShellDivProps, ShellMainAsChildProps, ShellMainDivProps, ShellMainMainProps, ShellMainProps, ShellNavAsChildProps, ShellNavDivProps, ShellNavProps, ShellOwnProps, ShellProps, ShellVariant } from "./shell.types.js";
+import { Shell, ShellMain, ShellNav } from "./shell.js";
+import { SHELL_A11Y_CONTRACT, ShellA11yContract } from "./shell.a11y.js";

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

@@ -0,0 +1,7 @@
+//#region src/components/shell/shell-nav.types.d.ts
+type CollapseBreakpoint = "sm" | "md" | "lg" | "xl";
+type CollapseIconPlacement = "start" | "end";
+type Collapsible = "none" | "icon";
+//#endregion
+export { CollapseBreakpoint, CollapseIconPlacement, Collapsible };
+//# sourceMappingURL=shell-nav.types.d.ts.map