@tunjiadeyemi/ui 1.0.0 → 1.0.1

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 (2) hide show
  1. package/dist/styles.css +496 -1
  2. package/package.json +16 -6
package/dist/styles.css CHANGED
@@ -1 +1,496 @@
1
- @import "tailwindcss";
1
+ /*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
2
+ @layer properties;
3
+ @layer theme, base, components, utilities;
4
+ @layer theme {
5
+ :root, :host {
6
+ --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
7
+ "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
8
+ --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
9
+ "Liberation Mono", "Courier New", monospace;
10
+ --color-gray-400: oklch(0.707 0.022 261.325);
11
+ --color-black: #000;
12
+ --color-white: #fff;
13
+ --spacing: 0.25rem;
14
+ --container-md: 28rem;
15
+ --text-sm: 0.875rem;
16
+ --text-sm--line-height: calc(1.25 / 0.875);
17
+ --text-2xl: 1.5rem;
18
+ --text-2xl--line-height: calc(2 / 1.5);
19
+ --font-weight-medium: 500;
20
+ --font-weight-bold: 700;
21
+ --radius-lg: 0.5rem;
22
+ --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
23
+ --default-transition-duration: 150ms;
24
+ --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
25
+ --default-font-family: var(--font-sans);
26
+ --default-font-feature-settings: var(--font-sans--font-feature-settings);
27
+ --default-font-variation-settings: var(
28
+ --font-sans--font-variation-settings
29
+ );
30
+ --default-mono-font-family: var(--font-mono);
31
+ --default-mono-font-feature-settings: var(
32
+ --font-mono--font-feature-settings
33
+ );
34
+ --default-mono-font-variation-settings: var(
35
+ --font-mono--font-variation-settings
36
+ );
37
+ }
38
+ }
39
+ @layer base {
40
+ *, ::after, ::before, ::backdrop, ::file-selector-button {
41
+ box-sizing: border-box;
42
+ margin: 0;
43
+ padding: 0;
44
+ border: 0 solid;
45
+ }
46
+ html, :host {
47
+ line-height: 1.5;
48
+ -webkit-text-size-adjust: 100%;
49
+ -moz-tab-size: 4;
50
+ -o-tab-size: 4;
51
+ tab-size: 4;
52
+ font-family: var( --default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" );
53
+ font-feature-settings: var(--default-font-feature-settings, normal);
54
+ font-variation-settings: var( --default-font-variation-settings, normal );
55
+ -webkit-tap-highlight-color: transparent;
56
+ }
57
+ body {
58
+ line-height: inherit;
59
+ }
60
+ hr {
61
+ height: 0;
62
+ color: inherit;
63
+ border-top-width: 1px;
64
+ }
65
+ abbr:where([title]) {
66
+ -webkit-text-decoration: underline dotted;
67
+ text-decoration: underline dotted;
68
+ }
69
+ h1, h2, h3, h4, h5, h6 {
70
+ font-size: inherit;
71
+ font-weight: inherit;
72
+ }
73
+ a {
74
+ color: inherit;
75
+ -webkit-text-decoration: inherit;
76
+ text-decoration: inherit;
77
+ }
78
+ b, strong {
79
+ font-weight: bolder;
80
+ }
81
+ code, kbd, samp, pre {
82
+ font-family: var( --default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace );
83
+ font-feature-settings: var( --default-mono-font-feature-settings, normal );
84
+ font-variation-settings: var( --default-mono-font-variation-settings, normal );
85
+ font-size: 1em;
86
+ }
87
+ small {
88
+ font-size: 80%;
89
+ }
90
+ sub, sup {
91
+ font-size: 75%;
92
+ line-height: 0;
93
+ position: relative;
94
+ vertical-align: baseline;
95
+ }
96
+ sub {
97
+ bottom: -0.25em;
98
+ }
99
+ sup {
100
+ top: -0.5em;
101
+ }
102
+ table {
103
+ text-indent: 0;
104
+ border-color: inherit;
105
+ border-collapse: collapse;
106
+ }
107
+ :-moz-focusring {
108
+ outline: auto;
109
+ }
110
+ progress {
111
+ vertical-align: baseline;
112
+ }
113
+ summary {
114
+ display: list-item;
115
+ }
116
+ ol, ul, menu {
117
+ list-style: none;
118
+ }
119
+ img, svg, video, canvas, audio, iframe, embed, object {
120
+ display: block;
121
+ vertical-align: middle;
122
+ }
123
+ img, video {
124
+ max-width: 100%;
125
+ height: auto;
126
+ }
127
+ button, input, select, optgroup, textarea, ::file-selector-button {
128
+ font: inherit;
129
+ font-feature-settings: inherit;
130
+ font-variation-settings: inherit;
131
+ letter-spacing: inherit;
132
+ color: inherit;
133
+ border-radius: 0;
134
+ background-color: transparent;
135
+ opacity: 1;
136
+ }
137
+ :where(select:is([multiple], [size])) optgroup {
138
+ font-weight: bolder;
139
+ }
140
+ :where(select:is([multiple], [size])) optgroup option {
141
+ padding-inline-start: 20px;
142
+ }
143
+ ::file-selector-button {
144
+ margin-inline-end: 4px;
145
+ }
146
+ ::-moz-placeholder {
147
+ opacity: 1;
148
+ color: currentColor;
149
+ @supports (color: color-mix(in lab, red, red)) {
150
+ color: color-mix(in oklab, currentColor 50%, transparent);
151
+ }
152
+ }
153
+ ::placeholder {
154
+ opacity: 1;
155
+ color: currentColor;
156
+ @supports (color: color-mix(in lab, red, red)) {
157
+ color: color-mix(in oklab, currentColor 50%, transparent);
158
+ }
159
+ }
160
+ textarea {
161
+ resize: vertical;
162
+ }
163
+ ::-webkit-search-decoration {
164
+ -webkit-appearance: none;
165
+ }
166
+ ::-webkit-date-and-time-value {
167
+ min-height: 1lh;
168
+ text-align: inherit;
169
+ }
170
+ ::-webkit-datetime-edit {
171
+ display: inline-flex;
172
+ }
173
+ ::-webkit-datetime-edit-fields-wrapper {
174
+ padding: 0;
175
+ }
176
+ ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
177
+ padding-block: 0;
178
+ }
179
+ :-moz-ui-invalid {
180
+ box-shadow: none;
181
+ }
182
+ button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
183
+ -webkit-appearance: button;
184
+ -moz-appearance: button;
185
+ appearance: button;
186
+ }
187
+ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
188
+ height: auto;
189
+ }
190
+ [hidden]:where(:not([hidden="until-found"])) {
191
+ display: none !important;
192
+ }
193
+ }
194
+ @layer utilities {
195
+ .absolute {
196
+ position: absolute;
197
+ }
198
+ .fixed {
199
+ position: fixed;
200
+ }
201
+ .relative {
202
+ position: relative;
203
+ }
204
+ .inset-0 {
205
+ inset: calc(var(--spacing) * 0);
206
+ }
207
+ .top-1\/2 {
208
+ top: calc(1/2 * 100%);
209
+ }
210
+ .right-4 {
211
+ right: calc(var(--spacing) * 4);
212
+ }
213
+ .z-50 {
214
+ z-index: 50;
215
+ }
216
+ .mb-4 {
217
+ margin-bottom: calc(var(--spacing) * 4);
218
+ }
219
+ .flex {
220
+ display: flex;
221
+ }
222
+ .h-4 {
223
+ height: calc(var(--spacing) * 4);
224
+ }
225
+ .h-\[40px\] {
226
+ height: 40px;
227
+ }
228
+ .w-fit {
229
+ width: -moz-fit-content;
230
+ width: fit-content;
231
+ }
232
+ .w-full {
233
+ width: 100%;
234
+ }
235
+ .max-w-md {
236
+ max-width: var(--container-md);
237
+ }
238
+ .-translate-y-1\/2 {
239
+ --tw-translate-y: calc(calc(1/2 * 100%) * -1);
240
+ translate: var(--tw-translate-x) var(--tw-translate-y);
241
+ }
242
+ .animate-pulse {
243
+ animation: var(--animate-pulse);
244
+ }
245
+ .cursor-pointer {
246
+ cursor: pointer;
247
+ }
248
+ .items-center {
249
+ align-items: center;
250
+ }
251
+ .justify-center {
252
+ justify-content: center;
253
+ }
254
+ .justify-end {
255
+ justify-content: flex-end;
256
+ }
257
+ .gap-4 {
258
+ gap: calc(var(--spacing) * 4);
259
+ }
260
+ .rounded-\[4px\] {
261
+ border-radius: 4px;
262
+ }
263
+ .rounded-\[10px\] {
264
+ border-radius: 10px;
265
+ }
266
+ .rounded-\[12px\] {
267
+ border-radius: 12px;
268
+ }
269
+ .rounded-full {
270
+ border-radius: calc(infinity * 1px);
271
+ }
272
+ .rounded-lg {
273
+ border-radius: var(--radius-lg);
274
+ }
275
+ .border {
276
+ border-style: var(--tw-border-style);
277
+ border-width: 1px;
278
+ }
279
+ .border-transparent {
280
+ border-color: transparent;
281
+ }
282
+ .bg-\[\#27272E\] {
283
+ background-color: #27272E;
284
+ }
285
+ .bg-black\/80 {
286
+ background-color: color-mix(in srgb, #000 80%, transparent);
287
+ @supports (color: color-mix(in lab, red, red)) {
288
+ background-color: color-mix(in oklab, var(--color-black) 80%, transparent);
289
+ }
290
+ }
291
+ .bg-white {
292
+ background-color: var(--color-white);
293
+ }
294
+ .bg-gradient-to-r {
295
+ --tw-gradient-position: to right in oklab;
296
+ background-image: linear-gradient(var(--tw-gradient-stops));
297
+ }
298
+ .from-\[\#27272E\] {
299
+ --tw-gradient-from: #27272E;
300
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
301
+ }
302
+ .via-\[\#2f2f35\] {
303
+ --tw-gradient-via: #2f2f35;
304
+ --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
305
+ --tw-gradient-stops: var(--tw-gradient-via-stops);
306
+ }
307
+ .to-\[\#27272E\] {
308
+ --tw-gradient-to: #27272E;
309
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
310
+ }
311
+ .bg-\[length\:200\%_100\%\] {
312
+ background-size: 200% 100%;
313
+ }
314
+ .p-8 {
315
+ padding: calc(var(--spacing) * 8);
316
+ }
317
+ .px-4 {
318
+ padding-inline: calc(var(--spacing) * 4);
319
+ }
320
+ .pt-2 {
321
+ padding-top: calc(var(--spacing) * 2);
322
+ }
323
+ .pr-12 {
324
+ padding-right: calc(var(--spacing) * 12);
325
+ }
326
+ .pr-28 {
327
+ padding-right: calc(var(--spacing) * 28);
328
+ }
329
+ .text-2xl {
330
+ font-size: var(--text-2xl);
331
+ line-height: var(--tw-leading, var(--text-2xl--line-height));
332
+ }
333
+ .text-sm {
334
+ font-size: var(--text-sm);
335
+ line-height: var(--tw-leading, var(--text-sm--line-height));
336
+ }
337
+ .font-bold {
338
+ --tw-font-weight: var(--font-weight-bold);
339
+ font-weight: var(--font-weight-bold);
340
+ }
341
+ .font-medium {
342
+ --tw-font-weight: var(--font-weight-medium);
343
+ font-weight: var(--font-weight-medium);
344
+ }
345
+ .text-\[\#A77BFF\] {
346
+ color: #A77BFF;
347
+ }
348
+ .text-gray-400 {
349
+ color: var(--color-gray-400);
350
+ }
351
+ .text-white {
352
+ color: var(--color-white);
353
+ }
354
+ .transition {
355
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
356
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
357
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
358
+ }
359
+ .transition-colors {
360
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
361
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
362
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
363
+ }
364
+ .placeholder\:text-sm {
365
+ &::-moz-placeholder {
366
+ font-size: var(--text-sm);
367
+ line-height: var(--tw-leading, var(--text-sm--line-height));
368
+ }
369
+ &::placeholder {
370
+ font-size: var(--text-sm);
371
+ line-height: var(--tw-leading, var(--text-sm--line-height));
372
+ }
373
+ }
374
+ .placeholder\:opacity-30 {
375
+ &::-moz-placeholder {
376
+ opacity: 30%;
377
+ }
378
+ &::placeholder {
379
+ opacity: 30%;
380
+ }
381
+ }
382
+ .hover\:text-white {
383
+ &:hover {
384
+ @media (hover: hover) {
385
+ color: var(--color-white);
386
+ }
387
+ }
388
+ }
389
+ .focus\:border-\[\#6B2CE9\] {
390
+ &:focus {
391
+ border-color: #6B2CE9;
392
+ }
393
+ }
394
+ .focus\:outline-none {
395
+ &:focus {
396
+ --tw-outline-style: none;
397
+ outline-style: none;
398
+ }
399
+ }
400
+ .lg\:hidden {
401
+ @media (width >= 64rem) {
402
+ display: none;
403
+ }
404
+ }
405
+ }
406
+ @property --tw-translate-x {
407
+ syntax: "*";
408
+ inherits: false;
409
+ initial-value: 0;
410
+ }
411
+ @property --tw-translate-y {
412
+ syntax: "*";
413
+ inherits: false;
414
+ initial-value: 0;
415
+ }
416
+ @property --tw-translate-z {
417
+ syntax: "*";
418
+ inherits: false;
419
+ initial-value: 0;
420
+ }
421
+ @property --tw-border-style {
422
+ syntax: "*";
423
+ inherits: false;
424
+ initial-value: solid;
425
+ }
426
+ @property --tw-gradient-position {
427
+ syntax: "*";
428
+ inherits: false;
429
+ }
430
+ @property --tw-gradient-from {
431
+ syntax: "<color>";
432
+ inherits: false;
433
+ initial-value: #0000;
434
+ }
435
+ @property --tw-gradient-via {
436
+ syntax: "<color>";
437
+ inherits: false;
438
+ initial-value: #0000;
439
+ }
440
+ @property --tw-gradient-to {
441
+ syntax: "<color>";
442
+ inherits: false;
443
+ initial-value: #0000;
444
+ }
445
+ @property --tw-gradient-stops {
446
+ syntax: "*";
447
+ inherits: false;
448
+ }
449
+ @property --tw-gradient-via-stops {
450
+ syntax: "*";
451
+ inherits: false;
452
+ }
453
+ @property --tw-gradient-from-position {
454
+ syntax: "<length-percentage>";
455
+ inherits: false;
456
+ initial-value: 0%;
457
+ }
458
+ @property --tw-gradient-via-position {
459
+ syntax: "<length-percentage>";
460
+ inherits: false;
461
+ initial-value: 50%;
462
+ }
463
+ @property --tw-gradient-to-position {
464
+ syntax: "<length-percentage>";
465
+ inherits: false;
466
+ initial-value: 100%;
467
+ }
468
+ @property --tw-font-weight {
469
+ syntax: "*";
470
+ inherits: false;
471
+ }
472
+ @keyframes pulse {
473
+ 50% {
474
+ opacity: 0.5;
475
+ }
476
+ }
477
+ @layer properties {
478
+ @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
479
+ *, ::before, ::after, ::backdrop {
480
+ --tw-translate-x: 0;
481
+ --tw-translate-y: 0;
482
+ --tw-translate-z: 0;
483
+ --tw-border-style: solid;
484
+ --tw-gradient-position: initial;
485
+ --tw-gradient-from: #0000;
486
+ --tw-gradient-via: #0000;
487
+ --tw-gradient-to: #0000;
488
+ --tw-gradient-stops: initial;
489
+ --tw-gradient-via-stops: initial;
490
+ --tw-gradient-from-position: 0%;
491
+ --tw-gradient-via-position: 50%;
492
+ --tw-gradient-to-position: 100%;
493
+ --tw-font-weight: initial;
494
+ }
495
+ }
496
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tunjiadeyemi/ui",
3
- "version": "1.0.0",
3
+ "version": "1.0.1",
4
4
  "description": "A collection of reusable UI components",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",
@@ -20,7 +20,7 @@
20
20
  ],
21
21
  "scripts": {
22
22
  "build": "tsup src/index.ts --format cjs,esm --dts --external react --external react-dom --external framer-motion --external lucide-react && npm run build:css",
23
- "build:css": "cp ./src/styles.css ./dist/styles.css",
23
+ "build:css": "postcss ./src/styles.css -o ./dist/styles.css",
24
24
  "dev": "tsup src/index.ts --format cjs,esm --dts --watch --external react --external react-dom --external framer-motion --external lucide-react",
25
25
  "prepublishOnly": "npm run build",
26
26
  "lint": "eslint src --ext .ts,.tsx"
@@ -38,17 +38,27 @@
38
38
  "url": "https://github.com/tunjiadeyemi/ui"
39
39
  },
40
40
  "peerDependencies": {
41
- "framer-motion": "^11.0.0",
42
- "lucide-react": "^0.400.0",
43
- "react": "^18.0.0",
44
- "react-dom": "^18.0.0"
41
+ "framer-motion": ">=11.0.0",
42
+ "lucide-react": ">=0.400.0",
43
+ "react": ">=18.0.0",
44
+ "react-dom": ">=18.0.0"
45
+ },
46
+ "peerDependenciesMeta": {
47
+ "framer-motion": {
48
+ "optional": false
49
+ },
50
+ "lucide-react": {
51
+ "optional": false
52
+ }
45
53
  },
46
54
  "devDependencies": {
55
+ "@tailwindcss/postcss": "^4.1.18",
47
56
  "@types/react": "^18.2.0",
48
57
  "@types/react-dom": "^18.2.0",
49
58
  "autoprefixer": "^10.4.16",
50
59
  "lucide-react": "^0.562.0",
51
60
  "postcss": "^8.4.32",
61
+ "postcss-cli": "^11.0.1",
52
62
  "tailwindcss": "4.0.0",
53
63
  "tsup": "^8.0.0",
54
64
  "typescript": "^5.3.0"