@m3-baseui/react-tailwind 1.0.4 → 1.1.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/bottom-app-bar.d.ts +62 -0
- package/dist/bottom-app-bar.js +51 -0
- package/dist/bottom-app-bar.js.map +1 -0
- package/dist/bottom-sheet.d.ts +101 -0
- package/dist/bottom-sheet.js +70 -0
- package/dist/bottom-sheet.js.map +1 -0
- package/dist/fab-menu.d.ts +132 -0
- package/dist/fab-menu.js +116 -0
- package/dist/fab-menu.js.map +1 -0
- package/dist/index.d.ts +7 -1
- package/dist/index.js +229 -8
- package/dist/index.js.map +1 -1
- package/dist/menu.d.ts +5 -5
- package/dist/navigation-rail.d.ts +101 -0
- package/dist/navigation-rail.js +92 -0
- package/dist/navigation-rail.js.map +1 -0
- package/dist/segmented-button.d.ts +5 -5
- package/dist/select.d.ts +5 -5
- package/dist/side-sheet.d.ts +112 -0
- package/dist/side-sheet.js +90 -0
- package/dist/side-sheet.js.map +1 -0
- package/dist/top-app-bar.d.ts +147 -0
- package/dist/top-app-bar.js +68 -0
- package/dist/top-app-bar.js.map +1 -0
- package/package.json +31 -1
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import * as _base_ui_react from '@base-ui/react';
|
|
3
|
+
import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config.js';
|
|
4
|
+
import * as tailwind_variants from 'tailwind-variants';
|
|
5
|
+
|
|
6
|
+
declare const navigationRailTv: tailwind_variants.TVReturnType<{
|
|
7
|
+
[key: string]: {
|
|
8
|
+
[key: string]: tailwind_variants.ClassValue | {
|
|
9
|
+
root?: tailwind_variants.ClassValue;
|
|
10
|
+
header?: tailwind_variants.ClassValue;
|
|
11
|
+
label?: tailwind_variants.ClassValue;
|
|
12
|
+
icon?: tailwind_variants.ClassValue;
|
|
13
|
+
indicator?: tailwind_variants.ClassValue;
|
|
14
|
+
item?: tailwind_variants.ClassValue;
|
|
15
|
+
iconWrap?: tailwind_variants.ClassValue;
|
|
16
|
+
};
|
|
17
|
+
};
|
|
18
|
+
} | {
|
|
19
|
+
[x: string]: {
|
|
20
|
+
[x: string]: tailwind_variants.ClassValue | {
|
|
21
|
+
root?: tailwind_variants.ClassValue;
|
|
22
|
+
header?: tailwind_variants.ClassValue;
|
|
23
|
+
label?: tailwind_variants.ClassValue;
|
|
24
|
+
icon?: tailwind_variants.ClassValue;
|
|
25
|
+
indicator?: tailwind_variants.ClassValue;
|
|
26
|
+
item?: tailwind_variants.ClassValue;
|
|
27
|
+
iconWrap?: tailwind_variants.ClassValue;
|
|
28
|
+
};
|
|
29
|
+
};
|
|
30
|
+
} | {}, {
|
|
31
|
+
root: string;
|
|
32
|
+
header: string;
|
|
33
|
+
item: string[];
|
|
34
|
+
iconWrap: string;
|
|
35
|
+
indicator: string[];
|
|
36
|
+
icon: string[];
|
|
37
|
+
label: string[];
|
|
38
|
+
}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
|
|
39
|
+
[key: string]: {
|
|
40
|
+
[key: string]: tailwind_variants.ClassValue | {
|
|
41
|
+
root?: tailwind_variants.ClassValue;
|
|
42
|
+
header?: tailwind_variants.ClassValue;
|
|
43
|
+
label?: tailwind_variants.ClassValue;
|
|
44
|
+
icon?: tailwind_variants.ClassValue;
|
|
45
|
+
indicator?: tailwind_variants.ClassValue;
|
|
46
|
+
item?: tailwind_variants.ClassValue;
|
|
47
|
+
iconWrap?: tailwind_variants.ClassValue;
|
|
48
|
+
};
|
|
49
|
+
};
|
|
50
|
+
} | {}>, {
|
|
51
|
+
[key: string]: {
|
|
52
|
+
[key: string]: tailwind_variants.ClassValue | {
|
|
53
|
+
root?: tailwind_variants.ClassValue;
|
|
54
|
+
header?: tailwind_variants.ClassValue;
|
|
55
|
+
label?: tailwind_variants.ClassValue;
|
|
56
|
+
icon?: tailwind_variants.ClassValue;
|
|
57
|
+
indicator?: tailwind_variants.ClassValue;
|
|
58
|
+
item?: tailwind_variants.ClassValue;
|
|
59
|
+
iconWrap?: tailwind_variants.ClassValue;
|
|
60
|
+
};
|
|
61
|
+
};
|
|
62
|
+
} | {}, {
|
|
63
|
+
root: string;
|
|
64
|
+
header: string;
|
|
65
|
+
item: string[];
|
|
66
|
+
iconWrap: string;
|
|
67
|
+
indicator: string[];
|
|
68
|
+
icon: string[];
|
|
69
|
+
label: string[];
|
|
70
|
+
}, tailwind_variants.TVReturnType<unknown, {
|
|
71
|
+
root: string;
|
|
72
|
+
header: string;
|
|
73
|
+
item: string[];
|
|
74
|
+
iconWrap: string;
|
|
75
|
+
indicator: string[];
|
|
76
|
+
icon: string[];
|
|
77
|
+
label: string[];
|
|
78
|
+
}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
|
|
79
|
+
[key: string]: {
|
|
80
|
+
[key: string]: tailwind_variants.ClassValue | {
|
|
81
|
+
root?: tailwind_variants.ClassValue;
|
|
82
|
+
header?: tailwind_variants.ClassValue;
|
|
83
|
+
label?: tailwind_variants.ClassValue;
|
|
84
|
+
icon?: tailwind_variants.ClassValue;
|
|
85
|
+
indicator?: tailwind_variants.ClassValue;
|
|
86
|
+
item?: tailwind_variants.ClassValue;
|
|
87
|
+
iconWrap?: tailwind_variants.ClassValue;
|
|
88
|
+
};
|
|
89
|
+
};
|
|
90
|
+
} | {}>, unknown, unknown, undefined>>;
|
|
91
|
+
declare const NavigationRail: {
|
|
92
|
+
Root: react.ForwardRefExoticComponent<Omit<_base_ui_react.ToggleGroup.Props<string> & react.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
93
|
+
header?: React.ReactNode;
|
|
94
|
+
} & react.RefAttributes<HTMLDivElement>>;
|
|
95
|
+
Item: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.Toggle.Props<string> & react.RefAttributes<HTMLButtonElement>, "ref">, "children"> & {
|
|
96
|
+
icon?: React.ReactNode;
|
|
97
|
+
children?: React.ReactNode;
|
|
98
|
+
} & react.RefAttributes<HTMLButtonElement>>;
|
|
99
|
+
};
|
|
100
|
+
|
|
101
|
+
export { NavigationRail, navigationRailTv };
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { createNavigationRail } from '@m3-baseui/core';
|
|
3
|
+
import { tv as tv$1 } from 'tailwind-variants';
|
|
4
|
+
|
|
5
|
+
// src/navigation-rail.ts
|
|
6
|
+
var TYPESCALE = [
|
|
7
|
+
"display-large",
|
|
8
|
+
"display-medium",
|
|
9
|
+
"display-small",
|
|
10
|
+
"headline-large",
|
|
11
|
+
"headline-medium",
|
|
12
|
+
"headline-small",
|
|
13
|
+
"title-large",
|
|
14
|
+
"title-medium",
|
|
15
|
+
"title-small",
|
|
16
|
+
"body-large",
|
|
17
|
+
"body-medium",
|
|
18
|
+
"body-small",
|
|
19
|
+
"label-large",
|
|
20
|
+
"label-medium",
|
|
21
|
+
"label-small"
|
|
22
|
+
];
|
|
23
|
+
var tv = (options, config) => tv$1(options, {
|
|
24
|
+
...config,
|
|
25
|
+
twMergeConfig: {
|
|
26
|
+
extend: {
|
|
27
|
+
classGroups: {
|
|
28
|
+
"font-size": [{ text: [...TYPESCALE] }]
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
});
|
|
33
|
+
|
|
34
|
+
// src/navigation-rail.ts
|
|
35
|
+
var navigationRailTv = tv({
|
|
36
|
+
slots: {
|
|
37
|
+
root: "flex flex-col items-center gap-3 h-full w-20 py-5 bg-surface",
|
|
38
|
+
header: "flex flex-col items-center gap-3 mb-1",
|
|
39
|
+
item: [
|
|
40
|
+
"group relative flex flex-col items-center justify-center gap-1 px-1 py-1",
|
|
41
|
+
"bg-transparent border-0 cursor-pointer select-none outline-none",
|
|
42
|
+
// M3 disabled is per-token (icon + label dimmed below), not a blanket fade.
|
|
43
|
+
"data-[disabled]:pointer-events-none"
|
|
44
|
+
],
|
|
45
|
+
iconWrap: "relative flex items-center justify-center w-14 h-8",
|
|
46
|
+
indicator: [
|
|
47
|
+
"absolute inset-0 rounded-full bg-transparent overflow-hidden",
|
|
48
|
+
"transition-colors duration-150 ease-standard",
|
|
49
|
+
"group-data-[pressed]:bg-secondary-container",
|
|
50
|
+
"before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100",
|
|
51
|
+
"group-hover:before:opacity-[var(--md-sys-state-hover)]",
|
|
52
|
+
"group-focus-visible:before:opacity-[var(--md-sys-state-focus)]",
|
|
53
|
+
"group-active:before:opacity-[var(--md-sys-state-pressed)]",
|
|
54
|
+
// No state layer on a disabled destination.
|
|
55
|
+
"group-data-[disabled]:before:opacity-0"
|
|
56
|
+
],
|
|
57
|
+
icon: [
|
|
58
|
+
"relative flex items-center justify-center text-on-surface-variant",
|
|
59
|
+
"transition-colors duration-150 ease-standard",
|
|
60
|
+
// Raw <svg> icons render at 24dp (Material Symbols set their own size).
|
|
61
|
+
"[&_svg]:size-6",
|
|
62
|
+
"group-data-[pressed]:text-on-secondary-container",
|
|
63
|
+
// M3 disabled: icon dims to on-surface/0.38. The item is the only `.group`,
|
|
64
|
+
// so the disabled+active override tests both attributes on that single
|
|
65
|
+
// element (see NavigationBar for the rationale).
|
|
66
|
+
"group-data-[disabled]:text-on-surface/[0.38]",
|
|
67
|
+
"group-[&[data-disabled][data-pressed]]:text-on-surface/[0.38]"
|
|
68
|
+
],
|
|
69
|
+
label: [
|
|
70
|
+
"text-label-medium text-on-surface-variant",
|
|
71
|
+
"transition-colors duration-150 ease-standard",
|
|
72
|
+
"group-data-[pressed]:text-on-surface group-data-[pressed]:font-bold",
|
|
73
|
+
// M3 disabled: label dims to on-surface/0.38 (same-element override).
|
|
74
|
+
"group-data-[disabled]:text-on-surface/[0.38]",
|
|
75
|
+
"group-[&[data-disabled][data-pressed]]:text-on-surface/[0.38]"
|
|
76
|
+
]
|
|
77
|
+
}
|
|
78
|
+
});
|
|
79
|
+
var s = navigationRailTv();
|
|
80
|
+
var NavigationRail = createNavigationRail({
|
|
81
|
+
root: s.root(),
|
|
82
|
+
header: s.header(),
|
|
83
|
+
item: s.item(),
|
|
84
|
+
iconWrap: s.iconWrap(),
|
|
85
|
+
indicator: s.indicator(),
|
|
86
|
+
icon: s.icon(),
|
|
87
|
+
label: s.label()
|
|
88
|
+
});
|
|
89
|
+
|
|
90
|
+
export { NavigationRail, navigationRailTv };
|
|
91
|
+
//# sourceMappingURL=navigation-rail.js.map
|
|
92
|
+
//# sourceMappingURL=navigation-rail.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/tv.ts","../src/navigation-rail.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;;;AC/BI,IAAM,mBAAmB,EAAA,CAAG;AAAA,EACjC,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,8DAAA;AAAA,IACN,MAAA,EAAQ,uCAAA;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,0EAAA;AAAA,MACA,iEAAA;AAAA;AAAA,MAEA;AAAA,KACF;AAAA,IACA,QAAA,EAAU,oDAAA;AAAA,IACV,SAAA,EAAW;AAAA,MACT,8DAAA;AAAA,MACA,8CAAA;AAAA,MACA,6CAAA;AAAA,MACA,4IAAA;AAAA,MACA,wDAAA;AAAA,MACA,gEAAA;AAAA,MACA,2DAAA;AAAA;AAAA,MAEA;AAAA,KACF;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,mEAAA;AAAA,MACA,8CAAA;AAAA;AAAA,MAEA,gBAAA;AAAA,MACA,kDAAA;AAAA;AAAA;AAAA;AAAA,MAIA,8CAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO;AAAA,MACL,2CAAA;AAAA,MACA,8CAAA;AAAA,MACA,qEAAA;AAAA;AAAA,MAEA,8CAAA;AAAA,MACA;AAAA;AACF;AAEJ,CAAC;AAED,IAAM,IAAI,gBAAA,EAAiB;AACpB,IAAM,iBAAiB,oBAAA,CAAqB;AAAA,EACjD,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,MAAA,EAAQ,EAAE,MAAA,EAAO;AAAA,EACjB,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,QAAA,EAAU,EAAE,QAAA,EAAS;AAAA,EACrB,SAAA,EAAW,EAAE,SAAA,EAAU;AAAA,EACvB,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,KAAA,EAAO,EAAE,KAAA;AACX,CAAC","file":"navigation-rail.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 * navigation-rail.ts — tailwind-variants slots for the M3 NavigationRail.\n *\n * 80dp vertical rail on `surface`. The selected destination surfaces\n * `data-pressed` (Base UI Toggle); the pill, icon and label colors key off it\n * via the `group` on each item. State layer is the pill `::before`; the pointer\n * ripple is added by the factory. `Root` renders an optional leading `header`\n * (menu button / FAB). Same DOM + `data-*` as the VE build (mirrors NavigationBar).\n */\nimport { createNavigationRail } from '@m3-baseui/core';\nimport { tv } from './tv';\n\nexport const navigationRailTv = tv({\n slots: {\n root: 'flex flex-col items-center gap-3 h-full w-20 py-5 bg-surface',\n header: 'flex flex-col items-center gap-3 mb-1',\n item: [\n 'group relative flex flex-col items-center justify-center gap-1 px-1 py-1',\n 'bg-transparent border-0 cursor-pointer select-none outline-none',\n // M3 disabled is per-token (icon + label dimmed below), not a blanket fade.\n 'data-[disabled]:pointer-events-none',\n ],\n iconWrap: 'relative flex items-center justify-center w-14 h-8',\n indicator: [\n 'absolute inset-0 rounded-full bg-transparent overflow-hidden',\n 'transition-colors duration-150 ease-standard',\n 'group-data-[pressed]:bg-secondary-container',\n 'before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100',\n 'group-hover:before:opacity-[var(--md-sys-state-hover)]',\n 'group-focus-visible:before:opacity-[var(--md-sys-state-focus)]',\n 'group-active:before:opacity-[var(--md-sys-state-pressed)]',\n // No state layer on a disabled destination.\n 'group-data-[disabled]:before:opacity-0',\n ],\n icon: [\n 'relative flex items-center justify-center text-on-surface-variant',\n 'transition-colors duration-150 ease-standard',\n // Raw <svg> icons render at 24dp (Material Symbols set their own size).\n '[&_svg]:size-6',\n 'group-data-[pressed]:text-on-secondary-container',\n // M3 disabled: icon dims to on-surface/0.38. The item is the only `.group`,\n // so the disabled+active override tests both attributes on that single\n // element (see NavigationBar for the rationale).\n 'group-data-[disabled]:text-on-surface/[0.38]',\n 'group-[&[data-disabled][data-pressed]]:text-on-surface/[0.38]',\n ],\n label: [\n 'text-label-medium text-on-surface-variant',\n 'transition-colors duration-150 ease-standard',\n 'group-data-[pressed]:text-on-surface group-data-[pressed]:font-bold',\n // M3 disabled: label dims to on-surface/0.38 (same-element override).\n 'group-data-[disabled]:text-on-surface/[0.38]',\n 'group-[&[data-disabled][data-pressed]]:text-on-surface/[0.38]',\n ],\n },\n});\n\nconst s = navigationRailTv();\nexport const NavigationRail = createNavigationRail({\n root: s.root(),\n header: s.header(),\n item: s.item(),\n iconWrap: s.iconWrap(),\n indicator: s.indicator(),\n icon: s.icon(),\n label: s.label(),\n});\n"]}
|
|
@@ -8,8 +8,8 @@ declare const segmentedButtonTv: tailwind_variants.TVReturnType<{
|
|
|
8
8
|
[key: string]: {
|
|
9
9
|
[key: string]: tailwind_variants.ClassValue | {
|
|
10
10
|
root?: tailwind_variants.ClassValue;
|
|
11
|
-
check?: tailwind_variants.ClassValue;
|
|
12
11
|
label?: tailwind_variants.ClassValue;
|
|
12
|
+
check?: tailwind_variants.ClassValue;
|
|
13
13
|
icon?: tailwind_variants.ClassValue;
|
|
14
14
|
item?: tailwind_variants.ClassValue;
|
|
15
15
|
};
|
|
@@ -18,8 +18,8 @@ declare const segmentedButtonTv: tailwind_variants.TVReturnType<{
|
|
|
18
18
|
[x: string]: {
|
|
19
19
|
[x: string]: tailwind_variants.ClassValue | {
|
|
20
20
|
root?: tailwind_variants.ClassValue;
|
|
21
|
-
check?: tailwind_variants.ClassValue;
|
|
22
21
|
label?: tailwind_variants.ClassValue;
|
|
22
|
+
check?: tailwind_variants.ClassValue;
|
|
23
23
|
icon?: tailwind_variants.ClassValue;
|
|
24
24
|
item?: tailwind_variants.ClassValue;
|
|
25
25
|
};
|
|
@@ -34,8 +34,8 @@ declare const segmentedButtonTv: tailwind_variants.TVReturnType<{
|
|
|
34
34
|
[key: string]: {
|
|
35
35
|
[key: string]: tailwind_variants.ClassValue | {
|
|
36
36
|
root?: tailwind_variants.ClassValue;
|
|
37
|
-
check?: tailwind_variants.ClassValue;
|
|
38
37
|
label?: tailwind_variants.ClassValue;
|
|
38
|
+
check?: tailwind_variants.ClassValue;
|
|
39
39
|
icon?: tailwind_variants.ClassValue;
|
|
40
40
|
item?: tailwind_variants.ClassValue;
|
|
41
41
|
};
|
|
@@ -44,8 +44,8 @@ declare const segmentedButtonTv: tailwind_variants.TVReturnType<{
|
|
|
44
44
|
[key: string]: {
|
|
45
45
|
[key: string]: tailwind_variants.ClassValue | {
|
|
46
46
|
root?: tailwind_variants.ClassValue;
|
|
47
|
-
check?: tailwind_variants.ClassValue;
|
|
48
47
|
label?: tailwind_variants.ClassValue;
|
|
48
|
+
check?: tailwind_variants.ClassValue;
|
|
49
49
|
icon?: tailwind_variants.ClassValue;
|
|
50
50
|
item?: tailwind_variants.ClassValue;
|
|
51
51
|
};
|
|
@@ -66,8 +66,8 @@ declare const segmentedButtonTv: tailwind_variants.TVReturnType<{
|
|
|
66
66
|
[key: string]: {
|
|
67
67
|
[key: string]: tailwind_variants.ClassValue | {
|
|
68
68
|
root?: tailwind_variants.ClassValue;
|
|
69
|
-
check?: tailwind_variants.ClassValue;
|
|
70
69
|
label?: tailwind_variants.ClassValue;
|
|
70
|
+
check?: tailwind_variants.ClassValue;
|
|
71
71
|
icon?: tailwind_variants.ClassValue;
|
|
72
72
|
item?: tailwind_variants.ClassValue;
|
|
73
73
|
};
|
package/dist/select.d.ts
CHANGED
|
@@ -9,8 +9,8 @@ declare const selectTv: tailwind_variants.TVReturnType<{
|
|
|
9
9
|
value?: tailwind_variants.ClassValue;
|
|
10
10
|
popup?: tailwind_variants.ClassValue;
|
|
11
11
|
icon?: tailwind_variants.ClassValue;
|
|
12
|
-
itemIndicator?: tailwind_variants.ClassValue;
|
|
13
12
|
item?: tailwind_variants.ClassValue;
|
|
13
|
+
itemIndicator?: tailwind_variants.ClassValue;
|
|
14
14
|
groupLabel?: tailwind_variants.ClassValue;
|
|
15
15
|
trigger?: tailwind_variants.ClassValue;
|
|
16
16
|
scrollUpArrow?: tailwind_variants.ClassValue;
|
|
@@ -23,8 +23,8 @@ declare const selectTv: tailwind_variants.TVReturnType<{
|
|
|
23
23
|
value?: tailwind_variants.ClassValue;
|
|
24
24
|
popup?: tailwind_variants.ClassValue;
|
|
25
25
|
icon?: tailwind_variants.ClassValue;
|
|
26
|
-
itemIndicator?: tailwind_variants.ClassValue;
|
|
27
26
|
item?: tailwind_variants.ClassValue;
|
|
27
|
+
itemIndicator?: tailwind_variants.ClassValue;
|
|
28
28
|
groupLabel?: tailwind_variants.ClassValue;
|
|
29
29
|
trigger?: tailwind_variants.ClassValue;
|
|
30
30
|
scrollUpArrow?: tailwind_variants.ClassValue;
|
|
@@ -47,8 +47,8 @@ declare const selectTv: tailwind_variants.TVReturnType<{
|
|
|
47
47
|
value?: tailwind_variants.ClassValue;
|
|
48
48
|
popup?: tailwind_variants.ClassValue;
|
|
49
49
|
icon?: tailwind_variants.ClassValue;
|
|
50
|
-
itemIndicator?: tailwind_variants.ClassValue;
|
|
51
50
|
item?: tailwind_variants.ClassValue;
|
|
51
|
+
itemIndicator?: tailwind_variants.ClassValue;
|
|
52
52
|
groupLabel?: tailwind_variants.ClassValue;
|
|
53
53
|
trigger?: tailwind_variants.ClassValue;
|
|
54
54
|
scrollUpArrow?: tailwind_variants.ClassValue;
|
|
@@ -61,8 +61,8 @@ declare const selectTv: tailwind_variants.TVReturnType<{
|
|
|
61
61
|
value?: tailwind_variants.ClassValue;
|
|
62
62
|
popup?: tailwind_variants.ClassValue;
|
|
63
63
|
icon?: tailwind_variants.ClassValue;
|
|
64
|
-
itemIndicator?: tailwind_variants.ClassValue;
|
|
65
64
|
item?: tailwind_variants.ClassValue;
|
|
65
|
+
itemIndicator?: tailwind_variants.ClassValue;
|
|
66
66
|
groupLabel?: tailwind_variants.ClassValue;
|
|
67
67
|
trigger?: tailwind_variants.ClassValue;
|
|
68
68
|
scrollUpArrow?: tailwind_variants.ClassValue;
|
|
@@ -95,8 +95,8 @@ declare const selectTv: tailwind_variants.TVReturnType<{
|
|
|
95
95
|
value?: tailwind_variants.ClassValue;
|
|
96
96
|
popup?: tailwind_variants.ClassValue;
|
|
97
97
|
icon?: tailwind_variants.ClassValue;
|
|
98
|
-
itemIndicator?: tailwind_variants.ClassValue;
|
|
99
98
|
item?: tailwind_variants.ClassValue;
|
|
99
|
+
itemIndicator?: tailwind_variants.ClassValue;
|
|
100
100
|
groupLabel?: tailwind_variants.ClassValue;
|
|
101
101
|
trigger?: tailwind_variants.ClassValue;
|
|
102
102
|
scrollUpArrow?: tailwind_variants.ClassValue;
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import * as _base_ui_react from '@base-ui/react';
|
|
3
|
+
import * as _m3_baseui_core from '@m3-baseui/core';
|
|
4
|
+
export { SideSheetSide, SideSheetVariant } from '@m3-baseui/core';
|
|
5
|
+
import * as tailwind_variants from 'tailwind-variants';
|
|
6
|
+
import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config.js';
|
|
7
|
+
|
|
8
|
+
declare const sideSheetTv: tailwind_variants.TVReturnType<{
|
|
9
|
+
variant: {
|
|
10
|
+
modal: {
|
|
11
|
+
popup: string[];
|
|
12
|
+
};
|
|
13
|
+
standard: {
|
|
14
|
+
popup: string;
|
|
15
|
+
};
|
|
16
|
+
};
|
|
17
|
+
}, {
|
|
18
|
+
backdrop: string[];
|
|
19
|
+
viewport: string;
|
|
20
|
+
popup: string[];
|
|
21
|
+
header: string;
|
|
22
|
+
title: string[];
|
|
23
|
+
description: string[];
|
|
24
|
+
close: string;
|
|
25
|
+
}, undefined, tailwind_variants_dist_config_js.TVConfig<{
|
|
26
|
+
variant: {
|
|
27
|
+
modal: {
|
|
28
|
+
popup: string[];
|
|
29
|
+
};
|
|
30
|
+
standard: {
|
|
31
|
+
popup: string;
|
|
32
|
+
};
|
|
33
|
+
};
|
|
34
|
+
}, {
|
|
35
|
+
variant: {
|
|
36
|
+
modal: {
|
|
37
|
+
popup: string[];
|
|
38
|
+
};
|
|
39
|
+
standard: {
|
|
40
|
+
popup: string;
|
|
41
|
+
};
|
|
42
|
+
};
|
|
43
|
+
}>, {
|
|
44
|
+
variant: {
|
|
45
|
+
modal: {
|
|
46
|
+
popup: string[];
|
|
47
|
+
};
|
|
48
|
+
standard: {
|
|
49
|
+
popup: string;
|
|
50
|
+
};
|
|
51
|
+
};
|
|
52
|
+
}, {
|
|
53
|
+
backdrop: string[];
|
|
54
|
+
viewport: string;
|
|
55
|
+
popup: string[];
|
|
56
|
+
header: string;
|
|
57
|
+
title: string[];
|
|
58
|
+
description: string[];
|
|
59
|
+
close: string;
|
|
60
|
+
}, tailwind_variants.TVReturnType<{
|
|
61
|
+
variant: {
|
|
62
|
+
modal: {
|
|
63
|
+
popup: string[];
|
|
64
|
+
};
|
|
65
|
+
standard: {
|
|
66
|
+
popup: string;
|
|
67
|
+
};
|
|
68
|
+
};
|
|
69
|
+
}, {
|
|
70
|
+
backdrop: string[];
|
|
71
|
+
viewport: string;
|
|
72
|
+
popup: string[];
|
|
73
|
+
header: string;
|
|
74
|
+
title: string[];
|
|
75
|
+
description: string[];
|
|
76
|
+
close: string;
|
|
77
|
+
}, undefined, tailwind_variants_dist_config_js.TVConfig<{
|
|
78
|
+
variant: {
|
|
79
|
+
modal: {
|
|
80
|
+
popup: string[];
|
|
81
|
+
};
|
|
82
|
+
standard: {
|
|
83
|
+
popup: string;
|
|
84
|
+
};
|
|
85
|
+
};
|
|
86
|
+
}, {
|
|
87
|
+
variant: {
|
|
88
|
+
modal: {
|
|
89
|
+
popup: string[];
|
|
90
|
+
};
|
|
91
|
+
standard: {
|
|
92
|
+
popup: string;
|
|
93
|
+
};
|
|
94
|
+
};
|
|
95
|
+
}>, unknown, unknown, undefined>>;
|
|
96
|
+
declare const SideSheet: {
|
|
97
|
+
Root: {
|
|
98
|
+
({ variant, side, ...props }: _m3_baseui_core.SideSheetOwnProps & Omit<_base_ui_react.DrawerRoot.Props<unknown>, "modal" | "swipeDirection">): React.JSX.Element;
|
|
99
|
+
displayName: string;
|
|
100
|
+
};
|
|
101
|
+
Trigger: _base_ui_react.DrawerTrigger;
|
|
102
|
+
Portal: _base_ui_react.DrawerPortal;
|
|
103
|
+
Backdrop: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.DrawerBackdropProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
104
|
+
Viewport: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.DrawerViewportProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<unknown>>;
|
|
105
|
+
Popup: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.DrawerPopupProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
106
|
+
Header: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
|
|
107
|
+
Title: react.ForwardRefExoticComponent<Omit<_base_ui_react.DrawerTitleProps, "ref"> & react.RefAttributes<unknown>>;
|
|
108
|
+
Description: react.ForwardRefExoticComponent<Omit<_base_ui_react.DrawerDescriptionProps, "ref"> & react.RefAttributes<unknown>>;
|
|
109
|
+
Close: react.ForwardRefExoticComponent<Omit<_base_ui_react.DrawerCloseProps, "ref"> & react.RefAttributes<unknown>>;
|
|
110
|
+
};
|
|
111
|
+
|
|
112
|
+
export { SideSheet, sideSheetTv };
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { createSideSheet } from '@m3-baseui/core';
|
|
3
|
+
import { tv as tv$1 } from 'tailwind-variants';
|
|
4
|
+
|
|
5
|
+
// src/side-sheet.ts
|
|
6
|
+
var TYPESCALE = [
|
|
7
|
+
"display-large",
|
|
8
|
+
"display-medium",
|
|
9
|
+
"display-small",
|
|
10
|
+
"headline-large",
|
|
11
|
+
"headline-medium",
|
|
12
|
+
"headline-small",
|
|
13
|
+
"title-large",
|
|
14
|
+
"title-medium",
|
|
15
|
+
"title-small",
|
|
16
|
+
"body-large",
|
|
17
|
+
"body-medium",
|
|
18
|
+
"body-small",
|
|
19
|
+
"label-large",
|
|
20
|
+
"label-medium",
|
|
21
|
+
"label-small"
|
|
22
|
+
];
|
|
23
|
+
var tv = (options, config) => tv$1(options, {
|
|
24
|
+
...config,
|
|
25
|
+
twMergeConfig: {
|
|
26
|
+
extend: {
|
|
27
|
+
classGroups: {
|
|
28
|
+
"font-size": [{ text: [...TYPESCALE] }]
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
});
|
|
33
|
+
|
|
34
|
+
// src/side-sheet.ts
|
|
35
|
+
var sideSheetTv = tv({
|
|
36
|
+
slots: {
|
|
37
|
+
backdrop: [
|
|
38
|
+
"fixed inset-0 z-40 bg-scrim/32",
|
|
39
|
+
"transition-opacity duration-300 ease-emphasized",
|
|
40
|
+
"data-[swiping]:transition-none",
|
|
41
|
+
"data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"
|
|
42
|
+
],
|
|
43
|
+
viewport: "fixed inset-0 z-50 flex items-stretch",
|
|
44
|
+
popup: [
|
|
45
|
+
"box-border h-full w-[320px] max-w-[calc(100vw-56px)]",
|
|
46
|
+
"flex flex-col overflow-y-auto overscroll-contain touch-auto outline-none",
|
|
47
|
+
"bg-surface-container-low text-on-surface",
|
|
48
|
+
"data-[swipe-direction=right]:ml-auto data-[swipe-direction=left]:mr-auto",
|
|
49
|
+
"[transform:translateX(var(--drawer-swipe-movement-x))]",
|
|
50
|
+
"transition-transform duration-300 ease-emphasized",
|
|
51
|
+
"data-[swiping]:select-none",
|
|
52
|
+
"data-[swipe-direction=right]:data-[starting-style]:[transform:translateX(100%)]",
|
|
53
|
+
"data-[swipe-direction=right]:data-[ending-style]:[transform:translateX(100%)]",
|
|
54
|
+
"data-[swipe-direction=left]:data-[starting-style]:[transform:translateX(-100%)]",
|
|
55
|
+
"data-[swipe-direction=left]:data-[ending-style]:[transform:translateX(-100%)]"
|
|
56
|
+
],
|
|
57
|
+
header: "flex items-center gap-2 min-h-14 px-4 py-2",
|
|
58
|
+
title: ["flex-1 m-0 text-title-large text-on-surface"],
|
|
59
|
+
description: ["m-0 px-6 pb-4 text-body-medium text-on-surface-variant"],
|
|
60
|
+
close: "inline-flex shrink-0"
|
|
61
|
+
},
|
|
62
|
+
variants: {
|
|
63
|
+
variant: {
|
|
64
|
+
modal: {
|
|
65
|
+
popup: [
|
|
66
|
+
"shadow-level1",
|
|
67
|
+
"data-[swipe-direction=right]:rounded-s-large data-[swipe-direction=left]:rounded-e-large"
|
|
68
|
+
]
|
|
69
|
+
},
|
|
70
|
+
standard: { popup: "shadow-none" }
|
|
71
|
+
}
|
|
72
|
+
},
|
|
73
|
+
defaultVariants: {
|
|
74
|
+
variant: "modal"
|
|
75
|
+
}
|
|
76
|
+
});
|
|
77
|
+
var s = sideSheetTv();
|
|
78
|
+
var SideSheet = createSideSheet({
|
|
79
|
+
backdrop: s.backdrop(),
|
|
80
|
+
viewport: s.viewport(),
|
|
81
|
+
popup: ({ variant }) => sideSheetTv({ variant }).popup(),
|
|
82
|
+
header: s.header(),
|
|
83
|
+
title: s.title(),
|
|
84
|
+
description: s.description(),
|
|
85
|
+
close: s.close()
|
|
86
|
+
});
|
|
87
|
+
|
|
88
|
+
export { SideSheet, sideSheetTv };
|
|
89
|
+
//# sourceMappingURL=side-sheet.js.map
|
|
90
|
+
//# sourceMappingURL=side-sheet.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/tv.ts","../src/side-sheet.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,cAAc,EAAA,CAAG;AAAA,EAC5B,KAAA,EAAO;AAAA,IACL,QAAA,EAAU;AAAA,MACR,gCAAA;AAAA,MACA,iDAAA;AAAA,MACA,gCAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,QAAA,EAAU,uCAAA;AAAA,IACV,KAAA,EAAO;AAAA,MACL,sDAAA;AAAA,MACA,0EAAA;AAAA,MACA,0CAAA;AAAA,MACA,0EAAA;AAAA,MACA,wDAAA;AAAA,MACA,mDAAA;AAAA,MACA,4BAAA;AAAA,MACA,iFAAA;AAAA,MACA,+EAAA;AAAA,MACA,iFAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,MAAA,EAAQ,4CAAA;AAAA,IACR,KAAA,EAAO,CAAC,6CAA6C,CAAA;AAAA,IACrD,WAAA,EAAa,CAAC,wDAAwD,CAAA;AAAA,IACtE,KAAA,EAAO;AAAA,GACT;AAAA,EACA,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,KAAA,EAAO;AAAA,QACL,KAAA,EAAO;AAAA,UACL,eAAA;AAAA,UACA;AAAA;AACF,OACF;AAAA,MACA,QAAA,EAAU,EAAE,KAAA,EAAO,aAAA;AAAc;AACnC,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,OAAA,EAAS;AAAA;AAEb,CAAC;AAED,IAAM,IAAI,WAAA,EAAY;AACf,IAAM,YAAY,eAAA,CAAgB;AAAA,EACvC,QAAA,EAAU,EAAE,QAAA,EAAS;AAAA,EACrB,QAAA,EAAU,EAAE,QAAA,EAAS;AAAA,EACrB,KAAA,EAAO,CAAC,EAAE,OAAA,EAAQ,KAAM,YAAY,EAAE,OAAA,EAAS,CAAA,CAAE,KAAA,EAAM;AAAA,EACvD,MAAA,EAAQ,EAAE,MAAA,EAAO;AAAA,EACjB,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,EACf,WAAA,EAAa,EAAE,WAAA,EAAY;AAAA,EAC3B,KAAA,EAAO,EAAE,KAAA;AACX,CAAC","file":"side-sheet.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 * side-sheet.ts — tailwind-variants slots for the M3 Side sheet.\n *\n * A full-height 320dp `surface-container-low` surface anchored to a side edge.\n * `modal` floats at elevation 1 with the leading edge rounded large (16dp);\n * `standard` sits flush (no elevation). The anchored side is read from Base UI's\n * `data-swipe-direction` on the popup, so one resolver covers both left + right.\n * The popup slides via `--drawer-swipe-movement-x` so the swipe gesture tracks\n * the finger. Same DOM + `data-*` as the VE build.\n */\nimport { createSideSheet } from '@m3-baseui/core';\nimport { tv } from './tv';\n\nexport const sideSheetTv = tv({\n slots: {\n backdrop: [\n 'fixed inset-0 z-40 bg-scrim/32',\n 'transition-opacity duration-300 ease-emphasized',\n 'data-[swiping]:transition-none',\n 'data-[starting-style]:opacity-0 data-[ending-style]:opacity-0',\n ],\n viewport: 'fixed inset-0 z-50 flex items-stretch',\n popup: [\n 'box-border h-full w-[320px] max-w-[calc(100vw-56px)]',\n 'flex flex-col overflow-y-auto overscroll-contain touch-auto outline-none',\n 'bg-surface-container-low text-on-surface',\n 'data-[swipe-direction=right]:ml-auto data-[swipe-direction=left]:mr-auto',\n '[transform:translateX(var(--drawer-swipe-movement-x))]',\n 'transition-transform duration-300 ease-emphasized',\n 'data-[swiping]:select-none',\n 'data-[swipe-direction=right]:data-[starting-style]:[transform:translateX(100%)]',\n 'data-[swipe-direction=right]:data-[ending-style]:[transform:translateX(100%)]',\n 'data-[swipe-direction=left]:data-[starting-style]:[transform:translateX(-100%)]',\n 'data-[swipe-direction=left]:data-[ending-style]:[transform:translateX(-100%)]',\n ],\n header: 'flex items-center gap-2 min-h-14 px-4 py-2',\n title: ['flex-1 m-0 text-title-large text-on-surface'],\n description: ['m-0 px-6 pb-4 text-body-medium text-on-surface-variant'],\n close: 'inline-flex shrink-0',\n },\n variants: {\n variant: {\n modal: {\n popup: [\n 'shadow-level1',\n 'data-[swipe-direction=right]:rounded-s-large data-[swipe-direction=left]:rounded-e-large',\n ],\n },\n standard: { popup: 'shadow-none' },\n },\n },\n defaultVariants: {\n variant: 'modal',\n },\n});\n\nconst s = sideSheetTv();\nexport const SideSheet = createSideSheet({\n backdrop: s.backdrop(),\n viewport: s.viewport(),\n popup: ({ variant }) => sideSheetTv({ variant }).popup(),\n header: s.header(),\n title: s.title(),\n description: s.description(),\n close: s.close(),\n});\nexport type { SideSheetVariant, SideSheetSide } from '@m3-baseui/core';\n"]}
|
|
@@ -0,0 +1,147 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import * as _m3_baseui_core from '@m3-baseui/core';
|
|
3
|
+
export { TopAppBarProps, TopAppBarVariant } from '@m3-baseui/core';
|
|
4
|
+
import * as tailwind_variants from 'tailwind-variants';
|
|
5
|
+
import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config.js';
|
|
6
|
+
|
|
7
|
+
declare const topAppBarTv: tailwind_variants.TVReturnType<{
|
|
8
|
+
variant: {
|
|
9
|
+
small: {
|
|
10
|
+
headline: string;
|
|
11
|
+
};
|
|
12
|
+
center: {
|
|
13
|
+
headline: string;
|
|
14
|
+
};
|
|
15
|
+
medium: {
|
|
16
|
+
root: string;
|
|
17
|
+
headline: string;
|
|
18
|
+
};
|
|
19
|
+
large: {
|
|
20
|
+
root: string;
|
|
21
|
+
headline: string;
|
|
22
|
+
};
|
|
23
|
+
};
|
|
24
|
+
}, {
|
|
25
|
+
root: string;
|
|
26
|
+
row: string;
|
|
27
|
+
leading: string;
|
|
28
|
+
headline: string;
|
|
29
|
+
trailing: string;
|
|
30
|
+
}, undefined, tailwind_variants_dist_config_js.TVConfig<{
|
|
31
|
+
variant: {
|
|
32
|
+
small: {
|
|
33
|
+
headline: string;
|
|
34
|
+
};
|
|
35
|
+
center: {
|
|
36
|
+
headline: string;
|
|
37
|
+
};
|
|
38
|
+
medium: {
|
|
39
|
+
root: string;
|
|
40
|
+
headline: string;
|
|
41
|
+
};
|
|
42
|
+
large: {
|
|
43
|
+
root: string;
|
|
44
|
+
headline: string;
|
|
45
|
+
};
|
|
46
|
+
};
|
|
47
|
+
}, {
|
|
48
|
+
variant: {
|
|
49
|
+
small: {
|
|
50
|
+
headline: string;
|
|
51
|
+
};
|
|
52
|
+
center: {
|
|
53
|
+
headline: string;
|
|
54
|
+
};
|
|
55
|
+
medium: {
|
|
56
|
+
root: string;
|
|
57
|
+
headline: string;
|
|
58
|
+
};
|
|
59
|
+
large: {
|
|
60
|
+
root: string;
|
|
61
|
+
headline: string;
|
|
62
|
+
};
|
|
63
|
+
};
|
|
64
|
+
}>, {
|
|
65
|
+
variant: {
|
|
66
|
+
small: {
|
|
67
|
+
headline: string;
|
|
68
|
+
};
|
|
69
|
+
center: {
|
|
70
|
+
headline: string;
|
|
71
|
+
};
|
|
72
|
+
medium: {
|
|
73
|
+
root: string;
|
|
74
|
+
headline: string;
|
|
75
|
+
};
|
|
76
|
+
large: {
|
|
77
|
+
root: string;
|
|
78
|
+
headline: string;
|
|
79
|
+
};
|
|
80
|
+
};
|
|
81
|
+
}, {
|
|
82
|
+
root: string;
|
|
83
|
+
row: string;
|
|
84
|
+
leading: string;
|
|
85
|
+
headline: string;
|
|
86
|
+
trailing: string;
|
|
87
|
+
}, tailwind_variants.TVReturnType<{
|
|
88
|
+
variant: {
|
|
89
|
+
small: {
|
|
90
|
+
headline: string;
|
|
91
|
+
};
|
|
92
|
+
center: {
|
|
93
|
+
headline: string;
|
|
94
|
+
};
|
|
95
|
+
medium: {
|
|
96
|
+
root: string;
|
|
97
|
+
headline: string;
|
|
98
|
+
};
|
|
99
|
+
large: {
|
|
100
|
+
root: string;
|
|
101
|
+
headline: string;
|
|
102
|
+
};
|
|
103
|
+
};
|
|
104
|
+
}, {
|
|
105
|
+
root: string;
|
|
106
|
+
row: string;
|
|
107
|
+
leading: string;
|
|
108
|
+
headline: string;
|
|
109
|
+
trailing: string;
|
|
110
|
+
}, undefined, tailwind_variants_dist_config_js.TVConfig<{
|
|
111
|
+
variant: {
|
|
112
|
+
small: {
|
|
113
|
+
headline: string;
|
|
114
|
+
};
|
|
115
|
+
center: {
|
|
116
|
+
headline: string;
|
|
117
|
+
};
|
|
118
|
+
medium: {
|
|
119
|
+
root: string;
|
|
120
|
+
headline: string;
|
|
121
|
+
};
|
|
122
|
+
large: {
|
|
123
|
+
root: string;
|
|
124
|
+
headline: string;
|
|
125
|
+
};
|
|
126
|
+
};
|
|
127
|
+
}, {
|
|
128
|
+
variant: {
|
|
129
|
+
small: {
|
|
130
|
+
headline: string;
|
|
131
|
+
};
|
|
132
|
+
center: {
|
|
133
|
+
headline: string;
|
|
134
|
+
};
|
|
135
|
+
medium: {
|
|
136
|
+
root: string;
|
|
137
|
+
headline: string;
|
|
138
|
+
};
|
|
139
|
+
large: {
|
|
140
|
+
root: string;
|
|
141
|
+
headline: string;
|
|
142
|
+
};
|
|
143
|
+
};
|
|
144
|
+
}>, unknown, unknown, undefined>>;
|
|
145
|
+
declare const TopAppBar: react.ForwardRefExoticComponent<_m3_baseui_core.TopAppBarOwnProps & Omit<react.HTMLAttributes<HTMLElement>, "title"> & react.RefAttributes<HTMLElement>>;
|
|
146
|
+
|
|
147
|
+
export { TopAppBar, topAppBarTv };
|