@askrjs/themes 0.0.9 → 0.0.10

package/src/components/navbar/navbar.tsx

@@ -1,303 +1,141 @@
-import { state } from "@askrjs/askr";
+import { Dropdown, DropdownTrigger } from "@askrjs/ui";
+import { Block } from "../block";
 import { classes } from "../_internal/classes";
 import { isJsxElement, toChildArray } from "../_internal/jsx";
-import { mergeProps } from "../_internal/merge-props";
-import {
-  renderKeyedShellChildren,
-  ShellPanelWatcher,
-  ShellResponsiveWatcher,
-} from "../shell/shell-responsive";
-import { renderNavbarCollapseContents } from "./navbar.render";
-import { NavbarPanel } from "./navbar-panel";
-import { NavbarResponsiveContext } from "./navbar.context";
-import { isNavbarCollapsed, resolveNavGroupAlign } from "./navbar.shared";
-import type { NavBrandProps, NavGroupProps, NavToggleProps, NavbarProps } from "./navbar.types";
+import { DropdownContent } from "../overlays/dropdown-content";
+import type { NavBrandProps, NavDropdownProps, NavGroupProps, NavbarProps } from "./navbar.types";
 
-type NavbarChildren = {
-  brand?: unknown;
-  panelItems: unknown[];
-};
+const ASKR_FRAGMENT = Symbol.for("askr.fragment");
 
-function splitNavbarChildren(children: unknown[]): NavbarChildren {
-  let brand: unknown;
-  let hasBrand = false;
-  let panelItems: unknown[] | undefined;
-
-  for (let index = 0; index < children.length; index += 1) {
-    const child = children[index];
-
-    if (isJsxElement(child) && child.type === NavBrand) {
-      if (!hasBrand) {
-        brand = child;
-        hasBrand = true;
-      }
-
-      panelItems ??= children.slice(0, index);
-      continue;
+function flattenNavbarChildren(children: unknown): unknown[] {
+  return toChildArray(children).flatMap((child) => {
+    if (isJsxElement(child) && child.type === ASKR_FRAGMENT) {
+      return flattenNavbarChildren(child.props?.children);
     }
 
-    panelItems?.push(child);
-  }
-
-  return {
-    brand: hasBrand ? brand : undefined,
-    panelItems: panelItems ?? children,
-  };
+    return [child];
+  });
 }
 
-/**
- * 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>
- */
-export function Navbar(props: NavbarProps): JSX.Element {
-  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 navbarChildren = splitNavbarChildren(responsiveChildren);
-  const desktopChildren = renderKeyedShellChildren(responsiveChildren, "navbar-desktop");
-  const panelChildren = renderKeyedShellChildren(navbarChildren.panelItems, "navbar-panel");
-  // Extract brand to display in mobile panel header
-  const responsiveCollapsedState =
-    breakpoint !== undefined ? state(isNavbarCollapsed(breakpoint)) : undefined;
-  const mobileMenuState = state(false);
-  const mobileMenuOpen = mobileMenuState();
-  const panelId = typeof id === "string" ? `${id}-panel` : undefined;
-  const responsiveCollapsed = breakpoint !== undefined ? responsiveCollapsedState?.() : false;
-  const panelOpen = Boolean(responsiveCollapsed && mobileMenuOpen);
-  const closePanel = () => mobileMenuState.set(false);
-  const closePanelOnNavActivation = (event: MouseEvent) => {
-    const target = event.target;
+function isNavBrandChild(child: unknown): boolean {
+  return (
+    isJsxElement(child) && (child.type === NavBrand || child.props?.["data-slot"] === "nav-brand")
+  );
+}
 
-    if (!(target instanceof Element)) {
-      return;
+function hasRenderableChildren(children: readonly unknown[]): boolean {
+  return children.some((child) => {
+    if (Array.isArray(child)) {
+      return hasRenderableChildren(child);
     }
 
-    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 !== undefined,
-    collapseLabel: () => effectiveCollapseLabel,
-    closePanel,
-    panelId: () => panelId,
-    panelOpen: () => Boolean(responsiveCollapsedState?.() && mobileMenuOpen),
-    togglePanel,
-  };
-  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 child !== undefined && child !== null && typeof child !== "boolean";
   });
-
-  return (
-    <NavbarResponsiveContext.Scope value={contextValue}>
-      <nav {...finalProps}>
-        {breakpoint !== undefined ? (
-          <div class="navbar-mobile" data-slot="navbar-mobile">
-            <NavToggle
-              active={breakpoint !== undefined}
-              aria-controls={panelId}
-              aria-label={effectiveCollapseLabel}
-              icon={collapseIcon}
-              iconPlacement={collapseIconPlacement}
-              label={effectiveCollapseLabel}
-              onToggle={togglePanel}
-              open={panelOpen}
-              panelId={panelId}
-            />
-          </div>
-        ) : null}
-
-        <div class="navbar-shell" data-slot="navbar-shell">
-          {desktopChildren}
-        </div>
-
-        {breakpoint !== undefined ? (
-          <NavbarPanel
-            active={breakpoint !== undefined}
-            brand={navbarChildren.brand}
-            collapseLabel={effectiveCollapseLabel}
-            onClose={closePanel}
-            onClick={closePanelOnNavActivation}
-            open={panelOpen}
-            panelId={panelId}
-          >
-            {panelChildren}
-          </NavbarPanel>
-        ) : null}
-
-        {responsiveCollapsed && mobileMenuOpen ? (
-          <button
-            aria-label={`Close ${effectiveCollapseLabel}`}
-            class="navbar-backdrop"
-            data-slot="navbar-backdrop"
-            data-state="open"
-            tabIndex={-1}
-            type="button"
-            onClick={closePanel}
-          />
-        ) : null}
-
-        {breakpoint !== undefined ? (
-          <ShellResponsiveWatcher
-            breakpoint={breakpoint}
-            isCollapsed={isNavbarCollapsed}
-            onResize={(nextCollapsed) => {
-              responsiveCollapsedState?.set(nextCollapsed);
-            }}
-            onExpand={() => {
-              mobileMenuState?.set(false);
-            }}
-          />
-        ) : null}
-
-        <ShellPanelWatcher
-          contentId={panelId}
-          open={panelOpen}
-          panelSlot="navbar-panel"
-          onClose={closePanel}
-        />
-      </nav>
-    </NavbarResponsiveContext.Scope>
-  );
 }
 
-/**
- * Menu toggle button for responsive navbar collapse.
- * Auto-renders when navbar is responsive (collapseBelow set).
- */
-export function NavToggle(props: NavToggleProps): JSX.Element | null {
+export function Navbar(props: NavbarProps): JSX.Element {
   const {
+    breakpoint,
     children,
-    class: className,
-    active,
-    icon,
-    iconPlacement = "start",
-    label = "Menu",
-    ref,
-    onToggle,
-    open,
-    panelId,
+    collapseAt = breakpoint ?? false,
+    collapseIcon,
+    collapseLabel = "Menu",
     ...rest
   } = props;
 
-  if (active === false) {
-    return null;
+  if (!collapseAt) {
+    return (
+      <Block
+        as="nav"
+        direction="row"
+        align="center"
+        gap="md"
+        width="full"
+        {...rest}
+        data-slot="navbar"
+      >
+        {children}
+      </Block>
+    );
   }
 
-  const isOpen = open === true;
-
-  const finalProps = 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?.(),
-  });
+  const navbarChildren = flattenNavbarChildren(children);
+  const brandChildren = navbarChildren.filter(isNavBrandChild);
+  const navChildren = navbarChildren.filter((child) => !isNavBrandChild(child));
+  const hasNavContent = hasRenderableChildren(navChildren);
+  const content = (
+    <Block direction="row" align="center" gap="md" width="full" data-slot="navbar-content">
+      {navChildren}
+    </Block>
+  );
+  const collapse = hasNavContent ? (
+    <details data-slot="navbar-collapse">
+      <summary aria-label={collapseLabel} data-slot="navbar-toggle">
+        {collapseIcon}
+        <span data-slot="navbar-toggle-label">{collapseLabel}</span>
+      </summary>
+      {content}
+    </details>
+  ) : null;
 
   return (
-    <button {...finalProps}>
-      {children ?? renderNavbarCollapseContents(label, icon, iconPlacement)}
-    </button>
+    <Block
+      as="nav"
+      direction="row"
+      align="center"
+      gap="md"
+      width="full"
+      {...rest}
+      data-collapse-at={collapseAt}
+      data-slot="navbar"
+    >
+      {[...brandChildren, collapse]}
+    </Block>
   );
 }
 
-/**
- * Brand/logo container displayed in navbar and mobile panel header.
- */
 export function NavBrand(props: NavBrandProps): JSX.Element {
-  const { children, ref, class: className, ...rest } = props;
+  const { children, ...rest } = props;
 
   return (
-    <div {...rest} ref={ref} class={classes("navbar-brand", className)} data-slot="navbar-brand">
+    <Block direction="row" align="center" gap="sm" shrink={false} {...rest} data-slot="nav-brand">
       {children}
-    </div>
+    </Block>
   );
 }
 
-/**
- * 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>
- */
 export function NavGroup(props: NavGroupProps): JSX.Element {
-  const { children, id, ref, class: className, label, ...rest } = props;
-  const rawAlign = (rest as Record<string, unknown>)["data-align"];
-  const align =
-    props.align ??
-    (rawAlign === "start" || rawAlign === "center" || rawAlign === "end"
-      ? (rawAlign as NavGroupProps["align"])
-      : undefined);
-  const hasLabel = label !== undefined && label !== null;
-  const labelId = hasLabel && id ? `${id}-label` : undefined;
-  const accessibleLabel = typeof label === "string" ? label : undefined;
+  const { align, children, label, title = label, ...rest } = props;
 
   return (
-    <div
-      {...rest}
-      id={id}
-      ref={ref}
-      class={classes("navbar-group", className)}
-      aria-label={labelId ? undefined : accessibleLabel}
-      aria-labelledby={labelId}
-      role={hasLabel ? "group" : rest.role}
-      data-align={resolveNavGroupAlign(align)}
-      data-has-label={hasLabel ? "true" : undefined}
-      data-slot="navbar-group"
-    >
-      {hasLabel ? (
-        <>
-          <div id={labelId} class="navbar-group-label" data-slot="navbar-group-label">
-            {label}
-          </div>
-          <div class="navbar-group-body" data-slot="navbar-group-body">
-            {children}
-          </div>
-        </>
-      ) : (
-        children
-      )}
-    </div>
+    <Block align={align} gap="sm" {...rest} data-align={align} data-slot="nav-group">
+      {title !== undefined ? <div data-slot="nav-group-label">{title}</div> : null}
+      <Block gap="xs" data-slot="nav-group-body">
+        {children}
+      </Block>
+    </Block>
+  );
+}
+
+export function NavDropdown(props: NavDropdownProps): JSX.Element {
+  const { align = "end", children, label, side = "bottom", sideOffset = 6, ...rest } = props;
+
+  return (
+    <Block direction="row" align="center" data-slot="nav-dropdown">
+      <Dropdown {...rest}>
+        <DropdownTrigger class={classes("nav-item")} data-slot="nav-dropdown-trigger">
+          {label}
+        </DropdownTrigger>
+        <DropdownContent
+          align={align}
+          class={classes("dropdown-content")}
+          data-slot="nav-dropdown-content"
+          side={side}
+          sideOffset={sideOffset}
+        >
+          {children}
+        </DropdownContent>
+      </Dropdown>
+    </Block>
   );
 }

package/src/components/navbar/navbar.types.ts

@@ -1,50 +1,24 @@
-export type {
-  NavItemAsChildProps,
-  NavItemProps,
-  NavItemVariant,
-  NavLinkProps,
-} from "../nav/nav.types";
-import type { CollapseBreakpoint, CollapseIconPlacement } from "../shell/shell-nav.types";
+import type { BlockAsChildProps, BlockDivProps, BlockElementProps } from "../block";
+import type { DropdownContentOwnProps, DropdownProps } from "@askrjs/ui";
 
-export type NavGroupAlign = "start" | "center" | "end";
+export type NavbarCollapseBreakpoint = "sm" | "md" | "lg" | "xl";
 
-export type NavbarProps = Omit<JSX.IntrinsicElements["nav"], "children"> & {
-  children?: unknown;
-  breakpoint?: CollapseBreakpoint;
-  collapseIcon?: unknown;
-  collapseIconPlacement?: CollapseIconPlacement;
+export type NavbarProps = Omit<BlockElementProps<"nav">, "as" | "direction" | "align"> & {
+  breakpoint?: NavbarCollapseBreakpoint | false;
+  collapseAt?: NavbarCollapseBreakpoint | false;
   collapseLabel?: string;
-};
-export type NavBrandProps = Omit<JSX.IntrinsicElements["div"], "children"> & {
-  children?: unknown;
-};
-
-export 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;
+  collapseIcon?: unknown;
 };
 
-export type NavbarPanelProps = Omit<JSX.IntrinsicElements["div"], "children"> & {
-  active?: boolean;
-  brand?: unknown;
-  children?: unknown;
-  collapseLabel?: string;
-  onClose?: () => void;
-  open?: boolean;
-  panelId?: string;
-};
+export type NavBrandProps = BlockDivProps | BlockElementProps<"a"> | BlockAsChildProps;
 
-export type NavGroupProps = Omit<JSX.IntrinsicElements["div"], "children"> & {
-  align?: NavGroupAlign;
-  children?: unknown;
+export type NavGroupProps = Omit<BlockDivProps, "title"> & {
   label?: unknown;
+  title?: unknown;
 };
+
+export type NavDropdownProps = Omit<DropdownProps, "children"> &
+  Pick<DropdownContentOwnProps, "align" | "side" | "sideOffset"> & {
+    label: unknown;
+    children?: unknown;
+  };

package/src/components/page/index.ts

@@ -0,0 +1,2 @@
+export { Page } from "./page";
+export type { PageProps } from "./page.types";

package/src/components/page/page.tsx

@@ -0,0 +1,17 @@
+import { Block } from "../block";
+import { Container } from "../container";
+import type { PageProps } from "./page.types";
+
+export function Page(props: PageProps): JSX.Element {
+  const { children, ...rest } = props;
+
+  return (
+    <Block as="main" grow {...rest} data-slot="page">
+      <Container>
+        <Block paddingY="xl" gap="lg">
+          {children}
+        </Block>
+      </Container>
+    </Block>
+  );
+}

package/src/components/page/page.types.ts

@@ -0,0 +1,3 @@
+import type { MainProps } from "../main";
+
+export type PageProps = MainProps;

package/src/components/page-header/index.ts

@@ -0,0 +1,2 @@
+export { PageHeader } from "./page-header";
+export type { PageHeaderProps } from "./page-header.types";

package/src/components/page-header/page-header.tsx

@@ -0,0 +1,29 @@
+import { Block } from "../block";
+import type { PageHeaderProps } from "./page-header.types";
+
+export function PageHeader(props: PageHeaderProps): JSX.Element {
+  const { title, description, actions, ...rest } = props;
+
+  return (
+    <Block
+      rowFrom="md"
+      align={{ base: "start", md: "center" }}
+      justify="between"
+      gap="lg"
+      {...rest}
+      data-slot="page-header"
+    >
+      <Block gap="xs" data-slot="page-header-copy">
+        <h1 data-slot="page-header-title">{title}</h1>
+        {description !== undefined ? (
+          <p data-slot="page-header-description">{description}</p>
+        ) : null}
+      </Block>
+      {actions !== undefined ? (
+        <Block direction="row" gap="sm" data-slot="page-header-actions">
+          {actions}
+        </Block>
+      ) : null}
+    </Block>
+  );
+}

package/src/components/page-header/page-header.types.ts

@@ -0,0 +1,7 @@
+import type { BlockDivProps } from "../block";
+
+export type PageHeaderProps = BlockDivProps & {
+  title: unknown;
+  description?: unknown;
+  actions?: unknown;
+};

package/src/components/section/index.ts

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

package/src/components/section/section.a11y.ts

@@ -2,7 +2,6 @@ export const SECTION_A11Y_CONTRACT = {
   DATA_ATTRIBUTES: {
     slot: "data-slot" as const,
     layout: "data-ak-layout" as const,
-    size: "data-size" as const,
   },
   SLOT_VALUES: {
     root: "section" as const,

package/src/components/section/section.tsx

@@ -1,38 +1,12 @@
-import { Slot } from "@askrjs/askr/foundations";
-import { mergeProps } from "../_internal/merge-props";
-import {
-  applyBoxLayoutStyles,
-  splitBoxLayoutProps,
-  withBoxLayoutClass,
-} from "../_internal/box-layout";
-import { serializeResponsiveValueIf } from "../_internal/layout";
-import type { SectionAsChildProps, SectionElementProps } from "./section.types";
+import { Block } from "../block";
+import type { SectionProps } from "./section.types";
 
-function isSectionSizeToken(value: unknown): value is string {
-  return typeof value === "string" && ["1", "2", "3", "4"].includes(value.trim());
-}
-
-export function Section(props: SectionElementProps): JSX.Element;
-export function Section(props: SectionAsChildProps): JSX.Element;
-export function Section(props: SectionElementProps | SectionAsChildProps) {
-  const { asChild, children, size = "3", ref, style: userStyle, ...rest } = props;
-
-  const { boxProps, rest: passthroughProps } = splitBoxLayoutProps(rest);
-  const layoutStyle: Record<string, string | number> = {};
-  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),
-    ...(layoutClass ? { class: layoutClass } : {}),
-  });
-
-  if (asChild) {
-    return <Slot asChild {...finalProps} children={children} />;
-  }
+export function Section(props: SectionProps): JSX.Element {
+  const { children, ...rest } = props;
 
-  return <section {...finalProps}>{children}</section>;
+  return (
+    <Block as="section" gap="lg" paddingY="xl" {...rest} data-slot="section">
+      {children}
+    </Block>
+  );
 }

package/src/components/section/section.types.ts

@@ -1,23 +1,3 @@
-import type { JSXElement } from "@askrjs/askr/foundations";
-import type { Ref } from "@askrjs/askr/foundations/utilities";
-import type { BoxLayoutOwnProps, LayoutResponsive } from "../box/box.types";
+import type { BlockElementProps } from "../block";
 
-export 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>;
-  };
-
-export type SectionAsChildProps = SectionOwnProps & {
-  asChild: true;
-  children: JSXElement;
-  ref?: Ref<unknown>;
-  style?: JSX.IntrinsicElements["section"]["style"];
-};
-
-export type SectionProps = SectionElementProps | SectionAsChildProps;
+export type SectionProps = Omit<BlockElementProps<"section">, "as">;

package/src/components/separator/index.ts

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