meticulous-ui 3.6.3 → 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
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
|
|
|
@@ -1,92 +1,91 @@
|
|
|
1
|
-
import { jsxs as
|
|
1
|
+
import { jsxs as F, jsx as o } from "react/jsx-runtime";
|
|
2
2
|
import { useState as J, useRef as K } from "react";
|
|
3
3
|
import { Wrapper as M, TextareaBox as Q, Parent as U, Label as V, HelperText as X } from "./styles.js";
|
|
4
4
|
import { LeftIconWrapper as Y, RightIconWrapper as Z } from "../Input/styles.js";
|
|
5
|
-
import { getColor as _, getIcon as
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
const
|
|
5
|
+
import { getColor as _, getIcon as v } from "./helpers.js";
|
|
6
|
+
import tt from "../../../colors/white.js";
|
|
7
|
+
import ot from "../../../colors/grey.js";
|
|
8
|
+
import w from "./SvgIcon.js";
|
|
9
|
+
const dt = ({
|
|
10
10
|
label: s,
|
|
11
|
-
onChange:
|
|
12
|
-
value:
|
|
13
|
-
type:
|
|
14
|
-
hasError:
|
|
15
|
-
name:
|
|
16
|
-
color:
|
|
11
|
+
onChange: C,
|
|
12
|
+
value: r,
|
|
13
|
+
type: b,
|
|
14
|
+
hasError: B,
|
|
15
|
+
name: u = "textarea",
|
|
16
|
+
color: H = "blue",
|
|
17
17
|
helperText: c = "",
|
|
18
|
-
background:
|
|
19
|
-
outerBackground:
|
|
20
|
-
isDynamic:
|
|
21
|
-
isResizeNone:
|
|
22
|
-
rows:
|
|
23
|
-
cols:
|
|
24
|
-
leftIcon:
|
|
25
|
-
rightIcon:
|
|
26
|
-
placeholder:
|
|
27
|
-
...
|
|
18
|
+
background: g = "transparent",
|
|
19
|
+
outerBackground: S = tt,
|
|
20
|
+
isDynamic: m,
|
|
21
|
+
isResizeNone: j,
|
|
22
|
+
rows: z = "2",
|
|
23
|
+
cols: L = "20",
|
|
24
|
+
leftIcon: W,
|
|
25
|
+
rightIcon: P,
|
|
26
|
+
placeholder: i,
|
|
27
|
+
...T
|
|
28
28
|
}) => {
|
|
29
|
-
const [
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
n.style.height = `${G}px`;
|
|
36
|
-
}
|
|
29
|
+
const [e, $] = J(!1), a = _(H), h = K(null), k = (t) => {
|
|
30
|
+
t.style.height = "";
|
|
31
|
+
const R = t.scrollHeight - t.clientHeight;
|
|
32
|
+
if (R > 0) {
|
|
33
|
+
const G = parseFloat(window.getComputedStyle(t).height);
|
|
34
|
+
t.style.height = `${G + R}px`;
|
|
37
35
|
}
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
36
|
+
}, A = () => $(!0), E = () => $(!1), N = (t) => {
|
|
37
|
+
m && h.current && k(h.current), C(t);
|
|
38
|
+
}, I = { color: ot.m500, size: 20 }, d = v(W), f = v(P), l = !!d, x = !!f, n = B, O = m, q = g, D = { rows: z }, p = `textarea-${u}`, y = c ? `${p}-helper` : void 0;
|
|
39
|
+
return /* @__PURE__ */ F(M, { children: [
|
|
40
|
+
/* @__PURE__ */ o(
|
|
42
41
|
Q,
|
|
43
42
|
{
|
|
44
|
-
type:
|
|
45
|
-
name:
|
|
46
|
-
$hasError:
|
|
47
|
-
value:
|
|
48
|
-
$isFocused:
|
|
49
|
-
$shade:
|
|
50
|
-
$isDynamic:
|
|
51
|
-
$background:
|
|
52
|
-
cols:
|
|
53
|
-
$hasLeftIcon:
|
|
43
|
+
type: b,
|
|
44
|
+
name: u,
|
|
45
|
+
$hasError: n,
|
|
46
|
+
value: r,
|
|
47
|
+
$isFocused: e,
|
|
48
|
+
$shade: a,
|
|
49
|
+
$isDynamic: O,
|
|
50
|
+
$background: q,
|
|
51
|
+
cols: L,
|
|
52
|
+
$hasLeftIcon: l,
|
|
54
53
|
$hasRightIcon: x,
|
|
55
|
-
$isResizeNone:
|
|
56
|
-
...
|
|
57
|
-
id:
|
|
58
|
-
"aria-invalid":
|
|
54
|
+
$isResizeNone: j,
|
|
55
|
+
...D,
|
|
56
|
+
id: p,
|
|
57
|
+
"aria-invalid": n ? !0 : void 0,
|
|
59
58
|
"aria-describedby": y,
|
|
60
|
-
ref:
|
|
61
|
-
onFocus:
|
|
62
|
-
onBlur:
|
|
63
|
-
onChange:
|
|
64
|
-
...
|
|
59
|
+
ref: h,
|
|
60
|
+
onFocus: A,
|
|
61
|
+
onBlur: E,
|
|
62
|
+
onChange: N,
|
|
63
|
+
...T
|
|
65
64
|
}
|
|
66
65
|
),
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
/* @__PURE__ */
|
|
70
|
-
(s ||
|
|
66
|
+
d && /* @__PURE__ */ o(Y, { "aria-hidden": "true", style: { top: "1.2rem", transform: "none" }, children: /* @__PURE__ */ o(w, { svgIcon: d, iconStyles: I }) }),
|
|
67
|
+
f && /* @__PURE__ */ o(Z, { "aria-hidden": "true", style: { top: "1.2rem", transform: "none" }, children: /* @__PURE__ */ o(w, { svgIcon: f, iconStyles: I }) }),
|
|
68
|
+
/* @__PURE__ */ F(U, { children: [
|
|
69
|
+
(s || i && !r) && /* @__PURE__ */ o(
|
|
71
70
|
V,
|
|
72
71
|
{
|
|
73
72
|
as: "label",
|
|
74
|
-
htmlFor:
|
|
75
|
-
$hasError:
|
|
76
|
-
$isFocused:
|
|
77
|
-
$shade:
|
|
78
|
-
$value:
|
|
79
|
-
$outerBackground:
|
|
80
|
-
$hasLeftIcon:
|
|
73
|
+
htmlFor: p,
|
|
74
|
+
$hasError: n,
|
|
75
|
+
$isFocused: e,
|
|
76
|
+
$shade: a,
|
|
77
|
+
$value: r,
|
|
78
|
+
$outerBackground: e || r ? S : g,
|
|
79
|
+
$hasLeftIcon: l,
|
|
81
80
|
$hasRightIcon: x,
|
|
82
|
-
$onlyPh:
|
|
83
|
-
children: s ||
|
|
81
|
+
$onlyPh: i && !s,
|
|
82
|
+
children: s || i
|
|
84
83
|
}
|
|
85
84
|
),
|
|
86
|
-
c && /* @__PURE__ */
|
|
85
|
+
c && /* @__PURE__ */ o(X, { id: y, $hasError: n, $isFocused: e, $shade: a, $hasLeftIcon: l, children: c })
|
|
87
86
|
] })
|
|
88
87
|
] });
|
|
89
88
|
};
|
|
90
89
|
export {
|
|
91
|
-
|
|
90
|
+
dt as default
|
|
92
91
|
};
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import o, { css as r } from "styled-components";
|
|
2
2
|
import { black as a } from "../../../colors/black.js";
|
|
3
3
|
import l from "../../../colors/grey.js";
|
|
4
|
-
import
|
|
4
|
+
import m from "../../../colors/red.js";
|
|
5
5
|
import { getCssShade as i } from "./helpers.js";
|
|
6
6
|
const b = o.textarea`
|
|
7
7
|
border-radius: 0.64rem;
|
|
8
8
|
font-size: 2.24rem;
|
|
9
|
-
border: 2px solid ${({ $hasError: e }) => e ?
|
|
9
|
+
border: 2px solid ${({ $hasError: e }) => e ? m.m400 : a.m200};
|
|
10
10
|
padding: 0.96rem;
|
|
11
11
|
font-weight: 400;
|
|
12
12
|
transition: border-color 0.3s ease;
|
|
@@ -20,8 +20,6 @@ const b = o.textarea`
|
|
|
20
20
|
|
|
21
21
|
${({ $isDynamic: e }) => e && r`
|
|
22
22
|
resize: none;
|
|
23
|
-
display: block;
|
|
24
|
-
overflow: hidden;
|
|
25
23
|
`}
|
|
26
24
|
|
|
27
25
|
&:-webkit-autofill,
|
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",
|