@arbor-education/design-system.components 0.0.2 → 0.0.4

package/dist/components/icon/Icon.stories.d.ts

@@ -6,6 +6,13 @@ export declare const Default: {
         name: string;
         size: number;
     };
+    argTypes: {
+        name: {
+            control: string;
+            description: string;
+            options: string[];
+        };
+    };
 };
 export default meta;
 //# sourceMappingURL=Icon.stories.d.ts.map

package/dist/components/icon/Icon.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.stories.d.ts","sourceRoot":"","sources":["../../../src/components/icon/Icon.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CAG3B,CAAC;AAEF,eAAO,MAAM,OAAO;;;;;CAKnB,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Icon.stories.d.ts","sourceRoot":"","sources":["../../../src/components/icon/Icon.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAG9B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CAG3B,CAAC;AAEF,eAAO,MAAM,OAAO;;;;;;;;;;;;CAYnB,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/components/icon/Icon.stories.js

@@ -1,4 +1,5 @@
 import { Icon } from './Icon';
+import { allowedIcons } from './allowedIcons';
 const meta = {
     title: 'Components/Icon',
     component: Icon,
@@ -8,6 +9,13 @@ export const Default = {
         name: '3-dot',
         size: 16,
     },
+    argTypes: {
+        name: {
+            control: 'select',
+            description: 'Icon name',
+            options: Object.keys(allowedIcons),
+        },
+    },
 };
 export default meta;
 //# sourceMappingURL=Icon.stories.js.map

package/dist/components/icon/Icon.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.stories.js","sourceRoot":"","sources":["../../../src/components/icon/Icon.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,MAAM,IAAI,GAAsB;IAC9B,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,IAAI;CAChB,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,IAAI,EAAE;QACJ,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,EAAE;KACT;CACF,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Icon.stories.js","sourceRoot":"","sources":["../../../src/components/icon/Icon.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,MAAM,IAAI,GAAsB;IAC9B,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,IAAI;CAChB,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,IAAI,EAAE;QACJ,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,EAAE;KACT;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,WAAW;YACxB,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC;SACnC;KACF;CACF,CAAC;AAEF,eAAe,IAAI,CAAC"}

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

@@ -0,0 +1,17 @@
+import { type HTMLAttributes } from 'react';
+export declare const Tabs: {
+    (props: HTMLAttributes<HTMLUListElement> & {
+        children: React.ReactNode;
+    }): import("react/jsx-runtime").JSX.Element;
+    Item: (props: {
+        active?: boolean;
+        iconName?: keyof typeof import("../icon/allowedIcons").allowedIcons;
+    } & (({
+        tabElement?: "button";
+        tabElementProps?: import("react").ButtonHTMLAttributes<HTMLButtonElement>;
+    } | {
+        tabElement?: "link";
+        tabElementProps?: import("react").AnchorHTMLAttributes<HTMLAnchorElement>;
+    }) & HTMLAttributes<HTMLLIElement>)) => import("react/jsx-runtime").JSX.Element;
+};
+//# sourceMappingURL=Tabs.d.ts.map

package/dist/components/tabs/Tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,eAAO,MAAM,IAAI;YAAW,cAAc,CAAC,gBAAgB,CAAC,GAAG;QAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE;;;;;;;;;;;CAO3F,CAAC"}

package/dist/components/tabs/Tabs.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+import {} from 'react';
+import { TabsItem } from './TabsItem';
+export const Tabs = (props) => {
+    const { children, className, ...rest } = props;
+    return (_jsx("ul", { role: "tablist", className: classNames('ds-tabs', className), ...rest, children: children }));
+};
+Tabs.Item = TabsItem;
+//# sourceMappingURL=Tabs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAuB,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,KAAuE,EAAE,EAAE;IAC9F,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAC/C,OAAO,CACL,aAAI,IAAI,EAAC,SAAS,EAAC,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,SAAS,CAAC,KAAM,IAAI,YACrE,QAAQ,GACN,CACN,CAAC;AACJ,CAAC,CAAC;AAEF,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC"}

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

@@ -0,0 +1,40 @@
+import type { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: {
+        (props: import("react").HTMLAttributes<HTMLUListElement> & {
+            children: React.ReactNode;
+        }): import("react/jsx-runtime").JSX.Element;
+        Item: (props: {
+            active?: boolean;
+            iconName?: keyof typeof import("../icon/allowedIcons").allowedIcons;
+        } & (({
+            tabElement?: "button";
+            tabElementProps?: import("react").ButtonHTMLAttributes<HTMLButtonElement>;
+        } | {
+            tabElement?: "link";
+            tabElementProps?: import("react").AnchorHTMLAttributes<HTMLAnchorElement>;
+        }) & import("react").HTMLAttributes<HTMLLIElement>)) => import("react/jsx-runtime").JSX.Element;
+    };
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        children: {
+            control: false;
+            description: string;
+        };
+        className: {
+            control: "text";
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithLinks: Story;
+export declare const Mixed: Story;
+export declare const ManyTabs: Story;
+//# sourceMappingURL=Tabs.stories.d.ts.map

package/dist/components/tabs/Tabs.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.stories.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAG5D,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiBmB,CAAC;AAE9B,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAGnC,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAC;AAGF,eAAO,MAAM,SAAS,EAAE,KAgBvB,CAAC;AAGF,eAAO,MAAM,KAAK,EAAE,KAenB,CAAC;AAGF,eAAO,MAAM,QAAQ,EAAE,KAetB,CAAC"}

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

@@ -0,0 +1,46 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tabs } from './Tabs';
+const meta = {
+    title: 'Components/Tabs',
+    component: Tabs,
+    parameters: {
+        layout: 'padded',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        children: {
+            control: false,
+            description: 'Tab items to display',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS classes',
+        },
+    },
+};
+export default meta;
+// Basic tabs with buttons
+export const Default = {
+    args: {
+        children: (_jsxs(_Fragment, { children: [_jsx(Tabs.Item, { active: true, children: "Overview" }), _jsx(Tabs.Item, { children: "Details" }), _jsx(Tabs.Item, { children: "Settings" })] })),
+    },
+};
+// Tabs with links
+export const WithLinks = {
+    args: {
+        children: (_jsxs(_Fragment, { children: [_jsx(Tabs.Item, { tabElement: "link", tabElementProps: { href: '#overview' }, active: true, children: "Overview" }), _jsx(Tabs.Item, { tabElement: "link", tabElementProps: { href: '#details' }, children: "Details" }), _jsx(Tabs.Item, { tabElement: "link", tabElementProps: { href: '#settings' }, children: "Settings" })] })),
+    },
+};
+// Mixed tabs (buttons and links)
+export const Mixed = {
+    args: {
+        children: (_jsxs(_Fragment, { children: [_jsx(Tabs.Item, { active: true, children: "Home" }), _jsx(Tabs.Item, { tabElement: "link", tabElementProps: { href: '#about' }, children: "About" }), _jsx(Tabs.Item, { children: "Contact" }), _jsx(Tabs.Item, { tabElement: "link", tabElementProps: { href: '#help' }, children: "Help" })] })),
+    },
+};
+// Many tabs
+export const ManyTabs = {
+    args: {
+        children: (_jsxs(_Fragment, { children: [_jsx(Tabs.Item, { active: true, iconName: "list", children: "Tab 1" }), _jsx(Tabs.Item, { iconName: "list", children: "Tab 2" }), _jsx(Tabs.Item, { iconName: "list", children: "Tab 3" }), _jsx(Tabs.Item, { iconName: "list", children: "Tab 4" }), _jsx(Tabs.Item, { iconName: "list", children: "Tab 5" }), _jsx(Tabs.Item, { iconName: "list", children: "Tab 6" }), _jsx(Tabs.Item, { iconName: "list", children: "Tab 7" }), _jsx(Tabs.Item, { iconName: "list", children: "Tab 8" })] })),
+    },
+};
+//# sourceMappingURL=Tabs.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.stories.js","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,IAAI;IACf,UAAU,EAAE;QACV,MAAM,EAAE,QAAQ;KACjB;IACD,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,QAAQ,EAAE;YACR,OAAO,EAAE,KAAK;YACd,WAAW,EAAE,sBAAsB;SACpC;QACD,SAAS,EAAE;YACT,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,wBAAwB;SACtC;KACF;CAC0B,CAAC;AAE9B,eAAe,IAAI,CAAC;AAGpB,0BAA0B;AAC1B,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,QAAQ,EAAE,CACR,8BACE,KAAC,IAAI,CAAC,IAAI,IAAC,MAAM,+BAAqB,EACtC,KAAC,IAAI,CAAC,IAAI,0BAAoB,EAC9B,KAAC,IAAI,CAAC,IAAI,2BAAqB,IAC9B,CACJ;KACF;CACF,CAAC;AAEF,kBAAkB;AAClB,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,IAAI,EAAE;QACJ,QAAQ,EAAE,CACR,8BACE,KAAC,IAAI,CAAC,IAAI,IAAC,UAAU,EAAC,MAAM,EAAC,eAAe,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE,MAAM,+BAE/D,EACZ,KAAC,IAAI,CAAC,IAAI,IAAC,UAAU,EAAC,MAAM,EAAC,eAAe,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,wBAEtD,EACZ,KAAC,IAAI,CAAC,IAAI,IAAC,UAAU,EAAC,MAAM,EAAC,eAAe,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,yBAEvD,IACX,CACJ;KACF;CACF,CAAC;AAEF,iCAAiC;AACjC,MAAM,CAAC,MAAM,KAAK,GAAU;IAC1B,IAAI,EAAE;QACJ,QAAQ,EAAE,CACR,8BACE,KAAC,IAAI,CAAC,IAAI,IAAC,MAAM,2BAAiB,EAClC,KAAC,IAAI,CAAC,IAAI,IAAC,UAAU,EAAC,MAAM,EAAC,eAAe,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,sBAEpD,EACZ,KAAC,IAAI,CAAC,IAAI,0BAAoB,EAC9B,KAAC,IAAI,CAAC,IAAI,IAAC,UAAU,EAAC,MAAM,EAAC,eAAe,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,qBAEnD,IACX,CACJ;KACF;CACF,CAAC;AAEF,YAAY;AACZ,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,IAAI,EAAE;QACJ,QAAQ,EAAE,CACR,8BACE,KAAC,IAAI,CAAC,IAAI,IAAC,MAAM,QAAC,QAAQ,EAAC,MAAM,sBAAkB,EACnD,KAAC,IAAI,CAAC,IAAI,IAAC,QAAQ,EAAC,MAAM,sBAAkB,EAC5C,KAAC,IAAI,CAAC,IAAI,IAAC,QAAQ,EAAC,MAAM,sBAAkB,EAC5C,KAAC,IAAI,CAAC,IAAI,IAAC,QAAQ,EAAC,MAAM,sBAAkB,EAC5C,KAAC,IAAI,CAAC,IAAI,IAAC,QAAQ,EAAC,MAAM,sBAAkB,EAC5C,KAAC,IAAI,CAAC,IAAI,IAAC,QAAQ,EAAC,MAAM,sBAAkB,EAC5C,KAAC,IAAI,CAAC,IAAI,IAAC,QAAQ,EAAC,MAAM,sBAAkB,EAC5C,KAAC,IAAI,CAAC,IAAI,IAAC,QAAQ,EAAC,MAAM,sBAAkB,IAC3C,CACJ;KACF;CACF,CAAC"}

package/dist/components/tabs/Tabs.test.d.ts

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

package/dist/components/tabs/Tabs.test.d.ts.map

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

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

@@ -0,0 +1,108 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { expect, test, describe, vi } from 'vitest';
+import { Tabs } from './Tabs';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+describe('Tabs component', () => {
+    test('renders tabs container with correct role', () => {
+        render(_jsxs(Tabs, { children: [_jsx(Tabs.Item, { children: "Tab 1" }), _jsx(Tabs.Item, { children: "Tab 2" })] }));
+        const tabsContainer = screen.getByRole('tablist');
+        expect(tabsContainer).toBeInTheDocument();
+        expect(tabsContainer.tagName).toBe('UL');
+        expect(tabsContainer).toHaveClass('ds-tabs');
+    });
+    test('renders children correctly', () => {
+        render(_jsxs(Tabs, { children: [_jsx(Tabs.Item, { children: "Overview" }), _jsx(Tabs.Item, { children: "Details" }), _jsx(Tabs.Item, { children: "Settings" })] }));
+        expect(screen.getByText('Overview')).toBeInTheDocument();
+        expect(screen.getByText('Details')).toBeInTheDocument();
+        expect(screen.getByText('Settings')).toBeInTheDocument();
+    });
+    test('applies custom className', () => {
+        render(_jsx(Tabs, { className: "custom-tabs", children: _jsx(Tabs.Item, { children: "Tab 1" }) }));
+        const tabsContainer = screen.getByRole('tablist');
+        expect(tabsContainer).toHaveClass('ds-tabs', 'custom-tabs');
+    });
+    test('passes through additional props', () => {
+        render(_jsx(Tabs, { "data-testid": "tabs-container", "aria-label": "Navigation tabs", children: _jsx(Tabs.Item, { children: "Tab 1" }) }));
+        const tabsContainer = screen.getByTestId('tabs-container');
+        expect(tabsContainer).toHaveAttribute('aria-label', 'Navigation tabs');
+    });
+});
+describe('TabsItem component', () => {
+    test('renders as button by default', () => {
+        render(_jsx(Tabs, { children: _jsx(Tabs.Item, { children: "Tab Button" }) }));
+        const tabButton = screen.getByRole('tab');
+        expect(tabButton.tagName).toBe('BUTTON');
+        expect(tabButton).toHaveTextContent('Tab Button');
+    });
+    test('renders as link when tabElement is link', () => {
+        render(_jsx(Tabs, { children: _jsx(Tabs.Item, { tabElement: "link", tabElementProps: { href: '#overview' }, children: "Overview Link" }) }));
+        const tabLink = screen.getByRole('tab');
+        expect(tabLink.tagName).toBe('A');
+        expect(tabLink).toHaveAttribute('href', '#overview');
+        expect(tabLink).toHaveTextContent('Overview Link');
+    });
+    test('applies active state correctly', () => {
+        render(_jsxs(Tabs, { children: [_jsx(Tabs.Item, { active: true, children: "Active Tab" }), _jsx(Tabs.Item, { children: "Inactive Tab" })] }));
+        const activeTab = screen.getByText('Active Tab');
+        const inactiveTab = screen.getByText('Inactive Tab');
+        expect(activeTab).toHaveClass('ds-tabs-item__tab--active');
+        expect(activeTab).toHaveAttribute('aria-selected', 'true');
+        expect(inactiveTab).not.toHaveClass('ds-tabs-item__tab--active');
+        expect(inactiveTab).toHaveAttribute('aria-selected', 'false');
+    });
+    test('applies correct CSS classes', () => {
+        render(_jsx(Tabs, { children: _jsx(Tabs.Item, { children: "Tab Item" }) }));
+        const listItem = screen.getByRole('presentation');
+        const tabElement = screen.getByRole('tab');
+        expect(listItem).toHaveClass('ds-tabs-item');
+        expect(tabElement).toHaveClass('ds-tabs-item__tab');
+    });
+    test('applies custom className to list item', () => {
+        render(_jsx(Tabs, { children: _jsx(Tabs.Item, { className: "custom-tab-item", children: "Tab Item" }) }));
+        const listItem = screen.getByRole('presentation');
+        expect(listItem).toHaveClass('ds-tabs-item', 'custom-tab-item');
+    });
+    test('handles click events on button tabs', () => {
+        const handleClick = vi.fn();
+        render(_jsx(Tabs, { children: _jsx(Tabs.Item, { tabElementProps: { onClick: handleClick }, children: "Clickable Tab" }) }));
+        fireEvent.click(screen.getByRole('tab'));
+        expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+    test('passes through additional props to button', () => {
+        render(_jsx(Tabs, { children: _jsx(Tabs.Item, { tabElementProps: { 'disabled': true, 'data-testid': 'tab-button' }, children: "Disabled Tab" }) }));
+        const tabButton = screen.getByTestId('tab-button');
+        expect(tabButton).toBeDisabled();
+    });
+    test('passes through additional props to link', () => {
+        render(_jsx(Tabs, { children: _jsx(Tabs.Item, { tabElement: "link", tabElementProps: {
+                    'href': '#test',
+                    'target': '_blank',
+                    // @ts-expect-error - data-testid is not a valid prop for AnchorHTMLAttributes
+                    'data-testid': 'tab-link',
+                }, children: "Link Tab" }) }));
+        const tabLink = screen.getByTestId('tab-link');
+        expect(tabLink).toHaveAttribute('href', '#test');
+        expect(tabLink).toHaveAttribute('target', '_blank');
+    });
+    test('renders multiple tabs correctly', () => {
+        render(_jsxs(Tabs, { children: [_jsx(Tabs.Item, { active: true, children: "Tab 1" }), _jsx(Tabs.Item, { children: "Tab 2" }), _jsx(Tabs.Item, { tabElement: "link", tabElementProps: { href: '#tab3' }, children: "Tab 3" })] }));
+        const tabs = screen.getAllByRole('tab');
+        expect(tabs).toHaveLength(3);
+        expect(tabs[0]).toHaveTextContent('Tab 1');
+        expect(tabs[0]).toHaveAttribute('aria-selected', 'true');
+        expect(tabs[1]).toHaveTextContent('Tab 2');
+        expect(tabs[1]).toHaveAttribute('aria-selected', 'false');
+        expect(tabs[2]).toHaveTextContent('Tab 3');
+        expect(tabs[2]).toHaveAttribute('href', '#tab3');
+    });
+    test('handles mixed tab types', () => {
+        render(_jsxs(Tabs, { children: [_jsx(Tabs.Item, { active: true, children: "Button Tab" }), _jsx(Tabs.Item, { tabElement: "link", tabElementProps: { href: '#link-tab' }, children: "Link Tab" })] }));
+        const buttonTab = screen.getByText('Button Tab');
+        const linkTab = screen.getByText('Link Tab');
+        expect(buttonTab.tagName).toBe('BUTTON');
+        expect(linkTab.tagName).toBe('A');
+        expect(linkTab).toHaveAttribute('href', '#link-tab');
+    });
+});
+//# sourceMappingURL=Tabs.test.js.map

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

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

package/dist/components/tabs/TabsItem.d.ts

@@ -0,0 +1,15 @@
+import type { allowedIcons } from '../icon/allowedIcons';
+import type { AnchorHTMLAttributes, ButtonHTMLAttributes, HTMLAttributes } from 'react';
+type TabsItemProps = {
+    active?: boolean;
+    iconName?: keyof typeof allowedIcons;
+} & ({
+    tabElement?: 'button';
+    tabElementProps?: ButtonHTMLAttributes<HTMLButtonElement>;
+} | {
+    tabElement?: 'link';
+    tabElementProps?: AnchorHTMLAttributes<HTMLAnchorElement>;
+}) & HTMLAttributes<HTMLLIElement>;
+export declare const TabsItem: (props: TabsItemProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=TabsItem.d.ts.map

package/dist/components/tabs/TabsItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsItem.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/TabsItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAEjE,OAAO,KAAK,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAExF,KAAK,aAAa,GAAG;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,OAAO,YAAY,CAAC;CACtC,GAAG,CACA;IAAE,UAAU,CAAC,EAAE,QAAQ,CAAC;IAAC,eAAe,CAAC,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,CAAA;CAAE,GACpF;IAAE,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,eAAe,CAAC,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,CAAA;CAAE,CACnF,GAAG,cAAc,CAAC,aAAa,CAAC,CAAC;AAEpC,eAAO,MAAM,QAAQ,GAAI,OAAO,aAAa,4CA4B5C,CAAC"}

package/dist/components/tabs/TabsItem.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { Icon } from '../icon/Icon';
+export const TabsItem = (props) => {
+    const { children, className, tabElement = 'button', tabElementProps, active = false, iconName, ...rest } = props;
+    const elementClassNames = classNames('ds-tabs-item__tab', {
+        'ds-tabs-item__tab--active': active,
+    });
+    const sharedProps = {
+        'role': 'tab',
+        'className': elementClassNames,
+        'aria-selected': active,
+    };
+    return (_jsx("li", { role: "presentation", className: classNames('ds-tabs-item', className), ...rest, children: tabElement === 'button'
+            ? (_jsxs("button", { ...tabElementProps, ...sharedProps, children: [iconName && _jsx(Icon, { name: iconName, size: 16 }), children] }))
+            : (_jsxs("a", { ...tabElementProps, ...sharedProps, children: [iconName && _jsx(Icon, { name: iconName, size: 16 }), children] })) }));
+};
+//# sourceMappingURL=TabsItem.js.map

package/dist/components/tabs/TabsItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsItem.js","sourceRoot":"","sources":["../../../src/components/tabs/TabsItem.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAW5C,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAE,EAAE;IAC/C,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,GAAG,QAAQ,EAAE,eAAe,EAAE,MAAM,GAAG,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAEjH,MAAM,iBAAiB,GAAG,UAAU,CAAC,mBAAmB,EAAE;QACxD,2BAA2B,EAAE,MAAM;KACpC,CAAC,CAAC;IACH,MAAM,WAAW,GAAG;QAClB,MAAM,EAAE,KAAK;QACb,WAAW,EAAE,iBAAiB;QAC9B,eAAe,EAAE,MAAM;KACxB,CAAC;IACF,OAAO,CACL,aAAI,IAAI,EAAC,cAAc,EAAC,SAAS,EAAE,UAAU,CAAC,cAAc,EAAE,SAAS,CAAC,KAAM,IAAI,YAC/E,UAAU,KAAK,QAAQ;YACtB,CAAC,CAAC,CACE,qBAAa,eAA2D,KAAM,WAAW,aACtF,QAAQ,IAAI,KAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,GAAI,EAC9C,QAAQ,IACF,CACV;YACH,CAAC,CAAC,CACE,gBAAQ,eAA2D,KAAM,WAAW,aACjF,QAAQ,IAAI,KAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,GAAI,EAC9C,QAAQ,IACP,CACL,GACF,CACN,CAAC;AACJ,CAAC,CAAC"}