@cimpress-ui/react 0.3.0 → 1.0.0

package/dist/commonjs/components/dialog-root/dialog-root.js

@@ -0,0 +1,15 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogRoot = DialogRoot;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_aria_components_1 = require("react-aria-components");
+/**
+ * Encapsulates a dialog trigger and its associated dialog.
+ * The trigger can be any Cimpress UI button, and the dialog will be displayed when the trigger is activated.
+ */
+function DialogRoot(props) {
+    return (0, jsx_runtime_1.jsx)(react_aria_components_1.DialogTrigger, { ...props });
+}
+DialogRoot.displayName = 'DialogRoot';
+//# sourceMappingURL=dialog-root.js.map

package/dist/commonjs/components/dialog-root/dialog-root.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-root.js","sourceRoot":"","sources":["../../../../src/components/dialog-root/dialog-root.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;AAoBb,gCAEC;;AAnBD,iEAA0E;AAa1E;;;GAGG;AACH,SAAgB,UAAU,CAAC,KAAsB;IAC/C,OAAO,uBAAC,qCAAgB,OAAK,KAAK,GAAI,CAAC;AACzC,CAAC;AAED,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["'use client';\n\nimport type { ReactNode } from 'react';\nimport { DialogTrigger as RACDialogTrigger } from 'react-aria-components';\n\nexport interface DialogRootProps {\n  /** The dialog trigger with its associated dialog. Provide the trigger as the first child, and the dialog as the second child. */\n  children: ReactNode;\n  /** Whether the dialog is open (controlled). */\n  isOpen?: boolean;\n  /** Whether the dialog is open by default (uncontrolled). */\n  defaultOpen?: boolean;\n  /** Handler that is called when the dialog's open state changes. */\n  onOpenChange?: (isOpen: boolean) => void;\n}\n\n/**\n * Encapsulates a dialog trigger and its associated dialog.\n * The trigger can be any Cimpress UI button, and the dialog will be displayed when the trigger is activated.\n */\nexport function DialogRoot(props: DialogRootProps) {\n  return <RACDialogTrigger {...props} />;\n}\n\nDialogRoot.displayName = 'DialogRoot';\n"]}

package/dist/commonjs/components/disclosure/context.d.ts

@@ -0,0 +1,3 @@
+export type DisclosureVariant = 'base' | 'subtle';
+export type DisclosureSize = 'small' | 'medium';
+//# sourceMappingURL=context.d.ts.map

package/dist/commonjs/components/disclosure/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../src/components/disclosure/context.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,QAAQ,CAAC;AAClD,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,QAAQ,CAAC"}

package/dist/commonjs/components/disclosure/context.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DisclosureContext = void 0;
+const react_1 = require("react");
+/** @internal */
+exports.DisclosureContext = (0, react_1.createContext)(null);
+//# sourceMappingURL=context.js.map

package/dist/commonjs/components/disclosure/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sourceRoot":"","sources":["../../../../src/components/disclosure/context.ts"],"names":[],"mappings":";;;AAAA,iCAAsC;AAWtC,gBAAgB;AACH,QAAA,iBAAiB,GAAG,IAAA,qBAAa,EAAgC,IAAI,CAAC,CAAC","sourcesContent":["import { createContext } from 'react';\n\nexport type DisclosureVariant = 'base' | 'subtle';\nexport type DisclosureSize = 'small' | 'medium';\n\n/** @internal */\nexport interface DisclosureContextValue {\n  variant: DisclosureVariant;\n  size: DisclosureSize;\n}\n\n/** @internal */\nexport const DisclosureContext = createContext<DisclosureContextValue | null>(null);\n"]}

package/dist/commonjs/components/disclosure/disclosure-group.d.ts

@@ -1,15 +1,26 @@
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import { type DisclosureGroupProps as RACDisclosureGroupProps } from 'react-aria-components';
 import type { CommonProps } from '../types.js';
-export interface UNSTABLE_DisclosureGroupProps extends CommonProps, Pick<RACDisclosureGroupProps, 'isDisabled' | 'allowsMultipleExpanded' | 'defaultExpandedKeys' | 'expandedKeys' | 'onExpandedChange'> {
+import { type DisclosureSize, type DisclosureVariant } from './context.js';
+export interface DisclosureGroupProps extends CommonProps, Pick<RACDisclosureGroupProps, 'isDisabled' | 'allowsMultipleExpanded' | 'defaultExpandedKeys' | 'expandedKeys' | 'onExpandedChange'> {
     /** The disclosures to group together. */
     children: ReactNode;
+    /**
+     * Determines the visual appearance of disclosures within this group.
+     * @default 'base'
+     */
+    variant?: DisclosureVariant;
+    /**
+     * Determines the size of disclosures within this group.
+     * @default 'medium'
+     */
+    size?: DisclosureSize;
 }
 /**
  * Displays a grouping of related disclosures.
  *
  * See [disclosure usage guidelines](https://ui.cimpress.io/components/disclosure/).
  */
-declare const _DisclosureGroup: (props: UNSTABLE_DisclosureGroupProps & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
-export { _DisclosureGroup as UNSTABLE_DisclosureGroup };
+declare const _DisclosureGroup: (props: DisclosureGroupProps & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
+export { _DisclosureGroup as DisclosureGroup };
 //# sourceMappingURL=disclosure-group.d.ts.map

package/dist/commonjs/components/disclosure/disclosure-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"disclosure-group.d.ts","sourceRoot":"","sources":["../../../../src/components/disclosure/disclosure-group.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAEL,KAAK,oBAAoB,IAAI,uBAAuB,EACrD,MAAM,uBAAuB,CAAC;AAG/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,WAAW,6BACf,SAAQ,WAAW,EACjB,IAAI,CACF,uBAAuB,EACvB,YAAY,GAAG,wBAAwB,GAAG,qBAAqB,GAAG,cAAc,GAAG,kBAAkB,CACtG;IACH,yCAAyC;IACzC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAkBD;;;;GAIG;AACH,QAAA,MAAM,gBAAgB,+KAA0E,CAAC;AAEjG,OAAO,EAAE,gBAAgB,IAAI,wBAAwB,EAAE,CAAC"}
+{"version":3,"file":"disclosure-group.d.ts","sourceRoot":"","sources":["../../../../src/components/disclosure/disclosure-group.tsx"],"names":[],"mappings":"AAGA,OAAO,EAA8B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACnE,OAAO,EAEL,KAAK,oBAAoB,IAAI,uBAAuB,EACrD,MAAM,uBAAuB,CAAC;AAG/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAGL,KAAK,cAAc,EACnB,KAAK,iBAAiB,EACvB,MAAM,cAAc,CAAC;AAEtB,MAAM,WAAW,oBACf,SAAQ,WAAW,EACjB,IAAI,CACF,uBAAuB,EACvB,YAAY,GAAG,wBAAwB,GAAG,qBAAqB,GAAG,cAAc,GAAG,kBAAkB,CACtG;IACH,yCAAyC;IACzC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B;;;OAGG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;CACvB;AA4BD;;;;GAIG;AACH,QAAA,MAAM,gBAAgB,sKAAiE,CAAC;AAExF,OAAO,EAAE,gBAAgB,IAAI,eAAe,EAAE,CAAC"}

package/dist/commonjs/components/disclosure/disclosure-group.js

@@ -4,20 +4,26 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UNSTABLE_DisclosureGroup = void 0;
+exports.DisclosureGroup = 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 with_style_props_js_1 = require("../../with-style-props.js");
-function UNSTABLE_DisclosureGroup({ children, UNSAFE_className, UNSAFE_style, ...props }, ref) {
-    return ((0, jsx_runtime_1.jsx)(react_aria_components_1.DisclosureGroup, { ...props, ref: ref, className: (0, clsx_1.default)('cim-disclosure-group', UNSAFE_className), style: UNSAFE_style, children: children }));
+const context_js_1 = require("./context.js");
+function DisclosureGroup({ children, variant = 'base', size = 'medium', UNSAFE_className, UNSAFE_style, ...props }, ref) {
+    const disclosureContext = (0, react_1.useMemo)(() => ({
+        variant,
+        size,
+    }), [variant, size]);
+    return ((0, jsx_runtime_1.jsx)(react_aria_components_1.DisclosureGroup, { ...props, ref: ref, className: (0, clsx_1.default)('cim-disclosure-group', UNSAFE_className), style: UNSAFE_style, "data-variant": variant, "data-size": size, children: (0, jsx_runtime_1.jsx)(context_js_1.DisclosureContext.Provider, { value: disclosureContext, children: children }) }));
 }
 /**
  * Displays a grouping of related disclosures.
  *
  * See [disclosure usage guidelines](https://ui.cimpress.io/components/disclosure/).
  */
-const _DisclosureGroup = (0, with_style_props_js_1.withStyleProps)((0, forward_ref_js_1.forwardRef)(UNSTABLE_DisclosureGroup), 'DisclosureGroup');
-exports.UNSTABLE_DisclosureGroup = _DisclosureGroup;
+const _DisclosureGroup = (0, with_style_props_js_1.withStyleProps)((0, forward_ref_js_1.forwardRef)(DisclosureGroup), 'DisclosureGroup');
+exports.DisclosureGroup = _DisclosureGroup;
 //# sourceMappingURL=disclosure-group.js.map

package/dist/commonjs/components/disclosure/disclosure-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"disclosure-group.js","sourceRoot":"","sources":["../../../../src/components/disclosure/disclosure-group.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AAExB,iEAG+B;AAC/B,yDAAkD;AAClD,mEAA2D;AAa3D,SAAS,wBAAwB,CAC/B,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAiC,EACrF,GAAiC;IAEjC,OAAO,CACL,uBAAC,uCAAkB,OACb,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAI,EAAC,sBAAsB,EAAE,gBAAgB,CAAC,EACzD,KAAK,EAAE,YAAY,YAElB,QAAQ,GACU,CACtB,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,gBAAgB,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,wBAAwB,CAAC,EAAE,iBAAiB,CAAC,CAAC;AAEpE,oDAAwB","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport {\n  DisclosureGroup as RACDisclosureGroup,\n  type DisclosureGroupProps as RACDisclosureGroupProps,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { CommonProps } from '../types.js';\n\nexport interface UNSTABLE_DisclosureGroupProps\n  extends CommonProps,\n    Pick<\n      RACDisclosureGroupProps,\n      'isDisabled' | 'allowsMultipleExpanded' | 'defaultExpandedKeys' | 'expandedKeys' | 'onExpandedChange'\n    > {\n  /** The disclosures to group together. */\n  children: ReactNode;\n}\n\nfunction UNSTABLE_DisclosureGroup(\n  { children, UNSAFE_className, UNSAFE_style, ...props }: UNSTABLE_DisclosureGroupProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    <RACDisclosureGroup\n      {...props}\n      ref={ref}\n      className={clsx('cim-disclosure-group', UNSAFE_className)}\n      style={UNSAFE_style}\n    >\n      {children}\n    </RACDisclosureGroup>\n  );\n}\n\n/**\n * Displays a grouping of related disclosures.\n *\n * See [disclosure usage guidelines](https://ui.cimpress.io/components/disclosure/).\n */\nconst _DisclosureGroup = withStyleProps(forwardRef(UNSTABLE_DisclosureGroup), 'DisclosureGroup');\n\nexport { _DisclosureGroup as UNSTABLE_DisclosureGroup };\n"]}
+{"version":3,"file":"disclosure-group.js","sourceRoot":"","sources":["../../../../src/components/disclosure/disclosure-group.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AACxB,iCAAmE;AACnE,iEAG+B;AAC/B,yDAAkD;AAClD,mEAA2D;AAE3D,6CAKsB;AAsBtB,SAAS,eAAe,CACtB,EAAE,QAAQ,EAAE,OAAO,GAAG,MAAM,EAAE,IAAI,GAAG,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAwB,EAC/G,GAAiC;IAEjC,MAAM,iBAAiB,GAA2B,IAAA,eAAO,EACvD,GAAG,EAAE,CAAC,CAAC;QACL,OAAO;QACP,IAAI;KACL,CAAC,EACF,CAAC,OAAO,EAAE,IAAI,CAAC,CAChB,CAAC;IAEF,OAAO,CACL,uBAAC,uCAAkB,OACb,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAI,EAAC,sBAAsB,EAAE,gBAAgB,CAAC,EACzD,KAAK,EAAE,YAAY,kBACL,OAAO,eACV,IAAI,YAEf,uBAAC,8BAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,iBAAiB,YAAG,QAAQ,GAA8B,GAC1E,CACtB,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,gBAAgB,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,eAAe,CAAC,EAAE,iBAAiB,CAAC,CAAC;AAE3D,2CAAe","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { useMemo, type ForwardedRef, type ReactNode } from 'react';\nimport {\n  DisclosureGroup as RACDisclosureGroup,\n  type DisclosureGroupProps as RACDisclosureGroupProps,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { CommonProps } from '../types.js';\nimport {\n  DisclosureContext,\n  type DisclosureContextValue,\n  type DisclosureSize,\n  type DisclosureVariant,\n} from './context.js';\n\nexport interface DisclosureGroupProps\n  extends CommonProps,\n    Pick<\n      RACDisclosureGroupProps,\n      'isDisabled' | 'allowsMultipleExpanded' | 'defaultExpandedKeys' | 'expandedKeys' | 'onExpandedChange'\n    > {\n  /** The disclosures to group together. */\n  children: ReactNode;\n  /**\n   * Determines the visual appearance of disclosures within this group.\n   * @default 'base'\n   */\n  variant?: DisclosureVariant;\n  /**\n   * Determines the size of disclosures within this group.\n   * @default 'medium'\n   */\n  size?: DisclosureSize;\n}\n\nfunction DisclosureGroup(\n  { children, variant = 'base', size = 'medium', UNSAFE_className, UNSAFE_style, ...props }: DisclosureGroupProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const disclosureContext: DisclosureContextValue = useMemo(\n    () => ({\n      variant,\n      size,\n    }),\n    [variant, size],\n  );\n\n  return (\n    <RACDisclosureGroup\n      {...props}\n      ref={ref}\n      className={clsx('cim-disclosure-group', UNSAFE_className)}\n      style={UNSAFE_style}\n      data-variant={variant}\n      data-size={size}\n    >\n      <DisclosureContext.Provider value={disclosureContext}>{children}</DisclosureContext.Provider>\n    </RACDisclosureGroup>\n  );\n}\n\n/**\n * Displays a grouping of related disclosures.\n *\n * See [disclosure usage guidelines](https://ui.cimpress.io/components/disclosure/).\n */\nconst _DisclosureGroup = withStyleProps(forwardRef(DisclosureGroup), 'DisclosureGroup');\n\nexport { _DisclosureGroup as DisclosureGroup };\n"]}

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

@@ -1,11 +1,42 @@
-import type { ReactNode } from 'react';
+import { type JSX, type ReactNode } from 'react';
 import { type DisclosureProps as RACDisclosureProps } from 'react-aria-components';
 import type { CommonProps } from '../types.js';
-export interface UNSTABLE_DisclosureProps extends Omit<CommonProps, 'id'>, Pick<RACDisclosureProps, 'id' | 'isDisabled' | 'defaultExpanded' | 'isExpanded' | 'onExpandedChange'> {
+import { type DisclosureSize, type DisclosureVariant } from './context.js';
+export interface DisclosureProps extends Omit<CommonProps, 'id'>, Pick<RACDisclosureProps, 'id' | 'isDisabled' | 'defaultExpanded' | 'isExpanded' | 'onExpandedChange'> {
     /** The content to display when the disclosure is expanded. */
     children: ReactNode;
+    /**
+     * Determines the visual appearance of the disclosure.
+     * If the disclosure is part of a group, this prop has no effect - provide `variant` to `DisclosureGroup` instead.
+     * @default 'base'
+     */
+    variant?: DisclosureVariant;
+    /**
+     * Determines the size of the disclosure.
+     * If the disclosure is part of a group, this prop has no effect - provide `size` to `DisclosureGroup` instead.
+     * @default 'medium'
+     */
+    size?: DisclosureSize;
     /** The title that is always visible in the disclosure header. */
     title: string;
+    /**
+     * An icon displayed before the disclosure title.
+     *
+     * Should not be used when size is set to `'small'` as icons won't be displayed at this size.
+     */
+    iconStart?: ReactNode;
+    /**
+     * An icon displayed after the disclosure title.
+     *
+     * Should not be used when size is set to `'small'` as icons won't be displayed at this size.
+     */
+    iconEnd?: ReactNode;
+    /**
+     * The badge displayed in the disclosure header.
+     *
+     * Should not be used when size is set to `'small'` as the badge won't be displayed at this size.
+     */
+    badge?: ReactNode;
     /** The actions displayed in the disclosure header. */
     actions?: ReactNode;
 }
@@ -14,6 +45,6 @@ export interface UNSTABLE_DisclosureProps extends Omit<CommonProps, 'id'>, Pick<
  *
  * See [disclosure usage guidelines](https://ui.cimpress.io/components/disclosure/).
  */
-declare const _Disclosure: (props: UNSTABLE_DisclosureProps & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
-export { _Disclosure as UNSTABLE_Disclosure };
+declare const _Disclosure: (props: DisclosureProps & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => JSX.Element | null;
+export { _Disclosure as Disclosure };
 //# sourceMappingURL=disclosure.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"disclosure.d.ts","sourceRoot":"","sources":["../../../../src/components/disclosure/disclosure.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAKL,KAAK,eAAe,IAAI,kBAAkB,EAC3C,MAAM,uBAAuB,CAAC;AAI/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,MAAM,WAAW,wBACf,SAAQ,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,EAC7B,IAAI,CAAC,kBAAkB,EAAE,IAAI,GAAG,YAAY,GAAG,iBAAiB,GAAG,YAAY,GAAG,kBAAkB,CAAC;IACvG,8DAA8D;IAC9D,QAAQ,EAAE,SAAS,CAAC;IACpB,iEAAiE;IACjE,KAAK,EAAE,MAAM,CAAC;IACd,sDAAsD;IACtD,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AA0BD;;;;GAIG;AACH,QAAA,MAAM,WAAW,0KAAgE,CAAC;AAElF,OAAO,EAAE,WAAW,IAAI,mBAAmB,EAAE,CAAC"}
+{"version":3,"file":"disclosure.d.ts","sourceRoot":"","sources":["../../../../src/components/disclosure/disclosure.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,GAAG,EAAiC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAChF,OAAO,EAKL,KAAK,eAAe,IAAI,kBAAkB,EAC3C,MAAM,uBAAuB,CAAC;AAI/B,OAAO,KAAK,EAAE,WAAW,EAAa,MAAM,aAAa,CAAC;AAE1D,OAAO,EAAqB,KAAK,cAAc,EAAE,KAAK,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAO9F,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,EAC7B,IAAI,CAAC,kBAAkB,EAAE,IAAI,GAAG,YAAY,GAAG,iBAAiB,GAAG,YAAY,GAAG,kBAAkB,CAAC;IACvG,8DAA8D;IAC9D,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B;;;;OAIG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,iEAAiE;IACjE,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,sDAAsD;IACtD,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AA8DD;;;;GAIG;AACH,QAAA,MAAM,WAAW,iJAAuD,CAAC;AAEzE,OAAO,EAAE,WAAW,IAAI,UAAU,EAAE,CAAC"}

package/dist/commonjs/components/disclosure/disclosure.js

@@ -4,22 +4,33 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UNSTABLE_Disclosure = void 0;
+exports.Disclosure = 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("../../icons/index.js");
 const with_style_props_js_1 = require("../../with-style-props.js");
 const text_js_1 = require("../typography/text.js");
-function UNSTABLE_Disclosure({ children, title, actions, UNSAFE_className, UNSAFE_style, ...props }, ref) {
-    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.Disclosure, { ...props, ref: ref, className: (0, clsx_1.default)('cim-disclosure', UNSAFE_className), style: UNSAFE_style, children: [(0, jsx_runtime_1.jsxs)("div", { className: "cim-disclosure-heading-wrapper", children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.Heading, { className: "cim-disclosure-heading", children: (0, jsx_runtime_1.jsxs)(react_aria_components_1.Button, { className: "cim-disclosure-button", slot: "trigger", children: [(0, jsx_runtime_1.jsx)(index_js_1.IconChevronExpand, { size: 24, UNSAFE_className: "cim-disclosure-icon" }), (0, jsx_runtime_1.jsx)(text_js_1.Text, { as: "span", variant: "body-semibold", children: title })] }) }), actions && (0, jsx_runtime_1.jsx)("div", { className: "cim-disclosure-actions", children: actions })] }), (0, jsx_runtime_1.jsx)(react_aria_components_1.DisclosurePanel, { className: "cim-disclosure-panel", children: (0, jsx_runtime_1.jsx)("div", { className: "cim-disclosure-panel-content", children: children }) })] }));
+const context_js_1 = require("./context.js");
+const iconMap = {
+    medium: index_js_1.IconChevronRight,
+    small: index_js_1.IconChevronRightBold,
+};
+function Disclosure({ children, variant: ownVariant = 'base', size: ownSize = 'medium', title, iconStart, iconEnd, badge, actions, UNSAFE_className, UNSAFE_style, ...props }, ref) {
+    const disclosureContext = (0, react_1.useContext)(context_js_1.DisclosureContext);
+    const variant = disclosureContext?.variant ?? ownVariant;
+    const size = disclosureContext?.size ?? ownSize;
+    const isMediumSize = size === 'medium';
+    const Icon = iconMap[size];
+    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.Disclosure, { ...props, ref: ref, className: (0, clsx_1.default)('cim-disclosure', UNSAFE_className), style: UNSAFE_style, "data-variant": variant, "data-size": size, children: [(0, jsx_runtime_1.jsxs)("div", { className: "cim-disclosure-heading-wrapper", children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.Heading, { className: "cim-disclosure-heading", children: (0, jsx_runtime_1.jsxs)(react_aria_components_1.Button, { className: "cim-disclosure-button", slot: "trigger", children: [(0, jsx_runtime_1.jsx)(Icon, { size: isMediumSize ? 32 : 16, UNSAFE_className: "cim-disclosure-icon" }), isMediumSize && iconStart, (0, jsx_runtime_1.jsx)(text_js_1.Text, { as: "h3", variant: isMediumSize ? 'body' : 'medium', children: title }), isMediumSize && iconEnd, isMediumSize && badge && (0, jsx_runtime_1.jsx)("div", { className: "cim-disclosure-badge", children: badge })] }) }), actions && (0, jsx_runtime_1.jsx)("div", { className: "cim-disclosure-actions", children: actions })] }), (0, jsx_runtime_1.jsx)(react_aria_components_1.DisclosurePanel, { className: "cim-disclosure-panel", children: (0, jsx_runtime_1.jsx)("div", { className: "cim-disclosure-panel-content", children: (0, jsx_runtime_1.jsx)(context_js_1.DisclosureContext.Provider, { value: null, children: children }) }) })] }));
 }
 /**
  * Displays a collapsible section of content.
  *
  * See [disclosure usage guidelines](https://ui.cimpress.io/components/disclosure/).
  */
-const _Disclosure = (0, with_style_props_js_1.withStyleProps)((0, forward_ref_js_1.forwardRef)(UNSTABLE_Disclosure), 'Disclosure');
-exports.UNSTABLE_Disclosure = _Disclosure;
+const _Disclosure = (0, with_style_props_js_1.withStyleProps)((0, forward_ref_js_1.forwardRef)(Disclosure), 'Disclosure');
+exports.Disclosure = _Disclosure;
 //# sourceMappingURL=disclosure.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"disclosure.js","sourceRoot":"","sources":["../../../../src/components/disclosure/disclosure.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AAExB,iEAM+B;AAC/B,yDAAkD;AAClD,mDAAyD;AACzD,mEAA2D;AAE3D,mDAA6C;AAa7C,SAAS,mBAAmB,CAC1B,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAA4B,EAChG,GAAiC;IAEjC,OAAO,CACL,wBAAC,kCAAa,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAA,cAAI,EAAC,gBAAgB,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,aAC1G,iCAAK,SAAS,EAAC,gCAAgC,aAC7C,uBAAC,+BAAU,IAAC,SAAS,EAAC,wBAAwB,YAC5C,wBAAC,8BAAS,IAAC,SAAS,EAAC,uBAAuB,EAAC,IAAI,EAAC,SAAS,aACzD,uBAAC,4BAAiB,IAAC,IAAI,EAAE,EAAE,EAAE,gBAAgB,EAAC,qBAAqB,GAAG,EACtE,uBAAC,cAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,eAAe,YACpC,KAAK,GACD,IACG,GACD,EACZ,OAAO,IAAI,gCAAK,SAAS,EAAC,wBAAwB,YAAE,OAAO,GAAO,IAC/D,EACN,uBAAC,uCAAkB,IAAC,SAAS,EAAC,sBAAsB,YAClD,gCAAK,SAAS,EAAC,8BAA8B,YAAE,QAAQ,GAAO,GAC3C,IACP,CACjB,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,WAAW,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,mBAAmB,CAAC,EAAE,YAAY,CAAC,CAAC;AAE1D,0CAAmB","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport {\n  Disclosure as RACDisclosure,\n  Button as RACButton,\n  Heading as RACHeading,\n  DisclosurePanel as RACDisclosurePanel,\n  type DisclosureProps as RACDisclosureProps,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconChevronExpand } from '../../icons/index.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { CommonProps } from '../types.js';\nimport { Text } from '../typography/text.js';\n\nexport interface UNSTABLE_DisclosureProps\n  extends Omit<CommonProps, 'id'>,\n    Pick<RACDisclosureProps, 'id' | 'isDisabled' | 'defaultExpanded' | 'isExpanded' | 'onExpandedChange'> {\n  /** The content to display when the disclosure is expanded. */\n  children: ReactNode;\n  /** The title that is always visible in the disclosure header. */\n  title: string;\n  /** The actions displayed in the disclosure header. */\n  actions?: ReactNode;\n}\n\nfunction UNSTABLE_Disclosure(\n  { children, title, actions, UNSAFE_className, UNSAFE_style, ...props }: UNSTABLE_DisclosureProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    <RACDisclosure {...props} ref={ref} className={clsx('cim-disclosure', UNSAFE_className)} style={UNSAFE_style}>\n      <div className=\"cim-disclosure-heading-wrapper\">\n        <RACHeading className=\"cim-disclosure-heading\">\n          <RACButton className=\"cim-disclosure-button\" slot=\"trigger\">\n            <IconChevronExpand size={24} UNSAFE_className=\"cim-disclosure-icon\" />\n            <Text as=\"span\" variant=\"body-semibold\">\n              {title}\n            </Text>\n          </RACButton>\n        </RACHeading>\n        {actions && <div className=\"cim-disclosure-actions\">{actions}</div>}\n      </div>\n      <RACDisclosurePanel className=\"cim-disclosure-panel\">\n        <div className=\"cim-disclosure-panel-content\">{children}</div>\n      </RACDisclosurePanel>\n    </RACDisclosure>\n  );\n}\n\n/**\n * Displays a collapsible section of content.\n *\n * See [disclosure usage guidelines](https://ui.cimpress.io/components/disclosure/).\n */\nconst _Disclosure = withStyleProps(forwardRef(UNSTABLE_Disclosure), 'Disclosure');\n\nexport { _Disclosure as UNSTABLE_Disclosure };\n"]}
+{"version":3,"file":"disclosure.js","sourceRoot":"","sources":["../../../../src/components/disclosure/disclosure.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AACxB,iCAAgF;AAChF,iEAM+B;AAC/B,yDAAkD;AAClD,mDAA8E;AAC9E,mEAA2D;AAE3D,mDAA6C;AAC7C,6CAA8F;AAE9F,MAAM,OAAO,GAA8D;IACzE,MAAM,EAAE,2BAAgB;IACxB,KAAK,EAAE,+BAAoB;CAC5B,CAAC;AA2CF,SAAS,UAAU,CACjB,EACE,QAAQ,EACR,OAAO,EAAE,UAAU,GAAG,MAAM,EAC5B,IAAI,EAAE,OAAO,GAAG,QAAQ,EACxB,KAAK,EACL,SAAS,EACT,OAAO,EACP,KAAK,EACL,OAAO,EACP,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACQ,EAClB,GAAiC;IAEjC,MAAM,iBAAiB,GAAG,IAAA,kBAAU,EAAC,8BAAiB,CAAC,CAAC;IACxD,MAAM,OAAO,GAAG,iBAAiB,EAAE,OAAO,IAAI,UAAU,CAAC;IACzD,MAAM,IAAI,GAAG,iBAAiB,EAAE,IAAI,IAAI,OAAO,CAAC;IAChD,MAAM,YAAY,GAAG,IAAI,KAAK,QAAQ,CAAC;IAEvC,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAE3B,OAAO,CACL,wBAAC,kCAAa,OACR,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAI,EAAC,gBAAgB,EAAE,gBAAgB,CAAC,EACnD,KAAK,EAAE,YAAY,kBACL,OAAO,eACV,IAAI,aAEf,iCAAK,SAAS,EAAC,gCAAgC,aAC7C,uBAAC,+BAAU,IAAC,SAAS,EAAC,wBAAwB,YAC5C,wBAAC,8BAAS,IAAC,SAAS,EAAC,uBAAuB,EAAC,IAAI,EAAC,SAAS,aACzD,uBAAC,IAAI,IAAC,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,gBAAgB,EAAC,qBAAqB,GAAG,EAE5E,YAAY,IAAI,SAAS,EAC1B,uBAAC,cAAI,IAAC,EAAE,EAAC,IAAI,EAAC,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,YACpD,KAAK,GACD,EACN,YAAY,IAAI,OAAO,EAEvB,YAAY,IAAI,KAAK,IAAI,gCAAK,SAAS,EAAC,sBAAsB,YAAE,KAAK,GAAO,IACnE,GACD,EAEZ,OAAO,IAAI,gCAAK,SAAS,EAAC,wBAAwB,YAAE,OAAO,GAAO,IAC/D,EAEN,uBAAC,uCAAkB,IAAC,SAAS,EAAC,sBAAsB,YAClD,gCAAK,SAAS,EAAC,8BAA8B,YAE3C,uBAAC,8BAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,YAAG,QAAQ,GAA8B,GAC5E,GACa,IACP,CACjB,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,WAAW,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,UAAU,CAAC,EAAE,YAAY,CAAC,CAAC;AAEjD,iCAAU","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { type JSX, useContext, type ForwardedRef, type ReactNode } from 'react';\nimport {\n  Disclosure as RACDisclosure,\n  Button as RACButton,\n  Heading as RACHeading,\n  DisclosurePanel as RACDisclosurePanel,\n  type DisclosureProps as RACDisclosureProps,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconChevronRight, IconChevronRightBold } from '../../icons/index.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { CommonProps, IconProps } from '../types.js';\nimport { Text } from '../typography/text.js';\nimport { DisclosureContext, type DisclosureSize, type DisclosureVariant } from './context.js';\n\nconst iconMap: Record<DisclosureSize, (props: IconProps) => JSX.Element> = {\n  medium: IconChevronRight,\n  small: IconChevronRightBold,\n};\n\nexport interface DisclosureProps\n  extends Omit<CommonProps, 'id'>,\n    Pick<RACDisclosureProps, 'id' | 'isDisabled' | 'defaultExpanded' | 'isExpanded' | 'onExpandedChange'> {\n  /** The content to display when the disclosure is expanded. */\n  children: ReactNode;\n  /**\n   * Determines the visual appearance of the disclosure.\n   * If the disclosure is part of a group, this prop has no effect - provide `variant` to `DisclosureGroup` instead.\n   * @default 'base'\n   */\n  variant?: DisclosureVariant;\n  /**\n   * Determines the size of the disclosure.\n   * If the disclosure is part of a group, this prop has no effect - provide `size` to `DisclosureGroup` instead.\n   * @default 'medium'\n   */\n  size?: DisclosureSize;\n  /** The title that is always visible in the disclosure header. */\n  title: string;\n  /**\n   * An icon displayed before the disclosure title.\n   *\n   * Should not be used when size is set to `'small'` as icons won't be displayed at this size.\n   */\n  iconStart?: ReactNode;\n  /**\n   * An icon displayed after the disclosure title.\n   *\n   * Should not be used when size is set to `'small'` as icons won't be displayed at this size.\n   */\n  iconEnd?: ReactNode;\n  /**\n   * The badge displayed in the disclosure header.\n   *\n   * Should not be used when size is set to `'small'` as the badge won't be displayed at this size.\n   */\n  badge?: ReactNode;\n  /** The actions displayed in the disclosure header. */\n  actions?: ReactNode;\n}\n\nfunction Disclosure(\n  {\n    children,\n    variant: ownVariant = 'base',\n    size: ownSize = 'medium',\n    title,\n    iconStart,\n    iconEnd,\n    badge,\n    actions,\n    UNSAFE_className,\n    UNSAFE_style,\n    ...props\n  }: DisclosureProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const disclosureContext = useContext(DisclosureContext);\n  const variant = disclosureContext?.variant ?? ownVariant;\n  const size = disclosureContext?.size ?? ownSize;\n  const isMediumSize = size === 'medium';\n\n  const Icon = iconMap[size];\n\n  return (\n    <RACDisclosure\n      {...props}\n      ref={ref}\n      className={clsx('cim-disclosure', UNSAFE_className)}\n      style={UNSAFE_style}\n      data-variant={variant}\n      data-size={size}\n    >\n      <div className=\"cim-disclosure-heading-wrapper\">\n        <RACHeading className=\"cim-disclosure-heading\">\n          <RACButton className=\"cim-disclosure-button\" slot=\"trigger\">\n            <Icon size={isMediumSize ? 32 : 16} UNSAFE_className=\"cim-disclosure-icon\" />\n\n            {isMediumSize && iconStart}\n            <Text as=\"h3\" variant={isMediumSize ? 'body' : 'medium'}>\n              {title}\n            </Text>\n            {isMediumSize && iconEnd}\n\n            {isMediumSize && badge && <div className=\"cim-disclosure-badge\">{badge}</div>}\n          </RACButton>\n        </RACHeading>\n\n        {actions && <div className=\"cim-disclosure-actions\">{actions}</div>}\n      </div>\n\n      <RACDisclosurePanel className=\"cim-disclosure-panel\">\n        <div className=\"cim-disclosure-panel-content\">\n          {/* Reset disclosure context to allow nesting disclosures */}\n          <DisclosureContext.Provider value={null}>{children}</DisclosureContext.Provider>\n        </div>\n      </RACDisclosurePanel>\n    </RACDisclosure>\n  );\n}\n\n/**\n * Displays a collapsible section of content.\n *\n * See [disclosure usage guidelines](https://ui.cimpress.io/components/disclosure/).\n */\nconst _Disclosure = withStyleProps(forwardRef(Disclosure), 'Disclosure');\n\nexport { _Disclosure as Disclosure };\n"]}

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

@@ -0,0 +1,12 @@
+import type { CommonProps } from '../types.js';
+export interface DividerProps extends CommonProps {
+    /**
+     * The orientation of the divider (horizontal or vertical).
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
+}
+/** Renders a divider between adjacent content. */
+declare const _Divider: (props: DividerProps & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
+export { _Divider as Divider };
+//# sourceMappingURL=divider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"divider.d.ts","sourceRoot":"","sources":["../../../../src/components/divider/divider.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,WAAW,YAAa,SAAQ,WAAW;IAC/C;;;OAGG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACzC;AAkBD,kDAAkD;AAClD,QAAA,MAAM,QAAQ,8JAAiD,CAAC;AAEhE,OAAO,EAAE,QAAQ,IAAI,OAAO,EAAE,CAAC"}

package/dist/commonjs/components/divider/divider.js

@@ -0,0 +1,19 @@
+'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.Divider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = __importDefault(require("clsx"));
+const react_aria_components_1 = require("react-aria-components");
+const forward_ref_js_1 = require("../../forward-ref.js");
+const with_style_props_js_1 = require("../../with-style-props.js");
+function Divider({ orientation = 'horizontal', UNSAFE_className, UNSAFE_style, ...props }, ref) {
+    return ((0, jsx_runtime_1.jsx)(react_aria_components_1.Separator, { ...props, ref: ref, className: (0, clsx_1.default)('cim-divider', UNSAFE_className), style: UNSAFE_style, elementType: "div", orientation: orientation }));
+}
+/** Renders a divider between adjacent content. */
+const _Divider = (0, with_style_props_js_1.withStyleProps)((0, forward_ref_js_1.forwardRef)(Divider), 'Divider');
+exports.Divider = _Divider;
+//# sourceMappingURL=divider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"divider.js","sourceRoot":"","sources":["../../../../src/components/divider/divider.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AAExB,iEAAkE;AAClE,yDAAkD;AAClD,mEAA2D;AAW3D,SAAS,OAAO,CACd,EAAE,WAAW,GAAG,YAAY,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAgB,EACtF,GAAiC;IAEjC,OAAO,CACL,uBAAC,iCAAY,OACP,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAI,EAAC,aAAa,EAAE,gBAAgB,CAAC,EAChD,KAAK,EAAE,YAAY,EACnB,WAAW,EAAC,KAAK,EACjB,WAAW,EAAE,WAAW,GACxB,CACH,CAAC;AACJ,CAAC;AAED,kDAAkD;AAClD,MAAM,QAAQ,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,OAAO,CAAC,EAAE,SAAS,CAAC,CAAC;AAE3C,2BAAO","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\nimport { Separator as RACSeparator } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { CommonProps } from '../types.js';\n\nexport interface DividerProps extends CommonProps {\n  /**\n   * The orientation of the divider (horizontal or vertical).\n   * @default 'horizontal'\n   */\n  orientation?: 'horizontal' | 'vertical';\n}\n\nfunction Divider(\n  { orientation = 'horizontal', UNSAFE_className, UNSAFE_style, ...props }: DividerProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    <RACSeparator\n      {...props}\n      ref={ref}\n      className={clsx('cim-divider', UNSAFE_className)}\n      style={UNSAFE_style}\n      elementType=\"div\"\n      orientation={orientation}\n    />\n  );\n}\n\n/** Renders a divider between adjacent content. */\nconst _Divider = withStyleProps(forwardRef(Divider), 'Divider');\n\nexport { _Divider as Divider };\n"]}

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

@@ -0,0 +1,81 @@
+import { type ReactNode } from 'react';
+import type { AriaLabelingProps, CommonProps } from '../types.js';
+export interface UNSTABLE_DrawerRootProps {
+    /** The drawer trigger with its associated drawer. Provide the trigger as the first child, and the drawer as the second child. */
+    children: ReactNode;
+    /** Whether the drawer is open (controlled). */
+    isOpen?: boolean;
+    /** Whether the drawer is open by default (uncontrolled). */
+    defaultOpen?: boolean;
+    /** Handler that is called when the drawer's open state changes. */
+    onOpenChange?: (isOpen: boolean) => void;
+}
+/**
+ * Encapsulates a drawer trigger and its associated drawer.
+ * The trigger can be any Cimpress UI button, and the drawer will be displayed when the trigger is activated.
+ */
+export declare function UNSTABLE_DrawerRoot(props: UNSTABLE_DrawerRootProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace UNSTABLE_DrawerRoot {
+    var displayName: string;
+}
+export interface UNSTABLE_DrawerRenderProps {
+    /** Closes the drawer when called. */
+    close: () => void;
+}
+export interface UNSTABLE_DrawerProps extends CommonProps, AriaLabelingProps {
+    /** The contents of the drawer. A function may be provided to access a function to close the drawer. */
+    children: ReactNode | ((renderProps: UNSTABLE_DrawerRenderProps) => ReactNode);
+    /** The title of the drawer. */
+    title?: string;
+    /**
+     * The size of the drawer. This prop is ignored on small devices - drawers on small devices will always take up all available width.
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Whether to close the drawer when the user interacts outside of it or presses the Escape key.
+     * @default true
+     */
+    isDismissible?: boolean;
+    /**
+     * Whether the drawer is open (controlled).
+     * If using `DrawerRoot`, this prop has no effect - provide `isOpen` to `DrawerRoot` instead.
+     */
+    isOpen?: boolean;
+    /**
+     * Whether the drawer is open by default (uncontrolled).
+     * If using `DrawerRoot`, this prop has no effect - provide `defaultOpen` to `DrawerRoot` instead.
+     */
+    defaultOpen?: boolean;
+    /**
+     * Handler that is called when the drawer's open state changes.
+     * If using `DrawerRoot`, this prop has no effect - provide `onOpenChange` to `DrawerRoot` instead.
+     */
+    onOpenChange?: (isOpen: boolean) => void;
+}
+/**
+ * Displays an overlay element which blocks interaction with outside elements.
+ *
+ * See [drawer usage guidelines](https://ui.cimpress.io/components/drawer/).
+ */
+declare const _UNSTABLE_Drawer: (props: UNSTABLE_DrawerProps & import("react").RefAttributes<HTMLElement>) => import("react").JSX.Element | null;
+export { _UNSTABLE_Drawer as UNSTABLE_Drawer };
+export interface UNSTABLE_DrawerBodyProps {
+    /** The content to render within the drawer. */
+    children: ReactNode;
+}
+/** Renders content within `Drawer`. */
+export declare function UNSTABLE_DrawerBody(props: UNSTABLE_DrawerBodyProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace UNSTABLE_DrawerBody {
+    var displayName: string;
+}
+export interface UNSTABLE_DrawerActionsProps {
+    /** Actions that should be available in the drawer. */
+    children: ReactNode;
+}
+/** Renders actions within `Drawer`. */
+export declare function UNSTABLE_DrawerActions({ children, ...props }: UNSTABLE_DrawerActionsProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace UNSTABLE_DrawerActions {
+    var displayName: string;
+}
+//# sourceMappingURL=drawer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../../src/components/drawer/drawer.tsx"],"names":[],"mappings":"AAGA,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAcpE,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAGlE,MAAM,WAAW,wBAAwB;IACvC,iIAAiI;IACjI,QAAQ,EAAE,SAAS,CAAC;IACpB,+CAA+C;IAC/C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mEAAmE;IACnE,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,2CAElE;yBAFe,mBAAmB;;;AAMnC,MAAM,WAAW,0BAA0B;IACzC,qCAAqC;IACrC,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,MAAM,WAAW,oBAAqB,SAAQ,WAAW,EAAE,iBAAiB;IAC1E,uGAAuG;IACvG,QAAQ,EAAE,SAAS,GAAG,CAAC,CAAC,WAAW,EAAE,0BAA0B,KAAK,SAAS,CAAC,CAAC;IAC/E,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AA6DD;;;;GAIG;AACH,QAAA,MAAM,gBAAgB,kHAAwC,CAAC;AAE/D,OAAO,EAAE,gBAAgB,IAAI,eAAe,EAAE,CAAC;AAE/C,MAAM,WAAW,wBAAwB;IACvC,+CAA+C;IAC/C,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,uCAAuC;AACvC,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,2CAElE;yBAFe,mBAAmB;;;AAMnC,MAAM,WAAW,2BAA2B;IAC1C,sDAAsD;IACtD,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,uCAAuC;AACvC,wBAAgB,sBAAsB,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,2BAA2B,2CASzF;yBATe,sBAAsB"}

package/dist/commonjs/components/drawer/drawer.js

@@ -0,0 +1,59 @@
+'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.UNSTABLE_Drawer = void 0;
+exports.UNSTABLE_DrawerRoot = UNSTABLE_DrawerRoot;
+exports.UNSTABLE_DrawerBody = UNSTABLE_DrawerBody;
+exports.UNSTABLE_DrawerActions = UNSTABLE_DrawerActions;
+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 use_media_query_js_1 = require("../../utils/use-media-query.js");
+const use_production_warning_js_1 = require("../../utils/use-production-warning.js");
+const focusable_container_js_1 = require("../internal/focusable-container/focusable-container.js");
+const x_button_js_1 = require("../internal/x-button/x-button.js");
+const utils_js_1 = require("../typography/utils.js");
+/**
+ * Encapsulates a drawer trigger and its associated drawer.
+ * The trigger can be any Cimpress UI button, and the drawer will be displayed when the trigger is activated.
+ */
+function UNSTABLE_DrawerRoot(props) {
+    return (0, jsx_runtime_1.jsx)(react_aria_components_1.DialogTrigger, { ...props });
+}
+UNSTABLE_DrawerRoot.displayName = 'DrawerRoot';
+function UNSTABLE_Drawer({ children, title, size = 'medium', UNSAFE_className, UNSAFE_style, isDismissible = true, isOpen, defaultOpen, onOpenChange, ...props }, ref) {
+    const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
+    (0, use_production_warning_js_1.useProductionWarning)(() => {
+        if (!title && !ariaLabel && !ariaLabelledBy) {
+            console.warn('Drawer requires one of title / aria-label / aria-labelledby for accessibility');
+        }
+    }, [title, ariaLabel, ariaLabelledBy]);
+    const messages = (0, index_js_1.useLocalizedMessages)('common');
+    return ((0, jsx_runtime_1.jsx)(react_aria_components_1.ModalOverlay, { className: "cim-drawer-overlay", isDismissable: isDismissible, isKeyboardDismissDisabled: !isDismissible, isOpen: isOpen, defaultOpen: defaultOpen, onOpenChange: onOpenChange, "data-cim-style-root": true, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Modal, { className: (0, clsx_1.default)('cim-drawer', UNSAFE_className), style: UNSAFE_style, "data-size": size, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Dialog, { ...props, ref: ref, className: "cim-drawer-dialog", children: (renderProps) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "cim-drawer-header", children: [title && ((0, jsx_runtime_1.jsx)(react_aria_components_1.Heading, { slot: "title", className: (0, clsx_1.default)('cim-drawer-title', (0, utils_js_1.textStyle)({ variant: 'title-5', tone: 'base' })), children: title })), (0, jsx_runtime_1.jsx)(x_button_js_1.XButton, { "aria-label": messages.format('dismiss'), slot: "close" })] }), typeof children === 'function' ? children(renderProps) : children] })) }) }) }));
+}
+/**
+ * Displays an overlay element which blocks interaction with outside elements.
+ *
+ * See [drawer usage guidelines](https://ui.cimpress.io/components/drawer/).
+ */
+const _UNSTABLE_Drawer = (0, forward_ref_js_1.forwardRef)(UNSTABLE_Drawer, 'Drawer');
+exports.UNSTABLE_Drawer = _UNSTABLE_Drawer;
+/** Renders content within `Drawer`. */
+function UNSTABLE_DrawerBody(props) {
+    return (0, jsx_runtime_1.jsx)(focusable_container_js_1.FocusableContainer, { ...props, className: "cim-drawer-body", scrollDirection: "vertical" });
+}
+UNSTABLE_DrawerBody.displayName = 'DrawerBody';
+/** Renders actions within `Drawer`. */
+function UNSTABLE_DrawerActions({ children, ...props }) {
+    const matches = (0, use_media_query_js_1.useMediaQuery)('(min-width: 640px)');
+    const componentChildren = matches ? children : react_1.Children.toArray(children).reverse();
+    return ((0, jsx_runtime_1.jsx)("div", { ...props, className: "cim-drawer-actions", children: componentChildren }));
+}
+UNSTABLE_DrawerActions.displayName = 'DrawerActions';
+//# sourceMappingURL=drawer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.js","sourceRoot":"","sources":["../../../../src/components/drawer/drawer.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;AAmCb,kDAEC;AAmHD,kDAEC;AAUD,wDASC;;AA3KD,gDAAwB;AACxB,iCAAoE;AACpE,iEAM+B;AAC/B,yDAAkD;AAClD,kDAA2D;AAC3D,uEAA+D;AAC/D,qFAA6E;AAC7E,mGAA4F;AAC5F,kEAA2D;AAE3D,qDAAmD;AAanD;;;GAGG;AACH,SAAgB,mBAAmB,CAAC,KAA+B;IACjE,OAAO,uBAAC,qCAAgB,OAAK,KAAK,GAAI,CAAC;AACzC,CAAC;AAED,mBAAmB,CAAC,WAAW,GAAG,YAAY,CAAC;AAuC/C,SAAS,eAAe,CACtB,EACE,QAAQ,EACR,KAAK,EACL,IAAI,GAAG,QAAQ,EACf,gBAAgB,EAChB,YAAY,EACZ,aAAa,GAAG,IAAI,EACpB,MAAM,EACN,WAAW,EACX,YAAY,EACZ,GAAG,KAAK,EACa,EACvB,GAA8B;IAE9B,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,IAAA,gDAAoB,EAAC,GAAG,EAAE;QACxB,IAAI,CAAC,KAAK,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAC5C,OAAO,CAAC,IAAI,CAAC,+EAA+E,CAAC,CAAC;QAChG,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAEvC,MAAM,QAAQ,GAAG,IAAA,+BAAoB,EAAC,QAAQ,CAAC,CAAC;IAEhD,OAAO,CACL,uBAAC,oCAAe,IACd,SAAS,EAAC,oBAAoB,EAC9B,aAAa,EAAE,aAAa,EAC5B,yBAAyB,EAAE,CAAC,aAAa,EACzC,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,yCAG1B,uBAAC,6BAAQ,IAAC,SAAS,EAAE,IAAA,cAAI,EAAC,YAAY,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,eAAa,IAAI,YAC7F,uBAAC,8BAAS,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,mBAAmB,YAC1D,CAAC,WAAW,EAAE,EAAE,CAAC,CAChB,6DACE,iCAAK,SAAS,EAAC,mBAAmB,aAC/B,KAAK,IAAI,CACR,uBAAC,+BAAU,IACT,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,IAAA,cAAI,EAAC,kBAAkB,EAAE,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC,YAEnF,KAAK,GACK,CACd,EACD,uBAAC,qBAAO,kBAAa,QAAQ,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,IAAI,EAAC,OAAO,GAAG,IAC5D,EACL,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,QAAQ,IACjE,CACJ,GACS,GACH,GACK,CACnB,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,gBAAgB,GAAG,IAAA,2BAAU,EAAC,eAAe,EAAE,QAAQ,CAAC,CAAC;AAElC,2CAAe;AAO5C,uCAAuC;AACvC,SAAgB,mBAAmB,CAAC,KAA+B;IACjE,OAAO,uBAAC,2CAAkB,OAAK,KAAK,EAAE,SAAS,EAAC,iBAAiB,EAAC,eAAe,EAAC,UAAU,GAAG,CAAC;AAClG,CAAC;AAED,mBAAmB,CAAC,WAAW,GAAG,YAAY,CAAC;AAO/C,uCAAuC;AACvC,SAAgB,sBAAsB,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAA+B;IACxF,MAAM,OAAO,GAAG,IAAA,kCAAa,EAAC,oBAAoB,CAAC,CAAC;IACpD,MAAM,iBAAiB,GAAG,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,gBAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,OAAO,EAAE,CAAC;IAEpF,OAAO,CACL,mCAAS,KAAK,EAAE,SAAS,EAAC,oBAAoB,YAC3C,iBAAiB,GACd,CACP,CAAC;AACJ,CAAC;AAED,sBAAsB,CAAC,WAAW,GAAG,eAAe,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { Children, type ForwardedRef, type ReactNode } from 'react';\nimport {\n  Dialog as RACDialog,\n  DialogTrigger as RACDialogTrigger,\n  Heading as RACHeading,\n  Modal as RACModal,\n  ModalOverlay as RACModalOverlay,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useLocalizedMessages } from '../../i18n/index.js';\nimport { useMediaQuery } from '../../utils/use-media-query.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { FocusableContainer } from '../internal/focusable-container/focusable-container.js';\nimport { XButton } from '../internal/x-button/x-button.js';\nimport type { AriaLabelingProps, CommonProps } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface UNSTABLE_DrawerRootProps {\n  /** The drawer trigger with its associated drawer. Provide the trigger as the first child, and the drawer as the second child. */\n  children: ReactNode;\n  /** Whether the drawer is open (controlled). */\n  isOpen?: boolean;\n  /** Whether the drawer is open by default (uncontrolled). */\n  defaultOpen?: boolean;\n  /** Handler that is called when the drawer's open state changes. */\n  onOpenChange?: (isOpen: boolean) => void;\n}\n\n/**\n * Encapsulates a drawer trigger and its associated drawer.\n * The trigger can be any Cimpress UI button, and the drawer will be displayed when the trigger is activated.\n */\nexport function UNSTABLE_DrawerRoot(props: UNSTABLE_DrawerRootProps) {\n  return <RACDialogTrigger {...props} />;\n}\n\nUNSTABLE_DrawerRoot.displayName = 'DrawerRoot';\n\nexport interface UNSTABLE_DrawerRenderProps {\n  /** Closes the drawer when called. */\n  close: () => void;\n}\n\nexport interface UNSTABLE_DrawerProps extends CommonProps, AriaLabelingProps {\n  /** The contents of the drawer. A function may be provided to access a function to close the drawer. */\n  children: ReactNode | ((renderProps: UNSTABLE_DrawerRenderProps) => ReactNode);\n  /** The title of the drawer. */\n  title?: string;\n  /**\n   * The size of the drawer. This prop is ignored on small devices - drawers on small devices will always take up all available width.\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n  /**\n   * Whether to close the drawer when the user interacts outside of it or presses the Escape key.\n   * @default true\n   */\n  isDismissible?: boolean;\n  /**\n   * Whether the drawer is open (controlled).\n   * If using `DrawerRoot`, this prop has no effect - provide `isOpen` to `DrawerRoot` instead.\n   */\n  isOpen?: boolean;\n  /**\n   * Whether the drawer is open by default (uncontrolled).\n   * If using `DrawerRoot`, this prop has no effect - provide `defaultOpen` to `DrawerRoot` instead.\n   */\n  defaultOpen?: boolean;\n  /**\n   * Handler that is called when the drawer's open state changes.\n   * If using `DrawerRoot`, this prop has no effect - provide `onOpenChange` to `DrawerRoot` instead.\n   */\n  onOpenChange?: (isOpen: boolean) => void;\n}\n\nfunction UNSTABLE_Drawer(\n  {\n    children,\n    title,\n    size = 'medium',\n    UNSAFE_className,\n    UNSAFE_style,\n    isDismissible = true,\n    isOpen,\n    defaultOpen,\n    onOpenChange,\n    ...props\n  }: UNSTABLE_DrawerProps,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useProductionWarning(() => {\n    if (!title && !ariaLabel && !ariaLabelledBy) {\n      console.warn('Drawer requires one of title / aria-label / aria-labelledby for accessibility');\n    }\n  }, [title, ariaLabel, ariaLabelledBy]);\n\n  const messages = useLocalizedMessages('common');\n\n  return (\n    <RACModalOverlay\n      className=\"cim-drawer-overlay\"\n      isDismissable={isDismissible}\n      isKeyboardDismissDisabled={!isDismissible}\n      isOpen={isOpen}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}\n      data-cim-style-root\n    >\n      <RACModal className={clsx('cim-drawer', UNSAFE_className)} style={UNSAFE_style} data-size={size}>\n        <RACDialog {...props} ref={ref} className=\"cim-drawer-dialog\">\n          {(renderProps) => (\n            <>\n              <div className=\"cim-drawer-header\">\n                {title && (\n                  <RACHeading\n                    slot=\"title\"\n                    className={clsx('cim-drawer-title', textStyle({ variant: 'title-5', tone: 'base' }))}\n                  >\n                    {title}\n                  </RACHeading>\n                )}\n                <XButton aria-label={messages.format('dismiss')} slot=\"close\" />\n              </div>\n              {typeof children === 'function' ? children(renderProps) : children}\n            </>\n          )}\n        </RACDialog>\n      </RACModal>\n    </RACModalOverlay>\n  );\n}\n\n/**\n * Displays an overlay element which blocks interaction with outside elements.\n *\n * See [drawer usage guidelines](https://ui.cimpress.io/components/drawer/).\n */\nconst _UNSTABLE_Drawer = forwardRef(UNSTABLE_Drawer, 'Drawer');\n\nexport { _UNSTABLE_Drawer as UNSTABLE_Drawer };\n\nexport interface UNSTABLE_DrawerBodyProps {\n  /** The content to render within the drawer. */\n  children: ReactNode;\n}\n\n/** Renders content within `Drawer`. */\nexport function UNSTABLE_DrawerBody(props: UNSTABLE_DrawerBodyProps) {\n  return <FocusableContainer {...props} className=\"cim-drawer-body\" scrollDirection=\"vertical\" />;\n}\n\nUNSTABLE_DrawerBody.displayName = 'DrawerBody';\n\nexport interface UNSTABLE_DrawerActionsProps {\n  /** Actions that should be available in the drawer. */\n  children: ReactNode;\n}\n\n/** Renders actions within `Drawer`. */\nexport function UNSTABLE_DrawerActions({ children, ...props }: UNSTABLE_DrawerActionsProps) {\n  const matches = useMediaQuery('(min-width: 640px)');\n  const componentChildren = matches ? children : Children.toArray(children).reverse();\n\n  return (\n    <div {...props} className=\"cim-drawer-actions\">\n      {componentChildren}\n    </div>\n  );\n}\n\nUNSTABLE_DrawerActions.displayName = 'DrawerActions';\n"]}

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

@@ -0,0 +1,19 @@
+import { type FileTriggerProps as RACFileTriggerProps } from 'react-aria-components';
+import type { CommonProps, FieldProps } from '../types.js';
+export interface UNSTABLE_FilePickerProps extends CommonProps, Omit<FieldProps<File[]>, 'aria-label'>, Pick<RACFileTriggerProps, 'acceptedFileTypes' | 'allowsMultiple' | 'acceptDirectory' | 'defaultCamera'> {
+    /** Whether the field is disabled. */
+    isDisabled?: boolean;
+    /** Whether the field is required. */
+    isRequired?: boolean;
+    /** Whether the field is invalid. */
+    isInvalid?: boolean;
+    /** The allowed file types that can be selected. */
+    acceptedFileTypes?: string[];
+    /** Whether multiple files can be selected. */
+    allowsMultiple?: boolean;
+    /** Handler called when files are selected. */
+    onSelect?: (files: File[] | null) => void;
+}
+declare const _UNSTABLE_FilePicker: (props: UNSTABLE_FilePickerProps & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
+export { _UNSTABLE_FilePicker as UNSTABLE_FilePicker };
+//# sourceMappingURL=file-picker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"file-picker.d.ts","sourceRoot":"","sources":["../../../../src/components/file-picker/file-picker.tsx"],"names":[],"mappings":"AAKA,OAAO,EAGL,KAAK,gBAAgB,IAAI,mBAAmB,EAI7C,MAAM,uBAAuB,CAAC;AAM/B,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAI3D,MAAM,WAAW,wBACf,SAAQ,WAAW,EACjB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC,EAAE,YAAY,CAAC,EACtC,IAAI,CAAC,mBAAmB,EAAE,mBAAmB,GAAG,gBAAgB,GAAG,iBAAiB,GAAG,eAAe,CAAC;IACzG,qCAAqC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qCAAqC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oCAAoC;IACpC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mDAAmD;IACnD,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC7B,8CAA8C;IAC9C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;CAC3C;AAmID,QAAA,MAAM,oBAAoB,0KAAgE,CAAC;AAE3F,OAAO,EAAE,oBAAoB,IAAI,mBAAmB,EAAE,CAAC"}

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

@@ -0,0 +1,68 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UNSTABLE_FilePicker = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const form_1 = require("@react-aria/form");
+const utils_1 = require("@react-aria/utils");
+const form_2 = require("@react-stately/form");
+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 with_style_props_js_1 = require("../../with-style-props.js");
+const button_js_1 = require("../button/button.js");
+const form_field_js_1 = require("../internal/form-field/form-field.js");
+const text_js_1 = require("../typography/text.js");
+const visually_hidden_js_1 = require("../visually-hidden/visually-hidden.js");
+function UNSTABLE_FilePicker({ id, label, description, isDisabled, isRequired, isInvalid, onSelect, acceptedFileTypes, allowsMultiple, acceptDirectory, defaultCamera, error, name, validate, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-details': ariaDetails, UNSAFE_className, UNSAFE_style, ...props }, ref) {
+    const buttonId = (0, utils_1.useId)(id);
+    const labelId = (0, utils_1.useId)();
+    const fileTextId = (0, utils_1.useId)();
+    const [files, setFiles] = (0, react_1.useState)(null);
+    const fileInputRef = (0, react_1.useRef)(null);
+    const handleSelect = (files) => {
+        // Commit validation to clear any previous validation errors when new files are selected
+        validationState.commitValidation();
+        const filesArray = files?.length ? Array.from(files) : null;
+        setFiles(filesArray);
+        onSelect?.(filesArray);
+        if (fileInputRef.current) {
+            fileInputRef.current.files = files;
+        }
+    };
+    const labelMessages = (0, index_js_1.useLocalizedMessages)('label');
+    const messages = (0, index_js_1.useLocalizedMessages)('filePicker');
+    const labelText = files?.length != null
+        ? files.length === 1
+            ? files[0]?.name
+            : messages.format('multipleFilesSelected', { fileCount: files.length })
+        : messages.format('noFilesSelected', { allowsMultiple: allowsMultiple ?? false });
+    const validationBehavior = 'native';
+    const validationState = (0, form_2.useFormValidationState)({
+        value: files,
+        isInvalid,
+        isRequired,
+        name,
+        validate,
+        validationBehavior,
+    });
+    (0, form_1.useFormValidation)({ isInvalid, isRequired, validate, validationBehavior }, validationState, fileInputRef);
+    (0, utils_1.useFormReset)(fileInputRef, files, setFiles);
+    const descriptionId = (0, utils_1.useSlotId)([Boolean(description)]);
+    const errorMessageId = (0, utils_1.useSlotId)([
+        Boolean(error || validationState.displayValidation.validationErrors),
+        validationState.displayValidation.isInvalid,
+    ]);
+    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.Provider, { values: [
+            [react_aria_components_1.LabelContext, label != null ? { id: labelId, htmlFor: buttonId } : {}],
+            [react_aria_components_1.TextContext, { slots: { description: { id: descriptionId }, errorMessage: { id: errorMessageId } } }],
+            [react_aria_components_1.FieldErrorContext, validationState.displayValidation],
+        ], children: [(0, jsx_runtime_1.jsxs)("div", { ...props, className: (0, clsx_1.default)('cim-file-picker', UNSAFE_className), style: UNSAFE_style, ref: ref, children: [label && ((0, jsx_runtime_1.jsxs)(form_field_js_1.FormFieldLabel, { isRequired: isRequired, isDisabled: isDisabled, children: [label, isRequired && (0, jsx_runtime_1.jsx)(visually_hidden_js_1.UNSTABLE_VisuallyHidden, { children: labelMessages.format('required') })] })), (0, jsx_runtime_1.jsxs)("div", { className: "cim-file-picker-button-container", children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.FileTrigger, { onSelect: handleSelect, acceptedFileTypes: acceptedFileTypes, allowsMultiple: allowsMultiple, acceptDirectory: acceptDirectory, defaultCamera: defaultCamera, children: (0, jsx_runtime_1.jsx)(button_js_1.Button, { id: buttonId, isDisabled: isDisabled, "aria-labelledby": [buttonId, label != null ? labelId : null, ariaLabelledBy].filter(Boolean).join(' '), "aria-describedby": [fileTextId, descriptionId, errorMessageId, ariaDescribedBy].join(' '), "aria-details": ariaDetails, children: messages.format('chooseFile') }) }), (0, jsx_runtime_1.jsx)(text_js_1.Text, { id: fileTextId, as: "p", variant: "medium", tone: "base", children: labelText })] }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldError, { children: error }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldDescription, { children: description })] }), name && ((0, jsx_runtime_1.jsx)("input", { type: "file", className: "cim-file-picker-hidden-input", name: name, multiple: allowsMultiple, required: isRequired, ref: fileInputRef }))] }));
+}
+const _UNSTABLE_FilePicker = (0, with_style_props_js_1.withStyleProps)((0, forward_ref_js_1.forwardRef)(UNSTABLE_FilePicker), 'FilePicker');
+exports.UNSTABLE_FilePicker = _UNSTABLE_FilePicker;
+//# sourceMappingURL=file-picker.js.map