@arbor-education/design-system.components 0.0.3 → 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

@@ -1,21 +1,17 @@
-import { type ReactNode } from 'react';
-type TabsProps = {
-    children: ReactNode;
-    defaultActiveTab?: string;
-    className?: string;
-    onTabChange?: (tabId: string) => void;
-};
+import { type HTMLAttributes } from 'react';
 export declare const Tabs: {
-    ({ children, defaultActiveTab, className, onTabChange, }: TabsProps): import("react/jsx-runtime").JSX.Element;
-    Item: ({ children, tabId, label, disabled, className, }: TabsItemProps) => import("react/jsx-runtime").JSX.Element;
-};
-type TabsItemProps = {
-    children: ReactNode;
-    tabId: string;
-    label: string;
-    disabled?: boolean;
-    className?: string;
+    (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;
 };
-export declare const TabsItem: ({ children, tabId, label, disabled, className, }: TabsItemProps) => import("react/jsx-runtime").JSX.Element;
-export {};
 //# sourceMappingURL=Tabs.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.tsx"],"names":[],"mappings":"AACA,OAAc,EAAuC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAiBnF,KAAK,SAAS,GAAG;IACf,QAAQ,EAAE,SAAS,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC,CAAC;AAEF,eAAO,MAAM,IAAI;8DAKd,SAAS;6DA+BT,aAAa;CAhBf,CAAC;AAEF,KAAK,aAAa,GAAG;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,kDAMtB,aAAa,4CAiDf,CAAC"}
+{"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

@@ -1,43 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
-import React, { createContext, useContext, useState } from 'react';
-const TabsContext = createContext(undefined);
-const useTabsContext = () => {
-    const context = useContext(TabsContext);
-    if (!context) {
-        throw new Error('Tabs.Item must be used within a Tabs component');
-    }
-    return context;
+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 }));
 };
-export const Tabs = ({ children, defaultActiveTab, className = '', onTabChange, }) => {
-    const [activeTab, setActiveTab] = useState(defaultActiveTab || '');
-    const handleTabChange = (tabId) => {
-        setActiveTab(tabId);
-        onTabChange?.(tabId);
-    };
-    return (_jsx(TabsContext.Provider, { value: { activeTab, setActiveTab: handleTabChange }, children: _jsx("div", { className: classNames('ds-tabs', className), children: children }) }));
-};
-export const TabsItem = ({ children, tabId, label, disabled = false, className = '', }) => {
-    const { activeTab, setActiveTab } = useTabsContext();
-    const isActive = activeTab === tabId;
-    const handleClick = () => {
-        if (!disabled) {
-            setActiveTab(tabId);
-        }
-    };
-    const handleKeyDown = (e) => {
-        if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault();
-            if (!disabled) {
-                setActiveTab(tabId);
-            }
-        }
-    };
-    return (_jsxs("div", { className: classNames('ds-tabs__item', className), children: [_jsx("button", { className: classNames('ds-tabs__tab', {
-                    'ds-tabs__tab--active': isActive,
-                    'ds-tabs__tab--disabled': disabled,
-                }), onClick: handleClick, onKeyDown: handleKeyDown, disabled: disabled, role: "tab", "aria-selected": isActive, "aria-controls": `tabpanel-${tabId}`, id: `tab-${tabId}`, tabIndex: isActive ? 0 : -1, children: label }), isActive && (_jsx("div", { className: "ds-tabs__content", role: "tabpanel", id: `tabpanel-${tabId}`, "aria-labelledby": `tab-${tabId}`, children: children }))] }));
-};
-// Compound component pattern
 Tabs.Item = TabsItem;
 //# sourceMappingURL=Tabs.js.map

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

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

@@ -1,11 +1,40 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Tabs } from './Tabs';
-declare const meta: Meta<typeof Tabs>;
+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 WithDisabledTab: Story;
+export declare const WithLinks: Story;
+export declare const Mixed: Story;
 export declare const ManyTabs: Story;
-export declare const WithRichContent: Story;
-export declare const CustomStyling: Story;
 //# sourceMappingURL=Tabs.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.stories.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CAyB3B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KA0BrB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KA0B7B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KA4CtB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KA2D7B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAqC3B,CAAC"}
+{"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

@@ -1,74 +1,46 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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',
-        docs: {
-            description: {
-                component: 'A flexible tabs component with compound component pattern. Use Tabs.Item to create individual tab items.',
-            },
-        },
     },
+    tags: ['autodocs'],
     argTypes: {
-        defaultActiveTab: {
-            control: 'text',
-            description: 'The ID of the tab that should be active by default',
-        },
-        onTabChange: {
-            action: 'tab changed',
-            description: 'Callback function called when the active tab changes',
+        children: {
+            control: false,
+            description: 'Tab items to display',
         },
         className: {
             control: 'text',
-            description: 'Additional CSS class name for the tabs container',
+            description: 'Additional CSS classes',
         },
     },
 };
 export default meta;
+// Basic tabs with buttons
 export const Default = {
     args: {
-        defaultActiveTab: 'tab1',
-    },
-    render: (args) => (_jsxs(Tabs, { ...args, children: [_jsx(Tabs.Item, { tabId: "tab1", label: "Overview", children: _jsxs("div", { children: [_jsx("h3", { children: "Overview" }), _jsx("p", { children: "This is the overview tab content. It contains general information about the topic." })] }) }), _jsx(Tabs.Item, { tabId: "tab2", label: "Details", children: _jsxs("div", { children: [_jsx("h3", { children: "Details" }), _jsx("p", { children: "This is the details tab content. It provides more specific information and data." })] }) }), _jsx(Tabs.Item, { tabId: "tab3", label: "Settings", children: _jsxs("div", { children: [_jsx("h3", { children: "Settings" }), _jsx("p", { children: "This is the settings tab content. It contains configuration options and preferences." })] }) })] })),
-};
-export const WithDisabledTab = {
-    args: {
-        defaultActiveTab: 'tab1',
+        children: (_jsxs(_Fragment, { children: [_jsx(Tabs.Item, { active: true, children: "Overview" }), _jsx(Tabs.Item, { children: "Details" }), _jsx(Tabs.Item, { children: "Settings" })] })),
     },
-    render: (args) => (_jsxs(Tabs, { ...args, children: [_jsx(Tabs.Item, { tabId: "tab1", label: "Available", children: _jsxs("div", { children: [_jsx("h3", { children: "Available" }), _jsx("p", { children: "This tab is available and can be clicked." })] }) }), _jsx(Tabs.Item, { tabId: "tab2", label: "Disabled", disabled: true, children: _jsxs("div", { children: [_jsx("h3", { children: "Disabled" }), _jsx("p", { children: "This tab is disabled and cannot be clicked." })] }) }), _jsx(Tabs.Item, { tabId: "tab3", label: "Another Available", children: _jsxs("div", { children: [_jsx("h3", { children: "Another Available" }), _jsx("p", { children: "This tab is also available and can be clicked." })] }) })] })),
 };
-export const ManyTabs = {
+// Tabs with links
+export const WithLinks = {
     args: {
-        defaultActiveTab: 'tab3',
+        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" })] })),
     },
-    render: (args) => (_jsxs(Tabs, { ...args, children: [_jsx(Tabs.Item, { tabId: "tab1", label: "First", children: _jsxs("div", { children: [_jsx("h3", { children: "First Tab" }), _jsx("p", { children: "Content for the first tab." })] }) }), _jsx(Tabs.Item, { tabId: "tab2", label: "Second", children: _jsxs("div", { children: [_jsx("h3", { children: "Second Tab" }), _jsx("p", { children: "Content for the second tab." })] }) }), _jsx(Tabs.Item, { tabId: "tab3", label: "Third", children: _jsxs("div", { children: [_jsx("h3", { children: "Third Tab" }), _jsx("p", { children: "Content for the third tab." })] }) }), _jsx(Tabs.Item, { tabId: "tab4", label: "Fourth", children: _jsxs("div", { children: [_jsx("h3", { children: "Fourth Tab" }), _jsx("p", { children: "Content for the fourth tab." })] }) }), _jsx(Tabs.Item, { tabId: "tab5", label: "Fifth", children: _jsxs("div", { children: [_jsx("h3", { children: "Fifth Tab" }), _jsx("p", { children: "Content for the fifth tab." })] }) }), _jsx(Tabs.Item, { tabId: "tab6", label: "Sixth", children: _jsxs("div", { children: [_jsx("h3", { children: "Sixth Tab" }), _jsx("p", { children: "Content for the sixth tab." })] }) })] })),
 };
-export const WithRichContent = {
+// Mixed tabs (buttons and links)
+export const Mixed = {
     args: {
-        defaultActiveTab: 'dashboard',
+        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" })] })),
     },
-    render: (args) => (_jsxs(Tabs, { ...args, children: [_jsx(Tabs.Item, { tabId: "dashboard", label: "Dashboard", children: _jsxs("div", { children: [_jsx("h3", { children: "Dashboard" }), _jsxs("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px', marginTop: '16px' }, children: [_jsxs("div", { style: { padding: '16px', backgroundColor: '#f5f5f5', borderRadius: '8px' }, children: [_jsx("h4", { children: "Total Users" }), _jsx("p", { style: { fontSize: '24px', fontWeight: 'bold', margin: '8px 0' }, children: "1,234" })] }), _jsxs("div", { style: { padding: '16px', backgroundColor: '#f5f5f5', borderRadius: '8px' }, children: [_jsx("h4", { children: "Active Sessions" }), _jsx("p", { style: { fontSize: '24px', fontWeight: 'bold', margin: '8px 0' }, children: "567" })] })] })] }) }), _jsx(Tabs.Item, { tabId: "analytics", label: "Analytics", children: _jsxs("div", { children: [_jsx("h3", { children: "Analytics" }), _jsx("p", { children: "View detailed analytics and reports for your application." }), _jsxs("ul", { style: { marginTop: '16px' }, children: [_jsx("li", { children: "Page views" }), _jsx("li", { children: "User engagement" }), _jsx("li", { children: "Conversion rates" }), _jsx("li", { children: "Performance metrics" })] })] }) }), _jsx(Tabs.Item, { tabId: "settings", label: "Settings", children: _jsxs("div", { children: [_jsx("h3", { children: "Settings" }), _jsxs("form", { style: { marginTop: '16px' }, children: [_jsxs("div", { style: { marginBottom: '16px' }, children: [_jsx("label", { htmlFor: "theme", children: "Theme:" }), _jsxs("select", { id: "theme", style: { marginLeft: '8px', padding: '4px 8px' }, children: [_jsx("option", { children: "Light" }), _jsx("option", { children: "Dark" }), _jsx("option", { children: "Auto" })] })] }), _jsx("div", { style: { marginBottom: '16px' }, children: _jsxs("label", { children: [_jsx("input", { type: "checkbox", style: { marginRight: '8px' } }), "Enable notifications"] }) }), _jsx("button", { type: "submit", style: { padding: '8px 16px', backgroundColor: '#007bff', color: 'white', border: 'none', borderRadius: '4px' }, children: "Save Settings" })] })] }) })] })),
 };
-export const CustomStyling = {
+// Many tabs
+export const ManyTabs = {
     args: {
-        defaultActiveTab: 'tab1',
-        className: 'custom-tabs-container',
+        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" })] })),
     },
-    render: (args) => (_jsxs("div", { children: [_jsx("style", { children: `
-        .custom-tabs-container {
-          border: 2px solid #e0e0e0;
-          border-radius: 8px;
-          padding: 16px;
-        }
-        .custom-tabs-container .ds-tabs__tab {
-          border-radius: 4px;
-          margin-right: 4px;
-        }
-        .custom-tabs-container .ds-tabs__tab--active {
-          background-color: #f0f8ff;
-        }
-      ` }), _jsxs(Tabs, { ...args, children: [_jsx(Tabs.Item, { tabId: "tab1", label: "Styled Tab 1", children: _jsxs("div", { children: [_jsx("h3", { children: "Custom Styled Tab" }), _jsx("p", { children: "This tab has custom styling applied to the container." })] }) }), _jsx(Tabs.Item, { tabId: "tab2", label: "Styled Tab 2", children: _jsxs("div", { children: [_jsx("h3", { children: "Another Custom Tab" }), _jsx("p", { children: "Notice the custom border and styling around the tabs container." })] }) })] })] })),
 };
 //# sourceMappingURL=Tabs.stories.js.map

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

@@ -1 +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,GAAsB;IAC9B,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,IAAI;IACf,UAAU,EAAE;QACV,MAAM,EAAE,QAAQ;QAChB,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,SAAS,EAAE,0GAA0G;aACtH;SACF;KACF;IACD,QAAQ,EAAE;QACR,gBAAgB,EAAE;YAChB,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,oDAAoD;SAClE;QACD,WAAW,EAAE;YACX,MAAM,EAAE,aAAa;YACrB,WAAW,EAAE,sDAAsD;SACpE;QACD,SAAS,EAAE;YACT,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,kDAAkD;SAChE;KACF;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,gBAAgB,EAAE,MAAM;KACzB;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAChB,MAAC,IAAI,OAAK,IAAI,aACZ,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,UAAU,YACtC,0BACE,oCAAiB,EACjB,6GAAyF,IACrF,GACI,EACZ,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,SAAS,YACrC,0BACE,mCAAgB,EAChB,2GAAuF,IACnF,GACI,EACZ,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,UAAU,YACtC,0BACE,oCAAiB,EACjB,+GAA2F,IACvF,GACI,IACP,CACR;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAU;IACpC,IAAI,EAAE;QACJ,gBAAgB,EAAE,MAAM;KACzB;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAChB,MAAC,IAAI,OAAK,IAAI,aACZ,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,WAAW,YACvC,0BACE,qCAAkB,EAClB,oEAAgD,IAC5C,GACI,EACZ,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,UAAU,EAAC,QAAQ,kBAC/C,0BACE,oCAAiB,EACjB,sEAAkD,IAC9C,GACI,EACZ,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,mBAAmB,YAC/C,0BACE,6CAA0B,EAC1B,yEAAqD,IACjD,GACI,IACP,CACR;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,IAAI,EAAE;QACJ,gBAAgB,EAAE,MAAM;KACzB;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAChB,MAAC,IAAI,OAAK,IAAI,aACZ,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,OAAO,YACnC,0BACE,qCAAkB,EAClB,qDAAiC,IAC7B,GACI,EACZ,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,QAAQ,YACpC,0BACE,sCAAmB,EACnB,sDAAkC,IAC9B,GACI,EACZ,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,OAAO,YACnC,0BACE,qCAAkB,EAClB,qDAAiC,IAC7B,GACI,EACZ,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,QAAQ,YACpC,0BACE,sCAAmB,EACnB,sDAAkC,IAC9B,GACI,EACZ,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,OAAO,YACnC,0BACE,qCAAkB,EAClB,qDAAiC,IAC7B,GACI,EACZ,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,OAAO,YACnC,0BACE,qCAAkB,EAClB,qDAAiC,IAC7B,GACI,IACP,CACR;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAU;IACpC,IAAI,EAAE;QACJ,gBAAgB,EAAE,WAAW;KAC9B;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAChB,MAAC,IAAI,OAAK,IAAI,aACZ,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,WAAW,EAAC,KAAK,EAAC,WAAW,YAC5C,0BACE,qCAAkB,EAClB,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,mBAAmB,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,aAC7F,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,SAAS,EAAE,YAAY,EAAE,KAAK,EAAE,aAC9E,uCAAoB,EACpB,YAAG,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,sBAAW,IAC1E,EACN,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,SAAS,EAAE,YAAY,EAAE,KAAK,EAAE,aAC9E,2CAAwB,EACxB,YAAG,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,oBAAS,IACxE,IACF,IACF,GACI,EACZ,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,WAAW,EAAC,KAAK,EAAC,WAAW,YAC5C,0BACE,qCAAkB,EAClB,oFAAgE,EAChE,cAAI,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,aAC9B,sCAAmB,EACnB,2CAAwB,EACxB,4CAAyB,EACzB,+CAA4B,IACzB,IACD,GACI,EACZ,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,UAAU,EAAC,KAAK,EAAC,UAAU,YAC1C,0BACE,oCAAiB,EACjB,gBAAM,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,aAChC,eAAK,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE,aAClC,gBAAO,OAAO,EAAC,OAAO,uBAAe,EACrC,kBAAQ,EAAE,EAAC,OAAO,EAAC,KAAK,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,aACjE,qCAAsB,EACtB,oCAAqB,EACrB,oCAAqB,IACd,IACL,EACN,cAAK,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE,YAClC,4BACE,gBAAO,IAAI,EAAC,UAAU,EAAC,KAAK,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,GAAI,4BAElD,GACJ,EACN,iBAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,8BAE5H,IACJ,IACH,GACI,IACP,CACR;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAU;IAClC,IAAI,EAAE;QACJ,gBAAgB,EAAE,MAAM;QACxB,SAAS,EAAE,uBAAuB;KACnC;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAChB,0BACE,0BAAQ;;;;;;;;;;;;;OAaP,GAAS,EACV,MAAC,IAAI,OAAK,IAAI,aACZ,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,cAAc,YAC1C,0BACE,6CAA0B,EAC1B,gFAA4D,IACxD,GACI,EACZ,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,cAAc,YAC1C,0BACE,8CAA2B,EAC3B,0FAAsE,IAClE,GACI,IACP,IACH,CACP;CACF,CAAC"}
+{"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.map

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

@@ -1,115 +1,108 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { expect, test, describe, vi } from "vitest";
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+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 with default active tab', () => {
-        render(_jsxs(Tabs, { defaultActiveTab: "tab1", children: [_jsx(Tabs.Item, { tabId: "tab1", label: "Tab 1", children: _jsx("div", { children: "Content 1" }) }), _jsx(Tabs.Item, { tabId: "tab2", label: "Tab 2", children: _jsx("div", { children: "Content 2" }) })] }));
-        expect(screen.getByText('Tab 1')).toBeInTheDocument();
-        expect(screen.getByText('Tab 2')).toBeInTheDocument();
-        expect(screen.getByText('Content 1')).toBeInTheDocument();
-        expect(screen.queryByText('Content 2')).not.toBeInTheDocument();
+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('switches active tab when clicked', async () => {
-        const user = userEvent.setup();
-        render(_jsxs(Tabs, { defaultActiveTab: "tab1", children: [_jsx(Tabs.Item, { tabId: "tab1", label: "Tab 1", children: _jsx("div", { children: "Content 1" }) }), _jsx(Tabs.Item, { tabId: "tab2", label: "Tab 2", children: _jsx("div", { children: "Content 2" }) })] }));
-        const tab2Button = screen.getByText('Tab 2');
-        await user.click(tab2Button);
-        expect(screen.getByText('Content 2')).toBeInTheDocument();
-        expect(screen.queryByText('Content 1')).not.toBeInTheDocument();
+    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('calls onTabChange when tab is switched', async () => {
-        const user = userEvent.setup();
-        const onTabChange = vi.fn();
-        render(_jsxs(Tabs, { defaultActiveTab: "tab1", onTabChange: onTabChange, children: [_jsx(Tabs.Item, { tabId: "tab1", label: "Tab 1", children: _jsx("div", { children: "Content 1" }) }), _jsx(Tabs.Item, { tabId: "tab2", label: "Tab 2", children: _jsx("div", { children: "Content 2" }) })] }));
-        const tab2Button = screen.getByText('Tab 2');
-        await user.click(tab2Button);
-        expect(onTabChange).toHaveBeenCalledWith('tab2');
+    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('handles keyboard navigation', async () => {
-        const user = userEvent.setup();
-        render(_jsxs(Tabs, { defaultActiveTab: "tab1", children: [_jsx(Tabs.Item, { tabId: "tab1", label: "Tab 1", children: _jsx("div", { children: "Content 1" }) }), _jsx(Tabs.Item, { tabId: "tab2", label: "Tab 2", children: _jsx("div", { children: "Content 2" }) })] }));
-        const tab2Button = screen.getByText('Tab 2');
-        tab2Button.focus();
-        await user.keyboard('{Enter}');
-        expect(screen.getByText('Content 2')).toBeInTheDocument();
-        expect(screen.queryByText('Content 1')).not.toBeInTheDocument();
+    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');
     });
-    test('handles space key navigation', async () => {
-        const user = userEvent.setup();
-        render(_jsxs(Tabs, { defaultActiveTab: "tab1", children: [_jsx(Tabs.Item, { tabId: "tab1", label: "Tab 1", children: _jsx("div", { children: "Content 1" }) }), _jsx(Tabs.Item, { tabId: "tab2", label: "Tab 2", children: _jsx("div", { children: "Content 2" }) })] }));
-        const tab2Button = screen.getByText('Tab 2');
-        tab2Button.focus();
-        await user.keyboard(' ');
-        expect(screen.getByText('Content 2')).toBeInTheDocument();
-        expect(screen.queryByText('Content 1')).not.toBeInTheDocument();
+});
+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('disabled tab does not respond to clicks', async () => {
-        const user = userEvent.setup();
-        const onTabChange = vi.fn();
-        render(_jsxs(Tabs, { defaultActiveTab: "tab1", onTabChange: onTabChange, children: [_jsx(Tabs.Item, { tabId: "tab1", label: "Tab 1", children: _jsx("div", { children: "Content 1" }) }), _jsx(Tabs.Item, { tabId: "tab2", label: "Tab 2", disabled: true, children: _jsx("div", { children: "Content 2" }) })] }));
-        const tab2Button = screen.getByText('Tab 2');
-        await user.click(tab2Button);
-        expect(onTabChange).not.toHaveBeenCalled();
-        expect(screen.getByText('Content 1')).toBeInTheDocument();
-        expect(screen.queryByText('Content 2')).not.toBeInTheDocument();
+    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('disabled tab does not respond to keyboard events', async () => {
-        const user = userEvent.setup();
-        const onTabChange = vi.fn();
-        render(_jsxs(Tabs, { defaultActiveTab: "tab1", onTabChange: onTabChange, children: [_jsx(Tabs.Item, { tabId: "tab1", label: "Tab 1", children: _jsx("div", { children: "Content 1" }) }), _jsx(Tabs.Item, { tabId: "tab2", label: "Tab 2", disabled: true, children: _jsx("div", { children: "Content 2" }) })] }));
-        const tab2Button = screen.getByText('Tab 2');
-        tab2Button.focus();
-        await user.keyboard('{Enter}');
-        expect(onTabChange).not.toHaveBeenCalled();
-        expect(screen.getByText('Content 1')).toBeInTheDocument();
-        expect(screen.queryByText('Content 2')).not.toBeInTheDocument();
+    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 tabs container', () => {
-        render(_jsx(Tabs, { className: "custom-tabs", children: _jsx(Tabs.Item, { tabId: "tab1", label: "Tab 1", children: _jsx("div", { children: "Content 1" }) }) }));
-        const tabsContainer = screen.getByText('Tab 1').closest('.ds-tabs');
-        expect(tabsContainer).toHaveClass('custom-tabs');
+    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('applies custom className to tab item', () => {
-        render(_jsx(Tabs, { children: _jsx(Tabs.Item, { tabId: "tab1", label: "Tab 1", className: "custom-tab-item", children: _jsx("div", { children: "Content 1" }) }) }));
-        const tabItem = screen.getByText('Tab 1').closest('.ds-tabs__item');
-        expect(tabItem).toHaveClass('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('has proper ARIA attributes', () => {
-        render(_jsxs(Tabs, { defaultActiveTab: "tab1", children: [_jsx(Tabs.Item, { tabId: "tab1", label: "Tab 1", children: _jsx("div", { children: "Content 1" }) }), _jsx(Tabs.Item, { tabId: "tab2", label: "Tab 2", children: _jsx("div", { children: "Content 2" }) })] }));
-        const tab1Button = screen.getByText('Tab 1');
-        const tab2Button = screen.getByText('Tab 2');
-        expect(tab1Button).toHaveAttribute('role', 'tab');
-        expect(tab1Button).toHaveAttribute('aria-selected', 'true');
-        expect(tab1Button).toHaveAttribute('aria-controls', 'tabpanel-tab1');
-        expect(tab1Button).toHaveAttribute('id', 'tab-tab1');
-        expect(tab2Button).toHaveAttribute('role', 'tab');
-        expect(tab2Button).toHaveAttribute('aria-selected', 'false');
-        expect(tab2Button).toHaveAttribute('aria-controls', 'tabpanel-tab2');
-        expect(tab2Button).toHaveAttribute('id', 'tab-tab2');
-        const contentPanel = screen.getByText('Content 1');
-        expect(contentPanel).toHaveAttribute('role', 'tabpanel');
-        expect(contentPanel).toHaveAttribute('id', 'tabpanel-tab1');
-        expect(contentPanel).toHaveAttribute('aria-labelledby', 'tab-tab1');
+    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('throws error when Tabs.Item is used outside Tabs context', () => {
-        // Suppress console.error for this test since we expect an error
-        const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => { });
-        expect(() => {
-            render(_jsx(Tabs.Item, { tabId: "tab1", label: "Tab 1", children: _jsx("div", { children: "Content 1" }) }));
-        }).toThrow('Tabs.Item must be used within a Tabs component');
-        consoleSpy.mockRestore();
+    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, { defaultActiveTab: "tab2", children: [_jsx(Tabs.Item, { tabId: "tab1", label: "First Tab", children: _jsx("div", { children: "First Content" }) }), _jsx(Tabs.Item, { tabId: "tab2", label: "Second Tab", children: _jsx("div", { children: "Second Content" }) }), _jsx(Tabs.Item, { tabId: "tab3", label: "Third Tab", children: _jsx("div", { children: "Third Content" }) })] }));
-        expect(screen.getByText('First Tab')).toBeInTheDocument();
-        expect(screen.getByText('Second Tab')).toBeInTheDocument();
-        expect(screen.getByText('Third Tab')).toBeInTheDocument();
-        expect(screen.getByText('Second Content')).toBeInTheDocument();
-        expect(screen.queryByText('First Content')).not.toBeInTheDocument();
-        expect(screen.queryByText('Third Content')).not.toBeInTheDocument();
+        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