@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/radio.js
CHANGED
|
@@ -30,9 +30,14 @@ var radioTv = tv({
|
|
|
30
30
|
"active:before:opacity-[var(--md-sys-state-pressed)]"
|
|
31
31
|
],
|
|
32
32
|
indicator: [
|
|
33
|
-
"block rounded-full bg-primary pointer-events-none",
|
|
34
|
-
|
|
35
|
-
|
|
33
|
+
"block rounded-full bg-primary pointer-events-none origin-center",
|
|
34
|
+
// M3 inner-circle-grow: the 10dp dot scales from center with
|
|
35
|
+
// emphasized-decelerate over 300ms (token-backed), not width/height from 0.
|
|
36
|
+
// Tailwind v4's `scale-*` sets the standalone `scale` property (not
|
|
37
|
+
// `transform`), so the transition must name `scale` to animate the grow.
|
|
38
|
+
"size-2.5 scale-0 opacity-0",
|
|
39
|
+
"transition-[scale,opacity] ease-emphasized-decelerate duration-[var(--md-sys-motion-duration-medium2)]",
|
|
40
|
+
"data-[checked]:scale-100 data-[checked]:opacity-100",
|
|
36
41
|
"group-data-[error]:bg-error",
|
|
37
42
|
"group-data-[disabled]:bg-on-surface/38"
|
|
38
43
|
]
|
package/dist/radio.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/radio.ts"],"names":[],"mappings":";;;;;AASO,IAAM,UAAU,EAAA,CAAG;AAAA,EACxB,KAAA,EAAO;AAAA,IACL,IAAA,EAAM;AAAA,MACJ,4EAAA;AAAA,MACA,4DAAA;AAAA;AAAA;AAAA,MAGA,2CAAA;AAAA,MACA,8CAAA;AAAA,MACA,2DAAA;AAAA;AAAA,MAEA,qBAAA;AAAA,MACA,uCAAA;AAAA;AAAA,MAEA,kFAAA;AAAA,MACA,+HAAA;AAAA,MACA,4FAAA;AAAA;AAAA,MAEA,sEAAA;AAAA,MACA,sCAAA;AAAA,MACA,oHAAA;AAAA,MACA,qHAAA;AAAA,MACA,kDAAA;AAAA,MACA,0DAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,SAAA,EAAW;AAAA,MACT,
|
|
1
|
+
{"version":3,"sources":["../src/radio.ts"],"names":[],"mappings":";;;;;AASO,IAAM,UAAU,EAAA,CAAG;AAAA,EACxB,KAAA,EAAO;AAAA,IACL,IAAA,EAAM;AAAA,MACJ,4EAAA;AAAA,MACA,4DAAA;AAAA;AAAA;AAAA,MAGA,2CAAA;AAAA,MACA,8CAAA;AAAA,MACA,2DAAA;AAAA;AAAA,MAEA,qBAAA;AAAA,MACA,uCAAA;AAAA;AAAA,MAEA,kFAAA;AAAA,MACA,+HAAA;AAAA,MACA,4FAAA;AAAA;AAAA,MAEA,sEAAA;AAAA,MACA,sCAAA;AAAA,MACA,oHAAA;AAAA,MACA,qHAAA;AAAA,MACA,kDAAA;AAAA,MACA,0DAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,SAAA,EAAW;AAAA,MACT,iEAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAKA,4BAAA;AAAA,MACA,wGAAA;AAAA,MACA,qDAAA;AAAA,MACA,6BAAA;AAAA,MACA;AAAA;AACF;AAEJ,CAAC;AAED,IAAM,IAAI,OAAA,EAAQ;AACX,IAAM,KAAA,GAAQ,WAAA,CAAY,EAAE,IAAA,EAAM,CAAA,CAAE,IAAA,EAAK,EAAG,SAAA,EAAW,CAAA,CAAE,SAAA,EAAU,EAAG;AAEtE,IAAM,UAAA,GAAa,iBAAiB,4BAA4B","file":"radio.js","sourcesContent":["/**\n * radio.ts — tailwind-variants slots for the M3 Radio + RadioGroup.\n *\n * 20dp circle with a 40dp circular state layer; checked shows a 10dp primary dot\n * (the indicator) and recolors the ring. RadioGroup lays radios out in a column.\n */\nimport { createRadio, createRadioGroup } from '@m3-baseui/core';\nimport { tv } from 'tailwind-variants';\n\nexport const radioTv = tv({\n slots: {\n root: [\n 'group relative inline-flex items-center justify-center shrink-0 box-border',\n 'size-5 rounded-full border-2 cursor-pointer bg-transparent',\n // Ring 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]:border-primary data-[checked]:text-primary',\n // M3 pressed state layer inverts: unselected→primary, selected→on-surface\n 'active:text-primary',\n 'data-[checked]:active:text-on-surface',\n // M3 error: error ring + error state layer in every interaction state\n 'data-[error]:border-error data-[error]:text-error data-[error]:active:text-error',\n 'data-[error]:data-[checked]:border-error data-[error]:data-[checked]:text-error data-[error]:data-[checked]:active:text-error',\n 'focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-secondary',\n // M3 disabled: ring (and dot) turn on-surface/38; no state layer.\n 'data-[disabled]:pointer-events-none data-[disabled]:before:opacity-0',\n 'data-[disabled]:border-on-surface/38',\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 'block rounded-full bg-primary pointer-events-none origin-center',\n // M3 inner-circle-grow: the 10dp dot scales from center with\n // emphasized-decelerate over 300ms (token-backed), not width/height from 0.\n // Tailwind v4's `scale-*` sets the standalone `scale` property (not\n // `transform`), so the transition must name `scale` to animate the grow.\n 'size-2.5 scale-0 opacity-0',\n 'transition-[scale,opacity] ease-emphasized-decelerate duration-[var(--md-sys-motion-duration-medium2)]',\n 'data-[checked]:scale-100 data-[checked]:opacity-100',\n 'group-data-[error]:bg-error',\n 'group-data-[disabled]:bg-on-surface/38',\n ],\n },\n});\n\nconst r = radioTv();\nexport const Radio = createRadio({ root: r.root(), indicator: r.indicator() });\n\nexport const RadioGroup = createRadioGroup('inline-flex flex-col gap-1');\n"]}
|
|
@@ -9,8 +9,8 @@ declare const segmentedButtonTv: tailwind_variants.TVReturnType<{
|
|
|
9
9
|
[key: string]: tailwind_variants.ClassValue | {
|
|
10
10
|
root?: tailwind_variants.ClassValue;
|
|
11
11
|
label?: tailwind_variants.ClassValue;
|
|
12
|
-
check?: tailwind_variants.ClassValue;
|
|
13
12
|
icon?: tailwind_variants.ClassValue;
|
|
13
|
+
check?: tailwind_variants.ClassValue;
|
|
14
14
|
item?: tailwind_variants.ClassValue;
|
|
15
15
|
};
|
|
16
16
|
};
|
|
@@ -19,8 +19,8 @@ declare const segmentedButtonTv: tailwind_variants.TVReturnType<{
|
|
|
19
19
|
[x: string]: tailwind_variants.ClassValue | {
|
|
20
20
|
root?: tailwind_variants.ClassValue;
|
|
21
21
|
label?: tailwind_variants.ClassValue;
|
|
22
|
-
check?: tailwind_variants.ClassValue;
|
|
23
22
|
icon?: tailwind_variants.ClassValue;
|
|
23
|
+
check?: tailwind_variants.ClassValue;
|
|
24
24
|
item?: tailwind_variants.ClassValue;
|
|
25
25
|
};
|
|
26
26
|
};
|
|
@@ -35,8 +35,8 @@ declare const segmentedButtonTv: tailwind_variants.TVReturnType<{
|
|
|
35
35
|
[key: string]: tailwind_variants.ClassValue | {
|
|
36
36
|
root?: tailwind_variants.ClassValue;
|
|
37
37
|
label?: tailwind_variants.ClassValue;
|
|
38
|
-
check?: tailwind_variants.ClassValue;
|
|
39
38
|
icon?: tailwind_variants.ClassValue;
|
|
39
|
+
check?: tailwind_variants.ClassValue;
|
|
40
40
|
item?: tailwind_variants.ClassValue;
|
|
41
41
|
};
|
|
42
42
|
};
|
|
@@ -45,8 +45,8 @@ declare const segmentedButtonTv: tailwind_variants.TVReturnType<{
|
|
|
45
45
|
[key: string]: tailwind_variants.ClassValue | {
|
|
46
46
|
root?: tailwind_variants.ClassValue;
|
|
47
47
|
label?: tailwind_variants.ClassValue;
|
|
48
|
-
check?: tailwind_variants.ClassValue;
|
|
49
48
|
icon?: tailwind_variants.ClassValue;
|
|
49
|
+
check?: tailwind_variants.ClassValue;
|
|
50
50
|
item?: tailwind_variants.ClassValue;
|
|
51
51
|
};
|
|
52
52
|
};
|
|
@@ -67,8 +67,8 @@ declare const segmentedButtonTv: tailwind_variants.TVReturnType<{
|
|
|
67
67
|
[key: string]: tailwind_variants.ClassValue | {
|
|
68
68
|
root?: tailwind_variants.ClassValue;
|
|
69
69
|
label?: tailwind_variants.ClassValue;
|
|
70
|
-
check?: tailwind_variants.ClassValue;
|
|
71
70
|
icon?: tailwind_variants.ClassValue;
|
|
71
|
+
check?: tailwind_variants.ClassValue;
|
|
72
72
|
item?: tailwind_variants.ClassValue;
|
|
73
73
|
};
|
|
74
74
|
};
|
package/dist/slider.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import * as _m3_baseui_core from '@m3-baseui/core';
|
|
1
2
|
import * as react from 'react';
|
|
2
3
|
import * as _base_ui_react from '@base-ui/react';
|
|
3
4
|
import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config.js';
|
|
@@ -12,6 +13,9 @@ declare const sliderTv: tailwind_variants.TVReturnType<{
|
|
|
12
13
|
indicator?: tailwind_variants.ClassValue;
|
|
13
14
|
thumb?: tailwind_variants.ClassValue;
|
|
14
15
|
control?: tailwind_variants.ClassValue;
|
|
16
|
+
tickList?: tailwind_variants.ClassValue;
|
|
17
|
+
tick?: tailwind_variants.ClassValue;
|
|
18
|
+
valueLabel?: tailwind_variants.ClassValue;
|
|
15
19
|
};
|
|
16
20
|
};
|
|
17
21
|
} | {
|
|
@@ -23,6 +27,9 @@ declare const sliderTv: tailwind_variants.TVReturnType<{
|
|
|
23
27
|
indicator?: tailwind_variants.ClassValue;
|
|
24
28
|
thumb?: tailwind_variants.ClassValue;
|
|
25
29
|
control?: tailwind_variants.ClassValue;
|
|
30
|
+
tickList?: tailwind_variants.ClassValue;
|
|
31
|
+
tick?: tailwind_variants.ClassValue;
|
|
32
|
+
valueLabel?: tailwind_variants.ClassValue;
|
|
26
33
|
};
|
|
27
34
|
};
|
|
28
35
|
} | {}, {
|
|
@@ -32,6 +39,9 @@ declare const sliderTv: tailwind_variants.TVReturnType<{
|
|
|
32
39
|
indicator: string[];
|
|
33
40
|
thumb: string[];
|
|
34
41
|
value: string;
|
|
42
|
+
tickList: string;
|
|
43
|
+
tick: string[];
|
|
44
|
+
valueLabel: string[];
|
|
35
45
|
}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
|
|
36
46
|
[key: string]: {
|
|
37
47
|
[key: string]: tailwind_variants.ClassValue | {
|
|
@@ -41,6 +51,9 @@ declare const sliderTv: tailwind_variants.TVReturnType<{
|
|
|
41
51
|
indicator?: tailwind_variants.ClassValue;
|
|
42
52
|
thumb?: tailwind_variants.ClassValue;
|
|
43
53
|
control?: tailwind_variants.ClassValue;
|
|
54
|
+
tickList?: tailwind_variants.ClassValue;
|
|
55
|
+
tick?: tailwind_variants.ClassValue;
|
|
56
|
+
valueLabel?: tailwind_variants.ClassValue;
|
|
44
57
|
};
|
|
45
58
|
};
|
|
46
59
|
} | {}>, {
|
|
@@ -52,6 +65,9 @@ declare const sliderTv: tailwind_variants.TVReturnType<{
|
|
|
52
65
|
indicator?: tailwind_variants.ClassValue;
|
|
53
66
|
thumb?: tailwind_variants.ClassValue;
|
|
54
67
|
control?: tailwind_variants.ClassValue;
|
|
68
|
+
tickList?: tailwind_variants.ClassValue;
|
|
69
|
+
tick?: tailwind_variants.ClassValue;
|
|
70
|
+
valueLabel?: tailwind_variants.ClassValue;
|
|
55
71
|
};
|
|
56
72
|
};
|
|
57
73
|
} | {}, {
|
|
@@ -61,6 +77,9 @@ declare const sliderTv: tailwind_variants.TVReturnType<{
|
|
|
61
77
|
indicator: string[];
|
|
62
78
|
thumb: string[];
|
|
63
79
|
value: string;
|
|
80
|
+
tickList: string;
|
|
81
|
+
tick: string[];
|
|
82
|
+
valueLabel: string[];
|
|
64
83
|
}, tailwind_variants.TVReturnType<unknown, {
|
|
65
84
|
root: string;
|
|
66
85
|
control: string;
|
|
@@ -68,6 +87,9 @@ declare const sliderTv: tailwind_variants.TVReturnType<{
|
|
|
68
87
|
indicator: string[];
|
|
69
88
|
thumb: string[];
|
|
70
89
|
value: string;
|
|
90
|
+
tickList: string;
|
|
91
|
+
tick: string[];
|
|
92
|
+
valueLabel: string[];
|
|
71
93
|
}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
|
|
72
94
|
[key: string]: {
|
|
73
95
|
[key: string]: tailwind_variants.ClassValue | {
|
|
@@ -77,18 +99,23 @@ declare const sliderTv: tailwind_variants.TVReturnType<{
|
|
|
77
99
|
indicator?: tailwind_variants.ClassValue;
|
|
78
100
|
thumb?: tailwind_variants.ClassValue;
|
|
79
101
|
control?: tailwind_variants.ClassValue;
|
|
102
|
+
tickList?: tailwind_variants.ClassValue;
|
|
103
|
+
tick?: tailwind_variants.ClassValue;
|
|
104
|
+
valueLabel?: tailwind_variants.ClassValue;
|
|
80
105
|
};
|
|
81
106
|
};
|
|
82
107
|
} | {}>, unknown, unknown, undefined>>;
|
|
83
108
|
declare const Slider: {
|
|
84
109
|
Root: react.ForwardRefExoticComponent<Omit<_base_ui_react.SliderRoot.Props<number | readonly number[]> & {
|
|
85
110
|
ref?: React.Ref<HTMLDivElement> | undefined;
|
|
86
|
-
}, "ref"> & react.RefAttributes<
|
|
87
|
-
Control: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.SliderControlProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<
|
|
88
|
-
Track: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.SliderTrackProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<
|
|
89
|
-
Indicator: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.SliderIndicatorProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<
|
|
90
|
-
Thumb: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.SliderThumbProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<
|
|
91
|
-
Value: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.SliderValueProps, "ref"> & react.RefAttributes<HTMLOutputElement>, "ref"> & react.RefAttributes<
|
|
111
|
+
}, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
112
|
+
Control: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.SliderControlProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
113
|
+
Track: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.SliderTrackProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
114
|
+
Indicator: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.SliderIndicatorProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
115
|
+
Thumb: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.SliderThumbProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
116
|
+
Value: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.SliderValueProps, "ref"> & react.RefAttributes<HTMLOutputElement>, "ref"> & react.RefAttributes<HTMLOutputElement>>;
|
|
117
|
+
TickList: react.ForwardRefExoticComponent<_m3_baseui_core.SliderTickListProps & react.RefAttributes<HTMLDivElement>>;
|
|
118
|
+
ValueLabel: react.ForwardRefExoticComponent<_m3_baseui_core.SliderValueLabelProps & react.RefAttributes<HTMLSpanElement>>;
|
|
92
119
|
};
|
|
93
120
|
|
|
94
121
|
export { Slider, sliderTv };
|
package/dist/slider.js
CHANGED
|
@@ -45,7 +45,7 @@ var sliderTv = tv({
|
|
|
45
45
|
"group-data-[disabled]:bg-on-surface/[0.38]"
|
|
46
46
|
],
|
|
47
47
|
thumb: [
|
|
48
|
-
"relative size-5 rounded-full bg-primary outline-none",
|
|
48
|
+
"group/thumb relative size-5 rounded-full bg-primary outline-none",
|
|
49
49
|
'before:content-[""] before:absolute before:left-1/2 before:top-1/2 before:-translate-x-1/2 before:-translate-y-1/2',
|
|
50
50
|
"before:size-10 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity before:duration-100",
|
|
51
51
|
"hover:before:opacity-[var(--md-sys-state-hover)]",
|
|
@@ -53,7 +53,17 @@ var sliderTv = tv({
|
|
|
53
53
|
"data-[dragging]:before:opacity-[var(--md-sys-state-dragged)]",
|
|
54
54
|
"group-data-[disabled]:bg-on-surface/[0.38]"
|
|
55
55
|
],
|
|
56
|
-
value: "text-label-large text-on-surface-variant tabular-nums"
|
|
56
|
+
value: "text-label-large text-on-surface-variant tabular-nums",
|
|
57
|
+
tickList: "pointer-events-none absolute inset-0",
|
|
58
|
+
tick: [
|
|
59
|
+
"absolute size-1 -translate-x-1/2 -translate-y-1/2 rounded-full bg-on-surface-variant",
|
|
60
|
+
"data-[active]:bg-on-primary/[0.38]"
|
|
61
|
+
],
|
|
62
|
+
valueLabel: [
|
|
63
|
+
"pointer-events-none absolute bottom-full left-1/2 mb-2 -translate-x-1/2 whitespace-nowrap rounded px-2 py-0.5",
|
|
64
|
+
"bg-primary text-label-large text-on-primary tabular-nums opacity-0",
|
|
65
|
+
"data-[visible]:opacity-100"
|
|
66
|
+
]
|
|
57
67
|
}
|
|
58
68
|
});
|
|
59
69
|
var s = sliderTv();
|
|
@@ -63,7 +73,10 @@ var Slider = createSlider({
|
|
|
63
73
|
track: s.track(),
|
|
64
74
|
indicator: s.indicator(),
|
|
65
75
|
thumb: s.thumb(),
|
|
66
|
-
value: s.value()
|
|
76
|
+
value: s.value(),
|
|
77
|
+
tickList: s.tickList(),
|
|
78
|
+
tick: s.tick(),
|
|
79
|
+
valueLabel: s.valueLabel()
|
|
67
80
|
});
|
|
68
81
|
|
|
69
82
|
export { Slider, sliderTv };
|
package/dist/slider.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/tv.ts","../src/slider.ts"],"names":["baseTv"],"mappings":";;;;;AAeA,IAAM,SAAA,GAAY;AAAA,EAChB,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,iBAAA;AAAA,EACA,gBAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA;AACF,CAAA;AAEO,IAAM,EAAA,GAAS,CAAC,OAAA,EAAS,MAAA,KAC9BA,KAAO,OAAA,EAAS;AAAA,EACd,GAAG,MAAA;AAAA,EACH,aAAA,EAAe;AAAA,IACb,MAAA,EAAQ;AAAA,MACN,WAAA,EAAa;AAAA,QACX,WAAA,EAAa,CAAC,EAAE,IAAA,EAAM,CAAC,GAAG,SAAS,GAAG;AAAA;AACxC;AACF;AAEJ,CAAC,CAAA;;;AC9BI,IAAM,WAAW,EAAA,CAAG;AAAA,EACzB,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,gEAAA;AAAA,IACN,OAAA,EAAS,wCAAA;AAAA,IACT,KAAA,EAAO;AAAA,MACL,+DAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,SAAA,EAAW;AAAA,MACT,sCAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO;AAAA,MACL,
|
|
1
|
+
{"version":3,"sources":["../src/tv.ts","../src/slider.ts"],"names":["baseTv"],"mappings":";;;;;AAeA,IAAM,SAAA,GAAY;AAAA,EAChB,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,iBAAA;AAAA,EACA,gBAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA;AACF,CAAA;AAEO,IAAM,EAAA,GAAS,CAAC,OAAA,EAAS,MAAA,KAC9BA,KAAO,OAAA,EAAS;AAAA,EACd,GAAG,MAAA;AAAA,EACH,aAAA,EAAe;AAAA,IACb,MAAA,EAAQ;AAAA,MACN,WAAA,EAAa;AAAA,QACX,WAAA,EAAa,CAAC,EAAE,IAAA,EAAM,CAAC,GAAG,SAAS,GAAG;AAAA;AACxC;AACF;AAEJ,CAAC,CAAA;;;AC9BI,IAAM,WAAW,EAAA,CAAG;AAAA,EACzB,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,gEAAA;AAAA,IACN,OAAA,EAAS,wCAAA;AAAA,IACT,KAAA,EAAO;AAAA,MACL,+DAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,SAAA,EAAW;AAAA,MACT,sCAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO;AAAA,MACL,kEAAA;AAAA,MACA,oHAAA;AAAA,MACA,qHAAA;AAAA,MACA,kDAAA;AAAA,MACA,0DAAA;AAAA,MACA,8DAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO,uDAAA;AAAA,IACP,QAAA,EAAU,sCAAA;AAAA,IACV,IAAA,EAAM;AAAA,MACJ,sFAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,UAAA,EAAY;AAAA,MACV,+GAAA;AAAA,MACA,oEAAA;AAAA,MACA;AAAA;AACF;AAEJ,CAAC;AAED,IAAM,IAAI,QAAA,EAAS;AACZ,IAAM,SAAS,YAAA,CAAa;AAAA,EACjC,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,OAAA,EAAS,EAAE,OAAA,EAAQ;AAAA,EACnB,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,EACf,SAAA,EAAW,EAAE,SAAA,EAAU;AAAA,EACvB,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,EACf,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,EACf,QAAA,EAAU,EAAE,QAAA,EAAS;AAAA,EACrB,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,UAAA,EAAY,EAAE,UAAA;AAChB,CAAC","file":"slider.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 * slider.ts — Tailwind classes for the M3 Slider.\n *\n * 4dp rail (surface-container-highest) with a primary active indicator and a\n * 20dp primary thumb carrying a 40dp circular state layer (hover/focus/drag).\n *\n * Disabled follows M3 per-token opacities (not a blanket fade): inactive track\n * on-surface/0.12, active track + handle on-surface/0.38. The root carries a\n * `group` so the descendant parts can react to Base UI's data-disabled on Root.\n */\nimport { createSlider } from '@m3-baseui/core';\nimport { tv } from './tv';\n\nexport const sliderTv = tv({\n slots: {\n root: 'group relative flex items-center select-none w-full touch-none',\n control: 'relative flex items-center w-full h-10',\n track: [\n 'relative w-full h-1 rounded-full bg-surface-container-highest',\n 'group-data-[disabled]:bg-on-surface/[0.12]',\n ],\n indicator: [\n 'absolute h-1 rounded-full bg-primary',\n 'group-data-[disabled]:bg-on-surface/[0.38]',\n ],\n thumb: [\n 'group/thumb relative size-5 rounded-full bg-primary outline-none',\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-primary 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 'data-[dragging]:before:opacity-[var(--md-sys-state-dragged)]',\n 'group-data-[disabled]:bg-on-surface/[0.38]',\n ],\n value: 'text-label-large text-on-surface-variant tabular-nums',\n tickList: 'pointer-events-none absolute inset-0',\n tick: [\n 'absolute size-1 -translate-x-1/2 -translate-y-1/2 rounded-full bg-on-surface-variant',\n 'data-[active]:bg-on-primary/[0.38]',\n ],\n valueLabel: [\n 'pointer-events-none absolute bottom-full left-1/2 mb-2 -translate-x-1/2 whitespace-nowrap rounded px-2 py-0.5',\n 'bg-primary text-label-large text-on-primary tabular-nums opacity-0',\n 'data-[visible]:opacity-100',\n ],\n },\n});\n\nconst s = sliderTv();\nexport const Slider = createSlider({\n root: s.root(),\n control: s.control(),\n track: s.track(),\n indicator: s.indicator(),\n thumb: s.thumb(),\n value: s.value(),\n tickList: s.tickList(),\n tick: s.tick(),\n valueLabel: s.valueLabel(),\n});\n"]}
|
package/dist/switch.js
CHANGED
|
@@ -21,7 +21,10 @@ var switchTv = tv({
|
|
|
21
21
|
"absolute top-1/2 -translate-y-1/2 left-[6px] size-4 rounded-full pointer-events-none",
|
|
22
22
|
"flex items-center justify-center",
|
|
23
23
|
"bg-outline text-on-surface",
|
|
24
|
-
|
|
24
|
+
// M3 spatial motion: the handle slides/grows with emphasized easing over
|
|
25
|
+
// 300ms (token-backed). emphasized is overshoot-free, so it stays safe for
|
|
26
|
+
// the handle's color transitions too (no spring flicker on background-color).
|
|
27
|
+
"transition-all ease-emphasized duration-[var(--md-sys-motion-duration-medium2)]",
|
|
25
28
|
"data-[checked]:left-[22px] data-[checked]:size-6 data-[checked]:bg-on-primary data-[checked]:text-primary",
|
|
26
29
|
// M3 with-icon: the unchecked handle grows to 24dp to fit its icon
|
|
27
30
|
"data-[with-icon]:data-[unchecked]:left-1 data-[with-icon]:data-[unchecked]:size-6",
|
package/dist/switch.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/switch.ts"],"names":[],"mappings":";;;;;AAUO,IAAM,WAAW,EAAA,CAAG;AAAA,EACzB,KAAA,EAAO;AAAA,IACL,IAAA,EAAM;AAAA,MACJ,kGAAA;AAAA,MACA,6CAAA;AAAA,MACA,8CAAA;AAAA,MACA,yDAAA;AAAA,MACA,4FAAA;AAAA,MACA,qCAAA;AAAA;AAAA;AAAA,MAGA,sFAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO;AAAA,MACL,sFAAA;AAAA,MACA,kCAAA;AAAA,MACA,4BAAA;AAAA,
|
|
1
|
+
{"version":3,"sources":["../src/switch.ts"],"names":[],"mappings":";;;;;AAUO,IAAM,WAAW,EAAA,CAAG;AAAA,EACzB,KAAA,EAAO;AAAA,IACL,IAAA,EAAM;AAAA,MACJ,kGAAA;AAAA,MACA,6CAAA;AAAA,MACA,8CAAA;AAAA,MACA,yDAAA;AAAA,MACA,4FAAA;AAAA,MACA,qCAAA;AAAA;AAAA;AAAA,MAGA,sFAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO;AAAA,MACL,sFAAA;AAAA,MACA,kCAAA;AAAA,MACA,4BAAA;AAAA;AAAA;AAAA;AAAA,MAIA,iFAAA;AAAA,MACA,2GAAA;AAAA;AAAA,MAEA,mFAAA;AAAA;AAAA;AAAA,MAGA,gHAAA;AAAA,MACA,0JAAA;AAAA;AAAA,MAEA,yCAAA;AAAA,MACA,uEAAA;AAAA;AAAA,MAEA,wCAAA;AAAA,MACA,iDAAA;AAAA;AAAA,MAEA,oHAAA;AAAA,MACA,qHAAA;AAAA,MACA,wDAAA;AAAA,MACA,gEAAA;AAAA,MACA;AAAA,KACF;AAAA;AAAA,IAEA,WAAA,EAAa;AAAA,MACX,qEAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,aAAA,EAAe;AAAA,MACb,qEAAA;AAAA,MACA;AAAA;AACF;AAEJ,CAAC;AAED,IAAM,IAAI,QAAA,EAAS;AACZ,IAAM,SAAS,YAAA,CAAa;AAAA,EACjC,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,EACf,WAAA,EAAa,EAAE,WAAA,EAAY;AAAA,EAC3B,aAAA,EAAe,EAAE,aAAA;AACnB,CAAC","file":"switch.js","sourcesContent":["/**\n * switch.ts — tailwind-variants slots for the M3 Switch.\n *\n * Track + handle styled off Base UI's data-checked/data-disabled state. The\n * thumb grows and slides when checked; a 40dp circular state layer (`before:`)\n * reacts to hover/focus/press on the root via the `group` utility.\n */\nimport { createSwitch } from '@m3-baseui/core';\nimport { tv } from 'tailwind-variants';\n\nexport const switchTv = tv({\n slots: {\n root: [\n 'group relative inline-flex shrink-0 w-[52px] h-8 rounded-full border-2 box-border cursor-pointer',\n 'bg-surface-container-highest border-outline',\n 'transition-colors duration-200 ease-standard',\n 'data-[checked]:bg-primary data-[checked]:border-primary',\n 'focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-secondary',\n 'data-[disabled]:pointer-events-none',\n // M3 disabled: faint track + outline (unselected); on-surface/12 track,\n // no outline (selected). Not a blanket element opacity.\n 'data-[disabled]:bg-surface-container-highest/12 data-[disabled]:border-on-surface/12',\n 'data-[disabled]:data-[checked]:bg-on-surface/12 data-[disabled]:data-[checked]:border-transparent',\n ],\n thumb: [\n 'absolute top-1/2 -translate-y-1/2 left-[6px] size-4 rounded-full pointer-events-none',\n 'flex items-center justify-center',\n 'bg-outline text-on-surface',\n // M3 spatial motion: the handle slides/grows with emphasized easing over\n // 300ms (token-backed). emphasized is overshoot-free, so it stays safe for\n // the handle's color transitions too (no spring flicker on background-color).\n 'transition-all ease-emphasized duration-[var(--md-sys-motion-duration-medium2)]',\n 'data-[checked]:left-[22px] data-[checked]:size-6 data-[checked]:bg-on-primary data-[checked]:text-primary',\n // M3 with-icon: the unchecked handle grows to 24dp to fit its icon\n 'data-[with-icon]:data-[unchecked]:left-1 data-[with-icon]:data-[unchecked]:size-6',\n // M3 handle interaction colors: unselected outline→on-surface-variant,\n // selected on-primary→primary-container on hover/focus/press\n 'group-hover:bg-on-surface-variant group-focus-visible:bg-on-surface-variant group-active:bg-on-surface-variant',\n 'group-hover:data-[checked]:bg-primary-container group-focus-visible:data-[checked]:bg-primary-container group-active:data-[checked]:bg-primary-container',\n // M3 squish: handle grows to 28px while pressed, staying on its side\n 'group-active:left-0 group-active:size-7',\n 'group-active:data-[checked]:left-5 group-active:data-[checked]:size-7',\n // M3 disabled handle: on-surface/38 (unselected), surface (selected)\n 'group-data-[disabled]:bg-on-surface/38',\n 'group-data-[disabled]:data-[checked]:bg-surface',\n // 40dp circular state layer centered on the thumb\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 'group-hover:before:opacity-[var(--md-sys-state-hover)]',\n 'group-focus-visible:before:opacity-[var(--md-sys-state-focus)]',\n 'group-active:before:opacity-[var(--md-sys-state-pressed)]',\n ],\n // Handle icons (16dp). Both stay mounted; the root's data-checked reveals one.\n iconChecked: [\n 'hidden group-data-[checked]:inline-flex items-center justify-center',\n 'text-on-primary-container [&>svg]:size-4',\n ],\n iconUnchecked: [\n 'inline-flex group-data-[checked]:hidden items-center justify-center',\n 'text-surface-container-highest [&>svg]:size-4',\n ],\n },\n});\n\nconst s = switchTv();\nexport const Switch = createSwitch({\n root: s.root(),\n thumb: s.thumb(),\n iconChecked: s.iconChecked(),\n iconUnchecked: s.iconUnchecked(),\n});\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@m3-baseui/react-tailwind",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.3.0",
|
|
4
4
|
"description": "M3 components implemented with tailwind-variants over the shared @m3-baseui/core factories. Ships the Tailwind v4 @theme preset.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|