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

package/build/cjs/index.js

@@ -3104,6 +3104,7 @@ const SelectionControlLabel = /*#__PURE__*/react$1.forwardRef(function Selection
       position: 'relative',
       alignItems: 'center',
       WebkitTapHighlightColor: 'transparent',
+      gap: 1,
       ...__css
     },
     ...otherProps
@@ -5119,23 +5120,24 @@ const Snackbar = /*#__PURE__*/react$1.forwardRef(function Snackbar(props, forwar
   });
 });
 
-const BORDER_WIDTH = 2;
-const TRAIL_WIDTH = 52;
-const TRAIL_HEIGHT = 32;
-const CIRCLE_SIZE_INACTIVE_CHECKED = 24;
-const CIRCLE_SIZE_ACTIVE_CHECKED = 28;
-const CIRCLE_SIZE_INACTIVE_UNCHECKED = 16;
-const CIRCLE_SIZE_ACTIVE_UNCHECKED = 28;
+const BORDER_WIDTH = 'var(--switch-border-width)';
+const TRAIL_WIDTH = 'var(--switch-trail-width)';
+const TRAIL_HEIGHT = 'var(--switch-trail-height)';
+const STATE_LAYER_SIZE = 'var(--switch-state-layer-size)';
+const CIRCLE_SIZE_INACTIVE_CHECKED = 'var(--switch-thumb-size-checked-inactive)';
+const CIRCLE_SIZE_ACTIVE_CHECKED = 'var(--switch-thumb-size-checked-active)';
+const CIRCLE_SIZE_INACTIVE_UNCHECKED = 'var(--switch-thumb-size-unchecked-inactive)';
+const CIRCLE_SIZE_ACTIVE_UNCHECKED = 'var(--switch-thumb-size-unchecked-active)';
 const SwitchTrail = ({
   checked = false,
   disabled = false,
   ...otherProps
 }) => /*#__PURE__*/jsxRuntime.jsx(Box, {
   __css: {
-    width: polished.rem(TRAIL_WIDTH),
-    height: polished.rem(TRAIL_HEIGHT),
-    borderRadius: polished.rem(TRAIL_HEIGHT / 2),
-    borderWidth: polished.rem(BORDER_WIDTH),
+    width: TRAIL_WIDTH,
+    height: TRAIL_HEIGHT,
+    borderRadius: 'full',
+    borderWidth: BORDER_WIDTH,
     borderStyle: 'solid',
     backgroundColor: checked ? 'primary' : 'surface-variant',
     borderColor: checked ? 'primary' : 'outline',
@@ -5147,24 +5149,25 @@ const SwitchTrail = ({
   },
   ...otherProps
 });
-const THUMB_SIZE = 40;
 const SwitchThumb = ({
   checked = false,
   ...otherProps
 }) => /*#__PURE__*/jsxRuntime.jsx(Box, {
   position: "absolute",
-  width: polished.rem(THUMB_SIZE),
-  height: polished.rem(THUMB_SIZE),
+  width: STATE_LAYER_SIZE,
+  height: STATE_LAYER_SIZE,
   borderRadius: "full",
   left: '50%',
   top: '50%',
   __css: {
-    transform: `translateX(calc(-50% ${checked ? '+' : '-'} ${polished.rem((TRAIL_WIDTH - CIRCLE_SIZE_INACTIVE_CHECKED - BORDER_WIDTH * 4) / 2)})) translateY(-50%)`,
+    transform: `translateX(calc(-50% ${checked ? '+' : '-'}
+        (${TRAIL_WIDTH} - ${CIRCLE_SIZE_INACTIVE_CHECKED} - ${BORDER_WIDTH} * 4) / 2
+      )) translateY(-50%)`,
     WebkitTapHighlightColor: 'transparent',
     transition: `background-color 90ms ${EASING_STANDARD},border-color 90ms ${EASING_STANDARD},transform 90ms ${EASING_STANDARD},height 90ms ${EASING_STANDARD},width 90ms ${EASING_STANDARD}`,
     '& > input': {
-      width: THUMB_SIZE,
-      height: THUMB_SIZE
+      width: STATE_LAYER_SIZE,
+      height: STATE_LAYER_SIZE
     }
   },
   ...otherProps
@@ -5175,8 +5178,8 @@ const SwitchCircle = ({
 }) => /*#__PURE__*/jsxRuntime.jsx(Box, {
   __css: {
     position: 'absolute',
-    width: checked ? polished.rem(CIRCLE_SIZE_INACTIVE_CHECKED) : polished.rem(CIRCLE_SIZE_INACTIVE_UNCHECKED),
-    height: checked ? polished.rem(CIRCLE_SIZE_INACTIVE_CHECKED) : polished.rem(CIRCLE_SIZE_INACTIVE_UNCHECKED),
+    width: checked ? CIRCLE_SIZE_INACTIVE_CHECKED : CIRCLE_SIZE_INACTIVE_UNCHECKED,
+    height: checked ? CIRCLE_SIZE_INACTIVE_CHECKED : CIRCLE_SIZE_INACTIVE_UNCHECKED,
     boxSizing: 'border-box',
     borderRadius: 'full',
     pointerEvents: 'none',
@@ -5207,67 +5210,84 @@ const SwitchCircle = ({
 });
 
 const CheckBoxCore = core.CheckBox;
+
+function getSizeCssVariables(size) {
+  const multiplier = size === 'small' ? 0.75 : 1;
+  const BORDER_WIDTH = 2;
+  const TRAIL_WIDTH = 52 * multiplier;
+  const TRAIL_HEIGHT = 32 * multiplier;
+  return {
+    ['--switch-border-width']: polished.rem(BORDER_WIDTH),
+    ['--switch-trail-width']: polished.rem(TRAIL_WIDTH),
+    ['--switch-trail-height']: polished.rem(TRAIL_HEIGHT),
+    ['--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)
+  };
+}
+
 const SwitchInner = /*#__PURE__*/react$1.forwardRef(function SwitchInner(props, forwardedRef) {
   const {
     as: Comp = 'input',
     disabled,
     checked,
     onChange,
+    size = 'default',
     __css,
     ...otherProps
   } = props;
   const color = checked ? 'primary' : 'on.surface';
   const theme = useTheme();
-  return /*#__PURE__*/jsxRuntime.jsx(Box, {
-    p: 2,
+  return /*#__PURE__*/jsxRuntime.jsxs(Box, {
     display: "inline-block",
+    position: "relative",
     minWidth: "auto",
-    children: /*#__PURE__*/jsxRuntime.jsxs(Box, {
-      position: "relative",
-      children: [/*#__PURE__*/jsxRuntime.jsx(SwitchTrail, {
-        checked: checked,
-        disabled: disabled
-      }), /*#__PURE__*/jsxRuntime.jsxs(SwitchThumb, {
+    sx: getSizeCssVariables(size),
+    children: [/*#__PURE__*/jsxRuntime.jsx(SwitchTrail, {
+      checked: checked,
+      disabled: disabled
+    }), /*#__PURE__*/jsxRuntime.jsxs(SwitchThumb, {
+      checked: checked,
+      children: [/*#__PURE__*/jsxRuntime.jsx(RippleBox, {
+        as: Comp,
+        role: "switch",
+        type: "checkbox",
         checked: checked,
-        children: [/*#__PURE__*/jsxRuntime.jsx(RippleBox, {
-          as: Comp,
-          role: "switch",
-          type: "checkbox",
-          checked: checked,
-          onChange: onChange,
-          theme: theme,
-          ref: forwardedRef,
-          "aria-checked": checked ? 'true' : 'false',
-          rippleColor: color,
-          baseOpacity: 0,
-          hoverOpacity: 0.04,
-          focusOpacity: 0.12,
-          center: true,
-          disabled: disabled,
-          "data-switch-thumb": "",
-          ...otherProps,
-          __css: {
-            top: '50%',
-            left: '50%',
-            backgroundColor: 'transparent',
-            transform: 'translate(-50%, -50%)',
-            width: '100%',
-            height: '100%',
-            appearance: 'none',
-            ':focus': {
-              outline: 'none'
-            },
-            border: 'none',
-            borderRadius: 'full',
-            zIndex: 1,
-            position: 'absolute',
-            ...__css
-          }
-        }), /*#__PURE__*/jsxRuntime.jsx(SwitchCircle, {
-          checked: checked
-        })]
+        onChange: onChange,
+        theme: theme,
+        ref: forwardedRef,
+        "aria-checked": checked ? 'true' : 'false',
+        rippleColor: color,
+        baseOpacity: 0,
+        hoverOpacity: 0.04,
+        focusOpacity: 0.12,
+        center: true,
+        disabled: disabled,
+        "data-switch-thumb": "",
+        ...otherProps,
+        __css: {
+          top: '50%',
+          left: '50%',
+          backgroundColor: 'transparent',
+          transform: 'translate(-50%, -50%)',
+          width: '100%',
+          height: '100%',
+          appearance: 'none',
+          ':focus': {
+            outline: 'none'
+          },
+          border: 'none',
+          borderRadius: 'full',
+          zIndex: 1,
+          position: 'absolute',
+          ...__css
+        }
+      }), /*#__PURE__*/jsxRuntime.jsx(SwitchCircle, {
+        checked: checked
       })]
-    })
+    })]
   });
 });
 const Switch = /*#__PURE__*/react$1.forwardRef(function Switch(props, forwardedRef) {