@clasing/ui 0.0.42 → 0.0.44

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 (6) hide show
  1. package/dist/index.d.ts +4 -2
  2. package/dist/index.es.js +604 -397
  3. package/dist/index.umd.js +9 -9
  4. package/dist/style.css +1 -1
  5. package/package.json +2 -1
  6. package/tailwind.config.js +82 -3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@clasing/ui",
3
- "version": "0.0.42",
3
+ "version": "0.0.44",
4
4
  "type": "module",
5
5
  "main": "./dist/index.umd.js",
6
6
  "module": "./dist/index.es.js",
@@ -35,6 +35,7 @@
35
35
  "@tabler/icons-react": "^3.3.0",
36
36
  "class-variance-authority": "^0.7.0",
37
37
  "clsx": "^2.1.1",
38
+ "framer-motion": "^11.2.5",
38
39
  "react": "^18.2.0",
39
40
  "react-dom": "^18.2.0",
40
41
  "tailwind-merge": "^2.3.0"
package/tailwind.config.js CHANGED
@@ -61,6 +61,12 @@ module.exports = {
61
61
  colors: {
62
62
  button: {
63
63
  primary: {
64
+ border: {
65
+ enabled: 'transparent',
66
+ hover: 'transparent',
67
+ pressed: 'transparent',
68
+ disabled: 'transparent',
69
+ },
64
70
  background: {
65
71
  enabled: 'var(--color-brand-500)',
66
72
  hover: 'var(--color-brand-700)',
@@ -75,6 +81,12 @@ module.exports = {
75
81
  },
76
82
  },
77
83
  secondary: {
84
+ border: {
85
+ enabled: 'transparent',
86
+ hover: 'transparent',
87
+ pressed: 'transparent',
88
+ disabled: 'transparent',
89
+ },
78
90
  background: {
79
91
  enabled: 'var(--color-blue-500)',
80
92
  hover: 'var(--color-blue-700)',
@@ -89,6 +101,12 @@ module.exports = {
89
101
  },
90
102
  },
91
103
  tertiary: {
104
+ border: {
105
+ enabled: 'transparent',
106
+ hover: 'transparent',
107
+ pressed: 'transparent',
108
+ disabled: 'transparent',
109
+ },
92
110
  background: {
93
111
  enabled: 'var(--color-neutral-900)',
94
112
  hover: 'var(--color-neutral-700)',
@@ -103,6 +121,12 @@ module.exports = {
103
121
  },
104
122
  },
105
123
  ghost: {
124
+ border: {
125
+ enabled: 'transparent',
126
+ hover: 'transparent',
127
+ pressed: 'transparent',
128
+ disabled: 'transparent',
129
+ },
106
130
  background: {
107
131
  enabled: 'transparent',
108
132
  hover: 'var(--color-neutral-300)',
@@ -129,7 +153,7 @@ module.exports = {
129
153
  pressed: 'var(--color-neutral-000)',
130
154
  disabled: 'var(--color-neutral-500)',
131
155
  },
132
- outline: {
156
+ border: {
133
157
  enabled: 'var(--color-neutral-500)',
134
158
  hover: 'transparent',
135
159
  pressed: 'transparent',
@@ -137,6 +161,12 @@ module.exports = {
137
161
  },
138
162
  },
139
163
  destructive: {
164
+ border: {
165
+ enabled: 'transparent',
166
+ hover: 'transparent',
167
+ pressed: 'transparent',
168
+ disabled: 'transparent',
169
+ },
140
170
  background: {
141
171
  enabled: 'var(--color-brand-200)',
142
172
  hover: 'var(--color-brand-300)',
@@ -150,8 +180,28 @@ module.exports = {
150
180
  disabled: 'var(--color-neutral-500)',
151
181
  },
152
182
  },
183
+ link: {
184
+ content: {
185
+ enabled: 'var(--color-blue-500)',
186
+ hover: 'var(--color-blue-700)',
187
+ pressed: 'var(--color-blue-900)',
188
+ disabled: 'var(--color-neutral-500)',
189
+ },
190
+ border: {
191
+ enabled: 'transparent',
192
+ hover: 'var(--color-blue-700)',
193
+ pressed: 'var(--color-blue-900)',
194
+ disabled: 'transparent',
195
+ },
196
+ },
153
197
  icon: {
154
198
  fill: {
199
+ border: {
200
+ enabled: 'transparent',
201
+ hover: 'transparent',
202
+ pressed: 'transparent',
203
+ disabled: 'transparent',
204
+ },
155
205
  bg: {
156
206
  enabled: 'var(--color-brand-500)',
157
207
  hover: 'var(--color-brand-700)',
@@ -166,7 +216,7 @@ module.exports = {
166
216
  },
167
217
  },
168
218
  outline: {
169
- outline: {
219
+ border: {
170
220
  enabled: 'var(--color-neutral-500)',
171
221
  hover: 'transparent',
172
222
  pressed: 'transparent',
@@ -185,6 +235,26 @@ module.exports = {
185
235
  disabled: 'var(--color-neutral-500)',
186
236
  },
187
237
  },
238
+ ghost: {
239
+ border: {
240
+ enabled: 'transparent',
241
+ hover: 'transparent',
242
+ pressed: 'transparent',
243
+ disabled: 'transparent',
244
+ },
245
+ bg: {
246
+ enabled: 'transparent',
247
+ hover: 'var(--color-neutral-300)',
248
+ pressed: 'var(--color-neutral-900)',
249
+ disabled: 'transparent',
250
+ },
251
+ content: {
252
+ enabled: 'var(--color-neutral-900)',
253
+ hover: 'var(--color-neutral-900)',
254
+ pressed: 'var(--color-neutral-000)',
255
+ disabled: 'var(--color-neutral-500)',
256
+ },
257
+ },
188
258
  },
189
259
  },
190
260
  content: {
@@ -402,13 +472,22 @@ module.exports = {
402
472
  '4xl': '32px',
403
473
  full: '9999px',
404
474
  },
405
- outlineWidth: {
475
+ borderWidth: {
406
476
  none: '0',
407
477
  xs: '0.5px',
408
478
  sm: '1px',
409
479
  md: '2px',
410
480
  lg: '4px',
411
481
  },
482
+ boxShadow: {
483
+ xs: '0px 1px 2px 0px rgba(16, 24, 40, 0.04), 0px 1px 2px 0px rgba(16, 24, 40, 0.04)',
484
+ sm: '0px 2px 6px 0px rgba(16, 24, 40, 0.06)',
485
+ md: '0px 6px 15px -2px rgba(16, 24, 40, 0.08), 0px 6px 15px -2px rgba(16, 24, 40, 0.08)',
486
+ lg: '0px 8px 24px -3px rgba(16, 24, 40, 0.05), 0px 8px 24px -3px rgba(16, 24, 40, 0.10)',
487
+ xl: '0px 20px 40px -8px rgba(16, 24, 40, 0.05), 0px 20px 40px -8px rgba(16, 24, 40, 0.10)',
488
+ '2xl':
489
+ '0px 25px 60px -15px rgba(16, 24, 40, 0.12), 0px 25px 60px -15px rgba(16, 24, 40, 0.20)',
490
+ },
412
491
  extend: {
413
492
  padding: {
414
493
  'button-sm': '10px 24px',