@neo4j-ndl/react 4.16.8 → 4.16.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-ndl/react",
-  "version": "4.16.8",
+  "version": "4.16.9",
   "sideEffects": false,
   "description": "React implementation of Neo4j Design System",
   "keywords": [
@@ -354,7 +354,8 @@
   },
   "files": [
     "lib",
-    "icons"
+    "icons",
+    "skills"
   ],
   "publishConfig": {
     "access": "public"
@@ -427,6 +428,8 @@
   "scripts": {
     "generate-component": "node ./scripts/component-generator.js",
     "docs:generate": "pnpm --dir ../.. run docs:generate -- --package react",
+    "docs:generate-skills": "pnpm --dir ../.. run docs:generate-skills -- --package react",
+    "docs:generate-all": "pnpm run docs:generate && pnpm run docs:generate-skills",
     "generate:exports": "node ./scripts/generate-exports.js",
     "check:exports": "node ./scripts/generate-exports.js --check",
     "pretest": "pnpm run lint && pnpm run check:exports",

package/skills/ndl-react/SKILL.md

@@ -0,0 +1,152 @@
+---
+name: ndl-react
+description: >-
+  Build and edit UI with the Neo4j Needle React design system
+  (@neo4j-ndl/react). Use when adding, composing, or modifying Needle components
+  in a React app. Provides per-component props, accessibility requirements, and
+  runnable usage examples. Works with any agent that supports skills (Cursor,
+  Claude, etc.).
+---
+
+# Neo4j Needle (@neo4j-ndl/react)
+
+> 📌 Shipped with `@neo4j-ndl/react`. Once installed into your repo (e.g. via
+> `npx skills add`) this folder is detached from the package — the installed
+> package (TypeScript types in `node_modules/@neo4j-ndl/react`) is the source of
+> truth.
+
+Use Neo4j Needle components instead of hand-rolling equivalent UI.
+
+## Setup
+
+- Import the base stylesheet once at the app root (if not already wired):
+  `import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';`
+- Import components from `@neo4j-ndl/react`; some live under the
+  `@neo4j-ndl/react/next` and `@neo4j-ndl/react/ai` subpaths (see the catalog).
+- Prefer icons exported from `@neo4j-ndl/react/icons` (e.g.
+  `MagnifyingGlassIconOutline`) for design-system parity.
+
+## Rules
+
+- **Never hallucinate props.** Before using any prop — including common-sounding
+  ones like `size`, `tone`, or `shadow` — confirm it appears in the component's
+  doc here or in the package's TypeScript types. Do not assume APIs from other
+  libraries (MUI, Radix, Chakra). If something is unclear, ask the user — or when
+  running unattended, prefer the TypeScript types and omit the uncertain prop
+  rather than guessing.
+- These docs are the primary source for props, accessibility, and examples. The
+  package's `.d.ts` type contract is authoritative: if the types disagree with
+  these docs, the **types win**. Do not reverse-engineer behavior from the
+  compiled implementation source in `node_modules`.
+- Pass native HTML attributes, `aria-*`, and `data-*` via the `htmlAttributes`
+  prop, only where the component's doc says so.
+- Compound components are exposed as subcomponents (e.g. `Tooltip.Trigger`,
+  `Tooltip.Content`). Follow each component's own doc — don't assume one
+  component's compound shape matches another's.
+- Follow the accessibility guidance in each component's doc; don't strip built-in
+  roles or keyboard behavior.
+
+## How to use this skill
+
+1. Find the component in the catalog below to get its docs file and import path.
+2. Read `components/<file>` for that component's props, accessibility
+   requirements, and runnable examples; prefer those examples.
+
+## Components
+
+Import from `@neo4j-ndl/react`.
+
+| Component | Docs | Accessibility | Examples |
+|-----------|------|---------------|----------|
+| `Accordion` | [components/accordion.md](components/accordion.md) | ✅ | 6 |
+| `Avatar` | [components/avatar.md](components/avatar.md) | ✅ | 7 |
+| `Banner` | [components/banner.md](components/banner.md) | ✅ | 6 |
+| `Box` | [components/box.md](components/box.md) |  | 1 |
+| `Breadcrumbs` | [components/breadcrumbs.md](components/breadcrumbs.md) | ✅ | 4 |
+| `Checkbox` | [components/checkbox.md](components/checkbox.md) | ✅ | 9 |
+| `CleanIconButton` | [components/clean-icon-button.md](components/clean-icon-button.md) | ✅ | 8 |
+| `ClipboardButton` | [components/clipboard-button.md](components/clipboard-button.md) |  | 7 |
+| `Code` | [components/code.md](components/code.md) | ✅ | 2 |
+| `CodeBlock` | [components/code-block.md](components/code-block.md) |  | 8 |
+| `ColorPicker` | [components/color-picker.md](components/color-picker.md) |  | 3 |
+| `ConditionalWrap` | [components/conditional-wrap.md](components/conditional-wrap.md) |  | 1 |
+| `DataGrid` | [components/data-grid.md](components/data-grid.md) |  | 20 |
+| `DatePicker` | [components/date-picker.md](components/date-picker.md) | ✅ | 14 |
+| `Dialog` | [components/dialog.md](components/dialog.md) | ✅ | 7 |
+| `DismissibleTag` | [components/dismissible-tag.md](components/dismissible-tag.md) |  | 4 |
+| `Divider` | [components/divider.md](components/divider.md) |  | 3 |
+| `Drawer` | [components/drawer.md](components/drawer.md) | ✅ | 8 |
+| `DropdownButton` | [components/dropdown-button.md](components/dropdown-button.md) |  | 7 |
+| `Dropzone` | [components/dropzone.md](components/dropzone.md) |  | 6 |
+| `FilledButton` | [components/filled-button.md](components/filled-button.md) |  | 0 |
+| `Flex` | [components/flex.md](components/flex.md) |  | 1 |
+| `GraphLabel` | [components/graph-label.md](components/graph-label.md) |  | 7 |
+| `IconButton` | [components/icon-button.md](components/icon-button.md) | ✅ | 7 |
+| `IconButtonArrayComponent` | [components/icon-button-array.md](components/icon-button-array.md) |  | 5 |
+| `InlineEdit` | [components/inline-edit.md](components/inline-edit.md) | ✅ | 9 |
+| `Kbd` | [components/kbd.md](components/kbd.md) | ✅ | 2 |
+| `LoadingBar` | [components/loading-bar.md](components/loading-bar.md) |  | 2 |
+| `LoadingSpinner` | [components/loading-spinner.md](components/loading-spinner.md) | ✅ | 2 |
+| `Logo` | [components/logo.md](components/logo.md) |  | 3 |
+| `Menu` | [components/menu.md](components/menu.md) | ✅ | 13 |
+| `Modal` | [components/modal.md](components/modal.md) | ✅ | 0 |
+| `OutlinedButton` | [components/outlined-button.md](components/outlined-button.md) |  | 0 |
+| `Popover` | [components/popover.md](components/popover.md) | ✅ | 6 |
+| `ProgressBar` | [components/progress-bar.md](components/progress-bar.md) | ✅ | 3 |
+| `Radio` | [components/radio.md](components/radio.md) | ✅ | 7 |
+| `ReadOnlyTag` | [components/read-only-tag.md](components/read-only-tag.md) |  | 4 |
+| `SegmentedControl` | [components/segmented-control.md](components/segmented-control.md) | ✅ | 5 |
+| `Select` | [components/select.md](components/select.md) |  | 13 |
+| `SelectIconButton` | [components/select-icon-button.md](components/select-icon-button.md) |  | 4 |
+| `SelectableTag` | [components/selectable-tag.md](components/selectable-tag.md) |  | 6 |
+| `SideNavigation` | [components/side-navigation.md](components/side-navigation.md) |  | 4 |
+| `Skeleton` | [components/skeleton.md](components/skeleton.md) |  | 5 |
+| `Slider` | [components/slider.md](components/slider.md) | ✅ | 8 |
+| `Spotlight` | [components/spotlight.md](components/spotlight.md) | ✅ | 9 |
+| `StatusIndicator` | [components/status-indicator.md](components/status-indicator.md) | ✅ | 1 |
+| `StatusLabel` | [components/status-label.md](components/status-label.md) |  | 4 |
+| `Switch` | [components/switch.md](components/switch.md) | ✅ | 7 |
+| `Tabs` | [components/tabs.md](components/tabs.md) | ✅ | 7 |
+| `Tag` | [components/tag.md](components/tag.md) |  | 2 |
+| `TextArea` | [components/text-area.md](components/text-area.md) | ✅ | 8 |
+| `TextButton` | [components/text-button.md](components/text-button.md) |  | 0 |
+| `TextInput` | [components/text-input.md](components/text-input.md) | ✅ | 16 |
+| `TextLink` | [components/text-link.md](components/text-link.md) | ✅ | 5 |
+| `TimePicker` | [components/time-picker.md](components/time-picker.md) |  | 4 |
+| `TimeZonePicker` | [components/timezone-picker.md](components/timezone-picker.md) |  | 9 |
+| `Tooltip` | [components/tooltip.md](components/tooltip.md) | ✅ | 13 |
+| `TreeView` | [components/tree-view.md](components/tree-view.md) |  | 3 |
+| `Typography` | [components/typography.md](components/typography.md) |  | 3 |
+| `Wizard` | [components/wizard.md](components/wizard.md) |  | 5 |
+
+## Next components
+
+Import from `@neo4j-ndl/react/next`.
+
+Next-generation components, imported from the `@neo4j-ndl/react/next` subpath. A `next` component may share a name with a stable one (e.g. `TreeView`) but is a **distinct** implementation with its own API — import it from this subpath, and do not mix it with the same-named default component.
+
+| Component | Docs | Accessibility | Examples |
+|-----------|------|---------------|----------|
+| `TreeView` | [components/next/tree-view.md](components/next/tree-view.md) | ✅ | 8 |
+
+## AI components
+
+Import from `@neo4j-ndl/react/ai`.
+
+Building blocks for AI chat / agent UIs, imported from the `@neo4j-ndl/react/ai` subpath.
+
+| Component | Docs | Accessibility | Examples |
+|-----------|------|---------------|----------|
+| `CodePreview` | [components/ai/code-preview.md](components/ai/code-preview.md) |  | 4 |
+| `FileTag` | [components/ai/file-tag.md](components/ai/file-tag.md) |  | 3 |
+| `ImageTag` | [components/ai/image-tag.md](components/ai/image-tag.md) |  | 3 |
+| `MoreFilesComponent` | [components/ai/more-files.md](components/ai/more-files.md) |  | 1 |
+| `Presence` | [components/ai/presence.md](components/ai/presence.md) |  | 2 |
+| `Preview` | [components/ai/preview.md](components/ai/preview.md) |  | 9 |
+| `Prompt` | [components/ai/prompt.md](components/ai/prompt.md) |  | 6 |
+| `Reasoning` | [components/ai/reasoning.md](components/ai/reasoning.md) |  | 1 |
+| `Response` | [components/ai/response.md](components/ai/response.md) |  | 7 |
+| `Suggestion` | [components/ai/suggestion.md](components/ai/suggestion.md) |  | 4 |
+| `Thinking` | [components/ai/thinking.md](components/ai/thinking.md) |  | 2 |
+| `ToolCall` | [components/ai/tool-call.md](components/ai/tool-call.md) |  | 2 |
+| `UserBubbleComponent` | [components/ai/user-bubble.md](components/ai/user-bubble.md) |  | 4 |

package/skills/ndl-react/components/accordion.md

@@ -0,0 +1,386 @@
+# Accordion
+
+Import: `import { Accordion } from '@neo4j-ndl/react'`
+
+## Props
+
+### Accordion
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `as` | `ElementType<any, keyof IntrinsicElements>` |  |  | An override of the default HTML tag of the root of the component. Can also be another React component. |
+| `children` | `ReactNode` | ✅ |  | The content to display inside the accordion. Should only be `<Accordion.Item>` or `<Accordion.CleanItem>`. |
+| `expandedItemId` | `AccordionItemId \| null` | ✅ |  | The id of the expanded accordion item. Only applicable if `isMultiple` is `false`. |
+| `expandedItemIds` | `T[]` | ✅ |  | The ids of the expanded accordion items. Only applicable if `isMultiple` is `true`. |
+| `isMultiple` | `boolean \| undefined` | ✅ |  | Whether multiple accordion items can be open at the same time. |
+| `onChange` | `((expandedItemIds: T[]) => void) \| ((expandedItemId: T \| null) => void)` | ✅ |  | Callback function on component item expand/collapse change. |
+| `ref` | `any` |  |  | A ref to apply to the root element. |
+
+Where `T` is of the type `string | number | undefined`.
+
+### Accordion.CleanItem
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `arrowPosition` | `'leading' \| 'trailing'` |  | `leading` | The position of the arrow. |
+| `as` | `ElementType<any, keyof IntrinsicElements>` |  |  | An override of the default HTML tag of the root of the component. Can also be another React component. |
+| `children` | `ReactNode` |  |  |  |
+| `headingLevel` | `1 \| 2 \| 3 \| 4 \| 5 \| 6` |  | `2` | The heading level for the accordion item title (1–6). Defaults to 2. |
+| `isDisabled` | `boolean` |  | `false` | Whether the accordion item is disabled. |
+| `itemId` | `AccordionItemId` | ✅ |  | The id of the accordion item. |
+| `onExpandedChange` | `(expanded: boolean) => void` |  |  | Callback function on accordion item expand/collapse change. |
+| `ref` | `any` |  |  | A ref to apply to the root element. |
+| `title` | `string` | ✅ |  | The title of the accordion item. |
+| `titleTypographyVariant` | `'body-large' \| 'body-medium' \| 'body-small' \| 'code' \| 'display' \| 'label' \| 'subheading-large' \| 'subheading-medium' \| 'subheading-small' \| 'title-1' \| 'title-2' \| 'title-3' \| 'title-4'` |  | `subheading-medium` | The typography variant for the title. |
+| `trailingContent` | `ReactNode` |  |  | The content to display on the trailing side of accordion item. |
+
+Where `T` is of the type `string | number | undefined`.
+
+### Accordion.Item
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `arrowPosition` | `'leading' \| 'trailing'` |  | `leading` | The position of the arrow. |
+| `as` | `ElementType<any, keyof IntrinsicElements>` |  |  | An override of the default HTML tag of the root of the component. Can also be another React component. |
+| `children` | `ReactNode` |  |  |  |
+| `headingLevel` | `1 \| 2 \| 3 \| 4 \| 5 \| 6` |  | `2` | The heading level for the accordion item title (1–6). Defaults to 2. |
+| `isDisabled` | `boolean` |  | `false` | Whether the accordion item is disabled. |
+| `itemId` | `AccordionItemId` | ✅ |  | The id of the accordion item. |
+| `onExpandedChange` | `(expanded: boolean) => void` |  |  | Callback function on accordion item expand/collapse change. |
+| `ref` | `any` |  |  | A ref to apply to the root element. |
+| `title` | `string` | ✅ |  | The title of the accordion item. |
+
+Where `T` is of the type `string | number | undefined`.
+
+`TypographyVariants` is of the type `'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'subheading-large' | 'subheading-medium' | 'subheading-small' | 'body-large' | 'body-medium' | 'body-small' | 'code' | 'label'`.
+
+## Accessibility
+
+## Implementation guidelines
+
+Each accordion item is a tabbable element. You can also use the arrow keys to navigate through the accordion items. `Space` or `Enter` can be used to expand or collapse the accordion item. Interactive elements within expanded accordion items integrate into the tab order automatically.
+Be sure to align the heading level of the accordion item title with the heading structure of the page.
+
+## Examples
+
+### Clean Items Expanded
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { Accordion } from '@neo4j-ndl/react';
+import { useState } from 'react';
+
+type AccordionItemId = React.ComponentProps<
+  typeof Accordion.CleanItem
+>['itemId'];
+
+const Component = () => {
+  const itemIds = ['item-1', 'item-2', 'item-3', 'item-4'];
+
+  const [expandedItemId, setExpandedItemId] = useState<AccordionItemId | null>(
+    null,
+  );
+
+  const onChange = (expandedItemId: AccordionItemId | null) =>
+    setExpandedItemId(expandedItemId);
+
+  return (
+    <Accordion
+      expandedItemId={expandedItemId}
+      isMultiple={false}
+      onChange={onChange}
+    >
+      <Accordion.CleanItem
+        itemId={itemIds[0]}
+        title={`Accordion ${itemIds[0]}`}
+      >
+        {itemIds[0]}
+      </Accordion.CleanItem>
+      <Accordion.CleanItem
+        itemId={itemIds[1]}
+        title={`Accordion ${itemIds[1]}`}
+      >
+        {itemIds[1]}
+      </Accordion.CleanItem>
+      <Accordion.CleanItem
+        itemId={itemIds[2]}
+        title={`Accordion ${itemIds[2]}`}
+      >
+        {itemIds[2]}
+      </Accordion.CleanItem>
+      <Accordion.CleanItem
+        itemId={itemIds[3]}
+        title={`Accordion ${itemIds[3]}`}
+      >
+        {itemIds[3]}
+      </Accordion.CleanItem>
+    </Accordion>
+  );
+};
+
+export default Component;
+```
+
+### Default Expanded
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { Accordion } from '@neo4j-ndl/react';
+import { useState } from 'react';
+
+type AccordionItemId = React.ComponentProps<typeof Accordion.Item>['itemId'];
+
+const Component = () => {
+  const itemIds = ['item-1', 'item-2', 'item-3', 'item-4'];
+
+  const [expandedItemId, setExpandedItemId] = useState<AccordionItemId | null>(
+    undefined,
+  );
+
+  const onChange = (expandedItemId: AccordionItemId | null) =>
+    setExpandedItemId(expandedItemId);
+
+  return (
+    <Accordion
+      expandedItemId={expandedItemId}
+      isMultiple={undefined}
+      onChange={onChange}
+    >
+      <Accordion.Item itemId={itemIds[0]} title={`Accordion ${itemIds[0]}`}>
+        {itemIds[0]}
+      </Accordion.Item>
+      <Accordion.Item itemId={itemIds[1]} title={`Accordion ${itemIds[1]}`}>
+        {itemIds[1]}
+      </Accordion.Item>
+      <Accordion.Item itemId={itemIds[2]} title={`Accordion ${itemIds[2]}`}>
+        {itemIds[2]}
+      </Accordion.Item>
+      <Accordion.Item itemId={itemIds[3]} title={`Accordion ${itemIds[3]}`}>
+        {itemIds[3]}
+      </Accordion.Item>
+    </Accordion>
+  );
+};
+
+export default Component;
+```
+
+### Full
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { Accordion, Checkbox } from '@neo4j-ndl/react';
+import { useState } from 'react';
+
+type AccordionItemId = React.ComponentProps<
+  typeof Accordion.CleanItem
+>['itemId'];
+
+const Component = () => {
+  const itemIds = ['item-1', 'item-2', 'item-3', 'item-4'];
+
+  const [expandedItemIds, setExpandedItemIds] = useState<AccordionItemId[]>([
+    itemIds[1],
+  ]);
+
+  const onChange = (expandedItemIds: AccordionItemId[]) =>
+    setExpandedItemIds(expandedItemIds);
+
+  const onExpandedChange = (hasExpanded: boolean) =>
+    console.info(`Expanded change: ${hasExpanded}`);
+
+  return (
+    <Accordion
+      expandedItemIds={expandedItemIds}
+      isMultiple={true}
+      onChange={onChange}
+    >
+      <Accordion.CleanItem
+        itemId={itemIds[0]}
+        title={`Accordion ${itemIds[0]}`}
+      >
+        {itemIds[0]}
+      </Accordion.CleanItem>
+      <Accordion.CleanItem
+        arrowPosition="trailing"
+        isDisabled={false}
+        itemId={itemIds[1]}
+        onExpandedChange={onExpandedChange}
+        trailingContent={<Checkbox label="Right content" />}
+        title={`Accordion ${itemIds[1]}`}
+        titleTypographyVariant="title-4"
+      >
+        {itemIds[1]}
+      </Accordion.CleanItem>
+      <Accordion.CleanItem
+        itemId={itemIds[2]}
+        title={`Accordion ${itemIds[2]}`}
+      >
+        {itemIds[2]}
+      </Accordion.CleanItem>
+      <Accordion.CleanItem
+        itemId={itemIds[3]}
+        title={`Accordion ${itemIds[3]}`}
+      >
+        {itemIds[3]}
+      </Accordion.CleanItem>
+    </Accordion>
+  );
+};
+
+export default Component;
+```
+
+### Multiple Expanded
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { Accordion } from '@neo4j-ndl/react';
+import { useState } from 'react';
+
+type AccordionItemId = React.ComponentProps<typeof Accordion.Item>['itemId'];
+
+const Component = () => {
+  const itemIds = ['item-1', 'item-2', 'item-3', 'item-4'];
+
+  const [expandedItemIds, setExpandedItemIds] = useState<AccordionItemId[]>([
+    itemIds[0],
+    itemIds[2],
+  ]);
+
+  const onChange = (expandedItemIds: AccordionItemId[]) =>
+    setExpandedItemIds(expandedItemIds);
+
+  return (
+    <Accordion
+      expandedItemIds={expandedItemIds}
+      isMultiple={true}
+      onChange={onChange}
+    >
+      <Accordion.Item itemId={itemIds[0]} title={`Accordion ${itemIds[0]}`}>
+        {itemIds[0]}
+      </Accordion.Item>
+      <Accordion.Item itemId={itemIds[1]} title={`Accordion ${itemIds[1]}`}>
+        {itemIds[1]}
+      </Accordion.Item>
+      <Accordion.Item itemId={itemIds[2]} title={`Accordion ${itemIds[2]}`}>
+        {itemIds[2]}
+      </Accordion.Item>
+      <Accordion.Item itemId={itemIds[3]} title={`Accordion ${itemIds[3]}`}>
+        {itemIds[3]}
+      </Accordion.Item>
+    </Accordion>
+  );
+};
+
+export default Component;
+```
+
+### Right Content
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { Accordion, Checkbox } from '@neo4j-ndl/react';
+import { useState } from 'react';
+
+type AccordionItemId = React.ComponentProps<
+  typeof Accordion.CleanItem
+>['itemId'];
+
+const Component = () => {
+  const itemIds = ['item-1', 'item-2', 'item-3', 'item-4'];
+
+  const [expandedItemId, setExpandedItemId] = useState<AccordionItemId | null>(
+    undefined,
+  );
+
+  const onChange = (expandedItemId: AccordionItemId | null) =>
+    setExpandedItemId(expandedItemId);
+
+  return (
+    <Accordion
+      expandedItemId={expandedItemId}
+      isMultiple={undefined}
+      onChange={onChange}
+    >
+      <Accordion.CleanItem
+        itemId={itemIds[0]}
+        title={`Accordion ${itemIds[0]}`}
+        trailingContent={<Checkbox label="Right content" />}
+      >
+        {itemIds[0]}
+      </Accordion.CleanItem>
+      <Accordion.CleanItem
+        itemId={itemIds[1]}
+        title={`Accordion ${itemIds[1]}`}
+      >
+        {itemIds[1]}
+      </Accordion.CleanItem>
+      <Accordion.CleanItem
+        itemId={itemIds[2]}
+        title={`Accordion ${itemIds[2]}`}
+      >
+        {itemIds[2]}
+      </Accordion.CleanItem>
+      <Accordion.CleanItem
+        itemId={itemIds[3]}
+        title={`Accordion ${itemIds[3]}`}
+      >
+        {itemIds[3]}
+      </Accordion.CleanItem>
+    </Accordion>
+  );
+};
+
+export default Component;
+```
+
+### Single Expanded
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { Accordion } from '@neo4j-ndl/react';
+import { useState } from 'react';
+
+type AccordionItemId = React.ComponentProps<typeof Accordion.Item>['itemId'];
+
+const Component = () => {
+  const itemIds = ['item-1', 'item-2', 'item-3', 'item-4'];
+
+  const [expandedItemId, setExpandedItemId] = useState<AccordionItemId | null>(
+    itemIds[1],
+  );
+
+  const onChange = (expandedItemId: AccordionItemId | null) =>
+    setExpandedItemId(expandedItemId);
+
+  return (
+    <Accordion
+      expandedItemId={expandedItemId}
+      isMultiple={false}
+      onChange={onChange}
+    >
+      <Accordion.Item itemId={itemIds[0]} title={`Accordion ${itemIds[0]}`}>
+        {itemIds[0]}
+      </Accordion.Item>
+      <Accordion.Item itemId={itemIds[1]} title={`Accordion ${itemIds[1]}`}>
+        {itemIds[1]}
+      </Accordion.Item>
+      <Accordion.Item itemId={itemIds[2]} title={`Accordion ${itemIds[2]}`}>
+        {itemIds[2]}
+      </Accordion.Item>
+      <Accordion.Item itemId={itemIds[3]} title={`Accordion ${itemIds[3]}`}>
+        {itemIds[3]}
+      </Accordion.Item>
+    </Accordion>
+  );
+};
+
+export default Component;
+```

package/skills/ndl-react/components/ai/code-preview.md

@@ -0,0 +1,128 @@
+# CodePreview
+
+Import: `import { CodePreview } from '@neo4j-ndl/react/ai'`
+
+## Props
+
+### CodePreview
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `code` | `string` | ✅ |  | The code content to display |
+| `headerActions` | `ReactNode` |  |  | The actions to display in the header. Should be small CleanIconButton components. |
+| `isLoading` | `boolean` |  | `false` | Whether the code block is loading |
+| `label` | `'read' \| 'write'` |  |  | The current state of the code block |
+| `language` | `'asciidoc' \| 'bash' \| 'c' \| 'csharp' \| 'css-extras' \| 'css' \| 'cypher' \| 'docker' \| 'go' \| 'graphql' \| 'java' \| 'javadoc' \| 'javascript' \| 'json' \| 'jsx' \| 'kotlin' \| 'php' \| 'python' \| 'regex' \| 'rust' \| 'sql' \| 'text' \| 'typescript' \| 'xml' \| 'yaml'` | ✅ |  | The language of the code (e.g., 'cypher', 'python', 'javascript') |
+| `ref` | `Ref<HTMLDivElement>` |  |  | A ref to apply to the root element. |
+| `theme` | `'ndl-code-dark' \| 'ndl-code-light'` |  |  | The theme of the code block |
+
+## Examples
+
+### Languages
+
+```tsx
+import { CodePreview } from '@neo4j-ndl/react/ai';
+
+const pythonCode = `def show_functions(username, function_type='ALL'):
+    """
+    Show functions executable by user
+    """
+    query = f"SHOW {function_type} FUNCTIONS EXECUTABLE BY {username}"
+    return query`;
+
+export const Component = () => {
+  return <CodePreview code={pythonCode} language="python" />;
+};
+
+export default Component;
+```
+
+### Loading
+
+```tsx
+import { CodePreview } from '@neo4j-ndl/react/ai';
+
+export const Component = () => {
+  return <CodePreview code="" language="cypher" isLoading={true} />;
+};
+
+export default Component;
+```
+
+### Read
+
+```tsx
+import { OutlinedButton } from '@neo4j-ndl/react';
+import { CodePreview } from '@neo4j-ndl/react/ai';
+import { PencilSquareIconOutline } from '@neo4j-ndl/react/icons';
+
+const cypherCode = `SHOW [ALL|BUILT IN|USER DEFINED] FUNCTION[S] EXECUTABLE BY
+username
+[YIELD { * | field[, ...] } [ORDER BY field ...`;
+
+export const Component = () => {
+  return (
+    <CodePreview
+      code={cypherCode}
+      language="cypher"
+      label="read"
+      headerActions={
+        <OutlinedButton
+          leadingVisual={<PencilSquareIconOutline />}
+          variant="neutral"
+          size="small"
+        >
+          Send to Query
+        </OutlinedButton>
+      }
+    />
+  );
+};
+
+export default Component;
+```
+
+### Write
+
+```tsx
+import { CleanIconButton } from '@neo4j-ndl/react';
+import { CodePreview } from '@neo4j-ndl/react/ai';
+import {
+  PencilSquareIconOutline,
+  PlayCircleIconOutline,
+} from '@neo4j-ndl/react/icons';
+
+const cypherCode = `SHOW [ALL|BUILT IN|USER DEFINED] FUNCTION[S] EXECUTABLE BY
+username
+[YIELD { * | field[, ...] } [ORDER BY field ...`;
+
+export const Component = () => {
+  return (
+    <CodePreview
+      code={cypherCode}
+      language="cypher"
+      label="write"
+      headerActions={
+        <>
+          <CleanIconButton
+            variant="neutral"
+            description="Send to Query"
+            size="small"
+          >
+            <PencilSquareIconOutline />
+          </CleanIconButton>
+          <CleanIconButton
+            variant="neutral"
+            description="Run in Query"
+            size="small"
+          >
+            <PlayCircleIconOutline />
+          </CleanIconButton>
+        </>
+      }
+    />
+  );
+};
+
+export default Component;
+```