@m3-baseui/react-tailwind 1.1.0 → 1.2.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/button-group.d.ts +48 -0
- package/dist/button-group.js +58 -0
- package/dist/button-group.js.map +1 -0
- package/dist/carousel.d.ts +115 -0
- package/dist/carousel.js +63 -0
- package/dist/carousel.js.map +1 -0
- package/dist/chip.js +5 -2
- package/dist/chip.js.map +1 -1
- package/dist/date-picker.d.ts +188 -0
- package/dist/date-picker.js +151 -0
- package/dist/date-picker.js.map +1 -0
- package/dist/icon-button.js +4 -1
- package/dist/icon-button.js.map +1 -1
- package/dist/index.d.ts +9 -1
- package/dist/index.js +439 -17
- package/dist/index.js.map +1 -1
- package/dist/loading-indicator.d.ts +68 -0
- package/dist/loading-indicator.js +61 -0
- package/dist/loading-indicator.js.map +1 -0
- package/dist/navigation-bar.d.ts +5 -5
- package/dist/navigation-rail.d.ts +5 -5
- package/dist/search.d.ts +148 -0
- package/dist/search.js +105 -0
- package/dist/search.js.map +1 -0
- package/dist/split-button.d.ts +201 -0
- package/dist/split-button.js +126 -0
- package/dist/split-button.js.map +1 -0
- package/dist/time-picker.d.ts +144 -0
- package/dist/time-picker.js +101 -0
- package/dist/time-picker.js.map +1 -0
- package/dist/toolbar.d.ts +73 -0
- package/dist/toolbar.js +55 -0
- package/dist/toolbar.js.map +1 -0
- package/package.json +41 -1
- package/styles/preset.css +15 -0
|
@@ -0,0 +1,201 @@
|
|
|
1
|
+
import * as _m3_baseui_core from '@m3-baseui/core';
|
|
2
|
+
import * as react from 'react';
|
|
3
|
+
import * as _base_ui_react from '@base-ui/react';
|
|
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 splitButtonTv: tailwind_variants.TVReturnType<{
|
|
8
|
+
variant: {
|
|
9
|
+
filled: {
|
|
10
|
+
leading: string[];
|
|
11
|
+
trailing: string[];
|
|
12
|
+
};
|
|
13
|
+
tonal: {
|
|
14
|
+
leading: string[];
|
|
15
|
+
trailing: string[];
|
|
16
|
+
};
|
|
17
|
+
outlined: {
|
|
18
|
+
leading: string[];
|
|
19
|
+
trailing: string[];
|
|
20
|
+
};
|
|
21
|
+
elevated: {
|
|
22
|
+
leading: string[];
|
|
23
|
+
trailing: string[];
|
|
24
|
+
};
|
|
25
|
+
text: {
|
|
26
|
+
leading: string[];
|
|
27
|
+
trailing: string[];
|
|
28
|
+
};
|
|
29
|
+
};
|
|
30
|
+
}, {
|
|
31
|
+
group: string;
|
|
32
|
+
leading: string[];
|
|
33
|
+
trailing: string[];
|
|
34
|
+
chevron: string[];
|
|
35
|
+
popup: string[];
|
|
36
|
+
item: string[];
|
|
37
|
+
}, undefined, tailwind_variants_dist_config_js.TVConfig<{
|
|
38
|
+
variant: {
|
|
39
|
+
filled: {
|
|
40
|
+
leading: string[];
|
|
41
|
+
trailing: string[];
|
|
42
|
+
};
|
|
43
|
+
tonal: {
|
|
44
|
+
leading: string[];
|
|
45
|
+
trailing: string[];
|
|
46
|
+
};
|
|
47
|
+
outlined: {
|
|
48
|
+
leading: string[];
|
|
49
|
+
trailing: string[];
|
|
50
|
+
};
|
|
51
|
+
elevated: {
|
|
52
|
+
leading: string[];
|
|
53
|
+
trailing: string[];
|
|
54
|
+
};
|
|
55
|
+
text: {
|
|
56
|
+
leading: string[];
|
|
57
|
+
trailing: string[];
|
|
58
|
+
};
|
|
59
|
+
};
|
|
60
|
+
}, {
|
|
61
|
+
variant: {
|
|
62
|
+
filled: {
|
|
63
|
+
leading: string[];
|
|
64
|
+
trailing: string[];
|
|
65
|
+
};
|
|
66
|
+
tonal: {
|
|
67
|
+
leading: string[];
|
|
68
|
+
trailing: string[];
|
|
69
|
+
};
|
|
70
|
+
outlined: {
|
|
71
|
+
leading: string[];
|
|
72
|
+
trailing: string[];
|
|
73
|
+
};
|
|
74
|
+
elevated: {
|
|
75
|
+
leading: string[];
|
|
76
|
+
trailing: string[];
|
|
77
|
+
};
|
|
78
|
+
text: {
|
|
79
|
+
leading: string[];
|
|
80
|
+
trailing: string[];
|
|
81
|
+
};
|
|
82
|
+
};
|
|
83
|
+
}>, {
|
|
84
|
+
variant: {
|
|
85
|
+
filled: {
|
|
86
|
+
leading: string[];
|
|
87
|
+
trailing: string[];
|
|
88
|
+
};
|
|
89
|
+
tonal: {
|
|
90
|
+
leading: string[];
|
|
91
|
+
trailing: string[];
|
|
92
|
+
};
|
|
93
|
+
outlined: {
|
|
94
|
+
leading: string[];
|
|
95
|
+
trailing: string[];
|
|
96
|
+
};
|
|
97
|
+
elevated: {
|
|
98
|
+
leading: string[];
|
|
99
|
+
trailing: string[];
|
|
100
|
+
};
|
|
101
|
+
text: {
|
|
102
|
+
leading: string[];
|
|
103
|
+
trailing: string[];
|
|
104
|
+
};
|
|
105
|
+
};
|
|
106
|
+
}, {
|
|
107
|
+
group: string;
|
|
108
|
+
leading: string[];
|
|
109
|
+
trailing: string[];
|
|
110
|
+
chevron: string[];
|
|
111
|
+
popup: string[];
|
|
112
|
+
item: string[];
|
|
113
|
+
}, tailwind_variants.TVReturnType<{
|
|
114
|
+
variant: {
|
|
115
|
+
filled: {
|
|
116
|
+
leading: string[];
|
|
117
|
+
trailing: string[];
|
|
118
|
+
};
|
|
119
|
+
tonal: {
|
|
120
|
+
leading: string[];
|
|
121
|
+
trailing: string[];
|
|
122
|
+
};
|
|
123
|
+
outlined: {
|
|
124
|
+
leading: string[];
|
|
125
|
+
trailing: string[];
|
|
126
|
+
};
|
|
127
|
+
elevated: {
|
|
128
|
+
leading: string[];
|
|
129
|
+
trailing: string[];
|
|
130
|
+
};
|
|
131
|
+
text: {
|
|
132
|
+
leading: string[];
|
|
133
|
+
trailing: string[];
|
|
134
|
+
};
|
|
135
|
+
};
|
|
136
|
+
}, {
|
|
137
|
+
group: string;
|
|
138
|
+
leading: string[];
|
|
139
|
+
trailing: string[];
|
|
140
|
+
chevron: string[];
|
|
141
|
+
popup: string[];
|
|
142
|
+
item: string[];
|
|
143
|
+
}, undefined, tailwind_variants_dist_config_js.TVConfig<{
|
|
144
|
+
variant: {
|
|
145
|
+
filled: {
|
|
146
|
+
leading: string[];
|
|
147
|
+
trailing: string[];
|
|
148
|
+
};
|
|
149
|
+
tonal: {
|
|
150
|
+
leading: string[];
|
|
151
|
+
trailing: string[];
|
|
152
|
+
};
|
|
153
|
+
outlined: {
|
|
154
|
+
leading: string[];
|
|
155
|
+
trailing: string[];
|
|
156
|
+
};
|
|
157
|
+
elevated: {
|
|
158
|
+
leading: string[];
|
|
159
|
+
trailing: string[];
|
|
160
|
+
};
|
|
161
|
+
text: {
|
|
162
|
+
leading: string[];
|
|
163
|
+
trailing: string[];
|
|
164
|
+
};
|
|
165
|
+
};
|
|
166
|
+
}, {
|
|
167
|
+
variant: {
|
|
168
|
+
filled: {
|
|
169
|
+
leading: string[];
|
|
170
|
+
trailing: string[];
|
|
171
|
+
};
|
|
172
|
+
tonal: {
|
|
173
|
+
leading: string[];
|
|
174
|
+
trailing: string[];
|
|
175
|
+
};
|
|
176
|
+
outlined: {
|
|
177
|
+
leading: string[];
|
|
178
|
+
trailing: string[];
|
|
179
|
+
};
|
|
180
|
+
elevated: {
|
|
181
|
+
leading: string[];
|
|
182
|
+
trailing: string[];
|
|
183
|
+
};
|
|
184
|
+
text: {
|
|
185
|
+
leading: string[];
|
|
186
|
+
trailing: string[];
|
|
187
|
+
};
|
|
188
|
+
};
|
|
189
|
+
}>, unknown, unknown, undefined>>;
|
|
190
|
+
declare const SplitButton: {
|
|
191
|
+
Root: <Payload>(props: _base_ui_react.MenuRoot.Props<Payload>) => react.JSX.Element;
|
|
192
|
+
Group: react.ForwardRefExoticComponent<_m3_baseui_core.SplitButtonGroupOwnProps & react.HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
|
|
193
|
+
Leading: react.ForwardRefExoticComponent<_m3_baseui_core.SplitButtonLeadingOwnProps & react.ButtonHTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
|
|
194
|
+
Trailing: react.ForwardRefExoticComponent<_m3_baseui_core.SplitButtonTrailingOwnProps & Omit<Omit<_base_ui_react.MenuTriggerProps<unknown> & react.RefAttributes<HTMLElement>, "ref">, "color"> & react.RefAttributes<HTMLButtonElement>>;
|
|
195
|
+
Portal: react.ForwardRefExoticComponent<Omit<_base_ui_react.ContextMenuPortalProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
196
|
+
Positioner: react.ForwardRefExoticComponent<Omit<_base_ui_react.ContextMenuPositionerProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
197
|
+
Popup: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.ContextMenuPopupProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<unknown>>;
|
|
198
|
+
Item: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.ContextMenuItemProps, "ref"> & react.RefAttributes<HTMLElement>, "ref"> & react.RefAttributes<unknown>>;
|
|
199
|
+
};
|
|
200
|
+
|
|
201
|
+
export { SplitButton, splitButtonTv };
|
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { createSplitButton } from '@m3-baseui/core';
|
|
3
|
+
import { tv as tv$1 } from 'tailwind-variants';
|
|
4
|
+
|
|
5
|
+
// src/split-button.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/split-button.ts
|
|
35
|
+
var surface = [
|
|
36
|
+
"relative inline-flex items-center justify-center h-10 overflow-hidden cursor-pointer select-none border-0 outline-none",
|
|
37
|
+
"text-label-large",
|
|
38
|
+
"transition-[background-color,color,border-color] duration-200 ease-standard",
|
|
39
|
+
"before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100",
|
|
40
|
+
"hover:before:opacity-[var(--md-sys-state-hover)]",
|
|
41
|
+
"focus-visible:before:opacity-[var(--md-sys-state-focus)]",
|
|
42
|
+
"active:before:opacity-[var(--md-sys-state-pressed)]",
|
|
43
|
+
"data-[pressed]:before:opacity-[var(--md-sys-state-pressed)]",
|
|
44
|
+
"focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-secondary",
|
|
45
|
+
"disabled:pointer-events-none disabled:before:opacity-0",
|
|
46
|
+
"data-[disabled]:pointer-events-none data-[disabled]:before:opacity-0"
|
|
47
|
+
];
|
|
48
|
+
var VARIANT_FILLED = [
|
|
49
|
+
"bg-primary text-on-primary",
|
|
50
|
+
"disabled:bg-on-surface/12 disabled:text-on-surface/38",
|
|
51
|
+
"data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38"
|
|
52
|
+
];
|
|
53
|
+
var VARIANT_TONAL = [
|
|
54
|
+
"bg-secondary-container text-on-secondary-container",
|
|
55
|
+
"disabled:bg-on-surface/12 disabled:text-on-surface/38",
|
|
56
|
+
"data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38"
|
|
57
|
+
];
|
|
58
|
+
var VARIANT_OUTLINED = [
|
|
59
|
+
"bg-transparent text-primary border border-outline",
|
|
60
|
+
"disabled:text-on-surface/38 disabled:border-on-surface/12",
|
|
61
|
+
"data-[disabled]:text-on-surface/38 data-[disabled]:border-on-surface/12"
|
|
62
|
+
];
|
|
63
|
+
var VARIANT_ELEVATED = [
|
|
64
|
+
"bg-surface-container-low text-primary shadow-level1",
|
|
65
|
+
"disabled:bg-on-surface/12 disabled:text-on-surface/38 disabled:shadow-none",
|
|
66
|
+
"data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38 data-[disabled]:shadow-none"
|
|
67
|
+
];
|
|
68
|
+
var VARIANT_TEXT = [
|
|
69
|
+
"bg-transparent text-primary",
|
|
70
|
+
"disabled:text-on-surface/38",
|
|
71
|
+
"data-[disabled]:text-on-surface/38"
|
|
72
|
+
];
|
|
73
|
+
var splitButtonTv = tv({
|
|
74
|
+
slots: {
|
|
75
|
+
group: "inline-flex items-center gap-0.5",
|
|
76
|
+
// leading: outer (start) corner full, seam (end) corner reduced.
|
|
77
|
+
leading: [...surface, "gap-2 px-6 rounded-s-full rounded-e-small"],
|
|
78
|
+
// trailing: seam (start) corner reduced, outer (end) corner full.
|
|
79
|
+
trailing: [...surface, "group gap-1 px-3 rounded-s-small rounded-e-full"],
|
|
80
|
+
chevron: [
|
|
81
|
+
"inline-flex items-center justify-center shrink-0 [&>svg]:size-[18px]",
|
|
82
|
+
"transition-transform duration-200 ease-standard group-data-[popup-open]:rotate-180"
|
|
83
|
+
],
|
|
84
|
+
popup: [
|
|
85
|
+
"min-w-[112px] max-w-[280px] py-2",
|
|
86
|
+
"bg-surface-container text-on-surface rounded-extra-small shadow-level2",
|
|
87
|
+
"origin-[var(--transform-origin)] transition-[opacity,transform] duration-150 ease-standard",
|
|
88
|
+
"data-[starting-style]:opacity-0 data-[starting-style]:scale-95",
|
|
89
|
+
"data-[ending-style]:opacity-0",
|
|
90
|
+
"focus:outline-none"
|
|
91
|
+
],
|
|
92
|
+
item: [
|
|
93
|
+
"relative flex items-center gap-3 h-12 px-3 overflow-hidden cursor-pointer select-none outline-none",
|
|
94
|
+
"text-label-large text-on-surface",
|
|
95
|
+
"before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100",
|
|
96
|
+
"hover:before:opacity-[var(--md-sys-state-hover)]",
|
|
97
|
+
"data-[highlighted]:before:opacity-[var(--md-sys-state-hover)]",
|
|
98
|
+
"active:before:opacity-[var(--md-sys-state-pressed)]",
|
|
99
|
+
"data-[disabled]:text-on-surface/[0.38] data-[disabled]:before:opacity-0 data-[disabled]:pointer-events-none"
|
|
100
|
+
]
|
|
101
|
+
},
|
|
102
|
+
variants: {
|
|
103
|
+
variant: {
|
|
104
|
+
filled: { leading: VARIANT_FILLED, trailing: VARIANT_FILLED },
|
|
105
|
+
tonal: { leading: VARIANT_TONAL, trailing: VARIANT_TONAL },
|
|
106
|
+
outlined: { leading: VARIANT_OUTLINED, trailing: VARIANT_OUTLINED },
|
|
107
|
+
elevated: { leading: VARIANT_ELEVATED, trailing: VARIANT_ELEVATED },
|
|
108
|
+
text: { leading: VARIANT_TEXT, trailing: VARIANT_TEXT }
|
|
109
|
+
}
|
|
110
|
+
},
|
|
111
|
+
defaultVariants: {
|
|
112
|
+
variant: "filled"
|
|
113
|
+
}
|
|
114
|
+
});
|
|
115
|
+
var SplitButton = createSplitButton({
|
|
116
|
+
group: splitButtonTv().group(),
|
|
117
|
+
leading: (variant) => splitButtonTv({ variant }).leading(),
|
|
118
|
+
trailing: (variant) => splitButtonTv({ variant }).trailing(),
|
|
119
|
+
chevron: splitButtonTv().chevron(),
|
|
120
|
+
popup: splitButtonTv().popup(),
|
|
121
|
+
item: splitButtonTv().item()
|
|
122
|
+
});
|
|
123
|
+
|
|
124
|
+
export { SplitButton, splitButtonTv };
|
|
125
|
+
//# sourceMappingURL=split-button.js.map
|
|
126
|
+
//# sourceMappingURL=split-button.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/tv.ts","../src/split-button.ts"],"names":["baseTv"],"mappings":"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","file":"split-button.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 * split-button.ts — tailwind-variants slots for the M3 SplitButton.\n *\n * Two 40dp surfaces joined by a 2dp seam: the leading primary-action button\n * keeps its outer (start) corner full and reduces the seam (end) corner; the\n * trailing menu trigger mirrors it. Both share the variant container color. The\n * trigger carries `group` so the default chevron can rotate via Base UI's\n * `data-[popup-open]`. The dropdown reuses the M3 menu surface. State layer is\n * the `::before` overlay; the pointer ripple is added by the factory. Same DOM\n * as the VE build.\n */\nimport { createSplitButton } from '@m3-baseui/core';\nimport { tv } from './tv';\n\n// Shared surface base for both the leading + trailing buttons.\nconst surface = [\n 'relative inline-flex items-center justify-center h-10 overflow-hidden cursor-pointer select-none border-0 outline-none',\n 'text-label-large',\n 'transition-[background-color,color,border-color] duration-200 ease-standard',\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 'focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-secondary',\n 'disabled:pointer-events-none disabled:before:opacity-0',\n 'data-[disabled]:pointer-events-none data-[disabled]:before:opacity-0',\n];\n\n// Per-variant container colors (identical on both surfaces). M3 disabled is\n// per-token (container on-surface/12, label on-surface/38), not a blanket fade.\nconst VARIANT_FILLED = [\n 'bg-primary text-on-primary',\n 'disabled:bg-on-surface/12 disabled:text-on-surface/38',\n 'data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38',\n];\nconst VARIANT_TONAL = [\n 'bg-secondary-container text-on-secondary-container',\n 'disabled:bg-on-surface/12 disabled:text-on-surface/38',\n 'data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38',\n];\nconst VARIANT_OUTLINED = [\n 'bg-transparent text-primary border border-outline',\n 'disabled:text-on-surface/38 disabled:border-on-surface/12',\n 'data-[disabled]:text-on-surface/38 data-[disabled]:border-on-surface/12',\n];\nconst VARIANT_ELEVATED = [\n 'bg-surface-container-low text-primary shadow-level1',\n 'disabled:bg-on-surface/12 disabled:text-on-surface/38 disabled:shadow-none',\n 'data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38 data-[disabled]:shadow-none',\n];\nconst VARIANT_TEXT = [\n 'bg-transparent text-primary',\n 'disabled:text-on-surface/38',\n 'data-[disabled]:text-on-surface/38',\n];\n\nexport const splitButtonTv = tv({\n slots: {\n group: 'inline-flex items-center gap-0.5',\n // leading: outer (start) corner full, seam (end) corner reduced.\n leading: [...surface, 'gap-2 px-6 rounded-s-full rounded-e-small'],\n // trailing: seam (start) corner reduced, outer (end) corner full.\n trailing: [...surface, 'group gap-1 px-3 rounded-s-small rounded-e-full'],\n chevron: [\n 'inline-flex items-center justify-center shrink-0 [&>svg]:size-[18px]',\n 'transition-transform duration-200 ease-standard group-data-[popup-open]:rotate-180',\n ],\n popup: [\n 'min-w-[112px] max-w-[280px] py-2',\n 'bg-surface-container text-on-surface rounded-extra-small shadow-level2',\n 'origin-[var(--transform-origin)] transition-[opacity,transform] duration-150 ease-standard',\n 'data-[starting-style]:opacity-0 data-[starting-style]:scale-95',\n 'data-[ending-style]:opacity-0',\n 'focus:outline-none',\n ],\n item: [\n 'relative flex items-center gap-3 h-12 px-3 overflow-hidden cursor-pointer select-none outline-none',\n 'text-label-large text-on-surface',\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 'data-[highlighted]:before:opacity-[var(--md-sys-state-hover)]',\n 'active:before:opacity-[var(--md-sys-state-pressed)]',\n 'data-[disabled]:text-on-surface/[0.38] data-[disabled]:before:opacity-0 data-[disabled]:pointer-events-none',\n ],\n },\n variants: {\n variant: {\n filled: { leading: VARIANT_FILLED, trailing: VARIANT_FILLED },\n tonal: { leading: VARIANT_TONAL, trailing: VARIANT_TONAL },\n outlined: { leading: VARIANT_OUTLINED, trailing: VARIANT_OUTLINED },\n elevated: { leading: VARIANT_ELEVATED, trailing: VARIANT_ELEVATED },\n text: { leading: VARIANT_TEXT, trailing: VARIANT_TEXT },\n },\n },\n defaultVariants: {\n variant: 'filled',\n },\n});\n\nexport const SplitButton = createSplitButton({\n group: splitButtonTv().group(),\n leading: (variant) => splitButtonTv({ variant }).leading(),\n trailing: (variant) => splitButtonTv({ variant }).trailing(),\n chevron: splitButtonTv().chevron(),\n popup: splitButtonTv().popup(),\n item: splitButtonTv().item(),\n});\n"]}
|
|
@@ -0,0 +1,144 @@
|
|
|
1
|
+
import * as _m3_baseui_core from '@m3-baseui/core';
|
|
2
|
+
export { TimePickerVariant, TimeValue } from '@m3-baseui/core';
|
|
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 timePickerTv: tailwind_variants.TVReturnType<{
|
|
7
|
+
[key: string]: {
|
|
8
|
+
[key: string]: tailwind_variants.ClassValue | {
|
|
9
|
+
root?: tailwind_variants.ClassValue;
|
|
10
|
+
header?: tailwind_variants.ClassValue;
|
|
11
|
+
dial?: tailwind_variants.ClassValue;
|
|
12
|
+
field?: tailwind_variants.ClassValue;
|
|
13
|
+
colon?: tailwind_variants.ClassValue;
|
|
14
|
+
periods?: tailwind_variants.ClassValue;
|
|
15
|
+
period?: tailwind_variants.ClassValue;
|
|
16
|
+
dialNumber?: tailwind_variants.ClassValue;
|
|
17
|
+
dialHand?: tailwind_variants.ClassValue;
|
|
18
|
+
dialCenter?: tailwind_variants.ClassValue;
|
|
19
|
+
inputs?: tailwind_variants.ClassValue;
|
|
20
|
+
inputBox?: tailwind_variants.ClassValue;
|
|
21
|
+
inputCaption?: tailwind_variants.ClassValue;
|
|
22
|
+
};
|
|
23
|
+
};
|
|
24
|
+
} | {
|
|
25
|
+
[x: string]: {
|
|
26
|
+
[x: string]: tailwind_variants.ClassValue | {
|
|
27
|
+
root?: tailwind_variants.ClassValue;
|
|
28
|
+
header?: tailwind_variants.ClassValue;
|
|
29
|
+
dial?: tailwind_variants.ClassValue;
|
|
30
|
+
field?: tailwind_variants.ClassValue;
|
|
31
|
+
colon?: tailwind_variants.ClassValue;
|
|
32
|
+
periods?: tailwind_variants.ClassValue;
|
|
33
|
+
period?: tailwind_variants.ClassValue;
|
|
34
|
+
dialNumber?: tailwind_variants.ClassValue;
|
|
35
|
+
dialHand?: tailwind_variants.ClassValue;
|
|
36
|
+
dialCenter?: tailwind_variants.ClassValue;
|
|
37
|
+
inputs?: tailwind_variants.ClassValue;
|
|
38
|
+
inputBox?: tailwind_variants.ClassValue;
|
|
39
|
+
inputCaption?: tailwind_variants.ClassValue;
|
|
40
|
+
};
|
|
41
|
+
};
|
|
42
|
+
} | {}, {
|
|
43
|
+
root: string[];
|
|
44
|
+
header: string[];
|
|
45
|
+
field: string[];
|
|
46
|
+
colon: string[];
|
|
47
|
+
periods: string[];
|
|
48
|
+
period: string[];
|
|
49
|
+
dial: string[];
|
|
50
|
+
dialNumber: string[];
|
|
51
|
+
dialHand: string[];
|
|
52
|
+
dialCenter: string[];
|
|
53
|
+
inputs: string[];
|
|
54
|
+
inputBox: string[];
|
|
55
|
+
inputCaption: string[];
|
|
56
|
+
}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
|
|
57
|
+
[key: string]: {
|
|
58
|
+
[key: string]: tailwind_variants.ClassValue | {
|
|
59
|
+
root?: tailwind_variants.ClassValue;
|
|
60
|
+
header?: tailwind_variants.ClassValue;
|
|
61
|
+
dial?: tailwind_variants.ClassValue;
|
|
62
|
+
field?: tailwind_variants.ClassValue;
|
|
63
|
+
colon?: tailwind_variants.ClassValue;
|
|
64
|
+
periods?: tailwind_variants.ClassValue;
|
|
65
|
+
period?: tailwind_variants.ClassValue;
|
|
66
|
+
dialNumber?: tailwind_variants.ClassValue;
|
|
67
|
+
dialHand?: tailwind_variants.ClassValue;
|
|
68
|
+
dialCenter?: tailwind_variants.ClassValue;
|
|
69
|
+
inputs?: tailwind_variants.ClassValue;
|
|
70
|
+
inputBox?: tailwind_variants.ClassValue;
|
|
71
|
+
inputCaption?: tailwind_variants.ClassValue;
|
|
72
|
+
};
|
|
73
|
+
};
|
|
74
|
+
} | {}>, {
|
|
75
|
+
[key: string]: {
|
|
76
|
+
[key: string]: tailwind_variants.ClassValue | {
|
|
77
|
+
root?: tailwind_variants.ClassValue;
|
|
78
|
+
header?: tailwind_variants.ClassValue;
|
|
79
|
+
dial?: tailwind_variants.ClassValue;
|
|
80
|
+
field?: tailwind_variants.ClassValue;
|
|
81
|
+
colon?: tailwind_variants.ClassValue;
|
|
82
|
+
periods?: tailwind_variants.ClassValue;
|
|
83
|
+
period?: tailwind_variants.ClassValue;
|
|
84
|
+
dialNumber?: tailwind_variants.ClassValue;
|
|
85
|
+
dialHand?: tailwind_variants.ClassValue;
|
|
86
|
+
dialCenter?: tailwind_variants.ClassValue;
|
|
87
|
+
inputs?: tailwind_variants.ClassValue;
|
|
88
|
+
inputBox?: tailwind_variants.ClassValue;
|
|
89
|
+
inputCaption?: tailwind_variants.ClassValue;
|
|
90
|
+
};
|
|
91
|
+
};
|
|
92
|
+
} | {}, {
|
|
93
|
+
root: string[];
|
|
94
|
+
header: string[];
|
|
95
|
+
field: string[];
|
|
96
|
+
colon: string[];
|
|
97
|
+
periods: string[];
|
|
98
|
+
period: string[];
|
|
99
|
+
dial: string[];
|
|
100
|
+
dialNumber: string[];
|
|
101
|
+
dialHand: string[];
|
|
102
|
+
dialCenter: string[];
|
|
103
|
+
inputs: string[];
|
|
104
|
+
inputBox: string[];
|
|
105
|
+
inputCaption: string[];
|
|
106
|
+
}, tailwind_variants.TVReturnType<unknown, {
|
|
107
|
+
root: string[];
|
|
108
|
+
header: string[];
|
|
109
|
+
field: string[];
|
|
110
|
+
colon: string[];
|
|
111
|
+
periods: string[];
|
|
112
|
+
period: string[];
|
|
113
|
+
dial: string[];
|
|
114
|
+
dialNumber: string[];
|
|
115
|
+
dialHand: string[];
|
|
116
|
+
dialCenter: string[];
|
|
117
|
+
inputs: string[];
|
|
118
|
+
inputBox: string[];
|
|
119
|
+
inputCaption: string[];
|
|
120
|
+
}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
|
|
121
|
+
[key: string]: {
|
|
122
|
+
[key: string]: tailwind_variants.ClassValue | {
|
|
123
|
+
root?: tailwind_variants.ClassValue;
|
|
124
|
+
header?: tailwind_variants.ClassValue;
|
|
125
|
+
dial?: tailwind_variants.ClassValue;
|
|
126
|
+
field?: tailwind_variants.ClassValue;
|
|
127
|
+
colon?: tailwind_variants.ClassValue;
|
|
128
|
+
periods?: tailwind_variants.ClassValue;
|
|
129
|
+
period?: tailwind_variants.ClassValue;
|
|
130
|
+
dialNumber?: tailwind_variants.ClassValue;
|
|
131
|
+
dialHand?: tailwind_variants.ClassValue;
|
|
132
|
+
dialCenter?: tailwind_variants.ClassValue;
|
|
133
|
+
inputs?: tailwind_variants.ClassValue;
|
|
134
|
+
inputBox?: tailwind_variants.ClassValue;
|
|
135
|
+
inputCaption?: tailwind_variants.ClassValue;
|
|
136
|
+
};
|
|
137
|
+
};
|
|
138
|
+
} | {}>, unknown, unknown, undefined>>;
|
|
139
|
+
declare const TimePicker: {
|
|
140
|
+
({ variant, format, value, defaultValue, onValueChange, className, }: _m3_baseui_core.TimePickerOwnProps): React.JSX.Element;
|
|
141
|
+
displayName: string;
|
|
142
|
+
};
|
|
143
|
+
|
|
144
|
+
export { TimePicker, timePickerTv };
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { createTimePicker } from '@m3-baseui/core';
|
|
3
|
+
import { tv as tv$1 } from 'tailwind-variants';
|
|
4
|
+
|
|
5
|
+
// src/time-picker.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/time-picker.ts
|
|
35
|
+
var timePickerTv = tv({
|
|
36
|
+
slots: {
|
|
37
|
+
root: ["inline-flex flex-col items-center gap-2 p-2 text-on-surface"],
|
|
38
|
+
header: ["flex items-center gap-2"],
|
|
39
|
+
field: [
|
|
40
|
+
"inline-grid place-items-center w-24 h-20 rounded-small overflow-hidden box-border",
|
|
41
|
+
"bg-surface-container-highest text-on-surface text-display-large cursor-pointer outline-none",
|
|
42
|
+
"border border-transparent transition-colors duration-100",
|
|
43
|
+
"data-[selected]:bg-primary-container data-[selected]:text-on-primary-container"
|
|
44
|
+
],
|
|
45
|
+
colon: ["text-display-large text-on-surface px-1 leading-none"],
|
|
46
|
+
periods: [
|
|
47
|
+
"inline-flex flex-col rounded-small overflow-hidden border border-outline self-stretch",
|
|
48
|
+
"m-0 p-0 min-w-0"
|
|
49
|
+
],
|
|
50
|
+
period: [
|
|
51
|
+
"flex-1 inline-flex items-center justify-center px-3 min-h-[38px] w-14",
|
|
52
|
+
"border-0 bg-transparent",
|
|
53
|
+
"text-title-medium text-on-surface-variant cursor-pointer outline-none",
|
|
54
|
+
"data-[selected]:bg-secondary-container data-[selected]:text-on-secondary-container",
|
|
55
|
+
"[&+&]:border-t [&+&]:border-outline"
|
|
56
|
+
],
|
|
57
|
+
dial: [
|
|
58
|
+
"relative size-[256px] my-2 p-0 min-w-0 border-0 rounded-full bg-surface-container-highest"
|
|
59
|
+
],
|
|
60
|
+
dialNumber: [
|
|
61
|
+
"absolute -translate-x-1/2 -translate-y-1/2 inline-grid place-items-center size-12 rounded-full",
|
|
62
|
+
"border-0 bg-transparent",
|
|
63
|
+
"text-body-large text-on-surface cursor-pointer outline-none select-none",
|
|
64
|
+
"data-[selected]:bg-primary data-[selected]:text-on-primary"
|
|
65
|
+
],
|
|
66
|
+
dialHand: [
|
|
67
|
+
"absolute left-1/2 top-[12%] h-[38%] w-0.5 origin-bottom bg-primary -translate-x-1/2 pointer-events-none"
|
|
68
|
+
],
|
|
69
|
+
dialCenter: [
|
|
70
|
+
"absolute left-1/2 top-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary pointer-events-none"
|
|
71
|
+
],
|
|
72
|
+
inputs: ["flex items-start gap-2"],
|
|
73
|
+
inputBox: [
|
|
74
|
+
"w-24 h-20 rounded-small box-border text-center",
|
|
75
|
+
"bg-surface-container-highest text-on-surface text-display-large outline-none",
|
|
76
|
+
"border border-outline focus:border-2 focus:border-primary",
|
|
77
|
+
"[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
|
|
78
|
+
],
|
|
79
|
+
inputCaption: ["block mt-1 text-body-small text-on-surface-variant"]
|
|
80
|
+
}
|
|
81
|
+
});
|
|
82
|
+
var tp = timePickerTv();
|
|
83
|
+
var TimePicker = createTimePicker(() => ({
|
|
84
|
+
root: tp.root(),
|
|
85
|
+
header: tp.header(),
|
|
86
|
+
field: tp.field(),
|
|
87
|
+
colon: tp.colon(),
|
|
88
|
+
periods: tp.periods(),
|
|
89
|
+
period: tp.period(),
|
|
90
|
+
dial: tp.dial(),
|
|
91
|
+
dialNumber: tp.dialNumber(),
|
|
92
|
+
dialHand: tp.dialHand(),
|
|
93
|
+
dialCenter: tp.dialCenter(),
|
|
94
|
+
inputs: tp.inputs(),
|
|
95
|
+
inputBox: tp.inputBox(),
|
|
96
|
+
inputCaption: tp.inputCaption()
|
|
97
|
+
}));
|
|
98
|
+
|
|
99
|
+
export { TimePicker, timePickerTv };
|
|
100
|
+
//# sourceMappingURL=time-picker.js.map
|
|
101
|
+
//# sourceMappingURL=time-picker.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/tv.ts","../src/time-picker.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;;;AC7BI,IAAM,eAAe,EAAA,CAAG;AAAA,EAC7B,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,CAAC,6DAA6D,CAAA;AAAA,IACpE,MAAA,EAAQ,CAAC,yBAAyB,CAAA;AAAA,IAClC,KAAA,EAAO;AAAA,MACL,mFAAA;AAAA,MACA,6FAAA;AAAA,MACA,0DAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO,CAAC,sDAAsD,CAAA;AAAA,IAC9D,OAAA,EAAS;AAAA,MACP,uFAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,MAAA,EAAQ;AAAA,MACN,uEAAA;AAAA,MACA,yBAAA;AAAA,MACA,uEAAA;AAAA,MACA,oFAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,IAAA,EAAM;AAAA,MACJ;AAAA,KACF;AAAA,IACA,UAAA,EAAY;AAAA,MACV,gGAAA;AAAA,MACA,yBAAA;AAAA,MACA,yEAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,QAAA,EAAU;AAAA,MACR;AAAA,KACF;AAAA,IACA,UAAA,EAAY;AAAA,MACV;AAAA,KACF;AAAA,IACA,MAAA,EAAQ,CAAC,wBAAwB,CAAA;AAAA,IACjC,QAAA,EAAU;AAAA,MACR,gDAAA;AAAA,MACA,8EAAA;AAAA,MACA,2DAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,YAAA,EAAc,CAAC,oDAAoD;AAAA;AAEvE,CAAC;AAED,IAAM,KAAK,YAAA,EAAa;AACjB,IAAM,UAAA,GAAa,iBAAiB,OAAO;AAAA,EAChD,IAAA,EAAM,GAAG,IAAA,EAAK;AAAA,EACd,MAAA,EAAQ,GAAG,MAAA,EAAO;AAAA,EAClB,KAAA,EAAO,GAAG,KAAA,EAAM;AAAA,EAChB,KAAA,EAAO,GAAG,KAAA,EAAM;AAAA,EAChB,OAAA,EAAS,GAAG,OAAA,EAAQ;AAAA,EACpB,MAAA,EAAQ,GAAG,MAAA,EAAO;AAAA,EAClB,IAAA,EAAM,GAAG,IAAA,EAAK;AAAA,EACd,UAAA,EAAY,GAAG,UAAA,EAAW;AAAA,EAC1B,QAAA,EAAU,GAAG,QAAA,EAAS;AAAA,EACtB,UAAA,EAAY,GAAG,UAAA,EAAW;AAAA,EAC1B,MAAA,EAAQ,GAAG,MAAA,EAAO;AAAA,EAClB,QAAA,EAAU,GAAG,QAAA,EAAS;AAAA,EACtB,YAAA,EAAc,GAAG,YAAA;AACnB,CAAA,CAAE","file":"time-picker.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 * time-picker.ts — Tailwind classes for the M3 Time picker (dial + input).\n *\n * The header time fields are surface-container-highest blocks (display-large)\n * that fill with primary-container when active; the AM/PM toggle fills with\n * secondary-container. The dial is a surface-container-highest face whose\n * selected number fills with primary and is reached by a primary hand. Same DOM\n * + data-* as the VE build.\n */\nimport { createTimePicker } from '@m3-baseui/core';\nimport { tv } from './tv';\n\nexport type { TimePickerVariant, TimeValue } from '@m3-baseui/core';\n\nexport const timePickerTv = tv({\n slots: {\n root: ['inline-flex flex-col items-center gap-2 p-2 text-on-surface'],\n header: ['flex items-center gap-2'],\n field: [\n 'inline-grid place-items-center w-24 h-20 rounded-small overflow-hidden box-border',\n 'bg-surface-container-highest text-on-surface text-display-large cursor-pointer outline-none',\n 'border border-transparent transition-colors duration-100',\n 'data-[selected]:bg-primary-container data-[selected]:text-on-primary-container',\n ],\n colon: ['text-display-large text-on-surface px-1 leading-none'],\n periods: [\n 'inline-flex flex-col rounded-small overflow-hidden border border-outline self-stretch',\n 'm-0 p-0 min-w-0',\n ],\n period: [\n 'flex-1 inline-flex items-center justify-center px-3 min-h-[38px] w-14',\n 'border-0 bg-transparent',\n 'text-title-medium text-on-surface-variant cursor-pointer outline-none',\n 'data-[selected]:bg-secondary-container data-[selected]:text-on-secondary-container',\n '[&+&]:border-t [&+&]:border-outline',\n ],\n dial: [\n 'relative size-[256px] my-2 p-0 min-w-0 border-0 rounded-full bg-surface-container-highest',\n ],\n dialNumber: [\n 'absolute -translate-x-1/2 -translate-y-1/2 inline-grid place-items-center size-12 rounded-full',\n 'border-0 bg-transparent',\n 'text-body-large text-on-surface cursor-pointer outline-none select-none',\n 'data-[selected]:bg-primary data-[selected]:text-on-primary',\n ],\n dialHand: [\n 'absolute left-1/2 top-[12%] h-[38%] w-0.5 origin-bottom bg-primary -translate-x-1/2 pointer-events-none',\n ],\n dialCenter: [\n 'absolute left-1/2 top-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary pointer-events-none',\n ],\n inputs: ['flex items-start gap-2'],\n inputBox: [\n 'w-24 h-20 rounded-small box-border text-center',\n 'bg-surface-container-highest text-on-surface text-display-large outline-none',\n 'border border-outline focus:border-2 focus:border-primary',\n '[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',\n ],\n inputCaption: ['block mt-1 text-body-small text-on-surface-variant'],\n },\n});\n\nconst tp = timePickerTv();\nexport const TimePicker = createTimePicker(() => ({\n root: tp.root(),\n header: tp.header(),\n field: tp.field(),\n colon: tp.colon(),\n periods: tp.periods(),\n period: tp.period(),\n dial: tp.dial(),\n dialNumber: tp.dialNumber(),\n dialHand: tp.dialHand(),\n dialCenter: tp.dialCenter(),\n inputs: tp.inputs(),\n inputBox: tp.inputBox(),\n inputCaption: tp.inputCaption(),\n}));\n"]}
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import * as _m3_baseui_core from '@m3-baseui/core';
|
|
3
|
+
export { ToolbarOrientation, ToolbarProps, ToolbarVariant } 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 toolbarTv: tailwind_variants.TVReturnType<{
|
|
8
|
+
variant: {
|
|
9
|
+
standard: string;
|
|
10
|
+
vibrant: string;
|
|
11
|
+
};
|
|
12
|
+
orientation: {
|
|
13
|
+
horizontal: string;
|
|
14
|
+
vertical: string;
|
|
15
|
+
};
|
|
16
|
+
}, undefined, "inline-flex items-center justify-center gap-1 box-border rounded-full shadow-level3 [&_svg]:size-6", tailwind_variants_dist_config_js.TVConfig<{
|
|
17
|
+
variant: {
|
|
18
|
+
standard: string;
|
|
19
|
+
vibrant: string;
|
|
20
|
+
};
|
|
21
|
+
orientation: {
|
|
22
|
+
horizontal: string;
|
|
23
|
+
vertical: string;
|
|
24
|
+
};
|
|
25
|
+
}, {
|
|
26
|
+
variant: {
|
|
27
|
+
standard: string;
|
|
28
|
+
vibrant: string;
|
|
29
|
+
};
|
|
30
|
+
orientation: {
|
|
31
|
+
horizontal: string;
|
|
32
|
+
vertical: string;
|
|
33
|
+
};
|
|
34
|
+
}>, {
|
|
35
|
+
variant: {
|
|
36
|
+
standard: string;
|
|
37
|
+
vibrant: string;
|
|
38
|
+
};
|
|
39
|
+
orientation: {
|
|
40
|
+
horizontal: string;
|
|
41
|
+
vertical: string;
|
|
42
|
+
};
|
|
43
|
+
}, undefined, tailwind_variants.TVReturnType<{
|
|
44
|
+
variant: {
|
|
45
|
+
standard: string;
|
|
46
|
+
vibrant: string;
|
|
47
|
+
};
|
|
48
|
+
orientation: {
|
|
49
|
+
horizontal: string;
|
|
50
|
+
vertical: string;
|
|
51
|
+
};
|
|
52
|
+
}, undefined, "inline-flex items-center justify-center gap-1 box-border rounded-full shadow-level3 [&_svg]:size-6", tailwind_variants_dist_config_js.TVConfig<{
|
|
53
|
+
variant: {
|
|
54
|
+
standard: string;
|
|
55
|
+
vibrant: string;
|
|
56
|
+
};
|
|
57
|
+
orientation: {
|
|
58
|
+
horizontal: string;
|
|
59
|
+
vertical: string;
|
|
60
|
+
};
|
|
61
|
+
}, {
|
|
62
|
+
variant: {
|
|
63
|
+
standard: string;
|
|
64
|
+
vibrant: string;
|
|
65
|
+
};
|
|
66
|
+
orientation: {
|
|
67
|
+
horizontal: string;
|
|
68
|
+
vertical: string;
|
|
69
|
+
};
|
|
70
|
+
}>, unknown, unknown, undefined>>;
|
|
71
|
+
declare const Toolbar: react.ForwardRefExoticComponent<_m3_baseui_core.ToolbarOwnProps & react.HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
|
|
72
|
+
|
|
73
|
+
export { Toolbar, toolbarTv };
|