analytica-frontend-lib 1.0.22 → 1.0.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/chunk-CETSS3RA.mjs +52 -0
- package/dist/chunk-GSEO6POW.mjs +93 -0
- package/dist/chunk-IB4IJ3GF.mjs +60 -0
- package/dist/chunk-IH5TEC64.mjs +35 -0
- package/dist/chunk-JNPCNN67.mjs +86 -0
- package/dist/chunk-KT6HNGRV.mjs +241 -0
- package/dist/chunk-LYOJCBOM.mjs +195 -0
- package/dist/chunk-MI5FIRHM.mjs +75 -0
- package/dist/chunk-NWGRQN6R.mjs +108 -0
- package/dist/chunk-QODEDLAX.mjs +142 -0
- package/dist/chunk-QOFMTSHE.mjs +44 -0
- package/dist/chunk-RPYPJ5O5.mjs +55 -0
- package/dist/chunk-SESX5OEP.mjs +57 -0
- package/dist/chunk-TT3VCQGR.mjs +53 -0
- package/dist/chunk-WIOCQOM7.mjs +20 -0
- package/dist/client-components.d.mts +9 -0
- package/dist/client-components.d.ts +9 -0
- package/dist/client-components.js +755 -0
- package/dist/client-components.mjs +39 -0
- package/dist/components/Alert/Alert.d.mts +13 -0
- package/dist/components/Alert/Alert.d.ts +13 -0
- package/dist/components/Alert/Alert.js +158 -0
- package/dist/components/Alert/Alert.mjs +7 -0
- package/dist/components/Badge/Badge.d.mts +47 -0
- package/dist/components/Badge/Badge.d.ts +47 -0
- package/dist/components/Badge/Badge.js +117 -0
- package/dist/components/Badge/Badge.mjs +6 -0
- package/dist/components/Button/Button.d.mts +46 -0
- package/dist/components/Button/Button.d.ts +46 -0
- package/dist/components/Button/Button.js +84 -0
- package/dist/components/Button/Button.mjs +6 -0
- package/dist/components/CheckBox/CheckBox.d.mts +74 -0
- package/dist/components/CheckBox/CheckBox.d.ts +74 -0
- package/dist/components/CheckBox/CheckBox.js +264 -0
- package/dist/components/CheckBox/CheckBox.mjs +8 -0
- package/dist/components/DropdownMenu/DropdownMenu.d.mts +29 -0
- package/dist/components/DropdownMenu/DropdownMenu.d.ts +29 -0
- package/dist/components/DropdownMenu/DropdownMenu.js +262 -0
- package/dist/components/DropdownMenu/DropdownMenu.mjs +17 -0
- package/dist/components/IconButton/IconButton.d.mts +77 -0
- package/dist/components/IconButton/IconButton.d.ts +77 -0
- package/dist/components/IconButton/IconButton.js +79 -0
- package/dist/components/IconButton/IconButton.mjs +6 -0
- package/dist/components/IconRoundedButton/IconRoundedButton.d.mts +35 -0
- package/dist/components/IconRoundedButton/IconRoundedButton.d.ts +35 -0
- package/dist/components/IconRoundedButton/IconRoundedButton.js +68 -0
- package/dist/components/IconRoundedButton/IconRoundedButton.mjs +6 -0
- package/dist/components/NavButton/NavButton.d.mts +58 -0
- package/dist/components/NavButton/NavButton.d.ts +58 -0
- package/dist/components/NavButton/NavButton.js +76 -0
- package/dist/components/NavButton/NavButton.mjs +6 -0
- package/dist/components/SelectionButton/SelectionButton.d.mts +58 -0
- package/dist/components/SelectionButton/SelectionButton.d.ts +58 -0
- package/dist/components/SelectionButton/SelectionButton.js +81 -0
- package/dist/components/SelectionButton/SelectionButton.mjs +6 -0
- package/dist/components/Table/Table.d.mts +17 -0
- package/dist/components/Table/Table.d.ts +17 -0
- package/dist/components/Table/Table.js +139 -0
- package/dist/components/Table/Table.mjs +20 -0
- package/dist/components/Text/Text.d.mts +59 -0
- package/dist/components/Text/Text.d.ts +59 -0
- package/dist/components/Text/Text.js +77 -0
- package/dist/components/Text/Text.mjs +6 -0
- package/dist/components/TextArea/TextArea.d.mts +69 -0
- package/dist/components/TextArea/TextArea.d.ts +69 -0
- package/dist/components/TextArea/TextArea.js +211 -0
- package/dist/components/TextArea/TextArea.mjs +8 -0
- package/dist/components/Toast/Toast.d.mts +17 -0
- package/dist/components/Toast/Toast.d.ts +17 -0
- package/dist/components/Toast/Toast.js +100 -0
- package/dist/components/Toast/Toast.mjs +7 -0
- package/dist/components/Toast/utils/ToastStore.d.mts +19 -0
- package/dist/components/Toast/utils/ToastStore.d.ts +19 -0
- package/dist/components/Toast/utils/ToastStore.js +44 -0
- package/dist/components/Toast/utils/ToastStore.mjs +6 -0
- package/dist/components/Toast/utils/Toaster.d.mts +11 -0
- package/dist/components/Toast/utils/Toaster.d.ts +11 -0
- package/dist/components/Toast/utils/Toaster.js +145 -0
- package/dist/components/Toast/utils/Toaster.mjs +11 -0
- package/dist/index.d.mts +168 -355
- package/dist/index.d.ts +168 -355
- package/dist/index.js +341 -936
- package/dist/index.mjs +340 -941
- package/dist/server-components.d.mts +11 -0
- package/dist/server-components.d.ts +11 -0
- package/dist/server-components.js +629 -0
- package/dist/server-components.mjs +52 -0
- package/package.json +76 -3
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { ElementType, ReactNode, ComponentPropsWithoutRef } from 'react';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Base text component props
|
|
6
|
+
*/
|
|
7
|
+
type BaseTextProps = {
|
|
8
|
+
/** Content to be displayed */
|
|
9
|
+
children?: ReactNode;
|
|
10
|
+
/** Text size variant */
|
|
11
|
+
size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';
|
|
12
|
+
/** Font weight variant */
|
|
13
|
+
weight?: 'hairline' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black';
|
|
14
|
+
/** Color variant - white for light backgrounds, black for dark backgrounds */
|
|
15
|
+
color?: string;
|
|
16
|
+
/** Additional CSS classes to apply */
|
|
17
|
+
className?: string;
|
|
18
|
+
};
|
|
19
|
+
/**
|
|
20
|
+
* Polymorphic text component props that ensures type safety based on the 'as' prop
|
|
21
|
+
*/
|
|
22
|
+
type TextProps<T extends ElementType = 'p'> = BaseTextProps & {
|
|
23
|
+
/** HTML tag to render */
|
|
24
|
+
as?: T;
|
|
25
|
+
} & Omit<ComponentPropsWithoutRef<T>, keyof BaseTextProps>;
|
|
26
|
+
/**
|
|
27
|
+
* Text component for Analytica Ensino platforms
|
|
28
|
+
*
|
|
29
|
+
* A flexible polymorphic text component with multiple sizes, weights, and colors.
|
|
30
|
+
* Automatically adapts to dark and light themes with full type safety.
|
|
31
|
+
* Fully compatible with Next.js 15 and React 19.
|
|
32
|
+
*
|
|
33
|
+
* @param children - The content to display
|
|
34
|
+
* @param size - The text size variant (2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl)
|
|
35
|
+
* @param weight - The font weight variant (hairline, light, normal, medium, semibold, bold, extrabold, black)
|
|
36
|
+
* @param color - The color variant - adapts to theme
|
|
37
|
+
* @param as - The HTML tag to render - determines allowed attributes via TypeScript
|
|
38
|
+
* @param className - Additional CSS classes
|
|
39
|
+
* @param props - HTML attributes valid for the chosen tag only
|
|
40
|
+
* @returns A styled text element with type-safe attributes
|
|
41
|
+
*
|
|
42
|
+
* @example
|
|
43
|
+
* ```tsx
|
|
44
|
+
* <Text size="lg" weight="bold" color="text-info-800">
|
|
45
|
+
* This is a large, bold text
|
|
46
|
+
* </Text>
|
|
47
|
+
*
|
|
48
|
+
* <Text as="a" href="/link" target="_blank">
|
|
49
|
+
* Link with type-safe anchor attributes
|
|
50
|
+
* </Text>
|
|
51
|
+
*
|
|
52
|
+
* <Text as="button" onClick={handleClick} disabled>
|
|
53
|
+
* Button with type-safe button attributes
|
|
54
|
+
* </Text>
|
|
55
|
+
* ```
|
|
56
|
+
*/
|
|
57
|
+
declare const Text: <T extends ElementType = "p">({ children, size, weight, color, as, className, ...props }: TextProps<T>) => react_jsx_runtime.JSX.Element;
|
|
58
|
+
|
|
59
|
+
export { Text };
|
|
@@ -0,0 +1,77 @@
|
|
|
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/Text/Text.tsx
|
|
21
|
+
var Text_exports = {};
|
|
22
|
+
__export(Text_exports, {
|
|
23
|
+
Text: () => Text
|
|
24
|
+
});
|
|
25
|
+
module.exports = __toCommonJS(Text_exports);
|
|
26
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
27
|
+
var Text = ({
|
|
28
|
+
children,
|
|
29
|
+
size = "md",
|
|
30
|
+
weight = "normal",
|
|
31
|
+
color = "text-text-950",
|
|
32
|
+
as,
|
|
33
|
+
className = "",
|
|
34
|
+
...props
|
|
35
|
+
}) => {
|
|
36
|
+
let sizeClasses = "";
|
|
37
|
+
let weightClasses = "";
|
|
38
|
+
const sizeClassMap = {
|
|
39
|
+
"2xs": "text-2xs",
|
|
40
|
+
xs: "text-xs",
|
|
41
|
+
sm: "text-sm",
|
|
42
|
+
md: "text-md",
|
|
43
|
+
lg: "text-lg",
|
|
44
|
+
xl: "text-xl",
|
|
45
|
+
"2xl": "text-2xl",
|
|
46
|
+
"3xl": "text-3xl",
|
|
47
|
+
"4xl": "text-4xl",
|
|
48
|
+
"5xl": "text-5xl",
|
|
49
|
+
"6xl": "text-6xl"
|
|
50
|
+
};
|
|
51
|
+
sizeClasses = sizeClassMap[size] ?? sizeClassMap.md;
|
|
52
|
+
const weightClassMap = {
|
|
53
|
+
hairline: "font-hairline",
|
|
54
|
+
light: "font-light",
|
|
55
|
+
normal: "font-normal",
|
|
56
|
+
medium: "font-medium",
|
|
57
|
+
semibold: "font-semibold",
|
|
58
|
+
bold: "font-bold",
|
|
59
|
+
extrabold: "font-extrabold",
|
|
60
|
+
black: "font-black"
|
|
61
|
+
};
|
|
62
|
+
weightClasses = weightClassMap[weight] ?? weightClassMap.normal;
|
|
63
|
+
const baseClasses = "font-primary";
|
|
64
|
+
const Component = as ?? "p";
|
|
65
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
66
|
+
Component,
|
|
67
|
+
{
|
|
68
|
+
className: `${baseClasses} ${sizeClasses} ${weightClasses} ${color} ${className}`,
|
|
69
|
+
...props,
|
|
70
|
+
children
|
|
71
|
+
}
|
|
72
|
+
);
|
|
73
|
+
};
|
|
74
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
75
|
+
0 && (module.exports = {
|
|
76
|
+
Text
|
|
77
|
+
});
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import react__default, { ReactNode, TextareaHTMLAttributes } from 'react';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* TextArea size variants
|
|
5
|
+
*/
|
|
6
|
+
type TextAreaSize = 'small' | 'medium' | 'large' | 'extraLarge';
|
|
7
|
+
/**
|
|
8
|
+
* TextArea visual state
|
|
9
|
+
*/
|
|
10
|
+
type TextAreaState = 'default' | 'hovered' | 'focused' | 'invalid' | 'disabled';
|
|
11
|
+
/**
|
|
12
|
+
* TextArea component props interface
|
|
13
|
+
*/
|
|
14
|
+
type TextAreaProps = {
|
|
15
|
+
/** Label text to display above the textarea */
|
|
16
|
+
label?: ReactNode;
|
|
17
|
+
/** Size variant of the textarea */
|
|
18
|
+
size?: TextAreaSize;
|
|
19
|
+
/** Visual state of the textarea */
|
|
20
|
+
state?: TextAreaState;
|
|
21
|
+
/** Error message to display */
|
|
22
|
+
errorMessage?: string;
|
|
23
|
+
/** Helper text to display */
|
|
24
|
+
helperMessage?: string;
|
|
25
|
+
/** Additional CSS classes */
|
|
26
|
+
className?: string;
|
|
27
|
+
/** Label CSS classes */
|
|
28
|
+
labelClassName?: string;
|
|
29
|
+
} & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'>;
|
|
30
|
+
/**
|
|
31
|
+
* TextArea component for Analytica Ensino platforms
|
|
32
|
+
*
|
|
33
|
+
* A textarea component with essential states, sizes and themes.
|
|
34
|
+
* Uses exact design specifications with 288px width, 96px height, and specific
|
|
35
|
+
* color values. Includes Text component integration for consistent typography.
|
|
36
|
+
*
|
|
37
|
+
* @example
|
|
38
|
+
* ```tsx
|
|
39
|
+
* // Basic textarea
|
|
40
|
+
* <TextArea label="Description" placeholder="Enter description..." />
|
|
41
|
+
*
|
|
42
|
+
* // Small size
|
|
43
|
+
* <TextArea size="small" label="Comment" />
|
|
44
|
+
*
|
|
45
|
+
* // Invalid state
|
|
46
|
+
* <TextArea state="invalid" label="Required field" errorMessage="This field is required" />
|
|
47
|
+
*
|
|
48
|
+
* // Disabled state
|
|
49
|
+
* <TextArea disabled label="Read-only field" />
|
|
50
|
+
* ```
|
|
51
|
+
*/
|
|
52
|
+
declare const TextArea: react__default.ForwardRefExoticComponent<{
|
|
53
|
+
/** Label text to display above the textarea */
|
|
54
|
+
label?: ReactNode;
|
|
55
|
+
/** Size variant of the textarea */
|
|
56
|
+
size?: TextAreaSize;
|
|
57
|
+
/** Visual state of the textarea */
|
|
58
|
+
state?: TextAreaState;
|
|
59
|
+
/** Error message to display */
|
|
60
|
+
errorMessage?: string;
|
|
61
|
+
/** Helper text to display */
|
|
62
|
+
helperMessage?: string;
|
|
63
|
+
/** Additional CSS classes */
|
|
64
|
+
className?: string;
|
|
65
|
+
/** Label CSS classes */
|
|
66
|
+
labelClassName?: string;
|
|
67
|
+
} & Omit<react__default.TextareaHTMLAttributes<HTMLTextAreaElement>, "size"> & react__default.RefAttributes<HTMLTextAreaElement>>;
|
|
68
|
+
|
|
69
|
+
export { TextArea, type TextAreaProps };
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import react__default, { ReactNode, TextareaHTMLAttributes } from 'react';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* TextArea size variants
|
|
5
|
+
*/
|
|
6
|
+
type TextAreaSize = 'small' | 'medium' | 'large' | 'extraLarge';
|
|
7
|
+
/**
|
|
8
|
+
* TextArea visual state
|
|
9
|
+
*/
|
|
10
|
+
type TextAreaState = 'default' | 'hovered' | 'focused' | 'invalid' | 'disabled';
|
|
11
|
+
/**
|
|
12
|
+
* TextArea component props interface
|
|
13
|
+
*/
|
|
14
|
+
type TextAreaProps = {
|
|
15
|
+
/** Label text to display above the textarea */
|
|
16
|
+
label?: ReactNode;
|
|
17
|
+
/** Size variant of the textarea */
|
|
18
|
+
size?: TextAreaSize;
|
|
19
|
+
/** Visual state of the textarea */
|
|
20
|
+
state?: TextAreaState;
|
|
21
|
+
/** Error message to display */
|
|
22
|
+
errorMessage?: string;
|
|
23
|
+
/** Helper text to display */
|
|
24
|
+
helperMessage?: string;
|
|
25
|
+
/** Additional CSS classes */
|
|
26
|
+
className?: string;
|
|
27
|
+
/** Label CSS classes */
|
|
28
|
+
labelClassName?: string;
|
|
29
|
+
} & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'>;
|
|
30
|
+
/**
|
|
31
|
+
* TextArea component for Analytica Ensino platforms
|
|
32
|
+
*
|
|
33
|
+
* A textarea component with essential states, sizes and themes.
|
|
34
|
+
* Uses exact design specifications with 288px width, 96px height, and specific
|
|
35
|
+
* color values. Includes Text component integration for consistent typography.
|
|
36
|
+
*
|
|
37
|
+
* @example
|
|
38
|
+
* ```tsx
|
|
39
|
+
* // Basic textarea
|
|
40
|
+
* <TextArea label="Description" placeholder="Enter description..." />
|
|
41
|
+
*
|
|
42
|
+
* // Small size
|
|
43
|
+
* <TextArea size="small" label="Comment" />
|
|
44
|
+
*
|
|
45
|
+
* // Invalid state
|
|
46
|
+
* <TextArea state="invalid" label="Required field" errorMessage="This field is required" />
|
|
47
|
+
*
|
|
48
|
+
* // Disabled state
|
|
49
|
+
* <TextArea disabled label="Read-only field" />
|
|
50
|
+
* ```
|
|
51
|
+
*/
|
|
52
|
+
declare const TextArea: react__default.ForwardRefExoticComponent<{
|
|
53
|
+
/** Label text to display above the textarea */
|
|
54
|
+
label?: ReactNode;
|
|
55
|
+
/** Size variant of the textarea */
|
|
56
|
+
size?: TextAreaSize;
|
|
57
|
+
/** Visual state of the textarea */
|
|
58
|
+
state?: TextAreaState;
|
|
59
|
+
/** Error message to display */
|
|
60
|
+
errorMessage?: string;
|
|
61
|
+
/** Helper text to display */
|
|
62
|
+
helperMessage?: string;
|
|
63
|
+
/** Additional CSS classes */
|
|
64
|
+
className?: string;
|
|
65
|
+
/** Label CSS classes */
|
|
66
|
+
labelClassName?: string;
|
|
67
|
+
} & Omit<react__default.TextareaHTMLAttributes<HTMLTextAreaElement>, "size"> & react__default.RefAttributes<HTMLTextAreaElement>>;
|
|
68
|
+
|
|
69
|
+
export { TextArea, type TextAreaProps };
|
|
@@ -0,0 +1,211 @@
|
|
|
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
|
+
|
|
21
|
+
// src/components/TextArea/TextArea.tsx
|
|
22
|
+
var TextArea_exports = {};
|
|
23
|
+
__export(TextArea_exports, {
|
|
24
|
+
TextArea: () => TextArea
|
|
25
|
+
});
|
|
26
|
+
module.exports = __toCommonJS(TextArea_exports);
|
|
27
|
+
var import_react = require("react");
|
|
28
|
+
|
|
29
|
+
// src/components/Text/Text.tsx
|
|
30
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
31
|
+
var Text = ({
|
|
32
|
+
children,
|
|
33
|
+
size = "md",
|
|
34
|
+
weight = "normal",
|
|
35
|
+
color = "text-text-950",
|
|
36
|
+
as,
|
|
37
|
+
className = "",
|
|
38
|
+
...props
|
|
39
|
+
}) => {
|
|
40
|
+
let sizeClasses = "";
|
|
41
|
+
let weightClasses = "";
|
|
42
|
+
const sizeClassMap = {
|
|
43
|
+
"2xs": "text-2xs",
|
|
44
|
+
xs: "text-xs",
|
|
45
|
+
sm: "text-sm",
|
|
46
|
+
md: "text-md",
|
|
47
|
+
lg: "text-lg",
|
|
48
|
+
xl: "text-xl",
|
|
49
|
+
"2xl": "text-2xl",
|
|
50
|
+
"3xl": "text-3xl",
|
|
51
|
+
"4xl": "text-4xl",
|
|
52
|
+
"5xl": "text-5xl",
|
|
53
|
+
"6xl": "text-6xl"
|
|
54
|
+
};
|
|
55
|
+
sizeClasses = sizeClassMap[size] ?? sizeClassMap.md;
|
|
56
|
+
const weightClassMap = {
|
|
57
|
+
hairline: "font-hairline",
|
|
58
|
+
light: "font-light",
|
|
59
|
+
normal: "font-normal",
|
|
60
|
+
medium: "font-medium",
|
|
61
|
+
semibold: "font-semibold",
|
|
62
|
+
bold: "font-bold",
|
|
63
|
+
extrabold: "font-extrabold",
|
|
64
|
+
black: "font-black"
|
|
65
|
+
};
|
|
66
|
+
weightClasses = weightClassMap[weight] ?? weightClassMap.normal;
|
|
67
|
+
const baseClasses = "font-primary";
|
|
68
|
+
const Component = as ?? "p";
|
|
69
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
70
|
+
Component,
|
|
71
|
+
{
|
|
72
|
+
className: `${baseClasses} ${sizeClasses} ${weightClasses} ${color} ${className}`,
|
|
73
|
+
...props,
|
|
74
|
+
children
|
|
75
|
+
}
|
|
76
|
+
);
|
|
77
|
+
};
|
|
78
|
+
|
|
79
|
+
// src/components/TextArea/TextArea.tsx
|
|
80
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
81
|
+
var SIZE_CLASSES = {
|
|
82
|
+
small: {
|
|
83
|
+
container: "w-72",
|
|
84
|
+
// 288px width
|
|
85
|
+
textarea: "h-24 text-sm",
|
|
86
|
+
// 96px height, 14px font
|
|
87
|
+
textSize: "sm"
|
|
88
|
+
},
|
|
89
|
+
medium: {
|
|
90
|
+
container: "w-72",
|
|
91
|
+
// 288px width
|
|
92
|
+
textarea: "h-24 text-base",
|
|
93
|
+
// 96px height, 16px font
|
|
94
|
+
textSize: "md"
|
|
95
|
+
},
|
|
96
|
+
large: {
|
|
97
|
+
container: "w-72",
|
|
98
|
+
// 288px width
|
|
99
|
+
textarea: "h-24 text-lg",
|
|
100
|
+
// 96px height, 18px font
|
|
101
|
+
textSize: "lg"
|
|
102
|
+
},
|
|
103
|
+
extraLarge: {
|
|
104
|
+
container: "w-72",
|
|
105
|
+
// 288px width
|
|
106
|
+
textarea: "h-24 text-xl",
|
|
107
|
+
// 96px height, 20px font
|
|
108
|
+
textSize: "xl"
|
|
109
|
+
}
|
|
110
|
+
};
|
|
111
|
+
var BASE_TEXTAREA_CLASSES = "w-full box-border p-3 bg-background border border-solid rounded-[4px] resize-none focus:outline-none font-roboto font-normal leading-[150%] placeholder:text-text-600 transition-all duration-200";
|
|
112
|
+
var STATE_CLASSES = {
|
|
113
|
+
default: {
|
|
114
|
+
base: "border-border-300 bg-background text-text-600",
|
|
115
|
+
hover: "hover:border-border-400",
|
|
116
|
+
focus: "focus:border-border-500"
|
|
117
|
+
},
|
|
118
|
+
hovered: {
|
|
119
|
+
base: "border-border-400 bg-background text-text-600",
|
|
120
|
+
hover: "",
|
|
121
|
+
focus: "focus:border-border-500"
|
|
122
|
+
},
|
|
123
|
+
focused: {
|
|
124
|
+
base: "border-2 border-primary-950 bg-background text-text-900",
|
|
125
|
+
hover: "",
|
|
126
|
+
focus: ""
|
|
127
|
+
},
|
|
128
|
+
invalid: {
|
|
129
|
+
base: "border-2 border-red-700 bg-white text-gray-800",
|
|
130
|
+
hover: "hover:border-red-700",
|
|
131
|
+
focus: "focus:border-red-700"
|
|
132
|
+
},
|
|
133
|
+
disabled: {
|
|
134
|
+
base: "border-border-300 bg-background text-text-600 cursor-not-allowed opacity-40",
|
|
135
|
+
hover: "",
|
|
136
|
+
focus: ""
|
|
137
|
+
}
|
|
138
|
+
};
|
|
139
|
+
var TextArea = (0, import_react.forwardRef)(
|
|
140
|
+
({
|
|
141
|
+
label,
|
|
142
|
+
size = "medium",
|
|
143
|
+
state = "default",
|
|
144
|
+
errorMessage,
|
|
145
|
+
helperMessage,
|
|
146
|
+
className = "",
|
|
147
|
+
labelClassName = "",
|
|
148
|
+
disabled,
|
|
149
|
+
id,
|
|
150
|
+
onChange,
|
|
151
|
+
placeholder,
|
|
152
|
+
...props
|
|
153
|
+
}, ref) => {
|
|
154
|
+
const generatedId = (0, import_react.useId)();
|
|
155
|
+
const inputId = id ?? `textarea-${generatedId}`;
|
|
156
|
+
const [isFocused, setIsFocused] = (0, import_react.useState)(false);
|
|
157
|
+
const handleChange = (event) => {
|
|
158
|
+
onChange?.(event);
|
|
159
|
+
};
|
|
160
|
+
const handleFocus = (event) => {
|
|
161
|
+
setIsFocused(true);
|
|
162
|
+
props.onFocus?.(event);
|
|
163
|
+
};
|
|
164
|
+
const handleBlur = (event) => {
|
|
165
|
+
setIsFocused(false);
|
|
166
|
+
props.onBlur?.(event);
|
|
167
|
+
};
|
|
168
|
+
let currentState = disabled ? "disabled" : state;
|
|
169
|
+
if (isFocused && currentState !== "invalid" && currentState !== "disabled") {
|
|
170
|
+
currentState = "focused";
|
|
171
|
+
}
|
|
172
|
+
const sizeClasses = SIZE_CLASSES[size];
|
|
173
|
+
const stateClasses = STATE_CLASSES[currentState];
|
|
174
|
+
const textareaClasses = `${BASE_TEXTAREA_CLASSES} ${sizeClasses.textarea} ${stateClasses.base} ${stateClasses.hover} ${stateClasses.focus} ${className}`;
|
|
175
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: `flex flex-col ${sizeClasses.container}`, children: [
|
|
176
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
177
|
+
Text,
|
|
178
|
+
{
|
|
179
|
+
as: "label",
|
|
180
|
+
htmlFor: inputId,
|
|
181
|
+
size: sizeClasses.textSize,
|
|
182
|
+
weight: "medium",
|
|
183
|
+
color: "text-text-950",
|
|
184
|
+
className: `mb-1.5 ${labelClassName}`,
|
|
185
|
+
children: label
|
|
186
|
+
}
|
|
187
|
+
),
|
|
188
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
189
|
+
"textarea",
|
|
190
|
+
{
|
|
191
|
+
ref,
|
|
192
|
+
id: inputId,
|
|
193
|
+
disabled,
|
|
194
|
+
onChange: handleChange,
|
|
195
|
+
onFocus: handleFocus,
|
|
196
|
+
onBlur: handleBlur,
|
|
197
|
+
className: textareaClasses,
|
|
198
|
+
placeholder,
|
|
199
|
+
...props
|
|
200
|
+
}
|
|
201
|
+
),
|
|
202
|
+
errorMessage && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text, { size: "sm", weight: "normal", className: "mt-1.5 text-error-600", children: errorMessage }),
|
|
203
|
+
helperMessage && !errorMessage && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text, { size: "sm", weight: "normal", className: "mt-1.5 text-text-500", children: helperMessage })
|
|
204
|
+
] });
|
|
205
|
+
}
|
|
206
|
+
);
|
|
207
|
+
TextArea.displayName = "TextArea";
|
|
208
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
209
|
+
0 && (module.exports = {
|
|
210
|
+
TextArea
|
|
211
|
+
});
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { HTMLAttributes } from 'react';
|
|
3
|
+
|
|
4
|
+
type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'default';
|
|
5
|
+
type ToastProps = {
|
|
6
|
+
title: string;
|
|
7
|
+
description?: string;
|
|
8
|
+
onClose: () => void;
|
|
9
|
+
/** Visual variant of the badge */
|
|
10
|
+
variant?: 'solid' | 'outlined';
|
|
11
|
+
/** Action type of the badge */
|
|
12
|
+
action?: 'warning' | 'success' | 'info';
|
|
13
|
+
position?: ToastPosition;
|
|
14
|
+
} & HTMLAttributes<HTMLDivElement>;
|
|
15
|
+
declare const Toast: ({ variant, action, className, onClose, title, description, position, ...props }: ToastProps) => react_jsx_runtime.JSX.Element;
|
|
16
|
+
|
|
17
|
+
export { Toast };
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { HTMLAttributes } from 'react';
|
|
3
|
+
|
|
4
|
+
type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'default';
|
|
5
|
+
type ToastProps = {
|
|
6
|
+
title: string;
|
|
7
|
+
description?: string;
|
|
8
|
+
onClose: () => void;
|
|
9
|
+
/** Visual variant of the badge */
|
|
10
|
+
variant?: 'solid' | 'outlined';
|
|
11
|
+
/** Action type of the badge */
|
|
12
|
+
action?: 'warning' | 'success' | 'info';
|
|
13
|
+
position?: ToastPosition;
|
|
14
|
+
} & HTMLAttributes<HTMLDivElement>;
|
|
15
|
+
declare const Toast: ({ variant, action, className, onClose, title, description, position, ...props }: ToastProps) => react_jsx_runtime.JSX.Element;
|
|
16
|
+
|
|
17
|
+
export { Toast };
|
|
@@ -0,0 +1,100 @@
|
|
|
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
|
+
|
|
21
|
+
// src/components/Toast/Toast.tsx
|
|
22
|
+
var Toast_exports = {};
|
|
23
|
+
__export(Toast_exports, {
|
|
24
|
+
Toast: () => Toast
|
|
25
|
+
});
|
|
26
|
+
module.exports = __toCommonJS(Toast_exports);
|
|
27
|
+
var import_phosphor_react = require("phosphor-react");
|
|
28
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
29
|
+
var VARIANT_ACTION_CLASSES = {
|
|
30
|
+
solid: {
|
|
31
|
+
warning: "bg-warning text-warning-800 border-none focus-visible:outline-none",
|
|
32
|
+
success: "bg-success text-success-800 border-none focus-visible:outline-none",
|
|
33
|
+
info: "bg-info text-info-800 border-none focus-visible:outline-none"
|
|
34
|
+
},
|
|
35
|
+
outlined: {
|
|
36
|
+
warning: "bg-warning text-warning-800 border border-warning-200 focus-visible:outline-none",
|
|
37
|
+
success: "bg-success text-success-800 border border-success-200 focus-visible:outline-none",
|
|
38
|
+
info: "bg-info text-info-800 border border-info-200 focus-visible:outline-none"
|
|
39
|
+
}
|
|
40
|
+
};
|
|
41
|
+
var iconMap = {
|
|
42
|
+
success: import_phosphor_react.CheckCircle,
|
|
43
|
+
info: import_phosphor_react.Info,
|
|
44
|
+
warning: import_phosphor_react.WarningCircle
|
|
45
|
+
};
|
|
46
|
+
var Toast = ({
|
|
47
|
+
variant = "outlined",
|
|
48
|
+
action = "success",
|
|
49
|
+
className = "",
|
|
50
|
+
onClose,
|
|
51
|
+
title,
|
|
52
|
+
description,
|
|
53
|
+
position = "default",
|
|
54
|
+
...props
|
|
55
|
+
}) => {
|
|
56
|
+
const variantClasses = VARIANT_ACTION_CLASSES[variant][action];
|
|
57
|
+
const positionClasses = {
|
|
58
|
+
"top-left": "fixed top-4 left-4",
|
|
59
|
+
"top-center": "fixed top-4 left-1/2 transform -translate-x-1/2",
|
|
60
|
+
"top-right": "fixed top-4 right-4",
|
|
61
|
+
"bottom-left": "fixed bottom-4 left-4",
|
|
62
|
+
"bottom-center": "fixed bottom-4 left-1/2 transform -translate-x-1/2",
|
|
63
|
+
"bottom-right": "fixed bottom-4 right-4",
|
|
64
|
+
default: ""
|
|
65
|
+
};
|
|
66
|
+
const IconAction = iconMap[action] || iconMap["success"];
|
|
67
|
+
const baseClasses = "max-w-[390px] w-full flex flex-row items-start justify-between shadow-lg rounded-lg border p-4 gap-6 group";
|
|
68
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
69
|
+
"div",
|
|
70
|
+
{
|
|
71
|
+
role: "alert",
|
|
72
|
+
"aria-live": "assertive",
|
|
73
|
+
"aria-atomic": "true",
|
|
74
|
+
className: `${baseClasses} ${positionClasses[position]} ${variantClasses} ${className}`,
|
|
75
|
+
...props,
|
|
76
|
+
children: [
|
|
77
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-row items-start gap-3", children: [
|
|
78
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "mt-1", "data-testid": `toast-icon-${action}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconAction, {}) }),
|
|
79
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col items-start justify-start", children: [
|
|
80
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "font-semibold text-md", children: title }),
|
|
81
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-md text-text-900", children: description })
|
|
82
|
+
] })
|
|
83
|
+
] }),
|
|
84
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
85
|
+
"button",
|
|
86
|
+
{
|
|
87
|
+
onClick: onClose,
|
|
88
|
+
"aria-label": "Dismiss notification",
|
|
89
|
+
className: "text-background-500 cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity",
|
|
90
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_phosphor_react.X, {})
|
|
91
|
+
}
|
|
92
|
+
)
|
|
93
|
+
]
|
|
94
|
+
}
|
|
95
|
+
);
|
|
96
|
+
};
|
|
97
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
98
|
+
0 && (module.exports = {
|
|
99
|
+
Toast
|
|
100
|
+
});
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import * as zustand from 'zustand';
|
|
2
|
+
|
|
3
|
+
type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'default';
|
|
4
|
+
type ToastData = {
|
|
5
|
+
id: string;
|
|
6
|
+
title: string;
|
|
7
|
+
description?: string;
|
|
8
|
+
variant?: 'solid' | 'outlined';
|
|
9
|
+
action?: 'warning' | 'success' | 'info';
|
|
10
|
+
position?: ToastPosition;
|
|
11
|
+
};
|
|
12
|
+
type ToastStore = {
|
|
13
|
+
toasts: ToastData[];
|
|
14
|
+
addToast: (toast: Omit<ToastData, 'id'>) => void;
|
|
15
|
+
removeToast: (id: string) => void;
|
|
16
|
+
};
|
|
17
|
+
declare const useToastStore: zustand.UseBoundStore<zustand.StoreApi<ToastStore>>;
|
|
18
|
+
|
|
19
|
+
export { type ToastData, useToastStore };
|