@kushagradhawan/kookie-ui 0.1.66 → 0.1.68

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 (11) hide show
  1. package/components.css +156 -12
  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/chatbar.css +3 -3
  10. package/src/components/sidebar.css +31 -0
  11. package/styles.css +156 -12
package/components.css CHANGED
@@ -16373,6 +16373,30 @@
16373
16373
  --base-menu-item-height: var(--space-8);
16374
16374
  --sidebar-item-height: var(--base-menu-item-height);
16375
16375
  }
16376
+ .rt-SidebarHeader:where(.rt-r-size-1), .rt-SidebarFooter:where(.rt-r-size-1) {
16377
+ --base-menu-content-padding: var(--space-2);
16378
+ --base-menu-item-padding-left: calc(var(--space-5) / 1.2);
16379
+ --base-menu-item-padding-right: var(--space-2);
16380
+ --base-menu-item-padding-y: var(--space-1);
16381
+ --base-menu-item-height: var(--space-5);
16382
+ --sidebar-item-height: var(--base-menu-item-height);
16383
+ }
16384
+ .rt-SidebarHeader:where(.rt-r-size-2), .rt-SidebarFooter:where(.rt-r-size-2) {
16385
+ --base-menu-content-padding: var(--space-3);
16386
+ --base-menu-item-padding-left: var(--space-3);
16387
+ --base-menu-item-padding-right: var(--space-3);
16388
+ --base-menu-item-padding-y: var(--space-1);
16389
+ --base-menu-item-height: var(--space-6);
16390
+ --sidebar-item-height: var(--base-menu-item-height);
16391
+ }
16392
+ .rt-SidebarHeader:where(.rt-r-size-3), .rt-SidebarFooter:where(.rt-r-size-3) {
16393
+ --base-menu-content-padding: var(--space-3);
16394
+ --base-menu-item-padding-left: var(--space-3);
16395
+ --base-menu-item-padding-right: var(--space-3);
16396
+ --base-menu-item-padding-y: var(--space-2);
16397
+ --base-menu-item-height: var(--space-7);
16398
+ --sidebar-item-height: var(--base-menu-item-height);
16399
+ }
16376
16400
  .rt-SidebarContent:where(.rt-r-size-1) :where(.rt-SidebarMenuButton) {
16377
16401
  gap: var(--component-gap-2);
16378
16402
  font-size: var(--font-size-1);
@@ -16453,6 +16477,30 @@
16453
16477
  --base-menu-item-height: var(--space-8);
16454
16478
  --sidebar-item-height: var(--base-menu-item-height);
16455
16479
  }
16480
+ .rt-SidebarHeader:where(.xs\:rt-r-size-1), .rt-SidebarFooter:where(.xs\:rt-r-size-1) {
16481
+ --base-menu-content-padding: var(--space-2);
16482
+ --base-menu-item-padding-left: calc(var(--space-5) / 1.2);
16483
+ --base-menu-item-padding-right: var(--space-2);
16484
+ --base-menu-item-padding-y: var(--space-1);
16485
+ --base-menu-item-height: var(--space-5);
16486
+ --sidebar-item-height: var(--base-menu-item-height);
16487
+ }
16488
+ .rt-SidebarHeader:where(.xs\:rt-r-size-2), .rt-SidebarFooter:where(.xs\:rt-r-size-2) {
16489
+ --base-menu-content-padding: var(--space-3);
16490
+ --base-menu-item-padding-left: var(--space-3);
16491
+ --base-menu-item-padding-right: var(--space-3);
16492
+ --base-menu-item-padding-y: var(--space-1);
16493
+ --base-menu-item-height: var(--space-6);
16494
+ --sidebar-item-height: var(--base-menu-item-height);
16495
+ }
16496
+ .rt-SidebarHeader:where(.xs\:rt-r-size-3), .rt-SidebarFooter:where(.xs\:rt-r-size-3) {
16497
+ --base-menu-content-padding: var(--space-3);
16498
+ --base-menu-item-padding-left: var(--space-3);
16499
+ --base-menu-item-padding-right: var(--space-3);
16500
+ --base-menu-item-padding-y: var(--space-2);
16501
+ --base-menu-item-height: var(--space-7);
16502
+ --sidebar-item-height: var(--base-menu-item-height);
16503
+ }
16456
16504
  .rt-SidebarContent:where(.xs\:rt-r-size-1) :where(.rt-SidebarMenuButton) {
16457
16505
  gap: var(--component-gap-2);
16458
16506
  font-size: var(--font-size-1);
@@ -16534,6 +16582,30 @@
16534
16582
  --base-menu-item-height: var(--space-8);
16535
16583
  --sidebar-item-height: var(--base-menu-item-height);
16536
16584
  }
16585
+ .rt-SidebarHeader:where(.sm\:rt-r-size-1), .rt-SidebarFooter:where(.sm\:rt-r-size-1) {
16586
+ --base-menu-content-padding: var(--space-2);
16587
+ --base-menu-item-padding-left: calc(var(--space-5) / 1.2);
16588
+ --base-menu-item-padding-right: var(--space-2);
16589
+ --base-menu-item-padding-y: var(--space-1);
16590
+ --base-menu-item-height: var(--space-5);
16591
+ --sidebar-item-height: var(--base-menu-item-height);
16592
+ }
16593
+ .rt-SidebarHeader:where(.sm\:rt-r-size-2), .rt-SidebarFooter:where(.sm\:rt-r-size-2) {
16594
+ --base-menu-content-padding: var(--space-3);
16595
+ --base-menu-item-padding-left: var(--space-3);
16596
+ --base-menu-item-padding-right: var(--space-3);
16597
+ --base-menu-item-padding-y: var(--space-1);
16598
+ --base-menu-item-height: var(--space-6);
16599
+ --sidebar-item-height: var(--base-menu-item-height);
16600
+ }
16601
+ .rt-SidebarHeader:where(.sm\:rt-r-size-3), .rt-SidebarFooter:where(.sm\:rt-r-size-3) {
16602
+ --base-menu-content-padding: var(--space-3);
16603
+ --base-menu-item-padding-left: var(--space-3);
16604
+ --base-menu-item-padding-right: var(--space-3);
16605
+ --base-menu-item-padding-y: var(--space-2);
16606
+ --base-menu-item-height: var(--space-7);
16607
+ --sidebar-item-height: var(--base-menu-item-height);
16608
+ }
16537
16609
  .rt-SidebarContent:where(.sm\:rt-r-size-1) :where(.rt-SidebarMenuButton) {
16538
16610
  gap: var(--component-gap-2);
16539
16611
  font-size: var(--font-size-1);
@@ -16615,6 +16687,30 @@
16615
16687
  --base-menu-item-height: var(--space-8);
16616
16688
  --sidebar-item-height: var(--base-menu-item-height);
16617
16689
  }
16690
+ .rt-SidebarHeader:where(.md\:rt-r-size-1), .rt-SidebarFooter:where(.md\:rt-r-size-1) {
16691
+ --base-menu-content-padding: var(--space-2);
16692
+ --base-menu-item-padding-left: calc(var(--space-5) / 1.2);
16693
+ --base-menu-item-padding-right: var(--space-2);
16694
+ --base-menu-item-padding-y: var(--space-1);
16695
+ --base-menu-item-height: var(--space-5);
16696
+ --sidebar-item-height: var(--base-menu-item-height);
16697
+ }
16698
+ .rt-SidebarHeader:where(.md\:rt-r-size-2), .rt-SidebarFooter:where(.md\:rt-r-size-2) {
16699
+ --base-menu-content-padding: var(--space-3);
16700
+ --base-menu-item-padding-left: var(--space-3);
16701
+ --base-menu-item-padding-right: var(--space-3);
16702
+ --base-menu-item-padding-y: var(--space-1);
16703
+ --base-menu-item-height: var(--space-6);
16704
+ --sidebar-item-height: var(--base-menu-item-height);
16705
+ }
16706
+ .rt-SidebarHeader:where(.md\:rt-r-size-3), .rt-SidebarFooter:where(.md\:rt-r-size-3) {
16707
+ --base-menu-content-padding: var(--space-3);
16708
+ --base-menu-item-padding-left: var(--space-3);
16709
+ --base-menu-item-padding-right: var(--space-3);
16710
+ --base-menu-item-padding-y: var(--space-2);
16711
+ --base-menu-item-height: var(--space-7);
16712
+ --sidebar-item-height: var(--base-menu-item-height);
16713
+ }
16618
16714
  .rt-SidebarContent:where(.md\:rt-r-size-1) :where(.rt-SidebarMenuButton) {
16619
16715
  gap: var(--component-gap-2);
16620
16716
  font-size: var(--font-size-1);
@@ -16696,6 +16792,30 @@
16696
16792
  --base-menu-item-height: var(--space-8);
16697
16793
  --sidebar-item-height: var(--base-menu-item-height);
16698
16794
  }
16795
+ .rt-SidebarHeader:where(.lg\:rt-r-size-1), .rt-SidebarFooter:where(.lg\:rt-r-size-1) {
16796
+ --base-menu-content-padding: var(--space-2);
16797
+ --base-menu-item-padding-left: calc(var(--space-5) / 1.2);
16798
+ --base-menu-item-padding-right: var(--space-2);
16799
+ --base-menu-item-padding-y: var(--space-1);
16800
+ --base-menu-item-height: var(--space-5);
16801
+ --sidebar-item-height: var(--base-menu-item-height);
16802
+ }
16803
+ .rt-SidebarHeader:where(.lg\:rt-r-size-2), .rt-SidebarFooter:where(.lg\:rt-r-size-2) {
16804
+ --base-menu-content-padding: var(--space-3);
16805
+ --base-menu-item-padding-left: var(--space-3);
16806
+ --base-menu-item-padding-right: var(--space-3);
16807
+ --base-menu-item-padding-y: var(--space-1);
16808
+ --base-menu-item-height: var(--space-6);
16809
+ --sidebar-item-height: var(--base-menu-item-height);
16810
+ }
16811
+ .rt-SidebarHeader:where(.lg\:rt-r-size-3), .rt-SidebarFooter:where(.lg\:rt-r-size-3) {
16812
+ --base-menu-content-padding: var(--space-3);
16813
+ --base-menu-item-padding-left: var(--space-3);
16814
+ --base-menu-item-padding-right: var(--space-3);
16815
+ --base-menu-item-padding-y: var(--space-2);
16816
+ --base-menu-item-height: var(--space-7);
16817
+ --sidebar-item-height: var(--base-menu-item-height);
16818
+ }
16699
16819
  .rt-SidebarContent:where(.lg\:rt-r-size-1) :where(.rt-SidebarMenuButton) {
16700
16820
  gap: var(--component-gap-2);
16701
16821
  font-size: var(--font-size-1);
@@ -16777,6 +16897,30 @@
16777
16897
  --base-menu-item-height: var(--space-8);
16778
16898
  --sidebar-item-height: var(--base-menu-item-height);
16779
16899
  }
16900
+ .rt-SidebarHeader:where(.xl\:rt-r-size-1), .rt-SidebarFooter:where(.xl\:rt-r-size-1) {
16901
+ --base-menu-content-padding: var(--space-2);
16902
+ --base-menu-item-padding-left: calc(var(--space-5) / 1.2);
16903
+ --base-menu-item-padding-right: var(--space-2);
16904
+ --base-menu-item-padding-y: var(--space-1);
16905
+ --base-menu-item-height: var(--space-5);
16906
+ --sidebar-item-height: var(--base-menu-item-height);
16907
+ }
16908
+ .rt-SidebarHeader:where(.xl\:rt-r-size-2), .rt-SidebarFooter:where(.xl\:rt-r-size-2) {
16909
+ --base-menu-content-padding: var(--space-3);
16910
+ --base-menu-item-padding-left: var(--space-3);
16911
+ --base-menu-item-padding-right: var(--space-3);
16912
+ --base-menu-item-padding-y: var(--space-1);
16913
+ --base-menu-item-height: var(--space-6);
16914
+ --sidebar-item-height: var(--base-menu-item-height);
16915
+ }
16916
+ .rt-SidebarHeader:where(.xl\:rt-r-size-3), .rt-SidebarFooter:where(.xl\:rt-r-size-3) {
16917
+ --base-menu-content-padding: var(--space-3);
16918
+ --base-menu-item-padding-left: var(--space-3);
16919
+ --base-menu-item-padding-right: var(--space-3);
16920
+ --base-menu-item-padding-y: var(--space-2);
16921
+ --base-menu-item-height: var(--space-7);
16922
+ --sidebar-item-height: var(--base-menu-item-height);
16923
+ }
16780
16924
  .rt-SidebarContent:where(.xl\:rt-r-size-1) :where(.rt-SidebarMenuButton) {
16781
16925
  gap: var(--component-gap-2);
16782
16926
  font-size: var(--font-size-1);
@@ -19897,8 +20041,8 @@
19897
20041
  letter-spacing: var(--letter-spacing-2);
19898
20042
  }
19899
20043
  .rt-ChatbarRoot:where(.rt-r-size-3) .rt-ChatbarBox {
19900
- border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-4)));
19901
- padding: var(--space-5);
20044
+ border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
20045
+ padding: var(--space-4);
19902
20046
  }
19903
20047
  .rt-ChatbarRoot:where(.rt-r-size-3) .rt-ChatbarInput {
19904
20048
  --text-area-padding-y: calc(var(--space-5) - var(--text-area-border-width));
@@ -19931,8 +20075,8 @@
19931
20075
  letter-spacing: var(--letter-spacing-2);
19932
20076
  }
19933
20077
  .rt-ChatbarRoot:where(.xs\:rt-r-size-3) .rt-ChatbarBox {
19934
- border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-4)));
19935
- padding: var(--space-5);
20078
+ border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
20079
+ padding: var(--space-4);
19936
20080
  }
19937
20081
  .rt-ChatbarRoot:where(.xs\:rt-r-size-3) .rt-ChatbarInput {
19938
20082
  --text-area-padding-y: calc(var(--space-5) - var(--text-area-border-width));
@@ -19966,8 +20110,8 @@
19966
20110
  letter-spacing: var(--letter-spacing-2);
19967
20111
  }
19968
20112
  .rt-ChatbarRoot:where(.sm\:rt-r-size-3) .rt-ChatbarBox {
19969
- border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-4)));
19970
- padding: var(--space-5);
20113
+ border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
20114
+ padding: var(--space-4);
19971
20115
  }
19972
20116
  .rt-ChatbarRoot:where(.sm\:rt-r-size-3) .rt-ChatbarInput {
19973
20117
  --text-area-padding-y: calc(var(--space-5) - var(--text-area-border-width));
@@ -20001,8 +20145,8 @@
20001
20145
  letter-spacing: var(--letter-spacing-2);
20002
20146
  }
20003
20147
  .rt-ChatbarRoot:where(.md\:rt-r-size-3) .rt-ChatbarBox {
20004
- border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-4)));
20005
- padding: var(--space-5);
20148
+ border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
20149
+ padding: var(--space-4);
20006
20150
  }
20007
20151
  .rt-ChatbarRoot:where(.md\:rt-r-size-3) .rt-ChatbarInput {
20008
20152
  --text-area-padding-y: calc(var(--space-5) - var(--text-area-border-width));
@@ -20036,8 +20180,8 @@
20036
20180
  letter-spacing: var(--letter-spacing-2);
20037
20181
  }
20038
20182
  .rt-ChatbarRoot:where(.lg\:rt-r-size-3) .rt-ChatbarBox {
20039
- border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-4)));
20040
- padding: var(--space-5);
20183
+ border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
20184
+ padding: var(--space-4);
20041
20185
  }
20042
20186
  .rt-ChatbarRoot:where(.lg\:rt-r-size-3) .rt-ChatbarInput {
20043
20187
  --text-area-padding-y: calc(var(--space-5) - var(--text-area-border-width));
@@ -20071,8 +20215,8 @@
20071
20215
  letter-spacing: var(--letter-spacing-2);
20072
20216
  }
20073
20217
  .rt-ChatbarRoot:where(.xl\:rt-r-size-3) .rt-ChatbarBox {
20074
- border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-4)));
20075
- padding: var(--space-5);
20218
+ border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
20219
+ padding: var(--space-4);
20076
20220
  }
20077
20221
  .rt-ChatbarRoot:where(.xl\:rt-r-size-3) .rt-ChatbarInput {
20078
20222
  --text-area-padding-y: calc(var(--space-5) - var(--text-area-border-width));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kushagradhawan/kookie-ui",
3
- "version": "0.1.66",
3
+ "version": "0.1.68",
4
4
  "description": "A modern React component library with beautiful design tokens, flexible theming, and comprehensive docs",
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": "2025-11-27T07:28:31.409Z",
282
+ "generatedAt": "2025-12-05T07:09:55.688Z",
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": "2025-11-27T07:28:31.414Z",
533
+ "generatedAt": "2025-12-05T07:09:55.693Z",
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": "2025-11-27T07:28:31.416Z",
316
+ "generatedAt": "2025-12-05T07:09:55.695Z",
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": "2025-11-27T07:28:31.418Z",
6
+ "generatedAt": "2025-12-05T07:09:55.697Z",
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": "2025-11-27T07:28:31.409Z",
290
+ "generatedAt": "2025-12-05T07:09:55.688Z",
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": "2025-11-27T07:28:31.414Z",
825
+ "generatedAt": "2025-12-05T07:09:55.693Z",
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": "2025-11-27T07:28:31.416Z",
1143
+ "generatedAt": "2025-12-05T07:09:55.695Z",
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": "2025-11-27T07:28:31.417Z",
1686
+ "generatedAt": "2025-12-05T07:09:55.696Z",
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": "2025-11-27T07:28:31.418Z",
2012
+ "generatedAt": "2025-12-05T07:09:55.697Z",
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": "2025-11-27T07:28:31.417Z",
541
+ "generatedAt": "2025-12-05T07:09:55.696Z",
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": "2025-11-27T07:28:31.418Z",
324
+ "generatedAt": "2025-12-05T07:09:55.697Z",
325
325
  "source": "Zod schema"
326
326
  }
package/src/components/chatbar.css CHANGED
@@ -189,9 +189,9 @@
189
189
  letter-spacing: var(--letter-spacing-2);
190
190
  }
191
191
  .rt-ChatbarRoot:where(.rt-r-size-3) .rt-ChatbarBox {
192
- /* Map Chatbar size 3 to Card size 4 */
193
- border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-4)));
194
- padding: var(--space-5);
192
+ /* Custom Chatbar size 3, different to Card size 4 */
193
+ border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
194
+ padding: var(--space-4);
195
195
  }
196
196
  .rt-ChatbarRoot:where(.rt-r-size-3) .rt-ChatbarInput {
197
197
  --text-area-padding-y: calc(var(--space-5) - var(--text-area-border-width));
package/src/components/sidebar.css CHANGED
@@ -550,6 +550,37 @@
550
550
  }
551
551
  }
552
552
 
553
+ /* Header/Footer sizing - mirror base menu tokens so buttons render correctly */
554
+ .rt-SidebarHeader,
555
+ .rt-SidebarFooter {
556
+ &:where(.rt-r-size-1) {
557
+ --base-menu-content-padding: var(--space-2);
558
+ --base-menu-item-padding-left: calc(var(--space-5) / 1.2);
559
+ --base-menu-item-padding-right: var(--space-2);
560
+ --base-menu-item-padding-y: var(--space-1);
561
+ --base-menu-item-height: var(--space-5);
562
+ --sidebar-item-height: var(--base-menu-item-height);
563
+ }
564
+
565
+ &:where(.rt-r-size-2) {
566
+ --base-menu-content-padding: var(--space-3);
567
+ --base-menu-item-padding-left: var(--space-3);
568
+ --base-menu-item-padding-right: var(--space-3);
569
+ --base-menu-item-padding-y: var(--space-1);
570
+ --base-menu-item-height: var(--space-6);
571
+ --sidebar-item-height: var(--base-menu-item-height);
572
+ }
573
+
574
+ &:where(.rt-r-size-3) {
575
+ --base-menu-content-padding: var(--space-3);
576
+ --base-menu-item-padding-left: var(--space-3);
577
+ --base-menu-item-padding-right: var(--space-3);
578
+ --base-menu-item-padding-y: var(--space-2);
579
+ --base-menu-item-height: var(--space-7);
580
+ --sidebar-item-height: var(--base-menu-item-height);
581
+ }
582
+ }
583
+
553
584
  /* Size-specific menu button styling - inherit from base menu */
554
585
  .rt-SidebarContent:where(.rt-r-size-1) {
555
586
  & :where(.rt-SidebarMenuButton) {
package/styles.css CHANGED
@@ -21378,6 +21378,30 @@
21378
21378
  --base-menu-item-height: var(--space-8);
21379
21379
  --sidebar-item-height: var(--base-menu-item-height);
21380
21380
  }
21381
+ .rt-SidebarHeader:where(.rt-r-size-1), .rt-SidebarFooter:where(.rt-r-size-1){
21382
+ --base-menu-content-padding: var(--space-2);
21383
+ --base-menu-item-padding-left: calc(var(--space-5) / 1.2);
21384
+ --base-menu-item-padding-right: var(--space-2);
21385
+ --base-menu-item-padding-y: var(--space-1);
21386
+ --base-menu-item-height: var(--space-5);
21387
+ --sidebar-item-height: var(--base-menu-item-height);
21388
+ }
21389
+ .rt-SidebarHeader:where(.rt-r-size-2), .rt-SidebarFooter:where(.rt-r-size-2){
21390
+ --base-menu-content-padding: var(--space-3);
21391
+ --base-menu-item-padding-left: var(--space-3);
21392
+ --base-menu-item-padding-right: var(--space-3);
21393
+ --base-menu-item-padding-y: var(--space-1);
21394
+ --base-menu-item-height: var(--space-6);
21395
+ --sidebar-item-height: var(--base-menu-item-height);
21396
+ }
21397
+ .rt-SidebarHeader:where(.rt-r-size-3), .rt-SidebarFooter:where(.rt-r-size-3){
21398
+ --base-menu-content-padding: var(--space-3);
21399
+ --base-menu-item-padding-left: var(--space-3);
21400
+ --base-menu-item-padding-right: var(--space-3);
21401
+ --base-menu-item-padding-y: var(--space-2);
21402
+ --base-menu-item-height: var(--space-7);
21403
+ --sidebar-item-height: var(--base-menu-item-height);
21404
+ }
21381
21405
  .rt-SidebarContent:where(.rt-r-size-1) :where(.rt-SidebarMenuButton){
21382
21406
  gap: var(--component-gap-2);
21383
21407
  font-size: var(--font-size-1);
@@ -21458,6 +21482,30 @@
21458
21482
  --base-menu-item-height: var(--space-8);
21459
21483
  --sidebar-item-height: var(--base-menu-item-height);
21460
21484
  }
21485
+ .rt-SidebarHeader:where(.xs\:rt-r-size-1), .rt-SidebarFooter:where(.xs\:rt-r-size-1){
21486
+ --base-menu-content-padding: var(--space-2);
21487
+ --base-menu-item-padding-left: calc(var(--space-5) / 1.2);
21488
+ --base-menu-item-padding-right: var(--space-2);
21489
+ --base-menu-item-padding-y: var(--space-1);
21490
+ --base-menu-item-height: var(--space-5);
21491
+ --sidebar-item-height: var(--base-menu-item-height);
21492
+ }
21493
+ .rt-SidebarHeader:where(.xs\:rt-r-size-2), .rt-SidebarFooter:where(.xs\:rt-r-size-2){
21494
+ --base-menu-content-padding: var(--space-3);
21495
+ --base-menu-item-padding-left: var(--space-3);
21496
+ --base-menu-item-padding-right: var(--space-3);
21497
+ --base-menu-item-padding-y: var(--space-1);
21498
+ --base-menu-item-height: var(--space-6);
21499
+ --sidebar-item-height: var(--base-menu-item-height);
21500
+ }
21501
+ .rt-SidebarHeader:where(.xs\:rt-r-size-3), .rt-SidebarFooter:where(.xs\:rt-r-size-3){
21502
+ --base-menu-content-padding: var(--space-3);
21503
+ --base-menu-item-padding-left: var(--space-3);
21504
+ --base-menu-item-padding-right: var(--space-3);
21505
+ --base-menu-item-padding-y: var(--space-2);
21506
+ --base-menu-item-height: var(--space-7);
21507
+ --sidebar-item-height: var(--base-menu-item-height);
21508
+ }
21461
21509
  .rt-SidebarContent:where(.xs\:rt-r-size-1) :where(.rt-SidebarMenuButton){
21462
21510
  gap: var(--component-gap-2);
21463
21511
  font-size: var(--font-size-1);
@@ -21539,6 +21587,30 @@
21539
21587
  --base-menu-item-height: var(--space-8);
21540
21588
  --sidebar-item-height: var(--base-menu-item-height);
21541
21589
  }
21590
+ .rt-SidebarHeader:where(.sm\:rt-r-size-1), .rt-SidebarFooter:where(.sm\:rt-r-size-1){
21591
+ --base-menu-content-padding: var(--space-2);
21592
+ --base-menu-item-padding-left: calc(var(--space-5) / 1.2);
21593
+ --base-menu-item-padding-right: var(--space-2);
21594
+ --base-menu-item-padding-y: var(--space-1);
21595
+ --base-menu-item-height: var(--space-5);
21596
+ --sidebar-item-height: var(--base-menu-item-height);
21597
+ }
21598
+ .rt-SidebarHeader:where(.sm\:rt-r-size-2), .rt-SidebarFooter:where(.sm\:rt-r-size-2){
21599
+ --base-menu-content-padding: var(--space-3);
21600
+ --base-menu-item-padding-left: var(--space-3);
21601
+ --base-menu-item-padding-right: var(--space-3);
21602
+ --base-menu-item-padding-y: var(--space-1);
21603
+ --base-menu-item-height: var(--space-6);
21604
+ --sidebar-item-height: var(--base-menu-item-height);
21605
+ }
21606
+ .rt-SidebarHeader:where(.sm\:rt-r-size-3), .rt-SidebarFooter:where(.sm\:rt-r-size-3){
21607
+ --base-menu-content-padding: var(--space-3);
21608
+ --base-menu-item-padding-left: var(--space-3);
21609
+ --base-menu-item-padding-right: var(--space-3);
21610
+ --base-menu-item-padding-y: var(--space-2);
21611
+ --base-menu-item-height: var(--space-7);
21612
+ --sidebar-item-height: var(--base-menu-item-height);
21613
+ }
21542
21614
  .rt-SidebarContent:where(.sm\:rt-r-size-1) :where(.rt-SidebarMenuButton){
21543
21615
  gap: var(--component-gap-2);
21544
21616
  font-size: var(--font-size-1);
@@ -21620,6 +21692,30 @@
21620
21692
  --base-menu-item-height: var(--space-8);
21621
21693
  --sidebar-item-height: var(--base-menu-item-height);
21622
21694
  }
21695
+ .rt-SidebarHeader:where(.md\:rt-r-size-1), .rt-SidebarFooter:where(.md\:rt-r-size-1){
21696
+ --base-menu-content-padding: var(--space-2);
21697
+ --base-menu-item-padding-left: calc(var(--space-5) / 1.2);
21698
+ --base-menu-item-padding-right: var(--space-2);
21699
+ --base-menu-item-padding-y: var(--space-1);
21700
+ --base-menu-item-height: var(--space-5);
21701
+ --sidebar-item-height: var(--base-menu-item-height);
21702
+ }
21703
+ .rt-SidebarHeader:where(.md\:rt-r-size-2), .rt-SidebarFooter:where(.md\:rt-r-size-2){
21704
+ --base-menu-content-padding: var(--space-3);
21705
+ --base-menu-item-padding-left: var(--space-3);
21706
+ --base-menu-item-padding-right: var(--space-3);
21707
+ --base-menu-item-padding-y: var(--space-1);
21708
+ --base-menu-item-height: var(--space-6);
21709
+ --sidebar-item-height: var(--base-menu-item-height);
21710
+ }
21711
+ .rt-SidebarHeader:where(.md\:rt-r-size-3), .rt-SidebarFooter:where(.md\:rt-r-size-3){
21712
+ --base-menu-content-padding: var(--space-3);
21713
+ --base-menu-item-padding-left: var(--space-3);
21714
+ --base-menu-item-padding-right: var(--space-3);
21715
+ --base-menu-item-padding-y: var(--space-2);
21716
+ --base-menu-item-height: var(--space-7);
21717
+ --sidebar-item-height: var(--base-menu-item-height);
21718
+ }
21623
21719
  .rt-SidebarContent:where(.md\:rt-r-size-1) :where(.rt-SidebarMenuButton){
21624
21720
  gap: var(--component-gap-2);
21625
21721
  font-size: var(--font-size-1);
@@ -21701,6 +21797,30 @@
21701
21797
  --base-menu-item-height: var(--space-8);
21702
21798
  --sidebar-item-height: var(--base-menu-item-height);
21703
21799
  }
21800
+ .rt-SidebarHeader:where(.lg\:rt-r-size-1), .rt-SidebarFooter:where(.lg\:rt-r-size-1){
21801
+ --base-menu-content-padding: var(--space-2);
21802
+ --base-menu-item-padding-left: calc(var(--space-5) / 1.2);
21803
+ --base-menu-item-padding-right: var(--space-2);
21804
+ --base-menu-item-padding-y: var(--space-1);
21805
+ --base-menu-item-height: var(--space-5);
21806
+ --sidebar-item-height: var(--base-menu-item-height);
21807
+ }
21808
+ .rt-SidebarHeader:where(.lg\:rt-r-size-2), .rt-SidebarFooter:where(.lg\:rt-r-size-2){
21809
+ --base-menu-content-padding: var(--space-3);
21810
+ --base-menu-item-padding-left: var(--space-3);
21811
+ --base-menu-item-padding-right: var(--space-3);
21812
+ --base-menu-item-padding-y: var(--space-1);
21813
+ --base-menu-item-height: var(--space-6);
21814
+ --sidebar-item-height: var(--base-menu-item-height);
21815
+ }
21816
+ .rt-SidebarHeader:where(.lg\:rt-r-size-3), .rt-SidebarFooter:where(.lg\:rt-r-size-3){
21817
+ --base-menu-content-padding: var(--space-3);
21818
+ --base-menu-item-padding-left: var(--space-3);
21819
+ --base-menu-item-padding-right: var(--space-3);
21820
+ --base-menu-item-padding-y: var(--space-2);
21821
+ --base-menu-item-height: var(--space-7);
21822
+ --sidebar-item-height: var(--base-menu-item-height);
21823
+ }
21704
21824
  .rt-SidebarContent:where(.lg\:rt-r-size-1) :where(.rt-SidebarMenuButton){
21705
21825
  gap: var(--component-gap-2);
21706
21826
  font-size: var(--font-size-1);
@@ -21782,6 +21902,30 @@
21782
21902
  --base-menu-item-height: var(--space-8);
21783
21903
  --sidebar-item-height: var(--base-menu-item-height);
21784
21904
  }
21905
+ .rt-SidebarHeader:where(.xl\:rt-r-size-1), .rt-SidebarFooter:where(.xl\:rt-r-size-1){
21906
+ --base-menu-content-padding: var(--space-2);
21907
+ --base-menu-item-padding-left: calc(var(--space-5) / 1.2);
21908
+ --base-menu-item-padding-right: var(--space-2);
21909
+ --base-menu-item-padding-y: var(--space-1);
21910
+ --base-menu-item-height: var(--space-5);
21911
+ --sidebar-item-height: var(--base-menu-item-height);
21912
+ }
21913
+ .rt-SidebarHeader:where(.xl\:rt-r-size-2), .rt-SidebarFooter:where(.xl\:rt-r-size-2){
21914
+ --base-menu-content-padding: var(--space-3);
21915
+ --base-menu-item-padding-left: var(--space-3);
21916
+ --base-menu-item-padding-right: var(--space-3);
21917
+ --base-menu-item-padding-y: var(--space-1);
21918
+ --base-menu-item-height: var(--space-6);
21919
+ --sidebar-item-height: var(--base-menu-item-height);
21920
+ }
21921
+ .rt-SidebarHeader:where(.xl\:rt-r-size-3), .rt-SidebarFooter:where(.xl\:rt-r-size-3){
21922
+ --base-menu-content-padding: var(--space-3);
21923
+ --base-menu-item-padding-left: var(--space-3);
21924
+ --base-menu-item-padding-right: var(--space-3);
21925
+ --base-menu-item-padding-y: var(--space-2);
21926
+ --base-menu-item-height: var(--space-7);
21927
+ --sidebar-item-height: var(--base-menu-item-height);
21928
+ }
21785
21929
  .rt-SidebarContent:where(.xl\:rt-r-size-1) :where(.rt-SidebarMenuButton){
21786
21930
  gap: var(--component-gap-2);
21787
21931
  font-size: var(--font-size-1);
@@ -24902,8 +25046,8 @@
24902
25046
  letter-spacing: var(--letter-spacing-2);
24903
25047
  }
24904
25048
  .rt-ChatbarRoot:where(.rt-r-size-3) .rt-ChatbarBox{
24905
- border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-4)));
24906
- padding: var(--space-5);
25049
+ border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
25050
+ padding: var(--space-4);
24907
25051
  }
24908
25052
  .rt-ChatbarRoot:where(.rt-r-size-3) .rt-ChatbarInput{
24909
25053
  --text-area-padding-y: calc(var(--space-5) - var(--text-area-border-width));
@@ -24936,8 +25080,8 @@
24936
25080
  letter-spacing: var(--letter-spacing-2);
24937
25081
  }
24938
25082
  .rt-ChatbarRoot:where(.xs\:rt-r-size-3) .rt-ChatbarBox{
24939
- border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-4)));
24940
- padding: var(--space-5);
25083
+ border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
25084
+ padding: var(--space-4);
24941
25085
  }
24942
25086
  .rt-ChatbarRoot:where(.xs\:rt-r-size-3) .rt-ChatbarInput{
24943
25087
  --text-area-padding-y: calc(var(--space-5) - var(--text-area-border-width));
@@ -24971,8 +25115,8 @@
24971
25115
  letter-spacing: var(--letter-spacing-2);
24972
25116
  }
24973
25117
  .rt-ChatbarRoot:where(.sm\:rt-r-size-3) .rt-ChatbarBox{
24974
- border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-4)));
24975
- padding: var(--space-5);
25118
+ border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
25119
+ padding: var(--space-4);
24976
25120
  }
24977
25121
  .rt-ChatbarRoot:where(.sm\:rt-r-size-3) .rt-ChatbarInput{
24978
25122
  --text-area-padding-y: calc(var(--space-5) - var(--text-area-border-width));
@@ -25006,8 +25150,8 @@
25006
25150
  letter-spacing: var(--letter-spacing-2);
25007
25151
  }
25008
25152
  .rt-ChatbarRoot:where(.md\:rt-r-size-3) .rt-ChatbarBox{
25009
- border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-4)));
25010
- padding: var(--space-5);
25153
+ border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
25154
+ padding: var(--space-4);
25011
25155
  }
25012
25156
  .rt-ChatbarRoot:where(.md\:rt-r-size-3) .rt-ChatbarInput{
25013
25157
  --text-area-padding-y: calc(var(--space-5) - var(--text-area-border-width));
@@ -25041,8 +25185,8 @@
25041
25185
  letter-spacing: var(--letter-spacing-2);
25042
25186
  }
25043
25187
  .rt-ChatbarRoot:where(.lg\:rt-r-size-3) .rt-ChatbarBox{
25044
- border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-4)));
25045
- padding: var(--space-5);
25188
+ border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
25189
+ padding: var(--space-4);
25046
25190
  }
25047
25191
  .rt-ChatbarRoot:where(.lg\:rt-r-size-3) .rt-ChatbarInput{
25048
25192
  --text-area-padding-y: calc(var(--space-5) - var(--text-area-border-width));
@@ -25076,8 +25220,8 @@
25076
25220
  letter-spacing: var(--letter-spacing-2);
25077
25221
  }
25078
25222
  .rt-ChatbarRoot:where(.xl\:rt-r-size-3) .rt-ChatbarBox{
25079
- border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-4)));
25080
- padding: var(--space-5);
25223
+ border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
25224
+ padding: var(--space-4);
25081
25225
  }
25082
25226
  .rt-ChatbarRoot:where(.xl\:rt-r-size-3) .rt-ChatbarInput{
25083
25227
  --text-area-padding-y: calc(var(--space-5) - var(--text-area-border-width));