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

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

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

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

@@ -0,0 +1,40 @@
+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 Loader = function Loader(_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, {})
+  });
+};
+export default Loader;

package/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/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/esm/Tables/DataTable/index.d.ts

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

package/esm/Tables/DataTable/index.js

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

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

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

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

@@ -0,0 +1,54 @@
+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";
+/**
+ * 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 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
+    })]
+  });
+};
+export default Table;

package/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/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/esm/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/esm/Tables/Table/components/TableFooter.js

@@ -0,0 +1,19 @@
+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
+  });
+};
+export default TableFooter;

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

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

package/esm/Tables/Table/index.js

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

package/esm/Tables/index.d.ts

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

package/esm/Tables/index.js

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

package/esm/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/esm/Tabs/ContentTabs.js

@@ -0,0 +1,54 @@
+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);
+    })]
+  });
+};
+export default ContentTabs;

package/esm/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;

package/esm/Tabs/LinkTabs.js

@@ -0,0 +1,68 @@
+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 || ""
+  });
+};
+
+/**
+ * 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 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);
+    })
+  });
+};
+export default LinkTabs;

package/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/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/esm/Tabs/components/LinkTab.d.ts

@@ -0,0 +1,9 @@
+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>;
+export default LinkTab;