@askrjs/themes 0.0.9 → 0.0.11

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

@@ -1,262 +0,0 @@
-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;
-}
-
-function renderShellChildKey(child: unknown, index: number, keyPrefix: string): string {
-  return isJsxElement(child) && child.key != null ? String(child.key) : `${keyPrefix}-${index}`;
-}
-
-function keyMissingShellChildren(children: unknown[], keyPrefix: string): unknown[] {
-  let keyedChildren: unknown[] | undefined;
-
-  for (let index = 0; index < children.length; index += 1) {
-    const child = children[index];
-
-    if (isJsxElement(child) && child.key == null) {
-      keyedChildren ??= children.slice(0, index);
-      keyedChildren.push({
-        ...child,
-        key: `${keyPrefix}-${index}`,
-      });
-      continue;
-    }
-
-    keyedChildren?.push(child);
-  }
-
-  return keyedChildren ?? children;
-}
-
-function hasPanelProps(
-  props: Record<string, unknown> | undefined,
-  panelProps: ShellResponsivePanelProps,
-): boolean {
-  return (
-    props?.active === panelProps.active &&
-    props?.collapseLabel === panelProps.collapseLabel &&
-    props?.onClose === panelProps.onClose &&
-    props?.open === panelProps.open &&
-    props?.panelId === panelProps.panelId
-  );
-}
-
-function applyShellPanelProps(
-  children: unknown[],
-  keyPrefix: string,
-  panelProps: ShellResponsivePanelProps,
-): unknown[] {
-  let panelChildren: unknown[] | undefined;
-
-  for (let index = 0; index < children.length; index += 1) {
-    const child = children[index];
-
-    if (!isJsxElement(child)) {
-      panelChildren?.push(child);
-      continue;
-    }
-
-    const props = child.props as Record<string, unknown> | undefined;
-
-    if (hasPanelProps(props, panelProps)) {
-      panelChildren?.push(child);
-      continue;
-    }
-
-    panelChildren ??= children.slice(0, index);
-    panelChildren.push({
-      ...child,
-      key: child.key != null ? child.key : `${keyPrefix}-${index}`,
-      props: {
-        ...props,
-        active: panelProps.active,
-        collapseLabel: panelProps.collapseLabel,
-        onClose: panelProps.onClose,
-        open: panelProps.open,
-        panelId: panelProps.panelId,
-      },
-    });
-  }
-
-  return panelChildren ?? children;
-}
-
-export function renderKeyedShellChildren(children: unknown, keyPrefix: string): JSX.Element {
-  const childList = toChildArray(children);
-  const keyedChildren = keyMissingShellChildren(childList, keyPrefix);
-
-  return (
-    <For
-      each={() => keyedChildren}
-      by={(child, index) => renderShellChildKey(child, index, keyPrefix)}
-    >
-      {(child) => child as never}
-    </For>
-  );
-}
-
-export function renderKeyedShellPanelChildren(
-  children: unknown,
-  keyPrefix: string,
-  panelProps: ShellResponsivePanelProps,
-): JSX.Element {
-  const childList = toChildArray(children);
-  const keyedChildren = applyShellPanelProps(childList, keyPrefix, panelProps);
-
-  return (
-    <For
-      each={() => keyedChildren}
-      by={(child, index) => renderShellChildKey(child, index, keyPrefix)}
-    >
-      {(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

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

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

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

@@ -1,71 +0,0 @@
-import type { JSXElement } from "@askrjs/askr/foundations";
-import type { Ref } from "@askrjs/askr/foundations/utilities";
-
-export type ShellVariant = "sidebar" | "topbar" | "rail";
-
-export type ShellOwnProps = {
-  variant?: ShellVariant;
-  class?: string;
-  children?: unknown;
-};
-
-export type ShellDivProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref"> &
-  ShellOwnProps & {
-    asChild?: false;
-    ref?: Ref<HTMLDivElement>;
-  };
-
-export type ShellAsChildProps = Omit<ShellOwnProps, "as"> & {
-  asChild: true;
-  children: JSXElement;
-  ref?: Ref<unknown>;
-};
-
-export type ShellProps = ShellDivProps | ShellAsChildProps;
-
-export type ShellNavOwnProps = {
-  class?: string;
-  children?: unknown;
-};
-
-export type ShellNavDivProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref"> &
-  ShellNavOwnProps & {
-    asChild?: false;
-    ref?: Ref<HTMLDivElement>;
-  };
-
-export type ShellNavAsChildProps = Omit<ShellNavOwnProps, "as"> & {
-  asChild: true;
-  children: JSXElement;
-  ref?: Ref<unknown>;
-};
-
-export type ShellNavProps = ShellNavDivProps | ShellNavAsChildProps;
-
-export type ShellMainOwnProps = {
-  as?: "main" | "div";
-  class?: string;
-  children?: unknown;
-};
-
-export type ShellMainMainProps = Omit<JSX.IntrinsicElements["main"], "children" | "ref"> &
-  ShellMainOwnProps & {
-    as?: "main";
-    asChild?: false;
-    ref?: Ref<HTMLElement>;
-  };
-
-export type ShellMainDivProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref"> &
-  ShellMainOwnProps & {
-    as: "div";
-    asChild?: false;
-    ref?: Ref<HTMLDivElement>;
-  };
-
-export type ShellMainAsChildProps = Omit<ShellMainOwnProps, "as"> & {
-  asChild: true;
-  children: JSXElement;
-  ref?: Ref<unknown>;
-};
-
-export type ShellMainProps = ShellMainMainProps | ShellMainDivProps | ShellMainAsChildProps;

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

@@ -1,67 +0,0 @@
-import { readContext } from "@askrjs/askr";
-import { renderShellPanel } from "../shell/shell-panel";
-import { SidebarResponsiveContext } from "./sidebar.context";
-import type { SidebarPanelProps } from "./sidebar.types";
-
-const DEFAULT_SIDEBAR_RESPONSIVE_CONTEXT = {
-  active: () => false,
-  collapseLabel: () => "Menu",
-  closePanel: () => undefined,
-  iconCollapsed: () => false,
-  isRailCollapsible: () => false,
-  orientation: () => "vertical" as const,
-  panelId: () => undefined,
-  panelOpen: () => false,
-  togglePanel: () => undefined,
-  toggleRail: () => undefined,
-};
-
-export function SidebarPanel(props: SidebarPanelProps): 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(SidebarResponsiveContext);
-        } catch {
-          return DEFAULT_SIDEBAR_RESPONSIVE_CONTEXT;
-        }
-      })()
-    : DEFAULT_SIDEBAR_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,
-    dataOrientation: responsive.orientation(),
-    onClose: closePanel,
-    open,
-    panelId,
-    prefix: "sidebar",
-    ref,
-    rest,
-  });
-}

package/src/components/sidebar/sidebar-toggle.tsx

@@ -1,5 +0,0 @@
-import type { SidebarToggleProps } from "./sidebar.types";
-
-export function SidebarToggle(_props: SidebarToggleProps): null {
-  return null;
-}

package/src/components/sidebar/sidebar.context.ts

@@ -1,40 +0,0 @@
-import { defineContext } from "@askrjs/askr";
-
-export type SidebarContextValue = {
-  orientation: () => "vertical";
-};
-
-export type SidebarResponsiveContextValue = {
-  active: () => boolean;
-  collapseLabel: () => string;
-  closePanel: () => void;
-  iconCollapsed: () => boolean;
-  isRailCollapsible: () => boolean;
-  orientation: () => "vertical";
-  panelId: () => string | undefined;
-  panelOpen: () => boolean;
-  togglePanel: () => void;
-  toggleRail: () => void;
-};
-
-const defaultOrientation = () => "vertical" as const;
-
-const defaultResponsiveContext: SidebarResponsiveContextValue = {
-  active: () => false,
-  collapseLabel: () => "Menu",
-  closePanel: () => undefined,
-  iconCollapsed: () => false,
-  isRailCollapsible: () => false,
-  orientation: defaultOrientation,
-  panelId: () => undefined,
-  panelOpen: () => false,
-  togglePanel: () => undefined,
-  toggleRail: () => undefined,
-};
-
-export const SidebarContext = defineContext<SidebarContextValue>({
-  orientation: defaultOrientation,
-});
-
-export const SidebarResponsiveContext =
-  defineContext<SidebarResponsiveContextValue>(defaultResponsiveContext);

package/src/components/sidebar/sidebar.shared.ts

@@ -1,12 +0,0 @@
-import { NAVBAR_COLLAPSE_BREAKPOINTS, isNavbarCollapsed } from "../navbar/navbar.shared";
-import type { CollapseBreakpoint, Collapsible } from "../shell/shell-nav.types";
-
-export { NAVBAR_COLLAPSE_BREAKPOINTS, isNavbarCollapsed };
-
-export function resolveSidebarCollapsible(collapsible: Collapsible | undefined): Collapsible {
-  return collapsible ?? "none";
-}
-
-export function isSidebarCollapsed(breakpoint: CollapseBreakpoint): boolean {
-  return isNavbarCollapsed(breakpoint);
-}

package/src/components/spacer/index.ts

@@ -1,9 +0,0 @@
-export { Spacer } from "./spacer";
-export { SPACER_A11Y_CONTRACT, type SpacerA11yContract } from "./spacer.a11y";
-export type {
-  SpacerProps,
-  SpacerOwnProps,
-  SpacerAxis,
-  SpacerNativeProps,
-  SpacerAsChildProps,
-} from "./spacer.types";

package/src/components/spacer/spacer.a11y.ts

@@ -1,14 +0,0 @@
-export const SPACER_A11Y_CONTRACT = {
-  DATA_ATTRIBUTES: {
-    slot: "data-slot" as const,
-    axis: "data-axis" as const,
-    grow: "data-grow" as const,
-    shrink: "data-shrink" as const,
-    basis: "data-basis" as const,
-  },
-  SLOT_VALUES: {
-    root: "spacer" as const,
-  },
-} as const;
-
-export type SpacerA11yContract = typeof SPACER_A11Y_CONTRACT;

package/src/components/spacer/spacer.tsx

@@ -1,61 +0,0 @@
-import { Slot } from "@askrjs/askr/foundations";
-import { mergeProps } from "../_internal/merge-props";
-import { isCssLength, mergeLayoutStyles } from "../_internal/layout";
-import { styleDeclarationsToClass } from "../_internal/style";
-import { isJsxElement, toChildArray } from "../_internal/jsx";
-import type { SpacerAsChildProps, SpacerNativeProps } from "./spacer.types";
-
-export function Spacer(props: SpacerNativeProps): JSX.Element;
-export function Spacer(props: SpacerAsChildProps): JSX.Element;
-export function Spacer(props: SpacerNativeProps | SpacerAsChildProps) {
-  const { asChild, children, grow, shrink, basis, axis, ref, style: userStyle, ...rest } = props;
-
-  const layoutStyle: Record<string, string | number> = {};
-
-  if (axis === "inline") {
-    if (shrink !== undefined && shrink !== 0) {
-      layoutStyle.flexShrink = shrink;
-    }
-    if (isCssLength(basis)) layoutStyle.width = basis!;
-  } else if (axis === "block") {
-    if (shrink !== undefined && shrink !== 0) {
-      layoutStyle.flexShrink = shrink;
-    }
-    if (isCssLength(basis)) layoutStyle.height = basis!;
-  } else {
-    if (grow !== undefined && grow !== 1) {
-      layoutStyle.flexGrow = grow;
-    }
-    if (shrink !== undefined && shrink !== 1) {
-      layoutStyle.flexShrink = shrink;
-    }
-    if (isCssLength(basis)) {
-      layoutStyle.flexBasis = basis!;
-    }
-  }
-
-  const layoutClass = styleDeclarationsToClass(mergeLayoutStyles(layoutStyle, userStyle));
-
-  const finalProps = mergeProps(rest, {
-    ref,
-    "data-slot": "spacer",
-    "data-axis": axis,
-    ...(layoutClass ? { class: layoutClass } : {}),
-  });
-  const keyedChildren = toChildArray(children).map((child, index) => {
-    if (!isJsxElement(child) || child.key != null) {
-      return child;
-    }
-
-    return {
-      ...child,
-      key: `spacer-${index}`,
-    };
-  });
-
-  if (asChild) {
-    return <Slot asChild {...finalProps} children={children} />;
-  }
-
-  return <div {...finalProps}>{keyedChildren}</div>;
-}

package/src/components/spacer/spacer.types.ts

@@ -1,31 +0,0 @@
-import type { JSXElement } from "@askrjs/askr/foundations";
-import type { Ref } from "@askrjs/askr/foundations/utilities";
-
-export type SpacerAxis = "inline" | "block";
-
-export type SpacerOwnProps = {
-  /** flex-grow factor (default 1 when no axis is set). */
-  grow?: number;
-  /** flex-shrink factor (default 1 when no axis is set, 0 when axis is set). */
-  shrink?: number;
-  /** CSS flex-basis / width (axis=inline) / height (axis=block) value. */
-  basis?: string;
-  /** When set, renders a fixed space along the given axis instead of a flex-grow spacer. */
-  axis?: SpacerAxis;
-  children?: unknown;
-};
-
-export type SpacerNativeProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref"> &
-  SpacerOwnProps & {
-    asChild?: false;
-    ref?: Ref<HTMLDivElement>;
-  };
-
-export type SpacerAsChildProps = SpacerOwnProps & {
-  asChild: true;
-  children: JSXElement;
-  ref?: Ref<unknown>;
-  style?: JSX.IntrinsicElements["div"]["style"];
-};
-
-export type SpacerProps = SpacerNativeProps | SpacerAsChildProps;

package/src/components/stack/index.ts

@@ -1,3 +0,0 @@
-export { Stack } from "./stack";
-export { STACK_A11Y_CONTRACT, type StackA11yContract } from "./stack.a11y";
-export type { StackProps, StackOwnProps, StackDivProps, StackAsChildProps } from "./stack.types";

package/src/components/stack/stack.a11y.ts

@@ -1,15 +0,0 @@
-export const STACK_A11Y_CONTRACT = {
-  DATA_ATTRIBUTES: {
-    slot: "data-slot" as const,
-    layout: "data-ak-layout" as const,
-    gap: "data-gap" as const,
-    align: "data-align" as const,
-    justify: "data-justify" as const,
-    wrap: "data-wrap" as const,
-  },
-  SLOT_VALUES: {
-    root: "stack" as const,
-  },
-} as const;
-
-export type StackA11yContract = typeof STACK_A11Y_CONTRACT;