@kaizen/components 0.0.0-canary-test-1-20250203230448 → 0.0.0-canary-v3-utils-export-20250211025631

package/dist/cjs/Select/Select.cjs

@@ -36,13 +36,12 @@ var Select = React__default.default.forwardRef(function (_a, ref) {
     description = _a.description,
     propsFullWidth = _a.fullWidth,
     propsClassName = _a.className,
-    isDisabled = _a.isDisabled,
     placeholder = _a.placeholder,
-    props = tslib.__rest(_a, ["variant", "status", "reversed", "label", "validationMessage", "description", "fullWidth", "className", "isDisabled", "placeholder"]);
+    props = tslib.__rest(_a, ["variant", "status", "reversed", "label", "validationMessage", "description", "fullWidth", "className", "placeholder"]);
   var reactId = React.useId();
   // the default for fullWidth depends on the variant
   var fullWidth = propsFullWidth !== null && propsFullWidth !== undefined ? propsFullWidth : !['secondary', 'secondary-small'].includes(variant);
-  var classes = classnames__default.default(propsClassName, Select_module.specificityIncreaser, (!reversed || variant === 'default') && Select_module.default, reversed && Select_module.reversed, variant === 'secondary' && Select_module.secondary, variant === 'secondary-small' && Select_module.secondarySmall, !fullWidth && Select_module.notFullWidth, isDisabled && Select_module.disabled, status === 'error' && Select_module.error);
+  var classes = classnames__default.default(propsClassName, Select_module.specificityIncreaser, (!reversed || variant === 'default') && Select_module.default, reversed && Select_module.reversed, variant === 'secondary' && Select_module.secondary, variant === 'secondary-small' && Select_module.secondarySmall, !fullWidth && Select_module.notFullWidth, props.isDisabled && Select_module.disabled, status === 'error' && Select_module.error);
   var labelId = React.useState(label ? reactId : undefined)[0];
   return React__default.default.createElement(React__default.default.Fragment, null, label ? React__default.default.createElement(Label.Label, {
     reversed: reversed,

package/dist/cjs/ToggleSwitch/ToggleSwitch/ToggleSwitch.cjs

@@ -16,17 +16,19 @@ var ToggleSwitch = function (_a) {
   var toggledStatus = _a.toggledStatus,
     onToggle = _a.onToggle,
     reversed = _a.reversed,
-    restProps = tslib.__rest(_a, ["toggledStatus", "onToggle", "reversed"]);
+    disabled = _a.disabled,
+    restProps = tslib.__rest(_a, ["toggledStatus", "onToggle", "reversed", "disabled"]);
   var isOn = toggledStatus === 'on';
   return React__default.default.createElement("span", {
     className: classnames__default.default(isOn ? ToggleSwitch_module.on : ToggleSwitch_module.off, reversed && ToggleSwitch_module.reversed)
   }, React__default.default.createElement("input", tslib.__assign({
     type: "checkbox",
-    className: ToggleSwitch_module.checkbox,
+    className: classnames__default.default(ToggleSwitch_module.checkbox, disabled && ToggleSwitch_module.disabled),
     checked: isOn ? true : false,
-    onChange: onToggle
+    onChange: onToggle,
+    disabled: disabled
   }, restProps)), React__default.default.createElement("span", {
-    className: ToggleSwitch_module.track
+    className: classnames__default.default(ToggleSwitch_module.track, disabled && ToggleSwitch_module.disabled)
   }, React__default.default.createElement("span", {
     className: ToggleSwitch_module.thumb
   }, React__default.default.createElement(Icon.Icon, {

package/dist/cjs/ToggleSwitch/ToggleSwitch/ToggleSwitch.module.scss.cjs

@@ -3,6 +3,7 @@
 var styles = {
   "checkbox": "ToggleSwitch-module_checkbox__ezWz3",
   "track": "ToggleSwitch-module_track__fcDMP",
+  "disabled": "ToggleSwitch-module_disabled__3H-9R",
   "thumb": "ToggleSwitch-module_thumb__8PULV",
   "checkIcon": "ToggleSwitch-module_checkIcon__8iitB",
   "on": "ToggleSwitch-module_on__CQpkh",

package/dist/esm/Select/Select.mjs

@@ -26,13 +26,12 @@ const Select = /*#__PURE__*/function () {
       description = _a.description,
       propsFullWidth = _a.fullWidth,
       propsClassName = _a.className,
-      isDisabled = _a.isDisabled,
       placeholder = _a.placeholder,
-      props = __rest(_a, ["variant", "status", "reversed", "label", "validationMessage", "description", "fullWidth", "className", "isDisabled", "placeholder"]);
+      props = __rest(_a, ["variant", "status", "reversed", "label", "validationMessage", "description", "fullWidth", "className", "placeholder"]);
     var reactId = useId();
     // the default for fullWidth depends on the variant
     var fullWidth = propsFullWidth !== null && propsFullWidth !== undefined ? propsFullWidth : !['secondary', 'secondary-small'].includes(variant);
-    var classes = classnames(propsClassName, styles.specificityIncreaser, (!reversed || variant === 'default') && styles.default, reversed && styles.reversed, variant === 'secondary' && styles.secondary, variant === 'secondary-small' && styles.secondarySmall, !fullWidth && styles.notFullWidth, isDisabled && styles.disabled, status === 'error' && styles.error);
+    var classes = classnames(propsClassName, styles.specificityIncreaser, (!reversed || variant === 'default') && styles.default, reversed && styles.reversed, variant === 'secondary' && styles.secondary, variant === 'secondary-small' && styles.secondarySmall, !fullWidth && styles.notFullWidth, props.isDisabled && styles.disabled, status === 'error' && styles.error);
     var labelId = useState(label ? reactId : undefined)[0];
     return /*#__PURE__*/React.createElement(React.Fragment, null, label ? (/*#__PURE__*/React.createElement(Label, {
       reversed: reversed,

package/dist/esm/ToggleSwitch/ToggleSwitch/ToggleSwitch.mjs

@@ -8,17 +8,19 @@ const ToggleSwitch = /*#__PURE__*/function () {
     var toggledStatus = _a.toggledStatus,
       onToggle = _a.onToggle,
       reversed = _a.reversed,
-      restProps = __rest(_a, ["toggledStatus", "onToggle", "reversed"]);
+      disabled = _a.disabled,
+      restProps = __rest(_a, ["toggledStatus", "onToggle", "reversed", "disabled"]);
     var isOn = toggledStatus === 'on';
     return /*#__PURE__*/React.createElement("span", {
       className: classnames(isOn ? styles.on : styles.off, reversed && styles.reversed)
     }, /*#__PURE__*/React.createElement("input", __assign({
       type: "checkbox",
-      className: styles.checkbox,
+      className: classnames(styles.checkbox, disabled && styles.disabled),
       checked: isOn ? true : false,
-      onChange: onToggle
+      onChange: onToggle,
+      disabled: disabled
     }, restProps)), /*#__PURE__*/React.createElement("span", {
-      className: styles.track
+      className: classnames(styles.track, disabled && styles.disabled)
     }, /*#__PURE__*/React.createElement("span", {
       className: styles.thumb
     }, /*#__PURE__*/React.createElement(Icon, {

package/dist/esm/ToggleSwitch/ToggleSwitch/ToggleSwitch.module.scss.mjs

@@ -1,6 +1,7 @@
 var styles = {
   "checkbox": "ToggleSwitch-module_checkbox__ezWz3",
   "track": "ToggleSwitch-module_track__fcDMP",
+  "disabled": "ToggleSwitch-module_disabled__3H-9R",
   "thumb": "ToggleSwitch-module_thumb__8PULV",
   "checkIcon": "ToggleSwitch-module_checkIcon__8iitB",
   "on": "ToggleSwitch-module_on__CQpkh",

package/dist/styles.css

@@ -11538,13 +11538,13 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
   /* stylelint-disable no-descending-specificity */
   /* stylelint-enable no-descending-specificity */
 }
-.ToggleSwitch-module_checkbox__ezWz3:focus + .ToggleSwitch-module_track__fcDMP, .ToggleSwitch-module_checkbox__ezWz3:hover:focus + .ToggleSwitch-module_track__fcDMP {
+.ToggleSwitch-module_checkbox__ezWz3:not(.ToggleSwitch-module_disabled__3H-9R):focus + .ToggleSwitch-module_track__fcDMP, .ToggleSwitch-module_checkbox__ezWz3:not(.ToggleSwitch-module_disabled__3H-9R):hover:focus + .ToggleSwitch-module_track__fcDMP {
   border-color: transparent;
   outline: 2px solid var(--color-blue-500, #0168b3);
   outline-offset: 1px;
   background-color: var(--color-gray-600, #524e56);
 }
-.ToggleSwitch-module_checkbox__ezWz3 + .ToggleSwitch-module_track__fcDMP:hover, label:hover .ToggleSwitch-module_checkbox__ezWz3 + .ToggleSwitch-module_track__fcDMP {
+.ToggleSwitch-module_checkbox__ezWz3:not(.ToggleSwitch-module_disabled__3H-9R) + .ToggleSwitch-module_track__fcDMP:hover, label:hover .ToggleSwitch-module_checkbox__ezWz3:not(.ToggleSwitch-module_disabled__3H-9R) + .ToggleSwitch-module_track__fcDMP {
   background-color: var(--color-purple-500, #844587);
   background-color: var(--color-gray-600, #524e56);
 }
@@ -11557,6 +11557,7 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
   border: var(--border-borderless-border-width, 2px) var(--border-borderless-border-style, solid) var(--border-borderless-border-color, transparent);
   border-radius: var(--spacing-md, 1.5rem);
   transition: left var(--animation-duration-immediate, 100ms) var(--animation-easing-function-linear, linear), right var(--animation-duration-immediate, 100ms) var(--animation-easing-function-linear, linear);
+  cursor: default;
 }
 
 .ToggleSwitch-module_checkIcon__8iitB {
@@ -11572,7 +11573,7 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
 }
 .ToggleSwitch-module_on__CQpkh .ToggleSwitch-module_checkbox__ezWz3:focus + .ToggleSwitch-module_track__fcDMP {
   border-color: transparent;
-  background-color: var(--color-green-500, #3f9a86);
+  background-color: var(--color-green-600, #2c7d67);
 }
 .ToggleSwitch-module_on__CQpkh .ToggleSwitch-module_thumb__8PULV {
   position: relative;
@@ -11584,7 +11585,7 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
   transition-delay: var(--animation-duration-immediate, 100ms);
   transition-duration: var(--animation-duration-fast, 300ms);
 }
-.ToggleSwitch-module_on__CQpkh .ToggleSwitch-module_checkbox__ezWz3 + .ToggleSwitch-module_track__fcDMP:hover, label:hover .ToggleSwitch-module_on__CQpkh .ToggleSwitch-module_checkbox__ezWz3 + .ToggleSwitch-module_track__fcDMP {
+.ToggleSwitch-module_on__CQpkh .ToggleSwitch-module_checkbox__ezWz3:not(.ToggleSwitch-module_disabled__3H-9R) + .ToggleSwitch-module_track__fcDMP:hover, label:hover .ToggleSwitch-module_on__CQpkh .ToggleSwitch-module_checkbox__ezWz3:not(.ToggleSwitch-module_disabled__3H-9R) + .ToggleSwitch-module_track__fcDMP {
   background-color: var(--color-green-600, #2c7d67);
 }
 
@@ -11605,10 +11606,18 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
 .ToggleSwitch-module_reversed__Q3-iM.ToggleSwitch-module_off__OhSEP .ToggleSwitch-module_checkbox__ezWz3:hover:focus + .ToggleSwitch-module_track__fcDMP {
   background-color: rgba(var(--color-white-rgb, 255, 255, 255), 0.65);
 }
-.ToggleSwitch-module_reversed__Q3-iM.ToggleSwitch-module_off__OhSEP .ToggleSwitch-module_checkbox__ezWz3 + .ToggleSwitch-module_track__fcDMP:hover, label:hover .ToggleSwitch-module_reversed__Q3-iM.ToggleSwitch-module_off__OhSEP .ToggleSwitch-module_checkbox__ezWz3 + .ToggleSwitch-module_track__fcDMP {
+.ToggleSwitch-module_reversed__Q3-iM.ToggleSwitch-module_off__OhSEP .ToggleSwitch-module_checkbox__ezWz3:not(.ToggleSwitch-module_disabled__3H-9R) + .ToggleSwitch-module_track__fcDMP:hover, label:hover .ToggleSwitch-module_reversed__Q3-iM.ToggleSwitch-module_off__OhSEP .ToggleSwitch-module_checkbox__ezWz3:not(.ToggleSwitch-module_disabled__3H-9R) + .ToggleSwitch-module_track__fcDMP {
   background-color: rgba(var(--color-white-rgb, 255, 255, 255), 0.65);
 }
 
+label .ToggleSwitch-module_disabled__3H-9R.ToggleSwitch-module_track__fcDMP {
+  opacity: 100%;
+}
+
+.ToggleSwitch-module_disabled__3H-9R.ToggleSwitch-module_track__fcDMP {
+  opacity: 30%;
+}
+
 /* stylelint-enable no-descending-specificity */
 /** THIS IS AN AUTOGENERATED FILE **/
 .ToggleSwitchField-module_container__e7TXD {

package/dist/types/ToggleSwitch/ToggleSwitch/ToggleSwitch.d.ts

@@ -10,6 +10,6 @@ export type ToggleSwitchProps = {
     reversed?: boolean;
 } & OverrideClassName<Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onToggle'>>;
 export declare const ToggleSwitch: {
-    ({ toggledStatus, onToggle, reversed, ...restProps }: ToggleSwitchProps): JSX.Element;
+    ({ toggledStatus, onToggle, reversed, disabled, ...restProps }: ToggleSwitchProps): JSX.Element;
     displayName: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "0.0.0-canary-test-1-20250203230448",
+  "version": "0.0.0-canary-v3-utils-export-20250211025631",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -81,9 +81,15 @@
       "require": "./dist/cjs/reactAriaComponentsV3.cjs",
       "types": "./dist/types/__react-aria-components__/index.d.ts"
     },
+    "./v3/utilities": {
+      "import": "./dist/esm/utilitiesV3.mjs",
+      "require": "./dist/cjs/utilitiesV3.cjs",
+      "types": "./dist/types/__utilities__/v3.d.ts"
+    },
     "./dist/styles.css": {
       "import": "./dist/styles.css",
-      "require": "./dist/styles.css"
+      "require": "./dist/styles.css",
+      "style": "./dist/styles.css"
     }
   },
   "bin": {

package/src/Select/Select.tsx

@@ -57,7 +57,6 @@ export const Select = React.forwardRef<any, SelectProps>(
       description,
       fullWidth: propsFullWidth,
       className: propsClassName,
-      isDisabled,
       placeholder,
       ...props
     },
@@ -76,7 +75,7 @@ export const Select = React.forwardRef<any, SelectProps>(
       variant === 'secondary' && styles.secondary,
       variant === 'secondary-small' && styles.secondarySmall,
       !fullWidth && styles.notFullWidth,
-      isDisabled && styles.disabled,
+      props.isDisabled && styles.disabled,
       status === 'error' && styles.error,
     )
 

package/src/ToggleSwitch/ToggleSwitch/ToggleSwitch.module.scss

@@ -27,19 +27,20 @@ $focus-ring-offset: 1px;
 
   /* TODO: Fix */
   /* stylelint-disable no-descending-specificity */
-  .checkbox:focus + &,
-  .checkbox:hover:focus + & {
+  .checkbox:not(.disabled):focus + &,
+  .checkbox:not(.disabled):hover:focus + & {
     border-color: transparent;
     outline: 2px solid $color-blue-500;
     outline-offset: $focus-ring-offset;
     background-color: $color-gray-600;
   }
 
-  .checkbox + &:hover,
-  label:hover .checkbox + & {
+  .checkbox:not(.disabled) + &:hover,
+  label:hover .checkbox:not(.disabled) + & {
     background-color: $color-purple-500;
     background-color: $color-gray-600;
   }
+
   /* stylelint-enable no-descending-specificity */
 }
 
@@ -54,6 +55,7 @@ $focus-ring-offset: 1px;
   transition:
     left $animation-timing,
     right $animation-timing;
+  cursor: default;
 }
 
 .checkIcon {
@@ -71,7 +73,7 @@ $focus-ring-offset: 1px;
 
   .checkbox:focus + .track {
     border-color: transparent;
-    background-color: $color-green-500;
+    background-color: $color-green-600;
   }
 
   .thumb {
@@ -86,8 +88,8 @@ $focus-ring-offset: 1px;
     transition-duration: $animation-duration-fast;
   }
 
-  .checkbox + .track:hover,
-  label:hover & .checkbox + .track {
+  .checkbox:not(.disabled) + .track:hover,
+  label:hover & .checkbox:not(.disabled) + .track {
     background-color: $color-green-600;
   }
 }
@@ -116,10 +118,20 @@ $focus-ring-offset: 1px;
       background-color: rgba($color-white-rgb, 0.65);
     }
 
-    .checkbox + .track:hover,
-    label:hover & .checkbox + .track {
+    .checkbox:not(.disabled) + .track:hover,
+    label:hover & .checkbox:not(.disabled) + .track {
       background-color: rgba($color-white-rgb, 0.65);
     }
   }
 }
+
+// When the ToggleSwitch is used as part of the ToggleSwitchField, the disabled state opacity is set on the Label component
+label .disabled.track {
+  opacity: 100%;
+}
+
+.disabled.track {
+  opacity: 30%;
+}
+
 /* stylelint-enable no-descending-specificity */

package/src/ToggleSwitch/ToggleSwitch/ToggleSwitch.tsx

@@ -19,6 +19,7 @@ export const ToggleSwitch = ({
   toggledStatus,
   onToggle,
   reversed,
+  disabled,
   ...restProps
 }: ToggleSwitchProps): JSX.Element => {
   const isOn = toggledStatus === 'on'
@@ -27,12 +28,13 @@ export const ToggleSwitch = ({
     <span className={classnames(isOn ? styles.on : styles.off, reversed && styles.reversed)}>
       <input
         type="checkbox"
-        className={styles.checkbox}
+        className={classnames(styles.checkbox, disabled && styles.disabled)}
         checked={isOn ? true : false}
         onChange={onToggle}
+        disabled={disabled}
         {...restProps}
       />
-      <span className={styles.track}>
+      <span className={classnames(styles.track, disabled && styles.disabled)}>
         <span className={styles.thumb}>
           <Icon name="check" isPresentational className={styles.checkIcon} />
         </span>