@cimpress-ui/react 1.0.2 → 1.1.0

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

@@ -1,6 +1,6 @@
 import { type SwitchProps as RACSwitchProps } from 'react-aria-components';
 import type { AriaLabelingProps, CommonProps, StringLikeChildren } from '../types.js';
-export interface UNSTABLE_ToggleProps extends CommonProps, AriaLabelingProps, Pick<RACSwitchProps, 'onChange' | 'isSelected' | 'isDisabled' | 'isReadOnly' | 'defaultSelected' | 'autoFocus' | 'name' | 'value'> {
+export interface UNSTABLE_ToggleProps extends CommonProps, AriaLabelingProps, Pick<RACSwitchProps, 'onChange' | 'isSelected' | 'isDisabled' | 'isReadOnly' | 'defaultSelected' | 'autoFocus' | 'form' | 'name' | 'value'> {
     /** The label rendered next to the toggle. */
     children?: StringLikeChildren;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../../../src/components/toggle/toggle.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAuB,KAAK,WAAW,IAAI,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAKhG,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGtF,MAAM,WAAW,oBACf,SAAQ,WAAW,EACjB,iBAAiB,EACjB,IAAI,CACF,cAAc,EACd,UAAU,GAAG,YAAY,GAAG,YAAY,GAAG,YAAY,GAAG,iBAAiB,GAAG,WAAW,GAAG,MAAM,GAAG,OAAO,CAC7G;IACH,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,kBAAkB,CAAC;CAC/B;AAgCD;;;;GAIG;AACH,QAAA,MAAM,gBAAgB,wKAAwD,CAAC;AAE/E,OAAO,EAAE,gBAAgB,IAAI,eAAe,EAAE,CAAC"}
+{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../../../src/components/toggle/toggle.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAuB,KAAK,WAAW,IAAI,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAKhG,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGtF,MAAM,WAAW,oBACf,SAAQ,WAAW,EACjB,iBAAiB,EACjB,IAAI,CACF,cAAc,EACZ,UAAU,GACV,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,iBAAiB,GACjB,WAAW,GACX,MAAM,GACN,MAAM,GACN,OAAO,CACV;IACH,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,kBAAkB,CAAC;CAC/B;AAgCD;;;;GAIG;AACH,QAAA,MAAM,gBAAgB,wKAAwD,CAAC;AAE/E,OAAO,EAAE,gBAAgB,IAAI,eAAe,EAAE,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"toggle.js","sourceRoot":"","sources":["../../../../src/components/toggle/toggle.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AAExB,iEAAgG;AAChG,yDAAkD;AAClD,mDAAoE;AACpE,qFAA6E;AAC7E,mEAA2D;AAE3D,mDAA6C;AAa7C,SAAS,eAAe,CACtB,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAwB,EAC5E,GAAmC;IAEnC,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,IAAA,gDAAoB,EAAC,GAAG,EAAE;QACxB,IAAI,CAAC,QAAQ,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAC/C,OAAO,CAAC,IAAI,CAAC,kFAAkF,CAAC,CAAC;QACnG,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAE1C,OAAO,CACL,wBAAC,8BAAS,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAA,cAAI,EAAC,YAAY,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,aAClG,gCAAK,SAAS,EAAC,0BAA0B,iCACvC,iCAAK,SAAS,EAAC,kBAAkB,aAC/B,uBAAC,wBAAa,KAAG,EACjB,uBAAC,wBAAa,KAAG,EACjB,gCAAK,SAAS,EAAC,uBAAuB,GAAG,IACrC,GACF,EACL,QAAQ,IAAI,CACX,uBAAC,cAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,QAAQ,YAC7B,QAAQ,GACJ,CACR,IACS,CACb,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,gBAAgB,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,eAAe,CAAC,EAAE,QAAQ,CAAC,CAAC;AAElD,2CAAe","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\nimport { Switch as RACSwitch, type SwitchProps as RACSwitchProps } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconCheckBold, IconCloseBold } from '../../icons/index.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { AriaLabelingProps, CommonProps, StringLikeChildren } from '../types.js';\nimport { Text } from '../typography/text.js';\n\nexport interface UNSTABLE_ToggleProps\n  extends CommonProps,\n    AriaLabelingProps,\n    Pick<\n      RACSwitchProps,\n      'onChange' | 'isSelected' | 'isDisabled' | 'isReadOnly' | 'defaultSelected' | 'autoFocus' | 'name' | 'value'\n    > {\n  /** The label rendered next to the toggle. */\n  children?: StringLikeChildren;\n}\n\nfunction UNSTABLE_Toggle(\n  { children, UNSAFE_className, UNSAFE_style, ...props }: UNSTABLE_ToggleProps,\n  ref: ForwardedRef<HTMLLabelElement>,\n) {\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useProductionWarning(() => {\n    if (!children && !ariaLabel && !ariaLabelledBy) {\n      console.warn('Toggle requires one of children / aria-label / aria-labelledby for accessibility');\n    }\n  }, [children, ariaLabel, ariaLabelledBy]);\n\n  return (\n    <RACSwitch {...props} ref={ref} className={clsx('cim-toggle', UNSAFE_className)} style={UNSAFE_style}>\n      <div className=\"cim-toggle-track-wrapper\" aria-hidden>\n        <div className=\"cim-toggle-track\">\n          <IconCheckBold />\n          <IconCloseBold />\n          <div className=\"cim-toggle-track-head\" />\n        </div>\n      </div>\n      {children && (\n        <Text as=\"span\" variant=\"medium\">\n          {children}\n        </Text>\n      )}\n    </RACSwitch>\n  );\n}\n\n/**\n * Allows users to turn a setting on or off.\n *\n * See [toggle usage guidelines](https://ui.cimpress.io/components/toggle/).\n */\nconst _UNSTABLE_Toggle = withStyleProps(forwardRef(UNSTABLE_Toggle), 'Toggle');\n\nexport { _UNSTABLE_Toggle as UNSTABLE_Toggle };\n"]}
+{"version":3,"file":"toggle.js","sourceRoot":"","sources":["../../../../src/components/toggle/toggle.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AAExB,iEAAgG;AAChG,yDAAkD;AAClD,mDAAoE;AACpE,qFAA6E;AAC7E,mEAA2D;AAE3D,mDAA6C;AAqB7C,SAAS,eAAe,CACtB,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAwB,EAC5E,GAAmC;IAEnC,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,IAAA,gDAAoB,EAAC,GAAG,EAAE;QACxB,IAAI,CAAC,QAAQ,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAC/C,OAAO,CAAC,IAAI,CAAC,kFAAkF,CAAC,CAAC;QACnG,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAE1C,OAAO,CACL,wBAAC,8BAAS,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAA,cAAI,EAAC,YAAY,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,aAClG,gCAAK,SAAS,EAAC,0BAA0B,iCACvC,iCAAK,SAAS,EAAC,kBAAkB,aAC/B,uBAAC,wBAAa,KAAG,EACjB,uBAAC,wBAAa,KAAG,EACjB,gCAAK,SAAS,EAAC,uBAAuB,GAAG,IACrC,GACF,EACL,QAAQ,IAAI,CACX,uBAAC,cAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,QAAQ,YAC7B,QAAQ,GACJ,CACR,IACS,CACb,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,gBAAgB,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,eAAe,CAAC,EAAE,QAAQ,CAAC,CAAC;AAElD,2CAAe","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\nimport { Switch as RACSwitch, type SwitchProps as RACSwitchProps } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconCheckBold, IconCloseBold } from '../../icons/index.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { AriaLabelingProps, CommonProps, StringLikeChildren } from '../types.js';\nimport { Text } from '../typography/text.js';\n\nexport interface UNSTABLE_ToggleProps\n  extends CommonProps,\n    AriaLabelingProps,\n    Pick<\n      RACSwitchProps,\n      | 'onChange'\n      | 'isSelected'\n      | 'isDisabled'\n      | 'isReadOnly'\n      | 'defaultSelected'\n      | 'autoFocus'\n      | 'form'\n      | 'name'\n      | 'value'\n    > {\n  /** The label rendered next to the toggle. */\n  children?: StringLikeChildren;\n}\n\nfunction UNSTABLE_Toggle(\n  { children, UNSAFE_className, UNSAFE_style, ...props }: UNSTABLE_ToggleProps,\n  ref: ForwardedRef<HTMLLabelElement>,\n) {\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useProductionWarning(() => {\n    if (!children && !ariaLabel && !ariaLabelledBy) {\n      console.warn('Toggle requires one of children / aria-label / aria-labelledby for accessibility');\n    }\n  }, [children, ariaLabel, ariaLabelledBy]);\n\n  return (\n    <RACSwitch {...props} ref={ref} className={clsx('cim-toggle', UNSAFE_className)} style={UNSAFE_style}>\n      <div className=\"cim-toggle-track-wrapper\" aria-hidden>\n        <div className=\"cim-toggle-track\">\n          <IconCheckBold />\n          <IconCloseBold />\n          <div className=\"cim-toggle-track-head\" />\n        </div>\n      </div>\n      {children && (\n        <Text as=\"span\" variant=\"medium\">\n          {children}\n        </Text>\n      )}\n    </RACSwitch>\n  );\n}\n\n/**\n * Allows users to turn a setting on or off.\n *\n * See [toggle usage guidelines](https://ui.cimpress.io/components/toggle/).\n */\nconst _UNSTABLE_Toggle = withStyleProps(forwardRef(UNSTABLE_Toggle), 'Toggle');\n\nexport { _UNSTABLE_Toggle as UNSTABLE_Toggle };\n"]}

package/dist/commonjs/components/toggle-button/context.d.ts

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

package/dist/commonjs/components/toggle-button/context.d.ts.map

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

package/dist/commonjs/components/toggle-button/context.js

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

package/dist/commonjs/components/toggle-button/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sourceRoot":"","sources":["../../../../src/components/toggle-button/context.tsx"],"names":[],"mappings":";;;AACA,iCAAsC;AAWtC,gBAAgB;AACH,QAAA,wBAAwB,GAAG,IAAA,qBAAa,EAAuC,IAAI,CAAC,CAAC","sourcesContent":["import type { FormValidationState } from '@react-stately/form';\nimport { createContext } from 'react';\n\n/** @internal */\nexport interface ToggleButtonGroupContextValue {\n  form?: string;\n  name?: string;\n  isInvalid?: boolean;\n  isRequired?: boolean;\n  validationState: FormValidationState;\n}\n\n/** @internal */\nexport const ToggleButtonGroupContext = createContext<ToggleButtonGroupContextValue | null>(null);\n"]}

package/dist/commonjs/components/toggle-button/internal-toggle-button.d.ts

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

package/dist/commonjs/components/toggle-button/internal-toggle-button.d.ts.map

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

package/dist/commonjs/components/toggle-button/internal-toggle-button.js

@@ -0,0 +1,57 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InternalToggleButton = InternalToggleButton;
+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 utils_2 = require("@react-stately/utils");
+const clsx_1 = __importDefault(require("clsx"));
+const react_1 = require("react");
+const react_aria_components_1 = require("react-aria-components");
+const context_js_1 = require("./context.js");
+/** @internal */
+function InternalToggleButton({ buttonRef: ref, children, size = 'medium', isDisabled, fullWidth, UNSAFE_className, UNSAFE_style, form, name, value, isSelected: consumerIsSelected, defaultSelected: consumerDefaultSelected, onChange, ...props }) {
+    // State
+    const toggleButtonGroupContext = (0, react_1.useContext)(context_js_1.ToggleButtonGroupContext);
+    const toggleGroupState = (0, react_1.useContext)(react_aria_components_1.ToggleGroupStateContext);
+    const descriptionProps = (0, react_aria_components_1.useSlottedContext)(react_aria_components_1.TextContext, 'description');
+    const errorMessageProps = (0, react_aria_components_1.useSlottedContext)(react_aria_components_1.TextContext, 'errorMessage');
+    const [isSelected, setIsSelected] = (0, utils_2.useControlledState)(toggleGroupState && value ? toggleGroupState.selectedKeys.has(value) : consumerIsSelected, consumerDefaultSelected ?? false, (newIsSelected) => {
+        onChange?.(newIsSelected);
+        if (toggleGroupState && value) {
+            toggleGroupState.setSelected(value, newIsSelected);
+        }
+        validationState.commitValidation();
+    });
+    // Validation
+    const buttonRef = (0, utils_1.useObjectRef)(ref);
+    const formInputRef = (0, react_1.useRef)(null);
+    const formInputName = toggleButtonGroupContext?.name ?? name;
+    const validationState = (0, form_2.useFormValidationState)({
+        // If part of a group, validation is handled at group level
+        name: toggleButtonGroupContext ? undefined : name,
+        value,
+        validationBehavior: 'native',
+        [form_2.privateValidationStateProp]: toggleButtonGroupContext?.validationState ?? undefined,
+    });
+    const [initialSelected] = (0, react_1.useState)(isSelected);
+    (0, utils_1.useFormReset)(formInputRef, consumerDefaultSelected ?? initialSelected, setIsSelected);
+    (0, form_1.useFormValidation)({
+        focus: () => buttonRef.current?.focus(),
+        validationBehavior: 'native',
+    }, validationState, formInputRef);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.ToggleButton, { ...props, ref: buttonRef, className: (0, clsx_1.default)('cim-toggle-button', UNSAFE_className), style: UNSAFE_style, id: toggleButtonGroupContext ? value : undefined, isDisabled: isDisabled, isSelected: isSelected, onChange: setIsSelected, "aria-describedby": [
+                    props['aria-describedby'],
+                    toggleButtonGroupContext?.isInvalid ? errorMessageProps?.id : null,
+                    descriptionProps?.id,
+                ]
+                    .filter(Boolean)
+                    .join(' ') || undefined, "data-variant": "secondary", "data-tone": "base", "data-size": size, "data-full-width": fullWidth || undefined, children: children }), formInputName && ((0, jsx_runtime_1.jsx)("input", { ref: formInputRef, style: { display: 'none' }, type: "checkbox", form: toggleButtonGroupContext?.form ?? form, name: formInputName, checked: isSelected, value: value, required: toggleButtonGroupContext?.isRequired, "aria-invalid": toggleButtonGroupContext?.validationState.displayValidation.isInvalid ??
+                    validationState.displayValidation.isInvalid ??
+                    undefined, onChange: () => { } }))] }));
+}
+//# sourceMappingURL=internal-toggle-button.js.map

package/dist/commonjs/components/toggle-button/internal-toggle-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal-toggle-button.js","sourceRoot":"","sources":["../../../../src/components/toggle-button/internal-toggle-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useFormValidation } from '@react-aria/form';\nimport { useFormReset, useObjectRef } from '@react-aria/utils';\nimport { privateValidationStateProp, useFormValidationState } from '@react-stately/form';\nimport { useControlledState } from '@react-stately/utils';\nimport clsx from 'clsx';\nimport { type ReactNode, useContext, useRef, useState, type Ref } from 'react';\nimport {\n  TextContext as RACTextContext,\n  ToggleButton as RACToggleButton,\n  type ToggleButtonProps as RACToggleButtonProps,\n  ToggleGroupStateContext as RACToggleGroupStateContext,\n  useSlottedContext,\n} from 'react-aria-components';\nimport type { BaseButtonProps } from '../button/types.js';\nimport type { AriaLabelingProps, CommonProps } from '../types.js';\nimport { ToggleButtonGroupContext } from './context.js';\n\n/** @internal */\nexport interface BaseToggleButtonProps\n  extends Omit<CommonProps, 'id'>,\n    AriaLabelingProps,\n    Pick<BaseButtonProps, 'size' | 'fullWidth'>,\n    Pick<\n      RACToggleButtonProps,\n      | 'defaultSelected'\n      | 'isSelected'\n      | 'onPress'\n      | 'onHoverStart'\n      | 'onHoverEnd'\n      | 'onChange'\n      | 'isDisabled'\n      | 'autoFocus'\n    > {\n  /**\n   * The `<form>` element to associate the input with.\n   * The value of this attribute must be the id of a `<form>` in the same document.\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).\n   */\n  form?: string;\n  /**\n   * The name of the input element, used when submitting an HTML form.\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name).\n   */\n  name?: string;\n  /**\n   * The value of the input element, used when submitting an HTML form.\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#value).\n   *\n   * When used in a `ToggleButtonGroup`, `value` serves as an identifier for this button, and has to be unique across all buttons in the group.\n   */\n  value?: string;\n}\n\ninterface InternalToggleButtonProps extends BaseToggleButtonProps {\n  children?: ReactNode;\n  buttonRef?: Ref<HTMLButtonElement>;\n}\n\n/** @internal */\nexport function InternalToggleButton({\n  buttonRef: ref,\n  children,\n  size = 'medium',\n  isDisabled,\n  fullWidth,\n  UNSAFE_className,\n  UNSAFE_style,\n  form,\n  name,\n  value,\n  isSelected: consumerIsSelected,\n  defaultSelected: consumerDefaultSelected,\n  onChange,\n  ...props\n}: InternalToggleButtonProps) {\n  // State\n\n  const toggleButtonGroupContext = useContext(ToggleButtonGroupContext);\n  const toggleGroupState = useContext(RACToggleGroupStateContext);\n  const descriptionProps = useSlottedContext(RACTextContext, 'description');\n  const errorMessageProps = useSlottedContext(RACTextContext, 'errorMessage');\n\n  const [isSelected, setIsSelected] = useControlledState(\n    toggleGroupState && value ? toggleGroupState.selectedKeys.has(value) : consumerIsSelected,\n    consumerDefaultSelected ?? false,\n    (newIsSelected) => {\n      onChange?.(newIsSelected);\n\n      if (toggleGroupState && value) {\n        toggleGroupState.setSelected(value, newIsSelected);\n      }\n\n      validationState.commitValidation();\n    },\n  );\n\n  // Validation\n\n  const buttonRef = useObjectRef(ref);\n  const formInputRef = useRef<HTMLInputElement>(null);\n  const formInputName = toggleButtonGroupContext?.name ?? name;\n\n  const validationState = useFormValidationState({\n    // If part of a group, validation is handled at group level\n    name: toggleButtonGroupContext ? undefined : name,\n    value,\n    validationBehavior: 'native',\n    [privateValidationStateProp]: toggleButtonGroupContext?.validationState ?? undefined,\n  });\n\n  const [initialSelected] = useState(isSelected);\n  useFormReset(formInputRef, consumerDefaultSelected ?? initialSelected, setIsSelected);\n\n  useFormValidation(\n    {\n      focus: () => buttonRef.current?.focus(),\n      validationBehavior: 'native',\n    },\n    validationState,\n    formInputRef,\n  );\n\n  return (\n    <>\n      <RACToggleButton\n        {...props}\n        ref={buttonRef}\n        className={clsx('cim-toggle-button', UNSAFE_className)}\n        style={UNSAFE_style}\n        id={toggleButtonGroupContext ? value : undefined}\n        isDisabled={isDisabled}\n        isSelected={isSelected}\n        onChange={setIsSelected}\n        aria-describedby={\n          [\n            props['aria-describedby'],\n            toggleButtonGroupContext?.isInvalid ? errorMessageProps?.id : null,\n            descriptionProps?.id,\n          ]\n            .filter(Boolean)\n            .join(' ') || undefined\n        }\n        data-variant=\"secondary\"\n        data-tone=\"base\"\n        data-size={size}\n        data-full-width={fullWidth || undefined}\n      >\n        {children}\n      </RACToggleButton>\n\n      {formInputName && (\n        <input\n          ref={formInputRef}\n          style={{ display: 'none' }}\n          type=\"checkbox\"\n          form={toggleButtonGroupContext?.form ?? form}\n          name={formInputName}\n          checked={isSelected}\n          value={value}\n          required={toggleButtonGroupContext?.isRequired}\n          aria-invalid={\n            toggleButtonGroupContext?.validationState.displayValidation.isInvalid ??\n            validationState.displayValidation.isInvalid ??\n            undefined\n          }\n          onChange={() => {}}\n        />\n      )}\n    </>\n  );\n}\n"]}

package/dist/commonjs/components/toggle-button/toggle-button-group.d.ts

@@ -1,15 +1,19 @@
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import { type ToggleButtonGroupProps as RACToggleButtonGroupProps } from 'react-aria-components';
-import type { CommonProps, LabellableProps } from '../types.js';
-export interface UNSTABLE_ToggleButtonGroupProps extends Omit<CommonProps, 'id'>, Omit<LabellableProps, 'label'>, Pick<RACToggleButtonGroupProps, 'selectedKeys' | 'defaultSelectedKeys' | 'onSelectionChange' | 'selectionMode' | 'isDisabled' | 'orientation'> {
-    /** Toggle buttons belonging to the group. Each button must have an `id` prop defined. */
+import type { CommonProps, FieldProps, Key, WithRequired } from '../types.js';
+export interface ToggleButtonGroupProps extends Omit<CommonProps, 'id'>, WithRequired<FieldProps<Set<Key>>, 'label'>, Pick<RACToggleButtonGroupProps, 'selectedKeys' | 'defaultSelectedKeys' | 'onSelectionChange' | 'selectionMode' | 'isDisabled'> {
+    /** Toggle buttons belonging to the group. Each button must have a `value` prop defined. */
     children: ReactNode;
+    /** Whether the current selection is invalid. */
+    isInvalid?: boolean;
+    /** Whether a selection is required before form submission. */
+    isRequired?: boolean;
 }
 /**
  * Allows users to toggle multiple options, with single or multiple selection.
  *
  * See [toggle button usage guidelines](https://ui.cimpress.io/components/toggle-button/).
  */
-declare const _UNSTABLE_ToggleButtonGroup: (props: UNSTABLE_ToggleButtonGroupProps & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
-export { _UNSTABLE_ToggleButtonGroup as UNSTABLE_ToggleButtonGroup };
+declare const _ToggleButtonGroup: (props: ToggleButtonGroupProps & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
+export { _ToggleButtonGroup as ToggleButtonGroup };
 //# sourceMappingURL=toggle-button-group.d.ts.map

package/dist/commonjs/components/toggle-button/toggle-button-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-button-group.d.ts","sourceRoot":"","sources":["../../../../src/components/toggle-button/toggle-button-group.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAEL,KAAK,sBAAsB,IAAI,yBAAyB,EACzD,MAAM,uBAAuB,CAAC;AAI/B,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAEhE,MAAM,WAAW,+BACf,SAAQ,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,EAC7B,IAAI,CAAC,eAAe,EAAE,OAAO,CAAC,EAC9B,IAAI,CACF,yBAAyB,EACzB,cAAc,GAAG,qBAAqB,GAAG,mBAAmB,GAAG,eAAe,GAAG,YAAY,GAAG,aAAa,CAC9G;IACH,yFAAyF;IACzF,QAAQ,EAAE,SAAS,CAAC;CACrB;AA0BD;;;;GAIG;AACH,QAAA,MAAM,2BAA2B,iLAA8E,CAAC;AAEhH,OAAO,EAAE,2BAA2B,IAAI,0BAA0B,EAAE,CAAC"}
+{"version":3,"file":"toggle-button-group.d.ts","sourceRoot":"","sources":["../../../../src/components/toggle-button/toggle-button-group.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAW,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGhD,OAAO,EAML,KAAK,sBAAsB,IAAI,yBAAyB,EACzD,MAAM,uBAAuB,CAAC;AAO/B,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAI9E,MAAM,WAAW,sBACf,SAAQ,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,EAC7B,YAAY,CAAC,UAAU,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,CAAC,EAC3C,IAAI,CACF,yBAAyB,EACzB,cAAc,GAAG,qBAAqB,GAAG,mBAAmB,GAAG,eAAe,GAAG,YAAY,CAC9F;IACH,2FAA2F;IAC3F,QAAQ,EAAE,SAAS,CAAC;IACpB,gDAAgD;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAuHD;;;;GAIG;AACH,QAAA,MAAM,kBAAkB,wKAAqE,CAAC;AAE9F,OAAO,EAAE,kBAAkB,IAAI,iBAAiB,EAAE,CAAC"}

package/dist/commonjs/components/toggle-button/toggle-button-group.js

@@ -4,27 +4,79 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UNSTABLE_ToggleButtonGroup = void 0;
+exports.ToggleButtonGroup = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const form_1 = require("@react-stately/form");
+const utils_1 = require("@react-stately/utils");
 const clsx_1 = __importDefault(require("clsx"));
+const react_1 = require("react");
+const react_aria_1 = require("react-aria");
 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_production_warning_js_1 = require("../../utils/use-production-warning.js");
 const with_style_props_js_1 = require("../../with-style-props.js");
-function UNSTABLE_ToggleButtonGroup({ children, UNSAFE_className, UNSAFE_style, ...props }, ref) {
-    const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
+const form_field_js_1 = require("../internal/form-field/form-field.js");
+const stack_js_1 = require("../spacing/stack/stack.js");
+const visually_hidden_js_1 = require("../visually-hidden/visually-hidden.js");
+const context_js_1 = require("./context.js");
+function ToggleButtonGroup({ children, label, description, error: errorMessage, validate, form, name, isInvalid, isRequired, selectedKeys: consumerSelectedKeys, defaultSelectedKeys: consumerDefaultSelectedKeys, onSelectionChange, UNSAFE_className, UNSAFE_style, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-details': ariaDetails, ...props }, ref) {
     (0, use_production_warning_js_1.useProductionWarning)(() => {
-        if (!ariaLabel && !ariaLabelledBy) {
-            console.warn('ToggleButtonGroup requires one of aria-label / aria-labelledby for accessibility');
+        if (!label && !ariaLabel && !ariaLabelledBy) {
+            console.warn('ToggleButtonGroup requires one of label / aria-label / aria-labelledby for accessibility');
         }
-    }, [ariaLabel, ariaLabelledBy]);
-    return ((0, jsx_runtime_1.jsx)(react_aria_components_1.ToggleButtonGroup, { ...props, ref: ref, className: (0, clsx_1.default)('cim-toggle-button-group', UNSAFE_className), style: UNSAFE_style, children: children }));
+    }, [label, ariaLabel, ariaLabelledBy]);
+    const labelMessages = (0, index_js_1.useLocalizedMessages)('label');
+    // State
+    const [selectedKeys, setSelectedKeys] = (0, utils_1.useControlledState)(consumerSelectedKeys, consumerDefaultSelectedKeys ?? [], (newSelectedKeys) => {
+        onSelectionChange?.(new Set(newSelectedKeys));
+        validationState.commitValidation();
+    });
+    const selectedSet = (0, react_1.useMemo)(() => new Set(selectedKeys), [selectedKeys]);
+    // Validation
+    const validationState = (0, form_1.useFormValidationState)({
+        value: selectedSet,
+        isInvalid,
+        isRequired,
+        name,
+        validate,
+        validationBehavior: 'native',
+    });
+    const { labelProps, fieldProps, descriptionProps, errorMessageProps } = (0, react_aria_1.useField)({
+        'aria-label': ariaLabel,
+        'aria-labelledby': ariaLabelledBy,
+        'aria-describedby': ariaDescribedBy,
+        'aria-details': ariaDetails,
+        description,
+        errorMessage: errorMessage || validationState.displayValidation.validationErrors,
+        isInvalid: isInvalid || validationState.displayValidation.isInvalid,
+        label,
+        labelElementType: 'span',
+        validate,
+        validationBehavior: 'native',
+    });
+    // Remove props that we don't want from fieldProps
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { id, ...filteredFieldProps } = fieldProps;
+    const toggleButtonGroupContext = {
+        form,
+        name,
+        isInvalid: isInvalid || validationState.displayValidation.isInvalid,
+        isRequired: isRequired && selectedSet.size === 0,
+        validationState,
+    };
+    return ((0, jsx_runtime_1.jsx)(react_aria_components_1.ToggleButtonGroup, { ...(0, react_aria_1.mergeProps)(props, filteredFieldProps), ref: ref, className: (0, clsx_1.default)('cim-toggle-button-group', UNSAFE_className), style: UNSAFE_style, selectedKeys: selectedKeys, onSelectionChange: setSelectedKeys, children: (0, jsx_runtime_1.jsxs)(react_aria_components_1.Provider, { values: [
+                [react_aria_components_1.LabelContext, { ...labelProps, elementType: 'span' }],
+                [react_aria_components_1.TextContext, { slots: { description: descriptionProps, errorMessage: errorMessageProps } }],
+                [react_aria_components_1.FieldErrorContext, validationState.displayValidation],
+                [context_js_1.ToggleButtonGroupContext, toggleButtonGroupContext],
+            ], children: [(0, jsx_runtime_1.jsxs)(form_field_js_1.FormFieldLabel, { isRequired: isRequired, children: [label, isRequired && (0, jsx_runtime_1.jsx)(visually_hidden_js_1.UNSTABLE_VisuallyHidden, { children: labelMessages.format('required') })] }), (0, jsx_runtime_1.jsx)(stack_js_1.Stack, { gap: 8, direction: "horizontal", wrap: true, children: children }), (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 toggle multiple options, with single or multiple selection.
  *
  * See [toggle button usage guidelines](https://ui.cimpress.io/components/toggle-button/).
  */
-const _UNSTABLE_ToggleButtonGroup = (0, with_style_props_js_1.withStyleProps)((0, forward_ref_js_1.forwardRef)(UNSTABLE_ToggleButtonGroup), 'ToggleButtonGroup');
-exports.UNSTABLE_ToggleButtonGroup = _UNSTABLE_ToggleButtonGroup;
+const _ToggleButtonGroup = (0, with_style_props_js_1.withStyleProps)((0, forward_ref_js_1.forwardRef)(ToggleButtonGroup), 'ToggleButtonGroup');
+exports.ToggleButtonGroup = _ToggleButtonGroup;
 //# sourceMappingURL=toggle-button-group.js.map

package/dist/commonjs/components/toggle-button/toggle-button-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-button-group.js","sourceRoot":"","sources":["../../../../src/components/toggle-button/toggle-button-group.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AAGxB,iEAG+B;AAC/B,yDAAkD;AAClD,qFAA6E;AAC7E,mEAA2D;AAc3D,SAAS,0BAA0B,CACjC,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAmC,EACvF,GAAiC;IAEjC,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,IAAA,gDAAoB,EAAC,GAAG,EAAE;QACxB,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAClC,OAAO,CAAC,IAAI,CAAC,kFAAkF,CAAC,CAAC;QACnG,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAEhC,OAAO,CACL,uBAAC,yCAAoB,OACf,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAI,EAAC,yBAAyB,EAAE,gBAAgB,CAAC,EAC5D,KAAK,EAAE,YAAY,YAElB,QAAQ,GACY,CACxB,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,2BAA2B,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,0BAA0B,CAAC,EAAE,mBAAmB,CAAC,CAAC;AAExE,iEAA0B","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ReactNode } from 'react';\nimport type { ForwardedRef } from 'react';\nimport {\n  ToggleButtonGroup as RACToggleButtonGroup,\n  type ToggleButtonGroupProps as RACToggleButtonGroupProps,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { CommonProps, LabellableProps } from '../types.js';\n\nexport interface UNSTABLE_ToggleButtonGroupProps\n  extends Omit<CommonProps, 'id'>,\n    Omit<LabellableProps, 'label'>,\n    Pick<\n      RACToggleButtonGroupProps,\n      'selectedKeys' | 'defaultSelectedKeys' | 'onSelectionChange' | 'selectionMode' | 'isDisabled' | 'orientation'\n    > {\n  /** Toggle buttons belonging to the group. Each button must have an `id` prop defined. */\n  children: ReactNode;\n}\n\nfunction UNSTABLE_ToggleButtonGroup(\n  { children, UNSAFE_className, UNSAFE_style, ...props }: UNSTABLE_ToggleButtonGroupProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useProductionWarning(() => {\n    if (!ariaLabel && !ariaLabelledBy) {\n      console.warn('ToggleButtonGroup requires one of aria-label / aria-labelledby for accessibility');\n    }\n  }, [ariaLabel, ariaLabelledBy]);\n\n  return (\n    <RACToggleButtonGroup\n      {...props}\n      ref={ref}\n      className={clsx('cim-toggle-button-group', UNSAFE_className)}\n      style={UNSAFE_style}\n    >\n      {children}\n    </RACToggleButtonGroup>\n  );\n}\n\n/**\n * Allows users to toggle multiple options, with single or multiple selection.\n *\n * See [toggle button usage guidelines](https://ui.cimpress.io/components/toggle-button/).\n */\nconst _UNSTABLE_ToggleButtonGroup = withStyleProps(forwardRef(UNSTABLE_ToggleButtonGroup), 'ToggleButtonGroup');\n\nexport { _UNSTABLE_ToggleButtonGroup as UNSTABLE_ToggleButtonGroup };\n"]}
+{"version":3,"file":"toggle-button-group.js","sourceRoot":"","sources":["../../../../src/components/toggle-button/toggle-button-group.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport { useFormValidationState } from '@react-stately/form';\nimport { useControlledState } from '@react-stately/utils';\nimport clsx from 'clsx';\nimport { useMemo, type ReactNode } from 'react';\nimport type { ForwardedRef } from 'react';\nimport { mergeProps, useField } from 'react-aria';\nimport {\n  LabelContext as RACLabelContext,\n  FieldErrorContext as RACFieldErrorContext,\n  Provider as RACProvider,\n  TextContext as RACTextContext,\n  ToggleButtonGroup as RACToggleButtonGroup,\n  type ToggleButtonGroupProps as RACToggleButtonGroupProps,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useLocalizedMessages } from '../../i18n/index.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport { Stack } from '../spacing/stack/stack.js';\nimport type { CommonProps, FieldProps, Key, WithRequired } from '../types.js';\nimport { UNSTABLE_VisuallyHidden as VisuallyHidden } from '../visually-hidden/visually-hidden.js';\nimport { ToggleButtonGroupContext, type ToggleButtonGroupContextValue } from './context.js';\n\nexport interface ToggleButtonGroupProps\n  extends Omit<CommonProps, 'id'>,\n    WithRequired<FieldProps<Set<Key>>, 'label'>,\n    Pick<\n      RACToggleButtonGroupProps,\n      'selectedKeys' | 'defaultSelectedKeys' | 'onSelectionChange' | 'selectionMode' | 'isDisabled'\n    > {\n  /** Toggle buttons belonging to the group. Each button must have a `value` prop defined. */\n  children: ReactNode;\n  /** Whether the current selection is invalid. */\n  isInvalid?: boolean;\n  /** Whether a selection is required before form submission. */\n  isRequired?: boolean;\n}\n\nfunction ToggleButtonGroup(\n  {\n    children,\n    label,\n    description,\n    error: errorMessage,\n    validate,\n    form,\n    name,\n    isInvalid,\n    isRequired,\n    selectedKeys: consumerSelectedKeys,\n    defaultSelectedKeys: consumerDefaultSelectedKeys,\n    onSelectionChange,\n    UNSAFE_className,\n    UNSAFE_style,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-details': ariaDetails,\n    ...props\n  }: ToggleButtonGroupProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  useProductionWarning(() => {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn('ToggleButtonGroup requires one of label / aria-label / aria-labelledby for accessibility');\n    }\n  }, [label, ariaLabel, ariaLabelledBy]);\n\n  const labelMessages = useLocalizedMessages('label');\n\n  // State\n\n  const [selectedKeys, setSelectedKeys] = useControlledState(\n    consumerSelectedKeys,\n    consumerDefaultSelectedKeys ?? [],\n    (newSelectedKeys) => {\n      onSelectionChange?.(new Set(newSelectedKeys));\n      validationState.commitValidation();\n    },\n  );\n\n  const selectedSet = useMemo(() => new Set<Key>(selectedKeys), [selectedKeys]);\n\n  // Validation\n\n  const validationState = useFormValidationState({\n    value: selectedSet,\n    isInvalid,\n    isRequired,\n    name,\n    validate,\n    validationBehavior: 'native',\n  });\n\n  const { labelProps, fieldProps, descriptionProps, errorMessageProps } = useField({\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-details': ariaDetails,\n    description,\n    errorMessage: errorMessage || validationState.displayValidation.validationErrors,\n    isInvalid: isInvalid || validationState.displayValidation.isInvalid,\n    label,\n    labelElementType: 'span',\n    validate,\n    validationBehavior: 'native',\n  });\n\n  // Remove props that we don't want from fieldProps\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const { id, ...filteredFieldProps } = fieldProps;\n\n  const toggleButtonGroupContext: ToggleButtonGroupContextValue = {\n    form,\n    name,\n    isInvalid: isInvalid || validationState.displayValidation.isInvalid,\n    isRequired: isRequired && selectedSet.size === 0,\n    validationState,\n  };\n\n  return (\n    <RACToggleButtonGroup\n      {...mergeProps(props, filteredFieldProps)}\n      ref={ref}\n      className={clsx('cim-toggle-button-group', UNSAFE_className)}\n      style={UNSAFE_style}\n      selectedKeys={selectedKeys}\n      onSelectionChange={setSelectedKeys}\n    >\n      <RACProvider\n        values={[\n          [RACLabelContext, { ...labelProps, elementType: 'span' }],\n          [RACTextContext, { slots: { description: descriptionProps, errorMessage: errorMessageProps } }],\n          [RACFieldErrorContext, validationState.displayValidation],\n          [ToggleButtonGroupContext, toggleButtonGroupContext],\n        ]}\n      >\n        <FormFieldLabel isRequired={isRequired}>\n          {label}\n          {/*\n           * Button elements don't support `aria-required`, so we need to add visually hidden text to indicate that the field is required.\n           * See: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-required#examples:~:text=Note%3A%20If%20the%20field%27s%20label%20already%20contains%20the%20word%20%22required%22%2C%20it%20is%20recommended%20to%20leave%20out%20the%20aria%2Drequired%20attribute.%20This%20avoids%20that%20screen%20readers%20read%20out%20the%20term%20%22required%22%20twice.\n           */}\n          {isRequired && <VisuallyHidden>{labelMessages.format('required')}</VisuallyHidden>}\n        </FormFieldLabel>\n        <Stack gap={8} direction=\"horizontal\" wrap>\n          {children}\n        </Stack>\n        <FormFieldError>{errorMessage}</FormFieldError>\n        <FormFieldDescription>{description}</FormFieldDescription>\n      </RACProvider>\n    </RACToggleButtonGroup>\n  );\n}\n\n/**\n * Allows users to toggle multiple options, with single or multiple selection.\n *\n * See [toggle button usage guidelines](https://ui.cimpress.io/components/toggle-button/).\n */\nconst _ToggleButtonGroup = withStyleProps(forwardRef(ToggleButtonGroup), 'ToggleButtonGroup');\n\nexport { _ToggleButtonGroup as ToggleButtonGroup };\n"]}

package/dist/commonjs/components/toggle-button/toggle-button.d.ts

@@ -1,9 +1,9 @@
-import { type ToggleButtonProps as RACToggleButtonProps } from 'react-aria-components';
-import type { BaseButtonProps, TextButtonProps } from '../button/types.js';
-import type { CommonProps, Key } from '../types.js';
-export interface UNSTABLE_ToggleButtonProps extends Omit<CommonProps, 'id'>, TextButtonProps, Pick<BaseButtonProps, 'size' | 'fullWidth'>, Pick<RACToggleButtonProps, 'defaultSelected' | 'isSelected' | 'type' | 'onPress' | 'onHoverStart' | 'onHoverEnd' | 'onChange' | 'isDisabled'> {
-    /** An identifier for this button when used in a `ToggleButtonGroup`. Has to be unique across all buttons in the group. */
-    id?: Key;
+import type { TextButtonProps } from '../button/types.js';
+import type { StringLikeChildren } from '../types.js';
+import { type BaseToggleButtonProps } from './internal-toggle-button.js';
+export interface ToggleButtonProps extends BaseToggleButtonProps, Omit<TextButtonProps, 'children'> {
+    /** The text displayed on the button. Must remain the same regardless of selection state. */
+    children: StringLikeChildren;
 }
 /**
  * Displays a labelled button that allows users to toggle between two states.
@@ -11,6 +11,6 @@ export interface UNSTABLE_ToggleButtonProps extends Omit<CommonProps, 'id'>, Tex
  *
  * See [toggle button usage guidelines](https://ui.cimpress.io/components/toggle-button/).
  */
-declare const _UNSTABLE_ToggleButton: (props: UNSTABLE_ToggleButtonProps & import("react").RefAttributes<HTMLButtonElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
-export { _UNSTABLE_ToggleButton as UNSTABLE_ToggleButton };
+declare const _ToggleButton: (props: ToggleButtonProps & import("react").RefAttributes<HTMLButtonElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
+export { _ToggleButton as ToggleButton };
 //# sourceMappingURL=toggle-button.d.ts.map

package/dist/commonjs/components/toggle-button/toggle-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-button.d.ts","sourceRoot":"","sources":["../../../../src/components/toggle-button/toggle-button.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAmC,KAAK,iBAAiB,IAAI,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAGxH,OAAO,KAAK,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAC3E,OAAO,KAAK,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAEpD,MAAM,WAAW,0BACf,SAAQ,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,EAC7B,eAAe,EACf,IAAI,CAAC,eAAe,EAAE,MAAM,GAAG,WAAW,CAAC,EAC3C,IAAI,CACF,oBAAoB,EACpB,iBAAiB,GAAG,YAAY,GAAG,MAAM,GAAG,SAAS,GAAG,cAAc,GAAG,YAAY,GAAG,UAAU,GAAG,YAAY,CAClH;IACH,0HAA0H;IAC1H,EAAE,CAAC,EAAE,GAAG,CAAC;CACV;AAmCD;;;;;GAKG;AACH,QAAA,MAAM,sBAAsB,+KAAoE,CAAC;AAEjG,OAAO,EAAE,sBAAsB,IAAI,qBAAqB,EAAE,CAAC"}
+{"version":3,"file":"toggle-button.d.ts","sourceRoot":"","sources":["../../../../src/components/toggle-button/toggle-button.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACtD,OAAO,EAAwB,KAAK,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AAE/F,MAAM,WAAW,iBAAkB,SAAQ,qBAAqB,EAAE,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC;IACjG,4FAA4F;IAC5F,QAAQ,EAAE,kBAAkB,CAAC;CAC9B;AAeD;;;;;GAKG;AACH,QAAA,MAAM,aAAa,sKAA2D,CAAC;AAE/E,OAAO,EAAE,aAAa,IAAI,YAAY,EAAE,CAAC"}

package/dist/commonjs/components/toggle-button/toggle-button.js

@@ -4,14 +4,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UNSTABLE_ToggleButton = void 0;
+exports.ToggleButton = 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 UNSTABLE_ToggleButton({ children, size = 'medium', iconStart, iconEnd, isDisabled, fullWidth, UNSAFE_className, UNSAFE_style, ...props }, ref) {
-    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.ToggleButton, { ...props, ref: ref, className: (0, clsx_1.default)('cim-button', 'cim-toggle-button', UNSAFE_className), style: UNSAFE_style, "data-variant": "secondary", "data-tone": "base", "data-size": size, "data-full-width": fullWidth || undefined, isDisabled: isDisabled, children: [iconStart, (0, jsx_runtime_1.jsx)("span", { className: "cim-button-text", children: children }), iconEnd] }));
+const internal_toggle_button_js_1 = require("./internal-toggle-button.js");
+function ToggleButton({ children, iconStart, iconEnd, UNSAFE_className, ...props }, ref) {
+    return ((0, jsx_runtime_1.jsxs)(internal_toggle_button_js_1.InternalToggleButton, { ...props, buttonRef: ref, UNSAFE_className: (0, clsx_1.default)('cim-button', UNSAFE_className), children: [iconStart, (0, jsx_runtime_1.jsx)("span", { className: "cim-button-text", children: children }), iconEnd] }));
 }
 /**
  * Displays a labelled button that allows users to toggle between two states.
@@ -19,6 +19,6 @@ function UNSTABLE_ToggleButton({ children, size = 'medium', iconStart, iconEnd,
  *
  * See [toggle button usage guidelines](https://ui.cimpress.io/components/toggle-button/).
  */
-const _UNSTABLE_ToggleButton = (0, with_style_props_js_1.withStyleProps)((0, forward_ref_js_1.forwardRef)(UNSTABLE_ToggleButton), 'ToggleButton');
-exports.UNSTABLE_ToggleButton = _UNSTABLE_ToggleButton;
+const _ToggleButton = (0, with_style_props_js_1.withStyleProps)((0, forward_ref_js_1.forwardRef)(ToggleButton), 'ToggleButton');
+exports.ToggleButton = _ToggleButton;
 //# sourceMappingURL=toggle-button.js.map

package/dist/commonjs/components/toggle-button/toggle-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-button.js","sourceRoot":"","sources":["../../../../src/components/toggle-button/toggle-button.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AAExB,iEAAwH;AACxH,yDAAkD;AAClD,mEAA2D;AAgB3D,SAAS,qBAAqB,CAC5B,EACE,QAAQ,EACR,IAAI,GAAG,QAAQ,EACf,SAAS,EACT,OAAO,EACP,UAAU,EACV,SAAS,EACT,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACmB,EAC7B,GAAoC;IAEpC,OAAO,CACL,wBAAC,oCAAe,OACV,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAI,EAAC,YAAY,EAAE,mBAAmB,EAAE,gBAAgB,CAAC,EACpE,KAAK,EAAE,YAAY,kBACN,WAAW,eACd,MAAM,eACL,IAAI,qBACE,SAAS,IAAI,SAAS,EACvC,UAAU,EAAE,UAAU,aAErB,SAAS,EACV,iCAAM,SAAS,EAAC,iBAAiB,YAAE,QAAQ,GAAQ,EAClD,OAAO,IACQ,CACnB,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,MAAM,sBAAsB,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,qBAAqB,CAAC,EAAE,cAAc,CAAC,CAAC;AAE9D,uDAAqB","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\nimport { ToggleButton as RACToggleButton, type ToggleButtonProps as RACToggleButtonProps } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { BaseButtonProps, TextButtonProps } from '../button/types.js';\nimport type { CommonProps, Key } from '../types.js';\n\nexport interface UNSTABLE_ToggleButtonProps\n  extends Omit<CommonProps, 'id'>,\n    TextButtonProps,\n    Pick<BaseButtonProps, 'size' | 'fullWidth'>,\n    Pick<\n      RACToggleButtonProps,\n      'defaultSelected' | 'isSelected' | 'type' | 'onPress' | 'onHoverStart' | 'onHoverEnd' | 'onChange' | 'isDisabled'\n    > {\n  /** An identifier for this button when used in a `ToggleButtonGroup`. Has to be unique across all buttons in the group. */\n  id?: Key;\n}\n\nfunction UNSTABLE_ToggleButton(\n  {\n    children,\n    size = 'medium',\n    iconStart,\n    iconEnd,\n    isDisabled,\n    fullWidth,\n    UNSAFE_className,\n    UNSAFE_style,\n    ...props\n  }: UNSTABLE_ToggleButtonProps,\n  ref: ForwardedRef<HTMLButtonElement>,\n) {\n  return (\n    <RACToggleButton\n      {...props}\n      ref={ref}\n      className={clsx('cim-button', 'cim-toggle-button', UNSAFE_className)}\n      style={UNSAFE_style}\n      data-variant=\"secondary\"\n      data-tone=\"base\"\n      data-size={size}\n      data-full-width={fullWidth || undefined}\n      isDisabled={isDisabled}\n    >\n      {iconStart}\n      <span className=\"cim-button-text\">{children}</span>\n      {iconEnd}\n    </RACToggleButton>\n  );\n}\n\n/**\n * Displays a labelled button that allows users to toggle between two states.\n * Can be used standalone, or as part of `ToggleButtonGroup`.\n *\n * See [toggle button usage guidelines](https://ui.cimpress.io/components/toggle-button/).\n */\nconst _UNSTABLE_ToggleButton = withStyleProps(forwardRef(UNSTABLE_ToggleButton), 'ToggleButton');\n\nexport { _UNSTABLE_ToggleButton as UNSTABLE_ToggleButton };\n"]}
+{"version":3,"file":"toggle-button.js","sourceRoot":"","sources":["../../../../src/components/toggle-button/toggle-button.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AAExB,yDAAkD;AAClD,mEAA2D;AAG3D,2EAA+F;AAO/F,SAAS,YAAY,CACnB,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,gBAAgB,EAAE,GAAG,KAAK,EAAqB,EAC/E,GAAoC;IAEpC,OAAO,CACL,wBAAC,gDAAoB,OAAK,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,gBAAgB,EAAE,IAAA,cAAI,EAAC,YAAY,EAAE,gBAAgB,CAAC,aACpG,SAAS,EACV,iCAAM,SAAS,EAAC,iBAAiB,YAAE,QAAQ,GAAQ,EAClD,OAAO,IACa,CACxB,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,MAAM,aAAa,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,YAAY,CAAC,EAAE,cAAc,CAAC,CAAC;AAErD,qCAAY","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { TextButtonProps } from '../button/types.js';\nimport type { StringLikeChildren } from '../types.js';\nimport { InternalToggleButton, type BaseToggleButtonProps } from './internal-toggle-button.js';\n\nexport interface ToggleButtonProps extends BaseToggleButtonProps, Omit<TextButtonProps, 'children'> {\n  /** The text displayed on the button. Must remain the same regardless of selection state. */\n  children: StringLikeChildren;\n}\n\nfunction ToggleButton(\n  { children, iconStart, iconEnd, UNSAFE_className, ...props }: ToggleButtonProps,\n  ref: ForwardedRef<HTMLButtonElement>,\n) {\n  return (\n    <InternalToggleButton {...props} buttonRef={ref} UNSAFE_className={clsx('cim-button', UNSAFE_className)}>\n      {iconStart}\n      <span className=\"cim-button-text\">{children}</span>\n      {iconEnd}\n    </InternalToggleButton>\n  );\n}\n\n/**\n * Displays a labelled button that allows users to toggle between two states.\n * Can be used standalone, or as part of `ToggleButtonGroup`.\n *\n * See [toggle button usage guidelines](https://ui.cimpress.io/components/toggle-button/).\n */\nconst _ToggleButton = withStyleProps(forwardRef(ToggleButton), 'ToggleButton');\n\nexport { _ToggleButton as ToggleButton };\n"]}

package/dist/commonjs/components/toggle-button/toggle-icon-button.d.ts

@@ -1,7 +1,8 @@
-import { type ToggleButtonProps as RACToggleButtonProps } from 'react-aria-components';
-import type { BaseButtonProps, SingleIconButtonProps } from '../button/types.js';
-import type { CommonProps } from '../types.js';
-export interface UNSTABLE_ToggleIconButtonProps extends CommonProps, SingleIconButtonProps, Pick<BaseButtonProps, 'size' | 'fullWidth'>, Pick<RACToggleButtonProps, 'defaultSelected' | 'isSelected' | 'type' | 'onPress' | 'onHoverStart' | 'onHoverEnd' | 'onChange' | 'isDisabled'> {
+import type { SingleIconButtonProps } from '../button/types.js';
+import { type BaseToggleButtonProps } from './internal-toggle-button.js';
+export interface ToggleIconButtonProps extends Omit<BaseToggleButtonProps, 'aria-label'>, Omit<SingleIconButtonProps, 'aria-label'> {
+    /** The label describing the function of this button for assistive technologies. Must remain the same regardless of selection state. */
+    'aria-label': string;
 }
 /**
  * Displays an icon-only button that allows users to toggle between two states.
@@ -9,6 +10,6 @@ export interface UNSTABLE_ToggleIconButtonProps extends CommonProps, SingleIconB
  *
  * See [toggle button usage guidelines](https://ui.cimpress.io/components/toggle-button/).
  */
-declare const _UNSTABLE_ToggleIconButton: (props: UNSTABLE_ToggleIconButtonProps & import("react").RefAttributes<HTMLButtonElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
-export { _UNSTABLE_ToggleIconButton as UNSTABLE_ToggleIconButton };
+declare const _ToggleIconButton: (props: ToggleIconButtonProps & import("react").RefAttributes<HTMLButtonElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
+export { _ToggleIconButton as ToggleIconButton };
 //# sourceMappingURL=toggle-icon-button.d.ts.map

package/dist/commonjs/components/toggle-button/toggle-icon-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-icon-button.d.ts","sourceRoot":"","sources":["../../../../src/components/toggle-button/toggle-icon-button.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAmC,KAAK,iBAAiB,IAAI,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAGxH,OAAO,KAAK,EAAE,eAAe,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AACjF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,WAAW,8BACf,SAAQ,WAAW,EACjB,qBAAqB,EACrB,IAAI,CAAC,eAAe,EAAE,MAAM,GAAG,WAAW,CAAC,EAC3C,IAAI,CACF,oBAAoB,EACpB,iBAAiB,GAAG,YAAY,GAAG,MAAM,GAAG,SAAS,GAAG,cAAc,GAAG,YAAY,GAAG,UAAU,GAAG,YAAY,CAClH;CAAG;AA+BR;;;;;GAKG;AACH,QAAA,MAAM,0BAA0B,mLAA4E,CAAC;AAE7G,OAAO,EAAE,0BAA0B,IAAI,yBAAyB,EAAE,CAAC"}
+{"version":3,"file":"toggle-icon-button.d.ts","sourceRoot":"","sources":["../../../../src/components/toggle-button/toggle-icon-button.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,OAAO,EAAwB,KAAK,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AAE/F,MAAM,WAAW,qBACf,SAAQ,IAAI,CAAC,qBAAqB,EAAE,YAAY,CAAC,EAC/C,IAAI,CAAC,qBAAqB,EAAE,YAAY,CAAC;IAC3C,uIAAuI;IACvI,YAAY,EAAE,MAAM,CAAC;CACtB;AAaD;;;;;GAKG;AACH,QAAA,MAAM,iBAAiB,0KAAmE,CAAC;AAE3F,OAAO,EAAE,iBAAiB,IAAI,gBAAgB,EAAE,CAAC"}

package/dist/commonjs/components/toggle-button/toggle-icon-button.js

@@ -1,17 +1,14 @@
 '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_ToggleIconButton = void 0;
+exports.ToggleIconButton = 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 clsx_1 = require("clsx");
 const forward_ref_js_1 = require("../../forward-ref.js");
 const with_style_props_js_1 = require("../../with-style-props.js");
-function UNSTABLE_ToggleIconButton({ icon, size = 'medium', isDisabled, fullWidth, UNSAFE_className, UNSAFE_style, ...props }, ref) {
-    return ((0, jsx_runtime_1.jsx)(react_aria_components_1.ToggleButton, { ...props, ref: ref, className: (0, clsx_1.default)('cim-icon-button', 'cim-toggle-button', UNSAFE_className), style: UNSAFE_style, "data-variant": "secondary", "data-tone": "base", "data-size": size, "data-full-width": fullWidth || undefined, isDisabled: isDisabled, children: icon }));
+const internal_toggle_button_js_1 = require("./internal-toggle-button.js");
+function ToggleIconButton({ icon, UNSAFE_className, ...props }, ref) {
+    return ((0, jsx_runtime_1.jsx)(internal_toggle_button_js_1.InternalToggleButton, { ...props, buttonRef: ref, UNSAFE_className: (0, clsx_1.clsx)('cim-icon-button', UNSAFE_className), children: icon }));
 }
 /**
  * Displays an icon-only button that allows users to toggle between two states.
@@ -19,6 +16,6 @@ function UNSTABLE_ToggleIconButton({ icon, size = 'medium', isDisabled, fullWidt
  *
  * See [toggle button usage guidelines](https://ui.cimpress.io/components/toggle-button/).
  */
-const _UNSTABLE_ToggleIconButton = (0, with_style_props_js_1.withStyleProps)((0, forward_ref_js_1.forwardRef)(UNSTABLE_ToggleIconButton), 'ToggleIconButton');
-exports.UNSTABLE_ToggleIconButton = _UNSTABLE_ToggleIconButton;
+const _ToggleIconButton = (0, with_style_props_js_1.withStyleProps)((0, forward_ref_js_1.forwardRef)(ToggleIconButton), 'ToggleIconButton');
+exports.ToggleIconButton = _ToggleIconButton;
 //# sourceMappingURL=toggle-icon-button.js.map

package/dist/commonjs/components/toggle-button/toggle-icon-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-icon-button.js","sourceRoot":"","sources":["../../../../src/components/toggle-button/toggle-icon-button.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AAExB,iEAAwH;AACxH,yDAAkD;AAClD,mEAA2D;AAa3D,SAAS,yBAAyB,CAChC,EACE,IAAI,EACJ,IAAI,GAAG,QAAQ,EACf,UAAU,EACV,SAAS,EACT,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACuB,EACjC,GAAoC;IAEpC,OAAO,CACL,uBAAC,oCAAe,OACV,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAI,EAAC,iBAAiB,EAAE,mBAAmB,EAAE,gBAAgB,CAAC,EACzE,KAAK,EAAE,YAAY,kBACN,WAAW,eACd,MAAM,eACL,IAAI,qBACE,SAAS,IAAI,SAAS,EACvC,UAAU,EAAE,UAAU,YAErB,IAAI,GACW,CACnB,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,MAAM,0BAA0B,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,yBAAyB,CAAC,EAAE,kBAAkB,CAAC,CAAC;AAEtE,+DAAyB","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\nimport { ToggleButton as RACToggleButton, type ToggleButtonProps as RACToggleButtonProps } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { BaseButtonProps, SingleIconButtonProps } from '../button/types.js';\nimport type { CommonProps } from '../types.js';\n\nexport interface UNSTABLE_ToggleIconButtonProps\n  extends CommonProps,\n    SingleIconButtonProps,\n    Pick<BaseButtonProps, 'size' | 'fullWidth'>,\n    Pick<\n      RACToggleButtonProps,\n      'defaultSelected' | 'isSelected' | 'type' | 'onPress' | 'onHoverStart' | 'onHoverEnd' | 'onChange' | 'isDisabled'\n    > {}\n\nfunction UNSTABLE_ToggleIconButton(\n  {\n    icon,\n    size = 'medium',\n    isDisabled,\n    fullWidth,\n    UNSAFE_className,\n    UNSAFE_style,\n    ...props\n  }: UNSTABLE_ToggleIconButtonProps,\n  ref: ForwardedRef<HTMLButtonElement>,\n) {\n  return (\n    <RACToggleButton\n      {...props}\n      ref={ref}\n      className={clsx('cim-icon-button', 'cim-toggle-button', UNSAFE_className)}\n      style={UNSAFE_style}\n      data-variant=\"secondary\"\n      data-tone=\"base\"\n      data-size={size}\n      data-full-width={fullWidth || undefined}\n      isDisabled={isDisabled}\n    >\n      {icon}\n    </RACToggleButton>\n  );\n}\n\n/**\n * Displays an icon-only button that allows users to toggle between two states.\n * Can be used standalone, or as part of `ToggleButtonGroup`.\n *\n * See [toggle button usage guidelines](https://ui.cimpress.io/components/toggle-button/).\n */\nconst _UNSTABLE_ToggleIconButton = withStyleProps(forwardRef(UNSTABLE_ToggleIconButton), 'ToggleIconButton');\n\nexport { _UNSTABLE_ToggleIconButton as UNSTABLE_ToggleIconButton };\n"]}
+{"version":3,"file":"toggle-icon-button.js","sourceRoot":"","sources":["../../../../src/components/toggle-button/toggle-icon-button.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;AAEb,+BAA4B;AAE5B,yDAAkD;AAClD,mEAA2D;AAE3D,2EAA+F;AAS/F,SAAS,gBAAgB,CACvB,EAAE,IAAI,EAAE,gBAAgB,EAAE,GAAG,KAAK,EAAyB,EAC3D,GAAoC;IAEpC,OAAO,CACL,uBAAC,gDAAoB,OAAK,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,gBAAgB,EAAE,IAAA,WAAI,EAAC,iBAAiB,EAAE,gBAAgB,CAAC,YACzG,IAAI,GACgB,CACxB,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,MAAM,iBAAiB,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,gBAAgB,CAAC,EAAE,kBAAkB,CAAC,CAAC;AAE7D,6CAAgB","sourcesContent":["'use client';\n\nimport { clsx } from 'clsx';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { SingleIconButtonProps } from '../button/types.js';\nimport { InternalToggleButton, type BaseToggleButtonProps } from './internal-toggle-button.js';\n\nexport interface ToggleIconButtonProps\n  extends Omit<BaseToggleButtonProps, 'aria-label'>,\n    Omit<SingleIconButtonProps, 'aria-label'> {\n  /** The label describing the function of this button for assistive technologies. Must remain the same regardless of selection state. */\n  'aria-label': string;\n}\n\nfunction ToggleIconButton(\n  { icon, UNSAFE_className, ...props }: ToggleIconButtonProps,\n  ref: ForwardedRef<HTMLButtonElement>,\n) {\n  return (\n    <InternalToggleButton {...props} buttonRef={ref} UNSAFE_className={clsx('cim-icon-button', UNSAFE_className)}>\n      {icon}\n    </InternalToggleButton>\n  );\n}\n\n/**\n * Displays an icon-only button that allows users to toggle between two states.\n * Can be used standalone, or as part of `ToggleButtonGroup`.\n *\n * See [toggle button usage guidelines](https://ui.cimpress.io/components/toggle-button/).\n */\nconst _ToggleIconButton = withStyleProps(forwardRef(ToggleIconButton), 'ToggleIconButton');\n\nexport { _ToggleIconButton as ToggleIconButton };\n"]}

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

@@ -82,7 +82,13 @@ export type FieldError = string | string[] | undefined | ((validation: Validatio
 /** Props available on form field components. */
 export interface FieldProps<T> extends LabellableProps {
     /**
-     * The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).
+     * The `<form>` element to associate the input with.
+     * The value of this attribute must be the id of a `<form>` in the same document.
+     * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).
+     */
+    form?: string;
+    /**
+     * The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name).
      */
     name?: string;
     /** A description for the field. Provides a hint such as specific requirements for what to choose. */

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/types.ts"],"names":[],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { focusSafely } from '@react-aria/focus';\nimport type { CSSProperties, HTMLAttributes, ReactNode } from 'react';\nimport type {\n  ButtonProps as RACButtonProps,\n  LinkProps as RACLinkProps,\n  PressEvent as RACPressEvent,\n  ValidationResult as RACValidationResult,\n} from 'react-aria-components';\nimport type { ForegroundTone } from '../utils/style/types.js';\n\n/** Represents an identifier for a collection item. */\nexport type Key = string | number;\n\n/** Represents a selection of items in a collection. */\nexport type Selection = 'all' | Set<Key>;\n\n/** Represents a direction (vertical or horizontal). */\nexport type Direction = 'vertical' | 'horizontal';\n\n/**\n * Use this type when you want to restrict `children` to a string,\n * but also want to allow expressions that resolve to strings.\n */\nexport type StringLikeChildren = string | number | (string | number)[];\n\n// `FocusableElement` is not exported from any React Aria package\n/** Any focusable element, including both HTML and SVG elements. */\nexport type FocusableElement = Parameters<typeof focusSafely>[0];\n\n/**\n * A set of common props that are allowed on every component\n */\nexport interface CommonProps {\n  /**\n   * The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).\n   */\n  id?: string;\n  /**\n   * Use this attribute to \"claim\" the component tree for exclusive Cimpress UI usage.\n   */\n  'data-cim-style-root'?: boolean;\n  /**\n   * Sets the CSS className for the element. Only use as a **last resort**. Use style props instead.\n   *\n   * See [styling guide](https://ui.cimpress.io/dev-guides/styling/).\n   */\n  UNSAFE_className?: string;\n  /**\n   * Sets the CSS style for the element. Only use as a **last resort**. Use style props instead.\n   *\n   * See [styling guide](https://ui.cimpress.io/dev-guides/styling/).\n   */\n  UNSAFE_style?: CSSProperties;\n}\n\n/**\n * An event fired when a component is pressed.\n *\n * By default, press events stop propagation to parent elements.\n * In cases where a handler decides not to handle a specific event,\n * it can call `continuePropagation()` to allow a parent to handle it.\n */\nexport type PressEvent = RACPressEvent;\n\n// HoverEvent is not exported from react-aria-components\n/** An event fired when a component is hovered. */\nexport type HoverEvent = Parameters<NonNullable<RACButtonProps['onHoverStart']>>[0];\n\n/**\n * Props for components that require a label, which can be hidden if necessary.\n */\nexport interface LabellableProps extends AriaLabelingProps {\n  /** The content to display as the label. */\n  label?: string;\n}\n\n// Copied from AriaLabelingProps from @react-types/shared\nexport interface AriaLabelingProps {\n  /**\n   * Defines a string value that labels the current element.\n   */\n  'aria-label'?: string;\n\n  /**\n   * Identifies the element (or elements) that labels the current element.\n   */\n  'aria-labelledby'?: string;\n\n  /**\n   * Identifies the element (or elements) that describes the object.\n   */\n  'aria-describedby'?: string;\n\n  /**\n   * Identifies the element (or elements) that provide a detailed, extended description for the object.\n   */\n  'aria-details'?: string;\n}\n\n/** Provides details about the validation state of a form field. */\nexport type ValidationResult = RACValidationResult;\n\n/** Represents the error message(s) for a form field. */\nexport type FieldError =\n  | string\n  | string[]\n  | undefined\n  | ((validation: ValidationResult) => string | string[] | undefined);\n\n/** Props available on form field components. */\nexport interface FieldProps<T> extends LabellableProps {\n  /**\n   * The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).\n   */\n  name?: string;\n  /** A description for the field. Provides a hint such as specific requirements for what to choose. */\n  description?: string;\n  /** An error message for the field. */\n  error?: FieldError;\n  /**\n   * A function that returns an error message (or `true`) if a given value is invalid.\n   * Validation errors are displayed to the user when the form is submitted.\n   * For real-time validation, use the `error` prop instead.\n   */\n  validate?: (value: T) => string | string[] | true | undefined;\n}\n\n/** Props available on form field components with text inputs. */\nexport interface FieldWithPlaceholderProps<T> extends FieldProps<T> {\n  /** The placeholder text displayed in the input field. */\n  placeholder?: string;\n}\n\n/** Changes specified optional properties within the provided type to be required. */\nexport type WithRequired<T, K extends keyof T> = T & { [P in K]-?: T[P] };\n\n/**\n * This interface allows configuring navigation props with router options and type-safe URLs via TypeScript module augmentation.\n * By default, this is an empty interface. Extend with `href` and `routerOptions` properties to configure your router.\n */\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\nexport interface RouterConfig {}\n\n/**\n * Represents a URL for navigation components.\n * This type can be configured by augmenting `RouterConfig` with an `href` property.\n */\nexport type Href = RouterConfig extends { href: infer H } ? H : string;\n\n/**\n * Represents router options for navigation components.\n * This type can be configured by augmenting `RouterConfig` with a `routerOptions` property.\n */\nexport type RouterOptions = RouterConfig extends { routerOptions: infer O } ? O : never;\n\n/**\n * Props available on components that perform navigation.\n */\nexport interface NavigationProps\n  extends Pick<RACLinkProps, 'hrefLang' | 'target' | 'rel' | 'download' | 'ping' | 'referrerPolicy'> {\n  /** A URL to link to. */\n  href?: Href;\n  /** Options for the configured client side router. */\n  routerOptions?: RouterOptions;\n}\n\n/** Represents a minimal data shape of a dynamic item in collection components. */\nexport interface CollectionItem {\n  /** Unique identifier for the item or group. */\n  id: Key;\n}\n\n/** Props available on components that render collections. */\nexport interface CollectionProps<T extends CollectionItem> {\n  /** The contents of the collection. */\n  children?: ReactNode | ((item: T) => ReactNode);\n  /** The items to display in the collection. */\n  items?: Iterable<T>;\n}\n\n/** Props available on icons. */\nexport interface IconProps extends CommonProps, Pick<AriaLabelingProps, 'aria-label' | 'aria-labelledby'> {\n  /**\n   * Whether the icon is hidden from assistive technologies.\n   * @default true\n   */\n  'aria-hidden'?: boolean;\n  /** The size of the icon in pixels. */\n  size?: 16 | 24 | 32;\n  /** The tone of the icon. */\n  tone?: ForegroundTone;\n}\n\n/** Props available on native HTML elements. */\nexport interface NativeElementProps<T extends HTMLElement> extends HTMLAttributes<T> {\n  [dataProp: `data-${string}`]: string | number | boolean | undefined;\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { focusSafely } from '@react-aria/focus';\nimport type { CSSProperties, HTMLAttributes, ReactNode } from 'react';\nimport type {\n  ButtonProps as RACButtonProps,\n  LinkProps as RACLinkProps,\n  PressEvent as RACPressEvent,\n  ValidationResult as RACValidationResult,\n} from 'react-aria-components';\nimport type { ForegroundTone } from '../utils/style/types.js';\n\n/** Represents an identifier for a collection item. */\nexport type Key = string | number;\n\n/** Represents a selection of items in a collection. */\nexport type Selection = 'all' | Set<Key>;\n\n/** Represents a direction (vertical or horizontal). */\nexport type Direction = 'vertical' | 'horizontal';\n\n/**\n * Use this type when you want to restrict `children` to a string,\n * but also want to allow expressions that resolve to strings.\n */\nexport type StringLikeChildren = string | number | (string | number)[];\n\n// `FocusableElement` is not exported from any React Aria package\n/** Any focusable element, including both HTML and SVG elements. */\nexport type FocusableElement = Parameters<typeof focusSafely>[0];\n\n/**\n * A set of common props that are allowed on every component\n */\nexport interface CommonProps {\n  /**\n   * The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).\n   */\n  id?: string;\n  /**\n   * Use this attribute to \"claim\" the component tree for exclusive Cimpress UI usage.\n   */\n  'data-cim-style-root'?: boolean;\n  /**\n   * Sets the CSS className for the element. Only use as a **last resort**. Use style props instead.\n   *\n   * See [styling guide](https://ui.cimpress.io/dev-guides/styling/).\n   */\n  UNSAFE_className?: string;\n  /**\n   * Sets the CSS style for the element. Only use as a **last resort**. Use style props instead.\n   *\n   * See [styling guide](https://ui.cimpress.io/dev-guides/styling/).\n   */\n  UNSAFE_style?: CSSProperties;\n}\n\n/**\n * An event fired when a component is pressed.\n *\n * By default, press events stop propagation to parent elements.\n * In cases where a handler decides not to handle a specific event,\n * it can call `continuePropagation()` to allow a parent to handle it.\n */\nexport type PressEvent = RACPressEvent;\n\n// HoverEvent is not exported from react-aria-components\n/** An event fired when a component is hovered. */\nexport type HoverEvent = Parameters<NonNullable<RACButtonProps['onHoverStart']>>[0];\n\n/**\n * Props for components that require a label, which can be hidden if necessary.\n */\nexport interface LabellableProps extends AriaLabelingProps {\n  /** The content to display as the label. */\n  label?: string;\n}\n\n// Copied from AriaLabelingProps from @react-types/shared\nexport interface AriaLabelingProps {\n  /**\n   * Defines a string value that labels the current element.\n   */\n  'aria-label'?: string;\n\n  /**\n   * Identifies the element (or elements) that labels the current element.\n   */\n  'aria-labelledby'?: string;\n\n  /**\n   * Identifies the element (or elements) that describes the object.\n   */\n  'aria-describedby'?: string;\n\n  /**\n   * Identifies the element (or elements) that provide a detailed, extended description for the object.\n   */\n  'aria-details'?: string;\n}\n\n/** Provides details about the validation state of a form field. */\nexport type ValidationResult = RACValidationResult;\n\n/** Represents the error message(s) for a form field. */\nexport type FieldError =\n  | string\n  | string[]\n  | undefined\n  | ((validation: ValidationResult) => string | string[] | undefined);\n\n/** Props available on form field components. */\nexport interface FieldProps<T> extends LabellableProps {\n  /**\n   * The `<form>` element to associate the input with.\n   * The value of this attribute must be the id of a `<form>` in the same document.\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).\n   */\n  form?: string;\n  /**\n   * The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name).\n   */\n  name?: string;\n  /** A description for the field. Provides a hint such as specific requirements for what to choose. */\n  description?: string;\n  /** An error message for the field. */\n  error?: FieldError;\n  /**\n   * A function that returns an error message (or `true`) if a given value is invalid.\n   * Validation errors are displayed to the user when the form is submitted.\n   * For real-time validation, use the `error` prop instead.\n   */\n  validate?: (value: T) => string | string[] | true | undefined;\n}\n\n/** Props available on form field components with text inputs. */\nexport interface FieldWithPlaceholderProps<T> extends FieldProps<T> {\n  /** The placeholder text displayed in the input field. */\n  placeholder?: string;\n}\n\n/** Changes specified optional properties within the provided type to be required. */\nexport type WithRequired<T, K extends keyof T> = T & { [P in K]-?: T[P] };\n\n/**\n * This interface allows configuring navigation props with router options and type-safe URLs via TypeScript module augmentation.\n * By default, this is an empty interface. Extend with `href` and `routerOptions` properties to configure your router.\n */\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\nexport interface RouterConfig {}\n\n/**\n * Represents a URL for navigation components.\n * This type can be configured by augmenting `RouterConfig` with an `href` property.\n */\nexport type Href = RouterConfig extends { href: infer H } ? H : string;\n\n/**\n * Represents router options for navigation components.\n * This type can be configured by augmenting `RouterConfig` with a `routerOptions` property.\n */\nexport type RouterOptions = RouterConfig extends { routerOptions: infer O } ? O : never;\n\n/**\n * Props available on components that perform navigation.\n */\nexport interface NavigationProps\n  extends Pick<RACLinkProps, 'hrefLang' | 'target' | 'rel' | 'download' | 'ping' | 'referrerPolicy'> {\n  /** A URL to link to. */\n  href?: Href;\n  /** Options for the configured client side router. */\n  routerOptions?: RouterOptions;\n}\n\n/** Represents a minimal data shape of a dynamic item in collection components. */\nexport interface CollectionItem {\n  /** Unique identifier for the item or group. */\n  id: Key;\n}\n\n/** Props available on components that render collections. */\nexport interface CollectionProps<T extends CollectionItem> {\n  /** The contents of the collection. */\n  children?: ReactNode | ((item: T) => ReactNode);\n  /** The items to display in the collection. */\n  items?: Iterable<T>;\n}\n\n/** Props available on icons. */\nexport interface IconProps extends CommonProps, Pick<AriaLabelingProps, 'aria-label' | 'aria-labelledby'> {\n  /**\n   * Whether the icon is hidden from assistive technologies.\n   * @default true\n   */\n  'aria-hidden'?: boolean;\n  /** The size of the icon in pixels. */\n  size?: 16 | 24 | 32;\n  /** The tone of the icon. */\n  tone?: ForegroundTone;\n}\n\n/** Props available on native HTML elements. */\nexport interface NativeElementProps<T extends HTMLElement> extends HTMLAttributes<T> {\n  [dataProp: `data-${string}`]: string | number | boolean | undefined;\n}\n"]}