@algolia/satellite 1.0.0-beta.14 → 1.0.0-beta.140

package/cjs/Pagination/DotPagination/DotPagination.js

@@ -0,0 +1,62 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.DotPagination = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _Satellite = require("../../Satellite");
+
+var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject, _templateObject2;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var DEFAULT_DOT_PAGINATION_LOCALE = {
+  goToPageText: function goToPageText(pageIdx) {
+    return "Go to page ".concat(pageIdx);
+  }
+};
+
+var DotPagination = function DotPagination(_ref) {
+  var currentPage = _ref.currentPage,
+      onChange = _ref.onChange,
+      nbPages = _ref.nbPages,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? "medium" : _ref$size,
+      propsLocale = _ref.locale;
+  var contextLocale = (0, _Satellite.useLocale)("dotPagination");
+
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_DOT_PAGINATION_LOCALE), contextLocale), propsLocale);
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+    className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex"]))),
+    children: new Array(nbPages).fill(undefined).map(function (_, idx) {
+      var pageIdx = idx + 1;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          "aria-label": locale.goToPageText(pageIdx),
+          className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n              rounded-full mx-1\n              ", "\n              ", "\n            "])), currentPage === pageIdx ? "bg-accent-600" : "bg-grey-200", size === "medium" ? "h-3 w-3" : "h-2 w-2"),
+          onClick: function onClick() {
+            return onChange(pageIdx);
+          }
+        })
+      }, idx);
+    })
+  });
+};
+
+exports.DotPagination = DotPagination;
+var _default = DotPagination;
+exports["default"] = _default;

package/cjs/Pagination/DotPagination/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./DotPagination";
+export { default } from "./DotPagination";

package/cjs/Pagination/DotPagination/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _DotPagination["default"];
+  }
+});
+
+var _DotPagination = _interopRequireWildcard(require("./DotPagination"));
+
+Object.keys(_DotPagination).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _DotPagination[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _DotPagination[key];
+    }
+  });
+});
+
+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; }

package/cjs/Pagination/Pagination/Pagination.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+export declare type PaginationLocale = {
+    goToPage?(page: number): string;
+    goToNextPage?: string;
+    goToPreviousPage?: string;
+};
+export interface PaginationProps {
+    nbPages: number;
+    currentPage: number;
+    maxButtons?: number;
+    onChange: (page: number) => void;
+    locale?: PaginationLocale;
+}
+/**
+ * Use pagination to help our users to move through an ordered collection of items.
+ *
+ * ## Best practices
+ * - Don't use on list with less than 20 items
+ * - Place the pagination at the bottom of the split item
+ */
+export declare const Pagination: ({ currentPage, nbPages, onChange, maxButtons: maxButtonsParam, locale: propsLocale, }: PaginationProps) => JSX.Element;
+export default Pagination;

package/cjs/Pagination/Pagination/Pagination.js

@@ -0,0 +1,149 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Pagination = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _reactFeather = require("react-feather");
+
+var _Button = _interopRequireWildcard(require("../../Button"));
+
+var _Satellite = require("../../Satellite");
+
+var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
+
+var _range = _interopRequireDefault(require("../../utils/range"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject;
+
+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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var DEFAULT_PAGINATION_LOCALE = {
+  goToPage: function goToPage(index) {
+    return "Go to page ".concat(index);
+  },
+  goToPreviousPage: "Go to previous page",
+  goToNextPage: "Go to next page"
+};
+var DEFAULT_MAX_BUTTONS = 10;
+
+var Ellipsis = function Ellipsis() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+    className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["pointer-events-none"]))),
+    tabIndex: -1,
+    "aria-disabled": true,
+    children: "\u2026"
+  });
+};
+
+var Group = function Group(_ref) {
+  var group = _ref.group,
+      currentPage = _ref.currentPage,
+      onChange = _ref.onChange,
+      goToPage = _ref.goToPage;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: group.map(function (index) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+        "aria-label": goToPage(index),
+        variant: index === currentPage ? "primary" : "neutral",
+        onClick: function onClick() {
+          return onChange(index);
+        },
+        children: index
+      }, index);
+    })
+  });
+};
+/**
+ * Use pagination to help our users to move through an ordered collection of items.
+ *
+ * ## Best practices
+ * - Don't use on list with less than 20 items
+ * - Place the pagination at the bottom of the split item
+ */
+
+
+var Pagination = function Pagination(_ref2) {
+  var currentPage = _ref2.currentPage,
+      nbPages = _ref2.nbPages,
+      onChange = _ref2.onChange,
+      _ref2$maxButtons = _ref2.maxButtons,
+      maxButtonsParam = _ref2$maxButtons === void 0 ? DEFAULT_MAX_BUTTONS : _ref2$maxButtons,
+      propsLocale = _ref2.locale;
+  var contextLocale = (0, _Satellite.useLocale)("pagination");
+
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_PAGINATION_LOCALE), contextLocale), propsLocale);
+
+  var padding = Math.floor((Math.min(nbPages, maxButtonsParam) - 1) / 2);
+  var maxButtons = 2 * padding + 1;
+  var currentPageGroupStart = Math.max(1, Math.min(currentPage - padding, nbPages - maxButtons));
+  var currentPageGroupEnd = Math.min(currentPageGroupStart + maxButtons, nbPages);
+  var groups = [[], (0, _range["default"])(currentPageGroupStart, currentPageGroupEnd + 1), []];
+
+  if (currentPageGroupStart > 1) {
+    groups[0].push(1);
+  }
+
+  if (currentPageGroupEnd < nbPages) {
+    groups[2].push(nbPages);
+  }
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.ButtonGroup, {
+    as: "nav",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+      "aria-label": locale.goToPreviousPage,
+      disabled: currentPage === 1,
+      onClick: function onClick() {
+        return onChange(currentPage - 1);
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFeather.ArrowLeft, {
+        size: "1em"
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Group, {
+      currentPage: currentPage,
+      onChange: onChange,
+      group: groups[0],
+      goToPage: locale.goToPage
+    }), groups[0].length !== 0 && groups[1][0] - groups[0][0] > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(Ellipsis, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Group, {
+      currentPage: currentPage,
+      onChange: onChange,
+      group: groups[1],
+      goToPage: locale.goToPage
+    }), groups[2].length !== 0 && groups[2][0] - groups[1][groups[1].length - 1] > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(Ellipsis, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Group, {
+      currentPage: currentPage,
+      onChange: onChange,
+      group: groups[2],
+      goToPage: locale.goToPage
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+      "aria-label": locale.goToNextPage,
+      disabled: currentPage === nbPages,
+      onClick: function onClick() {
+        return onChange(currentPage + 1);
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFeather.ArrowRight, {
+        size: "1em"
+      })
+    })]
+  });
+};
+
+exports.Pagination = Pagination;
+var _default = Pagination;
+exports["default"] = _default;

package/cjs/Pagination/Pagination/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _Pagination["default"];
+  }
+});
+
+var _Pagination = _interopRequireWildcard(require("./Pagination"));
+
+Object.keys(_Pagination).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Pagination[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Pagination[key];
+    }
+  });
+});
+
+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; }

package/cjs/Pagination/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./Pagination";
+export * from "./DotPagination";
+export * from "./CompactPagination";
+export { default } from "./Pagination";

package/cjs/Pagination/index.js

@@ -0,0 +1,60 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _Pagination["default"];
+  }
+});
+
+var _Pagination = _interopRequireWildcard(require("./Pagination"));
+
+Object.keys(_Pagination).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Pagination[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Pagination[key];
+    }
+  });
+});
+
+var _DotPagination = require("./DotPagination");
+
+Object.keys(_DotPagination).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _DotPagination[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _DotPagination[key];
+    }
+  });
+});
+
+var _CompactPagination = require("./CompactPagination");
+
+Object.keys(_CompactPagination).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _CompactPagination[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _CompactPagination[key];
+    }
+  });
+});
+
+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; }

package/cjs/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,13 @@
+import type { HTMLAttributes } from "react";
+export interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> {
+    barClassName?: string;
+    value: number;
+}
+/**
+ * Progress bars visually represent the completion of a task or operation.
+ *
+ * - Progress bars show an indication of how much of the task has been completed and how much is still left.
+ * - You should indicate either a percentage or other numeric values (such as - 234/4092 queries processed)
+ */
+export declare const ProgressBar: ({ value, className, barClassName, ...props }: ProgressBarProps) => JSX.Element;
+export default ProgressBar;

package/cjs/ProgressBar/ProgressBar.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.ProgressBar = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject, _templateObject2;
+
+var _excluded = ["value", "className", "barClassName"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+/**
+ * Progress bars visually represent the completion of a task or operation.
+ *
+ * - Progress bars show an indication of how much of the task has been completed and how much is still left.
+ * - You should indicate either a percentage or other numeric values (such as - 234/4092 queries processed)
+ */
+var ProgressBar = function ProgressBar(_ref) {
+  var value = _ref.value,
+      className = _ref.className,
+      barClassName = _ref.barClassName,
+      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, props), {}, {
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["progress-bar"]))), className),
+    role: "progressbar",
+    "aria-valuenow": value,
+    "aria-valuemin": 0,
+    "aria-valuemax": 100,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["progress-bar-progress"]))), barClassName),
+      style: {
+        width: "".concat(value, "%"),
+        transition: "all 150ms ease-in-out"
+      }
+    })
+  }));
+};
+
+exports.ProgressBar = ProgressBar;
+var _default = ProgressBar;
+exports["default"] = _default;

package/cjs/ProgressBar/ProgressBar.tailwind.d.ts

@@ -0,0 +1,5 @@
+export = progressBarPlugin;
+declare const progressBarPlugin: {
+    handler: import("tailwindcss/types/config").PluginCreator;
+    config?: import("tailwindcss").Config | undefined;
+};

package/cjs/ProgressBar/ProgressBar.tailwind.js

@@ -0,0 +1,27 @@
+"use strict";
+
+// @ts-check
+var plugin = require("tailwindcss/plugin");
+
+var rgba = require("../styles/rgba");
+
+var progressBarPlugin = plugin(function (_ref) {
+  var addComponents = _ref.addComponents,
+      theme = _ref.theme;
+  addComponents({
+    ".progress-bar": {
+      height: "4px",
+      width: "100%",
+      display: "block",
+      overflow: "hidden",
+      background: theme("colors.grey.100"),
+      boxShadow: "\n        inset 0px 1px 3px 0px ".concat(rgba(theme("colors.black"), 0.1), ",\n        0px 0.5px 0px 0px ").concat(rgba(theme("colors.white"), 0.05), "\n      "),
+      borderRadius: "4px"
+    },
+    ".progress-bar-progress": {
+      height: "100%",
+      background: theme("colors.accent.600")
+    }
+  });
+});
+module.exports = progressBarPlugin;

package/cjs/ProgressBar/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./ProgressBar";
+export { default } from "./ProgressBar";

package/cjs/ProgressBar/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _ProgressBar["default"];
+  }
+});
+
+var _ProgressBar = _interopRequireWildcard(require("./ProgressBar"));
+
+Object.keys(_ProgressBar).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ProgressBar[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _ProgressBar[key];
+    }
+  });
+});
+
+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; }

package/cjs/ProgressSpinner/ProgressSpinner.d.ts

@@ -0,0 +1,9 @@
+import type { SVGAttributes } from "react";
+export declare type ProgressSpinnerAlign = "left" | "center" | "right";
+export interface ProgressSpinnerProps extends SVGAttributes<SVGSVGElement> {
+    size?: number;
+    thickness?: number;
+    align?: ProgressSpinnerAlign;
+}
+export declare const ProgressSpinner: ({ className, size, thickness, align, ...svgProps }: ProgressSpinnerProps) => JSX.Element;
+export default ProgressSpinner;

package/cjs/ProgressSpinner/ProgressSpinner.js

@@ -0,0 +1,66 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.ProgressSpinner = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _excluded = ["className", "size", "thickness", "align"];
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var ALIGN_CLASSNAMES = {
+  left: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["mr-auto"]))),
+  center: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["m-auto"]))),
+  right: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["ml-auto"])))
+}; // Took heavy inspiration from https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/CircularProgress/CircularProgress.js
+
+var ProgressSpinner = function ProgressSpinner(_ref) {
+  var className = _ref.className,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 24 : _ref$size,
+      _ref$thickness = _ref.thickness,
+      thickness = _ref$thickness === void 0 ? 2 : _ref$thickness,
+      align = _ref.align,
+      svgProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", _objectSpread(_objectSpread({}, svgProps), {}, {
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["progress-spinner"]))), align && ALIGN_CLASSNAMES[align], className),
+    viewBox: "".concat(size / 2, " ").concat(size / 2, " ").concat(size, " ").concat(size),
+    width: size,
+    height: size,
+    role: "status",
+    "aria-busy": true,
+    "aria-live": "polite",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("title", {
+      children: "Loading spinner"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
+      cx: size,
+      cy: size,
+      r: (size - thickness) / 2,
+      fill: "none",
+      strokeWidth: thickness
+    })]
+  }));
+};
+
+exports.ProgressSpinner = ProgressSpinner;
+var _default = ProgressSpinner;
+exports["default"] = _default;

package/cjs/ProgressSpinner/ProgressSpinner.tailwind.d.ts

@@ -0,0 +1,5 @@
+export = progressSpinnerPlugin;
+declare const progressSpinnerPlugin: {
+    handler: import("tailwindcss/types/config").PluginCreator;
+    config?: import("tailwindcss").Config | undefined;
+};

package/cjs/ProgressSpinner/ProgressSpinner.tailwind.js

@@ -0,0 +1,37 @@
+"use strict";
+
+// @ts-check
+var plugin = require("tailwindcss/plugin");
+
+var progressSpinnerPlugin = plugin(function (_ref) {
+  var addComponents = _ref.addComponents,
+      theme = _ref.theme;
+
+  /**
+   * @param {string} color
+   */
+  addComponents({
+    ".progress-spinner": {
+      color: theme("colors.accent.600"),
+      stroke: "currentColor",
+      animation: "stl-spinner 1.4s linear infinite"
+    },
+    "@keyframes stl-spinner": {
+      "0%": {
+        transform: "rotate(0deg)",
+        strokeDasharray: "1px, 200px",
+        strokeDashoffset: "0px"
+      },
+      "50%": {
+        strokeDasharray: "100px, 200px",
+        strokeDashoffset: "-15px"
+      },
+      "100%": {
+        transform: "rotate(360deg)",
+        strokeDasharray: "100px, 200px",
+        strokeDashoffset: "-125px"
+      }
+    }
+  });
+});
+module.exports = progressSpinnerPlugin;

package/cjs/ProgressSpinner/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./ProgressSpinner";
+export { default } from "./ProgressSpinner";