@nextui-org/theme 0.0.0-dev-v2-20230420134926 → 0.0.0-dev-v2-20230423211529

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 (80) hide show
  1. package/dist/chunk-3B4SYPW2.mjs +18 -0
  2. package/dist/{chunk-ANRX4UF2.mjs → chunk-4XSCIGTZ.mjs} +1 -1
  3. package/dist/{chunk-XQ3KK6F3.mjs → chunk-7EKGN7JP.mjs} +6 -6
  4. package/dist/{chunk-DOBGL5T3.mjs → chunk-BLEVU2FW.mjs} +1 -1
  5. package/dist/{chunk-HZLJ4FYR.mjs → chunk-FDBBFTXB.mjs} +1 -1
  6. package/dist/{chunk-FGWYWKMA.mjs → chunk-FJNSTLAL.mjs} +21 -21
  7. package/dist/{chunk-MZ2ZBGLR.mjs → chunk-JWVJZEAT.mjs} +1 -1
  8. package/dist/{chunk-5Z3NCB7W.mjs → chunk-LCSLO6UV.mjs} +1 -1
  9. package/dist/{chunk-2QIDY5NZ.mjs → chunk-MW7UVOSP.mjs} +2 -2
  10. package/dist/{chunk-OS73LTIZ.mjs → chunk-NCFXYR7C.mjs} +6 -6
  11. package/dist/{chunk-QRMWQXOX.mjs → chunk-NQJBJXX3.mjs} +4 -4
  12. package/dist/{chunk-SN6PW6NR.mjs → chunk-OZPCO5UB.mjs} +7 -7
  13. package/dist/{chunk-Y63UYKP7.mjs → chunk-R47OQZR5.mjs} +2 -1
  14. package/dist/{chunk-LGGZKBOO.mjs → chunk-RO3WUCFF.mjs} +21 -21
  15. package/dist/chunk-TILCNEZM.mjs +212 -0
  16. package/dist/{chunk-FZQRP6V7.mjs → chunk-TYA6TT57.mjs} +9 -9
  17. package/dist/{chunk-64MHH33S.mjs → chunk-VS5PMCQU.mjs} +27 -8
  18. package/dist/{chunk-7GYSEREC.mjs → chunk-VZVHC65R.mjs} +1 -1
  19. package/dist/{chunk-B5S7HT6N.mjs → chunk-WFCALVUC.mjs} +1 -1
  20. package/dist/{chunk-CO6ANWRA.mjs → chunk-XUL76UJD.mjs} +1 -1
  21. package/dist/{chunk-KVW35URF.mjs → chunk-Z6VEZVD6.mjs} +14 -14
  22. package/dist/colors/index.js +21 -21
  23. package/dist/colors/index.mjs +2 -2
  24. package/dist/colors/semantic.js +21 -21
  25. package/dist/colors/semantic.mjs +1 -1
  26. package/dist/colors/types.d.ts +1 -1
  27. package/dist/colors.js +21 -21
  28. package/dist/colors.mjs +2 -2
  29. package/dist/components/avatar.js +21 -21
  30. package/dist/components/avatar.mjs +2 -2
  31. package/dist/components/badge.js +21 -21
  32. package/dist/components/badge.mjs +2 -2
  33. package/dist/components/button.js +22 -21
  34. package/dist/components/button.mjs +2 -2
  35. package/dist/components/checkbox.js +6 -6
  36. package/dist/components/checkbox.mjs +1 -1
  37. package/dist/components/chip.js +24 -24
  38. package/dist/components/chip.mjs +2 -2
  39. package/dist/components/code.js +21 -21
  40. package/dist/components/code.mjs +2 -2
  41. package/dist/components/dropdown-item.js +14 -14
  42. package/dist/components/dropdown-item.mjs +1 -1
  43. package/dist/components/index.d.ts +2 -0
  44. package/dist/components/index.js +324 -76
  45. package/dist/components/index.mjs +55 -47
  46. package/dist/components/link.mjs +1 -1
  47. package/dist/components/modal.d.ts +1 -1
  48. package/dist/components/navbar.js +27 -8
  49. package/dist/components/navbar.mjs +1 -1
  50. package/dist/components/pagination.js +29 -29
  51. package/dist/components/pagination.mjs +2 -2
  52. package/dist/components/popover.js +21 -21
  53. package/dist/components/popover.mjs +2 -2
  54. package/dist/components/radio.js +7 -7
  55. package/dist/components/radio.mjs +1 -1
  56. package/dist/components/snippet.js +21 -21
  57. package/dist/components/snippet.mjs +2 -2
  58. package/dist/components/spacer.d.ts +27 -0
  59. package/dist/components/spacer.js +42 -0
  60. package/dist/components/spacer.mjs +6 -0
  61. package/dist/components/spinner.js +1 -1
  62. package/dist/components/spinner.mjs +1 -1
  63. package/dist/components/table.d.ts +277 -0
  64. package/dist/components/table.js +236 -0
  65. package/dist/components/table.mjs +6 -0
  66. package/dist/components/toggle.js +6 -6
  67. package/dist/components/toggle.mjs +1 -1
  68. package/dist/components/user.js +2 -2
  69. package/dist/components/user.mjs +1 -1
  70. package/dist/index.d.ts +5 -2
  71. package/dist/index.js +349 -101
  72. package/dist/index.mjs +58 -50
  73. package/dist/plugin.js +21 -21
  74. package/dist/plugin.mjs +3 -3
  75. package/dist/utils/index.js +21 -21
  76. package/dist/utils/index.mjs +1 -1
  77. package/dist/utils/variants.js +21 -21
  78. package/dist/utils/variants.mjs +1 -1
  79. package/package.json +2 -2
  80. /package/dist/{chunk-NP4SOC4S.mjs → chunk-RH7YHIQY.mjs} +0 -0
@@ -0,0 +1,18 @@
1
+ // src/components/spacer.ts
2
+ import { tv } from "tailwind-variants";
3
+ var spacer = tv({
4
+ base: "w-px h-px inline-block",
5
+ variants: {
6
+ isInline: {
7
+ true: "inline-block",
8
+ false: "block"
9
+ }
10
+ },
11
+ defaultVariants: {
12
+ isInline: false
13
+ }
14
+ });
15
+
16
+ export {
17
+ spacer
18
+ };
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  colorVariants
3
- } from "./chunk-LGGZKBOO.mjs";
3
+ } from "./chunk-RO3WUCFF.mjs";
4
4
 
5
5
  // src/components/snippet.ts
6
6
  import { tv } from "tailwind-variants";
@@ -40,22 +40,22 @@ var checkbox = tv({
40
40
  variants: {
41
41
  color: {
42
42
  neutral: {
43
- wrapper: "after:bg-neutral after:text-neutral-contrastText text-neutral-contrastText"
43
+ wrapper: "after:bg-neutral after:text-neutral-foreground text-neutral-foreground"
44
44
  },
45
45
  primary: {
46
- wrapper: "after:bg-primary after:text-primary-contrastText text-primary-contrastText"
46
+ wrapper: "after:bg-primary after:text-primary-foreground text-primary-foreground"
47
47
  },
48
48
  secondary: {
49
- wrapper: "after:bg-secondary after:text-secondary-contrastText text-secondary-contrastText"
49
+ wrapper: "after:bg-secondary after:text-secondary-foreground text-secondary-foreground"
50
50
  },
51
51
  success: {
52
- wrapper: "after:bg-success after:text-success-contrastText text-success-contrastText"
52
+ wrapper: "after:bg-success after:text-success-foreground text-success-foreground"
53
53
  },
54
54
  warning: {
55
- wrapper: "after:bg-warning after:text-warning-contrastText text-warning-contrastText"
55
+ wrapper: "after:bg-warning after:text-warning-foreground text-warning-foreground"
56
56
  },
57
57
  danger: {
58
- wrapper: "after:bg-danger after:text-danger-contrastText text-danger-contrastText"
58
+ wrapper: "after:bg-danger after:text-danger-foreground text-danger-foreground"
59
59
  }
60
60
  },
61
61
  size: {
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  semanticColors
3
- } from "./chunk-FGWYWKMA.mjs";
3
+ } from "./chunk-FJNSTLAL.mjs";
4
4
  import {
5
5
  commonColors
6
6
  } from "./chunk-CRCBVLUP.mjs";
@@ -6,7 +6,7 @@ import {
6
6
  } from "./chunk-XLATS5QU.mjs";
7
7
  import {
8
8
  semanticColors
9
- } from "./chunk-FGWYWKMA.mjs";
9
+ } from "./chunk-FJNSTLAL.mjs";
10
10
  import {
11
11
  removeDefaultKeys
12
12
  } from "./chunk-37PIXVP4.mjs";
@@ -21,24 +21,24 @@ var base = {
21
21
  },
22
22
  content1: {
23
23
  DEFAULT: twColors.zinc[50],
24
- contrastText: twColors.zinc[900]
24
+ foreground: twColors.zinc[900]
25
25
  },
26
26
  content2: {
27
27
  DEFAULT: twColors.zinc[100],
28
- contrastText: twColors.zinc[800]
28
+ foreground: twColors.zinc[800]
29
29
  },
30
30
  content3: {
31
31
  DEFAULT: twColors.zinc[200],
32
- contrastText: twColors.zinc[700]
32
+ foreground: twColors.zinc[700]
33
33
  },
34
34
  content4: {
35
35
  DEFAULT: twColors.zinc[300],
36
- contrastText: twColors.zinc[600]
36
+ foreground: twColors.zinc[600]
37
37
  }
38
38
  },
39
39
  dark: {
40
40
  background: {
41
- DEFAULT: "#0B0B0C"
41
+ DEFAULT: "#000000"
42
42
  },
43
43
  foreground: {
44
44
  DEFAULT: "#ECEDEE"
@@ -48,19 +48,19 @@ var base = {
48
48
  },
49
49
  content1: {
50
50
  DEFAULT: twColors.zinc[900],
51
- contrastText: twColors.zinc[50]
51
+ foreground: twColors.zinc[50]
52
52
  },
53
53
  content2: {
54
54
  DEFAULT: twColors.zinc[800],
55
- contrastText: twColors.zinc[100]
55
+ foreground: twColors.zinc[100]
56
56
  },
57
57
  content3: {
58
58
  DEFAULT: twColors.zinc[700],
59
- contrastText: twColors.zinc[200]
59
+ foreground: twColors.zinc[200]
60
60
  },
61
61
  content4: {
62
62
  DEFAULT: twColors.zinc[600],
63
- contrastText: twColors.zinc[300]
63
+ foreground: twColors.zinc[300]
64
64
  }
65
65
  }
66
66
  };
@@ -68,32 +68,32 @@ var semanticColorsLight = {
68
68
  ...base.light,
69
69
  neutral: {
70
70
  ...twColors.zinc,
71
- contrastText: readableColor(twColors.zinc[300]),
71
+ foreground: readableColor(twColors.zinc[300]),
72
72
  DEFAULT: twColors.zinc[300]
73
73
  },
74
74
  primary: {
75
75
  ...commonColors.blue,
76
- contrastText: commonColors.white,
76
+ foreground: commonColors.white,
77
77
  DEFAULT: commonColors.blue[500]
78
78
  },
79
79
  secondary: {
80
80
  ...commonColors.purple,
81
- contrastText: commonColors.white,
81
+ foreground: commonColors.white,
82
82
  DEFAULT: commonColors.purple[500]
83
83
  },
84
84
  success: {
85
85
  ...commonColors.green,
86
- contrastText: commonColors.white,
86
+ foreground: commonColors.white,
87
87
  DEFAULT: commonColors.green[500]
88
88
  },
89
89
  warning: {
90
90
  ...commonColors.yellow,
91
- contrastText: commonColors.white,
91
+ foreground: commonColors.white,
92
92
  DEFAULT: commonColors.yellow[500]
93
93
  },
94
94
  danger: {
95
95
  ...commonColors.red,
96
- contrastText: commonColors.white,
96
+ foreground: commonColors.white,
97
97
  DEFAULT: commonColors.red[500]
98
98
  }
99
99
  };
@@ -101,32 +101,32 @@ var semanticColorsDark = {
101
101
  ...base.dark,
102
102
  neutral: {
103
103
  ...swapColorValues(twColors.zinc),
104
- contrastText: readableColor(twColors.zinc[700]),
104
+ foreground: readableColor(twColors.zinc[700]),
105
105
  DEFAULT: twColors.zinc[700]
106
106
  },
107
107
  primary: {
108
108
  ...swapColorValues(commonColors.blue),
109
109
  DEFAULT: commonColors.blue[500],
110
- contrastText: commonColors.white
110
+ foreground: commonColors.white
111
111
  },
112
112
  secondary: {
113
113
  ...swapColorValues(commonColors.purple),
114
- contrastText: commonColors.white,
114
+ foreground: commonColors.white,
115
115
  DEFAULT: commonColors.purple[400]
116
116
  },
117
117
  success: {
118
118
  ...swapColorValues(commonColors.green),
119
- contrastText: readableColor(commonColors.green[500]),
119
+ foreground: readableColor(commonColors.green[500]),
120
120
  DEFAULT: commonColors.green[500]
121
121
  },
122
122
  warning: {
123
123
  ...swapColorValues(commonColors.yellow),
124
- contrastText: readableColor(commonColors.yellow[500]),
124
+ foreground: readableColor(commonColors.yellow[500]),
125
125
  DEFAULT: commonColors.yellow[500]
126
126
  },
127
127
  danger: {
128
128
  ...swapColorValues(commonColors.red),
129
- contrastText: commonColors.white,
129
+ foreground: commonColors.white,
130
130
  DEFAULT: commonColors.red[500]
131
131
  }
132
132
  };
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  colorVariants
3
- } from "./chunk-LGGZKBOO.mjs";
3
+ } from "./chunk-RO3WUCFF.mjs";
4
4
 
5
5
  // src/components/popover.ts
6
6
  import { tv } from "tailwind-variants";
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  colorVariants
3
- } from "./chunk-LGGZKBOO.mjs";
3
+ } from "./chunk-RO3WUCFF.mjs";
4
4
 
5
5
  // src/components/badge.ts
6
6
  import { tv } from "tailwind-variants";
@@ -12,8 +12,8 @@ var user = tv({
12
12
  "data-[focus-visible=true]:dark:ring-offset-background-dark"
13
13
  ],
14
14
  wrapper: "inline-flex flex-col items-start",
15
- name: "text-sm text-foreground dark:text-foreground-dark",
16
- description: "text-xs text-neutral-500"
15
+ name: "text-sm text-inherit",
16
+ description: "text-xs text-neutral-400"
17
17
  }
18
18
  });
19
19
 
@@ -40,37 +40,37 @@ var toggle = tv({
40
40
  neutral: {
41
41
  wrapper: [
42
42
  "group-data-[checked=true]:bg-neutral-400",
43
- "group-data-[checked=true]:text-neutral-contrastText"
43
+ "group-data-[checked=true]:text-neutral-foreground"
44
44
  ]
45
45
  },
46
46
  primary: {
47
47
  wrapper: [
48
48
  "group-data-[checked=true]:bg-primary",
49
- "group-data-[checked=true]:text-primary-contrastText"
49
+ "group-data-[checked=true]:text-primary-foreground"
50
50
  ]
51
51
  },
52
52
  secondary: {
53
53
  wrapper: [
54
54
  "group-data-[checked=true]:bg-secondary",
55
- "group-data-[checked=true]:text-secondary-contrastText"
55
+ "group-data-[checked=true]:text-secondary-foreground"
56
56
  ]
57
57
  },
58
58
  success: {
59
59
  wrapper: [
60
60
  "group-data-[checked=true]:bg-success",
61
- "group-data-[checked=true]:text-success-contrastText"
61
+ "group-data-[checked=true]:text-success-foreground"
62
62
  ]
63
63
  },
64
64
  warning: {
65
65
  wrapper: [
66
66
  "group-data-[checked=true]:bg-warning",
67
- "group-data-[checked=true]:text-warning-contrastText"
67
+ "group-data-[checked=true]:text-warning-foreground"
68
68
  ]
69
69
  },
70
70
  danger: {
71
71
  wrapper: [
72
72
  "group-data-[checked=true]:bg-danger",
73
- "data-[checked=true]:text-danger-contrastText"
73
+ "data-[checked=true]:text-danger-foreground"
74
74
  ]
75
75
  }
76
76
  },
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  colorVariants
3
- } from "./chunk-LGGZKBOO.mjs";
3
+ } from "./chunk-RO3WUCFF.mjs";
4
4
  import {
5
5
  ringClasses
6
6
  } from "./chunk-INZK6TTL.mjs";
@@ -29,10 +29,10 @@ var chip = tv({
29
29
  variant: {
30
30
  solid: {},
31
31
  bordered: {
32
- base: "border-1.5 !bg-transparent"
32
+ base: "border-1.5 bg-transparent"
33
33
  },
34
34
  light: {
35
- base: "!bg-transparent"
35
+ base: "bg-transparent"
36
36
  },
37
37
  flat: {},
38
38
  faded: {
@@ -40,7 +40,7 @@ var chip = tv({
40
40
  },
41
41
  shadow: {},
42
42
  dot: {
43
- base: "border-1.5 border-neutral text-foreground !bg-transparent"
43
+ base: "border-1.5 border-neutral text-foreground bg-transparent"
44
44
  }
45
45
  },
46
46
  color: {
@@ -39,27 +39,27 @@ var radio = tv({
39
39
  variants: {
40
40
  color: {
41
41
  neutral: {
42
- control: "bg-neutral-500 text-neutral-contrastText",
42
+ control: "bg-neutral-500 text-neutral-foreground",
43
43
  wrapper: "group-data-[checked=true]:border-neutral-500"
44
44
  },
45
45
  primary: {
46
- control: "bg-primary text-primary-contrastText",
46
+ control: "bg-primary text-primary-foreground",
47
47
  wrapper: "group-data-[checked=true]:border-primary"
48
48
  },
49
49
  secondary: {
50
- control: "bg-secondary text-secondary-contrastText",
50
+ control: "bg-secondary text-secondary-foreground",
51
51
  wrapper: "group-data-[checked=true]:border-secondary"
52
52
  },
53
53
  success: {
54
- control: "bg-success text-success-contrastText",
54
+ control: "bg-success text-success-foreground",
55
55
  wrapper: "group-data-[checked=true]:border-success"
56
56
  },
57
57
  warning: {
58
- control: "bg-warning text-warning-contrastText",
58
+ control: "bg-warning text-warning-foreground",
59
59
  wrapper: "group-data-[checked=true]:border-warning"
60
60
  },
61
61
  danger: {
62
- control: "bg-danger text-danger-contrastText",
62
+ control: "bg-danger text-danger-foreground",
63
63
  wrapper: "group-data-[checked=true]:border-danger"
64
64
  }
65
65
  },
@@ -137,7 +137,7 @@ var radio = tv({
137
137
  },
138
138
  isInvalid: {
139
139
  true: {
140
- control: "bg-danger text-danger-contrastText",
140
+ control: "bg-danger text-danger-foreground",
141
141
  wrapper: "border-danger data-[checked=true]:border-danger",
142
142
  label: "text-danger",
143
143
  description: "text-danger-300"
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  colorVariants
3
- } from "./chunk-LGGZKBOO.mjs";
3
+ } from "./chunk-RO3WUCFF.mjs";
4
4
 
5
5
  // src/components/button.ts
6
6
  import { tv } from "tailwind-variants";
@@ -11,6 +11,7 @@ var button = tv({
11
11
  "inline-flex",
12
12
  "items-center",
13
13
  "justify-center",
14
+ "max-w-fit",
14
15
  "box-border",
15
16
  "appearance-none",
16
17
  "outline-none",
@@ -1,20 +1,20 @@
1
1
  // src/utils/variants.ts
2
2
  var solid = {
3
- neutral: "bg-neutral text-neutral-contrastText",
4
- primary: "bg-primary text-primary-contrastText",
5
- secondary: "bg-secondary text-secondary-contrastText",
6
- success: "bg-success text-success-contrastText",
7
- warning: "bg-warning text-warning-contrastText",
8
- danger: "bg-danger text-danger-contrastText",
3
+ neutral: "bg-neutral text-neutral-foreground",
4
+ primary: "bg-primary text-primary-foreground",
5
+ secondary: "bg-secondary text-secondary-foreground",
6
+ success: "bg-success text-success-foreground",
7
+ warning: "bg-warning text-warning-foreground",
8
+ danger: "bg-danger text-danger-foreground",
9
9
  foreground: "bg-foreground text-background"
10
10
  };
11
11
  var shadow = {
12
- neutral: "shadow-lg shadow-neutral/50 bg-neutral text-neutral-contrastText",
13
- primary: "shadow-lg shadow-primary/40 bg-primary text-primary-contrastText",
14
- secondary: "shadow-lg shadow-secondary/40 bg-secondary text-secondary-contrastText",
15
- success: "shadow-lg shadow-success/40 bg-success text-success-contrastText",
16
- warning: "shadow-lg shadow-warning/40 bg-warning text-warning-contrastText",
17
- danger: "shadow-lg shadow-danger/40 bg-danger text-danger-contrastText",
12
+ neutral: "shadow-lg shadow-neutral/50 bg-neutral text-neutral-foreground",
13
+ primary: "shadow-lg shadow-primary/40 bg-primary text-primary-foreground",
14
+ secondary: "shadow-lg shadow-secondary/40 bg-secondary text-secondary-foreground",
15
+ success: "shadow-lg shadow-success/40 bg-success text-success-foreground",
16
+ warning: "shadow-lg shadow-warning/40 bg-warning text-warning-foreground",
17
+ danger: "shadow-lg shadow-danger/40 bg-danger text-danger-foreground",
18
18
  foreground: "shadow-lg shadow-foreground/40 bg-foreground text-background"
19
19
  };
20
20
  var bordered = {
@@ -27,7 +27,7 @@ var bordered = {
27
27
  foreground: "bg-transparent border-foreground text-foreground"
28
28
  };
29
29
  var flat = {
30
- neutral: "bg-neutral-100 text-neutral-contrastText",
30
+ neutral: "bg-neutral-100 text-neutral-foreground",
31
31
  primary: "bg-primary-50 text-primary",
32
32
  secondary: "bg-secondary-100 text-secondary",
33
33
  success: "bg-success-50 text-success",
@@ -36,7 +36,7 @@ var flat = {
36
36
  foreground: "bg-foreground/10 text-foreground"
37
37
  };
38
38
  var faded = {
39
- neutral: "border-neutral bg-neutral-100 text-neutral-contrastText",
39
+ neutral: "border-neutral bg-neutral-100 text-neutral-foreground",
40
40
  primary: "border-neutral bg-neutral-100 text-primary",
41
41
  secondary: "border-neutral bg-neutral-100 text-secondary",
42
42
  success: "border-neutral bg-neutral-100 text-success",
@@ -45,7 +45,7 @@ var faded = {
45
45
  foreground: "border-neutral bg-neutral-100 text-foreground"
46
46
  };
47
47
  var light = {
48
- neutral: "bg-transparent text-neutral-contrastText",
48
+ neutral: "bg-transparent text-neutral-foreground",
49
49
  primary: "bg-transparent text-primary",
50
50
  secondary: "bg-transparent text-secondary",
51
51
  success: "bg-transparent text-success",
@@ -54,12 +54,12 @@ var light = {
54
54
  foreground: "bg-transparent text-foreground"
55
55
  };
56
56
  var ghost = {
57
- neutral: "border-neutral text-neutral-contrastText hover:!bg-neutral",
58
- primary: "border-primary text-primary hover:!text-primary-contrastText hover:!bg-primary",
59
- secondary: "border-secondary text-secondary hover:text-secondary-contrastText hover:!bg-secondary",
60
- success: "border-success text-success hover:!text-success-contrastText hover:!bg-success",
61
- warning: "border-warning text-warning hover:!text-warning-contrastText hover:!bg-warning",
62
- danger: "border-danger text-danger hover:!text-danger-contrastText hover:!bg-danger",
57
+ neutral: "border-neutral text-neutral-foreground hover:!bg-neutral",
58
+ primary: "border-primary text-primary hover:!text-primary-foreground hover:!bg-primary",
59
+ secondary: "border-secondary text-secondary hover:text-secondary-foreground hover:!bg-secondary",
60
+ success: "border-success text-success hover:!text-success-foreground hover:!bg-success",
61
+ warning: "border-warning text-warning hover:!text-warning-foreground hover:!bg-warning",
62
+ danger: "border-danger text-danger hover:!text-danger-foreground hover:!bg-danger",
63
63
  foreground: "border-foreground text-foreground hover:!bg-foreground"
64
64
  };
65
65
  var colorVariants = {
@@ -0,0 +1,212 @@
1
+ // src/components/table.ts
2
+ import { tv } from "tailwind-variants";
3
+ var focusRing = [
4
+ "data-[focus-visible=true]:outline-none",
5
+ "data-[focus-visible=true]:ring-2",
6
+ "data-[focus-visible=true]:ring-primary",
7
+ "data-[focus-visible=true]:ring-offset-2",
8
+ "data-[focus-visible=true]:ring-offset-background",
9
+ "data-[focus-visible=true]:dark:ring-offset-background-dark"
10
+ ];
11
+ var table = tv({
12
+ slots: {
13
+ base: [
14
+ "p-4",
15
+ "flex",
16
+ "flex-col",
17
+ "relative",
18
+ "justify-between",
19
+ "gap-4",
20
+ "border",
21
+ "border-neutral-100",
22
+ "overflow-auto"
23
+ ],
24
+ table: "min-w-full h-auto",
25
+ thead: "[&>tr]:first:rounded-lg",
26
+ tbody: "",
27
+ tr: ["group", "outline-none", ...focusRing],
28
+ th: [
29
+ "group",
30
+ "px-3",
31
+ "h-10",
32
+ "text-left",
33
+ "align-middle",
34
+ "bg-neutral-100",
35
+ "text-neutral-500",
36
+ "text-xs",
37
+ "font-semibold",
38
+ "first:rounded-l-lg",
39
+ "last:rounded-r-lg",
40
+ "outline-none",
41
+ "data-[sortable=true]:transition-colors",
42
+ "data-[sortable=true]:cursor-pointer",
43
+ "data-[hover=true]:text-neutral-400",
44
+ ...focusRing
45
+ ],
46
+ td: [
47
+ "py-2",
48
+ "px-3",
49
+ "relative",
50
+ "align-middle",
51
+ "whitespace-normal",
52
+ "text-base",
53
+ "font-normal",
54
+ "outline-none",
55
+ ...focusRing,
56
+ "before:content-['']",
57
+ "before:absolute",
58
+ "before:-z-[1]",
59
+ "before:inset-0",
60
+ "before:opacity-0",
61
+ "data-[selected=true]:before:opacity-100",
62
+ "group-data-[disabled=true]:text-neutral-300"
63
+ ],
64
+ tfoot: "",
65
+ sortIcon: [
66
+ "ml-2",
67
+ "mb-px",
68
+ "opacity-0",
69
+ "text-inherit",
70
+ "inline-block",
71
+ "transition-transform-opacity",
72
+ "data-[visible=true]:opacity-100",
73
+ "group-data-[hover=true]:opacity-100",
74
+ "data-[direction=ascending]:rotate-180"
75
+ ],
76
+ emptyWrapper: "text-neutral-400 align-middle text-center h-40",
77
+ loadingWrapper: "absolute inset-0 flex items-center justify-center"
78
+ },
79
+ variants: {
80
+ color: {
81
+ neutral: {
82
+ td: "before:bg-neutral-200 dark:before:bg-neutral-100 data-[selected=true]:text-neutral-foreground"
83
+ },
84
+ primary: {
85
+ td: "before:bg-primary-50 data-[selected=true]:text-primary"
86
+ },
87
+ secondary: {
88
+ td: "before:bg-secondary-100 data-[selected=true]:text-secondary"
89
+ },
90
+ success: {
91
+ td: "before:bg-success-50 data-[selected=true]:text-success"
92
+ },
93
+ warning: {
94
+ td: "before:bg-warning-50 data-[selected=true]:text-warning"
95
+ },
96
+ danger: {
97
+ td: "before:bg-danger-50 data-[selected=true]:text-danger"
98
+ }
99
+ },
100
+ layout: {
101
+ auto: {
102
+ table: "table-auto"
103
+ },
104
+ fixed: {
105
+ table: "table-fixed"
106
+ }
107
+ },
108
+ radius: {
109
+ none: {
110
+ base: "rounded-none"
111
+ },
112
+ base: {
113
+ base: "rounded"
114
+ },
115
+ sm: {
116
+ base: "rounded-sm"
117
+ },
118
+ md: {
119
+ base: "rounded-md"
120
+ },
121
+ lg: {
122
+ base: "rounded-lg"
123
+ },
124
+ xl: {
125
+ base: "rounded-xl"
126
+ },
127
+ "2xl": {
128
+ base: "rounded-2xl"
129
+ }
130
+ },
131
+ shadow: {
132
+ none: {
133
+ base: "shadow-none"
134
+ },
135
+ sm: {
136
+ base: "shadow-sm"
137
+ },
138
+ md: {
139
+ base: "shadow-md"
140
+ },
141
+ lg: {
142
+ base: "shadow-lg"
143
+ },
144
+ xl: {
145
+ base: "shadow-xl"
146
+ },
147
+ "2xl": {
148
+ base: "shadow-2xl"
149
+ },
150
+ inner: {
151
+ base: "shadow-inner"
152
+ }
153
+ },
154
+ hideHeader: {
155
+ true: {
156
+ thead: "hidden"
157
+ }
158
+ },
159
+ isStriped: {
160
+ true: {
161
+ td: [
162
+ "group-data-[odd=true]:before:bg-neutral-100",
163
+ "group-data-[odd=true]:before:opacity-100"
164
+ ]
165
+ }
166
+ },
167
+ isHeaderSticky: {
168
+ true: {
169
+ thead: "sticky top-0 z-10 [&>tr]:first:shadow"
170
+ }
171
+ },
172
+ isSelectable: {
173
+ true: {
174
+ tr: "cursor-default",
175
+ td: ["group-data-[hover=true]:before:opacity-70"]
176
+ }
177
+ },
178
+ isMultiSelectable: {
179
+ true: {
180
+ td: [
181
+ "group-data-[first=true]:first:before:rounded-tl-lg",
182
+ "group-data-[first=true]:last:before:rounded-tr-lg",
183
+ "group-data-[middle=true]:before:rounded-none",
184
+ "group-data-[last=true]:first:before:rounded-bl-lg",
185
+ "group-data-[last=true]:last:before:rounded-br-lg"
186
+ ]
187
+ },
188
+ false: {
189
+ td: ["first:before:rounded-l-lg", "last:before:rounded-r-lg"]
190
+ }
191
+ },
192
+ fullWidth: {
193
+ true: {
194
+ base: "w-full",
195
+ table: "w-full"
196
+ }
197
+ }
198
+ },
199
+ defaultVariants: {
200
+ layout: "auto",
201
+ shadow: "lg",
202
+ radius: "xl",
203
+ color: "neutral",
204
+ hideHeader: false,
205
+ isStriped: false,
206
+ fullWidth: true
207
+ }
208
+ });
209
+
210
+ export {
211
+ table
212
+ };