framepexls-ui-lib 0.1.32 → 0.2.0
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/Checkbox.d.mts +1 -1
- package/dist/Checkbox.d.ts +1 -1
- package/dist/Dialog.js +56 -96
- package/dist/Dialog.mjs +57 -97
- package/package.json +15 -15
package/dist/Checkbox.d.mts
CHANGED
|
@@ -11,7 +11,7 @@ type CheckboxProps = Omit<React__default.InputHTMLAttributes<HTMLInputElement>,
|
|
|
11
11
|
className?: string;
|
|
12
12
|
inputClassName?: string;
|
|
13
13
|
};
|
|
14
|
-
declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "
|
|
14
|
+
declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
|
|
15
15
|
label?: React__default.ReactNode;
|
|
16
16
|
description?: React__default.ReactNode;
|
|
17
17
|
error?: boolean;
|
package/dist/Checkbox.d.ts
CHANGED
|
@@ -11,7 +11,7 @@ type CheckboxProps = Omit<React__default.InputHTMLAttributes<HTMLInputElement>,
|
|
|
11
11
|
className?: string;
|
|
12
12
|
inputClassName?: string;
|
|
13
13
|
};
|
|
14
|
-
declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "
|
|
14
|
+
declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
|
|
15
15
|
label?: React__default.ReactNode;
|
|
16
16
|
description?: React__default.ReactNode;
|
|
17
17
|
error?: boolean;
|
package/dist/Dialog.js
CHANGED
|
@@ -41,7 +41,6 @@ __export(Dialog_exports, {
|
|
|
41
41
|
module.exports = __toCommonJS(Dialog_exports);
|
|
42
42
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
43
43
|
var import_react = __toESM(require("react"));
|
|
44
|
-
var import_react_dom = require("react-dom");
|
|
45
44
|
var import_framer_motion = require("framer-motion");
|
|
46
45
|
var import_ActionIconButton = __toESM(require("./ActionIconButton"));
|
|
47
46
|
var import_Button = __toESM(require("./Button"));
|
|
@@ -56,26 +55,6 @@ const sizeToMaxW = {
|
|
|
56
55
|
"5xl": "max-w-5xl",
|
|
57
56
|
full: "max-w-[min(96vw,1200px)]"
|
|
58
57
|
};
|
|
59
|
-
const zManager = /* @__PURE__ */ (() => {
|
|
60
|
-
const stack = [];
|
|
61
|
-
const BASE = 1e3;
|
|
62
|
-
const STEP = 10;
|
|
63
|
-
return {
|
|
64
|
-
acquire() {
|
|
65
|
-
const z = BASE + stack.length * STEP;
|
|
66
|
-
stack.push(z);
|
|
67
|
-
return z;
|
|
68
|
-
},
|
|
69
|
-
release(z) {
|
|
70
|
-
const i = stack.indexOf(z);
|
|
71
|
-
if (i !== -1) stack.splice(i, 1);
|
|
72
|
-
},
|
|
73
|
-
isTop(z) {
|
|
74
|
-
if (z == null) return false;
|
|
75
|
-
return stack.length > 0 && stack[stack.length - 1] === z;
|
|
76
|
-
}
|
|
77
|
-
};
|
|
78
|
-
})();
|
|
79
58
|
function useLockBodyScroll(open) {
|
|
80
59
|
(0, import_react.useEffect)(() => {
|
|
81
60
|
if (!open) return;
|
|
@@ -100,16 +79,15 @@ function useLockBodyScroll(open) {
|
|
|
100
79
|
};
|
|
101
80
|
}, [open]);
|
|
102
81
|
}
|
|
103
|
-
function useEscToClose(open, onClose, disabled
|
|
82
|
+
function useEscToClose(open, onClose, disabled) {
|
|
104
83
|
(0, import_react.useEffect)(() => {
|
|
105
84
|
if (!open || disabled) return;
|
|
106
|
-
if (onlyTop === false) return;
|
|
107
85
|
const onKey = (e) => {
|
|
108
86
|
if (e.key === "Escape") onClose();
|
|
109
87
|
};
|
|
110
88
|
window.addEventListener("keydown", onKey);
|
|
111
89
|
return () => window.removeEventListener("keydown", onKey);
|
|
112
|
-
}, [open, onClose, disabled
|
|
90
|
+
}, [open, onClose, disabled]);
|
|
113
91
|
}
|
|
114
92
|
function cx(...a) {
|
|
115
93
|
return a.filter(Boolean).join(" ");
|
|
@@ -132,21 +110,8 @@ function DialogBase({
|
|
|
132
110
|
const containerRef = (0, import_react.useRef)(null);
|
|
133
111
|
const closeBtnRef = (0, import_react.useRef)(null);
|
|
134
112
|
const lastFocusedRef = (0, import_react.useRef)(null);
|
|
135
|
-
const [zIndexBase, setZIndexBase] = (0, import_react.useState)(null);
|
|
136
113
|
useLockBodyScroll(open);
|
|
137
|
-
useEscToClose(open, onClose, disableEscClose
|
|
138
|
-
(0, import_react.useEffect)(() => {
|
|
139
|
-
if (open) {
|
|
140
|
-
const z = zManager.acquire();
|
|
141
|
-
setZIndexBase(z);
|
|
142
|
-
return () => {
|
|
143
|
-
zManager.release(z);
|
|
144
|
-
setZIndexBase(null);
|
|
145
|
-
};
|
|
146
|
-
} else {
|
|
147
|
-
setZIndexBase(null);
|
|
148
|
-
}
|
|
149
|
-
}, [open]);
|
|
114
|
+
useEscToClose(open, onClose, disableEscClose);
|
|
150
115
|
(0, import_react.useEffect)(() => {
|
|
151
116
|
var _a, _b, _c;
|
|
152
117
|
if (open) {
|
|
@@ -162,64 +127,59 @@ function DialogBase({
|
|
|
162
127
|
if (!dismissibleBackdrop) return;
|
|
163
128
|
if (e.target === e.currentTarget) onClose();
|
|
164
129
|
};
|
|
165
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { children: open &&
|
|
166
|
-
/* @__PURE__ */ (0, import_jsx_runtime.
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
}
|
|
219
|
-
)
|
|
220
|
-
] }),
|
|
221
|
-
document.body
|
|
222
|
-
) });
|
|
130
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { children: open && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
131
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
132
|
+
import_framer_motion.motion.div,
|
|
133
|
+
{
|
|
134
|
+
className: "fixed inset-0 z-[100] bg-black/45 backdrop-blur-sm",
|
|
135
|
+
initial: { opacity: 0 },
|
|
136
|
+
animate: { opacity: 1 },
|
|
137
|
+
exit: { opacity: 0 }
|
|
138
|
+
}
|
|
139
|
+
),
|
|
140
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
141
|
+
import_framer_motion.motion.div,
|
|
142
|
+
{
|
|
143
|
+
role: "dialog",
|
|
144
|
+
"aria-modal": "true",
|
|
145
|
+
"aria-labelledby": title ? "dialog-title" : void 0,
|
|
146
|
+
"aria-describedby": description ? "dialog-desc" : void 0,
|
|
147
|
+
className: "fixed inset-0 z-[101] grid place-items-center p-4",
|
|
148
|
+
initial: { opacity: 0, scale: 0.98, y: 8 },
|
|
149
|
+
animate: { opacity: 1, scale: 1, y: 0 },
|
|
150
|
+
exit: { opacity: 0, scale: 0.98, y: 8 },
|
|
151
|
+
onMouseDown: handleBackdropMouseDown,
|
|
152
|
+
children: [
|
|
153
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
154
|
+
"div",
|
|
155
|
+
{
|
|
156
|
+
ref: containerRef,
|
|
157
|
+
className: cx(
|
|
158
|
+
"w-full overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-xl",
|
|
159
|
+
"dark:border-white/10 dark:bg-[#0b0a0a]",
|
|
160
|
+
"flex max-h-[88vh] flex-col",
|
|
161
|
+
sizeToMaxW[size],
|
|
162
|
+
className
|
|
163
|
+
),
|
|
164
|
+
onMouseDown: (e) => e.stopPropagation(),
|
|
165
|
+
children: children != null ? children : null
|
|
166
|
+
}
|
|
167
|
+
),
|
|
168
|
+
showClose && !children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute right-5 top-5", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
169
|
+
import_ActionIconButton.default,
|
|
170
|
+
{
|
|
171
|
+
title: "Cerrar",
|
|
172
|
+
size: "lg",
|
|
173
|
+
onClick: onClose,
|
|
174
|
+
ref: closeBtnRef,
|
|
175
|
+
className: "shadow-sm",
|
|
176
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CloseIcon, {})
|
|
177
|
+
}
|
|
178
|
+
) })
|
|
179
|
+
]
|
|
180
|
+
}
|
|
181
|
+
)
|
|
182
|
+
] }) });
|
|
223
183
|
}
|
|
224
184
|
function DialogHeader({
|
|
225
185
|
title,
|
package/dist/Dialog.mjs
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
-
import React, { useEffect, useRef
|
|
4
|
-
import { createPortal } from "react-dom";
|
|
3
|
+
import React, { useEffect, useRef } from "react";
|
|
5
4
|
import { motion, AnimatePresence } from "framer-motion";
|
|
6
5
|
import ActionIconButton from "./ActionIconButton";
|
|
7
6
|
import Button from "./Button";
|
|
@@ -16,26 +15,6 @@ const sizeToMaxW = {
|
|
|
16
15
|
"5xl": "max-w-5xl",
|
|
17
16
|
full: "max-w-[min(96vw,1200px)]"
|
|
18
17
|
};
|
|
19
|
-
const zManager = /* @__PURE__ */ (() => {
|
|
20
|
-
const stack = [];
|
|
21
|
-
const BASE = 1e3;
|
|
22
|
-
const STEP = 10;
|
|
23
|
-
return {
|
|
24
|
-
acquire() {
|
|
25
|
-
const z = BASE + stack.length * STEP;
|
|
26
|
-
stack.push(z);
|
|
27
|
-
return z;
|
|
28
|
-
},
|
|
29
|
-
release(z) {
|
|
30
|
-
const i = stack.indexOf(z);
|
|
31
|
-
if (i !== -1) stack.splice(i, 1);
|
|
32
|
-
},
|
|
33
|
-
isTop(z) {
|
|
34
|
-
if (z == null) return false;
|
|
35
|
-
return stack.length > 0 && stack[stack.length - 1] === z;
|
|
36
|
-
}
|
|
37
|
-
};
|
|
38
|
-
})();
|
|
39
18
|
function useLockBodyScroll(open) {
|
|
40
19
|
useEffect(() => {
|
|
41
20
|
if (!open) return;
|
|
@@ -60,16 +39,15 @@ function useLockBodyScroll(open) {
|
|
|
60
39
|
};
|
|
61
40
|
}, [open]);
|
|
62
41
|
}
|
|
63
|
-
function useEscToClose(open, onClose, disabled
|
|
42
|
+
function useEscToClose(open, onClose, disabled) {
|
|
64
43
|
useEffect(() => {
|
|
65
44
|
if (!open || disabled) return;
|
|
66
|
-
if (onlyTop === false) return;
|
|
67
45
|
const onKey = (e) => {
|
|
68
46
|
if (e.key === "Escape") onClose();
|
|
69
47
|
};
|
|
70
48
|
window.addEventListener("keydown", onKey);
|
|
71
49
|
return () => window.removeEventListener("keydown", onKey);
|
|
72
|
-
}, [open, onClose, disabled
|
|
50
|
+
}, [open, onClose, disabled]);
|
|
73
51
|
}
|
|
74
52
|
function cx(...a) {
|
|
75
53
|
return a.filter(Boolean).join(" ");
|
|
@@ -92,21 +70,8 @@ function DialogBase({
|
|
|
92
70
|
const containerRef = useRef(null);
|
|
93
71
|
const closeBtnRef = useRef(null);
|
|
94
72
|
const lastFocusedRef = useRef(null);
|
|
95
|
-
const [zIndexBase, setZIndexBase] = useState(null);
|
|
96
73
|
useLockBodyScroll(open);
|
|
97
|
-
useEscToClose(open, onClose, disableEscClose
|
|
98
|
-
useEffect(() => {
|
|
99
|
-
if (open) {
|
|
100
|
-
const z = zManager.acquire();
|
|
101
|
-
setZIndexBase(z);
|
|
102
|
-
return () => {
|
|
103
|
-
zManager.release(z);
|
|
104
|
-
setZIndexBase(null);
|
|
105
|
-
};
|
|
106
|
-
} else {
|
|
107
|
-
setZIndexBase(null);
|
|
108
|
-
}
|
|
109
|
-
}, [open]);
|
|
74
|
+
useEscToClose(open, onClose, disableEscClose);
|
|
110
75
|
useEffect(() => {
|
|
111
76
|
var _a, _b, _c;
|
|
112
77
|
if (open) {
|
|
@@ -122,64 +87,59 @@ function DialogBase({
|
|
|
122
87
|
if (!dismissibleBackdrop) return;
|
|
123
88
|
if (e.target === e.currentTarget) onClose();
|
|
124
89
|
};
|
|
125
|
-
return /* @__PURE__ */ jsx(AnimatePresence, { children: open &&
|
|
126
|
-
/* @__PURE__ */
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
}
|
|
179
|
-
)
|
|
180
|
-
] }),
|
|
181
|
-
document.body
|
|
182
|
-
) });
|
|
90
|
+
return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
91
|
+
/* @__PURE__ */ jsx(
|
|
92
|
+
motion.div,
|
|
93
|
+
{
|
|
94
|
+
className: "fixed inset-0 z-[100] bg-black/45 backdrop-blur-sm",
|
|
95
|
+
initial: { opacity: 0 },
|
|
96
|
+
animate: { opacity: 1 },
|
|
97
|
+
exit: { opacity: 0 }
|
|
98
|
+
}
|
|
99
|
+
),
|
|
100
|
+
/* @__PURE__ */ jsxs(
|
|
101
|
+
motion.div,
|
|
102
|
+
{
|
|
103
|
+
role: "dialog",
|
|
104
|
+
"aria-modal": "true",
|
|
105
|
+
"aria-labelledby": title ? "dialog-title" : void 0,
|
|
106
|
+
"aria-describedby": description ? "dialog-desc" : void 0,
|
|
107
|
+
className: "fixed inset-0 z-[101] grid place-items-center p-4",
|
|
108
|
+
initial: { opacity: 0, scale: 0.98, y: 8 },
|
|
109
|
+
animate: { opacity: 1, scale: 1, y: 0 },
|
|
110
|
+
exit: { opacity: 0, scale: 0.98, y: 8 },
|
|
111
|
+
onMouseDown: handleBackdropMouseDown,
|
|
112
|
+
children: [
|
|
113
|
+
/* @__PURE__ */ jsx(
|
|
114
|
+
"div",
|
|
115
|
+
{
|
|
116
|
+
ref: containerRef,
|
|
117
|
+
className: cx(
|
|
118
|
+
"w-full overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-xl",
|
|
119
|
+
"dark:border-white/10 dark:bg-[#0b0a0a]",
|
|
120
|
+
"flex max-h-[88vh] flex-col",
|
|
121
|
+
sizeToMaxW[size],
|
|
122
|
+
className
|
|
123
|
+
),
|
|
124
|
+
onMouseDown: (e) => e.stopPropagation(),
|
|
125
|
+
children: children != null ? children : null
|
|
126
|
+
}
|
|
127
|
+
),
|
|
128
|
+
showClose && !children && /* @__PURE__ */ jsx("div", { className: "absolute right-5 top-5", children: /* @__PURE__ */ jsx(
|
|
129
|
+
ActionIconButton,
|
|
130
|
+
{
|
|
131
|
+
title: "Cerrar",
|
|
132
|
+
size: "lg",
|
|
133
|
+
onClick: onClose,
|
|
134
|
+
ref: closeBtnRef,
|
|
135
|
+
className: "shadow-sm",
|
|
136
|
+
children: /* @__PURE__ */ jsx(CloseIcon, {})
|
|
137
|
+
}
|
|
138
|
+
) })
|
|
139
|
+
]
|
|
140
|
+
}
|
|
141
|
+
)
|
|
142
|
+
] }) });
|
|
183
143
|
}
|
|
184
144
|
function DialogHeader({
|
|
185
145
|
title,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "framepexls-ui-lib",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"description": "Componentes UI de Framepexls para React/Next.",
|
|
@@ -27,25 +27,25 @@
|
|
|
27
27
|
"access": "public"
|
|
28
28
|
},
|
|
29
29
|
"peerDependencies": {
|
|
30
|
+
"framer-motion": "^12.23.0",
|
|
31
|
+
"next": "^16.0.0",
|
|
30
32
|
"react": ">=18.2.0 || ^19",
|
|
31
33
|
"react-dom": ">=18.2.0 || ^19",
|
|
32
|
-
"next": "^15.0.0",
|
|
33
|
-
"framer-motion": "^12.23.0",
|
|
34
34
|
"recharts": ">=3.1.0 <4"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
|
-
"
|
|
37
|
+
"@tailwindcss/postcss": "^4.1.16",
|
|
38
|
+
"@types/react": "^19.2.2",
|
|
39
|
+
"@types/react-dom": "^19.2.2",
|
|
40
|
+
"framer-motion": "^12.23.24",
|
|
41
|
+
"next": "16.0.0",
|
|
42
|
+
"react": "19.2.0",
|
|
43
|
+
"react-dom": "19.2.0",
|
|
44
|
+
"react-is": "^19.0.0",
|
|
45
|
+
"recharts": "^3.3.0",
|
|
46
|
+
"tailwindcss": "^4.1.16",
|
|
38
47
|
"tsup": "^8.1.0",
|
|
39
|
-
"
|
|
40
|
-
"@types/react-dom": "^19",
|
|
41
|
-
"tailwindcss": "^4.1.13",
|
|
42
|
-
"@tailwindcss/postcss": "^4.1.13",
|
|
43
|
-
"framer-motion": "^12.23.20",
|
|
44
|
-
"recharts": "^3.2.1",
|
|
45
|
-
"next": "15.4.3",
|
|
46
|
-
"react": "19.1.0",
|
|
47
|
-
"react-dom": "19.1.0",
|
|
48
|
-
"react-is": "^19.0.0"
|
|
48
|
+
"typescript": "^5.9.3"
|
|
49
49
|
},
|
|
50
50
|
"scripts": {
|
|
51
51
|
"build": "tsup",
|
|
@@ -61,4 +61,4 @@
|
|
|
61
61
|
"url": "https://github.com/cponce-framepexls/ui-lib/issues"
|
|
62
62
|
},
|
|
63
63
|
"homepage": "https://github.com/cponce-framepexls/ui-lib#readme"
|
|
64
|
-
}
|
|
64
|
+
}
|