daisyui 5.0.0-alpha.3 → 5.0.0-alpha.30

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 (293) hide show
  1. package/base/properties/index.js +4 -0
  2. package/base/properties/object.js +1 -0
  3. package/base/properties.css +1 -0
  4. package/base/rootcolor/index.js +4 -0
  5. package/base/rootcolor/object.js +1 -0
  6. package/base/rootcolor.css +1 -0
  7. package/base/rootscrollgutter/index.js +4 -0
  8. package/base/rootscrollgutter/object.js +1 -0
  9. package/base/rootscrollgutter.css +1 -0
  10. package/base/rootscrolllock/index.js +4 -0
  11. package/base/rootscrolllock/object.js +1 -0
  12. package/base/rootscrolllock.css +1 -0
  13. package/base/scrollbar/index.js +4 -0
  14. package/base/scrollbar/object.js +1 -0
  15. package/base/scrollbar.css +1 -0
  16. package/base/typography/index.js +4 -0
  17. package/base/typography/object.js +1 -0
  18. package/base/typography.css +1 -0
  19. package/chunks.css +58 -0
  20. package/colors/properties.css +1 -0
  21. package/colors/responsive.css +1 -0
  22. package/colors/states.css +1 -0
  23. package/components/alert/index.js +4 -0
  24. package/components/alert/object.js +1 -0
  25. package/components/alert.css +1 -0
  26. package/components/avatar/index.js +4 -0
  27. package/components/avatar/object.js +1 -0
  28. package/components/avatar.css +1 -0
  29. package/components/badge/index.js +4 -74
  30. package/components/badge/object.js +1 -0
  31. package/components/badge.css +1 -109
  32. package/components/breadcrumbs/index.js +4 -0
  33. package/components/breadcrumbs/object.js +1 -0
  34. package/components/breadcrumbs.css +1 -0
  35. package/components/button/index.js +4 -170
  36. package/components/button/object.js +1 -0
  37. package/components/button.css +1 -293
  38. package/components/card/index.js +4 -0
  39. package/components/card/object.js +1 -0
  40. package/components/card.css +1 -0
  41. package/components/chat/index.js +4 -0
  42. package/components/chat/object.js +1 -0
  43. package/components/chat.css +1 -0
  44. package/components/checkbox/index.js +4 -108
  45. package/components/checkbox/object.js +1 -0
  46. package/components/checkbox.css +1 -144
  47. package/components/collapse/index.js +4 -0
  48. package/components/collapse/object.js +1 -0
  49. package/components/collapse.css +1 -0
  50. package/components/countdown/index.js +4 -0
  51. package/components/countdown/object.js +1 -0
  52. package/components/countdown.css +1 -0
  53. package/components/divider/index.js +4 -0
  54. package/components/divider/object.js +1 -0
  55. package/components/divider.css +1 -0
  56. package/components/drawer/index.js +4 -0
  57. package/components/drawer/object.js +1 -0
  58. package/components/drawer.css +1 -0
  59. package/components/dropdown/index.js +4 -0
  60. package/components/dropdown/object.js +1 -0
  61. package/components/dropdown.css +1 -0
  62. package/components/fileinput/index.js +4 -0
  63. package/components/fileinput/object.js +1 -0
  64. package/components/fileinput.css +1 -0
  65. package/components/footer/index.js +4 -0
  66. package/components/footer/object.js +1 -0
  67. package/components/footer.css +1 -0
  68. package/components/hero/index.js +4 -0
  69. package/components/hero/object.js +1 -0
  70. package/components/hero.css +1 -0
  71. package/components/indicator/index.js +4 -0
  72. package/components/indicator/object.js +1 -0
  73. package/components/indicator.css +1 -0
  74. package/components/input/index.js +4 -128
  75. package/components/input/object.js +1 -0
  76. package/components/input.css +1 -204
  77. package/components/kbd/index.js +4 -27
  78. package/components/kbd/object.js +1 -0
  79. package/components/kbd.css +1 -49
  80. package/components/link/index.js +4 -0
  81. package/components/link/object.js +1 -0
  82. package/components/link.css +1 -0
  83. package/components/loading/index.js +4 -0
  84. package/components/loading/object.js +1 -0
  85. package/components/loading.css +1 -0
  86. package/components/mask/index.js +4 -74
  87. package/components/mask/object.js +1 -0
  88. package/components/mask.css +1 -78
  89. package/components/menu/index.js +4 -0
  90. package/components/menu/object.js +1 -0
  91. package/components/menu.css +1 -0
  92. package/components/mockup/index.js +4 -0
  93. package/components/mockup/object.js +1 -0
  94. package/components/mockup.css +1 -0
  95. package/components/modal/index.js +4 -0
  96. package/components/modal/object.js +1 -0
  97. package/components/modal.css +1 -0
  98. package/components/navbar/index.js +4 -0
  99. package/components/navbar/object.js +1 -0
  100. package/components/navbar.css +1 -0
  101. package/components/progress/index.js +4 -0
  102. package/components/progress/object.js +1 -0
  103. package/components/progress.css +1 -0
  104. package/components/radialprogress/index.js +4 -0
  105. package/components/radialprogress/object.js +1 -0
  106. package/components/radialprogress.css +1 -0
  107. package/components/radio/index.js +4 -73
  108. package/components/radio/object.js +1 -0
  109. package/components/radio.css +1 -102
  110. package/components/range/index.js +4 -132
  111. package/components/range/object.js +1 -0
  112. package/components/range.css +1 -164
  113. package/components/rating/index.js +4 -82
  114. package/components/rating/object.js +1 -0
  115. package/components/rating.css +1 -104
  116. package/components/select/index.js +4 -99
  117. package/components/select/object.js +1 -0
  118. package/components/select.css +1 -166
  119. package/components/skeleton/index.js +4 -0
  120. package/components/skeleton/object.js +1 -0
  121. package/components/skeleton.css +1 -0
  122. package/components/stack/index.js +4 -0
  123. package/components/stack/object.js +1 -0
  124. package/components/stack.css +1 -0
  125. package/components/stat/index.js +4 -0
  126. package/components/stat/object.js +1 -0
  127. package/components/stat.css +1 -0
  128. package/components/status/index.js +4 -0
  129. package/components/status/object.js +1 -0
  130. package/components/status.css +1 -0
  131. package/components/steps/index.js +4 -0
  132. package/components/steps/object.js +1 -0
  133. package/components/steps.css +1 -0
  134. package/components/swap/index.js +4 -0
  135. package/components/swap/object.js +1 -0
  136. package/components/swap.css +1 -0
  137. package/components/tab/index.js +4 -0
  138. package/components/tab/object.js +1 -0
  139. package/components/tab.css +1 -0
  140. package/components/table/index.js +4 -0
  141. package/components/table/object.js +1 -0
  142. package/components/table.css +1 -0
  143. package/components/textarea/index.js +4 -0
  144. package/components/textarea/object.js +1 -0
  145. package/components/textarea.css +1 -0
  146. package/components/timeline/index.js +4 -0
  147. package/components/timeline/object.js +1 -0
  148. package/components/timeline.css +1 -0
  149. package/components/toast/index.js +4 -0
  150. package/components/toast/object.js +1 -0
  151. package/components/toast.css +1 -0
  152. package/components/toggle/index.js +4 -102
  153. package/components/toggle/object.js +1 -0
  154. package/components/toggle.css +1 -143
  155. package/components/tooltip/index.js +4 -0
  156. package/components/tooltip/object.js +1 -0
  157. package/components/tooltip.css +1 -0
  158. package/full.css +1 -15
  159. package/functions/plugin.js +10 -10
  160. package/functions/pluginOptionsHandler.js +44 -0
  161. package/functions/variables.js +33 -0
  162. package/imports.js +107 -0
  163. package/index.js +48 -0
  164. package/package.json +98 -75
  165. package/theme/acid/index.css +28 -0
  166. package/theme/acid/index.js +4 -0
  167. package/theme/acid/object.js +1 -0
  168. package/theme/aqua/index.css +28 -0
  169. package/theme/aqua/index.js +4 -0
  170. package/theme/aqua/object.js +1 -0
  171. package/theme/autumn/index.css +28 -0
  172. package/theme/autumn/index.js +4 -0
  173. package/theme/autumn/object.js +1 -0
  174. package/theme/black/index.css +28 -0
  175. package/theme/black/index.js +4 -0
  176. package/theme/black/object.js +1 -0
  177. package/theme/bumblebee/index.css +28 -0
  178. package/theme/bumblebee/index.js +4 -0
  179. package/theme/bumblebee/object.js +1 -0
  180. package/theme/business/index.css +28 -0
  181. package/theme/business/index.js +4 -0
  182. package/theme/business/object.js +1 -0
  183. package/theme/cmyk/index.css +28 -0
  184. package/theme/cmyk/index.js +4 -0
  185. package/theme/cmyk/object.js +1 -0
  186. package/theme/coffee/index.css +28 -0
  187. package/theme/coffee/index.js +4 -0
  188. package/theme/coffee/object.js +1 -0
  189. package/theme/corporate/index.css +28 -0
  190. package/theme/corporate/index.js +4 -0
  191. package/theme/corporate/object.js +1 -0
  192. package/theme/cupcake/index.css +28 -0
  193. package/theme/cupcake/index.js +4 -0
  194. package/theme/cupcake/object.js +1 -0
  195. package/theme/cyberpunk/index.css +28 -0
  196. package/theme/cyberpunk/index.js +4 -0
  197. package/theme/cyberpunk/object.js +1 -0
  198. package/theme/dark/index.css +28 -0
  199. package/theme/dark/index.js +4 -0
  200. package/theme/dark/object.js +1 -0
  201. package/theme/dim/index.css +28 -0
  202. package/theme/dim/index.js +4 -0
  203. package/theme/dim/object.js +1 -0
  204. package/theme/dracula/index.css +28 -0
  205. package/theme/dracula/index.js +4 -0
  206. package/theme/dracula/object.js +1 -0
  207. package/theme/emerald/index.css +28 -0
  208. package/theme/emerald/index.js +4 -0
  209. package/theme/emerald/object.js +1 -0
  210. package/theme/fantasy/index.css +28 -0
  211. package/theme/fantasy/index.js +4 -0
  212. package/theme/fantasy/object.js +1 -0
  213. package/theme/forest/index.css +28 -0
  214. package/theme/forest/index.js +4 -0
  215. package/theme/forest/object.js +1 -0
  216. package/theme/garden/index.css +28 -0
  217. package/theme/garden/index.js +4 -0
  218. package/theme/garden/object.js +1 -0
  219. package/theme/halloween/index.css +28 -0
  220. package/theme/halloween/index.js +4 -0
  221. package/theme/halloween/object.js +1 -0
  222. package/theme/index.js +49 -0
  223. package/theme/lemonade/index.css +28 -0
  224. package/theme/lemonade/index.js +4 -0
  225. package/theme/lemonade/object.js +1 -0
  226. package/theme/light/index.css +28 -0
  227. package/theme/light/index.js +4 -0
  228. package/theme/light/object.js +1 -0
  229. package/theme/lofi/index.css +28 -0
  230. package/theme/lofi/index.js +4 -0
  231. package/theme/lofi/object.js +1 -0
  232. package/theme/luxury/index.css +28 -0
  233. package/theme/luxury/index.js +4 -0
  234. package/theme/luxury/object.js +1 -0
  235. package/theme/night/index.css +28 -0
  236. package/theme/night/index.js +4 -0
  237. package/theme/night/object.js +1 -0
  238. package/theme/nord/index.css +28 -0
  239. package/theme/nord/index.js +4 -0
  240. package/theme/nord/object.js +1 -0
  241. package/theme/object.js +1 -0
  242. package/theme/pastel/index.css +28 -0
  243. package/theme/pastel/index.js +4 -0
  244. package/theme/pastel/object.js +1 -0
  245. package/theme/retro/index.css +28 -0
  246. package/theme/retro/index.js +4 -0
  247. package/theme/retro/object.js +1 -0
  248. package/theme/sunset/index.css +28 -0
  249. package/theme/sunset/index.js +4 -0
  250. package/theme/sunset/object.js +1 -0
  251. package/theme/synthwave/index.css +28 -0
  252. package/theme/synthwave/index.js +4 -0
  253. package/theme/synthwave/object.js +1 -0
  254. package/theme/valentine/index.css +28 -0
  255. package/theme/valentine/index.js +4 -0
  256. package/theme/valentine/object.js +1 -0
  257. package/theme/winter/index.css +28 -0
  258. package/theme/winter/index.js +4 -0
  259. package/theme/winter/object.js +1 -0
  260. package/theme/wireframe/index.css +28 -0
  261. package/theme/wireframe/index.js +4 -0
  262. package/theme/wireframe/object.js +1 -0
  263. package/themes.css +1 -0
  264. package/utilities/join/index.js +4 -0
  265. package/utilities/join/object.js +1 -0
  266. package/utilities/join.css +1 -0
  267. package/components/badge/config.js +0 -12
  268. package/components/badge/index.css +0 -1
  269. package/components/button/config.js +0 -12
  270. package/components/button/index.css +0 -1
  271. package/components/checkbox/config.js +0 -12
  272. package/components/checkbox/index.css +0 -1
  273. package/components/input/config.js +0 -12
  274. package/components/input/index.css +0 -1
  275. package/components/kbd/config.js +0 -12
  276. package/components/kbd/index.css +0 -1
  277. package/components/mask/config.js +0 -12
  278. package/components/mask/index.css +0 -1
  279. package/components/radio/config.js +0 -12
  280. package/components/radio/index.css +0 -1
  281. package/components/range/config.js +0 -12
  282. package/components/range/index.css +0 -1
  283. package/components/rating/config.js +0 -12
  284. package/components/rating/index.css +0 -1
  285. package/components/select/config.js +0 -12
  286. package/components/select/index.css +0 -1
  287. package/components/toggle/config.js +0 -12
  288. package/components/toggle/index.css +0 -1
  289. package/index.css +0 -14
  290. package/themes/dark/index.css +0 -26
  291. package/themes/default/index.css +0 -26
  292. package/themes/index.css +0 -26
  293. package/themes/light/index.css +0 -26
package/components/button.css CHANGED
@@ -1,293 +1 @@
1
- .btn {
2
- display: inline-flex;
3
- height: var(--spacing-10, 2.5rem);
4
- flex-shrink: 0;
5
- cursor: pointer;
6
- flex-wrap: wrap;
7
- align-items: center;
8
- justify-content: center;
9
- gap: var(--spacing-2, 0.5rem);
10
- border-radius: var(--radius-btn);
11
- padding-left: var(--spacing-4, 1rem);
12
- padding-right: var(--spacing-4, 1rem);
13
- text-align: center;
14
- vertical-align: middle;
15
- font-size: var(--font-size-sm, 0.875rem);
16
- line-height: var(--line-height-none, 1);
17
- --tw-font-weight: 600;
18
- font-weight: 600;
19
- color: var(--color-base-content, oklch(27.8078% 0.029596 256.84795));
20
- text-decoration-line: none;
21
- outline-offset: 2px;
22
- outline-color: var(--color-base-content, oklch(27.8078% 0.029596 256.84795));
23
- --tw-duration: 200ms;
24
- transition-duration: 200ms;
25
- --tw-ease: var(--transition-timing-function-out, cubic-bezier(0, 0, 0.2, 1));
26
- transition-timing-function: var(--transition-timing-function-out, cubic-bezier(0, 0, 0.2, 1));
27
- -webkit-user-select: none;
28
- user-select: none;
29
- transition-property: color, background-color, border-color, opacity, box-shadow, transform;
30
- background-color: var(--btn-bg, var(--color-base-200));
31
- border-width: var(--spacing-button-border);
32
- border-color: color-mix(in oklab, var(--btn-bg, var(--color-base-200)), black 2%);
33
- border-bottom-color: color-mix(in oklab, var(--btn-bg, var(--color-base-200)), black 4%);
34
- box-shadow: 0 1px 0 0 color-mix(in oklch, white 3%, transparent) inset, 0 1px 1px 0 oklch(0% 0 0/0.07);
35
- &:hover {
36
- border-color: color-mix(in oklab, var(--btn-bg, var(--color-base-200)), black 5%);
37
- border-bottom-color: color-mix(in oklab, var(--btn-bg, var(--color-base-200)), black 7%);
38
- background-color: color-mix(in oklab, var(--btn-bg, var(--color-base-200)), black 5%);
39
- }
40
- &.btn-active {
41
- border-color: color-mix(in oklab, var(--btn-bg, var(--color-base-200)), black 5%);
42
- border-bottom-color: color-mix(in oklab, var(--btn-bg, var(--color-base-200)), black 7%);
43
- background-color: color-mix(in oklab, var(--btn-bg, var(--color-base-200)), black 5%);
44
- }
45
- &:focus-visible {
46
- outline-style: var(--tw-outline-style);
47
- outline-width: 1px;
48
- outline-style: var(--tw-outline-style);
49
- outline-width: 2px;
50
- }
51
- &:active {
52
- &:focus {
53
- transform: scale(var(--btn-focus-scale, 0.98));
54
- animation: button-pop 0s ease-out;
55
- border-color: color-mix(in oklab, var(--btn-bg, var(--color-base-200)), black 5%);
56
- border-bottom-color: color-mix(in oklab, var(--btn-bg, var(--color-base-200)), black 7%);
57
- box-shadow: 0 1px 0 0 oklch(0% 0 0/0.07) inset, 0 0 0 0 oklch(0% 0 0/0.1);
58
- }
59
- &:hover {
60
- transform: scale(var(--btn-focus-scale, 0.97));
61
- animation: button-pop 0s ease-out;
62
- }
63
- }
64
- }
65
- .btn-primary {
66
- --btn-bg: var(--color-primary);
67
- color: var(--color-primary-content, oklch(89.824% 0.06192 275.75));
68
- outline-color: var(--color-primary, oklch(49.12% 0.3096 275.75));
69
- }
70
- .btn-secondary {
71
- --btn-bg: var(--color-secondary);
72
- color: var(--color-secondary-content, oklch(98.71% 0.0106 342.55));
73
- outline-color: var(--color-secondary, oklch(69.71% 0.329 342.55));
74
- }
75
- .btn-accent {
76
- --btn-bg: var(--color-accent);
77
- color: var(--color-accent-content, oklch(15.352% 0.0368 183.61));
78
- outline-color: var(--color-accent, oklch(76.76% 0.184 183.61));
79
- }
80
- .btn-neutral {
81
- --btn-bg: var(--color-neutral);
82
- color: var(--color-neutral-content, oklch(89.4994% 0.011585 252.096176));
83
- outline-color: var(--color-neutral, oklch(32.1785% 0.02476 255.701624));
84
- }
85
- .btn-info {
86
- --btn-bg: var(--color-info);
87
- color: var(--color-info-content, oklch(0% 0 0));
88
- outline-color: var(--color-info, oklch(72.06% 0.191 231.6));
89
- }
90
- .btn-success {
91
- --btn-bg: var(--color-success);
92
- color: var(--color-success-content, oklch(0% 0 0));
93
- outline-color: var(--color-success, oklch(64.8% 0.15 160));
94
- }
95
- .btn-warning {
96
- --btn-bg: var(--color-warning);
97
- color: var(--color-warning-content, oklch(0% 0 0));
98
- outline-color: var(--color-warning, oklch(84.71% 0.199 83.87));
99
- }
100
- .btn-error {
101
- --btn-bg: var(--color-error);
102
- color: var(--color-error-content, oklch(0% 0 0));
103
- outline-color: var(--color-error, oklch(71.76% 0.221 22.18));
104
- }
105
- .btn.glass {
106
- --tw-shadow: 0 0 #0000;
107
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
108
- outline-color: currentColor;
109
- &:hover {
110
- @media (hover: hover) {
111
- --glass-border-opacity: 15%;
112
- }
113
- }
114
- &:hover {
115
- @media (hover: hover) {
116
- --glass-opacity: 25%;
117
- }
118
- }
119
- &.btn-active {
120
- --glass-border-opacity: 15%;
121
- --glass-opacity: 25%;
122
- }
123
- }
124
- .btn-ghost {
125
- border-style: var(--tw-border-style);
126
- border-width: 1px;
127
- border-color: transparent;
128
- background-color: transparent;
129
- color: currentColor;
130
- --tw-shadow: 0 0 #0000;
131
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
132
- outline-color: currentColor;
133
- &:hover {
134
- @media (hover: hover) {
135
- border-color: transparent;
136
- }
137
- }
138
- &:hover {
139
- @media (hover: hover) {
140
- background-color: color-mix(in srgb, var(--color-base-content, oklch(27.8078% 0.029596 256.84795)) 20%, transparent);
141
- }
142
- }
143
- &.btn-active {
144
- border-color: transparent;
145
- background-color: color-mix(in srgb, var(--color-base-content, oklch(27.8078% 0.029596 256.84795)) 20%, transparent);
146
- }
147
- }
148
- .btn-link {
149
- border-color: transparent;
150
- background-color: transparent;
151
- color: var(--color-primary, oklch(49.12% 0.3096 275.75));
152
- text-decoration-line: underline;
153
- --tw-shadow: 0 0 #0000;
154
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
155
- outline-color: currentColor;
156
- &:hover {
157
- @media (hover: hover) {
158
- border-color: transparent;
159
- }
160
- }
161
- &:hover {
162
- @media (hover: hover) {
163
- background-color: transparent;
164
- }
165
- }
166
- &:hover {
167
- @media (hover: hover) {
168
- text-decoration-line: underline;
169
- }
170
- }
171
- &.btn-active {
172
- border-color: transparent;
173
- background-color: transparent;
174
- text-decoration-line: underline;
175
- }
176
- }
177
- .btn-outline {
178
- &:not(.btn-active):not(:hover) {
179
- background-color: transparent;
180
- color: var(--btn-bg);
181
- --tw-shadow: 0 0 #0000;
182
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
183
- }
184
- &.btn-active {
185
- border-color: color-mix(in oklab, var(--btn-bg, var(--color-base-200)) 90%, black);
186
- background-color: color-mix(in oklab, var(--btn-bg, var(--color-base-200)) 90%, black);
187
- }
188
- }
189
- .btn {
190
- &:is(:disabled, [disabled], .btn-disabled) {
191
- pointer-events: none;
192
- border-color: transparent;
193
- background-color: color-mix(in srgb, var(--color-neutral, oklch(32.1785% 0.02476 255.701624)) 20%, transparent);
194
- color: color-mix(in srgb, var(--color-base-content, oklch(27.8078% 0.029596 256.84795)) 20%, transparent);
195
- &:hover {
196
- pointer-events: none;
197
- border-color: transparent;
198
- background-color: color-mix(in srgb, var(--color-neutral, oklch(32.1785% 0.02476 255.701624)) 20%, transparent);
199
- color: color-mix(in srgb, var(--color-base-content, oklch(27.8078% 0.029596 256.84795)) 20%, transparent);
200
- }
201
- }
202
- }
203
- .btn {
204
- &:is(input[type=checkbox]), &:is(input[type=radio]) {
205
- width: auto;
206
- appearance: none;
207
- &::after {
208
- --tw-content: attr(aria-label);
209
- content: var(--tw-content);
210
- }
211
- &:checked {
212
- border-color: var(--color-primary, oklch(49.12% 0.3096 275.75));
213
- background-color: var(--color-primary, oklch(49.12% 0.3096 275.75));
214
- color: var(--color-primary-content, oklch(89.824% 0.06192 275.75));
215
- &:focus-visible {
216
- outline-color: var(--color-primary, oklch(49.12% 0.3096 275.75));
217
- }
218
- &:hover {
219
- background-color: color-mix(in oklab, var(--color-primary) 90%, black);
220
- border-color: color-mix(in oklab, var(--color-primary) 90%, black);
221
- }
222
- }
223
- }
224
- }
225
- .btn-xs {
226
- height: var(--spacing-6, 1.5rem);
227
- padding-left: var(--spacing-2, 0.5rem);
228
- padding-right: var(--spacing-2, 0.5rem);
229
- font-size: var(--font-size-xs);
230
- }
231
- .btn-sm {
232
- height: var(--spacing-8, 2rem);
233
- padding-left: var(--spacing-3, 0.75rem);
234
- padding-right: var(--spacing-3, 0.75rem);
235
- font-size: var(--font-size-sm);
236
- }
237
- .btn-md {
238
- height: var(--spacing-10, 2.5rem);
239
- padding-left: var(--spacing-4, 1rem);
240
- padding-right: var(--spacing-4, 1rem);
241
- font-size: var(--font-size-sm);
242
- }
243
- .btn-lg {
244
- height: var(--spacing-14, 3.5rem);
245
- padding-left: var(--spacing-6, 1.5rem);
246
- padding-right: var(--spacing-6, 1.5rem);
247
- font-size: var(--font-size-lg);
248
- }
249
- .btn-square {
250
- width: var(--spacing-12, 3rem);
251
- height: var(--spacing-12, 3rem);
252
- padding-left: var(--spacing-0, 0px);
253
- padding-right: var(--spacing-0, 0px);
254
- &.btn-xs {
255
- width: var(--spacing-6, 1.5rem);
256
- height: var(--spacing-6, 1.5rem);
257
- }
258
- &.btn-sm {
259
- width: var(--spacing-8, 2rem);
260
- height: var(--spacing-8, 2rem);
261
- }
262
- &.btn-md {
263
- width: var(--spacing-12, 3rem);
264
- height: var(--spacing-12, 3rem);
265
- }
266
- &.btn-lg {
267
- width: var(--spacing-16, 4rem);
268
- height: var(--spacing-16, 4rem);
269
- }
270
- }
271
- .btn-circle {
272
- aspect-ratio: 1 / 1;
273
- border-radius: calc(infinity * 1px);
274
- padding-left: var(--spacing-0, 0px);
275
- padding-right: var(--spacing-0, 0px);
276
- }
277
- .btn-wide {
278
- width: var(--spacing-64, 16rem);
279
- }
280
- .btn-block {
281
- width: 100%;
282
- }
283
- @keyframes button-pop {
284
- 0% {
285
- transform: scale(var(--btn-focus-scale, 0.98));
286
- }
287
- 40% {
288
- transform: scale(1.02);
289
- }
290
- 100% {
291
- transform: scale(1);
292
- }
293
- }
1
+ /*! 🌼 daisyUI 5.0.0-alpha.30 – MIT License */ .btn{height:var(--spacing-10,2.5rem);cursor:pointer;justify-content:center;align-items:center;gap:var(--spacing-2,.5rem);padding-left:var(--spacing-4,1rem);padding-right:var(--spacing-4,1rem);text-align:center;vertical-align:middle;color:var(--color-base-content, );outline-offset:2px;-webkit-user-select:none;user-select:none;font-size:var(--font-size-sm);outline-color:var(--color-base-content);--btn-color:var(--btn-bg,var(--color-base-200));background-color:var(--btn-color);border:var(--spacing-button-border,1px)solid color-mix(in oklab,var(--btn-color),black 5%);text-shadow:0 .5px oklch(1 0 0/.15);box-shadow:0 0 0 .5px oklch(1 0 0/.01)inset,var(--btn-shadow);background-origin:border-box;background-image:var(--btn-gradient);background-size:100% calc(var(--spacing-button-border,1px) + .5px),100% calc(var(--spacing-button-border,1px) + .5px),2rem 100%,2rem 100%;--btn-shadow:0 3px 2px -2px color-mix(in oklab,var(--btn-color)30%,transparent),0 4px 3px -2px color-mix(in oklab,var(--btn-color)30%,transparent);--btn-gradient:linear-gradient(to left,transparent 25%,oklch(100% 0 0/.3),transparent 75%),linear-gradient(to left,transparent 25%,oklch(100% 0 0/.3),transparent 75%),linear-gradient(-50deg,transparent 50%,oklab(100% 0 5.96046e-8/.04)),linear-gradient(50deg,transparent 50%,oklab(100% 0 5.96046e-8/.04));background-position:top,bottom,0,100%;background-repeat:no-repeat;border-start-start-radius:var(--radius-join-start-start,var(--radius-btn));border-start-end-radius:var(--radius-join-start-end,var(--radius-btn));border-end-end-radius:var(--radius-join-end-end,var(--radius-btn));border-end-start-radius:var(--radius-join-end-start,var(--radius-btn));flex-wrap:nowrap;flex-shrink:0;font-weight:600;text-decoration-line:none;transition-property:color,background-color,background-image,border-color,opacity,box-shadow,scale;transition-duration:.2s;transition-timing-function:cubic-bezier(0,0,.2,1);display:inline-flex;&:hover{--btn-color:color-mix(in oklab,var(--btn-bg,var(--color-base-200)),black 5%)}&.btn-active{--btn-color:color-mix(in oklab,var(--btn-bg,var(--color-base-200)),black 5%);--btn-shadow:0 0 0 0 oklch(0% 0 0/.07)}&:focus-visible{outline-width:2px;outline-style:solid}&:active:not(.btn-active){background-color:color-mix(in oklab,var(--btn-bg,var(--color-base-200)),black 5%);border-color:color-mix(in oklab,var(--btn-bg,var(--color-base-200)),black 7%);--btn-shadow:0 0 0 0 oklch(0% 0 0/.07);translate:0 .5px}}.btn-primary{--btn-bg:var(--color-primary);color:var(--color-primary-content, );outline-color:var(--color-primary, )}.btn-secondary{--btn-bg:var(--color-secondary);color:var(--color-secondary-content, );outline-color:var(--color-secondary, )}.btn-accent{--btn-bg:var(--color-accent);color:var(--color-accent-content, );outline-color:var(--color-accent, )}.btn-neutral{--btn-bg:var(--color-neutral);color:var(--color-neutral-content, );outline-color:var(--color-neutral, )}.btn-info{--btn-bg:var(--color-info);color:var(--color-info-content, );outline-color:var(--color-info, )}.btn-success{--btn-bg:var(--color-success);color:var(--color-success-content, );outline-color:var(--color-success, )}.btn-warning{--btn-bg:var(--color-warning);color:var(--color-warning-content, );outline-color:var(--color-warning, )}.btn-error{--btn-bg:var(--color-error);color:var(--color-error-content, );outline-color:var(--color-error, )}.btn.glass{box-shadow:none;outline-color:currentColor;&:hover{@media (hover:hover){&{--glass-border-opacity:15%}}}&:hover{@media (hover:hover){&{--glass-opacity:25%}}}&.btn-active{--glass-border-opacity:15%;--glass-opacity:25%}}.btn-ghost{box-shadow:none;color:currentColor;--btn-gradient:unset;background-color:#0000;border:1px solid #0000;outline-color:currentColor}.btn-link{box-shadow:none;color:var(--color-primary, );--btn-gradient:unset;background-color:#0000;border-color:#0000;outline-color:currentColor;text-decoration-line:underline;&:hover{@media (hover:hover){&{border-color:#0000}}}&:hover{@media (hover:hover){&{background-color:#0000}}}&:hover{@media (hover:hover){&{text-decoration-line:underline}}}&.btn-active{background-color:#0000;border-color:#0000;text-decoration-line:underline}}.btn-outline{&:not(.btn-active,:hover,:active:focus,:focus-visible){box-shadow:none;color:var(--btn-bg);--btn-gradient:unset;background-color:#0000}}.btn-dash{&:not(.btn-active,:hover,:active:focus,:focus-visible){box-shadow:none;color:var(--btn-bg);--btn-gradient:unset;background-color:#0000;border-style:dashed}}.btn-soft{&:not(.btn-active,:hover,:active:focus,:focus-visible){box-shadow:none;color:var(--btn-bg,var(--color-base-content));background:color-mix(in oklab,var(--btn-bg,var(--color-base-content))8%,var(--color-base-200));border-color:color-mix(in oklab,var(--btn-bg,var(--color-base-content))10%,var(--color-base-200));--btn-gradient:unset}}.btn{&:is(:disabled,[disabled],.btn-disabled){pointer-events:none;background-color:color-mix(in oklch,var(--color-neutral, )20%,transparent);color:color-mix(in oklch,var(--color-base-content, )20%,transparent);--btn-gradient:unset;border-color:#0000;&:hover{pointer-events:none;background-color:color-mix(in oklch,var(--color-neutral, )20%,transparent);color:color-mix(in oklch,var(--color-base-content, )20%,transparent);border-color:#0000}}}.btn{&:is(input[type=checkbox]),&:is(input[type=radio]){appearance:none;&:not(.btn-square,.btn-circle){width:auto}&:after{content:attr(aria-label)}&:checked{--btn-bg:var(--color-primary);border-color:var(--color-primary, );background-color:var(--color-primary, );color:var(--color-primary-content, );&:focus-visible{outline-color:var(--color-primary, )}&:hover{background-color:color-mix(in oklab,var(--color-primary)90%,black);border-color:color-mix(in oklab,var(--color-primary)90%,black)}}}}.btn-xs{height:var(--spacing-6,1.5rem);padding-left:var(--spacing-2,.5rem);padding-right:var(--spacing-2,.5rem);font-size:var(--font-size-xs)}.btn-sm{height:var(--spacing-8,2rem);padding-left:var(--spacing-3,.75rem);padding-right:var(--spacing-3,.75rem);font-size:var(--font-size-sm)}.btn-md{height:var(--spacing-10,2.5rem);padding-left:var(--spacing-4,1rem);padding-right:var(--spacing-4,1rem);font-size:var(--font-size-sm)}.btn-lg{height:var(--spacing-14,3.5rem);padding-left:var(--spacing-6,1.5rem);padding-right:var(--spacing-6,1.5rem);font-size:var(--font-size-lg)}.btn-square{width:var(--spacing-10,2.5rem);height:var(--spacing-10,2.5rem);padding-left:var(--spacing-0,0px);padding-right:var(--spacing-0,0px);&.btn-xs{width:var(--spacing-6,1.5rem);height:var(--spacing-6,1.5rem)}&.btn-sm{width:var(--spacing-8,2rem);height:var(--spacing-8,2rem)}&.btn-md{width:var(--spacing-10,2.5rem);height:var(--spacing-10,2.5rem)}&.btn-lg{width:var(--spacing-14,3.5rem);height:var(--spacing-14,3.5rem)}}.btn-circle{width:var(--spacing-10,2.5rem);height:var(--spacing-10,2.5rem);padding-left:var(--spacing-0,0px);padding-right:var(--spacing-0,0px);border-radius:3.40282e38px;&.btn-xs{width:var(--spacing-6,1.5rem);height:var(--spacing-6,1.5rem)}&.btn-sm{width:var(--spacing-8,2rem);height:var(--spacing-8,2rem)}&.btn-md{width:var(--spacing-10,2.5rem);height:var(--spacing-10,2.5rem)}&.btn-lg{width:var(--spacing-14,3.5rem);height:var(--spacing-14,3.5rem)}}.btn-wide{width:var(--spacing-64,16rem)}.btn-block{width:100%}@media (width>=640px){.sm\:btn{height:var(--spacing-10,2.5rem);cursor:pointer;justify-content:center;align-items:center;gap:var(--spacing-2,.5rem);padding-left:var(--spacing-4,1rem);padding-right:var(--spacing-4,1rem);text-align:center;vertical-align:middle;color:var(--color-base-content, );outline-offset:2px;-webkit-user-select:none;user-select:none;font-size:var(--font-size-sm);outline-color:var(--color-base-content);--btn-color:var(--btn-bg,var(--color-base-200));background-color:var(--btn-color);border:var(--spacing-button-border,1px)solid color-mix(in oklab,var(--btn-color),black 5%);text-shadow:0 .5px oklch(1 0 0/.15);box-shadow:0 0 0 .5px oklch(1 0 0/.01)inset,var(--btn-shadow);background-origin:border-box;background-image:var(--btn-gradient);background-size:100% calc(var(--spacing-button-border,1px) + .5px),100% calc(var(--spacing-button-border,1px) + .5px),2rem 100%,2rem 100%;--btn-shadow:0 3px 2px -2px color-mix(in oklab,var(--btn-color)30%,transparent),0 4px 3px -2px color-mix(in oklab,var(--btn-color)30%,transparent);--btn-gradient:linear-gradient(to left,transparent 25%,oklch(100% 0 0/.3),transparent 75%),linear-gradient(to left,transparent 25%,oklch(100% 0 0/.3),transparent 75%),linear-gradient(-50deg,transparent 50%,oklab(100% 0 5.96046e-8/.04)),linear-gradient(50deg,transparent 50%,oklab(100% 0 5.96046e-8/.04));background-position:top,bottom,0,100%;background-repeat:no-repeat;border-start-start-radius:var(--radius-join-start-start,var(--radius-btn));border-start-end-radius:var(--radius-join-start-end,var(--radius-btn));border-end-end-radius:var(--radius-join-end-end,var(--radius-btn));border-end-start-radius:var(--radius-join-end-start,var(--radius-btn));flex-wrap:nowrap;flex-shrink:0;font-weight:600;text-decoration-line:none;transition-property:color,background-color,background-image,border-color,opacity,box-shadow,scale;transition-duration:.2s;transition-timing-function:cubic-bezier(0,0,.2,1);display:inline-flex;&:hover{--btn-color:color-mix(in oklab,var(--btn-bg,var(--color-base-200)),black 5%)}&.btn-active{--btn-color:color-mix(in oklab,var(--btn-bg,var(--color-base-200)),black 5%);--btn-shadow:0 0 0 0 oklch(0% 0 0/.07)}&:focus-visible{outline-width:2px;outline-style:solid}&:active:not(.btn-active){background-color:color-mix(in oklab,var(--btn-bg,var(--color-base-200)),black 5%);border-color:color-mix(in oklab,var(--btn-bg,var(--color-base-200)),black 7%);--btn-shadow:0 0 0 0 oklch(0% 0 0/.07);translate:0 .5px}}.sm\:btn-primary{--btn-bg:var(--color-primary);color:var(--color-primary-content, );outline-color:var(--color-primary, )}.sm\:btn-secondary{--btn-bg:var(--color-secondary);color:var(--color-secondary-content, );outline-color:var(--color-secondary, )}.sm\:btn-accent{--btn-bg:var(--color-accent);color:var(--color-accent-content, );outline-color:var(--color-accent, )}.sm\:btn-neutral{--btn-bg:var(--color-neutral);color:var(--color-neutral-content, );outline-color:var(--color-neutral, )}.sm\:btn-info{--btn-bg:var(--color-info);color:var(--color-info-content, );outline-color:var(--color-info, )}.sm\:btn-success{--btn-bg:var(--color-success);color:var(--color-success-content, );outline-color:var(--color-success, )}.sm\:btn-warning{--btn-bg:var(--color-warning);color:var(--color-warning-content, );outline-color:var(--color-warning, )}.sm\:btn-error{--btn-bg:var(--color-error);color:var(--color-error-content, );outline-color:var(--color-error, )}.sm\:btn.glass{box-shadow:none;outline-color:currentColor;&:hover{@media (hover:hover){&{--glass-border-opacity:15%}}}&:hover{@media (hover:hover){&{--glass-opacity:25%}}}&.btn-active{--glass-border-opacity:15%;--glass-opacity:25%}}.sm\:btn-ghost{box-shadow:none;color:currentColor;--btn-gradient:unset;background-color:#0000;border:1px solid #0000;outline-color:currentColor}.sm\:btn-link{box-shadow:none;color:var(--color-primary, );--btn-gradient:unset;background-color:#0000;border-color:#0000;outline-color:currentColor;text-decoration-line:underline;&:hover{@media (hover:hover){&{border-color:#0000}}}&:hover{@media (hover:hover){&{background-color:#0000}}}&:hover{@media (hover:hover){&{text-decoration-line:underline}}}&.btn-active{background-color:#0000;border-color:#0000;text-decoration-line:underline}}.sm\:btn-outline{&:not(.btn-active,:hover,:active:focus,:focus-visible){box-shadow:none;color:var(--btn-bg);--btn-gradient:unset;background-color:#0000}}.sm\:btn-dash{&:not(.btn-active,:hover,:active:focus,:focus-visible){box-shadow:none;color:var(--btn-bg);--btn-gradient:unset;background-color:#0000;border-style:dashed}}.sm\:btn-soft{&:not(.btn-active,:hover,:active:focus,:focus-visible){box-shadow:none;color:var(--btn-bg,var(--color-base-content));background:color-mix(in oklab,var(--btn-bg,var(--color-base-content))8%,var(--color-base-200));border-color:color-mix(in oklab,var(--btn-bg,var(--color-base-content))10%,var(--color-base-200));--btn-gradient:unset}}.sm\:btn{&:is(:disabled,[disabled],.btn-disabled){pointer-events:none;background-color:color-mix(in oklch,var(--color-neutral, )20%,transparent);color:color-mix(in oklch,var(--color-base-content, )20%,transparent);--btn-gradient:unset;border-color:#0000;&:hover{pointer-events:none;background-color:color-mix(in oklch,var(--color-neutral, )20%,transparent);color:color-mix(in oklch,var(--color-base-content, )20%,transparent);border-color:#0000}}}.sm\:btn{&:is(input[type=checkbox]),&:is(input[type=radio]){appearance:none;&:not(.btn-square,.btn-circle){width:auto}&:after{content:attr(aria-label)}&:checked{--btn-bg:var(--color-primary);border-color:var(--color-primary, );background-color:var(--color-primary, );color:var(--color-primary-content, );&:focus-visible{outline-color:var(--color-primary, )}&:hover{background-color:color-mix(in oklab,var(--color-primary)90%,black);border-color:color-mix(in oklab,var(--color-primary)90%,black)}}}}.sm\:btn-xs{height:var(--spacing-6,1.5rem);padding-left:var(--spacing-2,.5rem);padding-right:var(--spacing-2,.5rem);font-size:var(--font-size-xs)}.sm\:btn-sm{height:var(--spacing-8,2rem);padding-left:var(--spacing-3,.75rem);padding-right:var(--spacing-3,.75rem);font-size:var(--font-size-sm)}.sm\:btn-md{height:var(--spacing-10,2.5rem);padding-left:var(--spacing-4,1rem);padding-right:var(--spacing-4,1rem);font-size:var(--font-size-sm)}.sm\:btn-lg{height:var(--spacing-14,3.5rem);padding-left:var(--spacing-6,1.5rem);padding-right:var(--spacing-6,1.5rem);font-size:var(--font-size-lg)}.sm\:btn-square{width:var(--spacing-10,2.5rem);height:var(--spacing-10,2.5rem);padding-left:var(--spacing-0,0px);padding-right:var(--spacing-0,0px);&.btn-xs{width:var(--spacing-6,1.5rem);height:var(--spacing-6,1.5rem)}&.btn-sm{width:var(--spacing-8,2rem);height:var(--spacing-8,2rem)}&.btn-md{width:var(--spacing-10,2.5rem);height:var(--spacing-10,2.5rem)}&.btn-lg{width:var(--spacing-14,3.5rem);height:var(--spacing-14,3.5rem)}}.sm\:btn-circle{width:var(--spacing-10,2.5rem);height:var(--spacing-10,2.5rem);padding-left:var(--spacing-0,0px);padding-right:var(--spacing-0,0px);border-radius:3.40282e38px;&.btn-xs{width:var(--spacing-6,1.5rem);height:var(--spacing-6,1.5rem)}&.btn-sm{width:var(--spacing-8,2rem);height:var(--spacing-8,2rem)}&.btn-md{width:var(--spacing-10,2.5rem);height:var(--spacing-10,2.5rem)}&.btn-lg{width:var(--spacing-14,3.5rem);height:var(--spacing-14,3.5rem)}}.sm\:btn-wide{width:var(--spacing-64,16rem)}.sm\:btn-block{width:100%}}@media (width>=768px){.md\:btn{height:var(--spacing-10,2.5rem);cursor:pointer;justify-content:center;align-items:center;gap:var(--spacing-2,.5rem);padding-left:var(--spacing-4,1rem);padding-right:var(--spacing-4,1rem);text-align:center;vertical-align:middle;color:var(--color-base-content, );outline-offset:2px;-webkit-user-select:none;user-select:none;font-size:var(--font-size-sm);outline-color:var(--color-base-content);--btn-color:var(--btn-bg,var(--color-base-200));background-color:var(--btn-color);border:var(--spacing-button-border,1px)solid color-mix(in oklab,var(--btn-color),black 5%);text-shadow:0 .5px oklch(1 0 0/.15);box-shadow:0 0 0 .5px oklch(1 0 0/.01)inset,var(--btn-shadow);background-origin:border-box;background-image:var(--btn-gradient);background-size:100% calc(var(--spacing-button-border,1px) + .5px),100% calc(var(--spacing-button-border,1px) + .5px),2rem 100%,2rem 100%;--btn-shadow:0 3px 2px -2px color-mix(in oklab,var(--btn-color)30%,transparent),0 4px 3px -2px color-mix(in oklab,var(--btn-color)30%,transparent);--btn-gradient:linear-gradient(to left,transparent 25%,oklch(100% 0 0/.3),transparent 75%),linear-gradient(to left,transparent 25%,oklch(100% 0 0/.3),transparent 75%),linear-gradient(-50deg,transparent 50%,oklab(100% 0 5.96046e-8/.04)),linear-gradient(50deg,transparent 50%,oklab(100% 0 5.96046e-8/.04));background-position:top,bottom,0,100%;background-repeat:no-repeat;border-start-start-radius:var(--radius-join-start-start,var(--radius-btn));border-start-end-radius:var(--radius-join-start-end,var(--radius-btn));border-end-end-radius:var(--radius-join-end-end,var(--radius-btn));border-end-start-radius:var(--radius-join-end-start,var(--radius-btn));flex-wrap:nowrap;flex-shrink:0;font-weight:600;text-decoration-line:none;transition-property:color,background-color,background-image,border-color,opacity,box-shadow,scale;transition-duration:.2s;transition-timing-function:cubic-bezier(0,0,.2,1);display:inline-flex;&:hover{--btn-color:color-mix(in oklab,var(--btn-bg,var(--color-base-200)),black 5%)}&.btn-active{--btn-color:color-mix(in oklab,var(--btn-bg,var(--color-base-200)),black 5%);--btn-shadow:0 0 0 0 oklch(0% 0 0/.07)}&:focus-visible{outline-width:2px;outline-style:solid}&:active:not(.btn-active){background-color:color-mix(in oklab,var(--btn-bg,var(--color-base-200)),black 5%);border-color:color-mix(in oklab,var(--btn-bg,var(--color-base-200)),black 7%);--btn-shadow:0 0 0 0 oklch(0% 0 0/.07);translate:0 .5px}}.md\:btn-primary{--btn-bg:var(--color-primary);color:var(--color-primary-content, );outline-color:var(--color-primary, )}.md\:btn-secondary{--btn-bg:var(--color-secondary);color:var(--color-secondary-content, );outline-color:var(--color-secondary, )}.md\:btn-accent{--btn-bg:var(--color-accent);color:var(--color-accent-content, );outline-color:var(--color-accent, )}.md\:btn-neutral{--btn-bg:var(--color-neutral);color:var(--color-neutral-content, );outline-color:var(--color-neutral, )}.md\:btn-info{--btn-bg:var(--color-info);color:var(--color-info-content, );outline-color:var(--color-info, )}.md\:btn-success{--btn-bg:var(--color-success);color:var(--color-success-content, );outline-color:var(--color-success, )}.md\:btn-warning{--btn-bg:var(--color-warning);color:var(--color-warning-content, );outline-color:var(--color-warning, )}.md\:btn-error{--btn-bg:var(--color-error);color:var(--color-error-content, );outline-color:var(--color-error, )}.md\:btn.glass{box-shadow:none;outline-color:currentColor;&:hover{@media (hover:hover){&{--glass-border-opacity:15%}}}&:hover{@media (hover:hover){&{--glass-opacity:25%}}}&.btn-active{--glass-border-opacity:15%;--glass-opacity:25%}}.md\:btn-ghost{box-shadow:none;color:currentColor;--btn-gradient:unset;background-color:#0000;border:1px solid #0000;outline-color:currentColor}.md\:btn-link{box-shadow:none;color:var(--color-primary, );--btn-gradient:unset;background-color:#0000;border-color:#0000;outline-color:currentColor;text-decoration-line:underline;&:hover{@media (hover:hover){&{border-color:#0000}}}&:hover{@media (hover:hover){&{background-color:#0000}}}&:hover{@media (hover:hover){&{text-decoration-line:underline}}}&.btn-active{background-color:#0000;border-color:#0000;text-decoration-line:underline}}.md\:btn-outline{&:not(.btn-active,:hover,:active:focus,:focus-visible){box-shadow:none;color:var(--btn-bg);--btn-gradient:unset;background-color:#0000}}.md\:btn-dash{&:not(.btn-active,:hover,:active:focus,:focus-visible){box-shadow:none;color:var(--btn-bg);--btn-gradient:unset;background-color:#0000;border-style:dashed}}.md\:btn-soft{&:not(.btn-active,:hover,:active:focus,:focus-visible){box-shadow:none;color:var(--btn-bg,var(--color-base-content));background:color-mix(in oklab,var(--btn-bg,var(--color-base-content))8%,var(--color-base-200));border-color:color-mix(in oklab,var(--btn-bg,var(--color-base-content))10%,var(--color-base-200));--btn-gradient:unset}}.md\:btn{&:is(:disabled,[disabled],.btn-disabled){pointer-events:none;background-color:color-mix(in oklch,var(--color-neutral, )20%,transparent);color:color-mix(in oklch,var(--color-base-content, )20%,transparent);--btn-gradient:unset;border-color:#0000;&:hover{pointer-events:none;background-color:color-mix(in oklch,var(--color-neutral, )20%,transparent);color:color-mix(in oklch,var(--color-base-content, )20%,transparent);border-color:#0000}}}.md\:btn{&:is(input[type=checkbox]),&:is(input[type=radio]){appearance:none;&:not(.btn-square,.btn-circle){width:auto}&:after{content:attr(aria-label)}&:checked{--btn-bg:var(--color-primary);border-color:var(--color-primary, );background-color:var(--color-primary, );color:var(--color-primary-content, );&:focus-visible{outline-color:var(--color-primary, )}&:hover{background-color:color-mix(in oklab,var(--color-primary)90%,black);border-color:color-mix(in oklab,var(--color-primary)90%,black)}}}}.md\:btn-xs{height:var(--spacing-6,1.5rem);padding-left:var(--spacing-2,.5rem);padding-right:var(--spacing-2,.5rem);font-size:var(--font-size-xs)}.md\:btn-sm{height:var(--spacing-8,2rem);padding-left:var(--spacing-3,.75rem);padding-right:var(--spacing-3,.75rem);font-size:var(--font-size-sm)}.md\:btn-md{height:var(--spacing-10,2.5rem);padding-left:var(--spacing-4,1rem);padding-right:var(--spacing-4,1rem);font-size:var(--font-size-sm)}.md\:btn-lg{height:var(--spacing-14,3.5rem);padding-left:var(--spacing-6,1.5rem);padding-right:var(--spacing-6,1.5rem);font-size:var(--font-size-lg)}.md\:btn-square{width:var(--spacing-10,2.5rem);height:var(--spacing-10,2.5rem);padding-left:var(--spacing-0,0px);padding-right:var(--spacing-0,0px);&.btn-xs{width:var(--spacing-6,1.5rem);height:var(--spacing-6,1.5rem)}&.btn-sm{width:var(--spacing-8,2rem);height:var(--spacing-8,2rem)}&.btn-md{width:var(--spacing-10,2.5rem);height:var(--spacing-10,2.5rem)}&.btn-lg{width:var(--spacing-14,3.5rem);height:var(--spacing-14,3.5rem)}}.md\:btn-circle{width:var(--spacing-10,2.5rem);height:var(--spacing-10,2.5rem);padding-left:var(--spacing-0,0px);padding-right:var(--spacing-0,0px);border-radius:3.40282e38px;&.btn-xs{width:var(--spacing-6,1.5rem);height:var(--spacing-6,1.5rem)}&.btn-sm{width:var(--spacing-8,2rem);height:var(--spacing-8,2rem)}&.btn-md{width:var(--spacing-10,2.5rem);height:var(--spacing-10,2.5rem)}&.btn-lg{width:var(--spacing-14,3.5rem);height:var(--spacing-14,3.5rem)}}.md\:btn-wide{width:var(--spacing-64,16rem)}.md\:btn-block{width:100%}}@media (width>=1024px){.lg\:btn{height:var(--spacing-10,2.5rem);cursor:pointer;justify-content:center;align-items:center;gap:var(--spacing-2,.5rem);padding-left:var(--spacing-4,1rem);padding-right:var(--spacing-4,1rem);text-align:center;vertical-align:middle;color:var(--color-base-content, );outline-offset:2px;-webkit-user-select:none;user-select:none;font-size:var(--font-size-sm);outline-color:var(--color-base-content);--btn-color:var(--btn-bg,var(--color-base-200));background-color:var(--btn-color);border:var(--spacing-button-border,1px)solid color-mix(in oklab,var(--btn-color),black 5%);text-shadow:0 .5px oklch(1 0 0/.15);box-shadow:0 0 0 .5px oklch(1 0 0/.01)inset,var(--btn-shadow);background-origin:border-box;background-image:var(--btn-gradient);background-size:100% calc(var(--spacing-button-border,1px) + .5px),100% calc(var(--spacing-button-border,1px) + .5px),2rem 100%,2rem 100%;--btn-shadow:0 3px 2px -2px color-mix(in oklab,var(--btn-color)30%,transparent),0 4px 3px -2px color-mix(in oklab,var(--btn-color)30%,transparent);--btn-gradient:linear-gradient(to left,transparent 25%,oklch(100% 0 0/.3),transparent 75%),linear-gradient(to left,transparent 25%,oklch(100% 0 0/.3),transparent 75%),linear-gradient(-50deg,transparent 50%,oklab(100% 0 5.96046e-8/.04)),linear-gradient(50deg,transparent 50%,oklab(100% 0 5.96046e-8/.04));background-position:top,bottom,0,100%;background-repeat:no-repeat;border-start-start-radius:var(--radius-join-start-start,var(--radius-btn));border-start-end-radius:var(--radius-join-start-end,var(--radius-btn));border-end-end-radius:var(--radius-join-end-end,var(--radius-btn));border-end-start-radius:var(--radius-join-end-start,var(--radius-btn));flex-wrap:nowrap;flex-shrink:0;font-weight:600;text-decoration-line:none;transition-property:color,background-color,background-image,border-color,opacity,box-shadow,scale;transition-duration:.2s;transition-timing-function:cubic-bezier(0,0,.2,1);display:inline-flex;&:hover{--btn-color:color-mix(in oklab,var(--btn-bg,var(--color-base-200)),black 5%)}&.btn-active{--btn-color:color-mix(in oklab,var(--btn-bg,var(--color-base-200)),black 5%);--btn-shadow:0 0 0 0 oklch(0% 0 0/.07)}&:focus-visible{outline-width:2px;outline-style:solid}&:active:not(.btn-active){background-color:color-mix(in oklab,var(--btn-bg,var(--color-base-200)),black 5%);border-color:color-mix(in oklab,var(--btn-bg,var(--color-base-200)),black 7%);--btn-shadow:0 0 0 0 oklch(0% 0 0/.07);translate:0 .5px}}.lg\:btn-primary{--btn-bg:var(--color-primary);color:var(--color-primary-content, );outline-color:var(--color-primary, )}.lg\:btn-secondary{--btn-bg:var(--color-secondary);color:var(--color-secondary-content, );outline-color:var(--color-secondary, )}.lg\:btn-accent{--btn-bg:var(--color-accent);color:var(--color-accent-content, );outline-color:var(--color-accent, )}.lg\:btn-neutral{--btn-bg:var(--color-neutral);color:var(--color-neutral-content, );outline-color:var(--color-neutral, )}.lg\:btn-info{--btn-bg:var(--color-info);color:var(--color-info-content, );outline-color:var(--color-info, )}.lg\:btn-success{--btn-bg:var(--color-success);color:var(--color-success-content, );outline-color:var(--color-success, )}.lg\:btn-warning{--btn-bg:var(--color-warning);color:var(--color-warning-content, );outline-color:var(--color-warning, )}.lg\:btn-error{--btn-bg:var(--color-error);color:var(--color-error-content, );outline-color:var(--color-error, )}.lg\:btn.glass{box-shadow:none;outline-color:currentColor;&:hover{@media (hover:hover){&{--glass-border-opacity:15%}}}&:hover{@media (hover:hover){&{--glass-opacity:25%}}}&.btn-active{--glass-border-opacity:15%;--glass-opacity:25%}}.lg\:btn-ghost{box-shadow:none;color:currentColor;--btn-gradient:unset;background-color:#0000;border:1px solid #0000;outline-color:currentColor}.lg\:btn-link{box-shadow:none;color:var(--color-primary, );--btn-gradient:unset;background-color:#0000;border-color:#0000;outline-color:currentColor;text-decoration-line:underline;&:hover{@media (hover:hover){&{border-color:#0000}}}&:hover{@media (hover:hover){&{background-color:#0000}}}&:hover{@media (hover:hover){&{text-decoration-line:underline}}}&.btn-active{background-color:#0000;border-color:#0000;text-decoration-line:underline}}.lg\:btn-outline{&:not(.btn-active,:hover,:active:focus,:focus-visible){box-shadow:none;color:var(--btn-bg);--btn-gradient:unset;background-color:#0000}}.lg\:btn-dash{&:not(.btn-active,:hover,:active:focus,:focus-visible){box-shadow:none;color:var(--btn-bg);--btn-gradient:unset;background-color:#0000;border-style:dashed}}.lg\:btn-soft{&:not(.btn-active,:hover,:active:focus,:focus-visible){box-shadow:none;color:var(--btn-bg,var(--color-base-content));background:color-mix(in oklab,var(--btn-bg,var(--color-base-content))8%,var(--color-base-200));border-color:color-mix(in oklab,var(--btn-bg,var(--color-base-content))10%,var(--color-base-200));--btn-gradient:unset}}.lg\:btn{&:is(:disabled,[disabled],.btn-disabled){pointer-events:none;background-color:color-mix(in oklch,var(--color-neutral, )20%,transparent);color:color-mix(in oklch,var(--color-base-content, )20%,transparent);--btn-gradient:unset;border-color:#0000;&:hover{pointer-events:none;background-color:color-mix(in oklch,var(--color-neutral, )20%,transparent);color:color-mix(in oklch,var(--color-base-content, )20%,transparent);border-color:#0000}}}.lg\:btn{&:is(input[type=checkbox]),&:is(input[type=radio]){appearance:none;&:not(.btn-square,.btn-circle){width:auto}&:after{content:attr(aria-label)}&:checked{--btn-bg:var(--color-primary);border-color:var(--color-primary, );background-color:var(--color-primary, );color:var(--color-primary-content, );&:focus-visible{outline-color:var(--color-primary, )}&:hover{background-color:color-mix(in oklab,var(--color-primary)90%,black);border-color:color-mix(in oklab,var(--color-primary)90%,black)}}}}.lg\:btn-xs{height:var(--spacing-6,1.5rem);padding-left:var(--spacing-2,.5rem);padding-right:var(--spacing-2,.5rem);font-size:var(--font-size-xs)}.lg\:btn-sm{height:var(--spacing-8,2rem);padding-left:var(--spacing-3,.75rem);padding-right:var(--spacing-3,.75rem);font-size:var(--font-size-sm)}.lg\:btn-md{height:var(--spacing-10,2.5rem);padding-left:var(--spacing-4,1rem);padding-right:var(--spacing-4,1rem);font-size:var(--font-size-sm)}.lg\:btn-lg{height:var(--spacing-14,3.5rem);padding-left:var(--spacing-6,1.5rem);padding-right:var(--spacing-6,1.5rem);font-size:var(--font-size-lg)}.lg\:btn-square{width:var(--spacing-10,2.5rem);height:var(--spacing-10,2.5rem);padding-left:var(--spacing-0,0px);padding-right:var(--spacing-0,0px);&.btn-xs{width:var(--spacing-6,1.5rem);height:var(--spacing-6,1.5rem)}&.btn-sm{width:var(--spacing-8,2rem);height:var(--spacing-8,2rem)}&.btn-md{width:var(--spacing-10,2.5rem);height:var(--spacing-10,2.5rem)}&.btn-lg{width:var(--spacing-14,3.5rem);height:var(--spacing-14,3.5rem)}}.lg\:btn-circle{width:var(--spacing-10,2.5rem);height:var(--spacing-10,2.5rem);padding-left:var(--spacing-0,0px);padding-right:var(--spacing-0,0px);border-radius:3.40282e38px;&.btn-xs{width:var(--spacing-6,1.5rem);height:var(--spacing-6,1.5rem)}&.btn-sm{width:var(--spacing-8,2rem);height:var(--spacing-8,2rem)}&.btn-md{width:var(--spacing-10,2.5rem);height:var(--spacing-10,2.5rem)}&.btn-lg{width:var(--spacing-14,3.5rem);height:var(--spacing-14,3.5rem)}}.lg\:btn-wide{width:var(--spacing-64,16rem)}.lg\:btn-block{width:100%}}@media (width>=1280px){.xl\:btn{height:var(--spacing-10,2.5rem);cursor:pointer;justify-content:center;align-items:center;gap:var(--spacing-2,.5rem);padding-left:var(--spacing-4,1rem);padding-right:var(--spacing-4,1rem);text-align:center;vertical-align:middle;color:var(--color-base-content, );outline-offset:2px;-webkit-user-select:none;user-select:none;font-size:var(--font-size-sm);outline-color:var(--color-base-content);--btn-color:var(--btn-bg,var(--color-base-200));background-color:var(--btn-color);border:var(--spacing-button-border,1px)solid color-mix(in oklab,var(--btn-color),black 5%);text-shadow:0 .5px oklch(1 0 0/.15);box-shadow:0 0 0 .5px oklch(1 0 0/.01)inset,var(--btn-shadow);background-origin:border-box;background-image:var(--btn-gradient);background-size:100% calc(var(--spacing-button-border,1px) + .5px),100% calc(var(--spacing-button-border,1px) + .5px),2rem 100%,2rem 100%;--btn-shadow:0 3px 2px -2px color-mix(in oklab,var(--btn-color)30%,transparent),0 4px 3px -2px color-mix(in oklab,var(--btn-color)30%,transparent);--btn-gradient:linear-gradient(to left,transparent 25%,oklch(100% 0 0/.3),transparent 75%),linear-gradient(to left,transparent 25%,oklch(100% 0 0/.3),transparent 75%),linear-gradient(-50deg,transparent 50%,oklab(100% 0 5.96046e-8/.04)),linear-gradient(50deg,transparent 50%,oklab(100% 0 5.96046e-8/.04));background-position:top,bottom,0,100%;background-repeat:no-repeat;border-start-start-radius:var(--radius-join-start-start,var(--radius-btn));border-start-end-radius:var(--radius-join-start-end,var(--radius-btn));border-end-end-radius:var(--radius-join-end-end,var(--radius-btn));border-end-start-radius:var(--radius-join-end-start,var(--radius-btn));flex-wrap:nowrap;flex-shrink:0;font-weight:600;text-decoration-line:none;transition-property:color,background-color,background-image,border-color,opacity,box-shadow,scale;transition-duration:.2s;transition-timing-function:cubic-bezier(0,0,.2,1);display:inline-flex;&:hover{--btn-color:color-mix(in oklab,var(--btn-bg,var(--color-base-200)),black 5%)}&.btn-active{--btn-color:color-mix(in oklab,var(--btn-bg,var(--color-base-200)),black 5%);--btn-shadow:0 0 0 0 oklch(0% 0 0/.07)}&:focus-visible{outline-width:2px;outline-style:solid}&:active:not(.btn-active){background-color:color-mix(in oklab,var(--btn-bg,var(--color-base-200)),black 5%);border-color:color-mix(in oklab,var(--btn-bg,var(--color-base-200)),black 7%);--btn-shadow:0 0 0 0 oklch(0% 0 0/.07);translate:0 .5px}}.xl\:btn-primary{--btn-bg:var(--color-primary);color:var(--color-primary-content, );outline-color:var(--color-primary, )}.xl\:btn-secondary{--btn-bg:var(--color-secondary);color:var(--color-secondary-content, );outline-color:var(--color-secondary, )}.xl\:btn-accent{--btn-bg:var(--color-accent);color:var(--color-accent-content, );outline-color:var(--color-accent, )}.xl\:btn-neutral{--btn-bg:var(--color-neutral);color:var(--color-neutral-content, );outline-color:var(--color-neutral, )}.xl\:btn-info{--btn-bg:var(--color-info);color:var(--color-info-content, );outline-color:var(--color-info, )}.xl\:btn-success{--btn-bg:var(--color-success);color:var(--color-success-content, );outline-color:var(--color-success, )}.xl\:btn-warning{--btn-bg:var(--color-warning);color:var(--color-warning-content, );outline-color:var(--color-warning, )}.xl\:btn-error{--btn-bg:var(--color-error);color:var(--color-error-content, );outline-color:var(--color-error, )}.xl\:btn.glass{box-shadow:none;outline-color:currentColor;&:hover{@media (hover:hover){&{--glass-border-opacity:15%}}}&:hover{@media (hover:hover){&{--glass-opacity:25%}}}&.btn-active{--glass-border-opacity:15%;--glass-opacity:25%}}.xl\:btn-ghost{box-shadow:none;color:currentColor;--btn-gradient:unset;background-color:#0000;border:1px solid #0000;outline-color:currentColor}.xl\:btn-link{box-shadow:none;color:var(--color-primary, );--btn-gradient:unset;background-color:#0000;border-color:#0000;outline-color:currentColor;text-decoration-line:underline;&:hover{@media (hover:hover){&{border-color:#0000}}}&:hover{@media (hover:hover){&{background-color:#0000}}}&:hover{@media (hover:hover){&{text-decoration-line:underline}}}&.btn-active{background-color:#0000;border-color:#0000;text-decoration-line:underline}}.xl\:btn-outline{&:not(.btn-active,:hover,:active:focus,:focus-visible){box-shadow:none;color:var(--btn-bg);--btn-gradient:unset;background-color:#0000}}.xl\:btn-dash{&:not(.btn-active,:hover,:active:focus,:focus-visible){box-shadow:none;color:var(--btn-bg);--btn-gradient:unset;background-color:#0000;border-style:dashed}}.xl\:btn-soft{&:not(.btn-active,:hover,:active:focus,:focus-visible){box-shadow:none;color:var(--btn-bg,var(--color-base-content));background:color-mix(in oklab,var(--btn-bg,var(--color-base-content))8%,var(--color-base-200));border-color:color-mix(in oklab,var(--btn-bg,var(--color-base-content))10%,var(--color-base-200));--btn-gradient:unset}}.xl\:btn{&:is(:disabled,[disabled],.btn-disabled){pointer-events:none;background-color:color-mix(in oklch,var(--color-neutral, )20%,transparent);color:color-mix(in oklch,var(--color-base-content, )20%,transparent);--btn-gradient:unset;border-color:#0000;&:hover{pointer-events:none;background-color:color-mix(in oklch,var(--color-neutral, )20%,transparent);color:color-mix(in oklch,var(--color-base-content, )20%,transparent);border-color:#0000}}}.xl\:btn{&:is(input[type=checkbox]),&:is(input[type=radio]){appearance:none;&:not(.btn-square,.btn-circle){width:auto}&:after{content:attr(aria-label)}&:checked{--btn-bg:var(--color-primary);border-color:var(--color-primary, );background-color:var(--color-primary, );color:var(--color-primary-content, );&:focus-visible{outline-color:var(--color-primary, )}&:hover{background-color:color-mix(in oklab,var(--color-primary)90%,black);border-color:color-mix(in oklab,var(--color-primary)90%,black)}}}}.xl\:btn-xs{height:var(--spacing-6,1.5rem);padding-left:var(--spacing-2,.5rem);padding-right:var(--spacing-2,.5rem);font-size:var(--font-size-xs)}.xl\:btn-sm{height:var(--spacing-8,2rem);padding-left:var(--spacing-3,.75rem);padding-right:var(--spacing-3,.75rem);font-size:var(--font-size-sm)}.xl\:btn-md{height:var(--spacing-10,2.5rem);padding-left:var(--spacing-4,1rem);padding-right:var(--spacing-4,1rem);font-size:var(--font-size-sm)}.xl\:btn-lg{height:var(--spacing-14,3.5rem);padding-left:var(--spacing-6,1.5rem);padding-right:var(--spacing-6,1.5rem);font-size:var(--font-size-lg)}.xl\:btn-square{width:var(--spacing-10,2.5rem);height:var(--spacing-10,2.5rem);padding-left:var(--spacing-0,0px);padding-right:var(--spacing-0,0px);&.btn-xs{width:var(--spacing-6,1.5rem);height:var(--spacing-6,1.5rem)}&.btn-sm{width:var(--spacing-8,2rem);height:var(--spacing-8,2rem)}&.btn-md{width:var(--spacing-10,2.5rem);height:var(--spacing-10,2.5rem)}&.btn-lg{width:var(--spacing-14,3.5rem);height:var(--spacing-14,3.5rem)}}.xl\:btn-circle{width:var(--spacing-10,2.5rem);height:var(--spacing-10,2.5rem);padding-left:var(--spacing-0,0px);padding-right:var(--spacing-0,0px);border-radius:3.40282e38px;&.btn-xs{width:var(--spacing-6,1.5rem);height:var(--spacing-6,1.5rem)}&.btn-sm{width:var(--spacing-8,2rem);height:var(--spacing-8,2rem)}&.btn-md{width:var(--spacing-10,2.5rem);height:var(--spacing-10,2.5rem)}&.btn-lg{width:var(--spacing-14,3.5rem);height:var(--spacing-14,3.5rem)}}.xl\:btn-wide{width:var(--spacing-64,16rem)}.xl\:btn-block{width:100%}}@media (width>=1536px){.\32 xl\:btn{height:var(--spacing-10,2.5rem);cursor:pointer;justify-content:center;align-items:center;gap:var(--spacing-2,.5rem);padding-left:var(--spacing-4,1rem);padding-right:var(--spacing-4,1rem);text-align:center;vertical-align:middle;color:var(--color-base-content, );outline-offset:2px;-webkit-user-select:none;user-select:none;font-size:var(--font-size-sm);outline-color:var(--color-base-content);--btn-color:var(--btn-bg,var(--color-base-200));background-color:var(--btn-color);border:var(--spacing-button-border,1px)solid color-mix(in oklab,var(--btn-color),black 5%);text-shadow:0 .5px oklch(1 0 0/.15);box-shadow:0 0 0 .5px oklch(1 0 0/.01)inset,var(--btn-shadow);background-origin:border-box;background-image:var(--btn-gradient);background-size:100% calc(var(--spacing-button-border,1px) + .5px),100% calc(var(--spacing-button-border,1px) + .5px),2rem 100%,2rem 100%;--btn-shadow:0 3px 2px -2px color-mix(in oklab,var(--btn-color)30%,transparent),0 4px 3px -2px color-mix(in oklab,var(--btn-color)30%,transparent);--btn-gradient:linear-gradient(to left,transparent 25%,oklch(100% 0 0/.3),transparent 75%),linear-gradient(to left,transparent 25%,oklch(100% 0 0/.3),transparent 75%),linear-gradient(-50deg,transparent 50%,oklab(100% 0 5.96046e-8/.04)),linear-gradient(50deg,transparent 50%,oklab(100% 0 5.96046e-8/.04));background-position:top,bottom,0,100%;background-repeat:no-repeat;border-start-start-radius:var(--radius-join-start-start,var(--radius-btn));border-start-end-radius:var(--radius-join-start-end,var(--radius-btn));border-end-end-radius:var(--radius-join-end-end,var(--radius-btn));border-end-start-radius:var(--radius-join-end-start,var(--radius-btn));flex-wrap:nowrap;flex-shrink:0;font-weight:600;text-decoration-line:none;transition-property:color,background-color,background-image,border-color,opacity,box-shadow,scale;transition-duration:.2s;transition-timing-function:cubic-bezier(0,0,.2,1);display:inline-flex;&:hover{--btn-color:color-mix(in oklab,var(--btn-bg,var(--color-base-200)),black 5%)}&.btn-active{--btn-color:color-mix(in oklab,var(--btn-bg,var(--color-base-200)),black 5%);--btn-shadow:0 0 0 0 oklch(0% 0 0/.07)}&:focus-visible{outline-width:2px;outline-style:solid}&:active:not(.btn-active){background-color:color-mix(in oklab,var(--btn-bg,var(--color-base-200)),black 5%);border-color:color-mix(in oklab,var(--btn-bg,var(--color-base-200)),black 7%);--btn-shadow:0 0 0 0 oklch(0% 0 0/.07);translate:0 .5px}}.\32 xl\:btn-primary{--btn-bg:var(--color-primary);color:var(--color-primary-content, );outline-color:var(--color-primary, )}.\32 xl\:btn-secondary{--btn-bg:var(--color-secondary);color:var(--color-secondary-content, );outline-color:var(--color-secondary, )}.\32 xl\:btn-accent{--btn-bg:var(--color-accent);color:var(--color-accent-content, );outline-color:var(--color-accent, )}.\32 xl\:btn-neutral{--btn-bg:var(--color-neutral);color:var(--color-neutral-content, );outline-color:var(--color-neutral, )}.\32 xl\:btn-info{--btn-bg:var(--color-info);color:var(--color-info-content, );outline-color:var(--color-info, )}.\32 xl\:btn-success{--btn-bg:var(--color-success);color:var(--color-success-content, );outline-color:var(--color-success, )}.\32 xl\:btn-warning{--btn-bg:var(--color-warning);color:var(--color-warning-content, );outline-color:var(--color-warning, )}.\32 xl\:btn-error{--btn-bg:var(--color-error);color:var(--color-error-content, );outline-color:var(--color-error, )}.\32 xl\:btn.glass{box-shadow:none;outline-color:currentColor;&:hover{@media (hover:hover){&{--glass-border-opacity:15%}}}&:hover{@media (hover:hover){&{--glass-opacity:25%}}}&.btn-active{--glass-border-opacity:15%;--glass-opacity:25%}}.\32 xl\:btn-ghost{box-shadow:none;color:currentColor;--btn-gradient:unset;background-color:#0000;border:1px solid #0000;outline-color:currentColor}.\32 xl\:btn-link{box-shadow:none;color:var(--color-primary, );--btn-gradient:unset;background-color:#0000;border-color:#0000;outline-color:currentColor;text-decoration-line:underline;&:hover{@media (hover:hover){&{border-color:#0000}}}&:hover{@media (hover:hover){&{background-color:#0000}}}&:hover{@media (hover:hover){&{text-decoration-line:underline}}}&.btn-active{background-color:#0000;border-color:#0000;text-decoration-line:underline}}.\32 xl\:btn-outline{&:not(.btn-active,:hover,:active:focus,:focus-visible){box-shadow:none;color:var(--btn-bg);--btn-gradient:unset;background-color:#0000}}.\32 xl\:btn-dash{&:not(.btn-active,:hover,:active:focus,:focus-visible){box-shadow:none;color:var(--btn-bg);--btn-gradient:unset;background-color:#0000;border-style:dashed}}.\32 xl\:btn-soft{&:not(.btn-active,:hover,:active:focus,:focus-visible){box-shadow:none;color:var(--btn-bg,var(--color-base-content));background:color-mix(in oklab,var(--btn-bg,var(--color-base-content))8%,var(--color-base-200));border-color:color-mix(in oklab,var(--btn-bg,var(--color-base-content))10%,var(--color-base-200));--btn-gradient:unset}}.\32 xl\:btn{&:is(:disabled,[disabled],.btn-disabled){pointer-events:none;background-color:color-mix(in oklch,var(--color-neutral, )20%,transparent);color:color-mix(in oklch,var(--color-base-content, )20%,transparent);--btn-gradient:unset;border-color:#0000;&:hover{pointer-events:none;background-color:color-mix(in oklch,var(--color-neutral, )20%,transparent);color:color-mix(in oklch,var(--color-base-content, )20%,transparent);border-color:#0000}}}.\32 xl\:btn{&:is(input[type=checkbox]),&:is(input[type=radio]){appearance:none;&:not(.btn-square,.btn-circle){width:auto}&:after{content:attr(aria-label)}&:checked{--btn-bg:var(--color-primary);border-color:var(--color-primary, );background-color:var(--color-primary, );color:var(--color-primary-content, );&:focus-visible{outline-color:var(--color-primary, )}&:hover{background-color:color-mix(in oklab,var(--color-primary)90%,black);border-color:color-mix(in oklab,var(--color-primary)90%,black)}}}}.\32 xl\:btn-xs{height:var(--spacing-6,1.5rem);padding-left:var(--spacing-2,.5rem);padding-right:var(--spacing-2,.5rem);font-size:var(--font-size-xs)}.\32 xl\:btn-sm{height:var(--spacing-8,2rem);padding-left:var(--spacing-3,.75rem);padding-right:var(--spacing-3,.75rem);font-size:var(--font-size-sm)}.\32 xl\:btn-md{height:var(--spacing-10,2.5rem);padding-left:var(--spacing-4,1rem);padding-right:var(--spacing-4,1rem);font-size:var(--font-size-sm)}.\32 xl\:btn-lg{height:var(--spacing-14,3.5rem);padding-left:var(--spacing-6,1.5rem);padding-right:var(--spacing-6,1.5rem);font-size:var(--font-size-lg)}.\32 xl\:btn-square{width:var(--spacing-10,2.5rem);height:var(--spacing-10,2.5rem);padding-left:var(--spacing-0,0px);padding-right:var(--spacing-0,0px);&.btn-xs{width:var(--spacing-6,1.5rem);height:var(--spacing-6,1.5rem)}&.btn-sm{width:var(--spacing-8,2rem);height:var(--spacing-8,2rem)}&.btn-md{width:var(--spacing-10,2.5rem);height:var(--spacing-10,2.5rem)}&.btn-lg{width:var(--spacing-14,3.5rem);height:var(--spacing-14,3.5rem)}}.\32 xl\:btn-circle{width:var(--spacing-10,2.5rem);height:var(--spacing-10,2.5rem);padding-left:var(--spacing-0,0px);padding-right:var(--spacing-0,0px);border-radius:3.40282e38px;&.btn-xs{width:var(--spacing-6,1.5rem);height:var(--spacing-6,1.5rem)}&.btn-sm{width:var(--spacing-8,2rem);height:var(--spacing-8,2rem)}&.btn-md{width:var(--spacing-10,2.5rem);height:var(--spacing-10,2.5rem)}&.btn-lg{width:var(--spacing-14,3.5rem);height:var(--spacing-14,3.5rem)}}.\32 xl\:btn-wide{width:var(--spacing-64,16rem)}.\32 xl\:btn-block{width:100%}}
package/components/card/index.js ADDED
@@ -0,0 +1,4 @@
1
+ import card from './object.js';
2
+ export default ({ addComponents }) => {
3
+ addComponents({...card})
4
+ }
package/components/card/object.js ADDED
@@ -0,0 +1 @@
1
+ export default {".card":{"position":"relative","display":"flex","flex-direction":"column","border-radius":"var(--radius-box, )","&:focus":{"outline":"2px solid transparent","outline-offset":"2px"},"&:focus-visible":{"outline":"2px solid currentColor","outline-offset":"2px"},":where(figure:first-child)":{"overflow":"hidden","border-start-start-radius":"inherit","border-start-end-radius":"inherit","border-end-start-radius":"unset","border-end-end-radius":"unset"},":where(figure:last-child)":{"overflow":"hidden","border-start-start-radius":"unset","border-start-end-radius":"unset","border-end-start-radius":"inherit","border-end-end-radius":"inherit"},"&.card-border":{"border":"1px solid var(--color-base-200)"},"&.image-full":{"display":"grid","&:before":{"position":"relative","z-index":10,"grid-column-start":"1","grid-row-start":"1","border-radius":"var(--radius-box, )","background-color":"var(--color-neutral, )","opacity":"75%","content":"\"\""},">*":{"grid-column-start":"1","grid-row-start":"1"},">.card-body":{"position":"relative","z-index":20,"color":"var(--color-neutral-content, )"},":where(figure)":{"overflow":"hidden","border-radius":"inherit"},">figure img":{"height":"100%","object-fit":"cover"}},"figure":{"display":"flex","align-items":"center","justify-content":"center"}},".card-title":{"display":"flex","align-items":"center","gap":"var(--spacing-2, 0.5rem)","font-size":"1.25rem","line-height":"1.75rem","font-weight":600},".card-body":{"display":"flex","flex":"auto","flex-direction":"column","gap":"var(--spacing-2, 0.5rem)","padding":"var(--spacing-8, 2rem)",":where(p)":{"flex-grow":1}},".card-actions":{"display":"flex","flex-wrap":"wrap","align-items":"flex-start","gap":"var(--spacing-2, 0.5rem)"},".card-xs":{".card-body":{"padding":"var(--spacing-2, 0.5rem)","font-size":"0.75rem","line-height":"1rem"},".card-title":{"margin-bottom":"var(--spacing-1, 0.25rem)"}},".card-sm":{".card-body":{"padding":"var(--spacing-4, 1rem)","font-size":"0.875rem","line-height":"1.25rem"},".card-title":{"margin-bottom":"var(--spacing-1, 0.25rem)"}},".card-md":{".card-body":{"padding":"var(--spacing-8, 2rem)","font-size":"1rem","line-height":"1.5rem"},".card-title":{"margin-bottom":"var(--spacing-3, 0.75rem)"}},".card-lg":{".card-body":{"padding":"var(--spacing-10, 2.5rem)","font-size":"1rem","line-height":"1rem"},".card-title":{"margin-bottom":"var(--spacing-4, 1rem)"}},".card-side":{"align-items":"stretch","flex-direction":"row",":where(figure:first-child)":{"overflow":"hidden","border-start-start-radius":"inherit","border-start-end-radius":"unset","border-end-start-radius":"inherit","border-end-end-radius":"unset"},":where(figure:last-child)":{"overflow":"hidden","border-start-start-radius":"unset","border-start-end-radius":"inherit","border-end-start-radius":"unset","border-end-end-radius":"inherit"},"figure>*":{"max-width":"unset"},":where(figure>*)":{"width":"100%","height":"100%","object-fit":"cover"}}};
package/components/card.css ADDED
@@ -0,0 +1 @@
1
+ /*! 🌼 daisyUI 5.0.0-alpha.30 – MIT License */ .card{border-radius:var(--radius-box, );flex-direction:column;display:flex;position:relative;&:focus{outline-offset:2px;outline:2px solid #0000}&:focus-visible{outline-offset:2px;outline:2px solid}& :where(figure:first-child){border-start-start-radius:inherit;border-start-end-radius:inherit;border-end-end-radius:unset;border-end-start-radius:unset;overflow:hidden}& :where(figure:last-child){border-start-start-radius:unset;border-start-end-radius:unset;border-end-end-radius:inherit;border-end-start-radius:inherit;overflow:hidden}&.card-border{border:1px solid var(--color-base-200)}&.image-full{display:grid;&:before{z-index:10;border-radius:var(--radius-box, );background-color:var(--color-neutral, );opacity:.75;content:"";grid-row-start:1;grid-column-start:1;position:relative}&>*{grid-row-start:1;grid-column-start:1}&>.card-body{z-index:20;color:var(--color-neutral-content, );position:relative}& :where(figure){border-radius:inherit;overflow:hidden}&>figure img{object-fit:cover;height:100%}}& figure{justify-content:center;align-items:center;display:flex}}.card-title{align-items:center;gap:var(--spacing-2,.5rem);font-size:1.25rem;font-weight:600;line-height:1.75rem;display:flex}.card-body{gap:var(--spacing-2,.5rem);padding:var(--spacing-8,2rem);flex-direction:column;flex:auto;display:flex;& :where(p){flex-grow:1}}.card-actions{align-items:flex-start;gap:var(--spacing-2,.5rem);flex-wrap:wrap;display:flex}.card-xs{& .card-body{padding:var(--spacing-2,.5rem);font-size:.75rem;line-height:1rem}& .card-title{margin-bottom:var(--spacing-1,.25rem)}}.card-sm{& .card-body{padding:var(--spacing-4,1rem);font-size:.875rem;line-height:1.25rem}& .card-title{margin-bottom:var(--spacing-1,.25rem)}}.card-md{& .card-body{padding:var(--spacing-8,2rem);font-size:1rem;line-height:1.5rem}& .card-title{margin-bottom:var(--spacing-3,.75rem)}}.card-lg{& .card-body{padding:var(--spacing-10,2.5rem);font-size:1rem;line-height:1rem}& .card-title{margin-bottom:var(--spacing-4,1rem)}}.card-side{flex-direction:row;align-items:stretch;& :where(figure:first-child){border-start-start-radius:inherit;border-start-end-radius:unset;border-end-end-radius:unset;border-end-start-radius:inherit;overflow:hidden}& :where(figure:last-child){border-start-start-radius:unset;border-start-end-radius:inherit;border-end-end-radius:inherit;border-end-start-radius:unset;overflow:hidden}& figure>*{max-width:unset}& :where(figure>*){object-fit:cover;width:100%;height:100%}}@media (width>=640px){.sm\:card{border-radius:var(--radius-box, );flex-direction:column;display:flex;position:relative;&:focus{outline-offset:2px;outline:2px solid #0000}&:focus-visible{outline-offset:2px;outline:2px solid}& :where(figure:first-child){border-start-start-radius:inherit;border-start-end-radius:inherit;border-end-end-radius:unset;border-end-start-radius:unset;overflow:hidden}& :where(figure:last-child){border-start-start-radius:unset;border-start-end-radius:unset;border-end-end-radius:inherit;border-end-start-radius:inherit;overflow:hidden}&.card-border{border:1px solid var(--color-base-200)}&.image-full{display:grid;&:before{z-index:10;border-radius:var(--radius-box, );background-color:var(--color-neutral, );opacity:.75;content:"";grid-row-start:1;grid-column-start:1;position:relative}&>*{grid-row-start:1;grid-column-start:1}&>.card-body{z-index:20;color:var(--color-neutral-content, );position:relative}& :where(figure){border-radius:inherit;overflow:hidden}&>figure img{object-fit:cover;height:100%}}& figure{justify-content:center;align-items:center;display:flex}}.sm\:card-title{align-items:center;gap:var(--spacing-2,.5rem);font-size:1.25rem;font-weight:600;line-height:1.75rem;display:flex}.sm\:card-body{gap:var(--spacing-2,.5rem);padding:var(--spacing-8,2rem);flex-direction:column;flex:auto;display:flex;& :where(p){flex-grow:1}}.sm\:card-actions{align-items:flex-start;gap:var(--spacing-2,.5rem);flex-wrap:wrap;display:flex}.sm\:card-xs{& .card-body{padding:var(--spacing-2,.5rem);font-size:.75rem;line-height:1rem}& .card-title{margin-bottom:var(--spacing-1,.25rem)}}.sm\:card-sm{& .card-body{padding:var(--spacing-4,1rem);font-size:.875rem;line-height:1.25rem}& .card-title{margin-bottom:var(--spacing-1,.25rem)}}.sm\:card-md{& .card-body{padding:var(--spacing-8,2rem);font-size:1rem;line-height:1.5rem}& .card-title{margin-bottom:var(--spacing-3,.75rem)}}.sm\:card-lg{& .card-body{padding:var(--spacing-10,2.5rem);font-size:1rem;line-height:1rem}& .card-title{margin-bottom:var(--spacing-4,1rem)}}.sm\:card-side{flex-direction:row;align-items:stretch;& :where(figure:first-child){border-start-start-radius:inherit;border-start-end-radius:unset;border-end-end-radius:unset;border-end-start-radius:inherit;overflow:hidden}& :where(figure:last-child){border-start-start-radius:unset;border-start-end-radius:inherit;border-end-end-radius:inherit;border-end-start-radius:unset;overflow:hidden}& figure>*{max-width:unset}& :where(figure>*){object-fit:cover;width:100%;height:100%}}}@media (width>=768px){.md\:card{border-radius:var(--radius-box, );flex-direction:column;display:flex;position:relative;&:focus{outline-offset:2px;outline:2px solid #0000}&:focus-visible{outline-offset:2px;outline:2px solid}& :where(figure:first-child){border-start-start-radius:inherit;border-start-end-radius:inherit;border-end-end-radius:unset;border-end-start-radius:unset;overflow:hidden}& :where(figure:last-child){border-start-start-radius:unset;border-start-end-radius:unset;border-end-end-radius:inherit;border-end-start-radius:inherit;overflow:hidden}&.card-border{border:1px solid var(--color-base-200)}&.image-full{display:grid;&:before{z-index:10;border-radius:var(--radius-box, );background-color:var(--color-neutral, );opacity:.75;content:"";grid-row-start:1;grid-column-start:1;position:relative}&>*{grid-row-start:1;grid-column-start:1}&>.card-body{z-index:20;color:var(--color-neutral-content, );position:relative}& :where(figure){border-radius:inherit;overflow:hidden}&>figure img{object-fit:cover;height:100%}}& figure{justify-content:center;align-items:center;display:flex}}.md\:card-title{align-items:center;gap:var(--spacing-2,.5rem);font-size:1.25rem;font-weight:600;line-height:1.75rem;display:flex}.md\:card-body{gap:var(--spacing-2,.5rem);padding:var(--spacing-8,2rem);flex-direction:column;flex:auto;display:flex;& :where(p){flex-grow:1}}.md\:card-actions{align-items:flex-start;gap:var(--spacing-2,.5rem);flex-wrap:wrap;display:flex}.md\:card-xs{& .card-body{padding:var(--spacing-2,.5rem);font-size:.75rem;line-height:1rem}& .card-title{margin-bottom:var(--spacing-1,.25rem)}}.md\:card-sm{& .card-body{padding:var(--spacing-4,1rem);font-size:.875rem;line-height:1.25rem}& .card-title{margin-bottom:var(--spacing-1,.25rem)}}.md\:card-md{& .card-body{padding:var(--spacing-8,2rem);font-size:1rem;line-height:1.5rem}& .card-title{margin-bottom:var(--spacing-3,.75rem)}}.md\:card-lg{& .card-body{padding:var(--spacing-10,2.5rem);font-size:1rem;line-height:1rem}& .card-title{margin-bottom:var(--spacing-4,1rem)}}.md\:card-side{flex-direction:row;align-items:stretch;& :where(figure:first-child){border-start-start-radius:inherit;border-start-end-radius:unset;border-end-end-radius:unset;border-end-start-radius:inherit;overflow:hidden}& :where(figure:last-child){border-start-start-radius:unset;border-start-end-radius:inherit;border-end-end-radius:inherit;border-end-start-radius:unset;overflow:hidden}& figure>*{max-width:unset}& :where(figure>*){object-fit:cover;width:100%;height:100%}}}@media (width>=1024px){.lg\:card{border-radius:var(--radius-box, );flex-direction:column;display:flex;position:relative;&:focus{outline-offset:2px;outline:2px solid #0000}&:focus-visible{outline-offset:2px;outline:2px solid}& :where(figure:first-child){border-start-start-radius:inherit;border-start-end-radius:inherit;border-end-end-radius:unset;border-end-start-radius:unset;overflow:hidden}& :where(figure:last-child){border-start-start-radius:unset;border-start-end-radius:unset;border-end-end-radius:inherit;border-end-start-radius:inherit;overflow:hidden}&.card-border{border:1px solid var(--color-base-200)}&.image-full{display:grid;&:before{z-index:10;border-radius:var(--radius-box, );background-color:var(--color-neutral, );opacity:.75;content:"";grid-row-start:1;grid-column-start:1;position:relative}&>*{grid-row-start:1;grid-column-start:1}&>.card-body{z-index:20;color:var(--color-neutral-content, );position:relative}& :where(figure){border-radius:inherit;overflow:hidden}&>figure img{object-fit:cover;height:100%}}& figure{justify-content:center;align-items:center;display:flex}}.lg\:card-title{align-items:center;gap:var(--spacing-2,.5rem);font-size:1.25rem;font-weight:600;line-height:1.75rem;display:flex}.lg\:card-body{gap:var(--spacing-2,.5rem);padding:var(--spacing-8,2rem);flex-direction:column;flex:auto;display:flex;& :where(p){flex-grow:1}}.lg\:card-actions{align-items:flex-start;gap:var(--spacing-2,.5rem);flex-wrap:wrap;display:flex}.lg\:card-xs{& .card-body{padding:var(--spacing-2,.5rem);font-size:.75rem;line-height:1rem}& .card-title{margin-bottom:var(--spacing-1,.25rem)}}.lg\:card-sm{& .card-body{padding:var(--spacing-4,1rem);font-size:.875rem;line-height:1.25rem}& .card-title{margin-bottom:var(--spacing-1,.25rem)}}.lg\:card-md{& .card-body{padding:var(--spacing-8,2rem);font-size:1rem;line-height:1.5rem}& .card-title{margin-bottom:var(--spacing-3,.75rem)}}.lg\:card-lg{& .card-body{padding:var(--spacing-10,2.5rem);font-size:1rem;line-height:1rem}& .card-title{margin-bottom:var(--spacing-4,1rem)}}.lg\:card-side{flex-direction:row;align-items:stretch;& :where(figure:first-child){border-start-start-radius:inherit;border-start-end-radius:unset;border-end-end-radius:unset;border-end-start-radius:inherit;overflow:hidden}& :where(figure:last-child){border-start-start-radius:unset;border-start-end-radius:inherit;border-end-end-radius:inherit;border-end-start-radius:unset;overflow:hidden}& figure>*{max-width:unset}& :where(figure>*){object-fit:cover;width:100%;height:100%}}}@media (width>=1280px){.xl\:card{border-radius:var(--radius-box, );flex-direction:column;display:flex;position:relative;&:focus{outline-offset:2px;outline:2px solid #0000}&:focus-visible{outline-offset:2px;outline:2px solid}& :where(figure:first-child){border-start-start-radius:inherit;border-start-end-radius:inherit;border-end-end-radius:unset;border-end-start-radius:unset;overflow:hidden}& :where(figure:last-child){border-start-start-radius:unset;border-start-end-radius:unset;border-end-end-radius:inherit;border-end-start-radius:inherit;overflow:hidden}&.card-border{border:1px solid var(--color-base-200)}&.image-full{display:grid;&:before{z-index:10;border-radius:var(--radius-box, );background-color:var(--color-neutral, );opacity:.75;content:"";grid-row-start:1;grid-column-start:1;position:relative}&>*{grid-row-start:1;grid-column-start:1}&>.card-body{z-index:20;color:var(--color-neutral-content, );position:relative}& :where(figure){border-radius:inherit;overflow:hidden}&>figure img{object-fit:cover;height:100%}}& figure{justify-content:center;align-items:center;display:flex}}.xl\:card-title{align-items:center;gap:var(--spacing-2,.5rem);font-size:1.25rem;font-weight:600;line-height:1.75rem;display:flex}.xl\:card-body{gap:var(--spacing-2,.5rem);padding:var(--spacing-8,2rem);flex-direction:column;flex:auto;display:flex;& :where(p){flex-grow:1}}.xl\:card-actions{align-items:flex-start;gap:var(--spacing-2,.5rem);flex-wrap:wrap;display:flex}.xl\:card-xs{& .card-body{padding:var(--spacing-2,.5rem);font-size:.75rem;line-height:1rem}& .card-title{margin-bottom:var(--spacing-1,.25rem)}}.xl\:card-sm{& .card-body{padding:var(--spacing-4,1rem);font-size:.875rem;line-height:1.25rem}& .card-title{margin-bottom:var(--spacing-1,.25rem)}}.xl\:card-md{& .card-body{padding:var(--spacing-8,2rem);font-size:1rem;line-height:1.5rem}& .card-title{margin-bottom:var(--spacing-3,.75rem)}}.xl\:card-lg{& .card-body{padding:var(--spacing-10,2.5rem);font-size:1rem;line-height:1rem}& .card-title{margin-bottom:var(--spacing-4,1rem)}}.xl\:card-side{flex-direction:row;align-items:stretch;& :where(figure:first-child){border-start-start-radius:inherit;border-start-end-radius:unset;border-end-end-radius:unset;border-end-start-radius:inherit;overflow:hidden}& :where(figure:last-child){border-start-start-radius:unset;border-start-end-radius:inherit;border-end-end-radius:inherit;border-end-start-radius:unset;overflow:hidden}& figure>*{max-width:unset}& :where(figure>*){object-fit:cover;width:100%;height:100%}}}@media (width>=1536px){.\32 xl\:card{border-radius:var(--radius-box, );flex-direction:column;display:flex;position:relative;&:focus{outline-offset:2px;outline:2px solid #0000}&:focus-visible{outline-offset:2px;outline:2px solid}& :where(figure:first-child){border-start-start-radius:inherit;border-start-end-radius:inherit;border-end-end-radius:unset;border-end-start-radius:unset;overflow:hidden}& :where(figure:last-child){border-start-start-radius:unset;border-start-end-radius:unset;border-end-end-radius:inherit;border-end-start-radius:inherit;overflow:hidden}&.card-border{border:1px solid var(--color-base-200)}&.image-full{display:grid;&:before{z-index:10;border-radius:var(--radius-box, );background-color:var(--color-neutral, );opacity:.75;content:"";grid-row-start:1;grid-column-start:1;position:relative}&>*{grid-row-start:1;grid-column-start:1}&>.card-body{z-index:20;color:var(--color-neutral-content, );position:relative}& :where(figure){border-radius:inherit;overflow:hidden}&>figure img{object-fit:cover;height:100%}}& figure{justify-content:center;align-items:center;display:flex}}.\32 xl\:card-title{align-items:center;gap:var(--spacing-2,.5rem);font-size:1.25rem;font-weight:600;line-height:1.75rem;display:flex}.\32 xl\:card-body{gap:var(--spacing-2,.5rem);padding:var(--spacing-8,2rem);flex-direction:column;flex:auto;display:flex;& :where(p){flex-grow:1}}.\32 xl\:card-actions{align-items:flex-start;gap:var(--spacing-2,.5rem);flex-wrap:wrap;display:flex}.\32 xl\:card-xs{& .card-body{padding:var(--spacing-2,.5rem);font-size:.75rem;line-height:1rem}& .card-title{margin-bottom:var(--spacing-1,.25rem)}}.\32 xl\:card-sm{& .card-body{padding:var(--spacing-4,1rem);font-size:.875rem;line-height:1.25rem}& .card-title{margin-bottom:var(--spacing-1,.25rem)}}.\32 xl\:card-md{& .card-body{padding:var(--spacing-8,2rem);font-size:1rem;line-height:1.5rem}& .card-title{margin-bottom:var(--spacing-3,.75rem)}}.\32 xl\:card-lg{& .card-body{padding:var(--spacing-10,2.5rem);font-size:1rem;line-height:1rem}& .card-title{margin-bottom:var(--spacing-4,1rem)}}.\32 xl\:card-side{flex-direction:row;align-items:stretch;& :where(figure:first-child){border-start-start-radius:inherit;border-start-end-radius:unset;border-end-end-radius:unset;border-end-start-radius:inherit;overflow:hidden}& :where(figure:last-child){border-start-start-radius:unset;border-start-end-radius:inherit;border-end-end-radius:inherit;border-end-start-radius:unset;overflow:hidden}& figure>*{max-width:unset}& :where(figure>*){object-fit:cover;width:100%;height:100%}}}
package/components/chat/index.js ADDED
@@ -0,0 +1,4 @@
1
+ import chat from './object.js';
2
+ export default ({ addComponents }) => {
3
+ addComponents({...chat})
4
+ }
package/components/chat/object.js ADDED
@@ -0,0 +1 @@
1
+ export default {".chat":{"display":"grid","column-gap":"var(--spacing-3, 0.75rem)","padding-top":"var(--spacing-1, 0.25rem)","padding-bottom":"var(--spacing-1, 0.25rem)"},".chat-primary":{"background-color":"var(--color-primary, )","color":"var(--color-primary-content, )"},".chat-secondary":{"background-color":"var(--color-secondary, )","color":"var(--color-secondary-content, )"},".chat-accent":{"background-color":"var(--color-accent, )","color":"var(--color-accent-content, )"},".chat-neutral":{"background-color":"var(--color-neutral, )","color":"var(--color-neutral-content, )"},".chat-info":{"background-color":"var(--color-info, )","color":"var(--color-info-content, )"},".chat-success":{"background-color":"var(--color-success, )","color":"var(--color-success-content, )"},".chat-warning":{"background-color":"var(--color-warning, )","color":"var(--color-warning-content, )"},".chat-error":{"background-color":"var(--color-error, )","color":"var(--color-error-content, )"},".chat-image":{"grid-row":"span 2 / span 2","align-self":"flex-end"},".chat-header":{"grid-row-start":"1","font-size":"0.75rem","line-height":"1rem"},".chat-footer":{"grid-row-start":"3","font-size":"0.75rem","line-height":"1rem"},".chat-bubble":{"position":"relative","display":"block","width":"fit-content","border-radius":"var(--radius-box, )","background-color":"var(--color-base-200, )","padding-left":"var(--spacing-4, 1rem)","padding-right":"var(--spacing-4, 1rem)","padding-top":"var(--spacing-2, 0.5rem)","padding-bottom":"var(--spacing-2, 0.5rem)","color":"var(--color-base-content, )","min-height":"2.5rem","min-width":"2.5rem","max-width":"90%","&:before":{"position":"absolute","bottom":"var(--spacing-0, 0px)","height":"var(--spacing-3, 0.75rem)","width":"var(--spacing-3, 0.75rem)","background-color":"inherit","content":"\"\"","mask-size":"contain","mask-repeat":"no-repeat","mask-position":"center"}},".chat-start":{"place-items":"start","grid-template-columns":"auto 1fr",".chat-header":{"grid-column-start":"2"},".chat-footer":{"grid-column-start":"2"},".chat-image":{"grid-column-start":"1"},".chat-bubble":{"grid-column-start":"2","border-end-start-radius":"0","&:before":{"inset-inline-start":"-0.749rem","mask-image":"url(\"data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 3 3 L 3 0 C 3 1 1 3 0 3'/%3e%3c/svg%3e\")","[dir=\"rtl\"] &":{"mask-image":"url(\"data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 1 3 L 3 3 C 2 3 0 1 0 0'/%3e%3c/svg%3e\")"}}}},".chat-end":{"place-items":"end","grid-template-columns":"1fr auto",".chat-header":{"grid-column-start":"1"},".chat-footer":{"grid-column-start":"1"},".chat-image":{"grid-column-start":"2"},".chat-bubble":{"grid-column-start":"1","border-end-end-radius":"0","&:before":{"inset-inline-start":"99.9%","mask-image":"url(\"data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 1 3 L 3 3 C 2 3 0 1 0 0'/%3e%3c/svg%3e\")","[dir=\"rtl\"] &":{"mask-image":"url(\"data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 3 3 L 3 0 C 3 1 1 3 0 3'/%3e%3c/svg%3e\")"}}}}};
package/components/chat.css ADDED
@@ -0,0 +1 @@
1
+ /*! 🌼 daisyUI 5.0.0-alpha.30 – MIT License */ .chat{column-gap:var(--spacing-3,.75rem);padding-top:var(--spacing-1,.25rem);padding-bottom:var(--spacing-1,.25rem);display:grid}.chat-primary{background-color:var(--color-primary, );color:var(--color-primary-content, )}.chat-secondary{background-color:var(--color-secondary, );color:var(--color-secondary-content, )}.chat-accent{background-color:var(--color-accent, );color:var(--color-accent-content, )}.chat-neutral{background-color:var(--color-neutral, );color:var(--color-neutral-content, )}.chat-info{background-color:var(--color-info, );color:var(--color-info-content, )}.chat-success{background-color:var(--color-success, );color:var(--color-success-content, )}.chat-warning{background-color:var(--color-warning, );color:var(--color-warning-content, )}.chat-error{background-color:var(--color-error, );color:var(--color-error-content, )}.chat-image{grid-row:span 2/span 2;align-self:flex-end}.chat-header{grid-row-start:1;font-size:.75rem;line-height:1rem}.chat-footer{grid-row-start:3;font-size:.75rem;line-height:1rem}.chat-bubble{border-radius:var(--radius-box, );background-color:var(--color-base-200, );padding-left:var(--spacing-4,1rem);padding-right:var(--spacing-4,1rem);padding-top:var(--spacing-2,.5rem);padding-bottom:var(--spacing-2,.5rem);color:var(--color-base-content, );width:fit-content;min-width:2.5rem;max-width:90%;min-height:2.5rem;display:block;position:relative;&:before{bottom:var(--spacing-0,0px);height:var(--spacing-3,.75rem);width:var(--spacing-3,.75rem);background-color:inherit;content:"";position:absolute;mask-position:50%;mask-size:contain;mask-repeat:no-repeat}}.chat-start{grid-template-columns:auto 1fr;place-items:start;& .chat-header,& .chat-footer{grid-column-start:2}& .chat-image{grid-column-start:1}& .chat-bubble{border-end-start-radius:0;grid-column-start:2;&:before{inset-inline-start:-.749rem;mask-image:url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 3 3 L 3 0 C 3 1 1 3 0 3'/%3e%3c/svg%3e");[dir=rtl] &{mask-image:url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 1 3 L 3 3 C 2 3 0 1 0 0'/%3e%3c/svg%3e")}}}}.chat-end{grid-template-columns:1fr auto;place-items:end;& .chat-header,& .chat-footer{grid-column-start:1}& .chat-image{grid-column-start:2}& .chat-bubble{border-end-end-radius:0;grid-column-start:1;&:before{inset-inline-start:99.9%;mask-image:url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 1 3 L 3 3 C 2 3 0 1 0 0'/%3e%3c/svg%3e");[dir=rtl] &{mask-image:url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 3 3 L 3 0 C 3 1 1 3 0 3'/%3e%3c/svg%3e")}}}}@media (width>=640px){.sm\:chat{column-gap:var(--spacing-3,.75rem);padding-top:var(--spacing-1,.25rem);padding-bottom:var(--spacing-1,.25rem);display:grid}.sm\:chat-primary{background-color:var(--color-primary, );color:var(--color-primary-content, )}.sm\:chat-secondary{background-color:var(--color-secondary, );color:var(--color-secondary-content, )}.sm\:chat-accent{background-color:var(--color-accent, );color:var(--color-accent-content, )}.sm\:chat-neutral{background-color:var(--color-neutral, );color:var(--color-neutral-content, )}.sm\:chat-info{background-color:var(--color-info, );color:var(--color-info-content, )}.sm\:chat-success{background-color:var(--color-success, );color:var(--color-success-content, )}.sm\:chat-warning{background-color:var(--color-warning, );color:var(--color-warning-content, )}.sm\:chat-error{background-color:var(--color-error, );color:var(--color-error-content, )}.sm\:chat-image{grid-row:span 2/span 2;align-self:flex-end}.sm\:chat-header{grid-row-start:1;font-size:.75rem;line-height:1rem}.sm\:chat-footer{grid-row-start:3;font-size:.75rem;line-height:1rem}.sm\:chat-bubble{border-radius:var(--radius-box, );background-color:var(--color-base-200, );padding-left:var(--spacing-4,1rem);padding-right:var(--spacing-4,1rem);padding-top:var(--spacing-2,.5rem);padding-bottom:var(--spacing-2,.5rem);color:var(--color-base-content, );width:fit-content;min-width:2.5rem;max-width:90%;min-height:2.5rem;display:block;position:relative;&:before{bottom:var(--spacing-0,0px);height:var(--spacing-3,.75rem);width:var(--spacing-3,.75rem);background-color:inherit;content:"";position:absolute;mask-position:50%;mask-size:contain;mask-repeat:no-repeat}}.sm\:chat-start{grid-template-columns:auto 1fr;place-items:start;& .chat-header,& .chat-footer{grid-column-start:2}& .chat-image{grid-column-start:1}& .chat-bubble{border-end-start-radius:0;grid-column-start:2;&:before{inset-inline-start:-.749rem;mask-image:url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 3 3 L 3 0 C 3 1 1 3 0 3'/%3e%3c/svg%3e");[dir=rtl] &{mask-image:url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 1 3 L 3 3 C 2 3 0 1 0 0'/%3e%3c/svg%3e")}}}}.sm\:chat-end{grid-template-columns:1fr auto;place-items:end;& .chat-header,& .chat-footer{grid-column-start:1}& .chat-image{grid-column-start:2}& .chat-bubble{border-end-end-radius:0;grid-column-start:1;&:before{inset-inline-start:99.9%;mask-image:url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 1 3 L 3 3 C 2 3 0 1 0 0'/%3e%3c/svg%3e");[dir=rtl] &{mask-image:url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 3 3 L 3 0 C 3 1 1 3 0 3'/%3e%3c/svg%3e")}}}}}@media (width>=768px){.md\:chat{column-gap:var(--spacing-3,.75rem);padding-top:var(--spacing-1,.25rem);padding-bottom:var(--spacing-1,.25rem);display:grid}.md\:chat-primary{background-color:var(--color-primary, );color:var(--color-primary-content, )}.md\:chat-secondary{background-color:var(--color-secondary, );color:var(--color-secondary-content, )}.md\:chat-accent{background-color:var(--color-accent, );color:var(--color-accent-content, )}.md\:chat-neutral{background-color:var(--color-neutral, );color:var(--color-neutral-content, )}.md\:chat-info{background-color:var(--color-info, );color:var(--color-info-content, )}.md\:chat-success{background-color:var(--color-success, );color:var(--color-success-content, )}.md\:chat-warning{background-color:var(--color-warning, );color:var(--color-warning-content, )}.md\:chat-error{background-color:var(--color-error, );color:var(--color-error-content, )}.md\:chat-image{grid-row:span 2/span 2;align-self:flex-end}.md\:chat-header{grid-row-start:1;font-size:.75rem;line-height:1rem}.md\:chat-footer{grid-row-start:3;font-size:.75rem;line-height:1rem}.md\:chat-bubble{border-radius:var(--radius-box, );background-color:var(--color-base-200, );padding-left:var(--spacing-4,1rem);padding-right:var(--spacing-4,1rem);padding-top:var(--spacing-2,.5rem);padding-bottom:var(--spacing-2,.5rem);color:var(--color-base-content, );width:fit-content;min-width:2.5rem;max-width:90%;min-height:2.5rem;display:block;position:relative;&:before{bottom:var(--spacing-0,0px);height:var(--spacing-3,.75rem);width:var(--spacing-3,.75rem);background-color:inherit;content:"";position:absolute;mask-position:50%;mask-size:contain;mask-repeat:no-repeat}}.md\:chat-start{grid-template-columns:auto 1fr;place-items:start;& .chat-header,& .chat-footer{grid-column-start:2}& .chat-image{grid-column-start:1}& .chat-bubble{border-end-start-radius:0;grid-column-start:2;&:before{inset-inline-start:-.749rem;mask-image:url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 3 3 L 3 0 C 3 1 1 3 0 3'/%3e%3c/svg%3e");[dir=rtl] &{mask-image:url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 1 3 L 3 3 C 2 3 0 1 0 0'/%3e%3c/svg%3e")}}}}.md\:chat-end{grid-template-columns:1fr auto;place-items:end;& .chat-header,& .chat-footer{grid-column-start:1}& .chat-image{grid-column-start:2}& .chat-bubble{border-end-end-radius:0;grid-column-start:1;&:before{inset-inline-start:99.9%;mask-image:url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 1 3 L 3 3 C 2 3 0 1 0 0'/%3e%3c/svg%3e");[dir=rtl] &{mask-image:url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 3 3 L 3 0 C 3 1 1 3 0 3'/%3e%3c/svg%3e")}}}}}@media (width>=1024px){.lg\:chat{column-gap:var(--spacing-3,.75rem);padding-top:var(--spacing-1,.25rem);padding-bottom:var(--spacing-1,.25rem);display:grid}.lg\:chat-primary{background-color:var(--color-primary, );color:var(--color-primary-content, )}.lg\:chat-secondary{background-color:var(--color-secondary, );color:var(--color-secondary-content, )}.lg\:chat-accent{background-color:var(--color-accent, );color:var(--color-accent-content, )}.lg\:chat-neutral{background-color:var(--color-neutral, );color:var(--color-neutral-content, )}.lg\:chat-info{background-color:var(--color-info, );color:var(--color-info-content, )}.lg\:chat-success{background-color:var(--color-success, );color:var(--color-success-content, )}.lg\:chat-warning{background-color:var(--color-warning, );color:var(--color-warning-content, )}.lg\:chat-error{background-color:var(--color-error, );color:var(--color-error-content, )}.lg\:chat-image{grid-row:span 2/span 2;align-self:flex-end}.lg\:chat-header{grid-row-start:1;font-size:.75rem;line-height:1rem}.lg\:chat-footer{grid-row-start:3;font-size:.75rem;line-height:1rem}.lg\:chat-bubble{border-radius:var(--radius-box, );background-color:var(--color-base-200, );padding-left:var(--spacing-4,1rem);padding-right:var(--spacing-4,1rem);padding-top:var(--spacing-2,.5rem);padding-bottom:var(--spacing-2,.5rem);color:var(--color-base-content, );width:fit-content;min-width:2.5rem;max-width:90%;min-height:2.5rem;display:block;position:relative;&:before{bottom:var(--spacing-0,0px);height:var(--spacing-3,.75rem);width:var(--spacing-3,.75rem);background-color:inherit;content:"";position:absolute;mask-position:50%;mask-size:contain;mask-repeat:no-repeat}}.lg\:chat-start{grid-template-columns:auto 1fr;place-items:start;& .chat-header,& .chat-footer{grid-column-start:2}& .chat-image{grid-column-start:1}& .chat-bubble{border-end-start-radius:0;grid-column-start:2;&:before{inset-inline-start:-.749rem;mask-image:url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 3 3 L 3 0 C 3 1 1 3 0 3'/%3e%3c/svg%3e");[dir=rtl] &{mask-image:url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 1 3 L 3 3 C 2 3 0 1 0 0'/%3e%3c/svg%3e")}}}}.lg\:chat-end{grid-template-columns:1fr auto;place-items:end;& .chat-header,& .chat-footer{grid-column-start:1}& .chat-image{grid-column-start:2}& .chat-bubble{border-end-end-radius:0;grid-column-start:1;&:before{inset-inline-start:99.9%;mask-image:url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 1 3 L 3 3 C 2 3 0 1 0 0'/%3e%3c/svg%3e");[dir=rtl] &{mask-image:url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 3 3 L 3 0 C 3 1 1 3 0 3'/%3e%3c/svg%3e")}}}}}@media (width>=1280px){.xl\:chat{column-gap:var(--spacing-3,.75rem);padding-top:var(--spacing-1,.25rem);padding-bottom:var(--spacing-1,.25rem);display:grid}.xl\:chat-primary{background-color:var(--color-primary, );color:var(--color-primary-content, )}.xl\:chat-secondary{background-color:var(--color-secondary, );color:var(--color-secondary-content, )}.xl\:chat-accent{background-color:var(--color-accent, );color:var(--color-accent-content, )}.xl\:chat-neutral{background-color:var(--color-neutral, );color:var(--color-neutral-content, )}.xl\:chat-info{background-color:var(--color-info, );color:var(--color-info-content, )}.xl\:chat-success{background-color:var(--color-success, );color:var(--color-success-content, )}.xl\:chat-warning{background-color:var(--color-warning, );color:var(--color-warning-content, )}.xl\:chat-error{background-color:var(--color-error, );color:var(--color-error-content, )}.xl\:chat-image{grid-row:span 2/span 2;align-self:flex-end}.xl\:chat-header{grid-row-start:1;font-size:.75rem;line-height:1rem}.xl\:chat-footer{grid-row-start:3;font-size:.75rem;line-height:1rem}.xl\:chat-bubble{border-radius:var(--radius-box, );background-color:var(--color-base-200, );padding-left:var(--spacing-4,1rem);padding-right:var(--spacing-4,1rem);padding-top:var(--spacing-2,.5rem);padding-bottom:var(--spacing-2,.5rem);color:var(--color-base-content, );width:fit-content;min-width:2.5rem;max-width:90%;min-height:2.5rem;display:block;position:relative;&:before{bottom:var(--spacing-0,0px);height:var(--spacing-3,.75rem);width:var(--spacing-3,.75rem);background-color:inherit;content:"";position:absolute;mask-position:50%;mask-size:contain;mask-repeat:no-repeat}}.xl\:chat-start{grid-template-columns:auto 1fr;place-items:start;& .chat-header,& .chat-footer{grid-column-start:2}& .chat-image{grid-column-start:1}& .chat-bubble{border-end-start-radius:0;grid-column-start:2;&:before{inset-inline-start:-.749rem;mask-image:url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 3 3 L 3 0 C 3 1 1 3 0 3'/%3e%3c/svg%3e");[dir=rtl] &{mask-image:url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 1 3 L 3 3 C 2 3 0 1 0 0'/%3e%3c/svg%3e")}}}}.xl\:chat-end{grid-template-columns:1fr auto;place-items:end;& .chat-header,& .chat-footer{grid-column-start:1}& .chat-image{grid-column-start:2}& .chat-bubble{border-end-end-radius:0;grid-column-start:1;&:before{inset-inline-start:99.9%;mask-image:url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 1 3 L 3 3 C 2 3 0 1 0 0'/%3e%3c/svg%3e");[dir=rtl] &{mask-image:url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 3 3 L 3 0 C 3 1 1 3 0 3'/%3e%3c/svg%3e")}}}}}@media (width>=1536px){.\32 xl\:chat{column-gap:var(--spacing-3,.75rem);padding-top:var(--spacing-1,.25rem);padding-bottom:var(--spacing-1,.25rem);display:grid}.\32 xl\:chat-primary{background-color:var(--color-primary, );color:var(--color-primary-content, )}.\32 xl\:chat-secondary{background-color:var(--color-secondary, );color:var(--color-secondary-content, )}.\32 xl\:chat-accent{background-color:var(--color-accent, );color:var(--color-accent-content, )}.\32 xl\:chat-neutral{background-color:var(--color-neutral, );color:var(--color-neutral-content, )}.\32 xl\:chat-info{background-color:var(--color-info, );color:var(--color-info-content, )}.\32 xl\:chat-success{background-color:var(--color-success, );color:var(--color-success-content, )}.\32 xl\:chat-warning{background-color:var(--color-warning, );color:var(--color-warning-content, )}.\32 xl\:chat-error{background-color:var(--color-error, );color:var(--color-error-content, )}.\32 xl\:chat-image{grid-row:span 2/span 2;align-self:flex-end}.\32 xl\:chat-header{grid-row-start:1;font-size:.75rem;line-height:1rem}.\32 xl\:chat-footer{grid-row-start:3;font-size:.75rem;line-height:1rem}.\32 xl\:chat-bubble{border-radius:var(--radius-box, );background-color:var(--color-base-200, );padding-left:var(--spacing-4,1rem);padding-right:var(--spacing-4,1rem);padding-top:var(--spacing-2,.5rem);padding-bottom:var(--spacing-2,.5rem);color:var(--color-base-content, );width:fit-content;min-width:2.5rem;max-width:90%;min-height:2.5rem;display:block;position:relative;&:before{bottom:var(--spacing-0,0px);height:var(--spacing-3,.75rem);width:var(--spacing-3,.75rem);background-color:inherit;content:"";position:absolute;mask-position:50%;mask-size:contain;mask-repeat:no-repeat}}.\32 xl\:chat-start{grid-template-columns:auto 1fr;place-items:start;& .chat-header,& .chat-footer{grid-column-start:2}& .chat-image{grid-column-start:1}& .chat-bubble{border-end-start-radius:0;grid-column-start:2;&:before{inset-inline-start:-.749rem;mask-image:url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 3 3 L 3 0 C 3 1 1 3 0 3'/%3e%3c/svg%3e");[dir=rtl] &{mask-image:url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 1 3 L 3 3 C 2 3 0 1 0 0'/%3e%3c/svg%3e")}}}}.\32 xl\:chat-end{grid-template-columns:1fr auto;place-items:end;& .chat-header,& .chat-footer{grid-column-start:1}& .chat-image{grid-column-start:2}& .chat-bubble{border-end-end-radius:0;grid-column-start:1;&:before{inset-inline-start:99.9%;mask-image:url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 1 3 L 3 3 C 2 3 0 1 0 0'/%3e%3c/svg%3e");[dir=rtl] &{mask-image:url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 3 3 L 3 0 C 3 1 1 3 0 3'/%3e%3c/svg%3e")}}}}}
package/components/checkbox/index.js CHANGED
@@ -1,108 +1,4 @@
1
- export default {
2
- ".checkbox": {
3
- "@apply border-base-content/20 text-base-content relative shrink-0 size-6 cursor-pointer appearance-none rounded-[var(--radius-btn)] border p-1 align-middle": {},
4
- "boxShadow": "0 1px oklch(0% 0 0 / 0.1) inset",
5
- "transition": "background-color 0.2s,\n box-shadow 0.2s",
6
- "&:before": {
7
- "@apply block size-full rotate-45 bg-current opacity-0 content-['']": {},
8
- "transition": "clip-path 0.3s,\n opacity 0.1s,\n rotate 0.3s,\n translate 0.3s",
9
- "transitionDelay": "0.1s",
10
- "clipPath": "polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 70% 80%, 70% 100%)",
11
- "boxShadow": "0px 3px 0 0px oklch(100% 0 0 / 0.1) inset"
12
- },
13
- "&:focus-visible": {
14
- "@apply outline-2 outline-offset-2 outline-current": {}
15
- },
16
- "&:checked,\n &[aria-checked=\"true\"]": {
17
- "boxShadow": "0 8px 0 -4px oklch(100% 0 0 / 0.1) inset,\n 0 1px oklch(0% 0 0 / 0.1)",
18
- "&:before": {
19
- "@apply opacity-100": {},
20
- "clipPath": "polygon(20% 100%, 20% 80%, 50% 80%, 50% 0%, 70% 0%, 70% 100%)"
21
- }
22
- },
23
- "&:indeterminate": {
24
- "&:before": {
25
- "@apply translate-y-[-35%] rotate-0 opacity-100": {},
26
- "clipPath": "polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 80% 80%, 80% 100%)"
27
- }
28
- }
29
- },
30
- ".checkbox-primary": {
31
- "@apply border-primary text-primary-content": {},
32
- "&:focus-visible": {
33
- "@apply outline-primary": {}
34
- },
35
- "&:checked": {
36
- "@apply bg-primary": {}
37
- }
38
- },
39
- ".checkbox-secondary": {
40
- "@apply border-secondary text-secondary-content": {},
41
- "&:focus-visible": {
42
- "@apply outline-secondary": {}
43
- },
44
- "&:checked": {
45
- "@apply bg-secondary": {}
46
- }
47
- },
48
- ".checkbox-accent": {
49
- "@apply border-accent text-accent-content": {},
50
- "&:focus-visible": {
51
- "@apply outline-accent": {}
52
- },
53
- "&:checked": {
54
- "@apply bg-accent": {}
55
- }
56
- },
57
- ".checkbox-success": {
58
- "@apply border-success text-success-content": {},
59
- "&:focus-visible": {
60
- "@apply outline-success": {}
61
- },
62
- "&:checked": {
63
- "@apply bg-success": {}
64
- }
65
- },
66
- ".checkbox-warning": {
67
- "@apply border-warning text-warning-content": {},
68
- "&:focus-visible": {
69
- "@apply outline-warning": {}
70
- },
71
- "&:checked": {
72
- "@apply bg-warning": {}
73
- }
74
- },
75
- ".checkbox-info": {
76
- "@apply border-info text-info-content": {},
77
- "&:focus-visible": {
78
- "@apply outline-info": {}
79
- },
80
- "&:checked": {
81
- "@apply bg-info": {}
82
- }
83
- },
84
- ".checkbox-error": {
85
- "@apply border-error text-error-content": {},
86
- "&:focus-visible": {
87
- "@apply outline-error": {}
88
- },
89
- "&:checked": {
90
- "@apply bg-error": {}
91
- }
92
- },
93
- ".checkbox:disabled": {
94
- "@apply cursor-not-allowed opacity-20": {}
95
- },
96
- ".checkbox-xs": {
97
- "@apply size-4 p-0.5": {}
98
- },
99
- ".checkbox-sm": {
100
- "@apply size-5": {}
101
- },
102
- ".checkbox-md": {
103
- "@apply size-6": {}
104
- },
105
- ".checkbox-lg": {
106
- "@apply size-8": {}
107
- }
108
- };
1
+ import checkbox from './object.js';
2
+ export default ({ addComponents }) => {
3
+ addComponents({...checkbox})
4
+ }
package/components/checkbox/object.js ADDED
@@ -0,0 +1 @@
1
+ export default {".checkbox":{"border":"1px solid","position":"relative","width":"var(--spacing-6, 1.5rem)","height":"var(--spacing-6, 1.5rem)","flex-shrink":0,"cursor":"pointer","appearance":"none","border-radius":"var(--radius-btn, )","border-color":"color-mix(in oklch, var(--color-base-content, ) 20%, transparent)","padding":"var(--spacing-1, 0.25rem)","vertical-align":"middle","color":"var(--color-base-content, )","box-shadow":"0 1px oklch(0% 0 0 / 0.1) inset","transition":"background-color 0.2s, box-shadow 0.2s","&:before":{"display":"block","width":"100%","height":"100%","rotate":"45deg","background-color":"currentColor","opacity":"0%","content":"\"\"","transition":"clip-path 0.3s, opacity 0.1s, rotate 0.3s, translate 0.3s","transition-delay":"0.1s","clip-path":"polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 70% 80%, 70% 100%)","box-shadow":"0px 3px 0 0px oklch(100% 0 0 / 0.1) inset"},"&:focus-visible":{"outline":"2px solid currentColor","outline-offset":"2px"},"&:checked, &[aria-checked=\"true\"]":{"box-shadow":"0 8px 0 -4px oklch(100% 0 0 / 0.1) inset, 0 1px oklch(0% 0 0 / 0.1)","&:before":{"opacity":"100%","clip-path":"polygon(20% 100%, 20% 80%, 50% 80%, 50% 0%, 70% 0%, 70% 100%)"}},"&:indeterminate":{"&:before":{"rotate":"0deg","opacity":"100%","translate":"0 -35%","clip-path":"polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 80% 80%, 80% 100%)"}}},".checkbox-primary":{"border-color":"var(--color-primary, )","color":"var(--color-primary-content, )","&:focus-visible":{"outline-color":"var(--color-primary, )"},"&:checked":{"background-color":"var(--color-primary, )"}},".checkbox-secondary":{"border-color":"var(--color-secondary, )","color":"var(--color-secondary-content, )","&:focus-visible":{"outline-color":"var(--color-secondary, )"},"&:checked":{"background-color":"var(--color-secondary, )"}},".checkbox-accent":{"border-color":"var(--color-accent, )","color":"var(--color-accent-content, )","&:focus-visible":{"outline-color":"var(--color-accent, )"},"&:checked":{"background-color":"var(--color-accent, )"}},".checkbox-success":{"border-color":"var(--color-success, )","color":"var(--color-success-content, )","&:focus-visible":{"outline-color":"var(--color-success, )"},"&:checked":{"background-color":"var(--color-success, )"}},".checkbox-warning":{"border-color":"var(--color-warning, )","color":"var(--color-warning-content, )","&:focus-visible":{"outline-color":"var(--color-warning, )"},"&:checked":{"background-color":"var(--color-warning, )"}},".checkbox-info":{"border-color":"var(--color-info, )","color":"var(--color-info-content, )","&:focus-visible":{"outline-color":"var(--color-info, )"},"&:checked":{"background-color":"var(--color-info, )"}},".checkbox-error":{"border-color":"var(--color-error, )","color":"var(--color-error-content, )","&:focus-visible":{"outline-color":"var(--color-error, )"},"&:checked":{"background-color":"var(--color-error, )"}},".checkbox:disabled":{"cursor":"not-allowed","opacity":"20%"},".checkbox-xs":{"width":"var(--spacing-4, 1rem)","height":"var(--spacing-4, 1rem)","padding":"var(--spacing-0_5, 0.125rem)"},".checkbox-sm":{"width":"var(--spacing-5, 1.25rem)","height":"var(--spacing-5, 1.25rem)"},".checkbox-md":{"width":"var(--spacing-6, 1.5rem)","height":"var(--spacing-6, 1.5rem)"},".checkbox-lg":{"width":"var(--spacing-8, 2rem)","height":"var(--spacing-8, 2rem)"}};