@arc-ui/components 11.0.0 → 11.2.0

package/dist/_shared/esm/{FormControl-feedc495.d.ts → FormControl-84c9ace6.d.ts}

@@ -1,23 +1,54 @@
 /// <reference types="react" />
 import React from "react";
-import { FC } from "react";
+import { FC, ReactNode } from "react";
+/**
+ * Use `FormControlDisclosure` to display content that is only visible when toggled into
+ * an "open" state.
+ */
+declare const FormControlDisclosure: FC<FormControlDisclosureProps>;
+interface FormControlDisclosureProps {
+    /**
+     * Content to display in the FormControlDisclosure.
+     */
+    children: ReactNode;
+    /**
+     * FormControlDisclosure ID.
+     */
+    id?: string;
+    /**
+     * The FormControlDisclosure summary text.
+     */
+    summary: string;
+    /**
+     * On Click handler for FormControlDisclosure summary disclosure.
+     */
+    onClick?: () => void;
+    /**
+     * Disclosure size.
+     */
+    size?: "s" | "l";
+}
 /**
  * Optionally define ariaDescribedBy if errorMessage or helper exist.
  */
-declare const useAriaDescribedby: ({ id, idError, idHelper, errorMessage, helper }: {
+declare const useAriaDescribedby: ({ id, idError, idHelper, idDisclosure, errorMessage, helper, disclosureText }: {
     id?: string | undefined;
     idError?: string | undefined;
+    idDisclosure?: string | undefined;
     idHelper?: string | undefined;
     errorMessage?: any;
     helper?: any;
+    disclosureText?: string | undefined;
 }) => {
     ariaDescribedby: undefined;
     idHelper: undefined;
     idError: undefined;
+    idDisclosure: undefined;
 } | {
     ariaDescribedby: string | undefined;
     idError: string;
     idHelper: string;
+    idDisclosure: string;
 };
 type RequirementStatus = "required" | "optional" | "not-applicable";
 declare const Context: React.Context<{
@@ -62,9 +93,26 @@ interface FormControlProps {
      * Label for the FormControl.
      */
     label: string;
+    /**
+     * Determins if the Label should be in a disabled state
+     */
+    isDisabled?: boolean;
     /**
      * Label size.
      */
     labelSize?: "s" | "l";
+    /**
+     *   Use `DisclosureTitle` to display content that is only visible when toggled into
+     * an "open" state. This overrides helper text.
+     */
+    disclosureTitle?: string;
+    /**
+     * Text to display within the disclosure
+     */
+    disclosureText?: string;
+    /**
+     * onClick handler for FormControlDisclosure
+     */
+    onClickDisclosure?: () => void;
 }
-export { useAriaDescribedby, FormControl, FormControlProps, Context as FormControlContext };
+export { FormControlDisclosure, FormControlDisclosureProps, useAriaDescribedby, FormControl, FormControlProps, Context as FormControlContext };

package/dist/_shared/esm/FormControl-84c9ace6.js

@@ -0,0 +1,138 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-229fc864.js';
+import { c as classNames } from './index-2ae58626.js';
+import React__default, { useContext, useState, createContext } from 'react';
+import { C as Context$1 } from './Surface-bf201530.js';
+import { T as Text } from './Text-6b958ad8.js';
+import { B as BtIconChevronRightMid_2 } from './BtIconChevronRightMid-d9b11761.js';
+
+/**
+ * Optionally define ariaDescribedBy if errorMessage or helper exist.
+ */
+var useAriaDescribedby = function (_a) {
+    var id = _a.id, _b = _a.idError, idError = _b === void 0 ? "".concat(id, "-error") : _b, _c = _a.idHelper, idHelper = _c === void 0 ? "".concat(id, "-helper") : _c, _d = _a.idDisclosure, idDisclosure = _d === void 0 ? "".concat(id, "-disclosure") : _d, errorMessage = _a.errorMessage, helper = _a.helper, disclosureText = _a.disclosureText;
+    if (!id) {
+        return {
+            ariaDescribedby: undefined,
+            idHelper: undefined,
+            idError: undefined,
+            idDisclosure: undefined
+        };
+    }
+    var ariaDescribedbyArr = [];
+    if (errorMessage) {
+        ariaDescribedbyArr.push(idError);
+    }
+    if (helper) {
+        ariaDescribedbyArr.push(idHelper);
+    }
+    if (disclosureText) {
+        ariaDescribedbyArr.push(idDisclosure);
+    }
+    var ariaDescribedby = ariaDescribedbyArr.length > 0 ? ariaDescribedbyArr.join(" ") : undefined;
+    return { ariaDescribedby: ariaDescribedby, idError: idError, idHelper: idHelper, idDisclosure: idDisclosure };
+};
+
+const React = React__default;
+const BtIconAlert = props =>
+  /*#__PURE__*/ React.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32"
+      },
+      props
+    ),
+    /*#__PURE__*/ React.createElement("defs", null),
+    /*#__PURE__*/ React.createElement("path", {
+      d:
+        "M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,27A13,13,0,1,1,29,16,13.01474,13.01474,0,0,1,16,29Z",
+      fill: "currentColor"
+    }),
+    /*#__PURE__*/ React.createElement("path", {
+      fill: "currentColor",
+      d: "M16 20.99335A1 1 0 1 0 16 22.99335 1 1 0 1 0 16 20.99335z"
+    }),
+    /*#__PURE__*/ React.createElement("path", {
+      d:
+        "M16.00488,19.00977a.49972.49972,0,0,0,.5-.5L16.50684,9.5a.5.5,0,0,0-1,0l-.002,9.00977A.5.5,0,0,0,16.00488,19.00977Z",
+      fill: "currentColor"
+    })
+  );
+var BtIconAlert_2 = BtIconAlert;
+
+/**
+ * Use `FormControlDisclosure` to display content that is only visible when toggled into
+ * an "open" state.
+ */
+var FormControlDisclosure = function (_a) {
+    var children = _a.children, summary = _a.summary, onClick = _a.onClick, _b = _a.size, size = _b === void 0 ? "l" : _b, id = _a.id, props = __rest(_a, ["children", "summary", "onClick", "size", "id"]);
+    var surface = useContext(Context$1).surface;
+    var _c = useState(false), disclousreState = _c[0], setDisclosureState = _c[1];
+    var handleOnClick = function () {
+        onClick && onClick();
+        setDisclosureState(function (prevState) { return !prevState; });
+    };
+    return (React__default.createElement("details", __assign({ className: classNames({
+            "arc-FormControlDisclosure": true,
+            "arc-FormControlDisclosure--onDarkSurface": surface === "dark"
+        }) }, filterDataAttrs(props), { "data-testid": "FormControlDisclosure" }),
+        React__default.createElement("summary", { className: "arc-FormControlDisclosure-summary", onClick: handleOnClick, "aria-expanded": disclousreState },
+            React__default.createElement("span", { className: "arc-FormControlDisclosure-summary-icon" },
+                React__default.createElement(BtIconChevronRightMid_2, null)),
+            React__default.createElement(Text, { size: size === "l" ? "m" : "s" }, summary)),
+        React__default.createElement("div", { className: "arc-FormControlDisclosure-details" },
+            React__default.createElement(Text, { size: size === "l" ? "m" : "s" },
+                React__default.createElement("span", { id: id }, children)))));
+};
+
+var defaultContext = {
+    requirementStatus: null
+};
+var Context = createContext(defaultContext);
+var Provider = Context.Provider;
+/**
+ * Use `FormControl` to provide inputs with labels, helper text and error messages
+ */
+var FormControl = function (_a) {
+    var children = _a.children, _b = _a.elementType, ElementType = _b === void 0 ? "div" : _b, errorMessage = _a.errorMessage, helper = _a.helper, htmlFor = _a.htmlFor, id = _a.id, label = _a.label, _c = _a.labelSize, labelSize = _c === void 0 ? "l" : _c, _d = _a.requirementStatus, requirementStatus = _d === void 0 ? "optional" : _d, isDisabled = _a.isDisabled, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, onClickDisclosure = _a.onClickDisclosure, props = __rest(_a, ["children", "elementType", "errorMessage", "helper", "htmlFor", "id", "label", "labelSize", "requirementStatus", "isDisabled", "disclosureTitle", "disclosureText", "onClickDisclosure"]);
+    var surface = useContext(Context$1).surface;
+    var _e = useAriaDescribedby({
+        disclosureText: disclosureText,
+        errorMessage: errorMessage,
+        helper: helper,
+        id: htmlFor || id // `htmlFor` is preference to keep this deterministic with TextInput
+    }), ariaDescribedby = _e.ariaDescribedby, idError = _e.idError, idHelper = _e.idHelper, idDisclosure = _e.idDisclosure;
+    var LabelType = ElementType === "div" ? "label" : "legend";
+    var elementProps = {};
+    var labelProps = {};
+    if (LabelType === "label") {
+        labelProps["htmlFor"] = htmlFor;
+        if (htmlFor) {
+            labelProps["id"] = "".concat(htmlFor, "-label");
+        }
+        else if (id) {
+            labelProps["id"] = "".concat(id, "-label");
+        }
+    }
+    else {
+        elementProps["aria-describedby"] = ariaDescribedby;
+    }
+    return (React__default.createElement(Provider, { value: { requirementStatus: requirementStatus } },
+        React__default.createElement(ElementType, __assign({ className: classNames({
+                "arc-FormControl": true,
+                "arc-FormControl--isDisabled": isDisabled,
+                "arc-FormControl--smallLabel": labelSize === "s",
+                "arc-FormControl--onDarkSurface": surface === "dark"
+            }), id: id }, elementProps, filterDataAttrs(props)),
+            React__default.createElement(LabelType, __assign({ className: "arc-FormControl-label" }, labelProps),
+                label,
+                requirementStatus === "optional" && (React__default.createElement("span", { className: "arc-FormControl-labelOptional" }, "(optional)"))),
+            children,
+            errorMessage ? (React__default.createElement("div", { className: "arc-FormControl-error", id: idError },
+                React__default.createElement("span", { className: "arc-FormControl-error--icon" },
+                    React__default.createElement(BtIconAlert_2, null)),
+                errorMessage)) : disclosureTitle ? (React__default.createElement(FormControlDisclosure, { onClick: onClickDisclosure, summary: disclosureTitle, size: labelSize, id: idDisclosure }, disclosureText)) : (helper && (React__default.createElement("div", { className: "arc-FormControl-helper", id: idHelper }, helper))))));
+};
+
+export { BtIconAlert_2 as B, Context as C, FormControl as F, useAriaDescribedby as u };

package/dist/_shared/esm/{Heading-183be76c.js → Heading-eb1e42db.js}

@@ -1,8 +1,8 @@
 import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-229fc864.js';
 import { c as classNames } from './index-2ae58626.js';
-import React, { useContext } from 'react';
+import React__default, { useContext } from 'react';
 import { s as suffixModifier } from './suffix-modifier-f5e28822.js';
-import { C as Context } from './Surface-d515d212.js';
+import { C as Context } from './Surface-bf201530.js';
 
 /**
  * Use `Heading` to display heading text.
@@ -15,7 +15,7 @@ var Heading = function (_a) {
     if (level) {
         Element = "h".concat(level);
     }
-    return (React.createElement(Element, __assign({ className: classNames((_b = {
+    return (React__default.createElement(Element, __assign({ className: classNames((_b = {
                 "arc-Heading": true
             },
             _b[suffixModifier("arc-Heading--align", align)] = align && align !== "left",
@@ -27,7 +27,7 @@ var Heading = function (_a) {
 };
 var HeadingProposition = function (_a) {
     var children = _a.children;
-    return React.createElement("span", { className: "arc-Heading-proposition" }, children);
+    return React__default.createElement("span", { className: "arc-Heading-proposition" }, children);
 };
 HeadingProposition.displayName = "Heading.Proposition";
 Heading.Proposition = HeadingProposition;

package/dist/_shared/esm/{Icon-76d0d8c0.js → Icon-61f7237a.js}

@@ -1,10 +1,10 @@
 import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-229fc864.js';
-import React$1, { useContext } from 'react';
+import React__default, { useContext } from 'react';
 import { c as classNames } from './index-2ae58626.js';
 import { s as suffixModifier } from './suffix-modifier-f5e28822.js';
-import { C as Context } from './Surface-d515d212.js';
+import { C as Context } from './Surface-bf201530.js';
 
-const React = React$1;
+const React = React__default;
 const ArcIconArc = props =>
   /*#__PURE__*/ React.createElement(
     "svg",
@@ -31,7 +31,7 @@ var Icon = function (_a) {
     var testId = _a.testId, _c = _a.color, color = _c === void 0 ? "auto" : _c, _d = _a.icon, icon = _d === void 0 ? ArcIconArc_2 : _d, _e = _a.isInline, isInline = _e === void 0 ? false : _e, label = _a.label, size = _a.size, props = __rest(_a, ["testId", "color", "icon", "isInline", "label", "size"]);
     var surface = useContext(Context).surface;
     var Icon = icon;
-    return (React$1.createElement("span", __assign({ "data-testid": testId, "aria-label": label, className: classNames((_b = {},
+    return (React__default.createElement("span", __assign({ "data-testid": testId, "aria-label": label, className: classNames((_b = {},
             _b["arc-Icon"] = true,
             _b[suffixModifier("arc-Icon--color", color)] = color !== "auto",
             _b["arc-Icon--inline"] = isInline,
@@ -40,7 +40,7 @@ var Icon = function (_a) {
             height: size,
             width: size
         } }, filterDataAttrs(props)),
-        React$1.createElement(Icon, null)));
+        React__default.createElement(Icon, null)));
 };
 
 export { Icon as I };

package/dist/_shared/esm/{Image-7e4948f6.js → Image-c0f3d42f.js}

@@ -1,6 +1,6 @@
 import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-229fc864.js';
 import { c as classNames } from './index-2ae58626.js';
-import React, { useEffect } from 'react';
+import React__default, { useEffect } from 'react';
 import { s as suffixModifier } from './suffix-modifier-f5e28822.js';
 
 /**
@@ -11,27 +11,27 @@ var Image = function (_a) {
     var _b;
     var alt = _a.alt, _c = _a.anchor, anchor = _c === void 0 ? "C" : _c, children = _a.children, fillColor = _a.fillColor, fit = _a.fit, height = _a.height, loading = _a.loading, overlay = _a.overlay, sizes = _a.sizes, src = _a.src, srcSet = _a.srcSet, width = _a.width, props = __rest(_a, ["alt", "anchor", "children", "fillColor", "fit", "height", "loading", "overlay", "sizes", "src", "srcSet", "width"]);
     useEffect(function () {
-        React.Children.map(children, function (item) {
+        React__default.Children.map(children, function (item) {
             if (item && item.type !== ImageSource) {
                 throw new Error("Illegal child passed to <Image />. Ensure to only use <Image.Source />.");
             }
         });
     }, [children]);
-    var img = (React.createElement("img", { className: "arc-Image-img", alt: alt, height: fit === "cover" ? undefined : height, loading: loading, sizes: children ? undefined : sizes, src: src, srcSet: children ? undefined : srcSet, width: fit === "cover" ? undefined : width }));
-    return (React.createElement("div", __assign({ className: classNames((_b = {
+    var img = (React__default.createElement("img", { className: "arc-Image-img", alt: alt, height: fit === "cover" ? undefined : height, loading: loading, sizes: children ? undefined : sizes, src: src, srcSet: children ? undefined : srcSet, width: fit === "cover" ? undefined : width }));
+    return (React__default.createElement("div", __assign({ className: classNames((_b = {
                 "arc-Image": true,
                 "arc-Image--cover": fit === "cover"
             },
             _b["arc-Image--anchor".concat(anchor)] = fit === "cover",
             _b[suffixModifier("arc-Image--overlay", overlay || "")] = overlay,
-            _b)), style: __assign(__assign(__assign({}, (fillColor && { backgroundColor: fillColor })), (fit === "cover" && height ? { height: "".concat(height, "px") } : null)), (fit === "cover" && width ? { width: "".concat(width, "px") } : null)) }, filterDataAttrs(props)), children ? (React.createElement("picture", null,
+            _b)), style: __assign(__assign(__assign({}, (fillColor && { backgroundColor: fillColor })), (fit === "cover" && height ? { height: "".concat(height, "px") } : null)), (fit === "cover" && width ? { width: "".concat(width, "px") } : null)) }, filterDataAttrs(props)), children ? (React__default.createElement("picture", null,
         children,
         " ",
-        img)) : (React.createElement(React.Fragment, null, img))));
+        img)) : (React__default.createElement(React__default.Fragment, null, img))));
 };
 var ImageSource = function (_a) {
     var height = _a.height, media = _a.media, srcSet = _a.srcSet, sizes = _a.sizes, type = _a.type; _a.width; var props = __rest(_a, ["height", "media", "srcSet", "sizes", "type", "width"]);
-    return (React.createElement("source", __assign({ height: height, media: media, sizes: sizes, srcSet: srcSet, type: type }, filterDataAttrs(props))));
+    return (React__default.createElement("source", __assign({ height: height, media: media, sizes: sizes, srcSet: srcSet, type: type }, filterDataAttrs(props))));
 };
 ImageSource.displayName = "Image.Source";
 Image.Source = ImageSource;

package/dist/_shared/esm/{Section-f1256c87.js → Section-7bc71e26.js}

@@ -1,13 +1,13 @@
 import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-229fc864.js';
 import { c as classNames } from './index-2ae58626.js';
-import React from 'react';
+import React__default from 'react';
 
 /**
  * Use `Section` to compose content into vertical page layouts.
  */
 var Section = function (_a) {
     var children = _a.children, _b = _a.isFullWidth, isFullWidth = _b === void 0 ? false : _b, _c = _a.isDebugVisible, isDebugVisible = _c === void 0 ? false : _c, props = __rest(_a, ["children", "isFullWidth", "isDebugVisible"]);
-    return (React.createElement("div", __assign({ className: classNames({
+    return (React__default.createElement("div", __assign({ className: classNames({
             "arc-Section": true,
             "arc-Section--fullWidth": isFullWidth,
             "arc-Section--debugVisible": isDebugVisible

package/dist/_shared/esm/{Surface-d515d212.js → Surface-bf201530.js}

@@ -1,6 +1,6 @@
 import { b as __spreadArray, _ as __rest, a as __assign, c as camelCase, f as filterDataAttrs } from './index-229fc864.js';
 import { c as classNames } from './index-2ae58626.js';
-import React, { createContext } from 'react';
+import React__default, { createContext } from 'react';
 
 var defaultContext = { surface: "light" };
 var Context = createContext(defaultContext);
@@ -19,8 +19,8 @@ var Surface = function (_a) {
         background === "darker") {
         surface = "dark";
     }
-    return (React.createElement(Provider, { value: { surface: surface } },
-        React.createElement("div", __assign({ className: classNames((_b = {
+    return (React__default.createElement(Provider, { value: { surface: surface } },
+        React__default.createElement("div", __assign({ className: classNames((_b = {
                     "arc-Surface": true
                 },
                 _b["arc-Surface--".concat(background &&

package/dist/_shared/esm/{Text-d8988620.js → Text-6b958ad8.js}

@@ -1,8 +1,8 @@
 import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-229fc864.js';
 import { c as classNames } from './index-2ae58626.js';
-import React, { useContext } from 'react';
+import React__default, { useContext } from 'react';
 import { s as suffixModifier } from './suffix-modifier-f5e28822.js';
-import { C as Context } from './Surface-d515d212.js';
+import { C as Context } from './Surface-bf201530.js';
 
 /**
  * Use `Text` to display text.
@@ -11,7 +11,7 @@ var Text = function (_a) {
     var _b;
     var _c = _a.align, align = _c === void 0 ? "left" : _c, children = _a.children, _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", "isInline", "isMeasured", "size", "tone"]);
     var surface = useContext(Context).surface;
-    return (React.createElement("span", __assign({ className: classNames((_b = {
+    return (React__default.createElement("span", __assign({ className: classNames((_b = {
                 "arc-Text": true
             },
             _b[suffixModifier("arc-Text--align", align)] = align !== "left",

package/dist/_shared/esm/VerticalSpace-6b4f5e50.d.ts

@@ -0,0 +1,18 @@
+import { FC } from "react";
+/**
+ * Use `VerticalSpace` to create vertical space between components.
+ */
+declare const VerticalSpace: FC<VerticalSpaceProps>;
+type VerticalSpaceSize = "4" | "8" | "12" | "16" | "24" | "32" | "48" | "64" | "96" | "128";
+interface VerticalSpaceProps {
+    /**
+     * Should the VerticalSpace be visible for debugging and documentation
+     * purposes?
+     */
+    isDebugVisible?: boolean;
+    /**
+     * Size of the VerticalSpace.
+     */
+    size?: VerticalSpaceSize;
+}
+export { VerticalSpace, VerticalSpaceSize, VerticalSpaceProps };

package/dist/_shared/esm/VerticalSpace-6b4f5e50.js

@@ -0,0 +1,19 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-229fc864.js';
+import { c as classNames } from './index-2ae58626.js';
+import React__default from 'react';
+
+/**
+ * Use `VerticalSpace` to create vertical space between components.
+ */
+var VerticalSpace = function (_a) {
+    var _b;
+    var _c = _a.isDebugVisible, isDebugVisible = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? "24" : _d, props = __rest(_a, ["isDebugVisible", "size"]);
+    return (React__default.createElement("div", __assign({ className: classNames((_b = {
+                "arc-VerticalSpace": true
+            },
+            _b["arc-VerticalSpace--size".concat(size)] = size && size !== "24",
+            _b["arc-VerticalSpace--debugVisible"] = isDebugVisible,
+            _b)) }, filterDataAttrs(props))));
+};
+
+export { VerticalSpace as V };

package/dist/_shared/esm/VisuallyHidden-b9eebf71.d.ts

@@ -0,0 +1,12 @@
+import { FC, ReactNode } from "react";
+/**
+ * Provides text for screen readers that is visually hidden.
+ */
+declare const VisuallyHidden: FC<VisuallyHiddenProps>;
+interface VisuallyHiddenProps {
+    /**
+     * Content to be Visually Hidden.
+     */
+    children?: ReactNode;
+}
+export { VisuallyHidden, VisuallyHiddenProps };

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

@@ -0,0 +1,11 @@
+import React__default from 'react';
+
+/**
+ * Provides text for screen readers that is visually hidden.
+ */
+var VisuallyHidden = function (_a) {
+    var children = _a.children;
+    return (React__default.createElement("span", { "data-testid": "visually-hidden", className: "arc-VisuallyHidden" }, children));
+};
+
+export { VisuallyHidden as V };

package/dist/_shared/esm/index-c81c9401.d.ts

@@ -1,4 +1,4 @@
-export * from "./FormControl-feedc495";
+export * from "./FormControl-84c9ace6";
 export * from "../../Card/Card.esm";
 export * from "./index.es-00cb3bcb";
 export * from "../../TextInput/TextInput.esm";