daisyui 5.0.0-alpha.2 → 5.0.0-alpha.4

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 (42) hide show
  1. package/colors.css +8640 -0
  2. package/components/badge/class.json +18 -0
  3. package/components/button/class.json +24 -0
  4. package/components/button/index.js +12 -10
  5. package/components/button.css +10 -8
  6. package/components/checkbox/class.json +17 -0
  7. package/components/input/class.json +16 -0
  8. package/components/kbd/class.json +7 -0
  9. package/components/loading/class.json +21 -0
  10. package/components/loading/config.js +12 -0
  11. package/components/loading/index.css +1 -0
  12. package/components/loading/index.js +39 -0
  13. package/components/loading.css +42 -0
  14. package/components/mask/class.json +24 -0
  15. package/components/menu/class.json +15 -0
  16. package/components/menu/config.js +12 -0
  17. package/components/menu/index.css +1 -0
  18. package/components/menu/index.js +129 -0
  19. package/components/menu.css +237 -0
  20. package/components/radio/class.json +14 -0
  21. package/components/range/class.json +14 -0
  22. package/components/rating/class.json +5 -0
  23. package/components/select/class.json +16 -0
  24. package/components/tab/class.json +13 -0
  25. package/components/tab/config.js +12 -0
  26. package/components/tab/index.css +1 -0
  27. package/components/tab/index.js +165 -0
  28. package/components/tab.css +229 -0
  29. package/components/toggle/class.json +16 -0
  30. package/components/tooltip/class.json +15 -0
  31. package/components/tooltip/config.js +12 -0
  32. package/components/tooltip/index.css +1 -0
  33. package/components/tooltip/index.js +135 -0
  34. package/components/tooltip.css +173 -0
  35. package/full.css +20 -0
  36. package/functions/plugin.js +8 -8
  37. package/index.css +4 -0
  38. package/package.json +3 -1
  39. package/themes/dark/index.css +1 -0
  40. package/themes/default/index.css +1 -0
  41. package/themes/index.css +1 -0
  42. package/themes/light/index.css +1 -0
@@ -0,0 +1,229 @@
1
+ .tabs {
2
+ display: inline-grid;
3
+ align-items: flex-end;
4
+ vertical-align: bottom;
5
+ }
6
+ .tab {
7
+ position: relative;
8
+ grid-row-start: 1;
9
+ display: inline-flex;
10
+ height: var(--spacing-8, 2rem);
11
+ cursor: pointer;
12
+ appearance: none;
13
+ flex-wrap: wrap;
14
+ align-items: center;
15
+ justify-content: center;
16
+ text-align: center;
17
+ font-size: var(--font-size-sm, 0.875rem);
18
+ line-height: var(--tw-leading, var(--font-size-sm--line-height, 1.25rem));
19
+ --tw-leading: var(--line-height-loose, 2);
20
+ line-height: var(--line-height-loose, 2);
21
+ color: color-mix(in srgb, var(--color-base-content, oklch(27.8078% 0.029596 256.84795)) 50%, transparent);
22
+ -webkit-user-select: none;
23
+ user-select: none;
24
+ &:hover {
25
+ @media (hover: hover) {
26
+ color: var(--color-base-content, oklch(27.8078% 0.029596 256.84795));
27
+ }
28
+ }
29
+ --tab-padding: 1rem;
30
+ --tab-color: oklch(27.8078% 0.029596 256.84795);
31
+ --tab-bg: oklch(100% 0 0);
32
+ --tab-border-color: oklch(92.4169% 0.00108 197.137559);
33
+ color: var(--tab-color);
34
+ padding-inline-start: var(--tab-padding, 1rem);
35
+ padding-inline-end: var(--tab-padding, 1rem);
36
+ &:is(input[type="radio"]) {
37
+ width: auto;
38
+ border-bottom-right-radius: 0;
39
+ border-bottom-left-radius: 0;
40
+ &:after {
41
+ --tw-content: attr(aria-label);
42
+ content: var(--tw-content);
43
+ }
44
+ }
45
+ &:checked, &:is(.tab-active, [aria-selected="true"]) {
46
+ &+.tab-content {
47
+ display: block;
48
+ }
49
+ }
50
+ &:not(input):empty {
51
+ cursor: default;
52
+ grid-column-start: span 9999;
53
+ }
54
+ &:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]), &:is(input:checked) {
55
+ border-color: var(--color-base-content, oklch(27.8078% 0.029596 256.84795));
56
+ }
57
+ &:focus {
58
+ outline: 2px solid transparent;
59
+ outline-offset: 2px;
60
+ }
61
+ &:focus-visible {
62
+ outline: 2px solid currentColor;
63
+ outline-offset: -5px;
64
+ }
65
+ &-disabled, &[disabled] {
66
+ cursor: not-allowed;
67
+ color: color-mix(in srgb, var(--color-base-content, oklch(27.8078% 0.029596 256.84795)) 20%, transparent);
68
+ }
69
+ &[disabled], &[disabled]:hover {
70
+ cursor: not-allowed;
71
+ color: color-mix(in srgb, var(--color-base-content, oklch(27.8078% 0.029596 256.84795)) 29%, transparent);
72
+ }
73
+ }
74
+ .tabs-bordered {
75
+ &>.tab {
76
+ border-color: color-mix(in srgb, var(--color-base-content, oklch(27.8078% 0.029596 256.84795)) 20%, transparent);
77
+ border-style: solid;
78
+ border-width: 0;
79
+ border-bottom-width: calc(var(--spacing-tab-border, 1px) + 1px);
80
+ }
81
+ }
82
+ .tabs-lifted {
83
+ &>.tab:focus-visible {
84
+ border-end-end-radius: 0;
85
+ border-end-start-radius: 0;
86
+ }
87
+ &:has(.tab-content[class^="rounded-"]) .tab:first-child:not(:is(.tab-active, [aria-selected="true"])), &:has(.tab-content[class*=" rounded-"]) .tab:first-child:not(:is(.tab-active, [aria-selected="true"])) {
88
+ border-bottom-color: transparent;
89
+ }
90
+ &>.tab {
91
+ border: var(--spacing-tab-border, 1px) solid transparent;
92
+ border-width: 0 0 var(--spacing-tab-border, 1px) 0;
93
+ border-start-start-radius: var(--tab-radius, 0.5rem);
94
+ border-start-end-radius: var(--tab-radius, 0.5rem);
95
+ border-bottom-color: var(--tab-border-color);
96
+ padding-inline-start: var(--tab-padding, 1rem);
97
+ padding-inline-end: var(--tab-padding, 1rem);
98
+ padding-top: var(--spacing-tab-border, 1px);
99
+ &:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]), &:is(input:checked) {
100
+ background-color: var(--tab-bg);
101
+ border-width: var(--spacing-tab-border, 1px) var(--spacing-tab-border, 1px) 0 var(--spacing-tab-border, 1px);
102
+ border-inline-start-color: var(--tab-border-color);
103
+ border-inline-end-color: var(--tab-border-color);
104
+ border-top-color: var(--tab-border-color);
105
+ padding-inline-start: calc(var(--tab-padding, 1rem) - var(--spacing-tab-border, 1px));
106
+ padding-inline-end: calc(var(--tab-padding, 1rem) - var(--spacing-tab-border, 1px));
107
+ padding-bottom: var(--spacing-tab-border, 1px);
108
+ padding-top: 0;
109
+ &:before {
110
+ z-index: 1;
111
+ content: "";
112
+ display: block;
113
+ position: absolute;
114
+ width: calc(100% + var(--tab-radius, 0.5rem) * 2);
115
+ height: var(--tab-radius, 0.5rem);
116
+ bottom: 0;
117
+ background-size: var(--tab-radius, 0.5rem);
118
+ background-position: top left, top right;
119
+ background-repeat: no-repeat;
120
+ --tab-grad: calc(69% - var(--spacing-tab-border, 1px));
121
+ --radius-start: radial-gradient(circle at top left,
122
+ transparent var(--tab-grad),
123
+ var(--tab-border-color) calc(var(--tab-grad) + 0.25px),
124
+ var(--tab-border-color) calc(var(--tab-grad) + var(--spacing-tab-border, 1px)),
125
+ var(--tab-bg) calc(var(--tab-grad) + var(--spacing-tab-border, 1px) + 0.25px));
126
+ --radius-end: radial-gradient(circle at top right,
127
+ transparent var(--tab-grad),
128
+ var(--tab-border-color) calc(var(--tab-grad) + 0.25px),
129
+ var(--tab-border-color) calc(var(--tab-grad) + var(--spacing-tab-border, 1px)),
130
+ var(--tab-bg) calc(var(--tab-grad) + var(--spacing-tab-border, 1px) + 0.25px));
131
+ background-image: var(--radius-start), var(--radius-end);
132
+ }
133
+ &:first-child:before {
134
+ background-image: var(--radius-end);
135
+ background-position: top right;
136
+ [dir="rtl"] & {
137
+ background-image: var(--radius-start);
138
+ background-position: top left;
139
+ }
140
+ }
141
+ &:last-child:before {
142
+ background-image: var(--radius-start);
143
+ background-position: top left;
144
+ [dir="rtl"] & {
145
+ background-image: var(--radius-end);
146
+ background-position: top right;
147
+ }
148
+ }
149
+ }
150
+ }
151
+ }
152
+ .tabs-lifted {
153
+ &> :is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled])+.tabs-lifted :is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]), &>.tab:is(input:checked)+.tabs-lifted .tab:is(input:checked) {
154
+ &:before {
155
+ background-image: var(--radius-end);
156
+ background-position: top right;
157
+ }
158
+ }
159
+ }
160
+ .tabs-boxed {
161
+ border-radius: var(--radius-btn, 0.5rem);
162
+ background-color: var(--color-base-200, oklch(96.1151% 0 0));
163
+ padding: var(--spacing-1, 0.25rem);
164
+ .tab {
165
+ border-radius: var(--radius-btn, 0.5rem);
166
+ }
167
+ :is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]), :is(input:checked) {
168
+ background-color: var(--color-primary, oklch(49.12% 0.3096 275.75));
169
+ color: var(--color-primary-content, oklch(89.824% 0.06192 275.75));
170
+ &:hover {
171
+ @media (hover: hover) {
172
+ color: var(--color-primary-content, oklch(89.824% 0.06192 275.75));
173
+ }
174
+ }
175
+ }
176
+ }
177
+ .tab-content {
178
+ grid-column-start: 1;
179
+ grid-column-end: span 9999;
180
+ grid-row-start: 2;
181
+ display: none;
182
+ border-color: transparent;
183
+ border-width: var(--spacing-tab-border, 1px);
184
+ margin-top: calc(var(--spacing-tab-border) * -1);
185
+ min-width: calc(100% + 1.5rem);
186
+ :checked+&:nth-child(2), :is(.tab-active, [aria-selected="true"])+&:nth-child(2) {
187
+ border-start-start-radius: 0;
188
+ }
189
+ }
190
+ .tabs-md {
191
+ :where(.tab) {
192
+ height: var(--spacing-8, 2rem);
193
+ font-size: var(--font-size-sm, 0.875rem);
194
+ line-height: var(--tw-leading, var(--font-size-sm--line-height, 1.25rem));
195
+ --tw-leading: var(--line-height-loose, 2);
196
+ line-height: var(--line-height-loose, 2);
197
+ --tab-padding: 1rem;
198
+ }
199
+ }
200
+ .tabs-lg {
201
+ :where(.tab) {
202
+ height: var(--spacing-12, 3rem);
203
+ font-size: var(--font-size-lg, 1.125rem);
204
+ line-height: var(--tw-leading, var(--font-size-lg--line-height, 1.75rem));
205
+ --tw-leading: var(--line-height-loose, 2);
206
+ line-height: var(--line-height-loose, 2);
207
+ --tab-padding: 1.25rem;
208
+ }
209
+ }
210
+ .tabs-sm {
211
+ :where(.tab) {
212
+ height: var(--spacing-6, 1.5rem);
213
+ font-size: var(--font-size-sm, 0.875rem);
214
+ line-height: var(--tw-leading, var(--font-size-sm--line-height, 1.25rem));
215
+ --tw-leading: var(--line-height-3, 0.75rem);
216
+ line-height: var(--line-height-3, 0.75rem);
217
+ --tab-padding: 0.75rem;
218
+ }
219
+ }
220
+ .tabs-xs {
221
+ :where(.tab) {
222
+ height: var(--spacing-5, 1.25rem);
223
+ font-size: var(--font-size-xs, 0.75rem);
224
+ line-height: var(--tw-leading, var(--font-size-xs--line-height, 1rem));
225
+ --tw-leading: var(--line-height-3, 0.75rem);
226
+ line-height: var(--line-height-3, 0.75rem);
227
+ --tab-padding: 0.5rem;
228
+ }
229
+ }
@@ -0,0 +1,16 @@
1
+ [
2
+ "toggle",
3
+ "1s",
4
+ "2s",
5
+ "toggle-primary",
6
+ "toggle-secondary",
7
+ "toggle-accent",
8
+ "toggle-success",
9
+ "toggle-warning",
10
+ "toggle-info",
11
+ "toggle-error",
12
+ "toggle-xs",
13
+ "toggle-sm",
14
+ "toggle-md",
15
+ "toggle-lg"
16
+ ]
@@ -0,0 +1,15 @@
1
+ [
2
+ "tooltip",
3
+ "tooltip-top",
4
+ "tooltip-bottom",
5
+ "tooltip-left",
6
+ "tooltip-right",
7
+ "tooltip-open",
8
+ "tooltip-primary",
9
+ "tooltip-secondary",
10
+ "tooltip-accent",
11
+ "tooltip-info",
12
+ "tooltip-success",
13
+ "tooltip-warning",
14
+ "tooltip-error"
15
+ ]
@@ -0,0 +1,12 @@
1
+ import { plugin } from '../../functions/plugin.js';
2
+ import index from './index.js';
3
+
4
+ export default {
5
+ plugins: [
6
+ plugin(({ addComponents }) => {
7
+ addComponents({
8
+ ...index
9
+ });
10
+ })
11
+ ],
12
+ };
@@ -0,0 +1 @@
1
+ @config "./config.js";
@@ -0,0 +1,135 @@
1
+ export default {
2
+ ".tooltip": {
3
+ "@apply relative inline-block": {},
4
+ "--tooltip-color": "theme(colors.neutral)",
5
+ "--tooltip-tail": "0.1875rem",
6
+ "--tooltip-text-color": "theme(colors.neutral-content)",
7
+ "--tooltip-offset": "calc(100% + 1px + var(--tooltip-tail, 0px))",
8
+ "--tooltip-tail-offset": "calc(100% + 0.0625rem - var(--tooltip-tail))",
9
+ "&:before": {
10
+ "@apply absolute max-w-xs rounded px-2 py-1 text-sm whitespace-normal opacity-0 transition delay-100 duration-200 ease-in-out text-center": {},
11
+ "backgroundColor": "var(--tooltip-color)",
12
+ "color": "var(--tooltip-text-color)",
13
+ "width": "max-content",
14
+ "pointerEvents": "none",
15
+ "zIndex": 1,
16
+ "content": "var(--tw-content)",
17
+ "--tw-content": "attr(data-tip)"
18
+ },
19
+ "&:after": {
20
+ "@apply absolute opacity-0 transition delay-100 duration-200 ease-in-out": {},
21
+ "content": "\"\"",
22
+ "borderStyle": "solid",
23
+ "borderWidth": "var(--tooltip-tail, 0)",
24
+ "width": "0",
25
+ "height": "0",
26
+ "display": "block",
27
+ "position": "absolute"
28
+ },
29
+ "&.tooltip-open,\n &:hover,\n &:has(:focus-visible)": {
30
+ "&:before,\n &:after": {
31
+ "@apply opacity-100 delay-75": {}
32
+ }
33
+ }
34
+ },
35
+ ".tooltip,\n.tooltip-top": {
36
+ "&:before": {
37
+ "transform": "translateX(-50%)",
38
+ "top": "auto",
39
+ "left": "50%",
40
+ "right": "auto",
41
+ "bottom": "var(--tooltip-offset)"
42
+ },
43
+ "&:after": {
44
+ "transform": "translateX(-50%)",
45
+ "borderColor": "var(--tooltip-color) transparent transparent transparent",
46
+ "top": "auto",
47
+ "left": "50%",
48
+ "right": "auto",
49
+ "bottom": "var(--tooltip-tail-offset)"
50
+ }
51
+ },
52
+ ".tooltip-bottom": {
53
+ "&:before": {
54
+ "transform": "translateX(-50%)",
55
+ "top": "var(--tooltip-offset)",
56
+ "left": "50%",
57
+ "right": "auto",
58
+ "bottom": "auto"
59
+ },
60
+ "&:after": {
61
+ "transform": "translateX(-50%)",
62
+ "borderColor": "transparent transparent var(--tooltip-color) transparent",
63
+ "top": "var(--tooltip-tail-offset)",
64
+ "left": "50%",
65
+ "right": "auto",
66
+ "bottom": "auto"
67
+ }
68
+ },
69
+ ".tooltip-left": {
70
+ "&:before": {
71
+ "transform": "translateY(-50%)",
72
+ "top": "50%",
73
+ "left": "auto",
74
+ "right": "var(--tooltip-offset)",
75
+ "bottom": "auto"
76
+ },
77
+ "&:after": {
78
+ "transform": "translateY(-50%)",
79
+ "borderColor": "transparent transparent transparent var(--tooltip-color)",
80
+ "top": "50%",
81
+ "left": "auto",
82
+ "right": "calc(var(--tooltip-tail-offset) + 0.0625rem)",
83
+ "bottom": "auto"
84
+ }
85
+ },
86
+ ".tooltip-right": {
87
+ "&:before": {
88
+ "transform": "translateY(-50%)",
89
+ "top": "50%",
90
+ "left": "var(--tooltip-offset)",
91
+ "right": "auto",
92
+ "bottom": "auto"
93
+ },
94
+ "&:after": {
95
+ "transform": "translateY(-50%)",
96
+ "borderColor": "transparent var(--tooltip-color) transparent transparent",
97
+ "top": "50%",
98
+ "left": "calc(var(--tooltip-tail-offset) + 0.0625rem)",
99
+ "right": "auto",
100
+ "bottom": "auto"
101
+ }
102
+ },
103
+ ".tooltip:not([data-tip]):hover:before,\n.tooltip:not([data-tip]):hover:after": {
104
+ "visibility": "hidden",
105
+ "opacity": 0
106
+ },
107
+ ".tooltip-primary": {
108
+ "--tooltip-color": "theme(colors.primary)",
109
+ "--tooltip-text-color": "theme(colors.primary-content)"
110
+ },
111
+ ".tooltip-secondary": {
112
+ "--tooltip-color": "theme(colors.secondary)",
113
+ "--tooltip-text-color": "theme(colors.secondary-content)"
114
+ },
115
+ ".tooltip-accent": {
116
+ "--tooltip-color": "theme(colors.accent)",
117
+ "--tooltip-text-color": "theme(colors.accent-content)"
118
+ },
119
+ ".tooltip-info": {
120
+ "--tooltip-color": "theme(colors.info)",
121
+ "--tooltip-text-color": "theme(colors.info-content)"
122
+ },
123
+ ".tooltip-success": {
124
+ "--tooltip-color": "theme(colors.success)",
125
+ "--tooltip-text-color": "theme(colors.success-content)"
126
+ },
127
+ ".tooltip-warning": {
128
+ "--tooltip-color": "theme(colors.warning)",
129
+ "--tooltip-text-color": "theme(colors.warning-content)"
130
+ },
131
+ ".tooltip-error": {
132
+ "--tooltip-color": "theme(colors.error)",
133
+ "--tooltip-text-color": "theme(colors.error-content)"
134
+ }
135
+ };
@@ -0,0 +1,173 @@
1
+ .tooltip {
2
+ position: relative;
3
+ display: inline-block;
4
+ --tooltip-color: oklch(32.1785% 0.02476 255.701624);
5
+ --tooltip-tail: 0.1875rem;
6
+ --tooltip-text-color: oklch(89.4994% 0.011585 252.096176);
7
+ --tooltip-offset: calc(100% + 1px + var(--tooltip-tail, 0px));
8
+ --tooltip-tail-offset: calc(100% + 0.0625rem - var(--tooltip-tail));
9
+ &:before {
10
+ position: absolute;
11
+ max-width: var(--width-xs, 20rem);
12
+ white-space: normal;
13
+ border-radius: var(--radius, 0.25rem);
14
+ padding-top: var(--spacing-1, 0.25rem);
15
+ padding-bottom: var(--spacing-1, 0.25rem);
16
+ padding-left: var(--spacing-2, 0.5rem);
17
+ padding-right: var(--spacing-2, 0.5rem);
18
+ text-align: center;
19
+ font-size: var(--font-size-sm, 0.875rem);
20
+ line-height: var(--tw-leading, var(--font-size-sm--line-height, 1.25rem));
21
+ opacity: 0%;
22
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
23
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
24
+ transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
25
+ transition-delay: 100ms;
26
+ --tw-duration: 200ms;
27
+ transition-duration: 200ms;
28
+ --tw-ease: var(--transition-timing-function-in-out, cubic-bezier(0.4, 0, 0.2, 1));
29
+ transition-timing-function: var(--transition-timing-function-in-out, cubic-bezier(0.4, 0, 0.2, 1));
30
+ background-color: var(--tooltip-color);
31
+ color: var(--tooltip-text-color);
32
+ width: max-content;
33
+ pointer-events: none;
34
+ z-index: 1;
35
+ content: var(--tw-content);
36
+ --tw-content: attr(data-tip);
37
+ }
38
+ &:after {
39
+ position: absolute;
40
+ opacity: 0%;
41
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
42
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
43
+ transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
44
+ transition-delay: 100ms;
45
+ --tw-duration: 200ms;
46
+ transition-duration: 200ms;
47
+ --tw-ease: var(--transition-timing-function-in-out, cubic-bezier(0.4, 0, 0.2, 1));
48
+ transition-timing-function: var(--transition-timing-function-in-out, cubic-bezier(0.4, 0, 0.2, 1));
49
+ content: "";
50
+ border-style: solid;
51
+ border-width: var(--tooltip-tail, 0);
52
+ width: 0;
53
+ height: 0;
54
+ display: block;
55
+ position: absolute;
56
+ }
57
+ }
58
+ .tooltip, .tooltip-top {
59
+ &:before {
60
+ transform: translateX(-50%);
61
+ top: auto;
62
+ left: 50%;
63
+ right: auto;
64
+ bottom: var(--tooltip-offset);
65
+ }
66
+ }
67
+ .tooltip-bottom {
68
+ &:before {
69
+ transform: translateX(-50%);
70
+ top: var(--tooltip-offset);
71
+ left: 50%;
72
+ right: auto;
73
+ bottom: auto;
74
+ }
75
+ }
76
+ .tooltip-left {
77
+ &:before {
78
+ transform: translateY(-50%);
79
+ top: 50%;
80
+ left: auto;
81
+ right: var(--tooltip-offset);
82
+ bottom: auto;
83
+ }
84
+ }
85
+ .tooltip-right {
86
+ &:before {
87
+ transform: translateY(-50%);
88
+ top: 50%;
89
+ left: var(--tooltip-offset);
90
+ right: auto;
91
+ bottom: auto;
92
+ }
93
+ }
94
+ .tooltip {
95
+ &.tooltip-open, &:hover, &:has(:focus-visible) {
96
+ &:before, &:after {
97
+ opacity: 100%;
98
+ transition-delay: 75ms;
99
+ }
100
+ }
101
+ }
102
+ .tooltip:not([data-tip]):hover:before, .tooltip:not([data-tip]):hover:after {
103
+ visibility: hidden;
104
+ opacity: 0;
105
+ }
106
+ .tooltip, .tooltip-top {
107
+ &:after {
108
+ transform: translateX(-50%);
109
+ border-color: var(--tooltip-color) transparent transparent transparent;
110
+ top: auto;
111
+ left: 50%;
112
+ right: auto;
113
+ bottom: var(--tooltip-tail-offset);
114
+ }
115
+ }
116
+ .tooltip-bottom {
117
+ &:after {
118
+ transform: translateX(-50%);
119
+ border-color: transparent transparent var(--tooltip-color) transparent;
120
+ top: var(--tooltip-tail-offset);
121
+ left: 50%;
122
+ right: auto;
123
+ bottom: auto;
124
+ }
125
+ }
126
+ .tooltip-left {
127
+ &:after {
128
+ transform: translateY(-50%);
129
+ border-color: transparent transparent transparent var(--tooltip-color);
130
+ top: 50%;
131
+ left: auto;
132
+ right: calc(var(--tooltip-tail-offset) + 0.0625rem);
133
+ bottom: auto;
134
+ }
135
+ }
136
+ .tooltip-right {
137
+ &:after {
138
+ transform: translateY(-50%);
139
+ border-color: transparent var(--tooltip-color) transparent transparent;
140
+ top: 50%;
141
+ left: calc(var(--tooltip-tail-offset) + 0.0625rem);
142
+ right: auto;
143
+ bottom: auto;
144
+ }
145
+ }
146
+ .tooltip-primary {
147
+ --tooltip-color: oklch(49.12% 0.3096 275.75);
148
+ --tooltip-text-color: oklch(89.824% 0.06192 275.75);
149
+ }
150
+ .tooltip-secondary {
151
+ --tooltip-color: oklch(69.71% 0.329 342.55);
152
+ --tooltip-text-color: oklch(98.71% 0.0106 342.55);
153
+ }
154
+ .tooltip-accent {
155
+ --tooltip-color: oklch(76.76% 0.184 183.61);
156
+ --tooltip-text-color: oklch(15.352% 0.0368 183.61);
157
+ }
158
+ .tooltip-info {
159
+ --tooltip-color: oklch(72.06% 0.191 231.6);
160
+ --tooltip-text-color: oklch(0% 0 0);
161
+ }
162
+ .tooltip-success {
163
+ --tooltip-color: oklch(64.8% 0.15 160);
164
+ --tooltip-text-color: oklch(0% 0 0);
165
+ }
166
+ .tooltip-warning {
167
+ --tooltip-color: oklch(84.71% 0.199 83.87);
168
+ --tooltip-text-color: oklch(0% 0 0);
169
+ }
170
+ .tooltip-error {
171
+ --tooltip-color: oklch(71.76% 0.221 22.18);
172
+ --tooltip-text-color: oklch(0% 0 0);
173
+ }
package/full.css ADDED
@@ -0,0 +1,20 @@
1
+ @import url(https://cdn.jsdelivr.net/npm/tailwindcss@4.0.0-alpha.25/preflight.min.css) layer(base);
2
+ @import url(colors.css) layer(base);
3
+ @import url(themes/default/index.css) layer(themes);
4
+ @import url(themes/light/index.css) layer(themes);
5
+ @import url(themes/dark/index.css) layer(themes);
6
+ @import url(components/tooltip.css) layer(components);
7
+ @import url(components/tab.css) layer(components);
8
+ @import url(components/radio.css) layer(components);
9
+ @import url(components/select.css) layer(components);
10
+ @import url(components/input.css) layer(components);
11
+ @import url(components/checkbox.css) layer(components);
12
+ @import url(components/range.css) layer(components);
13
+ @import url(components/badge.css) layer(components);
14
+ @import url(components/loading.css) layer(components);
15
+ @import url(components/rating.css) layer(components);
16
+ @import url(components/mask.css) layer(components);
17
+ @import url(components/button.css) layer(components);
18
+ @import url(components/toggle.css) layer(components);
19
+ @import url(components/kbd.css) layer(components);
20
+ @import url(components/menu.css) layer(components);
@@ -1,10 +1,10 @@
1
- function u(n, i) {
2
- return { handler: n, config: i }
1
+ const createPlugin = (handler, config) => {
2
+ return { handler: handler, config: config }
3
3
  }
4
- u.withOptions = function (n, i = () => ({})) {
5
- function t(o) {
6
- return { handler: n(o), config: i(o) }
7
- }
8
- return (t.__isOptionsFunction = !0), t
4
+ createPlugin.withOptions = (handlerFn, configFn = () => ({})) => {
5
+ const optionsFunction = (options) => {
6
+ return { handler: handlerFn(options), config: configFn(options) }
7
+ }
8
+ return (optionsFunction.__isOptionsFunction = true), optionsFunction
9
9
  }
10
- export const plugin = u
10
+ export const plugin = createPlugin
package/index.css CHANGED
@@ -2,13 +2,17 @@
2
2
  @import "./themes/light";
3
3
  @import "./themes/dark";
4
4
  @config "./components/kbd/config.js";
5
+ @config "./components/tooltip/config.js";
5
6
  @config "./components/rating/config.js";
6
7
  @config "./components/radio/config.js";
8
+ @config "./components/loading/config.js";
7
9
  @config "./components/input/config.js";
8
10
  @config "./components/checkbox/config.js";
11
+ @config "./components/tab/config.js";
9
12
  @config "./components/toggle/config.js";
10
13
  @config "./components/mask/config.js";
11
14
  @config "./components/button/config.js";
15
+ @config "./components/menu/config.js";
12
16
  @config "./components/select/config.js";
13
17
  @config "./components/range/config.js";
14
18
  @config "./components/badge/config.js";
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "type": "module",
3
3
  "name": "daisyui",
4
- "version": "5.0.0-alpha.2",
4
+ "version": "5.0.0-alpha.4",
5
5
  "description": "daisyUI - Tailwind CSS Components",
6
6
  "author": "Pouya Saadeghi",
7
7
  "license": "MIT",
@@ -37,6 +37,8 @@
37
37
  "themes",
38
38
  "components",
39
39
  "index.css",
40
+ "full.css",
41
+ "colors.css",
40
42
  "functions/plugin.js"
41
43
  ],
42
44
  "engines": {
@@ -23,4 +23,5 @@
23
23
  --radius-btn: 0.5rem;
24
24
  --radius-box: 1rem;
25
25
  --spacing-button-border: 1px;
26
+ --spacing-tab-border: 1px;
26
27
  }
@@ -23,4 +23,5 @@
23
23
  --radius-btn: 0.5rem;
24
24
  --radius-box: 1rem;
25
25
  --spacing-button-border: 1px;
26
+ --spacing-tab-border: 1px;
26
27
  }
package/themes/index.css CHANGED
@@ -23,4 +23,5 @@
23
23
  --radius-btn: 0.5rem;
24
24
  --radius-box: 1rem;
25
25
  --spacing-button-border: 1px;
26
+ --spacing-tab-border: 1px;
26
27
  }