framepexls-ui-lib 0.1.13 → 0.1.14
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/ActionIconButton.d.mts +1 -0
- package/dist/ActionIconButton.d.ts +1 -0
- package/dist/ActionIconButton.js +12 -9
- package/dist/ActionIconButton.mjs +13 -10
- package/dist/AppTopbar.js +23 -6
- package/dist/AppTopbar.mjs +13 -6
- package/dist/AvatarGroup.d.mts +14 -0
- package/dist/AvatarGroup.d.ts +14 -0
- package/dist/AvatarGroup.js +77 -0
- package/dist/AvatarGroup.mjs +47 -0
- package/dist/AvatarSquare.d.mts +2 -5
- package/dist/AvatarSquare.d.ts +2 -5
- package/dist/AvatarSquare.js +52 -3
- package/dist/AvatarSquare.mjs +52 -3
- package/dist/Badge.d.mts +2 -1
- package/dist/Badge.d.ts +2 -1
- package/dist/Badge.js +3 -1
- package/dist/Badge.mjs +3 -1
- package/dist/BadgeCluster.js +3 -3
- package/dist/BadgeCluster.mjs +3 -3
- package/dist/Button.d.mts +3 -4
- package/dist/Button.d.ts +3 -4
- package/dist/Button.js +96 -8
- package/dist/Button.mjs +86 -8
- package/dist/CalendarPanel.js +20 -3
- package/dist/CalendarPanel.mjs +10 -3
- package/dist/Card.d.mts +6 -0
- package/dist/Card.d.ts +6 -0
- package/dist/Card.js +52 -0
- package/dist/Card.mjs +22 -0
- package/dist/CheckboxPillsGroup.d.mts +2 -1
- package/dist/CheckboxPillsGroup.d.ts +2 -1
- package/dist/CheckboxPillsGroup.js +8 -4
- package/dist/CheckboxPillsGroup.mjs +8 -4
- package/dist/ColumnSelector.js +16 -2
- package/dist/ColumnSelector.mjs +6 -2
- package/dist/ComboSelect.d.mts +0 -2
- package/dist/ComboSelect.d.ts +0 -2
- package/dist/ComboSelect.js +8 -4
- package/dist/ComboSelect.mjs +8 -4
- package/dist/DateTimeField.d.mts +0 -5
- package/dist/DateTimeField.d.ts +0 -5
- package/dist/DateTimeField.js +17 -8
- package/dist/DateTimeField.mjs +17 -8
- package/dist/Dialog.d.mts +2 -5
- package/dist/Dialog.d.ts +2 -5
- package/dist/Dialog.js +21 -22
- package/dist/Dialog.mjs +21 -22
- package/dist/Drawer.d.mts +38 -0
- package/dist/Drawer.d.ts +38 -0
- package/dist/Drawer.js +139 -0
- package/dist/Drawer.mjs +102 -0
- package/dist/Dropdown.d.mts +0 -3
- package/dist/Dropdown.d.ts +0 -3
- package/dist/Dropdown.js +61 -42
- package/dist/Dropdown.mjs +51 -42
- package/dist/Input.d.mts +2 -0
- package/dist/Input.d.ts +2 -0
- package/dist/Input.js +20 -5
- package/dist/Input.mjs +20 -5
- package/dist/Link.d.mts +15 -0
- package/dist/Link.d.ts +15 -0
- package/dist/Link.js +93 -0
- package/dist/Link.mjs +63 -0
- package/dist/MediaCard.d.mts +15 -0
- package/dist/MediaCard.d.ts +15 -0
- package/dist/MediaCard.js +153 -0
- package/dist/MediaCard.mjs +123 -0
- package/dist/MediaSelector.d.mts +48 -0
- package/dist/MediaSelector.d.ts +48 -0
- package/dist/MediaSelector.js +225 -0
- package/dist/MediaSelector.mjs +195 -0
- package/dist/Money.d.mts +2 -1
- package/dist/Money.d.ts +2 -1
- package/dist/Money.js +26 -2
- package/dist/Money.mjs +26 -2
- package/dist/MultiComboSelect.js +6 -11
- package/dist/MultiComboSelect.mjs +6 -11
- package/dist/OrderButton.js +13 -1
- package/dist/OrderButton.mjs +3 -1
- package/dist/Pagination.d.mts +2 -1
- package/dist/Pagination.d.ts +2 -1
- package/dist/Pagination.js +40 -3
- package/dist/Pagination.mjs +30 -3
- package/dist/ReviewHistory.js +3 -9
- package/dist/ReviewHistory.mjs +3 -9
- package/dist/SearchInput.js +17 -42
- package/dist/SearchInput.mjs +17 -42
- package/dist/Select.js +5 -2
- package/dist/Select.mjs +5 -2
- package/dist/Sidebar.d.mts +2 -3
- package/dist/Sidebar.d.ts +2 -3
- package/dist/Sidebar.js +132 -24
- package/dist/Sidebar.mjs +132 -24
- package/dist/Steps.d.mts +0 -2
- package/dist/Steps.d.ts +0 -2
- package/dist/Steps.js +19 -6
- package/dist/Steps.mjs +9 -6
- package/dist/Table.js +3 -1
- package/dist/Table.mjs +3 -1
- package/dist/TimePanel.js +21 -7
- package/dist/TimePanel.mjs +11 -7
- package/dist/TimePopover.js +32 -15
- package/dist/TimePopover.mjs +32 -15
- package/dist/TimeRangeField.js +13 -6
- package/dist/TimeRangeField.mjs +13 -6
- package/dist/Toast.d.mts +53 -0
- package/dist/Toast.d.ts +53 -0
- package/dist/Toast.js +273 -0
- package/dist/Toast.mjs +238 -0
- package/dist/Tooltip.d.mts +15 -0
- package/dist/Tooltip.d.ts +15 -0
- package/dist/Tooltip.js +135 -0
- package/dist/Tooltip.mjs +105 -0
- package/dist/UploadCard.d.mts +27 -0
- package/dist/UploadCard.d.ts +27 -0
- package/dist/UploadCard.js +143 -0
- package/dist/UploadCard.mjs +113 -0
- package/dist/index.d.mts +10 -1
- package/dist/index.d.ts +10 -1
- package/dist/index.js +30 -1
- package/dist/index.mjs +58 -39
- package/package.json +1 -1
package/dist/Dialog.js
CHANGED
|
@@ -43,6 +43,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
|
|
|
43
43
|
var import_react = __toESM(require("react"));
|
|
44
44
|
var import_react2 = require("motion/react");
|
|
45
45
|
var import_ActionIconButton = __toESM(require("./ActionIconButton"));
|
|
46
|
+
var import_Button = __toESM(require("./Button"));
|
|
46
47
|
const sizeToMaxW = {
|
|
47
48
|
sm: "max-w-sm",
|
|
48
49
|
md: "max-w-md",
|
|
@@ -184,7 +185,6 @@ function DialogHeader({
|
|
|
184
185
|
showClose = true,
|
|
185
186
|
actions,
|
|
186
187
|
compact = false,
|
|
187
|
-
// 👈 nuevo
|
|
188
188
|
className
|
|
189
189
|
}) {
|
|
190
190
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: cx("px-6", compact ? "pt-5 pb-2" : "pt-6 pb-3", className), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-start justify-between gap-3", children: [
|
|
@@ -283,21 +283,26 @@ function FormDialog({
|
|
|
283
283
|
footerExtra,
|
|
284
284
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ml-auto flex items-center gap-2", children: [
|
|
285
285
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
286
|
-
|
|
286
|
+
import_Button.default,
|
|
287
287
|
{
|
|
288
288
|
type: "button",
|
|
289
289
|
onClick: onClose,
|
|
290
|
-
|
|
290
|
+
variant: "secondary",
|
|
291
|
+
size: "md",
|
|
292
|
+
className: "shadow-sm",
|
|
291
293
|
children: cancelLabel
|
|
292
294
|
}
|
|
293
295
|
),
|
|
294
296
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
295
|
-
|
|
297
|
+
import_Button.default,
|
|
296
298
|
{
|
|
297
299
|
type: "submit",
|
|
298
300
|
form: formId,
|
|
299
301
|
disabled: submitting || submitDisabled,
|
|
300
|
-
|
|
302
|
+
loading: submitting,
|
|
303
|
+
variant: "primary",
|
|
304
|
+
size: "md",
|
|
305
|
+
className: "shadow-sm",
|
|
301
306
|
children: submitting ? "Guardando\u2026" : submitLabel
|
|
302
307
|
}
|
|
303
308
|
)
|
|
@@ -310,9 +315,7 @@ function ConfirmDialog({
|
|
|
310
315
|
onClose,
|
|
311
316
|
title,
|
|
312
317
|
headerDescription,
|
|
313
|
-
// <— nuevo
|
|
314
318
|
description,
|
|
315
|
-
// body
|
|
316
319
|
confirmLabel = "Confirmar",
|
|
317
320
|
cancelLabel = "Cancelar",
|
|
318
321
|
danger,
|
|
@@ -355,32 +358,28 @@ function ConfirmDialog({
|
|
|
355
358
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogBody, { padded: true, children: typeof description === "string" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm text-slate-600 dark:text-slate-300", children: description }) : description != null ? description : null }),
|
|
356
359
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogFooter, { align: "end", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("form", { onSubmit: handleSubmit, className: "ml-auto flex items-center gap-2", children: [
|
|
357
360
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
358
|
-
|
|
361
|
+
import_Button.default,
|
|
359
362
|
{
|
|
360
363
|
type: "button",
|
|
361
364
|
onClick: onClose,
|
|
362
365
|
disabled: pending,
|
|
363
|
-
|
|
366
|
+
variant: "secondary",
|
|
367
|
+
size: "md",
|
|
368
|
+
className: "shadow-sm",
|
|
364
369
|
children: cancelLabel
|
|
365
370
|
}
|
|
366
371
|
),
|
|
367
|
-
/* @__PURE__ */ (0, import_jsx_runtime.
|
|
368
|
-
|
|
372
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
373
|
+
import_Button.default,
|
|
369
374
|
{
|
|
370
375
|
ref: confirmBtnRef,
|
|
371
376
|
type: "submit",
|
|
372
377
|
disabled: pending,
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
children:
|
|
378
|
-
pending && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { className: "h-4 w-4 animate-spin", viewBox: "0 0 24 24", fill: "none", children: [
|
|
379
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
|
|
380
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { className: "opacity-75", d: "M4 12a8 8 0 018-8", stroke: "currentColor", strokeWidth: "4", strokeLinecap: "round" })
|
|
381
|
-
] }),
|
|
382
|
-
confirmLabel
|
|
383
|
-
]
|
|
378
|
+
loading: pending,
|
|
379
|
+
variant: danger ? "danger" : "primary",
|
|
380
|
+
size: "md",
|
|
381
|
+
className: "shadow-sm",
|
|
382
|
+
children: confirmLabel
|
|
384
383
|
}
|
|
385
384
|
)
|
|
386
385
|
] }) })
|
package/dist/Dialog.mjs
CHANGED
|
@@ -3,6 +3,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
import React, { useEffect, useRef } from "react";
|
|
4
4
|
import { motion, AnimatePresence } from "motion/react";
|
|
5
5
|
import ActionIconButton from "./ActionIconButton";
|
|
6
|
+
import Button from "./Button";
|
|
6
7
|
const sizeToMaxW = {
|
|
7
8
|
sm: "max-w-sm",
|
|
8
9
|
md: "max-w-md",
|
|
@@ -144,7 +145,6 @@ function DialogHeader({
|
|
|
144
145
|
showClose = true,
|
|
145
146
|
actions,
|
|
146
147
|
compact = false,
|
|
147
|
-
// 👈 nuevo
|
|
148
148
|
className
|
|
149
149
|
}) {
|
|
150
150
|
return /* @__PURE__ */ jsx("div", { className: cx("px-6", compact ? "pt-5 pb-2" : "pt-6 pb-3", className), children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
|
|
@@ -243,21 +243,26 @@ function FormDialog({
|
|
|
243
243
|
footerExtra,
|
|
244
244
|
/* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-2", children: [
|
|
245
245
|
/* @__PURE__ */ jsx(
|
|
246
|
-
|
|
246
|
+
Button,
|
|
247
247
|
{
|
|
248
248
|
type: "button",
|
|
249
249
|
onClick: onClose,
|
|
250
|
-
|
|
250
|
+
variant: "secondary",
|
|
251
|
+
size: "md",
|
|
252
|
+
className: "shadow-sm",
|
|
251
253
|
children: cancelLabel
|
|
252
254
|
}
|
|
253
255
|
),
|
|
254
256
|
/* @__PURE__ */ jsx(
|
|
255
|
-
|
|
257
|
+
Button,
|
|
256
258
|
{
|
|
257
259
|
type: "submit",
|
|
258
260
|
form: formId,
|
|
259
261
|
disabled: submitting || submitDisabled,
|
|
260
|
-
|
|
262
|
+
loading: submitting,
|
|
263
|
+
variant: "primary",
|
|
264
|
+
size: "md",
|
|
265
|
+
className: "shadow-sm",
|
|
261
266
|
children: submitting ? "Guardando\u2026" : submitLabel
|
|
262
267
|
}
|
|
263
268
|
)
|
|
@@ -270,9 +275,7 @@ function ConfirmDialog({
|
|
|
270
275
|
onClose,
|
|
271
276
|
title,
|
|
272
277
|
headerDescription,
|
|
273
|
-
// <— nuevo
|
|
274
278
|
description,
|
|
275
|
-
// body
|
|
276
279
|
confirmLabel = "Confirmar",
|
|
277
280
|
cancelLabel = "Cancelar",
|
|
278
281
|
danger,
|
|
@@ -315,32 +318,28 @@ function ConfirmDialog({
|
|
|
315
318
|
/* @__PURE__ */ jsx(DialogBody, { padded: true, children: typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: "text-sm text-slate-600 dark:text-slate-300", children: description }) : description != null ? description : null }),
|
|
316
319
|
/* @__PURE__ */ jsx(DialogFooter, { align: "end", children: /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "ml-auto flex items-center gap-2", children: [
|
|
317
320
|
/* @__PURE__ */ jsx(
|
|
318
|
-
|
|
321
|
+
Button,
|
|
319
322
|
{
|
|
320
323
|
type: "button",
|
|
321
324
|
onClick: onClose,
|
|
322
325
|
disabled: pending,
|
|
323
|
-
|
|
326
|
+
variant: "secondary",
|
|
327
|
+
size: "md",
|
|
328
|
+
className: "shadow-sm",
|
|
324
329
|
children: cancelLabel
|
|
325
330
|
}
|
|
326
331
|
),
|
|
327
|
-
/* @__PURE__ */
|
|
328
|
-
|
|
332
|
+
/* @__PURE__ */ jsx(
|
|
333
|
+
Button,
|
|
329
334
|
{
|
|
330
335
|
ref: confirmBtnRef,
|
|
331
336
|
type: "submit",
|
|
332
337
|
disabled: pending,
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
children:
|
|
338
|
-
pending && /* @__PURE__ */ jsxs("svg", { className: "h-4 w-4 animate-spin", viewBox: "0 0 24 24", fill: "none", children: [
|
|
339
|
-
/* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
|
|
340
|
-
/* @__PURE__ */ jsx("path", { className: "opacity-75", d: "M4 12a8 8 0 018-8", stroke: "currentColor", strokeWidth: "4", strokeLinecap: "round" })
|
|
341
|
-
] }),
|
|
342
|
-
confirmLabel
|
|
343
|
-
]
|
|
338
|
+
loading: pending,
|
|
339
|
+
variant: danger ? "danger" : "primary",
|
|
340
|
+
size: "md",
|
|
341
|
+
className: "shadow-sm",
|
|
342
|
+
children: confirmLabel
|
|
344
343
|
}
|
|
345
344
|
)
|
|
346
345
|
] }) })
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import React__default from 'react';
|
|
3
|
+
|
|
4
|
+
type RootProps = {
|
|
5
|
+
open: boolean;
|
|
6
|
+
onClose: () => void;
|
|
7
|
+
widthClass?: string;
|
|
8
|
+
children: React__default.ReactNode;
|
|
9
|
+
className?: string;
|
|
10
|
+
};
|
|
11
|
+
declare function Root({ open, onClose, widthClass, children, className, }: RootProps): react_jsx_runtime.JSX.Element;
|
|
12
|
+
type HeaderProps = {
|
|
13
|
+
title?: string;
|
|
14
|
+
right?: React__default.ReactNode;
|
|
15
|
+
className?: string;
|
|
16
|
+
hideClose?: boolean;
|
|
17
|
+
children?: React__default.ReactNode;
|
|
18
|
+
};
|
|
19
|
+
declare function Header({ title, right, className, hideClose, children }: HeaderProps): react_jsx_runtime.JSX.Element;
|
|
20
|
+
type BodyProps = {
|
|
21
|
+
className?: string;
|
|
22
|
+
children: React__default.ReactNode;
|
|
23
|
+
};
|
|
24
|
+
declare function Body({ className, children }: BodyProps): react_jsx_runtime.JSX.Element;
|
|
25
|
+
type FooterProps = {
|
|
26
|
+
className?: string;
|
|
27
|
+
children: React__default.ReactNode;
|
|
28
|
+
sticky?: boolean;
|
|
29
|
+
};
|
|
30
|
+
declare function Footer({ className, children, sticky }: FooterProps): react_jsx_runtime.JSX.Element;
|
|
31
|
+
declare const Drawer: {
|
|
32
|
+
Root: typeof Root;
|
|
33
|
+
Header: typeof Header;
|
|
34
|
+
Body: typeof Body;
|
|
35
|
+
Footer: typeof Footer;
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
export { Body as DrawerBody, Footer as DrawerFooter, Header as DrawerHeader, Root as DrawerRoot, Drawer as default };
|
package/dist/Drawer.d.ts
ADDED
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import React__default from 'react';
|
|
3
|
+
|
|
4
|
+
type RootProps = {
|
|
5
|
+
open: boolean;
|
|
6
|
+
onClose: () => void;
|
|
7
|
+
widthClass?: string;
|
|
8
|
+
children: React__default.ReactNode;
|
|
9
|
+
className?: string;
|
|
10
|
+
};
|
|
11
|
+
declare function Root({ open, onClose, widthClass, children, className, }: RootProps): react_jsx_runtime.JSX.Element;
|
|
12
|
+
type HeaderProps = {
|
|
13
|
+
title?: string;
|
|
14
|
+
right?: React__default.ReactNode;
|
|
15
|
+
className?: string;
|
|
16
|
+
hideClose?: boolean;
|
|
17
|
+
children?: React__default.ReactNode;
|
|
18
|
+
};
|
|
19
|
+
declare function Header({ title, right, className, hideClose, children }: HeaderProps): react_jsx_runtime.JSX.Element;
|
|
20
|
+
type BodyProps = {
|
|
21
|
+
className?: string;
|
|
22
|
+
children: React__default.ReactNode;
|
|
23
|
+
};
|
|
24
|
+
declare function Body({ className, children }: BodyProps): react_jsx_runtime.JSX.Element;
|
|
25
|
+
type FooterProps = {
|
|
26
|
+
className?: string;
|
|
27
|
+
children: React__default.ReactNode;
|
|
28
|
+
sticky?: boolean;
|
|
29
|
+
};
|
|
30
|
+
declare function Footer({ className, children, sticky }: FooterProps): react_jsx_runtime.JSX.Element;
|
|
31
|
+
declare const Drawer: {
|
|
32
|
+
Root: typeof Root;
|
|
33
|
+
Header: typeof Header;
|
|
34
|
+
Body: typeof Body;
|
|
35
|
+
Footer: typeof Footer;
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
export { Body as DrawerBody, Footer as DrawerFooter, Header as DrawerHeader, Root as DrawerRoot, Drawer as default };
|
package/dist/Drawer.js
ADDED
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
var __create = Object.create;
|
|
4
|
+
var __defProp = Object.defineProperty;
|
|
5
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
6
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
8
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
9
|
+
var __export = (target, all) => {
|
|
10
|
+
for (var name in all)
|
|
11
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
12
|
+
};
|
|
13
|
+
var __copyProps = (to, from, except, desc) => {
|
|
14
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
15
|
+
for (let key of __getOwnPropNames(from))
|
|
16
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
17
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
18
|
+
}
|
|
19
|
+
return to;
|
|
20
|
+
};
|
|
21
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
22
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
23
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
24
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
25
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
26
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
27
|
+
mod
|
|
28
|
+
));
|
|
29
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
30
|
+
var Drawer_exports = {};
|
|
31
|
+
__export(Drawer_exports, {
|
|
32
|
+
DrawerBody: () => Body,
|
|
33
|
+
DrawerFooter: () => Footer,
|
|
34
|
+
DrawerHeader: () => Header,
|
|
35
|
+
DrawerRoot: () => Root,
|
|
36
|
+
default: () => Drawer_default
|
|
37
|
+
});
|
|
38
|
+
module.exports = __toCommonJS(Drawer_exports);
|
|
39
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
40
|
+
var import_react = __toESM(require("react"));
|
|
41
|
+
var import_framer_motion = require("framer-motion");
|
|
42
|
+
var import_ActionIconButton = __toESM(require("./ActionIconButton"));
|
|
43
|
+
const DrawerCtx = import_react.default.createContext(null);
|
|
44
|
+
const useDrawerCtx = () => {
|
|
45
|
+
const ctx = import_react.default.useContext(DrawerCtx);
|
|
46
|
+
if (!ctx) throw new Error("Drawer.* debe usarse dentro de <Drawer.Root />");
|
|
47
|
+
return ctx;
|
|
48
|
+
};
|
|
49
|
+
function Root({
|
|
50
|
+
open,
|
|
51
|
+
onClose,
|
|
52
|
+
widthClass = "w-[680px] max-w-[92vw]",
|
|
53
|
+
children,
|
|
54
|
+
className
|
|
55
|
+
}) {
|
|
56
|
+
import_react.default.useEffect(() => {
|
|
57
|
+
if (open) document.body.style.overflow = "hidden";
|
|
58
|
+
else document.body.style.overflow = "";
|
|
59
|
+
return () => {
|
|
60
|
+
document.body.style.overflow = "";
|
|
61
|
+
};
|
|
62
|
+
}, [open]);
|
|
63
|
+
import_react.default.useEffect(() => {
|
|
64
|
+
if (!open) return;
|
|
65
|
+
const onKey = (e) => e.key === "Escape" && onClose();
|
|
66
|
+
window.addEventListener("keydown", onKey);
|
|
67
|
+
return () => window.removeEventListener("keydown", onKey);
|
|
68
|
+
}, [open, onClose]);
|
|
69
|
+
const labelId = import_react.default.useId();
|
|
70
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { children: open && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
71
|
+
import_framer_motion.motion.div,
|
|
72
|
+
{
|
|
73
|
+
className: "fixed inset-0 z-[100]",
|
|
74
|
+
initial: { opacity: 0 },
|
|
75
|
+
animate: { opacity: 1 },
|
|
76
|
+
exit: { opacity: 0 },
|
|
77
|
+
children: [
|
|
78
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute inset-0 bg-black/40", onClick: onClose, "aria-hidden": true }),
|
|
79
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DrawerCtx.Provider, { value: { onClose }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
80
|
+
import_framer_motion.motion.aside,
|
|
81
|
+
{
|
|
82
|
+
role: "dialog",
|
|
83
|
+
"aria-modal": "true",
|
|
84
|
+
"aria-labelledby": labelId,
|
|
85
|
+
className: [
|
|
86
|
+
"absolute right-0 top-0 h-full bg-white shadow-2xl dark:bg-[#0b0a0a]",
|
|
87
|
+
widthClass,
|
|
88
|
+
"flex flex-col",
|
|
89
|
+
className != null ? className : ""
|
|
90
|
+
].join(" "),
|
|
91
|
+
initial: { x: "100%" },
|
|
92
|
+
animate: { x: 0 },
|
|
93
|
+
exit: { x: "100%" },
|
|
94
|
+
transition: { type: "spring", stiffness: 260, damping: 26 },
|
|
95
|
+
children: [
|
|
96
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id: labelId, className: "sr-only" }),
|
|
97
|
+
children
|
|
98
|
+
]
|
|
99
|
+
}
|
|
100
|
+
) })
|
|
101
|
+
]
|
|
102
|
+
}
|
|
103
|
+
) });
|
|
104
|
+
}
|
|
105
|
+
function Header({ title, right, className, hideClose, children }) {
|
|
106
|
+
const { onClose } = useDrawerCtx();
|
|
107
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: ["flex items-center justify-between border-b border-black/10 px-5 py-4 dark:border-white/10", className != null ? className : ""].join(" "), children: children ? children : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
108
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "text-lg font-semibold", children: title }),
|
|
109
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
110
|
+
right,
|
|
111
|
+
!hideClose && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ActionIconButton.default, { title: "Cerrar", size: "md", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", className: "h-4.5 w-4.5", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M18 6L6 18M6 6l12 12" }) }) })
|
|
112
|
+
] })
|
|
113
|
+
] }) });
|
|
114
|
+
}
|
|
115
|
+
function Body({ className, children }) {
|
|
116
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: ["flex-1 overflow-auto", className != null ? className : ""].join(" "), children });
|
|
117
|
+
}
|
|
118
|
+
function Footer({ className, children, sticky }) {
|
|
119
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
120
|
+
"div",
|
|
121
|
+
{
|
|
122
|
+
className: [
|
|
123
|
+
"border-t border-slate-200/70 px-5 py-4 dark:border-white/10",
|
|
124
|
+
sticky ? "backdrop-blur supports-[backdrop-filter]:bg-white/60 dark:supports-[backdrop-filter]:bg-[#0b0a0a]/60" : "",
|
|
125
|
+
className != null ? className : ""
|
|
126
|
+
].join(" "),
|
|
127
|
+
children
|
|
128
|
+
}
|
|
129
|
+
);
|
|
130
|
+
}
|
|
131
|
+
const Drawer = { Root, Header, Body, Footer };
|
|
132
|
+
var Drawer_default = Drawer;
|
|
133
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
134
|
+
0 && (module.exports = {
|
|
135
|
+
DrawerBody,
|
|
136
|
+
DrawerFooter,
|
|
137
|
+
DrawerHeader,
|
|
138
|
+
DrawerRoot
|
|
139
|
+
});
|
package/dist/Drawer.mjs
ADDED
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import React from "react";
|
|
4
|
+
import { AnimatePresence, motion } from "framer-motion";
|
|
5
|
+
import ActionIconButton from "./ActionIconButton";
|
|
6
|
+
const DrawerCtx = React.createContext(null);
|
|
7
|
+
const useDrawerCtx = () => {
|
|
8
|
+
const ctx = React.useContext(DrawerCtx);
|
|
9
|
+
if (!ctx) throw new Error("Drawer.* debe usarse dentro de <Drawer.Root />");
|
|
10
|
+
return ctx;
|
|
11
|
+
};
|
|
12
|
+
function Root({
|
|
13
|
+
open,
|
|
14
|
+
onClose,
|
|
15
|
+
widthClass = "w-[680px] max-w-[92vw]",
|
|
16
|
+
children,
|
|
17
|
+
className
|
|
18
|
+
}) {
|
|
19
|
+
React.useEffect(() => {
|
|
20
|
+
if (open) document.body.style.overflow = "hidden";
|
|
21
|
+
else document.body.style.overflow = "";
|
|
22
|
+
return () => {
|
|
23
|
+
document.body.style.overflow = "";
|
|
24
|
+
};
|
|
25
|
+
}, [open]);
|
|
26
|
+
React.useEffect(() => {
|
|
27
|
+
if (!open) return;
|
|
28
|
+
const onKey = (e) => e.key === "Escape" && onClose();
|
|
29
|
+
window.addEventListener("keydown", onKey);
|
|
30
|
+
return () => window.removeEventListener("keydown", onKey);
|
|
31
|
+
}, [open, onClose]);
|
|
32
|
+
const labelId = React.useId();
|
|
33
|
+
return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsxs(
|
|
34
|
+
motion.div,
|
|
35
|
+
{
|
|
36
|
+
className: "fixed inset-0 z-[100]",
|
|
37
|
+
initial: { opacity: 0 },
|
|
38
|
+
animate: { opacity: 1 },
|
|
39
|
+
exit: { opacity: 0 },
|
|
40
|
+
children: [
|
|
41
|
+
/* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/40", onClick: onClose, "aria-hidden": true }),
|
|
42
|
+
/* @__PURE__ */ jsx(DrawerCtx.Provider, { value: { onClose }, children: /* @__PURE__ */ jsxs(
|
|
43
|
+
motion.aside,
|
|
44
|
+
{
|
|
45
|
+
role: "dialog",
|
|
46
|
+
"aria-modal": "true",
|
|
47
|
+
"aria-labelledby": labelId,
|
|
48
|
+
className: [
|
|
49
|
+
"absolute right-0 top-0 h-full bg-white shadow-2xl dark:bg-[#0b0a0a]",
|
|
50
|
+
widthClass,
|
|
51
|
+
"flex flex-col",
|
|
52
|
+
className != null ? className : ""
|
|
53
|
+
].join(" "),
|
|
54
|
+
initial: { x: "100%" },
|
|
55
|
+
animate: { x: 0 },
|
|
56
|
+
exit: { x: "100%" },
|
|
57
|
+
transition: { type: "spring", stiffness: 260, damping: 26 },
|
|
58
|
+
children: [
|
|
59
|
+
/* @__PURE__ */ jsx("div", { id: labelId, className: "sr-only" }),
|
|
60
|
+
children
|
|
61
|
+
]
|
|
62
|
+
}
|
|
63
|
+
) })
|
|
64
|
+
]
|
|
65
|
+
}
|
|
66
|
+
) });
|
|
67
|
+
}
|
|
68
|
+
function Header({ title, right, className, hideClose, children }) {
|
|
69
|
+
const { onClose } = useDrawerCtx();
|
|
70
|
+
return /* @__PURE__ */ jsx("div", { className: ["flex items-center justify-between border-b border-black/10 px-5 py-4 dark:border-white/10", className != null ? className : ""].join(" "), children: children ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
71
|
+
/* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold", children: title }),
|
|
72
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
|
|
73
|
+
right,
|
|
74
|
+
!hideClose && /* @__PURE__ */ jsx(ActionIconButton, { title: "Cerrar", size: "md", onClick: onClose, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-4.5 w-4.5", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "M18 6L6 18M6 6l12 12" }) }) })
|
|
75
|
+
] })
|
|
76
|
+
] }) });
|
|
77
|
+
}
|
|
78
|
+
function Body({ className, children }) {
|
|
79
|
+
return /* @__PURE__ */ jsx("div", { className: ["flex-1 overflow-auto", className != null ? className : ""].join(" "), children });
|
|
80
|
+
}
|
|
81
|
+
function Footer({ className, children, sticky }) {
|
|
82
|
+
return /* @__PURE__ */ jsx(
|
|
83
|
+
"div",
|
|
84
|
+
{
|
|
85
|
+
className: [
|
|
86
|
+
"border-t border-slate-200/70 px-5 py-4 dark:border-white/10",
|
|
87
|
+
sticky ? "backdrop-blur supports-[backdrop-filter]:bg-white/60 dark:supports-[backdrop-filter]:bg-[#0b0a0a]/60" : "",
|
|
88
|
+
className != null ? className : ""
|
|
89
|
+
].join(" "),
|
|
90
|
+
children
|
|
91
|
+
}
|
|
92
|
+
);
|
|
93
|
+
}
|
|
94
|
+
const Drawer = { Root, Header, Body, Footer };
|
|
95
|
+
var Drawer_default = Drawer;
|
|
96
|
+
export {
|
|
97
|
+
Body as DrawerBody,
|
|
98
|
+
Footer as DrawerFooter,
|
|
99
|
+
Header as DrawerHeader,
|
|
100
|
+
Root as DrawerRoot,
|
|
101
|
+
Drawer_default as default
|
|
102
|
+
};
|
package/dist/Dropdown.d.mts
CHANGED
|
@@ -32,11 +32,8 @@ declare function Item({ children, icon, kbd, danger, disabled, require, hideIfUn
|
|
|
32
32
|
kbd?: string;
|
|
33
33
|
danger?: boolean;
|
|
34
34
|
disabled?: boolean;
|
|
35
|
-
/** Permiso(s) requerido(s) para ver/ejecutar este item */
|
|
36
35
|
require?: string | string[];
|
|
37
|
-
/** Si no tiene permisos, ocultar por completo (default true, o el del Dropdown) */
|
|
38
36
|
hideIfUnauthorized?: boolean;
|
|
39
|
-
/** Si no tiene permisos, deshabilitar (default true si no se oculta) */
|
|
40
37
|
disableIfUnauthorized?: boolean;
|
|
41
38
|
onSelect?: () => void;
|
|
42
39
|
} & HTMLAttributes<HTMLButtonElement>): react_jsx_runtime.JSX.Element | null;
|
package/dist/Dropdown.d.ts
CHANGED
|
@@ -32,11 +32,8 @@ declare function Item({ children, icon, kbd, danger, disabled, require, hideIfUn
|
|
|
32
32
|
kbd?: string;
|
|
33
33
|
danger?: boolean;
|
|
34
34
|
disabled?: boolean;
|
|
35
|
-
/** Permiso(s) requerido(s) para ver/ejecutar este item */
|
|
36
35
|
require?: string | string[];
|
|
37
|
-
/** Si no tiene permisos, ocultar por completo (default true, o el del Dropdown) */
|
|
38
36
|
hideIfUnauthorized?: boolean;
|
|
39
|
-
/** Si no tiene permisos, deshabilitar (default true si no se oculta) */
|
|
40
37
|
disableIfUnauthorized?: boolean;
|
|
41
38
|
onSelect?: () => void;
|
|
42
39
|
} & HTMLAttributes<HTMLButtonElement>): react_jsx_runtime.JSX.Element | null;
|