@m3-baseui/react-tailwind 1.2.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.
- package/dist/checkbox.js +5 -0
- package/dist/checkbox.js.map +1 -1
- package/dist/chip.d.ts +31 -0
- package/dist/chip.js +29 -5
- package/dist/chip.js.map +1 -1
- package/dist/index.js +62 -12
- package/dist/index.js.map +1 -1
- package/dist/radio.js +8 -3
- package/dist/radio.js.map +1 -1
- package/dist/segmented-button.d.ts +5 -5
- package/dist/slider.d.ts +33 -6
- package/dist/slider.js +16 -3
- package/dist/slider.js.map +1 -1
- package/dist/switch.js +4 -1
- package/dist/switch.js.map +1 -1
- package/package.json +1 -1
package/dist/checkbox.js
CHANGED
|
@@ -41,7 +41,12 @@ var checkboxTv = tv({
|
|
|
41
41
|
"group-data-[error]:text-on-error",
|
|
42
42
|
// M3 disabled: the check / dash turn the surface color on the faint box
|
|
43
43
|
"group-data-[disabled]:text-surface",
|
|
44
|
+
// M3 asymmetric motion: unselected-exit accelerates out (150ms), the
|
|
45
|
+
// selected/indeterminate-enter decelerates in (350ms). Token-backed.
|
|
44
46
|
"opacity-0 data-[checked]:opacity-100 data-[indeterminate]:opacity-100",
|
|
47
|
+
"transition-opacity ease-emphasized-accelerate duration-[var(--md-sys-motion-duration-short3)]",
|
|
48
|
+
"data-[checked]:ease-emphasized-decelerate data-[checked]:duration-[var(--md-sys-motion-duration-medium3)]",
|
|
49
|
+
"data-[indeterminate]:ease-emphasized-decelerate data-[indeterminate]:duration-[var(--md-sys-motion-duration-medium3)]",
|
|
45
50
|
'data-[indeterminate]:after:content-[""] data-[indeterminate]:after:absolute',
|
|
46
51
|
"data-[indeterminate]:after:w-[10px] data-[indeterminate]:after:h-[2px] data-[indeterminate]:after:rounded-full data-[indeterminate]:after:bg-current"
|
|
47
52
|
],
|
package/dist/checkbox.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/checkbox.ts"],"names":[],"mappings":";;;;;AAUO,IAAM,aAAa,EAAA,CAAG;AAAA,EAC3B,KAAA,EAAO;AAAA,IACL,IAAA,EAAM;AAAA,MACJ,4EAAA;AAAA,MACA,kEAAA;AAAA;AAAA;AAAA,MAGA,2CAAA;AAAA,MACA,8CAAA;AAAA,MACA,qFAAA;AAAA,MACA,uGAAA;AAAA;AAAA,MAEA,qBAAA;AAAA,MACA,mFAAA;AAAA;AAAA,MAEA,kFAAA;AAAA,MACA,oKAAA;AAAA,MACA,4LAAA;AAAA,MACA,4FAAA;AAAA,MACA,sEAAA;AAAA;AAAA;AAAA,MAGA,sCAAA;AAAA,MACA,mGAAA;AAAA,MACA,+GAAA;AAAA;AAAA,MAEA,oHAAA;AAAA,MACA,qHAAA;AAAA,MACA,kDAAA;AAAA,MACA,0DAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,SAAA,EAAW;AAAA,MACT,yGAAA;AAAA;AAAA,MAEA,kCAAA;AAAA;AAAA,MAEA,oCAAA;AAAA,
|
|
1
|
+
{"version":3,"sources":["../src/checkbox.ts"],"names":[],"mappings":";;;;;AAUO,IAAM,aAAa,EAAA,CAAG;AAAA,EAC3B,KAAA,EAAO;AAAA,IACL,IAAA,EAAM;AAAA,MACJ,4EAAA;AAAA,MACA,kEAAA;AAAA;AAAA;AAAA,MAGA,2CAAA;AAAA,MACA,8CAAA;AAAA,MACA,qFAAA;AAAA,MACA,uGAAA;AAAA;AAAA,MAEA,qBAAA;AAAA,MACA,mFAAA;AAAA;AAAA,MAEA,kFAAA;AAAA,MACA,oKAAA;AAAA,MACA,4LAAA;AAAA,MACA,4FAAA;AAAA,MACA,sEAAA;AAAA;AAAA;AAAA,MAGA,sCAAA;AAAA,MACA,mGAAA;AAAA,MACA,+GAAA;AAAA;AAAA,MAEA,oHAAA;AAAA,MACA,qHAAA;AAAA,MACA,kDAAA;AAAA,MACA,0DAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,SAAA,EAAW;AAAA,MACT,yGAAA;AAAA;AAAA,MAEA,kCAAA;AAAA;AAAA,MAEA,oCAAA;AAAA;AAAA;AAAA,MAGA,uEAAA;AAAA,MACA,+FAAA;AAAA,MACA,2GAAA;AAAA,MACA,uHAAA;AAAA,MACA,6EAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,IAAA,EAAM,CAAC,2DAA2D;AAAA;AAEtE,CAAC;AAED,IAAM,IAAI,UAAA,EAAW;AACd,IAAM,WAAW,cAAA,CAAe;AAAA,EACrC,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,SAAA,EAAW,EAAE,SAAA,EAAU;AAAA,EACvB,IAAA,EAAM,EAAE,IAAA;AACV,CAAC","file":"checkbox.js","sourcesContent":["/**\n * checkbox.ts — tailwind-variants slots for the M3 Checkbox.\n *\n * 18dp box with a 40dp circular state layer. Checked/indeterminate fill the box\n * with primary; the indeterminate dash is an `::after` on the indicator and the\n * check SVG is hidden in that state via a group reference.\n */\nimport { createCheckbox } from '@m3-baseui/core';\nimport { tv } from 'tailwind-variants';\n\nexport const checkboxTv = tv({\n slots: {\n root: [\n 'group relative inline-flex items-center justify-center shrink-0 box-border',\n 'size-[18px] rounded-[2px] border-2 cursor-pointer bg-transparent',\n // Outline is on-surface-variant; the state layer (text/currentColor) is\n // on-surface unselected, primary when selected (material-web).\n 'border-on-surface-variant text-on-surface',\n 'transition-colors duration-150 ease-standard',\n 'data-[checked]:bg-primary data-[checked]:border-primary data-[checked]:text-primary',\n 'data-[indeterminate]:bg-primary data-[indeterminate]:border-primary data-[indeterminate]:text-primary',\n // M3 pressed state layer inverts: unselected→primary, selected→on-surface\n 'active:text-primary',\n 'data-[checked]:active:text-on-surface data-[indeterminate]:active:text-on-surface',\n // M3 error: error outline + error-filled box; state layer stays error\n 'data-[error]:border-error data-[error]:text-error data-[error]:active:text-error',\n 'data-[error]:data-[checked]:bg-error data-[error]:data-[checked]:border-error data-[error]:data-[checked]:text-error data-[error]:data-[checked]:active:text-error',\n 'data-[error]:data-[indeterminate]:bg-error data-[error]:data-[indeterminate]:border-error data-[error]:data-[indeterminate]:text-error data-[error]:data-[indeterminate]:active:text-error',\n 'focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-secondary',\n 'data-[disabled]:pointer-events-none data-[disabled]:before:opacity-0',\n // M3 disabled: unselected outline on-surface/38; selected/indeterminate\n // box on-surface/38 with no outline (the check turns surface, below).\n 'data-[disabled]:border-on-surface/38',\n 'data-[disabled]:data-[checked]:bg-on-surface/38 data-[disabled]:data-[checked]:border-transparent',\n 'data-[disabled]:data-[indeterminate]:bg-on-surface/38 data-[disabled]:data-[indeterminate]:border-transparent',\n // 40dp circular state layer\n 'before:content-[\"\"] before:absolute before:left-1/2 before:top-1/2 before:-translate-x-1/2 before:-translate-y-1/2',\n 'before:size-10 before:rounded-full before:bg-current before:opacity-0 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 indicator: [\n 'group/cb relative inline-flex items-center justify-center size-full pointer-events-none text-on-primary',\n // M3 error: the check / dash turn on-error on the error-filled box\n 'group-data-[error]:text-on-error',\n // M3 disabled: the check / dash turn the surface color on the faint box\n 'group-data-[disabled]:text-surface',\n // M3 asymmetric motion: unselected-exit accelerates out (150ms), the\n // selected/indeterminate-enter decelerates in (350ms). Token-backed.\n 'opacity-0 data-[checked]:opacity-100 data-[indeterminate]:opacity-100',\n 'transition-opacity ease-emphasized-accelerate duration-[var(--md-sys-motion-duration-short3)]',\n 'data-[checked]:ease-emphasized-decelerate data-[checked]:duration-[var(--md-sys-motion-duration-medium3)]',\n 'data-[indeterminate]:ease-emphasized-decelerate data-[indeterminate]:duration-[var(--md-sys-motion-duration-medium3)]',\n 'data-[indeterminate]:after:content-[\"\"] data-[indeterminate]:after:absolute',\n 'data-[indeterminate]:after:w-[10px] data-[indeterminate]:after:h-[2px] data-[indeterminate]:after:rounded-full data-[indeterminate]:after:bg-current',\n ],\n icon: ['w-[18px] h-[18px] group-data-[indeterminate]/cb:opacity-0'],\n },\n});\n\nconst c = checkboxTv();\nexport const Checkbox = createCheckbox({\n root: c.root(),\n indicator: c.indicator(),\n icon: c.icon(),\n});\n"]}
|
package/dist/chip.d.ts
CHANGED
|
@@ -8,15 +8,19 @@ declare const chipTv: tailwind_variants.TVReturnType<{
|
|
|
8
8
|
variant: {
|
|
9
9
|
assist: {
|
|
10
10
|
root: string;
|
|
11
|
+
icon: string;
|
|
11
12
|
};
|
|
12
13
|
suggestion: {
|
|
13
14
|
root: string;
|
|
15
|
+
icon: string;
|
|
14
16
|
};
|
|
15
17
|
input: {
|
|
16
18
|
root: string;
|
|
19
|
+
icon: string;
|
|
17
20
|
};
|
|
18
21
|
filter: {
|
|
19
22
|
root: string[];
|
|
23
|
+
icon: string;
|
|
20
24
|
};
|
|
21
25
|
};
|
|
22
26
|
elevated: {
|
|
@@ -29,19 +33,24 @@ declare const chipTv: tailwind_variants.TVReturnType<{
|
|
|
29
33
|
remove: string[];
|
|
30
34
|
check: string[];
|
|
31
35
|
avatar: string[];
|
|
36
|
+
icon: string[];
|
|
32
37
|
}, undefined, tailwind_variants_dist_config_js.TVConfig<{
|
|
33
38
|
variant: {
|
|
34
39
|
assist: {
|
|
35
40
|
root: string;
|
|
41
|
+
icon: string;
|
|
36
42
|
};
|
|
37
43
|
suggestion: {
|
|
38
44
|
root: string;
|
|
45
|
+
icon: string;
|
|
39
46
|
};
|
|
40
47
|
input: {
|
|
41
48
|
root: string;
|
|
49
|
+
icon: string;
|
|
42
50
|
};
|
|
43
51
|
filter: {
|
|
44
52
|
root: string[];
|
|
53
|
+
icon: string;
|
|
45
54
|
};
|
|
46
55
|
};
|
|
47
56
|
elevated: {
|
|
@@ -53,15 +62,19 @@ declare const chipTv: tailwind_variants.TVReturnType<{
|
|
|
53
62
|
variant: {
|
|
54
63
|
assist: {
|
|
55
64
|
root: string;
|
|
65
|
+
icon: string;
|
|
56
66
|
};
|
|
57
67
|
suggestion: {
|
|
58
68
|
root: string;
|
|
69
|
+
icon: string;
|
|
59
70
|
};
|
|
60
71
|
input: {
|
|
61
72
|
root: string;
|
|
73
|
+
icon: string;
|
|
62
74
|
};
|
|
63
75
|
filter: {
|
|
64
76
|
root: string[];
|
|
77
|
+
icon: string;
|
|
65
78
|
};
|
|
66
79
|
};
|
|
67
80
|
elevated: {
|
|
@@ -73,15 +86,19 @@ declare const chipTv: tailwind_variants.TVReturnType<{
|
|
|
73
86
|
variant: {
|
|
74
87
|
assist: {
|
|
75
88
|
root: string;
|
|
89
|
+
icon: string;
|
|
76
90
|
};
|
|
77
91
|
suggestion: {
|
|
78
92
|
root: string;
|
|
93
|
+
icon: string;
|
|
79
94
|
};
|
|
80
95
|
input: {
|
|
81
96
|
root: string;
|
|
97
|
+
icon: string;
|
|
82
98
|
};
|
|
83
99
|
filter: {
|
|
84
100
|
root: string[];
|
|
101
|
+
icon: string;
|
|
85
102
|
};
|
|
86
103
|
};
|
|
87
104
|
elevated: {
|
|
@@ -94,19 +111,24 @@ declare const chipTv: tailwind_variants.TVReturnType<{
|
|
|
94
111
|
remove: string[];
|
|
95
112
|
check: string[];
|
|
96
113
|
avatar: string[];
|
|
114
|
+
icon: string[];
|
|
97
115
|
}, tailwind_variants.TVReturnType<{
|
|
98
116
|
variant: {
|
|
99
117
|
assist: {
|
|
100
118
|
root: string;
|
|
119
|
+
icon: string;
|
|
101
120
|
};
|
|
102
121
|
suggestion: {
|
|
103
122
|
root: string;
|
|
123
|
+
icon: string;
|
|
104
124
|
};
|
|
105
125
|
input: {
|
|
106
126
|
root: string;
|
|
127
|
+
icon: string;
|
|
107
128
|
};
|
|
108
129
|
filter: {
|
|
109
130
|
root: string[];
|
|
131
|
+
icon: string;
|
|
110
132
|
};
|
|
111
133
|
};
|
|
112
134
|
elevated: {
|
|
@@ -119,19 +141,24 @@ declare const chipTv: tailwind_variants.TVReturnType<{
|
|
|
119
141
|
remove: string[];
|
|
120
142
|
check: string[];
|
|
121
143
|
avatar: string[];
|
|
144
|
+
icon: string[];
|
|
122
145
|
}, undefined, tailwind_variants_dist_config_js.TVConfig<{
|
|
123
146
|
variant: {
|
|
124
147
|
assist: {
|
|
125
148
|
root: string;
|
|
149
|
+
icon: string;
|
|
126
150
|
};
|
|
127
151
|
suggestion: {
|
|
128
152
|
root: string;
|
|
153
|
+
icon: string;
|
|
129
154
|
};
|
|
130
155
|
input: {
|
|
131
156
|
root: string;
|
|
157
|
+
icon: string;
|
|
132
158
|
};
|
|
133
159
|
filter: {
|
|
134
160
|
root: string[];
|
|
161
|
+
icon: string;
|
|
135
162
|
};
|
|
136
163
|
};
|
|
137
164
|
elevated: {
|
|
@@ -143,15 +170,19 @@ declare const chipTv: tailwind_variants.TVReturnType<{
|
|
|
143
170
|
variant: {
|
|
144
171
|
assist: {
|
|
145
172
|
root: string;
|
|
173
|
+
icon: string;
|
|
146
174
|
};
|
|
147
175
|
suggestion: {
|
|
148
176
|
root: string;
|
|
177
|
+
icon: string;
|
|
149
178
|
};
|
|
150
179
|
input: {
|
|
151
180
|
root: string;
|
|
181
|
+
icon: string;
|
|
152
182
|
};
|
|
153
183
|
filter: {
|
|
154
184
|
root: string[];
|
|
185
|
+
icon: string;
|
|
155
186
|
};
|
|
156
187
|
};
|
|
157
188
|
elevated: {
|
package/dist/chip.js
CHANGED
|
@@ -11,6 +11,8 @@ var chipTv = tv({
|
|
|
11
11
|
// layer is rounded to match instead (before:rounded-[inherit]); the ripple
|
|
12
12
|
// self-clips.
|
|
13
13
|
"h-8 px-4 rounded-[8px] select-none border bg-transparent text-label-large",
|
|
14
|
+
// M3 with-icon padding: the icon side trims to 8dp (label side stays 16dp).
|
|
15
|
+
"data-[with-leading-icon]:pl-2",
|
|
14
16
|
"transition-colors duration-150 ease-standard",
|
|
15
17
|
"before:absolute before:inset-0 before:rounded-[inherit] before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100",
|
|
16
18
|
"hover:before:opacity-[var(--md-sys-state-hover)]",
|
|
@@ -37,20 +39,36 @@ var chipTv = tv({
|
|
|
37
39
|
"inline-flex items-center justify-center shrink-0 size-6 -ml-3 rounded-full overflow-hidden",
|
|
38
40
|
"bg-primary-container text-on-primary-container",
|
|
39
41
|
"[&>img]:size-full [&>img]:object-cover"
|
|
42
|
+
],
|
|
43
|
+
// M3 leading icon: 18dp; root `data-with-leading-icon` trims leading padding to 8dp.
|
|
44
|
+
icon: [
|
|
45
|
+
"inline-flex items-center justify-center shrink-0 size-[18px]",
|
|
46
|
+
"[&>svg]:size-full",
|
|
47
|
+
"group-disabled:text-on-surface/38 group-data-[disabled]:text-on-surface/38"
|
|
40
48
|
]
|
|
41
49
|
},
|
|
42
50
|
variants: {
|
|
43
51
|
variant: {
|
|
44
|
-
assist: {
|
|
45
|
-
|
|
46
|
-
|
|
52
|
+
assist: {
|
|
53
|
+
root: "border-outline text-on-surface cursor-pointer",
|
|
54
|
+
icon: "text-primary"
|
|
55
|
+
},
|
|
56
|
+
suggestion: {
|
|
57
|
+
root: "border-outline text-on-surface-variant cursor-pointer",
|
|
58
|
+
icon: "text-on-surface-variant"
|
|
59
|
+
},
|
|
60
|
+
input: {
|
|
61
|
+
root: "border-outline text-on-surface-variant cursor-default pr-2",
|
|
62
|
+
icon: "text-on-surface-variant"
|
|
63
|
+
},
|
|
47
64
|
filter: {
|
|
48
65
|
root: [
|
|
49
66
|
"border-outline text-on-surface-variant cursor-pointer",
|
|
50
67
|
"data-[pressed]:bg-secondary-container data-[pressed]:text-on-secondary-container data-[pressed]:border-transparent",
|
|
51
68
|
// M3 disabled + selected: faint on-surface/12 container
|
|
52
69
|
"data-[pressed]:data-[disabled]:bg-on-surface/12 data-[pressed]:disabled:bg-on-surface/12"
|
|
53
|
-
]
|
|
70
|
+
],
|
|
71
|
+
icon: "text-on-surface-variant group-data-[pressed]:hidden"
|
|
54
72
|
}
|
|
55
73
|
},
|
|
56
74
|
// M3 elevated: filled surface-container-low + elevation level1→level2 on hover,
|
|
@@ -71,7 +89,13 @@ var chipTv = tv({
|
|
|
71
89
|
});
|
|
72
90
|
var Chip = createChip(({ variant, elevated }) => {
|
|
73
91
|
const c = chipTv({ variant, elevated });
|
|
74
|
-
return {
|
|
92
|
+
return {
|
|
93
|
+
root: c.root(),
|
|
94
|
+
remove: c.remove(),
|
|
95
|
+
check: c.check(),
|
|
96
|
+
avatar: c.avatar(),
|
|
97
|
+
icon: c.icon()
|
|
98
|
+
};
|
|
75
99
|
});
|
|
76
100
|
|
|
77
101
|
export { Chip, chipTv };
|
package/dist/chip.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/chip.ts"],"names":[],"mappings":";;;;;AAUO,IAAM,SAAS,EAAA,CAAG;AAAA,EACvB,KAAA,EAAO;AAAA,IACL,IAAA,EAAM;AAAA,MACJ,yEAAA;AAAA;AAAA;AAAA;AAAA,MAIA,2EAAA;AAAA,MACA,8CAAA;AAAA,MACA,qKAAA;AAAA,MACA,kDAAA;AAAA,MACA,0DAAA;AAAA,MACA,qDAAA;AAAA,MACA,4FAAA;AAAA;AAAA,MAEA,sEAAA;AAAA,MACA,wDAAA;AAAA,MACA,yEAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,MAAA,EAAQ;AAAA,MACN,8GAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO;AAAA,MACL,mHAAA;AAAA,MACA,2CAAA;AAAA,MACA;AAAA,KACF;AAAA;AAAA,IAEA,MAAA,EAAQ;AAAA,MACN,4FAAA;AAAA,MACA,gDAAA;AAAA,MACA;AAAA;AACF,GACF;AAAA,EACA,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,MAAA,EAAQ,
|
|
1
|
+
{"version":3,"sources":["../src/chip.ts"],"names":[],"mappings":";;;;;AAUO,IAAM,SAAS,EAAA,CAAG;AAAA,EACvB,KAAA,EAAO;AAAA,IACL,IAAA,EAAM;AAAA,MACJ,yEAAA;AAAA;AAAA;AAAA;AAAA,MAIA,2EAAA;AAAA;AAAA,MAEA,+BAAA;AAAA,MACA,8CAAA;AAAA,MACA,qKAAA;AAAA,MACA,kDAAA;AAAA,MACA,0DAAA;AAAA,MACA,qDAAA;AAAA,MACA,4FAAA;AAAA;AAAA,MAEA,sEAAA;AAAA,MACA,wDAAA;AAAA,MACA,yEAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,MAAA,EAAQ;AAAA,MACN,8GAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO;AAAA,MACL,mHAAA;AAAA,MACA,2CAAA;AAAA,MACA;AAAA,KACF;AAAA;AAAA,IAEA,MAAA,EAAQ;AAAA,MACN,4FAAA;AAAA,MACA,gDAAA;AAAA,MACA;AAAA,KACF;AAAA;AAAA,IAEA,IAAA,EAAM;AAAA,MACJ,8DAAA;AAAA,MACA,mBAAA;AAAA,MACA;AAAA;AACF,GACF;AAAA,EACA,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,MAAA,EAAQ;AAAA,QACN,IAAA,EAAM,+CAAA;AAAA,QACN,IAAA,EAAM;AAAA,OACR;AAAA,MACA,UAAA,EAAY;AAAA,QACV,IAAA,EAAM,uDAAA;AAAA,QACN,IAAA,EAAM;AAAA,OACR;AAAA,MACA,KAAA,EAAO;AAAA,QACL,IAAA,EAAM,4DAAA;AAAA,QACN,IAAA,EAAM;AAAA,OACR;AAAA,MACA,MAAA,EAAQ;AAAA,QACN,IAAA,EAAM;AAAA,UACJ,uDAAA;AAAA,UACA,oHAAA;AAAA;AAAA,UAEA;AAAA,SACF;AAAA,QACA,IAAA,EAAM;AAAA;AACR,KACF;AAAA;AAAA;AAAA,IAGA,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,IAAA,EAAM;AAAA,UACJ,2DAAA;AAAA,UACA,0CAAA;AAAA,UACA;AAAA;AACF;AACF;AACF,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,OAAA,EAAS;AAAA;AAEb,CAAC;AAEM,IAAM,OAAO,UAAA,CAAW,CAAC,EAAE,OAAA,EAAS,UAAS,KAAM;AACxD,EAAA,MAAM,CAAA,GAAI,MAAA,CAAO,EAAE,OAAA,EAAS,UAAU,CAAA;AACtC,EAAA,OAAO;AAAA,IACL,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,IACb,MAAA,EAAQ,EAAE,MAAA,EAAO;AAAA,IACjB,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,IACf,MAAA,EAAQ,EAAE,MAAA,EAAO;AAAA,IACjB,IAAA,EAAM,EAAE,IAAA;AAAK,GACf;AACF,CAAC","file":"chip.js","sourcesContent":["/**\n * chip.ts — tailwind-variants slots for the M3 Chip.\n *\n * 32dp tall, 8dp corners, label-large. The state layer reacts to hover/focus/\n * press (not the persistent toggle `data-pressed`, which a filter chip uses for\n * its selected fill). Emits the same DOM + ripple as the VE build.\n */\nimport { createChip } from '@m3-baseui/core';\nimport { tv } from 'tailwind-variants';\n\nexport const chipTv = tv({\n slots: {\n root: [\n 'group relative inline-flex items-center justify-center gap-2 box-border',\n // No `overflow-hidden`: it would clip the 48dp touch target. The state\n // layer is rounded to match instead (before:rounded-[inherit]); the ripple\n // self-clips.\n 'h-8 px-4 rounded-[8px] select-none border bg-transparent text-label-large',\n // M3 with-icon padding: the icon side trims to 8dp (label side stays 16dp).\n 'data-[with-leading-icon]:pl-2',\n 'transition-colors duration-150 ease-standard',\n 'before:absolute before:inset-0 before:rounded-[inherit] 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 'focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-secondary',\n // M3 disabled: label on-surface/38, outline on-surface/12; no state layer.\n 'data-[disabled]:pointer-events-none data-[disabled]:before:opacity-0',\n 'disabled:pointer-events-none disabled:before:opacity-0',\n 'data-[disabled]:text-on-surface/38 data-[disabled]:border-on-surface/12',\n 'disabled:text-on-surface/38 disabled:border-on-surface/12',\n ],\n remove: [\n 'inline-flex items-center justify-center shrink-0 size-[18px] -mr-1 ml-1 rounded-full border-0 bg-transparent',\n 'text-on-surface-variant cursor-pointer hover:opacity-80',\n ],\n check: [\n 'inline-flex items-center justify-center shrink-0 h-[18px] w-0 -ml-2 opacity-0 overflow-hidden pointer-events-none',\n 'transition-all duration-150 ease-standard',\n 'group-data-[pressed]:w-[18px] group-data-[pressed]:ml-0 group-data-[pressed]:opacity-100',\n ],\n // M3 leading avatar: 24dp circle; negative margin trims the leading padding to 4dp.\n avatar: [\n 'inline-flex items-center justify-center shrink-0 size-6 -ml-3 rounded-full overflow-hidden',\n 'bg-primary-container text-on-primary-container',\n '[&>img]:size-full [&>img]:object-cover',\n ],\n // M3 leading icon: 18dp; root `data-with-leading-icon` trims leading padding to 8dp.\n icon: [\n 'inline-flex items-center justify-center shrink-0 size-[18px]',\n '[&>svg]:size-full',\n 'group-disabled:text-on-surface/38 group-data-[disabled]:text-on-surface/38',\n ],\n },\n variants: {\n variant: {\n assist: {\n root: 'border-outline text-on-surface cursor-pointer',\n icon: 'text-primary',\n },\n suggestion: {\n root: 'border-outline text-on-surface-variant cursor-pointer',\n icon: 'text-on-surface-variant',\n },\n input: {\n root: 'border-outline text-on-surface-variant cursor-default pr-2',\n icon: 'text-on-surface-variant',\n },\n filter: {\n root: [\n 'border-outline text-on-surface-variant cursor-pointer',\n 'data-[pressed]:bg-secondary-container data-[pressed]:text-on-secondary-container data-[pressed]:border-transparent',\n // M3 disabled + selected: faint on-surface/12 container\n 'data-[pressed]:data-[disabled]:bg-on-surface/12 data-[pressed]:disabled:bg-on-surface/12',\n ],\n icon: 'text-on-surface-variant group-data-[pressed]:hidden',\n },\n },\n // M3 elevated: filled surface-container-low + elevation level1→level2 on hover,\n // no outline. Disabled drops the shadow.\n elevated: {\n true: {\n root: [\n 'bg-surface-container-low border-transparent shadow-level1',\n 'hover:shadow-level2 active:shadow-level1',\n 'disabled:shadow-none data-[disabled]:shadow-none',\n ],\n },\n },\n },\n defaultVariants: {\n variant: 'assist',\n },\n});\n\nexport const Chip = createChip(({ variant, elevated }) => {\n const c = chipTv({ variant, elevated });\n return {\n root: c.root(),\n remove: c.remove(),\n check: c.check(),\n avatar: c.avatar(),\n icon: c.icon(),\n };\n});\nexport type { ChipProps, ChipVariant } from '@m3-baseui/core';\n"]}
|
package/dist/index.js
CHANGED
|
@@ -202,7 +202,10 @@ var switchTv = tv({
|
|
|
202
202
|
"absolute top-1/2 -translate-y-1/2 left-[6px] size-4 rounded-full pointer-events-none",
|
|
203
203
|
"flex items-center justify-center",
|
|
204
204
|
"bg-outline text-on-surface",
|
|
205
|
-
|
|
205
|
+
// M3 spatial motion: the handle slides/grows with emphasized easing over
|
|
206
|
+
// 300ms (token-backed). emphasized is overshoot-free, so it stays safe for
|
|
207
|
+
// the handle's color transitions too (no spring flicker on background-color).
|
|
208
|
+
"transition-all ease-emphasized duration-[var(--md-sys-motion-duration-medium2)]",
|
|
206
209
|
"data-[checked]:left-[22px] data-[checked]:size-6 data-[checked]:bg-on-primary data-[checked]:text-primary",
|
|
207
210
|
// M3 with-icon: the unchecked handle grows to 24dp to fit its icon
|
|
208
211
|
"data-[with-icon]:data-[unchecked]:left-1 data-[with-icon]:data-[unchecked]:size-6",
|
|
@@ -279,7 +282,12 @@ var checkboxTv = tv({
|
|
|
279
282
|
"group-data-[error]:text-on-error",
|
|
280
283
|
// M3 disabled: the check / dash turn the surface color on the faint box
|
|
281
284
|
"group-data-[disabled]:text-surface",
|
|
285
|
+
// M3 asymmetric motion: unselected-exit accelerates out (150ms), the
|
|
286
|
+
// selected/indeterminate-enter decelerates in (350ms). Token-backed.
|
|
282
287
|
"opacity-0 data-[checked]:opacity-100 data-[indeterminate]:opacity-100",
|
|
288
|
+
"transition-opacity ease-emphasized-accelerate duration-[var(--md-sys-motion-duration-short3)]",
|
|
289
|
+
"data-[checked]:ease-emphasized-decelerate data-[checked]:duration-[var(--md-sys-motion-duration-medium3)]",
|
|
290
|
+
"data-[indeterminate]:ease-emphasized-decelerate data-[indeterminate]:duration-[var(--md-sys-motion-duration-medium3)]",
|
|
283
291
|
'data-[indeterminate]:after:content-[""] data-[indeterminate]:after:absolute',
|
|
284
292
|
"data-[indeterminate]:after:w-[10px] data-[indeterminate]:after:h-[2px] data-[indeterminate]:after:rounded-full data-[indeterminate]:after:bg-current"
|
|
285
293
|
],
|
|
@@ -319,9 +327,14 @@ var radioTv = tv({
|
|
|
319
327
|
"active:before:opacity-[var(--md-sys-state-pressed)]"
|
|
320
328
|
],
|
|
321
329
|
indicator: [
|
|
322
|
-
"block rounded-full bg-primary pointer-events-none",
|
|
323
|
-
|
|
324
|
-
|
|
330
|
+
"block rounded-full bg-primary pointer-events-none origin-center",
|
|
331
|
+
// M3 inner-circle-grow: the 10dp dot scales from center with
|
|
332
|
+
// emphasized-decelerate over 300ms (token-backed), not width/height from 0.
|
|
333
|
+
// Tailwind v4's `scale-*` sets the standalone `scale` property (not
|
|
334
|
+
// `transform`), so the transition must name `scale` to animate the grow.
|
|
335
|
+
"size-2.5 scale-0 opacity-0",
|
|
336
|
+
"transition-[scale,opacity] ease-emphasized-decelerate duration-[var(--md-sys-motion-duration-medium2)]",
|
|
337
|
+
"data-[checked]:scale-100 data-[checked]:opacity-100",
|
|
325
338
|
"group-data-[error]:bg-error",
|
|
326
339
|
"group-data-[disabled]:bg-on-surface/38"
|
|
327
340
|
]
|
|
@@ -338,6 +351,8 @@ var chipTv = tv({
|
|
|
338
351
|
// layer is rounded to match instead (before:rounded-[inherit]); the ripple
|
|
339
352
|
// self-clips.
|
|
340
353
|
"h-8 px-4 rounded-[8px] select-none border bg-transparent text-label-large",
|
|
354
|
+
// M3 with-icon padding: the icon side trims to 8dp (label side stays 16dp).
|
|
355
|
+
"data-[with-leading-icon]:pl-2",
|
|
341
356
|
"transition-colors duration-150 ease-standard",
|
|
342
357
|
"before:absolute before:inset-0 before:rounded-[inherit] before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100",
|
|
343
358
|
"hover:before:opacity-[var(--md-sys-state-hover)]",
|
|
@@ -364,20 +379,36 @@ var chipTv = tv({
|
|
|
364
379
|
"inline-flex items-center justify-center shrink-0 size-6 -ml-3 rounded-full overflow-hidden",
|
|
365
380
|
"bg-primary-container text-on-primary-container",
|
|
366
381
|
"[&>img]:size-full [&>img]:object-cover"
|
|
382
|
+
],
|
|
383
|
+
// M3 leading icon: 18dp; root `data-with-leading-icon` trims leading padding to 8dp.
|
|
384
|
+
icon: [
|
|
385
|
+
"inline-flex items-center justify-center shrink-0 size-[18px]",
|
|
386
|
+
"[&>svg]:size-full",
|
|
387
|
+
"group-disabled:text-on-surface/38 group-data-[disabled]:text-on-surface/38"
|
|
367
388
|
]
|
|
368
389
|
},
|
|
369
390
|
variants: {
|
|
370
391
|
variant: {
|
|
371
|
-
assist: {
|
|
372
|
-
|
|
373
|
-
|
|
392
|
+
assist: {
|
|
393
|
+
root: "border-outline text-on-surface cursor-pointer",
|
|
394
|
+
icon: "text-primary"
|
|
395
|
+
},
|
|
396
|
+
suggestion: {
|
|
397
|
+
root: "border-outline text-on-surface-variant cursor-pointer",
|
|
398
|
+
icon: "text-on-surface-variant"
|
|
399
|
+
},
|
|
400
|
+
input: {
|
|
401
|
+
root: "border-outline text-on-surface-variant cursor-default pr-2",
|
|
402
|
+
icon: "text-on-surface-variant"
|
|
403
|
+
},
|
|
374
404
|
filter: {
|
|
375
405
|
root: [
|
|
376
406
|
"border-outline text-on-surface-variant cursor-pointer",
|
|
377
407
|
"data-[pressed]:bg-secondary-container data-[pressed]:text-on-secondary-container data-[pressed]:border-transparent",
|
|
378
408
|
// M3 disabled + selected: faint on-surface/12 container
|
|
379
409
|
"data-[pressed]:data-[disabled]:bg-on-surface/12 data-[pressed]:disabled:bg-on-surface/12"
|
|
380
|
-
]
|
|
410
|
+
],
|
|
411
|
+
icon: "text-on-surface-variant group-data-[pressed]:hidden"
|
|
381
412
|
}
|
|
382
413
|
},
|
|
383
414
|
// M3 elevated: filled surface-container-low + elevation level1→level2 on hover,
|
|
@@ -398,7 +429,13 @@ var chipTv = tv({
|
|
|
398
429
|
});
|
|
399
430
|
var Chip = createChip(({ variant, elevated }) => {
|
|
400
431
|
const c3 = chipTv({ variant, elevated });
|
|
401
|
-
return {
|
|
432
|
+
return {
|
|
433
|
+
root: c3.root(),
|
|
434
|
+
remove: c3.remove(),
|
|
435
|
+
check: c3.check(),
|
|
436
|
+
avatar: c3.avatar(),
|
|
437
|
+
icon: c3.icon()
|
|
438
|
+
};
|
|
402
439
|
});
|
|
403
440
|
var TYPESCALE = [
|
|
404
441
|
"display-large",
|
|
@@ -621,7 +658,7 @@ var sliderTv = tv7({
|
|
|
621
658
|
"group-data-[disabled]:bg-on-surface/[0.38]"
|
|
622
659
|
],
|
|
623
660
|
thumb: [
|
|
624
|
-
"relative size-5 rounded-full bg-primary outline-none",
|
|
661
|
+
"group/thumb relative size-5 rounded-full bg-primary outline-none",
|
|
625
662
|
'before:content-[""] before:absolute before:left-1/2 before:top-1/2 before:-translate-x-1/2 before:-translate-y-1/2',
|
|
626
663
|
"before:size-10 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity before:duration-100",
|
|
627
664
|
"hover:before:opacity-[var(--md-sys-state-hover)]",
|
|
@@ -629,7 +666,17 @@ var sliderTv = tv7({
|
|
|
629
666
|
"data-[dragging]:before:opacity-[var(--md-sys-state-dragged)]",
|
|
630
667
|
"group-data-[disabled]:bg-on-surface/[0.38]"
|
|
631
668
|
],
|
|
632
|
-
value: "text-label-large text-on-surface-variant tabular-nums"
|
|
669
|
+
value: "text-label-large text-on-surface-variant tabular-nums",
|
|
670
|
+
tickList: "pointer-events-none absolute inset-0",
|
|
671
|
+
tick: [
|
|
672
|
+
"absolute size-1 -translate-x-1/2 -translate-y-1/2 rounded-full bg-on-surface-variant",
|
|
673
|
+
"data-[active]:bg-on-primary/[0.38]"
|
|
674
|
+
],
|
|
675
|
+
valueLabel: [
|
|
676
|
+
"pointer-events-none absolute bottom-full left-1/2 mb-2 -translate-x-1/2 whitespace-nowrap rounded px-2 py-0.5",
|
|
677
|
+
"bg-primary text-label-large text-on-primary tabular-nums opacity-0",
|
|
678
|
+
"data-[visible]:opacity-100"
|
|
679
|
+
]
|
|
633
680
|
}
|
|
634
681
|
});
|
|
635
682
|
var s2 = sliderTv();
|
|
@@ -639,7 +686,10 @@ var Slider = createSlider({
|
|
|
639
686
|
track: s2.track(),
|
|
640
687
|
indicator: s2.indicator(),
|
|
641
688
|
thumb: s2.thumb(),
|
|
642
|
-
value: s2.value()
|
|
689
|
+
value: s2.value(),
|
|
690
|
+
tickList: s2.tickList(),
|
|
691
|
+
tick: s2.tick(),
|
|
692
|
+
valueLabel: s2.valueLabel()
|
|
643
693
|
});
|
|
644
694
|
var selectTv = tv7({
|
|
645
695
|
slots: {
|