@hackcove/ui 0.2.3 → 0.2.5

package/dist/Tabs.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx, focusRing } from "./cx.js";
+import { Switcher } from "./switcher.js";
+const BASE = `-mb-px border-b-2 px-0.5 py-2 transition ${focusRing}`;
+const ON = "border-violet-600 font-medium text-violet-700";
+const OFF = "border-transparent text-slate-600 hover:text-violet-700";
+/**
+ * Underline tabs for switching a view in place: a row over a bottom rule, the current tab
+ * underlined in the accent. `items` are `{ value, label }` buttons (`value` and `onChange` are the
+ * caller's state; the arrow keys, Home and End move between tabs) or links (`href`, or `render` to
+ * draw the app's own router `<Link>`; `value` marks the current one, which gets `aria-current`).
+ * `label` names the tab list. The panel is the caller's: give it `role="tabpanel"`, and a tab
+ * `controls` to point at it.
+ */
+export function Tabs(props) {
+    return (_jsx(Switcher, { ...props, parts: {
+            group: "tablist",
+            item: "tab",
+            vertical: false,
+            root: "flex flex-wrap gap-x-5 border-b border-slate-200 text-sm",
+            option: (active) => cx(BASE, active ? ON : OFF),
+        } }));
+}

package/dist/TextLink.d.ts

@@ -0,0 +1,27 @@
+import type { ComponentPropsWithoutRef, ReactElement } from "react";
+import { type LinkRender } from "./link.js";
+/** The classes of an inline text link, for a router's own <Link> that should look like one. */
+export declare const linkClass: string;
+/**
+ * Stretches a link's hit area over its nearest `relative` ancestor (a table row, a card), so the
+ * whole of it opens the link. Add it to the one link in the row; the ancestor needs `relative`.
+ */
+export declare const linkStretchClass = "after:absolute after:inset-0";
+type TextLinkProps = {
+    /** Opens in a new tab: adds `target="_blank"` and `rel="noreferrer"`. */
+    external?: boolean | undefined;
+    /** The link covers its nearest `relative` ancestor, so the whole row or card is the click target. */
+    stretch?: boolean | undefined;
+} & Omit<ComponentPropsWithoutRef<"a">, "href"> & ({
+    href: string;
+    render?: LinkRender | undefined;
+} | {
+    href?: string | undefined;
+    render: LinkRender;
+});
+/**
+ * An inline text link in the accent colour. Every anchor prop goes on the `<a>`. With `render` it
+ * draws the app's own router `<Link>` instead (`render={(p) => <Link to="/terms" {...p} />}`).
+ */
+export declare function TextLink({ external, stretch, href, render, className, children, ...rest }: TextLinkProps): ReactElement;
+export {};

package/dist/TextLink.js

@@ -0,0 +1,23 @@
+import { cx, focusRing } from "./cx.js";
+import { renderLink } from "./link.js";
+/** The classes of an inline text link, for a router's own <Link> that should look like one. */
+export const linkClass = cx("rounded font-medium text-violet-600 underline-offset-2 transition-colors hover:text-violet-700", focusRing);
+/**
+ * Stretches a link's hit area over its nearest `relative` ancestor (a table row, a card), so the
+ * whole of it opens the link. Add it to the one link in the row; the ancestor needs `relative`.
+ */
+export const linkStretchClass = "after:absolute after:inset-0";
+/**
+ * An inline text link in the accent colour. Every anchor prop goes on the `<a>`. With `render` it
+ * draws the app's own router `<Link>` instead (`render={(p) => <Link to="/terms" {...p} />}`).
+ */
+export function TextLink({ external = false, stretch = false, href, render, className, children, ...rest }) {
+    return renderLink({
+        ...rest,
+        href,
+        render,
+        external,
+        className: cx(linkClass, stretch && linkStretchClass, className),
+        children,
+    });
+}

package/dist/Textarea.d.ts

@@ -1,3 +1,4 @@
 import type { ComponentPropsWithoutRef, ReactElement } from "react";
-/** A multi-line text input, styled like `Input`. `rows` defaults to 3. */
-export declare function Textarea({ className, ...rest }: ComponentPropsWithoutRef<"textarea">): ReactElement;
+import { type ControlProps } from "./control.js";
+/** A multi-line text input, styled like `Input`. `rows` defaults to 3. Takes `size` and `width` too. */
+export declare function Textarea({ size, width, className, ...rest }: ControlProps & Omit<ComponentPropsWithoutRef<"textarea">, "width">): ReactElement;

package/dist/Textarea.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { controlClass } from "./control.js";
+import { CONTROL_PAD, controlClass } from "./control.js";
 import { cx } from "./cx.js";
-/** A multi-line text input, styled like `Input`. `rows` defaults to 3. */
-export function Textarea({ className, ...rest }) {
-    return _jsx("textarea", { rows: 3, ...rest, className: cx(controlClass, "px-3", className) });
+/** A multi-line text input, styled like `Input`. `rows` defaults to 3. Takes `size` and `width` too. */
+export function Textarea({ size = "md", width = "full", className, ...rest }) {
+    return (_jsx("textarea", { rows: 3, ...rest, className: cx(controlClass(size, width), CONTROL_PAD[size].x, className) }));
 }

package/dist/Timeline.d.ts

@@ -0,0 +1,21 @@
+import { type ReactElement, type ReactNode } from "react";
+/**
+ * A vertical list of events, newest or oldest first as the caller orders them. A named `<ol>` of
+ * `TimelineItem`s on a rail; with no children it draws `empty` instead of an empty list.
+ */
+export declare function Timeline({ label, empty, children, }: {
+    /** Names the list (`aria-label`), e.g. "Status history". */
+    label: string;
+    /** Drawn in place of the list when there are no items. */
+    empty?: ReactNode;
+    children?: ReactNode;
+}): ReactElement | null;
+/**
+ * One event: a `title` (a `Pill`, a heading), a `time` the app has already formatted, and the
+ * `children` as a note under them.
+ */
+export declare function TimelineItem({ title, time, children, }: {
+    title: ReactNode;
+    time?: ReactNode;
+    children?: ReactNode;
+}): ReactElement;

package/dist/Timeline.js

@@ -0,0 +1,19 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children } from "react";
+/**
+ * A vertical list of events, newest or oldest first as the caller orders them. A named `<ol>` of
+ * `TimelineItem`s on a rail; with no children it draws `empty` instead of an empty list.
+ */
+export function Timeline({ label, empty, children, }) {
+    if (Children.toArray(children).length === 0) {
+        return empty == null ? null : _jsx(_Fragment, { children: empty });
+    }
+    return (_jsx("ol", { "aria-label": label, className: "flex flex-col", children: children }));
+}
+/**
+ * One event: a `title` (a `Pill`, a heading), a `time` the app has already formatted, and the
+ * `children` as a note under them.
+ */
+export function TimelineItem({ title, time, children, }) {
+    return (_jsxs("li", { className: "relative border-l border-slate-300 pb-5 pl-5 last:border-transparent last:pb-0", children: [_jsx("span", { "aria-hidden": "true", className: "absolute -left-[5px] top-1.5 h-2.5 w-2.5 rounded-full border-2 border-slate-300 bg-white" }), _jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1", children: [_jsx("span", { className: "text-sm font-medium text-slate-900", children: title }), time != null && _jsx("span", { className: "text-xs tabular-nums text-slate-500", children: time })] }), children != null && _jsx("div", { className: "mt-1 text-sm text-slate-700", children: children })] }));
+}

package/dist/Video.d.ts

@@ -0,0 +1,10 @@
+import type { ReactElement, VideoHTMLAttributes } from "react";
+/**
+ * A `<video>` with controls, full width and rounded; it loads metadata only, so the page does not
+ * pull the file until it is played. `src` is the app's own video; `captions` is a WebVTT file,
+ * offered as the default track. `children` is the fallback for a browser that cannot play it.
+ */
+export declare function Video({ src, captions, className, children, ...rest }: {
+    src: string;
+    captions?: string | undefined;
+} & Omit<VideoHTMLAttributes<HTMLVideoElement>, "src" | "controls">): ReactElement;

package/dist/Video.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+/**
+ * A `<video>` with controls, full width and rounded; it loads metadata only, so the page does not
+ * pull the file until it is played. `src` is the app's own video; `captions` is a WebVTT file,
+ * offered as the default track. `children` is the fallback for a browser that cannot play it.
+ */
+export function Video({ src, captions, className, children, ...rest }) {
+    return (_jsxs("video", { controls: true, preload: "metadata", src: src, className: cx("w-full rounded-lg", className), ...rest, children: [captions && _jsx("track", { kind: "captions", src: captions, default: true }), children] }));
+}

package/dist/colourScheme.d.ts

@@ -1,6 +1,15 @@
 export type ColourScheme = "light" | "dark";
-/** Put `scheme` on `root` (the `<html>` element by default): the `dark` class, and `color-scheme` so native controls and scrollbars follow. */
-export declare function applyColourScheme(scheme: ColourScheme, root?: HTMLElement): void;
+/** The class each scheme puts on `<html>`: none for light and `dark` for dark, unless the app's theme says otherwise (a light theme with a scope class of its own). */
+export type ColourSchemeClasses = {
+    light: string;
+    dark: string;
+};
+/** The class for `scheme`: what to render on `<html>` on the server so the first paint is right. `""` for the default light scheme. */
+export declare function schemeClass(scheme: ColourScheme, schemes?: ColourSchemeClasses): string;
+/** Which scheme `root` is in: dark when it carries the dark class, else light. */
+export declare function appliedColourScheme(root?: HTMLElement, schemes?: ColourSchemeClasses): ColourScheme;
+/** Put `scheme` on `root` (the `<html>` element by default): its class from `schemes` (default `dark` for dark and none for light), the other scheme's class taken off, and `color-scheme` so native controls and scrollbars follow. */
+export declare function applyColourScheme(scheme: ColourScheme, root?: HTMLElement, schemes?: ColourSchemeClasses): void;
 /** The stored choice, else the system preference. `fallback` (default `"light"`) is for when neither is available: server rendering, or storage that throws with no `matchMedia`. */
 export declare function readColourScheme(fallback?: ColourScheme): ColourScheme;
 /** Remember `scheme` for the next visit. A storage error is swallowed, so private mode does not crash. */

package/dist/colourScheme.js

@@ -1,9 +1,22 @@
 const STORAGE_KEY = "hackcove:colour-scheme";
 const DARK_QUERY = "(prefers-color-scheme: dark)";
 const isScheme = (value) => value === "light" || value === "dark";
-/** Put `scheme` on `root` (the `<html>` element by default): the `dark` class, and `color-scheme` so native controls and scrollbars follow. */
-export function applyColourScheme(scheme, root = document.documentElement) {
-    root.classList.toggle("dark", scheme === "dark");
+const DEFAULT_CLASSES = { light: "", dark: "dark" };
+/** The class for `scheme`: what to render on `<html>` on the server so the first paint is right. `""` for the default light scheme. */
+export function schemeClass(scheme, schemes = DEFAULT_CLASSES) {
+    return schemes[scheme];
+}
+/** Which scheme `root` is in: dark when it carries the dark class, else light. */
+export function appliedColourScheme(root = document.documentElement, schemes = DEFAULT_CLASSES) {
+    return schemes.dark !== "" && root.classList.contains(schemes.dark) ? "dark" : "light";
+}
+/** Put `scheme` on `root` (the `<html>` element by default): its class from `schemes` (default `dark` for dark and none for light), the other scheme's class taken off, and `color-scheme` so native controls and scrollbars follow. */
+export function applyColourScheme(scheme, root = document.documentElement, schemes = DEFAULT_CLASSES) {
+    const other = scheme === "dark" ? "light" : "dark";
+    if (schemes[other] !== "")
+        root.classList.remove(schemes[other]);
+    if (schemes[scheme] !== "")
+        root.classList.add(schemes[scheme]);
     root.style.colorScheme = scheme;
 }
 function storedScheme() {

package/dist/control.d.ts

@@ -1,2 +1,19 @@
-/** Shared look of text controls; each control adds its own horizontal padding. */
-export declare const controlClass = "w-full rounded-lg border border-slate-300 bg-white py-2 text-sm text-slate-900 placeholder:text-slate-400 transition hover:border-violet-400 disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-violet-600";
+export type ControlSize = "md" | "sm";
+/** `full` fills the parent (the default); `auto` is as wide as the content, or as wide as a `className` width says; the rest are fixed. */
+export type ControlWidth = "full" | "auto" | "xs" | "sm" | "md" | "lg";
+/** The props `Input`, `Select` and `Textarea` share. They replace the native `size` and `width`. */
+export type ControlProps = {
+    /** `sm` is compact, `text-xs` with less padding, for dense forms and table rows. */
+    size?: ControlSize | undefined;
+    /** `full` (default) fills the parent; `xs`, `sm`, `md`, `lg` are fixed; `auto` is as wide as its content, or its `className` width. */
+    width?: ControlWidth | undefined;
+};
+/** One width class per control, so a fixed width never fights `w-full`. `auto` has none. */
+export declare const CONTROL_WIDTH: Record<ControlWidth, string | undefined>;
+/** The horizontal padding of a control, and of an `Input`'s icon gutter. */
+export declare const CONTROL_PAD: Record<ControlSize, {
+    x: string;
+    icon: string;
+}>;
+/** Shared look of text controls; `size` sets the height and type, `width` the one width class. */
+export declare function controlClass(size?: ControlSize, width?: ControlWidth): string;

package/dist/control.js

@@ -1,3 +1,26 @@
 import { focusRing } from "./cx.js";
-/** Shared look of text controls; each control adds its own horizontal padding. */
-export const controlClass = `w-full rounded-lg border border-slate-300 bg-white py-2 text-sm text-slate-900 placeholder:text-slate-400 transition hover:border-violet-400 disabled:opacity-50 ${focusRing}`;
+const SIZE = { md: "py-2 text-sm", sm: "py-1 text-xs" };
+/** One width class per control, so a fixed width never fights `w-full`. `auto` has none. */
+export const CONTROL_WIDTH = {
+    full: "w-full",
+    auto: undefined,
+    xs: "w-20",
+    sm: "w-28",
+    md: "w-36",
+    lg: "w-48",
+};
+/** The horizontal padding of a control, and of an `Input`'s icon gutter. */
+export const CONTROL_PAD = {
+    md: { x: "px-3", icon: "pr-3 pl-9" },
+    sm: { x: "px-2", icon: "pr-2 pl-7" },
+};
+/** Shared look of text controls; `size` sets the height and type, `width` the one width class. */
+export function controlClass(size = "md", width = "full") {
+    return [
+        CONTROL_WIDTH[width],
+        SIZE[size],
+        `rounded-lg border border-slate-300 bg-white text-slate-900 placeholder:text-slate-400 transition hover:border-violet-400 disabled:opacity-50 ${focusRing}`,
+    ]
+        .filter(Boolean)
+        .join(" ");
+}

package/dist/index.d.ts

@@ -1,32 +1,54 @@
-export { Card, EpicHeader, Empty, PageTitle, Pill, groupByEpic } from "./ui.js";
+export { Card, EpicHeader, Empty, PageTitle, Pill, groupByEpic, type PillTone } from "./ui.js";
+export { Badge } from "./Badge.js";
+export { StatTile, type StatTileTone } from "./StatTile.js";
+export { ProgressBar, type BarSize, type BarTone } from "./ProgressBar.js";
+export { SplitBar } from "./SplitBar.js";
 export { Markdown } from "./Markdown.js";
 export { AppShell, appShellRootClass } from "./AppShell.js";
 export { Container } from "./Container.js";
 export { PageHeader, type PageHeaderProps } from "./PageHeader.js";
-export { CardGrid, CenteredLayout, DetailLayout, FormLayout, FullBleedLayout, ListLayout, SidebarLayout, } from "./PageLayouts.js";
-export { Section, Stack, type StackGap } from "./Stack.js";
-export { Button, buttonClass, type ButtonVariant } from "./Button.js";
+export { CardGrid, CenteredLayout, DetailLayout, FormLayout, FullBleedLayout, ListLayout, ProseLayout, SidebarLayout, } from "./PageLayouts.js";
+export { Section, Stack, type StackGap, type StackWidth } from "./Stack.js";
+export { Button, buttonClass, type ButtonLook, type ButtonSize, type ButtonTone, type ButtonVariant, } from "./Button.js";
+export { ButtonGroup } from "./ButtonGroup.js";
+export { ButtonLink } from "./ButtonLink.js";
+export { type LinkRender, type LinkRenderProps } from "./link.js";
 export { Avatar, avatarColourClass, initialsOf, type AvatarSize } from "./Avatar.js";
-export { Breadcrumbs, crumbLinkClass } from "./Breadcrumbs.js";
+export { Breadcrumbs, crumbLinkClass, type Crumb } from "./Breadcrumbs.js";
+export { BulletList } from "./BulletList.js";
 export { Callout, type CalloutTone } from "./Callout.js";
+export { ListRow, type ListRowProps } from "./ListRow.js";
+export { rowLinkClass, Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow, } from "./Table.js";
+export { Timeline, TimelineItem } from "./Timeline.js";
+export { Code } from "./Code.js";
+export { Divider } from "./Divider.js";
+export { PageFade, startPageTransition } from "./PageFade.js";
 export { Dialog, type DialogProps } from "./Dialog.js";
+export { Drawer, type DrawerProps } from "./Drawer.js";
 export { IconButton } from "./IconButton.js";
 export { ColourSchemeToggle } from "./ColourSchemeToggle.js";
-export { applyColourScheme, colourSchemeScript, readColourScheme, storeColourScheme, type ColourScheme, } from "./colourScheme.js";
+export { applyColourScheme, schemeClass, type ColourSchemeClasses, colourSchemeScript, readColourScheme, storeColourScheme, type ColourScheme, } from "./colourScheme.js";
 export { NavTabs, navTabClass, type NavTab } from "./NavTabs.js";
+export { Tabs, type Tab } from "./Tabs.js";
+export { SegmentedControl, type Segment } from "./SegmentedControl.js";
 export { ToggleChip } from "./ToggleChip.js";
 export { FilterGroup } from "./FilterGroup.js";
 export { Checkbox } from "./Checkbox.js";
+export { FileDrop } from "./FileDrop.js";
 export { CopyButton } from "./CopyButton.js";
 export { CopyLine } from "./CopyLine.js";
 export { Field } from "./Field.js";
 export { FieldDialog, type FieldDialogProps } from "./FieldDialog.js";
 export { Input } from "./Input.js";
+export type { ControlSize, ControlWidth } from "./control.js";
+export { InlineLinks, type InlineLinksSeparator } from "./InlineLinks.js";
 export { Kbd } from "./Kbd.js";
 export { KeyValue, KeyValueList } from "./KeyValueList.js";
 export { Select } from "./Select.js";
 export { Textarea } from "./Textarea.js";
-export { Body, BodyStrong, Caption, Display, Lead, ModalHeading, Overline, PageHeading, SectionHeading, SubsectionHeading, Subtitle, type TypographyColor, type TypographyProps, } from "./typography.js";
+export { Video } from "./Video.js";
+export { linkClass, linkStretchClass, TextLink } from "./TextLink.js";
+export { Body, BodyStrong, Caption, Display, Lead, ModalHeading, Overline, PageHeading, SectionHeading, SubsectionHeading, type SubsectionHeadingSize, Subtitle, type TypographyColor, type TypographyProps, } from "./typography.js";
 export { DateField, type DateFieldProps } from "./DateField.js";
 export { DatePicker, type DatePickerProps } from "./DatePicker.js";
 export { fromISODate, toISODate } from "./isoDate.js";

package/dist/index.js

@@ -1,31 +1,52 @@
 export { Card, EpicHeader, Empty, PageTitle, Pill, groupByEpic } from "./ui.js";
+export { Badge } from "./Badge.js";
+export { StatTile } from "./StatTile.js";
+export { ProgressBar } from "./ProgressBar.js";
+export { SplitBar } from "./SplitBar.js";
 export { Markdown } from "./Markdown.js";
 export { AppShell, appShellRootClass } from "./AppShell.js";
 export { Container } from "./Container.js";
 export { PageHeader } from "./PageHeader.js";
-export { CardGrid, CenteredLayout, DetailLayout, FormLayout, FullBleedLayout, ListLayout, SidebarLayout, } from "./PageLayouts.js";
+export { CardGrid, CenteredLayout, DetailLayout, FormLayout, FullBleedLayout, ListLayout, ProseLayout, SidebarLayout, } from "./PageLayouts.js";
 export { Section, Stack } from "./Stack.js";
-export { Button, buttonClass } from "./Button.js";
+export { Button, buttonClass, } from "./Button.js";
+export { ButtonGroup } from "./ButtonGroup.js";
+export { ButtonLink } from "./ButtonLink.js";
+export {} from "./link.js";
 export { Avatar, avatarColourClass, initialsOf } from "./Avatar.js";
 export { Breadcrumbs, crumbLinkClass } from "./Breadcrumbs.js";
+export { BulletList } from "./BulletList.js";
 export { Callout } from "./Callout.js";
+export { ListRow } from "./ListRow.js";
+export { rowLinkClass, Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow, } from "./Table.js";
+export { Timeline, TimelineItem } from "./Timeline.js";
+export { Code } from "./Code.js";
+export { Divider } from "./Divider.js";
+export { PageFade, startPageTransition } from "./PageFade.js";
 export { Dialog } from "./Dialog.js";
+export { Drawer } from "./Drawer.js";
 export { IconButton } from "./IconButton.js";
 export { ColourSchemeToggle } from "./ColourSchemeToggle.js";
-export { applyColourScheme, colourSchemeScript, readColourScheme, storeColourScheme, } from "./colourScheme.js";
+export { applyColourScheme, schemeClass, colourSchemeScript, readColourScheme, storeColourScheme, } from "./colourScheme.js";
 export { NavTabs, navTabClass } from "./NavTabs.js";
+export { Tabs } from "./Tabs.js";
+export { SegmentedControl } from "./SegmentedControl.js";
 export { ToggleChip } from "./ToggleChip.js";
 export { FilterGroup } from "./FilterGroup.js";
 export { Checkbox } from "./Checkbox.js";
+export { FileDrop } from "./FileDrop.js";
 export { CopyButton } from "./CopyButton.js";
 export { CopyLine } from "./CopyLine.js";
 export { Field } from "./Field.js";
 export { FieldDialog } from "./FieldDialog.js";
 export { Input } from "./Input.js";
+export { InlineLinks } from "./InlineLinks.js";
 export { Kbd } from "./Kbd.js";
 export { KeyValue, KeyValueList } from "./KeyValueList.js";
 export { Select } from "./Select.js";
 export { Textarea } from "./Textarea.js";
+export { Video } from "./Video.js";
+export { linkClass, linkStretchClass, TextLink } from "./TextLink.js";
 export { Body, BodyStrong, Caption, Display, Lead, ModalHeading, Overline, PageHeading, SectionHeading, SubsectionHeading, Subtitle, } from "./typography.js";
 export { DateField } from "./DateField.js";
 export { DatePicker } from "./DatePicker.js";

package/dist/link.d.ts

@@ -0,0 +1,22 @@
+import type { ComponentPropsWithoutRef, ReactElement, ReactNode } from "react";
+/**
+ * What a `render` function receives to draw a link with the app's own router `<Link>`: the
+ * component's classes, its label as `children`, and (for a tab that is current or a link that is
+ * external) `aria-current`, `target` and `rel`. Spread it on the router's link:
+ * `render: (props) => <Link to="/quotes" {...props} />`. `@hackcove/ui` has no router dependency.
+ */
+export type LinkRenderProps = Omit<ComponentPropsWithoutRef<"a">, "href" | "className" | "children"> & {
+    className: string;
+    children: ReactNode;
+};
+/** Draws one link. The component hands it `LinkRenderProps`; it returns the app's own link element. */
+export type LinkRender = (props: LinkRenderProps) => ReactNode;
+/**
+ * A link drawn by `render` when there is one, otherwise a plain `<a href>`. `external` adds
+ * `target="_blank"` and `rel="noreferrer"` to either, unless the caller passes its own.
+ */
+export declare function renderLink({ href, render, external, ...props }: LinkRenderProps & {
+    href?: string | undefined;
+    render?: LinkRender | undefined;
+    external?: boolean | undefined;
+}): ReactElement;

package/dist/link.js

@@ -0,0 +1,11 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A link drawn by `render` when there is one, otherwise a plain `<a href>`. `external` adds
+ * `target="_blank"` and `rel="noreferrer"` to either, unless the caller passes its own.
+ */
+export function renderLink({ href, render, external = false, ...props }) {
+    const all = external ? { target: "_blank", rel: "noreferrer", ...props } : props;
+    if (render)
+        return _jsx(_Fragment, { children: render(all) });
+    return _jsx("a", { ...(href === undefined ? {} : { href }), ...all });
+}

package/dist/switcher.d.ts

@@ -0,0 +1,66 @@
+import { type ReactElement, type ReactNode } from "react";
+import { type LinkRender } from "./link.js";
+type Option = {
+    /** What `value` is set to when this option is current. */
+    value: string;
+    label: ReactNode;
+};
+/** An option that is a button: it calls `onChange(value)`. */
+export type SwitchButton = Option & {
+    disabled?: boolean;
+    /** The id of the element this option controls (a tab's panel). */
+    controls?: string;
+    href?: undefined;
+    render?: undefined;
+    external?: undefined;
+};
+/**
+ * An option that is a link: `href`, or `render` to draw the app's own router `<Link>`. The router
+ * changes the page; `value` only marks which one is current. `external` opens a new tab.
+ */
+export type SwitchLink = Option & {
+    disabled?: undefined;
+    controls?: undefined;
+    external?: boolean;
+} & ({
+    href: string;
+    render?: LinkRender;
+} | {
+    href?: string;
+    render: LinkRender;
+});
+/** One option of a Tabs or SegmentedControl: a button or a link, never both in one group. */
+export type SwitchItem = SwitchButton | SwitchLink;
+type Shared = {
+    /** The `value` of the current option. */
+    value: string;
+    /** The accessible name of the group. */
+    label: string;
+    className?: string;
+};
+export type SwitchProps = Shared & ({
+    items: SwitchButton[];
+    /** Called with the option's `value` when one is chosen, by click or arrow key. */
+    onChange: (value: string) => void;
+} | {
+    items: SwitchLink[];
+    onChange?: undefined;
+});
+type Parts = {
+    /** The roles of a group of buttons; a group with links is a `<nav>` instead. */
+    group: "tablist" | "radiogroup";
+    item: "tab" | "radio";
+    /** The vertical arrows move too, as in a radio group. */
+    vertical: boolean;
+    root: string;
+    option: (active: boolean) => string;
+};
+/**
+ * The shared body of Tabs and SegmentedControl: a row of options with one current. Buttons form a
+ * `tablist` or `radiogroup` with a single tab stop and arrow-key movement (the arrow focuses and
+ * chooses); links form a `<nav>` with `aria-current="page"` on the current one.
+ */
+export declare function Switcher({ items, value, onChange, label, className, parts, }: SwitchProps & {
+    parts: Parts;
+}): ReactElement;
+export {};

package/dist/switcher.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment } from "react";
+import { cx } from "./cx.js";
+import { renderLink } from "./link.js";
+/** The index a key moves to from `at` among `count` enabled options, wrapping; -1 for a key that does not move. */
+function target(key, at, count, vertical) {
+    if (key === "ArrowRight" || (vertical && key === "ArrowDown"))
+        return (at + 1) % count;
+    if (key === "ArrowLeft" || (vertical && key === "ArrowUp"))
+        return (at - 1 + count) % count;
+    if (key === "Home")
+        return 0;
+    if (key === "End")
+        return count - 1;
+    return -1;
+}
+const isLinks = (items) => items.some((item) => item.href !== undefined || item.render !== undefined);
+/**
+ * The shared body of Tabs and SegmentedControl: a row of options with one current. Buttons form a
+ * `tablist` or `radiogroup` with a single tab stop and arrow-key movement (the arrow focuses and
+ * chooses); links form a `<nav>` with `aria-current="page"` on the current one.
+ */
+export function Switcher({ items, value, onChange, label, className, parts, }) {
+    const root = cx(parts.root, className);
+    if (isLinks(items)) {
+        return (_jsx("nav", { "aria-label": label, className: root, children: items.map((item) => (_jsx(Fragment, { children: renderLink({
+                    href: item.href,
+                    render: item.render,
+                    external: item.external,
+                    className: parts.option(item.value === value),
+                    "aria-current": item.value === value ? "page" : undefined,
+                    children: item.label,
+                }) }, item.value))) }));
+    }
+    const enabled = items.filter((item) => !item.disabled);
+    const stop = enabled.some((item) => item.value === value) ? value : enabled[0]?.value;
+    function onKeyDown(event) {
+        const buttons = [...event.currentTarget.querySelectorAll("button:not(:disabled)")];
+        const at = buttons.findIndex((button) => button === event.target);
+        if (at < 0)
+            return;
+        const to = target(event.key, at, buttons.length, parts.vertical);
+        const button = buttons[to];
+        if (!(button instanceof HTMLButtonElement))
+            return;
+        event.preventDefault();
+        button.focus();
+        button.click();
+    }
+    return (_jsx("div", { role: parts.group, "aria-label": label, onKeyDown: onKeyDown, className: root, children: items.map((item) => (_jsx("button", { type: "button", role: parts.item, ...(parts.item === "tab"
+                ? { "aria-selected": item.value === value }
+                : { "aria-checked": item.value === value }), ...(item.controls === undefined ? {} : { "aria-controls": item.controls }), tabIndex: item.value === stop ? 0 : -1, disabled: item.disabled === true, onClick: () => onChange?.(item.value), className: cx(parts.option(item.value === value), "disabled:opacity-50"), children: item.label }, item.value))) }));
+}