@eifi1/ui-kit 0.4.0

package/dist/components/tooltip.js

@@ -0,0 +1,171 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { cn } from "../lib/cn.js";
+import { useAnchoredRect } from "../hooks/use-anchored-rect.js";
+const TOOLTIP_SURFACE = "w-max max-w-[min(20rem,calc(100vw-1rem))] rounded-md border border-[var(--border)] bg-[var(--bg-surface)] px-2 py-1 text-xs font-medium text-[var(--text-primary)] shadow-lg";
+const sidePositionClass = {
+  top: "bottom-full left-1/2 -translate-x-1/2 mb-1",
+  bottom: "top-full left-1/2 -translate-x-1/2 mt-1",
+  left: "right-full top-1/2 -translate-y-1/2 mr-1",
+  right: "left-full top-1/2 -translate-y-1/2 ml-1"
+};
+function Tooltip({
+  label,
+  side = "top",
+  className,
+  portal = false,
+  redact = false,
+  children
+}) {
+  if (isEmptyLabel(label)) return /* @__PURE__ */ jsx(Fragment, { children });
+  if (portal) {
+    return /* @__PURE__ */ jsx(
+      PortalTooltip,
+      {
+        label,
+        side,
+        className,
+        redact,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("span", { className: cn("relative inline-flex group/tooltip", className), children: [
+    children,
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        role: "tooltip",
+        "data-private": redact ? "" : void 0,
+        className: cn(
+          TOOLTIP_SURFACE,
+          "pointer-events-none absolute z-50 opacity-0 group-hover/tooltip:opacity-100 group-focus-within/tooltip:opacity-100",
+          sidePositionClass[side]
+        ),
+        children: label
+      }
+    )
+  ] });
+}
+function isEmptyLabel(label) {
+  return label == null || label === false || typeof label === "string" && label.trim() === "";
+}
+const TOOLTIP_GAP = 4;
+const TOOLTIP_MARGIN = 4;
+const portalTransformBySide = {
+  right: "translate(0, -50%)",
+  left: "translate(-100%, -50%)",
+  top: "translate(-50%, -100%)",
+  bottom: "translate(-50%, 0)"
+};
+function tooltipAnchor(r, side) {
+  switch (side) {
+    case "right":
+      return { left: r.right + TOOLTIP_GAP, top: r.top + r.height / 2 };
+    case "left":
+      return { left: r.left - TOOLTIP_GAP, top: r.top + r.height / 2 };
+    case "top":
+      return { left: r.left + r.width / 2, top: r.top - TOOLTIP_GAP };
+    case "bottom":
+      return { left: r.left + r.width / 2, top: r.bottom + TOOLTIP_GAP };
+  }
+}
+const opposite = {
+  left: "right",
+  right: "left",
+  top: "bottom",
+  bottom: "top"
+};
+function roomOn(r, side, size, viewport) {
+  switch (side) {
+    case "left":
+      return r.left - TOOLTIP_GAP - size.width >= TOOLTIP_MARGIN;
+    case "right":
+      return r.right + TOOLTIP_GAP + size.width <= viewport.width - TOOLTIP_MARGIN;
+    case "top":
+      return r.top - TOOLTIP_GAP - size.height >= TOOLTIP_MARGIN;
+    case "bottom":
+      return r.bottom + TOOLTIP_GAP + size.height <= viewport.height - TOOLTIP_MARGIN;
+  }
+}
+function sameRoom(a, b) {
+  return a.size.width === b.size.width && a.size.height === b.size.height && a.viewport.width === b.viewport.width && a.viewport.height === b.viewport.height;
+}
+function clamp(value, low, high) {
+  return Math.max(low, Math.min(value, high));
+}
+function placeTooltip(r, side, size, viewport) {
+  const chosen = roomOn(r, side, size, viewport) || !roomOn(r, opposite[side], size, viewport) ? side : opposite[side];
+  const point = tooltipAnchor(r, chosen);
+  const box = chosen === "left" ? { left: point.left - size.width, top: point.top - size.height / 2 } : chosen === "right" ? { left: point.left, top: point.top - size.height / 2 } : chosen === "top" ? { left: point.left - size.width / 2, top: point.top - size.height } : { left: point.left - size.width / 2, top: point.top };
+  return {
+    left: clamp(box.left, TOOLTIP_MARGIN, viewport.width - size.width - TOOLTIP_MARGIN),
+    top: clamp(box.top, TOOLTIP_MARGIN, viewport.height - size.height - TOOLTIP_MARGIN),
+    side: chosen
+  };
+}
+function PortalTooltip({
+  label,
+  side,
+  className,
+  redact,
+  children
+}) {
+  const triggerRef = useRef(null);
+  const bubbleRef = useRef(null);
+  const [visible, setVisible] = useState(false);
+  const rect = useAnchoredRect(triggerRef, visible);
+  const [room, setRoom] = useState(null);
+  useLayoutEffect(() => {
+    const measured = visible ? bubbleRef.current?.getBoundingClientRect() : void 0;
+    setRoom((previous) => {
+      if (!measured) return null;
+      const next = {
+        size: { width: measured.width, height: measured.height },
+        viewport: { width: window.innerWidth, height: window.innerHeight }
+      };
+      return previous && sameRoom(previous, next) ? previous : next;
+    });
+  }, [visible, rect, label]);
+  const point = rect ? tooltipAnchor(rect, side) : null;
+  const placed = rect && room ? placeTooltip(rect, side, room.size, room.viewport) : null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref: triggerRef,
+        className: cn("relative inline-flex", className),
+        onMouseEnter: () => setVisible(true),
+        onMouseLeave: () => setVisible(false),
+        onFocus: () => setVisible(true),
+        onBlur: () => setVisible(false),
+        children
+      }
+    ),
+    visible && point && typeof document !== "undefined" && createPortal(
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          ref: bubbleRef,
+          role: "tooltip",
+          "data-private": redact ? "" : void 0,
+          style: placed ? { position: "fixed", left: placed.left, top: placed.top } : {
+            position: "fixed",
+            left: point.left,
+            top: point.top,
+            transform: portalTransformBySide[side]
+          },
+          className: cn(TOOLTIP_SURFACE, "pointer-events-none z-50"),
+          children: label
+        }
+      ),
+      document.body
+    )
+  ] });
+}
+export {
+  Tooltip,
+  placeTooltip
+};
+//# sourceMappingURL=tooltip.js.map

package/dist/components/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/tooltip.tsx"],"sourcesContent":["import { useLayoutEffect, useRef, useState, type ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"../lib/cn\";\nimport { useAnchoredRect, type AnchorRect } from \"../hooks/use-anchored-rect\";\n\ntype TooltipSide = \"top\" | \"bottom\" | \"left\" | \"right\";\n\n/** The floating bubble itself. Uses the shared surface/border/text tokens so it\n *  reads as part of the app's chrome (like the top bar and cards) rather than the\n *  cold slate pill it used to be.\n *\n *  `w-max` keeps a short label on one line — the old `whitespace-nowrap` did that\n *  too, but it also let a sentence-length label grow without bound, and a bubble\n *  wider than the space beside its trigger gets clipped by whatever overflow\n *  container it sits in. So cap it and let long text wrap instead. The cap tracks\n *  the viewport as well, for narrow screens where 20rem is already most of it.\n *  `side` is a preference rather than an instruction for the PORTALLED variant,\n *  which measures the bubble and turns it round when it would not fit\n *  (Steering Design feedback #126). The CSS-only one never learns its own size,\n *  so there `side` is still the whole of the placement. */\nconst TOOLTIP_SURFACE =\n  \"w-max max-w-[min(20rem,calc(100vw-1rem))] rounded-md border border-[var(--border)] bg-[var(--bg-surface)] px-2 py-1 text-xs font-medium text-[var(--text-primary)] shadow-lg\";\n\nconst sidePositionClass: Record<TooltipSide, string> = {\n  top: \"bottom-full left-1/2 -translate-x-1/2 mb-1\",\n  bottom: \"top-full left-1/2 -translate-x-1/2 mt-1\",\n  left: \"right-full top-1/2 -translate-y-1/2 mr-1\",\n  right: \"left-full top-1/2 -translate-y-1/2 ml-1\",\n};\n\n/**\n * Hover/focus label for a control.\n *\n * Two implementations, and the choice matters more than it looks. The default is\n * CSS-only: the bubble is always mounted next to the trigger and fades in on\n * `:hover`, which costs no state and works in a plain render test. The `portal`\n * variant mounts the bubble in `document.body` only while hovered, positioned by\n * measurement.\n *\n * ⚠️ **A bubble that repeats a value has to be redactable.** The consuming app blurs\n * `[data-private]` under a `demo-mode` class on `<html>` — and the portalled bubble is\n * mounted on `document.body`, which is INSIDE that class, so the rule reaches it as\n * long as the bubble is tagged. It is not tagged by default, because most labels are\n * UI strings; pass `redact` on the ones that repeat the user's own data (a truncated\n * payee, an account name, a memo). Getting this wrong is silent: the trigger blurs,\n * the bubble spells the value out on hover.\n *\n * ⚠️ **An empty label renders nothing at all.** `title={payee ?? \"\"}` is an ordinary\n * shape at a call site that reveals truncated text, and the native attribute answers\n * it by showing no tooltip. A component that faithfully rendered an empty bubble\n * would be a worse `title`, so the emptiness check is here rather than at every call\n * site that could forget it.\n *\n * ⚠️ **Inside a scroll container, use `portal`.** An always-mounted bubble is\n * absolutely positioned, but an absolutely positioned descendant still counts\n * towards its scroll-container ancestor's scrollable overflow — so an invisible\n * bubble on a control near the right edge makes the container scroll sideways\n * with nothing to reveal. That is what Keksdose feedback dev#488 reported on the\n * admin roster: 66px of horizontal scroll on a table that fit, 44px of it owed to\n * tooltips nobody could see. The portalled bubble is `position: fixed` and absent\n * until hovered, so it adds no width — and, being outside the container, it also\n * cannot be clipped by it.\n */\nexport function Tooltip({\n  label,\n  side = \"top\",\n  className,\n  portal = false,\n  redact = false,\n  children,\n}: {\n  label: ReactNode;\n  side?: TooltipSide;\n  className?: string;\n  portal?: boolean;\n  /** Tag the bubble `data-private`, for a label that repeats the user's own data. */\n  redact?: boolean;\n  children: ReactNode;\n}) {\n  // No label, no bubble — and no wrapper either, so a conditional tooltip costs the\n  // layout nothing on the branch where it does not apply.\n  if (isEmptyLabel(label)) return <>{children}</>;\n  if (portal) {\n    return (\n      <PortalTooltip\n        label={label}\n        side={side}\n        className={className}\n        redact={redact}\n      >\n        {children}\n      </PortalTooltip>\n    );\n  }\n  return (\n    <span className={cn(\"relative inline-flex group/tooltip\", className)}>\n      {children}\n      <span\n        role=\"tooltip\"\n        data-private={redact ? \"\" : undefined}\n        className={cn(\n          TOOLTIP_SURFACE,\n          \"pointer-events-none absolute z-50 opacity-0 group-hover/tooltip:opacity-100 group-focus-within/tooltip:opacity-100\",\n          sidePositionClass[side],\n        )}\n      >\n        {label}\n      </span>\n    </span>\n  );\n}\n\n/** \"Would this bubble be blank.\" Only the values a call site actually produces when\n *  it has nothing to say — `\"\"`, `null`, `undefined`, `false` from a `&&` guard. A\n *  numeric `0` is a real label and stays one. */\nfunction isEmptyLabel(label: ReactNode): boolean {\n  return (\n    label == null ||\n    label === false ||\n    (typeof label === \"string\" && label.trim() === \"\")\n  );\n}\n\nconst TOOLTIP_GAP = 4;\n\n/** How close to the viewport edge a bubble may sit. Not zero: a label flush\n *  against the glass reads as clipped even when every character is on screen. */\nconst TOOLTIP_MARGIN = 4;\n\nconst portalTransformBySide: Record<TooltipSide, string> = {\n  right: \"translate(0, -50%)\",\n  left: \"translate(-100%, -50%)\",\n  top: \"translate(-50%, -100%)\",\n  bottom: \"translate(-50%, 0)\",\n};\n\n/** Anchor point (viewport px) for the tooltip on the given side of `r`. Paired\n *  with {@link portalTransformBySide}, which shifts the box onto that point. */\nfunction tooltipAnchor(\n  r: AnchorRect,\n  side: TooltipSide,\n): { left: number; top: number } {\n  switch (side) {\n    case \"right\":\n      return { left: r.right + TOOLTIP_GAP, top: r.top + r.height / 2 };\n    case \"left\":\n      return { left: r.left - TOOLTIP_GAP, top: r.top + r.height / 2 };\n    case \"top\":\n      return { left: r.left + r.width / 2, top: r.top - TOOLTIP_GAP };\n    case \"bottom\":\n      return { left: r.left + r.width / 2, top: r.bottom + TOOLTIP_GAP };\n  }\n}\n\nexport interface TooltipSize {\n  width: number;\n  height: number;\n}\n\nexport interface TooltipViewport {\n  width: number;\n  height: number;\n}\n\nexport interface TooltipPlacement {\n  left: number;\n  top: number;\n  /** Which side it ended up on, which need not be the one that was asked for. */\n  side: TooltipSide;\n}\n\nconst opposite: Record<TooltipSide, TooltipSide> = {\n  left: \"right\",\n  right: \"left\",\n  top: \"bottom\",\n  bottom: \"top\",\n};\n\n/** Whether the bubble clears the viewport edge on `side` of the trigger. */\nfunction roomOn(\n  r: AnchorRect,\n  side: TooltipSide,\n  size: TooltipSize,\n  viewport: TooltipViewport,\n): boolean {\n  switch (side) {\n    case \"left\":\n      return r.left - TOOLTIP_GAP - size.width >= TOOLTIP_MARGIN;\n    case \"right\":\n      return r.right + TOOLTIP_GAP + size.width <= viewport.width - TOOLTIP_MARGIN;\n    case \"top\":\n      return r.top - TOOLTIP_GAP - size.height >= TOOLTIP_MARGIN;\n    case \"bottom\":\n      return r.bottom + TOOLTIP_GAP + size.height <= viewport.height - TOOLTIP_MARGIN;\n  }\n}\n\nfunction sameRoom(\n  a: { size: TooltipSize; viewport: TooltipViewport },\n  b: { size: TooltipSize; viewport: TooltipViewport },\n): boolean {\n  return (\n    a.size.width === b.size.width &&\n    a.size.height === b.size.height &&\n    a.viewport.width === b.viewport.width &&\n    a.viewport.height === b.viewport.height\n  );\n}\n\nfunction clamp(value: number, low: number, high: number): number {\n  // `high` first, so a bubble taller or wider than the viewport is pinned to the\n  // top-left corner rather than to the bottom-right one — the start of a label\n  // is the half worth keeping.\n  return Math.max(low, Math.min(value, high));\n}\n\n/**\n * Where the bubble actually goes, given how big it turned out to be.\n *\n * Two rules, and they are separate because they fix separate failures.\n *\n * **Turn round when the preferred side has no room.** `side` says which side of\n * the trigger the label reads best on, and on a form near the left edge of the\n * window that side is off the screen — the capped bubble can only wrap, not\n * move, so what the reader gets is a sentence with its first half outside the\n * glass. Flipped only when the *other* side is genuinely better: a trigger in a\n * viewport too narrow for the bubble either way keeps the side it asked for, and\n * the clamp below does what it can.\n *\n * **Then clamp both axes.** The cross axis is the one that needs it — a `top`\n * bubble is centred on the trigger, so a trigger near the left edge pushes half\n * the label off even though the side it is on is right — and clamping the main\n * axis too costs nothing and covers the flip having nowhere to land.\n *\n * Pure, and measured in viewport pixels throughout, so it can be tested without\n * a layout: the caller supplies the trigger's rect, the bubble's own size and\n * the window.\n */\nexport function placeTooltip(\n  r: AnchorRect,\n  side: TooltipSide,\n  size: TooltipSize,\n  viewport: TooltipViewport,\n): TooltipPlacement {\n  const chosen =\n    roomOn(r, side, size, viewport) || !roomOn(r, opposite[side], size, viewport)\n      ? side\n      : opposite[side];\n  const point = tooltipAnchor(r, chosen);\n  const box =\n    chosen === \"left\"\n      ? { left: point.left - size.width, top: point.top - size.height / 2 }\n      : chosen === \"right\"\n        ? { left: point.left, top: point.top - size.height / 2 }\n        : chosen === \"top\"\n          ? { left: point.left - size.width / 2, top: point.top - size.height }\n          : { left: point.left - size.width / 2, top: point.top };\n  return {\n    left: clamp(box.left, TOOLTIP_MARGIN, viewport.width - size.width - TOOLTIP_MARGIN),\n    top: clamp(box.top, TOOLTIP_MARGIN, viewport.height - size.height - TOOLTIP_MARGIN),\n    side: chosen,\n  };\n}\n\nfunction PortalTooltip({\n  label,\n  side,\n  className,\n  redact,\n  children,\n}: {\n  label: ReactNode;\n  side: TooltipSide;\n  className?: string;\n  redact?: boolean;\n  children: ReactNode;\n}) {\n  const triggerRef = useRef<HTMLSpanElement | null>(null);\n  const bubbleRef = useRef<HTMLSpanElement | null>(null);\n  const [visible, setVisible] = useState(false);\n  // The measure + scroll/resize-tracking lifecycle is owned by useAnchoredRect;\n  // here we only map the rect to a side-specific anchor point.\n  const rect = useAnchoredRect(triggerRef, visible);\n  // The bubble's own size and the window it has to fit in — neither of which is\n  // knowable in render: the width is whatever the label wrapped to inside the\n  // cap, and reading `window` while rendering is not a pure thing to do. Both\n  // are taken in a LAYOUT effect, so the correction lands before the browser\n  // paints and there is no frame in which the label sits off the screen.\n  const [room, setRoom] = useState<{ size: TooltipSize; viewport: TooltipViewport } | null>(null);\n  useLayoutEffect(() => {\n    const measured = visible ? bubbleRef.current?.getBoundingClientRect() : undefined;\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- a measurement is the one thing a layout effect is for\n    setRoom((previous) => {\n      if (!measured) return null;\n      const next = {\n        size: { width: measured.width, height: measured.height },\n        viewport: { width: window.innerWidth, height: window.innerHeight },\n      };\n      // Only publish what actually CHANGED: every re-measure allocates a fresh\n      // object, and a new object on every scroll event would re-render the\n      // bubble forever.\n      return previous && sameRoom(previous, next) ? previous : next;\n    });\n  }, [visible, rect, label]);\n\n  const point = rect ? tooltipAnchor(rect, side) : null;\n  // Unmeasured on the very first pass, where the anchor point plus the side's\n  // own transform is exactly what this always did. One layout effect later the\n  // size is known and the placement is decided properly.\n  const placed = rect && room ? placeTooltip(rect, side, room.size, room.viewport) : null;\n\n  return (\n    <>\n      <span\n        ref={triggerRef}\n        className={cn(\"relative inline-flex\", className)}\n        onMouseEnter={() => setVisible(true)}\n        onMouseLeave={() => setVisible(false)}\n        onFocus={() => setVisible(true)}\n        onBlur={() => setVisible(false)}\n      >\n        {children}\n      </span>\n      {visible &&\n        point &&\n        typeof document !== \"undefined\" &&\n        createPortal(\n          <span\n            ref={bubbleRef}\n            role=\"tooltip\"\n            data-private={redact ? \"\" : undefined}\n            style={\n              placed\n                ? { position: \"fixed\", left: placed.left, top: placed.top }\n                : {\n                    position: \"fixed\",\n                    left: point.left,\n                    top: point.top,\n                    transform: portalTransformBySide[side],\n                  }\n            }\n            className={cn(TOOLTIP_SURFACE, \"pointer-events-none z-50\")}\n          >\n            {label}\n          </span>,\n          document.body,\n        )}\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/ui.d.ts

@@ -0,0 +1,239 @@
+import * as react from 'react';
+import { ButtonHTMLAttributes, ReactNode, ComponentPropsWithoutRef, InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes } from 'react';
+
+type ButtonVariant = "primary" | "secondary" | "ghost" | "danger" | "brand";
+/**
+ * Button classes for the rare case where the styling must land on a non-`<button>`
+ * element that {@link Button} can't render — e.g. a router `<Link>` or a Radix
+ * AlertDialog Action/Cancel (which must stay the Radix element). Everywhere a real
+ * button works, prefer `<Button>`. Draws from the same base + variant maps as
+ * `<Button>`, so the two stay in lockstep.
+ */
+declare function buttonClasses(variant?: ButtonVariant, className?: string): string;
+declare function Button({ variant, stretch, className, ...rest }: ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant?: ButtonVariant;
+    stretch?: boolean;
+}): react.JSX.Element;
+declare const IconButton: react.ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant?: ButtonVariant;
+    /** Box size: md = 36px (matches the top bar), sm = 32px. The icon stays 20px. */
+    size?: "sm" | "md";
+} & react.RefAttributes<HTMLButtonElement>>;
+declare const FIELD_BASE: string;
+/** Cancels FIELD_BASE's read-only treatment for a field that is `readOnly` for a
+ *  reason other than "you may not edit this". Attribute-scoped for the same reason
+ *  FIELD_BASE is — the two have to cancel on the identical selector or twMerge
+ *  cannot make the later one win. */
+declare const FIELD_WRITABLE_LOOK = "[&[readonly]]:bg-white [&[readonly]]:text-slate-900 dark:[&[readonly]]:bg-slate-900 dark:[&[readonly]]:text-slate-100";
+declare const FIELD_FLOATING_PAD = "pt-4 pb-1";
+declare const FIELD_INVALID = "border-rose-400 ring-1 ring-rose-400 focus:border-rose-500 focus:ring-rose-500 dark:border-rose-500/80 dark:ring-rose-500/80 dark:focus:border-rose-400";
+declare const FLOATING_INPUT_CLASS: string;
+/** The phone breakpoint the display treatment below keys off — the same one the
+ *  numpad sheet uses, kept in one place so the two can't drift apart. */
+declare const PHONE_QUERY = "(max-width: 767px)";
+/**
+ * The PHONE display treatment (Keksdose feedback #176, carried across the entry
+ * forms by #179): the field chrome removed so the ONE input a form is actually
+ * about reads as the thing itself, not as another boxed row in a stack.
+ *
+ * Every control that takes `variant="display"` — {@link Input}, `NumberInput`,
+ * `AmountInput` — means exactly the same thing by it: the treatment applies below
+ * {@link PHONE_QUERY} and the field is untouched above it, so a caller never has
+ * to ask the viewport, and a form can't end up half-treated across breakpoints.
+ *
+ * What stays, deliberately:
+ *  - A hairline baseline. With the box gone something still has to say "you can
+ *    type here"; it takes the brand colour on focus, where a bordered field would
+ *    light its whole outline. Each edge is set exactly once (`border-x-0
+ *    border-t-0 border-b`) so the rule can't hinge on utility order.
+ *  - The muted placeholder colour, because a display field is usually empty at
+ *    the moment it matters most and has nothing else to show.
+ *  - The label, moved to `sr-only` rather than dropped: display type is legible
+ *    to the eye, not to a screen reader.
+ *
+ * Size and weight are NOT here — an amount wants display type, a subject line
+ * wants a heading — so each control adds its own on top.
+ */
+declare const FIELD_DISPLAY = "block w-full border-x-0 border-t-0 border-b border-[var(--border)] bg-transparent px-0 pt-0 pb-1 text-[var(--text-primary)] shadow-none placeholder:text-slate-400 focus:border-[var(--brand)] focus:outline-none focus:ring-0 disabled:opacity-60 dark:placeholder:text-slate-500";
+declare const FIELD_TRIGGER: string;
+/** The dropdown chevron, shared by the native {@link Select} and every custom
+ * {@link FIELD_TRIGGER} control.
+ *
+ * Absolutely positioned and centred on the FIELD box. As an ordinary flex child
+ * it centres on the *content* box instead, and `FIELD_FLOATING_PAD` (pt-4 pb-1)
+ * pushes that box's midline down — so a labelled currency/multi-select chevron
+ * sat visibly lower than the native select's right beside it (feedback #400).
+ * Pair it with `pr-9` on the trigger so the value can't run underneath. */
+declare function FieldChevron({ className }: {
+    className?: string;
+}): react.JSX.Element;
+declare const FLOATING_LABEL_CLASS: string;
+declare const FLOATING_LABEL_STATIC: string;
+/**
+ * The one place that assembles a labelled field: a `relative` wrapper around the
+ * control (`children`) plus a floating label inside the top strip. Pass `staticLabel`
+ * for controls that always have a value (selects); omit it for free-text fields whose
+ * label animates from centred→up. Used by Input/Select/Textarea/NumberInput; the
+ * dropdown controls that need a ref + menu keep their own wrapper but the same label
+ * (via {@link FieldLabel}) and trigger ({@link FIELD_TRIGGER}) styles.
+ */
+declare function FloatingField({ className, htmlFor, label, staticLabel, srOnlyLabel, hint, children, }: {
+    className?: string;
+    htmlFor?: string;
+    label?: ReactNode;
+    staticLabel?: boolean;
+    /** Keep the label in the accessibility tree but out of the layout — what
+     *  {@link FIELD_DISPLAY} needs, since a floating label inside a field with no
+     *  field left would have nothing to float in. */
+    srOnlyLabel?: boolean;
+    /** Something interactive that belongs to the LABEL rather than to the value —
+     *  in practice a {@link FieldHint} "?" (dev#468). It is rendered in a flex row
+     *  with the label, so it is centred on the label's line by the layout instead
+     *  of by a hand-tuned `top-…`, and it can never drift when the type changes.
+     *
+     *  It rides an ANIMATED label too, and the two cases place it differently on
+     *  purpose. A static label has a field-wide strip to itself, so the hint sits
+     *  at the far end of it and a long label truncates into the gap. An animated
+     *  one belongs to a control with something at the right edge of the field — a
+     *  calculator, a stepper — so the hint follows the label instead, and it is
+     *  the label that gives way (steering-design feedback #48). */
+    hint?: ReactNode;
+    children: ReactNode;
+}): react.JSX.Element;
+/**
+ * The "?" that explains a field, on the field's own label line (dev#468).
+ *
+ * Pass it to a labelled {@link Select} / {@link Input} as `hint`. It exists as a
+ * component rather than as a snippet each form repeats because the previous
+ * version was exactly that snippet — an absolutely-positioned button whose
+ * `top-1.5` was one guess at where an 11px label sits — and the reporter's
+ * follow-up was *"question mark is not centered. Is it part of the hoc?
+ * positioning problems seem quite frequently."* It was not part of the HOC. Now
+ * it is, and there is one place left where the answer can be wrong.
+ *
+ * A `<button>` rather than a bare icon: hover alone puts the explanation out of
+ * reach of a keyboard and of every touch device, and the tooltip shows on focus
+ * too. The text is also its accessible name, so a screen reader gets it without
+ * the bubble ever opening.
+ */
+declare function FieldHint({ label, side }: {
+    label: string;
+    side?: "left" | "right" | "top" | "bottom";
+}): react.JSX.Element;
+/**
+ * The floating label for a custom-dropdown trigger (a `<span>`, since the trigger is a
+ * button not a labelable input). Same placement as {@link FloatingField}'s static label,
+ * so every labelled field lines up. Render inside a `relative` wrapper, before the trigger.
+ */
+declare function FieldLabel({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): react.JSX.Element;
+declare const Input: react.ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & {
+    label?: ReactNode;
+    /** Classes for the `<input>` itself, as distinct from `className`, which
+     *  styles the field WRAPPER once a `label` turns this into a FloatingField.
+     *  Without it a labelled Input had no way to reach its own element — so
+     *  `tabular-nums` on a numeric text field, which NumberInput has supported
+     *  all along through the identically named prop, was simply unavailable. */
+    inputClassName?: string;
+    /** {@link FIELD_DISPLAY} — on a phone, drop the chrome and set the value as a
+     *  heading. For the one field a form is about (a feedback subject, an account
+     *  name), never for a stack of them. Labelled fields only: the label is what
+     *  the placeholder falls back to once it goes `sr-only`. */
+    variant?: "field" | "display";
+    /** The field is required and unanswered, or holds something that cannot be
+     *  saved — {@link FIELD_INVALID}, the same rose border/ring `Select` has worn
+     *  since feedback #235.
+     *
+     *  It exists here because writing `aria-invalid` by hand did NOT do this. The
+     *  attribute spreads onto the element and nothing styles it — there is no
+     *  `[aria-invalid]` rule in this package or in either consumer's stylesheet —
+     *  so three Keksdose dialogs flagged a mismatched passphrase to a screen reader
+     *  and painted the field exactly as if it were fine. Setting the prop sets the
+     *  attribute too, so the two can no longer be spelled separately. */
+    invalid?: boolean;
+} & react.RefAttributes<HTMLInputElement>>;
+declare const Select: react.ForwardRefExoticComponent<SelectHTMLAttributes<HTMLSelectElement> & {
+    label?: ReactNode;
+    invalid?: boolean;
+    /** A {@link FieldHint} for the label line — see {@link FloatingField}. */
+    hint?: ReactNode;
+} & react.RefAttributes<HTMLSelectElement>>;
+declare const Textarea: react.ForwardRefExoticComponent<TextareaHTMLAttributes<HTMLTextAreaElement> & {
+    label?: ReactNode;
+    /** See {@link Input}'s `invalid`. */
+    invalid?: boolean;
+} & react.RefAttributes<HTMLTextAreaElement>>;
+declare function Card({ className, children, flush, }: {
+    className?: string;
+    children: ReactNode;
+    /**
+     * When true, drop the card chrome (border, rounded corners, shadow) on mobile so the
+     * card spans edge-to-edge. Chrome reappears at the `md` breakpoint. Use for primary
+     * content cards on data pages; leave off for centered dialog/panel cards.
+     */
+    flush?: boolean;
+}): react.JSX.Element;
+declare function CardHeader({ className, ...props }: ComponentPropsWithoutRef<"div">): react.JSX.Element;
+declare function CardTitle({ className, ...props }: ComponentPropsWithoutRef<"div">): react.JSX.Element;
+declare function CardDescription({ className, ...props }: ComponentPropsWithoutRef<"div">): react.JSX.Element;
+declare function CardAction({ className, ...props }: ComponentPropsWithoutRef<"div">): react.JSX.Element;
+declare function CardContent({ className, ...props }: ComponentPropsWithoutRef<"div">): react.JSX.Element;
+declare function CardFooter({ className, ...props }: ComponentPropsWithoutRef<"div">): react.JSX.Element;
+declare function Spinner({ className }: {
+    className?: string;
+}): react.JSX.Element;
+declare function EmptyState({ title, hint, className, }: {
+    title: string;
+    hint?: string;
+    className?: string;
+}): react.JSX.Element;
+interface TabsProps<T extends string> {
+    /** `label` is a ReactNode so tabs can pair an icon with text; `badge` is an
+     *  optional trailing node (e.g. a count pill). `href` marks a tab that IS a route:
+     *  it renders as an anchor so it can be middle-/⌘-clicked into a new tab (Keksdose
+     *  feedback #451), while a plain click still goes through `onChange` and stays
+     *  client-side. Tabs that only flip local state leave it unset — a link to a URL
+     *  that does not select the tab would be worse than no link. */
+    tabs: {
+        id: T;
+        label: ReactNode;
+        badge?: ReactNode;
+        href?: string;
+    }[];
+    active: T;
+    onChange: (id: T) => void;
+    className?: string;
+    /** Let the strip WRAP onto as many rows as it needs below `md`, instead of
+     *  scrolling sideways — for a strip carrying more tabs than fit on a phone row.
+     *  Keksdose live #262: ten reports on a 406px screen showed about three, and the
+     *  round-2 answer (a <select> below `md`) cost a tap to open and a tap to choose.
+     *  *"I would rather keep the tabs but have multirow tabs depending on the screen
+     *  size, I will not loose the function to see all reports at once and navigate by
+     *  single click rather by double click."*
+     *
+     *  The active MARKER has to change with the layout, which is why this cannot be
+     *  done from a call site with a `className`: the default marker is a `border-b-2`
+     *  underline riding the container's own bottom rule, and a tab sitting in a row
+     *  that does not touch that rule cannot wear it — every row but the last would
+     *  show a stray line floating mid-strip, and `-mb-px` would pull each chip a
+     *  pixel into the row beneath it. A wrapped strip marks the active tab with a
+     *  filled brand chip instead, which is also the only thing findable at a glance
+     *  among ten same-weight labels on three rows.
+     *
+     *  From `md` up NOTHING changes: same single-line underline strip, same paddings,
+     *  same colours as every other strip in the app.
+     *
+     *  Opt-in on purpose. The three-tab strips (invoices, statements, bank imports)
+     *  already fit a phone row, and turning those into chips would be an unrequested
+     *  redesign of three other pages. */
+    wrap?: boolean;
+    /** Accessible name for the `role="tablist"` container. Every tab carries its own
+     *  text, so this names the GROUP, not the tabs; leave it unset where a visible
+     *  heading immediately above already does that job. */
+    label?: string;
+}
+declare function Tabs<T extends string>({ tabs, active, onChange, className, wrap, label }: TabsProps<T>): react.JSX.Element;
+
+export { Button, type ButtonVariant, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, EmptyState, FIELD_BASE, FIELD_DISPLAY, FIELD_FLOATING_PAD, FIELD_INVALID, FIELD_TRIGGER, FIELD_WRITABLE_LOOK, FLOATING_INPUT_CLASS, FLOATING_LABEL_CLASS, FLOATING_LABEL_STATIC, FieldChevron, FieldHint, FieldLabel, FloatingField, IconButton, Input, PHONE_QUERY, Select, Spinner, Tabs, type TabsProps, Textarea, buttonClasses };