framepexls-ui-lib 0.1.22 → 0.1.24
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/AnalyticsCharts.d.mts +24 -0
- package/dist/AnalyticsCharts.d.ts +24 -0
- package/dist/AnalyticsCharts.js +307 -0
- package/dist/AnalyticsCharts.mjs +295 -0
- package/dist/AppTopbar.d.mts +5 -1
- package/dist/AppTopbar.d.ts +5 -1
- package/dist/AppTopbar.js +7 -4
- package/dist/AppTopbar.mjs +7 -4
- package/dist/Button.d.mts +1 -1
- package/dist/Button.d.ts +1 -1
- package/dist/Button.js +1 -1
- package/dist/Button.mjs +1 -1
- package/dist/Checkbox.d.mts +26 -0
- package/dist/Checkbox.d.ts +26 -0
- package/dist/Checkbox.js +100 -0
- package/dist/Checkbox.mjs +70 -0
- package/dist/KpiCard.d.mts +11 -0
- package/dist/KpiCard.d.ts +11 -0
- package/dist/KpiCard.js +35 -0
- package/dist/KpiCard.mjs +15 -0
- package/dist/Sidebar.js +2 -2
- package/dist/Sidebar.mjs +2 -2
- package/dist/index.d.mts +3 -0
- package/dist/index.d.ts +3 -0
- package/dist/index.js +13 -0
- package/dist/index.mjs +86 -78
- package/package.json +1 -1
package/dist/AppTopbar.d.ts
CHANGED
|
@@ -1,16 +1,20 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import Button from './Button.js';
|
|
3
|
+
import React__default from 'react';
|
|
2
4
|
|
|
3
5
|
type TopbarAction = {
|
|
4
6
|
label: string;
|
|
5
7
|
onClick?: () => void;
|
|
6
8
|
};
|
|
9
|
+
type ButtonColor = NonNullable<React__default.ComponentProps<typeof Button>["color"]>;
|
|
7
10
|
type Props = {
|
|
8
11
|
title: string;
|
|
9
12
|
subtitle?: string;
|
|
10
13
|
primary?: TopbarAction;
|
|
11
14
|
secondary?: TopbarAction;
|
|
12
15
|
actions?: TopbarAction[];
|
|
16
|
+
color?: ButtonColor;
|
|
13
17
|
};
|
|
14
|
-
declare function AppTopbar({ title, subtitle, secondary, primary, actions }: Props): react_jsx_runtime.JSX.Element;
|
|
18
|
+
declare function AppTopbar({ title, subtitle, secondary, primary, actions, color }: Props): react_jsx_runtime.JSX.Element;
|
|
15
19
|
|
|
16
20
|
export { AppTopbar as default };
|
package/dist/AppTopbar.js
CHANGED
|
@@ -34,7 +34,7 @@ __export(AppTopbar_exports, {
|
|
|
34
34
|
module.exports = __toCommonJS(AppTopbar_exports);
|
|
35
35
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
36
|
var import_Button = __toESM(require("./Button"));
|
|
37
|
-
function AppTopbar({ title, subtitle, secondary, primary, actions }) {
|
|
37
|
+
function AppTopbar({ title, subtitle, secondary, primary, actions, color }) {
|
|
38
38
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "sticky top-0 z-30 border-b border-black/5 bg-white backdrop-blur-xl dark:bg-[#0b0a0a]/60", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "px-4 sm:px-6 xl:px-8 xl:pl-20", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex h-16 items-center justify-between", children: [
|
|
39
39
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
|
|
40
40
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { className: "text-lg font-semibold tracking-tight", children: title }),
|
|
@@ -45,7 +45,8 @@ function AppTopbar({ title, subtitle, secondary, primary, actions }) {
|
|
|
45
45
|
import_Button.default,
|
|
46
46
|
{
|
|
47
47
|
onClick: a.onClick,
|
|
48
|
-
variant: "secondary",
|
|
48
|
+
variant: color ? "outline" : "secondary",
|
|
49
|
+
color,
|
|
49
50
|
size: "sm",
|
|
50
51
|
className: "shadow-sm",
|
|
51
52
|
children: a.label
|
|
@@ -56,7 +57,8 @@ function AppTopbar({ title, subtitle, secondary, primary, actions }) {
|
|
|
56
57
|
import_Button.default,
|
|
57
58
|
{
|
|
58
59
|
onClick: secondary.onClick,
|
|
59
|
-
variant: "secondary",
|
|
60
|
+
variant: color ? "outline" : "secondary",
|
|
61
|
+
color,
|
|
60
62
|
size: "sm",
|
|
61
63
|
className: "shadow-sm",
|
|
62
64
|
children: secondary.label
|
|
@@ -66,7 +68,8 @@ function AppTopbar({ title, subtitle, secondary, primary, actions }) {
|
|
|
66
68
|
import_Button.default,
|
|
67
69
|
{
|
|
68
70
|
onClick: primary.onClick,
|
|
69
|
-
variant: "danger",
|
|
71
|
+
variant: color ? "primary" : "danger",
|
|
72
|
+
color,
|
|
70
73
|
size: "sm",
|
|
71
74
|
className: "shadow-sm",
|
|
72
75
|
children: primary.label
|
package/dist/AppTopbar.mjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import Button from "./Button";
|
|
4
|
-
function AppTopbar({ title, subtitle, secondary, primary, actions }) {
|
|
4
|
+
function AppTopbar({ title, subtitle, secondary, primary, actions, color }) {
|
|
5
5
|
return /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-30 border-b border-black/5 bg-white backdrop-blur-xl dark:bg-[#0b0a0a]/60", children: /* @__PURE__ */ jsx("div", { className: "px-4 sm:px-6 xl:px-8 xl:pl-20", children: /* @__PURE__ */ jsxs("div", { className: "flex h-16 items-center justify-between", children: [
|
|
6
6
|
/* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ jsxs("div", { children: [
|
|
7
7
|
/* @__PURE__ */ jsx("h1", { className: "text-lg font-semibold tracking-tight", children: title }),
|
|
@@ -12,7 +12,8 @@ function AppTopbar({ title, subtitle, secondary, primary, actions }) {
|
|
|
12
12
|
Button,
|
|
13
13
|
{
|
|
14
14
|
onClick: a.onClick,
|
|
15
|
-
variant: "secondary",
|
|
15
|
+
variant: color ? "outline" : "secondary",
|
|
16
|
+
color,
|
|
16
17
|
size: "sm",
|
|
17
18
|
className: "shadow-sm",
|
|
18
19
|
children: a.label
|
|
@@ -23,7 +24,8 @@ function AppTopbar({ title, subtitle, secondary, primary, actions }) {
|
|
|
23
24
|
Button,
|
|
24
25
|
{
|
|
25
26
|
onClick: secondary.onClick,
|
|
26
|
-
variant: "secondary",
|
|
27
|
+
variant: color ? "outline" : "secondary",
|
|
28
|
+
color,
|
|
27
29
|
size: "sm",
|
|
28
30
|
className: "shadow-sm",
|
|
29
31
|
children: secondary.label
|
|
@@ -33,7 +35,8 @@ function AppTopbar({ title, subtitle, secondary, primary, actions }) {
|
|
|
33
35
|
Button,
|
|
34
36
|
{
|
|
35
37
|
onClick: primary.onClick,
|
|
36
|
-
variant: "danger",
|
|
38
|
+
variant: color ? "primary" : "danger",
|
|
39
|
+
color,
|
|
37
40
|
size: "sm",
|
|
38
41
|
className: "shadow-sm",
|
|
39
42
|
children: primary.label
|
package/dist/Button.d.mts
CHANGED
|
@@ -3,7 +3,7 @@ import React__default from 'react';
|
|
|
3
3
|
declare const Button: React__default.ForwardRefExoticComponent<{
|
|
4
4
|
variant?: "primary" | "secondary" | "outline" | "ghost" | "danger";
|
|
5
5
|
color?: "slate" | "gray" | "zinc" | "neutral" | "stone" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
|
|
6
|
-
size?: "sm" | "md" | "lg";
|
|
6
|
+
size?: "xs" | "sm" | "md" | "lg";
|
|
7
7
|
loading?: boolean;
|
|
8
8
|
leftIcon?: React__default.ReactNode;
|
|
9
9
|
rightIcon?: React__default.ReactNode;
|
package/dist/Button.d.ts
CHANGED
|
@@ -3,7 +3,7 @@ import React__default from 'react';
|
|
|
3
3
|
declare const Button: React__default.ForwardRefExoticComponent<{
|
|
4
4
|
variant?: "primary" | "secondary" | "outline" | "ghost" | "danger";
|
|
5
5
|
color?: "slate" | "gray" | "zinc" | "neutral" | "stone" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
|
|
6
|
-
size?: "sm" | "md" | "lg";
|
|
6
|
+
size?: "xs" | "sm" | "md" | "lg";
|
|
7
7
|
loading?: boolean;
|
|
8
8
|
leftIcon?: React__default.ReactNode;
|
|
9
9
|
rightIcon?: React__default.ReactNode;
|
package/dist/Button.js
CHANGED
|
@@ -69,7 +69,7 @@ const Button = import_react.default.forwardRef(({
|
|
|
69
69
|
);
|
|
70
70
|
}
|
|
71
71
|
const base = "inline-flex items-center justify-center rounded-xl font-medium transition focus:outline-none focus-visible:ring-2 disabled:opacity-60 disabled:cursor-not-allowed";
|
|
72
|
-
const sizes = size === "sm" ? `h-9 ${noPaddingX ? "" : "px-3"} text-sm` : size === "lg" ? `h-11 ${noPaddingX ? "" : "px-5"} text-base` : `h-10 ${noPaddingX ? "" : "px-4"} text-sm`;
|
|
72
|
+
const sizes = size === "xs" ? `h-8 ${noPaddingX ? "" : "px-2.5"} text-xs` : size === "sm" ? `h-9 ${noPaddingX ? "" : "px-3"} text-sm` : size === "lg" ? `h-11 ${noPaddingX ? "" : "px-5"} text-base` : `h-10 ${noPaddingX ? "" : "px-4"} text-sm`;
|
|
73
73
|
const SOLID = {
|
|
74
74
|
slate: "bg-slate-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-slate-500",
|
|
75
75
|
gray: "bg-gray-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-gray-500",
|
package/dist/Button.mjs
CHANGED
|
@@ -36,7 +36,7 @@ const Button = React.forwardRef(({
|
|
|
36
36
|
);
|
|
37
37
|
}
|
|
38
38
|
const base = "inline-flex items-center justify-center rounded-xl font-medium transition focus:outline-none focus-visible:ring-2 disabled:opacity-60 disabled:cursor-not-allowed";
|
|
39
|
-
const sizes = size === "sm" ? `h-9 ${noPaddingX ? "" : "px-3"} text-sm` : size === "lg" ? `h-11 ${noPaddingX ? "" : "px-5"} text-base` : `h-10 ${noPaddingX ? "" : "px-4"} text-sm`;
|
|
39
|
+
const sizes = size === "xs" ? `h-8 ${noPaddingX ? "" : "px-2.5"} text-xs` : size === "sm" ? `h-9 ${noPaddingX ? "" : "px-3"} text-sm` : size === "lg" ? `h-11 ${noPaddingX ? "" : "px-5"} text-base` : `h-10 ${noPaddingX ? "" : "px-4"} text-sm`;
|
|
40
40
|
const SOLID = {
|
|
41
41
|
slate: "bg-slate-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-slate-500",
|
|
42
42
|
gray: "bg-gray-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-gray-500",
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import React__default from 'react';
|
|
2
|
+
|
|
3
|
+
type CheckboxProps = Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
|
|
4
|
+
label?: React__default.ReactNode;
|
|
5
|
+
description?: React__default.ReactNode;
|
|
6
|
+
error?: boolean;
|
|
7
|
+
indeterminate?: boolean;
|
|
8
|
+
size?: "sm" | "md" | "lg";
|
|
9
|
+
tone?: "default" | "danger";
|
|
10
|
+
unstyled?: boolean;
|
|
11
|
+
className?: string;
|
|
12
|
+
inputClassName?: string;
|
|
13
|
+
};
|
|
14
|
+
declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
|
|
15
|
+
label?: React__default.ReactNode;
|
|
16
|
+
description?: React__default.ReactNode;
|
|
17
|
+
error?: boolean;
|
|
18
|
+
indeterminate?: boolean;
|
|
19
|
+
size?: "sm" | "md" | "lg";
|
|
20
|
+
tone?: "default" | "danger";
|
|
21
|
+
unstyled?: boolean;
|
|
22
|
+
className?: string;
|
|
23
|
+
inputClassName?: string;
|
|
24
|
+
} & React__default.RefAttributes<HTMLInputElement>>;
|
|
25
|
+
|
|
26
|
+
export { type CheckboxProps, Checkbox as default };
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import React__default from 'react';
|
|
2
|
+
|
|
3
|
+
type CheckboxProps = Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
|
|
4
|
+
label?: React__default.ReactNode;
|
|
5
|
+
description?: React__default.ReactNode;
|
|
6
|
+
error?: boolean;
|
|
7
|
+
indeterminate?: boolean;
|
|
8
|
+
size?: "sm" | "md" | "lg";
|
|
9
|
+
tone?: "default" | "danger";
|
|
10
|
+
unstyled?: boolean;
|
|
11
|
+
className?: string;
|
|
12
|
+
inputClassName?: string;
|
|
13
|
+
};
|
|
14
|
+
declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
|
|
15
|
+
label?: React__default.ReactNode;
|
|
16
|
+
description?: React__default.ReactNode;
|
|
17
|
+
error?: boolean;
|
|
18
|
+
indeterminate?: boolean;
|
|
19
|
+
size?: "sm" | "md" | "lg";
|
|
20
|
+
tone?: "default" | "danger";
|
|
21
|
+
unstyled?: boolean;
|
|
22
|
+
className?: string;
|
|
23
|
+
inputClassName?: string;
|
|
24
|
+
} & React__default.RefAttributes<HTMLInputElement>>;
|
|
25
|
+
|
|
26
|
+
export { type CheckboxProps, Checkbox as default };
|
package/dist/Checkbox.js
ADDED
|
@@ -0,0 +1,100 @@
|
|
|
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 Checkbox_exports = {};
|
|
31
|
+
__export(Checkbox_exports, {
|
|
32
|
+
default: () => Checkbox_default
|
|
33
|
+
});
|
|
34
|
+
module.exports = __toCommonJS(Checkbox_exports);
|
|
35
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
|
+
var import_react = __toESM(require("react"));
|
|
37
|
+
function cx(...a) {
|
|
38
|
+
return a.filter(Boolean).join(" ");
|
|
39
|
+
}
|
|
40
|
+
const baseInput = "rounded border border-slate-300 text-blue-600 shadow-sm outline-none focus:ring-4 focus:ring-blue-300/40 disabled:opacity-60 disabled:cursor-not-allowed dark:border-white/10";
|
|
41
|
+
const sizeMap = {
|
|
42
|
+
sm: "h-4 w-4",
|
|
43
|
+
md: "h-5 w-5",
|
|
44
|
+
lg: "h-6 w-6"
|
|
45
|
+
};
|
|
46
|
+
const Checkbox = import_react.default.forwardRef(
|
|
47
|
+
({
|
|
48
|
+
label,
|
|
49
|
+
description,
|
|
50
|
+
error,
|
|
51
|
+
indeterminate,
|
|
52
|
+
size = "md",
|
|
53
|
+
tone = "default",
|
|
54
|
+
unstyled,
|
|
55
|
+
className,
|
|
56
|
+
inputClassName,
|
|
57
|
+
id,
|
|
58
|
+
...props
|
|
59
|
+
}, ref) => {
|
|
60
|
+
const internalId = (0, import_react.useId)();
|
|
61
|
+
const inputRef = (0, import_react.useRef)(null);
|
|
62
|
+
(0, import_react.useEffect)(() => {
|
|
63
|
+
if (!ref) return;
|
|
64
|
+
if (typeof ref === "function") ref(inputRef.current);
|
|
65
|
+
else ref.current = inputRef.current;
|
|
66
|
+
}, [ref]);
|
|
67
|
+
(0, import_react.useEffect)(() => {
|
|
68
|
+
if (inputRef.current) inputRef.current.indeterminate = !!indeterminate;
|
|
69
|
+
}, [indeterminate]);
|
|
70
|
+
if (unstyled) {
|
|
71
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { ref: inputRef, id, type: "checkbox", ...props });
|
|
72
|
+
}
|
|
73
|
+
const descId = description ? `${id != null ? id : internalId}-desc` : void 0;
|
|
74
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: cx("inline-flex select-none items-start gap-2", className), children: [
|
|
75
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
76
|
+
"input",
|
|
77
|
+
{
|
|
78
|
+
ref: inputRef,
|
|
79
|
+
id: id != null ? id : internalId,
|
|
80
|
+
type: "checkbox",
|
|
81
|
+
"aria-invalid": error ? true : void 0,
|
|
82
|
+
"aria-describedby": descId,
|
|
83
|
+
className: cx(
|
|
84
|
+
baseInput,
|
|
85
|
+
sizeMap[size],
|
|
86
|
+
(error || tone === "danger") && "border-blue-400 focus:ring-blue-500/30",
|
|
87
|
+
inputClassName
|
|
88
|
+
),
|
|
89
|
+
...props
|
|
90
|
+
}
|
|
91
|
+
),
|
|
92
|
+
(label || description) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "leading-tight", children: [
|
|
93
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-sm text-slate-700 dark:text-slate-200", children: label }),
|
|
94
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id: descId, className: "text-[12px] text-slate-500 dark:text-slate-400", children: description })
|
|
95
|
+
] })
|
|
96
|
+
] });
|
|
97
|
+
}
|
|
98
|
+
);
|
|
99
|
+
Checkbox.displayName = "Checkbox";
|
|
100
|
+
var Checkbox_default = Checkbox;
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import React, { useEffect, useId, useRef } from "react";
|
|
4
|
+
function cx(...a) {
|
|
5
|
+
return a.filter(Boolean).join(" ");
|
|
6
|
+
}
|
|
7
|
+
const baseInput = "rounded border border-slate-300 text-blue-600 shadow-sm outline-none focus:ring-4 focus:ring-blue-300/40 disabled:opacity-60 disabled:cursor-not-allowed dark:border-white/10";
|
|
8
|
+
const sizeMap = {
|
|
9
|
+
sm: "h-4 w-4",
|
|
10
|
+
md: "h-5 w-5",
|
|
11
|
+
lg: "h-6 w-6"
|
|
12
|
+
};
|
|
13
|
+
const Checkbox = React.forwardRef(
|
|
14
|
+
({
|
|
15
|
+
label,
|
|
16
|
+
description,
|
|
17
|
+
error,
|
|
18
|
+
indeterminate,
|
|
19
|
+
size = "md",
|
|
20
|
+
tone = "default",
|
|
21
|
+
unstyled,
|
|
22
|
+
className,
|
|
23
|
+
inputClassName,
|
|
24
|
+
id,
|
|
25
|
+
...props
|
|
26
|
+
}, ref) => {
|
|
27
|
+
const internalId = useId();
|
|
28
|
+
const inputRef = useRef(null);
|
|
29
|
+
useEffect(() => {
|
|
30
|
+
if (!ref) return;
|
|
31
|
+
if (typeof ref === "function") ref(inputRef.current);
|
|
32
|
+
else ref.current = inputRef.current;
|
|
33
|
+
}, [ref]);
|
|
34
|
+
useEffect(() => {
|
|
35
|
+
if (inputRef.current) inputRef.current.indeterminate = !!indeterminate;
|
|
36
|
+
}, [indeterminate]);
|
|
37
|
+
if (unstyled) {
|
|
38
|
+
return /* @__PURE__ */ jsx("input", { ref: inputRef, id, type: "checkbox", ...props });
|
|
39
|
+
}
|
|
40
|
+
const descId = description ? `${id != null ? id : internalId}-desc` : void 0;
|
|
41
|
+
return /* @__PURE__ */ jsxs("label", { className: cx("inline-flex select-none items-start gap-2", className), children: [
|
|
42
|
+
/* @__PURE__ */ jsx(
|
|
43
|
+
"input",
|
|
44
|
+
{
|
|
45
|
+
ref: inputRef,
|
|
46
|
+
id: id != null ? id : internalId,
|
|
47
|
+
type: "checkbox",
|
|
48
|
+
"aria-invalid": error ? true : void 0,
|
|
49
|
+
"aria-describedby": descId,
|
|
50
|
+
className: cx(
|
|
51
|
+
baseInput,
|
|
52
|
+
sizeMap[size],
|
|
53
|
+
(error || tone === "danger") && "border-blue-400 focus:ring-blue-500/30",
|
|
54
|
+
inputClassName
|
|
55
|
+
),
|
|
56
|
+
...props
|
|
57
|
+
}
|
|
58
|
+
),
|
|
59
|
+
(label || description) && /* @__PURE__ */ jsxs("span", { className: "leading-tight", children: [
|
|
60
|
+
label && /* @__PURE__ */ jsx("span", { className: "text-sm text-slate-700 dark:text-slate-200", children: label }),
|
|
61
|
+
description && /* @__PURE__ */ jsx("div", { id: descId, className: "text-[12px] text-slate-500 dark:text-slate-400", children: description })
|
|
62
|
+
] })
|
|
63
|
+
] });
|
|
64
|
+
}
|
|
65
|
+
);
|
|
66
|
+
Checkbox.displayName = "Checkbox";
|
|
67
|
+
var Checkbox_default = Checkbox;
|
|
68
|
+
export {
|
|
69
|
+
Checkbox_default as default
|
|
70
|
+
};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
|
|
3
|
+
type KpiCardProps = {
|
|
4
|
+
label: string;
|
|
5
|
+
value: string | number;
|
|
6
|
+
delta: string;
|
|
7
|
+
help?: string;
|
|
8
|
+
};
|
|
9
|
+
declare function KpiCard({ label, value, delta, help }: KpiCardProps): react_jsx_runtime.JSX.Element;
|
|
10
|
+
|
|
11
|
+
export { type KpiCardProps, KpiCard as default };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
|
|
3
|
+
type KpiCardProps = {
|
|
4
|
+
label: string;
|
|
5
|
+
value: string | number;
|
|
6
|
+
delta: string;
|
|
7
|
+
help?: string;
|
|
8
|
+
};
|
|
9
|
+
declare function KpiCard({ label, value, delta, help }: KpiCardProps): react_jsx_runtime.JSX.Element;
|
|
10
|
+
|
|
11
|
+
export { type KpiCardProps, KpiCard as default };
|
package/dist/KpiCard.js
ADDED
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __export = (target, all) => {
|
|
8
|
+
for (var name in all)
|
|
9
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
10
|
+
};
|
|
11
|
+
var __copyProps = (to, from, except, desc) => {
|
|
12
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
13
|
+
for (let key of __getOwnPropNames(from))
|
|
14
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
15
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
16
|
+
}
|
|
17
|
+
return to;
|
|
18
|
+
};
|
|
19
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
20
|
+
var KpiCard_exports = {};
|
|
21
|
+
__export(KpiCard_exports, {
|
|
22
|
+
default: () => KpiCard
|
|
23
|
+
});
|
|
24
|
+
module.exports = __toCommonJS(KpiCard_exports);
|
|
25
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
26
|
+
function KpiCard({ label, value, delta, help }) {
|
|
27
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "rounded-2xl border border-white/50 bg-white/75 p-4 text-slate-900/90 backdrop-blur-sm dark:border-white/10 dark:bg-white/10 dark:text-white", children: [
|
|
28
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between", children: [
|
|
29
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-slate-600 dark:text-white/80", children: label }),
|
|
30
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "rounded-full bg-blue-600/10 px-2 py-0.5 text-[12px] font-semibold text-blue-700 dark:bg-blue-500/15 dark:text-blue-200", children: delta })
|
|
31
|
+
] }),
|
|
32
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-1 text-xl font-extrabold", children: value }),
|
|
33
|
+
help && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-0.5 text-[12px] text-slate-500 dark:text-white/70", children: help })
|
|
34
|
+
] });
|
|
35
|
+
}
|
package/dist/KpiCard.mjs
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
function KpiCard({ label, value, delta, help }) {
|
|
4
|
+
return /* @__PURE__ */ jsxs("div", { className: "rounded-2xl border border-white/50 bg-white/75 p-4 text-slate-900/90 backdrop-blur-sm dark:border-white/10 dark:bg-white/10 dark:text-white", children: [
|
|
5
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
|
|
6
|
+
/* @__PURE__ */ jsx("span", { className: "text-slate-600 dark:text-white/80", children: label }),
|
|
7
|
+
/* @__PURE__ */ jsx("span", { className: "rounded-full bg-blue-600/10 px-2 py-0.5 text-[12px] font-semibold text-blue-700 dark:bg-blue-500/15 dark:text-blue-200", children: delta })
|
|
8
|
+
] }),
|
|
9
|
+
/* @__PURE__ */ jsx("div", { className: "mt-1 text-xl font-extrabold", children: value }),
|
|
10
|
+
help && /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-[12px] text-slate-500 dark:text-white/70", children: help })
|
|
11
|
+
] });
|
|
12
|
+
}
|
|
13
|
+
export {
|
|
14
|
+
KpiCard as default
|
|
15
|
+
};
|
package/dist/Sidebar.js
CHANGED
|
@@ -164,8 +164,8 @@ function Sidebar({
|
|
|
164
164
|
userMenuSlot,
|
|
165
165
|
onBrandClick,
|
|
166
166
|
collapsedKey = "ga:sidebar-collapsed",
|
|
167
|
-
brandInitials = "
|
|
168
|
-
brandTitle = "
|
|
167
|
+
brandInitials = "L",
|
|
168
|
+
brandTitle = "Lorem",
|
|
169
169
|
brandSubtitle = "Tablero",
|
|
170
170
|
color = "blue"
|
|
171
171
|
}) {
|
package/dist/Sidebar.mjs
CHANGED
|
@@ -131,8 +131,8 @@ function Sidebar({
|
|
|
131
131
|
userMenuSlot,
|
|
132
132
|
onBrandClick,
|
|
133
133
|
collapsedKey = "ga:sidebar-collapsed",
|
|
134
|
-
brandInitials = "
|
|
135
|
-
brandTitle = "
|
|
134
|
+
brandInitials = "L",
|
|
135
|
+
brandTitle = "Lorem",
|
|
136
136
|
brandSubtitle = "Tablero",
|
|
137
137
|
color = "blue"
|
|
138
138
|
}) {
|
package/dist/index.d.mts
CHANGED
|
@@ -2,6 +2,7 @@ export { default as Button } from './Button.mjs';
|
|
|
2
2
|
export { default as ActionIconButton } from './ActionIconButton.mjs';
|
|
3
3
|
export { default as Input, InputProps } from './Input.mjs';
|
|
4
4
|
export { default as Textarea, TextareaProps } from './Textarea.mjs';
|
|
5
|
+
export { default as Checkbox, CheckboxProps } from './Checkbox.mjs';
|
|
5
6
|
export { default as CheckboxPillsGroup, CheckboxPillsGroupProps, PillsOption } from './CheckboxPillsGroup.mjs';
|
|
6
7
|
export { FilterGroup, default as FiltersMultiSelect, FiltersMultiSelectProps } from './FiltersMultiSelect.mjs';
|
|
7
8
|
export { default as Select } from './Select.mjs';
|
|
@@ -14,10 +15,12 @@ export { SortTh, Td, Th } from './Table.mjs';
|
|
|
14
15
|
export { default as Pagination, PaginationProps } from './Pagination.mjs';
|
|
15
16
|
export { default as InfoGrid, InfoItem } from './InfoGrid.mjs';
|
|
16
17
|
export { default as ChartCard } from './ChartCard.mjs';
|
|
18
|
+
export { CtrHorizontalBar, DestinoDonut, TopImpresionesBar } from './AnalyticsCharts.mjs';
|
|
17
19
|
export { default as UploadCard, UploadCardProps, UploadItem } from './UploadCard.mjs';
|
|
18
20
|
export { default as MediaCard, MediaCardProps } from './MediaCard.mjs';
|
|
19
21
|
export { default as MediaSelector, MediaSelectorItem, MediosAdapter } from './MediaSelector.mjs';
|
|
20
22
|
export { default as StatCard } from './StatCard.mjs';
|
|
23
|
+
export { default as KpiCard, KpiCardProps } from './KpiCard.mjs';
|
|
21
24
|
export { default as Badge, Tone as BadgeTone } from './Badge.mjs';
|
|
22
25
|
export { default as BadgeCluster } from './BadgeCluster.mjs';
|
|
23
26
|
export { default as Breadcrumb } from './Breadcrumb.mjs';
|
package/dist/index.d.ts
CHANGED
|
@@ -2,6 +2,7 @@ export { default as Button } from './Button.js';
|
|
|
2
2
|
export { default as ActionIconButton } from './ActionIconButton.js';
|
|
3
3
|
export { default as Input, InputProps } from './Input.js';
|
|
4
4
|
export { default as Textarea, TextareaProps } from './Textarea.js';
|
|
5
|
+
export { default as Checkbox, CheckboxProps } from './Checkbox.js';
|
|
5
6
|
export { default as CheckboxPillsGroup, CheckboxPillsGroupProps, PillsOption } from './CheckboxPillsGroup.js';
|
|
6
7
|
export { FilterGroup, default as FiltersMultiSelect, FiltersMultiSelectProps } from './FiltersMultiSelect.js';
|
|
7
8
|
export { default as Select } from './Select.js';
|
|
@@ -14,10 +15,12 @@ export { SortTh, Td, Th } from './Table.js';
|
|
|
14
15
|
export { default as Pagination, PaginationProps } from './Pagination.js';
|
|
15
16
|
export { default as InfoGrid, InfoItem } from './InfoGrid.js';
|
|
16
17
|
export { default as ChartCard } from './ChartCard.js';
|
|
18
|
+
export { CtrHorizontalBar, DestinoDonut, TopImpresionesBar } from './AnalyticsCharts.js';
|
|
17
19
|
export { default as UploadCard, UploadCardProps, UploadItem } from './UploadCard.js';
|
|
18
20
|
export { default as MediaCard, MediaCardProps } from './MediaCard.js';
|
|
19
21
|
export { default as MediaSelector, MediaSelectorItem, MediosAdapter } from './MediaSelector.js';
|
|
20
22
|
export { default as StatCard } from './StatCard.js';
|
|
23
|
+
export { default as KpiCard, KpiCardProps } from './KpiCard.js';
|
|
21
24
|
export { default as Badge, Tone as BadgeTone } from './Badge.js';
|
|
22
25
|
export { default as BadgeCluster } from './BadgeCluster.js';
|
|
23
26
|
export { default as Breadcrumb } from './Breadcrumb.js';
|
package/dist/index.js
CHANGED
|
@@ -40,10 +40,13 @@ __export(index_exports, {
|
|
|
40
40
|
CalendarPanel: () => import_CalendarPanel.default,
|
|
41
41
|
Card: () => import_Card.default,
|
|
42
42
|
ChartCard: () => import_ChartCard.default,
|
|
43
|
+
Checkbox: () => import_Checkbox.default,
|
|
43
44
|
CheckboxPillsGroup: () => import_CheckboxPillsGroup.default,
|
|
44
45
|
ColumnSelector: () => import_ColumnSelector.default,
|
|
45
46
|
ComboSelect: () => import_ComboSelect.default,
|
|
47
|
+
CtrHorizontalBar: () => import_AnalyticsCharts.CtrHorizontalBar,
|
|
46
48
|
DateTimeField: () => import_DateTimeField.default,
|
|
49
|
+
DestinoDonut: () => import_AnalyticsCharts.DestinoDonut,
|
|
47
50
|
Dialog: () => import_Dialog.default,
|
|
48
51
|
Drawer: () => import_Drawer.default,
|
|
49
52
|
Dropdown: () => import_Dropdown.default,
|
|
@@ -51,6 +54,7 @@ __export(index_exports, {
|
|
|
51
54
|
FiltersMultiSelect: () => import_FiltersMultiSelect.default,
|
|
52
55
|
InfoGrid: () => import_InfoGrid.default,
|
|
53
56
|
Input: () => import_Input.default,
|
|
57
|
+
KpiCard: () => import_KpiCard.default,
|
|
54
58
|
Link: () => import_Link.default,
|
|
55
59
|
MediaCard: () => import_MediaCard.default,
|
|
56
60
|
MediaSelector: () => import_MediaSelector.default,
|
|
@@ -78,6 +82,7 @@ __export(index_exports, {
|
|
|
78
82
|
TimeRangeField: () => import_TimeRangeField.default,
|
|
79
83
|
ToastProvider: () => import_Toast.ToastProvider,
|
|
80
84
|
Tooltip: () => import_Tooltip.default,
|
|
85
|
+
TopImpresionesBar: () => import_AnalyticsCharts.TopImpresionesBar,
|
|
81
86
|
UploadCard: () => import_UploadCard.default,
|
|
82
87
|
WeekPopover: () => import_TimePopover2.WeekPopover,
|
|
83
88
|
useToast: () => import_Toast.useToast
|
|
@@ -87,6 +92,7 @@ var import_Button = __toESM(require("./Button"));
|
|
|
87
92
|
var import_ActionIconButton = __toESM(require("./ActionIconButton"));
|
|
88
93
|
var import_Input = __toESM(require("./Input"));
|
|
89
94
|
var import_Textarea = __toESM(require("./Textarea"));
|
|
95
|
+
var import_Checkbox = __toESM(require("./Checkbox"));
|
|
90
96
|
var import_CheckboxPillsGroup = __toESM(require("./CheckboxPillsGroup"));
|
|
91
97
|
var import_FiltersMultiSelect = __toESM(require("./FiltersMultiSelect"));
|
|
92
98
|
var import_Select = __toESM(require("./Select"));
|
|
@@ -101,10 +107,12 @@ var import_Table = require("./Table");
|
|
|
101
107
|
var import_Pagination = __toESM(require("./Pagination"));
|
|
102
108
|
var import_InfoGrid = __toESM(require("./InfoGrid"));
|
|
103
109
|
var import_ChartCard = __toESM(require("./ChartCard"));
|
|
110
|
+
var import_AnalyticsCharts = require("./AnalyticsCharts");
|
|
104
111
|
var import_UploadCard = __toESM(require("./UploadCard"));
|
|
105
112
|
var import_MediaCard = __toESM(require("./MediaCard"));
|
|
106
113
|
var import_MediaSelector = __toESM(require("./MediaSelector"));
|
|
107
114
|
var import_StatCard = __toESM(require("./StatCard"));
|
|
115
|
+
var import_KpiCard = __toESM(require("./KpiCard"));
|
|
108
116
|
var import_Badge = __toESM(require("./Badge"));
|
|
109
117
|
var import_BadgeCluster = __toESM(require("./BadgeCluster"));
|
|
110
118
|
var import_Breadcrumb = __toESM(require("./Breadcrumb"));
|
|
@@ -147,10 +155,13 @@ __reExport(index_exports, require("./iconos"), module.exports);
|
|
|
147
155
|
CalendarPanel,
|
|
148
156
|
Card,
|
|
149
157
|
ChartCard,
|
|
158
|
+
Checkbox,
|
|
150
159
|
CheckboxPillsGroup,
|
|
151
160
|
ColumnSelector,
|
|
152
161
|
ComboSelect,
|
|
162
|
+
CtrHorizontalBar,
|
|
153
163
|
DateTimeField,
|
|
164
|
+
DestinoDonut,
|
|
154
165
|
Dialog,
|
|
155
166
|
Drawer,
|
|
156
167
|
Dropdown,
|
|
@@ -158,6 +169,7 @@ __reExport(index_exports, require("./iconos"), module.exports);
|
|
|
158
169
|
FiltersMultiSelect,
|
|
159
170
|
InfoGrid,
|
|
160
171
|
Input,
|
|
172
|
+
KpiCard,
|
|
161
173
|
Link,
|
|
162
174
|
MediaCard,
|
|
163
175
|
MediaSelector,
|
|
@@ -185,6 +197,7 @@ __reExport(index_exports, require("./iconos"), module.exports);
|
|
|
185
197
|
TimeRangeField,
|
|
186
198
|
ToastProvider,
|
|
187
199
|
Tooltip,
|
|
200
|
+
TopImpresionesBar,
|
|
188
201
|
UploadCard,
|
|
189
202
|
WeekPopover,
|
|
190
203
|
useToast,
|