@aws-amplify/ui-react 5.3.2 → 6.0.0

package/dist/esm/primitives/SelectField/SelectField.mjs

@@ -1 +1,42 @@
-import{__rest as e}from"tslib";import*as r from"react";import i from"classnames";import{classNameModifier as t}from"@aws-amplify/ui";import{ComponentClassNames as s}from"../shared/constants.mjs";import"../Field/FieldClearButton.mjs";import{FieldDescription as l}from"../Field/FieldDescription.mjs";import{FieldErrorMessage as o}from"../Field/FieldErrorMessage.mjs";import"../Field/Field.mjs";import{Flex as m}from"../Flex/Flex.mjs";import{Label as a}from"../Label/Label.mjs";import{Select as d}from"../Select/Select.mjs";import{splitPrimitiveProps as n}from"../utils/splitPrimitiveProps.mjs";import{useStableId as p}from"../utils/useStableId.mjs";const c=r.forwardRef(((c,f)=>{const{children:F,className:h,descriptiveText:b,errorMessage:u,hasError:j=!1,id:E,label:v,labelHidden:g=!1,options:y,size:S,testId:x,inputStyles:I}=c,z=e(c,["children","className","descriptiveText","errorMessage","hasError","id","label","labelHidden","options","size","testId","inputStyles"]),H=p(E),M=p(),N=b?M:void 0,{styleProps:w,rest:P}=n(z);return r.createElement(m,Object.assign({className:i(s.Field,t(s.Field,S),s.SelectField,h),"data-size":S,testId:x},w),r.createElement(a,{htmlFor:H,visuallyHidden:g},v),r.createElement(l,{id:M,labelHidden:g,descriptiveText:b}),r.createElement(d,Object.assign({"aria-describedby":N,hasError:j,id:H,ref:f,size:S},P,I),(({children:e,options:i})=>e?((null==i?void 0:i.length)&&console.warn("Amplify UI: <SelectField> component  defaults to rendering children over `options`. When using the `options` prop, omit children."),e):null==i?void 0:i.map(((e,i)=>r.createElement("option",{label:e,value:e,key:`${e}-${i}`},e))))({children:F,options:y})),r.createElement(o,{hasError:j,errorMessage:u}))}));c.displayName="SelectField";export{c as SelectField};
+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 { Select } from '../Select/Select.mjs';
+import { splitPrimitiveProps } from '../utils/splitPrimitiveProps.mjs';
+import { useStableId } from '../utils/useStableId.mjs';
+import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
+
+const selectFieldChildren = ({ children, options, }) => {
+    if (children) {
+        if (options?.length) {
+            // eslint-disable-next-line no-console
+            console.warn('Amplify UI: <SelectField> component  defaults to rendering children over `options`. When using the `options` prop, omit children.');
+        }
+        return children;
+    }
+    return options?.map((option, index) => (React.createElement("option", { label: option, value: option, key: `${option}-${index}` }, option)));
+};
+const SelectFieldPrimitive = (props, ref) => {
+    const { children, className, descriptiveText, errorMessage, hasError = false, id, label, labelHidden = false, options, size, testId, 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.SelectField, className), testId: testId, ...styleProps },
+        React.createElement(Label, { htmlFor: fieldId, visuallyHidden: labelHidden }, label),
+        React.createElement(FieldDescription, { id: descriptionId, labelHidden: labelHidden, descriptiveText: descriptiveText }),
+        React.createElement(Select, { "aria-describedby": ariaDescribedBy, hasError: hasError, id: fieldId, ref: ref, size: size, ...rest, ...inputStyles }, selectFieldChildren({ children, options })),
+        React.createElement(FieldErrorMessage, { hasError: hasError, errorMessage: errorMessage })));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/selectfield)
+ */
+const SelectField = primitiveWithForwardRef(SelectFieldPrimitive);
+SelectField.displayName = 'SelectField';
+
+export { SelectField };

package/dist/esm/primitives/SliderField/SliderField.mjs

@@ -1 +1,77 @@
-import{__rest as e}from"tslib";import r from"classnames";import*as t from"@radix-ui/react-slider";import*as i from"react";import{sanitizeNamespaceImport as a,isFunction as l,classNameModifier as o}from"@aws-amplify/ui";import{ComponentClassNames as s}from"../shared/constants.mjs";import"../Field/FieldClearButton.mjs";import{FieldDescription as d}from"../Field/FieldDescription.mjs";import{FieldErrorMessage as m}from"../Field/FieldErrorMessage.mjs";import"../Field/Field.mjs";import{FieldGroup as n}from"../FieldGroup/FieldGroup.mjs";import{Flex as c}from"../Flex/Flex.mjs";import{Label as u}from"../Label/Label.mjs";import{splitPrimitiveProps as p}from"../utils/splitPrimitiveProps.mjs";import{View as F}from"../View/View.mjs";import{useStableId as b}from"../utils/useStableId.mjs";import{useFieldset as f}from"../Fieldset/useFieldset.mjs";const{Range:S,Root:g,Thumb:C,Track:E}=a(t),h="slider-label",k="slider-root",v="slider-track",j="slider-range",T=i.forwardRef(((t,a)=>{var{ariaValuetext:T,className:y,defaultValue:V=0,descriptiveText:x,emptyTrackColor:N,errorMessage:R,filledTrackColor:z,formatValue:H,hasError:w=!1,id:I,isDisabled:M,isValueHidden:D=!1,label:G,labelHidden:L=!1,onChange:P,orientation:O="horizontal",outerEndComponent:B,outerStartComponent:q,testId:A,thumbColor:J,trackSize:K,value:Q,size:U}=t,W=e(t,["ariaValuetext","className","defaultValue","descriptiveText","emptyTrackColor","errorMessage","filledTrackColor","formatValue","hasError","id","isDisabled","isValueHidden","label","labelHidden","onChange","orientation","outerEndComponent","outerStartComponent","testId","thumbColor","trackSize","value","size"]);const{isFieldsetDisabled:X}=f(),Y=b(I),Z=b(),$=b(),_=x?$:void 0,{styleProps:ee,rest:re}=p(W),te=void 0!==Q,[ie,ae]=i.useState(te?Q:V),le=te?[Q]:void 0,oe=te?void 0:[V],se=i.useCallback((e=>{ae(e[0]),l(P)&&P(e[0])}),[P]),de=i.useMemo((()=>{const e=l(H)?H(ie):ie;return"string"==typeof H?i.createElement(F,{as:"span"},e):e}),[ie,H]),me="vertical"===O,ne=r(s.SliderFieldTrack,o(s.SliderFieldTrack,O),o(s.SliderFieldTrack,U)),ce=r(s.SliderFieldRoot,o(s.SliderFieldRoot,O),o(s.SliderFieldRoot,U),y);return i.createElement(c,Object.assign({className:r(s.Field,o(s.Field,U),s.SliderField),testId:A,"data-size":U},ee),i.createElement(u,{className:s.SliderFieldLabel,id:Z,testId:h,visuallyHidden:L},i.createElement(F,{as:"span"},G),D?null:de),i.createElement(d,{id:$,labelHidden:L,descriptiveText:x}),i.createElement(n,{className:s.SliderFieldGroup,id:Y,orientation:O,outerStartComponent:q,outerEndComponent:B},i.createElement(g,Object.assign({className:ce,"data-testid":k,disabled:X||M,defaultValue:oe,onValueChange:se,orientation:O,ref:a,value:le},re),i.createElement(E,{className:ne,"data-testid":v,style:{backgroundColor:String(N),[""+(me?"width":"height")]:K}},i.createElement(S,{className:r(s.SliderFieldRange,o(s.SliderFieldRange,O)),"data-testid":j,style:{backgroundColor:String(z)}})),i.createElement(C,{"aria-describedby":_,"aria-labelledby":Z,"aria-valuetext":T,className:r(s.SliderFieldThumb,o(s.SliderFieldThumb,U)),style:{backgroundColor:String(J)}}))),i.createElement(m,{hasError:w,errorMessage:R}))}));T.displayName="SliderField";export{h as SLIDER_LABEL_TEST_ID,j as SLIDER_RANGE_TEST_ID,k as SLIDER_ROOT_TEST_ID,v as SLIDER_TRACK_TEST_ID,T as SliderField};
+import { sanitizeNamespaceImport, isFunction, classNames, ComponentClassName, classNameModifier, classNameModifierByFlag } from '@aws-amplify/ui';
+import * as RadixSlider from '@radix-ui/react-slider';
+import * as React from 'react';
+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 { Label } from '../Label/Label.mjs';
+import { splitPrimitiveProps } from '../utils/splitPrimitiveProps.mjs';
+import { View } from '../View/View.mjs';
+import { useStableId } from '../utils/useStableId.mjs';
+import { useFieldset } from '../Fieldset/useFieldset.mjs';
+import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
+
+// Radix packages don't support ESM in Node, in some scenarios(e.g. SSR)
+// We have to use namespace import and sanitize it to ensure the interoperablity between ESM and CJS
+const { Range, Root, Thumb, Track } = sanitizeNamespaceImport(RadixSlider);
+const SLIDER_LABEL_TEST_ID = 'slider-label';
+const SLIDER_ROOT_TEST_ID = 'slider-root';
+const SLIDER_TRACK_TEST_ID = 'slider-track';
+const SLIDER_RANGE_TEST_ID = 'slider-range';
+const SliderFieldPrimitive = ({ ariaValuetext, className, defaultValue = 0, descriptiveText, emptyTrackColor, errorMessage, filledTrackColor, formatValue, hasError = false, id, isDisabled, isValueHidden = false, label, labelHidden = false, onChange, orientation = 'horizontal', outerEndComponent, outerStartComponent, testId, thumbColor, trackSize, value, size, ..._rest }, ref) => {
+    const { isFieldsetDisabled } = useFieldset();
+    const fieldId = useStableId(id);
+    const labelId = useStableId();
+    const descriptionId = useStableId();
+    const ariaDescribedBy = descriptiveText ? descriptionId : undefined;
+    const disabled = isFieldsetDisabled ? isFieldsetDisabled : isDisabled;
+    const { styleProps, rest } = splitPrimitiveProps(_rest);
+    const isControlled = value !== undefined;
+    const [currentValue, setCurrentValue] = React.useState(isControlled ? value : defaultValue);
+    const values = isControlled ? [value] : undefined;
+    const defaultValues = !isControlled ? [defaultValue] : undefined;
+    const onValueChange = React.useCallback((value) => {
+        setCurrentValue(value[0]);
+        if (isFunction(onChange)) {
+            // Do not have multiple thumbs support yet
+            onChange(value[0]);
+        }
+    }, [onChange]);
+    const renderedValue = React.useMemo(() => {
+        const formattedValue = isFunction(formatValue)
+            ? formatValue(currentValue)
+            : currentValue;
+        return typeof formatValue === 'string' ? (React.createElement(View, { as: "span" }, formattedValue)) : (formattedValue);
+    }, [currentValue, formatValue]);
+    const isVertical = orientation === 'vertical';
+    const componentClasses = classNames(ComponentClassName.SliderFieldTrack, classNameModifier(ComponentClassName.SliderFieldTrack, orientation), classNameModifier(ComponentClassName.SliderFieldTrack, size));
+    const rootComponentClasses = classNames(ComponentClassName.SliderFieldRoot, classNameModifier(ComponentClassName.SliderFieldRoot, orientation), classNameModifier(ComponentClassName.SliderFieldRoot, size), classNameModifierByFlag(ComponentClassName.SliderFieldRoot, 'disabled', disabled), className);
+    return (React.createElement(Flex
+    // Custom classnames will be added to Root below
+    , { 
+        // Custom classnames will be added to Root below
+        className: classNames(ComponentClassName.Field, classNameModifier(ComponentClassName.Field, size), ComponentClassName.SliderField), testId: testId, ...styleProps },
+        React.createElement(Label, { className: ComponentClassName.SliderFieldLabel, id: labelId, testId: SLIDER_LABEL_TEST_ID, visuallyHidden: labelHidden },
+            React.createElement(View, { as: "span" }, label),
+            !isValueHidden ? renderedValue : null),
+        React.createElement(FieldDescription, { id: descriptionId, labelHidden: labelHidden, descriptiveText: descriptiveText }),
+        React.createElement(FieldGroup, { className: ComponentClassName.SliderFieldGroup, id: fieldId, orientation: orientation, outerStartComponent: outerStartComponent, outerEndComponent: outerEndComponent },
+            React.createElement(Root, { className: rootComponentClasses, "data-testid": SLIDER_ROOT_TEST_ID, disabled: disabled, defaultValue: defaultValues, onValueChange: onValueChange, orientation: orientation, ref: ref, value: values, ...rest },
+                React.createElement(Track, { className: componentClasses, "data-testid": SLIDER_TRACK_TEST_ID, style: {
+                        backgroundColor: String(emptyTrackColor),
+                        [`${isVertical ? 'width' : 'height'}`]: trackSize,
+                    } },
+                    React.createElement(Range, { className: classNames(ComponentClassName.SliderFieldRange, classNameModifier(ComponentClassName.SliderFieldRange, orientation), classNameModifierByFlag(ComponentClassName.SliderFieldRange, 'disabled', disabled)), "data-testid": SLIDER_RANGE_TEST_ID, style: { backgroundColor: String(filledTrackColor) } })),
+                React.createElement(Thumb, { "aria-describedby": ariaDescribedBy, "aria-labelledby": labelId, "aria-valuetext": ariaValuetext, className: classNames(ComponentClassName.SliderFieldThumb, classNameModifier(ComponentClassName.SliderFieldThumb, size), classNameModifierByFlag(ComponentClassName.SliderFieldThumb, 'disabled', disabled)), style: { backgroundColor: String(thumbColor) } }))),
+        React.createElement(FieldErrorMessage, { hasError: hasError, errorMessage: errorMessage })));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/sliderfield)
+ */
+const SliderField = primitiveWithForwardRef(SliderFieldPrimitive);
+SliderField.displayName = 'SliderField';
+
+export { SLIDER_LABEL_TEST_ID, SLIDER_RANGE_TEST_ID, SLIDER_ROOT_TEST_ID, SLIDER_TRACK_TEST_ID, SliderField };

package/dist/esm/primitives/StepperField/StepperField.mjs

@@ -1 +1,60 @@
-import{__rest as e}from"tslib";import*as t from"react";import r from"classnames";import{useStepper as i}from"./useStepper.mjs";import"../Field/FieldClearButton.mjs";import{FieldDescription as a}from"../Field/FieldDescription.mjs";import{FieldErrorMessage as s}from"../Field/FieldErrorMessage.mjs";import"../Field/Field.mjs";import{FieldGroup as o}from"../FieldGroup/FieldGroup.mjs";import"../FieldGroupIcon/FieldGroupIcon.mjs";import{FieldGroupIconButton as l}from"../FieldGroupIcon/FieldGroupIconButton.mjs";import{Flex as n}from"../Flex/Flex.mjs";import"../Icon/Icon.mjs";import"../Icon/context/IconsContext.mjs";import{useIcons as d}from"../Icon/context/useIcons.mjs";import{IconAdd as m}from"../Icon/icons/IconAdd.mjs";import{ComponentClassNames as p,ComponentText as c}from"../shared/constants.mjs";import"../View/View.mjs";import{IconRemove as u}from"../Icon/icons/IconRemove.mjs";import{Input as b}from"../Input/Input.mjs";import{Label as F}from"../Label/Label.mjs";import{classNameModifier as f,classNameModifierByFlag as I}from"@aws-amplify/ui";import{splitPrimitiveProps as j}from"../utils/splitPrimitiveProps.mjs";import{useStableId as v}from"../utils/useStableId.mjs";const h="decrease-icon",S="increase-icon",B=t.forwardRef(((B,E)=>{var g,D;const{className:y,defaultValue:C,descriptiveText:L,errorMessage:O,hasError:x=!1,id:R,inputStyles:N,isDisabled:V,isReadOnly:z,isRequired:G,increaseButtonLabel:w=c.StepperField.increaseButtonLabel,decreaseButtonLabel:H=c.StepperField.decreaseButtonLabel,label:M,labelHidden:$=!1,onStepChange:q,size:P,testId:T,value:k,variation:W}=B,A=e(B,["className","defaultValue","descriptiveText","errorMessage","hasError","id","inputStyles","isDisabled","isReadOnly","isRequired","increaseButtonLabel","decreaseButtonLabel","label","labelHidden","onStepChange","size","testId","value","variation"]),J=v(R),K=v(),Q=L?K:void 0,{styleProps:U,rest:X}=j(A),Y=d("stepperField"),{step:Z,value:_,inputValue:ee,handleDecrease:te,handleIncrease:re,handleOnBlur:ie,handleOnChange:ae,handleOnWheel:se,setInputValue:oe,shouldDisableDecreaseButton:le,shouldDisableIncreaseButton:ne}=i(Object.assign(Object.assign({},B),{defaultValue:C,onStepChange:q}));return t.useEffect((()=>{void 0!==k&&oe(k)}),[k,oe]),t.createElement(n,Object.assign({className:r(p.Field,f(p.Field,P),p.StepperField,y),"data-size":P,"data-variation":W,testId:T},U),t.createElement(F,{htmlFor:J,visuallyHidden:$},M),t.createElement(a,{id:K,labelHidden:$,descriptiveText:L}),t.createElement(o,{outerStartComponent:t.createElement(l,{"aria-controls":J,ariaLabel:`${H} ${_-Z}`,className:r(p.StepperFieldButtonDecrease,f(p.StepperFieldButtonDecrease,W),I(p.StepperFieldButtonDecrease,"disabled",le)),"data-invalid":x,isDisabled:le,onClick:te,size:P},null!==(g=null==Y?void 0:Y.remove)&&void 0!==g?g:t.createElement(u,{"data-testid":h})),outerEndComponent:t.createElement(l,{"aria-controls":J,ariaLabel:`${w} ${_+Z}`,className:r(p.StepperFieldButtonIncrease,f(p.StepperFieldButtonIncrease,W),I(p.StepperFieldButtonIncrease,"disabled",ne)),"data-invalid":x,isDisabled:ne,onClick:re,size:P},null!==(D=null==Y?void 0:Y.add)&&void 0!==D?D:t.createElement(m,{"data-testid":S}))},t.createElement(b,Object.assign({"aria-describedby":Q,className:p.StepperFieldInput,hasError:x,id:J,isDisabled:V,isReadOnly:z,isRequired:G,onBlur:ie,onChange:ae,onWheel:se,ref:E,size:P,variation:W,type:"number",value:ee},N,X))),t.createElement(s,{hasError:x,errorMessage:O}))}));B.displayName="StepperField";export{h as DECREASE_ICON,S as INCREASE_ICON,B as StepperField};
+import * as React from 'react';
+import { classNames, ComponentClassName, classNameModifier, classNameModifierByFlag } from '@aws-amplify/ui';
+import { useStepper } from './useStepper.mjs';
+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 '../FieldGroupIcon/FieldGroupIcon.mjs';
+import { FieldGroupIconButton } from '../FieldGroupIcon/FieldGroupIconButton.mjs';
+import { Flex } from '../Flex/Flex.mjs';
+import '../Icon/Icon.mjs';
+import '../Icon/context/IconsContext.mjs';
+import { useIcons } from '../Icon/context/useIcons.mjs';
+import { IconAdd } from '../Icon/icons/IconAdd.mjs';
+import '../View/View.mjs';
+import { IconRemove } from '../Icon/icons/IconRemove.mjs';
+import { Input } from '../Input/Input.mjs';
+import { Label } from '../Label/Label.mjs';
+import { ComponentText } from '../shared/constants.mjs';
+import { splitPrimitiveProps } from '../utils/splitPrimitiveProps.mjs';
+import { useStableId } from '../utils/useStableId.mjs';
+import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
+
+const DECREASE_ICON = 'decrease-icon';
+const INCREASE_ICON = 'increase-icon';
+const StepperFieldPrimitive = (props, ref) => {
+    const { className, 
+    // destructure to prevent `defaultValue` from being passed to underlying `Input` via `_rest`
+    defaultValue, descriptiveText, errorMessage, hasError = false, id, inputStyles, isDisabled, isReadOnly, isRequired, increaseButtonLabel = ComponentText.StepperField.increaseButtonLabel, decreaseButtonLabel = ComponentText.StepperField.decreaseButtonLabel, label, labelHidden = false, 
+    // destructure to prevent `onStepChange` from being passed to underlying `Input` via `_rest`
+    onStepChange, size, testId, 
+    // this is only required in useStepper hook but deconstruct here to remove its existence in rest
+    value: controlledValue, variation, ..._rest } = props;
+    const fieldId = useStableId(id);
+    const descriptionId = useStableId();
+    const ariaDescribedBy = descriptiveText ? descriptionId : undefined;
+    const { styleProps, rest } = splitPrimitiveProps(_rest);
+    const icons = useIcons('stepperField');
+    const { step, value, inputValue, handleDecrease, handleIncrease, handleOnBlur, handleOnChange, handleOnWheel, setInputValue, shouldDisableDecreaseButton, shouldDisableIncreaseButton, } = useStepper({ ...props, defaultValue, onStepChange });
+    React.useEffect(() => {
+        const isControlled = controlledValue !== undefined;
+        if (isControlled) {
+            setInputValue(controlledValue);
+        }
+    }, [controlledValue, setInputValue]);
+    return (React.createElement(Flex, { className: classNames(ComponentClassName.Field, classNameModifier(ComponentClassName.Field, size), ComponentClassName.StepperField, 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: React.createElement(FieldGroupIconButton, { "aria-controls": fieldId, ariaLabel: `${decreaseButtonLabel} ${value - step}`, className: classNames(ComponentClassName.StepperFieldButtonDecrease, classNameModifier(ComponentClassName.StepperFieldButtonDecrease, variation), classNameModifierByFlag(ComponentClassName.StepperFieldButtonDecrease, 'disabled', shouldDisableDecreaseButton)), "data-invalid": hasError, isDisabled: shouldDisableDecreaseButton, onClick: handleDecrease, size: size }, icons?.remove ?? React.createElement(IconRemove, { "data-testid": DECREASE_ICON })), outerEndComponent: React.createElement(FieldGroupIconButton, { "aria-controls": fieldId, ariaLabel: `${increaseButtonLabel} ${value + step}`, className: classNames(ComponentClassName.StepperFieldButtonIncrease, classNameModifier(ComponentClassName.StepperFieldButtonIncrease, variation), classNameModifierByFlag(ComponentClassName.StepperFieldButtonIncrease, 'disabled', shouldDisableIncreaseButton)), "data-invalid": hasError, isDisabled: shouldDisableIncreaseButton, onClick: handleIncrease, size: size }, icons?.add ?? React.createElement(IconAdd, { "data-testid": INCREASE_ICON })) },
+            React.createElement(Input, { "aria-describedby": ariaDescribedBy, className: ComponentClassName.StepperFieldInput, hasError: hasError, id: fieldId, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, onBlur: handleOnBlur, onChange: handleOnChange, onWheel: handleOnWheel, ref: ref, size: size, variation: variation, type: "number", value: inputValue, ...inputStyles, ...rest })),
+        React.createElement(FieldErrorMessage, { hasError: hasError, errorMessage: errorMessage })));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/stepperfield)
+ */
+const StepperField = primitiveWithForwardRef(StepperFieldPrimitive);
+StepperField.displayName = 'StepperField';
+
+export { DECREASE_ICON, INCREASE_ICON, StepperField };

package/dist/esm/primitives/StepperField/useStepper.mjs

@@ -1 +1,113 @@
-import*as e from"react";import{isFunction as a}from"@aws-amplify/ui";const l=({max:e,min:a,step:l,value:n})=>{const t=(n-a)%l;return n=n-t+Math.round(t/l)*l,(n=Math.max(a,n))>e&&(n=e-(e-a)%l),n},n=({defaultValue:n=0,value:t,step:u=1,max:s=Number.MAX_SAFE_INTEGER,min:r=Number.MIN_SAFE_INTEGER,isDisabled:o,isReadOnly:i,onChange:c,onDecrease:m,onIncrease:d,onStepChange:h})=>{var p,v;const b=void 0!==t;s=Math.max(r,s);const[x,C]=e.useState((()=>l({min:r,max:s,step:u,value:n}))),I=b?l({min:r,max:s,step:u,value:t}):x,N=null!==(p=null!=o?o:i)&&void 0!==p?p:I+u>s,g=null!==(v=null!=o?o:i)&&void 0!==v?v:I-u<r,[D,E]=e.useState(I),f=e.useCallback((e=>{E(e.target.value),a(c)&&c(e)}),[c]),k=e.useCallback((e=>{const n=parseFloat(e.target.value);if(isNaN(n))return;const t=l({min:r,max:s,step:u,value:n});b||C(t),a(h)&&h(t),E(t)}),[r,s,u,b,h]),M=e.useCallback((()=>{b||C(I+u),a(h)&&h(I+u),a(d)&&d(),E(I+u)}),[u,I,b,d,h]),S=e.useCallback((()=>{b||C(I-u),a(h)&&h(I-u),a(m)&&m(),E(I-u)}),[u,I,b,m,h]),O=e.useCallback((e=>{e.currentTarget.blur()}),[]);return{step:u,value:I,inputValue:D,handleDecrease:S,handleIncrease:M,handleOnBlur:k,handleOnChange:f,handleOnWheel:O,setInputValue:E,shouldDisableDecreaseButton:g,shouldDisableIncreaseButton:N}};export{n as useStepper};
+import * as React from 'react';
+import { isFunction } from '@aws-amplify/ui';
+
+const getCorrectSteppingValue = ({ max, min, step, value, }) => {
+    // Round it to the closest step value
+    // It will be based off min to be consistent with native input[type="number"]
+    // This allows keyboard accessible
+    const remainder = (value - min) % step;
+    value = value - remainder + Math.round(remainder / step) * step;
+    // Make sure new value is not outside the bound
+    value = Math.max(min, value);
+    if (value > max) {
+        value = max - ((max - min) % step);
+    }
+    return value;
+};
+const useStepper = ({ defaultValue = 0, value: controlledValue, step = 1, max = Number.MAX_SAFE_INTEGER, min = Number.MIN_SAFE_INTEGER, isDisabled, isReadOnly, onChange, onDecrease, onIncrease, onStepChange, }) => {
+    const isControlled = controlledValue !== undefined;
+    // Make sure max value is greater than or equal to min value
+    max = Math.max(min, max);
+    // Maintain an internal state for uncontrolled components
+    // This allows to take over the input value and correct any invalid versus purely relying on the native uncontrolled input
+    const [uncontrolledValue, setUncontrolledValue] = React.useState(() => 
+    // This is required for users could provide any defaultValue
+    getCorrectSteppingValue({ min, max, step, value: defaultValue }));
+    // Same for controlled components on the first render because users could provide invalid initial value.
+    // It seems redundant afterwards but necessary for the first render
+    const value = isControlled
+        ? getCorrectSteppingValue({ min, max, step, value: controlledValue })
+        : uncontrolledValue;
+    const shouldDisableIncreaseButton = isDisabled ?? isReadOnly ?? value + step > max;
+    const shouldDisableDecreaseButton = isDisabled ?? isReadOnly ?? value - step < min;
+    // This is the exact value to be rendered on screen
+    // It could be a string, like '-' or empty string when users clear the input
+    const [inputValue, setInputValue] = React.useState(value);
+    const handleOnChange = React.useCallback((event) => {
+        setInputValue(event.target.value);
+        if (isFunction(onChange)) {
+            onChange(event);
+        }
+    }, [onChange]);
+    const handleOnBlur = React.useCallback((event) => {
+        const parsedValue = parseFloat(event.target.value);
+        // Though input[type='number'] has built-in validation to reject non-numerical entries
+        // The entered value could still be empty string or minus '-'
+        // in these cases, no need to do the following validation
+        if (isNaN(parsedValue)) {
+            return;
+        }
+        const newValue = getCorrectSteppingValue({
+            min,
+            max,
+            step,
+            value: parsedValue,
+        });
+        if (!isControlled) {
+            setUncontrolledValue(newValue);
+        }
+        if (isFunction(onStepChange)) {
+            onStepChange(newValue);
+        }
+        setInputValue(newValue);
+    }, [min, max, step, isControlled, onStepChange]);
+    const handleIncrease = React.useCallback(() => {
+        // No need to check if the value will be outside the bounds
+        // The button will be disabled if so
+        if (!isControlled) {
+            setUncontrolledValue(value + step);
+        }
+        if (isFunction(onStepChange)) {
+            onStepChange(value + step);
+        }
+        if (isFunction(onIncrease)) {
+            onIncrease();
+        }
+        setInputValue(value + step);
+    }, [step, value, isControlled, onIncrease, onStepChange]);
+    const handleDecrease = React.useCallback(() => {
+        // No need to check if the value will be outside the bounds
+        // The button will be disabled if so
+        if (!isControlled) {
+            setUncontrolledValue(value - step);
+        }
+        if (isFunction(onStepChange)) {
+            onStepChange(value - step);
+        }
+        if (isFunction(onDecrease)) {
+            onDecrease();
+        }
+        setInputValue(value - step);
+    }, [step, value, isControlled, onDecrease, onStepChange]);
+    // This aims to disable unwanted behaviors on React input[type='number']
+    // When the input gets focused, rotating a wheel will change its value
+    // But the parent container(mostly the entire window) will be scrolling to elsewhere
+    const handleOnWheel = React.useCallback((event) => {
+        event.currentTarget.blur();
+    }, []);
+    return {
+        step,
+        value,
+        inputValue,
+        handleDecrease,
+        handleIncrease,
+        handleOnBlur,
+        handleOnChange,
+        handleOnWheel,
+        setInputValue,
+        shouldDisableDecreaseButton,
+        shouldDisableIncreaseButton,
+    };
+};
+
+export { useStepper };

package/dist/esm/primitives/SwitchField/SwitchField.mjs

@@ -1 +1,48 @@
-import{__rest as e}from"tslib";import*as a from"react";import s from"classnames";import{classNameModifierByFlag as r,classNameModifier as i}from"@aws-amplify/ui";import{ComponentClassNames as t}from"../shared/constants.mjs";import{Flex as l}from"../Flex/Flex.mjs";import"../Field/FieldClearButton.mjs";import"../Field/FieldDescription.mjs";import{FieldErrorMessage as o}from"../Field/FieldErrorMessage.mjs";import"../Field/Field.mjs";import{Input as c}from"../Input/Input.mjs";import{Label as d}from"../Label/Label.mjs";import{useStableId as m}from"../utils/useStableId.mjs";import{useSwitch as n}from"./useSwitch.mjs";import{View as h}from"../View/View.mjs";import{VisuallyHidden as p}from"../VisuallyHidden/VisuallyHidden.mjs";import{useFieldset as b}from"../Fieldset/useFieldset.mjs";const u=a.forwardRef(((u,k)=>{var{className:f,defaultChecked:C,id:w,isChecked:F,isDisabled:S,isLabelHidden:j,label:g,labelPosition:E,name:N,onChange:T,size:y,thumbColor:D,trackCheckedColor:H,trackColor:L,value:v,hasError:x,errorMessage:I}=u,M=e(u,["className","defaultChecked","id","isChecked","isDisabled","isLabelHidden","label","labelPosition","name","onChange","size","thumbColor","trackCheckedColor","trackColor","value","hasError","errorMessage"]);const{isOn:V,changeHandler:z,isFocused:B,setIsFocused:O}=n({onChange:T,isChecked:F,defaultChecked:C,isDisabled:S}),{isFieldsetDisabled:P}=b(),W=P||S,R=m(w),q=j?p:h,A=s(t.SwitchTrack,r(t.SwitchTrack,"checked",V),r(t.SwitchTrack,"disabled",W),r(t.SwitchTrack,"focused",B),r(t.SwitchTrack,"error",x)),G=s(t.SwitchThumb,r(t.SwitchThumb,"checked",V),r(t.SwitchThumb,"disabled",W));return a.createElement(l,Object.assign({className:s(t.SwitchField,i(t.SwitchField,y),f),"data-size":y,"data-label-position":E,ref:k},M),a.createElement(p,null,a.createElement(c,{role:"switch",type:"checkbox",id:R,onChange:z,disabled:S,name:N,checked:V,value:v,onFocus:()=>{O(!0)},onBlur:()=>{O(!1)}})),a.createElement(d,{htmlFor:R,className:s(t.SwitchWrapper,i(t.SwitchWrapper,E)),"data-label-position":E},a.createElement(q,{as:"span",className:t.SwitchLabel},g),a.createElement(h,{as:"span",className:A,"data-checked":V,"data-disabled":W,"data-focused":B,backgroundColor:V?H:L},a.createElement(h,{as:"span",className:G,"data-checked":V,"data-disabled":W,backgroundColor:D}))),a.createElement(o,{hasError:x,errorMessage:I}))}));u.displayName="SwitchField";export{u as SwitchField};
+import * as React from 'react';
+import { classNames, ComponentClassName, classNameModifierByFlag, classNameModifier } from '@aws-amplify/ui';
+import { Flex } from '../Flex/Flex.mjs';
+import '../Field/FieldClearButton.mjs';
+import '../Field/FieldDescription.mjs';
+import { FieldErrorMessage } from '../Field/FieldErrorMessage.mjs';
+import '../Field/Field.mjs';
+import { Input } from '../Input/Input.mjs';
+import { Label } from '../Label/Label.mjs';
+import { useStableId } from '../utils/useStableId.mjs';
+import { useSwitch } from './useSwitch.mjs';
+import { View } from '../View/View.mjs';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.mjs';
+import { useFieldset } from '../Fieldset/useFieldset.mjs';
+import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
+
+const SwitchFieldPrimitive = ({ className, defaultChecked, id, isChecked, isDisabled, isLabelHidden, label, labelPosition, name, onChange, size, thumbColor, trackCheckedColor, trackColor, value, hasError, errorMessage, ...rest }, ref) => {
+    const { isOn, changeHandler, isFocused, setIsFocused } = useSwitch({
+        onChange,
+        isChecked,
+        defaultChecked,
+        isDisabled,
+    });
+    const { isFieldsetDisabled } = useFieldset();
+    const shouldBeDisabled = isFieldsetDisabled ? isFieldsetDisabled : isDisabled;
+    const fieldId = useStableId(id);
+    const wrapperClasses = classNames(ComponentClassName.SwitchTrack, classNameModifierByFlag(ComponentClassName.SwitchTrack, 'checked', isOn), classNameModifierByFlag(ComponentClassName.SwitchTrack, 'disabled', shouldBeDisabled), classNameModifierByFlag(ComponentClassName.SwitchTrack, 'focused', isFocused), classNameModifierByFlag(ComponentClassName.SwitchTrack, 'error', hasError));
+    const componentClasses = classNames(ComponentClassName.SwitchThumb, classNameModifierByFlag(ComponentClassName.SwitchThumb, 'checked', isOn), classNameModifierByFlag(ComponentClassName.SwitchThumb, 'disabled', shouldBeDisabled));
+    return (React.createElement(Flex, { className: classNames(ComponentClassName.SwitchField, classNameModifier(ComponentClassName.SwitchField, size), labelPosition ? `amplify-label-${labelPosition}` : null, className), ref: ref, ...rest },
+        React.createElement(VisuallyHidden, null,
+            React.createElement(Input, { role: "switch", type: "checkbox", id: fieldId, onChange: changeHandler, disabled: isDisabled, name: name, checked: isOn, value: value, onFocus: () => {
+                    setIsFocused(true);
+                }, onBlur: () => {
+                    setIsFocused(false);
+                } })),
+        React.createElement(Label, { htmlFor: fieldId, className: classNames(ComponentClassName.SwitchWrapper, classNameModifier(ComponentClassName.SwitchWrapper, labelPosition)) },
+            isLabelHidden ? (React.createElement(VisuallyHidden, { as: "span", className: ComponentClassName.SwitchLabel }, label)) : (React.createElement(View, { as: "span", className: ComponentClassName.SwitchLabel }, label)),
+            React.createElement(View, { as: "span", className: wrapperClasses, backgroundColor: isOn ? trackCheckedColor : trackColor },
+                React.createElement(View, { as: "span", className: componentClasses, "data-checked": isOn, "data-disabled": shouldBeDisabled, backgroundColor: thumbColor }))),
+        React.createElement(FieldErrorMessage, { hasError: hasError, errorMessage: errorMessage })));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/switchfield)
+ */
+const SwitchField = primitiveWithForwardRef(SwitchFieldPrimitive);
+SwitchField.displayName = 'SwitchField';
+
+export { SwitchField };

package/dist/esm/primitives/SwitchField/useSwitch.mjs

@@ -1 +1,30 @@
-import{useState as e,useCallback as t}from"react";import{isFunction as s}from"@aws-amplify/ui";const o=o=>{const{onChange:r,isChecked:a,defaultChecked:c,isDisabled:i}=o,d=void 0!==a,[n,u]=e(d?a:!!c),[f,h]=e(!1),l=t((e=>{i?e.preventDefault():(s(r)&&r(e),u(e.target.checked))}),[r,i]);return d&&n!==a&&u(a),{isOn:n,changeHandler:l,isFocused:f,setIsFocused:h}};export{o as useSwitch};
+import { useState, useCallback } from 'react';
+import { isFunction } from '@aws-amplify/ui';
+
+const useSwitch = (props) => {
+    const { onChange, isChecked, defaultChecked, isDisabled } = props;
+    const isControlled = typeof isChecked !== 'undefined';
+    const [isOn, setIsOn] = useState(isControlled ? isChecked : !!defaultChecked);
+    const [isFocused, setIsFocused] = useState(false);
+    const changeHandler = useCallback((event) => {
+        if (isDisabled) {
+            event.preventDefault();
+            return;
+        }
+        if (isFunction(onChange)) {
+            onChange(event);
+        }
+        setIsOn(event.target.checked);
+    }, [onChange, isDisabled]);
+    if (isControlled && isOn !== isChecked) {
+        setIsOn(isChecked);
+    }
+    return {
+        isOn,
+        changeHandler,
+        isFocused,
+        setIsFocused,
+    };
+};
+
+export { useSwitch };

package/dist/esm/primitives/Table/Table.mjs

@@ -1 +1,18 @@
-import{__rest as a}from"tslib";import*as e from"react";import i from"classnames";import{classNameModifier as t}from"@aws-amplify/ui";import{ComponentClassNames as r}from"../shared/constants.mjs";import{View as s}from"../View/View.mjs";const o=e.forwardRef(((o,m)=>{var{caption:l,children:n,className:c,highlightOnHover:h=!1,size:p,variation:f}=o,b=a(o,["caption","children","className","highlightOnHover","size","variation"]);const d=i(r.Table,t(r.Table,p),t(r.Table,f),c);return e.createElement(s,Object.assign({as:"table",className:d,"data-highlightonhover":h,"data-size":p,"data-variation":f,ref:m},b),l&&e.createElement(s,{as:"caption",className:r.TableCaption},l),n)}));o.displayName="Table";export{o as Table};
+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';
+
+const TablePrimitive = ({ caption, children, className, highlightOnHover = false, size, variation, ...rest }, ref) => {
+    const componentClasses = classNames(ComponentClassName.Table, classNameModifier(ComponentClassName.Table, size), classNameModifier(ComponentClassName.Table, variation), className);
+    return (React.createElement(View, { as: "table", className: componentClasses, "data-highlightonhover": highlightOnHover, ref: ref, ...rest },
+        caption && (React.createElement(View, { as: "caption", className: ComponentClassName.TableCaption }, caption)),
+        children));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/table)
+ */
+const Table = primitiveWithForwardRef(TablePrimitive);
+Table.displayName = 'Table';
+
+export { Table };

package/dist/esm/primitives/Table/TableBody.mjs

@@ -1 +1,10 @@
-import{__rest as e}from"tslib";import*as r from"react";import a from"classnames";import{ComponentClassNames as s}from"../shared/constants.mjs";import{View as m}from"../View/View.mjs";const o=r.forwardRef(((o,t)=>{var{children:i,className:c}=o,l=e(o,["children","className"]);return r.createElement(m,Object.assign({as:"tbody",className:a(s.TableBody,c),ref:t},l),i)}));o.displayName="TableBody";export{o as TableBody};
+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 TableBodyPrimitive = ({ children, className, ...rest }, ref) => (React.createElement(View, { as: "tbody", className: classNames(ComponentClassName.TableBody, className), ref: ref, ...rest }, children));
+const TableBody = primitiveWithForwardRef(TableBodyPrimitive);
+TableBody.displayName = 'TableBody';
+
+export { TableBody };

package/dist/esm/primitives/Table/TableCell.mjs

@@ -1 +1,12 @@
-import{__rest as a}from"tslib";import*as e from"react";import s from"classnames";import{ComponentClassNames as r}from"../shared/constants.mjs";import{View as m}from"../View/View.mjs";const t=e.forwardRef(((t,l)=>{var{as:o="td",children:i,className:c}=t,n=a(t,["as","children","className"]);return e.createElement(m,Object.assign({as:o,className:s("td"===o?r.TableTd:r.TableTh,c),ref:l},n),i)}));t.displayName="TableCell";export{t as TableCell};
+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 TableCellPrimitive = ({ as: asElementTag = 'td', children, className, ...rest }, ref) => (React.createElement(View, { as: asElementTag, className: classNames(asElementTag === 'td'
+        ? ComponentClassName.TableTd
+        : ComponentClassName.TableTh, className), ref: ref, ...rest }, children));
+const TableCell = primitiveWithForwardRef(TableCellPrimitive);
+TableCell.displayName = 'TableCell';
+
+export { TableCell };

package/dist/esm/primitives/Table/TableFoot.mjs

@@ -1 +1,10 @@
-import{__rest as e}from"tslib";import*as r from"react";import a from"classnames";import{ComponentClassNames as s}from"../shared/constants.mjs";import{View as o}from"../View/View.mjs";const t=r.forwardRef(((t,m)=>{var{children:i,className:c}=t,l=e(t,["children","className"]);return r.createElement(o,Object.assign({as:"tfoot",className:a(s.TableFoot,c),ref:m},l),i)}));t.displayName="TableFoot";export{t as TableFoot};
+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 TableFootPrimitive = ({ children, className, ...rest }, ref) => (React.createElement(View, { as: "tfoot", className: classNames(ComponentClassName.TableFoot, className), ref: ref, ...rest }, children));
+const TableFoot = primitiveWithForwardRef(TableFootPrimitive);
+TableFoot.displayName = 'TableFoot';
+
+export { TableFoot };

package/dist/esm/primitives/Table/TableHead.mjs

@@ -1 +1,10 @@
-import{__rest as e}from"tslib";import*as a from"react";import r from"classnames";import{ComponentClassNames as s}from"../shared/constants.mjs";import{View as m}from"../View/View.mjs";const t=a.forwardRef(((t,o)=>{var{children:i,className:c}=t,l=e(t,["children","className"]);return a.createElement(m,Object.assign({as:"thead",className:r(s.TableHead,c),ref:o},l),i)}));t.displayName="TableHead";export{t as TableHead};
+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 TableHeadPrimitive = ({ children, className, ...rest }, ref) => (React.createElement(View, { as: "thead", className: classNames(ComponentClassName.TableHead, className), ref: ref, ...rest }, children));
+const TableHead = primitiveWithForwardRef(TableHeadPrimitive);
+TableHead.displayName = 'TableHead';
+
+export { TableHead };

package/dist/esm/primitives/Table/TableRow.mjs

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

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

@@ -1 +1,24 @@
-import{__rest as e}from"tslib";import a from"classnames";import*as r from"@radix-ui/react-tabs";import*as t from"react";import{sanitizeNamespaceImport as i}from"@aws-amplify/ui";import{ComponentClassNames as n}from"../shared/constants.mjs";import{Flex as s}from"../Flex/Flex.mjs";import{View as l}from"../View/View.mjs";const{Root:o,List:m,Trigger:c,Content:d}=i(r),f=e=>t.isValidElement(e),p=t.forwardRef(((r,i)=>{var{ariaLabel:l,children:c,className:p,defaultIndex:u=0,currentIndex:g,onChange:b,indicatorPosition:h,spacing:x}=r,N=e(r,["ariaLabel","children","className","defaultIndex","currentIndex","onChange","indicatorPosition","spacing"]);const C={defaultValue:u.toString(),value:null!=g?g.toString():void 0,onValueChange:b},E=t.Children.toArray(c).filter((e=>!!e));return t.createElement(o,Object.assign({},C),t.createElement(m,{"aria-label":l},t.createElement(s,Object.assign({className:a(n.Tabs,p),"data-indicator-position":h,ref:i},N),t.Children.map(E,((e,a)=>{if(f(e))return t.cloneElement(e,{"data-spacing":x,key:a,value:`${a}`})})))),t.Children.map(E,((e,a)=>{if(f(e))return t.createElement(d,{key:a,value:`${a}`},e.props.children)})))})),u=t.forwardRef(((r,i)=>{var{className:s,title:o}=r,m=e(r,["className","title"]);return t.createElement(l,Object.assign({as:c,className:a(n.TabItems,s),ref:i},m),o)}));p.displayName="Tabs",u.displayName="TabItem";export{u as TabItem,p as Tabs};
+import * as React from 'react';
+import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
+import { TabsItem } from './TabsItem.mjs';
+import { TabList } from './TabsList.mjs';
+import { TabPanel } from './TabsPanel.mjs';
+import { TabsContainer } from './TabsContainer.mjs';
+
+const TabsPrimitive = ({ items, indicatorPosition, justifyContent, spacing, ...rest }, ref) => {
+    return (React.createElement(TabsContainer, { ...rest, ref: ref },
+        React.createElement(TabList, { indicatorPosition: indicatorPosition, justifyContent: justifyContent, spacing: spacing }, items?.map(({ value, label, content, ...rest }) => (React.createElement(TabsItem, { ...rest, key: value, value: value }, label)))),
+        items?.map(({ value, content, isDisabled }) => (React.createElement(TabPanel, { key: value, value: value, isDisabled: isDisabled }, content)))));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/tabs)
+ */
+const Tabs = Object.assign(primitiveWithForwardRef(TabsPrimitive), {
+    Item: TabsItem,
+    List: TabList,
+    Panel: TabPanel,
+    Container: TabsContainer,
+});
+Tabs.displayName = 'Tabs';
+
+export { Tabs };

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

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { isFunction, classNames, ComponentClassName } from '@aws-amplify/ui';
+import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
+import { View } from '../View/View.mjs';
+import { TabsContext } from './TabsContext.mjs';
+
+const TabsContainerPrimitive = ({ children, defaultValue, className, value: controlledValue, onValueChange, isLazy, ...rest }, ref) => {
+    const isControlled = controlledValue !== undefined;
+    const [localValue, setLocalValue] = React.useState(() => isControlled ? controlledValue : defaultValue);
+    const activeTab = isControlled ? controlledValue : localValue ?? '';
+    const setActiveTab = React.useCallback((newValue) => {
+        if (isFunction(onValueChange)) {
+            onValueChange(newValue);
+        }
+        if (!isControlled) {
+            setLocalValue(newValue);
+        }
+    }, [onValueChange, isControlled]);
+    const _value = React.useMemo(() => {
+        return {
+            activeTab,
+            isLazy,
+            setActiveTab,
+        };
+    }, [activeTab, setActiveTab, isLazy]);
+    return (React.createElement(TabsContext.Provider, { value: _value },
+        React.createElement(View, { ...rest, ref: ref, className: classNames(className, ComponentClassName.Tabs) }, children)));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/tabs)
+ */
+const TabsContainer = primitiveWithForwardRef(TabsContainerPrimitive);
+TabsContainer.displayName = 'Tabs.Container';
+
+export { TabsContainer };

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+
+const TabsContext = React.createContext({
+    activeTab: '',
+    setActiveTab: () => { },
+});
+
+export { TabsContext };

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

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { classNames, ComponentClassName, classNameModifierByFlag, isTypedFunction } from '@aws-amplify/ui';
+import { View } from '../View/View.mjs';
+import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
+import { TabsContext } from './TabsContext.mjs';
+
+const TabsItemPrimitive = ({ className, value, children, onClick, as = 'button', role = 'tab', ...rest }, ref) => {
+    const { activeTab, setActiveTab } = React.useContext(TabsContext);
+    const isActive = activeTab === value;
+    const handleOnClick = (e) => {
+        if (isTypedFunction(onClick)) {
+            onClick?.(e);
+        }
+        setActiveTab(value);
+    };
+    return (React.createElement(View, { ...rest, role: role, as: as, id: `${value}-tab`, "aria-selected": isActive, "aria-controls": `${value}-panel`, tabIndex: !isActive ? -1 : undefined, className: classNames(ComponentClassName.TabsItem, classNameModifierByFlag(ComponentClassName.TabsItem, 'active', activeTab === value), className), ref: ref, onClick: handleOnClick }, children));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/tabs)
+ */
+const TabsItem = primitiveWithForwardRef(TabsItemPrimitive);
+TabsItem.displayName = 'Tabs.Item';
+
+export { TabsItem };