@chekinapp/ui 0.0.77 → 0.0.80
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.cjs +37 -73
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +10 -6
- package/dist/index.d.ts +10 -6
- package/dist/index.js +28 -66
- package/dist/index.js.map +1 -1
- package/package.json +23 -4
- package/postcss.config.mjs +7 -0
- package/src/global.css +213 -0
- package/tailwind.config.js +111 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chekinapp/ui",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.80",
|
|
4
4
|
"description": "Chekin UI — React components on Radix primitives, styled with Chekin tokens",
|
|
5
5
|
"private": false,
|
|
6
6
|
"license": "UNLICENSED",
|
|
@@ -19,10 +19,16 @@
|
|
|
19
19
|
"import": "./dist/index.js",
|
|
20
20
|
"require": "./dist/index.cjs"
|
|
21
21
|
},
|
|
22
|
-
"./styles.css": "./dist/styles.css"
|
|
22
|
+
"./styles.css": "./dist/styles.css",
|
|
23
|
+
"./global.css": "./src/global.css",
|
|
24
|
+
"./tailwind.config": "./tailwind.config.js",
|
|
25
|
+
"./postcss.config": "./postcss.config.mjs"
|
|
23
26
|
},
|
|
24
27
|
"files": [
|
|
25
|
-
"dist"
|
|
28
|
+
"dist",
|
|
29
|
+
"src/global.css",
|
|
30
|
+
"tailwind.config.js",
|
|
31
|
+
"postcss.config.mjs"
|
|
26
32
|
],
|
|
27
33
|
"publishConfig": {
|
|
28
34
|
"access": "public"
|
|
@@ -60,15 +66,26 @@
|
|
|
60
66
|
"recharts": "^3.8.1",
|
|
61
67
|
"sonner": "^2.0.5",
|
|
62
68
|
"tailwind-merge": "^2.5.5",
|
|
69
|
+
"tailwindcss-animate": "^1.0.7",
|
|
63
70
|
"@chekinapp/tokens": "0.0.18"
|
|
64
71
|
},
|
|
65
72
|
"peerDependencies": {
|
|
66
73
|
"@tanstack/react-table": "^8.0.0",
|
|
74
|
+
"autoprefixer": "^10.0.0",
|
|
67
75
|
"i18next": "^23.0.0 || ^24.0.0 || ^25.0.0",
|
|
68
76
|
"react": "^18.0.0 || ^19.0.0",
|
|
69
77
|
"react-dom": "^18.0.0 || ^19.0.0",
|
|
70
78
|
"react-i18next": "^14.0.0 || ^15.0.0 || ^16.0.0",
|
|
71
|
-
"sonner": "^2.0.0"
|
|
79
|
+
"sonner": "^2.0.0",
|
|
80
|
+
"tailwindcss": "^3.0.0"
|
|
81
|
+
},
|
|
82
|
+
"peerDependenciesMeta": {
|
|
83
|
+
"autoprefixer": {
|
|
84
|
+
"optional": true
|
|
85
|
+
},
|
|
86
|
+
"tailwindcss": {
|
|
87
|
+
"optional": true
|
|
88
|
+
}
|
|
72
89
|
},
|
|
73
90
|
"devDependencies": {
|
|
74
91
|
"@testing-library/jest-dom": "^6.9.1",
|
|
@@ -78,12 +95,14 @@
|
|
|
78
95
|
"@types/react": "^18.3.17",
|
|
79
96
|
"@types/react-dom": "^18.3.5",
|
|
80
97
|
"@vitejs/plugin-react": "^5.2.0",
|
|
98
|
+
"autoprefixer": "^10.4.20",
|
|
81
99
|
"esbuild-plugin-svgr": "^3.1.1",
|
|
82
100
|
"i18next": "^25.6.3",
|
|
83
101
|
"jsdom": "^27.2.0",
|
|
84
102
|
"react": "^18.3.1",
|
|
85
103
|
"react-dom": "^18.3.1",
|
|
86
104
|
"react-i18next": "^16.3.5",
|
|
105
|
+
"tailwindcss": "^3.4.17",
|
|
87
106
|
"tsup": "^8.3.5",
|
|
88
107
|
"typescript": "^5.7.2",
|
|
89
108
|
"vite": "^8.0.0",
|
package/src/global.css
ADDED
|
@@ -0,0 +1,213 @@
|
|
|
1
|
+
@tailwind base;
|
|
2
|
+
@tailwind components;
|
|
3
|
+
@tailwind utilities;
|
|
4
|
+
|
|
5
|
+
html body[data-scroll-locked] {
|
|
6
|
+
overflow: visible !important;
|
|
7
|
+
margin-right: 0 !important;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
@layer base {
|
|
11
|
+
:root {
|
|
12
|
+
--sidebar-width: 16.5rem;
|
|
13
|
+
--sidebar-width-icon: 3.6rem;
|
|
14
|
+
|
|
15
|
+
--background: 0 0% 100%;
|
|
16
|
+
--foreground: 240 50.6% 17.5%; /* #161643 */
|
|
17
|
+
--card: 0 0% 100%;
|
|
18
|
+
|
|
19
|
+
--section-gap: 24px;
|
|
20
|
+
--fields-gap: 24px;
|
|
21
|
+
|
|
22
|
+
--bg-sidebar: #fff;
|
|
23
|
+
--brand-color: #385cf8;
|
|
24
|
+
--success-color: #35e5bc;
|
|
25
|
+
--link-color: #385cf8;
|
|
26
|
+
/*--link-color: #002CFA;*/
|
|
27
|
+
|
|
28
|
+
/*Chekin tokens from Figma*/
|
|
29
|
+
--table-head-background: #ececf8;
|
|
30
|
+
--stroke-gray-medium: 240, 19.5%, 83.9%; /* #CECEDE */
|
|
31
|
+
--stroke-gray-light: 233, 21%, 92%; /* #E5E6EE */
|
|
32
|
+
--text-gray-dark: #6b6b95;
|
|
33
|
+
--stroke-grey: #e5e6ee;
|
|
34
|
+
--stroke-brand-soft: #abbafc;
|
|
35
|
+
|
|
36
|
+
/*App Sidebar*/
|
|
37
|
+
--app-sidebar-text-color: #cecede;
|
|
38
|
+
|
|
39
|
+
--card-foreground: 0 0% 3.9%;
|
|
40
|
+
--popover: 0 0% 100%;
|
|
41
|
+
--popover-foreground: 0 0% 3.9%;
|
|
42
|
+
--primary: 229.2, 93.2%, 59.6%; /* #385CF8; */
|
|
43
|
+
--primary-foreground: 0 0% 98%;
|
|
44
|
+
--secondary: 0, 0%, 95%;
|
|
45
|
+
--secondary-foreground: 0 0% 9%;
|
|
46
|
+
--muted: 0 0% 96.1%;
|
|
47
|
+
--muted-foreground: 240 17% 50%;
|
|
48
|
+
--accent: 210 22.2% 96.5%; /* #F4F6F8 */
|
|
49
|
+
--accent-foreground: 0 0% 9%;
|
|
50
|
+
--navy-dark: 240 50.6% 17.5%; /* #161643 */
|
|
51
|
+
--navy-dark-foreground: 0 0% 100%;
|
|
52
|
+
--destructive: 342, 100%, 57%;
|
|
53
|
+
--destructive-foreground: 240 50.6% 17.5%;
|
|
54
|
+
--border: 0 0% 89.8%; /* #E5E6EE */
|
|
55
|
+
--input: 240 19.5% 83.9%; /* #CECEDE */
|
|
56
|
+
--ring: 0 0% 3.9%;
|
|
57
|
+
--chart-1: 12 76% 61%;
|
|
58
|
+
--chart-2: 173 58% 39%;
|
|
59
|
+
--chart-3: 197 37% 24%;
|
|
60
|
+
--chart-4: 43 74% 66%;
|
|
61
|
+
--chart-5: 27 87% 67%;
|
|
62
|
+
--radius: 0.5rem;
|
|
63
|
+
--neutral20-shadow: 0 0 10px 0 rgba(143, 143, 143, 0.2);
|
|
64
|
+
--dropdown-brand-shadow: 0px 15px 15px 0px rgba(33, 72, 255, 0.2);
|
|
65
|
+
|
|
66
|
+
--background-neutral-light: #f4f6f8;
|
|
67
|
+
--icon-gray-medium: #9696b9;
|
|
68
|
+
--background-sky-light: #eff6ff;
|
|
69
|
+
--background-sky-light-hover: #e0effe;
|
|
70
|
+
--icon-brand: #385cf8;
|
|
71
|
+
--background-danger-light: #fff5f9;
|
|
72
|
+
--background-primary-light: #dbeafe;
|
|
73
|
+
--background-success-medium: #cff9ef;
|
|
74
|
+
--background-subtle: #fafafa;
|
|
75
|
+
--border-gray-light: #e5e6ee;
|
|
76
|
+
--sky-light-blue: #eff6ff;
|
|
77
|
+
|
|
78
|
+
/* Inbox Panel Colors */
|
|
79
|
+
--inbox-background-white: #ffffff;
|
|
80
|
+
--inbox-text-primary: #161643;
|
|
81
|
+
--inbox-gray-50: rgb(249 250 251);
|
|
82
|
+
--inbox-gray-100: rgb(243 244 246);
|
|
83
|
+
--inbox-gray-200: rgb(229 231 235);
|
|
84
|
+
--inbox-gray-300: rgb(209 213 219);
|
|
85
|
+
--inbox-gray-400: rgb(156 163 175);
|
|
86
|
+
--inbox-gray-500: rgb(107 114 128);
|
|
87
|
+
--inbox-gray-600: rgb(75 85 99);
|
|
88
|
+
--inbox-red-500: #ef4444;
|
|
89
|
+
--inbox-hover-background: #f4f6f8;
|
|
90
|
+
--inbox-hover-background-secondary: #f1f5f9;
|
|
91
|
+
--inbox-success-background: #dcfce7;
|
|
92
|
+
--inbox-success-text: #166534;
|
|
93
|
+
--inbox-success-border: #bbf7d0;
|
|
94
|
+
--inbox-error-text: rgb(239 68 68);
|
|
95
|
+
|
|
96
|
+
/* Avatar Colors */
|
|
97
|
+
--avatar-color-1: #e0e9fb;
|
|
98
|
+
--avatar-color-2: #e0fbf3;
|
|
99
|
+
--avatar-color-3: #fbf5e0;
|
|
100
|
+
--avatar-color-4: #fbede0;
|
|
101
|
+
--avatar-color-5: #fbe0f4;
|
|
102
|
+
--avatar-color-6: #ede0fb;
|
|
103
|
+
--background-neutral: #e5e6ee;
|
|
104
|
+
--background-sky: #dbeafe;
|
|
105
|
+
--background-danger-medium: #ffe2ed;
|
|
106
|
+
--background-success-light: #e8fcf7;
|
|
107
|
+
--background-warning-light: #fff9db;
|
|
108
|
+
--background-warning-medium: #ffeeb2;
|
|
109
|
+
--icon-success: #2bc29f;
|
|
110
|
+
--icon-warning: #ffc400;
|
|
111
|
+
--icon-danger: #ff2467;
|
|
112
|
+
--text-warning: #ce8b0b;
|
|
113
|
+
|
|
114
|
+
/* Layout Heights */
|
|
115
|
+
--tab-navigation-offset: 200px;
|
|
116
|
+
--text-dark: #161643;
|
|
117
|
+
--gray-light: #e5e6ee;
|
|
118
|
+
--white: #ffffff;
|
|
119
|
+
|
|
120
|
+
/* Airbnb variant tokens (see components/ui/Airbnb*) */
|
|
121
|
+
--modal-background: #ffffff;
|
|
122
|
+
--button-secondary-background: #f4f6f9;
|
|
123
|
+
--button-secondary-foreground: #152946;
|
|
124
|
+
--empty-field-background: var(--background, #ffffff);
|
|
125
|
+
--button-height: 40px;
|
|
126
|
+
}
|
|
127
|
+
.dark {
|
|
128
|
+
--background: 0 0% 1%;
|
|
129
|
+
--foreground: 0 0% 98%;
|
|
130
|
+
--card: 0 0% 3.9%;
|
|
131
|
+
--card-foreground: 0 0% 98%;
|
|
132
|
+
--popover: 0 0% 3.9%;
|
|
133
|
+
--popover-foreground: 0 0% 98%;
|
|
134
|
+
--primary: 0 0% 98%;
|
|
135
|
+
--primary-foreground: 0 0% 9%;
|
|
136
|
+
--secondary: 0 0% 14.9%;
|
|
137
|
+
--secondary-foreground: 0 0% 98%;
|
|
138
|
+
--muted: 0 0% 14.9%;
|
|
139
|
+
--muted-foreground: 0 0% 63.9%;
|
|
140
|
+
--accent: 0 0% 14.9%;
|
|
141
|
+
--accent-foreground: 0 0% 98%;
|
|
142
|
+
--destructive: 0 62.8% 30.6%;
|
|
143
|
+
--destructive-foreground: 0 0% 98%;
|
|
144
|
+
--border: 0 0% 14.9%;
|
|
145
|
+
--input: 0 0% 14.9%;
|
|
146
|
+
--ring: 0 0% 83.1%;
|
|
147
|
+
--chart-1: 220 70% 50%;
|
|
148
|
+
--chart-2: 160 60% 45%;
|
|
149
|
+
--chart-3: 30 80% 55%;
|
|
150
|
+
--chart-4: 280 65% 60%;
|
|
151
|
+
--chart-5: 340 75% 55%;
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
@layer base {
|
|
155
|
+
* {
|
|
156
|
+
@apply border-border;
|
|
157
|
+
}
|
|
158
|
+
body {
|
|
159
|
+
@apply bg-background text-foreground;
|
|
160
|
+
}
|
|
161
|
+
[data-sonner-toaster],
|
|
162
|
+
[data-sonner-toast] {
|
|
163
|
+
font-family:
|
|
164
|
+
ProximaNova,
|
|
165
|
+
-apple-system,
|
|
166
|
+
BlinkMacSystemFont,
|
|
167
|
+
'Segoe UI',
|
|
168
|
+
'Roboto',
|
|
169
|
+
'Oxygen',
|
|
170
|
+
'Ubuntu',
|
|
171
|
+
'Cantarell',
|
|
172
|
+
'Fira Sans',
|
|
173
|
+
'Droid Sans',
|
|
174
|
+
'Helvetica Neue',
|
|
175
|
+
sans-serif !important;
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
@keyframes fadeInOut {
|
|
180
|
+
0% {
|
|
181
|
+
opacity: 0;
|
|
182
|
+
transform: translateY(-10px);
|
|
183
|
+
}
|
|
184
|
+
10% {
|
|
185
|
+
opacity: 1;
|
|
186
|
+
transform: translateY(0);
|
|
187
|
+
}
|
|
188
|
+
90% {
|
|
189
|
+
opacity: 1;
|
|
190
|
+
transform: translateY(0);
|
|
191
|
+
}
|
|
192
|
+
100% {
|
|
193
|
+
opacity: 0;
|
|
194
|
+
transform: translateY(-10px);
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
@layer utilities {
|
|
199
|
+
/* Chrome, Safari and Opera */
|
|
200
|
+
.no-scrollbar::-webkit-scrollbar {
|
|
201
|
+
display: none;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
/* IE and Edge */
|
|
205
|
+
.no-scrollbar {
|
|
206
|
+
-ms-overflow-style: none;
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
/* Firefox */
|
|
210
|
+
.no-scrollbar {
|
|
211
|
+
scrollbar-width: none;
|
|
212
|
+
}
|
|
213
|
+
}
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
import chekinPreset from '@chekinapp/tokens/tailwind-preset';
|
|
2
|
+
import animatePlugin from 'tailwindcss-animate';
|
|
3
|
+
|
|
4
|
+
/** @type {import('tailwindcss').Config} */
|
|
5
|
+
export default {
|
|
6
|
+
presets: [chekinPreset],
|
|
7
|
+
content: ['./node_modules/@chekinapp/ui/dist/**/*.{js,cjs,mjs}'],
|
|
8
|
+
theme: {
|
|
9
|
+
extend: {
|
|
10
|
+
screens: {
|
|
11
|
+
'2md': '53rem',
|
|
12
|
+
'max-2md': {max: '53rem'},
|
|
13
|
+
},
|
|
14
|
+
fontFamily: {
|
|
15
|
+
proxima: ['ProximaNova', 'sans-serif'],
|
|
16
|
+
},
|
|
17
|
+
borderRadius: {
|
|
18
|
+
lg: 'var(--radius)',
|
|
19
|
+
md: 'calc(var(--radius) - 2px)',
|
|
20
|
+
sm: 'calc(var(--radius) - 4px)',
|
|
21
|
+
},
|
|
22
|
+
boxShadow: {
|
|
23
|
+
card: 'var(--chekin-shadow-card, 0px 0px 5px rgba(26, 148, 255, 0.173))',
|
|
24
|
+
neutral20: 'var(--neutral20-shadow)',
|
|
25
|
+
'custom-blue': '0px 10px 10px 0px rgba(33, 72, 255, 0.10)',
|
|
26
|
+
},
|
|
27
|
+
colors: {
|
|
28
|
+
background: 'hsl(var(--background, 0 0% 100%))',
|
|
29
|
+
foreground: 'hsl(var(--foreground, 240 50.6% 17.5%))',
|
|
30
|
+
border: 'hsl(var(--border, 0 0% 89.8%))',
|
|
31
|
+
input: 'hsl(var(--input, 240 19.5% 83.9%))',
|
|
32
|
+
ring: 'hsl(var(--ring, 0 0% 3.9%))',
|
|
33
|
+
accent: {
|
|
34
|
+
DEFAULT: 'hsl(var(--accent, 210 22.2% 96.5%))',
|
|
35
|
+
foreground: 'hsl(var(--accent-foreground, 0 0% 9%))',
|
|
36
|
+
},
|
|
37
|
+
muted: {
|
|
38
|
+
DEFAULT: 'hsl(var(--muted, 0 0% 96.1%))',
|
|
39
|
+
foreground: 'hsl(var(--muted-foreground, 240 17% 50%))',
|
|
40
|
+
},
|
|
41
|
+
card: {
|
|
42
|
+
DEFAULT: 'hsl(var(--card, 0 0% 100%))',
|
|
43
|
+
foreground: 'hsl(var(--card-foreground, 0 0% 3.9%))',
|
|
44
|
+
},
|
|
45
|
+
|
|
46
|
+
'gray-medium': 'var(--icon-gray-medium)',
|
|
47
|
+
'stroke-gray-medium': 'hsl(var(--stroke-gray-medium))',
|
|
48
|
+
'stroke-gray-light': 'hsl(var(--stroke-gray-light))',
|
|
49
|
+
'icon-gray-medium': 'var(--icon-gray-medium)',
|
|
50
|
+
'neutral-light': '#FAFAFA',
|
|
51
|
+
'primary-light': 'var(--background-primary-light)',
|
|
52
|
+
// Inbox Panel Colors
|
|
53
|
+
'inbox-background-white': 'var(--inbox-background-white)',
|
|
54
|
+
'inbox-text-primary': 'var(--inbox-text-primary)',
|
|
55
|
+
'inbox-gray-200': 'var(--inbox-gray-200)',
|
|
56
|
+
'inbox-gray-400': 'var(--inbox-gray-400)',
|
|
57
|
+
'inbox-gray-500': 'var(--inbox-gray-500)',
|
|
58
|
+
'inbox-gray-600': 'var(--inbox-gray-600)',
|
|
59
|
+
'inbox-red-500': 'var(--inbox-red-500)',
|
|
60
|
+
'inbox-hover-background': 'var(--inbox-hover-background)',
|
|
61
|
+
'inbox-hover-background-secondary': 'var(--inbox-hover-background-secondary)',
|
|
62
|
+
'inbox-success-background': 'var(--inbox-success-background)',
|
|
63
|
+
'inbox-success-text': 'var(--inbox-success-text)',
|
|
64
|
+
'inbox-success-border': 'var(--inbox-success-border)',
|
|
65
|
+
'gray-dark': 'var(--text-gray-dark)',
|
|
66
|
+
dark: {
|
|
67
|
+
DEFAULT: 'hsl(var(--navy-dark))',
|
|
68
|
+
foreground: 'hsl(var(--navy-dark-foreground))',
|
|
69
|
+
},
|
|
70
|
+
popover: {
|
|
71
|
+
DEFAULT: 'hsl(var(--popover))',
|
|
72
|
+
foreground: 'hsl(var(--popover-foreground))',
|
|
73
|
+
},
|
|
74
|
+
primary: {
|
|
75
|
+
DEFAULT: 'hsl(var(--primary))',
|
|
76
|
+
foreground: 'hsl(var(--primary-foreground))',
|
|
77
|
+
},
|
|
78
|
+
secondary: {
|
|
79
|
+
DEFAULT: 'hsl(var(--secondary))',
|
|
80
|
+
foreground: 'hsl(var(--secondary-foreground))',
|
|
81
|
+
},
|
|
82
|
+
destructive: {
|
|
83
|
+
DEFAULT: 'hsl(var(--destructive))',
|
|
84
|
+
foreground: 'hsl(var(--destructive-foreground))',
|
|
85
|
+
},
|
|
86
|
+
chart: {
|
|
87
|
+
1: 'hsl(var(--chart-1))',
|
|
88
|
+
2: 'hsl(var(--chart-2))',
|
|
89
|
+
3: 'hsl(var(--chart-3))',
|
|
90
|
+
4: 'hsl(var(--chart-4))',
|
|
91
|
+
5: 'hsl(var(--chart-5))',
|
|
92
|
+
},
|
|
93
|
+
},
|
|
94
|
+
keyframes: {
|
|
95
|
+
'accordion-down': {
|
|
96
|
+
from: {height: '0px', opacity: '0'},
|
|
97
|
+
to: {height: 'var(--radix-accordion-content-height)', opacity: '1'},
|
|
98
|
+
},
|
|
99
|
+
'accordion-up': {
|
|
100
|
+
from: {height: 'var(--radix-accordion-content-height)', opacity: '1'},
|
|
101
|
+
to: {height: '0px', opacity: '0'},
|
|
102
|
+
},
|
|
103
|
+
},
|
|
104
|
+
animation: {
|
|
105
|
+
'accordion-down': 'accordion-down 0.2s ease-out',
|
|
106
|
+
'accordion-up': 'accordion-up 0.2s ease-in',
|
|
107
|
+
},
|
|
108
|
+
},
|
|
109
|
+
},
|
|
110
|
+
plugins: [animatePlugin],
|
|
111
|
+
};
|