Tabs

import {
  merge,
  type PartialElement,
  toState,
  type ValueOrState,
} from "@domphy/core";

/**
 * Container patch that establishes a `tabs` context (with a shared `activeKey`
 * state) and the `tablist` role for child `tab`/`tabPanel` patches. No host tag
 * check; typically applied to a wrapper element.
 *
 * @param props.activeKey - Initially active tab key. Optional, accepts a value or state of `number | string`. Defaults to `0`.
 * @example { div: null, $: [tabs({ activeKey: 0 })] }
 */
function tabs(
  props: { activeKey?: ValueOrState<number | string> } = {},
): PartialElement {
  const partial: PartialElement = {
    role: "tablist",
    _onSchedule: (_node, element) => {
      const partial = {
        _context: {
          tabs: {
            activeKey: toState(props.activeKey || 0),
          },
        },
      };
      merge(element, partial);
    },
  };
  return partial;
}

export { tabs };

import type { ElementNode, PartialElement } from "@domphy/core";
import {
  type ThemeColor,
  themeColor,
  themeDensity,
  themeSize,
  themeSpacing,
} from "@domphy/theme";

/**
 * Styles a single tab trigger inside a `tabs` tablist on the host `<button>` element.
 * Wires up the tab's id/aria-controls/aria-selected, click selection, and
 * arrow/Home/End keyboard navigation via the surrounding `tabs` context.
 * Must be used inside a `tabs` patch.
 *
 * @hostTag button
 * @param props.accentColor - Theme color for the active/focus underline. Optional. Defaults to `"primary"`.
 * @param props.color - Theme color for the resting/hover underline and text. Optional. Defaults to `"neutral"`.
 * @example { button: "Tab 1", $: [tab()] }
 */
function tab(
  props: { accentColor?: ThemeColor; color?: ThemeColor } = {},
): PartialElement {
  const { accentColor = "primary", color = "neutral" } = props;
  const partial: PartialElement = {
    role: "tab",
    _onInsert: (node) => {
      if (node.tagName !== "button") {
        console.warn(`"tab" patch must use button tag`);
      }

      const context = node.getContext("tabs");
      if (!context) {
        console.warn(`"tab" patch must be used inside a "tabs"`);
        return;
      }
      let children = (node.parent?.children.items ?? []) as ElementNode[];
      children = children.filter(
        (n) => n.type === "ElementNode" && n.attributes.get("role") === "tab",
      );
      const key =
        node.key !== null && node.key !== undefined
          ? node.key
          : children.indexOf(node);

      const part: PartialElement = {
        id: `tab${node.parent!.nodeId}${key}`,
        ariaControls: `tabpanel${node.parent!.nodeId}${key}`,
        ariaSelected: (listener) => context.activeKey.get(listener) === key,
        onClick: () => context.activeKey.set(key),
        onKeyDown: (e: Event) => {
          const k = (e as KeyboardEvent).key;
          if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(k)) return;
          e.preventDefault();
          const tabs = (node.parent?.children.items ?? []).filter(
            (n) =>
              n.type === "ElementNode" &&
              (n as ElementNode).attributes.get("role") === "tab",
          ) as ElementNode[];
          const idx = tabs.indexOf(node);
          let next = idx;
          if (k === "ArrowRight") next = (idx + 1) % tabs.length;
          else if (k === "ArrowLeft")
            next = (idx - 1 + tabs.length) % tabs.length;
          else if (k === "Home") next = 0;
          else if (k === "End") next = tabs.length - 1;
          const target = tabs[next];
          context.activeKey.set(target.key ?? next);
          (target.domElement as HTMLElement)?.focus();
        },
      };
      node.merge(part);
    },
    style: {
      cursor: "pointer",
      fontSize: (listener) => themeSize(listener, "inherit"),
      height: (listener) => themeSpacing(6 + themeDensity(listener) * 2),
      paddingInline: (listener) => themeSpacing(themeDensity(listener) * 4),
      border: "none",
      outline: "none",
      color: (listener) => themeColor(listener, "shift-9"),
      backgroundColor: (listener) => themeColor(listener, "inherit"),
      boxShadow: (listener) =>
        `inset 0 -${themeSpacing(0.5)} 0 0 ${themeColor(listener, "shift-1", color)}`,
      "&:hover:not([disabled])": {
        boxShadow: (listener) =>
          `inset 0 -${themeSpacing(0.5)} 0 0 ${themeColor(listener, "shift-2", color)}`,
      },
      "&[aria-selected=true]:not([disabled])": {
        boxShadow: (listener) =>
          `inset 0 -${themeSpacing(0.5)} 0 0 ${themeColor(listener, "shift-6", accentColor)}`,
      },
      "&:focus-visible": {
        boxShadow: (listener) =>
          `inset 0 -${themeSpacing(0.5)} 0 0 ${themeColor(listener, "shift-6", accentColor)}`,
      },
    },
  };
  return partial;
}

export { tab };

import type { ElementNode, PartialElement } from "@domphy/core";
import { themeDensity, themeSpacing } from "@domphy/theme";

/**
 * Styles a tab panel inside a `tabs` tablist. Wires up the panel's
 * id/aria-labelledby and toggles `hidden` based on the surrounding `tabs`
 * context's active key. Must be used inside a `tabs` patch. Takes no props.
 *
 * @hostTag div
 * @example { div: "Panel content", $: [tabPanel()] }
 */
function tabPanel(): PartialElement {
  const partial: PartialElement = {
    role: "tabpanel",
    style: {
      paddingBlock: (listener) => themeSpacing(themeDensity(listener) * 2),
      paddingInline: (listener) => themeSpacing(themeDensity(listener) * 2),
    },
    _onInsert: (node) => {
      const context = node.getContext("tabs");
      if (!context) {
        console.warn(`"tabPanel" patch must be used inside a "tabs"`);
        return;
      }
      let children = (node.parent?.children.items ?? []) as ElementNode[];
      children = children.filter(
        (n) =>
          n.type === "ElementNode" && n.attributes.get("role") === "tabpanel",
      );
      const key =
        node.key !== null && node.key !== undefined
          ? node.key
          : children.indexOf(node);
      const part: PartialElement = {
        id: `tabpanel${node.parent!.nodeId}${key}`,
        ariaLabelledby: `tab${node.parent!.nodeId}${key}`,
        hidden: (listener) => context.activeKey.get(listener) !== key,
      };
      node.merge(part);
    },
  };
  return partial;
}

export { tabPanel };