@cimpress-ui/react 0.0.0 → 0.0.1

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

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

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

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

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
@@ -9,15 +10,22 @@ const clsx_1 = __importDefault(require("clsx"));
 const forward_ref_js_1 = require("../../../forward-ref.js");
 const with_style_props_js_1 = require("../../../with-style-props.js");
 const types_js_1 = require("../types.js");
-function Stack({ children, inline: responsiveInline, gap: responsiveGap, UNSAFE_className, UNSAFE_style, ...props }, ref) {
+function Stack({ children, direction: responsiveDirection, gap: responsiveGap, justify: responsiveJustify, align: responsiveAlign, wrap: responsiveWrap, UNSAFE_className, UNSAFE_style, ...props }, ref) {
     const gap = (0, types_js_1.getResponsiveVariables)('stack-gap', 'space', responsiveGap, 0);
-    const inline = (0, types_js_1.getResponsiveVariables)('stack-fd', 'stack-fd-inline', responsiveInline, false);
+    const direction = (0, types_js_1.getResponsiveVariables)('stack-fd', 'stack-direction', responsiveDirection, 'vertical');
+    const justify = (0, types_js_1.getResponsiveVariables)('stack-jc', 'stack-justify', responsiveJustify, 'start');
+    const align = (0, types_js_1.getResponsiveVariables)('stack-ai', 'stack-align', responsiveAlign, 'stretch');
+    const wrap = (0, types_js_1.getResponsiveVariables)('stack-fw', 'stack-wrap', responsiveWrap, true);
     return ((0, jsx_runtime_1.jsx)("div", { ...props, ref: ref, className: (0, clsx_1.default)('cim-stack', UNSAFE_className), style: {
             ...UNSAFE_style,
             ...gap,
-            ...inline,
+            ...direction,
+            ...justify,
+            ...align,
+            ...wrap,
         }, role: "presentation", children: children }));
 }
+/** Stacks its children with a specified amount of space between them. */
 const _Stack = (0, with_style_props_js_1.withStyleProps)((0, forward_ref_js_1.forwardRef)(Stack), 'Stack');
 exports.Stack = _Stack;
 //# sourceMappingURL=stack.js.map

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

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

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

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

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

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

package/dist/commonjs/components/spacing/types.js

@@ -3,6 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getResponsiveVariables = getResponsiveVariables;
 /**
  * Given params like so:
+ *
+ * ```ts
  * (
  *   'box-ml',
  *   'space',
@@ -11,12 +13,16 @@ exports.getResponsiveVariables = getResponsiveVariables;
  *     lg: 6,
  *   }
  * )
+ * ```
  *
  * Creates an object like so:
+ *
+ * ```ts
  * {
  *   '--cim-box-ml-sm': 'var(--cim-space-4)',
  *   '--cim-box-ml-lg': 'var(--cim-space-6)',
  * }
+ * ```
  *
  */
 function getResponsiveVariables(targetTokenGroup, sourceTokenGroup, data, defaultValue) {

package/dist/commonjs/components/spacing/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/spacing/types.ts"],"names":[],"mappings":";;AAuBA,wDA0BC;AA5CD;;;;;;;;;;;;;;;;;GAiBG;AACH,SAAgB,sBAAsB,CACpC,gBAAwB,EACxB,gBAAwB,EACxB,IAAoB,EACpB,YAAgB;IAEhB,IAAI,IAAI,KAAK,SAAS,IAAI,YAAY,KAAK,SAAS,EAAE,CAAC;QACrD,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE,CAAC;QAC7B,OAAO;YACL,CAAC,SAAS,gBAAgB,KAAK,CAAC,EAAE,aAAa,gBAAgB,IAAI,IAAI,IAAI,YAAY,GAAG;SAC3F,CAAC;IACJ,CAAC;IAED,MAAM,MAAM,GAA2B;QACrC,8DAA8D;QAC9D,CAAC,SAAS,gBAAgB,KAAK,CAAC,EAAE,aAAa,gBAAgB,IAAI,YAAY,GAAG;KACnF,CAAC;IAEF,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,EAAE,KAAK,CAAC,EAAE,EAAE;QACnD,MAAM,CAAC,SAAS,gBAAgB,IAAI,UAAU,EAAE,CAAC,GAAG,aAAa,gBAAgB,IAAI,KAAK,GAAG,CAAC;IAChG,CAAC,CAAC,CAAC;IAEH,OAAO,MAAM,CAAC;AAChB,CAAC","sourcesContent":["export type Spacing = 0 | 2 | 4 | 8 | 12 | 16 | 24 | 32 | 40 | 48 | 64 | 96;\nexport type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nexport type Responsive<T extends string | number | boolean> = T | Partial<Record<Breakpoint, T>>;\n\n/**\n * Given params like so:\n * (\n *   'box-ml',\n *   'space',\n *   {\n *     sm: 4,\n *     lg: 6,\n *   }\n * )\n *\n * Creates an object like so:\n * {\n *   '--cim-box-ml-sm': 'var(--cim-space-4)',\n *   '--cim-box-ml-lg': 'var(--cim-space-6)',\n * }\n *\n */\nexport function getResponsiveVariables<T extends string | number | boolean>(\n  targetTokenGroup: string,\n  sourceTokenGroup: string,\n  data?: Responsive<T>,\n  defaultValue?: T,\n): Record<string, string> | undefined {\n  if (data === undefined && defaultValue === undefined) {\n    return undefined;\n  }\n\n  if (typeof data !== 'object') {\n    return {\n      [`--cim-${targetTokenGroup}-xs`]: `var(--cim-${sourceTokenGroup}-${data ?? defaultValue})`,\n    };\n  }\n\n  const result: Record<string, string> = {\n    // Default value in case the smallest breakpoint isn't defined\n    [`--cim-${targetTokenGroup}-xs`]: `var(--cim-${sourceTokenGroup}-${defaultValue})`,\n  };\n\n  Object.entries(data).forEach(([breakpoint, value]) => {\n    result[`--cim-${targetTokenGroup}-${breakpoint}`] = `var(--cim-${sourceTokenGroup}-${value})`;\n  });\n\n  return result;\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/spacing/types.ts"],"names":[],"mappings":";;AAiCA,wDA0BC;AAlDD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,SAAgB,sBAAsB,CACpC,gBAAwB,EACxB,gBAAwB,EACxB,IAAoB,EACpB,YAAgB;IAEhB,IAAI,IAAI,KAAK,SAAS,IAAI,YAAY,KAAK,SAAS,EAAE,CAAC;QACrD,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE,CAAC;QAC7B,OAAO;YACL,CAAC,SAAS,gBAAgB,KAAK,CAAC,EAAE,aAAa,gBAAgB,IAAI,IAAI,IAAI,YAAY,GAAG;SAC3F,CAAC;IACJ,CAAC;IAED,MAAM,MAAM,GAA2B;QACrC,8DAA8D;QAC9D,CAAC,SAAS,gBAAgB,KAAK,CAAC,EAAE,aAAa,gBAAgB,IAAI,YAAY,GAAG;KACnF,CAAC;IAEF,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,EAAE,KAAK,CAAC,EAAE,EAAE;QACnD,MAAM,CAAC,SAAS,gBAAgB,IAAI,UAAU,EAAE,CAAC,GAAG,aAAa,gBAAgB,IAAI,KAAK,GAAG,CAAC;IAChG,CAAC,CAAC,CAAC;IAEH,OAAO,MAAM,CAAC;AAChB,CAAC","sourcesContent":["/** Represents a valid spacing amount within the design system. */\nexport type Spacing = 0 | 2 | 4 | 8 | 12 | 16 | 24 | 32 | 40 | 48 | 64 | 96;\n\n/** Represents a screen size breakpoint for responsive design. */\nexport type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\n/** Represents a primitive value that can change based on screen size. */\nexport type Responsive<T extends string | number | boolean> = T | Partial<Record<Breakpoint, T>>;\n\n/**\n * Given params like so:\n *\n * ```ts\n * (\n *   'box-ml',\n *   'space',\n *   {\n *     sm: 4,\n *     lg: 6,\n *   }\n * )\n * ```\n *\n * Creates an object like so:\n *\n * ```ts\n * {\n *   '--cim-box-ml-sm': 'var(--cim-space-4)',\n *   '--cim-box-ml-lg': 'var(--cim-space-6)',\n * }\n * ```\n *\n */\nexport function getResponsiveVariables<T extends string | number | boolean>(\n  targetTokenGroup: string,\n  sourceTokenGroup: string,\n  data?: Responsive<T>,\n  defaultValue?: T,\n): Record<string, string> | undefined {\n  if (data === undefined && defaultValue === undefined) {\n    return undefined;\n  }\n\n  if (typeof data !== 'object') {\n    return {\n      [`--cim-${targetTokenGroup}-xs`]: `var(--cim-${sourceTokenGroup}-${data ?? defaultValue})`,\n    };\n  }\n\n  const result: Record<string, string> = {\n    // Default value in case the smallest breakpoint isn't defined\n    [`--cim-${targetTokenGroup}-xs`]: `var(--cim-${sourceTokenGroup}-${defaultValue})`,\n  };\n\n  Object.entries(data).forEach(([breakpoint, value]) => {\n    result[`--cim-${targetTokenGroup}-${breakpoint}`] = `var(--cim-${sourceTokenGroup}-${value})`;\n  });\n\n  return result;\n}\n"]}

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

@@ -1,9 +1,12 @@
-import type { DOMProps } from '../types.js';
-interface SpinnerProps extends DOMProps {
+import type { CommonProps, LabellableProps } from '../types.js';
+export interface SpinnerProps extends CommonProps, LabellableProps {
+    /**
+     * Determines the size of the spinner.
+     * @default 'medium'
+     */
     size?: 'small' | 'medium' | 'large';
-    /** A string value that identifies the spinner's purpose for assistive technologies. */
-    'aria-label': string;
 }
-declare const _Spinner: (props: SpinnerProps & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => import("react").ReactNode;
+/** Displays a loading indicator to represent an ongoing operation. */
+declare const _Spinner: (props: SpinnerProps & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
 export { _Spinner as Spinner };
 //# sourceMappingURL=spinner.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../../../src/components/spinner/spinner.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE5C,UAAU,YAAa,SAAQ,QAAQ;IACrC,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,uFAAuF;IACvF,YAAY,EAAE,MAAM,CAAC;CACtB;AAyDD,QAAA,MAAM,QAAQ,qJAAiD,CAAC;AAEhE,OAAO,EAAE,QAAQ,IAAI,OAAO,EAAE,CAAC"}
+{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../../../src/components/spinner/spinner.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAIhE,MAAM,WAAW,YAAa,SAAQ,WAAW,EAAE,eAAe;IAChE;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;CACrC;AA+BD,sEAAsE;AACtE,QAAA,MAAM,QAAQ,8JAAiD,CAAC;AAEhE,OAAO,EAAE,QAAQ,IAAI,OAAO,EAAE,CAAC"}

package/dist/commonjs/components/spinner/spinner.js

@@ -1,26 +1,35 @@
+'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.Spinner = 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");
-const spinnerDimensions = {
-    small: '16px',
-    medium: '38px',
-    large: '72px',
+const spinner_js_1 = require("../internal/spinner/spinner.js");
+const utils_js_1 = require("../typography/utils.js");
+const ringSizes = {
+    small: '24px',
+    medium: '48px',
+    large: '80px',
+};
+const labelVariants = {
+    small: 'small',
+    medium: 'medium',
+    large: 'body',
 };
-const offset = 0;
-const duration = 2;
-const modOffset = offset % 1;
-const begin = (1 - modOffset) * duration - duration;
-function Spinner({ size = 'large', UNSAFE_className, UNSAFE_style, ...props }, ref) {
-    return ((0, jsx_runtime_1.jsx)(react_aria_components_1.ProgressBar, { ...props, isIndeterminate: true, ref: ref, className: (0, clsx_1.default)('cim-spinner', UNSAFE_className), style: UNSAFE_style, children: (0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: spinnerDimensions[size], height: spinnerDimensions[size], viewBox: "0 0 100 100", preserveAspectRatio: "xMidYMid", "aria-hidden": true, children: [(0, jsx_runtime_1.jsx)("circle", { className: "cim-spinner-ring-bg", cx: "50", cy: "50", r: "40" }), (0, jsx_runtime_1.jsxs)("circle", { className: "cim-spinner-ring-animated", cx: "50", cy: "50", r: "40", children: [(0, jsx_runtime_1.jsx)("animate", { attributeName: "stroke-dashoffset", dur: duration, repeatCount: "indefinite", from: "0", to: "-502", begin: begin }), (0, jsx_runtime_1.jsx)("animate", { attributeName: "stroke-dasharray", dur: duration, repeatCount: "indefinite", values: "75.3 175.7;1 250;75.3 175.7", begin: begin })] })] }) }));
+function Spinner({ size = 'medium', label, ...props }, ref) {
+    const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
+    (0, react_1.useEffect)(() => {
+        if (!label && !ariaLabel && !ariaLabelledBy) {
+            console.warn('Spinner requires one of label / aria-label / aria-labelledby for accessibility');
+        }
+    }, [label, ariaLabel, ariaLabelledBy]);
+    return ((0, jsx_runtime_1.jsx)(spinner_js_1.InternalSpinner, { ...props, size: ringSizes[size], spinnerRef: ref, children: label && (0, jsx_runtime_1.jsx)(react_aria_components_1.Label, { className: (0, utils_js_1.textStyle)({ variant: labelVariants[size], tone: 'title' }), children: label }) }));
 }
+// TODO: add link to usage guidelines
+/** Displays a loading indicator to represent an ongoing operation. */
 const _Spinner = (0, with_style_props_js_1.withStyleProps)((0, forward_ref_js_1.forwardRef)(Spinner), 'Spinner');
 exports.Spinner = _Spinner;
 //# sourceMappingURL=spinner.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"spinner.js","sourceRoot":"","sources":["../../../../src/components/spinner/spinner.tsx"],"names":[],"mappings":";;;;;;;AAAA,gDAAwB;AAExB,iEAAsE;AACtE,yDAAkD;AAClD,mEAA2D;AAS3D,MAAM,iBAAiB,GAAG;IACxB,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;CACd,CAAC;AAEF,MAAM,MAAM,GAAG,CAAC,CAAC;AACjB,MAAM,QAAQ,GAAG,CAAC,CAAC;AACnB,MAAM,SAAS,GAAG,MAAM,GAAG,CAAC,CAAC;AAC7B,MAAM,KAAK,GAAG,CAAC,CAAC,GAAG,SAAS,CAAC,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEpD,SAAS,OAAO,CACd,EAAE,IAAI,GAAG,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAgB,EAC1E,GAAiC;IAEjC,OAAO,CACL,uBAAC,mCAAc,OACT,KAAK,EACT,eAAe,QACf,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAI,EAAC,aAAa,EAAE,gBAAgB,CAAC,EAChD,KAAK,EAAE,YAAY,YAEnB,iCACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAE,iBAAiB,CAAC,IAAI,CAAC,EAC9B,MAAM,EAAE,iBAAiB,CAAC,IAAI,CAAC,EAC/B,OAAO,EAAC,aAAa,EACrB,mBAAmB,EAAC,UAAU,kCAG9B,mCAAQ,SAAS,EAAC,qBAAqB,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,GAAG,EAEjE,oCAAQ,SAAS,EAAC,2BAA2B,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,aAClE,oCACE,aAAa,EAAC,mBAAmB,EACjC,GAAG,EAAE,QAAQ,EACb,WAAW,EAAC,YAAY,EACxB,IAAI,EAAC,GAAG,EACR,EAAE,EAAC,MAAM,EACT,KAAK,EAAE,KAAK,GACZ,EACF,oCACE,aAAa,EAAC,kBAAkB,EAChC,GAAG,EAAE,QAAQ,EACb,WAAW,EAAC,YAAY,EACxB,MAAM,EAAC,6BAA6B,EACpC,KAAK,EAAE,KAAK,GACZ,IACK,IACL,GACS,CAClB,CAAC;AACJ,CAAC;AAED,MAAM,QAAQ,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,OAAO,CAAC,EAAE,SAAS,CAAC,CAAC;AAE3C,2BAAO","sourcesContent":["import clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\nimport { ProgressBar as RACProgressBar } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { DOMProps } from '../types.js';\n\ninterface SpinnerProps extends DOMProps {\n  size?: 'small' | 'medium' | 'large';\n  /** A string value that identifies the spinner's purpose for assistive technologies. */\n  'aria-label': string;\n}\n\nconst spinnerDimensions = {\n  small: '16px',\n  medium: '38px',\n  large: '72px',\n};\n\nconst offset = 0;\nconst duration = 2;\nconst modOffset = offset % 1;\nconst begin = (1 - modOffset) * duration - duration;\n\nfunction Spinner(\n  { size = 'large', UNSAFE_className, UNSAFE_style, ...props }: SpinnerProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    <RACProgressBar\n      {...props}\n      isIndeterminate\n      ref={ref}\n      className={clsx('cim-spinner', UNSAFE_className)}\n      style={UNSAFE_style}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width={spinnerDimensions[size]}\n        height={spinnerDimensions[size]}\n        viewBox=\"0 0 100 100\"\n        preserveAspectRatio=\"xMidYMid\"\n        aria-hidden\n      >\n        <circle className=\"cim-spinner-ring-bg\" cx=\"50\" cy=\"50\" r=\"40\" />\n\n        <circle className=\"cim-spinner-ring-animated\" cx=\"50\" cy=\"50\" r=\"40\">\n          <animate\n            attributeName=\"stroke-dashoffset\"\n            dur={duration}\n            repeatCount=\"indefinite\"\n            from=\"0\"\n            to=\"-502\"\n            begin={begin}\n          />\n          <animate\n            attributeName=\"stroke-dasharray\"\n            dur={duration}\n            repeatCount=\"indefinite\"\n            values=\"75.3 175.7;1 250;75.3 175.7\"\n            begin={begin}\n          />\n        </circle>\n      </svg>\n    </RACProgressBar>\n  );\n}\n\nconst _Spinner = withStyleProps(forwardRef(Spinner), 'Spinner');\n\nexport { _Spinner as Spinner };\n"]}
+{"version":3,"file":"spinner.js","sourceRoot":"","sources":["../../../../src/components/spinner/spinner.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;AAEb,iCAAqD;AACrD,iEAA0D;AAC1D,yDAAkD;AAClD,mEAA2D;AAC3D,+DAAiE;AAGjE,qDAAmD;AAUnD,MAAM,SAAS,GAAsD;IACnE,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;CACd,CAAC;AAEF,MAAM,aAAa,GAA2E;IAC5F,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,MAAM;CACd,CAAC;AAEF,SAAS,OAAO,CAAC,EAAE,IAAI,GAAG,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,EAAgB,EAAE,GAAiC;IACpG,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,CAAC,KAAK,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAC5C,OAAO,CAAC,IAAI,CAAC,gFAAgF,CAAC,CAAC;QACjG,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAEvC,OAAO,CACL,uBAAC,4BAAe,OAAK,KAAK,EAAE,IAAI,EAAE,SAAS,CAAC,IAAI,CAAC,EAAE,UAAU,EAAE,GAAG,YAC/D,KAAK,IAAI,uBAAC,6BAAQ,IAAC,SAAS,EAAE,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,aAAa,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,YAAG,KAAK,GAAY,GAC7F,CACnB,CAAC;AACJ,CAAC;AAED,qCAAqC;AACrC,sEAAsE;AACtE,MAAM,QAAQ,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,OAAO,CAAC,EAAE,SAAS,CAAC,CAAC;AAE3C,2BAAO","sourcesContent":["'use client';\n\nimport { useEffect, type ForwardedRef } from 'react';\nimport { Label as RACLabel } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { InternalSpinner } from '../internal/spinner/spinner.js';\nimport type { CommonProps, LabellableProps } from '../types.js';\nimport type { TextStyleOptions } from '../typography/types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface SpinnerProps extends CommonProps, LabellableProps {\n  /**\n   * Determines the size of the spinner.\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n}\n\nconst ringSizes: Record<NonNullable<SpinnerProps['size']>, string> = {\n  small: '24px',\n  medium: '48px',\n  large: '80px',\n};\n\nconst labelVariants: Record<NonNullable<SpinnerProps['size']>, TextStyleOptions['variant']> = {\n  small: 'small',\n  medium: 'medium',\n  large: 'body',\n};\n\nfunction Spinner({ size = 'medium', label, ...props }: SpinnerProps, ref: ForwardedRef<HTMLDivElement>) {\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useEffect(() => {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn('Spinner requires one of label / aria-label / aria-labelledby for accessibility');\n    }\n  }, [label, ariaLabel, ariaLabelledBy]);\n\n  return (\n    <InternalSpinner {...props} size={ringSizes[size]} spinnerRef={ref}>\n      {label && <RACLabel className={textStyle({ variant: labelVariants[size], tone: 'title' })}>{label}</RACLabel>}\n    </InternalSpinner>\n  );\n}\n\n// TODO: add link to usage guidelines\n/** Displays a loading indicator to represent an ongoing operation. */\nconst _Spinner = withStyleProps(forwardRef(Spinner), 'Spinner');\n\nexport { _Spinner as Spinner };\n"]}

package/dist/commonjs/components/text-inputs/text-area.d.ts

@@ -1,7 +1,8 @@
 import { type TextAreaProps as RACTextAreaProps, type TextFieldProps as RACTextFieldProps } from 'react-aria-components';
-import type { DOMProps, FieldWithPlaceholderProps } from '../types.js';
-export interface TextAreaProps extends DOMProps, FieldWithPlaceholderProps<string>, Pick<RACTextFieldProps, 'value' | 'defaultValue' | 'onChange' | 'isDisabled' | 'isRequired' | 'isInvalid' | 'isReadOnly' | 'name' | 'type' | 'autoFocus' | 'autoComplete' | 'inputMode' | 'minLength' | 'maxLength'>, Pick<RACTextAreaProps, 'autoCapitalize' | 'autoCorrect' | 'spellCheck' | 'wrap'> {
+import type { CommonProps, FieldWithPlaceholderProps } from '../types.js';
+export interface TextAreaProps extends CommonProps, FieldWithPlaceholderProps<string>, Pick<RACTextFieldProps, 'value' | 'defaultValue' | 'onChange' | 'isDisabled' | 'isRequired' | 'isInvalid' | 'isReadOnly' | 'name' | 'type' | 'autoFocus' | 'autoComplete' | 'inputMode' | 'minLength' | 'maxLength'>, Pick<RACTextAreaProps, 'autoCapitalize' | 'autoCorrect' | 'rows' | 'spellCheck' | 'wrap'> {
 }
-declare const _TextArea: (props: TextAreaProps & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => import("react").ReactNode;
+/** Allows users to enter multiple lines of text with a keyboard. */
+declare const _TextArea: (props: TextAreaProps & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
 export { _TextArea as TextArea };
 //# sourceMappingURL=text-area.d.ts.map

package/dist/commonjs/components/text-inputs/text-area.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-area.d.ts","sourceRoot":"","sources":["../../../../src/components/text-inputs/text-area.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,aAAa,IAAI,gBAAgB,EACtC,KAAK,cAAc,IAAI,iBAAiB,EACzC,MAAM,uBAAuB,CAAC;AAI/B,OAAO,KAAK,EAAE,QAAQ,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAGvE,MAAM,WAAW,aACf,SAAQ,QAAQ,EACd,yBAAyB,CAAC,MAAM,CAAC,EACjC,IAAI,CACF,iBAAiB,EACf,OAAO,GACP,cAAc,GACd,UAAU,GACV,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,YAAY,GACZ,MAAM,GACN,MAAM,GACN,WAAW,GACX,cAAc,GACd,WAAW,GACX,WAAW,GACX,WAAW,CACd,EACD,IAAI,CAAC,gBAAgB,EAAE,gBAAgB,GAAG,aAAa,GAAG,YAAY,GAAG,MAAM,CAAC;CAAG;AAqCvF,QAAA,MAAM,SAAS,sJAAmD,CAAC;AAEnE,OAAO,EAAE,SAAS,IAAI,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"text-area.d.ts","sourceRoot":"","sources":["../../../../src/components/text-inputs/text-area.tsx"],"names":[],"mappings":"AAIA,OAAO,EAGL,KAAK,aAAa,IAAI,gBAAgB,EACtC,KAAK,cAAc,IAAI,iBAAiB,EACzC,MAAM,uBAAuB,CAAC;AAI/B,OAAO,KAAK,EAAE,WAAW,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAG1E,MAAM,WAAW,aACf,SAAQ,WAAW,EACjB,yBAAyB,CAAC,MAAM,CAAC,EACjC,IAAI,CACF,iBAAiB,EACf,OAAO,GACP,cAAc,GACd,UAAU,GACV,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,YAAY,GACZ,MAAM,GACN,MAAM,GACN,WAAW,GACX,cAAc,GACd,WAAW,GACX,WAAW,GACX,WAAW,CACd,EACD,IAAI,CAAC,gBAAgB,EAAE,gBAAgB,GAAG,aAAa,GAAG,MAAM,GAAG,YAAY,GAAG,MAAM,CAAC;CAAG;AAgDhG,oEAAoE;AACpE,QAAA,MAAM,SAAS,+JAAmD,CAAC;AAEnE,OAAO,EAAE,SAAS,IAAI,QAAQ,EAAE,CAAC"}

package/dist/commonjs/components/text-inputs/text-area.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
@@ -6,14 +7,23 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextArea = 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");
-const form_field_js_1 = require("../form-field/form-field.js");
+const form_field_js_1 = require("../internal/form-field/form-field.js");
 const utils_js_1 = require("../typography/utils.js");
-function TextArea({ label, description, error: errorMessage, placeholder, autoCapitalize, autoCorrect, spellCheck, wrap, UNSAFE_className, UNSAFE_style, ...props }, ref) {
-    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.TextField, { ...props, ref: ref, className: (0, clsx_1.default)('cim-text-area', 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.jsx)(react_aria_components_1.TextArea, { className: (0, clsx_1.default)('cim-text-area-input', (0, utils_js_1.textStyle)({ variant: 'medium', tone: 'base' })), placeholder: placeholder, autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, spellCheck: spellCheck, wrap: wrap }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldError, { children: errorMessage }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldDescription, { children: description })] }));
+function TextArea({ label, description, error: errorMessage, placeholder, autoCapitalize, autoCorrect, rows, spellCheck, wrap, UNSAFE_className, UNSAFE_style, ...props }, ref) {
+    const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
+    (0, react_1.useEffect)(() => {
+        if (!label && !ariaLabel && !ariaLabelledBy) {
+            console.warn('TextArea requires one of label / aria-label / aria-labelledby for accessibility');
+        }
+    }, [label, ariaLabel, ariaLabelledBy]);
+    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.TextField, { ...props, ref: ref, className: (0, clsx_1.default)('cim-text-area', 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.jsx)(react_aria_components_1.TextArea, { className: (0, clsx_1.default)('cim-text-area-input', (0, utils_js_1.textStyle)({ variant: 'medium', tone: 'base' })), placeholder: placeholder, autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, rows: rows, spellCheck: spellCheck, wrap: wrap }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldError, { children: errorMessage }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldDescription, { children: description })] }));
 }
+// TODO: add link to usage guidelines
+/** Allows users to enter multiple lines of text with a keyboard. */
 const _TextArea = (0, with_style_props_js_1.withStyleProps)((0, forward_ref_js_1.forwardRef)(TextArea), 'TextArea');
 exports.TextArea = _TextArea;
 //# sourceMappingURL=text-area.js.map

package/dist/commonjs/components/text-inputs/text-area.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-area.js","sourceRoot":"","sources":["../../../../src/components/text-inputs/text-area.tsx"],"names":[],"mappings":";;;;;;;AAAA,gDAAwB;AAExB,iEAK+B;AAC/B,yDAAkD;AAClD,mEAA2D;AAC3D,+DAAmG;AAEnG,qDAAmD;AAwBnD,SAAS,QAAQ,CACf,EACE,KAAK,EACL,WAAW,EACX,KAAK,EAAE,YAAY,EACnB,WAAW,EACX,cAAc,EACd,WAAW,EACX,UAAU,EACV,IAAI,EACJ,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACM,EAChB,GAAiC;IAEjC,OAAO,CACL,wBAAC,iCAAY,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAA,cAAI,EAAC,eAAe,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,aACxG,uBAAC,8BAAc,IAAC,UAAU,EAAE,KAAK,CAAC,UAAU,EAAE,UAAU,EAAE,KAAK,CAAC,UAAU,YACvE,KAAK,GACS,EACjB,uBAAC,gCAAW,IACV,SAAS,EAAE,IAAA,cAAI,EAAC,qBAAqB,EAAE,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC,EACtF,WAAW,EAAE,WAAW,EACxB,cAAc,EAAE,cAAc,EAC9B,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,IAAI,GACV,EACF,uBAAC,8BAAc,cAAE,YAAY,GAAkB,EAC/C,uBAAC,oCAAoB,cAAE,WAAW,GAAwB,IAC7C,CAChB,CAAC;AACJ,CAAC;AAED,MAAM,SAAS,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,CAAC;AAE7C,6BAAQ","sourcesContent":["import clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\nimport {\n  TextArea as RACTextArea,\n  TextField as RACTextField,\n  type TextAreaProps as RACTextAreaProps,\n  type TextFieldProps as RACTextFieldProps,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../form-field/form-field.js';\nimport type { DOMProps, FieldWithPlaceholderProps } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface TextAreaProps\n  extends DOMProps,\n    FieldWithPlaceholderProps<string>,\n    Pick<\n      RACTextFieldProps,\n      | 'value'\n      | 'defaultValue'\n      | 'onChange'\n      | 'isDisabled'\n      | 'isRequired'\n      | 'isInvalid'\n      | 'isReadOnly'\n      | 'name'\n      | 'type'\n      | 'autoFocus'\n      | 'autoComplete'\n      | 'inputMode'\n      | 'minLength'\n      | 'maxLength'\n    >,\n    Pick<RACTextAreaProps, 'autoCapitalize' | 'autoCorrect' | 'spellCheck' | 'wrap'> {}\n\nfunction TextArea(\n  {\n    label,\n    description,\n    error: errorMessage,\n    placeholder,\n    autoCapitalize,\n    autoCorrect,\n    spellCheck,\n    wrap,\n    UNSAFE_className,\n    UNSAFE_style,\n    ...props\n  }: TextAreaProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    <RACTextField {...props} ref={ref} className={clsx('cim-text-area', UNSAFE_className)} style={UNSAFE_style}>\n      <FormFieldLabel isRequired={props.isRequired} isDisabled={props.isDisabled}>\n        {label}\n      </FormFieldLabel>\n      <RACTextArea\n        className={clsx('cim-text-area-input', textStyle({ variant: 'medium', tone: 'base' }))}\n        placeholder={placeholder}\n        autoCapitalize={autoCapitalize}\n        autoCorrect={autoCorrect}\n        spellCheck={spellCheck}\n        wrap={wrap}\n      />\n      <FormFieldError>{errorMessage}</FormFieldError>\n      <FormFieldDescription>{description}</FormFieldDescription>\n    </RACTextField>\n  );\n}\n\nconst _TextArea = withStyleProps(forwardRef(TextArea), 'TextArea');\n\nexport { _TextArea as TextArea };\n"]}
+{"version":3,"file":"text-area.js","sourceRoot":"","sources":["../../../../src/components/text-inputs/text-area.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AACxB,iCAAqD;AACrD,iEAK+B;AAC/B,yDAAkD;AAClD,mEAA2D;AAC3D,wEAA4G;AAE5G,qDAAmD;AAwBnD,SAAS,QAAQ,CACf,EACE,KAAK,EACL,WAAW,EACX,KAAK,EAAE,YAAY,EACnB,WAAW,EACX,cAAc,EACd,WAAW,EACX,IAAI,EACJ,UAAU,EACV,IAAI,EACJ,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACM,EAChB,GAAiC;IAEjC,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,CAAC,KAAK,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAC5C,OAAO,CAAC,IAAI,CAAC,iFAAiF,CAAC,CAAC;QAClG,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAEvC,OAAO,CACL,wBAAC,iCAAY,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAA,cAAI,EAAC,eAAe,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,aACxG,uBAAC,8BAAc,IAAC,UAAU,EAAE,KAAK,CAAC,UAAU,EAAE,UAAU,EAAE,KAAK,CAAC,UAAU,YACvE,KAAK,GACS,EACjB,uBAAC,gCAAW,IACV,SAAS,EAAE,IAAA,cAAI,EAAC,qBAAqB,EAAE,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC,EACtF,WAAW,EAAE,WAAW,EACxB,cAAc,EAAE,cAAc,EAC9B,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,IAAI,GACV,EACF,uBAAC,8BAAc,cAAE,YAAY,GAAkB,EAC/C,uBAAC,oCAAoB,cAAE,WAAW,GAAwB,IAC7C,CAChB,CAAC;AACJ,CAAC;AAED,qCAAqC;AACrC,oEAAoE;AACpE,MAAM,SAAS,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,CAAC;AAE7C,6BAAQ","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { useEffect, type ForwardedRef } from 'react';\nimport {\n  TextArea as RACTextArea,\n  TextField as RACTextField,\n  type TextAreaProps as RACTextAreaProps,\n  type TextFieldProps as RACTextFieldProps,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport type { CommonProps, FieldWithPlaceholderProps } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface TextAreaProps\n  extends CommonProps,\n    FieldWithPlaceholderProps<string>,\n    Pick<\n      RACTextFieldProps,\n      | 'value'\n      | 'defaultValue'\n      | 'onChange'\n      | 'isDisabled'\n      | 'isRequired'\n      | 'isInvalid'\n      | 'isReadOnly'\n      | 'name'\n      | 'type'\n      | 'autoFocus'\n      | 'autoComplete'\n      | 'inputMode'\n      | 'minLength'\n      | 'maxLength'\n    >,\n    Pick<RACTextAreaProps, 'autoCapitalize' | 'autoCorrect' | 'rows' | 'spellCheck' | 'wrap'> {}\n\nfunction TextArea(\n  {\n    label,\n    description,\n    error: errorMessage,\n    placeholder,\n    autoCapitalize,\n    autoCorrect,\n    rows,\n    spellCheck,\n    wrap,\n    UNSAFE_className,\n    UNSAFE_style,\n    ...props\n  }: TextAreaProps,\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('TextArea requires one of label / aria-label / aria-labelledby for accessibility');\n    }\n  }, [label, ariaLabel, ariaLabelledBy]);\n\n  return (\n    <RACTextField {...props} ref={ref} className={clsx('cim-text-area', UNSAFE_className)} style={UNSAFE_style}>\n      <FormFieldLabel isRequired={props.isRequired} isDisabled={props.isDisabled}>\n        {label}\n      </FormFieldLabel>\n      <RACTextArea\n        className={clsx('cim-text-area-input', textStyle({ variant: 'medium', tone: 'base' }))}\n        placeholder={placeholder}\n        autoCapitalize={autoCapitalize}\n        autoCorrect={autoCorrect}\n        rows={rows}\n        spellCheck={spellCheck}\n        wrap={wrap}\n      />\n      <FormFieldError>{errorMessage}</FormFieldError>\n      <FormFieldDescription>{description}</FormFieldDescription>\n    </RACTextField>\n  );\n}\n\n// TODO: add link to usage guidelines\n/** Allows users to enter multiple lines of text with a keyboard. */\nconst _TextArea = withStyleProps(forwardRef(TextArea), 'TextArea');\n\nexport { _TextArea as TextArea };\n"]}

package/dist/commonjs/components/text-inputs/text-field.d.ts

@@ -1,7 +1,12 @@
 import { type TextFieldProps as RACTextFieldProps } from 'react-aria-components';
-import type { DOMProps, FieldWithPlaceholderProps } from '../types.js';
-export interface TextFieldProps extends DOMProps, FieldWithPlaceholderProps<string>, Pick<RACTextFieldProps, 'value' | 'defaultValue' | 'onChange' | 'isDisabled' | 'isRequired' | 'isInvalid' | 'isReadOnly' | 'name' | 'type' | 'autoFocus' | 'autoComplete' | 'inputMode' | 'minLength' | 'maxLength' | 'pattern'> {
+import type { CommonProps, FieldWithPlaceholderProps } from '../types.js';
+export interface TextFieldProps extends CommonProps, FieldWithPlaceholderProps<string>, Pick<RACTextFieldProps, 'value' | 'defaultValue' | 'onChange' | 'isDisabled' | 'isRequired' | 'isInvalid' | 'isReadOnly' | 'name' | 'type' | 'autoFocus' | 'autoComplete' | 'inputMode' | 'minLength' | 'maxLength' | 'pattern'> {
 }
-declare const _TextField: (props: TextFieldProps & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => import("react").ReactNode;
+/**
+ * Allows users to enter a single line of text with a keyboard.
+ *
+ * See [text field usage guidelines](https://ui.cimpress.io/components/text-field/usage-guidelines/).
+ */
+declare const _TextField: (props: TextFieldProps & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
 export { _TextField as TextField };
 //# sourceMappingURL=text-field.d.ts.map

package/dist/commonjs/components/text-inputs/text-field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-field.d.ts","sourceRoot":"","sources":["../../../../src/components/text-inputs/text-field.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,cAAc,IAAI,iBAAiB,EACzC,MAAM,uBAAuB,CAAC;AAI/B,OAAO,KAAK,EAAE,QAAQ,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAGvE,MAAM,WAAW,cACf,SAAQ,QAAQ,EACd,yBAAyB,CAAC,MAAM,CAAC,EACjC,IAAI,CACF,iBAAiB,EACf,OAAO,GACP,cAAc,GACd,UAAU,GACV,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,YAAY,GACZ,MAAM,GACN,MAAM,GACN,WAAW,GACX,cAAc,GACd,WAAW,GACX,WAAW,GACX,WAAW,GACX,SAAS,CACZ;CAAG;AAqBR,QAAA,MAAM,UAAU,uJAAqD,CAAC;AAEtE,OAAO,EAAE,UAAU,IAAI,SAAS,EAAE,CAAC"}
+{"version":3,"file":"text-field.d.ts","sourceRoot":"","sources":["../../../../src/components/text-inputs/text-field.tsx"],"names":[],"mappings":"AAIA,OAAO,EAGL,KAAK,cAAc,IAAI,iBAAiB,EACzC,MAAM,uBAAuB,CAAC;AAI/B,OAAO,KAAK,EAAE,WAAW,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAG1E,MAAM,WAAW,cACf,SAAQ,WAAW,EACjB,yBAAyB,CAAC,MAAM,CAAC,EACjC,IAAI,CACF,iBAAiB,EACf,OAAO,GACP,cAAc,GACd,UAAU,GACV,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,YAAY,GACZ,MAAM,GACN,MAAM,GACN,WAAW,GACX,cAAc,GACd,WAAW,GACX,WAAW,GACX,WAAW,GACX,SAAS,CACZ;CAAG;AA6BR;;;;GAIG;AACH,QAAA,MAAM,UAAU,gKAAqD,CAAC;AAEtE,OAAO,EAAE,UAAU,IAAI,SAAS,EAAE,CAAC"}

package/dist/commonjs/components/text-inputs/text-field.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
@@ -6,14 +7,26 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextField = 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");
-const form_field_js_1 = require("../form-field/form-field.js");
+const form_field_js_1 = require("../internal/form-field/form-field.js");
 const utils_js_1 = require("../typography/utils.js");
 function TextField({ label, description, error: errorMessage, placeholder, UNSAFE_className, UNSAFE_style, ...props }, ref) {
+    const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
+    (0, react_1.useEffect)(() => {
+        if (!label && !ariaLabel && !ariaLabelledBy) {
+            console.warn('TextField requires one of label / aria-label / aria-labelledby for accessibility');
+        }
+    }, [label, ariaLabel, ariaLabelledBy]);
     return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.TextField, { ...props, ref: ref, className: (0, clsx_1.default)('cim-text-field', 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.jsx)(react_aria_components_1.Input, { className: (0, clsx_1.default)('cim-text-field-input', (0, utils_js_1.textStyle)({ variant: 'medium', tone: 'base' })), placeholder: placeholder }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldError, { children: errorMessage }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldDescription, { children: description })] }));
 }
+/**
+ * Allows users to enter a single line of text with a keyboard.
+ *
+ * See [text field usage guidelines](https://ui.cimpress.io/components/text-field/usage-guidelines/).
+ */
 const _TextField = (0, with_style_props_js_1.withStyleProps)((0, forward_ref_js_1.forwardRef)(TextField), 'TextField');
 exports.TextField = _TextField;
 //# sourceMappingURL=text-field.js.map

package/dist/commonjs/components/text-inputs/text-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-field.js","sourceRoot":"","sources":["../../../../src/components/text-inputs/text-field.tsx"],"names":[],"mappings":";;;;;;;AAAA,gDAAwB;AAExB,iEAI+B;AAC/B,yDAAkD;AAClD,mEAA2D;AAC3D,+DAAmG;AAEnG,qDAAmD;AAwBnD,SAAS,SAAS,CAChB,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAkB,EAClH,GAAiC;IAEjC,OAAO,CACL,wBAAC,iCAAY,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAA,cAAI,EAAC,gBAAgB,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,aACzG,uBAAC,8BAAc,IAAC,UAAU,EAAE,KAAK,CAAC,UAAU,EAAE,UAAU,EAAE,KAAK,CAAC,UAAU,YACvE,KAAK,GACS,EACjB,uBAAC,6BAAQ,IACP,SAAS,EAAE,IAAA,cAAI,EAAC,sBAAsB,EAAE,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC,EACvF,WAAW,EAAE,WAAW,GACxB,EACF,uBAAC,8BAAc,cAAE,YAAY,GAAkB,EAC/C,uBAAC,oCAAoB,cAAE,WAAW,GAAwB,IAC7C,CAChB,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,SAAS,CAAC,EAAE,WAAW,CAAC,CAAC;AAE/C,+BAAS","sourcesContent":["import clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\nimport {\n  Input as RACInput,\n  TextField as RACTextField,\n  type TextFieldProps as RACTextFieldProps,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../form-field/form-field.js';\nimport type { DOMProps, FieldWithPlaceholderProps } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface TextFieldProps\n  extends DOMProps,\n    FieldWithPlaceholderProps<string>,\n    Pick<\n      RACTextFieldProps,\n      | 'value'\n      | 'defaultValue'\n      | 'onChange'\n      | 'isDisabled'\n      | 'isRequired'\n      | 'isInvalid'\n      | 'isReadOnly'\n      | 'name'\n      | 'type'\n      | 'autoFocus'\n      | 'autoComplete'\n      | 'inputMode'\n      | 'minLength'\n      | 'maxLength'\n      | 'pattern'\n    > {}\n\nfunction TextField(\n  { label, description, error: errorMessage, placeholder, UNSAFE_className, UNSAFE_style, ...props }: TextFieldProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    <RACTextField {...props} ref={ref} className={clsx('cim-text-field', UNSAFE_className)} style={UNSAFE_style}>\n      <FormFieldLabel isRequired={props.isRequired} isDisabled={props.isDisabled}>\n        {label}\n      </FormFieldLabel>\n      <RACInput\n        className={clsx('cim-text-field-input', textStyle({ variant: 'medium', tone: 'base' }))}\n        placeholder={placeholder}\n      />\n      <FormFieldError>{errorMessage}</FormFieldError>\n      <FormFieldDescription>{description}</FormFieldDescription>\n    </RACTextField>\n  );\n}\n\nconst _TextField = withStyleProps(forwardRef(TextField), 'TextField');\n\nexport { _TextField as TextField };\n"]}
+{"version":3,"file":"text-field.js","sourceRoot":"","sources":["../../../../src/components/text-inputs/text-field.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AACxB,iCAAqD;AACrD,iEAI+B;AAC/B,yDAAkD;AAClD,mEAA2D;AAC3D,wEAA4G;AAE5G,qDAAmD;AAwBnD,SAAS,SAAS,CAChB,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAkB,EAClH,GAAiC;IAEjC,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,CAAC,KAAK,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAC5C,OAAO,CAAC,IAAI,CAAC,kFAAkF,CAAC,CAAC;QACnG,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAEvC,OAAO,CACL,wBAAC,iCAAY,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAA,cAAI,EAAC,gBAAgB,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,aACzG,uBAAC,8BAAc,IAAC,UAAU,EAAE,KAAK,CAAC,UAAU,EAAE,UAAU,EAAE,KAAK,CAAC,UAAU,YACvE,KAAK,GACS,EACjB,uBAAC,6BAAQ,IACP,SAAS,EAAE,IAAA,cAAI,EAAC,sBAAsB,EAAE,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC,EACvF,WAAW,EAAE,WAAW,GACxB,EACF,uBAAC,8BAAc,cAAE,YAAY,GAAkB,EAC/C,uBAAC,oCAAoB,cAAE,WAAW,GAAwB,IAC7C,CAChB,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,SAAS,CAAC,EAAE,WAAW,CAAC,CAAC;AAE/C,+BAAS","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { useEffect, type ForwardedRef } from 'react';\nimport {\n  Input as RACInput,\n  TextField as RACTextField,\n  type TextFieldProps as RACTextFieldProps,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport type { CommonProps, FieldWithPlaceholderProps } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface TextFieldProps\n  extends CommonProps,\n    FieldWithPlaceholderProps<string>,\n    Pick<\n      RACTextFieldProps,\n      | 'value'\n      | 'defaultValue'\n      | 'onChange'\n      | 'isDisabled'\n      | 'isRequired'\n      | 'isInvalid'\n      | 'isReadOnly'\n      | 'name'\n      | 'type'\n      | 'autoFocus'\n      | 'autoComplete'\n      | 'inputMode'\n      | 'minLength'\n      | 'maxLength'\n      | 'pattern'\n    > {}\n\nfunction TextField(\n  { label, description, error: errorMessage, placeholder, UNSAFE_className, UNSAFE_style, ...props }: TextFieldProps,\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('TextField requires one of label / aria-label / aria-labelledby for accessibility');\n    }\n  }, [label, ariaLabel, ariaLabelledBy]);\n\n  return (\n    <RACTextField {...props} ref={ref} className={clsx('cim-text-field', UNSAFE_className)} style={UNSAFE_style}>\n      <FormFieldLabel isRequired={props.isRequired} isDisabled={props.isDisabled}>\n        {label}\n      </FormFieldLabel>\n      <RACInput\n        className={clsx('cim-text-field-input', textStyle({ variant: 'medium', tone: 'base' }))}\n        placeholder={placeholder}\n      />\n      <FormFieldError>{errorMessage}</FormFieldError>\n      <FormFieldDescription>{description}</FormFieldDescription>\n    </RACTextField>\n  );\n}\n\n/**\n * Allows users to enter a single line of text with a keyboard.\n *\n * See [text field usage guidelines](https://ui.cimpress.io/components/text-field/usage-guidelines/).\n */\nconst _TextField = withStyleProps(forwardRef(TextField), 'TextField');\n\nexport { _TextField as TextField };\n"]}

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

@@ -1,10 +1,18 @@
-import type { CSSProperties } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 import type { LinkProps as RACLinkProps, PressEvent as RACPressEvent, ValidationResult as RACValidationResult } from 'react-aria-components';
+/** Represents an identifier for a collection item. */
 export type Key = string | number;
+/** Represents a direction (vertical or horizontal). */
+export type Direction = 'vertical' | 'horizontal';
 /**
- * A set of common DOM props that are allowed on any component
+ * Use this type when you want to restrict `children` to a string,
+ * but also want to allow expressions that resolve to strings.
  */
-export interface DOMProps {
+export type StringLikeChildren = string | number | (string | number)[];
+/**
+ * A set of common props that are allowed on every component
+ */
+export interface CommonProps {
     /**
      * The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
      */
@@ -12,10 +20,10 @@ export interface DOMProps {
     /**
      * Use this attribute to "claim" the component tree for exclusive Cimpress UI usage.
      */
-    'data-experimental-cim-style-root'?: boolean;
-    /** Sets the CSS className for the element. Only use as a last resort. Use style props instead. */
+    'data-cim-style-root'?: boolean;
+    /** Sets the CSS className for the element. Only use as a **last resort**. Use style props instead. */
     UNSAFE_className?: string;
-    /** Sets the CSS style for the element. Only use as a last resort. Use style props instead. */
+    /** Sets the CSS style for the element. Only use as a **last resort**. Use style props instead. */
     UNSAFE_style?: CSSProperties;
 }
 /**
@@ -26,11 +34,6 @@ export interface DOMProps {
  * it can call `continuePropagation()` to allow a parent to handle it.
  */
 export type PressEvent = RACPressEvent;
-/**
- * Props available on components that perform navigation.
- */
-export interface NavigationProps extends Pick<WithRequired<RACLinkProps, 'href'>, 'href' | 'hrefLang' | 'target' | 'rel' | 'download' | 'ping' | 'referrerPolicy' | 'routerOptions' | 'isDisabled'> {
-}
 /**
  * Props for components that require a label, which can be hidden if necessary.
  */
@@ -54,8 +57,11 @@ export interface LabellableProps {
      */
     'aria-details'?: string;
 }
+/** Provides details about the validation state of a form field. */
 export type ValidationResult = RACValidationResult;
+/** Represents the error message(s) for a form field. */
 export type FieldError = string | string[] | undefined | ((validation: ValidationResult) => string | string[] | undefined);
+/** Props available on form field components. */
 export interface FieldProps<T> extends LabellableProps {
     /** A description for the field. Provides a hint such as specific requirements for what to choose. */
     description?: string;
@@ -68,6 +74,7 @@ export interface FieldProps<T> extends LabellableProps {
      */
     validate?: (value: T) => string | string[] | true | undefined;
 }
+/** Props available on form field components with text inputs. */
 export interface FieldWithPlaceholderProps<T> extends FieldProps<T> {
     /** The placeholder text displayed in the input field. */
     placeholder?: string;
@@ -76,4 +83,53 @@ export interface FieldWithPlaceholderProps<T> extends FieldProps<T> {
 export type WithRequired<T, K extends keyof T> = T & {
     [P in K]-?: T[P];
 };
+/**
+ * This interface allows configuring navigation props with router options and type-safe URLs via TypeScript module augmentation.
+ * By default, this is an empty interface. Extend with `href` and `routerOptions` properties to configure your router.
+ */
+export interface RouterConfig {
+}
+/**
+ * Represents a URL for navigation components.
+ * This type can be configured by augmenting `RouterConfig` with an `href` property.
+ */
+export type Href = RouterConfig extends {
+    href: infer H;
+} ? H : string;
+/**
+ * Represents router options for navigation components.
+ * This type can be configured by augmenting `RouterConfig` with a `routerOptions` property.
+ */
+export type RouterOptions = RouterConfig extends {
+    routerOptions: infer O;
+} ? O : never;
+/**
+ * Props available on components that perform navigation.
+ */
+export interface NavigationProps extends Pick<RACLinkProps, 'hrefLang' | 'target' | 'rel' | 'download' | 'ping' | 'referrerPolicy'> {
+    /** A URL to link to. */
+    href?: Href;
+    /** Options for the configured client side router. */
+    routerOptions?: RouterOptions;
+}
+/** Represents a minimal data shape of a dynamic item in collection components. */
+export interface CollectionItem {
+    /** Unique identifier for the item or group. */
+    id: Key;
+}
+/** Props available on components that render collections. */
+export interface CollectionProps<T extends CollectionItem> {
+    /** The contents of the collection. */
+    children?: ReactNode | ((item: T) => ReactNode);
+    /** The items to display in the collection. */
+    items?: Iterable<T>;
+}
+/** Props available on icons. */
+export interface IconProps extends CommonProps, Pick<LabellableProps, 'aria-label' | 'aria-labelledby'> {
+    /**
+     * Whether the icon is hidden from assistive technologies.
+     * @default true
+     */
+    'aria-hidden'?: boolean;
+}
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EACV,SAAS,IAAI,YAAY,EACzB,UAAU,IAAI,aAAa,EAC3B,gBAAgB,IAAI,mBAAmB,EACxC,MAAM,uBAAuB,CAAC;AAE/B,MAAM,MAAM,GAAG,GAAG,MAAM,GAAG,MAAM,CAAC;AAElC;;GAEG;AACH,MAAM,WAAW,QAAQ;IACvB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,kCAAkC,CAAC,EAAE,OAAO,CAAC;IAC7C,kGAAkG;IAClG,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,8FAA8F;IAC9F,YAAY,CAAC,EAAE,aAAa,CAAC;CAC9B;AAED;;;;;;GAMG;AACH,MAAM,MAAM,UAAU,GAAG,aAAa,CAAC;AAEvC;;GAEG;AACH,MAAM,WAAW,eACf,SAAQ,IAAI,CACV,YAAY,CAAC,YAAY,EAAE,MAAM,CAAC,EAClC,MAAM,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,UAAU,GAAG,MAAM,GAAG,gBAAgB,GAAG,eAAe,GAAG,YAAY,CACjH;CAAG;AAEN;;GAEG;AAEH,MAAM,WAAW,eAAe;IAC9B,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAE5B;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,MAAM,gBAAgB,GAAG,mBAAmB,CAAC;AAEnD,MAAM,MAAM,UAAU,GAClB,MAAM,GACN,MAAM,EAAE,GACR,SAAS,GACT,CAAC,CAAC,UAAU,EAAE,gBAAgB,KAAK,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS,CAAC,CAAC;AAEtE,MAAM,WAAW,UAAU,CAAC,CAAC,CAAE,SAAQ,eAAe;IACpD,qGAAqG;IACrG,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sCAAsC;IACtC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,GAAG,SAAS,CAAC;CAC/D;AAED,MAAM,WAAW,yBAAyB,CAAC,CAAC,CAAE,SAAQ,UAAU,CAAC,CAAC,CAAC;IACjE,yDAAyD;IACzD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,qFAAqF;AACrF,MAAM,MAAM,YAAY,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,IAAI,CAAC,GAAG;KAAG,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAE,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,KAAK,EACV,SAAS,IAAI,YAAY,EACzB,UAAU,IAAI,aAAa,EAC3B,gBAAgB,IAAI,mBAAmB,EACxC,MAAM,uBAAuB,CAAC;AAE/B,sDAAsD;AACtD,MAAM,MAAM,GAAG,GAAG,MAAM,GAAG,MAAM,CAAC;AAElC,uDAAuD;AACvD,MAAM,MAAM,SAAS,GAAG,UAAU,GAAG,YAAY,CAAC;AAElD;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,MAAM,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;AAEvE;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,sGAAsG;IACtG,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kGAAkG;IAClG,YAAY,CAAC,EAAE,aAAa,CAAC;CAC9B;AAED;;;;;;GAMG;AACH,MAAM,MAAM,UAAU,GAAG,aAAa,CAAC;AAEvC;;GAEG;AAEH,MAAM,WAAW,eAAe;IAC9B,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAE5B;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,mEAAmE;AACnE,MAAM,MAAM,gBAAgB,GAAG,mBAAmB,CAAC;AAEnD,wDAAwD;AACxD,MAAM,MAAM,UAAU,GAClB,MAAM,GACN,MAAM,EAAE,GACR,SAAS,GACT,CAAC,CAAC,UAAU,EAAE,gBAAgB,KAAK,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS,CAAC,CAAC;AAEtE,gDAAgD;AAChD,MAAM,WAAW,UAAU,CAAC,CAAC,CAAE,SAAQ,eAAe;IACpD,qGAAqG;IACrG,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sCAAsC;IACtC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,GAAG,SAAS,CAAC;CAC/D;AAED,iEAAiE;AACjE,MAAM,WAAW,yBAAyB,CAAC,CAAC,CAAE,SAAQ,UAAU,CAAC,CAAC,CAAC;IACjE,yDAAyD;IACzD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,qFAAqF;AACrF,MAAM,MAAM,YAAY,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,IAAI,CAAC,GAAG;KAAG,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAE,CAAC;AAE1E;;;GAGG;AAEH,MAAM,WAAW,YAAY;CAAG;AAEhC;;;GAGG;AACH,MAAM,MAAM,IAAI,GAAG,YAAY,SAAS;IAAE,IAAI,EAAE,MAAM,CAAC,CAAA;CAAE,GAAG,CAAC,GAAG,MAAM,CAAC;AAEvE;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,YAAY,SAAS;IAAE,aAAa,EAAE,MAAM,CAAC,CAAA;CAAE,GAAG,CAAC,GAAG,KAAK,CAAC;AAExF;;GAEG;AACH,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,YAAY,EAAE,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,UAAU,GAAG,MAAM,GAAG,gBAAgB,CAAC;IAClG,wBAAwB;IACxB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,qDAAqD;IACrD,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B;AAED,kFAAkF;AAClF,MAAM,WAAW,cAAc;IAC7B,+CAA+C;IAC/C,EAAE,EAAE,GAAG,CAAC;CACT;AAED,6DAA6D;AAC7D,MAAM,WAAW,eAAe,CAAC,CAAC,SAAS,cAAc;IACvD,sCAAsC;IACtC,QAAQ,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,CAAC,CAAC;IAChD,8CAA8C;IAC9C,KAAK,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;CACrB;AAED,gCAAgC;AAChC,MAAM,WAAW,SAAU,SAAQ,WAAW,EAAE,IAAI,CAAC,eAAe,EAAE,YAAY,GAAG,iBAAiB,CAAC;IACrG;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB"}