@algolia/satellite 1.0.0-v3.99 → 1.1.0

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);
+    })]
+  });
+};

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

@@ -0,0 +1,9 @@
+import type { VFC } from "react";
+import type { LinkTabsProps, UrlMatcher } from "./types";
+export declare const defaultUrlMatcher: UrlMatcher;
+/**
+ * The `Tabs` component is an easy way to organize content by grouping similar information on the same page. Use it to help users navigate between related views within the same context, especially when the number of views may be more than 3.
+ *
+ * See the [Tabs documentation page](https://satellite.algolia.com/components/navigation/tabs) for more information.
+ */
+export declare const LinkTabs: VFC<LinkTabsProps>;

package/dist/esm/Tabs/LinkTabs.js

@@ -0,0 +1,44 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject;
+import cx from "clsx";
+import useLocation from "react-use/lib/useLocation";
+import stl from "../styles/helpers/satellitePrefixer";
+import { matchLocation } from "../utils/matchLocation";
+import { LinkTab } from "./components/LinkTab";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var defaultUrlMatcher = function defaultUrlMatcher(tab, location) {
+  return matchLocation(tab.to, {
+    pathname: location.pathname || ""
+  });
+};
+
+/**
+ * The `Tabs` component is an easy way to organize content by grouping similar information on the same page. Use it to help users navigate between related views within the same context, especially when the number of views may be more than 3.
+ *
+ * See the [Tabs documentation page](https://satellite.algolia.com/components/navigation/tabs) for more information.
+ */
+export var LinkTabs = function LinkTabs(_ref) {
+  var className = _ref.className,
+    tabs = _ref.tabs,
+    onTabClick = _ref.onTabClick,
+    _ref$urlMatcher = _ref.urlMatcher,
+    urlMatcher = _ref$urlMatcher === void 0 ? defaultUrlMatcher : _ref$urlMatcher;
+  var location = useLocation();
+  var tabIndex = tabs.findIndex(function (tab) {
+    return urlMatcher(tab, location);
+  });
+  tabIndex = tabIndex === -1 ? 0 : tabIndex;
+  return /*#__PURE__*/_jsx("nav", {
+    role: "tablist",
+    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 (tab, index) {
+      return /*#__PURE__*/_jsx(LinkTab, {
+        tab: tab,
+        selected: index === tabIndex,
+        onClick: function onClick(evt) {
+          return onTabClick === null || onTabClick === void 0 ? void 0 : onTabClick(evt, tab);
+        }
+      }, tab.to);
+    })
+  });
+};

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

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

package/dist/esm/Tabs/Tabs.tailwind.js

@@ -0,0 +1,71 @@
+import _plugin from "tailwindcss/plugin";
+// @ts-check
+var plugin = _plugin;
+var tabsPlugin = plugin(function (_ref) {
+  var addComponents = _ref.addComponents,
+    theme = _ref.theme;
+  addComponents({
+    ".tabs-tabbar": {
+      scrollBehavior: "smooth",
+      padding: "0 3px",
+      "&:is(nav)": {
+        padding: "0 4px"
+      }
+    },
+    ".tab[aria-selected=true]": {
+      color: theme("colors.grey.900")
+    },
+    ".tab-grey[aria-selected=true], .tab-grey:hover, .tab-grey:focus": {
+      borderBottomColor: theme("colors.grey.300")
+    },
+    ".tab-accent[aria-selected=true], .tab-accent:hover, .tab-accent:focus": {
+      borderBottomColor: theme("colors.accent.600")
+    },
+    ".tab-blue[aria-selected=true], .tab-blue:hover, .tab-blue:focus": {
+      borderBottomColor: theme("colors.blue.600")
+    },
+    ".tab-green[aria-selected=true], .tab-green:hover, .tab-green:focus": {
+      borderBottomColor: theme("colors.green.600")
+    },
+    ".tab-orange[aria-selected=true], .tab-orange:hover, .tab-orange:focus": {
+      borderBottomColor: theme("colors.orange.600")
+    },
+    ".tab-red[aria-selected=true], .tab-red:hover, .tab-red:focus": {
+      borderBottomColor: theme("colors.red.600")
+    },
+    ".tab": {
+      flexShrink: "0",
+      padding: "3px",
+      marginTop: "3px",
+      borderBottomWidth: "3px",
+      borderBottomColor: "transparent",
+      color: theme("colors.grey.600"),
+      cursor: "pointer",
+      display: "inline-flex",
+      justifyContent: "center",
+      minWidth: theme("spacing.12"),
+      "&[disabled], &[aria-disabled=true]": {
+        color: theme("colors.grey.400"),
+        borderBottomColor: "transparent",
+        cursor: "not-allowed"
+      },
+      "&:focus": {
+        outline: "none"
+      },
+      "&:focus-visible": {
+        outline: "3px solid ".concat(theme("colors.accent.600")),
+        marginBottom: "3px",
+        borderBottom: "transparent"
+      },
+      "&:is(a)": {
+        marginTop: "5px",
+        "&:focus-visible": {
+          margin: "4px 0",
+          paddingTop: "4px",
+          paddingBottom: "3px"
+        }
+      }
+    }
+  });
+});
+export default tabsPlugin;

package/dist/esm/Tabs/components/LinkTab.d.ts

@@ -0,0 +1,8 @@
+import type { MouseEventHandler, VFC } from "react";
+import type { LinkTab as LinkTabType } from "../types";
+export interface LinkTabProps {
+    tab: LinkTabType;
+    onClick?: MouseEventHandler<HTMLAnchorElement>;
+    selected: boolean;
+}
+export declare const LinkTab: VFC<LinkTabProps>;

package/dist/esm/Tabs/components/LinkTab.js

@@ -0,0 +1,77 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2;
+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 { Badge } from "../../Badge";
+import stl from "../../styles/helpers/satellitePrefixer";
+import { useLinkProps } from "../../utils/useLinkProps";
+import { ACTIVE_UNDERLINE_VARIANT_CLASSNAMES } from "../utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var getNextNonDisabledSibling = function getNextNonDisabledSibling(el) {
+  var _ref;
+  if (!el) return null;
+  var next = el;
+  do {
+    var _next, _next$nextElementSibl, _next2, _next3;
+    next = (_next$nextElementSibl = (_next2 = next) === null || _next2 === void 0 ? void 0 : _next2.nextElementSibling) !== null && _next$nextElementSibl !== void 0 ? _next$nextElementSibl : (_next3 = next) === null || _next3 === void 0 || (_next3 = _next3.parentElement) === null || _next3 === void 0 ? void 0 : _next3.firstElementChild;
+  } while ((_next = next) !== null && _next !== void 0 && _next.getAttribute("aria-disabled"));
+  return (_ref = next) !== null && _ref !== void 0 ? _ref : null;
+};
+var getPreviousNonDisabledSibling = function getPreviousNonDisabledSibling(el) {
+  var _ref2;
+  if (!el) return null;
+  var next = el;
+  do {
+    var _next4, _next$previousElement, _next5, _next6;
+    next = (_next$previousElement = (_next5 = next) === null || _next5 === void 0 ? void 0 : _next5.previousElementSibling) !== null && _next$previousElement !== void 0 ? _next$previousElement : (_next6 = next) === null || _next6 === void 0 || (_next6 = _next6.parentElement) === null || _next6 === void 0 ? void 0 : _next6.lastElementChild;
+  } while ((_next4 = next) !== null && _next4 !== void 0 && _next4.getAttribute("aria-disabled"));
+  return (_ref2 = next) !== null && _ref2 !== void 0 ? _ref2 : null;
+};
+export var LinkTab = function LinkTab(_ref3) {
+  var tab = _ref3.tab,
+    _onClick = _ref3.onClick,
+    selected = _ref3.selected;
+  var variant = tab.variant || "accent";
+  var selectionProps = selected ? {
+    "aria-selected": true,
+    tabIndex: 0
+  } : {
+    "aria-selected": false,
+    tabIndex: -1
+  };
+  var linkProps = useLinkProps({
+    href: tab.to,
+    disabled: tab.disabled,
+    onClick: function onClick(evt) {
+      if (_onClick) {
+        _onClick(evt);
+      }
+    }
+  });
+  return /*#__PURE__*/_jsxs("a", _objectSpread(_objectSpread(_objectSpread({}, linkProps), selectionProps), {}, {
+    id: tab.id,
+    role: "tab",
+    className: cx(ACTIVE_UNDERLINE_VARIANT_CLASSNAMES[variant], stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["tab pb-3 text-base leading-sm hover:no-underline"]))), tab.className),
+    onKeyDown: function onKeyDown(evt) {
+      if (tab.disabled) return;
+      if (evt.key === "ArrowRight") {
+        var nextElement = getNextNonDisabledSibling(evt.currentTarget);
+        nextElement === null || nextElement === void 0 || nextElement.click();
+        nextElement === null || nextElement === void 0 || nextElement.focus();
+      } else if (evt.key === "ArrowLeft") {
+        var previousElement = getPreviousNonDisabledSibling(evt.currentTarget);
+        previousElement === null || previousElement === void 0 || previousElement.click();
+        previousElement === null || previousElement === void 0 || previousElement.focus();
+      }
+    },
+    children: [tab.label, !!tab.value && /*#__PURE__*/_jsx(Badge, {
+      size: "small",
+      variant: variant,
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["ml-2 text-grey-600"]))),
+      children: tab.value
+    })]
+  }));
+};

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

@@ -0,0 +1,3 @@
+export * from "./LinkTabs";
+export * from "./ContentTabs";
+export * from "./types";