@kushagradhawan/kookie-ui 0.1.67 → 0.1.69

package/schemas/index.json

@@ -3,7 +3,7 @@
   "title": "Kookie UI Button Components",
   "description": "Complete JSON Schema collection for all button components in Kookie UI",
   "version": "1.0.0",
-  "generatedAt": "2025-12-04T10:05:53.527Z",
+  "generatedAt": "2025-12-05T07:18:52.485Z",
   "source": "Zod schemas",
   "components": {
     "base-button": {
@@ -287,7 +287,7 @@
       "title": "Base-button Component Props",
       "description": "Props schema for the base-button component in Kookie UI",
       "version": "1.0.0",
-      "generatedAt": "2025-12-04T10:05:53.518Z",
+      "generatedAt": "2025-12-05T07:18:52.476Z",
       "source": "Zod schema"
     },
     "button": {
@@ -822,7 +822,7 @@
       "title": "Button Component Props",
       "description": "Props schema for the button component in Kookie UI",
       "version": "1.0.0",
-      "generatedAt": "2025-12-04T10:05:53.523Z",
+      "generatedAt": "2025-12-05T07:18:52.481Z",
       "source": "Zod schema"
     },
     "icon-button": {
@@ -1140,7 +1140,7 @@
       "title": "Icon-button Component Props",
       "description": "Props schema for the icon-button component in Kookie UI",
       "version": "1.0.0",
-      "generatedAt": "2025-12-04T10:05:53.525Z",
+      "generatedAt": "2025-12-05T07:18:52.483Z",
       "source": "Zod schema"
     },
     "toggle-button": {
@@ -1683,7 +1683,7 @@
       "title": "Toggle-button Component Props",
       "description": "Props schema for the toggle-button component in Kookie UI",
       "version": "1.0.0",
-      "generatedAt": "2025-12-04T10:05:53.526Z",
+      "generatedAt": "2025-12-05T07:18:52.484Z",
       "source": "Zod schema"
     },
     "toggle-icon-button": {
@@ -2009,7 +2009,7 @@
       "title": "Toggle-icon-button Component Props",
       "description": "Props schema for the toggle-icon-button component in Kookie UI",
       "version": "1.0.0",
-      "generatedAt": "2025-12-04T10:05:53.527Z",
+      "generatedAt": "2025-12-05T07:18:52.485Z",
       "source": "Zod schema"
     }
   }

package/schemas/toggle-button.json

@@ -538,6 +538,6 @@
   "title": "Toggle-button Component Props",
   "description": "Props schema for the toggle-button component in Kookie UI",
   "version": "1.0.0",
-  "generatedAt": "2025-12-04T10:05:53.526Z",
+  "generatedAt": "2025-12-05T07:18:52.484Z",
   "source": "Zod schema"
 }

package/schemas/toggle-icon-button.json

@@ -321,6 +321,6 @@
   "title": "Toggle-icon-button Component Props",
   "description": "Props schema for the toggle-icon-button component in Kookie UI",
   "version": "1.0.0",
-  "generatedAt": "2025-12-04T10:05:53.527Z",
+  "generatedAt": "2025-12-05T07:18:52.485Z",
   "source": "Zod schema"
 }

package/src/components/sidebar.css

@@ -550,8 +550,41 @@
     }
   }
 
+  /* Header/Footer sizing - mirror base menu tokens so buttons render correctly */
+  .rt-SidebarHeader,
+  .rt-SidebarFooter {
+    &:where(.rt-r-size-1) {
+      --base-menu-content-padding: var(--space-2);
+      --base-menu-item-padding-left: calc(var(--space-5) / 1.2);
+      --base-menu-item-padding-right: var(--space-2);
+      --base-menu-item-padding-y: var(--space-1);
+      --base-menu-item-height: var(--space-6);
+      --sidebar-item-height: var(--base-menu-item-height);
+    }
+
+    &:where(.rt-r-size-2) {
+      --base-menu-content-padding: var(--space-3);
+      --base-menu-item-padding-left: var(--space-3);
+      --base-menu-item-padding-right: var(--space-3);
+      --base-menu-item-padding-y: var(--space-1);
+      --base-menu-item-height: var(--space-7);
+      --sidebar-item-height: var(--base-menu-item-height);
+    }
+
+    &:where(.rt-r-size-3) {
+      --base-menu-content-padding: var(--space-3);
+      --base-menu-item-padding-left: var(--space-3);
+      --base-menu-item-padding-right: var(--space-3);
+      --base-menu-item-padding-y: var(--space-2);
+      --base-menu-item-height: var(--space-8);
+      --sidebar-item-height: var(--base-menu-item-height);
+    }
+  }
+
   /* Size-specific menu button styling - inherit from base menu */
-  .rt-SidebarContent:where(.rt-r-size-1) {
+  .rt-SidebarContent:where(.rt-r-size-1),
+  .rt-SidebarHeader:where(.rt-r-size-1),
+  .rt-SidebarFooter:where(.rt-r-size-1) {
     & :where(.rt-SidebarMenuButton) {
       gap: var(--component-gap-2);
       font-size: var(--font-size-1);
@@ -577,7 +610,9 @@
     }
   }
 
-  .rt-SidebarContent:where(.rt-r-size-2) {
+  .rt-SidebarContent:where(.rt-r-size-2),
+  .rt-SidebarHeader:where(.rt-r-size-2),
+  .rt-SidebarFooter:where(.rt-r-size-2) {
     & :where(.rt-SidebarMenuButton) {
       gap: var(--component-gap-3);
       font-size: var(--font-size-2);
@@ -614,6 +649,33 @@
       margin-left: auto;
     }
   }
+
+  .rt-SidebarContent:where(.rt-r-size-3),
+  .rt-SidebarHeader:where(.rt-r-size-3),
+  .rt-SidebarFooter:where(.rt-r-size-3) {
+    & :where(.rt-SidebarMenuButton) {
+      gap: var(--component-gap-3);
+      font-size: var(--font-size-3);
+      line-height: var(--line-height-2);
+      letter-spacing: var(--letter-spacing-2);
+      border-radius: var(--radius-2);
+      font-weight: var(--font-weight-regular);
+
+      /* stylelint-disable-next-line selector-max-type */
+      & :where(svg) {
+        width: var(--content-icon-size-3);
+        height: var(--content-icon-size-3);
+        flex-shrink: 0;
+      }
+    }
+
+    & :where(.rt-BaseMenuSubTriggerIcon) {
+      width: var(--indicator-icon-size-2);
+      height: var(--indicator-icon-size-2);
+      flex-shrink: 0;
+      margin-left: auto;
+    }
+  }
 }
 
 /***************************************************************************************************