@artsy/palette 45.13.1 → 45.14.0-canary.1497.33070.0

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

@@ -0,0 +1,371 @@
+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; }
+import { fn } from "@storybook/test";
+import React, { useEffect, useState } from "react";
+import { Sup } from "../Sup";
+import { Tab, Tabs } from "./";
+import { Box } from "../Box";
+import { useCursor } from "use-cursor";
+import { Button } from "../Button";
+import { Input } from "../Input";
+import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";
+export 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: STORYBOOK_PROPS_BLOCKLIST
+      }
+    }
+  }
+};
+export var Default = {
+  args: {
+    onChange: fn(),
+    children: [/*#__PURE__*/React.createElement(Tab, {
+      name: "Overview",
+      key: "overview"
+    }, "Overview panel"), /*#__PURE__*/React.createElement(Tab, {
+      name: "Works for sale",
+      key: "works"
+    }, "Works for sale panel"), /*#__PURE__*/React.createElement(Tab, {
+      name: "CV",
+      key: "cv"
+    }, "CV panel"), /*#__PURE__*/React.createElement(Tab, {
+      name: "Auction results",
+      key: "auctions"
+    }, "Auction results panel")]
+  }
+};
+export var WithData = {
+  render: function render() {
+    var _useState = useState({
+        name: "Pending"
+      }),
+      _useState2 = _slicedToArray(_useState, 2),
+      data = _useState2[0],
+      setData = _useState2[1];
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tabs, {
+      onChange: function onChange(tabInfo) {
+        if (!tabInfo) return;
+        setData(tabInfo.data);
+      }
+    }, /*#__PURE__*/React.createElement(Tab, {
+      name: "Overview",
+      data: {
+        name: "Overview"
+      }
+    }, "Overview panel"), /*#__PURE__*/React.createElement(Tab, {
+      name: "Works for sale",
+      data: {
+        name: "Works for sale"
+      }
+    }, "Works for sale panel"), /*#__PURE__*/React.createElement(Tab, {
+      name: "CV",
+      data: {
+        name: "CV"
+      }
+    }, "CV panel"), /*#__PURE__*/React.createElement(Tab, {
+      name: "Auction results",
+      data: {
+        name: "Auction results"
+      }
+    }, "Auction results panel"), /*#__PURE__*/React.createElement(Tab, {
+      name: "No data"
+    }, "No data panel")), /*#__PURE__*/React.createElement("pre", null, JSON.stringify(data, null, 2)));
+  }
+};
+export var Counts = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(Tabs, {
+      onChange: fn()
+    }, /*#__PURE__*/React.createElement(Tab, {
+      name: /*#__PURE__*/React.createElement(React.Fragment, null, "Overview ", /*#__PURE__*/React.createElement(Sup, null, "123"))
+    }), /*#__PURE__*/React.createElement(Tab, {
+      name: /*#__PURE__*/React.createElement(React.Fragment, null, "Works for sale ", /*#__PURE__*/React.createElement(Sup, null, "123"))
+    }), /*#__PURE__*/React.createElement(Tab, {
+      name: "CV"
+    }), /*#__PURE__*/React.createElement(Tab, {
+      name: /*#__PURE__*/React.createElement(React.Fragment, null, "Auction results ", /*#__PURE__*/React.createElement(Sup, null, "123"))
+    }));
+  }
+};
+export var ConditionalTabs = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(Tabs, {
+      onChange: fn()
+    }, /*#__PURE__*/React.createElement(Tab, {
+      name: "First"
+    }, "First"), false && /*#__PURE__*/React.createElement(Tab, {
+      name: "Second"
+    }, "Second"), /*#__PURE__*/React.createElement(Tab, {
+      name: "Third"
+    }, "Third"));
+  }
+};
+export var AutoScrolling = {
+  render: function render() {
+    var _useCursor = useCursor({
+        max: 15
+      }),
+      initialTabIndex = _useCursor.index,
+      handleNext = _useCursor.handleNext;
+    useEffect(function () {
+      var interval = setInterval(handleNext, 500);
+      return function () {
+        return clearInterval(interval);
+      };
+    }, [handleNext]);
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tabs, {
+      initialTabIndex: initialTabIndex,
+      onChange: fn()
+    }, /*#__PURE__*/React.createElement(Tab, {
+      name: "First"
+    }, "First"), /*#__PURE__*/React.createElement(Tab, {
+      name: "Second"
+    }, "Second"), /*#__PURE__*/React.createElement(Tab, {
+      name: "Third"
+    }, "Third"), /*#__PURE__*/React.createElement(Tab, {
+      name: "Fourth"
+    }, "Fourth"), /*#__PURE__*/React.createElement(Tab, {
+      name: "Fifth"
+    }, "Fifth"), /*#__PURE__*/React.createElement(Tab, {
+      name: "Sixth"
+    }, "Sixth"), /*#__PURE__*/React.createElement(Tab, {
+      name: "Seventh"
+    }, "Seventh"), /*#__PURE__*/React.createElement(Tab, {
+      name: "Eighth"
+    }, "Eighth"), /*#__PURE__*/React.createElement(Tab, {
+      name: "Nineth"
+    }, "Nineth"), /*#__PURE__*/React.createElement(Tab, {
+      name: "Tenth"
+    }, "Tenth"), /*#__PURE__*/React.createElement(Tab, {
+      name: "Eleventh"
+    }, "Eleventh"), /*#__PURE__*/React.createElement(Tab, {
+      name: "Twelveth"
+    }, "Twelveth"), /*#__PURE__*/React.createElement(Tab, {
+      name: "Thirteenth"
+    }, "Thirteenth"), /*#__PURE__*/React.createElement(Tab, {
+      name: "Fourteenth"
+    }, "Fourteenth"), /*#__PURE__*/React.createElement(Tab, {
+      name: "Fifteenth"
+    }, "Fifteenth")), /*#__PURE__*/React.createElement("pre", null, JSON.stringify({
+      initialTabIndex: initialTabIndex
+    })));
+  },
+  parameters: {
+    chromatic: {
+      disable: true
+    }
+  }
+};
+export var InitialAutoScroll = {
+  render: function render() {
+    var _useState3 = useState(1),
+      _useState4 = _slicedToArray(_useState3, 2),
+      key = _useState4[0],
+      setKey = _useState4[1];
+    useEffect(function () {
+      var interval = setInterval(function () {
+        setKey(function (key) {
+          return key + 1;
+        });
+      }, 500);
+      return function () {
+        return clearInterval(interval);
+      };
+    }, []);
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+      bg: "mono10",
+      height: 1000,
+      p: 2
+    }, "The vertical scroll of this page should be at the top.", /*#__PURE__*/React.createElement("br", null), "Scroll down to see the tabs.", /*#__PURE__*/React.createElement("br", null), "Render: #", key), /*#__PURE__*/React.createElement(Tabs, {
+      onChange: fn(),
+      initialTabIndex: 14
+    }, /*#__PURE__*/React.createElement(Tab, {
+      name: "First"
+    }, "First"), /*#__PURE__*/React.createElement(Tab, {
+      name: "Second"
+    }, "Second"), /*#__PURE__*/React.createElement(Tab, {
+      name: "Third"
+    }, "Third"), /*#__PURE__*/React.createElement(Tab, {
+      name: "Fourth"
+    }, "Fourth"), /*#__PURE__*/React.createElement(Tab, {
+      name: "Fifth"
+    }, "Fifth"), /*#__PURE__*/React.createElement(Tab, {
+      name: "Sixth"
+    }, "Sixth"), /*#__PURE__*/React.createElement(Tab, {
+      name: "Seventh"
+    }, "Seventh"), /*#__PURE__*/React.createElement(Tab, {
+      name: "Eighth"
+    }, "Eighth"), /*#__PURE__*/React.createElement(Tab, {
+      name: "Nineth"
+    }, "Nineth"), /*#__PURE__*/React.createElement(Tab, {
+      name: "Tenth"
+    }, "Tenth"), /*#__PURE__*/React.createElement(Tab, {
+      name: "Eleventh"
+    }, "Eleventh"), /*#__PURE__*/React.createElement(Tab, {
+      name: "Twelveth"
+    }, "Twelveth"), /*#__PURE__*/React.createElement(Tab, {
+      name: "Thirteenth"
+    }, "Thirteenth"), /*#__PURE__*/React.createElement(Tab, {
+      name: "Fourteenth"
+    }, "Fourteenth"), /*#__PURE__*/React.createElement(Tab, {
+      name: "Fifteenth"
+    }, "This tab should be active & visible on mount.")), /*#__PURE__*/React.createElement(Box, {
+      bg: "mono10",
+      height: 1000
+    }));
+  },
+  parameters: {
+    chromatic: {
+      disable: true
+    }
+  }
+};
+
+// FIXME: Currently renders one step behind
+export var Cached = {
+  render: function render() {
+    var _useState5 = useState(1),
+      _useState6 = _slicedToArray(_useState5, 2),
+      count = _useState6[0],
+      setCount = _useState6[1];
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+      variant: "secondaryBlack",
+      size: "small",
+      mb: 1,
+      onClick: function onClick() {
+        setCount(function (prevCount) {
+          return prevCount + 1;
+        });
+      }
+    }, "Increment count \u2014 count: ", count), /*#__PURE__*/React.createElement(Tabs, null, /*#__PURE__*/React.createElement(Tab, {
+      name: "First"
+    }, "First \u2014 count: ", count), /*#__PURE__*/React.createElement(Tab, {
+      name: "Second"
+    }, "Second \u2014 count: ", count), /*#__PURE__*/React.createElement(Tab, {
+      name: "Third"
+    }, "Third \u2014 count: ", count)));
+  }
+};
+export var WithInputs = {
+  render: function render() {
+    var _useState7 = useState(""),
+      _useState8 = _slicedToArray(_useState7, 2),
+      value = _useState8[0],
+      setValue = _useState8[1];
+    var _useState9 = useState(""),
+      _useState10 = _slicedToArray(_useState9, 2),
+      value2 = _useState10[0],
+      setValue2 = _useState10[1];
+    return /*#__PURE__*/React.createElement(Tabs, null, /*#__PURE__*/React.createElement(Tab, {
+      name: "First"
+    }, /*#__PURE__*/React.createElement("pre", null, JSON.stringify({
+      value: value
+    })), /*#__PURE__*/React.createElement(Input, {
+      value: value,
+      onChange: function onChange(e) {
+        return setValue(e.target.value);
+      }
+    })), /*#__PURE__*/React.createElement(Tab, {
+      name: "Second"
+    }, /*#__PURE__*/React.createElement("pre", null, JSON.stringify({
+      value2: value2
+    })), /*#__PURE__*/React.createElement(Input, {
+      value: value2,
+      onChange: function onChange(e) {
+        return setValue2(e.target.value);
+      }
+    })));
+  }
+};
+export var DynamicTabs = {
+  render: function render() {
+    var _useState11 = 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 = 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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+      display: "flex",
+      flexDirection: "row",
+      gap: 1,
+      mb: 2
+    }, /*#__PURE__*/React.createElement(Button, {
+      variant: "secondaryBlack",
+      size: "small",
+      onClick: addTab
+    }, "Add Tab")), /*#__PURE__*/React.createElement(Tabs, {
+      onChange: fn()
+    }, tabs.map(function (tab) {
+      return /*#__PURE__*/React.createElement(Tab, {
+        key: tab.id,
+        name: tab.name
+      }, /*#__PURE__*/React.createElement(Box, {
+        p: 2
+      }, /*#__PURE__*/React.createElement(Box, {
+        mb: 2
+      }, "Content for ", tab.name), /*#__PURE__*/React.createElement(Button, {
+        variant: "secondaryBlack",
+        size: "small",
+        onClick: function onClick() {
+          return removeTab(tab.id);
+        }
+      }, "Remove this tab")));
+    })), /*#__PURE__*/React.createElement(Box, {
+      mt: 2
+    }, /*#__PURE__*/React.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

package/dist/esm/elements/Tabs/Tabs.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.story.js","names":["fn","React","useEffect","useState","Sup","Tab","Tabs","Box","useCursor","Button","Input","STORYBOOK_PROPS_BLOCKLIST","title","component","tags","parameters","docs","description","controls","exclude","Default","args","onChange","children","createElement","name","key","WithData","render","_useState","_useState2","_slicedToArray","data","setData","Fragment","tabInfo","JSON","stringify","Counts","ConditionalTabs","AutoScrolling","_useCursor","max","initialTabIndex","index","handleNext","interval","setInterval","clearInterval","chromatic","disable","InitialAutoScroll","_useState3","_useState4","setKey","bg","height","p","Cached","_useState5","_useState6","count","setCount","variant","size","mb","onClick","prevCount","WithInputs","_useState7","_useState8","value","setValue","_useState9","_useState10","value2","setValue2","e","target","DynamicTabs","_useState11","id","_useState12","tabs","setTabs","_useState13","_useState14","nextId","setNextId","addTab","prev","concat","_toConsumableArray","removeTab","filter","tab","display","flexDirection","gap","map","mt","story"],"sources":["../../../../src/elements/Tabs/Tabs.story.tsx"],"sourcesContent":["import { fn } from \"@storybook/test\"\nimport React, { useEffect, useState } from \"react\"\nimport { Sup } from \"../Sup\"\nimport { Tab, Tabs } from \"./\"\nimport { Box } from \"../Box\"\nimport { useCursor } from \"use-cursor\"\nimport { Button } from \"../Button\"\nimport { Input } from \"../Input\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  title: \"Components/Tabs\",\n  component: Tabs,\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"Tabs component provides a tabbed interface for organizing content into separate panels. Supports keyboard navigation, custom initial tab selection, and flexible layout options.\",\n      },\n      controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n    },\n  },\n}\n\nexport const Default = {\n  args: {\n    onChange: fn(),\n    children: [\n      <Tab name=\"Overview\" key=\"overview\">\n        Overview panel\n      </Tab>,\n      <Tab name=\"Works for sale\" key=\"works\">\n        Works for sale panel\n      </Tab>,\n      <Tab name=\"CV\" key=\"cv\">\n        CV panel\n      </Tab>,\n      <Tab name=\"Auction results\" key=\"auctions\">\n        Auction results panel\n      </Tab>,\n    ],\n  },\n}\n\nexport const WithData = {\n  render: () => {\n    const [data, setData] = useState({ name: \"Pending\" })\n\n    return (\n      <>\n        <Tabs\n          onChange={(tabInfo) => {\n            if (!tabInfo) return\n\n            setData(tabInfo.data)\n          }}\n        >\n          <Tab name=\"Overview\" data={{ name: \"Overview\" }}>\n            Overview panel\n          </Tab>\n\n          <Tab name=\"Works for sale\" data={{ name: \"Works for sale\" }}>\n            Works for sale panel\n          </Tab>\n\n          <Tab name=\"CV\" data={{ name: \"CV\" }}>\n            CV panel\n          </Tab>\n\n          <Tab name=\"Auction results\" data={{ name: \"Auction results\" }}>\n            Auction results panel\n          </Tab>\n\n          <Tab name=\"No data\">No data panel</Tab>\n        </Tabs>\n\n        <pre>{JSON.stringify(data, null, 2)}</pre>\n      </>\n    )\n  },\n}\n\nexport const Counts = {\n  render: () => {\n    return (\n      <Tabs onChange={fn()}>\n        <Tab\n          name={\n            <>\n              Overview <Sup>123</Sup>\n            </>\n          }\n        />\n        <Tab\n          name={\n            <>\n              Works for sale <Sup>123</Sup>\n            </>\n          }\n        />\n        <Tab name=\"CV\" />\n        <Tab\n          name={\n            <>\n              Auction results <Sup>123</Sup>\n            </>\n          }\n        />\n      </Tabs>\n    )\n  },\n}\n\nexport const ConditionalTabs = {\n  render: () => {\n    return (\n      <Tabs onChange={fn()}>\n        <Tab name=\"First\">First</Tab>\n        {false && <Tab name=\"Second\">Second</Tab>}\n        <Tab name=\"Third\">Third</Tab>\n      </Tabs>\n    )\n  },\n}\n\nexport const AutoScrolling = {\n  render: () => {\n    const { index: initialTabIndex, handleNext } = useCursor({ max: 15 })\n\n    useEffect(() => {\n      const interval = setInterval(handleNext, 500)\n      return () => clearInterval(interval)\n    }, [handleNext])\n\n    return (\n      <>\n        <Tabs initialTabIndex={initialTabIndex} onChange={fn()}>\n          <Tab name=\"First\">First</Tab>\n          <Tab name=\"Second\">Second</Tab>\n          <Tab name=\"Third\">Third</Tab>\n          <Tab name=\"Fourth\">Fourth</Tab>\n          <Tab name=\"Fifth\">Fifth</Tab>\n          <Tab name=\"Sixth\">Sixth</Tab>\n          <Tab name=\"Seventh\">Seventh</Tab>\n          <Tab name=\"Eighth\">Eighth</Tab>\n          <Tab name=\"Nineth\">Nineth</Tab>\n          <Tab name=\"Tenth\">Tenth</Tab>\n          <Tab name=\"Eleventh\">Eleventh</Tab>\n          <Tab name=\"Twelveth\">Twelveth</Tab>\n          <Tab name=\"Thirteenth\">Thirteenth</Tab>\n          <Tab name=\"Fourteenth\">Fourteenth</Tab>\n          <Tab name=\"Fifteenth\">Fifteenth</Tab>\n        </Tabs>\n\n        <pre>{JSON.stringify({ initialTabIndex })}</pre>\n      </>\n    )\n  },\n  parameters: { chromatic: { disable: true } },\n}\n\nexport const InitialAutoScroll = {\n  render: () => {\n    const [key, setKey] = useState(1)\n\n    useEffect(() => {\n      const interval = setInterval(() => {\n        setKey((key) => key + 1)\n      }, 500)\n\n      return () => clearInterval(interval)\n    }, [])\n\n    return (\n      <>\n        <Box bg=\"mono10\" height={1000} p={2}>\n          The vertical scroll of this page should be at the top.\n          <br />\n          Scroll down to see the tabs.\n          <br />\n          Render: #{key}\n        </Box>\n\n        <Tabs onChange={fn()} initialTabIndex={14}>\n          <Tab name=\"First\">First</Tab>\n          <Tab name=\"Second\">Second</Tab>\n          <Tab name=\"Third\">Third</Tab>\n          <Tab name=\"Fourth\">Fourth</Tab>\n          <Tab name=\"Fifth\">Fifth</Tab>\n          <Tab name=\"Sixth\">Sixth</Tab>\n          <Tab name=\"Seventh\">Seventh</Tab>\n          <Tab name=\"Eighth\">Eighth</Tab>\n          <Tab name=\"Nineth\">Nineth</Tab>\n          <Tab name=\"Tenth\">Tenth</Tab>\n          <Tab name=\"Eleventh\">Eleventh</Tab>\n          <Tab name=\"Twelveth\">Twelveth</Tab>\n          <Tab name=\"Thirteenth\">Thirteenth</Tab>\n          <Tab name=\"Fourteenth\">Fourteenth</Tab>\n          <Tab name=\"Fifteenth\">\n            This tab should be active &amp; visible on mount.\n          </Tab>\n        </Tabs>\n\n        <Box bg=\"mono10\" height={1000} />\n      </>\n    )\n  },\n  parameters: { chromatic: { disable: true } },\n}\n\n// FIXME: Currently renders one step behind\nexport const Cached = {\n  render: () => {\n    const [count, setCount] = useState(1)\n\n    return (\n      <>\n        <Button\n          variant=\"secondaryBlack\"\n          size=\"small\"\n          mb={1}\n          onClick={() => {\n            setCount((prevCount) => prevCount + 1)\n          }}\n        >\n          Increment count — count: {count}\n        </Button>\n\n        <Tabs>\n          <Tab name=\"First\">First — count: {count}</Tab>\n          <Tab name=\"Second\">Second — count: {count}</Tab>\n          <Tab name=\"Third\">Third — count: {count}</Tab>\n        </Tabs>\n      </>\n    )\n  },\n}\n\nexport const WithInputs = {\n  render: () => {\n    const [value, setValue] = useState(\"\")\n    const [value2, setValue2] = useState(\"\")\n\n    return (\n      <Tabs>\n        <Tab name=\"First\">\n          <pre>{JSON.stringify({ value })}</pre>\n          <Input value={value} onChange={(e) => setValue(e.target.value)} />\n        </Tab>\n\n        <Tab name=\"Second\">\n          <pre>{JSON.stringify({ value2 })}</pre>\n          <Input value={value2} onChange={(e) => setValue2(e.target.value)} />\n        </Tab>\n      </Tabs>\n    )\n  },\n}\n\nexport const DynamicTabs = {\n  render: () => {\n    const [tabs, setTabs] = useState([\n      { id: 1, name: \"Tab 1\" },\n      { id: 2, name: \"Tab 2\" },\n      { id: 3, name: \"Tab 3\" },\n    ])\n    const [nextId, setNextId] = useState(4)\n\n    const addTab = () => {\n      setTabs((prev) => [...prev, { id: nextId, name: `Tab ${nextId}` }])\n      setNextId((prev) => prev + 1)\n    }\n\n    const removeTab = (id: number) => {\n      setTabs((prev) => prev.filter((tab) => tab.id !== id))\n    }\n\n    return (\n      <>\n        <Box display=\"flex\" flexDirection=\"row\" gap={1} mb={2}>\n          <Button variant=\"secondaryBlack\" size=\"small\" onClick={addTab}>\n            Add Tab\n          </Button>\n        </Box>\n\n        <Tabs onChange={fn()}>\n          {tabs.map((tab) => (\n            <Tab key={tab.id} name={tab.name}>\n              <Box p={2}>\n                <Box mb={2}>Content for {tab.name}</Box>\n                <Button\n                  variant=\"secondaryBlack\"\n                  size=\"small\"\n                  onClick={() => removeTab(tab.id)}\n                >\n                  Remove this tab\n                </Button>\n              </Box>\n            </Tab>\n          ))}\n        </Tabs>\n\n        <Box mt={2}>\n          <pre>Current tabs: {JSON.stringify(tabs, null, 2)}</pre>\n        </Box>\n      </>\n    )\n  },\n  parameters: {\n    docs: {\n      description: {\n        story:\n          \"Demonstrates dynamically adding and removing tabs. The component should handle tab changes gracefully, adjusting the active tab index when tabs are removed.\",\n      },\n    },\n  },\n}\n"],"mappings":"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"}

package/dist/esm/elements/Tabs/index.js

@@ -0,0 +1,2 @@
+export * from "./Tabs";
+//# sourceMappingURL=index.js.map

package/dist/esm/elements/Tabs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/elements/Tabs/index.ts"],"sourcesContent":["export * from \"./Tabs\"\n"],"mappings":"AAAA"}

package/dist/esm/elements/Text/Text.js

@@ -0,0 +1,43 @@
+import { TEXT_VARIANTS, TextVariant } from "@artsy/palette-tokens/dist/typography/v3";
+import styled, { css } from "styled-components";
+import { color, ColorProps, compose, ResponsiveValue, style, system, typography, TypographyProps, variant } from "styled-system";
+import { Color } from "../../Theme";
+import { Box, BoxProps } from "../Box";
+
+/** BaseTextProps */
+
+var textColor = style({
+  prop: "textColor",
+  cssProperty: "color",
+  key: "colors"
+});
+var textTransform = system({
+  textTransform: true
+});
+
+/** styled functions for Text */
+export var textMixin = compose(typography, color, textColor, textTransform);
+
+/** Adds ellipsis to overflowing text */
+export var overflowEllipsisMixin = css(["overflow:hidden;white-space:nowrap;text-overflow:ellipsis;"]);
+
+/** Adds hyphenation to overflowing text */
+export var hyphenate = css(["word-wrap:break-word;word-break:break-word;hyphens:auto;"]);
+
+/** TextProps */
+
+/** Text */
+export var Text = styled(Box).withConfig({
+  displayName: "Text",
+  componentId: "sc-18gcpao-0"
+})(["&&{", " ", " ", "}"], variant({
+  variants: TEXT_VARIANTS
+}), textMixin, function (props) {
+  return css(["", " ", " ", ""], props.hyphenate && hyphenate, props.overflowEllipsis && overflowEllipsisMixin, props.lineClamp && css(["display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:", ";line-clamp:", ";overflow:hidden;"], props.lineClamp, props.lineClamp));
+});
+Text.displayName = "Text";
+Text.defaultProps = {
+  fontFamily: "sans",
+  variant: "sm"
+};
+//# sourceMappingURL=Text.js.map

package/dist/esm/elements/Text/Text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.js","names":["TEXT_VARIANTS","TextVariant","styled","css","color","ColorProps","compose","ResponsiveValue","style","system","typography","TypographyProps","variant","Color","Box","BoxProps","textColor","prop","cssProperty","key","textTransform","textMixin","overflowEllipsisMixin","hyphenate","Text","withConfig","displayName","componentId","variants","props","overflowEllipsis","lineClamp","defaultProps","fontFamily"],"sources":["../../../../src/elements/Text/Text.tsx"],"sourcesContent":["import {\n  TEXT_VARIANTS,\n  TextVariant,\n} from \"@artsy/palette-tokens/dist/typography/v3\"\nimport styled, { css } from \"styled-components\"\nimport {\n  color,\n  ColorProps,\n  compose,\n  ResponsiveValue,\n  style,\n  system,\n  typography,\n  TypographyProps,\n  variant,\n} from \"styled-system\"\nimport { Color } from \"../../Theme\"\nimport { Box, BoxProps } from \"../Box\"\n\n/** BaseTextProps */\nexport type BaseTextProps = TypographyProps &\n  Omit<ColorProps, \"color\"> & {\n    /**\n     * @description\n     * Variants of the text. Possible to pass an array that\n     * behaves accordingly to the media breakpoints [\"sm\", \"md\", \"lg\", \"xl\"]\n     * @example\n     * \"sm\"\n     * \"md\"\n     * [\"md\", \"sm\"]\n     * @see {@link TextVariant}\n     */\n    variant?: ResponsiveValue<TextVariant>\n    textColor?: ResponsiveValue<Color>\n    /**\n     * Max number of lines before truncating the content with an ellipsis at the end of the last line.\n     * Overwriting display is required for this.\n     */\n    lineClamp?: number\n  }\n\nconst textColor = style({\n  prop: \"textColor\",\n  cssProperty: \"color\",\n  key: \"colors\",\n})\n\nexport type TextTransform =\n  | \"none\"\n  | \"capitalize\"\n  | \"uppercase\"\n  | \"lowercase\"\n  | \"initial\"\n  | \"inherit\"\n\nconst textTransform = system({ textTransform: true })\n\n/** styled functions for Text */\nexport const textMixin = compose(typography, color, textColor, textTransform)\n\n/** Adds ellipsis to overflowing text */\nexport const overflowEllipsisMixin = css`\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n`\n\n/** Adds hyphenation to overflowing text */\nexport const hyphenate = css`\n  word-wrap: break-word;\n  word-break: break-word;\n  hyphens: auto;\n`\n\n/** TextProps */\nexport type TextProps = BaseTextProps &\n  BoxProps & {\n    hyphenate?: boolean\n    overflowEllipsis?: boolean\n    textTransform?: ResponsiveValue<TextTransform>\n    lineClamp?: ResponsiveValue<number>\n  }\n\n/** Text */\nexport const Text = styled(Box)<TextProps>`\n  && {\n    ${variant({ variants: TEXT_VARIANTS })}\n    ${textMixin}\n\n    ${(props) => {\n      return css`\n        ${props.hyphenate && hyphenate}\n        ${props.overflowEllipsis && overflowEllipsisMixin}\n        ${props.lineClamp &&\n        css`\n          display: -webkit-box;\n          -webkit-box-orient: vertical;\n          -webkit-line-clamp: ${props.lineClamp};\n          line-clamp: ${props.lineClamp};\n          overflow: hidden;\n        `}\n      `\n    }}\n  }\n`\n\nText.displayName = \"Text\"\n\nText.defaultProps = {\n  fontFamily: \"sans\",\n  variant: \"sm\",\n}\n"],"mappings":"AAAA,SACEA,aAAa,EACbC,WAAW,QACN,0CAA0C;AACjD,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SACEC,KAAK,EACLC,UAAU,EACVC,OAAO,EACPC,eAAe,EACfC,KAAK,EACLC,MAAM,EACNC,UAAU,EACVC,eAAe,EACfC,OAAO,QACF,eAAe;AACtB,SAASC,KAAK;AACd,SAASC,GAAG,EAAEC,QAAQ;;AAEtB;;AAsBA,IAAMC,SAAS,GAAGR,KAAK,CAAC;EACtBS,IAAI,EAAE,WAAW;EACjBC,WAAW,EAAE,OAAO;EACpBC,GAAG,EAAE;AACP,CAAC,CAAC;AAUF,IAAMC,aAAa,GAAGX,MAAM,CAAC;EAAEW,aAAa,EAAE;AAAK,CAAC,CAAC;;AAErD;AACA,OAAO,IAAMC,SAAS,GAAGf,OAAO,CAACI,UAAU,EAAEN,KAAK,EAAEY,SAAS,EAAEI,aAAa,CAAC;;AAE7E;AACA,OAAO,IAAME,qBAAqB,GAAGnB,GAAG,gEAIvC;;AAED;AACA,OAAO,IAAMoB,SAAS,GAAGpB,GAAG,8DAI3B;;AAED;;AASA;AACA,OAAO,IAAMqB,IAAI,GAAGtB,MAAM,CAACY,GAAG,CAAC,CAAAW,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,2BAEzBf,OAAO,CAAC;EAAEgB,QAAQ,EAAE5B;AAAc,CAAC,CAAC,EACpCqB,SAAS,EAET,UAACQ,KAAK,EAAK;EACX,OAAO1B,GAAG,qBACN0B,KAAK,CAACN,SAAS,IAAIA,SAAS,EAC5BM,KAAK,CAACC,gBAAgB,IAAIR,qBAAqB,EAC/CO,KAAK,CAACE,SAAS,IACjB5B,GAAG,+GAGqB0B,KAAK,CAACE,SAAS,EACvBF,KAAK,CAACE,SAAS,CAE9B;AAEL,CAAC,CAEJ;AAEDP,IAAI,CAACE,WAAW,GAAG,MAAM;AAEzBF,IAAI,CAACQ,YAAY,GAAG;EAClBC,UAAU,EAAE,MAAM;EAClBrB,OAAO,EAAE;AACX,CAAC"}

package/dist/esm/elements/Text/Text.story.js

@@ -0,0 +1,121 @@
+import { Text } from "./Text";
+import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";
+export default {
+  title: "Components/Text",
+  component: Text,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "Text component provides typography with predefined variants for consistent text styling across the application. Supports various sizes, weights, colors, and semantic HTML elements."
+      },
+      controls: {
+        exclude: STORYBOOK_PROPS_BLOCKLIST
+      }
+    }
+  }
+};
+export var Default = {
+  args: {
+    children: "This is default text"
+  }
+};
+export var LargeTitle = {
+  args: {
+    variant: "lg-display",
+    children: "Large Display Text"
+  }
+};
+export var MediumTitle = {
+  args: {
+    variant: "md-display",
+    children: "Medium Display Text"
+  }
+};
+export var SmallTitle = {
+  args: {
+    variant: "sm-display",
+    children: "Small Display Text"
+  }
+};
+export var BodyText = {
+  args: {
+    variant: "sm",
+    children: "This is body text that would typically be used for paragraphs and general content."
+  }
+};
+export var ColoredText = {
+  args: {
+    variant: "md",
+    textColor: "blue100",
+    children: "This text is colored blue"
+  }
+};
+export var AsHeading = {
+  args: {
+    as: "h2",
+    variant: "lg-display",
+    children: "This renders as an H2 element"
+  }
+};
+export var ExtraSmall = {
+  args: {
+    variant: "xs",
+    children: "Extra small text"
+  }
+};
+export var XLargeDisplay = {
+  args: {
+    variant: "xl",
+    children: "Extra large display text"
+  }
+};
+export var XXLargeDisplay = {
+  args: {
+    variant: "xxl",
+    children: "Extra extra large display text"
+  }
+};
+export var CappedText = {
+  args: {
+    caps: true,
+    children: "This text is in caps"
+  }
+};
+export var ItalicText = {
+  args: {
+    italic: true,
+    children: "This text is italicized"
+  }
+};
+export var UnderlineText = {
+  args: {
+    underline: true,
+    children: "This text is underlined"
+  }
+};
+export var TruncatedText = {
+  args: {
+    overflowEllipsis: true,
+    children: "All their equipment and instruments are alive. All their equipment and instruments are alive. All their equipment and instruments are alive."
+  }
+};
+export var LineClampText = {
+  args: {
+    lineClamp: 2,
+    children: "All their equipment and instruments are alive. All their equipment and instruments are alive. All their equipment and instruments are alive. All their equipment and instruments are alive. All their equipment and instruments are alive."
+  }
+};
+export var UppercaseText = {
+  args: {
+    textTransform: "uppercase",
+    children: "This text is uppercase"
+  }
+};
+export var CapitalizedText = {
+  args: {
+    textTransform: "capitalize",
+    children: "this text is capitalized"
+  }
+};
+//# sourceMappingURL=Text.story.js.map

package/dist/esm/elements/Text/Text.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.story.js","names":["Text","STORYBOOK_PROPS_BLOCKLIST","title","component","tags","parameters","docs","description","controls","exclude","Default","args","children","LargeTitle","variant","MediumTitle","SmallTitle","BodyText","ColoredText","textColor","AsHeading","as","ExtraSmall","XLargeDisplay","XXLargeDisplay","CappedText","caps","ItalicText","italic","UnderlineText","underline","TruncatedText","overflowEllipsis","LineClampText","lineClamp","UppercaseText","textTransform","CapitalizedText"],"sources":["../../../../src/elements/Text/Text.story.tsx"],"sourcesContent":["import { Text } from \"./Text\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  title: \"Components/Text\",\n  component: Text,\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"Text component provides typography with predefined variants for consistent text styling across the application. Supports various sizes, weights, colors, and semantic HTML elements.\",\n      },\n      controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n    },\n  },\n}\n\nexport const Default = {\n  args: {\n    children: \"This is default text\",\n  },\n}\n\nexport const LargeTitle = {\n  args: {\n    variant: \"lg-display\",\n    children: \"Large Display Text\",\n  },\n}\n\nexport const MediumTitle = {\n  args: {\n    variant: \"md-display\",\n    children: \"Medium Display Text\",\n  },\n}\n\nexport const SmallTitle = {\n  args: {\n    variant: \"sm-display\",\n    children: \"Small Display Text\",\n  },\n}\n\nexport const BodyText = {\n  args: {\n    variant: \"sm\",\n    children:\n      \"This is body text that would typically be used for paragraphs and general content.\",\n  },\n}\n\nexport const ColoredText = {\n  args: {\n    variant: \"md\",\n    textColor: \"blue100\",\n    children: \"This text is colored blue\",\n  },\n}\n\nexport const AsHeading = {\n  args: {\n    as: \"h2\",\n    variant: \"lg-display\",\n    children: \"This renders as an H2 element\",\n  },\n}\n\nexport const ExtraSmall = {\n  args: {\n    variant: \"xs\",\n    children: \"Extra small text\",\n  },\n}\n\nexport const XLargeDisplay = {\n  args: {\n    variant: \"xl\",\n    children: \"Extra large display text\",\n  },\n}\n\nexport const XXLargeDisplay = {\n  args: {\n    variant: \"xxl\",\n    children: \"Extra extra large display text\",\n  },\n}\n\nexport const CappedText = {\n  args: {\n    caps: true,\n    children: \"This text is in caps\",\n  },\n}\n\nexport const ItalicText = {\n  args: {\n    italic: true,\n    children: \"This text is italicized\",\n  },\n}\n\nexport const UnderlineText = {\n  args: {\n    underline: true,\n    children: \"This text is underlined\",\n  },\n}\n\nexport const TruncatedText = {\n  args: {\n    overflowEllipsis: true,\n    children:\n      \"All their equipment and instruments are alive. All their equipment and instruments are alive. All their equipment and instruments are alive.\",\n  },\n}\n\nexport const LineClampText = {\n  args: {\n    lineClamp: 2,\n    children:\n      \"All their equipment and instruments are alive. All their equipment and instruments are alive. All their equipment and instruments are alive. All their equipment and instruments are alive. All their equipment and instruments are alive.\",\n  },\n}\n\nexport const UppercaseText = {\n  args: {\n    textTransform: \"uppercase\",\n    children: \"This text is uppercase\",\n  },\n}\n\nexport const CapitalizedText = {\n  args: {\n    textTransform: \"capitalize\",\n    children: \"this text is capitalized\",\n  },\n}\n"],"mappings":"AAAA,SAASA,IAAI;AACb,SAASC,yBAAyB;AAElC,eAAe;EACbC,KAAK,EAAE,iBAAiB;EACxBC,SAAS,EAAEH,IAAI;EACfI,IAAI,EAAE,CAAC,UAAU,CAAC;EAClBC,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXJ,SAAS,EACP;MACJ,CAAC;MACDK,QAAQ,EAAE;QACRC,OAAO,EAAER;MACX;IACF;EACF;AACF,CAAC;AAED,OAAO,IAAMS,OAAO,GAAG;EACrBC,IAAI,EAAE;IACJC,QAAQ,EAAE;EACZ;AACF,CAAC;AAED,OAAO,IAAMC,UAAU,GAAG;EACxBF,IAAI,EAAE;IACJG,OAAO,EAAE,YAAY;IACrBF,QAAQ,EAAE;EACZ;AACF,CAAC;AAED,OAAO,IAAMG,WAAW,GAAG;EACzBJ,IAAI,EAAE;IACJG,OAAO,EAAE,YAAY;IACrBF,QAAQ,EAAE;EACZ;AACF,CAAC;AAED,OAAO,IAAMI,UAAU,GAAG;EACxBL,IAAI,EAAE;IACJG,OAAO,EAAE,YAAY;IACrBF,QAAQ,EAAE;EACZ;AACF,CAAC;AAED,OAAO,IAAMK,QAAQ,GAAG;EACtBN,IAAI,EAAE;IACJG,OAAO,EAAE,IAAI;IACbF,QAAQ,EACN;EACJ;AACF,CAAC;AAED,OAAO,IAAMM,WAAW,GAAG;EACzBP,IAAI,EAAE;IACJG,OAAO,EAAE,IAAI;IACbK,SAAS,EAAE,SAAS;IACpBP,QAAQ,EAAE;EACZ;AACF,CAAC;AAED,OAAO,IAAMQ,SAAS,GAAG;EACvBT,IAAI,EAAE;IACJU,EAAE,EAAE,IAAI;IACRP,OAAO,EAAE,YAAY;IACrBF,QAAQ,EAAE;EACZ;AACF,CAAC;AAED,OAAO,IAAMU,UAAU,GAAG;EACxBX,IAAI,EAAE;IACJG,OAAO,EAAE,IAAI;IACbF,QAAQ,EAAE;EACZ;AACF,CAAC;AAED,OAAO,IAAMW,aAAa,GAAG;EAC3BZ,IAAI,EAAE;IACJG,OAAO,EAAE,IAAI;IACbF,QAAQ,EAAE;EACZ;AACF,CAAC;AAED,OAAO,IAAMY,cAAc,GAAG;EAC5Bb,IAAI,EAAE;IACJG,OAAO,EAAE,KAAK;IACdF,QAAQ,EAAE;EACZ;AACF,CAAC;AAED,OAAO,IAAMa,UAAU,GAAG;EACxBd,IAAI,EAAE;IACJe,IAAI,EAAE,IAAI;IACVd,QAAQ,EAAE;EACZ;AACF,CAAC;AAED,OAAO,IAAMe,UAAU,GAAG;EACxBhB,IAAI,EAAE;IACJiB,MAAM,EAAE,IAAI;IACZhB,QAAQ,EAAE;EACZ;AACF,CAAC;AAED,OAAO,IAAMiB,aAAa,GAAG;EAC3BlB,IAAI,EAAE;IACJmB,SAAS,EAAE,IAAI;IACflB,QAAQ,EAAE;EACZ;AACF,CAAC;AAED,OAAO,IAAMmB,aAAa,GAAG;EAC3BpB,IAAI,EAAE;IACJqB,gBAAgB,EAAE,IAAI;IACtBpB,QAAQ,EACN;EACJ;AACF,CAAC;AAED,OAAO,IAAMqB,aAAa,GAAG;EAC3BtB,IAAI,EAAE;IACJuB,SAAS,EAAE,CAAC;IACZtB,QAAQ,EACN;EACJ;AACF,CAAC;AAED,OAAO,IAAMuB,aAAa,GAAG;EAC3BxB,IAAI,EAAE;IACJyB,aAAa,EAAE,WAAW;IAC1BxB,QAAQ,EAAE;EACZ;AACF,CAAC;AAED,OAAO,IAAMyB,eAAe,GAAG;EAC7B1B,IAAI,EAAE;IACJyB,aAAa,EAAE,YAAY;IAC3BxB,QAAQ,EAAE;EACZ;AACF,CAAC"}

package/dist/esm/elements/Text/index.js

@@ -0,0 +1,2 @@
+export * from "./Text";
+//# sourceMappingURL=index.js.map

package/dist/esm/elements/Text/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/elements/Text/index.ts"],"sourcesContent":["export * from \"./Text\"\n"],"mappings":"AAAA"}