@algolia/satellite 1.0.0-beta.17 → 1.0.0-beta.170

package/cjs/Tables/DataTable/components/Loader.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Loader = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _EmptyState = _interopRequireDefault(require("../../../EmptyState"));
+var _ProgressSpinner = _interopRequireDefault(require("../../../ProgressSpinner"));
+var _satellitePrefixer = _interopRequireDefault(require("../../../styles/helpers/satellitePrefixer"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject;
+var Loader = exports.Loader = function Loader(_ref) {
+  var className = _ref.className,
+    locale = _ref.locale;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    showLoadMessage = _useState2[0],
+    setShowLoadMessage = _useState2[1];
+  (0, _react.useEffect)(function () {
+    // See https://github.com/algolia/AlgoliaWeb/blob/develop/_client/src/common/components/AsyncWrapper/AsyncWrapper.tsx#L56
+    var loadTimer = setTimeout(function () {
+      return setShowLoadMessage(true);
+    }, 5000);
+    return function () {
+      clearTimeout(loadTimer);
+      setShowLoadMessage(false);
+    };
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: className,
+    children: showLoadMessage ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_EmptyState["default"], {
+      usageContext: "result",
+      leadIllustration: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex justify-center"]))),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressSpinner["default"], {})
+      }),
+      title: locale.loadingTitle,
+      description: locale.loadingDescription,
+      centered: true
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressSpinner["default"], {})
+  });
+};
+var _default = exports["default"] = Loader;

package/cjs/Tables/DataTable/components/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./Header";
+export * from "./HeaderCell";
+export * from "./Body";
+export * from "./Footer";
+export * from "./Loader";

package/cjs/Tables/DataTable/components/index.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Header = require("./Header");
+Object.keys(_Header).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Header[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Header[key];
+    }
+  });
+});
+var _HeaderCell = require("./HeaderCell");
+Object.keys(_HeaderCell).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _HeaderCell[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _HeaderCell[key];
+    }
+  });
+});
+var _Body = require("./Body");
+Object.keys(_Body).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Body[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Body[key];
+    }
+  });
+});
+var _Footer = require("./Footer");
+Object.keys(_Footer).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Footer[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Footer[key];
+    }
+  });
+});
+var _Loader = require("./Loader");
+Object.keys(_Loader).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Loader[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Loader[key];
+    }
+  });
+});

package/cjs/Tables/DataTable/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./DataTable";
+export * from "./types";
+export { default } from "./DataTable";

package/cjs/Tables/DataTable/index.js

@@ -0,0 +1,39 @@
+"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 _DataTable["default"];
+  }
+});
+var _DataTable = _interopRequireWildcard(require("./DataTable"));
+Object.keys(_DataTable).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _DataTable[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _DataTable[key];
+    }
+  });
+});
+var _types = require("./types");
+Object.keys(_types).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _types[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _types[key];
+    }
+  });
+});
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }

package/cjs/Tables/DataTable/types.d.ts

@@ -0,0 +1,63 @@
+import type { ComponentType } from "react";
+export declare type Status = "loading" | "error" | "success";
+export declare type SelectMode = "single" | "multi" | "none";
+export declare type SortingDirection = "asc" | "desc" | "none";
+export declare type Sorting = [columnId: string, direction: SortingDirection];
+export declare type GetItemId<Item> = string | ((item: Item, idx: number) => string);
+export interface Row<Item> {
+    /** The item for the given row */
+    item: Item;
+    /** The row id */
+    id: string;
+    /** Is the row hovered? */
+    hovered: boolean;
+    /** Is the row selected? */
+    selected: boolean;
+    /** Can the row be selected? */
+    selectable: boolean;
+}
+export interface CellProps<Item> {
+    /** The value of the given cell */
+    value: any;
+    /**
+     * The row of the cell, which lets you access other keys
+     * Useful for example when you want to calculate a sum of values in a column
+     */
+    row: Row<Item>;
+    /** The column of the given cell */
+    column: AdvancedColumnDefinition<Item>;
+}
+export interface HeaderProps<Item> {
+    /** The column of the given header */
+    column: AdvancedColumnDefinition<Item>;
+}
+export interface AdvancedColumnDefinition<Item> {
+    /** The ID of the column - Should be unique */
+    id: string;
+    /** A string or a function which determines how to get the column data */
+    accessor: string | ((item: Item) => any);
+    sort?: boolean;
+    Header?: ComponentType<HeaderProps<Item>> | string | false;
+    Cell?: ComponentType<CellProps<Item>>;
+    /** @ignore */
+    className?: string;
+}
+/** A column can be defined as a `string`, or as an `AdvancedColumnDefinition` in more complex cases */
+export declare type ColumnDefinition<Item> = string | AdvancedColumnDefinition<Item>;
+export interface IndeterminatePagination {
+    currentPage: number;
+    itemsPerPage: number;
+    isLastPage?: boolean;
+}
+export interface DeterminatePagination {
+    currentPage: number;
+    itemsPerPage: number;
+    totalItemsCount: number;
+}
+export declare type PaginationConfiguration = false | IndeterminatePagination | DeterminatePagination;
+export interface DataConfiguration {
+    /** The current pagination configuration */
+    pagination: PaginationConfiguration;
+    /** The current sorting configuration */
+    sorting: Sorting[];
+}

package/cjs/Tables/DataTable/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/cjs/Tables/DataTable/utils.d.ts

@@ -0,0 +1,4 @@
+import type { AdvancedColumnDefinition, DeterminatePagination, IndeterminatePagination, PaginationConfiguration, Row } from "./types";
+export declare const isDeterminatePagination: (pagination: PaginationConfiguration) => pagination is DeterminatePagination;
+export declare const isIndeterminatePagination: (pagination: PaginationConfiguration) => pagination is IndeterminatePagination;
+export declare const getCellValue: <Item extends {}>(column: AdvancedColumnDefinition<Item>, row: Row<Item>) => any;

package/cjs/Tables/DataTable/utils.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isIndeterminatePagination = exports.isDeterminatePagination = exports.getCellValue = void 0;
+var _get = _interopRequireDefault(require("lodash/get"));
+var isDeterminatePagination = exports.isDeterminatePagination = function isDeterminatePagination(pagination) {
+  return pagination !== false && "totalItemsCount" in pagination;
+};
+var isIndeterminatePagination = exports.isIndeterminatePagination = function isIndeterminatePagination(pagination) {
+  return pagination !== false && !("totalItemsCount" in pagination) && "currentPage" in pagination && typeof pagination.currentPage === "number";
+};
+var getCellValue = exports.getCellValue = function getCellValue(column, row) {
+  if (typeof column.accessor === "string") {
+    return (0, _get["default"])(row.item, column.accessor);
+  }
+  return column.accessor(row.item);
+};

package/cjs/Tables/Table/Table.d.ts

@@ -0,0 +1,28 @@
+import type { DetailedHTMLProps, ReactNode, TableHTMLAttributes, VFC } from "react";
+export interface TableProps extends DetailedHTMLProps<TableHTMLAttributes<HTMLTableElement>, HTMLTableElement> {
+    footer?: ReactNode;
+    smallFooter?: boolean;
+    hasActions?: boolean;
+    highlight?: boolean;
+}
+/**
+ * Tables are used to structure content in a grid to make it easier to see relationships and to facilitate understanding.
+ *
+ * #### Do
+ *
+ * - Organize columns and rows based on the needs of your users. To help people read the table, order the columns by importance from left to right, with the key pieces of content opening the row
+ * - Include units of measurement symbols in the header so you don't need to repeat them throughout the columns
+ * - Indicate sorting capabilities of a column with a chevron in the cell header
+ * - Start by columns with highest value to the user, and continue with less important ones
+ *
+ * #### Do not
+ *
+ * - Center align text in cells
+ *
+ * ## Best practices
+ *
+ * - If a cell is empty or unavailable, keep the cell empty to reduce noise and help with legibility.
+ * - Truncate long text to make it fit into a cell. However, choose column width wisely based on expected values, and adjust the table accordingly
+ */
+export declare const Table: VFC<TableProps>;
+export default Table;

package/cjs/Tables/Table/Table.js

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Table = 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 _TableFooter = _interopRequireDefault(require("./components/TableFooter"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2, _templateObject3;
+var _excluded = ["className", "footer", "smallFooter", "hasActions", "highlight"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * Tables are used to structure content in a grid to make it easier to see relationships and to facilitate understanding.
+ *
+ * #### Do
+ *
+ * - Organize columns and rows based on the needs of your users. To help people read the table, order the columns by importance from left to right, with the key pieces of content opening the row
+ * - Include units of measurement symbols in the header so you don't need to repeat them throughout the columns
+ * - Indicate sorting capabilities of a column with a chevron in the cell header
+ * - Start by columns with highest value to the user, and continue with less important ones
+ *
+ * #### Do not
+ *
+ * - Center align text in cells
+ *
+ * ## Best practices
+ *
+ * - If a cell is empty or unavailable, keep the cell empty to reduce noise and help with legibility.
+ * - Truncate long text to make it fit into a cell. However, choose column width wisely based on expected values, and adjust the table accordingly
+ */
+var Table = exports.Table = function Table(_ref) {
+  var className = _ref.className,
+    footer = _ref.footer,
+    _ref$smallFooter = _ref.smallFooter,
+    smallFooter = _ref$smallFooter === void 0 ? false : _ref$smallFooter,
+    hasActions = _ref.hasActions,
+    _ref$highlight = _ref.highlight,
+    highlight = _ref$highlight === void 0 ? true : _ref$highlight,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["rounded text-grey-900 bg-white display-body"]))), className),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["overflow-x-auto"]))),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("table", _objectSpread(_objectSpread({}, props), {}, {
+        className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["table ", " ", ""])), hasActions && "table-with-actions", highlight && "table-with-highlight")
+      }))
+    }), !!footer && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TableFooter["default"], {
+      size: smallFooter ? "small" : "default",
+      children: footer
+    })]
+  });
+};
+var _default = exports["default"] = Table;

package/cjs/Tables/Table/Table.tailwind.d.ts

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

package/cjs/Tables/Table/Table.tailwind.js

@@ -0,0 +1,39 @@
+"use strict";
+
+// purgecss whitelist: th, td, tr
+var plugin = require("tailwindcss/plugin");
+var tablePlugin = plugin(function (_ref) {
+  var addComponents = _ref.addComponents,
+    theme = _ref.theme;
+  addComponents({
+    ".table": {
+      width: "100%",
+      borderCollapse: "collapse",
+      textAlign: "left",
+      "th, td": {
+        padding: "14px 16px"
+      },
+      thead: {
+        backgroundColor: theme("colors.grey.50")
+      },
+      th: {
+        borderBottom: "1px solid ".concat(theme("colors.grey.200")),
+        fontWeight: "normal"
+      },
+      "tr:not(:last-child) td": {
+        borderBottom: "1px solid ".concat(theme("colors.grey.100"))
+      }
+    },
+    ".table-with-actions": {
+      "th:last-of-type, td:last-of-type": {
+        textAlign: "right"
+      }
+    },
+    ".table-with-highlight": {
+      "tr:hover td": {
+        backgroundColor: theme("colors.grey.50")
+      }
+    }
+  });
+});
+module.exports = tablePlugin;

package/cjs/Tables/Table/components/TableFooter.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode, VFC } from "react";
+export declare type FooterSizes = "default" | "small";
+export interface FooterProps {
+    size?: FooterSizes;
+    children?: ReactNode;
+}
+export declare const TableFooter: VFC<FooterProps>;
+export default TableFooter;

package/cjs/Tables/Table/components/TableFooter.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.TableFooter = void 0;
+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 _templateObject, _templateObject2, _templateObject3;
+var TableFooter = exports.TableFooter = function TableFooter(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "default" : _ref$size,
+    children = _ref.children;
+  var SIZE_CLASSNAMES = {
+    "default": (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["py-3 px-4"]))),
+    small: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["py-1 px-4"])))
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["bg-grey-100 border-t border-grey-200 text-grey-600 flex items-center justify-center"]))), SIZE_CLASSNAMES[size]),
+    children: children
+  });
+};
+var _default = exports["default"] = TableFooter;

package/cjs/Tables/Table/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./Table";
+export * from "./components/TableFooter";
+export { default } from "./Table";

package/cjs/Tables/Table/index.js

@@ -0,0 +1,39 @@
+"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 _Table["default"];
+  }
+});
+var _Table = _interopRequireWildcard(require("./Table"));
+Object.keys(_Table).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Table[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Table[key];
+    }
+  });
+});
+var _TableFooter = require("./components/TableFooter");
+Object.keys(_TableFooter).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _TableFooter[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _TableFooter[key];
+    }
+  });
+});
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }

package/cjs/Tables/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./Table";
+export * from "./DataTable";
+export { default } from "./Table";

package/cjs/Tables/index.js

@@ -0,0 +1,39 @@
+"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 _Table["default"];
+  }
+});
+var _Table = _interopRequireWildcard(require("./Table"));
+Object.keys(_Table).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Table[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Table[key];
+    }
+  });
+});
+var _DataTable = require("./DataTable");
+Object.keys(_DataTable).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _DataTable[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _DataTable[key];
+    }
+  });
+});
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }

package/cjs/Tabs/ContentTabs.d.ts

@@ -0,0 +1,4 @@
+import type { VFC } from "react";
+import type { ContentTabsProps } from "./types";
+export declare const ContentTabs: VFC<ContentTabsProps>;
+export default ContentTabs;

package/cjs/Tabs/ContentTabs.js

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.ContentTabs = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _reactTabs = require("@radix-ui/react-tabs");
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Badge = _interopRequireDefault(require("../Badge"));
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _utils = require("./utils");
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var ContentTabs = exports.ContentTabs = function ContentTabs(_ref) {
+  var className = _ref.className,
+    tabs = _ref.tabs,
+    tabIndex = _ref.tabIndex,
+    _ref$defaultIndex = _ref.defaultIndex,
+    defaultIndex = _ref$defaultIndex === void 0 ? 0 : _ref$defaultIndex,
+    onChange = _ref.onChange;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactTabs.Tabs, {
+    value: typeof tabIndex !== "undefined" ? String(tabIndex) : undefined,
+    defaultValue: typeof defaultIndex !== "undefined" ? String(defaultIndex) : undefined,
+    onValueChange: function onValueChange(value) {
+      return onChange === null || onChange === void 0 ? void 0 : onChange(Number(value));
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTabs.TabsList, {
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["tabs-tabbar border-b border-grey-200 flex overflow-x-auto whitespace-nowrap space-x-6"]))), className),
+      children: tabs.map(function (_ref2, index) {
+        var _ref2$variant = _ref2.variant,
+          variant = _ref2$variant === void 0 ? "accent" : _ref2$variant,
+          className = _ref2.className,
+          disabled = _ref2.disabled,
+          label = _ref2.label,
+          value = _ref2.value;
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactTabs.TabsTrigger, {
+          value: String(index),
+          disabled: disabled,
+          className: (0, _clsx["default"])(_utils.ACTIVE_UNDERLINE_VARIANT_CLASSNAMES[variant], (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["tab pb-3 text-base leading-sm"]))), className),
+          children: [label, !!value && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge["default"], {
+            size: "small",
+            variant: variant,
+            className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["ml-2"]))),
+            children: value
+          })]
+        }, index);
+      })
+    }), tabs.map(function (_ref3, index) {
+      var content = _ref3.content;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTabs.TabsContent, {
+        value: String(index),
+        className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["focus:outline-none"]))),
+        children: content
+      }, index);
+    })]
+  });
+};
+var _default = exports["default"] = ContentTabs;

package/cjs/Tabs/LinkTabs.d.ts

@@ -0,0 +1,33 @@
+import type { VFC } from "react";
+import type { LinkTabsProps, UrlMatcher } from "./types";
+export declare const defaultUrlMatcher: UrlMatcher;
+/**
+ * Tabs are an easy way to organize content by grouping similar information on the same page. Use them to help users navigate between related views within the same context, especially when the number of views may be more than 3.
+ *
+ * #### 3 core elements
+ * - **Selected**: currently active tab
+ * - **Unselected**: other available tabs
+ * - **Divider**: separates the tab navigation and content
+ *
+ * #### With badges
+ * Use when you have to indicate the number of performed actions or operations as well as their status, e.g. success, error, failure
+ *
+ * ## Content guidelines
+ * - Make them clear to help differentiate the sections beneath
+ * - Write short tab labels and use plain language, rather than made-up terms. Tab labels should usually be 1–2 words
+ * - Do not use ALL CAPS for tab labels. ALL CAPS is rarely a good idea because it's harder to read
+ *
+ * ## Usability best practices
+ * #### Do
+ * - Use tabs to alternate between views within the same context
+ * - Logically chunk the content behind the tabs so users can easily predict what they'll find when they select a given tab
+ * - Use tabs only when users don't need to see content from multiple tabs simultaneously or compare the info behind different tabs
+ *
+ * #### Do not
+ * - Use tabs to navigate to different context areas
+ * - Use tabs for primary navigation
+ * - Use more than one row of tabs. Multiple rows create jumping UI elements, which make it impossible for users to remember which tabs they've already visited
+ * - Place the tab on the sides or bottom of the page, where users often overlook them
+ */
+export declare const LinkTabs: VFC<LinkTabsProps>;
+export default LinkTabs;