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

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 (71) hide show
  1. package/build/cjs/index.js +92 -21
  2. package/build/cjs/index.js.map +1 -1
  3. package/build/esm/BottomSheet/BottomSheet.d.ts +1 -1
  4. package/build/esm/BottomSheet/BottomSheetSurface.d.ts +1 -1
  5. package/build/esm/Button/Button.d.ts +1 -1
  6. package/build/esm/CheckBox/CheckBox.d.ts +1 -1
  7. package/build/esm/Chip/ButtonChip.d.ts +1 -1
  8. package/build/esm/Chip/ChoiceChip.d.ts +1 -1
  9. package/build/esm/Combobox/Combobox.d.ts +7 -7
  10. package/build/esm/Dialog/Dialog.d.ts +1 -1
  11. package/build/esm/Dialog/DialogBackdrop.d.ts +1 -1
  12. package/build/esm/Dialog/DialogSurface.d.ts +1 -1
  13. package/build/esm/Menu/Menu.d.ts +5 -5
  14. package/build/esm/NavRail/NavRailItem.d.ts +3 -3
  15. package/build/esm/RadioButton/RadioGroup.d.ts +1 -1
  16. package/build/esm/Select/CustomContainerExample.d.ts +3 -0
  17. package/build/esm/Select/CustomContainerExample.js +59 -0
  18. package/build/esm/Select/CustomContainerExample.js.map +1 -0
  19. package/build/esm/Select/Select.d.ts +21 -7
  20. package/build/esm/Select/Select.js +52 -10
  21. package/build/esm/Select/Select.js.map +1 -1
  22. package/build/esm/Select/context.d.ts +5 -4
  23. package/build/esm/Select/context.js +2 -1
  24. package/build/esm/Select/context.js.map +1 -1
  25. package/build/esm/Select/defaultRender.d.ts +2 -1
  26. package/build/esm/Select/defaultRender.js +33 -4
  27. package/build/esm/Select/defaultRender.js.map +1 -1
  28. package/build/esm/SelectItem/SelectItem.d.ts +7 -3
  29. package/build/esm/SelectItem/SelectItem.js +14 -3
  30. package/build/esm/SelectItem/SelectItem.js.map +1 -1
  31. package/build/esm/Slider/Slider.d.ts +6 -6
  32. package/build/esm/Snackbar/Snackbar.d.ts +1 -1
  33. package/build/esm/Switch/Switch.d.ts +1 -1
  34. package/build/esm/Tab/Tab.d.ts +1 -1
  35. package/build/esm/Tab/TabList.d.ts +1 -1
  36. package/build/esm/Tab/TabPanel.d.ts +1 -1
  37. package/build/esm/TabIndicator/TabIndicator.d.ts +1 -1
  38. package/build/esm/Table/TableHead.d.ts +1 -1
  39. package/build/esm/TextField/FilledContainer.d.ts +4 -1
  40. package/build/esm/TextField/FilledContainer.js +5 -5
  41. package/build/esm/TextField/FilledContainer.js.map +1 -1
  42. package/build/esm/TextField/TextField.d.ts +1 -1
  43. package/build/esm/ThemeExplorer/ThemeBuilder.js +13 -2
  44. package/build/esm/ThemeExplorer/ThemeBuilder.js.map +1 -1
  45. package/build/esm/ThemeExplorer/ThemeColors.js +33 -15
  46. package/build/esm/ThemeExplorer/ThemeColors.js.map +1 -1
  47. package/build/esm/ThemeExplorer/components.d.ts +1 -1
  48. package/build/esm/ThemeExplorer/components.js +11 -13
  49. package/build/esm/ThemeExplorer/components.js.map +1 -1
  50. package/build/esm/ThemeExplorer/makeColorScheme.d.ts +32 -4
  51. package/build/esm/ThemeExplorer/makeColorScheme.js +41 -8
  52. package/build/esm/ThemeExplorer/makeColorScheme.js.map +1 -1
  53. package/build/esm/Tooltip/Tooltip.d.ts +1 -1
  54. package/build/esm/theme/theme.js +2 -2
  55. package/build/esm/theme/theme.js.map +1 -1
  56. package/build/tsconfig-build.tsbuildinfo +1 -1
  57. package/package.json +3 -3
  58. package/src/Select/CustomContainerExample.tsx +59 -0
  59. package/src/Select/Select.story.tsx +68 -69
  60. package/src/Select/Select.tsx +99 -27
  61. package/src/Select/SelectMultiple.story.tsx +215 -0
  62. package/src/Select/context.ts +5 -3
  63. package/src/Select/defaultRender.tsx +49 -0
  64. package/src/SelectItem/SelectItem.tsx +68 -46
  65. package/src/TextField/FilledContainer.tsx +6 -5
  66. package/src/ThemeExplorer/ThemeBuilder.tsx +16 -5
  67. package/src/ThemeExplorer/ThemeColors.tsx +39 -15
  68. package/src/ThemeExplorer/components.tsx +12 -20
  69. package/src/ThemeExplorer/makeColorScheme.tsx +39 -6
  70. package/src/theme/theme.ts +2 -2
  71. package/src/Select/defaultRender.ts +0 -19
package/src/ThemeExplorer/makeColorScheme.tsx CHANGED
@@ -22,11 +22,19 @@ export function makeColorScheme(opts: {
22
22
  'secondary-container': c(opts.secondary, 90),
23
23
  'tertiary-container': c(opts.tertiary, 90),
24
24
  'error-container': c(opts.error, 90),
25
- background: c(opts.neutral, 99),
26
- surface: c(opts.neutral, 99),
25
+ background: c(opts.neutral, 98),
27
26
  'surface-variant': c(opts.neutralVariant, 90),
28
27
  outline: c(opts.neutralVariant, 50),
29
28
  'outline-variant': c(opts.neutralVariant, 80),
29
+ // https://material.io/blog/tone-based-surface-color-m3
30
+ 'surface-dim': c(opts.neutral, 87),
31
+ surface: c(opts.neutral, 98),
32
+ 'surface-bright': c(opts.neutral, 98),
33
+ 'surface-container-lowest': c(opts.neutral, 100),
34
+ 'surface-container-low': c(opts.neutral, 96),
35
+ 'surface-container': c(opts.neutral, 94),
36
+ 'surface-container-high': c(opts.neutral, 92),
37
+ 'surface-container-highest': c(opts.neutral, 90),
30
38
  on: {
31
39
  primary: c(opts.primary, 100),
32
40
  secondary: c(opts.secondary, 100),
@@ -37,10 +45,18 @@ export function makeColorScheme(opts: {
37
45
  'tertiary-container': c(opts.tertiary, 10),
38
46
  'error-container': c(opts.error, 10),
39
47
  background: c(opts.neutral, 10),
40
- surface: c(opts.neutral, 10),
41
48
  'surface-variant': c(opts.neutralVariant, 30),
42
49
  outline: c(opts.neutralVariant, 95),
43
50
  'outline-variant': c(opts.neutralVariant, 10),
51
+ // https://material.io/blog/tone-based-surface-color-m3
52
+ 'surface-dim': c(opts.neutral, 10),
53
+ surface: c(opts.neutral, 10),
54
+ 'surface-bright': c(opts.neutral, 10),
55
+ 'surface-container-lowest': c(opts.neutral, 10),
56
+ 'surface-container-low': c(opts.neutral, 10),
57
+ 'surface-container': c(opts.neutral, 10),
58
+ 'surface-container-high': c(opts.neutral, 10),
59
+ 'surface-container-highest': c(opts.neutral, 10),
44
60
  },
45
61
  modes: {
46
62
  dark: {
@@ -52,11 +68,20 @@ export function makeColorScheme(opts: {
52
68
  'secondary-container': c(opts.secondary, 30),
53
69
  'tertiary-container': c(opts.tertiary, 30),
54
70
  'error-container': c(opts.error, 30),
55
- background: c(opts.neutral, 10),
56
- surface: c(opts.neutral, 10),
71
+ background: c(opts.neutral, 6),
57
72
  'surface-variant': c(opts.neutralVariant, 30),
58
73
  outline: c(opts.neutralVariant, 60),
59
74
  'outline-variant': c(opts.neutralVariant, 30),
75
+ // https://material.io/blog/tone-based-surface-color-m3
76
+ // TODO: get the actual values from here once updated: https://github.com/material-foundation/material-color-utilities/blob/main/dart/lib/scheme/scheme.dart#L126-L156
77
+ 'surface-dim': c(opts.neutral, 6),
78
+ surface: c(opts.neutral, 6),
79
+ 'surface-bright': c(opts.neutral, 24),
80
+ 'surface-container-lowest': c(opts.neutral, 4),
81
+ 'surface-container-low': c(opts.neutral, 10),
82
+ 'surface-container': c(opts.neutral, 12),
83
+ 'surface-container-high': c(opts.neutral, 17),
84
+ 'surface-container-highest': c(opts.neutral, 22),
60
85
  on: {
61
86
  primary: c(opts.primary, 20),
62
87
  secondary: c(opts.secondary, 20),
@@ -67,10 +92,18 @@ export function makeColorScheme(opts: {
67
92
  'tertiary-container': c(opts.tertiary, 90),
68
93
  'error-container': c(opts.error, 90),
69
94
  background: c(opts.neutral, 90),
70
- surface: c(opts.neutral, 90),
71
95
  'surface-variant': c(opts.neutralVariant, 80),
72
96
  outline: c(opts.neutralVariant, 10),
73
97
  'outline-variant': c(opts.neutralVariant, 90),
98
+ // https://material.io/blog/tone-based-surface-color-m3
99
+ 'surface-dim': c(opts.neutral, 90),
100
+ surface: c(opts.neutral, 90),
101
+ 'surface-bright': c(opts.neutral, 90),
102
+ 'surface-container-lowest': c(opts.neutral, 90),
103
+ 'surface-container-low': c(opts.neutral, 90),
104
+ 'surface-container': c(opts.neutral, 90),
105
+ 'surface-container-high': c(opts.neutral, 90),
106
+ 'surface-container-highest': c(opts.neutral, 90),
74
107
  },
75
108
  },
76
109
  },
package/src/theme/theme.ts CHANGED
@@ -486,8 +486,8 @@ export const theme = {
486
486
  styles: {
487
487
  root: {
488
488
  body: {
489
- fontFamily: 'body',
490
- fontWeight: 'body',
489
+ fontFamily: 'body1',
490
+ fontWeight: 'body1',
491
491
  lineHeight: 'body',
492
492
  backgroundColor: 'surface',
493
493
  color: 'on.surface',
package/src/Select/defaultRender.ts DELETED
@@ -1,19 +0,0 @@
1
- import type { ReactNode } from 'react';
2
- import { Children, isValidElement } from 'react';
3
-
4
- export const makeDefaultRender =
5
- (children?: ReactNode) =>
6
- (val?: string): string | undefined => {
7
- if (children && val !== undefined) {
8
- const allChildren = Children.toArray(children);
9
- for (let i = 0; i < allChildren.length; i++) {
10
- const child = allChildren[i];
11
- if (isValidElement(child)) {
12
- if (String(child.props.value) === val) {
13
- return child.props.children;
14
- }
15
- }
16
- }
17
- }
18
- return val || undefined;
19
- };