@kushagradhawan/kookie-ui 0.1.71 → 0.1.73

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 (118) hide show
  1. package/README.md +4 -0
  2. package/components.css +69 -382
  3. package/dist/cjs/components/_internal/base-button.d.ts.map +1 -1
  4. package/dist/cjs/components/_internal/base-button.js +1 -1
  5. package/dist/cjs/components/_internal/base-button.js.map +3 -3
  6. package/dist/cjs/components/_internal/shell-bottom.d.ts.map +1 -1
  7. package/dist/cjs/components/_internal/shell-bottom.js +1 -1
  8. package/dist/cjs/components/_internal/shell-bottom.js.map +3 -3
  9. package/dist/cjs/components/_internal/shell-inspector.d.ts.map +1 -1
  10. package/dist/cjs/components/_internal/shell-inspector.js +1 -1
  11. package/dist/cjs/components/_internal/shell-inspector.js.map +3 -3
  12. package/dist/cjs/components/_internal/shell-sidebar.d.ts.map +1 -1
  13. package/dist/cjs/components/_internal/shell-sidebar.js +1 -1
  14. package/dist/cjs/components/_internal/shell-sidebar.js.map +3 -3
  15. package/dist/cjs/components/button.d.ts.map +1 -1
  16. package/dist/cjs/components/button.js +1 -1
  17. package/dist/cjs/components/button.js.map +3 -3
  18. package/dist/cjs/components/chatbar.d.ts.map +1 -1
  19. package/dist/cjs/components/chatbar.js.map +2 -2
  20. package/dist/cjs/components/icon-button.d.ts.map +1 -1
  21. package/dist/cjs/components/icon-button.js +2 -2
  22. package/dist/cjs/components/icon-button.js.map +3 -3
  23. package/dist/cjs/components/shell.d.ts.map +1 -1
  24. package/dist/cjs/components/shell.js +1 -1
  25. package/dist/cjs/components/shell.js.map +3 -3
  26. package/dist/cjs/components/toggle-button.d.ts.map +1 -1
  27. package/dist/cjs/components/toggle-button.js +1 -1
  28. package/dist/cjs/components/toggle-button.js.map +3 -3
  29. package/dist/cjs/components/toggle-icon-button.d.ts.map +1 -1
  30. package/dist/cjs/components/toggle-icon-button.js +1 -1
  31. package/dist/cjs/components/toggle-icon-button.js.map +3 -3
  32. package/dist/cjs/hooks/index.d.ts +2 -0
  33. package/dist/cjs/hooks/index.d.ts.map +1 -1
  34. package/dist/cjs/hooks/index.js +1 -1
  35. package/dist/cjs/hooks/index.js.map +3 -3
  36. package/dist/cjs/hooks/use-live-announcer.d.ts.map +1 -1
  37. package/dist/cjs/hooks/use-live-announcer.js +2 -2
  38. package/dist/cjs/hooks/use-live-announcer.js.map +3 -3
  39. package/dist/cjs/hooks/use-toggle-state.d.ts +37 -0
  40. package/dist/cjs/hooks/use-toggle-state.d.ts.map +1 -0
  41. package/dist/cjs/hooks/use-toggle-state.js +2 -0
  42. package/dist/cjs/hooks/use-toggle-state.js.map +7 -0
  43. package/dist/cjs/hooks/use-tooltip-wrapper.d.ts +29 -0
  44. package/dist/cjs/hooks/use-tooltip-wrapper.d.ts.map +1 -0
  45. package/dist/cjs/hooks/use-tooltip-wrapper.js +2 -0
  46. package/dist/cjs/hooks/use-tooltip-wrapper.js.map +7 -0
  47. package/dist/esm/components/_internal/base-button.d.ts.map +1 -1
  48. package/dist/esm/components/_internal/base-button.js +1 -1
  49. package/dist/esm/components/_internal/base-button.js.map +3 -3
  50. package/dist/esm/components/_internal/shell-bottom.d.ts.map +1 -1
  51. package/dist/esm/components/_internal/shell-bottom.js +1 -1
  52. package/dist/esm/components/_internal/shell-bottom.js.map +3 -3
  53. package/dist/esm/components/_internal/shell-inspector.d.ts.map +1 -1
  54. package/dist/esm/components/_internal/shell-inspector.js +1 -1
  55. package/dist/esm/components/_internal/shell-inspector.js.map +3 -3
  56. package/dist/esm/components/_internal/shell-sidebar.d.ts.map +1 -1
  57. package/dist/esm/components/_internal/shell-sidebar.js +1 -1
  58. package/dist/esm/components/_internal/shell-sidebar.js.map +3 -3
  59. package/dist/esm/components/button.d.ts.map +1 -1
  60. package/dist/esm/components/button.js +1 -1
  61. package/dist/esm/components/button.js.map +3 -3
  62. package/dist/esm/components/chatbar.d.ts.map +1 -1
  63. package/dist/esm/components/chatbar.js.map +2 -2
  64. package/dist/esm/components/icon-button.d.ts.map +1 -1
  65. package/dist/esm/components/icon-button.js +2 -2
  66. package/dist/esm/components/icon-button.js.map +3 -3
  67. package/dist/esm/components/shell.d.ts.map +1 -1
  68. package/dist/esm/components/shell.js +1 -1
  69. package/dist/esm/components/shell.js.map +3 -3
  70. package/dist/esm/components/toggle-button.d.ts.map +1 -1
  71. package/dist/esm/components/toggle-button.js +1 -1
  72. package/dist/esm/components/toggle-button.js.map +3 -3
  73. package/dist/esm/components/toggle-icon-button.d.ts.map +1 -1
  74. package/dist/esm/components/toggle-icon-button.js +1 -1
  75. package/dist/esm/components/toggle-icon-button.js.map +3 -3
  76. package/dist/esm/hooks/index.d.ts +2 -0
  77. package/dist/esm/hooks/index.d.ts.map +1 -1
  78. package/dist/esm/hooks/index.js +1 -1
  79. package/dist/esm/hooks/index.js.map +3 -3
  80. package/dist/esm/hooks/use-live-announcer.d.ts.map +1 -1
  81. package/dist/esm/hooks/use-live-announcer.js +2 -2
  82. package/dist/esm/hooks/use-live-announcer.js.map +3 -3
  83. package/dist/esm/hooks/use-toggle-state.d.ts +37 -0
  84. package/dist/esm/hooks/use-toggle-state.d.ts.map +1 -0
  85. package/dist/esm/hooks/use-toggle-state.js +2 -0
  86. package/dist/esm/hooks/use-toggle-state.js.map +7 -0
  87. package/dist/esm/hooks/use-tooltip-wrapper.d.ts +29 -0
  88. package/dist/esm/hooks/use-tooltip-wrapper.d.ts.map +1 -0
  89. package/dist/esm/hooks/use-tooltip-wrapper.js +2 -0
  90. package/dist/esm/hooks/use-tooltip-wrapper.js.map +7 -0
  91. package/package.json +4 -4
  92. package/schemas/base-button.json +1 -1
  93. package/schemas/button.json +1 -1
  94. package/schemas/icon-button.json +1 -1
  95. package/schemas/index.json +6 -6
  96. package/schemas/toggle-button.json +1 -1
  97. package/schemas/toggle-icon-button.json +1 -1
  98. package/src/components/_internal/base-button.css +136 -614
  99. package/src/components/_internal/base-button.tsx +15 -13
  100. package/src/components/_internal/shell-bottom.tsx +31 -5
  101. package/src/components/_internal/shell-inspector.tsx +31 -5
  102. package/src/components/_internal/shell-sidebar.tsx +34 -6
  103. package/src/components/button.tsx +13 -42
  104. package/src/components/chatbar.tsx +1 -13
  105. package/src/components/icon-button.tsx +20 -44
  106. package/src/components/image.css +10 -8
  107. package/src/components/shell.css +10 -11
  108. package/src/components/shell.tsx +59 -11
  109. package/src/components/toggle-button.tsx +30 -59
  110. package/src/components/toggle-icon-button.tsx +29 -51
  111. package/src/hooks/index.ts +2 -0
  112. package/src/hooks/use-live-announcer.ts +34 -7
  113. package/src/hooks/use-toggle-state.ts +72 -0
  114. package/src/hooks/use-tooltip-wrapper.ts +28 -0
  115. package/src/styles/tokens/color.css +11 -1
  116. package/styles.css +76 -383
  117. package/tokens/base.css +7 -1
  118. package/tokens.css +7 -1
package/tokens/base.css CHANGED
@@ -63,6 +63,8 @@
63
63
  --color-surface-translucent: rgba(255, 255, 255, var(--surface-opacity));
64
64
  --color-dialog-solid: white;
65
65
  --color-dialog-translucent: rgba(255, 255, 255, var(--dialog-opacity));
66
+ --material-blend: 100%;
67
+ --material-alpha: 0;
66
68
  --color-transparent: rgb(0 0 0 / 0);
67
69
  --shadow-1: 0 0 0 0.25px var(--gray-a6), inset 0 1px 1px 0 var(--black-a2);
68
70
  --shadow-2: 0 0 0 0.25px var(--gray-a6), 0 1px 3px 0 var(--black-a2), 0 1px 2px -1px var(--black-a2);
@@ -162,13 +164,15 @@
162
164
  .radix-themes:where([data-has-background='true']) {
163
165
  background-color: var(--color-background);
164
166
  }
165
- .radix-themes:where([data-panel-background='solid']) {
167
+ .radix-themes:where([data-panel-background='solid'], [data-material='solid']) {
166
168
  --color-panel: var(--color-panel-solid);
167
169
  --color-surface: var(--color-surface-solid);
168
170
  --color-dialog: var(--color-dialog-solid);
169
171
  --backdrop-filter-panel: none;
170
172
  --backdrop-filter-components: none;
171
173
  --backdrop-filter-dialog: none;
174
+ --material-blend: 100%;
175
+ --material-alpha: 0;
172
176
  }
173
177
  .radix-themes:where([data-panel-background='translucent'], [data-material='translucent']) {
174
178
  --color-panel: var(--color-panel-translucent);
@@ -177,6 +181,8 @@
177
181
  --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
178
182
  --backdrop-filter-components: blur(var(--backdrop-blur-components));
179
183
  --backdrop-filter-dialog: blur(var(--backdrop-blur-dialog));
184
+ --material-blend: 60%;
185
+ --material-alpha: 1;
180
186
  }
181
187
  [data-accent-color='amber'] {
182
188
  --accent-1: var(--amber-1);
package/tokens.css CHANGED
@@ -3415,6 +3415,8 @@
3415
3415
  --color-surface-translucent: rgba(255, 255, 255, var(--surface-opacity));
3416
3416
  --color-dialog-solid: white;
3417
3417
  --color-dialog-translucent: rgba(255, 255, 255, var(--dialog-opacity));
3418
+ --material-blend: 100%;
3419
+ --material-alpha: 0;
3418
3420
  --color-transparent: rgb(0 0 0 / 0);
3419
3421
  --shadow-1: 0 0 0 0.25px var(--gray-a6), inset 0 1px 1px 0 var(--black-a2);
3420
3422
  --shadow-2: 0 0 0 0.25px var(--gray-a6), 0 1px 3px 0 var(--black-a2), 0 1px 2px -1px var(--black-a2);
@@ -3544,13 +3546,15 @@
3544
3546
  .radix-themes:where([data-has-background='true']) {
3545
3547
  background-color: var(--color-background);
3546
3548
  }
3547
- .radix-themes:where([data-panel-background='solid']) {
3549
+ .radix-themes:where([data-panel-background='solid'], [data-material='solid']) {
3548
3550
  --color-panel: var(--color-panel-solid);
3549
3551
  --color-surface: var(--color-surface-solid);
3550
3552
  --color-dialog: var(--color-dialog-solid);
3551
3553
  --backdrop-filter-panel: none;
3552
3554
  --backdrop-filter-components: none;
3553
3555
  --backdrop-filter-dialog: none;
3556
+ --material-blend: 100%;
3557
+ --material-alpha: 0;
3554
3558
  }
3555
3559
  .radix-themes:where([data-panel-background='translucent'], [data-material='translucent']) {
3556
3560
  --color-panel: var(--color-panel-translucent);
@@ -3559,6 +3563,8 @@
3559
3563
  --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
3560
3564
  --backdrop-filter-components: blur(var(--backdrop-blur-components));
3561
3565
  --backdrop-filter-dialog: blur(var(--backdrop-blur-dialog));
3566
+ --material-blend: 60%;
3567
+ --material-alpha: 1;
3562
3568
  }
3563
3569
  [data-accent-color='amber'] {
3564
3570
  --accent-1: var(--amber-1);