@kushagradhawan/kookie-ui 0.1.110 → 0.1.112

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 (16) hide show
  1. package/components.css +9 -3
  2. package/package.json +1 -1
  3. package/schemas/base-button.json +1 -1
  4. package/schemas/button.json +1 -1
  5. package/schemas/icon-button.json +1 -1
  6. package/schemas/index.json +6 -6
  7. package/schemas/toggle-button.json +1 -1
  8. package/schemas/toggle-icon-button.json +1 -1
  9. package/src/components/_internal/base-dialog.css +1 -0
  10. package/src/components/_internal/base-menu.css +1 -0
  11. package/src/components/hover-card.css +1 -0
  12. package/src/components/popover.css +1 -0
  13. package/src/components/select.css +1 -0
  14. package/src/components/sidebar.css +6 -3
  15. package/src/components/tooltip.css +1 -0
  16. package/styles.css +9 -3
package/components.css CHANGED
@@ -1624,6 +1624,7 @@
1624
1624
  .rt-BaseDialogOverlay {
1625
1625
  position: fixed;
1626
1626
  inset: 0;
1627
+ z-index: 100;
1627
1628
  }
1628
1629
  .rt-BaseDialogOverlay::before {
1629
1630
  position: fixed;
@@ -6973,6 +6974,7 @@
6973
6974
  flex-direction: column;
6974
6975
  box-sizing: border-box;
6975
6976
  overflow: hidden;
6977
+ z-index: 200;
6976
6978
  background-color: var(--color-panel);
6977
6979
  -webkit-backdrop-filter: var(--backdrop-filter-panel);
6978
6980
  backdrop-filter: var(--backdrop-filter-panel);
@@ -10158,6 +10160,7 @@
10158
10160
  box-shadow: var(--shadow-4);
10159
10161
  overflow: auto;
10160
10162
  position: relative;
10163
+ z-index: 200;
10161
10164
  --inset-padding-top: var(--hover-card-content-padding);
10162
10165
  --inset-padding-right: var(--hover-card-content-padding);
10163
10166
  --inset-padding-bottom: var(--hover-card-content-padding);
@@ -11761,6 +11764,7 @@
11761
11764
  outline: 0;
11762
11765
  overflow: auto;
11763
11766
  position: relative;
11767
+ z-index: 200;
11764
11768
  transition: var(--transition-background-blur);
11765
11769
  --inset-padding-top: var(--popover-content-padding);
11766
11770
  --inset-padding-right: var(--popover-content-padding);
@@ -14191,6 +14195,7 @@
14191
14195
  --scrollarea-scrollbar-horizontal-margin-left: var(--select-content-padding);
14192
14196
  --scrollarea-scrollbar-horizontal-margin-right: var(--select-content-padding);
14193
14197
  overflow: hidden;
14198
+ z-index: 200;
14194
14199
  background-color: var(--color-panel);
14195
14200
  -webkit-backdrop-filter: var(--backdrop-filter-panel);
14196
14201
  backdrop-filter: var(--backdrop-filter-panel);
@@ -16013,15 +16018,15 @@
16013
16018
  border-radius: var(--radius-2);
16014
16019
  transition: background-color var(--motion-duration-micro) var(--motion-ease-standard), color var(--motion-duration-small) var(--motion-ease-standard);
16015
16020
  }
16016
- :where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-1 .rt-SidebarMenuIconWrapper) {
16021
+ .rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-1 .rt-SidebarMenuIconWrapper {
16017
16022
  padding: var(--space-2) var(--space-2);
16018
16023
  border-radius: var(--radius-1);
16019
16024
  }
16020
- :where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-2 .rt-SidebarMenuIconWrapper) {
16025
+ .rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-2 .rt-SidebarMenuIconWrapper {
16021
16026
  padding: var(--space-2);
16022
16027
  border-radius: var(--radius-2);
16023
16028
  }
16024
- :where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-3 .rt-SidebarMenuIconWrapper) {
16029
+ .rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-3 .rt-SidebarMenuIconWrapper {
16025
16030
  padding: var(--space-3);
16026
16031
  border-radius: var(--radius-2);
16027
16032
  }
@@ -19983,6 +19988,7 @@
19983
19988
  padding: var(--space-1) var(--space-2);
19984
19989
  background-color: var(--gray-12);
19985
19990
  border-radius: var(--radius-1);
19991
+ z-index: 300;
19986
19992
  transform-origin: var(--radix-tooltip-content-transform-origin);
19987
19993
  animation-duration: var(--motion-duration-small);
19988
19994
  animation-timing-function: var(--motion-spring-snappy);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kushagradhawan/kookie-ui",
3
- "version": "0.1.110",
3
+ "version": "0.1.112",
4
4
  "description": "A modern React component library with beautiful design tokens, flexible theming, and comprehensive documentation",
5
5
  "keywords": [
6
6
  "react",
package/schemas/base-button.json CHANGED
@@ -279,6 +279,6 @@
279
279
  "title": "Base-button Component Props",
280
280
  "description": "Props schema for the base-button component in Kookie UI",
281
281
  "version": "1.0.0",
282
- "generatedAt": "2026-01-07T05:55:02.780Z",
282
+ "generatedAt": "2026-01-07T16:00:27.817Z",
283
283
  "source": "Zod schema"
284
284
  }
package/schemas/button.json CHANGED
@@ -530,6 +530,6 @@
530
530
  "title": "Button Component Props",
531
531
  "description": "Props schema for the button component in Kookie UI",
532
532
  "version": "1.0.0",
533
- "generatedAt": "2026-01-07T05:55:02.786Z",
533
+ "generatedAt": "2026-01-07T16:00:27.824Z",
534
534
  "source": "Zod schema"
535
535
  }
package/schemas/icon-button.json CHANGED
@@ -313,6 +313,6 @@
313
313
  "title": "Icon-button Component Props",
314
314
  "description": "Props schema for the icon-button component in Kookie UI",
315
315
  "version": "1.0.0",
316
- "generatedAt": "2026-01-07T05:55:02.787Z",
316
+ "generatedAt": "2026-01-07T16:00:27.825Z",
317
317
  "source": "Zod schema"
318
318
  }
package/schemas/index.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "title": "Kookie UI Button Components",
4
4
  "description": "Complete JSON Schema collection for all button components in Kookie UI",
5
5
  "version": "1.0.0",
6
- "generatedAt": "2026-01-07T05:55:02.790Z",
6
+ "generatedAt": "2026-01-07T16:00:27.828Z",
7
7
  "source": "Zod schemas",
8
8
  "components": {
9
9
  "base-button": {
@@ -287,7 +287,7 @@
287
287
  "title": "Base-button Component Props",
288
288
  "description": "Props schema for the base-button component in Kookie UI",
289
289
  "version": "1.0.0",
290
- "generatedAt": "2026-01-07T05:55:02.780Z",
290
+ "generatedAt": "2026-01-07T16:00:27.817Z",
291
291
  "source": "Zod schema"
292
292
  },
293
293
  "button": {
@@ -822,7 +822,7 @@
822
822
  "title": "Button Component Props",
823
823
  "description": "Props schema for the button component in Kookie UI",
824
824
  "version": "1.0.0",
825
- "generatedAt": "2026-01-07T05:55:02.786Z",
825
+ "generatedAt": "2026-01-07T16:00:27.824Z",
826
826
  "source": "Zod schema"
827
827
  },
828
828
  "icon-button": {
@@ -1140,7 +1140,7 @@
1140
1140
  "title": "Icon-button Component Props",
1141
1141
  "description": "Props schema for the icon-button component in Kookie UI",
1142
1142
  "version": "1.0.0",
1143
- "generatedAt": "2026-01-07T05:55:02.787Z",
1143
+ "generatedAt": "2026-01-07T16:00:27.825Z",
1144
1144
  "source": "Zod schema"
1145
1145
  },
1146
1146
  "toggle-button": {
@@ -1683,7 +1683,7 @@
1683
1683
  "title": "Toggle-button Component Props",
1684
1684
  "description": "Props schema for the toggle-button component in Kookie UI",
1685
1685
  "version": "1.0.0",
1686
- "generatedAt": "2026-01-07T05:55:02.789Z",
1686
+ "generatedAt": "2026-01-07T16:00:27.827Z",
1687
1687
  "source": "Zod schema"
1688
1688
  },
1689
1689
  "toggle-icon-button": {
@@ -2009,7 +2009,7 @@
2009
2009
  "title": "Toggle-icon-button Component Props",
2010
2010
  "description": "Props schema for the toggle-icon-button component in Kookie UI",
2011
2011
  "version": "1.0.0",
2012
- "generatedAt": "2026-01-07T05:55:02.790Z",
2012
+ "generatedAt": "2026-01-07T16:00:27.828Z",
2013
2013
  "source": "Zod schema"
2014
2014
  }
2015
2015
  }
package/schemas/toggle-button.json CHANGED
@@ -538,6 +538,6 @@
538
538
  "title": "Toggle-button Component Props",
539
539
  "description": "Props schema for the toggle-button component in Kookie UI",
540
540
  "version": "1.0.0",
541
- "generatedAt": "2026-01-07T05:55:02.789Z",
541
+ "generatedAt": "2026-01-07T16:00:27.827Z",
542
542
  "source": "Zod schema"
543
543
  }
package/schemas/toggle-icon-button.json CHANGED
@@ -321,6 +321,6 @@
321
321
  "title": "Toggle-icon-button Component Props",
322
322
  "description": "Props schema for the toggle-icon-button component in Kookie UI",
323
323
  "version": "1.0.0",
324
- "generatedAt": "2026-01-07T05:55:02.790Z",
324
+ "generatedAt": "2026-01-07T16:00:27.828Z",
325
325
  "source": "Zod schema"
326
326
  }
package/src/components/_internal/base-dialog.css CHANGED
@@ -1,6 +1,7 @@
1
1
  .rt-BaseDialogOverlay {
2
2
  position: fixed;
3
3
  inset: 0;
4
+ z-index: 100; /* Above shell header (50) and shell stacked panes (30-40) */
4
5
 
5
6
  &::before {
6
7
  position: fixed;
package/src/components/_internal/base-menu.css CHANGED
@@ -8,6 +8,7 @@
8
8
  flex-direction: column;
9
9
  box-sizing: border-box;
10
10
  overflow: hidden;
11
+ z-index: 200; /* Above dialogs (100) so menus inside dialogs/sheets work */
11
12
 
12
13
  background-color: var(--color-panel);
13
14
  backdrop-filter: var(--backdrop-filter-panel);
package/src/components/hover-card.css CHANGED
@@ -3,6 +3,7 @@
3
3
  box-shadow: var(--shadow-4);
4
4
  overflow: auto;
5
5
  position: relative;
6
+ z-index: 200; /* Above dialogs (100) so hover cards inside dialogs/sheets work */
6
7
 
7
8
  --inset-padding-top: var(--hover-card-content-padding);
8
9
  --inset-padding-right: var(--hover-card-content-padding);
package/src/components/popover.css CHANGED
@@ -7,6 +7,7 @@
7
7
  outline: 0;
8
8
  overflow: auto;
9
9
  position: relative;
10
+ z-index: 200; /* Above dialogs (100) so popovers inside dialogs/sheets work */
10
11
  transition: var(--transition-background-blur);
11
12
 
12
13
  --inset-padding-top: var(--popover-content-padding);
package/src/components/select.css CHANGED
@@ -77,6 +77,7 @@
77
77
  --scrollarea-scrollbar-horizontal-margin-right: var(--select-content-padding);
78
78
 
79
79
  overflow: hidden;
80
+ z-index: 200; /* Above dialogs (100) so select inside dialogs/sheets work */
80
81
  background-color: var(--color-panel);
81
82
  backdrop-filter: var(--backdrop-filter-panel);
82
83
  box-shadow: var(--shadow-5);
package/src/components/sidebar.css CHANGED
@@ -227,17 +227,20 @@
227
227
  }
228
228
 
229
229
  /* Size-specific icon wrapper padding */
230
- :where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-1 .rt-SidebarMenuIconWrapper) {
230
+ /* stylelint-disable-next-line selector-max-specificity */
231
+ .rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-1 .rt-SidebarMenuIconWrapper {
231
232
  padding: var(--space-2) var(--space-2);
232
233
  border-radius: var(--radius-1);
233
234
  }
234
235
 
235
- :where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-2 .rt-SidebarMenuIconWrapper) {
236
+ /* stylelint-disable-next-line selector-max-specificity */
237
+ .rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-2 .rt-SidebarMenuIconWrapper {
236
238
  padding: var(--space-2);
237
239
  border-radius: var(--radius-2);
238
240
  }
239
241
 
240
- :where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-3 .rt-SidebarMenuIconWrapper) {
242
+ /* stylelint-disable-next-line selector-max-specificity */
243
+ .rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-3 .rt-SidebarMenuIconWrapper {
241
244
  padding: var(--space-3);
242
245
  border-radius: var(--radius-2);
243
246
  }
package/src/components/tooltip.css CHANGED
@@ -3,6 +3,7 @@
3
3
  padding: var(--space-1) var(--space-2);
4
4
  background-color: var(--gray-12);
5
5
  border-radius: var(--radius-1);
6
+ z-index: 300; /* Tooltips always on top - above dialogs (100) and menus (200) */
6
7
 
7
8
  transform-origin: var(--radix-tooltip-content-transform-origin);
8
9
 
package/styles.css CHANGED
@@ -6657,6 +6657,7 @@
6657
6657
  .rt-BaseDialogOverlay{
6658
6658
  position: fixed;
6659
6659
  inset: 0;
6660
+ z-index: 100;
6660
6661
  }
6661
6662
  .rt-BaseDialogOverlay::before{
6662
6663
  position: fixed;
@@ -11984,6 +11985,7 @@
11984
11985
  flex-direction: column;
11985
11986
  box-sizing: border-box;
11986
11987
  overflow: hidden;
11988
+ z-index: 200;
11987
11989
  background-color: var(--color-panel);
11988
11990
  -webkit-backdrop-filter: var(--backdrop-filter-panel);
11989
11991
  backdrop-filter: var(--backdrop-filter-panel);
@@ -15169,6 +15171,7 @@
15169
15171
  box-shadow: var(--shadow-4);
15170
15172
  overflow: auto;
15171
15173
  position: relative;
15174
+ z-index: 200;
15172
15175
  --inset-padding-top: var(--hover-card-content-padding);
15173
15176
  --inset-padding-right: var(--hover-card-content-padding);
15174
15177
  --inset-padding-bottom: var(--hover-card-content-padding);
@@ -16772,6 +16775,7 @@
16772
16775
  outline: 0;
16773
16776
  overflow: auto;
16774
16777
  position: relative;
16778
+ z-index: 200;
16775
16779
  transition: var(--transition-background-blur);
16776
16780
  --inset-padding-top: var(--popover-content-padding);
16777
16781
  --inset-padding-right: var(--popover-content-padding);
@@ -19202,6 +19206,7 @@
19202
19206
  --scrollarea-scrollbar-horizontal-margin-left: var(--select-content-padding);
19203
19207
  --scrollarea-scrollbar-horizontal-margin-right: var(--select-content-padding);
19204
19208
  overflow: hidden;
19209
+ z-index: 200;
19205
19210
  background-color: var(--color-panel);
19206
19211
  -webkit-backdrop-filter: var(--backdrop-filter-panel);
19207
19212
  backdrop-filter: var(--backdrop-filter-panel);
@@ -21024,15 +21029,15 @@
21024
21029
  border-radius: var(--radius-2);
21025
21030
  transition: background-color var(--motion-duration-micro) var(--motion-ease-standard), color var(--motion-duration-small) var(--motion-ease-standard);
21026
21031
  }
21027
- :where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-1 .rt-SidebarMenuIconWrapper){
21032
+ .rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-1 .rt-SidebarMenuIconWrapper{
21028
21033
  padding: var(--space-2) var(--space-2);
21029
21034
  border-radius: var(--radius-1);
21030
21035
  }
21031
- :where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-2 .rt-SidebarMenuIconWrapper){
21036
+ .rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-2 .rt-SidebarMenuIconWrapper{
21032
21037
  padding: var(--space-2);
21033
21038
  border-radius: var(--radius-2);
21034
21039
  }
21035
- :where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-3 .rt-SidebarMenuIconWrapper){
21040
+ .rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-3 .rt-SidebarMenuIconWrapper{
21036
21041
  padding: var(--space-3);
21037
21042
  border-radius: var(--radius-2);
21038
21043
  }
@@ -24994,6 +24999,7 @@
24994
24999
  padding: var(--space-1) var(--space-2);
24995
25000
  background-color: var(--gray-12);
24996
25001
  border-radius: var(--radius-1);
25002
+ z-index: 300;
24997
25003
  transform-origin: var(--radix-tooltip-content-transform-origin);
24998
25004
  animation-duration: var(--motion-duration-small);
24999
25005
  animation-timing-function: var(--motion-spring-snappy);