@basic-ui/material 1.0.0-alpha.30 → 1.0.0-alpha.31
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/build/cjs/index.js +17 -2
- package/build/cjs/index.js.map +1 -1
- package/build/esm/Chip/ButtonChip.d.ts +1 -1
- package/build/esm/Switch/Switch.d.ts +6 -2
- package/build/esm/Switch/Switch.js +13 -5
- package/build/esm/Switch/Switch.js.map +1 -1
- package/build/esm/Switch/styledComponents.js +7 -1
- package/build/esm/Switch/styledComponents.js.map +1 -1
- package/build/esm/Table/TableHead.d.ts +1 -1
- package/build/tsconfig-build.tsbuildinfo +1 -1
- package/package.json +2 -2
- package/src/Switch/Switch.story.tsx +70 -13
- package/src/Switch/Switch.tsx +16 -4
- package/src/Switch/styledComponents.tsx +6 -0
package/build/cjs/index.js
CHANGED
|
@@ -5178,6 +5178,9 @@ const SwitchCircle = ({
|
|
|
5178
5178
|
}) => /*#__PURE__*/jsxRuntime.jsx(Box, {
|
|
5179
5179
|
__css: {
|
|
5180
5180
|
position: 'absolute',
|
|
5181
|
+
display: 'inline-flex',
|
|
5182
|
+
alignItems: 'center',
|
|
5183
|
+
justifyContent: 'center',
|
|
5181
5184
|
width: checked ? CIRCLE_SIZE_INACTIVE_CHECKED : CIRCLE_SIZE_INACTIVE_UNCHECKED,
|
|
5182
5185
|
height: checked ? CIRCLE_SIZE_INACTIVE_CHECKED : CIRCLE_SIZE_INACTIVE_UNCHECKED,
|
|
5183
5186
|
boxSizing: 'border-box',
|
|
@@ -5185,12 +5188,14 @@ const SwitchCircle = ({
|
|
|
5185
5188
|
pointerEvents: 'none',
|
|
5186
5189
|
zIndex: 1,
|
|
5187
5190
|
backgroundColor: checked ? 'on.primary' : 'outline',
|
|
5191
|
+
color: checked ? 'primary' : 'on.outline',
|
|
5188
5192
|
top: '50%',
|
|
5189
5193
|
left: '50%',
|
|
5190
5194
|
transform: 'translate(-50%, -50%)',
|
|
5191
5195
|
transition: 'inherit',
|
|
5192
5196
|
'[data-switch-thumb=""]:active ~ &, [data-switch-thumb=""]:focus-visible ~ &, [data-switch-thumb=""]:hover ~ &': {
|
|
5193
|
-
backgroundColor: checked ? 'primary-container' : 'on.surface-variant'
|
|
5197
|
+
backgroundColor: checked ? 'primary-container' : 'on.surface-variant',
|
|
5198
|
+
color: checked ? 'on.primary-container' : 'surface-variant'
|
|
5194
5199
|
},
|
|
5195
5200
|
'[data-switch-thumb=""]:active ~ &, [data-switch-thumb=""]:focus-visible ~ &': {
|
|
5196
5201
|
height: checked ? CIRCLE_SIZE_ACTIVE_CHECKED : CIRCLE_SIZE_ACTIVE_UNCHECKED,
|
|
@@ -5199,6 +5204,7 @@ const SwitchCircle = ({
|
|
|
5199
5204
|
'[data-switch-thumb=""]:disabled ~ &': {
|
|
5200
5205
|
opacity: checked ? 1 : 0.38,
|
|
5201
5206
|
backgroundColor: checked ? 'surface' : 'on.surface',
|
|
5207
|
+
color: checked ? 'on.surface' : 'surface',
|
|
5202
5208
|
height: checked ? CIRCLE_SIZE_INACTIVE_CHECKED : CIRCLE_SIZE_INACTIVE_UNCHECKED,
|
|
5203
5209
|
width: checked ? CIRCLE_SIZE_INACTIVE_CHECKED : CIRCLE_SIZE_INACTIVE_UNCHECKED
|
|
5204
5210
|
}
|
|
@@ -5220,6 +5226,7 @@ function getSizeCssVariables(size) {
|
|
|
5220
5226
|
['--switch-border-width']: polished.rem(BORDER_WIDTH),
|
|
5221
5227
|
['--switch-trail-width']: polished.rem(TRAIL_WIDTH),
|
|
5222
5228
|
['--switch-trail-height']: polished.rem(TRAIL_HEIGHT),
|
|
5229
|
+
['--switch-icon-size']: polished.rem(TRAIL_HEIGHT / 2),
|
|
5223
5230
|
['--switch-state-layer-size']: polished.rem(40 * multiplier),
|
|
5224
5231
|
['--switch-thumb-size-checked-inactive']: polished.rem(TRAIL_HEIGHT - BORDER_WIDTH * 4),
|
|
5225
5232
|
['--switch-thumb-size-checked-active']: polished.rem(TRAIL_HEIGHT - BORDER_WIDTH * 2),
|
|
@@ -5236,6 +5243,7 @@ const SwitchInner = /*#__PURE__*/react$1.forwardRef(function SwitchInner(props,
|
|
|
5236
5243
|
onChange,
|
|
5237
5244
|
size = 'default',
|
|
5238
5245
|
__css,
|
|
5246
|
+
icon,
|
|
5239
5247
|
...otherProps
|
|
5240
5248
|
} = props;
|
|
5241
5249
|
const color = checked ? 'primary' : 'on.surface';
|
|
@@ -5285,7 +5293,12 @@ const SwitchInner = /*#__PURE__*/react$1.forwardRef(function SwitchInner(props,
|
|
|
5285
5293
|
...__css
|
|
5286
5294
|
}
|
|
5287
5295
|
}), /*#__PURE__*/jsxRuntime.jsx(SwitchCircle, {
|
|
5288
|
-
checked: checked
|
|
5296
|
+
checked: checked,
|
|
5297
|
+
children: icon ? /*#__PURE__*/react$1.cloneElement(icon, {
|
|
5298
|
+
checked,
|
|
5299
|
+
['data-checkbox-icon']: '',
|
|
5300
|
+
disabled
|
|
5301
|
+
}) : null
|
|
5289
5302
|
})]
|
|
5290
5303
|
})]
|
|
5291
5304
|
});
|
|
@@ -5293,6 +5306,7 @@ const SwitchInner = /*#__PURE__*/react$1.forwardRef(function SwitchInner(props,
|
|
|
5293
5306
|
const Switch = /*#__PURE__*/react$1.forwardRef(function Switch(props, forwardedRef) {
|
|
5294
5307
|
const {
|
|
5295
5308
|
as = 'input',
|
|
5309
|
+
icon,
|
|
5296
5310
|
disabled,
|
|
5297
5311
|
children,
|
|
5298
5312
|
...otherProps
|
|
@@ -5302,6 +5316,7 @@ const Switch = /*#__PURE__*/react$1.forwardRef(function Switch(props, forwardedR
|
|
|
5302
5316
|
as: SwitchInner,
|
|
5303
5317
|
innerAs: as,
|
|
5304
5318
|
ref: forwardedRef,
|
|
5319
|
+
icon: icon,
|
|
5305
5320
|
disabled: disabled,
|
|
5306
5321
|
...otherProps
|
|
5307
5322
|
});
|