@charcuterie/ui 4.18.2 → 4.19.0

package/src/MetricCard/MetricCard.tsx

@@ -0,0 +1,51 @@
+import type { CategoricalIndex } from "@charcuterie/tokens"
+import type { ReactNode } from "react"
+import { Card, type CardProps } from "../Card/Card.tsx"
+import { CATEGORICAL_CONTENT_CLASS } from "../categoricalStyles.ts"
+import { toClassName } from "../toClassName.ts"
+
+export type MetricCardProps = Omit<CardProps, "actions"> & {
+  /** A stable category colour, independent of success/failure intent. */
+  categorical?: CategoricalIndex
+  /** App-supplied decoration; the visible heading names the metric. */
+  icon?: ReactNode
+  /** Already formatted by the app, including the unit when needed. */
+  value: ReactNode
+}
+
+/** One prominent measure, a coloured icon and edge, and app-owned supporting content. */
+export const MetricCard = ({
+  categorical,
+  children,
+  icon,
+  value,
+  ...cardProps
+}: MetricCardProps): ReactNode => (
+  <Card
+    {...cardProps}
+    accentEdge={
+      cardProps.accentEdge ??
+      (categorical ? { categorical } : undefined)
+    }
+    actions={
+      icon ? (
+        <span
+          aria-hidden="true"
+          className={toClassName(
+            "inline-flex size-7 items-center justify-center",
+            categorical
+              ? CATEGORICAL_CONTENT_CLASS[categorical]
+              : undefined,
+          )}
+        >
+          {icon}
+        </span>
+      ) : undefined
+    }
+  >
+    <p className="min-w-0 wrap-anywhere font-semibold text-2xl tabular-nums">
+      {value}
+    </p>
+    {children}
+  </Card>
+)

package/src/SortableTableHeader/SortableTableHeader.tsx

@@ -95,7 +95,7 @@ export const SortableTableHeader = ({
         // uppercased and letterspaced, which strips the word shapes
         // readers use at small sizes. A column header is the label
         // for everything under it, so it is content.
-        "flex w-full cursor-pointer items-center gap-1.5 bg-transparent px-3 py-2 text-start font-medium text-content-secondary text-sm uppercase tracking-wide transition-colors duration-(--duration-fast) ease-standard",
+        "flex w-full cursor-pointer items-center gap-1.5 bg-transparent px-3 py-2 text-start wrap-normal font-medium text-content-secondary text-sm uppercase tracking-wide transition-colors duration-(--duration-fast) ease-standard",
         "hover:text-content-primary",
         FOCUS_RING_CLASS,
       )}

package/src/index.ts

@@ -158,6 +158,7 @@ export {
 export type {
   DataTableColumn,
   DataTableProps,
+  DataTableReflowAt,
   DataTableSelection,
   DataTableSort,
 } from "./DataTable/DataTable.tsx"
@@ -316,6 +317,8 @@ export type {
   MenuProps,
 } from "./Menu/Menu.tsx"
 export { Menu } from "./Menu/Menu.tsx"
+export type { MetricCardProps } from "./MetricCard/MetricCard.tsx"
+export { MetricCard } from "./MetricCard/MetricCard.tsx"
 export type { ModalProps } from "./Modal/Modal.tsx"
 export { Modal } from "./Modal/Modal.tsx"
 export type {

package/src/markdownEditorCodeMirror/MarkdownView.test.tsx

@@ -367,10 +367,14 @@ test.each([
   async (_case, name) => {
     const { canvas } = await mountStory(NestedLinkText)
 
-    const link = expectAgentDrivable(canvas, {
-      name,
-      role: "link",
-    })
+    // CodeMirror finishes its viewport decorations on a scheduled frame.
+    // Wait for the accessible anchor rather than assuming mount means paint.
+    const link = await waitFor(() =>
+      expectAgentDrivable(canvas, {
+        name,
+        role: "link",
+      }),
+    )
 
     await expect(link.tagName).toBe("A")
   },

package/src/sourceRules.test.ts

@@ -621,7 +621,8 @@ test("the barrel is the only place components are re-exported", async () => {
   // ValuePairs owns compact label-over-value summaries.
   // Chart shares portable SVG geometry with Preact and image consumers.
   // TableViewport owns readable comparisons and full-window expansion.
-  expect(componentNames.length).toBe(74)
+  // MetricCard shares prominent values and category-coloured icons through Card.
+  expect(componentNames.length).toBe(75)
 
   for (const name of componentNames) {
     expect(barrel).toContain(`export { ${name} }`)

package/src/styles.css

@@ -260,3 +260,49 @@
   th:first-child {
   z-index: 3;
 }
+
+/* Column width utilities describe comparison columns, never labelled list cells.
+   These rules are unlayered, like the component's existing structural styles,
+   so a consumer's cq-lg:w-32 cannot crush a list reflowing at cq-xl. */
+.charcuterie-data-table[data-layout="stacked"]
+  > table
+  > :is(thead, tbody)
+  > tr
+  > :is(th, td) {
+  inline-size: auto;
+  min-inline-size: 0;
+  max-inline-size: none;
+}
+@container (width < 32rem) {
+  .charcuterie-data-table[data-reflow-at="md"]
+    > table
+    > :is(thead, tbody)
+    > tr
+    > :is(th, td) {
+    inline-size: auto;
+    min-inline-size: 0;
+    max-inline-size: none;
+  }
+}
+@container (width < 48rem) {
+  .charcuterie-data-table[data-reflow-at="lg"]
+    > table
+    > :is(thead, tbody)
+    > tr
+    > :is(th, td) {
+    inline-size: auto;
+    min-inline-size: 0;
+    max-inline-size: none;
+  }
+}
+@container (width < 64rem) {
+  .charcuterie-data-table[data-reflow-at="xl"]
+    > table
+    > :is(thead, tbody)
+    > tr
+    > :is(th, td) {
+    inline-size: auto;
+    min-inline-size: 0;
+    max-inline-size: none;
+  }
+}