@kushagradhawan/kookie-ui 0.1.34 → 0.1.36

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/dist/cjs/components/chatbar.d.ts +4 -1
  2. package/dist/cjs/components/chatbar.d.ts.map +1 -1
  3. package/dist/cjs/components/chatbar.js +1 -1
  4. package/dist/cjs/components/chatbar.js.map +3 -3
  5. package/dist/esm/components/chatbar.d.ts +4 -1
  6. package/dist/esm/components/chatbar.d.ts.map +1 -1
  7. package/dist/esm/components/chatbar.js +1 -1
  8. package/dist/esm/components/chatbar.js.map +3 -3
  9. package/package.json +1 -1
  10. package/src/components/chatbar.tsx +17 -3
  11. package/src/styles/tokens/shadow.css +0 -20
  12. package/styles.css +20 -20
  13. package/tokens/base.css +20 -20
  14. package/tokens.css +20 -20
package/tokens/base.css CHANGED
@@ -65,11 +65,11 @@
65
65
  --color-dialog-translucent: rgba(255, 255, 255, var(--dialog-opacity));
66
66
  --color-transparent: rgb(0 0 0 / 0);
67
67
  --shadow-1: inset 0 0 0 1px var(--gray-a5), inset 0 1px 1px 0 var(--gray-a2), inset 0 1px 1px 0 var(--black-a2);
68
- --shadow-2: 0 0 0 1px var(--gray-a3), 0 0 0 0.5px var(--black-a1), 0 1px 1px 0 var(--gray-a2), 0 2px 1px -1px var(--black-a1), 0 1px 4px 0 var(--black-a1);
69
- --shadow-3: 0 0 0 1px var(--gray-a3), 0 2px 3px -2px var(--gray-a3), 0 3px 12px -4px var(--black-a2), 0 4px 16px -8px var(--black-a2);
70
- --shadow-4: 0 0 0 1px var(--gray-a3), 0 8px 40px var(--black-a1), 0 12px 32px -16px var(--gray-a3);
71
- --shadow-5: 0 0 0 1px var(--gray-a3), 0 12px 60px var(--black-a3), 0 12px 32px -16px var(--gray-a5);
72
- --shadow-6: 0 0 0 1px var(--gray-a3), 0 12px 60px var(--black-a3), 0 16px 64px var(--gray-a2), 0 16px 36px -20px var(--gray-a7);
68
+ --shadow-2: 0 0 0 0.5px var(--black-a1), 0 1px 1px 0 var(--gray-a2), 0 2px 1px -1px var(--black-a1), 0 1px 4px 0 var(--black-a1);
69
+ --shadow-3: 0 2px 3px -2px var(--gray-a3), 0 3px 12px -4px var(--black-a2), 0 4px 16px -8px var(--black-a2);
70
+ --shadow-4: 0 8px 40px var(--black-a1), 0 12px 32px -16px var(--gray-a3);
71
+ --shadow-5: 0 12px 60px var(--black-a3), 0 12px 32px -16px var(--gray-a5);
72
+ --shadow-6: 0 12px 60px var(--black-a3), 0 16px 64px var(--gray-a2), 0 16px 36px -20px var(--gray-a7);
73
73
  --blur-factor: 1;
74
74
  --blur-1: calc(2px * var(--scaling) * var(--blur-factor));
75
75
  --blur-2: calc(4px * var(--scaling) * var(--blur-factor));
@@ -102,11 +102,11 @@
102
102
  --color-dialog-solid: var(--gray-2);
103
103
  --color-dialog-translucent: color-mix(in srgb, var(--gray-2) var(--dialog-opacity-percentage), transparent);
104
104
  --shadow-1: inset 0 -1px 0.5px 0 var(--gray-a3), inset 0 0 0 1px var(--gray-a3), inset 0 2px 2px 0 var(--black-a5), inset 0 0 0 1px var(--gray-a4);
105
- --shadow-2: 0 0 0 1px var(--gray-a6), 0 0 0 0.5px var(--black-a3), 0 1px 1px 0 var(--black-a6), 0 2px 1px -1px var(--black-a6), 0 1px 4px 0 var(--black-a5);
106
- --shadow-3: 0 0 0 1px var(--gray-a6), 0 2px 3px -2px var(--black-a3), 0 3px 8px -2px var(--black-a6), 0 4px 12px -4px var(--black-a7);
107
- --shadow-4: 0 0 0 1px var(--gray-a6), 0 8px 40px var(--black-a3), 0 12px 32px -16px var(--black-a5);
108
- --shadow-5: 0 0 0 1px var(--gray-a6), 0 12px 60px var(--black-a5), 0 12px 32px -16px var(--black-a7);
109
- --shadow-6: 0 0 0 1px var(--gray-a6), 0 12px 60px var(--black-a4), 0 16px 64px var(--black-a6), 0 16px 36px -20px var(--black-a11);
105
+ --shadow-2: 0 0 0 0.5px var(--black-a3), 0 1px 1px 0 var(--black-a6), 0 2px 1px -1px var(--black-a6), 0 1px 4px 0 var(--black-a5);
106
+ --shadow-3: 0 2px 3px -2px var(--black-a3), 0 3px 8px -2px var(--black-a6), 0 4px 12px -4px var(--black-a7);
107
+ --shadow-4: 0 8px 40px var(--black-a3), 0 12px 32px -16px var(--black-a5);
108
+ --shadow-5: 0 12px 60px var(--black-a5), 0 12px 32px -16px var(--black-a7);
109
+ --shadow-6: 0 12px 60px var(--black-a4), 0 16px 64px var(--black-a6), 0 16px 36px -20px var(--black-a11);
110
110
  }
111
111
  @supports (color: color(display-p3 1 1 1)) {
112
112
  @media (color-gamut: p3) {
@@ -1337,22 +1337,22 @@
1337
1337
  @supports (color: color-mix(in oklab, white, black)) {
1338
1338
  :where(.radix-themes) {
1339
1339
  --shadow-1: inset 0 0 0 1px var(--gray-a5), inset 0 1px 1px 0 var(--gray-a2), inset 0 1px 1px 0 var(--black-a2);
1340
- --shadow-2: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%), 0 0 0 0.5px var(--black-a1), 0 1px 1px 0 var(--gray-a2), 0 2px 1px -1px var(--black-a1), 0 1px 4px 0 var(--black-a1);
1341
- --shadow-3: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%), 0 2px 3px -2px var(--gray-a3), 0 3px 12px -4px var(--black-a2), 0 4px 16px -8px var(--black-a2);
1342
- --shadow-4: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%), 0 8px 40px var(--black-a1), 0 12px 32px -16px var(--gray-a3);
1343
- --shadow-5: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%), 0 12px 60px var(--black-a3), 0 12px 32px -16px var(--gray-a5);
1344
- --shadow-6: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%), 0 12px 60px var(--black-a3), 0 16px 64px var(--gray-a2), 0 16px 36px -20px var(--gray-a7);
1340
+ --shadow-2: 0 0 0 0.5px var(--black-a1), 0 1px 1px 0 var(--gray-a2), 0 2px 1px -1px var(--black-a1), 0 1px 4px 0 var(--black-a1);
1341
+ --shadow-3: 0 2px 3px -2px var(--gray-a3), 0 3px 12px -4px var(--black-a2), 0 4px 16px -8px var(--black-a2);
1342
+ --shadow-4: 0 8px 40px var(--black-a1), 0 12px 32px -16px var(--gray-a3);
1343
+ --shadow-5: 0 12px 60px var(--black-a3), 0 12px 32px -16px var(--gray-a5);
1344
+ --shadow-6: 0 12px 60px var(--black-a3), 0 16px 64px var(--gray-a2), 0 16px 36px -20px var(--gray-a7);
1345
1345
  }
1346
1346
  }
1347
1347
  @supports (color: color-mix(in oklab, white, black)) {
1348
1348
  :is(.dark, .dark-theme),
1349
1349
  :is(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) {
1350
1350
  --shadow-1: inset 0 -1px 0.5px 0 var(--gray-a3), inset 0 0 0 1px var(--gray-a3), inset 0 2px 2px 0 var(--black-a5), inset 0 0 0 1px var(--gray-a4);
1351
- --shadow-2: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%), 0 0 0 0.5px var(--black-a3), 0 1px 1px 0 var(--black-a6), 0 2px 1px -1px var(--black-a6), 0 1px 4px 0 var(--black-a5);
1352
- --shadow-3: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%), 0 2px 3px -2px var(--black-a3), 0 3px 8px -2px var(--black-a6), 0 4px 12px -4px var(--black-a7);
1353
- --shadow-4: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%), 0 8px 40px var(--black-a3), 0 12px 32px -16px var(--black-a5);
1354
- --shadow-5: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%), 0 12px 60px var(--black-a5), 0 12px 32px -16px var(--black-a7);
1355
- --shadow-6: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%), 0 12px 60px var(--black-a4), 0 16px 64px var(--black-a6), 0 16px 36px -20px var(--black-a11);
1351
+ --shadow-2: 0 0 0 0.5px var(--black-a3), 0 1px 1px 0 var(--black-a6), 0 2px 1px -1px var(--black-a6), 0 1px 4px 0 var(--black-a5);
1352
+ --shadow-3: 0 2px 3px -2px var(--black-a3), 0 3px 8px -2px var(--black-a6), 0 4px 12px -4px var(--black-a7);
1353
+ --shadow-4: 0 8px 40px var(--black-a3), 0 12px 32px -16px var(--black-a5);
1354
+ --shadow-5: 0 12px 60px var(--black-a5), 0 12px 32px -16px var(--black-a7);
1355
+ --shadow-6: 0 12px 60px var(--black-a4), 0 16px 64px var(--black-a6), 0 16px 36px -20px var(--black-a11);
1356
1356
  }
1357
1357
  }
1358
1358
  @media (prefers-reduced-motion: reduce) {
package/tokens.css CHANGED
@@ -3417,11 +3417,11 @@
3417
3417
  --color-dialog-translucent: rgba(255, 255, 255, var(--dialog-opacity));
3418
3418
  --color-transparent: rgb(0 0 0 / 0);
3419
3419
  --shadow-1: inset 0 0 0 1px var(--gray-a5), inset 0 1px 1px 0 var(--gray-a2), inset 0 1px 1px 0 var(--black-a2);
3420
- --shadow-2: 0 0 0 1px var(--gray-a3), 0 0 0 0.5px var(--black-a1), 0 1px 1px 0 var(--gray-a2), 0 2px 1px -1px var(--black-a1), 0 1px 4px 0 var(--black-a1);
3421
- --shadow-3: 0 0 0 1px var(--gray-a3), 0 2px 3px -2px var(--gray-a3), 0 3px 12px -4px var(--black-a2), 0 4px 16px -8px var(--black-a2);
3422
- --shadow-4: 0 0 0 1px var(--gray-a3), 0 8px 40px var(--black-a1), 0 12px 32px -16px var(--gray-a3);
3423
- --shadow-5: 0 0 0 1px var(--gray-a3), 0 12px 60px var(--black-a3), 0 12px 32px -16px var(--gray-a5);
3424
- --shadow-6: 0 0 0 1px var(--gray-a3), 0 12px 60px var(--black-a3), 0 16px 64px var(--gray-a2), 0 16px 36px -20px var(--gray-a7);
3420
+ --shadow-2: 0 0 0 0.5px var(--black-a1), 0 1px 1px 0 var(--gray-a2), 0 2px 1px -1px var(--black-a1), 0 1px 4px 0 var(--black-a1);
3421
+ --shadow-3: 0 2px 3px -2px var(--gray-a3), 0 3px 12px -4px var(--black-a2), 0 4px 16px -8px var(--black-a2);
3422
+ --shadow-4: 0 8px 40px var(--black-a1), 0 12px 32px -16px var(--gray-a3);
3423
+ --shadow-5: 0 12px 60px var(--black-a3), 0 12px 32px -16px var(--gray-a5);
3424
+ --shadow-6: 0 12px 60px var(--black-a3), 0 16px 64px var(--gray-a2), 0 16px 36px -20px var(--gray-a7);
3425
3425
  --blur-factor: 1;
3426
3426
  --blur-1: calc(2px * var(--scaling) * var(--blur-factor));
3427
3427
  --blur-2: calc(4px * var(--scaling) * var(--blur-factor));
@@ -3484,11 +3484,11 @@
3484
3484
  --color-dialog-solid: var(--gray-2);
3485
3485
  --color-dialog-translucent: color-mix(in srgb, var(--gray-2) var(--dialog-opacity-percentage), transparent);
3486
3486
  --shadow-1: inset 0 -1px 0.5px 0 var(--gray-a3), inset 0 0 0 1px var(--gray-a3), inset 0 2px 2px 0 var(--black-a5), inset 0 0 0 1px var(--gray-a4);
3487
- --shadow-2: 0 0 0 1px var(--gray-a6), 0 0 0 0.5px var(--black-a3), 0 1px 1px 0 var(--black-a6), 0 2px 1px -1px var(--black-a6), 0 1px 4px 0 var(--black-a5);
3488
- --shadow-3: 0 0 0 1px var(--gray-a6), 0 2px 3px -2px var(--black-a3), 0 3px 8px -2px var(--black-a6), 0 4px 12px -4px var(--black-a7);
3489
- --shadow-4: 0 0 0 1px var(--gray-a6), 0 8px 40px var(--black-a3), 0 12px 32px -16px var(--black-a5);
3490
- --shadow-5: 0 0 0 1px var(--gray-a6), 0 12px 60px var(--black-a5), 0 12px 32px -16px var(--black-a7);
3491
- --shadow-6: 0 0 0 1px var(--gray-a6), 0 12px 60px var(--black-a4), 0 16px 64px var(--black-a6), 0 16px 36px -20px var(--black-a11);
3487
+ --shadow-2: 0 0 0 0.5px var(--black-a3), 0 1px 1px 0 var(--black-a6), 0 2px 1px -1px var(--black-a6), 0 1px 4px 0 var(--black-a5);
3488
+ --shadow-3: 0 2px 3px -2px var(--black-a3), 0 3px 8px -2px var(--black-a6), 0 4px 12px -4px var(--black-a7);
3489
+ --shadow-4: 0 8px 40px var(--black-a3), 0 12px 32px -16px var(--black-a5);
3490
+ --shadow-5: 0 12px 60px var(--black-a5), 0 12px 32px -16px var(--black-a7);
3491
+ --shadow-6: 0 12px 60px var(--black-a4), 0 16px 64px var(--black-a6), 0 16px 36px -20px var(--black-a11);
3492
3492
  }
3493
3493
  @supports (color: color(display-p3 1 1 1)) {
3494
3494
  @media (color-gamut: p3) {
@@ -4719,22 +4719,22 @@
4719
4719
  @supports (color: color-mix(in oklab, white, black)) {
4720
4720
  :where(.radix-themes) {
4721
4721
  --shadow-1: inset 0 0 0 1px var(--gray-a5), inset 0 1px 1px 0 var(--gray-a2), inset 0 1px 1px 0 var(--black-a2);
4722
- --shadow-2: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%), 0 0 0 0.5px var(--black-a1), 0 1px 1px 0 var(--gray-a2), 0 2px 1px -1px var(--black-a1), 0 1px 4px 0 var(--black-a1);
4723
- --shadow-3: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%), 0 2px 3px -2px var(--gray-a3), 0 3px 12px -4px var(--black-a2), 0 4px 16px -8px var(--black-a2);
4724
- --shadow-4: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%), 0 8px 40px var(--black-a1), 0 12px 32px -16px var(--gray-a3);
4725
- --shadow-5: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%), 0 12px 60px var(--black-a3), 0 12px 32px -16px var(--gray-a5);
4726
- --shadow-6: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%), 0 12px 60px var(--black-a3), 0 16px 64px var(--gray-a2), 0 16px 36px -20px var(--gray-a7);
4722
+ --shadow-2: 0 0 0 0.5px var(--black-a1), 0 1px 1px 0 var(--gray-a2), 0 2px 1px -1px var(--black-a1), 0 1px 4px 0 var(--black-a1);
4723
+ --shadow-3: 0 2px 3px -2px var(--gray-a3), 0 3px 12px -4px var(--black-a2), 0 4px 16px -8px var(--black-a2);
4724
+ --shadow-4: 0 8px 40px var(--black-a1), 0 12px 32px -16px var(--gray-a3);
4725
+ --shadow-5: 0 12px 60px var(--black-a3), 0 12px 32px -16px var(--gray-a5);
4726
+ --shadow-6: 0 12px 60px var(--black-a3), 0 16px 64px var(--gray-a2), 0 16px 36px -20px var(--gray-a7);
4727
4727
  }
4728
4728
  }
4729
4729
  @supports (color: color-mix(in oklab, white, black)) {
4730
4730
  :is(.dark, .dark-theme),
4731
4731
  :is(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) {
4732
4732
  --shadow-1: inset 0 -1px 0.5px 0 var(--gray-a3), inset 0 0 0 1px var(--gray-a3), inset 0 2px 2px 0 var(--black-a5), inset 0 0 0 1px var(--gray-a4);
4733
- --shadow-2: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%), 0 0 0 0.5px var(--black-a3), 0 1px 1px 0 var(--black-a6), 0 2px 1px -1px var(--black-a6), 0 1px 4px 0 var(--black-a5);
4734
- --shadow-3: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%), 0 2px 3px -2px var(--black-a3), 0 3px 8px -2px var(--black-a6), 0 4px 12px -4px var(--black-a7);
4735
- --shadow-4: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%), 0 8px 40px var(--black-a3), 0 12px 32px -16px var(--black-a5);
4736
- --shadow-5: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%), 0 12px 60px var(--black-a5), 0 12px 32px -16px var(--black-a7);
4737
- --shadow-6: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%), 0 12px 60px var(--black-a4), 0 16px 64px var(--black-a6), 0 16px 36px -20px var(--black-a11);
4733
+ --shadow-2: 0 0 0 0.5px var(--black-a3), 0 1px 1px 0 var(--black-a6), 0 2px 1px -1px var(--black-a6), 0 1px 4px 0 var(--black-a5);
4734
+ --shadow-3: 0 2px 3px -2px var(--black-a3), 0 3px 8px -2px var(--black-a6), 0 4px 12px -4px var(--black-a7);
4735
+ --shadow-4: 0 8px 40px var(--black-a3), 0 12px 32px -16px var(--black-a5);
4736
+ --shadow-5: 0 12px 60px var(--black-a5), 0 12px 32px -16px var(--black-a7);
4737
+ --shadow-6: 0 12px 60px var(--black-a4), 0 16px 64px var(--black-a6), 0 16px 36px -20px var(--black-a11);
4738
4738
  }
4739
4739
  }
4740
4740
  @media (prefers-reduced-motion: reduce) {