@m3-baseui/react-tailwind 1.0.2 → 1.0.4
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/card.js +2 -0
- package/dist/card.js.map +1 -1
- package/dist/checkbox.d.ts +5 -5
- package/dist/divider.js +2 -1
- package/dist/divider.js.map +1 -1
- package/dist/index.js +31 -9
- package/dist/index.js.map +1 -1
- package/dist/item.d.ts +5 -5
- package/dist/navigation-bar.d.ts +5 -5
- package/dist/navigation-bar.js +20 -4
- package/dist/navigation-bar.js.map +1 -1
- package/dist/progress.d.ts +12 -12
- package/dist/progress.js.map +1 -1
- package/dist/segmented-button.d.ts +10 -10
- package/dist/slider.d.ts +5 -5
- package/dist/slider.js +1 -1
- package/dist/slider.js.map +1 -1
- package/dist/snackbar.d.ts +5 -5
- package/dist/snackbar.js +1 -1
- package/dist/snackbar.js.map +1 -1
- package/dist/textfield.js +5 -2
- package/dist/textfield.js.map +1 -1
- package/package.json +1 -1
- package/styles/preset.css +2 -1
package/dist/navigation-bar.js
CHANGED
|
@@ -9,7 +9,8 @@ var navigationBarTv = tv({
|
|
|
9
9
|
item: [
|
|
10
10
|
"group relative flex flex-1 flex-col items-center justify-center gap-1 px-1 pt-3 pb-4",
|
|
11
11
|
"bg-transparent border-0 cursor-pointer select-none outline-none",
|
|
12
|
-
|
|
12
|
+
// M3 disabled is per-token (icon + label dimmed below), not a blanket fade.
|
|
13
|
+
"data-[disabled]:pointer-events-none"
|
|
13
14
|
],
|
|
14
15
|
iconWrap: "relative flex items-center justify-center w-16 h-8",
|
|
15
16
|
indicator: [
|
|
@@ -19,17 +20,32 @@ var navigationBarTv = tv({
|
|
|
19
20
|
"before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100",
|
|
20
21
|
"group-hover:before:opacity-[var(--md-sys-state-hover)]",
|
|
21
22
|
"group-focus-visible:before:opacity-[var(--md-sys-state-focus)]",
|
|
22
|
-
"group-active:before:opacity-[var(--md-sys-state-pressed)]"
|
|
23
|
+
"group-active:before:opacity-[var(--md-sys-state-pressed)]",
|
|
24
|
+
// No state layer on a disabled destination.
|
|
25
|
+
"group-data-[disabled]:before:opacity-0"
|
|
23
26
|
],
|
|
24
27
|
icon: [
|
|
25
28
|
"relative flex items-center justify-center text-on-surface-variant",
|
|
26
29
|
"transition-colors duration-150 ease-standard",
|
|
27
|
-
|
|
30
|
+
// Raw <svg> icons render at 24dp (Material Symbols set their own size).
|
|
31
|
+
"[&_svg]:size-6",
|
|
32
|
+
"group-data-[pressed]:text-on-secondary-container",
|
|
33
|
+
// M3 disabled: icon dims to on-surface/0.38. The item is the only `.group`,
|
|
34
|
+
// so the disabled+active override must test both attributes on that single
|
|
35
|
+
// element (`.group[data-disabled][data-pressed] &`) to outrank the equal-
|
|
36
|
+
// specificity data-[pressed] color — a stacked `group-data-*:group-data-*`
|
|
37
|
+
// would expect two nested groups and never match.
|
|
38
|
+
"group-data-[disabled]:text-on-surface/[0.38]",
|
|
39
|
+
"group-[&[data-disabled][data-pressed]]:text-on-surface/[0.38]"
|
|
28
40
|
],
|
|
29
41
|
label: [
|
|
30
42
|
"text-label-medium text-on-surface-variant",
|
|
31
43
|
"transition-colors duration-150 ease-standard",
|
|
32
|
-
"group-data-[pressed]:text-on-surface group-data-[pressed]:font-bold"
|
|
44
|
+
"group-data-[pressed]:text-on-surface group-data-[pressed]:font-bold",
|
|
45
|
+
// M3 disabled: label dims to on-surface/0.38. Same-element override (see the
|
|
46
|
+
// icon slot) keeps a disabled+active label dimmed.
|
|
47
|
+
"group-data-[disabled]:text-on-surface/[0.38]",
|
|
48
|
+
"group-[&[data-disabled][data-pressed]]:text-on-surface/[0.38]"
|
|
33
49
|
]
|
|
34
50
|
}
|
|
35
51
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/navigation-bar.ts"],"names":[],"mappings":";;;;;AAWO,IAAM,kBAAkB,EAAA,CAAG;AAAA,EAChC,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,oEAAA;AAAA,IACN,IAAA,EAAM;AAAA,MACJ,sFAAA;AAAA,MACA,iEAAA;AAAA,
|
|
1
|
+
{"version":3,"sources":["../src/navigation-bar.ts"],"names":[],"mappings":";;;;;AAWO,IAAM,kBAAkB,EAAA,CAAG;AAAA,EAChC,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,oEAAA;AAAA,IACN,IAAA,EAAM;AAAA,MACJ,sFAAA;AAAA,MACA,iEAAA;AAAA;AAAA,MAEA;AAAA,KACF;AAAA,IACA,QAAA,EAAU,oDAAA;AAAA,IACV,SAAA,EAAW;AAAA,MACT,8DAAA;AAAA,MACA,8CAAA;AAAA,MACA,6CAAA;AAAA,MACA,4IAAA;AAAA,MACA,wDAAA;AAAA,MACA,gEAAA;AAAA,MACA,2DAAA;AAAA;AAAA,MAEA;AAAA,KACF;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,mEAAA;AAAA,MACA,8CAAA;AAAA;AAAA,MAEA,gBAAA;AAAA,MACA,kDAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMA,8CAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO;AAAA,MACL,2CAAA;AAAA,MACA,8CAAA;AAAA,MACA,qEAAA;AAAA;AAAA;AAAA,MAGA,8CAAA;AAAA,MACA;AAAA;AACF;AAEJ,CAAC;AAED,IAAM,IAAI,eAAA,EAAgB;AACnB,IAAM,gBAAgB,mBAAA,CAAoB;AAAA,EAC/C,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,QAAA,EAAU,EAAE,QAAA,EAAS;AAAA,EACrB,SAAA,EAAW,EAAE,SAAA,EAAU;AAAA,EACvB,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,KAAA,EAAO,EAAE,KAAA;AACX,CAAC","file":"navigation-bar.js","sourcesContent":["/**\n * navigation-bar.ts — tailwind-variants slots for the M3 NavigationBar.\n *\n * 80dp bar on surface-container. The selected item surfaces `data-pressed`\n * (Base UI Toggle); the pill, icon and label colors key off it via the `group`\n * on each item. State layer is the pill `::before`; the pointer ripple is added\n * by the factory. Same DOM as the VE build.\n */\nimport { createNavigationBar } from '@m3-baseui/core';\nimport { tv } from 'tailwind-variants';\n\nexport const navigationBarTv = tv({\n slots: {\n root: 'flex items-stretch justify-around w-full h-20 bg-surface-container',\n item: [\n 'group relative flex flex-1 flex-col items-center justify-center gap-1 px-1 pt-3 pb-4',\n 'bg-transparent border-0 cursor-pointer select-none outline-none',\n // M3 disabled is per-token (icon + label dimmed below), not a blanket fade.\n 'data-[disabled]:pointer-events-none',\n ],\n iconWrap: 'relative flex items-center justify-center w-16 h-8',\n indicator: [\n 'absolute inset-0 rounded-full bg-transparent overflow-hidden',\n 'transition-colors duration-150 ease-standard',\n 'group-data-[pressed]:bg-secondary-container',\n 'before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none 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 // No state layer on a disabled destination.\n 'group-data-[disabled]:before:opacity-0',\n ],\n icon: [\n 'relative flex items-center justify-center text-on-surface-variant',\n 'transition-colors duration-150 ease-standard',\n // Raw <svg> icons render at 24dp (Material Symbols set their own size).\n '[&_svg]:size-6',\n 'group-data-[pressed]:text-on-secondary-container',\n // M3 disabled: icon dims to on-surface/0.38. The item is the only `.group`,\n // so the disabled+active override must test both attributes on that single\n // element (`.group[data-disabled][data-pressed] &`) to outrank the equal-\n // specificity data-[pressed] color — a stacked `group-data-*:group-data-*`\n // would expect two nested groups and never match.\n 'group-data-[disabled]:text-on-surface/[0.38]',\n 'group-[&[data-disabled][data-pressed]]:text-on-surface/[0.38]',\n ],\n label: [\n 'text-label-medium text-on-surface-variant',\n 'transition-colors duration-150 ease-standard',\n 'group-data-[pressed]:text-on-surface group-data-[pressed]:font-bold',\n // M3 disabled: label dims to on-surface/0.38. Same-element override (see the\n // icon slot) keeps a disabled+active label dimmed.\n 'group-data-[disabled]:text-on-surface/[0.38]',\n 'group-[&[data-disabled][data-pressed]]:text-on-surface/[0.38]',\n ],\n },\n});\n\nconst s = navigationBarTv();\nexport const NavigationBar = createNavigationBar({\n root: s.root(),\n item: s.item(),\n iconWrap: s.iconWrap(),\n indicator: s.indicator(),\n icon: s.icon(),\n label: s.label(),\n});\n"]}
|
package/dist/progress.d.ts
CHANGED
|
@@ -7,16 +7,16 @@ import * as tailwind_variants from 'tailwind-variants';
|
|
|
7
7
|
declare const linearTv: tailwind_variants.TVReturnType<{
|
|
8
8
|
[key: string]: {
|
|
9
9
|
[key: string]: tailwind_variants.ClassValue | {
|
|
10
|
-
track?: tailwind_variants.ClassValue;
|
|
11
10
|
root?: tailwind_variants.ClassValue;
|
|
11
|
+
track?: tailwind_variants.ClassValue;
|
|
12
12
|
indicator?: tailwind_variants.ClassValue;
|
|
13
13
|
};
|
|
14
14
|
};
|
|
15
15
|
} | {
|
|
16
16
|
[x: string]: {
|
|
17
17
|
[x: string]: tailwind_variants.ClassValue | {
|
|
18
|
-
track?: tailwind_variants.ClassValue;
|
|
19
18
|
root?: tailwind_variants.ClassValue;
|
|
19
|
+
track?: tailwind_variants.ClassValue;
|
|
20
20
|
indicator?: tailwind_variants.ClassValue;
|
|
21
21
|
};
|
|
22
22
|
};
|
|
@@ -27,16 +27,16 @@ declare const linearTv: tailwind_variants.TVReturnType<{
|
|
|
27
27
|
}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
|
|
28
28
|
[key: string]: {
|
|
29
29
|
[key: string]: tailwind_variants.ClassValue | {
|
|
30
|
-
track?: tailwind_variants.ClassValue;
|
|
31
30
|
root?: tailwind_variants.ClassValue;
|
|
31
|
+
track?: tailwind_variants.ClassValue;
|
|
32
32
|
indicator?: tailwind_variants.ClassValue;
|
|
33
33
|
};
|
|
34
34
|
};
|
|
35
35
|
} | {}>, {
|
|
36
36
|
[key: string]: {
|
|
37
37
|
[key: string]: tailwind_variants.ClassValue | {
|
|
38
|
-
track?: tailwind_variants.ClassValue;
|
|
39
38
|
root?: tailwind_variants.ClassValue;
|
|
39
|
+
track?: tailwind_variants.ClassValue;
|
|
40
40
|
indicator?: tailwind_variants.ClassValue;
|
|
41
41
|
};
|
|
42
42
|
};
|
|
@@ -51,8 +51,8 @@ declare const linearTv: tailwind_variants.TVReturnType<{
|
|
|
51
51
|
}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
|
|
52
52
|
[key: string]: {
|
|
53
53
|
[key: string]: tailwind_variants.ClassValue | {
|
|
54
|
-
track?: tailwind_variants.ClassValue;
|
|
55
54
|
root?: tailwind_variants.ClassValue;
|
|
55
|
+
track?: tailwind_variants.ClassValue;
|
|
56
56
|
indicator?: tailwind_variants.ClassValue;
|
|
57
57
|
};
|
|
58
58
|
};
|
|
@@ -60,16 +60,16 @@ declare const linearTv: tailwind_variants.TVReturnType<{
|
|
|
60
60
|
declare const circularTv: tailwind_variants.TVReturnType<{
|
|
61
61
|
[key: string]: {
|
|
62
62
|
[key: string]: tailwind_variants.ClassValue | {
|
|
63
|
-
track?: tailwind_variants.ClassValue;
|
|
64
63
|
root?: tailwind_variants.ClassValue;
|
|
64
|
+
track?: tailwind_variants.ClassValue;
|
|
65
65
|
indicator?: tailwind_variants.ClassValue;
|
|
66
66
|
};
|
|
67
67
|
};
|
|
68
68
|
} | {
|
|
69
69
|
[x: string]: {
|
|
70
70
|
[x: string]: tailwind_variants.ClassValue | {
|
|
71
|
-
track?: tailwind_variants.ClassValue;
|
|
72
71
|
root?: tailwind_variants.ClassValue;
|
|
72
|
+
track?: tailwind_variants.ClassValue;
|
|
73
73
|
indicator?: tailwind_variants.ClassValue;
|
|
74
74
|
};
|
|
75
75
|
};
|
|
@@ -80,16 +80,16 @@ declare const circularTv: tailwind_variants.TVReturnType<{
|
|
|
80
80
|
}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
|
|
81
81
|
[key: string]: {
|
|
82
82
|
[key: string]: tailwind_variants.ClassValue | {
|
|
83
|
-
track?: tailwind_variants.ClassValue;
|
|
84
83
|
root?: tailwind_variants.ClassValue;
|
|
84
|
+
track?: tailwind_variants.ClassValue;
|
|
85
85
|
indicator?: tailwind_variants.ClassValue;
|
|
86
86
|
};
|
|
87
87
|
};
|
|
88
88
|
} | {}>, {
|
|
89
89
|
[key: string]: {
|
|
90
90
|
[key: string]: tailwind_variants.ClassValue | {
|
|
91
|
-
track?: tailwind_variants.ClassValue;
|
|
92
91
|
root?: tailwind_variants.ClassValue;
|
|
92
|
+
track?: tailwind_variants.ClassValue;
|
|
93
93
|
indicator?: tailwind_variants.ClassValue;
|
|
94
94
|
};
|
|
95
95
|
};
|
|
@@ -104,15 +104,15 @@ declare const circularTv: tailwind_variants.TVReturnType<{
|
|
|
104
104
|
}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
|
|
105
105
|
[key: string]: {
|
|
106
106
|
[key: string]: tailwind_variants.ClassValue | {
|
|
107
|
-
track?: tailwind_variants.ClassValue;
|
|
108
107
|
root?: tailwind_variants.ClassValue;
|
|
108
|
+
track?: tailwind_variants.ClassValue;
|
|
109
109
|
indicator?: tailwind_variants.ClassValue;
|
|
110
110
|
};
|
|
111
111
|
};
|
|
112
112
|
} | {}>, unknown, unknown, undefined>>;
|
|
113
113
|
declare const Progress: {
|
|
114
|
-
Linear: react.ForwardRefExoticComponent<_m3_baseui_core.LinearProgressOwnProps & Omit<react.HTMLAttributes<HTMLDivElement>, "
|
|
115
|
-
Circular: react.ForwardRefExoticComponent<_m3_baseui_core.CircularProgressOwnProps & Omit<react.HTMLAttributes<HTMLSpanElement>, "
|
|
114
|
+
Linear: react.ForwardRefExoticComponent<_m3_baseui_core.LinearProgressOwnProps & Omit<react.HTMLAttributes<HTMLDivElement>, "defaultValue" | "value"> & react.RefAttributes<HTMLDivElement>>;
|
|
115
|
+
Circular: react.ForwardRefExoticComponent<_m3_baseui_core.CircularProgressOwnProps & Omit<react.HTMLAttributes<HTMLSpanElement>, "defaultValue" | "value"> & react.RefAttributes<HTMLSpanElement>>;
|
|
116
116
|
};
|
|
117
117
|
|
|
118
118
|
export { Progress, circularTv, linearTv };
|
package/dist/progress.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/progress.ts"],"names":[],"mappings":";;;;;
|
|
1
|
+
{"version":3,"sources":["../src/progress.ts"],"names":[],"mappings":";;;;;AAaO,IAAM,WAAW,EAAA,CAAG;AAAA,EACzB,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,8DAAA;AAAA,IACN,KAAA,EAAO,4DAAA;AAAA,IACP,SAAA,EAAW;AAAA,MACT,mDAAA;AAAA,MACA,+CAAA;AAAA,MACA,6EAAA;AAAA,MACA;AAAA;AACF;AAEJ,CAAC;AAEM,IAAM,aAAa,EAAA,CAAG;AAAA,EAC3B,KAAA,EAAO;AAAA,IACL,IAAA,EAAM;AAAA,MACJ,iDAAA;AAAA,MACA,iCAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO,qDAAA;AAAA,IACP,SAAA,EAAW;AAAA,MACT,0DAAA;AAAA,MACA;AAAA;AACF;AAEJ,CAAC;AAED,IAAM,IAAI,QAAA,EAAS;AACnB,IAAM,IAAI,UAAA,EAAW;AACd,IAAM,WAAW,cAAA,CAAe;AAAA,EACrC,MAAA,EAAQ,EAAE,IAAA,EAAM,CAAA,CAAE,IAAA,EAAK,EAAG,KAAA,EAAO,CAAA,CAAE,KAAA,EAAM,EAAG,SAAA,EAAW,CAAA,CAAE,WAAU,EAAE;AAAA,EACrE,QAAA,EAAU,EAAE,IAAA,EAAM,CAAA,CAAE,IAAA,EAAK,EAAG,KAAA,EAAO,CAAA,CAAE,KAAA,EAAM,EAAG,SAAA,EAAW,CAAA,CAAE,WAAU;AACvE,CAAC","file":"progress.js","sourcesContent":["/**\n * progress.ts — tailwind-variants slots for the M3 Progress indicators.\n *\n * Linear: a 4dp `surface-container-highest` track with a `primary` active\n * indicator; the indeterminate slide animation keys off the Root's\n * `data-indeterminate` (see the `m3-linear-indeterminate` keyframe in\n * preset.css). Circular: a 48dp / 4dp `primary` ring whose arc is drawn by the\n * factory; `data-indeterminate` rotates the whole ring via Tailwind's built-in\n * `animate-spin` (1s) — the VE build matches that period. Same DOM as the VE build.\n */\nimport { createProgress } from '@m3-baseui/core';\nimport { tv } from 'tailwind-variants';\n\nexport const linearTv = tv({\n slots: {\n root: 'group relative block w-full h-1 overflow-hidden rounded-full',\n track: 'absolute inset-0 bg-surface-container-highest rounded-full',\n indicator: [\n 'absolute inset-y-0 left-0 bg-primary rounded-full',\n 'transition-[width] duration-200 ease-standard',\n 'group-data-[indeterminate]:w-2/5 group-data-[indeterminate]:transition-none',\n 'group-data-[indeterminate]:animate-m3-linear-indeterminate',\n ],\n },\n});\n\nexport const circularTv = tv({\n slots: {\n root: [\n 'inline-flex items-center justify-center size-12',\n '[&_svg]:block [&_svg]:size-full',\n 'data-[indeterminate]:animate-spin',\n ],\n track: 'stroke-surface-container-highest [stroke-width:4px]',\n indicator: [\n 'stroke-primary [stroke-width:4px] [stroke-linecap:round]',\n 'transition-[stroke-dashoffset] duration-300 ease-standard',\n ],\n },\n});\n\nconst l = linearTv();\nconst c = circularTv();\nexport const Progress = createProgress({\n linear: { root: l.root(), track: l.track(), indicator: l.indicator() },\n circular: { root: c.root(), track: c.track(), indicator: c.indicator() },\n});\nexport type {\n LinearProgressProps,\n CircularProgressProps,\n} from '@m3-baseui/core';\n"]}
|
|
@@ -7,20 +7,20 @@ import * as tailwind_variants from 'tailwind-variants';
|
|
|
7
7
|
declare const segmentedButtonTv: tailwind_variants.TVReturnType<{
|
|
8
8
|
[key: string]: {
|
|
9
9
|
[key: string]: tailwind_variants.ClassValue | {
|
|
10
|
-
|
|
10
|
+
root?: tailwind_variants.ClassValue;
|
|
11
11
|
check?: tailwind_variants.ClassValue;
|
|
12
|
+
label?: tailwind_variants.ClassValue;
|
|
12
13
|
icon?: tailwind_variants.ClassValue;
|
|
13
|
-
root?: tailwind_variants.ClassValue;
|
|
14
14
|
item?: tailwind_variants.ClassValue;
|
|
15
15
|
};
|
|
16
16
|
};
|
|
17
17
|
} | {
|
|
18
18
|
[x: string]: {
|
|
19
19
|
[x: string]: tailwind_variants.ClassValue | {
|
|
20
|
-
|
|
20
|
+
root?: tailwind_variants.ClassValue;
|
|
21
21
|
check?: tailwind_variants.ClassValue;
|
|
22
|
+
label?: tailwind_variants.ClassValue;
|
|
22
23
|
icon?: tailwind_variants.ClassValue;
|
|
23
|
-
root?: tailwind_variants.ClassValue;
|
|
24
24
|
item?: tailwind_variants.ClassValue;
|
|
25
25
|
};
|
|
26
26
|
};
|
|
@@ -33,20 +33,20 @@ declare const segmentedButtonTv: tailwind_variants.TVReturnType<{
|
|
|
33
33
|
}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
|
|
34
34
|
[key: string]: {
|
|
35
35
|
[key: string]: tailwind_variants.ClassValue | {
|
|
36
|
-
|
|
36
|
+
root?: tailwind_variants.ClassValue;
|
|
37
37
|
check?: tailwind_variants.ClassValue;
|
|
38
|
+
label?: tailwind_variants.ClassValue;
|
|
38
39
|
icon?: tailwind_variants.ClassValue;
|
|
39
|
-
root?: tailwind_variants.ClassValue;
|
|
40
40
|
item?: tailwind_variants.ClassValue;
|
|
41
41
|
};
|
|
42
42
|
};
|
|
43
43
|
} | {}>, {
|
|
44
44
|
[key: string]: {
|
|
45
45
|
[key: string]: tailwind_variants.ClassValue | {
|
|
46
|
-
|
|
46
|
+
root?: tailwind_variants.ClassValue;
|
|
47
47
|
check?: tailwind_variants.ClassValue;
|
|
48
|
+
label?: tailwind_variants.ClassValue;
|
|
48
49
|
icon?: tailwind_variants.ClassValue;
|
|
49
|
-
root?: tailwind_variants.ClassValue;
|
|
50
50
|
item?: tailwind_variants.ClassValue;
|
|
51
51
|
};
|
|
52
52
|
};
|
|
@@ -65,10 +65,10 @@ declare const segmentedButtonTv: tailwind_variants.TVReturnType<{
|
|
|
65
65
|
}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
|
|
66
66
|
[key: string]: {
|
|
67
67
|
[key: string]: tailwind_variants.ClassValue | {
|
|
68
|
-
|
|
68
|
+
root?: tailwind_variants.ClassValue;
|
|
69
69
|
check?: tailwind_variants.ClassValue;
|
|
70
|
+
label?: tailwind_variants.ClassValue;
|
|
70
71
|
icon?: tailwind_variants.ClassValue;
|
|
71
|
-
root?: tailwind_variants.ClassValue;
|
|
72
72
|
item?: tailwind_variants.ClassValue;
|
|
73
73
|
};
|
|
74
74
|
};
|
package/dist/slider.d.ts
CHANGED
|
@@ -6,9 +6,9 @@ import * as tailwind_variants from 'tailwind-variants';
|
|
|
6
6
|
declare const sliderTv: tailwind_variants.TVReturnType<{
|
|
7
7
|
[key: string]: {
|
|
8
8
|
[key: string]: tailwind_variants.ClassValue | {
|
|
9
|
+
root?: tailwind_variants.ClassValue;
|
|
9
10
|
value?: tailwind_variants.ClassValue;
|
|
10
11
|
track?: tailwind_variants.ClassValue;
|
|
11
|
-
root?: tailwind_variants.ClassValue;
|
|
12
12
|
indicator?: tailwind_variants.ClassValue;
|
|
13
13
|
thumb?: tailwind_variants.ClassValue;
|
|
14
14
|
control?: tailwind_variants.ClassValue;
|
|
@@ -17,9 +17,9 @@ declare const sliderTv: tailwind_variants.TVReturnType<{
|
|
|
17
17
|
} | {
|
|
18
18
|
[x: string]: {
|
|
19
19
|
[x: string]: tailwind_variants.ClassValue | {
|
|
20
|
+
root?: tailwind_variants.ClassValue;
|
|
20
21
|
value?: tailwind_variants.ClassValue;
|
|
21
22
|
track?: tailwind_variants.ClassValue;
|
|
22
|
-
root?: tailwind_variants.ClassValue;
|
|
23
23
|
indicator?: tailwind_variants.ClassValue;
|
|
24
24
|
thumb?: tailwind_variants.ClassValue;
|
|
25
25
|
control?: tailwind_variants.ClassValue;
|
|
@@ -35,9 +35,9 @@ declare const sliderTv: tailwind_variants.TVReturnType<{
|
|
|
35
35
|
}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
|
|
36
36
|
[key: string]: {
|
|
37
37
|
[key: string]: tailwind_variants.ClassValue | {
|
|
38
|
+
root?: tailwind_variants.ClassValue;
|
|
38
39
|
value?: tailwind_variants.ClassValue;
|
|
39
40
|
track?: tailwind_variants.ClassValue;
|
|
40
|
-
root?: tailwind_variants.ClassValue;
|
|
41
41
|
indicator?: tailwind_variants.ClassValue;
|
|
42
42
|
thumb?: tailwind_variants.ClassValue;
|
|
43
43
|
control?: tailwind_variants.ClassValue;
|
|
@@ -46,9 +46,9 @@ declare const sliderTv: tailwind_variants.TVReturnType<{
|
|
|
46
46
|
} | {}>, {
|
|
47
47
|
[key: string]: {
|
|
48
48
|
[key: string]: tailwind_variants.ClassValue | {
|
|
49
|
+
root?: tailwind_variants.ClassValue;
|
|
49
50
|
value?: tailwind_variants.ClassValue;
|
|
50
51
|
track?: tailwind_variants.ClassValue;
|
|
51
|
-
root?: tailwind_variants.ClassValue;
|
|
52
52
|
indicator?: tailwind_variants.ClassValue;
|
|
53
53
|
thumb?: tailwind_variants.ClassValue;
|
|
54
54
|
control?: tailwind_variants.ClassValue;
|
|
@@ -71,9 +71,9 @@ declare const sliderTv: tailwind_variants.TVReturnType<{
|
|
|
71
71
|
}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
|
|
72
72
|
[key: string]: {
|
|
73
73
|
[key: string]: tailwind_variants.ClassValue | {
|
|
74
|
+
root?: tailwind_variants.ClassValue;
|
|
74
75
|
value?: tailwind_variants.ClassValue;
|
|
75
76
|
track?: tailwind_variants.ClassValue;
|
|
76
|
-
root?: tailwind_variants.ClassValue;
|
|
77
77
|
indicator?: tailwind_variants.ClassValue;
|
|
78
78
|
thumb?: tailwind_variants.ClassValue;
|
|
79
79
|
control?: tailwind_variants.ClassValue;
|
package/dist/slider.js
CHANGED
|
@@ -50,7 +50,7 @@ var sliderTv = tv({
|
|
|
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)]",
|
|
52
52
|
"focus-visible:before:opacity-[var(--md-sys-state-focus)]",
|
|
53
|
-
"data-[dragging]:before:opacity-[var(--md-sys-state-
|
|
53
|
+
"data-[dragging]:before:opacity-[var(--md-sys-state-dragged)]",
|
|
54
54
|
"group-data-[disabled]:bg-on-surface/[0.38]"
|
|
55
55
|
],
|
|
56
56
|
value: "text-label-large text-on-surface-variant tabular-nums"
|
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,sDAAA;AAAA,MACA,oHAAA;AAAA,MACA,qHAAA;AAAA,MACA,kDAAA;AAAA,MACA,0DAAA;AAAA,MACA,8DAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO;AAAA;AAEX,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;AACX,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 '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-
|
|
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,sDAAA;AAAA,MACA,oHAAA;AAAA,MACA,qHAAA;AAAA,MACA,kDAAA;AAAA,MACA,0DAAA;AAAA,MACA,8DAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO;AAAA;AAEX,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;AACX,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 '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 },\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});\n"]}
|
package/dist/snackbar.d.ts
CHANGED
|
@@ -7,24 +7,24 @@ export { useSnackbar } from '@m3-baseui/core';
|
|
|
7
7
|
declare const snackbarTv: tailwind_variants.TVReturnType<{
|
|
8
8
|
[key: string]: {
|
|
9
9
|
[key: string]: tailwind_variants.ClassValue | {
|
|
10
|
+
root?: tailwind_variants.ClassValue;
|
|
10
11
|
title?: tailwind_variants.ClassValue;
|
|
11
12
|
content?: tailwind_variants.ClassValue;
|
|
12
13
|
close?: tailwind_variants.ClassValue;
|
|
13
14
|
action?: tailwind_variants.ClassValue;
|
|
14
15
|
description?: tailwind_variants.ClassValue;
|
|
15
|
-
root?: tailwind_variants.ClassValue;
|
|
16
16
|
viewport?: tailwind_variants.ClassValue;
|
|
17
17
|
};
|
|
18
18
|
};
|
|
19
19
|
} | {
|
|
20
20
|
[x: string]: {
|
|
21
21
|
[x: string]: tailwind_variants.ClassValue | {
|
|
22
|
+
root?: tailwind_variants.ClassValue;
|
|
22
23
|
title?: tailwind_variants.ClassValue;
|
|
23
24
|
content?: tailwind_variants.ClassValue;
|
|
24
25
|
close?: tailwind_variants.ClassValue;
|
|
25
26
|
action?: tailwind_variants.ClassValue;
|
|
26
27
|
description?: tailwind_variants.ClassValue;
|
|
27
|
-
root?: tailwind_variants.ClassValue;
|
|
28
28
|
viewport?: tailwind_variants.ClassValue;
|
|
29
29
|
};
|
|
30
30
|
};
|
|
@@ -39,24 +39,24 @@ declare const snackbarTv: tailwind_variants.TVReturnType<{
|
|
|
39
39
|
}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
|
|
40
40
|
[key: string]: {
|
|
41
41
|
[key: string]: tailwind_variants.ClassValue | {
|
|
42
|
+
root?: tailwind_variants.ClassValue;
|
|
42
43
|
title?: tailwind_variants.ClassValue;
|
|
43
44
|
content?: tailwind_variants.ClassValue;
|
|
44
45
|
close?: tailwind_variants.ClassValue;
|
|
45
46
|
action?: tailwind_variants.ClassValue;
|
|
46
47
|
description?: tailwind_variants.ClassValue;
|
|
47
|
-
root?: tailwind_variants.ClassValue;
|
|
48
48
|
viewport?: tailwind_variants.ClassValue;
|
|
49
49
|
};
|
|
50
50
|
};
|
|
51
51
|
} | {}>, {
|
|
52
52
|
[key: string]: {
|
|
53
53
|
[key: string]: tailwind_variants.ClassValue | {
|
|
54
|
+
root?: tailwind_variants.ClassValue;
|
|
54
55
|
title?: tailwind_variants.ClassValue;
|
|
55
56
|
content?: tailwind_variants.ClassValue;
|
|
56
57
|
close?: tailwind_variants.ClassValue;
|
|
57
58
|
action?: tailwind_variants.ClassValue;
|
|
58
59
|
description?: tailwind_variants.ClassValue;
|
|
59
|
-
root?: tailwind_variants.ClassValue;
|
|
60
60
|
viewport?: tailwind_variants.ClassValue;
|
|
61
61
|
};
|
|
62
62
|
};
|
|
@@ -79,12 +79,12 @@ declare const snackbarTv: tailwind_variants.TVReturnType<{
|
|
|
79
79
|
}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
|
|
80
80
|
[key: string]: {
|
|
81
81
|
[key: string]: tailwind_variants.ClassValue | {
|
|
82
|
+
root?: tailwind_variants.ClassValue;
|
|
82
83
|
title?: tailwind_variants.ClassValue;
|
|
83
84
|
content?: tailwind_variants.ClassValue;
|
|
84
85
|
close?: tailwind_variants.ClassValue;
|
|
85
86
|
action?: tailwind_variants.ClassValue;
|
|
86
87
|
description?: tailwind_variants.ClassValue;
|
|
87
|
-
root?: tailwind_variants.ClassValue;
|
|
88
88
|
viewport?: tailwind_variants.ClassValue;
|
|
89
89
|
};
|
|
90
90
|
};
|
package/dist/snackbar.js
CHANGED
|
@@ -20,7 +20,7 @@ var snackbarTv = tv({
|
|
|
20
20
|
],
|
|
21
21
|
content: "flex flex-col flex-1 min-w-0 gap-0.5",
|
|
22
22
|
title: "text-body-medium",
|
|
23
|
-
description: "text-body-
|
|
23
|
+
description: "text-body-medium",
|
|
24
24
|
action: [
|
|
25
25
|
"relative inline-flex items-center justify-center shrink-0 h-9 px-3 overflow-hidden",
|
|
26
26
|
"rounded-extra-small bg-transparent border-0 cursor-pointer outline-none",
|
package/dist/snackbar.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/snackbar.ts"],"names":[],"mappings":";;;;;;AAYO,IAAM,aAAa,EAAA,CAAG;AAAA,EAC3B,KAAA,EAAO;AAAA,IACL,QAAA,EAAU;AAAA,MACR,+CAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,qEAAA;AAAA,MACA,8EAAA;AAAA,MACA,kBAAA;AAAA,MACA,6DAAA;AAAA,MACA,qEAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,OAAA,EAAS,sCAAA;AAAA,IACT,KAAA,EAAO,kBAAA;AAAA,IACP,WAAA,EAAa,
|
|
1
|
+
{"version":3,"sources":["../src/snackbar.ts"],"names":[],"mappings":";;;;;;AAYO,IAAM,aAAa,EAAA,CAAG;AAAA,EAC3B,KAAA,EAAO;AAAA,IACL,QAAA,EAAU;AAAA,MACR,+CAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,qEAAA;AAAA,MACA,8EAAA;AAAA,MACA,kBAAA;AAAA,MACA,6DAAA;AAAA,MACA,qEAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,OAAA,EAAS,sCAAA;AAAA,IACT,KAAA,EAAO,kBAAA;AAAA,IACP,WAAA,EAAa,kBAAA;AAAA,IACb,MAAA,EAAQ;AAAA,MACN,oFAAA;AAAA,MACA,yEAAA;AAAA,MACA,uCAAA;AAAA,MACA,4IAAA;AAAA,MACA,kDAAA;AAAA,MACA,0DAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO;AAAA,MACL,+FAAA;AAAA,MACA,6EAAA;AAAA,MACA,4IAAA;AAAA,MACA,kDAAA;AAAA,MACA,0DAAA;AAAA,MACA,qDAAA;AAAA,MACA;AAAA;AACF;AAEJ,CAAC;AAED,IAAM,IAAI,UAAA,EAAW;AACd,IAAM,WAAW,cAAA,CAAe;AAAA,EACrC,QAAA,EAAU,EAAE,QAAA,EAAS;AAAA,EACrB,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,OAAA,EAAS,EAAE,OAAA,EAAQ;AAAA,EACnB,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,EACf,WAAA,EAAa,EAAE,WAAA,EAAY;AAAA,EAC3B,MAAA,EAAQ,EAAE,MAAA,EAAO;AAAA,EACjB,KAAA,EAAO,EAAE,KAAA;AACX,CAAC","file":"snackbar.js","sourcesContent":["/**\n * snackbar.ts — tailwind-variants slots for the M3 Snackbar.\n *\n * Inverse-surface container, extra-small corners, elevation level3. The Action\n * is an inverse-primary text button with a state layer + ripple. Enter/exit key\n * off Toast's `data-starting-style` / `data-ending-style`. Same DOM as VE.\n */\nimport { createSnackbar } from '@m3-baseui/core';\nimport { tv } from 'tailwind-variants';\n\nexport { useSnackbar } from '@m3-baseui/core';\n\nexport const snackbarTv = tv({\n slots: {\n viewport: [\n 'fixed bottom-4 left-1/2 -translate-x-1/2 z-50',\n 'flex flex-col gap-2 w-[min(560px,calc(100vw-32px))]',\n ],\n root: [\n 'relative flex items-center gap-2 min-h-12 box-border pl-4 pr-2 py-2',\n 'rounded-extra-small bg-inverse-surface text-inverse-on-surface shadow-level3',\n 'text-body-medium',\n 'transition-[opacity,transform] duration-200 ease-emphasized',\n 'data-[starting-style]:opacity-0 data-[starting-style]:translate-y-2',\n 'data-[ending-style]:opacity-0',\n ],\n content: 'flex flex-col flex-1 min-w-0 gap-0.5',\n title: 'text-body-medium',\n description: 'text-body-medium',\n action: [\n 'relative inline-flex items-center justify-center shrink-0 h-9 px-3 overflow-hidden',\n 'rounded-extra-small bg-transparent border-0 cursor-pointer outline-none',\n 'text-inverse-primary text-label-large',\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 close: [\n 'relative inline-flex items-center justify-center shrink-0 size-8 rounded-full overflow-hidden',\n 'bg-transparent border-0 cursor-pointer text-inverse-on-surface 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 'active:before:opacity-[var(--md-sys-state-pressed)]',\n 'data-[pressed]:before:opacity-[var(--md-sys-state-pressed)]',\n ],\n },\n});\n\nconst s = snackbarTv();\nexport const Snackbar = createSnackbar({\n viewport: s.viewport(),\n root: s.root(),\n content: s.content(),\n title: s.title(),\n description: s.description(),\n action: s.action(),\n close: s.close(),\n});\n"]}
|
package/dist/textfield.js
CHANGED
|
@@ -37,7 +37,8 @@ var textFieldTv = tv({
|
|
|
37
37
|
field: [
|
|
38
38
|
"rounded-t-extra-small bg-surface-container-highest",
|
|
39
39
|
"border-b-2 border-outline",
|
|
40
|
-
|
|
40
|
+
// M3 filled focus-active-indicator-height is 3dp (resting/error stay 2dp).
|
|
41
|
+
"group-data-[focused]:border-b-[3px] group-data-[focused]:border-primary group-data-[invalid]:border-error"
|
|
41
42
|
],
|
|
42
43
|
input: "pt-3",
|
|
43
44
|
label: [
|
|
@@ -48,7 +49,9 @@ var textFieldTv = tv({
|
|
|
48
49
|
outlined: {
|
|
49
50
|
field: [
|
|
50
51
|
"rounded-extra-small border border-outline",
|
|
51
|
-
|
|
52
|
+
// M3 outlined focus-outline-width is 3dp (matches Select's trigger);
|
|
53
|
+
// padding drops 2px so content stays steady as the 1dp border grows.
|
|
54
|
+
"group-data-[focused]:border-[3px] group-data-[focused]:border-primary group-data-[focused]:px-[14px]",
|
|
52
55
|
"group-data-[invalid]:border-error"
|
|
53
56
|
],
|
|
54
57
|
label: [
|
package/dist/textfield.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/textfield.ts"],"names":[],"mappings":";;;;;
|
|
1
|
+
{"version":3,"sources":["../src/textfield.ts"],"names":[],"mappings":";;;;;AAYO,IAAM,cAAc,EAAA,CAAG;AAAA,EAC5B,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,mCAAA;AAAA,IACN,KAAA,EAAO;AAAA,MACL,wDAAA;AAAA,MACA,8DAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,SAAA,EAAW,2CAAA;AAAA,IACX,KAAA,EAAO;AAAA,MACL,sFAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO;AAAA,MACL,iDAAA;AAAA,MACA,kEAAA;AAAA,MACA,2CAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,WAAA,EAAa,oDAAA;AAAA,IACb,YAAA,EAAc,oDAAA;AAAA,IACd,UAAA,EAAY;AAAA,MACV,yEAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,cAAA,EAAgB,SAAA;AAAA,IAChB,OAAA,EAAS;AAAA,GACX;AAAA,EACA,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,MAAA,EAAQ;AAAA,QACN,KAAA,EAAO;AAAA,UACL,oDAAA;AAAA,UACA,2BAAA;AAAA;AAAA,UAEA;AAAA,SACF;AAAA,QACA,KAAA,EAAO,MAAA;AAAA,QACP,KAAA,EAAO;AAAA,UACL,sGAAA;AAAA,UACA;AAAA;AACF,OACF;AAAA,MACA,QAAA,EAAU;AAAA,QACR,KAAA,EAAO;AAAA,UACL,2CAAA;AAAA;AAAA;AAAA,UAGA,sGAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,KAAA,EAAO;AAAA,UACL,iKAAA;AAAA,UACA;AAAA;AACF;AACF;AACF,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,OAAA,EAAS;AAAA;AAEb,CAAC;AAEM,IAAM,SAAA,GAAY,eAAA,CAAgB,CAAC,EAAE,SAAQ,KAAM;AACxD,EAAA,MAAM,CAAA,GAAI,WAAA,CAAY,EAAE,OAAA,EAAS,CAAA;AACjC,EAAA,OAAO;AAAA,IACL,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,IACb,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,IACf,SAAA,EAAW,EAAE,SAAA,EAAU;AAAA,IACvB,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,IACf,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,IACf,WAAA,EAAa,EAAE,WAAA,EAAY;AAAA,IAC3B,YAAA,EAAc,EAAE,YAAA,EAAa;AAAA,IAC7B,UAAA,EAAY,EAAE,UAAA,EAAW;AAAA,IACzB,cAAA,EAAgB,EAAE,cAAA,EAAe;AAAA,IACjC,OAAA,EAAS,EAAE,OAAA;AAAQ,GACrB;AACF,CAAC","file":"textfield.js","sourcesContent":["/**\n * textfield.ts — tailwind-variants slots for the M3 TextField.\n *\n * 56dp tall. The floating label and focus/filled border key off Field's\n * `data-focused` / `data-filled` / `data-invalid` via the `group` on Root.\n * Filled = surface-container-highest with a bottom indicator; outlined = a\n * border that thickens to 3dp primary on focus (M3 focus-outline-width). Same\n * DOM as the VE build.\n */\nimport { createTextField } from '@m3-baseui/core';\nimport { tv } from 'tailwind-variants';\n\nexport const textFieldTv = tv({\n slots: {\n root: 'flex flex-col gap-1 min-w-[210px]',\n field: [\n 'relative flex items-stretch gap-3 h-14 px-4 box-border',\n 'transition-[border-color,padding] duration-150 ease-standard',\n 'group-data-[disabled]:opacity-[0.38] group-data-[disabled]:pointer-events-none',\n ],\n inputWrap: 'relative flex-1 flex items-center min-w-0',\n input: [\n 'peer w-full bg-transparent outline-none border-0 p-0 text-body-large text-on-surface',\n 'placeholder:text-on-surface-variant',\n ],\n label: [\n 'absolute left-0 pointer-events-none origin-left',\n 'top-1/2 -translate-y-1/2 text-body-large text-on-surface-variant',\n 'transition-all duration-150 ease-standard',\n 'group-data-[focused]:text-primary group-data-[invalid]:text-error',\n ],\n leadingIcon: 'flex items-center shrink-0 text-on-surface-variant',\n trailingIcon: 'flex items-center shrink-0 text-on-surface-variant',\n supporting: [\n 'flex justify-between gap-4 px-4 text-body-small text-on-surface-variant',\n 'group-data-[invalid]:text-error',\n ],\n supportingText: 'min-w-0',\n counter: 'shrink-0 tabular-nums',\n },\n variants: {\n variant: {\n filled: {\n field: [\n 'rounded-t-extra-small bg-surface-container-highest',\n 'border-b-2 border-outline',\n // M3 filled focus-active-indicator-height is 3dp (resting/error stay 2dp).\n 'group-data-[focused]:border-b-[3px] group-data-[focused]:border-primary group-data-[invalid]:border-error',\n ],\n input: 'pt-3',\n label: [\n 'group-data-[focused]:top-1.5 group-data-[focused]:translate-y-0 group-data-[focused]:text-body-small',\n 'group-data-[filled]:top-1.5 group-data-[filled]:translate-y-0 group-data-[filled]:text-body-small',\n ],\n },\n outlined: {\n field: [\n 'rounded-extra-small border border-outline',\n // M3 outlined focus-outline-width is 3dp (matches Select's trigger);\n // padding drops 2px so content stays steady as the 1dp border grows.\n 'group-data-[focused]:border-[3px] group-data-[focused]:border-primary group-data-[focused]:px-[14px]',\n 'group-data-[invalid]:border-error',\n ],\n label: [\n 'group-data-[focused]:top-0 group-data-[focused]:-translate-y-1/2 group-data-[focused]:text-body-small group-data-[focused]:bg-surface group-data-[focused]:px-1',\n 'group-data-[filled]:top-0 group-data-[filled]:-translate-y-1/2 group-data-[filled]:text-body-small group-data-[filled]:bg-surface group-data-[filled]:px-1',\n ],\n },\n },\n },\n defaultVariants: {\n variant: 'filled',\n },\n});\n\nexport const TextField = createTextField(({ variant }) => {\n const c = textFieldTv({ variant });\n return {\n root: c.root(),\n field: c.field(),\n inputWrap: c.inputWrap(),\n input: c.input(),\n label: c.label(),\n leadingIcon: c.leadingIcon(),\n trailingIcon: c.trailingIcon(),\n supporting: c.supporting(),\n supportingText: c.supportingText(),\n counter: c.counter(),\n };\n});\n\nexport type { TextFieldProps, TextFieldVariant } from '@m3-baseui/core';\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@m3-baseui/react-tailwind",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.4",
|
|
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",
|
package/styles/preset.css
CHANGED
|
@@ -14,7 +14,8 @@
|
|
|
14
14
|
/*
|
|
15
15
|
* Component keyframes that can't be expressed as utilities. The linear progress
|
|
16
16
|
* indeterminate bar slides a 40%-wide indicator across the track; the circular
|
|
17
|
-
* indeterminate spinner reuses Tailwind's built-in `animate-spin
|
|
17
|
+
* indeterminate spinner reuses Tailwind's built-in `animate-spin` (1s), which the
|
|
18
|
+
* VE build matches.
|
|
18
19
|
*/
|
|
19
20
|
@theme {
|
|
20
21
|
--animate-m3-linear-indeterminate: m3-linear-indeterminate 2s ease-in-out infinite;
|