@m3-baseui/react-tailwind 1.1.0 → 1.3.0

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 (46) hide show
  1. package/dist/button-group.d.ts +48 -0
  2. package/dist/button-group.js +58 -0
  3. package/dist/button-group.js.map +1 -0
  4. package/dist/carousel.d.ts +115 -0
  5. package/dist/carousel.js +63 -0
  6. package/dist/carousel.js.map +1 -0
  7. package/dist/checkbox.js +5 -0
  8. package/dist/checkbox.js.map +1 -1
  9. package/dist/chip.d.ts +31 -0
  10. package/dist/chip.js +34 -7
  11. package/dist/chip.js.map +1 -1
  12. package/dist/date-picker.d.ts +188 -0
  13. package/dist/date-picker.js +151 -0
  14. package/dist/date-picker.js.map +1 -0
  15. package/dist/icon-button.js +4 -1
  16. package/dist/icon-button.js.map +1 -1
  17. package/dist/index.d.ts +9 -1
  18. package/dist/index.js +501 -29
  19. package/dist/index.js.map +1 -1
  20. package/dist/loading-indicator.d.ts +68 -0
  21. package/dist/loading-indicator.js +61 -0
  22. package/dist/loading-indicator.js.map +1 -0
  23. package/dist/navigation-bar.d.ts +5 -5
  24. package/dist/navigation-rail.d.ts +5 -5
  25. package/dist/radio.js +8 -3
  26. package/dist/radio.js.map +1 -1
  27. package/dist/search.d.ts +148 -0
  28. package/dist/search.js +105 -0
  29. package/dist/search.js.map +1 -0
  30. package/dist/segmented-button.d.ts +5 -5
  31. package/dist/slider.d.ts +33 -6
  32. package/dist/slider.js +16 -3
  33. package/dist/slider.js.map +1 -1
  34. package/dist/split-button.d.ts +201 -0
  35. package/dist/split-button.js +126 -0
  36. package/dist/split-button.js.map +1 -0
  37. package/dist/switch.js +4 -1
  38. package/dist/switch.js.map +1 -1
  39. package/dist/time-picker.d.ts +144 -0
  40. package/dist/time-picker.js +101 -0
  41. package/dist/time-picker.js.map +1 -0
  42. package/dist/toolbar.d.ts +73 -0
  43. package/dist/toolbar.js +55 -0
  44. package/dist/toolbar.js.map +1 -0
  45. package/package.json +41 -1
  46. package/styles/preset.css +15 -0
package/dist/date-picker.d.ts ADDED
@@ -0,0 +1,188 @@
1
+ import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config.js';
2
+ import * as tailwind_variants from 'tailwind-variants';
3
+ import { createDatePicker } from '@m3-baseui/core';
4
+
5
+ declare const datePickerTv: tailwind_variants.TVReturnType<{
6
+ [key: string]: {
7
+ [key: string]: tailwind_variants.ClassValue | {
8
+ input?: tailwind_variants.ClassValue;
9
+ grid?: tailwind_variants.ClassValue;
10
+ popup?: tailwind_variants.ClassValue;
11
+ header?: tailwind_variants.ClassValue;
12
+ weekday?: tailwind_variants.ClassValue;
13
+ calendar?: tailwind_variants.ClassValue;
14
+ navButton?: tailwind_variants.ClassValue;
15
+ monthLabel?: tailwind_variants.ClassValue;
16
+ weekdays?: tailwind_variants.ClassValue;
17
+ day?: tailwind_variants.ClassValue;
18
+ yearGrid?: tailwind_variants.ClassValue;
19
+ yearButton?: tailwind_variants.ClassValue;
20
+ field?: tailwind_variants.ClassValue;
21
+ fieldIcon?: tailwind_variants.ClassValue;
22
+ modalBackdrop?: tailwind_variants.ClassValue;
23
+ modalPopup?: tailwind_variants.ClassValue;
24
+ modalHeader?: tailwind_variants.ClassValue;
25
+ modalHeadline?: tailwind_variants.ClassValue;
26
+ modalActions?: tailwind_variants.ClassValue;
27
+ };
28
+ };
29
+ } | {
30
+ [x: string]: {
31
+ [x: string]: tailwind_variants.ClassValue | {
32
+ input?: tailwind_variants.ClassValue;
33
+ grid?: tailwind_variants.ClassValue;
34
+ popup?: tailwind_variants.ClassValue;
35
+ header?: tailwind_variants.ClassValue;
36
+ weekday?: tailwind_variants.ClassValue;
37
+ calendar?: tailwind_variants.ClassValue;
38
+ navButton?: tailwind_variants.ClassValue;
39
+ monthLabel?: tailwind_variants.ClassValue;
40
+ weekdays?: tailwind_variants.ClassValue;
41
+ day?: tailwind_variants.ClassValue;
42
+ yearGrid?: tailwind_variants.ClassValue;
43
+ yearButton?: tailwind_variants.ClassValue;
44
+ field?: tailwind_variants.ClassValue;
45
+ fieldIcon?: tailwind_variants.ClassValue;
46
+ modalBackdrop?: tailwind_variants.ClassValue;
47
+ modalPopup?: tailwind_variants.ClassValue;
48
+ modalHeader?: tailwind_variants.ClassValue;
49
+ modalHeadline?: tailwind_variants.ClassValue;
50
+ modalActions?: tailwind_variants.ClassValue;
51
+ };
52
+ };
53
+ } | {}, {
54
+ calendar: string[];
55
+ header: string[];
56
+ navButton: string[];
57
+ monthLabel: string[];
58
+ grid: string[];
59
+ weekdays: string[];
60
+ weekday: string[];
61
+ day: string[];
62
+ yearGrid: string[];
63
+ yearButton: string[];
64
+ field: string[];
65
+ input: string[];
66
+ fieldIcon: string[];
67
+ popup: string[];
68
+ modalBackdrop: string[];
69
+ modalPopup: string[];
70
+ modalHeader: string[];
71
+ modalHeadline: string[];
72
+ modalActions: string[];
73
+ }, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
74
+ [key: string]: {
75
+ [key: string]: tailwind_variants.ClassValue | {
76
+ input?: tailwind_variants.ClassValue;
77
+ grid?: tailwind_variants.ClassValue;
78
+ popup?: tailwind_variants.ClassValue;
79
+ header?: tailwind_variants.ClassValue;
80
+ weekday?: tailwind_variants.ClassValue;
81
+ calendar?: tailwind_variants.ClassValue;
82
+ navButton?: tailwind_variants.ClassValue;
83
+ monthLabel?: tailwind_variants.ClassValue;
84
+ weekdays?: tailwind_variants.ClassValue;
85
+ day?: tailwind_variants.ClassValue;
86
+ yearGrid?: tailwind_variants.ClassValue;
87
+ yearButton?: tailwind_variants.ClassValue;
88
+ field?: tailwind_variants.ClassValue;
89
+ fieldIcon?: tailwind_variants.ClassValue;
90
+ modalBackdrop?: tailwind_variants.ClassValue;
91
+ modalPopup?: tailwind_variants.ClassValue;
92
+ modalHeader?: tailwind_variants.ClassValue;
93
+ modalHeadline?: tailwind_variants.ClassValue;
94
+ modalActions?: tailwind_variants.ClassValue;
95
+ };
96
+ };
97
+ } | {}>, {
98
+ [key: string]: {
99
+ [key: string]: tailwind_variants.ClassValue | {
100
+ input?: tailwind_variants.ClassValue;
101
+ grid?: tailwind_variants.ClassValue;
102
+ popup?: tailwind_variants.ClassValue;
103
+ header?: tailwind_variants.ClassValue;
104
+ weekday?: tailwind_variants.ClassValue;
105
+ calendar?: tailwind_variants.ClassValue;
106
+ navButton?: tailwind_variants.ClassValue;
107
+ monthLabel?: tailwind_variants.ClassValue;
108
+ weekdays?: tailwind_variants.ClassValue;
109
+ day?: tailwind_variants.ClassValue;
110
+ yearGrid?: tailwind_variants.ClassValue;
111
+ yearButton?: tailwind_variants.ClassValue;
112
+ field?: tailwind_variants.ClassValue;
113
+ fieldIcon?: tailwind_variants.ClassValue;
114
+ modalBackdrop?: tailwind_variants.ClassValue;
115
+ modalPopup?: tailwind_variants.ClassValue;
116
+ modalHeader?: tailwind_variants.ClassValue;
117
+ modalHeadline?: tailwind_variants.ClassValue;
118
+ modalActions?: tailwind_variants.ClassValue;
119
+ };
120
+ };
121
+ } | {}, {
122
+ calendar: string[];
123
+ header: string[];
124
+ navButton: string[];
125
+ monthLabel: string[];
126
+ grid: string[];
127
+ weekdays: string[];
128
+ weekday: string[];
129
+ day: string[];
130
+ yearGrid: string[];
131
+ yearButton: string[];
132
+ field: string[];
133
+ input: string[];
134
+ fieldIcon: string[];
135
+ popup: string[];
136
+ modalBackdrop: string[];
137
+ modalPopup: string[];
138
+ modalHeader: string[];
139
+ modalHeadline: string[];
140
+ modalActions: string[];
141
+ }, tailwind_variants.TVReturnType<unknown, {
142
+ calendar: string[];
143
+ header: string[];
144
+ navButton: string[];
145
+ monthLabel: string[];
146
+ grid: string[];
147
+ weekdays: string[];
148
+ weekday: string[];
149
+ day: string[];
150
+ yearGrid: string[];
151
+ yearButton: string[];
152
+ field: string[];
153
+ input: string[];
154
+ fieldIcon: string[];
155
+ popup: string[];
156
+ modalBackdrop: string[];
157
+ modalPopup: string[];
158
+ modalHeader: string[];
159
+ modalHeadline: string[];
160
+ modalActions: string[];
161
+ }, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
162
+ [key: string]: {
163
+ [key: string]: tailwind_variants.ClassValue | {
164
+ input?: tailwind_variants.ClassValue;
165
+ grid?: tailwind_variants.ClassValue;
166
+ popup?: tailwind_variants.ClassValue;
167
+ header?: tailwind_variants.ClassValue;
168
+ weekday?: tailwind_variants.ClassValue;
169
+ calendar?: tailwind_variants.ClassValue;
170
+ navButton?: tailwind_variants.ClassValue;
171
+ monthLabel?: tailwind_variants.ClassValue;
172
+ weekdays?: tailwind_variants.ClassValue;
173
+ day?: tailwind_variants.ClassValue;
174
+ yearGrid?: tailwind_variants.ClassValue;
175
+ yearButton?: tailwind_variants.ClassValue;
176
+ field?: tailwind_variants.ClassValue;
177
+ fieldIcon?: tailwind_variants.ClassValue;
178
+ modalBackdrop?: tailwind_variants.ClassValue;
179
+ modalPopup?: tailwind_variants.ClassValue;
180
+ modalHeader?: tailwind_variants.ClassValue;
181
+ modalHeadline?: tailwind_variants.ClassValue;
182
+ modalActions?: tailwind_variants.ClassValue;
183
+ };
184
+ };
185
+ } | {}>, unknown, unknown, undefined>>;
186
+ declare const DatePicker: ReturnType<typeof createDatePicker>;
187
+
188
+ export { DatePicker, datePickerTv };
package/dist/date-picker.js ADDED
@@ -0,0 +1,151 @@
1
+ "use client";
2
+ import { createDatePicker } from '@m3-baseui/core';
3
+ import { tv as tv$1 } from 'tailwind-variants';
4
+
5
+ // src/date-picker.ts
6
+ var TYPESCALE = [
7
+ "display-large",
8
+ "display-medium",
9
+ "display-small",
10
+ "headline-large",
11
+ "headline-medium",
12
+ "headline-small",
13
+ "title-large",
14
+ "title-medium",
15
+ "title-small",
16
+ "body-large",
17
+ "body-medium",
18
+ "body-small",
19
+ "label-large",
20
+ "label-medium",
21
+ "label-small"
22
+ ];
23
+ var tv = (options, config) => tv$1(options, {
24
+ ...config,
25
+ twMergeConfig: {
26
+ extend: {
27
+ classGroups: {
28
+ "font-size": [{ text: [...TYPESCALE] }]
29
+ }
30
+ }
31
+ }
32
+ });
33
+
34
+ // src/date-picker.ts
35
+ var datePickerTv = tv({
36
+ slots: {
37
+ calendar: ["w-[328px] max-w-full p-3 text-on-surface"],
38
+ header: ["flex items-center justify-between gap-2 h-12 pl-3 pr-1"],
39
+ navButton: [
40
+ "relative inline-flex items-center justify-center size-10 rounded-full overflow-hidden",
41
+ "text-on-surface-variant cursor-pointer outline-none [&>svg]:size-6",
42
+ "before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100",
43
+ "hover:before:opacity-[var(--md-sys-state-hover)]",
44
+ "focus-visible:before:opacity-[var(--md-sys-state-focus)]",
45
+ "active:before:opacity-[var(--md-sys-state-pressed)]",
46
+ "disabled:text-on-surface/[0.38] disabled:before:opacity-0 disabled:pointer-events-none"
47
+ ],
48
+ monthLabel: [
49
+ "relative inline-flex items-center gap-1 h-9 px-3 rounded-full overflow-hidden",
50
+ "text-label-large text-on-surface-variant cursor-pointer outline-none",
51
+ "before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100",
52
+ "hover:before:opacity-[var(--md-sys-state-hover)]",
53
+ "focus-visible:before:opacity-[var(--md-sys-state-focus)]",
54
+ "[&>svg]:transition-transform data-[view=years]:[&>svg]:rotate-180"
55
+ ],
56
+ grid: ["mt-2 border-collapse", "[&_td]:p-0 [&_td]:text-center"],
57
+ weekdays: [""],
58
+ weekday: ["size-12 font-normal text-body-large text-on-surface-variant"],
59
+ day: [
60
+ "relative inline-flex items-center justify-center size-12 rounded-full overflow-hidden",
61
+ "text-body-large text-on-surface cursor-pointer outline-none",
62
+ "before:absolute before:inset-0 before:rounded-full before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100",
63
+ "hover:before:opacity-[var(--md-sys-state-hover)]",
64
+ "focus-visible:before:opacity-[var(--md-sys-state-focus)]",
65
+ "active:before:opacity-[var(--md-sys-state-pressed)]",
66
+ // today: 1px primary outline ring
67
+ "data-[today]:ring-1 data-[today]:ring-inset data-[today]:ring-primary",
68
+ // selected: primary fill, on-primary label, no state layer tint shift
69
+ "data-[selected]:bg-primary data-[selected]:text-on-primary",
70
+ "data-[disabled]:text-on-surface/[0.38] data-[disabled]:before:opacity-0 data-[disabled]:pointer-events-none"
71
+ ],
72
+ // weeks render as 7-col rows; force grid layout on each row
73
+ yearGrid: ["grid grid-cols-3 gap-2 max-h-[280px] overflow-y-auto px-3 py-2"],
74
+ yearButton: [
75
+ "relative inline-flex items-center justify-center h-9 rounded-full overflow-hidden",
76
+ "text-label-large text-on-surface-variant cursor-pointer outline-none",
77
+ "before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100",
78
+ "hover:before:opacity-[var(--md-sys-state-hover)]",
79
+ "focus-visible:before:opacity-[var(--md-sys-state-focus)]",
80
+ "data-[selected]:bg-primary data-[selected]:text-on-primary"
81
+ ],
82
+ field: [
83
+ "inline-flex items-center gap-1 h-14 pl-4 pr-1 min-w-[200px]",
84
+ "bg-surface-container-highest text-on-surface rounded-t-extra-small",
85
+ "border-b border-on-surface-variant"
86
+ ],
87
+ input: [
88
+ "flex-1 min-w-0 h-full bg-transparent border-0 outline-none",
89
+ "text-body-large text-on-surface placeholder:text-on-surface-variant"
90
+ ],
91
+ fieldIcon: [
92
+ "relative inline-flex items-center justify-center size-10 rounded-full overflow-hidden",
93
+ "text-on-surface-variant cursor-pointer outline-none [&>svg]:size-6",
94
+ "before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100",
95
+ "hover:before:opacity-[var(--md-sys-state-hover)]",
96
+ "focus-visible:before:opacity-[var(--md-sys-state-focus)]",
97
+ "active:before:opacity-[var(--md-sys-state-pressed)]"
98
+ ],
99
+ popup: [
100
+ "bg-surface-container-high text-on-surface rounded-large shadow-level2",
101
+ "origin-[var(--transform-origin)] transition-[opacity,transform] duration-150 ease-standard",
102
+ "data-[starting-style]:opacity-0 data-[starting-style]:scale-95",
103
+ "data-[ending-style]:opacity-0",
104
+ "focus:outline-none"
105
+ ],
106
+ modalBackdrop: [
107
+ "fixed inset-0 z-40 bg-scrim/32",
108
+ "transition-opacity duration-200 ease-standard",
109
+ "data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"
110
+ ],
111
+ modalPopup: [
112
+ "fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2",
113
+ "w-[min(360px,calc(100vw-48px))] max-h-[calc(100vh-48px)] overflow-auto",
114
+ "bg-surface-container-high text-on-surface rounded-extra-large shadow-level3",
115
+ "flex flex-col",
116
+ "origin-[var(--transform-origin)] transition-[opacity,transform] duration-200 ease-emphasized",
117
+ "data-[starting-style]:opacity-0 data-[starting-style]:scale-95",
118
+ "data-[ending-style]:opacity-0 data-[ending-style]:scale-95",
119
+ "focus:outline-none"
120
+ ],
121
+ modalHeader: ["px-6 pt-4 text-label-medium text-on-surface-variant m-0"],
122
+ modalHeadline: ["px-6 pt-1 pb-4 text-headline-large text-on-surface m-0"],
123
+ modalActions: ["flex justify-end gap-2 px-6 pb-4 pt-2"]
124
+ }
125
+ });
126
+ var dp = datePickerTv();
127
+ var DatePicker = createDatePicker({
128
+ calendar: dp.calendar(),
129
+ header: dp.header(),
130
+ navButton: dp.navButton(),
131
+ monthLabel: dp.monthLabel(),
132
+ grid: dp.grid(),
133
+ weekdays: dp.weekdays(),
134
+ weekday: dp.weekday(),
135
+ day: dp.day(),
136
+ yearGrid: dp.yearGrid(),
137
+ yearButton: dp.yearButton(),
138
+ field: dp.field(),
139
+ input: dp.input(),
140
+ fieldIcon: dp.fieldIcon(),
141
+ popup: dp.popup(),
142
+ modalBackdrop: dp.modalBackdrop(),
143
+ modalPopup: dp.modalPopup(),
144
+ modalHeader: dp.modalHeader(),
145
+ modalHeadline: dp.modalHeadline(),
146
+ modalActions: dp.modalActions()
147
+ });
148
+
149
+ export { DatePicker, datePickerTv };
150
+ //# sourceMappingURL=date-picker.js.map
151
+ //# sourceMappingURL=date-picker.js.map
package/dist/date-picker.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/tv.ts","../src/date-picker.ts"],"names":["baseTv"],"mappings":"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","file":"date-picker.js","sourcesContent":["/**\n * tv.ts — a tailwind-variants factory pre-configured for the M3 typescale.\n *\n * The Tailwind v4 preset exposes the 15 typescale roles as `text-<role>`\n * font-size utilities (e.g. `text-body-small`, `text-label-large`). Stock\n * tailwind-merge does not know these custom names, so it groups them with the\n * `text-<color>` utilities and drops one when a slot sets both a color *and* a\n * typescale (the common M3 case). That silently strips either the color or the\n * type, breaking token compliance.\n *\n * Teaching tailwind-merge that the typescale names belong to the `font-size`\n * group keeps color and type independent, so both survive the merge.\n */\nimport { type TV, tv as baseTv } from 'tailwind-variants';\n\nconst TYPESCALE = [\n 'display-large',\n 'display-medium',\n 'display-small',\n 'headline-large',\n 'headline-medium',\n 'headline-small',\n 'title-large',\n 'title-medium',\n 'title-small',\n 'body-large',\n 'body-medium',\n 'body-small',\n 'label-large',\n 'label-medium',\n 'label-small',\n] as const;\n\nexport const tv: TV = (options, config) =>\n baseTv(options, {\n ...config,\n twMergeConfig: {\n extend: {\n classGroups: {\n 'font-size': [{ text: [...TYPESCALE] }],\n },\n },\n },\n });\n","/**\n * date-picker.ts — Tailwind classes for the M3 Date picker.\n *\n * The month-grid Calendar plus its two surfaces: a docked Popover\n * (surface-container-high, elevation 2, large corners) and a modal Dialog\n * (surface-container-high, elevation 3, extra-large corners). Day cells carry a\n * circular `before:` state layer keyed to hover; the selected day fills with\n * primary. Same DOM + ripple as the VE build.\n */\nimport { createDatePicker } from '@m3-baseui/core';\nimport { tv } from './tv';\n\nexport const datePickerTv = tv({\n slots: {\n calendar: ['w-[328px] max-w-full p-3 text-on-surface'],\n header: ['flex items-center justify-between gap-2 h-12 pl-3 pr-1'],\n navButton: [\n 'relative inline-flex items-center justify-center size-10 rounded-full overflow-hidden',\n 'text-on-surface-variant cursor-pointer outline-none [&>svg]:size-6',\n 'before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100',\n 'hover:before:opacity-[var(--md-sys-state-hover)]',\n 'focus-visible:before:opacity-[var(--md-sys-state-focus)]',\n 'active:before:opacity-[var(--md-sys-state-pressed)]',\n 'disabled:text-on-surface/[0.38] disabled:before:opacity-0 disabled:pointer-events-none',\n ],\n monthLabel: [\n 'relative inline-flex items-center gap-1 h-9 px-3 rounded-full overflow-hidden',\n 'text-label-large text-on-surface-variant cursor-pointer outline-none',\n 'before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100',\n 'hover:before:opacity-[var(--md-sys-state-hover)]',\n 'focus-visible:before:opacity-[var(--md-sys-state-focus)]',\n '[&>svg]:transition-transform data-[view=years]:[&>svg]:rotate-180',\n ],\n grid: ['mt-2 border-collapse', '[&_td]:p-0 [&_td]:text-center'],\n weekdays: [''],\n weekday: ['size-12 font-normal text-body-large text-on-surface-variant'],\n day: [\n 'relative inline-flex items-center justify-center size-12 rounded-full overflow-hidden',\n 'text-body-large text-on-surface cursor-pointer outline-none',\n 'before:absolute before:inset-0 before:rounded-full before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100',\n 'hover:before:opacity-[var(--md-sys-state-hover)]',\n 'focus-visible:before:opacity-[var(--md-sys-state-focus)]',\n 'active:before:opacity-[var(--md-sys-state-pressed)]',\n // today: 1px primary outline ring\n 'data-[today]:ring-1 data-[today]:ring-inset data-[today]:ring-primary',\n // selected: primary fill, on-primary label, no state layer tint shift\n 'data-[selected]:bg-primary data-[selected]:text-on-primary',\n 'data-[disabled]:text-on-surface/[0.38] data-[disabled]:before:opacity-0 data-[disabled]:pointer-events-none',\n ],\n // weeks render as 7-col rows; force grid layout on each row\n yearGrid: ['grid grid-cols-3 gap-2 max-h-[280px] overflow-y-auto px-3 py-2'],\n yearButton: [\n 'relative inline-flex items-center justify-center h-9 rounded-full overflow-hidden',\n 'text-label-large text-on-surface-variant cursor-pointer outline-none',\n 'before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100',\n 'hover:before:opacity-[var(--md-sys-state-hover)]',\n 'focus-visible:before:opacity-[var(--md-sys-state-focus)]',\n 'data-[selected]:bg-primary data-[selected]:text-on-primary',\n ],\n\n field: [\n 'inline-flex items-center gap-1 h-14 pl-4 pr-1 min-w-[200px]',\n 'bg-surface-container-highest text-on-surface rounded-t-extra-small',\n 'border-b border-on-surface-variant',\n ],\n input: [\n 'flex-1 min-w-0 h-full bg-transparent border-0 outline-none',\n 'text-body-large text-on-surface placeholder:text-on-surface-variant',\n ],\n fieldIcon: [\n 'relative inline-flex items-center justify-center size-10 rounded-full overflow-hidden',\n 'text-on-surface-variant cursor-pointer outline-none [&>svg]:size-6',\n 'before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100',\n 'hover:before:opacity-[var(--md-sys-state-hover)]',\n 'focus-visible:before:opacity-[var(--md-sys-state-focus)]',\n 'active:before:opacity-[var(--md-sys-state-pressed)]',\n ],\n popup: [\n 'bg-surface-container-high text-on-surface rounded-large shadow-level2',\n 'origin-[var(--transform-origin)] transition-[opacity,transform] duration-150 ease-standard',\n 'data-[starting-style]:opacity-0 data-[starting-style]:scale-95',\n 'data-[ending-style]:opacity-0',\n 'focus:outline-none',\n ],\n\n modalBackdrop: [\n 'fixed inset-0 z-40 bg-scrim/32',\n 'transition-opacity duration-200 ease-standard',\n 'data-[starting-style]:opacity-0 data-[ending-style]:opacity-0',\n ],\n modalPopup: [\n 'fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2',\n 'w-[min(360px,calc(100vw-48px))] max-h-[calc(100vh-48px)] overflow-auto',\n 'bg-surface-container-high text-on-surface rounded-extra-large shadow-level3',\n 'flex flex-col',\n 'origin-[var(--transform-origin)] transition-[opacity,transform] duration-200 ease-emphasized',\n 'data-[starting-style]:opacity-0 data-[starting-style]:scale-95',\n 'data-[ending-style]:opacity-0 data-[ending-style]:scale-95',\n 'focus:outline-none',\n ],\n modalHeader: ['px-6 pt-4 text-label-medium text-on-surface-variant m-0'],\n modalHeadline: ['px-6 pt-1 pb-4 text-headline-large text-on-surface m-0'],\n modalActions: ['flex justify-end gap-2 px-6 pb-4 pt-2'],\n },\n});\n\nconst dp = datePickerTv();\nexport const DatePicker: ReturnType<typeof createDatePicker> = createDatePicker({\n calendar: dp.calendar(),\n header: dp.header(),\n navButton: dp.navButton(),\n monthLabel: dp.monthLabel(),\n grid: dp.grid(),\n weekdays: dp.weekdays(),\n weekday: dp.weekday(),\n day: dp.day(),\n yearGrid: dp.yearGrid(),\n yearButton: dp.yearButton(),\n field: dp.field(),\n input: dp.input(),\n fieldIcon: dp.fieldIcon(),\n popup: dp.popup(),\n modalBackdrop: dp.modalBackdrop(),\n modalPopup: dp.modalPopup(),\n modalHeader: dp.modalHeader(),\n modalHeadline: dp.modalHeadline(),\n modalActions: dp.modalActions(),\n});\n"]}
package/dist/icon-button.js CHANGED
@@ -25,7 +25,10 @@ var widthCompounds = Object.entries(WIDTHS).flatMap(
25
25
  var iconButton = tv({
26
26
  base: [
27
27
  "relative inline-flex items-center justify-center shrink-0",
28
- "rounded-full overflow-hidden cursor-pointer select-none border-0 bg-transparent",
28
+ // No `overflow-hidden`: it would clip the 48dp touch target on small sizes.
29
+ // The state layer is already rounded (before:rounded-[inherit]); the ripple
30
+ // self-clips.
31
+ "rounded-full cursor-pointer select-none border-0 bg-transparent",
29
32
  "transition-[box-shadow,background-color,color] duration-200 ease-standard",
30
33
  // State layer overlay
31
34
  "before:absolute before:inset-0 before:rounded-[inherit] before:bg-current before:opacity-0 before:pointer-events-none",
package/dist/icon-button.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/icon-button.ts"],"names":[],"mappings":"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","file":"icon-button.js","sourcesContent":["/**\n * icon-button.ts — tailwind-variants resolver for the M3 Icon Button.\n *\n * 40×40 circular target with a centered icon. The `selected` variant supports\n * toggle icon buttons; when `selected` is undefined the variant's default\n * (filled/active) look is used. Emits the same DOM + ripple as the VE build.\n */\nimport { createIconButton } from '@m3-baseui/core';\nimport { tv } from 'tailwind-variants';\n\n// M3 Expressive container widths (px) per size × width. Tailwind v4's dynamic\n// spacing scale resolves any integer (e.g. w-13 = 52px, w-46 = 184px).\nconst WIDTHS = {\n xs: { narrow: 'w-7', default: 'w-8', wide: 'w-10' }, // 28 / 32 / 40\n s: { narrow: 'w-8', default: 'w-10', wide: 'w-13' }, // 32 / 40 / 52\n m: { narrow: 'w-12', default: 'w-14', wide: 'w-18' }, // 48 / 56 / 72\n l: { narrow: 'w-16', default: 'w-24', wide: 'w-32' }, // 64 / 96 / 128\n xl: { narrow: 'w-26', default: 'w-34', wide: 'w-46' }, // 104 / 136 / 184\n} as const;\n\nconst widthCompounds = Object.entries(WIDTHS).flatMap(([size, w]) =>\n Object.entries(w).map(([width, klass]) => ({\n size: size as keyof typeof WIDTHS,\n width: width as 'narrow' | 'default' | 'wide',\n class: klass,\n })),\n);\n\nexport const iconButton = tv({\n base: [\n 'relative inline-flex items-center justify-center shrink-0',\n 'rounded-full overflow-hidden cursor-pointer select-none border-0 bg-transparent',\n 'transition-[box-shadow,background-color,color] duration-200 ease-standard',\n // State layer overlay\n 'before:absolute before:inset-0 before:rounded-[inherit] before:bg-current before:opacity-0 before:pointer-events-none',\n 'before:transition-opacity before:duration-100',\n 'hover:before:opacity-[var(--md-sys-state-hover)]',\n 'focus-visible:before:opacity-[var(--md-sys-state-focus)]',\n 'active:before:opacity-[var(--md-sys-state-pressed)]',\n 'data-[pressed]:before:opacity-[var(--md-sys-state-pressed)]',\n // Focus ring (M3: 3px secondary, 2px offset)\n 'focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-secondary',\n // Disabled: no interaction, no state layer. Per-variant disabled colors\n // (container on-surface/12, icon on-surface/38) live on each variant.\n 'disabled:pointer-events-none disabled:before:opacity-0',\n 'data-[disabled]:pointer-events-none data-[disabled]:before:opacity-0',\n ],\n variants: {\n // Disabled icon is on-surface/38 for every variant; filled/tonal disabled\n // container is on-surface/12; outlined disabled outline is on-surface/12\n // (material-web parity).\n variant: {\n standard: [\n 'text-on-surface-variant',\n 'disabled:text-on-surface/38 data-[disabled]:text-on-surface/38',\n ],\n filled: [\n 'bg-primary text-on-primary',\n 'disabled:bg-on-surface/12 disabled:text-on-surface/38',\n 'data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38',\n ],\n tonal: [\n 'bg-secondary-container text-on-secondary-container',\n 'disabled:bg-on-surface/12 disabled:text-on-surface/38',\n 'data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38',\n ],\n outlined: [\n 'border border-outline text-on-surface-variant',\n 'disabled:border-on-surface/12 disabled:text-on-surface/38',\n 'data-[disabled]:border-on-surface/12 data-[disabled]:text-on-surface/38',\n ],\n },\n selected: {\n true: '',\n false: '',\n },\n // Container height + icon size per M3 Expressive size. Width comes from the\n // (size, width) compound variants below.\n size: {\n xs: 'h-8 [&>svg]:size-5',\n s: 'h-10 [&>svg]:size-6',\n m: 'h-14 [&>svg]:size-6',\n l: 'h-24 [&>svg]:size-8',\n xl: 'h-[136px] [&>svg]:size-10',\n },\n width: {\n narrow: '',\n default: '',\n wide: '',\n },\n },\n compoundVariants: [\n ...widthCompounds,\n { variant: 'standard', selected: true, class: 'text-primary' },\n { variant: 'filled', selected: false, class: 'bg-surface-container-highest text-primary' },\n {\n variant: 'tonal',\n selected: false,\n class: 'bg-surface-container-highest text-on-surface-variant',\n },\n {\n variant: 'outlined',\n selected: true,\n class: [\n 'bg-inverse-surface text-inverse-on-surface border-transparent',\n // M3 disabled + selected: faint on-surface/12 container, no outline\n // (icon falls back to on-surface/38 from the variant). NOT transparent.\n 'disabled:bg-on-surface/12 disabled:border-transparent',\n 'data-[disabled]:bg-on-surface/12 data-[disabled]:border-transparent',\n ],\n },\n ],\n defaultVariants: {\n variant: 'standard',\n size: 's',\n width: 'default',\n },\n});\n\nexport const IconButton = createIconButton(({ variant, selected, size, width }) =>\n iconButton({ variant, selected, size, width }),\n);\nexport type { IconButtonProps, IconButtonVariant } from '@m3-baseui/core';\n"]}
1
+ {"version":3,"sources":["../src/icon-button.ts"],"names":[],"mappings":"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","file":"icon-button.js","sourcesContent":["/**\n * icon-button.ts — tailwind-variants resolver for the M3 Icon Button.\n *\n * 40×40 circular target with a centered icon. The `selected` variant supports\n * toggle icon buttons; when `selected` is undefined the variant's default\n * (filled/active) look is used. Emits the same DOM + ripple as the VE build.\n */\nimport { createIconButton } from '@m3-baseui/core';\nimport { tv } from 'tailwind-variants';\n\n// M3 Expressive container widths (px) per size × width. Tailwind v4's dynamic\n// spacing scale resolves any integer (e.g. w-13 = 52px, w-46 = 184px).\nconst WIDTHS = {\n xs: { narrow: 'w-7', default: 'w-8', wide: 'w-10' }, // 28 / 32 / 40\n s: { narrow: 'w-8', default: 'w-10', wide: 'w-13' }, // 32 / 40 / 52\n m: { narrow: 'w-12', default: 'w-14', wide: 'w-18' }, // 48 / 56 / 72\n l: { narrow: 'w-16', default: 'w-24', wide: 'w-32' }, // 64 / 96 / 128\n xl: { narrow: 'w-26', default: 'w-34', wide: 'w-46' }, // 104 / 136 / 184\n} as const;\n\nconst widthCompounds = Object.entries(WIDTHS).flatMap(([size, w]) =>\n Object.entries(w).map(([width, klass]) => ({\n size: size as keyof typeof WIDTHS,\n width: width as 'narrow' | 'default' | 'wide',\n class: klass,\n })),\n);\n\nexport const iconButton = tv({\n base: [\n 'relative inline-flex items-center justify-center shrink-0',\n // No `overflow-hidden`: it would clip the 48dp touch target on small sizes.\n // The state layer is already rounded (before:rounded-[inherit]); the ripple\n // self-clips.\n 'rounded-full cursor-pointer select-none border-0 bg-transparent',\n 'transition-[box-shadow,background-color,color] duration-200 ease-standard',\n // State layer overlay\n 'before:absolute before:inset-0 before:rounded-[inherit] before:bg-current before:opacity-0 before:pointer-events-none',\n 'before:transition-opacity before:duration-100',\n 'hover:before:opacity-[var(--md-sys-state-hover)]',\n 'focus-visible:before:opacity-[var(--md-sys-state-focus)]',\n 'active:before:opacity-[var(--md-sys-state-pressed)]',\n 'data-[pressed]:before:opacity-[var(--md-sys-state-pressed)]',\n // Focus ring (M3: 3px secondary, 2px offset)\n 'focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-secondary',\n // Disabled: no interaction, no state layer. Per-variant disabled colors\n // (container on-surface/12, icon on-surface/38) live on each variant.\n 'disabled:pointer-events-none disabled:before:opacity-0',\n 'data-[disabled]:pointer-events-none data-[disabled]:before:opacity-0',\n ],\n variants: {\n // Disabled icon is on-surface/38 for every variant; filled/tonal disabled\n // container is on-surface/12; outlined disabled outline is on-surface/12\n // (material-web parity).\n variant: {\n standard: [\n 'text-on-surface-variant',\n 'disabled:text-on-surface/38 data-[disabled]:text-on-surface/38',\n ],\n filled: [\n 'bg-primary text-on-primary',\n 'disabled:bg-on-surface/12 disabled:text-on-surface/38',\n 'data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38',\n ],\n tonal: [\n 'bg-secondary-container text-on-secondary-container',\n 'disabled:bg-on-surface/12 disabled:text-on-surface/38',\n 'data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38',\n ],\n outlined: [\n 'border border-outline text-on-surface-variant',\n 'disabled:border-on-surface/12 disabled:text-on-surface/38',\n 'data-[disabled]:border-on-surface/12 data-[disabled]:text-on-surface/38',\n ],\n },\n selected: {\n true: '',\n false: '',\n },\n // Container height + icon size per M3 Expressive size. Width comes from the\n // (size, width) compound variants below.\n size: {\n xs: 'h-8 [&>svg]:size-5',\n s: 'h-10 [&>svg]:size-6',\n m: 'h-14 [&>svg]:size-6',\n l: 'h-24 [&>svg]:size-8',\n xl: 'h-[136px] [&>svg]:size-10',\n },\n width: {\n narrow: '',\n default: '',\n wide: '',\n },\n },\n compoundVariants: [\n ...widthCompounds,\n { variant: 'standard', selected: true, class: 'text-primary' },\n { variant: 'filled', selected: false, class: 'bg-surface-container-highest text-primary' },\n {\n variant: 'tonal',\n selected: false,\n class: 'bg-surface-container-highest text-on-surface-variant',\n },\n {\n variant: 'outlined',\n selected: true,\n class: [\n 'bg-inverse-surface text-inverse-on-surface border-transparent',\n // M3 disabled + selected: faint on-surface/12 container, no outline\n // (icon falls back to on-surface/38 from the variant). NOT transparent.\n 'disabled:bg-on-surface/12 disabled:border-transparent',\n 'data-[disabled]:bg-on-surface/12 data-[disabled]:border-transparent',\n ],\n },\n ],\n defaultVariants: {\n variant: 'standard',\n size: 's',\n width: 'default',\n },\n});\n\nexport const IconButton = createIconButton(({ variant, selected, size, width }) =>\n iconButton({ variant, selected, size, width }),\n);\nexport type { IconButtonProps, IconButtonVariant } from '@m3-baseui/core';\n"]}
package/dist/index.d.ts CHANGED
@@ -16,19 +16,27 @@ export { Fab, fabTv } from './fab.js';
16
16
  export { FabMenu, fabMenuTv } from './fab-menu.js';
17
17
  export { Divider, dividerTv } from './divider.js';
18
18
  export { Progress, circularTv, linearTv } from './progress.js';
19
+ export { LoadingIndicator, loadingIndicatorTv } from './loading-indicator.js';
19
20
  export { List, listTv } from './list.js';
20
21
  export { Snackbar, snackbarTv } from './snackbar.js';
21
22
  export { Item, itemTv } from './item.js';
22
23
  export { Badge, badgeTv } from './badge.js';
23
24
  export { Card, cardTv } from './card.js';
24
25
  export { SegmentedButton, segmentedButtonTv } from './segmented-button.js';
26
+ export { ButtonGroup, buttonGroup } from './button-group.js';
27
+ export { SplitButton, splitButtonTv } from './split-button.js';
25
28
  export { NavigationDrawer, navigationDrawerTv } from './navigation-drawer.js';
26
29
  export { TopAppBar, topAppBarTv } from './top-app-bar.js';
27
30
  export { BottomAppBar, bottomAppBarTv } from './bottom-app-bar.js';
28
31
  export { NavigationRail, navigationRailTv } from './navigation-rail.js';
29
32
  export { BottomSheet, bottomSheetTv } from './bottom-sheet.js';
30
33
  export { SideSheet, sideSheetTv } from './side-sheet.js';
31
- export { BadgeProps, BadgeSize, BottomAppBarProps, BottomSheetVariant, ButtonProps, ButtonVariant, CardProps, CardVariant, ChipProps, ChipVariant, CircularProgressProps, ContrastLevel, DividerInset, DividerOrientation, DividerProps, FabColor, FabMenuItemProps, FabMenuTriggerProps, FabProps, FabSize, IconButtonProps, IconButtonVariant, ItemProps, LinearProgressProps, ListItemLines, ListItemProps, NavigationDrawerVariant, Ripple, SchemeVariant, SideSheetSide, SideSheetVariant, TabsVariant, TextFieldProps, TextFieldVariant, ThemeMode, ThemeProvider, ThemeProviderProps, TopAppBarProps, TopAppBarVariant, applyScheme, generateScheme, schemeToCssText, useSnackbar, useTheme } from '@m3-baseui/core';
34
+ export { Search, searchTv } from './search.js';
35
+ export { DatePicker, datePickerTv } from './date-picker.js';
36
+ export { TimePicker, timePickerTv } from './time-picker.js';
37
+ export { BadgeProps, BadgeSize, BottomAppBarProps, BottomSheetVariant, ButtonGroupProps, ButtonGroupVariant, ButtonProps, ButtonVariant, CardProps, CardVariant, CarouselVariant, ChipProps, ChipVariant, CircularProgressProps, ContrastLevel, DividerInset, DividerOrientation, DividerProps, FabColor, FabMenuItemProps, FabMenuTriggerProps, FabProps, FabSize, IconButtonProps, IconButtonVariant, ItemProps, LinearProgressProps, ListItemLines, ListItemProps, LoadingIndicatorProps, NavigationDrawerVariant, Ripple, SchemeVariant, SideSheetSide, SideSheetVariant, TabsVariant, TextFieldProps, TextFieldVariant, ThemeMode, ThemeProvider, ThemeProviderProps, TimePickerVariant, TimeValue, ToolbarOrientation, ToolbarProps, ToolbarVariant, TopAppBarProps, TopAppBarVariant, applyScheme, generateScheme, schemeToCssText, useSnackbar, useTheme } from '@m3-baseui/core';
38
+ export { Toolbar, toolbarTv } from './toolbar.js';
39
+ export { Carousel, carouselTv } from './carousel.js';
32
40
  import '@base-ui/react';
33
41
  import 'react';
34
42
  import 'tailwind-variants';