@aws-amplify/ui-react 5.3.1 → 6.0.0

package/dist/esm/primitives/Icon/icons/IconVisibilityOff.mjs

@@ -1 +1,15 @@
-import{__rest as e}from"tslib";import t from"classnames";import*as s from"react";import{ComponentClassNames as C}from"../../shared/constants.mjs";import{View as m}from"../../View/View.mjs";const r=r=>{const{className:o}=r,a=e(r,["className"]);return s.createElement(m,Object.assign({as:"span",width:"1em",height:"1em",className:t(C.Icon,o)},a),s.createElement("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},s.createElement("path",{d:"M12 6.0002C15.79 6.0002 19.17 8.1302 20.82 11.5002C20.23 12.7202 19.4 13.7702 18.41 14.6202L19.82 16.0302C21.21 14.8002 22.31 13.2602 23 11.5002C21.27 7.1102 17 4.0002 12 4.0002C10.73 4.0002 9.51 4.2002 8.36 4.5702L10.01 6.2202C10.66 6.0902 11.32 6.0002 12 6.0002ZM10.93 7.14019L13 9.2102C13.57 9.4602 14.03 9.9202 14.28 10.4902L16.35 12.5602C16.43 12.2202 16.49 11.8602 16.49 11.4902C16.5 9.0102 14.48 7.0002 12 7.0002C11.63 7.0002 11.28 7.05019 10.93 7.14019ZM2.01 3.8702L4.69 6.5502C3.06 7.8302 1.77 9.5302 1 11.5002C2.73 15.8902 7 19.0002 12 19.0002C13.52 19.0002 14.98 18.7102 16.32 18.1802L19.74 21.6002L21.15 20.1902L3.42 2.4502L2.01 3.8702ZM9.51 11.3702L12.12 13.9802C12.08 13.9902 12.04 14.0002 12 14.0002C10.62 14.0002 9.5 12.8802 9.5 11.5002C9.5 11.4502 9.51 11.4202 9.51 11.3702V11.3702ZM6.11 7.97019L7.86 9.7202C7.63 10.2702 7.5 10.8702 7.5 11.5002C7.5 13.9802 9.52 16.0002 12 16.0002C12.63 16.0002 13.23 15.8702 13.77 15.6402L14.75 16.6202C13.87 16.8602 12.95 17.0002 12 17.0002C8.21 17.0002 4.83 14.8702 3.18 11.5002C3.88 10.0702 4.9 8.89019 6.11 7.97019Z",fill:"currentColor"})))};export{r as IconVisibilityOff};
+import { classNames, ComponentClassName } from '@aws-amplify/ui';
+import * as React from 'react';
+import { View } from '../../View/View.mjs';
+
+/**
+ * @internal For internal Amplify UI use only. May be removed in a future release.
+ */
+const IconVisibilityOff = (props) => {
+    const { className, ...rest } = props;
+    return (React.createElement(View, { as: "span", width: "1em", height: "1em", className: classNames(ComponentClassName.Icon, className), ...rest },
+        React.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+            React.createElement("path", { d: "M12 6.0002C15.79 6.0002 19.17 8.1302 20.82 11.5002C20.23 12.7202 19.4 13.7702 18.41 14.6202L19.82 16.0302C21.21 14.8002 22.31 13.2602 23 11.5002C21.27 7.1102 17 4.0002 12 4.0002C10.73 4.0002 9.51 4.2002 8.36 4.5702L10.01 6.2202C10.66 6.0902 11.32 6.0002 12 6.0002ZM10.93 7.14019L13 9.2102C13.57 9.4602 14.03 9.9202 14.28 10.4902L16.35 12.5602C16.43 12.2202 16.49 11.8602 16.49 11.4902C16.5 9.0102 14.48 7.0002 12 7.0002C11.63 7.0002 11.28 7.05019 10.93 7.14019ZM2.01 3.8702L4.69 6.5502C3.06 7.8302 1.77 9.5302 1 11.5002C2.73 15.8902 7 19.0002 12 19.0002C13.52 19.0002 14.98 18.7102 16.32 18.1802L19.74 21.6002L21.15 20.1902L3.42 2.4502L2.01 3.8702ZM9.51 11.3702L12.12 13.9802C12.08 13.9902 12.04 14.0002 12 14.0002C10.62 14.0002 9.5 12.8802 9.5 11.5002C9.5 11.4502 9.51 11.4202 9.51 11.3702V11.3702ZM6.11 7.97019L7.86 9.7202C7.63 10.2702 7.5 10.8702 7.5 11.5002C7.5 13.9802 9.52 16.0002 12 16.0002C12.63 16.0002 13.23 15.8702 13.77 15.6402L14.75 16.6202C13.87 16.8602 12.95 17.0002 12 17.0002C8.21 17.0002 4.83 14.8702 3.18 11.5002C3.88 10.0702 4.9 8.89019 6.11 7.97019Z", fill: "currentColor" }))));
+};
+
+export { IconVisibilityOff };

package/dist/esm/primitives/Icon/icons/IconWarning.mjs

@@ -1 +1,15 @@
-import{__rest as e}from"tslib";import t from"classnames";import*as s from"react";import{ComponentClassNames as m}from"../../shared/constants.mjs";import{View as r}from"../../View/View.mjs";const o=o=>{const{className:a}=o,i=e(o,["className"]);return s.createElement(r,Object.assign({as:"span",width:"1em",height:"1em",className:t(m.Icon,a)},i),s.createElement("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},s.createElement("path",{d:"M1 21H23L12 2L1 21ZM13 18H11V16H13V18ZM13 14H11V10H13V14Z",fill:"currentColor"})))};export{o as IconWarning};
+import { classNames, ComponentClassName } from '@aws-amplify/ui';
+import * as React from 'react';
+import { View } from '../../View/View.mjs';
+
+/**
+ * @internal For internal Amplify UI use only. May be removed in a future release.
+ */
+const IconWarning = (props) => {
+    const { className, ...rest } = props;
+    return (React.createElement(View, { as: "span", width: "1em", height: "1em", className: classNames(ComponentClassName.Icon, className), ...rest },
+        React.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+            React.createElement("path", { d: "M1 21H23L12 2L1 21ZM13 18H11V16H13V18ZM13 14H11V10H13V14Z", fill: "currentColor" }))));
+};
+
+export { IconWarning };

package/dist/esm/primitives/Image/Image.mjs

@@ -1 +1,13 @@
-import{__rest as a}from"tslib";import*as m from"react";import s from"classnames";import{ComponentClassNames as e}from"../shared/constants.mjs";import{View as r}from"../View/View.mjs";const t=m.forwardRef(((t,o)=>{var{className:i}=t,c=a(t,["className"]);return m.createElement(r,Object.assign({as:"img",ref:o,className:s(e.Image,i)},c))}));t.displayName="Image";export{t as Image};
+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 ImagePrimitive = ({ className, ...rest }, ref) => (React.createElement(View, { as: "img", ref: ref, className: classNames(ComponentClassName.Image, className), ...rest }));
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/image)
+ */
+const Image = primitiveWithForwardRef(ImagePrimitive);
+Image.displayName = 'Image';
+
+export { Image };

package/dist/esm/primitives/Input/Input.mjs

@@ -1 +1,15 @@
-import{__rest as e}from"tslib";import*as a from"react";import t from"classnames";import{classNameModifier as i,classNameModifierByFlag as s}from"@aws-amplify/ui";import{ComponentClassNames as r}from"../shared/constants.mjs";import{View as l}from"../View/View.mjs";import{useFieldset as d}from"../Fieldset/useFieldset.mjs";const o=a.forwardRef(((o,u)=>{var{autoComplete:m,checked:p,className:n,defaultChecked:c,defaultValue:f,id:h,isDisabled:v,isReadOnly:y,isRequired:C,size:b,type:k="text",hasError:I=!1,value:R,variation:V}=o,j=e(o,["autoComplete","checked","className","defaultChecked","defaultValue","id","isDisabled","isReadOnly","isRequired","size","type","hasError","value","variation"]);const w=t(r.Input,r.FieldGroupControl,i(r.Input,V),s(r.Input,"error",I),i(r.Input,b),n),{isFieldsetDisabled:D}=d();return a.createElement(l,Object.assign({"aria-invalid":I,as:"input",autoComplete:m,checked:p,className:w,"data-size":b,"data-variation":V,defaultChecked:c,defaultValue:f,isDisabled:D||v,id:h,readOnly:y,ref:u,required:C,type:k,value:R},j))}));o.displayName="Input";export{o as Input};
+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 InputPrimitive = ({ autoComplete, checked, className, defaultChecked, defaultValue, id, isDisabled, isReadOnly, isRequired, size, type = 'text', hasError = false, value, variation, ...rest }, ref) => {
+    const componentClasses = classNames(ComponentClassName.Input, ComponentClassName.FieldGroupControl, classNameModifier(ComponentClassName.Input, variation), classNameModifierByFlag(ComponentClassName.Input, 'error', hasError), classNameModifier(ComponentClassName.Input, size), className);
+    const { isFieldsetDisabled } = useFieldset();
+    return (React.createElement(View, { "aria-invalid": hasError, as: "input", autoComplete: autoComplete, checked: checked, className: componentClasses, defaultChecked: defaultChecked, defaultValue: defaultValue, isDisabled: isFieldsetDisabled ? isFieldsetDisabled : isDisabled, id: id, readOnly: isReadOnly, ref: ref, required: isRequired, type: type, value: value, ...rest }));
+};
+const Input = primitiveWithForwardRef(InputPrimitive);
+Input.displayName = 'Input';
+
+export { Input };

package/dist/esm/primitives/Label/Label.mjs

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

package/dist/esm/primitives/Link/Link.mjs

@@ -1 +1,15 @@
-import{__rest as r}from"tslib";import*as e from"react";import a from"classnames";import{ComponentClassNames as s}from"../shared/constants.mjs";import{View as o}from"../View/View.mjs";const t=e.forwardRef(((t,i)=>{var{as:m="a",children:n,className:l,isExternal:c}=t,f=r(t,["as","children","className","isExternal"]);return e.createElement(o,Object.assign({as:m,className:a(s.Link,l),ref:i,rel:c?"noopener noreferrer":void 0,target:c?"_blank":void 0},f),n)}));t.displayName="Link";export{t as Link};
+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 LinkPrimitive = ({ as = 'a', children, className, isExternal, ...rest }, ref) => {
+    return (React.createElement(View, { as: as, className: classNames(ComponentClassName.Link, className), ref: ref, rel: isExternal ? 'noopener noreferrer' : undefined, target: isExternal ? '_blank' : undefined, ...rest }, children));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/link)
+ */
+const Link = primitiveWithForwardRef(LinkPrimitive);
+Link.displayName = 'Link';
+
+export { Link };

package/dist/esm/primitives/Loader/Loader.mjs

@@ -1 +1,56 @@
-import{__rest as e}from"tslib";import*as t from"react";import a from"classnames";import{classNameModifier as r}from"@aws-amplify/ui";import{ComponentClassNames as i}from"../shared/constants.mjs";import{View as l}from"../View/View.mjs";const s="linear-empty",n="linear-filled",o="circular-empty",m="circular-filled",c=8,d=42,y=84*Math.PI,p=t.forwardRef(((c,d)=>{var{className:p,filledColor:f,emptyColor:x,size:g,variation:u,isDeterminate:v=!1,isPercentageTextHidden:E=!1,percentage:h=0}=c,k=e(c,["className","filledColor","emptyColor","size","variation","isDeterminate","isPercentageTextHidden","percentage"]);h=Math.min(h,100);const L=`${h=Math.max(h,0)}%`,N=a(i.Loader,r(i.Loader,g),r(i.Loader,u),v?i.LoaderDeterminate:null,p),D=t.createElement("g",null,t.createElement("line",{x1:"0",x2:"100%",y1:"50%",y2:"50%",style:{stroke:String(x)},"data-testid":s}),t.createElement("line",{x1:"0",x2:v?L:"100%",y1:"50%",y2:"50%",style:{stroke:v&&0===h?"none":f?String(f):void 0},"data-testid":n}),v?t.createElement("text",{"aria-live":"polite",className:a(i.LoaderPercentageText,E?i.VisuallyHidden:null),x:`${-1+h}%`,y:"200%"},L):null),P=t.createElement("g",null,t.createElement("circle",{cx:"50%",cy:"50%",r:"42%",strokeWidth:"8%",style:{stroke:String(x)},"data-testid":o}),t.createElement("circle",{cx:"50%",cy:"50%",r:"42%",strokeWidth:"8%",style:{stroke:String(f),strokeDasharray:v?`${y}% ${y}%`:void 0,strokeDashoffset:v?y-y*h/100+"%":void 0},"data-testid":m}),v?t.createElement("text",{"aria-live":"polite",className:a(i.LoaderPercentageText,E?i.VisuallyHidden:null),x:"130%",y:"80%"},L):null);return t.createElement(l,Object.assign({as:"svg",className:N,"data-size":g,"data-variation":u,ref:d,role:"img"},k),"linear"===u?D:P)}));p.displayName="Loader";export{o as CIRCULAR_EMPTY,m as CIRCULAR_FILLED,c as CIRCULAR_STROKE_WIDTH,y as CIRCUMFERENCE,s as LINEAR_EMPTY,n as LINEAR_FILLED,p as Loader,d as RADIUS};
+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 LINEAR_EMPTY = 'linear-empty';
+const LINEAR_FILLED = 'linear-filled';
+const CIRCULAR_EMPTY = 'circular-empty';
+const CIRCULAR_FILLED = 'circular-filled';
+// radius + strokeWidth = 50
+const CIRCULAR_STROKE_WIDTH = 8;
+const RADIUS = 42;
+// circumference = 2 * r * PI  (r = 42)
+const CIRCUMFERENCE = 2 * RADIUS * Math.PI;
+const LoaderPrimitive = ({ className, filledColor, emptyColor, size, variation, isDeterminate = false, isPercentageTextHidden = false, percentage = 0, ...rest }, ref) => {
+    percentage = Math.min(percentage, 100);
+    percentage = Math.max(percentage, 0);
+    const percent = `${percentage}%`;
+    const componentClasses = classNames(ComponentClassName.Loader, classNameModifier(ComponentClassName.Loader, size), classNameModifier(ComponentClassName.Loader, variation), classNameModifierByFlag(ComponentClassName.Loader, 'determinate', isDeterminate), className);
+    const linearLoader = (React.createElement("g", null,
+        React.createElement("line", { x1: "0", x2: "100%", y1: "50%", y2: "50%", style: { stroke: String(emptyColor) }, "data-testid": LINEAR_EMPTY }),
+        React.createElement("line", { x1: "0", x2: isDeterminate ? percent : '100%', y1: "50%", y2: "50%", style: {
+                // To get rid of the visible stroke linecap when percentage is 0
+                stroke: isDeterminate && percentage === 0
+                    ? 'none'
+                    : filledColor
+                        ? String(filledColor)
+                        : undefined,
+            }, "data-testid": LINEAR_FILLED }),
+        isDeterminate ? (React.createElement("text", { "aria-live": "polite", className: classNames(ComponentClassName.LoaderLabel, isPercentageTextHidden ? ComponentClassName.VisuallyHidden : null), 
+            // -1% offset makes the text position look nicest
+            x: `${-1 + percentage}%`, y: "200%" }, percent)) : null));
+    // r + stroke-width should add up to 50% to avoid overflow
+    const circularLoader = (React.createElement("g", null,
+        React.createElement("circle", { cx: "50%", cy: "50%", r: `${RADIUS}%`, strokeWidth: `${CIRCULAR_STROKE_WIDTH}%`, style: { stroke: String(emptyColor) }, "data-testid": CIRCULAR_EMPTY }),
+        React.createElement("circle", { cx: "50%", cy: "50%", r: `${RADIUS}%`, strokeWidth: `${CIRCULAR_STROKE_WIDTH}%`, style: {
+                stroke: String(filledColor),
+                strokeDasharray: isDeterminate
+                    ? `${CIRCUMFERENCE}% ${CIRCUMFERENCE}%`
+                    : undefined,
+                strokeDashoffset: isDeterminate
+                    ? `${CIRCUMFERENCE - (CIRCUMFERENCE * percentage) / 100}%`
+                    : undefined,
+            }, "data-testid": CIRCULAR_FILLED }),
+        isDeterminate ? (React.createElement("text", { "aria-live": "polite", className: classNames(ComponentClassName.LoaderLabel, isPercentageTextHidden ? ComponentClassName.VisuallyHidden : null), 
+            // this x and y make text position look nicest
+            x: "130%", y: "80%" }, percent)) : null));
+    return (React.createElement(View, { as: "svg", className: componentClasses, ref: ref, role: "img", ...rest }, variation === 'linear' ? linearLoader : circularLoader));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/loader)
+ */
+const Loader = primitiveWithForwardRef(LoaderPrimitive);
+Loader.displayName = 'Loader';
+
+export { CIRCULAR_EMPTY, CIRCULAR_FILLED, CIRCULAR_STROKE_WIDTH, CIRCUMFERENCE, LINEAR_EMPTY, LINEAR_FILLED, Loader, RADIUS };

package/dist/esm/primitives/Menu/Menu.mjs

@@ -1 +1,31 @@
-import{__rest as e}from"tslib";import*as n from"react";import r from"classnames";import*as t from"@radix-ui/react-dropdown-menu";import{sanitizeNamespaceImport as o}from"@aws-amplify/ui";import{ButtonGroup as m}from"../ButtonGroup/ButtonGroup.mjs";import{ComponentClassNames as a}from"../shared/constants.mjs";import"../Icon/Icon.mjs";import"../Icon/context/IconsContext.mjs";import{useIcons as s}from"../Icon/context/useIcons.mjs";import"../View/View.mjs";import{IconMenu as i}from"../Icon/icons/IconMenu.mjs";import{MenuButton as l}from"./MenuButton.mjs";const{DropdownMenu:p,DropdownMenuTrigger:c,DropdownMenuContent:u}=o(t),g="amplify-menu-trigger-test-id",d="amplify-menu-items-group-test-id",f=n.forwardRef(((t,o)=>{var f,{menuAlign:C="start",children:I,className:j,isOpen:M,size:w,trigger:N,triggerClassName:h,ariaLabel:E,onOpenChange:O}=t,b=e(t,["menuAlign","children","className","isOpen","size","trigger","triggerClassName","ariaLabel","onOpenChange"]);const x=s("menu");return n.createElement(p,{onOpenChange:O,open:M},n.createElement(c,{asChild:!0},null!=N?N:n.createElement(l,{ariaLabel:E,size:w,testId:g,className:r(a.MenuTrigger,h)},null!==(f=null==x?void 0:x.menu)&&void 0!==f?f:n.createElement(i,null))),n.createElement(u,{align:C,className:a.MenuContentWrapper},n.createElement(m,Object.assign({className:r(a.MenuContent,j),ref:o,size:w,testId:d},b),I)))}));f.displayName="Menu";export{d as MENU_ITEMS_GROUP_TEST_ID,g as MENU_TRIGGER_TEST_ID,f as Menu};
+import * as React from 'react';
+import { sanitizeNamespaceImport, classNames, ComponentClassName } from '@aws-amplify/ui';
+import * as Dropdown from '@radix-ui/react-dropdown-menu';
+import { ButtonGroup } from '../ButtonGroup/ButtonGroup.mjs';
+import '../Icon/Icon.mjs';
+import '../Icon/context/IconsContext.mjs';
+import { useIcons } from '../Icon/context/useIcons.mjs';
+import '../View/View.mjs';
+import { IconMenu } from '../Icon/icons/IconMenu.mjs';
+import { MenuButton } from './MenuButton.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 { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent } = sanitizeNamespaceImport(Dropdown);
+const MENU_TRIGGER_TEST_ID = 'amplify-menu-trigger-test-id';
+const MENU_ITEMS_GROUP_TEST_ID = 'amplify-menu-items-group-test-id';
+const MenuPrimitive = ({ menuAlign = 'start', children, className, isOpen, size, trigger, triggerClassName, ariaLabel, onOpenChange, ...rest }, ref) => {
+    const icons = useIcons('menu');
+    return (React.createElement(DropdownMenu, { onOpenChange: onOpenChange, open: isOpen },
+        React.createElement(DropdownMenuTrigger, { asChild: true }, trigger ?? (React.createElement(MenuButton, { ariaLabel: ariaLabel, size: size, testId: MENU_TRIGGER_TEST_ID, className: classNames(ComponentClassName.MenuTrigger, triggerClassName) }, icons?.menu ?? React.createElement(IconMenu, null)))),
+        React.createElement(DropdownMenuContent, { align: menuAlign, className: ComponentClassName.MenuWrapper },
+            React.createElement(ButtonGroup, { className: classNames(ComponentClassName.MenuContent, className), ref: ref, size: size, testId: MENU_ITEMS_GROUP_TEST_ID, ...rest }, children))));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/menu)
+ */
+const Menu = primitiveWithForwardRef(MenuPrimitive);
+Menu.displayName = 'Menu';
+
+export { MENU_ITEMS_GROUP_TEST_ID, MENU_TRIGGER_TEST_ID, Menu };

package/dist/esm/primitives/Menu/MenuButton.mjs

@@ -1 +1,18 @@
-import{__rest as t}from"tslib";import*as a from"react";import s from"classnames";import{Button as i}from"../Button/Button.mjs";import{classNameModifier as e}from"@aws-amplify/ui";import{ComponentClassNames as o}from"../shared/constants.mjs";import{useStyles as r}from"../shared/styleUtils.mjs";const l=a.forwardRef(((l,n)=>{var{ariaLabel:d,className:m,children:p,isFullWidth:u=!1,isDisabled:c,isLoading:f,size:y,style:b,type:h="button",variation:B,testId:g}=l,j=t(l,["ariaLabel","className","children","isFullWidth","isDisabled","isLoading","size","style","type","variation","testId"]);const{propStyles:v,nonStyleProps:L}=r(j,b),N=s(o.Button,e(o.Button,y),e(o.Button,B),m);return a.createElement(i,Object.assign({ref:n,className:N,"data-fullwidth":u,"data-loading":f,"data-size":y,"data-variation":B,disabled:null!=c?c:f,type:h,"data-testid":g,"aria-label":d,style:v},L),p)}));l.displayName="MenuButton";export{l as MenuButton};
+import * as React from 'react';
+import { classNames, ComponentClassName, classNameModifier } from '@aws-amplify/ui';
+import { Button } from '../Button/Button.mjs';
+import { useStyles } from '../shared/styleUtils.mjs';
+import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
+
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/menu)
+ */
+const MenuButtonPrimitive = ({ ariaLabel, className, children, isDisabled, isLoading, size, style, type = 'button', variation, testId, ...rest }, ref) => {
+    const { propStyles, nonStyleProps } = useStyles(rest, style);
+    const componentClasses = classNames(ComponentClassName.Button, classNameModifier(ComponentClassName.Button, size), classNameModifier(ComponentClassName.Button, variation), className);
+    return (React.createElement(Button, { ref: ref, className: componentClasses, disabled: isDisabled ?? isLoading, type: type, testId: testId, "aria-label": ariaLabel, style: propStyles, ...nonStyleProps }, children));
+};
+const MenuButton = primitiveWithForwardRef(MenuButtonPrimitive);
+MenuButton.displayName = 'MenuButton';
+
+export { MenuButton };

package/dist/esm/primitives/Menu/MenuItem.mjs

@@ -1 +1,22 @@
-import{__rest as e}from"tslib";import*as m from"react";import r from"classnames";import*as t from"@radix-ui/react-dropdown-menu";import{sanitizeNamespaceImport as a}from"@aws-amplify/ui";import{ComponentClassNames as s}from"../shared/constants.mjs";import{MenuButton as o}from"./MenuButton.mjs";const{DropdownMenuItem:i}=a(t),n="amplify-menu-item-test-id",c=m.forwardRef(((t,a)=>{var{children:c,className:l}=t,p=e(t,["children","className"]);return m.createElement(i,{asChild:!0,ref:a},m.createElement(o,Object.assign({className:r(s.MenuItem,l),testId:n},p,{variation:"menu"}),c))}));c.displayName="MenuItem";export{n as MENU_ITEM_TEST_ID,c as MenuItem};
+import * as React from 'react';
+import { sanitizeNamespaceImport, classNames, ComponentClassName } from '@aws-amplify/ui';
+import * as Dropdown from '@radix-ui/react-dropdown-menu';
+import { MenuButton } from './MenuButton.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 { DropdownMenuItem } = sanitizeNamespaceImport(Dropdown);
+const MENU_ITEM_TEST_ID = 'amplify-menu-item-test-id';
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/menu)
+ */
+const MenuItemPrimitive = ({ children, className, ...rest }, ref) => {
+    return (React.createElement(DropdownMenuItem, { asChild: true, ref: ref },
+        React.createElement(MenuButton, { className: classNames(ComponentClassName.MenuItem, className), testId: MENU_ITEM_TEST_ID, ...rest, variation: "menu" // ensures `menu` variation is not overwritten
+         }, children)));
+};
+const MenuItem = primitiveWithForwardRef(MenuItemPrimitive);
+MenuItem.displayName = 'MenuItem';
+
+export { MENU_ITEM_TEST_ID, MenuItem };

package/dist/esm/primitives/Message/Message.mjs

@@ -1 +1,23 @@
-import{__rest as e}from"tslib";import*as s from"react";import{MessageHeading as i}from"./MessageHeading.mjs";import{MessageIcon as m}from"./MessageIcon.mjs";import{MessageDismiss as r}from"./MessageDismiss.mjs";import{MessageContent as a}from"./MessageContent.mjs";import{MessageContainer as o}from"./MessageContainer.mjs";const n=s.forwardRef(((n,l)=>{var{children:t,heading:c,dismissLabel:d,isDismissible:f,onDismiss:g,hasIcon:h=!0,colorTheme:p="neutral",variation:u="filled"}=n,b=e(n,["children","heading","dismissLabel","isDismissible","onDismiss","hasIcon","colorTheme","variation"]);return s.createElement(o,Object.assign({colorTheme:p,variation:u,ref:l},b),h?s.createElement(m,null):null,s.createElement(a,null,c?s.createElement(i,null,c):null,t),f?s.createElement(r,{onDismiss:g,dismissLabel:d}):null)}));n.displayName="Message";export{n as Message};
+import * as React from 'react';
+import { MessageHeading } from './MessageHeading.mjs';
+import { MessageIcon } from './MessageIcon.mjs';
+import { MessageDismiss } from './MessageDismiss.mjs';
+import { MessageContent } from './MessageContent.mjs';
+import { MessageContainer } from './MessageContainer.mjs';
+import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
+
+const MessagePrimitive = ({ children, heading, dismissLabel, isDismissible, onDismiss, hasIcon = true, colorTheme = 'neutral', variation = 'filled', ...rest }, ref) => {
+    return (React.createElement(MessageContainer, { colorTheme: colorTheme, variation: variation, ref: ref, ...rest },
+        hasIcon ? React.createElement(MessageIcon, null) : null,
+        React.createElement(MessageContent, null,
+            heading ? React.createElement(MessageHeading, null, heading) : null,
+            children),
+        isDismissible ? (React.createElement(MessageDismiss, { onDismiss: onDismiss, dismissLabel: dismissLabel })) : null));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/message)
+ */
+const Message = primitiveWithForwardRef(MessagePrimitive);
+Message.displayName = 'Message';
+
+export { Message };

package/dist/esm/primitives/Message/MessageContainer.mjs

@@ -1 +1,19 @@
-import{__rest as e}from"tslib";import*as s from"react";import r from"classnames";import{ComponentClassNames as a}from"../shared/constants.mjs";import{classNameModifier as m}from"@aws-amplify/ui";import{Flex as o}from"../Flex/Flex.mjs";import{MessageContext as t}from"./useMessage.mjs";const i=s.forwardRef(((i,l)=>{var{children:n,className:c,colorTheme:f="neutral",variation:d="filled"}=i,p=e(i,["children","className","colorTheme","variation"]);const[u,g]=s.useState(!1),h=s.useMemo((()=>({colorTheme:f,dismissed:u,setDismissed:g})),[f,u]);return s.createElement(t.Provider,{value:h},u?null:s.createElement(o,Object.assign({className:r(a.Message,m(a.Message,d),m(a.Message,f),c),ref:l},p),n))}));i.displayName="MessageContainer";export{i as MessageContainer};
+import * as React from 'react';
+import { classNames, ComponentClassName, classNameModifier } from '@aws-amplify/ui';
+import { Flex } from '../Flex/Flex.mjs';
+import { MessageContext } from './useMessage.mjs';
+import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
+
+const MessageContainerPrimitive = ({ children, className, colorTheme = 'neutral', variation = 'filled', ...rest }, ref) => {
+    const [dismissed, setDismissed] = React.useState(false);
+    const value = React.useMemo(() => ({
+        colorTheme,
+        dismissed,
+        setDismissed,
+    }), [colorTheme, dismissed]);
+    return (React.createElement(MessageContext.Provider, { value: value }, !dismissed ? (React.createElement(Flex, { className: classNames(ComponentClassName.Message, classNameModifier(ComponentClassName.Message, variation), classNameModifier(ComponentClassName.Message, colorTheme), className), ref: ref, ...rest }, children)) : null));
+};
+const MessageContainer = primitiveWithForwardRef(MessageContainerPrimitive);
+MessageContainer.displayName = 'MessageContainer';
+
+export { MessageContainer };

package/dist/esm/primitives/Message/MessageContent.mjs

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

package/dist/esm/primitives/Message/MessageDismiss.mjs

@@ -1 +1,28 @@
-import{__rest as s}from"tslib";import*as e from"react";import o from"classnames";import{Button as i}from"../Button/Button.mjs";import{VisuallyHidden as m}from"../VisuallyHidden/VisuallyHidden.mjs";import{ComponentClassNames as a,ComponentText as r}from"../shared/constants.mjs";import"../View/View.mjs";import{IconClose as t}from"../Icon/icons/IconClose.mjs";import{useIcons as n}from"../Icon/context/useIcons.mjs";import{useMessage as l}from"./useMessage.mjs";import{isFunction as c}from"@aws-amplify/ui";const d=e.forwardRef(((d,f)=>{var p,{onDismiss:u,dismissLabel:j,hasIcon:h=!0,children:b,className:g}=d,I=s(d,["onDismiss","dismissLabel","hasIcon","children","className"]);const{setDismissed:v}=l(),y=n("message"),w=e.useCallback((()=>{v(!0),c(u)&&u()}),[v,u]);return e.createElement(i,Object.assign({variation:"link",colorTheme:"overlay",className:o(a.MessageDismiss,g),ref:f,onClick:w},I),h?null!==(p=null==y?void 0:y.close)&&void 0!==p?p:e.createElement(t,{"aria-hidden":"true"}):null,b||e.createElement(m,null,j||r.Message.dismissLabel))}));d.displayName="MessageContent";export{d as MessageDismiss};
+import * as React from 'react';
+import { isFunction, classNames, ComponentClassName } from '@aws-amplify/ui';
+import { Button } from '../Button/Button.mjs';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.mjs';
+import '../View/View.mjs';
+import { IconClose } from '../Icon/icons/IconClose.mjs';
+import { useIcons } from '../Icon/context/useIcons.mjs';
+import { ComponentText } from '../shared/constants.mjs';
+import { useMessage } from './useMessage.mjs';
+import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
+
+const MessageDismissPrimitive = ({ onDismiss, dismissLabel, hasIcon = true, children, className, ...rest }, ref) => {
+    const { setDismissed } = useMessage();
+    const icons = useIcons('message');
+    const dismissMessage = React.useCallback(() => {
+        setDismissed(true);
+        if (isFunction(onDismiss)) {
+            onDismiss();
+        }
+    }, [setDismissed, onDismiss]);
+    return (React.createElement(Button, { variation: "link", colorTheme: "overlay", className: classNames(ComponentClassName.MessageDismiss, className), ref: ref, onClick: dismissMessage, ...rest },
+        hasIcon ? icons?.close ?? React.createElement(IconClose, { "aria-hidden": "true" }) : null,
+        children ? (children) : (React.createElement(VisuallyHidden, null, dismissLabel ? dismissLabel : ComponentText.Message.dismissLabel))));
+};
+const MessageDismiss = primitiveWithForwardRef(MessageDismissPrimitive);
+MessageDismiss.displayName = 'MessageContent';
+
+export { MessageDismiss };

package/dist/esm/primitives/Message/MessageHeading.mjs

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

package/dist/esm/primitives/Message/MessageIcon.mjs

@@ -1 +1,35 @@
-import{__rest as e}from"tslib";import*as o from"react";import r from"classnames";import{ComponentClassNames as s}from"../shared/constants.mjs";import{View as n}from"../View/View.mjs";import{useMessage as c}from"./useMessage.mjs";import{IconCheckCircle as m}from"../Icon/icons/IconCheckCircle.mjs";import{IconError as l}from"../Icon/icons/IconError.mjs";import{IconInfo as a}from"../Icon/icons/IconInfo.mjs";import{IconWarning as i}from"../Icon/icons/IconWarning.mjs";import{useIcons as t}from"../Icon/context/useIcons.mjs";const u=o.forwardRef(((u,f)=>{var d,p,I,j,{className:v}=u,g=e(u,["className"]);const w=t("message"),{colorTheme:E}=c();let b;switch(E){case"info":b=null!==(d=null==w?void 0:w.info)&&void 0!==d?d:o.createElement(a,null);break;case"error":b=null!==(p=null==w?void 0:w.error)&&void 0!==p?p:o.createElement(l,null);break;case"warning":b=null!==(I=null==w?void 0:w.warning)&&void 0!==I?I:o.createElement(i,null);break;case"success":b=null!==(j=null==w?void 0:w.success)&&void 0!==j?j:o.createElement(m,null)}return b?o.createElement(n,Object.assign({className:r(s.MessageIcon,v),"aria-hidden":"true",ref:f},g),b):null}));u.displayName="MessageIcon";export{u as MessageIcon};
+import * as React from 'react';
+import { classNames, ComponentClassName } from '@aws-amplify/ui';
+import { View } from '../View/View.mjs';
+import { useMessage } from './useMessage.mjs';
+import { IconCheckCircle } from '../Icon/icons/IconCheckCircle.mjs';
+import { IconError } from '../Icon/icons/IconError.mjs';
+import { IconInfo } from '../Icon/icons/IconInfo.mjs';
+import { IconWarning } from '../Icon/icons/IconWarning.mjs';
+import { useIcons } from '../Icon/context/useIcons.mjs';
+import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
+
+const MessageIconPrimitive = ({ className, ...rest }, ref) => {
+    const icons = useIcons('message');
+    const { colorTheme } = useMessage();
+    let icon;
+    switch (colorTheme) {
+        case 'info':
+            icon = icons?.info ?? React.createElement(IconInfo, null);
+            break;
+        case 'error':
+            icon = icons?.error ?? React.createElement(IconError, null);
+            break;
+        case 'warning':
+            icon = icons?.warning ?? React.createElement(IconWarning, null);
+            break;
+        case 'success':
+            icon = icons?.success ?? React.createElement(IconCheckCircle, null);
+            break;
+    }
+    return icon ? (React.createElement(View, { className: classNames(ComponentClassName.MessageIcon, className), "aria-hidden": "true", ref: ref, ...rest }, icon)) : null;
+};
+const MessageIcon = primitiveWithForwardRef(MessageIconPrimitive);
+MessageIcon.displayName = 'MessageIcon';
+
+export { MessageIcon };

package/dist/esm/primitives/Message/useMessage.mjs

@@ -1 +1,9 @@
-import*as e from"react";const s=e.createContext({dismissed:!1,setDismissed:()=>{}}),t=()=>e.useContext(s);export{s as MessageContext,t as useMessage};
+import * as React from 'react';
+
+const MessageContext = React.createContext({
+    dismissed: false,
+    setDismissed: () => { },
+});
+const useMessage = () => React.useContext(MessageContext);
+
+export { MessageContext, useMessage };

package/dist/esm/primitives/Pagination/Pagination.mjs

@@ -1 +1,31 @@
-import{__rest as e}from"tslib";import*as a from"react";import t from"classnames";import{Flex as n}from"../Flex/Flex.mjs";import{View as r}from"../View/View.mjs";import{usePaginationItems as o}from"./usePaginationItems.mjs";import{ComponentClassNames as s}from"../shared/constants.mjs";const i=a.forwardRef(((i,l)=>{var{className:g,currentPage:m=1,totalPages:c,hasMorePages:u=!1,siblingCount:P,currentPageLabel:b,pageLabel:p,previousLabel:L,nextLabel:f,onNext:x,onPrevious:h,onChange:v}=i,C=e(i,["className","currentPage","totalPages","hasMorePages","siblingCount","currentPageLabel","pageLabel","previousLabel","nextLabel","onNext","onPrevious","onChange"]);const N=o({currentPage:m,totalPages:c,hasMorePages:u,siblingCount:P,currentPageLabel:b,pageLabel:p,previousLabel:L,nextLabel:f,onNext:x,onPrevious:h,onChange:v});return a.createElement(r,Object.assign({as:"nav",className:t(s.Pagination,g),ref:l},C),a.createElement(n,{as:"ol",justifyContent:"center",alignItems:"center",gap:"inherit"},N))}));i.displayName="Pagination";export{i as Pagination};
+import * as React from 'react';
+import { classNames, ComponentClassName } from '@aws-amplify/ui';
+import { Flex } from '../Flex/Flex.mjs';
+import { View } from '../View/View.mjs';
+import { usePaginationItems } from './usePaginationItems.mjs';
+import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
+
+const PaginationPrimitive = ({ className, currentPage = 1, totalPages, hasMorePages = false, siblingCount, currentPageLabel, pageLabel, previousLabel, nextLabel, onNext, onPrevious, onChange, ...rest }, ref) => {
+    const paginationItems = usePaginationItems({
+        currentPage,
+        totalPages,
+        hasMorePages,
+        siblingCount,
+        currentPageLabel,
+        pageLabel,
+        previousLabel,
+        nextLabel,
+        onNext,
+        onPrevious,
+        onChange,
+    });
+    return (React.createElement(View, { as: "nav", className: classNames(ComponentClassName.Pagination, className), ref: ref, ...rest },
+        React.createElement(Flex, { as: "ol", justifyContent: "center", alignItems: "center", gap: "inherit" }, paginationItems)));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/pagination)
+ */
+const Pagination = primitiveWithForwardRef(PaginationPrimitive);
+Pagination.displayName = 'Pagination';
+
+export { Pagination };

package/dist/esm/primitives/Pagination/PaginationItem.mjs

@@ -1 +1,48 @@
-import{__rest as e}from"tslib";import*as t from"react";import a from"classnames";import{Button as n}from"../Button/Button.mjs";import{Flex as i}from"../Flex/Flex.mjs";import"../Icon/Icon.mjs";import"../Icon/context/IconsContext.mjs";import{useIcons as l}from"../Icon/context/useIcons.mjs";import{ComponentClassNames as s,ComponentText as o}from"../shared/constants.mjs";import{View as r}from"../View/View.mjs";import{IconChevronLeft as m}from"../Icon/icons/IconChevronLeft.mjs";import{IconChevronRight as c}from"../Icon/icons/IconChevronRight.mjs";import{VisuallyHidden as u}from"../VisuallyHidden/VisuallyHidden.mjs";import{classNameModifier as p,classNameModifierByFlag as g}from"@aws-amplify/ui";const I="current",b="ellipsis",d=d=>{var P,j,{type:f,page:E,currentPage:v,currentPageLabel:k=o.PaginationItem.currentPageLabel,isDisabled:B,onClick:C,ariaLabel:L}=d,x=e(d,["type","page","currentPage","currentPageLabel","isDisabled","onClick","ariaLabel"]);const y=l("pagination"),N=a(s.PaginationItemButton,p(s.PaginationItemButton,"link"),g(s.PaginationItemButton,"disabled",B)),h=a(s.PaginationItemButton,p(s.PaginationItemButton,"link"),g(s.PaginationItemButton,"disabled",B));switch(f){case"page":return t.createElement(r,{as:"li"},E===v?t.createElement(i,Object.assign({"aria-current":"page",as:"button",className:s.PaginationItemCurrent,testId:I},x),t.createElement(u,null,k,":"),E):t.createElement(n,Object.assign({className:a(s.PaginationItemButton,p(s.PaginationItemButton,"link")),size:"small",variation:"link",onClick:()=>{null==C||C()},ariaLabel:L},x),E));case"next":return t.createElement(r,{as:"li"},t.createElement(n,Object.assign({className:N,size:"small",variation:"link",isDisabled:B,onClick:()=>{null==C||C()},ariaLabel:L},x),null!==(P=null==y?void 0:y.next)&&void 0!==P?P:t.createElement(c,null)));case"previous":return t.createElement(r,{as:"li"},t.createElement(n,Object.assign({className:h,size:"small",variation:"link",isDisabled:B,onClick:()=>{null==C||C()},ariaLabel:L},x),null!==(j=null==y?void 0:y.previous)&&void 0!==j?j:t.createElement(m,null)));case"ellipsis":return t.createElement(r,{as:"li"},t.createElement(i,Object.assign({as:"span",className:s.PaginationItemEllipsis,testId:b},x),"…"))}return t.createElement(r,{as:"li"})};d.displayName="PaginationItem";export{I as PAGINATION_CURRENT_TEST_ID,b as PAGINATION_ELLIPSIS_TEST_ID,d as PaginationItem};
+import * as React from 'react';
+import { classNames, ComponentClassName, classNameModifier, classNameModifierByFlag } from '@aws-amplify/ui';
+import { Button } from '../Button/Button.mjs';
+import { Flex } from '../Flex/Flex.mjs';
+import '../Icon/Icon.mjs';
+import '../Icon/context/IconsContext.mjs';
+import { useIcons } from '../Icon/context/useIcons.mjs';
+import { View } from '../View/View.mjs';
+import { IconChevronLeft } from '../Icon/icons/IconChevronLeft.mjs';
+import { IconChevronRight } from '../Icon/icons/IconChevronRight.mjs';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.mjs';
+import { ComponentText } from '../shared/constants.mjs';
+
+const PAGINATION_CURRENT_TEST_ID = 'current';
+const PAGINATION_ELLIPSIS_TEST_ID = 'ellipsis';
+const PaginationItem = ({ type, page, currentPage, currentPageLabel = ComponentText.PaginationItem.currentPageLabel, isDisabled, onClick, ariaLabel, ...rest }) => {
+    const icons = useIcons('pagination');
+    const nextClasses = classNames(ComponentClassName.PaginationItem, classNameModifier(ComponentClassName.PaginationItem, 'link'), classNameModifierByFlag(ComponentClassName.PaginationItem, 'disabled', isDisabled));
+    const previousClasses = classNames(ComponentClassName.PaginationItem, classNameModifier(ComponentClassName.PaginationItem, 'link'), classNameModifierByFlag(ComponentClassName.PaginationItem, 'disabled', isDisabled));
+    switch (type) {
+        case 'page':
+            return (React.createElement(View, { as: "li" }, page === currentPage ? (React.createElement(Button, { "aria-current": "page", size: "small", variation: "link", className: classNames(ComponentClassName.PaginationItem, classNameModifier(ComponentClassName.PaginationItem, 'current')), testId: PAGINATION_CURRENT_TEST_ID, ...rest },
+                React.createElement(VisuallyHidden, null,
+                    currentPageLabel,
+                    ":"),
+                page)) : (React.createElement(Button, { className: ComponentClassName.PaginationItem, size: "small", variation: "link", onClick: () => {
+                    onClick?.();
+                }, ariaLabel: ariaLabel, ...rest }, page))));
+        case 'next':
+            return (React.createElement(View, { as: "li" },
+                React.createElement(Button, { className: nextClasses, size: "small", variation: "link", isDisabled: isDisabled, onClick: () => {
+                        onClick?.();
+                    }, ariaLabel: ariaLabel, ...rest }, icons?.next ?? React.createElement(IconChevronRight, null))));
+        case 'previous':
+            return (React.createElement(View, { as: "li" },
+                React.createElement(Button, { className: previousClasses, size: "small", variation: "link", isDisabled: isDisabled, onClick: () => {
+                        onClick?.();
+                    }, ariaLabel: ariaLabel, ...rest }, icons?.previous ?? React.createElement(IconChevronLeft, null))));
+        case 'ellipsis':
+            return (React.createElement(View, { as: "li" },
+                React.createElement(Flex, { as: "span", className: classNameModifier(ComponentClassName.PaginationItem, 'ellipsis'), testId: PAGINATION_ELLIPSIS_TEST_ID, ...rest }, "\u2026")));
+        // No match type found
+    }
+    return React.createElement(View, { as: "li" });
+};
+PaginationItem.displayName = 'PaginationItem';
+
+export { PAGINATION_CURRENT_TEST_ID, PAGINATION_ELLIPSIS_TEST_ID, PaginationItem };

package/dist/esm/primitives/Pagination/usePagination.mjs

@@ -1 +1,41 @@
-import*as a from"react";const e=e=>{const{currentPage:t=1,totalPages:s,hasMorePages:o=!1,siblingCount:n=1}=e,r=Math.max(t,1),u=Math.max(r,s),[c,l]=a.useState(r);a.useEffect((()=>{l(r)}),[r,u]);const g=a.useCallback((()=>{c<u&&l(c+1)}),[c,u]),P=a.useCallback((()=>{c>1&&l(c-1)}),[c]),b=a.useCallback((a=>{"number"==typeof a&&l(a)}),[]);return{currentPage:c,hasMorePages:o,onChange:b,onNext:g,onPrevious:P,siblingCount:Math.max(n,1),totalPages:u}};export{e as usePagination};
+import * as React from 'react';
+
+const usePagination = (props) => {
+    const { currentPage: initialPage = 1, totalPages, hasMorePages = false, siblingCount = 1, } = props;
+    // The current page should not be less than 1
+    const sanitizedInitialPage = Math.max(initialPage, 1);
+    // The total pages should be always greater than current page
+    const sanitizedTotalPages = Math.max(sanitizedInitialPage, totalPages);
+    const [currentPage, setCurrentPage] = React.useState(sanitizedInitialPage);
+    // Reset current page if initialPage or totalPages changes
+    React.useEffect(() => {
+        setCurrentPage(sanitizedInitialPage);
+    }, [sanitizedInitialPage, sanitizedTotalPages]);
+    const onNext = React.useCallback(() => {
+        if (currentPage < sanitizedTotalPages) {
+            setCurrentPage(currentPage + 1);
+        }
+    }, [currentPage, sanitizedTotalPages]);
+    const onPrevious = React.useCallback(() => {
+        if (currentPage > 1) {
+            setCurrentPage(currentPage - 1);
+        }
+    }, [currentPage]);
+    const onChange = React.useCallback((newPageIndex) => {
+        if (typeof newPageIndex === 'number') {
+            setCurrentPage(newPageIndex);
+        }
+    }, []);
+    return {
+        currentPage,
+        hasMorePages,
+        onChange,
+        onNext,
+        onPrevious,
+        // The sibling count should not be less than 1
+        siblingCount: Math.max(siblingCount, 1),
+        totalPages: sanitizedTotalPages,
+    };
+};
+
+export { usePagination };

package/dist/esm/primitives/Pagination/usePaginationItems.mjs

@@ -1 +1,39 @@
-import*as e from"react";import{useRange as a,ELLIPSIS as t}from"./useRange.mjs";import{PaginationItem as n}from"./PaginationItem.mjs";import{ComponentText as r}from"../shared/constants.mjs";const i=({currentPage:i,totalPages:o,hasMorePages:l,siblingCount:s,currentPageLabel:m=r.PaginationItem.currentPageLabel,pageLabel:g=r.PaginationItem.pageLabel,previousLabel:p=r.PaginationItem.previousLabel,nextLabel:c=r.PaginationItem.nextLabel,onNext:u,onPrevious:b,onChange:P})=>{const L=e.createElement(n,{type:"previous",key:"previous",currentPage:i,onClick:b,isDisabled:i<=1,ariaLabel:p}),y=e.createElement(n,{type:"next",key:"next",currentPage:i,onClick:u,isDisabled:i>=o&&!l,ariaLabel:c}),k=a(i,o,s);return[L,...e.useMemo((()=>k.map(((a,r)=>a===t?e.createElement(n,{type:"ellipsis",key:1===r?"start-ellipsis":"end-ellipsis"}):e.createElement(n,{key:a,type:"page",page:a,currentPage:i,currentPageLabel:m,onClick:()=>null==P?void 0:P(a,i),ariaLabel:`${g} ${a}`})))),[k,i,m,g,P]),y]};export{i as usePaginationItems};
+import * as React from 'react';
+import { useRange, ELLIPSIS } from './useRange.mjs';
+import { PaginationItem } from './PaginationItem.mjs';
+import { ComponentText } from '../shared/constants.mjs';
+
+/**
+ * This hook will be used to get the pagination items to be rendered in the pagination primitive
+ * @param currentPage current page number
+ * @param totalPages total number of pages
+ * @param siblingCount the number of siblings on each side of
+ * @param onNext callback function triggered when the next-page button is pressed
+ * @param onPrevious callback function triggered when the prev-page button is pressed
+ * @param onChange callback function triggered every time the page changes
+ * @returns an array of pagination items
+ */
+const usePaginationItems = ({ currentPage, totalPages, hasMorePages, siblingCount, currentPageLabel = ComponentText.PaginationItem.currentPageLabel, pageLabel = ComponentText.PaginationItem.pageLabel, previousLabel = ComponentText.PaginationItem.previousLabel, nextLabel = ComponentText.PaginationItem.nextLabel, onNext, onPrevious, onChange, }) => {
+    const previousItem = (React.createElement(PaginationItem, { type: "previous", key: "previous", currentPage: currentPage, onClick: onPrevious, isDisabled: currentPage <= 1, ariaLabel: previousLabel }));
+    const nextItem = (React.createElement(PaginationItem, { type: "next", key: "next", currentPage: currentPage, onClick: onNext, isDisabled: currentPage >= totalPages && !hasMorePages, ariaLabel: nextLabel }));
+    // To get the range of page numbers to be rendered in the pagination primitive
+    const range = useRange(currentPage, totalPages, siblingCount);
+    const pageItems = React.useMemo(() => range.map((item, idx) => {
+        if (item === ELLIPSIS) {
+            return (React.createElement(PaginationItem, { type: "ellipsis", key: idx === 1 ? 'start-ellipsis' : 'end-ellipsis' }));
+        }
+        return (
+        // Note: Do NOT use index for `key` and instead use page number
+        // otherwise, react cannot update the component correctly with its diff mechanism
+        React.createElement(PaginationItem, { key: item, type: "page", page: item, currentPage: currentPage, currentPageLabel: currentPageLabel, onClick: () => onChange?.(item, currentPage), 
+            /**
+             * @todo We should consider how we would support interpolation in our string translations.
+             * This works for "Go to page 31" or "translatedText {s}" as the supplied string
+             * But for Arabic or Japanese or some other languages the supplied string might look like: "{s} translatedText".
+             */
+            ariaLabel: `${pageLabel} ${item}` }));
+    }), [range, currentPage, currentPageLabel, pageLabel, onChange]);
+    return [previousItem, ...pageItems, nextItem];
+};
+
+export { usePaginationItems };