analytica-frontend-lib 1.0.3 → 1.0.5
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/index.css +1043 -80
- package/dist/index.d.mts +72 -10
- package/dist/index.d.ts +72 -10
- package/dist/index.js +101 -32
- package/dist/index.mjs +100 -32
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import { ReactNode, ButtonHTMLAttributes } from 'react';
|
|
2
|
+
import { ReactNode, ButtonHTMLAttributes, ElementType, ComponentPropsWithoutRef } from 'react';
|
|
3
3
|
|
|
4
4
|
/**
|
|
5
5
|
* Button component props interface
|
|
@@ -7,33 +7,95 @@ import { ReactNode, ButtonHTMLAttributes } from 'react';
|
|
|
7
7
|
type ButtonProps = {
|
|
8
8
|
/** Content to be displayed inside the button */
|
|
9
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';
|
|
10
16
|
/** Visual variant of the button */
|
|
11
|
-
variant?: '
|
|
12
|
-
/**
|
|
13
|
-
|
|
17
|
+
variant?: 'solid' | 'outline' | 'link';
|
|
18
|
+
/** Action type of the button */
|
|
19
|
+
action?: 'primary' | 'positive' | 'negative';
|
|
14
20
|
/** Additional CSS classes to apply */
|
|
15
21
|
className?: string;
|
|
16
22
|
} & ButtonHTMLAttributes<HTMLButtonElement>;
|
|
17
23
|
/**
|
|
18
24
|
* Button component for Analytica Ensino platforms
|
|
19
25
|
*
|
|
20
|
-
* A flexible button component with multiple variants and
|
|
26
|
+
* A flexible button component with multiple variants, sizes and actions.
|
|
21
27
|
* Fully compatible with Next.js 15 and React 19.
|
|
22
28
|
*
|
|
23
29
|
* @param children - The content to display inside the button
|
|
24
|
-
* @param
|
|
25
|
-
* @param
|
|
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)
|
|
26
33
|
* @param className - Additional CSS classes
|
|
27
34
|
* @param props - All other standard button HTML attributes
|
|
28
35
|
* @returns A styled button element
|
|
29
36
|
*
|
|
30
37
|
* @example
|
|
31
38
|
* ```tsx
|
|
32
|
-
* <Button variant="primary" size="
|
|
39
|
+
* <Button variant="solid" action="primary" size="medium" onClick={() => console.log('clicked')}>
|
|
33
40
|
* Click me
|
|
34
41
|
* </Button>
|
|
35
42
|
* ```
|
|
36
43
|
*/
|
|
37
|
-
declare const Button: ({ children,
|
|
44
|
+
declare const Button: ({ children, iconLeft, iconRight, size, variant, action, className, disabled, type, ...props }: ButtonProps) => react_jsx_runtime.JSX.Element;
|
|
38
45
|
|
|
39
|
-
|
|
46
|
+
/**
|
|
47
|
+
* Base text component props
|
|
48
|
+
*/
|
|
49
|
+
type BaseTextProps = {
|
|
50
|
+
/** Content to be displayed */
|
|
51
|
+
children?: ReactNode;
|
|
52
|
+
/** Text size variant */
|
|
53
|
+
size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';
|
|
54
|
+
/** Font weight variant */
|
|
55
|
+
weight?: 'hairline' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black';
|
|
56
|
+
/** Color variant - white for light backgrounds, black for dark backgrounds */
|
|
57
|
+
color?: 'white' | 'black';
|
|
58
|
+
/** Additional CSS classes to apply */
|
|
59
|
+
className?: string;
|
|
60
|
+
};
|
|
61
|
+
/**
|
|
62
|
+
* Polymorphic text component props that ensures type safety based on the 'as' prop
|
|
63
|
+
*/
|
|
64
|
+
type TextProps<T extends ElementType = 'p'> = BaseTextProps & {
|
|
65
|
+
/** HTML tag to render */
|
|
66
|
+
as?: T;
|
|
67
|
+
} & Omit<ComponentPropsWithoutRef<T>, keyof BaseTextProps>;
|
|
68
|
+
/**
|
|
69
|
+
* Text component for Analytica Ensino platforms
|
|
70
|
+
*
|
|
71
|
+
* A flexible polymorphic text component with multiple sizes, weights, and colors.
|
|
72
|
+
* Automatically adapts to dark and light themes with full type safety.
|
|
73
|
+
* Fully compatible with Next.js 15 and React 19.
|
|
74
|
+
*
|
|
75
|
+
* @param children - The content to display
|
|
76
|
+
* @param size - The text size variant (2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl)
|
|
77
|
+
* @param weight - The font weight variant (hairline, light, normal, medium, semibold, bold, extrabold, black)
|
|
78
|
+
* @param color - The color variant (white, black) - adapts to theme
|
|
79
|
+
* @param as - The HTML tag to render - determines allowed attributes via TypeScript
|
|
80
|
+
* @param className - Additional CSS classes
|
|
81
|
+
* @param props - HTML attributes valid for the chosen tag only
|
|
82
|
+
* @returns A styled text element with type-safe attributes
|
|
83
|
+
*
|
|
84
|
+
* @example
|
|
85
|
+
* ```tsx
|
|
86
|
+
* <Text size="lg" weight="bold" color="black">
|
|
87
|
+
* This is a large, bold text
|
|
88
|
+
* </Text>
|
|
89
|
+
*
|
|
90
|
+
* <Text as="a" href="/link" target="_blank">
|
|
91
|
+
* Link with type-safe anchor attributes
|
|
92
|
+
* </Text>
|
|
93
|
+
*
|
|
94
|
+
* <Text as="button" onClick={handleClick} disabled>
|
|
95
|
+
* Button with type-safe button attributes
|
|
96
|
+
* </Text>
|
|
97
|
+
* ```
|
|
98
|
+
*/
|
|
99
|
+
declare const Text: <T extends ElementType = "p">({ children, size, weight, color, as, className, ...props }: TextProps<T>) => react_jsx_runtime.JSX.Element;
|
|
100
|
+
|
|
101
|
+
export { Button, Text };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import { ReactNode, ButtonHTMLAttributes } from 'react';
|
|
2
|
+
import { ReactNode, ButtonHTMLAttributes, ElementType, ComponentPropsWithoutRef } from 'react';
|
|
3
3
|
|
|
4
4
|
/**
|
|
5
5
|
* Button component props interface
|
|
@@ -7,33 +7,95 @@ import { ReactNode, ButtonHTMLAttributes } from 'react';
|
|
|
7
7
|
type ButtonProps = {
|
|
8
8
|
/** Content to be displayed inside the button */
|
|
9
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';
|
|
10
16
|
/** Visual variant of the button */
|
|
11
|
-
variant?: '
|
|
12
|
-
/**
|
|
13
|
-
|
|
17
|
+
variant?: 'solid' | 'outline' | 'link';
|
|
18
|
+
/** Action type of the button */
|
|
19
|
+
action?: 'primary' | 'positive' | 'negative';
|
|
14
20
|
/** Additional CSS classes to apply */
|
|
15
21
|
className?: string;
|
|
16
22
|
} & ButtonHTMLAttributes<HTMLButtonElement>;
|
|
17
23
|
/**
|
|
18
24
|
* Button component for Analytica Ensino platforms
|
|
19
25
|
*
|
|
20
|
-
* A flexible button component with multiple variants and
|
|
26
|
+
* A flexible button component with multiple variants, sizes and actions.
|
|
21
27
|
* Fully compatible with Next.js 15 and React 19.
|
|
22
28
|
*
|
|
23
29
|
* @param children - The content to display inside the button
|
|
24
|
-
* @param
|
|
25
|
-
* @param
|
|
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)
|
|
26
33
|
* @param className - Additional CSS classes
|
|
27
34
|
* @param props - All other standard button HTML attributes
|
|
28
35
|
* @returns A styled button element
|
|
29
36
|
*
|
|
30
37
|
* @example
|
|
31
38
|
* ```tsx
|
|
32
|
-
* <Button variant="primary" size="
|
|
39
|
+
* <Button variant="solid" action="primary" size="medium" onClick={() => console.log('clicked')}>
|
|
33
40
|
* Click me
|
|
34
41
|
* </Button>
|
|
35
42
|
* ```
|
|
36
43
|
*/
|
|
37
|
-
declare const Button: ({ children,
|
|
44
|
+
declare const Button: ({ children, iconLeft, iconRight, size, variant, action, className, disabled, type, ...props }: ButtonProps) => react_jsx_runtime.JSX.Element;
|
|
38
45
|
|
|
39
|
-
|
|
46
|
+
/**
|
|
47
|
+
* Base text component props
|
|
48
|
+
*/
|
|
49
|
+
type BaseTextProps = {
|
|
50
|
+
/** Content to be displayed */
|
|
51
|
+
children?: ReactNode;
|
|
52
|
+
/** Text size variant */
|
|
53
|
+
size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';
|
|
54
|
+
/** Font weight variant */
|
|
55
|
+
weight?: 'hairline' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black';
|
|
56
|
+
/** Color variant - white for light backgrounds, black for dark backgrounds */
|
|
57
|
+
color?: 'white' | 'black';
|
|
58
|
+
/** Additional CSS classes to apply */
|
|
59
|
+
className?: string;
|
|
60
|
+
};
|
|
61
|
+
/**
|
|
62
|
+
* Polymorphic text component props that ensures type safety based on the 'as' prop
|
|
63
|
+
*/
|
|
64
|
+
type TextProps<T extends ElementType = 'p'> = BaseTextProps & {
|
|
65
|
+
/** HTML tag to render */
|
|
66
|
+
as?: T;
|
|
67
|
+
} & Omit<ComponentPropsWithoutRef<T>, keyof BaseTextProps>;
|
|
68
|
+
/**
|
|
69
|
+
* Text component for Analytica Ensino platforms
|
|
70
|
+
*
|
|
71
|
+
* A flexible polymorphic text component with multiple sizes, weights, and colors.
|
|
72
|
+
* Automatically adapts to dark and light themes with full type safety.
|
|
73
|
+
* Fully compatible with Next.js 15 and React 19.
|
|
74
|
+
*
|
|
75
|
+
* @param children - The content to display
|
|
76
|
+
* @param size - The text size variant (2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl)
|
|
77
|
+
* @param weight - The font weight variant (hairline, light, normal, medium, semibold, bold, extrabold, black)
|
|
78
|
+
* @param color - The color variant (white, black) - adapts to theme
|
|
79
|
+
* @param as - The HTML tag to render - determines allowed attributes via TypeScript
|
|
80
|
+
* @param className - Additional CSS classes
|
|
81
|
+
* @param props - HTML attributes valid for the chosen tag only
|
|
82
|
+
* @returns A styled text element with type-safe attributes
|
|
83
|
+
*
|
|
84
|
+
* @example
|
|
85
|
+
* ```tsx
|
|
86
|
+
* <Text size="lg" weight="bold" color="black">
|
|
87
|
+
* This is a large, bold text
|
|
88
|
+
* </Text>
|
|
89
|
+
*
|
|
90
|
+
* <Text as="a" href="/link" target="_blank">
|
|
91
|
+
* Link with type-safe anchor attributes
|
|
92
|
+
* </Text>
|
|
93
|
+
*
|
|
94
|
+
* <Text as="button" onClick={handleClick} disabled>
|
|
95
|
+
* Button with type-safe button attributes
|
|
96
|
+
* </Text>
|
|
97
|
+
* ```
|
|
98
|
+
*/
|
|
99
|
+
declare const Text: <T extends ElementType = "p">({ children, size, weight, color, as, className, ...props }: TextProps<T>) => react_jsx_runtime.JSX.Element;
|
|
100
|
+
|
|
101
|
+
export { Button, Text };
|
package/dist/index.js
CHANGED
|
@@ -20,50 +20,118 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
20
20
|
// src/index.ts
|
|
21
21
|
var index_exports = {};
|
|
22
22
|
__export(index_exports, {
|
|
23
|
-
Button: () => Button
|
|
23
|
+
Button: () => Button,
|
|
24
|
+
Text: () => Text
|
|
24
25
|
});
|
|
25
26
|
module.exports = __toCommonJS(index_exports);
|
|
26
27
|
|
|
27
28
|
// src/components/Button/Button.tsx
|
|
28
29
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
30
|
+
var VARIANT_ACTION_CLASSES = {
|
|
31
|
+
solid: {
|
|
32
|
+
primary: "bg-primary-950 text-text border-2 border-primary-950 hover:bg-primary-800 hover:border-primary-800 focus:bg-primary-950 focus:border-indicator-info active:bg-primary-700 active:border-primary-700 disabled:bg-primary-500 disabled:border-primary-500 disabled:opacity-40 disabled:cursor-not-allowed",
|
|
33
|
+
positive: "bg-success-500 text-text border-2 border-success-500 hover:bg-success-600 hover:border-success-600 focus:bg-success-500 focus:border-indicator-info active:bg-success-700 active:border-success-700 disabled:bg-success-500 disabled:border-success-500 disabled:opacity-40 disabled:cursor-not-allowed",
|
|
34
|
+
negative: "bg-error-500 text-text border-2 border-error-500 hover:bg-error-600 hover:border-error-600 focus:bg-error-500 focus:border-indicator-info active:bg-error-700 active:border-error-700 disabled:bg-error-500 disabled:border-error-500 disabled:opacity-40 disabled:cursor-not-allowed"
|
|
35
|
+
},
|
|
36
|
+
outline: {
|
|
37
|
+
primary: "bg-transparent text-primary-950 border border-primary-950 hover:bg-background-50 hover:text-primary-400 hover:border-primary-400 focus:text-primary-600 focus:border-2 focus:border-indicator-info active:text-primary-700 active:border-primary-700 disabled:opacity-40 disabled:cursor-not-allowed",
|
|
38
|
+
positive: "bg-transparent text-success-500 border border-success-300 hover:bg-background-50 hover:text-success-400 hover:border-success-400 focus:text-success-600 focus:border-2 focus:border-indicator-info active:text-success-700 active:border-success-700 disabled:opacity-40 disabled:cursor-not-allowed",
|
|
39
|
+
negative: "bg-transparent text-error-500 border border-error-300 hover:bg-background-50 hover:text-error-400 hover:border-error-400 focus:text-error-600 focus:border-2 focus:border-indicator-info active:text-error-700 active:border-error-700 disabled:opacity-40 disabled:cursor-not-allowed"
|
|
40
|
+
},
|
|
41
|
+
link: {
|
|
42
|
+
primary: "bg-transparent text-primary-950 hover:text-primary-400 focus:text-primary-600 focus:border-2 focus:border-indicator-info active:text-primary-700 disabled:opacity-40 disabled:cursor-not-allowed",
|
|
43
|
+
positive: "bg-transparent text-success-500 hover:text-success-400 focus:text-success-600 focus:border-2 focus:border-indicator-info active:text-success-700 disabled:opacity-40 disabled:cursor-not-allowed",
|
|
44
|
+
negative: "bg-transparent text-error-500 hover:text-error-400 focus:text-error-600 focus:border-2 focus:border-indicator-info active:text-error-700 disabled:opacity-40 disabled:cursor-not-allowed"
|
|
45
|
+
}
|
|
46
|
+
};
|
|
47
|
+
var SIZE_CLASSES = {
|
|
48
|
+
"extra-small": "text-xs px-3.5 py-2",
|
|
49
|
+
small: "text-sm px-4 py-2.5",
|
|
50
|
+
medium: "text-md px-5 py-2.5",
|
|
51
|
+
large: "text-lg px-6 py-3",
|
|
52
|
+
"extra-large": "text-lg px-7 py-3.5"
|
|
53
|
+
};
|
|
29
54
|
var Button = ({
|
|
30
55
|
children,
|
|
31
|
-
|
|
32
|
-
|
|
56
|
+
iconLeft,
|
|
57
|
+
iconRight,
|
|
58
|
+
size = "medium",
|
|
59
|
+
variant = "solid",
|
|
60
|
+
action = "primary",
|
|
33
61
|
className = "",
|
|
62
|
+
disabled,
|
|
63
|
+
type = "button",
|
|
34
64
|
...props
|
|
35
65
|
}) => {
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
variantClasses = "bg-gray-200 hover:bg-gray-300 text-black";
|
|
41
|
-
break;
|
|
42
|
-
case "danger":
|
|
43
|
-
variantClasses = "bg-red-600 hover:bg-red-700 text-white";
|
|
44
|
-
break;
|
|
45
|
-
case "primary":
|
|
46
|
-
default:
|
|
47
|
-
variantClasses = "bg-blue-600 hover:bg-blue-700 text-white";
|
|
48
|
-
break;
|
|
49
|
-
}
|
|
50
|
-
switch (size) {
|
|
51
|
-
case "sm":
|
|
52
|
-
sizeClasses = "text-sm px-3 py-1.5";
|
|
53
|
-
break;
|
|
54
|
-
case "lg":
|
|
55
|
-
sizeClasses = "text-lg px-5 py-3";
|
|
56
|
-
break;
|
|
57
|
-
case "md":
|
|
58
|
-
default:
|
|
59
|
-
sizeClasses = "text-base px-4 py-2";
|
|
60
|
-
break;
|
|
61
|
-
}
|
|
62
|
-
const baseClasses = "rounded font-medium focus:outline-none focus:ring transition";
|
|
63
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
66
|
+
const sizeClasses = SIZE_CLASSES[size];
|
|
67
|
+
const variantClasses = VARIANT_ACTION_CLASSES[variant][action];
|
|
68
|
+
const baseClasses = "inline-flex items-center justify-center rounded-full cursor-pointer font-medium";
|
|
69
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
64
70
|
"button",
|
|
65
71
|
{
|
|
66
72
|
className: `${baseClasses} ${variantClasses} ${sizeClasses} ${className}`,
|
|
73
|
+
disabled,
|
|
74
|
+
type,
|
|
75
|
+
...props,
|
|
76
|
+
children: [
|
|
77
|
+
iconLeft && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "mr-2 flex items-center", children: iconLeft }),
|
|
78
|
+
children,
|
|
79
|
+
iconRight && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ml-2 flex items-center", children: iconRight })
|
|
80
|
+
]
|
|
81
|
+
}
|
|
82
|
+
);
|
|
83
|
+
};
|
|
84
|
+
|
|
85
|
+
// src/components/Text/Text.tsx
|
|
86
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
87
|
+
var Text = ({
|
|
88
|
+
children,
|
|
89
|
+
size = "md",
|
|
90
|
+
weight = "normal",
|
|
91
|
+
color = "black",
|
|
92
|
+
as,
|
|
93
|
+
className = "",
|
|
94
|
+
...props
|
|
95
|
+
}) => {
|
|
96
|
+
let sizeClasses = "";
|
|
97
|
+
let weightClasses = "";
|
|
98
|
+
let colorClasses = "";
|
|
99
|
+
const sizeClassMap = {
|
|
100
|
+
"2xs": "text-2xs",
|
|
101
|
+
xs: "text-xs",
|
|
102
|
+
sm: "text-sm",
|
|
103
|
+
md: "text-md",
|
|
104
|
+
lg: "text-lg",
|
|
105
|
+
xl: "text-xl",
|
|
106
|
+
"2xl": "text-2xl",
|
|
107
|
+
"3xl": "text-3xl",
|
|
108
|
+
"4xl": "text-4xl",
|
|
109
|
+
"5xl": "text-5xl",
|
|
110
|
+
"6xl": "text-6xl"
|
|
111
|
+
};
|
|
112
|
+
sizeClasses = sizeClassMap[size] ?? sizeClassMap.md;
|
|
113
|
+
const weightClassMap = {
|
|
114
|
+
hairline: "font-hairline",
|
|
115
|
+
light: "font-light",
|
|
116
|
+
normal: "font-normal",
|
|
117
|
+
medium: "font-medium",
|
|
118
|
+
semibold: "font-semibold",
|
|
119
|
+
bold: "font-bold",
|
|
120
|
+
extrabold: "font-extrabold",
|
|
121
|
+
black: "font-black"
|
|
122
|
+
};
|
|
123
|
+
weightClasses = weightClassMap[weight] ?? weightClassMap.normal;
|
|
124
|
+
const colorClassMap = {
|
|
125
|
+
white: "text-text",
|
|
126
|
+
black: "text-text-950"
|
|
127
|
+
};
|
|
128
|
+
colorClasses = colorClassMap[color] ?? colorClassMap.black;
|
|
129
|
+
const baseClasses = "font-primary";
|
|
130
|
+
const Component = as ?? "p";
|
|
131
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
132
|
+
Component,
|
|
133
|
+
{
|
|
134
|
+
className: `${baseClasses} ${sizeClasses} ${weightClasses} ${colorClasses} ${className}`,
|
|
67
135
|
...props,
|
|
68
136
|
children
|
|
69
137
|
}
|
|
@@ -71,5 +139,6 @@ var Button = ({
|
|
|
71
139
|
};
|
|
72
140
|
// Annotate the CommonJS export names for ESM import in node:
|
|
73
141
|
0 && (module.exports = {
|
|
74
|
-
Button
|
|
142
|
+
Button,
|
|
143
|
+
Text
|
|
75
144
|
});
|
package/dist/index.mjs
CHANGED
|
@@ -1,48 +1,116 @@
|
|
|
1
1
|
// src/components/Button/Button.tsx
|
|
2
|
-
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
var VARIANT_ACTION_CLASSES = {
|
|
4
|
+
solid: {
|
|
5
|
+
primary: "bg-primary-950 text-text border-2 border-primary-950 hover:bg-primary-800 hover:border-primary-800 focus:bg-primary-950 focus:border-indicator-info active:bg-primary-700 active:border-primary-700 disabled:bg-primary-500 disabled:border-primary-500 disabled:opacity-40 disabled:cursor-not-allowed",
|
|
6
|
+
positive: "bg-success-500 text-text border-2 border-success-500 hover:bg-success-600 hover:border-success-600 focus:bg-success-500 focus:border-indicator-info active:bg-success-700 active:border-success-700 disabled:bg-success-500 disabled:border-success-500 disabled:opacity-40 disabled:cursor-not-allowed",
|
|
7
|
+
negative: "bg-error-500 text-text border-2 border-error-500 hover:bg-error-600 hover:border-error-600 focus:bg-error-500 focus:border-indicator-info active:bg-error-700 active:border-error-700 disabled:bg-error-500 disabled:border-error-500 disabled:opacity-40 disabled:cursor-not-allowed"
|
|
8
|
+
},
|
|
9
|
+
outline: {
|
|
10
|
+
primary: "bg-transparent text-primary-950 border border-primary-950 hover:bg-background-50 hover:text-primary-400 hover:border-primary-400 focus:text-primary-600 focus:border-2 focus:border-indicator-info active:text-primary-700 active:border-primary-700 disabled:opacity-40 disabled:cursor-not-allowed",
|
|
11
|
+
positive: "bg-transparent text-success-500 border border-success-300 hover:bg-background-50 hover:text-success-400 hover:border-success-400 focus:text-success-600 focus:border-2 focus:border-indicator-info active:text-success-700 active:border-success-700 disabled:opacity-40 disabled:cursor-not-allowed",
|
|
12
|
+
negative: "bg-transparent text-error-500 border border-error-300 hover:bg-background-50 hover:text-error-400 hover:border-error-400 focus:text-error-600 focus:border-2 focus:border-indicator-info active:text-error-700 active:border-error-700 disabled:opacity-40 disabled:cursor-not-allowed"
|
|
13
|
+
},
|
|
14
|
+
link: {
|
|
15
|
+
primary: "bg-transparent text-primary-950 hover:text-primary-400 focus:text-primary-600 focus:border-2 focus:border-indicator-info active:text-primary-700 disabled:opacity-40 disabled:cursor-not-allowed",
|
|
16
|
+
positive: "bg-transparent text-success-500 hover:text-success-400 focus:text-success-600 focus:border-2 focus:border-indicator-info active:text-success-700 disabled:opacity-40 disabled:cursor-not-allowed",
|
|
17
|
+
negative: "bg-transparent text-error-500 hover:text-error-400 focus:text-error-600 focus:border-2 focus:border-indicator-info active:text-error-700 disabled:opacity-40 disabled:cursor-not-allowed"
|
|
18
|
+
}
|
|
19
|
+
};
|
|
20
|
+
var SIZE_CLASSES = {
|
|
21
|
+
"extra-small": "text-xs px-3.5 py-2",
|
|
22
|
+
small: "text-sm px-4 py-2.5",
|
|
23
|
+
medium: "text-md px-5 py-2.5",
|
|
24
|
+
large: "text-lg px-6 py-3",
|
|
25
|
+
"extra-large": "text-lg px-7 py-3.5"
|
|
26
|
+
};
|
|
3
27
|
var Button = ({
|
|
4
28
|
children,
|
|
5
|
-
|
|
6
|
-
|
|
29
|
+
iconLeft,
|
|
30
|
+
iconRight,
|
|
31
|
+
size = "medium",
|
|
32
|
+
variant = "solid",
|
|
33
|
+
action = "primary",
|
|
7
34
|
className = "",
|
|
35
|
+
disabled,
|
|
36
|
+
type = "button",
|
|
8
37
|
...props
|
|
9
38
|
}) => {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
variantClasses = "bg-gray-200 hover:bg-gray-300 text-black";
|
|
15
|
-
break;
|
|
16
|
-
case "danger":
|
|
17
|
-
variantClasses = "bg-red-600 hover:bg-red-700 text-white";
|
|
18
|
-
break;
|
|
19
|
-
case "primary":
|
|
20
|
-
default:
|
|
21
|
-
variantClasses = "bg-blue-600 hover:bg-blue-700 text-white";
|
|
22
|
-
break;
|
|
23
|
-
}
|
|
24
|
-
switch (size) {
|
|
25
|
-
case "sm":
|
|
26
|
-
sizeClasses = "text-sm px-3 py-1.5";
|
|
27
|
-
break;
|
|
28
|
-
case "lg":
|
|
29
|
-
sizeClasses = "text-lg px-5 py-3";
|
|
30
|
-
break;
|
|
31
|
-
case "md":
|
|
32
|
-
default:
|
|
33
|
-
sizeClasses = "text-base px-4 py-2";
|
|
34
|
-
break;
|
|
35
|
-
}
|
|
36
|
-
const baseClasses = "rounded font-medium focus:outline-none focus:ring transition";
|
|
37
|
-
return /* @__PURE__ */ jsx(
|
|
39
|
+
const sizeClasses = SIZE_CLASSES[size];
|
|
40
|
+
const variantClasses = VARIANT_ACTION_CLASSES[variant][action];
|
|
41
|
+
const baseClasses = "inline-flex items-center justify-center rounded-full cursor-pointer font-medium";
|
|
42
|
+
return /* @__PURE__ */ jsxs(
|
|
38
43
|
"button",
|
|
39
44
|
{
|
|
40
45
|
className: `${baseClasses} ${variantClasses} ${sizeClasses} ${className}`,
|
|
46
|
+
disabled,
|
|
47
|
+
type,
|
|
48
|
+
...props,
|
|
49
|
+
children: [
|
|
50
|
+
iconLeft && /* @__PURE__ */ jsx("span", { className: "mr-2 flex items-center", children: iconLeft }),
|
|
51
|
+
children,
|
|
52
|
+
iconRight && /* @__PURE__ */ jsx("span", { className: "ml-2 flex items-center", children: iconRight })
|
|
53
|
+
]
|
|
54
|
+
}
|
|
55
|
+
);
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
// src/components/Text/Text.tsx
|
|
59
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
60
|
+
var Text = ({
|
|
61
|
+
children,
|
|
62
|
+
size = "md",
|
|
63
|
+
weight = "normal",
|
|
64
|
+
color = "black",
|
|
65
|
+
as,
|
|
66
|
+
className = "",
|
|
67
|
+
...props
|
|
68
|
+
}) => {
|
|
69
|
+
let sizeClasses = "";
|
|
70
|
+
let weightClasses = "";
|
|
71
|
+
let colorClasses = "";
|
|
72
|
+
const sizeClassMap = {
|
|
73
|
+
"2xs": "text-2xs",
|
|
74
|
+
xs: "text-xs",
|
|
75
|
+
sm: "text-sm",
|
|
76
|
+
md: "text-md",
|
|
77
|
+
lg: "text-lg",
|
|
78
|
+
xl: "text-xl",
|
|
79
|
+
"2xl": "text-2xl",
|
|
80
|
+
"3xl": "text-3xl",
|
|
81
|
+
"4xl": "text-4xl",
|
|
82
|
+
"5xl": "text-5xl",
|
|
83
|
+
"6xl": "text-6xl"
|
|
84
|
+
};
|
|
85
|
+
sizeClasses = sizeClassMap[size] ?? sizeClassMap.md;
|
|
86
|
+
const weightClassMap = {
|
|
87
|
+
hairline: "font-hairline",
|
|
88
|
+
light: "font-light",
|
|
89
|
+
normal: "font-normal",
|
|
90
|
+
medium: "font-medium",
|
|
91
|
+
semibold: "font-semibold",
|
|
92
|
+
bold: "font-bold",
|
|
93
|
+
extrabold: "font-extrabold",
|
|
94
|
+
black: "font-black"
|
|
95
|
+
};
|
|
96
|
+
weightClasses = weightClassMap[weight] ?? weightClassMap.normal;
|
|
97
|
+
const colorClassMap = {
|
|
98
|
+
white: "text-text",
|
|
99
|
+
black: "text-text-950"
|
|
100
|
+
};
|
|
101
|
+
colorClasses = colorClassMap[color] ?? colorClassMap.black;
|
|
102
|
+
const baseClasses = "font-primary";
|
|
103
|
+
const Component = as ?? "p";
|
|
104
|
+
return /* @__PURE__ */ jsx2(
|
|
105
|
+
Component,
|
|
106
|
+
{
|
|
107
|
+
className: `${baseClasses} ${sizeClasses} ${weightClasses} ${colorClasses} ${className}`,
|
|
41
108
|
...props,
|
|
42
109
|
children
|
|
43
110
|
}
|
|
44
111
|
);
|
|
45
112
|
};
|
|
46
113
|
export {
|
|
47
|
-
Button
|
|
114
|
+
Button,
|
|
115
|
+
Text
|
|
48
116
|
};
|
package/package.json
CHANGED