@m3-baseui/react-tailwind 1.2.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/checkbox.js +5 -0
- package/dist/checkbox.js.map +1 -1
- package/dist/chip.d.ts +31 -0
- package/dist/chip.js +29 -5
- package/dist/chip.js.map +1 -1
- package/dist/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 +184 -31
- 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/radio.js +8 -3
- package/dist/radio.js.map +1 -1
- package/dist/search.d.ts +5 -5
- package/dist/segmented-button.d.ts +5 -5
- package/dist/slider.d.ts +33 -6
- package/dist/slider.js +16 -3
- package/dist/slider.js.map +1 -1
- package/dist/snackbar.js +6 -1
- package/dist/snackbar.js.map +1 -1
- package/dist/switch.js +4 -1
- package/dist/switch.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/radio.js
CHANGED
|
@@ -30,9 +30,14 @@ var radioTv = tv({
|
|
|
30
30
|
"active:before:opacity-[var(--md-sys-state-pressed)]"
|
|
31
31
|
],
|
|
32
32
|
indicator: [
|
|
33
|
-
"block rounded-full bg-primary pointer-events-none",
|
|
34
|
-
|
|
35
|
-
|
|
33
|
+
"block rounded-full bg-primary pointer-events-none origin-center",
|
|
34
|
+
// M3 inner-circle-grow: the 10dp dot scales from center with
|
|
35
|
+
// emphasized-decelerate over 300ms (token-backed), not width/height from 0.
|
|
36
|
+
// Tailwind v4's `scale-*` sets the standalone `scale` property (not
|
|
37
|
+
// `transform`), so the transition must name `scale` to animate the grow.
|
|
38
|
+
"size-2.5 scale-0 opacity-0",
|
|
39
|
+
"transition-[scale,opacity] ease-emphasized-decelerate duration-[var(--md-sys-motion-duration-medium2)]",
|
|
40
|
+
"data-[checked]:scale-100 data-[checked]:opacity-100",
|
|
36
41
|
"group-data-[error]:bg-error",
|
|
37
42
|
"group-data-[disabled]:bg-on-surface/38"
|
|
38
43
|
]
|
package/dist/radio.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/radio.ts"],"names":[],"mappings":";;;;;AASO,IAAM,UAAU,EAAA,CAAG;AAAA,EACxB,KAAA,EAAO;AAAA,IACL,IAAA,EAAM;AAAA,MACJ,4EAAA;AAAA,MACA,4DAAA;AAAA;AAAA;AAAA,MAGA,2CAAA;AAAA,MACA,8CAAA;AAAA,MACA,2DAAA;AAAA;AAAA,MAEA,qBAAA;AAAA,MACA,uCAAA;AAAA;AAAA,MAEA,kFAAA;AAAA,MACA,+HAAA;AAAA,MACA,4FAAA;AAAA;AAAA,MAEA,sEAAA;AAAA,MACA,sCAAA;AAAA,MACA,oHAAA;AAAA,MACA,qHAAA;AAAA,MACA,kDAAA;AAAA,MACA,0DAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,SAAA,EAAW;AAAA,MACT,
|
|
1
|
+
{"version":3,"sources":["../src/radio.ts"],"names":[],"mappings":";;;;;AASO,IAAM,UAAU,EAAA,CAAG;AAAA,EACxB,KAAA,EAAO;AAAA,IACL,IAAA,EAAM;AAAA,MACJ,4EAAA;AAAA,MACA,4DAAA;AAAA;AAAA;AAAA,MAGA,2CAAA;AAAA,MACA,8CAAA;AAAA,MACA,2DAAA;AAAA;AAAA,MAEA,qBAAA;AAAA,MACA,uCAAA;AAAA;AAAA,MAEA,kFAAA;AAAA,MACA,+HAAA;AAAA,MACA,4FAAA;AAAA;AAAA,MAEA,sEAAA;AAAA,MACA,sCAAA;AAAA,MACA,oHAAA;AAAA,MACA,qHAAA;AAAA,MACA,kDAAA;AAAA,MACA,0DAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,SAAA,EAAW;AAAA,MACT,iEAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAKA,4BAAA;AAAA,MACA,wGAAA;AAAA,MACA,qDAAA;AAAA,MACA,6BAAA;AAAA,MACA;AAAA;AACF;AAEJ,CAAC;AAED,IAAM,IAAI,OAAA,EAAQ;AACX,IAAM,KAAA,GAAQ,WAAA,CAAY,EAAE,IAAA,EAAM,CAAA,CAAE,IAAA,EAAK,EAAG,SAAA,EAAW,CAAA,CAAE,SAAA,EAAU,EAAG;AAEtE,IAAM,UAAA,GAAa,iBAAiB,4BAA4B","file":"radio.js","sourcesContent":["/**\n * radio.ts — tailwind-variants slots for the M3 Radio + RadioGroup.\n *\n * 20dp circle with a 40dp circular state layer; checked shows a 10dp primary dot\n * (the indicator) and recolors the ring. RadioGroup lays radios out in a column.\n */\nimport { createRadio, createRadioGroup } from '@m3-baseui/core';\nimport { tv } from 'tailwind-variants';\n\nexport const radioTv = tv({\n slots: {\n root: [\n 'group relative inline-flex items-center justify-center shrink-0 box-border',\n 'size-5 rounded-full border-2 cursor-pointer bg-transparent',\n // Ring is on-surface-variant; the state layer (text/currentColor) is\n // on-surface unselected, primary when selected (material-web).\n 'border-on-surface-variant text-on-surface',\n 'transition-colors duration-150 ease-standard',\n 'data-[checked]:border-primary data-[checked]:text-primary',\n // M3 pressed state layer inverts: unselected→primary, selected→on-surface\n 'active:text-primary',\n 'data-[checked]:active:text-on-surface',\n // M3 error: error ring + error state layer in every interaction state\n 'data-[error]:border-error data-[error]:text-error data-[error]:active:text-error',\n 'data-[error]:data-[checked]:border-error data-[error]:data-[checked]:text-error data-[error]:data-[checked]:active:text-error',\n 'focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-secondary',\n // M3 disabled: ring (and dot) turn on-surface/38; no state layer.\n 'data-[disabled]:pointer-events-none data-[disabled]:before:opacity-0',\n 'data-[disabled]:border-on-surface/38',\n 'before:content-[\"\"] before:absolute before:left-1/2 before:top-1/2 before:-translate-x-1/2 before:-translate-y-1/2',\n 'before:size-10 before:rounded-full before:bg-current before:opacity-0 before:transition-opacity before:duration-100',\n 'hover:before:opacity-[var(--md-sys-state-hover)]',\n 'focus-visible:before:opacity-[var(--md-sys-state-focus)]',\n 'active:before:opacity-[var(--md-sys-state-pressed)]',\n ],\n indicator: [\n 'block rounded-full bg-primary pointer-events-none origin-center',\n // M3 inner-circle-grow: the 10dp dot scales from center with\n // emphasized-decelerate over 300ms (token-backed), not width/height from 0.\n // Tailwind v4's `scale-*` sets the standalone `scale` property (not\n // `transform`), so the transition must name `scale` to animate the grow.\n 'size-2.5 scale-0 opacity-0',\n 'transition-[scale,opacity] ease-emphasized-decelerate duration-[var(--md-sys-motion-duration-medium2)]',\n 'data-[checked]:scale-100 data-[checked]:opacity-100',\n 'group-data-[error]:bg-error',\n 'group-data-[disabled]:bg-on-surface/38',\n ],\n },\n});\n\nconst r = radioTv();\nexport const Radio = createRadio({ root: r.root(), indicator: r.indicator() });\n\nexport const RadioGroup = createRadioGroup('inline-flex flex-col gap-1');\n"]}
|
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
|
};
|
|
@@ -9,8 +9,8 @@ declare const segmentedButtonTv: tailwind_variants.TVReturnType<{
|
|
|
9
9
|
[key: string]: tailwind_variants.ClassValue | {
|
|
10
10
|
root?: tailwind_variants.ClassValue;
|
|
11
11
|
label?: tailwind_variants.ClassValue;
|
|
12
|
-
check?: tailwind_variants.ClassValue;
|
|
13
12
|
icon?: tailwind_variants.ClassValue;
|
|
13
|
+
check?: tailwind_variants.ClassValue;
|
|
14
14
|
item?: tailwind_variants.ClassValue;
|
|
15
15
|
};
|
|
16
16
|
};
|
|
@@ -19,8 +19,8 @@ declare const segmentedButtonTv: tailwind_variants.TVReturnType<{
|
|
|
19
19
|
[x: string]: tailwind_variants.ClassValue | {
|
|
20
20
|
root?: tailwind_variants.ClassValue;
|
|
21
21
|
label?: tailwind_variants.ClassValue;
|
|
22
|
-
check?: tailwind_variants.ClassValue;
|
|
23
22
|
icon?: tailwind_variants.ClassValue;
|
|
23
|
+
check?: tailwind_variants.ClassValue;
|
|
24
24
|
item?: tailwind_variants.ClassValue;
|
|
25
25
|
};
|
|
26
26
|
};
|
|
@@ -35,8 +35,8 @@ declare const segmentedButtonTv: tailwind_variants.TVReturnType<{
|
|
|
35
35
|
[key: string]: tailwind_variants.ClassValue | {
|
|
36
36
|
root?: tailwind_variants.ClassValue;
|
|
37
37
|
label?: tailwind_variants.ClassValue;
|
|
38
|
-
check?: tailwind_variants.ClassValue;
|
|
39
38
|
icon?: tailwind_variants.ClassValue;
|
|
39
|
+
check?: tailwind_variants.ClassValue;
|
|
40
40
|
item?: tailwind_variants.ClassValue;
|
|
41
41
|
};
|
|
42
42
|
};
|
|
@@ -45,8 +45,8 @@ declare const segmentedButtonTv: tailwind_variants.TVReturnType<{
|
|
|
45
45
|
[key: string]: tailwind_variants.ClassValue | {
|
|
46
46
|
root?: tailwind_variants.ClassValue;
|
|
47
47
|
label?: tailwind_variants.ClassValue;
|
|
48
|
-
check?: tailwind_variants.ClassValue;
|
|
49
48
|
icon?: tailwind_variants.ClassValue;
|
|
49
|
+
check?: tailwind_variants.ClassValue;
|
|
50
50
|
item?: tailwind_variants.ClassValue;
|
|
51
51
|
};
|
|
52
52
|
};
|
|
@@ -67,8 +67,8 @@ declare const segmentedButtonTv: tailwind_variants.TVReturnType<{
|
|
|
67
67
|
[key: string]: tailwind_variants.ClassValue | {
|
|
68
68
|
root?: tailwind_variants.ClassValue;
|
|
69
69
|
label?: tailwind_variants.ClassValue;
|
|
70
|
-
check?: tailwind_variants.ClassValue;
|
|
71
70
|
icon?: tailwind_variants.ClassValue;
|
|
71
|
+
check?: tailwind_variants.ClassValue;
|
|
72
72
|
item?: tailwind_variants.ClassValue;
|
|
73
73
|
};
|
|
74
74
|
};
|
package/dist/slider.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import * as _m3_baseui_core from '@m3-baseui/core';
|
|
1
2
|
import * as react from 'react';
|
|
2
3
|
import * as _base_ui_react from '@base-ui/react';
|
|
3
4
|
import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config.js';
|
|
@@ -12,6 +13,9 @@ declare const sliderTv: tailwind_variants.TVReturnType<{
|
|
|
12
13
|
indicator?: tailwind_variants.ClassValue;
|
|
13
14
|
thumb?: tailwind_variants.ClassValue;
|
|
14
15
|
control?: tailwind_variants.ClassValue;
|
|
16
|
+
tickList?: tailwind_variants.ClassValue;
|
|
17
|
+
tick?: tailwind_variants.ClassValue;
|
|
18
|
+
valueLabel?: tailwind_variants.ClassValue;
|
|
15
19
|
};
|
|
16
20
|
};
|
|
17
21
|
} | {
|
|
@@ -23,6 +27,9 @@ declare const sliderTv: tailwind_variants.TVReturnType<{
|
|
|
23
27
|
indicator?: tailwind_variants.ClassValue;
|
|
24
28
|
thumb?: tailwind_variants.ClassValue;
|
|
25
29
|
control?: tailwind_variants.ClassValue;
|
|
30
|
+
tickList?: tailwind_variants.ClassValue;
|
|
31
|
+
tick?: tailwind_variants.ClassValue;
|
|
32
|
+
valueLabel?: tailwind_variants.ClassValue;
|
|
26
33
|
};
|
|
27
34
|
};
|
|
28
35
|
} | {}, {
|
|
@@ -32,6 +39,9 @@ declare const sliderTv: tailwind_variants.TVReturnType<{
|
|
|
32
39
|
indicator: string[];
|
|
33
40
|
thumb: string[];
|
|
34
41
|
value: string;
|
|
42
|
+
tickList: string;
|
|
43
|
+
tick: string[];
|
|
44
|
+
valueLabel: string[];
|
|
35
45
|
}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
|
|
36
46
|
[key: string]: {
|
|
37
47
|
[key: string]: tailwind_variants.ClassValue | {
|
|
@@ -41,6 +51,9 @@ declare const sliderTv: tailwind_variants.TVReturnType<{
|
|
|
41
51
|
indicator?: tailwind_variants.ClassValue;
|
|
42
52
|
thumb?: tailwind_variants.ClassValue;
|
|
43
53
|
control?: tailwind_variants.ClassValue;
|
|
54
|
+
tickList?: tailwind_variants.ClassValue;
|
|
55
|
+
tick?: tailwind_variants.ClassValue;
|
|
56
|
+
valueLabel?: tailwind_variants.ClassValue;
|
|
44
57
|
};
|
|
45
58
|
};
|
|
46
59
|
} | {}>, {
|
|
@@ -52,6 +65,9 @@ declare const sliderTv: tailwind_variants.TVReturnType<{
|
|
|
52
65
|
indicator?: tailwind_variants.ClassValue;
|
|
53
66
|
thumb?: tailwind_variants.ClassValue;
|
|
54
67
|
control?: tailwind_variants.ClassValue;
|
|
68
|
+
tickList?: tailwind_variants.ClassValue;
|
|
69
|
+
tick?: tailwind_variants.ClassValue;
|
|
70
|
+
valueLabel?: tailwind_variants.ClassValue;
|
|
55
71
|
};
|
|
56
72
|
};
|
|
57
73
|
} | {}, {
|
|
@@ -61,6 +77,9 @@ declare const sliderTv: tailwind_variants.TVReturnType<{
|
|
|
61
77
|
indicator: string[];
|
|
62
78
|
thumb: string[];
|
|
63
79
|
value: string;
|
|
80
|
+
tickList: string;
|
|
81
|
+
tick: string[];
|
|
82
|
+
valueLabel: string[];
|
|
64
83
|
}, tailwind_variants.TVReturnType<unknown, {
|
|
65
84
|
root: string;
|
|
66
85
|
control: string;
|
|
@@ -68,6 +87,9 @@ declare const sliderTv: tailwind_variants.TVReturnType<{
|
|
|
68
87
|
indicator: string[];
|
|
69
88
|
thumb: string[];
|
|
70
89
|
value: string;
|
|
90
|
+
tickList: string;
|
|
91
|
+
tick: string[];
|
|
92
|
+
valueLabel: string[];
|
|
71
93
|
}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
|
|
72
94
|
[key: string]: {
|
|
73
95
|
[key: string]: tailwind_variants.ClassValue | {
|
|
@@ -77,18 +99,23 @@ declare const sliderTv: tailwind_variants.TVReturnType<{
|
|
|
77
99
|
indicator?: tailwind_variants.ClassValue;
|
|
78
100
|
thumb?: tailwind_variants.ClassValue;
|
|
79
101
|
control?: tailwind_variants.ClassValue;
|
|
102
|
+
tickList?: tailwind_variants.ClassValue;
|
|
103
|
+
tick?: tailwind_variants.ClassValue;
|
|
104
|
+
valueLabel?: tailwind_variants.ClassValue;
|
|
80
105
|
};
|
|
81
106
|
};
|
|
82
107
|
} | {}>, unknown, unknown, undefined>>;
|
|
83
108
|
declare const Slider: {
|
|
84
109
|
Root: react.ForwardRefExoticComponent<Omit<_base_ui_react.SliderRoot.Props<number | readonly number[]> & {
|
|
85
110
|
ref?: React.Ref<HTMLDivElement> | undefined;
|
|
86
|
-
}, "ref"> & react.RefAttributes<
|
|
87
|
-
Control: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.SliderControlProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<
|
|
88
|
-
Track: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.SliderTrackProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<
|
|
89
|
-
Indicator: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.SliderIndicatorProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<
|
|
90
|
-
Thumb: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.SliderThumbProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<
|
|
91
|
-
Value: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.SliderValueProps, "ref"> & react.RefAttributes<HTMLOutputElement>, "ref"> & react.RefAttributes<
|
|
111
|
+
}, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
112
|
+
Control: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.SliderControlProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
113
|
+
Track: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.SliderTrackProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
114
|
+
Indicator: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.SliderIndicatorProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
115
|
+
Thumb: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.SliderThumbProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
116
|
+
Value: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.SliderValueProps, "ref"> & react.RefAttributes<HTMLOutputElement>, "ref"> & react.RefAttributes<HTMLOutputElement>>;
|
|
117
|
+
TickList: react.ForwardRefExoticComponent<_m3_baseui_core.SliderTickListProps & react.RefAttributes<HTMLDivElement>>;
|
|
118
|
+
ValueLabel: react.ForwardRefExoticComponent<_m3_baseui_core.SliderValueLabelProps & react.RefAttributes<HTMLSpanElement>>;
|
|
92
119
|
};
|
|
93
120
|
|
|
94
121
|
export { Slider, sliderTv };
|
package/dist/slider.js
CHANGED
|
@@ -45,7 +45,7 @@ var sliderTv = tv({
|
|
|
45
45
|
"group-data-[disabled]:bg-on-surface/[0.38]"
|
|
46
46
|
],
|
|
47
47
|
thumb: [
|
|
48
|
-
"relative size-5 rounded-full bg-primary outline-none",
|
|
48
|
+
"group/thumb relative size-5 rounded-full bg-primary outline-none",
|
|
49
49
|
'before:content-[""] before:absolute before:left-1/2 before:top-1/2 before:-translate-x-1/2 before:-translate-y-1/2',
|
|
50
50
|
"before:size-10 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity before:duration-100",
|
|
51
51
|
"hover:before:opacity-[var(--md-sys-state-hover)]",
|
|
@@ -53,7 +53,17 @@ var sliderTv = tv({
|
|
|
53
53
|
"data-[dragging]:before:opacity-[var(--md-sys-state-dragged)]",
|
|
54
54
|
"group-data-[disabled]:bg-on-surface/[0.38]"
|
|
55
55
|
],
|
|
56
|
-
value: "text-label-large text-on-surface-variant tabular-nums"
|
|
56
|
+
value: "text-label-large text-on-surface-variant tabular-nums",
|
|
57
|
+
tickList: "pointer-events-none absolute inset-0",
|
|
58
|
+
tick: [
|
|
59
|
+
"absolute size-1 -translate-x-1/2 -translate-y-1/2 rounded-full bg-on-surface-variant",
|
|
60
|
+
"data-[active]:bg-on-primary/[0.38]"
|
|
61
|
+
],
|
|
62
|
+
valueLabel: [
|
|
63
|
+
"pointer-events-none absolute bottom-full left-1/2 mb-2 -translate-x-1/2 whitespace-nowrap rounded px-2 py-0.5",
|
|
64
|
+
"bg-primary text-label-large text-on-primary tabular-nums opacity-0",
|
|
65
|
+
"data-[visible]:opacity-100"
|
|
66
|
+
]
|
|
57
67
|
}
|
|
58
68
|
});
|
|
59
69
|
var s = sliderTv();
|
|
@@ -63,7 +73,10 @@ var Slider = createSlider({
|
|
|
63
73
|
track: s.track(),
|
|
64
74
|
indicator: s.indicator(),
|
|
65
75
|
thumb: s.thumb(),
|
|
66
|
-
value: s.value()
|
|
76
|
+
value: s.value(),
|
|
77
|
+
tickList: s.tickList(),
|
|
78
|
+
tick: s.tick(),
|
|
79
|
+
valueLabel: s.valueLabel()
|
|
67
80
|
});
|
|
68
81
|
|
|
69
82
|
export { Slider, sliderTv };
|