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

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.
Files changed (40) hide show
  1. package/build/cjs/index.js +16 -10
  2. package/build/cjs/index.js.map +1 -1
  3. package/build/esm/Chip/ButtonChip.d.ts +1 -1
  4. package/build/esm/Combobox/Combobox.d.ts +7 -7
  5. package/build/esm/Select/CustomContainerExample.d.ts +3 -0
  6. package/build/esm/Select/CustomContainerExample.js +59 -0
  7. package/build/esm/Select/CustomContainerExample.js.map +1 -0
  8. package/build/esm/Select/Select.d.ts +4 -2
  9. package/build/esm/Select/Select.js +4 -3
  10. package/build/esm/Select/Select.js.map +1 -1
  11. package/build/esm/Switch/Switch.d.ts +1 -1
  12. package/build/esm/Switch/Switch.js +5 -5
  13. package/build/esm/Switch/Switch.js.map +1 -1
  14. package/build/esm/Table/TableHead.d.ts +1 -1
  15. package/build/esm/TextField/FilledContainer.d.ts +4 -1
  16. package/build/esm/TextField/FilledContainer.js +5 -5
  17. package/build/esm/TextField/FilledContainer.js.map +1 -1
  18. package/build/esm/TextField/TextField.d.ts +1 -1
  19. package/build/esm/ThemeExplorer/ThemeBuilder.js +13 -2
  20. package/build/esm/ThemeExplorer/ThemeBuilder.js.map +1 -1
  21. package/build/esm/ThemeExplorer/ThemeColors.js +33 -15
  22. package/build/esm/ThemeExplorer/ThemeColors.js.map +1 -1
  23. package/build/esm/ThemeExplorer/components.d.ts +1 -1
  24. package/build/esm/ThemeExplorer/components.js +11 -13
  25. package/build/esm/ThemeExplorer/components.js.map +1 -1
  26. package/build/esm/ThemeExplorer/makeColorScheme.d.ts +32 -4
  27. package/build/esm/ThemeExplorer/makeColorScheme.js +41 -8
  28. package/build/esm/ThemeExplorer/makeColorScheme.js.map +1 -1
  29. package/build/tsconfig-build.tsbuildinfo +1 -1
  30. package/package.json +2 -2
  31. package/src/Select/CustomContainerExample.tsx +59 -0
  32. package/src/Select/Select.story.tsx +22 -1
  33. package/src/Select/Select.tsx +6 -2
  34. package/src/Switch/Switch.story.tsx +1 -1
  35. package/src/Switch/Switch.tsx +8 -2
  36. package/src/TextField/FilledContainer.tsx +6 -5
  37. package/src/ThemeExplorer/ThemeBuilder.tsx +16 -5
  38. package/src/ThemeExplorer/ThemeColors.tsx +39 -15
  39. package/src/ThemeExplorer/components.tsx +12 -20
  40. package/src/ThemeExplorer/makeColorScheme.tsx +39 -6
@@ -2193,9 +2193,9 @@ const LineRipple = /*#__PURE__*/react$1.forwardRef(function LineRipple(props, fo
2193
2193
  });
2194
2194
  });
2195
2195
 
2196
- const makeSelector$1 = state => `input:${state} ~ &,` + `select:${state} ~ &,` + `button:${state} ~ &,` + `textarea:${state} ~ &`;
2196
+ const makeSelector$1 = state => `input:${state} ~ &,` + `select:${state} ~ &,` + `button:${state} ~ &,` + `textarea:${state} ~ &,` + `[role="button"]:${state} ~ &`;
2197
2197
 
2198
- const Overlay = props => {
2198
+ const FilledContainerOverlay = props => {
2199
2199
  const {
2200
2200
  forceActive
2201
2201
  } = props;
@@ -2228,7 +2228,7 @@ const Overlay = props => {
2228
2228
  });
2229
2229
  };
2230
2230
 
2231
- const BorderBottom = () => /*#__PURE__*/jsxRuntime.jsx(Box, {
2231
+ const FilledContainerBorderBottom = () => /*#__PURE__*/jsxRuntime.jsx(Box, {
2232
2232
  __css: {
2233
2233
  position: 'absolute',
2234
2234
  bottom: 0,
@@ -2298,9 +2298,9 @@ const FilledContainer = /*#__PURE__*/react$1.forwardRef(function FilledContainer
2298
2298
  htmlFor: inputId,
2299
2299
  color: active || error ? color : undefined,
2300
2300
  children: label
2301
- }), children, /*#__PURE__*/jsxRuntime.jsx(Overlay, {
2301
+ }), children, /*#__PURE__*/jsxRuntime.jsx(FilledContainerOverlay, {
2302
2302
  forceActive: active
2303
- }), /*#__PURE__*/jsxRuntime.jsx(BorderBottom, {}), /*#__PURE__*/jsxRuntime.jsx(LineRipple, {
2303
+ }), /*#__PURE__*/jsxRuntime.jsx(FilledContainerBorderBottom, {}), /*#__PURE__*/jsxRuntime.jsx(LineRipple, {
2304
2304
  active: active || error,
2305
2305
  color: color
2306
2306
  })]
@@ -4221,6 +4221,7 @@ const Select = /*#__PURE__*/react$1.forwardRef(function Select(props, forwardedR
4221
4221
  children,
4222
4222
  renderValue: renderValueProp,
4223
4223
  leadingIcon = null,
4224
+ CustomContainer: overwrittenContainer,
4224
4225
  ...otherProps
4225
4226
  } = props;
4226
4227
  const [value, onChange] = core.useControlledState(valueProp, onChangeProp, defaultValue, setState => (e, v) => {
@@ -4231,7 +4232,7 @@ const Select = /*#__PURE__*/react$1.forwardRef(function Select(props, forwardedR
4231
4232
  const [open, setOpen] = react$1.useState(false);
4232
4233
  const fallbackId = react$1.useId();
4233
4234
  const theme = useTheme();
4234
- const Container = componentMap[variant] || OutlinedContainer;
4235
+ const Container = overwrittenContainer || componentMap[variant] || OutlinedContainer;
4235
4236
 
4236
4237
  const handleFocus = () => {
4237
4238
  setHasFocus(true);
@@ -4287,7 +4288,7 @@ const Select = /*#__PURE__*/react$1.forwardRef(function Select(props, forwardedR
4287
4288
  labelIsFloating: labelIsFloating,
4288
4289
  inputId: inputId,
4289
4290
  hasFocus: hasFocus,
4290
- disabled: disabled,
4291
+ disabled: disabled ?? false,
4291
4292
  forceActive: open,
4292
4293
  error: hasError,
4293
4294
  leadingIcon: Boolean(leadingIcon),
@@ -5217,7 +5218,7 @@ const SwitchCircle = ({
5217
5218
 
5218
5219
  const CheckBoxCore = core.CheckBox;
5219
5220
 
5220
- function getSizeCssVariables(size) {
5221
+ function getSizeCssVariables(size, hasIcon) {
5221
5222
  const multiplier = size === 'small' ? 0.75 : 1;
5222
5223
  const BORDER_WIDTH = 2;
5223
5224
  const TRAIL_WIDTH = 52 * multiplier;
@@ -5231,7 +5232,11 @@ function getSizeCssVariables(size) {
5231
5232
  ['--switch-thumb-size-checked-inactive']: polished.rem(TRAIL_HEIGHT - BORDER_WIDTH * 4),
5232
5233
  ['--switch-thumb-size-checked-active']: polished.rem(TRAIL_HEIGHT - BORDER_WIDTH * 2),
5233
5234
  ['--switch-thumb-size-unchecked-inactive']: polished.rem(TRAIL_HEIGHT / 2),
5234
- ['--switch-thumb-size-unchecked-active']: polished.rem(TRAIL_HEIGHT - BORDER_WIDTH * 2)
5235
+ ['--switch-thumb-size-unchecked-active']: polished.rem(TRAIL_HEIGHT - BORDER_WIDTH * 2),
5236
+ ...(hasIcon && {
5237
+ ['--switch-thumb-size-unchecked-inactive']: 'var(--switch-thumb-size-checked-inactive)',
5238
+ ['--switch-thumb-size-unchecked-active']: 'var(--switch-thumb-size-checked-active)'
5239
+ })
5235
5240
  };
5236
5241
  }
5237
5242
 
@@ -5252,7 +5257,7 @@ const SwitchInner = /*#__PURE__*/react$1.forwardRef(function SwitchInner(props,
5252
5257
  display: "inline-block",
5253
5258
  position: "relative",
5254
5259
  minWidth: "auto",
5255
- sx: getSizeCssVariables(size),
5260
+ sx: getSizeCssVariables(size, Boolean(icon)),
5256
5261
  children: [/*#__PURE__*/jsxRuntime.jsx(SwitchTrail, {
5257
5262
  checked: checked,
5258
5263
  disabled: disabled
@@ -5827,6 +5832,7 @@ exports.EASING_STANDARD = EASING_STANDARD;
5827
5832
  exports.EASING_STANDARD_ACCELERATE = EASING_STANDARD_ACCELERATE;
5828
5833
  exports.EASING_STANDARD_DECELERATE = EASING_STANDARD_DECELERATE;
5829
5834
  exports.FilledContainer = FilledContainer;
5835
+ exports.FilledContainerOverlay = FilledContainerOverlay;
5830
5836
  exports.FloatingLabel = FloatingLabel;
5831
5837
  exports.HelperText = HelperText;
5832
5838
  exports.LineRipple = LineRipple;