@popgrids/ui 0.0.6 → 0.0.7

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 (3) hide show
  1. package/README.md +1 -0
  2. package/dist/theme.css +162 -76
  3. package/package.json +1 -1
package/README.md CHANGED
@@ -22,6 +22,7 @@ This library requires the following peer dependencies:
22
22
  - `react-dom` ^19.0.0
23
23
  - `@base-ui/react` ^1.0.0
24
24
  - `tailwindcss` ^4.0.0
25
+ - `shadcn` ^3.6.2
25
26
 
26
27
  ## Requirements
27
28
 
package/dist/theme.css CHANGED
@@ -10,83 +10,71 @@
10
10
 
11
11
  :root {
12
12
  --radius: 0.625rem;
13
- --background: var(--background, oklch(1 0 0));
14
- --foreground: var(--foreground, oklch(0 0 0));
15
- --card: var(--card, oklch(1 0 0));
16
- --card-foreground: var(--card-foreground, oklch(0.145 0 0));
17
- --popover: var(--popover, oklch(1 0 0));
18
- --popover-foreground: var(--popover-foreground, oklch(0 0 0));
19
- --primary: var(--primary, oklch(0.205 0 0));
20
- --primary-foreground: var(--primary-foreground, oklch(0.985 0 0));
21
- --secondary: var(--secondary, oklch(0.97 0 0));
22
- --secondary-foreground: var(--secondary-foreground, oklch(0.205 0 0));
23
- --muted: var(--muted, oklch(0.97 0 0));
24
- --muted-foreground: var(--muted-foreground, oklch(0.48 0.007 255.43));
25
- --accent: var(--accent, oklch(0.97 0 0));
26
- --accent-foreground: var(--accent-foreground, oklch(0.205 0 0));
27
- --destructive: var(--destructive, oklch(0.577 0.245 27.325));
28
- --border: var(--border, oklch(0.1101 0.0763 264.05 / 10.2%));
29
- --input: var(--input, oklch(0.922 0 0));
30
- --ring: var(--ring, oklch(0.5367 0.2286 262.17));
31
- --chart-1: var(--chart-1, oklch(0.646 0.222 41.116));
32
- --chart-2: var(--chart-2, oklch(0.6 0.118 184.704));
33
- --chart-3: var(--chart-3, oklch(0.398 0.07 227.392));
34
- --chart-4: var(--chart-4, oklch(0.828 0.189 84.429));
35
- --chart-5: var(--chart-5, oklch(0.769 0.188 70.08));
36
- --sidebar: var(--sidebar, oklch(0.985 0 0));
37
- --sidebar-foreground: var(--sidebar-foreground, oklch(0.145 0 0));
38
- --sidebar-primary: var(--sidebar-primary, oklch(0.205 0 0));
39
- --sidebar-primary-foreground: var(
40
- --sidebar-primary-foreground,
41
- oklch(0.985 0 0)
42
- );
43
- --sidebar-accent: var(--sidebar-accent, oklch(0.97 0 0));
44
- --sidebar-accent-foreground: var(
45
- --sidebar-accent-foreground,
46
- oklch(0.205 0 0)
47
- );
48
- --sidebar-border: var(--sidebar-border, oklch(0.922 0 0));
49
- --sidebar-ring: var(--sidebar-ring, oklch(0.708 0 0));
13
+ --background: oklch(1 0 0);
14
+ --foreground: oklch(0 0 0);
15
+ --card: oklch(1 0 0);
16
+ --card-foreground: oklch(0.145 0 0);
17
+ --popover: oklch(1 0 0);
18
+ --popover-foreground: oklch(0 0 0);
19
+ --primary: oklch(0.205 0 0);
20
+ --primary-foreground: oklch(0.985 0 0);
21
+ --secondary: oklch(0.97 0 0);
22
+ --secondary-foreground: oklch(0.205 0 0);
23
+ --muted: oklch(0.97 0 0);
24
+ --muted-foreground: oklch(0.48 0.007 255.43);
25
+ --accent: oklch(0.97 0 0);
26
+ --accent-foreground: oklch(0.205 0 0);
27
+ --destructive: oklch(0.577 0.245 27.325);
28
+ --border: oklch(0.1101 0.0763 264.05 / 10.2%);
29
+ --input: oklch(0.922 0 0);
30
+ --ring: oklch(0.5367 0.2286 262.17);
31
+ --chart-1: oklch(0.646 0.222 41.116);
32
+ --chart-2: oklch(0.6 0.118 184.704);
33
+ --chart-3: oklch(0.398 0.07 227.392);
34
+ --chart-4: oklch(0.828 0.189 84.429);
35
+ --chart-5: oklch(0.769 0.188 70.08);
36
+ --sidebar: oklch(0.985 0 0);
37
+ --sidebar-foreground: oklch(0.145 0 0);
38
+ --sidebar-primary: oklch(0.205 0 0);
39
+ --sidebar-primary-foreground: oklch(0.985 0 0);
40
+ --sidebar-accent: oklch(0.97 0 0);
41
+ --sidebar-accent-foreground: oklch(0.205 0 0);
42
+ --sidebar-border: oklch(0.922 0 0);
43
+ --sidebar-ring: oklch(0.708 0 0);
50
44
  }
51
45
 
52
46
  .dark {
53
- --background: var(--background, oklch(0.15 0.03 255.43));
54
- --foreground: var(--foreground, oklch(0.66 0.006 255.43));
55
- --card: var(--card, oklch(0.205 0 0));
56
- --card-foreground: var(--card-foreground, oklch(0.985 0 0));
57
- --popover: var(--popover, oklch(0.15 0.03 255.43));
58
- --popover-foreground: var(--popover-foreground, oklch(0.66 0.006 255.43));
59
- --primary: var(--primary, oklch(0.922 0 0));
60
- --primary-foreground: var(--primary-foreground, oklch(0.205 0 0));
61
- --secondary: var(--secondary, oklch(0.269 0 0));
62
- --secondary-foreground: var(--secondary-foreground, oklch(0.985 0 0));
63
- --muted: var(--muted, oklch(0.269 0 0));
64
- --muted-foreground: var(--muted-foreground, oklch(0.66 0.006 255.43));
65
- --accent: var(--accent, oklch(0.269 0 0));
66
- --accent-foreground: var(--accent-foreground, oklch(0.985 0 0));
67
- --destructive: var(--destructive, oklch(0.704 0.191 22.216));
68
- --border: var(--border, oklch(1 0 0 / 10%));
69
- --input: var(--input, oklch(1 0 0 / 15%));
70
- --ring: var(--ring, oklch(0.5367 0.2286 262.17));
71
- --chart-1: var(--chart-1, oklch(0.488 0.243 264.376));
72
- --chart-2: var(--chart-2, oklch(0.696 0.17 162.48));
73
- --chart-3: var(--chart-3, oklch(0.769 0.188 70.08));
74
- --chart-4: var(--chart-4, oklch(0.627 0.265 303.9));
75
- --chart-5: var(--chart-5, oklch(0.645 0.246 16.439));
76
- --sidebar: var(--sidebar, oklch(0.205 0 0));
77
- --sidebar-foreground: var(--sidebar-foreground, oklch(0.985 0 0));
78
- --sidebar-primary: var(--sidebar-primary, oklch(0.488 0.243 264.376));
79
- --sidebar-primary-foreground: var(
80
- --sidebar-primary-foreground,
81
- oklch(0.985 0 0)
82
- );
83
- --sidebar-accent: var(--sidebar-accent, oklch(0.269 0 0));
84
- --sidebar-accent-foreground: var(
85
- --sidebar-accent-foreground,
86
- oklch(0.985 0 0)
87
- );
88
- --sidebar-border: var(--sidebar-border, oklch(1 0 0 / 10%));
89
- --sidebar-ring: var(--sidebar-ring, oklch(0.556 0 0));
47
+ --background: oklch(0.15 0.03 255.43);
48
+ --foreground: oklch(0.66 0.006 255.43);
49
+ --card: oklch(0.205 0 0);
50
+ --card-foreground: oklch(0.985 0 0);
51
+ --popover: oklch(0.15 0.03 255.43);
52
+ --popover-foreground: oklch(0.66 0.006 255.43);
53
+ --primary: oklch(0.922 0 0);
54
+ --primary-foreground: oklch(0.205 0 0);
55
+ --secondary: oklch(0.269 0 0);
56
+ --secondary-foreground: oklch(0.985 0 0);
57
+ --muted: oklch(0.269 0 0);
58
+ --muted-foreground: oklch(0.66 0.006 255.43);
59
+ --accent: oklch(0.269 0 0);
60
+ --accent-foreground: oklch(0.985 0 0);
61
+ --destructive: oklch(0.704 0.191 22.216);
62
+ --border: oklch(1 0 0 / 10%);
63
+ --input: oklch(1 0 0 / 15%);
64
+ --ring: oklch(0.5367 0.2286 262.17);
65
+ --chart-1: oklch(0.488 0.243 264.376);
66
+ --chart-2: oklch(0.696 0.17 162.48);
67
+ --chart-3: oklch(0.769 0.188 70.08);
68
+ --chart-4: oklch(0.627 0.265 303.9);
69
+ --chart-5: oklch(0.645 0.246 16.439);
70
+ --sidebar: oklch(0.205 0 0);
71
+ --sidebar-foreground: oklch(0.985 0 0);
72
+ --sidebar-primary: oklch(0.488 0.243 264.376);
73
+ --sidebar-primary-foreground: oklch(0.985 0 0);
74
+ --sidebar-accent: oklch(0.269 0 0);
75
+ --sidebar-accent-foreground: oklch(0.985 0 0);
76
+ --sidebar-border: oklch(1 0 0 / 10%);
77
+ --sidebar-ring: oklch(0.556 0 0);
90
78
  }
91
79
 
92
80
  @theme inline {
@@ -173,6 +161,17 @@
173
161
  cubic-bezier(0, 0, 0.2, 1) infinite;
174
162
  --animate-glowing-border: glowing-border 3s linear infinite;
175
163
 
164
+ /* Blur */
165
+ --blur-xs: 4px;
166
+ --blur-sm: 8px;
167
+ --blur-md: 16px;
168
+ --blur-lg: 24px;
169
+ --blur-xl: 40px;
170
+ --blur-2xl: 60px;
171
+
172
+ /* Breakpoints */
173
+ --breakpoint-2xl: 87.5rem;
174
+
176
175
  /* Color: Brand */
177
176
  --color-brand-midnight-900: oklch(0.15 0.03 255.43);
178
177
  --color-brand-midnight-800: oklch(0.19 0.05 255.43);
@@ -271,6 +270,59 @@
271
270
  --color-success-900: oklch(0.26 0.16 145.43);
272
271
  --color-success-950: oklch(0.17 0.13 145.43);
273
272
 
273
+ /* Container widths */
274
+ --container-3xs: 16rem;
275
+ --container-2xs: 20rem;
276
+ --container-xs: 24rem;
277
+ --container-sm: 30rem;
278
+ --container-md: 36rem;
279
+ --container-lg: 40rem;
280
+ --container-xl: 48rem;
281
+ --container-2xl: 64rem;
282
+ --container-3xl: 80rem;
283
+ --container-4xl: 90rem;
284
+ --container-5xl: 100rem;
285
+ --container-6xl: 120rem;
286
+ --container-7xl: 140rem;
287
+
288
+ /* Drop-Shadow */
289
+ --drop-shadow-xl: 0px 20px 24px rgba(16, 24, 40, 0.1);
290
+ --drop-shadow-2xl: 0px 24px 48px rgba(16, 24, 40, 0.18);
291
+ --drop-shadow-3xl: 0px 32px 48px rgba(16, 24, 40, 0.14);
292
+ --drop-shadow-4xl: 0px 24px 20px rgba(16, 24, 40, 0.28);
293
+ --drop-shadow-forest-3xl: 0px 32px 24px rgba(0, 80, 70, 0.45);
294
+
295
+ /* Durations */
296
+ --transition-duration-bouncy: 1s;
297
+ --transition-duration-card-highlight: 0.6s;
298
+ --transition-duration-gentle: 0.833s;
299
+ --transition-duration-menu: 0.4s;
300
+ --transition-duration-pop-hover: 0.6s;
301
+ --transition-duration-pop-text: 0.3s;
302
+ --transition-duration-quick: 0.833s;
303
+ --transition-duration-slow: 1.167s;
304
+
305
+ --default-transition-duration: 150ms;
306
+ --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
307
+
308
+ /* Easing */
309
+ /* prettier-ignore */
310
+ --ease-bouncy: linear(0, 0.011, 0.045 1.3%, 0.184 2.7%, 0.911 7.4%, 1.153 9.4%, 1.301 11.2%, 1.342, 1.362 13%, 1.363, 1.355 14.4%, 1.306 16%, 1.028 21%, 0.939 23%, 0.89 24.7%, 0.876, 0.868 26.4%, 0.869, 0.882 29%, 0.907 30.5%, 1.014 35.9%, 1.038, 1.048 39.8% 41.1%, 1.043 42.5%, 0.995 49.3%, 0.987, 0.983 53.2%, 0.984 55.9%, 1.002 62.7%, 1.006 66.4%, 0.998 79.7%, 1);
311
+ /* prettier-ignore */
312
+ --ease-card-highlight: linear(0, 0.008, 0.031 1.8%, 0.127 3.9%, 0.671 11.8%, 0.881 15.5%, 0.959, 1.02 19.2%, 1.064, 1.093 23.2%, 1.102, 1.108, 1.108, 1.104 28.7%, 1.089 31.4%, 1.038 38.1%, 1.016 41.5%, 0.999 45.4%, 0.99 49.6%, 0.989 55.3%, 1.001 74.9%, 1);
313
+ /* prettier-ignore */
314
+ --ease-gentle: linear(0, 0.007, 0.026, 0.059 4.5%, 0.106 6.3%, 0.209 9.5%, 0.558 19.3%, 0.658, 0.742, 0.812, 0.87, 0.918, 0.957, 0.986 41.6%, 1.007 45.3%, 1.021 49.4%, 1.027 54% 60.9%, 1.007 83.2%, 1);
315
+ /* prettier-ignore */
316
+ --ease-menu: linear(0, 0.0034 0.81%, 0.0278 2.42%, 0.097 4.84%, 0.5361 15.32%, 0.655 18.55%, 0.7314, 0.7964 23.39%, 0.8662, 0.9185, 0.9561, 0.9818, 0.9984, 1.0083 42.74%, 1.014 46.77%, 1.0145 53.22%, 1.0053 68.55%, 1.0019 77.42%, 0.9998 100%);
317
+ /* prettier-ignore */
318
+ --ease-pop-hover: linear(0, 0.008, 0.031 1.8%, 0.127 3.9%, 0.671 11.8%, 0.881 15.5%, 0.959, 1.02 19.2%, 1.064, 1.093 23.2%, 1.102, 1.108, 1.108, 1.104 28.7%, 1.089 31.4%, 1.038 38.1%, 1.016 41.5%, 0.999 45.4%, 0.99 49.6%, 0.989 55.3%, 1.001 74.9%, 1);
319
+ /* prettier-ignore */
320
+ --ease-pop-text: linear(0, 0.0051 0.99%, 0.0261, 0.0607 3.61%, 0.1192 5.26%, 0.2531 8.21%, 0.6509 16.1%, 0.7652 18.73%, 0.8512, 0.9232 23.33%, 0.9881 25.96%, 1.0305 28.26%, 1.0642 30.88%, 1.0782 32.53%, 1.089, 1.094 36.47%, 1.0942, 1.0896 41.07%, 1.0804 43.7%, 1.0354 53.23%, 1.0181 57.5%, 1.0061 61.44%, 0.9974 65.71%, 0.9925 70.31%, 0.991 75.9%, 0.9996 99.88%);
321
+ /* prettier-ignore */
322
+ --ease-quick: linear(0, 0.008, 0.031 1.8%, 0.127 3.9%, 0.671 11.8%, 0.881 15.5%, 0.959, 1.02 19.2%, 1.064, 1.093 23.2%, 1.102, 1.108, 1.108, 1.104 28.7%, 1.089 31.4%, 1.038 38.1%, 1.016 41.5%, 0.999 45.4%, 0.99 49.6%, 0.989 55.3%, 1.001 74.9%, 1);
323
+ /* prettier-ignore */
324
+ --ease-slow: linear(0, 0.005, 0.02 2%, 0.081 4.5%, 0.469 15.2%, 0.567, 0.65, 0.722 24.4%, 0.784, 0.835 31.1%, 0.878 34.9%, 0.914 39.1%, 0.942 43.8%, 0.964 49.1%, 0.979 55.4%, 0.989 62.4%, 0.995 71.1%, 1);
325
+
274
326
  /* Brand Font Settings */
275
327
  --font--feature-settings: "kern" 1, "liga" 1, "calt" 1, "rlig" 1;
276
328
  --font--variation-settings: "opsz" 14;
@@ -279,8 +331,32 @@
279
331
  --font-decor--feature-settings: "cv08", "ss01" 1, "ss03" 1, "kern" 1, "liga" 1;
280
332
  --font-decor--variation-settings: "opsz" 32;
281
333
 
282
- --default-transition-duration: 150ms;
283
- --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
334
+ /* Radius */
335
+ --radius-none: 0; /* 0px */
336
+ --radius-xxs: 0.125rem; /* 2px */
337
+ --radius-xs: 0.25rem; /* 4px */
338
+ --radius-sm: 0.375rem; /* 6px */
339
+ --radius-md: 0.5rem; /* 8px */
340
+ --radius-lg: 0.625rem; /* 10px */
341
+ --radius-xl: 0.75rem; /* 12px */
342
+ --radius-2xl: 1rem; /* 16px */
343
+ --radius-3xl: 1.25rem; /* 20px */
344
+ --radius-4xl: 1.5rem; /* 24px */
345
+
346
+ /* Shadows */
347
+ --shadow-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
348
+ --shadow-sm: 0px 1px 3px 0px rgba(16, 24, 40, 0.1),
349
+ 0px 1px 2px 0px rgba(16, 24, 40, 0.06);
350
+ --shadow-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.1),
351
+ 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
352
+ --shadow-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08),
353
+ 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
354
+ --shadow-xl: 0px 20px 24px -4px rgba(16, 24, 40, 0.08),
355
+ 0px 8px 8px -4px rgba(16, 24, 40, 0.03);
356
+ --shadow-2xl: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);
357
+ --shadow-3xl: 0px 32px 48px rgba(16, 24, 40, 0.14);
358
+ --shadow-4xl: 0px 24px 20px rgba(16, 24, 40, 0.28);
359
+ --shadow-forest-3xl: 0px 32px 24px rgba(0, 80, 70, 0.45);
284
360
 
285
361
  /* Font Sizes */
286
362
  /* Regular Text */
@@ -440,6 +516,16 @@
440
516
  }
441
517
  }
442
518
 
519
+ @utility mask {
520
+ mask-size: contain;
521
+ mask-repeat: no-repeat;
522
+ mask-position: center;
523
+ }
524
+
525
+ @utility mask-squircle {
526
+ mask-image: url("data:image/svg+xml,%3csvg width='160' height='160' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M 0 80 C 0 14.12 14.12 0 80 0 C 145.88 0 160 14.12 160 80 C 160 145.88 145.88 160 80 160 C 14.12 160 0 145.88 0 80 Z'/%3e%3c/svg%3e");
527
+ }
528
+
443
529
  @utility scrollbar-stable {
444
530
  scrollbar-gutter: stable;
445
531
  }
package/package.json CHANGED
@@ -69,7 +69,7 @@
69
69
  "sideEffects": false,
70
70
  "type": "module",
71
71
  "types": "./dist/index.d.ts",
72
- "version": "0.0.6",
72
+ "version": "0.0.7",
73
73
  "scripts": {
74
74
  "build": "tsup"
75
75
  }