meticulous-ui 1.2.2 → 1.2.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +246 -244
  2. package/components/OtpInput/OtpInput.js +42 -0
  3. package/components/OtpInput/helpers.js +33 -0
  4. package/components/OtpInput/index.js +4 -0
  5. package/components/OtpInput/styles.js +23 -0
  6. package/index.js +10 -8
  7. package/package.json +4 -1
package/README.md CHANGED
@@ -51,253 +51,255 @@ export default App;
51
51
  | ------------ | --------------------------------------- |
52
52
  | `Pagination` | Fully responsive pagination component |
53
53
  | `Toast` | Push 4 types of notifications on screen |
54
+ | `OtpInput` | Gives inputs to enter and edit OTP |
54
55
 
55
56
  ## 📦 Icon Components
56
57
 
57
- | Icons | Description |
58
- | ---------------------------- | ----------------------------------- |
59
- | `AddCircleFilled` | Add circle filled icon |
60
- | `AddCircle` | Add circle icon |
61
- | `Add` | Add icon |
62
- | `ArrowDown` | Arrow down icon |
63
- | `ArrowLeft` | Arrow left icon |
64
- | `ArrowRight` | Arrow right icon |
65
- | `ArrowUp` | Arrow up icon |
66
- | `BagFilled` | Bag filled icon |
67
- | `BagOutline` | Bag outline icon |
68
- | `BellFilled` | Bell filled icon |
69
- | `BellOffFilled` | Bell off filled icon |
70
- | `BellOffOutline` | Bell off outline icon |
71
- | `BellOutline` | Bell outline icon |
72
- | `BookmarkFilled` | Bookmark filled icon |
73
- | `BookmarkOutline` | Bookmark outline icon |
74
- | `BoxCoveredFilled` | Box covered filled icon |
75
- | `BoxCoveredOutline` | Box covered outline icon |
76
- | `BoxFilled` | Box filled icon |
77
- | `BoxOutline` | Box outline icon |
78
- | `CalendarDays` | Calendar days icon |
79
- | `CalendarLinesPen` | Calendar lines pen icon |
80
- | `CartCheckFilled` | Cart check filled icon |
81
- | `CartCheckOutline` | Cart check outline icon |
82
- | `CartCrossFilled` | Cart cross filled icon |
83
- | `CartCrossOutline` | Cart cross outline icon |
84
- | `CartFilled` | Cart filled icon |
85
- | `CartMinusFilled` | Cart minus filled icon |
86
- | `CartMinusOutline` | Cart minus outline icon |
87
- | `CartOutline` | Cart outline icon |
88
- | `CartPlusFilled` | Cart plus filled icon |
89
- | `CartPlusOutline` | Cart plus outline icon |
90
- | `CheckDouble` | Check double icon |
91
- | `Check` | Check icon |
92
- | `ChevronDown` | Chevron down icon |
93
- | `ChevronLeft` | Chevron left icon |
94
- | `ChevronRight` | Chevron right icon |
95
- | `ChevronUp` | Chevron up icon |
96
- | `ClockCircleOutline` | Clock circle outline icon |
97
- | `ClockSquareOutline` | Clock square outline icon |
98
- | `CloseCircleFilled` | Close circle filled icon |
99
- | `CloseCircleOutline` | Close circle outline icon |
100
- | `Close` | Close icon |
101
- | `CommentBubbleFilled` | Comment bubble filled icon |
102
- | `CommentBubbleOutline` | Comment bubble outline icon |
103
- | `CommentFilled` | Comment filled icon |
104
- | `CommentLineFilled` | Comment line filled icon |
105
- | `CommentLineOutline` | Comment line outline icon |
106
- | `CommentOutline` | Comment outline icon |
107
- | `ContactDetailsFilled` | Contact details filled icon |
108
- | `ContactDetailsOutline` | Contact details outline icon |
109
- | `DeliveryTruckFastFilled` | Delivery truck fast filled icon |
110
- | `DeliveryTruckFastOutline` | Delivery truck fast outline icon |
111
- | `DeliveryTruckLeftFilled` | Delivery truck left filled icon |
112
- | `DeliveryTruckLeftOutline` | Delivery truck left outline icon |
113
- | `DeliveryTruckRightFilled` | Delivery truck right filled icon |
114
- | `DeliveryTruckRightOutline` | Delivery truck right outline icon |
115
- | `DetailsOutline` | Details outline icon |
116
- | `DiscordConversation` | Discord conversation icon |
117
- | `DiscordFilled` | Discord filled icon |
118
- | `DiscordOutline` | Discord outline icon |
119
- | `DoorClosedFilled` | Door closed filled icon |
120
- | `DoorClosedOutline` | Door closed outline icon |
121
- | `DoorOpenFilled` | Door open filled icon |
122
- | `DoorOpenOutline` | Door open outline icon |
123
- | `DotsHorizontalFilled` | Dots horizontal filled icon |
124
- | `DotsHorizontalOutline` | Dots horizontal outline icon |
125
- | `DotsVerticalFilled` | Dots vertical filled icon |
126
- | `DotsVerticalOutline` | Dots vertical outline icon |
127
- | `DownloadBoxFilled` | Download box filled icon |
128
- | `DownloadBoxOutline` | Download box outline icon |
129
- | `Download` | Download icon |
130
- | `EditBoxThick` | Edit box thick icon |
131
- | `EditBoxThin` | Edit box thin icon |
132
- | `EmailFilled` | Email filled icon |
133
- | `EmailOutline` | Email outline icon |
134
- | `ExitArrowInOutline` | Exit arrow in outline icon |
135
- | `ExitArrowOutOutline` | Exit arrow out outline icon |
136
- | `EyeClosed` | Eye closed icon |
137
- | `EyeFilled` | Eye filled icon |
138
- | `EyeOutline` | Eye outline icon |
139
- | `FacebookFilled` | Facebook filled icon |
140
- | `FacebookMessengerOutline` | Facebook messenger outline icon |
141
- | `FacebookOutline` | Facebook outline icon |
142
- | `FacebookRoundFilled` | Facebook round filled icon |
143
- | `FilterList` | Filter list icon |
144
- | `FilterThickFilled` | Filter thick filled icon |
145
- | `FilterThickOutline` | Filter thick outline icon |
146
- | `Filter` | Filter icon |
147
- | `FullScreenArrowThick` | Full screen arrow thick icon |
148
- | `FullScreenArrowThin` | Full screen arrow thin icon |
149
- | `FullScreenFilled` | Full screen filled icon |
150
- | `FullScreenOutline` | Full screen outline icon |
151
- | `HamburgerMenu` | Hamburger menu icon |
152
- | `HamburgerSpaced` | Hamburger spaced icon |
153
- | `HeartFilled` | Heart filled icon |
154
- | `HeartOutline` | Heart outline icon |
155
- | `HelpCircleFilled` | Help circle filled icon |
156
- | `HelpCircleOutline` | Help circle outline icon |
157
- | `Help` | Help icon |
158
- | `HomeFilled` | Home filled icon |
159
- | `HomeOutline` | Home outline icon |
160
- | `InfoCircleFilled` | Info circle filled icon |
161
- | `InfoCircleOutline` | Info circle outline icon |
162
- | `InfoSquareFilled` | Info square filled icon |
163
- | `InfoSquareOutline` | Info square outline icon |
164
- | `Info` | Info icon |
165
- | `InstagramOuline` | Instagram ouline icon |
166
- | `InstagramRoundFilled` | Instagram round filled icon |
167
- | `KeyFilled` | Key filled icon |
168
- | `KeyInSquareFilled` | Key in square filled icon |
169
- | `KeyInSquareOutline` | Key in square outline icon |
170
- | `KeyOutline` | Key outline icon |
171
- | `KeySideSquareFilled` | Key side square filled icon |
172
- | `KeySideSquareOutline` | Key side square outline icon |
173
- | `KeySquareFilled` | Key square filled icon |
174
- | `KeySquareOutline` | Key square outline icon |
175
- | `Link` | Link icon |
176
- | `LinkedinFilled` | Linkedin filled icon |
177
- | `LinkedinOutline` | Linkedin outline icon |
178
- | `LinkedinRoundFilled` | Linkedin round filled icon |
179
- | `Loading` | Loading icon |
180
- | `LocationArrowFilled` | Location arrow filled icon |
181
- | `LocationArrowOutline` | Location arrow outline icon |
182
- | `LocationFilled` | Location filled icon |
183
- | `LocationOutline` | Location outline icon |
184
- | `LockKeyholeOutline` | Lock keyhole outline icon |
185
- | `LockKeyholeUnlockedOutline` | Lock keyhole unlocked outline icon |
186
- | `LockKeyholeUnlocked` | Lock keyhole unlocked icon |
187
- | `LockKeyhole` | Lock keyhole icon |
188
- | `MediaPauseCircleFilled` | Media pause circle filled icon |
189
- | `MediaPauseCircleOuline` | Media pause circle ouline icon |
190
- | `MediaPauseFilled` | Media pause filled icon |
191
- | `MediaPauseOutline` | Media pause outline icon |
192
- | `MediaPlayCircleFilled` | Media play circle filled icon |
193
- | `MediaPlayCircleOutline` | Media play circle outline icon |
194
- | `MediaPlayFilled` | Media play filled icon |
195
- | `MediaPlayOutline` | Media play outline icon |
196
- | `MediaStopCircleFilled` | Media stop circle filled icon |
197
- | `MediaStopCircleOutline` | Media stop circle outline icon |
198
- | `MediaStopFilled` | Media stop filled icon |
199
- | `MediaStopOutline` | Media stop outline icon |
200
- | `MinusCircleFilled` | Minus circle filled icon |
201
- | `MinusCircle` | Minus circle icon |
202
- | `Minus` | Minus icon |
203
- | `MoneyBagOutline` | Money bag outline icon |
204
- | `MoneyBriefcaseFilled` | Money briefcase filled icon |
205
- | `MoneyBriefcaseOutline` | Money briefcase outline icon |
206
- | `NoEntryFilled` | No entry filled icon |
207
- | `NoEntryOutline` | No entry outline icon |
208
- | `NoEntry` | No entry icon |
209
- | `PaymentCardFilled` | Payment card filled icon |
210
- | `PaymentCardOutline` | Payment card outline icon |
211
- | `PhoneCallingFilled` | Phone calling filled icon |
212
- | `PhoneCallingOutline` | Phone calling outline icon |
213
- | `PhoneFilled` | Phone filled icon |
214
- | `PhoneOutline` | Phone outline icon |
215
- | `PinAddFilled` | Pin add filled icon |
216
- | `PinAddOutline` | Pin add outline icon |
217
- | `PinCircleFilled` | Pin circle filled icon |
218
- | `PinCircleOutline` | Pin circle outline icon |
219
- | `PinFilled` | Pin filled icon |
220
- | `PinOutline` | Pin outline icon |
221
- | `PinSubFilled` | Pin sub filled icon |
222
- | `PinSubOutline` | Pin sub outline icon |
223
- | `Pin` | Pin icon |
224
- | `PinterestFilled` | Pinterest filled icon |
225
- | `PinterestOutline` | Pinterest outline icon |
226
- | `ProfileFemaleOutline` | Profile female outline icon |
227
- | `ProfileGroupFilled` | Profile group filled icon |
228
- | `ProfileMaleFilled` | Profile male filled icon |
229
- | `ProfileMaleOutline` | Profile male outline icon |
230
- | `RedditFilled` | Reddit filled icon |
231
- | `RedditOutline` | Reddit outline icon |
232
- | `RedditRoundFilled` | Reddit round filled icon |
233
- | `RedditRoundOutline` | Reddit round outline icon |
234
- | `RupeeOutlined` | Rupee outline icon |
235
- | `RupeeSign` | Rupee sign icon |
236
- | `SaveFilled` | Save filled icon |
237
- | `SaveOutline` | Save outline icon |
238
- | `Search` | Search icon |
239
- | `SettingFilled` | Setting filled icon |
240
- | `SettingOutline` | Setting outline icon |
241
- | `ShareAllFilled` | Share all filled icon |
242
- | `ShareAllOutline` | Share all outline icon |
243
- | `ShareBoxOutline` | Share box outline icon |
244
- | `ShareFilled` | Share filled icon |
245
- | `ShareOutline` | Share outline icon |
246
- | `ShareThickFilled` | Share thick filled icon |
247
- | `ShieldCheckFilled` | Shield check filled icon |
248
- | `ShieldCheckOutline` | Shield check outline icon |
249
- | `ShieldCrossFilled` | Shield cross filled icon |
250
- | `ShieldCrossOutline` | Shield cross outline icon |
251
- | `ShieldFilled` | Shield filled icon |
252
- | `ShieldOutline` | Shield outline icon |
253
- | `ShieldWarningFilled` | Shield warning filled icon |
254
- | `ShieldWarningOutline` | Shield warning outline icon |
255
- | `SnapchatFilled` | Snapchat filled icon |
256
- | `SnapchatOutline` | Snapchat outline icon |
257
- | `SortBottomToTop` | Sort bottom to top icon |
258
- | `SortHorizontal` | Sort horizontal icon |
259
- | `SortTopToBottom` | Sort top to bottom icon |
260
- | `SortVertical` | Sort vertical icon |
261
- | `StarFilled` | Star filled icon |
262
- | `StarOutline` | Star outline icon |
263
- | `TelegramFilled` | Telegram filled icon |
264
- | `TelegramOutline` | Telegram outline icon |
265
- | `TelegramRoundFilled` | Telegram round filled icon |
266
- | `ThumbsDownFilled` | Thumbs down filled icon |
267
- | `ThumbsDownOutline` | Thumbs down outline icon |
268
- | `ThumbsUpFilled` | Thumbs up filled icon |
269
- | `ThumbsUpOutline` | Thumbs up outline icon |
270
- | `TiktokBox` | Tiktok box icon |
271
- | `TiktokThickFilled` | Tiktok thick filled icon |
272
- | `TiktokThinFilled` | Tiktok thin filled icon |
273
- | `TrashBigFilled` | Trash big filled icon |
274
- | `TrashBigOutline` | Trash big outline icon |
275
- | `TrashFilled` | Trash filled icon |
276
- | `TrashLinesFilled` | Trash lines filled icon |
277
- | `TrashLinesOutline` | Trash lines outline icon |
278
- | `TrashOutline` | Trash outline icon |
279
- | `UploadBoxFilled` | Upload box filled icon |
280
- | `UploadBoxOutline` | Upload box outline icon |
281
- | `Upload` | Upload icon |
282
- | `VolumeFilled` | Volume filled icon |
283
- | `VolumeMuteFilled` | Volume mute filled icon |
284
- | `VolumeMuteOutline` | Volume mute outline icon |
285
- | `VolumeOffFilled` | Volume off filled icon |
286
- | `VolumeOffOutline` | Volume off outline icon |
287
- | `VolumeOutline` | Volume outline icon |
288
- | `WalletFilled` | Wallet filled icon |
289
- | `WalletOutline` | Wallet outline icon |
290
- | `WarningCircleFilled` | Warning circle filled icon |
291
- | `WarningCircleOutline` | Warning circle outline icon |
292
- | `WarningSmall` | Warning small icon |
293
- | `WarningTriangleFilled` | Warning triangle filled icon |
294
- | `WarningTriangleOutline` | Warning triangle outline icon |
295
- | `Warning` | Warning icon |
296
- | `WhatsappFilled` | Whatsapp filled icon |
297
- | `WhatsappOutline` | Whatsapp outline icon |
298
- | `YoutubeFilled` | Youtube filled icon |
299
- | `YoutubeRoundFilled` | Youtube round filled icon |
300
- | `Youtube` | Youtube icon |
58
+ | Icons | Description |
59
+ | ---------------------------- | ---------------------------------- |
60
+ | `AddCircleFilled` | Add circle filled icon |
61
+ | `AddCircle` | Add circle icon |
62
+ | `Add` | Add icon |
63
+ | `ArrowDown` | Arrow down icon |
64
+ | `ArrowLeft` | Arrow left icon |
65
+ | `ArrowRight` | Arrow right icon |
66
+ | `ArrowUp` | Arrow up icon |
67
+ | `BagFilled` | Bag filled icon |
68
+ | `BagOutline` | Bag outline icon |
69
+ | `BellFilled` | Bell filled icon |
70
+ | `BellOffFilled` | Bell off filled icon |
71
+ | `BellOffOutline` | Bell off outline icon |
72
+ | `BellOutline` | Bell outline icon |
73
+ | `BookmarkFilled` | Bookmark filled icon |
74
+ | `BookmarkOutline` | Bookmark outline icon |
75
+ | `BoxCoveredFilled` | Box covered filled icon |
76
+ | `BoxCoveredOutline` | Box covered outline icon |
77
+ | `BoxFilled` | Box filled icon |
78
+ | `BoxOutline` | Box outline icon |
79
+ | `CalendarDays` | Calendar days icon |
80
+ | `CalendarLinesPen` | Calendar lines pen icon |
81
+ | `CartCheckFilled` | Cart check filled icon |
82
+ | `CartCheckOutline` | Cart check outline icon |
83
+ | `CartCrossFilled` | Cart cross filled icon |
84
+ | `CartCrossOutline` | Cart cross outline icon |
85
+ | `CartFilled` | Cart filled icon |
86
+ | `CartMinusFilled` | Cart minus filled icon |
87
+ | `CartMinusOutline` | Cart minus outline icon |
88
+ | `CartOutline` | Cart outline icon |
89
+ | `CartPlusFilled` | Cart plus filled icon |
90
+ | `CartPlusOutline` | Cart plus outline icon |
91
+ | `CheckDouble` | Check double icon |
92
+ | `Check` | Check icon |
93
+ | `ChevronDown` | Chevron down icon |
94
+ | `ChevronLeft` | Chevron left icon |
95
+ | `ChevronRight` | Chevron right icon |
96
+ | `ChevronUp` | Chevron up icon |
97
+ | `ClockCircleOutline` | Clock circle outline icon |
98
+ | `ClockSquareOutline` | Clock square outline icon |
99
+ | `CloseCircleFilled` | Close circle filled icon |
100
+ | `CloseCircleOutline` | Close circle outline icon |
101
+ | `Close` | Close icon |
102
+ | `CommentBubbleFilled` | Comment bubble filled icon |
103
+ | `CommentBubbleOutline` | Comment bubble outline icon |
104
+ | `CommentFilled` | Comment filled icon |
105
+ | `CommentLineFilled` | Comment line filled icon |
106
+ | `CommentLineOutline` | Comment line outline icon |
107
+ | `CommentOutline` | Comment outline icon |
108
+ | `ContactDetailsFilled` | Contact details filled icon |
109
+ | `ContactDetailsOutline` | Contact details outline icon |
110
+ | `DeliveryTruckFastFilled` | Delivery truck fast filled icon |
111
+ | `DeliveryTruckFastOutline` | Delivery truck fast outline icon |
112
+ | `DeliveryTruckLeftFilled` | Delivery truck left filled icon |
113
+ | `DeliveryTruckLeftOutline` | Delivery truck left outline icon |
114
+ | `DeliveryTruckRightFilled` | Delivery truck right filled icon |
115
+ | `DeliveryTruckRightOutline` | Delivery truck right outline icon |
116
+ | `DetailsOutline` | Details outline icon |
117
+ | `DiscordConversation` | Discord conversation icon |
118
+ | `DiscordFilled` | Discord filled icon |
119
+ | `DiscordOutline` | Discord outline icon |
120
+ | `DoorClosedFilled` | Door closed filled icon |
121
+ | `DoorClosedOutline` | Door closed outline icon |
122
+ | `DoorOpenFilled` | Door open filled icon |
123
+ | `DoorOpenOutline` | Door open outline icon |
124
+ | `DotsHorizontalFilled` | Dots horizontal filled icon |
125
+ | `DotsHorizontalOutline` | Dots horizontal outline icon |
126
+ | `DotsVerticalFilled` | Dots vertical filled icon |
127
+ | `DotsVerticalOutline` | Dots vertical outline icon |
128
+ | `DownloadBoxFilled` | Download box filled icon |
129
+ | `DownloadBoxOutline` | Download box outline icon |
130
+ | `Download` | Download icon |
131
+ | `EditBoxThick` | Edit box thick icon |
132
+ | `EditBoxThin` | Edit box thin icon |
133
+ | `EmailFilled` | Email filled icon |
134
+ | `EmailOutline` | Email outline icon |
135
+ | `ExitArrowInOutline` | Exit arrow in outline icon |
136
+ | `ExitArrowOutOutline` | Exit arrow out outline icon |
137
+ | `EyeClosed` | Eye closed icon |
138
+ | `EyeFilled` | Eye filled icon |
139
+ | `EyeOutline` | Eye outline icon |
140
+ | `FacebookFilled` | Facebook filled icon |
141
+ | `FacebookMessengerOutline` | Facebook messenger outline icon |
142
+ | `FacebookOutline` | Facebook outline icon |
143
+ | `FacebookRoundFilled` | Facebook round filled icon |
144
+ | `FilterList` | Filter list icon |
145
+ | `FilterThickFilled` | Filter thick filled icon |
146
+ | `FilterThickOutline` | Filter thick outline icon |
147
+ | `Filter` | Filter icon |
148
+ | `FullScreenArrowThick` | Full screen arrow thick icon |
149
+ | `FullScreenArrowThin` | Full screen arrow thin icon |
150
+ | `FullScreenFilled` | Full screen filled icon |
151
+ | `FullScreenOutline` | Full screen outline icon |
152
+ | `HamburgerMenu` | Hamburger menu icon |
153
+ | `HamburgerSpaced` | Hamburger spaced icon |
154
+ | `HeartFilled` | Heart filled icon |
155
+ | `HeartOutline` | Heart outline icon |
156
+ | `HelpCircleFilled` | Help circle filled icon |
157
+ | `HelpCircleOutline` | Help circle outline icon |
158
+ | `Help` | Help icon |
159
+ | `HomeFilled` | Home filled icon |
160
+ | `HomeOutline` | Home outline icon |
161
+ | `InfoCircleFilled` | Info circle filled icon |
162
+ | `InfoCircleOutline` | Info circle outline icon |
163
+ | `InfoSquareFilled` | Info square filled icon |
164
+ | `InfoSquareOutline` | Info square outline icon |
165
+ | `Info` | Info icon |
166
+ | `InstagramOuline` | Instagram ouline icon |
167
+ | `InstagramRoundFilled` | Instagram round filled icon |
168
+ | `KeyFilled` | Key filled icon |
169
+ | `KeyInSquareFilled` | Key in square filled icon |
170
+ | `KeyInSquareOutline` | Key in square outline icon |
171
+ | `KeyOutline` | Key outline icon |
172
+ | `KeySideSquareFilled` | Key side square filled icon |
173
+ | `KeySideSquareOutline` | Key side square outline icon |
174
+ | `KeySquareFilled` | Key square filled icon |
175
+ | `KeySquareOutline` | Key square outline icon |
176
+ | `Link` | Link icon |
177
+ | `LinkedinFilled` | Linkedin filled icon |
178
+ | `LinkedinOutline` | Linkedin outline icon |
179
+ | `LinkedinRoundFilled` | Linkedin round filled icon |
180
+ | `Loading` | Loading icon |
181
+ | `LocationArrowFilled` | Location arrow filled icon |
182
+ | `LocationArrowOutline` | Location arrow outline icon |
183
+ | `LocationFilled` | Location filled icon |
184
+ | `LocationOutline` | Location outline icon |
185
+ | `LockKeyholeOutline` | Lock keyhole outline icon |
186
+ | `LockKeyholeUnlockedOutline` | Lock keyhole unlocked outline icon |
187
+ | `LockKeyholeUnlocked` | Lock keyhole unlocked icon |
188
+ | `LockKeyhole` | Lock keyhole icon |
189
+ | `MediaPauseCircleFilled` | Media pause circle filled icon |
190
+ | `MediaPauseCircleOuline` | Media pause circle ouline icon |
191
+ | `MediaPauseFilled` | Media pause filled icon |
192
+ | `MediaPauseOutline` | Media pause outline icon |
193
+ | `MediaPlayCircleFilled` | Media play circle filled icon |
194
+ | `MediaPlayCircleOutline` | Media play circle outline icon |
195
+ | `MediaPlayFilled` | Media play filled icon |
196
+ | `MediaPlayOutline` | Media play outline icon |
197
+ | `MediaStopCircleFilled` | Media stop circle filled icon |
198
+ | `MediaStopCircleOutline` | Media stop circle outline icon |
199
+ | `MediaStopFilled` | Media stop filled icon |
200
+ | `MediaStopOutline` | Media stop outline icon |
201
+ | `MinusCircleFilled` | Minus circle filled icon |
202
+ | `MinusCircle` | Minus circle icon |
203
+ | `Minus` | Minus icon |
204
+ | `MoneyBagOutline` | Money bag outline icon |
205
+ | `MoneyBriefcaseFilled` | Money briefcase filled icon |
206
+ | `MoneyBriefcaseOutline` | Money briefcase outline icon |
207
+ | `NoEntryFilled` | No entry filled icon |
208
+ | `NoEntryOutline` | No entry outline icon |
209
+ | `NoEntry` | No entry icon |
210
+ | `PaymentCardFilled` | Payment card filled icon |
211
+ | `PaymentCardOutline` | Payment card outline icon |
212
+ | `PhoneCallingFilled` | Phone calling filled icon |
213
+ | `PhoneCallingOutline` | Phone calling outline icon |
214
+ | `PhoneFilled` | Phone filled icon |
215
+ | `PhoneOutline` | Phone outline icon |
216
+ | `PinAddFilled` | Pin add filled icon |
217
+ | `PinAddOutline` | Pin add outline icon |
218
+ | `PinCircleFilled` | Pin circle filled icon |
219
+ | `PinCircleOutline` | Pin circle outline icon |
220
+ | `PinFilled` | Pin filled icon |
221
+ | `PinOutline` | Pin outline icon |
222
+ | `PinSubFilled` | Pin sub filled icon |
223
+ | `PinSubOutline` | Pin sub outline icon |
224
+ | `Pin` | Pin icon |
225
+ | `PinterestFilled` | Pinterest filled icon |
226
+ | `PinterestOutline` | Pinterest outline icon |
227
+ | `ProfileFemaleOutline` | Profile female outline icon |
228
+ | `ProfileGroupFilled` | Profile group filled icon |
229
+ | `ProfileMaleFilled` | Profile male filled icon |
230
+ | `ProfileMaleOutline` | Profile male outline icon |
231
+ | `RedditFilled` | Reddit filled icon |
232
+ | `RedditOutline` | Reddit outline icon |
233
+ | `RedditRoundFilled` | Reddit round filled icon |
234
+ | `RedditRoundOutline` | Reddit round outline icon |
235
+ | `RupeeOutlined` | Rupee outline icon |
236
+ | `RupeeSign` | Rupee sign icon |
237
+ | `SaveFilled` | Save filled icon |
238
+ | `SaveOutline` | Save outline icon |
239
+ | `Search` | Search icon |
240
+ | `SettingFilled` | Setting filled icon |
241
+ | `SettingOutline` | Setting outline icon |
242
+ | `ShareAllFilled` | Share all filled icon |
243
+ | `ShareAllOutline` | Share all outline icon |
244
+ | `ShareBoxOutline` | Share box outline icon |
245
+ | `ShareFilled` | Share filled icon |
246
+ | `ShareOutline` | Share outline icon |
247
+ | `ShareThickFilled` | Share thick filled icon |
248
+ | `ShieldCheckFilled` | Shield check filled icon |
249
+ | `ShieldCheckOutline` | Shield check outline icon |
250
+ | `ShieldCrossFilled` | Shield cross filled icon |
251
+ | `ShieldCrossOutline` | Shield cross outline icon |
252
+ | `ShieldFilled` | Shield filled icon |
253
+ | `ShieldOutline` | Shield outline icon |
254
+ | `ShieldWarningFilled` | Shield warning filled icon |
255
+ | `ShieldWarningOutline` | Shield warning outline icon |
256
+ | `SnapchatFilled` | Snapchat filled icon |
257
+ | `SnapchatOutline` | Snapchat outline icon |
258
+ | `SortBottomToTop` | Sort bottom to top icon |
259
+ | `SortHorizontal` | Sort horizontal icon |
260
+ | `SortTopToBottom` | Sort top to bottom icon |
261
+ | `SortVertical` | Sort vertical icon |
262
+ | `StarFilled` | Star filled icon |
263
+ | `StarOutline` | Star outline icon |
264
+ | `TelegramFilled` | Telegram filled icon |
265
+ | `TelegramOutline` | Telegram outline icon |
266
+ | `TelegramRoundFilled` | Telegram round filled icon |
267
+ | `ThumbsDownFilled` | Thumbs down filled icon |
268
+ | `ThumbsDownOutline` | Thumbs down outline icon |
269
+ | `ThumbsUpFilled` | Thumbs up filled icon |
270
+ | `ThumbsUpOutline` | Thumbs up outline icon |
271
+ | `TiktokBox` | Tiktok box icon |
272
+ | `TiktokThickFilled` | Tiktok thick filled icon |
273
+ | `TiktokThinFilled` | Tiktok thin filled icon |
274
+ | `TrashBigFilled` | Trash big filled icon |
275
+ | `TrashBigOutline` | Trash big outline icon |
276
+ | `TrashFilled` | Trash filled icon |
277
+ | `TrashLinesFilled` | Trash lines filled icon |
278
+ | `TrashLinesOutline` | Trash lines outline icon |
279
+ | `TrashOutline` | Trash outline icon |
280
+ | `UploadBoxFilled` | Upload box filled icon |
281
+ | `UploadBoxOutline` | Upload box outline icon |
282
+ | `Upload` | Upload icon |
283
+ | `VolumeFilled` | Volume filled icon |
284
+ | `VolumeMuteFilled` | Volume mute filled icon |
285
+ | `VolumeMuteOutline` | Volume mute outline icon |
286
+ | `VolumeOffFilled` | Volume off filled icon |
287
+ | `VolumeOffOutline` | Volume off outline icon |
288
+ | `VolumeOutline` | Volume outline icon |
289
+ | `WalletFilled` | Wallet filled icon |
290
+ | `WalletOutline` | Wallet outline icon |
291
+ | `WarningCircleFilled` | Warning circle filled icon |
292
+ | `WarningCircleOutline` | Warning circle outline icon |
293
+ | `WarningSmall` | Warning small icon |
294
+ | `WarningTriangleFilled` | Warning triangle filled icon |
295
+ | `WarningTriangleOutline` | Warning triangle outline icon |
296
+ | `Warning` | Warning icon |
297
+ | `WhatsappFilled` | Whatsapp filled icon |
298
+ | `WhatsappOutline` | Whatsapp outline icon |
299
+ | `YoutubeFilled` | Youtube filled icon |
300
+ | `YoutubeRoundFilled` | Youtube round filled icon |
301
+ | `Youtube` | Youtube icon |
302
+
301
303
  ## 📦 Tokens
302
304
 
303
305
  | Types | Description |
package/components/OtpInput/OtpInput.js ADDED
@@ -0,0 +1,42 @@
1
+ import { j as D } from "../../_virtual/jsx-runtime.js";
2
+ import { useState as O, useRef as h, useEffect as w } from "react";
3
+ import { OTPWrapper as x } from "./styles.js";
4
+ import { renderNums as E } from "./helpers.js";
5
+ const A = ({ length: r = 6, value: o = "", onChange: i, onComplete: n }) => {
6
+ const [p, a] = O(Array(r).fill("")), c = h([]);
7
+ w(() => {
8
+ if (!o) return;
9
+ const s = String(o).replace(/\D/g, "").slice(0, r), t = s.split("");
10
+ for (; t.length < r; ) t.push("");
11
+ a(t), s.length === r && n?.(s);
12
+ }, [o, r, n]);
13
+ const f = (s) => {
14
+ a(s);
15
+ const t = s.join("");
16
+ i?.(t), t.length === r && n?.(t);
17
+ }, u = (s, t) => {
18
+ s = s.replace(/\D/g, "");
19
+ const e = [...p];
20
+ e[t] = s, f(e), s && t < r - 1 && c.current[t + 1].focus();
21
+ }, l = (s, t) => {
22
+ s.key === "Backspace" && !p[t] && t > 0 && c.current[t - 1].focus();
23
+ }, m = (s) => {
24
+ const t = s.clipboardData.getData("text").replace(/\D/g, "");
25
+ if (!t) return;
26
+ const e = Array(r).fill("");
27
+ t.slice(0, r).split("").forEach((y, j) => e[j] = y), f(e);
28
+ const d = Math.min(t.length - 1, r - 1);
29
+ c.current[d]?.focus();
30
+ };
31
+ return /* @__PURE__ */ D.jsx(
32
+ x,
33
+ {
34
+ style: { display: "flex", gap: "10px", justifyContent: "center" },
35
+ onPaste: m,
36
+ children: p.map(E({ inputsRef: c, handleChange: u, handleKeyDown: l }))
37
+ }
38
+ );
39
+ };
40
+ export {
41
+ A as default
42
+ };
package/components/OtpInput/helpers.js ADDED
@@ -0,0 +1,33 @@
1
+ import { j as m } from "../../_virtual/jsx-runtime.js";
2
+ import { Input as a } from "./styles.js";
3
+ const c = (e, t) => (o) => {
4
+ e(o.target.value, t);
5
+ }, p = (e, t) => (o) => e(o, t), g = ({ inputsRef: e, handleChange: t, handleKeyDown: o, digit: r, index: n }) => {
6
+ const u = (s) => e.current[n] = s;
7
+ return /* @__PURE__ */ m.jsx(
8
+ a,
9
+ {
10
+ ref: u,
11
+ maxLength: 1,
12
+ inputMode: "numeric",
13
+ autoComplete: "one-time-code",
14
+ value: r,
15
+ onChange: c(t, n),
16
+ onKeyDown: p(o, n)
17
+ },
18
+ `key-${n}`
19
+ );
20
+ }, j = ({ inputsRef: e, handleChange: t, handleKeyDown: o }) => (r, n) => /* @__PURE__ */ m.jsx(
21
+ g,
22
+ {
23
+ inputsRef: e,
24
+ handleChange: t,
25
+ handleKeyDown: o,
26
+ digit: r,
27
+ index: n
28
+ },
29
+ `otp-num-${n}`
30
+ );
31
+ export {
32
+ j as renderNums
33
+ };
package/components/OtpInput/index.js ADDED
@@ -0,0 +1,4 @@
1
+ import p from "./OtpInput.js";
2
+ export {
3
+ p as default
4
+ };
package/components/OtpInput/styles.js ADDED
@@ -0,0 +1,23 @@
1
+ import r from "../../node_modules/styled-components/dist/styled-components.browser.esm.js";
2
+ import e from "../../colors/grey.js";
3
+ const m = r.div`
4
+ display: flex;
5
+ align-items: center;
6
+ gap: 0.4rem;
7
+
8
+ @media screen and (max-width: 768px) {\
9
+ gap: 0.2rem;
10
+ }
11
+ `, o = r.input`
12
+ height: 2rem;
13
+ width: 2rem;
14
+ font-size: 1.2rem;
15
+ text-align: center;
16
+ color: ${e.m600};
17
+ border: 1px solid ${e.m800};
18
+ border-radius: 0.2rem;
19
+ `;
20
+ export {
21
+ o as Input,
22
+ m as OTPWrapper
23
+ };
package/index.js CHANGED
@@ -1,12 +1,14 @@
1
- import { default as t } from "./components/Pagination/Pagination.js";
1
+ import { default as a } from "./components/Pagination/Pagination.js";
2
2
  import { default as e } from "./components/Toast/Toast.js";
3
- import { default as s } from "./colors/index.js";
4
- import { default as u } from "./utils/index.js";
5
- import { default as m } from "./components/Icons/index.js";
3
+ import { default as s } from "./components/OtpInput/OtpInput.js";
4
+ import { default as p } from "./colors/index.js";
5
+ import { default as d } from "./utils/index.js";
6
+ import { default as x } from "./components/Icons/index.js";
6
7
  export {
7
- t as Pagination,
8
+ s as OtpInput,
9
+ a as Pagination,
8
10
  e as Toast,
9
- s as colors,
10
- m as icons,
11
- u as utils
11
+ p as colors,
12
+ x as icons,
13
+ d as utils
12
14
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "meticulous-ui",
3
- "version": "1.2.2",
3
+ "version": "1.2.4",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.js",
6
6
  "repository": {
@@ -32,6 +32,9 @@
32
32
  "icons",
33
33
  "components",
34
34
  "pagination",
35
+ "toasts",
36
+ "notification",
37
+ "otp",
35
38
  "colors",
36
39
  "shades",
37
40
  "utils",