jasmincss 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (76) hide show
  1. package/README.md +524 -0
  2. package/bin/jasmin.js +45 -0
  3. package/dist/index.d.ts +62 -0
  4. package/dist/index.js +14568 -0
  5. package/dist/index.mjs +14524 -0
  6. package/dist/jasmin.css +63308 -0
  7. package/dist/jasmin.min.css +1 -0
  8. package/dist/plugins/nextjs.js +14777 -0
  9. package/dist/plugins/nextjs.mjs +14747 -0
  10. package/dist/plugins/vite.js +14889 -0
  11. package/dist/plugins/vite.mjs +14860 -0
  12. package/package.json +101 -0
  13. package/src/cli/add.js +83 -0
  14. package/src/cli/init.js +210 -0
  15. package/src/cli/run.js +142 -0
  16. package/src/components/accordion.js +309 -0
  17. package/src/components/alerts.js +357 -0
  18. package/src/components/avatars.js +331 -0
  19. package/src/components/badges.js +353 -0
  20. package/src/components/buttons.js +412 -0
  21. package/src/components/cards.js +342 -0
  22. package/src/components/carousel.js +495 -0
  23. package/src/components/chips.js +440 -0
  24. package/src/components/command-palette.js +434 -0
  25. package/src/components/datepicker.js +517 -0
  26. package/src/components/dropdown.js +411 -0
  27. package/src/components/forms.js +516 -0
  28. package/src/components/index.js +81 -0
  29. package/src/components/modals.js +349 -0
  30. package/src/components/navigation.js +463 -0
  31. package/src/components/offcanvas.js +390 -0
  32. package/src/components/popover.js +427 -0
  33. package/src/components/progress.js +396 -0
  34. package/src/components/rating.js +394 -0
  35. package/src/components/skeleton.js +408 -0
  36. package/src/components/spinner.js +453 -0
  37. package/src/components/stepper.js +389 -0
  38. package/src/components/tables.js +304 -0
  39. package/src/components/timeline.js +452 -0
  40. package/src/components/timepicker.js +529 -0
  41. package/src/components/tooltips.js +345 -0
  42. package/src/components/upload.js +490 -0
  43. package/src/config/defaults.js +263 -0
  44. package/src/config/loader.js +109 -0
  45. package/src/core/base.js +241 -0
  46. package/src/core/compiler.js +135 -0
  47. package/src/core/utilities/accessibility.js +290 -0
  48. package/src/core/utilities/animations.js +205 -0
  49. package/src/core/utilities/background.js +109 -0
  50. package/src/core/utilities/colors.js +234 -0
  51. package/src/core/utilities/columns.js +161 -0
  52. package/src/core/utilities/effects.js +261 -0
  53. package/src/core/utilities/filters.js +135 -0
  54. package/src/core/utilities/icons.js +806 -0
  55. package/src/core/utilities/index.js +239 -0
  56. package/src/core/utilities/layout.js +321 -0
  57. package/src/core/utilities/scroll.js +205 -0
  58. package/src/core/utilities/spacing.js +120 -0
  59. package/src/core/utilities/svg.js +191 -0
  60. package/src/core/utilities/transforms.js +116 -0
  61. package/src/core/utilities/typography.js +188 -0
  62. package/src/index.js +7 -0
  63. package/src/js/components/accordion.js +154 -0
  64. package/src/js/components/alert.js +198 -0
  65. package/src/js/components/carousel.js +226 -0
  66. package/src/js/components/dropdown.js +166 -0
  67. package/src/js/components/modal.js +169 -0
  68. package/src/js/components/offcanvas.js +175 -0
  69. package/src/js/components/popover.js +221 -0
  70. package/src/js/components/tabs.js +163 -0
  71. package/src/js/components/tooltip.js +200 -0
  72. package/src/js/index.js +79 -0
  73. package/src/js/types/config.d.ts +228 -0
  74. package/src/js/types/index.d.ts +439 -0
  75. package/src/plugins/nextjs.js +100 -0
  76. package/src/plugins/vite.js +133 -0
package/src/components/tooltips.js ADDED
@@ -0,0 +1,345 @@
1
+ export function generateTooltipStyles(config) {
2
+ return `/* Tooltip Base */
3
+ .tooltip {
4
+ position: relative;
5
+ display: inline-block;
6
+ }
7
+
8
+ .tooltip-content {
9
+ position: absolute;
10
+ z-index: var(--j-z-tooltip, 1070);
11
+ padding: 0.375rem 0.75rem;
12
+ font-size: 0.8125rem;
13
+ line-height: 1.4;
14
+ color: white;
15
+ background-color: var(--j-gray-900, #18181b);
16
+ border-radius: var(--j-radius-default, 0.5rem);
17
+ white-space: nowrap;
18
+ pointer-events: none;
19
+ opacity: 0;
20
+ visibility: hidden;
21
+ transition: opacity 150ms ease-in-out, visibility 150ms ease-in-out;
22
+ }
23
+
24
+ .tooltip:hover .tooltip-content,
25
+ .tooltip:focus .tooltip-content,
26
+ .tooltip.show .tooltip-content {
27
+ opacity: 1;
28
+ visibility: visible;
29
+ }
30
+
31
+ /* Tooltip Arrow */
32
+ .tooltip-content::after {
33
+ content: "";
34
+ position: absolute;
35
+ border: 5px solid transparent;
36
+ }
37
+
38
+ /* Tooltip Positions */
39
+ .tooltip-top .tooltip-content {
40
+ bottom: 100%;
41
+ left: 50%;
42
+ transform: translateX(-50%);
43
+ margin-bottom: 0.5rem;
44
+ }
45
+
46
+ .tooltip-top .tooltip-content::after {
47
+ top: 100%;
48
+ left: 50%;
49
+ transform: translateX(-50%);
50
+ border-top-color: var(--j-gray-900, #18181b);
51
+ }
52
+
53
+ .tooltip-bottom .tooltip-content {
54
+ top: 100%;
55
+ left: 50%;
56
+ transform: translateX(-50%);
57
+ margin-top: 0.5rem;
58
+ }
59
+
60
+ .tooltip-bottom .tooltip-content::after {
61
+ bottom: 100%;
62
+ left: 50%;
63
+ transform: translateX(-50%);
64
+ border-bottom-color: var(--j-gray-900, #18181b);
65
+ }
66
+
67
+ .tooltip-left .tooltip-content {
68
+ top: 50%;
69
+ right: 100%;
70
+ transform: translateY(-50%);
71
+ margin-right: 0.5rem;
72
+ }
73
+
74
+ .tooltip-left .tooltip-content::after {
75
+ top: 50%;
76
+ left: 100%;
77
+ transform: translateY(-50%);
78
+ border-left-color: var(--j-gray-900, #18181b);
79
+ }
80
+
81
+ .tooltip-right .tooltip-content {
82
+ top: 50%;
83
+ left: 100%;
84
+ transform: translateY(-50%);
85
+ margin-left: 0.5rem;
86
+ }
87
+
88
+ .tooltip-right .tooltip-content::after {
89
+ top: 50%;
90
+ right: 100%;
91
+ transform: translateY(-50%);
92
+ border-right-color: var(--j-gray-900, #18181b);
93
+ }
94
+
95
+ /* Tooltip Variants */
96
+ .tooltip-light .tooltip-content {
97
+ color: var(--j-text);
98
+ background-color: var(--j-bg);
99
+ border: 1px solid var(--j-border);
100
+ box-shadow: var(--j-shadow-lg);
101
+ }
102
+
103
+ .tooltip-light.tooltip-top .tooltip-content::after {
104
+ border-top-color: var(--j-bg);
105
+ }
106
+
107
+ .tooltip-light.tooltip-bottom .tooltip-content::after {
108
+ border-bottom-color: var(--j-bg);
109
+ }
110
+
111
+ .tooltip-light.tooltip-left .tooltip-content::after {
112
+ border-left-color: var(--j-bg);
113
+ }
114
+
115
+ .tooltip-light.tooltip-right .tooltip-content::after {
116
+ border-right-color: var(--j-bg);
117
+ }
118
+
119
+ /* Tooltip Colors */
120
+ .tooltip-primary .tooltip-content {
121
+ background-color: var(--j-primary);
122
+ }
123
+
124
+ .tooltip-primary.tooltip-top .tooltip-content::after {
125
+ border-top-color: var(--j-primary);
126
+ }
127
+
128
+ .tooltip-primary.tooltip-bottom .tooltip-content::after {
129
+ border-bottom-color: var(--j-primary);
130
+ }
131
+
132
+ .tooltip-secondary .tooltip-content {
133
+ background-color: var(--j-secondary);
134
+ }
135
+
136
+ .tooltip-success .tooltip-content {
137
+ background-color: var(--j-success);
138
+ }
139
+
140
+ .tooltip-error .tooltip-content {
141
+ background-color: var(--j-error);
142
+ }
143
+
144
+ /* Tooltip Sizes */
145
+ .tooltip-sm .tooltip-content {
146
+ padding: 0.25rem 0.5rem;
147
+ font-size: 0.75rem;
148
+ }
149
+
150
+ .tooltip-lg .tooltip-content {
151
+ padding: 0.5rem 1rem;
152
+ font-size: 0.875rem;
153
+ }
154
+
155
+ /* Multiline Tooltip */
156
+ .tooltip-multiline .tooltip-content {
157
+ white-space: normal;
158
+ width: max-content;
159
+ max-width: 250px;
160
+ text-align: center;
161
+ }
162
+
163
+ /* Popover */
164
+ .popover {
165
+ position: relative;
166
+ display: inline-block;
167
+ }
168
+
169
+ .popover-content {
170
+ position: absolute;
171
+ z-index: var(--j-z-popover, 1060);
172
+ min-width: 200px;
173
+ max-width: 300px;
174
+ background-color: var(--j-bg);
175
+ border: 1px solid var(--j-border);
176
+ border-radius: var(--j-radius-lg, 0.75rem);
177
+ box-shadow: var(--j-shadow-lg);
178
+ opacity: 0;
179
+ visibility: hidden;
180
+ transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out;
181
+ }
182
+
183
+ .popover:hover .popover-content,
184
+ .popover.show .popover-content {
185
+ opacity: 1;
186
+ visibility: visible;
187
+ }
188
+
189
+ .popover-header {
190
+ padding: 0.75rem 1rem;
191
+ font-weight: 600;
192
+ border-bottom: 1px solid var(--j-border);
193
+ }
194
+
195
+ .popover-body {
196
+ padding: 0.75rem 1rem;
197
+ font-size: 0.875rem;
198
+ color: var(--j-text-subtle);
199
+ }
200
+
201
+ /* Popover Positions */
202
+ .popover-top .popover-content {
203
+ bottom: 100%;
204
+ left: 50%;
205
+ transform: translateX(-50%);
206
+ margin-bottom: 0.75rem;
207
+ }
208
+
209
+ .popover-bottom .popover-content {
210
+ top: 100%;
211
+ left: 50%;
212
+ transform: translateX(-50%);
213
+ margin-top: 0.75rem;
214
+ }
215
+
216
+ .popover-left .popover-content {
217
+ top: 50%;
218
+ right: 100%;
219
+ transform: translateY(-50%);
220
+ margin-right: 0.75rem;
221
+ }
222
+
223
+ .popover-right .popover-content {
224
+ top: 50%;
225
+ left: 100%;
226
+ transform: translateY(-50%);
227
+ margin-left: 0.75rem;
228
+ }
229
+
230
+ /* Dropdown */
231
+ .dropdown {
232
+ position: relative;
233
+ display: inline-block;
234
+ }
235
+
236
+ .dropdown-toggle {
237
+ cursor: pointer;
238
+ }
239
+
240
+ .dropdown-menu {
241
+ position: absolute;
242
+ top: 100%;
243
+ left: 0;
244
+ z-index: var(--j-z-dropdown, 1000);
245
+ min-width: 10rem;
246
+ padding: 0.5rem 0;
247
+ margin-top: 0.25rem;
248
+ background-color: var(--j-bg);
249
+ border: 1px solid var(--j-border);
250
+ border-radius: var(--j-radius-lg, 0.75rem);
251
+ box-shadow: var(--j-shadow-lg);
252
+ opacity: 0;
253
+ visibility: hidden;
254
+ transform: translateY(-10px);
255
+ transition: opacity 150ms ease-in-out, visibility 150ms ease-in-out, transform 150ms ease-in-out;
256
+ }
257
+
258
+ .dropdown.show .dropdown-menu,
259
+ .dropdown:focus-within .dropdown-menu {
260
+ opacity: 1;
261
+ visibility: visible;
262
+ transform: translateY(0);
263
+ }
264
+
265
+ .dropdown-menu-right {
266
+ left: auto;
267
+ right: 0;
268
+ }
269
+
270
+ .dropdown-item {
271
+ display: flex;
272
+ align-items: center;
273
+ gap: 0.75rem;
274
+ width: 100%;
275
+ padding: 0.5rem 1rem;
276
+ font-size: 0.875rem;
277
+ color: var(--j-text);
278
+ text-decoration: none;
279
+ background: transparent;
280
+ border: none;
281
+ cursor: pointer;
282
+ transition: background-color 150ms ease-in-out;
283
+ }
284
+
285
+ .dropdown-item:hover {
286
+ background-color: var(--j-bg-subtle);
287
+ }
288
+
289
+ .dropdown-item:focus {
290
+ background-color: var(--j-bg-subtle);
291
+ outline: none;
292
+ }
293
+
294
+ .dropdown-item.active {
295
+ background-color: color-mix(in srgb, var(--j-primary) 10%, transparent);
296
+ color: var(--j-primary);
297
+ }
298
+
299
+ .dropdown-item:disabled,
300
+ .dropdown-item.disabled {
301
+ color: var(--j-text-muted);
302
+ pointer-events: none;
303
+ }
304
+
305
+ .dropdown-item-icon {
306
+ width: 1rem;
307
+ height: 1rem;
308
+ opacity: 0.7;
309
+ }
310
+
311
+ .dropdown-divider {
312
+ height: 0;
313
+ margin: 0.5rem 0;
314
+ border-top: 1px solid var(--j-border);
315
+ }
316
+
317
+ .dropdown-header {
318
+ padding: 0.5rem 1rem;
319
+ font-size: 0.75rem;
320
+ font-weight: 600;
321
+ color: var(--j-text-muted);
322
+ text-transform: uppercase;
323
+ letter-spacing: 0.05em;
324
+ }
325
+
326
+ /* Dropdown with Arrow */
327
+ .dropdown-menu-arrow::before {
328
+ content: "";
329
+ position: absolute;
330
+ top: -6px;
331
+ left: 1rem;
332
+ width: 12px;
333
+ height: 12px;
334
+ background-color: var(--j-bg);
335
+ border-left: 1px solid var(--j-border);
336
+ border-top: 1px solid var(--j-border);
337
+ transform: rotate(45deg);
338
+ }
339
+
340
+ .dropdown-menu-right.dropdown-menu-arrow::before {
341
+ left: auto;
342
+ right: 1rem;
343
+ }
344
+ `;
345
+ }