@algolia/satellite 1.0.0-beta.16 → 1.0.0-beta.160

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 @@
+/// <reference types="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: ({ className, tabs, onTabClick, urlMatcher }: LinkTabsProps) => JSX.Element;
+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").Config> | undefined;
+};

package/esm/Tabs/Tabs.tailwind.js

@@ -0,0 +1,52 @@
+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"
+    },
+    ".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",
+      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"
+      }
+    }
+  });
+});
+export default tabsPlugin;

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

@@ -0,0 +1,9 @@
+import type { MouseEventHandler } from "react";
+import type { LinkTab as LinkTabType } from "../types";
+export interface LinkTabProps {
+    tab: LinkTabType;
+    onClick?: MouseEventHandler<HTMLAnchorElement>;
+    selected: boolean;
+}
+export declare const LinkTab: ({ tab, onClick, selected }: LinkTabProps) => JSX.Element;
+export default LinkTab;

package/esm/Tabs/components/LinkTab.js

@@ -0,0 +1,78 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2;
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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, _next3$parentElement;
+    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 ? void 0 : (_next3$parentElement = _next3.parentElement) === null || _next3$parentElement === void 0 ? void 0 : _next3$parentElement.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, _next6$parentElement;
+    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 ? void 0 : (_next6$parentElement = _next6.parentElement) === null || _next6$parentElement === void 0 ? void 0 : _next6$parentElement.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 ? void 0 : nextElement.click();
+        nextElement === null || nextElement === void 0 ? void 0 : nextElement.focus();
+      } else if (evt.key === "ArrowLeft") {
+        var previousElement = getPreviousNonDisabledSibling(evt.currentTarget);
+        previousElement === null || previousElement === void 0 ? void 0 : previousElement.click();
+        previousElement === null || previousElement === void 0 ? 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
+    })]
+  }));
+};
+export default LinkTab;

package/esm/Tabs/index.d.ts

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

package/esm/Tabs/index.js

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

package/esm/Tabs/types.d.ts

@@ -0,0 +1,35 @@
+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;
+    /** @default 0 */
+    defaultIndex?: number;
+    onChange?: (tabIndex: number) => void;
+}

package/esm/Tabs/types.js

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

package/esm/Tabs/utils.d.ts

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

package/esm/Tabs/utils.js

@@ -0,0 +1,11 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+import stl from "../styles/helpers/satellitePrefixer";
+export var ACTIVE_UNDERLINE_VARIANT_CLASSNAMES = {
+  grey: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["tab-grey"]))),
+  accent: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["tab-accent"]))),
+  green: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["tab-green"]))),
+  blue: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["tab-blue"]))),
+  orange: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["tab-orange"]))),
+  red: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["tab-red"])))
+};

package/esm/Tag/Tag.d.ts

@@ -0,0 +1,58 @@
+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.
+     * @default "grey"
+     */
+    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"`
+ *
+ * ## 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, "key" | "id" | "color" | "translate" | "hidden" | "dir" | "slot" | "style" | "title" | "accessKey" | "draggable" | "lang" | "className" | "prefix" | "children" | "contentEditable" | "inputMode" | "tabIndex" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "placeholder" | "spellCheck" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "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" | "variant" | "locale" | "onAdd" | "addTooltip" | "onRemove" | "removeTooltip"> & import("react").RefAttributes<HTMLSpanElement>>;
+export default Tag;

package/esm/Tag/Tag.js

@@ -0,0 +1,127 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+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, _templateObject21;
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import cx from "clsx";
+import { forwardRef } from "react";
+import { Plus, X } from "react-feather";
+import { useLocale } from "../Satellite";
+import stl from "../styles/helpers/satellitePrefixer";
+import { TooltipWrapper } from "../Tooltip";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var DEFAULT_TAG_LOCALE = {
+  addButton: function addButton(title) {
+    return "Add \"".concat(title, "\"");
+  },
+  removeButton: function removeButton(title) {
+    return "Remove \"".concat(title, "\"");
+  }
+};
+var VARIANT_CLASSNAMES = {
+  accent: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["bg-accent-100 border-accent-200 text-accent-700"]))),
+  grey: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["bg-grey-100 border-grey-200 text-grey-700"]))),
+  blue: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["bg-blue-100 border-blue-200 text-blue-800"]))),
+  green: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["bg-green-100 border-green-300 text-green-900"]))),
+  orange: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["bg-orange-100 border-orange-300 text-orange-800"]))),
+  red: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["bg-red-100 border-red-200 text-red-700"]))),
+  pink: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["bg-pink-100 border-pink-200 text-pink-700"])))
+};
+var BUTTON_VARIANT_CLASSNAMES = {
+  accent: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["border-accent-200 hover:bg-accent-200 focus:bg-accent-200"]))),
+  grey: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["border-grey-200 hover:bg-grey-200 focus:bg-grey-200"]))),
+  blue: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["border-blue-200 hover:bg-blue-200 focus:bg-blue-200"]))),
+  green: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["border-green-300 hover:bg-green-300 focus:bg-green-300"]))),
+  orange: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["border-orange-300 hover:bg-orange-300 focus:bg-orange-300"]))),
+  red: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["border-red-200 hover:bg-red-200 focus:bg-red-200"]))),
+  pink: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["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"`
+ *
+ * ## 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 var Tag = /*#__PURE__*/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 = _objectWithoutProperties(_ref, _excluded);
+  var title = typeof children === "string" ? children : "tag";
+  var contextLocale = useLocale("tag");
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_TAG_LOCALE), contextLocale), propsLocale);
+  var tagClassName = cx(stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["tag"]))), VARIANT_CLASSNAMES[variant], className);
+  var addable = Boolean(onAdd);
+  var removable = Boolean(onRemove);
+  var handleAdd = function handleAdd(evt) {
+    evt.stopPropagation();
+    onAdd === null || onAdd === void 0 ? void 0 : onAdd(evt);
+  };
+  var handleRemove = function handleRemove(evt) {
+    evt.stopPropagation();
+    onRemove === null || onRemove === void 0 ? void 0 : onRemove(evt);
+  };
+  var content = /*#__PURE__*/_jsx("span", {
+    className: stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["truncate flex-1 leading-base"]))),
+    children: children
+  });
+  return /*#__PURE__*/_jsxs("span", _objectSpread(_objectSpread({}, props), {}, {
+    className: tagClassName,
+    ref: ref,
+    children: [addable ? /*#__PURE__*/_jsx(TooltipWrapper, {
+      content: addTooltip,
+      hideDelay: 0,
+      placement: "bottom",
+      wrapperClassName: stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["h-full"]))),
+      children: /*#__PURE__*/_jsxs("button", {
+        className: cx(stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["tag-add-button"]))), !removable && stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["-mr-2"]))), BUTTON_VARIANT_CLASSNAMES[variant]),
+        type: "button",
+        onClick: handleAdd,
+        "aria-label": typeof locale.addButton === "function" ? locale.addButton(title) : locale.addButton,
+        children: [/*#__PURE__*/_jsx(Plus, {
+          size: "1em"
+        }), content]
+      })
+    }) : content, removable && /*#__PURE__*/_jsx(TooltipWrapper, {
+      content: removeTooltip,
+      hideDelay: 0,
+      placement: "bottom-start",
+      children: /*#__PURE__*/_jsx("button", {
+        className: cx(stl(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["tag-close-button p-1"]))), !addable && stl(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["ml-2"]))), BUTTON_VARIANT_CLASSNAMES[variant]),
+        type: "button",
+        onClick: handleRemove,
+        "aria-label": typeof locale.removeButton === "function" ? locale.removeButton(title) : locale.removeButton,
+        children: /*#__PURE__*/_jsx(X, {
+          size: "1em"
+        })
+      })
+    })]
+  }));
+});
+Tag.displayName = "Tag";
+export default Tag;

package/esm/Tag/Tag.tailwind.d.ts

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

package/esm/Tag/Tag.tailwind.js

@@ -0,0 +1,53 @@
+import _plugin from "tailwindcss/plugin";
+// @ts-check
+var plugin = _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")
+      }
+    }
+  });
+});
+export default tagPlugin;

package/esm/Tag/index.d.ts

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

package/esm/Tag/index.js

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

package/esm/TextArea/TextArea.d.ts

@@ -0,0 +1,5 @@
+import type { TextareaHTMLAttributes } from "react";
+export interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+}
+export declare const TextArea: import("react").ForwardRefExoticComponent<TextAreaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+export default TextArea;