@dev-blinq/ui-systems 1.0.4 → 1.0.6
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.js +1 -47
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -47
- package/dist/index.mjs.map +1 -1
- package/package.json +5 -1
- package/build +0 -22
- package/index.html +0 -14
- package/public/colors.css +0 -141
- package/src/components/CustomButton/CustomButton.tsx +0 -42
- package/src/components/CustomButton/CustomButtonProps.ts +0 -12
- package/src/components/CustomButton/CustomButtonTypes.ts +0 -28
- package/src/components/CustomButton/css/color/default.css +0 -84
- package/src/components/CustomButton/css/color/disabled.css +0 -58
- package/src/components/CustomButton/css/color/focused.css +0 -39
- package/src/components/CustomButton/css/color/hover.css +0 -39
- package/src/components/CustomButton/css/customButton.css +0 -73
- package/src/components/CustomButton/css/index.css +0 -6
- package/src/components/CustomButton/css/size.css +0 -23
- package/src/components/CustomCheckbox.tsx +0 -24
- package/src/components/CustomInput/ChooseInput.tsx +0 -36
- package/src/components/CustomInput/CustomInput.tsx +0 -43
- package/src/components/CustomInput/CustomInputProps.ts +0 -40
- package/src/components/CustomInput/css/index.css +0 -7
- package/src/components/CustomInput/css/input.css +0 -76
- package/src/components/CustomInput/css/size.css +0 -3
- package/src/components/CustomInput/css/state/default.css +0 -0
- package/src/components/CustomInput/css/state/disabled.css +0 -5
- package/src/components/CustomInput/css/state/error.css +0 -3
- package/src/components/CustomInput/css/state/filled.css +0 -0
- package/src/components/CustomInput/css/state/focused.css +0 -6
- package/src/components/CustomInput/css/state/hover.css +0 -5
- package/src/components/CustomInput/types/Action.tsx +0 -34
- package/src/components/CustomInput/types/CreditCard.tsx +0 -25
- package/src/components/CustomInput/types/Currency.tsx +0 -68
- package/src/components/CustomInput/types/Date.tsx +0 -20
- package/src/components/CustomInput/types/Link.tsx +0 -32
- package/src/components/CustomInput/types/Number.tsx +0 -23
- package/src/components/CustomInput/types/Password.tsx +0 -30
- package/src/components/CustomInput/types/Telephone.tsx +0 -0
- package/src/components/CustomInput/types/Text.tsx +0 -27
- package/src/components/Typography/Typography.tsx +0 -28
- package/src/components/Typography/css/bold.css +0 -20
- package/src/components/Typography/css/category/display.css +0 -20
- package/src/components/Typography/css/category/heading.css +0 -41
- package/src/components/Typography/css/category/text.css +0 -48
- package/src/components/Typography/css/index.css +0 -4
- package/src/icons/details.tsx +0 -10
- package/src/icons/index.tsx +0 -2
- package/src/icons/lock.tsx +0 -29
- package/src/icons/mail.svg +0 -4
- package/src/icons/mail.tsx +0 -23
- package/src/icons/password-eye.tsx +0 -10
- package/src/index.ts +0 -3
- package/src/playground/App.tsx +0 -105
- package/src/playground/main.tsx +0 -9
- package/src/svg.d.ts +0 -5
- package/tsconfig.json +0 -17
- package/tsup.config.ts +0 -10
package/package.json
CHANGED
|
@@ -1,10 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dev-blinq/ui-systems",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.6",
|
|
4
4
|
"description": "this package contains all ui components like button, input, checkbox, colors that blinq.io needs",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
7
7
|
"module": "./dist/index.mjs",
|
|
8
|
+
"style": "./dist/index.css",
|
|
9
|
+
"files": [
|
|
10
|
+
"dist"
|
|
11
|
+
],
|
|
8
12
|
"scripts": {
|
|
9
13
|
"start": "npx vite --host",
|
|
10
14
|
"test": "echo \"Error: no test specified\" && exit 1",
|
package/build
DELETED
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@dev-blinq/ui-systems",
|
|
3
|
-
"version": "1.0.0",
|
|
4
|
-
"description": "this package contains all ui components like button, input, checkbox, colors that blinq.io needs",
|
|
5
|
-
"main": "./dist/index.js",
|
|
6
|
-
"types": "./dist/index.d.ts",
|
|
7
|
-
"scripts": {
|
|
8
|
-
"start": "npx vite --host",
|
|
9
|
-
"test": "echo \"Error: no test specified\" && exit 1",
|
|
10
|
-
"build": "tsc && cp ./package.json ./build"
|
|
11
|
-
},
|
|
12
|
-
"author": "",
|
|
13
|
-
"license": "ISC",
|
|
14
|
-
"dependencies": {
|
|
15
|
-
"@mui/material": "^5.16.6",
|
|
16
|
-
"@types/react-dom": "^18.3.0",
|
|
17
|
-
"@vitejs/plugin-react": "^4.3.1",
|
|
18
|
-
"react-dom": "^18.3.1",
|
|
19
|
-
"typescript": "^5.5.4",
|
|
20
|
-
"vite": "^5.3.5"
|
|
21
|
-
}
|
|
22
|
-
}
|
package/index.html
DELETED
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>Component Playground</title>
|
|
7
|
-
<link rel="stylesheet" href="/colors.css" />
|
|
8
|
-
<link href='https://fonts.googleapis.com/css?family=Plus Jakarta Sans' rel='stylesheet'>
|
|
9
|
-
</head>
|
|
10
|
-
<body>
|
|
11
|
-
<div id="root"></div>
|
|
12
|
-
<script type="module" src="/src/playground/main.tsx"></script>
|
|
13
|
-
</body>
|
|
14
|
-
</html>
|
package/public/colors.css
DELETED
|
@@ -1,141 +0,0 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
/* font-family */
|
|
3
|
-
/* --font-family: "Courier New", sans-serif; */
|
|
4
|
-
--font-family: "Plus Jakarta Sans", sans-serif;
|
|
5
|
-
|
|
6
|
-
/* Primary Colors */
|
|
7
|
-
--primary-lightest: #f5f7ff;
|
|
8
|
-
--primary-light: #ebeefe;
|
|
9
|
-
--primary-main: #093db0;
|
|
10
|
-
--primary-dark: #4338ca;
|
|
11
|
-
--primary-darkest: #312e81;
|
|
12
|
-
/* Secondary Colors */
|
|
13
|
-
--secondary-lightest: #f8f9fa;
|
|
14
|
-
--secondary-light: #f3f4f6;
|
|
15
|
-
--secondary-main: #6c737f;
|
|
16
|
-
--secondary-dark: #384250;
|
|
17
|
-
--secondary-darkest: #111927;
|
|
18
|
-
/* Error Colors */
|
|
19
|
-
--error-lightest: #fef3f2;
|
|
20
|
-
--error-light: #fee4e2;
|
|
21
|
-
--error-main: #f04438;
|
|
22
|
-
--error-dark: #b42318;
|
|
23
|
-
--error-darkest: #7a271a;
|
|
24
|
-
/* Warning Colors */
|
|
25
|
-
--warning-lightest: #fffaeb;
|
|
26
|
-
--warning-light: #fef0c7;
|
|
27
|
-
--warning-main: #f79009;
|
|
28
|
-
--warning-dark: #b54708;
|
|
29
|
-
--warning-darkest: #7a2e0e;
|
|
30
|
-
/* Info Colors */
|
|
31
|
-
--info-lightest: #ecfdff;
|
|
32
|
-
--info-light: #cff9fe;
|
|
33
|
-
--info-main: #06aed4;
|
|
34
|
-
--info-dark: #0e7090;
|
|
35
|
-
--info-darkest: #164c63;
|
|
36
|
-
/* Success Colors */
|
|
37
|
-
--success-lightest: #f0fdf9;
|
|
38
|
-
--success-light: #ccfbef;
|
|
39
|
-
--success-main: #15b79e;
|
|
40
|
-
--success-dark: #107569;
|
|
41
|
-
--success-darkest: #134e48;
|
|
42
|
-
/* Purple Colors */
|
|
43
|
-
--purple-lightest: #f9f5ff;
|
|
44
|
-
--purple-light: #f4ebff;
|
|
45
|
-
--purple-main: #9e77ed;
|
|
46
|
-
--purple-dark: #6941c6;
|
|
47
|
-
--purple-darkest: #42307d;
|
|
48
|
-
/* Indigo Colors */
|
|
49
|
-
--indigo-lightest: #f5f7ff;
|
|
50
|
-
--indigo-light: #edfcf2;
|
|
51
|
-
--indigo-main: #16b364;
|
|
52
|
-
--indigo-dark: #087443;
|
|
53
|
-
--indigo-darkest: #084c2e;
|
|
54
|
-
/* Green Colors */
|
|
55
|
-
--green-lightest: #f5f8ff;
|
|
56
|
-
--green-light: #ebefff;
|
|
57
|
-
--green-main: #2970ff;
|
|
58
|
-
--green-dark: #004eeb;
|
|
59
|
-
--green-darkest: #00359e;
|
|
60
|
-
|
|
61
|
-
--blinq-theme-light: #cfd4e0;
|
|
62
|
-
--blinq-theme-main: #194ab7;
|
|
63
|
-
|
|
64
|
-
/* more colors */
|
|
65
|
-
|
|
66
|
-
/* Greyscale */
|
|
67
|
-
--color-white: #ffffff;
|
|
68
|
-
--color-grey-5: #fdfdfd;
|
|
69
|
-
--color-grey-10: #f9f9f9;
|
|
70
|
-
--color-grey-20: #f1f1f1;
|
|
71
|
-
--color-grey-30: #ececed;
|
|
72
|
-
--color-grey-40: #e6e6e6;
|
|
73
|
-
--color-grey-50: #dcdcde;
|
|
74
|
-
--color-grey-60: #c9c9cc;
|
|
75
|
-
--color-grey-70: #939197;
|
|
76
|
-
--color-grey-80: #717076;
|
|
77
|
-
--color-grey-90: #4f4d55;
|
|
78
|
-
--color-grey-100: #2d2b32;
|
|
79
|
-
--color-grey-110: #080808;
|
|
80
|
-
--color-black: #000000;
|
|
81
|
-
|
|
82
|
-
/* Blue */
|
|
83
|
-
--color-primary-5: #f3f5fb;
|
|
84
|
-
--color-primary-10: #e6ecf7;
|
|
85
|
-
--color-primary-20: #ced8ef;
|
|
86
|
-
--color-primary-30: #b5c5e7;
|
|
87
|
-
--color-primary-40: #9db1df;
|
|
88
|
-
--color-primary-50: #849ed7;
|
|
89
|
-
--color-primary-60: #6b8bd0;
|
|
90
|
-
--color-primary-80: #3a64c0;
|
|
91
|
-
--color-primary-100: #093db0;
|
|
92
|
-
--color-primary-110: #08379e;
|
|
93
|
-
|
|
94
|
-
/* Green */
|
|
95
|
-
--color-success-5: #f2fbf9;
|
|
96
|
-
--color-success-10: #e5f7f3;
|
|
97
|
-
--color-success-20: #ccf0e7;
|
|
98
|
-
--color-success-30: #b2e8db;
|
|
99
|
-
--color-success-40: #99e1d0;
|
|
100
|
-
--color-success-50: #7fd9c3;
|
|
101
|
-
--color-success-60: #66d2b8;
|
|
102
|
-
--color-success-80: #33c3a0;
|
|
103
|
-
--color-success-100: #00b489;
|
|
104
|
-
--color-success-110: #00a27b;
|
|
105
|
-
|
|
106
|
-
/* Orange */
|
|
107
|
-
--color-orange-5: #fff9f5;
|
|
108
|
-
--color-orange-10: #fff4ec;
|
|
109
|
-
--color-orange-20: #ffeadb;
|
|
110
|
-
--color-orange-30: #ffdfc8;
|
|
111
|
-
--color-orange-40: #ffd6b7;
|
|
112
|
-
--color-orange-50: #ffcba4;
|
|
113
|
-
--color-orange-60: #ffc192;
|
|
114
|
-
--color-orange-80: #ffac6e;
|
|
115
|
-
--color-orange-100: #ff974a;
|
|
116
|
-
--color-orange-110: #e58843;
|
|
117
|
-
|
|
118
|
-
/* Red */
|
|
119
|
-
--color-error-5: #fef6f4;
|
|
120
|
-
--color-error-10: #fdece9;
|
|
121
|
-
--color-error-20: #fbdad3;
|
|
122
|
-
--color-error-30: #f9c7bc;
|
|
123
|
-
--color-error-40: #f7b5a6;
|
|
124
|
-
--color-error-50: #f5a290;
|
|
125
|
-
--color-error-60: #f2907a;
|
|
126
|
-
--color-error-80: #ee6b4d;
|
|
127
|
-
--color-error-100: #ea4621;
|
|
128
|
-
--color-error-110: #d33f1e;
|
|
129
|
-
|
|
130
|
-
/* Yellow */
|
|
131
|
-
--color-warning-5: #fffcf2;
|
|
132
|
-
--color-warning-10: #fff9e5;
|
|
133
|
-
--color-warning-20: #fff3cc;
|
|
134
|
-
--color-warning-30: #ffeeb2;
|
|
135
|
-
--color-warning-40: #ffe899;
|
|
136
|
-
--color-warning-50: #ffe280;
|
|
137
|
-
--color-warning-60: #ffdc66;
|
|
138
|
-
--color-warning-80: #ffd133;
|
|
139
|
-
--color-warning-100: #ffc500;
|
|
140
|
-
--color-warning-110: #e5b100;
|
|
141
|
-
}
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { CustomButtonProps } from "./CustomButtonProps";
|
|
3
|
-
import "./css/customButton.css";
|
|
4
|
-
import "./css/size.css";
|
|
5
|
-
import "./css/color/default.css";
|
|
6
|
-
import "./css/color/hover.css";
|
|
7
|
-
import "./css/color/focused.css";
|
|
8
|
-
import "./css/color/disabled.css";
|
|
9
|
-
|
|
10
|
-
import TypographyCustom from "../Typography/Typography";
|
|
11
|
-
|
|
12
|
-
const CustomButton: React.FC<CustomButtonProps> = ({
|
|
13
|
-
size = "lg",
|
|
14
|
-
colorHierarchy = "brand/primary",
|
|
15
|
-
disabled = false,
|
|
16
|
-
text,
|
|
17
|
-
leftIcon,
|
|
18
|
-
rightIcon,
|
|
19
|
-
onClick,
|
|
20
|
-
}) => {
|
|
21
|
-
return (
|
|
22
|
-
<button
|
|
23
|
-
className="button"
|
|
24
|
-
data-size={size}
|
|
25
|
-
data-colorHierarchy={colorHierarchy}
|
|
26
|
-
onClick={onClick}
|
|
27
|
-
disabled={disabled}
|
|
28
|
-
>
|
|
29
|
-
{/* {leftIcon && <span>{leftIcon}</span>} */}
|
|
30
|
-
{leftIcon && <img src={leftIcon} alt="icon" />}
|
|
31
|
-
|
|
32
|
-
<TypographyCustom className="input-typography" category="text" Size={size} bold="bold">
|
|
33
|
-
{text}
|
|
34
|
-
</TypographyCustom>
|
|
35
|
-
|
|
36
|
-
{/* {rightIcon && <span>{rightIcon}</span>} */}
|
|
37
|
-
{rightIcon && <img src={rightIcon} alt="icon" />}
|
|
38
|
-
</button>
|
|
39
|
-
);
|
|
40
|
-
};
|
|
41
|
-
|
|
42
|
-
export default CustomButton;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { ButtonSize, ButtonColorHierarchyType } from "./CustomButtonTypes";
|
|
2
|
-
import { ReactNode } from "react";
|
|
3
|
-
|
|
4
|
-
export interface CustomButtonProps {
|
|
5
|
-
size?: ButtonSize;
|
|
6
|
-
colorHierarchy?: ButtonColorHierarchyType;
|
|
7
|
-
disabled?: boolean;
|
|
8
|
-
text: string;
|
|
9
|
-
leftIcon?: any;
|
|
10
|
-
rightIcon?: any;
|
|
11
|
-
onClick?: () => void;
|
|
12
|
-
}
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
export type ButtonSize = "sm" | "md" | "lg" | "xl";
|
|
2
|
-
export type ButtonColor = "brand" | "gray" | "destructive" | "white";
|
|
3
|
-
export type ButtonHierarchy = "primary" | "secondary" | "link" | "linkContainer";
|
|
4
|
-
export type ButtonState = "default" | "hover" | "focused" | "disabled";
|
|
5
|
-
export type ButtonColorHierarchyType = `${ButtonColor}/${ButtonHierarchy}`;
|
|
6
|
-
|
|
7
|
-
export const buttonSizeArray: ButtonSize[] = ["sm", "md", "lg", "xl"];
|
|
8
|
-
export const buttonColorArray: ButtonColor[] = ["brand", "gray", "destructive", "white"];
|
|
9
|
-
export const buttonHierarchyArray: ButtonHierarchy[] = ["primary", "secondary", "link", "linkContainer"];
|
|
10
|
-
export const buttonStateArray: ButtonState[] = ["default", "hover", "focused", "disabled"];
|
|
11
|
-
export const buttonColorHierarchyArray: ButtonColorHierarchyType[] = [
|
|
12
|
-
"brand/primary",
|
|
13
|
-
"brand/secondary",
|
|
14
|
-
"brand/link",
|
|
15
|
-
"brand/linkContainer",
|
|
16
|
-
"gray/primary",
|
|
17
|
-
"gray/secondary",
|
|
18
|
-
"gray/link",
|
|
19
|
-
"gray/linkContainer",
|
|
20
|
-
"destructive/primary",
|
|
21
|
-
"destructive/secondary",
|
|
22
|
-
"destructive/link",
|
|
23
|
-
"destructive/linkContainer",
|
|
24
|
-
"white/primary",
|
|
25
|
-
"white/secondary",
|
|
26
|
-
"white/link",
|
|
27
|
-
"white/linkContainer",
|
|
28
|
-
];
|
|
@@ -1,84 +0,0 @@
|
|
|
1
|
-
.button[data-colorHierarchy="brand/primary"] {
|
|
2
|
-
background-color: var(--primary-main);
|
|
3
|
-
}
|
|
4
|
-
|
|
5
|
-
.button[data-colorHierarchy="brand/primary"] .input-typography {
|
|
6
|
-
color: #fff;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
.button[data-colorHierarchy="gray/secondary"] {
|
|
10
|
-
background-color: #f1f1f1;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
.button[data-colorHierarchy="gray/secondary"] .input-typography {
|
|
14
|
-
color: #080808;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
.button[data-colorHierarchy="white/secondary"] {
|
|
18
|
-
background-color: #fff;
|
|
19
|
-
box-shadow: 0px 1px 2px 0px rgba(23, 23, 23, 0.05);
|
|
20
|
-
border: var(--border-radius-radius-none, 1px) solid var(--border-default, #e6e6e6);
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
.button[data-colorHierarchy="white/secondary"] .input-typography {
|
|
24
|
-
color: #080808;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
.button[data-colorHierarchy="gray/linkContainer"] {
|
|
28
|
-
background-color: #fff;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
.button[data-colorHierarchy="gray/linkContainer"] .input-typography {
|
|
32
|
-
color: #080808;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
.button[data-colorHierarchy="gray/link"] {
|
|
36
|
-
background-color: #fff;
|
|
37
|
-
padding: 0;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
.button[data-colorHierarchy="gray/link"] .input-typography {
|
|
41
|
-
color: #080808;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
.button[data-colorHierarchy="brand/link"] {
|
|
45
|
-
background-color: #fff;
|
|
46
|
-
padding: 0;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
.button[data-colorHierarchy="brand/link"] .input-typography {
|
|
50
|
-
color: var(--primary-main);
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
.button[data-colorHierarchy="destructive/primary"] {
|
|
54
|
-
background: var(--surface-error, #ea4621);
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
.button[data-colorHierarchy="destructive/primary"] .input-typography {
|
|
58
|
-
color: #fff;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
.button[data-colorHierarchy="destructive/secondary"] {
|
|
62
|
-
background: var(--surface-error-secondary, #fdece9);
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
.button[data-colorHierarchy="destructive/secondary"] .input-typography {
|
|
66
|
-
color: var(--text-error, #ea4621);
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
.button[data-colorHierarchy="destructive/linkContainer"] {
|
|
70
|
-
background-color: #fff;
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
.button[data-colorHierarchy="destructive/linkContainer"] .input-typography {
|
|
74
|
-
color: var(--text-error, #ea4621);
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
.button[data-colorHierarchy=""] {
|
|
78
|
-
background-color: #fff;
|
|
79
|
-
padding: 0;
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
.button[data-colorHierarchy=""] .input-typography {
|
|
83
|
-
color: var(--text-error, #ea4621);
|
|
84
|
-
}
|
|
@@ -1,58 +0,0 @@
|
|
|
1
|
-
.button[data-colorHierarchy="brand/primary"]:disabled {
|
|
2
|
-
background: var(--surface-disabled, #f1f1f1);
|
|
3
|
-
}
|
|
4
|
-
|
|
5
|
-
.button:disabled .input-typography {
|
|
6
|
-
color: var(--text-disabled, #939197);
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
.button[data-colorHierarchy="gray/secondary"]:disabled {
|
|
10
|
-
background: var(--surface-disabled, #f1f1f1);
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
.button[data-colorHierarchy="white/secondary"]:disabled {
|
|
14
|
-
background: var(--surface-white---disabled, #fdfdfd);
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
/* .button[data-colorHierarchy="gray/linkContainer"]:disabled {
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
.button[data-colorHierarchy="gray/link"]:disabled {
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
.button[data-colorHierarchy="brand/link"]:disabled {
|
|
24
|
-
} */
|
|
25
|
-
|
|
26
|
-
.button[data-colorHierarchy="brand/link"]:disabled .input-typography {
|
|
27
|
-
color: var(--text-action-disabled, #849ed7);
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
.button[data-colorHierarchy="destructive/primary"]:disabled {
|
|
31
|
-
background: var(--surface-error-disabled, #fdece9);
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
.button[data-colorHierarchy="destructive/primary"]:disabled .input-typography {
|
|
35
|
-
color: var(--text-error-disabled, #f5a290);
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
.button[data-colorHierarchy="destructive/secondary"]:disabled {
|
|
39
|
-
background: var(--surface-error-disabled, #fdece9);
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
.button[data-colorHierarchy="destructive/secondary"]:disabled .input-typography {
|
|
43
|
-
color: var(--text-error-disabled, #f5a290);
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
/* .button[data-colorHierarchy="destructive/linkContainer"]:disabled {
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
.button[data-colorHierarchy=""]:disabled {
|
|
50
|
-
} */
|
|
51
|
-
|
|
52
|
-
.button[data-colorHierarchy="destructive/linkContainer"]:disabled .input-typography {
|
|
53
|
-
color: var(--text-error-disabled, #f5a290);
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
.button[data-colorHierarchy="destructive/link"]:disabled .input-typography {
|
|
57
|
-
color: var(--text-error-disabled, #f5a290);
|
|
58
|
-
}
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
.button[data-colorHierarchy="brand/primary"]:focus {
|
|
2
|
-
box-shadow: 0px 0px 0px 4px var(--primary-30, #b5c5e7);
|
|
3
|
-
}
|
|
4
|
-
|
|
5
|
-
.button[data-colorHierarchy="gray/secondary"]:focus {
|
|
6
|
-
box-shadow: 0px 0px 0px 4px var(--neutural-50, #e6e6e6);
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
.button[data-colorHierarchy="white/secondary"]:focus {
|
|
10
|
-
box-shadow: 0px 0px 0px 4px var(--neutural-50, #e6e6e6);
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
.button[data-colorHierarchy="gray/linkContainer"]:focus {
|
|
14
|
-
box-shadow: 0px 0px 0px 4px var(--neutural-50, #e6e6e6);
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
.button[data-colorHierarchy="gray/link"]:focus {
|
|
18
|
-
box-shadow: 0px 0px 0px 4px var(--neutural-50, #e6e6e6);
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
.button[data-colorHierarchy="brand/link"]:focus {
|
|
22
|
-
box-shadow: 0px 0px 0px 4px var(--primary-30, #b5c5e7);
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
.button[data-colorHierarchy="destructive/primary"]:focus {
|
|
26
|
-
box-shadow: 0px 0px 0px 4px var(--destructive-30, #f9c7bc);
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
.button[data-colorHierarchy="destructive/secondary"]:focus {
|
|
30
|
-
box-shadow: 0px 0px 0px 4px var(--destructive-30, #f9c7bc);
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
.button[data-colorHierarchy="destructive/linkContainer"]:focus {
|
|
34
|
-
box-shadow: 0px 0px 0px 4px var(--destructive-30, #f9c7bc);
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
.button[data-colorHierarchy=""]:focus {
|
|
38
|
-
box-shadow: 0px 0px 0px 4px var(--destructive-30, #f9c7bc);
|
|
39
|
-
}
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
.button[data-colorHierarchy="brand/primary"]:hover {
|
|
2
|
-
background: var(--surface-primary-hover, #08379e);
|
|
3
|
-
}
|
|
4
|
-
|
|
5
|
-
.button[data-colorHierarchy="gray/secondary"]:hover {
|
|
6
|
-
background: var(--surface-secondary-hover, #ececed);
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
.button[data-colorHierarchy="white/secondary"]:hover {
|
|
10
|
-
background: var(--surface-white---hover, #f9f9f9);
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
.button[data-colorHierarchy="gray/linkContainer"]:hover {
|
|
14
|
-
background: var(--surface-secondary, #f1f1f1);
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
.button[data-colorHierarchy="gray/link"]:hover {
|
|
18
|
-
background-color: #fff;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
.button[data-colorHierarchy="brand/link"]:hover {
|
|
22
|
-
background-color: #fff;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
.button[data-colorHierarchy="destructive/primary"]:hover {
|
|
26
|
-
background: var(--surface-error-hover, #d33f1e);
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
.button[data-colorHierarchy="destructive/secondary"]:hover {
|
|
30
|
-
background: var(--surface-error-secondary-hover, #fbdad3);
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
.button[data-colorHierarchy="destructive/linkContainer"]:hover {
|
|
34
|
-
background: var(--colors-red-5, #fef6f4);
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
.button[data-colorHierarchy=""]:hover {
|
|
38
|
-
background-color: #fff;
|
|
39
|
-
}
|
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
.button {
|
|
2
|
-
display: inline-flex;
|
|
3
|
-
justify-content: center;
|
|
4
|
-
align-items: center;
|
|
5
|
-
font-size: 14px;
|
|
6
|
-
font-weight: bold;
|
|
7
|
-
cursor: pointer;
|
|
8
|
-
transition: all 0.3s ease;
|
|
9
|
-
border: none;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
/* .button[data-color='brand'] {
|
|
13
|
-
background-color: var(--brand-color, #093DB0);
|
|
14
|
-
color: #fff;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
.button[data-color='gray'] {
|
|
18
|
-
background-color: var(--gray-color, #6c757d);
|
|
19
|
-
color: #fff;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
.button[data-color='destructive'] {
|
|
23
|
-
background-color: var(--destructive-color, #dc3545);
|
|
24
|
-
color: #fff;
|
|
25
|
-
} */
|
|
26
|
-
|
|
27
|
-
/* .button[data-color='white'] {
|
|
28
|
-
background-color: #fff;
|
|
29
|
-
color: #000;
|
|
30
|
-
border: 1px solid var(--gray-color, #6c757d);
|
|
31
|
-
} */
|
|
32
|
-
|
|
33
|
-
/* .button[data-hierarchy='primary'] {
|
|
34
|
-
box-shadow: 0px 0px 0px 2px var(--primary-color, #007bff);
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
.button[data-hierarchy='secondary'] {
|
|
38
|
-
box-shadow: none;
|
|
39
|
-
border: 1px solid var(--secondary-color, #6c757d);
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
.button[data-hierarchy='link'] {
|
|
43
|
-
background: none;
|
|
44
|
-
border: none;
|
|
45
|
-
color: var(--brand-color, #007bff);
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
.button[data-hierarchy='linkContainer'] {
|
|
49
|
-
background-color: #f8f9fa;
|
|
50
|
-
color: var(--brand-color, #007bff);
|
|
51
|
-
border: 1px solid var(--gray-color, #6c757d);
|
|
52
|
-
} */
|
|
53
|
-
|
|
54
|
-
/*
|
|
55
|
-
.button[data-state='default'] {
|
|
56
|
-
opacity: 1;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
.button[data-state='hover'] {
|
|
60
|
-
opacity: 0.9;
|
|
61
|
-
background: #08379E;
|
|
62
|
-
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
.button[data-state='focused'] {
|
|
66
|
-
box-shadow: 0px 0px 0px 4px var(--primary-30, #B5C5E7);
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
.button[data-state='disabled'] {
|
|
70
|
-
opacity: 0.5;
|
|
71
|
-
cursor: not-allowed;
|
|
72
|
-
}
|
|
73
|
-
*/
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
.button[data-size="sm"] {
|
|
2
|
-
padding: 8px 12px;
|
|
3
|
-
gap: 8px;
|
|
4
|
-
border-radius: 12px;
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
.button[data-size="md"] {
|
|
8
|
-
padding: 10px 14px;
|
|
9
|
-
gap: 8px;
|
|
10
|
-
border-radius: 12px;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
.button[data-size="lg"] {
|
|
14
|
-
padding: 12px 16px;
|
|
15
|
-
gap: 10px;
|
|
16
|
-
border-radius: 12px;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
.button[data-size="xl"] {
|
|
20
|
-
padding: 16px 24px;
|
|
21
|
-
gap: 12px;
|
|
22
|
-
border-radius: 16px;
|
|
23
|
-
}
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
|
|
3
|
-
type CustomCheckboxProps = {
|
|
4
|
-
checked: boolean;
|
|
5
|
-
onChange?: (checked: boolean) => void;
|
|
6
|
-
label?: string;
|
|
7
|
-
disabled?: boolean;
|
|
8
|
-
};
|
|
9
|
-
|
|
10
|
-
const CustomCheckbox: React.FC<CustomCheckboxProps> = ({ checked, onChange, label, disabled }) => {
|
|
11
|
-
return (
|
|
12
|
-
<label className="flex items-center space-x-3">
|
|
13
|
-
<input
|
|
14
|
-
type="checkbox"
|
|
15
|
-
checked={checked}
|
|
16
|
-
onChange={(e) => onChange && onChange(e.target.checked)}
|
|
17
|
-
disabled={disabled}
|
|
18
|
-
/>
|
|
19
|
-
{label && <span>{label}</span>}
|
|
20
|
-
</label>
|
|
21
|
-
);
|
|
22
|
-
};
|
|
23
|
-
|
|
24
|
-
export default CustomCheckbox;
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
import { InputContext } from "./CustomInputProps";
|
|
2
|
-
import { DefaultInput } from "./types/Text";
|
|
3
|
-
import { ActionInput } from "./types/Action";
|
|
4
|
-
import { CurrencyInput } from "./types/Currency";
|
|
5
|
-
import { CreditCardInput } from "./types/CreditCard";
|
|
6
|
-
import { DateInput } from "./types/Date";
|
|
7
|
-
import { LinkInput } from "./types/Link";
|
|
8
|
-
import { PasswordInput } from "./types/Password";
|
|
9
|
-
|
|
10
|
-
import { NumberInput } from "./types/Number";
|
|
11
|
-
|
|
12
|
-
// export type Type = "default" | "action" | "currency" | "creditCard" | "date" | "link" | "password" | "search" | "tel" | "number"
|
|
13
|
-
|
|
14
|
-
export const ChooseInput = (context: InputContext) => {
|
|
15
|
-
switch (context.type) {
|
|
16
|
-
case "default":
|
|
17
|
-
return DefaultInput(context);
|
|
18
|
-
case "action":
|
|
19
|
-
return ActionInput(context);
|
|
20
|
-
case "currency":
|
|
21
|
-
return CurrencyInput(context);
|
|
22
|
-
case "creditCard":
|
|
23
|
-
return CreditCardInput(context);
|
|
24
|
-
case "date":
|
|
25
|
-
return DateInput(context);
|
|
26
|
-
case "link":
|
|
27
|
-
return LinkInput(context);
|
|
28
|
-
case "password":
|
|
29
|
-
return PasswordInput(context);
|
|
30
|
-
|
|
31
|
-
case "number":
|
|
32
|
-
return NumberInput(context);
|
|
33
|
-
default:
|
|
34
|
-
return DefaultInput(context);
|
|
35
|
-
}
|
|
36
|
-
};
|