@artsy/palette 45.13.0 → 45.14.0-canary.1497.33065.0

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

@@ -0,0 +1,303 @@
+var _excluded = ["widths", "heights"];
+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 _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 _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; }
+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; }
+import React, { useEffect, useState } from "react";
+import { Box } from "../Box";
+import { CarouselBar } from "../CarouselBar";
+import { Clickable } from "../Clickable";
+import { ProgressDots } from "../ProgressDots";
+import { Text } from "../Text";
+import { Swiper, SwiperCell, SwiperRail } from "./";
+import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";
+var LOREM = "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quis dicta sunt nihil perspiciatis aperiam asperiores, earum facere repellendus in veniam, mollitia, ducimus delectus perferendis beatae facilis molestiae et ad quaerat!";
+var Demo = function Demo(_ref) {
+  var _ref$widths = _ref.widths,
+    widths = _ref$widths === void 0 ? Array.from(Array(25)).map(function (_) {
+      return 300;
+    }) : _ref$widths,
+    _ref$heights = _ref.heights,
+    heights = _ref$heights === void 0 ? [400] : _ref$heights,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Box, {
+    mx: [2, 4],
+    my: 2
+  }, /*#__PURE__*/React.createElement(Swiper, rest, widths.map(function (width, i) {
+    return /*#__PURE__*/React.createElement(Clickable, {
+      key: i,
+      width: width,
+      height: heights[i % heights.length],
+      bg: "mono10",
+      border: "1px solid",
+      borderColor: "mono30",
+      p: 1,
+      textAlign: "center"
+    }, /*#__PURE__*/React.createElement(Text, {
+      variant: "xs"
+    }, i + 1));
+  })));
+};
+Demo.displayName = "Demo";
+export default {
+  component: Swiper,
+  title: "Components/Swiper",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "A swiper/carousel component with horizontal scrolling, navigation, and progress indicators."
+      },
+      controls: {
+        exclude: STORYBOOK_PROPS_BLOCKLIST
+      }
+    }
+  }
+};
+export var Simple = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(Demo, null);
+  }
+};
+export var WithHorizontalMargins = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, null, "Should be flush with horizontal edges"), /*#__PURE__*/React.createElement(Demo, {
+      mx: [-2, -4]
+    }));
+  }
+};
+export var SimpleWithLeftEdgeSnapping = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(Demo, {
+      snap: "start"
+    });
+  }
+};
+export var ProgressBarExample = {
+  render: function render() {
+    var widths = Array.from(Array(10)).map(function (_) {
+      return 300;
+    });
+    var _useState = useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      index = _useState2[0],
+      setIndex = _useState2[1];
+    var progress = index * 100 / (widths.length - 1);
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Demo, {
+      widths: widths,
+      onChange: setIndex
+    }), /*#__PURE__*/React.createElement(CarouselBar, {
+      percentComplete: progress
+    }));
+  }
+};
+export var ProgressDotsExample = {
+  render: function render() {
+    var widths = Array.from(Array(10)).map(function (_) {
+      return 300;
+    });
+    var _useState3 = useState(0),
+      _useState4 = _slicedToArray(_useState3, 2),
+      index = _useState4[0],
+      setIndex = _useState4[1];
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Demo, {
+      widths: widths,
+      onChange: setIndex
+    }), /*#__PURE__*/React.createElement(ProgressDots, {
+      variant: "dash",
+      amount: widths.length,
+      activeIndex: index
+    }));
+  }
+};
+export var CustomRailAndCells = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(Demo, {
+      snap: "start",
+      widths: ["100%", "100%", "100%", "100%"]
+      // eslint-disable-next-line react/display-name
+      ,
+      Cell: /*#__PURE__*/React.forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(SwiperCell, _extends({}, props, {
+          ref: ref,
+          display: "inline-flex",
+          width: "100%",
+          pr: 0
+        }));
+      }),
+      Rail: function Rail(props) {
+        return /*#__PURE__*/React.createElement(SwiperRail, _extends({}, props, {
+          display: "block"
+        }));
+      }
+    });
+  }
+};
+export var DynamicItems = {
+  render: function render() {
+    var _useState5 = useState(0),
+      _useState6 = _slicedToArray(_useState5, 2),
+      index = _useState6[0],
+      setIndex = _useState6[1];
+    var _useState7 = useState([300]),
+      _useState8 = _slicedToArray(_useState7, 2),
+      widths = _useState8[0],
+      setWidths = _useState8[1];
+    useEffect(function () {
+      var interval = setInterval(function () {
+        setWidths(function (prevWidths) {
+          return [].concat(_toConsumableArray(prevWidths), [300]);
+        });
+      }, 500);
+      return function () {
+        return clearInterval(interval);
+      };
+    }, []);
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Demo, {
+      widths: widths,
+      onChange: setIndex
+    }), /*#__PURE__*/React.createElement(ProgressDots, {
+      amount: widths.length,
+      activeIndex: index
+    }));
+  },
+  parameters: {
+    chromatic: {
+      disable: true
+    }
+  }
+};
+export var SwiperWithText = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(Box, {
+      mx: [2, 4],
+      my: 2
+    }, /*#__PURE__*/React.createElement(Swiper, null, /*#__PURE__*/React.createElement(Text, {
+      bg: "mono10",
+      p: 1,
+      width: 300
+    }, LOREM), /*#__PURE__*/React.createElement(Text, {
+      bg: "mono10",
+      p: 1,
+      width: 300
+    }, LOREM), /*#__PURE__*/React.createElement(Text, {
+      bg: "mono10",
+      p: 1,
+      width: 300
+    }, LOREM), /*#__PURE__*/React.createElement(Text, {
+      bg: "mono10",
+      p: 1,
+      width: 300
+    }, LOREM), /*#__PURE__*/React.createElement(Text, {
+      bg: "mono10",
+      p: 1,
+      width: 300
+    }, LOREM)));
+  }
+};
+export var InitialIndexOnMount = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(Demo, {
+      initialIndex: 3
+    });
+  }
+};
+export var NavigateViaProps = {
+  render: function render() {
+    var _useState9 = useState(0),
+      _useState10 = _slicedToArray(_useState9, 2),
+      initialIndex = _useState10[0],
+      resetIndex = _useState10[1];
+    return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Demo, {
+      initialIndex: initialIndex,
+      onChange: resetIndex
+    }), /*#__PURE__*/React.createElement(Box, {
+      display: "flex",
+      justifyContent: "space-around"
+    }, /*#__PURE__*/React.createElement(Clickable, {
+      onClick: function onClick() {
+        return resetIndex(0);
+      }
+    }, "Navigate to page 1"), /*#__PURE__*/React.createElement(Clickable, {
+      onClick: function onClick() {
+        return resetIndex(1);
+      }
+    }, "Navigate to page 2"), /*#__PURE__*/React.createElement(Clickable, {
+      onClick: function onClick() {
+        return resetIndex(2);
+      }
+    }, "Navigate to page 3"), /*#__PURE__*/React.createElement(Clickable, {
+      onClick: function onClick() {
+        return resetIndex(3);
+      }
+    }, "Navigate to page 4")));
+  }
+};
+export var OverwritingDefaultMargins = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(Demo, {
+      mt: 6,
+      ml: 6
+    });
+  }
+};
+export var ConditionalChildren = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(Box, {
+      mx: [2, 4],
+      my: 2
+    }, /*#__PURE__*/React.createElement(Swiper, null, /*#__PURE__*/React.createElement(Box, {
+      bg: "mono10",
+      width: 300,
+      height: 300,
+      p: 2
+    }, /*#__PURE__*/React.createElement(Text, {
+      variant: "xs"
+    }, "1")), /*#__PURE__*/React.createElement(Box, {
+      bg: "mono10",
+      width: 300,
+      height: 300,
+      p: 2
+    }, /*#__PURE__*/React.createElement(Text, {
+      variant: "xs"
+    }, "2")), false && /*#__PURE__*/React.createElement(Box, {
+      bg: "mono10",
+      width: 300,
+      height: 300,
+      p: 2
+    }, /*#__PURE__*/React.createElement(Text, {
+      variant: "xs"
+    }, "3")), true && /*#__PURE__*/React.createElement(Box, {
+      bg: "mono10",
+      width: 300,
+      height: 300,
+      p: 2
+    }, /*#__PURE__*/React.createElement(Text, {
+      variant: "xs"
+    }, "4")), /*#__PURE__*/React.createElement(Box, {
+      bg: "mono10",
+      width: 300,
+      height: 300,
+      p: 2
+    }, /*#__PURE__*/React.createElement(Text, {
+      variant: "xs"
+    }, "5")), /*#__PURE__*/React.createElement(Box, {
+      bg: "mono10",
+      width: 300,
+      height: 300,
+      p: 2
+    }, /*#__PURE__*/React.createElement(Text, {
+      variant: "xs"
+    }, "6"))));
+  }
+};
+//# sourceMappingURL=Swiper.story.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Swiper.story.js","names":["React","useEffect","useState","Box","CarouselBar","Clickable","ProgressDots","Text","Swiper","SwiperCell","SwiperRail","STORYBOOK_PROPS_BLOCKLIST","LOREM","Demo","_ref","_ref$widths","widths","Array","from","map","_","_ref$heights","heights","rest","_objectWithoutProperties","_excluded","createElement","mx","my","width","i","key","height","length","bg","border","borderColor","p","textAlign","variant","displayName","component","title","tags","parameters","docs","description","controls","exclude","Simple","render","WithHorizontalMargins","Fragment","SimpleWithLeftEdgeSnapping","snap","ProgressBarExample","_useState","_useState2","_slicedToArray","index","setIndex","progress","onChange","percentComplete","ProgressDotsExample","_useState3","_useState4","amount","activeIndex","CustomRailAndCells","Cell","forwardRef","props","ref","_extends","display","pr","Rail","DynamicItems","_useState5","_useState6","_useState7","_useState8","setWidths","interval","setInterval","prevWidths","concat","_toConsumableArray","clearInterval","chromatic","disable","SwiperWithText","InitialIndexOnMount","initialIndex","NavigateViaProps","_useState9","_useState10","resetIndex","justifyContent","onClick","OverwritingDefaultMargins","mt","ml","ConditionalChildren"],"sources":["../../../../src/elements/Swiper/Swiper.story.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\"\nimport { Box } from \"../Box\"\nimport { CarouselBar } from \"../CarouselBar\"\nimport { Clickable } from \"../Clickable\"\nimport { ProgressDots } from \"../ProgressDots\"\nimport { Text } from \"../Text\"\nimport { Swiper, SwiperCell, SwiperProps, SwiperRail } from \"./\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nconst LOREM =\n  \"Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quis dicta sunt nihil perspiciatis aperiam asperiores, earum facere repellendus in veniam, mollitia, ducimus delectus perferendis beatae facilis molestiae et ad quaerat!\"\n\nconst Demo = ({\n  widths = Array.from(Array(25)).map((_) => 300),\n  heights = [400],\n  ...rest\n}: {\n  widths?: Array<number | string>\n  heights?: number[]\n} & Omit<SwiperProps, \"children\">) => {\n  return (\n    <Box mx={[2, 4]} my={2}>\n      <Swiper {...rest}>\n        {widths.map((width, i) => (\n          <Clickable\n            key={i}\n            width={width}\n            height={heights[i % heights.length]}\n            bg=\"mono10\"\n            border=\"1px solid\"\n            borderColor=\"mono30\"\n            p={1}\n            textAlign=\"center\"\n          >\n            <Text variant=\"xs\">{i + 1}</Text>\n          </Clickable>\n        ))}\n      </Swiper>\n    </Box>\n  )\n}\n\nexport default {\n  component: Swiper,\n  title: \"Components/Swiper\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A swiper/carousel component with horizontal scrolling, navigation, and progress indicators.\",\n      },\n      controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n    },\n  },\n}\n\nexport const Simple = {\n  render: () => <Demo />,\n}\n\nexport const WithHorizontalMargins = {\n  render: () => {\n    return (\n      <>\n        <Text>Should be flush with horizontal edges</Text>\n        <Demo mx={[-2, -4]} />\n      </>\n    )\n  },\n}\n\nexport const SimpleWithLeftEdgeSnapping = {\n  render: () => <Demo snap=\"start\" />,\n}\n\nexport const ProgressBarExample = {\n  render: () => {\n    const widths = Array.from(Array(10)).map((_) => 300)\n    const [index, setIndex] = useState(0)\n    const progress = (index * 100) / (widths.length - 1)\n\n    return (\n      <>\n        <Demo widths={widths} onChange={setIndex} />\n        <CarouselBar percentComplete={progress} />\n      </>\n    )\n  },\n}\n\nexport const ProgressDotsExample = {\n  render: () => {\n    const widths = Array.from(Array(10)).map((_) => 300)\n    const [index, setIndex] = useState(0)\n\n    return (\n      <>\n        <Demo widths={widths} onChange={setIndex} />\n        <ProgressDots\n          variant=\"dash\"\n          amount={widths.length}\n          activeIndex={index}\n        />\n      </>\n    )\n  },\n}\n\nexport const CustomRailAndCells = {\n  render: () => {\n    return (\n      <Demo\n        snap=\"start\"\n        widths={[\"100%\", \"100%\", \"100%\", \"100%\"]}\n        // eslint-disable-next-line react/display-name\n        Cell={React.forwardRef((props, ref) => {\n          return (\n            <SwiperCell\n              {...props}\n              ref={ref as any}\n              display=\"inline-flex\"\n              width=\"100%\"\n              pr={0}\n            />\n          )\n        })}\n        Rail={(props) => {\n          return <SwiperRail {...props} display=\"block\" />\n        }}\n      />\n    )\n  },\n}\n\nexport const DynamicItems = {\n  render: () => {\n    const [index, setIndex] = useState(0)\n    const [widths, setWidths] = useState([300])\n    useEffect(() => {\n      const interval = setInterval(() => {\n        setWidths((prevWidths) => [...prevWidths, 300])\n      }, 500)\n      return () => clearInterval(interval)\n    }, [])\n\n    return (\n      <>\n        <Demo widths={widths} onChange={setIndex} />\n        <ProgressDots amount={widths.length} activeIndex={index} />\n      </>\n    )\n  },\n  parameters: { chromatic: { disable: true } },\n}\n\nexport const SwiperWithText = {\n  render: () => {\n    return (\n      <Box mx={[2, 4]} my={2}>\n        <Swiper>\n          <Text bg=\"mono10\" p={1} width={300}>\n            {LOREM}\n          </Text>\n\n          <Text bg=\"mono10\" p={1} width={300}>\n            {LOREM}\n          </Text>\n\n          <Text bg=\"mono10\" p={1} width={300}>\n            {LOREM}\n          </Text>\n\n          <Text bg=\"mono10\" p={1} width={300}>\n            {LOREM}\n          </Text>\n\n          <Text bg=\"mono10\" p={1} width={300}>\n            {LOREM}\n          </Text>\n        </Swiper>\n      </Box>\n    )\n  },\n}\n\nexport const InitialIndexOnMount = {\n  render: () => <Demo initialIndex={3} />,\n}\n\nexport const NavigateViaProps = {\n  render: () => {\n    const [initialIndex, resetIndex] = useState(0)\n    return (\n      <Box>\n        <Demo initialIndex={initialIndex} onChange={resetIndex} />\n        <Box display=\"flex\" justifyContent=\"space-around\">\n          <Clickable onClick={() => resetIndex(0)}>\n            Navigate to page 1\n          </Clickable>\n          <Clickable onClick={() => resetIndex(1)}>\n            Navigate to page 2\n          </Clickable>\n          <Clickable onClick={() => resetIndex(2)}>\n            Navigate to page 3\n          </Clickable>\n          <Clickable onClick={() => resetIndex(3)}>\n            Navigate to page 4\n          </Clickable>\n        </Box>\n      </Box>\n    )\n  },\n}\n\nexport const OverwritingDefaultMargins = {\n  render: () => <Demo mt={6} ml={6} />,\n}\n\nexport const ConditionalChildren = {\n  render: () => {\n    return (\n      <Box mx={[2, 4]} my={2}>\n        <Swiper>\n          <Box bg=\"mono10\" width={300} height={300} p={2}>\n            <Text variant=\"xs\">1</Text>\n          </Box>\n\n          <Box bg=\"mono10\" width={300} height={300} p={2}>\n            <Text variant=\"xs\">2</Text>\n          </Box>\n\n          {false && (\n            <Box bg=\"mono10\" width={300} height={300} p={2}>\n              <Text variant=\"xs\">3</Text>\n            </Box>\n          )}\n\n          {true && (\n            <Box bg=\"mono10\" width={300} height={300} p={2}>\n              <Text variant=\"xs\">4</Text>\n            </Box>\n          )}\n\n          <Box bg=\"mono10\" width={300} height={300} p={2}>\n            <Text variant=\"xs\">5</Text>\n          </Box>\n\n          <Box bg=\"mono10\" width={300} height={300} p={2}>\n            <Text variant=\"xs\">6</Text>\n          </Box>\n        </Swiper>\n      </Box>\n    )\n  },\n}\n"],"mappings":"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"}

package/dist/esm/elements/Swiper/activeIndex.js

@@ -0,0 +1,11 @@
+/**
+ * Remaps the progress into the active index, given an array of `length`.
+ * @param progress number from 1 to 100
+ * @param length length of an array
+ */
+export var activeIndex = function activeIndex(_ref) {
+  var progress = _ref.progress,
+    length = _ref.length;
+  return Math.round(progress * (length - 1) / 100);
+};
+//# sourceMappingURL=activeIndex.js.map

package/dist/esm/elements/Swiper/activeIndex.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"activeIndex.js","names":["activeIndex","_ref","progress","length","Math","round"],"sources":["../../../../src/elements/Swiper/activeIndex.ts"],"sourcesContent":["/**\n * Remaps the progress into the active index, given an array of `length`.\n * @param progress number from 1 to 100\n * @param length length of an array\n */\nexport const activeIndex = ({\n  progress,\n  length,\n}: {\n  progress: number\n  length: number\n}) => {\n  return Math.round((progress * (length - 1)) / 100)\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMA,WAAW,GAAG,SAAdA,WAAWA,CAAAC,IAAA,EAMlB;EAAA,IALJC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACRC,MAAM,GAAAF,IAAA,CAANE,MAAM;EAKN,OAAOC,IAAI,CAACC,KAAK,CAAEH,QAAQ,IAAIC,MAAM,GAAG,CAAC,CAAC,GAAI,GAAG,CAAC;AACpD,CAAC"}

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

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

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

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

package/dist/esm/elements/Swiper/percentage.js

@@ -0,0 +1,14 @@
+/**
+ * Calculate the percentage of the rail that has been scrolled.
+ * If the left edge is at the total minus the viewport we are done scrolling.
+ * @param viewport window width
+ * @param total total width of the rail
+ * @param left left edge of scroll
+ */
+export var percentage = function percentage(_ref) {
+  var viewport = _ref.viewport,
+    total = _ref.total,
+    left = _ref.left;
+  return Math.round(left / (total - viewport) * 100);
+};
+//# sourceMappingURL=percentage.js.map

package/dist/esm/elements/Swiper/percentage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"percentage.js","names":["percentage","_ref","viewport","total","left","Math","round"],"sources":["../../../../src/elements/Swiper/percentage.ts"],"sourcesContent":["/**\n * Calculate the percentage of the rail that has been scrolled.\n * If the left edge is at the total minus the viewport we are done scrolling.\n * @param viewport window width\n * @param total total width of the rail\n * @param left left edge of scroll\n */\nexport const percentage = ({\n  viewport,\n  total,\n  left,\n}: {\n  viewport: number\n  total: number\n  left: number\n}) => {\n  return Math.round((left / (total - viewport)) * 100)\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMA,UAAU,GAAG,SAAbA,UAAUA,CAAAC,IAAA,EAQjB;EAAA,IAPJC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACRC,KAAK,GAAAF,IAAA,CAALE,KAAK;IACLC,IAAI,GAAAH,IAAA,CAAJG,IAAI;EAMJ,OAAOC,IAAI,CAACC,KAAK,CAAEF,IAAI,IAAID,KAAK,GAAGD,QAAQ,CAAC,GAAI,GAAG,CAAC;AACtD,CAAC"}

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

@@ -0,0 +1,136 @@
+var _excluded = ["children", "initialTabIndex", "mb", "onChange"];
+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; }
+import React, { createRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import styled from "styled-components";
+import { themeGet } from "@styled-system/theme-get";
+import { flattenChildren } from "../../helpers/flattenChildren";
+import { useUpdateEffect } from "../../utils/useUpdateEffect";
+import { BaseTabs } from "../BaseTabs";
+import { BaseTab } from "../BaseTabs";
+import { Clickable } from "../Clickable";
+import { usePrevious } from "../../utils/usePrevious";
+/** Tabs functionality */
+export var 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 = useMemo(function () {
+    return flattenChildren(children).map(function (child) {
+      return {
+        child: child,
+        ref: /*#__PURE__*/createRef()
+      };
+    });
+  }, [children]);
+  var previousInitialTabIndex = usePrevious(initialTabIndex);
+  var _useState = useState(initialTabIndex),
+    _useState2 = _slicedToArray(_useState, 2),
+    activeTabIndex = _useState2[0],
+    setActiveTabIndex = _useState2[1];
+
+  // If the `initialTabIndex` changes; update the active one
+  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 = useRef(null);
+
+  // Scroll to active tab when `activeTabIndex` changes
+  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 = 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 = styled(Clickable).withConfig({
+  displayName: "Tabs__Container",
+  componentId: "sc-1kalvjm-0"
+})(["&:focus-visible{outline:none;z-index:2;box-shadow:inset 0 0 0 1px ", ";}"], themeGet("colors.blue100"));
+
+/** A tab bar navigation component */
+export var 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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BaseTabs, _extends({
+    ref: ref,
+    mb: mb
+  }, rest), tabs.map(function (tab, i) {
+    return /*#__PURE__*/React.createElement(Container, {
+      key: i,
+      ref: tab.ref,
+      "aria-selected": i === activeTabIndex,
+      onClick: handleClick(i),
+      flex: 1
+    }, /*#__PURE__*/React.createElement(BaseTab, {
+      active: i === activeTabIndex,
+      variant: "sm"
+    }, /*#__PURE__*/React.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.
+ */
+export var Tab = function Tab(_ref3) {
+  var children = _ref3.children;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+};
+//# sourceMappingURL=Tabs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","names":["React","createRef","useCallback","useEffect","useMemo","useRef","useState","styled","themeGet","flattenChildren","useUpdateEffect","BaseTabs","BaseTab","Clickable","usePrevious","useTabs","_ref","children","_ref$initialTabIndex","initialTabIndex","onChange","tabs","map","child","ref","previousInitialTabIndex","_useState","_useState2","_slicedToArray","activeTabIndex","setActiveTabIndex","safeActiveTabIndex","length","Math","min","_ref$current$scrollTo","_ref$current","current","tab","position","offsetLeft","scrollTo","call","left","behavior","handleClick","index","_tabs$index$child$pro","tabIndex","name","props","data","Container","withConfig","displayName","componentId","Tabs","_ref2","_tabs$activeTabIndex","_ref2$initialTabIndex","_ref2$mb","mb","rest","_objectWithoutProperties","_excluded","_useTabs","createElement","Fragment","_extends","i","key","onClick","flex","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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"}