@charcuterie/ui 3.31.0 → 3.32.0

package/src/RadioGroup/RadioGroupOption.tsx

@@ -3,6 +3,12 @@ import type { ReactNode } from "react"
 import { useEffect } from "react"
 
 import { FOCUS_RING_CLASS } from "../intentStyles.ts"
+import {
+  TILE_BOX_CLASS,
+  TILE_HINT_TEXT_CLASS,
+  TILE_PADDING_CLASS,
+  TILE_TEXT_SIZE_CLASS,
+} from "../tileStyles.ts"
 import { toClassName } from "../toClassName.ts"
 import type {
   RadioItem,
@@ -42,42 +48,6 @@ const DOT_SIZE_CLASS: Record<ControlSize, string> = {
   lg: "size-2.5",
 }
 
-const TEXT_SIZE_CLASS: Record<ControlSize, string> = {
-  sm: "text-sm",
-  md: "text-md",
-  lg: "text-lg",
-}
-
-/**
- * One step down from the option's own text, and never below `xs`:
- * a hint that keeps shrinking with the density axis is the 11px
- * caption the 2026-08-10 ramp rebuild exists to have removed.
- */
-const HINT_TEXT_CLASS: Record<ControlSize, string> = {
-  sm: "text-xs",
-  md: "text-xs",
-  lg: "text-sm",
-}
-
-/**
- * A tile is a card, so its padding is a card's rather than a
- * control's — enough that the border reads as a box around content
- * and not as an outline on a line of text.
- */
-const TILE_PADDING_CLASS: Record<ControlSize, string> = {
-  sm: "px-3 py-2.5",
-  md: "px-3.5 py-3",
-  lg: "px-4 py-3.5",
-}
-
-/**
- * The box, and only the box. Every state below it is a **border and
- * a surface**, never colour alone — the same reason `Stepper`
- * refuses to say "done" with a hue.
- */
-const TILE_BOX_CLASS =
-  "rounded-lg border border-border-subtle bg-surface-raised"
-
 /**
  * Its own file for the same reason `SegmentedOption` is: **both
  * registrations are effects**, and an effect cannot run in a loop.
@@ -152,7 +122,7 @@ export const RadioGroupOption = ({
                 ? "items-center"
                 : "items-start",
             ),
-        TEXT_SIZE_CLASS[size],
+        TILE_TEXT_SIZE_CLASS[size],
         // Disabled turns the whole option down with `opacity-60`, the
         // same family treatment as `Checkbox` and `Switch`, rather than
         // fading the ring to a token that disappeared on a pale theme.
@@ -252,7 +222,7 @@ export const RadioGroupOption = ({
             <span
               className={toClassName(
                 "font-normal text-content-muted",
-                HINT_TEXT_CLASS[size],
+                TILE_HINT_TEXT_CLASS[size],
               )}
             >
               {hint}

package/src/index.ts

@@ -37,6 +37,11 @@ export type {
   AccordionProps,
 } from "./Accordion/Accordion.tsx"
 export { Accordion } from "./Accordion/Accordion.tsx"
+export type {
+  ActionTileItem,
+  ActionTilesProps,
+} from "./ActionTiles/ActionTiles.tsx"
+export { ActionTiles } from "./ActionTiles/ActionTiles.tsx"
 export type { AdaptiveGridProps } from "./AdaptiveGrid/AdaptiveGrid.tsx"
 export { AdaptiveGrid } from "./AdaptiveGrid/AdaptiveGrid.tsx"
 export type { ColumnChoice } from "./AdaptiveGrid/chooseColumns.ts"

package/src/sourceRules.test.ts

@@ -537,7 +537,15 @@ test("the barrel is the only place components are re-exported", async () => {
   // active-path rule an app's tests want to assert directly, and
   // `useNavLayout.ts`, because the app has to read the width rule to
   // know which corner to render into.
-  expect(componentNames.length).toBe(61)
+  //
+  // `ActionTiles` is +1 -> 62. It is `RadioGroup itemShape="tile"`
+  // with the radio taken away: the box is shared through
+  // `tileStyles.ts`, and nothing else is. The 2026-08-25 record that
+  // made the choice tile a `RadioGroup` shape named this case under
+  // what it deliberately does not cover — a tile that navigates is
+  // not a radio, and giving one `aria-checked` would be worse than
+  // the paint it replaced.
+  expect(componentNames.length).toBe(62)
 
   for (const name of componentNames) {
     expect(barrel).toContain(`export { ${name} }`)

package/src/tileStyles.ts

@@ -0,0 +1,118 @@
+/**
+ * The tile shape, shared by the two components that draw it.
+ *
+ * A tile is a bordered card carrying a name and a line of help, laid
+ * out in a grid that gains columns with its CONTAINER. `RadioGroup`
+ * draws one per option when `itemShape="tile"`; `ActionTiles` draws
+ * one per action. The two must be the **same box** — a page that puts
+ * "which activity" beside "what would you like to do" would otherwise
+ * show two cards with different padding, different corners and
+ * different gaps, which is the drift this file exists to make
+ * impossible.
+ *
+ * Same argument as `CONTROL_BASE_CLASS`, which `Button` and
+ * `ButtonLink` share for the same reason: "identical" spelled as two
+ * copies of one string is a promise that survives exactly one edit.
+ *
+ * These were `RadioGroup`'s private constants until `ActionTiles`
+ * shipped. Nothing about their values changed on the way out.
+ */
+
+import type { ControlSize } from "@charcuterie/tokens"
+
+/**
+ * A tile is a card, so its padding is a card's rather than a
+ * control's — enough that the border reads as a box around content
+ * and not as an outline on a line of text.
+ *
+ * This is also the whole reason `ActionTiles` exists rather than a
+ * `Button` with a `className`: a `Button` is sized by
+ * `h-(--control-height-md)` and carries **no block padding at all**,
+ * so an app that reaches for `height: auto` to let one wrap gets a
+ * two-line card with `padding: 0` down its block axis and no error
+ * anywhere. QueuePilot's queue-type chooser shipped exactly that.
+ */
+export const TILE_PADDING_CLASS: Record<
+  ControlSize,
+  string
+> = {
+  sm: "px-3 py-2.5",
+  md: "px-3.5 py-3",
+  lg: "px-4 py-3.5",
+}
+
+/**
+ * The box, and only the box. Every state layered over it is a
+ * **border and a surface**, never colour alone — the same reason
+ * `Stepper` refuses to say "done" with a hue.
+ */
+export const TILE_BOX_CLASS =
+  "rounded-lg border border-border-subtle bg-surface-raised"
+
+export const TILE_TEXT_SIZE_CLASS: Record<
+  ControlSize,
+  string
+> = {
+  sm: "text-sm",
+  md: "text-md",
+  lg: "text-lg",
+}
+
+/**
+ * One step down from the tile's own text, and never below `xs`: a
+ * hint that keeps shrinking with the density axis is the 11px
+ * caption the 2026-08-10 ramp rebuild exists to have removed.
+ */
+export const TILE_HINT_TEXT_CLASS: Record<
+  ControlSize,
+  string
+> = {
+  sm: "text-xs",
+  md: "text-xs",
+  lg: "text-sm",
+}
+
+/**
+ * Wider than a list's row gaps: rows are separated by their leading,
+ * and tiles by nothing but the gap, so the same 6px that reads as a
+ * list reads as a seam between two cards.
+ */
+export const TILE_GAP_CLASS: Record<ControlSize, string> = {
+  sm: "gap-1.5",
+  md: "gap-2",
+  lg: "gap-3",
+}
+
+/**
+ * `auto-fill`, and deliberately not `auto-fit`.
+ *
+ * `auto-fit` collapses the empty tracks and lets the ones that
+ * remain share the whole row, so six tiles in a 2560px container
+ * become six 420px slabs — the full-width-row shape in a new
+ * costume. `auto-fill` keeps the empty tracks, so a tile stays a
+ * tile and the grid simply has room to spare.
+ *
+ * `min(…, 100%)` is what stops the floor overflowing a container
+ * narrower than one tile, which is the Narrow View and is otherwise
+ * a horizontal scrollbar on a phone.
+ *
+ * The floor arrives as a custom property rather than an interpolated
+ * class because Tailwind scans source *text* for complete class
+ * strings: `` `grid-cols-[…${n}px…]` `` generates nothing, paints
+ * nothing and reports nothing. One written-out literal reading
+ * `var(--charcuterie-tile-min-inline-size)` covers every width an
+ * app can ask for — the same reason `Card`'s accent edge goes
+ * through one property.
+ *
+ * This is **not** `useAdaptiveColumns`, and the difference is the
+ * question being asked. That hook buys a column with height, for an
+ * unbounded gallery that will scroll; a tile set is a bounded group
+ * inside a form section or a first step, where the only question is
+ * how many fit across the box it was given.
+ */
+export const TILE_COLUMNS_CLASS =
+  "grid-cols-[repeat(auto-fill,minmax(min(var(--charcuterie-tile-min-inline-size),100%),1fr))]"
+
+/** The property `TILE_COLUMNS_CLASS` reads its floor from. */
+export const TILE_MIN_INLINE_SIZE_PROPERTY =
+  "--charcuterie-tile-min-inline-size"