@basic-ui/material 1.0.0-alpha.30 → 1.0.0-alpha.32

package/build/cjs/index.js

@@ -5178,6 +5178,9 @@ const SwitchCircle = ({
 }) => /*#__PURE__*/jsxRuntime.jsx(Box, {
   __css: {
     position: 'absolute',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
     width: checked ? CIRCLE_SIZE_INACTIVE_CHECKED : CIRCLE_SIZE_INACTIVE_UNCHECKED,
     height: checked ? CIRCLE_SIZE_INACTIVE_CHECKED : CIRCLE_SIZE_INACTIVE_UNCHECKED,
     boxSizing: 'border-box',
@@ -5185,12 +5188,14 @@ const SwitchCircle = ({
     pointerEvents: 'none',
     zIndex: 1,
     backgroundColor: checked ? 'on.primary' : 'outline',
+    color: checked ? 'primary' : 'on.outline',
     top: '50%',
     left: '50%',
     transform: 'translate(-50%, -50%)',
     transition: 'inherit',
     '[data-switch-thumb=""]:active ~ &, [data-switch-thumb=""]:focus-visible ~ &, [data-switch-thumb=""]:hover ~ &': {
-      backgroundColor: checked ? 'primary-container' : 'on.surface-variant'
+      backgroundColor: checked ? 'primary-container' : 'on.surface-variant',
+      color: checked ? 'on.primary-container' : 'surface-variant'
     },
     '[data-switch-thumb=""]:active ~ &, [data-switch-thumb=""]:focus-visible ~ &': {
       height: checked ? CIRCLE_SIZE_ACTIVE_CHECKED : CIRCLE_SIZE_ACTIVE_UNCHECKED,
@@ -5199,6 +5204,7 @@ const SwitchCircle = ({
     '[data-switch-thumb=""]:disabled ~ &': {
       opacity: checked ? 1 : 0.38,
       backgroundColor: checked ? 'surface' : 'on.surface',
+      color: checked ? 'on.surface' : 'surface',
       height: checked ? CIRCLE_SIZE_INACTIVE_CHECKED : CIRCLE_SIZE_INACTIVE_UNCHECKED,
       width: checked ? CIRCLE_SIZE_INACTIVE_CHECKED : CIRCLE_SIZE_INACTIVE_UNCHECKED
     }
@@ -5211,7 +5217,7 @@ const SwitchCircle = ({
 
 const CheckBoxCore = core.CheckBox;
 
-function getSizeCssVariables(size) {
+function getSizeCssVariables(size, hasIcon) {
   const multiplier = size === 'small' ? 0.75 : 1;
   const BORDER_WIDTH = 2;
   const TRAIL_WIDTH = 52 * multiplier;
@@ -5220,11 +5226,16 @@ function getSizeCssVariables(size) {
     ['--switch-border-width']: polished.rem(BORDER_WIDTH),
     ['--switch-trail-width']: polished.rem(TRAIL_WIDTH),
     ['--switch-trail-height']: polished.rem(TRAIL_HEIGHT),
+    ['--switch-icon-size']: polished.rem(TRAIL_HEIGHT / 2),
     ['--switch-state-layer-size']: polished.rem(40 * multiplier),
     ['--switch-thumb-size-checked-inactive']: polished.rem(TRAIL_HEIGHT - BORDER_WIDTH * 4),
     ['--switch-thumb-size-checked-active']: polished.rem(TRAIL_HEIGHT - BORDER_WIDTH * 2),
     ['--switch-thumb-size-unchecked-inactive']: polished.rem(TRAIL_HEIGHT / 2),
-    ['--switch-thumb-size-unchecked-active']: polished.rem(TRAIL_HEIGHT - BORDER_WIDTH * 2)
+    ['--switch-thumb-size-unchecked-active']: polished.rem(TRAIL_HEIGHT - BORDER_WIDTH * 2),
+    ...(hasIcon && {
+      ['--switch-thumb-size-unchecked-inactive']: 'var(--switch-thumb-size-checked-inactive)',
+      ['--switch-thumb-size-unchecked-active']: 'var(--switch-thumb-size-checked-active)'
+    })
   };
 }
 
@@ -5236,6 +5247,7 @@ const SwitchInner = /*#__PURE__*/react$1.forwardRef(function SwitchInner(props,
     onChange,
     size = 'default',
     __css,
+    icon,
     ...otherProps
   } = props;
   const color = checked ? 'primary' : 'on.surface';
@@ -5244,7 +5256,7 @@ const SwitchInner = /*#__PURE__*/react$1.forwardRef(function SwitchInner(props,
     display: "inline-block",
     position: "relative",
     minWidth: "auto",
-    sx: getSizeCssVariables(size),
+    sx: getSizeCssVariables(size, Boolean(icon)),
     children: [/*#__PURE__*/jsxRuntime.jsx(SwitchTrail, {
       checked: checked,
       disabled: disabled
@@ -5285,7 +5297,12 @@ const SwitchInner = /*#__PURE__*/react$1.forwardRef(function SwitchInner(props,
           ...__css
         }
       }), /*#__PURE__*/jsxRuntime.jsx(SwitchCircle, {
-        checked: checked
+        checked: checked,
+        children: icon ? /*#__PURE__*/react$1.cloneElement(icon, {
+          checked,
+          ['data-checkbox-icon']: '',
+          disabled
+        }) : null
       })]
     })]
   });
@@ -5293,6 +5310,7 @@ const SwitchInner = /*#__PURE__*/react$1.forwardRef(function SwitchInner(props,
 const Switch = /*#__PURE__*/react$1.forwardRef(function Switch(props, forwardedRef) {
   const {
     as = 'input',
+    icon,
     disabled,
     children,
     ...otherProps
@@ -5302,6 +5320,7 @@ const Switch = /*#__PURE__*/react$1.forwardRef(function Switch(props, forwardedR
     as: SwitchInner,
     innerAs: as,
     ref: forwardedRef,
+    icon: icon,
     disabled: disabled,
     ...otherProps
   });