@krapwoo/ds-viewer 0.1.1 → 0.2.0

package/starter-kit/components/SectionHeader/SectionHeader.catalog.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { defineCatalogPage } from '@krapwoo/ds-viewer';
+import { SectionHeader } from './SectionHeader';
+
+export default defineCatalogPage({
+  component: 'SectionHeader',
+  group: 'Layout',
+  description: 'An uppercase muted section label with an optional inline icon and a right-aligned ghost button.',
+  whenToUse: "A label above a group of related rows within a screen (e.g. above a List) — for the screen's own top bar, use TopNav.",
+  a11y: 'Title renders as plain Text — no heading role. A tappable labelIcon (onPress set) becomes accessibilityRole="button" with accessibilityLabel falling back to the section\'s own title; a non-interactive labelIcon has no accessibility node of its own. The trailing button is a real Button, so it carries Button\'s own accessibility for free.',
+  variants: {
+    itemsFill: true,
+    items: [
+      { key: 'title-only', name: 'Title only', node: <SectionHeader title="Nearby stations" /> },
+      {
+        key: 'with-icon',
+        name: 'With icon',
+        node: <SectionHeader title="Trip details" labelIcon={{ name: 'info-circle', accessibilityLabel: 'About trip details' }} />,
+      },
+      {
+        key: 'with-button',
+        name: 'With trailing button',
+        node: <SectionHeader title="Saved places" trailingButtonLabel="See all" onTrailingButtonPress={() => {}} />,
+      },
+    ],
+  },
+  states: {
+    itemsFill: true,
+    items: [
+      {
+        key: 'tappable-icon',
+        name: 'Tappable icon',
+        node: (
+          <SectionHeader
+            title="Delays"
+            labelIcon={{ name: 'info-circle', onPress: () => {}, accessibilityLabel: 'What causes delays' }}
+          />
+        ),
+      },
+      {
+        key: 'icon-and-button',
+        name: 'Icon + trailing button',
+        // This instance demonstrates the 'trailing' (default) icon position — tagged so
+        // checkCompleteness sees both enum values covered, not just the 'leading' one below.
+        props: { trailingButtonIconPosition: 'trailing' },
+        node: (
+          <SectionHeader
+            title="Alerts"
+            labelIcon={{ name: 'bell' }}
+            trailingButtonLabel="Manage"
+            trailingButtonIconName="chevron-right"
+            onTrailingButtonPress={() => {}}
+          />
+        ),
+      },
+      {
+        key: 'leading-icon-position',
+        name: 'Trailing button, leading icon',
+        props: { trailingButtonIconPosition: 'leading' },
+        node: (
+          <SectionHeader
+            title="Saved places"
+            trailingButtonLabel="Add"
+            trailingButtonIconName="add"
+            trailingButtonIconPosition="leading"
+            onTrailingButtonPress={() => {}}
+          />
+        ),
+      },
+    ],
+  },
+});

package/starter-kit/components/SectionHeader/SectionHeader.tsx

@@ -0,0 +1,139 @@
+import React, { useState } from 'react';
+import {
+  View,
+  Text,
+  Pressable,
+  StyleSheet,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { DS_SEMANTIC, DS_SPACING, DS_TYPOGRAPHY, DS_FONT_WEIGHT, DS_RADIUS } from '../../tokens';
+import { Icon } from '../../icons/Icon.native';
+import type { IconName } from '../../icons';
+import { Button } from '../Button';
+
+// Bumped up from the global 2px default — at this icon's small 16px render size, a default-weight
+// stroke reads noticeably thinner than the bold (semibold, uppercase) label text it sits beside;
+// this brings its visual weight in line with that text, the same reasoning Checkbox's own
+// thicker check icon uses for a small glyph that needs to read clearly next to bold UI.
+const LABEL_ICON_STROKE_WIDTH = 2.5;
+
+export interface SectionHeaderLabelIcon {
+  name: IconName;
+  /** Render size in points. Defaults to 16 — matching the trailing button's own small-size icon
+   *  (Button's `small` SIZE_TOKENS) and the row's own 16px line-height, so the row reads at a
+   *  consistent height whether the label icon or the trailing button is the one present. */
+  size?: number;
+  /** When provided the icon is wrapped in a Pressable; omit for a non-interactive decoration. */
+  onPress?: () => void;
+  accessibilityLabel?: string;
+}
+
+export interface SectionHeaderProps {
+  /** Section label text. */
+  title: string;
+  /**
+   * Icon shown right after the title text with a 4 px gap.
+   * Pass `onPress` to make it tappable (e.g. info); omit for a static decoration (e.g. pin).
+   */
+  labelIcon?: SectionHeaderLabelIcon;
+  /** Label for a right-aligned ghost button. */
+  trailingButtonLabel?: string;
+  /** Icon to show on the trailing button. */
+  trailingButtonIconName?: IconName;
+  /** Whether the icon appears before or after the button label (default: 'trailing'). */
+  trailingButtonIconPosition?: 'leading' | 'trailing';
+  /** Called when the trailing button is pressed. */
+  onTrailingButtonPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+/** An uppercase muted section label with an optional inline icon and a right-aligned ghost button. */
+export function SectionHeader({
+  title,
+  labelIcon,
+  trailingButtonLabel,
+  trailingButtonIconName,
+  trailingButtonIconPosition = 'trailing',
+  onTrailingButtonPress,
+  style,
+}: SectionHeaderProps) {
+  const [iconFocused, setIconFocused] = useState(false);
+  const iconEl = labelIcon ? (
+    labelIcon.onPress ? (
+      <Pressable
+        onPress={labelIcon.onPress}
+        onFocus={() => setIconFocused(true)}
+        onBlur={() => setIconFocused(false)}
+        // Pads the ~16px icon out to the 44pt touch-target minimum.
+        hitSlop={14}
+        accessibilityRole="button"
+        accessibilityLabel={labelIcon.accessibilityLabel ?? title}
+        // Keyboard focus shows the same highlight as a press (same policy as ListItem/SegmentedToggle).
+        style={({ pressed }) => [styles.labelIconPressable, (pressed || iconFocused) && styles.labelIconPressed]}
+      >
+        <Icon name={labelIcon.name} size={labelIcon.size ?? 16} color={DS_SEMANTIC.text.muted} strokeWidth={LABEL_ICON_STROKE_WIDTH} />
+      </Pressable>
+    ) : (
+      <Icon name={labelIcon.name} size={labelIcon.size ?? 16} color={DS_SEMANTIC.text.muted} strokeWidth={LABEL_ICON_STROKE_WIDTH} />
+    )
+  ) : null;
+
+  return (
+    <View style={[styles.container, style]}>
+      <View style={styles.left}>
+        <View style={styles.titleGroup}>
+          <Text style={styles.title} numberOfLines={1}>
+            {title}
+          </Text>
+          {iconEl}
+        </View>
+      </View>
+      {trailingButtonLabel ? (
+        <Button
+          label={trailingButtonLabel}
+          variant="ghost"
+          size="small"
+          showIcon={!!trailingButtonIconName}
+          iconName={trailingButtonIconName}
+          iconPosition={trailingButtonIconPosition}
+          onPress={onTrailingButtonPress}
+        />
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    width: '100%',
+  },
+  left: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  titleGroup: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: DS_SPACING[200],
+  },
+  title: {
+    fontSize: DS_TYPOGRAPHY.labelXs.fontSize,
+    fontWeight: DS_FONT_WEIGHT.semibold,
+    color: DS_SEMANTIC.text.muted,
+    textTransform: 'uppercase',
+    // Match the tallest trailing control (16px small button icon / labelIcon) so the row height is
+    // constant whether or not a button/icon is present — otherwise toggling them changes the header
+    // height and shifts the content beneath it.
+    lineHeight: 16,
+  },
+  labelIconPressable: {
+    borderRadius: DS_RADIUS.round,
+  },
+  labelIconPressed: {
+    backgroundColor: DS_SEMANTIC.interaction.pressed,
+  },
+});

package/starter-kit/components/SectionHeader/index.ts

@@ -0,0 +1,2 @@
+export { SectionHeader } from './SectionHeader';
+export type { SectionHeaderProps, SectionHeaderLabelIcon } from './SectionHeader';

package/starter-kit/components/SegmentedToggle/SegmentedToggle.catalog.tsx

@@ -0,0 +1,31 @@
+import React, { useState } from 'react';
+import { defineCatalogPage } from '@krapwoo/ds-viewer';
+import { SegmentedToggle } from './SegmentedToggle';
+
+function SegmentedToggleDemo() {
+  const [value, setValue] = useState('map');
+  return (
+    <SegmentedToggle
+      value={value}
+      onChange={setValue}
+      options={[
+        { value: 'map', label: 'Map', iconName: 'map' },
+        { value: 'list', label: 'List', iconName: 'menu' },
+        { value: 'saved', label: 'Saved', iconName: 'bell', badge: 3 },
+        // Label-only segment (no iconName) — the layout every other option's icon would otherwise hide.
+        { value: 'settings', label: 'Settings' },
+      ]}
+    />
+  );
+}
+
+export default defineCatalogPage({
+  component: 'SegmentedToggle',
+  group: 'Selection',
+  // Phone width plus a small phone, where long labels truncate.
+  previewWidths: [402, 320],
+  description: 'A row of mutually-exclusive options on a recessed track, with a white thumb that slides to the selected segment. Two or more options.',
+  whenToUse: 'A filled, heavier-weight control for a primary, prominent choice on the screen. For quieter secondary navigation, use UnderlineTabs.',
+  a11y: 'The row is accessibilityRole="tablist"; each segment is a "tab" with accessibilityState.selected reflecting the current value.',
+  render: () => <SegmentedToggleDemo />,
+});

package/starter-kit/components/SegmentedToggle/SegmentedToggle.tsx

@@ -0,0 +1,163 @@
+import React, { useState } from 'react';
+import { View, Text, Pressable, Animated, I18nManager, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import { DS_SEMANTIC, DS_SPACING, DS_RADIUS, DS_TYPOGRAPHY, DS_ICON_SIZE, DS_SHADOW, DS_A11Y_MIN_TOUCH_TARGET } from '../../tokens';
+import { Icon } from '../../icons/Icon.native';
+import type { IconName } from '../../icons';
+import { useSlideAnim } from './useSlideAnim';
+
+export interface SegmentedToggleOption {
+  value: string;
+  label: string;
+  /** Optional leading icon (16px) shown before the label. */
+  iconName?: IconName;
+  /** Optional count shown in a circular badge after the label (hidden when 0/undefined). */
+  badge?: number;
+}
+
+export interface SegmentedToggleProps {
+  /** The segments. */
+  options: SegmentedToggleOption[];
+  /** The currently-selected option `value`. */
+  value: string;
+  /** Selection handler. */
+  onChange: (value: string) => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+const TRACK_PADDING = DS_SPACING[100]; // recessed track inset
+const GAP = DS_SPACING[100]; // space between segment slots
+const THUMB_INSET = DS_SPACING[100]; // shrinks the thumb inside its slot for breathing room
+const TRACK_COLOR = DS_SEMANTIC.surface.recessed; // track background — matches the secondary Button fill
+const THUMB_COLOR = DS_SEMANTIC.surface.white; // selected thumb (white pill)
+
+/**
+ * Segmented control — a row of mutually-exclusive options on a recessed track. A white "thumb" lifts
+ * the selected option and slides horizontally between segments on change. The thumb sits inset from its
+ * slot so there's a little gap around it. Two or more options.
+ */
+export function SegmentedToggle({ options, value, onChange, style }: SegmentedToggleProps) {
+  const n = options.length;
+  const selectedIndex = Math.max(0, options.findIndex(o => o.value === value));
+  const [trackW, setTrackW] = useState(0);
+  // Which segment currently holds keyboard focus (null = none) — one state for the whole row, since
+  // only one segment can be focused at a time.
+  const [focusedValue, setFocusedValue] = useState<string | null>(null);
+  // Fixed equal-width segments computed analytically, so translateX-only can stay native-driven.
+  const anim = useSlideAnim(selectedIndex, true);
+
+  const innerW = Math.max(0, trackW - TRACK_PADDING * 2);
+  const segW = n > 0 ? (innerW - GAP * (n - 1)) / n : 0;
+  const thumbW = Math.max(0, segW - THUMB_INSET * 2);
+  // Left edge of the thumb at each index (segment left + inset). `track`'s `flexDirection: 'row'`
+  // auto-mirrors the segments themselves in RTL, but this absolute-positioned thumb's `left`/
+  // `translateX` doesn't — so in RTL, index `i` visually renders at the *mirrored* slot (n-1-i).
+  const thumbX =
+    n > 1
+      ? anim.interpolate({
+          inputRange: options.map((_, i) => i),
+          outputRange: options.map((_, i) => {
+            const slot = I18nManager.isRTL ? n - 1 - i : i;
+            return TRACK_PADDING + slot * (segW + GAP) + THUMB_INSET;
+          }),
+        })
+      : TRACK_PADDING + THUMB_INSET;
+
+  return (
+    <View
+      style={[styles.track, style]}
+      onLayout={e => setTrackW(e.nativeEvent.layout.width)}
+      accessibilityRole="tablist"
+    >
+      {trackW > 0 && (
+        <Animated.View
+          pointerEvents="none"
+          style={[styles.thumb, { width: thumbW, transform: [{ translateX: thumbX }] }]}
+        />
+      )}
+      {options.map(opt => {
+        const selected = opt.value === value;
+        // Black label on the white thumb when selected; muted on the recessed track otherwise.
+        const color = selected ? DS_SEMANTIC.text.regular : DS_SEMANTIC.text.muted;
+        // The badge is a filled circle of the label colour; its number is white so it stays legible on
+        // both the black (selected) and muted-grey (unselected) circle.
+        const onColor = DS_SEMANTIC.surface.white;
+        return (
+          <Pressable
+            key={opt.value}
+            onPress={() => onChange(opt.value)}
+            onFocus={() => setFocusedValue(opt.value)}
+            onBlur={() => setFocusedValue(prev => (prev === opt.value ? null : prev))}
+            accessibilityRole="tab"
+            accessibilityLabel={opt.badge != null && opt.badge > 0 ? `${opt.label}, ${opt.badge}` : opt.label}
+            accessibilityState={{ selected }}
+            // Keyboard focus shows the same highlight as a press — a flat in-track target has no
+            // border to recolor, so focus mirrors the pressed treatment (same policy as ListItem).
+            style={({ pressed }) => [styles.segment, (pressed || focusedValue === opt.value) && styles.segmentPressed]}
+          >
+            {opt.iconName && <Icon name={opt.iconName} size={DS_ICON_SIZE.sm} color={color} />}
+            <Text style={[styles.label, { color }]}>{opt.label}</Text>
+            {opt.badge != null && opt.badge > 0 && (
+              <View style={[styles.badge, { backgroundColor: color }]}>
+                <Text style={[styles.badgeText, { color: onColor }]}>{opt.badge}</Text>
+              </View>
+            )}
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  track: {
+    flexDirection: 'row',
+    backgroundColor: TRACK_COLOR,
+    borderRadius: DS_RADIUS.round,
+    padding: TRACK_PADDING,
+    gap: GAP,
+  },
+  // The lifted pill behind the selected segment — slides horizontally on change.
+  thumb: {
+    position: 'absolute',
+    left: 0,
+    top: TRACK_PADDING + THUMB_INSET,
+    bottom: TRACK_PADDING + THUMB_INSET,
+    backgroundColor: THUMB_COLOR,
+    borderRadius: DS_RADIUS.round,
+    ...DS_SHADOW.resting,
+  },
+  segment: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: DS_SPACING[200],
+    paddingVertical: DS_SPACING[600],
+    // The track's own padding + this segment's content otherwise falls short of the touch-target
+    // minimum; a fixed floor (not a spacing token — this is an accessibility guideline number, not a
+    // design choice) keeps the segment's compact visual padding while still guaranteeing a tappable size.
+    minHeight: DS_A11Y_MIN_TOUCH_TARGET,
+  },
+  segmentPressed: {
+    backgroundColor: DS_SEMANTIC.interaction.pressed,
+    borderRadius: DS_RADIUS.round,
+  },
+  label: {
+    // Matches the section-header label size (labelXs) it stands in for.
+    ...DS_TYPOGRAPHY.labelXs,
+  },
+  // Fixed-diameter circle so the count badge stays round. 18 doesn't match a DS_SPACING/DS_ICON_SIZE
+  // step (16/20 are the neighbors) — sized to comfortably fit a 1-2 digit count at labelXs.
+  badge: {
+    width: 18,
+    height: 18,
+    borderRadius: DS_RADIUS.round,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  badgeText: {
+    ...DS_TYPOGRAPHY.labelXs,
+    // Pinned to the badge's own 18px diameter (above) so the count sits centered in the circle.
+    lineHeight: 18,
+  },
+});

package/starter-kit/components/SegmentedToggle/index.ts

@@ -0,0 +1,2 @@
+export { SegmentedToggle } from './SegmentedToggle';
+export type { SegmentedToggleProps, SegmentedToggleOption } from './SegmentedToggle';

package/starter-kit/components/SegmentedToggle/useSlideAnim.ts

@@ -0,0 +1,29 @@
+import { useEffect, useRef } from 'react';
+import { Animated, Easing } from 'react-native';
+import { DS_MOTION_DURATION, DS_MOTION_EASING } from '../../tokens';
+
+/** How long the selection indicator takes to slide to its new position. */
+export const SLIDE_ANIM_MS = DS_MOTION_DURATION.base;
+
+/**
+ * Shared by SegmentedToggle and UnderlineTabs: an Animated.Value that eases to `selectedIndex`
+ * whenever it changes. Each component still does its own position math (SegmentedToggle computes
+ * fixed equal-width segments analytically; UnderlineTabs measures each tab's real width via onLayout)
+ * — those differ enough between the two that unifying them isn't safe to do blindly, but the "animate
+ * to the new index" mechanics underneath were byte-identical, so that part is shared here.
+ */
+export function useSlideAnim(selectedIndex: number, useNativeDriver: boolean) {
+  const anim = useRef(new Animated.Value(selectedIndex)).current;
+
+  useEffect(() => {
+    Animated.timing(anim, {
+      toValue: selectedIndex,
+      duration: SLIDE_ANIM_MS,
+      // `standard` — a move that starts and ends on screen (a toggle/swap), per DS_MOTION_EASING_USE.
+      easing: Easing.bezier(...DS_MOTION_EASING.standard),
+      useNativeDriver,
+    }).start();
+  }, [selectedIndex, anim, useNativeDriver]);
+
+  return anim;
+}

package/starter-kit/components/Shimmer/Breathing.catalog.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { defineCatalogPage } from '@krapwoo/ds-viewer';
+import { Breathing } from './Shimmer';
+import { DS_RADIUS, DS_SEMANTIC } from '../../tokens';
+
+const styles = StyleSheet.create({
+  block: { width: 160, height: 16, borderRadius: DS_RADIUS.small },
+});
+
+export default defineCatalogPage({
+  component: 'Breathing',
+  group: 'Feedback',
+  description:
+    "The shared animated primitive behind Shimmer — a solid block that breathes between a low and high colour on one shared, module-level clock, so every Breathing/Shimmer instance on screen stays phase-locked instead of drifting out of sync. Exported so a custom composite skeleton can reuse the same pulse directly instead of going through Shimmer's fixed text/circle/container shapes.",
+  a11y: 'Renders a plain Animated.View with no role by default — pass accessibilityRole="progressbar" and accessibilityLabel yourself, the same way Shimmer does internally for its own standalone (non-grouped) blocks.',
+  variants: {
+    itemsFill: true,
+    items: [
+      { key: 'default', name: 'Default', node: <Breathing style={styles.block} /> },
+      {
+        key: 'custom-colors',
+        name: 'Custom colours',
+        props: { low: DS_SEMANTIC.shade.info, high: DS_SEMANTIC.emphasis.info },
+        node: <Breathing style={styles.block} low={DS_SEMANTIC.shade.info} high={DS_SEMANTIC.emphasis.info} />,
+      },
+    ],
+  },
+});

package/starter-kit/components/Shimmer/Shimmer.catalog.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { defineCatalogPage } from '@krapwoo/ds-viewer';
+import { Shimmer, SkeletonGroup } from './Shimmer';
+import { DS_SPACING } from '../../tokens';
+
+const styles = StyleSheet.create({
+  shimmerLines: { flex: 1, gap: DS_SPACING[400] },
+  previewRow: { flexDirection: 'row', alignItems: 'center', gap: DS_SPACING[600] },
+});
+
+export default defineCatalogPage({
+  component: 'Shimmer',
+  group: 'Feedback',
+  description: 'Loading placeholders that breathe while content loads. `text` stands in for one line of text (an element with 3 lines gets 3 stacked `text` Shimmers, not one tall one), `circle` is always for a circular element, and `container` covers everything else (Card, Banner, image, …) — sized to match the real element it replaces, not an arbitrary block. When several stand in for one element, wrap them in `SkeletonGroup`.',
+  whenToUse: 'A composite skeleton (several Shimmers standing in for one element) → wrap them in SkeletonGroup so it announces "Loading" once, not once per block. A single lone Shimmer needs no wrapper — it announces on its own.',
+  a11y: 'A standalone Shimmer is exposed as accessibilityRole="progressbar" + accessibilityLabel="Loading". Inside a SkeletonGroup, each block goes silent and the group carries one busy "Loading" announcement for the whole skeleton — so a screen reader says "Loading" once, not once per block.',
+  // One standalone example per `variant` enum value (`text` is the default, so it comes first),
+  // plus the composed "Circle + text" usage — shown here too, not just under States, so Variants
+  // reads as complete on its own.
+  variants: {
+    itemsFill: true,
+    items: [
+      { key: 'text', name: 'Text (one line)', props: { variant: 'text' }, node: <Shimmer variant="text" width={160} /> },
+      { key: 'circle', name: 'Circle', props: { variant: 'circle' }, node: <Shimmer variant="circle" size={40} /> },
+      {
+        key: 'container',
+        name: 'Container (matches Card)',
+        props: { variant: 'container' },
+        // Same radius Card itself renders at (DS_RADIUS.medium, via dimensionsForVariant) and a
+        // plausible real Card content height — a container skeleton should reserve the same
+        // layout space the real element will occupy, not an arbitrary block.
+        node: <Shimmer variant="container" height={96} />,
+      },
+      {
+        key: 'circle-and-text',
+        name: 'Circle + text (2 lines)',
+        // SkeletonGroup so the whole avatar+2-lines skeleton announces "Loading" once, not three
+        // times (one per block) — it carries the caller's row layout itself.
+        node: (
+          <SkeletonGroup style={styles.previewRow}>
+            <Shimmer variant="circle" size={40} />
+            {/* Last line ~70% of the others' width — see ShimmerProps.variant's `'text'` doc. */}
+            <View style={styles.shimmerLines}>
+              <Shimmer variant="text" width={160} />
+              <Shimmer variant="text" width={112} />
+            </View>
+          </SkeletonGroup>
+        ),
+      },
+    ],
+  },
+  // Repeated here (not just in Variants) so States / Configurations is independently complete too.
+  states: {
+    itemsFill: true,
+    items: [
+      {
+        key: 'circle-and-text',
+        name: 'Circle + text (2 lines)',
+        // SkeletonGroup so the whole avatar+2-lines skeleton announces "Loading" once, not three
+        // times (one per block) — it carries the caller's row layout itself.
+        node: (
+          <SkeletonGroup style={styles.previewRow}>
+            <Shimmer variant="circle" size={40} />
+            {/* Last line ~70% of the others' width — see ShimmerProps.variant's `'text'` doc. */}
+            <View style={styles.shimmerLines}>
+              <Shimmer variant="text" width={160} />
+              <Shimmer variant="text" width={112} />
+            </View>
+          </SkeletonGroup>
+        ),
+      },
+      {
+        key: 'three-lines',
+        name: 'Three lines of text',
+        node: (
+          // Explicit px widths (not "100%") specifically so the last line's 70% ratio is a real,
+          // checkable relationship to the other two, not two independent percentages. Wrapped in a
+          // SkeletonGroup so all three lines announce as one "Loading" region.
+          <SkeletonGroup style={styles.shimmerLines}>
+            <Shimmer variant="text" width={200} />
+            <Shimmer variant="text" width={200} />
+            <Shimmer variant="text" width={140} />
+          </SkeletonGroup>
+        ),
+      },
+    ],
+  },
+});