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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@basic-ui/material",
3
- "version": "1.0.0-alpha.31",
3
+ "version": "1.0.0-alpha.32",
4
4
  "description": "Accessible React Components used as building blocks for UI patterns",
5
5
  "author": "Lucas Terra <lucasterra7@gmail.com>",
6
6
  "license": "MIT",
@@ -52,5 +52,5 @@
52
52
  "react": "^16.14.0 || ^17.0.0 || ^18.0.0",
53
53
  "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0"
54
54
  },
55
- "gitHead": "2f682cfb8c61b1d166bbdaa4d4a9dfdc671bbbae"
55
+ "gitHead": "42c1e44b1429227fe589e0f7a4bfeeb15b5e395a"
56
56
  }
@@ -47,7 +47,7 @@ const CheckBoxIcon = forwardRef<HTMLDivElement, CheckBoxIconProps>(
47
47
  />
48
48
  ) : (
49
49
  <path
50
- d="m330 768 150-150 150 150 42-42-150-150 150-150-42-42-150 150-150-150-42 42 150 150-150 150 42 42Zm150"
50
+ d="m249 849-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z"
51
51
  fill="currentColor"
52
52
  />
53
53
  )}
@@ -29,7 +29,7 @@ export interface SwitchProps
29
29
  icon?: ReactElement<{ checked?: boolean; disabled?: boolean }>;
30
30
  }
31
31
 
32
- function getSizeCssVariables(size: 'small' | 'default') {
32
+ function getSizeCssVariables(size: 'small' | 'default', hasIcon: boolean) {
33
33
  const multiplier = size === 'small' ? 0.75 : 1;
34
34
  const BORDER_WIDTH = 2;
35
35
  const TRAIL_WIDTH = 52 * multiplier;
@@ -50,6 +50,12 @@ function getSizeCssVariables(size: 'small' | 'default') {
50
50
  ['--switch-thumb-size-unchecked-active']: rem(
51
51
  TRAIL_HEIGHT - BORDER_WIDTH * 2
52
52
  ),
53
+ ...(hasIcon && {
54
+ ['--switch-thumb-size-unchecked-inactive']:
55
+ 'var(--switch-thumb-size-checked-inactive)',
56
+ ['--switch-thumb-size-unchecked-active']:
57
+ 'var(--switch-thumb-size-checked-active)',
58
+ }),
53
59
  };
54
60
  }
55
61
 
@@ -73,7 +79,7 @@ const SwitchInner = forwardRef<HTMLInputElement, SwitchProps>(
73
79
  display="inline-block"
74
80
  position="relative"
75
81
  minWidth="auto"
76
- sx={getSizeCssVariables(size)}
82
+ sx={getSizeCssVariables(size, Boolean(icon))}
77
83
  >
78
84
  <SwitchTrail checked={checked} disabled={disabled} />
79
85
  <SwitchThumb checked={checked}>