meticulous-ui 3.6.4 → 3.6.5
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.
- package/README.md +40 -91
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,11 @@
|
|
|
1
1
|
# meticulous-ui
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Build production-ready React apps faster with components, hooks, utilities, icons, and design tokens — all in one package ✨
|
|
4
|
+
⚡ Tree-shakable
|
|
5
|
+
🎯 TypeScript ready
|
|
6
|
+
♿ Accessible (ARIA + Semantic HTML)
|
|
7
|
+
🎨 23 color palettes
|
|
8
|
+
🧩 Components + Hooks + Utils
|
|
4
9
|
|
|
5
10
|
[](https://www.npmjs.com/package/meticulous-ui)
|
|
6
11
|
[](https://www.npmjs.com/package/meticulous-ui)
|
|
@@ -25,6 +30,20 @@ yarn add meticulous-ui
|
|
|
25
30
|
npm install react react-dom styled-components
|
|
26
31
|
```
|
|
27
32
|
|
|
33
|
+
## Why Meticulous UI?
|
|
34
|
+
|
|
35
|
+
Unlike many UI libraries, meticulous-ui combines:
|
|
36
|
+
|
|
37
|
+
✅ Components
|
|
38
|
+
✅ Hooks
|
|
39
|
+
✅ Utilities
|
|
40
|
+
✅ Icons
|
|
41
|
+
✅ Tokens
|
|
42
|
+
✅ Tree-shaking
|
|
43
|
+
✅ Styled-components theming
|
|
44
|
+
|
|
45
|
+
One install instead of 5 packages.
|
|
46
|
+
|
|
28
47
|
## 🧩 Quick Start
|
|
29
48
|
|
|
30
49
|
```jsx
|
|
@@ -88,108 +107,38 @@ import blue from 'meticulous-ui/colors/blue';
|
|
|
88
107
|
|
|
89
108
|
## 📦 Icon Components
|
|
90
109
|
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
| Bells & Dots | `BellFilled`, `BellOutline`, `BellOffFilled`, `BellOffOutline`, `DotsHorizontalFilled`, `DotsHorizontalOutline`, `DotsVerticalFilled`, `DotsVerticalOutline` |
|
|
96
|
-
| Bookmarks & Reactions | `BookmarkFilled`, `BookmarkOutline`, `HeartFilled`, `HeartOutline`, `StarFilled`, `StarOutline`, `ThumbsUpFilled`, `ThumbsUpOutline`, `ThumbsDownFilled`, `ThumbsDownOutline` |
|
|
97
|
-
| Calendar & Clock | `CalendarDays`, `CalendarLinesPen`, `ClockCircleOutline`, `ClockSquareOutline` |
|
|
98
|
-
| Commerce | `BagFilled`, `BagOutline`, `CartFilled`, `CartOutline`, `CartCheckFilled`, `CartCheckOutline`, `CartCrossFilled`, `CartCrossOutline`, `CartMinusFilled`, `CartMinusOutline`, `CartPlusFilled`, `CartPlusOutline`, `PaymentCardFilled`, `PaymentCardOutline`, `WalletFilled`, `WalletOutline`, `MoneyBagOutline`, `MoneyBriefcaseFilled`, `MoneyBriefcaseOutline`, `RupeeOutlined`, `RupeeSign` |
|
|
99
|
-
| Communication | `CommentFilled`, `CommentOutline`, `CommentBubbleFilled`, `CommentBubbleOutline`, `CommentLineFilled`, `CommentLineOutline`, `EmailFilled`, `EmailOutline`, `PhoneFilled`, `PhoneOutline`, `PhoneCallingFilled`, `PhoneCallingOutline`, `ContactDetailsFilled`, `ContactDetailsOutline` |
|
|
100
|
-
| Delivery & Boxes | `BoxFilled`, `BoxOutline`, `BoxCoveredFilled`, `BoxCoveredOutline`, `DeliveryTruckFastFilled`, `DeliveryTruckFastOutline`, `DeliveryTruckLeftFilled`, `DeliveryTruckLeftOutline`, `DeliveryTruckRightFilled`, `DeliveryTruckRightOutline` |
|
|
101
|
-
| Doors & Exit | `DoorClosedFilled`, `DoorClosedOutline`, `DoorOpenFilled`, `DoorOpenOutline`, `ExitArrowInOutline`, `ExitArrowOutOutline` |
|
|
102
|
-
| Edit & Files | `EditBoxThick`, `EditBoxThin`, `SaveFilled`, `SaveOutline`, `Download`, `DownloadBoxFilled`, `DownloadBoxOutline`, `Upload`, `UploadBoxFilled`, `UploadBoxOutline` |
|
|
103
|
-
| Eye & Fullscreen | `EyeClosed`, `EyeFilled`, `EyeOutline`, `FullScreenFilled`, `FullScreenOutline`, `FullScreenArrowThick`, `FullScreenArrowThin` |
|
|
104
|
-
| Filter, Sort & Menu | `Filter`, `FilterList`, `FilterThickFilled`, `FilterThickOutline`, `SortBottomToTop`, `SortTopToBottom`, `SortHorizontal`, `SortVertical`, `HamburgerMenu`, `HamburgerSpaced`, `SettingFilled`, `SettingOutline` |
|
|
105
|
-
| Home & Location | `HomeFilled`, `HomeOutline`, `LocationFilled`, `LocationOutline`, `LocationArrowFilled`, `LocationArrowOutline`, `Pin`, `PinFilled`, `PinOutline`, `PinAddFilled`, `PinAddOutline`, `PinCircleFilled`, `PinCircleOutline`, `PinSubFilled`, `PinSubOutline` |
|
|
106
|
-
| Info & Help | `Info`, `InfoCircleFilled`, `InfoCircleOutline`, `InfoSquareFilled`, `InfoSquareOutline`, `Help`, `HelpCircleFilled`, `HelpCircleOutline`, `DetailsOutline` |
|
|
107
|
-
| Keys & Locks | `KeyFilled`, `KeyOutline`, `KeyInSquareFilled`, `KeyInSquareOutline`, `KeySideSquareFilled`, `KeySideSquareOutline`, `KeySquareFilled`, `KeySquareOutline`, `LockKeyhole`, `LockKeyholeOutline`, `LockKeyholeUnlocked`, `LockKeyholeUnlockedOutline` |
|
|
108
|
-
| Media & Volume | `MediaPlayFilled`, `MediaPlayOutline`, `MediaPlayCircleFilled`, `MediaPlayCircleOutline`, `MediaPauseFilled`, `MediaPauseOutline`, `MediaPauseCircleFilled`, `MediaPauseCircleOuline`, `MediaStopFilled`, `MediaStopOutline`, `MediaStopCircleFilled`, `MediaStopCircleOutline`, `VolumeFilled`, `VolumeOutline`, `VolumeMuteFilled`, `VolumeMuteOutline`, `VolumeOffFilled`, `VolumeOffOutline` |
|
|
109
|
-
| Profile | `ProfileMaleFilled`, `ProfileMaleOutline`, `ProfileFemaleOutline`, `ProfileGroupFilled` |
|
|
110
|
-
| Security & Shield | `ShieldFilled`, `ShieldOutline`, `ShieldCheckFilled`, `ShieldCheckOutline`, `ShieldCrossFilled`, `ShieldCrossOutline`, `ShieldWarningFilled`, `ShieldWarningOutline`, `NoEntry`, `NoEntryFilled`, `NoEntryOutline` |
|
|
111
|
-
| Share | `ShareFilled`, `ShareOutline`, `ShareAllFilled`, `ShareAllOutline`, `ShareBoxOutline`, `ShareThickFilled` |
|
|
112
|
-
| Social Media | `DiscordConversation`, `DiscordFilled`, `DiscordOutline`, `FacebookFilled`, `FacebookOutline`, `FacebookMessengerOutline`, `FacebookRoundFilled`, `InstagramOuline`, `InstagramRoundFilled`, `LinkedinFilled`, `LinkedinOutline`, `LinkedinRoundFilled`, `PinterestFilled`, `PinterestOutline`, `RedditFilled`, `RedditOutline`, `RedditRoundFilled`, `RedditRoundOutline`, `SnapchatFilled`, `SnapchatOutline`, `TelegramFilled`, `TelegramOutline`, `TelegramRoundFilled`, `TiktokBox`, `TiktokThickFilled`, `TiktokThinFilled`, `WhatsappFilled`, `WhatsappOutline`, `Youtube`, `YoutubeFilled`, `YoutubeRoundFilled` |
|
|
113
|
-
| Trash | `TrashFilled`, `TrashOutline`, `TrashBigFilled`, `TrashBigOutline`, `TrashLinesFilled`, `TrashLinesOutline` |
|
|
114
|
-
| Warnings & Errors | `Warning`, `WarningSmall`, `WarningCircleFilled`, `WarningCircleOutline`, `WarningTriangleFilled`, `WarningTriangleOutline` |
|
|
110
|
+
100+ modern SVG icons:
|
|
111
|
+
Arrows, Commerce, Social, Media, Security, UI controls...
|
|
112
|
+
|
|
113
|
+
See full icon gallery → [Demo site](https://meticulous-ui.vercel.app/?path=/story/tokens-icons--default)
|
|
115
114
|
|
|
116
115
|
## 📦 Tokens
|
|
117
116
|
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
| Colors | Shades |
|
|
123
|
-
| ------------ | --------------------------------------------------------------------------------- |
|
|
124
|
-
| `amber` | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900, a100, a200, a400, a700 |
|
|
125
|
-
| `black` | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900 |
|
|
126
|
-
| `blue` | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900, a100, a200, a400, a700 |
|
|
127
|
-
| `blueGray` | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900 |
|
|
128
|
-
| `brown` | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900 |
|
|
129
|
-
| `cider` | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900 |
|
|
130
|
-
| `cyan` | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900, a100, a200, a400, a700 |
|
|
131
|
-
| `deepOrange` | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900, a100, a200, a400, a700 |
|
|
132
|
-
| `deepPurple` | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900, a100, a200, a400, a700 |
|
|
133
|
-
| `green` | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900, a100, a200, a400, a700 |
|
|
134
|
-
| `grey` | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900 |
|
|
135
|
-
| `indigo` | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900, a100, a200, a400, a700 |
|
|
136
|
-
| `lightBlue` | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900, a100, a200, a400, a700 |
|
|
137
|
-
| `lightGreen` | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900, a100, a200, a400, a700 |
|
|
138
|
-
| `lime` | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900, a100, a200, a400, a700 |
|
|
139
|
-
| `orange` | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900, a100, a200, a400, a700 |
|
|
140
|
-
| `pink` | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900, a100, a200, a400, a700 |
|
|
141
|
-
| `purple` | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900, a100, a200, a400, a700 |
|
|
142
|
-
| `red` | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900, a100, a200, a400, a700 |
|
|
143
|
-
| `teal` | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900, a100, a200, a400, a700 |
|
|
144
|
-
| `violet` | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900, a100, a200, a400, a700 |
|
|
145
|
-
| `white` | #FFFFFF |
|
|
146
|
-
| `yellow` | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900, a100, a200, a400, a700 |
|
|
117
|
+
At least 10 shades of 23 colors:
|
|
118
|
+
blue, red, green, grey, cider, amber...
|
|
119
|
+
|
|
120
|
+
See full color gallery → [Demo site](https://meticulous-ui.vercel.app/?path=/story/tokens-colors--default)
|
|
147
121
|
|
|
148
122
|
## 📦 Utils
|
|
149
123
|
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
| **Date-Time** | `formatDate`, `formatTime`, `addDays`, `differenceInDays`, `isToday`, `isPast`, `timeAgo`, `getGreetingByTime`, `countdown`, |
|
|
155
|
-
| **Data** | `deepClone`, `mergeDeep`, `pick`, `omit`, `isEmpty`, `isEqual`, `hasEqualProps`, `isNonEmptyArray`, `flattenObject`, `groupBy`, `keyBy`, `uniqueBy`, `sortBy`, `chunk`, `compose`, |
|
|
156
|
-
| **Validation** | `isEmail`, `isPhone`, `isURL`, `isPasswordStrong`, `isPAN`, `isAadhaar`, `isGST`, `isRequired`, `minLength`, `maxLength`, |
|
|
157
|
-
| **Device** | `isMobile`, `isIOS`, `isAndroid`, `isSafari`, `isDarkMode`, `isOnline`, `copyToClipboard`, `downloadFile`, `openInNewTab`, `getScreenSize`, |
|
|
158
|
-
| **Storage** | `setLocalStorage`, `getLocalStorage`, `removeLocalStorage`, `setSessionStorage`, `getSessionStorage`, `clearStorage`, |
|
|
159
|
-
| **Routing** | `getQueryParams`, `setQueryParam`, `removeQueryParam`, `buildURL`, `redirectTo`, `getCurrentPath`, `isActiveRoute`, |
|
|
160
|
-
| **UI** | `scrollToTop`, `scrollToElement`, `lockBodyScroll`, `unlockBodyScroll`, `toggleFullscreen`, `focusElement`, `detectOutsideClick`, `measureElement`, |
|
|
161
|
-
| **Performance** | `debounce`, `throttle`, `memoize`, `lazyLoadComponent`, `requestIdleTask`, `rafThrottle`, |
|
|
162
|
-
| **Async** | `retry`, `sleep`, `withTimeout`, `parallel`, `sequential`, `safeAsync`, `cancelablePromise` |
|
|
163
|
-
| **Accessibility** | `announceToScreenReader`, `trapFocus`, `generateAriaId`, `handleKeyboardNavigation` |
|
|
164
|
-
| **Error Handling** | `logError`, `captureException`, `safeJSONParse`, `safeJSONStringify`, `fallback` |
|
|
165
|
-
| **Auth** | `isAuthenticated`, `getToken`, `setToken`, `removeToken`, `decodeJWT`, `hasPermission` |
|
|
166
|
-
| **Feature Flags** | `isFeatureEnabled`, `getVariant` |
|
|
167
|
-
| **Enterprise** | `trackEvent`, `trackPageView`, `measurePerformance`, `featureGate`, `permissionGuard`, `auditLog`, `logInfo`, `logWarn`, `captureException` |
|
|
168
|
-
| **Filter** | `fuzzySearch`, `filterByKey`, `multiSort`, `paginate` |
|
|
169
|
-
| **Animation** | `fadeIn`, `fadeOut`, `smoothScroll`, `waitForTransitionEnd` |
|
|
170
|
-
| **Function** | `once`, `noop`, `identity`, `pipe`, `singleton`, `createPubSub`, `deepFreeze` |
|
|
124
|
+
Util functions of 19 categories are present:
|
|
125
|
+
String, Number, Object, Validation, UI...
|
|
126
|
+
|
|
127
|
+
See full util gallery → [Demo site](https://meticulous-ui.vercel.app/?path=/story/utilities-api-utilities--retry)
|
|
171
128
|
|
|
172
129
|
## 📦 React Helper Functions
|
|
173
130
|
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
| `lazyImport` | Extends `React.lazy` to work with named exports, not just default exports |
|
|
179
|
-
| `withErrorBoundary` | HOC wrapping a component in an error boundary with a configurable fallback |
|
|
180
|
-
| `withSuspense` | HOC wrapping a component in `<Suspense>` with a co-located fallback UI |
|
|
181
|
-
| `memoCompare` | Typed wrapper around `React.memo` with a custom equality comparator |
|
|
182
|
-
| `createPortalNode` | Creates and appends a DOM node to `document.body` for use as a portal container |
|
|
131
|
+
There are a few react helper functions and not custom hooks like:
|
|
132
|
+
lazyImport, composeProviders, withSuspense, memoCompare...
|
|
133
|
+
|
|
134
|
+
See all react helper functions → [Demo site](https://meticulous-ui.vercel.app/?path=/story/react-utilities-react-helper-functions)
|
|
183
135
|
|
|
184
136
|
## 📦 Hooks
|
|
185
137
|
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
| **DOM/Browser** | `useEventListener`, `useIntersectionObserver`, `useMediaQuery`, `useOutsideClick`, `useWindowSize`, `useOnlineStatus` |
|
|
191
|
-
| **Storage** | `useLocalStorage`, `useSessionStorage` |
|
|
192
|
-
| **Utility** | `useCopyToClipboard` |
|
|
138
|
+
There are a few custom hooks based on 5 categories like:
|
|
139
|
+
State, Lifecycle, DOM/Browser, Storage & Utility
|
|
140
|
+
|
|
141
|
+
Check all custom hooks here: [Demo site](https://meticulous-ui.vercel.app/?path=/story/hooks-custom-hooks)
|
|
193
142
|
|
|
194
143
|
## 🌱 Features
|
|
195
144
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "meticulous-ui",
|
|
3
|
-
"version": "3.6.
|
|
3
|
+
"version": "3.6.5",
|
|
4
4
|
"license": "ISC",
|
|
5
5
|
"description": "A comprehensive React UI component library with a wide range of customizable components, icons, colors, and utilities for building modern web applications.",
|
|
6
6
|
"types": "./index.d.ts",
|