@algolia/satellite 1.0.0-v3.99 → 1.0.0

package/dist/esm/Tables/DataTable/components/Body.js

@@ -0,0 +1,111 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+var _templateObject, _templateObject2, _templateObject3;
+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) { _defineProperty(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; }
+import { EmptyState } from "../../../EmptyState";
+import stl from "../../../styles/helpers/satellitePrefixer";
+import { getCellValue } from "../utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+export var DataTableBody = function DataTableBody(_ref) {
+  var rows = _ref.rows,
+    columns = _ref.columns,
+    status = _ref.status,
+    noDataContent = _ref.noDataContent,
+    errorContent = _ref.errorContent,
+    selectMode = _ref.selectMode,
+    _ref$selection = _ref.selection,
+    selection = _ref$selection === void 0 ? [] : _ref$selection,
+    onSelectionChange = _ref.onSelectionChange,
+    onRowHoverChange = _ref.onRowHoverChange,
+    _ref$canHoverRow = _ref.canHoverRow,
+    canHoverRow = _ref$canHoverRow === void 0 ? function () {
+      return true;
+    } : _ref$canHoverRow,
+    locale = _ref.locale;
+  var handleRowSelection = function handleRowSelection(row) {
+    if (!onSelectionChange) return;
+    var rowId = row.id;
+    var isSelected = selection.includes(rowId);
+    var newSelection = isSelected ? selection.filter(function (id) {
+      return id !== rowId;
+    }) : selectMode === "multi" ? [].concat(_toConsumableArray(selection), [rowId]) : [rowId];
+    onSelectionChange(newSelection);
+  };
+  var additionalRowProps = function additionalRowProps(row) {
+    return _objectSpread(_objectSpread({}, canHoverRow(row) ? {
+      onMouseEnter: function onMouseEnter() {
+        return onRowHoverChange(row);
+      },
+      onMouseLeave: function onMouseLeave() {
+        return onRowHoverChange(null);
+      },
+      className: "hoverable"
+    } : {
+      className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["row-disabled"])))
+    }), row.selectable && {
+      onClick: function onClick() {
+        return handleRowSelection(row);
+      }
+    });
+  };
+  if (status === "error") {
+    return /*#__PURE__*/_jsx("tbody", {
+      children: /*#__PURE__*/_jsx("tr", {
+        children: /*#__PURE__*/_jsx("td", {
+          colSpan: columns.length,
+          children: /*#__PURE__*/_jsx("span", {
+            className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flex justify-center py-6"]))),
+            children: errorContent || /*#__PURE__*/_jsx(EmptyState, {
+              title: locale.errorTitle,
+              description: locale.errorDescription,
+              centered: true,
+              usageContext: "result"
+            })
+          })
+        })
+      })
+    });
+  }
+  if (rows.length === 0 && status !== "loading") {
+    return /*#__PURE__*/_jsx("tbody", {
+      children: /*#__PURE__*/_jsx("tr", {
+        children: /*#__PURE__*/_jsx("td", {
+          colSpan: columns.length,
+          children: /*#__PURE__*/_jsx("span", {
+            className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["flex justify-center py-6"]))),
+            children: noDataContent || /*#__PURE__*/_jsx(EmptyState, {
+              title: locale.noDataTitle,
+              description: locale.noDataDescription,
+              centered: true,
+              usageContext: "result"
+            })
+          })
+        })
+      })
+    });
+  }
+  return /*#__PURE__*/_jsx("tbody", {
+    children: rows.map(function (row, rowIndex) {
+      return /*#__PURE__*/_createElement("tr", _objectSpread(_objectSpread({}, additionalRowProps(row)), {}, {
+        key: rowIndex
+      }), columns.map(function (column) {
+        var value = getCellValue(column, row);
+        var Cell = column.Cell;
+        return Cell ? /*#__PURE__*/_jsx("td", {
+          className: column === null || column === void 0 ? void 0 : column.className,
+          children: /*#__PURE__*/_jsx(Cell, {
+            row: rows[rowIndex],
+            column: column,
+            value: value
+          })
+        }, column.id) : /*#__PURE__*/_jsx("td", {
+          className: column === null || column === void 0 ? void 0 : column.className,
+          children: value !== null && value !== void 0 ? value : "-"
+        }, column.id);
+      }));
+    })
+  });
+};

package/dist/esm/Tables/DataTable/components/Footer.d.ts

@@ -0,0 +1,7 @@
+import type { VFC } from "react";
+import type { DataConfiguration, PaginationConfiguration } from "../types";
+export interface DataTableFooterProps {
+    pagination: PaginationConfiguration;
+    onChange(dataConfiguration: DataConfiguration): void;
+}
+export declare const DataTableFooter: VFC<DataTableFooterProps>;

package/dist/esm/Tables/DataTable/components/Footer.js

@@ -0,0 +1,52 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(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; }
+import { CompactPagination, Pagination } from "../../../Pagination";
+import { isDeterminatePagination, isIndeterminatePagination } from "../utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var DataTableFooter = function DataTableFooter(_ref) {
+  var pagination = _ref.pagination,
+    onChange = _ref.onChange;
+  return isDeterminatePagination(pagination) ? /*#__PURE__*/_jsx(Pagination, {
+    nbPages: Math.ceil(pagination.totalItemsCount / pagination.itemsPerPage),
+    currentPage: pagination.currentPage,
+    maxButtons: 8,
+    onChange: function (_onChange) {
+      function onChange(_x) {
+        return _onChange.apply(this, arguments);
+      }
+      onChange.toString = function () {
+        return _onChange.toString();
+      };
+      return onChange;
+    }(function (page) {
+      return onChange({
+        pagination: _objectSpread(_objectSpread({}, pagination), {}, {
+          currentPage: page
+        }),
+        sorting: []
+      });
+    })
+  }) : isIndeterminatePagination(pagination) ? /*#__PURE__*/_jsx(CompactPagination, {
+    label: "compact",
+    currentPage: pagination.currentPage,
+    showGoToFirstPage: true,
+    nextDisabled: pagination.isLastPage,
+    onChange: function (_onChange2) {
+      function onChange(_x2) {
+        return _onChange2.apply(this, arguments);
+      }
+      onChange.toString = function () {
+        return _onChange2.toString();
+      };
+      return onChange;
+    }(function (page) {
+      return onChange({
+        pagination: _objectSpread(_objectSpread({}, pagination), {}, {
+          currentPage: page
+        }),
+        sorting: []
+      });
+    })
+  }) : null;
+};

package/dist/esm/Tables/DataTable/components/Header.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { AdvancedColumnDefinition, Sorting, SortingDirection } from "../types";
+export interface DataTableHeaderProps<Item> {
+    columns: AdvancedColumnDefinition<Item>[];
+    sorting?: Sorting[];
+    onToggleSort: (columnId: string, direction: SortingDirection) => void;
+    disabled?: boolean;
+}
+export declare const DataTableHeader: <Item extends {}>({ columns, sorting, onToggleSort, disabled, }: DataTableHeaderProps<Item>) => JSX.Element;

package/dist/esm/Tables/DataTable/components/Header.js

@@ -0,0 +1,31 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { DataTableHeaderCell } from "./HeaderCell";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var DataTableHeader = function DataTableHeader(_ref) {
+  var columns = _ref.columns,
+    _ref$sorting = _ref.sorting,
+    sorting = _ref$sorting === void 0 ? [] : _ref$sorting,
+    onToggleSort = _ref.onToggleSort,
+    disabled = _ref.disabled;
+  return /*#__PURE__*/_jsx("thead", {
+    children: /*#__PURE__*/_jsx("tr", {
+      children: columns.map(function (column) {
+        var Header = column.Header;
+        var sortingDirection = sorting.find(function (_ref2) {
+          var _ref3 = _slicedToArray(_ref2, 1),
+            colId = _ref3[0];
+          return colId === column.id;
+        }) || [null];
+        return /*#__PURE__*/_jsx(DataTableHeaderCell, {
+          column: column,
+          disabled: disabled,
+          sortingDirection: sortingDirection[1],
+          onToggleSort: onToggleSort,
+          children: !Header ? null : typeof Header === "string" ? Header : /*#__PURE__*/_jsx(Header, {
+            column: column
+          })
+        }, column.id);
+      })
+    })
+  });
+};

package/dist/esm/Tables/DataTable/components/HeaderCell.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { AdvancedColumnDefinition, SortingDirection } from "../types";
+export interface DataTableHeaderCellProps<Item> extends HTMLAttributes<HTMLTableCellElement> {
+    column: AdvancedColumnDefinition<Item>;
+    disabled?: boolean;
+    isSortingEnabled?: boolean;
+    sortingDirection?: SortingDirection;
+    onToggleSort: (columnId: string, sortingDirection: SortingDirection) => void;
+    children: ReactNode;
+}
+export declare const DataTableHeaderCell: <Item extends {}>({ sortingDirection, onToggleSort, column: { id, className, sort }, disabled, children, ...props }: DataTableHeaderCellProps<Item>) => JSX.Element;

package/dist/esm/Tables/DataTable/components/HeaderCell.js

@@ -0,0 +1,51 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _excluded = ["sortingDirection", "onToggleSort", "column", "disabled", "children"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+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) { _defineProperty(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; }
+import cx from "clsx";
+import { ChevronDownIcon, ChevronUpIcon } from "../../../Icons";
+import stl from "../../../styles/helpers/satellitePrefixer";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var iconClassName = stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["h-4 inline ml-1"])));
+export var DataTableHeaderCell = function DataTableHeaderCell(_ref) {
+  var _ref$sortingDirection = _ref.sortingDirection,
+    sortingDirection = _ref$sortingDirection === void 0 ? "none" : _ref$sortingDirection,
+    onToggleSort = _ref.onToggleSort,
+    _ref$column = _ref.column,
+    id = _ref$column.id,
+    className = _ref$column.className,
+    _ref$column$sort = _ref$column.sort,
+    sort = _ref$column$sort === void 0 ? false : _ref$column$sort,
+    disabled = _ref.disabled,
+    children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var InternalCellComponent = sort && !disabled ? "button" : "span";
+  var handleSorting = function handleSorting() {
+    if (disabled) return;
+    onToggleSort(id, sortingDirection === "desc" ? "asc" : sortingDirection === "asc" ? "none" : "desc");
+  };
+  var sortButtonProps = sort ? {
+    onClick: function onClick() {
+      return handleSorting();
+    },
+    className: disabled ? stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["cursor-not-allowed"]))) : stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["cursor-pointer"])))
+  } : {};
+  return /*#__PURE__*/_jsx("th", _objectSpread(_objectSpread({}, props), {}, {
+    "aria-sort": sortingDirection === "desc" ? "descending" : sortingDirection === "asc" ? "ascending" : "none",
+    className: className,
+    children: /*#__PURE__*/_jsxs(InternalCellComponent, _objectSpread(_objectSpread({}, sortButtonProps), {}, {
+      className: cx(stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["group/cell px-4 py-[14px] inline-flex items-center focus:outline-none focus:text-accent-600"]))), sortButtonProps.className),
+      children: [children, sort ? sortingDirection === "desc" ? /*#__PURE__*/_jsx(ChevronDownIcon, {
+        className: iconClassName
+      }) : sortingDirection === "asc" ? /*#__PURE__*/_jsx(ChevronUpIcon, {
+        className: iconClassName
+      }) : /*#__PURE__*/_jsx(ChevronDownIcon, {
+        className: cx(iconClassName, stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["text-grey-300 invisible group-hover/cell:visible group-focus/cell:visible"]))))
+      }) : null]
+    }))
+  }));
+};

package/dist/esm/Tables/DataTable/components/Loader.d.ts

@@ -0,0 +1,8 @@
+import type { VFC } from "react";
+import type { DataTableLocale } from "../DataTable";
+export interface DataTableLoaderProps {
+    /** @ignore */
+    className?: string;
+    locale: Required<DataTableLocale>;
+}
+export declare const DataTableLoader: VFC<DataTableLoaderProps>;

package/dist/esm/Tables/DataTable/components/Loader.js

@@ -0,0 +1,39 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+var _templateObject;
+import { useEffect, useState } from "react";
+import { EmptyState } from "../../../EmptyState";
+import { ProgressSpinner } from "../../../ProgressSpinner";
+import stl from "../../../styles/helpers/satellitePrefixer";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var DataTableLoader = function DataTableLoader(_ref) {
+  var className = _ref.className,
+    locale = _ref.locale;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showLoadMessage = _useState2[0],
+    setShowLoadMessage = _useState2[1];
+  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__*/_jsx("div", {
+    className: className,
+    children: showLoadMessage ? /*#__PURE__*/_jsx(EmptyState, {
+      usageContext: "result",
+      leadIllustration: /*#__PURE__*/_jsx("div", {
+        className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex justify-center"]))),
+        children: /*#__PURE__*/_jsx(ProgressSpinner, {})
+      }),
+      title: locale.loadingTitle,
+      description: locale.loadingDescription,
+      centered: true
+    }) : /*#__PURE__*/_jsx(ProgressSpinner, {})
+  });
+};

package/dist/esm/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/dist/esm/Tables/DataTable/components/index.js

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

package/dist/esm/Tables/DataTable/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./DataTable";
+export * from "./types";

package/dist/esm/Tables/DataTable/index.js

@@ -0,0 +1,2 @@
+export * from "./DataTable";
+export * from "./types";

package/dist/esm/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/dist/esm/Tables/DataTable/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/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/dist/esm/Tables/DataTable/utils.js

@@ -0,0 +1,13 @@
+import get from "lodash/get";
+export var isDeterminatePagination = function isDeterminatePagination(pagination) {
+  return pagination !== false && "totalItemsCount" in pagination;
+};
+export var isIndeterminatePagination = function isIndeterminatePagination(pagination) {
+  return pagination !== false && !("totalItemsCount" in pagination) && "currentPage" in pagination && typeof pagination.currentPage === "number";
+};
+export var getCellValue = function getCellValue(column, row) {
+  if (typeof column.accessor === "string") {
+    return get(row.item, column.accessor);
+  }
+  return column.accessor(row.item);
+};

package/dist/esm/Tables/Table/Table.d.ts

@@ -0,0 +1,13 @@
+import type { DetailedHTMLProps, ReactNode, TableHTMLAttributes, VFC } from "react";
+export interface TableProps extends DetailedHTMLProps<TableHTMLAttributes<HTMLTableElement>, HTMLTableElement> {
+    footer?: ReactNode;
+    smallFooter?: boolean;
+    hasActions?: boolean;
+    highlight?: boolean;
+}
+/**
+ * The `Table` component is used to structure content in a grid to make it easier to see relationships and to facilitate understanding.
+ *
+ * See the [Table documentation page](https://satellite.algolia.com/layouts/table) for more information.
+ */
+export declare const Table: VFC<TableProps>;

package/dist/esm/Tables/Table/Table.js

@@ -0,0 +1,39 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+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) { _defineProperty(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; }
+import cx from "clsx";
+import stl from "../../styles/helpers/satellitePrefixer";
+import { TableFooter } from "./components/TableFooter";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The `Table` component is used to structure content in a grid to make it easier to see relationships and to facilitate understanding.
+ *
+ * See the [Table documentation page](https://satellite.algolia.com/layouts/table) for more information.
+ */
+export var 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 = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsxs("div", {
+    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["rounded text-grey-900 bg-white display-body"]))), className),
+    children: [/*#__PURE__*/_jsx("div", {
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["overflow-x-auto"]))),
+      children: /*#__PURE__*/_jsx("table", _objectSpread(_objectSpread({}, props), {}, {
+        className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["table ", " ", ""])), hasActions && "table-with-actions", highlight && "table-with-highlight")
+      }))
+    }), !!footer && /*#__PURE__*/_jsx(TableFooter, {
+      size: smallFooter ? "small" : "default",
+      children: footer
+    })]
+  });
+};

package/dist/esm/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/dist/esm/Tables/Table/Table.tailwind.js

@@ -0,0 +1,38 @@
+import _plugin from "tailwindcss/plugin";
+// purgecss whitelist: th, td, tr
+var plugin = _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")
+      }
+    }
+  });
+});
+export default tablePlugin;

package/dist/esm/Tables/Table/components/TableFooter.d.ts

@@ -0,0 +1,7 @@
+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>;

package/dist/esm/Tables/Table/components/TableFooter.js

@@ -0,0 +1,18 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3;
+import cx from "clsx";
+import stl from "../../../styles/helpers/satellitePrefixer";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var TableFooter = function TableFooter(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "default" : _ref$size,
+    children = _ref.children;
+  var SIZE_CLASSNAMES = {
+    "default": stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["py-3 px-4"]))),
+    small: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["py-1 px-4"])))
+  };
+  return /*#__PURE__*/_jsx("div", {
+    className: cx(stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["bg-grey-100 border-t border-grey-200 text-grey-600 flex items-center justify-center"]))), SIZE_CLASSNAMES[size]),
+    children: children
+  });
+};

package/dist/esm/Tables/Table/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Table";
+export * from "./components/TableFooter";

package/dist/esm/Tables/Table/index.js

@@ -0,0 +1,2 @@
+export * from "./Table";
+export * from "./components/TableFooter";

package/dist/esm/Tables/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Table";
+export * from "./DataTable";

package/dist/esm/Tables/index.js

@@ -0,0 +1,2 @@
+export * from "./Table";
+export * from "./DataTable";

package/dist/esm/Tabs/ContentTabs.d.ts

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

package/dist/esm/Tabs/ContentTabs.js

@@ -0,0 +1,53 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@radix-ui/react-tabs";
+import cx from "clsx";
+import { Badge } from "../Badge";
+import stl from "../styles/helpers/satellitePrefixer";
+import { ACTIVE_UNDERLINE_VARIANT_CLASSNAMES } from "./utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var 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__*/_jsxs(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__*/_jsx(TabsList, {
+      className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["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__*/_jsxs(TabsTrigger, {
+          value: String(index),
+          disabled: disabled,
+          className: cx(ACTIVE_UNDERLINE_VARIANT_CLASSNAMES[variant], stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["tab pb-3 text-base leading-sm"]))), className),
+          children: [label, !!value && /*#__PURE__*/_jsx(Badge, {
+            size: "small",
+            variant: variant,
+            className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["ml-2"]))),
+            children: value
+          })]
+        }, index);
+      })
+    }), tabs.map(function (_ref3, index) {
+      var content = _ref3.content;
+      return /*#__PURE__*/_jsx(TabsContent, {
+        value: String(index),
+        className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["focus:outline-none"]))),
+        children: content
+      }, index);
+    })]
+  });
+};