@gntik-ai/blocks 0.0.0-stage → 0.6.0

package/src/data-display/StatCard/StatCard.tsx

@@ -0,0 +1,138 @@
+import { Activity, ArrowRight, type LucideIcon } from '@gntik-ai/icons';
+import { Button, Card, cn, Link, Sparkline, Toggle, ToggleGroup, type SparklineTone } from '@gntik-ai/ui';
+import { useState } from 'react';
+import { TrendDelta, type KpiDelta } from '../shared/TrendDelta';
+import { STAT_RANGES } from './fixtures';
+
+export interface StatCardRange {
+  /** Range key, e.g. "7d". */
+  value: string;
+  /** Toggle label. */
+  label: string;
+  /** Pre-formatted headline value for this range. */
+  stat: string;
+  delta?: KpiDelta;
+  /** Series drawn under the value, oldest first. */
+  series: readonly number[];
+}
+
+export interface StatCardProps {
+  label?: string;
+  /** Leading icon tile (a lucide icon). */
+  icon?: LucideIcon;
+  /** One entry per range; with a single entry the range toggle is hidden. */
+  ranges?: readonly StatCardRange[];
+  /** Initially selected range (uncontrolled). */
+  defaultRange?: string;
+  /** Selected range (controlled). */
+  range?: string;
+  onRangeChange?: (range: string) => void;
+  /** `area` line (default) or daily `bar` shape. */
+  chart?: 'area' | 'bar';
+  tone?: SparklineTone;
+  /** Footer link-style action ("View requests →"). */
+  action?: { label: string; onClick?: () => void; href?: string };
+  /** Heading level of the title, to fit the page outline (default h3). */
+  titleAs?: 'h2' | 'h3' | 'h4';
+  className?: string;
+}
+
+/** A single rich stat: icon tile, label, value, delta, a range toggle and a trend chart, with a footer action. */
+export function StatCard({
+  label = 'Requests',
+  icon: IconCmp = Activity,
+  ranges = STAT_RANGES,
+  defaultRange,
+  range: rangeProp,
+  onRangeChange,
+  chart = 'area',
+  tone = 'primary',
+  action = { label: 'View requests' },
+  titleAs: TitleTag = 'h3',
+  className,
+}: StatCardProps) {
+  const [inner, setInner] = useState(defaultRange ?? ranges[0]?.value ?? '');
+  const current = rangeProp ?? inner;
+  const active = ranges.find((r) => r.value === current) ?? ranges[0];
+  const select = (next: string) => {
+    setInner(next);
+    onRangeChange?.(next);
+  };
+  return (
+    <Card className={cn('flex flex-col', className)}>
+      <div className="flex flex-1 flex-col p-5">
+        <div className="flex items-start justify-between gap-3">
+          <div className="flex min-w-0 items-center gap-3">
+            <span className="inline-flex size-9 shrink-0 items-center justify-center rounded-md bg-primary/14 text-primary-chip-text">
+              <IconCmp size={18} aria-hidden />
+            </span>
+            <TitleTag className="truncate text-[13px] font-medium text-muted-foreground">{label}</TitleTag>
+          </div>
+          {ranges.length > 1 && (
+            <ToggleGroup
+              aria-label={`${label} range`}
+              size="sm"
+              value={[current]}
+              onValueChange={(v) => {
+                const next = v[0];
+                if (next) select(next);
+              }}
+            >
+              {ranges.map((r) => (
+                <Toggle key={r.value} value={r.value} className="font-mono">
+                  {r.label}
+                </Toggle>
+              ))}
+            </ToggleGroup>
+          )}
+        </div>
+        {active && (
+          <>
+            <p className="mt-3 flex flex-wrap items-baseline gap-x-2 gap-y-1" aria-live="polite">
+              <span className="text-[26px] font-semibold tracking-tight text-foreground tabular-nums">
+                {active.stat}
+              </span>
+              {active.delta && <TrendDelta {...active.delta} />}
+            </p>
+            {active.delta?.note && <p className="mt-1 text-[12px] text-muted-foreground">{active.delta.note}</p>}
+            <Sparkline
+              data={active.series}
+              label={`${label}, ${active.label}`}
+              variant={chart === 'bar' ? 'bar' : 'line'}
+              area={chart === 'area'}
+              markers={chart === 'area' ? ['last'] : []}
+              tone={tone}
+              width={280}
+              height={56}
+              className="mt-4 block h-auto w-full"
+            />
+          </>
+        )}
+      </div>
+      {action && (
+        <div className="border-t border-border px-5 py-3">
+          {action.href ? (
+            <Link
+              underline="hover"
+              href={action.href}
+              className="inline-flex items-center gap-1 text-[12.5px] font-semibold"
+            >
+              {action.label}
+              <ArrowRight size={14} aria-hidden className="rtl:-scale-x-100" />
+            </Link>
+          ) : (
+            <Button
+              variant="ghost"
+              size="sm"
+              trailingIcon={ArrowRight}
+              className="-mx-2 text-primary-text hover:text-primary-text"
+              onClick={action.onClick}
+            >
+              {action.label}
+            </Button>
+          )}
+        </div>
+      )}
+    </Card>
+  );
+}

package/src/data-display/StatCard/block.meta.ts

@@ -0,0 +1,10 @@
+import type { BlockMeta } from '../../meta';
+
+export const meta: BlockMeta = {
+  name: 'Stat card',
+  family: 'data-display',
+  status: 'beta',
+  description:
+    'One rich stat: icon tile, value and delta that recalculate per range (7d/30d/90d), a trend chart and a footer action.',
+  uses: ['Card', 'ToggleGroup', 'Sparkline', 'Button'],
+};

package/src/data-display/StatCard/fixtures.ts

@@ -0,0 +1,26 @@
+import type { StatCardRange } from './StatCard';
+
+/** Requests per range: the value and delta recalculate when the range changes. */
+export const STAT_RANGES: StatCardRange[] = [
+  {
+    value: '7d',
+    label: '7d',
+    stat: '38,921',
+    delta: { value: '+12.4%', direction: 'up', sentiment: 'positive', note: 'vs. previous 7 days' },
+    series: [31, 34, 33, 38, 36, 41, 39],
+  },
+  {
+    value: '30d',
+    label: '30d',
+    stat: '1.09M',
+    delta: { value: '+9.6%', direction: 'up', sentiment: 'positive', note: 'vs. previous 30 days' },
+    series: [28, 30, 29, 33, 31, 30, 34, 32, 36, 35, 38, 37],
+  },
+  {
+    value: '90d',
+    label: '90d',
+    stat: '3.02M',
+    delta: { value: '+22.8%', direction: 'up', sentiment: 'positive', note: 'vs. previous 90 days' },
+    series: [22, 24, 23, 26, 25, 28, 27, 30, 29, 33, 32, 36],
+  },
+];

package/src/data-display/StatusTimeline/StatusTimeline.test.tsx

@@ -0,0 +1,153 @@
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { I18nProvider } from '@gntik-ai/ui';
+import { expectNoAxeViolations } from '../../test/a11y';
+import { StatusTimeline, type StatusEvent } from './StatusTimeline';
+import { DEPLOYMENT_EVENTS } from './fixtures';
+
+describe('StatusTimeline', () => {
+  it.each(['', 'dark', 'high_contrast'])('has an accessible empty and populated state in theme "%s"', async (theme) => {
+    const { container, rerender } = render(
+      <div className={theme}>
+        <StatusTimeline events={[]} />
+      </div>,
+    );
+    await expectNoAxeViolations(container);
+    rerender(
+      <div className={theme}>
+        <StatusTimeline maxVisible={3} />
+      </div>,
+    );
+    await expectNoAxeViolations(container);
+    await userEvent.click(screen.getByRole('button', { name: 'Show 3 earlier events' }));
+    await expectNoAxeViolations(container);
+  });
+
+  it('localizes default toggle and actor labels while retaining partial message overrides', async () => {
+    render(
+      <I18nProvider locale="es" messages={{ 'statusTimeline.label': 'Historial' }}>
+        <StatusTimeline maxVisible={5} />
+      </I18nProvider>,
+    );
+    expect(screen.getByRole('list', { name: 'Historial' })).toBeInTheDocument();
+    expect(screen.getByText('por System')).toBeInTheDocument();
+    await userEvent.click(screen.getByRole('button', { name: 'Ver 1 cambio anterior' }));
+    expect(screen.getByRole('button', { name: 'Ver menos' })).toHaveAttribute('aria-expanded', 'true');
+  });
+
+  it('keeps the singular English toggle default', () => {
+    render(<StatusTimeline maxVisible={5} />);
+    expect(screen.getByRole('button', { name: 'Show 1 earlier event' })).toBeInTheDocument();
+  });
+
+  it('uses consumer labels for empty, populated, collapsed and expanded timelines', async () => {
+    const events: StatusEvent[] = [
+      {
+        id: '1',
+        status: 'Activo',
+        tone: 'success',
+        title: 'Servicio iniciado',
+        description: 'Sistema listo.',
+        actor: 'Ana',
+        at: '2026-01-03T12:00:00Z',
+      },
+      {
+        id: '2',
+        status: 'Preparando',
+        tone: 'info',
+        title: 'Configuración aplicada',
+        actor: 'Luis',
+        at: '2026-01-02T12:00:00Z',
+      },
+      {
+        id: '3',
+        status: 'Creado',
+        tone: 'neutral',
+        title: 'Servicio creado',
+        actor: 'Sistema',
+        at: '2026-01-01T12:00:00Z',
+      },
+    ];
+    const labels = {
+      label: 'Historial',
+      emptyLabel: 'Sin historial de estado',
+      showFewerLabel: 'Ver menos',
+      showEarlierLabel: (hidden: number) => `Ver ${hidden} cambios anteriores`,
+      actorLabel: 'por',
+    };
+    const { container, rerender } = render(<StatusTimeline {...labels} events={[]} maxVisible={1} />);
+    const expectLocalized = () => {
+      for (const text of ['Status history', 'Show fewer', 'Show', 'earlier', 'event', 'by ']) {
+        expect(container).not.toHaveTextContent(text);
+        expect(container.querySelector('[aria-label]')?.getAttribute('aria-label')).not.toContain(text);
+      }
+    };
+    expectLocalized();
+    rerender(<StatusTimeline {...labels} events={events} timeFormat="absolute" />);
+    expect(screen.getAllByRole('listitem')).toHaveLength(3);
+    expect(screen.getByText('por Ana')).toBeInTheDocument();
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+    expectLocalized();
+    rerender(<StatusTimeline {...labels} events={events} maxVisible={1} timeFormat="absolute" />);
+    expect(screen.getAllByRole('listitem')).toHaveLength(1);
+    expectLocalized();
+    await userEvent.click(screen.getByRole('button', { name: 'Ver 2 cambios anteriores' }));
+    expect(screen.getAllByRole('listitem')).toHaveLength(3);
+    expectLocalized();
+    await userEvent.click(screen.getByRole('button', { name: 'Ver menos' }));
+    expect(screen.getAllByRole('listitem')).toHaveLength(1);
+    expectLocalized();
+  });
+
+  it('uses the provider locale for the empty state and English without a provider', () => {
+    const { rerender } = render(
+      <I18nProvider locale="es">
+        <StatusTimeline events={[]} />
+      </I18nProvider>,
+    );
+    expect(screen.getByRole('region', { name: 'Historial de estado' })).toHaveTextContent('Sin historial de estado');
+    rerender(<StatusTimeline events={[]} />);
+    expect(screen.getByRole('region', { name: 'Status history' })).toHaveTextContent('No status history');
+  });
+
+  it('shows an accessible empty state without events, sample copy or a toggle', () => {
+    const { container } = render(
+      <StatusTimeline events={[]} label="Historial" emptyLabel="Sin historial de estado" maxVisible={2} />,
+    );
+    expect(screen.getAllByText('Sin historial de estado')).toHaveLength(1);
+    const region = screen.getByRole('region', { name: 'Historial' });
+    expect(
+      within(region).getAllByRole('heading', {
+        name: 'Sin historial de estado',
+      }),
+    ).toHaveLength(1);
+    expect(region).toHaveTextContent(/^Sin historial de estado$/);
+    expect(screen.queryByRole('listitem')).not.toBeInTheDocument();
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+    expect(container.querySelector('time')).toBeNull();
+    expect(container.querySelector('[data-tone]')).toBeNull();
+    for (const event of DEPLOYMENT_EVENTS) {
+      for (const text of [event.status, event.title, event.description, event.actor]) {
+        if (text) expect(container).not.toHaveTextContent(text);
+      }
+    }
+  });
+
+  it('renders every event as an ordered list item with a time element', async () => {
+    const { container } = render(<StatusTimeline />);
+    const list = screen.getByRole('list', { name: 'Status history' });
+    expect(within(list).getAllByRole('listitem')).toHaveLength(6);
+    expect(container.querySelectorAll('time')).toHaveLength(6);
+    await expectNoAxeViolations(container);
+  });
+
+  it('collapses older events behind a toggle', async () => {
+    render(<StatusTimeline maxVisible={3} />);
+    expect(screen.getAllByRole('listitem')).toHaveLength(3);
+    const toggle = screen.getByRole('button', { name: 'Show 3 earlier events' });
+    expect(toggle).toHaveAttribute('aria-expanded', 'false');
+    await userEvent.click(toggle);
+    expect(screen.getAllByRole('listitem')).toHaveLength(6);
+    expect(screen.getByRole('button', { name: 'Show fewer' })).toHaveAttribute('aria-expanded', 'true');
+  });
+});

package/src/data-display/StatusTimeline/StatusTimeline.tsx

@@ -0,0 +1,114 @@
+import { Button, EmptyState, StatusDot, Timestamp, useI18n, type DateInput, type StatusDotTone } from '@gntik-ai/ui';
+import { useState } from 'react';
+import { DEPLOYMENT_EVENTS } from './fixtures';
+
+export interface StatusEvent {
+  id: string;
+  /** Short state name next to the dot ("Running"). */
+  status: string;
+  tone: StatusDotTone;
+  title: string;
+  description?: string;
+  at: DateInput;
+  /** Who or what caused the change. */
+  actor?: string;
+  /** Pulses the dot (the current, in-progress state). */
+  live?: boolean;
+}
+
+export interface StatusTimelineProps {
+  /** Events, newest first. */
+  events?: readonly StatusEvent[];
+  /** Accessible name of the list. */
+  label?: string;
+  /** Title shown when events is an explicit empty array. */
+  emptyLabel?: string;
+  /** Collapse toggle text. */
+  showFewerLabel?: string;
+  /** Expand toggle text, given the number of hidden events. */
+  showEarlierLabel?: (hidden: number) => string;
+  /** Prefix before the actor's name. */
+  actorLabel?: string;
+  /** Events shown before "Show earlier"; all when omitted. */
+  maxVisible?: number;
+  /** `relative` ("3 hours ago") or `absolute` timestamps. */
+  timeFormat?: 'relative' | 'absolute';
+  className?: string;
+}
+
+/** Vertical timeline of state changes, or a named empty state for an explicit empty events array. */
+export function StatusTimeline({
+  events = DEPLOYMENT_EVENTS,
+  label: labelProp,
+  emptyLabel: emptyLabelProp,
+  showFewerLabel: showFewerLabelProp,
+  showEarlierLabel: showEarlierLabelProp,
+  actorLabel: actorLabelProp,
+  maxVisible,
+  timeFormat = 'relative',
+  className,
+}: StatusTimelineProps) {
+  const { t } = useI18n();
+  const label = labelProp ?? t('statusTimeline.label');
+  const emptyLabel = emptyLabelProp ?? t('statusTimeline.empty');
+  const showFewerLabel = showFewerLabelProp ?? t('statusTimeline.showFewer');
+  const showEarlierLabel = showEarlierLabelProp ?? ((count: number) => t('statusTimeline.showEarlier', { count }));
+  const actorLabel = actorLabelProp ?? t('statusTimeline.actor');
+  const [expanded, setExpanded] = useState(false);
+  if (events.length === 0) {
+    return <EmptyState role="region" aria-label={label} size="sm" title={emptyLabel} className={className} />;
+  }
+  const limit = !expanded && maxVisible !== undefined ? maxVisible : events.length;
+  const shown = events.slice(0, limit);
+  const hidden = events.length - shown.length;
+  return (
+    <div className={className}>
+      <ol aria-label={label} className="flex flex-col">
+        {shown.map((event, i) => {
+          const last = i === shown.length - 1;
+          return (
+            <li key={event.id} className="relative flex gap-3 pb-6 last:pb-0">
+              {!last && <span aria-hidden className="absolute top-5 bottom-0 start-[9px] w-px bg-border" />}
+              <span className="relative z-10 mt-1 flex size-5 shrink-0 items-center justify-center rounded-full bg-card">
+                <StatusDot tone={event.tone} pulse={event.live} size="lg" />
+              </span>
+              <div className="min-w-0 flex-1">
+                <div className="flex flex-col gap-0.5 sm:flex-row sm:items-baseline sm:justify-between sm:gap-4">
+                  <p className="text-[13px] text-foreground">
+                    <span className="font-semibold">{event.status}</span>
+                    <span className="text-muted-foreground"> · </span>
+                    {event.title}
+                  </p>
+                  <Timestamp value={event.at} format={timeFormat} className="shrink-0 font-mono text-[11px]" />
+                </div>
+                {(event.description || event.actor) && (
+                  <p className="mt-0.5 text-[12.5px] text-muted-foreground">
+                    {event.description}
+                    {event.description && event.actor && ' '}
+                    {event.actor && (
+                      <span>
+                        {`${actorLabel} `}
+                        {event.actor}
+                      </span>
+                    )}
+                  </p>
+                )}
+              </div>
+            </li>
+          );
+        })}
+      </ol>
+      {(hidden > 0 || (expanded && maxVisible !== undefined && events.length > maxVisible)) && (
+        <Button
+          variant="ghost"
+          size="sm"
+          className="mt-3 ms-6"
+          aria-expanded={expanded}
+          onClick={() => setExpanded((v) => !v)}
+        >
+          {expanded ? showFewerLabel : showEarlierLabel(hidden)}
+        </Button>
+      )}
+    </div>
+  );
+}

package/src/data-display/StatusTimeline/block.meta.ts

@@ -0,0 +1,10 @@
+import type { BlockMeta } from '../../meta';
+
+export const meta: BlockMeta = {
+  name: 'Status timeline',
+  family: 'data-display',
+  status: 'beta',
+  description:
+    'Vertical timeline of state changes with a StatusDot per state, details, actor and Timestamp; collapses older events and renders an accessible empty state for an explicit empty events array, with a localizable emptyLabel. The label, showFewerLabel, showEarlierLabel(hidden) and actorLabel props override the localized defaults.',
+  uses: ['StatusDot', 'Timestamp', 'Button', 'EmptyState'],
+};

package/src/data-display/StatusTimeline/examples/Empty.tsx

@@ -0,0 +1,6 @@
+import { StatusTimeline } from '../StatusTimeline';
+
+/** /preview.html?kind=block&id=status-timeline--empty */
+export default function Empty() {
+  return <StatusTimeline events={[]} emptyLabel="No status changes yet" />;
+}

package/src/data-display/StatusTimeline/fixtures.ts

@@ -0,0 +1,62 @@
+import type { StatusEvent } from './StatusTimeline';
+
+const HOUR = 3_600_000;
+/** Fixtures are relative to load time so relative timestamps stay fresh in the docs. */
+export const FIXTURE_NOW = Date.now();
+
+/** State changes of a deployment, newest first. */
+export const DEPLOYMENT_EVENTS: StatusEvent[] = [
+  {
+    id: 'e6',
+    status: 'Running',
+    tone: 'success',
+    title: 'Deployment healthy',
+    description: 'All 3 replicas passed health checks.',
+    at: FIXTURE_NOW - 0.2 * HOUR,
+    actor: 'System',
+    live: true,
+  },
+  {
+    id: 'e5',
+    status: 'Deploying',
+    tone: 'info',
+    title: 'Rolling out v2.14.0',
+    description: 'Canary at 10%, then 50%, then 100%.',
+    at: FIXTURE_NOW - 0.6 * HOUR,
+    actor: 'Ana Lopez',
+  },
+  {
+    id: 'e4',
+    status: 'Approved',
+    tone: 'primary',
+    title: 'Release approved',
+    at: FIXTURE_NOW - 1.5 * HOUR,
+    actor: 'Sam Carter',
+  },
+  {
+    id: 'e3',
+    status: 'Degraded',
+    tone: 'warning',
+    title: 'Error rate above 2%',
+    description: 'Alert fired on orders-api.',
+    at: FIXTURE_NOW - 5 * HOUR,
+    actor: 'Monitoring',
+  },
+  {
+    id: 'e2',
+    status: 'Failed',
+    tone: 'destructive',
+    title: 'Build failed',
+    description: 'Type check failed in 2 files.',
+    at: FIXTURE_NOW - 26 * HOUR,
+    actor: 'CI',
+  },
+  {
+    id: 'e1',
+    status: 'Created',
+    tone: 'neutral',
+    title: 'Deployment created',
+    at: FIXTURE_NOW - 50 * HOUR,
+    actor: 'Ana Lopez',
+  },
+];

package/src/data-display/index.ts

@@ -0,0 +1,34 @@
+// @gntik-ai/blocks — data-display family.
+export * from './shared/TrendDelta';
+export * from './KpiRow/KpiRow';
+export { meta as kpiRowMeta } from './KpiRow/block.meta';
+export { KPI_ITEMS } from './KpiRow/fixtures';
+export * from './StatCard/StatCard';
+export { meta as statCardMeta } from './StatCard/block.meta';
+export { STAT_RANGES } from './StatCard/fixtures';
+export * from './ChartCard/ChartCard';
+export { meta as chartCardMeta } from './ChartCard/block.meta';
+export {
+  COST_BY_RANGE,
+  COST_RANGES,
+  TRAFFIC_BUCKETS,
+  TRAFFIC_BY_RANGE,
+  TRAFFIC_RANGES,
+  type CostPoint,
+  type TrafficRow,
+} from './ChartCard/fixtures';
+export * from './DescriptionListCard/DescriptionListCard';
+export { meta as descriptionListCardMeta } from './DescriptionListCard/block.meta';
+export { DEPLOYMENT_DETAILS } from './DescriptionListCard/fixtures';
+export * from './ResourceCardGrid/ResourceCardGrid';
+export { meta as resourceCardGridMeta } from './ResourceCardGrid/block.meta';
+export { RESOURCE_CARDS } from './ResourceCardGrid/fixtures';
+export * from './StatusTimeline/StatusTimeline';
+export { meta as statusTimelineMeta } from './StatusTimeline/block.meta';
+export { DEPLOYMENT_EVENTS } from './StatusTimeline/fixtures';
+export * from './ActivityFeed/ActivityFeed';
+export { meta as activityFeedMeta } from './ActivityFeed/block.meta';
+export { PROJECT_ACTIVITY } from './ActivityFeed/fixtures';
+export * from './CommentThread/CommentThread';
+export { meta as commentThreadMeta } from './CommentThread/block.meta';
+export { COMMENT_AUTHOR, REVIEW_COMMENTS } from './CommentThread/fixtures';

package/src/data-display/shared/TrendDelta.tsx

@@ -0,0 +1,60 @@
+import { cn } from '@gntik-ai/ui';
+
+/** Arrow shape of a change. */
+export type DeltaDirection = 'up' | 'down' | 'flat';
+/** Whether the change is good, bad or neither — independent of its direction (lower latency is good). */
+export type DeltaSentiment = 'positive' | 'negative' | 'neutral';
+
+export interface KpiDelta {
+  /** Display text, e.g. "+12.4%". */
+  value: string;
+  direction: DeltaDirection;
+  sentiment: DeltaSentiment;
+  /** Comparison context, e.g. "vs. previous 24h". */
+  note?: string;
+}
+
+const SENTIMENT_CLASS: Record<DeltaSentiment, string> = {
+  positive: 'text-success-text',
+  negative: 'text-destructive-text',
+  neutral: 'text-muted-foreground',
+};
+
+const DIRECTION_TEXT: Record<DeltaDirection, string> = { up: 'Increased by', down: 'Decreased by', flat: 'Unchanged:' };
+const SENTIMENT_TEXT: Record<DeltaSentiment, string> = {
+  positive: 'favourable',
+  negative: 'unfavourable',
+  neutral: '',
+};
+
+export interface TrendDeltaProps extends KpiDelta {
+  className?: string;
+}
+
+/**
+ * Mono delta with a triangle: the arrow follows `direction`, the colour follows `sentiment`.
+ * Screen readers get the direction and sentiment in words.
+ */
+export function TrendDelta({ value, direction, sentiment, className }: TrendDeltaProps) {
+  const sr = [DIRECTION_TEXT[direction], value, SENTIMENT_TEXT[sentiment] && `(${SENTIMENT_TEXT[sentiment]})`]
+    .filter(Boolean)
+    .join(' ');
+  return (
+    <span
+      data-sentiment={sentiment}
+      className={cn(
+        'inline-flex items-center gap-1 font-mono text-[12px] font-medium tabular-nums',
+        SENTIMENT_CLASS[sentiment],
+        className,
+      )}
+    >
+      <svg width="9" height="9" viewBox="0 0 10 10" aria-hidden className="shrink-0">
+        {direction === 'up' && <path d="M5 1.5 9 8.5H1z" fill="currentColor" />}
+        {direction === 'down' && <path d="M5 8.5 1 1.5h8z" fill="currentColor" />}
+        {direction === 'flat' && <path d="M1 4h8v2H1z" fill="currentColor" />}
+      </svg>
+      <span aria-hidden>{value}</span>
+      <span className="sr-only">{sr}</span>
+    </span>
+  );
+}

package/src/feedback/ConfirmDestructive/ConfirmDestructive.test.tsx

@@ -0,0 +1,47 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../../test/a11y';
+import { ConfirmDestructive } from './ConfirmDestructive';
+
+describe('ConfirmDestructive', () => {
+  it('renders the trigger and an accessible dialog', async () => {
+    const { container } = render(<ConfirmDestructive />);
+    await expectNoAxeViolations(container);
+    await userEvent.setup().click(screen.getByRole('button', { name: 'Delete project' }));
+    const dialog = await screen.findByRole('alertdialog', { name: 'Delete project?' });
+    expect(dialog).toBeInTheDocument();
+    await expectNoAxeViolations(document.body);
+  });
+
+  it('unlocks only on an exact name match, then confirms and closes', async () => {
+    const user = userEvent.setup();
+    const onConfirm = vi.fn(() => Promise.resolve());
+    render(<ConfirmDestructive defaultOpen triggerLabel={null} onConfirm={onConfirm} />);
+    const dialog = await screen.findByRole('alertdialog');
+    const confirm = screen.getAllByRole('button', { name: 'Delete project' }).at(-1)!;
+    expect(confirm).toBeDisabled();
+    const input = screen.getByRole('textbox', { name: 'Type acme-web to confirm' });
+    await user.type(input, 'acme-we');
+    expect(confirm).toBeDisabled();
+    await user.type(input, 'b');
+    expect(confirm).toBeEnabled();
+    await user.click(confirm);
+    expect(onConfirm).toHaveBeenCalledTimes(1);
+    await waitFor(() => expect(dialog).not.toBeInTheDocument());
+  });
+
+  it('shows the error when confirm rejects', async () => {
+    const user = userEvent.setup();
+    render(
+      <ConfirmDestructive
+        defaultOpen
+        triggerLabel={null}
+        resourceName="db"
+        onConfirm={() => Promise.reject(new Error('Project is locked'))}
+      />,
+    );
+    await user.type(await screen.findByRole('textbox'), 'db{Enter}');
+    expect(await screen.findByRole('alert')).toHaveTextContent('Project is locked');
+    expect(screen.getByRole('alertdialog')).toBeInTheDocument();
+  });
+});