@neoptocom/neopto-ui 0.9.5 → 0.9.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.
- package/dist/index.cjs +6 -2
- package/dist/index.js +6 -2
- package/package.json +1 -1
- package/src/components/Card.tsx +5 -1
- package/src/components/Modal.tsx +5 -1
package/dist/index.cjs
CHANGED
|
@@ -166,10 +166,12 @@ function Card({
|
|
|
166
166
|
transition: "background-color 0.3s ease, color 0.3s ease",
|
|
167
167
|
...style
|
|
168
168
|
};
|
|
169
|
+
const hasPadding = className && /\b(p-|px-|py-|pt-|pb-|pl-|pr-)\d/.test(className);
|
|
170
|
+
const cardClasses = `${!hasPadding ? "p-6" : ""} ${className || ""}`.trim();
|
|
169
171
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
170
172
|
"div",
|
|
171
173
|
{
|
|
172
|
-
className:
|
|
174
|
+
className: cardClasses,
|
|
173
175
|
style: mergedStyle,
|
|
174
176
|
...props,
|
|
175
177
|
children: [
|
|
@@ -299,6 +301,8 @@ function Modal({
|
|
|
299
301
|
return () => window.removeEventListener("keydown", onKey);
|
|
300
302
|
}, [open, onClose]);
|
|
301
303
|
if (!mounted) return null;
|
|
304
|
+
const hasMaxWidth = className?.includes("max-w-");
|
|
305
|
+
const modalClasses = `w-full ${!hasMaxWidth ? "max-w-lg" : ""} ${className || ""}`.trim();
|
|
302
306
|
const modal = /* @__PURE__ */ jsxRuntime.jsx("div", { className: isDark ? "dark" : "", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
303
307
|
BackgroundBlur,
|
|
304
308
|
{
|
|
@@ -308,7 +312,7 @@ function Modal({
|
|
|
308
312
|
children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
309
313
|
Card,
|
|
310
314
|
{
|
|
311
|
-
className:
|
|
315
|
+
className: modalClasses,
|
|
312
316
|
role: "dialog",
|
|
313
317
|
"aria-modal": "true",
|
|
314
318
|
"aria-labelledby": title ? "modal-title" : void 0,
|
package/dist/index.js
CHANGED
|
@@ -145,10 +145,12 @@ function Card({
|
|
|
145
145
|
transition: "background-color 0.3s ease, color 0.3s ease",
|
|
146
146
|
...style
|
|
147
147
|
};
|
|
148
|
+
const hasPadding = className && /\b(p-|px-|py-|pt-|pb-|pl-|pr-)\d/.test(className);
|
|
149
|
+
const cardClasses = `${!hasPadding ? "p-6" : ""} ${className || ""}`.trim();
|
|
148
150
|
return /* @__PURE__ */ jsxs(
|
|
149
151
|
"div",
|
|
150
152
|
{
|
|
151
|
-
className:
|
|
153
|
+
className: cardClasses,
|
|
152
154
|
style: mergedStyle,
|
|
153
155
|
...props,
|
|
154
156
|
children: [
|
|
@@ -278,6 +280,8 @@ function Modal({
|
|
|
278
280
|
return () => window.removeEventListener("keydown", onKey);
|
|
279
281
|
}, [open, onClose]);
|
|
280
282
|
if (!mounted) return null;
|
|
283
|
+
const hasMaxWidth = className?.includes("max-w-");
|
|
284
|
+
const modalClasses = `w-full ${!hasMaxWidth ? "max-w-lg" : ""} ${className || ""}`.trim();
|
|
281
285
|
const modal = /* @__PURE__ */ jsx("div", { className: isDark ? "dark" : "", children: /* @__PURE__ */ jsx(
|
|
282
286
|
BackgroundBlur,
|
|
283
287
|
{
|
|
@@ -287,7 +291,7 @@ function Modal({
|
|
|
287
291
|
children: /* @__PURE__ */ jsxs(
|
|
288
292
|
Card,
|
|
289
293
|
{
|
|
290
|
-
className:
|
|
294
|
+
className: modalClasses,
|
|
291
295
|
role: "dialog",
|
|
292
296
|
"aria-modal": "true",
|
|
293
297
|
"aria-labelledby": title ? "modal-title" : void 0,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@neoptocom/neopto-ui",
|
|
3
|
-
"version": "0.9.
|
|
3
|
+
"version": "0.9.6",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "A modern React component library built with Tailwind CSS v4 and TypeScript. Features dark mode, design tokens, and comprehensive Storybook documentation. Requires Tailwind v4+.",
|
|
6
6
|
"keywords": [
|
package/src/components/Card.tsx
CHANGED
|
@@ -29,9 +29,13 @@ export function Card({
|
|
|
29
29
|
...style,
|
|
30
30
|
};
|
|
31
31
|
|
|
32
|
+
// Smart class merging: only add default padding if not provided
|
|
33
|
+
const hasPadding = className && /\b(p-|px-|py-|pt-|pb-|pl-|pr-)\d/.test(className);
|
|
34
|
+
const cardClasses = `${!hasPadding ? "p-6" : ""} ${className || ""}`.trim();
|
|
35
|
+
|
|
32
36
|
return (
|
|
33
37
|
<div
|
|
34
|
-
className={
|
|
38
|
+
className={cardClasses}
|
|
35
39
|
style={mergedStyle}
|
|
36
40
|
{...props}
|
|
37
41
|
>
|
package/src/components/Modal.tsx
CHANGED
|
@@ -85,6 +85,10 @@ export function Modal({
|
|
|
85
85
|
|
|
86
86
|
if (!mounted) return null;
|
|
87
87
|
|
|
88
|
+
// Smart class merging: only add defaults if not provided
|
|
89
|
+
const hasMaxWidth = className?.includes("max-w-");
|
|
90
|
+
const modalClasses = `w-full ${!hasMaxWidth ? "max-w-lg" : ""} ${className || ""}`.trim();
|
|
91
|
+
|
|
88
92
|
const modal = (
|
|
89
93
|
<div className={isDark ? "dark" : ""}>
|
|
90
94
|
<BackgroundBlur
|
|
@@ -93,7 +97,7 @@ export function Modal({
|
|
|
93
97
|
zIndex={zIndex}
|
|
94
98
|
>
|
|
95
99
|
<Card
|
|
96
|
-
className={
|
|
100
|
+
className={modalClasses}
|
|
97
101
|
role="dialog"
|
|
98
102
|
aria-modal="true"
|
|
99
103
|
aria-labelledby={title ? "modal-title" : undefined}
|