@tunjiadeyemi/ui 1.4.0 → 1.4.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 (3) hide show
  1. package/README.md +118 -80
  2. package/dist/styles.css +302 -0
  3. package/package.json +5 -2
package/README.md CHANGED
@@ -2,6 +2,12 @@
2
2
 
3
3
  A collection of reusable React UI components built with TypeScript.
4
4
 
5
+ ## Storybook
6
+
7
+ Explore all components in Storybook:
8
+
9
+ https://69a67d791bd8666f2b32dd2d-ujpylcgcxt.chromatic.com/
10
+
5
11
  ## Installation
6
12
 
7
13
  ```bash
@@ -14,36 +20,47 @@ or
14
20
  yarn add @tunjiadeyemi/ui framer-motion lucide-react
15
21
  ```
16
22
 
17
- ## Usage
23
+ ## Quick Start
18
24
 
19
- First, import the styles in your app's entry point (e.g., `App.tsx` or `main.tsx`):
25
+ Import styles once (for example in `main.tsx` or `App.tsx`):
20
26
 
21
27
  ```tsx
22
- import "@tunjiadeyemi/ui/styles.css";
28
+ import '@tunjiadeyemi/ui/styles.css';
23
29
  ```
24
30
 
25
- Then use the components:
31
+ Use the components:
26
32
 
27
33
  ```tsx
28
- import { Modal, Input, Skeleton } from "@tunjiadeyemi/ui";
29
- import { useState } from "react";
34
+ import { useState } from 'react';
35
+ import { Modal, Input, Skeleton, Accordion, Rating, ScrollToTop } from '@tunjiadeyemi/ui';
30
36
 
31
37
  function App() {
32
38
  const [showModal, setShowModal] = useState(false);
33
- const [email, setEmail] = useState("");
39
+ const [email, setEmail] = useState('');
34
40
 
35
41
  return (
36
42
  <>
43
+ <ScrollToTop />
44
+
37
45
  <Input
38
46
  type="email"
39
47
  value={email}
40
48
  onChange={(e) => setEmail(e.target.value)}
41
49
  placeholder="Enter your email"
42
- validate={true}
50
+ validate
43
51
  />
44
52
 
45
- <button onClick={() => setShowModal(true)}>Open Modal</button>
53
+ <Accordion
54
+ items={[
55
+ { question: 'What is this?', answer: 'A reusable UI library.' },
56
+ { question: 'Does it support TypeScript?', answer: 'Yes.' }
57
+ ]}
58
+ />
59
+
60
+ <Rating rating={4} total={5} />
61
+ <Skeleton width="200px" height="20px" animation="pulse" />
46
62
 
63
+ <button onClick={() => setShowModal(true)}>Open Modal</button>
47
64
  <Modal
48
65
  showModal={showModal}
49
66
  onClose={() => setShowModal(false)}
@@ -53,66 +70,62 @@ function App() {
53
70
  <h2 className="text-2xl font-bold mb-4">Modal Title</h2>
54
71
  <p>Modal content goes here</p>
55
72
  </Modal>
56
-
57
- <Skeleton width="200px" height="20px" animation="pulse" />
58
73
  </>
59
74
  );
60
75
  }
61
76
  ```
62
77
 
63
- ## Available Components
78
+ ## Components
64
79
 
65
80
  ### Modal
66
81
 
67
- A flexible modal component with multiple reveal animations and optional drag-to-dismiss.
68
-
69
- **Props:**
82
+ Flexible modal component with multiple reveal animations.
70
83
 
71
- - `showModal` (boolean): Controls modal visibility
72
- - `onClose` (function): Callback when modal is closed
73
- - `revealMode` ('fade' | 'slide-right' | 'slide-bottom'): Animation style - Default: `'fade'`
74
- - `isDrag` (boolean): Enable drag to dismiss (for slide-bottom mode) - Default: `false`
75
- - `className` (string): Custom classes for the modal content
76
- - `children` (ReactNode): Modal content
84
+ **Props**
77
85
 
78
- **Example:**
86
+ - `children: React.ReactNode`
87
+ - `className?: string`
88
+ - `revealMode?: 'fade' | 'slide-right' | 'slide-bottom'` (default: `'fade'`)
89
+ - `showModal?: boolean` (default: `true`)
90
+ - `onClose?: () => void`
91
+ - `isDrag?: boolean` (default: `false`)
79
92
 
80
93
  ```tsx
81
94
  <Modal
82
- showModal={true}
83
- onClose={() => console.log("Modal closed")}
95
+ showModal
96
+ onClose={() => console.log('Modal closed')}
84
97
  revealMode="slide-bottom"
85
- isDrag={true}
98
+ isDrag
86
99
  className="bg-white p-6 rounded-lg"
87
100
  >
88
- <h2>Your Content</h2>
101
+ <h2>Your content</h2>
89
102
  </Modal>
90
103
  ```
91
104
 
92
105
  ### Input
93
106
 
94
- A customizable input component with built-in validation, password visibility toggle, and OTP support.
95
-
96
- **Props:**
97
-
98
- - `type` ('text' | 'email' | 'password' | 'otp' | 'number'): Input type - Default: `'text'`
99
- - `value` (string): Input value
100
- - `onChange` (function): Change handler
101
- - `placeholder` (string): Placeholder text
102
- - `validate` (boolean): Enable validation - Default: `false`
103
- - `minLength` (number): Minimum character length
104
- - `maxLength` (number): Maximum character length
105
- - `errorMessage` (string): Custom error message
106
- - `onOtpClick` (function): Callback for OTP button click (when type is 'otp')
107
- - `className` (string): Additional CSS classes
108
- - `width` (string): Input width - Default: `'100%'`
109
- - `height` (string): Input height - Default: `'40px'`
110
- - `color` (string): Accent color - Default: `'#6B2CE9'`
111
- - `textColor` (string): Text color - Default: `'white'`
112
- - `backgroundColor` (string): Background color - Default: `'#1F1F23'`
113
- - `borderRadius` (string): Border radius - Default: `'10px'`
114
-
115
- **Example:**
107
+ Customizable input with validation, password visibility toggle, and OTP resend support.
108
+
109
+ **Props**
110
+
111
+ - `type?: 'password' | 'otp' | 'text' | 'email' | 'number'`
112
+ - `value?: string`
113
+ - `onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void`
114
+ - `onOtpClick?: () => void`
115
+ - `placeholder?: string`
116
+ - `validate?: boolean` (default: `false`)
117
+ - `minLength?: number`
118
+ - `maxLength?: number`
119
+ - `errorMessage?: string`
120
+ - `className?: string`
121
+ - `backgroundColor?: string` (default: `'#1F1F23'`)
122
+ - `borderColor?: string` (default: `'#6B2CE9'`)
123
+ - `textColor?: string` (default: `'white'`)
124
+ - `borderRadius?: string` (default: `'10px'`)
125
+ - `height?: string` (default: `'40px'`)
126
+ - `width?: string` (default: `'100%'`)
127
+ - `eyeIcon?: React.ReactNode`
128
+ - `eyeClosedIcon?: React.ReactNode`
116
129
 
117
130
  ```tsx
118
131
  <Input
@@ -120,45 +133,74 @@ A customizable input component with built-in validation, password visibility tog
120
133
  value={email}
121
134
  onChange={(e) => setEmail(e.target.value)}
122
135
  placeholder="Enter your email"
123
- validate={true}
136
+ validate
124
137
  errorMessage="Please enter a valid email"
125
138
  />
139
+ ```
126
140
 
127
- <Input
128
- type="password"
129
- value={password}
130
- onChange={(e) => setPassword(e.target.value)}
131
- minLength={8}
132
- validate={true}
133
- />
141
+ ### Skeleton
134
142
 
135
- <Input
136
- type="otp"
137
- value={otp}
138
- onChange={(e) => setOtp(e.target.value)}
139
- onOtpClick={() => console.log('Send OTP')}
140
- placeholder="Enter OTP"
143
+ Loading placeholder component with shape variants and animation options.
144
+
145
+ **Props**
146
+
147
+ - `className?: string`
148
+ - `variant?: 'text' | 'circular' | 'rectangular'` (default: `'rectangular'`)
149
+ - `width?: string | number` (default: `'100%'`)
150
+ - `height?: string | number` (default: `'100%'`)
151
+ - `animation?: 'pulse' | 'wave' | 'none'` (default: `'pulse'`)
152
+
153
+ ```tsx
154
+ <Skeleton variant="text" width="200px" height="20px" />
155
+ <Skeleton variant="circular" width={50} height={50} />
156
+ <Skeleton variant="rectangular" width="100%" height="200px" animation="wave" />
157
+ ```
158
+
159
+ ### Accordion
160
+
161
+ Simple accordion that supports multiple open items.
162
+
163
+ **Types & Props**
164
+
165
+ - `AccordionItem`: `{ question: string; answer: React.ReactNode; icon?: React.ReactNode }`
166
+ - `icon?: React.ReactNode`
167
+ - `items: AccordionItem[]`
168
+ - `className?: string`
169
+ - `containerClassName?: string`
170
+ - `onIconClick?: (idx: number, item: AccordionItem) => void`
171
+
172
+ ```tsx
173
+ <Accordion
174
+ items={[
175
+ { question: 'What is this?', answer: 'An accordion item.' },
176
+ { question: 'Can multiple items be open?', answer: 'Yes.' }
177
+ ]}
141
178
  />
142
179
  ```
143
180
 
144
- ### Skeleton
181
+ ### Rating
182
+
183
+ Rating display with default star icon or custom icon image.
184
+
185
+ **Props**
145
186
 
146
- A loading placeholder component with multiple variants and animations.
187
+ - `rating: number`
188
+ - `total: number`
189
+ - `icon?: string`
190
+ - `showOnlyRated?: boolean` (default: `false`)
147
191
 
148
- **Props:**
192
+ ```tsx
193
+ <Rating rating={3} total={5} />
194
+ <Rating rating={4} total={5} icon="/icons/star.svg" />
195
+ <Rating rating={4} total={5} showOnlyRated />
196
+ ```
149
197
 
150
- - `variant` ('text' | 'circular' | 'rectangular'): Skeleton shape - Default: `'rectangular'`
151
- - `width` (string | number): Width of skeleton - Default: `'100%'`
152
- - `height` (string | number): Height of skeleton - Default: `'100%'`
153
- - `animation` ('pulse' | 'wave' | 'none'): Animation type - Default: `'pulse'`
154
- - `className` (string): Additional CSS classes
198
+ ### ScrollToTop
155
199
 
156
- **Example:**
200
+ Utility component that scrolls to top on mount and browser navigation events.
157
201
 
158
202
  ```tsx
159
- <Skeleton variant="text" width="200px" height="20px" />
160
- <Skeleton variant="circular" width="50px" height="50px" />
161
- <Skeleton variant="rectangular" width="100%" height="200px" animation="wave" />
203
+ <ScrollToTop />
162
204
  ```
163
205
 
164
206
  ## Development
@@ -167,13 +209,9 @@ A loading placeholder component with multiple variants and animations.
167
209
  # Install dependencies
168
210
  npm install
169
211
 
170
- # Build the package
212
+ # Build package (JS + types + styles)
171
213
  npm run build
172
214
 
173
- # Watch mode for development
215
+ # Watch mode
174
216
  npm run dev
175
217
  ```
176
-
177
- ## License
178
-
179
- MIT © Tunji Adeyemi
package/dist/styles.css CHANGED
@@ -9,21 +9,48 @@
9
9
  "Liberation Mono", "Courier New", monospace;
10
10
  --color-red-500: oklch(0.637 0.237 25.331);
11
11
  --color-yellow-400: oklch(0.852 0.199 91.936);
12
+ --color-violet-200: oklch(0.894 0.057 293.283);
13
+ --color-violet-500: oklch(0.606 0.25 292.717);
14
+ --color-violet-600: oklch(0.541 0.281 293.009);
15
+ --color-slate-100: oklch(0.968 0.007 247.896);
16
+ --color-slate-200: oklch(0.929 0.013 255.508);
17
+ --color-slate-300: oklch(0.869 0.022 252.894);
18
+ --color-slate-400: oklch(0.704 0.04 256.788);
19
+ --color-slate-600: oklch(0.446 0.043 257.281);
20
+ --color-slate-700: oklch(0.372 0.044 257.287);
21
+ --color-slate-800: oklch(0.279 0.041 260.031);
22
+ --color-slate-900: oklch(0.208 0.042 265.755);
23
+ --color-slate-950: oklch(0.129 0.042 264.695);
12
24
  --color-gray-300: oklch(0.872 0.01 258.338);
13
25
  --color-gray-400: oklch(0.707 0.022 261.325);
14
26
  --color-black: #000;
15
27
  --color-white: #fff;
16
28
  --spacing: 0.25rem;
17
29
  --container-md: 28rem;
30
+ --container-2xl: 42rem;
31
+ --container-4xl: 56rem;
18
32
  --text-xs: 0.75rem;
19
33
  --text-xs--line-height: calc(1 / 0.75);
20
34
  --text-sm: 0.875rem;
21
35
  --text-sm--line-height: calc(1.25 / 0.875);
36
+ --text-base: 1rem;
37
+ --text-base--line-height: calc(1.5 / 1);
38
+ --text-lg: 1.125rem;
39
+ --text-lg--line-height: calc(1.75 / 1.125);
22
40
  --text-2xl: 1.5rem;
23
41
  --text-2xl--line-height: calc(2 / 1.5);
42
+ --text-3xl: 1.875rem;
43
+ --text-3xl--line-height: calc(2.25 / 1.875);
44
+ --text-4xl: 2.25rem;
45
+ --text-4xl--line-height: calc(2.5 / 2.25);
24
46
  --font-weight-medium: 500;
47
+ --font-weight-semibold: 600;
25
48
  --font-weight-bold: 700;
49
+ --tracking-tight: -0.025em;
50
+ --radius-md: 0.375rem;
26
51
  --radius-lg: 0.5rem;
52
+ --radius-xl: 0.75rem;
53
+ --radius-2xl: 1rem;
27
54
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
28
55
  --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
29
56
  --default-transition-duration: 150ms;
@@ -198,6 +225,9 @@
198
225
  }
199
226
  }
200
227
  @layer utilities {
228
+ .visible {
229
+ visibility: visible;
230
+ }
201
231
  .absolute {
202
232
  position: absolute;
203
233
  }
@@ -219,12 +249,30 @@
219
249
  .z-50 {
220
250
  z-index: 50;
221
251
  }
252
+ .m-0 {
253
+ margin: calc(var(--spacing) * 0);
254
+ }
255
+ .mx-auto {
256
+ margin-inline: auto;
257
+ }
258
+ .mt-0 {
259
+ margin-top: calc(var(--spacing) * 0);
260
+ }
222
261
  .mt-1 {
223
262
  margin-top: calc(var(--spacing) * 1);
224
263
  }
264
+ .mt-3 {
265
+ margin-top: calc(var(--spacing) * 3);
266
+ }
267
+ .mb-2 {
268
+ margin-bottom: calc(var(--spacing) * 2);
269
+ }
225
270
  .mb-4 {
226
271
  margin-bottom: calc(var(--spacing) * 4);
227
272
  }
273
+ .mb-5 {
274
+ margin-bottom: calc(var(--spacing) * 5);
275
+ }
228
276
  .ml-2 {
229
277
  margin-left: calc(var(--spacing) * 2);
230
278
  }
@@ -234,9 +282,18 @@
234
282
  .grid {
235
283
  display: grid;
236
284
  }
285
+ .inline-flex {
286
+ display: inline-flex;
287
+ }
237
288
  .h-4 {
238
289
  height: calc(var(--spacing) * 4);
239
290
  }
291
+ .min-h-\[50vh\] {
292
+ min-height: 50vh;
293
+ }
294
+ .min-h-screen {
295
+ min-height: 100vh;
296
+ }
240
297
  .w-4 {
241
298
  width: calc(var(--spacing) * 4);
242
299
  }
@@ -247,6 +304,12 @@
247
304
  .w-full {
248
305
  width: 100%;
249
306
  }
307
+ .max-w-2xl {
308
+ max-width: var(--container-2xl);
309
+ }
310
+ .max-w-4xl {
311
+ max-width: var(--container-4xl);
312
+ }
250
313
  .max-w-md {
251
314
  max-width: var(--container-md);
252
315
  }
@@ -287,6 +350,9 @@
287
350
  .gap-4 {
288
351
  gap: calc(var(--spacing) * 4);
289
352
  }
353
+ .gap-6 {
354
+ gap: calc(var(--spacing) * 6);
355
+ }
290
356
  .space-y-2 {
291
357
  :where(& > :not(:last-child)) {
292
358
  --tw-space-y-reverse: 0;
@@ -294,9 +360,19 @@
294
360
  margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
295
361
  }
296
362
  }
363
+ .space-y-3 {
364
+ :where(& > :not(:last-child)) {
365
+ --tw-space-y-reverse: 0;
366
+ margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
367
+ margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
368
+ }
369
+ }
297
370
  .overflow-hidden {
298
371
  overflow: hidden;
299
372
  }
373
+ .rounded-2xl {
374
+ border-radius: var(--radius-2xl);
375
+ }
300
376
  .rounded-\[4px\] {
301
377
  border-radius: 4px;
302
378
  }
@@ -309,6 +385,12 @@
309
385
  .rounded-lg {
310
386
  border-radius: var(--radius-lg);
311
387
  }
388
+ .rounded-md {
389
+ border-radius: var(--radius-md);
390
+ }
391
+ .rounded-xl {
392
+ border-radius: var(--radius-xl);
393
+ }
312
394
  .border {
313
395
  border-style: var(--tw-border-style);
314
396
  border-width: 1px;
@@ -316,9 +398,24 @@
316
398
  .border-red-500 {
317
399
  border-color: var(--color-red-500);
318
400
  }
401
+ .border-slate-200 {
402
+ border-color: var(--color-slate-200);
403
+ }
404
+ .border-slate-300 {
405
+ border-color: var(--color-slate-300);
406
+ }
407
+ .border-slate-800 {
408
+ border-color: var(--color-slate-800);
409
+ }
319
410
  .border-transparent {
320
411
  border-color: transparent;
321
412
  }
413
+ .border-violet-500\/40 {
414
+ border-color: color-mix(in srgb, oklch(0.606 0.25 292.717) 40%, transparent);
415
+ @supports (color: color-mix(in lab, red, red)) {
416
+ border-color: color-mix(in oklab, var(--color-violet-500) 40%, transparent);
417
+ }
418
+ }
322
419
  .bg-\[\#27272E\] {
323
420
  background-color: #27272E;
324
421
  }
@@ -328,6 +425,24 @@
328
425
  background-color: color-mix(in oklab, var(--color-black) 80%, transparent);
329
426
  }
330
427
  }
428
+ .bg-slate-900\/80 {
429
+ background-color: color-mix(in srgb, oklch(0.208 0.042 265.755) 80%, transparent);
430
+ @supports (color: color-mix(in lab, red, red)) {
431
+ background-color: color-mix(in oklab, var(--color-slate-900) 80%, transparent);
432
+ }
433
+ }
434
+ .bg-slate-950 {
435
+ background-color: var(--color-slate-950);
436
+ }
437
+ .bg-violet-500\/10 {
438
+ background-color: color-mix(in srgb, oklch(0.606 0.25 292.717) 10%, transparent);
439
+ @supports (color: color-mix(in lab, red, red)) {
440
+ background-color: color-mix(in oklab, var(--color-violet-500) 10%, transparent);
441
+ }
442
+ }
443
+ .bg-violet-600 {
444
+ background-color: var(--color-violet-600);
445
+ }
331
446
  .bg-white {
332
447
  background-color: var(--color-white);
333
448
  }
@@ -351,6 +466,12 @@
351
466
  .bg-\[length\:200\%_100\%\] {
352
467
  background-size: 200% 100%;
353
468
  }
469
+ .p-4 {
470
+ padding: calc(var(--spacing) * 4);
471
+ }
472
+ .p-5 {
473
+ padding: calc(var(--spacing) * 5);
474
+ }
354
475
  .p-6 {
355
476
  padding: calc(var(--spacing) * 6);
356
477
  }
@@ -360,12 +481,24 @@
360
481
  .px-1 {
361
482
  padding-inline: calc(var(--spacing) * 1);
362
483
  }
484
+ .px-3 {
485
+ padding-inline: calc(var(--spacing) * 3);
486
+ }
363
487
  .px-4 {
364
488
  padding-inline: calc(var(--spacing) * 4);
365
489
  }
490
+ .py-1 {
491
+ padding-block: calc(var(--spacing) * 1);
492
+ }
493
+ .py-2 {
494
+ padding-block: calc(var(--spacing) * 2);
495
+ }
366
496
  .py-3 {
367
497
  padding-block: calc(var(--spacing) * 3);
368
498
  }
499
+ .py-10 {
500
+ padding-block: calc(var(--spacing) * 10);
501
+ }
369
502
  .pt-2 {
370
503
  padding-top: calc(var(--spacing) * 2);
371
504
  }
@@ -385,6 +518,14 @@
385
518
  font-size: var(--text-2xl);
386
519
  line-height: var(--tw-leading, var(--text-2xl--line-height));
387
520
  }
521
+ .text-3xl {
522
+ font-size: var(--text-3xl);
523
+ line-height: var(--tw-leading, var(--text-3xl--line-height));
524
+ }
525
+ .text-lg {
526
+ font-size: var(--text-lg);
527
+ line-height: var(--tw-leading, var(--text-lg--line-height));
528
+ }
388
529
  .text-sm {
389
530
  font-size: var(--text-sm);
390
531
  line-height: var(--tw-leading, var(--text-sm--line-height));
@@ -401,6 +542,14 @@
401
542
  --tw-font-weight: var(--font-weight-medium);
402
543
  font-weight: var(--font-weight-medium);
403
544
  }
545
+ .font-semibold {
546
+ --tw-font-weight: var(--font-weight-semibold);
547
+ font-weight: var(--font-weight-semibold);
548
+ }
549
+ .tracking-tight {
550
+ --tw-tracking: var(--tracking-tight);
551
+ letter-spacing: var(--tracking-tight);
552
+ }
404
553
  .text-\[\#A77BFF\] {
405
554
  color: #A77BFF;
406
555
  }
@@ -413,6 +562,30 @@
413
562
  .text-red-500 {
414
563
  color: var(--color-red-500);
415
564
  }
565
+ .text-slate-100 {
566
+ color: var(--color-slate-100);
567
+ }
568
+ .text-slate-300 {
569
+ color: var(--color-slate-300);
570
+ }
571
+ .text-slate-400 {
572
+ color: var(--color-slate-400);
573
+ }
574
+ .text-slate-600 {
575
+ color: var(--color-slate-600);
576
+ }
577
+ .text-slate-700 {
578
+ color: var(--color-slate-700);
579
+ }
580
+ .text-slate-900 {
581
+ color: var(--color-slate-900);
582
+ }
583
+ .text-violet-200 {
584
+ color: var(--color-violet-200);
585
+ }
586
+ .text-white {
587
+ color: var(--color-white);
588
+ }
416
589
  .text-yellow-400 {
417
590
  color: var(--color-yellow-400);
418
591
  }
@@ -425,6 +598,10 @@
425
598
  .opacity-100 {
426
599
  opacity: 100%;
427
600
  }
601
+ .shadow-sm {
602
+ --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
603
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
604
+ }
428
605
  .transition {
429
606
  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;
430
607
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -466,6 +643,20 @@
466
643
  opacity: 30%;
467
644
  }
468
645
  }
646
+ .hover\:bg-slate-100 {
647
+ &:hover {
648
+ @media (hover: hover) {
649
+ background-color: var(--color-slate-100);
650
+ }
651
+ }
652
+ }
653
+ .hover\:bg-violet-500 {
654
+ &:hover {
655
+ @media (hover: hover) {
656
+ background-color: var(--color-violet-500);
657
+ }
658
+ }
659
+ }
469
660
  .hover\:text-white {
470
661
  &:hover {
471
662
  @media (hover: hover) {
@@ -479,6 +670,33 @@
479
670
  outline-style: none;
480
671
  }
481
672
  }
673
+ .sm\:p-6 {
674
+ @media (width >= 40rem) {
675
+ padding: calc(var(--spacing) * 6);
676
+ }
677
+ }
678
+ .sm\:p-8 {
679
+ @media (width >= 40rem) {
680
+ padding: calc(var(--spacing) * 8);
681
+ }
682
+ }
683
+ .sm\:px-6 {
684
+ @media (width >= 40rem) {
685
+ padding-inline: calc(var(--spacing) * 6);
686
+ }
687
+ }
688
+ .sm\:text-4xl {
689
+ @media (width >= 40rem) {
690
+ font-size: var(--text-4xl);
691
+ line-height: var(--tw-leading, var(--text-4xl--line-height));
692
+ }
693
+ }
694
+ .sm\:text-base {
695
+ @media (width >= 40rem) {
696
+ font-size: var(--text-base);
697
+ line-height: var(--tw-leading, var(--text-base--line-height));
698
+ }
699
+ }
482
700
  .lg\:hidden {
483
701
  @media (width >= 64rem) {
484
702
  display: none;
@@ -576,6 +794,75 @@
576
794
  syntax: "*";
577
795
  inherits: false;
578
796
  }
797
+ @property --tw-tracking {
798
+ syntax: "*";
799
+ inherits: false;
800
+ }
801
+ @property --tw-shadow {
802
+ syntax: "*";
803
+ inherits: false;
804
+ initial-value: 0 0 #0000;
805
+ }
806
+ @property --tw-shadow-color {
807
+ syntax: "*";
808
+ inherits: false;
809
+ }
810
+ @property --tw-shadow-alpha {
811
+ syntax: "<percentage>";
812
+ inherits: false;
813
+ initial-value: 100%;
814
+ }
815
+ @property --tw-inset-shadow {
816
+ syntax: "*";
817
+ inherits: false;
818
+ initial-value: 0 0 #0000;
819
+ }
820
+ @property --tw-inset-shadow-color {
821
+ syntax: "*";
822
+ inherits: false;
823
+ }
824
+ @property --tw-inset-shadow-alpha {
825
+ syntax: "<percentage>";
826
+ inherits: false;
827
+ initial-value: 100%;
828
+ }
829
+ @property --tw-ring-color {
830
+ syntax: "*";
831
+ inherits: false;
832
+ }
833
+ @property --tw-ring-shadow {
834
+ syntax: "*";
835
+ inherits: false;
836
+ initial-value: 0 0 #0000;
837
+ }
838
+ @property --tw-inset-ring-color {
839
+ syntax: "*";
840
+ inherits: false;
841
+ }
842
+ @property --tw-inset-ring-shadow {
843
+ syntax: "*";
844
+ inherits: false;
845
+ initial-value: 0 0 #0000;
846
+ }
847
+ @property --tw-ring-inset {
848
+ syntax: "*";
849
+ inherits: false;
850
+ }
851
+ @property --tw-ring-offset-width {
852
+ syntax: "<length>";
853
+ inherits: false;
854
+ initial-value: 0px;
855
+ }
856
+ @property --tw-ring-offset-color {
857
+ syntax: "*";
858
+ inherits: false;
859
+ initial-value: #fff;
860
+ }
861
+ @property --tw-ring-offset-shadow {
862
+ syntax: "*";
863
+ inherits: false;
864
+ initial-value: 0 0 #0000;
865
+ }
579
866
  @property --tw-duration {
580
867
  syntax: "*";
581
868
  inherits: false;
@@ -612,6 +899,21 @@
612
899
  --tw-gradient-via-position: 50%;
613
900
  --tw-gradient-to-position: 100%;
614
901
  --tw-font-weight: initial;
902
+ --tw-tracking: initial;
903
+ --tw-shadow: 0 0 #0000;
904
+ --tw-shadow-color: initial;
905
+ --tw-shadow-alpha: 100%;
906
+ --tw-inset-shadow: 0 0 #0000;
907
+ --tw-inset-shadow-color: initial;
908
+ --tw-inset-shadow-alpha: 100%;
909
+ --tw-ring-color: initial;
910
+ --tw-ring-shadow: 0 0 #0000;
911
+ --tw-inset-ring-color: initial;
912
+ --tw-inset-ring-shadow: 0 0 #0000;
913
+ --tw-ring-inset: initial;
914
+ --tw-ring-offset-width: 0px;
915
+ --tw-ring-offset-color: #fff;
916
+ --tw-ring-offset-shadow: 0 0 #0000;
615
917
  --tw-duration: initial;
616
918
  --tw-ease: initial;
617
919
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tunjiadeyemi/ui",
3
- "version": "1.4.0",
3
+ "version": "1.4.1",
4
4
  "description": "A collection of reusable UI components",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",
@@ -22,6 +22,7 @@
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
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
+ "generate:stories": "node ./scripts/generate-stories.mjs",
25
26
  "prepublishOnly": "npm run build",
26
27
  "lint": "eslint src --ext .ts,.tsx"
27
28
  },
@@ -56,11 +57,13 @@
56
57
  "@types/react": "^18.2.0",
57
58
  "@types/react-dom": "^18.2.0",
58
59
  "autoprefixer": "^10.4.16",
59
- "lucide-react": "^0.562.0",
60
60
  "postcss": "^8.4.32",
61
61
  "postcss-cli": "^11.0.1",
62
62
  "tailwindcss": "4.0.0",
63
63
  "tsup": "^8.0.0",
64
64
  "typescript": "^5.3.0"
65
+ },
66
+ "overrides": {
67
+ "rollup": ">=4.59.0"
65
68
  }
66
69
  }