@eightshift/ui-components 0.0.1

package/dist/components/tabs/tabs.js

@@ -0,0 +1,626 @@
+import { jsx } from "react/jsx-runtime";
+import { f as $880e95eb8b93ba9a$export$ecf600387e221c37, c as $ae20dd8cbca75726$export$d6daf82dcd84e87c, g as $7135fc7d473fd974$export$7cd71aa5ddd6dc4e, h as $7135fc7d473fd974$export$8c25dea96356a8b6, i as $7135fc7d473fd974$export$813b5978dd974d8, j as $7135fc7d473fd974$export$e7c29ae2353b16ea } from "../../SelectionManager-mefd0ThJ.js";
+import { d as $3ef42575df84b30b$export$9d1611c77c2fe928, e as $bdb11010cef70236$export$f680877a34711e37, b as $64fa3d84918910a7$export$86427a43e3e48ebb, a as $64fa3d84918910a7$export$29f1550f4b0d4415, p as $64fa3d84918910a7$export$8dc98ba7eadeaa56, c as $64fa3d84918910a7$export$4d86445c2cf5e3, j as $64fa3d84918910a7$export$2881499e37b75b9a, $ as $64fa3d84918910a7$export$fabf2dc03a41866e, l as $df56164dff5785e2$export$4338b53315abf666 } from "../../utils-BsiH7-5Y.js";
+import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-DG2RfOUr.js";
+import React__default, { useMemo, useRef, useEffect, forwardRef, useContext, createContext, useId, cloneElement } from "react";
+import { $ as $e72dd72e1c76a225$export$2f645645f7bca764 } from "../../useListState-Domq0blV.js";
+import { e as $458b0a5536c1a7cf$export$40bfa8c7b0832715, $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../focusSafely-C3K8zAKj.js";
+import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-Cc-4eouh.js";
+import { $ as $313b98861ee5dd6c$export$d6875122194c7b44 } from "../../useLabels-Dg62M_3P.js";
+import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-jMy6xdVq.js";
+import { a as $ea8dcbcb9ea1b556$export$7e924b3091a3bd18 } from "../../usePress-BQgVor4T.js";
+import { $ as $83013635b024ae3d$export$eac1895992b9f3d6 } from "../../useHasTabbableChild-D3uUNhJ0.js";
+import { _ as __, s as sprintf } from "../../default-i18n-BhE-OUmt.js";
+import { classnames } from "../../utilities/classnames.js";
+import { Notice } from "../notice/notice.js";
+const $99b62ae3ff97ec45$export$c5f62239608282b6 = /* @__PURE__ */ new WeakMap();
+function $99b62ae3ff97ec45$export$567fc7097e064344(state, key, role) {
+  if (typeof key === "string")
+    key = key.replace(/\s+/g, "");
+  let baseId = $99b62ae3ff97ec45$export$c5f62239608282b6.get(state);
+  return `${baseId}-${role}-${key}`;
+}
+function $0175d55c2a017ebc$export$fdf4756d5b8ef90a(props, state, ref) {
+  let { key, isDisabled: propsDisabled, shouldSelectOnPressUp } = props;
+  let { selectionManager: manager, selectedKey } = state;
+  let isSelected = key === selectedKey;
+  let isDisabled = propsDisabled || state.isDisabled || state.selectionManager.isDisabled(key);
+  let { itemProps, isPressed } = $880e95eb8b93ba9a$export$ecf600387e221c37({
+    selectionManager: manager,
+    key,
+    ref,
+    isDisabled,
+    shouldSelectOnPressUp,
+    linkBehavior: "selection"
+  });
+  let tabId = $99b62ae3ff97ec45$export$567fc7097e064344(state, key, "tab");
+  let tabPanelId = $99b62ae3ff97ec45$export$567fc7097e064344(state, key, "tabpanel");
+  let { tabIndex } = itemProps;
+  let item = state.collection.getItem(key);
+  let domProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(item === null || item === void 0 ? void 0 : item.props, {
+    labelable: true
+  });
+  delete domProps.id;
+  let linkProps = $ea8dcbcb9ea1b556$export$7e924b3091a3bd18(item === null || item === void 0 ? void 0 : item.props);
+  return {
+    tabProps: $3ef42575df84b30b$export$9d1611c77c2fe928(domProps, linkProps, itemProps, {
+      id: tabId,
+      "aria-selected": isSelected,
+      "aria-disabled": isDisabled || void 0,
+      "aria-controls": isSelected ? tabPanelId : void 0,
+      tabIndex: isDisabled ? void 0 : tabIndex,
+      role: "tab"
+    }),
+    isSelected,
+    isDisabled,
+    isPressed
+  };
+}
+function $34bce698202e07cb$export$fae0121b5afe572d(props, state, ref) {
+  let tabIndex = $83013635b024ae3d$export$eac1895992b9f3d6(ref) ? void 0 : 0;
+  var _props_id;
+  const id = $99b62ae3ff97ec45$export$567fc7097e064344(state, (_props_id = props.id) !== null && _props_id !== void 0 ? _props_id : state === null || state === void 0 ? void 0 : state.selectedKey, "tabpanel");
+  const tabPanelProps = $313b98861ee5dd6c$export$d6875122194c7b44({
+    ...props,
+    id,
+    "aria-labelledby": $99b62ae3ff97ec45$export$567fc7097e064344(state, state === null || state === void 0 ? void 0 : state.selectedKey, "tab")
+  });
+  return {
+    tabPanelProps: $3ef42575df84b30b$export$9d1611c77c2fe928(tabPanelProps, {
+      tabIndex,
+      role: "tabpanel",
+      "aria-describedby": props["aria-describedby"],
+      "aria-details": props["aria-details"]
+    })
+  };
+}
+class $bfc6f2d60b8a4c40$export$15010ca3c1abe90b {
+  getKeyLeftOf(key) {
+    if (this.flipDirection)
+      return this.getNextKey(key);
+    return this.getPreviousKey(key);
+  }
+  getKeyRightOf(key) {
+    if (this.flipDirection)
+      return this.getPreviousKey(key);
+    return this.getNextKey(key);
+  }
+  getKeyAbove(key) {
+    return this.getPreviousKey(key);
+  }
+  getKeyBelow(key) {
+    return this.getNextKey(key);
+  }
+  isDisabled(key) {
+    var _this_collection_getItem_props, _this_collection_getItem;
+    return this.disabledKeys.has(key) || !!((_this_collection_getItem = this.collection.getItem(key)) === null || _this_collection_getItem === void 0 ? void 0 : (_this_collection_getItem_props = _this_collection_getItem.props) === null || _this_collection_getItem_props === void 0 ? void 0 : _this_collection_getItem_props.isDisabled);
+  }
+  getFirstKey() {
+    let key = this.collection.getFirstKey();
+    if (key != null && this.isDisabled(key))
+      key = this.getNextKey(key);
+    return key;
+  }
+  getLastKey() {
+    let key = this.collection.getLastKey();
+    if (key != null && this.isDisabled(key))
+      key = this.getPreviousKey(key);
+    return key;
+  }
+  getNextKey(key) {
+    do {
+      key = this.collection.getKeyAfter(key);
+      if (key == null)
+        key = this.collection.getFirstKey();
+    } while (this.isDisabled(key));
+    return key;
+  }
+  getPreviousKey(key) {
+    do {
+      key = this.collection.getKeyBefore(key);
+      if (key == null)
+        key = this.collection.getLastKey();
+    } while (this.isDisabled(key));
+    return key;
+  }
+  constructor(collection, direction, orientation, disabledKeys = /* @__PURE__ */ new Set()) {
+    this.collection = collection;
+    this.flipDirection = direction === "rtl" && orientation === "horizontal";
+    this.disabledKeys = disabledKeys;
+  }
+}
+function $58d314389b21fa3f$export$773e389e644c5874(props, state, ref) {
+  let { orientation = "horizontal", keyboardActivation = "automatic" } = props;
+  let { collection, selectionManager: manager, disabledKeys } = state;
+  let { direction } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7();
+  let delegate = useMemo(() => new $bfc6f2d60b8a4c40$export$15010ca3c1abe90b(collection, direction, orientation, disabledKeys), [
+    collection,
+    disabledKeys,
+    orientation,
+    direction
+  ]);
+  let { collectionProps } = $ae20dd8cbca75726$export$d6daf82dcd84e87c({
+    ref,
+    selectionManager: manager,
+    keyboardDelegate: delegate,
+    selectOnFocus: keyboardActivation === "automatic",
+    disallowEmptySelection: true,
+    scrollRef: ref,
+    linkBehavior: "selection"
+  });
+  let tabsId = $bdb11010cef70236$export$f680877a34711e37();
+  $99b62ae3ff97ec45$export$c5f62239608282b6.set(state, tabsId);
+  let tabListLabelProps = $313b98861ee5dd6c$export$d6875122194c7b44({
+    ...props,
+    id: tabsId
+  });
+  return {
+    tabListProps: {
+      ...$3ef42575df84b30b$export$9d1611c77c2fe928(collectionProps, tabListLabelProps),
+      role: "tablist",
+      "aria-orientation": orientation,
+      tabIndex: void 0
+    }
+  };
+}
+function $a0d645289fe9b86b$export$e7f05e985daf4b5f(props) {
+  var _props_defaultSelectedKey;
+  let [selectedKey, setSelectedKey] = $458b0a5536c1a7cf$export$40bfa8c7b0832715(props.selectedKey, (_props_defaultSelectedKey = props.defaultSelectedKey) !== null && _props_defaultSelectedKey !== void 0 ? _props_defaultSelectedKey : null, props.onSelectionChange);
+  let selectedKeys = useMemo(() => selectedKey != null ? [
+    selectedKey
+  ] : [], [
+    selectedKey
+  ]);
+  let { collection, disabledKeys, selectionManager } = $e72dd72e1c76a225$export$2f645645f7bca764({
+    ...props,
+    selectionMode: "single",
+    disallowEmptySelection: true,
+    allowDuplicateSelectionEvents: true,
+    selectedKeys,
+    onSelectionChange: (keys) => {
+      var _keys_values_next_value;
+      let key = (_keys_values_next_value = keys.values().next().value) !== null && _keys_values_next_value !== void 0 ? _keys_values_next_value : null;
+      if (key === selectedKey && props.onSelectionChange)
+        props.onSelectionChange(key);
+      setSelectedKey(key);
+    }
+  });
+  let selectedItem = selectedKey != null ? collection.getItem(selectedKey) : null;
+  return {
+    collection,
+    disabledKeys,
+    selectionManager,
+    selectedKey,
+    setSelectedKey,
+    selectedItem
+  };
+}
+function $76f919a04c5a7d14$export$4ba071daf4e486(props) {
+  var _props_defaultSelectedKey;
+  let state = $a0d645289fe9b86b$export$e7f05e985daf4b5f({
+    ...props,
+    suppressTextValueWarning: true,
+    defaultSelectedKey: (_props_defaultSelectedKey = props.defaultSelectedKey) !== null && _props_defaultSelectedKey !== void 0 ? _props_defaultSelectedKey : $76f919a04c5a7d14$var$findDefaultSelectedKey(props.collection, props.disabledKeys ? new Set(props.disabledKeys) : /* @__PURE__ */ new Set())
+  });
+  let { selectionManager, collection, selectedKey: currentSelectedKey } = state;
+  let lastSelectedKey = useRef(currentSelectedKey);
+  useEffect(() => {
+    let selectedKey = currentSelectedKey;
+    if (selectionManager.isEmpty || !collection.getItem(selectedKey)) {
+      selectedKey = $76f919a04c5a7d14$var$findDefaultSelectedKey(collection, state.disabledKeys);
+      if (selectedKey != null)
+        selectionManager.setSelectedKeys([
+          selectedKey
+        ]);
+    }
+    if (selectedKey != null && selectionManager.focusedKey == null || !selectionManager.isFocused && selectedKey !== lastSelectedKey.current)
+      selectionManager.setFocusedKey(selectedKey);
+    lastSelectedKey.current = selectedKey;
+  });
+  return {
+    ...state,
+    isDisabled: props.isDisabled || false
+  };
+}
+function $76f919a04c5a7d14$var$findDefaultSelectedKey(collection, disabledKeys) {
+  let selectedKey = null;
+  if (collection) {
+    selectedKey = collection.getFirstKey();
+    while (disabledKeys.has(selectedKey) && selectedKey !== collection.getLastKey())
+      selectedKey = collection.getKeyAfter(selectedKey);
+    if (disabledKeys.has(selectedKey) && selectedKey === collection.getLastKey())
+      selectedKey = collection.getFirstKey();
+  }
+  return selectedKey;
+}
+const $5e8ad37a45e1c704$export$cfa7aa87c26e7d1f = /* @__PURE__ */ createContext(null);
+const $5e8ad37a45e1c704$export$364712098d2aa57c = /* @__PURE__ */ createContext(null);
+function $5e8ad37a45e1c704$var$Tabs(props, ref) {
+  [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $5e8ad37a45e1c704$export$cfa7aa87c26e7d1f);
+  let { collection, document } = $7135fc7d473fd974$export$7cd71aa5ddd6dc4e();
+  let { children, orientation = "horizontal" } = props;
+  children = useMemo(() => typeof children === "function" ? children({
+    orientation,
+    defaultChildren: null
+  }) : children, [
+    children,
+    orientation
+  ]);
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement($64fa3d84918910a7$export$8dc98ba7eadeaa56, null, /* @__PURE__ */ React__default.createElement($7135fc7d473fd974$export$8c25dea96356a8b6.Provider, {
+    value: document
+  }, children)), /* @__PURE__ */ React__default.createElement($5e8ad37a45e1c704$var$TabsInner, {
+    props,
+    collection,
+    tabsRef: ref
+  }));
+}
+function $5e8ad37a45e1c704$var$TabsInner({ props, tabsRef: ref, collection }) {
+  let { orientation = "horizontal" } = props;
+  let state = $76f919a04c5a7d14$export$4ba071daf4e486({
+    ...props,
+    collection,
+    children: void 0
+  });
+  let { focusProps, isFocused, isFocusVisible } = $f7dceffc5ad7768b$export$4e328f61c538687f({
+    within: true
+  });
+  let values = useMemo(() => ({
+    orientation,
+    isFocusWithin: isFocused,
+    isFocusVisible
+  }), [
+    orientation,
+    isFocused,
+    isFocusVisible
+  ]);
+  let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
+    ...props,
+    defaultClassName: "react-aria-Tabs",
+    values
+  });
+  return /* @__PURE__ */ React__default.createElement("div", {
+    ...$65484d02dcb7eb3e$export$457c3d6518dd4c6f(props),
+    ...focusProps,
+    ...renderProps,
+    ref,
+    slot: props.slot || void 0,
+    "data-focused": isFocused || void 0,
+    "data-orientation": orientation,
+    "data-focus-visible": isFocusVisible || void 0,
+    "data-disabled": state.isDisabled || void 0
+  }, /* @__PURE__ */ React__default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
+    values: [
+      [
+        $5e8ad37a45e1c704$export$cfa7aa87c26e7d1f,
+        props
+      ],
+      [
+        $5e8ad37a45e1c704$export$364712098d2aa57c,
+        state
+      ]
+    ]
+  }, renderProps.children));
+}
+const $5e8ad37a45e1c704$export$b2539bed5023c21c = /* @__PURE__ */ forwardRef($5e8ad37a45e1c704$var$Tabs);
+function $5e8ad37a45e1c704$var$TabList(props, ref) {
+  let document = useContext($7135fc7d473fd974$export$8c25dea96356a8b6);
+  return document ? /* @__PURE__ */ React__default.createElement($7135fc7d473fd974$export$813b5978dd974d8, props) : /* @__PURE__ */ React__default.createElement($5e8ad37a45e1c704$var$TabListInner, {
+    props,
+    forwardedRef: ref
+  });
+}
+function $5e8ad37a45e1c704$var$TabListInner({ props, forwardedRef: ref }) {
+  let state = useContext($5e8ad37a45e1c704$export$364712098d2aa57c);
+  let { orientation = "horizontal", keyboardActivation = "automatic" } = $64fa3d84918910a7$export$fabf2dc03a41866e($5e8ad37a45e1c704$export$cfa7aa87c26e7d1f);
+  let objectRef = $df56164dff5785e2$export$4338b53315abf666(ref);
+  let { tabListProps } = $58d314389b21fa3f$export$773e389e644c5874({
+    ...props,
+    orientation,
+    keyboardActivation
+  }, state, objectRef);
+  let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
+    ...props,
+    children: null,
+    defaultClassName: "react-aria-TabList",
+    values: {
+      orientation,
+      state
+    }
+  });
+  let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props);
+  delete DOMProps.id;
+  return /* @__PURE__ */ React__default.createElement("div", {
+    ...DOMProps,
+    ...tabListProps,
+    ref: objectRef,
+    ...renderProps,
+    "data-orientation": orientation || void 0
+  }, [
+    ...state.collection
+  ].map((item) => /* @__PURE__ */ React__default.createElement($5e8ad37a45e1c704$var$TabInner, {
+    key: item.key,
+    item,
+    state
+  })));
+}
+const $5e8ad37a45e1c704$export$e51a686c67fdaa2d = /* @__PURE__ */ forwardRef($5e8ad37a45e1c704$var$TabList);
+function $5e8ad37a45e1c704$var$Tab(props, ref) {
+  return $7135fc7d473fd974$export$e7c29ae2353b16ea("item", props, ref, props.children);
+}
+const $5e8ad37a45e1c704$export$3e41faf802a29e71 = /* @__PURE__ */ forwardRef($5e8ad37a45e1c704$var$Tab);
+function $5e8ad37a45e1c704$var$TabInner({ item, state }) {
+  let ref = $df56164dff5785e2$export$4338b53315abf666(item.props.ref);
+  let { tabProps, isSelected, isDisabled, isPressed } = $0175d55c2a017ebc$export$fdf4756d5b8ef90a({
+    key: item.key,
+    ...item.props
+  }, state, ref);
+  let { focusProps, isFocused, isFocusVisible } = $f7dceffc5ad7768b$export$4e328f61c538687f();
+  let { hoverProps, isHovered } = $6179b936705e76d3$export$ae780daf29e6d456({
+    isDisabled
+  });
+  let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
+    ...item.props,
+    children: item.rendered,
+    defaultClassName: "react-aria-Tab",
+    values: {
+      isSelected,
+      isDisabled,
+      isFocused,
+      isFocusVisible,
+      isPressed,
+      isHovered,
+      state
+    }
+  });
+  let ElementType = item.props.href ? "a" : "div";
+  return /* @__PURE__ */ React__default.createElement(ElementType, {
+    ...$3ef42575df84b30b$export$9d1611c77c2fe928(tabProps, focusProps, hoverProps, renderProps),
+    ref,
+    "data-selected": isSelected || void 0,
+    "data-disabled": isDisabled || void 0,
+    "data-focused": isFocused || void 0,
+    "data-focus-visible": isFocusVisible || void 0,
+    "data-pressed": isPressed || void 0,
+    "data-hovered": isHovered || void 0
+  });
+}
+function $5e8ad37a45e1c704$var$TabPanel(props, forwardedRef) {
+  const state = useContext($5e8ad37a45e1c704$export$364712098d2aa57c);
+  let ref = $df56164dff5785e2$export$4338b53315abf666(forwardedRef);
+  let { tabPanelProps } = $34bce698202e07cb$export$fae0121b5afe572d(props, state, ref);
+  let { focusProps, isFocused, isFocusVisible } = $f7dceffc5ad7768b$export$4e328f61c538687f();
+  let isSelected = state.selectedKey === props.id;
+  let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
+    ...props,
+    defaultClassName: "react-aria-TabPanel",
+    values: {
+      isFocused,
+      isFocusVisible,
+      isInert: !isSelected,
+      state
+    }
+  });
+  if (!isSelected && !props.shouldForceMount)
+    return null;
+  let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props);
+  delete DOMProps.id;
+  let domProps = isSelected ? $3ef42575df84b30b$export$9d1611c77c2fe928(DOMProps, tabPanelProps, focusProps, renderProps) : renderProps;
+  return /* @__PURE__ */ React__default.createElement("div", {
+    ...domProps,
+    ref,
+    "data-focused": isFocused || void 0,
+    "data-focus-visible": isFocusVisible || void 0,
+    // @ts-ignore
+    inert: !isSelected ? "true" : void 0,
+    "data-inert": !isSelected ? "true" : void 0
+  });
+}
+const $5e8ad37a45e1c704$export$3d96ec278d3efce4 = /* @__PURE__ */ $64fa3d84918910a7$export$86427a43e3e48ebb($5e8ad37a45e1c704$var$TabPanel);
+/**
+ * Main tab container.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {boolean} [props.vertical=false] - Whether the tabs are vertical.
+ * @param {string} [props.className] - Classes to pass to the tabs container.
+ *
+ * @returns {JSX.Element} The Tabs component.
+ *
+ * @example
+ * <Tabs>
+ * 	<TabList>
+ * 		<Tab>Tab 1</Tab>
+ * 		<Tab>Tab 2</Tab>
+ * 	</TabList>
+ * 	<TabPanel>Content 1</TabPanel>
+ * 	<TabPanel>Content 2</TabPanel>
+ * </Tabs>
+ *
+ * @preserve
+ */
+const Tabs = (props) => {
+  const { children, vertical, className, ...rest } = props;
+  const baseId = useId();
+  let tabPanelCounter = 1;
+  let tabCounter = 1;
+  const preparedChildren = Array.isArray(children) ? children : [children];
+  const childrenWithIds = preparedChildren.reduce((acc, child, index) => {
+    var _a, _b, _c;
+    if (child.type.displayName === "TabList") {
+      const childItems = Array.isArray((_a = child == null ? void 0 : child.props) == null ? void 0 : _a.children) ? (_b = child == null ? void 0 : child.props) == null ? void 0 : _b.children : [(_c = child == null ? void 0 : child.props) == null ? void 0 : _c.children].filter(Boolean);
+      tabCounter = ((childItems == null ? void 0 : childItems.length) ?? 0) + 1;
+      if (childItems.length < 1) {
+        return acc;
+      }
+      return [
+        ...acc,
+        cloneElement(
+          child,
+          {
+            key: index
+          },
+          childItems == null ? void 0 : childItems.map(
+            (innerChild, i) => cloneElement(innerChild, {
+              id: `tab-${baseId}-${i + 1}`,
+              key: i,
+              isParentVertical: vertical
+            })
+          )
+        )
+      ];
+    }
+    if (child.type.displayName === "TabPanel") {
+      return [
+        ...acc,
+        cloneElement(child, {
+          id: `tab-${baseId}-${tabPanelCounter++}`,
+          key: index,
+          className: classnames(child.props.className, vertical && "es-uic-border-l es-uic-border-l-300 es-uic-pl-3")
+        })
+      ];
+    }
+    return acc;
+  }, []);
+  if (tabCounter !== tabPanelCounter) {
+    return /* @__PURE__ */ jsx(
+      Notice,
+      {
+        type: "error",
+        label: __(
+          "Component is not configured correctly. Skipping render to prevent errors.",
+          "eightshift-ui-components"
+        ),
+        subtitle: sprintf(
+          __(
+            "Number of <Tab>s (%s) and <TabPanel>s (%s) should be the same. <Tab>s should be within a <TabList>.",
+            "eightshift-ui-components"
+          ),
+          tabCounter - 1,
+          tabPanelCounter - 1
+        ),
+        alignIconToTitle: true
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    $5e8ad37a45e1c704$export$b2539bed5023c21c,
+    {
+      ...rest,
+      orientation: vertical ? "vertical" : "horizontal",
+      className: classnames(
+        vertical ? "es-uic-grid es-uic-size-full es-uic-min-h-40 es-uic-grid-cols-[minmax(0,_15rem),_2fr] es-uic-gap-4" : "es-uic-flex-col",
+        className
+      ),
+      children: childrenWithIds
+    }
+  );
+};
+Tabs.displayName = "Tabs";
+/**
+ * Container for tabs within the Tabs component.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {string} [props.className] - Classes to pass to the tab list.
+ *
+ * @returns {JSX.Element} The TabList component.
+ *
+ * @see {@link Tabs} for usage example.
+ *
+ * @preserve
+ */
+const TabList = (props) => {
+  const { children, "aria-label": ariaLabel, className, ...other } = props;
+  return /* @__PURE__ */ jsx(
+    $5e8ad37a45e1c704$export$e51a686c67fdaa2d,
+    {
+      "aria-label": ariaLabel ?? __("tabs", "eightshift-ui-components"),
+      className: ({ orientation }) => classnames(
+        "es-uic-flex es-uic-gap-1",
+        orientation === "vertical" && "es-uic-h-full es-uic-flex-col es-uic-pr-1.5",
+        orientation === "horizontal" && "es-uic-w-full es-uic-items-end es-uic-border-b es-uic-border-b-gray-300",
+        className
+      ),
+      ...other,
+      children
+    }
+  );
+};
+TabList.displayName = "TabList";
+/**
+ * A tab within the TabList component, in the Tabs component.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {boolean} [props.disabled] - Whether the tab is disabled.
+ * @param {string} [props.className] - Classes to pass to the tab.
+ *
+ * @returns {JSX.Element} The Tab component.
+ *
+ * @see {@link Tabs} for usage example.
+ *
+ * @preserve
+ */
+const Tab = (props) => {
+  const { children, disabled, isParentVertical, className, ...other } = props;
+  return /* @__PURE__ */ jsx(
+    $5e8ad37a45e1c704$export$3e41faf802a29e71,
+    {
+      ...other,
+      isDisabled: disabled,
+      className: ({ isSelected, isDisabled }) => {
+        return classnames(
+          "es-uic-relative es-uic-flex es-uic-select-none es-uic-items-center es-uic-rounded es-uic-p-1.5 es-uic-text-sm es-uic-transition",
+          "focus:es-uic-outline-none focus-visible:es-uic-outline-none focus-visible:es-uic-ring focus-visible:es-uic-ring-teal-500 focus-visible:es-uic-ring-opacity-50",
+          'after:es-uic-absolute after:es-uic-rounded-full after:es-uic-bg-teal-600 after:es-uic-shadow-sm after:es-uic-shadow-teal-500/25 after:es-uic-transition after:es-uic-duration-300 after:es-uic-content-[""]',
+          !isParentVertical && "after:es-uic-inset-x-0 after:-es-uic-bottom-px after:es-uic-h-0.5",
+          isSelected && "es-uic-border-b-teal-600 es-uic-text-teal-900 after:es-uic-opacity-100",
+          isSelected && isParentVertical && "after:es-uic-scale-y-100",
+          isSelected && !isParentVertical && "after:es-uic-scale-x-100",
+          !isSelected && !isDisabled && "es-uic-text-gray-800 after:es-uic-opacity-0 hover:es-uic-bg-gray-100",
+          !isSelected && !isDisabled && isParentVertical && "after:es-uic-scale-y-75",
+          !isSelected && !isDisabled && !isParentVertical && "after:es-uic-scale-x-75",
+          isDisabled && "es-uic-text-gray-300 after:es-uic-hidden",
+          isParentVertical && "es-uic-pl-3 after:es-uic-inset-y-0 after:es-uic-left-px after:es-uic-right-auto after:es-uic-my-auto after:es-uic-h-7 after:es-uic-w-[0.1875rem]",
+          className
+        );
+      },
+      children
+    }
+  );
+};
+Tab.displayName = "Tab";
+/**
+ * Container for tab content within the Tabs component.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {string} [props.className] - Classes to pass to the tab content container.
+ *
+ * @returns {JSX.Element} The TabPanel component.
+ *
+ * @see {@link Tabs} for usage example.
+ *
+ * @preserve
+ */
+const TabPanel = (props) => {
+  const { children, className, ...other } = props;
+  return /* @__PURE__ */ jsx(
+    $5e8ad37a45e1c704$export$3d96ec278d3efce4,
+    {
+      ...other,
+      className: classnames(
+        "es-uic-mt-1.5 es-uic-space-y-2.5 es-uic-text-sm focus:es-uic-outline-none",
+        className
+      ),
+      children
+    }
+  );
+};
+TabPanel.displayName = "TabPanel";
+export {
+  Tab,
+  TabList,
+  TabPanel,
+  Tabs
+};