@cimpress-ui/react 0.2.1 → 0.3.0

package/dist/esm/components/menu/menu.js

@@ -1,40 +1,26 @@
 '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 { Header as RACHeader, Menu as RACMenu, MenuItem as RACMenuItem, MenuTrigger as RACMenuTrigger, MenuSection as RACMenuSection, Separator as RACSeparator, Collection as RACCollection, Text as RACText, } from 'react-aria-components';
-import { forwardRef } from '../../forward-ref.js';
-import { IconChevronDownFill } from '../../icons/index.js';
-import { withStyleProps } from '../../with-style-props.js';
-import { Button } from '../button/button.js';
-import { IconButton } from '../button/icon-button.js';
+import { Collection as RACCollection, Header as RACHeader, Menu as RACMenu, MenuItem as RACMenuItem, MenuSection as RACMenuSection, MenuTrigger as RACMenuTrigger, Separator as RACSeparator, Text as RACText, } from 'react-aria-components';
 import { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';
 import { textStyle } from '../typography/utils.js';
-function Menu({ children, isDisabled, onAction, items, onOpenChange, onScroll, ...props }, ref) {
-    const { label, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
-    useEffect(() => {
-        if (!label && !ariaLabel && !ariaLabelledBy) {
-            console.warn('`Menu` requires one of `label` / `aria-label` / `aria-labelledby` for accessibility');
-        }
-    }, [label, ariaLabel, ariaLabelledBy]);
-    if (items != null && typeof children !== 'function') {
-        console.warn('`Menu` requires `children` to be a function when using `items` prop');
-    }
-    return (_jsxs(RACMenuTrigger, { onOpenChange: onOpenChange, children: [_jsx(MenuTrigger, { ...props, triggerRef: ref, isDisabled: isDisabled }), _jsx(CollapsibleList, { placement: "bottom start", offset: 5, maxHeight: 315, children: _jsx(RACMenu, { className: "cim-menu", onAction: onAction, onScroll: onScroll, items: items, children: children }) })] }));
-}
 /**
- * Displays a collapsible list of options and actions that users can choose from.
+ * Encapsulates a menu trigger and its associated menu. The trigger can be any Cimpress UI button, and the menu will be displayed when the trigger is activated.
  *
  * See [menu usage guidelines](https://ui.cimpress.io/components/menu/).
  */
-const _Menu = withStyleProps(forwardRef(Menu), 'Menu');
-export { _Menu as Menu };
-function MenuTrigger({ label, triggerRef, ...props }) {
-    if (label) {
-        return (_jsx(Button, { ...props, variant: "secondary", size: "medium", ref: triggerRef, iconEnd: _jsx(IconChevronDownFill, { UNSAFE_className: "cim-menu-trigger-icon" }), children: label }));
+export function MenuRoot(props) {
+    return _jsx(RACMenuTrigger, { ...props });
+}
+MenuRoot.displayName = 'MenuRoot';
+/** Displays a collapsible list of options and actions that users can choose from. */
+export function Menu(props) {
+    if (props.items != null && typeof props.children !== 'function') {
+        console.warn('`Menu` requires `children` to be a function when using `items` prop');
     }
-    return (_jsx(IconButton, { ...props, "aria-label": props['aria-label'] ?? '', variant: "secondary", size: "medium", ref: triggerRef, icon: _jsx(IconChevronDownFill, { UNSAFE_className: "cim-menu-trigger-icon" }) }));
+    return (_jsx(CollapsibleList, { placement: "bottom start", offset: 5, maxHeight: 315, children: _jsx(RACMenu, { className: "cim-menu", ...props }) }));
 }
+Menu.displayName = 'Menu';
 /** Groups list items within `Menu` into a section. */
 export function MenuSection({ title, children, items, ...props }) {
     if (items != null && typeof children !== 'function') {

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

@@ -1 +1 @@
-{"version":3,"file":"menu.js","sourceRoot":"","sources":["../../../../src/components/menu/menu.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { type ReactNode, type ForwardedRef, useEffect, type Ref } from 'react';\nimport {\n  Header as RACHeader,\n  Menu as RACMenu,\n  type MenuProps as RACMenuProps,\n  MenuItem as RACMenuItem,\n  type MenuItemProps as RACMenuItemProps,\n  MenuTrigger as RACMenuTrigger,\n  type MenuTriggerProps as RACMenuTriggerProps,\n  MenuSection as RACMenuSection,\n  Separator as RACSeparator,\n  Collection as RACCollection,\n  Text as RACText,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconChevronDownFill } from '../../icons/index.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { Button } from '../button/button.js';\nimport { IconButton } from '../button/icon-button.js';\nimport type { ActionButtonProps } from '../button/types.js';\nimport { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';\nimport type {\n  CommonProps,\n  Key,\n  LabellableProps,\n  NavigationProps,\n  CollectionProps,\n  CollectionItem,\n  StringLikeChildren,\n} from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface MenuProps<T extends CollectionItem = CollectionItem>\n  extends CommonProps,\n    CollectionProps<T>,\n    LabellableProps,\n    Pick<RACMenuTriggerProps, 'onOpenChange'>,\n    Pick<RACMenuProps<T>, 'onScroll'>,\n    Pick<ActionButtonProps, 'onHoverStart' | 'onHoverEnd'> {\n  /** Whether the menu trigger is disabled. */\n  isDisabled?: boolean;\n  /** Handler that is called when an item is selected. When using `onAction`, all items must have an `id` prop defined. */\n  onAction?: (key: Key) => void;\n}\n\nfunction Menu<T extends CollectionItem>(\n  { children, isDisabled, onAction, items, onOpenChange, onScroll, ...props }: MenuProps<T>,\n  ref: ForwardedRef<HTMLButtonElement>,\n) {\n  const { label, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useEffect(() => {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn('`Menu` requires one of `label` / `aria-label` / `aria-labelledby` for accessibility');\n    }\n  }, [label, ariaLabel, ariaLabelledBy]);\n\n  if (items != null && typeof children !== 'function') {\n    console.warn('`Menu` requires `children` to be a function when using `items` prop');\n  }\n\n  return (\n    <RACMenuTrigger onOpenChange={onOpenChange}>\n      <MenuTrigger {...props} triggerRef={ref} isDisabled={isDisabled} />\n      <CollapsibleList\n        placement=\"bottom start\"\n        offset={5} // 1px border + 4px actual offset\n        maxHeight={315}\n      >\n        <RACMenu className=\"cim-menu\" onAction={onAction} onScroll={onScroll} items={items}>\n          {children}\n        </RACMenu>\n      </CollapsibleList>\n    </RACMenuTrigger>\n  );\n}\n\n/**\n * Displays a collapsible list of options and actions that users can choose from.\n *\n * See [menu usage guidelines](https://ui.cimpress.io/components/menu/).\n */\nconst _Menu = withStyleProps(forwardRef(Menu), 'Menu');\n\nexport { _Menu as Menu };\n\ninterface MenuTriggerProps\n  extends CommonProps,\n    LabellableProps,\n    Pick<ActionButtonProps, 'onHoverStart' | 'onHoverEnd'> {\n  triggerRef: Ref<HTMLButtonElement>;\n  isDisabled?: boolean;\n}\n\nfunction MenuTrigger({ label, triggerRef, ...props }: MenuTriggerProps) {\n  if (label) {\n    return (\n      <Button\n        {...props}\n        variant=\"secondary\"\n        size=\"medium\"\n        ref={triggerRef}\n        iconEnd={<IconChevronDownFill UNSAFE_className=\"cim-menu-trigger-icon\" />}\n      >\n        {label}\n      </Button>\n    );\n  }\n\n  return (\n    <IconButton\n      {...props}\n      // The warning for missing aria-label would have been already emitted in the <Menu> component, so this is fine\n      aria-label={props['aria-label'] ?? ''}\n      variant=\"secondary\"\n      size=\"medium\"\n      ref={triggerRef}\n      icon={<IconChevronDownFill UNSAFE_className=\"cim-menu-trigger-icon\" />}\n    />\n  );\n}\n\nexport interface MenuSectionProps<T extends CollectionItem = CollectionItem> extends CollectionProps<T> {\n  /** The ID of the section. Has to be unique across all sections and items. */\n  id?: Key;\n  /** The content to display as the section title. */\n  title: string;\n}\n\n/** Groups list items within `Menu` into a section. */\nexport function MenuSection<T extends CollectionItem>({ title, children, items, ...props }: MenuSectionProps<T>) {\n  if (items != null && typeof children !== 'function') {\n    console.warn('`MenuSection` requires `children` to be a function when using `items` prop');\n  }\n\n  return (\n    <RACMenuSection {...props} className=\"cim-menu-section\">\n      <RACHeader className={clsx('cim-menu-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' }))}>\n        {title}\n      </RACHeader>\n      <RACCollection items={items}>{children}</RACCollection>\n    </RACMenuSection>\n  );\n}\n\nMenuSection.displayName = 'MenuSection';\n\nexport interface MenuItemProps\n  extends NavigationProps,\n    Pick<RACMenuItemProps, 'isDisabled' | 'onAction' | 'onHoverStart' | 'onHoverEnd'> {\n  /** The ID of the item. Has to be unique across all sections and items. */\n  id?: Key;\n  /** The content to display as the label. */\n  children: StringLikeChildren;\n  /** Additional description for the menu item. */\n  description?: string;\n  /** An icon representing the menu item. */\n  icon?: ReactNode;\n}\n\n/** Renders a single list item within `Menu`. */\nexport function MenuItem({ children, description, icon, ...props }: MenuItemProps) {\n  const textValue =\n    typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');\n\n  return (\n    <RACMenuItem {...props} className=\"cim-menu-item\" textValue={textValue}>\n      {({ isDisabled }) => (\n        <>\n          {icon}\n\n          <div className=\"cim-menu-item-text\">\n            <RACText slot=\"label\" className={textStyle({ variant: 'body', tone: isDisabled ? 'muted' : 'base' })}>\n              {children}\n            </RACText>\n\n            {description && (\n              <RACText\n                slot=\"description\"\n                className={textStyle({ variant: 'small', tone: isDisabled ? 'muted' : 'subtle' })}\n              >\n                {description}\n              </RACText>\n            )}\n          </div>\n        </>\n      )}\n    </RACMenuItem>\n  );\n}\n\nMenuItem.displayName = 'MenuItem';\n\n/** Renders a horizontal divider between list items within `Menu`. */\nexport function MenuDivider() {\n  return <RACSeparator className=\"cim-menu-divider\" />;\n}\n\nMenuDivider.displayName = 'MenuDivider';\n"]}
+{"version":3,"file":"menu.js","sourceRoot":"","sources":["../../../../src/components/menu/menu.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ReactNode } from 'react';\nimport {\n  Collection as RACCollection,\n  Header as RACHeader,\n  Menu as RACMenu,\n  MenuItem as RACMenuItem,\n  type MenuItemProps as RACMenuItemProps,\n  type MenuProps as RACMenuProps,\n  MenuSection as RACMenuSection,\n  MenuTrigger as RACMenuTrigger,\n  type MenuTriggerProps as RACMenuTriggerProps,\n  Separator as RACSeparator,\n  Text as RACText,\n} from 'react-aria-components';\nimport { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';\nimport type { CollectionItem, CollectionProps, Key, NavigationProps, StringLikeChildren } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface MenuRootProps\n  extends Pick<RACMenuTriggerProps, 'children' | 'onOpenChange' | 'isOpen' | 'defaultOpen'> {}\n\n/**\n * Encapsulates a menu trigger and its associated menu. The trigger can be any Cimpress UI button, and the menu will be displayed when the trigger is activated.\n *\n * See [menu usage guidelines](https://ui.cimpress.io/components/menu/).\n */\nexport function MenuRoot(props: MenuRootProps) {\n  return <RACMenuTrigger {...props} />;\n}\n\nMenuRoot.displayName = 'MenuRoot';\n\nexport interface MenuProps<T extends CollectionItem = CollectionItem>\n  extends CollectionProps<T>,\n    Pick<RACMenuProps<T>, 'onScroll'> {\n  /** Handler that is called when an item is selected. When using `onAction`, all items must have an `id` prop defined. */\n  onAction?: (key: Key) => void;\n}\n\n/** Displays a collapsible list of options and actions that users can choose from. */\nexport function Menu<T extends CollectionItem>(props: MenuProps<T>) {\n  if (props.items != null && typeof props.children !== 'function') {\n    console.warn('`Menu` requires `children` to be a function when using `items` prop');\n  }\n\n  return (\n    <CollapsibleList\n      placement=\"bottom start\"\n      offset={5} // 1px border + 4px actual offset\n      maxHeight={315}\n    >\n      <RACMenu className=\"cim-menu\" {...props} />\n    </CollapsibleList>\n  );\n}\n\nMenu.displayName = 'Menu';\n\nexport interface MenuSectionProps<T extends CollectionItem = CollectionItem> extends CollectionProps<T> {\n  /** The ID of the section. Has to be unique across all sections and items. */\n  id?: Key;\n  /** The content to display as the section title. */\n  title: string;\n}\n\n/** Groups list items within `Menu` into a section. */\nexport function MenuSection<T extends CollectionItem>({ title, children, items, ...props }: MenuSectionProps<T>) {\n  if (items != null && typeof children !== 'function') {\n    console.warn('`MenuSection` requires `children` to be a function when using `items` prop');\n  }\n\n  return (\n    <RACMenuSection {...props} className=\"cim-menu-section\">\n      <RACHeader className={clsx('cim-menu-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' }))}>\n        {title}\n      </RACHeader>\n      <RACCollection items={items}>{children}</RACCollection>\n    </RACMenuSection>\n  );\n}\n\nMenuSection.displayName = 'MenuSection';\n\nexport interface MenuItemProps\n  extends NavigationProps,\n    Pick<RACMenuItemProps, 'isDisabled' | 'onAction' | 'onHoverStart' | 'onHoverEnd'> {\n  /** The ID of the item. Has to be unique across all sections and items. */\n  id?: Key;\n  /** The content to display as the label. */\n  children: StringLikeChildren;\n  /** Additional description for the menu item. */\n  description?: string;\n  /** An icon representing the menu item. */\n  icon?: ReactNode;\n}\n\n/** Renders a single list item within `Menu`. */\nexport function MenuItem({ children, description, icon, ...props }: MenuItemProps) {\n  const textValue =\n    typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');\n\n  return (\n    <RACMenuItem {...props} className=\"cim-menu-item\" textValue={textValue}>\n      {({ isDisabled }) => (\n        <>\n          {icon}\n\n          <div className=\"cim-menu-item-text\">\n            <RACText slot=\"label\" className={textStyle({ variant: 'body', tone: isDisabled ? 'muted' : 'base' })}>\n              {children}\n            </RACText>\n\n            {description && (\n              <RACText\n                slot=\"description\"\n                className={textStyle({ variant: 'small', tone: isDisabled ? 'muted' : 'subtle' })}\n              >\n                {description}\n              </RACText>\n            )}\n          </div>\n        </>\n      )}\n    </RACMenuItem>\n  );\n}\n\nMenuItem.displayName = 'MenuItem';\n\n/** Renders a horizontal divider between list items within `Menu`. */\nexport function MenuDivider() {\n  return <RACSeparator className=\"cim-menu-divider\" />;\n}\n\nMenuDivider.displayName = 'MenuDivider';\n"]}

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

@@ -1,10 +1,7 @@
-import type { ReactNode } from 'react';
-import { type ModalOverlayProps as RACModalOverlayProps } from 'react-aria-components';
-import type { CommonProps } from '../types.js';
-export interface UNSTABLE_ModalProps extends CommonProps, Pick<RACModalOverlayProps, 'isDismissable'> {
+import { type ReactNode } from 'react';
+import type { AriaLabelingProps, CommonProps } from '../types.js';
+export interface UNSTABLE_ModalRootProps {
     children: ReactNode;
-    title?: string;
-    size?: 'small' | 'medium' | 'large';
     /** Whether the modal is open (controlled). */
     isOpen?: boolean;
     /** Whether the modal is open by default (uncontrolled). */
@@ -12,8 +9,56 @@ export interface UNSTABLE_ModalProps extends CommonProps, Pick<RACModalOverlayPr
     /** Handler that is called when the modal's open state changes. */
     onOpenChange?: (isOpen: boolean) => void;
 }
-export declare function UNSTABLE_DialogTrigger({ children }: {
-    children: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+/**
+ * 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

@@ -1 +1 @@
-{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../../src/components/modal/modal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAML,KAAK,iBAAiB,IAAI,oBAAoB,EAC/C,MAAM,uBAAuB,CAAC;AAG/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,MAAM,WAAW,mBAAoB,SAAQ,WAAW,EAAE,IAAI,CAAC,oBAAoB,EAAE,eAAe,CAAC;IACnG,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,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,wBAAgB,sBAAsB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAE3E;AAED,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,2CAsCrB"}
+{"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

@@ -1,18 +1,33 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 { UNSTABLE_IconClose } from '../../icons/index.js';
+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';
-export function UNSTABLE_DialogTrigger({ children }) {
-    return _jsx(RACDialogTrigger, { children: children });
+/**
+ * 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 }) {
-    return (_jsx(RACModalOverlay, { className: "cim-modal-overlay", isDismissable: isDismissable, isOpen: isOpen, defaultOpen: defaultOpen, onOpenChange: onOpenChange, "data-cim-style-root": true, children: _jsx(RACModal, { className: clsx('cim-modal', UNSAFE_className, {
-                'cim-modal-small': size === 'small',
-                'cim-modal-medium': size === 'medium',
-                'cim-modal-large': size === 'large',
-            }), children: _jsxs(RACDialog, { ...props, className: clsx('cim-modal-dialog'), style: UNSAFE_style, 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", icon: _jsx(UNSTABLE_IconClose, {}), variant: "tertiary", size: "small", "aria-label": "Close modal", UNSAFE_className: "cim-modal-close-button" })] }), _jsx("div", { className: "cim-modal-content", children: children })] }) }) }));
+    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

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../../src/components/modal/modal.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EACL,OAAO,IAAI,UAAU,EACrB,MAAM,IAAI,SAAS,EACnB,aAAa,IAAI,gBAAgB,EACjC,KAAK,IAAI,QAAQ,EACjB,YAAY,IAAI,eAAe,GAEhC,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAcnD,MAAM,UAAU,sBAAsB,CAAC,EAAE,QAAQ,EAA2B;IAC1E,OAAO,KAAC,gBAAgB,cAAE,QAAQ,GAAoB,CAAC;AACzD,CAAC;AAED,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,OAAO,CACL,KAAC,eAAe,IACd,SAAS,EAAC,mBAAmB,EAC7B,aAAa,EAAE,aAAa,EAC5B,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,yCAG1B,KAAC,QAAQ,IACP,SAAS,EAAE,IAAI,CAAC,WAAW,EAAE,gBAAgB,EAAE;gBAC7C,iBAAiB,EAAE,IAAI,KAAK,OAAO;gBACnC,kBAAkB,EAAE,IAAI,KAAK,QAAQ;gBACrC,iBAAiB,EAAE,IAAI,KAAK,OAAO;aACpC,CAAC,YAEF,MAAC,SAAS,OAAK,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,kBAAkB,CAAC,EAAE,KAAK,EAAE,YAAY,aAC5E,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,IAAI,EAAE,KAAC,kBAAkB,KAAG,EAC5B,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,OAAO,gBACD,aAAa,EACxB,gBAAgB,EAAC,wBAAwB,GACzC,IACE,EACN,cAAK,SAAS,EAAC,mBAAmB,YAAE,QAAQ,GAAO,IACzC,GACH,GACK,CACnB,CAAC;AACJ,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport 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  type ModalOverlayProps as RACModalOverlayProps,\n} from 'react-aria-components';\nimport { UNSTABLE_IconClose } from '../../icons/index.js';\nimport { IconButton } from '../button/icon-button.js';\nimport type { CommonProps } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface UNSTABLE_ModalProps extends CommonProps, Pick<RACModalOverlayProps, 'isDismissable'> {\n  children: ReactNode;\n  title?: string;\n  size?: 'small' | 'medium' | 'large';\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\nexport function UNSTABLE_DialogTrigger({ children }: { children: ReactNode }) {\n  return <RACDialogTrigger>{children}</RACDialogTrigger>;\n}\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  return (\n    <RACModalOverlay\n      className=\"cim-modal-overlay\"\n      isDismissable={isDismissable}\n      isOpen={isOpen}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}\n      data-cim-style-root\n    >\n      <RACModal\n        className={clsx('cim-modal', UNSAFE_className, {\n          'cim-modal-small': size === 'small',\n          'cim-modal-medium': size === 'medium',\n          'cim-modal-large': size === 'large',\n        })}\n      >\n        <RACDialog {...props} className={clsx('cim-modal-dialog')} style={UNSAFE_style}>\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              icon={<UNSTABLE_IconClose />}\n              variant=\"tertiary\"\n              size=\"small\"\n              aria-label=\"Close modal\"\n              UNSAFE_className=\"cim-modal-close-button\"\n            />\n          </div>\n          <div className=\"cim-modal-content\">{children}</div>\n        </RACDialog>\n      </RACModal>\n    </RACModalOverlay>\n  );\n}\n"]}
+{"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

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
 import { type LinkProps as RACLinkProps } from 'react-aria-components';
-import type { CommonProps, LabellableProps, NavigationProps, StringLikeChildren, WithRequired } from '../types.js';
-export interface UNSTABLE_NavTabsProps extends CommonProps, Omit<LabellableProps, 'label'> {
+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.

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

@@ -1 +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,WAAW,EAAE,eAAe,EAAE,eAAe,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAInH,MAAM,WAAW,qBAAsB,SAAQ,WAAW,EAAE,IAAI,CAAC,eAAe,EAAE,OAAO,CAAC;IACxF,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"}
+{"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.map

@@ -1 +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 { CommonProps, LabellableProps, 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, Omit<LabellableProps, 'label'> {\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"]}
+{"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

@@ -1,10 +1,18 @@
 import { type NumberFieldProps as RACNumberFieldProps } from 'react-aria-components';
 import type { CommonProps, FieldWithPlaceholderProps } from '../types.js';
-export interface UNSTABLE_NumberFieldProps extends CommonProps, FieldWithPlaceholderProps<number>, Pick<RACNumberFieldProps, 'value' | 'defaultValue' | 'onChange' | 'isDisabled' | 'isRequired' | 'isInvalid' | 'isReadOnly' | 'name' | 'autoFocus' | 'minValue' | 'maxValue' | 'step' | 'formatOptions' | 'onFocus' | 'onBlur'> {
+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 enter a number with a keyboard or increment/decrement buttons.
+ * 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: UNSTABLE_NumberFieldProps & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
-export { _NumberField as UNSTABLE_NumberField };
+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

@@ -1 +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,yBACf,SAAQ,WAAW,EACjB,yBAAyB,CAAC,MAAM,CAAC,EACjC,IAAI,CACF,mBAAmB,EACjB,OAAO,GACP,cAAc,GACd,UAAU,GACV,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,YAAY,GACZ,MAAM,GACN,WAAW,GACX,UAAU,GACV,UAAU,GACV,MAAM,GACN,eAAe,GACf,SAAS,GACT,QAAQ,CACX;CAAG;AA8CR;;GAEG;AACH,QAAA,MAAM,YAAY,2KAAkE,CAAC;AAErF,OAAO,EAAE,YAAY,IAAI,oBAAoB,EAAE,CAAC"}
+{"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

@@ -4,23 +4,29 @@ 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, IconMinus } from '../../icons/index.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 UNSTABLE_NumberField({ label, description, error: errorMessage, placeholder, UNSAFE_className, UNSAFE_style, ...props }, ref) {
+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, 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(IconMinus, {}), "aria-label": "Decrement", variant: "tertiary" }), _jsx("div", { className: "cim-number-field-spinner-separator" }), _jsx(IconButton, { slot: "increment", icon: _jsx(IconAdd, {}), "aria-label": "Increment", variant: "tertiary" })] })] }), _jsx(FormFieldError, { children: errorMessage }), _jsx(FormFieldDescription, { children: description })] }));
+    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 enter a number with a keyboard or increment/decrement buttons.
+ * 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(UNSTABLE_NumberField), 'NumberField');
-export { _NumberField as UNSTABLE_NumberField };
+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

@@ -1 +1 @@
-{"version":3,"file":"number-field.js","sourceRoot":"","sources":["../../../../src/components/number-field/number-field.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,SAAS,EAAqB,MAAM,OAAO,CAAC;AACrD,OAAO,EACL,KAAK,IAAI,QAAQ,EACjB,WAAW,IAAI,cAAc,EAE7B,KAAK,IAAI,QAAQ,GAClB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,oBAAoB,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAE5G,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAwBnD,SAAS,oBAAoB,CAC3B,EACE,KAAK,EACL,WAAW,EACX,KAAK,EAAE,YAAY,EACnB,WAAW,EACX,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACkB,EAC5B,GAAiC;IAEjC,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,oFAAoF,CAAC,CAAC;QACrG,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAEvC,OAAO,CACL,MAAC,cAAc,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,CAAC,kBAAkB,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,aAC7G,KAAC,cAAc,IAAC,UAAU,EAAE,KAAK,CAAC,UAAU,EAAE,UAAU,EAAE,KAAK,CAAC,UAAU,YACvE,KAAK,GACS,EACjB,MAAC,QAAQ,IAAC,SAAS,EAAC,8BAA8B,aAChD,KAAC,QAAQ,IACP,SAAS,EAAE,IAAI,CAAC,wBAAwB,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC,CAAC,EAC3E,WAAW,EAAE,WAAW,GACxB,EACF,eAAK,SAAS,EAAC,0BAA0B,aAEvC,KAAC,UAAU,IAAC,IAAI,EAAC,WAAW,EAAC,IAAI,EAAE,KAAC,SAAS,KAAG,gBAAa,WAAW,EAAC,OAAO,EAAC,UAAU,GAAG,EAC9F,cAAK,SAAS,EAAC,oCAAoC,GAAG,EAEtD,KAAC,UAAU,IAAC,IAAI,EAAC,WAAW,EAAC,IAAI,EAAE,KAAC,OAAO,KAAG,gBAAa,WAAW,EAAC,OAAO,EAAC,UAAU,GAAG,IACxF,IACG,EACX,KAAC,cAAc,cAAE,YAAY,GAAkB,EAC/C,KAAC,oBAAoB,cAAE,WAAW,GAAwB,IAC3C,CAClB,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,YAAY,GAAG,cAAc,CAAC,UAAU,CAAC,oBAAoB,CAAC,EAAE,aAAa,CAAC,CAAC;AAErF,OAAO,EAAE,YAAY,IAAI,oBAAoB,EAAE,CAAC","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, IconMinus } 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 UNSTABLE_NumberFieldProps\n  extends CommonProps,\n    FieldWithPlaceholderProps<number>,\n    Pick<\n      RACNumberFieldProps,\n      | 'value'\n      | 'defaultValue'\n      | 'onChange'\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\nfunction UNSTABLE_NumberField(\n  {\n    label,\n    description,\n    error: errorMessage,\n    placeholder,\n    UNSAFE_className,\n    UNSAFE_style,\n    ...props\n  }: UNSTABLE_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 {...props} ref={ref} className={clsx('cim-number-field', UNSAFE_className)} style={UNSAFE_style}>\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={<IconMinus />} aria-label=\"Decrement\" variant=\"tertiary\" />\n          <div className=\"cim-number-field-spinner-separator\" />\n          {/* TODO: i18n */}\n          <IconButton slot=\"increment\" icon={<IconAdd />} aria-label=\"Increment\" variant=\"tertiary\" />\n        </div>\n      </RACGroup>\n      <FormFieldError>{errorMessage}</FormFieldError>\n      <FormFieldDescription>{description}</FormFieldDescription>\n    </RACNumberField>\n  );\n}\n\n/**\n * Allows users to enter a number with a keyboard or increment/decrement buttons.\n */\nconst _NumberField = withStyleProps(forwardRef(UNSTABLE_NumberField), 'NumberField');\n\nexport { _NumberField as UNSTABLE_NumberField };\n"]}
+{"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":""}