@askrjs/themes 0.0.8 → 0.0.10

package/src/components/list-group/list-group.types.ts

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

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

@@ -1,62 +0,0 @@
-import { readContext } from "@askrjs/askr";
-import { renderShellPanel } from "../shell/shell-panel";
-import { NavbarResponsiveContext } from "./navbar.context";
-import type { NavbarPanelProps } from "./navbar.types";
-
-const DEFAULT_NAVBAR_RESPONSIVE_CONTEXT = {
-  active: () => false,
-  collapseLabel: () => "Menu",
-  closePanel: () => undefined,
-  panelId: () => undefined,
-  panelOpen: () => false,
-  togglePanel: () => undefined,
-};
-
-export function NavbarPanel(props: NavbarPanelProps): JSX.Element | null {
-  const {
-    active: activeProp,
-    brand,
-    children,
-    class: className,
-    collapseLabel: collapseLabelProp,
-    onClose,
-    open: openProp,
-    panelId: panelIdProp,
-    ref,
-    ...rest
-  } = props;
-  const needsResponsiveContext =
-    activeProp === undefined ||
-    collapseLabelProp === undefined ||
-    onClose === undefined ||
-    openProp === undefined ||
-    panelIdProp === undefined;
-  const responsive = needsResponsiveContext
-    ? (() => {
-        try {
-          return readContext(NavbarResponsiveContext);
-        } catch {
-          return DEFAULT_NAVBAR_RESPONSIVE_CONTEXT;
-        }
-      })()
-    : DEFAULT_NAVBAR_RESPONSIVE_CONTEXT;
-  const active = activeProp ?? responsive.active();
-  const open = openProp ?? responsive.panelOpen();
-  const panelId = panelIdProp ?? responsive.panelId();
-  const collapseLabel = collapseLabelProp ?? responsive.collapseLabel();
-  const closePanel = onClose ?? responsive.closePanel;
-
-  return renderShellPanel({
-    active,
-    brand,
-    children,
-    className,
-    collapseLabel,
-    onClose: closePanel,
-    open,
-    panelId,
-    prefix: "navbar",
-    ref,
-    rest,
-  });
-}

package/src/components/navbar/navbar.context.ts

@@ -1,22 +0,0 @@
-import { defineContext } from "@askrjs/askr";
-
-export type NavbarResponsiveContextValue = {
-  active: () => boolean;
-  collapseLabel: () => string;
-  closePanel: () => void;
-  panelId: () => string | undefined;
-  panelOpen: () => boolean;
-  togglePanel: () => void;
-};
-
-const defaultResponsiveContext: NavbarResponsiveContextValue = {
-  active: () => false,
-  collapseLabel: () => "Menu",
-  closePanel: () => undefined,
-  panelId: () => undefined,
-  panelOpen: () => false,
-  togglePanel: () => undefined,
-};
-
-export const NavbarResponsiveContext =
-  defineContext<NavbarResponsiveContextValue>(defaultResponsiveContext);

package/src/components/navbar/navbar.render.tsx

@@ -1,32 +0,0 @@
-import type { CollapseIconPlacement } from "../shell/shell-nav.types";
-
-export function renderNavbarCollapseContents(
-  collapseLabel: string,
-  collapseIcon: unknown,
-  collapseIconPlacement: CollapseIconPlacement,
-): unknown {
-  const icon = (
-    <span data-slot="navbar-toggle-icon" aria-hidden="true">
-      {collapseIcon ?? (
-        <span class="navbar-toggle-glyph" data-slot="navbar-toggle-glyph">
-          <span />
-          <span />
-          <span />
-        </span>
-      )}
-    </span>
-  );
-  const label = <span data-slot="navbar-toggle-label">{collapseLabel}</span>;
-
-  return collapseIconPlacement === "end" ? (
-    <>
-      {label}
-      {icon}
-    </>
-  ) : (
-    <>
-      {icon}
-      {label}
-    </>
-  );
-}

package/src/components/navbar/navbar.shared.ts

@@ -1,21 +0,0 @@
-import type { CollapseBreakpoint } from "../shell/shell-nav.types";
-import type { NavGroupAlign } from "./navbar.types";
-
-export const NAVBAR_COLLAPSE_BREAKPOINTS: Record<CollapseBreakpoint, number> = {
-  sm: 640,
-  md: 768,
-  lg: 1024,
-  xl: 1280,
-};
-
-export function resolveNavGroupAlign(align: NavGroupAlign | undefined): string | undefined {
-  return align === "start" ? undefined : align;
-}
-
-export function isNavbarCollapsed(collapseBelow: CollapseBreakpoint): boolean {
-  if (typeof window === "undefined") {
-    return false;
-  }
-
-  return window.innerWidth < NAVBAR_COLLAPSE_BREAKPOINTS[collapseBelow];
-}

package/src/components/pagination/index.ts

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

package/src/components/pagination/pagination.tsx

@@ -1,158 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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/shell/index.ts

@@ -1,16 +0,0 @@
-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

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

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

@@ -1,85 +0,0 @@
-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>
-  );
-}