@m3-baseui/react-tailwind 1.0.3 → 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/card.js +2 -0
- package/dist/card.js.map +1 -1
- package/dist/checkbox.d.ts +5 -5
- package/dist/divider.js +2 -1
- package/dist/divider.js.map +1 -1
- package/dist/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 +259 -16
- package/dist/index.js.map +1 -1
- package/dist/item.d.ts +5 -5
- package/dist/menu.d.ts +5 -5
- package/dist/navigation-bar.d.ts +5 -5
- package/dist/navigation-bar.js +20 -4
- package/dist/navigation-bar.js.map +1 -1
- package/dist/navigation-rail.d.ts +101 -0
- package/dist/navigation-rail.js +92 -0
- package/dist/navigation-rail.js.map +1 -0
- package/dist/progress.d.ts +12 -12
- package/dist/progress.js.map +1 -1
- 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/slider.d.ts +5 -5
- package/dist/snackbar.d.ts +5 -5
- package/dist/snackbar.js +1 -1
- package/dist/snackbar.js.map +1 -1
- package/dist/textfield.js +5 -2
- package/dist/textfield.js.map +1 -1
- package/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
- package/styles/preset.css +2 -1
|
@@ -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"]}
|
package/dist/slider.d.ts
CHANGED
|
@@ -6,9 +6,9 @@ import * as tailwind_variants from 'tailwind-variants';
|
|
|
6
6
|
declare const sliderTv: tailwind_variants.TVReturnType<{
|
|
7
7
|
[key: string]: {
|
|
8
8
|
[key: string]: tailwind_variants.ClassValue | {
|
|
9
|
+
root?: tailwind_variants.ClassValue;
|
|
9
10
|
value?: tailwind_variants.ClassValue;
|
|
10
11
|
track?: tailwind_variants.ClassValue;
|
|
11
|
-
root?: tailwind_variants.ClassValue;
|
|
12
12
|
indicator?: tailwind_variants.ClassValue;
|
|
13
13
|
thumb?: tailwind_variants.ClassValue;
|
|
14
14
|
control?: tailwind_variants.ClassValue;
|
|
@@ -17,9 +17,9 @@ declare const sliderTv: tailwind_variants.TVReturnType<{
|
|
|
17
17
|
} | {
|
|
18
18
|
[x: string]: {
|
|
19
19
|
[x: string]: tailwind_variants.ClassValue | {
|
|
20
|
+
root?: tailwind_variants.ClassValue;
|
|
20
21
|
value?: tailwind_variants.ClassValue;
|
|
21
22
|
track?: tailwind_variants.ClassValue;
|
|
22
|
-
root?: tailwind_variants.ClassValue;
|
|
23
23
|
indicator?: tailwind_variants.ClassValue;
|
|
24
24
|
thumb?: tailwind_variants.ClassValue;
|
|
25
25
|
control?: tailwind_variants.ClassValue;
|
|
@@ -35,9 +35,9 @@ declare const sliderTv: tailwind_variants.TVReturnType<{
|
|
|
35
35
|
}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
|
|
36
36
|
[key: string]: {
|
|
37
37
|
[key: string]: tailwind_variants.ClassValue | {
|
|
38
|
+
root?: tailwind_variants.ClassValue;
|
|
38
39
|
value?: tailwind_variants.ClassValue;
|
|
39
40
|
track?: tailwind_variants.ClassValue;
|
|
40
|
-
root?: tailwind_variants.ClassValue;
|
|
41
41
|
indicator?: tailwind_variants.ClassValue;
|
|
42
42
|
thumb?: tailwind_variants.ClassValue;
|
|
43
43
|
control?: tailwind_variants.ClassValue;
|
|
@@ -46,9 +46,9 @@ declare const sliderTv: tailwind_variants.TVReturnType<{
|
|
|
46
46
|
} | {}>, {
|
|
47
47
|
[key: string]: {
|
|
48
48
|
[key: string]: tailwind_variants.ClassValue | {
|
|
49
|
+
root?: tailwind_variants.ClassValue;
|
|
49
50
|
value?: tailwind_variants.ClassValue;
|
|
50
51
|
track?: tailwind_variants.ClassValue;
|
|
51
|
-
root?: tailwind_variants.ClassValue;
|
|
52
52
|
indicator?: tailwind_variants.ClassValue;
|
|
53
53
|
thumb?: tailwind_variants.ClassValue;
|
|
54
54
|
control?: tailwind_variants.ClassValue;
|
|
@@ -71,9 +71,9 @@ declare const sliderTv: tailwind_variants.TVReturnType<{
|
|
|
71
71
|
}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
|
|
72
72
|
[key: string]: {
|
|
73
73
|
[key: string]: tailwind_variants.ClassValue | {
|
|
74
|
+
root?: tailwind_variants.ClassValue;
|
|
74
75
|
value?: tailwind_variants.ClassValue;
|
|
75
76
|
track?: tailwind_variants.ClassValue;
|
|
76
|
-
root?: tailwind_variants.ClassValue;
|
|
77
77
|
indicator?: tailwind_variants.ClassValue;
|
|
78
78
|
thumb?: tailwind_variants.ClassValue;
|
|
79
79
|
control?: tailwind_variants.ClassValue;
|
package/dist/snackbar.d.ts
CHANGED
|
@@ -7,24 +7,24 @@ export { useSnackbar } from '@m3-baseui/core';
|
|
|
7
7
|
declare const snackbarTv: tailwind_variants.TVReturnType<{
|
|
8
8
|
[key: string]: {
|
|
9
9
|
[key: string]: tailwind_variants.ClassValue | {
|
|
10
|
+
root?: tailwind_variants.ClassValue;
|
|
10
11
|
title?: tailwind_variants.ClassValue;
|
|
11
12
|
content?: tailwind_variants.ClassValue;
|
|
12
13
|
close?: tailwind_variants.ClassValue;
|
|
13
14
|
action?: tailwind_variants.ClassValue;
|
|
14
15
|
description?: tailwind_variants.ClassValue;
|
|
15
|
-
root?: tailwind_variants.ClassValue;
|
|
16
16
|
viewport?: tailwind_variants.ClassValue;
|
|
17
17
|
};
|
|
18
18
|
};
|
|
19
19
|
} | {
|
|
20
20
|
[x: string]: {
|
|
21
21
|
[x: string]: tailwind_variants.ClassValue | {
|
|
22
|
+
root?: tailwind_variants.ClassValue;
|
|
22
23
|
title?: tailwind_variants.ClassValue;
|
|
23
24
|
content?: tailwind_variants.ClassValue;
|
|
24
25
|
close?: tailwind_variants.ClassValue;
|
|
25
26
|
action?: tailwind_variants.ClassValue;
|
|
26
27
|
description?: tailwind_variants.ClassValue;
|
|
27
|
-
root?: tailwind_variants.ClassValue;
|
|
28
28
|
viewport?: tailwind_variants.ClassValue;
|
|
29
29
|
};
|
|
30
30
|
};
|
|
@@ -39,24 +39,24 @@ declare const snackbarTv: tailwind_variants.TVReturnType<{
|
|
|
39
39
|
}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
|
|
40
40
|
[key: string]: {
|
|
41
41
|
[key: string]: tailwind_variants.ClassValue | {
|
|
42
|
+
root?: tailwind_variants.ClassValue;
|
|
42
43
|
title?: tailwind_variants.ClassValue;
|
|
43
44
|
content?: tailwind_variants.ClassValue;
|
|
44
45
|
close?: tailwind_variants.ClassValue;
|
|
45
46
|
action?: tailwind_variants.ClassValue;
|
|
46
47
|
description?: tailwind_variants.ClassValue;
|
|
47
|
-
root?: tailwind_variants.ClassValue;
|
|
48
48
|
viewport?: tailwind_variants.ClassValue;
|
|
49
49
|
};
|
|
50
50
|
};
|
|
51
51
|
} | {}>, {
|
|
52
52
|
[key: string]: {
|
|
53
53
|
[key: string]: tailwind_variants.ClassValue | {
|
|
54
|
+
root?: tailwind_variants.ClassValue;
|
|
54
55
|
title?: tailwind_variants.ClassValue;
|
|
55
56
|
content?: tailwind_variants.ClassValue;
|
|
56
57
|
close?: tailwind_variants.ClassValue;
|
|
57
58
|
action?: tailwind_variants.ClassValue;
|
|
58
59
|
description?: tailwind_variants.ClassValue;
|
|
59
|
-
root?: tailwind_variants.ClassValue;
|
|
60
60
|
viewport?: tailwind_variants.ClassValue;
|
|
61
61
|
};
|
|
62
62
|
};
|
|
@@ -79,12 +79,12 @@ declare const snackbarTv: tailwind_variants.TVReturnType<{
|
|
|
79
79
|
}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
|
|
80
80
|
[key: string]: {
|
|
81
81
|
[key: string]: tailwind_variants.ClassValue | {
|
|
82
|
+
root?: tailwind_variants.ClassValue;
|
|
82
83
|
title?: tailwind_variants.ClassValue;
|
|
83
84
|
content?: tailwind_variants.ClassValue;
|
|
84
85
|
close?: tailwind_variants.ClassValue;
|
|
85
86
|
action?: tailwind_variants.ClassValue;
|
|
86
87
|
description?: tailwind_variants.ClassValue;
|
|
87
|
-
root?: tailwind_variants.ClassValue;
|
|
88
88
|
viewport?: tailwind_variants.ClassValue;
|
|
89
89
|
};
|
|
90
90
|
};
|
package/dist/snackbar.js
CHANGED
|
@@ -20,7 +20,7 @@ var snackbarTv = tv({
|
|
|
20
20
|
],
|
|
21
21
|
content: "flex flex-col flex-1 min-w-0 gap-0.5",
|
|
22
22
|
title: "text-body-medium",
|
|
23
|
-
description: "text-body-
|
|
23
|
+
description: "text-body-medium",
|
|
24
24
|
action: [
|
|
25
25
|
"relative inline-flex items-center justify-center shrink-0 h-9 px-3 overflow-hidden",
|
|
26
26
|
"rounded-extra-small bg-transparent border-0 cursor-pointer outline-none",
|
package/dist/snackbar.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/snackbar.ts"],"names":[],"mappings":";;;;;;AAYO,IAAM,aAAa,EAAA,CAAG;AAAA,EAC3B,KAAA,EAAO;AAAA,IACL,QAAA,EAAU;AAAA,MACR,+CAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,qEAAA;AAAA,MACA,8EAAA;AAAA,MACA,kBAAA;AAAA,MACA,6DAAA;AAAA,MACA,qEAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,OAAA,EAAS,sCAAA;AAAA,IACT,KAAA,EAAO,kBAAA;AAAA,IACP,WAAA,EAAa,
|
|
1
|
+
{"version":3,"sources":["../src/snackbar.ts"],"names":[],"mappings":";;;;;;AAYO,IAAM,aAAa,EAAA,CAAG;AAAA,EAC3B,KAAA,EAAO;AAAA,IACL,QAAA,EAAU;AAAA,MACR,+CAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,qEAAA;AAAA,MACA,8EAAA;AAAA,MACA,kBAAA;AAAA,MACA,6DAAA;AAAA,MACA,qEAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,OAAA,EAAS,sCAAA;AAAA,IACT,KAAA,EAAO,kBAAA;AAAA,IACP,WAAA,EAAa,kBAAA;AAAA,IACb,MAAA,EAAQ;AAAA,MACN,oFAAA;AAAA,MACA,yEAAA;AAAA,MACA,uCAAA;AAAA,MACA,4IAAA;AAAA,MACA,kDAAA;AAAA,MACA,0DAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO;AAAA,MACL,+FAAA;AAAA,MACA,6EAAA;AAAA,MACA,4IAAA;AAAA,MACA,kDAAA;AAAA,MACA,0DAAA;AAAA,MACA,qDAAA;AAAA,MACA;AAAA;AACF;AAEJ,CAAC;AAED,IAAM,IAAI,UAAA,EAAW;AACd,IAAM,WAAW,cAAA,CAAe;AAAA,EACrC,QAAA,EAAU,EAAE,QAAA,EAAS;AAAA,EACrB,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,OAAA,EAAS,EAAE,OAAA,EAAQ;AAAA,EACnB,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,EACf,WAAA,EAAa,EAAE,WAAA,EAAY;AAAA,EAC3B,MAAA,EAAQ,EAAE,MAAA,EAAO;AAAA,EACjB,KAAA,EAAO,EAAE,KAAA;AACX,CAAC","file":"snackbar.js","sourcesContent":["/**\n * snackbar.ts — tailwind-variants slots for the M3 Snackbar.\n *\n * Inverse-surface container, extra-small corners, elevation level3. The Action\n * is an inverse-primary text button with a state layer + ripple. Enter/exit key\n * off Toast's `data-starting-style` / `data-ending-style`. Same DOM as VE.\n */\nimport { createSnackbar } from '@m3-baseui/core';\nimport { tv } from 'tailwind-variants';\n\nexport { useSnackbar } from '@m3-baseui/core';\n\nexport const snackbarTv = tv({\n slots: {\n viewport: [\n 'fixed bottom-4 left-1/2 -translate-x-1/2 z-50',\n 'flex flex-col gap-2 w-[min(560px,calc(100vw-32px))]',\n ],\n root: [\n 'relative flex items-center gap-2 min-h-12 box-border pl-4 pr-2 py-2',\n 'rounded-extra-small bg-inverse-surface text-inverse-on-surface shadow-level3',\n 'text-body-medium',\n 'transition-[opacity,transform] duration-200 ease-emphasized',\n 'data-[starting-style]:opacity-0 data-[starting-style]:translate-y-2',\n 'data-[ending-style]:opacity-0',\n ],\n content: 'flex flex-col flex-1 min-w-0 gap-0.5',\n title: 'text-body-medium',\n description: 'text-body-medium',\n action: [\n 'relative inline-flex items-center justify-center shrink-0 h-9 px-3 overflow-hidden',\n 'rounded-extra-small bg-transparent border-0 cursor-pointer outline-none',\n 'text-inverse-primary text-label-large',\n 'before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100',\n 'hover:before:opacity-[var(--md-sys-state-hover)]',\n 'focus-visible:before:opacity-[var(--md-sys-state-focus)]',\n 'active:before:opacity-[var(--md-sys-state-pressed)]',\n ],\n close: [\n 'relative inline-flex items-center justify-center shrink-0 size-8 rounded-full overflow-hidden',\n 'bg-transparent border-0 cursor-pointer text-inverse-on-surface outline-none',\n 'before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100',\n 'hover:before:opacity-[var(--md-sys-state-hover)]',\n 'focus-visible:before:opacity-[var(--md-sys-state-focus)]',\n 'active:before:opacity-[var(--md-sys-state-pressed)]',\n 'data-[pressed]:before:opacity-[var(--md-sys-state-pressed)]',\n ],\n },\n});\n\nconst s = snackbarTv();\nexport const Snackbar = createSnackbar({\n viewport: s.viewport(),\n root: s.root(),\n content: s.content(),\n title: s.title(),\n description: s.description(),\n action: s.action(),\n close: s.close(),\n});\n"]}
|
package/dist/textfield.js
CHANGED
|
@@ -37,7 +37,8 @@ var textFieldTv = tv({
|
|
|
37
37
|
field: [
|
|
38
38
|
"rounded-t-extra-small bg-surface-container-highest",
|
|
39
39
|
"border-b-2 border-outline",
|
|
40
|
-
|
|
40
|
+
// M3 filled focus-active-indicator-height is 3dp (resting/error stay 2dp).
|
|
41
|
+
"group-data-[focused]:border-b-[3px] group-data-[focused]:border-primary group-data-[invalid]:border-error"
|
|
41
42
|
],
|
|
42
43
|
input: "pt-3",
|
|
43
44
|
label: [
|
|
@@ -48,7 +49,9 @@ var textFieldTv = tv({
|
|
|
48
49
|
outlined: {
|
|
49
50
|
field: [
|
|
50
51
|
"rounded-extra-small border border-outline",
|
|
51
|
-
|
|
52
|
+
// M3 outlined focus-outline-width is 3dp (matches Select's trigger);
|
|
53
|
+
// padding drops 2px so content stays steady as the 1dp border grows.
|
|
54
|
+
"group-data-[focused]:border-[3px] group-data-[focused]:border-primary group-data-[focused]:px-[14px]",
|
|
52
55
|
"group-data-[invalid]:border-error"
|
|
53
56
|
],
|
|
54
57
|
label: [
|
package/dist/textfield.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/textfield.ts"],"names":[],"mappings":";;;;;
|
|
1
|
+
{"version":3,"sources":["../src/textfield.ts"],"names":[],"mappings":";;;;;AAYO,IAAM,cAAc,EAAA,CAAG;AAAA,EAC5B,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,mCAAA;AAAA,IACN,KAAA,EAAO;AAAA,MACL,wDAAA;AAAA,MACA,8DAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,SAAA,EAAW,2CAAA;AAAA,IACX,KAAA,EAAO;AAAA,MACL,sFAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO;AAAA,MACL,iDAAA;AAAA,MACA,kEAAA;AAAA,MACA,2CAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,WAAA,EAAa,oDAAA;AAAA,IACb,YAAA,EAAc,oDAAA;AAAA,IACd,UAAA,EAAY;AAAA,MACV,yEAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,cAAA,EAAgB,SAAA;AAAA,IAChB,OAAA,EAAS;AAAA,GACX;AAAA,EACA,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,MAAA,EAAQ;AAAA,QACN,KAAA,EAAO;AAAA,UACL,oDAAA;AAAA,UACA,2BAAA;AAAA;AAAA,UAEA;AAAA,SACF;AAAA,QACA,KAAA,EAAO,MAAA;AAAA,QACP,KAAA,EAAO;AAAA,UACL,sGAAA;AAAA,UACA;AAAA;AACF,OACF;AAAA,MACA,QAAA,EAAU;AAAA,QACR,KAAA,EAAO;AAAA,UACL,2CAAA;AAAA;AAAA;AAAA,UAGA,sGAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,KAAA,EAAO;AAAA,UACL,iKAAA;AAAA,UACA;AAAA;AACF;AACF;AACF,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,OAAA,EAAS;AAAA;AAEb,CAAC;AAEM,IAAM,SAAA,GAAY,eAAA,CAAgB,CAAC,EAAE,SAAQ,KAAM;AACxD,EAAA,MAAM,CAAA,GAAI,WAAA,CAAY,EAAE,OAAA,EAAS,CAAA;AACjC,EAAA,OAAO;AAAA,IACL,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,IACb,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,IACf,SAAA,EAAW,EAAE,SAAA,EAAU;AAAA,IACvB,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,IACf,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,IACf,WAAA,EAAa,EAAE,WAAA,EAAY;AAAA,IAC3B,YAAA,EAAc,EAAE,YAAA,EAAa;AAAA,IAC7B,UAAA,EAAY,EAAE,UAAA,EAAW;AAAA,IACzB,cAAA,EAAgB,EAAE,cAAA,EAAe;AAAA,IACjC,OAAA,EAAS,EAAE,OAAA;AAAQ,GACrB;AACF,CAAC","file":"textfield.js","sourcesContent":["/**\n * textfield.ts — tailwind-variants slots for the M3 TextField.\n *\n * 56dp tall. The floating label and focus/filled border key off Field's\n * `data-focused` / `data-filled` / `data-invalid` via the `group` on Root.\n * Filled = surface-container-highest with a bottom indicator; outlined = a\n * border that thickens to 3dp primary on focus (M3 focus-outline-width). Same\n * DOM as the VE build.\n */\nimport { createTextField } from '@m3-baseui/core';\nimport { tv } from 'tailwind-variants';\n\nexport const textFieldTv = tv({\n slots: {\n root: 'flex flex-col gap-1 min-w-[210px]',\n field: [\n 'relative flex items-stretch gap-3 h-14 px-4 box-border',\n 'transition-[border-color,padding] duration-150 ease-standard',\n 'group-data-[disabled]:opacity-[0.38] group-data-[disabled]:pointer-events-none',\n ],\n inputWrap: 'relative flex-1 flex items-center min-w-0',\n input: [\n 'peer w-full bg-transparent outline-none border-0 p-0 text-body-large text-on-surface',\n 'placeholder:text-on-surface-variant',\n ],\n label: [\n 'absolute left-0 pointer-events-none origin-left',\n 'top-1/2 -translate-y-1/2 text-body-large text-on-surface-variant',\n 'transition-all duration-150 ease-standard',\n 'group-data-[focused]:text-primary group-data-[invalid]:text-error',\n ],\n leadingIcon: 'flex items-center shrink-0 text-on-surface-variant',\n trailingIcon: 'flex items-center shrink-0 text-on-surface-variant',\n supporting: [\n 'flex justify-between gap-4 px-4 text-body-small text-on-surface-variant',\n 'group-data-[invalid]:text-error',\n ],\n supportingText: 'min-w-0',\n counter: 'shrink-0 tabular-nums',\n },\n variants: {\n variant: {\n filled: {\n field: [\n 'rounded-t-extra-small bg-surface-container-highest',\n 'border-b-2 border-outline',\n // M3 filled focus-active-indicator-height is 3dp (resting/error stay 2dp).\n 'group-data-[focused]:border-b-[3px] group-data-[focused]:border-primary group-data-[invalid]:border-error',\n ],\n input: 'pt-3',\n label: [\n 'group-data-[focused]:top-1.5 group-data-[focused]:translate-y-0 group-data-[focused]:text-body-small',\n 'group-data-[filled]:top-1.5 group-data-[filled]:translate-y-0 group-data-[filled]:text-body-small',\n ],\n },\n outlined: {\n field: [\n 'rounded-extra-small border border-outline',\n // M3 outlined focus-outline-width is 3dp (matches Select's trigger);\n // padding drops 2px so content stays steady as the 1dp border grows.\n 'group-data-[focused]:border-[3px] group-data-[focused]:border-primary group-data-[focused]:px-[14px]',\n 'group-data-[invalid]:border-error',\n ],\n label: [\n 'group-data-[focused]:top-0 group-data-[focused]:-translate-y-1/2 group-data-[focused]:text-body-small group-data-[focused]:bg-surface group-data-[focused]:px-1',\n 'group-data-[filled]:top-0 group-data-[filled]:-translate-y-1/2 group-data-[filled]:text-body-small group-data-[filled]:bg-surface group-data-[filled]:px-1',\n ],\n },\n },\n },\n defaultVariants: {\n variant: 'filled',\n },\n});\n\nexport const TextField = createTextField(({ variant }) => {\n const c = textFieldTv({ variant });\n return {\n root: c.root(),\n field: c.field(),\n inputWrap: c.inputWrap(),\n input: c.input(),\n label: c.label(),\n leadingIcon: c.leadingIcon(),\n trailingIcon: c.trailingIcon(),\n supporting: c.supporting(),\n supportingText: c.supportingText(),\n counter: c.counter(),\n };\n});\n\nexport type { TextFieldProps, TextFieldVariant } from '@m3-baseui/core';\n"]}
|
|
@@ -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 };
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { createTopAppBar } from '@m3-baseui/core';
|
|
3
|
+
import { tv as tv$1 } from 'tailwind-variants';
|
|
4
|
+
|
|
5
|
+
// src/top-app-bar.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/top-app-bar.ts
|
|
35
|
+
var topAppBarTv = tv({
|
|
36
|
+
slots: {
|
|
37
|
+
root: "flex flex-col w-full box-border h-16 bg-surface text-on-surface",
|
|
38
|
+
row: "flex items-center gap-1 h-16 px-1",
|
|
39
|
+
leading: "flex items-center shrink-0 text-on-surface [&_svg]:size-6",
|
|
40
|
+
headline: "min-w-0 truncate text-on-surface",
|
|
41
|
+
trailing: "flex items-center gap-1 shrink-0 text-on-surface-variant [&_svg]:size-6"
|
|
42
|
+
},
|
|
43
|
+
variants: {
|
|
44
|
+
variant: {
|
|
45
|
+
small: { headline: "flex-1 px-3 text-title-large" },
|
|
46
|
+
center: { headline: "flex-1 px-3 text-center text-title-large" },
|
|
47
|
+
medium: { root: "h-28", headline: "px-4 pb-6 text-headline-small" },
|
|
48
|
+
large: { root: "h-38", headline: "px-4 pb-7 text-headline-medium" }
|
|
49
|
+
}
|
|
50
|
+
},
|
|
51
|
+
defaultVariants: {
|
|
52
|
+
variant: "small"
|
|
53
|
+
}
|
|
54
|
+
});
|
|
55
|
+
var TopAppBar = createTopAppBar((args) => {
|
|
56
|
+
const s = topAppBarTv({ variant: args.variant });
|
|
57
|
+
return {
|
|
58
|
+
root: s.root(),
|
|
59
|
+
row: s.row(),
|
|
60
|
+
leading: s.leading(),
|
|
61
|
+
headline: s.headline(),
|
|
62
|
+
trailing: s.trailing()
|
|
63
|
+
};
|
|
64
|
+
});
|
|
65
|
+
|
|
66
|
+
export { TopAppBar, topAppBarTv };
|
|
67
|
+
//# sourceMappingURL=top-app-bar.js.map
|
|
68
|
+
//# sourceMappingURL=top-app-bar.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/tv.ts","../src/top-app-bar.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,cAAc,EAAA,CAAG;AAAA,EAC5B,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,iEAAA;AAAA,IACN,GAAA,EAAK,mCAAA;AAAA,IACL,OAAA,EAAS,2DAAA;AAAA,IACT,QAAA,EAAU,kCAAA;AAAA,IACV,QAAA,EAAU;AAAA,GACZ;AAAA,EACA,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,KAAA,EAAO,EAAE,QAAA,EAAU,8BAAA,EAA+B;AAAA,MAClD,MAAA,EAAQ,EAAE,QAAA,EAAU,0CAAA,EAA2C;AAAA,MAC/D,MAAA,EAAQ,EAAE,IAAA,EAAM,MAAA,EAAQ,UAAU,+BAAA,EAAgC;AAAA,MAClE,KAAA,EAAO,EAAE,IAAA,EAAM,MAAA,EAAQ,UAAU,gCAAA;AAAiC;AACpE,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,OAAA,EAAS;AAAA;AAEb,CAAC;AAEM,IAAM,SAAA,GAAY,eAAA,CAAgB,CAAC,IAAA,KAAS;AACjD,EAAA,MAAM,IAAI,WAAA,CAAY,EAAE,OAAA,EAAS,IAAA,CAAK,SAAS,CAAA;AAC/C,EAAA,OAAO;AAAA,IACL,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,IACb,GAAA,EAAK,EAAE,GAAA,EAAI;AAAA,IACX,OAAA,EAAS,EAAE,OAAA,EAAQ;AAAA,IACnB,QAAA,EAAU,EAAE,QAAA,EAAS;AAAA,IACrB,QAAA,EAAU,EAAE,QAAA;AAAS,GACvB;AACF,CAAC","file":"top-app-bar.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 * top-app-bar.ts — tailwind-variants slots for the M3 TopAppBar.\n *\n * A `surface` bar. `small`/`center` are a single 64dp row (title-large, left vs.\n * centered); `medium`/`large` add a second headline line (headline-small /\n * headline-medium) below a 64dp action row, for 112dp / 152dp totals. The active\n * variant is exposed as `data-variant`. Same DOM as the VE build.\n */\nimport { createTopAppBar } from '@m3-baseui/core';\nimport { tv } from './tv';\n\nexport const topAppBarTv = tv({\n slots: {\n root: 'flex flex-col w-full box-border h-16 bg-surface text-on-surface',\n row: 'flex items-center gap-1 h-16 px-1',\n leading: 'flex items-center shrink-0 text-on-surface [&_svg]:size-6',\n headline: 'min-w-0 truncate text-on-surface',\n trailing: 'flex items-center gap-1 shrink-0 text-on-surface-variant [&_svg]:size-6',\n },\n variants: {\n variant: {\n small: { headline: 'flex-1 px-3 text-title-large' },\n center: { headline: 'flex-1 px-3 text-center text-title-large' },\n medium: { root: 'h-28', headline: 'px-4 pb-6 text-headline-small' },\n large: { root: 'h-38', headline: 'px-4 pb-7 text-headline-medium' },\n },\n },\n defaultVariants: {\n variant: 'small',\n },\n});\n\nexport const TopAppBar = createTopAppBar((args) => {\n const s = topAppBarTv({ variant: args.variant });\n return {\n root: s.root(),\n row: s.row(),\n leading: s.leading(),\n headline: s.headline(),\n trailing: s.trailing(),\n };\n});\nexport type { TopAppBarProps, TopAppBarVariant } from '@m3-baseui/core';\n"]}
|