@cimpress-ui/react 0.1.0 → 0.3.0

package/dist/esm/components/modal/modal.d.ts

@@ -0,0 +1,64 @@
+import { type ReactNode } from 'react';
+import type { AriaLabelingProps, CommonProps } from '../types.js';
+export interface UNSTABLE_ModalRootProps {
+    children: ReactNode;
+    /** Whether the modal is open (controlled). */
+    isOpen?: boolean;
+    /** Whether the modal is open by default (uncontrolled). */
+    defaultOpen?: boolean;
+    /** Handler that is called when the modal's open state changes. */
+    onOpenChange?: (isOpen: boolean) => void;
+}
+/**
+ * Encapsulates a modal trigger and its associated modal.
+ * The trigger can be any Cimpress UI button, and the modal will be displayed when the trigger is activated.
+ */
+export declare function UNSTABLE_ModalRoot(props: UNSTABLE_ModalRootProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace UNSTABLE_ModalRoot {
+    var displayName: string;
+}
+export interface UNSTABLE_ModalRenderProps {
+    /** Closes the modal when called. */
+    close: () => void;
+}
+export interface UNSTABLE_ModalProps extends CommonProps, AriaLabelingProps {
+    /** The contents of the modal. A function may be provided to access a function to close the modal. */
+    children: ReactNode | ((renderProps: UNSTABLE_ModalRenderProps) => ReactNode);
+    /** The title of the modal. */
+    title?: string;
+    /**
+     * The size of the modal.
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Whether to close the modal when the user interacts outside of it or presses the Escape key.
+     * @default true
+     */
+    isDismissable?: boolean;
+    /**
+     * Whether the modal is open (controlled).
+     * If using `ModalRoot`, this prop has no effect - provide `isOpen` to `ModalRoot` instead.
+     */
+    isOpen?: boolean;
+    /**
+     * Whether the modal is open by default (uncontrolled).
+     * If using `ModalRoot`, this prop has no effect - provide `defaultOpen` to `ModalRoot` instead.
+     */
+    defaultOpen?: boolean;
+    /**
+     * Handler that is called when the modal's open state changes.
+     * If using `ModalRoot`, this prop has no effect - provide `onOpenChange` to `ModalRoot` instead.
+     */
+    onOpenChange?: (isOpen: boolean) => void;
+}
+/**
+ * Displays an overlay element which blocks interaction with outside elements.
+ *
+ * See [modal usage guidelines](https://ui.cimpress.io/components/modal/).
+ */
+export declare function UNSTABLE_Modal({ children, title, size, UNSAFE_className, UNSAFE_style, isDismissable, isOpen, defaultOpen, onOpenChange, ...props }: UNSTABLE_ModalProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace UNSTABLE_Modal {
+    var displayName: string;
+}
+//# sourceMappingURL=modal.d.ts.map

package/dist/esm/components/modal/modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../../src/components/modal/modal.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAa,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAWlD,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAGlE,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB,8CAA8C;IAC9C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,2DAA2D;IAC3D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kEAAkE;IAClE,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,2CAEhE;yBAFe,kBAAkB;;;AAMlC,MAAM,WAAW,yBAAyB;IACxC,oCAAoC;IACpC,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,MAAM,WAAW,mBAAoB,SAAQ,WAAW,EAAE,iBAAiB;IACzE,qGAAqG;IACrG,QAAQ,EAAE,SAAS,GAAG,CAAC,CAAC,WAAW,EAAE,yBAAyB,KAAK,SAAS,CAAC,CAAC;IAC9E,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,KAAK,EACL,IAAe,EACf,gBAAgB,EAChB,YAAY,EACZ,aAAoB,EACpB,MAAM,EACN,WAAW,EACX,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,mBAAmB,2CAgDrB;yBA3De,cAAc"}

package/dist/esm/components/modal/modal.js

@@ -0,0 +1,33 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { useEffect } from 'react';
+import { Heading as RACHeading, Dialog as RACDialog, DialogTrigger as RACDialogTrigger, Modal as RACModal, ModalOverlay as RACModalOverlay, } from 'react-aria-components';
+import { IconCloseBold } from '../../icons/index.js';
+import { IconButton } from '../button/icon-button.js';
+import { FocusableContainer } from '../internal/focusable-container/focusable-container.js';
+import { textStyle } from '../typography/utils.js';
+/**
+ * Encapsulates a modal trigger and its associated modal.
+ * The trigger can be any Cimpress UI button, and the modal will be displayed when the trigger is activated.
+ */
+export function UNSTABLE_ModalRoot(props) {
+    return _jsx(RACDialogTrigger, { ...props });
+}
+UNSTABLE_ModalRoot.displayName = 'ModalRoot';
+/**
+ * Displays an overlay element which blocks interaction with outside elements.
+ *
+ * See [modal usage guidelines](https://ui.cimpress.io/components/modal/).
+ */
+export function UNSTABLE_Modal({ children, title, size = 'medium', UNSAFE_className, UNSAFE_style, isDismissable = true, isOpen, defaultOpen, onOpenChange, ...props }) {
+    const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
+    useEffect(() => {
+        if (!title && !ariaLabel && !ariaLabelledBy) {
+            console.warn('Modal requires one of title / aria-label / aria-labelledby for accessibility');
+        }
+    }, [title, ariaLabel, ariaLabelledBy]);
+    return (_jsx(RACModalOverlay, { className: "cim-modal-overlay", isDismissable: isDismissable, isKeyboardDismissDisabled: !isDismissable, isOpen: isOpen, defaultOpen: defaultOpen, onOpenChange: onOpenChange, "data-cim-style-root": true, children: _jsx(RACModal, { className: clsx('cim-modal', UNSAFE_className), style: UNSAFE_style, "data-size": size, children: _jsx(RACDialog, { ...props, className: "cim-modal-dialog", children: (renderProps) => (_jsxs(_Fragment, { children: [_jsxs("div", { className: "cim-modal-header", children: [title && (_jsx(RACHeading, { slot: "title", className: clsx('cim-modal-title', textStyle({ variant: 'title-3' })), children: title })), _jsx(IconButton, { slot: "close", UNSAFE_className: "cim-modal-close-button", icon: _jsx(IconCloseBold, {}), variant: "tertiary", size: "small", "aria-label": "Close modal" })] }), _jsx(FocusableContainer, { className: "cim-modal-content", scrollDirection: "vertical", children: typeof children === 'function' ? children(renderProps) : children })] })) }) }) }));
+}
+UNSTABLE_Modal.displayName = 'Modal';
+//# sourceMappingURL=modal.js.map

package/dist/esm/components/modal/modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../../src/components/modal/modal.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,SAAS,EAAkB,MAAM,OAAO,CAAC;AAClD,OAAO,EACL,OAAO,IAAI,UAAU,EACrB,MAAM,IAAI,SAAS,EACnB,aAAa,IAAI,gBAAgB,EACjC,KAAK,IAAI,QAAQ,EACjB,YAAY,IAAI,eAAe,GAChC,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,wDAAwD,CAAC;AAE5F,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAYnD;;;GAGG;AACH,MAAM,UAAU,kBAAkB,CAAC,KAA8B;IAC/D,OAAO,KAAC,gBAAgB,OAAK,KAAK,GAAI,CAAC;AACzC,CAAC;AAED,kBAAkB,CAAC,WAAW,GAAG,WAAW,CAAC;AAuC7C;;;;GAIG;AACH,MAAM,UAAU,cAAc,CAAC,EAC7B,QAAQ,EACR,KAAK,EACL,IAAI,GAAG,QAAQ,EACf,gBAAgB,EAChB,YAAY,EACZ,aAAa,GAAG,IAAI,EACpB,MAAM,EACN,WAAW,EACX,YAAY,EACZ,GAAG,KAAK,EACY;IACpB,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,KAAK,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAC5C,OAAO,CAAC,IAAI,CAAC,8EAA8E,CAAC,CAAC;QAC/F,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAEvC,OAAO,CACL,KAAC,eAAe,IACd,SAAS,EAAC,mBAAmB,EAC7B,aAAa,EAAE,aAAa,EAC5B,yBAAyB,EAAE,CAAC,aAAa,EACzC,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,yCAG1B,KAAC,QAAQ,IAAC,SAAS,EAAE,IAAI,CAAC,WAAW,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,eAAa,IAAI,YAC5F,KAAC,SAAS,OAAK,KAAK,EAAE,SAAS,EAAC,kBAAkB,YAC/C,CAAC,WAAW,EAAE,EAAE,CAAC,CAChB,8BACE,eAAK,SAAS,EAAC,kBAAkB,aAC9B,KAAK,IAAI,CACR,KAAC,UAAU,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAE,IAAI,CAAC,iBAAiB,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,YAC3F,KAAK,GACK,CACd,EACD,KAAC,UAAU,IACT,IAAI,EAAC,OAAO,EACZ,gBAAgB,EAAC,wBAAwB,EACzC,IAAI,EAAE,KAAC,aAAa,KAAG,EACvB,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,OAAO,gBAED,aAAa,GACxB,IACE,EACN,KAAC,kBAAkB,IAAC,SAAS,EAAC,mBAAmB,EAAC,eAAe,EAAC,UAAU,YACzE,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,QAAQ,GAC/C,IACpB,CACJ,GACS,GACH,GACK,CACnB,CAAC;AACJ,CAAC;AAED,cAAc,CAAC,WAAW,GAAG,OAAO,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { useEffect, type ReactNode } from 'react';\nimport {\n  Heading as RACHeading,\n  Dialog as RACDialog,\n  DialogTrigger as RACDialogTrigger,\n  Modal as RACModal,\n  ModalOverlay as RACModalOverlay,\n} from 'react-aria-components';\nimport { IconCloseBold } from '../../icons/index.js';\nimport { IconButton } from '../button/icon-button.js';\nimport { FocusableContainer } from '../internal/focusable-container/focusable-container.js';\nimport type { AriaLabelingProps, CommonProps } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface UNSTABLE_ModalRootProps {\n  children: ReactNode;\n  /** Whether the modal is open (controlled). */\n  isOpen?: boolean;\n  /** Whether the modal is open by default (uncontrolled). */\n  defaultOpen?: boolean;\n  /** Handler that is called when the modal's open state changes. */\n  onOpenChange?: (isOpen: boolean) => void;\n}\n\n/**\n * Encapsulates a modal trigger and its associated modal.\n * The trigger can be any Cimpress UI button, and the modal will be displayed when the trigger is activated.\n */\nexport function UNSTABLE_ModalRoot(props: UNSTABLE_ModalRootProps) {\n  return <RACDialogTrigger {...props} />;\n}\n\nUNSTABLE_ModalRoot.displayName = 'ModalRoot';\n\nexport interface UNSTABLE_ModalRenderProps {\n  /** Closes the modal when called. */\n  close: () => void;\n}\n\nexport interface UNSTABLE_ModalProps extends CommonProps, AriaLabelingProps {\n  /** The contents of the modal. A function may be provided to access a function to close the modal. */\n  children: ReactNode | ((renderProps: UNSTABLE_ModalRenderProps) => ReactNode);\n  /** The title of the modal. */\n  title?: string;\n  /**\n   * The size of the modal.\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n  /**\n   * Whether to close the modal when the user interacts outside of it or presses the Escape key.\n   * @default true\n   */\n  isDismissable?: boolean;\n  /**\n   * Whether the modal is open (controlled).\n   * If using `ModalRoot`, this prop has no effect - provide `isOpen` to `ModalRoot` instead.\n   */\n  isOpen?: boolean;\n  /**\n   * Whether the modal is open by default (uncontrolled).\n   * If using `ModalRoot`, this prop has no effect - provide `defaultOpen` to `ModalRoot` instead.\n   */\n  defaultOpen?: boolean;\n  /**\n   * Handler that is called when the modal's open state changes.\n   * If using `ModalRoot`, this prop has no effect - provide `onOpenChange` to `ModalRoot` instead.\n   */\n  onOpenChange?: (isOpen: boolean) => void;\n}\n\n/**\n * Displays an overlay element which blocks interaction with outside elements.\n *\n * See [modal usage guidelines](https://ui.cimpress.io/components/modal/).\n */\nexport function UNSTABLE_Modal({\n  children,\n  title,\n  size = 'medium',\n  UNSAFE_className,\n  UNSAFE_style,\n  isDismissable = true,\n  isOpen,\n  defaultOpen,\n  onOpenChange,\n  ...props\n}: UNSTABLE_ModalProps) {\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useEffect(() => {\n    if (!title && !ariaLabel && !ariaLabelledBy) {\n      console.warn('Modal requires one of title / aria-label / aria-labelledby for accessibility');\n    }\n  }, [title, ariaLabel, ariaLabelledBy]);\n\n  return (\n    <RACModalOverlay\n      className=\"cim-modal-overlay\"\n      isDismissable={isDismissable}\n      isKeyboardDismissDisabled={!isDismissable}\n      isOpen={isOpen}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}\n      data-cim-style-root\n    >\n      <RACModal className={clsx('cim-modal', UNSAFE_className)} style={UNSAFE_style} data-size={size}>\n        <RACDialog {...props} className=\"cim-modal-dialog\">\n          {(renderProps) => (\n            <>\n              <div className=\"cim-modal-header\">\n                {title && (\n                  <RACHeading slot=\"title\" className={clsx('cim-modal-title', textStyle({ variant: 'title-3' }))}>\n                    {title}\n                  </RACHeading>\n                )}\n                <IconButton\n                  slot=\"close\"\n                  UNSAFE_className=\"cim-modal-close-button\"\n                  icon={<IconCloseBold />}\n                  variant=\"tertiary\"\n                  size=\"small\"\n                  // TODO: i18n\n                  aria-label=\"Close modal\"\n                />\n              </div>\n              <FocusableContainer className=\"cim-modal-content\" scrollDirection=\"vertical\">\n                {typeof children === 'function' ? children(renderProps) : children}\n              </FocusableContainer>\n            </>\n          )}\n        </RACDialog>\n      </RACModal>\n    </RACModalOverlay>\n  );\n}\n\nUNSTABLE_Modal.displayName = 'Modal';\n"]}

package/dist/esm/components/nav-tabs/nav-tabs.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+import { type LinkProps as RACLinkProps } from 'react-aria-components';
+import type { AriaLabelingProps, CommonProps, NavigationProps, StringLikeChildren, WithRequired } from '../types.js';
+export interface UNSTABLE_NavTabsProps extends CommonProps, AriaLabelingProps {
+    children: ReactNode;
+    /**
+     * Whether to display the navigation tabs horizontally or vertically.
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
+}
+export interface UNSTABLE_NavTabItemProps extends Omit<CommonProps, 'id'>, WithRequired<NavigationProps, 'href'>, Pick<RACLinkProps, 'children' | 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {
+    children: StringLikeChildren;
+    isCurrent?: boolean;
+}
+/** Renders a single navigation tab within `NavTabs`. */
+export declare function UNSTABLE_NavTabItem({ children, isCurrent, UNSAFE_className, UNSAFE_style, ...props }: UNSTABLE_NavTabItemProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Displays a list of navigation tabs to help users navigate through a website.
+ */
+declare const _UNSTABLE_NavTabs: (props: UNSTABLE_NavTabsProps & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
+export { _UNSTABLE_NavTabs as UNSTABLE_NavTabs };
+//# sourceMappingURL=nav-tabs.d.ts.map

package/dist/esm/components/nav-tabs/nav-tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/nav-tabs/nav-tabs.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAgB,MAAM,OAAO,CAAC;AACrD,OAAO,EAAmB,KAAK,SAAS,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAGxF,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,eAAe,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAIrH,MAAM,WAAW,qBAAsB,SAAQ,WAAW,EAAE,iBAAiB;IAC3E,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACzC;AAmBD,MAAM,WAAW,wBACf,SAAQ,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,EAC7B,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,EACrC,IAAI,CAAC,YAAY,EAAE,UAAU,GAAG,YAAY,GAAG,cAAc,GAAG,YAAY,CAAC;IAC/E,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,wDAAwD;AACxD,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,SAAiB,EACjB,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,wBAAwB,2CAW1B;AAED;;GAEG;AACH,QAAA,MAAM,iBAAiB,uKAA0D,CAAC;AAElF,OAAO,EAAE,iBAAiB,IAAI,gBAAgB,EAAE,CAAC"}

package/dist/esm/components/nav-tabs/nav-tabs.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { Link as RACLink } from 'react-aria-components';
+import { forwardRef } from '../../forward-ref.js';
+import { withStyleProps } from '../../with-style-props.js';
+import { textStyle } from '../typography/utils.js';
+function UNSTABLE_NavTabs({ children, orientation = 'horizontal', UNSAFE_className, UNSAFE_style, ...props }, ref) {
+    return (_jsx("div", { ...props, ref: ref, className: clsx('cim-nav-tabs', UNSAFE_className), style: UNSAFE_style, "data-orientation": orientation, children: children }));
+}
+/** Renders a single navigation tab within `NavTabs`. */
+export function UNSTABLE_NavTabItem({ children, isCurrent = false, UNSAFE_className, UNSAFE_style, ...props }) {
+    return (_jsx(RACLink, { ...props, className: clsx('cim-nav-tab-item', textStyle({ variant: 'body' }), UNSAFE_className), style: UNSAFE_style, "aria-current": isCurrent ? 'page' : undefined, children: children }));
+}
+/**
+ * Displays a list of navigation tabs to help users navigate through a website.
+ */
+const _UNSTABLE_NavTabs = withStyleProps(forwardRef(UNSTABLE_NavTabs), 'NavTabs');
+export { _UNSTABLE_NavTabs as UNSTABLE_NavTabs };
+//# sourceMappingURL=nav-tabs.js.map

package/dist/esm/components/nav-tabs/nav-tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-tabs.js","sourceRoot":"","sources":["../../../../src/components/nav-tabs/nav-tabs.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,IAAI,IAAI,OAAO,EAAkC,MAAM,uBAAuB,CAAC;AACxF,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAE3D,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAYnD,SAAS,gBAAgB,CACvB,EAAE,QAAQ,EAAE,WAAW,GAAG,YAAY,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAyB,EACzG,GAAiC;IAEjC,OAAO,CACL,iBACM,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,cAAc,EAAE,gBAAgB,CAAC,EACjD,KAAK,EAAE,YAAY,sBACD,WAAW,YAE5B,QAAQ,GACL,CACP,CAAC;AACJ,CAAC;AAUD,wDAAwD;AACxD,MAAM,UAAU,mBAAmB,CAAC,EAClC,QAAQ,EACR,SAAS,GAAG,KAAK,EACjB,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACiB;IACzB,OAAO,CACL,KAAC,OAAO,OACF,KAAK,EACT,SAAS,EAAE,IAAI,CAAC,kBAAkB,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,EAAE,gBAAgB,CAAC,EACrF,KAAK,EAAE,YAAY,kBACL,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,YAE3C,QAAQ,GACD,CACX,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,iBAAiB,GAAG,cAAc,CAAC,UAAU,CAAC,gBAAgB,CAAC,EAAE,SAAS,CAAC,CAAC;AAElF,OAAO,EAAE,iBAAiB,IAAI,gBAAgB,EAAE,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ReactNode, ForwardedRef } from 'react';\nimport { Link as RACLink, type LinkProps as RACLinkProps } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { AriaLabelingProps, CommonProps, NavigationProps, StringLikeChildren, WithRequired } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\n// TODO: maybe add a `currentHref` prop that would be used to decide which NavTabItem is marked as current\nexport interface UNSTABLE_NavTabsProps extends CommonProps, AriaLabelingProps {\n  children: ReactNode;\n  /**\n   * Whether to display the navigation tabs horizontally or vertically.\n   * @default 'horizontal'\n   */\n  orientation?: 'horizontal' | 'vertical';\n}\n\nfunction UNSTABLE_NavTabs(\n  { children, orientation = 'horizontal', UNSAFE_className, UNSAFE_style, ...props }: UNSTABLE_NavTabsProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    <div\n      {...props}\n      ref={ref}\n      className={clsx('cim-nav-tabs', UNSAFE_className)}\n      style={UNSAFE_style}\n      data-orientation={orientation}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport interface UNSTABLE_NavTabItemProps\n  extends Omit<CommonProps, 'id'>,\n    WithRequired<NavigationProps, 'href'>,\n    Pick<RACLinkProps, 'children' | 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {\n  children: StringLikeChildren;\n  isCurrent?: boolean;\n}\n\n/** Renders a single navigation tab within `NavTabs`. */\nexport function UNSTABLE_NavTabItem({\n  children,\n  isCurrent = false,\n  UNSAFE_className,\n  UNSAFE_style,\n  ...props\n}: UNSTABLE_NavTabItemProps) {\n  return (\n    <RACLink\n      {...props}\n      className={clsx('cim-nav-tab-item', textStyle({ variant: 'body' }), UNSAFE_className)}\n      style={UNSAFE_style}\n      aria-current={isCurrent ? 'page' : undefined}\n    >\n      {children}\n    </RACLink>\n  );\n}\n\n/**\n * Displays a list of navigation tabs to help users navigate through a website.\n */\nconst _UNSTABLE_NavTabs = withStyleProps(forwardRef(UNSTABLE_NavTabs), 'NavTabs');\n\nexport { _UNSTABLE_NavTabs as UNSTABLE_NavTabs };\n"]}

package/dist/esm/components/number-field/number-field.d.ts

@@ -0,0 +1,18 @@
+import { type NumberFieldProps as RACNumberFieldProps } from 'react-aria-components';
+import type { CommonProps, FieldWithPlaceholderProps } from '../types.js';
+export interface NumberFieldProps extends CommonProps, FieldWithPlaceholderProps<number>, Pick<RACNumberFieldProps, 'isDisabled' | 'isRequired' | 'isInvalid' | 'isReadOnly' | 'name' | 'autoFocus' | 'minValue' | 'maxValue' | 'step' | 'formatOptions' | 'onFocus' | 'onBlur'> {
+    /** The current value (controlled). A `null` value means an empty field. */
+    value?: number | null;
+    /** The default value (uncontrolled). A `null` value means an empty field. */
+    defaultValue?: number | null;
+    /** Handler that is called when the value changes. A `null` value means an empty field. */
+    onChange?: (value: number | null) => void;
+}
+/**
+ * Allows users to edit a number with a keyboard or increment/decrement buttons.
+ *
+ * See [number field usage guidelines](https://ui.cimpress.io/components/number-field/).
+ */
+declare const _NumberField: (props: NumberFieldProps & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
+export { _NumberField as NumberField };
+//# sourceMappingURL=number-field.d.ts.map

package/dist/esm/components/number-field/number-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-field.d.ts","sourceRoot":"","sources":["../../../../src/components/number-field/number-field.tsx"],"names":[],"mappings":"AAIA,OAAO,EAGL,KAAK,gBAAgB,IAAI,mBAAmB,EAE7C,MAAM,uBAAuB,CAAC;AAM/B,OAAO,KAAK,EAAE,WAAW,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAG1E,MAAM,WAAW,gBACf,SAAQ,WAAW,EACjB,yBAAyB,CAAC,MAAM,CAAC,EACjC,IAAI,CACF,mBAAmB,EACjB,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,YAAY,GACZ,MAAM,GACN,WAAW,GACX,UAAU,GACV,UAAU,GACV,MAAM,GACN,eAAe,GACf,SAAS,GACT,QAAQ,CACX;IACH,2EAA2E;IAC3E,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,6EAA6E;IAC7E,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,0FAA0F;IAC1F,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAC3C;AA4DD;;;;GAIG;AACH,QAAA,MAAM,YAAY,kKAAyD,CAAC;AAE5E,OAAO,EAAE,YAAY,IAAI,WAAW,EAAE,CAAC"}

package/dist/esm/components/number-field/number-field.js

@@ -0,0 +1,32 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { useEffect } from 'react';
+import { Input as RACInput, NumberField as RACNumberField, Group as RACGroup, } from 'react-aria-components';
+import { forwardRef } from '../../forward-ref.js';
+import { IconAdd, IconSubtract } from '../../icons/index.js';
+import { withStyleProps } from '../../with-style-props.js';
+import { IconButton } from '../button/icon-button.js';
+import { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';
+import { textStyle } from '../typography/utils.js';
+function NumberField({ label, description, error: errorMessage, placeholder, UNSAFE_className, UNSAFE_style, value, defaultValue, onChange, ...props }, ref) {
+    const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
+    useEffect(() => {
+        if (!label && !ariaLabel && !ariaLabelledBy) {
+            console.warn('NumberField requires one of label / aria-label / aria-labelledby for accessibility');
+        }
+    }, [label, ariaLabel, ariaLabelledBy]);
+    return (_jsxs(RACNumberField, { ...props, ref: ref, className: clsx('cim-number-field', UNSAFE_className), style: UNSAFE_style, 
+        // NumberField uses `NaN` to signify an empty value, which is unintuitive
+        // https://github.com/adobe/react-spectrum/issues/5524
+        // https://github.com/adobe/react-spectrum/issues/6971
+        value: value === null ? Number.NaN : value, defaultValue: defaultValue === null ? Number.NaN : defaultValue, onChange: onChange ? (value) => onChange(Number.isNaN(value) ? null : value) : undefined, children: [_jsx(FormFieldLabel, { isRequired: props.isRequired, isDisabled: props.isDisabled, children: label }), _jsxs(RACGroup, { className: "cim-number-field-input-group", children: [_jsx(RACInput, { className: clsx('cim-number-field-input', textStyle({ variant: 'medium' })), placeholder: placeholder }), _jsxs("div", { className: "cim-number-field-spinner", children: [_jsx(IconButton, { slot: "decrement", icon: _jsx(IconSubtract, {}), "aria-label": "Decrement", variant: "tertiary", size: "small" }), _jsx("div", { className: "cim-number-field-spinner-separator" }), _jsx(IconButton, { slot: "increment", icon: _jsx(IconAdd, {}), "aria-label": "Increment", variant: "tertiary", size: "small" })] })] }), _jsx(FormFieldError, { children: errorMessage }), _jsx(FormFieldDescription, { children: description })] }));
+}
+/**
+ * Allows users to edit a number with a keyboard or increment/decrement buttons.
+ *
+ * See [number field usage guidelines](https://ui.cimpress.io/components/number-field/).
+ */
+const _NumberField = withStyleProps(forwardRef(NumberField), 'NumberField');
+export { _NumberField as NumberField };
+//# sourceMappingURL=number-field.js.map

package/dist/esm/components/number-field/number-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-field.js","sourceRoot":"","sources":["../../../../src/components/number-field/number-field.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { useEffect, type ForwardedRef } from 'react';\nimport {\n  Input as RACInput,\n  NumberField as RACNumberField,\n  type NumberFieldProps as RACNumberFieldProps,\n  Group as RACGroup,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconAdd, IconSubtract } from '../../icons/index.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { IconButton } from '../button/icon-button.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport type { CommonProps, FieldWithPlaceholderProps } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface NumberFieldProps\n  extends CommonProps,\n    FieldWithPlaceholderProps<number>,\n    Pick<\n      RACNumberFieldProps,\n      | 'isDisabled'\n      | 'isRequired'\n      | 'isInvalid'\n      | 'isReadOnly'\n      | 'name'\n      | 'autoFocus'\n      | 'minValue'\n      | 'maxValue'\n      | 'step'\n      | 'formatOptions'\n      | 'onFocus'\n      | 'onBlur'\n    > {\n  /** The current value (controlled). A `null` value means an empty field. */\n  value?: number | null;\n  /** The default value (uncontrolled). A `null` value means an empty field. */\n  defaultValue?: number | null;\n  /** Handler that is called when the value changes. A `null` value means an empty field. */\n  onChange?: (value: number | null) => void;\n}\n\nfunction NumberField(\n  {\n    label,\n    description,\n    error: errorMessage,\n    placeholder,\n    UNSAFE_className,\n    UNSAFE_style,\n    value,\n    defaultValue,\n    onChange,\n    ...props\n  }: NumberFieldProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useEffect(() => {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn('NumberField requires one of label / aria-label / aria-labelledby for accessibility');\n    }\n  }, [label, ariaLabel, ariaLabelledBy]);\n\n  return (\n    <RACNumberField\n      {...props}\n      ref={ref}\n      className={clsx('cim-number-field', UNSAFE_className)}\n      style={UNSAFE_style}\n      // NumberField uses `NaN` to signify an empty value, which is unintuitive\n      // https://github.com/adobe/react-spectrum/issues/5524\n      // https://github.com/adobe/react-spectrum/issues/6971\n      value={value === null ? Number.NaN : value}\n      defaultValue={defaultValue === null ? Number.NaN : defaultValue}\n      onChange={onChange ? (value) => onChange(Number.isNaN(value) ? null : value) : undefined}\n    >\n      <FormFieldLabel isRequired={props.isRequired} isDisabled={props.isDisabled}>\n        {label}\n      </FormFieldLabel>\n      <RACGroup className=\"cim-number-field-input-group\">\n        <RACInput\n          className={clsx('cim-number-field-input', textStyle({ variant: 'medium' }))}\n          placeholder={placeholder}\n        />\n        <div className=\"cim-number-field-spinner\">\n          {/* TODO: i18n */}\n          <IconButton slot=\"decrement\" icon={<IconSubtract />} aria-label=\"Decrement\" variant=\"tertiary\" size=\"small\" />\n          <div className=\"cim-number-field-spinner-separator\" />\n          {/* TODO: i18n */}\n          <IconButton slot=\"increment\" icon={<IconAdd />} aria-label=\"Increment\" variant=\"tertiary\" size=\"small\" />\n        </div>\n      </RACGroup>\n      <FormFieldError>{errorMessage}</FormFieldError>\n      <FormFieldDescription>{description}</FormFieldDescription>\n    </RACNumberField>\n  );\n}\n\n/**\n * Allows users to edit a number with a keyboard or increment/decrement buttons.\n *\n * See [number field usage guidelines](https://ui.cimpress.io/components/number-field/).\n */\nconst _NumberField = withStyleProps(forwardRef(NumberField), 'NumberField');\n\nexport { _NumberField as NumberField };\n"]}

package/dist/esm/components/pagination/action-pagination.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=action-pagination.d.ts.map

package/dist/esm/components/pagination/action-pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-pagination.d.ts","sourceRoot":"","sources":["../../../../src/components/pagination/action-pagination.tsx"],"names":[],"mappings":""}

package/dist/esm/components/pagination/action-pagination.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { focusSafely } from '@react-aria/focus';
+import { useRef } from 'react';
+import { Button } from '../button/button.js';
+import { IconButton } from '../button/icon-button.js';
+import { BasePagination } from './base-pagination.js';
+/** @internal */
+export function ActionPagination({ currentPage, pageCount, onPageChange, ...props }) {
+    const listRef = useRef(null);
+    return (_jsx(BasePagination, { ...props, listRef: listRef, currentPage: currentPage, pageCount: pageCount, renderPreviousButton: (previousButtonProps) => (_jsx(IconButton, { ...previousButtonProps, onPress: () => {
+                if (currentPage === 2) {
+                    // "Previous" button will become disabled after page change, so move focus to the first page button
+                    focusSafely(listRef.current?.querySelector(`[data-first]`));
+                }
+                onPageChange(currentPage - 1);
+            } })), renderNextButton: (nextButtonProps) => (_jsx(IconButton, { ...nextButtonProps, onPress: () => {
+                if (currentPage === pageCount - 1) {
+                    // "Next" button will become disabled after page change, so move focus to the last page button
+                    focusSafely(listRef.current?.querySelector(`[data-last]`));
+                }
+                onPageChange(currentPage + 1);
+            } })), renderPageButton: ({ pageNumber, isCurrentPage, pageButtonProps }) => (_jsx(Button, { ...pageButtonProps, "aria-current": isCurrentPage || undefined, onPress: () => onPageChange(pageNumber) })) }));
+}
+//# sourceMappingURL=action-pagination.js.map

package/dist/esm/components/pagination/action-pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-pagination.js","sourceRoot":"","sources":["../../../../src/components/pagination/action-pagination.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAqB,MAAM,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,OAAO,EAAE,cAAc,EAA4B,MAAM,sBAAsB,CAAC;AAShF,gBAAgB;AAChB,MAAM,UAAU,gBAAgB,CAAC,EAAE,WAAW,EAAE,SAAS,EAAE,YAAY,EAAE,GAAG,KAAK,EAAyB;IACxG,MAAM,OAAO,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAE/C,OAAO,CACL,KAAC,cAAc,OACT,KAAK,EACT,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,oBAAoB,EAAE,CAAC,mBAAmB,EAAE,EAAE,CAAC,CAC7C,KAAC,UAAU,OACL,mBAAmB,EACvB,OAAO,EAAE,GAAG,EAAE;gBACZ,IAAI,WAAW,KAAK,CAAC,EAAE,CAAC;oBACtB,mGAAmG;oBACnG,WAAW,CAAC,OAAO,CAAC,OAAO,EAAE,aAAa,CAAC,cAAc,CAAqB,CAAC,CAAC;gBAClF,CAAC;gBAED,YAAY,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC;YAChC,CAAC,GACD,CACH,EACD,gBAAgB,EAAE,CAAC,eAAe,EAAE,EAAE,CAAC,CACrC,KAAC,UAAU,OACL,eAAe,EACnB,OAAO,EAAE,GAAG,EAAE;gBACZ,IAAI,WAAW,KAAK,SAAS,GAAG,CAAC,EAAE,CAAC;oBAClC,8FAA8F;oBAC9F,WAAW,CAAC,OAAO,CAAC,OAAO,EAAE,aAAa,CAAC,aAAa,CAAqB,CAAC,CAAC;gBACjF,CAAC;gBAED,YAAY,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC;YAChC,CAAC,GACD,CACH,EACD,gBAAgB,EAAE,CAAC,EAAE,UAAU,EAAE,aAAa,EAAE,eAAe,EAAE,EAAE,EAAE,CAAC,CACpE,KAAC,MAAM,OACD,eAAe,kBACL,aAAa,IAAI,SAAS,EACxC,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,GACvC,CACH,GACD,CACH,CAAC;AACJ,CAAC","sourcesContent":["import { focusSafely } from '@react-aria/focus';\nimport { type ForwardedRef, useRef } from 'react';\nimport { Button } from '../button/button.js';\nimport { IconButton } from '../button/icon-button.js';\nimport type { FocusableElement } from '../types.js';\nimport { BasePagination, type BasePaginationProps } from './base-pagination.js';\n\n/** @internal */\nexport interface ActionPaginationProps extends BasePaginationProps {\n  navRef?: ForwardedRef<HTMLElement>;\n  /** A callback function that is called when the page number changes. */\n  onPageChange: (page: number) => void;\n}\n\n/** @internal */\nexport function ActionPagination({ currentPage, pageCount, onPageChange, ...props }: ActionPaginationProps) {\n  const listRef = useRef<HTMLUListElement>(null);\n\n  return (\n    <BasePagination\n      {...props}\n      listRef={listRef}\n      currentPage={currentPage}\n      pageCount={pageCount}\n      renderPreviousButton={(previousButtonProps) => (\n        <IconButton\n          {...previousButtonProps}\n          onPress={() => {\n            if (currentPage === 2) {\n              // \"Previous\" button will become disabled after page change, so move focus to the first page button\n              focusSafely(listRef.current?.querySelector(`[data-first]`) as FocusableElement);\n            }\n\n            onPageChange(currentPage - 1);\n          }}\n        />\n      )}\n      renderNextButton={(nextButtonProps) => (\n        <IconButton\n          {...nextButtonProps}\n          onPress={() => {\n            if (currentPage === pageCount - 1) {\n              // \"Next\" button will become disabled after page change, so move focus to the last page button\n              focusSafely(listRef.current?.querySelector(`[data-last]`) as FocusableElement);\n            }\n\n            onPageChange(currentPage + 1);\n          }}\n        />\n      )}\n      renderPageButton={({ pageNumber, isCurrentPage, pageButtonProps }) => (\n        <Button\n          {...pageButtonProps}\n          aria-current={isCurrentPage || undefined}\n          onPress={() => onPageChange(pageNumber)}\n        />\n      )}\n    />\n  );\n}\n"]}

package/dist/esm/components/pagination/base-pagination.d.ts

@@ -0,0 +1,10 @@
+import type { AriaLabelingProps, CommonProps } from '../types.js';
+export interface BasePaginationProps extends CommonProps, AriaLabelingProps {
+    /** The current page number. */
+    currentPage: number;
+    /** The total number of pages. */
+    pageCount: number;
+    /** The `id` of the paginated element. You must provide this prop when pagination controls a subsection of the page (for example, a data table). */
+    paginatedElementId?: string;
+}
+//# sourceMappingURL=base-pagination.d.ts.map

package/dist/esm/components/pagination/base-pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"base-pagination.d.ts","sourceRoot":"","sources":["../../../../src/components/pagination/base-pagination.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAkBlE,MAAM,WAAW,mBAAoB,SAAQ,WAAW,EAAE,iBAAiB;IACzE,+BAA+B;IAC/B,WAAW,EAAE,MAAM,CAAC;IACpB,iCAAiC;IACjC,SAAS,EAAE,MAAM,CAAC;IAClB,mJAAmJ;IACnJ,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B"}

package/dist/esm/components/pagination/base-pagination.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { useMemo } from 'react';
+import { IconChevronLeft, IconChevronRight } from '../../icons/index.js';
+/** @internal */
+export function BasePagination({ currentPage, pageCount, paginatedElementId, UNSAFE_className, UNSAFE_style, navRef, listRef, renderPreviousButton, renderNextButton, renderPageButton, ...props }) {
+    const pages = useMemo(() => {
+        const visiblePages = getVisiblePages(currentPage, pageCount);
+        const firstPageIndex = 0;
+        const lastPageIndex = visiblePages.length - 1;
+        return visiblePages.map((page, index) => {
+            const isCurrentPage = typeof page === 'number' && page === currentPage;
+            const pageNumber = typeof page === 'number' ? page : page.page;
+            const pageButtonProps = {
+                // TODO: i18n
+                'aria-label': `Page ${pageNumber}`,
+                children: typeof page === 'number' ? page : '…',
+                'data-first': index === firstPageIndex || undefined,
+                'data-last': index === lastPageIndex || undefined,
+                variant: isCurrentPage ? 'primary' : 'secondary',
+            };
+            return { pageNumber, isCurrentPage, pageButtonProps };
+        });
+    }, [currentPage, pageCount]);
+    const previousButtonProps = {
+        icon: _jsx(IconChevronLeft, {}),
+        isDisabled: currentPage === 1,
+        // TODO: internationalization
+        'aria-label': 'Previous',
+    };
+    const nextButtonProps = {
+        icon: _jsx(IconChevronRight, {}),
+        isDisabled: currentPage === pageCount,
+        // TODO: internationalization
+        'aria-label': 'Next',
+    };
+    return (_jsx("nav", { ...props, ref: navRef, className: clsx('cim-pagination', UNSAFE_className), style: UNSAFE_style, "aria-controls": paginatedElementId, children: _jsxs("ul", { ref: listRef, className: "cim-pagination-list", children: [_jsx("li", { children: renderPreviousButton(previousButtonProps) }), pages.map((pageData) => (_jsx("li", { children: renderPageButton(pageData) }, pageData.pageNumber))), _jsx("li", { children: renderNextButton(nextButtonProps) })] }) }));
+}
+function getVisiblePages(currentPage, totalPages) {
+    if (totalPages <= 7) {
+        return Array.from({ length: totalPages }, (_, index) => index + 1);
+    }
+    if (currentPage <= 4) {
+        return [1, 2, 3, 4, { type: 'ellipsis', page: 5 }, totalPages - 1, totalPages];
+    }
+    if (currentPage >= totalPages - 3) {
+        return [
+            1,
+            2,
+            { type: 'ellipsis', page: totalPages - 4 },
+            totalPages - 3,
+            totalPages - 2,
+            totalPages - 1,
+            totalPages,
+        ];
+    }
+    return [
+        1,
+        { type: 'ellipsis', page: currentPage - 2 },
+        currentPage - 1,
+        currentPage,
+        currentPage + 1,
+        { type: 'ellipsis', page: currentPage + 2 },
+        totalPages,
+    ];
+}
+//# sourceMappingURL=base-pagination.js.map

package/dist/esm/components/pagination/base-pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base-pagination.js","sourceRoot":"","sources":["../../../../src/components/pagination/base-pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["import clsx from 'clsx';\nimport { type ForwardedRef, type MutableRefObject, type ReactNode, useMemo } from 'react';\nimport { IconChevronLeft, IconChevronRight } from '../../icons/index.js';\n\nimport type { ButtonProps } from '../button/button.js';\nimport type { IconButtonProps } from '../button/icon-button.js';\nimport type { IconLinkButtonProps } from '../button/icon-link-button.js';\nimport type { LinkButtonProps } from '../button/link-button.js';\nimport type { AriaLabelingProps, CommonProps } from '../types.js';\n\ntype OmitNever<T extends Record<string, unknown>> = {\n  [K in keyof T as T[K] extends never ? never : K]: T[K];\n};\n\ntype SharedProperties<A, B> = OmitNever<Pick<A & B, keyof A & keyof B>>;\n\n/** @internal */\nexport type IconButtonProperties = SharedProperties<IconButtonProps, IconLinkButtonProps> & {\n  [dataProp: `data-${string}`]: string | number | boolean | undefined;\n};\n\n/** @internal */\nexport type TextButtonProperties = SharedProperties<ButtonProps, LinkButtonProps> & {\n  [dataProp: `data-${string}`]: string | number | boolean | undefined;\n};\n\nexport interface BasePaginationProps extends CommonProps, AriaLabelingProps {\n  /** The current page number. */\n  currentPage: number;\n  /** The total number of pages. */\n  pageCount: number;\n  /** The `id` of the paginated element. You must provide this prop when pagination controls a subsection of the page (for example, a data table). */\n  paginatedElementId?: string;\n}\n\ninterface PaginationRenderProps {\n  navRef?: ForwardedRef<HTMLElement>;\n  // `RefObject` doesn't work for this case, it errors in either React 18 or 19 depending on whether `| null` is included in the generic parameter\n  // TODO: investigate this more\n  listRef?: MutableRefObject<HTMLUListElement | null>;\n  renderPreviousButton: (previousButtonProps: IconButtonProperties) => ReactNode;\n  renderPageButton: (pageData: PageData) => ReactNode;\n  renderNextButton: (nextButtonProps: IconButtonProperties) => ReactNode;\n}\n\ninterface PageData {\n  pageNumber: number;\n  isCurrentPage: boolean;\n  pageButtonProps: TextButtonProperties;\n}\n\n/** @internal */\nexport function BasePagination({\n  currentPage,\n  pageCount,\n  paginatedElementId,\n  UNSAFE_className,\n  UNSAFE_style,\n  navRef,\n  listRef,\n  renderPreviousButton,\n  renderNextButton,\n  renderPageButton,\n  ...props\n}: BasePaginationProps & PaginationRenderProps) {\n  const pages: PageData[] = useMemo(() => {\n    const visiblePages = getVisiblePages(currentPage, pageCount);\n    const firstPageIndex = 0;\n    const lastPageIndex = visiblePages.length - 1;\n\n    return visiblePages.map<PageData>((page, index) => {\n      const isCurrentPage = typeof page === 'number' && page === currentPage;\n      const pageNumber = typeof page === 'number' ? page : page.page;\n\n      const pageButtonProps: TextButtonProperties = {\n        // TODO: i18n\n        'aria-label': `Page ${pageNumber}`,\n        children: typeof page === 'number' ? page : '…',\n        'data-first': index === firstPageIndex || undefined,\n        'data-last': index === lastPageIndex || undefined,\n        variant: isCurrentPage ? 'primary' : 'secondary',\n      };\n\n      return { pageNumber, isCurrentPage, pageButtonProps };\n    });\n  }, [currentPage, pageCount]);\n\n  const previousButtonProps: IconButtonProperties = {\n    icon: <IconChevronLeft />,\n    isDisabled: currentPage === 1,\n    // TODO: internationalization\n    'aria-label': 'Previous',\n  };\n\n  const nextButtonProps: IconButtonProperties = {\n    icon: <IconChevronRight />,\n    isDisabled: currentPage === pageCount,\n    // TODO: internationalization\n    'aria-label': 'Next',\n  };\n\n  return (\n    <nav\n      {...props}\n      ref={navRef}\n      className={clsx('cim-pagination', UNSAFE_className)}\n      style={UNSAFE_style}\n      aria-controls={paginatedElementId}\n    >\n      <ul ref={listRef} className=\"cim-pagination-list\">\n        <li>{renderPreviousButton(previousButtonProps)}</li>\n\n        {pages.map((pageData) => (\n          <li key={pageData.pageNumber}>{renderPageButton(pageData)}</li>\n        ))}\n\n        <li>{renderNextButton(nextButtonProps)}</li>\n      </ul>\n    </nav>\n  );\n}\n\nfunction getVisiblePages(currentPage: number, totalPages: number): (number | { type: 'ellipsis'; page: number })[] {\n  if (totalPages <= 7) {\n    return Array.from({ length: totalPages }, (_, index) => index + 1);\n  }\n\n  if (currentPage <= 4) {\n    return [1, 2, 3, 4, { type: 'ellipsis', page: 5 }, totalPages - 1, totalPages];\n  }\n\n  if (currentPage >= totalPages - 3) {\n    return [\n      1,\n      2,\n      { type: 'ellipsis', page: totalPages - 4 },\n      totalPages - 3,\n      totalPages - 2,\n      totalPages - 1,\n      totalPages,\n    ];\n  }\n\n  return [\n    1,\n    { type: 'ellipsis', page: currentPage - 2 },\n    currentPage - 1,\n    currentPage,\n    currentPage + 1,\n    { type: 'ellipsis', page: currentPage + 2 },\n    totalPages,\n  ];\n}\n"]}

package/dist/esm/components/pagination/link-pagination.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=link-pagination.d.ts.map

package/dist/esm/components/pagination/link-pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"link-pagination.d.ts","sourceRoot":"","sources":["../../../../src/components/pagination/link-pagination.tsx"],"names":[],"mappings":""}

package/dist/esm/components/pagination/link-pagination.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { focusSafely } from '@react-aria/focus';
+import { useRouter } from '@react-aria/utils';
+import { useCallback, useRef } from 'react';
+import { RouterProvider } from '../../providers/router/router-provider.js';
+import { IconLinkButton } from '../button/icon-link-button.js';
+import { LinkButton } from '../button/link-button.js';
+import { BasePagination } from './base-pagination.js';
+/** @internal */
+export function LinkPagination({ currentPage, pageCount, href, onPageChange, 
+// Navigation props
+hrefLang, target, download, ping, referrerPolicy, rel, routerOptions, ...props }) {
+    const router = useRouter();
+    const listRef = useRef(null);
+    const navigationProps = {
+        hrefLang,
+        target,
+        download,
+        ping,
+        referrerPolicy,
+        rel,
+        routerOptions,
+    };
+    const navigationInterceptor = useCallback((path, routerOptions) => {
+        // If navigation would cause the activated link to become disabled,
+        // we have to move focus to a different link beforehand.
+        if (!listRef.current) {
+            return;
+        }
+        const { paginationPrevious, paginationNext } = routerOptions?.__INTERNAL__CIMPRESS__UI__ ?? {};
+        const element = listRef.current.querySelector(`[href='${path}']${paginationPrevious ? '[data-previous]' : ':not([data-previous])'}${paginationNext ? '[data-next]' : ':not([data-next])'}`);
+        if (paginationPrevious && currentPage === 2) {
+            // "Previous" link will become disabled, so move focus to the first page link
+            focusSafely(listRef.current?.querySelector(`[href][data-first]`));
+        }
+        else if (paginationNext && currentPage === pageCount - 1) {
+            // "Next" link will become disabled, so move focus to the last page link
+            focusSafely(listRef.current?.querySelector(`[href][data-last]`));
+        }
+        onPageChange?.(Number(element.dataset.page));
+        // We don't have access to the modifiers of the original event.
+        // However, this function wouldn't run if the original modifiers impacted routing, so it is safe to pass an empty object.
+        router.open(element, {}, path, routerOptions);
+    }, [router, currentPage, pageCount, onPageChange]);
+    return (_jsx(RouterProvider, { navigate: navigationInterceptor, children: _jsx(BasePagination, { ...props, listRef: listRef, currentPage: currentPage, pageCount: pageCount, renderPreviousButton: (previousButtonProps) => (_jsx(IconLinkButton, { ...navigationProps, ...previousButtonProps, href: href(currentPage - 1), routerOptions: {
+                    ...(navigationProps.routerOptions ?? {}),
+                    __INTERNAL__CIMPRESS__UI__: {
+                        paginationPrevious: true,
+                    },
+                }, "data-previous": true, "data-page": currentPage - 1 })), renderNextButton: (nextButtonProps) => (_jsx(IconLinkButton, { ...navigationProps, ...nextButtonProps, href: href(currentPage + 1), routerOptions: {
+                    ...(navigationProps.routerOptions ?? {}),
+                    __INTERNAL__CIMPRESS__UI__: {
+                        paginationNext: true,
+                    },
+                }, "data-next": true, "data-page": currentPage + 1 })), renderPageButton: ({ pageNumber, isCurrentPage, pageButtonProps }) => (_jsx(LinkButton, { ...navigationProps, ...pageButtonProps, "aria-current": isCurrentPage ? 'page' : undefined, href: href(pageNumber), "data-page": pageNumber })) }) }));
+}
+//# sourceMappingURL=link-pagination.js.map

package/dist/esm/components/pagination/link-pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link-pagination.js","sourceRoot":"","sources":["../../../../src/components/pagination/link-pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["import { focusSafely } from '@react-aria/focus';\nimport { useRouter } from '@react-aria/utils';\nimport { type ForwardedRef, useCallback, useRef } from 'react';\nimport { RouterProvider } from '../../providers/router/router-provider.js';\nimport { IconLinkButton } from '../button/icon-link-button.js';\nimport { LinkButton } from '../button/link-button.js';\nimport type { FocusableElement, Href, NavigationProps, RouterOptions } from '../types.js';\nimport { BasePagination, type BasePaginationProps } from './base-pagination.js';\n\ninterface PaginationRouterOptions {\n  __INTERNAL__CIMPRESS__UI__?: {\n    paginationPrevious?: boolean;\n    paginationNext?: boolean;\n  };\n}\n\n/** @internal */\nexport interface LinkPaginationProps extends BasePaginationProps, Omit<NavigationProps, 'href'> {\n  navRef?: ForwardedRef<HTMLElement>;\n  /** A callback function that is called when the page number changes. */\n  onPageChange?: (page: number) => void;\n  /** A function that returns a URL for a given page number. */\n  href: (page: number) => string;\n}\n\n/** @internal */\nexport function LinkPagination({\n  currentPage,\n  pageCount,\n  href,\n  onPageChange,\n\n  // Navigation props\n  hrefLang,\n  target,\n  download,\n  ping,\n  referrerPolicy,\n  rel,\n  routerOptions,\n\n  ...props\n}: LinkPaginationProps) {\n  const router = useRouter();\n  const listRef = useRef<HTMLUListElement>(null);\n\n  const navigationProps = {\n    hrefLang,\n    target,\n    download,\n    ping,\n    referrerPolicy,\n    rel,\n    routerOptions,\n  };\n\n  const navigationInterceptor = useCallback(\n    (path: Href, routerOptions?: RouterOptions) => {\n      // If navigation would cause the activated link to become disabled,\n      // we have to move focus to a different link beforehand.\n\n      if (!listRef.current) {\n        return;\n      }\n\n      const { paginationPrevious, paginationNext } =\n        (routerOptions as PaginationRouterOptions | undefined)?.__INTERNAL__CIMPRESS__UI__ ?? {};\n\n      const element = listRef.current.querySelector(\n        `[href='${path}']${paginationPrevious ? '[data-previous]' : ':not([data-previous])'}${paginationNext ? '[data-next]' : ':not([data-next])'}`,\n      )!;\n\n      if (paginationPrevious && currentPage === 2) {\n        // \"Previous\" link will become disabled, so move focus to the first page link\n        focusSafely(listRef.current?.querySelector(`[href][data-first]`) as FocusableElement);\n      } else if (paginationNext && currentPage === pageCount - 1) {\n        // \"Next\" link will become disabled, so move focus to the last page link\n        focusSafely(listRef.current?.querySelector(`[href][data-last]`) as FocusableElement);\n      }\n\n      onPageChange?.(Number((element as HTMLElement).dataset.page));\n\n      // We don't have access to the modifiers of the original event.\n      // However, this function wouldn't run if the original modifiers impacted routing, so it is safe to pass an empty object.\n      router.open(element, {}, path, routerOptions);\n    },\n    [router, currentPage, pageCount, onPageChange],\n  );\n\n  return (\n    <RouterProvider navigate={navigationInterceptor}>\n      <BasePagination\n        {...props}\n        listRef={listRef}\n        currentPage={currentPage}\n        pageCount={pageCount}\n        renderPreviousButton={(previousButtonProps) => (\n          <IconLinkButton\n            {...navigationProps}\n            {...previousButtonProps}\n            href={href(currentPage - 1)}\n            routerOptions={\n              {\n                ...(navigationProps.routerOptions ?? {}),\n                __INTERNAL__CIMPRESS__UI__: {\n                  paginationPrevious: true,\n                },\n              } as PaginationRouterOptions as RouterOptions\n            }\n            data-previous\n            data-page={currentPage - 1}\n          />\n        )}\n        renderNextButton={(nextButtonProps) => (\n          <IconLinkButton\n            {...navigationProps}\n            {...nextButtonProps}\n            href={href(currentPage + 1)}\n            routerOptions={\n              {\n                ...(navigationProps.routerOptions ?? {}),\n                __INTERNAL__CIMPRESS__UI__: {\n                  paginationNext: true,\n                },\n              } as PaginationRouterOptions as RouterOptions\n            }\n            data-next\n            data-page={currentPage + 1}\n          />\n        )}\n        renderPageButton={({ pageNumber, isCurrentPage, pageButtonProps }) => (\n          <LinkButton\n            {...navigationProps}\n            {...pageButtonProps}\n            aria-current={isCurrentPage ? 'page' : undefined}\n            href={href(pageNumber)}\n            data-page={pageNumber}\n          />\n        )}\n      />\n    </RouterProvider>\n  );\n}\n"]}

package/dist/esm/components/pagination/pagination.d.ts

@@ -0,0 +1,20 @@
+import type { NavigationProps } from '../types.js';
+import type { BasePaginationProps } from './base-pagination.js';
+export interface PaginationProps extends Omit<BasePaginationProps, 'currentPage'>, Omit<NavigationProps, 'href'> {
+    /** The current page number (controlled). Should be between `1` and `pageCount`. */
+    currentPage?: number;
+    /** The default page number (uncontrolled). Should be between `1` and `pageCount`. */
+    defaultPage?: number;
+    /** A callback function that is called when the page number changes. */
+    onPageChange?: (page: number) => void;
+    /** A function that returns a URL for a given page number. */
+    href?: (page: number) => string;
+}
+/**
+ * Allows navigating across multiple pages of related content.
+ *
+ * See [pagination usage guidelines](https://ui.cimpress.io/components/pagination/).
+ */
+declare const _Pagination: (props: PaginationProps & import("react").RefAttributes<HTMLElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
+export { _Pagination as Pagination };
+//# sourceMappingURL=pagination.d.ts.map

package/dist/esm/components/pagination/pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../../src/components/pagination/pagination.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAEnD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAGhE,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,mBAAmB,EAAE,aAAa,CAAC,EAAE,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC;IAC9G,mFAAmF;IACnF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qFAAqF;IACrF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uEAAuE;IACvE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,6DAA6D;IAC7D,IAAI,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;CACjC;AA4DD;;;;GAIG;AACH,QAAA,MAAM,WAAW,8JAAuD,CAAC;AAEzE,OAAO,EAAE,WAAW,IAAI,UAAU,EAAE,CAAC"}

package/dist/esm/components/pagination/pagination.js

@@ -0,0 +1,40 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { announce } from '@react-aria/live-announcer';
+import { useUpdateEffect } from '@react-aria/utils';
+import { useControlledState } from '@react-stately/utils';
+import { useEffect } from 'react';
+import { forwardRef } from '../../forward-ref.js';
+import { withStyleProps } from '../../with-style-props.js';
+import { ActionPagination } from './action-pagination.js';
+import { LinkPagination } from './link-pagination.js';
+function Pagination({ currentPage, defaultPage, href, onPageChange, 
+// Navigation props
+hrefLang, target, download, ping, referrerPolicy, rel, routerOptions, ...props }, ref) {
+    const [page, setPage] = useControlledState(currentPage, defaultPage ?? 1, onPageChange);
+    const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
+    useEffect(() => {
+        if (!ariaLabel && !ariaLabelledBy) {
+            console.warn('Pagination requires one of aria-label / aria-labelledby for accessibility');
+        }
+    }, [ariaLabel, ariaLabelledBy]);
+    // Announce when the selected page changes
+    useUpdateEffect(() => {
+        // TODO: i18n
+        announce(`Selected page: ${page}`, 'polite', 4000);
+    }, [page]);
+    if (href) {
+        return (_jsx(LinkPagination, { ...props, currentPage: page, onPageChange: setPage, navRef: ref, href: href, hrefLang: hrefLang, target: target, download: download, ping: ping, referrerPolicy: referrerPolicy, rel: rel, routerOptions: routerOptions }));
+    }
+    else {
+        return _jsx(ActionPagination, { ...props, navRef: ref, currentPage: page, onPageChange: setPage });
+    }
+}
+/**
+ * Allows navigating across multiple pages of related content.
+ *
+ * See [pagination usage guidelines](https://ui.cimpress.io/components/pagination/).
+ */
+const _Pagination = withStyleProps(forwardRef(Pagination), 'Pagination');
+export { _Pagination as Pagination };
+//# sourceMappingURL=pagination.js.map

package/dist/esm/components/pagination/pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.js","sourceRoot":"","sources":["../../../../src/components/pagination/pagination.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAqB,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAE3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE1D,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAatD,SAAS,UAAU,CACjB,EACE,WAAW,EACX,WAAW,EACX,IAAI,EACJ,YAAY;AAEZ,mBAAmB;AACnB,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,IAAI,EACJ,cAAc,EACd,GAAG,EACH,aAAa,EAEb,GAAG,KAAK,EACQ,EAClB,GAA8B;IAE9B,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,kBAAkB,CAAC,WAAW,EAAE,WAAW,IAAI,CAAC,EAAE,YAAY,CAAC,CAAC;IAExF,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAClC,OAAO,CAAC,IAAI,CAAC,2EAA2E,CAAC,CAAC;QAC5F,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAEhC,0CAA0C;IAC1C,eAAe,CAAC,GAAG,EAAE;QACnB,aAAa;QACb,QAAQ,CAAC,kBAAkB,IAAI,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,CAAC;IACrD,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,IAAI,IAAI,EAAE,CAAC;QACT,OAAO,CACL,KAAC,cAAc,OACT,KAAK,EACT,WAAW,EAAE,IAAI,EACjB,YAAY,EAAE,OAAO,EACrB,MAAM,EAAE,GAAG,EACX,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,cAAc,EAAE,cAAc,EAC9B,GAAG,EAAE,GAAG,EACR,aAAa,EAAE,aAAa,GAC5B,CACH,CAAC;IACJ,CAAC;SAAM,CAAC;QACN,OAAO,KAAC,gBAAgB,OAAK,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,WAAW,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,GAAI,CAAC;IAChG,CAAC;AACH,CAAC;AAED;;;;GAIG;AACH,MAAM,WAAW,GAAG,cAAc,CAAC,UAAU,CAAC,UAAU,CAAC,EAAE,YAAY,CAAC,CAAC;AAEzE,OAAO,EAAE,WAAW,IAAI,UAAU,EAAE,CAAC","sourcesContent":["'use client';\n\nimport { announce } from '@react-aria/live-announcer';\nimport { useUpdateEffect } from '@react-aria/utils';\nimport { useControlledState } from '@react-stately/utils';\nimport { type ForwardedRef, useEffect } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { NavigationProps } from '../types.js';\nimport { ActionPagination } from './action-pagination.js';\nimport type { BasePaginationProps } from './base-pagination.js';\nimport { LinkPagination } from './link-pagination.js';\n\nexport interface PaginationProps extends Omit<BasePaginationProps, 'currentPage'>, Omit<NavigationProps, 'href'> {\n  /** The current page number (controlled). Should be between `1` and `pageCount`. */\n  currentPage?: number;\n  /** The default page number (uncontrolled). Should be between `1` and `pageCount`. */\n  defaultPage?: number;\n  /** A callback function that is called when the page number changes. */\n  onPageChange?: (page: number) => void;\n  /** A function that returns a URL for a given page number. */\n  href?: (page: number) => string;\n}\n\nfunction Pagination(\n  {\n    currentPage,\n    defaultPage,\n    href,\n    onPageChange,\n\n    // Navigation props\n    hrefLang,\n    target,\n    download,\n    ping,\n    referrerPolicy,\n    rel,\n    routerOptions,\n\n    ...props\n  }: PaginationProps,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  const [page, setPage] = useControlledState(currentPage, defaultPage ?? 1, onPageChange);\n\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useEffect(() => {\n    if (!ariaLabel && !ariaLabelledBy) {\n      console.warn('Pagination requires one of aria-label / aria-labelledby for accessibility');\n    }\n  }, [ariaLabel, ariaLabelledBy]);\n\n  // Announce when the selected page changes\n  useUpdateEffect(() => {\n    // TODO: i18n\n    announce(`Selected page: ${page}`, 'polite', 4000);\n  }, [page]);\n\n  if (href) {\n    return (\n      <LinkPagination\n        {...props}\n        currentPage={page}\n        onPageChange={setPage}\n        navRef={ref}\n        href={href}\n        hrefLang={hrefLang}\n        target={target}\n        download={download}\n        ping={ping}\n        referrerPolicy={referrerPolicy}\n        rel={rel}\n        routerOptions={routerOptions}\n      />\n    );\n  } else {\n    return <ActionPagination {...props} navRef={ref} currentPage={page} onPageChange={setPage} />;\n  }\n}\n\n/**\n * Allows navigating across multiple pages of related content.\n *\n * See [pagination usage guidelines](https://ui.cimpress.io/components/pagination/).\n */\nconst _Pagination = withStyleProps(forwardRef(Pagination), 'Pagination');\n\nexport { _Pagination as Pagination };\n"]}