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

package/cjs/Tabs/LinkTabs.js

@@ -0,0 +1,75 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultUrlMatcher = exports["default"] = exports.LinkTabs = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _useLocation = _interopRequireDefault(require("react-use/lib/useLocation"));
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _matchLocation = _interopRequireDefault(require("../utils/matchLocation"));
+var _LinkTab = _interopRequireDefault(require("./components/LinkTab"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject;
+var defaultUrlMatcher = exports.defaultUrlMatcher = function defaultUrlMatcher(tab, location) {
+  return (0, _matchLocation["default"])(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
+ */
+var LinkTabs = exports.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 = (0, _useLocation["default"])();
+  var tabIndex = tabs.findIndex(function (tab) {
+    return urlMatcher(tab, location);
+  });
+  tabIndex = tabIndex === -1 ? 0 : tabIndex;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("nav", {
+    role: "tablist",
+    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 (tab, index) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinkTab["default"], {
+        tab: tab,
+        selected: index === tabIndex,
+        onClick: function onClick(evt) {
+          return onTabClick === null || onTabClick === void 0 ? void 0 : onTabClick(evt, tab);
+        }
+      }, tab.to);
+    })
+  });
+};
+var _default = exports["default"] = LinkTabs;

package/cjs/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/cjs/Tabs/Tabs.tailwind.js

@@ -0,0 +1,72 @@
+"use strict";
+
+// @ts-check
+var plugin = require("tailwindcss/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"
+        }
+      }
+    }
+  });
+});
+module.exports = tabsPlugin;

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

package/cjs/Tabs/components/LinkTab.js

@@ -0,0 +1,84 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.LinkTab = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Badge = _interopRequireDefault(require("../../Badge"));
+var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
+var _useLinkProps = _interopRequireDefault(require("../../utils/useLinkProps"));
+var _utils = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
+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) { (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; }
+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;
+};
+var LinkTab = exports.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 = (0, _useLinkProps["default"])({
+    href: tab.to,
+    disabled: tab.disabled,
+    onClick: function onClick(evt) {
+      if (_onClick) {
+        _onClick(evt);
+      }
+    }
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("a", _objectSpread(_objectSpread(_objectSpread({}, linkProps), selectionProps), {}, {
+    id: tab.id,
+    role: "tab",
+    className: (0, _clsx["default"])(_utils.ACTIVE_UNDERLINE_VARIANT_CLASSNAMES[variant], (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["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__*/(0, _jsxRuntime.jsx)(_Badge["default"], {
+      size: "small",
+      variant: variant,
+      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["ml-2 text-grey-600"]))),
+      children: tab.value
+    })]
+  }));
+};
+var _default = exports["default"] = LinkTab;

package/cjs/Tabs/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./LinkTabs";
+export * from "./ContentTabs";
+export * from "./types";
+export { default } from "./LinkTabs";

package/cjs/Tabs/index.js

@@ -0,0 +1,51 @@
+"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 _LinkTabs["default"];
+  }
+});
+var _LinkTabs = _interopRequireWildcard(require("./LinkTabs"));
+Object.keys(_LinkTabs).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _LinkTabs[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _LinkTabs[key];
+    }
+  });
+});
+var _ContentTabs = require("./ContentTabs");
+Object.keys(_ContentTabs).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ContentTabs[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _ContentTabs[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/Tabs/types.d.ts

@@ -0,0 +1,34 @@
+import type { MouseEvent, ReactNode } from "react";
+import type { LocationSensorState } from "react-use/lib/useLocation";
+import type { ColorVariant } from "../types";
+export interface BaseTab {
+    id?: string;
+    label: ReactNode;
+    variant?: ColorVariant;
+    disabled?: boolean;
+    value?: string;
+    /** @ignore */
+    className?: string;
+}
+export declare type UrlMatcher = (tab: LinkTab, location: LocationSensorState) => boolean;
+export interface LinkTab extends BaseTab {
+    to: string;
+}
+export interface LinkTabsProps {
+    /** @ignore */
+    className?: string;
+    tabs: LinkTab[];
+    onTabClick?(event: MouseEvent<HTMLAnchorElement>, tab: LinkTab): void;
+    urlMatcher?: UrlMatcher;
+}
+export interface ContentTab extends BaseTab {
+    content: ReactNode;
+}
+export interface ContentTabsProps {
+    /** @ignore */
+    className?: string;
+    tabs: ContentTab[];
+    tabIndex?: number;
+    defaultIndex?: number;
+    onChange?: (tabIndex: number) => void;
+}

package/cjs/Tabs/types.js

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

package/cjs/Tabs/utils.d.ts

@@ -0,0 +1,2 @@
+import type { ColorVariant } from "../types";
+export declare const ACTIVE_UNDERLINE_VARIANT_CLASSNAMES: Record<ColorVariant, string>;

package/cjs/Tabs/utils.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ACTIVE_UNDERLINE_VARIANT_CLASSNAMES = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var ACTIVE_UNDERLINE_VARIANT_CLASSNAMES = exports.ACTIVE_UNDERLINE_VARIANT_CLASSNAMES = {
+  grey: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["tab-grey"]))),
+  accent: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["tab-accent"]))),
+  green: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["tab-green"]))),
+  blue: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["tab-blue"]))),
+  orange: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["tab-orange"]))),
+  red: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["tab-red"])))
+};

package/cjs/Tag/Tag.d.ts

@@ -0,0 +1,48 @@
+import type { DetailedHTMLProps, HTMLAttributes, MouseEventHandler } from "react";
+import type { ColorVariant } from "../types";
+export declare type TagVariants = ColorVariant | "pink";
+export declare type TagLocale = {
+    addButton?: string | ((title: string) => string);
+    removeButton?: string | ((title: string) => string);
+};
+export interface TagProps extends DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> {
+    /** The "pink" variant should only be used for **Algolia admin** related things. */
+    variant?: TagVariants;
+    /** Handler function called when the "add" button is clicked. */
+    onAdd?: MouseEventHandler<HTMLElement>;
+    /** The tooltip text to display when hovering over the "add" button. */
+    addTooltip?: string;
+    /** Handler function called when the "remove" button is clicked. */
+    onRemove?: MouseEventHandler<HTMLElement>;
+    /** The tooltip text to display when hovering over the "remove" button. */
+    removeTooltip?: string;
+    /**
+     * Customize the text describing the "add" and "remove" buttons.
+     * If not provided, default values will be used.
+     */
+    locale?: TagLocale;
+}
+/**
+ * Use tags to visually label UI objects for quick recognition and navigation. (!) **Tags can be added or removed from an object by users**.
+ * Keep in mind that tags increase the amount of visual noise, particularly when combined with other visual labelling elements, so use them in moderation. Tags can be added or removed from an object by users.
+ *
+ * - For status information, use badges instead
+ * - For tallies or counts, use badges
+ *
+ * ## Variations
+ * Consider the context and implied severity to choose from the following range:
+ *
+ * - **Accent**: `variant="accent"`
+ * - **Informational**: `variant="grey"` & `variant="blue"`
+ * - **Success**: `variant="green"`
+ * - **Warning**: `variant="orange"`
+ * - **Error**: `variant="red"`
+ * - **Admin**: `variant="pink"`
+ *
+ * ## Usability best practices
+ * - Present tags close to or within the input control to allow users to add and remove tags
+ * - When writing tags, avoid line-wrapping
+ * - Define the max width of text within a tag. Once the text reaches the max, truncate with ellipses
+ */
+export declare const Tag: import("react").ForwardRefExoticComponent<Pick<TagProps, "dir" | "slot" | "style" | "title" | "children" | "id" | "variant" | "locale" | "className" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "onAdd" | "addTooltip" | "onRemove" | "removeTooltip"> & import("react").RefAttributes<HTMLSpanElement>>;
+export default Tag;

package/cjs/Tag/Tag.js

@@ -0,0 +1,139 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Tag = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _react = require("react");
+var _reactFeather = require("react-feather");
+var _AutoComplete = require("../AutoComplete");
+var _Satellite = require("../Satellite");
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _Tooltip = require("../Tooltip");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["children", "variant", "className", "onAdd", "addTooltip", "onRemove", "removeTooltip", "locale"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20;
+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; }
+var DEFAULT_TAG_LOCALE = {
+  addButton: function addButton(title) {
+    return "Add \"".concat(title, "\"");
+  },
+  removeButton: function removeButton(title) {
+    return "Remove \"".concat(title, "\"");
+  }
+};
+var VARIANT_CLASSNAMES = {
+  accent: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["bg-accent-100 border-accent-200 text-accent-700"]))),
+  grey: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["bg-grey-100 border-grey-200 text-grey-700"]))),
+  blue: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["bg-blue-100 border-blue-200 text-blue-800"]))),
+  green: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["bg-green-100 border-green-300 text-green-900"]))),
+  orange: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["bg-orange-100 border-orange-300 text-orange-800"]))),
+  red: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["bg-red-100 border-red-200 text-red-700"]))),
+  pink: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["bg-pink-100 border-pink-200 text-pink-700"])))
+};
+var BUTTON_VARIANT_CLASSNAMES = {
+  accent: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["border-accent-200 hover:bg-accent-200 focus:bg-accent-200"]))),
+  grey: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["border-grey-200 hover:bg-grey-200 focus:bg-grey-200"]))),
+  blue: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["border-blue-200 hover:bg-blue-200 focus:bg-blue-200"]))),
+  green: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["border-green-300 hover:bg-green-300 focus:bg-green-300"]))),
+  orange: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["border-orange-300 hover:bg-orange-300 focus:bg-orange-300"]))),
+  red: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["border-red-200 hover:bg-red-200 focus:bg-red-200"]))),
+  pink: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["border-pink-200 hover:bg-pink-200 focus:bg-pink-200"])))
+};
+
+/**
+ * Use tags to visually label UI objects for quick recognition and navigation. (!) **Tags can be added or removed from an object by users**.
+ * Keep in mind that tags increase the amount of visual noise, particularly when combined with other visual labelling elements, so use them in moderation. Tags can be added or removed from an object by users.
+ *
+ * - For status information, use badges instead
+ * - For tallies or counts, use badges
+ *
+ * ## Variations
+ * Consider the context and implied severity to choose from the following range:
+ *
+ * - **Accent**: `variant="accent"`
+ * - **Informational**: `variant="grey"` & `variant="blue"`
+ * - **Success**: `variant="green"`
+ * - **Warning**: `variant="orange"`
+ * - **Error**: `variant="red"`
+ * - **Admin**: `variant="pink"`
+ *
+ * ## Usability best practices
+ * - Present tags close to or within the input control to allow users to add and remove tags
+ * - When writing tags, avoid line-wrapping
+ * - Define the max width of text within a tag. Once the text reaches the max, truncate with ellipses
+ */
+var Tag = exports.Tag = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var children = _ref.children,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "grey" : _ref$variant,
+    className = _ref.className,
+    onAdd = _ref.onAdd,
+    addTooltip = _ref.addTooltip,
+    onRemove = _ref.onRemove,
+    removeTooltip = _ref.removeTooltip,
+    propsLocale = _ref.locale,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var title = typeof children === "string" ? children : "tag";
+  var contextLocale = (0, _Satellite.useLocale)("tag");
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_TAG_LOCALE), contextLocale), propsLocale);
+  var tagClassName = (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["tag"]))), VARIANT_CLASSNAMES[variant], className);
+  var isInsideAutocomplete = (0, _AutoComplete.useIsInsideAutocomplete)();
+  var tabIndexProps = isInsideAutocomplete ? {
+    tabIndex: -1
+  } : {};
+  var addable = Boolean(onAdd);
+  var removable = Boolean(onRemove);
+  var handleAdd = function handleAdd(evt) {
+    evt.stopPropagation();
+    onAdd === null || onAdd === void 0 || onAdd(evt);
+  };
+  var handleRemove = function handleRemove(evt) {
+    evt.stopPropagation();
+    onRemove === null || onRemove === void 0 || onRemove(evt);
+  };
+  var content = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    className: (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["truncate flex-1"]))),
+    children: children
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", _objectSpread(_objectSpread({}, props), {}, {
+    className: tagClassName,
+    ref: ref,
+    children: [addable ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.TooltipWrapper, {
+      content: addTooltip,
+      hideDelay: 0,
+      side: "bottom",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", _objectSpread(_objectSpread({}, tabIndexProps), {}, {
+        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["tag-add-button"]))), !removable && (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["-mr-2"]))), BUTTON_VARIANT_CLASSNAMES[variant]),
+        type: "button",
+        onClick: handleAdd,
+        "aria-label": typeof locale.addButton === "function" ? locale.addButton(title) : locale.addButton,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFeather.Plus, {
+          size: "1em"
+        }), content]
+      }))
+    }) : content, removable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.TooltipWrapper, {
+      content: removeTooltip,
+      hideDelay: 0,
+      side: "bottom",
+      align: "start",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", _objectSpread(_objectSpread({}, tabIndexProps), {}, {
+        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["tag-close-button p-1"]))), !addable && (0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["ml-2"]))), BUTTON_VARIANT_CLASSNAMES[variant]),
+        type: "button",
+        onClick: handleRemove,
+        "aria-label": typeof locale.removeButton === "function" ? locale.removeButton(title) : locale.removeButton,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFeather.X, {
+          size: "1em"
+        })
+      }))
+    })]
+  }));
+});
+Tag.displayName = "Tag";
+var _default = exports["default"] = Tag;

package/cjs/Tag/Tag.tailwind.d.ts

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

package/cjs/Tag/Tag.tailwind.js

@@ -0,0 +1,54 @@
+"use strict";
+
+// @ts-check
+var plugin = require("tailwindcss/plugin");
+var tagPlugin = plugin(function (_ref) {
+  var addComponents = _ref.addComponents,
+    theme = _ref.theme;
+  addComponents({
+    ".tag": {
+      display: "inline-flex",
+      alignItems: "center",
+      borderRadius: theme("borderRadius.DEFAULT"),
+      border: "1px solid transparent",
+      overflow: "hidden",
+      height: theme("spacing.6"),
+      padding: "0 ".concat(theme("spacing.2")),
+      fontSize: theme("fontSize.base"),
+      lineHeight: theme("lineHeight.sm")
+    },
+    ".tag-add-button": {
+      display: "inline-flex",
+      alignItems: "center",
+      height: "100%",
+      paddingLeft: theme("spacing.2"),
+      paddingRight: theme("spacing.2"),
+      marginLeft: "-".concat(theme("spacing.2")),
+      columnGap: theme("spacing.2"),
+      "&, &:focus": {
+        outlineWidth: "0px"
+      },
+      "&:focus-visible": {
+        outlineOffset: "-2px",
+        outlineWidth: "3px",
+        outlineColor: theme("colors.accent.600")
+      }
+    },
+    ".tag-close-button": {
+      height: "100%",
+      paddingLeft: theme("spacing.1"),
+      paddingRight: theme("spacing.1"),
+      marginRight: "-".concat(theme("spacing.2")),
+      borderLeft: "1px solid transparent",
+      "&, &:focus": {
+        outlineWidth: "0px"
+      },
+      "&:focus-visible": {
+        outlineOffset: "-2px",
+        outlineWidth: "3px",
+        outlineColor: theme("colors.accent.600")
+      }
+    }
+  });
+});
+module.exports = tagPlugin;

package/cjs/Tag/index.d.ts

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