@dev-blinq/ui-systems 1.0.7 → 1.0.9

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 (14) hide show
  1. package/README.md +50 -0
  2. package/dist/colors.css +141 -0
  3. package/dist/style.css +1 -0
  4. package/dist/ui-systems.js +6964 -0
  5. package/dist/vite.svg +1 -0
  6. package/package.json +24 -14
  7. package/dist/index.css +0 -418
  8. package/dist/index.css.map +0 -1
  9. package/dist/index.d.mts +0 -57
  10. package/dist/index.d.ts +0 -57
  11. package/dist/index.js +0 -1
  12. package/dist/index.js.map +0 -1
  13. package/dist/index.mjs +0 -1
  14. package/dist/index.mjs.map +0 -1
package/README.md CHANGED
@@ -0,0 +1,50 @@
1
+ # React + TypeScript + Vite
2
+
3
+ This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4
+
5
+ Currently, two official plugins are available:
6
+
7
+ - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8
+ - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9
+
10
+ ## Expanding the ESLint configuration
11
+
12
+ If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
13
+
14
+ - Configure the top-level `parserOptions` property like this:
15
+
16
+ ```js
17
+ export default tseslint.config({
18
+ languageOptions: {
19
+ // other options...
20
+ parserOptions: {
21
+ project: ['./tsconfig.node.json', './tsconfig.app.json'],
22
+ tsconfigRootDir: import.meta.dirname,
23
+ },
24
+ },
25
+ })
26
+ ```
27
+
28
+ - Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
29
+ - Optionally add `...tseslint.configs.stylisticTypeChecked`
30
+ - Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
31
+
32
+ ```js
33
+ // eslint.config.js
34
+ import react from 'eslint-plugin-react'
35
+
36
+ export default tseslint.config({
37
+ // Set the react version
38
+ settings: { react: { version: '18.3' } },
39
+ plugins: {
40
+ // Add the react plugin
41
+ react,
42
+ },
43
+ rules: {
44
+ // other rules...
45
+ // Enable its recommended rules
46
+ ...react.configs.recommended.rules,
47
+ ...react.configs['jsx-runtime'].rules,
48
+ },
49
+ })
50
+ ```
package/dist/colors.css ADDED
@@ -0,0 +1,141 @@
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
+ }
package/dist/style.css ADDED
@@ -0,0 +1 @@
1
+ .button{display:inline-flex;justify-content:center;align-items:center;font-size:14px;font-weight:700;cursor:pointer;transition:all .3s ease;border:none;font-family:var(--font-family, "Plus Jakarta Sans", sans-serif)}.button[data-size=sm]{padding:8px 12px;gap:8px;border-radius:12px}.button[data-size=md]{padding:10px 14px;gap:8px;border-radius:12px}.button[data-size=lg]{padding:12px 16px;gap:10px;border-radius:12px}.button[data-size=xl]{padding:16px 24px;gap:12px;border-radius:16px}.button[data-colorHierarchy="brand/primary"]{background-color:var(--primary-main)}.button[data-colorHierarchy="brand/primary"] .input-typography{color:#fff}.button[data-colorHierarchy="gray/secondary"]{background-color:#f1f1f1}.button[data-colorHierarchy="gray/secondary"] .input-typography{color:#080808}.button[data-colorHierarchy="white/secondary"]{background-color:#fff;box-shadow:0 1px 2px #1717170d;border:var(--border-radius-radius-none, 1px) solid var(--border-default, #e6e6e6)}.button[data-colorHierarchy="white/secondary"] .input-typography{color:#080808}.button[data-colorHierarchy="gray/linkContainer"]{background-color:#fff}.button[data-colorHierarchy="gray/linkContainer"] .input-typography{color:#080808}.button[data-colorHierarchy="gray/link"]{background-color:#fff;padding:0}.button[data-colorHierarchy="gray/link"] .input-typography{color:#080808}.button[data-colorHierarchy="brand/link"]{background-color:#fff;padding:0}.button[data-colorHierarchy="brand/link"] .input-typography{color:var(--primary-main)}.button[data-colorHierarchy="destructive/primary"]{background:var(--surface-error, #ea4621)}.button[data-colorHierarchy="destructive/primary"] .input-typography{color:#fff}.button[data-colorHierarchy="destructive/secondary"]{background:var(--surface-error-secondary, #fdece9)}.button[data-colorHierarchy="destructive/secondary"] .input-typography{color:var(--text-error, #ea4621)}.button[data-colorHierarchy="destructive/linkContainer"]{background-color:#fff}.button[data-colorHierarchy="destructive/linkContainer"] .input-typography{color:var(--text-error, #ea4621)}.button[data-colorHierarchy=""]{background-color:#fff;padding:0}.button[data-colorHierarchy=""] .input-typography{color:var(--text-error, #ea4621)}.button[data-colorHierarchy="brand/primary"]:hover{background:var(--surface-primary-hover, #08379e)}.button[data-colorHierarchy="gray/secondary"]:hover{background:var(--surface-secondary-hover, #ececed)}.button[data-colorHierarchy="white/secondary"]:hover{background:var(--surface-white---hover, #f9f9f9)}.button[data-colorHierarchy="gray/linkContainer"]:hover{background:var(--surface-secondary, #f1f1f1)}.button[data-colorHierarchy="gray/link"]:hover,.button[data-colorHierarchy="brand/link"]:hover{background-color:#fff}.button[data-colorHierarchy="destructive/primary"]:hover{background:var(--surface-error-hover, #d33f1e)}.button[data-colorHierarchy="destructive/secondary"]:hover{background:var(--surface-error-secondary-hover, #fbdad3)}.button[data-colorHierarchy="destructive/linkContainer"]:hover{background:var(--colors-red-5, #fef6f4)}.button[data-colorHierarchy=""]:hover{background-color:#fff}.button[data-colorHierarchy="brand/primary"]:focus{box-shadow:0 0 0 4px var(--primary-30, #b5c5e7)}.button[data-colorHierarchy="gray/secondary"]:focus{box-shadow:0 0 0 4px var(--neutural-50, #e6e6e6)}.button[data-colorHierarchy="white/secondary"]:focus{box-shadow:0 0 0 4px var(--neutural-50, #e6e6e6)}.button[data-colorHierarchy="gray/linkContainer"]:focus{box-shadow:0 0 0 4px var(--neutural-50, #e6e6e6)}.button[data-colorHierarchy="gray/link"]:focus{box-shadow:0 0 0 4px var(--neutural-50, #e6e6e6)}.button[data-colorHierarchy="brand/link"]:focus{box-shadow:0 0 0 4px var(--primary-30, #b5c5e7)}.button[data-colorHierarchy="destructive/primary"]:focus{box-shadow:0 0 0 4px var(--destructive-30, #f9c7bc)}.button[data-colorHierarchy="destructive/secondary"]:focus{box-shadow:0 0 0 4px var(--destructive-30, #f9c7bc)}.button[data-colorHierarchy="destructive/linkContainer"]:focus{box-shadow:0 0 0 4px var(--destructive-30, #f9c7bc)}.button[data-colorHierarchy=""]:focus{box-shadow:0 0 0 4px var(--destructive-30, #f9c7bc)}.button[data-colorHierarchy="brand/primary"]:disabled{background:var(--surface-disabled, #f1f1f1)}.button:disabled .input-typography{color:var(--text-disabled, #939197)}.button[data-colorHierarchy="gray/secondary"]:disabled{background:var(--surface-disabled, #f1f1f1)}.button[data-colorHierarchy="white/secondary"]:disabled{background:var(--surface-white---disabled, #fdfdfd)}.button[data-colorHierarchy="brand/link"]:disabled .input-typography{color:var(--text-action-disabled, #849ed7)}.button[data-colorHierarchy="destructive/primary"]:disabled{background:var(--surface-error-disabled, #fdece9)}.button[data-colorHierarchy="destructive/primary"]:disabled .input-typography{color:var(--text-error-disabled, #f5a290)}.button[data-colorHierarchy="destructive/secondary"]:disabled{background:var(--surface-error-disabled, #fdece9)}.button[data-colorHierarchy="destructive/secondary"]:disabled .input-typography{color:var(--text-error-disabled, #f5a290)}.button[data-colorHierarchy="destructive/linkContainer"]:disabled .input-typography{color:var(--text-error-disabled, #f5a290)}.button[data-colorHierarchy="destructive/link"]:disabled .input-typography{color:var(--text-error-disabled, #f5a290)}.TypographyCustom{color:var(--Gray-110, var(--colors-greyscale-110, #2d2b32))}.TypographyCustom[data-bold=extrabold]{font-weight:800}.TypographyCustom[data-bold=bold]{font-weight:700}.TypographyCustom[data-bold=semibold]{font-weight:600}.TypographyCustom[data-bold=medium]{font-weight:500}.TypographyCustom[data-category=display][data-size=lg]{font-size:180px;font-style:normal;line-height:188px;letter-spacing:-9px}.TypographyCustom[data-category=display][data-size=md]{font-size:128px;font-style:normal;line-height:136px;letter-spacing:-5.12px}.TypographyCustom[data-category=display][data-size=sm]{font-size:96px;font-style:normal;line-height:104px;letter-spacing:-2.88px}.TypographyCustom[data-category=heading][data-size=xxl]{font-size:72px;font-style:normal;line-height:80px;letter-spacing:-1.44px}.TypographyCustom[data-category=heading][data-size=xl]{font-size:60px;font-style:normal;line-height:68px;letter-spacing:-1.08px}.TypographyCustom[data-category=heading][data-size=lg]{font-size:48px;font-style:normal;line-height:56px;letter-spacing:-.768px}.TypographyCustom[data-category=heading][data-size=md]{font-size:36px;font-style:normal;line-height:44px;letter-spacing:-.504px}.TypographyCustom[data-category=heading][data-size=sm]{font-size:30px;font-style:normal;line-height:38px;letter-spacing:-.39px}.TypographyCustom[data-category=heading][data-size=xs],.TypographyCustom[data-category=text][data-size=xxl]{font-size:24px;font-style:normal;line-height:32px;letter-spacing:-.288px}.TypographyCustom[data-category=text][data-size=xl]{font-size:20px;font-style:normal;line-height:28px;letter-spacing:-.2px}.TypographyCustom[data-category=text][data-size=lg]{font-size:18px;font-style:normal;line-height:24px;letter-spacing:-.144px}.TypographyCustom[data-category=text][data-size=md]{font-size:16px;font-style:normal;line-height:22px;letter-spacing:-.112px}.TypographyCustom[data-category=text][data-size=sm]{font-size:14px;font-style:normal;line-height:20px;letter-spacing:-.084px}.TypographyCustom[data-category=text][data-size=xs]{font-size:12px;font-style:normal;line-height:16px;letter-spacing:-.06px}.TypographyCustom[data-category=text][data-size=xxs]{font-size:10px;font-style:normal;line-height:14px;letter-spacing:-.04px}.custom-input{display:flex;flex-direction:row;padding:12px;align-items:center;gap:12px;width:296px;align-self:stretch;border-radius:var(--border-radius-radius-pre-lg, 12px);border:1px solid var(--border-default, #e6e6e6);background:var(--surface-white, #fff);box-shadow:0 1px 2px #1717170d}.custom-input input{width:100%;border:none}.custom-input input::placeholder{color:var(--text-disabled, #939197);font-weight:500}.custom-input input:hover,.custom-input input:focus,.custom-input input:active{border:none;outline:none}.custom-input .left-icon,.custom-input .right-icon{display:flex;align-items:center;justify-content:center}.custom-input input{font-family:var(--font-family);color:var(--text-primary, #080808);font-weight:600;font-size:14px;font-style:normal}.custom-input .grey-box{margin:-12px;padding:12px;gap:6px;display:flex;flex-direction:row;background:#f9f9f9}.custom-input .grey-right-box{padding:12px;border-top-right-radius:12px;border-bottom-right-radius:12px;border-left:1px solid #e6e6e6}.custom-input .grey-left-box{padding:12px 14px;border-top-left-radius:12px;border-bottom-left-radius:12px;border-right:1px solid #e6e6e6}.custom-input select:focus{border:none;outline:none}.custom-input:hover{border:var(--border-radius-radius-none, 1px) solid var(--border-hover, #c9c9cc);box-shadow:0 1px 2px #1717170d}.custom-input:focus-within{border:var(--border-radius-radius-none, 1px) solid var(--border-default, #e6e6e6);background:var(--surface-white, #fff);box-shadow:0 0 0 4px var(--primary-30, #b5c5e7)}.custom-input:has(input:disabled){border-radius:var(--border-radius-radius-pre-lg, 12px);border:var(--border-radius-radius-none, 1px) solid var(--border-default, #e6e6e6);background:var(--surface-disabled, #f1f1f1)}.custom-input[data-error=true]{border:var(--border-radius-radius-none, 1px) solid var(--border-error, #ea4621)}