sdaia-ui 1.0.1

package/src/components/Sparkline/Sparkline.tsx

@@ -0,0 +1,130 @@
+'use client';
+
+import { forwardRef, useId } from 'react';
+import { cn } from '../../lib/cn';
+import type { SparklineProps } from './Sparkline.types';
+import {
+  POSITIVE_COLOR,
+  NEGATIVE_COLOR,
+  POSITIVE_FILL_COLOR,
+  NEGATIVE_FILL_COLOR,
+  LINE_PATHS,
+  FILL_PATHS,
+  LAYERS_WAVES,
+  MARKER_POSITIONS,
+  DOT_CLASSES,
+} from './Sparkline.variants';
+
+// ─── Layers sparkline ─────────────────────────────────────────────────────────
+function LayersSparkline({ trend }: { trend: 'Positive' | 'Negative' }) {
+  const isPositive = trend === 'Positive';
+  return (
+    <svg
+      viewBox="0 0 128 64"
+      xmlns="http://www.w3.org/2000/svg"
+      className="absolute inset-0 w-full h-full"
+      aria-hidden="true"
+    >
+      {LAYERS_WAVES.map((wave, i) => (
+        <path
+          key={i}
+          d={wave.d}
+          fill={isPositive ? wave.opacityPositive : wave.opacityNegative}
+        />
+      ))}
+    </svg>
+  );
+}
+
+// ─── Line sparkline (Wavy / Realistic / Straight) ─────────────────────────────
+function LineSparkline({
+  type,
+  trend,
+  gradientId,
+}: {
+  type: 'Wavy' | 'Realistic' | 'Straight';
+  trend: 'Positive' | 'Negative';
+  gradientId: string;
+}) {
+  const isPositive = trend === 'Positive';
+  const strokeColor = isPositive ? POSITIVE_COLOR : NEGATIVE_COLOR;
+  const fillStopColor = isPositive ? POSITIVE_FILL_COLOR : NEGATIVE_FILL_COLOR;
+  const linePath = LINE_PATHS[type][trend];
+  const fillPath = FILL_PATHS[type][trend];
+  const markerPos = MARKER_POSITIONS[type][trend];
+  const dotClass = DOT_CLASSES[type][trend];
+  const dotBg = isPositive ? POSITIVE_COLOR : NEGATIVE_COLOR;
+
+  return (
+    <>
+      <svg
+        viewBox="0 0 128 64"
+        xmlns="http://www.w3.org/2000/svg"
+        className="absolute inset-0 w-full h-full"
+        aria-hidden="true"
+      >
+        <defs>
+          <linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stopColor={strokeColor} stopOpacity="0.18" />
+            <stop offset="85%" stopColor={strokeColor} stopOpacity="0.04" />
+            <stop offset="100%" stopColor={strokeColor} stopOpacity="0" />
+          </linearGradient>
+        </defs>
+        <path d={fillPath} fill={`url(#${gradientId})`} />
+        <path
+          d={linePath}
+          stroke={strokeColor}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          fill="none"
+        />
+      </svg>
+
+      {/* Marker dot — physical left/top (temporal direction doesn't flip in RTL) */}
+      <div
+        data-slot="marker"
+        className="absolute -translate-x-1/2 -translate-y-1/2 size-[22px]"
+        style={{ left: markerPos.left, top: markerPos.top }}
+      >
+        <div
+          data-slot="marker-dot"
+          className={cn('absolute border-solid border-white', dotClass)}
+          style={{ backgroundColor: dotBg }}
+        />
+      </div>
+    </>
+  );
+}
+
+// ─── Sparkline ────────────────────────────────────────────────────────────────
+export const Sparkline = forwardRef<HTMLDivElement, SparklineProps>(function Sparkline(
+  { type = 'Wavy', trend = 'Positive', dir, className, ...rest },
+  ref,
+) {
+  const uid = useId().replace(/[^a-zA-Z0-9]/g, '');
+  const gradientId = `sparkline-grad-${uid}`;
+  const isLayers = type === 'Layers';
+
+  return (
+    <div
+      ref={ref}
+      dir={dir}
+      data-slot="sparkline"
+      className={cn('relative w-[128px] h-[64px] overflow-hidden', className)}
+      {...rest}
+    >
+      {isLayers ? (
+        <LayersSparkline trend={trend} />
+      ) : (
+        <LineSparkline
+          type={type as 'Wavy' | 'Realistic' | 'Straight'}
+          trend={trend}
+          gradientId={gradientId}
+        />
+      )}
+    </div>
+  );
+});
+
+Sparkline.displayName = 'Sparkline';

package/src/components/Sparkline/Sparkline.types.ts

@@ -0,0 +1,36 @@
+import type { HTMLAttributes } from 'react';
+
+/**
+ * Visual shape of the sparkline.
+ *
+ * - `'Wavy'`      — smooth bezier curve (sine-wave feel)
+ * - `'Realistic'` — jagged zigzag line mimicking real market data
+ * - `'Straight'`  — simple diagonal line (cleanest presentation)
+ * - `'Layers'`    — multiple overlapping wave fills; no marker dot
+ */
+export type SparklineType = 'Realistic' | 'Straight' | 'Layers' | 'Wavy';
+
+/**
+ * Trend direction.
+ *
+ * - `'Positive'` — green palette; line ascends over time
+ * - `'Negative'` — red palette; line descends over time
+ */
+export type SparklineTrend = 'Positive' | 'Negative';
+
+export interface SparklineProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Visual shape of the sparkline.
+   * @default 'Wavy'
+   */
+  type?: SparklineType;
+
+  /**
+   * Trend direction — determines color palette (green vs red) and line direction.
+   * @default 'Positive'
+   */
+  trend?: SparklineTrend;
+
+  /** Layout direction for the containing element. */
+  dir?: 'ltr' | 'rtl';
+}

package/src/components/Sparkline/Sparkline.variants.ts

@@ -0,0 +1,118 @@
+/**
+ * Sparkline.variants.ts
+ *
+ * All SVG path data, colors, and marker positions for the Sparkline widget.
+ * This component is a 128×64 sparkline widget. The full grouped bar chart
+ * (Figma node 5489:77559) is implemented separately as BarChart / Chart.
+ *
+ * Coordinate space for all paths: 128 × 64 (matches the fixed component size).
+ */
+
+// ─── Colors ───────────────────────────────────────────────────────────────────
+// Positive trend: SA-Flag green (semantic — "going up = good")
+export const POSITIVE_COLOR = 'rgba(27,131,84,1)';
+
+// Negative trend: error red (semantic — "going down = bad")
+export const NEGATIVE_COLOR = 'rgba(180,35,24,1)';
+
+// Fill areas use the same hue at very low opacity for the gradient-like area below the line
+export const POSITIVE_FILL_COLOR = 'rgba(27,131,84,0.14)';
+export const NEGATIVE_FILL_COLOR = 'rgba(180,35,24,0.12)';
+
+// ─── SVG Line Paths (128 × 64 coordinate space) ───────────────────────────────
+// Each path is designed so the line passes through the corresponding marker position.
+// Marker positions:
+//   Wavy both:          left=calc(50%+27px)=91,  top=calc(50%-8px)=24
+//   Realistic both:     left=calc(50%+5px)=69,   top=calc(50%+4px)=36
+//   Straight Positive:  left=calc(50%+28px)=92,  top=calc(50%+4px)=36
+//   Straight Negative:  left=calc(50%+27px)=91,  top=calc(50%+3px)=35
+
+export const LINE_PATHS = {
+  Wavy: {
+    Positive: 'M0,45 C25,44 55,34 91,24 C108,20 118,22 128,28',
+    Negative: 'M0,16 C24,14 56,17 91,24 C108,30 118,44 128,54',
+  },
+  Realistic: {
+    Positive:
+      'M0,52 L12,44 L22,50 L32,38 L42,44 L52,32 L62,38 L69,36 L80,28 L90,34 L100,22 L115,30 L128,18',
+    Negative:
+      'M0,14 L12,20 L22,14 L32,28 L40,20 L52,34 L62,28 L69,36 L80,42 L90,36 L100,48 L114,42 L128,54',
+  },
+  Straight: {
+    Positive: 'M0,54 L128,28',
+    Negative: 'M0,12 L128,44',
+  },
+} as const satisfies Record<string, { Positive: string; Negative: string }>;
+
+// ─── SVG Fill Paths (line path closed down to baseline) ───────────────────────
+export const FILL_PATHS = {
+  Wavy: {
+    Positive: `${LINE_PATHS.Wavy.Positive} L128,64 L0,64 Z`,
+    Negative: `${LINE_PATHS.Wavy.Negative} L128,64 L0,64 Z`,
+  },
+  Realistic: {
+    Positive: `${LINE_PATHS.Realistic.Positive} L128,64 L0,64 Z`,
+    Negative: `${LINE_PATHS.Realistic.Negative} L128,64 L0,64 Z`,
+  },
+  Straight: {
+    Positive: `${LINE_PATHS.Straight.Positive} L128,64 L0,64 Z`,
+    Negative: `${LINE_PATHS.Straight.Negative} L128,64 L0,64 Z`,
+  },
+} as const satisfies Record<string, { Positive: string; Negative: string }>;
+
+// ─── Layers SVG Paths ─────────────────────────────────────────────────────────
+// Three overlapping wave fills create the layered landscape effect.
+// No marker dot on Layers type.
+
+export const LAYERS_WAVES = [
+  {
+    d: 'M0,64 C20,48 40,30 64,24 C82,20 104,22 128,20 L128,64 Z',
+    opacityPositive: 'rgba(27,131,84,0.08)',
+    opacityNegative: 'rgba(180,35,24,0.07)',
+  },
+  {
+    d: 'M0,64 C20,56 40,44 64,40 C82,37 104,40 128,42 L128,64 Z',
+    opacityPositive: 'rgba(27,131,84,0.14)',
+    opacityNegative: 'rgba(180,35,24,0.12)',
+  },
+  {
+    d: 'M0,64 C20,60 40,52 64,50 C82,49 104,52 128,56 L128,64 Z',
+    opacityPositive: 'rgba(27,131,84,0.22)',
+    opacityNegative: 'rgba(180,35,24,0.20)',
+  },
+] as const;
+
+// ─── Marker Dot Positions ─────────────────────────────────────────────────────
+// Physical left/top CSS values (not logical — sparkline temporal direction doesn't flip in RTL)
+
+export const MARKER_POSITIONS = {
+  Wavy: {
+    Positive: { left: 'calc(50% + 27px)', top: 'calc(50% - 8px)' },
+    Negative: { left: 'calc(50% + 27px)', top: 'calc(50% - 8px)' },
+  },
+  Realistic: {
+    Positive: { left: 'calc(50% + 5px)', top: 'calc(50% + 4px)' },
+    Negative: { left: 'calc(50% + 5px)', top: 'calc(50% + 4px)' },
+  },
+  Straight: {
+    Positive: { left: 'calc(50% + 28px)', top: 'calc(50% + 4px)' },
+    Negative: { left: 'calc(50% + 27px)', top: 'calc(50% + 3px)' },
+  },
+} as const satisfies Record<string, { Positive: { left: string; top: string }; Negative: { left: string; top: string } }>;
+
+// ─── Marker Dot Shape ─────────────────────────────────────────────────────────
+
+export const DOT_CLASSES = {
+  Wavy: {
+    Positive: 'inset-[13.64%] border-[1.167px] rounded-[233.333px]',
+    Negative: 'inset-[13.64%] border-[1.333px] rounded-[266.667px]',
+  },
+  Realistic: {
+    Positive: 'inset-[22.73%_18.18%_13.64%_18.18%] border-[1.167px] rounded-[233.333px]',
+    Negative: 'inset-[22.73%_18.18%_13.64%_18.18%] border-[1.167px] rounded-[233.333px]',
+  },
+  Straight: {
+    Positive: 'inset-[22.73%_18.18%_13.64%_18.18%] border-[1.167px] rounded-[233.333px]',
+    Negative: 'inset-[13.64%_18.18%_22.73%_18.18%] border-[1.167px] rounded-[233.333px]',
+  },
+} as const satisfies Record<string, { Positive: string; Negative: string }>;

package/src/components/Sparkline/index.ts

@@ -0,0 +1,2 @@
+export { Sparkline } from './Sparkline';
+export type { SparklineProps, SparklineType, SparklineTrend } from './Sparkline.types';

package/src/components/StatusDot/StatusDot.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+import { StatusBadgeIcon } from '../../icons/IconFactory';
+import {
+  BORDER_COLOR,
+  BORDER_WIDTH,
+  ICON_COLOR,
+  ICON_NEUTRAL_BG,
+  ICON_PADDING,
+  ROOT_BASE,
+  SHAPE_RADIUS,
+  STATUS_BG,
+} from './StatusDot.variants';
+import type { StatusDotProps } from './StatusDot.types';
+
+/**
+ * StatusDot — small semantic indicator used on its own or composed inside
+ * Avatars, menu items, cards, etc.
+ *
+ * Two types:
+ *  - `dot`  : solid colored shape (circle/square).
+ *  - `icon` : shape with a status icon (e.g. checkmark badge) inside.
+ */
+export const StatusDot = forwardRef<HTMLSpanElement, StatusDotProps>(
+  function StatusDot(
+    {
+      size = 8,
+      type = 'dot',
+      shape = 'round',
+      status = 'online',
+      background = true,
+      border = true,
+      icon,
+      className,
+      style,
+      'aria-hidden': ariaHidden,
+      ...rest
+    },
+    ref
+  ) {
+    const isIcon = type === 'icon';
+    const useNeutralSurface = isIcon && status === 'neutral';
+
+    return (
+      <span
+        ref={ref}
+        data-slot="status-dot"
+        data-type={type}
+        data-size={size}
+        data-shape={shape}
+        data-status={status}
+        aria-hidden={ariaHidden ?? true}
+        className={cn(
+          ROOT_BASE,
+          SHAPE_RADIUS[shape],
+          isIcon && ICON_PADDING[size],
+          background && (useNeutralSurface ? ICON_NEUTRAL_BG : STATUS_BG[status]),
+          border && BORDER_WIDTH[size],
+          border && BORDER_COLOR,
+          className
+        )}
+        style={{ width: `${size}px`, height: `${size}px`, ...style }}
+        {...rest}
+      >
+        {isIcon && (
+          <span
+            className={cn(
+              'inline-flex h-full w-full items-center justify-center',
+              ICON_COLOR[status]
+            )}
+          >
+            {icon ?? <StatusBadgeIcon aria-hidden="true" />}
+          </span>
+        )}
+      </span>
+    );
+  }
+);
+
+StatusDot.displayName = 'StatusDot';

package/src/components/StatusDot/StatusDot.types.ts

@@ -0,0 +1,35 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+/** Pixel size of the status dot. Matches the Figma size tokens (8 – 32px). */
+export type StatusDotSize = 8 | 10 | 12 | 16 | 20 | 24 | 32;
+
+/** Dot = solid colored shape. Icon = shape with a status icon inside. */
+export type StatusDotType = 'dot' | 'icon';
+
+/** Shape of the outer container. */
+export type StatusDotShape = 'round' | 'square';
+
+/** Semantic status color. */
+export type StatusDotStatus =
+  | 'online'
+  | 'neutral'
+  | 'offline'
+  | 'busy'
+  | 'away';
+
+export interface StatusDotProps extends HTMLAttributes<HTMLSpanElement> {
+  /** Pixel size. Defaults to 8. */
+  size?: StatusDotSize;
+  /** `dot` or `icon`. Defaults to `dot`. */
+  type?: StatusDotType;
+  /** Round or square. Defaults to `round`. */
+  shape?: StatusDotShape;
+  /** Semantic status color. Defaults to `online`. */
+  status?: StatusDotStatus;
+  /** Render the colored background. Defaults to true. */
+  background?: boolean;
+  /** Render the white/dark ring around the dot. Defaults to true. */
+  border?: boolean;
+  /** Custom icon node (replaces the default StatusBadgeIcon when `type="icon"`). */
+  icon?: ReactNode;
+}

package/src/components/StatusDot/StatusDot.variants.ts

@@ -0,0 +1,66 @@
+import type {
+  StatusDotShape,
+  StatusDotSize,
+  StatusDotStatus,
+} from './StatusDot.types';
+
+/** Root base — positions & centers the optional inner icon. */
+export const ROOT_BASE =
+  'inline-flex items-center justify-center shrink-0 align-middle';
+
+/** Shape → border radius of the root. */
+export const SHAPE_RADIUS: Record<StatusDotShape, string> = {
+  round: 'rounded-full',
+  square: 'rounded-[2px]',
+};
+
+/**
+ * Background fill per status for the Dot type and for non-neutral Icon type.
+ * Icon + neutral uses a separate neutral surface (see ICON_NEUTRAL_BG).
+ */
+export const STATUS_BG: Record<StatusDotStatus, string> = {
+  online: 'bg-[rgba(37,147,95,1)]',
+  neutral: 'bg-[rgba(13,18,28,1)]',
+  offline: 'bg-[rgba(157,164,174,1)]',
+  busy: 'bg-[rgba(217,45,32,1)]',
+  away: 'bg-[rgba(254,200,75,1)]',
+};
+
+/** Icon-type neutral variant uses a light/dark surface instead of pure black. */
+export const ICON_NEUTRAL_BG =
+  'bg-[rgba(243,244,246,1)] dark:bg-[rgba(31,41,55,1)]';
+
+/** Icon color per status (only relevant when `type="icon"`). */
+export const ICON_COLOR: Record<StatusDotStatus, string> = {
+  online: 'text-white',
+  neutral: 'text-[rgba(22,22,22,1)] dark:text-[rgba(243,244,246,1)]',
+  offline: 'text-white',
+  busy: 'text-white',
+  away: 'text-[rgba(22,22,22,1)]',
+};
+
+/** Inner padding for the Icon type per size. Dot type has no padding. */
+export const ICON_PADDING: Record<StatusDotSize, string> = {
+  8: 'p-0',
+  10: 'p-0',
+  12: 'p-0',
+  16: 'p-spacing-xxs',
+  20: 'p-spacing-xxs',
+  24: 'p-spacing-xs',
+  32: 'p-spacing-sm',
+};
+
+/** Ring (border) width per size. */
+export const BORDER_WIDTH: Record<StatusDotSize, string> = {
+  8: 'border',
+  10: 'border',
+  12: 'border',
+  16: 'border-2',
+  20: 'border-2',
+  24: 'border-2',
+  32: 'border-2',
+};
+
+/** Border color — white in light mode, matches surface in dark mode. */
+export const BORDER_COLOR =
+  'border-white dark:border-[rgba(17,24,39,1)]';

package/src/components/StatusDot/index.ts

@@ -0,0 +1,8 @@
+export { StatusDot } from './StatusDot';
+export type {
+  StatusDotProps,
+  StatusDotShape,
+  StatusDotSize,
+  StatusDotStatus,
+  StatusDotType,
+} from './StatusDot.types';

package/src/components/StructuredList/StructuredList.tsx

@@ -0,0 +1,79 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+import type { StructuredListProps } from './StructuredList.types';
+
+export const StructuredList = forwardRef<HTMLDivElement, StructuredListProps>(
+  function StructuredList(
+    {
+      columns,
+      compact = false,
+      contained = false,
+      dividerRow = true,
+      dividerColumn = true,
+      dividerHeader = true,
+      rtl = false,
+      className,
+      ...rest
+    },
+    ref,
+  ) {
+    if (!columns || columns.length === 0) return null;
+
+    const rowCount = columns[0]?.rows.length ?? 0;
+
+    return (
+      <div
+        ref={ref}
+        data-slot="structured-list"
+        role="table"
+        dir={rtl ? 'rtl' : undefined}
+        className={cn(
+          'flex w-full min-w-0',
+          contained && 'border border-[rgba(210,214,219,1)] dark:border-[rgba(29,41,57,1)] rounded-[8px] overflow-hidden',
+          className,
+        )}
+        {...rest}
+      >
+        {columns.map((column, colIndex) => (
+          <div
+            key={colIndex}
+            className={cn(
+              'flex flex-col flex-1 min-w-0',
+              dividerColumn && colIndex < columns.length - 1 && 'border-e border-[rgba(210,214,219,1)] dark:border-[rgba(29,41,57,1)]',
+            )}
+          >
+            {/* Header cell */}
+            <div
+              role="columnheader"
+              className={cn(
+                'flex items-center min-h-[48px] px-spacing-xl py-spacing-lg',
+                'text-text-sm font-medium text-[rgba(56,66,80,1)] dark:text-[rgba(209,213,219,1)]',
+                dividerHeader && 'border-b border-[rgba(210,214,219,1)] dark:border-[rgba(29,41,57,1)]',
+              )}
+            >
+              {column.header}
+            </div>
+
+            {/* Data rows */}
+            {column.rows.map((cell, rowIndex) => (
+              <div
+                key={rowIndex}
+                role="cell"
+                className={cn(
+                  'flex items-center px-spacing-xl py-spacing-lg',
+                  'text-text-md font-normal text-[rgba(56,66,80,1)] dark:text-[rgba(229,231,235,1)]',
+                  compact ? 'min-h-[48px]' : 'min-h-[64px]',
+                  dividerRow && rowIndex < rowCount - 1 && 'border-b border-[rgba(210,214,219,1)] dark:border-[rgba(29,41,57,1)]',
+                )}
+              >
+                {cell}
+              </div>
+            ))}
+          </div>
+        ))}
+      </div>
+    );
+  },
+);

package/src/components/StructuredList/StructuredList.types.ts

@@ -0,0 +1,27 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export interface StructuredListColumn {
+  /** Column header text */
+  header: string;
+  /** Row values for this column */
+  rows: (string | ReactNode)[];
+}
+
+export interface StructuredListProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+  /** Array of columns, each with a header and rows */
+  columns: StructuredListColumn[];
+  /** Use compact row height (48px instead of 64px) */
+  compact?: boolean;
+  /** Add border and rounded corners around the list */
+  contained?: boolean;
+  /** Show horizontal dividers between data rows (default: true) */
+  dividerRow?: boolean;
+  /** Show vertical dividers between columns (default: true) */
+  dividerColumn?: boolean;
+  /** Show divider under the header row (default: true) */
+  dividerHeader?: boolean;
+  /** Enable RTL layout */
+  rtl?: boolean;
+  /** Additional class name */
+  className?: string;
+}

package/src/components/StructuredList/index.ts

@@ -0,0 +1,2 @@
+export { StructuredList } from './StructuredList';
+export type { StructuredListProps, StructuredListColumn } from './StructuredList.types';

package/src/components/StructuredListGroup/StructuredListGroup.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+import { forwardRef, Fragment } from 'react';
+import { cn } from '../../lib/cn';
+import { StructuredListHeader } from '../StructuredListHeader';
+import { StructuredListRow } from '../StructuredListRow';
+import type { StructuredListGroupProps } from './StructuredListGroup.types';
+import {
+  ROOT,
+  ROOT_BACKGROUND,
+  ROOT_BORDER,
+  DIVIDER,
+} from './StructuredListGroup.variants';
+
+/**
+ * StructuredListGroup — a vertical stack composed of a `StructuredListHeader`
+ * followed by any number of `StructuredListRow`s, separated by optional dividers
+ * and wrapped in an optional border / background. Accepts either data-driven
+ * `header` + `rows` props or fully custom `children`. RTL-aware via ambient `dir`.
+ */
+export const StructuredListGroup = forwardRef<
+  HTMLDivElement,
+  StructuredListGroupProps
+>(function StructuredListGroup(
+  {
+    header,
+    rows,
+    divider = true,
+    border = false,
+    background = false,
+    compact,
+    children,
+    className,
+    ...rest
+  },
+  ref,
+) {
+  return (
+    <div
+      ref={ref}
+      data-slot="structured-list-group"
+      role="list"
+      className={cn(
+        ROOT,
+        background && ROOT_BACKGROUND,
+        border && ROOT_BORDER,
+        className,
+      )}
+      {...rest}
+    >
+      {children ?? (
+        <>
+          {header && <StructuredListHeader {...header} />}
+          {header && rows && rows.length > 0 && divider && (
+            <div className={DIVIDER} data-slot="group-divider" />
+          )}
+          {rows?.map((row, index) => {
+            const { value, ...rowProps } = row;
+            const key = value ?? String(index);
+            return (
+              <Fragment key={key}>
+                {index > 0 && divider && (
+                  <div className={DIVIDER} data-slot="group-divider" />
+                )}
+                <StructuredListRow
+                  compact={rowProps.compact ?? compact}
+                  {...rowProps}
+                />
+              </Fragment>
+            );
+          })}
+        </>
+      )}
+    </div>
+  );
+});