@m3-baseui/react-tailwind 1.0.3 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (43) hide show
  1. package/dist/bottom-app-bar.d.ts +62 -0
  2. package/dist/bottom-app-bar.js +51 -0
  3. package/dist/bottom-app-bar.js.map +1 -0
  4. package/dist/bottom-sheet.d.ts +101 -0
  5. package/dist/bottom-sheet.js +70 -0
  6. package/dist/bottom-sheet.js.map +1 -0
  7. package/dist/card.js +2 -0
  8. package/dist/card.js.map +1 -1
  9. package/dist/checkbox.d.ts +5 -5
  10. package/dist/divider.js +2 -1
  11. package/dist/divider.js.map +1 -1
  12. package/dist/fab-menu.d.ts +132 -0
  13. package/dist/fab-menu.js +116 -0
  14. package/dist/fab-menu.js.map +1 -0
  15. package/dist/index.d.ts +7 -1
  16. package/dist/index.js +259 -16
  17. package/dist/index.js.map +1 -1
  18. package/dist/item.d.ts +5 -5
  19. package/dist/menu.d.ts +5 -5
  20. package/dist/navigation-bar.d.ts +5 -5
  21. package/dist/navigation-bar.js +20 -4
  22. package/dist/navigation-bar.js.map +1 -1
  23. package/dist/navigation-rail.d.ts +101 -0
  24. package/dist/navigation-rail.js +92 -0
  25. package/dist/navigation-rail.js.map +1 -0
  26. package/dist/progress.d.ts +12 -12
  27. package/dist/progress.js.map +1 -1
  28. package/dist/segmented-button.d.ts +5 -5
  29. package/dist/select.d.ts +5 -5
  30. package/dist/side-sheet.d.ts +112 -0
  31. package/dist/side-sheet.js +90 -0
  32. package/dist/side-sheet.js.map +1 -0
  33. package/dist/slider.d.ts +5 -5
  34. package/dist/snackbar.d.ts +5 -5
  35. package/dist/snackbar.js +1 -1
  36. package/dist/snackbar.js.map +1 -1
  37. package/dist/textfield.js +5 -2
  38. package/dist/textfield.js.map +1 -1
  39. package/dist/top-app-bar.d.ts +147 -0
  40. package/dist/top-app-bar.js +68 -0
  41. package/dist/top-app-bar.js.map +1 -0
  42. package/package.json +31 -1
  43. package/styles/preset.css +2 -1
package/dist/menu.d.ts CHANGED
@@ -8,8 +8,8 @@ declare const menuTv: tailwind_variants.TVReturnType<{
8
8
  [key: string]: tailwind_variants.ClassValue | {
9
9
  separator?: tailwind_variants.ClassValue;
10
10
  popup?: tailwind_variants.ClassValue;
11
- itemIndicator?: tailwind_variants.ClassValue;
12
11
  item?: tailwind_variants.ClassValue;
12
+ itemIndicator?: tailwind_variants.ClassValue;
13
13
  groupLabel?: tailwind_variants.ClassValue;
14
14
  submenuTrigger?: tailwind_variants.ClassValue;
15
15
  checkboxItem?: tailwind_variants.ClassValue;
@@ -21,8 +21,8 @@ declare const menuTv: tailwind_variants.TVReturnType<{
21
21
  [x: string]: tailwind_variants.ClassValue | {
22
22
  separator?: tailwind_variants.ClassValue;
23
23
  popup?: tailwind_variants.ClassValue;
24
- itemIndicator?: tailwind_variants.ClassValue;
25
24
  item?: tailwind_variants.ClassValue;
25
+ itemIndicator?: tailwind_variants.ClassValue;
26
26
  groupLabel?: tailwind_variants.ClassValue;
27
27
  submenuTrigger?: tailwind_variants.ClassValue;
28
28
  checkboxItem?: tailwind_variants.ClassValue;
@@ -43,8 +43,8 @@ declare const menuTv: tailwind_variants.TVReturnType<{
43
43
  [key: string]: tailwind_variants.ClassValue | {
44
44
  separator?: tailwind_variants.ClassValue;
45
45
  popup?: tailwind_variants.ClassValue;
46
- itemIndicator?: tailwind_variants.ClassValue;
47
46
  item?: tailwind_variants.ClassValue;
47
+ itemIndicator?: tailwind_variants.ClassValue;
48
48
  groupLabel?: tailwind_variants.ClassValue;
49
49
  submenuTrigger?: tailwind_variants.ClassValue;
50
50
  checkboxItem?: tailwind_variants.ClassValue;
@@ -56,8 +56,8 @@ declare const menuTv: tailwind_variants.TVReturnType<{
56
56
  [key: string]: tailwind_variants.ClassValue | {
57
57
  separator?: tailwind_variants.ClassValue;
58
58
  popup?: tailwind_variants.ClassValue;
59
- itemIndicator?: tailwind_variants.ClassValue;
60
59
  item?: tailwind_variants.ClassValue;
60
+ itemIndicator?: tailwind_variants.ClassValue;
61
61
  groupLabel?: tailwind_variants.ClassValue;
62
62
  submenuTrigger?: tailwind_variants.ClassValue;
63
63
  checkboxItem?: tailwind_variants.ClassValue;
@@ -87,8 +87,8 @@ declare const menuTv: tailwind_variants.TVReturnType<{
87
87
  [key: string]: tailwind_variants.ClassValue | {
88
88
  separator?: tailwind_variants.ClassValue;
89
89
  popup?: tailwind_variants.ClassValue;
90
- itemIndicator?: tailwind_variants.ClassValue;
91
90
  item?: tailwind_variants.ClassValue;
91
+ itemIndicator?: tailwind_variants.ClassValue;
92
92
  groupLabel?: tailwind_variants.ClassValue;
93
93
  submenuTrigger?: tailwind_variants.ClassValue;
94
94
  checkboxItem?: tailwind_variants.ClassValue;
package/dist/navigation-bar.d.ts CHANGED
@@ -6,9 +6,9 @@ import * as tailwind_variants from 'tailwind-variants';
6
6
  declare const navigationBarTv: tailwind_variants.TVReturnType<{
7
7
  [key: string]: {
8
8
  [key: string]: tailwind_variants.ClassValue | {
9
+ root?: tailwind_variants.ClassValue;
9
10
  label?: tailwind_variants.ClassValue;
10
11
  icon?: tailwind_variants.ClassValue;
11
- root?: tailwind_variants.ClassValue;
12
12
  indicator?: tailwind_variants.ClassValue;
13
13
  item?: tailwind_variants.ClassValue;
14
14
  iconWrap?: tailwind_variants.ClassValue;
@@ -17,9 +17,9 @@ declare const navigationBarTv: tailwind_variants.TVReturnType<{
17
17
  } | {
18
18
  [x: string]: {
19
19
  [x: string]: tailwind_variants.ClassValue | {
20
+ root?: tailwind_variants.ClassValue;
20
21
  label?: tailwind_variants.ClassValue;
21
22
  icon?: tailwind_variants.ClassValue;
22
- root?: tailwind_variants.ClassValue;
23
23
  indicator?: tailwind_variants.ClassValue;
24
24
  item?: tailwind_variants.ClassValue;
25
25
  iconWrap?: tailwind_variants.ClassValue;
@@ -35,9 +35,9 @@ declare const navigationBarTv: tailwind_variants.TVReturnType<{
35
35
  }, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
36
36
  [key: string]: {
37
37
  [key: string]: tailwind_variants.ClassValue | {
38
+ root?: tailwind_variants.ClassValue;
38
39
  label?: tailwind_variants.ClassValue;
39
40
  icon?: tailwind_variants.ClassValue;
40
- root?: tailwind_variants.ClassValue;
41
41
  indicator?: tailwind_variants.ClassValue;
42
42
  item?: tailwind_variants.ClassValue;
43
43
  iconWrap?: tailwind_variants.ClassValue;
@@ -46,9 +46,9 @@ declare const navigationBarTv: tailwind_variants.TVReturnType<{
46
46
  } | {}>, {
47
47
  [key: string]: {
48
48
  [key: string]: tailwind_variants.ClassValue | {
49
+ root?: tailwind_variants.ClassValue;
49
50
  label?: tailwind_variants.ClassValue;
50
51
  icon?: tailwind_variants.ClassValue;
51
- root?: tailwind_variants.ClassValue;
52
52
  indicator?: tailwind_variants.ClassValue;
53
53
  item?: tailwind_variants.ClassValue;
54
54
  iconWrap?: tailwind_variants.ClassValue;
@@ -71,9 +71,9 @@ declare const navigationBarTv: tailwind_variants.TVReturnType<{
71
71
  }, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
72
72
  [key: string]: {
73
73
  [key: string]: tailwind_variants.ClassValue | {
74
+ root?: tailwind_variants.ClassValue;
74
75
  label?: tailwind_variants.ClassValue;
75
76
  icon?: tailwind_variants.ClassValue;
76
- root?: tailwind_variants.ClassValue;
77
77
  indicator?: tailwind_variants.ClassValue;
78
78
  item?: tailwind_variants.ClassValue;
79
79
  iconWrap?: tailwind_variants.ClassValue;
package/dist/navigation-bar.js CHANGED
@@ -9,7 +9,8 @@ var navigationBarTv = tv({
9
9
  item: [
10
10
  "group relative flex flex-1 flex-col items-center justify-center gap-1 px-1 pt-3 pb-4",
11
11
  "bg-transparent border-0 cursor-pointer select-none outline-none",
12
- "data-[disabled]:opacity-[0.38] data-[disabled]:pointer-events-none"
12
+ // M3 disabled is per-token (icon + label dimmed below), not a blanket fade.
13
+ "data-[disabled]:pointer-events-none"
13
14
  ],
14
15
  iconWrap: "relative flex items-center justify-center w-16 h-8",
15
16
  indicator: [
@@ -19,17 +20,32 @@ var navigationBarTv = tv({
19
20
  "before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100",
20
21
  "group-hover:before:opacity-[var(--md-sys-state-hover)]",
21
22
  "group-focus-visible:before:opacity-[var(--md-sys-state-focus)]",
22
- "group-active:before:opacity-[var(--md-sys-state-pressed)]"
23
+ "group-active:before:opacity-[var(--md-sys-state-pressed)]",
24
+ // No state layer on a disabled destination.
25
+ "group-data-[disabled]:before:opacity-0"
23
26
  ],
24
27
  icon: [
25
28
  "relative flex items-center justify-center text-on-surface-variant",
26
29
  "transition-colors duration-150 ease-standard",
27
- "group-data-[pressed]:text-on-secondary-container"
30
+ // Raw <svg> icons render at 24dp (Material Symbols set their own size).
31
+ "[&_svg]:size-6",
32
+ "group-data-[pressed]:text-on-secondary-container",
33
+ // M3 disabled: icon dims to on-surface/0.38. The item is the only `.group`,
34
+ // so the disabled+active override must test both attributes on that single
35
+ // element (`.group[data-disabled][data-pressed] &`) to outrank the equal-
36
+ // specificity data-[pressed] color — a stacked `group-data-*:group-data-*`
37
+ // would expect two nested groups and never match.
38
+ "group-data-[disabled]:text-on-surface/[0.38]",
39
+ "group-[&[data-disabled][data-pressed]]:text-on-surface/[0.38]"
28
40
  ],
29
41
  label: [
30
42
  "text-label-medium text-on-surface-variant",
31
43
  "transition-colors duration-150 ease-standard",
32
- "group-data-[pressed]:text-on-surface group-data-[pressed]:font-bold"
44
+ "group-data-[pressed]:text-on-surface group-data-[pressed]:font-bold",
45
+ // M3 disabled: label dims to on-surface/0.38. Same-element override (see the
46
+ // icon slot) keeps a disabled+active label dimmed.
47
+ "group-data-[disabled]:text-on-surface/[0.38]",
48
+ "group-[&[data-disabled][data-pressed]]:text-on-surface/[0.38]"
33
49
  ]
34
50
  }
35
51
  });
package/dist/navigation-bar.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/navigation-bar.ts"],"names":[],"mappings":";;;;;AAWO,IAAM,kBAAkB,EAAA,CAAG;AAAA,EAChC,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,oEAAA;AAAA,IACN,IAAA,EAAM;AAAA,MACJ,sFAAA;AAAA,MACA,iEAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,QAAA,EAAU,oDAAA;AAAA,IACV,SAAA,EAAW;AAAA,MACT,8DAAA;AAAA,MACA,8CAAA;AAAA,MACA,6CAAA;AAAA,MACA,4IAAA;AAAA,MACA,wDAAA;AAAA,MACA,gEAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,mEAAA;AAAA,MACA,8CAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO;AAAA,MACL,2CAAA;AAAA,MACA,8CAAA;AAAA,MACA;AAAA;AACF;AAEJ,CAAC;AAED,IAAM,IAAI,eAAA,EAAgB;AACnB,IAAM,gBAAgB,mBAAA,CAAoB;AAAA,EAC/C,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,QAAA,EAAU,EAAE,QAAA,EAAS;AAAA,EACrB,SAAA,EAAW,EAAE,SAAA,EAAU;AAAA,EACvB,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,KAAA,EAAO,EAAE,KAAA;AACX,CAAC","file":"navigation-bar.js","sourcesContent":["/**\n * navigation-bar.ts — tailwind-variants slots for the M3 NavigationBar.\n *\n * 80dp bar on surface-container. The selected item surfaces `data-pressed`\n * (Base UI Toggle); the pill, icon and label colors key off it via the `group`\n * on each item. State layer is the pill `::before`; the pointer ripple is added\n * by the factory. Same DOM as the VE build.\n */\nimport { createNavigationBar } from '@m3-baseui/core';\nimport { tv } from 'tailwind-variants';\n\nexport const navigationBarTv = tv({\n slots: {\n root: 'flex items-stretch justify-around w-full h-20 bg-surface-container',\n item: [\n 'group relative flex flex-1 flex-col items-center justify-center gap-1 px-1 pt-3 pb-4',\n 'bg-transparent border-0 cursor-pointer select-none outline-none',\n 'data-[disabled]:opacity-[0.38] data-[disabled]:pointer-events-none',\n ],\n iconWrap: 'relative flex items-center justify-center w-16 h-8',\n indicator: [\n 'absolute inset-0 rounded-full bg-transparent overflow-hidden',\n 'transition-colors duration-150 ease-standard',\n 'group-data-[pressed]:bg-secondary-container',\n 'before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100',\n 'group-hover:before:opacity-[var(--md-sys-state-hover)]',\n 'group-focus-visible:before:opacity-[var(--md-sys-state-focus)]',\n 'group-active:before:opacity-[var(--md-sys-state-pressed)]',\n ],\n icon: [\n 'relative flex items-center justify-center text-on-surface-variant',\n 'transition-colors duration-150 ease-standard',\n 'group-data-[pressed]:text-on-secondary-container',\n ],\n label: [\n 'text-label-medium text-on-surface-variant',\n 'transition-colors duration-150 ease-standard',\n 'group-data-[pressed]:text-on-surface group-data-[pressed]:font-bold',\n ],\n },\n});\n\nconst s = navigationBarTv();\nexport const NavigationBar = createNavigationBar({\n root: s.root(),\n item: s.item(),\n iconWrap: s.iconWrap(),\n indicator: s.indicator(),\n icon: s.icon(),\n label: s.label(),\n});\n"]}
1
+ {"version":3,"sources":["../src/navigation-bar.ts"],"names":[],"mappings":";;;;;AAWO,IAAM,kBAAkB,EAAA,CAAG;AAAA,EAChC,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,oEAAA;AAAA,IACN,IAAA,EAAM;AAAA,MACJ,sFAAA;AAAA,MACA,iEAAA;AAAA;AAAA,MAEA;AAAA,KACF;AAAA,IACA,QAAA,EAAU,oDAAA;AAAA,IACV,SAAA,EAAW;AAAA,MACT,8DAAA;AAAA,MACA,8CAAA;AAAA,MACA,6CAAA;AAAA,MACA,4IAAA;AAAA,MACA,wDAAA;AAAA,MACA,gEAAA;AAAA,MACA,2DAAA;AAAA;AAAA,MAEA;AAAA,KACF;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,mEAAA;AAAA,MACA,8CAAA;AAAA;AAAA,MAEA,gBAAA;AAAA,MACA,kDAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMA,8CAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO;AAAA,MACL,2CAAA;AAAA,MACA,8CAAA;AAAA,MACA,qEAAA;AAAA;AAAA;AAAA,MAGA,8CAAA;AAAA,MACA;AAAA;AACF;AAEJ,CAAC;AAED,IAAM,IAAI,eAAA,EAAgB;AACnB,IAAM,gBAAgB,mBAAA,CAAoB;AAAA,EAC/C,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,QAAA,EAAU,EAAE,QAAA,EAAS;AAAA,EACrB,SAAA,EAAW,EAAE,SAAA,EAAU;AAAA,EACvB,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,KAAA,EAAO,EAAE,KAAA;AACX,CAAC","file":"navigation-bar.js","sourcesContent":["/**\n * navigation-bar.ts — tailwind-variants slots for the M3 NavigationBar.\n *\n * 80dp bar on surface-container. The selected item surfaces `data-pressed`\n * (Base UI Toggle); the pill, icon and label colors key off it via the `group`\n * on each item. State layer is the pill `::before`; the pointer ripple is added\n * by the factory. Same DOM as the VE build.\n */\nimport { createNavigationBar } from '@m3-baseui/core';\nimport { tv } from 'tailwind-variants';\n\nexport const navigationBarTv = tv({\n slots: {\n root: 'flex items-stretch justify-around w-full h-20 bg-surface-container',\n item: [\n 'group relative flex flex-1 flex-col items-center justify-center gap-1 px-1 pt-3 pb-4',\n 'bg-transparent border-0 cursor-pointer select-none outline-none',\n // M3 disabled is per-token (icon + label dimmed below), not a blanket fade.\n 'data-[disabled]:pointer-events-none',\n ],\n iconWrap: 'relative flex items-center justify-center w-16 h-8',\n indicator: [\n 'absolute inset-0 rounded-full bg-transparent overflow-hidden',\n 'transition-colors duration-150 ease-standard',\n 'group-data-[pressed]:bg-secondary-container',\n 'before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100',\n 'group-hover:before:opacity-[var(--md-sys-state-hover)]',\n 'group-focus-visible:before:opacity-[var(--md-sys-state-focus)]',\n 'group-active:before:opacity-[var(--md-sys-state-pressed)]',\n // No state layer on a disabled destination.\n 'group-data-[disabled]:before:opacity-0',\n ],\n icon: [\n 'relative flex items-center justify-center text-on-surface-variant',\n 'transition-colors duration-150 ease-standard',\n // Raw <svg> icons render at 24dp (Material Symbols set their own size).\n '[&_svg]:size-6',\n 'group-data-[pressed]:text-on-secondary-container',\n // M3 disabled: icon dims to on-surface/0.38. The item is the only `.group`,\n // so the disabled+active override must test both attributes on that single\n // element (`.group[data-disabled][data-pressed] &`) to outrank the equal-\n // specificity data-[pressed] color — a stacked `group-data-*:group-data-*`\n // would expect two nested groups and never match.\n 'group-data-[disabled]:text-on-surface/[0.38]',\n 'group-[&[data-disabled][data-pressed]]:text-on-surface/[0.38]',\n ],\n label: [\n 'text-label-medium text-on-surface-variant',\n 'transition-colors duration-150 ease-standard',\n 'group-data-[pressed]:text-on-surface group-data-[pressed]:font-bold',\n // M3 disabled: label dims to on-surface/0.38. Same-element override (see the\n // icon slot) keeps a disabled+active label dimmed.\n 'group-data-[disabled]:text-on-surface/[0.38]',\n 'group-[&[data-disabled][data-pressed]]:text-on-surface/[0.38]',\n ],\n },\n});\n\nconst s = navigationBarTv();\nexport const NavigationBar = createNavigationBar({\n root: s.root(),\n item: s.item(),\n iconWrap: s.iconWrap(),\n indicator: s.indicator(),\n icon: s.icon(),\n label: s.label(),\n});\n"]}
package/dist/navigation-rail.d.ts ADDED
@@ -0,0 +1,101 @@
1
+ import * as react from 'react';
2
+ import * as _base_ui_react from '@base-ui/react';
3
+ import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config.js';
4
+ import * as tailwind_variants from 'tailwind-variants';
5
+
6
+ declare const navigationRailTv: tailwind_variants.TVReturnType<{
7
+ [key: string]: {
8
+ [key: string]: tailwind_variants.ClassValue | {
9
+ root?: tailwind_variants.ClassValue;
10
+ header?: tailwind_variants.ClassValue;
11
+ label?: tailwind_variants.ClassValue;
12
+ icon?: tailwind_variants.ClassValue;
13
+ indicator?: tailwind_variants.ClassValue;
14
+ item?: tailwind_variants.ClassValue;
15
+ iconWrap?: tailwind_variants.ClassValue;
16
+ };
17
+ };
18
+ } | {
19
+ [x: string]: {
20
+ [x: string]: tailwind_variants.ClassValue | {
21
+ root?: tailwind_variants.ClassValue;
22
+ header?: tailwind_variants.ClassValue;
23
+ label?: tailwind_variants.ClassValue;
24
+ icon?: tailwind_variants.ClassValue;
25
+ indicator?: tailwind_variants.ClassValue;
26
+ item?: tailwind_variants.ClassValue;
27
+ iconWrap?: tailwind_variants.ClassValue;
28
+ };
29
+ };
30
+ } | {}, {
31
+ root: string;
32
+ header: string;
33
+ item: string[];
34
+ iconWrap: string;
35
+ indicator: string[];
36
+ icon: string[];
37
+ label: string[];
38
+ }, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
39
+ [key: string]: {
40
+ [key: string]: tailwind_variants.ClassValue | {
41
+ root?: tailwind_variants.ClassValue;
42
+ header?: tailwind_variants.ClassValue;
43
+ label?: tailwind_variants.ClassValue;
44
+ icon?: tailwind_variants.ClassValue;
45
+ indicator?: tailwind_variants.ClassValue;
46
+ item?: tailwind_variants.ClassValue;
47
+ iconWrap?: tailwind_variants.ClassValue;
48
+ };
49
+ };
50
+ } | {}>, {
51
+ [key: string]: {
52
+ [key: string]: tailwind_variants.ClassValue | {
53
+ root?: tailwind_variants.ClassValue;
54
+ header?: tailwind_variants.ClassValue;
55
+ label?: tailwind_variants.ClassValue;
56
+ icon?: tailwind_variants.ClassValue;
57
+ indicator?: tailwind_variants.ClassValue;
58
+ item?: tailwind_variants.ClassValue;
59
+ iconWrap?: tailwind_variants.ClassValue;
60
+ };
61
+ };
62
+ } | {}, {
63
+ root: string;
64
+ header: string;
65
+ item: string[];
66
+ iconWrap: string;
67
+ indicator: string[];
68
+ icon: string[];
69
+ label: string[];
70
+ }, tailwind_variants.TVReturnType<unknown, {
71
+ root: string;
72
+ header: string;
73
+ item: string[];
74
+ iconWrap: string;
75
+ indicator: string[];
76
+ icon: string[];
77
+ label: string[];
78
+ }, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
79
+ [key: string]: {
80
+ [key: string]: tailwind_variants.ClassValue | {
81
+ root?: tailwind_variants.ClassValue;
82
+ header?: tailwind_variants.ClassValue;
83
+ label?: tailwind_variants.ClassValue;
84
+ icon?: tailwind_variants.ClassValue;
85
+ indicator?: tailwind_variants.ClassValue;
86
+ item?: tailwind_variants.ClassValue;
87
+ iconWrap?: tailwind_variants.ClassValue;
88
+ };
89
+ };
90
+ } | {}>, unknown, unknown, undefined>>;
91
+ declare const NavigationRail: {
92
+ Root: react.ForwardRefExoticComponent<Omit<_base_ui_react.ToggleGroup.Props<string> & react.RefAttributes<HTMLDivElement>, "ref"> & {
93
+ header?: React.ReactNode;
94
+ } & react.RefAttributes<HTMLDivElement>>;
95
+ Item: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.Toggle.Props<string> & react.RefAttributes<HTMLButtonElement>, "ref">, "children"> & {
96
+ icon?: React.ReactNode;
97
+ children?: React.ReactNode;
98
+ } & react.RefAttributes<HTMLButtonElement>>;
99
+ };
100
+
101
+ export { NavigationRail, navigationRailTv };
package/dist/navigation-rail.js ADDED
@@ -0,0 +1,92 @@
1
+ "use client";
2
+ import { createNavigationRail } from '@m3-baseui/core';
3
+ import { tv as tv$1 } from 'tailwind-variants';
4
+
5
+ // src/navigation-rail.ts
6
+ var TYPESCALE = [
7
+ "display-large",
8
+ "display-medium",
9
+ "display-small",
10
+ "headline-large",
11
+ "headline-medium",
12
+ "headline-small",
13
+ "title-large",
14
+ "title-medium",
15
+ "title-small",
16
+ "body-large",
17
+ "body-medium",
18
+ "body-small",
19
+ "label-large",
20
+ "label-medium",
21
+ "label-small"
22
+ ];
23
+ var tv = (options, config) => tv$1(options, {
24
+ ...config,
25
+ twMergeConfig: {
26
+ extend: {
27
+ classGroups: {
28
+ "font-size": [{ text: [...TYPESCALE] }]
29
+ }
30
+ }
31
+ }
32
+ });
33
+
34
+ // src/navigation-rail.ts
35
+ var navigationRailTv = tv({
36
+ slots: {
37
+ root: "flex flex-col items-center gap-3 h-full w-20 py-5 bg-surface",
38
+ header: "flex flex-col items-center gap-3 mb-1",
39
+ item: [
40
+ "group relative flex flex-col items-center justify-center gap-1 px-1 py-1",
41
+ "bg-transparent border-0 cursor-pointer select-none outline-none",
42
+ // M3 disabled is per-token (icon + label dimmed below), not a blanket fade.
43
+ "data-[disabled]:pointer-events-none"
44
+ ],
45
+ iconWrap: "relative flex items-center justify-center w-14 h-8",
46
+ indicator: [
47
+ "absolute inset-0 rounded-full bg-transparent overflow-hidden",
48
+ "transition-colors duration-150 ease-standard",
49
+ "group-data-[pressed]:bg-secondary-container",
50
+ "before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100",
51
+ "group-hover:before:opacity-[var(--md-sys-state-hover)]",
52
+ "group-focus-visible:before:opacity-[var(--md-sys-state-focus)]",
53
+ "group-active:before:opacity-[var(--md-sys-state-pressed)]",
54
+ // No state layer on a disabled destination.
55
+ "group-data-[disabled]:before:opacity-0"
56
+ ],
57
+ icon: [
58
+ "relative flex items-center justify-center text-on-surface-variant",
59
+ "transition-colors duration-150 ease-standard",
60
+ // Raw <svg> icons render at 24dp (Material Symbols set their own size).
61
+ "[&_svg]:size-6",
62
+ "group-data-[pressed]:text-on-secondary-container",
63
+ // M3 disabled: icon dims to on-surface/0.38. The item is the only `.group`,
64
+ // so the disabled+active override tests both attributes on that single
65
+ // element (see NavigationBar for the rationale).
66
+ "group-data-[disabled]:text-on-surface/[0.38]",
67
+ "group-[&[data-disabled][data-pressed]]:text-on-surface/[0.38]"
68
+ ],
69
+ label: [
70
+ "text-label-medium text-on-surface-variant",
71
+ "transition-colors duration-150 ease-standard",
72
+ "group-data-[pressed]:text-on-surface group-data-[pressed]:font-bold",
73
+ // M3 disabled: label dims to on-surface/0.38 (same-element override).
74
+ "group-data-[disabled]:text-on-surface/[0.38]",
75
+ "group-[&[data-disabled][data-pressed]]:text-on-surface/[0.38]"
76
+ ]
77
+ }
78
+ });
79
+ var s = navigationRailTv();
80
+ var NavigationRail = createNavigationRail({
81
+ root: s.root(),
82
+ header: s.header(),
83
+ item: s.item(),
84
+ iconWrap: s.iconWrap(),
85
+ indicator: s.indicator(),
86
+ icon: s.icon(),
87
+ label: s.label()
88
+ });
89
+
90
+ export { NavigationRail, navigationRailTv };
91
+ //# sourceMappingURL=navigation-rail.js.map
92
+ //# sourceMappingURL=navigation-rail.js.map
package/dist/navigation-rail.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/tv.ts","../src/navigation-rail.ts"],"names":["baseTv"],"mappings":";;;;;AAeA,IAAM,SAAA,GAAY;AAAA,EAChB,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,iBAAA;AAAA,EACA,gBAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA;AACF,CAAA;AAEO,IAAM,EAAA,GAAS,CAAC,OAAA,EAAS,MAAA,KAC9BA,KAAO,OAAA,EAAS;AAAA,EACd,GAAG,MAAA;AAAA,EACH,aAAA,EAAe;AAAA,IACb,MAAA,EAAQ;AAAA,MACN,WAAA,EAAa;AAAA,QACX,WAAA,EAAa,CAAC,EAAE,IAAA,EAAM,CAAC,GAAG,SAAS,GAAG;AAAA;AACxC;AACF;AAEJ,CAAC,CAAA;;;AC/BI,IAAM,mBAAmB,EAAA,CAAG;AAAA,EACjC,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,8DAAA;AAAA,IACN,MAAA,EAAQ,uCAAA;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,0EAAA;AAAA,MACA,iEAAA;AAAA;AAAA,MAEA;AAAA,KACF;AAAA,IACA,QAAA,EAAU,oDAAA;AAAA,IACV,SAAA,EAAW;AAAA,MACT,8DAAA;AAAA,MACA,8CAAA;AAAA,MACA,6CAAA;AAAA,MACA,4IAAA;AAAA,MACA,wDAAA;AAAA,MACA,gEAAA;AAAA,MACA,2DAAA;AAAA;AAAA,MAEA;AAAA,KACF;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,mEAAA;AAAA,MACA,8CAAA;AAAA;AAAA,MAEA,gBAAA;AAAA,MACA,kDAAA;AAAA;AAAA;AAAA;AAAA,MAIA,8CAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO;AAAA,MACL,2CAAA;AAAA,MACA,8CAAA;AAAA,MACA,qEAAA;AAAA;AAAA,MAEA,8CAAA;AAAA,MACA;AAAA;AACF;AAEJ,CAAC;AAED,IAAM,IAAI,gBAAA,EAAiB;AACpB,IAAM,iBAAiB,oBAAA,CAAqB;AAAA,EACjD,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,MAAA,EAAQ,EAAE,MAAA,EAAO;AAAA,EACjB,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,QAAA,EAAU,EAAE,QAAA,EAAS;AAAA,EACrB,SAAA,EAAW,EAAE,SAAA,EAAU;AAAA,EACvB,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,KAAA,EAAO,EAAE,KAAA;AACX,CAAC","file":"navigation-rail.js","sourcesContent":["/**\n * tv.ts — a tailwind-variants factory pre-configured for the M3 typescale.\n *\n * The Tailwind v4 preset exposes the 15 typescale roles as `text-<role>`\n * font-size utilities (e.g. `text-body-small`, `text-label-large`). Stock\n * tailwind-merge does not know these custom names, so it groups them with the\n * `text-<color>` utilities and drops one when a slot sets both a color *and* a\n * typescale (the common M3 case). That silently strips either the color or the\n * type, breaking token compliance.\n *\n * Teaching tailwind-merge that the typescale names belong to the `font-size`\n * group keeps color and type independent, so both survive the merge.\n */\nimport { type TV, tv as baseTv } from 'tailwind-variants';\n\nconst TYPESCALE = [\n 'display-large',\n 'display-medium',\n 'display-small',\n 'headline-large',\n 'headline-medium',\n 'headline-small',\n 'title-large',\n 'title-medium',\n 'title-small',\n 'body-large',\n 'body-medium',\n 'body-small',\n 'label-large',\n 'label-medium',\n 'label-small',\n] as const;\n\nexport const tv: TV = (options, config) =>\n baseTv(options, {\n ...config,\n twMergeConfig: {\n extend: {\n classGroups: {\n 'font-size': [{ text: [...TYPESCALE] }],\n },\n },\n },\n });\n","/**\n * navigation-rail.ts — tailwind-variants slots for the M3 NavigationRail.\n *\n * 80dp vertical rail on `surface`. The selected destination surfaces\n * `data-pressed` (Base UI Toggle); the pill, icon and label colors key off it\n * via the `group` on each item. State layer is the pill `::before`; the pointer\n * ripple is added by the factory. `Root` renders an optional leading `header`\n * (menu button / FAB). Same DOM + `data-*` as the VE build (mirrors NavigationBar).\n */\nimport { createNavigationRail } from '@m3-baseui/core';\nimport { tv } from './tv';\n\nexport const navigationRailTv = tv({\n slots: {\n root: 'flex flex-col items-center gap-3 h-full w-20 py-5 bg-surface',\n header: 'flex flex-col items-center gap-3 mb-1',\n item: [\n 'group relative flex flex-col items-center justify-center gap-1 px-1 py-1',\n 'bg-transparent border-0 cursor-pointer select-none outline-none',\n // M3 disabled is per-token (icon + label dimmed below), not a blanket fade.\n 'data-[disabled]:pointer-events-none',\n ],\n iconWrap: 'relative flex items-center justify-center w-14 h-8',\n indicator: [\n 'absolute inset-0 rounded-full bg-transparent overflow-hidden',\n 'transition-colors duration-150 ease-standard',\n 'group-data-[pressed]:bg-secondary-container',\n 'before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100',\n 'group-hover:before:opacity-[var(--md-sys-state-hover)]',\n 'group-focus-visible:before:opacity-[var(--md-sys-state-focus)]',\n 'group-active:before:opacity-[var(--md-sys-state-pressed)]',\n // No state layer on a disabled destination.\n 'group-data-[disabled]:before:opacity-0',\n ],\n icon: [\n 'relative flex items-center justify-center text-on-surface-variant',\n 'transition-colors duration-150 ease-standard',\n // Raw <svg> icons render at 24dp (Material Symbols set their own size).\n '[&_svg]:size-6',\n 'group-data-[pressed]:text-on-secondary-container',\n // M3 disabled: icon dims to on-surface/0.38. The item is the only `.group`,\n // so the disabled+active override tests both attributes on that single\n // element (see NavigationBar for the rationale).\n 'group-data-[disabled]:text-on-surface/[0.38]',\n 'group-[&[data-disabled][data-pressed]]:text-on-surface/[0.38]',\n ],\n label: [\n 'text-label-medium text-on-surface-variant',\n 'transition-colors duration-150 ease-standard',\n 'group-data-[pressed]:text-on-surface group-data-[pressed]:font-bold',\n // M3 disabled: label dims to on-surface/0.38 (same-element override).\n 'group-data-[disabled]:text-on-surface/[0.38]',\n 'group-[&[data-disabled][data-pressed]]:text-on-surface/[0.38]',\n ],\n },\n});\n\nconst s = navigationRailTv();\nexport const NavigationRail = createNavigationRail({\n root: s.root(),\n header: s.header(),\n item: s.item(),\n iconWrap: s.iconWrap(),\n indicator: s.indicator(),\n icon: s.icon(),\n label: s.label(),\n});\n"]}
package/dist/progress.d.ts CHANGED
@@ -7,16 +7,16 @@ import * as tailwind_variants from 'tailwind-variants';
7
7
  declare const linearTv: tailwind_variants.TVReturnType<{
8
8
  [key: string]: {
9
9
  [key: string]: tailwind_variants.ClassValue | {
10
- track?: tailwind_variants.ClassValue;
11
10
  root?: tailwind_variants.ClassValue;
11
+ track?: tailwind_variants.ClassValue;
12
12
  indicator?: tailwind_variants.ClassValue;
13
13
  };
14
14
  };
15
15
  } | {
16
16
  [x: string]: {
17
17
  [x: string]: tailwind_variants.ClassValue | {
18
- track?: tailwind_variants.ClassValue;
19
18
  root?: tailwind_variants.ClassValue;
19
+ track?: tailwind_variants.ClassValue;
20
20
  indicator?: tailwind_variants.ClassValue;
21
21
  };
22
22
  };
@@ -27,16 +27,16 @@ declare const linearTv: tailwind_variants.TVReturnType<{
27
27
  }, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
28
28
  [key: string]: {
29
29
  [key: string]: tailwind_variants.ClassValue | {
30
- track?: tailwind_variants.ClassValue;
31
30
  root?: tailwind_variants.ClassValue;
31
+ track?: tailwind_variants.ClassValue;
32
32
  indicator?: tailwind_variants.ClassValue;
33
33
  };
34
34
  };
35
35
  } | {}>, {
36
36
  [key: string]: {
37
37
  [key: string]: tailwind_variants.ClassValue | {
38
- track?: tailwind_variants.ClassValue;
39
38
  root?: tailwind_variants.ClassValue;
39
+ track?: tailwind_variants.ClassValue;
40
40
  indicator?: tailwind_variants.ClassValue;
41
41
  };
42
42
  };
@@ -51,8 +51,8 @@ declare const linearTv: tailwind_variants.TVReturnType<{
51
51
  }, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
52
52
  [key: string]: {
53
53
  [key: string]: tailwind_variants.ClassValue | {
54
- track?: tailwind_variants.ClassValue;
55
54
  root?: tailwind_variants.ClassValue;
55
+ track?: tailwind_variants.ClassValue;
56
56
  indicator?: tailwind_variants.ClassValue;
57
57
  };
58
58
  };
@@ -60,16 +60,16 @@ declare const linearTv: tailwind_variants.TVReturnType<{
60
60
  declare const circularTv: tailwind_variants.TVReturnType<{
61
61
  [key: string]: {
62
62
  [key: string]: tailwind_variants.ClassValue | {
63
- track?: tailwind_variants.ClassValue;
64
63
  root?: tailwind_variants.ClassValue;
64
+ track?: tailwind_variants.ClassValue;
65
65
  indicator?: tailwind_variants.ClassValue;
66
66
  };
67
67
  };
68
68
  } | {
69
69
  [x: string]: {
70
70
  [x: string]: tailwind_variants.ClassValue | {
71
- track?: tailwind_variants.ClassValue;
72
71
  root?: tailwind_variants.ClassValue;
72
+ track?: tailwind_variants.ClassValue;
73
73
  indicator?: tailwind_variants.ClassValue;
74
74
  };
75
75
  };
@@ -80,16 +80,16 @@ declare const circularTv: tailwind_variants.TVReturnType<{
80
80
  }, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
81
81
  [key: string]: {
82
82
  [key: string]: tailwind_variants.ClassValue | {
83
- track?: tailwind_variants.ClassValue;
84
83
  root?: tailwind_variants.ClassValue;
84
+ track?: tailwind_variants.ClassValue;
85
85
  indicator?: tailwind_variants.ClassValue;
86
86
  };
87
87
  };
88
88
  } | {}>, {
89
89
  [key: string]: {
90
90
  [key: string]: tailwind_variants.ClassValue | {
91
- track?: tailwind_variants.ClassValue;
92
91
  root?: tailwind_variants.ClassValue;
92
+ track?: tailwind_variants.ClassValue;
93
93
  indicator?: tailwind_variants.ClassValue;
94
94
  };
95
95
  };
@@ -104,15 +104,15 @@ declare const circularTv: tailwind_variants.TVReturnType<{
104
104
  }, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
105
105
  [key: string]: {
106
106
  [key: string]: tailwind_variants.ClassValue | {
107
- track?: tailwind_variants.ClassValue;
108
107
  root?: tailwind_variants.ClassValue;
108
+ track?: tailwind_variants.ClassValue;
109
109
  indicator?: tailwind_variants.ClassValue;
110
110
  };
111
111
  };
112
112
  } | {}>, unknown, unknown, undefined>>;
113
113
  declare const Progress: {
114
- Linear: react.ForwardRefExoticComponent<_m3_baseui_core.LinearProgressOwnProps & Omit<react.HTMLAttributes<HTMLDivElement>, "value" | "defaultValue"> & react.RefAttributes<HTMLDivElement>>;
115
- Circular: react.ForwardRefExoticComponent<_m3_baseui_core.CircularProgressOwnProps & Omit<react.HTMLAttributes<HTMLSpanElement>, "value" | "defaultValue"> & react.RefAttributes<HTMLSpanElement>>;
114
+ Linear: react.ForwardRefExoticComponent<_m3_baseui_core.LinearProgressOwnProps & Omit<react.HTMLAttributes<HTMLDivElement>, "defaultValue" | "value"> & react.RefAttributes<HTMLDivElement>>;
115
+ Circular: react.ForwardRefExoticComponent<_m3_baseui_core.CircularProgressOwnProps & Omit<react.HTMLAttributes<HTMLSpanElement>, "defaultValue" | "value"> & react.RefAttributes<HTMLSpanElement>>;
116
116
  };
117
117
 
118
118
  export { Progress, circularTv, linearTv };
package/dist/progress.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/progress.ts"],"names":[],"mappings":";;;;;AAYO,IAAM,WAAW,EAAA,CAAG;AAAA,EACzB,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,8DAAA;AAAA,IACN,KAAA,EAAO,4DAAA;AAAA,IACP,SAAA,EAAW;AAAA,MACT,mDAAA;AAAA,MACA,+CAAA;AAAA,MACA,6EAAA;AAAA,MACA;AAAA;AACF;AAEJ,CAAC;AAEM,IAAM,aAAa,EAAA,CAAG;AAAA,EAC3B,KAAA,EAAO;AAAA,IACL,IAAA,EAAM;AAAA,MACJ,iDAAA;AAAA,MACA,iCAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO,qDAAA;AAAA,IACP,SAAA,EAAW;AAAA,MACT,0DAAA;AAAA,MACA;AAAA;AACF;AAEJ,CAAC;AAED,IAAM,IAAI,QAAA,EAAS;AACnB,IAAM,IAAI,UAAA,EAAW;AACd,IAAM,WAAW,cAAA,CAAe;AAAA,EACrC,MAAA,EAAQ,EAAE,IAAA,EAAM,CAAA,CAAE,IAAA,EAAK,EAAG,KAAA,EAAO,CAAA,CAAE,KAAA,EAAM,EAAG,SAAA,EAAW,CAAA,CAAE,WAAU,EAAE;AAAA,EACrE,QAAA,EAAU,EAAE,IAAA,EAAM,CAAA,CAAE,IAAA,EAAK,EAAG,KAAA,EAAO,CAAA,CAAE,KAAA,EAAM,EAAG,SAAA,EAAW,CAAA,CAAE,WAAU;AACvE,CAAC","file":"progress.js","sourcesContent":["/**\n * progress.ts — tailwind-variants slots for the M3 Progress indicators.\n *\n * Linear: a 4dp `surface-container-highest` track with a `primary` active\n * indicator; the indeterminate slide animation keys off the Root's\n * `data-indeterminate` (see the `m3-linear-indeterminate` keyframe in\n * preset.css). Circular: a 48dp / 4dp `primary` ring whose arc is drawn by the\n * factory; `data-indeterminate` rotates the whole ring. Same DOM as the VE build.\n */\nimport { createProgress } from '@m3-baseui/core';\nimport { tv } from 'tailwind-variants';\n\nexport const linearTv = tv({\n slots: {\n root: 'group relative block w-full h-1 overflow-hidden rounded-full',\n track: 'absolute inset-0 bg-surface-container-highest rounded-full',\n indicator: [\n 'absolute inset-y-0 left-0 bg-primary rounded-full',\n 'transition-[width] duration-200 ease-standard',\n 'group-data-[indeterminate]:w-2/5 group-data-[indeterminate]:transition-none',\n 'group-data-[indeterminate]:animate-m3-linear-indeterminate',\n ],\n },\n});\n\nexport const circularTv = tv({\n slots: {\n root: [\n 'inline-flex items-center justify-center size-12',\n '[&_svg]:block [&_svg]:size-full',\n 'data-[indeterminate]:animate-spin',\n ],\n track: 'stroke-surface-container-highest [stroke-width:4px]',\n indicator: [\n 'stroke-primary [stroke-width:4px] [stroke-linecap:round]',\n 'transition-[stroke-dashoffset] duration-300 ease-standard',\n ],\n },\n});\n\nconst l = linearTv();\nconst c = circularTv();\nexport const Progress = createProgress({\n linear: { root: l.root(), track: l.track(), indicator: l.indicator() },\n circular: { root: c.root(), track: c.track(), indicator: c.indicator() },\n});\nexport type {\n LinearProgressProps,\n CircularProgressProps,\n} from '@m3-baseui/core';\n"]}
1
+ {"version":3,"sources":["../src/progress.ts"],"names":[],"mappings":";;;;;AAaO,IAAM,WAAW,EAAA,CAAG;AAAA,EACzB,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,8DAAA;AAAA,IACN,KAAA,EAAO,4DAAA;AAAA,IACP,SAAA,EAAW;AAAA,MACT,mDAAA;AAAA,MACA,+CAAA;AAAA,MACA,6EAAA;AAAA,MACA;AAAA;AACF;AAEJ,CAAC;AAEM,IAAM,aAAa,EAAA,CAAG;AAAA,EAC3B,KAAA,EAAO;AAAA,IACL,IAAA,EAAM;AAAA,MACJ,iDAAA;AAAA,MACA,iCAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO,qDAAA;AAAA,IACP,SAAA,EAAW;AAAA,MACT,0DAAA;AAAA,MACA;AAAA;AACF;AAEJ,CAAC;AAED,IAAM,IAAI,QAAA,EAAS;AACnB,IAAM,IAAI,UAAA,EAAW;AACd,IAAM,WAAW,cAAA,CAAe;AAAA,EACrC,MAAA,EAAQ,EAAE,IAAA,EAAM,CAAA,CAAE,IAAA,EAAK,EAAG,KAAA,EAAO,CAAA,CAAE,KAAA,EAAM,EAAG,SAAA,EAAW,CAAA,CAAE,WAAU,EAAE;AAAA,EACrE,QAAA,EAAU,EAAE,IAAA,EAAM,CAAA,CAAE,IAAA,EAAK,EAAG,KAAA,EAAO,CAAA,CAAE,KAAA,EAAM,EAAG,SAAA,EAAW,CAAA,CAAE,WAAU;AACvE,CAAC","file":"progress.js","sourcesContent":["/**\n * progress.ts — tailwind-variants slots for the M3 Progress indicators.\n *\n * Linear: a 4dp `surface-container-highest` track with a `primary` active\n * indicator; the indeterminate slide animation keys off the Root's\n * `data-indeterminate` (see the `m3-linear-indeterminate` keyframe in\n * preset.css). Circular: a 48dp / 4dp `primary` ring whose arc is drawn by the\n * factory; `data-indeterminate` rotates the whole ring via Tailwind's built-in\n * `animate-spin` (1s) — the VE build matches that period. Same DOM as the VE build.\n */\nimport { createProgress } from '@m3-baseui/core';\nimport { tv } from 'tailwind-variants';\n\nexport const linearTv = tv({\n slots: {\n root: 'group relative block w-full h-1 overflow-hidden rounded-full',\n track: 'absolute inset-0 bg-surface-container-highest rounded-full',\n indicator: [\n 'absolute inset-y-0 left-0 bg-primary rounded-full',\n 'transition-[width] duration-200 ease-standard',\n 'group-data-[indeterminate]:w-2/5 group-data-[indeterminate]:transition-none',\n 'group-data-[indeterminate]:animate-m3-linear-indeterminate',\n ],\n },\n});\n\nexport const circularTv = tv({\n slots: {\n root: [\n 'inline-flex items-center justify-center size-12',\n '[&_svg]:block [&_svg]:size-full',\n 'data-[indeterminate]:animate-spin',\n ],\n track: 'stroke-surface-container-highest [stroke-width:4px]',\n indicator: [\n 'stroke-primary [stroke-width:4px] [stroke-linecap:round]',\n 'transition-[stroke-dashoffset] duration-300 ease-standard',\n ],\n },\n});\n\nconst l = linearTv();\nconst c = circularTv();\nexport const Progress = createProgress({\n linear: { root: l.root(), track: l.track(), indicator: l.indicator() },\n circular: { root: c.root(), track: c.track(), indicator: c.indicator() },\n});\nexport type {\n LinearProgressProps,\n CircularProgressProps,\n} from '@m3-baseui/core';\n"]}
package/dist/segmented-button.d.ts CHANGED
@@ -7,20 +7,20 @@ import * as tailwind_variants from 'tailwind-variants';
7
7
  declare const segmentedButtonTv: tailwind_variants.TVReturnType<{
8
8
  [key: string]: {
9
9
  [key: string]: tailwind_variants.ClassValue | {
10
+ root?: tailwind_variants.ClassValue;
10
11
  label?: tailwind_variants.ClassValue;
11
12
  check?: tailwind_variants.ClassValue;
12
13
  icon?: tailwind_variants.ClassValue;
13
- root?: tailwind_variants.ClassValue;
14
14
  item?: tailwind_variants.ClassValue;
15
15
  };
16
16
  };
17
17
  } | {
18
18
  [x: string]: {
19
19
  [x: string]: tailwind_variants.ClassValue | {
20
+ root?: tailwind_variants.ClassValue;
20
21
  label?: tailwind_variants.ClassValue;
21
22
  check?: tailwind_variants.ClassValue;
22
23
  icon?: tailwind_variants.ClassValue;
23
- root?: tailwind_variants.ClassValue;
24
24
  item?: tailwind_variants.ClassValue;
25
25
  };
26
26
  };
@@ -33,20 +33,20 @@ declare const segmentedButtonTv: tailwind_variants.TVReturnType<{
33
33
  }, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
34
34
  [key: string]: {
35
35
  [key: string]: tailwind_variants.ClassValue | {
36
+ root?: tailwind_variants.ClassValue;
36
37
  label?: tailwind_variants.ClassValue;
37
38
  check?: tailwind_variants.ClassValue;
38
39
  icon?: tailwind_variants.ClassValue;
39
- root?: tailwind_variants.ClassValue;
40
40
  item?: tailwind_variants.ClassValue;
41
41
  };
42
42
  };
43
43
  } | {}>, {
44
44
  [key: string]: {
45
45
  [key: string]: tailwind_variants.ClassValue | {
46
+ root?: tailwind_variants.ClassValue;
46
47
  label?: tailwind_variants.ClassValue;
47
48
  check?: tailwind_variants.ClassValue;
48
49
  icon?: tailwind_variants.ClassValue;
49
- root?: tailwind_variants.ClassValue;
50
50
  item?: tailwind_variants.ClassValue;
51
51
  };
52
52
  };
@@ -65,10 +65,10 @@ declare const segmentedButtonTv: tailwind_variants.TVReturnType<{
65
65
  }, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
66
66
  [key: string]: {
67
67
  [key: string]: tailwind_variants.ClassValue | {
68
+ root?: tailwind_variants.ClassValue;
68
69
  label?: tailwind_variants.ClassValue;
69
70
  check?: tailwind_variants.ClassValue;
70
71
  icon?: tailwind_variants.ClassValue;
71
- root?: tailwind_variants.ClassValue;
72
72
  item?: tailwind_variants.ClassValue;
73
73
  };
74
74
  };
package/dist/select.d.ts CHANGED
@@ -9,8 +9,8 @@ declare const selectTv: tailwind_variants.TVReturnType<{
9
9
  value?: tailwind_variants.ClassValue;
10
10
  popup?: tailwind_variants.ClassValue;
11
11
  icon?: tailwind_variants.ClassValue;
12
- itemIndicator?: tailwind_variants.ClassValue;
13
12
  item?: tailwind_variants.ClassValue;
13
+ itemIndicator?: tailwind_variants.ClassValue;
14
14
  groupLabel?: tailwind_variants.ClassValue;
15
15
  trigger?: tailwind_variants.ClassValue;
16
16
  scrollUpArrow?: tailwind_variants.ClassValue;
@@ -23,8 +23,8 @@ declare const selectTv: tailwind_variants.TVReturnType<{
23
23
  value?: tailwind_variants.ClassValue;
24
24
  popup?: tailwind_variants.ClassValue;
25
25
  icon?: tailwind_variants.ClassValue;
26
- itemIndicator?: tailwind_variants.ClassValue;
27
26
  item?: tailwind_variants.ClassValue;
27
+ itemIndicator?: tailwind_variants.ClassValue;
28
28
  groupLabel?: tailwind_variants.ClassValue;
29
29
  trigger?: tailwind_variants.ClassValue;
30
30
  scrollUpArrow?: tailwind_variants.ClassValue;
@@ -47,8 +47,8 @@ declare const selectTv: tailwind_variants.TVReturnType<{
47
47
  value?: tailwind_variants.ClassValue;
48
48
  popup?: tailwind_variants.ClassValue;
49
49
  icon?: tailwind_variants.ClassValue;
50
- itemIndicator?: tailwind_variants.ClassValue;
51
50
  item?: tailwind_variants.ClassValue;
51
+ itemIndicator?: tailwind_variants.ClassValue;
52
52
  groupLabel?: tailwind_variants.ClassValue;
53
53
  trigger?: tailwind_variants.ClassValue;
54
54
  scrollUpArrow?: tailwind_variants.ClassValue;
@@ -61,8 +61,8 @@ declare const selectTv: tailwind_variants.TVReturnType<{
61
61
  value?: tailwind_variants.ClassValue;
62
62
  popup?: tailwind_variants.ClassValue;
63
63
  icon?: tailwind_variants.ClassValue;
64
- itemIndicator?: tailwind_variants.ClassValue;
65
64
  item?: tailwind_variants.ClassValue;
65
+ itemIndicator?: tailwind_variants.ClassValue;
66
66
  groupLabel?: tailwind_variants.ClassValue;
67
67
  trigger?: tailwind_variants.ClassValue;
68
68
  scrollUpArrow?: tailwind_variants.ClassValue;
@@ -95,8 +95,8 @@ declare const selectTv: tailwind_variants.TVReturnType<{
95
95
  value?: tailwind_variants.ClassValue;
96
96
  popup?: tailwind_variants.ClassValue;
97
97
  icon?: tailwind_variants.ClassValue;
98
- itemIndicator?: tailwind_variants.ClassValue;
99
98
  item?: tailwind_variants.ClassValue;
99
+ itemIndicator?: tailwind_variants.ClassValue;
100
100
  groupLabel?: tailwind_variants.ClassValue;
101
101
  trigger?: tailwind_variants.ClassValue;
102
102
  scrollUpArrow?: tailwind_variants.ClassValue;