@eifi1/ui-kit 0.7.0 → 0.8.0

package/src/components/chart-zoom.tsx

@@ -20,7 +20,7 @@
 // Everything with a decision in it is a pure exported function below (`zoomAxesFor`,
 // `selectionFromDrag`, `zoomAfter`, `zoomDomains`, `fitYToX`, `fitXToY`); the
 // components are plumbing between a pointer and those.
-import { createContext, useContext, useEffect, useState } from "react";
+import { createContext, useContext, useEffect, useRef, useState } from "react";
 import type { ComponentType, Dispatch, ReactNode, SetStateAction } from "react";
 import {
   usePlotArea,
@@ -59,10 +59,16 @@ export function zoomAxesFor(
   width: number,
   height: number,
   threshold: number = ZOOM_SQUARE_ENOUGH,
+  /** 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 {
   if (!(width > 0) || !(height > 0)) return null;
   const across = Math.abs(dx) / width;
   const down = Math.abs(dy) / height;
+  if (only === "x") return across < ZOOM_MIN_DRAG ? null : "x";
+  if (only === "y") return down < ZOOM_MIN_DRAG ? null : "y";
   if (across < ZOOM_MIN_DRAG && down < ZOOM_MIN_DRAG) return null;
   const longer = Math.max(across, down);
   const shorter = Math.min(across, down);
@@ -107,8 +113,16 @@ export function selectionFromDrag(
   xInverse: InverseScaleFunction | undefined,
   yInverse: (axisId: string) => InverseScaleFunction | undefined,
   axisIds: readonly string[],
+  only?: "x" | "y",
 ): ZoomSelection | null {
-  const which = zoomAxesFor(drag.toX - drag.fromX, drag.toY - drag.fromY, plot.width, plot.height);
+  const which = zoomAxesFor(
+    drag.toX - drag.fromX,
+    drag.toY - drag.fromY,
+    plot.width,
+    plot.height,
+    ZOOM_SQUARE_ENOUGH,
+    only,
+  );
   if (!which) return null;
   const next: ZoomSelection = { which, y: {} };
   if (which !== "y" && xInverse) {
@@ -128,12 +142,28 @@ export function selectionFromDrag(
   return next.x || Object.keys(next.y).length ? next : 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: Record<string, number>[];
-  series: { key: string; axis?: string }[];
-  axes: { id: string }[];
+  rows: readonly ZoomRow[];
+  series: readonly ZoomFitSeries[];
+  axes: readonly { id: string }[];
   xKey: string;
 }
 
@@ -156,8 +186,8 @@ type Span = [number, number] | undefined;
 
 /** A pair widened by one value. A non-finite one is not a value — one NaN would
  *  otherwise take the whole window with it. */
-function widen(span: Span, value: number): Span {
-  if (!Number.isFinite(value)) return span;
+function widen(span: Span, value: unknown): Span {
+  if (typeof value !== "number" || !Number.isFinite(value)) return span;
   if (!span) return [value, value];
   if (value < span[0]) span[0] = value;
   else if (value > span[1]) span[1] = value;
@@ -171,6 +201,63 @@ function keysOn(source: ZoomFitSource, axisId: string): string[] {
     .map((entry) => entry.key);
 }
 
+/** A row's value as a sample, or 0 for a stack's missing layer — a stacked bar with no
+ *  value for one series draws the rest of the stack from where that one would end. */
+const layer = (value: unknown) => (typeof value === "number" && Number.isFinite(value) ? value : 0);
+
+/**
+ * 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 function axisExtent(
+  source: ZoomFitSource,
+  axisId: string,
+  window?: readonly [number, number],
+): [number, number] | undefined {
+  const mine = source.series.filter((entry) => (entry.axis ?? DEFAULT_Y_AXIS) === axisId);
+  const loose: string[] = [];
+  const stacks = new Map<string, string[]>();
+  for (const entry of mine) {
+    if (entry.stack === undefined || entry.type === "line" || entry.type === undefined) {
+      loose.push(entry.key);
+    } else {
+      stacks.set(entry.stack, [...(stacks.get(entry.stack) ?? []), entry.key]);
+    }
+  }
+  let span: Span;
+  for (const row of source.rows) {
+    if (window) {
+      const at = row[source.xKey];
+      if (typeof at !== "number" || !(at >= window[0] && at <= window[1])) continue;
+    }
+    for (const key of loose) span = widen(span, row[key]);
+    for (const keys of stacks.values()) {
+      let up = 0;
+      let down = 0;
+      let any = false;
+      for (const key of keys) {
+        const value = layer(row[key]);
+        any ||= typeof row[key] === "number" && Number.isFinite(row[key]);
+        if (value >= 0) up += value;
+        else down += value;
+      }
+      if (!any) continue;
+      span = widen(widen(span, down), up);
+    }
+  }
+  return span;
+}
+
 /**
  * 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
@@ -185,16 +272,9 @@ export function fitYToX(
   source: ZoomFitSource,
   window: readonly [number, number],
 ): Record<string, [number, number]> {
-  const [from, to] = window;
   const fitted: Record<string, [number, number]> = {};
   for (const axis of source.axes) {
-    const keys = keysOn(source, axis.id);
-    let span: Span;
-    for (const row of source.rows) {
-      const at = row[source.xKey];
-      if (!(at >= from && at <= to)) continue;
-      for (const key of keys) span = widen(span, row[key]);
-    }
+    const span = axisExtent(source, axis.id, window);
     if (span) fitted[axis.id] = airy(span[0], span[1]);
   }
   return fitted;
@@ -215,7 +295,7 @@ export function fitXToY(
     for (const key of keysOn(source, axisId)) {
       for (const row of source.rows) {
         const value = row[key];
-        if (Number.isFinite(value) && value >= low && value <= high) {
+        if (typeof value === "number" && Number.isFinite(value) && value >= low && value <= high) {
           hits = widen(hits, row[source.xKey]);
         }
       }
@@ -275,17 +355,43 @@ export interface ZoomBinding {
   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 function defaultZoomAxes(series: readonly { type?: string }[] | undefined): ZoomAxesSetting {
+  if (series?.some((entry) => entry.type === "bar")) return "none";
+  if (series?.some((entry) => entry.type === "area")) return "x";
+  return "both";
+}
+
 /** 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?: Record<string, number>[];
-  series?: readonly { key: string; axis?: string }[];
+  rows?: readonly ZoomRow[];
+  series?: readonly ZoomFitSeries[];
   x?: { key?: string };
   zoom?: ZoomBinding;
   labels?: Partial<SeriesChartLabels>;
+  /** Which axes a drag may zoom. Default: {@link defaultZoomAxes} of `series`. */
+  zoomAxes?: ZoomAxesSetting;
 }
 
 const SharedX = createContext<{
@@ -326,6 +432,8 @@ export function withChartZoom<P extends ZoomTarget>(Chart: ComponentType<P>) {
     const xWindow = group ? group.window : ownX;
     const setXWindow = group ? group.set : setOwnX;
     const axes = props.axes ?? [{ id: DEFAULT_Y_AXIS }];
+    const setting = props.zoomAxes ?? defaultZoomAxes(props.series);
+    const only = setting === "x" || setting === "y" ? setting : undefined;
 
     // Every axis, hidden ones included: a hidden axis still scales its lines, and a
     // line whose axis did not refit is drawn as a flat streak inside the window.
@@ -350,11 +458,22 @@ export function withChartZoom<P extends ZoomTarget>(Chart: ComponentType<P>) {
       setOwnY(null);
     };
 
+    // Switched off, the chart still gets a binding — with no window and no layer — so a
+    // chart whose series change type mid-life is not remounted by a different tree.
+    if (setting === "none") {
+      return (
+        <div className="relative">
+          <Chart {...props} zoom={{ yDomains: {}, layer: null }} />
+        </div>
+      );
+    }
+
     const binding: ZoomBinding = {
       ...zoomDomains(state, source),
       layer: (
         <ZoomLayer
           axisIds={axes.map((axis) => axis.id)}
+          only={only}
           label={labels.zoomHint}
           onZoom={(selection) => {
             const next = zoomAfter(state, selection, source);
@@ -395,11 +514,13 @@ export function withChartZoom<P extends ZoomTarget>(Chart: ComponentType<P>) {
  */
 function ZoomLayer({
   axisIds,
+  only,
   label,
   onZoom,
   onReset,
 }: {
   axisIds: string[];
+  only?: "x" | "y";
   label: string;
   onZoom: (selection: ZoomSelection) => void;
   onReset: () => void;
@@ -411,6 +532,9 @@ function ZoomLayer({
   // one thing React will not forgive.
   const [scales] = useState(() => new Map<string, InverseScaleFunction | undefined>());
   const [drag, setDrag] = useState<ZoomDrag | null>(null);
+  // A finished drag is followed by a click on the same element, and a chart with an
+  // `onClick` (keksdose opens a drilldown on one) would read the zoom as a pick.
+  const draggedRef = useRef(false);
 
   if (!plot || plot.width <= 0 || plot.height <= 0) return null;
 
@@ -425,14 +549,22 @@ function ZoomLayer({
   const finish = () => {
     if (!drag) return;
     setDrag(null);
-    const selection = selectionFromDrag(drag, plot, xInverse, (id) => scales.get(id), axisIds);
+    const selection = selectionFromDrag(drag, plot, xInverse, (id) => scales.get(id), axisIds, only);
+    draggedRef.current = selection !== null;
     if (selection) onZoom(selection);
   };
 
   // What the drag would do, shown while it is being made: a band paints the full width
   // or height, so the reader sees it is about to let the other axis refit.
   const which = drag
-    ? zoomAxesFor(drag.toX - drag.fromX, drag.toY - drag.fromY, plot.width, plot.height)
+    ? zoomAxesFor(
+        drag.toX - drag.fromX,
+        drag.toY - drag.fromY,
+        plot.width,
+        plot.height,
+        ZOOM_SQUARE_ENOUGH,
+        only,
+      )
     : null;
 
   return (
@@ -463,6 +595,7 @@ function ZoomLayer({
         style={{ cursor: "crosshair" }}
         onPointerDown={(event) => {
           if (event.button !== 0) return;
+          draggedRef.current = false;
           const point = at(event);
           // Best effort: capture keeps a drag alive past the plot's edge, but a
           // pointer id the environment does not know throws — jsdom refuses them all —
@@ -481,6 +614,11 @@ function ZoomLayer({
         }}
         onPointerUp={finish}
         onPointerCancel={() => setDrag(null)}
+        onClick={(event) => {
+          if (!draggedRef.current) return;
+          draggedRef.current = false;
+          event.stopPropagation();
+        }}
         onDoubleClick={onReset}
       />
     </g>

package/src/components/chip.tsx

@@ -1,5 +1,5 @@
 import { forwardRef, useId, useRef, useState } from "react";
-import type { ComponentPropsWithoutRef, KeyboardEvent, MouseEvent, ReactNode } from "react";
+import type { ComponentPropsWithoutRef, KeyboardEvent, MouseEvent, ReactElement, ReactNode, Ref } from "react";
 import { X } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
 import { cn } from "../lib/cn";
@@ -33,6 +33,21 @@ export type ChipTone =
   | "expense";
 /** `lg` is the 44px touch target (`min-h-11`) a phone surface wants; `md` is ~28px. */
 export type ChipSize = "sm" | "md" | "lg";
+/**
+ * How much of the tone the chip wears.
+ *
+ * - `soft` (default): the tinted surface every chip has had.
+ * - `outline`: the tone's border and text on NO surface — keksdose's DEV badge in the
+ *   account menu and kastlan's 27 shadcn `variant="outline"` badges, which sit on
+ *   coloured rows where a second tint would muddy the row.
+ * - `solid`: the tone as a fill under contrasting text — the "count" pill (unread
+ *   messages, open tasks). It centres its content and sets figures tabular, so a
+ *   one-digit count is a round dot and "9" → "10" does not jiggle the row.
+ */
+export type ChipVariant = "soft" | "outline" | "solid";
+/** `pill` (default) is fully rounded; `square` has the small radius of a field or a
+ *  button — for a chip that sits in a table cell or beside square controls. */
+export type ChipShape = "pill" | "square";
 
 const TONE: Record<ChipTone, { idle: string; selected: string }> = {
   neutral: {
@@ -73,6 +88,72 @@ const TONE: Record<ChipTone, { idle: string; selected: string }> = {
   },
 };
 
+// `outline` idle looks: the tone's border and text, the surface left to whatever the
+// chip sits on. Selected still takes the tone's `selected` look (below), because an
+// outline toggle that stays an outline when on has no visible state.
+const OUTLINE: Record<ChipTone, string> = {
+  neutral: "border-[var(--border-strong)] bg-transparent text-[var(--text-secondary)]",
+  brand: "border-[var(--brand)] bg-transparent text-[var(--brand)]",
+  danger: "border-[var(--danger-border)] bg-transparent text-[var(--danger)]",
+  warning: "border-[var(--warning-border)] bg-transparent text-[var(--warning)]",
+  success: "border-[var(--success-border)] bg-transparent text-[var(--success)]",
+  info: "border-[var(--info-border)] bg-transparent text-[var(--info)]",
+  income: "border-current/60 bg-transparent text-[var(--money-income)]",
+  expense: "border-current/60 bg-transparent text-[var(--money-expense)]",
+};
+
+// `solid`: the fill under its contrast pair. Only brand and danger have a declared
+// `-contrast` token; the other hues are 700s in the light theme and 300s in the dark
+// one, so `--text-inverse` (the surface colour) is the side of the pair that contrasts
+// with them in both — which is what the inverse token is for. The border goes
+// transparent rather than away, so a solid chip is exactly as tall as a soft one.
+const SOLID: Record<ChipTone, string> = {
+  neutral: "border-transparent bg-[var(--bg-inverse)] text-[var(--text-inverse)]",
+  brand: "border-transparent bg-[var(--brand)] text-[var(--brand-contrast)]",
+  danger: "border-transparent bg-[var(--danger)] text-[var(--danger-contrast)]",
+  warning: "border-transparent bg-[var(--warning)] text-[var(--text-inverse)]",
+  success: "border-transparent bg-[var(--success)] text-[var(--text-inverse)]",
+  info: "border-transparent bg-[var(--info)] text-[var(--text-inverse)]",
+  income: "border-transparent bg-[var(--money-income)] text-[var(--text-inverse)]",
+  expense: "border-transparent bg-[var(--money-expense)] text-[var(--text-inverse)]",
+};
+
+/** The status-badge type (`caps`): a size step down, heavier and tracked, because
+ *  capitals at body size shout and capitals untracked run together. Per size, so it
+ *  replaces the size's own `text-*` through tailwind-merge. */
+const CAPS: Record<ChipSize, string> = {
+  sm: "text-[10px] font-semibold uppercase tracking-wider",
+  md: "text-[11px] font-semibold uppercase tracking-wider",
+  lg: "text-xs font-semibold uppercase tracking-wider",
+};
+
+function surfaceOf(tone: ChipTone, variant: ChipVariant, selected: boolean | undefined): string {
+  const palette = TONE[tone];
+  if (variant === "solid") {
+    // A solid chip is already the strongest look there is, so "on" is a ring round it.
+    return cn(SOLID[tone], selected && "ring-2 ring-[var(--border-strong)] ring-offset-1 ring-offset-[var(--bg-surface)]");
+  }
+  if (selected) return palette.selected;
+  return variant === "outline" ? OUTLINE[tone] : palette.idle;
+}
+
+/** What {@link ChipProps.renderLink} is handed: everything the chip would have put on
+ *  its own `<a>`. Spread it onto your router's link, mapping `href` to what the link
+ *  calls it — `renderLink={({ href, ...p }) => <Link to={href} {...p} />}`. */
+export interface ChipLinkProps {
+  href: string;
+  /** The chip's whole look — keep it, or the pill is a bare link. */
+  className: string;
+  children: ReactNode;
+  /** The chip's forwarded ref. React 19 passes it to a function component as a prop. */
+  ref?: Ref<HTMLAnchorElement>;
+  "aria-current"?: "true";
+  id?: string;
+  title?: string;
+  [key: `aria-${string}`]: string | boolean | number | undefined;
+  [key: `data-${string}`]: unknown;
+}
+
 /**
  * `body` is the whole pill when the chip is ONE element. When a link or a button also has
  * a dismiss control, the pill is a wrapper holding two siblings (see the note on
@@ -118,6 +199,19 @@ interface ChipBaseProps {
   children: ReactNode;
   tone?: ChipTone;
   size?: ChipSize;
+  /** See {@link ChipVariant}. Default `soft`. */
+  variant?: ChipVariant;
+  /** See {@link ChipShape}. Default `pill`. */
+  shape?: ChipShape;
+  /**
+   * The uppercase, tracked "status badge" type — keksdose's ~25 PAID / DRAFT /
+   * OVERDUE / ADMIN badges, each spelling `uppercase tracking-wide text-[10px]` by
+   * hand. A flag rather than a fourth `variant` because it is TYPE, not surface: a
+   * status badge is soft, outlined or solid as the row needs, and a `variant="tag"`
+   * would have had to pick one. Screen readers read the text as written, not as
+   * drawn, so write it in normal case.
+   */
+  caps?: boolean;
   icon?: LucideIcon;
   /**
    * Marks the chip as the current one — `aria-current` on a link, `aria-pressed` on a
@@ -141,6 +235,11 @@ interface ChipBaseProps {
   /** Accessible name for the dismiss button. Default: `common.remove` from the
    *  {@link UiKitProvider}, else "Remove". */
   removeLabel?: string;
+  /** Disables the × ONLY — the chip itself stays a working link or toggle. For the
+   *  value that may not be removed right now (the last filter of a required set, a
+   *  tag the user may read but not edit) where `disabled` would also kill the chip's
+   *  own action. */
+  removeDisabled?: boolean;
   disabled?: boolean;
   className?: string;
   /**
@@ -176,9 +275,25 @@ export type ChipProps = ChipBaseProps &
         /** Renders the chip as a link. Mutually exclusive with `onClick`. */
         href?: string;
         onClick?: never;
+        /**
+         * Renders the link for `href` — pass your router's `<Link>` here, since a
+         * plain `<a>` reloads a single-page app (keksdose's account-menu admin pill).
+         * Default: `<a>`. Ignored without `href`.
+         *
+         * A render function rather than an `as={Link}`, for three reasons. It is the
+         * API `StatTile` already has (`renderLink`), so a consumer learns it once.
+         * Router links do not take `href` — react-router's takes `to` — so an `as`
+         * would either have to pass props through untyped or teach the kit about one
+         * router; here the caller maps `href` onto its own link in one line, fully
+         * typed. And it keeps `href` as THE link prop, which is what the `href` /
+         * `onClick` exclusion below is typed on: the pill is a link because it has an
+         * href, whichever element draws it.
+         */
+        renderLink?: (props: ChipLinkProps) => ReactElement;
       }
     | {
         href?: never;
+        renderLink?: never;
         /** Renders the chip as a toggle button. Mutually exclusive with `href`. Receives
          *  the click, so a chip inside a clickable row can `stopPropagation()`. */
         onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
@@ -198,12 +313,17 @@ export const Chip = forwardRef<HTMLElement, ChipProps>(function Chip(
     children,
     tone = "neutral",
     size = "md",
+    variant = "soft",
+    shape = "pill",
+    caps = false,
     icon: Icon,
     selected,
     href,
+    renderLink,
     onClick,
     onRemove,
     removeLabel,
+    removeDisabled = false,
     disabled = false,
     className,
     tabIndex,
@@ -216,15 +336,20 @@ export const Chip = forwardRef<HTMLElement, ChipProps>(function Chip(
 ) {
   const common = useKitLabels("common", DEFAULT_COMMON_LABELS, { remove: removeLabel });
   const s = SIZE[size];
-  const palette = TONE[tone];
   const interactive = !!href || !!onClick;
+  // One radius for every rounded piece — the pill, the body inside a split pill, the ×
+  // — so a square chip has no round focus ring inside it.
+  const radius = shape === "square" ? (size === "sm" ? "rounded" : "rounded-md") : "rounded-full";
+  const type = cn(caps && CAPS[size], variant === "solid" && "justify-center tabular-nums");
   const surface = cn(
-    selected ? palette.selected : palette.idle,
+    surfaceOf(tone, variant, selected),
     disabled && "cursor-default opacity-50",
   );
   const look = cn(
     CHIP_BASE,
     s.body,
+    type,
+    radius,
     surface,
     interactive && !disabled && "cursor-pointer hover:brightness-[0.97] dark:hover:brightness-110",
     className,
@@ -257,12 +382,16 @@ export const Chip = forwardRef<HTMLElement, ChipProps>(function Chip(
         e.stopPropagation();
         onRemove();
       }}
-      disabled={disabled}
+      disabled={disabled || removeDisabled}
       className={cn(
         // Logical margins: the × sits at the END of the pill, which is the left in RTL.
-        "-me-0.5 ms-0.5 shrink-0 rounded-full p-0.5 transition-colors",
+        "-me-0.5 ms-0.5 shrink-0 p-0.5 transition-colors",
+        shape === "square" ? "rounded-sm" : "rounded-full",
         "hover:bg-[var(--bg-active)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]",
-        disabled && "pointer-events-none",
+        (disabled || removeDisabled) && "pointer-events-none",
+        // A disabled chip is already dimmed as a whole; dimming the × again on top
+        // would take it to a quarter. `removeDisabled` alone dims just the ×.
+        removeDisabled && !disabled && "opacity-40",
       )}
     >
       <X className={s.remove} aria-hidden />
@@ -271,7 +400,7 @@ export const Chip = forwardRef<HTMLElement, ChipProps>(function Chip(
 
   // ── The combined shape: one pill, two interactive siblings inside it.
   const pill = (inner: ReactNode) => (
-    <span className={cn(CHIP_PILL, s.tail, surface, className)}>
+    <span className={cn(CHIP_PILL, s.tail, radius, surface, className)}>
       {inner}
       {remove}
     </span>
@@ -279,16 +408,30 @@ export const Chip = forwardRef<HTMLElement, ChipProps>(function Chip(
   // The body inside a pill: no border or surface of its own (the pill has them), a
   // hover wash in the text's own hue so it works on every tone.
   const inner = cn(
-    "inline-flex min-w-0 items-center self-stretch rounded-full transition-colors",
+    "inline-flex min-w-0 items-center self-stretch transition-colors",
+    radius,
     CHIP_RING,
     s.split,
+    type,
     !disabled && "cursor-pointer hover:bg-current/10",
     disabled && "cursor-default",
   );
 
   // ── The three shapes.
   if (href && !disabled) {
-    const link = (
+    const linkProps: ChipLinkProps = {
+      ...rest,
+      ref: ref as Ref<HTMLAnchorElement>,
+      href,
+      "aria-current": selected ? "true" : undefined,
+      className: remove ? inner : look,
+      children: body,
+    };
+    const link = renderLink ? (
+      // Through a component rather than called here, so the forwarded ref arrives as
+      // an ordinary prop of an element and is never handed to a function mid-render.
+      <RenderedLink render={renderLink} {...linkProps} />
+    ) : (
       <a
         ref={ref as React.Ref<HTMLAnchorElement>}
         href={href}
@@ -338,6 +481,14 @@ export const Chip = forwardRef<HTMLElement, ChipProps>(function Chip(
   );
 });
 
+/** Calls a chip's `renderLink` with the props it was given — see its call site. */
+function RenderedLink({
+  render,
+  ...props
+}: ChipLinkProps & { render: (props: ChipLinkProps) => ReactElement }) {
+  return render(props);
+}
+
 /* ── ChipInput ────────────────────────────────────────────────────────────── */
 
 export interface ChipInputLabels {