framepexls-ui-lib 0.1.12 → 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.d.mts +8 -9
- package/dist/AppTopbar.d.ts +8 -9
- package/dist/AppTopbar.js +31 -5
- package/dist/AppTopbar.mjs +21 -5
- 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 +97 -9
- package/dist/Button.mjs +87 -9
- 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/Tooltip.mjs
ADDED
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import React from "react";
|
|
4
|
+
import { createPortal } from "react-dom";
|
|
5
|
+
function Tooltip({ content, placement = "top", delay = 80, offset = 8, className = "", children }) {
|
|
6
|
+
const [open, setOpen] = React.useState(false);
|
|
7
|
+
const [pos, setPos] = React.useState(null);
|
|
8
|
+
const [id] = React.useState(() => Math.random().toString(36).slice(2));
|
|
9
|
+
const ref = React.useRef(null);
|
|
10
|
+
const timer = React.useRef(null);
|
|
11
|
+
const attach = (el) => {
|
|
12
|
+
ref.current = el;
|
|
13
|
+
};
|
|
14
|
+
const compute = React.useCallback(() => {
|
|
15
|
+
const el = ref.current;
|
|
16
|
+
if (!el) return;
|
|
17
|
+
const r = el.getBoundingClientRect();
|
|
18
|
+
const scrollX = window.scrollX;
|
|
19
|
+
const scrollY = window.scrollY;
|
|
20
|
+
let top = 0, left = 0;
|
|
21
|
+
if (placement === "top") {
|
|
22
|
+
top = r.top + scrollY - offset;
|
|
23
|
+
left = r.left + scrollX + r.width / 2;
|
|
24
|
+
} else if (placement === "bottom") {
|
|
25
|
+
top = r.bottom + scrollY + offset;
|
|
26
|
+
left = r.left + scrollX + r.width / 2;
|
|
27
|
+
} else if (placement === "left") {
|
|
28
|
+
top = r.top + scrollY + r.height / 2;
|
|
29
|
+
left = r.left + scrollX - offset;
|
|
30
|
+
} else {
|
|
31
|
+
top = r.top + scrollY + r.height / 2;
|
|
32
|
+
left = r.right + scrollX + offset;
|
|
33
|
+
}
|
|
34
|
+
setPos({ top, left });
|
|
35
|
+
}, [placement, offset]);
|
|
36
|
+
React.useEffect(() => {
|
|
37
|
+
if (!open) return;
|
|
38
|
+
compute();
|
|
39
|
+
const onScroll = () => compute();
|
|
40
|
+
const onResize = () => compute();
|
|
41
|
+
window.addEventListener("scroll", onScroll, true);
|
|
42
|
+
window.addEventListener("resize", onResize);
|
|
43
|
+
return () => {
|
|
44
|
+
window.removeEventListener("scroll", onScroll, true);
|
|
45
|
+
window.removeEventListener("resize", onResize);
|
|
46
|
+
};
|
|
47
|
+
}, [open, compute]);
|
|
48
|
+
const show = () => {
|
|
49
|
+
if (timer.current) window.clearTimeout(timer.current);
|
|
50
|
+
timer.current = window.setTimeout(() => setOpen(true), delay);
|
|
51
|
+
};
|
|
52
|
+
const hide = () => {
|
|
53
|
+
if (timer.current) window.clearTimeout(timer.current);
|
|
54
|
+
setOpen(false);
|
|
55
|
+
};
|
|
56
|
+
const triggerProps = {
|
|
57
|
+
ref: attach,
|
|
58
|
+
onMouseEnter: (e) => {
|
|
59
|
+
var _a, _b;
|
|
60
|
+
show();
|
|
61
|
+
(_b = (_a = children.props).onMouseEnter) == null ? void 0 : _b.call(_a, e);
|
|
62
|
+
},
|
|
63
|
+
onMouseLeave: (e) => {
|
|
64
|
+
var _a, _b;
|
|
65
|
+
hide();
|
|
66
|
+
(_b = (_a = children.props).onMouseLeave) == null ? void 0 : _b.call(_a, e);
|
|
67
|
+
},
|
|
68
|
+
onFocus: (e) => {
|
|
69
|
+
var _a, _b;
|
|
70
|
+
show();
|
|
71
|
+
(_b = (_a = children.props).onFocus) == null ? void 0 : _b.call(_a, e);
|
|
72
|
+
},
|
|
73
|
+
onBlur: (e) => {
|
|
74
|
+
var _a, _b;
|
|
75
|
+
hide();
|
|
76
|
+
(_b = (_a = children.props).onBlur) == null ? void 0 : _b.call(_a, e);
|
|
77
|
+
},
|
|
78
|
+
"aria-describedby": open ? id : void 0
|
|
79
|
+
};
|
|
80
|
+
const body = open && pos && typeof document !== "undefined" ? /* @__PURE__ */ jsx(
|
|
81
|
+
"div",
|
|
82
|
+
{
|
|
83
|
+
id,
|
|
84
|
+
role: "tooltip",
|
|
85
|
+
className: [
|
|
86
|
+
"pointer-events-none fixed z-[2000] max-w-xs rounded-xl border border-slate-200/80 bg-slate-900/95 px-2.5 py-1.5 text-[12px] text-white shadow-xl backdrop-blur",
|
|
87
|
+
"dark:border-white/10 dark:bg-white/10",
|
|
88
|
+
className != null ? className : ""
|
|
89
|
+
].join(" "),
|
|
90
|
+
style: {
|
|
91
|
+
top: placement === "top" || placement === "bottom" ? pos.top : pos.top,
|
|
92
|
+
left: placement === "top" || placement === "bottom" ? pos.left : pos.left,
|
|
93
|
+
transform: placement === "top" || placement === "bottom" ? "translate(-50%, -100%)" : placement === "left" ? "translate(-100%, -50%)" : "translate(0, -50%)"
|
|
94
|
+
},
|
|
95
|
+
children: content
|
|
96
|
+
}
|
|
97
|
+
) : null;
|
|
98
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
99
|
+
React.cloneElement(children, triggerProps),
|
|
100
|
+
body ? createPortal(body, document.body) : null
|
|
101
|
+
] });
|
|
102
|
+
}
|
|
103
|
+
export {
|
|
104
|
+
Tooltip as default
|
|
105
|
+
};
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import React__default from 'react';
|
|
3
|
+
|
|
4
|
+
type UploadItem = {
|
|
5
|
+
id: string;
|
|
6
|
+
name: string;
|
|
7
|
+
size: number;
|
|
8
|
+
progress?: number;
|
|
9
|
+
status?: "pending" | "uploading" | "done" | "error";
|
|
10
|
+
error?: string;
|
|
11
|
+
};
|
|
12
|
+
type UploadCardProps = {
|
|
13
|
+
title?: React__default.ReactNode;
|
|
14
|
+
subtitle?: React__default.ReactNode;
|
|
15
|
+
accept?: string;
|
|
16
|
+
multiple?: boolean;
|
|
17
|
+
disabled?: boolean;
|
|
18
|
+
buttonLabel?: string;
|
|
19
|
+
dropLabel?: React__default.ReactNode;
|
|
20
|
+
note?: React__default.ReactNode;
|
|
21
|
+
uploads?: UploadItem[];
|
|
22
|
+
className?: string;
|
|
23
|
+
onFilesSelected: (files: FileList | null) => void;
|
|
24
|
+
};
|
|
25
|
+
declare function UploadCard({ title, subtitle, accept, multiple, disabled, buttonLabel, dropLabel, note, uploads, className, onFilesSelected, }: UploadCardProps): react_jsx_runtime.JSX.Element;
|
|
26
|
+
|
|
27
|
+
export { type UploadCardProps, type UploadItem, UploadCard as default };
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import React__default from 'react';
|
|
3
|
+
|
|
4
|
+
type UploadItem = {
|
|
5
|
+
id: string;
|
|
6
|
+
name: string;
|
|
7
|
+
size: number;
|
|
8
|
+
progress?: number;
|
|
9
|
+
status?: "pending" | "uploading" | "done" | "error";
|
|
10
|
+
error?: string;
|
|
11
|
+
};
|
|
12
|
+
type UploadCardProps = {
|
|
13
|
+
title?: React__default.ReactNode;
|
|
14
|
+
subtitle?: React__default.ReactNode;
|
|
15
|
+
accept?: string;
|
|
16
|
+
multiple?: boolean;
|
|
17
|
+
disabled?: boolean;
|
|
18
|
+
buttonLabel?: string;
|
|
19
|
+
dropLabel?: React__default.ReactNode;
|
|
20
|
+
note?: React__default.ReactNode;
|
|
21
|
+
uploads?: UploadItem[];
|
|
22
|
+
className?: string;
|
|
23
|
+
onFilesSelected: (files: FileList | null) => void;
|
|
24
|
+
};
|
|
25
|
+
declare function UploadCard({ title, subtitle, accept, multiple, disabled, buttonLabel, dropLabel, note, uploads, className, onFilesSelected, }: UploadCardProps): react_jsx_runtime.JSX.Element;
|
|
26
|
+
|
|
27
|
+
export { type UploadCardProps, type UploadItem, UploadCard as default };
|
|
@@ -0,0 +1,143 @@
|
|
|
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 UploadCard_exports = {};
|
|
31
|
+
__export(UploadCard_exports, {
|
|
32
|
+
default: () => UploadCard
|
|
33
|
+
});
|
|
34
|
+
module.exports = __toCommonJS(UploadCard_exports);
|
|
35
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
|
+
var import_react = require("react");
|
|
37
|
+
var import_ChartCard = __toESM(require("./ChartCard"));
|
|
38
|
+
var import_Button = __toESM(require("./Button"));
|
|
39
|
+
var import_Input = __toESM(require("./Input"));
|
|
40
|
+
function UploadCard({
|
|
41
|
+
title = "Subir archivos",
|
|
42
|
+
subtitle,
|
|
43
|
+
accept,
|
|
44
|
+
multiple = true,
|
|
45
|
+
disabled,
|
|
46
|
+
buttonLabel = "Seleccionar",
|
|
47
|
+
dropLabel = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm font-medium", children: "Arrastra y suelta archivos aqu\xED o haz clic" }),
|
|
48
|
+
note = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-xs text-slate-500", children: "M\xE1ximo recomendado 16MB por archivo" }),
|
|
49
|
+
uploads,
|
|
50
|
+
className,
|
|
51
|
+
onFilesSelected
|
|
52
|
+
}) {
|
|
53
|
+
const inputRef = (0, import_react.useRef)(null);
|
|
54
|
+
const handleDrop = (e) => {
|
|
55
|
+
e.preventDefault();
|
|
56
|
+
onFilesSelected(e.dataTransfer.files);
|
|
57
|
+
};
|
|
58
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
59
|
+
import_ChartCard.default,
|
|
60
|
+
{
|
|
61
|
+
className,
|
|
62
|
+
title,
|
|
63
|
+
subtitle,
|
|
64
|
+
right: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
65
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
66
|
+
import_Input.default,
|
|
67
|
+
{
|
|
68
|
+
unstyled: true,
|
|
69
|
+
ref: inputRef,
|
|
70
|
+
type: "file",
|
|
71
|
+
accept,
|
|
72
|
+
multiple,
|
|
73
|
+
className: "hidden",
|
|
74
|
+
onChange: (e) => onFilesSelected(e.target.files)
|
|
75
|
+
}
|
|
76
|
+
),
|
|
77
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.default, { onClick: () => {
|
|
78
|
+
var _a;
|
|
79
|
+
return (_a = inputRef.current) == null ? void 0 : _a.click();
|
|
80
|
+
}, disabled, children: buttonLabel })
|
|
81
|
+
] }),
|
|
82
|
+
children: [
|
|
83
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
84
|
+
"div",
|
|
85
|
+
{
|
|
86
|
+
onDragOver: (e) => {
|
|
87
|
+
e.preventDefault();
|
|
88
|
+
e.dataTransfer.dropEffect = "copy";
|
|
89
|
+
},
|
|
90
|
+
onDrop: handleDrop,
|
|
91
|
+
onClick: () => {
|
|
92
|
+
var _a;
|
|
93
|
+
return (_a = inputRef.current) == null ? void 0 : _a.click();
|
|
94
|
+
},
|
|
95
|
+
className: "flex cursor-pointer flex-col items-center justify-center gap-2 rounded-2xl border border-dashed border-slate-300 bg-gradient-to-b from-white/90 to-white/60 p-8 text-center transition hover:border-slate-400 hover:bg-white/80 dark:border-white/10 dark:from-white/10 dark:to-white/5",
|
|
96
|
+
children: [
|
|
97
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
98
|
+
"svg",
|
|
99
|
+
{
|
|
100
|
+
viewBox: "0 0 24 24",
|
|
101
|
+
className: "h-8 w-8 text-slate-400",
|
|
102
|
+
fill: "none",
|
|
103
|
+
stroke: "currentColor",
|
|
104
|
+
strokeWidth: "1.6",
|
|
105
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 16V4M7 9l5-5 5 5M20 16v3a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-3" })
|
|
106
|
+
}
|
|
107
|
+
),
|
|
108
|
+
dropLabel,
|
|
109
|
+
note
|
|
110
|
+
]
|
|
111
|
+
}
|
|
112
|
+
),
|
|
113
|
+
uploads && uploads.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-4 space-y-2", children: uploads.map((u) => {
|
|
114
|
+
var _a, _b;
|
|
115
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
116
|
+
"div",
|
|
117
|
+
{
|
|
118
|
+
className: "flex items-center gap-3 rounded-xl border border-slate-200 bg-white/70 p-2 dark:border-white/10 dark:bg-white/5",
|
|
119
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0 flex-1", children: [
|
|
120
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
|
|
121
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "truncate text-sm font-medium", children: u.name }),
|
|
122
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "text-xs text-slate-500", children: [
|
|
123
|
+
Math.max(0, Math.min(100, Math.round((_a = u.progress) != null ? _a : 0))),
|
|
124
|
+
"%"
|
|
125
|
+
] })
|
|
126
|
+
] }),
|
|
127
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-1 h-2 w-full overflow-hidden rounded-full bg-slate-100 dark:bg-white/10", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
128
|
+
"div",
|
|
129
|
+
{
|
|
130
|
+
className: "h-full bg-gradient-to-r from-emerald-500/70 to-emerald-500/20",
|
|
131
|
+
style: { width: `${Math.max(0, Math.min(100, Math.round((_b = u.progress) != null ? _b : 0)))}%` }
|
|
132
|
+
}
|
|
133
|
+
) }),
|
|
134
|
+
u.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-1 text-xs text-blue-600", children: u.error })
|
|
135
|
+
] })
|
|
136
|
+
},
|
|
137
|
+
u.id
|
|
138
|
+
);
|
|
139
|
+
}) })
|
|
140
|
+
]
|
|
141
|
+
}
|
|
142
|
+
);
|
|
143
|
+
}
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { useRef } from "react";
|
|
4
|
+
import ChartCard from "./ChartCard";
|
|
5
|
+
import Button from "./Button";
|
|
6
|
+
import Input from "./Input";
|
|
7
|
+
function UploadCard({
|
|
8
|
+
title = "Subir archivos",
|
|
9
|
+
subtitle,
|
|
10
|
+
accept,
|
|
11
|
+
multiple = true,
|
|
12
|
+
disabled,
|
|
13
|
+
buttonLabel = "Seleccionar",
|
|
14
|
+
dropLabel = /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: "Arrastra y suelta archivos aqu\xED o haz clic" }),
|
|
15
|
+
note = /* @__PURE__ */ jsx("div", { className: "text-xs text-slate-500", children: "M\xE1ximo recomendado 16MB por archivo" }),
|
|
16
|
+
uploads,
|
|
17
|
+
className,
|
|
18
|
+
onFilesSelected
|
|
19
|
+
}) {
|
|
20
|
+
const inputRef = useRef(null);
|
|
21
|
+
const handleDrop = (e) => {
|
|
22
|
+
e.preventDefault();
|
|
23
|
+
onFilesSelected(e.dataTransfer.files);
|
|
24
|
+
};
|
|
25
|
+
return /* @__PURE__ */ jsxs(
|
|
26
|
+
ChartCard,
|
|
27
|
+
{
|
|
28
|
+
className,
|
|
29
|
+
title,
|
|
30
|
+
subtitle,
|
|
31
|
+
right: /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
32
|
+
/* @__PURE__ */ jsx(
|
|
33
|
+
Input,
|
|
34
|
+
{
|
|
35
|
+
unstyled: true,
|
|
36
|
+
ref: inputRef,
|
|
37
|
+
type: "file",
|
|
38
|
+
accept,
|
|
39
|
+
multiple,
|
|
40
|
+
className: "hidden",
|
|
41
|
+
onChange: (e) => onFilesSelected(e.target.files)
|
|
42
|
+
}
|
|
43
|
+
),
|
|
44
|
+
/* @__PURE__ */ jsx(Button, { onClick: () => {
|
|
45
|
+
var _a;
|
|
46
|
+
return (_a = inputRef.current) == null ? void 0 : _a.click();
|
|
47
|
+
}, disabled, children: buttonLabel })
|
|
48
|
+
] }),
|
|
49
|
+
children: [
|
|
50
|
+
/* @__PURE__ */ jsxs(
|
|
51
|
+
"div",
|
|
52
|
+
{
|
|
53
|
+
onDragOver: (e) => {
|
|
54
|
+
e.preventDefault();
|
|
55
|
+
e.dataTransfer.dropEffect = "copy";
|
|
56
|
+
},
|
|
57
|
+
onDrop: handleDrop,
|
|
58
|
+
onClick: () => {
|
|
59
|
+
var _a;
|
|
60
|
+
return (_a = inputRef.current) == null ? void 0 : _a.click();
|
|
61
|
+
},
|
|
62
|
+
className: "flex cursor-pointer flex-col items-center justify-center gap-2 rounded-2xl border border-dashed border-slate-300 bg-gradient-to-b from-white/90 to-white/60 p-8 text-center transition hover:border-slate-400 hover:bg-white/80 dark:border-white/10 dark:from-white/10 dark:to-white/5",
|
|
63
|
+
children: [
|
|
64
|
+
/* @__PURE__ */ jsx(
|
|
65
|
+
"svg",
|
|
66
|
+
{
|
|
67
|
+
viewBox: "0 0 24 24",
|
|
68
|
+
className: "h-8 w-8 text-slate-400",
|
|
69
|
+
fill: "none",
|
|
70
|
+
stroke: "currentColor",
|
|
71
|
+
strokeWidth: "1.6",
|
|
72
|
+
children: /* @__PURE__ */ jsx("path", { d: "M12 16V4M7 9l5-5 5 5M20 16v3a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-3" })
|
|
73
|
+
}
|
|
74
|
+
),
|
|
75
|
+
dropLabel,
|
|
76
|
+
note
|
|
77
|
+
]
|
|
78
|
+
}
|
|
79
|
+
),
|
|
80
|
+
uploads && uploads.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-4 space-y-2", children: uploads.map((u) => {
|
|
81
|
+
var _a, _b;
|
|
82
|
+
return /* @__PURE__ */ jsx(
|
|
83
|
+
"div",
|
|
84
|
+
{
|
|
85
|
+
className: "flex items-center gap-3 rounded-xl border border-slate-200 bg-white/70 p-2 dark:border-white/10 dark:bg-white/5",
|
|
86
|
+
children: /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
|
|
87
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
|
|
88
|
+
/* @__PURE__ */ jsx("div", { className: "truncate text-sm font-medium", children: u.name }),
|
|
89
|
+
/* @__PURE__ */ jsxs("div", { className: "text-xs text-slate-500", children: [
|
|
90
|
+
Math.max(0, Math.min(100, Math.round((_a = u.progress) != null ? _a : 0))),
|
|
91
|
+
"%"
|
|
92
|
+
] })
|
|
93
|
+
] }),
|
|
94
|
+
/* @__PURE__ */ jsx("div", { className: "mt-1 h-2 w-full overflow-hidden rounded-full bg-slate-100 dark:bg-white/10", children: /* @__PURE__ */ jsx(
|
|
95
|
+
"div",
|
|
96
|
+
{
|
|
97
|
+
className: "h-full bg-gradient-to-r from-emerald-500/70 to-emerald-500/20",
|
|
98
|
+
style: { width: `${Math.max(0, Math.min(100, Math.round((_b = u.progress) != null ? _b : 0)))}%` }
|
|
99
|
+
}
|
|
100
|
+
) }),
|
|
101
|
+
u.status === "error" && /* @__PURE__ */ jsx("div", { className: "mt-1 text-xs text-blue-600", children: u.error })
|
|
102
|
+
] })
|
|
103
|
+
},
|
|
104
|
+
u.id
|
|
105
|
+
);
|
|
106
|
+
}) })
|
|
107
|
+
]
|
|
108
|
+
}
|
|
109
|
+
);
|
|
110
|
+
}
|
|
111
|
+
export {
|
|
112
|
+
UploadCard as default
|
|
113
|
+
};
|
package/dist/index.d.mts
CHANGED
|
@@ -12,6 +12,9 @@ export { SortTh, Td, Th } from './Table.mjs';
|
|
|
12
12
|
export { default as Pagination, PaginationProps } from './Pagination.mjs';
|
|
13
13
|
export { default as InfoGrid, InfoItem } from './InfoGrid.mjs';
|
|
14
14
|
export { default as ChartCard } from './ChartCard.mjs';
|
|
15
|
+
export { default as UploadCard, UploadCardProps, UploadItem } from './UploadCard.mjs';
|
|
16
|
+
export { default as MediaCard, MediaCardProps } from './MediaCard.mjs';
|
|
17
|
+
export { default as MediaSelector, MediaSelectorItem, MediosAdapter } from './MediaSelector.mjs';
|
|
15
18
|
export { default as StatCard } from './StatCard.mjs';
|
|
16
19
|
export { default as Badge, Tone as BadgeTone } from './Badge.mjs';
|
|
17
20
|
export { default as BadgeCluster } from './BadgeCluster.mjs';
|
|
@@ -20,17 +23,23 @@ export { default as EmptyState } from './EmptyState.mjs';
|
|
|
20
23
|
export { default as Money } from './Money.mjs';
|
|
21
24
|
export { default as TimeAgo } from './TimeAgo.mjs';
|
|
22
25
|
export { default as AvatarSquare } from './AvatarSquare.mjs';
|
|
26
|
+
export { default as AvatarGroup } from './AvatarGroup.mjs';
|
|
23
27
|
export { default as AppTopbar } from './AppTopbar.mjs';
|
|
24
28
|
export { default as OrderButton } from './OrderButton.mjs';
|
|
25
29
|
export { default as SearchInput } from './SearchInput.mjs';
|
|
26
30
|
export { default as ReviewHistory, ReviewHistoryDialog } from './ReviewHistory.mjs';
|
|
27
31
|
export { MultiComboOption, default as MultiComboSelect, MultiComboSelectProps } from './MultiComboSelect.mjs';
|
|
28
32
|
export { default as Sidebar } from './Sidebar.mjs';
|
|
33
|
+
export { default as Card } from './Card.mjs';
|
|
34
|
+
export { default as Drawer } from './Drawer.mjs';
|
|
35
|
+
export { default as Tooltip } from './Tooltip.mjs';
|
|
36
|
+
export { default as Link } from './Link.mjs';
|
|
37
|
+
export { ToastProvider, useToast } from './Toast.mjs';
|
|
29
38
|
export { default as CalendarPanel, CalendarPanelProps } from './CalendarPanel.mjs';
|
|
30
39
|
export { MonthPopover, default as TimePopover, WeekPopover } from './TimePopover.mjs';
|
|
31
40
|
export { default as TimePanel } from './TimePanel.mjs';
|
|
32
41
|
export { TimeRange, default as TimeRangeField, TimeRangeFieldProps } from './TimeRangeField.mjs';
|
|
33
42
|
export { StepDef, default as Steps, StepsNav } from './Steps.mjs';
|
|
34
43
|
export { Aficionados, AuditarDocumento, Borrar, CajaDeMano, Cajas, Calendario, ChevronLeftRightIcon, CirculoAdvertencia, CirculoExito, CirculoPeligro, CirculoPorDefecto, ClientsIcon, CloseIcon, ContraseniaDeEmailIcon, Cotizaciones, DashboardIcon, Directorio, Edificio, Editar, Empresa, EscaneoFacial, EyeIcon, FlechaAbajo, FlechaArriba, Imagenes, LlamadaTelefonica, LogoutIcon, MarketingDigital, MediosDeComunicacionSocial, MenuIcon, MenuPuntosVerticalIcon, Nota, Ojo, OrdersIcon, PencilIcon, PermsIcon, ProductsIcon, PromoIcon, Retroalimentacion, RolesIcon, Sobre, Tablero, Tarea, Tickets, TrabajoEnEquipo, TrashIcon, UserIcon, UsersIcon, UsuarioProhibidoIcon, Usuarios } from './iconos/index.mjs';
|
|
35
|
-
import 'react/jsx-runtime';
|
|
36
44
|
import 'react';
|
|
45
|
+
import 'react/jsx-runtime';
|
package/dist/index.d.ts
CHANGED
|
@@ -12,6 +12,9 @@ export { SortTh, Td, Th } from './Table.js';
|
|
|
12
12
|
export { default as Pagination, PaginationProps } from './Pagination.js';
|
|
13
13
|
export { default as InfoGrid, InfoItem } from './InfoGrid.js';
|
|
14
14
|
export { default as ChartCard } from './ChartCard.js';
|
|
15
|
+
export { default as UploadCard, UploadCardProps, UploadItem } from './UploadCard.js';
|
|
16
|
+
export { default as MediaCard, MediaCardProps } from './MediaCard.js';
|
|
17
|
+
export { default as MediaSelector, MediaSelectorItem, MediosAdapter } from './MediaSelector.js';
|
|
15
18
|
export { default as StatCard } from './StatCard.js';
|
|
16
19
|
export { default as Badge, Tone as BadgeTone } from './Badge.js';
|
|
17
20
|
export { default as BadgeCluster } from './BadgeCluster.js';
|
|
@@ -20,17 +23,23 @@ export { default as EmptyState } from './EmptyState.js';
|
|
|
20
23
|
export { default as Money } from './Money.js';
|
|
21
24
|
export { default as TimeAgo } from './TimeAgo.js';
|
|
22
25
|
export { default as AvatarSquare } from './AvatarSquare.js';
|
|
26
|
+
export { default as AvatarGroup } from './AvatarGroup.js';
|
|
23
27
|
export { default as AppTopbar } from './AppTopbar.js';
|
|
24
28
|
export { default as OrderButton } from './OrderButton.js';
|
|
25
29
|
export { default as SearchInput } from './SearchInput.js';
|
|
26
30
|
export { default as ReviewHistory, ReviewHistoryDialog } from './ReviewHistory.js';
|
|
27
31
|
export { MultiComboOption, default as MultiComboSelect, MultiComboSelectProps } from './MultiComboSelect.js';
|
|
28
32
|
export { default as Sidebar } from './Sidebar.js';
|
|
33
|
+
export { default as Card } from './Card.js';
|
|
34
|
+
export { default as Drawer } from './Drawer.js';
|
|
35
|
+
export { default as Tooltip } from './Tooltip.js';
|
|
36
|
+
export { default as Link } from './Link.js';
|
|
37
|
+
export { ToastProvider, useToast } from './Toast.js';
|
|
29
38
|
export { default as CalendarPanel, CalendarPanelProps } from './CalendarPanel.js';
|
|
30
39
|
export { MonthPopover, default as TimePopover, WeekPopover } from './TimePopover.js';
|
|
31
40
|
export { default as TimePanel } from './TimePanel.js';
|
|
32
41
|
export { TimeRange, default as TimeRangeField, TimeRangeFieldProps } from './TimeRangeField.js';
|
|
33
42
|
export { StepDef, default as Steps, StepsNav } from './Steps.js';
|
|
34
43
|
export { Aficionados, AuditarDocumento, Borrar, CajaDeMano, Cajas, Calendario, ChevronLeftRightIcon, CirculoAdvertencia, CirculoExito, CirculoPeligro, CirculoPorDefecto, ClientsIcon, CloseIcon, ContraseniaDeEmailIcon, Cotizaciones, DashboardIcon, Directorio, Edificio, Editar, Empresa, EscaneoFacial, EyeIcon, FlechaAbajo, FlechaArriba, Imagenes, LlamadaTelefonica, LogoutIcon, MarketingDigital, MediosDeComunicacionSocial, MenuIcon, MenuPuntosVerticalIcon, Nota, Ojo, OrdersIcon, PencilIcon, PermsIcon, ProductsIcon, PromoIcon, Retroalimentacion, RolesIcon, Sobre, Tablero, Tarea, Tickets, TrabajoEnEquipo, TrashIcon, UserIcon, UsersIcon, UsuarioProhibidoIcon, Usuarios } from './iconos/index.js';
|
|
35
|
-
import 'react/jsx-runtime';
|
|
36
44
|
import 'react';
|
|
45
|
+
import 'react/jsx-runtime';
|
package/dist/index.js
CHANGED
|
@@ -31,22 +31,28 @@ var index_exports = {};
|
|
|
31
31
|
__export(index_exports, {
|
|
32
32
|
ActionIconButton: () => import_ActionIconButton.default,
|
|
33
33
|
AppTopbar: () => import_AppTopbar.default,
|
|
34
|
+
AvatarGroup: () => import_AvatarGroup.default,
|
|
34
35
|
AvatarSquare: () => import_AvatarSquare.default,
|
|
35
36
|
Badge: () => import_Badge.default,
|
|
36
37
|
BadgeCluster: () => import_BadgeCluster.default,
|
|
37
38
|
Breadcrumb: () => import_Breadcrumb.default,
|
|
38
39
|
Button: () => import_Button.default,
|
|
39
40
|
CalendarPanel: () => import_CalendarPanel.default,
|
|
41
|
+
Card: () => import_Card.default,
|
|
40
42
|
ChartCard: () => import_ChartCard.default,
|
|
41
43
|
CheckboxPillsGroup: () => import_CheckboxPillsGroup.default,
|
|
42
44
|
ColumnSelector: () => import_ColumnSelector.default,
|
|
43
45
|
ComboSelect: () => import_ComboSelect.default,
|
|
44
46
|
DateTimeField: () => import_DateTimeField.default,
|
|
45
47
|
Dialog: () => import_Dialog.default,
|
|
48
|
+
Drawer: () => import_Drawer.default,
|
|
46
49
|
Dropdown: () => import_Dropdown.default,
|
|
47
50
|
EmptyState: () => import_EmptyState.default,
|
|
48
51
|
InfoGrid: () => import_InfoGrid.default,
|
|
49
52
|
Input: () => import_Input.default,
|
|
53
|
+
Link: () => import_Link.default,
|
|
54
|
+
MediaCard: () => import_MediaCard.default,
|
|
55
|
+
MediaSelector: () => import_MediaSelector.default,
|
|
50
56
|
Money: () => import_Money.default,
|
|
51
57
|
MonthPopover: () => import_TimePopover2.MonthPopover,
|
|
52
58
|
MultiComboSelect: () => import_MultiComboSelect.default,
|
|
@@ -67,7 +73,11 @@ __export(index_exports, {
|
|
|
67
73
|
TimePanel: () => import_TimePanel.default,
|
|
68
74
|
TimePopover: () => import_TimePopover.default,
|
|
69
75
|
TimeRangeField: () => import_TimeRangeField.default,
|
|
70
|
-
|
|
76
|
+
ToastProvider: () => import_Toast.ToastProvider,
|
|
77
|
+
Tooltip: () => import_Tooltip.default,
|
|
78
|
+
UploadCard: () => import_UploadCard.default,
|
|
79
|
+
WeekPopover: () => import_TimePopover2.WeekPopover,
|
|
80
|
+
useToast: () => import_Toast.useToast
|
|
71
81
|
});
|
|
72
82
|
module.exports = __toCommonJS(index_exports);
|
|
73
83
|
var import_Button = __toESM(require("./Button"));
|
|
@@ -86,6 +96,9 @@ var import_Table = require("./Table");
|
|
|
86
96
|
var import_Pagination = __toESM(require("./Pagination"));
|
|
87
97
|
var import_InfoGrid = __toESM(require("./InfoGrid"));
|
|
88
98
|
var import_ChartCard = __toESM(require("./ChartCard"));
|
|
99
|
+
var import_UploadCard = __toESM(require("./UploadCard"));
|
|
100
|
+
var import_MediaCard = __toESM(require("./MediaCard"));
|
|
101
|
+
var import_MediaSelector = __toESM(require("./MediaSelector"));
|
|
89
102
|
var import_StatCard = __toESM(require("./StatCard"));
|
|
90
103
|
var import_Badge = __toESM(require("./Badge"));
|
|
91
104
|
var import_BadgeCluster = __toESM(require("./BadgeCluster"));
|
|
@@ -94,6 +107,7 @@ var import_EmptyState = __toESM(require("./EmptyState"));
|
|
|
94
107
|
var import_Money = __toESM(require("./Money"));
|
|
95
108
|
var import_TimeAgo = __toESM(require("./TimeAgo"));
|
|
96
109
|
var import_AvatarSquare = __toESM(require("./AvatarSquare"));
|
|
110
|
+
var import_AvatarGroup = __toESM(require("./AvatarGroup"));
|
|
97
111
|
var import_AppTopbar = __toESM(require("./AppTopbar"));
|
|
98
112
|
var import_OrderButton = __toESM(require("./OrderButton"));
|
|
99
113
|
var import_SearchInput = __toESM(require("./SearchInput"));
|
|
@@ -101,6 +115,11 @@ var import_ReviewHistory = __toESM(require("./ReviewHistory"));
|
|
|
101
115
|
var import_ReviewHistory2 = require("./ReviewHistory");
|
|
102
116
|
var import_MultiComboSelect = __toESM(require("./MultiComboSelect"));
|
|
103
117
|
var import_Sidebar = __toESM(require("./Sidebar"));
|
|
118
|
+
var import_Card = __toESM(require("./Card"));
|
|
119
|
+
var import_Drawer = __toESM(require("./Drawer"));
|
|
120
|
+
var import_Tooltip = __toESM(require("./Tooltip"));
|
|
121
|
+
var import_Link = __toESM(require("./Link"));
|
|
122
|
+
var import_Toast = require("./Toast");
|
|
104
123
|
var import_CalendarPanel = __toESM(require("./CalendarPanel"));
|
|
105
124
|
var import_TimePopover = __toESM(require("./TimePopover"));
|
|
106
125
|
var import_TimePopover2 = require("./TimePopover");
|
|
@@ -113,22 +132,28 @@ __reExport(index_exports, require("./iconos"), module.exports);
|
|
|
113
132
|
0 && (module.exports = {
|
|
114
133
|
ActionIconButton,
|
|
115
134
|
AppTopbar,
|
|
135
|
+
AvatarGroup,
|
|
116
136
|
AvatarSquare,
|
|
117
137
|
Badge,
|
|
118
138
|
BadgeCluster,
|
|
119
139
|
Breadcrumb,
|
|
120
140
|
Button,
|
|
121
141
|
CalendarPanel,
|
|
142
|
+
Card,
|
|
122
143
|
ChartCard,
|
|
123
144
|
CheckboxPillsGroup,
|
|
124
145
|
ColumnSelector,
|
|
125
146
|
ComboSelect,
|
|
126
147
|
DateTimeField,
|
|
127
148
|
Dialog,
|
|
149
|
+
Drawer,
|
|
128
150
|
Dropdown,
|
|
129
151
|
EmptyState,
|
|
130
152
|
InfoGrid,
|
|
131
153
|
Input,
|
|
154
|
+
Link,
|
|
155
|
+
MediaCard,
|
|
156
|
+
MediaSelector,
|
|
132
157
|
Money,
|
|
133
158
|
MonthPopover,
|
|
134
159
|
MultiComboSelect,
|
|
@@ -149,7 +174,11 @@ __reExport(index_exports, require("./iconos"), module.exports);
|
|
|
149
174
|
TimePanel,
|
|
150
175
|
TimePopover,
|
|
151
176
|
TimeRangeField,
|
|
177
|
+
ToastProvider,
|
|
178
|
+
Tooltip,
|
|
179
|
+
UploadCard,
|
|
152
180
|
WeekPopover,
|
|
181
|
+
useToast,
|
|
153
182
|
...require("./Dialog"),
|
|
154
183
|
...require("./Dropdown"),
|
|
155
184
|
...require("./iconos")
|