@artsy/palette 45.13.0 → 45.14.0-canary.1497.33065.0

package/dist/cjs/elements/Tabs/Tabs.js

@@ -0,0 +1,145 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTabs = exports.Tabs = exports.Tab = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _themeGet = require("@styled-system/theme-get");
+var _flattenChildren = require("../../helpers/flattenChildren");
+var _useUpdateEffect = require("../../utils/useUpdateEffect");
+var _BaseTabs = require("../BaseTabs");
+var _Clickable = require("../Clickable");
+var _usePrevious = require("../../utils/usePrevious");
+var _excluded = ["children", "initialTabIndex", "mb", "onChange"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+/** Tabs functionality */
+var useTabs = exports.useTabs = function useTabs(_ref) {
+  var children = _ref.children,
+    _ref$initialTabIndex = _ref.initialTabIndex,
+    initialTabIndex = _ref$initialTabIndex === void 0 ? 0 : _ref$initialTabIndex,
+    onChange = _ref.onChange;
+  var tabs = (0, _react.useMemo)(function () {
+    return (0, _flattenChildren.flattenChildren)(children).map(function (child) {
+      return {
+        child: child,
+        ref: /*#__PURE__*/(0, _react.createRef)()
+      };
+    });
+  }, [children]);
+  var previousInitialTabIndex = (0, _usePrevious.usePrevious)(initialTabIndex);
+  var _useState = (0, _react.useState)(initialTabIndex),
+    _useState2 = _slicedToArray(_useState, 2),
+    activeTabIndex = _useState2[0],
+    setActiveTabIndex = _useState2[1];
+
+  // If the `initialTabIndex` changes; update the active one
+  (0, _useUpdateEffect.useUpdateEffect)(function () {
+    // Only update if the `initialTabIndex` has changed externally
+    if (initialTabIndex === previousInitialTabIndex) return;
+    setActiveTabIndex(initialTabIndex);
+  }, [initialTabIndex, tabs]);
+
+  // Compute a safe index for rendering (clamped to valid range)
+  // Ensures we never access an out-of-bounds index during removal
+  var safeActiveTabIndex = tabs.length === 0 ? 0 : Math.min(activeTabIndex, tabs.length - 1);
+
+  // Ref of the tabs viewport
+  var ref = (0, _react.useRef)(null);
+
+  // Scroll to active tab when `activeTabIndex` changes
+  (0, _react.useEffect)(function () {
+    var _ref$current$scrollTo, _ref$current;
+    if (!ref.current) return;
+    if (tabs.length === 0 || safeActiveTabIndex >= tabs.length) return;
+    var tab = tabs[safeActiveTabIndex].ref.current;
+    if (!tab) return;
+    var position = tab.offsetLeft;
+    (_ref$current$scrollTo = (_ref$current = ref.current).scrollTo) === null || _ref$current$scrollTo === void 0 ? void 0 : _ref$current$scrollTo.call(_ref$current, {
+      left: position,
+      behavior: "smooth"
+    });
+  }, [safeActiveTabIndex, tabs.length]);
+  var handleClick = (0, _react.useCallback)(function (index) {
+    return function () {
+      var _tabs$index$child$pro;
+      if (index === activeTabIndex) return;
+      setActiveTabIndex(index);
+      if (!onChange) return;
+      onChange({
+        tabIndex: index,
+        name: tabs[index].child.props.name,
+        data: (_tabs$index$child$pro = tabs[index].child.props.data) !== null && _tabs$index$child$pro !== void 0 ? _tabs$index$child$pro : {}
+      });
+    };
+  }, [activeTabIndex, onChange, tabs]);
+  return {
+    activeTabIndex: safeActiveTabIndex,
+    handleClick: handleClick,
+    ref: ref,
+    tabs: tabs
+  };
+};
+var Container = (0, _styledComponents.default)(_Clickable.Clickable).withConfig({
+  displayName: "Tabs__Container",
+  componentId: "sc-1kalvjm-0"
+})(["&:focus-visible{outline:none;z-index:2;box-shadow:inset 0 0 0 1px ", ";}"], (0, _themeGet.themeGet)("colors.blue100"));
+
+/** A tab bar navigation component */
+var Tabs = exports.Tabs = function Tabs(_ref2) {
+  var _tabs$activeTabIndex;
+  var children = _ref2.children,
+    _ref2$initialTabIndex = _ref2.initialTabIndex,
+    initialTabIndex = _ref2$initialTabIndex === void 0 ? 0 : _ref2$initialTabIndex,
+    _ref2$mb = _ref2.mb,
+    mb = _ref2$mb === void 0 ? 2 : _ref2$mb,
+    onChange = _ref2.onChange,
+    rest = _objectWithoutProperties(_ref2, _excluded);
+  var _useTabs = useTabs({
+      children: children,
+      initialTabIndex: initialTabIndex,
+      onChange: onChange
+    }),
+    tabs = _useTabs.tabs,
+    activeTabIndex = _useTabs.activeTabIndex,
+    handleClick = _useTabs.handleClick,
+    ref = _useTabs.ref;
+  if (tabs.length === 0) return null;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_BaseTabs.BaseTabs, _extends({
+    ref: ref,
+    mb: mb
+  }, rest), tabs.map(function (tab, i) {
+    return /*#__PURE__*/_react.default.createElement(Container, {
+      key: i,
+      ref: tab.ref,
+      "aria-selected": i === activeTabIndex,
+      onClick: handleClick(i),
+      flex: 1
+    }, /*#__PURE__*/_react.default.createElement(_BaseTabs.BaseTab, {
+      active: i === activeTabIndex,
+      variant: "sm"
+    }, /*#__PURE__*/_react.default.createElement("span", null, tab.child.props.name)));
+  })), (_tabs$activeTabIndex = tabs[activeTabIndex]) === null || _tabs$activeTabIndex === void 0 ? void 0 : _tabs$activeTabIndex.child);
+};
+/**
+ * An individual tab.
+ * Does nothing on its own; props are dealt with inside of Tabs.
+ */
+var Tab = exports.Tab = function Tab(_ref3) {
+  var children = _ref3.children;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
+};
+//# sourceMappingURL=Tabs.js.map

package/dist/cjs/elements/Tabs/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_themeGet","_flattenChildren","_useUpdateEffect","_BaseTabs","_Clickable","_usePrevious","_excluded","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","_slicedToArray","arr","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","isArray","useTabs","exports","_ref","children","_ref$initialTabIndex","initialTabIndex","onChange","tabs","useMemo","flattenChildren","map","child","ref","createRef","previousInitialTabIndex","usePrevious","_useState","useState","_useState2","activeTabIndex","setActiveTabIndex","useUpdateEffect","safeActiveTabIndex","Math","min","useRef","useEffect","_ref$current$scrollTo","_ref$current","current","tab","position","offsetLeft","scrollTo","left","behavior","handleClick","useCallback","index","_tabs$index$child$pro","tabIndex","props","data","Container","styled","Clickable","withConfig","displayName","componentId","themeGet","Tabs","_ref2","_tabs$activeTabIndex","_ref2$initialTabIndex","_ref2$mb","mb","rest","_useTabs","createElement","Fragment","BaseTabs","onClick","flex","BaseTab","active","variant","Tab","_ref3"],"sources":["../../../../src/elements/Tabs/Tabs.tsx"],"sourcesContent":["import React, {\n  createRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\"\nimport styled from \"styled-components\"\nimport { themeGet } from \"@styled-system/theme-get\"\nimport { flattenChildren } from \"../../helpers/flattenChildren\"\nimport { useUpdateEffect } from \"../../utils/useUpdateEffect\"\nimport { BaseTabs, BaseTabsProps } from \"../BaseTabs\"\nimport { BaseTab } from \"../BaseTabs\"\nimport { Clickable } from \"../Clickable\"\nimport { usePrevious } from \"../../utils/usePrevious\"\n\nexport interface TabLike extends JSX.Element {\n  props: TabProps\n}\n\nexport interface TabInfo extends TabProps {\n  /** Index of the newly selected Tab */\n  tabIndex: number\n  /**\n   * Arbitrary data that can be associated with a Tab.\n   * Will be passed to the parent <Tabs>'s onChange handler.\n   */\n  data: any\n}\n\nexport interface TabsProps extends BaseTabsProps {\n  /** Index of the Tab that should be pre-selected */\n  initialTabIndex?: number\n  /** @deprecated */\n  autoScroll?: boolean\n  /** Function that will be called when a new Tab is selected */\n  onChange?: (tabInfo?: TabInfo) => void\n}\n\n/** Tabs functionality */\nexport const useTabs = ({\n  children,\n  initialTabIndex = 0,\n  onChange,\n}: TabsProps) => {\n  const tabs = useMemo(\n    () =>\n      flattenChildren<TabLike>(children).map((child) => ({\n        child,\n        ref: createRef<HTMLButtonElement | null>(),\n      })),\n    [children]\n  )\n\n  const previousInitialTabIndex = usePrevious(initialTabIndex)\n  const [activeTabIndex, setActiveTabIndex] = useState<number>(initialTabIndex)\n\n  // If the `initialTabIndex` changes; update the active one\n  useUpdateEffect(() => {\n    // Only update if the `initialTabIndex` has changed externally\n    if (initialTabIndex === previousInitialTabIndex) return\n    setActiveTabIndex(initialTabIndex)\n  }, [initialTabIndex, tabs])\n\n  // Compute a safe index for rendering (clamped to valid range)\n  // Ensures we never access an out-of-bounds index during removal\n  const safeActiveTabIndex =\n    tabs.length === 0 ? 0 : Math.min(activeTabIndex, tabs.length - 1)\n\n  // Ref of the tabs viewport\n  const ref = useRef<HTMLDivElement | null>(null)\n\n  // Scroll to active tab when `activeTabIndex` changes\n  useEffect(() => {\n    if (!ref.current) return\n    if (tabs.length === 0 || safeActiveTabIndex >= tabs.length) return\n    const tab = tabs[safeActiveTabIndex].ref.current\n    if (!tab) return\n    const position = tab.offsetLeft\n    ref.current.scrollTo?.({ left: position, behavior: \"smooth\" })\n  }, [safeActiveTabIndex, tabs.length])\n\n  const handleClick = useCallback(\n    (index: number) => {\n      return () => {\n        if (index === activeTabIndex) return\n\n        setActiveTabIndex(index)\n\n        if (!onChange) return\n\n        onChange({\n          tabIndex: index,\n          name: tabs[index].child.props.name,\n          data: tabs[index].child.props.data ?? {},\n        })\n      }\n    },\n    [activeTabIndex, onChange, tabs]\n  )\n\n  return {\n    activeTabIndex: safeActiveTabIndex,\n    handleClick,\n    ref,\n    tabs,\n  }\n}\n\nconst Container = styled(Clickable)`\n  &:focus-visible {\n    outline: none;\n    z-index: 2;\n    box-shadow: inset 0 0 0 1px ${themeGet(\"colors.blue100\")};\n  }\n`\n\n/** A tab bar navigation component */\nexport const Tabs: React.FC<React.PropsWithChildren<TabsProps>> = ({\n  children,\n  initialTabIndex = 0,\n  mb = 2,\n  onChange,\n  ...rest\n}) => {\n  const { tabs, activeTabIndex, handleClick, ref } = useTabs({\n    children,\n    initialTabIndex,\n    onChange,\n  })\n\n  if (tabs.length === 0) return null\n\n  return (\n    <>\n      <BaseTabs ref={ref} mb={mb} {...rest}>\n        {tabs.map((tab, i) => {\n          return (\n            <Container\n              key={i}\n              ref={tab.ref as any}\n              aria-selected={i === activeTabIndex}\n              onClick={handleClick(i)}\n              flex={1}\n            >\n              <BaseTab active={i === activeTabIndex} variant=\"sm\">\n                <span>{tab.child.props.name}</span>\n              </BaseTab>\n            </Container>\n          )\n        })}\n      </BaseTabs>\n\n      {tabs[activeTabIndex]?.child}\n    </>\n  )\n}\n\nexport interface TabProps {\n  /** Display name of the Tab */\n  name: string | JSX.Element\n  /**\n   * Arbitrary data that can be associated with a Tab.\n   * Will be passed to the parent <Tabs>'s onChange handler.\n   */\n  data?: any\n}\n\n/**\n * An individual tab.\n * Does nothing on its own; props are dealt with inside of Tabs.\n */\nexport const Tab: React.FC<React.PropsWithChildren<TabProps>> = ({\n  children,\n}) => <>{children}</>\n"],"mappings":"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"}

package/dist/cjs/elements/Tabs/Tabs.story.d.ts

@@ -0,0 +1,64 @@
+import React from "react";
+declare const _default: {
+    title: string;
+    component: React.FC<React.PropsWithChildren<import("./Tabs").TabsProps>>;
+    tags: string[];
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+            controls: {
+                exclude: string[];
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: {
+    args: {
+        onChange: import("@vitest/spy").Mock<(...args: any[]) => any>;
+        children: React.JSX.Element[];
+    };
+};
+export declare const WithData: {
+    render: () => React.JSX.Element;
+};
+export declare const Counts: {
+    render: () => React.JSX.Element;
+};
+export declare const ConditionalTabs: {
+    render: () => React.JSX.Element;
+};
+export declare const AutoScrolling: {
+    render: () => React.JSX.Element;
+    parameters: {
+        chromatic: {
+            disable: boolean;
+        };
+    };
+};
+export declare const InitialAutoScroll: {
+    render: () => React.JSX.Element;
+    parameters: {
+        chromatic: {
+            disable: boolean;
+        };
+    };
+};
+export declare const Cached: {
+    render: () => React.JSX.Element;
+};
+export declare const WithInputs: {
+    render: () => React.JSX.Element;
+};
+export declare const DynamicTabs: {
+    render: () => React.JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};

package/dist/cjs/elements/Tabs/Tabs.story.js

@@ -0,0 +1,380 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithInputs = exports.WithData = exports.InitialAutoScroll = exports.DynamicTabs = exports.Default = exports.Counts = exports.ConditionalTabs = exports.Cached = exports.AutoScrolling = void 0;
+var _test = require("@storybook/test");
+var _react = _interopRequireWildcard(require("react"));
+var _Sup = require("../Sup");
+var _ = require("./");
+var _Box = require("../Box");
+var _useCursor2 = require("use-cursor");
+var _Button = require("../Button");
+var _Input = require("../Input");
+var _storybookBlocklist = require("../../utils/storybookBlocklist");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var _default = exports.default = {
+  title: "Components/Tabs",
+  component: _.Tabs,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "Tabs component provides a tabbed interface for organizing content into separate panels. Supports keyboard navigation, custom initial tab selection, and flexible layout options."
+      },
+      controls: {
+        exclude: _storybookBlocklist.STORYBOOK_PROPS_BLOCKLIST
+      }
+    }
+  }
+};
+var Default = exports.Default = {
+  args: {
+    onChange: (0, _test.fn)(),
+    children: [/*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Overview",
+      key: "overview"
+    }, "Overview panel"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Works for sale",
+      key: "works"
+    }, "Works for sale panel"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "CV",
+      key: "cv"
+    }, "CV panel"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Auction results",
+      key: "auctions"
+    }, "Auction results panel")]
+  }
+};
+var WithData = exports.WithData = {
+  render: function render() {
+    var _useState = (0, _react.useState)({
+        name: "Pending"
+      }),
+      _useState2 = _slicedToArray(_useState, 2),
+      data = _useState2[0],
+      setData = _useState2[1];
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.Tabs, {
+      onChange: function onChange(tabInfo) {
+        if (!tabInfo) return;
+        setData(tabInfo.data);
+      }
+    }, /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Overview",
+      data: {
+        name: "Overview"
+      }
+    }, "Overview panel"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Works for sale",
+      data: {
+        name: "Works for sale"
+      }
+    }, "Works for sale panel"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "CV",
+      data: {
+        name: "CV"
+      }
+    }, "CV panel"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Auction results",
+      data: {
+        name: "Auction results"
+      }
+    }, "Auction results panel"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "No data"
+    }, "No data panel")), /*#__PURE__*/_react.default.createElement("pre", null, JSON.stringify(data, null, 2)));
+  }
+};
+var Counts = exports.Counts = {
+  render: function render() {
+    return /*#__PURE__*/_react.default.createElement(_.Tabs, {
+      onChange: (0, _test.fn)()
+    }, /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Overview ", /*#__PURE__*/_react.default.createElement(_Sup.Sup, null, "123"))
+    }), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Works for sale ", /*#__PURE__*/_react.default.createElement(_Sup.Sup, null, "123"))
+    }), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "CV"
+    }), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Auction results ", /*#__PURE__*/_react.default.createElement(_Sup.Sup, null, "123"))
+    }));
+  }
+};
+var ConditionalTabs = exports.ConditionalTabs = {
+  render: function render() {
+    return /*#__PURE__*/_react.default.createElement(_.Tabs, {
+      onChange: (0, _test.fn)()
+    }, /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "First"
+    }, "First"), false && /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Second"
+    }, "Second"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Third"
+    }, "Third"));
+  }
+};
+var AutoScrolling = exports.AutoScrolling = {
+  render: function render() {
+    var _useCursor = (0, _useCursor2.useCursor)({
+        max: 15
+      }),
+      initialTabIndex = _useCursor.index,
+      handleNext = _useCursor.handleNext;
+    (0, _react.useEffect)(function () {
+      var interval = setInterval(handleNext, 500);
+      return function () {
+        return clearInterval(interval);
+      };
+    }, [handleNext]);
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.Tabs, {
+      initialTabIndex: initialTabIndex,
+      onChange: (0, _test.fn)()
+    }, /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "First"
+    }, "First"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Second"
+    }, "Second"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Third"
+    }, "Third"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Fourth"
+    }, "Fourth"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Fifth"
+    }, "Fifth"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Sixth"
+    }, "Sixth"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Seventh"
+    }, "Seventh"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Eighth"
+    }, "Eighth"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Nineth"
+    }, "Nineth"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Tenth"
+    }, "Tenth"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Eleventh"
+    }, "Eleventh"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Twelveth"
+    }, "Twelveth"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Thirteenth"
+    }, "Thirteenth"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Fourteenth"
+    }, "Fourteenth"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Fifteenth"
+    }, "Fifteenth")), /*#__PURE__*/_react.default.createElement("pre", null, JSON.stringify({
+      initialTabIndex: initialTabIndex
+    })));
+  },
+  parameters: {
+    chromatic: {
+      disable: true
+    }
+  }
+};
+var InitialAutoScroll = exports.InitialAutoScroll = {
+  render: function render() {
+    var _useState3 = (0, _react.useState)(1),
+      _useState4 = _slicedToArray(_useState3, 2),
+      key = _useState4[0],
+      setKey = _useState4[1];
+    (0, _react.useEffect)(function () {
+      var interval = setInterval(function () {
+        setKey(function (key) {
+          return key + 1;
+        });
+      }, 500);
+      return function () {
+        return clearInterval(interval);
+      };
+    }, []);
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      bg: "mono10",
+      height: 1000,
+      p: 2
+    }, "The vertical scroll of this page should be at the top.", /*#__PURE__*/_react.default.createElement("br", null), "Scroll down to see the tabs.", /*#__PURE__*/_react.default.createElement("br", null), "Render: #", key), /*#__PURE__*/_react.default.createElement(_.Tabs, {
+      onChange: (0, _test.fn)(),
+      initialTabIndex: 14
+    }, /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "First"
+    }, "First"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Second"
+    }, "Second"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Third"
+    }, "Third"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Fourth"
+    }, "Fourth"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Fifth"
+    }, "Fifth"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Sixth"
+    }, "Sixth"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Seventh"
+    }, "Seventh"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Eighth"
+    }, "Eighth"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Nineth"
+    }, "Nineth"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Tenth"
+    }, "Tenth"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Eleventh"
+    }, "Eleventh"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Twelveth"
+    }, "Twelveth"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Thirteenth"
+    }, "Thirteenth"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Fourteenth"
+    }, "Fourteenth"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Fifteenth"
+    }, "This tab should be active & visible on mount.")), /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      bg: "mono10",
+      height: 1000
+    }));
+  },
+  parameters: {
+    chromatic: {
+      disable: true
+    }
+  }
+};
+
+// FIXME: Currently renders one step behind
+var Cached = exports.Cached = {
+  render: function render() {
+    var _useState5 = (0, _react.useState)(1),
+      _useState6 = _slicedToArray(_useState5, 2),
+      count = _useState6[0],
+      setCount = _useState6[1];
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.Button, {
+      variant: "secondaryBlack",
+      size: "small",
+      mb: 1,
+      onClick: function onClick() {
+        setCount(function (prevCount) {
+          return prevCount + 1;
+        });
+      }
+    }, "Increment count \u2014 count: ", count), /*#__PURE__*/_react.default.createElement(_.Tabs, null, /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "First"
+    }, "First \u2014 count: ", count), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Second"
+    }, "Second \u2014 count: ", count), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Third"
+    }, "Third \u2014 count: ", count)));
+  }
+};
+var WithInputs = exports.WithInputs = {
+  render: function render() {
+    var _useState7 = (0, _react.useState)(""),
+      _useState8 = _slicedToArray(_useState7, 2),
+      value = _useState8[0],
+      setValue = _useState8[1];
+    var _useState9 = (0, _react.useState)(""),
+      _useState10 = _slicedToArray(_useState9, 2),
+      value2 = _useState10[0],
+      setValue2 = _useState10[1];
+    return /*#__PURE__*/_react.default.createElement(_.Tabs, null, /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "First"
+    }, /*#__PURE__*/_react.default.createElement("pre", null, JSON.stringify({
+      value: value
+    })), /*#__PURE__*/_react.default.createElement(_Input.Input, {
+      value: value,
+      onChange: function onChange(e) {
+        return setValue(e.target.value);
+      }
+    })), /*#__PURE__*/_react.default.createElement(_.Tab, {
+      name: "Second"
+    }, /*#__PURE__*/_react.default.createElement("pre", null, JSON.stringify({
+      value2: value2
+    })), /*#__PURE__*/_react.default.createElement(_Input.Input, {
+      value: value2,
+      onChange: function onChange(e) {
+        return setValue2(e.target.value);
+      }
+    })));
+  }
+};
+var DynamicTabs = exports.DynamicTabs = {
+  render: function render() {
+    var _useState11 = (0, _react.useState)([{
+        id: 1,
+        name: "Tab 1"
+      }, {
+        id: 2,
+        name: "Tab 2"
+      }, {
+        id: 3,
+        name: "Tab 3"
+      }]),
+      _useState12 = _slicedToArray(_useState11, 2),
+      tabs = _useState12[0],
+      setTabs = _useState12[1];
+    var _useState13 = (0, _react.useState)(4),
+      _useState14 = _slicedToArray(_useState13, 2),
+      nextId = _useState14[0],
+      setNextId = _useState14[1];
+    var addTab = function addTab() {
+      setTabs(function (prev) {
+        return [].concat(_toConsumableArray(prev), [{
+          id: nextId,
+          name: "Tab ".concat(nextId)
+        }]);
+      });
+      setNextId(function (prev) {
+        return prev + 1;
+      });
+    };
+    var removeTab = function removeTab(id) {
+      setTabs(function (prev) {
+        return prev.filter(function (tab) {
+          return tab.id !== id;
+        });
+      });
+    };
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      display: "flex",
+      flexDirection: "row",
+      gap: 1,
+      mb: 2
+    }, /*#__PURE__*/_react.default.createElement(_Button.Button, {
+      variant: "secondaryBlack",
+      size: "small",
+      onClick: addTab
+    }, "Add Tab")), /*#__PURE__*/_react.default.createElement(_.Tabs, {
+      onChange: (0, _test.fn)()
+    }, tabs.map(function (tab) {
+      return /*#__PURE__*/_react.default.createElement(_.Tab, {
+        key: tab.id,
+        name: tab.name
+      }, /*#__PURE__*/_react.default.createElement(_Box.Box, {
+        p: 2
+      }, /*#__PURE__*/_react.default.createElement(_Box.Box, {
+        mb: 2
+      }, "Content for ", tab.name), /*#__PURE__*/_react.default.createElement(_Button.Button, {
+        variant: "secondaryBlack",
+        size: "small",
+        onClick: function onClick() {
+          return removeTab(tab.id);
+        }
+      }, "Remove this tab")));
+    })), /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      mt: 2
+    }, /*#__PURE__*/_react.default.createElement("pre", null, "Current tabs: ", JSON.stringify(tabs, null, 2))));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Demonstrates dynamically adding and removing tabs. The component should handle tab changes gracefully, adjusting the active tab index when tabs are removed."
+      }
+    }
+  }
+};
+//# sourceMappingURL=Tabs.story.js.map