@askrjs/themes 0.0.3 → 0.0.6

package/src/components/pagination/pagination.tsx

@@ -0,0 +1,158 @@
+import { navigate } from "@askrjs/askr/router";
+import { Slot } from "@askrjs/askr/foundations";
+import { mergeProps } from "@askrjs/askr/foundations/utilities";
+import { classes } from "../_internal/classes";
+import { resolvePathname } from "../_internal/pathname";
+import type {
+  PaginationEllipsisProps,
+  PaginationItemAsChildProps,
+  PaginationItemProps,
+  PaginationLinkProps,
+  PaginationProps,
+} from "./pagination.types";
+
+function shouldHandleClientNavigation(
+  event: MouseEvent,
+  target: string | undefined,
+  targetPathname: string | null,
+): boolean {
+  if (targetPathname === null || target) {
+    return false;
+  }
+
+  return (
+    !event.defaultPrevented &&
+    (event.button ?? 0) === 0 &&
+    !event.altKey &&
+    !event.ctrlKey &&
+    !event.metaKey &&
+    !event.shiftKey
+  );
+}
+
+export function Pagination(props: PaginationProps): JSX.Element {
+  const { children, class: className, label = "Pagination", ref, ...rest } = props;
+
+  return (
+    <nav
+      {...rest}
+      ref={ref}
+      class={classes("pagination", className)}
+      aria-label={label}
+      data-slot="pagination"
+    >
+      <ul class="pagination-list" data-slot="pagination-list">
+        {children}
+      </ul>
+    </nav>
+  );
+}
+
+export function PaginationItem(props: PaginationItemProps): JSX.Element;
+export function PaginationItem(props: PaginationItemAsChildProps): JSX.Element;
+export function PaginationItem(
+  props: PaginationItemProps | PaginationItemAsChildProps,
+): JSX.Element {
+  const {
+    active = false,
+    asChild,
+    children,
+    disabled = false,
+    ref,
+    class: className,
+    ...rest
+  } = props;
+  const finalProps = mergeProps(rest, {
+    class: classes(
+      "page-item",
+      active ? "active" : undefined,
+      disabled ? "disabled" : undefined,
+      className,
+    ),
+    ref,
+    "aria-current": active ? "page" : undefined,
+    "aria-disabled": disabled ? "true" : undefined,
+    "data-active": active ? "true" : undefined,
+    "data-disabled": disabled ? "true" : undefined,
+    "data-slot": "pagination-item",
+  });
+
+  if (asChild) {
+    return <Slot asChild {...finalProps} children={children} />;
+  }
+
+  return <li {...finalProps}>{children}</li>;
+}
+
+export function PaginationLink(props: PaginationLinkProps): JSX.Element {
+  const {
+    active = false,
+    children,
+    class: className,
+    disabled = false,
+    href,
+    onClick,
+    ref,
+    target,
+    ...rest
+  } = props as PaginationLinkProps & { onClick?: (event: MouseEvent) => void };
+  const hrefValue = href as string;
+  const targetValue = target as string | undefined;
+  const targetPathname = resolvePathname(hrefValue);
+  const isActive = active;
+
+  const linkProps = mergeProps(rest, {
+    href,
+    target: targetValue,
+    ref,
+    class: classes(
+      "page-link",
+      active ? "active" : undefined,
+      disabled ? "disabled" : undefined,
+      className,
+    ),
+    "aria-current": isActive ? "page" : undefined,
+    "aria-disabled": disabled ? "true" : undefined,
+    "data-active": isActive ? "true" : undefined,
+    "data-disabled": disabled ? "true" : undefined,
+    "data-slot": "pagination-link",
+    tabIndex: disabled ? -1 : undefined,
+  });
+
+  const handleClick = (event: MouseEvent) => {
+    onClick?.(event);
+
+    if (disabled || !shouldHandleClientNavigation(event, targetValue, targetPathname)) {
+      if (disabled) {
+        event.preventDefault();
+      }
+
+      return;
+    }
+
+    event.preventDefault();
+    navigate(hrefValue);
+  };
+
+  return (
+    <a {...linkProps} onClick={handleClick}>
+      {children}
+    </a>
+  );
+}
+
+export function PaginationEllipsis(props: PaginationEllipsisProps): JSX.Element {
+  const { children, class: className, ref, ...rest } = props;
+
+  return (
+    <span
+      {...rest}
+      ref={ref}
+      class={classes("pagination-ellipsis", className)}
+      aria-hidden="true"
+      data-slot="pagination-ellipsis"
+    >
+      {children ?? "..."}
+    </span>
+  );
+}

package/src/components/pagination/pagination.types.ts

@@ -0,0 +1,41 @@
+import type { JSXElement } from "@askrjs/askr/foundations";
+import type { Ref } from "@askrjs/askr/foundations/utilities";
+
+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">;
+
+export type PaginationProps = NavProps & {
+  children?: unknown;
+  label?: string;
+  ref?: Ref<HTMLElement>;
+};
+
+export type PaginationItemProps = LiProps & {
+  active?: boolean;
+  asChild?: false;
+  children?: unknown;
+  disabled?: boolean;
+  ref?: Ref<HTMLLIElement>;
+};
+
+export type PaginationItemAsChildProps = LiProps & {
+  active?: boolean;
+  asChild: true;
+  children: JSXElement;
+  disabled?: boolean;
+  ref?: Ref<unknown>;
+};
+
+export type PaginationLinkProps = AnchorProps & {
+  active?: boolean;
+  children?: unknown;
+  disabled?: boolean;
+  href: string;
+  ref?: Ref<HTMLAnchorElement>;
+};
+
+export type PaginationEllipsisProps = Omit<JSX.IntrinsicElements["span"], "children" | "ref"> & {
+  children?: unknown;
+  ref?: Ref<HTMLSpanElement>;
+};

package/src/components/section/section.tsx

@@ -3,7 +3,7 @@ import { mergeProps } from "../_internal/merge-props";
 import {
   applyBoxLayoutStyles,
   splitBoxLayoutProps,
-  withBoxLayoutStyle,
+  withBoxLayoutClass,
 } from "../_internal/box-layout";
 import { serializeResponsiveValueIf } from "../_internal/layout";
 import type { SectionAsChildProps, SectionElementProps } from "./section.types";
@@ -20,13 +20,14 @@ export function Section(props: SectionElementProps | SectionAsChildProps) {
   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),
-    style: withBoxLayoutStyle(layoutStyle, userStyle),
+    ...(layoutClass ? { class: layoutClass } : {}),
   });
 
   if (asChild) {

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

@@ -1,4 +1,5 @@
-import type { JSXElement, Ref } from "@askrjs/askr/foundations";
+import type { JSXElement } from "@askrjs/askr/foundations";
+import type { Ref } from "@askrjs/askr/foundations/utilities";
 import type { BoxLayoutOwnProps, LayoutResponsive } from "../box/box.types";
 
 export type SectionOwnProps = BoxLayoutOwnProps & {

package/src/components/separator/separator.types.ts

@@ -1,4 +1,5 @@
-import type { JSXElement, Ref } from "@askrjs/askr/foundations";
+import type { JSXElement } from "@askrjs/askr/foundations";
+import type { Ref } from "@askrjs/askr/foundations/utilities";
 
 export type SeparatorOwnProps = {
   decorative?: boolean;

package/src/components/shell/index.ts

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

package/src/components/shell/shell-nav.types.ts

@@ -0,0 +1,3 @@
+export type CollapseBreakpoint = "sm" | "md" | "lg" | "xl";
+export type CollapseIconPlacement = "start" | "end";
+export type Collapsible = "none" | "icon";

package/src/components/shell/shell-panel.tsx

@@ -0,0 +1,85 @@
+import { classes } from "../_internal/classes";
+import { mergeProps } from "../_internal/merge-props";
+
+export type ShellPanelRenderProps = {
+  active: boolean;
+  brand?: unknown;
+  children?: unknown;
+  className?: unknown;
+  collapseLabel: string;
+  dataOrientation?: string;
+  onClose: () => void;
+  open: boolean;
+  panelId?: string;
+  prefix: "navbar" | "sidebar";
+  ref?: unknown;
+  rest: Record<string, unknown>;
+};
+
+export function renderShellPanel(props: ShellPanelRenderProps): JSX.Element | null {
+  const {
+    active,
+    brand,
+    children,
+    className,
+    collapseLabel,
+    dataOrientation,
+    onClose,
+    open,
+    panelId,
+    prefix,
+    ref,
+    rest,
+  } = props;
+
+  if (active && !open) {
+    return null;
+  }
+
+  const panelClass = `${prefix}-panel`;
+  const headerClass = `${prefix}-panel-header`;
+  const closeClass = `${prefix}-panel-close`;
+  const headerSlot = `${prefix}-panel-header`;
+  const closeSlot = `${prefix}-panel-close`;
+
+  const finalProps = mergeProps(rest, {
+    ref,
+    class: classes(panelClass, className),
+    "aria-label": active ? collapseLabel : rest["aria-label"],
+    "aria-modal": active ? "true" : rest["aria-modal"],
+    "data-slot": panelClass,
+    "data-state": active ? (open ? "open" : "closed") : "open",
+    id: panelId,
+    role: rest.role,
+    tabIndex: active ? -1 : rest.tabIndex,
+    ...(dataOrientation !== undefined ? { "data-orientation": dataOrientation } : {}),
+  }) as Record<string, unknown>;
+
+  if (active) {
+    finalProps.role = "dialog";
+    finalProps["aria-modal"] = "true";
+    finalProps["aria-label"] = collapseLabel;
+    finalProps.tabIndex = -1;
+    finalProps.id = panelId;
+  }
+
+  return (
+    <div {...finalProps}>
+      {active ? (
+        <div class={headerClass} data-slot={headerSlot}>
+          {brand}
+          <button
+            aria-label={`Close ${collapseLabel}`}
+            class={closeClass}
+            data-slot={closeSlot}
+            type="button"
+            onClick={() => onClose()}
+          >
+            <span aria-hidden="true">x</span>
+          </button>
+        </div>
+      ) : null}
+      {children}
+    </div>
+  );
+}

package/src/components/shell/shell-responsive.tsx

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

package/src/components/shell/shell.a11y.ts

@@ -0,0 +1,20 @@
+export const SHELL_A11Y_CONTRACT = {
+  DATA_ATTRIBUTES: {
+    slot: "data-slot" as const,
+    layout: "data-ak-layout" as const,
+    variant: "data-variant" as const,
+    gap: "data-gap" as const,
+  },
+  SLOT_VALUES: {
+    root: "shell" as const,
+    nav: "shell-nav" as const,
+    main: "shell-main" as const,
+  },
+  VARIANT_VALUES: {
+    sidebar: "sidebar" as const,
+    topbar: "topbar" as const,
+    rail: "rail" as const,
+  },
+} as const;
+
+export type ShellA11yContract = typeof SHELL_A11Y_CONTRACT;

package/src/components/shell/shell.tsx

@@ -0,0 +1,74 @@
+import { Slot } from "@askrjs/askr/foundations";
+import { classes } from "../_internal/classes";
+import { mergeProps } from "../_internal/merge-props";
+import type {
+  ShellAsChildProps,
+  ShellDivProps,
+  ShellMainAsChildProps,
+  ShellMainDivProps,
+  ShellMainMainProps,
+  ShellNavAsChildProps,
+  ShellNavDivProps,
+} from "./shell.types";
+
+export function Shell(props: ShellDivProps): JSX.Element;
+export function Shell(props: ShellAsChildProps): JSX.Element;
+export function Shell(props: ShellDivProps | ShellAsChildProps) {
+  const { asChild, children, class: className, variant = "sidebar", ref, ...rest } = props;
+
+  const finalProps = mergeProps(rest, {
+    ref,
+    class: classes("shell", className),
+    "data-slot": "shell",
+    "data-ak-layout": "true",
+    "data-variant": variant,
+  });
+
+  if (asChild) {
+    return <Slot asChild {...finalProps} children={children as JSX.Element} />;
+  }
+
+  return <div {...finalProps}>{children}</div>;
+}
+
+export function ShellNav(props: ShellNavDivProps): JSX.Element;
+export function ShellNav(props: ShellNavAsChildProps): JSX.Element;
+export function ShellNav(props: ShellNavDivProps | ShellNavAsChildProps) {
+  const { asChild, children, class: className, ref, ...rest } = props;
+  const finalProps = mergeProps(rest, {
+    ref,
+    class: classes("shell-nav", className),
+    "data-slot": "shell-nav",
+    "data-ak-layout": "true",
+  });
+
+  if (asChild) {
+    return <Slot asChild {...finalProps} children={children as JSX.Element} />;
+  }
+
+  return <div {...finalProps}>{children}</div>;
+}
+
+export function ShellMain(props: ShellMainMainProps): JSX.Element;
+export function ShellMain(props: ShellMainDivProps): JSX.Element;
+export function ShellMain(props: ShellMainAsChildProps): JSX.Element;
+export function ShellMain(props: ShellMainMainProps | ShellMainDivProps | ShellMainAsChildProps) {
+  const as = "as" in props ? props.as : "main";
+  const { asChild, children, class: className, ref, ...rest } = props;
+  const finalProps = mergeProps(rest, {
+    ref,
+    class: classes("shell-main", className),
+    "data-slot": "shell-main",
+    "data-ak-layout": "true",
+  });
+
+  if (asChild) {
+    return <Slot asChild {...finalProps} children={children as JSX.Element} />;
+  }
+
+  if (as === "div") {
+    return <div {...finalProps}>{children}</div>;
+  }
+
+  return <main {...finalProps}>{children}</main>;
+}