@coinbase/cds-mcp-server 8.17.2 → 8.17.3

package/mcp-docs/web/components/Scrubber.txt

@@ -0,0 +1,232 @@
+# Scrubber
+
+An interactive scrubber component for exploring individual data points in charts. Displays values on hover or drag and supports custom labels and formatting.
+
+## Import
+
+```jsx
+import { Scrubber } from '@coinbase/cds-web-visualization'
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `BeaconComponent` | `ComponentClass<ScrubberBeaconProps, any> \| FunctionComponent<ScrubberBeaconProps>` | No | `-` | Custom component for the scrubber beacon. |
+| `BeaconLabelComponent` | `ComponentClass<ChartTextProps, any> \| FunctionComponent<ChartTextProps>` | No | `-` | Custom component for the scrubber beacon label. |
+| `LineComponent` | `FunctionComponent<ReferenceLineProps> \| ComponentClass<ReferenceLineProps, any>` | No | `-` | Custom component for the scrubber line. |
+| `classNames` | `{ overlay?: string; beacon?: string \| undefined; line?: string \| undefined; beaconLabel?: string \| undefined; } \| undefined` | No | `-` | Custom class names for scrubber elements. |
+| `hideLine` | `boolean` | No | `-` | Hides the scrubber line |
+| `hideOverlay` | `boolean` | No | `-` | Whether to hide the overlay rect which obscures future data. |
+| `idlePulse` | `boolean` | No | `-` | Pulse the scrubber beacon while it is at rest. |
+| `key` | `Key \| null` | No | `-` | - |
+| `label` | `ChartTextChildren \| ((dataIndex: number) => ChartTextChildren)` | No | `-` | Label text displayed above the scrubber line. |
+| `labelProps` | `ReferenceLineLabelProps` | No | `-` | Props passed to the scrubber lines label. |
+| `lineStroke` | `string` | No | `-` | Stroke color for the scrubber line. |
+| `overlayOffset` | `number` | No | `2` | Offset of the overlay rect relative to the drawing area. Useful for when scrubbing over lines, where the stroke width would cause part of the line to be visible. |
+| `ref` | `((instance: ScrubberBeaconRef \| null) => void) \| RefObject<ScrubberBeaconRef> \| null` | No | `-` | - |
+| `seriesIds` | `string[]` | No | `-` | An array of series IDs that will receive visual emphasis as the user scrubs through the chart. Use this prop to restrict the scrubbing visual behavior to specific series. By default, all series will be highlighted by the Scrubber. |
+| `styles` | `{ overlay?: CSSProperties; beacon?: CSSProperties \| undefined; line?: CSSProperties \| undefined; beaconLabel?: CSSProperties \| undefined; } \| undefined` | No | `-` | Custom styles for scrubber elements. |
+| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
+
+
+## Examples
+
+### Basic Example
+
+Scrubber can be used to provide horizontal interaction with a chart. As your mouse hovers over the chart, you will see a reference line and scrubber head following your cursor.
+
+```jsx live
+<LineChart
+  enableScrubbing
+  height={{ base: 150, tablet: 200, desktop: 250 }}
+  series={[
+    {
+      id: 'prices',
+      data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
+    },
+  ]}
+  curve="monotone"
+  showYAxis
+  showArea
+  yAxis={{
+    showGrid: true,
+  }}
+>
+  <Scrubber />
+</LineChart>
+```
+
+### Multiple Series
+
+All series will be scrubbed by default. You can set the `seriesIds` prop to restrict the scrubbing to specific series.
+
+```jsx live
+<LineChart
+  enableScrubbing
+  height={{ base: 150, tablet: 200, desktop: 250 }}
+  series={[
+    {
+      id: 'top',
+      data: [15, 28, 32, 44, 46, 36, 40, 45, 48, 38],
+    },
+    {
+      id: 'upperMiddle',
+      data: [12, 23, 21, 29, 34, 28, 31, 38, 42, 35],
+      color: '#ef4444',
+      type: 'dotted',
+    },
+    {
+      id: 'lowerMiddle',
+      data: [8, 15, 14, 25, 20, 18, 22, 28, 24, 30],
+      color: '#f59e0b',
+      curve: 'natural',
+      LineComponent: (props) => (
+        <GradientLine {...props} endColor="#F7931A" startColor="#E3D74D" strokeWidth={4} />
+      ),
+    },
+    {
+      id: 'bottom',
+      data: [4, 8, 11, 15, 16, 14, 16, 10, 12, 14],
+      color: '#800080',
+      curve: 'step',
+      AreaComponent: DottedArea,
+      showArea: true,
+    },
+  ]}
+>
+  <Scrubber seriesIds={['top', 'lowerMiddle']} />
+</LineChart>
+```
+
+### Labels
+
+Setting the `label` prop for a series will display a label above the scrubber head.
+
+```jsx live
+<LineChart
+  enableScrubbing
+  height={{ base: 150, tablet: 200, desktop: 250 }}
+  series={[
+    {
+      id: 'prices',
+      data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
+      label: 'Price',
+    },
+  ]}
+  curve="monotone"
+  showArea
+>
+  <Scrubber />
+</LineChart>
+```
+
+### Pulsing
+
+Setting the `idlePulse` prop will cause the scrubber heads to pulse when the user is not actively scrubbing.
+
+```jsx live
+<LineChart
+  enableScrubbing
+  height={{ base: 150, tablet: 200, desktop: 250 }}
+  series={[
+    {
+      id: 'prices',
+      data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
+    },
+  ]}
+  curve="monotone"
+  showArea
+>
+  <Scrubber idlePulse />
+</LineChart>
+```
+
+#### With Imperative Handle
+
+You can also use the imperative handle to pulse the scrubber heads programmatically.
+
+```jsx live
+function ImperativeHandle() {
+  const scrubberRef = useRef(null);
+  return (
+    <VStack gap={2}>
+      <LineChart
+        enableScrubbing
+        height={{ base: 150, tablet: 200, desktop: 250 }}
+        series={[
+          {
+            id: 'priceA',
+            data: [2400, 1398, 9800, 3908, 4800, 3800, 4300],
+            label: 'Price A',
+            color: 'var(--color-accentBoldBlue)',
+            curve: 'natural',
+          },
+          {
+            id: 'priceB',
+            data: [2000, 2491, 4501, 6049, 5019, 4930, 5910],
+            label: 'Price B',
+            color: 'var(--color-accentBoldGreen)',
+            curve: 'natural',
+          },
+          {
+            id: 'priceC',
+            data: [1000, 4910, 2300, 5910, 3940, 2940, 1940],
+            label: 'Price C',
+            color: 'var(--color-accentBoldPurple)',
+            curve: 'natural',
+          },
+          {
+            id: 'priceD',
+            data: [4810, 2030, 5810, 3940, 2940, 1940, 940],
+            label: 'Price D',
+            color: 'var(--color-accentBoldYellow)',
+            curve: 'natural',
+          },
+        ]}
+        xAxis={{
+          range: ({ min, max }) => ({ min, max: max - 32 }),
+        }}
+        showYAxis
+        yAxis={{
+          domain: {
+            min: 0,
+          },
+          showGrid: true,
+          tickLabelFormatter: (value) => value.toLocaleString(),
+        }}
+      >
+        <Scrubber ref={scrubberRef} />
+      </LineChart>
+      <Button onClick={() => scrubberRef.current?.pulse()}>Pulse</Button>
+    </VStack>
+  );
+}
+```
+
+### Disable Overlay When Scrubbing
+
+By default, the scrubber will show an overlay to de-emphasize future data. You can hide this by setting the `hideOverlay` prop to `true`.
+
+```jsx live
+<LineChart
+  enableScrubbing
+  height={{ base: 150, tablet: 200, desktop: 250 }}
+  series={[
+    {
+      id: 'prices',
+      data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
+    },
+  ]}
+  curve="monotone"
+  showYAxis
+  showArea
+  yAxis={{
+    showGrid: true,
+  }}
+>
+  <Scrubber hideOverlay />
+</LineChart>
+```
+
+

package/mcp-docs/web/components/SearchInput.txt

@@ -0,0 +1,118 @@
+# SearchInput
+
+A control for searching a dataset.
+
+## Import
+
+```jsx
+import { SearchInput } from '@coinbase/cds-web/controls/SearchInput'
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `onChangeText` | `(text: string) => void` | Yes | `-` | - |
+| `bordered` | `boolean` | No | `true` | Adds border to input |
+| `clearIconAccessibilityLabel` | `string` | No | `-` | Set the a11y label for the clear icon |
+| `compact` | `boolean` | No | `false` | Enables compact variation |
+| `disabled` | `boolean` | No | `false` | Toggles input interactability and opacity |
+| `enableColorSurge` | `boolean` | No | `-` | Enable Color Surge motion |
+| `end` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `undefined` | Set the end node |
+| `helperTextErrorIconAccessibilityLabel` | `string` | No | `'error'` | Accessibility label for helper text error icon when variant=negative |
+| `hideEndIcon` | `boolean` | No | `undefined` | hide the end icon |
+| `hideStartIcon` | `boolean` | No | `false` | hide the start icon |
+| `key` | `Key \| null` | No | `-` | - |
+| `onChange` | `ChangeEventHandler<HTMLInputElement>` | No | `-` | - |
+| `onClear` | `MouseEventHandler<Element>` | No | `-` | - |
+| `onSearch` | `((str: string) => void)` | No | `-` | Callback is fired when a user hits enter on the keyboard. Can obtain the query through str parameter |
+| `placeholder` | `string` | No | `-` | Placeholder text displayed inside of the input. Will be replaced if there is a value. |
+| `ref` | `((instance: HTMLInputElement \| null) => void) \| RefObject<HTMLInputElement> \| null` | No | `-` | - |
+| `startIcon` | `search \| backArrow` | No | `search` | Set the start icon. You can only set it to search \| backArrow icon. If you set this, the icon would not toggle between search and backArrow depending on the focus state |
+| `startIconAccessibilityLabel` | `string` | No | `-` | Set the a11y label for the start icon |
+| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
+| `testIDMap` | `{ start?: string; end?: string \| undefined; label?: string \| undefined; helperText?: string \| undefined; } \| undefined` | No | `-` | Add ability to test individual parts of the input |
+| `type` | `number \| color \| button \| search \| time \| image \| text \| hidden \| string & {} \| email \| checkbox \| radio \| tel \| url \| date \| submit \| reset \| datetime-local \| file \| month \| password \| range \| week` | No | `-` | - |
+| `value` | `string \| (readonly string[] & string)` | No | `-` | The **value** property of the HTMLInputElement interface represents the current value of the input element as a string.  [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLInputElement/value) |
+| `width` | `((Width<string \| number> \| { base?: Width<string \| number>; phone?: Width<string \| number> \| undefined; tablet?: Width<string \| number> \| undefined; desktop?: Width<string \| number> \| undefined; }) & (string \| number)) \| undefined` | No | `100%` | Width of input as a percentage string. |
+
+
+## Examples
+
+### Basic usage
+
+```tsx live
+function BasicSearchInput() {
+  const [value, setValue] = useState('');
+  return (
+    <VStack gap={2}>
+      <SearchInput
+        value={value}
+        onChangeText={setValue}
+        onClear={() => setValue('')}
+        onSearch={(searchTerm) => console.log('Searching for:', searchTerm)}
+        placeholder="Search..."
+      />
+      <Text color="foregroundMuted" font="caption">
+        Press Enter to trigger search
+      </Text>
+    </VStack>
+  );
+}
+```
+
+### Variants
+
+```tsx live
+function SearchInputVariants() {
+  const [value1, setValue1] = useState('');
+  const [value2, setValue2] = useState('');
+  const [value3, setValue3] = useState('');
+
+  return (
+    <VStack gap={2}>
+      <SearchInput
+        value={value1}
+        onChangeText={setValue1}
+        onClear={() => setValue1('')}
+        placeholder="Compact search..."
+        compact
+      />
+      <SearchInput
+        value={value2}
+        onChangeText={setValue2}
+        onClear={() => setValue2('')}
+        placeholder="Borderless search..."
+        bordered={false}
+      />
+      <SearchInput
+        value={value3}
+        onChangeText={setValue3}
+        onClear={() => setValue3('')}
+        placeholder="No icons..."
+        hideStartIcon
+        hideEndIcon
+      />
+    </VStack>
+  );
+}
+```
+
+### With Custom End Element
+
+```tsx live
+function CustomEndSearchInput() {
+  const [value, setValue] = useState('');
+  return (
+    <SearchInput
+      value={value}
+      onChangeText={setValue}
+      onClear={() => setValue('')}
+      placeholder="Custom end element..."
+      end={<InputIconButton name="filter" onClick={() => console.log('Filter clicked')} />}
+    />
+  );
+}
+```
+
+

package/mcp-docs/web/components/SectionHeader.txt

@@ -0,0 +1,218 @@
+# SectionHeader
+
+A header component used to organize and label sections of content, with support for icons, descriptions, and additional content.
+
+## Import
+
+```jsx
+import { SectionHeader } from '@coinbase/cds-web/section-header/SectionHeader'
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `title` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | Yes | `-` | Text or ReactNode to be displayed in Title |
+| `alignContent` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| baseline \| first baseline \| last baseline \| space-between \| space-around \| space-evenly>` | No | `-` | - |
+| `alignItems` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
+| `alignSelf` | `ResponsiveProp<center \| normal \| auto \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
+| `as` | `div` | No | `-` | - |
+| `aspectRatio` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
+| `background` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | - |
+| `balance` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | ReactNode or IconName to present balances wherever it is necessary |
+| `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
+| `borderBottomRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
+| `borderBottomWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
+| `borderColor` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | - |
+| `borderEndWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
+| `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
+| `borderStartWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
+| `borderTopLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
+| `borderTopRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
+| `borderTopWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
+| `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
+| `bordered` | `boolean` | No | `-` | Add a border around all sides of the box. |
+| `borderedBottom` | `boolean` | No | `-` | Add a border to the bottom side of the box. |
+| `borderedEnd` | `boolean` | No | `-` | Add a border to the trailing side of the box. |
+| `borderedHorizontal` | `boolean` | No | `-` | Add a border to the leading and trailing sides of the box. |
+| `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
+| `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
+| `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
+| `bottom` | `ResponsiveProp<Bottom<string \| number>>` | No | `-` | - |
+| `color` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | - |
+| `columnGap` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
+| `dangerouslySetBackground` | `string` | No | `-` | - |
+| `description` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | ReactNode to display up to 2 lines of copy that frames the sections purpose and relevance |
+| `display` | `ResponsiveProp<grid \| revert \| none \| block \| inline \| inline-block \| flex \| inline-flex \| inline-grid \| contents \| flow-root \| list-item>` | No | `-` | - |
+| `elevation` | `0 \| 1 \| 2` | No | `-` | - |
+| `end` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | - |
+| `flexBasis` | `ResponsiveProp<FlexBasis<string \| number>>` | No | `-` | - |
+| `flexDirection` | `ResponsiveProp<column \| row \| row-reverse \| column-reverse>` | No | `-` | - |
+| `flexGrow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
+| `flexShrink` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
+| `flexWrap` | `ResponsiveProp<nowrap \| wrap \| wrap-reverse>` | No | `-` | - |
+| `font` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
+| `fontFamily` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
+| `fontSize` | `ResponsiveProp<FontSize \| inherit>` | No | `-` | - |
+| `fontWeight` | `ResponsiveProp<FontWeight \| inherit>` | No | `-` | - |
+| `gap` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
+| `grid` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
+| `gridArea` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
+| `gridAutoColumns` | `ResponsiveProp<GridAutoColumns<string \| number>>` | No | `-` | - |
+| `gridAutoFlow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| row \| column \| dense` | No | `-` | - |
+| `gridAutoRows` | `ResponsiveProp<GridAutoRows<string \| number>>` | No | `-` | - |
+| `gridColumn` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
+| `gridColumnEnd` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
+| `gridColumnStart` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
+| `gridRow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
+| `gridRowEnd` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
+| `gridRowStart` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
+| `gridTemplate` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
+| `gridTemplateAreas` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
+| `gridTemplateColumns` | `ResponsiveProp<GridTemplateColumns<string \| number>>` | No | `-` | - |
+| `gridTemplateRows` | `ResponsiveProp<GridTemplateRows<string \| number>>` | No | `-` | - |
+| `height` | `ResponsiveProp<Height<string \| number>>` | No | `-` | - |
+| `icon` | `string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| null` | No | `-` | - |
+| `iconActive` | `boolean` | No | `-` | Whether the icon is active |
+| `justifyContent` | `ResponsiveProp<left \| right \| center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| space-between \| space-around \| space-evenly>` | No | `-` | - |
+| `key` | `Key \| null` | No | `-` | - |
+| `left` | `ResponsiveProp<Left<string \| number>>` | No | `-` | - |
+| `lineHeight` | `ResponsiveProp<LineHeight \| inherit>` | No | `-` | - |
+| `margin` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
+| `marginBottom` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
+| `marginEnd` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
+| `marginStart` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
+| `marginTop` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
+| `marginX` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
+| `marginY` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
+| `maxHeight` | `ResponsiveProp<MaxHeight<string \| number>>` | No | `-` | - |
+| `maxWidth` | `ResponsiveProp<MaxWidth<string \| number>>` | No | `-` | - |
+| `minHeight` | `ResponsiveProp<MinHeight<string \| number>>` | No | `-` | - |
+| `minWidth` | `ResponsiveProp<MinWidth<string \| number>>` | No | `-` | - |
+| `onChange` | `FormEventHandler<HTMLDivElement>` | No | `-` | - |
+| `opacity` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
+| `overflow` | `ResponsiveProp<hidden \| auto \| visible \| clip \| scroll>` | No | `-` | - |
+| `padding` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
+| `paddingBottom` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
+| `paddingEnd` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
+| `paddingStart` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
+| `paddingTop` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
+| `paddingX` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
+| `paddingY` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
+| `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
+| `position` | `ResponsiveProp<fixed \| static \| relative \| absolute \| sticky>` | No | `-` | - |
+| `ref` | `RefObject<HTMLDivElement> \| ((instance: HTMLDivElement \| null) => void) \| null` | No | `-` | - |
+| `right` | `ResponsiveProp<Right<string \| number>>` | No | `-` | - |
+| `rowGap` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
+| `start` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | - |
+| `style` | `CSSProperties` | No | `-` | - |
+| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
+| `textAlign` | `ResponsiveProp<center \| start \| end \| justify>` | No | `-` | - |
+| `textDecoration` | `ResponsiveProp<none \| underline \| overline \| line-through \| underline overline \| underline double>` | No | `-` | - |
+| `textTransform` | `ResponsiveProp<capitalize \| lowercase \| none \| uppercase>` | No | `-` | - |
+| `top` | `ResponsiveProp<Top<string \| number>>` | No | `-` | - |
+| `transform` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
+| `userSelect` | `ResponsiveProp<text \| none \| auto \| all>` | No | `-` | - |
+| `visibility` | `ResponsiveProp<hidden \| visible>` | No | `-` | - |
+| `width` | `ResponsiveProp<Width<string \| number>>` | No | `-` | - |
+| `zIndex` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
+
+
+## Examples
+
+### Basic usage
+
+```tsx live
+<SectionHeader title="Basic Section Header" />
+```
+
+### With Description
+
+```tsx live
+<SectionHeader
+  title="Section with Description"
+  description="This is a helpful description that provides more context about this section. It can span multiple lines and will be truncated after two lines of text if it's too long."
+/>
+```
+
+### With Icons
+
+```tsx live
+<VStack gap={2}>
+  <SectionHeader title="Start Icon Example" start={<Icon active name="star" />} />
+  <SectionHeader
+    title="Info Icon Example"
+    icon="info-circle"
+    description="The info icon is automatically sized and colored"
+  />
+</VStack>
+```
+
+### With Balance and Actions
+
+```tsx live
+<VStack gap={2}>
+  <SectionHeader
+    title="Account Balance"
+    balance="$1,234.56"
+    end={
+      <Button variant="secondary" compact onClick={() => console.log('View history')}>
+        View History
+      </Button>
+    }
+  />
+  <SectionHeader
+    title="Portfolio Value"
+    balance="$5,678.90"
+    description="Total value across all accounts"
+    end={
+      <HStack gap={1}>
+        <Button variant="secondary" compact onClick={() => console.log('Export')}>
+          Export
+        </Button>
+        <Button variant="primary" compact onClick={() => console.log('Details')}>
+          Details
+        </Button>
+      </HStack>
+    }
+  />
+</VStack>
+```
+
+### Layout Customization
+
+```tsx live
+<VStack gap={2}>
+  {/* Custom spacing */}
+  <SectionHeader
+    title="Custom Padding"
+    description="Modified padding and gap"
+    paddingX={6}
+    paddingY={3}
+    gap={2}
+  />
+
+  {/* Custom background and borders */}
+  <SectionHeader
+    title="Styled Background"
+    description="With custom background and border radius"
+    background="bgSecondary"
+    borderRadius={2}
+    paddingX={4}
+  />
+
+  {/* Custom alignment */}
+  <SectionHeader
+    title="Center Aligned"
+    description="Content centered instead of space-between"
+    justifyContent="center"
+    end={
+      <Button variant="secondary" compact onClick={() => console.log('Action')}>
+        Action
+      </Button>
+    }
+  />
+</VStack>
+```
+
+