@astralarium/repo-ui 0.0.0-stage → 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Astralarium
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,62 @@
-# Temporary Holding Version
+# `@astralarium/repo-ui`
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Headless React UI following Base UI patterns.
+
+App setup:
+
+- `themeScript(cookie)` in `<head>` to apply theme pre-paint.
+
+```tsx
+const [title, setTitle] = useDebounce(draft.title, (title) => save({ title }));
+
+// debounced search param (./router)
+const [query, setQuery] = useSearchParam("q");
+
+// sticky headers: level n sits at `top: var(--sticky-h<n>)`
+<StickyHeightProvider>{children}</StickyHeightProvider>;
+<h2
+  ref={useStickyHeight(1)}
+  style={{ position: "sticky", top: "var(--sticky-h1)" }}
+/>;
+```
+
+Parts carry `data-slot` and state attributes; the app supplies styling.
+Responsive tables: below its breakpoint, a column collapses into the lead cell;
+the app's CSS hides the inactive copy.
+
+```tsx
+const columns = [
+  { key: "name", label: "Name", render: (row: Row) => row.name },
+  {
+    key: "rank",
+    label: "Rank",
+    breakpoint: "md",
+    render: (row: Row) => row.rank,
+  },
+] as const;
+
+<table>
+  <ResponsiveTH columns={columns} />
+  <tbody>
+    {rows.map((row, index) => (
+      <ResponsiveTR key={row.id} item={row} index={index} columns={columns} />
+    ))}
+  </tbody>
+</table>;
+```
+
+```css
+[data-slot="responsive-cell"][data-breakpoint="md"],
+[data-slot="responsive-header"][data-breakpoint="md"] {
+  display: none;
+}
+@media (width >= 48rem) {
+  [data-slot="responsive-cell"][data-breakpoint="md"],
+  [data-slot="responsive-header"][data-breakpoint="md"] {
+    display: table-cell;
+  }
+  [data-slot="responsive-detail"][data-breakpoint="md"] {
+    display: none;
+  }
+}
+```

package/dist/error-boundary.d.ts

@@ -0,0 +1,29 @@
+import { Component, type ErrorInfo, type ReactNode } from "react";
+/** `ErrorBoundary` props. */
+export interface ErrorBoundaryProps {
+    /** A change clears a caught fault and renders `children` afresh. */
+    resetKey: string;
+    /** Shown in place of `children` after a fault. */
+    fallback: ReactNode;
+    /** Reports each caught fault. */
+    onCatch?: (error: unknown, info: ErrorInfo) => void;
+    children: ReactNode;
+}
+interface ErrorBoundaryState {
+    /** The caught fault, boxed: a thrown value may be falsy. */
+    caught: {
+        error: unknown;
+    } | null;
+    /** The `resetKey` the fault belongs to. */
+    resetKey: string;
+}
+/** Catches render faults below, showing `fallback` until `resetKey`
+ *  changes. */
+export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    state: ErrorBoundaryState;
+    static getDerivedStateFromError(error: unknown): Partial<ErrorBoundaryState>;
+    static getDerivedStateFromProps(props: ErrorBoundaryProps, state: ErrorBoundaryState): Partial<ErrorBoundaryState> | null;
+    componentDidCatch(error: unknown, info: ErrorInfo): void;
+    render(): ReactNode;
+}
+export {};

package/dist/error-boundary.js

@@ -0,0 +1,30 @@
+"use client";
+
+import { Component } from "react";
+/** Catches render faults below, showing `fallback` until `resetKey`
+ *  changes. */
+export class ErrorBoundary extends Component {
+  state = {
+    caught: null,
+    resetKey: this.props.resetKey
+  };
+  static getDerivedStateFromError(error) {
+    return {
+      caught: {
+        error
+      }
+    };
+  }
+  static getDerivedStateFromProps(props, state) {
+    return props.resetKey === state.resetKey ? null : {
+      caught: null,
+      resetKey: props.resetKey
+    };
+  }
+  componentDidCatch(error, info) {
+    this.props.onCatch?.(error, info);
+  }
+  render() {
+    return this.state.caught ? this.props.fallback : this.props.children;
+  }
+}

package/dist/index.d.ts

@@ -0,0 +1,23 @@
+/** Headless React building blocks: theme, tree, page tree, timeline, sorted
+ *  lookups, status, error boundary, storage, sticky headers, responsive
+ *  tables, external scripts and small hooks. */
+export * from "./error-boundary.tsx";
+export * from "./lazy-google-analytics.tsx";
+export * from "./page-tree.ts";
+export * from "./responsive-table.tsx";
+export * from "./sorted.ts";
+export * from "./status.tsx";
+export * from "./sticky-height.tsx";
+export * from "./storage.ts";
+export * from "./theme/index.ts";
+export * from "./timeline.ts";
+export * from "./tree/index.ts";
+export * from "./use-copy-feedback.ts";
+export * from "./use-debounce.ts";
+export * from "./use-external-script.ts";
+export * from "./use-frame.ts";
+export * from "./use-hover-focus.ts";
+export * from "./use-media-query.ts";
+export * from "./use-pausable-hover.ts";
+export * from "./use-pulse-style.ts";
+export { useStickyHeight } from "./use-sticky-height.ts";

package/dist/index.js

@@ -0,0 +1,23 @@
+/** Headless React building blocks: theme, tree, page tree, timeline, sorted
+ *  lookups, status, error boundary, storage, sticky headers, responsive
+ *  tables, external scripts and small hooks. */
+export * from "./error-boundary.js";
+export * from "./lazy-google-analytics.js";
+export * from "./page-tree.js";
+export * from "./responsive-table.js";
+export * from "./sorted.js";
+export * from "./status.js";
+export * from "./sticky-height.js";
+export * from "./storage.js";
+export * from "./theme/index.js";
+export * from "./timeline.js";
+export * from "./tree/index.js";
+export * from "./use-copy-feedback.js";
+export * from "./use-debounce.js";
+export * from "./use-external-script.js";
+export * from "./use-frame.js";
+export * from "./use-hover-focus.js";
+export * from "./use-media-query.js";
+export * from "./use-pausable-hover.js";
+export * from "./use-pulse-style.js";
+export { useStickyHeight } from "./use-sticky-height.js";

package/dist/l10n/repo-ui/en.json

@@ -0,0 +1,14 @@
+{
+  "@astralarium/repo-ui/router/tab-bar.messages#barName": {
+    "defaultMessage": "Tabs",
+    "description": "Accessible name of a tab bar switching between page sections. Shows: screen readers."
+  },
+  "@astralarium/repo-ui/slider/slider.messages#rangeEnd": {
+    "defaultMessage": "{value}, range end",
+    "description": "Spoken value of a range slider's last thumb. Shows: screen readers, sliders with several thumbs. Arguments: value (string) the thumb's formatted value."
+  },
+  "@astralarium/repo-ui/slider/slider.messages#rangeStart": {
+    "defaultMessage": "{value}, range start",
+    "description": "Spoken value of a range slider's first thumb. Shows: screen readers, sliders with several thumbs. Arguments: value (string) the thumb's formatted value."
+  }
+}

package/dist/lazy-google-analytics.d.ts

@@ -0,0 +1,4 @@
+/** Loads Google Analytics property `gaId` once the browser idles. */
+export declare function LazyGoogleAnalytics({ gaId }: {
+    gaId: string;
+}): null;

package/dist/lazy-google-analytics.js

@@ -0,0 +1,34 @@
+"use client";
+
+import { c as _c } from "react/compiler-runtime";
+import { useExternalScript } from "./use-external-script.js";
+/** Queues gtag's start and `gaId`'s config ahead of its script. */
+function initGtag(gaId) {
+  const dataLayer = window.dataLayer ??= [];
+  function gtag(..._args) {
+    // eslint-disable-next-line prefer-rest-params -- gtag.js reads queued `arguments` objects; arrays go unread
+    dataLayer.push(arguments);
+  }
+  gtag("js", new Date());
+  gtag("config", gaId);
+}
+/** Loads Google Analytics property `gaId` once the browser idles. */
+export function LazyGoogleAnalytics(t0) {
+  const $ = _c(2);
+  const {
+    gaId
+  } = t0;
+  let t1;
+  if ($[0] !== gaId) {
+    t1 = {
+      idle: true,
+      init: () => initGtag(gaId)
+    };
+    $[0] = gaId;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  useExternalScript(`https://www.googletagmanager.com/gtag/js?id=${encodeURIComponent(gaId)}`, t1);
+  return null;
+}

package/dist/page-tree.d.ts

@@ -0,0 +1,25 @@
+/** The router's static paths as a tree, and a breadcrumb trail through it. */
+/** A static path: a page, an ancestor of pages, or both. */
+export interface PageNode {
+    /** The path's last segment; empty at the root. */
+    segment: string;
+    /** The path from the root. */
+    path: string;
+    /** A page serves `path`. */
+    page: boolean;
+    /** Static paths one segment deeper, in first-given order. */
+    children: PageNode[];
+}
+/** One path segment of the trail. */
+export interface Crumb {
+    /** The path through this segment. */
+    path: string;
+    /** The static paths beside `path`, itself included; only itself for
+     *  the trail's first crumb; empty off the tree. */
+    siblings: PageNode[];
+}
+/** `paths` as a tree rooted at `/`. Paths with a param or splat segment
+ *  (`$`) are left out. */
+export declare function pageTree(paths: Iterable<string>): PageNode;
+/** `pathname`'s segments, located in `tree`. */
+export declare function crumbsOf(pathname: string, tree: PageNode): Crumb[];

package/dist/page-tree.js

@@ -0,0 +1,45 @@
+/** The router's static paths as a tree, and a breadcrumb trail through it. */
+/** `paths` as a tree rooted at `/`. Paths with a param or splat segment
+ *  (`$`) are left out. */
+export function pageTree(paths) {
+  const root = {
+    segment: "",
+    path: "/",
+    page: false,
+    children: []
+  };
+  for (const path of paths) {
+    const segments = path.split("/").filter(Boolean);
+    if (segments.some(segment => segment.includes("$"))) continue;
+    let node = root;
+    for (const segment of segments) {
+      let child = node.children.find(c => c.segment === segment);
+      if (!child) {
+        child = {
+          segment,
+          path: `${node === root ? "" : node.path}/${segment}`,
+          page: false,
+          children: []
+        };
+        node.children.push(child);
+      }
+      node = child;
+    }
+    node.page = true;
+  }
+  return root;
+}
+/** `pathname`'s segments, located in `tree`. */
+export function crumbsOf(pathname, tree) {
+  const segments = pathname.split("/").filter(Boolean);
+  let parent;
+  let node = tree;
+  return segments.map((segment, i) => {
+    parent = node;
+    node = parent?.children.find(c => c.segment === segment);
+    return {
+      path: `/${segments.slice(0, i + 1).join("/")}`,
+      siblings: !node ? [] : i > 0 && parent ? parent.children : [node]
+    };
+  });
+}

package/dist/responsive-table.d.ts

@@ -0,0 +1,54 @@
+import type { ComponentProps, ReactNode } from "react";
+/** Tailwind's breakpoints, smallest first. */
+declare const TAILWIND_BREAKPOINTS: readonly ["sm", "md", "lg", "xl", "2xl"];
+/** A Tailwind breakpoint. */
+export type TailwindBreakpoint = (typeof TAILWIND_BREAKPOINTS)[number];
+/** A column's header: its label and where it collapses. */
+export interface ResponsiveColumnLabel<B extends string = TailwindBreakpoint> {
+    key: string;
+    /** Header text; also the detail's `<dt>`, visually hidden. */
+    label?: ReactNode;
+    /** From this breakpoint up, the column shows as a cell; below it, as a
+     *  detail in the lead cell. Absent, or on the lead column: always a
+     *  cell. */
+    breakpoint?: B;
+    /** Class of the column's `<th>` and `<td>`. */
+    className?: string;
+    /** Class of the column's `<dd>`. */
+    detailClassName?: string;
+    colSpan?: number;
+}
+/** A column: its header and how it renders a row's item. */
+export interface ResponsiveColumn<T, B extends string = TailwindBreakpoint> extends ResponsiveColumnLabel<B> {
+    /** The cell's content for the row at `index`. */
+    render: (item: T, index: number) => ReactNode;
+    /** The detail's content; `render`'s by default. */
+    renderDetail?: (item: T, index: number) => ReactNode;
+}
+/** `ResponsiveTH` props: a `<thead>`'s, and the columns it heads. */
+export interface ResponsiveTHProps<B extends string = TailwindBreakpoint> extends Omit<ComponentProps<"thead">, "children"> {
+    columns: readonly ResponsiveColumnLabel<B>[];
+}
+/** The table head: one `<th>` per column. */
+export declare function ResponsiveTH<B extends string = TailwindBreakpoint>({ columns, ...props }: ResponsiveTHProps<B>): import("react/jsx-runtime").JSX.Element;
+/** `ResponsiveTR` props: a `<tr>`'s, the item it renders, and the app's
+ *  breakpoints, required for breakpoints beyond Tailwind's. */
+export type ResponsiveTRProps<T, B extends string = TailwindBreakpoint> = ResponsiveTRBaseProps<T, B> & ([B] extends [TailwindBreakpoint] ? Partial<ResponsiveTRBreakpoints<B>> : ResponsiveTRBreakpoints<B>);
+/** `ResponsiveTR` props besides `breakpoints`. */
+interface ResponsiveTRBaseProps<T, B extends string = TailwindBreakpoint> extends Omit<ComponentProps<"tr">, "children"> {
+    item: T;
+    /** The row's index, passed to `render`. */
+    index: number;
+    columns: readonly ResponsiveColumn<T, B>[];
+    /** Renders the lead as the row's header, `<th scope="row">`. */
+    rowHeader?: boolean;
+}
+/** `ResponsiveTR`'s breakpoint order. */
+interface ResponsiveTRBreakpoints<B extends string> {
+    /** The app's breakpoints, smallest first; Tailwind's when omitted. */
+    breakpoints: readonly B[];
+}
+/** A body row: its item's cells, the collapsing columns repeated as
+ *  details in the lead cell. */
+export declare function ResponsiveTR<T, B extends string = TailwindBreakpoint>({ item, index, columns, breakpoints, rowHeader, ...props }: ResponsiveTRProps<T, B>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/responsive-table.js

@@ -0,0 +1,180 @@
+import { c as _c } from "react/compiler-runtime";
+/**
+ * Table rows whose columns collapse below a breakpoint into the lead
+ * cell's `<dl>`. Parts carry `data-slot`; `data-breakpoint` names where
+ * a part's layout changes, and the app's CSS shows or hides each part
+ * there:
+ * - `responsive-header` / `responsive-cell`: the column's `<th>` / `<td>`,
+ *   a cell from its breakpoint up. The lead column is always a cell.
+ * - `responsive-lead`: the row's first `<td>` (or `<th scope="row">`),
+ *   holding the details; the lowest breakpoint, where the first column
+ *   leaves it.
+ * - `responsive-details`: the lead's `<dl>`; the highest breakpoint, where
+ *   the last column leaves it.
+ * - `responsive-detail`: a column's `<dt>` + `<dd>` in the `<dl>`, until
+ *   its breakpoint.
+ */
+import { visuallyHidden } from "@base-ui/utils/visuallyHidden";
+/** Tailwind's breakpoints, smallest first. */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const TAILWIND_BREAKPOINTS = ["sm", "md", "lg", "xl", "2xl"];
+/** The table head: one `<th>` per column. */
+export function ResponsiveTH(t0) {
+  const $ = _c(10);
+  let columns;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      columns,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = columns;
+    $[2] = props;
+  } else {
+    columns = $[1];
+    props = $[2];
+  }
+  let t1;
+  if ($[3] !== columns) {
+    t1 = columns.map(_temp);
+    $[3] = columns;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  let t2;
+  if ($[5] !== t1) {
+    t2 = /*#__PURE__*/_jsx("tr", {
+      children: t1
+    });
+    $[5] = t1;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  let t3;
+  if ($[7] !== props || $[8] !== t2) {
+    t3 = /*#__PURE__*/_jsx("thead", {
+      "data-slot": "responsive-head",
+      ...props,
+      children: t2
+    });
+    $[7] = props;
+    $[8] = t2;
+    $[9] = t3;
+  } else {
+    t3 = $[9];
+  }
+  return t3;
+}
+/** The lowest and highest of `breakpoints` the columns name. */
+function _temp(column, index) {
+  return /*#__PURE__*/_jsx("th", {
+    scope: "col",
+    colSpan: column.colSpan,
+    className: column.className,
+    "data-slot": "responsive-header",
+    "data-breakpoint": index === 0 ? undefined : column.breakpoint,
+    children: column.label
+  }, column.key);
+}
+function breakpointRange(columns, breakpoints) {
+  const named = breakpoints.filter(breakpoint => columns.some(column => column.breakpoint === breakpoint));
+  return {
+    min: named[0],
+    max: named.at(-1)
+  };
+}
+/** A body row: its item's cells, the collapsing columns repeated as
+ *  details in the lead cell. */
+export function ResponsiveTR(t0) {
+  const $ = _c(14);
+  let columns;
+  let index;
+  let item;
+  let props;
+  let t1;
+  let t2;
+  if ($[0] !== t0) {
+    ({
+      item,
+      index,
+      columns,
+      breakpoints: t1,
+      rowHeader: t2,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = columns;
+    $[2] = index;
+    $[3] = item;
+    $[4] = props;
+    $[5] = t1;
+    $[6] = t2;
+  } else {
+    columns = $[1];
+    index = $[2];
+    item = $[3];
+    props = $[4];
+    t1 = $[5];
+    t2 = $[6];
+  }
+  const breakpoints = t1 === undefined ? TAILWIND_BREAKPOINTS : t1;
+  const rowHeader = t2 === undefined ? false : t2;
+  let t3;
+  if ($[7] !== breakpoints || $[8] !== columns || $[9] !== index || $[10] !== item || $[11] !== props || $[12] !== rowHeader) {
+    const [lead, ...rest] = columns;
+    const collapsing = rest.filter(_temp2);
+    const {
+      min,
+      max
+    } = breakpointRange(collapsing, breakpoints);
+    const Lead = rowHeader ? "th" : "td";
+    t3 = /*#__PURE__*/_jsxs("tr", {
+      "data-slot": "responsive-row",
+      ...props,
+      children: [lead ? /*#__PURE__*/_jsxs(Lead, {
+        scope: rowHeader ? "row" : undefined,
+        colSpan: lead.colSpan,
+        className: lead.className,
+        "data-slot": "responsive-lead",
+        "data-breakpoint": min,
+        children: [lead.render(item, index), collapsing.length > 0 ? /*#__PURE__*/_jsx("dl", {
+          "data-slot": "responsive-details",
+          "data-breakpoint": max,
+          children: collapsing.map(column_0 => /*#__PURE__*/_jsxs("div", {
+            "data-slot": "responsive-detail",
+            "data-breakpoint": column_0.breakpoint,
+            children: [/*#__PURE__*/_jsx("dt", {
+              style: visuallyHidden,
+              children: column_0.label
+            }), /*#__PURE__*/_jsx("dd", {
+              className: column_0.detailClassName,
+              children: (column_0.renderDetail ?? column_0.render)(item, index)
+            })]
+          }, column_0.key))
+        }) : null]
+      }) : null, rest.map(column_1 => /*#__PURE__*/_jsx("td", {
+        colSpan: column_1.colSpan,
+        className: column_1.className,
+        "data-slot": "responsive-cell",
+        "data-breakpoint": column_1.breakpoint,
+        children: column_1.render(item, index)
+      }, column_1.key))]
+    });
+    $[7] = breakpoints;
+    $[8] = columns;
+    $[9] = index;
+    $[10] = item;
+    $[11] = props;
+    $[12] = rowHeader;
+    $[13] = t3;
+  } else {
+    t3 = $[13];
+  }
+  return t3;
+}
+function _temp2(column) {
+  return column.breakpoint !== undefined;
+}

package/dist/router/dev-route.d.ts

@@ -0,0 +1,29 @@
+import { type RouteComponent } from "@tanstack/react-router";
+import type { ReactNode } from "react";
+/** A dev page module: its default export renders the page. */
+export interface DevPageModule {
+    default: () => ReactNode;
+}
+/**
+ * The page module's loader, or `false` once the build compiled it out.
+ * Call sites write `import.meta.env.DEV && (() => import("~dev/…"))`: the
+ * literal guard satisfies `dev-only/imports`, and `vite build` folds it
+ * to `false`.
+ */
+export type DevPageLoad = false | (() => Promise<DevPageModule>);
+/** How a dev page renders. */
+export interface DevRouteOptions {
+    /** Render in the browser only (`ssr: false`): canvas scenes. */
+    clientOnly?: boolean;
+}
+/** TanStack route options; spread beside `validateSearch` and the like. */
+export interface DevRoute {
+    /** Throws `notFound()` where the page was compiled out. */
+    beforeLoad: () => void;
+    /** The lazily loaded page; renders nothing where compiled out. */
+    component: RouteComponent;
+    /** `false` with `clientOnly`; absent otherwise. */
+    ssr?: false;
+}
+/** Route options for the dev page `load` loads; a 404 where compiled out. */
+export declare function devRoute(load: DevPageLoad, { clientOnly }?: DevRouteOptions): DevRoute;

package/dist/router/dev-route.js

@@ -0,0 +1,15 @@
+import { lazyRouteComponent, notFound } from "@tanstack/react-router";
+/** Route options for the dev page `load` loads; a 404 where compiled out. */
+export function devRoute(load, {
+  clientOnly = false
+} = {}) {
+  return {
+    beforeLoad: () => {
+      if (!load) throw notFound();
+    },
+    component: load ? lazyRouteComponent(load) : () => null,
+    ...(clientOnly ? {
+      ssr: false
+    } : {})
+  };
+}

package/dist/router/index.d.ts

@@ -0,0 +1,5 @@
+/** Router-bound UI: link tabs, debounced search params and dev routes. */
+export * from "./dev-route.ts";
+export * from "./tab-bar.tsx";
+export * from "./tabs.ts";
+export * from "./use-search-param.ts";

package/dist/router/index.js

@@ -0,0 +1,5 @@
+/** Router-bound UI: link tabs, debounced search params and dev routes. */
+export * from "./dev-route.js";
+export * from "./tab-bar.js";
+export * from "./tabs.js";
+export * from "./use-search-param.js";

package/dist/router/tab-bar.d.ts

@@ -0,0 +1,12 @@
+import type { ComponentProps } from "react";
+import type { Tab } from "./tabs.ts";
+/** `TabBar` props: a `<nav>`'s, and its tabs. */
+export interface TabBarProps extends Omit<ComponentProps<"nav">, "children"> {
+    tabs: readonly Tab[];
+    /** Class of each tab. */
+    tabClassName?: string;
+}
+/** A tab bar: router `Link`s current on their exact path, search aside,
+ *  unless the link sets `activeOptions`; buttons current while `active`.
+ *  Named "Tabs" unless `aria-label` says otherwise. */
+export declare function TabBar({ tabs, tabClassName, ...props }: TabBarProps): import("react/jsx-runtime").JSX.Element;