@kushagradhawan/kookie-ui 0.1.54 → 0.1.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kushagradhawan/kookie-ui",
-  "version": "0.1.54",
+  "version": "0.1.55",
   "description": "A modern React component library with beautiful design tokens, flexible theming, and comprehensive docs",
   "keywords": [
     "react",

package/schemas/base-button.json

@@ -279,6 +279,6 @@
   "title": "Base-button Component Props",
   "description": "Props schema for the base-button component in Kookie UI",
   "version": "1.0.0",
-  "generatedAt": "2025-09-18T11:17:43.684Z",
+  "generatedAt": "2025-09-29T10:27:20.201Z",
   "source": "Zod schema"
 }

package/schemas/button.json

@@ -530,6 +530,6 @@
   "title": "Button Component Props",
   "description": "Props schema for the button component in Kookie UI",
   "version": "1.0.0",
-  "generatedAt": "2025-09-18T11:17:43.689Z",
+  "generatedAt": "2025-09-29T10:27:20.206Z",
   "source": "Zod schema"
 }

package/schemas/icon-button.json

@@ -313,6 +313,6 @@
   "title": "Icon-button Component Props",
   "description": "Props schema for the icon-button component in Kookie UI",
   "version": "1.0.0",
-  "generatedAt": "2025-09-18T11:17:43.690Z",
+  "generatedAt": "2025-09-29T10:27:20.207Z",
   "source": "Zod schema"
 }

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-09-18T11:17:43.693Z",
+  "generatedAt": "2025-09-29T10:27:20.210Z",
   "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-09-18T11:17:43.684Z",
+      "generatedAt": "2025-09-29T10:27:20.201Z",
       "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-09-18T11:17:43.689Z",
+      "generatedAt": "2025-09-29T10:27:20.206Z",
       "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-09-18T11:17:43.690Z",
+      "generatedAt": "2025-09-29T10:27:20.207Z",
       "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-09-18T11:17:43.692Z",
+      "generatedAt": "2025-09-29T10:27:20.209Z",
       "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-09-18T11:17:43.693Z",
+      "generatedAt": "2025-09-29T10:27:20.210Z",
       "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-09-18T11:17:43.692Z",
+  "generatedAt": "2025-09-29T10:27:20.209Z",
   "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-09-18T11:17:43.693Z",
+  "generatedAt": "2025-09-29T10:27:20.210Z",
   "source": "Zod schema"
 }

package/src/components/_internal/base-card.css

@@ -64,8 +64,9 @@
     z-index: -1;
 
     /* Theme-level translucent override */
-    :where([data-panel-background='translucent']) & {
+    :where([data-panel-background='translucent'], [data-material='translucent']) & {
       backdrop-filter: var(--backdrop-filter-panel);
+      --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
     }
 
     /* Component-level overrides (higher specificity) */
@@ -78,22 +79,6 @@
       backdrop-filter: var(--backdrop-filter-panel);
       --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
     }
-
-    /* Disable backdrop-filter when inside elements that already have backdrop-filter */
-    :where(
-        .rt-PopoverContent,
-        .rt-BaseDialogContent,
-        .rt-BaseMenuContent,
-        .rt-DropdownMenuContent,
-        .rt-ContextMenuContent,
-        .rt-AlertDialogContent,
-        .rt-HoverCardContent,
-        .rt-TooltipContent,
-        .rt-Card
-      )
-      & {
-      backdrop-filter: none !important;
-    }
   }
   & {
     contain: paint;
@@ -319,6 +304,7 @@
     /* Theme-level translucent override */
     :where([data-panel-background='translucent'], [data-material='translucent']) & {
       backdrop-filter: var(--backdrop-filter-panel);
+      --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
     }
 
     /* Component-level overrides (higher specificity) */
@@ -327,11 +313,7 @@
       --backdrop-filter-panel: none;
     }
 
-    :where(
-        .rt-BaseCard[data-panel-background='translucent'],
-        .rt-BaseCard[data-material='translucent']
-      )
-      & {
+    :where(.rt-BaseCard[data-panel-background='translucent'], .rt-BaseCard[data-material='translucent']) & {
       backdrop-filter: var(--backdrop-filter-panel);
       --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
     }
@@ -362,18 +344,13 @@
           }
 
           /* Component-level overrides for hover */
-          :where(.rt-BaseCard[data-panel-background='solid'], .rt-BaseCard[data-material='solid'])
-            & {
+          :where(.rt-BaseCard[data-panel-background='solid'], .rt-BaseCard[data-material='solid']) & {
             background-color: var(--gray-2);
             backdrop-filter: none;
             --backdrop-filter-panel: none;
           }
 
-          :where(
-              .rt-BaseCard[data-panel-background='translucent'],
-              .rt-BaseCard[data-material='translucent']
-            )
-            & {
+          :where(.rt-BaseCard[data-panel-background='translucent'], .rt-BaseCard[data-material='translucent']) & {
             background-color: color-mix(in srgb, var(--gray-a2), var(--gray-2) 60%);
             backdrop-filter: var(--backdrop-filter-panel);
             --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
@@ -406,11 +383,7 @@
           --backdrop-filter-panel: none;
         }
 
-        :where(
-            .rt-BaseCard[data-panel-background='translucent'],
-            .rt-BaseCard[data-material='translucent']
-          )
-          & {
+        :where(.rt-BaseCard[data-panel-background='translucent'], .rt-BaseCard[data-material='translucent']) & {
           background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
           backdrop-filter: var(--backdrop-filter-panel);
           --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
@@ -441,11 +414,7 @@
           --backdrop-filter-panel: none;
         }
 
-        :where(
-            .rt-BaseCard[data-panel-background='translucent'],
-            .rt-BaseCard[data-material='translucent']
-          )
-          & {
+        :where(.rt-BaseCard[data-panel-background='translucent'], .rt-BaseCard[data-material='translucent']) & {
           background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
           backdrop-filter: var(--backdrop-filter-panel);
           --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
@@ -696,6 +665,7 @@
     /* Theme-level translucent override */
     :where([data-panel-background='translucent'], [data-material='translucent']) & {
       backdrop-filter: var(--backdrop-filter-panel);
+      --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
     }
 
     /* Component-level overrides (higher specificity) */
@@ -704,11 +674,7 @@
       --backdrop-filter-panel: none;
     }
 
-    :where(
-        .rt-BaseCard[data-panel-background='translucent'],
-        .rt-BaseCard[data-material='translucent']
-      )
-      & {
+    :where(.rt-BaseCard[data-panel-background='translucent'], .rt-BaseCard[data-material='translucent']) & {
       backdrop-filter: var(--backdrop-filter-panel);
       --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
     }
@@ -739,18 +705,13 @@
           }
 
           /* Component-level overrides for hover */
-          :where(.rt-BaseCard[data-panel-background='solid'], .rt-BaseCard[data-material='solid'])
-            & {
+          :where(.rt-BaseCard[data-panel-background='solid'], .rt-BaseCard[data-material='solid']) & {
             background-color: var(--gray-3);
             backdrop-filter: none;
             --backdrop-filter-panel: none;
           }
 
-          :where(
-              .rt-BaseCard[data-panel-background='translucent'],
-              .rt-BaseCard[data-material='translucent']
-            )
-            & {
+          :where(.rt-BaseCard[data-panel-background='translucent'], .rt-BaseCard[data-material='translucent']) & {
             background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
             backdrop-filter: var(--backdrop-filter-panel);
             --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
@@ -793,11 +754,7 @@
           --backdrop-filter-panel: none;
         }
 
-        :where(
-            .rt-BaseCard[data-panel-background='translucent'],
-            .rt-BaseCard[data-material='translucent']
-          )
-          & {
+        :where(.rt-BaseCard[data-panel-background='translucent'], .rt-BaseCard[data-material='translucent']) & {
           background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
           backdrop-filter: var(--backdrop-filter-panel);
           --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
@@ -839,11 +796,7 @@
           --backdrop-filter-panel: none;
         }
 
-        :where(
-            .rt-BaseCard[data-panel-background='translucent'],
-            .rt-BaseCard[data-material='translucent']
-          )
-          & {
+        :where(.rt-BaseCard[data-panel-background='translucent'], .rt-BaseCard[data-material='translucent']) & {
           background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
           backdrop-filter: var(--backdrop-filter-panel);
           --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
@@ -895,6 +848,7 @@
     /* Theme-level translucent override */
     :where([data-panel-background='translucent'], [data-material='translucent']) & {
       backdrop-filter: var(--backdrop-filter-panel);
+      --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
     }
 
     /* Component-level overrides (higher specificity) */
@@ -903,11 +857,7 @@
       --backdrop-filter-panel: none;
     }
 
-    :where(
-        .rt-BaseCard[data-panel-background='translucent'],
-        .rt-BaseCard[data-material='translucent']
-      )
-      & {
+    :where(.rt-BaseCard[data-panel-background='translucent'], .rt-BaseCard[data-material='translucent']) & {
       backdrop-filter: var(--backdrop-filter-panel);
       --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
     }
@@ -950,18 +900,13 @@
           }
 
           /* Component-level overrides for hover */
-          :where(.rt-BaseCard[data-panel-background='solid'], .rt-BaseCard[data-material='solid'])
-            & {
+          :where(.rt-BaseCard[data-panel-background='solid'], .rt-BaseCard[data-material='solid']) & {
             background-color: var(--gray-2);
             backdrop-filter: none;
             --backdrop-filter-panel: none;
           }
 
-          :where(
-              .rt-BaseCard[data-panel-background='translucent'],
-              .rt-BaseCard[data-material='translucent']
-            )
-            & {
+          :where(.rt-BaseCard[data-panel-background='translucent'], .rt-BaseCard[data-material='translucent']) & {
             background-color: color-mix(in srgb, var(--gray-a2), var(--gray-2) 60%);
             backdrop-filter: var(--backdrop-filter-panel);
             --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
@@ -997,11 +942,7 @@
           --backdrop-filter-panel: none;
         }
 
-        :where(
-            .rt-BaseCard[data-panel-background='translucent'],
-            .rt-BaseCard[data-material='translucent']
-          )
-          & {
+        :where(.rt-BaseCard[data-panel-background='translucent'], .rt-BaseCard[data-material='translucent']) & {
           background-color: color-mix(in srgb, var(--gray-a2), var(--gray-2) 60%);
           backdrop-filter: var(--backdrop-filter-panel);
           --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
@@ -1036,11 +977,7 @@
           --backdrop-filter-panel: none;
         }
 
-        :where(
-            .rt-BaseCard[data-panel-background='translucent'],
-            .rt-BaseCard[data-material='translucent']
-          )
-          & {
+        :where(.rt-BaseCard[data-panel-background='translucent'], .rt-BaseCard[data-material='translucent']) & {
           background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
           backdrop-filter: var(--backdrop-filter-panel);
           --backdrop-filter-panel: blur(var(--backdrop-blur-panel));

package/src/components/_internal/base-sidebar.css

@@ -5,19 +5,7 @@
   - Shared tokens defined/consumed: --sidebar-base-border-radius, etc.
 */
 
-/* Sidebar Provider - handles positioning */
-.rt-SidebarProvider {
-  /* Positioning based on side */
-  &:where([data-side='left']) {
-    /* Left side is default - no additional positioning needed */
-    order: -1; /* Ensure it appears first in flex container */
-  }
-
-  &:where([data-side='right']) {
-    /* Position on the right side */
-    order: 999; /* Push to end in flex container */
-  }
-}
+/* Removed Sidebar Provider (unused) */
 
 /* Sidebar Root Container */
 .rt-SidebarRoot {
@@ -129,9 +117,4 @@
   margin: var(--space-2) 0;
 }
 
-/* Responsive behavior - only hide when not in Sheet overlay mode */
-@media (max-width: 768px) {
-  .rt-SidebarRoot:not(:where(.rt-SheetContent .rt-SidebarRoot)) {
-    display: none;
-  }
-}
+/* Removed mobile hide rule; Shell handles overlay vs inline */

package/src/components/callout.css

@@ -6,6 +6,7 @@
   text-align: left;
   color: var(--accent-a11);
   transition: var(--transition-card);
+  border-radius: var(--callout-border-radius);
 
   /* Theme-level translucent override */
   :where([data-panel-background='translucent'], [data-material='translucent']) & {
@@ -21,7 +22,7 @@
     backdrop-filter: none;
     --backdrop-filter-components: none;
   }
-  
+
   &:where([data-panel-background='translucent'], [data-material='translucent']) {
     backdrop-filter: var(--backdrop-filter-components);
     --backdrop-filter-components: blur(var(--backdrop-blur-components));
@@ -79,7 +80,7 @@
       row-gap: var(--space-2);
       column-gap: var(--space-2);
       padding: var(--space-3);
-      border-radius: var(--radius-1);
+      --callout-border-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-1)));
       --callout-icon-height: var(--line-height-1);
       --callout-icon-size: var(--content-icon-size-1);
     }
@@ -87,7 +88,7 @@
       row-gap: var(--space-2);
       column-gap: var(--space-3);
       padding: var(--space-4);
-      border-radius: var(--radius-2);
+      --callout-border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
       --callout-icon-height: var(--line-height-2);
       --callout-icon-size: var(--content-icon-size-2);
     }
@@ -95,10 +96,26 @@
       row-gap: var(--space-3);
       column-gap: var(--space-4);
       padding: var(--space-5);
-      border-radius: var(--radius-3);
+      --callout-border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
       --callout-icon-height: var(--line-height-3);
       --callout-icon-size: var(--content-icon-size-3);
     }
+    &:where(.rt-r-size-4) {
+      row-gap: var(--space-3);
+      column-gap: var(--space-5);
+      padding: var(--space-6);
+      --callout-border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-4)));
+      --callout-icon-height: var(--line-height-4);
+      --callout-icon-size: var(--content-icon-size-4);
+    }
+    &:where(.rt-r-size-5) {
+      row-gap: var(--space-4);
+      column-gap: var(--space-6);
+      padding: var(--space-7);
+      --callout-border-radius: min(var(--radius-9), calc(var(--radius-5) + var(--space-5)));
+      --callout-icon-height: var(--line-height-5);
+      --callout-icon-size: var(--content-icon-size-5);
+    }
   }
 }
 
@@ -234,4 +251,4 @@
       background-color: var(--color-surface-translucent);
     }
   }
-}
+}

package/src/components/table.css

@@ -45,7 +45,7 @@
   }
 }
 .rt-TableColumnHeaderCell {
-  font-weight: bold;
+  font-weight: 600;
 }
 .rt-TableRowHeaderCell {
   font-weight: normal;
@@ -60,7 +60,7 @@
 @breakpoints {
   .rt-TableRoot {
     &:where(.rt-r-size-1) {
-      --table-border-radius: var(--radius-3);
+      --table-border-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-1)));
       --table-cell-padding: var(--space-2);
       --table-cell-min-height: calc(36px * var(--scaling));
 
@@ -70,7 +70,7 @@
       }
     }
     &:where(.rt-r-size-2) {
-      --table-border-radius: var(--radius-4);
+      --table-border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
       --table-cell-padding: var(--space-3);
       --table-cell-min-height: calc(44px * var(--scaling));
 
@@ -80,8 +80,8 @@
       }
     }
     &:where(.rt-r-size-3) {
-      --table-border-radius: var(--radius-4);
-      --table-cell-padding: var(--space-3) var(--space-4);
+      --table-border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
+      --table-cell-padding: var(--space-4);
       --table-cell-min-height: var(--space-8);
 
       & :where(.rt-TableRootTable) {
@@ -89,6 +89,26 @@
         line-height: var(--line-height-3);
       }
     }
+    &:where(.rt-r-size-4) {
+      --table-border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-4)));
+      --table-cell-padding: var(--space-5);
+      --table-cell-min-height: var(--space-9);
+
+      & :where(.rt-TableRootTable) {
+        font-size: var(--font-size-3);
+        line-height: var(--line-height-3);
+      }
+    }
+    &:where(.rt-r-size-5) {
+      --table-border-radius: min(var(--radius-9), calc(var(--radius-5) + var(--space-5)));
+      --table-cell-padding: var(--space-6);
+      --table-cell-min-height: var(--space-10);
+
+      & :where(.rt-TableRootTable) {
+        font-size: var(--font-size-4);
+        line-height: var(--line-height-4);
+      }
+    }
   }
 }