@aws-amplify/ui-react 5.3.2 → 6.0.0

package/dist/esm/primitives/Tabs/TabsList.mjs

@@ -0,0 +1,85 @@
+import * as React from 'react';
+import { classNames, ComponentClassName, classNameModifier } from '@aws-amplify/ui';
+import { View } from '../View/View.mjs';
+import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
+import { TabsContext } from './TabsContext.mjs';
+
+const isValidTab = (child) => React.isValidElement(child);
+const TabListPrimitive = ({ className, children, indicatorPosition, spacing, role = 'tablist', ...rest }, ref) => {
+    const internalRef = React.useRef(null);
+    const { activeTab, setActiveTab } = React.useContext(TabsContext);
+    React.useImperativeHandle(ref, () => internalRef.current);
+    const values = React.useMemo(() => React.Children.toArray(children)
+        .map((child) => {
+        if (child && isValidTab(child)) {
+            return child.props.value;
+        }
+    })
+        .filter((child) => !!child), [children]);
+    const currentIndex = values.indexOf(activeTab);
+    const nextTab = React.useCallback(() => {
+        let nextIndex = currentIndex === values.length - 1 ? 0 : currentIndex + 1;
+        const elems = internalRef.current?.querySelectorAll('button') ?? [];
+        while (elems[nextIndex].disabled) {
+            if (nextIndex === values.length - 1) {
+                nextIndex = 0;
+            }
+            else {
+                nextIndex++;
+            }
+        }
+        const value = values[nextIndex];
+        if (value) {
+            setActiveTab(value);
+            const elem = elems[nextIndex];
+            elem?.focus();
+            elem?.click();
+        }
+    }, [currentIndex, setActiveTab, values]);
+    const prevTab = React.useCallback(() => {
+        let prevIndex = currentIndex === 0 ? values.length - 1 : currentIndex - 1;
+        const elems = internalRef.current?.querySelectorAll('button') ?? [];
+        while (elems[prevIndex].disabled) {
+            if (prevIndex === 0) {
+                prevIndex = values.length - 1;
+            }
+            else {
+                prevIndex--;
+            }
+        }
+        const value = values[prevIndex];
+        if (value) {
+            setActiveTab(value);
+            const elem = elems[prevIndex];
+            elem?.focus();
+            elem?.click();
+        }
+    }, [currentIndex, setActiveTab, values]);
+    const onKeyDown = React.useCallback((event) => {
+        switch (event.key) {
+            case 'ArrowLeft':
+                event.preventDefault();
+                event.stopPropagation();
+                prevTab();
+                break;
+            case 'ArrowUp':
+            case 'ArrowRight':
+                event.preventDefault();
+                event.stopPropagation();
+                nextTab();
+                break;
+        }
+    }, [prevTab, nextTab]);
+    return (React.createElement(View, { ...rest, role: role, onKeyDown: onKeyDown, className: classNames(ComponentClassName.TabsList, indicatorPosition
+            ? classNameModifier(ComponentClassName.TabsList, indicatorPosition)
+            : null, spacing
+            ? classNameModifier(ComponentClassName.TabsList, spacing)
+            : null, className), ref: internalRef }, children));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/tabs)
+ */
+const TabList = primitiveWithForwardRef(TabListPrimitive);
+TabList.displayName = 'Tabs.List';
+
+export { TabList };

package/dist/esm/primitives/Tabs/TabsPanel.mjs

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { classNames, ComponentClassName, classNameModifierByFlag } from '@aws-amplify/ui';
+import { View } from '../View/View.mjs';
+import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
+import { TabsContext } from './TabsContext.mjs';
+
+const TabPanelPrimitive = ({ className, value, children, role = 'tabpanel', ...rest }, ref) => {
+    const { activeTab, isLazy } = React.useContext(TabsContext);
+    if (isLazy && activeTab !== value)
+        return null;
+    return (React.createElement(View, { ...rest, role: role, id: `${value}-panel`, "aria-labelledby": `${value}-tab`, className: classNames(ComponentClassName.TabsPanel, classNameModifierByFlag(ComponentClassName.TabsPanel, 'active', activeTab === value), className), ref: ref }, children));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/tabs)
+ */
+const TabPanel = primitiveWithForwardRef(TabPanelPrimitive);
+TabPanel.displayName = 'Tabs.Panel';
+
+export { TabPanel };

package/dist/esm/primitives/Text/Text.mjs

@@ -1 +1,16 @@
-import{__rest as a}from"tslib";import*as t from"react";import r from"classnames";import{classNameModifier as e,classNameModifierByFlag as s}from"@aws-amplify/ui";import{ComponentClassNames as i}from"../shared/constants.mjs";import{View as m}from"../View/View.mjs";const o=t.forwardRef(((o,n)=>{var{as:c="p",className:d,children:f,isTruncated:l,variation:p}=o,u=a(o,["as","className","children","isTruncated","variation"]);const T=r(i.Text,e(i.Text,p),s(i.Text,"truncated",l),d);return t.createElement(m,Object.assign({as:c,className:T,"data-truncate":l,"data-variation":p,ref:n},u),f)}));o.displayName="Text";export{o as Text};
+import * as React from 'react';
+import { classNames, ComponentClassName, classNameModifier, classNameModifierByFlag } from '@aws-amplify/ui';
+import { View } from '../View/View.mjs';
+import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
+
+const TextPrimitive = ({ as = 'p', className, children, isTruncated, variation, ...rest }, ref) => {
+    const componentClasses = classNames(ComponentClassName.Text, classNameModifier(ComponentClassName.Text, variation), classNameModifierByFlag(ComponentClassName.Text, 'truncated', isTruncated), className);
+    return (React.createElement(View, { as: as, className: componentClasses, ref: ref, ...rest }, children));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/text)
+ */
+const Text = primitiveWithForwardRef(TextPrimitive);
+Text.displayName = 'Text';
+
+export { Text };

package/dist/esm/primitives/TextArea/TextArea.mjs

@@ -1 +1,15 @@
-import{__rest as e}from"tslib";import*as a from"react";import r from"classnames";import{classNameModifier as i,classNameModifierByFlag as s}from"@aws-amplify/ui";import{ComponentClassNames as t}from"../shared/constants.mjs";import{View as o}from"../View/View.mjs";import{useFieldset as m}from"../Fieldset/useFieldset.mjs";const d=a.forwardRef(((d,l)=>{var{className:n,isDisabled:f,isReadOnly:p,isRequired:c,size:u,hasError:x=!1,variation:b}=d,v=e(d,["className","isDisabled","isReadOnly","isRequired","size","hasError","variation"]);const y=r(t.Textarea,t.FieldGroupControl,i(t.Textarea,b),i(t.Textarea,u),s(t.Textarea,"error",x),n),{isFieldsetDisabled:R}=m();return a.createElement(o,Object.assign({"aria-invalid":x,as:"textarea",className:y,"data-size":u,"data-variation":b,disabled:R||f,readOnly:p,ref:l,required:c},v))}));d.displayName="TextArea";export{d as TextArea};
+import * as React from 'react';
+import { classNames, ComponentClassName, classNameModifier, classNameModifierByFlag } from '@aws-amplify/ui';
+import { View } from '../View/View.mjs';
+import { useFieldset } from '../Fieldset/useFieldset.mjs';
+import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
+
+const TextAreaPrimitive = ({ className, isDisabled, isReadOnly, isRequired, size, hasError = false, variation, ...rest }, ref) => {
+    const componentClasses = classNames(ComponentClassName.Textarea, ComponentClassName.FieldGroupControl, classNameModifier(ComponentClassName.Textarea, variation), classNameModifier(ComponentClassName.Textarea, size), classNameModifierByFlag(ComponentClassName.Textarea, 'error', hasError), className);
+    const { isFieldsetDisabled } = useFieldset();
+    return (React.createElement(View, { "aria-invalid": hasError, as: "textarea", className: componentClasses, disabled: isFieldsetDisabled ? isFieldsetDisabled : isDisabled, readOnly: isReadOnly, ref: ref, required: isRequired, ...rest }));
+};
+const TextArea = primitiveWithForwardRef(TextAreaPrimitive);
+TextArea.displayName = 'TextArea';
+
+export { TextArea };

package/dist/esm/primitives/TextAreaField/TextAreaField.mjs

@@ -1 +1,36 @@
-import{__rest as e}from"tslib";import*as r from"react";import s from"classnames";import{classNameModifier as i}from"@aws-amplify/ui";import{ComponentClassNames as t}from"../shared/constants.mjs";import"../Field/FieldClearButton.mjs";import{FieldDescription as l}from"../Field/FieldDescription.mjs";import{FieldErrorMessage as a}from"../Field/FieldErrorMessage.mjs";import"../Field/Field.mjs";import{Flex as m}from"../Flex/Flex.mjs";import{Label as o}from"../Label/Label.mjs";import{splitPrimitiveProps as d}from"../utils/splitPrimitiveProps.mjs";import{TextArea as p}from"../TextArea/TextArea.mjs";import{useStableId as n}from"../utils/useStableId.mjs";const c=3,f=r.forwardRef(((c,f)=>{const{className:F,descriptiveText:b,errorMessage:j,hasError:u=!1,id:x,label:E,labelHidden:y=!1,rows:z,size:T,testId:g,inputStyles:h,resize:v}=c,w=e(c,["className","descriptiveText","errorMessage","hasError","id","label","labelHidden","rows","size","testId","inputStyles","resize"]),A=n(x),H=n(),I=b?H:void 0,{styleProps:M,rest:N}=d(w);return r.createElement(m,Object.assign({className:s(t.Field,i(t.Field,T),t.TextAreaField,F),"data-size":T,testId:g},M),r.createElement(o,{htmlFor:A,visuallyHidden:y},E),r.createElement(l,{id:H,labelHidden:y,descriptiveText:b}),r.createElement(p,Object.assign({"aria-describedby":I,hasError:u,id:A,ref:f,rows:null!=z?z:3,size:T,resize:v},N,h)),r.createElement(a,{hasError:u,errorMessage:j}))}));f.displayName="TextAreaField";export{c as DEFAULT_ROW_COUNT,f as TextAreaField};
+import * as React from 'react';
+import { classNames, ComponentClassName, classNameModifier } from '@aws-amplify/ui';
+import '../Field/FieldClearButton.mjs';
+import { FieldDescription } from '../Field/FieldDescription.mjs';
+import { FieldErrorMessage } from '../Field/FieldErrorMessage.mjs';
+import '../Field/Field.mjs';
+import { Flex } from '../Flex/Flex.mjs';
+import { Label } from '../Label/Label.mjs';
+import { splitPrimitiveProps } from '../utils/splitPrimitiveProps.mjs';
+import { TextArea } from '../TextArea/TextArea.mjs';
+import { useStableId } from '../utils/useStableId.mjs';
+import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
+
+const DEFAULT_ROW_COUNT = 3;
+const TextAreaFieldPrimitive = (props, ref) => {
+    const { className, descriptiveText, errorMessage, hasError = false, id, label, labelHidden = false, rows, size, testId, inputStyles, 
+    // Destructuring the 'resize' style prop because while it is a style prop
+    // it should go on the textarea element and not the wrapper div.
+    resize, ..._rest } = props;
+    const fieldId = useStableId(id);
+    const descriptionId = useStableId();
+    const ariaDescribedBy = descriptiveText ? descriptionId : undefined;
+    const { styleProps, rest } = splitPrimitiveProps(_rest);
+    return (React.createElement(Flex, { className: classNames(ComponentClassName.Field, classNameModifier(ComponentClassName.Field, size), ComponentClassName.TextAreaField, className), testId: testId, ...styleProps },
+        React.createElement(Label, { htmlFor: fieldId, visuallyHidden: labelHidden }, label),
+        React.createElement(FieldDescription, { id: descriptionId, labelHidden: labelHidden, descriptiveText: descriptiveText }),
+        React.createElement(TextArea, { "aria-describedby": ariaDescribedBy, hasError: hasError, id: fieldId, ref: ref, rows: rows ?? DEFAULT_ROW_COUNT, size: size, resize: resize, ...rest, ...inputStyles }),
+        React.createElement(FieldErrorMessage, { hasError: hasError, errorMessage: errorMessage })));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/textareafield)
+ */
+const TextAreaField = primitiveWithForwardRef(TextAreaFieldPrimitive);
+TextAreaField.displayName = 'TextAreaField';
+
+export { DEFAULT_ROW_COUNT, TextAreaField };

package/dist/esm/primitives/TextField/TextField.mjs

@@ -1 +1,34 @@
-import{__rest as e}from"tslib";import*as t from"react";import r from"classnames";import{classNameModifier as o}from"@aws-amplify/ui";import{ComponentClassNames as i}from"../shared/constants.mjs";import"../Field/FieldClearButton.mjs";import{FieldDescription as n}from"../Field/FieldDescription.mjs";import{FieldErrorMessage as s}from"../Field/FieldErrorMessage.mjs";import"../Field/Field.mjs";import{FieldGroup as m}from"../FieldGroup/FieldGroup.mjs";import{Flex as a}from"../Flex/Flex.mjs";import{Input as l}from"../Input/Input.mjs";import{Label as d}from"../Label/Label.mjs";import{splitPrimitiveProps as p}from"../utils/splitPrimitiveProps.mjs";import{useStableId as c}from"../utils/useStableId.mjs";const u=t.forwardRef(((u,f)=>{const{className:E,descriptiveText:F,errorMessage:b,hasError:j=!1,id:C,innerEndComponent:v,innerStartComponent:S,label:x,labelHidden:y=!1,outerEndComponent:g,outerStartComponent:h,size:I,testId:T,variation:z,inputStyles:H}=u,M=e(u,["className","descriptiveText","errorMessage","hasError","id","innerEndComponent","innerStartComponent","label","labelHidden","outerEndComponent","outerStartComponent","size","testId","variation","inputStyles"]),N=c(C),P=c(),w=F?P:void 0,{styleProps:G,rest:L}=p(M);return t.createElement(a,Object.assign({className:r(i.Field,o(i.Field,I),i.TextField,E),"data-size":I,testId:T},G),t.createElement(d,{htmlFor:N,visuallyHidden:y},x),t.createElement(n,{id:P,labelHidden:y,descriptiveText:F}),t.createElement(m,{outerStartComponent:h,outerEndComponent:g,innerStartComponent:S,innerEndComponent:v,variation:z},t.createElement(l,Object.assign({"aria-describedby":w,hasError:j,id:N,ref:f,size:I,variation:z},H,L))),t.createElement(s,{hasError:j,errorMessage:b}))}));u.displayName="TextField";export{u as TextField};
+import * as React from 'react';
+import { classNames, ComponentClassName, classNameModifier } from '@aws-amplify/ui';
+import '../Field/FieldClearButton.mjs';
+import { FieldDescription } from '../Field/FieldDescription.mjs';
+import { FieldErrorMessage } from '../Field/FieldErrorMessage.mjs';
+import '../Field/Field.mjs';
+import { FieldGroup } from '../FieldGroup/FieldGroup.mjs';
+import { Flex } from '../Flex/Flex.mjs';
+import { Input } from '../Input/Input.mjs';
+import { Label } from '../Label/Label.mjs';
+import { splitPrimitiveProps } from '../utils/splitPrimitiveProps.mjs';
+import { useStableId } from '../utils/useStableId.mjs';
+import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
+
+const TextFieldPrimitive = (props, ref) => {
+    const { className, descriptiveText, errorMessage, hasError = false, id, innerEndComponent, innerStartComponent, label, labelHidden = false, outerEndComponent, outerStartComponent, size, testId, variation, inputStyles, ..._rest } = props;
+    const fieldId = useStableId(id);
+    const descriptionId = useStableId();
+    const ariaDescribedBy = descriptiveText ? descriptionId : undefined;
+    const { styleProps, rest } = splitPrimitiveProps(_rest);
+    return (React.createElement(Flex, { className: classNames(ComponentClassName.Field, classNameModifier(ComponentClassName.Field, size), ComponentClassName.TextField, className), testId: testId, ...styleProps },
+        React.createElement(Label, { htmlFor: fieldId, visuallyHidden: labelHidden }, label),
+        React.createElement(FieldDescription, { id: descriptionId, labelHidden: labelHidden, descriptiveText: descriptiveText }),
+        React.createElement(FieldGroup, { outerStartComponent: outerStartComponent, outerEndComponent: outerEndComponent, innerStartComponent: innerStartComponent, innerEndComponent: innerEndComponent, variation: variation },
+            React.createElement(Input, { "aria-describedby": ariaDescribedBy, hasError: hasError, id: fieldId, ref: ref, size: size, variation: variation, ...inputStyles, ...rest })),
+        React.createElement(FieldErrorMessage, { hasError: hasError, errorMessage: errorMessage })));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/textfield)
+ */
+const TextField = primitiveWithForwardRef(TextFieldPrimitive);
+TextField.displayName = 'TextField';
+
+export { TextField };

package/dist/esm/primitives/ToggleButton/ToggleButton.mjs

@@ -1 +1,24 @@
-import{__rest as e}from"tslib";import s from"classnames";import*as o from"react";import{classNameModifier as a,classNameModifierByFlag as t}from"@aws-amplify/ui";import{ComponentClassNames as i}from"../shared/constants.mjs";import{Button as r}from"../Button/Button.mjs";import{useToggleButton as n}from"./useToggleButton.mjs";const l=o.forwardRef(((l,m)=>{var{className:d,children:c,defaultPressed:u=!1,isDisabled:f,isPressed:g,onChange:p,onClick:C,size:h,value:v,variation:B}=l,P=e(l,["className","children","defaultPressed","isDisabled","isPressed","onChange","onClick","size","value","variation"]);const{isPressed:b,handleClick:k}=n({isPressed:g,defaultPressed:u,onChange:p,onClick:C,value:v}),T=s(i.ToggleButton,a(i.ToggleButton,B),t(i.ToggleButton,"pressed",b),d);return o.createElement(r,Object.assign({"aria-pressed":b,className:T,isDisabled:f,onClick:k,ref:m,size:h,type:"button",variation:B},P),c)}));l.displayName="ToggleButton";export{l as ToggleButton};
+import { classNames, ComponentClassName, classNameModifier, classNameModifierByFlag } from '@aws-amplify/ui';
+import * as React from 'react';
+import { Button } from '../Button/Button.mjs';
+import { useToggleButton } from './useToggleButton.mjs';
+import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
+
+const ToggleButtonPrimitive = ({ className, children, defaultPressed = false, isDisabled, isPressed: isPressedProp, onChange, onClick, size, value, variation, ...rest }, ref) => {
+    const { isPressed, handleClick } = useToggleButton({
+        isPressed: isPressedProp,
+        defaultPressed,
+        onChange,
+        onClick,
+        value,
+    });
+    const componentClasses = classNames(ComponentClassName.ToggleButton, classNameModifier(ComponentClassName.ToggleButton, variation), classNameModifierByFlag(ComponentClassName.ToggleButton, 'pressed', isPressed), className);
+    return (React.createElement(Button, { "aria-pressed": isPressed, className: componentClasses, isDisabled: isDisabled, onClick: handleClick, ref: ref, size: size, type: "button", variation: variation, ...rest }, children));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/togglebutton)
+ */
+const ToggleButton = primitiveWithForwardRef(ToggleButtonPrimitive);
+ToggleButton.displayName = 'ToggleButton';
+
+export { ToggleButton };

package/dist/esm/primitives/ToggleButton/useToggleButton.mjs

@@ -1 +1,23 @@
-import*as e from"react";import{isFunction as s}from"@aws-amplify/ui";const a=({isPressed:a,defaultPressed:r,onClick:o,onChange:t,value:i})=>{const l=void 0!==a,[n,c]=e.useState(r);return{isPressed:a=l?a:n,handleClick:e.useCallback((e=>{s(o)&&o(e),l||c(!n),l&&s(t)&&t(i)}),[l,o,t,n,i])}};export{a as useToggleButton};
+import * as React from 'react';
+import { isFunction } from '@aws-amplify/ui';
+
+const useToggleButton = ({ isPressed, defaultPressed, onClick, onChange, value, }) => {
+    const isControlled = isPressed !== undefined;
+    // Maintain internal selected state for uncontrolled component
+    const [pressed, setPressed] = React.useState(defaultPressed);
+    isPressed = isControlled ? isPressed : pressed;
+    const handleClick = React.useCallback((event) => {
+        if (isFunction(onClick)) {
+            onClick(event);
+        }
+        if (!isControlled) {
+            setPressed(!pressed);
+        }
+        if (isControlled && isFunction(onChange)) {
+            onChange(value);
+        }
+    }, [isControlled, onClick, onChange, pressed, value]);
+    return { isPressed, handleClick };
+};
+
+export { useToggleButton };

package/dist/esm/primitives/ToggleButtonGroup/ToggleButtonGroup.mjs

@@ -1 +1,35 @@
-import{__rest as e}from"tslib";import o from"classnames";import*as s from"react";import{ComponentClassNames as i}from"../shared/constants.mjs";import{Flex as r}from"../Flex/Flex.mjs";import{useToggleButtonGroup as a}from"./useToggleButtonGroup.mjs";import{isString as l}from"@aws-amplify/ui";const n=s.forwardRef(((n,t)=>{var{children:m,className:u,isExclusive:p,isSelectionRequired:c,onChange:v,size:d,value:g,variation:f}=n,h=e(n,["children","className","isExclusive","isSelectionRequired","onChange","size","value","variation"]);const x=a({onChange:v,value:g,isExclusive:p,isSelectionRequired:c});return s.createElement(r,Object.assign({className:o(i.ToggleButtonGroup,u),ref:t,role:"group"},h),s.Children.map(m,(e=>s.isValidElement(e)?s.cloneElement(e,{isPressed:p?g===e.props.value:l(e.props.value)&&g.includes(e.props.value),onChange:x,size:d,variation:f}):e)))}));n.displayName="ToggleButtonGroup";export{n as ToggleButtonGroup};
+import { classNames, ComponentClassName, isString } from '@aws-amplify/ui';
+import * as React from 'react';
+import { Flex } from '../Flex/Flex.mjs';
+import { useToggleButtonGroup } from './useToggleButtonGroup.mjs';
+import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
+
+const ToggleButtonGroupPrimitive = ({ children, className, isExclusive, isSelectionRequired, onChange, size, value, variation, ...rest }, ref) => {
+    const handleChange = useToggleButtonGroup({
+        onChange,
+        value,
+        isExclusive,
+        isSelectionRequired,
+    });
+    return (React.createElement(Flex, { className: classNames(ComponentClassName.ToggleButtonGroup, className), ref: ref, role: "group", ...rest }, React.Children.map(children, (child) => {
+        if (React.isValidElement(child)) {
+            return React.cloneElement(child, {
+                isPressed: isExclusive
+                    ? value === child.props.value
+                    : isString(child.props.value) &&
+                        value.includes(child.props.value),
+                onChange: handleChange,
+                size,
+                variation,
+            });
+        }
+        return child;
+    })));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/togglebutton#togglebuttongroup)
+ */
+const ToggleButtonGroup = primitiveWithForwardRef(ToggleButtonGroupPrimitive);
+ToggleButtonGroup.displayName = 'ToggleButtonGroup';
+
+export { ToggleButtonGroup };

package/dist/esm/primitives/ToggleButtonGroup/useToggleButtonGroup.mjs

@@ -1 +1,36 @@
-import*as e from"react";import{isFunction as r,isString as i}from"@aws-amplify/ui";const a=({onChange:a,value:s,isExclusive:t=!1,isSelectionRequired:l=!1})=>{const o=e.useCallback((e=>{if(!r(a)||!Array.isArray(s))return;const t=i(e)?s.indexOf(e):-1;let o;t>=0?(o=[...s],(!l||o.length>1)&&o.splice(t,1)):o=[...s,e],a(o)}),[a,s,l]),n=e.useCallback((e=>{r(a)&&a(s!==e||l?e:void 0)}),[a,s,l]);return t?n:o};export{a as useToggleButtonGroup};
+import * as React from 'react';
+import { isFunction, isString } from '@aws-amplify/ui';
+
+const useToggleButtonGroup = ({ onChange, value, isExclusive = false, isSelectionRequired = false, }) => {
+    // Multiple selection
+    const handleChange = React.useCallback((buttonValue) => {
+        if (!isFunction(onChange) || !Array.isArray(value)) {
+            return;
+        }
+        const index = isString(buttonValue) ? value.indexOf(buttonValue) : -1;
+        let newValue;
+        const shouldToggleOff = index >= 0;
+        if (shouldToggleOff) {
+            // Toggle off
+            newValue = [...value];
+            if (!isSelectionRequired || newValue.length > 1) {
+                newValue.splice(index, 1);
+            }
+        }
+        else {
+            // Toggle on
+            newValue = [...value, buttonValue];
+        }
+        onChange(newValue);
+    }, [onChange, value, isSelectionRequired]);
+    // Exclusive selection
+    const handleExclusiveChange = React.useCallback((buttonValue) => {
+        if (!isFunction(onChange)) {
+            return;
+        }
+        onChange(value === buttonValue && !isSelectionRequired ? undefined : buttonValue);
+    }, [onChange, value, isSelectionRequired]);
+    return isExclusive ? handleExclusiveChange : handleChange;
+};
+
+export { useToggleButtonGroup };

package/dist/esm/primitives/View/View.mjs

@@ -1 +1,23 @@
-import{__rest as e}from"tslib";import*as t from"react";import{useStyles as r}from"../shared/styleUtils.mjs";const s=t.forwardRef(((s,a)=>{var{as:i="div",children:l,testId:d,ariaLabel:n,isDisabled:o,style:m,inert:b}=s,p=e(s,["as","children","testId","ariaLabel","isDisabled","style","inert"]);const{propStyles:c,nonStyleProps:y}=r(p,m);return t.createElement(i,Object.assign({"aria-label":n,"data-testid":d,disabled:o,ref:a,inert:b?"":null,style:c},y),l)}));s.displayName="View";export{s as View};
+import * as React from 'react';
+import { useStyles } from '../shared/styleUtils.mjs';
+import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
+
+const ViewPrimitive = ({ as = 'div', children, testId, ariaLabel, isDisabled, style, inert, ...rest }, ref) => {
+    const { propStyles, nonStyleProps } = useStyles(rest, style);
+    return React.createElement(as, {
+        'aria-label': ariaLabel,
+        'data-testid': testId,
+        disabled: isDisabled,
+        ref,
+        inert: inert ? '' : null,
+        style: propStyles,
+        ...nonStyleProps,
+    }, children);
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/view)
+ */
+const View = primitiveWithForwardRef(ViewPrimitive);
+View.displayName = 'View';
+
+export { View };

package/dist/esm/primitives/VisuallyHidden/VisuallyHidden.mjs

@@ -1 +1,13 @@
-import{__rest as s}from"tslib";import*as a from"react";import e from"classnames";import{ComponentClassNames as r}from"../shared/constants.mjs";import{View as m}from"../View/View.mjs";const i=a.forwardRef(((i,t)=>{var{as:o="span",children:l,className:n}=i,c=s(i,["as","children","className"]);return a.createElement(m,Object.assign({as:o,className:e(r.VisuallyHidden,n),ref:t},c),l)}));i.displayName="VisuallyHidden";export{i as VisuallyHidden};
+import * as React from 'react';
+import { classNames, ComponentClassName } from '@aws-amplify/ui';
+import { View } from '../View/View.mjs';
+import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
+
+const VisuallyHiddenPrimitive = ({ as = 'span', children, className, ...rest }, ref) => (React.createElement(View, { as: as, className: classNames(ComponentClassName.VisuallyHidden, className), ref: ref, ...rest }, children));
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/visuallyhidden)
+ */
+const VisuallyHidden = primitiveWithForwardRef(VisuallyHiddenPrimitive);
+VisuallyHidden.displayName = 'VisuallyHidden';
+
+export { VisuallyHidden };

package/dist/esm/primitives/index.mjs

@@ -1 +1,63 @@
-export{Alert}from"./Alert/Alert.mjs";export{Autocomplete}from"./Autocomplete/Autocomplete.mjs";export{Badge}from"./Badge/Badge.mjs";export{Breadcrumbs}from"./Breadcrumbs/Breadcrumbs.mjs";export{Button}from"./Button/Button.mjs";export{ButtonGroup}from"./ButtonGroup/ButtonGroup.mjs";export{Card}from"./Card/Card.mjs";export{CheckboxField}from"./CheckboxField/CheckboxField.mjs";export{Collection}from"./Collection/Collection.mjs";export{Divider}from"./Divider/Divider.mjs";export{DropZone}from"./DropZone/DropZone.mjs";export{Expander}from"./Expander/Expander.mjs";export{ExpanderItem}from"./Expander/ExpanderItem.mjs";export{FieldGroupIcon}from"./FieldGroupIcon/FieldGroupIcon.mjs";export{FieldGroupIconButton}from"./FieldGroupIcon/FieldGroupIconButton.mjs";export{Fieldset}from"./Fieldset/Fieldset.mjs";import"./Fieldset/useFieldset.mjs";export{Flex}from"./Flex/Flex.mjs";export{Grid}from"./Grid/Grid.mjs";export{Heading}from"./Heading/Heading.mjs";export{HighlightMatch}from"./HighlightMatch/HighlightMatch.mjs";export{Icon}from"./Icon/Icon.mjs";export{IconsProvider}from"./Icon/context/IconsProvider.mjs";import"react";import"./Icon/context/IconsContext.mjs";import"tslib";import"classnames";export{ComponentClassNames,ComponentClassObject}from"./shared/constants.mjs";export{View}from"./View/View.mjs";export{Image}from"./Image/Image.mjs";export{Input}from"./Input/Input.mjs";export{Label}from"./Label/Label.mjs";export{Link}from"./Link/Link.mjs";export{Loader}from"./Loader/Loader.mjs";export{Menu}from"./Menu/Menu.mjs";export{MenuButton}from"./Menu/MenuButton.mjs";export{MenuItem}from"./Menu/MenuItem.mjs";export{Message}from"./Message/Message.mjs";export{Pagination}from"./Pagination/Pagination.mjs";export{usePagination}from"./Pagination/usePagination.mjs";export{PasswordField}from"./PasswordField/PasswordField.mjs";export{PhoneNumberField}from"./PhoneNumberField/PhoneNumberField.mjs";export{Placeholder}from"./Placeholder/Placeholder.mjs";export{Radio}from"./Radio/Radio.mjs";export{RadioGroupField}from"./RadioGroupField/RadioGroupField.mjs";export{Rating}from"./Rating/Rating.mjs";export{ScrollView}from"./ScrollView/ScrollView.mjs";export{SearchField}from"./SearchField/SearchField.mjs";export{SelectField}from"./SelectField/SelectField.mjs";export{SliderField}from"./SliderField/SliderField.mjs";export{StepperField}from"./StepperField/StepperField.mjs";export{SwitchField}from"./SwitchField/SwitchField.mjs";export{Table}from"./Table/Table.mjs";export{TableBody}from"./Table/TableBody.mjs";export{TableCell}from"./Table/TableCell.mjs";export{TableFoot}from"./Table/TableFoot.mjs";export{TableHead}from"./Table/TableHead.mjs";export{TableRow}from"./Table/TableRow.mjs";export{TabItem,Tabs}from"./Tabs/Tabs.mjs";export{Text}from"./Text/Text.mjs";export{TextAreaField}from"./TextAreaField/TextAreaField.mjs";export{TextField}from"./TextField/TextField.mjs";export{ToggleButton}from"./ToggleButton/ToggleButton.mjs";export{ToggleButtonGroup}from"./ToggleButtonGroup/ToggleButtonGroup.mjs";export{VisuallyHidden}from"./VisuallyHidden/VisuallyHidden.mjs";export{ComponentPropsToStylePropsMap,ComponentPropsToStylePropsMapKeys}from"./types/style.mjs";
+export { Alert } from './Alert/Alert.mjs';
+export { Autocomplete } from './Autocomplete/Autocomplete.mjs';
+export { Badge } from './Badge/Badge.mjs';
+export { Breadcrumbs } from './Breadcrumbs/Breadcrumbs.mjs';
+export { Button } from './Button/Button.mjs';
+export { ButtonGroup } from './ButtonGroup/ButtonGroup.mjs';
+export { Card } from './Card/Card.mjs';
+export { CheckboxField } from './CheckboxField/CheckboxField.mjs';
+export { Collection } from './Collection/Collection.mjs';
+export { Divider } from './Divider/Divider.mjs';
+export { DropZone } from './DropZone/DropZone.mjs';
+export { Accordion } from './Accordion/Accordion.mjs';
+export { FieldGroupIcon } from './FieldGroupIcon/FieldGroupIcon.mjs';
+export { FieldGroupIconButton } from './FieldGroupIcon/FieldGroupIconButton.mjs';
+export { Fieldset } from './Fieldset/Fieldset.mjs';
+import './Fieldset/useFieldset.mjs';
+export { Flex } from './Flex/Flex.mjs';
+export { Grid } from './Grid/Grid.mjs';
+export { Heading } from './Heading/Heading.mjs';
+export { HighlightMatch } from './HighlightMatch/HighlightMatch.mjs';
+export { Icon } from './Icon/Icon.mjs';
+export { IconsProvider } from './Icon/context/IconsProvider.mjs';
+import 'react';
+import './Icon/context/IconsContext.mjs';
+import '@aws-amplify/ui';
+export { View } from './View/View.mjs';
+export { Image } from './Image/Image.mjs';
+export { Input } from './Input/Input.mjs';
+export { Label } from './Label/Label.mjs';
+export { Link } from './Link/Link.mjs';
+export { Loader } from './Loader/Loader.mjs';
+export { Menu } from './Menu/Menu.mjs';
+export { MenuButton } from './Menu/MenuButton.mjs';
+export { MenuItem } from './Menu/MenuItem.mjs';
+export { Message } from './Message/Message.mjs';
+export { Pagination } from './Pagination/Pagination.mjs';
+export { usePagination } from './Pagination/usePagination.mjs';
+export { PasswordField } from './PasswordField/PasswordField.mjs';
+export { PhoneNumberField } from './PhoneNumberField/PhoneNumberField.mjs';
+export { Placeholder } from './Placeholder/Placeholder.mjs';
+export { Radio } from './Radio/Radio.mjs';
+export { RadioGroupField } from './RadioGroupField/RadioGroupField.mjs';
+export { Rating } from './Rating/Rating.mjs';
+export { ScrollView } from './ScrollView/ScrollView.mjs';
+export { SearchField } from './SearchField/SearchField.mjs';
+export { SelectField } from './SelectField/SelectField.mjs';
+export { SliderField } from './SliderField/SliderField.mjs';
+export { StepperField } from './StepperField/StepperField.mjs';
+export { SwitchField } from './SwitchField/SwitchField.mjs';
+export { Table } from './Table/Table.mjs';
+export { TableBody } from './Table/TableBody.mjs';
+export { TableCell } from './Table/TableCell.mjs';
+export { TableFoot } from './Table/TableFoot.mjs';
+export { TableHead } from './Table/TableHead.mjs';
+export { TableRow } from './Table/TableRow.mjs';
+export { Tabs } from './Tabs/Tabs.mjs';
+export { Text } from './Text/Text.mjs';
+export { TextAreaField } from './TextAreaField/TextAreaField.mjs';
+export { TextField } from './TextField/TextField.mjs';
+export { ToggleButton } from './ToggleButton/ToggleButton.mjs';
+export { ToggleButtonGroup } from './ToggleButtonGroup/ToggleButtonGroup.mjs';
+export { VisuallyHidden } from './VisuallyHidden/VisuallyHidden.mjs';
+export { ComponentPropsToStylePropsMap, ComponentPropsToStylePropsMapKeys } from './types/style.mjs';