analytica-frontend-lib 1.0.21 → 1.0.23
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/Alert/Alert.d.mts +13 -0
- package/dist/Alert/Alert.d.ts +13 -0
- package/dist/Alert/Alert.js +158 -0
- package/dist/Alert/Alert.mjs +85 -0
- package/dist/Badge/Badge.d.mts +47 -0
- package/dist/Badge/Badge.d.ts +47 -0
- package/dist/Badge/Badge.js +117 -0
- package/dist/Badge/Badge.mjs +92 -0
- package/dist/Button/Button.d.mts +46 -0
- package/dist/Button/Button.d.ts +46 -0
- package/dist/Button/Button.js +84 -0
- package/dist/Button/Button.mjs +59 -0
- package/dist/CheckBox/CheckBox.d.mts +74 -0
- package/dist/CheckBox/CheckBox.d.ts +74 -0
- package/dist/CheckBox/CheckBox.js +264 -0
- package/dist/CheckBox/CheckBox.mjs +195 -0
- package/dist/DropdownMenu/DropdownMenu.d.mts +29 -0
- package/dist/DropdownMenu/DropdownMenu.d.ts +29 -0
- package/dist/DropdownMenu/DropdownMenu.js +262 -0
- package/dist/DropdownMenu/DropdownMenu.mjs +242 -0
- package/dist/IconButton/IconButton.d.mts +77 -0
- package/dist/IconButton/IconButton.d.ts +77 -0
- package/dist/IconButton/IconButton.js +79 -0
- package/dist/IconButton/IconButton.mjs +54 -0
- package/dist/IconRoundedButton/IconRoundedButton.d.mts +35 -0
- package/dist/IconRoundedButton/IconRoundedButton.d.ts +35 -0
- package/dist/IconRoundedButton/IconRoundedButton.js +68 -0
- package/dist/IconRoundedButton/IconRoundedButton.mjs +43 -0
- package/dist/NavButton/NavButton.d.mts +58 -0
- package/dist/NavButton/NavButton.d.ts +58 -0
- package/dist/NavButton/NavButton.js +76 -0
- package/dist/NavButton/NavButton.mjs +51 -0
- package/dist/SelectionButton/SelectionButton.d.mts +58 -0
- package/dist/SelectionButton/SelectionButton.d.ts +58 -0
- package/dist/SelectionButton/SelectionButton.js +81 -0
- package/dist/SelectionButton/SelectionButton.mjs +56 -0
- package/dist/Table/Table.d.mts +17 -0
- package/dist/Table/Table.d.ts +17 -0
- package/dist/Table/Table.js +139 -0
- package/dist/Table/Table.mjs +107 -0
- package/dist/Text/Text.d.mts +59 -0
- package/dist/Text/Text.d.ts +59 -0
- package/dist/Text/Text.js +77 -0
- package/dist/Text/Text.mjs +6 -0
- package/dist/TextArea/TextArea.d.mts +69 -0
- package/dist/TextArea/TextArea.d.ts +69 -0
- package/dist/TextArea/TextArea.js +211 -0
- package/dist/TextArea/TextArea.mjs +142 -0
- package/dist/Toast/Toast.d.mts +17 -0
- package/dist/Toast/Toast.d.ts +17 -0
- package/dist/Toast/Toast.js +100 -0
- package/dist/Toast/Toast.mjs +7 -0
- package/dist/Toast/utils/ToastStore.d.mts +19 -0
- package/dist/Toast/utils/ToastStore.d.ts +19 -0
- package/dist/Toast/utils/ToastStore.js +44 -0
- package/dist/Toast/utils/ToastStore.mjs +6 -0
- package/dist/Toast/utils/Toaster.d.mts +11 -0
- package/dist/Toast/utils/Toaster.d.ts +11 -0
- package/dist/Toast/utils/Toaster.js +145 -0
- package/dist/Toast/utils/Toaster.mjs +35 -0
- package/dist/chunk-MI5FIRHM.mjs +75 -0
- package/dist/chunk-TT3VCQGR.mjs +53 -0
- package/dist/chunk-WIOCQOM7.mjs +20 -0
- package/dist/index.css +103 -0
- package/dist/index.d.mts +68 -2
- package/dist/index.d.ts +68 -2
- package/dist/index.js +217 -84
- package/dist/index.mjs +215 -79
- package/package.json +71 -3
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { HTMLAttributes } from 'react';
|
|
3
|
+
|
|
4
|
+
type AlertProps = {
|
|
5
|
+
title?: string;
|
|
6
|
+
description: string;
|
|
7
|
+
variant?: 'solid' | 'outline';
|
|
8
|
+
action?: 'default' | 'info' | 'success' | 'warning' | 'error';
|
|
9
|
+
className?: string;
|
|
10
|
+
} & HTMLAttributes<HTMLDivElement>;
|
|
11
|
+
declare const Alert: ({ variant, title, description, action, className, ...props }: AlertProps) => react_jsx_runtime.JSX.Element;
|
|
12
|
+
|
|
13
|
+
export { Alert };
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { HTMLAttributes } from 'react';
|
|
3
|
+
|
|
4
|
+
type AlertProps = {
|
|
5
|
+
title?: string;
|
|
6
|
+
description: string;
|
|
7
|
+
variant?: 'solid' | 'outline';
|
|
8
|
+
action?: 'default' | 'info' | 'success' | 'warning' | 'error';
|
|
9
|
+
className?: string;
|
|
10
|
+
} & HTMLAttributes<HTMLDivElement>;
|
|
11
|
+
declare const Alert: ({ variant, title, description, action, className, ...props }: AlertProps) => react_jsx_runtime.JSX.Element;
|
|
12
|
+
|
|
13
|
+
export { Alert };
|
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// src/components/Alert/Alert.tsx
|
|
21
|
+
var Alert_exports = {};
|
|
22
|
+
__export(Alert_exports, {
|
|
23
|
+
Alert: () => Alert
|
|
24
|
+
});
|
|
25
|
+
module.exports = __toCommonJS(Alert_exports);
|
|
26
|
+
var import_phosphor_react = require("phosphor-react");
|
|
27
|
+
|
|
28
|
+
// src/components/Text/Text.tsx
|
|
29
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
30
|
+
var Text = ({
|
|
31
|
+
children,
|
|
32
|
+
size = "md",
|
|
33
|
+
weight = "normal",
|
|
34
|
+
color = "text-text-950",
|
|
35
|
+
as,
|
|
36
|
+
className = "",
|
|
37
|
+
...props
|
|
38
|
+
}) => {
|
|
39
|
+
let sizeClasses = "";
|
|
40
|
+
let weightClasses = "";
|
|
41
|
+
const sizeClassMap = {
|
|
42
|
+
"2xs": "text-2xs",
|
|
43
|
+
xs: "text-xs",
|
|
44
|
+
sm: "text-sm",
|
|
45
|
+
md: "text-md",
|
|
46
|
+
lg: "text-lg",
|
|
47
|
+
xl: "text-xl",
|
|
48
|
+
"2xl": "text-2xl",
|
|
49
|
+
"3xl": "text-3xl",
|
|
50
|
+
"4xl": "text-4xl",
|
|
51
|
+
"5xl": "text-5xl",
|
|
52
|
+
"6xl": "text-6xl"
|
|
53
|
+
};
|
|
54
|
+
sizeClasses = sizeClassMap[size] ?? sizeClassMap.md;
|
|
55
|
+
const weightClassMap = {
|
|
56
|
+
hairline: "font-hairline",
|
|
57
|
+
light: "font-light",
|
|
58
|
+
normal: "font-normal",
|
|
59
|
+
medium: "font-medium",
|
|
60
|
+
semibold: "font-semibold",
|
|
61
|
+
bold: "font-bold",
|
|
62
|
+
extrabold: "font-extrabold",
|
|
63
|
+
black: "font-black"
|
|
64
|
+
};
|
|
65
|
+
weightClasses = weightClassMap[weight] ?? weightClassMap.normal;
|
|
66
|
+
const baseClasses = "font-primary";
|
|
67
|
+
const Component = as ?? "p";
|
|
68
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
69
|
+
Component,
|
|
70
|
+
{
|
|
71
|
+
className: `${baseClasses} ${sizeClasses} ${weightClasses} ${color} ${className}`,
|
|
72
|
+
...props,
|
|
73
|
+
children
|
|
74
|
+
}
|
|
75
|
+
);
|
|
76
|
+
};
|
|
77
|
+
|
|
78
|
+
// src/components/Alert/Alert.tsx
|
|
79
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
80
|
+
var VARIANT_ACTION_CLASSES = {
|
|
81
|
+
solid: {
|
|
82
|
+
default: "bg-background-50 border-transparent",
|
|
83
|
+
info: "bg-info border-transparent",
|
|
84
|
+
success: "bg-success border-transparent",
|
|
85
|
+
warning: "bg-warning border-transparent",
|
|
86
|
+
error: "bg-error border-transparent"
|
|
87
|
+
},
|
|
88
|
+
outline: {
|
|
89
|
+
default: "bg-background border border-border-100",
|
|
90
|
+
info: "bg-background border border-border-100",
|
|
91
|
+
success: "bg-background border border-border-100",
|
|
92
|
+
warning: "bg-background border border-border-100",
|
|
93
|
+
error: "bg-background border border-border-100"
|
|
94
|
+
}
|
|
95
|
+
};
|
|
96
|
+
var COLOR_CLASSES = {
|
|
97
|
+
default: "text-text-950",
|
|
98
|
+
info: "text-info-800",
|
|
99
|
+
success: "text-success-800",
|
|
100
|
+
warning: "text-warning-800",
|
|
101
|
+
error: "text-error-800"
|
|
102
|
+
};
|
|
103
|
+
var ICONS = {
|
|
104
|
+
default: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_phosphor_react.CheckCircle, { size: 18 }),
|
|
105
|
+
info: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_phosphor_react.Info, { size: 18 }),
|
|
106
|
+
success: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_phosphor_react.CheckCircle, { size: 18 }),
|
|
107
|
+
warning: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_phosphor_react.WarningCircle, { size: 18 }),
|
|
108
|
+
error: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_phosphor_react.XCircle, { size: 18 })
|
|
109
|
+
};
|
|
110
|
+
var Alert = ({
|
|
111
|
+
variant = "solid",
|
|
112
|
+
title,
|
|
113
|
+
description,
|
|
114
|
+
action = "default",
|
|
115
|
+
className,
|
|
116
|
+
...props
|
|
117
|
+
}) => {
|
|
118
|
+
const baseClasses = "alert-wrapper flex items-start gap-2 w-[384px] py-3 px-4 font-inherit rounded-md";
|
|
119
|
+
const variantClasses = VARIANT_ACTION_CLASSES[variant][action];
|
|
120
|
+
const variantColor = COLOR_CLASSES[action];
|
|
121
|
+
const variantIcon = ICONS[action];
|
|
122
|
+
const hasHeading = Boolean(title);
|
|
123
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
124
|
+
"div",
|
|
125
|
+
{
|
|
126
|
+
className: `${baseClasses} ${variantClasses} ${className ?? ""}`,
|
|
127
|
+
...props,
|
|
128
|
+
children: [
|
|
129
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: `mt-0.5 ${variantColor}`, children: variantIcon }),
|
|
130
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
|
|
131
|
+
hasHeading && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
132
|
+
Text,
|
|
133
|
+
{
|
|
134
|
+
size: "md",
|
|
135
|
+
weight: "medium",
|
|
136
|
+
color: variantColor,
|
|
137
|
+
className: "mb-0.5",
|
|
138
|
+
children: title
|
|
139
|
+
}
|
|
140
|
+
),
|
|
141
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
142
|
+
Text,
|
|
143
|
+
{
|
|
144
|
+
size: hasHeading ? "sm" : "md",
|
|
145
|
+
weight: "normal",
|
|
146
|
+
color: !hasHeading ? variantColor : "text-text-700",
|
|
147
|
+
children: description
|
|
148
|
+
}
|
|
149
|
+
)
|
|
150
|
+
] })
|
|
151
|
+
]
|
|
152
|
+
}
|
|
153
|
+
);
|
|
154
|
+
};
|
|
155
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
156
|
+
0 && (module.exports = {
|
|
157
|
+
Alert
|
|
158
|
+
});
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Text
|
|
3
|
+
} from "../chunk-TT3VCQGR.mjs";
|
|
4
|
+
|
|
5
|
+
// src/components/Alert/Alert.tsx
|
|
6
|
+
import { CheckCircle, Info, WarningCircle, XCircle } from "phosphor-react";
|
|
7
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
8
|
+
var VARIANT_ACTION_CLASSES = {
|
|
9
|
+
solid: {
|
|
10
|
+
default: "bg-background-50 border-transparent",
|
|
11
|
+
info: "bg-info border-transparent",
|
|
12
|
+
success: "bg-success border-transparent",
|
|
13
|
+
warning: "bg-warning border-transparent",
|
|
14
|
+
error: "bg-error border-transparent"
|
|
15
|
+
},
|
|
16
|
+
outline: {
|
|
17
|
+
default: "bg-background border border-border-100",
|
|
18
|
+
info: "bg-background border border-border-100",
|
|
19
|
+
success: "bg-background border border-border-100",
|
|
20
|
+
warning: "bg-background border border-border-100",
|
|
21
|
+
error: "bg-background border border-border-100"
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
var COLOR_CLASSES = {
|
|
25
|
+
default: "text-text-950",
|
|
26
|
+
info: "text-info-800",
|
|
27
|
+
success: "text-success-800",
|
|
28
|
+
warning: "text-warning-800",
|
|
29
|
+
error: "text-error-800"
|
|
30
|
+
};
|
|
31
|
+
var ICONS = {
|
|
32
|
+
default: /* @__PURE__ */ jsx(CheckCircle, { size: 18 }),
|
|
33
|
+
info: /* @__PURE__ */ jsx(Info, { size: 18 }),
|
|
34
|
+
success: /* @__PURE__ */ jsx(CheckCircle, { size: 18 }),
|
|
35
|
+
warning: /* @__PURE__ */ jsx(WarningCircle, { size: 18 }),
|
|
36
|
+
error: /* @__PURE__ */ jsx(XCircle, { size: 18 })
|
|
37
|
+
};
|
|
38
|
+
var Alert = ({
|
|
39
|
+
variant = "solid",
|
|
40
|
+
title,
|
|
41
|
+
description,
|
|
42
|
+
action = "default",
|
|
43
|
+
className,
|
|
44
|
+
...props
|
|
45
|
+
}) => {
|
|
46
|
+
const baseClasses = "alert-wrapper flex items-start gap-2 w-[384px] py-3 px-4 font-inherit rounded-md";
|
|
47
|
+
const variantClasses = VARIANT_ACTION_CLASSES[variant][action];
|
|
48
|
+
const variantColor = COLOR_CLASSES[action];
|
|
49
|
+
const variantIcon = ICONS[action];
|
|
50
|
+
const hasHeading = Boolean(title);
|
|
51
|
+
return /* @__PURE__ */ jsxs(
|
|
52
|
+
"div",
|
|
53
|
+
{
|
|
54
|
+
className: `${baseClasses} ${variantClasses} ${className ?? ""}`,
|
|
55
|
+
...props,
|
|
56
|
+
children: [
|
|
57
|
+
/* @__PURE__ */ jsx("span", { className: `mt-0.5 ${variantColor}`, children: variantIcon }),
|
|
58
|
+
/* @__PURE__ */ jsxs("div", { children: [
|
|
59
|
+
hasHeading && /* @__PURE__ */ jsx(
|
|
60
|
+
Text,
|
|
61
|
+
{
|
|
62
|
+
size: "md",
|
|
63
|
+
weight: "medium",
|
|
64
|
+
color: variantColor,
|
|
65
|
+
className: "mb-0.5",
|
|
66
|
+
children: title
|
|
67
|
+
}
|
|
68
|
+
),
|
|
69
|
+
/* @__PURE__ */ jsx(
|
|
70
|
+
Text,
|
|
71
|
+
{
|
|
72
|
+
size: hasHeading ? "sm" : "md",
|
|
73
|
+
weight: "normal",
|
|
74
|
+
color: !hasHeading ? variantColor : "text-text-700",
|
|
75
|
+
children: description
|
|
76
|
+
}
|
|
77
|
+
)
|
|
78
|
+
] })
|
|
79
|
+
]
|
|
80
|
+
}
|
|
81
|
+
);
|
|
82
|
+
};
|
|
83
|
+
export {
|
|
84
|
+
Alert
|
|
85
|
+
};
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { ReactNode, HTMLAttributes } from 'react';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Badge component props interface
|
|
6
|
+
*/
|
|
7
|
+
type BadgeProps = {
|
|
8
|
+
/** Content to be displayed inside the badge */
|
|
9
|
+
children?: ReactNode;
|
|
10
|
+
/** Ícone à direita do texto */
|
|
11
|
+
iconRight?: ReactNode;
|
|
12
|
+
/** Ícone à esquerda do texto */
|
|
13
|
+
iconLeft?: ReactNode;
|
|
14
|
+
/** Size of the badge */
|
|
15
|
+
size?: 'small' | 'medium' | 'large';
|
|
16
|
+
/** Visual variant of the badge */
|
|
17
|
+
variant?: 'solid' | 'outlined' | 'exams' | 'resultStatus' | 'notification';
|
|
18
|
+
/** Action type of the badge */
|
|
19
|
+
action?: 'error' | 'warning' | 'success' | 'info' | 'muted' | 'exam1' | 'exam2' | 'exam3' | 'exam4' | 'positive' | 'negative';
|
|
20
|
+
/** Additional CSS classes to apply */
|
|
21
|
+
className?: string;
|
|
22
|
+
notificationActive?: boolean;
|
|
23
|
+
} & HTMLAttributes<HTMLDivElement>;
|
|
24
|
+
/**
|
|
25
|
+
* Badge component for Analytica Ensino platforms
|
|
26
|
+
*
|
|
27
|
+
* A flexible button component with multiple variants, sizes and actions.
|
|
28
|
+
* Fully compatible with Next.js 15 and React 19.
|
|
29
|
+
*
|
|
30
|
+
* @param children - The content to display inside the badge
|
|
31
|
+
* @param size - The size variant (extra-small, small, medium, large, extra-large)
|
|
32
|
+
* @param variant - The visual style variant (solid, outline, link)
|
|
33
|
+
* @param action - The action type (primary, positive, negative)
|
|
34
|
+
* @param className - Additional CSS classes
|
|
35
|
+
* @param props - All other standard div HTML attributes
|
|
36
|
+
* @returns A styled badge element
|
|
37
|
+
*
|
|
38
|
+
* @example
|
|
39
|
+
* ```tsx
|
|
40
|
+
* <Badge variant="solid" action="info" size="medium">
|
|
41
|
+
* Information
|
|
42
|
+
* </Badge>
|
|
43
|
+
* ```
|
|
44
|
+
*/
|
|
45
|
+
declare const Badge: ({ children, iconLeft, iconRight, size, variant, action, className, notificationActive, ...props }: BadgeProps) => react_jsx_runtime.JSX.Element;
|
|
46
|
+
|
|
47
|
+
export { Badge };
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { ReactNode, HTMLAttributes } from 'react';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Badge component props interface
|
|
6
|
+
*/
|
|
7
|
+
type BadgeProps = {
|
|
8
|
+
/** Content to be displayed inside the badge */
|
|
9
|
+
children?: ReactNode;
|
|
10
|
+
/** Ícone à direita do texto */
|
|
11
|
+
iconRight?: ReactNode;
|
|
12
|
+
/** Ícone à esquerda do texto */
|
|
13
|
+
iconLeft?: ReactNode;
|
|
14
|
+
/** Size of the badge */
|
|
15
|
+
size?: 'small' | 'medium' | 'large';
|
|
16
|
+
/** Visual variant of the badge */
|
|
17
|
+
variant?: 'solid' | 'outlined' | 'exams' | 'resultStatus' | 'notification';
|
|
18
|
+
/** Action type of the badge */
|
|
19
|
+
action?: 'error' | 'warning' | 'success' | 'info' | 'muted' | 'exam1' | 'exam2' | 'exam3' | 'exam4' | 'positive' | 'negative';
|
|
20
|
+
/** Additional CSS classes to apply */
|
|
21
|
+
className?: string;
|
|
22
|
+
notificationActive?: boolean;
|
|
23
|
+
} & HTMLAttributes<HTMLDivElement>;
|
|
24
|
+
/**
|
|
25
|
+
* Badge component for Analytica Ensino platforms
|
|
26
|
+
*
|
|
27
|
+
* A flexible button component with multiple variants, sizes and actions.
|
|
28
|
+
* Fully compatible with Next.js 15 and React 19.
|
|
29
|
+
*
|
|
30
|
+
* @param children - The content to display inside the badge
|
|
31
|
+
* @param size - The size variant (extra-small, small, medium, large, extra-large)
|
|
32
|
+
* @param variant - The visual style variant (solid, outline, link)
|
|
33
|
+
* @param action - The action type (primary, positive, negative)
|
|
34
|
+
* @param className - Additional CSS classes
|
|
35
|
+
* @param props - All other standard div HTML attributes
|
|
36
|
+
* @returns A styled badge element
|
|
37
|
+
*
|
|
38
|
+
* @example
|
|
39
|
+
* ```tsx
|
|
40
|
+
* <Badge variant="solid" action="info" size="medium">
|
|
41
|
+
* Information
|
|
42
|
+
* </Badge>
|
|
43
|
+
* ```
|
|
44
|
+
*/
|
|
45
|
+
declare const Badge: ({ children, iconLeft, iconRight, size, variant, action, className, notificationActive, ...props }: BadgeProps) => react_jsx_runtime.JSX.Element;
|
|
46
|
+
|
|
47
|
+
export { Badge };
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// src/components/Badge/Badge.tsx
|
|
21
|
+
var Badge_exports = {};
|
|
22
|
+
__export(Badge_exports, {
|
|
23
|
+
Badge: () => Badge
|
|
24
|
+
});
|
|
25
|
+
module.exports = __toCommonJS(Badge_exports);
|
|
26
|
+
var import_phosphor_react = require("phosphor-react");
|
|
27
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
28
|
+
var VARIANT_ACTION_CLASSES = {
|
|
29
|
+
solid: {
|
|
30
|
+
error: "bg-error text-error-700 focus-visible:outline-none",
|
|
31
|
+
warning: "bg-warning text-warning-800 focus-visible:outline-none",
|
|
32
|
+
success: "bg-success text-success-800 focus-visible:outline-none",
|
|
33
|
+
info: "bg-info text-info-800 focus-visible:outline-none",
|
|
34
|
+
muted: "bg-background-muted text-background-800 focus-visible:outline-none"
|
|
35
|
+
},
|
|
36
|
+
outlined: {
|
|
37
|
+
error: "bg-error text-error-700 border border-error-300 focus-visible:outline-none",
|
|
38
|
+
warning: "bg-warning text-warning-800 border border-warning-300 focus-visible:outline-none",
|
|
39
|
+
success: "bg-success text-success-800 border border-success-300 focus-visible:outline-none",
|
|
40
|
+
info: "bg-info text-info-800 border border-info-300 focus-visible:outline-none",
|
|
41
|
+
muted: "bg-background-muted text-background-800 border border-border-300 focus-visible:outline-none"
|
|
42
|
+
},
|
|
43
|
+
exams: {
|
|
44
|
+
exam1: "bg-exam-1 text-info-200 focus-visible:outline-none",
|
|
45
|
+
exam2: "bg-exam-2 text-typography-1 focus-visible:outline-none",
|
|
46
|
+
exam3: "bg-exam-3 text-typography-2 focus-visible:outline-none",
|
|
47
|
+
exam4: "bg-exam-4 text-success-700 focus-visible:outline-none"
|
|
48
|
+
},
|
|
49
|
+
resultStatus: {
|
|
50
|
+
negative: "bg-error text-error-800 focus-visible:outline-none",
|
|
51
|
+
positive: "bg-success text-success-800 focus-visible:outline-none"
|
|
52
|
+
},
|
|
53
|
+
notification: "text-primary"
|
|
54
|
+
};
|
|
55
|
+
var SIZE_CLASSES = {
|
|
56
|
+
small: "text-2xs px-2 py-1",
|
|
57
|
+
medium: "text-xs px-2 py-1",
|
|
58
|
+
large: "text-sm px-2 py-1"
|
|
59
|
+
};
|
|
60
|
+
var SIZE_CLASSES_ICON = {
|
|
61
|
+
small: "size-3",
|
|
62
|
+
medium: "size-3.5",
|
|
63
|
+
large: "size-4"
|
|
64
|
+
};
|
|
65
|
+
var Badge = ({
|
|
66
|
+
children,
|
|
67
|
+
iconLeft,
|
|
68
|
+
iconRight,
|
|
69
|
+
size = "medium",
|
|
70
|
+
variant = "solid",
|
|
71
|
+
action = "error",
|
|
72
|
+
className = "",
|
|
73
|
+
notificationActive = false,
|
|
74
|
+
...props
|
|
75
|
+
}) => {
|
|
76
|
+
const sizeClasses = SIZE_CLASSES[size];
|
|
77
|
+
const sizeClassesIcon = SIZE_CLASSES_ICON[size];
|
|
78
|
+
const variantActionMap = VARIANT_ACTION_CLASSES[variant] || {};
|
|
79
|
+
const variantClasses = typeof variantActionMap === "string" ? variantActionMap : variantActionMap[action] ?? variantActionMap.muted ?? "";
|
|
80
|
+
const baseClasses = "inline-flex items-center justify-center rounded-xs font-medium gap-1 relative";
|
|
81
|
+
const baseClassesIcon = "flex items-center";
|
|
82
|
+
if (variant === "notification") {
|
|
83
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
84
|
+
"div",
|
|
85
|
+
{
|
|
86
|
+
className: `${baseClasses} ${variantClasses} ${sizeClasses} ${className}`,
|
|
87
|
+
...props,
|
|
88
|
+
children: [
|
|
89
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_phosphor_react.Bell, { size: 24, className: "text-primary-950" }),
|
|
90
|
+
notificationActive && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
91
|
+
"span",
|
|
92
|
+
{
|
|
93
|
+
"data-testid": "notification-dot",
|
|
94
|
+
className: "absolute top-[5px] right-[10px] block h-2 w-2 rounded-full bg-indicator-error ring-2 ring-white"
|
|
95
|
+
}
|
|
96
|
+
)
|
|
97
|
+
]
|
|
98
|
+
}
|
|
99
|
+
);
|
|
100
|
+
}
|
|
101
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
102
|
+
"div",
|
|
103
|
+
{
|
|
104
|
+
className: `${baseClasses} ${variantClasses} ${sizeClasses} ${className}`,
|
|
105
|
+
...props,
|
|
106
|
+
children: [
|
|
107
|
+
iconLeft && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `${baseClassesIcon} ${sizeClassesIcon}`, children: iconLeft }),
|
|
108
|
+
children,
|
|
109
|
+
iconRight && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `${baseClassesIcon} ${sizeClassesIcon}`, children: iconRight })
|
|
110
|
+
]
|
|
111
|
+
}
|
|
112
|
+
);
|
|
113
|
+
};
|
|
114
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
115
|
+
0 && (module.exports = {
|
|
116
|
+
Badge
|
|
117
|
+
});
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
// src/components/Badge/Badge.tsx
|
|
2
|
+
import { Bell } from "phosphor-react";
|
|
3
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
+
var VARIANT_ACTION_CLASSES = {
|
|
5
|
+
solid: {
|
|
6
|
+
error: "bg-error text-error-700 focus-visible:outline-none",
|
|
7
|
+
warning: "bg-warning text-warning-800 focus-visible:outline-none",
|
|
8
|
+
success: "bg-success text-success-800 focus-visible:outline-none",
|
|
9
|
+
info: "bg-info text-info-800 focus-visible:outline-none",
|
|
10
|
+
muted: "bg-background-muted text-background-800 focus-visible:outline-none"
|
|
11
|
+
},
|
|
12
|
+
outlined: {
|
|
13
|
+
error: "bg-error text-error-700 border border-error-300 focus-visible:outline-none",
|
|
14
|
+
warning: "bg-warning text-warning-800 border border-warning-300 focus-visible:outline-none",
|
|
15
|
+
success: "bg-success text-success-800 border border-success-300 focus-visible:outline-none",
|
|
16
|
+
info: "bg-info text-info-800 border border-info-300 focus-visible:outline-none",
|
|
17
|
+
muted: "bg-background-muted text-background-800 border border-border-300 focus-visible:outline-none"
|
|
18
|
+
},
|
|
19
|
+
exams: {
|
|
20
|
+
exam1: "bg-exam-1 text-info-200 focus-visible:outline-none",
|
|
21
|
+
exam2: "bg-exam-2 text-typography-1 focus-visible:outline-none",
|
|
22
|
+
exam3: "bg-exam-3 text-typography-2 focus-visible:outline-none",
|
|
23
|
+
exam4: "bg-exam-4 text-success-700 focus-visible:outline-none"
|
|
24
|
+
},
|
|
25
|
+
resultStatus: {
|
|
26
|
+
negative: "bg-error text-error-800 focus-visible:outline-none",
|
|
27
|
+
positive: "bg-success text-success-800 focus-visible:outline-none"
|
|
28
|
+
},
|
|
29
|
+
notification: "text-primary"
|
|
30
|
+
};
|
|
31
|
+
var SIZE_CLASSES = {
|
|
32
|
+
small: "text-2xs px-2 py-1",
|
|
33
|
+
medium: "text-xs px-2 py-1",
|
|
34
|
+
large: "text-sm px-2 py-1"
|
|
35
|
+
};
|
|
36
|
+
var SIZE_CLASSES_ICON = {
|
|
37
|
+
small: "size-3",
|
|
38
|
+
medium: "size-3.5",
|
|
39
|
+
large: "size-4"
|
|
40
|
+
};
|
|
41
|
+
var Badge = ({
|
|
42
|
+
children,
|
|
43
|
+
iconLeft,
|
|
44
|
+
iconRight,
|
|
45
|
+
size = "medium",
|
|
46
|
+
variant = "solid",
|
|
47
|
+
action = "error",
|
|
48
|
+
className = "",
|
|
49
|
+
notificationActive = false,
|
|
50
|
+
...props
|
|
51
|
+
}) => {
|
|
52
|
+
const sizeClasses = SIZE_CLASSES[size];
|
|
53
|
+
const sizeClassesIcon = SIZE_CLASSES_ICON[size];
|
|
54
|
+
const variantActionMap = VARIANT_ACTION_CLASSES[variant] || {};
|
|
55
|
+
const variantClasses = typeof variantActionMap === "string" ? variantActionMap : variantActionMap[action] ?? variantActionMap.muted ?? "";
|
|
56
|
+
const baseClasses = "inline-flex items-center justify-center rounded-xs font-medium gap-1 relative";
|
|
57
|
+
const baseClassesIcon = "flex items-center";
|
|
58
|
+
if (variant === "notification") {
|
|
59
|
+
return /* @__PURE__ */ jsxs(
|
|
60
|
+
"div",
|
|
61
|
+
{
|
|
62
|
+
className: `${baseClasses} ${variantClasses} ${sizeClasses} ${className}`,
|
|
63
|
+
...props,
|
|
64
|
+
children: [
|
|
65
|
+
/* @__PURE__ */ jsx(Bell, { size: 24, className: "text-primary-950" }),
|
|
66
|
+
notificationActive && /* @__PURE__ */ jsx(
|
|
67
|
+
"span",
|
|
68
|
+
{
|
|
69
|
+
"data-testid": "notification-dot",
|
|
70
|
+
className: "absolute top-[5px] right-[10px] block h-2 w-2 rounded-full bg-indicator-error ring-2 ring-white"
|
|
71
|
+
}
|
|
72
|
+
)
|
|
73
|
+
]
|
|
74
|
+
}
|
|
75
|
+
);
|
|
76
|
+
}
|
|
77
|
+
return /* @__PURE__ */ jsxs(
|
|
78
|
+
"div",
|
|
79
|
+
{
|
|
80
|
+
className: `${baseClasses} ${variantClasses} ${sizeClasses} ${className}`,
|
|
81
|
+
...props,
|
|
82
|
+
children: [
|
|
83
|
+
iconLeft && /* @__PURE__ */ jsx("span", { className: `${baseClassesIcon} ${sizeClassesIcon}`, children: iconLeft }),
|
|
84
|
+
children,
|
|
85
|
+
iconRight && /* @__PURE__ */ jsx("span", { className: `${baseClassesIcon} ${sizeClassesIcon}`, children: iconRight })
|
|
86
|
+
]
|
|
87
|
+
}
|
|
88
|
+
);
|
|
89
|
+
};
|
|
90
|
+
export {
|
|
91
|
+
Badge
|
|
92
|
+
};
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { ReactNode, ButtonHTMLAttributes } from 'react';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Button component props interface
|
|
6
|
+
*/
|
|
7
|
+
type ButtonProps = {
|
|
8
|
+
/** Content to be displayed inside the button */
|
|
9
|
+
children: ReactNode;
|
|
10
|
+
/** Ícone à esquerda do texto */
|
|
11
|
+
iconLeft?: ReactNode;
|
|
12
|
+
/** Ícone à direita do texto */
|
|
13
|
+
iconRight?: ReactNode;
|
|
14
|
+
/** Size of the button */
|
|
15
|
+
size?: 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large';
|
|
16
|
+
/** Visual variant of the button */
|
|
17
|
+
variant?: 'solid' | 'outline' | 'link';
|
|
18
|
+
/** Action type of the button */
|
|
19
|
+
action?: 'primary' | 'positive' | 'negative';
|
|
20
|
+
/** Additional CSS classes to apply */
|
|
21
|
+
className?: string;
|
|
22
|
+
} & ButtonHTMLAttributes<HTMLButtonElement>;
|
|
23
|
+
/**
|
|
24
|
+
* Button component for Analytica Ensino platforms
|
|
25
|
+
*
|
|
26
|
+
* A flexible button component with multiple variants, sizes and actions.
|
|
27
|
+
* Fully compatible with Next.js 15 and React 19.
|
|
28
|
+
*
|
|
29
|
+
* @param children - The content to display inside the button
|
|
30
|
+
* @param size - The size variant (extra-small, small, medium, large, extra-large)
|
|
31
|
+
* @param variant - The visual style variant (solid, outline, link)
|
|
32
|
+
* @param action - The action type (primary, positive, negative)
|
|
33
|
+
* @param className - Additional CSS classes
|
|
34
|
+
* @param props - All other standard button HTML attributes
|
|
35
|
+
* @returns A styled button element
|
|
36
|
+
*
|
|
37
|
+
* @example
|
|
38
|
+
* ```tsx
|
|
39
|
+
* <Button variant="solid" action="primary" size="medium" onClick={() => console.log('clicked')}>
|
|
40
|
+
* Click me
|
|
41
|
+
* </Button>
|
|
42
|
+
* ```
|
|
43
|
+
*/
|
|
44
|
+
declare const Button: ({ children, iconLeft, iconRight, size, variant, action, className, disabled, type, ...props }: ButtonProps) => react_jsx_runtime.JSX.Element;
|
|
45
|
+
|
|
46
|
+
export { Button };
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { ReactNode, ButtonHTMLAttributes } from 'react';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Button component props interface
|
|
6
|
+
*/
|
|
7
|
+
type ButtonProps = {
|
|
8
|
+
/** Content to be displayed inside the button */
|
|
9
|
+
children: ReactNode;
|
|
10
|
+
/** Ícone à esquerda do texto */
|
|
11
|
+
iconLeft?: ReactNode;
|
|
12
|
+
/** Ícone à direita do texto */
|
|
13
|
+
iconRight?: ReactNode;
|
|
14
|
+
/** Size of the button */
|
|
15
|
+
size?: 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large';
|
|
16
|
+
/** Visual variant of the button */
|
|
17
|
+
variant?: 'solid' | 'outline' | 'link';
|
|
18
|
+
/** Action type of the button */
|
|
19
|
+
action?: 'primary' | 'positive' | 'negative';
|
|
20
|
+
/** Additional CSS classes to apply */
|
|
21
|
+
className?: string;
|
|
22
|
+
} & ButtonHTMLAttributes<HTMLButtonElement>;
|
|
23
|
+
/**
|
|
24
|
+
* Button component for Analytica Ensino platforms
|
|
25
|
+
*
|
|
26
|
+
* A flexible button component with multiple variants, sizes and actions.
|
|
27
|
+
* Fully compatible with Next.js 15 and React 19.
|
|
28
|
+
*
|
|
29
|
+
* @param children - The content to display inside the button
|
|
30
|
+
* @param size - The size variant (extra-small, small, medium, large, extra-large)
|
|
31
|
+
* @param variant - The visual style variant (solid, outline, link)
|
|
32
|
+
* @param action - The action type (primary, positive, negative)
|
|
33
|
+
* @param className - Additional CSS classes
|
|
34
|
+
* @param props - All other standard button HTML attributes
|
|
35
|
+
* @returns A styled button element
|
|
36
|
+
*
|
|
37
|
+
* @example
|
|
38
|
+
* ```tsx
|
|
39
|
+
* <Button variant="solid" action="primary" size="medium" onClick={() => console.log('clicked')}>
|
|
40
|
+
* Click me
|
|
41
|
+
* </Button>
|
|
42
|
+
* ```
|
|
43
|
+
*/
|
|
44
|
+
declare const Button: ({ children, iconLeft, iconRight, size, variant, action, className, disabled, type, ...props }: ButtonProps) => react_jsx_runtime.JSX.Element;
|
|
45
|
+
|
|
46
|
+
export { Button };
|