@cimpress-ui/react 0.3.0 → 1.0.0

package/dist/commonjs/components/combo-box/combo-box.js

@@ -13,21 +13,30 @@ const react_1 = require("react");
 const react_aria_components_1 = require("react-aria-components");
 const forward_ref_js_1 = require("../../forward-ref.js");
 const index_js_1 = require("../../icons/index.js");
+const is_production_js_1 = require("../../utils/is-production.js");
+const use_production_warning_js_1 = require("../../utils/use-production-warning.js");
 const with_style_props_js_1 = require("../../with-style-props.js");
 const collapsible_list_js_1 = require("../internal/collapsible-list/collapsible-list.js");
 const form_field_js_1 = require("../internal/form-field/form-field.js");
 const utils_js_1 = require("../typography/utils.js");
-function ComboBox({ label, description, error, items, children, placeholder, UNSAFE_className, UNSAFE_style, isReadOnly, onScroll, ...props }, ref) {
+const VIRTUAL_LAYOUT_OPTIONS = {
+    rowHeight: 40,
+    headingHeight: 32,
+    padding: 0,
+    gap: 0,
+};
+function ComboBox({ label, description, error, items, children, placeholder, UNSAFE_className, UNSAFE_style, isReadOnly, onScroll, isVirtualized = false, ...props }, ref) {
     const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
-    (0, react_1.useEffect)(() => {
+    (0, use_production_warning_js_1.useProductionWarning)(() => {
         if (!label && !ariaLabel && !ariaLabelledBy) {
             console.warn('ComboBox requires one of label / aria-label / aria-labelledby for accessibility');
         }
     }, [label, ariaLabel, ariaLabelledBy]);
-    if (items != null && typeof children !== 'function') {
+    if (!(0, is_production_js_1.isProduction)() && items != null && typeof children !== 'function') {
         console.warn('`ComboBox` requires `children` to be a function when using `items` prop');
     }
-    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.ComboBox, { ...props, ref: ref, className: (0, clsx_1.default)('cim-combo-box', UNSAFE_className), style: UNSAFE_style, menuTrigger: "focus", isReadOnly: isReadOnly, "data-readonly": isReadOnly ? true : undefined, children: [(0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldLabel, { isRequired: props.isRequired, isDisabled: props.isDisabled, children: label }), (0, jsx_runtime_1.jsxs)(react_aria_components_1.Group, { className: "cim-combo-box-input-group", children: [(0, jsx_runtime_1.jsx)(ComboBoxInput, { isReadOnly: isReadOnly, placeholder: placeholder }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Button, { className: "cim-combo-box-button", children: (0, jsx_runtime_1.jsx)(index_js_1.IconChevronDown, {}) })] }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldError, { children: error }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldDescription, { children: description }), (0, jsx_runtime_1.jsx)(collapsible_list_js_1.CollapsibleList, { offset: 5, maxHeight: 315, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.ListBox, { className: "cim-combo-box-listbox", onScroll: onScroll, items: items, children: children }) })] }));
+    const listBox = ((0, jsx_runtime_1.jsx)(react_aria_components_1.ListBox, { className: "cim-combo-box-listbox", onScroll: onScroll, items: items, children: children }));
+    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.ComboBox, { ...props, ref: ref, className: (0, clsx_1.default)('cim-combo-box', UNSAFE_className), style: UNSAFE_style, menuTrigger: "focus", isReadOnly: isReadOnly, "data-readonly": isReadOnly ? true : undefined, children: [(0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldLabel, { isRequired: props.isRequired, isDisabled: props.isDisabled, children: label }), (0, jsx_runtime_1.jsxs)(react_aria_components_1.Group, { className: "cim-combo-box-input-group", children: [(0, jsx_runtime_1.jsx)(ComboBoxInput, { isReadOnly: isReadOnly, placeholder: placeholder }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Button, { className: "cim-combo-box-button", children: (0, jsx_runtime_1.jsx)(index_js_1.IconChevronDown, {}) })] }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldError, { children: error }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldDescription, { children: description }), (0, jsx_runtime_1.jsx)(collapsible_list_js_1.CollapsibleList, { offset: 5, maxHeight: 315, children: isVirtualized ? ((0, jsx_runtime_1.jsx)(react_aria_components_1.Virtualizer, { layout: react_aria_components_1.ListLayout, layoutOptions: VIRTUAL_LAYOUT_OPTIONS, children: listBox })) : (listBox) })] }));
 }
 /**
  * Allows users to filter a collapsible list and select one item from it.
@@ -38,7 +47,7 @@ const _ComboBox = (0, with_style_props_js_1.withStyleProps)((0, forward_ref_js_1
 exports.ComboBox = _ComboBox;
 function ComboBoxInput({ isReadOnly, placeholder, }) {
     const comboBoxState = (0, react_1.useContext)(react_aria_components_1.ComboBoxStateContext);
-    return ((0, jsx_runtime_1.jsx)(react_aria_components_1.Input, { className: (0, clsx_1.default)('cim-combo-box-input', (0, utils_js_1.textStyle)({ variant: 'medium' })), 
+    return ((0, jsx_runtime_1.jsx)(react_aria_components_1.Input, { className: (0, clsx_1.default)('cim-combo-box-input', (0, utils_js_1.textStyle)({ variant: 'body' })), 
         // Ensure the popover opens when the input is clicked.
         // By default, React Aria only opens the popover when the input is focused.
         onClick: () => !isReadOnly && comboBoxState.open(), placeholder: placeholder }));
@@ -51,7 +60,7 @@ function ComboBoxItem({ children, ...props }) {
 ComboBoxItem.displayName = 'ComboBoxItem';
 /** Groups list items within `ComboBox` into a section. */
 function ComboBoxSection({ title, children, items, ...props }) {
-    if (items != null && typeof children !== 'function') {
+    if (!(0, is_production_js_1.isProduction)() && items != null && typeof children !== 'function') {
         console.warn('`ComboBoxSection` requires `children` to be a function when using `items` prop');
     }
     return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.ListBoxSection, { ...props, className: "cim-combo-box-section", children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.Header, { className: (0, clsx_1.default)('cim-combo-box-section-header', (0, utils_js_1.textStyle)({ variant: 'small-semibold', tone: 'subtle' })), children: title }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Collection, { items: items, children: children })] }));

package/dist/commonjs/components/combo-box/combo-box.js.map

@@ -1 +1 @@
-{"version":3,"file":"combo-box.js","sourceRoot":"","sources":["../../../../src/components/combo-box/combo-box.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { useContext, useEffect, type ForwardedRef } from 'react';\nimport {\n  Button as RACButton,\n  Collection as RACCollection,\n  ComboBox as RACComboBox,\n  ComboBoxStateContext as RACComboBoxStateContext,\n  Group as RACGroup,\n  Header as RACHeader,\n  Input as RACInput,\n  ListBox as RACListBox,\n  type ListBoxProps as RACListBoxProps,\n  ListBoxItem as RACListBoxItem,\n  ListBoxSection as RACListBoxSection,\n  Text as RACText,\n  type ComboBoxProps as RACComboBoxProps,\n  type ListBoxItemProps as RACListBoxItemProps,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconCheck, IconChevronDown } 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 {\n  CollectionItem,\n  CollectionProps,\n  CommonProps,\n  FieldWithPlaceholderProps,\n  Key,\n  StringLikeChildren,\n} from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\n/** Represents the state of the `ComboBox` component for validation purposes. */\nexport interface ComboBoxValidationValue {\n  /** The selected key in the ComboBox. */\n  selectedKey: Key | null;\n  /** The value of the ComboBox input. */\n  inputValue: string;\n}\n\nexport interface ComboBoxProps<T extends CollectionItem = CollectionItem>\n  extends CommonProps,\n    FieldWithPlaceholderProps<ComboBoxValidationValue>,\n    CollectionProps<T>,\n    Pick<\n      RACComboBoxProps<T>,\n      | 'name'\n      | 'isDisabled'\n      | 'isRequired'\n      | 'isInvalid'\n      | 'isReadOnly'\n      | 'selectedKey'\n      | 'defaultSelectedKey'\n      | 'inputValue'\n      | 'defaultInputValue'\n      | 'autoFocus'\n      | 'onSelectionChange'\n      | 'onInputChange'\n      | 'onFocus'\n      | 'onBlur'\n      | 'onOpenChange'\n    >,\n    Pick<RACListBoxProps<T>, 'onScroll'> {}\n\nfunction ComboBox<T extends CollectionItem>(\n  {\n    label,\n    description,\n    error,\n    items,\n    children,\n    placeholder,\n    UNSAFE_className,\n    UNSAFE_style,\n    isReadOnly,\n    onScroll,\n    ...props\n  }: ComboBoxProps<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('ComboBox 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('`ComboBox` requires `children` to be a function when using `items` prop');\n  }\n\n  return (\n    <RACComboBox\n      {...props}\n      ref={ref}\n      className={clsx('cim-combo-box', UNSAFE_className)}\n      style={UNSAFE_style}\n      menuTrigger=\"focus\"\n      isReadOnly={isReadOnly}\n      data-readonly={isReadOnly ? true : undefined}\n    >\n      <FormFieldLabel isRequired={props.isRequired} isDisabled={props.isDisabled}>\n        {label}\n      </FormFieldLabel>\n      <RACGroup className=\"cim-combo-box-input-group\">\n        <ComboBoxInput isReadOnly={isReadOnly} placeholder={placeholder} />\n        <RACButton className=\"cim-combo-box-button\">\n          <IconChevronDown />\n        </RACButton>\n      </RACGroup>\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-combo-box-listbox\" onScroll={onScroll} items={items}>\n          {children}\n        </RACListBox>\n      </CollapsibleList>\n    </RACComboBox>\n  );\n}\n\n/**\n * Allows users to filter a collapsible list and select one item from it.\n *\n * See [combo box usage guidelines](https://ui.cimpress.com/components/combo-box)\n */\nconst _ComboBox = withStyleProps(forwardRef(ComboBox), 'ComboBox');\n\nexport { _ComboBox as ComboBox };\n\nfunction ComboBoxInput({\n  isReadOnly,\n  placeholder,\n}: {\n  isReadOnly: boolean | undefined;\n  placeholder: string | undefined;\n}) {\n  const comboBoxState = useContext(RACComboBoxStateContext);\n\n  return (\n    <RACInput\n      className={clsx('cim-combo-box-input', textStyle({ variant: 'medium' }))}\n      // Ensure the popover opens when the input is clicked.\n      // By default, React Aria only opens the popover when the input is focused.\n      onClick={() => !isReadOnly && comboBoxState!.open()}\n      placeholder={placeholder}\n    />\n  );\n}\n\nexport interface ComboBoxItemProps<T extends CollectionItem>\n  extends Pick<RACListBoxItemProps<T>, 'id' | 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {\n  children: StringLikeChildren;\n}\n\n/** Renders a single list item within `ComboBox`. */\nexport function ComboBoxItem<T extends CollectionItem>({ children, ...props }: ComboBoxItemProps<T>) {\n  const textValue =\n    typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');\n\n  return (\n    <RACListBoxItem {...props} className=\"cim-combo-box-item\" textValue={textValue}>\n      {({ isDisabled }) => (\n        <>\n          <IconCheck />\n\n          <RACText slot=\"label\" className={textStyle({ variant: 'body', tone: isDisabled ? 'muted' : 'base' })}>\n            {children}\n          </RACText>\n        </>\n      )}\n    </RACListBoxItem>\n  );\n}\n\nComboBoxItem.displayName = 'ComboBoxItem';\n\nexport interface ComboBoxSectionProps<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 `ComboBox` into a section. */\nexport function ComboBoxSection<T extends CollectionItem>({\n  title,\n  children,\n  items,\n  ...props\n}: ComboBoxSectionProps<T>) {\n  if (items != null && typeof children !== 'function') {\n    console.warn('`ComboBoxSection` requires `children` to be a function when using `items` prop');\n  }\n\n  return (\n    <RACListBoxSection {...props} className=\"cim-combo-box-section\">\n      <RACHeader\n        className={clsx('cim-combo-box-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' }))}\n      >\n        {title}\n      </RACHeader>\n      <RACCollection items={items}>{children}</RACCollection>\n    </RACListBoxSection>\n  );\n}\n\nComboBoxSection.displayName = 'ComboBoxSection';\n"]}
+{"version":3,"file":"combo-box.js","sourceRoot":"","sources":["../../../../src/components/combo-box/combo-box.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { useContext, type ForwardedRef } from 'react';\nimport {\n  Button as RACButton,\n  Collection as RACCollection,\n  ComboBox as RACComboBox,\n  ComboBoxStateContext as RACComboBoxStateContext,\n  Group as RACGroup,\n  Header as RACHeader,\n  Input as RACInput,\n  ListBox as RACListBox,\n  type ListBoxProps as RACListBoxProps,\n  ListBoxItem as RACListBoxItem,\n  ListBoxSection as RACListBoxSection,\n  ListLayout as RACListLayout,\n  type ListLayoutOptions as RACListLayoutOptions,\n  Text as RACText,\n  type ComboBoxProps as RACComboBoxProps,\n  type ListBoxItemProps as RACListBoxItemProps,\n  Virtualizer as RACVirtualizer,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconCheck, IconChevronDown } from '../../icons/index.js';\nimport { isProduction } from '../../utils/is-production.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.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 {\n  CollectionItem,\n  CollectionProps,\n  CommonProps,\n  FieldWithPlaceholderProps,\n  Key,\n  StringLikeChildren,\n} from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nconst VIRTUAL_LAYOUT_OPTIONS: RACListLayoutOptions = {\n  rowHeight: 40,\n  headingHeight: 32,\n  padding: 0,\n  gap: 0,\n};\n\n/** Represents the state of the `ComboBox` component for validation purposes. */\nexport interface ComboBoxValidationValue {\n  /** The selected key in the ComboBox. */\n  selectedKey: Key | null;\n  /** The value of the ComboBox input. */\n  inputValue: string;\n}\n\nexport interface ComboBoxProps<T extends CollectionItem = CollectionItem>\n  extends CommonProps,\n    FieldWithPlaceholderProps<ComboBoxValidationValue>,\n    CollectionProps<T>,\n    Pick<\n      RACComboBoxProps<T>,\n      | 'isDisabled'\n      | 'isRequired'\n      | 'isInvalid'\n      | 'isReadOnly'\n      | 'selectedKey'\n      | 'defaultSelectedKey'\n      | 'inputValue'\n      | 'defaultInputValue'\n      | 'autoFocus'\n      | 'onSelectionChange'\n      | 'onInputChange'\n      | 'onFocus'\n      | 'onBlur'\n      | 'onOpenChange'\n    >,\n    Pick<RACListBoxProps<T>, 'onScroll'> {\n  /**\n   * Whether the list of options should be virtualized. Use this as a performance optimization for large lists.\n   * @default false\n   */\n  isVirtualized?: boolean;\n}\n\nfunction ComboBox<T extends CollectionItem>(\n  {\n    label,\n    description,\n    error,\n    items,\n    children,\n    placeholder,\n    UNSAFE_className,\n    UNSAFE_style,\n    isReadOnly,\n    onScroll,\n    isVirtualized = false,\n    ...props\n  }: ComboBoxProps<T>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useProductionWarning(() => {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn('ComboBox requires one of label / aria-label / aria-labelledby for accessibility');\n    }\n  }, [label, ariaLabel, ariaLabelledBy]);\n\n  if (!isProduction() && items != null && typeof children !== 'function') {\n    console.warn('`ComboBox` requires `children` to be a function when using `items` prop');\n  }\n\n  const listBox = (\n    <RACListBox className=\"cim-combo-box-listbox\" onScroll={onScroll} items={items}>\n      {children}\n    </RACListBox>\n  );\n\n  return (\n    <RACComboBox\n      {...props}\n      ref={ref}\n      className={clsx('cim-combo-box', UNSAFE_className)}\n      style={UNSAFE_style}\n      menuTrigger=\"focus\"\n      isReadOnly={isReadOnly}\n      data-readonly={isReadOnly ? true : undefined}\n    >\n      <FormFieldLabel isRequired={props.isRequired} isDisabled={props.isDisabled}>\n        {label}\n      </FormFieldLabel>\n      <RACGroup className=\"cim-combo-box-input-group\">\n        <ComboBoxInput isReadOnly={isReadOnly} placeholder={placeholder} />\n        <RACButton className=\"cim-combo-box-button\">\n          <IconChevronDown />\n        </RACButton>\n      </RACGroup>\n      <FormFieldError>{error}</FormFieldError>\n      <FormFieldDescription>{description}</FormFieldDescription>\n      <CollapsibleList\n        offset={5} // 1px border + 4px actual offset\n        maxHeight={315}\n      >\n        {isVirtualized ? (\n          <RACVirtualizer layout={RACListLayout} layoutOptions={VIRTUAL_LAYOUT_OPTIONS}>\n            {listBox}\n          </RACVirtualizer>\n        ) : (\n          listBox\n        )}\n      </CollapsibleList>\n    </RACComboBox>\n  );\n}\n\n/**\n * Allows users to filter a collapsible list and select one item from it.\n *\n * See [combo box usage guidelines](https://ui.cimpress.com/components/combo-box)\n */\nconst _ComboBox = withStyleProps(forwardRef(ComboBox), 'ComboBox');\n\nexport { _ComboBox as ComboBox };\n\nfunction ComboBoxInput({\n  isReadOnly,\n  placeholder,\n}: {\n  isReadOnly: boolean | undefined;\n  placeholder: string | undefined;\n}) {\n  const comboBoxState = useContext(RACComboBoxStateContext);\n\n  return (\n    <RACInput\n      className={clsx('cim-combo-box-input', textStyle({ variant: 'body' }))}\n      // Ensure the popover opens when the input is clicked.\n      // By default, React Aria only opens the popover when the input is focused.\n      onClick={() => !isReadOnly && comboBoxState!.open()}\n      placeholder={placeholder}\n    />\n  );\n}\n\nexport interface ComboBoxItemProps<T extends CollectionItem>\n  extends Pick<RACListBoxItemProps<T>, 'id' | 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {\n  /** The content to display as the label. */\n  children: StringLikeChildren;\n}\n\n/** Renders a single list item within `ComboBox`. */\nexport function ComboBoxItem<T extends CollectionItem>({ children, ...props }: ComboBoxItemProps<T>) {\n  const textValue =\n    typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');\n\n  return (\n    <RACListBoxItem {...props} className=\"cim-combo-box-item\" textValue={textValue}>\n      {({ isDisabled }) => (\n        <>\n          <IconCheck />\n\n          <RACText slot=\"label\" className={textStyle({ variant: 'body', tone: isDisabled ? 'muted' : 'base' })}>\n            {children}\n          </RACText>\n        </>\n      )}\n    </RACListBoxItem>\n  );\n}\n\nComboBoxItem.displayName = 'ComboBoxItem';\n\nexport interface ComboBoxSectionProps<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 `ComboBox` into a section. */\nexport function ComboBoxSection<T extends CollectionItem>({\n  title,\n  children,\n  items,\n  ...props\n}: ComboBoxSectionProps<T>) {\n  if (!isProduction() && items != null && typeof children !== 'function') {\n    console.warn('`ComboBoxSection` requires `children` to be a function when using `items` prop');\n  }\n\n  return (\n    <RACListBoxSection {...props} className=\"cim-combo-box-section\">\n      <RACHeader\n        className={clsx('cim-combo-box-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' }))}\n      >\n        {title}\n      </RACHeader>\n      <RACCollection items={items}>{children}</RACCollection>\n    </RACListBoxSection>\n  );\n}\n\nComboBoxSection.displayName = 'ComboBoxSection';\n"]}

package/dist/commonjs/components/container/container.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+import type { CommonProps } from '../types.js';
+export interface UNSTABLE_ContainerProps extends CommonProps {
+    /** The contents of the container. */
+    children: ReactNode;
+    /**
+     * The type of the container.
+     * @default 'padded'
+     */
+    type?: 'padded' | 'full-width' | 'fixed-width';
+}
+export declare function UNSTABLE_Container({ children, UNSAFE_className, UNSAFE_style, type, ...props }: UNSTABLE_ContainerProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace UNSTABLE_Container {
+    var displayName: string;
+}
+//# sourceMappingURL=container.d.ts.map

package/dist/commonjs/components/container/container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../../../src/components/container/container.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,WAAW,uBAAwB,SAAQ,WAAW;IAC1D,qCAAqC;IACrC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,YAAY,GAAG,aAAa,CAAC;CAChD;AAED,wBAAgB,kBAAkB,CAAC,EACjC,QAAQ,EACR,gBAAgB,EAChB,YAAY,EACZ,IAAe,EACf,GAAG,KAAK,EACT,EAAE,uBAAuB,2CAMzB;yBAZe,kBAAkB"}

package/dist/commonjs/components/container/container.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UNSTABLE_Container = UNSTABLE_Container;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = __importDefault(require("clsx"));
+function UNSTABLE_Container({ children, UNSAFE_className, UNSAFE_style, type = 'padded', ...props }) {
+    return ((0, jsx_runtime_1.jsx)("div", { ...props, className: (0, clsx_1.default)('cim-container', UNSAFE_className), style: UNSAFE_style, "data-type": type, children: children }));
+}
+UNSTABLE_Container.displayName = 'Container';
+//# sourceMappingURL=container.js.map

package/dist/commonjs/components/container/container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"container.js","sourceRoot":"","sources":["../../../../src/components/container/container.tsx"],"names":[],"mappings":";;;;;AAcA,gDAYC;;AA1BD,gDAAwB;AAcxB,SAAgB,kBAAkB,CAAC,EACjC,QAAQ,EACR,gBAAgB,EAChB,YAAY,EACZ,IAAI,GAAG,QAAQ,EACf,GAAG,KAAK,EACgB;IACxB,OAAO,CACL,mCAAS,KAAK,EAAE,SAAS,EAAE,IAAA,cAAI,EAAC,eAAe,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,eAAa,IAAI,YACrG,QAAQ,GACL,CACP,CAAC;AACJ,CAAC;AAED,kBAAkB,CAAC,WAAW,GAAG,WAAW,CAAC","sourcesContent":["import clsx from 'clsx';\nimport type { ReactNode } from 'react';\nimport type { CommonProps } from '../types.js';\n\nexport interface UNSTABLE_ContainerProps extends CommonProps {\n  /** The contents of the container. */\n  children: ReactNode;\n  /**\n   * The type of the container.\n   * @default 'padded'\n   */\n  type?: 'padded' | 'full-width' | 'fixed-width';\n}\n\nexport function UNSTABLE_Container({\n  children,\n  UNSAFE_className,\n  UNSAFE_style,\n  type = 'padded',\n  ...props\n}: UNSTABLE_ContainerProps) {\n  return (\n    <div {...props} className={clsx('cim-container', UNSAFE_className)} style={UNSAFE_style} data-type={type}>\n      {children}\n    </div>\n  );\n}\n\nUNSTABLE_Container.displayName = 'Container';\n"]}

package/dist/commonjs/components/date-picker/date-picker-calendar.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=date-picker-calendar.d.ts.map

package/dist/commonjs/components/date-picker/date-picker-calendar.d.ts.map

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

package/dist/commonjs/components/date-picker/date-picker-calendar.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DatePickerCalendar = DatePickerCalendar;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const date_1 = require("@internationalized/date");
+const react_1 = require("react");
+const react_aria_components_1 = require("react-aria-components");
+const month_view_js_1 = require("./views/month/month-view.js");
+const multi_year_view_js_1 = require("./views/multi-year/multi-year-view.js");
+const view_provider_js_1 = require("./views/view-provider.js");
+const year_view_js_1 = require("./views/year/year-view.js");
+/** @internal */
+function DatePickerCalendar({ focusedValue, defaultFocusedValue, placeholderValue, }) {
+    const datePickerState = (0, react_1.useContext)(react_aria_components_1.DatePickerStateContext);
+    const [view, setView] = (0, react_1.useState)('month');
+    const [focusedDate, setFocusedDate] = (0, react_1.useState)(() => (0, date_1.toCalendarDate)(focusedValue ?? datePickerState?.value ?? defaultFocusedValue ?? placeholderValue ?? (0, date_1.today)((0, date_1.getLocalTimeZone)())));
+    // `RACCalendar` has to be rendered unconditionally so that we have access to the calendar state.
+    // However, `RACCalendar` assumes that it's always displaying the month view, and keeps announcing the focused day to screen readers on every change.
+    // To prevent this, we control the focused date in `RACCalendar` with a separate state that isn't updated when the month view is hidden.
+    const [monthViewFocusedDate, setMonthViewFocusedDate] = (0, react_1.useState)(focusedDate);
+    return ((0, jsx_runtime_1.jsx)(view_provider_js_1.DatePickerViewProvider, { currentView: view, switchToView: setView, focusedDate: focusedDate, setFocusedDate: setFocusedDate, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Calendar, { focusedValue: view === 'month' ? focusedDate : monthViewFocusedDate, onFocusChange: (date) => {
+                setMonthViewFocusedDate(date);
+                setFocusedDate(date);
+            }, children: view === 'month' ? ((0, jsx_runtime_1.jsx)(month_view_js_1.MonthView, {})) : view === 'year' ? ((0, jsx_runtime_1.jsx)(year_view_js_1.YearView, {})) : view === 'multi-year' ? ((0, jsx_runtime_1.jsx)(multi_year_view_js_1.MultiYearView, {})) : (`Unsupported view '${view}'`) }) }));
+}
+//# sourceMappingURL=date-picker-calendar.js.map

package/dist/commonjs/components/date-picker/date-picker-calendar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker-calendar.js","sourceRoot":"","sources":["../../../../src/components/date-picker/date-picker-calendar.tsx"],"names":[],"mappings":";;AAmBA,gDA4CC;;AA/DD,kDAAqG;AACrG,iCAA6C;AAC7C,iEAM+B;AAC/B,+DAAwD;AACxD,8EAAsE;AACtE,+DAAuF;AACvF,4DAAqD;AAMrD,gBAAgB;AAChB,SAAgB,kBAAkB,CAAyB,EACzD,YAAY,EACZ,mBAAmB,EACnB,gBAAgB,GACW;IAC3B,MAAM,eAAe,GAAG,IAAA,kBAAU,EAAC,8CAAyB,CAAC,CAAC;IAC9D,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAAiB,OAAO,CAAC,CAAC;IAC1D,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,IAAA,gBAAQ,EAAe,GAAG,EAAE,CAChE,IAAA,qBAAc,EACZ,YAAY,IAAI,eAAe,EAAE,KAAK,IAAI,mBAAmB,IAAI,gBAAgB,IAAI,IAAA,YAAK,EAAC,IAAA,uBAAgB,GAAE,CAAC,CAC/G,CACF,CAAC;IAEF,iGAAiG;IACjG,qJAAqJ;IACrJ,wIAAwI;IACxI,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GAAG,IAAA,gBAAQ,EAAe,WAAW,CAAC,CAAC;IAE5F,OAAO,CACL,uBAAC,yCAAsB,IACrB,WAAW,EAAE,IAAI,EACjB,YAAY,EAAE,OAAO,EACrB,WAAW,EAAE,WAAW,EACxB,cAAc,EAAE,cAAc,YAE9B,uBAAC,gCAAW,IACV,YAAY,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,oBAAoB,EACnE,aAAa,EAAE,CAAC,IAAI,EAAE,EAAE;gBACtB,uBAAuB,CAAC,IAAI,CAAC,CAAC;gBAC9B,cAAc,CAAC,IAAI,CAAC,CAAC;YACvB,CAAC,YAEA,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,CAClB,uBAAC,yBAAS,KAAG,CACd,CAAC,CAAC,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,CACpB,uBAAC,uBAAQ,KAAG,CACb,CAAC,CAAC,CAAC,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,CAC1B,uBAAC,kCAAa,KAAG,CAClB,CAAC,CAAC,CAAC,CACF,qBAAqB,IAAI,GAAG,CAC7B,GACW,GACS,CAC1B,CAAC;AACJ,CAAC","sourcesContent":["import { type CalendarDate, getLocalTimeZone, toCalendarDate, today } from '@internationalized/date';\nimport { useContext, useState } from 'react';\nimport {\n  Calendar as RACCalendar,\n  type CalendarProps as RACCalendarProps,\n  type DateValue as RACDateValue,\n  type DatePickerProps as RACDatePickerProps,\n  DatePickerStateContext as RACDatePickerStateContext,\n} from 'react-aria-components';\nimport { MonthView } from './views/month/month-view.js';\nimport { MultiYearView } from './views/multi-year/multi-year-view.js';\nimport { type DatePickerView, DatePickerViewProvider } from './views/view-provider.js';\nimport { YearView } from './views/year/year-view.js';\n\ninterface DatePickerCalendarProps<T extends RACDateValue>\n  extends Pick<RACDatePickerProps<T>, 'placeholderValue'>,\n    Pick<RACCalendarProps<T>, 'focusedValue' | 'defaultFocusedValue'> {}\n\n/** @internal */\nexport function DatePickerCalendar<T extends RACDateValue>({\n  focusedValue,\n  defaultFocusedValue,\n  placeholderValue,\n}: DatePickerCalendarProps<T>) {\n  const datePickerState = useContext(RACDatePickerStateContext);\n  const [view, setView] = useState<DatePickerView>('month');\n  const [focusedDate, setFocusedDate] = useState<CalendarDate>(() =>\n    toCalendarDate(\n      focusedValue ?? datePickerState?.value ?? defaultFocusedValue ?? placeholderValue ?? today(getLocalTimeZone()),\n    ),\n  );\n\n  // `RACCalendar` has to be rendered unconditionally so that we have access to the calendar state.\n  // However, `RACCalendar` assumes that it's always displaying the month view, and keeps announcing the focused day to screen readers on every change.\n  // To prevent this, we control the focused date in `RACCalendar` with a separate state that isn't updated when the month view is hidden.\n  const [monthViewFocusedDate, setMonthViewFocusedDate] = useState<CalendarDate>(focusedDate);\n\n  return (\n    <DatePickerViewProvider\n      currentView={view}\n      switchToView={setView}\n      focusedDate={focusedDate}\n      setFocusedDate={setFocusedDate}\n    >\n      <RACCalendar\n        focusedValue={view === 'month' ? focusedDate : monthViewFocusedDate}\n        onFocusChange={(date) => {\n          setMonthViewFocusedDate(date);\n          setFocusedDate(date);\n        }}\n      >\n        {view === 'month' ? (\n          <MonthView />\n        ) : view === 'year' ? (\n          <YearView />\n        ) : view === 'multi-year' ? (\n          <MultiYearView />\n        ) : (\n          `Unsupported view '${view}'`\n        )}\n      </RACCalendar>\n    </DatePickerViewProvider>\n  );\n}\n"]}

package/dist/commonjs/components/date-picker/date-picker.d.ts

@@ -0,0 +1,17 @@
+import type { CalendarDate, CalendarDateTime, ZonedDateTime } from '@internationalized/date';
+import { type CalendarProps as RACCalendarProps, type DatePickerProps as RACDatePickerProps } from 'react-aria-components';
+import type { CommonProps, FieldProps } from '../types.js';
+/** Represents a date with optional time and timezone components. */
+export type DateValue = CalendarDate | CalendarDateTime | ZonedDateTime;
+/** Maps a date value to a specific subtype depending on which components it contains. */
+export type MappedDateValue<T> = T extends ZonedDateTime ? ZonedDateTime : T extends CalendarDateTime ? CalendarDateTime : T extends CalendarDate ? CalendarDate : never;
+export interface DatePickerProps<T extends DateValue> extends CommonProps, FieldProps<MappedDateValue<T>>, Pick<RACDatePickerProps<T>, 'value' | 'defaultValue' | 'placeholderValue' | 'onChange' | 'isDisabled' | 'isRequired' | 'isInvalid' | 'isReadOnly' | 'autoFocus' | 'onFocus' | 'onBlur' | 'isOpen' | 'defaultOpen' | 'onOpenChange' | 'minValue' | 'maxValue' | 'isDateUnavailable' | 'granularity' | 'firstDayOfWeek'>, Pick<RACCalendarProps<T>, 'focusedValue' | 'defaultFocusedValue'> {
+}
+/**
+ * Allows users to enter or select a date and time value.
+ *
+ * See [date picker usage guidelines](https://ui.cimpress.io/components/date-picker/).
+ */
+declare const _DatePicker: <T extends DateValue>(props: DatePickerProps<T> & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
+export { _DatePicker as DatePicker };
+//# sourceMappingURL=date-picker.d.ts.map

package/dist/commonjs/components/date-picker/date-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../../../src/components/date-picker/date-picker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAG7F,OAAO,EACL,KAAK,aAAa,IAAI,gBAAgB,EAGtC,KAAK,eAAe,IAAI,kBAAkB,EAM3C,MAAM,uBAAuB,CAAC;AAQ/B,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAI3D,oEAAoE;AACpE,MAAM,MAAM,SAAS,GAAG,YAAY,GAAG,gBAAgB,GAAG,aAAa,CAAC;AAExE,yFAAyF;AACzF,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI,CAAC,SAAS,aAAa,GACpD,aAAa,GACb,CAAC,SAAS,gBAAgB,GACxB,gBAAgB,GAChB,CAAC,SAAS,YAAY,GACpB,YAAY,GACZ,KAAK,CAAC;AAEd,MAAM,WAAW,eAAe,CAAC,CAAC,SAAS,SAAS,CAClD,SAAQ,WAAW,EACjB,UAAU,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,EAC9B,IAAI,CACF,kBAAkB,CAAC,CAAC,CAAC,EACnB,OAAO,GACP,cAAc,GACd,kBAAkB,GAClB,UAAU,GACV,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,YAAY,GACZ,WAAW,GACX,SAAS,GACT,QAAQ,GACR,QAAQ,GACR,aAAa,GACb,cAAc,GACd,UAAU,GACV,UAAU,GACV,mBAAmB,GACnB,aAAa,GACb,gBAAgB,CACnB,EACD,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,cAAc,GAAG,qBAAqB,CAAC;CAAG;AAqExE;;;;GAIG;AACH,QAAA,MAAM,WAAW,GAxEG,CAAC,SAAS,SAAS,mKAwEiC,CAAC;AAEzE,OAAO,EAAE,WAAW,IAAI,UAAU,EAAE,CAAC"}

package/dist/commonjs/components/date-picker/date-picker.js

@@ -0,0 +1,54 @@
+'use client';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DatePicker = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = __importDefault(require("clsx"));
+const react_1 = require("react");
+const react_aria_components_1 = require("react-aria-components");
+const forward_ref_js_1 = require("../../forward-ref.js");
+const index_js_1 = require("../../i18n/index.js");
+const index_js_2 = require("../../icons/index.js");
+const use_production_warning_js_1 = require("../../utils/use-production-warning.js");
+const with_style_props_js_1 = require("../../with-style-props.js");
+const icon_button_js_1 = require("../button/icon-button.js");
+const form_field_js_1 = require("../internal/form-field/form-field.js");
+const utils_js_1 = require("../typography/utils.js");
+const date_picker_calendar_js_1 = require("./date-picker-calendar.js");
+function DatePicker({ label, description, error: errorMessage, focusedValue, defaultFocusedValue, UNSAFE_className, UNSAFE_style, ...props }, ref) {
+    const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
+    (0, use_production_warning_js_1.useProductionWarning)(() => {
+        if (!label && !ariaLabel && !ariaLabelledBy) {
+            console.warn('DatePicker requires one of label / aria-label / aria-labelledby for accessibility');
+        }
+    }, [label, ariaLabel, ariaLabelledBy]);
+    const messages = (0, index_js_1.useLocalizedMessages)('datePicker');
+    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.DatePicker, { ...props, ref: ref, className: (0, clsx_1.default)('cim-date-picker', UNSAFE_className), style: UNSAFE_style, children: [(0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldLabel, { isRequired: props.isRequired, isDisabled: props.isDisabled, children: label }), (0, jsx_runtime_1.jsxs)(react_aria_components_1.Group, { className: "cim-date-picker-input-group", "data-readonly": props.isReadOnly || undefined, children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.DateInput, { className: (0, clsx_1.default)('cim-date-picker-input', (0, utils_js_1.textStyle)({ variant: 'body' })), children: (segment) => ((0, jsx_runtime_1.jsx)("span", { className: "cim-date-picker-segment-wrapper", children: (0, jsx_runtime_1.jsx)(react_aria_components_1.DateSegment, { segment: segment }) })) }), (0, jsx_runtime_1.jsxs)("div", { className: "cim-date-picker-input-controls", children: [(0, jsx_runtime_1.jsx)(DatePickerClearButton, { isDisabled: props.isDisabled || props.isReadOnly }), (0, jsx_runtime_1.jsx)(icon_button_js_1.IconButton, { icon: (0, jsx_runtime_1.jsx)(index_js_2.IconCalendarEmpty, {}), "aria-label": messages.format('openCalendar'), variant: "tertiary", size: "small" })] })] }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldError, { children: errorMessage }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldDescription, { children: description }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Popover, { className: "cim-date-picker-popover", placement: "bottom end", offset: 5, containerPadding: 16, "data-cim-style-root": true, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Dialog, { children: (0, jsx_runtime_1.jsx)(date_picker_calendar_js_1.DatePickerCalendar, { focusedValue: focusedValue, defaultFocusedValue: defaultFocusedValue, placeholderValue: props.placeholderValue }) }) })] }));
+}
+/**
+ * Allows users to enter or select a date and time value.
+ *
+ * See [date picker usage guidelines](https://ui.cimpress.io/components/date-picker/).
+ */
+const _DatePicker = (0, with_style_props_js_1.withStyleProps)((0, forward_ref_js_1.forwardRef)(DatePicker), 'DatePicker');
+exports.DatePicker = _DatePicker;
+function DatePickerClearButton({ isDisabled }) {
+    const datePickerState = (0, react_1.useContext)(react_aria_components_1.DatePickerStateContext);
+    const messages = (0, index_js_1.useLocalizedMessages)('datePicker');
+    if (!datePickerState.value) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(icon_button_js_1.IconButton
+    // Don't inherit default Button behavior from DatePicker
+    , { 
+        // Don't inherit default Button behavior from DatePicker
+        slot: null, UNSAFE_className: "cim-date-picker-clear", "aria-label": messages.format('clearValue'), onPress: () => datePickerState.setValue(null), icon: (0, jsx_runtime_1.jsx)(IconCloseDetached, {}), variant: "tertiary", size: "small", isDisabled: isDisabled }));
+}
+// TODO: use one of our standard icons instead of this custom one
+function IconCloseDetached() {
+    return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 12 12", xmlns: "http://www.w3.org/2000/svg", className: "cim-icon", fill: "currentcolor", "data-icon": true, children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0.21967 0.21967C0.512563 -0.0732233 0.987437 -0.0732233 1.28033 0.21967L6 4.93934L10.7197 0.21967C11.0126 -0.0732233 11.4874 -0.0732233 11.7803 0.21967C12.0732 0.512563 12.0732 0.987437 11.7803 1.28033L7.06066 6L11.7803 10.7197C12.0732 11.0126 12.0732 11.4874 11.7803 11.7803C11.4874 12.0732 11.0126 12.0732 10.7197 11.7803L6 7.06066L1.28033 11.7803C0.987437 12.0732 0.512563 12.0732 0.21967 11.7803C-0.0732233 11.4874 -0.0732233 11.0126 0.21967 10.7197L4.93934 6L0.21967 1.28033C-0.0732233 0.987437 -0.0732233 0.512563 0.21967 0.21967Z" }) }));
+}
+//# sourceMappingURL=date-picker.js.map

package/dist/commonjs/components/date-picker/date-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.js","sourceRoot":"","sources":["../../../../src/components/date-picker/date-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport type { CalendarDate, CalendarDateTime, ZonedDateTime } from '@internationalized/date';\nimport clsx from 'clsx';\nimport { useContext, type ForwardedRef } from 'react';\nimport {\n  type CalendarProps as RACCalendarProps,\n  DateInput as RACDateInput,\n  DatePicker as RACDatePicker,\n  type DatePickerProps as RACDatePickerProps,\n  DatePickerStateContext as RACDatePickerStateContext,\n  DateSegment as RACDateSegment,\n  Dialog as RACDialog,\n  Group as RACGroup,\n  Popover as RACPopover,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useLocalizedMessages } from '../../i18n/index.js';\nimport { IconCalendarEmpty } from '../../icons/index.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.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, FieldProps } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\nimport { DatePickerCalendar } from './date-picker-calendar.js';\n\n/** Represents a date with optional time and timezone components. */\nexport type DateValue = CalendarDate | CalendarDateTime | ZonedDateTime;\n\n/** Maps a date value to a specific subtype depending on which components it contains. */\nexport type MappedDateValue<T> = T extends ZonedDateTime\n  ? ZonedDateTime\n  : T extends CalendarDateTime\n    ? CalendarDateTime\n    : T extends CalendarDate\n      ? CalendarDate\n      : never;\n\nexport interface DatePickerProps<T extends DateValue>\n  extends CommonProps,\n    FieldProps<MappedDateValue<T>>,\n    Pick<\n      RACDatePickerProps<T>,\n      | 'value'\n      | 'defaultValue'\n      | 'placeholderValue'\n      | 'onChange'\n      | 'isDisabled'\n      | 'isRequired'\n      | 'isInvalid'\n      | 'isReadOnly'\n      | 'autoFocus'\n      | 'onFocus'\n      | 'onBlur'\n      | 'isOpen'\n      | 'defaultOpen'\n      | 'onOpenChange'\n      | 'minValue'\n      | 'maxValue'\n      | 'isDateUnavailable'\n      | 'granularity'\n      | 'firstDayOfWeek'\n    >,\n    Pick<RACCalendarProps<T>, 'focusedValue' | 'defaultFocusedValue'> {}\n\nfunction DatePicker<T extends DateValue>(\n  {\n    label,\n    description,\n    error: errorMessage,\n    focusedValue,\n    defaultFocusedValue,\n    UNSAFE_className,\n    UNSAFE_style,\n    ...props\n  }: DatePickerProps<T>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useProductionWarning(() => {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn('DatePicker requires one of label / aria-label / aria-labelledby for accessibility');\n    }\n  }, [label, ariaLabel, ariaLabelledBy]);\n\n  const messages = useLocalizedMessages('datePicker');\n\n  return (\n    <RACDatePicker {...props} ref={ref} className={clsx('cim-date-picker', UNSAFE_className)} style={UNSAFE_style}>\n      <FormFieldLabel isRequired={props.isRequired} isDisabled={props.isDisabled}>\n        {label}\n      </FormFieldLabel>\n      <RACGroup className=\"cim-date-picker-input-group\" data-readonly={props.isReadOnly || undefined}>\n        <RACDateInput className={clsx('cim-date-picker-input', textStyle({ variant: 'body' }))}>\n          {(segment) => (\n            <span className=\"cim-date-picker-segment-wrapper\">\n              <RACDateSegment segment={segment} />\n            </span>\n          )}\n        </RACDateInput>\n        <div className=\"cim-date-picker-input-controls\">\n          <DatePickerClearButton isDisabled={props.isDisabled || props.isReadOnly} />\n          <IconButton\n            icon={<IconCalendarEmpty />}\n            aria-label={messages.format('openCalendar')}\n            variant=\"tertiary\"\n            size=\"small\"\n          />\n        </div>\n      </RACGroup>\n      <FormFieldError>{errorMessage}</FormFieldError>\n      <FormFieldDescription>{description}</FormFieldDescription>\n      <RACPopover\n        className=\"cim-date-picker-popover\"\n        placement=\"bottom end\"\n        offset={5} // 1px border + 4px actual offset\n        containerPadding={16}\n        data-cim-style-root\n      >\n        <RACDialog>\n          <DatePickerCalendar<T>\n            focusedValue={focusedValue}\n            defaultFocusedValue={defaultFocusedValue}\n            placeholderValue={props.placeholderValue}\n          />\n        </RACDialog>\n      </RACPopover>\n    </RACDatePicker>\n  );\n}\n\n/**\n * Allows users to enter or select a date and time value.\n *\n * See [date picker usage guidelines](https://ui.cimpress.io/components/date-picker/).\n */\nconst _DatePicker = withStyleProps(forwardRef(DatePicker), 'DatePicker');\n\nexport { _DatePicker as DatePicker };\n\nfunction DatePickerClearButton({ isDisabled }: { isDisabled: boolean | undefined }) {\n  const datePickerState = useContext(RACDatePickerStateContext)!;\n  const messages = useLocalizedMessages('datePicker');\n\n  if (!datePickerState.value) {\n    return null;\n  }\n\n  return (\n    <IconButton\n      // Don't inherit default Button behavior from DatePicker\n      slot={null}\n      UNSAFE_className=\"cim-date-picker-clear\"\n      aria-label={messages.format('clearValue')}\n      onPress={() => datePickerState.setValue(null)}\n      icon={<IconCloseDetached />}\n      variant=\"tertiary\"\n      size=\"small\"\n      isDisabled={isDisabled}\n    />\n  );\n}\n\n// TODO: use one of our standard icons instead of this custom one\nfunction IconCloseDetached() {\n  return (\n    <svg viewBox=\"0 0 12 12\" xmlns=\"http://www.w3.org/2000/svg\" className=\"cim-icon\" fill=\"currentcolor\" data-icon>\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M0.21967 0.21967C0.512563 -0.0732233 0.987437 -0.0732233 1.28033 0.21967L6 4.93934L10.7197 0.21967C11.0126 -0.0732233 11.4874 -0.0732233 11.7803 0.21967C12.0732 0.512563 12.0732 0.987437 11.7803 1.28033L7.06066 6L11.7803 10.7197C12.0732 11.0126 12.0732 11.4874 11.7803 11.7803C11.4874 12.0732 11.0126 12.0732 10.7197 11.7803L6 7.06066L1.28033 11.7803C0.987437 12.0732 0.512563 12.0732 0.21967 11.7803C-0.0732233 11.4874 -0.0732233 11.0126 0.21967 10.7197L4.93934 6L0.21967 1.28033C-0.0732233 0.987437 -0.0732233 0.512563 0.21967 0.21967Z\"\n      />\n    </svg>\n  );\n}\n"]}

package/dist/commonjs/components/date-picker/utils.d.ts

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

package/dist/commonjs/components/date-picker/utils.d.ts.map

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

package/dist/commonjs/components/date-picker/utils.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getEraFormat = getEraFormat;
+exports.isDateInvalid = isDateInvalid;
+exports.constrainValue = constrainValue;
+const date_1 = require("@internationalized/date");
+/** @internal */
+function getEraFormat(date) {
+    return date?.calendar.identifier === 'gregory' && date.era === 'BC' ? 'short' : undefined;
+}
+/** @internal */
+function isDateInvalid(date, minValue, maxValue) {
+    return (minValue != null && date.compare(minValue) < 0) || (maxValue != null && date.compare(maxValue) > 0);
+}
+/** @internal */
+function constrainValue(date, minValue, maxValue) {
+    if (minValue) {
+        const newDate = (0, date_1.maxDate)(date, (0, date_1.toCalendarDate)(minValue));
+        if (newDate) {
+            date = newDate;
+        }
+    }
+    if (maxValue) {
+        const newDate = (0, date_1.minDate)(date, (0, date_1.toCalendarDate)(maxValue));
+        if (newDate) {
+            date = newDate;
+        }
+    }
+    return date;
+}
+//# sourceMappingURL=utils.js.map

package/dist/commonjs/components/date-picker/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/components/date-picker/utils.ts"],"names":[],"mappings":";;AAQA,oCAEC;AAGD,sCAEC;AAGD,wCAoBC;AAtCD,kDAA8G;AAO9G,gBAAgB;AAChB,SAAgB,YAAY,CAAC,IAA8B;IACzD,OAAO,IAAI,EAAE,QAAQ,CAAC,UAAU,KAAK,SAAS,IAAI,IAAI,CAAC,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC;AAC5F,CAAC;AAED,gBAAgB;AAChB,SAAgB,aAAa,CAAC,IAAe,EAAE,QAA2B,EAAE,QAA2B;IACrG,OAAO,CAAC,QAAQ,IAAI,IAAI,IAAI,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,IAAI,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC;AAC9G,CAAC;AAED,gBAAgB;AAChB,SAAgB,cAAc,CAC5B,IAAkB,EAClB,QAA2B,EAC3B,QAA2B;IAE3B,IAAI,QAAQ,EAAE,CAAC;QACb,MAAM,OAAO,GAAG,IAAA,cAAO,EAAC,IAAI,EAAE,IAAA,qBAAc,EAAC,QAAQ,CAAC,CAAC,CAAC;QACxD,IAAI,OAAO,EAAE,CAAC;YACZ,IAAI,GAAG,OAAO,CAAC;QACjB,CAAC;IACH,CAAC;IAED,IAAI,QAAQ,EAAE,CAAC;QACb,MAAM,OAAO,GAAG,IAAA,cAAO,EAAC,IAAI,EAAE,IAAA,qBAAc,EAAC,QAAQ,CAAC,CAAC,CAAC;QACxD,IAAI,OAAO,EAAE,CAAC;YACZ,IAAI,GAAG,OAAO,CAAC;QACjB,CAAC;IACH,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC","sourcesContent":["import { maxDate, minDate, toCalendarDate, type CalendarDate, type DateValue } from '@internationalized/date';\nimport type { Context } from 'react';\nimport type { CalendarStateContext as RACCalendarStateContext } from 'react-aria-components';\n\n/** @internal */\nexport type CalendarState = typeof RACCalendarStateContext extends Context<infer R> ? NonNullable<R> : never;\n\n/** @internal */\nexport function getEraFormat(date: CalendarDate | undefined): 'short' | undefined {\n  return date?.calendar.identifier === 'gregory' && date.era === 'BC' ? 'short' : undefined;\n}\n\n/** @internal */\nexport function isDateInvalid(date: DateValue, minValue?: DateValue | null, maxValue?: DateValue | null): boolean {\n  return (minValue != null && date.compare(minValue) < 0) || (maxValue != null && date.compare(maxValue) > 0);\n}\n\n/** @internal */\nexport function constrainValue(\n  date: CalendarDate,\n  minValue?: DateValue | null,\n  maxValue?: DateValue | null,\n): CalendarDate {\n  if (minValue) {\n    const newDate = maxDate(date, toCalendarDate(minValue));\n    if (newDate) {\n      date = newDate;\n    }\n  }\n\n  if (maxValue) {\n    const newDate = minDate(date, toCalendarDate(maxValue));\n    if (newDate) {\n      date = newDate;\n    }\n  }\n\n  return date;\n}\n"]}

package/dist/commonjs/components/date-picker/views/month/month-view.d.ts

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

package/dist/commonjs/components/date-picker/views/month/month-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"month-view.d.ts","sourceRoot":"","sources":["../../../../../../src/components/date-picker/views/month/month-view.tsx"],"names":[],"mappings":""}

package/dist/commonjs/components/date-picker/views/month/month-view.js

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MonthView = MonthView;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const date_1 = require("@internationalized/date");
+const clsx_1 = __importDefault(require("clsx"));
+const react_1 = require("react");
+const react_aria_components_1 = require("react-aria-components");
+const index_js_1 = require("../../../../i18n/index.js");
+const index_js_2 = require("../../../../icons/index.js");
+const button_js_1 = require("../../../button/button.js");
+const icon_button_js_1 = require("../../../button/icon-button.js");
+const utils_js_1 = require("../../../typography/utils.js");
+const view_provider_js_1 = require("./../view-provider.js");
+/** @internal */
+function MonthView() {
+    const state = (0, react_1.useContext)(react_aria_components_1.CalendarStateContext);
+    const { 
+    // @ts-expect-error RACHeadingContext contains a `children` property, but it's not in the types
+    children: title, } = (0, react_1.useContext)(react_aria_components_1.HeadingContext);
+    const { switchToView } = (0, view_provider_js_1.useDatePickerView)();
+    const messages = (0, index_js_1.useLocalizedMessages)('datePicker');
+    (0, react_1.useEffect)(() => {
+        state?.setFocused(true);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "cim-date-picker-view-header", children: [(0, jsx_runtime_1.jsx)(icon_button_js_1.IconButton, { slot: "previous", "aria-label": messages.format('previousMonth'), icon: (0, jsx_runtime_1.jsx)(index_js_2.IconChevronLeft, {}), variant: "tertiary", size: "small" }), (0, jsx_runtime_1.jsx)(button_js_1.Button, { slot: null, "aria-label": messages.format('switchToYearView'), variant: "tertiary", onPress: () => switchToView('year'), children: title }), (0, jsx_runtime_1.jsx)(icon_button_js_1.IconButton, { slot: "next", "aria-label": messages.format('nextMonth'), icon: (0, jsx_runtime_1.jsx)(index_js_2.IconChevronRight, {}), variant: "tertiary", size: "small" })] }), (0, jsx_runtime_1.jsxs)(react_aria_components_1.CalendarGrid, { className: "cim-date-picker-view-grid", weekdayStyle: "narrow", children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.CalendarGridHeader, { children: (day) => ((0, jsx_runtime_1.jsx)(react_aria_components_1.CalendarHeaderCell, { children: (0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)('cim-date-picker-calendar-header-cell', (0, utils_js_1.textStyle)({ variant: 'medium-semibold', tone: 'base' })), children: day }) })) }), (0, jsx_runtime_1.jsx)(react_aria_components_1.CalendarGridBody, { children: (date) => {
+                            const isCurrentDate = (0, date_1.isToday)(date, state.timeZone);
+                            return ((0, jsx_runtime_1.jsx)(react_aria_components_1.CalendarCell, { className: (0, clsx_1.default)('cim-date-picker-calendar-cell', (0, utils_js_1.textStyle)({ variant: isCurrentDate ? 'medium-semibold' : 'medium' })), date: date, "data-current": isCurrentDate || undefined }));
+                        } })] })] }));
+}
+//# sourceMappingURL=month-view.js.map

package/dist/commonjs/components/date-picker/views/month/month-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"month-view.js","sourceRoot":"","sources":["../../../../../../src/components/date-picker/views/month/month-view.tsx"],"names":[],"mappings":";;;;;AAoBA,8BA6EC;;AAjGD,kDAAkD;AAClD,gDAAwB;AACxB,iCAA8C;AAC9C,iEAQ+B;AAC/B,wDAAiE;AACjE,yDAA+E;AAC/E,yDAAmD;AACnD,mEAA4D;AAC5D,2DAAyD;AACzD,4DAA0D;AAE1D,gBAAgB;AAChB,SAAgB,SAAS;IACvB,MAAM,KAAK,GAAG,IAAA,kBAAU,EAAC,4CAAuB,CAAC,CAAC;IAClD,MAAM;IACJ,+FAA+F;IAC/F,QAAQ,EAAE,KAAK,GAChB,GAAG,IAAA,kBAAU,EAAC,sCAAiB,CAAC,CAAC;IAClC,MAAM,EAAE,YAAY,EAAE,GAAG,IAAA,oCAAiB,GAAE,CAAC;IAC7C,MAAM,QAAQ,GAAG,IAAA,+BAAoB,EAAC,YAAY,CAAC,CAAC;IAEpD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,KAAK,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;QACxB,uDAAuD;IACzD,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,6DACE,iCAAK,SAAS,EAAC,6BAA6B,aAC1C,uBAAC,2BAAU,IACT,IAAI,EAAC,UAAU,gBACH,QAAQ,CAAC,MAAM,CAAC,eAAe,CAAC,EAC5C,IAAI,EAAE,uBAAC,0BAAe,KAAG,EACzB,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,OAAO,GACZ,EAEF,uBAAC,kBAAM,IACL,IAAI,EAAE,IAAI,gBACE,QAAQ,CAAC,MAAM,CAAC,kBAAkB,CAAC,EAC/C,OAAO,EAAC,UAAU,EAClB,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,YAElC,KAAK,GACC,EAET,uBAAC,2BAAU,IACT,IAAI,EAAC,MAAM,gBACC,QAAQ,CAAC,MAAM,CAAC,WAAW,CAAC,EACxC,IAAI,EAAE,uBAAC,2BAAgB,KAAG,EAC1B,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,OAAO,GACZ,IACE,EAEN,wBAAC,oCAAe,IAAC,SAAS,EAAC,2BAA2B,EAAC,YAAY,EAAC,QAAQ,aAC1E,uBAAC,0CAAqB,cACnB,CAAC,GAAG,EAAE,EAAE,CAAC,CACR,uBAAC,0CAAqB,cACpB,gCACE,SAAS,EAAE,IAAA,cAAI,EACb,sCAAsC,EACtC,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,iBAAiB,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CACxD,YAEA,GAAG,GACA,GACgB,CACzB,GACqB,EACxB,uBAAC,wCAAmB,cACjB,CAAC,IAAI,EAAE,EAAE;4BACR,MAAM,aAAa,GAAG,IAAA,cAAO,EAAC,IAAI,EAAE,KAAM,CAAC,QAAQ,CAAC,CAAC;4BAErD,OAAO,CACL,uBAAC,oCAAe,IACd,SAAS,EAAE,IAAA,cAAI,EACb,+BAA+B,EAC/B,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,aAAa,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CACrE,EACD,IAAI,EAAE,IAAI,kBACI,aAAa,IAAI,SAAS,GACxC,CACH,CAAC;wBACJ,CAAC,GACmB,IACN,IACjB,CACJ,CAAC;AACJ,CAAC","sourcesContent":["import { isToday } from '@internationalized/date';\nimport clsx from 'clsx';\nimport { useContext, useEffect } from 'react';\nimport {\n  CalendarCell as RACCalendarCell,\n  CalendarGrid as RACCalendarGrid,\n  CalendarGridBody as RACCalendarGridBody,\n  CalendarGridHeader as RACCalendarGridHeader,\n  CalendarHeaderCell as RACCalendarHeaderCell,\n  CalendarStateContext as RACCalendarStateContext,\n  HeadingContext as RACHeadingContext,\n} from 'react-aria-components';\nimport { useLocalizedMessages } from '../../../../i18n/index.js';\nimport { IconChevronLeft, IconChevronRight } from '../../../../icons/index.js';\nimport { Button } from '../../../button/button.js';\nimport { IconButton } from '../../../button/icon-button.js';\nimport { textStyle } from '../../../typography/utils.js';\nimport { useDatePickerView } from './../view-provider.js';\n\n/** @internal */\nexport function MonthView() {\n  const state = useContext(RACCalendarStateContext);\n  const {\n    // @ts-expect-error RACHeadingContext contains a `children` property, but it's not in the types\n    children: title,\n  } = useContext(RACHeadingContext);\n  const { switchToView } = useDatePickerView();\n  const messages = useLocalizedMessages('datePicker');\n\n  useEffect(() => {\n    state?.setFocused(true);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return (\n    <>\n      <div className=\"cim-date-picker-view-header\">\n        <IconButton\n          slot=\"previous\"\n          aria-label={messages.format('previousMonth')}\n          icon={<IconChevronLeft />}\n          variant=\"tertiary\"\n          size=\"small\"\n        />\n\n        <Button\n          slot={null}\n          aria-label={messages.format('switchToYearView')}\n          variant=\"tertiary\"\n          onPress={() => switchToView('year')}\n        >\n          {title}\n        </Button>\n\n        <IconButton\n          slot=\"next\"\n          aria-label={messages.format('nextMonth')}\n          icon={<IconChevronRight />}\n          variant=\"tertiary\"\n          size=\"small\"\n        />\n      </div>\n\n      <RACCalendarGrid className=\"cim-date-picker-view-grid\" weekdayStyle=\"narrow\">\n        <RACCalendarGridHeader>\n          {(day) => (\n            <RACCalendarHeaderCell>\n              <div\n                className={clsx(\n                  'cim-date-picker-calendar-header-cell',\n                  textStyle({ variant: 'medium-semibold', tone: 'base' }),\n                )}\n              >\n                {day}\n              </div>\n            </RACCalendarHeaderCell>\n          )}\n        </RACCalendarGridHeader>\n        <RACCalendarGridBody>\n          {(date) => {\n            const isCurrentDate = isToday(date, state!.timeZone);\n\n            return (\n              <RACCalendarCell\n                className={clsx(\n                  'cim-date-picker-calendar-cell',\n                  textStyle({ variant: isCurrentDate ? 'medium-semibold' : 'medium' }),\n                )}\n                date={date}\n                data-current={isCurrentDate || undefined}\n              />\n            );\n          }}\n        </RACCalendarGridBody>\n      </RACCalendarGrid>\n    </>\n  );\n}\n"]}

package/dist/commonjs/components/date-picker/views/multi-year/multi-year-view.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=multi-year-view.d.ts.map

package/dist/commonjs/components/date-picker/views/multi-year/multi-year-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-year-view.d.ts","sourceRoot":"","sources":["../../../../../../src/components/date-picker/views/multi-year/multi-year-view.tsx"],"names":[],"mappings":""}

package/dist/commonjs/components/date-picker/views/multi-year/multi-year-view.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MultiYearView = MultiYearView;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icon_button_js_1 = require("../../../button/icon-button.js");
+const text_js_1 = require("../../../typography/text.js");
+const use_view_header_js_1 = require("../use-view-header.js");
+const view_grid_js_1 = require("../view-grid.js");
+const use_multi_year_view_state_js_1 = require("./use-multi-year-view-state.js");
+/** @internal */
+function MultiYearView() {
+    const state = (0, use_multi_year_view_state_js_1.useMultiYearViewState)();
+    const { nextButtonProps, prevButtonProps } = (0, use_view_header_js_1.useViewHeader)(state);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "cim-date-picker-view-header", children: [(0, jsx_runtime_1.jsx)(icon_button_js_1.IconButton, { slot: null, ...prevButtonProps }), (0, jsx_runtime_1.jsx)(text_js_1.Text, { as: "span", variant: "title-6", tone: "base", children: state.header }), (0, jsx_runtime_1.jsx)(icon_button_js_1.IconButton, { slot: null, ...nextButtonProps })] }), (0, jsx_runtime_1.jsx)(view_grid_js_1.ViewGrid, { state: state, className: "cim-date-picker-view-grid-multi-year" })] }));
+}
+//# sourceMappingURL=multi-year-view.js.map

package/dist/commonjs/components/date-picker/views/multi-year/multi-year-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-year-view.js","sourceRoot":"","sources":["../../../../../../src/components/date-picker/views/multi-year/multi-year-view.tsx"],"names":[],"mappings":";;AAOA,sCAmBC;;AA1BD,mEAA4D;AAC5D,yDAAmD;AACnD,8DAAsD;AACtD,kDAA2C;AAC3C,iFAAuE;AAEvE,gBAAgB;AAChB,SAAgB,aAAa;IAC3B,MAAM,KAAK,GAAG,IAAA,oDAAqB,GAAE,CAAC;IACtC,MAAM,EAAE,eAAe,EAAE,eAAe,EAAE,GAAG,IAAA,kCAAa,EAAC,KAAK,CAAC,CAAC;IAElE,OAAO,CACL,6DACE,iCAAK,SAAS,EAAC,6BAA6B,aAC1C,uBAAC,2BAAU,IAAC,IAAI,EAAE,IAAI,KAAM,eAAe,GAAI,EAE/C,uBAAC,cAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,MAAM,YAC1C,KAAK,CAAC,MAAM,GACR,EAEP,uBAAC,2BAAU,IAAC,IAAI,EAAE,IAAI,KAAM,eAAe,GAAI,IAC3C,EAEN,uBAAC,uBAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAC,sCAAsC,GAAG,IAC1E,CACJ,CAAC;AACJ,CAAC","sourcesContent":["import { IconButton } from '../../../button/icon-button.js';\nimport { Text } from '../../../typography/text.js';\nimport { useViewHeader } from '../use-view-header.js';\nimport { ViewGrid } from '../view-grid.js';\nimport { useMultiYearViewState } from './use-multi-year-view-state.js';\n\n/** @internal */\nexport function MultiYearView() {\n  const state = useMultiYearViewState();\n  const { nextButtonProps, prevButtonProps } = useViewHeader(state);\n\n  return (\n    <>\n      <div className=\"cim-date-picker-view-header\">\n        <IconButton slot={null} {...prevButtonProps} />\n\n        <Text as=\"span\" variant=\"title-6\" tone=\"base\">\n          {state.header}\n        </Text>\n\n        <IconButton slot={null} {...nextButtonProps} />\n      </div>\n\n      <ViewGrid state={state} className=\"cim-date-picker-view-grid-multi-year\" />\n    </>\n  );\n}\n"]}

package/dist/commonjs/components/date-picker/views/multi-year/use-multi-year-view-state.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=use-multi-year-view-state.d.ts.map

package/dist/commonjs/components/date-picker/views/multi-year/use-multi-year-view-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-multi-year-view-state.d.ts","sourceRoot":"","sources":["../../../../../../src/components/date-picker/views/multi-year/use-multi-year-view-state.ts"],"names":[],"mappings":""}

package/dist/commonjs/components/date-picker/views/multi-year/use-multi-year-view-state.js

@@ -0,0 +1,130 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMultiYearViewState = useMultiYearViewState;
+const date_1 = require("@internationalized/date");
+const react_1 = require("react");
+const react_aria_1 = require("react-aria");
+const react_aria_components_1 = require("react-aria-components");
+const index_js_1 = require("../../../../i18n/index.js");
+const utils_js_1 = require("../../utils.js");
+const view_provider_js_1 = require("../view-provider.js");
+const ITEMS_PER_ROW = 4;
+const YEARS_PER_SECTION = 20;
+const YEARS_SKIP_AMOUNT = 100;
+/** @internal */
+function useMultiYearViewState() {
+    const calendarState = (0, react_1.useContext)(react_aria_components_1.CalendarStateContext);
+    const { switchToView, focusedDate, setFocusedDate } = (0, view_provider_js_1.useDatePickerView)();
+    const messages = (0, index_js_1.useLocalizedMessages)('datePicker');
+    const [isFocused, setIsFocused] = (0, react_1.useState)(true);
+    const currentDate = (0, react_1.useMemo)(() => (0, date_1.today)(calendarState.timeZone), [calendarState.timeZone]);
+    const yearFormatter = (0, react_aria_1.useDateFormatter)({
+        year: 'numeric',
+        era: (0, utils_js_1.getEraFormat)(focusedDate),
+        calendar: focusedDate.calendar.identifier,
+        timeZone: calendarState.timeZone,
+    });
+    let startYear = (Math.ceil(focusedDate.year / YEARS_PER_SECTION) - 1) * YEARS_PER_SECTION + 1;
+    let endYear = startYear + YEARS_PER_SECTION - 1;
+    // Years are always represented by positive numbers.
+    // If era implies negative years, flip start and end.
+    const isNegativeEra = focusedDate.era === 'BC';
+    if (isNegativeEra) {
+        const temp = startYear;
+        startYear = endYear;
+        endYear = temp;
+    }
+    const data = (0, react_1.useMemo)(() => {
+        const rowCount = Math.ceil(YEARS_PER_SECTION / ITEMS_PER_ROW);
+        const result = new Array(rowCount);
+        for (let rowIdx = 0; rowIdx < rowCount; rowIdx++) {
+            result[rowIdx] = new Array(ITEMS_PER_ROW).fill(null);
+        }
+        for (let yearIdx = 0; yearIdx < YEARS_PER_SECTION; yearIdx++) {
+            const rowIdx = Math.floor(yearIdx / ITEMS_PER_ROW);
+            const colIdx = yearIdx % ITEMS_PER_ROW;
+            const yearToSet = startYear + (isNegativeEra ? -yearIdx : yearIdx);
+            const date = focusedDate.set({ year: yearToSet });
+            if (date.year !== yearToSet) {
+                // Reached minimum/maximum date
+                continue;
+            }
+            const content = yearFormatter.format(date.toDate(calendarState.timeZone));
+            result[rowIdx][colIdx] = {
+                date,
+                content,
+                ariaLabel: content,
+                isCurrent: (0, date_1.isSameYear)(date, currentDate),
+            };
+        }
+        return result;
+    }, [startYear, calendarState.timeZone, focusedDate, yearFormatter, isNegativeEra, currentDate]);
+    const focusCell = (date) => {
+        setFocusedDate((0, utils_js_1.constrainValue)(date, calendarState.minValue, calendarState.maxValue));
+    };
+    return {
+        header: yearFormatter.formatRange(focusedDate.set({ year: startYear }).toDate(calendarState.timeZone), focusedDate.set({ year: endYear }).toDate(calendarState.timeZone)),
+        previousLabel: messages.format('previousMultiYearSection', { yearCount: 20 }),
+        nextLabel: messages.format('nextMultiYearSection', { yearCount: 20 }),
+        data,
+        isReadOnly: calendarState.isReadOnly,
+        isDisabled: calendarState.isDisabled,
+        isFocused,
+        setIsFocused,
+        focusedDate,
+        setFocusedDate,
+        timeZone: calendarState.timeZone,
+        focusPreviousItem() {
+            focusCell(focusedDate.subtract({ years: 1 }));
+        },
+        focusNextItem() {
+            focusCell(focusedDate.add({ years: 1 }));
+        },
+        focusPreviousRow() {
+            focusCell(focusedDate.subtract({ years: ITEMS_PER_ROW }));
+        },
+        focusNextRow() {
+            focusCell(focusedDate.add({ years: ITEMS_PER_ROW }));
+        },
+        focusSectionStart() {
+            focusCell(focusedDate.set({ year: startYear }));
+        },
+        focusSectionEnd() {
+            focusCell(focusedDate.set({ year: endYear }));
+        },
+        focusPreviousSection(shouldSkip) {
+            focusCell(focusedDate.subtract({ years: shouldSkip ? YEARS_SKIP_AMOUNT : YEARS_PER_SECTION }));
+        },
+        focusNextSection(shouldSkip) {
+            focusCell(focusedDate.add({ years: shouldSkip ? YEARS_SKIP_AMOUNT : YEARS_PER_SECTION }));
+        },
+        isPreviousSectionInvalid() {
+            const current = (0, date_1.startOfYear)(focusedDate.set({ year: startYear }));
+            const prev = current.subtract({ days: 1 });
+            return ((0, utils_js_1.isDateInvalid)(current, calendarState.minValue, calendarState.maxValue) ||
+                (0, utils_js_1.isDateInvalid)(prev, calendarState.minValue, calendarState.maxValue) ||
+                (0, date_1.isSameDay)(prev, current));
+        },
+        isNextSectionInvalid() {
+            const current = (0, date_1.endOfYear)(focusedDate.set({ year: endYear }));
+            const next = current.add({ days: 1 });
+            return ((0, utils_js_1.isDateInvalid)(current, calendarState.minValue, calendarState.maxValue) ||
+                (0, utils_js_1.isDateInvalid)(next, calendarState.minValue, calendarState.maxValue) ||
+                (0, date_1.isSameDay)(next, current));
+        },
+        selectFocusedDate() {
+            switchToView('year');
+        },
+        isCellDisabled(date) {
+            return ((0, utils_js_1.isDateInvalid)((0, date_1.endOfYear)(date), calendarState.minValue, null) ||
+                (0, utils_js_1.isDateInvalid)((0, date_1.startOfYear)(date), null, calendarState.maxValue));
+        },
+        isCellSelected(date) {
+            return calendarState.value !== null && (0, date_1.isSameYear)(date, calendarState.value);
+        },
+        isCellTabbable(date) {
+            return (0, date_1.isSameYear)(date, focusedDate);
+        },
+    };
+}
+//# sourceMappingURL=use-multi-year-view-state.js.map