@dev-blinq/ui-systems 1.0.1 → 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 (47) hide show
  1. package/index.html +1 -0
  2. package/package.json +5 -1
  3. package/public/colors.css +4 -0
  4. package/src/components/CustomButton/CustomButton.tsx +11 -5
  5. package/src/components/CustomButton/CustomButtonProps.ts +2 -2
  6. package/src/components/CustomButton/css/color/default.css +35 -5
  7. package/src/components/CustomButton/css/color/disabled.css +24 -0
  8. package/src/components/CustomButton/css/index.css +6 -0
  9. package/src/components/CustomCheckbox.tsx +7 -2
  10. package/src/components/CustomInput/ChooseInput.tsx +36 -0
  11. package/src/components/CustomInput/CustomInput.tsx +43 -0
  12. package/src/components/CustomInput/CustomInputProps.ts +40 -0
  13. package/src/components/CustomInput/css/index.css +7 -0
  14. package/src/components/CustomInput/css/input.css +76 -0
  15. package/src/components/CustomInput/css/size.css +3 -0
  16. package/src/components/CustomInput/css/state/disabled.css +5 -0
  17. package/src/components/CustomInput/css/state/error.css +3 -0
  18. package/src/components/CustomInput/css/state/filled.css +0 -0
  19. package/src/components/CustomInput/css/state/focused.css +6 -0
  20. package/src/components/CustomInput/css/state/hover.css +5 -0
  21. package/src/components/CustomInput/types/Action.tsx +34 -0
  22. package/src/components/CustomInput/types/CreditCard.tsx +25 -0
  23. package/src/components/CustomInput/types/Currency.tsx +68 -0
  24. package/src/components/CustomInput/types/Date.tsx +20 -0
  25. package/src/components/CustomInput/types/Link.tsx +32 -0
  26. package/src/components/CustomInput/types/Number.tsx +23 -0
  27. package/src/components/CustomInput/types/Password.tsx +30 -0
  28. package/src/components/CustomInput/types/Telephone.tsx +0 -0
  29. package/src/components/CustomInput/types/Text.tsx +27 -0
  30. package/src/components/Typography/Typography.tsx +14 -6
  31. package/src/components/Typography/css/bold.css +19 -0
  32. package/src/components/Typography/css/category/display.css +20 -0
  33. package/src/components/Typography/css/category/heading.css +41 -0
  34. package/src/components/Typography/css/category/text.css +48 -0
  35. package/src/components/Typography/css/index.css +4 -0
  36. package/src/icons/details.tsx +10 -0
  37. package/src/icons/index.tsx +2 -0
  38. package/src/icons/lock.tsx +29 -0
  39. package/src/icons/mail.svg +4 -0
  40. package/src/icons/mail.tsx +23 -0
  41. package/src/icons/password-eye.tsx +10 -0
  42. package/src/index.ts +1 -1
  43. package/src/playground/App.tsx +21 -3
  44. package/src/svg.d.ts +5 -0
  45. package/src/components/CustomInput.tsx +0 -22
  46. package/src/components/Typography/css/size.css +0 -1
  47. /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,6 +1,6 @@
1
1
  {
2
2
  "name": "@dev-blinq/ui-systems",
3
- "version": "1.0.1",
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",
@@ -13,9 +13,13 @@
13
13
  "author": "",
14
14
  "license": "ISC",
15
15
  "dependencies": {
16
+ "@emotion/react": "^11.13.0",
17
+ "@emotion/styled": "^11.13.0",
16
18
  "@mui/material": "^5.16.6",
17
19
  "@types/react-dom": "^18.3.0",
18
20
  "@vitejs/plugin-react": "^4.3.1",
21
+ "countries-list": "^3.1.1",
22
+ "currency-symbol-map": "^5.1.0",
19
23
  "react-dom": "^18.3.1",
20
24
  "tsup": "^8.2.3",
21
25
  "typescript": "^5.5.4",
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
@@ -7,10 +7,10 @@ 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";
10
+ import TypographyCustom from "../Typography/Typography";
11
11
 
12
12
  const CustomButton: React.FC<CustomButtonProps> = ({
13
- size = "md",
13
+ size = "lg",
14
14
  colorHierarchy = "brand/primary",
15
15
  disabled = false,
16
16
  text,
@@ -26,9 +26,15 @@ const CustomButton: React.FC<CustomButtonProps> = ({
26
26
  onClick={onClick}
27
27
  disabled={disabled}
28
28
  >
29
- {leftIcon && <span>{leftIcon}</span>}
30
- {text}
31
- {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" />}
32
38
  </button>
33
39
  );
34
40
  };
package/src/components/CustomButton/CustomButtonProps.ts CHANGED
@@ -6,7 +6,7 @@ export interface CustomButtonProps {
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/css/color/default.css CHANGED
@@ -1,54 +1,84 @@
1
1
  .button[data-colorHierarchy="brand/primary"] {
2
2
  background-color: var(--primary-main);
3
- color: #fff; /* text color */
3
+ }
4
+
5
+ .button[data-colorHierarchy="brand/primary"] .input-typography {
6
+ color: #fff;
4
7
  }
5
8
 
6
9
  .button[data-colorHierarchy="gray/secondary"] {
7
10
  background-color: #f1f1f1;
11
+ }
12
+
13
+ .button[data-colorHierarchy="gray/secondary"] .input-typography {
8
14
  color: #080808;
9
15
  }
10
16
 
11
17
  .button[data-colorHierarchy="white/secondary"] {
12
18
  background-color: #fff;
13
- color: #080808;
14
19
  box-shadow: 0px 1px 2px 0px rgba(23, 23, 23, 0.05);
15
20
  border: var(--border-radius-radius-none, 1px) solid var(--border-default, #e6e6e6);
16
21
  }
17
22
 
23
+ .button[data-colorHierarchy="white/secondary"] .input-typography {
24
+ color: #080808;
25
+ }
26
+
18
27
  .button[data-colorHierarchy="gray/linkContainer"] {
19
28
  background-color: #fff;
29
+ }
30
+
31
+ .button[data-colorHierarchy="gray/linkContainer"] .input-typography {
20
32
  color: #080808;
21
33
  }
22
34
 
23
35
  .button[data-colorHierarchy="gray/link"] {
24
36
  background-color: #fff;
25
- color: #080808;
26
37
  padding: 0;
27
38
  }
28
39
 
40
+ .button[data-colorHierarchy="gray/link"] .input-typography {
41
+ color: #080808;
42
+ }
43
+
29
44
  .button[data-colorHierarchy="brand/link"] {
30
45
  background-color: #fff;
31
- color: var(--primary-main);
32
46
  padding: 0;
33
47
  }
34
48
 
49
+ .button[data-colorHierarchy="brand/link"] .input-typography {
50
+ color: var(--primary-main);
51
+ }
52
+
35
53
  .button[data-colorHierarchy="destructive/primary"] {
36
54
  background: var(--surface-error, #ea4621);
55
+ }
56
+
57
+ .button[data-colorHierarchy="destructive/primary"] .input-typography {
37
58
  color: #fff;
38
59
  }
39
60
 
40
61
  .button[data-colorHierarchy="destructive/secondary"] {
41
62
  background: var(--surface-error-secondary, #fdece9);
63
+ }
64
+
65
+ .button[data-colorHierarchy="destructive/secondary"] .input-typography {
42
66
  color: var(--text-error, #ea4621);
43
67
  }
44
68
 
45
69
  .button[data-colorHierarchy="destructive/linkContainer"] {
46
70
  background-color: #fff;
71
+ }
72
+
73
+ .button[data-colorHierarchy="destructive/linkContainer"] .input-typography {
47
74
  color: var(--text-error, #ea4621);
48
75
  }
49
76
 
50
77
  .button[data-colorHierarchy=""] {
51
78
  background-color: #fff;
52
- color: var(--text-error, #ea4621);
53
79
  padding: 0;
54
80
  }
81
+
82
+ .button[data-colorHierarchy=""] .input-typography {
83
+ color: var(--text-error, #ea4621);
84
+ }
package/src/components/CustomButton/css/color/disabled.css CHANGED
@@ -2,6 +2,10 @@
2
2
  background: var(--surface-disabled, #f1f1f1);
3
3
  }
4
4
 
5
+ .button:disabled .input-typography {
6
+ color: var(--text-disabled, #939197);
7
+ }
8
+
5
9
  .button[data-colorHierarchy="gray/secondary"]:disabled {
6
10
  background: var(--surface-disabled, #f1f1f1);
7
11
  }
@@ -19,16 +23,36 @@
19
23
  .button[data-colorHierarchy="brand/link"]:disabled {
20
24
  } */
21
25
 
26
+ .button[data-colorHierarchy="brand/link"]:disabled .input-typography {
27
+ color: var(--text-action-disabled, #849ed7);
28
+ }
29
+
22
30
  .button[data-colorHierarchy="destructive/primary"]:disabled {
23
31
  background: var(--surface-error-disabled, #fdece9);
24
32
  }
25
33
 
34
+ .button[data-colorHierarchy="destructive/primary"]:disabled .input-typography {
35
+ color: var(--text-error-disabled, #f5a290);
36
+ }
37
+
26
38
  .button[data-colorHierarchy="destructive/secondary"]:disabled {
27
39
  background: var(--surface-error-disabled, #fdece9);
28
40
  }
29
41
 
42
+ .button[data-colorHierarchy="destructive/secondary"]:disabled .input-typography {
43
+ color: var(--text-error-disabled, #f5a290);
44
+ }
45
+
30
46
  /* .button[data-colorHierarchy="destructive/linkContainer"]:disabled {
31
47
  }
32
48
 
33
49
  .button[data-colorHierarchy=""]:disabled {
34
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
+ }
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/CustomCheckbox.tsx CHANGED
@@ -2,7 +2,7 @@ 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
  };
@@ -10,7 +10,12 @@ type CustomCheckboxProps = {
10
10
  const CustomCheckbox: React.FC<CustomCheckboxProps> = ({ checked, onChange, label, disabled }) => {
11
11
  return (
12
12
  <label className="flex items-center space-x-3">
13
- <input type="checkbox" checked={checked} onChange={(e) => onChange(e.target.checked)} disabled={disabled} />
13
+ <input
14
+ type="checkbox"
15
+ checked={checked}
16
+ onChange={(e) => onChange && onChange(e.target.checked)}
17
+ disabled={disabled}
18
+ />
14
19
  {label && <span>{label}</span>}
15
20
  </label>
16
21
  );
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;
package/src/components/CustomInput/CustomInputProps.ts ADDED
@@ -0,0 +1,40 @@
1
+ import { ReactNode, CSSProperties } from "react";
2
+ // import inputprop from mui that will be extended by custominputprops
3
+ import { InputProps } from "@mui/material";
4
+
5
+ export type Size = "md" | "lg";
6
+ export type Type =
7
+ | "default"
8
+ | "action"
9
+ | "currency"
10
+ | "creditCard"
11
+ | "date"
12
+ | "link"
13
+ | "password"
14
+ | "search"
15
+ | "tel"
16
+ | "number";
17
+ export interface CustomInputProps {
18
+ Size?: Size;
19
+ type?: Type;
20
+ label?: string;
21
+ disabled?: boolean;
22
+ errExists?: boolean;
23
+ placeholder: string;
24
+ leftIcon?: any; //ReactNode
25
+ rightIcon?: any; //ReactNode
26
+ onAction?: () => void;
27
+ style?: CSSProperties;
28
+ [key: string]: any;
29
+ }
30
+
31
+ export interface InputContext {
32
+ type: string;
33
+ placeholder: string;
34
+ disabled: boolean;
35
+ errExists: boolean;
36
+ leftIcon?: any; //ReactNode
37
+ rightIcon?: any; //ReactNode
38
+ onAction?: (text: string | undefined) => void;
39
+ [key: string]: any;
40
+ }
package/src/components/CustomInput/css/index.css ADDED
@@ -0,0 +1,7 @@
1
+ @import "./input.css";
2
+ @import "./state/default.css";
3
+ @import "./state/hover.css";
4
+ @import "./state/focused.css";
5
+ @import "./state/disabled.css";
6
+ @import "./state/error.css";
7
+ @import "./state/filled.css";
package/src/components/CustomInput/css/input.css ADDED
@@ -0,0 +1,76 @@
1
+ .custom-input {
2
+ display: flex;
3
+ flex-direction: row;
4
+ padding: 12px;
5
+ align-items: center;
6
+ gap: 12px;
7
+ width: 296px;
8
+ align-self: stretch;
9
+ border-radius: var(--border-radius-radius-pre-lg, 12px);
10
+
11
+ border: 1px solid var(--border-default, #e6e6e6);
12
+ background: var(--surface-white, #fff);
13
+
14
+ /* Shadow/xs */
15
+ box-shadow: 0px 1px 2px 0px rgba(23, 23, 23, 0.05);
16
+ }
17
+
18
+ .custom-input input {
19
+ width: 100%;
20
+ border: none;
21
+ }
22
+
23
+ .custom-input input::placeholder {
24
+ color: var(--text-disabled, #939197);
25
+ font-weight: 500;
26
+ }
27
+
28
+ .custom-input input:hover,
29
+ .custom-input input:focus,
30
+ .custom-input input:active {
31
+ border: none;
32
+ outline: none;
33
+ }
34
+
35
+ .custom-input .left-icon,
36
+ .custom-input .right-icon {
37
+ display: flex;
38
+ align-items: center;
39
+ justify-content: center;
40
+ }
41
+
42
+ .custom-input input {
43
+ font-family: var(--font-family);
44
+ color: var(--text-primary, #080808);
45
+ font-weight: 600;
46
+ font-size: 14px;
47
+ font-style: normal;
48
+ }
49
+
50
+ .custom-input .grey-box {
51
+ margin: -12px;
52
+ padding: 12px;
53
+ gap: 6px;
54
+ display: flex;
55
+ flex-direction: row;
56
+ background: #f9f9f9;
57
+ }
58
+
59
+ .custom-input .grey-right-box {
60
+ padding: 12px;
61
+ border-top-right-radius: 12px;
62
+ border-bottom-right-radius: 12px;
63
+ border-left: 1px solid #e6e6e6;
64
+ }
65
+
66
+ .custom-input .grey-left-box {
67
+ padding: 12px 14px;
68
+ border-top-left-radius: 12px;
69
+ border-bottom-left-radius: 12px;
70
+ border-right: 1px solid #e6e6e6;
71
+ }
72
+
73
+ .custom-input select:focus {
74
+ border: none;
75
+ outline: none;
76
+ }
package/src/components/CustomInput/css/size.css ADDED
@@ -0,0 +1,3 @@
1
+ /* .custom-input[data-size='md'] {
2
+ padding: 8px 12px;
3
+ } */
package/src/components/CustomInput/css/state/disabled.css ADDED
@@ -0,0 +1,5 @@
1
+ .custom-input:has(input:disabled) {
2
+ border-radius: var(--border-radius-radius-pre-lg, 12px);
3
+ border: var(--border-radius-radius-none, 1px) solid var(--border-default, #e6e6e6);
4
+ background: var(--surface-disabled, #f1f1f1);
5
+ }
package/src/components/CustomInput/css/state/error.css ADDED
@@ -0,0 +1,3 @@
1
+ .custom-input[data-error="true"] {
2
+ border: var(--border-radius-radius-none, 1px) solid var(--border-error, #ea4621);
3
+ }
package/src/components/CustomInput/css/state/focused.css ADDED
@@ -0,0 +1,6 @@
1
+ .custom-input:focus-within {
2
+ border: var(--border-radius-radius-none, 1px) solid var(--border-default, #e6e6e6);
3
+ background: var(--surface-white, #fff);
4
+
5
+ box-shadow: 0px 0px 0px 4px var(--primary-30, #b5c5e7);
6
+ }
package/src/components/CustomInput/css/state/hover.css ADDED
@@ -0,0 +1,5 @@
1
+ .custom-input:hover {
2
+ border: var(--border-radius-radius-none, 1px) solid var(--border-hover, #c9c9cc);
3
+ /* Shadow/xs */
4
+ box-shadow: 0px 1px 2px 0px rgba(23, 23, 23, 0.05);
5
+ }
package/src/components/CustomInput/types/Action.tsx ADDED
@@ -0,0 +1,34 @@
1
+ import { InputContext } from "../CustomInputProps";
2
+ import TypographyCustom from "../../Typography/Typography";
3
+ import React, { useRef } from "react";
4
+
5
+ export const ActionInput = (context: InputContext) => {
6
+ const inputRef = useRef<HTMLInputElement>(null);
7
+ return (
8
+ <div className="custom-input" data-type={context.type} data-error={context.errExists}>
9
+ {/* {context.leftIcon && <div className="left-icon">{context.leftIcon}</div>} */}
10
+ {context.leftIcon && <img src={context.leftIcon} alt="icon" />}
11
+ <input
12
+ type="text"
13
+ placeholder={context.placeholder}
14
+ disabled={context.disabled}
15
+ ref={inputRef}
16
+ {...context.props}
17
+ />
18
+ <div className="grey-box grey-right-box">
19
+ <TypographyCustom
20
+ category="text"
21
+ Size="sm"
22
+ bold="medium"
23
+ onClick={() => {
24
+ context.onAction && context.onAction(inputRef.current?.value);
25
+ }}
26
+ >
27
+ {context.actionLabel}
28
+ </TypographyCustom>
29
+ {/* {context.rightIcon && <div className="right-icon">{context.rightIcon}</div>} */}
30
+ {context.rightIcon && <img src={context.rightIcon} alt="icon" />}
31
+ </div>
32
+ </div>
33
+ );
34
+ };
package/src/components/CustomInput/types/CreditCard.tsx ADDED
@@ -0,0 +1,25 @@
1
+ import { InputContext } from "../CustomInputProps";
2
+ import { DetailsIcon } from "../../../icons/details";
3
+ export const CreditCardInput = (context: InputContext) => {
4
+ return (
5
+ <div className="custom-input" data-type={context.type} data-error={context.errExists}>
6
+ <input
7
+ type="text"
8
+ placeholder={"0000 0000 0000 0000"}
9
+ disabled={context.disabled}
10
+ {...context.props}
11
+ style={{
12
+ fontFamily: "var(--font-family)",
13
+ color: "var(--text-primary, #080808)",
14
+ fontWeight: 600,
15
+ fontSize: "14px",
16
+ fontStyle: "normal",
17
+ }}
18
+ />
19
+ <div className="right-icon">
20
+ {" "}
21
+ <DetailsIcon />
22
+ </div>
23
+ </div>
24
+ );
25
+ };
package/src/components/CustomInput/types/Currency.tsx ADDED
@@ -0,0 +1,68 @@
1
+ import { InputContext } from "../CustomInputProps";
2
+ import React, { useState, useEffect } from "react";
3
+ import { countries } from "countries-list";
4
+ import getSymbolFromCurrency from "currency-symbol-map";
5
+ import TypographyCustom from "../../Typography/Typography";
6
+
7
+ export const CurrencyInput = (context: InputContext) => {
8
+ const [amount, setAmount] = useState<string>("");
9
+ const [selectedCurrency, setSelectedCurrency] = useState<string>("USD");
10
+ const [countryCurrencies, setCountryCurrencies] = useState<string[]>([]);
11
+ const inputRef = React.useRef<HTMLInputElement>(null);
12
+
13
+ useEffect(() => {
14
+ // Create an array of unique currencies
15
+ const uniqueCurrencies = [...new Set(Object.values(countries).map((country: any) => country.currency))];
16
+ setCountryCurrencies(uniqueCurrencies);
17
+ }, []);
18
+
19
+ const handleAmountChange = (e: React.ChangeEvent<HTMLInputElement>) => {
20
+ setAmount(e.target.value);
21
+ };
22
+
23
+ const handleCurrencyChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
24
+ setSelectedCurrency(e.target.value);
25
+ };
26
+
27
+ return (
28
+ <div className="currency-input-container">
29
+ <div className="custom-input" data-type={context.type} data-error={context.errExists}>
30
+ <div className="grey-box grey-left-box">
31
+ <TypographyCustom category="text" Size="sm" bold="semibold">
32
+ {getSymbolFromCurrency(selectedCurrency) || "$"}
33
+ </TypographyCustom>
34
+ </div>
35
+
36
+ <input
37
+ type="text"
38
+ placeholder={"amount"}
39
+ style={{ marginLeft: "12px" }}
40
+ onChange={handleAmountChange}
41
+ disabled={context.disabled}
42
+ ref={inputRef}
43
+ {...context.props}
44
+ />
45
+ <div className="grey-box grey-right-box">
46
+ <select
47
+ value={selectedCurrency}
48
+ onChange={handleCurrencyChange}
49
+ className="currency-select"
50
+ style={{
51
+ fontFamily: "var(--font-family)",
52
+ fontWeight: "500",
53
+ width: "55px",
54
+ border: "none",
55
+ background: "transparent",
56
+ }}
57
+ >
58
+ {countryCurrencies.map((currency) => (
59
+ <option key={currency} value={currency}>
60
+ {currency}
61
+ </option>
62
+ ))}
63
+ </select>
64
+ </div>
65
+ </div>
66
+ </div>
67
+ );
68
+ };
package/src/components/CustomInput/types/Date.tsx ADDED
@@ -0,0 +1,20 @@
1
+ import { InputContext } from "../CustomInputProps";
2
+ export const DateInput = (context: InputContext) => {
3
+ return (
4
+ <div className="custom-input" data-type={context.type} data-error={context.errExists}>
5
+ <input
6
+ type="date"
7
+ placeholder={context.placeholder}
8
+ disabled={context.disabled}
9
+ {...context.props}
10
+ style={{
11
+ fontFamily: "var(--font-family)",
12
+ color: "var(--text-primary, #080808)",
13
+ fontWeight: 600,
14
+ fontSize: "14px",
15
+ fontStyle: "normal",
16
+ }}
17
+ />
18
+ </div>
19
+ );
20
+ };
package/src/components/CustomInput/types/Link.tsx ADDED
@@ -0,0 +1,32 @@
1
+ import { InputContext } from "../CustomInputProps";
2
+ import { DetailsIcon } from "../../../icons/details";
3
+ import TypographyCustom from "../../Typography/Typography";
4
+ export const LinkInput = (context: InputContext) => {
5
+ return (
6
+ <div className="custom-input" data-type={context.type} data-error={context.errExists}>
7
+ <div className="grey-box grey-left-box">
8
+ <TypographyCustom category="text" Size="sm" bold="medium">
9
+ https://
10
+ </TypographyCustom>
11
+ </div>
12
+ <input
13
+ type="text"
14
+ placeholder="Link Text"
15
+ disabled={context.disabled}
16
+ {...context.props}
17
+ style={{
18
+ fontFamily: "var(--font-family)",
19
+ color: "var(--text-primary, #080808)",
20
+ fontWeight: 600,
21
+ fontSize: "14px",
22
+ fontStyle: "normal",
23
+ marginLeft: "12px",
24
+ }}
25
+ />
26
+ <div className="right-icon">
27
+ {/* {context.rightIcon ? context.rightIcon : <DetailsIcon />} */}
28
+ {context.rightIcon ? <img src={context.rightIcon} alt="icon" /> : <DetailsIcon />}
29
+ </div>
30
+ </div>
31
+ );
32
+ };
package/src/components/CustomInput/types/Number.tsx ADDED
@@ -0,0 +1,23 @@
1
+ import { InputContext } from "../CustomInputProps";
2
+
3
+ export const NumberInput = (context: InputContext) => {
4
+ return (
5
+ <div className="custom-input" data-type={context.type} data-error={context.errExists}>
6
+ {/* {context.leftIcon && <div className="left-icon">{context.leftIcon}</div>} */}
7
+ {context.leftIcon && <img src={context.leftIcon} alt="icon" />}
8
+ <input
9
+ type="number"
10
+ placeholder={context.placeholder ? context.placeholder : "Enter Value"}
11
+ disabled={context.disabled}
12
+ {...context.props}
13
+ style={{
14
+ fontFamily: "var(--font-family)",
15
+ color: "var(--text-primary, #080808)",
16
+ fontWeight: 600,
17
+ fontSize: "14px",
18
+ fontStyle: "normal",
19
+ }}
20
+ />
21
+ </div>
22
+ );
23
+ };
package/src/components/CustomInput/types/Password.tsx ADDED
@@ -0,0 +1,30 @@
1
+ import { InputContext } from "../CustomInputProps";
2
+ import { LockIcon } from "../../../icons/lock";
3
+ import { PasswordEyeIcon } from "../../../icons/password-eye";
4
+
5
+ export const PasswordInput = (context: InputContext) => {
6
+ return (
7
+ <div className="custom-input" data-type={context.type} data-error={context.errExists}>
8
+ <div className="left-icon">
9
+ <LockIcon />
10
+ </div>
11
+ <input
12
+ type="password"
13
+ placeholder="*****************"
14
+ disabled={context.disabled}
15
+ {...context.props}
16
+ style={{
17
+ fontFamily: "var(--font-family)",
18
+ color: "var(--text-primary, #080808)",
19
+ fontWeight: 600,
20
+ fontSize: "14px",
21
+ fontStyle: "normal",
22
+ }}
23
+ />
24
+ <div className="right-icon">
25
+ {/* {context.rightIcon ? context.rightIcon : <PasswordEyeIcon />} */}
26
+ {context.rightIcon ? <img src={context.rightIcon} alt="icon" /> : <PasswordEyeIcon />}
27
+ </div>
28
+ </div>
29
+ );
30
+ };
package/src/components/CustomInput/types/Telephone.tsx ADDED
File without changes
package/src/components/CustomInput/types/Text.tsx ADDED
@@ -0,0 +1,27 @@
1
+ import { InputContext } from "../CustomInputProps";
2
+ import { DetailsIcon } from "../../../icons/details";
3
+ export const DefaultInput = (context: InputContext) => {
4
+ return (
5
+ <div className="custom-input" data-type={context.type} data-error={context.errExists}>
6
+ {/* {context.leftIcon && <div className="left-icon">{context.leftIcon}</div>} */}
7
+ {context.leftIcon && <img src={context.leftIcon} alt="icon" />}
8
+ <input
9
+ type="text"
10
+ placeholder={context.placeholder}
11
+ disabled={context.disabled}
12
+ {...context.props}
13
+ style={{
14
+ fontFamily: "var(--font-family)",
15
+ color: "var(--text-primary, #080808)",
16
+ fontWeight: 600,
17
+ fontSize: "14px",
18
+ fontStyle: "normal",
19
+ }}
20
+ />
21
+ <div className="right-icon">
22
+ {/* {context.rightIcon ? context.rightIcon : <DetailsIcon />} */}
23
+ {context.rightIcon ? <img src={context.rightIcon} alt="icon" /> : <DetailsIcon />}
24
+ </div>
25
+ </div>
26
+ );
27
+ };
package/src/components/Typography/Typography.tsx CHANGED
@@ -1,17 +1,25 @@
1
1
  import { Typography, TypographyProps } from "@mui/material";
2
+ import "./css/index.css";
2
3
  type category = "display" | "heading" | "text";
3
- type size = "sm" | "md" | "lg" | "xl" | "xxl";
4
- type textType = `${category}/${size}`;
5
- type bold = "semibold" | "bold" | "extrabold";
4
+ type size = "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
5
+ type bold = "semibold" | "bold" | "extrabold" | "medium";
6
6
 
7
7
  interface TypegraphyCustomType extends TypographyProps {
8
- textType?: textType;
8
+ Size?: size;
9
+ category?: category;
9
10
  bold?: bold;
10
11
  }
11
12
 
12
- const TypographyCustom: React.FC<TypegraphyCustomType> = ({ children, textType, bold, sx, ...props }) => {
13
+ const TypographyCustom: React.FC<TypegraphyCustomType> = ({ children, Size, category, bold, sx, ...props }) => {
13
14
  return (
14
- <Typography sx={{ fontFamily: '"Plus Jakarta Sans", sans-serif', ...sx }} {...props}>
15
+ <Typography
16
+ className="TypographyCustom"
17
+ data-size={Size}
18
+ data-category={category}
19
+ data-bold={bold}
20
+ sx={{ fontFamily: "var(--font-family), sans-serif", ...sx }}
21
+ {...props}
22
+ >
15
23
  {children}
16
24
  </Typography>
17
25
  );
package/src/components/Typography/css/bold.css CHANGED
@@ -1 +1,20 @@
1
+ .TypographyCustom {
2
+ color: var(--Gray-110, var(--colors-greyscale-110, #2d2b32));
3
+ }
4
+
1
5
  /* text bold css*/
6
+ .TypographyCustom[data-bold="extrabold"] {
7
+ font-weight: 800;
8
+ }
9
+
10
+ .TypographyCustom[data-bold="bold"] {
11
+ font-weight: 700;
12
+ }
13
+
14
+ .TypographyCustom[data-bold="semibold"] {
15
+ font-weight: 600;
16
+ }
17
+
18
+ .TypographyCustom[data-bold="medium"] {
19
+ font-weight: 500;
20
+ }
package/src/components/Typography/css/category/display.css ADDED
@@ -0,0 +1,20 @@
1
+ .TypographyCustom[data-category="display"][data-size="lg"] {
2
+ font-size: 180px;
3
+ font-style: normal;
4
+ line-height: 188px; /* 104.444% */
5
+ letter-spacing: -9px;
6
+ }
7
+
8
+ .TypographyCustom[data-category="display"][data-size="md"] {
9
+ font-size: 128px;
10
+ font-style: normal;
11
+ line-height: 136px; /* 106.25% */
12
+ letter-spacing: -5.12px;
13
+ }
14
+
15
+ .TypographyCustom[data-category="display"][data-size="sm"] {
16
+ font-size: 96px;
17
+ font-style: normal;
18
+ line-height: 104px; /* 108.333% */
19
+ letter-spacing: -2.88px;
20
+ }
package/src/components/Typography/css/category/heading.css ADDED
@@ -0,0 +1,41 @@
1
+ .TypographyCustom[data-category="heading"][data-size="xxl"] {
2
+ font-size: 72px;
3
+ font-style: normal;
4
+ line-height: 80px; /* 111.111% */
5
+ letter-spacing: -1.44px;
6
+ }
7
+
8
+ .TypographyCustom[data-category="heading"][data-size="xl"] {
9
+ font-size: 60px;
10
+ font-style: normal;
11
+ line-height: 68px; /* 113.333% */
12
+ letter-spacing: -1.08px;
13
+ }
14
+
15
+ .TypographyCustom[data-category="heading"][data-size="lg"] {
16
+ font-size: 48px;
17
+ font-style: normal;
18
+ line-height: 56px; /* 116.667% */
19
+ letter-spacing: -0.768px;
20
+ }
21
+
22
+ .TypographyCustom[data-category="heading"][data-size="md"] {
23
+ font-size: 36px;
24
+ font-style: normal;
25
+ line-height: 44px; /* 122.222% */
26
+ letter-spacing: -0.504px;
27
+ }
28
+
29
+ .TypographyCustom[data-category="heading"][data-size="sm"] {
30
+ font-size: 30px;
31
+ font-style: normal;
32
+ line-height: 38px; /* 126.667% */
33
+ letter-spacing: -0.39px;
34
+ }
35
+
36
+ .TypographyCustom[data-category="heading"][data-size="xs"] {
37
+ font-size: 24px;
38
+ font-style: normal;
39
+ line-height: 32px; /* 133.333% */
40
+ letter-spacing: -0.288px;
41
+ }
package/src/components/Typography/css/category/text.css ADDED
@@ -0,0 +1,48 @@
1
+ .TypographyCustom[data-category="text"][data-size="xxl"] {
2
+ font-size: 24px;
3
+ font-style: normal;
4
+ line-height: 32px; /* 133.333% */
5
+ letter-spacing: -0.288px;
6
+ }
7
+
8
+ .TypographyCustom[data-category="text"][data-size="xl"] {
9
+ font-size: 20px;
10
+ font-style: normal;
11
+ line-height: 28px; /* 140% */
12
+ letter-spacing: -0.2px;
13
+ }
14
+
15
+ .TypographyCustom[data-category="text"][data-size="lg"] {
16
+ font-size: 18px;
17
+ font-style: normal;
18
+ line-height: 24px; /* 133.333% */
19
+ letter-spacing: -0.144px;
20
+ }
21
+
22
+ .TypographyCustom[data-category="text"][data-size="md"] {
23
+ font-size: 16px;
24
+ font-style: normal;
25
+ line-height: 22px; /* 137.5% */
26
+ letter-spacing: -0.112px;
27
+ }
28
+
29
+ .TypographyCustom[data-category="text"][data-size="sm"] {
30
+ font-size: 14px;
31
+ font-style: normal;
32
+ line-height: 20px; /* 142.857% */
33
+ letter-spacing: -0.084px;
34
+ }
35
+
36
+ .TypographyCustom[data-category="text"][data-size="xs"] {
37
+ font-size: 12px;
38
+ font-style: normal;
39
+ line-height: 16px; /* 133.333% */
40
+ letter-spacing: -0.06px;
41
+ }
42
+
43
+ .TypographyCustom[data-category="text"][data-size="xxs"] {
44
+ font-size: 10px;
45
+ font-style: normal;
46
+ line-height: 14px; /* 140% */
47
+ letter-spacing: -0.04px;
48
+ }
package/src/components/Typography/css/index.css ADDED
@@ -0,0 +1,4 @@
1
+ @import "./bold.css";
2
+ @import "./category/display.css";
3
+ @import "./category/heading.css";
4
+ @import "./category/text.css";
package/src/icons/details.tsx ADDED
@@ -0,0 +1,10 @@
1
+ export const DetailsIcon = () => {
2
+ return (
3
+ <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
4
+ <path
5
+ d="M11.25 14.0625C11.25 14.3097 11.1767 14.5514 11.0393 14.757C10.902 14.9625 10.7068 15.1227 10.4784 15.2173C10.2499 15.312 9.99862 15.3367 9.75614 15.2885C9.51366 15.2402 9.29094 15.1212 9.11612 14.9464C8.9413 14.7716 8.82225 14.5488 8.77402 14.3064C8.72579 14.0639 8.75054 13.8126 8.84515 13.5841C8.93976 13.3557 9.09998 13.1605 9.30554 13.0232C9.5111 12.8858 9.75278 12.8125 10 12.8125C10.3315 12.8125 10.6495 12.9442 10.8839 13.1786C11.1183 13.413 11.25 13.731 11.25 14.0625ZM18.4375 10C18.4375 11.6688 17.9427 13.3001 17.0155 14.6876C16.0884 16.0752 14.7706 17.1566 13.2289 17.7952C11.6871 18.4338 9.99064 18.6009 8.35393 18.2754C6.71721 17.9498 5.2138 17.1462 4.03379 15.9662C2.85378 14.7862 2.05019 13.2828 1.72463 11.6461C1.39907 10.0094 1.56616 8.31286 2.20477 6.77111C2.84338 5.22936 3.92484 3.9116 5.31238 2.98448C6.69992 2.05735 8.33122 1.5625 10 1.5625C12.237 1.56498 14.3817 2.45473 15.9635 4.03653C17.5453 5.61833 18.435 7.763 18.4375 10ZM16.5625 10C16.5625 8.70206 16.1776 7.43327 15.4565 6.35407C14.7354 5.27487 13.7105 4.43374 12.5114 3.93704C11.3122 3.44034 9.99272 3.31038 8.71972 3.5636C7.44672 3.81681 6.2774 4.44183 5.35962 5.35961C4.44183 6.27739 3.81682 7.44672 3.5636 8.71972C3.31038 9.99272 3.44034 11.3122 3.93704 12.5114C4.43374 13.7105 5.27488 14.7354 6.35407 15.4565C7.43327 16.1776 8.70206 16.5625 10 16.5625C11.7399 16.5606 13.408 15.8686 14.6383 14.6383C15.8686 13.408 16.5606 11.7399 16.5625 10ZM10 5C8.10469 5 6.5625 6.40156 6.5625 8.125V8.4375C6.5625 8.68614 6.66127 8.9246 6.83709 9.10041C7.01291 9.27623 7.25136 9.375 7.5 9.375C7.74864 9.375 7.9871 9.27623 8.16292 9.10041C8.33873 8.9246 8.4375 8.68614 8.4375 8.4375V8.125C8.4375 7.43594 9.14063 6.875 10 6.875C10.8594 6.875 11.5625 7.43594 11.5625 8.125C11.5625 8.81406 10.8594 9.375 10 9.375C9.75136 9.375 9.51291 9.47377 9.33709 9.64959C9.16127 9.8254 9.0625 10.0639 9.0625 10.3125V10.9375C9.06194 11.1691 9.14715 11.3927 9.30169 11.5653C9.45623 11.7378 9.66916 11.847 9.89945 11.8719C10.1297 11.8967 10.3611 11.8354 10.5488 11.6998C10.7366 11.5642 10.8676 11.3639 10.9164 11.1375C12.368 10.7719 13.4375 9.56016 13.4375 8.125C13.4375 6.40156 11.8953 5 10 5Z"
6
+ fill="#080808"
7
+ />
8
+ </svg>
9
+ );
10
+ };
package/src/icons/index.tsx ADDED
@@ -0,0 +1,2 @@
1
+ import MailIcon from "./mail.svg";
2
+ export { MailIcon };
package/src/icons/lock.tsx ADDED
@@ -0,0 +1,29 @@
1
+ export const LockIcon = () => {
2
+ return (
3
+ <svg width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
4
+ <path
5
+ d="M11.6868 6.87324V5.08408C11.6868 2.98991 9.98844 1.29154 7.89427 1.29154C5.8001 1.28241 4.0951 2.97241 4.08594 5.06741V5.08408V6.87324"
6
+ stroke="#939197"
7
+ stroke-width="2"
8
+ stroke-linecap="round"
9
+ stroke-linejoin="round"
10
+ />
11
+ <path
12
+ fill-rule="evenodd"
13
+ clip-rule="evenodd"
14
+ d="M11.0695 16.7081H4.70199C2.95699 16.7081 1.54199 15.294 1.54199 13.5481V9.97396C1.54199 8.22813 2.95699 6.81396 4.70199 6.81396H11.0695C12.8145 6.81396 14.2295 8.22813 14.2295 9.97396V13.5481C14.2295 15.294 12.8145 16.7081 11.0695 16.7081Z"
15
+ stroke="#939197"
16
+ stroke-width="2"
17
+ stroke-linecap="round"
18
+ stroke-linejoin="round"
19
+ />
20
+ <path
21
+ d="M7.88574 10.8357V12.6865"
22
+ stroke="#939197"
23
+ stroke-width="2"
24
+ stroke-linecap="round"
25
+ stroke-linejoin="round"
26
+ />
27
+ </svg>
28
+ );
29
+ };
package/src/icons/mail.svg ADDED
@@ -0,0 +1,4 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
2
+ <path d="M17.5 12.5786C17.5 14.8829 15.9627 16.7559 13.6819 16.7503H6.31811C4.0373 16.7559 2.5 14.8829 2.5 12.5786V7.42754C2.5 5.12565 4.0373 3.25024 6.31811 3.25024H13.6819C15.9627 3.25024 17.5 5.12565 17.5 7.42754V12.5786Z" stroke="#939197" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
3
+ <path d="M14.4267 7.63843L11.0943 10.3482C10.4667 10.8468 9.57726 10.8468 8.94968 10.3482L5.58887 7.63843" stroke="#939197" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
4
+ </svg>
package/src/icons/mail.tsx ADDED
@@ -0,0 +1,23 @@
1
+ interface MailIconProps {
2
+ style?: React.CSSProperties;
3
+ }
4
+
5
+ export const MailIcon = ({ style }: MailIconProps) => (
6
+ // edited the svg to style it with the props
7
+ <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" style={style}>
8
+ <path
9
+ d="M17.5 12.5786C17.5 14.8829 15.9627 16.7559 13.6819 16.7503H6.31811C4.0373 16.7559 2.5 14.8829 2.5 12.5786V7.42754C2.5 5.12565 4.0373 3.25024 6.31811 3.25024H13.6819C15.9627 3.25024 17.5 5.12565 17.5 7.42754V12.5786Z"
10
+ stroke="#939197"
11
+ strokeWidth="2"
12
+ strokeLinecap="round"
13
+ strokeLinejoin="round"
14
+ />
15
+ <path
16
+ d="M14.4267 7.63843L11.0943 10.3482C10.4667 10.8468 9.57726 10.8468 8.94968 10.3482L5.58887 7.63843"
17
+ stroke="#939197"
18
+ strokeWidth="2"
19
+ strokeLinecap="round"
20
+ strokeLinejoin="round"
21
+ />
22
+ </svg>
23
+ );
package/src/icons/password-eye.tsx ADDED
@@ -0,0 +1,10 @@
1
+ export const PasswordEyeIcon = () => {
2
+ return (
3
+ <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
4
+ <path
5
+ d="M4.44393 2.49455C4.36161 2.40174 4.26167 2.3262 4.14993 2.2723C4.0382 2.2184 3.91687 2.18722 3.79299 2.18055C3.66911 2.17389 3.54514 2.19188 3.42826 2.23348C3.31138 2.27508 3.20392 2.33946 3.11211 2.4229C3.0203 2.50634 2.94596 2.60716 2.89341 2.71954C2.84085 2.83192 2.81112 2.95361 2.80594 3.07756C2.80076 3.20152 2.82024 3.32526 2.86324 3.44163C2.90624 3.558 2.9719 3.66468 3.05643 3.75549L4.30643 5.13439C1.61503 6.92658 0.44706 9.49846 0.39081 9.61955C0.337882 9.73955 0.310547 9.86926 0.310547 10.0004C0.310547 10.1316 0.337882 10.2613 0.39081 10.3813C0.419716 10.4453 1.10409 11.9641 2.61659 13.4758C4.63847 15.4953 7.18769 16.5625 10.0002 16.5625C11.3671 16.5701 12.7217 16.3045 13.9846 15.7813L15.5541 17.5078C15.7222 17.6884 15.9547 17.7954 16.2011 17.8057C16.4476 17.816 16.6882 17.7288 16.8708 17.5628C17.0534 17.3969 17.1632 17.1657 17.1764 16.9194C17.1897 16.6731 17.1053 16.4314 16.9416 16.2469L4.44393 2.49455ZM10.0002 14.6875C7.68847 14.6875 5.66659 13.8492 3.99159 12.1969C3.33273 11.5445 2.7658 10.8054 2.30643 10C2.71815 9.27267 3.7744 7.66408 5.58768 6.53986L12.626 14.2828C11.7772 14.5539 10.8912 14.6904 10.0002 14.6875ZM19.6096 10.3813C19.5814 10.4445 18.9064 11.9438 17.4221 13.4406C17.3371 13.535 17.2338 13.6111 17.1185 13.6643C17.0032 13.7175 16.8783 13.7468 16.7513 13.7503C16.6244 13.7538 16.4981 13.7315 16.38 13.6847C16.2619 13.6378 16.1546 13.5675 16.0646 13.478C15.9745 13.3885 15.9036 13.2816 15.8561 13.1638C15.8086 13.046 15.7855 12.9198 15.7882 12.7929C15.791 12.6659 15.8195 12.5408 15.8721 12.4252C15.9246 12.3096 16.0001 12.2059 16.0939 12.1203C16.7175 11.4864 17.2554 10.7735 17.6939 10C17.2348 9.19443 16.6679 8.45531 16.0088 7.80314C14.333 6.1508 12.3119 5.31252 10.0002 5.31252C9.73847 5.31252 9.47675 5.32346 9.21894 5.34533C9.0947 5.35864 8.96905 5.34698 8.84938 5.31104C8.72971 5.27509 8.61844 5.21559 8.52209 5.13602C8.42575 5.05646 8.34628 4.95844 8.28837 4.84772C8.23045 4.737 8.19525 4.61583 8.18483 4.49131C8.17442 4.3668 8.189 4.24145 8.22772 4.12265C8.26644 4.00385 8.32851 3.89399 8.4103 3.79953C8.49208 3.70506 8.59193 3.6279 8.70396 3.57257C8.816 3.51725 8.93796 3.48488 9.06269 3.47736C9.36972 3.4508 9.68769 3.43752 10.0002 3.43752C12.8127 3.43752 15.3619 4.50549 17.3822 6.52502C18.8939 8.03674 19.5783 9.55627 19.6072 9.61955C19.6605 9.73938 19.6882 9.86901 19.6887 10.0002C19.6891 10.1313 19.6621 10.2611 19.6096 10.3813Z"
6
+ fill="#080808"
7
+ />
8
+ </svg>
9
+ );
10
+ };
package/src/index.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  export { default as Button } from "./components/CustomButton/CustomButton";
2
- export { default as CustomInput } from "./components/CustomInput";
2
+ export { default as CustomInput } from "./components/CustomInput/CustomInput";
3
3
  export { default as CustomCheckbox } from "./components/CustomCheckbox";
package/src/playground/App.tsx CHANGED
@@ -1,10 +1,12 @@
1
1
  import React, { useState } from "react";
2
2
  import { Button, CustomInput, CustomCheckbox } from "../";
3
+ import TypographyCustom from "../components/Typography/Typography";
3
4
  import {
4
5
  ButtonSize,
5
6
  ButtonColorHierarchyType,
6
7
  buttonColorHierarchyArray,
7
8
  } from "../components/CustomButton/CustomButtonTypes";
9
+ import { MailIcon } from "../icons/index";
8
10
 
9
11
  function extractPossibleChoices(type: ButtonColorHierarchyType): string[] {
10
12
  console.log(type);
@@ -68,17 +70,33 @@ const App: React.FC = () => {
68
70
  colorHierarchy={colorHierarchy}
69
71
  disabled={disabled}
70
72
  text={text}
73
+ leftIcon={MailIcon}
71
74
  onClick={() => alert("Button clicked!")}
72
75
  />
73
76
  </div>
74
77
 
75
78
  <div className="mb-4">
79
+ <h2 className="text-xl mb-2">Typography</h2>
80
+ <TypographyCustom category="text" Size="md" bold="semibold">
81
+ This is a custom typography component
82
+ </TypographyCustom>
83
+ </div>
84
+
85
+ <div className="mb-4" style={{ paddingLeft: "3em" }}>
76
86
  <h2 className="text-xl mb-2">Custom Input</h2>
77
- <CustomInput value={inputValue} onChange={setInputValue} placeholder="Type here..." />
87
+ <CustomInput
88
+ value={inputValue}
89
+ leftIcon={MailIcon}
90
+ actionLabel="Send"
91
+ errExists={true}
92
+ onChange={(e: any) => setInputValue(e.target.value)}
93
+ label="Label"
94
+ placeholder="Type here..."
95
+ />
78
96
  </div>
79
97
  <div className="mb-4">
80
- <h2 className="text-xl mb-2">Custom Checkbox</h2>
81
- <CustomCheckbox checked={checkboxChecked} onChange={setCheckboxChecked} label="Check me" />
98
+ {/* <h2 className="text-xl mb-2">Custom Checkbox</h2> */}
99
+ {/* <CustomCheckbox checked={checkboxChecked} onChange={setCheckboxChecked} label="Check me" /> */}
82
100
  </div>
83
101
  </div>
84
102
  );
package/src/svg.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ declare module "*.svg" {
2
+ import React, { ReactNode } from "react";
3
+ const SVGComponent: any;
4
+ export default SVGComponent;
5
+ }
package/src/components/CustomInput.tsx DELETED
@@ -1,22 +0,0 @@
1
- import React from "react";
2
-
3
- type CustomInputProps = {
4
- value: string;
5
- onChange: (value: string) => void;
6
- placeholder?: string;
7
- disabled?: boolean;
8
- };
9
-
10
- const CustomInput: React.FC<CustomInputProps> = ({ value, onChange, placeholder, disabled }) => {
11
- return (
12
- <input
13
- className="border py-2 px-4 rounded"
14
- value={value}
15
- onChange={(e) => onChange(e.target.value)}
16
- placeholder={placeholder}
17
- disabled={disabled}
18
- />
19
- );
20
- };
21
-
22
- export default CustomInput;
package/src/components/Typography/css/size.css DELETED
@@ -1 +0,0 @@
1
- /* text size css */