@cimpress-ui/react 0.0.0-20250203144600

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 { 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"]}

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

@@ -0,0 +1,10 @@
+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'> {
+}
+/**
+ * Allows users to enter a number with a keyboard or increment/decrement buttons.
+ */
+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 };
+//# 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,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"}

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

@@ -0,0 +1,26 @@
+'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, IconMinus } 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) {
+    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 })] }));
+}
+/**
+ * Allows users to enter a number with a keyboard or increment/decrement buttons.
+ */
+const _NumberField = withStyleProps(forwardRef(UNSTABLE_NumberField), 'NumberField');
+export { _NumberField as UNSTABLE_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":"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"]}

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

@@ -0,0 +1,14 @@
+export interface PaginationProps {
+    /** The current page number. */
+    value: number;
+    /** The total number of pages. */
+    count: number;
+    /** The accessibility label for the pagination navigation, must be unique to the page. */
+    'aria-label': string;
+    /** 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;
+}
+export declare function UNSTABLE_Pagination({ value, count, onPageChange, href, 'aria-label': ariaLabel }: PaginationProps): import("react/jsx-runtime").JSX.Element;
+//# 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":"AAMA,MAAM,WAAW,eAAe;IAC9B,+BAA+B;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,yFAAyF;IACzF,YAAY,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;AAED,wBAAgB,mBAAmB,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,eAAe,2CA+DjH"}

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

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { UNSTABLE_IconChevronLeftFill, UNSTABLE_IconChevronRightFill } from '../../icons/index.js';
+import { Button } from '../button/button.js';
+import { IconButton } from '../button/icon-button.js';
+import { IconLinkButton } from '../button/icon-link-button.js';
+import { LinkButton } from '../button/link-button.js';
+export function UNSTABLE_Pagination({ value, count, onPageChange, href, 'aria-label': ariaLabel }) {
+    const visiblePages = getVisiblePages(value, count);
+    const previousButtonProps = {
+        // TODO: icon doesn't look optically centered, see: https://www.figma.com/design/JVWmaCjDeOlrYAkLlJD5gr?node-id=10376-1487#1082340181
+        icon: _jsx(UNSTABLE_IconChevronLeftFill, {}),
+        isDisabled: value === 1,
+        // TODO: internationalization
+        'aria-label': 'Previous',
+    };
+    const nextButtonProps = {
+        // TODO: icon doesn't look optically centered, see: https://www.figma.com/design/JVWmaCjDeOlrYAkLlJD5gr?node-id=10376-1487#1082340181
+        icon: _jsx(UNSTABLE_IconChevronRightFill, {}),
+        isDisabled: value === count,
+        // TODO: internationalization
+        'aria-label': 'Next',
+    };
+    return (_jsx("nav", { className: "cim-pagination", "aria-label": ariaLabel, children: _jsxs("ul", { className: "cim-pagination-list", children: [_jsx("li", { children: href ? (_jsx(IconLinkButton, { ...previousButtonProps, href: href?.(value - 1) })) : (_jsx(IconButton, { ...previousButtonProps, onPress: () => onPageChange?.(value - 1) })) }), visiblePages.map((page) => {
+                    const isCurrentPage = typeof page === 'number' && page === value;
+                    const pageNumber = typeof page === 'number' ? page : page.page;
+                    const pageButtonProps = {
+                        // TODO: internationalization
+                        // TODO: review if "Current page" is needed once we put `aria-current` on the `button`/`link`
+                        'aria-label': isCurrentPage ? `Current page, page ${pageNumber}` : `Go to page ${pageNumber}`,
+                        children: typeof page === 'number' ? page : '…',
+                    };
+                    return (
+                    // TODO: Put `aria-current` on the `button`/`link` instead of the `li` for better accessibility/screen reader support
+                    // RAC Button doesn't support `aria-current` as of now
+                    _jsx("li", { "aria-current": isCurrentPage && href != null ? 'page' : isCurrentPage, children: href ? (_jsx(LinkButton, { href: href?.(pageNumber), ...pageButtonProps })) : (_jsx(Button, { onPress: () => onPageChange?.(pageNumber), ...pageButtonProps })) }, pageNumber));
+                }), _jsx("li", { children: href ? (_jsx(IconLinkButton, { ...nextButtonProps, href: href?.(value + 1) })) : (_jsx(IconButton, { ...nextButtonProps, onPress: () => onPageChange?.(value + 1) })) })] }) }));
+}
+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=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":"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","sourcesContent":["import { UNSTABLE_IconChevronLeftFill, UNSTABLE_IconChevronRightFill } from '../../icons/index.js';\nimport { Button } from '../button/button.js';\nimport { IconButton } from '../button/icon-button.js';\nimport { IconLinkButton } from '../button/icon-link-button.js';\nimport { LinkButton } from '../button/link-button.js';\n\nexport interface PaginationProps {\n  /** The current page number. */\n  value: number;\n  /** The total number of pages. */\n  count: number;\n  /** The accessibility label for the pagination navigation, must be unique to the page. */\n  'aria-label': string;\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\nexport function UNSTABLE_Pagination({ value, count, onPageChange, href, 'aria-label': ariaLabel }: PaginationProps) {\n  const visiblePages = getVisiblePages(value, count);\n\n  const previousButtonProps = {\n    // TODO: icon doesn't look optically centered, see: https://www.figma.com/design/JVWmaCjDeOlrYAkLlJD5gr?node-id=10376-1487#1082340181\n    icon: <UNSTABLE_IconChevronLeftFill />,\n    isDisabled: value === 1,\n    // TODO: internationalization\n    'aria-label': 'Previous',\n  };\n\n  const nextButtonProps = {\n    // TODO: icon doesn't look optically centered, see: https://www.figma.com/design/JVWmaCjDeOlrYAkLlJD5gr?node-id=10376-1487#1082340181\n    icon: <UNSTABLE_IconChevronRightFill />,\n    isDisabled: value === count,\n    // TODO: internationalization\n    'aria-label': 'Next',\n  };\n\n  return (\n    <nav className=\"cim-pagination\" aria-label={ariaLabel}>\n      <ul className=\"cim-pagination-list\">\n        <li>\n          {href ? (\n            <IconLinkButton {...previousButtonProps} href={href?.(value - 1)} />\n          ) : (\n            <IconButton {...previousButtonProps} onPress={() => onPageChange?.(value - 1)} />\n          )}\n        </li>\n\n        {visiblePages.map((page) => {\n          const isCurrentPage = typeof page === 'number' && page === value;\n          const pageNumber = typeof page === 'number' ? page : page.page;\n          const pageButtonProps = {\n            // TODO: internationalization\n            // TODO: review if \"Current page\" is needed once we put `aria-current` on the `button`/`link`\n            'aria-label': isCurrentPage ? `Current page, page ${pageNumber}` : `Go to page ${pageNumber}`,\n            children: typeof page === 'number' ? page : '…',\n          };\n\n          return (\n            // TODO: Put `aria-current` on the `button`/`link` instead of the `li` for better accessibility/screen reader support\n            // RAC Button doesn't support `aria-current` as of now\n            <li key={pageNumber} aria-current={isCurrentPage && href != null ? 'page' : isCurrentPage}>\n              {href ? (\n                <LinkButton href={href?.(pageNumber)} {...pageButtonProps} />\n              ) : (\n                <Button onPress={() => onPageChange?.(pageNumber)} {...pageButtonProps} />\n              )}\n            </li>\n          );\n        })}\n\n        <li>\n          {href ? (\n            <IconLinkButton {...nextButtonProps} href={href?.(value + 1)} />\n          ) : (\n            <IconButton {...nextButtonProps} onPress={() => onPageChange?.(value + 1)} />\n          )}\n        </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/radio/radio-group.d.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react';
+import { type RadioGroupProps as RACRadioGroupProps } from 'react-aria-components';
+import type { Responsive } from '../spacing/types.js';
+import type { Direction, CommonProps, FieldProps, WithRequired } from '../types.js';
+export interface RadioGroupProps extends CommonProps, WithRequired<FieldProps<string | null>, 'label'>, Pick<RACRadioGroupProps, 'isDisabled' | 'isReadOnly' | 'isRequired' | 'isInvalid' | 'value' | 'onChange' | 'defaultValue' | 'name'> {
+    /** Radio buttons belonging to the group. */
+    children: ReactNode;
+    /**
+     * Determines the direction in which radio buttons will be stacked.
+     * @default 'vertical'
+     */
+    direction?: Responsive<Direction>;
+}
+/**
+ * Allows users to select a single item from a visible list.
+ *
+ * See [radio group usage guidelines](https://ui.cimpress.io/components/radio-group/).
+ */
+declare const _RadioGroup: (props: RadioGroupProps & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
+export { _RadioGroup as RadioGroup };
+//# sourceMappingURL=radio-group.d.ts.map

package/dist/esm/components/radio/radio-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../../../src/components/radio/radio-group.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAA+B,KAAK,eAAe,IAAI,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAKhH,OAAO,KAAK,EAAc,UAAU,EAAW,MAAM,qBAAqB,CAAC;AAC3E,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEpF,MAAM,WAAW,eACf,SAAQ,WAAW,EACjB,YAAY,CAAC,UAAU,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,OAAO,CAAC,EAChD,IAAI,CACF,kBAAkB,EAClB,YAAY,GAAG,YAAY,GAAG,YAAY,GAAG,WAAW,GAAG,OAAO,GAAG,UAAU,GAAG,cAAc,GAAG,MAAM,CAC1G;IACH,4CAA4C;IAC5C,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;CACnC;AA2BD;;;;GAIG;AACH,QAAA,MAAM,WAAW,iKAAuD,CAAC;AAEzE,OAAO,EAAE,WAAW,IAAI,UAAU,EAAE,CAAC"}

package/dist/esm/components/radio/radio-group.js

@@ -0,0 +1,31 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { RadioGroup as RACRadioGroup } from 'react-aria-components';
+import { forwardRef } from '../../forward-ref.js';
+import { withStyleProps } from '../../with-style-props.js';
+import { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';
+import { Stack } from '../spacing/stack/stack.js';
+function RadioGroup({ label, description, error: errorMessage, direction = 'vertical', children, UNSAFE_className, UNSAFE_style, ...props }, ref) {
+    return (_jsxs(RACRadioGroup, { ...props, ref: ref, className: clsx('cim-radio-group', UNSAFE_className), style: UNSAFE_style, children: [_jsx(FormFieldLabel, { isRequired: props.isRequired, children: label }), _jsx(Stack, { gap: getGapFromDirection(direction), direction: direction, children: children }), _jsx(FormFieldError, { children: errorMessage }), _jsx(FormFieldDescription, { children: description })] }));
+}
+/**
+ * Allows users to select a single item from a visible list.
+ *
+ * See [radio group usage guidelines](https://ui.cimpress.io/components/radio-group/).
+ */
+const _RadioGroup = withStyleProps(forwardRef(RadioGroup), 'RadioGroup');
+export { _RadioGroup as RadioGroup };
+// Make sure that radio buttons are spaced by 16px when stacked horizontally, and 8px otherwise.
+function getGapFromDirection(direction) {
+    if (typeof direction === 'object') {
+        const gap = { xs: direction.xs === 'horizontal' ? 16 : 8 };
+        Object.entries(direction).reduce((acc, curr) => {
+            gap[curr[0]] = curr[1] === 'horizontal' ? 16 : 8;
+            return acc;
+        }, gap);
+        return gap;
+    }
+    return direction === 'horizontal' ? 16 : 8;
+}
+//# sourceMappingURL=radio-group.js.map

package/dist/esm/components/radio/radio-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.js","sourceRoot":"","sources":["../../../../src/components/radio/radio-group.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,UAAU,IAAI,aAAa,EAA8C,MAAM,uBAAuB,CAAC;AAChH,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,oBAAoB,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAC5G,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAoBlD,SAAS,UAAU,CACjB,EACE,KAAK,EACL,WAAW,EACX,KAAK,EAAE,YAAY,EACnB,SAAS,GAAG,UAAU,EACtB,QAAQ,EACR,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACQ,EAClB,GAAiC;IAEjC,OAAO,CACL,MAAC,aAAa,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,aAC3G,KAAC,cAAc,IAAC,UAAU,EAAE,KAAK,CAAC,UAAU,YAAG,KAAK,GAAkB,EACtE,KAAC,KAAK,IAAC,GAAG,EAAE,mBAAmB,CAAC,SAAS,CAAC,EAAE,SAAS,EAAE,SAAS,YAC7D,QAAQ,GACH,EACR,KAAC,cAAc,cAAE,YAAY,GAAkB,EAC/C,KAAC,oBAAoB,cAAE,WAAW,GAAwB,IAC5C,CACjB,CAAC;AACJ,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;AAErC,gGAAgG;AAChG,SAAS,mBAAmB,CAAC,SAAgC;IAC3D,IAAI,OAAO,SAAS,KAAK,QAAQ,EAAE,CAAC;QAClC,MAAM,GAAG,GAAwB,EAAE,EAAE,EAAE,SAAS,CAAC,EAAE,KAAK,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAE/E,MAAM,CAAC,OAAO,CAAC,SAAS,CAA+B,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE;YAC5E,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,KAAK,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;YACjD,OAAO,GAAG,CAAC;QACb,CAAC,EAAE,GAAG,CAAC,CAAC;QAER,OAAO,GAAG,CAAC;IACb,CAAC;IAED,OAAO,SAAS,KAAK,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;AAC7C,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { RadioGroup as RACRadioGroup, type RadioGroupProps as RACRadioGroupProps } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport { Stack } from '../spacing/stack/stack.js';\nimport type { Breakpoint, Responsive, Spacing } from '../spacing/types.js';\nimport type { Direction, CommonProps, FieldProps, WithRequired } from '../types.js';\n\nexport interface RadioGroupProps\n  extends CommonProps,\n    WithRequired<FieldProps<string | null>, 'label'>,\n    Pick<\n      RACRadioGroupProps,\n      'isDisabled' | 'isReadOnly' | 'isRequired' | 'isInvalid' | 'value' | 'onChange' | 'defaultValue' | 'name'\n    > {\n  /** Radio buttons belonging to the group. */\n  children: ReactNode;\n  /**\n   * Determines the direction in which radio buttons will be stacked.\n   * @default 'vertical'\n   */\n  direction?: Responsive<Direction>;\n}\n\nfunction RadioGroup(\n  {\n    label,\n    description,\n    error: errorMessage,\n    direction = 'vertical',\n    children,\n    UNSAFE_className,\n    UNSAFE_style,\n    ...props\n  }: RadioGroupProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    <RACRadioGroup {...props} ref={ref} className={clsx('cim-radio-group', UNSAFE_className)} style={UNSAFE_style}>\n      <FormFieldLabel isRequired={props.isRequired}>{label}</FormFieldLabel>\n      <Stack gap={getGapFromDirection(direction)} direction={direction}>\n        {children}\n      </Stack>\n      <FormFieldError>{errorMessage}</FormFieldError>\n      <FormFieldDescription>{description}</FormFieldDescription>\n    </RACRadioGroup>\n  );\n}\n\n/**\n * Allows users to select a single item from a visible list.\n *\n * See [radio group usage guidelines](https://ui.cimpress.io/components/radio-group/).\n */\nconst _RadioGroup = withStyleProps(forwardRef(RadioGroup), 'RadioGroup');\n\nexport { _RadioGroup as RadioGroup };\n\n// Make sure that radio buttons are spaced by 16px when stacked horizontally, and 8px otherwise.\nfunction getGapFromDirection(direction: Responsive<Direction>): Responsive<Spacing> {\n  if (typeof direction === 'object') {\n    const gap: Responsive<Spacing> = { xs: direction.xs === 'horizontal' ? 16 : 8 };\n\n    (Object.entries(direction) as [Breakpoint, Direction][]).reduce((acc, curr) => {\n      gap[curr[0]] = curr[1] === 'horizontal' ? 16 : 8;\n      return acc;\n    }, gap);\n\n    return gap;\n  }\n\n  return direction === 'horizontal' ? 16 : 8;\n}\n"]}

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

@@ -0,0 +1,14 @@
+import { type RadioProps as RACRadioProps } from 'react-aria-components';
+import type { CommonProps, LabellableProps, StringLikeChildren } from '../types.js';
+export interface RadioProps extends CommonProps, Omit<LabellableProps, 'label'>, Pick<RACRadioProps, 'value' | 'isDisabled' | 'autoFocus'> {
+    /** The label rendered next to the radio. */
+    children?: StringLikeChildren;
+}
+/**
+ * Renders a single option within `RadioGroup`.
+ *
+ * See [radio group usage guidelines](https://ui.cimpress.io/components/radio-group/).
+ */
+declare const _Radio: (props: RadioProps & import("react").RefAttributes<HTMLLabelElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
+export { _Radio as Radio };
+//# sourceMappingURL=radio.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../../../src/components/radio/radio.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAqB,KAAK,UAAU,IAAI,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAG5F,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGpF,MAAM,WAAW,UACf,SAAQ,WAAW,EACjB,IAAI,CAAC,eAAe,EAAE,OAAO,CAAC,EAC9B,IAAI,CAAC,aAAa,EAAE,OAAO,GAAG,YAAY,GAAG,WAAW,CAAC;IAC3D,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,kBAAkB,CAAC;CAC/B;AA8BD;;;;GAIG;AACH,QAAA,MAAM,MAAM,8JAA6C,CAAC;AAE1D,OAAO,EAAE,MAAM,IAAI,KAAK,EAAE,CAAC"}

package/dist/esm/components/radio/radio.js

@@ -0,0 +1,25 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { useEffect } from 'react';
+import { Radio as RACRadio } from 'react-aria-components';
+import { forwardRef } from '../../forward-ref.js';
+import { withStyleProps } from '../../with-style-props.js';
+import { Text } from '../typography/text.js';
+function Radio({ children, UNSAFE_className, UNSAFE_style, ...props }, ref) {
+    const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
+    useEffect(() => {
+        if (!children && !ariaLabel && !ariaLabelledBy) {
+            console.warn('Radio requires one of children / aria-label / aria-labelledby for accessibility');
+        }
+    }, [children, ariaLabel, ariaLabelledBy]);
+    return (_jsxs(RACRadio, { ...props, className: clsx('cim-radio', UNSAFE_className), style: UNSAFE_style, ref: ref, children: [_jsx("div", { className: "cim-radio-toggle-wrapper", children: _jsx("div", { className: "cim-radio-toggle", children: _jsx("div", { className: "cim-radio-toggle-inner" }) }) }), children && (_jsx(Text, { as: "span", variant: "body", children: children }))] }));
+}
+/**
+ * Renders a single option within `RadioGroup`.
+ *
+ * See [radio group usage guidelines](https://ui.cimpress.io/components/radio-group/).
+ */
+const _Radio = withStyleProps(forwardRef(Radio), 'Radio');
+export { _Radio as Radio };
+//# sourceMappingURL=radio.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../../src/components/radio/radio.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,SAAS,EAAqB,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,KAAK,IAAI,QAAQ,EAAoC,MAAM,uBAAuB,CAAC;AAC5F,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAE3D,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAU7C,SAAS,KAAK,CACZ,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAc,EAClE,GAAmC;IAEnC,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,QAAQ,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAC/C,OAAO,CAAC,IAAI,CAAC,iFAAiF,CAAC,CAAC;QAClG,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAE1C,OAAO,CACL,MAAC,QAAQ,OAAK,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,WAAW,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,EAAE,GAAG,aAChG,cAAK,SAAS,EAAC,0BAA0B,YACvC,cAAK,SAAS,EAAC,kBAAkB,YAC/B,cAAK,SAAS,EAAC,wBAAwB,GAAG,GACtC,GACF,EACL,QAAQ,IAAI,CACX,KAAC,IAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,MAAM,YAC3B,QAAQ,GACJ,CACR,IACQ,CACZ,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,MAAM,GAAG,cAAc,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC;AAE1D,OAAO,EAAE,MAAM,IAAI,KAAK,EAAE,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { useEffect, type ForwardedRef } from 'react';\nimport { Radio as RACRadio, type RadioProps as RACRadioProps } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { CommonProps, LabellableProps, StringLikeChildren } from '../types.js';\nimport { Text } from '../typography/text.js';\n\nexport interface RadioProps\n  extends CommonProps,\n    Omit<LabellableProps, 'label'>,\n    Pick<RACRadioProps, 'value' | 'isDisabled' | 'autoFocus'> {\n  /** The label rendered next to the radio. */\n  children?: StringLikeChildren;\n}\n\nfunction Radio(\n  { children, UNSAFE_className, UNSAFE_style, ...props }: RadioProps,\n  ref: ForwardedRef<HTMLLabelElement>,\n) {\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useEffect(() => {\n    if (!children && !ariaLabel && !ariaLabelledBy) {\n      console.warn('Radio requires one of children / aria-label / aria-labelledby for accessibility');\n    }\n  }, [children, ariaLabel, ariaLabelledBy]);\n\n  return (\n    <RACRadio {...props} className={clsx('cim-radio', UNSAFE_className)} style={UNSAFE_style} ref={ref}>\n      <div className=\"cim-radio-toggle-wrapper\">\n        <div className=\"cim-radio-toggle\">\n          <div className=\"cim-radio-toggle-inner\" />\n        </div>\n      </div>\n      {children && (\n        <Text as=\"span\" variant=\"body\">\n          {children}\n        </Text>\n      )}\n    </RACRadio>\n  );\n}\n\n/**\n * Renders a single option within `RadioGroup`.\n *\n * See [radio group usage guidelines](https://ui.cimpress.io/components/radio-group/).\n */\nconst _Radio = withStyleProps(forwardRef(Radio), 'Radio');\n\nexport { _Radio as Radio };\n"]}

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

@@ -0,0 +1,31 @@
+import { type ListBoxProps as RACListBoxProps, type ListBoxItemProps as RACListBoxItemProps, type SelectProps as RACSelectProps } from 'react-aria-components';
+import type { CollectionItem, CollectionProps, CommonProps, FieldProps, Key, StringLikeChildren } from '../types.js';
+export interface SelectProps<T extends CollectionItem = CollectionItem> extends CommonProps, FieldProps<Key>, CollectionProps<T>, Pick<RACSelectProps<T>, 'name' | 'isDisabled' | 'isRequired' | 'isInvalid' | 'selectedKey' | 'defaultSelectedKey' | 'autoComplete' | 'autoFocus' | 'onSelectionChange' | 'placeholder' | 'onFocus' | 'onBlur' | 'onOpenChange'>, Pick<RACListBoxProps<T>, 'onScroll'> {
+}
+/**
+ * Allows users to select one item from a collapsible list.
+ *
+ * See [select usage guidelines](https://ui.cimpress.io/components/select/).
+ */
+declare const _Select: <T extends CollectionItem>(props: SelectProps<T> & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
+export { _Select as Select };
+export interface SelectItemProps extends Pick<RACListBoxItemProps, 'id' | 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {
+    children: StringLikeChildren;
+}
+/** Renders a single list item within `Select`. */
+export declare function SelectItem({ children, ...props }: SelectItemProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace SelectItem {
+    var displayName: string;
+}
+export interface SelectSectionProps<T extends CollectionItem> extends CollectionProps<T> {
+    /** The ID of the section. Has to be unique across all sections and items. */
+    id?: Key;
+    /** The content to display as the section title. */
+    title: string;
+}
+/** Groups list items within `Select` into a section. */
+export declare function SelectSection<T extends CollectionItem>({ title, children, items, ...props }: SelectSectionProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare namespace SelectSection {
+    var displayName: string;
+}
+//# sourceMappingURL=select.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../../src/components/select/select.tsx"],"names":[],"mappings":"AAIA,OAAO,EAKL,KAAK,YAAY,IAAI,eAAe,EAMpC,KAAK,gBAAgB,IAAI,mBAAmB,EAC5C,KAAK,WAAW,IAAI,cAAc,EACnC,MAAM,uBAAuB,CAAC;AAM/B,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGrH,MAAM,WAAW,WAAW,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,CACpE,SAAQ,WAAW,EACjB,UAAU,CAAC,GAAG,CAAC,EACf,eAAe,CAAC,CAAC,CAAC,EAClB,IAAI,CACF,cAAc,CAAC,CAAC,CAAC,EACf,MAAM,GACN,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,aAAa,GACb,oBAAoB,GACpB,cAAc,GACd,WAAW,GACX,mBAAmB,GACnB,aAAa,GACb,SAAS,GACT,QAAQ,GACR,cAAc,CACjB,EACD,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC;CAAG;AA6C3C;;;;GAIG;AACH,QAAA,MAAM,OAAO,GAhDG,CAAC,SAAS,cAAc,+JAgDoB,CAAC;AAE7D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,CAAC;AAE7B,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,mBAAmB,EAAE,IAAI,GAAG,YAAY,GAAG,cAAc,GAAG,YAAY,CAAC;IACtF,QAAQ,EAAE,kBAAkB,CAAC;CAC9B;AAED,kDAAkD;AAClD,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,2CAiBjE;yBAjBe,UAAU;;;AAqB1B,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,cAAc,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IACtF,6EAA6E;IAC7E,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wDAAwD;AACxD,wBAAgB,aAAa,CAAC,CAAC,SAAS,cAAc,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,CAAC,CAAC,CAAC,2CAelH;yBAfe,aAAa"}

package/dist/esm/components/select/select.js

@@ -0,0 +1,45 @@
+'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 { Button as RACButton, Collection as RACCollection, Header as RACHeader, ListBox as RACListBox, ListBoxItem as RACListBoxItem, ListBoxSection as RACListBoxSection, Select as RACSelect, SelectValue as RACSelectValue, Text as RACText, } from 'react-aria-components';
+import { forwardRef } from '../../forward-ref.js';
+import { IconCheckmark, IconChevronDownFill } from '../../icons/index.js';
+import { withStyleProps } from '../../with-style-props.js';
+import { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';
+import { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';
+import { textStyle } from '../typography/utils.js';
+function Select({ children, items, label, description, error, UNSAFE_className, UNSAFE_style, onScroll, ...props }, ref) {
+    const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
+    useEffect(() => {
+        if (!label && !ariaLabel && !ariaLabelledBy) {
+            console.warn('Select requires one of label / aria-label / aria-labelledby for accessibility');
+        }
+    }, [label, ariaLabel, ariaLabelledBy]);
+    if (items != null && typeof children !== 'function') {
+        console.warn('`Select` requires `children` to be a function when using `items` prop');
+    }
+    return (_jsxs(RACSelect, { ...props, ref: ref, className: clsx('cim-select', UNSAFE_className), style: UNSAFE_style, children: [_jsx(FormFieldLabel, { isRequired: props.isRequired, isDisabled: props.isDisabled, children: label }), _jsxs(RACButton, { className: "cim-select-button", children: [_jsx(RACSelectValue, { className: (values) => clsx(values.defaultClassName, textStyle({ variant: 'medium', alignment: 'start' })), children: ({ selectedText }) => selectedText }), _jsx(IconChevronDownFill, {})] }), _jsx(FormFieldError, { children: error }), _jsx(FormFieldDescription, { children: description }), _jsx(CollapsibleList, { offset: 5, maxHeight: 315, children: _jsx(RACListBox, { className: "cim-select-listbox", onScroll: onScroll, items: items, children: children }) })] }));
+}
+/**
+ * Allows users to select one item from a collapsible list.
+ *
+ * See [select usage guidelines](https://ui.cimpress.io/components/select/).
+ */
+const _Select = withStyleProps(forwardRef(Select), 'Select');
+export { _Select as Select };
+/** Renders a single list item within `Select`. */
+export function SelectItem({ children, ...props }) {
+    const textValue = typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');
+    return (_jsx(RACListBoxItem, { ...props, className: "cim-select-item", textValue: textValue, children: ({ isDisabled }) => (_jsxs(_Fragment, { children: [_jsx(IconCheckmark, {}), _jsx(RACText, { slot: "label", className: textStyle({ variant: 'body', tone: isDisabled ? 'muted' : 'base' }), children: children })] })) }));
+}
+SelectItem.displayName = 'SelectItem';
+/** Groups list items within `Select` into a section. */
+export function SelectSection({ title, children, items, ...props }) {
+    if (items != null && typeof children !== 'function') {
+        console.warn('`SelectSection` requires `children` to be a function when using `items` prop');
+    }
+    return (_jsxs(RACListBoxSection, { ...props, className: "cim-select-section", children: [_jsx(RACHeader, { className: clsx('cim-select-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' })), children: title }), _jsx(RACCollection, { items: items, children: children })] }));
+}
+SelectSection.displayName = 'SelectSection';
+//# sourceMappingURL=select.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../../src/components/select/select.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { useEffect, type ForwardedRef } from 'react';\nimport {\n  Button as RACButton,\n  Collection as RACCollection,\n  Header as RACHeader,\n  ListBox as RACListBox,\n  type ListBoxProps as RACListBoxProps,\n  ListBoxItem as RACListBoxItem,\n  ListBoxSection as RACListBoxSection,\n  Select as RACSelect,\n  SelectValue as RACSelectValue,\n  Text as RACText,\n  type ListBoxItemProps as RACListBoxItemProps,\n  type SelectProps as RACSelectProps,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconCheckmark, IconChevronDownFill } from '../../icons/index.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport type { CollectionItem, CollectionProps, CommonProps, FieldProps, Key, StringLikeChildren } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface SelectProps<T extends CollectionItem = CollectionItem>\n  extends CommonProps,\n    FieldProps<Key>,\n    CollectionProps<T>,\n    Pick<\n      RACSelectProps<T>,\n      | 'name'\n      | 'isDisabled'\n      | 'isRequired'\n      | 'isInvalid'\n      | 'selectedKey'\n      | 'defaultSelectedKey'\n      | 'autoComplete'\n      | 'autoFocus'\n      | 'onSelectionChange'\n      | 'placeholder'\n      | 'onFocus'\n      | 'onBlur'\n      | 'onOpenChange'\n    >,\n    Pick<RACListBoxProps<T>, 'onScroll'> {}\n\nfunction Select<T extends CollectionItem>(\n  { children, items, label, description, error, UNSAFE_className, UNSAFE_style, onScroll, ...props }: SelectProps<T>,\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('Select 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('`Select` requires `children` to be a function when using `items` prop');\n  }\n\n  return (\n    <RACSelect {...props} ref={ref} className={clsx('cim-select', UNSAFE_className)} style={UNSAFE_style}>\n      <FormFieldLabel isRequired={props.isRequired} isDisabled={props.isDisabled}>\n        {label}\n      </FormFieldLabel>\n      <RACButton className=\"cim-select-button\">\n        <RACSelectValue\n          className={(values) => clsx(values.defaultClassName, textStyle({ variant: 'medium', alignment: 'start' }))}\n        >\n          {({ selectedText }) => selectedText}\n        </RACSelectValue>\n        <IconChevronDownFill />\n      </RACButton>\n      <FormFieldError>{error}</FormFieldError>\n      <FormFieldDescription>{description}</FormFieldDescription>\n      <CollapsibleList\n        offset={5} // 1px border + 4px actual offset\n        maxHeight={315}\n      >\n        <RACListBox className=\"cim-select-listbox\" onScroll={onScroll} items={items}>\n          {children}\n        </RACListBox>\n      </CollapsibleList>\n    </RACSelect>\n  );\n}\n\n/**\n * Allows users to select one item from a collapsible list.\n *\n * See [select usage guidelines](https://ui.cimpress.io/components/select/).\n */\nconst _Select = withStyleProps(forwardRef(Select), 'Select');\n\nexport { _Select as Select };\n\nexport interface SelectItemProps\n  extends Pick<RACListBoxItemProps, 'id' | 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {\n  children: StringLikeChildren;\n}\n\n/** Renders a single list item within `Select`. */\nexport function SelectItem({ children, ...props }: SelectItemProps) {\n  const textValue =\n    typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');\n\n  return (\n    <RACListBoxItem {...props} className=\"cim-select-item\" textValue={textValue}>\n      {({ isDisabled }) => (\n        <>\n          <IconCheckmark />\n\n          <RACText slot=\"label\" className={textStyle({ variant: 'body', tone: isDisabled ? 'muted' : 'base' })}>\n            {children}\n          </RACText>\n        </>\n      )}\n    </RACListBoxItem>\n  );\n}\n\nSelectItem.displayName = 'SelectItem';\n\nexport interface SelectSectionProps<T extends 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 `Select` into a section. */\nexport function SelectSection<T extends CollectionItem>({ title, children, items, ...props }: SelectSectionProps<T>) {\n  if (items != null && typeof children !== 'function') {\n    console.warn('`SelectSection` requires `children` to be a function when using `items` prop');\n  }\n\n  return (\n    <RACListBoxSection {...props} className=\"cim-select-section\">\n      <RACHeader\n        className={clsx('cim-select-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' }))}\n      >\n        {title}\n      </RACHeader>\n      <RACCollection items={items}>{children}</RACCollection>\n    </RACListBoxSection>\n  );\n}\n\nSelectSection.displayName = 'SelectSection';\n"]}

package/dist/esm/components/spacing/box/box.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+import type { CommonProps } from '../../types.js';
+export interface BoxProps extends CommonProps {
+    /** The contents of the box. */
+    children: ReactNode;
+}
+/** A primitive layout component that exposes style props. */
+declare const _Box: (props: BoxProps & import("react").RefAttributes<HTMLDivElement> & import("../../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
+export { _Box as Box };
+//# sourceMappingURL=box.d.ts.map

package/dist/esm/components/spacing/box/box.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"box.d.ts","sourceRoot":"","sources":["../../../../../src/components/spacing/box/box.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,MAAM,WAAW,QAAS,SAAQ,WAAW;IAC3C,+BAA+B;IAC/B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAUD,6DAA6D;AAC7D,QAAA,MAAM,IAAI,6JAAyC,CAAC;AAEpD,OAAO,EAAE,IAAI,IAAI,GAAG,EAAE,CAAC"}

package/dist/esm/components/spacing/box/box.js

@@ -0,0 +1,11 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from '../../../forward-ref.js';
+import { withStyleProps } from '../../../with-style-props.js';
+function Box({ children, UNSAFE_className, UNSAFE_style, ...props }, ref) {
+    return (_jsx("div", { ...props, ref: ref, className: UNSAFE_className, style: UNSAFE_style, role: "presentation", children: children }));
+}
+/** A primitive layout component that exposes style props. */
+const _Box = withStyleProps(forwardRef(Box), 'Box');
+export { _Box as Box };
+//# sourceMappingURL=box.js.map

package/dist/esm/components/spacing/box/box.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"box.js","sourceRoot":"","sources":["../../../../../src/components/spacing/box/box.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAQ9D,SAAS,GAAG,CAAC,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAY,EAAE,GAAiC;IAC9G,OAAO,CACL,iBAAS,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,gBAAgB,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAC,cAAc,YAC5F,QAAQ,GACL,CACP,CAAC;AACJ,CAAC;AAED,6DAA6D;AAC7D,MAAM,IAAI,GAAG,cAAc,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,CAAC;AAEpD,OAAO,EAAE,IAAI,IAAI,GAAG,EAAE,CAAC","sourcesContent":["'use client';\n\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from '../../../forward-ref.js';\nimport { withStyleProps } from '../../../with-style-props.js';\nimport type { CommonProps } from '../../types.js';\n\nexport interface BoxProps extends CommonProps {\n  /** The contents of the box. */\n  children: ReactNode;\n}\n\nfunction Box({ children, UNSAFE_className, UNSAFE_style, ...props }: BoxProps, ref: ForwardedRef<HTMLDivElement>) {\n  return (\n    <div {...props} ref={ref} className={UNSAFE_className} style={UNSAFE_style} role=\"presentation\">\n      {children}\n    </div>\n  );\n}\n\n/** A primitive layout component that exposes style props. */\nconst _Box = withStyleProps(forwardRef(Box), 'Box');\n\nexport { _Box as Box };\n"]}

package/dist/esm/components/spacing/stack/stack.d.ts

@@ -0,0 +1,35 @@
+import type { ReactNode } from 'react';
+import type { Direction, CommonProps } from '../../types.js';
+import { type Responsive, type Spacing } from '../types.js';
+export type Alignment = 'start' | 'center' | 'end' | 'stretch';
+export type Justify = 'start' | 'center' | 'end' | 'space-around' | 'space-between' | 'space-evenly';
+export interface StackProps extends CommonProps {
+    /** The items to stack. */
+    children: ReactNode;
+    /**
+     * Determines the stacking direction (ie. which direction is the primary axis)
+     * @default 'vertical'
+     */
+    direction?: Responsive<Direction>;
+    /** The amount of space between items. */
+    gap: Responsive<Spacing>;
+    /**
+     * Determines how items are distributed along the primary axis.
+     * @default 'start'
+     */
+    justify?: Responsive<Justify>;
+    /**
+     * Determines how each item is aligned along the cross axis.
+     * @default 'stretch'
+     */
+    align?: Responsive<Alignment>;
+    /**
+     * Determines whether items will wrap to a new line if stack size is too small.
+     * @default true
+     */
+    wrap?: Responsive<boolean>;
+}
+/** Stacks its children with a specified amount of space between them. */
+declare const _Stack: (props: StackProps & import("react").RefAttributes<HTMLDivElement> & import("../../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
+export { _Stack as Stack };
+//# sourceMappingURL=stack.d.ts.map

package/dist/esm/components/spacing/stack/stack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stack.d.ts","sourceRoot":"","sources":["../../../../../src/components/spacing/stack/stack.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAgB,MAAM,OAAO,CAAC;AAGrD,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7D,OAAO,EAA0B,KAAK,UAAU,EAAE,KAAK,OAAO,EAAE,MAAM,aAAa,CAAC;AAEpF,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;AAC/D,MAAM,MAAM,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,cAAc,GAAG,eAAe,GAAG,cAAc,CAAC;AAErG,MAAM,WAAW,UAAW,SAAQ,WAAW;IAC7C,0BAA0B;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;IAClC,yCAAyC;IACzC,GAAG,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAC9B;;;OAGG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;IAC9B;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;CAC5B;AA0CD,yEAAyE;AACzE,QAAA,MAAM,MAAM,+JAA6C,CAAC;AAE1D,OAAO,EAAE,MAAM,IAAI,KAAK,EAAE,CAAC"}

package/dist/esm/components/spacing/stack/stack.js

@@ -0,0 +1,25 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { forwardRef } from '../../../forward-ref.js';
+import { withStyleProps } from '../../../with-style-props.js';
+import { getResponsiveVariables } from '../types.js';
+function Stack({ children, direction: responsiveDirection, gap: responsiveGap, justify: responsiveJustify, align: responsiveAlign, wrap: responsiveWrap, UNSAFE_className, UNSAFE_style, ...props }, ref) {
+    const gap = getResponsiveVariables('stack-gap', 'space', responsiveGap, 0);
+    const direction = getResponsiveVariables('stack-fd', 'stack-direction', responsiveDirection, 'vertical');
+    const justify = getResponsiveVariables('stack-jc', 'stack-justify', responsiveJustify, 'start');
+    const align = getResponsiveVariables('stack-ai', 'stack-align', responsiveAlign, 'stretch');
+    const wrap = getResponsiveVariables('stack-fw', 'stack-wrap', responsiveWrap, true);
+    return (_jsx("div", { ...props, ref: ref, className: clsx('cim-stack', UNSAFE_className), style: {
+            ...UNSAFE_style,
+            ...gap,
+            ...direction,
+            ...justify,
+            ...align,
+            ...wrap,
+        }, role: "presentation", children: children }));
+}
+/** Stacks its children with a specified amount of space between them. */
+const _Stack = withStyleProps(forwardRef(Stack), 'Stack');
+export { _Stack as Stack };
+//# sourceMappingURL=stack.js.map

package/dist/esm/components/spacing/stack/stack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stack.js","sourceRoot":"","sources":["../../../../../src/components/spacing/stack/stack.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9D,OAAO,EAAE,sBAAsB,EAAiC,MAAM,aAAa,CAAC;AAgCpF,SAAS,KAAK,CACZ,EACE,QAAQ,EACR,SAAS,EAAE,mBAAmB,EAC9B,GAAG,EAAE,aAAa,EAClB,OAAO,EAAE,iBAAiB,EAC1B,KAAK,EAAE,eAAe,EACtB,IAAI,EAAE,cAAc,EACpB,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACG,EACb,GAAiC;IAEjC,MAAM,GAAG,GAAG,sBAAsB,CAAC,WAAW,EAAE,OAAO,EAAE,aAAa,EAAE,CAAC,CAAC,CAAC;IAC3E,MAAM,SAAS,GAAG,sBAAsB,CAAC,UAAU,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,UAAU,CAAC,CAAC;IACzG,MAAM,OAAO,GAAG,sBAAsB,CAAC,UAAU,EAAE,eAAe,EAAE,iBAAiB,EAAE,OAAO,CAAC,CAAC;IAChG,MAAM,KAAK,GAAG,sBAAsB,CAAC,UAAU,EAAE,aAAa,EAAE,eAAe,EAAE,SAAS,CAAC,CAAC;IAC5F,MAAM,IAAI,GAAG,sBAAsB,CAAC,UAAU,EAAE,YAAY,EAAE,cAAc,EAAE,IAAI,CAAC,CAAC;IAEpF,OAAO,CACL,iBACM,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,WAAW,EAAE,gBAAgB,CAAC,EAC9C,KAAK,EAAE;YACL,GAAG,YAAY;YACf,GAAG,GAAG;YACN,GAAG,SAAS;YACZ,GAAG,OAAO;YACV,GAAG,KAAK;YACR,GAAG,IAAI;SACR,EACD,IAAI,EAAC,cAAc,YAElB,QAAQ,GACL,CACP,CAAC;AACJ,CAAC;AAED,yEAAyE;AACzE,MAAM,MAAM,GAAG,cAAc,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC;AAE1D,OAAO,EAAE,MAAM,IAAI,KAAK,EAAE,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ReactNode, ForwardedRef } from 'react';\nimport { forwardRef } from '../../../forward-ref.js';\nimport { withStyleProps } from '../../../with-style-props.js';\nimport type { Direction, CommonProps } from '../../types.js';\nimport { getResponsiveVariables, type Responsive, type Spacing } from '../types.js';\n\nexport type Alignment = 'start' | 'center' | 'end' | 'stretch';\nexport type Justify = 'start' | 'center' | 'end' | 'space-around' | 'space-between' | 'space-evenly';\n\nexport interface StackProps extends CommonProps {\n  /** The items to stack. */\n  children: ReactNode;\n  /**\n   * Determines the stacking direction (ie. which direction is the primary axis)\n   * @default 'vertical'\n   */\n  direction?: Responsive<Direction>;\n  /** The amount of space between items. */\n  gap: Responsive<Spacing>;\n  /**\n   * Determines how items are distributed along the primary axis.\n   * @default 'start'\n   */\n  justify?: Responsive<Justify>;\n  /**\n   * Determines how each item is aligned along the cross axis.\n   * @default 'stretch'\n   */\n  align?: Responsive<Alignment>;\n  /**\n   * Determines whether items will wrap to a new line if stack size is too small.\n   * @default true\n   */\n  wrap?: Responsive<boolean>;\n}\n\nfunction Stack(\n  {\n    children,\n    direction: responsiveDirection,\n    gap: responsiveGap,\n    justify: responsiveJustify,\n    align: responsiveAlign,\n    wrap: responsiveWrap,\n    UNSAFE_className,\n    UNSAFE_style,\n    ...props\n  }: StackProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const gap = getResponsiveVariables('stack-gap', 'space', responsiveGap, 0);\n  const direction = getResponsiveVariables('stack-fd', 'stack-direction', responsiveDirection, 'vertical');\n  const justify = getResponsiveVariables('stack-jc', 'stack-justify', responsiveJustify, 'start');\n  const align = getResponsiveVariables('stack-ai', 'stack-align', responsiveAlign, 'stretch');\n  const wrap = getResponsiveVariables('stack-fw', 'stack-wrap', responsiveWrap, true);\n\n  return (\n    <div\n      {...props}\n      ref={ref}\n      className={clsx('cim-stack', UNSAFE_className)}\n      style={{\n        ...UNSAFE_style,\n        ...gap,\n        ...direction,\n        ...justify,\n        ...align,\n        ...wrap,\n      }}\n      role=\"presentation\"\n    >\n      {children}\n    </div>\n  );\n}\n\n/** Stacks its children with a specified amount of space between them. */\nconst _Stack = withStyleProps(forwardRef(Stack), 'Stack');\n\nexport { _Stack as Stack };\n"]}

package/dist/esm/components/spacing/types.d.ts

@@ -0,0 +1,32 @@
+/** Represents a valid spacing amount within the design system. */
+export type Spacing = 0 | 2 | 4 | 8 | 12 | 16 | 24 | 32 | 40 | 48 | 64 | 96;
+/** Represents a screen size breakpoint for responsive design. */
+export type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/** Represents a primitive value that can change based on screen size. */
+export type Responsive<T extends string | number | boolean> = T | Partial<Record<Breakpoint, T>>;
+/**
+ * Given params like so:
+ *
+ * ```ts
+ * (
+ *   'box-ml',
+ *   'space',
+ *   {
+ *     sm: 4,
+ *     lg: 6,
+ *   }
+ * )
+ * ```
+ *
+ * Creates an object like so:
+ *
+ * ```ts
+ * {
+ *   '--cim-box-ml-sm': 'var(--cim-space-4)',
+ *   '--cim-box-ml-lg': 'var(--cim-space-6)',
+ * }
+ * ```
+ *
+ */
+export declare function getResponsiveVariables<T extends string | number | boolean>(targetTokenGroup: string, sourceTokenGroup: string, data?: Responsive<T>, defaultValue?: T): Record<string, string> | undefined;
+//# sourceMappingURL=types.d.ts.map

package/dist/esm/components/spacing/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/spacing/types.ts"],"names":[],"mappings":"AAAA,kEAAkE;AAClE,MAAM,MAAM,OAAO,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAE5E,iEAAiE;AACjE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE1D,yEAAyE;AACzE,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG,OAAO,IAAI,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,CAAC;AAEjG;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,sBAAsB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG,OAAO,EACxE,gBAAgB,EAAE,MAAM,EACxB,gBAAgB,EAAE,MAAM,EACxB,IAAI,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,EACpB,YAAY,CAAC,EAAE,CAAC,GACf,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,SAAS,CAqBpC"}