@dev-blinq/ui-systems 1.0.0 → 1.0.2

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.
Files changed (55) hide show
  1. package/index.html +1 -0
  2. package/package.json +11 -2
  3. package/public/colors.css +4 -0
  4. package/src/components/CustomButton/CustomButton.tsx +12 -7
  5. package/src/components/CustomButton/CustomButtonProps.ts +4 -4
  6. package/src/components/CustomButton/CustomButtonTypes.ts +26 -10
  7. package/src/components/CustomButton/css/color/default.css +83 -53
  8. package/src/components/CustomButton/css/color/disabled.css +44 -23
  9. package/src/components/CustomButton/css/color/focused.css +2 -2
  10. package/src/components/CustomButton/css/color/hover.css +39 -39
  11. package/src/components/CustomButton/css/customButton.css +0 -1
  12. package/src/components/CustomButton/css/index.css +6 -0
  13. package/src/components/CustomButton/css/size.css +23 -23
  14. package/src/components/CustomCheckbox.tsx +3 -3
  15. package/src/components/CustomInput/ChooseInput.tsx +36 -0
  16. package/src/components/CustomInput/CustomInput.tsx +43 -0
  17. package/src/components/CustomInput/CustomInputProps.ts +40 -0
  18. package/src/components/CustomInput/css/index.css +7 -0
  19. package/src/components/CustomInput/css/input.css +76 -0
  20. package/src/components/CustomInput/css/size.css +3 -0
  21. package/src/components/CustomInput/css/state/disabled.css +5 -0
  22. package/src/components/CustomInput/css/state/error.css +3 -0
  23. package/src/components/CustomInput/css/state/filled.css +0 -0
  24. package/src/components/CustomInput/css/state/focused.css +6 -0
  25. package/src/components/CustomInput/css/state/hover.css +5 -0
  26. package/src/components/CustomInput/types/Action.tsx +34 -0
  27. package/src/components/CustomInput/types/CreditCard.tsx +25 -0
  28. package/src/components/CustomInput/types/Currency.tsx +68 -0
  29. package/src/components/CustomInput/types/Date.tsx +20 -0
  30. package/src/components/CustomInput/types/Link.tsx +32 -0
  31. package/src/components/CustomInput/types/Number.tsx +23 -0
  32. package/src/components/CustomInput/types/Password.tsx +30 -0
  33. package/src/components/CustomInput/types/Telephone.tsx +0 -0
  34. package/src/components/CustomInput/types/Text.tsx +27 -0
  35. package/src/components/Typography/Typography.tsx +14 -12
  36. package/src/components/Typography/css/bold.css +20 -1
  37. package/src/components/Typography/css/category/display.css +20 -0
  38. package/src/components/Typography/css/category/heading.css +41 -0
  39. package/src/components/Typography/css/category/text.css +48 -0
  40. package/src/components/Typography/css/index.css +4 -0
  41. package/src/icons/details.tsx +10 -0
  42. package/src/icons/index.tsx +2 -0
  43. package/src/icons/lock.tsx +29 -0
  44. package/src/icons/mail.svg +4 -0
  45. package/src/icons/mail.tsx +23 -0
  46. package/src/icons/password-eye.tsx +10 -0
  47. package/src/index.ts +3 -3
  48. package/src/playground/App.tsx +32 -31
  49. package/src/playground/main.tsx +4 -4
  50. package/src/svg.d.ts +5 -0
  51. package/tsup.config.ts +10 -0
  52. package/src/components/CustomInput.tsx +0 -22
  53. package/src/components/Typography/css/size.css +0 -1
  54. package/vite.config.ts +0 -28
  55. /package/{public/font.css → src/components/CustomInput/css/state/default.css} +0 -0
package/index.html CHANGED
@@ -5,6 +5,7 @@
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>Component Playground</title>
7
7
  <link rel="stylesheet" href="/colors.css" />
8
+ <link href='https://fonts.googleapis.com/css?family=Plus Jakarta Sans' rel='stylesheet'>
8
9
  </head>
9
10
  <body>
10
11
  <div id="root"></div>
package/package.json CHANGED
@@ -1,22 +1,31 @@
1
1
  {
2
2
  "name": "@dev-blinq/ui-systems",
3
- "version": "1.0.0",
3
+ "version": "1.0.2",
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
+ "module": "./dist/index.mjs",
7
8
  "scripts": {
8
9
  "start": "npx vite --host",
9
10
  "test": "echo \"Error: no test specified\" && exit 1",
10
- "build": "tsc && cp ./package.json ./build"
11
+ "build": "tsup --minify terser"
11
12
  },
12
13
  "author": "",
13
14
  "license": "ISC",
14
15
  "dependencies": {
16
+ "@emotion/react": "^11.13.0",
17
+ "@emotion/styled": "^11.13.0",
15
18
  "@mui/material": "^5.16.6",
16
19
  "@types/react-dom": "^18.3.0",
17
20
  "@vitejs/plugin-react": "^4.3.1",
21
+ "countries-list": "^3.1.1",
22
+ "currency-symbol-map": "^5.1.0",
18
23
  "react-dom": "^18.3.1",
24
+ "tsup": "^8.2.3",
19
25
  "typescript": "^5.5.4",
20
26
  "vite": "^5.3.5"
27
+ },
28
+ "devDependencies": {
29
+ "terser": "^5.31.3"
21
30
  }
22
31
  }
package/public/colors.css CHANGED
@@ -1,4 +1,8 @@
1
1
  :root {
2
+ /* font-family */
3
+ /* --font-family: "Courier New", sans-serif; */
4
+ --font-family: "Plus Jakarta Sans", sans-serif;
5
+
2
6
  /* Primary Colors */
3
7
  --primary-lightest: #f5f7ff;
4
8
  --primary-light: #ebeefe;
package/src/components/CustomButton/CustomButton.tsx CHANGED
@@ -1,17 +1,16 @@
1
1
  import React from "react";
2
2
  import { CustomButtonProps } from "./CustomButtonProps";
3
- import "./css/customButton.css";
3
+ import "./css/customButton.css";
4
4
  import "./css/size.css";
5
5
  import "./css/color/default.css";
6
6
  import "./css/color/hover.css";
7
7
  import "./css/color/focused.css";
8
8
  import "./css/color/disabled.css";
9
9
 
10
- import { useState } from "react";
11
-
10
+ import TypographyCustom from "../Typography/Typography";
12
11
 
13
12
  const CustomButton: React.FC<CustomButtonProps> = ({
14
- size = "md",
13
+ size = "lg",
15
14
  colorHierarchy = "brand/primary",
16
15
  disabled = false,
17
16
  text,
@@ -27,9 +26,15 @@ const CustomButton: React.FC<CustomButtonProps> = ({
27
26
  onClick={onClick}
28
27
  disabled={disabled}
29
28
  >
30
- {leftIcon && <span>{leftIcon}</span>}
31
- {text}
32
- {rightIcon && <span>{rightIcon}</span>}
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" />}
33
38
  </button>
34
39
  );
35
40
  };
package/src/components/CustomButton/CustomButtonProps.ts CHANGED
@@ -1,12 +1,12 @@
1
- import { ButtonSize, ButtonColorHierarchyType } from './CustomButtonTypes';
2
- import { ReactNode } from 'react';
1
+ import { ButtonSize, ButtonColorHierarchyType } from "./CustomButtonTypes";
2
+ import { ReactNode } from "react";
3
3
 
4
4
  export interface CustomButtonProps {
5
5
  size?: ButtonSize;
6
6
  colorHierarchy?: ButtonColorHierarchyType;
7
7
  disabled?: boolean;
8
8
  text: string;
9
- leftIcon?: ReactNode;
10
- rightIcon?: ReactNode;
9
+ leftIcon?: any;
10
+ rightIcon?: any;
11
11
  onClick?: () => void;
12
12
  }
package/src/components/CustomButton/CustomButtonTypes.ts CHANGED
@@ -1,12 +1,28 @@
1
-
2
- export type ButtonSize = 'sm' | 'md' | 'lg' | 'xl' ;
3
- export type ButtonColor = 'brand' | 'gray' | 'destructive' | 'white';
4
- export type ButtonHierarchy = 'primary' | 'secondary' | 'link' | 'linkContainer';
5
- export type ButtonState = 'default' | 'hover' | 'focused' | 'disabled';
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";
6
5
  export type ButtonColorHierarchyType = `${ButtonColor}/${ButtonHierarchy}`;
7
6
 
8
- export const buttonSizeArray: ButtonSize[] = ['sm', 'md', 'lg', 'xl'];
9
- export const buttonColorArray: ButtonColor[] = ['brand', 'gray', 'destructive', 'white'];
10
- export const buttonHierarchyArray: ButtonHierarchy[] = ['primary', 'secondary', 'link', 'linkContainer'];
11
- export const buttonStateArray: ButtonState[] = ['default', 'hover', 'focused', 'disabled'];
12
- export const buttonColorHierarchyArray: ButtonColorHierarchyType[] = ['brand/primary', 'brand/secondary', 'brand/link', 'brand/linkContainer', 'gray/primary', 'gray/secondary', 'gray/link', 'gray/linkContainer', 'destructive/primary', 'destructive/secondary', 'destructive/link', 'destructive/linkContainer', 'white/primary', 'white/secondary', 'white/link', 'white/linkContainer'];
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
+ ];
package/src/components/CustomButton/css/color/default.css CHANGED
@@ -1,54 +1,84 @@
1
- .button[data-colorHierarchy='brand/primary'] {
1
+ .button[data-colorHierarchy="brand/primary"] {
2
2
  background-color: var(--primary-main);
3
- color: #fff; /* text color */
4
- }
5
-
6
- .button[data-colorHierarchy='gray/secondary'] {
7
- background-color: #F1F1F1;
8
- color: #080808;
9
- }
10
-
11
- .button[data-colorHierarchy='white/secondary'] {
12
- background-color: #fff;
13
- color: #080808;
14
- box-shadow: 0px 1px 2px 0px rgba(23, 23, 23, 0.05);
15
- border: var(--border-radius-radius-none, 1px) solid var(--border-default, #E6E6E6);
16
- }
17
-
18
- .button[data-colorHierarchy='gray/linkContainer'] {
19
- background-color: #fff;
20
- color: #080808;
21
- }
22
-
23
- .button[data-colorHierarchy='gray/link'] {
24
- background-color: #fff;
25
- color: #080808;
26
- padding: 0;
27
- }
28
-
29
- .button[data-colorHierarchy='brand/link'] {
30
- background-color: #fff;
31
- color: var(--primary-main);
32
- padding: 0;
33
- }
34
-
35
- .button[data-colorHierarchy='destructive/primary'] {
36
- background: var(--surface-error, #EA4621);
37
- color: #fff;
38
- }
39
-
40
- .button[data-colorHierarchy='destructive/secondary'] {
41
- background: var(--surface-error-secondary, #FDECE9);
42
- color: var(--text-error, #EA4621);
43
- }
44
-
45
- .button[data-colorHierarchy='destructive/linkContainer'] {
46
- background-color: #fff;
47
- color: var(--text-error, #EA4621);
48
- }
49
-
50
- .button[data-colorHierarchy=''] {
51
- background-color: #fff;
52
- color: var(--text-error, #EA4621);
53
- padding: 0;
54
- }
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
+ }
package/src/components/CustomButton/css/color/disabled.css CHANGED
@@ -1,16 +1,20 @@
1
1
  .button[data-colorHierarchy="brand/primary"]:disabled {
2
- background: var(--surface-disabled, #F1F1F1);
3
- }
4
-
5
- .button[data-colorHierarchy="gray/secondary"]:disabled {
6
- background: var(--surface-disabled, #F1F1F1);
7
- }
8
-
9
- .button[data-colorHierarchy="white/secondary"]:disabled {
10
- background: var(--surface-white---disabled, #FDFDFD);
11
- }
12
-
13
- /* .button[data-colorHierarchy="gray/linkContainer"]: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 {
14
18
  }
15
19
 
16
20
  .button[data-colorHierarchy="gray/link"]:disabled {
@@ -18,20 +22,37 @@
18
22
 
19
23
  .button[data-colorHierarchy="brand/link"]:disabled {
20
24
  } */
21
-
22
- .button[data-colorHierarchy="destructive/primary"]:disabled {
23
- background: var(--surface-error-disabled, #FDECE9);
24
- }
25
-
26
- .button[data-colorHierarchy="destructive/secondary"]:disabled {
27
- background: var(--surface-error-disabled, #FDECE9);
28
25
 
26
+ .button[data-colorHierarchy="brand/link"]:disabled .input-typography {
27
+ color: var(--text-action-disabled, #849ed7);
28
+ }
29
29
 
30
- }
31
-
32
- /* .button[data-colorHierarchy="destructive/linkContainer"]:disabled {
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 {
33
47
  }
34
48
 
35
49
  .button[data-colorHierarchy=""]:disabled {
36
50
  } */
37
-
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
+ }
package/src/components/CustomButton/css/color/focused.css CHANGED
@@ -31,9 +31,9 @@
31
31
  }
32
32
 
33
33
  .button[data-colorHierarchy="destructive/linkContainer"]:focus {
34
- box-shadow: 0px 0px 0px 4px var(--destructive-30, #F9C7BC);
34
+ box-shadow: 0px 0px 0px 4px var(--destructive-30, #f9c7bc);
35
35
  }
36
36
 
37
37
  .button[data-colorHierarchy=""]:focus {
38
- box-shadow: 0px 0px 0px 4px var(--destructive-30, #F9C7BC);
38
+ box-shadow: 0px 0px 0px 4px var(--destructive-30, #f9c7bc);
39
39
  }
package/src/components/CustomButton/css/color/hover.css CHANGED
@@ -1,39 +1,39 @@
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
+ .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
+ }
package/src/components/CustomButton/css/customButton.css CHANGED
@@ -1,4 +1,3 @@
1
-
2
1
  .button {
3
2
  display: inline-flex;
4
3
  justify-content: center;
package/src/components/CustomButton/css/index.css ADDED
@@ -0,0 +1,6 @@
1
+ @import "./size.css";
2
+ @import "./customButton.css";
3
+ @import "./color/default.css";
4
+ @import "./color/disabled.css";
5
+ @import "./color/focused.css";
6
+ @import "./color/hover.css";
package/src/components/CustomButton/css/size.css CHANGED
@@ -1,23 +1,23 @@
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
+ .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
+ }
package/src/components/CustomCheckbox.tsx CHANGED
@@ -1,8 +1,8 @@
1
- import React from 'react';
1
+ import React from "react";
2
2
 
3
3
  type CustomCheckboxProps = {
4
4
  checked: boolean;
5
- onChange: (checked: boolean) => void;
5
+ onChange?: (checked: boolean) => void;
6
6
  label?: string;
7
7
  disabled?: boolean;
8
8
  };
@@ -13,7 +13,7 @@ const CustomCheckbox: React.FC<CustomCheckboxProps> = ({ checked, onChange, labe
13
13
  <input
14
14
  type="checkbox"
15
15
  checked={checked}
16
- onChange={(e) => onChange(e.target.checked)}
16
+ onChange={(e) => onChange && onChange(e.target.checked)}
17
17
  disabled={disabled}
18
18
  />
19
19
  {label && <span>{label}</span>}
package/src/components/CustomInput/ChooseInput.tsx ADDED
@@ -0,0 +1,36 @@
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
+ };
package/src/components/CustomInput/CustomInput.tsx ADDED
@@ -0,0 +1,43 @@
1
+ import React from "react";
2
+ import { CustomInputProps, InputContext } from "./CustomInputProps";
3
+ import "./css/index.css";
4
+ import { DetailsIcon } from "../../icons/details";
5
+ import TypographyCustom from "../Typography/Typography";
6
+ import { ChooseInput } from "./ChooseInput";
7
+
8
+ const CustomInput: React.FC<CustomInputProps> = ({
9
+ size = "lg",
10
+ type = "default",
11
+ disabled = false,
12
+ label = "",
13
+ errExists = false,
14
+ placeholder,
15
+ leftIcon,
16
+ rightIcon,
17
+ style,
18
+ onAction,
19
+ ...props
20
+ }) => {
21
+ const context: InputContext = {
22
+ type,
23
+ placeholder,
24
+ disabled,
25
+ errExists,
26
+ leftIcon,
27
+ rightIcon,
28
+ onAction, // application if type is action
29
+ ...props,
30
+ };
31
+ return (
32
+ <div style={style}>
33
+ {label && (
34
+ <TypographyCustom category="text" Size="sm" bold="semibold">
35
+ {label}
36
+ </TypographyCustom>
37
+ )}
38
+ <ChooseInput {...context} />
39
+ </div>
40
+ );
41
+ };
42
+
43
+ export default CustomInput;