@elliemae/ds-form-toggle 3.39.1-rc.0 → 3.40.0-rc.0

package/dist/cjs/ControlledToggle.js

@@ -43,7 +43,7 @@ var import_useDSControlledToggle = require("./config/useDSControlledToggle.js");
 var import_AddTooltipOnReadOnly = require("./parts/AddTooltipOnReadOnly.js");
 const DSControlledToggle = (props) => {
   const { propsWithDefault, globalProps, xstyledProps, instanceUid, handleOnClick } = (0, import_useDSControlledToggle.useDSControlledToggle)(props);
-  const { labelOn, labelOff, checked, size, value, containerProps, disabled, readOnly } = propsWithDefault;
+  const { labelOn, labelOff, checked, size, value, containerProps, disabled, applyAriaDisabled, readOnly } = propsWithDefault;
   const [isLongerTextRendering, setIsLongerTextRendering] = (0, import_react.useState)(false);
   const [width, setWidth] = (0, import_react.useState)(0);
   const labelTextRef = (0, import_react.useRef)(null);
@@ -58,7 +58,7 @@ const DSControlledToggle = (props) => {
       value,
       id: instanceUid,
       "aria-readonly": readOnly,
-      "aria-disabled": disabled,
+      "aria-disabled": disabled || applyAriaDisabled,
       "aria-checked": checked,
       readOnly,
       disabled,
@@ -67,7 +67,7 @@ const DSControlledToggle = (props) => {
       buttonType: "raw",
       onClick: handleOnClick
     }),
-    [checked, disabled, globalProps, handleOnClick, instanceUid, readOnly, value]
+    [checked, disabled, globalProps, handleOnClick, instanceUid, readOnly, value, applyAriaDisabled]
   );
   (0, import_react.useLayoutEffect)(() => {
     if (labelTextRef.current) {
@@ -88,20 +88,31 @@ const DSControlledToggle = (props) => {
       ...xstyledProps,
       disabled,
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AddTooltipOnReadOnly.AddTooltipOnReadOnly, { readOnly, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledButton, { ...ButtonProps, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledLabel, { checked, size, width, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledVisibleContent, { checked, size, readOnly, disabled, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledCircle, { checked, size, readOnly, disabled }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_styles.StyledText,
-            {
-              innerRef: labelTextRef,
-              isLongerTextRendering,
-              checked,
-              size,
-              disabled,
-              children: checked ? labelOn : labelOff
-            }
-          )
-        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledLabel, { checked, size, width, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_styles.StyledVisibleContent,
+          {
+            checked,
+            size,
+            readOnly,
+            disabled,
+            applyAriaDisabled,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledCircle, { checked, size, readOnly, disabled }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_styles.StyledText,
+                {
+                  innerRef: labelTextRef,
+                  isLongerTextRendering,
+                  checked,
+                  size,
+                  disabled,
+                  applyAriaDisabled,
+                  children: checked ? labelOn : labelOff
+                }
+              )
+            ]
+          }
+        ) }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.SetLabelWidth, { size, innerRef: widthTextRef, "aria-hidden": "true", children: longerText })
       ] }) })
     }

package/dist/cjs/ControlledToggle.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ControlledToggle.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useState, useMemo, useRef, useLayoutEffect } from 'react';\nimport type { DSButtonV2T } from '@elliemae/ds-button-v2';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { DSControlledTogglePropTypesSchema, type DSControlledToggleT } from './react-desc-prop-types.js';\nimport {\n  StyledContainer,\n  StyledButton,\n  StyledLabel,\n  StyledVisibleContent,\n  StyledCircle,\n  StyledText,\n  SetLabelWidth,\n} from './styles.js';\nimport { DSFormToggleName } from './DSFormToggleDefinitions.js';\nimport { useDSControlledToggle } from './config/useDSControlledToggle.js';\nimport { AddTooltipOnReadOnly } from './parts/AddTooltipOnReadOnly.js';\n\nconst DSControlledToggle: React.ComponentType<DSControlledToggleT.Props> = (props) => {\n  const { propsWithDefault, globalProps, xstyledProps, instanceUid, handleOnClick } = useDSControlledToggle(props);\n  const { labelOn, labelOff, checked, size, value, containerProps, disabled, readOnly } = propsWithDefault;\n\n  const [isLongerTextRendering, setIsLongerTextRendering] = useState<boolean>(false);\n  const [width, setWidth] = useState<number>(0);\n  const labelTextRef = useRef<HTMLDivElement | null>(null);\n  const widthTextRef = useRef<HTMLDivElement | null>(null);\n\n  const longerText = useMemo(() => (labelOn.length > labelOff.length ? labelOn : labelOff), [labelOff, labelOn]);\n\n  const ButtonProps: DSButtonV2T.Props = useMemo(\n    () => ({\n      role: 'switch',\n      'data-testid': 'ds-controlled-toggle-checkbox',\n      // removing 'value' could be a breaking change in scenarios where the form is submitted and the value is used...\n      // check https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#value\n      value: value,\n      id: instanceUid,\n      'aria-readonly': readOnly,\n      'aria-disabled': disabled,\n      'aria-checked': checked,\n      readOnly: readOnly,\n      disabled: disabled,\n      ...(globalProps as unknown as DSButtonV2T.Props),\n      type: 'button',\n      buttonType: 'raw',\n      onClick: handleOnClick,\n    }),\n    [checked, disabled, globalProps, handleOnClick, instanceUid, readOnly, value],\n  );\n\n  useLayoutEffect(() => {\n    if (labelTextRef.current) {\n      setIsLongerTextRendering(labelTextRef.current.innerText === longerText);\n    }\n  }, [labelTextRef, longerText, checked]);\n\n  useLayoutEffect(() => {\n    if (widthTextRef.current) {\n      setWidth(widthTextRef.current.clientWidth);\n    }\n  }, [widthTextRef]);\n\n  return (\n    <StyledContainer\n      size={size}\n      data-testid=\"ds-controlled-toggle\"\n      {...containerProps}\n      {...xstyledProps}\n      disabled={disabled}\n    >\n      <AddTooltipOnReadOnly readOnly={readOnly}>\n        <StyledButton {...ButtonProps}>\n          <StyledLabel checked={checked} size={size} width={width}>\n            <StyledVisibleContent checked={checked} size={size} readOnly={readOnly} disabled={disabled}>\n              <StyledCircle checked={checked} size={size} readOnly={readOnly} disabled={disabled} />\n              <StyledText\n                innerRef={labelTextRef}\n                isLongerTextRendering={isLongerTextRendering}\n                checked={checked}\n                size={size}\n                disabled={disabled}\n              >\n                {checked ? labelOn : labelOff}\n              </StyledText>\n            </StyledVisibleContent>\n          </StyledLabel>\n          <SetLabelWidth size={size} innerRef={widthTextRef} aria-hidden=\"true\">\n            {longerText}\n          </SetLabelWidth>\n        </StyledButton>\n      </AddTooltipOnReadOnly>\n    </StyledContainer>\n  );\n};\n\nDSControlledToggle.displayName = DSFormToggleName;\nconst DSControlledToggleWithSchema = describe(DSControlledToggle);\nDSControlledToggleWithSchema.propTypes = DSControlledTogglePropTypesSchema;\n\nexport { DSControlledToggle, DSControlledToggleWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwEX;AAxEZ,mBAAkE;AAElE,8BAAyB;AACzB,mCAA4E;AAC5E,oBAQO;AACP,qCAAiC;AACjC,mCAAsC;AACtC,kCAAqC;AAErC,MAAM,qBAAqE,CAAC,UAAU;AACpF,QAAM,EAAE,kBAAkB,aAAa,cAAc,aAAa,cAAc,QAAI,oDAAsB,KAAK;AAC/G,QAAM,EAAE,SAAS,UAAU,SAAS,MAAM,OAAO,gBAAgB,UAAU,SAAS,IAAI;AAExF,QAAM,CAAC,uBAAuB,wBAAwB,QAAI,uBAAkB,KAAK;AACjF,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAiB,CAAC;AAC5C,QAAM,mBAAe,qBAA8B,IAAI;AACvD,QAAM,mBAAe,qBAA8B,IAAI;AAEvD,QAAM,iBAAa,sBAAQ,MAAO,QAAQ,SAAS,SAAS,SAAS,UAAU,UAAW,CAAC,UAAU,OAAO,CAAC;AAE7G,QAAM,kBAAiC;AAAA,IACrC,OAAO;AAAA,MACL,MAAM;AAAA,MACN,eAAe;AAAA;AAAA;AAAA,MAGf;AAAA,MACA,IAAI;AAAA,MACJ,iBAAiB;AAAA,MACjB,iBAAiB;AAAA,MACjB,gBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,MACA,GAAI;AAAA,MACJ,MAAM;AAAA,MACN,YAAY;AAAA,MACZ,SAAS;AAAA,IACX;AAAA,IACA,CAAC,SAAS,UAAU,aAAa,eAAe,aAAa,UAAU,KAAK;AAAA,EAC9E;AAEA,oCAAgB,MAAM;AACpB,QAAI,aAAa,SAAS;AACxB,+BAAyB,aAAa,QAAQ,cAAc,UAAU;AAAA,IACxE;AAAA,EACF,GAAG,CAAC,cAAc,YAAY,OAAO,CAAC;AAEtC,oCAAgB,MAAM;AACpB,QAAI,aAAa,SAAS;AACxB,eAAS,aAAa,QAAQ,WAAW;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC,YAAY,CAAC;AAEjB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAY;AAAA,MACX,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MAEA,sDAAC,oDAAqB,UACpB,uDAAC,8BAAc,GAAG,aAChB;AAAA,oDAAC,6BAAY,SAAkB,MAAY,OACzC,uDAAC,sCAAqB,SAAkB,MAAY,UAAoB,UACtE;AAAA,sDAAC,8BAAa,SAAkB,MAAY,UAAoB,UAAoB;AAAA,UACpF;AAAA,YAAC;AAAA;AAAA,cACC,UAAU;AAAA,cACV;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cAEC,oBAAU,UAAU;AAAA;AAAA,UACvB;AAAA,WACF,GACF;AAAA,QACA,4CAAC,+BAAc,MAAY,UAAU,cAAc,eAAY,QAC5D,sBACH;AAAA,SACF,GACF;AAAA;AAAA,EACF;AAEJ;AAEA,mBAAmB,cAAc;AACjC,MAAM,mCAA+B,kCAAS,kBAAkB;AAChE,6BAA6B,YAAY;",
+  "sourcesContent": ["import React, { useState, useMemo, useRef, useLayoutEffect } from 'react';\nimport type { DSButtonV2T } from '@elliemae/ds-button-v2';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { DSControlledTogglePropTypesSchema, type DSControlledToggleT } from './react-desc-prop-types.js';\nimport {\n  StyledContainer,\n  StyledButton,\n  StyledLabel,\n  StyledVisibleContent,\n  StyledCircle,\n  StyledText,\n  SetLabelWidth,\n} from './styles.js';\nimport { DSFormToggleName } from './DSFormToggleDefinitions.js';\nimport { useDSControlledToggle } from './config/useDSControlledToggle.js';\nimport { AddTooltipOnReadOnly } from './parts/AddTooltipOnReadOnly.js';\n\nconst DSControlledToggle: React.ComponentType<DSControlledToggleT.Props> = (props) => {\n  const { propsWithDefault, globalProps, xstyledProps, instanceUid, handleOnClick } = useDSControlledToggle(props);\n  const { labelOn, labelOff, checked, size, value, containerProps, disabled, applyAriaDisabled, readOnly } =\n    propsWithDefault;\n\n  const [isLongerTextRendering, setIsLongerTextRendering] = useState<boolean>(false);\n  const [width, setWidth] = useState<number>(0);\n  const labelTextRef = useRef<HTMLDivElement | null>(null);\n  const widthTextRef = useRef<HTMLDivElement | null>(null);\n\n  const longerText = useMemo(() => (labelOn.length > labelOff.length ? labelOn : labelOff), [labelOff, labelOn]);\n\n  const ButtonProps: DSButtonV2T.Props = useMemo(\n    () => ({\n      role: 'switch',\n      'data-testid': 'ds-controlled-toggle-checkbox',\n      // removing 'value' could be a breaking change in scenarios where the form is submitted and the value is used...\n      // check https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#value\n      value,\n      id: instanceUid,\n      'aria-readonly': readOnly,\n      'aria-disabled': disabled || applyAriaDisabled,\n      'aria-checked': checked,\n      readOnly,\n      disabled,\n      ...(globalProps as unknown as DSButtonV2T.Props),\n      type: 'button',\n      buttonType: 'raw',\n      onClick: handleOnClick,\n    }),\n    [checked, disabled, globalProps, handleOnClick, instanceUid, readOnly, value, applyAriaDisabled],\n  );\n\n  useLayoutEffect(() => {\n    if (labelTextRef.current) {\n      setIsLongerTextRendering(labelTextRef.current.innerText === longerText);\n    }\n  }, [labelTextRef, longerText, checked]);\n\n  useLayoutEffect(() => {\n    if (widthTextRef.current) {\n      setWidth(widthTextRef.current.clientWidth);\n    }\n  }, [widthTextRef]);\n\n  return (\n    <StyledContainer\n      size={size}\n      data-testid=\"ds-controlled-toggle\"\n      {...containerProps}\n      {...xstyledProps}\n      disabled={disabled}\n    >\n      <AddTooltipOnReadOnly readOnly={readOnly}>\n        <StyledButton {...ButtonProps}>\n          <StyledLabel checked={checked} size={size} width={width}>\n            <StyledVisibleContent\n              checked={checked}\n              size={size}\n              readOnly={readOnly}\n              disabled={disabled}\n              applyAriaDisabled={applyAriaDisabled}\n            >\n              <StyledCircle checked={checked} size={size} readOnly={readOnly} disabled={disabled} />\n              <StyledText\n                innerRef={labelTextRef}\n                isLongerTextRendering={isLongerTextRendering}\n                checked={checked}\n                size={size}\n                disabled={disabled}\n                applyAriaDisabled={applyAriaDisabled}\n              >\n                {checked ? labelOn : labelOff}\n              </StyledText>\n            </StyledVisibleContent>\n          </StyledLabel>\n          <SetLabelWidth size={size} innerRef={widthTextRef} aria-hidden=\"true\">\n            {longerText}\n          </SetLabelWidth>\n        </StyledButton>\n      </AddTooltipOnReadOnly>\n    </StyledContainer>\n  );\n};\n\nDSControlledToggle.displayName = DSFormToggleName;\nconst DSControlledToggleWithSchema = describe(DSControlledToggle);\nDSControlledToggleWithSchema.propTypes = DSControlledTogglePropTypesSchema;\n\nexport { DSControlledToggle, DSControlledToggleWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyEX;AAzEZ,mBAAkE;AAElE,8BAAyB;AACzB,mCAA4E;AAC5E,oBAQO;AACP,qCAAiC;AACjC,mCAAsC;AACtC,kCAAqC;AAErC,MAAM,qBAAqE,CAAC,UAAU;AACpF,QAAM,EAAE,kBAAkB,aAAa,cAAc,aAAa,cAAc,QAAI,oDAAsB,KAAK;AAC/G,QAAM,EAAE,SAAS,UAAU,SAAS,MAAM,OAAO,gBAAgB,UAAU,mBAAmB,SAAS,IACrG;AAEF,QAAM,CAAC,uBAAuB,wBAAwB,QAAI,uBAAkB,KAAK;AACjF,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAiB,CAAC;AAC5C,QAAM,mBAAe,qBAA8B,IAAI;AACvD,QAAM,mBAAe,qBAA8B,IAAI;AAEvD,QAAM,iBAAa,sBAAQ,MAAO,QAAQ,SAAS,SAAS,SAAS,UAAU,UAAW,CAAC,UAAU,OAAO,CAAC;AAE7G,QAAM,kBAAiC;AAAA,IACrC,OAAO;AAAA,MACL,MAAM;AAAA,MACN,eAAe;AAAA;AAAA;AAAA,MAGf;AAAA,MACA,IAAI;AAAA,MACJ,iBAAiB;AAAA,MACjB,iBAAiB,YAAY;AAAA,MAC7B,gBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,MACA,GAAI;AAAA,MACJ,MAAM;AAAA,MACN,YAAY;AAAA,MACZ,SAAS;AAAA,IACX;AAAA,IACA,CAAC,SAAS,UAAU,aAAa,eAAe,aAAa,UAAU,OAAO,iBAAiB;AAAA,EACjG;AAEA,oCAAgB,MAAM;AACpB,QAAI,aAAa,SAAS;AACxB,+BAAyB,aAAa,QAAQ,cAAc,UAAU;AAAA,IACxE;AAAA,EACF,GAAG,CAAC,cAAc,YAAY,OAAO,CAAC;AAEtC,oCAAgB,MAAM;AACpB,QAAI,aAAa,SAAS;AACxB,eAAS,aAAa,QAAQ,WAAW;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC,YAAY,CAAC;AAEjB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAY;AAAA,MACX,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MAEA,sDAAC,oDAAqB,UACpB,uDAAC,8BAAc,GAAG,aAChB;AAAA,oDAAC,6BAAY,SAAkB,MAAY,OACzC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YAEA;AAAA,0DAAC,8BAAa,SAAkB,MAAY,UAAoB,UAAoB;AAAA,cACpF;AAAA,gBAAC;AAAA;AAAA,kBACC,UAAU;AAAA,kBACV;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBAEC,oBAAU,UAAU;AAAA;AAAA,cACvB;AAAA;AAAA;AAAA,QACF,GACF;AAAA,QACA,4CAAC,+BAAc,MAAY,UAAU,cAAc,eAAY,QAC5D,sBACH;AAAA,SACF,GACF;AAAA;AAAA,EACF;AAEJ;AAEA,mBAAmB,cAAc;AACjC,MAAM,mCAA+B,kCAAS,kBAAkB;AAChE,6BAA6B,YAAY;",
   "names": []
 }

package/dist/cjs/config/useDSControlledToggle.js

@@ -40,15 +40,15 @@ var import_useValidateProps = require("./useValidateProps.js");
 const useDSControlledToggle = (propsFromUser) => {
   const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(propsFromUser, import_react_desc_prop_types.defaultProps);
   (0, import_useValidateProps.useValidateProps)(propsWithDefault, import_react_desc_prop_types.DSControlledTogglePropTypes);
-  const { disabled, readOnly, onChange } = propsWithDefault;
+  const { disabled, applyAriaDisabled, readOnly, onChange } = propsWithDefault;
   const handleOnClick = (0, import_react.useCallback)(
     (e) => {
-      if (disabled || readOnly) return;
+      if (disabled || applyAriaDisabled || readOnly) return;
       if (onChange) {
         onChange(e);
       }
     },
-    [disabled, readOnly, onChange]
+    [disabled, applyAriaDisabled, readOnly, onChange]
   );
   const globalProps = (0, import_ds_props_helpers.useGetGlobalAttributes)(propsWithDefault, {
     onClick: handleOnClick

package/dist/cjs/config/useDSControlledToggle.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/config/useDSControlledToggle.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useCallback } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport { type DSControlledToggleT, DSControlledTogglePropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nexport interface DSControlledToggleCTX {\n  propsWithDefault: DSControlledToggleT.InternalProps;\n  globalProps: ReturnType<typeof useGetGlobalAttributes>;\n  xstyledProps: ReturnType<typeof useGetXstyledProps>;\n  instanceUid: string;\n}\n\nexport const useDSControlledToggle = (propsFromUser: DSControlledToggleT.Props) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSControlledToggleT.InternalProps>(propsFromUser, defaultProps);\n  useValidateProps(propsWithDefault, DSControlledTogglePropTypes);\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  const { disabled, readOnly, onChange } = propsWithDefault;\n  const handleOnClick = useCallback(\n    (e: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n      if (disabled || readOnly) return;\n      if (onChange) {\n        onChange(e);\n      }\n    },\n    [disabled, readOnly, onChange],\n  );\n  // =============================================================================\n  // GLOBAL ATTRIBUTES & XSTYLED PROPS\n  // =============================================================================\n  const globalProps = useGetGlobalAttributes<DSControlledToggleT.InternalProps>(propsWithDefault, {\n    onClick: handleOnClick,\n  });\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n  const { id } = propsWithDefault;\n  const instanceUid = React.useMemo(() => id || uid(5), [id]);\n  // =============================================================================\n  // HELPERS HOOKS CONFIGS\n  // =============================================================================\n  // const eventHandlers = useEventHandlers({ propsWithDefault, instanceUid }); // <-- complex logic should be made atomics this way\n\n  return React.useMemo(\n    () => ({\n      propsWithDefault,\n      globalProps,\n      xstyledProps,\n      instanceUid,\n      handleOnClick,\n    }),\n    [propsWithDefault, globalProps, xstyledProps, instanceUid, handleOnClick],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAmC;AACnC,8BAAyF;AACzF,iBAAoB;AACpB,mCAAoF;AACpF,8BAAiC;AAS1B,MAAM,wBAAwB,CAAC,kBAA6C;AAIjF,QAAM,uBAAmB,sDAAgE,eAAe,yCAAY;AACpH,gDAAiB,kBAAkB,wDAA2B;AAI9D,QAAM,EAAE,UAAU,UAAU,SAAS,IAAI;AACzC,QAAM,oBAAgB;AAAA,IACpB,CAAC,MAAgG;AAC/F,UAAI,YAAY,SAAU;AAC1B,UAAI,UAAU;AACZ,iBAAS,CAAC;AAAA,MACZ;AAAA,IACF;AAAA,IACA,CAAC,UAAU,UAAU,QAAQ;AAAA,EAC/B;AAIA,QAAM,kBAAc,gDAA0D,kBAAkB;AAAA,IAC9F,SAAS;AAAA,EACX,CAAC;AACD,QAAM,mBAAe,4CAAmB,gBAAgB;AACxD,QAAM,EAAE,GAAG,IAAI;AACf,QAAM,cAAc,aAAAA,QAAM,QAAQ,MAAM,UAAM,gBAAI,CAAC,GAAG,CAAC,EAAE,CAAC;AAM1D,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,aAAa,cAAc,aAAa,aAAa;AAAA,EAC1E;AACF;",
+  "sourcesContent": ["import React, { useCallback } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport { type DSControlledToggleT, DSControlledTogglePropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nexport interface DSControlledToggleCTX {\n  propsWithDefault: DSControlledToggleT.InternalProps;\n  globalProps: ReturnType<typeof useGetGlobalAttributes>;\n  xstyledProps: ReturnType<typeof useGetXstyledProps>;\n  instanceUid: string;\n}\n\nexport const useDSControlledToggle = (propsFromUser: DSControlledToggleT.Props) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSControlledToggleT.InternalProps>(propsFromUser, defaultProps);\n  useValidateProps(propsWithDefault, DSControlledTogglePropTypes);\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  const { disabled, applyAriaDisabled, readOnly, onChange } = propsWithDefault;\n  const handleOnClick = useCallback(\n    (e: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n      if (disabled || applyAriaDisabled || readOnly) return;\n      if (onChange) {\n        onChange(e);\n      }\n    },\n    [disabled, applyAriaDisabled, readOnly, onChange],\n  );\n  // =============================================================================\n  // GLOBAL ATTRIBUTES & XSTYLED PROPS\n  // =============================================================================\n  const globalProps = useGetGlobalAttributes<DSControlledToggleT.InternalProps>(propsWithDefault, {\n    onClick: handleOnClick,\n  });\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n  const { id } = propsWithDefault;\n  const instanceUid = React.useMemo(() => id || uid(5), [id]);\n  // =============================================================================\n  // HELPERS HOOKS CONFIGS\n  // =============================================================================\n  // const eventHandlers = useEventHandlers({ propsWithDefault, instanceUid }); // <-- complex logic should be made atomics this way\n\n  return React.useMemo(\n    () => ({\n      propsWithDefault,\n      globalProps,\n      xstyledProps,\n      instanceUid,\n      handleOnClick,\n    }),\n    [propsWithDefault, globalProps, xstyledProps, instanceUid, handleOnClick],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAmC;AACnC,8BAAyF;AACzF,iBAAoB;AACpB,mCAAoF;AACpF,8BAAiC;AAS1B,MAAM,wBAAwB,CAAC,kBAA6C;AAIjF,QAAM,uBAAmB,sDAAgE,eAAe,yCAAY;AACpH,gDAAiB,kBAAkB,wDAA2B;AAI9D,QAAM,EAAE,UAAU,mBAAmB,UAAU,SAAS,IAAI;AAC5D,QAAM,oBAAgB;AAAA,IACpB,CAAC,MAAgG;AAC/F,UAAI,YAAY,qBAAqB,SAAU;AAC/C,UAAI,UAAU;AACZ,iBAAS,CAAC;AAAA,MACZ;AAAA,IACF;AAAA,IACA,CAAC,UAAU,mBAAmB,UAAU,QAAQ;AAAA,EAClD;AAIA,QAAM,kBAAc,gDAA0D,kBAAkB;AAAA,IAC9F,SAAS;AAAA,EACX,CAAC;AACD,QAAM,mBAAe,4CAAmB,gBAAgB;AACxD,QAAM,EAAE,GAAG,IAAI;AACf,QAAM,cAAc,aAAAA,QAAM,QAAQ,MAAM,UAAM,gBAAI,CAAC,GAAG,CAAC,EAAE,CAAC;AAM1D,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,aAAa,cAAc,aAAa,aAAa;AAAA,EAC1E;AACF;",
   "names": ["React"]
 }

package/dist/cjs/config/useValidateProps.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/config/useValidateProps.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { WeakValidationMap } from 'react';\nimport { type DSControlledToggleT } from '../react-desc-prop-types.js';\nimport { DSControlledToggleName } from '../constants/index.js';\n\nexport const useValidateProps = (\n  props: DSControlledToggleT.InternalProps,\n  propTypes: WeakValidationMap<unknown>,\n): void => {\n  // we validate the \"required if\" via 'isRequiredIf from our custom PropTypes\n  useValidateTypescriptPropTypes(props, propTypes, DSControlledToggleName);\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAA+C;AAG/C,uBAAuC;AAEhC,MAAM,mBAAmB,CAC9B,OACA,cACS;AAET,8DAA+B,OAAO,WAAW,uCAAsB;AACzE;",
+  "sourcesContent": ["import { useValidateTypescriptPropTypes, type ValidationMap } from '@elliemae/ds-props-helpers';\nimport { type DSControlledToggleT } from '../react-desc-prop-types.js';\nimport { DSControlledToggleName } from '../constants/index.js';\n\nexport const useValidateProps = (props: DSControlledToggleT.InternalProps, propTypes: ValidationMap<unknown>): void => {\n  // we validate the \"required if\" via 'isRequiredIf from our custom PropTypes\n  useValidateTypescriptPropTypes(props, propTypes, DSControlledToggleName);\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAAmE;AAEnE,uBAAuC;AAEhC,MAAM,mBAAmB,CAAC,OAA0C,cAA4C;AAErH,8DAA+B,OAAO,WAAW,uCAAsB;AACzE;",
   "names": []
 }

package/dist/cjs/parts/AddTooltipOnReadOnly.js

@@ -34,11 +34,8 @@ module.exports = __toCommonJS(AddTooltipOnReadOnly_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_ds_tooltip = require("@elliemae/ds-tooltip");
-const AddTooltipOnReadOnly = ({
-  readOnly,
-  children
-}) => {
+const AddTooltipOnReadOnly = ({ readOnly, children }) => {
   if (readOnly) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_tooltip.DSTooltipV3, { text: "Read Only", children });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children });
+  return children;
 };
 //# sourceMappingURL=AddTooltipOnReadOnly.js.map

package/dist/cjs/parts/AddTooltipOnReadOnly.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/AddTooltipOnReadOnly.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\n\nexport const AddTooltipOnReadOnly = ({\n  readOnly,\n  children,\n}: {\n  readOnly: boolean;\n  children: React.ReactNode;\n}): JSX.Element => {\n  if (readOnly) return <DSTooltipV3 text=\"Read Only\">{children}</DSTooltipV3>;\n  return <>{children}</>;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADUA;AATvB,wBAA4B;AAErB,MAAM,uBAAuB,CAAC;AAAA,EACnC;AAAA,EACA;AACF,MAGmB;AACjB,MAAI,SAAU,QAAO,4CAAC,iCAAY,MAAK,aAAa,UAAS;AAC7D,SAAO,2EAAG,UAAS;AACrB;",
+  "sourcesContent": ["import React from 'react';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\n\nexport const AddTooltipOnReadOnly = ({ readOnly, children }: { readOnly: boolean; children: React.ReactNode }) => {\n  if (readOnly) return <DSTooltipV3 text=\"Read Only\">{children}</DSTooltipV3>;\n  return children;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIA;AAHvB,wBAA4B;AAErB,MAAM,uBAAuB,CAAC,EAAE,UAAU,SAAS,MAAwD;AAChH,MAAI,SAAU,QAAO,4CAAC,iCAAY,MAAK,aAAa,UAAS;AAC7D,SAAO;AACT;",
   "names": []
 }

package/dist/cjs/react-desc-prop-types.js

@@ -44,7 +44,8 @@ const defaultProps = {
   onChange: () => null,
   size: "m",
   readOnly: false,
-  disabled: false
+  disabled: false,
+  applyAriaDisabled: false
 };
 const DSControlledTogglePropTypes = {
   ...import_ds_props_helpers.globalAttributesPropTypes,
@@ -58,6 +59,9 @@ const DSControlledTogglePropTypes = {
   size: import_ds_props_helpers.PropTypes.oneOf(["s", "m", "l"]).description("Size of toggle"),
   readOnly: import_ds_props_helpers.PropTypes.bool.description("Wether the toggle is readOnly or not"),
   disabled: import_ds_props_helpers.PropTypes.bool.description("Wether the toggle is disabled or not"),
+  applyAriaDisabled: import_ds_props_helpers.PropTypes.bool.description(
+    "Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION."
+  ).defaultValue(false),
   containerProps: import_ds_props_helpers.PropTypes.shape({}).description("Set of properties attached to the main container"),
   id: import_ds_props_helpers.PropTypes.string.description("Unique id.")
 };

package/dist/cjs/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/react-desc-prop-types.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\n\nexport declare namespace DSControlledToggleT {\n  export type ToggleSize = 's' | 'm' | 'l';\n\n  export interface OptionalProps {\n    containerProps: Record<string, unknown>;\n    id: string;\n  }\n\n  export interface DefaultProps {\n    labelOn: string;\n    labelOff: string;\n    name: string;\n    value: string;\n    checked: boolean;\n    onChange: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;\n    size: ToggleSize;\n    readOnly: boolean;\n    disabled: boolean;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>,\n      XstyledProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>,\n      XstyledProps {}\n}\n\nexport const defaultProps: DSControlledToggleT.DefaultProps = {\n  labelOn: 'ON',\n  labelOff: 'OFF',\n  name: '',\n  value: '',\n  checked: false,\n  onChange: () => null,\n  size: 'm',\n  readOnly: false,\n  disabled: false,\n};\n\nexport const DSControlledTogglePropTypes: DSPropTypesSchema<DSControlledToggleT.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  labelOn: PropTypes.string.description('Label when toggle is checked'),\n  labelOff: PropTypes.string.description('Label when toggle is unchecked'),\n  value: PropTypes.string.description('Value attribute for toggle'),\n  name: PropTypes.string.description('Name attribute for toggle'),\n  checked: PropTypes.bool.description('Wether the toggle is checked or not'),\n  onChange: PropTypes.func.description('OnClick callback'),\n  size: PropTypes.oneOf(['s', 'm', 'l']).description('Size of toggle'),\n  readOnly: PropTypes.bool.description('Wether the toggle is readOnly or not'),\n  disabled: PropTypes.bool.description('Wether the toggle is disabled or not'),\n  containerProps: PropTypes.shape({}).description('Set of properties attached to the main container'),\n  id: PropTypes.string.description('Unique id.'),\n};\n\nexport const DSControlledTogglePropTypesSchema =\n  DSControlledTogglePropTypes as unknown as WeakValidationMap<DSControlledToggleT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAAuE;AAmChE,MAAM,eAAiD;AAAA,EAC5D,SAAS;AAAA,EACT,UAAU;AAAA,EACV,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,UAAU,MAAM;AAAA,EAChB,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU;AACZ;AAEO,MAAM,8BAA4E;AAAA,EACvF,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS,kCAAU,OAAO,YAAY,8BAA8B;AAAA,EACpE,UAAU,kCAAU,OAAO,YAAY,gCAAgC;AAAA,EACvE,OAAO,kCAAU,OAAO,YAAY,4BAA4B;AAAA,EAChE,MAAM,kCAAU,OAAO,YAAY,2BAA2B;AAAA,EAC9D,SAAS,kCAAU,KAAK,YAAY,qCAAqC;AAAA,EACzE,UAAU,kCAAU,KAAK,YAAY,kBAAkB;AAAA,EACvD,MAAM,kCAAU,MAAM,CAAC,KAAK,KAAK,GAAG,CAAC,EAAE,YAAY,gBAAgB;AAAA,EACnE,UAAU,kCAAU,KAAK,YAAY,sCAAsC;AAAA,EAC3E,UAAU,kCAAU,KAAK,YAAY,sCAAsC;AAAA,EAC3E,gBAAgB,kCAAU,MAAM,CAAC,CAAC,EAAE,YAAY,kDAAkD;AAAA,EAClG,IAAI,kCAAU,OAAO,YAAY,YAAY;AAC/C;AAEO,MAAM,oCACX;",
+  "sourcesContent": ["import type { GlobalAttributesT, XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\n\nexport declare namespace DSControlledToggleT {\n  export type ToggleSize = 's' | 'm' | 'l';\n\n  export interface OptionalProps {\n    containerProps: Record<string, unknown>;\n    id: string;\n  }\n\n  export interface DefaultProps {\n    labelOn: string;\n    labelOff: string;\n    name: string;\n    value: string;\n    checked: boolean;\n    onChange: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;\n    size: ToggleSize;\n    readOnly: boolean;\n    disabled: boolean;\n    applyAriaDisabled: boolean;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>,\n      XstyledProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>,\n      XstyledProps {}\n}\n\nexport const defaultProps: DSControlledToggleT.DefaultProps = {\n  labelOn: 'ON',\n  labelOff: 'OFF',\n  name: '',\n  value: '',\n  checked: false,\n  onChange: () => null,\n  size: 'm',\n  readOnly: false,\n  disabled: false,\n  applyAriaDisabled: false,\n};\n\nexport const DSControlledTogglePropTypes: DSPropTypesSchema<DSControlledToggleT.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  labelOn: PropTypes.string.description('Label when toggle is checked'),\n  labelOff: PropTypes.string.description('Label when toggle is unchecked'),\n  value: PropTypes.string.description('Value attribute for toggle'),\n  name: PropTypes.string.description('Name attribute for toggle'),\n  checked: PropTypes.bool.description('Wether the toggle is checked or not'),\n  onChange: PropTypes.func.description('OnClick callback'),\n  size: PropTypes.oneOf(['s', 'm', 'l']).description('Size of toggle'),\n  readOnly: PropTypes.bool.description('Wether the toggle is readOnly or not'),\n  disabled: PropTypes.bool.description('Wether the toggle is disabled or not'),\n  applyAriaDisabled: PropTypes.bool\n    .description(\n      'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n    )\n    .defaultValue(false),\n  containerProps: PropTypes.shape({}).description('Set of properties attached to the main container'),\n  id: PropTypes.string.description('Unique id.'),\n};\n\nexport const DSControlledTogglePropTypesSchema =\n  DSControlledTogglePropTypes as unknown as ValidationMap<DSControlledToggleT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAAuE;AAoChE,MAAM,eAAiD;AAAA,EAC5D,SAAS;AAAA,EACT,UAAU;AAAA,EACV,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,UAAU,MAAM;AAAA,EAChB,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU;AAAA,EACV,mBAAmB;AACrB;AAEO,MAAM,8BAA4E;AAAA,EACvF,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS,kCAAU,OAAO,YAAY,8BAA8B;AAAA,EACpE,UAAU,kCAAU,OAAO,YAAY,gCAAgC;AAAA,EACvE,OAAO,kCAAU,OAAO,YAAY,4BAA4B;AAAA,EAChE,MAAM,kCAAU,OAAO,YAAY,2BAA2B;AAAA,EAC9D,SAAS,kCAAU,KAAK,YAAY,qCAAqC;AAAA,EACzE,UAAU,kCAAU,KAAK,YAAY,kBAAkB;AAAA,EACvD,MAAM,kCAAU,MAAM,CAAC,KAAK,KAAK,GAAG,CAAC,EAAE,YAAY,gBAAgB;AAAA,EACnE,UAAU,kCAAU,KAAK,YAAY,sCAAsC;AAAA,EAC3E,UAAU,kCAAU,KAAK,YAAY,sCAAsC;AAAA,EAC3E,mBAAmB,kCAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AAAA,EACrB,gBAAgB,kCAAU,MAAM,CAAC,CAAC,EAAE,YAAY,kDAAkD;AAAA,EAClG,IAAI,kCAAU,OAAO,YAAY,YAAY;AAC/C;AAEO,MAAM,oCACX;",
   "names": []
 }

package/dist/cjs/styles.js

@@ -58,12 +58,12 @@ const focusBorders = import_ds_system.css`
 const hoverStyled = import_ds_system.css`
   background-color: ${({ checked, theme }) => {
   if (checked) return theme.colors.brand["800"];
-  else return theme.colors.neutral["600"];
+  return theme.colors.neutral["600"];
 }};
 
   border-color: ${({ checked, theme }) => {
   if (checked) return theme.colors.brand["800"];
-  else return theme.colors.neutral["700"];
+  return theme.colors.neutral["700"];
 }};
 `;
 const StyledContainer = (0, import_ds_system.styled)("div")`
@@ -101,8 +101,8 @@ const StyledVisibleContent = (0, import_ds_system.styled)("div")`
   transition: background-color 0.2s;
   background-color: ${import_styleHelpers.getInterpolatedBgDsToggleColorByProps};
   &:hover {
-    cursor: ${({ disabled, readOnly }) => (0, import_styleHelpers.handleCursors)(disabled, readOnly)};
-    ${({ disabled, readOnly }) => !disabled && !readOnly && hoverStyled}
+    cursor: ${({ disabled, applyAriaDisabled, readOnly }) => (0, import_styleHelpers.handleCursors)(disabled, applyAriaDisabled, readOnly)};
+    ${({ disabled, applyAriaDisabled, readOnly }) => !disabled && !applyAriaDisabled && !readOnly && hoverStyled}
   }
 `;
 const StyledCircle = import_ds_system.styled.div`
@@ -119,7 +119,7 @@ const StyledText = import_ds_system.styled.div`
   justify-content: ${({ isLongerTextRendering }) => isLongerTextRendering ? "flex-start" : "center"};
   font-size: ${({ theme, size }) => (0, import_styleHelpers.handleFontSize)(size, theme)};
   font-weight: ${({ theme }) => theme.fontWeights.semibold};
-  color: ${({ theme, disabled }) => disabled ? "#5c6574" : theme.colors.neutral["000"]};
+  color: ${({ theme, disabled, applyAriaDisabled }) => disabled || applyAriaDisabled ? "#5c6574" : theme.colors.neutral["000"]};
   ${({ isLongerTextRendering, checked }) => isLongerTextRendering && checked ? `margin-left: 6px;` : void 0}
   ${({ isLongerTextRendering, checked }) => isLongerTextRendering && !checked ? `margin-left: 4px;` : void 0}
 `;

package/dist/cjs/styles.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/styles.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport type { DSControlledToggleT } from './react-desc-prop-types.js';\nimport {\n  containerHeight,\n  borderRadius,\n  labelHeight,\n  getInterpolatedBorderDsToggleColorByProps,\n  getInterpolatedBgDsToggleColorByProps,\n  circleValues,\n  handleFontSize,\n  margin,\n  handleCursors,\n} from './utils/styleHelpers.js';\n\ninterface StyledContainerT {\n  size: DSControlledToggleT.ToggleSize;\n  disabled: boolean;\n}\ninterface StyledLabelT {\n  width: number;\n  size: DSControlledToggleT.ToggleSize;\n  checked: boolean;\n}\ninterface StyledVisibleContentT {\n  checked: boolean;\n  size: DSControlledToggleT.ToggleSize;\n  disabled: boolean;\n  readOnly: boolean;\n  as: 'p' | 'label';\n  htmlFor: string;\n}\ninterface StyledCircleT {\n  size: DSControlledToggleT.ToggleSize;\n  readOnly: boolean;\n  checked: boolean;\n  disabled: boolean;\n}\ninterface StyledTextT {\n  isLongerTextRendering: boolean;\n  size: DSControlledToggleT.ToggleSize;\n  checked: boolean;\n  disabled: boolean;\n}\ninterface SetLabelWidthT {\n  size: DSControlledToggleT.ToggleSize;\n}\n\nconst focusBorders = css`\n  &:focus-within {\n    &:after {\n      content: '';\n      top: -3px;\n      right: -3px;\n      bottom: -3px;\n      left: -3px;\n      border: 2px solid ${({ theme }) => theme.colors.brand['700']};\n      border-radius: 20px;\n      position: absolute;\n    }\n  }\n`;\n\nconst hoverStyled = css<{ checked: boolean }>`\n  background-color: ${({ checked, theme }) => {\n    if (checked) return theme.colors.brand['800'];\n    else return theme.colors.neutral['600'];\n  }};\n\n  border-color: ${({ checked, theme }) => {\n    if (checked) return theme.colors.brand['800'];\n    else return theme.colors.neutral['700'];\n  }};\n`;\n\nexport const StyledContainer = styled('div')<StyledContainerT>`\n  display: inline-flex;\n  width: fit-content;\n  justify-content: center;\n  align-items: center;\n  height: ${({ size }) => containerHeight[size]};\n  border-radius: ${({ size }) => borderRadius[size]};\n  outline: none;\n  position: relative;\n  z-index: 0;\n  border: 2px solid transparent;\n  ${({ disabled }) => !disabled && focusBorders};\n  ${xStyledCommonProps}\n`;\n\nexport const StyledLabel = styled('div')<StyledLabelT>`\n  width: ${({ width, size }) => (width ? `calc(${width}px + ${margin[size]})` : 'auto')};\n  height: ${({ size }) => labelHeight[size]};\n  z-index: 2;\n  outline: none;\n  border-radius: ${({ size }) => labelHeight[size]};\n`;\n\nexport const StyledVisibleContent = styled('div')<StyledVisibleContentT>`\n  display: flex;\n  margin: 0;\n  padding: 0;\n  align-items: center;\n  height: 100%;\n  flex-direction: ${({ checked }) => (checked ? 'row-reverse' : 'row')};\n  border-radius: ${({ size }) => `calc(${labelHeight[size]} - 4px)`};\n  border: ${(props) =>\n    props.size === 's'\n      ? `1px solid ${getInterpolatedBorderDsToggleColorByProps(props)}`\n      : `\n    2px solid ${getInterpolatedBorderDsToggleColorByProps(props)}\n    `};\n  transition: background-color 0.2s;\n  background-color: ${getInterpolatedBgDsToggleColorByProps};\n  &:hover {\n    cursor: ${({ disabled, readOnly }) => handleCursors(disabled, readOnly)};\n    ${({ disabled, readOnly }) => !disabled && !readOnly && hoverStyled}\n  }\n` as unknown as React.ComponentType<React.ComponentProps<'div'> & Partial<StyledVisibleContentT>>;\n\nexport const StyledCircle = styled.div<StyledCircleT>`\n  height: ${({ size }) => circleValues[size]};\n  width: ${({ size }) => circleValues[size]};\n  border-radius: 50%;\n  background-color: ${({ theme, readOnly }) => (readOnly ? theme.colors.neutral[100] : theme.colors.neutral['000'])};\n`;\n\nexport const StyledText = styled.div<StyledTextT>`\n  display: flex;\n  flex-grow: 1;\n  line-height: ${({ theme, size }) => handleFontSize(size, theme)};\n  align-items: center;\n  justify-content: ${({ isLongerTextRendering }) => (isLongerTextRendering ? 'flex-start' : 'center')};\n  font-size: ${({ theme, size }) => handleFontSize(size, theme)};\n  font-weight: ${({ theme }) => theme.fontWeights.semibold};\n  color: ${({ theme, disabled }) => (disabled ? '#5c6574' : theme.colors.neutral['000'])};\n  ${({ isLongerTextRendering, checked }) => (isLongerTextRendering && checked ? `margin-left: 6px;` : undefined)}\n  ${({ isLongerTextRendering, checked }) => (isLongerTextRendering && !checked ? `margin-left: 4px;` : undefined)}\n`;\n\nexport const StyledButton = styled(DSButtonV2)`\n  margin: 0;\n  padding: 0;\n  z-index: 20;\n  border-radius: 20px;\n`;\n\nexport const SetLabelWidth = styled.div<SetLabelWidthT>`\n  font-size: ${({ theme, size }) => handleFontSize(size, theme)};\n  font-weight: ${({ theme }) => theme.fontWeights.semibold};\n  width: auto;\n  position: absolute;\n  white-space: nowrap;\n  visibility: hidden;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAgD;AAChD,0BAA2B;AAE3B,0BAUO;AAmCP,MAAM,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAQK,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOlE,MAAM,cAAc;AAAA,sBACE,CAAC,EAAE,SAAS,MAAM,MAAM;AAC1C,MAAI,QAAS,QAAO,MAAM,OAAO,MAAM,KAAK;AAAA,MACvC,QAAO,MAAM,OAAO,QAAQ,KAAK;AACxC,CAAC;AAAA;AAAA,kBAEe,CAAC,EAAE,SAAS,MAAM,MAAM;AACtC,MAAI,QAAS,QAAO,MAAM,OAAO,MAAM,KAAK;AAAA,MACvC,QAAO,MAAM,OAAO,QAAQ,KAAK;AACxC,CAAC;AAAA;AAGI,MAAM,sBAAkB,yBAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,YAK/B,CAAC,EAAE,KAAK,MAAM,oCAAgB,IAAI,CAAC;AAAA,mBAC5B,CAAC,EAAE,KAAK,MAAM,iCAAa,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,IAK/C,CAAC,EAAE,SAAS,MAAM,CAAC,YAAY,YAAY;AAAA,IAC3C,mCAAkB;AAAA;AAGf,MAAM,kBAAc,yBAAO,KAAK;AAAA,WAC5B,CAAC,EAAE,OAAO,KAAK,MAAO,QAAQ,QAAQ,KAAK,QAAQ,2BAAO,IAAI,CAAC,MAAM,MAAO;AAAA,YAC3E,CAAC,EAAE,KAAK,MAAM,gCAAY,IAAI,CAAC;AAAA;AAAA;AAAA,mBAGxB,CAAC,EAAE,KAAK,MAAM,gCAAY,IAAI,CAAC;AAAA;AAG3C,MAAM,2BAAuB,yBAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAM5B,CAAC,EAAE,QAAQ,MAAO,UAAU,gBAAgB,KAAM;AAAA,mBACnD,CAAC,EAAE,KAAK,MAAM,QAAQ,gCAAY,IAAI,CAAC,SAAS;AAAA,YACvD,CAAC,UACT,MAAM,SAAS,MACX,iBAAa,+DAA0C,KAAK,CAAC,KAC7D;AAAA,oBACQ,+DAA0C,KAAK,CAAC;AAAA,KAC3D;AAAA;AAAA,sBAEiB,yDAAqC;AAAA;AAAA,cAE7C,CAAC,EAAE,UAAU,SAAS,UAAM,mCAAc,UAAU,QAAQ,CAAC;AAAA,MACrE,CAAC,EAAE,UAAU,SAAS,MAAM,CAAC,YAAY,CAAC,YAAY,WAAW;AAAA;AAAA;AAIhE,MAAM,eAAe,wBAAO;AAAA,YACvB,CAAC,EAAE,KAAK,MAAM,iCAAa,IAAI,CAAC;AAAA,WACjC,CAAC,EAAE,KAAK,MAAM,iCAAa,IAAI,CAAC;AAAA;AAAA,sBAErB,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,OAAO,QAAQ,KAAK,CAAE;AAAA;AAG5G,MAAM,aAAa,wBAAO;AAAA;AAAA;AAAA,iBAGhB,CAAC,EAAE,OAAO,KAAK,UAAM,oCAAe,MAAM,KAAK,CAAC;AAAA;AAAA,qBAE5C,CAAC,EAAE,sBAAsB,MAAO,wBAAwB,eAAe,QAAS;AAAA,eACtF,CAAC,EAAE,OAAO,KAAK,UAAM,oCAAe,MAAM,KAAK,CAAC;AAAA,iBAC9C,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,QAAQ;AAAA,WAC/C,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,YAAY,MAAM,OAAO,QAAQ,KAAK,CAAE;AAAA,IACpF,CAAC,EAAE,uBAAuB,QAAQ,MAAO,yBAAyB,UAAU,sBAAsB,MAAU;AAAA,IAC5G,CAAC,EAAE,uBAAuB,QAAQ,MAAO,yBAAyB,CAAC,UAAU,sBAAsB,MAAU;AAAA;AAG1G,MAAM,mBAAe,yBAAO,8BAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAOtC,MAAM,gBAAgB,wBAAO;AAAA,eACrB,CAAC,EAAE,OAAO,KAAK,UAAM,oCAAe,MAAM,KAAK,CAAC;AAAA,iBAC9C,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport type { DSControlledToggleT } from './react-desc-prop-types.js';\nimport {\n  containerHeight,\n  borderRadius,\n  labelHeight,\n  getInterpolatedBorderDsToggleColorByProps,\n  getInterpolatedBgDsToggleColorByProps,\n  circleValues,\n  handleFontSize,\n  margin,\n  handleCursors,\n} from './utils/styleHelpers.js';\n\ninterface StyledContainerT {\n  size: DSControlledToggleT.ToggleSize;\n  disabled: boolean;\n}\ninterface StyledLabelT {\n  width: number;\n  size: DSControlledToggleT.ToggleSize;\n  checked: boolean;\n}\ninterface StyledVisibleContentT {\n  checked: boolean;\n  size: DSControlledToggleT.ToggleSize;\n  disabled: boolean;\n  applyAriaDisabled: boolean;\n  readOnly: boolean;\n  as: 'p' | 'label';\n  htmlFor: string;\n}\ninterface StyledCircleT {\n  size: DSControlledToggleT.ToggleSize;\n  readOnly: boolean;\n  checked: boolean;\n  disabled: boolean;\n}\ninterface StyledTextT {\n  isLongerTextRendering: boolean;\n  size: DSControlledToggleT.ToggleSize;\n  checked: boolean;\n  disabled: boolean;\n  applyAriaDisabled: boolean;\n}\ninterface SetLabelWidthT {\n  size: DSControlledToggleT.ToggleSize;\n}\n\nconst focusBorders = css`\n  &:focus-within {\n    &:after {\n      content: '';\n      top: -3px;\n      right: -3px;\n      bottom: -3px;\n      left: -3px;\n      border: 2px solid ${({ theme }) => theme.colors.brand['700']};\n      border-radius: 20px;\n      position: absolute;\n    }\n  }\n`;\n\nconst hoverStyled = css<{ checked: boolean }>`\n  background-color: ${({ checked, theme }) => {\n    if (checked) return theme.colors.brand['800'];\n    return theme.colors.neutral['600'];\n  }};\n\n  border-color: ${({ checked, theme }) => {\n    if (checked) return theme.colors.brand['800'];\n    return theme.colors.neutral['700'];\n  }};\n`;\n\nexport const StyledContainer = styled('div')<StyledContainerT>`\n  display: inline-flex;\n  width: fit-content;\n  justify-content: center;\n  align-items: center;\n  height: ${({ size }) => containerHeight[size]};\n  border-radius: ${({ size }) => borderRadius[size]};\n  outline: none;\n  position: relative;\n  z-index: 0;\n  border: 2px solid transparent;\n  ${({ disabled }) => !disabled && focusBorders};\n  ${xStyledCommonProps}\n`;\n\nexport const StyledLabel = styled('div')<StyledLabelT>`\n  width: ${({ width, size }) => (width ? `calc(${width}px + ${margin[size]})` : 'auto')};\n  height: ${({ size }) => labelHeight[size]};\n  z-index: 2;\n  outline: none;\n  border-radius: ${({ size }) => labelHeight[size]};\n`;\n\nexport const StyledVisibleContent = styled('div')<StyledVisibleContentT>`\n  display: flex;\n  margin: 0;\n  padding: 0;\n  align-items: center;\n  height: 100%;\n  flex-direction: ${({ checked }) => (checked ? 'row-reverse' : 'row')};\n  border-radius: ${({ size }) => `calc(${labelHeight[size]} - 4px)`};\n  border: ${(props) =>\n    props.size === 's'\n      ? `1px solid ${getInterpolatedBorderDsToggleColorByProps(props)}`\n      : `\n    2px solid ${getInterpolatedBorderDsToggleColorByProps(props)}\n    `};\n  transition: background-color 0.2s;\n  background-color: ${getInterpolatedBgDsToggleColorByProps};\n  &:hover {\n    cursor: ${({ disabled, applyAriaDisabled, readOnly }) => handleCursors(disabled, applyAriaDisabled, readOnly)};\n    ${({ disabled, applyAriaDisabled, readOnly }) => !disabled && !applyAriaDisabled && !readOnly && hoverStyled}\n  }\n` as unknown as React.ComponentType<React.ComponentProps<'div'> & Partial<StyledVisibleContentT>>;\n\nexport const StyledCircle = styled.div<StyledCircleT>`\n  height: ${({ size }) => circleValues[size]};\n  width: ${({ size }) => circleValues[size]};\n  border-radius: 50%;\n  background-color: ${({ theme, readOnly }) => (readOnly ? theme.colors.neutral[100] : theme.colors.neutral['000'])};\n`;\n\nexport const StyledText = styled.div<StyledTextT>`\n  display: flex;\n  flex-grow: 1;\n  line-height: ${({ theme, size }) => handleFontSize(size, theme)};\n  align-items: center;\n  justify-content: ${({ isLongerTextRendering }) => (isLongerTextRendering ? 'flex-start' : 'center')};\n  font-size: ${({ theme, size }) => handleFontSize(size, theme)};\n  font-weight: ${({ theme }) => theme.fontWeights.semibold};\n  color: ${({ theme, disabled, applyAriaDisabled }) =>\n    disabled || applyAriaDisabled ? '#5c6574' : theme.colors.neutral['000']};\n  ${({ isLongerTextRendering, checked }) => (isLongerTextRendering && checked ? `margin-left: 6px;` : undefined)}\n  ${({ isLongerTextRendering, checked }) => (isLongerTextRendering && !checked ? `margin-left: 4px;` : undefined)}\n`;\n\nexport const StyledButton = styled(DSButtonV2)`\n  margin: 0;\n  padding: 0;\n  z-index: 20;\n  border-radius: 20px;\n`;\n\nexport const SetLabelWidth = styled.div<SetLabelWidthT>`\n  font-size: ${({ theme, size }) => handleFontSize(size, theme)};\n  font-weight: ${({ theme }) => theme.fontWeights.semibold};\n  width: auto;\n  position: absolute;\n  white-space: nowrap;\n  visibility: hidden;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/utils/styleHelpers.js

@@ -44,9 +44,11 @@ var import_ds_system = require("@elliemae/ds-system");
 const getStyleState = ({
   checked,
   disabled,
+  applyAriaDisabled,
   readOnly
 }) => {
   if (disabled) return "disabled";
+  if (applyAriaDisabled) return "applyAriaDisabled";
   if (readOnly) return "readOnly";
   if (checked) return "checked";
   return "unchecked";
@@ -90,6 +92,7 @@ const handleFontSize = (size, { fontSizes }) => {
 };
 const bgColorsMap = {
   disabled: "neutral-100",
+  applyAriaDisabled: "neutral-100",
   readOnly: "neutral-500",
   checked: "brand-600",
   unchecked: "neutral-500"
@@ -98,14 +101,16 @@ const getInterpolatedBgDSToggleColor = (styleState, props) => import_ds_system.t
 const getInterpolatedBgDsToggleColorByProps = (props) => getInterpolatedBgDSToggleColor(getStyleState(props), props);
 const borderColorsMap = {
   disabled: "neutral-300",
+  applyAriaDisabled: "neutral-300",
   readOnly: "neutral-500",
   checked: "brand-700",
   unchecked: "neutral-600"
 };
 const getInterpolatedBorderDSToggleColor = (styleState, props) => import_ds_system.th.color(borderColorsMap[styleState])(props);
 const getInterpolatedBorderDsToggleColorByProps = (props) => getInterpolatedBorderDSToggleColor(getStyleState(props), props);
-const handleCursors = (disabled, readOnly) => {
+const handleCursors = (disabled, applyAriaDisabled, readOnly) => {
   if (disabled) return "not-allowed";
+  if (applyAriaDisabled) return "not-allowed";
   if (readOnly) return "default";
   return "pointer";
 };

package/dist/cjs/utils/styleHelpers.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/utils/styleHelpers.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { th, type PropsWithTheme } from '@elliemae/ds-system';\nimport type { DSControlledToggleT } from '../react-desc-prop-types.js';\n\ntype StyleStateT = 'disabled' | 'readOnly' | 'checked' | 'unchecked';\n\nconst getStyleState = ({\n  checked,\n  disabled,\n  readOnly,\n}: PropsWithTheme<{\n  checked: boolean;\n  disabled: boolean;\n  readOnly: boolean;\n}>): StyleStateT => {\n  if (disabled) return 'disabled';\n  if (readOnly) return 'readOnly';\n  if (checked) return 'checked';\n  return 'unchecked';\n};\n\nexport const circleValues = {\n  s: '14px',\n  m: '20px',\n  l: '28px',\n};\n\nexport const margin = {\n  s: '26px',\n  m: '34px',\n  l: '42px',\n};\n\nexport const containerHeight = {\n  s: '20px',\n  m: '28px',\n  l: '36px',\n};\n\nexport const labelHeight = {\n  s: '16px',\n  m: '24px',\n  l: '32px',\n};\n\nexport const borderRadius = {\n  s: '16px',\n  m: '20px',\n  l: '22px',\n};\nexport const handleFontSize = (\n  size: DSControlledToggleT.ToggleSize,\n  { fontSizes }: PropsWithTheme['theme'],\n): string => {\n  switch (size) {\n    case 's':\n      return fontSizes.microText[200];\n    case 'm':\n      return '15px';\n    case 'l':\n      return '20px';\n    default:\n      return '15px';\n  }\n};\nconst bgColorsMap = {\n  disabled: 'neutral-100',\n  readOnly: 'neutral-500',\n  checked: 'brand-600',\n  unchecked: 'neutral-500',\n} as const;\nconst getInterpolatedBgDSToggleColor = (styleState: StyleStateT, props: PropsWithTheme) =>\n  th.color(bgColorsMap[styleState])(props);\nexport const getInterpolatedBgDsToggleColorByProps = (\n  props: PropsWithTheme<{\n    checked: boolean;\n    disabled: boolean;\n    readOnly: boolean;\n  }>,\n) => getInterpolatedBgDSToggleColor(getStyleState(props), props);\n\nconst borderColorsMap = {\n  disabled: 'neutral-300',\n  readOnly: 'neutral-500',\n  checked: 'brand-700',\n  unchecked: 'neutral-600',\n} as const;\nconst getInterpolatedBorderDSToggleColor = (styleState: StyleStateT, props: PropsWithTheme) =>\n  th.color(borderColorsMap[styleState])(props);\nexport const getInterpolatedBorderDsToggleColorByProps = (\n  props: PropsWithTheme<{\n    checked: boolean;\n    disabled: boolean;\n    readOnly: boolean;\n  }>,\n) => getInterpolatedBorderDSToggleColor(getStyleState(props), props);\n\nexport const handleCursors = (disabled: boolean, readOnly: boolean): string => {\n  if (disabled) return 'not-allowed';\n  if (readOnly) return 'default';\n  return 'pointer';\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAKxC,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AACF,MAIoB;AAClB,MAAI,SAAU,QAAO;AACrB,MAAI,SAAU,QAAO;AACrB,MAAI,QAAS,QAAO;AACpB,SAAO;AACT;AAEO,MAAM,eAAe;AAAA,EAC1B,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,SAAS;AAAA,EACpB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,kBAAkB;AAAA,EAC7B,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,cAAc;AAAA,EACzB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,eAAe;AAAA,EAC1B,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACO,MAAM,iBAAiB,CAC5B,MACA,EAAE,UAAU,MACD;AACX,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,aAAO,UAAU,UAAU,GAAG;AAAA,IAChC,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF;AACA,MAAM,cAAc;AAAA,EAClB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,SAAS;AAAA,EACT,WAAW;AACb;AACA,MAAM,iCAAiC,CAAC,YAAyB,UAC/D,oBAAG,MAAM,YAAY,UAAU,CAAC,EAAE,KAAK;AAClC,MAAM,wCAAwC,CACnD,UAKG,+BAA+B,cAAc,KAAK,GAAG,KAAK;AAE/D,MAAM,kBAAkB;AAAA,EACtB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,SAAS;AAAA,EACT,WAAW;AACb;AACA,MAAM,qCAAqC,CAAC,YAAyB,UACnE,oBAAG,MAAM,gBAAgB,UAAU,CAAC,EAAE,KAAK;AACtC,MAAM,4CAA4C,CACvD,UAKG,mCAAmC,cAAc,KAAK,GAAG,KAAK;AAE5D,MAAM,gBAAgB,CAAC,UAAmB,aAA8B;AAC7E,MAAI,SAAU,QAAO;AACrB,MAAI,SAAU,QAAO;AACrB,SAAO;AACT;",
+  "sourcesContent": ["import { th, type PropsWithTheme } from '@elliemae/ds-system';\nimport type { DSControlledToggleT } from '../react-desc-prop-types.js';\n\ntype StyleStateT = 'disabled' | 'applyAriaDisabled' | 'readOnly' | 'checked' | 'unchecked';\n\nconst getStyleState = ({\n  checked,\n  disabled,\n  applyAriaDisabled,\n  readOnly,\n}: PropsWithTheme<{\n  checked: boolean;\n  disabled: boolean;\n  applyAriaDisabled: boolean;\n  readOnly: boolean;\n}>): StyleStateT => {\n  if (disabled) return 'disabled';\n  if (applyAriaDisabled) return 'applyAriaDisabled';\n  if (readOnly) return 'readOnly';\n  if (checked) return 'checked';\n  return 'unchecked';\n};\n\nexport const circleValues = {\n  s: '14px',\n  m: '20px',\n  l: '28px',\n};\n\nexport const margin = {\n  s: '26px',\n  m: '34px',\n  l: '42px',\n};\n\nexport const containerHeight = {\n  s: '20px',\n  m: '28px',\n  l: '36px',\n};\n\nexport const labelHeight = {\n  s: '16px',\n  m: '24px',\n  l: '32px',\n};\n\nexport const borderRadius = {\n  s: '16px',\n  m: '20px',\n  l: '22px',\n};\n\nexport const handleFontSize = (\n  size: DSControlledToggleT.ToggleSize,\n  { fontSizes }: PropsWithTheme['theme'],\n): string => {\n  switch (size) {\n    case 's':\n      return fontSizes.microText[200];\n    case 'm':\n      return '15px';\n    case 'l':\n      return '20px';\n    default:\n      return '15px';\n  }\n};\n\nconst bgColorsMap = {\n  disabled: 'neutral-100',\n  applyAriaDisabled: 'neutral-100',\n  readOnly: 'neutral-500',\n  checked: 'brand-600',\n  unchecked: 'neutral-500',\n} as const;\n\nconst getInterpolatedBgDSToggleColor = (styleState: StyleStateT, props: PropsWithTheme) =>\n  th.color(bgColorsMap[styleState])(props);\n\nexport const getInterpolatedBgDsToggleColorByProps = (\n  props: PropsWithTheme<{\n    checked: boolean;\n    disabled: boolean;\n    applyAriaDisabled: boolean;\n    readOnly: boolean;\n  }>,\n) => getInterpolatedBgDSToggleColor(getStyleState(props), props);\n\nconst borderColorsMap = {\n  disabled: 'neutral-300',\n  applyAriaDisabled: 'neutral-300',\n  readOnly: 'neutral-500',\n  checked: 'brand-700',\n  unchecked: 'neutral-600',\n} as const;\n\nconst getInterpolatedBorderDSToggleColor = (styleState: StyleStateT, props: PropsWithTheme) =>\n  th.color(borderColorsMap[styleState])(props);\n\nexport const getInterpolatedBorderDsToggleColorByProps = (\n  props: PropsWithTheme<{\n    checked: boolean;\n    disabled: boolean;\n    applyAriaDisabled: boolean;\n    readOnly: boolean;\n  }>,\n) => getInterpolatedBorderDSToggleColor(getStyleState(props), props);\n\nexport const handleCursors = (disabled: boolean, applyAriaDisabled: boolean, readOnly: boolean): string => {\n  if (disabled) return 'not-allowed';\n  if (applyAriaDisabled) return 'not-allowed';\n  if (readOnly) return 'default';\n  return 'pointer';\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAKxC,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAKoB;AAClB,MAAI,SAAU,QAAO;AACrB,MAAI,kBAAmB,QAAO;AAC9B,MAAI,SAAU,QAAO;AACrB,MAAI,QAAS,QAAO;AACpB,SAAO;AACT;AAEO,MAAM,eAAe;AAAA,EAC1B,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,SAAS;AAAA,EACpB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,kBAAkB;AAAA,EAC7B,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,cAAc;AAAA,EACzB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,eAAe;AAAA,EAC1B,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,iBAAiB,CAC5B,MACA,EAAE,UAAU,MACD;AACX,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,aAAO,UAAU,UAAU,GAAG;AAAA,IAChC,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF;AAEA,MAAM,cAAc;AAAA,EAClB,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,UAAU;AAAA,EACV,SAAS;AAAA,EACT,WAAW;AACb;AAEA,MAAM,iCAAiC,CAAC,YAAyB,UAC/D,oBAAG,MAAM,YAAY,UAAU,CAAC,EAAE,KAAK;AAElC,MAAM,wCAAwC,CACnD,UAMG,+BAA+B,cAAc,KAAK,GAAG,KAAK;AAE/D,MAAM,kBAAkB;AAAA,EACtB,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,UAAU;AAAA,EACV,SAAS;AAAA,EACT,WAAW;AACb;AAEA,MAAM,qCAAqC,CAAC,YAAyB,UACnE,oBAAG,MAAM,gBAAgB,UAAU,CAAC,EAAE,KAAK;AAEtC,MAAM,4CAA4C,CACvD,UAMG,mCAAmC,cAAc,KAAK,GAAG,KAAK;AAE5D,MAAM,gBAAgB,CAAC,UAAmB,mBAA4B,aAA8B;AACzG,MAAI,SAAU,QAAO;AACrB,MAAI,kBAAmB,QAAO;AAC9B,MAAI,SAAU,QAAO;AACrB,SAAO;AACT;",
   "names": []
 }

package/dist/esm/ControlledToggle.js

@@ -17,7 +17,7 @@ import { useDSControlledToggle } from "./config/useDSControlledToggle.js";
 import { AddTooltipOnReadOnly } from "./parts/AddTooltipOnReadOnly.js";
 const DSControlledToggle = (props) => {
   const { propsWithDefault, globalProps, xstyledProps, instanceUid, handleOnClick } = useDSControlledToggle(props);
-  const { labelOn, labelOff, checked, size, value, containerProps, disabled, readOnly } = propsWithDefault;
+  const { labelOn, labelOff, checked, size, value, containerProps, disabled, applyAriaDisabled, readOnly } = propsWithDefault;
   const [isLongerTextRendering, setIsLongerTextRendering] = useState(false);
   const [width, setWidth] = useState(0);
   const labelTextRef = useRef(null);
@@ -32,7 +32,7 @@ const DSControlledToggle = (props) => {
       value,
       id: instanceUid,
       "aria-readonly": readOnly,
-      "aria-disabled": disabled,
+      "aria-disabled": disabled || applyAriaDisabled,
       "aria-checked": checked,
       readOnly,
       disabled,
@@ -41,7 +41,7 @@ const DSControlledToggle = (props) => {
       buttonType: "raw",
       onClick: handleOnClick
     }),
-    [checked, disabled, globalProps, handleOnClick, instanceUid, readOnly, value]
+    [checked, disabled, globalProps, handleOnClick, instanceUid, readOnly, value, applyAriaDisabled]
   );
   useLayoutEffect(() => {
     if (labelTextRef.current) {
@@ -62,20 +62,31 @@ const DSControlledToggle = (props) => {
       ...xstyledProps,
       disabled,
       children: /* @__PURE__ */ jsx(AddTooltipOnReadOnly, { readOnly, children: /* @__PURE__ */ jsxs(StyledButton, { ...ButtonProps, children: [
-        /* @__PURE__ */ jsx(StyledLabel, { checked, size, width, children: /* @__PURE__ */ jsxs(StyledVisibleContent, { checked, size, readOnly, disabled, children: [
-          /* @__PURE__ */ jsx(StyledCircle, { checked, size, readOnly, disabled }),
-          /* @__PURE__ */ jsx(
-            StyledText,
-            {
-              innerRef: labelTextRef,
-              isLongerTextRendering,
-              checked,
-              size,
-              disabled,
-              children: checked ? labelOn : labelOff
-            }
-          )
-        ] }) }),
+        /* @__PURE__ */ jsx(StyledLabel, { checked, size, width, children: /* @__PURE__ */ jsxs(
+          StyledVisibleContent,
+          {
+            checked,
+            size,
+            readOnly,
+            disabled,
+            applyAriaDisabled,
+            children: [
+              /* @__PURE__ */ jsx(StyledCircle, { checked, size, readOnly, disabled }),
+              /* @__PURE__ */ jsx(
+                StyledText,
+                {
+                  innerRef: labelTextRef,
+                  isLongerTextRendering,
+                  checked,
+                  size,
+                  disabled,
+                  applyAriaDisabled,
+                  children: checked ? labelOn : labelOff
+                }
+              )
+            ]
+          }
+        ) }),
         /* @__PURE__ */ jsx(SetLabelWidth, { size, innerRef: widthTextRef, "aria-hidden": "true", children: longerText })
       ] }) })
     }

package/dist/esm/ControlledToggle.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/ControlledToggle.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useMemo, useRef, useLayoutEffect } from 'react';\nimport type { DSButtonV2T } from '@elliemae/ds-button-v2';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { DSControlledTogglePropTypesSchema, type DSControlledToggleT } from './react-desc-prop-types.js';\nimport {\n  StyledContainer,\n  StyledButton,\n  StyledLabel,\n  StyledVisibleContent,\n  StyledCircle,\n  StyledText,\n  SetLabelWidth,\n} from './styles.js';\nimport { DSFormToggleName } from './DSFormToggleDefinitions.js';\nimport { useDSControlledToggle } from './config/useDSControlledToggle.js';\nimport { AddTooltipOnReadOnly } from './parts/AddTooltipOnReadOnly.js';\n\nconst DSControlledToggle: React.ComponentType<DSControlledToggleT.Props> = (props) => {\n  const { propsWithDefault, globalProps, xstyledProps, instanceUid, handleOnClick } = useDSControlledToggle(props);\n  const { labelOn, labelOff, checked, size, value, containerProps, disabled, readOnly } = propsWithDefault;\n\n  const [isLongerTextRendering, setIsLongerTextRendering] = useState<boolean>(false);\n  const [width, setWidth] = useState<number>(0);\n  const labelTextRef = useRef<HTMLDivElement | null>(null);\n  const widthTextRef = useRef<HTMLDivElement | null>(null);\n\n  const longerText = useMemo(() => (labelOn.length > labelOff.length ? labelOn : labelOff), [labelOff, labelOn]);\n\n  const ButtonProps: DSButtonV2T.Props = useMemo(\n    () => ({\n      role: 'switch',\n      'data-testid': 'ds-controlled-toggle-checkbox',\n      // removing 'value' could be a breaking change in scenarios where the form is submitted and the value is used...\n      // check https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#value\n      value: value,\n      id: instanceUid,\n      'aria-readonly': readOnly,\n      'aria-disabled': disabled,\n      'aria-checked': checked,\n      readOnly: readOnly,\n      disabled: disabled,\n      ...(globalProps as unknown as DSButtonV2T.Props),\n      type: 'button',\n      buttonType: 'raw',\n      onClick: handleOnClick,\n    }),\n    [checked, disabled, globalProps, handleOnClick, instanceUid, readOnly, value],\n  );\n\n  useLayoutEffect(() => {\n    if (labelTextRef.current) {\n      setIsLongerTextRendering(labelTextRef.current.innerText === longerText);\n    }\n  }, [labelTextRef, longerText, checked]);\n\n  useLayoutEffect(() => {\n    if (widthTextRef.current) {\n      setWidth(widthTextRef.current.clientWidth);\n    }\n  }, [widthTextRef]);\n\n  return (\n    <StyledContainer\n      size={size}\n      data-testid=\"ds-controlled-toggle\"\n      {...containerProps}\n      {...xstyledProps}\n      disabled={disabled}\n    >\n      <AddTooltipOnReadOnly readOnly={readOnly}>\n        <StyledButton {...ButtonProps}>\n          <StyledLabel checked={checked} size={size} width={width}>\n            <StyledVisibleContent checked={checked} size={size} readOnly={readOnly} disabled={disabled}>\n              <StyledCircle checked={checked} size={size} readOnly={readOnly} disabled={disabled} />\n              <StyledText\n                innerRef={labelTextRef}\n                isLongerTextRendering={isLongerTextRendering}\n                checked={checked}\n                size={size}\n                disabled={disabled}\n              >\n                {checked ? labelOn : labelOff}\n              </StyledText>\n            </StyledVisibleContent>\n          </StyledLabel>\n          <SetLabelWidth size={size} innerRef={widthTextRef} aria-hidden=\"true\">\n            {longerText}\n          </SetLabelWidth>\n        </StyledButton>\n      </AddTooltipOnReadOnly>\n    </StyledContainer>\n  );\n};\n\nDSControlledToggle.displayName = DSFormToggleName;\nconst DSControlledToggleWithSchema = describe(DSControlledToggle);\nDSControlledToggleWithSchema.propTypes = DSControlledTogglePropTypesSchema;\n\nexport { DSControlledToggle, DSControlledToggleWithSchema };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACwEX,SACE,KADF;AAxEZ,SAAgB,UAAU,SAAS,QAAQ,uBAAuB;AAElE,SAAS,gBAAgB;AACzB,SAAS,yCAAmE;AAC5E;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,wBAAwB;AACjC,SAAS,6BAA6B;AACtC,SAAS,4BAA4B;AAErC,MAAM,qBAAqE,CAAC,UAAU;AACpF,QAAM,EAAE,kBAAkB,aAAa,cAAc,aAAa,cAAc,IAAI,sBAAsB,KAAK;AAC/G,QAAM,EAAE,SAAS,UAAU,SAAS,MAAM,OAAO,gBAAgB,UAAU,SAAS,IAAI;AAExF,QAAM,CAAC,uBAAuB,wBAAwB,IAAI,SAAkB,KAAK;AACjF,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAiB,CAAC;AAC5C,QAAM,eAAe,OAA8B,IAAI;AACvD,QAAM,eAAe,OAA8B,IAAI;AAEvD,QAAM,aAAa,QAAQ,MAAO,QAAQ,SAAS,SAAS,SAAS,UAAU,UAAW,CAAC,UAAU,OAAO,CAAC;AAE7G,QAAM,cAAiC;AAAA,IACrC,OAAO;AAAA,MACL,MAAM;AAAA,MACN,eAAe;AAAA;AAAA;AAAA,MAGf;AAAA,MACA,IAAI;AAAA,MACJ,iBAAiB;AAAA,MACjB,iBAAiB;AAAA,MACjB,gBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,MACA,GAAI;AAAA,MACJ,MAAM;AAAA,MACN,YAAY;AAAA,MACZ,SAAS;AAAA,IACX;AAAA,IACA,CAAC,SAAS,UAAU,aAAa,eAAe,aAAa,UAAU,KAAK;AAAA,EAC9E;AAEA,kBAAgB,MAAM;AACpB,QAAI,aAAa,SAAS;AACxB,+BAAyB,aAAa,QAAQ,cAAc,UAAU;AAAA,IACxE;AAAA,EACF,GAAG,CAAC,cAAc,YAAY,OAAO,CAAC;AAEtC,kBAAgB,MAAM;AACpB,QAAI,aAAa,SAAS;AACxB,eAAS,aAAa,QAAQ,WAAW;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC,YAAY,CAAC;AAEjB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAY;AAAA,MACX,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MAEA,8BAAC,wBAAqB,UACpB,+BAAC,gBAAc,GAAG,aAChB;AAAA,4BAAC,eAAY,SAAkB,MAAY,OACzC,+BAAC,wBAAqB,SAAkB,MAAY,UAAoB,UACtE;AAAA,8BAAC,gBAAa,SAAkB,MAAY,UAAoB,UAAoB;AAAA,UACpF;AAAA,YAAC;AAAA;AAAA,cACC,UAAU;AAAA,cACV;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cAEC,oBAAU,UAAU;AAAA;AAAA,UACvB;AAAA,WACF,GACF;AAAA,QACA,oBAAC,iBAAc,MAAY,UAAU,cAAc,eAAY,QAC5D,sBACH;AAAA,SACF,GACF;AAAA;AAAA,EACF;AAEJ;AAEA,mBAAmB,cAAc;AACjC,MAAM,+BAA+B,SAAS,kBAAkB;AAChE,6BAA6B,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useMemo, useRef, useLayoutEffect } from 'react';\nimport type { DSButtonV2T } from '@elliemae/ds-button-v2';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { DSControlledTogglePropTypesSchema, type DSControlledToggleT } from './react-desc-prop-types.js';\nimport {\n  StyledContainer,\n  StyledButton,\n  StyledLabel,\n  StyledVisibleContent,\n  StyledCircle,\n  StyledText,\n  SetLabelWidth,\n} from './styles.js';\nimport { DSFormToggleName } from './DSFormToggleDefinitions.js';\nimport { useDSControlledToggle } from './config/useDSControlledToggle.js';\nimport { AddTooltipOnReadOnly } from './parts/AddTooltipOnReadOnly.js';\n\nconst DSControlledToggle: React.ComponentType<DSControlledToggleT.Props> = (props) => {\n  const { propsWithDefault, globalProps, xstyledProps, instanceUid, handleOnClick } = useDSControlledToggle(props);\n  const { labelOn, labelOff, checked, size, value, containerProps, disabled, applyAriaDisabled, readOnly } =\n    propsWithDefault;\n\n  const [isLongerTextRendering, setIsLongerTextRendering] = useState<boolean>(false);\n  const [width, setWidth] = useState<number>(0);\n  const labelTextRef = useRef<HTMLDivElement | null>(null);\n  const widthTextRef = useRef<HTMLDivElement | null>(null);\n\n  const longerText = useMemo(() => (labelOn.length > labelOff.length ? labelOn : labelOff), [labelOff, labelOn]);\n\n  const ButtonProps: DSButtonV2T.Props = useMemo(\n    () => ({\n      role: 'switch',\n      'data-testid': 'ds-controlled-toggle-checkbox',\n      // removing 'value' could be a breaking change in scenarios where the form is submitted and the value is used...\n      // check https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#value\n      value,\n      id: instanceUid,\n      'aria-readonly': readOnly,\n      'aria-disabled': disabled || applyAriaDisabled,\n      'aria-checked': checked,\n      readOnly,\n      disabled,\n      ...(globalProps as unknown as DSButtonV2T.Props),\n      type: 'button',\n      buttonType: 'raw',\n      onClick: handleOnClick,\n    }),\n    [checked, disabled, globalProps, handleOnClick, instanceUid, readOnly, value, applyAriaDisabled],\n  );\n\n  useLayoutEffect(() => {\n    if (labelTextRef.current) {\n      setIsLongerTextRendering(labelTextRef.current.innerText === longerText);\n    }\n  }, [labelTextRef, longerText, checked]);\n\n  useLayoutEffect(() => {\n    if (widthTextRef.current) {\n      setWidth(widthTextRef.current.clientWidth);\n    }\n  }, [widthTextRef]);\n\n  return (\n    <StyledContainer\n      size={size}\n      data-testid=\"ds-controlled-toggle\"\n      {...containerProps}\n      {...xstyledProps}\n      disabled={disabled}\n    >\n      <AddTooltipOnReadOnly readOnly={readOnly}>\n        <StyledButton {...ButtonProps}>\n          <StyledLabel checked={checked} size={size} width={width}>\n            <StyledVisibleContent\n              checked={checked}\n              size={size}\n              readOnly={readOnly}\n              disabled={disabled}\n              applyAriaDisabled={applyAriaDisabled}\n            >\n              <StyledCircle checked={checked} size={size} readOnly={readOnly} disabled={disabled} />\n              <StyledText\n                innerRef={labelTextRef}\n                isLongerTextRendering={isLongerTextRendering}\n                checked={checked}\n                size={size}\n                disabled={disabled}\n                applyAriaDisabled={applyAriaDisabled}\n              >\n                {checked ? labelOn : labelOff}\n              </StyledText>\n            </StyledVisibleContent>\n          </StyledLabel>\n          <SetLabelWidth size={size} innerRef={widthTextRef} aria-hidden=\"true\">\n            {longerText}\n          </SetLabelWidth>\n        </StyledButton>\n      </AddTooltipOnReadOnly>\n    </StyledContainer>\n  );\n};\n\nDSControlledToggle.displayName = DSFormToggleName;\nconst DSControlledToggleWithSchema = describe(DSControlledToggle);\nDSControlledToggleWithSchema.propTypes = DSControlledTogglePropTypesSchema;\n\nexport { DSControlledToggle, DSControlledToggleWithSchema };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACyEX,SAOE,KAPF;AAzEZ,SAAgB,UAAU,SAAS,QAAQ,uBAAuB;AAElE,SAAS,gBAAgB;AACzB,SAAS,yCAAmE;AAC5E;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,wBAAwB;AACjC,SAAS,6BAA6B;AACtC,SAAS,4BAA4B;AAErC,MAAM,qBAAqE,CAAC,UAAU;AACpF,QAAM,EAAE,kBAAkB,aAAa,cAAc,aAAa,cAAc,IAAI,sBAAsB,KAAK;AAC/G,QAAM,EAAE,SAAS,UAAU,SAAS,MAAM,OAAO,gBAAgB,UAAU,mBAAmB,SAAS,IACrG;AAEF,QAAM,CAAC,uBAAuB,wBAAwB,IAAI,SAAkB,KAAK;AACjF,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAiB,CAAC;AAC5C,QAAM,eAAe,OAA8B,IAAI;AACvD,QAAM,eAAe,OAA8B,IAAI;AAEvD,QAAM,aAAa,QAAQ,MAAO,QAAQ,SAAS,SAAS,SAAS,UAAU,UAAW,CAAC,UAAU,OAAO,CAAC;AAE7G,QAAM,cAAiC;AAAA,IACrC,OAAO;AAAA,MACL,MAAM;AAAA,MACN,eAAe;AAAA;AAAA;AAAA,MAGf;AAAA,MACA,IAAI;AAAA,MACJ,iBAAiB;AAAA,MACjB,iBAAiB,YAAY;AAAA,MAC7B,gBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,MACA,GAAI;AAAA,MACJ,MAAM;AAAA,MACN,YAAY;AAAA,MACZ,SAAS;AAAA,IACX;AAAA,IACA,CAAC,SAAS,UAAU,aAAa,eAAe,aAAa,UAAU,OAAO,iBAAiB;AAAA,EACjG;AAEA,kBAAgB,MAAM;AACpB,QAAI,aAAa,SAAS;AACxB,+BAAyB,aAAa,QAAQ,cAAc,UAAU;AAAA,IACxE;AAAA,EACF,GAAG,CAAC,cAAc,YAAY,OAAO,CAAC;AAEtC,kBAAgB,MAAM;AACpB,QAAI,aAAa,SAAS;AACxB,eAAS,aAAa,QAAQ,WAAW;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC,YAAY,CAAC;AAEjB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAY;AAAA,MACX,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MAEA,8BAAC,wBAAqB,UACpB,+BAAC,gBAAc,GAAG,aAChB;AAAA,4BAAC,eAAY,SAAkB,MAAY,OACzC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YAEA;AAAA,kCAAC,gBAAa,SAAkB,MAAY,UAAoB,UAAoB;AAAA,cACpF;AAAA,gBAAC;AAAA;AAAA,kBACC,UAAU;AAAA,kBACV;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBAEC,oBAAU,UAAU;AAAA;AAAA,cACvB;AAAA;AAAA;AAAA,QACF,GACF;AAAA,QACA,oBAAC,iBAAc,MAAY,UAAU,cAAc,eAAY,QAC5D,sBACH;AAAA,SACF,GACF;AAAA;AAAA,EACF;AAEJ;AAEA,mBAAmB,cAAc;AACjC,MAAM,+BAA+B,SAAS,kBAAkB;AAChE,6BAA6B,YAAY;",
   "names": []
 }

package/dist/esm/config/useDSControlledToggle.js

@@ -7,15 +7,15 @@ import { useValidateProps } from "./useValidateProps.js";
 const useDSControlledToggle = (propsFromUser) => {
   const propsWithDefault = useMemoMergePropsWithDefault(propsFromUser, defaultProps);
   useValidateProps(propsWithDefault, DSControlledTogglePropTypes);
-  const { disabled, readOnly, onChange } = propsWithDefault;
+  const { disabled, applyAriaDisabled, readOnly, onChange } = propsWithDefault;
   const handleOnClick = useCallback(
     (e) => {
-      if (disabled || readOnly) return;
+      if (disabled || applyAriaDisabled || readOnly) return;
       if (onChange) {
         onChange(e);
       }
     },
-    [disabled, readOnly, onChange]
+    [disabled, applyAriaDisabled, readOnly, onChange]
   );
   const globalProps = useGetGlobalAttributes(propsWithDefault, {
     onClick: handleOnClick

package/dist/esm/config/useDSControlledToggle.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useDSControlledToggle.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport { type DSControlledToggleT, DSControlledTogglePropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nexport interface DSControlledToggleCTX {\n  propsWithDefault: DSControlledToggleT.InternalProps;\n  globalProps: ReturnType<typeof useGetGlobalAttributes>;\n  xstyledProps: ReturnType<typeof useGetXstyledProps>;\n  instanceUid: string;\n}\n\nexport const useDSControlledToggle = (propsFromUser: DSControlledToggleT.Props) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSControlledToggleT.InternalProps>(propsFromUser, defaultProps);\n  useValidateProps(propsWithDefault, DSControlledTogglePropTypes);\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  const { disabled, readOnly, onChange } = propsWithDefault;\n  const handleOnClick = useCallback(\n    (e: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n      if (disabled || readOnly) return;\n      if (onChange) {\n        onChange(e);\n      }\n    },\n    [disabled, readOnly, onChange],\n  );\n  // =============================================================================\n  // GLOBAL ATTRIBUTES & XSTYLED PROPS\n  // =============================================================================\n  const globalProps = useGetGlobalAttributes<DSControlledToggleT.InternalProps>(propsWithDefault, {\n    onClick: handleOnClick,\n  });\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n  const { id } = propsWithDefault;\n  const instanceUid = React.useMemo(() => id || uid(5), [id]);\n  // =============================================================================\n  // HELPERS HOOKS CONFIGS\n  // =============================================================================\n  // const eventHandlers = useEventHandlers({ propsWithDefault, instanceUid }); // <-- complex logic should be made atomics this way\n\n  return React.useMemo(\n    () => ({\n      propsWithDefault,\n      globalProps,\n      xstyledProps,\n      instanceUid,\n      handleOnClick,\n    }),\n    [propsWithDefault, globalProps, xstyledProps, instanceUid, handleOnClick],\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,UAAS,mBAAmB;AACnC,SAAS,wBAAwB,oBAAoB,oCAAoC;AACzF,SAAS,WAAW;AACpB,SAAmC,6BAA6B,oBAAoB;AACpF,SAAS,wBAAwB;AAS1B,MAAM,wBAAwB,CAAC,kBAA6C;AAIjF,QAAM,mBAAmB,6BAAgE,eAAe,YAAY;AACpH,mBAAiB,kBAAkB,2BAA2B;AAI9D,QAAM,EAAE,UAAU,UAAU,SAAS,IAAI;AACzC,QAAM,gBAAgB;AAAA,IACpB,CAAC,MAAgG;AAC/F,UAAI,YAAY,SAAU;AAC1B,UAAI,UAAU;AACZ,iBAAS,CAAC;AAAA,MACZ;AAAA,IACF;AAAA,IACA,CAAC,UAAU,UAAU,QAAQ;AAAA,EAC/B;AAIA,QAAM,cAAc,uBAA0D,kBAAkB;AAAA,IAC9F,SAAS;AAAA,EACX,CAAC;AACD,QAAM,eAAe,mBAAmB,gBAAgB;AACxD,QAAM,EAAE,GAAG,IAAI;AACf,QAAM,cAAcA,OAAM,QAAQ,MAAM,MAAM,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;AAM1D,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,aAAa,cAAc,aAAa,aAAa;AAAA,EAC1E;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport { type DSControlledToggleT, DSControlledTogglePropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nexport interface DSControlledToggleCTX {\n  propsWithDefault: DSControlledToggleT.InternalProps;\n  globalProps: ReturnType<typeof useGetGlobalAttributes>;\n  xstyledProps: ReturnType<typeof useGetXstyledProps>;\n  instanceUid: string;\n}\n\nexport const useDSControlledToggle = (propsFromUser: DSControlledToggleT.Props) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSControlledToggleT.InternalProps>(propsFromUser, defaultProps);\n  useValidateProps(propsWithDefault, DSControlledTogglePropTypes);\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  const { disabled, applyAriaDisabled, readOnly, onChange } = propsWithDefault;\n  const handleOnClick = useCallback(\n    (e: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n      if (disabled || applyAriaDisabled || readOnly) return;\n      if (onChange) {\n        onChange(e);\n      }\n    },\n    [disabled, applyAriaDisabled, readOnly, onChange],\n  );\n  // =============================================================================\n  // GLOBAL ATTRIBUTES & XSTYLED PROPS\n  // =============================================================================\n  const globalProps = useGetGlobalAttributes<DSControlledToggleT.InternalProps>(propsWithDefault, {\n    onClick: handleOnClick,\n  });\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n  const { id } = propsWithDefault;\n  const instanceUid = React.useMemo(() => id || uid(5), [id]);\n  // =============================================================================\n  // HELPERS HOOKS CONFIGS\n  // =============================================================================\n  // const eventHandlers = useEventHandlers({ propsWithDefault, instanceUid }); // <-- complex logic should be made atomics this way\n\n  return React.useMemo(\n    () => ({\n      propsWithDefault,\n      globalProps,\n      xstyledProps,\n      instanceUid,\n      handleOnClick,\n    }),\n    [propsWithDefault, globalProps, xstyledProps, instanceUid, handleOnClick],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,UAAS,mBAAmB;AACnC,SAAS,wBAAwB,oBAAoB,oCAAoC;AACzF,SAAS,WAAW;AACpB,SAAmC,6BAA6B,oBAAoB;AACpF,SAAS,wBAAwB;AAS1B,MAAM,wBAAwB,CAAC,kBAA6C;AAIjF,QAAM,mBAAmB,6BAAgE,eAAe,YAAY;AACpH,mBAAiB,kBAAkB,2BAA2B;AAI9D,QAAM,EAAE,UAAU,mBAAmB,UAAU,SAAS,IAAI;AAC5D,QAAM,gBAAgB;AAAA,IACpB,CAAC,MAAgG;AAC/F,UAAI,YAAY,qBAAqB,SAAU;AAC/C,UAAI,UAAU;AACZ,iBAAS,CAAC;AAAA,MACZ;AAAA,IACF;AAAA,IACA,CAAC,UAAU,mBAAmB,UAAU,QAAQ;AAAA,EAClD;AAIA,QAAM,cAAc,uBAA0D,kBAAkB;AAAA,IAC9F,SAAS;AAAA,EACX,CAAC;AACD,QAAM,eAAe,mBAAmB,gBAAgB;AACxD,QAAM,EAAE,GAAG,IAAI;AACf,QAAM,cAAcA,OAAM,QAAQ,MAAM,MAAM,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;AAM1D,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,aAAa,cAAc,aAAa,aAAa;AAAA,EAC1E;AACF;",
   "names": ["React"]
 }

package/dist/esm/config/useValidateProps.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useValidateProps.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { WeakValidationMap } from 'react';\nimport { type DSControlledToggleT } from '../react-desc-prop-types.js';\nimport { DSControlledToggleName } from '../constants/index.js';\n\nexport const useValidateProps = (\n  props: DSControlledToggleT.InternalProps,\n  propTypes: WeakValidationMap<unknown>,\n): void => {\n  // we validate the \"required if\" via 'isRequiredIf from our custom PropTypes\n  useValidateTypescriptPropTypes(props, propTypes, DSControlledToggleName);\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,sCAAsC;AAG/C,SAAS,8BAA8B;AAEhC,MAAM,mBAAmB,CAC9B,OACA,cACS;AAET,iCAA+B,OAAO,WAAW,sBAAsB;AACzE;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useValidateTypescriptPropTypes, type ValidationMap } from '@elliemae/ds-props-helpers';\nimport { type DSControlledToggleT } from '../react-desc-prop-types.js';\nimport { DSControlledToggleName } from '../constants/index.js';\n\nexport const useValidateProps = (props: DSControlledToggleT.InternalProps, propTypes: ValidationMap<unknown>): void => {\n  // we validate the \"required if\" via 'isRequiredIf from our custom PropTypes\n  useValidateTypescriptPropTypes(props, propTypes, DSControlledToggleName);\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,sCAA0D;AAEnE,SAAS,8BAA8B;AAEhC,MAAM,mBAAmB,CAAC,OAA0C,cAA4C;AAErH,iCAA+B,OAAO,WAAW,sBAAsB;AACzE;",
   "names": []
 }

package/dist/esm/parts/AddTooltipOnReadOnly.js

@@ -1,12 +1,9 @@
 import * as React from "react";
-import { Fragment, jsx } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { DSTooltipV3 } from "@elliemae/ds-tooltip";
-const AddTooltipOnReadOnly = ({
-  readOnly,
-  children
-}) => {
+const AddTooltipOnReadOnly = ({ readOnly, children }) => {
   if (readOnly) return /* @__PURE__ */ jsx(DSTooltipV3, { text: "Read Only", children });
-  return /* @__PURE__ */ jsx(Fragment, { children });
+  return children;
 };
 export {
   AddTooltipOnReadOnly

package/dist/esm/parts/AddTooltipOnReadOnly.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/AddTooltipOnReadOnly.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\n\nexport const AddTooltipOnReadOnly = ({\n  readOnly,\n  children,\n}: {\n  readOnly: boolean;\n  children: React.ReactNode;\n}): JSX.Element => {\n  if (readOnly) return <DSTooltipV3 text=\"Read Only\">{children}</DSTooltipV3>;\n  return <>{children}</>;\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACUA,SACd,UADc;AATvB,SAAS,mBAAmB;AAErB,MAAM,uBAAuB,CAAC;AAAA,EACnC;AAAA,EACA;AACF,MAGmB;AACjB,MAAI,SAAU,QAAO,oBAAC,eAAY,MAAK,aAAa,UAAS;AAC7D,SAAO,gCAAG,UAAS;AACrB;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\n\nexport const AddTooltipOnReadOnly = ({ readOnly, children }: { readOnly: boolean; children: React.ReactNode }) => {\n  if (readOnly) return <DSTooltipV3 text=\"Read Only\">{children}</DSTooltipV3>;\n  return children;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACIA;AAHvB,SAAS,mBAAmB;AAErB,MAAM,uBAAuB,CAAC,EAAE,UAAU,SAAS,MAAwD;AAChH,MAAI,SAAU,QAAO,oBAAC,eAAY,MAAK,aAAa,UAAS;AAC7D,SAAO;AACT;",
   "names": []
 }

package/dist/esm/react-desc-prop-types.js

@@ -9,7 +9,8 @@ const defaultProps = {
   onChange: () => null,
   size: "m",
   readOnly: false,
-  disabled: false
+  disabled: false,
+  applyAriaDisabled: false
 };
 const DSControlledTogglePropTypes = {
   ...globalAttributesPropTypes,
@@ -23,6 +24,9 @@ const DSControlledTogglePropTypes = {
   size: PropTypes.oneOf(["s", "m", "l"]).description("Size of toggle"),
   readOnly: PropTypes.bool.description("Wether the toggle is readOnly or not"),
   disabled: PropTypes.bool.description("Wether the toggle is disabled or not"),
+  applyAriaDisabled: PropTypes.bool.description(
+    "Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION."
+  ).defaultValue(false),
   containerProps: PropTypes.shape({}).description("Set of properties attached to the main container"),
   id: PropTypes.string.description("Unique id.")
 };

package/dist/esm/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\n\nexport declare namespace DSControlledToggleT {\n  export type ToggleSize = 's' | 'm' | 'l';\n\n  export interface OptionalProps {\n    containerProps: Record<string, unknown>;\n    id: string;\n  }\n\n  export interface DefaultProps {\n    labelOn: string;\n    labelOff: string;\n    name: string;\n    value: string;\n    checked: boolean;\n    onChange: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;\n    size: ToggleSize;\n    readOnly: boolean;\n    disabled: boolean;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>,\n      XstyledProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>,\n      XstyledProps {}\n}\n\nexport const defaultProps: DSControlledToggleT.DefaultProps = {\n  labelOn: 'ON',\n  labelOff: 'OFF',\n  name: '',\n  value: '',\n  checked: false,\n  onChange: () => null,\n  size: 'm',\n  readOnly: false,\n  disabled: false,\n};\n\nexport const DSControlledTogglePropTypes: DSPropTypesSchema<DSControlledToggleT.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  labelOn: PropTypes.string.description('Label when toggle is checked'),\n  labelOff: PropTypes.string.description('Label when toggle is unchecked'),\n  value: PropTypes.string.description('Value attribute for toggle'),\n  name: PropTypes.string.description('Name attribute for toggle'),\n  checked: PropTypes.bool.description('Wether the toggle is checked or not'),\n  onChange: PropTypes.func.description('OnClick callback'),\n  size: PropTypes.oneOf(['s', 'm', 'l']).description('Size of toggle'),\n  readOnly: PropTypes.bool.description('Wether the toggle is readOnly or not'),\n  disabled: PropTypes.bool.description('Wether the toggle is disabled or not'),\n  containerProps: PropTypes.shape({}).description('Set of properties attached to the main container'),\n  id: PropTypes.string.description('Unique id.'),\n};\n\nexport const DSControlledTogglePropTypesSchema =\n  DSControlledTogglePropTypes as unknown as WeakValidationMap<DSControlledToggleT.Props>;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,WAAW,2BAA2B,wBAAwB;AAmChE,MAAM,eAAiD;AAAA,EAC5D,SAAS;AAAA,EACT,UAAU;AAAA,EACV,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,UAAU,MAAM;AAAA,EAChB,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU;AACZ;AAEO,MAAM,8BAA4E;AAAA,EACvF,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS,UAAU,OAAO,YAAY,8BAA8B;AAAA,EACpE,UAAU,UAAU,OAAO,YAAY,gCAAgC;AAAA,EACvE,OAAO,UAAU,OAAO,YAAY,4BAA4B;AAAA,EAChE,MAAM,UAAU,OAAO,YAAY,2BAA2B;AAAA,EAC9D,SAAS,UAAU,KAAK,YAAY,qCAAqC;AAAA,EACzE,UAAU,UAAU,KAAK,YAAY,kBAAkB;AAAA,EACvD,MAAM,UAAU,MAAM,CAAC,KAAK,KAAK,GAAG,CAAC,EAAE,YAAY,gBAAgB;AAAA,EACnE,UAAU,UAAU,KAAK,YAAY,sCAAsC;AAAA,EAC3E,UAAU,UAAU,KAAK,YAAY,sCAAsC;AAAA,EAC3E,gBAAgB,UAAU,MAAM,CAAC,CAAC,EAAE,YAAY,kDAAkD;AAAA,EAClG,IAAI,UAAU,OAAO,YAAY,YAAY;AAC/C;AAEO,MAAM,oCACX;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { GlobalAttributesT, XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\n\nexport declare namespace DSControlledToggleT {\n  export type ToggleSize = 's' | 'm' | 'l';\n\n  export interface OptionalProps {\n    containerProps: Record<string, unknown>;\n    id: string;\n  }\n\n  export interface DefaultProps {\n    labelOn: string;\n    labelOff: string;\n    name: string;\n    value: string;\n    checked: boolean;\n    onChange: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;\n    size: ToggleSize;\n    readOnly: boolean;\n    disabled: boolean;\n    applyAriaDisabled: boolean;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>,\n      XstyledProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>,\n      XstyledProps {}\n}\n\nexport const defaultProps: DSControlledToggleT.DefaultProps = {\n  labelOn: 'ON',\n  labelOff: 'OFF',\n  name: '',\n  value: '',\n  checked: false,\n  onChange: () => null,\n  size: 'm',\n  readOnly: false,\n  disabled: false,\n  applyAriaDisabled: false,\n};\n\nexport const DSControlledTogglePropTypes: DSPropTypesSchema<DSControlledToggleT.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  labelOn: PropTypes.string.description('Label when toggle is checked'),\n  labelOff: PropTypes.string.description('Label when toggle is unchecked'),\n  value: PropTypes.string.description('Value attribute for toggle'),\n  name: PropTypes.string.description('Name attribute for toggle'),\n  checked: PropTypes.bool.description('Wether the toggle is checked or not'),\n  onChange: PropTypes.func.description('OnClick callback'),\n  size: PropTypes.oneOf(['s', 'm', 'l']).description('Size of toggle'),\n  readOnly: PropTypes.bool.description('Wether the toggle is readOnly or not'),\n  disabled: PropTypes.bool.description('Wether the toggle is disabled or not'),\n  applyAriaDisabled: PropTypes.bool\n    .description(\n      'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n    )\n    .defaultValue(false),\n  containerProps: PropTypes.shape({}).description('Set of properties attached to the main container'),\n  id: PropTypes.string.description('Unique id.'),\n};\n\nexport const DSControlledTogglePropTypesSchema =\n  DSControlledTogglePropTypes as unknown as ValidationMap<DSControlledToggleT.Props>;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,WAAW,2BAA2B,wBAAwB;AAoChE,MAAM,eAAiD;AAAA,EAC5D,SAAS;AAAA,EACT,UAAU;AAAA,EACV,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,UAAU,MAAM;AAAA,EAChB,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU;AAAA,EACV,mBAAmB;AACrB;AAEO,MAAM,8BAA4E;AAAA,EACvF,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS,UAAU,OAAO,YAAY,8BAA8B;AAAA,EACpE,UAAU,UAAU,OAAO,YAAY,gCAAgC;AAAA,EACvE,OAAO,UAAU,OAAO,YAAY,4BAA4B;AAAA,EAChE,MAAM,UAAU,OAAO,YAAY,2BAA2B;AAAA,EAC9D,SAAS,UAAU,KAAK,YAAY,qCAAqC;AAAA,EACzE,UAAU,UAAU,KAAK,YAAY,kBAAkB;AAAA,EACvD,MAAM,UAAU,MAAM,CAAC,KAAK,KAAK,GAAG,CAAC,EAAE,YAAY,gBAAgB;AAAA,EACnE,UAAU,UAAU,KAAK,YAAY,sCAAsC;AAAA,EAC3E,UAAU,UAAU,KAAK,YAAY,sCAAsC;AAAA,EAC3E,mBAAmB,UAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AAAA,EACrB,gBAAgB,UAAU,MAAM,CAAC,CAAC,EAAE,YAAY,kDAAkD;AAAA,EAClG,IAAI,UAAU,OAAO,YAAY,YAAY;AAC/C;AAEO,MAAM,oCACX;",
   "names": []
 }

package/dist/esm/styles.js

@@ -29,12 +29,12 @@ const focusBorders = css`
 const hoverStyled = css`
   background-color: ${({ checked, theme }) => {
   if (checked) return theme.colors.brand["800"];
-  else return theme.colors.neutral["600"];
+  return theme.colors.neutral["600"];
 }};
 
   border-color: ${({ checked, theme }) => {
   if (checked) return theme.colors.brand["800"];
-  else return theme.colors.neutral["700"];
+  return theme.colors.neutral["700"];
 }};
 `;
 const StyledContainer = styled("div")`
@@ -72,8 +72,8 @@ const StyledVisibleContent = styled("div")`
   transition: background-color 0.2s;
   background-color: ${getInterpolatedBgDsToggleColorByProps};
   &:hover {
-    cursor: ${({ disabled, readOnly }) => handleCursors(disabled, readOnly)};
-    ${({ disabled, readOnly }) => !disabled && !readOnly && hoverStyled}
+    cursor: ${({ disabled, applyAriaDisabled, readOnly }) => handleCursors(disabled, applyAriaDisabled, readOnly)};
+    ${({ disabled, applyAriaDisabled, readOnly }) => !disabled && !applyAriaDisabled && !readOnly && hoverStyled}
   }
 `;
 const StyledCircle = styled.div`
@@ -90,7 +90,7 @@ const StyledText = styled.div`
   justify-content: ${({ isLongerTextRendering }) => isLongerTextRendering ? "flex-start" : "center"};
   font-size: ${({ theme, size }) => handleFontSize(size, theme)};
   font-weight: ${({ theme }) => theme.fontWeights.semibold};
-  color: ${({ theme, disabled }) => disabled ? "#5c6574" : theme.colors.neutral["000"]};
+  color: ${({ theme, disabled, applyAriaDisabled }) => disabled || applyAriaDisabled ? "#5c6574" : theme.colors.neutral["000"]};
   ${({ isLongerTextRendering, checked }) => isLongerTextRendering && checked ? `margin-left: 6px;` : void 0}
   ${({ isLongerTextRendering, checked }) => isLongerTextRendering && !checked ? `margin-left: 4px;` : void 0}
 `;

package/dist/esm/styles.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport type { DSControlledToggleT } from './react-desc-prop-types.js';\nimport {\n  containerHeight,\n  borderRadius,\n  labelHeight,\n  getInterpolatedBorderDsToggleColorByProps,\n  getInterpolatedBgDsToggleColorByProps,\n  circleValues,\n  handleFontSize,\n  margin,\n  handleCursors,\n} from './utils/styleHelpers.js';\n\ninterface StyledContainerT {\n  size: DSControlledToggleT.ToggleSize;\n  disabled: boolean;\n}\ninterface StyledLabelT {\n  width: number;\n  size: DSControlledToggleT.ToggleSize;\n  checked: boolean;\n}\ninterface StyledVisibleContentT {\n  checked: boolean;\n  size: DSControlledToggleT.ToggleSize;\n  disabled: boolean;\n  readOnly: boolean;\n  as: 'p' | 'label';\n  htmlFor: string;\n}\ninterface StyledCircleT {\n  size: DSControlledToggleT.ToggleSize;\n  readOnly: boolean;\n  checked: boolean;\n  disabled: boolean;\n}\ninterface StyledTextT {\n  isLongerTextRendering: boolean;\n  size: DSControlledToggleT.ToggleSize;\n  checked: boolean;\n  disabled: boolean;\n}\ninterface SetLabelWidthT {\n  size: DSControlledToggleT.ToggleSize;\n}\n\nconst focusBorders = css`\n  &:focus-within {\n    &:after {\n      content: '';\n      top: -3px;\n      right: -3px;\n      bottom: -3px;\n      left: -3px;\n      border: 2px solid ${({ theme }) => theme.colors.brand['700']};\n      border-radius: 20px;\n      position: absolute;\n    }\n  }\n`;\n\nconst hoverStyled = css<{ checked: boolean }>`\n  background-color: ${({ checked, theme }) => {\n    if (checked) return theme.colors.brand['800'];\n    else return theme.colors.neutral['600'];\n  }};\n\n  border-color: ${({ checked, theme }) => {\n    if (checked) return theme.colors.brand['800'];\n    else return theme.colors.neutral['700'];\n  }};\n`;\n\nexport const StyledContainer = styled('div')<StyledContainerT>`\n  display: inline-flex;\n  width: fit-content;\n  justify-content: center;\n  align-items: center;\n  height: ${({ size }) => containerHeight[size]};\n  border-radius: ${({ size }) => borderRadius[size]};\n  outline: none;\n  position: relative;\n  z-index: 0;\n  border: 2px solid transparent;\n  ${({ disabled }) => !disabled && focusBorders};\n  ${xStyledCommonProps}\n`;\n\nexport const StyledLabel = styled('div')<StyledLabelT>`\n  width: ${({ width, size }) => (width ? `calc(${width}px + ${margin[size]})` : 'auto')};\n  height: ${({ size }) => labelHeight[size]};\n  z-index: 2;\n  outline: none;\n  border-radius: ${({ size }) => labelHeight[size]};\n`;\n\nexport const StyledVisibleContent = styled('div')<StyledVisibleContentT>`\n  display: flex;\n  margin: 0;\n  padding: 0;\n  align-items: center;\n  height: 100%;\n  flex-direction: ${({ checked }) => (checked ? 'row-reverse' : 'row')};\n  border-radius: ${({ size }) => `calc(${labelHeight[size]} - 4px)`};\n  border: ${(props) =>\n    props.size === 's'\n      ? `1px solid ${getInterpolatedBorderDsToggleColorByProps(props)}`\n      : `\n    2px solid ${getInterpolatedBorderDsToggleColorByProps(props)}\n    `};\n  transition: background-color 0.2s;\n  background-color: ${getInterpolatedBgDsToggleColorByProps};\n  &:hover {\n    cursor: ${({ disabled, readOnly }) => handleCursors(disabled, readOnly)};\n    ${({ disabled, readOnly }) => !disabled && !readOnly && hoverStyled}\n  }\n` as unknown as React.ComponentType<React.ComponentProps<'div'> & Partial<StyledVisibleContentT>>;\n\nexport const StyledCircle = styled.div<StyledCircleT>`\n  height: ${({ size }) => circleValues[size]};\n  width: ${({ size }) => circleValues[size]};\n  border-radius: 50%;\n  background-color: ${({ theme, readOnly }) => (readOnly ? theme.colors.neutral[100] : theme.colors.neutral['000'])};\n`;\n\nexport const StyledText = styled.div<StyledTextT>`\n  display: flex;\n  flex-grow: 1;\n  line-height: ${({ theme, size }) => handleFontSize(size, theme)};\n  align-items: center;\n  justify-content: ${({ isLongerTextRendering }) => (isLongerTextRendering ? 'flex-start' : 'center')};\n  font-size: ${({ theme, size }) => handleFontSize(size, theme)};\n  font-weight: ${({ theme }) => theme.fontWeights.semibold};\n  color: ${({ theme, disabled }) => (disabled ? '#5c6574' : theme.colors.neutral['000'])};\n  ${({ isLongerTextRendering, checked }) => (isLongerTextRendering && checked ? `margin-left: 6px;` : undefined)}\n  ${({ isLongerTextRendering, checked }) => (isLongerTextRendering && !checked ? `margin-left: 4px;` : undefined)}\n`;\n\nexport const StyledButton = styled(DSButtonV2)`\n  margin: 0;\n  padding: 0;\n  z-index: 20;\n  border-radius: 20px;\n`;\n\nexport const SetLabelWidth = styled.div<SetLabelWidthT>`\n  font-size: ${({ theme, size }) => handleFontSize(size, theme)};\n  font-weight: ${({ theme }) => theme.fontWeights.semibold};\n  width: auto;\n  position: absolute;\n  white-space: nowrap;\n  visibility: hidden;\n`;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport type { DSControlledToggleT } from './react-desc-prop-types.js';\nimport {\n  containerHeight,\n  borderRadius,\n  labelHeight,\n  getInterpolatedBorderDsToggleColorByProps,\n  getInterpolatedBgDsToggleColorByProps,\n  circleValues,\n  handleFontSize,\n  margin,\n  handleCursors,\n} from './utils/styleHelpers.js';\n\ninterface StyledContainerT {\n  size: DSControlledToggleT.ToggleSize;\n  disabled: boolean;\n}\ninterface StyledLabelT {\n  width: number;\n  size: DSControlledToggleT.ToggleSize;\n  checked: boolean;\n}\ninterface StyledVisibleContentT {\n  checked: boolean;\n  size: DSControlledToggleT.ToggleSize;\n  disabled: boolean;\n  applyAriaDisabled: boolean;\n  readOnly: boolean;\n  as: 'p' | 'label';\n  htmlFor: string;\n}\ninterface StyledCircleT {\n  size: DSControlledToggleT.ToggleSize;\n  readOnly: boolean;\n  checked: boolean;\n  disabled: boolean;\n}\ninterface StyledTextT {\n  isLongerTextRendering: boolean;\n  size: DSControlledToggleT.ToggleSize;\n  checked: boolean;\n  disabled: boolean;\n  applyAriaDisabled: boolean;\n}\ninterface SetLabelWidthT {\n  size: DSControlledToggleT.ToggleSize;\n}\n\nconst focusBorders = css`\n  &:focus-within {\n    &:after {\n      content: '';\n      top: -3px;\n      right: -3px;\n      bottom: -3px;\n      left: -3px;\n      border: 2px solid ${({ theme }) => theme.colors.brand['700']};\n      border-radius: 20px;\n      position: absolute;\n    }\n  }\n`;\n\nconst hoverStyled = css<{ checked: boolean }>`\n  background-color: ${({ checked, theme }) => {\n    if (checked) return theme.colors.brand['800'];\n    return theme.colors.neutral['600'];\n  }};\n\n  border-color: ${({ checked, theme }) => {\n    if (checked) return theme.colors.brand['800'];\n    return theme.colors.neutral['700'];\n  }};\n`;\n\nexport const StyledContainer = styled('div')<StyledContainerT>`\n  display: inline-flex;\n  width: fit-content;\n  justify-content: center;\n  align-items: center;\n  height: ${({ size }) => containerHeight[size]};\n  border-radius: ${({ size }) => borderRadius[size]};\n  outline: none;\n  position: relative;\n  z-index: 0;\n  border: 2px solid transparent;\n  ${({ disabled }) => !disabled && focusBorders};\n  ${xStyledCommonProps}\n`;\n\nexport const StyledLabel = styled('div')<StyledLabelT>`\n  width: ${({ width, size }) => (width ? `calc(${width}px + ${margin[size]})` : 'auto')};\n  height: ${({ size }) => labelHeight[size]};\n  z-index: 2;\n  outline: none;\n  border-radius: ${({ size }) => labelHeight[size]};\n`;\n\nexport const StyledVisibleContent = styled('div')<StyledVisibleContentT>`\n  display: flex;\n  margin: 0;\n  padding: 0;\n  align-items: center;\n  height: 100%;\n  flex-direction: ${({ checked }) => (checked ? 'row-reverse' : 'row')};\n  border-radius: ${({ size }) => `calc(${labelHeight[size]} - 4px)`};\n  border: ${(props) =>\n    props.size === 's'\n      ? `1px solid ${getInterpolatedBorderDsToggleColorByProps(props)}`\n      : `\n    2px solid ${getInterpolatedBorderDsToggleColorByProps(props)}\n    `};\n  transition: background-color 0.2s;\n  background-color: ${getInterpolatedBgDsToggleColorByProps};\n  &:hover {\n    cursor: ${({ disabled, applyAriaDisabled, readOnly }) => handleCursors(disabled, applyAriaDisabled, readOnly)};\n    ${({ disabled, applyAriaDisabled, readOnly }) => !disabled && !applyAriaDisabled && !readOnly && hoverStyled}\n  }\n` as unknown as React.ComponentType<React.ComponentProps<'div'> & Partial<StyledVisibleContentT>>;\n\nexport const StyledCircle = styled.div<StyledCircleT>`\n  height: ${({ size }) => circleValues[size]};\n  width: ${({ size }) => circleValues[size]};\n  border-radius: 50%;\n  background-color: ${({ theme, readOnly }) => (readOnly ? theme.colors.neutral[100] : theme.colors.neutral['000'])};\n`;\n\nexport const StyledText = styled.div<StyledTextT>`\n  display: flex;\n  flex-grow: 1;\n  line-height: ${({ theme, size }) => handleFontSize(size, theme)};\n  align-items: center;\n  justify-content: ${({ isLongerTextRendering }) => (isLongerTextRendering ? 'flex-start' : 'center')};\n  font-size: ${({ theme, size }) => handleFontSize(size, theme)};\n  font-weight: ${({ theme }) => theme.fontWeights.semibold};\n  color: ${({ theme, disabled, applyAriaDisabled }) =>\n    disabled || applyAriaDisabled ? '#5c6574' : theme.colors.neutral['000']};\n  ${({ isLongerTextRendering, checked }) => (isLongerTextRendering && checked ? `margin-left: 6px;` : undefined)}\n  ${({ isLongerTextRendering, checked }) => (isLongerTextRendering && !checked ? `margin-left: 4px;` : undefined)}\n`;\n\nexport const StyledButton = styled(DSButtonV2)`\n  margin: 0;\n  padding: 0;\n  z-index: 20;\n  border-radius: 20px;\n`;\n\nexport const SetLabelWidth = styled.div<SetLabelWidthT>`\n  font-size: ${({ theme, size }) => handleFontSize(size, theme)};\n  font-weight: ${({ theme }) => theme.fontWeights.semibold};\n  width: auto;\n  position: absolute;\n  white-space: nowrap;\n  visibility: hidden;\n`;\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/utils/styleHelpers.js

@@ -3,9 +3,11 @@ import { th } from "@elliemae/ds-system";
 const getStyleState = ({
   checked,
   disabled,
+  applyAriaDisabled,
   readOnly
 }) => {
   if (disabled) return "disabled";
+  if (applyAriaDisabled) return "applyAriaDisabled";
   if (readOnly) return "readOnly";
   if (checked) return "checked";
   return "unchecked";
@@ -49,6 +51,7 @@ const handleFontSize = (size, { fontSizes }) => {
 };
 const bgColorsMap = {
   disabled: "neutral-100",
+  applyAriaDisabled: "neutral-100",
   readOnly: "neutral-500",
   checked: "brand-600",
   unchecked: "neutral-500"
@@ -57,14 +60,16 @@ const getInterpolatedBgDSToggleColor = (styleState, props) => th.color(bgColorsM
 const getInterpolatedBgDsToggleColorByProps = (props) => getInterpolatedBgDSToggleColor(getStyleState(props), props);
 const borderColorsMap = {
   disabled: "neutral-300",
+  applyAriaDisabled: "neutral-300",
   readOnly: "neutral-500",
   checked: "brand-700",
   unchecked: "neutral-600"
 };
 const getInterpolatedBorderDSToggleColor = (styleState, props) => th.color(borderColorsMap[styleState])(props);
 const getInterpolatedBorderDsToggleColorByProps = (props) => getInterpolatedBorderDSToggleColor(getStyleState(props), props);
-const handleCursors = (disabled, readOnly) => {
+const handleCursors = (disabled, applyAriaDisabled, readOnly) => {
   if (disabled) return "not-allowed";
+  if (applyAriaDisabled) return "not-allowed";
   if (readOnly) return "default";
   return "pointer";
 };

package/dist/esm/utils/styleHelpers.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/styleHelpers.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { th, type PropsWithTheme } from '@elliemae/ds-system';\nimport type { DSControlledToggleT } from '../react-desc-prop-types.js';\n\ntype StyleStateT = 'disabled' | 'readOnly' | 'checked' | 'unchecked';\n\nconst getStyleState = ({\n  checked,\n  disabled,\n  readOnly,\n}: PropsWithTheme<{\n  checked: boolean;\n  disabled: boolean;\n  readOnly: boolean;\n}>): StyleStateT => {\n  if (disabled) return 'disabled';\n  if (readOnly) return 'readOnly';\n  if (checked) return 'checked';\n  return 'unchecked';\n};\n\nexport const circleValues = {\n  s: '14px',\n  m: '20px',\n  l: '28px',\n};\n\nexport const margin = {\n  s: '26px',\n  m: '34px',\n  l: '42px',\n};\n\nexport const containerHeight = {\n  s: '20px',\n  m: '28px',\n  l: '36px',\n};\n\nexport const labelHeight = {\n  s: '16px',\n  m: '24px',\n  l: '32px',\n};\n\nexport const borderRadius = {\n  s: '16px',\n  m: '20px',\n  l: '22px',\n};\nexport const handleFontSize = (\n  size: DSControlledToggleT.ToggleSize,\n  { fontSizes }: PropsWithTheme['theme'],\n): string => {\n  switch (size) {\n    case 's':\n      return fontSizes.microText[200];\n    case 'm':\n      return '15px';\n    case 'l':\n      return '20px';\n    default:\n      return '15px';\n  }\n};\nconst bgColorsMap = {\n  disabled: 'neutral-100',\n  readOnly: 'neutral-500',\n  checked: 'brand-600',\n  unchecked: 'neutral-500',\n} as const;\nconst getInterpolatedBgDSToggleColor = (styleState: StyleStateT, props: PropsWithTheme) =>\n  th.color(bgColorsMap[styleState])(props);\nexport const getInterpolatedBgDsToggleColorByProps = (\n  props: PropsWithTheme<{\n    checked: boolean;\n    disabled: boolean;\n    readOnly: boolean;\n  }>,\n) => getInterpolatedBgDSToggleColor(getStyleState(props), props);\n\nconst borderColorsMap = {\n  disabled: 'neutral-300',\n  readOnly: 'neutral-500',\n  checked: 'brand-700',\n  unchecked: 'neutral-600',\n} as const;\nconst getInterpolatedBorderDSToggleColor = (styleState: StyleStateT, props: PropsWithTheme) =>\n  th.color(borderColorsMap[styleState])(props);\nexport const getInterpolatedBorderDsToggleColorByProps = (\n  props: PropsWithTheme<{\n    checked: boolean;\n    disabled: boolean;\n    readOnly: boolean;\n  }>,\n) => getInterpolatedBorderDSToggleColor(getStyleState(props), props);\n\nexport const handleCursors = (disabled: boolean, readOnly: boolean): string => {\n  if (disabled) return 'not-allowed';\n  if (readOnly) return 'default';\n  return 'pointer';\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,UAA+B;AAKxC,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AACF,MAIoB;AAClB,MAAI,SAAU,QAAO;AACrB,MAAI,SAAU,QAAO;AACrB,MAAI,QAAS,QAAO;AACpB,SAAO;AACT;AAEO,MAAM,eAAe;AAAA,EAC1B,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,SAAS;AAAA,EACpB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,kBAAkB;AAAA,EAC7B,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,cAAc;AAAA,EACzB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,eAAe;AAAA,EAC1B,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACO,MAAM,iBAAiB,CAC5B,MACA,EAAE,UAAU,MACD;AACX,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,aAAO,UAAU,UAAU,GAAG;AAAA,IAChC,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF;AACA,MAAM,cAAc;AAAA,EAClB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,SAAS;AAAA,EACT,WAAW;AACb;AACA,MAAM,iCAAiC,CAAC,YAAyB,UAC/D,GAAG,MAAM,YAAY,UAAU,CAAC,EAAE,KAAK;AAClC,MAAM,wCAAwC,CACnD,UAKG,+BAA+B,cAAc,KAAK,GAAG,KAAK;AAE/D,MAAM,kBAAkB;AAAA,EACtB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,SAAS;AAAA,EACT,WAAW;AACb;AACA,MAAM,qCAAqC,CAAC,YAAyB,UACnE,GAAG,MAAM,gBAAgB,UAAU,CAAC,EAAE,KAAK;AACtC,MAAM,4CAA4C,CACvD,UAKG,mCAAmC,cAAc,KAAK,GAAG,KAAK;AAE5D,MAAM,gBAAgB,CAAC,UAAmB,aAA8B;AAC7E,MAAI,SAAU,QAAO;AACrB,MAAI,SAAU,QAAO;AACrB,SAAO;AACT;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { th, type PropsWithTheme } from '@elliemae/ds-system';\nimport type { DSControlledToggleT } from '../react-desc-prop-types.js';\n\ntype StyleStateT = 'disabled' | 'applyAriaDisabled' | 'readOnly' | 'checked' | 'unchecked';\n\nconst getStyleState = ({\n  checked,\n  disabled,\n  applyAriaDisabled,\n  readOnly,\n}: PropsWithTheme<{\n  checked: boolean;\n  disabled: boolean;\n  applyAriaDisabled: boolean;\n  readOnly: boolean;\n}>): StyleStateT => {\n  if (disabled) return 'disabled';\n  if (applyAriaDisabled) return 'applyAriaDisabled';\n  if (readOnly) return 'readOnly';\n  if (checked) return 'checked';\n  return 'unchecked';\n};\n\nexport const circleValues = {\n  s: '14px',\n  m: '20px',\n  l: '28px',\n};\n\nexport const margin = {\n  s: '26px',\n  m: '34px',\n  l: '42px',\n};\n\nexport const containerHeight = {\n  s: '20px',\n  m: '28px',\n  l: '36px',\n};\n\nexport const labelHeight = {\n  s: '16px',\n  m: '24px',\n  l: '32px',\n};\n\nexport const borderRadius = {\n  s: '16px',\n  m: '20px',\n  l: '22px',\n};\n\nexport const handleFontSize = (\n  size: DSControlledToggleT.ToggleSize,\n  { fontSizes }: PropsWithTheme['theme'],\n): string => {\n  switch (size) {\n    case 's':\n      return fontSizes.microText[200];\n    case 'm':\n      return '15px';\n    case 'l':\n      return '20px';\n    default:\n      return '15px';\n  }\n};\n\nconst bgColorsMap = {\n  disabled: 'neutral-100',\n  applyAriaDisabled: 'neutral-100',\n  readOnly: 'neutral-500',\n  checked: 'brand-600',\n  unchecked: 'neutral-500',\n} as const;\n\nconst getInterpolatedBgDSToggleColor = (styleState: StyleStateT, props: PropsWithTheme) =>\n  th.color(bgColorsMap[styleState])(props);\n\nexport const getInterpolatedBgDsToggleColorByProps = (\n  props: PropsWithTheme<{\n    checked: boolean;\n    disabled: boolean;\n    applyAriaDisabled: boolean;\n    readOnly: boolean;\n  }>,\n) => getInterpolatedBgDSToggleColor(getStyleState(props), props);\n\nconst borderColorsMap = {\n  disabled: 'neutral-300',\n  applyAriaDisabled: 'neutral-300',\n  readOnly: 'neutral-500',\n  checked: 'brand-700',\n  unchecked: 'neutral-600',\n} as const;\n\nconst getInterpolatedBorderDSToggleColor = (styleState: StyleStateT, props: PropsWithTheme) =>\n  th.color(borderColorsMap[styleState])(props);\n\nexport const getInterpolatedBorderDsToggleColorByProps = (\n  props: PropsWithTheme<{\n    checked: boolean;\n    disabled: boolean;\n    applyAriaDisabled: boolean;\n    readOnly: boolean;\n  }>,\n) => getInterpolatedBorderDSToggleColor(getStyleState(props), props);\n\nexport const handleCursors = (disabled: boolean, applyAriaDisabled: boolean, readOnly: boolean): string => {\n  if (disabled) return 'not-allowed';\n  if (applyAriaDisabled) return 'not-allowed';\n  if (readOnly) return 'default';\n  return 'pointer';\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,UAA+B;AAKxC,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAKoB;AAClB,MAAI,SAAU,QAAO;AACrB,MAAI,kBAAmB,QAAO;AAC9B,MAAI,SAAU,QAAO;AACrB,MAAI,QAAS,QAAO;AACpB,SAAO;AACT;AAEO,MAAM,eAAe;AAAA,EAC1B,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,SAAS;AAAA,EACpB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,kBAAkB;AAAA,EAC7B,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,cAAc;AAAA,EACzB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,eAAe;AAAA,EAC1B,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,iBAAiB,CAC5B,MACA,EAAE,UAAU,MACD;AACX,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,aAAO,UAAU,UAAU,GAAG;AAAA,IAChC,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF;AAEA,MAAM,cAAc;AAAA,EAClB,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,UAAU;AAAA,EACV,SAAS;AAAA,EACT,WAAW;AACb;AAEA,MAAM,iCAAiC,CAAC,YAAyB,UAC/D,GAAG,MAAM,YAAY,UAAU,CAAC,EAAE,KAAK;AAElC,MAAM,wCAAwC,CACnD,UAMG,+BAA+B,cAAc,KAAK,GAAG,KAAK;AAE/D,MAAM,kBAAkB;AAAA,EACtB,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,UAAU;AAAA,EACV,SAAS;AAAA,EACT,WAAW;AACb;AAEA,MAAM,qCAAqC,CAAC,YAAyB,UACnE,GAAG,MAAM,gBAAgB,UAAU,CAAC,EAAE,KAAK;AAEtC,MAAM,4CAA4C,CACvD,UAMG,mCAAmC,cAAc,KAAK,GAAG,KAAK;AAE5D,MAAM,gBAAgB,CAAC,UAAmB,mBAA4B,aAA8B;AACzG,MAAI,SAAU,QAAO;AACrB,MAAI,kBAAmB,QAAO;AAC9B,MAAI,SAAU,QAAO;AACrB,SAAO;AACT;",
   "names": []
 }

package/dist/types/config/useValidateProps.d.ts

@@ -1,3 +1,3 @@
-import type { WeakValidationMap } from 'react';
+import { type ValidationMap } from '@elliemae/ds-props-helpers';
 import { type DSControlledToggleT } from '../react-desc-prop-types.js';
-export declare const useValidateProps: (props: DSControlledToggleT.InternalProps, propTypes: WeakValidationMap<unknown>) => void;
+export declare const useValidateProps: (props: DSControlledToggleT.InternalProps, propTypes: ValidationMap<unknown>) => void;

package/dist/types/parts/AddTooltipOnReadOnly.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare const AddTooltipOnReadOnly: ({ readOnly, children, }: {
+export declare const AddTooltipOnReadOnly: ({ readOnly, children }: {
     readOnly: boolean;
     children: React.ReactNode;
-}) => JSX.Element;
+}) => string | number | boolean | Iterable<React.ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;

package/dist/types/react-desc-prop-types.d.ts

@@ -1,5 +1,5 @@
-import type { WeakValidationMap } from 'react';
-import type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } from '@elliemae/ds-props-helpers';
+/// <reference types="react" />
+import type { GlobalAttributesT, XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';
 export declare namespace DSControlledToggleT {
     type ToggleSize = 's' | 'm' | 'l';
     interface OptionalProps {
@@ -16,6 +16,7 @@ export declare namespace DSControlledToggleT {
         size: ToggleSize;
         readOnly: boolean;
         disabled: boolean;
+        applyAriaDisabled: boolean;
     }
     interface Props extends Partial<DefaultProps>, OptionalProps, Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>, XstyledProps {
     }
@@ -24,4 +25,4 @@ export declare namespace DSControlledToggleT {
 }
 export declare const defaultProps: DSControlledToggleT.DefaultProps;
 export declare const DSControlledTogglePropTypes: DSPropTypesSchema<DSControlledToggleT.Props>;
-export declare const DSControlledTogglePropTypesSchema: WeakValidationMap<DSControlledToggleT.Props>;
+export declare const DSControlledTogglePropTypesSchema: ValidationMap<DSControlledToggleT.Props>;

package/dist/types/styles.d.ts

@@ -13,6 +13,7 @@ interface StyledVisibleContentT {
     checked: boolean;
     size: DSControlledToggleT.ToggleSize;
     disabled: boolean;
+    applyAriaDisabled: boolean;
     readOnly: boolean;
     as: 'p' | 'label';
     htmlFor: string;
@@ -28,6 +29,7 @@ interface StyledTextT {
     size: DSControlledToggleT.ToggleSize;
     checked: boolean;
     disabled: boolean;
+    applyAriaDisabled: boolean;
 }
 interface SetLabelWidthT {
     size: DSControlledToggleT.ToggleSize;

package/dist/types/tests/DSControlledToggle.a11y.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/utils/styleHelpers.d.ts

@@ -29,11 +29,13 @@ export declare const handleFontSize: (size: DSControlledToggleT.ToggleSize, { fo
 export declare const getInterpolatedBgDsToggleColorByProps: (props: PropsWithTheme<{
     checked: boolean;
     disabled: boolean;
+    applyAriaDisabled: boolean;
     readOnly: boolean;
 }>) => string;
 export declare const getInterpolatedBorderDsToggleColorByProps: (props: PropsWithTheme<{
     checked: boolean;
     disabled: boolean;
+    applyAriaDisabled: boolean;
     readOnly: boolean;
 }>) => string;
-export declare const handleCursors: (disabled: boolean, readOnly: boolean) => string;
+export declare const handleCursors: (disabled: boolean, applyAriaDisabled: boolean, readOnly: boolean) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-form-toggle",
-  "version": "3.39.1-rc.0",
+  "version": "3.40.0-rc.0",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Controlled Form Toggle",
   "files": [
@@ -39,16 +39,16 @@
     "lodash": "~4.17.21",
     "styled-components": "~5.3.9",
     "uid": "~2.0.1",
-    "@elliemae/ds-button-v2": "3.39.1-rc.0",
-    "@elliemae/ds-props-helpers": "3.39.1-rc.0",
-    "@elliemae/ds-system": "3.39.1-rc.0",
-    "@elliemae/ds-tooltip": "3.39.1-rc.0"
+    "@elliemae/ds-system": "3.40.0-rc.0",
+    "@elliemae/ds-props-helpers": "3.40.0-rc.0",
+    "@elliemae/ds-tooltip": "3.40.0-rc.0",
+    "@elliemae/ds-button-v2": "3.40.0-rc.0"
   },
   "devDependencies": {
     "@elliemae/pui-cli": "9.0.0-next.50",
     "@elliemae/pui-theme": "~2.9.3",
     "styled-components": "~5.3.9",
-    "@elliemae/ds-monorepo-devops": "3.39.1-rc.0"
+    "@elliemae/ds-monorepo-devops": "3.40.0-rc.0"
   },
   "peerDependencies": {
     "@elliemae/pui-theme": "~2.9.3",