meticulous-ui 3.6.4 → 3.6.6

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/README.md +71 -118
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,6 +1,11 @@
1
1
  # meticulous-ui
2
2
 
3
- A lightweight, modern React component library, following Semantic HTML & ARIA, designed for elegance and precision ✨
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
  [![npm version](https://img.shields.io/npm/v/meticulous-ui)](https://www.npmjs.com/package/meticulous-ui)
6
11
  [![npm downloads](https://img.shields.io/npm/dm/meticulous-ui)](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
@@ -58,138 +77,72 @@ import blue from 'meticulous-ui/colors/blue';
58
77
 
59
78
  ## 📦 Components
60
79
 
61
- | Component | Description |
62
- | ---------------- | ---------------------------------------------------------------------------------------------------------------- |
63
- | `Pagination` | Fully responsive pagination component |
64
- | `Toast` | Push 4 types of notifications on screen |
65
- | `Timer` | Renders analog / digital clock with alarm |
66
- | `OtpInput` | Gives inputs to enter and edit OTP |
67
- | `VideoPlayer` | Renders video with keyboard shortcuts |
68
- | `Image` | Renders image with shimmer, lower resolution |
69
- | `Input` | Renders input box to let user enter input |
70
- | `Checkbox` | Renders checkbox to let user give boolean value |
71
- | `RadioGroup` | Renders radio options in a group to let user select |
72
- | `FileUploader` | Renders a button type input from where user can upload |
73
- | `Textarea` | Renders textarea box to let user enter description |
74
- | `Dropdown` | Renders dropdown to select from options |
75
- | `Selectbox` | Renders selectbox to select multiple values from options |
76
- | `Spinner` | Renders a spinner to show the loading state |
77
- | `Loader` | Renders a loader with dots to show the loading state |
78
- | `PageLoader` | Renders a loader with line at the top of page |
79
- | `Button` | Renders a button to click & take an action |
80
- | `Shimmer` | Animated skeleton loading placeholder |
81
- | `Carousel` | Carousel providing slider between components displaying slides |
82
- | `Modal` | Accessible dialog overlay with title, body, footer, Escape/overlay-click dismissal, and mobile bottom-sheet mode |
83
- | `DatePicker` | Calendar-based date picker with month/year navigation |
84
- | `Headings` | Semantic heading components: `H1`–`H6` |
85
- | `P` | Styled paragraph component |
86
- | `ToastContainer` | Renders the container that displays active Toast notifications |
87
- | `RootComponent` | This is the required wrapper for any app that uses meticulous-ui |
80
+ Production-ready React components for forms, feedback, layout, media, navigation, and interactions.
81
+
82
+ ### Core UI
83
+
84
+ `Button` · `Input` · `Textarea` · `Checkbox` · `RadioGroup` · `Dropdown` · `Selectbox`
85
+
86
+ ### Feedback & Loading
87
+
88
+ `Toast` · `ToastContainer` · `Spinner` · `Loader` · `PageLoader` · `Shimmer`
89
+
90
+ ### Overlays & Navigation
91
+
92
+ `Modal` · `Pagination` · `Carousel`
93
+
94
+ ### Forms & Productivity
95
+
96
+ `OtpInput` · `FileUploader` · `DatePicker`
97
+
98
+ ### Media
99
+
100
+ `Image` · `VideoPlayer`
101
+
102
+ ### Typography
103
+
104
+ `Headings` (`H1`–`H6`) · `P`
105
+
106
+ ### Utility Components
107
+
108
+ `Timer` · `RootComponent`
109
+
110
+ 👉 Explore full docs and live examples on the [demo site](https://meticulous-ui.vercel.app/).
88
111
 
89
112
  ## 📦 Icon Components
90
113
 
91
- | Group | Icons |
92
- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
93
- | Arrows & Chevrons | `ArrowDown`, `ArrowLeft`, `ArrowRight`, `ArrowUp`, `ChevronDown`, `ChevronLeft`, `ChevronRight`, `ChevronUp` |
94
- | Actions | `Add`, `AddCircle`, `AddCircleFilled`, `Minus`, `MinusCircle`, `MinusCircleFilled`, `Close`, `CloseCircleFilled`, `CloseCircleOutline`, `Check`, `CheckDouble`, `Link`, `Search`, `Loading` |
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` |
114
+ 100+ modern SVG icons:
115
+ Arrows, Commerce, Social, Media, Security, UI controls...
116
+
117
+ See full icon gallery → [Demo site](https://meticulous-ui.vercel.app/?path=/story/tokens-icons--default)
115
118
 
116
119
  ## 📦 Tokens
117
120
 
118
- | Types | Description |
119
- | -------- | ------------------------------- |
120
- | `Colors` | At least 10 shades of 23 colors |
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 |
121
+ At least 10 shades of 23 colors:
122
+ blue, red, green, grey, cider, amber...
123
+
124
+ See full color gallery → [Demo site](https://meticulous-ui.vercel.app/?path=/story/tokens-colors--default)
147
125
 
148
126
  ## 📦 Utils
149
127
 
150
- | Category | Functions |
151
- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
152
- | **String** | `capFirstLetter`, `capitalize`, `titleCase`, `camelCase`, `snakeCase`, `kebabCase`, `slugify`, `truncate`, `removeExtraSpaces`, `maskEmail`, `maskPhone`, `generateInitials`, |
153
- | **Number** | `clamp`, `formatCurrency`, `formatNumber`, `formatCompactNumber`, `percentage`, `randomInt`, `randomBetween`, `randomValue`, `roundTo`, |
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` |
128
+ Util functions of 19 categories are present:
129
+ String, Number, Object, Validation, UI...
130
+
131
+ See full util gallery → [Demo site](https://meticulous-ui.vercel.app/?path=/story/utilities-api-utilities--retry)
171
132
 
172
133
  ## 📦 React Helper Functions
173
134
 
174
- | Function | Description |
175
- | ------------------- | ---------------------------------------------------------------------------------- |
176
- | `createContextHook` | Creates a React context + typed hook pair; throws if consumed outside its Provider |
177
- | `composeProviders` | Merges N provider components into one wrapper, eliminating the provider pyramid |
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 |
135
+ There are a few react helper functions and not custom hooks like:
136
+ lazyImport, composeProviders, withSuspense, memoCompare...
137
+
138
+ See all react helper functions → [Demo site](https://meticulous-ui.vercel.app/?path=/story/react-utilities-react-helper-functions)
183
139
 
184
140
  ## 📦 Hooks
185
141
 
186
- | Category | Hooks |
187
- | --------------- | --------------------------------------------------------------------------------------------------------------------- |
188
- | **State** | `usePrevious`, `useDebounce`, `useThrottle`, `useToggle` |
189
- | **Lifecycle** | `useIsMounted`, `useUnmount`, `useFirstRender`, `useTimeout`, `useInterval` |
190
- | **DOM/Browser** | `useEventListener`, `useIntersectionObserver`, `useMediaQuery`, `useOutsideClick`, `useWindowSize`, `useOnlineStatus` |
191
- | **Storage** | `useLocalStorage`, `useSessionStorage` |
192
- | **Utility** | `useCopyToClipboard` |
142
+ There are a few custom hooks based on 5 categories like:
143
+ State, Lifecycle, DOM/Browser, Storage & Utility
144
+
145
+ Check all custom hooks here: [Demo site](https://meticulous-ui.vercel.app/?path=/story/hooks-custom-hooks)
193
146
 
194
147
  ## 🌱 Features
195
148
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "meticulous-ui",
3
- "version": "3.6.4",
3
+ "version": "3.6.6",
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",