@lessly/ui 0.2.0

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.
@@ -0,0 +1,430 @@
1
+ // src/tailwind-preset.ts
2
+ var lesslyPreset = {
3
+ darkMode: "class",
4
+ theme: {
5
+ screens: {
6
+ "sm": "640px",
7
+ "md": "768px",
8
+ "lg": "1024px",
9
+ "xl": "1280px",
10
+ "2xl": "1536px"
11
+ },
12
+ spacing: {
13
+ "0": "0px",
14
+ "1": "4px",
15
+ "2": "8px",
16
+ "3": "12px",
17
+ "4": "16px",
18
+ "5": "20px",
19
+ "6": "24px",
20
+ "7": "28px",
21
+ "8": "32px",
22
+ "9": "36px",
23
+ "10": "40px",
24
+ "12": "48px",
25
+ "14": "56px",
26
+ "16": "64px",
27
+ "20": "80px",
28
+ "24": "96px",
29
+ "28": "112px",
30
+ "32": "128px",
31
+ "40": "160px",
32
+ "48": "192px",
33
+ "56": "224px",
34
+ "64": "256px",
35
+ "80": "320px",
36
+ "96": "384px",
37
+ "0.5": "2px",
38
+ "1.5": "6px",
39
+ "2.5": "10px"
40
+ },
41
+ borderRadius: {
42
+ "none": "0",
43
+ "xs": "2px",
44
+ "sm": "4px",
45
+ "md": "6px",
46
+ "lg": "8px",
47
+ "xl": "12px",
48
+ "2xl": "16px",
49
+ "full": "9999px"
50
+ },
51
+ borderWidth: {
52
+ "none": "0",
53
+ "thin": "1px",
54
+ "medium": "1.5px",
55
+ "thick": "2px",
56
+ "heavy": "3px"
57
+ },
58
+ fontFamily: {
59
+ "sans": '"Inter", system-ui, -apple-system, sans-serif',
60
+ "serif": '"Instrument Serif", Georgia, "Times New Roman", serif',
61
+ "mono": '"Fira Mono", "Fira Code", "Cascadia Code", monospace'
62
+ },
63
+ fontSize: {
64
+ "xs": [
65
+ "0.6875rem",
66
+ {
67
+ "lineHeight": "1.5",
68
+ "letterSpacing": "0.02em"
69
+ }
70
+ ],
71
+ "sm": [
72
+ "0.8125rem",
73
+ {
74
+ "lineHeight": "1.5",
75
+ "letterSpacing": "0.01em"
76
+ }
77
+ ],
78
+ "base": [
79
+ "1.0rem",
80
+ {
81
+ "lineHeight": "1.5",
82
+ "letterSpacing": "0"
83
+ }
84
+ ],
85
+ "lg": [
86
+ "1.1875rem",
87
+ {
88
+ "lineHeight": "1.4",
89
+ "letterSpacing": "-0.005em"
90
+ }
91
+ ],
92
+ "xl": [
93
+ "1.4375rem",
94
+ {
95
+ "lineHeight": "1.35",
96
+ "letterSpacing": "-0.01em"
97
+ }
98
+ ],
99
+ "2xl": [
100
+ "1.75rem",
101
+ {
102
+ "lineHeight": "1.3",
103
+ "letterSpacing": "-0.015em"
104
+ }
105
+ ],
106
+ "3xl": [
107
+ "2.0625rem",
108
+ {
109
+ "lineHeight": "1.25",
110
+ "letterSpacing": "-0.02em"
111
+ }
112
+ ],
113
+ "4xl": [
114
+ "2.5rem",
115
+ {
116
+ "lineHeight": "1.2",
117
+ "letterSpacing": "-0.025em"
118
+ }
119
+ ],
120
+ "5xl": [
121
+ "3.0rem",
122
+ {
123
+ "lineHeight": "1.15",
124
+ "letterSpacing": "-0.03em"
125
+ }
126
+ ],
127
+ "display": [
128
+ "3.5625rem",
129
+ {
130
+ "lineHeight": "1.1",
131
+ "letterSpacing": "-0.035em"
132
+ }
133
+ ]
134
+ },
135
+ fontWeight: {
136
+ "regular": "400",
137
+ "medium": "500",
138
+ "semibold": "600",
139
+ "bold": "700",
140
+ "extrabold": "800"
141
+ },
142
+ zIndex: {
143
+ "base": "0",
144
+ "raised": "10",
145
+ "dropdown": "100",
146
+ "sticky": "200",
147
+ "overlay": "300",
148
+ "modal": "400",
149
+ "toast": "500",
150
+ "tooltip": "600",
151
+ "max": "9999"
152
+ },
153
+ opacity: {
154
+ "0": "0",
155
+ "5": "0.05",
156
+ "10": "0.10",
157
+ "20": "0.20",
158
+ "40": "0.40",
159
+ "60": "0.60",
160
+ "80": "0.80",
161
+ "100": "1"
162
+ },
163
+ boxShadow: {
164
+ "sm": "0 1px 2px rgba(0,0,0,0.4)",
165
+ "md": "0 2px 8px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4)",
166
+ "lg": "0 8px 24px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.4)",
167
+ "xl": "0 16px 48px rgba(0,0,0,0.7), 0 4px 12px rgba(0,0,0,0.5)",
168
+ "inner": "inset 0 1px 3px rgba(0,0,0,0.4)",
169
+ "glow-brand": "0 0 12px rgba(6,41,125,0.5)"
170
+ },
171
+ transitionDuration: {
172
+ "instant": "0ms",
173
+ "fast": "100ms",
174
+ "normal": "200ms",
175
+ "slow": "300ms",
176
+ "slower": "500ms",
177
+ "slowest": "800ms"
178
+ },
179
+ transitionTimingFunction: {
180
+ "default": "cubic-bezier(0.25, 0.1, 0.25, 1)",
181
+ "in": "cubic-bezier(0.42, 0, 1, 1)",
182
+ "out": "cubic-bezier(0, 0, 0.58, 1)",
183
+ "in-out": "cubic-bezier(0.42, 0, 0.58, 1)",
184
+ "spring": "cubic-bezier(0.34, 1.56, 0.64, 1)",
185
+ "linear": "cubic-bezier(0, 0, 1, 1)"
186
+ },
187
+ extend: {
188
+ colors: {
189
+ ...{
190
+ "blue": {
191
+ "50": "#f4f6f9",
192
+ "100": "#eaeef4",
193
+ "150": "#dae0eb",
194
+ "200": "#becce9",
195
+ "250": "#a3b7e0",
196
+ "300": "#6394f6",
197
+ "350": "#3d7af4",
198
+ "400": "#165ff2",
199
+ "450": "#0b4cd5",
200
+ "500": "#0940b8",
201
+ "550": "#08349b",
202
+ "600": "#06297d",
203
+ "650": "#05226a",
204
+ "700": "#0e204c",
205
+ "750": "#0c1a40",
206
+ "800": "#091533",
207
+ "850": "#0a1123",
208
+ "900": "#080d1b",
209
+ "950": "#04070f"
210
+ },
211
+ "teal": {
212
+ "50": "#f5f9f8",
213
+ "100": "#ebf3f2",
214
+ "150": "#dbeae8",
215
+ "200": "#c1e5e0",
216
+ "250": "#a8dbd4",
217
+ "300": "#70eada",
218
+ "350": "#4ce5d1",
219
+ "400": "#28e0c7",
220
+ "450": "#1cc4ae",
221
+ "500": "#18a997",
222
+ "550": "#148e80",
223
+ "600": "#107469",
224
+ "650": "#0e6259",
225
+ "700": "#144742",
226
+ "750": "#103b37",
227
+ "800": "#0d2f2c",
228
+ "850": "#0c211f",
229
+ "900": "#091918",
230
+ "950": "#050e0d"
231
+ },
232
+ "violet": {
233
+ "50": "#f7f5f9",
234
+ "100": "#efebf3",
235
+ "150": "#e2dbea",
236
+ "200": "#d3c0e6",
237
+ "250": "#c1a6dc",
238
+ "300": "#ad6cee",
239
+ "350": "#9847ea",
240
+ "400": "#8422e6",
241
+ "450": "#7116c9",
242
+ "500": "#6313ae",
243
+ "550": "#541092",
244
+ "600": "#450d77",
245
+ "650": "#3b0b64",
246
+ "700": "#301249",
247
+ "750": "#280f3d",
248
+ "800": "#200c30",
249
+ "850": "#180b21",
250
+ "900": "#12091a",
251
+ "950": "#0a050f"
252
+ },
253
+ "rose": {
254
+ "50": "#f9f5f6",
255
+ "100": "#f4ebed",
256
+ "150": "#ebdade",
257
+ "200": "#e7c0c7",
258
+ "250": "#dda6b1",
259
+ "300": "#f06a85",
260
+ "350": "#ec4566",
261
+ "400": "#e82048",
262
+ "450": "#cc1437",
263
+ "500": "#b0112f",
264
+ "550": "#940e27",
265
+ "600": "#780b1f",
266
+ "650": "#660a19",
267
+ "700": "#4a111b",
268
+ "750": "#3d0e16",
269
+ "800": "#310b11",
270
+ "850": "#220b0f",
271
+ "900": "#1a090b",
272
+ "950": "#0f0506"
273
+ },
274
+ "green": {
275
+ "50": "#f5f9f7",
276
+ "100": "#ebf3ef",
277
+ "150": "#dce9e1",
278
+ "200": "#c2e4d0",
279
+ "250": "#aad9bd",
280
+ "300": "#74e6a3",
281
+ "350": "#51e08d",
282
+ "400": "#2eda76",
283
+ "450": "#21be63",
284
+ "500": "#1da456",
285
+ "550": "#188a49",
286
+ "600": "#13703c",
287
+ "650": "#105f33",
288
+ "700": "#15452a",
289
+ "750": "#123a23",
290
+ "800": "#0e2e1c",
291
+ "850": "#0d2015",
292
+ "900": "#0a1911",
293
+ "950": "#050e09"
294
+ },
295
+ "amber": {
296
+ "50": "#f9f7f5",
297
+ "100": "#f4f0eb",
298
+ "150": "#ebe5da",
299
+ "200": "#e7d9bf",
300
+ "250": "#dec9a5",
301
+ "300": "#f2bf68",
302
+ "350": "#efb042",
303
+ "400": "#eca01c",
304
+ "450": "#cf8a10",
305
+ "500": "#b3780e",
306
+ "550": "#96660c",
307
+ "600": "#7a5409",
308
+ "650": "#674708",
309
+ "700": "#4b3710",
310
+ "750": "#3e2e0d",
311
+ "800": "#32250b",
312
+ "850": "#221b0b",
313
+ "900": "#1a1508",
314
+ "950": "#0f0c04"
315
+ },
316
+ "red": {
317
+ "50": "#f9f5f5",
318
+ "100": "#f4ebeb",
319
+ "150": "#ebdada",
320
+ "200": "#e7c0c0",
321
+ "250": "#dda6a6",
322
+ "300": "#f06a6a",
323
+ "350": "#ec4545",
324
+ "400": "#e82020",
325
+ "450": "#cc1614",
326
+ "500": "#b01411",
327
+ "550": "#94120e",
328
+ "600": "#78100b",
329
+ "650": "#660e0a",
330
+ "700": "#4a1411",
331
+ "750": "#3d110e",
332
+ "800": "#310e0b",
333
+ "850": "#220d0b",
334
+ "900": "#1a0a09",
335
+ "950": "#0f0505"
336
+ },
337
+ "neutral": {
338
+ "50": "#f6f7f7",
339
+ "100": "#eeeff0",
340
+ "150": "#e1e2e4",
341
+ "200": "#cfd1d7",
342
+ "250": "#bbbec7",
343
+ "300": "#a5a9b5",
344
+ "350": "#8a91a7",
345
+ "400": "#737c95",
346
+ "450": "#60687f",
347
+ "500": "#535a6e",
348
+ "550": "#464b5d",
349
+ "600": "#393d4b",
350
+ "650": "#30343f",
351
+ "700": "#252936",
352
+ "750": "#1f222d",
353
+ "800": "#191b24",
354
+ "850": "#12141b",
355
+ "900": "#0e1015",
356
+ "950": "#08090c"
357
+ }
358
+ },
359
+ "bg-primary": "var(--color-bg-primary)",
360
+ "bg-secondary": "var(--color-bg-secondary)",
361
+ "bg-surface": "var(--color-bg-surface)",
362
+ "bg-elevated": "var(--color-bg-elevated)",
363
+ "bg-sunken": "var(--color-bg-sunken)",
364
+ "bg-brand": "var(--color-bg-brand)",
365
+ "bg-brand-subtle": "var(--color-bg-brand-subtle)",
366
+ "bg-brand-bright": "var(--color-bg-brand-bright)",
367
+ "bg-brand-hover": "var(--color-bg-brand-hover)",
368
+ "bg-success": "var(--color-bg-success)",
369
+ "bg-success-subtle": "var(--color-bg-success-subtle)",
370
+ "bg-warning": "var(--color-bg-warning)",
371
+ "bg-warning-subtle": "var(--color-bg-warning-subtle)",
372
+ "bg-danger": "var(--color-bg-danger)",
373
+ "bg-danger-subtle": "var(--color-bg-danger-subtle)",
374
+ "bg-teal-subtle": "var(--color-bg-teal-subtle)",
375
+ "bg-violet-subtle": "var(--color-bg-violet-subtle)",
376
+ "bg-rose-subtle": "var(--color-bg-rose-subtle)",
377
+ "text-primary": "var(--color-text-primary)",
378
+ "text-secondary": "var(--color-text-secondary)",
379
+ "text-tertiary": "var(--color-text-tertiary)",
380
+ "text-disabled": "var(--color-text-disabled)",
381
+ "text-inverse": "var(--color-text-inverse)",
382
+ "text-on-brand": "var(--color-text-on-brand)",
383
+ "text-on-success": "var(--color-text-on-success)",
384
+ "text-on-warning": "var(--color-text-on-warning)",
385
+ "text-on-danger": "var(--color-text-on-danger)",
386
+ "text-brand": "var(--color-text-brand)",
387
+ "text-success": "var(--color-text-success)",
388
+ "text-warning": "var(--color-text-warning)",
389
+ "text-danger": "var(--color-text-danger)",
390
+ "text-link": "var(--color-text-link)",
391
+ "text-link-hover": "var(--color-text-link-hover)",
392
+ "icon-primary": "var(--color-icon-primary)",
393
+ "icon-secondary": "var(--color-icon-secondary)",
394
+ "icon-disabled": "var(--color-icon-disabled)",
395
+ "icon-brand": "var(--color-icon-brand)",
396
+ "icon-success": "var(--color-icon-success)",
397
+ "icon-warning": "var(--color-icon-warning)",
398
+ "icon-danger": "var(--color-icon-danger)",
399
+ "border-subtle": "var(--color-border-subtle)",
400
+ "border-default": "var(--color-border-default)",
401
+ "border-strong": "var(--color-border-strong)",
402
+ "border-brand": "var(--color-border-brand)",
403
+ "border-focus": "var(--color-border-focus)",
404
+ "border-success": "var(--color-border-success)",
405
+ "border-warning": "var(--color-border-warning)",
406
+ "border-danger": "var(--color-border-danger)"
407
+ },
408
+ size: {
409
+ "4": "16px",
410
+ "5": "20px",
411
+ "6": "24px",
412
+ "8": "32px",
413
+ "9": "36px",
414
+ "10": "40px",
415
+ "11": "44px",
416
+ "12": "48px",
417
+ "14": "56px",
418
+ "16": "64px",
419
+ "20": "80px",
420
+ "60": "240px",
421
+ "72": "288px"
422
+ }
423
+ }
424
+ }
425
+ };
426
+ var tailwind_preset_default = lesslyPreset;
427
+ export {
428
+ tailwind_preset_default as default,
429
+ lesslyPreset
430
+ };
package/package.json ADDED
@@ -0,0 +1,116 @@
1
+ {
2
+ "name": "@lessly/ui",
3
+ "version": "0.2.0",
4
+ "description": "Lessly design system — shared UI primitives, tokens, and theme",
5
+ "type": "module",
6
+ "main": "./dist/index.js",
7
+ "module": "./dist/index.js",
8
+ "types": "./dist/index.d.ts",
9
+ "sideEffects": [
10
+ "*.css"
11
+ ],
12
+ "exports": {
13
+ ".": {
14
+ "types": "./dist/index.d.ts",
15
+ "default": "./dist/index.js"
16
+ },
17
+ "./tailwind-preset": {
18
+ "types": "./dist/tailwind-preset.d.ts",
19
+ "default": "./dist/tailwind-preset.js"
20
+ },
21
+ "./styles.css": "./dist/styles.css"
22
+ },
23
+ "files": [
24
+ "dist"
25
+ ],
26
+ "engines": {
27
+ "node": ">=20"
28
+ },
29
+ "publishConfig": {
30
+ "registry": "https://registry.npmjs.org/",
31
+ "access": "public"
32
+ },
33
+ "peerDependencies": {
34
+ "react": "^19.0.0",
35
+ "react-dom": "^19.0.0",
36
+ "react-router": "^7.0.0"
37
+ },
38
+ "dependencies": {
39
+ "@radix-ui/react-accordion": "^1.2.16",
40
+ "@radix-ui/react-alert-dialog": "^1.1.19",
41
+ "@radix-ui/react-aspect-ratio": "^1.1.11",
42
+ "@radix-ui/react-avatar": "^1.2.2",
43
+ "@radix-ui/react-checkbox": "^1.3.7",
44
+ "@radix-ui/react-collapsible": "^1.1.16",
45
+ "@radix-ui/react-context-menu": "^2.3.3",
46
+ "@radix-ui/react-dialog": "^1.1.14",
47
+ "@radix-ui/react-dropdown-menu": "^2.1.16",
48
+ "@radix-ui/react-hover-card": "^1.1.19",
49
+ "@radix-ui/react-label": "^2.1.8",
50
+ "@radix-ui/react-menubar": "^1.1.20",
51
+ "@radix-ui/react-navigation-menu": "^1.2.18",
52
+ "@radix-ui/react-popover": "^1.1.19",
53
+ "@radix-ui/react-progress": "^1.1.12",
54
+ "@radix-ui/react-radio-group": "^1.4.3",
55
+ "@radix-ui/react-scroll-area": "^1.2.14",
56
+ "@radix-ui/react-separator": "^1.1.11",
57
+ "@radix-ui/react-slider": "^1.4.3",
58
+ "@radix-ui/react-slot": "^1.2.4",
59
+ "@radix-ui/react-tabs": "^1.1.17",
60
+ "@radix-ui/react-toggle": "^1.1.14",
61
+ "@radix-ui/react-toggle-group": "^1.1.15",
62
+ "@radix-ui/react-tooltip": "^1.2.12",
63
+ "class-variance-authority": "^0.7.1",
64
+ "clsx": "^2.1.1",
65
+ "cmdk": "^1.1.1",
66
+ "embla-carousel-react": "^8.6.0",
67
+ "input-otp": "^1.4.2",
68
+ "lucide-react": "^0.577.0",
69
+ "react-day-picker": "^10.0.1",
70
+ "react-hook-form": "^7.81.0",
71
+ "sonner": "^2.0.7",
72
+ "tailwind-merge": "^3.5.0",
73
+ "vaul": "^1.1.2"
74
+ },
75
+ "devDependencies": {
76
+ "@changesets/cli": "^2.31.0",
77
+ "@eslint/js": "^9.39.5",
78
+ "@storybook/addon-essentials": "^8.6.14",
79
+ "@storybook/react": "^8.6.18",
80
+ "@storybook/react-vite": "^8.6.18",
81
+ "@tailwindcss/cli": "^4",
82
+ "@tailwindcss/vite": "^4.3.2",
83
+ "@testing-library/jest-dom": "^6.6.3",
84
+ "@testing-library/react": "^16.2.0",
85
+ "@types/node": "^24.13.3",
86
+ "@types/react": "^19.0.8",
87
+ "@types/react-dom": "^19.0.3",
88
+ "@vitejs/plugin-react": "^4.7.0",
89
+ "eslint": "^9.39.5",
90
+ "eslint-plugin-react-hooks": "^5.2.0",
91
+ "globals": "^15.15.0",
92
+ "jsdom": "^26.0.0",
93
+ "react": "^19.0.0",
94
+ "react-dom": "^19.0.0",
95
+ "react-router": "^7.18.1",
96
+ "storybook": "^8.6.18",
97
+ "tailwindcss": "^4",
98
+ "tsup": "^8.0.0",
99
+ "tw-animate-css": "^1.4.0",
100
+ "typescript": "^5.0.0",
101
+ "typescript-eslint": "^8.63.0",
102
+ "vite": "^5.4.21",
103
+ "vitest": "^3.0.5"
104
+ },
105
+ "scripts": {
106
+ "build": "tsup && node scripts/build-styles.mjs",
107
+ "test": "vitest run",
108
+ "type-check": "tsc --noEmit",
109
+ "lint": "eslint .",
110
+ "storybook": "storybook dev -p 6006 --no-open",
111
+ "build-storybook": "storybook build",
112
+ "changeset": "changeset",
113
+ "release:version": "changeset version",
114
+ "release:tag": "changeset tag"
115
+ }
116
+ }