sdaia-ui 1.0.1

package/src/components/DonutChartPanel/DonutChartPanel.types.ts

@@ -0,0 +1,143 @@
+/**
+ * DonutChartPanel.types.ts
+ *
+ * Type definitions for the DonutChartPanel component.
+ * Traced from Figma node 5886:80843 (frame "Donut Chart").
+ *
+ * ── Variant × RTL matrix ──────────────────────────────────────────────────────
+ *   InlineProgress       LTR 5886:80840  RTL 5975:88173   271×132
+ *   SplitProgress        LTR 5886:80834  RTL 5975:88178   271×205
+ *   StackedProgress      LTR 5886:80835  RTL 5975:88146   271×357
+ *   DetailRingPanel      LTR 5886:80836  RTL 5975:88160   271×299
+ *   MultiSegmentPanel    LTR 5886:80839  RTL 5975:88084   562×289
+ *   MetricRingPanel      LTR 5886:80837  RTL 5975:88107   562×291
+ *   LabeledRing          LTR 5886:80838  RTL 5975:87938   562×578
+ *   DualMetricPanel      LTR 5886:80841  RTL 5975:88051   562×436
+ *   ExtendedMetricPanel  LTR 5886:80842  RTL 5975:87981   562×646
+ */
+
+import type { HTMLAttributes } from 'react';
+
+// ─── Variant ──────────────────────────────────────────────────────────────────
+
+export type DonutChartPanelVariant =
+  | 'InlineProgress'
+  | 'SplitProgress'
+  | 'StackedProgress'
+  | 'DetailRingPanel'
+  | 'MultiSegmentPanel'
+  | 'MetricRingPanel'
+  | 'LabeledRing'
+  | 'DualMetricPanel'
+  | 'ExtendedMetricPanel';
+
+// ─── Badge direction (trend indicator) ────────────────────────────────────────
+
+export type BadgeDirection = 'up' | 'down';
+
+// ─── Tab item (MetricRingPanel & DualMetricPanel tab bar) ─────────────────────
+
+export interface PanelTab {
+  label: string;
+  active?: boolean;
+}
+
+// ─── Data series item ─────────────────────────────────────────────────────────
+/**
+ * Represents one segment/legend entry.
+ *
+ * Used for:
+ * - Left-border data rows (LabeledRing, MultiSegmentPanel, ExtendedMetricPanel)
+ * - Legend grid items (MetricRingPanel, StackedProgress, DetailRingPanel)
+ *
+ * `color` is the data-viz palette color (used for the left border or legend square).
+ * `percentage` is the share of the donut/pie for this series (0–100).
+ */
+export interface PanelDataItem {
+  /** Sidebar label e.g. "Text" */
+  label?: string;
+  /** Trend value e.g. "-60%" */
+  change?: string;
+  /** Primary metric value e.g. "422.61" */
+  value?: string;
+  /** Percentage for this slice (legend display) */
+  percentage?: string;
+  /** Data-viz color — hardcoded from Figma palette */
+  color?: string;
+}
+
+// ─── SplitProgress row (two independent donuts stacked) ──────────────────────
+
+export interface SplitProgressRow {
+  /** Indicator name above the value */
+  label?: string;
+  /** Large metric value e.g. "422.61" */
+  value?: string;
+  /** Donut center percentage text e.g. "60%" */
+  donutLabel?: string;
+  /** Donut fill 0–100 */
+  donutPercentage?: number;
+  /** Series type → maps to data-viz colour */
+  seriesType?: 1 | 2;
+}
+
+// ─── Main props ───────────────────────────────────────────────────────────────
+
+export interface DonutChartPanelProps extends HTMLAttributes<HTMLDivElement> {
+  /** Which layout variant to render */
+  variant?: DonutChartPanelVariant;
+
+  // ── Header / title ────────────────────────────────────────────────────────
+  /** Card title (Display sm/Bold) */
+  title?: string;
+  /** Subtitle / note below the title (Text md/Regular, secondary) */
+  note?: string;
+
+  // ── Indicator block (inside some variants) ───────────────────────────────
+  /** Indicator name label above the metric value */
+  indicatorName?: string;
+  /** Primary metric value e.g. "422.61" */
+  indicatorValue?: string;
+
+  // ── Trend badge ───────────────────────────────────────────────────────────
+  /** Badge value e.g. "12%" */
+  badgeValue?: string;
+  /** Arrow direction — 'up' = green positive, 'down' = red negative */
+  badgeDirection?: BadgeDirection;
+
+  // ── Date badge (DualMetricPanel, ExtendedMetricPanel) ────────────────────
+  /** Date string rendered in a pill badge e.g. "26/02/2026" */
+  dateBadge?: string;
+
+  // ── Donut / pie center ────────────────────────────────────────────────────
+  /** Helper text inside the ring (Text lg/Regular, secondary) */
+  donutHelperText?: string;
+  /** Bold label inside the ring (Display sm/Bold) */
+  donutLabel?: string;
+  /** Fill percentage 0–100 */
+  donutPercentage?: number;
+  /** Whether to render as a pie (multi-slice) instead of single arc */
+  pie?: boolean;
+
+  // ── Data series ───────────────────────────────────────────────────────────
+  /**
+   * Series items used to build:
+   * - Left-border data rows in LabeledRing / MultiSegmentPanel / ExtendedMetricPanel
+   * - Legend grid in MetricRingPanel / DetailRingPanel
+   * - Legend row in StackedProgress
+   */
+  series?: PanelDataItem[];
+
+  // ── SplitProgress rows ────────────────────────────────────────────────────
+  /** Top and bottom rows for SplitProgress (two separate donuts) */
+  splitRows?: [SplitProgressRow, SplitProgressRow];
+
+  // ── Tab bar ───────────────────────────────────────────────────────────────
+  /** Tab labels for MetricRingPanel / DualMetricPanel / ExtendedMetricPanel */
+  tabs?: PanelTab[];
+  /** Callback when a tab is clicked */
+  onTabChange?: (index: number) => void;
+
+  // ── RTL ───────────────────────────────────────────────────────────────────
+  rtl?: boolean;
+}

package/src/components/DonutChartPanel/DonutChartPanel.variants.ts

@@ -0,0 +1,154 @@
+/**
+ * DonutChartPanel.variants.ts
+ *
+ * All class-name constants and colour palette for DonutChartPanel.
+ * Traced from Figma node 5886:80843 (frame "Donut Chart").
+ *
+ * ── Color mapping ─────────────────────────────────────────────────────────────
+ *   Text/text-default              #161616  /  dark rgba(229,231,235,1)
+ *   Text/text-secondary-paragraph  #6c737f  /  dark #9ca3af
+ *   Text/text-primary              #1b8354  (identical light + dark)
+ *   Text/text-primary-paragraph    #384250
+ *   Text/text-oncolor-primary      #ffffff
+ *   Background/background-card     #ffffff  /  dark #141B34
+ *   Background/background-error-50 #fef3f2
+ *   Background/background-neutral-100 #f3f4f6
+ *   Border/border-neutral-primary  #d2d6db  /  dark #374151
+ *   Button/button-bg-neutral       #f3f4f6  /  dark #374151
+ *   Button/button-bg-primary       #1b8354
+ *   Colors/Primary-SA-Flag/400     #54c08a  (positive badge border)
+ *   Colors/Primary-SA-Flag/50      #f3fcf6  (positive badge bg)
+ *   Colors/Red/400                 #f97066  (negative badge border)
+ *   Colors/Red/600                 #d92d20  (negative badge text + series 6 border)
+ *   Colors/Neutral/100             #f3f4f6  (date badge bg)
+ *
+ * ── Data-viz series palette (left-border + legend square colours) ─────────────
+ *   Series 1  Colors/Primary-SA-Flag/600  #1b8354
+ *   Series 2  Colors/Tertiary-Lavendar/400 #a57bba
+ *   Series 3  Colors/Secondary-Gold/500   #f5bd02
+ *   Series 4  Colors/Blue/500             #2e90fa
+ *   Series 5  Colors/Yellow/500           #f79009
+ *   Series 6  Colors/Red/600              #d92d20
+ *
+ * ── Typography (all use global @utility tokens from globals.css) ─────────────
+ *   Title:             text-display-sm  font-[700]
+ *   Metric value:      text-display-sm  font-[700]  or  text-display-xs font-[700]
+ *   Indicator name:    text-text-xl     font-[400]
+ *   Note:              text-text-md     font-[400]
+ *   Data row label:    text-text-md     font-[400]
+ *   Data row change:   text-text-lg     font-[500]
+ *   Data row value:    text-text-xl     font-[700]
+ *   Legend label:      text-text-md     font-[400]
+ *   Legend value:      text-text-xl     font-[700]
+ *   Tab label active:  text-text-sm     font-[600]
+ *   Tab label idle:    text-text-sm     font-[400]
+ *   Badge:             text-text-2xs    font-[500]
+ *   Date badge:        text-text-sm     font-[500]
+ *   Donut helper:      text-text-lg     font-[400]
+ *   Donut label:       text-display-sm  font-[700]
+ *
+ * ── Spacing (responsive via --spacing-spacing-* CSS vars) ────────────────────
+ *   spacing-xxs = 2px  |  spacing-xs = 4px  |  spacing-sm = 6–8px
+ *   spacing-md  = 8px  |  spacing-lg = 8–12px | spacing-xl = 12–16px
+ *   spacing-2xl = 12–20px | spacing-3xl = 16–24px | spacing-4xl = 20–32px
+ *   spacing-5xl = 24–40px
+ */
+
+// ─── Data-viz palette ─────────────────────────────────────────────────────────
+/** Six data-viz series colors — identical in light and dark mode. */
+export const SERIES_COLORS: readonly string[] = [
+  '#1b8354', // Colors/Primary-SA-Flag/600   Series 1 (green)
+  '#a57bba', // Colors/Tertiary-Lavendar/400 Series 2 (lavender)
+  '#f5bd02', // Colors/Secondary-Gold/500    Series 3 (gold)
+  '#2e90fa', // Colors/Blue/500              Series 4 (blue)
+  '#f79009', // Colors/Yellow/500            Series 5 (amber)
+  '#d92d20', // Colors/Red/600               Series 6 (red)
+] as const;
+
+// ─── Root card ────────────────────────────────────────────────────────────────
+/**
+ * Background/background-card (#ffffff / dark #141B34)
+ * Radius/radius-8 = 8px
+ * Padding: p-spacing-xl (16px desktop)
+ */
+export const CARD_BASE =
+  'flex flex-col rounded-[8px] bg-white dark:bg-[#141B34] w-full';
+
+// ─── Divider ──────────────────────────────────────────────────────────────────
+/** Border/border-neutral-primary hairline horizontal rule. */
+export const DIVIDER = 'w-full h-px shrink-0 bg-[#d2d6db] dark:bg-[#374151]';
+
+// ─── Title ────────────────────────────────────────────────────────────────────
+/** Display sm / Bold — Text/text-default */
+export const TITLE_CLASS =
+  'text-display-sm font-[700] text-[#161616] dark:text-[rgba(229,231,235,1)] flex-1 min-w-0';
+
+// ─── Note (subtitle) ──────────────────────────────────────────────────────────
+/** Text md / Regular — Text/text-secondary-paragraph */
+export const NOTE_CLASS =
+  'text-text-md font-[400] text-[#6c737f] dark:text-[#9ca3af] w-full';
+
+// ─── Indicator name ───────────────────────────────────────────────────────────
+/** Text xl / Regular — Text/text-secondary-paragraph */
+export const INDICATOR_NAME_CLASS =
+  'text-text-xl font-[400] text-[#6c737f] dark:text-[#9ca3af] w-full';
+
+// ─── Indicator value ─────────────────────────────────────────────────────────
+/** Display sm / Bold — Text/text-default */
+export const INDICATOR_VALUE_CLASS =
+  'text-display-sm font-[700] text-[#161616] dark:text-[rgba(229,231,235,1)] whitespace-nowrap shrink-0';
+
+/** Display xs / Bold — Text/text-default (compact variant) */
+export const INDICATOR_VALUE_SM_CLASS =
+  'text-display-xs font-[700] text-[#161616] dark:text-[rgba(229,231,235,1)] whitespace-nowrap shrink-0';
+
+// ─── Trend badge ──────────────────────────────────────────────────────────────
+// Trend pill constants live in the shared `ChartBadge` component — consumed here
+// via `<ChartBadge type="increase" | "decrease" value={…} />`.
+
+// ─── Date badge ───────────────────────────────────────────────────────────────
+/** Colors/Neutral/100 pill with calendar icon. */
+export const DATE_BADGE =
+  'flex items-center gap-spacing-sm px-spacing-md py-spacing-xxs rounded-full shrink-0 ' +
+  'bg-[#f3f4f6] dark:bg-[#374151]';
+export const DATE_BADGE_TEXT =
+  'text-text-sm font-[500] text-[#161616] dark:text-[rgba(229,231,235,1)] whitespace-nowrap';
+
+// ─── Icon button (arrow-right) ────────────────────────────────────────────────
+/** Button/button-background-neutral-default, Radius/radius-8 */
+export const ICON_BUTTON =
+  'flex items-center justify-center p-spacing-sm rounded-[8px] shrink-0 ' +
+  'bg-[#f3f4f6] dark:bg-[#374151]';
+
+// ─── Legend square (colored 16×16 square) ─────────────────────────────────────
+export const LEGEND_SQUARE = 'shrink-0 rounded-[2px]';
+
+// ─── Legend item (square + label) ─────────────────────────────────────────────
+export const LEGEND_ITEM = 'flex items-center gap-spacing-md justify-center shrink-0';
+export const LEGEND_LABEL =
+  'text-text-md font-[400] text-[#161616] dark:text-[rgba(229,231,235,1)] whitespace-nowrap';
+
+// ─── Legend item with percentage (DetailRingPanel) ────────────────────────────
+export const LEGEND_WITH_VALUE = 'flex flex-1 flex-col items-center gap-spacing-xxs justify-center min-w-0';
+export const LEGEND_VALUE =
+  'text-text-xl font-[700] text-[#161616] dark:text-[rgba(229,231,235,1)] text-center min-w-full';
+
+// ─── Data row (left-border + label/change/value) ──────────────────────────────
+export const DATA_ROW_WRAPPER = 'flex flex-col gap-spacing-md items-start w-full';
+export const DATA_ROW =
+  'flex items-center gap-spacing-4xl ps-spacing-md border-s-[3px] border-solid w-full';
+export const DATA_ROW_LABEL =
+  'text-text-md font-[400] text-[#6c737f] dark:text-[#9ca3af] whitespace-nowrap shrink-0';
+export const DATA_ROW_CHANGE =
+  'flex-1 text-text-lg font-[500] text-[#6c737f] dark:text-[#9ca3af] min-w-0';
+export const DATA_ROW_VALUE =
+  'text-text-xl font-[700] text-[#161616] dark:text-[rgba(229,231,235,1)] whitespace-nowrap shrink-0';
+
+// ─── SplitProgress label above value ─────────────────────────────────────────
+/** Text lg / Regular — secondary */
+export const SPLIT_LABEL =
+  'text-text-xl font-[400] text-[#6c737f] dark:text-[#9ca3af] w-full';
+
+/** Display xs / Bold — Text/text-default */
+export const SPLIT_VALUE =
+  'text-display-sm font-[700] text-[#161616] dark:text-[rgba(229,231,235,1)] whitespace-nowrap shrink-0';

package/src/components/DonutChartPanel/index.ts

@@ -0,0 +1,9 @@
+export { DonutChartPanel } from './DonutChartPanel';
+export type {
+  DonutChartPanelProps,
+  DonutChartPanelVariant,
+  PanelDataItem,
+  PanelTab,
+  SplitProgressRow,
+  BadgeDirection,
+} from './DonutChartPanel.types';

package/src/components/DraggableItem/DraggableItem.tsx

@@ -0,0 +1,228 @@
+"use client";
+
+import { forwardRef } from "react";
+import { cn } from "../../lib/cn";
+import { Checkbox } from "../Checkbox";
+import type { DraggableItemProps } from "./DraggableItem.types";
+import {
+  AVATAR_IMG,
+  AVATAR_WRAP,
+  DESCRIPTION_TEXT,
+  DRAG_HANDLE_WRAP,
+  END_GROUP,
+  END_TEXT_COL,
+  END_TEXT_ROW,
+  ICON_WRAP,
+  PRIMARY_TEXT,
+  ROOT_BASE,
+  SECONDARY_TEXT,
+  START_GROUP,
+  STATE_BORDER,
+  STATUS_DOT_COLOR,
+  STATUS_DOT_WRAP,
+  TEXT_COL,
+  TEXT_ROW,
+} from './DraggableItem.variants';
+import { DragHandleVerticalIcon } from '../../icons/IconFactory';
+
+function Avatar({ src, alt }: { src?: string; alt?: string }) {
+  if (!src) return null;
+  return (
+    <span data-slot="avatar" className={AVATAR_WRAP}>
+      <img src={src} alt={alt ?? ""} className={AVATAR_IMG} />
+    </span>
+  );
+}
+
+export const DraggableItem = forwardRef<HTMLDivElement, DraggableItemProps>(
+  function DraggableItem(
+    {
+      state,
+      disabled = false,
+      dir,
+      rtl,
+      showDragHandle = true,
+      leadingIcon,
+      checkbox = false,
+      checked = false,
+      indeterminate = false,
+      onCheckedChange,
+      avatarSrc,
+      avatarAlt,
+      startLabel = "Option 1",
+      startSecondary,
+      startDescription = "Description text",
+      endLabel,
+      endSecondary,
+      endDescription,
+      tagSlot,
+      buttonSlot,
+      trailingIcon,
+      statusDot = true,
+      onClick,
+      className,
+      ...rest
+    },
+    ref,
+  ) {
+    const resolvedDir = dir ?? (rtl ? "rtl" : undefined);
+    const resolvedState = disabled ? "disabled" : (state ?? "default");
+    const isDisabled = resolvedState === "disabled";
+
+    const showStartText = Boolean(
+      startLabel || startSecondary || startDescription,
+    );
+    const showEndText = Boolean(endLabel || endSecondary || endDescription);
+
+    return (
+      <div
+        ref={ref}
+        data-slot="draggable-item"
+        data-state={resolvedState}
+        dir={resolvedDir}
+        aria-disabled={isDisabled || undefined}
+        tabIndex={isDisabled || !onClick ? -1 : 0}
+        onClick={isDisabled ? undefined : onClick}
+        className={cn(
+          ROOT_BASE,
+          STATE_BORDER[resolvedState],
+          !isDisabled && onClick && "cursor-pointer",
+          className,
+        )}
+        {...rest}
+      >
+        <div className={START_GROUP} data-slot="start">
+          {/* RTL-only: swap status dot ↔ drag handle positions (driven by dir attr) */}
+          {statusDot ? (
+            <span
+              className={cn(
+                STATUS_DOT_WRAP,
+                STATUS_DOT_COLOR[resolvedState],
+                "hidden rtl:inline-flex",
+              )}
+              data-slot="status-dot"
+              aria-hidden="true"
+            />
+          ) : null}
+
+          {showDragHandle ? (
+            <span
+              data-slot="drag-handle"
+              aria-hidden="true"
+              className={cn(DRAG_HANDLE_WRAP, "inline-flex rtl:hidden")}
+            >
+              <DragHandleVerticalIcon aria-hidden="true" focusable="false" />
+            </span>
+          ) : null}
+
+          {leadingIcon ? (
+            <span
+              className={ICON_WRAP[resolvedState]}
+              data-slot="leading-icon"
+              aria-hidden="true"
+            >
+              {leadingIcon}
+            </span>
+          ) : null}
+
+          {checkbox ? (
+            <span className="shrink-0" data-slot="leading-checkbox">
+              <Checkbox
+                size="sm"
+                checked={checked}
+                indeterminate={indeterminate}
+                disabled={isDisabled}
+                onChange={(e) => onCheckedChange?.(e.target.checked)}
+              />
+            </span>
+          ) : null}
+
+          <Avatar src={avatarSrc} alt={avatarAlt} />
+
+          {showStartText ? (
+            <div className={TEXT_COL} data-slot="start-text">
+              <div className={TEXT_ROW} data-slot="start-text-row">
+                {startLabel ? (
+                  <p className={PRIMARY_TEXT[resolvedState]}>{startLabel}</p>
+                ) : null}
+                {startSecondary ? (
+                  <p className={SECONDARY_TEXT[resolvedState]}>
+                    {startSecondary}
+                  </p>
+                ) : null}
+              </div>
+              {startDescription ? (
+                <p
+                  className={DESCRIPTION_TEXT[resolvedState]}
+                  data-slot="start-description"
+                >
+                  {startDescription}
+                </p>
+              ) : null}
+            </div>
+          ) : null}
+        </div>
+
+        <div className={END_GROUP} data-slot="end">
+          {showEndText ? (
+            <div className={END_TEXT_COL} data-slot="end-text">
+              <div className={END_TEXT_ROW} data-slot="end-text-row">
+                {endSecondary ? (
+                  <p className={SECONDARY_TEXT[resolvedState]}>
+                    {endSecondary}
+                  </p>
+                ) : null}
+                {endLabel ? (
+                  <p className={PRIMARY_TEXT[resolvedState]}>{endLabel}</p>
+                ) : null}
+              </div>
+              {endDescription ? (
+                <p
+                  className={DESCRIPTION_TEXT[resolvedState]}
+                  data-slot="end-description"
+                >
+                  {endDescription}
+                </p>
+              ) : null}
+            </div>
+          ) : null}
+
+          {buttonSlot ? <span data-slot="button">{buttonSlot}</span> : null}
+          {tagSlot ? <span data-slot="tag">{tagSlot}</span> : null}
+
+          {trailingIcon ? (
+            <span
+              className={ICON_WRAP[resolvedState]}
+              data-slot="trailing-icon"
+              aria-hidden="true"
+            >
+              {trailingIcon}
+            </span>
+          ) : null}
+
+          {showDragHandle ? (
+            <span
+              className={cn(DRAG_HANDLE_WRAP, "hidden rtl:inline-flex")}
+              data-slot="drag-handle"
+              aria-hidden="true"
+            >
+              <DragHandleVerticalIcon aria-hidden="true" focusable="false" />
+            </span>
+          ) : null}
+
+          {statusDot ? (
+            <span
+              className={cn(
+                STATUS_DOT_WRAP,
+                STATUS_DOT_COLOR[resolvedState],
+                "inline-flex rtl:hidden",
+              )}
+              data-slot="status-dot"
+              aria-hidden="true"
+            />
+          ) : null}
+        </div>
+      </div>
+    );
+  },
+);

package/src/components/DraggableItem/DraggableItem.types.ts

@@ -0,0 +1,72 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+/** Figma: Default / Focused / Disabled */
+export type DraggableItemState = 'default' | 'focused' | 'disabled';
+
+export interface DraggableItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+  /**
+   * Visual / interaction **state** (see CLAUDE.md: state vs type).
+   * `disabled` forces `state="disabled"`.
+   * @default 'default'
+   */
+  state?: DraggableItemState;
+  /** Disables interaction and applies disabled styling. */
+  disabled?: boolean;
+  /**
+   * Text direction for logical layout. Prefer inheriting from an ancestor;
+   * set explicitly for documentation previews.
+   */
+  dir?: 'ltr' | 'rtl';
+  /**
+   * @deprecated Use `dir="rtl"` instead. When true, sets `dir="rtl"` on the root unless `dir` is passed.
+   */
+  rtl?: boolean;
+
+  /** Shows the drag handle icon. @default true */
+  showDragHandle?: boolean;
+
+  /** Optional icon displayed next to the drag handle (Figma: home-04). */
+  leadingIcon?: ReactNode;
+
+  /**
+   * When true, renders the shared `Checkbox` in the start slot.
+   * Use `checked` / `indeterminate` / `onCheckedChange` to control it.
+   */
+  checkbox?: boolean;
+  /** Checkbox checked state (only used when `checkbox` is true). */
+  checked?: boolean;
+  /** Checkbox indeterminate state (only used when `checkbox` is true). */
+  indeterminate?: boolean;
+  /** Called when the checkbox is toggled (only used when `checkbox` is true). */
+  onCheckedChange?: (checked: boolean) => void;
+
+  /** Optional avatar image shown in the start slot. */
+  avatarSrc?: string;
+  /** Alt text for the avatar image. */
+  avatarAlt?: string;
+
+  /** Primary label in the start text column (Figma: Option 1). */
+  startLabel?: ReactNode;
+  /** Secondary label in the start text row (Figma: Text content). */
+  startSecondary?: ReactNode;
+  /** Description under the start text row (Figma: Description text). */
+  startDescription?: ReactNode;
+
+  /** Primary label in the end text column (mirrors start label). */
+  endLabel?: ReactNode;
+  /** Secondary label in the end text row (mirrors start secondary). */
+  endSecondary?: ReactNode;
+  /** Description under the end text row (mirrors start description). */
+  endDescription?: ReactNode;
+
+  /** Optional tag rendered in the end slot (compose from `Tag`). */
+  tagSlot?: ReactNode;
+  /** Optional action rendered in the end slot (compose from `Button`). */
+  buttonSlot?: ReactNode;
+  /** Optional trailing icon in the end slot (Figma: home-04). */
+  trailingIcon?: ReactNode;
+
+  /** Shows the status dot. @default true */
+  statusDot?: boolean;
+}
+