@m3-baseui/react-tailwind 1.3.0 → 1.4.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/dialog.d.ts +76 -46
- package/dist/dialog.js +43 -8
- package/dist/dialog.js.map +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/index.js +122 -19
- package/dist/index.js.map +1 -1
- package/dist/item.d.ts +9 -9
- package/dist/item.js +9 -3
- package/dist/item.js.map +1 -1
- package/dist/list.d.ts +4 -4
- package/dist/list.js +9 -3
- package/dist/list.js.map +1 -1
- package/dist/progress.d.ts +6 -6
- package/dist/progress.js +23 -2
- package/dist/progress.js.map +1 -1
- package/dist/search.d.ts +5 -5
- package/dist/snackbar.js +6 -1
- package/dist/snackbar.js.map +1 -1
- package/dist/tooltip.d.ts +82 -1
- package/dist/tooltip.js +33 -5
- package/dist/tooltip.js.map +1 -1
- package/package.json +1 -1
package/dist/item.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import * as _m3_baseui_core from '@m3-baseui/core';
|
|
3
|
-
export { ItemProps } from '@m3-baseui/core';
|
|
3
|
+
export { ITEM_LEADING_VARIANTS, ItemLeadingVariant, ItemProps } from '@m3-baseui/core';
|
|
4
4
|
import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config.js';
|
|
5
5
|
import * as tailwind_variants from 'tailwind-variants';
|
|
6
6
|
|
|
@@ -9,9 +9,9 @@ declare const itemTv: tailwind_variants.TVReturnType<{
|
|
|
9
9
|
[key: string]: tailwind_variants.ClassValue | {
|
|
10
10
|
root?: tailwind_variants.ClassValue;
|
|
11
11
|
content?: tailwind_variants.ClassValue;
|
|
12
|
+
overline?: tailwind_variants.ClassValue;
|
|
12
13
|
leading?: tailwind_variants.ClassValue;
|
|
13
14
|
trailing?: tailwind_variants.ClassValue;
|
|
14
|
-
overline?: tailwind_variants.ClassValue;
|
|
15
15
|
supporting?: tailwind_variants.ClassValue;
|
|
16
16
|
headline?: tailwind_variants.ClassValue;
|
|
17
17
|
};
|
|
@@ -21,16 +21,16 @@ declare const itemTv: tailwind_variants.TVReturnType<{
|
|
|
21
21
|
[x: string]: tailwind_variants.ClassValue | {
|
|
22
22
|
root?: tailwind_variants.ClassValue;
|
|
23
23
|
content?: tailwind_variants.ClassValue;
|
|
24
|
+
overline?: tailwind_variants.ClassValue;
|
|
24
25
|
leading?: tailwind_variants.ClassValue;
|
|
25
26
|
trailing?: tailwind_variants.ClassValue;
|
|
26
|
-
overline?: tailwind_variants.ClassValue;
|
|
27
27
|
supporting?: tailwind_variants.ClassValue;
|
|
28
28
|
headline?: tailwind_variants.ClassValue;
|
|
29
29
|
};
|
|
30
30
|
};
|
|
31
31
|
} | {}, {
|
|
32
32
|
root: string[];
|
|
33
|
-
leading: string;
|
|
33
|
+
leading: string[];
|
|
34
34
|
content: string;
|
|
35
35
|
overline: string;
|
|
36
36
|
headline: string;
|
|
@@ -41,9 +41,9 @@ declare const itemTv: tailwind_variants.TVReturnType<{
|
|
|
41
41
|
[key: string]: tailwind_variants.ClassValue | {
|
|
42
42
|
root?: tailwind_variants.ClassValue;
|
|
43
43
|
content?: tailwind_variants.ClassValue;
|
|
44
|
+
overline?: tailwind_variants.ClassValue;
|
|
44
45
|
leading?: tailwind_variants.ClassValue;
|
|
45
46
|
trailing?: tailwind_variants.ClassValue;
|
|
46
|
-
overline?: tailwind_variants.ClassValue;
|
|
47
47
|
supporting?: tailwind_variants.ClassValue;
|
|
48
48
|
headline?: tailwind_variants.ClassValue;
|
|
49
49
|
};
|
|
@@ -53,16 +53,16 @@ declare const itemTv: tailwind_variants.TVReturnType<{
|
|
|
53
53
|
[key: string]: tailwind_variants.ClassValue | {
|
|
54
54
|
root?: tailwind_variants.ClassValue;
|
|
55
55
|
content?: tailwind_variants.ClassValue;
|
|
56
|
+
overline?: tailwind_variants.ClassValue;
|
|
56
57
|
leading?: tailwind_variants.ClassValue;
|
|
57
58
|
trailing?: tailwind_variants.ClassValue;
|
|
58
|
-
overline?: tailwind_variants.ClassValue;
|
|
59
59
|
supporting?: tailwind_variants.ClassValue;
|
|
60
60
|
headline?: tailwind_variants.ClassValue;
|
|
61
61
|
};
|
|
62
62
|
};
|
|
63
63
|
} | {}, {
|
|
64
64
|
root: string[];
|
|
65
|
-
leading: string;
|
|
65
|
+
leading: string[];
|
|
66
66
|
content: string;
|
|
67
67
|
overline: string;
|
|
68
68
|
headline: string;
|
|
@@ -70,7 +70,7 @@ declare const itemTv: tailwind_variants.TVReturnType<{
|
|
|
70
70
|
trailing: string;
|
|
71
71
|
}, tailwind_variants.TVReturnType<unknown, {
|
|
72
72
|
root: string[];
|
|
73
|
-
leading: string;
|
|
73
|
+
leading: string[];
|
|
74
74
|
content: string;
|
|
75
75
|
overline: string;
|
|
76
76
|
headline: string;
|
|
@@ -81,9 +81,9 @@ declare const itemTv: tailwind_variants.TVReturnType<{
|
|
|
81
81
|
[key: string]: tailwind_variants.ClassValue | {
|
|
82
82
|
root?: tailwind_variants.ClassValue;
|
|
83
83
|
content?: tailwind_variants.ClassValue;
|
|
84
|
+
overline?: tailwind_variants.ClassValue;
|
|
84
85
|
leading?: tailwind_variants.ClassValue;
|
|
85
86
|
trailing?: tailwind_variants.ClassValue;
|
|
86
|
-
overline?: tailwind_variants.ClassValue;
|
|
87
87
|
supporting?: tailwind_variants.ClassValue;
|
|
88
88
|
headline?: tailwind_variants.ClassValue;
|
|
89
89
|
};
|
package/dist/item.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { createItem } from '@m3-baseui/core';
|
|
3
|
+
export { ITEM_LEADING_VARIANTS } from '@m3-baseui/core';
|
|
3
4
|
import { tv as tv$1 } from 'tailwind-variants';
|
|
4
5
|
|
|
5
6
|
// src/item.ts
|
|
@@ -30,15 +31,20 @@ var tv = (options, config) => tv$1(options, {
|
|
|
30
31
|
}
|
|
31
32
|
}
|
|
32
33
|
});
|
|
33
|
-
|
|
34
|
-
// src/item.ts
|
|
35
34
|
var itemTv = tv({
|
|
36
35
|
slots: {
|
|
37
36
|
root: [
|
|
38
37
|
"relative flex w-full items-center gap-4 box-border px-4 py-3 min-h-14 text-left",
|
|
39
38
|
"bg-transparent text-on-surface"
|
|
40
39
|
],
|
|
41
|
-
leading:
|
|
40
|
+
leading: [
|
|
41
|
+
"flex items-center justify-center shrink-0 overflow-hidden text-on-surface-variant",
|
|
42
|
+
"[&_svg]:size-6 [&_img]:size-full [&_img]:object-cover",
|
|
43
|
+
// M3 leading column widths, keyed on the factory's data-leading attribute.
|
|
44
|
+
"data-[leading=avatar]:size-10 data-[leading=avatar]:rounded-full",
|
|
45
|
+
"data-[leading=image]:size-14",
|
|
46
|
+
"data-[leading=video]:w-25 data-[leading=video]:h-14"
|
|
47
|
+
],
|
|
42
48
|
content: "flex flex-col min-w-0 flex-1",
|
|
43
49
|
overline: "text-label-small text-on-surface-variant",
|
|
44
50
|
headline: "text-body-large text-on-surface",
|
package/dist/item.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/tv.ts","../src/item.ts"],"names":["baseTv"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../src/tv.ts","../src/item.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;AChCI,IAAM,SAAS,EAAA,CAAG;AAAA,EACvB,KAAA,EAAO;AAAA,IACL,IAAA,EAAM;AAAA,MACJ,iFAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,OAAA,EAAS;AAAA,MACP,mFAAA;AAAA,MACA,uDAAA;AAAA;AAAA,MAEA,kEAAA;AAAA,MACA,8BAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,OAAA,EAAS,8BAAA;AAAA,IACT,QAAA,EAAU,0CAAA;AAAA,IACV,QAAA,EAAU,iCAAA;AAAA,IACV,UAAA,EAAY,0CAAA;AAAA,IACZ,QAAA,EAAU;AAAA;AAEd,CAAC;AAED,IAAM,IAAI,MAAA,EAAO;AACV,IAAM,OAAO,UAAA,CAAW;AAAA,EAC7B,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,OAAA,EAAS,EAAE,OAAA,EAAQ;AAAA,EACnB,OAAA,EAAS,EAAE,OAAA,EAAQ;AAAA,EACnB,QAAA,EAAU,EAAE,QAAA,EAAS;AAAA,EACrB,QAAA,EAAU,EAAE,QAAA,EAAS;AAAA,EACrB,UAAA,EAAY,EAAE,UAAA,EAAW;AAAA,EACzB,QAAA,EAAU,EAAE,QAAA;AACd,CAAC","file":"item.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 * item.ts — tailwind-variants slots for the M3 Item row primitive.\n *\n * The shared row layout: leading slot, overline/headline/supporting column and\n * trailing slot. Headline is `body-large`/`on-surface`, overline `label-small`,\n * supporting `body-medium`, leading/trailing `on-surface-variant`. Inert by\n * design — interactive surfaces wrap it. Same DOM as the VE build.\n */\nimport { createItem } from '@m3-baseui/core';\nimport { tv } from './tv';\n\nexport const itemTv = tv({\n slots: {\n root: [\n 'relative flex w-full items-center gap-4 box-border px-4 py-3 min-h-14 text-left',\n 'bg-transparent text-on-surface',\n ],\n leading: [\n 'flex items-center justify-center shrink-0 overflow-hidden text-on-surface-variant',\n '[&_svg]:size-6 [&_img]:size-full [&_img]:object-cover',\n // M3 leading column widths, keyed on the factory's data-leading attribute.\n 'data-[leading=avatar]:size-10 data-[leading=avatar]:rounded-full',\n 'data-[leading=image]:size-14',\n 'data-[leading=video]:w-25 data-[leading=video]:h-14',\n ],\n content: 'flex flex-col min-w-0 flex-1',\n overline: 'text-label-small text-on-surface-variant',\n headline: 'text-body-large text-on-surface',\n supporting: 'text-body-medium text-on-surface-variant',\n trailing: 'flex items-center shrink-0 text-label-small text-on-surface-variant [&_svg]:size-6',\n },\n});\n\nconst s = itemTv();\nexport const Item = createItem({\n root: s.root(),\n leading: s.leading(),\n content: s.content(),\n overline: s.overline(),\n headline: s.headline(),\n supporting: s.supporting(),\n trailing: s.trailing(),\n});\nexport { ITEM_LEADING_VARIANTS } from '@m3-baseui/core';\nexport type { ItemProps, ItemLeadingVariant } from '@m3-baseui/core';\n"]}
|
package/dist/list.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as _m3_baseui_core from '@m3-baseui/core';
|
|
2
|
-
export { ListItemLines, ListItemProps } from '@m3-baseui/core';
|
|
2
|
+
export { LIST_LEADING_VARIANTS, ListItemLines, ListItemProps, ListLeadingVariant } from '@m3-baseui/core';
|
|
3
3
|
import * as react from 'react';
|
|
4
4
|
import * as tailwind_variants from 'tailwind-variants';
|
|
5
5
|
import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config.js';
|
|
@@ -25,7 +25,7 @@ declare const listTv: tailwind_variants.TVReturnType<{
|
|
|
25
25
|
}, {
|
|
26
26
|
root: string;
|
|
27
27
|
item: string[];
|
|
28
|
-
leading: string;
|
|
28
|
+
leading: string[];
|
|
29
29
|
content: string;
|
|
30
30
|
headline: string;
|
|
31
31
|
supporting: string;
|
|
@@ -87,7 +87,7 @@ declare const listTv: tailwind_variants.TVReturnType<{
|
|
|
87
87
|
}, {
|
|
88
88
|
root: string;
|
|
89
89
|
item: string[];
|
|
90
|
-
leading: string;
|
|
90
|
+
leading: string[];
|
|
91
91
|
content: string;
|
|
92
92
|
headline: string;
|
|
93
93
|
supporting: string;
|
|
@@ -113,7 +113,7 @@ declare const listTv: tailwind_variants.TVReturnType<{
|
|
|
113
113
|
}, {
|
|
114
114
|
root: string;
|
|
115
115
|
item: string[];
|
|
116
|
-
leading: string;
|
|
116
|
+
leading: string[];
|
|
117
117
|
content: string;
|
|
118
118
|
headline: string;
|
|
119
119
|
supporting: string;
|
package/dist/list.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { createList } from '@m3-baseui/core';
|
|
3
|
+
export { LIST_LEADING_VARIANTS } from '@m3-baseui/core';
|
|
3
4
|
import { tv as tv$1 } from 'tailwind-variants';
|
|
4
5
|
|
|
5
6
|
// src/list.ts
|
|
@@ -30,8 +31,6 @@ var tv = (options, config) => tv$1(options, {
|
|
|
30
31
|
}
|
|
31
32
|
}
|
|
32
33
|
});
|
|
33
|
-
|
|
34
|
-
// src/list.ts
|
|
35
34
|
var listTv = tv({
|
|
36
35
|
slots: {
|
|
37
36
|
root: "list-none m-0 px-0 py-2 bg-transparent",
|
|
@@ -39,7 +38,14 @@ var listTv = tv({
|
|
|
39
38
|
"group relative flex w-full items-center gap-4 box-border px-4 text-left",
|
|
40
39
|
"bg-transparent border-0 text-on-surface no-underline"
|
|
41
40
|
],
|
|
42
|
-
leading:
|
|
41
|
+
leading: [
|
|
42
|
+
"flex items-center justify-center shrink-0 overflow-hidden text-on-surface-variant",
|
|
43
|
+
"[&_svg]:size-6 [&_img]:size-full [&_img]:object-cover",
|
|
44
|
+
// M3 leading column widths, keyed on the factory's data-leading attribute.
|
|
45
|
+
"data-[leading=avatar]:size-10 data-[leading=avatar]:rounded-full",
|
|
46
|
+
"data-[leading=image]:size-14",
|
|
47
|
+
"data-[leading=video]:w-25 data-[leading=video]:h-14"
|
|
48
|
+
],
|
|
43
49
|
content: "flex flex-col min-w-0 flex-1",
|
|
44
50
|
headline: "text-body-large text-on-surface group-data-[disabled]:text-on-surface/38",
|
|
45
51
|
supporting: "text-body-medium text-on-surface-variant group-data-[disabled]:text-on-surface/38",
|
package/dist/list.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/tv.ts","../src/list.ts"],"names":["baseTv"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../src/tv.ts","../src/list.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,SAAS,EAAA,CAAG;AAAA,EACvB,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,wCAAA;AAAA,IACN,IAAA,EAAM;AAAA,MACJ,yEAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,OAAA,EAAS;AAAA,MACP,mFAAA;AAAA,MACA,uDAAA;AAAA;AAAA,MAEA,kEAAA;AAAA,MACA,8BAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,OAAA,EAAS,8BAAA;AAAA,IACT,QAAA,EAAU,0EAAA;AAAA,IACV,UAAA,EAAY,mFAAA;AAAA,IACZ,QAAA,EAAU;AAAA,MACR,oFAAA;AAAA,MACA;AAAA;AACF,GACF;AAAA,EACA,QAAA,EAAU;AAAA,IACR,KAAA,EAAO;AAAA,MACL,CAAA,EAAG,EAAE,IAAA,EAAM,eAAA,EAAgB;AAAA,MAC3B,CAAA,EAAG,EAAE,IAAA,EAAM,mBAAA,EAAoB;AAAA,MAC/B,CAAA,EAAG,EAAE,IAAA,EAAM,+BAAA;AAAgC,KAC7C;AAAA,IACA,WAAA,EAAa;AAAA,MACX,IAAA,EAAM;AAAA,QACJ,IAAA,EAAM;AAAA,UACJ,yDAAA;AAAA,UACA,4IAAA;AAAA,UACA,kDAAA;AAAA,UACA,0DAAA;AAAA,UACA,qDAAA;AAAA,UACA,sEAAA;AAAA,UACA;AAAA;AACF,OACF;AAAA,MACA,OAAO;AAAC;AACV,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,KAAA,EAAO,CAAA;AAAA,IACP,WAAA,EAAa;AAAA;AAEjB,CAAC;AAEM,IAAM,OAAO,UAAA,CAAW;AAAA,EAC7B,IAAA,EAAM,MAAA,EAAO,CAAE,IAAA,EAAK;AAAA,EACpB,IAAA,EAAM,CAAC,EAAE,KAAA,EAAO,aAAY,KAAM;AAChC,IAAA,MAAM,CAAA,GAAI,MAAA,CAAO,EAAE,KAAA,EAAO,aAAa,CAAA;AACvC,IAAA,OAAO;AAAA,MACL,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,MACb,OAAA,EAAS,EAAE,OAAA,EAAQ;AAAA,MACnB,OAAA,EAAS,EAAE,OAAA,EAAQ;AAAA,MACnB,QAAA,EAAU,EAAE,QAAA,EAAS;AAAA,MACrB,UAAA,EAAY,EAAE,UAAA,EAAW;AAAA,MACzB,QAAA,EAAU,EAAE,QAAA;AAAS,KACvB;AAAA,EACF;AACF,CAAC","file":"list.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 * list.ts — tailwind-variants slots for the M3 List.\n *\n * `surface` container with 8dp block padding; rows are 56/72/88dp for\n * one/two/three-line. Interactive rows get a `currentColor` state-layer\n * `::before` (the pointer ripple is added by the factory) and dim per-token when\n * `data-disabled`. Headline is `body-large`/`on-surface`, supporting\n * `body-medium`/`on-surface-variant`, leading/trailing `on-surface-variant`.\n * Same DOM as the VE build.\n */\nimport { createList } from '@m3-baseui/core';\nimport { tv } from './tv';\n\nexport const listTv = tv({\n slots: {\n root: 'list-none m-0 px-0 py-2 bg-transparent',\n item: [\n 'group relative flex w-full items-center gap-4 box-border px-4 text-left',\n 'bg-transparent border-0 text-on-surface no-underline',\n ],\n leading: [\n 'flex items-center justify-center shrink-0 overflow-hidden text-on-surface-variant',\n '[&_svg]:size-6 [&_img]:size-full [&_img]:object-cover',\n // M3 leading column widths, keyed on the factory's data-leading attribute.\n 'data-[leading=avatar]:size-10 data-[leading=avatar]:rounded-full',\n 'data-[leading=image]:size-14',\n 'data-[leading=video]:w-25 data-[leading=video]:h-14',\n ],\n content: 'flex flex-col min-w-0 flex-1',\n headline: 'text-body-large text-on-surface group-data-[disabled]:text-on-surface/38',\n supporting: 'text-body-medium text-on-surface-variant group-data-[disabled]:text-on-surface/38',\n trailing: [\n 'flex items-center shrink-0 text-label-small text-on-surface-variant [&_svg]:size-6',\n 'group-data-[disabled]:text-on-surface/38',\n ],\n },\n variants: {\n lines: {\n 1: { item: 'min-h-14 py-2' },\n 2: { item: 'min-h-[72px] py-2' },\n 3: { item: 'min-h-[88px] items-start py-3' },\n },\n interactive: {\n true: {\n item: [\n 'cursor-pointer select-none overflow-hidden 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-[disabled]:pointer-events-none data-[disabled]:before:opacity-0',\n 'disabled:pointer-events-none disabled:before:opacity-0',\n ],\n },\n false: {},\n },\n },\n defaultVariants: {\n lines: 1,\n interactive: false,\n },\n});\n\nexport const List = createList({\n root: listTv().root(),\n item: ({ lines, interactive }) => {\n const c = listTv({ lines, interactive });\n return {\n item: c.item(),\n leading: c.leading(),\n content: c.content(),\n headline: c.headline(),\n supporting: c.supporting(),\n trailing: c.trailing(),\n };\n },\n});\nexport { LIST_LEADING_VARIANTS } from '@m3-baseui/core';\nexport type { ListItemProps, ListItemLines, ListLeadingVariant } from '@m3-baseui/core';\n"]}
|
package/dist/progress.d.ts
CHANGED
|
@@ -21,8 +21,8 @@ declare const linearTv: tailwind_variants.TVReturnType<{
|
|
|
21
21
|
};
|
|
22
22
|
};
|
|
23
23
|
} | {}, {
|
|
24
|
-
root: string;
|
|
25
|
-
track: string;
|
|
24
|
+
root: string[];
|
|
25
|
+
track: string[];
|
|
26
26
|
indicator: string[];
|
|
27
27
|
}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
|
|
28
28
|
[key: string]: {
|
|
@@ -41,12 +41,12 @@ declare const linearTv: tailwind_variants.TVReturnType<{
|
|
|
41
41
|
};
|
|
42
42
|
};
|
|
43
43
|
} | {}, {
|
|
44
|
-
root: string;
|
|
45
|
-
track: string;
|
|
44
|
+
root: string[];
|
|
45
|
+
track: string[];
|
|
46
46
|
indicator: string[];
|
|
47
47
|
}, tailwind_variants.TVReturnType<unknown, {
|
|
48
|
-
root: string;
|
|
49
|
-
track: string;
|
|
48
|
+
root: string[];
|
|
49
|
+
track: string[];
|
|
50
50
|
indicator: string[];
|
|
51
51
|
}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
|
|
52
52
|
[key: string]: {
|
package/dist/progress.js
CHANGED
|
@@ -5,8 +5,29 @@ import { tv } from 'tailwind-variants';
|
|
|
5
5
|
// src/progress.ts
|
|
6
6
|
var linearTv = tv({
|
|
7
7
|
slots: {
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
// The track-stop dot (4dp, primary) sits at the inline-end via `after:`. It's
|
|
9
|
+
// a determinate-only M3 concept, so it's hidden while indeterminate. Logical
|
|
10
|
+
// `end-0` mirrors with the indicator under `dir="rtl"`.
|
|
11
|
+
root: [
|
|
12
|
+
"group relative block w-full h-1 overflow-hidden rounded-full",
|
|
13
|
+
"after:content-[''] after:absolute after:end-0 after:top-1/2 after:-translate-y-1/2",
|
|
14
|
+
"after:size-1 after:rounded-full after:bg-primary",
|
|
15
|
+
// Self variant (not `group-data-*`): the dot is on the root element itself,
|
|
16
|
+
// which carries `data-indeterminate` — it isn't a descendant of `.group`.
|
|
17
|
+
"data-[indeterminate]:after:hidden"
|
|
18
|
+
],
|
|
19
|
+
// Positioning container only; the inactive track is the `before:` pseudo so a
|
|
20
|
+
// 4dp gap separates it from the active indicator (`--m3-progress` + 4px). The
|
|
21
|
+
// gap uses logical inline insets so it tracks the indicator (which Base UI
|
|
22
|
+
// anchors at inline-start) under `dir="rtl"`. Indeterminate has no fraction,
|
|
23
|
+
// so the inactive track spans the full width.
|
|
24
|
+
track: [
|
|
25
|
+
"absolute inset-0",
|
|
26
|
+
"before:content-[''] before:absolute before:inset-y-0 before:end-0",
|
|
27
|
+
"before:[inset-inline-start:calc(var(--m3-progress,0%)+4px)]",
|
|
28
|
+
"before:bg-surface-container-highest before:rounded-full",
|
|
29
|
+
"group-data-[indeterminate]:before:start-0"
|
|
30
|
+
],
|
|
10
31
|
indicator: [
|
|
11
32
|
"absolute inset-y-0 left-0 bg-primary rounded-full",
|
|
12
33
|
"transition-[width] duration-200 ease-standard",
|
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":";;;;;AAgBO,IAAM,WAAW,EAAA,CAAG;AAAA,EACzB,KAAA,EAAO;AAAA;AAAA;AAAA;AAAA,IAIL,IAAA,EAAM;AAAA,MACJ,8DAAA;AAAA,MACA,oFAAA;AAAA,MACA,kDAAA;AAAA;AAAA;AAAA,MAGA;AAAA,KACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,KAAA,EAAO;AAAA,MACL,kBAAA;AAAA,MACA,mEAAA;AAAA,MACA,6DAAA;AAAA,MACA,yDAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,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` inactive track with a `primary`\n * active indicator. Per M3 the inactive track (`::before`) starts a 4dp gap past\n * the active tip — positioned from the factory's `--m3-progress` fraction — and a\n * `primary` track-stop dot (`::after`) sits at the far end. The indeterminate\n * slide animation keys off the Root's `data-indeterminate`, which also drops the\n * gap so the track stays full (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 // The track-stop dot (4dp, primary) sits at the inline-end via `after:`. It's\n // a determinate-only M3 concept, so it's hidden while indeterminate. Logical\n // `end-0` mirrors with the indicator under `dir=\"rtl\"`.\n root: [\n 'group relative block w-full h-1 overflow-hidden rounded-full',\n \"after:content-[''] after:absolute after:end-0 after:top-1/2 after:-translate-y-1/2\",\n 'after:size-1 after:rounded-full after:bg-primary',\n // Self variant (not `group-data-*`): the dot is on the root element itself,\n // which carries `data-indeterminate` — it isn't a descendant of `.group`.\n 'data-[indeterminate]:after:hidden',\n ],\n // Positioning container only; the inactive track is the `before:` pseudo so a\n // 4dp gap separates it from the active indicator (`--m3-progress` + 4px). The\n // gap uses logical inline insets so it tracks the indicator (which Base UI\n // anchors at inline-start) under `dir=\"rtl\"`. Indeterminate has no fraction,\n // so the inactive track spans the full width.\n track: [\n 'absolute inset-0',\n \"before:content-[''] before:absolute before:inset-y-0 before:end-0\",\n 'before:[inset-inline-start:calc(var(--m3-progress,0%)+4px)]',\n 'before:bg-surface-container-highest before:rounded-full',\n 'group-data-[indeterminate]:before:start-0',\n ],\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"]}
|
package/dist/search.d.ts
CHANGED
|
@@ -11,11 +11,11 @@ declare const searchTv: tailwind_variants.TVReturnType<{
|
|
|
11
11
|
separator?: tailwind_variants.ClassValue;
|
|
12
12
|
popup?: tailwind_variants.ClassValue;
|
|
13
13
|
icon?: tailwind_variants.ClassValue;
|
|
14
|
+
bar?: tailwind_variants.ClassValue;
|
|
14
15
|
clear?: tailwind_variants.ClassValue;
|
|
15
16
|
item?: tailwind_variants.ClassValue;
|
|
16
17
|
itemIndicator?: tailwind_variants.ClassValue;
|
|
17
18
|
groupLabel?: tailwind_variants.ClassValue;
|
|
18
|
-
bar?: tailwind_variants.ClassValue;
|
|
19
19
|
empty?: tailwind_variants.ClassValue;
|
|
20
20
|
};
|
|
21
21
|
};
|
|
@@ -27,11 +27,11 @@ declare const searchTv: tailwind_variants.TVReturnType<{
|
|
|
27
27
|
separator?: tailwind_variants.ClassValue;
|
|
28
28
|
popup?: tailwind_variants.ClassValue;
|
|
29
29
|
icon?: tailwind_variants.ClassValue;
|
|
30
|
+
bar?: tailwind_variants.ClassValue;
|
|
30
31
|
clear?: tailwind_variants.ClassValue;
|
|
31
32
|
item?: tailwind_variants.ClassValue;
|
|
32
33
|
itemIndicator?: tailwind_variants.ClassValue;
|
|
33
34
|
groupLabel?: tailwind_variants.ClassValue;
|
|
34
|
-
bar?: tailwind_variants.ClassValue;
|
|
35
35
|
empty?: tailwind_variants.ClassValue;
|
|
36
36
|
};
|
|
37
37
|
};
|
|
@@ -55,11 +55,11 @@ declare const searchTv: tailwind_variants.TVReturnType<{
|
|
|
55
55
|
separator?: tailwind_variants.ClassValue;
|
|
56
56
|
popup?: tailwind_variants.ClassValue;
|
|
57
57
|
icon?: tailwind_variants.ClassValue;
|
|
58
|
+
bar?: tailwind_variants.ClassValue;
|
|
58
59
|
clear?: tailwind_variants.ClassValue;
|
|
59
60
|
item?: tailwind_variants.ClassValue;
|
|
60
61
|
itemIndicator?: tailwind_variants.ClassValue;
|
|
61
62
|
groupLabel?: tailwind_variants.ClassValue;
|
|
62
|
-
bar?: tailwind_variants.ClassValue;
|
|
63
63
|
empty?: tailwind_variants.ClassValue;
|
|
64
64
|
};
|
|
65
65
|
};
|
|
@@ -71,11 +71,11 @@ declare const searchTv: tailwind_variants.TVReturnType<{
|
|
|
71
71
|
separator?: tailwind_variants.ClassValue;
|
|
72
72
|
popup?: tailwind_variants.ClassValue;
|
|
73
73
|
icon?: tailwind_variants.ClassValue;
|
|
74
|
+
bar?: tailwind_variants.ClassValue;
|
|
74
75
|
clear?: tailwind_variants.ClassValue;
|
|
75
76
|
item?: tailwind_variants.ClassValue;
|
|
76
77
|
itemIndicator?: tailwind_variants.ClassValue;
|
|
77
78
|
groupLabel?: tailwind_variants.ClassValue;
|
|
78
|
-
bar?: tailwind_variants.ClassValue;
|
|
79
79
|
empty?: tailwind_variants.ClassValue;
|
|
80
80
|
};
|
|
81
81
|
};
|
|
@@ -111,11 +111,11 @@ declare const searchTv: tailwind_variants.TVReturnType<{
|
|
|
111
111
|
separator?: tailwind_variants.ClassValue;
|
|
112
112
|
popup?: tailwind_variants.ClassValue;
|
|
113
113
|
icon?: tailwind_variants.ClassValue;
|
|
114
|
+
bar?: tailwind_variants.ClassValue;
|
|
114
115
|
clear?: tailwind_variants.ClassValue;
|
|
115
116
|
item?: tailwind_variants.ClassValue;
|
|
116
117
|
itemIndicator?: tailwind_variants.ClassValue;
|
|
117
118
|
groupLabel?: tailwind_variants.ClassValue;
|
|
118
|
-
bar?: tailwind_variants.ClassValue;
|
|
119
119
|
empty?: tailwind_variants.ClassValue;
|
|
120
120
|
};
|
|
121
121
|
};
|
package/dist/snackbar.js
CHANGED
|
@@ -8,10 +8,15 @@ var snackbarTv = tv({
|
|
|
8
8
|
slots: {
|
|
9
9
|
viewport: [
|
|
10
10
|
"fixed bottom-4 left-1/2 -translate-x-1/2 z-50",
|
|
11
|
-
|
|
11
|
+
// M3 container width: cap at 672dp, clamp to the viewport on small screens.
|
|
12
|
+
// Center items so content-following (w-fit) snackbars stay under the anchor.
|
|
13
|
+
"flex flex-col items-center gap-2 w-[calc(100vw-32px)] max-w-[672px]"
|
|
12
14
|
],
|
|
13
15
|
root: [
|
|
14
16
|
"relative flex items-center gap-2 min-h-12 box-border pl-4 pr-2 py-2",
|
|
17
|
+
// M3 container width follows content within min 344dp / max 672dp. The
|
|
18
|
+
// min is clamped by 100% so it never overflows a narrower viewport.
|
|
19
|
+
"w-fit min-w-[min(344px,100%)] max-w-[672px]",
|
|
15
20
|
"rounded-extra-small bg-inverse-surface text-inverse-on-surface shadow-level3",
|
|
16
21
|
"text-body-medium",
|
|
17
22
|
"transition-[opacity,transform] duration-200 ease-emphasized",
|
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,
|
|
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;AAAA;AAAA,MAGA;AAAA,KACF;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,qEAAA;AAAA;AAAA;AAAA,MAGA,6CAAA;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 // M3 container width: cap at 672dp, clamp to the viewport on small screens.\n // Center items so content-following (w-fit) snackbars stay under the anchor.\n 'flex flex-col items-center gap-2 w-[calc(100vw-32px)] max-w-[672px]',\n ],\n root: [\n 'relative flex items-center gap-2 min-h-12 box-border pl-4 pr-2 py-2',\n // M3 container width follows content within min 344dp / max 672dp. The\n // min is clamped by 100% so it never overflows a narrower viewport.\n 'w-fit min-w-[min(344px,100%)] max-w-[672px]',\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/tooltip.d.ts
CHANGED
|
@@ -48,6 +48,75 @@ declare const tooltipTv: tailwind_variants.TVReturnType<{
|
|
|
48
48
|
};
|
|
49
49
|
};
|
|
50
50
|
} | {}>, unknown, unknown, undefined>>;
|
|
51
|
+
declare const richTooltipTv: tailwind_variants.TVReturnType<{
|
|
52
|
+
[key: string]: {
|
|
53
|
+
[key: string]: tailwind_variants.ClassValue | {
|
|
54
|
+
actions?: tailwind_variants.ClassValue;
|
|
55
|
+
popup?: tailwind_variants.ClassValue;
|
|
56
|
+
supportingText?: tailwind_variants.ClassValue;
|
|
57
|
+
arrow?: tailwind_variants.ClassValue;
|
|
58
|
+
subhead?: tailwind_variants.ClassValue;
|
|
59
|
+
};
|
|
60
|
+
};
|
|
61
|
+
} | {
|
|
62
|
+
[x: string]: {
|
|
63
|
+
[x: string]: tailwind_variants.ClassValue | {
|
|
64
|
+
actions?: tailwind_variants.ClassValue;
|
|
65
|
+
popup?: tailwind_variants.ClassValue;
|
|
66
|
+
supportingText?: tailwind_variants.ClassValue;
|
|
67
|
+
arrow?: tailwind_variants.ClassValue;
|
|
68
|
+
subhead?: tailwind_variants.ClassValue;
|
|
69
|
+
};
|
|
70
|
+
};
|
|
71
|
+
} | {}, {
|
|
72
|
+
popup: string[];
|
|
73
|
+
arrow: string[];
|
|
74
|
+
subhead: string[];
|
|
75
|
+
supportingText: string[];
|
|
76
|
+
actions: string[];
|
|
77
|
+
}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
|
|
78
|
+
[key: string]: {
|
|
79
|
+
[key: string]: tailwind_variants.ClassValue | {
|
|
80
|
+
actions?: tailwind_variants.ClassValue;
|
|
81
|
+
popup?: tailwind_variants.ClassValue;
|
|
82
|
+
supportingText?: tailwind_variants.ClassValue;
|
|
83
|
+
arrow?: tailwind_variants.ClassValue;
|
|
84
|
+
subhead?: tailwind_variants.ClassValue;
|
|
85
|
+
};
|
|
86
|
+
};
|
|
87
|
+
} | {}>, {
|
|
88
|
+
[key: string]: {
|
|
89
|
+
[key: string]: tailwind_variants.ClassValue | {
|
|
90
|
+
actions?: tailwind_variants.ClassValue;
|
|
91
|
+
popup?: tailwind_variants.ClassValue;
|
|
92
|
+
supportingText?: tailwind_variants.ClassValue;
|
|
93
|
+
arrow?: tailwind_variants.ClassValue;
|
|
94
|
+
subhead?: tailwind_variants.ClassValue;
|
|
95
|
+
};
|
|
96
|
+
};
|
|
97
|
+
} | {}, {
|
|
98
|
+
popup: string[];
|
|
99
|
+
arrow: string[];
|
|
100
|
+
subhead: string[];
|
|
101
|
+
supportingText: string[];
|
|
102
|
+
actions: string[];
|
|
103
|
+
}, tailwind_variants.TVReturnType<unknown, {
|
|
104
|
+
popup: string[];
|
|
105
|
+
arrow: string[];
|
|
106
|
+
subhead: string[];
|
|
107
|
+
supportingText: string[];
|
|
108
|
+
actions: string[];
|
|
109
|
+
}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
|
|
110
|
+
[key: string]: {
|
|
111
|
+
[key: string]: tailwind_variants.ClassValue | {
|
|
112
|
+
actions?: tailwind_variants.ClassValue;
|
|
113
|
+
popup?: tailwind_variants.ClassValue;
|
|
114
|
+
supportingText?: tailwind_variants.ClassValue;
|
|
115
|
+
arrow?: tailwind_variants.ClassValue;
|
|
116
|
+
subhead?: tailwind_variants.ClassValue;
|
|
117
|
+
};
|
|
118
|
+
};
|
|
119
|
+
} | {}>, unknown, unknown, undefined>>;
|
|
51
120
|
declare const Tooltip: {
|
|
52
121
|
Provider: react.FC<_base_ui_react.TooltipProviderProps>;
|
|
53
122
|
Root: <Payload>(props: _base_ui_react.TooltipRoot.Props<Payload>) => react.JSX.Element;
|
|
@@ -57,5 +126,17 @@ declare const Tooltip: {
|
|
|
57
126
|
Popup: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.TooltipPopupProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<unknown>>;
|
|
58
127
|
Arrow: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.TooltipArrowProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<unknown>>;
|
|
59
128
|
};
|
|
129
|
+
declare const RichTooltip: {
|
|
130
|
+
Root: typeof _base_ui_react.PopoverRoot;
|
|
131
|
+
Trigger: _base_ui_react.PopoverTrigger;
|
|
132
|
+
Portal: react.ForwardRefExoticComponent<Omit<_base_ui_react.PopoverPortalProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
133
|
+
Positioner: react.ForwardRefExoticComponent<Omit<_base_ui_react.PopoverPositionerProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
134
|
+
Popup: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.PopoverPopupProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<unknown>>;
|
|
135
|
+
Arrow: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.PopoverArrowProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<unknown>>;
|
|
136
|
+
Subhead: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.PopoverTitleProps, "ref"> & react.RefAttributes<HTMLHeadingElement>, "ref"> & react.RefAttributes<unknown>>;
|
|
137
|
+
SupportingText: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.PopoverDescriptionProps, "ref"> & react.RefAttributes<HTMLParagraphElement>, "ref"> & react.RefAttributes<unknown>>;
|
|
138
|
+
Actions: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
|
|
139
|
+
Close: react.ForwardRefExoticComponent<Omit<_base_ui_react.PopoverCloseProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
|
|
140
|
+
};
|
|
60
141
|
|
|
61
|
-
export { Tooltip, tooltipTv };
|
|
142
|
+
export { RichTooltip, Tooltip, richTooltipTv, tooltipTv };
|
package/dist/tooltip.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { createTooltip } from '@m3-baseui/core';
|
|
2
|
+
import { createTooltip, createRichTooltip } from '@m3-baseui/core';
|
|
3
3
|
import { tv as tv$1 } from 'tailwind-variants';
|
|
4
4
|
|
|
5
5
|
// src/tooltip.ts
|
|
@@ -32,21 +32,49 @@ var tv = (options, config) => tv$1(options, {
|
|
|
32
32
|
});
|
|
33
33
|
|
|
34
34
|
// src/tooltip.ts
|
|
35
|
+
var transition = [
|
|
36
|
+
"origin-[var(--transform-origin)] transition-[opacity,transform] duration-150 ease-standard",
|
|
37
|
+
"data-[starting-style]:opacity-0 data-[starting-style]:scale-95",
|
|
38
|
+
"data-[ending-style]:opacity-0 data-[ending-style]:scale-95"
|
|
39
|
+
];
|
|
35
40
|
var tooltipTv = tv({
|
|
36
41
|
slots: {
|
|
37
42
|
popup: [
|
|
38
43
|
"bg-inverse-surface text-inverse-on-surface text-body-small",
|
|
39
44
|
"rounded-extra-small px-2 py-1 max-w-[224px] select-none",
|
|
40
|
-
|
|
41
|
-
"data-[starting-style]:opacity-0 data-[starting-style]:scale-95",
|
|
42
|
-
"data-[ending-style]:opacity-0 data-[ending-style]:scale-95"
|
|
45
|
+
...transition
|
|
43
46
|
],
|
|
44
47
|
arrow: ["text-inverse-surface"]
|
|
45
48
|
}
|
|
46
49
|
});
|
|
50
|
+
var richTooltipTv = tv({
|
|
51
|
+
slots: {
|
|
52
|
+
popup: [
|
|
53
|
+
"bg-surface-container text-on-surface shadow-level2",
|
|
54
|
+
"rounded-medium px-4 py-3 max-w-[320px] flex flex-col gap-1",
|
|
55
|
+
"outline-none",
|
|
56
|
+
...transition
|
|
57
|
+
],
|
|
58
|
+
arrow: ["text-surface-container"],
|
|
59
|
+
subhead: ["text-title-small text-on-surface m-0"],
|
|
60
|
+
supportingText: ["text-body-medium text-on-surface-variant m-0"],
|
|
61
|
+
// M3 places rich-tooltip actions at the bottom-left (leading), not trailing
|
|
62
|
+
// like a dialog. -ml-2 pulls the text button so its label optically aligns
|
|
63
|
+
// with the content's left edge.
|
|
64
|
+
actions: ["flex flex-wrap items-center gap-2 mt-1 -ml-2"]
|
|
65
|
+
}
|
|
66
|
+
});
|
|
47
67
|
var t = tooltipTv();
|
|
48
68
|
var Tooltip = createTooltip({ popup: t.popup(), arrow: t.arrow() });
|
|
69
|
+
var r = richTooltipTv();
|
|
70
|
+
var RichTooltip = createRichTooltip({
|
|
71
|
+
popup: r.popup(),
|
|
72
|
+
arrow: r.arrow(),
|
|
73
|
+
subhead: r.subhead(),
|
|
74
|
+
supportingText: r.supportingText(),
|
|
75
|
+
actions: r.actions()
|
|
76
|
+
});
|
|
49
77
|
|
|
50
|
-
export { Tooltip, tooltipTv };
|
|
78
|
+
export { RichTooltip, Tooltip, richTooltipTv, tooltipTv };
|
|
51
79
|
//# sourceMappingURL=tooltip.js.map
|
|
52
80
|
//# sourceMappingURL=tooltip.js.map
|
package/dist/tooltip.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/tv.ts","../src/tooltip.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;;;
|
|
1
|
+
{"version":3,"sources":["../src/tv.ts","../src/tooltip.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;;;AC3BH,IAAM,UAAA,GAAa;AAAA,EACjB,4FAAA;AAAA,EACA,gEAAA;AAAA,EACA;AACF,CAAA;AAEO,IAAM,YAAY,EAAA,CAAG;AAAA,EAC1B,KAAA,EAAO;AAAA,IACL,KAAA,EAAO;AAAA,MACL,4DAAA;AAAA,MACA,yDAAA;AAAA,MACA,GAAG;AAAA,KACL;AAAA,IACA,KAAA,EAAO,CAAC,sBAAsB;AAAA;AAElC,CAAC;AAEM,IAAM,gBAAgB,EAAA,CAAG;AAAA,EAC9B,KAAA,EAAO;AAAA,IACL,KAAA,EAAO;AAAA,MACL,oDAAA;AAAA,MACA,4DAAA;AAAA,MACA,cAAA;AAAA,MACA,GAAG;AAAA,KACL;AAAA,IACA,KAAA,EAAO,CAAC,wBAAwB,CAAA;AAAA,IAChC,OAAA,EAAS,CAAC,sCAAsC,CAAA;AAAA,IAChD,cAAA,EAAgB,CAAC,8CAA8C,CAAA;AAAA;AAAA;AAAA;AAAA,IAI/D,OAAA,EAAS,CAAC,8CAA8C;AAAA;AAE5D,CAAC;AAED,IAAM,IAAI,SAAA,EAAU;AACb,IAAM,OAAA,GAAU,aAAA,CAAc,EAAE,KAAA,EAAO,CAAA,CAAE,KAAA,EAAM,EAAG,KAAA,EAAO,CAAA,CAAE,KAAA,EAAM,EAAG;AAE3E,IAAM,IAAI,aAAA,EAAc;AACjB,IAAM,cAAc,iBAAA,CAAkB;AAAA,EAC3C,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,EACf,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,EACf,OAAA,EAAS,EAAE,OAAA,EAAQ;AAAA,EACnB,cAAA,EAAgB,EAAE,cAAA,EAAe;AAAA,EACjC,OAAA,EAAS,EAAE,OAAA;AACb,CAAC","file":"tooltip.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 * tooltip.ts — Tailwind classes for the M3 Tooltip (plain + rich).\n *\n * Plain (`Tooltip`, Base UI Tooltip): inverse-surface background, body-small\n * text, extra-small corners, with a fade + small-move transition driven by Base\n * UI's data-[starting-style] / data-[ending-style] attributes.\n *\n * Rich (`RichTooltip`, Base UI Popover): surface-container surface (level2\n * elevation, 12dp corner, 320dp max) holding an optional title-small subhead,\n * body-medium supporting text, and a leading-aligned action row at the bottom\n * (M3 places rich-tooltip actions bottom-left). Built on Popover so its buttons\n * are reachable by keyboard and touch.\n */\nimport { createTooltip, createRichTooltip } from '@m3-baseui/core';\nimport { tv } from './tv';\n\nconst transition = [\n 'origin-[var(--transform-origin)] transition-[opacity,transform] duration-150 ease-standard',\n 'data-[starting-style]:opacity-0 data-[starting-style]:scale-95',\n 'data-[ending-style]:opacity-0 data-[ending-style]:scale-95',\n];\n\nexport const tooltipTv = tv({\n slots: {\n popup: [\n 'bg-inverse-surface text-inverse-on-surface text-body-small',\n 'rounded-extra-small px-2 py-1 max-w-[224px] select-none',\n ...transition,\n ],\n arrow: ['text-inverse-surface'],\n },\n});\n\nexport const richTooltipTv = tv({\n slots: {\n popup: [\n 'bg-surface-container text-on-surface shadow-level2',\n 'rounded-medium px-4 py-3 max-w-[320px] flex flex-col gap-1',\n 'outline-none',\n ...transition,\n ],\n arrow: ['text-surface-container'],\n subhead: ['text-title-small text-on-surface m-0'],\n supportingText: ['text-body-medium text-on-surface-variant m-0'],\n // M3 places rich-tooltip actions at the bottom-left (leading), not trailing\n // like a dialog. -ml-2 pulls the text button so its label optically aligns\n // with the content's left edge.\n actions: ['flex flex-wrap items-center gap-2 mt-1 -ml-2'],\n },\n});\n\nconst t = tooltipTv();\nexport const Tooltip = createTooltip({ popup: t.popup(), arrow: t.arrow() });\n\nconst r = richTooltipTv();\nexport const RichTooltip = createRichTooltip({\n popup: r.popup(),\n arrow: r.arrow(),\n subhead: r.subhead(),\n supportingText: r.supportingText(),\n actions: r.actions(),\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.4.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",
|