@flamingo-stack/openframe-frontend-core 0.0.213 → 0.0.214

package/src/stories/.DotsLoaderIcon.stories.md

@@ -0,0 +1,36 @@
+<!-- source-hash: 735975f25b78a4907321d619b6aaa5d8 -->
+Storybook stories for the `DotsLoaderIcon` component, covering size variants, ODS color token usage, color inheritance, and in-context card placement.
+
+## Key Components
+
+| Story | Description |
+|---|---|
+| `Default` | 24px icon inheriting text color via `currentColor` |
+| `Large` | 64px icon for full-page or blocking loading states |
+| `InheritsTextColor` | Demonstrates `currentColor` inheriting from a parent ODS text class |
+| `OdsColors` | Showcases explicit ODS token colors (`--ods-text-primary`, `--ods-accent`, `--ods-error`, etc.) |
+| `Sizes` | Full size scale from 16px to 96px |
+| `InCard` | Icon centered inside an ODS-styled card for inline loading context |
+
+## Usage Example
+
+```typescript
+import { DotsLoaderIcon } from '../components/icons-v2-generated/loaders/dots-loader-icon';
+
+// Default — inherits surrounding text color
+<DotsLoaderIcon size={24} />
+
+// Explicit ODS color token — never hardcode hex values
+<DotsLoaderIcon size={40} color="var(--ods-accent)" />
+
+// Inherit from parent text color class
+<div className="text-ods-accent">
+  <DotsLoaderIcon size={40} />
+</div>
+```
+
+## Notes
+
+- Animation is driven by an infinite SMIL chain on the three dots — no CSS keyframes required.
+- Always prefer ODS design tokens (e.g. `var(--ods-accent)`) over hardcoded hex values for the `color` prop.
+- The `size` prop accepts numbers between `12` and `128` (step `4`).

package/src/stories/.Drawer.stories.md

@@ -0,0 +1,58 @@
+<!-- source-hash: df41a32c852e3d01e5a937d8567445ad -->
+Storybook stories for the `Drawer` UI component, demonstrating all supported slide-in directions, footer usage, and scrollable content scenarios.
+
+## Key Components
+
+| Story | Description |
+|-------|-------------|
+| `Right` | Drawer sliding in from the right edge |
+| `Left` | Drawer sliding in from the left edge |
+| `Top` | Drawer sliding in from the top edge |
+| `Bottom` | Drawer sliding in from the bottom edge |
+| `AllSides` | Interactive demo toggling all four `DrawerSide` directions from a single view |
+| `WithFooter` | Drawer with `DrawerFooter` containing Cancel/Confirm actions |
+| `LongContent` | Drawer with 20 scrollable items to validate overflow/scroll behavior |
+
+**Drawer sub-components used:** `DrawerContent`, `DrawerHeader`, `DrawerTitle`, `DrawerDescription`, `DrawerBody`, `DrawerFooter`
+
+## Usage Example
+
+```typescript
+import { useState } from 'react'
+import { Button } from '../components/ui/button'
+import {
+  Drawer,
+  DrawerBody,
+  DrawerContent,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerDescription,
+} from '../components/ui/drawer'
+
+function MyDrawer() {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <Drawer open={open} onOpenChange={setOpen}>
+      <Button variant="outline" onClick={() => setOpen(true)}>
+        Open
+      </Button>
+      <DrawerContent side="right">
+        <DrawerHeader>
+          <DrawerTitle>Settings</DrawerTitle>
+          <DrawerDescription>Manage your preferences.</DrawerDescription>
+        </DrawerHeader>
+        <DrawerBody>
+          <p>Content here.</p>
+        </DrawerBody>
+        <DrawerFooter>
+          <Button variant="accent" onClick={() => setOpen(false)}>Save</Button>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  )
+}
+```
+
+The `side` prop on `DrawerContent` accepts `"right" | "left" | "top" | "bottom"`, defaulting to `"right"` when omitted.

package/src/stories/.EmbeddableChat.stories.md

@@ -0,0 +1,41 @@
+<!-- source-hash: 928a4aa8278d9b5dca88c4e94782c25c -->
+Storybook stories for the `EmbeddableChat` component, covering three chat surface configurations: Guide-only, Mingo-only, and dual-mode (both transports enabled with a toggle).
+
+## Key Components
+
+| Export | Type | Description |
+|--------|------|-------------|
+| `GuideOnly` | `Story` | Legacy single-mode Guide consumer matching `multi-platform-hub` mount pattern |
+| `MingoOnly` | `Story` | NATS agent transport surface with no mode toggle |
+| `BothModes` | `Story` | Dual-mode consumer with segmented Guide/Mingo header toggle |
+| `StoryShell` | Decorator | Wraps stories with `QueryClientProvider` + `ChatRuntimeContext` + canvas background |
+| `createMockRuntime()` | Helper | Returns a `ChatRuntime` with stub endpoints (all `/__story__/*`) |
+| `createMockMingoConfig()` | Helper | Returns a `UseNatsChatAdapterConfig` with `getNatsWsUrl: () => null` (no WS handshake) |
+| `SAMPLE_SLASH_COMMANDS` | Constant | 13 mock slash commands used to populate the empty-state chip grid |
+
+## Usage Example
+
+```typescript
+// Minimal dual-mode story using the same pattern as BothModes
+export const MyStory: Story = {
+  render: (args) => (
+    <EmbeddableChat
+      {...args}
+      modes={{
+        guide: {},
+        mingo: createMockMingoConfig(),
+      }}
+      defaultActiveMode="mingo"
+      defaultOpen
+      showInternalTrigger={false}
+    />
+  ),
+  args: {},
+}
+```
+
+## Notes
+
+- The `window.fetch` shim is installed **at module level** (not inside an effect) so the mock is in place before `EmbeddableChat`'s `useEffect` fires. A `__embeddableChatStoriesMockInstalled__` flag prevents double-patching across hot reloads.
+- All story endpoints resolve to `/__story__/*` — accidental real fetches return 404, not real server data.
+- `getNatsWsUrl: () => null` keeps the NATS dialog subscription idle in all stories.

package/src/stories/.FileManager.stories.md

@@ -0,0 +1,41 @@
+<!-- source-hash: 5c554e5f85ea796af4b31616f108e4eb -->
+Storybook stories for the `FileManager` UI component, covering rendering states, navigation paths, selection, search, and UI configuration variants.
+
+## Key Components
+
+- **`meta`** — Storybook metadata registering the component under `UI/FileManager` with default args (sample files, mock handlers via `fn()`) and argType controls for boolean/text props
+- **`sampleFiles`** — Shared fixture array of `FileItem` objects (folders + files) used across stories
+- **Story exports** — Individual named story objects, each overriding specific args to isolate a scenario
+
+## Stories
+
+| Story | Description |
+|---|---|
+| `Default` | Root path with mixed files and folders |
+| `NestedPath` | Deep breadcrumb path (`/Documents/Projects/my-app`) |
+| `WithSelection` | Two files selected, enabling copy/cut actions |
+| `WithPasteAvailable` | Clipboard paste action enabled |
+| `Loading` | Skeleton/spinner state while fetching contents |
+| `Searching` | Active search query with filtered results |
+| `SearchInProgress` | Search spinner while results load |
+| `EmptyDirectory` | No files present in current path |
+| `MinimalUI` | No search bar, action bar, or checkboxes |
+| `WindowsPath` | Windows-style `C:\Users\...` path handling |
+
+## Usage Example
+
+```typescript
+import { FileManager } from '../components/ui/file-manager/file-manager';
+
+<FileManager
+  files={sampleFiles}
+  currentPath="/"
+  selectedFiles={[]}
+  onNavigate={(path) => console.log('navigate', path)}
+  onSelectFile={(id) => console.log('select', id)}
+  onFolderOpen={(item) => console.log('open', item)}
+  showSearch
+  showActions
+  showCheckboxes
+/>
+```

package/src/stories/.FileManagerActionBar.stories.md

@@ -0,0 +1,38 @@
+<!-- source-hash: aef805784aca574d32a20c120db03cdb -->
+Storybook stories for the `FileManagerActionBar` component, covering default, selection, clipboard, and fully-enabled interaction states.
+
+## Key Components
+
+| Export | Type | Description |
+|--------|------|-------------|
+| `meta` | `Meta` | Storybook metadata — registers component under `UI/FileManagerActionBar` with mocked action handlers |
+| `Default` | `Story` | No selection, no clipboard content; Copy, Cut, and Paste disabled |
+| `WithSelection` | `Story` | `hasSelection: true` — Copy and Cut buttons become active |
+| `WithPasteAvailable` | `Story` | `canPaste: true` — Paste button becomes active |
+| `AllEnabled` | `Story` | Both `hasSelection` and `canPaste` set — all action buttons enabled |
+
+## Usage Example
+
+```typescript
+// Render the AllEnabled story in a test or custom harness
+import { AllEnabled } from './FileManagerActionBar.stories';
+
+<AllEnabled.component
+  {...AllEnabled.args}
+  onCopy={() => console.log('copy')}
+  onCut={() => console.log('cut')}
+  onPaste={() => console.log('paste')}
+  onNewFolder={() => console.log('new folder')}
+  onUpload={() => console.log('upload')}
+  onSelectAll={() => console.log('select all')}
+/>
+```
+
+## Controlled Props
+
+| Prop | Control | Effect |
+|------|---------|--------|
+| `hasSelection` | `boolean` | Enables Copy and Cut actions |
+| `canPaste` | `boolean` | Enables Paste action |
+
+All handler props (`onNewFolder`, `onCopy`, `onCut`, `onPaste`, `onUpload`, `onSelectAll`) are wired to Storybook `fn()` spies, making interaction events visible in the **Actions** panel during development.

package/src/stories/.FileUpload.stories.md

@@ -0,0 +1,53 @@
+<!-- source-hash: bbf76fcab5ddf0e39246fdc2d4fe5d17 -->
+Storybook stories for the `FileUpload` UI component, showcasing drag-and-drop file upload variants including label, multi-file, image-only, interactive state management, and disabled states.
+
+## Key Components
+
+| Story | Description |
+|-------|-------------|
+| `Default` | Basic dropzone with no additional configuration |
+| `WithLabel` | Dropzone with a field label (`Attachments`) |
+| `Multiple` | Multi-file upload with custom label and description |
+| `ImagesOnly` | Restricted to `image/*` MIME types |
+| `Interactive` | Stateful render with live file count display |
+| `Disabled` | Non-interactive disabled dropzone |
+
+## Usage Example
+
+```typescript
+// Basic usage
+<FileUpload onChange={(files) => console.log(files)} />
+
+// Multi-file with label
+<FileUpload
+  multiple
+  fieldLabel="Attachments"
+  label="Upload Files"
+  description="(Click Here or Drag and Drop)"
+  onChange={(files) => handleFiles(files)}
+/>
+
+// Images only
+<FileUpload
+  accept="image/*"
+  label="Upload Images"
+  description="PNG, JPEG, WebP only"
+  onChange={(files) => handleImages(files)}
+/>
+
+// Controlled (stateful)
+const [files, setFiles] = useState<File[]>([]);
+<FileUpload
+  value={files}
+  onChange={(f) => setFiles(f as File[] || [])}
+  multiple
+  fieldLabel="Upload Files"
+/>
+```
+
+## Notes
+
+- All stories are wrapped in a `500px` container via a shared decorator for consistent layout.
+- The `Interactive` story demonstrates controlled usage with `useState`, reflecting selected file count below the dropzone.
+- `accept` prop follows standard MIME type syntax (e.g. `"image/*"`).
+- `autodocs` tag enables automatic Storybook documentation generation.

package/src/stories/.FilterList.stories.md

@@ -0,0 +1,54 @@
+<!-- source-hash: 488942b1b8a347ad8c23f81bddec013a -->
+Storybook stories for the `FilterList` UI component, covering multi-select, single-select, disabled items, item states, and long title truncation behaviors.
+
+## Key Components
+
+| Export | Type | Description |
+|--------|------|-------------|
+| `Default` | `Story` | Multi-select list with pre-selected item |
+| `SingleSelect` | `Story` | Single-selection mode (`multiple: false`) |
+| `NoMeta` | `Story` | Items rendered with title only, no meta values |
+| `WithDisabledItem` | `Story` | List with one individually disabled row |
+| `ItemStates` | `StoryObj` | Side-by-side `FilterListItem` in default and selected states |
+| `LongTitles` | `Story` | Validates ellipsis truncation on long titles |
+
+## Usage Example
+
+```typescript
+import { FilterList } from '../components/ui/filter-list';
+import { useState } from 'react';
+
+const items = [
+  { id: '1', title: 'Acme Corporation', meta: ['Technology', '100 devices'] },
+  { id: '2', title: 'Globex Inc.', meta: ['Finance', '245 devices'] },
+  { id: '3', title: 'Initech', meta: ['Consulting', '58 devices'], disabled: true },
+];
+
+export function OrgFilter() {
+  const [selected, setSelected] = useState<string[]>(['1']);
+
+  return (
+    <FilterList
+      items={items}
+      selectedIds={selected}
+      onChange={setSelected}
+      multiple={false} // omit for multi-select (default)
+    />
+  );
+}
+```
+
+## Story Variants
+
+```mermaid
+graph TD
+    FilterList["FilterList Stories"]
+    FilterList --> Default["Default (multi-select)"]
+    FilterList --> SingleSelect["SingleSelect (one active)"]
+    FilterList --> NoMeta["NoMeta (title only)"]
+    FilterList --> WithDisabledItem["WithDisabledItem"]
+    FilterList --> ItemStates["ItemStates (FilterListItem)"]
+    FilterList --> LongTitles["LongTitles (truncation)"]
+```
+
+Selected rows render with a yellow-secondary background and accent-colored meta text. Each story wraps `useState` internally so selection state is interactive inside Storybook.

package/src/stories/.FilterModal.stories.md

@@ -0,0 +1,72 @@
+<!-- source-hash: 997a920fba0072bc3666a97dfbeeae72 -->
+Storybook stories for the `FilterModal` component, covering all major prop combinations including filter groups, sorting, tag key:value filters, loading states, and interactive stateful examples.
+
+## Key Components
+
+### Exported Stories
+
+| Story | Description |
+|-------|-------------|
+| `Default` | Basic modal with status filter group and pre-selected filters |
+| `Interactive` | Stateful example with open/close toggle and live filter count |
+| `MultipleGroups` | Modal with several filter groups (statuses, types, OS) |
+| `WithoutCounts` | Filter options rendered without item counts |
+| `WithSorting` | Combined sort columns + filter groups |
+| `SortingOnly` | Sort configuration with no filter groups |
+| `InteractiveWithSorting` | Stateful sort + filter with live sort display |
+| `EmptyFilters` | Filter groups present but nothing selected |
+| `NoFiltersAvailable` / `FullyEmpty` | Edge cases with no options or config |
+| `Loading` | Skeleton placeholder state during data fetch |
+| `WithTagFilter` | Tag key:value filter section alongside regular filters |
+| `TagFilterOnly` | Tag filters with no regular filter groups |
+| `FullFeatured` | All features combined: sort + filters + tags |
+| `InteractiveWithTags` | Fully interactive with tags, sort, and filters |
+
+### Key Types Used
+
+- `FilterGroup` — group id, title, and options array (with optional counts)
+- `SortConfig` — column definitions, active sort key, and direction
+- `TagKeyConfig` — tag key with label and selectable values
+- `TableFilters` — record mapping filter group ids to selected option ids
+
+## Usage Example
+
+```typescript
+import { FilterModal, type FilterGroup, type SortConfig } from '../components/ui/filter-modal'
+import type { TableFilters } from '../components/ui/table/types'
+
+const filterGroups: FilterGroup[] = [
+  {
+    id: 'statuses',
+    title: 'Statuses',
+    options: [
+      { id: 'active', label: 'Active', count: 2975 },
+      { id: 'inactive', label: 'Inactive', count: 245 },
+    ],
+  },
+]
+
+const sortConfig: SortConfig = {
+  columns: [{ key: 'name', label: 'Name' }, { key: 'date', label: 'Date' }],
+  sortBy: 'name',
+  sortDirection: 'asc',
+}
+
+function MyPage() {
+  const [isOpen, setIsOpen] = useState(false)
+  const [filters, setFilters] = useState<TableFilters>({})
+
+  return (
+    <FilterModal
+      isOpen={isOpen}
+      onClose={() => setIsOpen(false)}
+      title="Sort and Filter"
+      filterGroups={filterGroups}
+      currentFilters={filters}
+      onFilterChange={setFilters}
+      sortConfig={sortConfig}
+      onSort={(col, dir) => console.log(col, dir)}
+    />
+  )
+}
+```

package/src/stories/.FiltersDropdown.stories.md

@@ -0,0 +1,57 @@
+<!-- source-hash: 194f540562ec706068c7dde122366c19 -->
+Storybook stories for the `FiltersDropdown` component, covering checkbox/radio sections, custom triggers, placement variants, and interactive state management.
+
+## Key Components
+
+| Export | Type | Description |
+|--------|------|-------------|
+| `Default` | `Story` | Single checkbox section with pre-selected filters |
+| `MultipleSections` | `Story` | Two checkbox sections (Status + Device Type) |
+| `RadioSection` | `Story` | Single-select radio group for sort ordering |
+| `WithSeparator` | `Story` | Checkbox section with a visual separator between option groups |
+| `CustomTrigger` | `Story` | Replaces default text button with a custom `Button` element |
+| `PlacementBottomEnd` | `Story` | Dropdown aligned to the right via `bottom-end` placement |
+| `NoActiveFilters` | `Story` | Empty `currentFilters` state |
+| `ManyOptions` | `Story` | Three large sections demonstrating scrollable overflow |
+| `Interactive` | `Story` | Live stateful example showing applied filter feedback |
+
+## Usage Example
+
+```typescript
+// Basic checkbox filter dropdown
+<FiltersDropdown
+  triggerLabel="STATUS"
+  sections={[
+    {
+      id: 'status',
+      title: 'Status',
+      type: 'checkbox',
+      options: [
+        { id: 'active', label: 'Active', value: 'active', count: 2975 },
+        { id: 'inactive', label: 'Inactive', value: 'inactive', count: 245 },
+      ],
+      allowSelectAll: true,
+    },
+  ]}
+  currentFilters={{ status: ['active'] }}
+  onApply={(filters) => console.log(filters)}
+  onReset={() => console.log('reset')}
+/>
+
+// Custom trigger with bottom-end placement
+<FiltersDropdown
+  triggerElement={<Button variant="outline">Open Filters</Button>}
+  sections={sections}
+  placement="bottom-end"
+  onApply={handleApply}
+  onReset={handleReset}
+/>
+```
+
+## Configurable Args
+
+| Arg | Control | Description |
+|-----|---------|-------------|
+| `triggerLabel` | `text` | Label rendered on the default trigger button |
+| `placement` | `select` | `bottom-start` \| `bottom-end` \| `bottom` |
+| `responsive` | `boolean` | Enables mobile-responsive behavior |

package/src/stories/.Header.stories.md

@@ -0,0 +1,48 @@
+<!-- source-hash: 5344552d615a3d0d05eef4235e82937c -->
+Storybook stories for the `Header` navigation component, covering dropdown behavior, SEO link visibility, and scroll auto-hide functionality.
+
+## Key Components
+
+| Export | Type | Description |
+|--------|------|-------------|
+| `Default` | `Story` | Standard header with dropdown navigation and auto-hide enabled |
+| `DropdownOpen` | `Story` | Programmatically opens the first dropdown on mount for visual regression snapshots |
+| `SeoLinksAlwaysInDom` | `Story` | Live DOM inspector that counts `<a href>` anchors in the header, proving SEO crawler visibility regardless of dropdown state |
+| `FixedHeader` | `Story` | Header with `autoHide: false` — remains fixed during scroll |
+
+**Shared fixtures:**
+- `flamingoLogo` — branded logo element using `FlamingoLogo` icon + DM Sans wordmark
+- `baseNavigation` — three-item nav config (`OpenFrame`, `OpenMSP`, `Company`) with nested dropdown children
+- `rightActions` — accent CTA button linking to `/signup`
+
+## Usage Example
+
+```typescript
+import { Header } from '../components/navigation/header';
+import type { HeaderConfig } from '../types/navigation';
+
+const config: HeaderConfig = {
+  logo: { element: <FlamingoLogo />, href: '/' },
+  navigation: {
+    position: 'center',
+    items: [
+      {
+        id: 'docs',
+        label: 'Docs',
+        children: [
+          { id: 'getting-started', label: 'Getting Started', href: '/docs/getting-started' },
+        ],
+      },
+    ],
+  },
+  actions: {
+    right: [<Button key="cta" variant="accent" href="/signup">Start Free Trial</Button>],
+  },
+  autoHide: true,
+  mobile: { enabled: true, onToggle: () => {} },
+};
+
+<Header config={config} />
+```
+
+> **SEO note:** Dropdown children are always rendered in the DOM and hidden via CSS `visibility: hidden` + `aria-hidden`, keeping all `<a href>` links crawlable without JavaScript execution.

package/src/stories/.ImageUploader.stories.md

@@ -0,0 +1,49 @@
+<!-- source-hash: 3916654dd739ee2e8657ff84693270c8 -->
+Storybook stories for the `ImageUploader` UI component, covering all visual states, prop variants, and an interactive upload simulation.
+
+## Key Components
+
+| Export | Description |
+|--------|-------------|
+| `Default` | Bare uploader with no initial value |
+| `AllStates` | Side-by-side grid of all four Figma states: default, hover, action, uploaded |
+| `WithFieldLabel` | Uploader with an accessible label above the dropzone |
+| `WithPreview` | Pre-populated image preview with remove action |
+| `PreviewWithoutRemove` | Preview state with `onRemove` omitted |
+| `SquareAspectRatio` | Custom `1 / 1` aspect ratio at 320px width |
+| `ObjectFitContain` | Image preview using `contain` fit instead of the default `cover` |
+| `Loading` | Spinner overlay on an existing preview |
+| `LoadingEmpty` | Spinner overlay on the empty dropzone |
+| `Disabled` / `DisabledWithPreview` | Non-interactive states |
+| `WithError` | Field-level validation error message |
+| `CustomCopy` | Custom label, description, accepted MIME types, and max file size |
+| `Interactive` | Fully wired story using `useState` + `FileReader` to simulate real upload flow |
+
+## Usage Example
+
+```typescript
+// Interactive story pattern — wire up local state to preview uploads
+import { useState } from 'react';
+import { ImageUploader } from '../components/ui/image-uploader';
+
+function Demo() {
+  const [preview, setPreview] = useState<string | undefined>();
+
+  const handleChange = (file: File) => {
+    const reader = new FileReader();
+    reader.onload = () => setPreview(reader.result as string);
+    reader.readAsDataURL(file);
+  };
+
+  return (
+    <ImageUploader
+      value={preview}
+      onChange={handleChange}
+      onRemove={() => setPreview(undefined)}
+      fieldLabel="Cover image"
+    />
+  );
+}
+```
+
+> `ImageUploader` is intentionally decoupled from upload logic — it calls `onChange(file)` and the consumer owns the upload, preview URL management, and remove behaviour.

package/src/stories/.InfoCard.stories.md

@@ -0,0 +1,54 @@
+<!-- source-hash: 5b42d2668b0cbc76ddb288a5b0d0cf2b -->
+Storybook stories for the `InfoCard` UI component, demonstrating various configurations including disk usage, RAM stats, copyable network values, and a multi-card grid layout.
+
+## Key Components
+
+| Story | Description |
+|-------|-------------|
+| `DiskC` | SSD drive card with usage percentage and capacity, default progress bar |
+| `DiskD` | HDD drive card with warning/critical thresholds on the progress bar |
+| `PhysicalRAM` | RAM card showing DDR4 memory usage and capacity |
+| `WithCopyableValues` | Network info card with copyable hostname, IPv4, and MAC fields |
+| `Grid` | Three-column grid layout showcasing multiple `InfoCard` instances side by side |
+
+## Usage Example
+
+```typescript
+import { InfoCard } from '../components'
+
+// Basic disk card with progress bar
+<InfoCard
+  data={{
+    title: 'C:',
+    subtitle: 'SSD Drive',
+    items: [
+      { label: 'Current Usage', value: '42.6%' },
+      { label: 'Capacity', value: '931 GB' },
+    ],
+    progress: { value: 42.6 },
+  }}
+/>
+
+// With warning/critical thresholds
+<InfoCard
+  data={{
+    title: 'D:',
+    progress: {
+      value: 62.3,
+      warningThreshold: 60,
+      criticalThreshold: 85,
+    },
+    items: [{ label: 'Current Usage', value: '62.3%' }],
+  }}
+/>
+
+// With copyable values
+<InfoCard
+  data={{
+    title: 'Network',
+    items: [
+      { label: 'IPv4', value: '192.168.1.100', copyable: true },
+    ],
+  }}
+/>
+```