@dt-dds/react-tabs 1.0.0-beta.39

package/CHANGELOG.md

@@ -0,0 +1,385 @@
+# @dt-ui/react-tabs
+
+## 1.0.0-beta.39
+
+### Patch Changes
+
+- chore: fix publish after npmjs.org pkg unpublish
+- Updated dependencies
+- Updated dependencies [223664b]
+  - @dt-dds/react-box@1.0.0-beta.10
+
+## 1.0.0-beta.38
+
+### Major Changes
+
+- refactor!: rename pkg and publish to npmjs
+
+### Patch Changes
+
+- Updated dependencies
+  - @dt-dds/react-box@1.0.0-beta.9
+  - @dt-dds/react-core@1.0.0-beta.41
+  - @dt-dds/react-icon@1.0.0-beta.42
+  - @dt-dds/react-icon-button@1.0.0-beta.9
+
+## 0.1.0-beta.37
+
+### Patch Changes
+
+- chore: fix pkg deps versions
+
+## 0.1.0-beta.36
+
+### Patch Changes
+
+- refactor: drop icon funcional state
+- Updated dependencies
+  - @dt-ui/react-icon@0.1.0-beta.41
+
+## 0.1.0-beta.35
+
+### Patch Changes
+
+- refactor: theme typography values
+- Updated dependencies
+  - @dt-ui/react-core@0.1.0-beta.40
+  - @dt-ui/react-icon@0.1.0-beta.40
+
+## 0.1.0-beta.34
+
+### Minor Changes
+
+- feat: update shadow theme values
+
+### Patch Changes
+
+- Updated dependencies
+  - @dt-ui/react-core@0.1.0-beta.39
+  - @dt-ui/react-icon@0.1.0-beta.39
+
+## 0.1.0-beta.33
+
+### Minor Changes
+
+- feat: add new icon font sizes
+
+### Patch Changes
+
+- Updated dependencies
+  - @dt-ui/react-icon@0.1.0-beta.38
+
+## 0.1.0-beta.32
+
+### Patch Changes
+
+- chore: update theme font-styles
+- Updated dependencies
+  - @dt-ui/react-core@0.1.0-beta.38
+  - @dt-ui/react-icon@0.1.0-beta.37
+
+## 0.1.0-beta.31
+
+### Patch Changes
+
+- chore: review OSS files
+- Updated dependencies
+  - @dt-ui/react-box@0.1.0-beta.8
+  - @dt-ui/react-core@0.1.0-beta.37
+  - @dt-ui/react-icon@0.1.0-beta.36
+
+## 0.1.0-beta.30
+
+### Patch Changes
+
+- chore: update contextual colors
+- Updated dependencies
+  - @dt-ui/react-core@0.1.0-beta.36
+  - @dt-ui/react-icon@0.1.0-beta.35
+
+## 0.1.0-beta.29
+
+### Minor Changes
+
+- feat: implement IconButton contrast and size
+
+### Patch Changes
+
+- Updated dependencies
+  - @dt-ui/react-icon@0.1.0-beta.34
+
+## 0.1.0-beta.28
+
+### Patch Changes
+
+- fix: change tabs styled border logic
+
+## 0.1.0-beta.27
+
+### Minor Changes
+
+- feat: add border bottom to tab default
+
+## 0.1.0-beta.26
+
+### Minor Changes
+
+- feat: improve Tabs component and apply new colors
+
+### Patch Changes
+
+- fix: change content.light contextual color
+- Updated dependencies
+  - @dt-ui/react-core@0.1.0-beta.35
+  - @dt-ui/react-icon@0.1.0-beta.33
+
+## 0.1.0-beta.25
+
+### Minor Changes
+
+- feat: move icon-button to independent
+
+### Patch Changes
+
+- Updated dependencies
+  - @dt-ui/react-icon@0.1.0-beta.32
+
+## 0.1.0-beta.24
+
+### Patch Changes
+
+- fix: add accent to colors type
+- Updated dependencies
+  - @dt-ui/react-core@0.1.0-beta.34
+  - @dt-ui/react-icon@0.1.0-beta.31
+
+## 0.1.0-beta.23
+
+### Patch Changes
+
+- fix: change button text according to ux
+- Updated dependencies
+  - @dt-ui/react-core@0.1.0-beta.33
+  - @dt-ui/react-icon@0.1.0-beta.30
+
+## 0.1.0-beta.22
+
+### Patch Changes
+
+- chore: update contexual colors
+- Updated dependencies
+  - @dt-ui/react-core@0.1.0-beta.32
+  - @dt-ui/react-icon@0.1.0-beta.29
+
+## 0.1.0-beta.21
+
+### Patch Changes
+
+- style: update responsive font styles
+- Updated dependencies
+  - @dt-ui/react-core@0.1.0-beta.31
+  - @dt-ui/react-icon@0.1.0-beta.28
+
+## 0.1.0-beta.20
+
+### Minor Changes
+
+- feat: add spinner size 'extra-small' & update specs
+
+### Patch Changes
+
+- Updated dependencies
+  - @dt-ui/react-core@0.1.0-beta.30
+  - @dt-ui/react-icon@0.1.0-beta.27
+
+## 0.1.0-beta.19
+
+### Patch Changes
+
+- chore: add theme breakpoints
+- Updated dependencies
+  - @dt-ui/react-core@0.1.0-beta.29
+  - @dt-ui/react-icon@0.1.0-beta.26
+
+## 0.1.0-beta.18
+
+### Minor Changes
+
+- feat: add id to base props
+
+### Patch Changes
+
+- Updated dependencies
+  - @dt-ui/react-core@0.1.0-beta.28
+  - @dt-ui/react-icon@0.1.0-beta.25
+
+## 0.1.0-beta.17
+
+### Minor Changes
+
+- feat: change breakpoints values
+
+### Patch Changes
+
+- Updated dependencies
+  - @dt-ui/react-core@0.1.0-beta.27
+  - @dt-ui/react-icon@0.1.0-beta.24
+
+## 0.1.0-beta.16
+
+### Patch Changes
+
+- fix: replace body to correct one
+- Updated dependencies
+  - @dt-ui/react-core@0.1.0-beta.26
+  - @dt-ui/react-icon@0.1.0-beta.23
+
+## 0.1.0-beta.15
+
+### Patch Changes
+
+- chore: add theme colors missing types
+- Updated dependencies
+  - @dt-ui/react-core@0.1.0-beta.25
+  - @dt-ui/react-icon@0.1.0-beta.22
+
+## 0.1.0-beta.14
+
+### Patch Changes
+
+- refactor: drop truckapi theme
+- Updated dependencies
+  - @dt-ui/react-core@0.1.0-beta.24
+  - @dt-ui/react-icon@0.1.0-beta.21
+
+## 0.1.0-beta.13
+
+### Minor Changes
+
+- feat: update core and semantic colors
+- feat: remove greenlane theme
+
+### Patch Changes
+
+- Updated dependencies
+- Updated dependencies
+  - @dt-ui/react-core@0.1.0-beta.23
+  - @dt-ui/react-icon@0.1.0-beta.20
+
+## 0.1.0-beta.12
+
+### Minor Changes
+
+- feat: add icon option for truckapi theme
+
+### Patch Changes
+
+- Updated dependencies
+  - @dt-ui/react-core@0.1.0-beta.22
+  - @dt-ui/react-icon@0.1.0-beta.19
+
+## 0.1.0-beta.11
+
+### Patch Changes
+
+- fix: tooltip z index
+- Updated dependencies
+  - @dt-ui/react-core@0.1.0-beta.21
+  - @dt-ui/react-icon@0.1.0-beta.18
+
+## 0.1.0-beta.10
+
+### Minor Changes
+
+- feat: add segmented control component
+
+### Patch Changes
+
+- Updated dependencies
+  - @dt-ui/react-core@0.1.0-beta.20
+  - @dt-ui/react-icon@0.1.0-beta.17
+
+## 0.1.0-beta.9
+
+### Patch Changes
+
+- fix: add shape for tooltip on truckapi theme
+- Updated dependencies
+  - @dt-ui/react-core@0.1.0-beta.19
+  - @dt-ui/react-icon@0.1.0-beta.16
+
+## 0.1.0-beta.8
+
+### Patch Changes
+
+- fix: remove devDependecy export
+- Updated dependencies
+  - @dt-ui/react-core@0.1.0-beta.18
+  - @dt-ui/react-icon@0.1.0-beta.15
+
+## 0.1.0-beta.7
+
+### Patch Changes
+
+- test: add test custom render
+- chore: move counter component to stepper pkg
+- fix: tab variant type export
+- Updated dependencies
+  - @dt-ui/react-core@0.1.0-beta.17
+  - @dt-ui/react-icon@0.1.0-beta.14
+
+## 0.1.0-beta.6
+
+### Minor Changes
+
+- feat: create select
+
+### Patch Changes
+
+- Updated dependencies
+  - @dt-ui/react-core@0.1.0-beta.16
+  - @dt-ui/react-icon@0.1.0-beta.13
+
+## 0.1.0-beta.5
+
+### Patch Changes
+
+- fix: show shadows only when scroll is visible
+- Updated dependencies
+  - @dt-ui/react-core@0.1.0-beta.15
+  - @dt-ui/react-icon@0.1.0-beta.12
+
+## 0.1.0-beta.4
+
+### Patch Changes
+
+- fix: update border radius theme specifications
+- Updated dependencies
+  - @dt-ui/react-core@0.1.0-beta.14
+  - @dt-ui/react-icon@0.1.0-beta.11
+
+## 0.1.0-beta.3
+
+### Minor Changes
+
+- feat: add onClick on Icon
+- feat: scrollable tabs
+
+### Patch Changes
+
+- Updated dependencies
+  - @dt-ui/react-icon@0.1.0-beta.10
+
+## 0.1.0-beta.2
+
+### Patch Changes
+
+- fix: match accordion design
+- Updated dependencies
+  - @dt-ui/react-core@0.1.0-beta.13
+
+## 0.1.0-beta.1
+
+### Patch Changes
+
+- chore: make tabs independent component

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Daimler Truck AG.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,90 @@
+# Tabs Package
+
+The Tabs component allows different views/information to be switched easily.
+If the Tabs run out of space, it will appear horizontal scroll.
+
+## Usage
+
+```jsx
+import { Tabs, TabPanel, useTabs } from '@dt-dds/react';
+import { Icon } from '@dt-dds/react-icon';
+
+const { activeTab, handleChange } = useTabs(0);
+
+return (
+  <>
+    <Tabs activeTab={activeTab} handleChange={handleChange}>
+      <Tabs.Item icon={<Icon code='menu' />} label='Tab 1' />
+      <Tabs.Item label='Tab 2' />
+      <Tabs.Item label='Tab 3' isDisabled />
+    </Tabs>
+  </>
+);
+```
+
+## API
+
+### Tabs
+
+| Property       | Type                    | Default   | Description                               |
+| -------------- | ----------------------- | --------- | ----------------------------------------- |
+| `children`     | `ReactNode`             | -         | Child components to be rendered           |
+| `dataTestId`   | `string`                | `tabs`    | Customizable test identifier              |
+| `style`        | `React.CSSProperties`   | -         | Styles to be used in the Tabs             |
+| `activeTab`    | `number`                | -         | Represents the active tab                 |
+| `variant`      | `default` / `contained` | `default` | Defines type of tab                       |
+| `handleChange` | `function`              | -         | When triggered, it changes the active tab |
+
+### Tabs.Item
+
+| Property     | Type        | Default | Description                              |
+| ------------ | ----------- | ------- | ---------------------------------------- |
+| `label`      | `string`    | -       | Defines the tab label                    |
+| `icon`       | `ReactNode` | -       | Defines the tab icon                     |
+| `dataTestId` | `string`    | -       | Customizable test identifier             |
+| `isDisabled` | `string`    | -       | Determines the disabled state of the tab |
+
+## Stack
+
+- [TypeScript](https://www.typescriptlang.org/) for static type checking
+- [React](https://reactjs.org/) — JavaScript library for user interfaces
+- [Emotion](https://emotion.sh/docs/introduction) — for writing css styles with JavaScript
+- [Storybook](https://storybook.js.org/) — UI component environment powered by Vite
+- [Jest](https://jestjs.io/) - JavaScript Testing Framework
+- [React Testing Library](https://testing-library.com/) - to test UI components in a user-centric way
+- [ESLint](https://eslint.org/) for code linting
+- [Prettier](https://prettier.io) for code formatting
+- [Tsup](https://github.com/egoist/tsup) — TypeScript bundler powered by esbuild
+- [Yarn](https://yarnpkg.com/) from managing packages
+
+## Commands
+
+- `yarn build` - Build the package
+- `yarn dev` - Run the package locally
+- `yarn lint` - Lint all files within this package
+- `yarn test` - Run all unit tests
+- `yarn test:report` - Open the test coverage report
+- `yarn test:update:snapshot` - Run all unit tests and update the snapshot
+
+## Compilation
+
+Running `yarn build` from the root of the package will use [tsup](https://tsup.egoist.dev/) to compile the raw TypeScript and React code to plain JavaScript.
+
+The `/dist` folder contains the compiled output.
+
+```bash
+tabs
+└── dist
+    ├── index.d.ts  <-- Types
+    ├── index.js    <-- CommonJS version
+    └── index.mjs   <-- ES Modules version
+    ...
+```
+
+## Versioning
+
+Follows [semantic versioning](https://semver.org/)
+
+## &copy; License
+
+Licensed under [MIT License](LICENSE.md)

package/dist/index.d.ts

@@ -0,0 +1,37 @@
+import { BaseProps, Theme } from '@dt-dds/react-core';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+type Variant = 'default' | 'contained';
+
+interface TabItemProps extends BaseProps {
+    activeTab?: number;
+    variant?: Variant;
+    index?: number;
+    isDisabled?: boolean;
+    label: string;
+    icon?: ReactNode;
+    handleChange?: (value: number) => void;
+}
+
+interface TabsProps extends BaseProps {
+    activeTab: number;
+    variant?: Variant;
+    handleChange: (value: number) => void;
+}
+declare const Tabs: {
+    ({ children, style, activeTab, dataTestId, variant, handleChange, }: TabsProps): react_jsx_runtime.JSX.Element;
+    Item: ({ activeTab, dataTestId, isDisabled, index, variant, label, icon, handleChange, }: TabItemProps) => react_jsx_runtime.JSX.Element;
+};
+
+declare const useTabs: (initialTab?: number) => {
+    activeTab: number;
+    handleChange: (value: number) => void;
+};
+
+declare module '@emotion/react' {
+    interface Theme extends Theme {
+    }
+}
+
+export { Tabs, TabsProps, useTabs };

package/dist/index.js

@@ -0,0 +1,267 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// index.ts
+var tabs_exports = {};
+__export(tabs_exports, {
+  Tabs: () => Tabs,
+  useTabs: () => useTabs
+});
+module.exports = __toCommonJS(tabs_exports);
+
+// src/Tabs.tsx
+var import_react_box = require("@dt-dds/react-box");
+var import_react_core = require("@dt-dds/react-core");
+var import_react_icon = require("@dt-dds/react-icon");
+var import_react_icon_button = require("@dt-dds/react-icon-button");
+var import_react2 = require("@emotion/react");
+var import_react3 = require("react");
+
+// src/components/TabItem/TabItem.tsx
+var import_react = require("react");
+
+// src/components/TabItem/TabItem.styled.ts
+var import_styled = __toESM(require("@emotion/styled"));
+var TabItemStyled = import_styled.default.button`
+  border: none;
+  display: flex;
+  align-items: center;
+
+  ${({ theme, active, disabled, variant }) => `
+    ${active ? theme.fontStyles.body2Bold : theme.fontStyles.body2}
+    ${variant === "default" ? `
+          background-color: transparent;
+          ${active ? `border-bottom: 2px solid ${theme.palette.accent.default};` : ""}
+          ` : `
+          background-color: ${active ? theme.palette.surface.contrast : "transparent"};`}
+    
+    color: ${disabled ? theme.palette.content.light : theme.palette.accent.default};
+    padding: ${theme.spacing["3xs"]} ${theme.spacing.s};
+    cursor: ${active ? "default" : disabled ? "not-allowed" : "pointer"};
+    white-space: nowrap;
+    gap: ${theme.spacing["4xs"]};
+    
+    ${!active && !disabled && `
+        &:hover {
+          background-color: ${theme.palette.accent.light};
+        }        
+      `}
+  `}
+`;
+
+// src/components/TabItem/TabItem.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var TabItem = ({
+  activeTab,
+  dataTestId,
+  isDisabled,
+  index,
+  variant,
+  label,
+  icon,
+  handleChange
+}) => {
+  const ref = (0, import_react.useRef)(null);
+  const handleOnClick = () => {
+    if (!ref || !ref.current || !ref.current.parentElement)
+      return;
+    const elementClientRect = ref.current.getBoundingClientRect();
+    const parentClientRect = ref.current.parentElement.getBoundingClientRect();
+    if (elementClientRect.left < parentClientRect.left) {
+      ref.current.parentElement.scroll({
+        left: ref.current.parentElement.scrollLeft - (parentClientRect.left - elementClientRect.left),
+        behavior: "smooth"
+      });
+    }
+    if (parentClientRect.right < elementClientRect.right) {
+      ref.current.parentElement.scroll({
+        left: ref.current.parentElement.scrollLeft + (elementClientRect.right - parentClientRect.right),
+        behavior: "smooth"
+      });
+    }
+    handleChange(index);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    TabItemStyled,
+    {
+      active: activeTab === index,
+      "data-testid": dataTestId ? dataTestId : `tab-item-${index}`,
+      disabled: isDisabled,
+      onClick: handleOnClick,
+      ref,
+      role: "tab",
+      tabIndex: activeTab === index ? 0 : -1,
+      variant,
+      children: [
+        icon,
+        label
+      ]
+    }
+  );
+};
+
+// src/Tabs.styled.ts
+var import_styled2 = __toESM(require("@emotion/styled"));
+var TabsStyled = import_styled2.default.div`
+  ${({ variant }) => `
+    display: flex;
+    flex-direction: row;
+    overflow: hidden;
+    width: 100%;
+    ${variant === "default" && "margin-bottom: -1px;"}
+  `};
+`;
+
+// src/Tabs.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var SCROLL_MOVEMENT = 120;
+var SCROLL_OFFSET = 0.5;
+var Tabs = ({
+  children,
+  style,
+  activeTab,
+  dataTestId = "tabs",
+  variant = "default",
+  handleChange
+}) => {
+  const ref = (0, import_react3.useRef)(null);
+  const [isLeftSideOverflowing, setIsLeftSideOverflowing] = (0, import_react3.useState)(false);
+  const [isRightSideOverflowing, setIsRightSideOverflowing] = (0, import_react3.useState)(false);
+  const theme = (0, import_react2.useTheme)();
+  const clonedChildren = (0, import_react3.useMemo)(
+    () => import_react3.Children.map(children, (child, index) => {
+      return child && (0, import_react3.cloneElement)(child, __spreadProps(__spreadValues({}, child.props), {
+        activeTab,
+        variant,
+        index,
+        handleChange
+      }));
+    }),
+    [children, activeTab, variant, handleChange]
+  );
+  const handleScroll = (scrollOffset) => {
+    if (!ref || !ref.current)
+      return;
+    const left = ref.current.scrollLeft + scrollOffset;
+    ref.current.scroll({
+      left,
+      behavior: "smooth"
+    });
+    calculateIfIsOverflowing(left);
+  };
+  const calculateIfIsOverflowing = (currentScrollLeft) => {
+    if (!ref || !ref.current)
+      return;
+    const scrollLeft = currentScrollLeft != null ? currentScrollLeft : ref.current.scrollLeft;
+    setIsLeftSideOverflowing(scrollLeft > 0);
+    setIsRightSideOverflowing(
+      ref.current.clientWidth + scrollLeft + SCROLL_OFFSET < ref.current.scrollWidth
+    );
+  };
+  (0, import_react3.useEffect)(() => calculateIfIsOverflowing(), []);
+  (0, import_react_core.useDebounceResize)(() => calculateIfIsOverflowing());
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    import_react_box.Box,
+    {
+      style: __spreadValues({
+        flexDirection: "row"
+      }, variant === "default" && {
+        borderBottom: `1px solid ${theme.palette.border.default}`
+      }),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_icon_button.IconButton, { onClick: () => handleScroll(-SCROLL_MOVEMENT), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_react_icon.Icon,
+          {
+            code: "keyboard_arrow_left",
+            dataTestId: "left-arrow",
+            style: __spreadValues({}, !isLeftSideOverflowing && { display: "none" })
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          TabsStyled,
+          {
+            "data-testid": dataTestId,
+            ref,
+            role: "tablist",
+            style,
+            variant,
+            children: clonedChildren
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_icon_button.IconButton, { onClick: () => handleScroll(SCROLL_MOVEMENT), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_react_icon.Icon,
+          {
+            code: "keyboard_arrow_right",
+            dataTestId: "right-arrow",
+            style: __spreadValues({}, !isRightSideOverflowing && { display: "none" })
+          }
+        ) })
+      ]
+    }
+  );
+};
+Tabs.Item = TabItem;
+
+// src/hooks/useTabs.ts
+var import_react4 = require("react");
+var useTabs = (initialTab = 0) => {
+  const [activeTab, setActiveTab] = (0, import_react4.useState)(initialTab);
+  (0, import_react4.useEffect)(() => {
+    setActiveTab(initialTab);
+  }, [initialTab]);
+  const handleChange = (value) => {
+    setActiveTab(value);
+  };
+  return {
+    activeTab,
+    handleChange
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Tabs,
+  useTabs
+});

package/dist/index.mjs

@@ -0,0 +1,239 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
+// src/Tabs.tsx
+import { Box } from "@dt-dds/react-box";
+import { useDebounceResize } from "@dt-dds/react-core";
+import { Icon } from "@dt-dds/react-icon";
+import { IconButton } from "@dt-dds/react-icon-button";
+import { useTheme } from "@emotion/react";
+import {
+  Children,
+  cloneElement,
+  useEffect,
+  useMemo,
+  useRef as useRef2,
+  useState
+} from "react";
+
+// src/components/TabItem/TabItem.tsx
+import { useRef } from "react";
+
+// src/components/TabItem/TabItem.styled.ts
+import styled from "@emotion/styled";
+var TabItemStyled = styled.button`
+  border: none;
+  display: flex;
+  align-items: center;
+
+  ${({ theme, active, disabled, variant }) => `
+    ${active ? theme.fontStyles.body2Bold : theme.fontStyles.body2}
+    ${variant === "default" ? `
+          background-color: transparent;
+          ${active ? `border-bottom: 2px solid ${theme.palette.accent.default};` : ""}
+          ` : `
+          background-color: ${active ? theme.palette.surface.contrast : "transparent"};`}
+    
+    color: ${disabled ? theme.palette.content.light : theme.palette.accent.default};
+    padding: ${theme.spacing["3xs"]} ${theme.spacing.s};
+    cursor: ${active ? "default" : disabled ? "not-allowed" : "pointer"};
+    white-space: nowrap;
+    gap: ${theme.spacing["4xs"]};
+    
+    ${!active && !disabled && `
+        &:hover {
+          background-color: ${theme.palette.accent.light};
+        }        
+      `}
+  `}
+`;
+
+// src/components/TabItem/TabItem.tsx
+import { jsxs } from "react/jsx-runtime";
+var TabItem = ({
+  activeTab,
+  dataTestId,
+  isDisabled,
+  index,
+  variant,
+  label,
+  icon,
+  handleChange
+}) => {
+  const ref = useRef(null);
+  const handleOnClick = () => {
+    if (!ref || !ref.current || !ref.current.parentElement)
+      return;
+    const elementClientRect = ref.current.getBoundingClientRect();
+    const parentClientRect = ref.current.parentElement.getBoundingClientRect();
+    if (elementClientRect.left < parentClientRect.left) {
+      ref.current.parentElement.scroll({
+        left: ref.current.parentElement.scrollLeft - (parentClientRect.left - elementClientRect.left),
+        behavior: "smooth"
+      });
+    }
+    if (parentClientRect.right < elementClientRect.right) {
+      ref.current.parentElement.scroll({
+        left: ref.current.parentElement.scrollLeft + (elementClientRect.right - parentClientRect.right),
+        behavior: "smooth"
+      });
+    }
+    handleChange(index);
+  };
+  return /* @__PURE__ */ jsxs(
+    TabItemStyled,
+    {
+      active: activeTab === index,
+      "data-testid": dataTestId ? dataTestId : `tab-item-${index}`,
+      disabled: isDisabled,
+      onClick: handleOnClick,
+      ref,
+      role: "tab",
+      tabIndex: activeTab === index ? 0 : -1,
+      variant,
+      children: [
+        icon,
+        label
+      ]
+    }
+  );
+};
+
+// src/Tabs.styled.ts
+import styled2 from "@emotion/styled";
+var TabsStyled = styled2.div`
+  ${({ variant }) => `
+    display: flex;
+    flex-direction: row;
+    overflow: hidden;
+    width: 100%;
+    ${variant === "default" && "margin-bottom: -1px;"}
+  `};
+`;
+
+// src/Tabs.tsx
+import { jsx, jsxs as jsxs2 } from "react/jsx-runtime";
+var SCROLL_MOVEMENT = 120;
+var SCROLL_OFFSET = 0.5;
+var Tabs = ({
+  children,
+  style,
+  activeTab,
+  dataTestId = "tabs",
+  variant = "default",
+  handleChange
+}) => {
+  const ref = useRef2(null);
+  const [isLeftSideOverflowing, setIsLeftSideOverflowing] = useState(false);
+  const [isRightSideOverflowing, setIsRightSideOverflowing] = useState(false);
+  const theme = useTheme();
+  const clonedChildren = useMemo(
+    () => Children.map(children, (child, index) => {
+      return child && cloneElement(child, __spreadProps(__spreadValues({}, child.props), {
+        activeTab,
+        variant,
+        index,
+        handleChange
+      }));
+    }),
+    [children, activeTab, variant, handleChange]
+  );
+  const handleScroll = (scrollOffset) => {
+    if (!ref || !ref.current)
+      return;
+    const left = ref.current.scrollLeft + scrollOffset;
+    ref.current.scroll({
+      left,
+      behavior: "smooth"
+    });
+    calculateIfIsOverflowing(left);
+  };
+  const calculateIfIsOverflowing = (currentScrollLeft) => {
+    if (!ref || !ref.current)
+      return;
+    const scrollLeft = currentScrollLeft != null ? currentScrollLeft : ref.current.scrollLeft;
+    setIsLeftSideOverflowing(scrollLeft > 0);
+    setIsRightSideOverflowing(
+      ref.current.clientWidth + scrollLeft + SCROLL_OFFSET < ref.current.scrollWidth
+    );
+  };
+  useEffect(() => calculateIfIsOverflowing(), []);
+  useDebounceResize(() => calculateIfIsOverflowing());
+  return /* @__PURE__ */ jsxs2(
+    Box,
+    {
+      style: __spreadValues({
+        flexDirection: "row"
+      }, variant === "default" && {
+        borderBottom: `1px solid ${theme.palette.border.default}`
+      }),
+      children: [
+        /* @__PURE__ */ jsx(IconButton, { onClick: () => handleScroll(-SCROLL_MOVEMENT), children: /* @__PURE__ */ jsx(
+          Icon,
+          {
+            code: "keyboard_arrow_left",
+            dataTestId: "left-arrow",
+            style: __spreadValues({}, !isLeftSideOverflowing && { display: "none" })
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          TabsStyled,
+          {
+            "data-testid": dataTestId,
+            ref,
+            role: "tablist",
+            style,
+            variant,
+            children: clonedChildren
+          }
+        ),
+        /* @__PURE__ */ jsx(IconButton, { onClick: () => handleScroll(SCROLL_MOVEMENT), children: /* @__PURE__ */ jsx(
+          Icon,
+          {
+            code: "keyboard_arrow_right",
+            dataTestId: "right-arrow",
+            style: __spreadValues({}, !isRightSideOverflowing && { display: "none" })
+          }
+        ) })
+      ]
+    }
+  );
+};
+Tabs.Item = TabItem;
+
+// src/hooks/useTabs.ts
+import { useState as useState2, useEffect as useEffect2 } from "react";
+var useTabs = (initialTab = 0) => {
+  const [activeTab, setActiveTab] = useState2(initialTab);
+  useEffect2(() => {
+    setActiveTab(initialTab);
+  }, [initialTab]);
+  const handleChange = (value) => {
+    setActiveTab(value);
+  };
+  return {
+    activeTab,
+    handleChange
+  };
+};
+export {
+  Tabs,
+  useTabs
+};

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@dt-dds/react-tabs",
+  "version": "1.0.0-beta.39",
+  "license": "MIT",
+  "exports": {
+    ".": "./dist/index.js"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist/**"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint --cache .",
+    "test": "jest",
+    "test:report": "open ./jest-coverage/lcov-report/index.html",
+    "test:update:snapshot": "jest -u"
+  },
+  "dependencies": {
+    "@dt-dds/react-core": "1.0.0-beta.41",
+    "@dt-dds/react-icon": "1.0.0-beta.42",
+    "@dt-dds/react-icon-button": "1.0.0-beta.9",
+    "@dt-dds/react-box": "1.0.0-beta.10"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.22.9",
+    "@babel/preset-env": "^7.22.9",
+    "@babel/preset-react": "^7.22.5",
+    "@babel/preset-typescript": "^7.23.3",
+    "@emotion/babel-plugin": "^11.11.0",
+    "@emotion/css": "^11.7.1",
+    "@emotion/jest": "^11.10.0",
+    "@emotion/react": "^11.8.2",
+    "@emotion/styled": "^11.8.1",
+    "@types/react": "^18.0.9",
+    "@types/react-dom": "^18.0.4",
+    "babel-loader": "^8.3.0",
+    "eslint-config-custom": "*",
+    "eslint-plugin-storybook": "^9.1.0",
+    "jest-config": "*",
+    "react": "^18.1.0",
+    "react-dom": "^18.2.0",
+    "tsconfig": "*",
+    "tsup": "^6.6.3",
+    "typescript": "^4.5.3"
+  },
+  "peerDependencies": {
+    "@emotion/css": "^11.7.1",
+    "@emotion/react": "^11.8.2",
+    "@emotion/styled": "^11.8.1",
+    "react": ">=17.0.2",
+    "react-dom": ">=17.0.2"
+  }
+}