@arbor-education/design-system.components 0.16.1 → 0.17.1

package/dist/components/dataViewCard/DataViewCard.stories.js

@@ -0,0 +1,317 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Controls, Heading as DocHeading, Markdown, Primary as DocPrimary, Stories, Subtitle, Title, } from '@storybook/addon-docs/blocks';
+import { DataViewCard } from './DataViewCard';
+// ---------------------------------------------------------------------------
+// Docs page content
+// ---------------------------------------------------------------------------
+const DESCRIPTION_INTRO = [
+    'DataViewCard is a precomposed [`Card`](?path=/docs/components-card--docs) variant for displaying a person or entity',
+    'as a tile — an [`Avatar`](?path=/docs/components-avatar--docs) on the left, a [`Heading`](?path=/docs/components-heading--docs)',
+    'for the name, and a stack of key-value [`Row`](?path=/docs/components-row--docs)s separated by [`Separator`](?path=/docs/components-separator--docs)s.',
+    'Built for grids of records (e.g. browse-students, staff directories) where the whole tile navigates to a profile.',
+].join('\n');
+const USAGE_GUIDANCE = [
+    '### When to use',
+    '',
+    '- **Browse views of people / records** — staff list, student list, contact directory',
+    '- **Tile-based navigation** — when clicking the whole card should drill into a detail view',
+    '- **Summary at a glance** — a heading plus 2–4 quick facts (year group, role, ID, etc.)',
+    '',
+    '---',
+    '',
+    '### When NOT to use',
+    '',
+    '| Situation | Use instead |',
+    '|---|---|',
+    '| Free-form content (paragraphs, mixed media) | [`ArticleCard`](?path=/docs/components-articlecard--docs) |',
+    '| Single metric / KPI display | [`KPICard`](?path=/docs/components-kpicard--docs) |',
+    '| Long lists where row density matters | [`Table`](?path=/docs/components-table--docs) |',
+    '| Just an avatar with name and role | [`SingleUser`](?path=/docs/components-singleuser--docs) |',
+].join('\n');
+const DEVELOPER_NOTES = [
+    '### Critical usage patterns',
+    '',
+    '**`aria-label` (or `aria-labelledby`) is REQUIRED when `onClick` is set.** The underlying `Card` renders',
+    '`role="button"` for clickable cards — a button without an accessible name is a WCAG 2.1 failure (4.1.2).',
+    '',
+    '**Rows are passed as data, not children.** The component owns the layout — you provide an array of',
+    '`{ label, value, note? }` objects and the component renders them as `Row`s with separators between.',
+    '',
+    '**Avatar is optional.** Omit the `avatar` prop entirely when you do not have an image (the layout collapses',
+    'cleanly to header-plus-rows). Pass full `Avatar.Props` for full control over `src`/`initials`/`size`/`alt`.',
+    '',
+    '**Header is `string` only.** Use the `aria-labelledby` pattern if you need richer markup for the accessible',
+    'name; otherwise pass the plain person/entity name as `header`.',
+    '',
+    '---',
+    '',
+    '### Accessibility',
+    '',
+    '- Heading renders as a real `<h4>` — fits inside an `<h3>` section/page heading',
+    '- Whole card is keyboard activatable (`Enter` / `Space`) when `onClick` is set, via the `Card` shell',
+    '- `disabled` removes click handling and applies `aria-disabled="true"` — focus is preserved',
+    '- Always pair an `Avatar` with `alt` text describing who it represents (or empty `alt=""` if purely decorative)',
+    '',
+    '---',
+    '',
+    '### TypeScript types',
+    '',
+    '```ts',
+    "import { DataViewCard } from '@arbor-education/design-system.components';",
+    '',
+    'function MyCard(props: DataViewCard.Props) { ... }',
+    'const rows: DataViewCard.RowData[] = [{ label: \'Year\', value: \'Year 8\' }];',
+    '```',
+    '',
+    '| Type | Description |',
+    '|---|---|',
+    '| `DataViewCard.Props` | Full props interface |',
+    '| `DataViewCard.RowData` | Alias for `Row.Props` — accepts the full [`Row`](?path=/docs/components-row--docs) API (`label`, `value`, `note`, plus `onClick` / `className`) |',
+].join('\n');
+const RELATED_COMPONENTS = [
+    '## Related components',
+    '',
+    '[Card](?path=/docs/components-card--docs) · [ArticleCard](?path=/docs/components-articlecard--docs) · [KPICard](?path=/docs/components-kpicard--docs) · [Avatar](?path=/docs/components-avatar--docs) · [Row](?path=/docs/components-row--docs) · [Heading](?path=/docs/components-heading--docs) · [Separator](?path=/docs/components-separator--docs)',
+].join('\n');
+const PROPS_INTRO = 'The preview below is wired to the **Controls** panel — tweak any prop to see the story update in real time.';
+function DataViewCardDocsPage() {
+    return (_jsxs(_Fragment, { children: [_jsx(Title, {}), _jsx(Subtitle, {}), _jsx(Markdown, { children: DESCRIPTION_INTRO }), _jsx(DocHeading, { children: "Interactive example" }), _jsx(Markdown, { children: PROPS_INTRO }), _jsx(DocPrimary, {}), _jsx(Controls, {}), _jsx(DocHeading, { children: "Usage guidance" }), _jsx(Markdown, { children: USAGE_GUIDANCE }), _jsx(DocHeading, { children: "Developer notes" }), _jsx(Markdown, { children: DEVELOPER_NOTES }), _jsx(DocHeading, { children: "Examples" }), _jsx(Stories, { title: "" }), _jsx(Markdown, { children: RELATED_COMPONENTS })] }));
+}
+// ---------------------------------------------------------------------------
+// Meta
+// ---------------------------------------------------------------------------
+const sampleRows = [
+    { label: 'Year', value: 'Year 13' },
+    { label: 'Form', value: 'Form 13DZ' },
+    { label: 'DOB', value: '20 May 1932' },
+];
+const AVATAR_BASE = 'https://i.pravatar.cc/150?img=';
+const meta = {
+    title: 'Components/Card/DataViewCard',
+    component: DataViewCard,
+    parameters: {
+        layout: 'padded',
+        docs: {
+            page: DataViewCardDocsPage,
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        'header': {
+            control: 'text',
+            description: 'The card heading — rendered as an `<h4>`. Pass the person or entity name.',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        'avatar': {
+            control: 'object',
+            description: [
+                'Optional `Avatar.Props` — accepts `src`, `initials`, `alt`, and `size` (defaults to `extra-large`).',
+                'Omit the prop entirely to render the card without an avatar.',
+            ].join(' '),
+            table: {
+                type: { summary: 'Avatar.Props' },
+            },
+        },
+        'rows': {
+            control: 'object',
+            description: 'Array of `{ label, value, note? }` — each is rendered as a `Row`, separated by `Separator`s.',
+            table: {
+                type: { summary: 'DataViewCard.RowData[]' },
+            },
+        },
+        'disabled': {
+            control: 'boolean',
+            description: 'Disables click handling and applies `aria-disabled="true"`.',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        'onClick': {
+            control: false,
+            description: 'When set, the whole card becomes a `role="button"` and `aria-label` (or `aria-labelledby`) is required.',
+            table: {
+                type: { summary: '(e: MouseEvent<HTMLElement>) => void' },
+            },
+        },
+        'aria-label': {
+            control: 'text',
+            description: 'Required when `onClick` is set (unless `aria-labelledby` is provided).',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        'aria-labelledby': {
+            control: false,
+            description: 'Alternative to `aria-label` — point to a visible element\'s id when one exists.',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        'className': {
+            control: false,
+            description: 'Additional CSS class names on the underlying Card root.',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+    },
+};
+export default meta;
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+const withDescription = (story, description) => ({
+    ...story,
+    parameters: {
+        ...story.parameters,
+        docs: {
+            ...story.parameters?.docs,
+            description: {
+                story: description,
+            },
+        },
+    },
+});
+// ---------------------------------------------------------------------------
+// Templates
+// ---------------------------------------------------------------------------
+const GridTemplate = () => (_jsxs("div", { style: {
+        display: 'grid',
+        gap: 'var(--spacing-large)',
+        gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))',
+    }, children: [_jsx(DataViewCard, { "aria-label": "View Dorothy Zbornak", avatar: { src: `${AVATAR_BASE}47`, alt: 'Dorothy Zbornak' }, header: "Dorothy Zbornak", onClick: () => { }, rows: [
+                { label: 'Year', value: 'Year 13' },
+                { label: 'Form', value: 'Form 13DZ' },
+                { label: 'DOB', value: '20 May 1932' },
+            ] }), _jsx(DataViewCard, { "aria-label": "View Rose Nylund", avatar: { src: `${AVATAR_BASE}5`, alt: 'Rose Nylund' }, header: "Rose Nylund", onClick: () => { }, rows: [
+                { label: 'Year', value: 'Year 12' },
+                { label: 'Form', value: 'Form 12RN' },
+                { label: 'DOB', value: '21 Jul 1928' },
+            ] }), _jsx(DataViewCard, { "aria-label": "View Blanche Devereaux", avatar: { src: `${AVATAR_BASE}49`, alt: 'Blanche Devereaux' }, header: "Blanche Devereaux", onClick: () => { }, rows: [
+                { label: 'Year', value: 'Year 13' },
+                { label: 'Form', value: 'Form 13BD' },
+                { label: 'DOB', value: '17 Aug 1934' },
+            ] }), _jsx(DataViewCard, { "aria-label": "View Sophia Petrillo", avatar: { initials: 'SP', alt: 'Sophia Petrillo' }, header: "Sophia Petrillo", onClick: () => { }, rows: [
+                { label: 'Year', value: 'Year 13' },
+                { label: 'Form', value: 'Form 13SP' },
+                { label: 'DOB', value: '17 Mar 1908' },
+            ] }), _jsx(DataViewCard, { "aria-label": "View Bella Swan", avatar: { src: `${AVATAR_BASE}21`, alt: 'Bella Swan' }, header: "Bella Swan", onClick: () => { }, rows: [
+                { label: 'Year', value: 'Year 11' },
+                { label: 'Form', value: 'Form 11FH' },
+                { label: 'DOB', value: '13 Sep 1987' },
+            ] }), _jsx(DataViewCard, { "aria-label": "View Jacob Black", avatar: { initials: 'JB', alt: 'Jacob Black' }, header: "Jacob Black", onClick: () => { }, rows: [
+                { label: 'Year', value: 'Year 11' },
+                { label: 'Form', value: 'Form 11LP' },
+                { label: 'DOB', value: '14 Jan 1990' },
+            ] })] }));
+const NoAvatarTemplate = () => (_jsx(DataViewCard, { "aria-label": "View record A1024", header: "Record A1024", onClick: () => { }, rows: [
+        { label: 'Type', value: 'Behaviour incident' },
+        { label: 'Reported', value: '14 Mar 2026' },
+        { label: 'Status', value: 'Open' },
+    ] }));
+const StaticTemplate = () => (_jsx(DataViewCard, { avatar: { src: `${AVATAR_BASE}58`, alt: 'Edward Cullen' }, header: "Edward Cullen", rows: [
+        { label: 'Year', value: 'Year 11' },
+        { label: 'Form', value: 'Form 11FH' },
+        { label: 'DOB', value: '20 Jun 1901' },
+    ] }));
+const DisabledTemplate = () => (_jsx(DataViewCard, { "aria-label": "View Alice Cullen", avatar: { src: `${AVATAR_BASE}25`, alt: 'Alice Cullen' }, disabled: true, header: "Alice Cullen", onClick: () => { }, rows: [
+        { label: 'Year', value: 'Year 12' },
+        { label: 'Form', value: 'Form 12FH' },
+        { label: 'DOB', value: '06 Jan 1901' },
+    ] }));
+const WithNoteTemplate = () => (_jsx(DataViewCard, { "aria-label": "View Blanche Devereaux", avatar: { src: `${AVATAR_BASE}49`, alt: 'Blanche Devereaux' }, header: "Blanche Devereaux", onClick: () => { }, rows: [
+        { label: 'Year', value: 'Year 13', note: 'Glamour studies major' },
+        { label: 'Form', value: 'Form 13BD', note: 'Tutor: Ms Petrillo' },
+        { label: 'DOB', value: '17 Aug 1934' },
+    ] }));
+// ---------------------------------------------------------------------------
+// Stories
+// ---------------------------------------------------------------------------
+export const Default = withDescription({
+    args: {
+        'aria-label': 'View Dorothy Zbornak',
+        'avatar': { src: `${AVATAR_BASE}47`, alt: 'Dorothy Zbornak' },
+        'header': 'Dorothy Zbornak',
+        'onClick': () => { },
+        'rows': sampleRows,
+    },
+    render: args => _jsx(DataViewCard, { ...args }),
+}, [
+    'The interactive canvas — every prop is wired to the Controls panel below.',
+    'Tweak the `rows` array, swap the `avatar` for `{ src: \'…\' }` to test imagery, or remove `onClick` to flip the card to a static figure.',
+].join(' '));
+export const Grid = withDescription({
+    render: GridTemplate,
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { DataViewCard } from '@arbor-education/design-system.components';
+
+function StudentGrid() {
+  return (
+    <div
+      style={{
+        display: 'grid',
+        gap: 'var(--spacing-large)',
+        gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))',
+      }}
+    >
+      <DataViewCard
+        aria-label="View Dorothy Zbornak"
+        avatar={{ src: 'https://i.pravatar.cc/150?img=47', alt: 'Dorothy Zbornak' }}
+        header="Dorothy Zbornak"
+        onClick={() => {}}
+        rows={[
+          { label: 'Year', value: 'Year 13' },
+          { label: 'Form', value: 'Form 13DZ' },
+          { label: 'DOB', value: '20 May 1932' },
+        ]}
+      />
+      {/* …more cards… */}
+    </div>
+  );
+}
+export default StudentGrid;
+`.trim(),
+            },
+        },
+    },
+}, [
+    'The canonical browse-students layout: a responsive CSS grid of clickable cards (`auto-fill, minmax(320px, 1fr)`).',
+    'Each card has a unique `aria-label` describing the record it links to.',
+].join(' '));
+export const NoAvatar = withDescription({
+    render: NoAvatarTemplate,
+    parameters: { controls: { disable: true } },
+}, [
+    'When the record has no portrait or logo, simply omit the `avatar` prop —',
+    'the layout collapses to header-plus-rows without leaving an empty placeholder.',
+].join(' '));
+export const Static = withDescription({
+    render: StaticTemplate,
+    parameters: { controls: { disable: true } },
+}, [
+    'Without an `onClick`, the card renders as a static `<figure>` with no `role="button"` and no chevron icon.',
+    'Use this when the card is a read-only summary alongside a separate action button.',
+].join(' '));
+export const Disabled = withDescription({
+    render: DisabledTemplate,
+    parameters: { controls: { disable: true } },
+}, [
+    'The `disabled` prop suppresses click handling and sets `aria-disabled="true"` on the underlying Card.',
+    'The card still renders fully and remains focusable — only the click is suppressed.',
+].join(' '));
+export const WithNote = withDescription({
+    render: WithNoteTemplate,
+    parameters: { controls: { disable: true } },
+}, [
+    'Each row supports an optional `note` (italicised by `Row`) for secondary context — e.g. tutor name, promotion date.',
+    'Leave it off when not needed; rows render at consistent height regardless.',
+].join(' '));
+//# sourceMappingURL=DataViewCard.stories.js.map

package/dist/components/dataViewCard/DataViewCard.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataViewCard.stories.js","sourceRoot":"","sources":["../../../src/components/dataViewCard/DataViewCard.stories.tsx"],"names":[],"mappings":"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"}

package/dist/components/dataViewCard/DataViewCard.test.d.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom/vitest';
+//# sourceMappingURL=DataViewCard.test.d.ts.map

package/dist/components/dataViewCard/DataViewCard.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataViewCard.test.d.ts","sourceRoot":"","sources":["../../../src/components/dataViewCard/DataViewCard.test.tsx"],"names":[],"mappings":"AACA,OAAO,kCAAkC,CAAC"}

package/dist/components/dataViewCard/DataViewCard.test.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fireEvent, render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+import { describe, expect, test, vi } from 'vitest';
+import { DataViewCard } from './DataViewCard';
+const baseRows = [
+    { label: 'Year', value: 'Year 8' },
+    { label: 'Form', value: 'Form 8LR' },
+    { label: 'DOB', value: '29 Jan 2012' },
+];
+describe('DataViewCard', () => {
+    test('renders the header as an h4', () => {
+        render(_jsx(DataViewCard, { header: "Christopher Longbottom", rows: baseRows }));
+        expect(screen.getByRole('heading', { level: 4 })).toHaveTextContent('Christopher Longbottom');
+    });
+    test('renders every row label and value', () => {
+        render(_jsx(DataViewCard, { header: "Christopher Longbottom", rows: baseRows }));
+        baseRows.forEach((row) => {
+            expect(screen.getByText(row.label)).toBeInTheDocument();
+            expect(screen.getByText(row.value)).toBeInTheDocument();
+        });
+    });
+    test('renders a row note when provided', () => {
+        render(_jsx(DataViewCard, { header: "Christopher Longbottom", rows: [{ label: 'Year', value: 'Year 8', note: 'Promoted Sept 2024' }] }));
+        expect(screen.getByText('Promoted Sept 2024')).toBeInTheDocument();
+    });
+    test('renders an Avatar when avatar props are provided', () => {
+        const { container } = render(_jsx(DataViewCard, { avatar: { initials: 'CL', alt: 'Christopher Longbottom avatar' }, header: "Christopher Longbottom", rows: baseRows }));
+        expect(container.querySelector('.ds-avatar')).toBeInTheDocument();
+        expect(screen.getByText('CL')).toBeInTheDocument();
+    });
+    test('omits the Avatar when no avatar props are provided', () => {
+        const { container } = render(_jsx(DataViewCard, { header: "Christopher Longbottom", rows: baseRows }));
+        expect(container.querySelector('.ds-avatar')).not.toBeInTheDocument();
+    });
+    test('uses the Card shell as a button when onClick is provided', () => {
+        const handleClick = vi.fn();
+        render(_jsx(DataViewCard, { "aria-label": "View Christopher Longbottom", header: "Christopher Longbottom", onClick: handleClick, rows: baseRows }));
+        const card = screen.getByRole('button', { name: 'View Christopher Longbottom' });
+        fireEvent.click(card);
+        expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+    test('renders as a static figure when not clickable', () => {
+        const { container } = render(_jsx(DataViewCard, { header: "Christopher Longbottom", rows: baseRows }));
+        const card = container.querySelector('figure');
+        expect(card).toBeInTheDocument();
+        expect(card).not.toHaveAttribute('role', 'button');
+    });
+    test('does not invoke onClick when disabled', () => {
+        const handleClick = vi.fn();
+        render(_jsx(DataViewCard, { "aria-label": "View Christopher Longbottom", disabled: true, header: "Christopher Longbottom", onClick: handleClick, rows: baseRows }));
+        const card = screen.getByLabelText('View Christopher Longbottom');
+        fireEvent.click(card);
+        expect(handleClick).not.toHaveBeenCalled();
+        expect(card).toHaveAttribute('aria-disabled', 'true');
+    });
+    test('renders no rows when an empty rows array is provided', () => {
+        render(_jsx(DataViewCard, { header: "Christopher Longbottom", rows: [] }));
+        expect(screen.getByRole('heading', { level: 4 })).toBeInTheDocument();
+        expect(screen.queryByText('Year')).not.toBeInTheDocument();
+    });
+    test('forwards a custom className to the underlying Card', () => {
+        const { container } = render(_jsx(DataViewCard, { className: "custom-data-view-card", header: "Christopher Longbottom", rows: baseRows }));
+        expect(container.querySelector('.custom-data-view-card')).toBeInTheDocument();
+    });
+});
+//# sourceMappingURL=DataViewCard.test.js.map

package/dist/components/dataViewCard/DataViewCard.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataViewCard.test.js","sourceRoot":"","sources":["../../../src/components/dataViewCard/DataViewCard.test.tsx"],"names":[],"mappings":"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"}

package/dist/components/row/Row.d.ts

@@ -1,6 +1,7 @@
-import type { MouseEventHandler } from 'react';
+import type { CSSProperties, MouseEventHandler } from 'react';
 export type RowProps = {
     className?: string;
+    style?: CSSProperties;
     label?: string;
     value?: string;
     note?: string;

package/dist/components/row/Row.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Row.d.ts","sourceRoot":"","sources":["../../../src/components/row/Row.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAc,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG3D,MAAM,MAAM,QAAQ,GAAG;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;CAC7C,CAAC;AAEF,eAAO,MAAM,GAAG,GAAI,OAAO,QAAQ,4CAwClC,CAAC;AAEF,yBAAiB,GAAG,CAAC;IACnB,KAAY,KAAK,GAAG,QAAQ,CAAC;CAC9B"}
+{"version":3,"file":"Row.d.ts","sourceRoot":"","sources":["../../../src/components/row/Row.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAc,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG1E,MAAM,MAAM,QAAQ,GAAG;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;CAC7C,CAAC;AAEF,eAAO,MAAM,GAAG,GAAI,OAAO,QAAQ,4CA0ClC,CAAC;AAEF,yBAAiB,GAAG,CAAC;IACnB,KAAY,KAAK,GAAG,QAAQ,CAAC;CAC9B"}

package/dist/components/row/Row.js

@@ -3,11 +3,11 @@ import classNames from 'classnames';
 import { Icon } from '../icon/Icon';
 import { ENTER_KEY, SPACE_KEY } from '../../utils/keyboardConstants';
 export const Row = (props) => {
-    const { className, label, value, note, onClick, } = props;
+    const { className, style, label, value, note, onClick, } = props;
     const isClickable = !!onClick;
     return (_jsxs("div", { className: classNames('ds-row', {
             'ds-row--clickable': isClickable,
-        }, className), onClick: onClick, onKeyDown: (e) => {
+        }, className), style: style, onClick: onClick, onKeyDown: (e) => {
             if (isClickable && [ENTER_KEY, SPACE_KEY].includes(e.key)) {
                 e.preventDefault();
                 onClick(e);

package/dist/components/row/Row.js.map

@@ -1 +1 @@
-{"version":3,"file":"Row.js","sourceRoot":"","sources":["../../../src/components/row/Row.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAE5C,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAU/D,MAAM,CAAC,MAAM,GAAG,GAAG,CAAC,KAAe,EAAE,EAAE;IACrC,MAAM,EACJ,SAAS,EACT,KAAK,EACL,KAAK,EACL,IAAI,EACJ,OAAO,GACR,GAAG,KAAK,CAAC;IAEV,MAAM,WAAW,GAAG,CAAC,CAAC,OAAO,CAAC;IAE9B,OAAO,CACL,eACE,SAAS,EAAE,UAAU,CACnB,QAAQ,EACR;YACE,mBAAmB,EAAE,WAAW;SACjC,EACD,SAAS,CACV,EACD,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;YACf,IAAI,WAAW,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC;gBAC1D,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,OAAO,CAAC,CAA0C,CAAC,CAAC;YACtD,CAAC;QACH,CAAC,EACD,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,aAE9B,eAAM,SAAS,EAAC,eAAe,YAAE,KAAK,GAAQ,EAC9C,eAAM,SAAS,EAAC,eAAe,YAAE,KAAK,GAAQ,EAC9C,eAAM,SAAS,EAAC,cAAc,YAAE,IAAI,GAAQ,EAC3C,WAAW,IAAI,CACd,8BACE,KAAC,IAAI,IAAC,IAAI,EAAC,eAAe,EAAC,SAAS,EAAC,oBAAoB,EAAC,IAAI,EAAE,EAAE,GAAI,EACtE,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,EAAC,SAAS,EAAC,oBAAoB,EAAC,IAAI,EAAE,EAAE,GAAI,IACnE,CACJ,IACG,CACP,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"Row.js","sourceRoot":"","sources":["../../../src/components/row/Row.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAE5C,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAW/D,MAAM,CAAC,MAAM,GAAG,GAAG,CAAC,KAAe,EAAE,EAAE;IACrC,MAAM,EACJ,SAAS,EACT,KAAK,EACL,KAAK,EACL,KAAK,EACL,IAAI,EACJ,OAAO,GACR,GAAG,KAAK,CAAC;IAEV,MAAM,WAAW,GAAG,CAAC,CAAC,OAAO,CAAC;IAE9B,OAAO,CACL,eACE,SAAS,EAAE,UAAU,CACnB,QAAQ,EACR;YACE,mBAAmB,EAAE,WAAW;SACjC,EACD,SAAS,CACV,EACD,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;YACf,IAAI,WAAW,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC;gBAC1D,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,OAAO,CAAC,CAA0C,CAAC,CAAC;YACtD,CAAC;QACH,CAAC,EACD,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,aAE9B,eAAM,SAAS,EAAC,eAAe,YAAE,KAAK,GAAQ,EAC9C,eAAM,SAAS,EAAC,eAAe,YAAE,KAAK,GAAQ,EAC9C,eAAM,SAAS,EAAC,cAAc,YAAE,IAAI,GAAQ,EAC3C,WAAW,IAAI,CACd,8BACE,KAAC,IAAI,IAAC,IAAI,EAAC,eAAe,EAAC,SAAS,EAAC,oBAAoB,EAAC,IAAI,EAAE,EAAE,GAAI,EACtE,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,EAAC,SAAS,EAAC,oBAAoB,EAAC,IAAI,EAAE,EAAE,GAAI,IACnE,CACJ,IACG,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/components/treeRow/TreeRow.d.ts

@@ -0,0 +1,32 @@
+import type { MouseEventHandler, ReactNode } from 'react';
+export type { TreeRowSectionProps } from '../treeRow/TreeRowSection';
+export type TreeRowItem = {
+    id?: string;
+    label?: string;
+    value?: string;
+    note?: string;
+    onClick?: MouseEventHandler<HTMLDivElement>;
+    children?: TreeRowItem[];
+};
+type TreeRowBaseProps = {
+    defaultValue?: string[];
+    className?: string;
+};
+type TreeRowDataDrivenProps = TreeRowBaseProps & {
+    items: TreeRowItem[];
+    children?: never;
+};
+type TreeRowCompoundProps = TreeRowBaseProps & {
+    items?: never;
+    children?: ReactNode;
+};
+export type TreeRowProps = TreeRowDataDrivenProps | TreeRowCompoundProps;
+export declare const TreeRow: {
+    ({ items, defaultValue, children, className }: TreeRowProps): import("react/jsx-runtime").JSX.Element;
+    Section: ({ id: idProp, label, children, className, onClick }: import("../treeRow/TreeRowSection").TreeRowSectionProps) => import("react/jsx-runtime").JSX.Element;
+};
+export declare namespace TreeRow {
+    type Item = TreeRowItem;
+    type Props = TreeRowProps;
+}
+//# sourceMappingURL=TreeRow.d.ts.map

package/dist/components/treeRow/TreeRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeRow.d.ts","sourceRoot":"","sources":["../../../src/components/treeRow/TreeRow.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAM1D,YAAY,EAAE,mBAAmB,EAAE,MAAM,mCAAmC,CAAC;AAE7E,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;IAC5C,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC;CAC1B,CAAC;AAEF,KAAK,gBAAgB,GAAG;IACtB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,KAAK,sBAAsB,GAAG,gBAAgB,GAAG;IAC/C,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB,CAAC;AAEF,KAAK,oBAAoB,GAAG,gBAAgB,GAAG;IAC7C,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,sBAAsB,GAAG,oBAAoB,CAAC;AAkCzE,eAAO,MAAM,OAAO;mDAAkD,YAAY;;CAUjF,CAAC;AAIF,yBAAiB,OAAO,CAAC;IACvB,KAAY,IAAI,GAAG,WAAW,CAAC;IAC/B,KAAY,KAAK,GAAG,YAAY,CAAC;CAClC"}

package/dist/components/treeRow/TreeRow.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useContext } from 'react';
+import * as Accordion from '@radix-ui/react-accordion';
+import classNames from 'classnames';
+import { Row } from '../row/Row';
+import { DepthContext, getDepthPadding, TreeRowSection } from '../treeRow/TreeRowSection';
+const DataDrivenList = ({ items }) => {
+    const depth = useContext(DepthContext);
+    return (_jsx(_Fragment, { children: items.map((item, index) => {
+            const hasChildren = Array.isArray(item.children) && item.children.length > 0;
+            if (!hasChildren) {
+                return (_jsx(Row, { label: item.label, value: item.value, note: item.note, onClick: item.onClick, className: "ds-tree-row__row", style: { paddingLeft: getDepthPadding(depth) } }, item.id ?? item.label ?? String(index)));
+            }
+            return (_jsx(TreeRowSection, { id: item.id, label: item.label ?? '', onClick: item.onClick, children: _jsx(DataDrivenList, { items: item.children ?? [] }) }, item.id ?? item.label ?? String(index)));
+        }) }));
+};
+export const TreeRow = ({ items, defaultValue, children, className }) => (_jsx(Accordion.Root, { type: "multiple", defaultValue: defaultValue, className: classNames('ds-tree-row', className), children: _jsx(DepthContext.Provider, { value: 0, children: items ? _jsx(DataDrivenList, { items: items }) : children }) }));
+TreeRow.Section = TreeRowSection;
+//# sourceMappingURL=TreeRow.js.map

package/dist/components/treeRow/TreeRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeRow.js","sourceRoot":"","sources":["../../../src/components/treeRow/TreeRow.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,KAAK,SAAS,MAAM,2BAA2B,CAAC;AACvD,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AA8BlG,MAAM,cAAc,GAAG,CAAC,EAAE,KAAK,EAA4B,EAAE,EAAE;IAC7D,MAAM,KAAK,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAEvC,OAAO,CACL,4BACG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YACzB,MAAM,WAAW,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;YAE7E,IAAI,CAAC,WAAW,EAAE,CAAC;gBACjB,OAAO,CACL,KAAC,GAAG,IAEF,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,SAAS,EAAC,kBAAkB,EAC5B,KAAK,EAAE,EAAE,WAAW,EAAE,eAAe,CAAC,KAAK,CAAC,EAAE,IANzC,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,KAAK,IAAI,MAAM,CAAC,KAAK,CAAC,CAO3C,CACH,CAAC;YACJ,CAAC;YAED,OAAO,CACL,KAAC,cAAc,IAA8C,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,YACtH,KAAC,cAAc,IAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,IAAI,EAAE,GAAI,IAD3B,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,KAAK,IAAI,MAAM,CAAC,KAAK,CAAC,CAE1C,CAClB,CAAC;QACJ,CAAC,CAAC,GACD,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,SAAS,EAAgB,EAAE,EAAE,CAAC,CACrF,KAAC,SAAS,CAAC,IAAI,IACb,IAAI,EAAC,UAAU,EACf,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,UAAU,CAAC,aAAa,EAAE,SAAS,CAAC,YAE/C,KAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,CAAC,YAC5B,KAAK,CAAC,CAAC,CAAC,KAAC,cAAc,IAAC,KAAK,EAAE,KAAK,GAAI,CAAC,CAAC,CAAC,QAAQ,GAC9B,GACT,CAClB,CAAC;AAEF,OAAO,CAAC,OAAO,GAAG,cAAc,CAAC"}

package/dist/components/treeRow/TreeRow.stories.d.ts

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { TreeRow } from '../treeRow/TreeRow';
+declare const meta: Meta<typeof TreeRow>;
+export default meta;
+type Story = StoryObj<typeof TreeRow>;
+export declare const Default: Story;
+export declare const PreOpenedSections: Story;
+export declare const DeepNesting: Story;
+export declare const ClickableSections: Story;
+export declare const ClickableRows: Story;
+export declare const MixedClickability: Story;
+export declare const WithClickFeedback: Story;
+//# sourceMappingURL=TreeRow.stories.d.ts.map

package/dist/components/treeRow/TreeRow.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeRow.stories.d.ts","sourceRoot":"","sources":["../../../src/components/treeRow/TreeRow.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAW5D,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AA+JrD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CA8C9B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,CAAC,CAAC;AAMtC,eAAO,MAAM,OAAO,EAAE,KAwBrB,CAAC;AAMF,eAAO,MAAM,iBAAiB,EAAE,KA6F/B,CAAC;AAMF,eAAO,MAAM,WAAW,EAAE,KAuHzB,CAAC;AAMF,eAAO,MAAM,iBAAiB,EAAE,KA2F/B,CAAC;AAMF,eAAO,MAAM,aAAa,EAAE,KAiF3B,CAAC;AAMF,eAAO,MAAM,iBAAiB,EAAE,KA6F/B,CAAC;AAkDF,eAAO,MAAM,iBAAiB,EAAE,KA8D/B,CAAC"}