@eifi1/ui-kit 0.11.0 → 0.13.0

package/dist/components/text-link.d.ts

@@ -0,0 +1,238 @@
+import * as react from 'react';
+import { ReactElement, ComponentPropsWithoutRef, ReactNode, Ref, MouseEvent, KeyboardEvent } from 'react';
+import { LucideIcon } from 'lucide-react';
+import { az as KitLinkComponent } from '../kit-labels-Mz8zZHIF.js';
+import './data-table-labels.js';
+import './mini-calendar.js';
+import './calendar-heatmap.js';
+import './popover.js';
+import './chip.js';
+import './field-sync.js';
+import './tooltip.js';
+import '../hooks/use-anchored-rect.js';
+import '../lib/clipping.js';
+import '../wizard/types.js';
+import '../tour/tour.js';
+import '../search/command-palette.js';
+import '../search/global-search.js';
+import '../search/search-index.js';
+import './month-picker.js';
+import './page-contents.js';
+import './series-chart-labels.js';
+import './pie-chart-labels.js';
+import './sparkline.js';
+import './stat-tile.js';
+import './signature-pad.js';
+import './password-strength.js';
+import './danger-confirm.js';
+import './swatch-picker.js';
+import './tile-radio.js';
+import './icon-picker.js';
+import './dialog-frame.js';
+import './modal.js';
+import '../hooks/use-search-param-state.js';
+import './measured-grid.js';
+import '../feedback/feedback-attachment.js';
+import '../feedback/feedback-dialog.js';
+import '../feedback/feedback-thread.js';
+import '../feedback/feedback-inbox.js';
+import './account-settings-labels.js';
+import './confirm-dialog.js';
+import './floating-panel.js';
+import './bulk-action-bar.js';
+import './list.js';
+import './breadcrumbs.js';
+import './toast.js';
+import './description-list.js';
+import './line-items.js';
+import './progress-bar.js';
+import './signed-amount.js';
+import './error-boundary.js';
+import './authed-image.js';
+import '../hooks/use-authed-src.js';
+import './image-grid.js';
+import './lightbox.js';
+
+/**
+ * An `href` that leaves the app: a scheme (`https:`, `mailto:`, `tel:`) or a
+ * protocol-relative `//host`. A router's link is for paths inside the app, so the
+ * provider's `linkComponent` is never handed one of these — they stay a plain `<a>`.
+ *
+ * NOT external, and so handed to the router link: a path (`/x`, `x`, `?q=1`) and the
+ * hash-router form `#/x` — that IS a route in a `HashRouter` app, which maps it to
+ * `to="/x"`. A plain in-page anchor (`#section`) is not external either, but it is not
+ * a route: see {@link isInPageAnchor}.
+ */
+declare function isExternalHref(href: string): boolean;
+/**
+ * An `href` that only scrolls the current page: `#section` (or a bare `#`). The
+ * hash-router form `#/x` is a ROUTE, not an anchor, and is not one of these. A router
+ * link must not get an anchor — under a `HashRouter` `#section` would navigate to the
+ * path `/section` — so every kit link draws it as a plain `<a>`.
+ */
+declare function isInPageAnchor(href: string): boolean;
+/**
+ * Whether the provider's `linkComponent` (or a kit component's router fallback) draws
+ * `href`: an in-app path, `#/x` included — not an external `href`
+ * ({@link isExternalHref}) and not an in-page `#anchor` ({@link isInPageAnchor}).
+ */
+declare function isRoutableHref(href: string): boolean;
+/**
+ * What draws a kit link to `href`: the component's own `renderLink` when it was given
+ * one (it always wins — the caller asked for it by name), else the
+ * `<UiKitProvider linkComponent>` for a routable `href` ({@link isRoutableHref}), else
+ * `undefined` — a plain `<a>`. The one rule every kit link follows: `https:` /
+ * `mailto:` / `//host` and `#section` stay plain anchors; `/x`, `x` and a hash-router
+ * `#/x` go to the router link. Every kit link props type is a subset of the anchor
+ * attributes `KitLinkProps` describes, which is what makes the cast sound.
+ * @internal Shared by the kit's link-bearing components; not part of the barrel.
+ */
+declare function pickLinkRenderer<P>(own: ((props: P) => ReactElement) | undefined, kitLink: KitLinkComponent | undefined, href: string | undefined): ((props: P) => ReactElement) | undefined;
+/**
+ * The `onClick` of a PLAIN `<a>` whose kit link was asked to `replace` (keksdose F1).
+ *
+ * A router link replaces the history entry itself (it is handed `replace`, see
+ * {@link routerLinkNavigation}); a plain `<a>` has no attribute that says so, and the
+ * browser's own navigation always pushes. So a plain click is taken over — the caller's
+ * `onClick` runs first and may still `preventDefault` — and becomes
+ * `location.replace(href)`: the same document load, with Back skipping the one-shot URL.
+ * That is the case of `replace` together with `reloadDocument`, or an app with no
+ * `linkComponent`. A modified click (new tab) and a `target` other than `_self` are left
+ * to the browser: they do not navigate THIS history. Without `replace`, `onClick` comes
+ * back untouched.
+ * @internal
+ */
+declare function replacingClick(onClick: ((event: MouseEvent<HTMLAnchorElement>) => void) | undefined, href: string, replace: boolean | undefined, target?: string): ((event: MouseEvent<HTMLAnchorElement>) => void) | undefined;
+/**
+ * What a ROUTER link is handed for `replace`: `{ replace: true }` when asked, else
+ * nothing at all — so a provider link that spreads its props onto a DOM `<a>` never
+ * receives an unknown attribute from a link that did not ask (see `KitLinkProps.replace`).
+ * @internal
+ */
+declare function routerLinkNavigation(replace: boolean | undefined): {
+    replace?: true;
+};
+/**
+ * Draws `props` through `render` as a component of its own, so a router link's hooks
+ * belong to it and not to the kit component calling it — for the kit components that
+ * call their own `renderLink` inline and reach the provider's link through here.
+ * @internal
+ */
+declare function RenderedKitLink<P>({ render, props }: {
+    render: (props: P) => ReactElement;
+    props: P;
+}): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+/**
+ * `brand` (default) for a link in running text, `muted` for footer and meta links
+ * that should not compete with the content, `danger` for a destructive one ("Leave
+ * group"), `inherit` for a link that takes its surroundings' colour.
+ *
+ * `primary` and `secondary` are the body and the secondary text colour, UNDERLINED
+ * (keksdose F3): a link that must read as part of the text around it — a name in a
+ * list row, a reference in a card's meta line — where `brand` repaints it in the accent
+ * and `muted` is a step too light to read as content. `secondary` darkens to the body
+ * colour under the pointer, as `muted` does; `primary` has nowhere darker to go, so its
+ * underline thickens instead.
+ *
+ * `warning` is the kit's `--warning` text colour, underlined (kastlan 46): a link inside
+ * a `<Tone tone="warning">` sentence or a warning banner, which `brand` would paint in a
+ * second hue and `inherit` would leave indistinguishable from the sentence. Like
+ * `primary`, it keeps its colour on hover and thickens the underline.
+ *
+ * The three colours that sit IN the text default to `underline="always"`: with the
+ * colour of their surroundings, the underline is the only thing that says "link"
+ * (WCAG 1.4.1). An explicit `underline` still wins.
+ */
+type TextLinkTone = "brand" | "muted" | "danger" | "inherit" | "primary" | "secondary" | "warning";
+/** `hover` (the default for `brand`, `muted`, `danger`, `inherit`): underlined under
+ *  the pointer — the idiom all three apps draw. `always` (the default for `primary`,
+ *  `secondary`, `warning`) for a link inside prose, where colour alone must not be the
+ *  only mark (WCAG 1.4.1). `none` where the context already says "link" (a footer nav). */
+type TextLinkUnderline = "hover" | "always" | "none";
+/** The `aria-current` token. `true` on {@link TextLinkProps.current} means `page`. */
+type TextLinkCurrent = "page" | "step" | "location" | "date" | "time" | "true";
+/** What {@link TextLinkProps.renderLink} (and the provider's `linkComponent`) is
+ *  handed. Spread it onto your router's link — `({ href, ...p }) => <Link to={href} {...p} />`. */
+interface TextLinkRenderProps {
+    href: string;
+    /** The link's look — keep it, or the tone, underline and focus ring go. */
+    className: string;
+    children: ReactNode;
+    ref?: Ref<HTMLAnchorElement>;
+    onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+    onKeyDown?: (event: KeyboardEvent<HTMLAnchorElement>) => void;
+    "aria-current"?: TextLinkCurrent;
+    id?: string;
+    title?: string;
+    /** Present, as `true`, only when the link was given `replace` — see
+     *  `KitLinkProps.replace`. Map it to your router's replace; never onto a DOM `<a>`. */
+    replace?: boolean;
+    [key: `aria-${string}`]: string | boolean | number | undefined;
+    [key: `data-${string}`]: unknown;
+}
+interface TextLinkProps extends Omit<ComponentPropsWithoutRef<"a">, "href" | "children" | "aria-current" | "onClick" | "onKeyDown"> {
+    href: string;
+    children: ReactNode;
+    /** Default `brand`. */
+    tone?: TextLinkTone;
+    /** Default `always` for `primary`, `secondary` and `warning`, else `hover`. */
+    underline?: TextLinkUnderline;
+    /**
+     * Navigate by replacing the current history entry, so Back does not return to this
+     * URL — keksdose F1, a one-shot URL (a confirmation landing, a `?done=1` hop). Handed
+     * to the router link as `replace` (see `KitLinkProps.replace` for mapping it); on a
+     * plain `<a>` (no `linkComponent`, or `reloadDocument`) a plain click becomes
+     * `location.replace(href)`. Ignored on an `external` link, which opens a new tab.
+     */
+    replace?: boolean;
+    /**
+     * A plain `<a>` for an in-app `href`: the browser loads the whole document instead of
+     * the router swapping the view — keksdose F1, a route served outside the SPA (a file
+     * download, a server-rendered page, a logout that must drop every in-memory cache).
+     * Wins over `renderLink` and the provider's `linkComponent`: it is the caller saying
+     * "not the router" for this one link.
+     */
+    reloadDocument?: boolean;
+    /**
+     * The link leaves the app: a plain `<a target="_blank" rel="noopener noreferrer">`
+     * (never the router's), an external-link mark after the text (mirrored in RTL), and
+     * "opens in a new tab" (`common.opensInNewTab`) read after it — the mark says it
+     * only to the eye. kastlan's BWO / BFS source links (rent-increase-calculator-page).
+     */
+    external?: boolean;
+    /**
+     * Keep the click (and the Enter that activates the link) from reaching an ancestor —
+     * a link in a DataTable row with `onRowClick` goes to its own target instead of
+     * running the row's action. kastlan's `CellLink` did this by hand.
+     */
+    stopPropagation?: boolean;
+    /** Mark the link as the current one of a set — `true` is `aria-current="page"`, the
+     *  legal footer's link to the page you are on. Drawn in semibold. */
+    current?: boolean | TextLinkCurrent;
+    /** A Lucide icon before the text, at the text's size — kastlan's "← Back" link. */
+    icon?: LucideIcon;
+    /** Your router's link for an in-app `href`. Default: the `<UiKitProvider
+     *  linkComponent>`, then a plain `<a>`. Ignored on an `external` link. */
+    renderLink?: (props: TextLinkRenderProps) => ReactElement;
+    onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+    onKeyDown?: (event: KeyboardEvent<HTMLAnchorElement>) => void;
+    ref?: Ref<HTMLAnchorElement>;
+}
+/**
+ * The one inline link: a real `<a href>` (middle click, "open in new tab", link
+ * semantics) through the app's router for an in-app path, in one of four tones.
+ *
+ * kastlan draws this link a dozen ways by hand — `EntityLink` and `CellLink` (text-primary,
+ * hover underline, one stopping the row click), the legal pages' back link and footer,
+ * the feedback page's URL links, the calculator's external sources with a hand-placed
+ * ↗ and no word for a screen reader — and the lease wizard's unit step (lease-unit-step)
+ * used a raw `<a>` to an in-app route, which reloads the whole app. Here the router
+ * link comes from `<UiKitProvider linkComponent>`, set once.
+ *
+ * Inline, not `inline-flex`: a link inside a sentence must wrap with it. The icons sit
+ * on the text's baseline at the text's size, so they scale with whatever type the link
+ * is set in. The focus ring is an outline, which follows every line of a wrapped link.
+ */
+declare function TextLink({ href, children, tone, underline: underlineProp, external, replace, reloadDocument, stopPropagation, current, icon: Icon, renderLink, className, onClick, onKeyDown, ref, ...rest }: TextLinkProps): react.JSX.Element;
+
+export { RenderedKitLink, TextLink, type TextLinkCurrent, type TextLinkProps, type TextLinkRenderProps, type TextLinkTone, type TextLinkUnderline, isExternalHref, isInPageAnchor, isRoutableHref, pickLinkRenderer, replacingClick, routerLinkNavigation };

package/dist/components/text-link.js

@@ -0,0 +1,144 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ExternalLink } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { DEFAULT_COMMON_LABELS, useKitLabels, useKitLink } from "../i18n/kit-labels.js";
+function isExternalHref(href) {
+  return /^(?:[a-z][a-z\d+.-]*:|\/\/)/i.test(href);
+}
+function isInPageAnchor(href) {
+  return href.startsWith("#") && !href.startsWith("#/");
+}
+function isRoutableHref(href) {
+  return !isExternalHref(href) && !isInPageAnchor(href);
+}
+function pickLinkRenderer(own, kitLink, href) {
+  if (own) return own;
+  if (!kitLink || href === void 0 || !isRoutableHref(href)) return void 0;
+  return kitLink;
+}
+function isPlainNavigationClick(event) {
+  return !event.defaultPrevented && event.button === 0 && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey;
+}
+function replacingClick(onClick, href, replace, target) {
+  if (!replace || target !== void 0 && target !== "" && target !== "_self") return onClick;
+  return (event) => {
+    onClick?.(event);
+    if (!isPlainNavigationClick(event)) return;
+    event.preventDefault();
+    window.location.replace(href);
+  };
+}
+function routerLinkNavigation(replace) {
+  return replace ? { replace: true } : {};
+}
+function RenderedKitLink({ render, props }) {
+  return render(props);
+}
+const TONE = {
+  brand: "text-[var(--brand)] hover:text-[var(--brand-hover)]",
+  muted: "text-[var(--text-muted)] hover:text-[var(--text-primary)]",
+  danger: "text-[var(--danger)] hover:text-[var(--danger-hover)]",
+  inherit: "",
+  primary: "text-[var(--text-primary)] hover:decoration-2",
+  secondary: "text-[var(--text-secondary)] hover:text-[var(--text-primary)]",
+  warning: "text-[var(--warning)] hover:decoration-2"
+};
+const UNDERLINED_BY_DEFAULT = /* @__PURE__ */ new Set(["primary", "secondary", "warning"]);
+const UNDERLINE = {
+  hover: "no-underline hover:underline",
+  always: "underline",
+  none: "no-underline"
+};
+function TextLink({
+  href,
+  children,
+  tone = "brand",
+  underline: underlineProp,
+  external = false,
+  replace,
+  reloadDocument = false,
+  stopPropagation = false,
+  current,
+  icon: Icon,
+  renderLink,
+  className,
+  onClick,
+  onKeyDown,
+  ref,
+  ...rest
+}) {
+  const common = useKitLabels("common", DEFAULT_COMMON_LABELS);
+  const kitLink = useKitLink();
+  const underline = underlineProp ?? (UNDERLINED_BY_DEFAULT.has(tone) ? "always" : "hover");
+  const ariaCurrent = current === true ? "page" : current === false ? void 0 : current;
+  const look = cn(
+    "rounded-sm underline-offset-2 transition-colors",
+    "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--brand)]",
+    TONE[tone],
+    UNDERLINE[underline],
+    ariaCurrent && "font-semibold",
+    className
+  );
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    Icon && /* @__PURE__ */ jsx(Icon, { "aria-hidden": true, className: "me-1 inline size-[1em] shrink-0 align-[-0.125em]" }),
+    children,
+    external && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(ExternalLink, { "aria-hidden": true, className: "ms-1 inline size-[0.85em] align-[-0.1em] rtl:-scale-x-100" }),
+      " ",
+      /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+        "(",
+        common.opensInNewTab,
+        ")"
+      ] })
+    ] })
+  ] });
+  const handleClick = stopPropagation ? (event) => {
+    event.stopPropagation();
+    onClick?.(event);
+  } : onClick;
+  const props = {
+    ...rest,
+    ref,
+    href,
+    className: look,
+    "aria-current": ariaCurrent,
+    onClick: handleClick,
+    onKeyDown: stopPropagation ? (event) => {
+      if (event.key === "Enter") event.stopPropagation();
+      onKeyDown?.(event);
+    } : onKeyDown,
+    children: body
+  };
+  const render = external || reloadDocument ? void 0 : pickLinkRenderer(renderLink, kitLink, href);
+  if (render) return /* @__PURE__ */ jsx(RenderedTextLink, { render, ...props, ...routerLinkNavigation(replace) });
+  const plainClick = external ? handleClick : replacingClick(handleClick, href, replace, rest.target);
+  const { children: content, ...anchor } = props;
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      ...anchor,
+      href,
+      onClick: plainClick,
+      ...external ? { target: "_blank", rel: "noopener noreferrer" } : null,
+      children: content
+    }
+  );
+}
+function RenderedTextLink({
+  render,
+  ...props
+}) {
+  return render(props);
+}
+export {
+  RenderedKitLink,
+  TextLink,
+  isExternalHref,
+  isInPageAnchor,
+  isRoutableHref,
+  pickLinkRenderer,
+  replacingClick,
+  routerLinkNavigation
+};
+//# sourceMappingURL=text-link.js.map

package/dist/components/text-link.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/text-link.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, KeyboardEvent, MouseEvent, ReactElement, ReactNode, Ref } from \"react\";\nimport { ExternalLink } from \"lucide-react\";\nimport type { LucideIcon } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels, useKitLink } from \"../i18n/kit-labels\";\nimport type { KitLinkComponent } from \"../i18n/kit-labels\";\n\n/* ── Choosing what draws a link ──────────────────────────────────────────── */\n\n/**\n * An `href` that leaves the app: a scheme (`https:`, `mailto:`, `tel:`) or a\n * protocol-relative `//host`. A router's link is for paths inside the app, so the\n * provider's `linkComponent` is never handed one of these — they stay a plain `<a>`.\n *\n * NOT external, and so handed to the router link: a path (`/x`, `x`, `?q=1`) and the\n * hash-router form `#/x` — that IS a route in a `HashRouter` app, which maps it to\n * `to=\"/x\"`. A plain in-page anchor (`#section`) is not external either, but it is not\n * a route: see {@link isInPageAnchor}.\n */\nexport function isExternalHref(href: string): boolean {\n  return /^(?:[a-z][a-z\\d+.-]*:|\\/\\/)/i.test(href);\n}\n\n/**\n * An `href` that only scrolls the current page: `#section` (or a bare `#`). The\n * hash-router form `#/x` is a ROUTE, not an anchor, and is not one of these. A router\n * link must not get an anchor — under a `HashRouter` `#section` would navigate to the\n * path `/section` — so every kit link draws it as a plain `<a>`.\n */\nexport function isInPageAnchor(href: string): boolean {\n  return href.startsWith(\"#\") && !href.startsWith(\"#/\");\n}\n\n/**\n * Whether the provider's `linkComponent` (or a kit component's router fallback) draws\n * `href`: an in-app path, `#/x` included — not an external `href`\n * ({@link isExternalHref}) and not an in-page `#anchor` ({@link isInPageAnchor}).\n */\nexport function isRoutableHref(href: string): boolean {\n  return !isExternalHref(href) && !isInPageAnchor(href);\n}\n\n/**\n * What draws a kit link to `href`: the component's own `renderLink` when it was given\n * one (it always wins — the caller asked for it by name), else the\n * `<UiKitProvider linkComponent>` for a routable `href` ({@link isRoutableHref}), else\n * `undefined` — a plain `<a>`. The one rule every kit link follows: `https:` /\n * `mailto:` / `//host` and `#section` stay plain anchors; `/x`, `x` and a hash-router\n * `#/x` go to the router link. Every kit link props type is a subset of the anchor\n * attributes `KitLinkProps` describes, which is what makes the cast sound.\n * @internal Shared by the kit's link-bearing components; not part of the barrel.\n */\nexport function pickLinkRenderer<P>(\n  own: ((props: P) => ReactElement) | undefined,\n  kitLink: KitLinkComponent | undefined,\n  href: string | undefined,\n): ((props: P) => ReactElement) | undefined {\n  if (own) return own;\n  if (!kitLink || href === undefined || !isRoutableHref(href)) return undefined;\n  return kitLink as unknown as (props: P) => ReactElement;\n}\n\n/** The plain primary click a page navigates on — not a middle click, not ⌘ / Ctrl /\n *  Shift / Alt (new tab, new window, download), and not one a handler already took. */\nfunction isPlainNavigationClick(event: MouseEvent<HTMLAnchorElement>): boolean {\n  return (\n    !event.defaultPrevented &&\n    event.button === 0 &&\n    !event.metaKey &&\n    !event.ctrlKey &&\n    !event.shiftKey &&\n    !event.altKey\n  );\n}\n\n/**\n * The `onClick` of a PLAIN `<a>` whose kit link was asked to `replace` (keksdose F1).\n *\n * A router link replaces the history entry itself (it is handed `replace`, see\n * {@link routerLinkNavigation}); a plain `<a>` has no attribute that says so, and the\n * browser's own navigation always pushes. So a plain click is taken over — the caller's\n * `onClick` runs first and may still `preventDefault` — and becomes\n * `location.replace(href)`: the same document load, with Back skipping the one-shot URL.\n * That is the case of `replace` together with `reloadDocument`, or an app with no\n * `linkComponent`. A modified click (new tab) and a `target` other than `_self` are left\n * to the browser: they do not navigate THIS history. Without `replace`, `onClick` comes\n * back untouched.\n * @internal\n */\nexport function replacingClick(\n  onClick: ((event: MouseEvent<HTMLAnchorElement>) => void) | undefined,\n  href: string,\n  replace: boolean | undefined,\n  target?: string,\n): ((event: MouseEvent<HTMLAnchorElement>) => void) | undefined {\n  if (!replace || (target !== undefined && target !== \"\" && target !== \"_self\")) return onClick;\n  return (event) => {\n    onClick?.(event);\n    if (!isPlainNavigationClick(event)) return;\n    event.preventDefault();\n    window.location.replace(href);\n  };\n}\n\n/**\n * What a ROUTER link is handed for `replace`: `{ replace: true }` when asked, else\n * nothing at all — so a provider link that spreads its props onto a DOM `<a>` never\n * receives an unknown attribute from a link that did not ask (see `KitLinkProps.replace`).\n * @internal\n */\nexport function routerLinkNavigation(replace: boolean | undefined): { replace?: true } {\n  return replace ? { replace: true } : {};\n}\n\n/**\n * Draws `props` through `render` as a component of its own, so a router link's hooks\n * belong to it and not to the kit component calling it — for the kit components that\n * call their own `renderLink` inline and reach the provider's link through here.\n * @internal\n */\nexport function RenderedKitLink<P>({ render, props }: { render: (props: P) => ReactElement; props: P }) {\n  return render(props);\n}\n\n/* ── TextLink ─────────────────────────────────────────────────────────────── */\n\n/**\n * `brand` (default) for a link in running text, `muted` for footer and meta links\n * that should not compete with the content, `danger` for a destructive one (\"Leave\n * group\"), `inherit` for a link that takes its surroundings' colour.\n *\n * `primary` and `secondary` are the body and the secondary text colour, UNDERLINED\n * (keksdose F3): a link that must read as part of the text around it — a name in a\n * list row, a reference in a card's meta line — where `brand` repaints it in the accent\n * and `muted` is a step too light to read as content. `secondary` darkens to the body\n * colour under the pointer, as `muted` does; `primary` has nowhere darker to go, so its\n * underline thickens instead.\n *\n * `warning` is the kit's `--warning` text colour, underlined (kastlan 46): a link inside\n * a `<Tone tone=\"warning\">` sentence or a warning banner, which `brand` would paint in a\n * second hue and `inherit` would leave indistinguishable from the sentence. Like\n * `primary`, it keeps its colour on hover and thickens the underline.\n *\n * The three colours that sit IN the text default to `underline=\"always\"`: with the\n * colour of their surroundings, the underline is the only thing that says \"link\"\n * (WCAG 1.4.1). An explicit `underline` still wins.\n */\nexport type TextLinkTone = \"brand\" | \"muted\" | \"danger\" | \"inherit\" | \"primary\" | \"secondary\" | \"warning\";\n\n/** `hover` (the default for `brand`, `muted`, `danger`, `inherit`): underlined under\n *  the pointer — the idiom all three apps draw. `always` (the default for `primary`,\n *  `secondary`, `warning`) for a link inside prose, where colour alone must not be the\n *  only mark (WCAG 1.4.1). `none` where the context already says \"link\" (a footer nav). */\nexport type TextLinkUnderline = \"hover\" | \"always\" | \"none\";\n\n/** The `aria-current` token. `true` on {@link TextLinkProps.current} means `page`. */\nexport type TextLinkCurrent = \"page\" | \"step\" | \"location\" | \"date\" | \"time\" | \"true\";\n\n/** What {@link TextLinkProps.renderLink} (and the provider's `linkComponent`) is\n *  handed. Spread it onto your router's link — `({ href, ...p }) => <Link to={href} {...p} />`. */\nexport interface TextLinkRenderProps {\n  href: string;\n  /** The link's look — keep it, or the tone, underline and focus ring go. */\n  className: string;\n  children: ReactNode;\n  ref?: Ref<HTMLAnchorElement>;\n  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n  onKeyDown?: (event: KeyboardEvent<HTMLAnchorElement>) => void;\n  \"aria-current\"?: TextLinkCurrent;\n  id?: string;\n  title?: string;\n  /** Present, as `true`, only when the link was given `replace` — see\n   *  `KitLinkProps.replace`. Map it to your router's replace; never onto a DOM `<a>`. */\n  replace?: boolean;\n  [key: `aria-${string}`]: string | boolean | number | undefined;\n  [key: `data-${string}`]: unknown;\n}\n\nexport interface TextLinkProps\n  extends Omit<ComponentPropsWithoutRef<\"a\">, \"href\" | \"children\" | \"aria-current\" | \"onClick\" | \"onKeyDown\"> {\n  href: string;\n  children: ReactNode;\n  /** Default `brand`. */\n  tone?: TextLinkTone;\n  /** Default `always` for `primary`, `secondary` and `warning`, else `hover`. */\n  underline?: TextLinkUnderline;\n  /**\n   * Navigate by replacing the current history entry, so Back does not return to this\n   * URL — keksdose F1, a one-shot URL (a confirmation landing, a `?done=1` hop). Handed\n   * to the router link as `replace` (see `KitLinkProps.replace` for mapping it); on a\n   * plain `<a>` (no `linkComponent`, or `reloadDocument`) a plain click becomes\n   * `location.replace(href)`. Ignored on an `external` link, which opens a new tab.\n   */\n  replace?: boolean;\n  /**\n   * A plain `<a>` for an in-app `href`: the browser loads the whole document instead of\n   * the router swapping the view — keksdose F1, a route served outside the SPA (a file\n   * download, a server-rendered page, a logout that must drop every in-memory cache).\n   * Wins over `renderLink` and the provider's `linkComponent`: it is the caller saying\n   * \"not the router\" for this one link.\n   */\n  reloadDocument?: boolean;\n  /**\n   * The link leaves the app: a plain `<a target=\"_blank\" rel=\"noopener noreferrer\">`\n   * (never the router's), an external-link mark after the text (mirrored in RTL), and\n   * \"opens in a new tab\" (`common.opensInNewTab`) read after it — the mark says it\n   * only to the eye. kastlan's BWO / BFS source links (rent-increase-calculator-page).\n   */\n  external?: boolean;\n  /**\n   * Keep the click (and the Enter that activates the link) from reaching an ancestor —\n   * a link in a DataTable row with `onRowClick` goes to its own target instead of\n   * running the row's action. kastlan's `CellLink` did this by hand.\n   */\n  stopPropagation?: boolean;\n  /** Mark the link as the current one of a set — `true` is `aria-current=\"page\"`, the\n   *  legal footer's link to the page you are on. Drawn in semibold. */\n  current?: boolean | TextLinkCurrent;\n  /** A Lucide icon before the text, at the text's size — kastlan's \"← Back\" link. */\n  icon?: LucideIcon;\n  /** Your router's link for an in-app `href`. Default: the `<UiKitProvider\n   *  linkComponent>`, then a plain `<a>`. Ignored on an `external` link. */\n  renderLink?: (props: TextLinkRenderProps) => ReactElement;\n  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n  onKeyDown?: (event: KeyboardEvent<HTMLAnchorElement>) => void;\n  ref?: Ref<HTMLAnchorElement>;\n}\n\nconst TONE: Record<TextLinkTone, string> = {\n  brand: \"text-[var(--brand)] hover:text-[var(--brand-hover)]\",\n  muted: \"text-[var(--text-muted)] hover:text-[var(--text-primary)]\",\n  danger: \"text-[var(--danger)] hover:text-[var(--danger-hover)]\",\n  inherit: \"\",\n  primary: \"text-[var(--text-primary)] hover:decoration-2\",\n  secondary: \"text-[var(--text-secondary)] hover:text-[var(--text-primary)]\",\n  warning: \"text-[var(--warning)] hover:decoration-2\",\n};\n\n/** The tones whose colour is their surroundings' — underlined by default; see\n *  {@link TextLinkTone}. */\nconst UNDERLINED_BY_DEFAULT = new Set<TextLinkTone>([\"primary\", \"secondary\", \"warning\"]);\n\nconst UNDERLINE: Record<TextLinkUnderline, string> = {\n  hover: \"no-underline hover:underline\",\n  always: \"underline\",\n  none: \"no-underline\",\n};\n\n/**\n * The one inline link: a real `<a href>` (middle click, \"open in new tab\", link\n * semantics) through the app's router for an in-app path, in one of four tones.\n *\n * kastlan draws this link a dozen ways by hand — `EntityLink` and `CellLink` (text-primary,\n * hover underline, one stopping the row click), the legal pages' back link and footer,\n * the feedback page's URL links, the calculator's external sources with a hand-placed\n * ↗ and no word for a screen reader — and the lease wizard's unit step (lease-unit-step)\n * used a raw `<a>` to an in-app route, which reloads the whole app. Here the router\n * link comes from `<UiKitProvider linkComponent>`, set once.\n *\n * Inline, not `inline-flex`: a link inside a sentence must wrap with it. The icons sit\n * on the text's baseline at the text's size, so they scale with whatever type the link\n * is set in. The focus ring is an outline, which follows every line of a wrapped link.\n */\nexport function TextLink({\n  href,\n  children,\n  tone = \"brand\",\n  underline: underlineProp,\n  external = false,\n  replace,\n  reloadDocument = false,\n  stopPropagation = false,\n  current,\n  icon: Icon,\n  renderLink,\n  className,\n  onClick,\n  onKeyDown,\n  ref,\n  ...rest\n}: TextLinkProps) {\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  const kitLink = useKitLink();\n  const underline = underlineProp ?? (UNDERLINED_BY_DEFAULT.has(tone) ? \"always\" : \"hover\");\n  const ariaCurrent: TextLinkCurrent | undefined =\n    current === true ? \"page\" : current === false ? undefined : current;\n\n  const look = cn(\n    \"rounded-sm underline-offset-2 transition-colors\",\n    \"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--brand)]\",\n    TONE[tone],\n    UNDERLINE[underline],\n    ariaCurrent && \"font-semibold\",\n    className,\n  );\n\n  const body = (\n    <>\n      {Icon && <Icon aria-hidden className=\"me-1 inline size-[1em] shrink-0 align-[-0.125em]\" />}\n      {children}\n      {external && (\n        <>\n          <ExternalLink aria-hidden className=\"ms-1 inline size-[0.85em] align-[-0.1em] rtl:-scale-x-100\" />\n          {\" \"}\n          <span className=\"sr-only\">({common.opensInNewTab})</span>\n        </>\n      )}\n    </>\n  );\n\n  const handleClick: TextLinkRenderProps[\"onClick\"] = stopPropagation\n    ? (event) => {\n        event.stopPropagation();\n        onClick?.(event);\n      }\n    : onClick;\n  const props: TextLinkRenderProps = {\n    ...(rest as Partial<TextLinkRenderProps>),\n    ref,\n    href,\n    className: look,\n    \"aria-current\": ariaCurrent,\n    onClick: handleClick,\n    onKeyDown: stopPropagation\n      ? (event) => {\n          if (event.key === \"Enter\") event.stopPropagation();\n          onKeyDown?.(event);\n        }\n      : onKeyDown,\n    children: body,\n  };\n\n  const render = external || reloadDocument ? undefined : pickLinkRenderer(renderLink, kitLink, href);\n  if (render) return <RenderedTextLink render={render} {...props} {...routerLinkNavigation(replace)} />;\n  // A plain `<a>` never gets `replace` as an attribute; asked for, it takes the click.\n  const plainClick = external ? handleClick : replacingClick(handleClick, href, replace, rest.target);\n  const { children: content, ...anchor } = props;\n  return (\n    <a\n      {...anchor}\n      href={href}\n      onClick={plainClick}\n      {...(external ? { target: \"_blank\", rel: \"noopener noreferrer\" } : null)}\n    >\n      {content}\n    </a>\n  );\n}\n\n/** Calls the link renderer as a component, so a router link's hooks are its own. */\nfunction RenderedTextLink({\n  render,\n  ...props\n}: TextLinkRenderProps & { render: (props: TextLinkRenderProps) => ReactElement }) {\n  return render(props);\n}\n"],"mappings":"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","names":[]}

package/dist/components/text.d.ts

@@ -14,6 +14,14 @@ import { ComponentPropsWithoutRef, ReactNode } from 'react';
  * (support-thread:153/223) at `text-[11px]` by hand — 10px read as a footnote under a
  * figure that size, 12px competed with it. Named `md` rather than slotted in order
  * because `sm` was already the default and renaming it would move every caller.
+ *
+ * `md` is also the heading over a CHART COLUMN (lenkbank P9): the small label centred
+ * over each of a pair of facing charts, or over each column of a small-multiples grid.
+ * There the label names a plot, not a section of the page, so `sm` (12px, the page's
+ * section heading) out-ranks the card title above it, and `xs` (10px, a legend's
+ * title) sinks below the axis ticks it sits beside. Rule of thumb: `xs` inside a
+ * control (legend, menu), `md` over a figure or a plot, `sm` over a block of page
+ * content.
  */
 type SectionLabelSize = "xs" | "md" | "sm";
 /**
@@ -26,6 +34,19 @@ type SectionLabelSize = "xs" | "md" | "sm";
  * case.
  */
 declare const SECTION_LABEL_CLASS: Record<SectionLabelSize, string>;
+/**
+ * `plain` (default): the label alone, as above.
+ *
+ * `band` (0.13, keksdose F5): the label on a full-width `surface-2` bar with a bottom
+ * border — the day-group header of keksdose's mobile transaction list
+ * (mobile-transaction-list.tsx:171), which separates one day's rows from the next.
+ * Its type is kept as keksdose drew it — `font-medium` in the SECONDARY text colour,
+ * not the plain label's semibold muted — so adopting the kit does not restyle a live
+ * list: the bar already sets the label apart, and needs no extra weight. The padding (`px-4 py-2`) lines the text up with a
+ * `ListItem density="comfortable"` row below it; override it with `className` for a
+ * list at another density. A sticky header is the caller's: add `sticky top-0`.
+ */
+type SectionLabelVariant = "plain" | "band";
 type SectionLabelElement = "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div" | "legend";
 interface SectionLabelProps extends ComponentPropsWithoutRef<"h3"> {
     /**
@@ -36,6 +57,9 @@ interface SectionLabelProps extends ComponentPropsWithoutRef<"h3"> {
      */
     as?: SectionLabelElement;
     size?: SectionLabelSize;
+    /** `band` draws the label on a `surface-2` bar with a bottom border — a list's group
+     *  header. See {@link SectionLabelVariant}. */
+    variant?: SectionLabelVariant;
     children: ReactNode;
 }
 /**
@@ -45,7 +69,7 @@ interface SectionLabelProps extends ComponentPropsWithoutRef<"h3"> {
  * 10px version on a menu row. One component, the token colour, and the level chosen
  * where the outline is known.
  */
-declare function SectionLabel({ as, size, className, children, ...rest }: SectionLabelProps): react.JSX.Element;
+declare function SectionLabel({ as, size, variant, className, children, ...rest }: SectionLabelProps): react.JSX.Element;
 /**
  * The caption type as a class string: 11px, snug, muted. lenkbank's `CAPTION`
  * (shared/ui/caption.ts:23) — written out 31 times before it was a constant — as a
@@ -67,4 +91,4 @@ interface CaptionProps extends ComponentPropsWithoutRef<"p"> {
  */
 declare function Caption({ as, className, children, ...rest }: CaptionProps): react.JSX.Element;
 
-export { CAPTION_CLASS, Caption, type CaptionProps, SECTION_LABEL_CLASS, SectionLabel, type SectionLabelProps, type SectionLabelSize };
+export { CAPTION_CLASS, Caption, type CaptionProps, SECTION_LABEL_CLASS, SectionLabel, type SectionLabelProps, type SectionLabelSize, type SectionLabelVariant };

package/dist/components/text.js

@@ -6,9 +6,23 @@ const SECTION_LABEL_CLASS = {
   md: "text-[11px] font-semibold uppercase tracking-wide text-[var(--text-muted)]",
   sm: "text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]"
 };
-function SectionLabel({ as = "h3", size = "sm", className, children, ...rest }) {
+const SECTION_LABEL_BAND_CLASS = {
+  xs: "text-[10px]",
+  md: "text-[11px]",
+  sm: "text-xs"
+};
+const BAND = "block border-b border-[var(--border)] bg-[var(--bg-surface-2)] px-4 py-2 font-medium uppercase tracking-wide text-[var(--text-secondary)]";
+function SectionLabel({
+  as = "h3",
+  size = "sm",
+  variant = "plain",
+  className,
+  children,
+  ...rest
+}) {
   const Tag = as;
-  return /* @__PURE__ */ jsx(Tag, { ...rest, className: cn(SECTION_LABEL_CLASS[size], className), children });
+  const type = variant === "band" ? cn(SECTION_LABEL_BAND_CLASS[size], BAND) : SECTION_LABEL_CLASS[size];
+  return /* @__PURE__ */ jsx(Tag, { ...rest, className: cn(type, className), children });
 }
 const CAPTION_CLASS = "text-[11px] leading-snug text-[var(--text-muted)]";
 function Caption({ as = "p", className, children, ...rest }) {

package/dist/components/text.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/text.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ElementType, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\n\n/* ── SectionLabel ─────────────────────────────────────────────────────────── */\n\n/**\n * `xs` is 10px — the size `LegendGroup`'s title and the top-bar menus' heading row draw;\n * `sm` (default) is 12px — the size `StatTile`'s label and lenkbank's section headings\n * (control-page.tsx:119/123/127) draw. Two sizes because the label sits either inside a\n * dense panel (a legend, a menu) or above a block of page content, and one size looked\n * wrong in the other place.\n *\n * `md` (0.11.0) is 11px, the rung between them: keksdose's budget-summary card labels\n * its figures (\"Assigned\", \"Activity\", \"Upcoming\", \"Available\" —\n * budget-summary-card:258/264/286/297) and its support thread its day divider and a message's meta line\n * (support-thread:153/223) at `text-[11px]` by hand — 10px read as a footnote under a\n * figure that size, 12px competed with it. Named `md` rather than slotted in order\n * because `sm` was already the default and renaming it would move every caller.\n */\nexport type SectionLabelSize = \"xs\" | \"md\" | \"sm\";\n\n/**\n * The small, uppercase, tracked, muted label — as a class string, per size.\n *\n * Exported because `LegendGroup` and `StatTile` already draw it inline, and a class a\n * caller has to position itself (a `<th>`, a `<legend>`, a menu `<li>`) is better\n * reached as a string than wrapped in a component that only takes a `className`. The\n * uppercase is CSS, so a screen reader reads the text as written: write it in normal\n * case.\n */\nexport const SECTION_LABEL_CLASS: Record<SectionLabelSize, string> = {\n  xs: \"text-[10px] font-semibold uppercase tracking-wide text-[var(--text-muted)]\",\n  md: \"text-[11px] font-semibold uppercase tracking-wide text-[var(--text-muted)]\",\n  sm: \"text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]\",\n};\n\ntype SectionLabelElement = \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"p\" | \"span\" | \"div\" | \"legend\";\n\nexport interface SectionLabelProps extends ComponentPropsWithoutRef<\"h3\"> {\n  /**\n   * The element — which is the heading LEVEL, and so is the caller's to pick: the kit\n   * cannot know where in the outline the label sits. Default `h3`, which is what\n   * lenkbank's control page writes under its `h2` card title. Pass `span` or `p` for a\n   * label that is not a heading at all (a legend group's title).\n   */\n  as?: SectionLabelElement;\n  size?: SectionLabelSize;\n  children: ReactNode;\n}\n\n/**\n * A section's small uppercase label. lenkbank spells\n * `text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400`\n * on every `<h3>` of its control page and more; keksdose's budget switcher writes the\n * 10px version on a menu row. One component, the token colour, and the level chosen\n * where the outline is known.\n */\nexport function SectionLabel({ as = \"h3\", size = \"sm\", className, children, ...rest }: SectionLabelProps) {\n  const Tag = as as ElementType;\n  return (\n    <Tag {...rest} className={cn(SECTION_LABEL_CLASS[size], className)}>\n      {children}\n    </Tag>\n  );\n}\n\n/* ── Caption ──────────────────────────────────────────────────────────────── */\n\n/**\n * The caption type as a class string: 11px, snug, muted. lenkbank's `CAPTION`\n * (shared/ui/caption.ts:23) — written out 31 times before it was a constant — as a\n * token colour rather than `slate-500 dark:slate-400`, so it follows the palette.\n * Exported for the same reason lenkbank's is a string: every caller positions it\n * differently (`mt-1`, `self-end pb-2`, `border-t`), and what must be one thing is the\n * type, not the box.\n */\nexport const CAPTION_CLASS = \"text-[11px] leading-snug text-[var(--text-muted)]\";\n\nexport interface CaptionProps extends ComponentPropsWithoutRef<\"p\"> {\n  /** Default `p`; `span` for a caption inside a line of other content. */\n  as?: \"p\" | \"span\" | \"div\";\n  children: ReactNode;\n}\n\n/**\n * The small grey sentence under a field, a table or a button — prose ABOUT the thing\n * above it. Not `FieldHint`, which hides behind a field label's \"?\" so a paragraph does\n * not make one field taller than its neighbour (lenkbank feedback #27).\n */\nexport function Caption({ as = \"p\", className, children, ...rest }: CaptionProps) {\n  const Tag = as as ElementType;\n  return (\n    <Tag {...rest} className={cn(CAPTION_CLASS, className)}>\n      {children}\n    </Tag>\n  );\n}\n"],"mappings":";AA4DI;AA3DJ,SAAS,UAAU;AA6BZ,MAAM,sBAAwD;AAAA,EACnE,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAuBO,SAAS,aAAa,EAAE,KAAK,MAAM,OAAO,MAAM,WAAW,UAAU,GAAG,KAAK,GAAsB;AACxG,QAAM,MAAM;AACZ,SACE,oBAAC,OAAK,GAAG,MAAM,WAAW,GAAG,oBAAoB,IAAI,GAAG,SAAS,GAC9D,UACH;AAEJ;AAYO,MAAM,gBAAgB;AAatB,SAAS,QAAQ,EAAE,KAAK,KAAK,WAAW,UAAU,GAAG,KAAK,GAAiB;AAChF,QAAM,MAAM;AACZ,SACE,oBAAC,OAAK,GAAG,MAAM,WAAW,GAAG,eAAe,SAAS,GAClD,UACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/text.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ElementType, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\n\n/* ── SectionLabel ─────────────────────────────────────────────────────────── */\n\n/**\n * `xs` is 10px — the size `LegendGroup`'s title and the top-bar menus' heading row draw;\n * `sm` (default) is 12px — the size `StatTile`'s label and lenkbank's section headings\n * (control-page.tsx:119/123/127) draw. Two sizes because the label sits either inside a\n * dense panel (a legend, a menu) or above a block of page content, and one size looked\n * wrong in the other place.\n *\n * `md` (0.11.0) is 11px, the rung between them: keksdose's budget-summary card labels\n * its figures (\"Assigned\", \"Activity\", \"Upcoming\", \"Available\" —\n * budget-summary-card:258/264/286/297) and its support thread its day divider and a message's meta line\n * (support-thread:153/223) at `text-[11px]` by hand — 10px read as a footnote under a\n * figure that size, 12px competed with it. Named `md` rather than slotted in order\n * because `sm` was already the default and renaming it would move every caller.\n *\n * `md` is also the heading over a CHART COLUMN (lenkbank P9): the small label centred\n * over each of a pair of facing charts, or over each column of a small-multiples grid.\n * There the label names a plot, not a section of the page, so `sm` (12px, the page's\n * section heading) out-ranks the card title above it, and `xs` (10px, a legend's\n * title) sinks below the axis ticks it sits beside. Rule of thumb: `xs` inside a\n * control (legend, menu), `md` over a figure or a plot, `sm` over a block of page\n * content.\n */\nexport type SectionLabelSize = \"xs\" | \"md\" | \"sm\";\n\n/**\n * The small, uppercase, tracked, muted label — as a class string, per size.\n *\n * Exported because `LegendGroup` and `StatTile` already draw it inline, and a class a\n * caller has to position itself (a `<th>`, a `<legend>`, a menu `<li>`) is better\n * reached as a string than wrapped in a component that only takes a `className`. The\n * uppercase is CSS, so a screen reader reads the text as written: write it in normal\n * case.\n */\nexport const SECTION_LABEL_CLASS: Record<SectionLabelSize, string> = {\n  xs: \"text-[10px] font-semibold uppercase tracking-wide text-[var(--text-muted)]\",\n  md: \"text-[11px] font-semibold uppercase tracking-wide text-[var(--text-muted)]\",\n  sm: \"text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]\",\n};\n\n/**\n * `plain` (default): the label alone, as above.\n *\n * `band` (0.13, keksdose F5): the label on a full-width `surface-2` bar with a bottom\n * border — the day-group header of keksdose's mobile transaction list\n * (mobile-transaction-list.tsx:171), which separates one day's rows from the next.\n * Its type is kept as keksdose drew it — `font-medium` in the SECONDARY text colour,\n * not the plain label's semibold muted — so adopting the kit does not restyle a live\n * list: the bar already sets the label apart, and needs no extra weight. The padding (`px-4 py-2`) lines the text up with a\n * `ListItem density=\"comfortable\"` row below it; override it with `className` for a\n * list at another density. A sticky header is the caller's: add `sticky top-0`.\n */\nexport type SectionLabelVariant = \"plain\" | \"band\";\n\n/** The band's own type and box, per size — spelled out rather than merged over\n *  {@link SECTION_LABEL_CLASS}, so the result does not hang on tailwind-merge telling\n *  a font-size `text-[…]` from a colour `text-[var(…)]`. */\nconst SECTION_LABEL_BAND_CLASS: Record<SectionLabelSize, string> = {\n  xs: \"text-[10px]\",\n  md: \"text-[11px]\",\n  sm: \"text-xs\",\n};\nconst BAND =\n  \"block border-b border-[var(--border)] bg-[var(--bg-surface-2)] px-4 py-2 font-medium uppercase tracking-wide text-[var(--text-secondary)]\";\n\ntype SectionLabelElement = \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"p\" | \"span\" | \"div\" | \"legend\";\n\nexport interface SectionLabelProps extends ComponentPropsWithoutRef<\"h3\"> {\n  /**\n   * The element — which is the heading LEVEL, and so is the caller's to pick: the kit\n   * cannot know where in the outline the label sits. Default `h3`, which is what\n   * lenkbank's control page writes under its `h2` card title. Pass `span` or `p` for a\n   * label that is not a heading at all (a legend group's title).\n   */\n  as?: SectionLabelElement;\n  size?: SectionLabelSize;\n  /** `band` draws the label on a `surface-2` bar with a bottom border — a list's group\n   *  header. See {@link SectionLabelVariant}. */\n  variant?: SectionLabelVariant;\n  children: ReactNode;\n}\n\n/**\n * A section's small uppercase label. lenkbank spells\n * `text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400`\n * on every `<h3>` of its control page and more; keksdose's budget switcher writes the\n * 10px version on a menu row. One component, the token colour, and the level chosen\n * where the outline is known.\n */\nexport function SectionLabel({\n  as = \"h3\",\n  size = \"sm\",\n  variant = \"plain\",\n  className,\n  children,\n  ...rest\n}: SectionLabelProps) {\n  const Tag = as as ElementType;\n  const type = variant === \"band\" ? cn(SECTION_LABEL_BAND_CLASS[size], BAND) : SECTION_LABEL_CLASS[size];\n  return (\n    <Tag {...rest} className={cn(type, className)}>\n      {children}\n    </Tag>\n  );\n}\n\n/* ── Caption ──────────────────────────────────────────────────────────────── */\n\n/**\n * The caption type as a class string: 11px, snug, muted. lenkbank's `CAPTION`\n * (shared/ui/caption.ts:23) — written out 31 times before it was a constant — as a\n * token colour rather than `slate-500 dark:slate-400`, so it follows the palette.\n * Exported for the same reason lenkbank's is a string: every caller positions it\n * differently (`mt-1`, `self-end pb-2`, `border-t`), and what must be one thing is the\n * type, not the box.\n */\nexport const CAPTION_CLASS = \"text-[11px] leading-snug text-[var(--text-muted)]\";\n\nexport interface CaptionProps extends ComponentPropsWithoutRef<\"p\"> {\n  /** Default `p`; `span` for a caption inside a line of other content. */\n  as?: \"p\" | \"span\" | \"div\";\n  children: ReactNode;\n}\n\n/**\n * The small grey sentence under a field, a table or a button — prose ABOUT the thing\n * above it. Not `FieldHint`, which hides behind a field label's \"?\" so a paragraph does\n * not make one field taller than its neighbour (lenkbank feedback #27).\n */\nexport function Caption({ as = \"p\", className, children, ...rest }: CaptionProps) {\n  const Tag = as as ElementType;\n  return (\n    <Tag {...rest} className={cn(CAPTION_CLASS, className)}>\n      {children}\n    </Tag>\n  );\n}\n"],"mappings":";AAwGI;AAvGJ,SAAS,UAAU;AAqCZ,MAAM,sBAAwD;AAAA,EACnE,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAmBA,MAAM,2BAA6D;AAAA,EACjE,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AACA,MAAM,OACJ;AA0BK,SAAS,aAAa;AAAA,EAC3B,KAAK;AAAA,EACL,OAAO;AAAA,EACP,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAsB;AACpB,QAAM,MAAM;AACZ,QAAM,OAAO,YAAY,SAAS,GAAG,yBAAyB,IAAI,GAAG,IAAI,IAAI,oBAAoB,IAAI;AACrG,SACE,oBAAC,OAAK,GAAG,MAAM,WAAW,GAAG,MAAM,SAAS,GACzC,UACH;AAEJ;AAYO,MAAM,gBAAgB;AAatB,SAAS,QAAQ,EAAE,KAAK,KAAK,WAAW,UAAU,GAAG,KAAK,GAAiB;AAChF,QAAM,MAAM;AACZ,SACE,oBAAC,OAAK,GAAG,MAAM,WAAW,GAAG,eAAe,SAAS,GAClD,UACH;AAEJ;","names":[]}

package/dist/components/time-input.d.ts

@@ -1,8 +1,56 @@
 import * as react from 'react';
-import { InputProps } from './ui.js';
+import { ay as InputProps } from '../kit-labels-Mz8zZHIF.js';
+import './data-table-labels.js';
+import './mini-calendar.js';
+import './calendar-heatmap.js';
+import './popover.js';
+import './chip.js';
+import 'lucide-react';
+import './field-sync.js';
 import './tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';
+import '../wizard/types.js';
+import '../tour/tour.js';
+import '../search/command-palette.js';
+import '../search/global-search.js';
+import '../search/search-index.js';
+import './month-picker.js';
+import './page-contents.js';
+import './series-chart-labels.js';
+import './pie-chart-labels.js';
+import './sparkline.js';
+import './stat-tile.js';
+import './signature-pad.js';
+import './password-strength.js';
+import './danger-confirm.js';
+import './swatch-picker.js';
+import './tile-radio.js';
+import './icon-picker.js';
+import './dialog-frame.js';
+import './modal.js';
+import '../hooks/use-search-param-state.js';
+import './measured-grid.js';
+import '../feedback/feedback-attachment.js';
+import '../feedback/feedback-dialog.js';
+import '../feedback/feedback-thread.js';
+import '../feedback/feedback-inbox.js';
+import './account-settings-labels.js';
+import './confirm-dialog.js';
+import './floating-panel.js';
+import './bulk-action-bar.js';
+import './list.js';
+import './breadcrumbs.js';
+import './toast.js';
+import './description-list.js';
+import './line-items.js';
+import './progress-bar.js';
+import './signed-amount.js';
+import './error-boundary.js';
+import './authed-image.js';
+import '../hooks/use-authed-src.js';
+import './image-grid.js';
+import './lightbox.js';
 
 /**
  * A time of day, as a `"HH:mm"` string (`"HH:mm:ss"` once `step` asks for seconds).