@m3-baseui/react-tailwind 1.3.0 → 2.0.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/{badge.js → components/badge/index.js} +4 -4
- package/dist/components/badge/index.js.map +1 -0
- package/dist/{bottom-app-bar.d.ts → components/bottom-app-bar/index.d.ts} +22 -21
- package/dist/{bottom-app-bar.js → components/bottom-app-bar/index.js} +4 -4
- package/dist/components/bottom-app-bar/index.js.map +1 -0
- package/dist/{bottom-sheet.d.ts → components/bottom-sheet/index.d.ts} +37 -36
- package/dist/{bottom-sheet.js → components/bottom-sheet/index.js} +4 -4
- package/dist/components/bottom-sheet/index.js.map +1 -0
- package/dist/{button.js → components/button/index.js} +3 -3
- package/dist/components/button/index.js.map +1 -0
- package/dist/{button-group.js → components/button-group/index.js} +4 -4
- package/dist/components/button-group/index.js.map +1 -0
- package/dist/{card.js → components/card/index.js} +4 -4
- package/dist/components/card/index.js.map +1 -0
- package/dist/{carousel.js → components/carousel/index.js} +4 -4
- package/dist/components/carousel/index.js.map +1 -0
- package/dist/{checkbox.d.ts → components/checkbox/index.d.ts} +22 -21
- package/dist/{checkbox.js → components/checkbox/index.js} +3 -3
- package/dist/components/checkbox/index.js.map +1 -0
- package/dist/{chip.js → components/chip/index.js} +3 -3
- package/dist/components/chip/index.js.map +1 -0
- package/dist/components/date-picker/index.d.ts +189 -0
- package/dist/{date-picker.js → components/date-picker/index.js} +4 -4
- package/dist/components/date-picker/index.js.map +1 -0
- package/dist/components/dialog/index.d.ts +116 -0
- package/dist/components/dialog/index.js +103 -0
- package/dist/components/dialog/index.js.map +1 -0
- package/dist/{divider.js → components/divider/index.js} +3 -3
- package/dist/components/divider/index.js.map +1 -0
- package/dist/{fab.d.ts → components/fab/index.d.ts} +29 -15
- package/dist/components/fab/index.js +79 -0
- package/dist/components/fab/index.js.map +1 -0
- package/dist/{fab-menu.d.ts → components/fab-menu/index.d.ts} +0 -21
- package/dist/{fab-menu.js → components/fab-menu/index.js} +49 -18
- package/dist/components/fab-menu/index.js.map +1 -0
- package/dist/{icon-button.js → components/icon-button/index.js} +3 -3
- package/dist/components/icon-button/index.js.map +1 -0
- package/dist/components/item/index.d.ts +95 -0
- package/dist/{item.js → components/item/index.js} +12 -6
- package/dist/components/item/index.js.map +1 -0
- package/dist/{list.d.ts → components/list/index.d.ts} +4 -4
- package/dist/{list.js → components/list/index.js} +12 -6
- package/dist/components/list/index.js.map +1 -0
- package/dist/{loading-indicator.js → components/loading-indicator/index.js} +4 -4
- package/dist/components/loading-indicator/index.js.map +1 -0
- package/dist/{menu.d.ts → components/menu/index.d.ts} +61 -60
- package/dist/components/menu/index.js +179 -0
- package/dist/components/menu/index.js.map +1 -0
- package/dist/components/navigation-bar/index.d.ts +92 -0
- package/dist/{navigation-bar.js → components/navigation-bar/index.js} +3 -3
- package/dist/components/navigation-bar/index.js.map +1 -0
- package/dist/{navigation-drawer.js → components/navigation-drawer/index.js} +4 -4
- package/dist/components/navigation-drawer/index.js.map +1 -0
- package/dist/components/navigation-rail/index.d.ts +102 -0
- package/dist/{navigation-rail.js → components/navigation-rail/index.js} +4 -4
- package/dist/components/navigation-rail/index.js.map +1 -0
- package/dist/components/progress/index.d.ts +127 -0
- package/dist/components/progress/index.js +101 -0
- package/dist/components/progress/index.js.map +1 -0
- package/dist/{radio.d.ts → components/radio/index.d.ts} +17 -16
- package/dist/{radio.js → components/radio/index.js} +3 -3
- package/dist/components/radio/index.js.map +1 -0
- package/dist/{search.d.ts → components/search/index.d.ts} +62 -61
- package/dist/{search.js → components/search/index.js} +4 -4
- package/dist/components/search/index.js.map +1 -0
- package/dist/{segmented-button.d.ts → components/segmented-button/index.d.ts} +32 -31
- package/dist/{segmented-button.js → components/segmented-button/index.js} +4 -4
- package/dist/components/segmented-button/index.js.map +1 -0
- package/dist/components/select/index.d.ts +253 -0
- package/dist/components/select/index.js +271 -0
- package/dist/components/select/index.js.map +1 -0
- package/dist/{side-sheet.js → components/side-sheet/index.js} +4 -4
- package/dist/components/side-sheet/index.js.map +1 -0
- package/dist/{slider.d.ts → components/slider/index.d.ts} +52 -51
- package/dist/{slider.js → components/slider/index.js} +4 -4
- package/dist/components/slider/index.js.map +1 -0
- package/dist/{snackbar.d.ts → components/snackbar/index.d.ts} +42 -41
- package/dist/{snackbar.js → components/snackbar/index.js} +9 -4
- package/dist/components/snackbar/index.js.map +1 -0
- package/dist/{split-button.js → components/split-button/index.js} +4 -4
- package/dist/components/split-button/index.js.map +1 -0
- package/dist/components/switch/index.d.ts +73 -0
- package/dist/{switch.js → components/switch/index.js} +3 -3
- package/dist/components/switch/index.js.map +1 -0
- package/dist/{tabs.js → components/tabs/index.js} +4 -4
- package/dist/components/tabs/index.js.map +1 -0
- package/dist/{textfield.d.ts → components/textfield/index.d.ts} +7 -1
- package/dist/{textfield.js → components/textfield/index.js} +35 -13
- package/dist/components/textfield/index.js.map +1 -0
- package/dist/components/time-picker/index.d.ts +153 -0
- package/dist/{time-picker.js → components/time-picker/index.js} +28 -13
- package/dist/components/time-picker/index.js.map +1 -0
- package/dist/{toolbar.js → components/toolbar/index.js} +4 -4
- package/dist/components/toolbar/index.js.map +1 -0
- package/dist/components/tooltip/index.d.ts +143 -0
- package/dist/components/tooltip/index.js +80 -0
- package/dist/components/tooltip/index.js.map +1 -0
- package/dist/{top-app-bar.js → components/top-app-bar/index.js} +4 -4
- package/dist/components/top-app-bar/index.js.map +1 -0
- package/dist/index.d.ts +40 -39
- package/dist/index.js +489 -129
- package/dist/index.js.map +1 -1
- package/package.json +151 -151
- package/styles/preset.css +75 -7
- package/styles/theme.css +2 -0
- package/styles/tokens.css +2 -0
- package/dist/badge.js.map +0 -1
- package/dist/bottom-app-bar.js.map +0 -1
- package/dist/bottom-sheet.js.map +0 -1
- package/dist/button-group.js.map +0 -1
- package/dist/button.js.map +0 -1
- package/dist/card.js.map +0 -1
- package/dist/carousel.js.map +0 -1
- package/dist/checkbox.js.map +0 -1
- package/dist/chip.js.map +0 -1
- package/dist/date-picker.d.ts +0 -188
- package/dist/date-picker.js.map +0 -1
- package/dist/dialog.d.ts +0 -86
- package/dist/dialog.js +0 -68
- package/dist/dialog.js.map +0 -1
- package/dist/divider.js.map +0 -1
- package/dist/fab-menu.js.map +0 -1
- package/dist/fab.js +0 -47
- package/dist/fab.js.map +0 -1
- package/dist/icon-button.js.map +0 -1
- package/dist/item.d.ts +0 -94
- package/dist/item.js.map +0 -1
- package/dist/list.js.map +0 -1
- package/dist/loading-indicator.js.map +0 -1
- package/dist/menu.js +0 -114
- package/dist/menu.js.map +0 -1
- package/dist/navigation-bar.d.ts +0 -91
- package/dist/navigation-bar.js.map +0 -1
- package/dist/navigation-drawer.js.map +0 -1
- package/dist/navigation-rail.d.ts +0 -101
- package/dist/navigation-rail.js.map +0 -1
- package/dist/progress.d.ts +0 -118
- package/dist/progress.js +0 -41
- package/dist/progress.js.map +0 -1
- package/dist/radio.js.map +0 -1
- package/dist/search.js.map +0 -1
- package/dist/segmented-button.js.map +0 -1
- package/dist/select.d.ts +0 -125
- package/dist/select.js +0 -99
- package/dist/select.js.map +0 -1
- package/dist/side-sheet.js.map +0 -1
- package/dist/slider.js.map +0 -1
- package/dist/snackbar.js.map +0 -1
- package/dist/split-button.js.map +0 -1
- package/dist/switch.d.ts +0 -72
- package/dist/switch.js.map +0 -1
- package/dist/tabs.js.map +0 -1
- package/dist/textfield.js.map +0 -1
- package/dist/time-picker.d.ts +0 -144
- package/dist/time-picker.js.map +0 -1
- package/dist/toolbar.js.map +0 -1
- package/dist/tooltip.d.ts +0 -61
- package/dist/tooltip.js +0 -52
- package/dist/tooltip.js.map +0 -1
- package/dist/top-app-bar.js.map +0 -1
- /package/dist/{badge.d.ts → components/badge/index.d.ts} +0 -0
- /package/dist/{button.d.ts → components/button/index.d.ts} +0 -0
- /package/dist/{button-group.d.ts → components/button-group/index.d.ts} +0 -0
- /package/dist/{card.d.ts → components/card/index.d.ts} +0 -0
- /package/dist/{carousel.d.ts → components/carousel/index.d.ts} +0 -0
- /package/dist/{chip.d.ts → components/chip/index.d.ts} +0 -0
- /package/dist/{divider.d.ts → components/divider/index.d.ts} +0 -0
- /package/dist/{icon-button.d.ts → components/icon-button/index.d.ts} +0 -0
- /package/dist/{loading-indicator.d.ts → components/loading-indicator/index.d.ts} +0 -0
- /package/dist/{navigation-drawer.d.ts → components/navigation-drawer/index.d.ts} +0 -0
- /package/dist/{side-sheet.d.ts → components/side-sheet/index.d.ts} +0 -0
- /package/dist/{split-button.d.ts → components/split-button/index.d.ts} +0 -0
- /package/dist/{tabs.d.ts → components/tabs/index.d.ts} +0 -0
- /package/dist/{toolbar.d.ts → components/toolbar/index.d.ts} +0 -0
- /package/dist/{top-app-bar.d.ts → components/top-app-bar/index.d.ts} +0 -0
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { createBadge } from '@m3-baseui/core';
|
|
3
3
|
import { tv as tv$1 } from 'tailwind-variants';
|
|
4
4
|
|
|
5
|
-
// src/badge.ts
|
|
5
|
+
// src/components/badge/badge.ts
|
|
6
6
|
var TYPESCALE = [
|
|
7
7
|
"display-large",
|
|
8
8
|
"display-medium",
|
|
@@ -31,7 +31,7 @@ var tv = (options, config) => tv$1(options, {
|
|
|
31
31
|
}
|
|
32
32
|
});
|
|
33
33
|
|
|
34
|
-
// src/badge.ts
|
|
34
|
+
// src/components/badge/badge.ts
|
|
35
35
|
var badgeTv = tv({
|
|
36
36
|
base: "pointer-events-none select-none inline-flex items-center justify-center bg-error text-on-error",
|
|
37
37
|
variants: {
|
|
@@ -46,5 +46,5 @@ var Badge = createBadge({
|
|
|
46
46
|
});
|
|
47
47
|
|
|
48
48
|
export { Badge, badgeTv };
|
|
49
|
-
//# sourceMappingURL=
|
|
50
|
-
//# sourceMappingURL=
|
|
49
|
+
//# sourceMappingURL=index.js.map
|
|
50
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/tv.ts","../../../src/components/badge/badge.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;;;ACjCI,IAAM,UAAU,EAAA,CAAG;AAAA,EACxB,IAAA,EAAM,gGAAA;AAAA,EACN,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,KAAA,EAAO,8CAAA;AAAA,MACP,KAAA,EACE;AAAA;AACJ;AAEJ,CAAC;AAEM,IAAM,QAAQ,WAAA,CAAY;AAAA,EAC/B,IAAA,EAAM,CAAC,EAAE,IAAA,OAAW,OAAA,CAAQ,EAAE,MAAM;AACtC,CAAC","file":"index.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 * badge.ts — tailwind-variants slots for the M3 Badge.\n *\n * error/on-error marker that anchors to the top-right of a positioned parent.\n * `small` is a 6dp dot; `large` is a 16dp pill carrying a `label-small` number.\n * Same DOM + `data-size` as the VE build.\n */\nimport { createBadge } from '@m3-baseui/core';\nimport { tv } from '../../tv';\n\nexport const badgeTv = tv({\n base: 'pointer-events-none select-none inline-flex items-center justify-center bg-error text-on-error',\n variants: {\n size: {\n small: 'absolute top-1 right-1 size-1.5 rounded-full',\n large:\n 'absolute -top-1 -right-1 min-w-4 h-4 px-1 rounded-full text-label-small leading-none tabular-nums',\n },\n },\n});\n\nexport const Badge = createBadge({\n root: ({ size }) => badgeTv({ size }),\n});\nexport type { BadgeProps, BadgeSize } from '@m3-baseui/core';\n"]}
|
|
@@ -1,23 +1,24 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import * as _m3_baseui_core from '@m3-baseui/core';
|
|
3
3
|
export { BottomAppBarProps } from '@m3-baseui/core';
|
|
4
|
-
import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config.js';
|
|
5
4
|
import * as tailwind_variants from 'tailwind-variants';
|
|
5
|
+
import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config.js';
|
|
6
|
+
import * as tailwind_merge from 'tailwind-merge';
|
|
6
7
|
|
|
7
8
|
declare const bottomAppBarTv: tailwind_variants.TVReturnType<{
|
|
8
9
|
[key: string]: {
|
|
9
|
-
[key: string]:
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
10
|
+
[key: string]: tailwind_merge.ClassNameValue | {
|
|
11
|
+
fab?: tailwind_merge.ClassNameValue;
|
|
12
|
+
root?: tailwind_merge.ClassNameValue;
|
|
13
|
+
actions?: tailwind_merge.ClassNameValue;
|
|
13
14
|
};
|
|
14
15
|
};
|
|
15
16
|
} | {
|
|
16
17
|
[x: string]: {
|
|
17
|
-
[x: string]:
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
18
|
+
[x: string]: tailwind_merge.ClassNameValue | {
|
|
19
|
+
fab?: tailwind_merge.ClassNameValue;
|
|
20
|
+
root?: tailwind_merge.ClassNameValue;
|
|
21
|
+
actions?: tailwind_merge.ClassNameValue;
|
|
21
22
|
};
|
|
22
23
|
};
|
|
23
24
|
} | {}, {
|
|
@@ -26,18 +27,18 @@ declare const bottomAppBarTv: tailwind_variants.TVReturnType<{
|
|
|
26
27
|
fab: string;
|
|
27
28
|
}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
|
|
28
29
|
[key: string]: {
|
|
29
|
-
[key: string]:
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
30
|
+
[key: string]: tailwind_merge.ClassNameValue | {
|
|
31
|
+
fab?: tailwind_merge.ClassNameValue;
|
|
32
|
+
root?: tailwind_merge.ClassNameValue;
|
|
33
|
+
actions?: tailwind_merge.ClassNameValue;
|
|
33
34
|
};
|
|
34
35
|
};
|
|
35
36
|
} | {}>, {
|
|
36
37
|
[key: string]: {
|
|
37
|
-
[key: string]:
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
38
|
+
[key: string]: tailwind_merge.ClassNameValue | {
|
|
39
|
+
fab?: tailwind_merge.ClassNameValue;
|
|
40
|
+
root?: tailwind_merge.ClassNameValue;
|
|
41
|
+
actions?: tailwind_merge.ClassNameValue;
|
|
41
42
|
};
|
|
42
43
|
};
|
|
43
44
|
} | {}, {
|
|
@@ -50,10 +51,10 @@ declare const bottomAppBarTv: tailwind_variants.TVReturnType<{
|
|
|
50
51
|
fab: string;
|
|
51
52
|
}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
|
|
52
53
|
[key: string]: {
|
|
53
|
-
[key: string]:
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
54
|
+
[key: string]: tailwind_merge.ClassNameValue | {
|
|
55
|
+
fab?: tailwind_merge.ClassNameValue;
|
|
56
|
+
root?: tailwind_merge.ClassNameValue;
|
|
57
|
+
actions?: tailwind_merge.ClassNameValue;
|
|
57
58
|
};
|
|
58
59
|
};
|
|
59
60
|
} | {}>, unknown, unknown, undefined>>;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { createBottomAppBar } from '@m3-baseui/core';
|
|
3
3
|
import { tv as tv$1 } from 'tailwind-variants';
|
|
4
4
|
|
|
5
|
-
// src/bottom-app-bar.ts
|
|
5
|
+
// src/components/bottom-app-bar/bottom-app-bar.ts
|
|
6
6
|
var TYPESCALE = [
|
|
7
7
|
"display-large",
|
|
8
8
|
"display-medium",
|
|
@@ -31,7 +31,7 @@ var tv = (options, config) => tv$1(options, {
|
|
|
31
31
|
}
|
|
32
32
|
});
|
|
33
33
|
|
|
34
|
-
// src/bottom-app-bar.ts
|
|
34
|
+
// src/components/bottom-app-bar/bottom-app-bar.ts
|
|
35
35
|
var bottomAppBarTv = tv({
|
|
36
36
|
slots: {
|
|
37
37
|
root: "flex items-center justify-between w-full box-border h-20 px-1 bg-surface-container text-on-surface-variant",
|
|
@@ -47,5 +47,5 @@ var BottomAppBar = createBottomAppBar({
|
|
|
47
47
|
});
|
|
48
48
|
|
|
49
49
|
export { BottomAppBar, bottomAppBarTv };
|
|
50
|
-
//# sourceMappingURL=
|
|
51
|
-
//# sourceMappingURL=
|
|
50
|
+
//# sourceMappingURL=index.js.map
|
|
51
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/tv.ts","../../../src/components/bottom-app-bar/bottom-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;;;AClCI,IAAM,iBAAiB,EAAA,CAAG;AAAA,EAC/B,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,4GAAA;AAAA,IACN,OAAA,EAAS,6CAAA;AAAA,IACT,GAAA,EAAK;AAAA;AAET,CAAC;AAED,IAAM,IAAI,cAAA,EAAe;AAClB,IAAM,eAAe,kBAAA,CAAmB;AAAA,EAC7C,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,OAAA,EAAS,EAAE,OAAA,EAAQ;AAAA,EACnB,GAAA,EAAK,EAAE,GAAA;AACT,CAAC","file":"index.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 * bottom-app-bar.ts — tailwind-variants slots for the M3 BottomAppBar.\n *\n * An 80dp `surface-container` `role=\"toolbar\"`: leading action icons + an\n * optional trailing FAB. Same DOM as the VE build.\n */\nimport { createBottomAppBar } from '@m3-baseui/core';\nimport { tv } from '../../tv';\n\nexport const bottomAppBarTv = tv({\n slots: {\n root: 'flex items-center justify-between w-full box-border h-20 px-1 bg-surface-container text-on-surface-variant',\n actions: 'flex items-center gap-1 pl-2 [&_svg]:size-6',\n fab: 'flex items-center pr-3',\n },\n});\n\nconst s = bottomAppBarTv();\nexport const BottomAppBar = createBottomAppBar({\n root: s.root(),\n actions: s.actions(),\n fab: s.fab(),\n});\nexport type { BottomAppBarProps } from '@m3-baseui/core';\n"]}
|
|
@@ -2,29 +2,30 @@ import * as react from 'react';
|
|
|
2
2
|
import * as _base_ui_react from '@base-ui/react';
|
|
3
3
|
import * as _m3_baseui_core from '@m3-baseui/core';
|
|
4
4
|
export { BottomSheetVariant } from '@m3-baseui/core';
|
|
5
|
-
import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config.js';
|
|
6
5
|
import * as tailwind_variants from 'tailwind-variants';
|
|
6
|
+
import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config.js';
|
|
7
|
+
import * as tailwind_merge from 'tailwind-merge';
|
|
7
8
|
|
|
8
9
|
declare const bottomSheetTv: tailwind_variants.TVReturnType<{
|
|
9
10
|
[key: string]: {
|
|
10
|
-
[key: string]:
|
|
11
|
-
title?:
|
|
12
|
-
popup?:
|
|
13
|
-
handle?:
|
|
14
|
-
description?:
|
|
15
|
-
|
|
16
|
-
|
|
11
|
+
[key: string]: tailwind_merge.ClassNameValue | {
|
|
12
|
+
title?: tailwind_merge.ClassNameValue;
|
|
13
|
+
popup?: tailwind_merge.ClassNameValue;
|
|
14
|
+
handle?: tailwind_merge.ClassNameValue;
|
|
15
|
+
description?: tailwind_merge.ClassNameValue;
|
|
16
|
+
backdrop?: tailwind_merge.ClassNameValue;
|
|
17
|
+
viewport?: tailwind_merge.ClassNameValue;
|
|
17
18
|
};
|
|
18
19
|
};
|
|
19
20
|
} | {
|
|
20
21
|
[x: string]: {
|
|
21
|
-
[x: string]:
|
|
22
|
-
title?:
|
|
23
|
-
popup?:
|
|
24
|
-
handle?:
|
|
25
|
-
description?:
|
|
26
|
-
|
|
27
|
-
|
|
22
|
+
[x: string]: tailwind_merge.ClassNameValue | {
|
|
23
|
+
title?: tailwind_merge.ClassNameValue;
|
|
24
|
+
popup?: tailwind_merge.ClassNameValue;
|
|
25
|
+
handle?: tailwind_merge.ClassNameValue;
|
|
26
|
+
description?: tailwind_merge.ClassNameValue;
|
|
27
|
+
backdrop?: tailwind_merge.ClassNameValue;
|
|
28
|
+
viewport?: tailwind_merge.ClassNameValue;
|
|
28
29
|
};
|
|
29
30
|
};
|
|
30
31
|
} | {}, {
|
|
@@ -36,24 +37,24 @@ declare const bottomSheetTv: tailwind_variants.TVReturnType<{
|
|
|
36
37
|
description: string[];
|
|
37
38
|
}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
|
|
38
39
|
[key: string]: {
|
|
39
|
-
[key: string]:
|
|
40
|
-
title?:
|
|
41
|
-
popup?:
|
|
42
|
-
handle?:
|
|
43
|
-
description?:
|
|
44
|
-
|
|
45
|
-
|
|
40
|
+
[key: string]: tailwind_merge.ClassNameValue | {
|
|
41
|
+
title?: tailwind_merge.ClassNameValue;
|
|
42
|
+
popup?: tailwind_merge.ClassNameValue;
|
|
43
|
+
handle?: tailwind_merge.ClassNameValue;
|
|
44
|
+
description?: tailwind_merge.ClassNameValue;
|
|
45
|
+
backdrop?: tailwind_merge.ClassNameValue;
|
|
46
|
+
viewport?: tailwind_merge.ClassNameValue;
|
|
46
47
|
};
|
|
47
48
|
};
|
|
48
49
|
} | {}>, {
|
|
49
50
|
[key: string]: {
|
|
50
|
-
[key: string]:
|
|
51
|
-
title?:
|
|
52
|
-
popup?:
|
|
53
|
-
handle?:
|
|
54
|
-
description?:
|
|
55
|
-
|
|
56
|
-
|
|
51
|
+
[key: string]: tailwind_merge.ClassNameValue | {
|
|
52
|
+
title?: tailwind_merge.ClassNameValue;
|
|
53
|
+
popup?: tailwind_merge.ClassNameValue;
|
|
54
|
+
handle?: tailwind_merge.ClassNameValue;
|
|
55
|
+
description?: tailwind_merge.ClassNameValue;
|
|
56
|
+
backdrop?: tailwind_merge.ClassNameValue;
|
|
57
|
+
viewport?: tailwind_merge.ClassNameValue;
|
|
57
58
|
};
|
|
58
59
|
};
|
|
59
60
|
} | {}, {
|
|
@@ -72,13 +73,13 @@ declare const bottomSheetTv: tailwind_variants.TVReturnType<{
|
|
|
72
73
|
description: string[];
|
|
73
74
|
}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
|
|
74
75
|
[key: string]: {
|
|
75
|
-
[key: string]:
|
|
76
|
-
title?:
|
|
77
|
-
popup?:
|
|
78
|
-
handle?:
|
|
79
|
-
description?:
|
|
80
|
-
|
|
81
|
-
|
|
76
|
+
[key: string]: tailwind_merge.ClassNameValue | {
|
|
77
|
+
title?: tailwind_merge.ClassNameValue;
|
|
78
|
+
popup?: tailwind_merge.ClassNameValue;
|
|
79
|
+
handle?: tailwind_merge.ClassNameValue;
|
|
80
|
+
description?: tailwind_merge.ClassNameValue;
|
|
81
|
+
backdrop?: tailwind_merge.ClassNameValue;
|
|
82
|
+
viewport?: tailwind_merge.ClassNameValue;
|
|
82
83
|
};
|
|
83
84
|
};
|
|
84
85
|
} | {}>, unknown, unknown, undefined>>;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { createBottomSheet } from '@m3-baseui/core';
|
|
3
3
|
import { tv as tv$1 } from 'tailwind-variants';
|
|
4
4
|
|
|
5
|
-
// src/bottom-sheet.ts
|
|
5
|
+
// src/components/bottom-sheet/bottom-sheet.ts
|
|
6
6
|
var TYPESCALE = [
|
|
7
7
|
"display-large",
|
|
8
8
|
"display-medium",
|
|
@@ -31,7 +31,7 @@ var tv = (options, config) => tv$1(options, {
|
|
|
31
31
|
}
|
|
32
32
|
});
|
|
33
33
|
|
|
34
|
-
// src/bottom-sheet.ts
|
|
34
|
+
// src/components/bottom-sheet/bottom-sheet.ts
|
|
35
35
|
var bottomSheetTv = tv({
|
|
36
36
|
slots: {
|
|
37
37
|
backdrop: [
|
|
@@ -66,5 +66,5 @@ var BottomSheet = createBottomSheet({
|
|
|
66
66
|
});
|
|
67
67
|
|
|
68
68
|
export { BottomSheet, bottomSheetTv };
|
|
69
|
-
//# sourceMappingURL=
|
|
70
|
-
//# sourceMappingURL=
|
|
69
|
+
//# sourceMappingURL=index.js.map
|
|
70
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/tv.ts","../../../src/components/bottom-sheet/bottom-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;;;AC/BI,IAAM,gBAAgB,EAAA,CAAG;AAAA,EAC9B,KAAA,EAAO;AAAA,IACL,QAAA,EAAU;AAAA,MACR,gCAAA;AAAA,MACA,iDAAA;AAAA,MACA,gCAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,QAAA,EAAU,kDAAA;AAAA,IACV,KAAA,EAAO;AAAA,MACL,2DAAA;AAAA,MACA,4DAAA;AAAA,MACA,mFAAA;AAAA,MACA,8FAAA;AAAA,MACA,mDAAA;AAAA,MACA,4BAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,MAAA,EAAQ,0EAAA;AAAA,IACR,KAAA,EAAO,CAAC,gDAAgD,CAAA;AAAA,IACxD,WAAA,EAAa,CAAC,wDAAwD;AAAA;AAE1E,CAAC;AAED,IAAM,IAAI,aAAA,EAAc;AACjB,IAAM,cAAc,iBAAA,CAAkB;AAAA,EAC3C,QAAA,EAAU,EAAE,QAAA,EAAS;AAAA,EACrB,QAAA,EAAU,EAAE,QAAA,EAAS;AAAA,EACrB,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,EACf,MAAA,EAAQ,EAAE,MAAA,EAAO;AAAA,EACjB,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,EACf,WAAA,EAAa,EAAE,WAAA;AACjB,CAAC","file":"index.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 * bottom-sheet.ts — tailwind-variants slots for the M3 Bottom sheet.\n *\n * A `surface-container-low` surface docked to the bottom edge with extra-large\n * (28dp) top corners, elevation 1, and a 32×4dp drag handle. The scrim fades on\n * Base UI's data-[starting-style] / data-[ending-style]; the popup slides via the\n * drawer's `--drawer-swipe-movement-y` so the swipe gesture tracks the finger.\n * Same DOM + `data-*` as the VE build.\n */\nimport { createBottomSheet } from '@m3-baseui/core';\nimport { tv } from '../../tv';\n\nexport const bottomSheetTv = 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-end justify-center',\n popup: [\n 'box-border w-full max-w-[640px] max-h-[calc(100dvh-56px)]',\n 'overflow-y-auto overscroll-contain touch-auto outline-none',\n 'pb-6 bg-surface-container-low text-on-surface rounded-t-extra-large shadow-level1',\n '[transform:translateY(calc(var(--drawer-snap-point-offset)+var(--drawer-swipe-movement-y)))]',\n 'transition-transform duration-300 ease-emphasized',\n 'data-[swiping]:select-none',\n 'data-[starting-style]:[transform:translateY(100%)] data-[ending-style]:[transform:translateY(100%)]',\n ],\n handle: 'mx-auto mt-4 mb-2 h-1 w-8 shrink-0 rounded-full bg-on-surface-variant/40',\n title: ['m-0 px-6 pt-2 text-title-large text-on-surface'],\n description: ['m-0 px-6 pt-1 text-body-medium text-on-surface-variant'],\n },\n});\n\nconst s = bottomSheetTv();\nexport const BottomSheet = createBottomSheet({\n backdrop: s.backdrop(),\n viewport: s.viewport(),\n popup: s.popup(),\n handle: s.handle(),\n title: s.title(),\n description: s.description(),\n});\nexport type { BottomSheetVariant } from '@m3-baseui/core';\n"]}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { createButton } from '@m3-baseui/core';
|
|
3
3
|
import { tv } from 'tailwind-variants';
|
|
4
4
|
|
|
5
|
-
// src/button.ts
|
|
5
|
+
// src/components/button/button.ts
|
|
6
6
|
var button = tv({
|
|
7
7
|
base: [
|
|
8
8
|
"relative inline-flex items-center justify-center gap-2",
|
|
@@ -70,5 +70,5 @@ var button = tv({
|
|
|
70
70
|
var Button = createButton(({ variant }) => button({ variant }));
|
|
71
71
|
|
|
72
72
|
export { Button, button };
|
|
73
|
-
//# sourceMappingURL=
|
|
74
|
-
//# sourceMappingURL=
|
|
73
|
+
//# sourceMappingURL=index.js.map
|
|
74
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/button/button.ts"],"names":[],"mappings":";;;;;AAcO,IAAM,SAAS,EAAA,CAAG;AAAA,EACvB,IAAA,EAAM;AAAA,IACJ,wDAAA;AAAA,IACA,4EAAA;AAAA,IACA,kBAAA;AAAA;AAAA,IAEA,uDAAA;AAAA;AAAA,IAEA,6HAAA;AAAA,IACA,6CAAA;AAAA,IACA,sHAAA;AAAA;AAAA,IAEA,uHAAA;AAAA,IACA,+CAAA;AAAA,IACA,kDAAA;AAAA,IACA,0DAAA;AAAA,IACA,qDAAA;AAAA,IACA,6DAAA;AAAA;AAAA,IAEA,4FAAA;AAAA;AAAA;AAAA,IAGA,6EAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA,QAAA,EAAU;AAAA;AAAA;AAAA;AAAA,IAIR,OAAA,EAAS;AAAA,MACP,MAAA,EAAQ;AAAA,QACN,4BAAA;AAAA,QACA,6FAAA;AAAA,QACA,uDAAA;AAAA,QACA;AAAA,OACF;AAAA,MACA,KAAA,EAAO;AAAA,QACL,oDAAA;AAAA,QACA,6FAAA;AAAA,QACA,uDAAA;AAAA,QACA;AAAA,OACF;AAAA,MACA,QAAA,EAAU;AAAA,QACR,mDAAA;AAAA,QACA,2DAAA;AAAA,QACA;AAAA,OACF;AAAA,MACA,QAAA,EAAU;AAAA,QACR,qDAAA;AAAA,QACA,mGAAA;AAAA,QACA,uDAAA;AAAA,QACA;AAAA,OACF;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,kCAAA;AAAA,QACA,6BAAA;AAAA,QACA;AAAA;AACF;AACF,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,OAAA,EAAS;AAAA;AAEb,CAAC;AAEM,IAAM,MAAA,GAAS,YAAA,CAAa,CAAC,EAAE,OAAA,OAAc,MAAA,CAAO,EAAE,OAAA,EAAS,CAAC","file":"index.js","sourcesContent":["/**\n * button.ts — tailwind-variants resolver wired into the shared factory.\n *\n * Emits the same DOM and `data-*` state as the vanilla-extract build; only the\n * class strings differ. Utilities such as `bg-primary`, `text-on-primary`,\n * `rounded-full`, `shadow-level1`, and `text-label-large` are produced by the\n * Tailwind v4 `@theme` preset shipped in `@m3-baseui/tokens/theme.css`.\n *\n * Opacity modifiers (`before:opacity-[var(--md-sys-state-hover)]`) drive the\n * state layer off the channel-triple colors.\n */\nimport { createButton } from '@m3-baseui/core';\nimport { tv } from 'tailwind-variants';\n\nexport const button = tv({\n base: [\n 'relative inline-flex items-center justify-center gap-2',\n 'h-10 px-6 rounded-full overflow-hidden cursor-pointer select-none border-0',\n 'text-label-large',\n // M3 with-icon padding: the icon side trims to 16dp (label side stays 24dp).\n 'data-[with-start-icon]:pl-4 data-[with-end-icon]:pr-4',\n // Icon slot: 18dp, centered.\n '[&_[data-slot=button-icon]]:inline-flex [&_[data-slot=button-icon]]:items-center [&_[data-slot=button-icon]]:justify-center',\n '[&_[data-slot=button-icon]>svg]:size-[18px]',\n 'transition-[box-shadow,background-color,color,border-color] duration-200 ease-[var(--md-sys-motion-easing-standard)]',\n // State layer overlay\n 'before:absolute before:inset-0 before:rounded-[inherit] before:bg-current before:opacity-0 before:pointer-events-none',\n '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 ring (M3: 3px secondary, 2px offset)\n 'focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-secondary',\n // Disabled: no interaction, no state layer, no elevation. Per-variant\n // colors (container on-surface/12, label on-surface/38) live on each variant.\n 'disabled:pointer-events-none disabled:shadow-none disabled:before:opacity-0',\n 'data-[disabled]:pointer-events-none data-[disabled]:shadow-none data-[disabled]:before:opacity-0',\n ],\n variants: {\n // M3 elevation per variant: filled/tonal rest level0→hover level1→pressed level0;\n // elevated rest level1→hover level2→pressed level1. Disabled container is\n // on-surface/12 and label on-surface/38, matching material-web.\n variant: {\n filled: [\n 'bg-primary text-on-primary',\n 'hover:shadow-level1 focus-visible:shadow-none active:shadow-none data-[pressed]:shadow-none',\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 ],\n tonal: [\n 'bg-secondary-container text-on-secondary-container',\n 'hover:shadow-level1 focus-visible:shadow-none active:shadow-none data-[pressed]:shadow-none',\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 ],\n 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 ],\n elevated: [\n 'bg-surface-container-low text-primary shadow-level1',\n 'hover:shadow-level2 focus-visible:shadow-level1 active:shadow-level1 data-[pressed]:shadow-level1',\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 ],\n text: [\n 'bg-transparent text-primary px-3',\n 'disabled:text-on-surface/38',\n 'data-[disabled]:text-on-surface/38',\n ],\n },\n },\n defaultVariants: {\n variant: 'filled',\n },\n});\n\nexport const Button = createButton(({ variant }) => button({ variant }));\nexport type { ButtonProps, ButtonVariant } from '@m3-baseui/core';\n"]}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { createButtonGroup } from '@m3-baseui/core';
|
|
3
3
|
import { tv as tv$1 } from 'tailwind-variants';
|
|
4
4
|
|
|
5
|
-
// src/button-group.ts
|
|
5
|
+
// src/components/button-group/button-group.ts
|
|
6
6
|
var TYPESCALE = [
|
|
7
7
|
"display-large",
|
|
8
8
|
"display-medium",
|
|
@@ -31,7 +31,7 @@ var tv = (options, config) => tv$1(options, {
|
|
|
31
31
|
}
|
|
32
32
|
});
|
|
33
33
|
|
|
34
|
-
// src/button-group.ts
|
|
34
|
+
// src/components/button-group/button-group.ts
|
|
35
35
|
var buttonGroup = tv({
|
|
36
36
|
base: "inline-flex items-center",
|
|
37
37
|
variants: {
|
|
@@ -54,5 +54,5 @@ var buttonGroup = tv({
|
|
|
54
54
|
var ButtonGroup = createButtonGroup(({ variant }) => buttonGroup({ variant }));
|
|
55
55
|
|
|
56
56
|
export { ButtonGroup, buttonGroup };
|
|
57
|
-
//# sourceMappingURL=
|
|
58
|
-
//# sourceMappingURL=
|
|
57
|
+
//# sourceMappingURL=index.js.map
|
|
58
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/tv.ts","../../../src/components/button-group/button-group.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,cAAc,EAAA,CAAG;AAAA,EAC5B,IAAA,EAAM,0BAAA;AAAA,EACN,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,QAAA,EAAU,OAAA;AAAA,MACV,SAAA,EAAW;AAAA,QACT,SAAA;AAAA,QACA,wDAAA;AAAA;AAAA;AAAA,QAGA,oDAAA;AAAA,QACA;AAAA;AACF;AACF,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,OAAA,EAAS;AAAA;AAEb,CAAC;AAEM,IAAM,WAAA,GAAc,iBAAA,CAAkB,CAAC,EAAE,OAAA,OAAc,WAAA,CAAY,EAAE,OAAA,EAAS,CAAC","file":"index.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 * button-group.ts — tailwind-variants resolver for the M3 ButtonGroup.\n *\n * `standard` lays the buttons out with an 8dp gap; `connected` tightens the gap\n * to 2dp and reduces the children's inner-facing corners to the `small` shape\n * token so the row reads as one connected unit (outer corners stay full). The\n * child selectors carry enough specificity to win over each button's own\n * `rounded-full`. Same DOM + `role=\"group\"` as the VE build.\n */\nimport { createButtonGroup } from '@m3-baseui/core';\nimport { tv } from '../../tv';\n\nexport const buttonGroup = tv({\n base: 'inline-flex items-center',\n variants: {\n variant: {\n standard: 'gap-2',\n connected: [\n 'gap-0.5',\n '[&>*:not(:first-child):not(:last-child)]:rounded-small',\n // Guard against a lone child (it is both first *and* last) — only morph\n // the inner-facing corner when there is actually a sibling to face.\n '[&>*:first-child:not(:last-child)]:rounded-e-small',\n '[&>*:last-child:not(:first-child)]:rounded-s-small',\n ],\n },\n },\n defaultVariants: {\n variant: 'standard',\n },\n});\n\nexport const ButtonGroup = createButtonGroup(({ variant }) => buttonGroup({ variant }));\nexport type { ButtonGroupProps, ButtonGroupVariant } from '@m3-baseui/core';\n"]}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { createCard } from '@m3-baseui/core';
|
|
3
3
|
import { tv as tv$1 } from 'tailwind-variants';
|
|
4
4
|
|
|
5
|
-
// src/card.ts
|
|
5
|
+
// src/components/card/card.ts
|
|
6
6
|
var TYPESCALE = [
|
|
7
7
|
"display-large",
|
|
8
8
|
"display-medium",
|
|
@@ -31,7 +31,7 @@ var tv = (options, config) => tv$1(options, {
|
|
|
31
31
|
}
|
|
32
32
|
});
|
|
33
33
|
|
|
34
|
-
// src/card.ts
|
|
34
|
+
// src/components/card/card.ts
|
|
35
35
|
var cardTv = tv({
|
|
36
36
|
base: "relative box-border rounded-medium text-on-surface",
|
|
37
37
|
variants: {
|
|
@@ -75,5 +75,5 @@ var Card = createCard({
|
|
|
75
75
|
});
|
|
76
76
|
|
|
77
77
|
export { Card, cardTv };
|
|
78
|
-
//# sourceMappingURL=
|
|
79
|
-
//# sourceMappingURL=
|
|
78
|
+
//# sourceMappingURL=index.js.map
|
|
79
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/tv.ts","../../../src/components/card/card.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,SAAS,EAAA,CAAG;AAAA,EACvB,IAAA,EAAM,oDAAA;AAAA,EACN,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,QAAA,EAAU,wCAAA;AAAA,MACV,MAAA,EAAQ,8BAAA;AAAA,MACR,QAAA,EAAU;AAAA,KACZ;AAAA,IACA,WAAA,EAAa;AAAA,MACX,IAAA,EAAM;AAAA,QACJ,gFAAA;AAAA;AAAA,QAEA,8CAAA;AAAA,QACA,4IAAA;AAAA,QACA,kDAAA;AAAA,QACA,0DAAA;AAAA,QACA,qDAAA;AAAA,QACA,4FAAA;AAAA;AAAA,QAEA,yGAAA;AAAA,QACA;AAAA,OACF;AAAA,MACA,KAAA,EAAO;AAAA;AACT,GACF;AAAA,EACA,gBAAA,EAAkB;AAAA;AAAA,IAEhB;AAAA,MACE,OAAA,EAAS,UAAA;AAAA,MACT,WAAA,EAAa,IAAA;AAAA,MACb,KAAA,EAAO;AAAA;AACT,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,OAAA,EAAS,UAAA;AAAA,IACT,WAAA,EAAa;AAAA;AAEjB,CAAC;AAEM,IAAM,OAAO,UAAA,CAAW;AAAA,EAC7B,IAAA,EAAM,CAAC,EAAE,OAAA,EAAS,WAAA,OAAkB,MAAA,CAAO,EAAE,OAAA,EAAS,WAAA,EAAa;AACrE,CAAC","file":"index.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 * card.ts — tailwind-variants slots for the M3 Card.\n *\n * 12dp corners. `elevated` is surface-container-low + level1, `filled` is\n * surface-container-highest (level0), `outlined` is surface + outline-variant.\n * Interactive cards add the `currentColor` state-layer `::before` (the pointer\n * ripple is added by the factory), a focus ring and per-token disabled dimming.\n * Same DOM + `data-*` as the VE build.\n */\nimport { createCard } from '@m3-baseui/core';\nimport { tv } from '../../tv';\n\nexport const cardTv = tv({\n base: 'relative box-border rounded-medium text-on-surface',\n variants: {\n variant: {\n elevated: 'bg-surface-container-low shadow-level1',\n filled: 'bg-surface-container-highest',\n outlined: 'bg-surface border border-outline-variant',\n },\n interactive: {\n true: [\n 'group overflow-hidden cursor-pointer select-none text-left w-full outline-none',\n // Animate the elevation lift/settle to match the VE box-shadow transition.\n 'transition-shadow duration-150 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 'focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-secondary',\n // M3 disabled: drop the shadow + state layer, dim the content per-token.\n 'disabled:pointer-events-none disabled:before:opacity-0 disabled:shadow-none disabled:text-on-surface/38',\n 'data-[disabled]:pointer-events-none data-[disabled]:before:opacity-0 data-[disabled]:shadow-none data-[disabled]:text-on-surface/38',\n ],\n false: '',\n },\n },\n compoundVariants: [\n // M3 interactive elevated: lifts to level2 on hover, settles to level1 on press.\n {\n variant: 'elevated',\n interactive: true,\n class: 'hover:shadow-level2 active:shadow-level1',\n },\n ],\n defaultVariants: {\n variant: 'elevated',\n interactive: false,\n },\n});\n\nexport const Card = createCard({\n root: ({ variant, interactive }) => cardTv({ variant, interactive }),\n});\nexport type { CardProps, CardVariant } from '@m3-baseui/core';\n"]}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { createCarousel } from '@m3-baseui/core';
|
|
3
3
|
import { tv as tv$1 } from 'tailwind-variants';
|
|
4
4
|
|
|
5
|
-
// src/carousel.ts
|
|
5
|
+
// src/components/carousel/carousel.ts
|
|
6
6
|
var TYPESCALE = [
|
|
7
7
|
"display-large",
|
|
8
8
|
"display-medium",
|
|
@@ -31,7 +31,7 @@ var tv = (options, config) => tv$1(options, {
|
|
|
31
31
|
}
|
|
32
32
|
});
|
|
33
33
|
|
|
34
|
-
// src/carousel.ts
|
|
34
|
+
// src/components/carousel/carousel.ts
|
|
35
35
|
var carouselTv = tv({
|
|
36
36
|
slots: {
|
|
37
37
|
root: [
|
|
@@ -59,5 +59,5 @@ var Carousel = createCarousel((variant) => {
|
|
|
59
59
|
});
|
|
60
60
|
|
|
61
61
|
export { Carousel, carouselTv };
|
|
62
|
-
//# sourceMappingURL=
|
|
63
|
-
//# sourceMappingURL=
|
|
62
|
+
//# sourceMappingURL=index.js.map
|
|
63
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/tv.ts","../../../src/components/carousel/carousel.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,aAAa,EAAA,CAAG;AAAA,EAC3B,KAAA,EAAO;AAAA,IACL,IAAA,EAAM;AAAA,MACJ,gEAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,IAAA,EAAM;AAAA,GACR;AAAA,EACA,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,cAAA,EAAgB,EAAE,IAAA,EAAM,WAAA,EAAY;AAAA,MACpC,IAAA,EAAM,EAAE,IAAA,EAAM,uBAAA,EAAwB;AAAA,MACtC,aAAA,EAAe;AAAA;AAAA,QAEb,IAAA,EAAM,gEAAA;AAAA,QACN,IAAA,EAAM;AAAA;AACR;AACF,GACF;AAAA,EACA,eAAA,EAAiB,EAAE,OAAA,EAAS,cAAA;AAC9B,CAAC;AAEM,IAAM,QAAA,GAAW,cAAA,CAAe,CAAC,OAAA,KAAY;AAClD,EAAA,MAAM,CAAA,GAAI,UAAA,CAAW,EAAE,OAAA,EAAS,CAAA;AAChC,EAAA,OAAO,EAAE,MAAM,CAAA,CAAE,IAAA,IAAQ,IAAA,EAAM,CAAA,CAAE,MAAK,EAAE;AAC1C,CAAC","file":"index.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 * carousel.ts — tailwind-variants slots for the M3 Carousel.\n *\n * Root is a scroll-snap scroller (hidden scrollbar); items are snap-aligned,\n * `large`-radius cells. `multi-browse` and `hero` scroll horizontally (hero\n * items are wider and centre-snap); `full-screen` stacks full-size items\n * vertically. Same DOM as the VE build.\n */\nimport { createCarousel } from '@m3-baseui/core';\nimport { tv } from '../../tv';\n\nexport const carouselTv = tv({\n slots: {\n root: [\n 'flex gap-2 overflow-x-auto snap-x snap-mandatory scroll-smooth',\n '[scrollbar-width:none] [&::-webkit-scrollbar]:hidden',\n ],\n item: 'snap-start shrink-0 overflow-hidden rounded-large',\n },\n variants: {\n variant: {\n 'multi-browse': { item: 'w-40 h-56' },\n hero: { item: 'w-72 h-56 snap-center' },\n 'full-screen': {\n // gap-0: full-screen slides fill the viewport with no inter-slide gap.\n root: 'flex-col gap-0 overflow-x-hidden overflow-y-auto snap-y h-full',\n item: 'w-full h-full snap-center',\n },\n },\n },\n defaultVariants: { variant: 'multi-browse' },\n});\n\nexport const Carousel = createCarousel((variant) => {\n const s = carouselTv({ variant });\n return { root: s.root(), item: s.item() };\n});\nexport type { CarouselVariant } from '@m3-baseui/core';\n"]}
|
|
@@ -1,22 +1,23 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
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
3
|
import * as tailwind_variants from 'tailwind-variants';
|
|
4
|
+
import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config.js';
|
|
5
|
+
import * as tailwind_merge from 'tailwind-merge';
|
|
5
6
|
|
|
6
7
|
declare const checkboxTv: tailwind_variants.TVReturnType<{
|
|
7
8
|
[key: string]: {
|
|
8
|
-
[key: string]:
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
indicator?:
|
|
9
|
+
[key: string]: tailwind_merge.ClassNameValue | {
|
|
10
|
+
icon?: tailwind_merge.ClassNameValue;
|
|
11
|
+
root?: tailwind_merge.ClassNameValue;
|
|
12
|
+
indicator?: tailwind_merge.ClassNameValue;
|
|
12
13
|
};
|
|
13
14
|
};
|
|
14
15
|
} | {
|
|
15
16
|
[x: string]: {
|
|
16
|
-
[x: string]:
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
indicator?:
|
|
17
|
+
[x: string]: tailwind_merge.ClassNameValue | {
|
|
18
|
+
icon?: tailwind_merge.ClassNameValue;
|
|
19
|
+
root?: tailwind_merge.ClassNameValue;
|
|
20
|
+
indicator?: tailwind_merge.ClassNameValue;
|
|
20
21
|
};
|
|
21
22
|
};
|
|
22
23
|
} | {}, {
|
|
@@ -25,18 +26,18 @@ declare const checkboxTv: tailwind_variants.TVReturnType<{
|
|
|
25
26
|
icon: string[];
|
|
26
27
|
}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
|
|
27
28
|
[key: string]: {
|
|
28
|
-
[key: string]:
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
indicator?:
|
|
29
|
+
[key: string]: tailwind_merge.ClassNameValue | {
|
|
30
|
+
icon?: tailwind_merge.ClassNameValue;
|
|
31
|
+
root?: tailwind_merge.ClassNameValue;
|
|
32
|
+
indicator?: tailwind_merge.ClassNameValue;
|
|
32
33
|
};
|
|
33
34
|
};
|
|
34
35
|
} | {}>, {
|
|
35
36
|
[key: string]: {
|
|
36
|
-
[key: string]:
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
indicator?:
|
|
37
|
+
[key: string]: tailwind_merge.ClassNameValue | {
|
|
38
|
+
icon?: tailwind_merge.ClassNameValue;
|
|
39
|
+
root?: tailwind_merge.ClassNameValue;
|
|
40
|
+
indicator?: tailwind_merge.ClassNameValue;
|
|
40
41
|
};
|
|
41
42
|
};
|
|
42
43
|
} | {}, {
|
|
@@ -49,10 +50,10 @@ declare const checkboxTv: tailwind_variants.TVReturnType<{
|
|
|
49
50
|
icon: string[];
|
|
50
51
|
}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
|
|
51
52
|
[key: string]: {
|
|
52
|
-
[key: string]:
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
indicator?:
|
|
53
|
+
[key: string]: tailwind_merge.ClassNameValue | {
|
|
54
|
+
icon?: tailwind_merge.ClassNameValue;
|
|
55
|
+
root?: tailwind_merge.ClassNameValue;
|
|
56
|
+
indicator?: tailwind_merge.ClassNameValue;
|
|
56
57
|
};
|
|
57
58
|
};
|
|
58
59
|
} | {}>, unknown, unknown, undefined>>;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { createCheckbox } from '@m3-baseui/core';
|
|
3
3
|
import { tv } from 'tailwind-variants';
|
|
4
4
|
|
|
5
|
-
// src/checkbox.ts
|
|
5
|
+
// src/components/checkbox/checkbox.ts
|
|
6
6
|
var checkboxTv = tv({
|
|
7
7
|
slots: {
|
|
8
8
|
root: [
|
|
@@ -61,5 +61,5 @@ var Checkbox = createCheckbox({
|
|
|
61
61
|
});
|
|
62
62
|
|
|
63
63
|
export { Checkbox, checkboxTv };
|
|
64
|
-
//# sourceMappingURL=
|
|
65
|
-
//# sourceMappingURL=
|
|
64
|
+
//# sourceMappingURL=index.js.map
|
|
65
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/checkbox/checkbox.ts"],"names":[],"mappings":";;;;;AAUO,IAAM,aAAa,EAAA,CAAG;AAAA,EAC3B,KAAA,EAAO;AAAA,IACL,IAAA,EAAM;AAAA,MACJ,4EAAA;AAAA,MACA,kEAAA;AAAA;AAAA;AAAA,MAGA,2CAAA;AAAA,MACA,8CAAA;AAAA,MACA,qFAAA;AAAA,MACA,uGAAA;AAAA;AAAA,MAEA,qBAAA;AAAA,MACA,mFAAA;AAAA;AAAA,MAEA,kFAAA;AAAA,MACA,oKAAA;AAAA,MACA,4LAAA;AAAA,MACA,4FAAA;AAAA,MACA,sEAAA;AAAA;AAAA;AAAA,MAGA,sCAAA;AAAA,MACA,mGAAA;AAAA,MACA,+GAAA;AAAA;AAAA,MAEA,oHAAA;AAAA,MACA,qHAAA;AAAA,MACA,kDAAA;AAAA,MACA,0DAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,SAAA,EAAW;AAAA,MACT,yGAAA;AAAA;AAAA,MAEA,kCAAA;AAAA;AAAA,MAEA,oCAAA;AAAA;AAAA;AAAA,MAGA,uEAAA;AAAA,MACA,+FAAA;AAAA,MACA,2GAAA;AAAA,MACA,uHAAA;AAAA,MACA,6EAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,IAAA,EAAM,CAAC,2DAA2D;AAAA;AAEtE,CAAC;AAED,IAAM,IAAI,UAAA,EAAW;AACd,IAAM,WAAW,cAAA,CAAe;AAAA,EACrC,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,SAAA,EAAW,EAAE,SAAA,EAAU;AAAA,EACvB,IAAA,EAAM,EAAE,IAAA;AACV,CAAC","file":"index.js","sourcesContent":["/**\n * checkbox.ts — tailwind-variants slots for the M3 Checkbox.\n *\n * 18dp box with a 40dp circular state layer. Checked/indeterminate fill the box\n * with primary; the indeterminate dash is an `::after` on the indicator and the\n * check SVG is hidden in that state via a group reference.\n */\nimport { createCheckbox } from '@m3-baseui/core';\nimport { tv } from 'tailwind-variants';\n\nexport const checkboxTv = tv({\n slots: {\n root: [\n 'group relative inline-flex items-center justify-center shrink-0 box-border',\n 'size-[18px] rounded-[2px] border-2 cursor-pointer bg-transparent',\n // Outline is on-surface-variant; the state layer (text/currentColor) is\n // on-surface unselected, primary when selected (material-web).\n 'border-on-surface-variant text-on-surface',\n 'transition-colors duration-150 ease-standard',\n 'data-[checked]:bg-primary data-[checked]:border-primary data-[checked]:text-primary',\n 'data-[indeterminate]:bg-primary data-[indeterminate]:border-primary data-[indeterminate]:text-primary',\n // M3 pressed state layer inverts: unselected→primary, selected→on-surface\n 'active:text-primary',\n 'data-[checked]:active:text-on-surface data-[indeterminate]:active:text-on-surface',\n // M3 error: error outline + error-filled box; state layer stays error\n 'data-[error]:border-error data-[error]:text-error data-[error]:active:text-error',\n 'data-[error]:data-[checked]:bg-error data-[error]:data-[checked]:border-error data-[error]:data-[checked]:text-error data-[error]:data-[checked]:active:text-error',\n 'data-[error]:data-[indeterminate]:bg-error data-[error]:data-[indeterminate]:border-error data-[error]:data-[indeterminate]:text-error data-[error]:data-[indeterminate]:active:text-error',\n 'focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-secondary',\n 'data-[disabled]:pointer-events-none data-[disabled]:before:opacity-0',\n // M3 disabled: unselected outline on-surface/38; selected/indeterminate\n // box on-surface/38 with no outline (the check turns surface, below).\n 'data-[disabled]:border-on-surface/38',\n 'data-[disabled]:data-[checked]:bg-on-surface/38 data-[disabled]:data-[checked]:border-transparent',\n 'data-[disabled]:data-[indeterminate]:bg-on-surface/38 data-[disabled]:data-[indeterminate]:border-transparent',\n // 40dp circular state layer\n 'before:content-[\"\"] before:absolute before:left-1/2 before:top-1/2 before:-translate-x-1/2 before:-translate-y-1/2',\n 'before:size-10 before:rounded-full before:bg-current before:opacity-0 before:transition-opacity before:duration-100',\n 'hover:before:opacity-[var(--md-sys-state-hover)]',\n 'focus-visible:before:opacity-[var(--md-sys-state-focus)]',\n 'active:before:opacity-[var(--md-sys-state-pressed)]',\n ],\n indicator: [\n 'group/cb relative inline-flex items-center justify-center size-full pointer-events-none text-on-primary',\n // M3 error: the check / dash turn on-error on the error-filled box\n 'group-data-[error]:text-on-error',\n // M3 disabled: the check / dash turn the surface color on the faint box\n 'group-data-[disabled]:text-surface',\n // M3 asymmetric motion: unselected-exit accelerates out (150ms), the\n // selected/indeterminate-enter decelerates in (350ms). Token-backed.\n 'opacity-0 data-[checked]:opacity-100 data-[indeterminate]:opacity-100',\n 'transition-opacity ease-emphasized-accelerate duration-[var(--md-sys-motion-duration-short3)]',\n 'data-[checked]:ease-emphasized-decelerate data-[checked]:duration-[var(--md-sys-motion-duration-medium3)]',\n 'data-[indeterminate]:ease-emphasized-decelerate data-[indeterminate]:duration-[var(--md-sys-motion-duration-medium3)]',\n 'data-[indeterminate]:after:content-[\"\"] data-[indeterminate]:after:absolute',\n 'data-[indeterminate]:after:w-[10px] data-[indeterminate]:after:h-[2px] data-[indeterminate]:after:rounded-full data-[indeterminate]:after:bg-current',\n ],\n icon: ['w-[18px] h-[18px] group-data-[indeterminate]/cb:opacity-0'],\n },\n});\n\nconst c = checkboxTv();\nexport const Checkbox = createCheckbox({\n root: c.root(),\n indicator: c.indicator(),\n icon: c.icon(),\n});\n"]}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { createChip } from '@m3-baseui/core';
|
|
3
3
|
import { tv } from 'tailwind-variants';
|
|
4
4
|
|
|
5
|
-
// src/chip.ts
|
|
5
|
+
// src/components/chip/chip.ts
|
|
6
6
|
var chipTv = tv({
|
|
7
7
|
slots: {
|
|
8
8
|
root: [
|
|
@@ -99,5 +99,5 @@ var Chip = createChip(({ variant, elevated }) => {
|
|
|
99
99
|
});
|
|
100
100
|
|
|
101
101
|
export { Chip, chipTv };
|
|
102
|
-
//# sourceMappingURL=
|
|
103
|
-
//# sourceMappingURL=
|
|
102
|
+
//# sourceMappingURL=index.js.map
|
|
103
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/chip/chip.ts"],"names":[],"mappings":";;;;;AAUO,IAAM,SAAS,EAAA,CAAG;AAAA,EACvB,KAAA,EAAO;AAAA,IACL,IAAA,EAAM;AAAA,MACJ,yEAAA;AAAA;AAAA;AAAA;AAAA,MAIA,2EAAA;AAAA;AAAA,MAEA,+BAAA;AAAA,MACA,8CAAA;AAAA,MACA,qKAAA;AAAA,MACA,kDAAA;AAAA,MACA,0DAAA;AAAA,MACA,qDAAA;AAAA,MACA,4FAAA;AAAA;AAAA,MAEA,sEAAA;AAAA,MACA,wDAAA;AAAA,MACA,yEAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,MAAA,EAAQ;AAAA,MACN,8GAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO;AAAA,MACL,mHAAA;AAAA,MACA,2CAAA;AAAA,MACA;AAAA,KACF;AAAA;AAAA,IAEA,MAAA,EAAQ;AAAA,MACN,4FAAA;AAAA,MACA,gDAAA;AAAA,MACA;AAAA,KACF;AAAA;AAAA,IAEA,IAAA,EAAM;AAAA,MACJ,8DAAA;AAAA,MACA,mBAAA;AAAA,MACA;AAAA;AACF,GACF;AAAA,EACA,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,MAAA,EAAQ;AAAA,QACN,IAAA,EAAM,+CAAA;AAAA,QACN,IAAA,EAAM;AAAA,OACR;AAAA,MACA,UAAA,EAAY;AAAA,QACV,IAAA,EAAM,uDAAA;AAAA,QACN,IAAA,EAAM;AAAA,OACR;AAAA,MACA,KAAA,EAAO;AAAA,QACL,IAAA,EAAM,4DAAA;AAAA,QACN,IAAA,EAAM;AAAA,OACR;AAAA,MACA,MAAA,EAAQ;AAAA,QACN,IAAA,EAAM;AAAA,UACJ,uDAAA;AAAA,UACA,oHAAA;AAAA;AAAA,UAEA;AAAA,SACF;AAAA,QACA,IAAA,EAAM;AAAA;AACR,KACF;AAAA;AAAA;AAAA,IAGA,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,IAAA,EAAM;AAAA,UACJ,2DAAA;AAAA,UACA,0CAAA;AAAA,UACA;AAAA;AACF;AACF;AACF,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,OAAA,EAAS;AAAA;AAEb,CAAC;AAEM,IAAM,OAAO,UAAA,CAAW,CAAC,EAAE,OAAA,EAAS,UAAS,KAAM;AACxD,EAAA,MAAM,CAAA,GAAI,MAAA,CAAO,EAAE,OAAA,EAAS,UAAU,CAAA;AACtC,EAAA,OAAO;AAAA,IACL,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,IACb,MAAA,EAAQ,EAAE,MAAA,EAAO;AAAA,IACjB,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,IACf,MAAA,EAAQ,EAAE,MAAA,EAAO;AAAA,IACjB,IAAA,EAAM,EAAE,IAAA;AAAK,GACf;AACF,CAAC","file":"index.js","sourcesContent":["/**\n * chip.ts — tailwind-variants slots for the M3 Chip.\n *\n * 32dp tall, 8dp corners, label-large. The state layer reacts to hover/focus/\n * press (not the persistent toggle `data-pressed`, which a filter chip uses for\n * its selected fill). Emits the same DOM + ripple as the VE build.\n */\nimport { createChip } from '@m3-baseui/core';\nimport { tv } from 'tailwind-variants';\n\nexport const chipTv = tv({\n slots: {\n root: [\n 'group relative inline-flex items-center justify-center gap-2 box-border',\n // No `overflow-hidden`: it would clip the 48dp touch target. The state\n // layer is rounded to match instead (before:rounded-[inherit]); the ripple\n // self-clips.\n 'h-8 px-4 rounded-[8px] select-none border bg-transparent text-label-large',\n // M3 with-icon padding: the icon side trims to 8dp (label side stays 16dp).\n 'data-[with-leading-icon]:pl-2',\n 'transition-colors duration-150 ease-standard',\n 'before:absolute before:inset-0 before:rounded-[inherit] 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 'focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-secondary',\n // M3 disabled: label on-surface/38, outline on-surface/12; no state layer.\n 'data-[disabled]:pointer-events-none data-[disabled]:before:opacity-0',\n 'disabled:pointer-events-none disabled:before:opacity-0',\n 'data-[disabled]:text-on-surface/38 data-[disabled]:border-on-surface/12',\n 'disabled:text-on-surface/38 disabled:border-on-surface/12',\n ],\n remove: [\n 'inline-flex items-center justify-center shrink-0 size-[18px] -mr-1 ml-1 rounded-full border-0 bg-transparent',\n 'text-on-surface-variant cursor-pointer hover:opacity-80',\n ],\n check: [\n 'inline-flex items-center justify-center shrink-0 h-[18px] w-0 -ml-2 opacity-0 overflow-hidden pointer-events-none',\n 'transition-all duration-150 ease-standard',\n 'group-data-[pressed]:w-[18px] group-data-[pressed]:ml-0 group-data-[pressed]:opacity-100',\n ],\n // M3 leading avatar: 24dp circle; negative margin trims the leading padding to 4dp.\n avatar: [\n 'inline-flex items-center justify-center shrink-0 size-6 -ml-3 rounded-full overflow-hidden',\n 'bg-primary-container text-on-primary-container',\n '[&>img]:size-full [&>img]:object-cover',\n ],\n // M3 leading icon: 18dp; root `data-with-leading-icon` trims leading padding to 8dp.\n icon: [\n 'inline-flex items-center justify-center shrink-0 size-[18px]',\n '[&>svg]:size-full',\n 'group-disabled:text-on-surface/38 group-data-[disabled]:text-on-surface/38',\n ],\n },\n variants: {\n variant: {\n assist: {\n root: 'border-outline text-on-surface cursor-pointer',\n icon: 'text-primary',\n },\n suggestion: {\n root: 'border-outline text-on-surface-variant cursor-pointer',\n icon: 'text-on-surface-variant',\n },\n input: {\n root: 'border-outline text-on-surface-variant cursor-default pr-2',\n icon: 'text-on-surface-variant',\n },\n filter: {\n root: [\n 'border-outline text-on-surface-variant cursor-pointer',\n 'data-[pressed]:bg-secondary-container data-[pressed]:text-on-secondary-container data-[pressed]:border-transparent',\n // M3 disabled + selected: faint on-surface/12 container\n 'data-[pressed]:data-[disabled]:bg-on-surface/12 data-[pressed]:disabled:bg-on-surface/12',\n ],\n icon: 'text-on-surface-variant group-data-[pressed]:hidden',\n },\n },\n // M3 elevated: filled surface-container-low + elevation level1→level2 on hover,\n // no outline. Disabled drops the shadow.\n elevated: {\n true: {\n root: [\n 'bg-surface-container-low border-transparent shadow-level1',\n 'hover:shadow-level2 active:shadow-level1',\n 'disabled:shadow-none data-[disabled]:shadow-none',\n ],\n },\n },\n },\n defaultVariants: {\n variant: 'assist',\n },\n});\n\nexport const Chip = createChip(({ variant, elevated }) => {\n const c = chipTv({ variant, elevated });\n return {\n root: c.root(),\n remove: c.remove(),\n check: c.check(),\n avatar: c.avatar(),\n icon: c.icon(),\n };\n});\nexport type { ChipProps, ChipVariant } from '@m3-baseui/core';\n"]}
|