@popsure/dirty-swan 0.66.19 → 0.66.21

package/dist/esm/components/table/components/TableContents/TableContents.test.js

@@ -31,6 +31,8 @@ import '../TableCell/CardCell/CardCell.js';
 import '../../../cards/card/index.js';
 import '../../../icon/icons/ChevronRight.js';
 import '../TableCell/ButtonCell/ButtonCell.js';
+import '../../../icon/icons/CircleSelected.js';
+import '../../../icon/icons/CircleUnselected.js';
 import '../../../../useMediaQuery-BlEUymPA.js';
 import '../../../icon/icons/ChevronDown.js';
 import '../../../icon/icons/ChevronUp.js';
@@ -82,5 +84,18 @@ describe('TableContents', function () {
         expect(screen.queryByText('Section 2')).not.toBeInTheDocument();
         expect(screen.queryByText('Item 2.1.1')).not.toBeInTheDocument();
     });
+    it('shows the header row only in the first section when showHeader is set', function () {
+        var container = customRender(jsx(TableContents, { showHeader: true, tableData: mockData, title: "Table" })).container;
+        var tableHeaders = container.querySelectorAll('thead');
+        expect(tableHeaders).toHaveLength(2);
+        expect(tableHeaders[0]).not.toHaveClass('sr-only');
+        expect(tableHeaders[1]).toHaveClass('sr-only');
+    });
+    it('keeps every header row hidden when showHeader is not set', function () {
+        var container = customRender(jsx(TableContents, { tableData: mockData, title: "Table" })).container;
+        container.querySelectorAll('thead').forEach(function (tableHeader) {
+            expect(tableHeader).toHaveClass('sr-only');
+        });
+    });
 });
 //# sourceMappingURL=TableContents.test.js.map

package/dist/esm/components/table/components/TableContents/TableContents.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableContents.test.js","sources":["../../../../../../../src/lib/components/table/components/TableContents/TableContents.test.tsx"],"sourcesContent":["import { fireEvent, render, screen } from '../../../../util/testUtils';\nimport { TableContents, TableContentsProps } from './TableContents';\n\nconst mockData: TableContentsProps['tableData'] = [\n  {\n    rows: [\n      [{ text: 'Item 1.1.1' }, { text: 'Item 1.1.2' }],\n      [{ text: 'Item 1.2.1' }, { text: 'Item 1.2.2' }],\n    ],\n  },\n  {\n    section: {\n      title: 'Section 2',\n    },\n    rows: [\n      [{ text: 'Item 2.1.1' }, { text: 'Item 2.1.2' }],\n      [{ text: 'Item 2.2.1' }, { text: 'Item 2.2.2' }],\n    ],\n  },\n];\n\ndescribe('TableContents', () => {\n  it('renders the table sections with sections', () => {\n    render(\n      <TableContents collapsibleSections tableData={mockData} title=\"Table\" />\n    );\n\n    expect(screen.getByText('Section 2')).toBeInTheDocument();\n  });\n\n  it('renders the table sections with sections data', () => {\n    render(\n      <TableContents collapsibleSections tableData={mockData} title=\"Table\" />\n    );\n\n    expect(screen.getByText('Item 1.2.1')).toBeInTheDocument();\n    expect(screen.getByText('Item 1.2.2')).toBeInTheDocument();\n    expect(screen.getByText('Item 2.1.2')).toBeInTheDocument();\n    expect(screen.getByText('Item 2.2.1')).toBeInTheDocument();\n  });\n\n  it('renders collapsible section headers as buttons and toggles them', () => {\n    render(\n      <TableContents collapsibleSections tableData={mockData} title=\"Table\" />\n    );\n\n    const sectionButton = screen.getByRole('button', { name: 'Section 2' });\n    expect(sectionButton).toHaveAttribute('aria-expanded', 'false');\n\n    fireEvent.click(sectionButton);\n    expect(sectionButton).toHaveAttribute('aria-expanded', 'true');\n  });\n\n  it('renders section headers without a button when not collapsible', () => {\n    render(<TableContents tableData={mockData} title=\"Table\" />);\n\n    expect(\n      screen.queryByRole('button', { name: 'Section 2' })\n    ).not.toBeInTheDocument();\n    expect(screen.getByText('Section 2')).toBeInTheDocument();\n  });\n\n  it('hides the table sections when hideDetails and shouldHideDetails is true', () => {\n    render(\n      <TableContents\n        hideDetails\n        shouldHideDetails\n        tableData={mockData}\n        title=\"Table\"\n      />\n    );\n\n    expect(screen.queryByText('Section 2')).not.toBeInTheDocument();\n    expect(screen.queryByText('Item 2.1.1')).not.toBeInTheDocument();\n  });\n});\n"],"names":["render","_jsx"],"mappings":"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"}
+{"version":3,"file":"TableContents.test.js","sources":["../../../../../../../src/lib/components/table/components/TableContents/TableContents.test.tsx"],"sourcesContent":["import { fireEvent, render, screen } from '../../../../util/testUtils';\nimport { TableContents, TableContentsProps } from './TableContents';\n\nconst mockData: TableContentsProps['tableData'] = [\n  {\n    rows: [\n      [{ text: 'Item 1.1.1' }, { text: 'Item 1.1.2' }],\n      [{ text: 'Item 1.2.1' }, { text: 'Item 1.2.2' }],\n    ],\n  },\n  {\n    section: {\n      title: 'Section 2',\n    },\n    rows: [\n      [{ text: 'Item 2.1.1' }, { text: 'Item 2.1.2' }],\n      [{ text: 'Item 2.2.1' }, { text: 'Item 2.2.2' }],\n    ],\n  },\n];\n\ndescribe('TableContents', () => {\n  it('renders the table sections with sections', () => {\n    render(\n      <TableContents collapsibleSections tableData={mockData} title=\"Table\" />\n    );\n\n    expect(screen.getByText('Section 2')).toBeInTheDocument();\n  });\n\n  it('renders the table sections with sections data', () => {\n    render(\n      <TableContents collapsibleSections tableData={mockData} title=\"Table\" />\n    );\n\n    expect(screen.getByText('Item 1.2.1')).toBeInTheDocument();\n    expect(screen.getByText('Item 1.2.2')).toBeInTheDocument();\n    expect(screen.getByText('Item 2.1.2')).toBeInTheDocument();\n    expect(screen.getByText('Item 2.2.1')).toBeInTheDocument();\n  });\n\n  it('renders collapsible section headers as buttons and toggles them', () => {\n    render(\n      <TableContents collapsibleSections tableData={mockData} title=\"Table\" />\n    );\n\n    const sectionButton = screen.getByRole('button', { name: 'Section 2' });\n    expect(sectionButton).toHaveAttribute('aria-expanded', 'false');\n\n    fireEvent.click(sectionButton);\n    expect(sectionButton).toHaveAttribute('aria-expanded', 'true');\n  });\n\n  it('renders section headers without a button when not collapsible', () => {\n    render(<TableContents tableData={mockData} title=\"Table\" />);\n\n    expect(\n      screen.queryByRole('button', { name: 'Section 2' })\n    ).not.toBeInTheDocument();\n    expect(screen.getByText('Section 2')).toBeInTheDocument();\n  });\n\n  it('hides the table sections when hideDetails and shouldHideDetails is true', () => {\n    render(\n      <TableContents\n        hideDetails\n        shouldHideDetails\n        tableData={mockData}\n        title=\"Table\"\n      />\n    );\n\n    expect(screen.queryByText('Section 2')).not.toBeInTheDocument();\n    expect(screen.queryByText('Item 2.1.1')).not.toBeInTheDocument();\n  });\n\n  it('shows the header row only in the first section when showHeader is set', () => {\n    const { container } = render(\n      <TableContents showHeader tableData={mockData} title=\"Table\" />\n    );\n\n    const tableHeaders = container.querySelectorAll('thead');\n    expect(tableHeaders).toHaveLength(2);\n    expect(tableHeaders[0]).not.toHaveClass('sr-only');\n    expect(tableHeaders[1]).toHaveClass('sr-only');\n  });\n\n  it('keeps every header row hidden when showHeader is not set', () => {\n    const { container } = render(\n      <TableContents tableData={mockData} title=\"Table\" />\n    );\n\n    container.querySelectorAll('thead').forEach((tableHeader) => {\n      expect(tableHeader).toHaveClass('sr-only');\n    });\n  });\n});\n"],"names":["render","_jsx"],"mappings":"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"}

package/dist/esm/components/table/components/TableSection/TableSection.js

@@ -27,4 +27,6 @@ import '../TableCell/CardCell/CardCell.js';
 import '../../../cards/card/index.js';
 import '../../../icon/icons/ChevronRight.js';
 import '../TableCell/ButtonCell/ButtonCell.js';
+import '../../../icon/icons/CircleSelected.js';
+import '../../../icon/icons/CircleUnselected.js';
 //# sourceMappingURL=TableSection.js.map

package/dist/esm/components/table/components/TableSection/TableSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableSection.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"TableSection.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/components/table/components/TableSection/TableSection.test.js

@@ -30,6 +30,8 @@ import '../TableCell/CardCell/CardCell.js';
 import '../../../cards/card/index.js';
 import '../../../icon/icons/ChevronRight.js';
 import '../TableCell/ButtonCell/ButtonCell.js';
+import '../../../icon/icons/CircleSelected.js';
+import '../../../icon/icons/CircleUnselected.js';
 import '../../../../useMediaQuery-BlEUymPA.js';
 
 var tableCellRows = [

package/dist/esm/components/table/components/TableSection/TableSection.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableSection.test.js","sources":["../../../../../../../src/lib/components/table/components/TableSection/TableSection.test.tsx"],"sourcesContent":["import { render, screen } from '../../../../util/testUtils';\nimport { TableSection, TableSectionProps } from './TableSection';\n\nconst tableCellRows: TableSectionProps['tableCellRows'] = [\n  [{ text: 'Cell 1.1' }, { text: 'Cell 1.2' }, { text: 'Cell 1.3' }],\n  [{ text: 'Cell 2.1' }, { text: 'Cell 2.2' }, { text: 'Cell 2.3' }],\n];\n\nconst mockTitle = 'Test Table';\n\nconst mockOpenModal = jest.fn();\n\nconst defaultProps: TableSectionProps = {\n  tableCellRows,\n  title: mockTitle,\n  openModal: mockOpenModal,\n};\n\ndescribe('TableSection', () => {\n  it('renders the table caption', () => {\n    render(<TableSection {...defaultProps} />);\n\n    expect(screen.getByText(mockTitle)).toBeInTheDocument();\n  });\n\n  it('renders the table with correct data', () => {\n    render(<TableSection {...defaultProps} />);\n\n    expect(screen.getByText('Cell 1.1')).toBeInTheDocument();\n    expect(screen.getByText('Cell 1.2')).toBeInTheDocument();\n    expect(screen.getByText('Cell 1.3')).toBeInTheDocument();\n\n    expect(screen.getByText('Cell 2.1')).toBeInTheDocument();\n    expect(screen.getByText('Cell 2.2')).toBeInTheDocument();\n    expect(screen.getByText('Cell 2.3')).toBeInTheDocument();\n  });\n\n  it('should render table headers', () => {\n    const { container } = render(<TableSection {...defaultProps} />);\n\n    const thElements = container.querySelectorAll('th');\n\n    expect(thElements.length).toBe(4);\n    expect(thElements[0]).toHaveTextContent('Cell 1.1');\n    expect(thElements[3]).toHaveTextContent('Cell 2.1');\n  });\n\n  it('should render table data cells', () => {\n    const { container } = render(<TableSection {...defaultProps} />);\n\n    const tdElements = container.querySelectorAll('td');\n    expect(tdElements.length).toBe(2);\n    expect(tdElements[0]).toHaveTextContent('Cell 2.2');\n    expect(tdElements[1]).toHaveTextContent('Cell 2.3');\n  });\n});\n"],"names":["render","_jsx"],"mappings":"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"}
+{"version":3,"file":"TableSection.test.js","sources":["../../../../../../../src/lib/components/table/components/TableSection/TableSection.test.tsx"],"sourcesContent":["import { render, screen } from '../../../../util/testUtils';\nimport { TableSection, TableSectionProps } from './TableSection';\n\nconst tableCellRows: TableSectionProps['tableCellRows'] = [\n  [{ text: 'Cell 1.1' }, { text: 'Cell 1.2' }, { text: 'Cell 1.3' }],\n  [{ text: 'Cell 2.1' }, { text: 'Cell 2.2' }, { text: 'Cell 2.3' }],\n];\n\nconst mockTitle = 'Test Table';\n\nconst mockOpenModal = jest.fn();\n\nconst defaultProps: TableSectionProps = {\n  tableCellRows,\n  title: mockTitle,\n  openModal: mockOpenModal,\n};\n\ndescribe('TableSection', () => {\n  it('renders the table caption', () => {\n    render(<TableSection {...defaultProps} />);\n\n    expect(screen.getByText(mockTitle)).toBeInTheDocument();\n  });\n\n  it('renders the table with correct data', () => {\n    render(<TableSection {...defaultProps} />);\n\n    expect(screen.getByText('Cell 1.1')).toBeInTheDocument();\n    expect(screen.getByText('Cell 1.2')).toBeInTheDocument();\n    expect(screen.getByText('Cell 1.3')).toBeInTheDocument();\n\n    expect(screen.getByText('Cell 2.1')).toBeInTheDocument();\n    expect(screen.getByText('Cell 2.2')).toBeInTheDocument();\n    expect(screen.getByText('Cell 2.3')).toBeInTheDocument();\n  });\n\n  it('should render table headers', () => {\n    const { container } = render(<TableSection {...defaultProps} />);\n\n    const thElements = container.querySelectorAll('th');\n\n    expect(thElements.length).toBe(4);\n    expect(thElements[0]).toHaveTextContent('Cell 1.1');\n    expect(thElements[3]).toHaveTextContent('Cell 2.1');\n  });\n\n  it('should render table data cells', () => {\n    const { container } = render(<TableSection {...defaultProps} />);\n\n    const tdElements = container.querySelectorAll('td');\n    expect(tdElements.length).toBe(2);\n    expect(tdElements[0]).toHaveTextContent('Cell 2.2');\n    expect(tdElements[1]).toHaveTextContent('Cell 2.3');\n  });\n});\n"],"names":["render","_jsx"],"mappings":"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"}

package/dist/esm/components/tabs/Tabs.js

@@ -0,0 +1,40 @@
+import { jsx } from 'react/jsx-runtime';
+import { c as classNames } from '../../index-DLQEsiym.js';
+import { useRef, useCallback } from 'react';
+import { s as styleInject } from '../../style-inject.es-tgCJW-Cu.js';
+import '../../_commonjsHelpers-BFTU3MAI.js';
+
+var css_248z = ".Tabs-module_fw-normal__11b64 {\n  font-weight: 400 !important;\n}\n\n.Tabs-module_fw-bold__2B416 {\n  font-weight: 600 !important;\n}\n\n.Tabs-module_tabs__1Orza {\n  display: flex;\n  column-gap: 24px;\n}\n\n.Tabs-module_tab__3b1j3 {\n  border: none;\n  border-bottom: 2px solid transparent;\n  font-weight: 600;\n  padding: 0 0 4px;\n  color: #b8b8c0;\n}\n.Tabs-module_tab__3b1j3:hover, .Tabs-module_tabActive__ZvZyX {\n  color: #26262e;\n  border-bottom-color: #26262e;\n}\n.Tabs-module_tab__3b1j3:focus-visible {\n  outline: 1px solid #26262e;\n  outline-offset: 2px;\n  border-radius: 2px;\n}";
+var styles = {"tabs":"Tabs-module_tabs__1Orza","tab":"Tabs-module_tab__3b1j3","tabActive":"Tabs-module_tabActive__ZvZyX"};
+styleInject(css_248z);
+
+var Tabs = function (_a) {
+    var tabs = _a.tabs, activeIndex = _a.activeIndex, onTabChange = _a.onTabChange, className = _a.className;
+    var tabRefs = useRef([]);
+    var setTabRef = useCallback(function (index) { return function (el) {
+        tabRefs.current[index] = el;
+    }; }, []);
+    var handleKeyDown = function (e, index) {
+        var _a;
+        var count = tabs.length;
+        var nextIndex = null;
+        if (e.key === 'ArrowRight')
+            nextIndex = (index + 1) % count;
+        if (e.key === 'ArrowLeft')
+            nextIndex = (index - 1 + count) % count;
+        if (nextIndex !== null) {
+            e.preventDefault();
+            onTabChange(nextIndex);
+            (_a = tabRefs.current[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true });
+        }
+    };
+    return (jsx("div", { className: classNames(styles.tabs, className), role: "tablist", children: tabs.map(function (tab, index) {
+            var _a;
+            return (jsx("button", { ref: setTabRef(index), type: "button", role: "tab", "aria-selected": activeIndex === index, tabIndex: activeIndex === index ? 0 : -1, className: classNames('p-p bg-transparent c-pointer', styles.tab, (_a = {},
+                    _a[styles.tabActive] = activeIndex === index,
+                    _a)), onClick: function () { return onTabChange(index); }, onKeyDown: function (e) { return handleKeyDown(e, index); }, children: tab.label }, tab.id));
+        }) }));
+};
+
+export { Tabs };
+//# sourceMappingURL=Tabs.js.map

package/dist/esm/components/tabs/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","sources":["../../../../../src/lib/components/tabs/Tabs.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { KeyboardEvent, useCallback, useRef } from 'react';\n\nimport styles from './Tabs.module.scss';\n\nexport interface TabItem {\n  id: string;\n  label: string;\n}\n\nexport interface TabsProps {\n  tabs: TabItem[];\n  activeIndex: number;\n  onTabChange: (index: number) => void;\n  className?: string;\n}\n\nconst Tabs = ({ tabs, activeIndex, onTabChange, className }: TabsProps) => {\n  const tabRefs = useRef<(HTMLButtonElement | null)[]>([]);\n\n  const setTabRef = useCallback(\n    (index: number) => (el: HTMLButtonElement | null) => {\n      tabRefs.current[index] = el;\n    },\n    []\n  );\n\n  const handleKeyDown = (e: KeyboardEvent, index: number) => {\n    const count = tabs.length;\n    let nextIndex: number | null = null;\n\n    if (e.key === 'ArrowRight') nextIndex = (index + 1) % count;\n    if (e.key === 'ArrowLeft') nextIndex = (index - 1 + count) % count;\n\n    if (nextIndex !== null) {\n      e.preventDefault();\n      onTabChange(nextIndex);\n      tabRefs.current[nextIndex]?.focus({ preventScroll: true });\n    }\n  };\n\n  return (\n    <div className={classNames(styles.tabs, className)} role=\"tablist\">\n      {tabs.map((tab, index) => (\n        <button\n          ref={setTabRef(index)}\n          key={tab.id}\n          type=\"button\"\n          role=\"tab\"\n          aria-selected={activeIndex === index}\n          tabIndex={activeIndex === index ? 0 : -1}\n          className={classNames('p-p bg-transparent c-pointer', styles.tab, {\n            [styles.tabActive]: activeIndex === index,\n          })}\n          onClick={() => onTabChange(index)}\n          onKeyDown={(e) => handleKeyDown(e, index)}\n        >\n          {tab.label}\n        </button>\n      ))}\n    </div>\n  );\n};\n\nexport { Tabs };\n"],"names":["_jsx"],"mappings":";;;;;;;;;;AAiBA,IAAM,IAAI,GAAG,UAAC,EAAwD,EAAA;QAAtD,IAAI,GAAA,EAAA,CAAA,IAAA,EAAE,WAAW,GAAA,EAAA,CAAA,WAAA,EAAE,WAAW,GAAA,EAAA,CAAA,WAAA,EAAE,SAAS,GAAA,EAAA,CAAA,SAAA;AACvD,IAAA,IAAM,OAAO,GAAG,MAAM,CAA+B,EAAE,CAAC;IAExD,IAAM,SAAS,GAAG,WAAW,CAC3B,UAAC,KAAa,EAAA,EAAK,OAAA,UAAC,EAA4B,EAAA;AAC9C,QAAA,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,EAAE;AAC7B,IAAA,CAAC,CAAA,CAFkB,CAElB,EACD,EAAE,CACH;AAED,IAAA,IAAM,aAAa,GAAG,UAAC,CAAgB,EAAE,KAAa,EAAA;;AACpD,QAAA,IAAM,KAAK,GAAG,IAAI,CAAC,MAAM;QACzB,IAAI,SAAS,GAAkB,IAAI;AAEnC,QAAA,IAAI,CAAC,CAAC,GAAG,KAAK,YAAY;YAAE,SAAS,GAAG,CAAC,KAAK,GAAG,CAAC,IAAI,KAAK;AAC3D,QAAA,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW;YAAE,SAAS,GAAG,CAAC,KAAK,GAAG,CAAC,GAAG,KAAK,IAAI,KAAK;AAElE,QAAA,IAAI,SAAS,KAAK,IAAI,EAAE;YACtB,CAAC,CAAC,cAAc,EAAE;YAClB,WAAW,CAAC,SAAS,CAAC;AACtB,YAAA,CAAA,EAAA,GAAA,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC;QAC5D;AACF,IAAA,CAAC;IAED,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,EAAE,IAAI,EAAC,SAAS,EAAA,QAAA,EAC/D,IAAI,CAAC,GAAG,CAAC,UAAC,GAAG,EAAE,KAAK,EAAA;;YAAK,QACxBA,gBACE,GAAG,EAAE,SAAS,CAAC,KAAK,CAAC,EAErB,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,KAAK,mBACK,WAAW,KAAK,KAAK,EACpC,QAAQ,EAAE,WAAW,KAAK,KAAK,GAAG,CAAC,GAAG,EAAE,EACxC,SAAS,EAAE,UAAU,CAAC,8BAA8B,EAAE,MAAM,CAAC,GAAG,GAAA,EAAA,GAAA,EAAA;AAC9D,oBAAA,EAAA,CAAC,MAAM,CAAC,SAAS,CAAA,GAAG,WAAW,KAAK,KAAK;AACzC,oBAAA,EAAA,EAAA,EACF,OAAO,EAAE,YAAA,EAAM,OAAA,WAAW,CAAC,KAAK,CAAC,CAAA,CAAlB,CAAkB,EACjC,SAAS,EAAE,UAAC,CAAC,EAAA,EAAK,OAAA,aAAa,CAAC,CAAC,EAAE,KAAK,CAAC,EAAvB,CAAuB,EAAA,QAAA,EAExC,GAAG,CAAC,KAAK,EAAA,EAXL,GAAG,CAAC,EAAE,CAYJ;QAfe,CAgBzB,CAAC,EAAA,CACE;AAEV;;;;"}

package/dist/esm/components/tabs/Tabs.stories.js

@@ -0,0 +1,77 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { Tabs } from './Tabs.js';
+import '../../index-DLQEsiym.js';
+import '../../_commonjsHelpers-BFTU3MAI.js';
+import '../../style-inject.es-tgCJW-Cu.js';
+
+var story = {
+    title: 'JSX/Tabs',
+    component: Tabs,
+    argTypes: {
+        tabs: {
+            description: 'Array of tab items with id and label',
+        },
+        activeIndex: {
+            description: 'The currently active tab index',
+        },
+        onTabChange: {
+            action: true,
+            table: {
+                category: 'Callbacks',
+            },
+        },
+        className: {
+            description: 'Optional CSS class to apply to the tabs container',
+        },
+    },
+    args: {
+        tabs: [
+            { id: 'basic', label: 'Basic' },
+            { id: 'standard', label: 'Standard' },
+            { id: 'premium', label: 'Premium' },
+        ],
+        activeIndex: 0,
+    },
+    parameters: {
+        componentSubtitle: 'A horizontal tab bar for switching between content sections.',
+    },
+};
+var Default = {
+    render: function (_a) {
+        var tabs = _a.tabs, activeIndex = _a.activeIndex, onTabChange = _a.onTabChange;
+        var _b = useState(activeIndex), index = _b[0], setIndex = _b[1];
+        var handleChange = function (newIndex) {
+            onTabChange === null || onTabChange === void 0 ? void 0 : onTabChange(newIndex);
+            setIndex(newIndex);
+        };
+        return jsx(Tabs, { tabs: tabs, activeIndex: index, onTabChange: handleChange });
+    },
+    name: 'Default',
+};
+var TwoTabs = {
+    render: function () {
+        var _a = useState(0), index = _a[0], setIndex = _a[1];
+        return (jsx(Tabs, { tabs: [
+                { id: 'monthly', label: 'Monthly' },
+                { id: 'yearly', label: 'Yearly' },
+            ], activeIndex: index, onTabChange: setIndex }));
+    },
+    name: 'Two Tabs',
+};
+var ManyTabs = {
+    render: function () {
+        var _a = useState(0), index = _a[0], setIndex = _a[1];
+        return (jsx(Tabs, { tabs: [
+                { id: 'overview', label: 'Overview' },
+                { id: 'coverage', label: 'Coverage' },
+                { id: 'pricing', label: 'Pricing' },
+                { id: 'reviews', label: 'Reviews' },
+                { id: 'faq', label: 'FAQ' },
+            ], activeIndex: index, onTabChange: setIndex }));
+    },
+    name: 'Many Tabs',
+};
+
+export { Default, ManyTabs, TwoTabs, story as default };
+//# sourceMappingURL=Tabs.stories.js.map

package/dist/esm/components/tabs/Tabs.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.stories.js","sources":["../../../../../src/lib/components/tabs/Tabs.stories.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { Tabs, TabsProps } from './Tabs';\n\nconst story = {\n  title: 'JSX/Tabs',\n  component: Tabs,\n  argTypes: {\n    tabs: {\n      description: 'Array of tab items with id and label',\n    },\n    activeIndex: {\n      description: 'The currently active tab index',\n    },\n    onTabChange: {\n      action: true,\n      table: {\n        category: 'Callbacks',\n      },\n    },\n    className: {\n      description: 'Optional CSS class to apply to the tabs container',\n    },\n  },\n  args: {\n    tabs: [\n      { id: 'basic', label: 'Basic' },\n      { id: 'standard', label: 'Standard' },\n      { id: 'premium', label: 'Premium' },\n    ],\n    activeIndex: 0,\n  },\n  parameters: {\n    componentSubtitle:\n      'A horizontal tab bar for switching between content sections.',\n  },\n};\n\nexport const Default = {\n  render: ({ tabs, activeIndex, onTabChange }: TabsProps) => {\n    const [index, setIndex] = useState(activeIndex);\n\n    const handleChange = (newIndex: number) => {\n      onTabChange?.(newIndex);\n      setIndex(newIndex);\n    };\n\n    return <Tabs tabs={tabs} activeIndex={index} onTabChange={handleChange} />;\n  },\n\n  name: 'Default',\n};\n\nexport const TwoTabs = {\n  render: () => {\n    const [index, setIndex] = useState(0);\n\n    return (\n      <Tabs\n        tabs={[\n          { id: 'monthly', label: 'Monthly' },\n          { id: 'yearly', label: 'Yearly' },\n        ]}\n        activeIndex={index}\n        onTabChange={setIndex}\n      />\n    );\n  },\n\n  name: 'Two Tabs',\n};\n\nexport const ManyTabs = {\n  render: () => {\n    const [index, setIndex] = useState(0);\n\n    return (\n      <Tabs\n        tabs={[\n          { id: 'overview', label: 'Overview' },\n          { id: 'coverage', label: 'Coverage' },\n          { id: 'pricing', label: 'Pricing' },\n          { id: 'reviews', label: 'Reviews' },\n          { id: 'faq', label: 'FAQ' },\n        ]}\n        activeIndex={index}\n        onTabChange={setIndex}\n      />\n    );\n  },\n\n  name: 'Many Tabs',\n};\n\nexport default story;\n"],"names":["_jsx"],"mappings":";;;;;;;AAGA,IAAM,KAAK,GAAG;AACZ,IAAA,KAAK,EAAE,UAAU;AACjB,IAAA,SAAS,EAAE,IAAI;AACf,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE;AACJ,YAAA,WAAW,EAAE,sCAAsC;AACpD,SAAA;AACD,QAAA,WAAW,EAAE;AACX,YAAA,WAAW,EAAE,gCAAgC;AAC9C,SAAA;AACD,QAAA,WAAW,EAAE;AACX,YAAA,MAAM,EAAE,IAAI;AACZ,YAAA,KAAK,EAAE;AACL,gBAAA,QAAQ,EAAE,WAAW;AACtB,aAAA;AACF,SAAA;AACD,QAAA,SAAS,EAAE;AACT,YAAA,WAAW,EAAE,mDAAmD;AACjE,SAAA;AACF,KAAA;AACD,IAAA,IAAI,EAAE;AACJ,QAAA,IAAI,EAAE;AACJ,YAAA,EAAE,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;AAC/B,YAAA,EAAE,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE;AACrC,YAAA,EAAE,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;AACpC,SAAA;AACD,QAAA,WAAW,EAAE,CAAC;AACf,KAAA;AACD,IAAA,UAAU,EAAE;AACV,QAAA,iBAAiB,EACf,8DAA8D;AACjE,KAAA;;AAGI,IAAM,OAAO,GAAG;IACrB,MAAM,EAAE,UAAC,EAA6C,EAAA;AAA3C,QAAA,IAAA,IAAI,UAAA,EAAE,WAAW,GAAA,EAAA,CAAA,WAAA,EAAE,WAAW,GAAA,EAAA,CAAA,WAAA;QACjC,IAAA,EAAA,GAAoB,QAAQ,CAAC,WAAW,CAAC,EAAxC,KAAK,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,QAAQ,GAAA,EAAA,CAAA,CAAA,CAAyB;QAE/C,IAAM,YAAY,GAAG,UAAC,QAAgB,EAAA;AACpC,YAAA,WAAW,aAAX,WAAW,KAAA,MAAA,GAAA,MAAA,GAAX,WAAW,CAAG,QAAQ,CAAC;YACvB,QAAQ,CAAC,QAAQ,CAAC;AACpB,QAAA,CAAC;AAED,QAAA,OAAOA,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,EAAE,YAAY,GAAI;IAC5E,CAAC;AAED,IAAA,IAAI,EAAE,SAAS;;AAGV,IAAM,OAAO,GAAG;AACrB,IAAA,MAAM,EAAE,YAAA;QACA,IAAA,EAAA,GAAoB,QAAQ,CAAC,CAAC,CAAC,EAA9B,KAAK,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,QAAQ,GAAA,EAAA,CAAA,CAAA,CAAe;AAErC,QAAA,QACEA,GAAA,CAAC,IAAI,EAAA,EACH,IAAI,EAAE;AACJ,gBAAA,EAAE,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;AACnC,gBAAA,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;aAClC,EACD,WAAW,EAAE,KAAK,EAClB,WAAW,EAAE,QAAQ,EAAA,CACrB;IAEN,CAAC;AAED,IAAA,IAAI,EAAE,UAAU;;AAGX,IAAM,QAAQ,GAAG;AACtB,IAAA,MAAM,EAAE,YAAA;QACA,IAAA,EAAA,GAAoB,QAAQ,CAAC,CAAC,CAAC,EAA9B,KAAK,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,QAAQ,GAAA,EAAA,CAAA,CAAA,CAAe;AAErC,QAAA,QACEA,GAAA,CAAC,IAAI,EAAA,EACH,IAAI,EAAE;AACJ,gBAAA,EAAE,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE;AACrC,gBAAA,EAAE,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE;AACrC,gBAAA,EAAE,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;AACnC,gBAAA,EAAE,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;AACnC,gBAAA,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE;aAC5B,EACD,WAAW,EAAE,KAAK,EAClB,WAAW,EAAE,QAAQ,EAAA,CACrB;IAEN,CAAC;AAED,IAAA,IAAI,EAAE,WAAW;;;;;"}

package/dist/esm/{index-D41W71Hh.js → index-D7G3EuxU.js}

@@ -89,9 +89,9 @@ import ChevronsLeft from './components/icon/icons/ChevronsLeft.js';
 import ChevronsRight from './components/icon/icons/ChevronsRight.js';
 import ChevronsUp from './components/icon/icons/ChevronsUp.js';
 import Chrome from './components/icon/icons/Chrome.js';
-import CircleSelected from './components/icon/icons/CircleSelected.js';
+import CircleSelectedIcon from './components/icon/icons/CircleSelected.js';
 import CircleSmall from './components/icon/icons/CircleSmall.js';
-import CircleUnselected from './components/icon/icons/CircleUnselected.js';
+import CircleUnselectedIcon from './components/icon/icons/CircleUnselected.js';
 import Circle from './components/icon/icons/Circle.js';
 import Clipboard from './components/icon/icons/Clipboard.js';
 import ClockTime from './components/icon/icons/ClockTime.js';
@@ -477,9 +477,9 @@ var icons = /*#__PURE__*/Object.freeze({
 	ChevronsUpIcon: ChevronsUp,
 	ChromeIcon: Chrome,
 	CircleIcon: Circle,
-	CircleSelectedIcon: CircleSelected,
+	CircleSelectedIcon: CircleSelectedIcon,
 	CircleSmallIcon: CircleSmall,
-	CircleUnselectedIcon: CircleUnselected,
+	CircleUnselectedIcon: CircleUnselectedIcon,
 	ClipboardIcon: Clipboard,
 	ClockTimeIcon: ClockTime,
 	CloudDrizzleIcon: CloudDrizzle,
@@ -788,4 +788,4 @@ var icons = /*#__PURE__*/Object.freeze({
 });
 
 export { icons as i };
-//# sourceMappingURL=index-D41W71Hh.js.map
+//# sourceMappingURL=index-D7G3EuxU.js.map

package/dist/esm/{index-D41W71Hh.js.map → index-D7G3EuxU.js.map}

@@ -1 +1 @@
-{"version":3,"file":"index-D41W71Hh.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index-D7G3EuxU.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/index.js

@@ -31,6 +31,7 @@ export { Toggle } from './components/input/toggle/index.js';
 export { T as Toaster, t as toast } from './index-CT0_LjIR.js';
 export { Accordion } from './components/accordion/index.js';
 export { Table } from './components/table/Table.js';
+export { Tabs } from './components/tabs/Tabs.js';
 import { useEffect } from 'react';
 export { u as useMediaQuery } from './useMediaQuery-BlEUymPA.js';
 export { u as useOnClickOutside } from './useOnClickOutside-B5hujnpp.js';

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/lib/hooks/useFocusWithin.ts"],"sourcesContent":["import { useEffect } from 'react';\n\nexport const useFocusWithin = (\n  ref: HTMLElement | null,\n  callback: (isFocusWithin: boolean) => void\n) => {\n  useEffect(() => {\n    const handleOnFocusIn = () => {\n      if (!ref) {\n        return;\n      }\n\n      const hasFocus = ref?.contains(document.activeElement);\n\n      callback(Boolean(hasFocus));\n    };\n\n    document.addEventListener('focusin', handleOnFocusIn);\n\n    return () => document?.removeEventListener('focusin', handleOnFocusIn);\n  }, [callback, ref]);\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEO,IAAM,cAAc,GAAG,UAC5B,GAAuB,EACvB,QAA0C,EAAA;AAE1C,IAAA,SAAS,CAAC,YAAA;AACR,QAAA,IAAM,eAAe,GAAG,YAAA;YACtB,IAAI,CAAC,GAAG,EAAE;gBACR;YACF;AAEA,YAAA,IAAM,QAAQ,GAAG,GAAG,KAAA,IAAA,IAAH,GAAG,KAAA,MAAA,GAAA,MAAA,GAAH,GAAG,CAAE,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC;AAEtD,YAAA,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;AAC7B,QAAA,CAAC;AAED,QAAA,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,eAAe,CAAC;AAErD,QAAA,OAAO,cAAM,OAAA,QAAQ,KAAA,IAAA,IAAR,QAAQ,uBAAR,QAAQ,CAAE,mBAAmB,CAAC,SAAS,EAAE,eAAe,CAAC,CAAA,CAAzD,CAAyD;AACxE,IAAA,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC;AACrB;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/lib/hooks/useFocusWithin.ts"],"sourcesContent":["import { useEffect } from 'react';\n\nexport const useFocusWithin = (\n  ref: HTMLElement | null,\n  callback: (isFocusWithin: boolean) => void\n) => {\n  useEffect(() => {\n    const handleOnFocusIn = () => {\n      if (!ref) {\n        return;\n      }\n\n      const hasFocus = ref?.contains(document.activeElement);\n\n      callback(Boolean(hasFocus));\n    };\n\n    document.addEventListener('focusin', handleOnFocusIn);\n\n    return () => document?.removeEventListener('focusin', handleOnFocusIn);\n  }, [callback, ref]);\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEO,IAAM,cAAc,GAAG,UAC5B,GAAuB,EACvB,QAA0C,EAAA;AAE1C,IAAA,SAAS,CAAC,YAAA;AACR,QAAA,IAAM,eAAe,GAAG,YAAA;YACtB,IAAI,CAAC,GAAG,EAAE;gBACR;YACF;AAEA,YAAA,IAAM,QAAQ,GAAG,GAAG,KAAA,IAAA,IAAH,GAAG,KAAA,MAAA,GAAA,MAAA,GAAH,GAAG,CAAE,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC;AAEtD,YAAA,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;AAC7B,QAAA,CAAC;AAED,QAAA,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,eAAe,CAAC;AAErD,QAAA,OAAO,cAAM,OAAA,QAAQ,KAAA,IAAA,IAAR,QAAQ,uBAAR,QAAQ,CAAE,mBAAmB,CAAC,SAAS,EAAE,eAAe,CAAC,CAAA,CAAzD,CAAyD;AACxE,IAAA,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC;AACrB;;;;"}

package/dist/esm/lib/components/table/Table.d.ts

@@ -26,6 +26,7 @@ export interface TableProps {
     hideTableNavigation?: boolean;
     hideStickyHeader?: boolean;
     showSelectedColumn?: boolean;
+    mobileNavigationMode?: 'arrows' | 'tabs';
 }
-declare const Table: ({ cellReplacements, className, collapsibleSections, hideColumns, hideDetails, hideRows, imageComponent, modalContentRenderer, onModalOpen, onSelectionChanged, scrollOnOpen, scrollTopOffset, stickyHeaderTopOffset, tableData, textOverrides: definedTextOverrides, title, activeSection: externalActiveSection, hideTableNavigation, hideStickyHeader, showSelectedColumn, }: TableProps) => JSX.Element;
+declare const Table: ({ cellReplacements, className, collapsibleSections, hideColumns, hideDetails, hideRows, imageComponent, modalContentRenderer, onModalOpen, onSelectionChanged, scrollOnOpen, scrollTopOffset, stickyHeaderTopOffset, tableData, textOverrides: definedTextOverrides, title, activeSection: externalActiveSection, hideTableNavigation, hideStickyHeader, showSelectedColumn, mobileNavigationMode, }: TableProps) => JSX.Element;
 export { Table };

package/dist/esm/lib/components/table/Table.stories.d.ts

@@ -2,7 +2,7 @@ import { TableProps } from './Table';
 import { TableData } from './types';
 declare const story: {
     title: string;
-    component: ({ cellReplacements, className, collapsibleSections, hideColumns, hideDetails, hideRows, imageComponent, modalContentRenderer, onModalOpen, onSelectionChanged, scrollOnOpen, scrollTopOffset, stickyHeaderTopOffset, tableData, textOverrides: definedTextOverrides, title, activeSection: externalActiveSection, hideTableNavigation, hideStickyHeader, showSelectedColumn, }: TableProps) => JSX.Element;
+    component: ({ cellReplacements, className, collapsibleSections, hideColumns, hideDetails, hideRows, imageComponent, modalContentRenderer, onModalOpen, onSelectionChanged, scrollOnOpen, scrollTopOffset, stickyHeaderTopOffset, tableData, textOverrides: definedTextOverrides, title, activeSection: externalActiveSection, hideTableNavigation, hideStickyHeader, showSelectedColumn, mobileNavigationMode, }: TableProps) => JSX.Element;
     argTypes: {
         tableData: {
             subContent: string;
@@ -91,9 +91,17 @@ export declare const TwoPlanQuoteWebsite: {
     render: () => JSX.Element;
     name: string;
 };
+export declare const TwoPlanQuote: {
+    render: () => JSX.Element;
+    name: string;
+};
 export declare const ThreePlanQuoteWebsite: {
     render: () => JSX.Element;
     name: string;
 };
+export declare const TabsNavigationMobile: {
+    render: () => JSX.Element;
+    name: string;
+};
 export declare const TableDataType: () => JSX.Element;
 export default story;

package/dist/esm/lib/components/table/components/TableContents/TableContents.d.ts

@@ -17,6 +17,7 @@ export interface TableContentsProps {
     cellReplacements?: CellReplacements;
     imageComponent?: (args: any) => JSX.Element;
     selectedColumn?: number;
+    showHeader?: boolean;
 }
-declare const TableContents: ({ className, collapsibleSections, scrollOnOpen, scrollTopOffset, stickyHeaderRef, tableData, hideColumns, hideDetails, hideRows, isMobile, openModal, shouldHideDetails, title, cellReplacements, imageComponent, selectedColumn, }: TableContentsProps) => JSX.Element;
+declare const TableContents: ({ className, collapsibleSections, scrollOnOpen, scrollTopOffset, stickyHeaderRef, tableData, hideColumns, hideDetails, hideRows, isMobile, openModal, shouldHideDetails, title, cellReplacements, imageComponent, selectedColumn, showHeader, }: TableContentsProps) => JSX.Element;
 export { TableContents };

package/dist/esm/lib/components/tabs/Tabs.d.ts

@@ -0,0 +1,12 @@
+export interface TabItem {
+    id: string;
+    label: string;
+}
+export interface TabsProps {
+    tabs: TabItem[];
+    activeIndex: number;
+    onTabChange: (index: number) => void;
+    className?: string;
+}
+declare const Tabs: ({ tabs, activeIndex, onTabChange, className }: TabsProps) => JSX.Element;
+export { Tabs };

package/dist/esm/lib/components/tabs/Tabs.stories.d.ts

@@ -0,0 +1,45 @@
+import { TabsProps } from './Tabs';
+declare const story: {
+    title: string;
+    component: ({ tabs, activeIndex, onTabChange, className }: TabsProps) => JSX.Element;
+    argTypes: {
+        tabs: {
+            description: string;
+        };
+        activeIndex: {
+            description: string;
+        };
+        onTabChange: {
+            action: boolean;
+            table: {
+                category: string;
+            };
+        };
+        className: {
+            description: string;
+        };
+    };
+    args: {
+        tabs: {
+            id: string;
+            label: string;
+        }[];
+        activeIndex: number;
+    };
+    parameters: {
+        componentSubtitle: string;
+    };
+};
+export declare const Default: {
+    render: ({ tabs, activeIndex, onTabChange }: TabsProps) => JSX.Element;
+    name: string;
+};
+export declare const TwoTabs: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const ManyTabs: {
+    render: () => JSX.Element;
+    name: string;
+};
+export default story;

package/dist/esm/lib/index.d.ts

@@ -28,6 +28,7 @@ import { Toaster, toast } from './components/toast';
 import { IconWrapperProps } from './components/icon/IconWrapper';
 import { Accordion, AccordionProps } from './components/accordion';
 import { Table, TableData, TableProps } from './components/table/Table';
+import { Tabs, TabsProps, TabItem } from './components/tabs/Tabs';
 import { useEscapeKey } from './hooks/useEscapeKey';
 import { useFocusWithin } from './hooks/useFocusWithin';
 import { useMediaQuery } from './hooks/useMediaQuery';
@@ -41,6 +42,6 @@ import { LogoInverted } from './components/logo/LogoInverted';
 import { LogoPositiveColor } from './components/logo/LogoPositiveColor';
 import { LogoPositiveBlack } from './components/logo/LogoPositiveBlack';
 export * from './components/icon';
-export { Accordion, DateSelector, SignaturePad, AutocompleteAddress, Input, MultiDropzone, DownloadButton, IbanInput, BottomModal, RegularModal, BottomOrRegularModal, FullScreenModal, InfoCard, Card, CardButton, Button, CurrencyInput, AutoSuggestMultiSelect, Chip, AutoSuggestInput, ComparisonTable, TableRating, TableTrueFalse, TableRowHeader, TableButton, TableInfoButton, SearchableDropdown, SegmentedControl, Checkbox, Radio, Link, InformationBox, Badge, images, illustrations, Spinner, Table, Toggle, Toaster, toast, useEscapeKey, useFocusWithin, useOnClickOutside, useMediaQuery, LogoColor, LogoWhite, LogoBlack, LogoOrangeBox, LogoInvertedColor, LogoInverted, LogoPositiveColor, LogoPositiveBlack, };
-export type { AccordionProps, SearchableDropdownProps, SearchableDropdownOption, BadgeProps, IllustrationKeys, InformationBoxProps, InputProps, FileType, MultiDropzoneProps, TableHeader, UploadedFile, UploadStatus, CardProps, IconWrapperProps, TableData, TableProps, };
+export { Accordion, DateSelector, SignaturePad, AutocompleteAddress, Input, MultiDropzone, DownloadButton, IbanInput, BottomModal, RegularModal, BottomOrRegularModal, FullScreenModal, InfoCard, Card, CardButton, Button, CurrencyInput, AutoSuggestMultiSelect, Chip, AutoSuggestInput, ComparisonTable, TableRating, TableTrueFalse, TableRowHeader, TableButton, TableInfoButton, SearchableDropdown, SegmentedControl, Checkbox, Radio, Link, InformationBox, Badge, images, illustrations, Spinner, Table, Tabs, Toggle, Toaster, toast, useEscapeKey, useFocusWithin, useOnClickOutside, useMediaQuery, LogoColor, LogoWhite, LogoBlack, LogoOrangeBox, LogoInvertedColor, LogoInverted, LogoPositiveColor, LogoPositiveBlack, };
+export type { AccordionProps, SearchableDropdownProps, SearchableDropdownOption, BadgeProps, IllustrationKeys, InformationBoxProps, InputProps, FileType, MultiDropzoneProps, TableHeader, UploadedFile, UploadStatus, CardProps, IconWrapperProps, TabItem, TabsProps, TableData, TableProps, };
 export type { DownloadStatus } from './models/download';

package/dist/esm/util/images/index.stories.js

@@ -39,6 +39,8 @@ import '../../components/table/components/TableCell/CardCell/CardCell.js';
 import '../../components/cards/card/index.js';
 import '../../components/icon/icons/ChevronRight.js';
 import '../../components/table/components/TableCell/ButtonCell/ButtonCell.js';
+import '../../components/icon/icons/CircleSelected.js';
+import '../../components/icon/icons/CircleUnselected.js';
 
 var css_248z = ".style-module_searchBar__1ADz1 {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  border-bottom: 1px solid #e7e7ed;\n  padding: 4px 20px;\n  z-index: 9;\n}\n\n.style-module_imageWrapper__1t-SZ {\n  width: 32px;\n  height: 32px;\n}\n.style-module_imageWrapper__1t-SZ img {\n  width: 100%;\n}";
 var styles = {"searchBar":"style-module_searchBar__1ADz1","imageWrapper":"style-module_imageWrapper__1t-SZ"};

package/dist/esm/util/images/index.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.stories.js","sources":["../../../../../src/lib/util/images/index.stories.tsx"],"sourcesContent":["import { ChangeEvent, useState } from 'react';\nimport { illustrations } from '../../util/images';\nimport classNames from 'classnames';\nimport { Button, Input } from '../..';\nimport styles from './style.module.scss';\n\nconst story = {\n  title: 'Utils/Illustrations',\n  parameters: {\n    docs: {\n      description: {\n        component:\n          'Use the `illustrations` object export to access our list of available images.',\n      },\n    },\n  },\n};\n\nconst initialImages = Object.entries(illustrations);\n\nexport const Illustrations = () => {\n  const [value, setValue] = useState('');\n  const [options, setOptions] = useState(initialImages);\n\n  const clearSearch = () => {\n    setValue('');\n    setOptions(initialImages);\n  };\n\n  const handleOnSearch = (event: ChangeEvent<HTMLInputElement>) => {\n    const searchValue = event.target.value;\n    setValue(event.target.value);\n\n    if (searchValue === '') {\n      setOptions(initialImages);\n      return;\n    }\n\n    setOptions(\n      initialImages.filter(([key]) =>\n        key.toLowerCase().includes(searchValue.toLowerCase())\n      )\n    );\n  };\n\n  return (\n    <div>\n      <div className={classNames(styles.searchBar, 'bg-white')}>\n        <div className=\"d-flex gap8 wmx12 m-auto\">\n          <Input\n            className=\"w70\"\n            onChange={handleOnSearch}\n            placeholder=\"Search icon\"\n            value={value}\n          />\n          <Button className=\"w30\" disabled={!value} onClick={clearSearch}>\n            Clear search\n          </Button>\n        </div>\n      </div>\n\n      <div className=\"d-flex f-wrap mt80\">\n        {options.map(([iconKey, src]) => (\n          <div key={iconKey} className=\"w20 p8\">\n            <div className=\"br4 p24 pt16 pb16 bg-neutral-50 w100 d-flex fd-column ai-center\">\n              <div className={styles.imageWrapper}>\n                <img src={src} alt={iconKey} />\n              </div>\n              <span className=\"p-p--small mt16\">{iconKey}</span>\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n\nexport default story;\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"index.stories.js","sources":["../../../../../src/lib/util/images/index.stories.tsx"],"sourcesContent":["import { ChangeEvent, useState } from 'react';\nimport { illustrations } from '../../util/images';\nimport classNames from 'classnames';\nimport { Button, Input } from '../..';\nimport styles from './style.module.scss';\n\nconst story = {\n  title: 'Utils/Illustrations',\n  parameters: {\n    docs: {\n      description: {\n        component:\n          'Use the `illustrations` object export to access our list of available images.',\n      },\n    },\n  },\n};\n\nconst initialImages = Object.entries(illustrations);\n\nexport const Illustrations = () => {\n  const [value, setValue] = useState('');\n  const [options, setOptions] = useState(initialImages);\n\n  const clearSearch = () => {\n    setValue('');\n    setOptions(initialImages);\n  };\n\n  const handleOnSearch = (event: ChangeEvent<HTMLInputElement>) => {\n    const searchValue = event.target.value;\n    setValue(event.target.value);\n\n    if (searchValue === '') {\n      setOptions(initialImages);\n      return;\n    }\n\n    setOptions(\n      initialImages.filter(([key]) =>\n        key.toLowerCase().includes(searchValue.toLowerCase())\n      )\n    );\n  };\n\n  return (\n    <div>\n      <div className={classNames(styles.searchBar, 'bg-white')}>\n        <div className=\"d-flex gap8 wmx12 m-auto\">\n          <Input\n            className=\"w70\"\n            onChange={handleOnSearch}\n            placeholder=\"Search icon\"\n            value={value}\n          />\n          <Button className=\"w30\" disabled={!value} onClick={clearSearch}>\n            Clear search\n          </Button>\n        </div>\n      </div>\n\n      <div className=\"d-flex f-wrap mt80\">\n        {options.map(([iconKey, src]) => (\n          <div key={iconKey} className=\"w20 p8\">\n            <div className=\"br4 p24 pt16 pb16 bg-neutral-50 w100 d-flex fd-column ai-center\">\n              <div className={styles.imageWrapper}>\n                <img src={src} alt={iconKey} />\n              </div>\n              <span className=\"p-p--small mt16\">{iconKey}</span>\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n\nexport default story;\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@popsure/dirty-swan",
-  "version": "0.66.19",
+  "version": "0.66.21",
   "author": "Vincent Audoire <vincent@getpopsure.com>",
   "license": "MIT",
   "private": false,

package/src/lib/components/table/Table.stories.tsx

@@ -733,6 +733,103 @@ export const TwoPlanQuoteWebsite = {
   name: 'Two Plan - Website',
 };
 
+const getTwoPlanQuoteData = (
+  selectedPlan: number,
+  setSelectedPlan: (plan: number) => void
+): TableData => [
+  {
+    rows: [
+      [
+        { text: 'Select a plan' },
+        {
+          type: 'BUTTON',
+          buttonCaption: 'Basic',
+          price: '€99/mo',
+          isSelected: selectedPlan === 1,
+          onClick: () => setSelectedPlan(1),
+        },
+        {
+          type: 'BUTTON',
+          buttonCaption: 'Advanced',
+          price: '€134/mo',
+          isSelected: selectedPlan === 2,
+          onClick: () => setSelectedPlan(2),
+        },
+      ],
+      [
+        { text: 'Your contribution' },
+        { text: '€99', description: 'per month', fontVariant: 'PRICE' },
+        { text: '€134', description: 'per month', fontVariant: 'PRICE' },
+      ],
+      [
+        { text: 'Outpatient treatments', modalContent: 'Outpatient info' },
+        { checkmarkValue: true },
+        { checkmarkValue: true },
+      ],
+      [
+        { text: 'Inpatient treatments', modalContent: 'Inpatient info' },
+        { checkmarkValue: false },
+        { checkmarkValue: true },
+      ],
+      [
+        { text: 'Dental care', modalContent: 'Dental info' },
+        { text: '50%' },
+        { text: '80%' },
+      ],
+    ],
+  },
+  {
+    section: {
+      title: 'Coverage details',
+    },
+    rows: [
+      [
+        { text: 'Annual limit' },
+        { text: 'Up to €10,000' },
+        { text: 'Unlimited' },
+      ],
+      [
+        { text: 'Deductible' },
+        { text: '€500' },
+        { text: '€250' },
+      ],
+      [
+        { text: 'Preventive care' },
+        { checkmarkValue: true },
+        { checkmarkValue: true },
+      ],
+      [
+        { text: 'Alternative medicine' },
+        { checkmarkValue: false },
+        { checkmarkValue: true },
+      ],
+    ],
+  },
+];
+
+const TwoPlanQuoteStory = () => {
+  const [selectedPlan, setSelectedPlan] = useState(1);
+
+  return (
+    <div style={{ maxWidth: 900 }}>
+      <Table
+        tableData={getTwoPlanQuoteData(selectedPlan, setSelectedPlan)}
+        title="Two plan quote"
+        collapsibleSections
+        showSelectedColumn
+        activeSection={selectedPlan}
+        onSelectionChanged={setSelectedPlan}
+      />
+    </div>
+  );
+};
+
+export const TwoPlanQuote = {
+  render: () => <TwoPlanQuoteStory />,
+
+  name: 'Two Plan Quote',
+};
+
 const threePlanWebsiteData: TableData = [
   {
     rows: [
@@ -854,6 +951,25 @@ export const ThreePlanQuoteWebsite = {
   name: 'Three Plan - Website',
 };
 
+export const TabsNavigationMobile = {
+  render: () => (
+    <div style={{ maxWidth: 900 }}>
+      <p className="p-p tc-neutral-500 mb16">
+        Resize the browser to a mobile width to see tabs instead of
+        left/right arrow buttons.
+      </p>
+      <Table
+        tableData={threePlanWebsiteData}
+        title="Tabs navigation (mobile)"
+        collapsibleSections
+        mobileNavigationMode="tabs"
+      />
+    </div>
+  ),
+
+  name: 'Tabs Navigation (Mobile)',
+};
+
 export const TableDataType = () => {
   return (
     <pre>