@arc-ui/components 12.0.0-beta.5 → 12.0.0-beta.8

package/dist/_shared/esm/{index-288c66b5.js → Surface-56d329b0.js}

@@ -1,67 +1,6 @@
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-var __assign = function() {
-  __assign = Object.assign || function __assign(t) {
-      for (var s, i = 1, n = arguments.length; i < n; i++) {
-          s = arguments[i];
-          for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-      }
-      return t;
-  };
-  return __assign.apply(this, arguments);
-};
-
-function __rest(s, e) {
-  var t = {};
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-      t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function")
-      for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-          if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-              t[p[i]] = s[p[i]];
-      }
-  return t;
-}
-
-function __spreadArray(to, from, pack) {
-  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-      if (ar || !(i in from)) {
-          if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-          ar[i] = from[i];
-      }
-  }
-  return to.concat(ar || Array.prototype.slice.call(from));
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-  var e = new Error(message);
-  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-
-var dataAttrRe = /^(data-.*)$/;
-var filterDataAttrs = function (props) {
-    var filteredProps = {};
-    for (var prop in props) {
-        if (Object.prototype.hasOwnProperty.call(props, prop) &&
-            dataAttrRe.test(prop)) {
-            filteredProps[prop] = props[prop];
-        }
-    }
-    return filteredProps;
-};
+import { b as __spreadArray, _ as __rest, a as __assign, f as filterDataAttrs } from './index.es-4921e8dd.js';
+import { c as classNames } from './index-2e73c2e9.js';
+import React__default, { createContext } from 'react';
 
 var camelcase$1 = {exports: {}};
 
@@ -179,4 +118,48 @@ camelcase$1.exports.default = camelCase;
 
 var camelcase = camelcase$1.exports;
 
-export { __rest as _, __assign as a, __spreadArray as b, camelcase as c, filterDataAttrs as f };
+var defaultContext = { surface: "light" };
+var Context = createContext(defaultContext);
+var Provider = Context.Provider;
+/**
+ * Use `Surface` to compose content using the Arc system.
+ */
+var Surface = function (_a) {
+    var _b;
+    var background = _a.background, children = _a.children, _c = _a.growVertically, growVertically = _c === void 0 ? false : _c, padding = _a.padding, paddingHorizontal = _a.paddingHorizontal, paddingVertical = _a.paddingVertical, isTransparent = _a.isTransparent, props = __rest(_a, ["background", "children", "growVertically", "padding", "paddingHorizontal", "paddingVertical", "isTransparent"]);
+    var surface = "light";
+    if (background === "dark-black" ||
+        background === "dark-brand-01" ||
+        background === "dark-brand-02" ||
+        background === "dark-neutral-01" ||
+        background === "dark-neutral-02") {
+        surface = "dark";
+    }
+    return (React__default.createElement(Provider, { value: { surface: surface } },
+        React__default.createElement("div", __assign({ "data-testid": "arc-surface", className: classNames((_b = {
+                    "arc-Surface": true
+                },
+                _b["arc-Surface--".concat(background && camelcase(background), "Background")] = background,
+                _b["arc-Surface--growVertically"] = growVertically,
+                _b["arc-Surface--padding".concat(padding)] = padding,
+                _b["arc-Surface--paddingHorizontal".concat(paddingHorizontal)] = paddingHorizontal,
+                _b["arc-Surface--paddingVertical".concat(paddingVertical)] = paddingVertical,
+                _b["arc-Surface--isTransparent"] = isTransparent,
+                _b)) }, filterDataAttrs(props)), children)));
+};
+var backgroundsShared = [
+    "dark-black",
+    "dark-brand-01",
+    "dark-brand-02",
+    "dark-neutral-01",
+    "dark-neutral-02",
+    "light-brand-01",
+    "light-brand-02",
+    "light-neutral-01",
+    "light-neutral-02",
+    "light-white",
+];
+var backgrounds = __spreadArray([], backgroundsShared, true);
+var backgroundsBT = __spreadArray([], backgroundsShared, true);
+
+export { Context as C, Surface as S, backgroundsBT as a, backgrounds as b, camelcase as c };

package/dist/_shared/esm/Tabs-276a0836.js

@@ -0,0 +1,84 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs, s as suffixModifier } from './index.es-4921e8dd.js';
+import React__default, { useContext, useState, useRef, useEffect } from 'react';
+import { $ as $69cb30bb0017df05$export$41fb9f06171c75f4, a as $69cb30bb0017df05$export$7c6e2c02157bb7d2, b as $69cb30bb0017df05$export$54c2e3dc7acea9f5, c as $69cb30bb0017df05$export$be92b6f5f03c0fe9 } from './index-89a7c31c.js';
+import { I as Icon } from './Icon-3e813b34.js';
+import { C as Context } from './Surface-56d329b0.js';
+import { c as classNames } from './index-2e73c2e9.js';
+
+var Tab = function (_a) {
+    var label = _a.label, value = _a.value, icon = _a.icon, iconActive = _a.iconActive, props = __rest(_a, ["label", "value", "icon", "iconActive"]);
+    var surface = useContext(Context).surface;
+    return (React__default.createElement($69cb30bb0017df05$export$41fb9f06171c75f4, __assign({ className: classNames("arc-Tab-trigger", {
+            "arc-Tab-trigger--onDarkSurface": surface === "dark",
+            "arc-Tab-trigger--hasIcon": icon || iconActive
+        }), value: value }, filterDataAttrs(props)),
+        icon && (React__default.createElement("div", { className: "arc-Tab-triggerIcon", "data-testid": "arc-Tab-TriggerIcon" },
+            React__default.createElement(Icon, { icon: icon }))),
+        iconActive && (React__default.createElement("div", { className: "arc-Tab-triggerIcon arc-Tab-triggerIcon--active", "data-testid": "arc-Tab-TriggerIconActive" },
+            React__default.createElement(Icon, { icon: iconActive }))),
+        React__default.createElement("span", { className: "arc-Tab-triggerText" }, label)));
+};
+
+var TabContent = function (_a) {
+    var children = _a.children, value = _a.value, props = __rest(_a, ["children", "value"]);
+    return (React__default.createElement($69cb30bb0017df05$export$7c6e2c02157bb7d2, __assign({ className: "arc-Tab-content", value: value }, filterDataAttrs(props)), children));
+};
+
+var TabsList = function (_a) {
+    var children = _a.children, type = _a.type, isJustified = _a.isJustified, ariaLabel = _a.ariaLabel; _a.overflowGradient; var props = __rest(_a, ["children", "type", "isJustified", "ariaLabel", "overflowGradient"]);
+    var _b = useState(false), rightOverflow = _b[0], setRightOverflow = _b[1];
+    var _c = useState(false), leftOverflow = _c[0], setLeftOverflow = _c[1];
+    var surface = useContext(Context).surface;
+    var tabsRef = useRef(null);
+    var checkOverflow = function () {
+        if (tabsRef.current) {
+            setRightOverflow(tabsRef.current.scrollLeft + tabsRef.current.clientWidth <
+                tabsRef.current.scrollWidth);
+            setLeftOverflow(tabsRef.current.scrollLeft > 0);
+        }
+    };
+    var handleScroll = function () {
+        checkOverflow();
+    };
+    useEffect(function () {
+        var list = tabsRef.current;
+        checkOverflow();
+        if (list) {
+            list.addEventListener("scroll", handleScroll);
+        }
+        return function () {
+            if (list) {
+                list.removeEventListener("scroll", handleScroll);
+            }
+        };
+    });
+    var state = "";
+    if (type === "standard") {
+        if (leftOverflow && rightOverflow) {
+            state = "both";
+        }
+        else if (leftOverflow) {
+            state = "left";
+        }
+        else {
+            state = "right";
+        }
+    }
+    return (React__default.createElement("span", { className: "arc-TabsList-wrapper" },
+        React__default.createElement($69cb30bb0017df05$export$54c2e3dc7acea9f5, __assign({ className: classNames("arc-Tabs", suffixModifier("arc-TabsList--overflow", state), {
+                "arc-Tabs--contained": type === "contained",
+                "arc-Tabs--isJustified": isJustified,
+                "arc-Tabs--onDarkSurface": surface === "dark"
+            }), ref: tabsRef, "aria-label": ariaLabel }, filterDataAttrs(props)), children)));
+};
+
+/** Use `Tabs` to allow users to navigate between different sections of relevant content. */
+var Tabs = function (_a) {
+    var children = _a.children, defaultValue = _a.defaultValue, onValueChange = _a.onValueChange, activationMode = _a.activationMode, props = __rest(_a, ["children", "defaultValue", "onValueChange", "activationMode"]);
+    return (React__default.createElement($69cb30bb0017df05$export$be92b6f5f03c0fe9, __assign({ className: "arc-Tabs-root", defaultValue: defaultValue, onValueChange: onValueChange, activationMode: activationMode }, filterDataAttrs(props)), children));
+};
+Tabs.Tab = Tab;
+Tabs.List = TabsList;
+Tabs.Content = TabContent;
+
+export { Tabs as T };

package/dist/_shared/esm/{Text-a46fb76b.js → Text-98ad2e78.js}

@@ -1,17 +1,17 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-288c66b5.js';
+import { _ as __rest, a as __assign, s as suffixModifier, f as filterDataAttrs } from './index.es-4921e8dd.js';
 import { c as classNames } from './index-2e73c2e9.js';
 import React__default, { useContext } from 'react';
-import { s as suffixModifier } from './suffix-modifier-1ce05abe.js';
-import { C as Context } from './Surface-71d21a9e.js';
+import { C as Context } from './Surface-56d329b0.js';
 
 /**
  * Use `Text` to display text.
  */
 var Text = function (_a) {
     var _b;
-    var _c = _a.align, align = _c === void 0 ? "left" : _c, children = _a.children, id = _a.id, _d = _a.isInline, isInline = _d === void 0 ? false : _d, _e = _a.isMeasured, isMeasured = _e === void 0 ? false : _e, _f = _a.size, size = _f === void 0 ? "m" : _f, _g = _a.tone, tone = _g === void 0 ? "default" : _g, props = __rest(_a, ["align", "children", "id", "isInline", "isMeasured", "size", "tone"]);
+    var _c = _a.align, align = _c === void 0 ? "left" : _c, children = _a.children, id = _a.id, _d = _a.isInline, isInline = _d === void 0 ? false : _d, _e = _a.isMeasured, isMeasured = _e === void 0 ? false : _e, _f = _a.size, size = _f === void 0 ? "m" : _f, _g = _a.tone, tone = _g === void 0 ? "default" : _g, _h = _a.elementType, elementType = _h === void 0 ? "span" : _h, props = __rest(_a, ["align", "children", "id", "isInline", "isMeasured", "size", "tone", "elementType"]);
     var surface = useContext(Context).surface;
-    return (React__default.createElement("span", __assign({ id: id, className: classNames((_b = {
+    var Element = elementType;
+    return (React__default.createElement(Element, __assign({ id: id, className: classNames((_b = {
                 "arc-Text": true
             },
             _b[suffixModifier("arc-Text--align", align)] = align !== "left",

package/dist/_shared/esm/{TextInput-94c7b1a4.js → TextInput-eccd0140.js}

@@ -1,10 +1,10 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-288c66b5.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index.es-4921e8dd.js';
 import { c as classNames } from './index-2e73c2e9.js';
 import React__default, { forwardRef, useContext, useState } from 'react';
-import { u as useAriaDescribedby, F as FormControl } from './FormControl-d873f7fa.js';
-import { C as Context } from './Surface-71d21a9e.js';
-import { V as VisuallyHidden } from './VisuallyHidden-06692fd3.js';
-import { I as Icon } from './Icon-512f834f.js';
+import { u as useAriaDescribedby, F as FormControl } from './FormControl-7ff0a178.js';
+import { C as Context } from './Surface-56d329b0.js';
+import { V as VisuallyHidden } from './VisuallyHidden-fee374a8.js';
+import { T as ThemeIcon } from './ThemeIcon-810de4bc.js';
 
 /**
  * Infer the correct inputMode, pattern and type if specifying a `number` type.
@@ -77,7 +77,7 @@ var TextInputComponent = forwardRef(function (_a, ref) {
                             e.preventDefault();
                             iconButton.onClick();
                         } },
-                        React__default.createElement(Icon, { icon: iconButton.icon, size: buttonIconSize[inputSize] })))),
+                        React__default.createElement(ThemeIcon, { icon: iconButton.icon, size: buttonIconSize[inputSize] })))),
                 suffix && !showPassword ? (React__default.createElement("span", { className: "arc-TextInput-suffix", "aria-hidden": true }, suffix)) : null,
                 showPassword && (React__default.createElement("div", { className: "arc-TextInput-additionalControl" },
                     React__default.createElement("button", { className: "arc-TextInput-passwordToggle", onClick: function () { return setShowPasswordToggle(function (p) { return !p; }); }, type: "button" }, showPasswordToggle ? "Hide" : "Show"),

package/dist/_shared/esm/{ThemeIcon-c2dc41a6.js → ThemeIcon-810de4bc.js}

@@ -1,8 +1,7 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-288c66b5.js';
+import { _ as __rest, a as __assign, s as suffixModifier, f as filterDataAttrs } from './index.es-4921e8dd.js';
 import { c as classNames } from './index-2e73c2e9.js';
 import React__default, { useContext } from 'react';
-import { s as suffixModifier } from './suffix-modifier-1ce05abe.js';
-import { C as Context } from './Surface-71d21a9e.js';
+import { C as Context } from './Surface-56d329b0.js';
 
 var ThemeIcon = function (_a) {
     var _b;

package/dist/_shared/esm/{Toast-de6ca2f3.js → Toast-62932e3b.js}

@@ -1,13 +1,12 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-288c66b5.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index.es-4921e8dd.js';
 import React__default, { forwardRef, useContext, useState, useEffect, createElement, useRef, createContext, useCallback, useMemo, Fragment } from 'react';
-import { b as $6ed0406888f73fc4$export$c7b2cbe3552a0d05, e as $8927f6f2acc4f386$export$250ffa63cdc0d034, _ as _extends, d as $e42e1063c40fb3ef$export$b9ecd428b558ff10, f as $b1b2314f5f9a1d84$export$25bec8c6f54ee79a, g as $8927f6f2acc4f386$export$6d1a0317bde7de7f, $ as $c512c27ab02ef895$export$50c7b4e9d9f19c1, h as $9f79659886946c16$export$e5c5a5f917a5871c, a as $71cd76cc60e0454e$export$6f32135080cb4c3 } from './index-cace3545.js';
+import { c as $6ed0406888f73fc4$export$c7b2cbe3552a0d05, a as $8927f6f2acc4f386$export$250ffa63cdc0d034, _ as _extends, b as $e42e1063c40fb3ef$export$b9ecd428b558ff10, e as $b1b2314f5f9a1d84$export$25bec8c6f54ee79a, h as $8927f6f2acc4f386$export$6d1a0317bde7de7f, $ as $c512c27ab02ef895$export$50c7b4e9d9f19c1, f as $9f79659886946c16$export$e5c5a5f917a5871c, d as $71cd76cc60e0454e$export$6f32135080cb4c3 } from './index-57d4cb34.js';
 import ReactDOM__default, { createPortal } from 'react-dom';
-import { $ as $e02a7d9cb1dc128c$export$c74125a8e3af6bb2 } from './index-f97466e9.js';
-import { $ as $addc16e1bbe58fd0$export$3a72a57244d6e765 } from './index-6028d797.js';
-import { $ as $921a889cee6df7e8$export$99c2b779aa4e8b8b } from './index-fa93ec97.js';
-import { $ as $ea1ef594cf570d83$export$439d29a4e110a164 } from './index-5113ed53.js';
+import { $ as $e02a7d9cb1dc128c$export$c74125a8e3af6bb2 } from './index-14c7f4da.js';
+import { $ as $addc16e1bbe58fd0$export$3a72a57244d6e765, a as $ea1ef594cf570d83$export$439d29a4e110a164 } from './index-e969452b.js';
+import { $ as $921a889cee6df7e8$export$99c2b779aa4e8b8b } from './index-f2ddcbe2.js';
 import { c as classNames } from './index-2e73c2e9.js';
-import { T as ThemeIcon } from './ThemeIcon-c2dc41a6.js';
+import { T as ThemeIcon } from './ThemeIcon-810de4bc.js';
 
 const $5cb92bef7577960e$var$CONTEXT_UPDATE = 'dismissableLayer.update';
 const $5cb92bef7577960e$var$POINTER_DOWN_OUTSIDE = 'dismissableLayer.pointerDownOutside';

package/dist/_shared/esm/{UniversalHeader-456ad60c.js → UniversalHeader-370d7fa4.js}

@@ -1,13 +1,13 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-288c66b5.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index.es-4921e8dd.js';
 import React__default from 'react';
-import { S as Surface } from './Surface-71d21a9e.js';
+import { S as Surface } from './Surface-56d329b0.js';
 
 /**
  * Use `UniversalHeader` to display a group-level page header.
  */
 var UniversalHeader = function (_a) {
     var children = _a.children, ContentSlot = _a.ContentSlot, props = __rest(_a, ["children", "ContentSlot"]);
-    return (React__default.createElement("nav", __assign({ className: "arc-UniversalHeader" }, filterDataAttrs(props)),
+    return (React__default.createElement("nav", __assign({ className: "arc-UniversalHeader", "aria-label": "universial navigation" }, filterDataAttrs(props)),
         React__default.createElement(Surface, { background: "light-neutral-02" },
             React__default.createElement("ul", { className: "arc-UniversalHeader-items" },
                 children,

package/dist/_shared/esm/{VerticalSpace-b07cd8e6.js → VerticalSpace-549fbdc8.js}

@@ -1,4 +1,4 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-288c66b5.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index.es-4921e8dd.js';
 import { c as classNames } from './index-2e73c2e9.js';
 import React__default from 'react';
 

package/dist/_shared/esm/VisuallyHidden-fee374a8.js

@@ -0,0 +1,12 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index.es-4921e8dd.js';
+import React__default from 'react';
+
+/**
+ * Use `VisuallyHidden` to provide text for screen readers that is visually hidden on screen.
+ */
+var VisuallyHidden = function (_a) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return (React__default.createElement("span", __assign({ "data-testid": "visually-hidden", className: "arc-VisuallyHidden" }, filterDataAttrs(props)), children));
+};
+
+export { VisuallyHidden as V };

package/dist/_shared/esm/{component-d0a555cf.js → component-94b3dbfe.js}

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useState } from 'react';
-import { a as __assign, _ as __rest } from './index-288c66b5.js';
+import { a as __assign, _ as __rest } from './index.es-4921e8dd.js';
 
 var useThemeElement = function () {
     var _a = useState(undefined), themeElement = _a[0], setElement = _a[1];