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

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

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TabsItem } from './TabsItem';
+import { Tabs } from './Tabs';
+import { allowedIcons } from '../icon/allowedIcons';
+const meta = {
+    title: 'Components/Tabs/TabsItem',
+    component: TabsItem,
+    decorators: [
+        Story => (_jsx(Tabs, { children: _jsx(Story, {}) })),
+    ],
+    parameters: {
+        layout: 'padded',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        active: {
+            control: 'boolean',
+            description: 'Whether the tab is active',
+        },
+        tabElement: {
+            control: 'select',
+            options: ['button', 'link'],
+            description: 'Element type for the tab',
+        },
+        iconName: {
+            control: 'select',
+            options: Object.keys(allowedIcons),
+            description: 'Icon to display before the text',
+        },
+        children: {
+            control: 'text',
+            description: 'Tab text content',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS classes',
+        },
+    },
+};
+export default meta;
+// Basic button tab
+export const Default = {
+    args: {
+        active: false,
+        children: 'Tab Item',
+    },
+};
+//# sourceMappingURL=TabsItem.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TabsItem.stories.js","sourceRoot":"","sources":["../../../src/components/tabs/TabsItem.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAE5D,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,0BAA0B;IACjC,SAAS,EAAE,QAAQ;IACnB,UAAU,EAAE;QACV,KAAK,CAAC,EAAE,CAAC,CACP,KAAC,IAAI,cACH,KAAC,KAAK,KAAG,GACJ,CACR;KACF;IACD,UAAU,EAAE;QACV,MAAM,EAAE,QAAQ;KACjB;IACD,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,MAAM,EAAE;YACN,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,2BAA2B;SACzC;QACD,UAAU,EAAE;YACV,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,QAAQ,EAAE,MAAM,CAAC;YAC3B,WAAW,EAAE,0BAA0B;SACxC;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC;YAClC,WAAW,EAAE,iCAAiC;SAC/C;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,kBAAkB;SAChC;QACD,SAAS,EAAE;YACT,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,wBAAwB;SACtC;KACF;CAC8B,CAAC;AAElC,eAAe,IAAI,CAAC;AAGpB,mBAAmB;AACnB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,MAAM,EAAE,KAAK;QACb,QAAQ,EAAE,UAAU;KACrB;CACF,CAAC"}

package/dist/index.css

@@ -696,6 +696,7 @@
   --tabs-tab-item-active-focussed-color-icon: #0e8a0e;
   --tabs-tab-item-active-focussed-color-line: #0e8a0e;
   --tabs-tab-item-active-focussed-focus: #3cad51;
+  --tabs-tab-item-radius: 0.5rem;
   --tabs-tab-item-inactive-default-color-text: #2f2f2f;
   --tabs-tab-item-inactive-default-color-icon: #2f2f2f;
   --tabs-tab-item-inactive-hover-color-line: #d1d1d1;
@@ -1662,4 +1663,59 @@ h4.ds-heading {
   background: var(--tag-category-yellow-color-background);
 }
 
+.ds-tabs {
+  display: flex;
+  width: 100%;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  font-family: var(--font-family-standard);
+  align-items: center;
+  justify-content: center;
+}
+
+.ds-tabs-item {
+  margin: 0;
+  padding: 0;
+}
+
+.ds-tabs-item__tab {
+  font-family: var(--font-family-standard);
+  padding: var(--tabs-tab-item-spacing-y) var(--tabs-tab-item-spacing-x);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: transparent;
+  border: none;
+  text-decoration: none;
+  color: var(--tabs-tab-item-inactive-default-color-text);
+  line-height: 150%;
+  font-size: var(--font-size-3-14);
+  border-bottom: 2px solid transparent;
+  box-sizing: border-box;
+  gap: var(--tabs-tab-item-spacing-gap-x);
+}
+.ds-tabs-item__tab:hover {
+  color: var(--tabs-tab-item-inactive-hover-color-text);
+  border-bottom: 2px solid var(--tabs-tab-item-inactive-hover-color-line);
+}
+.ds-tabs-item__tab:focus {
+  color: var(--tabs-tab-item-inactive-focussed-color-text);
+  outline: 2px solid var(--tabs-tab-item-inactive-focussed-color-focus);
+  border-radius: var(--tabs-tab-item-radius);
+}
+.ds-tabs-item__tab--active {
+  color: var(--tabs-tab-item-active-default-color-text);
+  border-bottom: 2px solid var(--tabs-tab-item-active-default-color-line);
+}
+.ds-tabs-item__tab--active:hover {
+  color: var(--tabs-tab-item-active-default-color-text);
+  border-bottom: 2px solid var(--tabs-tab-item-active-default-color-line);
+}
+.ds-tabs-item__tab--active:focus {
+  color: var(--tabs-tab-item-active-default-color-text);
+  outline: 2px solid var(--tabs-tab-item-active-color-focus);
+}
+
 /*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../src/index.scss","../src/tokens.scss","../src/global.scss","../src/components/button/button.scss","../src/components/heading/heading.scss","../src/components/card/card.scss","../src/components/formField/formField.scss","../src/components/formField/inputs/input.scss","../src/components/formField/label/label.scss","../src/components/pill/pill.scss"],"names":[],"mappings":"AASQ;ACTR;AAAA;AAAA;AAIA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACluCF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AChBF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIF;EACE;;AAGF;EACE;;AAIF;EACE;EACA;;AAKF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAKJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAKJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAKJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAKJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAKJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAKJ;EACE;EACA;EACA;;;AClLJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAKF;EACE;EACA;EACA;;;AAKF;EACE;EACA;EACA;;;AAKF;EACE;EACA;EACA;;;AAKF;EACE;EACA;EACA;;;AC7CJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAIF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAIJ;EACE;;;ACjEJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAEA;EACE;;AAIJ;EACE;;AAEA;EACE;EACA;;;AClCR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAIJ;EACE;EACA;;AAIF;EACE;EACA;;AAGF;EACE;EACA;;AAIF;EACE;;AAEA;EACE;EACA;;AAGF;EACE;;;AAKN;EACE;;;ACzEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;ACPF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../src/index.scss","../src/tokens.scss","../src/global.scss","../src/components/button/button.scss","../src/components/heading/heading.scss","../src/components/card/card.scss","../src/components/formField/formField.scss","../src/components/formField/inputs/input.scss","../src/components/formField/label/label.scss","../src/components/pill/pill.scss","../src/components/tabs/tabs.scss"],"names":[],"mappings":"AAUQ;ACVR;AAAA;AAAA;AAIA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACnuCF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AChBF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIF;EACE;;AAGF;EACE;;AAIF;EACE;EACA;;AAKF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAKJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAKJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAKJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAKJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAKJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAKJ;EACE;EACA;EACA;;;AClLJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAKF;EACE;EACA;EACA;;;AAKF;EACE;EACA;EACA;;;AAKF;EACE;EACA;EACA;;;AAKF;EACE;EACA;EACA;;;AC7CJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAIF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAIJ;EACE;;;ACjEJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAEA;EACE;;AAIJ;EACE;;AAEA;EACE;EACA;;;AClCR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAIJ;EACE;EACA;;AAIF;EACE;EACA;;AAGF;EACE;EACA;;AAIF;EACE;;AAEA;EACE;EACA;;AAGF;EACE;;;AAKN;EACE;;;ACzEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;ACPF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AChDJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACI;EACA;EACA;EACF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACI;EACF","file":"index.css"}

package/dist/index.d.ts

@@ -4,6 +4,7 @@ export { HeadingInnerContainer } from './components/heading/HeadingInnerContaine
 export { Icon } from './components/icon/Icon';
 export { Card } from './components/card/Card';
 export { Pill } from './components/pill/Pill';
+export { Tabs } from './components/tabs/Tabs';
 export { TextInput } from './components/formField/inputs/text/TextInput';
 export { TextArea } from './components/formField/inputs/textArea/TextArea';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,qBAAqB,EAAE,MAAM,0CAA0C,CAAC;AACjF,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,8CAA8C,CAAC;AACzE,OAAO,EAAE,QAAQ,EAAE,MAAM,iDAAiD,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,qBAAqB,EAAE,MAAM,0CAA0C,CAAC;AACjF,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,8CAA8C,CAAC;AACzE,OAAO,EAAE,QAAQ,EAAE,MAAM,iDAAiD,CAAC"}

package/dist/index.js

@@ -4,6 +4,7 @@ export { HeadingInnerContainer } from './components/heading/HeadingInnerContaine
 export { Icon } from './components/icon/Icon';
 export { Card } from './components/card/Card';
 export { Pill } from './components/pill/Pill';
+export { Tabs } from './components/tabs/Tabs';
 export { TextInput } from './components/formField/inputs/text/TextInput';
 export { TextArea } from './components/formField/inputs/textArea/TextArea';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,qBAAqB,EAAE,MAAM,0CAA0C,CAAC;AACjF,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,8CAA8C,CAAC;AACzE,OAAO,EAAE,QAAQ,EAAE,MAAM,iDAAiD,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,qBAAqB,EAAE,MAAM,0CAA0C,CAAC;AACjF,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,8CAA8C,CAAC;AACzE,OAAO,EAAE,QAAQ,EAAE,MAAM,iDAAiD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arbor-education/design-system.components",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "The component library for the design system (the baby)",
   "main": "dist/index.js",
   "repository": {

package/src/components/icon/Icon.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta } from '@storybook/react-vite';
 import { Icon } from './Icon';
+import { allowedIcons } from './allowedIcons';
 
 const meta: Meta<typeof Icon> = {
   title: 'Components/Icon',
@@ -11,6 +12,13 @@ export const Default = {
     name: '3-dot',
     size: 16,
   },
+  argTypes: {
+    name: {
+      control: 'select',
+      description: 'Icon name',
+      options: Object.keys(allowedIcons),
+    },
+  },
 };
 
 export default meta;

package/src/components/tabs/Tabs.stories.tsx

@@ -0,0 +1,92 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+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',
+    },
+  },
+} satisfies Meta<typeof Tabs>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Basic tabs with buttons
+export const Default: Story = {
+  args: {
+    children: (
+      <>
+        <Tabs.Item active>Overview</Tabs.Item>
+        <Tabs.Item>Details</Tabs.Item>
+        <Tabs.Item>Settings</Tabs.Item>
+      </>
+    ),
+  },
+};
+
+// Tabs with links
+export const WithLinks: Story = {
+  args: {
+    children: (
+      <>
+        <Tabs.Item tabElement="link" tabElementProps={{ href: '#overview' }} active>
+          Overview
+        </Tabs.Item>
+        <Tabs.Item tabElement="link" tabElementProps={{ href: '#details' }}>
+          Details
+        </Tabs.Item>
+        <Tabs.Item tabElement="link" tabElementProps={{ href: '#settings' }}>
+          Settings
+        </Tabs.Item>
+      </>
+    ),
+  },
+};
+
+// Mixed tabs (buttons and links)
+export const Mixed: Story = {
+  args: {
+    children: (
+      <>
+        <Tabs.Item active>Home</Tabs.Item>
+        <Tabs.Item tabElement="link" tabElementProps={{ href: '#about' }}>
+          About
+        </Tabs.Item>
+        <Tabs.Item>Contact</Tabs.Item>
+        <Tabs.Item tabElement="link" tabElementProps={{ href: '#help' }}>
+          Help
+        </Tabs.Item>
+      </>
+    ),
+  },
+};
+
+// Many tabs
+export const ManyTabs: Story = {
+  args: {
+    children: (
+      <>
+        <Tabs.Item active iconName="list">Tab 1</Tabs.Item>
+        <Tabs.Item iconName="list">Tab 2</Tabs.Item>
+        <Tabs.Item iconName="list">Tab 3</Tabs.Item>
+        <Tabs.Item iconName="list">Tab 4</Tabs.Item>
+        <Tabs.Item iconName="list">Tab 5</Tabs.Item>
+        <Tabs.Item iconName="list">Tab 6</Tabs.Item>
+        <Tabs.Item iconName="list">Tab 7</Tabs.Item>
+        <Tabs.Item iconName="list">Tab 8</Tabs.Item>
+      </>
+    ),
+  },
+};

package/src/components/tabs/Tabs.test.tsx

@@ -0,0 +1,220 @@
+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(
+      <Tabs>
+        <Tabs.Item>Tab 1</Tabs.Item>
+        <Tabs.Item>Tab 2</Tabs.Item>
+      </Tabs>,
+    );
+
+    const tabsContainer = screen.getByRole('tablist');
+    expect(tabsContainer).toBeInTheDocument();
+    expect(tabsContainer.tagName).toBe('UL');
+    expect(tabsContainer).toHaveClass('ds-tabs');
+  });
+
+  test('renders children correctly', () => {
+    render(
+      <Tabs>
+        <Tabs.Item>Overview</Tabs.Item>
+        <Tabs.Item>Details</Tabs.Item>
+        <Tabs.Item>Settings</Tabs.Item>
+      </Tabs>,
+    );
+
+    expect(screen.getByText('Overview')).toBeInTheDocument();
+    expect(screen.getByText('Details')).toBeInTheDocument();
+    expect(screen.getByText('Settings')).toBeInTheDocument();
+  });
+
+  test('applies custom className', () => {
+    render(
+      <Tabs className="custom-tabs">
+        <Tabs.Item>Tab 1</Tabs.Item>
+      </Tabs>,
+    );
+
+    const tabsContainer = screen.getByRole('tablist');
+    expect(tabsContainer).toHaveClass('ds-tabs', 'custom-tabs');
+  });
+
+  test('passes through additional props', () => {
+    render(
+      <Tabs data-testid="tabs-container" aria-label="Navigation tabs">
+        <Tabs.Item>Tab 1</Tabs.Item>
+      </Tabs>,
+    );
+
+    const tabsContainer = screen.getByTestId('tabs-container');
+    expect(tabsContainer).toHaveAttribute('aria-label', 'Navigation tabs');
+  });
+});
+
+describe('TabsItem component', () => {
+  test('renders as button by default', () => {
+    render(
+      <Tabs>
+        <Tabs.Item>Tab Button</Tabs.Item>
+      </Tabs>,
+    );
+
+    const tabButton = screen.getByRole('tab');
+    expect(tabButton.tagName).toBe('BUTTON');
+    expect(tabButton).toHaveTextContent('Tab Button');
+  });
+
+  test('renders as link when tabElement is link', () => {
+    render(
+      <Tabs>
+        <Tabs.Item tabElement="link" tabElementProps={{ href: '#overview' }}>
+          Overview Link
+        </Tabs.Item>
+      </Tabs>,
+    );
+
+    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(
+      <Tabs>
+        <Tabs.Item active>Active Tab</Tabs.Item>
+        <Tabs.Item>Inactive Tab</Tabs.Item>
+      </Tabs>,
+    );
+
+    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(
+      <Tabs>
+        <Tabs.Item>Tab Item</Tabs.Item>
+      </Tabs>,
+    );
+
+    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(
+      <Tabs>
+        <Tabs.Item className="custom-tab-item">Tab Item</Tabs.Item>
+      </Tabs>,
+    );
+
+    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(
+      <Tabs>
+        <Tabs.Item tabElementProps={{ onClick: handleClick }}>
+          Clickable Tab
+        </Tabs.Item>
+      </Tabs>,
+    );
+
+    fireEvent.click(screen.getByRole('tab'));
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  test('passes through additional props to button', () => {
+    render(
+      <Tabs>
+        {/* @ts-expect-error - data-testid is not a valid prop for ButtonHTMLAttributes */}
+        <Tabs.Item tabElementProps={{ 'disabled': true, 'data-testid': 'tab-button' }}>
+          Disabled Tab
+        </Tabs.Item>
+      </Tabs>,
+    );
+
+    const tabButton = screen.getByTestId('tab-button');
+    expect(tabButton).toBeDisabled();
+  });
+
+  test('passes through additional props to link', () => {
+    render(
+      <Tabs>
+        <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',
+          }}
+        >
+          Link Tab
+        </Tabs.Item>
+      </Tabs>,
+    );
+
+    const tabLink = screen.getByTestId('tab-link');
+    expect(tabLink).toHaveAttribute('href', '#test');
+    expect(tabLink).toHaveAttribute('target', '_blank');
+  });
+
+  test('renders multiple tabs correctly', () => {
+    render(
+      <Tabs>
+        <Tabs.Item active>Tab 1</Tabs.Item>
+        <Tabs.Item>Tab 2</Tabs.Item>
+        <Tabs.Item tabElement="link" tabElementProps={{ href: '#tab3' }}>
+          Tab 3
+        </Tabs.Item>
+      </Tabs>,
+    );
+
+    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(
+      <Tabs>
+        <Tabs.Item active>Button Tab</Tabs.Item>
+        <Tabs.Item tabElement="link" tabElementProps={{ href: '#link-tab' }}>
+          Link Tab
+        </Tabs.Item>
+      </Tabs>,
+    );
+
+    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');
+  });
+});

package/src/components/tabs/Tabs.tsx

@@ -0,0 +1,14 @@
+import classNames from 'classnames';
+import { type HTMLAttributes } from 'react';
+import { TabsItem } from './TabsItem';
+
+export const Tabs = (props: HTMLAttributes<HTMLUListElement> & { children: React.ReactNode }) => {
+  const { children, className, ...rest } = props;
+  return (
+    <ul role="tablist" className={classNames('ds-tabs', className)} {...rest}>
+      {children}
+    </ul>
+  );
+};
+
+Tabs.Item = TabsItem;

package/src/components/tabs/TabsItem.stories.tsx

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { TabsItem } from './TabsItem';
+import { Tabs } from './Tabs';
+import { allowedIcons } from 'Components/icon/allowedIcons';
+
+const meta = {
+  title: 'Components/Tabs/TabsItem',
+  component: TabsItem,
+  decorators: [
+    Story => (
+      <Tabs>
+        <Story />
+      </Tabs>
+    ),
+  ],
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    active: {
+      control: 'boolean',
+      description: 'Whether the tab is active',
+    },
+    tabElement: {
+      control: 'select',
+      options: ['button', 'link'],
+      description: 'Element type for the tab',
+    },
+    iconName: {
+      control: 'select',
+      options: Object.keys(allowedIcons),
+      description: 'Icon to display before the text',
+    },
+    children: {
+      control: 'text',
+      description: 'Tab text content',
+    },
+    className: {
+      control: 'text',
+      description: 'Additional CSS classes',
+    },
+  },
+} satisfies Meta<typeof TabsItem>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Basic button tab
+export const Default: Story = {
+  args: {
+    active: false,
+    children: 'Tab Item',
+  },
+};

package/src/components/tabs/TabsItem.tsx

@@ -0,0 +1,42 @@
+import classNames from 'classnames';
+import type { allowedIcons } from 'Components/icon/allowedIcons';
+import { Icon } from 'Components/icon/Icon';
+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 const TabsItem = (props: TabsItemProps) => {
+  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 (
+    <li role="presentation" className={classNames('ds-tabs-item', className)} {...rest}>
+      {tabElement === 'button'
+        ? (
+            <button {...(tabElementProps as ButtonHTMLAttributes<HTMLButtonElement>)} {...sharedProps}>
+              {iconName && <Icon name={iconName} size={16} />}
+              {children}
+            </button>
+          )
+        : (
+            <a {...(tabElementProps as AnchorHTMLAttributes<HTMLAnchorElement>)} {...sharedProps}>
+              {iconName && <Icon name={iconName} size={16} />}
+              {children}
+            </a>
+          )}
+    </li>
+  );
+};