@stll/ui 0.59.0 → 0.60.0

package/README.md

@@ -11,7 +11,7 @@ cannot reach into product code by accident. Lint enforces that boundary; the
 export map below is what "part of the design system" means.
 
 Peer dependencies: `react`, `react-dom`, `@base-ui/react`, `tailwindcss` (v4),
-and `@tanstack/react-virtual`.
+`@dnd-kit/core`, `@dnd-kit/sortable`, and `@tanstack/react-virtual`.
 
 Derived in part from [coss ui](https://github.com/cosscom/ui) (MIT); see
 `THIRD_PARTY_NOTICES`.
@@ -104,11 +104,101 @@ unavailable state.
 minor. They will be removed after that; the export guard checks that both
 spellings land on the same module for as long as they both exist.
 
-## Kanban boards
+## Sortable boards
 
 `@stll/ui/kanban` provides board matrices, subgroup swimlanes, bounded virtual
-cells, and column bands. The caller owns card rendering, permissions, and
-persisted mutations.
+cells, and input/accessibility primitives. The caller keeps domain identifiers,
+card rendering, permissions, and persisted mutations. Wrap sortable boards in
+`KanbanSortableBoard`, render items through `useKanbanSortable`, and attach the
+returned bindings to `KanbanDragHandle` or `KanbanCardDragSurface`. This public
+contract supports external consumers with keyboard navigation across virtual rows
+and matrix cells, touch scrolling and long-press dragging, and host-controlled
+collapsed-band peeking. It remains supported independently of which interaction
+implementation the application board uses.
+
+```tsx
+import {
+  KanbanDragHandle,
+  KanbanSortableBoard,
+  KanbanVirtualCell,
+  useKanbanSortable,
+} from "@stll/ui/kanban";
+
+const Card = ({ id }: { id: string }) => {
+  const { activator, setNodeRef, style } = useKanbanSortable({
+    activation: { type: "handle" },
+    id,
+  });
+  if (activator.type !== "handle") {
+    return null;
+  }
+  return (
+    <article ref={setNodeRef} style={style}>
+      <KanbanDragHandle bindings={activator.bindings} label="Move card" />
+    </article>
+  );
+};
+
+<KanbanSortableBoard onDragEnd={handleDragEnd}>
+  <KanbanVirtualCell
+    rows={cardIds}
+    getRowKey={(id) => id}
+    renderRow={(id) => <Card id={id} />}
+    pagination={{ type: "none" }}
+    sortable={{
+      dropTarget: { id: "column", position: { column: 0, lane: 0 } },
+      getRowId: (id) => id,
+    }}
+  />
+</KanbanSortableBoard>;
+```
+
+For collapsed subgroup bands, the host maps each registered drop target to its
+band and clears the drag state on both drop and cancellation. Populate
+`bandIdByDropTargetId` from the same cell/slot registrations that supply the
+sortable target IDs (including folded-band slots).
+
+```tsx
+const [dragState, setDragState] = useState<
+  { type: "idle" } | { type: "dragging"; bandId: string | null }
+>({ type: "idle" });
+
+<KanbanSortableBoard
+  onDragStart={() => setDragState({ type: "dragging", bandId: null })}
+  onDragOver={({ over }) => {
+    setDragState({
+      type: "dragging",
+      bandId:
+        over === null ? null : (bandIdByDropTargetId.get(over.id) ?? null),
+    });
+  }}
+  onDragEnd={(event) => {
+    setDragState({ type: "idle" });
+    handleDragEnd(event);
+  }}
+  onDragCancel={() => setDragState({ type: "idle" })}
+>
+  <KanbanSubgroupBoard
+    {...boardProps}
+    isDragging={dragState.type === "dragging"}
+    dragOverBandId={dragState.type === "dragging" ? dragState.bandId : null}
+  />
+</KanbanSortableBoard>;
+```
+
+The default sensors are mouse (8px movement), touch (150ms delay with 8px
+tolerance), and keyboard. Scroll containers retain `touch-action: auto`.
+`KanbanDragHandle` and `{ type: "item" }` activation disable touch panning on
+their activation surfaces. Use `{ type: "card" }` with
+`KanbanCardDragSurface` to preserve scrolling from the card while supporting
+long-press dragging. `KanbanSortableBoard` also accepts
+custom `sensors`, `accessibility`, collision detection, keyboard coordinates,
+auto-scroll options, and an `overlay` render function.
+
+`getKanbanHorizontalEdge` takes `input: "pointer"` with a current client-x and
+`direction: "ltr" | "rtl"` for mouse and touch input. Keyboard calls use
+`input: "keyboard"` and require source and target indices, so every move has a
+logical edge without relying on ambiguous geometry.
 
 For Group/Sub-group boards, build one canonical matrix and render it with the
 installable layout and virtual cell:
@@ -145,6 +235,32 @@ const matrix = buildKanbanBoardMatrix({
 />;
 ```
 
+When rows inside a virtual cell are sortable, give the cell a unique drop target
+and its ordered matrix position. The cell registers its actual scroll element,
+including when `rows` is empty, and owns the matching `SortableContext`.
+
+```tsx
+<KanbanVirtualCell
+  getRowKey={(row) => row.id}
+  pagination={{ type: "none" }}
+  renderRow={(row) => <Card row={row} />}
+  rows={cell.rows}
+  sortable={{
+    dropTarget: {
+      id: cellId,
+      position: { column: columnIndex, lane: laneIndex },
+    },
+    getRowId: (row) => row.id,
+  }}
+/>
+```
+
+The default keyboard coordinates move through items in their cell before
+crossing into adjacent columns or subgroup lanes; empty cells remain reachable.
+Pointer and touch drops outside registered board targets cancel. Choose an
+explicit `{ type: "handle" }` activation for the 44px handle, or `{ type:
+"item" }` when the whole item is the intended activation surface.
+
 ### Column bands
 
 Columns whose options carry a `band` (`KanbanColumnBand`, usually a status

package/dist/calendar/day-calendar.d.ts

@@ -9,18 +9,28 @@ export type DayCalendarTone = {
 } | {
   type: "neutral";
 };
-/** Whether an entry is still provisional (drawn dashed) or final. */
-export type DayCalendarEntryState = "draft" | "final";
+/**
+ * Whether an entry is final, still provisional (dashed), or only proposed:
+ * a suggestion is not an entry yet, so it is drawn lighter, dashed, and is a
+ * button the caller acts on.
+ */
+export type DayCalendarEntryState = "draft" | "final" | "suggestion";
 type DayCalendarBlockFields = DayCalendarRange & {
   accessibleLabel: string;
-  detail?: ReactNode;
+  caption?: ReactNode;
   id: string;
   title: ReactNode;
   tone: DayCalendarTone;
+  /** Shown on hover, for example the apps a `mixed` block merged. */
+  tooltip?: ReactNode;
 };
 export type DayCalendarBlock = (DayCalendarBlockFields & {
   kind: "entry";
-  state: DayCalendarEntryState;
+  state: Exclude<DayCalendarEntryState, "suggestion">;
+}) | (DayCalendarBlockFields & {
+  kind: "entry";
+  onActivate: () => void;
+  state: "suggestion";
 }) | (DayCalendarBlockFields & {
   kind: "mixed";
 }) | (DayCalendarBlockFields & {

package/dist/calendar/day-calendar.js

@@ -1,7 +1,8 @@
 import { cn } from "../lib/utils.js";
+import { Tooltip, TooltipContent as TooltipPopup, TooltipTrigger } from "../components/tooltip.js";
 import { DAY_CALENDAR_SLOT_HEIGHT_PX, boundsHeight, extendRange, getDayBounds, getHourTicks, isRepeatedWallTime, layoutOverlaps, moveRange, offsetToTime, rangeFromDrag, slotAt, timeToOffset } from "./day-calendar.logic.js";
 import { resolveMatterColor } from "../lib/matter-colors.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { panic } from "better-result";
 import { Temporal } from "temporal-polyfill/full";
@@ -305,7 +306,7 @@ const ColumnBlocks = ({ blocks, grid }) => {
 		}, block.id);
 	});
 };
-/** Below this height a block puts its title and detail on one line. */
+/** Below this height a block puts its title and caption on one line. */
 const TWO_LINE_BLOCK_MIN_PX = 40;
 /** A brief block paints at least this tall, unless the grid ends sooner. */
 const BLOCK_MIN_PX = 6;
@@ -316,7 +317,8 @@ const BLOCK_KIND_CLASSES = {
 };
 const ENTRY_STATE_CLASSES = {
 	draft: "border border-dashed border-current/40",
-	final: ""
+	final: "",
+	suggestion: "border border-dashed border-current/45 outline-none hover:ring-1 hover:ring-ring/50 focus-visible:ring-2 focus-visible:ring-ring"
 };
 const DayCalendarBlockView = ({ block, grid, lane, range }) => {
 	const top = timeToOffset(range.startMs, grid);
@@ -327,36 +329,66 @@ const DayCalendarBlockView = ({ block, grid, lane, range }) => {
 		insetBlockStart: top,
 		insetInlineStart: `${String(lane.lane * 100 / lane.laneCount)}%`
 	};
+	const className = cn("text-foreground flex h-full w-full min-w-0 overflow-hidden rounded-md px-2.5 text-start text-xs", blockSize < TWO_LINE_BLOCK_MIN_PX ? "flex-row items-center gap-2" : "flex-col gap-0.5 py-1", BLOCK_KIND_CLASSES[block.kind], block.kind === "entry" && ENTRY_STATE_CLASSES[block.state], block.tone.type === "matter" && "border-s-[3px]", block.tone.type === "neutral" && "bg-muted");
+	const content = blockSize < 16 ? null : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		className: "min-w-0 shrink-0 truncate font-medium",
+		children: block.title
+	}), block.caption === void 0 ? null : /* @__PURE__ */ jsx("span", {
+		className: "text-muted-foreground min-w-0 truncate tabular-nums",
+		children: block.caption
+	})] });
+	const shared = {
+		"aria-label": block.accessibleLabel,
+		className,
+		"data-block-id": block.id,
+		"data-kind": block.kind,
+		"data-slot": "day-calendar-block",
+		style: blockSurfaceStyle(block)
+	};
+	const surface = block.kind === "entry" && block.state === "suggestion" ? /* @__PURE__ */ jsx("button", {
+		...shared,
+		"data-state": block.state,
+		onClick: block.onActivate,
+		onKeyDown: (event) => event.stopPropagation(),
+		onPointerDown: (event) => event.stopPropagation(),
+		type: "button",
+		children: content
+	}) : /* @__PURE__ */ jsx("article", {
+		...shared,
+		"data-state": block.kind === "entry" ? block.state : void 0,
+		children: content
+	});
 	return /* @__PURE__ */ jsx("div", {
-		className: "pointer-events-none absolute px-1.5 py-px",
+		className: cn("absolute px-1.5 py-px", block.tooltip === void 0 && !(block.kind === "entry" && block.state === "suggestion") && "pointer-events-none"),
 		style: placement,
-		children: /* @__PURE__ */ jsxs("article", {
-			"aria-label": block.accessibleLabel,
-			className: cn("text-foreground flex h-full min-w-0 overflow-hidden rounded-md px-2.5 text-start text-xs", blockSize < TWO_LINE_BLOCK_MIN_PX ? "flex-row items-center gap-2" : "flex-col gap-0.5 py-1", BLOCK_KIND_CLASSES[block.kind], block.kind === "entry" && ENTRY_STATE_CLASSES[block.state], block.tone.type === "matter" && "border-s-[3px]", block.tone.type === "neutral" && "bg-muted"),
-			"data-kind": block.kind,
-			"data-slot": "day-calendar-block",
-			style: blockSurfaceStyle(block),
-			children: [/* @__PURE__ */ jsx("span", {
-				className: "min-w-0 shrink-0 truncate font-medium",
-				children: block.title
-			}), block.detail === void 0 ? null : /* @__PURE__ */ jsx("span", {
-				className: "text-muted-foreground min-w-0 truncate tabular-nums",
-				children: block.detail
-			})]
-		})
+		children: block.tooltip === void 0 ? surface : /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: surface }), /* @__PURE__ */ jsx(TooltipPopup, {
+			className: "max-w-72",
+			children: block.tooltip
+		})] })
 	});
 };
 const MIXED_STRIPES = "repeating-linear-gradient(135deg, var(--muted) 0 6px, transparent 6px 12px)";
+/** A suggestion's tint is half an entry's, so proposed time reads lighter. */
+const TONE_TINT_PERCENT = {
+	entry: 16,
+	suggestion: 8
+};
 function blockSurfaceStyle(block) {
 	const tone = block.tone;
 	const stripes = block.kind === "mixed" ? MIXED_STRIPES : void 0;
+	const suggestion = block.kind === "entry" && block.state === "suggestion";
 	switch (tone.type) {
-		case "neutral": return { backgroundImage: stripes };
+		case "neutral": return {
+			backgroundColor: suggestion ? "transparent" : void 0,
+			backgroundImage: stripes
+		};
 		case "matter": {
 			const color = resolveMatterColor(tone.matterId, tone.color);
+			const tint = suggestion ? TONE_TINT_PERCENT.suggestion : TONE_TINT_PERCENT.entry;
 			return {
-				backgroundColor: `color-mix(in srgb, ${color} 16%, var(--card))`,
+				backgroundColor: `color-mix(in srgb, ${color} ${String(tint)}%, var(--card))`,
 				backgroundImage: stripes,
+				borderColor: suggestion ? color : void 0,
 				borderInlineStartColor: color
 			};
 		}

package/dist/calendar/day-calendar.logic.d.ts

@@ -1,6 +1,9 @@
 //#region src/calendar/day-calendar.logic.d.ts
 export declare const DAY_CALENDAR_GRANULARITIES: readonly [15, 30, 60];
 export type DayCalendarGranularity = (typeof DAY_CALENDAR_GRANULARITIES)[number];
+/** Below this height a block cannot hold one line of its label, so it draws
+ * its surface only; its accessible label and tooltip still carry it. */
+export declare const DAY_CALENDAR_ONE_LINE_BLOCK_MIN_PX = 16;
 /**
  * Height of one grid slot. Coarser grids get taller slots, but not
  * proportionally: an hour stays tall enough for a two-line block.

package/dist/calendar/day-calendar.logic.js

@@ -6,6 +6,9 @@ const DAY_CALENDAR_GRANULARITIES = [
 	30,
 	60
 ];
+/** Below this height a block cannot hold one line of its label, so it draws
+* its surface only; its accessible label and tooltip still carry it. */
+const DAY_CALENDAR_ONE_LINE_BLOCK_MIN_PX = 16;
 /**
 * Height of one grid slot. Coarser grids get taller slots, but not
 * proportionally: an hour stays tall enough for a two-line block.
@@ -232,4 +235,4 @@ function compareIds(left, right) {
 	return left > right ? 1 : 0;
 }
 //#endregion
-export { DAY_CALENDAR_GRANULARITIES, DAY_CALENDAR_SLOT_HEIGHT_PX, boundsHeight, clampToBounds, extendRange, getDayBounds, getHourTicks, granularityMs, isRepeatedWallTime, layoutOverlaps, mergeShortSegments, moveRange, offsetToTime, rangeFromDrag, slotAt, snapToGrid, timeToOffset };
+export { DAY_CALENDAR_GRANULARITIES, DAY_CALENDAR_ONE_LINE_BLOCK_MIN_PX, DAY_CALENDAR_SLOT_HEIGHT_PX, boundsHeight, clampToBounds, extendRange, getDayBounds, getHourTicks, granularityMs, isRepeatedWallTime, layoutOverlaps, mergeShortSegments, moveRange, offsetToTime, rangeFromDrag, slotAt, snapToGrid, timeToOffset };

package/dist/components/accordion.d.ts

@@ -2,11 +2,25 @@ import { Accordion as Accordion$1 } from "@base-ui/react/accordion";
 //#region src/components/accordion.d.ts
 declare const Accordion: <Value = unknown>(props: Accordion$1.Root.Props<Value>) => import("react").JSX.Element;
 declare const AccordionItem: ({ className, ...props }: Accordion$1.Item.Props) => import("react").JSX.Element;
-declare const AccordionTrigger: ({ className, children, size, ...props }: Accordion$1.Trigger.Props & {
-  size?: "default" | "compact";
+/**
+ * - `default`: a section heading of a page or panel.
+ * - `sm`: body-size type at a 44px row, for a disclosure inside a dialog or
+ *   card ("Show all permissions", advanced options).
+ * - `compact`: small type in a dense list.
+ */
+type AccordionSize = "default" | "sm" | "compact";
+/**
+ * - `default`: the trigger reads as a heading.
+ * - `muted`: a quiet "show more" line in muted body weight that brightens on
+ *   hover, for a disclosure that is secondary to what is around it.
+ */
+type AccordionTriggerVariant = "default" | "muted";
+declare const AccordionTrigger: ({ className, children, size, variant, ...props }: Accordion$1.Trigger.Props & {
+  size?: AccordionSize;
+  variant?: AccordionTriggerVariant;
 }) => import("react").JSX.Element;
 declare const AccordionPanel: ({ className, children, size, ...props }: Accordion$1.Panel.Props & {
-  size?: "default" | "compact";
+  size?: AccordionSize;
 }) => import("react").JSX.Element;
 //#endregion
 export { Accordion, AccordionPanel as AccordionContent, AccordionPanel, AccordionItem, AccordionTrigger };

package/dist/components/accordion.js

@@ -13,10 +13,24 @@ const AccordionItem = ({ className, ...props }) => /* @__PURE__ */ jsx(Accordion
 	"data-slot": "accordion-item",
 	...props
 });
-const AccordionTrigger = ({ className, children, size = "default", ...props }) => /* @__PURE__ */ jsx(Accordion$1.Header, {
+const TRIGGER_SIZE_CLASS_NAME = {
+	compact: "py-2 text-xs",
+	default: "py-4 text-sm",
+	sm: "min-h-11 items-center py-2 text-sm"
+};
+const PANEL_SIZE_CLASS_NAME = {
+	compact: "pb-3",
+	default: "pb-4",
+	sm: "pb-2"
+};
+const TRIGGER_VARIANT_CLASS_NAME = {
+	default: "font-medium",
+	muted: "text-muted-foreground hover:text-foreground font-normal"
+};
+const AccordionTrigger = ({ className, children, size = "default", variant = "default", ...props }) => /* @__PURE__ */ jsx(Accordion$1.Header, {
 	className: "flex",
 	children: /* @__PURE__ */ jsxs(Accordion$1.Trigger, {
-		className: cn("focus-visible:ring-ring flex flex-1 cursor-pointer items-start justify-between gap-4 rounded-md text-start font-medium outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-64 data-panel-open:*:data-[slot=accordion-indicator]:rotate-180", size === "compact" ? "py-2 text-xs" : "py-4 text-sm", className),
+		className: cn("focus-visible:ring-ring flex flex-1 cursor-pointer items-start justify-between gap-4 rounded-md text-start outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-64 data-panel-open:*:data-[slot=accordion-indicator]:rotate-180", TRIGGER_SIZE_CLASS_NAME[size], TRIGGER_VARIANT_CLASS_NAME[variant], className),
 		"data-slot": "accordion-trigger",
 		...props,
 		children: [children, /* @__PURE__ */ jsx(ChevronDownIcon, {
@@ -30,7 +44,7 @@ const AccordionPanel = ({ className, children, size = "default", ...props }) =>
 	"data-slot": "accordion-panel",
 	...props,
 	children: /* @__PURE__ */ jsx("div", {
-		className: cn("pt-0", size === "compact" ? "pb-3" : "pb-4", className),
+		className: cn("pt-0", PANEL_SIZE_CLASS_NAME[size], className),
 		children
 	})
 });

package/dist/components/button.d.ts

@@ -1,4 +1,4 @@
-import { ButtonContract } from "./button.shared.js";
+import { ButtonContract, ButtonSize, ButtonVariant } from "./button.shared.js";
 import { ReactNode } from "react";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/button.d.ts
@@ -12,10 +12,31 @@ import { useRender } from "@base-ui/react/use-render";
  * swaps the cursor so the control still reads as unavailable on hover.
  */
 declare const buttonAccessibleDisabledClass = "cursor-not-allowed opacity-64";
+declare const BUTTON_LAYOUT_CLASS_NAMES: {
+  readonly wrap: "h-auto min-h-11 items-start justify-start py-2 text-start whitespace-normal sm:h-auto";
+};
 declare const buttonVariants: (props?: ({
-  size?: "chip" | "default" | "icon" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs" | "lg" | "row" | "sm" | "xl" | "xs" | null | undefined;
-  variant?: "default" | "destructive" | "destructive-ghost" | "destructive-outline" | "ghost" | "link" | "muted" | "outline" | "secondary" | null | undefined;
+  size?: "chip" | "default" | "icon" | "icon-2xs" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs" | "inline" | "lg" | "row" | "sm" | "xl" | "xs" | null | undefined;
+  layout?: "wrap" | null | undefined;
+  variant?: "default" | "destructive" | "destructive-ghost" | "destructive-outline" | "ghost" | "link" | "muted" | "muted-destructive" | "outline" | "secondary" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * The outline a plain button's focus ring follows, matching its content:
+ * `box` for a card, row or block of text (the container radius), `round` for
+ * an avatar, a dot or a pill.
+ */
+declare const BUTTON_PLAIN_SHAPE_CLASS: {
+  readonly box: "rounded-lg";
+  readonly round: "rounded-full";
+};
+type ButtonPlainShape = keyof typeof BUTTON_PLAIN_SHAPE_CLASS;
+/**
+ * Where the focus ring is drawn. `outside` (the default) rings the box with a
+ * gap; `inside` draws it within the box, for a target that fills a clipping
+ * container (an `overflow-hidden` card, a table cell, a thumbnail grid) where
+ * an outside ring would be cut off.
+ */
+type ButtonFocusRing = "outside" | "inside";
 /** What a button's box holds: a glyph alone, or a visible label. */
 declare const BUTTON_CONTENT: {
   readonly icon: "icon";
@@ -39,17 +60,47 @@ declare const BUTTON_SIZE_CONTENT: {
   readonly "icon-lg": "icon";
   readonly "icon-sm": "icon";
   readonly "icon-xl": "icon";
+  readonly "icon-2xs": "icon";
   readonly "icon-xs": "icon";
+  readonly inline: "text";
   readonly lg: "text";
   readonly row: "text";
   readonly sm: "text";
   readonly xl: "text";
   readonly xs: "text";
 };
+/**
+ * `selected` (./button.shared.ts) sets `data-pressed`, which every variant
+ * paints. The ARIA state (`aria-pressed`, `aria-checked`, `aria-current` or
+ * `aria-selected`) stays the caller's. For a set of mutually exclusive
+ * options prefer `ToggleGroup`, which owns that state.
+ */
 type ButtonProps = Omit<ButtonContract, "children" | "disabled"> & {
+  layout?: keyof typeof BUTTON_LAYOUT_CLASS_NAMES;
   tooltip?: ReactNode;
+  focusRing?: ButtonFocusRing | undefined;
+  /** `variant="plain"` only: the outline its focus ring follows. */
+  shape?: ButtonPlainShape | undefined;
   "data-accessible-disabled"?: "";
 } & useRender.ComponentProps<"button">;
-declare function Button({ className, variant, size, render, loading, icon, children, disabled, tooltip, "data-accessible-disabled": accessibleDisabled, ...props }: ButtonProps): import("react").JSX.Element;
+declare function Button({ className, variant: variantProp, size, render, layout, loading, icon, children, disabled, tooltip, selected, focusRing, shape, "data-accessible-disabled": accessibleDisabled, ...props }: ButtonProps): import("react").JSX.Element;
+/**
+ * A run with no box can anchor no tooltip or popup, and carries no variant,
+ * size or icon: its text is its look.
+ */
+type ButtonTextRunProps = Omit<ButtonProps, "children" | "className" | "focusRing" | "icon" | "loading" | "render" | "selected" | "shape" | "size" | "tooltip" | "variant"> & {
+  children: ReactNode;
+  className?: string | undefined;
+};
+/**
+ * A long run of prose that acts as one button: a citation or a
+ * cross-reference in reader text. A <button> is an atomic box even at
+ * `display: inline`, so its label cannot break across the paragraph's lines;
+ * here the text sits in a native <label>, an inline box that wraps and copies
+ * with the prose, and the label forwards a press anywhere on the run to the
+ * <button> it holds, which takes its accessible name from the label. Use
+ * `Button size="inline"` for a short action.
+ */
+declare const ButtonTextRun: ({ children, className, disabled, ...props }: ButtonTextRunProps) => import("react").JSX.Element;
 //#endregion
-export { BUTTON_CONTENT, BUTTON_SIZE_CONTENT, Button, buttonAccessibleDisabledClass, buttonVariants };
+export { BUTTON_CONTENT, BUTTON_SIZE_CONTENT, Button, type ButtonFocusRing, type ButtonPlainShape, type ButtonProps, type ButtonSize, ButtonTextRun, type ButtonVariant, buttonAccessibleDisabledClass, buttonVariants };