@eifi1/ui-kit 0.33.0 → 0.34.0

package/dist/components/card.d.ts

@@ -0,0 +1,145 @@
+import type { ComponentPropsWithoutRef, ComponentPropsWithRef, ReactNode, Ref } from "react";
+/**
+ * A `div`'s props, `ref` included since 0.34 — and the same for every Card part (API-2,
+ * refactor audit 2026-10, Skeleton's 0.33.1 change). They always reached the element;
+ * `ComponentPropsWithoutRef` only kept `ref` out of the type, so keksdose wrapped a Card in
+ * a `<div ref>` to scroll it into view (admin-actions-panel).
+ */
+export interface CardProps extends ComponentPropsWithRef<"div"> {
+    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;
+    /**
+     * `inset`: a panel INSIDE a card rather than a card on the page — the raised
+     * `--bg-surface-2`, a small radius, `p-3` of its own and no border or shadow, since
+     * it is already sitting on the card that has them. Lenkbank's results blocks and
+     * corner panels write this by hand (`rounded-md bg-surface-2 p-3`) under a Card of
+     * their own. Unlike the default card it carries its padding, because every one of
+     * those copies wanted the same one; a caller's `p-*` still wins. `flush` is ignored:
+     * an inset panel never runs edge to edge.
+     */
+    variant?: "default" | "inset" | "outline";
+    /**
+     * The card's own padding: `none`, `sm` (`p-3`) or `md` (`p-4`).
+     *
+     * `outline` is the bordered box with no shadow — a row or a block INSIDE a section
+     * rather than a card on the page: kastlan's rent breakdown rows
+     * (tenancy/components/breakdown-row.tsx, `rounded-lg border p-4`) and the meters
+     * list's inline add row (meters/components/meter-add-row.tsx). It takes `md` by
+     * default, as every one of those copies does; `sm` is the dense row.
+     *
+     * Left out, the default card keeps no padding (its CardHeader / CardContent own the
+     * rhythm) and `inset` keeps its `p-3`; passing it sets theirs too. A caller's `p-*`
+     * in `className` still wins.
+     *
+     * Whenever the card carries a padding — this prop, or the `inset` / `outline` one —
+     * CardHeader, CardContent and CardFooter drop their own `px-6` / `pt-6` / `pb-6`, so
+     * the card's padding is the only one. Before 0.16 they kept it regardless and a
+     * `padding="md"` card with parts was padded twice (40px a side); keksdose's settings
+     * cards zeroed all three parts by hand (`<CardHeader className="p-0">`). A padding set
+     * only through `className` cannot be seen from the parts: use the prop.
+     */
+    padding?: "none" | "sm" | "md";
+    /**
+     * A card that is a WARNING (or other status) as a whole: the border in the tone's
+     * `-border` colour and the {@link CardTitle} in the tone's text colour. kastlan's
+     * dunning summary (invoice-detail-page.tsx:231-235) writes both by hand —
+     * `border-[var(--warning-border)]` on the Card, `text-[var(--warning)]` on the title
+     * — and the next status card would copy the pair (`outline` takes it the same way).
+     * An `inset` panel has no border, so it takes the tone's quiet `-bg` fill instead.
+     * `data-tone` is set for a caller's own
+     * selectors.
+     */
+    tone?: CardTone;
+    /**
+     * How loud the `tone` frame is. `"strong"`: a 2px border in the tone's strong
+     * colour — `--danger-border-strong` for `danger`, `--warning-border-strong` for
+     * `warning` (0.33: amber-600 in dark, where `--warning` stood 13:1 off the card and
+     * shouted; docs/colour-roles-harmonization.md §5.2), the tone's own text colour
+     * (`--info`, `--success`) for the two with no `-border-strong` token of their own.
+     * For the one tile on a page that guards something destructive or security-relevant:
+     * keksdose's password / delete-account tile (shared/components/password-danger-card.tsx)
+     * wrote `toneFrameClass(tone)` over the Card by hand for the 2px rule, and `p-[15px]`
+     * under it so the content did not move. Here the extra pixel comes off the padding the
+     * same way (`padding` or the variant's own), so a strong card's content sits exactly
+     * where a soft one's does.
+     *
+     * Default `"soft"`: the 1px `-border` it has always been. No effect without `tone`,
+     * nor on `inset`, which has no border to make louder (its tone is a fill).
+     */
+    toneStrength?: "soft" | "strong";
+    /**
+     * Wash the card in the tone's quiet `-bg` surface as well as framing it. A toned
+     * card is a border and a title colour, at either strength — the wash belongs to
+     * `AlertBanner`, the message, not to a card that holds a form — so it stays
+     * off by default. Some tiles want both: keksdose's password / delete-account tile
+     * was `toneFrameClass(tone)` (border AND wash) before 0.16, and after moving to
+     * `toneStrength="strong"` it re-added `bg-[var(--danger-bg)]` by hand. The wash is
+     * layered OVER the card's own `--bg-surface` (as AlertBanner's `elevated` does), so
+     * the dark theme's translucent tints stay a card, not a hole to the page below.
+     *
+     * No effect without `tone`, nor on `inset`, whose tone is already the fill.
+     */
+    toneFill?: boolean;
+    /**
+     * The parts' type scale. `"compact"`: CardTitle `text-sm font-medium`,
+     * CardDescription `text-xs` and the CardHeader's title-to-description gap
+     * `gap-0.5` — the small settings / admin card. keksdose wrote those three classes by
+     * hand on ~25 cards. Set here, they reach the parts through context; a class on a
+     * part still wins, and a Card nested inside starts again from its own density.
+     *
+     * Default `"comfortable"`: the parts as they have always been.
+     */
+    density?: CardDensity;
+}
+export type CardDensity = "comfortable" | "compact";
+export type CardTone = "warning" | "danger" | "info" | "success";
+export declare function Card({ className, children, flush, variant, tone, toneStrength, toneFill, density, padding, ...rest }: CardProps): import("react").JSX.Element;
+/** The sub-parts add nothing to a `<div>`'s props — they are the SAME element with a
+ *  `data-slot` and a padding rhythm — so most names are aliases rather than an empty
+ *  interface pretending to be more. They exist so a consumer's own wrapper can say
+ *  `CardHeaderProps` instead of `ComponentProps<typeof CardHeader>`. */
+export interface CardHeaderProps extends ComponentPropsWithRef<"div"> {
+    /**
+     * Below the `sm` breakpoint, put the {@link CardAction} UNDER the title and
+     * description instead of beside them. For an action that is wider than an icon —
+     * a "Set up two-factor" button, a checkbox and a filter — which, kept in the
+     * top-end column on a 390px phone, squeezed the title into a ribbon two words wide
+     * (keksdose's settings cards). Off by default at Normal: an icon action (the wizard
+     * summary's pencil) is narrow enough to stay beside the title at every width.
+     *
+     * Unset, it stacks at Large and Extra large only (0.32.1, the 360 px Extra-large
+     * sweep; docs/text-size-harmonization.md §4): there an IconButton shows its label as
+     * text, so the "icon" action is a word-wide pill, and "Refresh sessions" beside
+     * "Sessions" ran 47 px past a 360 px phone. `false` keeps the action beside the title
+     * at every size, for an action the caller knows stays narrow (`labelVisible={false}`).
+     */
+    stackAction?: boolean;
+}
+export type CardTitleLevel = "div" | "h2" | "h3" | "h4";
+export interface CardTitleProps extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * The element the title is: `"div"` (default) or a heading level. Five of keksdose's
+     * settings cards nested their own `<h2>` / `<h3>` INSIDE CardTitle to put the card in
+     * the page's outline — a heading in a div that looks like a heading. The heading
+     * takes the title's look unchanged (the reset leaves `h2`–`h4` at inherited size and
+     * weight), so only the outline changes.
+     */
+    as?: CardTitleLevel;
+    /** The title's element — a `div` or the heading `as` names, hence `HTMLElement`. */
+    ref?: Ref<HTMLElement>;
+}
+export type CardDescriptionProps = ComponentPropsWithRef<"div">;
+export type CardActionProps = ComponentPropsWithRef<"div">;
+export type CardContentProps = ComponentPropsWithRef<"div">;
+export type CardFooterProps = ComponentPropsWithRef<"div">;
+export declare function CardHeader({ className, stackAction, ...props }: CardHeaderProps): import("react").JSX.Element;
+export declare function CardTitle({ className, as: Tag, ref, ...props }: CardTitleProps): import("react").JSX.Element;
+export declare function CardDescription({ className, ...props }: CardDescriptionProps): import("react").JSX.Element;
+export declare function CardAction({ className, ...props }: CardActionProps): import("react").JSX.Element;
+export declare function CardContent({ className, ...props }: CardContentProps): import("react").JSX.Element;
+export declare function CardFooter({ className, ...props }: CardFooterProps): import("react").JSX.Element;

package/dist/components/card.js

@@ -0,0 +1,186 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+import { cn } from "../lib/cn.js";
+const CARD_TONES = {
+  warning: {
+    border: "border-warning",
+    fill: "bg-warning-soft",
+    title: "[&_[data-slot=card-title]]:text-warning"
+  },
+  danger: {
+    border: "border-danger",
+    fill: "bg-danger-soft",
+    title: "[&_[data-slot=card-title]]:text-danger"
+  },
+  info: {
+    border: "border-info",
+    fill: "bg-info-soft",
+    title: "[&_[data-slot=card-title]]:text-info"
+  },
+  success: {
+    border: "border-success",
+    fill: "bg-success-soft",
+    title: "[&_[data-slot=card-title]]:text-success"
+  }
+};
+const CARD_PADDING = {
+  none: "p-0",
+  sm: "p-3",
+  md: "p-4"
+};
+const CARD_PADDING_STRONG = {
+  none: "p-0",
+  sm: "p-[calc(0.75rem-1px)]",
+  md: "p-[calc(1rem-1px)]"
+};
+const CARD_TONE_WASH = {
+  warning: "bg-[image:linear-gradient(var(--warning-bg),var(--warning-bg))]",
+  danger: "bg-[image:linear-gradient(var(--danger-bg),var(--danger-bg))]",
+  info: "bg-[image:linear-gradient(var(--info-bg),var(--info-bg))]",
+  success: "bg-[image:linear-gradient(var(--success-bg),var(--success-bg))]"
+};
+const CARD_TONES_STRONG = {
+  warning: "border-2 border-warning-strong",
+  danger: "border-2 border-danger-strong",
+  info: "border-2 border-[var(--info)]",
+  success: "border-2 border-[var(--success)]"
+};
+const CardPaddedContext = createContext(false);
+const CardDensityContext = createContext("comfortable");
+function Card({
+  className,
+  children,
+  flush,
+  variant = "default",
+  tone,
+  toneStrength = "soft",
+  toneFill = false,
+  density = "comfortable",
+  padding,
+  ...rest
+}) {
+  const toned = tone ? CARD_TONES[tone] : void 0;
+  const bordered = variant !== "inset";
+  const strong = toned !== void 0 && bordered && toneStrength === "strong";
+  const ownPadding = padding ?? (variant === "inset" ? "sm" : variant === "outline" ? "md" : void 0);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-tone": tone,
+      "data-tone-strength": strong ? "strong" : void 0,
+      "data-density": density === "compact" ? "compact" : void 0,
+      ...rest,
+      className: cn(
+        variant === "inset" ? "rounded-md bg-surface-2 p-3" : variant === "outline" ? (
+          // No shadow and no `flush`: it sits on a surface that already has both.
+          "rounded-lg border border-subtle bg-surface p-4"
+        ) : cn(
+          // Surface + border are theme tokens so the palette switcher (feedback
+          // #307) can re-skin every card; a caller's own bg-*/border-* override
+          // still wins via tailwind-merge.
+          "bg-surface",
+          flush ? "border-y border-subtle md:rounded-lg md:border md:shadow-sm" : "rounded-lg border border-subtle shadow-sm"
+        ),
+        toned && (bordered ? toned.border : toned.fill),
+        strong && tone && CARD_TONES_STRONG[tone],
+        toneFill && bordered && tone && CARD_TONE_WASH[tone],
+        toned?.title,
+        ownPadding && (strong ? CARD_PADDING_STRONG : CARD_PADDING)[ownPadding],
+        className
+      ),
+      children: /* @__PURE__ */ jsx(CardPaddedContext.Provider, { value: ownPadding !== void 0, children: /* @__PURE__ */ jsx(CardDensityContext.Provider, { value: density, children }) })
+    }
+  );
+}
+const CARD_STACK_ACTION = "max-sm:grid-cols-1 max-sm:[&>[data-slot=card-action]]:col-start-1 max-sm:[&>[data-slot=card-action]]:row-span-1 max-sm:[&>[data-slot=card-action]]:row-start-auto max-sm:[&>[data-slot=card-action]]:justify-self-start";
+const CARD_STACK_ACTION_AT_LARGE = "large:max-sm:grid-cols-1 large:max-sm:[&>[data-slot=card-action]]:col-start-1 large:max-sm:[&>[data-slot=card-action]]:row-span-1 large:max-sm:[&>[data-slot=card-action]]:row-start-auto large:max-sm:[&>[data-slot=card-action]]:justify-self-start";
+function CardHeader({ className, stackAction, ...props }) {
+  const padded = useContext(CardPaddedContext);
+  const compact = useContext(CardDensityContext) === "compact";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-header",
+      className: cn(
+        // Grid (not flex) so CardAction can occupy a top-right column; with no
+        // action it collapses to one column and title/description stack.
+        //
+        // The two-column switch sets a VARIABLE, not `grid-template-columns`. As
+        // `has-data-[slot=card-action]:grid-cols-[1fr_auto]` it was two classes of
+        // specificity (the class plus the attribute inside `:has()`), and a caller's
+        // `max-sm:grid-cols-1` — one class inside a media query — lost to it at every
+        // width, so the action could never be stacked on a phone from outside. Now the
+        // property itself is set by a plain one-class utility that any `grid-cols-*`
+        // variant of the caller's outranks by coming later in the sheet; the `:has()`
+        // rule only picks the value. The base `1fr` resets the variable so a header
+        // never inherits an ancestor header's two columns.
+        "grid auto-rows-min items-start gap-1.5 [--card-header-cols:1fr] has-data-[slot=card-action]:[--card-header-cols:1fr_auto] grid-cols-[var(--card-header-cols,1fr)]",
+        padded ? "px-0 pt-0" : "px-6 pt-6",
+        compact && "gap-0.5",
+        stackAction === true && CARD_STACK_ACTION,
+        stackAction === void 0 && CARD_STACK_ACTION_AT_LARGE,
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardTitle({ className, as: Tag = "div", ref, ...props }) {
+  const compact = useContext(CardDensityContext) === "compact";
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      ref,
+      "data-slot": "card-title",
+      className: cn(compact ? "text-sm font-medium leading-snug" : "font-semibold leading-none", className),
+      ...props
+    }
+  );
+}
+function CardDescription({ className, ...props }) {
+  const compact = useContext(CardDensityContext) === "compact";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-description",
+      className: cn(compact ? "text-xs" : "text-sm", "text-muted", className),
+      ...props
+    }
+  );
+}
+function CardAction({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-action",
+      className: cn("col-start-2 row-start-1 row-span-2 self-start justify-self-end", className),
+      ...props
+    }
+  );
+}
+function CardContent({ className, ...props }) {
+  const padded = useContext(CardPaddedContext);
+  return /* @__PURE__ */ jsx("div", { "data-slot": "card-content", className: cn(!padded && "px-6 last:pb-6", className), ...props });
+}
+function CardFooter({ className, ...props }) {
+  const padded = useContext(CardPaddedContext);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-footer",
+      className: cn("flex items-center", !padded && "px-6 pb-6", className),
+      ...props
+    }
+  );
+}
+export {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle
+};
+//# sourceMappingURL=card.js.map

package/dist/components/card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/card.tsx"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentPropsWithRef, ReactNode, Ref } from \"react\";\nimport { cn } from \"../lib/cn\";\n\n/**\n * A `div`'s props, `ref` included since 0.34 — and the same for every Card part (API-2,\n * refactor audit 2026-10, Skeleton's 0.33.1 change). They always reached the element;\n * `ComponentPropsWithoutRef` only kept `ref` out of the type, so keksdose wrapped a Card in\n * a `<div ref>` to scroll it into view (admin-actions-panel).\n */\nexport interface CardProps extends ComponentPropsWithRef<\"div\"> {\n  children: ReactNode;\n  /**\n   * When true, drop the card chrome (border, rounded corners, shadow) on mobile so the\n   * card spans edge-to-edge. Chrome reappears at the `md` breakpoint. Use for primary\n   * content cards on data pages; leave off for centered dialog/panel cards.\n   */\n  flush?: boolean;\n  /**\n   * `inset`: a panel INSIDE a card rather than a card on the page — the raised\n   * `--bg-surface-2`, a small radius, `p-3` of its own and no border or shadow, since\n   * it is already sitting on the card that has them. Lenkbank's results blocks and\n   * corner panels write this by hand (`rounded-md bg-surface-2 p-3`) under a Card of\n   * their own. Unlike the default card it carries its padding, because every one of\n   * those copies wanted the same one; a caller's `p-*` still wins. `flush` is ignored:\n   * an inset panel never runs edge to edge.\n   */\n  variant?: \"default\" | \"inset\" | \"outline\";\n  /**\n   * The card's own padding: `none`, `sm` (`p-3`) or `md` (`p-4`).\n   *\n   * `outline` is the bordered box with no shadow — a row or a block INSIDE a section\n   * rather than a card on the page: kastlan's rent breakdown rows\n   * (tenancy/components/breakdown-row.tsx, `rounded-lg border p-4`) and the meters\n   * list's inline add row (meters/components/meter-add-row.tsx). It takes `md` by\n   * default, as every one of those copies does; `sm` is the dense row.\n   *\n   * Left out, the default card keeps no padding (its CardHeader / CardContent own the\n   * rhythm) and `inset` keeps its `p-3`; passing it sets theirs too. A caller's `p-*`\n   * in `className` still wins.\n   *\n   * Whenever the card carries a padding — this prop, or the `inset` / `outline` one —\n   * CardHeader, CardContent and CardFooter drop their own `px-6` / `pt-6` / `pb-6`, so\n   * the card's padding is the only one. Before 0.16 they kept it regardless and a\n   * `padding=\"md\"` card with parts was padded twice (40px a side); keksdose's settings\n   * cards zeroed all three parts by hand (`<CardHeader className=\"p-0\">`). A padding set\n   * only through `className` cannot be seen from the parts: use the prop.\n   */\n  padding?: \"none\" | \"sm\" | \"md\";\n  /**\n   * A card that is a WARNING (or other status) as a whole: the border in the tone's\n   * `-border` colour and the {@link CardTitle} in the tone's text colour. kastlan's\n   * dunning summary (invoice-detail-page.tsx:231-235) writes both by hand —\n   * `border-[var(--warning-border)]` on the Card, `text-[var(--warning)]` on the title\n   * — and the next status card would copy the pair (`outline` takes it the same way).\n   * An `inset` panel has no border, so it takes the tone's quiet `-bg` fill instead.\n   * `data-tone` is set for a caller's own\n   * selectors.\n   */\n  tone?: CardTone;\n  /**\n   * How loud the `tone` frame is. `\"strong\"`: a 2px border in the tone's strong\n   * colour — `--danger-border-strong` for `danger`, `--warning-border-strong` for\n   * `warning` (0.33: amber-600 in dark, where `--warning` stood 13:1 off the card and\n   * shouted; docs/colour-roles-harmonization.md §5.2), the tone's own text colour\n   * (`--info`, `--success`) for the two with no `-border-strong` token of their own.\n   * For the one tile on a page that guards something destructive or security-relevant:\n   * keksdose's password / delete-account tile (shared/components/password-danger-card.tsx)\n   * wrote `toneFrameClass(tone)` over the Card by hand for the 2px rule, and `p-[15px]`\n   * under it so the content did not move. Here the extra pixel comes off the padding the\n   * same way (`padding` or the variant's own), so a strong card's content sits exactly\n   * where a soft one's does.\n   *\n   * Default `\"soft\"`: the 1px `-border` it has always been. No effect without `tone`,\n   * nor on `inset`, which has no border to make louder (its tone is a fill).\n   */\n  toneStrength?: \"soft\" | \"strong\";\n  /**\n   * Wash the card in the tone's quiet `-bg` surface as well as framing it. A toned\n   * card is a border and a title colour, at either strength — the wash belongs to\n   * `AlertBanner`, the message, not to a card that holds a form — so it stays\n   * off by default. Some tiles want both: keksdose's password / delete-account tile\n   * was `toneFrameClass(tone)` (border AND wash) before 0.16, and after moving to\n   * `toneStrength=\"strong\"` it re-added `bg-[var(--danger-bg)]` by hand. The wash is\n   * layered OVER the card's own `--bg-surface` (as AlertBanner's `elevated` does), so\n   * the dark theme's translucent tints stay a card, not a hole to the page below.\n   *\n   * No effect without `tone`, nor on `inset`, whose tone is already the fill.\n   */\n  toneFill?: boolean;\n  /**\n   * The parts' type scale. `\"compact\"`: CardTitle `text-sm font-medium`,\n   * CardDescription `text-xs` and the CardHeader's title-to-description gap\n   * `gap-0.5` — the small settings / admin card. keksdose wrote those three classes by\n   * hand on ~25 cards. Set here, they reach the parts through context; a class on a\n   * part still wins, and a Card nested inside starts again from its own density.\n   *\n   * Default `\"comfortable\"`: the parts as they have always been.\n   */\n  density?: CardDensity;\n}\n\nexport type CardDensity = \"comfortable\" | \"compact\";\n\nexport type CardTone = \"warning\" | \"danger\" | \"info\" | \"success\";\n\n// The title is reached through its `data-slot`, so the tone needs no context and a\n// caller's `className` on CardTitle still wins (it is on the element itself).\nconst CARD_TONES: Record<CardTone, { border: string; fill: string; title: string }> = {\n  warning: {\n    border: \"border-warning\",\n    fill: \"bg-warning-soft\",\n    title: \"[&_[data-slot=card-title]]:text-warning\",\n  },\n  danger: {\n    border: \"border-danger\",\n    fill: \"bg-danger-soft\",\n    title: \"[&_[data-slot=card-title]]:text-danger\",\n  },\n  info: {\n    border: \"border-info\",\n    fill: \"bg-info-soft\",\n    title: \"[&_[data-slot=card-title]]:text-info\",\n  },\n  success: {\n    border: \"border-success\",\n    fill: \"bg-success-soft\",\n    title: \"[&_[data-slot=card-title]]:text-success\",\n  },\n};\n\nconst CARD_PADDING: Record<NonNullable<CardProps[\"padding\"]>, string> = {\n  none: \"p-0\",\n  sm: \"p-3\",\n  md: \"p-4\",\n};\n\n// The same padding one pixel short, for a 2px `toneStrength=\"strong\"` frame: the\n// border grows inwards by that pixel, so the content stays where the 1px card had it.\n// `calc(rem − 1px)` (0.32, §3.2): the padding grows with the text like `p-3` / `p-4`,\n// the border does not — a fixed 11 / 15 px stopped matching them at 125 %, and toggling\n// the tone shifted the content.\nconst CARD_PADDING_STRONG: Record<NonNullable<CardProps[\"padding\"]>, string> = {\n  none: \"p-0\",\n  sm: \"p-[calc(0.75rem-1px)]\",\n  md: \"p-[calc(1rem-1px)]\",\n};\n\n// The wash as a background IMAGE over the card's opaque `--bg-surface` — see\n// `toneFill`. A plain `bg-danger-soft` would REPLACE the surface, and the dark\n// theme's washes are a translucent tint.\nconst CARD_TONE_WASH: Record<CardTone, string> = {\n  warning: \"bg-[image:linear-gradient(var(--warning-bg),var(--warning-bg))]\",\n  danger: \"bg-[image:linear-gradient(var(--danger-bg),var(--danger-bg))]\",\n  info: \"bg-[image:linear-gradient(var(--info-bg),var(--info-bg))]\",\n  success: \"bg-[image:linear-gradient(var(--success-bg),var(--success-bg))]\",\n};\n\nconst CARD_TONES_STRONG: Record<CardTone, string> = {\n  warning: \"border-2 border-warning-strong\",\n  danger: \"border-2 border-danger-strong\",\n  info: \"border-2 border-[var(--info)]\",\n  success: \"border-2 border-[var(--success)]\",\n};\n\n/**\n * Whether the {@link Card} round the parts carries the padding itself — so CardHeader,\n * CardContent and CardFooter must not add theirs on top. `false` (no Card, or a default\n * card with no `padding`) keeps the parts' own `px-6` rhythm, as it always was.\n */\nconst CardPaddedContext = createContext(false);\n\n/** The {@link CardProps.density} of the nearest Card — the parts' type scale. */\nconst CardDensityContext = createContext<CardDensity>(\"comfortable\");\n\nexport function Card({\n  className,\n  children,\n  flush,\n  variant = \"default\",\n  tone,\n  toneStrength = \"soft\",\n  toneFill = false,\n  density = \"comfortable\",\n  padding,\n  ...rest\n}: CardProps) {\n  const toned = tone ? CARD_TONES[tone] : undefined;\n  // An outline card is bordered like the default one, so a tone recolours its border.\n  const bordered = variant !== \"inset\";\n  const strong = toned !== undefined && bordered && toneStrength === \"strong\";\n  // The padding the card itself carries: the prop, else the variant's own (`inset`\n  // p-3, `outline` p-4). A default card with no prop carries none — its parts do.\n  const ownPadding = padding ?? (variant === \"inset\" ? \"sm\" : variant === \"outline\" ? \"md\" : undefined);\n  return (\n    <div\n      data-tone={tone}\n      data-tone-strength={strong ? \"strong\" : undefined}\n      data-density={density === \"compact\" ? \"compact\" : undefined}\n      {...rest}\n      className={cn(\n        variant === \"inset\"\n          ? \"rounded-md bg-surface-2 p-3\"\n          : variant === \"outline\"\n            ? // No shadow and no `flush`: it sits on a surface that already has both.\n              \"rounded-lg border border-subtle bg-surface p-4\"\n            : cn(\n              // Surface + border are theme tokens so the palette switcher (feedback\n              // #307) can re-skin every card; a caller's own bg-*/border-* override\n              // still wins via tailwind-merge.\n              \"bg-surface\",\n              flush\n                ? \"border-y border-subtle md:rounded-lg md:border md:shadow-sm\"\n                : \"rounded-lg border border-subtle shadow-sm\",\n            ),\n        toned && (bordered ? toned.border : toned.fill),\n        strong && tone && CARD_TONES_STRONG[tone],\n        toneFill && bordered && tone && CARD_TONE_WASH[tone],\n        toned?.title,\n        ownPadding && (strong ? CARD_PADDING_STRONG : CARD_PADDING)[ownPadding],\n        className,\n      )}\n    >\n      <CardPaddedContext.Provider value={ownPadding !== undefined}>\n        <CardDensityContext.Provider value={density}>{children}</CardDensityContext.Provider>\n      </CardPaddedContext.Provider>\n    </div>\n  );\n}\n\n// Composed shadcn-style Card sub-parts. A default `Card` with no `padding` stays\n// padding-less, so these own the padding/rhythm (`px-6`, the header's `pt-6`, the\n// last part's `pb-6`). A Card that carries a padding of its own — the `padding` prop,\n// or `inset` / `outline`, which have one built in — tells them so through context and\n// they add none on top (see CardPaddedContext). Token-driven so they re-skin with the\n// palette. Use CardHeader → CardTitle/CardDescription (+ optional CardAction,\n// top-right) → CardContent → CardFooter.\n/** The sub-parts add nothing to a `<div>`'s props — they are the SAME element with a\n *  `data-slot` and a padding rhythm — so most names are aliases rather than an empty\n *  interface pretending to be more. They exist so a consumer's own wrapper can say\n *  `CardHeaderProps` instead of `ComponentProps<typeof CardHeader>`. */\nexport interface CardHeaderProps extends ComponentPropsWithRef<\"div\"> {\n  /**\n   * Below the `sm` breakpoint, put the {@link CardAction} UNDER the title and\n   * description instead of beside them. For an action that is wider than an icon —\n   * a \"Set up two-factor\" button, a checkbox and a filter — which, kept in the\n   * top-end column on a 390px phone, squeezed the title into a ribbon two words wide\n   * (keksdose's settings cards). Off by default at Normal: an icon action (the wizard\n   * summary's pencil) is narrow enough to stay beside the title at every width.\n   *\n   * Unset, it stacks at Large and Extra large only (0.32.1, the 360 px Extra-large\n   * sweep; docs/text-size-harmonization.md §4): there an IconButton shows its label as\n   * text, so the \"icon\" action is a word-wide pill, and \"Refresh sessions\" beside\n   * \"Sessions\" ran 47 px past a 360 px phone. `false` keeps the action beside the title\n   * at every size, for an action the caller knows stays narrow (`labelVisible={false}`).\n   */\n  stackAction?: boolean;\n}\nexport type CardTitleLevel = \"div\" | \"h2\" | \"h3\" | \"h4\";\nexport interface CardTitleProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The element the title is: `\"div\"` (default) or a heading level. Five of keksdose's\n   * settings cards nested their own `<h2>` / `<h3>` INSIDE CardTitle to put the card in\n   * the page's outline — a heading in a div that looks like a heading. The heading\n   * takes the title's look unchanged (the reset leaves `h2`–`h4` at inherited size and\n   * weight), so only the outline changes.\n   */\n  as?: CardTitleLevel;\n  /** The title's element — a `div` or the heading `as` names, hence `HTMLElement`. */\n  ref?: Ref<HTMLElement>;\n}\nexport type CardDescriptionProps = ComponentPropsWithRef<\"div\">;\nexport type CardActionProps = ComponentPropsWithRef<\"div\">;\nexport type CardContentProps = ComponentPropsWithRef<\"div\">;\nexport type CardFooterProps = ComponentPropsWithRef<\"div\">;\n\n/** {@link CardHeaderProps.stackAction}: one column under `sm`, and the action back into\n *  the flow (DOM order, so after the description when it is written after it), at the\n *  start edge. The descendant selector outranks CardAction's own placement classes. */\nconst CARD_STACK_ACTION =\n  \"max-sm:grid-cols-1 max-sm:[&>[data-slot=card-action]]:col-start-1 max-sm:[&>[data-slot=card-action]]:row-span-1 max-sm:[&>[data-slot=card-action]]:row-start-auto max-sm:[&>[data-slot=card-action]]:justify-self-start\";\n/** The same at Large and Extra large only — `stackAction` unset (see its note). A\n *  `large:` class over the scaled `max-sm`, so it costs no render and is right on the\n *  first paint. */\nconst CARD_STACK_ACTION_AT_LARGE =\n  \"large:max-sm:grid-cols-1 large:max-sm:[&>[data-slot=card-action]]:col-start-1 large:max-sm:[&>[data-slot=card-action]]:row-span-1 large:max-sm:[&>[data-slot=card-action]]:row-start-auto large:max-sm:[&>[data-slot=card-action]]:justify-self-start\";\n\nexport function CardHeader({ className, stackAction, ...props }: CardHeaderProps) {\n  const padded = useContext(CardPaddedContext);\n  const compact = useContext(CardDensityContext) === \"compact\";\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        // Grid (not flex) so CardAction can occupy a top-right column; with no\n        // action it collapses to one column and title/description stack.\n        //\n        // The two-column switch sets a VARIABLE, not `grid-template-columns`. As\n        // `has-data-[slot=card-action]:grid-cols-[1fr_auto]` it was two classes of\n        // specificity (the class plus the attribute inside `:has()`), and a caller's\n        // `max-sm:grid-cols-1` — one class inside a media query — lost to it at every\n        // width, so the action could never be stacked on a phone from outside. Now the\n        // property itself is set by a plain one-class utility that any `grid-cols-*`\n        // variant of the caller's outranks by coming later in the sheet; the `:has()`\n        // rule only picks the value. The base `1fr` resets the variable so a header\n        // never inherits an ancestor header's two columns.\n        \"grid auto-rows-min items-start gap-1.5 [--card-header-cols:1fr] has-data-[slot=card-action]:[--card-header-cols:1fr_auto] grid-cols-[var(--card-header-cols,1fr)]\",\n        padded ? \"px-0 pt-0\" : \"px-6 pt-6\",\n        compact && \"gap-0.5\",\n        stackAction === true && CARD_STACK_ACTION,\n        stackAction === undefined && CARD_STACK_ACTION_AT_LARGE,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function CardTitle({ className, as: Tag = \"div\", ref, ...props }: CardTitleProps) {\n  const compact = useContext(CardDensityContext) === \"compact\";\n  return (\n    <Tag\n      ref={ref as Ref<HTMLDivElement & HTMLHeadingElement>}\n      data-slot=\"card-title\"\n      // Compact is `leading-snug`, not `leading-none`: there the title sits on a\n      // 12px description `gap-0.5` below, and a line box exactly the cap height left\n      // the hint hugging the title's descenders (every keksdose admin card added\n      // `leading-normal` by hand). Comfortable keeps `leading-none` — its 14px\n      // description is `gap-1.5` away and has always read right.\n      className={cn(compact ? \"text-sm font-medium leading-snug\" : \"font-semibold leading-none\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function CardDescription({ className, ...props }: CardDescriptionProps) {\n  const compact = useContext(CardDensityContext) === \"compact\";\n  return (\n    <div\n      data-slot=\"card-description\"\n      // `--text-muted`, the kit's secondary-line colour (StatTile's description, the\n      // field captions). It was `--money-neutral`, a MONEY token that happened to be\n      // a similar grey — and a palette that re-tunes the money colours moved every\n      // card's description with them.\n      className={cn(compact ? \"text-xs\" : \"text-sm\", \"text-muted\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function CardAction({ className, ...props }: CardActionProps) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\"col-start-2 row-start-1 row-span-2 self-start justify-self-end\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function CardContent({ className, ...props }: CardContentProps) {\n  const padded = useContext(CardPaddedContext);\n  // `last:pb-6`, not a plain `pb-6`: CardHeader owns the top padding and CardFooter\n  // owns the bottom one, so a card WITHOUT a footer had nothing closing it off and\n  // its last field sat flush against the card edge (kastlan feedback: the language\n  // input touching the card bottom on /profile). Scoping to `:last-child` fixes that\n  // case and leaves a footered card's rhythm exactly as it was. Inside a padded Card\n  // the card closes itself off, so there is nothing to add.\n  return <div data-slot=\"card-content\" className={cn(!padded && \"px-6 last:pb-6\", className)} {...props} />;\n}\n\nexport function CardFooter({ className, ...props }: CardFooterProps) {\n  const padded = useContext(CardPaddedContext);\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\"flex items-center\", !padded && \"px-6 pb-6\", className)}\n      {...props}\n    />\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/chart-height.d.ts

@@ -1,5 +1,4 @@
-import { CSSProperties } from 'react';
-
+import type { CSSProperties } from "react";
 /**
  * A chart's height as the kit's charts take it (docs/text-size-harmonization.md §10.10):
  *
@@ -10,14 +9,12 @@ import { CSSProperties } from 'react';
  * - a number of px, set inline, as before — kept for the callers that hold their height
  *   as a number, but it does not follow the text size.
  */
-type ChartHeight = string | number;
+export type ChartHeight = string | number;
 /** Whether a string `height` is a CSS length rather than a class. */
-declare function isCssLength(value: string): boolean;
+export declare function isCssLength(value: string): boolean;
 /** The class or the inline style a {@link ChartHeight} becomes — one of the two, or
  *  neither for `undefined`. */
-declare function chartHeightProps(height: ChartHeight | undefined): {
+export declare function chartHeightProps(height: ChartHeight | undefined): {
     className?: string;
     style?: CSSProperties;
 };
-
-export { type ChartHeight, chartHeightProps, isCssLength };

package/dist/components/chart-zoom-core.d.ts

@@ -0,0 +1,202 @@
+import type { ComponentType, ReactNode } from "react";
+import { type InverseScaleFunction } from "recharts";
+import { type LabelOverride } from "../i18n/kit-labels.js";
+import { type SeriesChartLabels } from "./series-chart-labels.js";
+/** The y axis a series lands on when it names none — the single shared scale most
+ *  charts have. `SeriesChart` and the fit below agree on it by importing this. */
+export declare const DEFAULT_Y_AXIS = "y";
+/**
+ * How square a selection has to be before it counts as a box: the shorter side
+ * against the longer, both as fractions of the plot. At 0.5 a selection twice as wide
+ * as it is tall is still a box and one three times as wide is a band.
+ */
+export declare const ZOOM_SQUARE_ENOUGH = 0.5;
+/** Below this a drag is a click that moved, not a selection. In fractions of the plot,
+ *  so it is the same gesture on a phone and on a wall display. */
+export declare const ZOOM_MIN_DRAG = 0.02;
+export type ZoomAxes = "both" | "x" | "y";
+/** Which axes a drag zooms — or `null` for a drag too small to mean one, or a plot
+ *  that has not been laid out yet. Direction does not matter; proportion does. */
+export declare function zoomAxesFor(dx: number, dy: number, width: number, height: number, threshold?: number, 
+/** A chart that zooms ONE axis only (see {@link ZoomTarget.zoomAxes}): every drag is
+ *  a band along it, however it was drawn, and a drag with no extent along it is
+ *  nothing — a tall narrow drag over a bar chart names no stretch of the abscissa. */
+only?: "x" | "y"): ZoomAxes | null;
+/** What a drag chose, in DATA coordinates, and which axes it actually named — the
+ *  caller needs the second to know which of the two it may derive from the other. */
+export interface ZoomSelection {
+    which: ZoomAxes;
+    x?: [number, number];
+    /** One window per y axis, keyed by axis id: they are in different units. */
+    y: Record<string, [number, number]>;
+}
+/** A drag, in the chart's own pixel coordinates. */
+export interface ZoomDrag {
+    fromX: number;
+    fromY: number;
+    toX: number;
+    toY: number;
+}
+/**
+ * A finished drag as a selection, or `null` when it selects nothing.
+ *
+ * `xInverse` and `yInverse(axisId)` are recharts' pixel→value functions; an axis whose
+ * function is missing, or whose ends come back non-finite, is left out rather than
+ * handed a NaN window.
+ */
+export declare function selectionFromDrag(drag: ZoomDrag, plot: {
+    width: number;
+    height: number;
+}, xInverse: InverseScaleFunction | undefined, yInverse: (axisId: string) => InverseScaleFunction | undefined, axisIds: readonly string[], only?: "x" | "y"): ZoomSelection | null;
+/** One row of a zoomable chart. Loose on purpose: a row also carries what the chart
+ *  does not plot — keksdose's `rawPeriod` for a drilldown, a label for a category axis —
+ *  and only the finite NUMBERS in it are ever read as samples. */
+export type ZoomRow = Readonly<Record<string, unknown>>;
+/** A series as the fit sees it. `stack` groups bars/areas drawn on top of each other
+ *  (recharts' `stackId`), whose extent is their SUM, not any one of them. */
+export interface ZoomFitSeries {
+    key: string;
+    axis?: string;
+    stack?: string;
+    /** Only `"line"` matters here: recharts cannot stack a line, so a line's `stack` is
+     *  ignored rather than summed into a height nothing on the chart reaches. */
+    type?: string;
+}
+/** What a band refit needs to know about the chart — a subset of `SeriesChart`'s own
+ *  props, so a chart hands its data straight over. */
+export interface ZoomFitSource {
+    rows: readonly ZoomRow[];
+    series: readonly ZoomFitSeries[];
+    axes: readonly {
+        id: string;
+    }[];
+    xKey: string;
+}
+/**
+ * The lowest and highest value an axis DRAWS over the rows whose abscissa is inside
+ * `window` (every row when there is none) — `undefined` when it draws nothing finite.
+ *
+ * Stack-aware, and that is why it exists: a stack of three bars reaches the SUM of
+ * them, and fitting the axis to the tallest single layer (what fitting on values did)
+ * cuts the top two thirds of every stack off. Positive and negative layers are summed
+ * apart, as recharts draws them under `stackOffset="sign"` — a month with 900 income
+ * and −300 expense stacks up to 900 and down to −300, not to 600. A stacked extent
+ * therefore always contains the zero its layers stand on.
+ *
+ * `SeriesChart` fits its axes with this and the zoom refits them with it, so the two
+ * cannot disagree about how tall a stack is.
+ */
+export declare function axisExtent(source: ZoomFitSource, axisId: string, window?: readonly [number, number]): [number, number] | undefined;
+/**
+ * Each y axis fitted to the samples inside an x window — what a band across x leaves
+ * the axes nobody dragged showing. Zoom into a tenth of a sweep and a y axis still
+ * scaled to the whole run draws that tenth as a flat line, which is the one thing the
+ * zoom was for; so the unnamed axes are refitted, which is what "zoom" means everywhere
+ * else.
+ *
+ * An axis with nothing inside the window is left OUT rather than collapsed: a window
+ * between two samples is one where the chart should keep drawing the line across.
+ */
+export declare function fitYToX(source: ZoomFitSource, window: readonly [number, number]): Record<string, [number, number]>;
+/**
+ * The x window that holds every sample inside a set of y windows — the other direction
+ * of the same idea. A channel crossing its band once gives a tight window; one that
+ * oscillates through it gives back most of the sweep, which is the truthful answer.
+ * `undefined` when no sample qualifies, rather than a guess.
+ */
+export declare function fitXToY(source: ZoomFitSource, windows: Readonly<Record<string, readonly [number, number]>>): [number, number] | undefined;
+/**
+ * What a chart remembers about its zoom: the x window, and the y windows the reader
+ * DRAGGED. `y: null` means "derive y from x" — the split is the whole design: what was
+ * dragged is kept, and what follows from it is recomputed on every render, so a band
+ * across x refits y here and in every chart sharing the window.
+ */
+export interface ZoomState {
+    x?: [number, number];
+    y: Record<string, [number, number]> | null;
+}
+export declare const NO_ZOOM: ZoomState;
+/**
+ * The state after a selection. Two band drags COMPOSE rather than the second undoing
+ * the first: a band down y keeps the x window when the band holds no samples, and
+ * otherwise pulls x in to where they are.
+ */
+export declare function zoomAfter(state: ZoomState, selection: ZoomSelection, source: ZoomFitSource): ZoomState;
+/** The domains a chart draws for a state: the x window as is, and each y axis either
+ *  as dragged or fitted to the x window. `{}` means "fit your own data". */
+export declare function zoomDomains(state: ZoomState, source: ZoomFitSource): {
+    xDomain?: [number, number];
+    yDomains: Record<string, [number, number]>;
+};
+/** What the wrapped chart is handed. It applies the domains to its own axes and renders
+ *  `layer` INSIDE the recharts chart, where recharts' hooks answer. */
+export interface ZoomBinding {
+    xDomain?: [number, number];
+    yDomains: Record<string, [number, number]>;
+    layer: ReactNode;
+}
+/**
+ * Which axes a chart lets a drag zoom. `"none"` draws no drag layer and no reset.
+ * A drag on a one-axis chart is always a band along that axis (see {@link zoomAxesFor}).
+ */
+export type ZoomAxesSetting = ZoomAxes | "none";
+/**
+ * The zoom a chart gets when it does not say, read off what its series ARE.
+ *
+ * - Only lines: `"both"` — lenkbank's measurement plots, unchanged.
+ * - Any area: `"x"`. An area's height is a length from zero, and a y window that cuts
+ *   the baseline off draws a band of 40 as three times one of 20 — so its y axis refits
+ *   to the x window (still from zero), and a drag never names a y range.
+ * - Any bar: `"none"`. A bar chart is a handful of periods read one bar at a time, and
+ *   in keksdose every one of them is CLICKED — to drill into a payee, a month, a budget
+ *   line — which a drag layer over the plot would swallow. A chart of many bars opts
+ *   back in with `zoomAxes: "x"`; a click then reports the period, not the bar.
+ */
+export declare function defaultZoomAxes(series: readonly {
+    type?: string;
+}[] | undefined): ZoomAxesSetting;
+/** The props `withChartZoom` reads off the chart it wraps. */
+export interface ZoomTarget {
+    /** Default: the single axis {@link DEFAULT_Y_AXIS}. */
+    axes?: readonly {
+        id: string;
+        hide?: boolean;
+    }[];
+    /** The chart's own data, so a band can refit the axis it did not name. Optional: a
+     *  chart with nothing plotted has nothing to fit to. */
+    rows?: readonly ZoomRow[];
+    series?: readonly ZoomFitSeries[];
+    x?: {
+        key?: string;
+    };
+    zoom?: ZoomBinding;
+    labels?: LabelOverride<SeriesChartLabels>;
+    /** Which axes a drag may zoom. Default: {@link defaultZoomAxes} of `series`. */
+    zoomAxes?: ZoomAxesSetting;
+}
+/**
+ * One x window for several charts.
+ *
+ * A column of charts over one abscissa is one picture, and zooming one of them and not
+ * the rest turns it into several pictures of different things. Every zoomable chart
+ * inside this shares the x window: any drag in any of them moves all of them.
+ *
+ * **Only x.** The y axes stay each chart's own — they are in different units — and
+ * each refits its own y to what is inside the shared window.
+ */
+export declare function SharedXZoom({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * Wrap a chart in drag-to-zoom.
+ *
+ * The chart receives a `zoom` binding: it applies `xDomain`/`yDomains` to its axes
+ * (with `allowDataOverflow`, so recharts clips to the window instead of widening it
+ * back out) and renders `layer` as a child of its recharts chart. A reset button
+ * appears over the chart's top end corner while it is zoomed — a real button, so the
+ * keyboard can undo what the pointer did.
+ */
+export declare function withChartZoom<P extends ZoomTarget>(Chart: ComponentType<P>): {
+    (props: P): import("react").JSX.Element;
+    displayName: string;
+};