@arc-ui/components 11.0.0 → 11.2.0

package/dist/Switch/Switch.cjs.js

@@ -0,0 +1,210 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var index = require('../_shared/cjs/index-45bfb67b.js');
+var BtIconTickAlt2Px = require('../_shared/cjs/BtIconTickAlt2Px-b12ecc78.js');
+var Icon = require('../_shared/cjs/Icon-719d13d4.js');
+var Surface = require('../_shared/cjs/Surface-d6b8010e.js');
+var FormControl = require('../_shared/cjs/FormControl-e6b7d7c5.js');
+var VerticalSpace = require('../_shared/cjs/VerticalSpace-65ad083c.js');
+var Text = require('../_shared/cjs/Text-1d3844be.js');
+require('react-dom');
+require('../_shared/cjs/index-78b35bc1.js');
+require('../_shared/cjs/suffix-modifier-edf7851e.js');
+require('../_shared/cjs/BtIconChevronRightMid-5a38d855.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function $db6c3485150b8e66$export$1ab7ae714698c4b8(element) {
+    const [size, setSize] = React.useState(undefined);
+    BtIconTickAlt2Px.$9f79659886946c16$export$e5c5a5f917a5871c(()=>{
+        if (element) {
+            // provide size as early as possible
+            setSize({
+                width: element.offsetWidth,
+                height: element.offsetHeight
+            });
+            const resizeObserver = new ResizeObserver((entries)=>{
+                if (!Array.isArray(entries)) return;
+                 // Since we only observe the one element, we don't need to loop over the
+                // array
+                if (!entries.length) return;
+                const entry = entries[0];
+                let width;
+                let height;
+                if ('borderBoxSize' in entry) {
+                    const borderSizeEntry = entry['borderBoxSize']; // iron out differences between browsers
+                    const borderSize = Array.isArray(borderSizeEntry) ? borderSizeEntry[0] : borderSizeEntry;
+                    width = borderSize['inlineSize'];
+                    height = borderSize['blockSize'];
+                } else {
+                    // for browsers that don't support `borderBoxSize`
+                    // we calculate it ourselves to get the correct border box.
+                    width = element.offsetWidth;
+                    height = element.offsetHeight;
+                }
+                setSize({
+                    width: width,
+                    height: height
+                });
+            });
+            resizeObserver.observe(element, {
+                box: 'border-box'
+            });
+            return ()=>resizeObserver.unobserve(element)
+            ;
+        } else // We only want to reset to `undefined` when the element becomes `null`,
+        // not if it changes to another element.
+        setSize(undefined);
+    }, [
+        element
+    ]);
+    return size;
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * Switch
+ * -----------------------------------------------------------------------------------------------*/ const $6be4966fd9bbc698$var$SWITCH_NAME = 'Switch';
+const [$6be4966fd9bbc698$var$createSwitchContext, $6be4966fd9bbc698$export$cf7f5f17f69cbd43] = BtIconTickAlt2Px.$c512c27ab02ef895$export$50c7b4e9d9f19c1($6be4966fd9bbc698$var$SWITCH_NAME);
+const [$6be4966fd9bbc698$var$SwitchProvider, $6be4966fd9bbc698$var$useSwitchContext] = $6be4966fd9bbc698$var$createSwitchContext($6be4966fd9bbc698$var$SWITCH_NAME);
+const $6be4966fd9bbc698$export$b5d5cf8927ab7262 = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
+    const { __scopeSwitch: __scopeSwitch , name: name , checked: checkedProp , defaultChecked: defaultChecked , required: required , disabled: disabled , value: value = 'on' , onCheckedChange: onCheckedChange , ...switchProps } = props;
+    const [button, setButton] = React.useState(null);
+    const composedRefs = BtIconTickAlt2Px.$6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, (node)=>setButton(node)
+    );
+    const hasConsumerStoppedPropagationRef = React.useRef(false); // We set this to true by default so that events bubble to forms without JS (SSR)
+    const isFormControl = button ? Boolean(button.closest('form')) : true;
+    const [checked = false, setChecked] = BtIconTickAlt2Px.$71cd76cc60e0454e$export$6f32135080cb4c3({
+        prop: checkedProp,
+        defaultProp: defaultChecked,
+        onChange: onCheckedChange
+    });
+    return /*#__PURE__*/ React.createElement($6be4966fd9bbc698$var$SwitchProvider, {
+        scope: __scopeSwitch,
+        checked: checked,
+        disabled: disabled
+    }, /*#__PURE__*/ React.createElement(BtIconTickAlt2Px.$8927f6f2acc4f386$export$250ffa63cdc0d034.button, BtIconTickAlt2Px._extends({
+        type: "button",
+        role: "switch",
+        "aria-checked": checked,
+        "aria-required": required,
+        "data-state": $6be4966fd9bbc698$var$getState(checked),
+        "data-disabled": disabled ? '' : undefined,
+        disabled: disabled,
+        value: value
+    }, switchProps, {
+        ref: composedRefs,
+        onClick: BtIconTickAlt2Px.$e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onClick, (event)=>{
+            setChecked((prevChecked)=>!prevChecked
+            );
+            if (isFormControl) {
+                hasConsumerStoppedPropagationRef.current = event.isPropagationStopped(); // if switch is in a form, stop propagation from the button so that we only propagate
+                // one click event (from the input). We propagate changes from an input so that native
+                // form validation works and form events reflect switch updates.
+                if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();
+            }
+        })
+    })), isFormControl && /*#__PURE__*/ React.createElement($6be4966fd9bbc698$var$BubbleInput, {
+        control: button,
+        bubbles: !hasConsumerStoppedPropagationRef.current,
+        name: name,
+        value: value,
+        checked: checked,
+        required: required,
+        disabled: disabled // We transform because the input is absolutely positioned but we have
+        ,
+        style: {
+            transform: 'translateX(-100%)'
+        }
+    }));
+});
+/* -------------------------------------------------------------------------------------------------
+ * SwitchThumb
+ * -----------------------------------------------------------------------------------------------*/ const $6be4966fd9bbc698$var$THUMB_NAME = 'SwitchThumb';
+const $6be4966fd9bbc698$export$4d07bf653ea69106 = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
+    const { __scopeSwitch: __scopeSwitch , ...thumbProps } = props;
+    const context = $6be4966fd9bbc698$var$useSwitchContext($6be4966fd9bbc698$var$THUMB_NAME, __scopeSwitch);
+    return /*#__PURE__*/ React.createElement(BtIconTickAlt2Px.$8927f6f2acc4f386$export$250ffa63cdc0d034.span, BtIconTickAlt2Px._extends({
+        "data-state": $6be4966fd9bbc698$var$getState(context.checked),
+        "data-disabled": context.disabled ? '' : undefined
+    }, thumbProps, {
+        ref: forwardedRef
+    }));
+});
+/* ---------------------------------------------------------------------------------------------- */ const $6be4966fd9bbc698$var$BubbleInput = (props)=>{
+    const { control: control , checked: checked , bubbles: bubbles = true , ...inputProps } = props;
+    const ref = React.useRef(null);
+    const prevChecked = BtIconTickAlt2Px.$010c2913dbd2fe3d$export$5cae361ad82dce8b(checked);
+    const controlSize = $db6c3485150b8e66$export$1ab7ae714698c4b8(control); // Bubble checked change to parents (e.g form change event)
+    React.useEffect(()=>{
+        const input = ref.current;
+        const inputProto = window.HTMLInputElement.prototype;
+        const descriptor = Object.getOwnPropertyDescriptor(inputProto, 'checked');
+        const setChecked = descriptor.set;
+        if (prevChecked !== checked && setChecked) {
+            const event = new Event('click', {
+                bubbles: bubbles
+            });
+            setChecked.call(input, checked);
+            input.dispatchEvent(event);
+        }
+    }, [
+        prevChecked,
+        checked,
+        bubbles
+    ]);
+    return /*#__PURE__*/ React.createElement("input", BtIconTickAlt2Px._extends({
+        type: "checkbox",
+        "aria-hidden": true,
+        defaultChecked: checked
+    }, inputProps, {
+        tabIndex: -1,
+        ref: ref,
+        style: {
+            ...props.style,
+            ...controlSize,
+            position: 'absolute',
+            pointerEvents: 'none',
+            opacity: 0,
+            margin: 0
+        }
+    }));
+};
+function $6be4966fd9bbc698$var$getState(checked) {
+    return checked ? 'checked' : 'unchecked';
+}
+const $6be4966fd9bbc698$export$be92b6f5f03c0fe9 = $6be4966fd9bbc698$export$b5d5cf8927ab7262;
+const $6be4966fd9bbc698$export$6521433ed15a34db = $6be4966fd9bbc698$export$4d07bf653ea69106;
+
+/** Use `Switch` to toggle between checked and not checked. */
+var Switch = function (_a) {
+    var defaultChecked = _a.defaultChecked, onCheckedChange = _a.onCheckedChange, label = _a.label, name = _a.name, onBlur = _a.onBlur, value = _a.value, _b = _a.isDisabled, isDisabled = _b === void 0 ? false : _b, errorMessage = _a.errorMessage, id = _a.id, _c = _a.labelSize, labelSize = _c === void 0 ? "s" : _c, statusText = _a.statusText, _d = _a.hideLabel, hideLabel = _d === void 0 ? false : _d;
+    var surface = React.useContext(Surface.Context).surface;
+    return (React__default["default"].createElement(FormControl.FormControl, { errorMessage: errorMessage, htmlFor: id, isDisabled: isDisabled, label: hideLabel ? "" : label, labelSize: labelSize, requirementStatus: "not-applicable" },
+        !hideLabel && React__default["default"].createElement(VerticalSpace.VerticalSpace, { size: "8" }),
+        React__default["default"].createElement("div", { className: "arc-Switch-container" },
+            React__default["default"].createElement($6be4966fd9bbc698$export$be92b6f5f03c0fe9, { id: id, "aria-label": label, defaultChecked: defaultChecked, name: name, value: value, onBlur: onBlur, onCheckedChange: onCheckedChange, disabled: isDisabled, className: index.classNames("arc-Switch", {
+                    "arc-Switch--large": labelSize === "l",
+                    "arc-Switch--isDisabled": isDisabled,
+                    "arc-Switch--onDarkSurface": surface === "dark"
+                }) },
+                React__default["default"].createElement("div", { className: "arc-Switch-wrapper" },
+                    React__default["default"].createElement($6be4966fd9bbc698$export$6521433ed15a34db, { className: "arc-Switch-thumb" },
+                        React__default["default"].createElement("div", { className: "arc-Switch-thumbIcon" },
+                            React__default["default"].createElement("div", { className: "arc-Switch-icon", "data-testid": "arc-switch-thumb-icon" },
+                                React__default["default"].createElement(Icon.Icon, { icon: BtIconTickAlt2Px.BtIconTickAlt2Px_2, color: surface === "dark" ? "brand" : "brand", size: labelSize === "l" ? 24 : 16 })))))),
+            React__default["default"].createElement("div", { className: index.classNames("arc-Switch-statusText", {
+                    "arc-Switch-statusText--isDisabled": isDisabled,
+                    "arc-Switch-statusText--onDarkSurface": surface === "dark"
+                }) },
+                React__default["default"].createElement(Text.Text, { size: labelSize },
+                    " ",
+                    statusText,
+                    " ")))));
+};
+
+exports.Switch = Switch;

package/dist/Switch/Switch.esm.d.ts

@@ -0,0 +1,40 @@
+import { FC } from "react";
+import { SwitchProps as RadixSwitchProps } from "@radix-ui/react-switch";
+import { FormControlProps } from "../_shared/esm/FormControl-84c9ace6";
+/** Use `Switch` to toggle between checked and not checked. */
+declare const Switch: FC<SwitchProps>;
+interface SwitchProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "requirementStatus" | "disclosureText" | "disclosureTitle" | "onClickDisclosure" | "helper"> {
+    /**
+     * Hide Label above toggle?
+     */
+    hideLabel?: boolean;
+    /**
+     * Text to display next to `Switch`
+     */
+    statusText?: string;
+    /**
+     * Should the `Switch` be disabled?
+     */
+    isDisabled?: FormControlProps["isDisabled"];
+    /**
+     * handler for blur
+     */
+    onBlur?: RadixSwitchProps["onBlur"];
+    /**
+     * set the switch to be checked by default
+     */
+    defaultChecked?: RadixSwitchProps["defaultChecked"];
+    /**
+     * value for the switch, is applied to a hidden checkbox if within a form
+     */
+    value?: RadixSwitchProps["value"];
+    /**
+     * name for the hidden checkbox if within a form
+     */
+    name?: RadixSwitchProps["name"];
+    /**
+     * callback for when the switch is toggled
+     */
+    onCheckedChange?: RadixSwitchProps["onCheckedChange"];
+}
+export { Switch };

package/dist/Switch/Switch.esm.js

@@ -0,0 +1,202 @@
+import React__default, { useState, forwardRef, useRef, createElement, useEffect, useContext } from 'react';
+import { c as classNames } from '../_shared/esm/index-2ae58626.js';
+import { g as $9f79659886946c16$export$e5c5a5f917a5871c, $ as $c512c27ab02ef895$export$50c7b4e9d9f19c1, a as $6ed0406888f73fc4$export$c7b2cbe3552a0d05, h as $71cd76cc60e0454e$export$6f32135080cb4c3, d as $8927f6f2acc4f386$export$250ffa63cdc0d034, _ as _extends, e as $e42e1063c40fb3ef$export$b9ecd428b558ff10, i as $010c2913dbd2fe3d$export$5cae361ad82dce8b, B as BtIconTickAlt2Px_2 } from '../_shared/esm/BtIconTickAlt2Px-2c4ec3be.js';
+import { I as Icon } from '../_shared/esm/Icon-61f7237a.js';
+import { C as Context } from '../_shared/esm/Surface-bf201530.js';
+import { F as FormControl } from '../_shared/esm/FormControl-84c9ace6.js';
+import { V as VerticalSpace } from '../_shared/esm/VerticalSpace-6b4f5e50.js';
+import { T as Text } from '../_shared/esm/Text-6b958ad8.js';
+import 'react-dom';
+import '../_shared/esm/index-229fc864.js';
+import '../_shared/esm/suffix-modifier-f5e28822.js';
+import '../_shared/esm/BtIconChevronRightMid-d9b11761.js';
+
+function $db6c3485150b8e66$export$1ab7ae714698c4b8(element) {
+    const [size, setSize] = useState(undefined);
+    $9f79659886946c16$export$e5c5a5f917a5871c(()=>{
+        if (element) {
+            // provide size as early as possible
+            setSize({
+                width: element.offsetWidth,
+                height: element.offsetHeight
+            });
+            const resizeObserver = new ResizeObserver((entries)=>{
+                if (!Array.isArray(entries)) return;
+                 // Since we only observe the one element, we don't need to loop over the
+                // array
+                if (!entries.length) return;
+                const entry = entries[0];
+                let width;
+                let height;
+                if ('borderBoxSize' in entry) {
+                    const borderSizeEntry = entry['borderBoxSize']; // iron out differences between browsers
+                    const borderSize = Array.isArray(borderSizeEntry) ? borderSizeEntry[0] : borderSizeEntry;
+                    width = borderSize['inlineSize'];
+                    height = borderSize['blockSize'];
+                } else {
+                    // for browsers that don't support `borderBoxSize`
+                    // we calculate it ourselves to get the correct border box.
+                    width = element.offsetWidth;
+                    height = element.offsetHeight;
+                }
+                setSize({
+                    width: width,
+                    height: height
+                });
+            });
+            resizeObserver.observe(element, {
+                box: 'border-box'
+            });
+            return ()=>resizeObserver.unobserve(element)
+            ;
+        } else // We only want to reset to `undefined` when the element becomes `null`,
+        // not if it changes to another element.
+        setSize(undefined);
+    }, [
+        element
+    ]);
+    return size;
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * Switch
+ * -----------------------------------------------------------------------------------------------*/ const $6be4966fd9bbc698$var$SWITCH_NAME = 'Switch';
+const [$6be4966fd9bbc698$var$createSwitchContext, $6be4966fd9bbc698$export$cf7f5f17f69cbd43] = $c512c27ab02ef895$export$50c7b4e9d9f19c1($6be4966fd9bbc698$var$SWITCH_NAME);
+const [$6be4966fd9bbc698$var$SwitchProvider, $6be4966fd9bbc698$var$useSwitchContext] = $6be4966fd9bbc698$var$createSwitchContext($6be4966fd9bbc698$var$SWITCH_NAME);
+const $6be4966fd9bbc698$export$b5d5cf8927ab7262 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+    const { __scopeSwitch: __scopeSwitch , name: name , checked: checkedProp , defaultChecked: defaultChecked , required: required , disabled: disabled , value: value = 'on' , onCheckedChange: onCheckedChange , ...switchProps } = props;
+    const [button, setButton] = useState(null);
+    const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, (node)=>setButton(node)
+    );
+    const hasConsumerStoppedPropagationRef = useRef(false); // We set this to true by default so that events bubble to forms without JS (SSR)
+    const isFormControl = button ? Boolean(button.closest('form')) : true;
+    const [checked = false, setChecked] = $71cd76cc60e0454e$export$6f32135080cb4c3({
+        prop: checkedProp,
+        defaultProp: defaultChecked,
+        onChange: onCheckedChange
+    });
+    return /*#__PURE__*/ createElement($6be4966fd9bbc698$var$SwitchProvider, {
+        scope: __scopeSwitch,
+        checked: checked,
+        disabled: disabled
+    }, /*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.button, _extends({
+        type: "button",
+        role: "switch",
+        "aria-checked": checked,
+        "aria-required": required,
+        "data-state": $6be4966fd9bbc698$var$getState(checked),
+        "data-disabled": disabled ? '' : undefined,
+        disabled: disabled,
+        value: value
+    }, switchProps, {
+        ref: composedRefs,
+        onClick: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onClick, (event)=>{
+            setChecked((prevChecked)=>!prevChecked
+            );
+            if (isFormControl) {
+                hasConsumerStoppedPropagationRef.current = event.isPropagationStopped(); // if switch is in a form, stop propagation from the button so that we only propagate
+                // one click event (from the input). We propagate changes from an input so that native
+                // form validation works and form events reflect switch updates.
+                if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();
+            }
+        })
+    })), isFormControl && /*#__PURE__*/ createElement($6be4966fd9bbc698$var$BubbleInput, {
+        control: button,
+        bubbles: !hasConsumerStoppedPropagationRef.current,
+        name: name,
+        value: value,
+        checked: checked,
+        required: required,
+        disabled: disabled // We transform because the input is absolutely positioned but we have
+        ,
+        style: {
+            transform: 'translateX(-100%)'
+        }
+    }));
+});
+/* -------------------------------------------------------------------------------------------------
+ * SwitchThumb
+ * -----------------------------------------------------------------------------------------------*/ const $6be4966fd9bbc698$var$THUMB_NAME = 'SwitchThumb';
+const $6be4966fd9bbc698$export$4d07bf653ea69106 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+    const { __scopeSwitch: __scopeSwitch , ...thumbProps } = props;
+    const context = $6be4966fd9bbc698$var$useSwitchContext($6be4966fd9bbc698$var$THUMB_NAME, __scopeSwitch);
+    return /*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.span, _extends({
+        "data-state": $6be4966fd9bbc698$var$getState(context.checked),
+        "data-disabled": context.disabled ? '' : undefined
+    }, thumbProps, {
+        ref: forwardedRef
+    }));
+});
+/* ---------------------------------------------------------------------------------------------- */ const $6be4966fd9bbc698$var$BubbleInput = (props)=>{
+    const { control: control , checked: checked , bubbles: bubbles = true , ...inputProps } = props;
+    const ref = useRef(null);
+    const prevChecked = $010c2913dbd2fe3d$export$5cae361ad82dce8b(checked);
+    const controlSize = $db6c3485150b8e66$export$1ab7ae714698c4b8(control); // Bubble checked change to parents (e.g form change event)
+    useEffect(()=>{
+        const input = ref.current;
+        const inputProto = window.HTMLInputElement.prototype;
+        const descriptor = Object.getOwnPropertyDescriptor(inputProto, 'checked');
+        const setChecked = descriptor.set;
+        if (prevChecked !== checked && setChecked) {
+            const event = new Event('click', {
+                bubbles: bubbles
+            });
+            setChecked.call(input, checked);
+            input.dispatchEvent(event);
+        }
+    }, [
+        prevChecked,
+        checked,
+        bubbles
+    ]);
+    return /*#__PURE__*/ createElement("input", _extends({
+        type: "checkbox",
+        "aria-hidden": true,
+        defaultChecked: checked
+    }, inputProps, {
+        tabIndex: -1,
+        ref: ref,
+        style: {
+            ...props.style,
+            ...controlSize,
+            position: 'absolute',
+            pointerEvents: 'none',
+            opacity: 0,
+            margin: 0
+        }
+    }));
+};
+function $6be4966fd9bbc698$var$getState(checked) {
+    return checked ? 'checked' : 'unchecked';
+}
+const $6be4966fd9bbc698$export$be92b6f5f03c0fe9 = $6be4966fd9bbc698$export$b5d5cf8927ab7262;
+const $6be4966fd9bbc698$export$6521433ed15a34db = $6be4966fd9bbc698$export$4d07bf653ea69106;
+
+/** Use `Switch` to toggle between checked and not checked. */
+var Switch = function (_a) {
+    var defaultChecked = _a.defaultChecked, onCheckedChange = _a.onCheckedChange, label = _a.label, name = _a.name, onBlur = _a.onBlur, value = _a.value, _b = _a.isDisabled, isDisabled = _b === void 0 ? false : _b, errorMessage = _a.errorMessage, id = _a.id, _c = _a.labelSize, labelSize = _c === void 0 ? "s" : _c, statusText = _a.statusText, _d = _a.hideLabel, hideLabel = _d === void 0 ? false : _d;
+    var surface = useContext(Context).surface;
+    return (React__default.createElement(FormControl, { errorMessage: errorMessage, htmlFor: id, isDisabled: isDisabled, label: hideLabel ? "" : label, labelSize: labelSize, requirementStatus: "not-applicable" },
+        !hideLabel && React__default.createElement(VerticalSpace, { size: "8" }),
+        React__default.createElement("div", { className: "arc-Switch-container" },
+            React__default.createElement($6be4966fd9bbc698$export$be92b6f5f03c0fe9, { id: id, "aria-label": label, defaultChecked: defaultChecked, name: name, value: value, onBlur: onBlur, onCheckedChange: onCheckedChange, disabled: isDisabled, className: classNames("arc-Switch", {
+                    "arc-Switch--large": labelSize === "l",
+                    "arc-Switch--isDisabled": isDisabled,
+                    "arc-Switch--onDarkSurface": surface === "dark"
+                }) },
+                React__default.createElement("div", { className: "arc-Switch-wrapper" },
+                    React__default.createElement($6be4966fd9bbc698$export$6521433ed15a34db, { className: "arc-Switch-thumb" },
+                        React__default.createElement("div", { className: "arc-Switch-thumbIcon" },
+                            React__default.createElement("div", { className: "arc-Switch-icon", "data-testid": "arc-switch-thumb-icon" },
+                                React__default.createElement(Icon, { icon: BtIconTickAlt2Px_2, color: surface === "dark" ? "brand" : "brand", size: labelSize === "l" ? 24 : 16 })))))),
+            React__default.createElement("div", { className: classNames("arc-Switch-statusText", {
+                    "arc-Switch-statusText--isDisabled": isDisabled,
+                    "arc-Switch-statusText--onDarkSurface": surface === "dark"
+                }) },
+                React__default.createElement(Text, { size: labelSize },
+                    " ",
+                    statusText,
+                    " ")))));
+};
+
+export { Switch };

package/dist/Switch/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@arc-ui/switch",
+  "types": "./Switch.esm.d.ts",
+  "main": "./Switch.cjs.js",
+  "module": "./Switch.esm.js",
+  "private": true
+}

package/dist/Text/Text.esm.d.ts

@@ -1 +1 @@
-export { Text } from "../_shared/esm/Text-d8988620";
+export { Text } from "../_shared/esm/Text-6b958ad8";

package/dist/Text/Text.esm.js

@@ -1,6 +1,6 @@
-export { T as Text } from '../_shared/esm/Text-d8988620.js';
+export { T as Text } from '../_shared/esm/Text-6b958ad8.js';
 import '../_shared/esm/index-229fc864.js';
 import '../_shared/esm/index-2ae58626.js';
 import 'react';
 import '../_shared/esm/suffix-modifier-f5e28822.js';
-import '../_shared/esm/Surface-d515d212.js';
+import '../_shared/esm/Surface-bf201530.js';

package/dist/TextInput/TextInput.cjs.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import React from "react";
 import { FC } from "react";
-import { FormControlProps } from "../_shared/cjs/FormControl-a1b7421b";
+import { FormControlProps } from "../_shared/cjs/FormControl-e6b7d7c5";
 type EventType = React.ChangeEvent<HTMLInputElement>;
 /**
  * Use `TextInput` to allow custom user text entry with a keyboard.
@@ -58,6 +58,10 @@ interface TextInputProps extends Omit<FormControlProps, "children" | "elementTyp
      * Validation regex pattern.
      */
     pattern?: string;
+    /**
+     * Enable button to toggle TextInput type from `Selected Type` to `Text`
+     */
+    showPassword?: boolean;
     /**
      * Type for the input. `number` will be changed to `text` and set the `numeric` inputMode.
      */

package/dist/TextInput/TextInput.cjs.js

@@ -5,8 +5,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var index = require('../_shared/cjs/index-78b35bc1.js');
 var index$1 = require('../_shared/cjs/index-45bfb67b.js');
 var React = require('react');
-var FormControl = require('../_shared/cjs/FormControl-a1b7421b.js');
+var FormControl = require('../_shared/cjs/FormControl-e6b7d7c5.js');
 var Surface = require('../_shared/cjs/Surface-d6b8010e.js');
+var VisuallyHidden = require('../_shared/cjs/VisuallyHidden-e2c8b291.js');
+require('../_shared/cjs/Text-1d3844be.js');
+require('../_shared/cjs/suffix-modifier-edf7851e.js');
+require('../_shared/cjs/BtIconChevronRightMid-5a38d855.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -43,22 +47,37 @@ var useNumericInput = function (props) {
  * Use `TextInput` to allow custom user text entry with a keyboard.
  */
 var TextInput = React.forwardRef(function (_a, ref) {
-    var _b = _a.defaultValue, defaultValue = _b === void 0 ? "" : _b, errorMessage = _a.errorMessage, helper = _a.helper, id = _a.id, inputMode = _a.inputMode, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isReadOnly, isReadOnly = _d === void 0 ? false : _d, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, label = _a.label, _f = _a.labelSize, labelSize = _f === void 0 ? "l" : _f, maxLength = _a.maxLength, minLength = _a.minLength, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, pattern = _a.pattern, _g = _a.type, type = _g === void 0 ? "text" : _g, value = _a.value, props = index.__rest(_a, ["defaultValue", "errorMessage", "helper", "id", "inputMode", "isDisabled", "isReadOnly", "isRequired", "label", "labelSize", "maxLength", "minLength", "name", "onBlur", "onChange", "pattern", "type", "value"]);
+    var _b = _a.defaultValue, defaultValue = _b === void 0 ? "" : _b, errorMessage = _a.errorMessage, helper = _a.helper, id = _a.id, inputMode = _a.inputMode, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isReadOnly, isReadOnly = _d === void 0 ? false : _d, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, label = _a.label, _f = _a.labelSize, labelSize = _f === void 0 ? "l" : _f, maxLength = _a.maxLength, minLength = _a.minLength, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, onClickDisclosure = _a.onClickDisclosure, pattern = _a.pattern, _g = _a.type, type = _g === void 0 ? "text" : _g, _h = _a.showPassword, showPassword = _h === void 0 ? false : _h, value = _a.value, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, props = index.__rest(_a, ["defaultValue", "errorMessage", "helper", "id", "inputMode", "isDisabled", "isReadOnly", "isRequired", "label", "labelSize", "maxLength", "minLength", "name", "onBlur", "onChange", "onClickDisclosure", "pattern", "type", "showPassword", "value", "disclosureTitle", "disclosureText"]);
     var surface = React.useContext(Surface.Context).surface;
-    var inferredInputProps = useNumericInput({ inputMode: inputMode, pattern: pattern, type: type });
+    var _j = React.useState(false), showPasswordToggle = _j[0], setShowPasswordToggle = _j[1];
+    var inferredInputProps = useNumericInput({
+        inputMode: inputMode,
+        pattern: pattern,
+        type: showPasswordToggle ? "text" : type
+    });
     // Although this is used within FormControlWrapper, it's deterministic so we can call it here too
     var ariaDescribedby = FormControl.useAriaDescribedby({
         errorMessage: errorMessage,
         id: id,
-        helper: helper
+        helper: helper,
+        disclosureText: disclosureText
     }).ariaDescribedby;
     return (React__default["default"].createElement("div", index.__assign({ className: index$1.classNames({
             "arc-TextInput": true,
+            "arc-TextInput--withPasswordToggle": showPassword,
             "arc-TextInput--invalid": errorMessage,
             "arc-TextInput--onDarkSurface": surface === "dark"
         }) }, index.filterDataAttrs(props)),
-        React__default["default"].createElement(FormControl.FormControl, { errorMessage: errorMessage, helper: helper, htmlFor: id, label: label, labelSize: labelSize, requirementStatus: isRequired ? "required" : "optional" },
-            React__default["default"].createElement("input", index.__assign({ "aria-describedby": ariaDescribedby, "aria-invalid": errorMessage ? "true" : "false", className: "arc-TextInput-input", defaultValue: typeof value !== "undefined" ? undefined : defaultValue, disabled: isDisabled, id: id, maxLength: maxLength, minLength: minLength, name: name, onChange: onChange, onBlur: onBlur, readOnly: isReadOnly, ref: ref, required: isRequired, value: typeof value !== "undefined" ? value : undefined }, inferredInputProps)))));
+        React__default["default"].createElement(FormControl.FormControl, { errorMessage: errorMessage, helper: helper, htmlFor: id, isDisabled: isDisabled, label: label, labelSize: labelSize, requirementStatus: isRequired ? "required" : "optional", disclosureTitle: disclosureTitle, disclosureText: disclosureText, onClickDisclosure: onClickDisclosure },
+            React__default["default"].createElement("div", { className: "arc-TextInput-inputWrapper" },
+                React__default["default"].createElement("input", index.__assign({ "aria-describedby": ariaDescribedby, "aria-invalid": errorMessage ? "true" : "false", className: "arc-TextInput-input", defaultValue: typeof value !== "undefined" ? undefined : defaultValue, disabled: isDisabled, id: id, maxLength: maxLength, minLength: minLength, name: name, onChange: onChange, onBlur: onBlur, readOnly: isReadOnly, ref: ref, required: isRequired, value: typeof value !== "undefined" ? value : undefined }, inferredInputProps)),
+                showPassword && (React__default["default"].createElement(React__default["default"].Fragment, null,
+                    React__default["default"].createElement("button", { className: "arc-TextInput-passwordToggle", onClick: function () { return setShowPasswordToggle(function (p) { return !p; }); }, type: "button" }, showPasswordToggle ? "Hide" : "Show"),
+                    React__default["default"].createElement(VisuallyHidden.VisuallyHidden, null,
+                        React__default["default"].createElement("div", { "aria-live": "polite" },
+                            React__default["default"].createElement("p", null, showPasswordToggle
+                                ? "Your password is shown"
+                                : "Your password is hidden")))))))));
 });
 
 exports.TextInput = TextInput;

package/dist/TextInput/TextInput.esm.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import React from "react";
 import { FC } from "react";
-import { FormControlProps } from "../_shared/esm/FormControl-feedc495";
+import { FormControlProps } from "../_shared/esm/FormControl-84c9ace6";
 type EventType = React.ChangeEvent<HTMLInputElement>;
 /**
  * Use `TextInput` to allow custom user text entry with a keyboard.
@@ -58,6 +58,10 @@ interface TextInputProps extends Omit<FormControlProps, "children" | "elementTyp
      * Validation regex pattern.
      */
     pattern?: string;
+    /**
+     * Enable button to toggle TextInput type from `Selected Type` to `Text`
+     */
+    showPassword?: boolean;
     /**
      * Type for the input. `number` will be changed to `text` and set the `numeric` inputMode.
      */

package/dist/TextInput/TextInput.esm.js

@@ -1,8 +1,12 @@
 import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/index-229fc864.js';
 import { c as classNames } from '../_shared/esm/index-2ae58626.js';
-import React, { forwardRef, useContext } from 'react';
-import { u as useAriaDescribedby, F as FormControl } from '../_shared/esm/FormControl-feedc495.js';
-import { C as Context } from '../_shared/esm/Surface-d515d212.js';
+import React__default, { forwardRef, useContext, useState } from 'react';
+import { u as useAriaDescribedby, F as FormControl } from '../_shared/esm/FormControl-84c9ace6.js';
+import { C as Context } from '../_shared/esm/Surface-bf201530.js';
+import { V as VisuallyHidden } from '../_shared/esm/VisuallyHidden-b9eebf71.js';
+import '../_shared/esm/Text-6b958ad8.js';
+import '../_shared/esm/suffix-modifier-f5e28822.js';
+import '../_shared/esm/BtIconChevronRightMid-d9b11761.js';
 
 /**
  * Infer the correct inputMode, pattern and type if specifying a `number` type.
@@ -35,22 +39,37 @@ var useNumericInput = function (props) {
  * Use `TextInput` to allow custom user text entry with a keyboard.
  */
 var TextInput = forwardRef(function (_a, ref) {
-    var _b = _a.defaultValue, defaultValue = _b === void 0 ? "" : _b, errorMessage = _a.errorMessage, helper = _a.helper, id = _a.id, inputMode = _a.inputMode, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isReadOnly, isReadOnly = _d === void 0 ? false : _d, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, label = _a.label, _f = _a.labelSize, labelSize = _f === void 0 ? "l" : _f, maxLength = _a.maxLength, minLength = _a.minLength, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, pattern = _a.pattern, _g = _a.type, type = _g === void 0 ? "text" : _g, value = _a.value, props = __rest(_a, ["defaultValue", "errorMessage", "helper", "id", "inputMode", "isDisabled", "isReadOnly", "isRequired", "label", "labelSize", "maxLength", "minLength", "name", "onBlur", "onChange", "pattern", "type", "value"]);
+    var _b = _a.defaultValue, defaultValue = _b === void 0 ? "" : _b, errorMessage = _a.errorMessage, helper = _a.helper, id = _a.id, inputMode = _a.inputMode, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isReadOnly, isReadOnly = _d === void 0 ? false : _d, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, label = _a.label, _f = _a.labelSize, labelSize = _f === void 0 ? "l" : _f, maxLength = _a.maxLength, minLength = _a.minLength, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, onClickDisclosure = _a.onClickDisclosure, pattern = _a.pattern, _g = _a.type, type = _g === void 0 ? "text" : _g, _h = _a.showPassword, showPassword = _h === void 0 ? false : _h, value = _a.value, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, props = __rest(_a, ["defaultValue", "errorMessage", "helper", "id", "inputMode", "isDisabled", "isReadOnly", "isRequired", "label", "labelSize", "maxLength", "minLength", "name", "onBlur", "onChange", "onClickDisclosure", "pattern", "type", "showPassword", "value", "disclosureTitle", "disclosureText"]);
     var surface = useContext(Context).surface;
-    var inferredInputProps = useNumericInput({ inputMode: inputMode, pattern: pattern, type: type });
+    var _j = useState(false), showPasswordToggle = _j[0], setShowPasswordToggle = _j[1];
+    var inferredInputProps = useNumericInput({
+        inputMode: inputMode,
+        pattern: pattern,
+        type: showPasswordToggle ? "text" : type
+    });
     // Although this is used within FormControlWrapper, it's deterministic so we can call it here too
     var ariaDescribedby = useAriaDescribedby({
         errorMessage: errorMessage,
         id: id,
-        helper: helper
+        helper: helper,
+        disclosureText: disclosureText
     }).ariaDescribedby;
-    return (React.createElement("div", __assign({ className: classNames({
+    return (React__default.createElement("div", __assign({ className: classNames({
             "arc-TextInput": true,
+            "arc-TextInput--withPasswordToggle": showPassword,
             "arc-TextInput--invalid": errorMessage,
             "arc-TextInput--onDarkSurface": surface === "dark"
         }) }, filterDataAttrs(props)),
-        React.createElement(FormControl, { errorMessage: errorMessage, helper: helper, htmlFor: id, label: label, labelSize: labelSize, requirementStatus: isRequired ? "required" : "optional" },
-            React.createElement("input", __assign({ "aria-describedby": ariaDescribedby, "aria-invalid": errorMessage ? "true" : "false", className: "arc-TextInput-input", defaultValue: typeof value !== "undefined" ? undefined : defaultValue, disabled: isDisabled, id: id, maxLength: maxLength, minLength: minLength, name: name, onChange: onChange, onBlur: onBlur, readOnly: isReadOnly, ref: ref, required: isRequired, value: typeof value !== "undefined" ? value : undefined }, inferredInputProps)))));
+        React__default.createElement(FormControl, { errorMessage: errorMessage, helper: helper, htmlFor: id, isDisabled: isDisabled, label: label, labelSize: labelSize, requirementStatus: isRequired ? "required" : "optional", disclosureTitle: disclosureTitle, disclosureText: disclosureText, onClickDisclosure: onClickDisclosure },
+            React__default.createElement("div", { className: "arc-TextInput-inputWrapper" },
+                React__default.createElement("input", __assign({ "aria-describedby": ariaDescribedby, "aria-invalid": errorMessage ? "true" : "false", className: "arc-TextInput-input", defaultValue: typeof value !== "undefined" ? undefined : defaultValue, disabled: isDisabled, id: id, maxLength: maxLength, minLength: minLength, name: name, onChange: onChange, onBlur: onBlur, readOnly: isReadOnly, ref: ref, required: isRequired, value: typeof value !== "undefined" ? value : undefined }, inferredInputProps)),
+                showPassword && (React__default.createElement(React__default.Fragment, null,
+                    React__default.createElement("button", { className: "arc-TextInput-passwordToggle", onClick: function () { return setShowPasswordToggle(function (p) { return !p; }); }, type: "button" }, showPasswordToggle ? "Hide" : "Show"),
+                    React__default.createElement(VisuallyHidden, null,
+                        React__default.createElement("div", { "aria-live": "polite" },
+                            React__default.createElement("p", null, showPasswordToggle
+                                ? "Your password is shown"
+                                : "Your password is hidden")))))))));
 });
 
 export { TextInput };