@elliemae/ds-form-toggle 3.57.0-next.2 → 3.57.0-next.21

package/dist/esm/config/useGetButtonProps.js

@@ -0,0 +1,31 @@
+import * as React from "react";
+import { useMemo } from "react";
+import { CONTROLLED_TOGGLE_DATA_TESTID } from "../constants/index.js";
+const useGetButtonProps = (config) => {
+  const { globalProps, instanceUid, handleOnClick, propsWithDefault } = config;
+  const { checked, disabled, applyAriaDisabled, readOnly } = propsWithDefault;
+  const { size: _sizeCleanFromRest, shape: _shapeCleanFromRest, ...restGlobalProps } = globalProps;
+  const buttonProps = useMemo(
+    () => ({
+      role: "switch",
+      "data-testid": CONTROLLED_TOGGLE_DATA_TESTID.TOGGLE_CHECKBOX,
+      id: instanceUid,
+      "aria-readonly": readOnly,
+      "aria-disabled": disabled || applyAriaDisabled || readOnly,
+      "aria-checked": checked,
+      "aria-describedby": `${instanceUid}_feedback_message ${instanceUid}_error_message`,
+      readOnly,
+      disabled,
+      ...restGlobalProps,
+      type: "button",
+      buttonType: "raw",
+      onClick: handleOnClick
+    }),
+    [instanceUid, readOnly, disabled, applyAriaDisabled, checked, restGlobalProps, handleOnClick]
+  );
+  return buttonProps;
+};
+export {
+  useGetButtonProps
+};
+//# sourceMappingURL=useGetButtonProps.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useGetButtonProps.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { GlobalAttributesT } from '@elliemae/ds-props-helpers';\nimport { useMemo } from 'react';\nimport { CONTROLLED_TOGGLE_DATA_TESTID } from '../constants/index.js';\nimport { type DSControlledToggleT } from '../react-desc-prop-types.js';\n\ninterface UseGetButtonPropsConfigT {\n  handleOnClick: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;\n  globalProps: GlobalAttributesT<HTMLButtonElement>;\n  propsWithDefault: DSControlledToggleT.InternalProps;\n  instanceUid: string;\n}\nexport const useGetButtonProps = (config: UseGetButtonPropsConfigT): DSControlledToggleT.ButtonV3InherithedProps => {\n  const { globalProps, instanceUid, handleOnClick, propsWithDefault } = config;\n  const { checked, disabled, applyAriaDisabled, readOnly } = propsWithDefault;\n\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  const { size: _sizeCleanFromRest, shape: _shapeCleanFromRest, ...restGlobalProps } = globalProps;\n  const buttonProps: DSControlledToggleT.ButtonV3InherithedProps = useMemo(\n    () => ({\n      role: 'switch',\n      'data-testid': CONTROLLED_TOGGLE_DATA_TESTID.TOGGLE_CHECKBOX,\n      id: instanceUid,\n      'aria-readonly': readOnly,\n      'aria-disabled': disabled || applyAriaDisabled || readOnly,\n      'aria-checked': checked,\n      'aria-describedby': `${instanceUid}_feedback_message ${instanceUid}_error_message`,\n      readOnly,\n      disabled,\n      ...restGlobalProps,\n      type: 'button',\n      buttonType: 'raw',\n      onClick: handleOnClick,\n    }),\n    [instanceUid, readOnly, disabled, applyAriaDisabled, checked, restGlobalProps, handleOnClick],\n  );\n  return buttonProps;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,eAAe;AACxB,SAAS,qCAAqC;AASvC,MAAM,oBAAoB,CAAC,WAAkF;AAClH,QAAM,EAAE,aAAa,aAAa,eAAe,iBAAiB,IAAI;AACtE,QAAM,EAAE,SAAS,UAAU,mBAAmB,SAAS,IAAI;AAG3D,QAAM,EAAE,MAAM,oBAAoB,OAAO,qBAAqB,GAAG,gBAAgB,IAAI;AACrF,QAAM,cAA2D;AAAA,IAC/D,OAAO;AAAA,MACL,MAAM;AAAA,MACN,eAAe,8BAA8B;AAAA,MAC7C,IAAI;AAAA,MACJ,iBAAiB;AAAA,MACjB,iBAAiB,YAAY,qBAAqB;AAAA,MAClD,gBAAgB;AAAA,MAChB,oBAAoB,GAAG,WAAW,qBAAqB,WAAW;AAAA,MAClE;AAAA,MACA;AAAA,MACA,GAAG;AAAA,MACH,MAAM;AAAA,MACN,YAAY;AAAA,MACZ,SAAS;AAAA,IACX;AAAA,IACA,CAAC,aAAa,UAAU,UAAU,mBAAmB,SAAS,iBAAiB,aAAa;AAAA,EAC9F;AACA,SAAO;AACT;",
+  "names": []
+}

package/dist/esm/config/useGetWidestLabelWidth.js

@@ -0,0 +1,40 @@
+import * as React from "react";
+import { throttle } from "lodash-es";
+import React2, { useState, useRef } from "react";
+const useGetWidestLabelWidth = () => {
+  const [width, setWidth] = useState(0);
+  const onLabelWidthRef = useRef(68);
+  const offLabelWidthRef = useRef(68);
+  const setLongestWidth = React2.useCallback(
+    throttle(
+      () => {
+        const longest = Math.max(onLabelWidthRef.current, offLabelWidthRef.current);
+        setWidth(longest);
+      },
+      20,
+      { leading: false, trailing: true }
+    ),
+    []
+  );
+  const handleRefOnLabelWidth = React2.useCallback(
+    (node) => {
+      const { clientWidth } = node || {};
+      onLabelWidthRef.current = clientWidth ?? onLabelWidthRef.current;
+      setLongestWidth();
+    },
+    [setLongestWidth]
+  );
+  const handleRefOffLabelWidth = React2.useCallback(
+    (node) => {
+      const { clientWidth } = node || {};
+      offLabelWidthRef.current = clientWidth ?? offLabelWidthRef.current;
+      setLongestWidth();
+    },
+    [setLongestWidth]
+  );
+  return { width, handleRefOnLabelWidth, handleRefOffLabelWidth };
+};
+export {
+  useGetWidestLabelWidth
+};
+//# sourceMappingURL=useGetWidestLabelWidth.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useGetWidestLabelWidth.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { throttle } from 'lodash-es';\nimport React, { useState, useRef } from 'react';\n\n/**\n * This should not be required, we are doing this to keep the wcagViolationLabelOn/wcagViolationLabelOff working\n *   this calculates the width of the widest custom label and sets the width of both labels to that width to avoid layout shift on toggle\n *\n * ---\n *\n * this can be safely removed in favor of a sensible default min-width for the accessible ON/OFF labels when we can actually kill the wcagViolationLabelOn/wcagViolationLabelOff props\n */\nexport const useGetWidestLabelWidth = () => {\n  const [width, setWidth] = useState<number>(0);\n  const onLabelWidthRef = useRef<number>(68);\n  const offLabelWidthRef = useRef<number>(68);\n  // typescript with debounce doesn't work well, so we need to disable the exhaustive deps rule here\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const setLongestWidth = React.useCallback(\n    throttle(\n      () => {\n        const longest = Math.max(onLabelWidthRef.current, offLabelWidthRef.current);\n        setWidth(longest);\n      },\n      20,\n      { leading: false, trailing: true },\n    ),\n    [],\n  );\n  const handleRefOnLabelWidth = React.useCallback<React.RefCallback<HTMLDivElement>>(\n    (node) => {\n      const { clientWidth } = node || {};\n      onLabelWidthRef.current = clientWidth ?? onLabelWidthRef.current;\n      setLongestWidth();\n    },\n    [setLongestWidth],\n  );\n  const handleRefOffLabelWidth = React.useCallback<React.RefCallback<HTMLDivElement>>(\n    (node) => {\n      const { clientWidth } = node || {};\n      offLabelWidthRef.current = clientWidth ?? offLabelWidthRef.current;\n      setLongestWidth();\n    },\n    [setLongestWidth],\n  );\n  return { width, handleRefOnLabelWidth, handleRefOffLabelWidth };\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,gBAAgB;AACzB,OAAOA,UAAS,UAAU,cAAc;AAUjC,MAAM,yBAAyB,MAAM;AAC1C,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAiB,CAAC;AAC5C,QAAM,kBAAkB,OAAe,EAAE;AACzC,QAAM,mBAAmB,OAAe,EAAE;AAG1C,QAAM,kBAAkBA,OAAM;AAAA,IAC5B;AAAA,MACE,MAAM;AACJ,cAAM,UAAU,KAAK,IAAI,gBAAgB,SAAS,iBAAiB,OAAO;AAC1E,iBAAS,OAAO;AAAA,MAClB;AAAA,MACA;AAAA,MACA,EAAE,SAAS,OAAO,UAAU,KAAK;AAAA,IACnC;AAAA,IACA,CAAC;AAAA,EACH;AACA,QAAM,wBAAwBA,OAAM;AAAA,IAClC,CAAC,SAAS;AACR,YAAM,EAAE,YAAY,IAAI,QAAQ,CAAC;AACjC,sBAAgB,UAAU,eAAe,gBAAgB;AACzD,sBAAgB;AAAA,IAClB;AAAA,IACA,CAAC,eAAe;AAAA,EAClB;AACA,QAAM,yBAAyBA,OAAM;AAAA,IACnC,CAAC,SAAS;AACR,YAAM,EAAE,YAAY,IAAI,QAAQ,CAAC;AACjC,uBAAiB,UAAU,eAAe,iBAAiB;AAC3D,sBAAgB;AAAA,IAClB;AAAA,IACA,CAAC,eAAe;AAAA,EAClB;AACA,SAAO,EAAE,OAAO,uBAAuB,uBAAuB;AAChE;",
+  "names": ["React"]
+}

package/dist/esm/constants/index.js

@@ -1,18 +1,31 @@
 import * as React from "react";
 import { slotObjectToDataTestIds } from "@elliemae/ds-system";
-const DSControlledToggleName = "DSControlledtoggle";
+const DSControlledToggleName = "DSFormtoggle";
 const CONTROLLED_TOGGLE_SLOTS = {
-  CONTROLLED_CONTAINER: "container",
+  CONTAINER_WITH_RADIUS_SHAPE: "container-with-radius-shape",
+  BUTTON_CONTENT_WRAPPER: "button-content-wrapper",
+  CIRCLE: "circle",
+  TEXT_WRAPPER: "text-wrapper",
+  // legacy ones...
+  CONTROLLED_CONTAINER: "controlled-container",
+  // in other components this is the ROOT
   TOGGLE_CHECKBOX: "toggle-checkbox"
 };
 const CONTROLLED_TOGGLE_DATA_TESTID = {
   ...slotObjectToDataTestIds(DSControlledToggleName, CONTROLLED_TOGGLE_SLOTS),
   CONTROLLED_CONTAINER: "ds-controlled-toggle",
+  // in other components this is the ROOT
   TOGGLE_CHECKBOX: "ds-controlled-toggle-checkbox"
 };
+const TOGGLE_SIZES = {
+  SMALL: "s",
+  MEDIUM: "m",
+  LARGE: "l"
+};
 export {
   CONTROLLED_TOGGLE_DATA_TESTID,
   CONTROLLED_TOGGLE_SLOTS,
-  DSControlledToggleName
+  DSControlledToggleName,
+  TOGGLE_SIZES
 };
 //# sourceMappingURL=index.js.map

package/dist/esm/constants/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSControlledToggleName = 'DSControlledtoggle';\n\n// we are giving \"component_name_slots\" to avoid errors on duplicate exports variables in aggregators\nexport const CONTROLLED_TOGGLE_SLOTS = {\n  CONTROLLED_CONTAINER: 'container',\n  TOGGLE_CHECKBOX: 'toggle-checkbox',\n} as const;\n\n// we are giving \"component_name_data_testid\" to avoid errors on duplicate exports variables in aggregators\nexport const CONTROLLED_TOGGLE_DATA_TESTID = {\n  ...slotObjectToDataTestIds(DSControlledToggleName, CONTROLLED_TOGGLE_SLOTS),\n  CONTROLLED_CONTAINER: 'ds-controlled-toggle',\n  TOGGLE_CHECKBOX: 'ds-controlled-toggle-checkbox',\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,yBAAyB;AAG/B,MAAM,0BAA0B;AAAA,EACrC,sBAAsB;AAAA,EACtB,iBAAiB;AACnB;AAGO,MAAM,gCAAgC;AAAA,EAC3C,GAAG,wBAAwB,wBAAwB,uBAAuB;AAAA,EAC1E,sBAAsB;AAAA,EACtB,iBAAiB;AACnB;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSControlledToggleName = 'DSFormtoggle';\n\n// we are giving \"component_name_slots\" to avoid errors on duplicate exports variables in aggregators\nexport const CONTROLLED_TOGGLE_SLOTS = {\n  CONTAINER_WITH_RADIUS_SHAPE: 'container-with-radius-shape',\n  BUTTON_CONTENT_WRAPPER: 'button-content-wrapper',\n  CIRCLE: 'circle',\n  TEXT_WRAPPER: 'text-wrapper',\n  // legacy ones...\n  CONTROLLED_CONTAINER: 'controlled-container', // in other components this is the ROOT\n  TOGGLE_CHECKBOX: 'toggle-checkbox',\n} as const;\n\n// we are giving \"component_name_data_testid\" to avoid errors on duplicate exports variables in aggregators\nexport const CONTROLLED_TOGGLE_DATA_TESTID = {\n  ...slotObjectToDataTestIds(DSControlledToggleName, CONTROLLED_TOGGLE_SLOTS),\n  CONTROLLED_CONTAINER: 'ds-controlled-toggle', // in other components this is the ROOT\n  TOGGLE_CHECKBOX: 'ds-controlled-toggle-checkbox',\n};\n\n// Specific of the toggle component\n\nexport const TOGGLE_SIZES = {\n  SMALL: 's',\n  MEDIUM: 'm',\n  LARGE: 'l',\n} as const;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,yBAAyB;AAG/B,MAAM,0BAA0B;AAAA,EACrC,6BAA6B;AAAA,EAC7B,wBAAwB;AAAA,EACxB,QAAQ;AAAA,EACR,cAAc;AAAA;AAAA,EAEd,sBAAsB;AAAA;AAAA,EACtB,iBAAiB;AACnB;AAGO,MAAM,gCAAgC;AAAA,EAC3C,GAAG,wBAAwB,wBAAwB,uBAAuB;AAAA,EAC1E,sBAAsB;AAAA;AAAA,EACtB,iBAAiB;AACnB;AAIO,MAAM,eAAe;AAAA,EAC1B,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT;",
   "names": []
 }

package/dist/esm/index.js

@@ -1,3 +1,9 @@
 import * as React from "react";
-export * from "./ControlledToggle.js";
+import { DSControlledToggle, DSControlledToggleWithSchema } from "./ControlledToggle.js";
+import { TOGGLE_SIZES } from "./constants/index.js";
+export {
+  DSControlledToggle,
+  DSControlledToggleWithSchema,
+  TOGGLE_SIZES
+};
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './ControlledToggle.js';\nexport type { DSControlledToggleT } from './react-desc-prop-types.js';\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { DSControlledToggle, DSControlledToggleWithSchema } from './ControlledToggle.js';\nexport { TOGGLE_SIZES } from './constants/index.js';\nexport type { DSControlledToggleT } from './react-desc-prop-types.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,oBAAoB,oCAAoC;AACjE,SAAS,oBAAoB;",
   "names": []
 }

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

@@ -1,13 +1,10 @@
 import * as React from "react";
 import { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from "@elliemae/ds-props-helpers";
+import { TOGGLE_SIZES } from "./constants/index.js";
 const defaultProps = {
-  labelOn: "ON",
-  labelOff: "OFF",
-  name: "",
-  value: "",
   checked: false,
   onChange: () => null,
-  size: "m",
+  size: TOGGLE_SIZES.MEDIUM,
   readOnly: false,
   disabled: false,
   applyAriaDisabled: false
@@ -15,20 +12,18 @@ const defaultProps = {
 const DSControlledTogglePropTypes = {
   ...globalAttributesPropTypes,
   ...xstyledPropTypes,
-  labelOn: PropTypes.string.description("Label when toggle is checked").deprecated({ version: "25.3" }),
-  labelOff: PropTypes.string.description("Label when toggle is unchecked").deprecated({ version: "25.3" }),
-  value: PropTypes.string.description("Value attribute for toggle").deprecated({ version: "25.3" }),
-  name: PropTypes.string.description("Name attribute for toggle").deprecated({ version: "25.3" }),
-  checked: PropTypes.bool.description("Wether the toggle is checked or not"),
-  onChange: PropTypes.func.description("OnClick callback"),
-  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"),
+  checked: PropTypes.bool.description("Wether the toggle is checked or not").defaultValue("false"),
+  onChange: PropTypes.func.description("OnClick callback").defaultValue("() => null"),
+  size: PropTypes.oneOf(["s", "m", "l"]).description("Size of toggle").defaultValue(TOGGLE_SIZES.MEDIUM),
+  disabled: PropTypes.bool.description("Wether the toggle is disabled or not").defaultValue("false"),
   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.")
+  ).defaultValue("false"),
+  readOnly: PropTypes.bool.description("Wether the toggle is readOnly or not").defaultValue("false"),
+  containerProps: PropTypes.object.description("Set of properties attached to the main container"),
+  id: PropTypes.string.description("Unique id."),
+  labelOn: PropTypes.string.description("Past deprecation ETA, this fails WCAG, switch to appropiate designs").deprecated({ version: "25.3" }),
+  labelOff: PropTypes.string.description("Past deprecation ETA, this fails WCAG, switch to appropiate designs").deprecated({ version: "25.3" })
 };
 const DSControlledTogglePropTypesSchema = DSControlledTogglePropTypes;
 export {

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 { 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').deprecated({ version: '25.3' }),\n  labelOff: PropTypes.string.description('Label when toggle is unchecked').deprecated({ version: '25.3' }),\n  value: PropTypes.string.description('Value attribute for toggle').deprecated({ version: '25.3' }),\n  name: PropTypes.string.description('Name attribute for toggle').deprecated({ version: '25.3' }),\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,EAAE,WAAW,EAAE,SAAS,OAAO,CAAC;AAAA,EACpG,UAAU,UAAU,OAAO,YAAY,gCAAgC,EAAE,WAAW,EAAE,SAAS,OAAO,CAAC;AAAA,EACvG,OAAO,UAAU,OAAO,YAAY,4BAA4B,EAAE,WAAW,EAAE,SAAS,OAAO,CAAC;AAAA,EAChG,MAAM,UAAU,OAAO,YAAY,2BAA2B,EAAE,WAAW,EAAE,SAAS,OAAO,CAAC;AAAA,EAC9F,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;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSButtonV3T } from '@elliemae/ds-button-v2';\nimport type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport { TOGGLE_SIZES } from './constants/index.js';\n\nexport declare namespace DSControlledToggleT {\n  export type ToggleSize = ObjectValues<typeof TOGGLE_SIZES>;\n\n  export interface DefaultProps {\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 RequiredProps {}\n\n  export interface OptionalProps {\n    containerProps?: Record<string, unknown>;\n    id?: string;\n  }\n\n  // this interface is the \"last chance\" for apps to keep using the deprecated props before the major release that will remove them\n  //   this is meant to \"break\" those using the old prop, but still allow a last chance to gradually update (requiring them to change the prop name)\n  export interface PostDeprecationETAPropsFallback {\n    /**\n     * @deprecated a custom wcagViolationLabelOn violates the role='switch' by design and it's impossible to make it WCAG compliant.\n     * Do not use it, if you need a custom label, you don't need a toggle, use a checkbox instead.\n     */\n    wcagViolationLabelOn?: string; // used to be \"labelOn\"\n    /**\n     * @deprecated a custom wcagViolationLabelOff violates the role='switch' by design and it's impossible to make it WCAG compliant.\n     * Do not use it, if you need a custom label, you don't need a toggle, use a checkbox instead.\n     */\n    wcagViolationLabelOff?: string; // used to be \"labelOff\"\n  }\n  export interface PostDeprecationETAProps {\n    /**\n     * @deprecated a custom wcagViolationLabelOn violates the role='switch' by design and it's impossible to make it WCAG compliant.\n     * Do not use it, if you need a custom label, you don't need a toggle, use a checkbox instead.\n     */\n    labelOn?: string; // used to be \"labelOn\"\n    /**\n     * @deprecated a custom wcagViolationLabelOff violates the role='switch' by design and it's impossible to make it WCAG compliant.\n     * Do not use it, if you need a custom label, you don't need a toggle, use a checkbox instead.\n     */\n    labelOff?: string; // used to be \"labelOff\"\n  }\n\n  export interface ButtonV3InherithedProps extends Omit<DSButtonV3T.Props, 'size' | 'children'> {}\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps,\n      PostDeprecationETAProps,\n      PostDeprecationETAPropsFallback {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps,\n      PostDeprecationETAProps,\n      PostDeprecationETAPropsFallback {}\n}\n\nexport const defaultProps: DSControlledToggleT.DefaultProps = {\n  checked: false,\n  onChange: () => null,\n  size: TOGGLE_SIZES.MEDIUM,\n  readOnly: false,\n  disabled: false,\n  applyAriaDisabled: false,\n};\n\nexport const DSControlledTogglePropTypes: DSPropTypesSchema<\n  Omit<DSControlledToggleT.Props, keyof DSControlledToggleT.PostDeprecationETAPropsFallback> &\n    DSControlledToggleT.PostDeprecationETAProps\n> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  checked: PropTypes.bool.description('Wether the toggle is checked or not').defaultValue('false'),\n  onChange: PropTypes.func.description('OnClick callback').defaultValue('() => null'),\n  size: PropTypes.oneOf(['s', 'm', 'l']).description('Size of toggle').defaultValue(TOGGLE_SIZES.MEDIUM),\n  disabled: PropTypes.bool.description('Wether the toggle is disabled or not').defaultValue('false'),\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  readOnly: PropTypes.bool.description('Wether the toggle is readOnly or not').defaultValue('false'),\n  containerProps: PropTypes.object.description('Set of properties attached to the main container'),\n  id: PropTypes.string.description('Unique id.'),\n  labelOn: PropTypes.string\n    .description('Past deprecation ETA, this fails WCAG, switch to appropiate designs')\n    .deprecated({ version: '25.3' }),\n  labelOff: PropTypes.string\n    .description('Past deprecation ETA, this fails WCAG, switch to appropiate designs')\n    .deprecated({ version: '25.3' }),\n};\n\nexport const DSControlledTogglePropTypesSchema =\n  DSControlledTogglePropTypes as unknown as ValidationMap<DSControlledToggleT.Props>;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,WAAW,2BAA2B,wBAAwB;AACvE,SAAS,oBAAoB;AAqEtB,MAAM,eAAiD;AAAA,EAC5D,SAAS;AAAA,EACT,UAAU,MAAM;AAAA,EAChB,MAAM,aAAa;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,mBAAmB;AACrB;AAEO,MAAM,8BAGT;AAAA,EACF,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS,UAAU,KAAK,YAAY,qCAAqC,EAAE,aAAa,OAAO;AAAA,EAC/F,UAAU,UAAU,KAAK,YAAY,kBAAkB,EAAE,aAAa,YAAY;AAAA,EAClF,MAAM,UAAU,MAAM,CAAC,KAAK,KAAK,GAAG,CAAC,EAAE,YAAY,gBAAgB,EAAE,aAAa,aAAa,MAAM;AAAA,EACrG,UAAU,UAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,OAAO;AAAA,EACjG,mBAAmB,UAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,OAAO;AAAA,EACvB,UAAU,UAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,OAAO;AAAA,EACjG,gBAAgB,UAAU,OAAO,YAAY,kDAAkD;AAAA,EAC/F,IAAI,UAAU,OAAO,YAAY,YAAY;AAAA,EAC7C,SAAS,UAAU,OAChB,YAAY,qEAAqE,EACjF,WAAW,EAAE,SAAS,OAAO,CAAC;AAAA,EACjC,UAAU,UAAU,OACjB,YAAY,qEAAqE,EACjF,WAAW,EAAE,SAAS,OAAO,CAAC;AACnC;AAEO,MAAM,oCACX;",
   "names": []
 }

package/dist/esm/styles.js

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { styled, css, xStyledCommonProps } from "@elliemae/ds-system";
-import { DSButtonV2 } from "@elliemae/ds-button-v2";
+import { DSButtonV3 } from "@elliemae/ds-button-v2";
+import { DSControlledToggleName, CONTROLLED_TOGGLE_SLOTS } from "./constants/index.js";
 import {
   containerHeight,
   borderRadius,
@@ -27,23 +28,26 @@ const focusBorders = css`
   }
 `;
 const hoverStyled = css`
-  background-color: ${({ checked, theme }) => {
-  if (checked) return theme.colors.brand["800"];
+  background-color: ${({ $checked, theme }) => {
+  if ($checked) return theme.colors.brand["800"];
   return theme.colors.neutral["600"];
 }};
 
-  border-color: ${({ checked, theme }) => {
-  if (checked) return theme.colors.brand["800"];
+  border-color: ${({ $checked, theme }) => {
+  if ($checked) return theme.colors.brand["800"];
   return theme.colors.neutral["700"];
 }};
 `;
-const StyledContainer = styled("div")`
+const StyledContainer = styled("div", {
+  name: DSControlledToggleName,
+  slot: CONTROLLED_TOGGLE_SLOTS.CONTROLLED_CONTAINER
+})`
   display: inline-flex;
   width: fit-content;
   justify-content: center;
   align-items: center;
-  height: ${({ size }) => containerHeight[size]};
-  border-radius: ${({ size }) => borderRadius[size]};
+  height: ${({ $size }) => containerHeight[$size]};
+  border-radius: ${({ $size }) => borderRadius[$size]};
   outline: none;
   position: relative;
   z-index: 0;
@@ -51,57 +55,67 @@ const StyledContainer = styled("div")`
   ${({ disabled }) => !disabled && focusBorders};
   ${xStyledCommonProps}
 `;
-const StyledLabel = styled("div")`
-  width: ${({ width, size }) => width ? `calc(${width}px + ${margin[size]})` : "auto"};
-  height: ${({ size }) => labelHeight[size]};
+const StyledRadiusShape = styled("div", {
+  name: DSControlledToggleName,
+  slot: CONTROLLED_TOGGLE_SLOTS.CONTAINER_WITH_RADIUS_SHAPE
+})`
+  width: ${({ $width, $size }) => $width ? `calc(${$width}px + ${margin[$size]})` : "auto"};
+  height: ${({ $size }) => labelHeight[$size]};
   z-index: 2;
   outline: none;
-  border-radius: ${({ size }) => labelHeight[size]};
+  border-radius: ${({ $size }) => labelHeight[$size]};
 `;
-const StyledVisibleContent = styled("div")`
+const StyledButtonContentWrapper = styled("div", {
+  name: DSControlledToggleName,
+  slot: CONTROLLED_TOGGLE_SLOTS.BUTTON_CONTENT_WRAPPER
+})`
   display: flex;
   margin: 0;
   padding: 0;
   align-items: center;
   height: 100%;
-  flex-direction: ${({ checked }) => checked ? "row-reverse" : "row"};
-  border-radius: ${({ size }) => `calc(${labelHeight[size]} - 4px)`};
-  border: ${(props) => props.size === "s" ? `1px solid ${getInterpolatedBorderDsToggleColorByProps(props)}` : `
+  flex-direction: ${({ $checked }) => $checked ? "row-reverse" : "row"};
+  border-radius: ${({ $size }) => `calc(${labelHeight[$size]} - 4px)`};
+  border: ${(props) => props.$size === "s" ? `1px solid ${getInterpolatedBorderDsToggleColorByProps(props)}` : `
     2px solid ${getInterpolatedBorderDsToggleColorByProps(props)}
     `};
   transition: background-color 0.2s;
   background-color: ${getInterpolatedBgDsToggleColorByProps};
   &:hover {
-    cursor: ${({ disabled, applyAriaDisabled, readOnly }) => handleCursors(disabled, applyAriaDisabled, readOnly)};
-    ${({ disabled, applyAriaDisabled, readOnly }) => !disabled && !applyAriaDisabled && !readOnly && hoverStyled}
+    cursor: ${({ $disabled, $applyAriaDisabled, $readOnly }) => handleCursors($disabled, $applyAriaDisabled, $readOnly)};
+    ${({ $disabled, $applyAriaDisabled, $readOnly }) => !$disabled && !$applyAriaDisabled && !$readOnly && hoverStyled}
   }
 `;
-const StyledCircle = styled.div`
-  height: ${({ size }) => circleValues[size]};
-  width: ${({ size }) => circleValues[size]};
+const StyledCircle = styled("div", {
+  name: DSControlledToggleName,
+  slot: CONTROLLED_TOGGLE_SLOTS.CIRCLE
+})`
+  height: ${({ $size }) => circleValues[$size]};
+  width: ${({ $size }) => circleValues[$size]};
   border-radius: 50%;
-  background-color: ${({ theme, readOnly }) => readOnly ? theme.colors.neutral[100] : theme.colors.neutral["000"]};
+  background-color: ${({ theme, $readOnly, $applyAriaDisabled }) => $readOnly || $applyAriaDisabled ? theme.colors.neutral[100] : theme.colors.neutral["000"]};
 `;
-const StyledText = styled.div`
-  display: flex;
+const StyledTextWrapper = styled("div", {
+  name: DSControlledToggleName,
+  slot: CONTROLLED_TOGGLE_SLOTS.TEXT_WRAPPER
+})`
   flex-grow: 1;
-  line-height: ${({ theme, size }) => handleFontSize(size, theme)};
-  align-items: center;
-  justify-content: ${({ isLongerTextRendering }) => isLongerTextRendering ? "flex-start" : "center"};
-  font-size: ${({ theme, size }) => handleFontSize(size, theme)};
+  line-height: ${({ theme, $size }) => handleFontSize($size, theme)};
+  font-size: ${({ theme, $size }) => handleFontSize($size, theme)};
   font-weight: ${({ theme }) => theme.fontWeights.semibold};
-  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}
+  color: ${({ theme, $disabled }) => $disabled ? "#5c6574" : theme.colors.neutral["000"]};
 `;
-const StyledButton = styled(DSButtonV2)`
+const StyledButton = styled(DSButtonV3, {
+  name: DSControlledToggleName,
+  slot: CONTROLLED_TOGGLE_SLOTS.TOGGLE_CHECKBOX
+})`
   margin: 0;
   padding: 0;
   z-index: 20;
   border-radius: 20px;
 `;
 const SetLabelWidth = styled.div`
-  font-size: ${({ theme, size }) => handleFontSize(size, theme)};
+  font-size: ${({ theme, $size }) => handleFontSize($size, theme)};
   font-weight: ${({ theme }) => theme.fontWeights.semibold};
   width: auto;
   position: absolute;
@@ -111,10 +125,10 @@ const SetLabelWidth = styled.div`
 export {
   SetLabelWidth,
   StyledButton,
+  StyledButtonContentWrapper,
   StyledCircle,
   StyledContainer,
-  StyledLabel,
-  StyledText,
-  StyledVisibleContent
+  StyledRadiusShape,
+  StyledTextWrapper
 };
 //# sourceMappingURL=styles.js.map

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  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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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport type { DSControlledToggleT } from './react-desc-prop-types.js';\nimport { DSControlledToggleName, CONTROLLED_TOGGLE_SLOTS } from './constants/index.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\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\ninterface StyledContainerT {\n  $size: DSControlledToggleT.ToggleSize;\n  disabled: boolean;\n}\nexport const StyledContainer = styled('div', {\n  name: DSControlledToggleName,\n  slot: CONTROLLED_TOGGLE_SLOTS.CONTROLLED_CONTAINER,\n})<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`;\ninterface StyledRadiusShapeT {\n  $width: number;\n  $size: DSControlledToggleT.ToggleSize;\n}\nexport const StyledRadiusShape = styled('div', {\n  name: DSControlledToggleName,\n  slot: CONTROLLED_TOGGLE_SLOTS.CONTAINER_WITH_RADIUS_SHAPE,\n})<StyledRadiusShapeT>`\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\ninterface StyledButtonContentWrapperT {\n  $checked: boolean;\n  $size: DSControlledToggleT.ToggleSize;\n  $disabled: boolean;\n  $applyAriaDisabled: boolean;\n  $readOnly: boolean;\n}\nexport const StyledButtonContentWrapper = styled('div', {\n  name: DSControlledToggleName,\n  slot: CONTROLLED_TOGGLE_SLOTS.BUTTON_CONTENT_WRAPPER,\n})<StyledButtonContentWrapperT>`\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 }) =>\n      handleCursors($disabled, $applyAriaDisabled, $readOnly)};\n    ${({ $disabled, $applyAriaDisabled, $readOnly }) => !$disabled && !$applyAriaDisabled && !$readOnly && hoverStyled}\n  }\n`;\n\ninterface StyledCircleT {\n  $size: DSControlledToggleT.ToggleSize;\n  $readOnly: boolean;\n  $applyAriaDisabled: boolean;\n}\nexport const StyledCircle = styled('div', {\n  name: DSControlledToggleName,\n  slot: CONTROLLED_TOGGLE_SLOTS.CIRCLE,\n})<StyledCircleT>`\n  height: ${({ $size }) => circleValues[$size]};\n  width: ${({ $size }) => circleValues[$size]};\n  border-radius: 50%;\n  background-color: ${({ theme, $readOnly, $applyAriaDisabled }) =>\n    $readOnly || $applyAriaDisabled ? theme.colors.neutral[100] : theme.colors.neutral['000']};\n`;\n\ninterface StyledTextWrapperT {\n  $size: DSControlledToggleT.ToggleSize;\n  $disabled: boolean;\n}\nexport const StyledTextWrapper = styled('div', {\n  name: DSControlledToggleName,\n  slot: CONTROLLED_TOGGLE_SLOTS.TEXT_WRAPPER,\n})<StyledTextWrapperT>`\n  flex-grow: 1;\n  line-height: ${({ theme, $size }) => handleFontSize($size, theme)};\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`;\n\nexport const StyledButton = styled(DSButtonV3, {\n  name: DSControlledToggleName,\n  slot: CONTROLLED_TOGGLE_SLOTS.TOGGLE_CHECKBOX,\n})`\n  margin: 0;\n  padding: 0;\n  z-index: 20;\n  border-radius: 20px;\n`;\n\ninterface SetLabelWidthT {\n  $size: DSControlledToggleT.ToggleSize;\n}\n/**\n * This should not be required, we are doing this to keep the wcagViolationLabelOn/wcagViolationLabelOff working\n *   this calculates the width of the widest custom label and sets the width of both labels to that width to avoid layout shift on toggle\n *\n * ---\n *\n * this can be safely removed in favor of a sensible default min-width for the accessible ON/OFF labels when we can actually kill the wcagViolationLabelOn/wcagViolationLabelOff props\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

@@ -1,15 +1,15 @@
 import * as React from "react";
 import { th } from "@elliemae/ds-system";
 const getStyleState = ({
-  checked,
-  disabled,
-  applyAriaDisabled,
-  readOnly
+  $checked,
+  $disabled,
+  $applyAriaDisabled,
+  $readOnly
 }) => {
-  if (disabled) return "disabled";
-  if (applyAriaDisabled) return "applyAriaDisabled";
-  if (readOnly) return "readOnly";
-  if (checked) return "checked";
+  if ($disabled) return "disabled";
+  if ($applyAriaDisabled) return "applyAriaDisabled";
+  if ($readOnly) return "readOnly";
+  if ($checked) return "checked";
   return "unchecked";
 };
 const circleValues = {
@@ -41,17 +41,16 @@ const handleFontSize = (size, { fontSizes }) => {
   switch (size) {
     case "s":
       return fontSizes.microText[200];
-    case "m":
-      return "15px";
     case "l":
       return "20px";
+    case "m":
     default:
       return "15px";
   }
 };
 const bgColorsMap = {
   disabled: "neutral-100",
-  applyAriaDisabled: "neutral-100",
+  applyAriaDisabled: "neutral-500",
   readOnly: "neutral-500",
   checked: "brand-600",
   unchecked: "neutral-500"
@@ -60,7 +59,7 @@ const getInterpolatedBgDSToggleColor = (styleState, props) => th.color(bgColorsM
 const getInterpolatedBgDsToggleColorByProps = (props) => getInterpolatedBgDSToggleColor(getStyleState(props), props);
 const borderColorsMap = {
   disabled: "neutral-300",
-  applyAriaDisabled: "neutral-300",
+  applyAriaDisabled: "neutral-500",
   readOnly: "neutral-500",
   checked: "brand-700",
   unchecked: "neutral-600"
@@ -69,7 +68,7 @@ const getInterpolatedBorderDSToggleColor = (styleState, props) => th.color(borde
 const getInterpolatedBorderDsToggleColorByProps = (props) => getInterpolatedBorderDSToggleColor(getStyleState(props), props);
 const handleCursors = (disabled, applyAriaDisabled, readOnly) => {
   if (disabled) return "not-allowed";
-  if (applyAriaDisabled) return "not-allowed";
+  if (applyAriaDisabled) return "default";
   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' | '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;",
+  "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 'l':\n      return '20px';\n    case 'm':\n    default:\n      return '15px';\n  }\n};\n\nconst bgColorsMap = {\n  disabled: 'neutral-100',\n  applyAriaDisabled: 'neutral-500',\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-500',\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 'default';\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,UAAW,QAAO;AACtB,MAAI,mBAAoB,QAAO;AAC/B,MAAI,UAAW,QAAO;AACtB,MAAI,SAAU,QAAO;AACrB,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;AAAA,IACL;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": []
 }