@kushagradhawan/kookie-ui 0.1.70 → 0.1.72

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 (164) hide show
  1. package/README.md +4 -0
  2. package/components.css +63 -380
  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 +2 -21
  7. package/dist/cjs/components/_internal/shell-bottom.d.ts.map +1 -1
  8. package/dist/cjs/components/_internal/shell-bottom.js +1 -1
  9. package/dist/cjs/components/_internal/shell-bottom.js.map +3 -3
  10. package/dist/cjs/components/_internal/shell-inspector.d.ts +10 -21
  11. package/dist/cjs/components/_internal/shell-inspector.d.ts.map +1 -1
  12. package/dist/cjs/components/_internal/shell-inspector.js +1 -1
  13. package/dist/cjs/components/_internal/shell-inspector.js.map +3 -3
  14. package/dist/cjs/components/_internal/shell-prop-helpers.d.ts +7 -0
  15. package/dist/cjs/components/_internal/shell-prop-helpers.d.ts.map +1 -0
  16. package/dist/cjs/components/_internal/shell-prop-helpers.js +2 -0
  17. package/dist/cjs/components/_internal/shell-prop-helpers.js.map +7 -0
  18. package/dist/cjs/components/_internal/shell-sidebar.d.ts +4 -21
  19. package/dist/cjs/components/_internal/shell-sidebar.d.ts.map +1 -1
  20. package/dist/cjs/components/_internal/shell-sidebar.js +1 -1
  21. package/dist/cjs/components/_internal/shell-sidebar.js.map +3 -3
  22. package/dist/cjs/components/button.d.ts.map +1 -1
  23. package/dist/cjs/components/button.js +1 -1
  24. package/dist/cjs/components/button.js.map +3 -3
  25. package/dist/cjs/components/chatbar.d.ts +11 -2
  26. package/dist/cjs/components/chatbar.d.ts.map +1 -1
  27. package/dist/cjs/components/chatbar.js +1 -1
  28. package/dist/cjs/components/chatbar.js.map +3 -3
  29. package/dist/cjs/components/icon-button.d.ts.map +1 -1
  30. package/dist/cjs/components/icon-button.js +2 -2
  31. package/dist/cjs/components/icon-button.js.map +3 -3
  32. package/dist/cjs/components/schemas/shell.schema.d.ts +70 -70
  33. package/dist/cjs/components/shell.context.d.ts +1 -0
  34. package/dist/cjs/components/shell.context.d.ts.map +1 -1
  35. package/dist/cjs/components/shell.context.js.map +2 -2
  36. package/dist/cjs/components/shell.d.ts +6 -26
  37. package/dist/cjs/components/shell.d.ts.map +1 -1
  38. package/dist/cjs/components/shell.hooks.d.ts +19 -2
  39. package/dist/cjs/components/shell.hooks.d.ts.map +1 -1
  40. package/dist/cjs/components/shell.hooks.js +1 -1
  41. package/dist/cjs/components/shell.hooks.js.map +3 -3
  42. package/dist/cjs/components/shell.js +1 -1
  43. package/dist/cjs/components/shell.js.map +3 -3
  44. package/dist/cjs/components/shell.types.d.ts +21 -0
  45. package/dist/cjs/components/shell.types.d.ts.map +1 -1
  46. package/dist/cjs/components/shell.types.js +1 -1
  47. package/dist/cjs/components/shell.types.js.map +2 -2
  48. package/dist/cjs/components/toggle-button.d.ts.map +1 -1
  49. package/dist/cjs/components/toggle-button.js +1 -1
  50. package/dist/cjs/components/toggle-button.js.map +3 -3
  51. package/dist/cjs/components/toggle-icon-button.d.ts.map +1 -1
  52. package/dist/cjs/components/toggle-icon-button.js +1 -1
  53. package/dist/cjs/components/toggle-icon-button.js.map +3 -3
  54. package/dist/cjs/hooks/index.d.ts +2 -0
  55. package/dist/cjs/hooks/index.d.ts.map +1 -1
  56. package/dist/cjs/hooks/index.js +1 -1
  57. package/dist/cjs/hooks/index.js.map +3 -3
  58. package/dist/cjs/hooks/use-live-announcer.d.ts.map +1 -1
  59. package/dist/cjs/hooks/use-live-announcer.js +2 -2
  60. package/dist/cjs/hooks/use-live-announcer.js.map +3 -3
  61. package/dist/cjs/hooks/use-toggle-state.d.ts +37 -0
  62. package/dist/cjs/hooks/use-toggle-state.d.ts.map +1 -0
  63. package/dist/cjs/hooks/use-toggle-state.js +2 -0
  64. package/dist/cjs/hooks/use-toggle-state.js.map +7 -0
  65. package/dist/cjs/hooks/use-tooltip-wrapper.d.ts +29 -0
  66. package/dist/cjs/hooks/use-tooltip-wrapper.d.ts.map +1 -0
  67. package/dist/cjs/hooks/use-tooltip-wrapper.js +2 -0
  68. package/dist/cjs/hooks/use-tooltip-wrapper.js.map +7 -0
  69. package/dist/esm/components/_internal/base-button.d.ts.map +1 -1
  70. package/dist/esm/components/_internal/base-button.js +1 -1
  71. package/dist/esm/components/_internal/base-button.js.map +3 -3
  72. package/dist/esm/components/_internal/shell-bottom.d.ts +2 -21
  73. package/dist/esm/components/_internal/shell-bottom.d.ts.map +1 -1
  74. package/dist/esm/components/_internal/shell-bottom.js +1 -1
  75. package/dist/esm/components/_internal/shell-bottom.js.map +3 -3
  76. package/dist/esm/components/_internal/shell-inspector.d.ts +10 -21
  77. package/dist/esm/components/_internal/shell-inspector.d.ts.map +1 -1
  78. package/dist/esm/components/_internal/shell-inspector.js +1 -1
  79. package/dist/esm/components/_internal/shell-inspector.js.map +3 -3
  80. package/dist/esm/components/_internal/shell-prop-helpers.d.ts +7 -0
  81. package/dist/esm/components/_internal/shell-prop-helpers.d.ts.map +1 -0
  82. package/dist/esm/components/_internal/shell-prop-helpers.js +2 -0
  83. package/dist/esm/components/_internal/shell-prop-helpers.js.map +7 -0
  84. package/dist/esm/components/_internal/shell-sidebar.d.ts +4 -21
  85. package/dist/esm/components/_internal/shell-sidebar.d.ts.map +1 -1
  86. package/dist/esm/components/_internal/shell-sidebar.js +1 -1
  87. package/dist/esm/components/_internal/shell-sidebar.js.map +3 -3
  88. package/dist/esm/components/button.d.ts.map +1 -1
  89. package/dist/esm/components/button.js +1 -1
  90. package/dist/esm/components/button.js.map +3 -3
  91. package/dist/esm/components/chatbar.d.ts +11 -2
  92. package/dist/esm/components/chatbar.d.ts.map +1 -1
  93. package/dist/esm/components/chatbar.js +1 -1
  94. package/dist/esm/components/chatbar.js.map +3 -3
  95. package/dist/esm/components/icon-button.d.ts.map +1 -1
  96. package/dist/esm/components/icon-button.js +2 -2
  97. package/dist/esm/components/icon-button.js.map +3 -3
  98. package/dist/esm/components/schemas/shell.schema.d.ts +70 -70
  99. package/dist/esm/components/shell.context.d.ts +1 -0
  100. package/dist/esm/components/shell.context.d.ts.map +1 -1
  101. package/dist/esm/components/shell.context.js.map +2 -2
  102. package/dist/esm/components/shell.d.ts +6 -26
  103. package/dist/esm/components/shell.d.ts.map +1 -1
  104. package/dist/esm/components/shell.hooks.d.ts +19 -2
  105. package/dist/esm/components/shell.hooks.d.ts.map +1 -1
  106. package/dist/esm/components/shell.hooks.js +1 -1
  107. package/dist/esm/components/shell.hooks.js.map +3 -3
  108. package/dist/esm/components/shell.js +1 -1
  109. package/dist/esm/components/shell.js.map +3 -3
  110. package/dist/esm/components/shell.types.d.ts +21 -0
  111. package/dist/esm/components/shell.types.d.ts.map +1 -1
  112. package/dist/esm/components/shell.types.js.map +2 -2
  113. package/dist/esm/components/toggle-button.d.ts.map +1 -1
  114. package/dist/esm/components/toggle-button.js +1 -1
  115. package/dist/esm/components/toggle-button.js.map +3 -3
  116. package/dist/esm/components/toggle-icon-button.d.ts.map +1 -1
  117. package/dist/esm/components/toggle-icon-button.js +1 -1
  118. package/dist/esm/components/toggle-icon-button.js.map +3 -3
  119. package/dist/esm/hooks/index.d.ts +2 -0
  120. package/dist/esm/hooks/index.d.ts.map +1 -1
  121. package/dist/esm/hooks/index.js +1 -1
  122. package/dist/esm/hooks/index.js.map +3 -3
  123. package/dist/esm/hooks/use-live-announcer.d.ts.map +1 -1
  124. package/dist/esm/hooks/use-live-announcer.js +2 -2
  125. package/dist/esm/hooks/use-live-announcer.js.map +3 -3
  126. package/dist/esm/hooks/use-toggle-state.d.ts +37 -0
  127. package/dist/esm/hooks/use-toggle-state.d.ts.map +1 -0
  128. package/dist/esm/hooks/use-toggle-state.js +2 -0
  129. package/dist/esm/hooks/use-toggle-state.js.map +7 -0
  130. package/dist/esm/hooks/use-tooltip-wrapper.d.ts +29 -0
  131. package/dist/esm/hooks/use-tooltip-wrapper.d.ts.map +1 -0
  132. package/dist/esm/hooks/use-tooltip-wrapper.js +2 -0
  133. package/dist/esm/hooks/use-tooltip-wrapper.js.map +7 -0
  134. package/package.json +4 -4
  135. package/schemas/base-button.json +1 -1
  136. package/schemas/button.json +1 -1
  137. package/schemas/icon-button.json +1 -1
  138. package/schemas/index.json +6 -6
  139. package/schemas/toggle-button.json +1 -1
  140. package/schemas/toggle-icon-button.json +1 -1
  141. package/src/components/_internal/base-button.css +136 -614
  142. package/src/components/_internal/base-button.tsx +15 -13
  143. package/src/components/_internal/shell-bottom.tsx +305 -321
  144. package/src/components/_internal/shell-inspector.tsx +310 -320
  145. package/src/components/_internal/shell-prop-helpers.ts +53 -0
  146. package/src/components/_internal/shell-sidebar.tsx +370 -384
  147. package/src/components/button.tsx +13 -42
  148. package/src/components/chatbar.tsx +7 -3
  149. package/src/components/icon-button.tsx +20 -44
  150. package/src/components/image.css +10 -8
  151. package/src/components/shell.context.tsx +1 -0
  152. package/src/components/shell.hooks.ts +67 -2
  153. package/src/components/shell.tsx +199 -209
  154. package/src/components/shell.types.ts +23 -0
  155. package/src/components/toggle-button.tsx +30 -59
  156. package/src/components/toggle-icon-button.tsx +29 -51
  157. package/src/hooks/index.ts +2 -0
  158. package/src/hooks/use-live-announcer.ts +34 -7
  159. package/src/hooks/use-toggle-state.ts +72 -0
  160. package/src/hooks/use-tooltip-wrapper.ts +28 -0
  161. package/src/styles/tokens/color.css +11 -1
  162. package/styles.css +70 -381
  163. package/tokens/base.css +7 -1
  164. 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);