@kushagradhawan/kookie-ui 0.1.40 → 0.1.42

package/schemas/toggle-icon-button.json

@@ -0,0 +1,326 @@
+{
+  "$ref": "#/definitions/Toggle-icon-buttonSchema",
+  "definitions": {
+    "Toggle-icon-buttonSchema": {
+      "type": "object",
+      "properties": {
+        "as": {
+          "type": "string",
+          "description": "HTML element type to render as"
+        },
+        "asChild": {
+          "type": "boolean",
+          "description": "Merge props with child element instead of rendering wrapper"
+        },
+        "size": {
+          "anyOf": [
+            {
+              "type": "string",
+              "enum": [
+                "1",
+                "2",
+                "3",
+                "4"
+              ]
+            },
+            {
+              "type": "object",
+              "properties": {
+                "initial": {
+                  "type": "string",
+                  "enum": [
+                    "1",
+                    "2",
+                    "3",
+                    "4"
+                  ]
+                },
+                "sm": {
+                  "type": "string",
+                  "enum": [
+                    "1",
+                    "2",
+                    "3",
+                    "4"
+                  ]
+                },
+                "md": {
+                  "type": "string",
+                  "enum": [
+                    "1",
+                    "2",
+                    "3",
+                    "4"
+                  ]
+                },
+                "lg": {
+                  "type": "string",
+                  "enum": [
+                    "1",
+                    "2",
+                    "3",
+                    "4"
+                  ]
+                },
+                "xl": {
+                  "type": "string",
+                  "enum": [
+                    "1",
+                    "2",
+                    "3",
+                    "4"
+                  ]
+                }
+              },
+              "additionalProperties": false
+            }
+          ],
+          "default": "2",
+          "description": "Button size for responsive design and interface density"
+        },
+        "variant": {
+          "type": "string",
+          "enum": [
+            "classic",
+            "solid",
+            "soft",
+            "surface",
+            "outline",
+            "ghost",
+            "override"
+          ],
+          "default": "solid",
+          "description": "Visual variant that determines the button's appearance and context"
+        },
+        "color": {
+          "type": "string",
+          "enum": [
+            "tomato",
+            "red",
+            "ruby",
+            "crimson",
+            "pink",
+            "plum",
+            "purple",
+            "violet",
+            "iris",
+            "indigo",
+            "blue",
+            "cyan",
+            "teal",
+            "jade",
+            "green",
+            "grass",
+            "brown",
+            "orange",
+            "sky",
+            "mint",
+            "lime",
+            "yellow",
+            "amber",
+            "gold",
+            "bronze",
+            "gray"
+          ],
+          "description": "Accent color for the button"
+        },
+        "highContrast": {
+          "type": "boolean",
+          "default": false,
+          "description": "High contrast mode for better accessibility"
+        },
+        "radius": {
+          "type": "string",
+          "enum": [
+            "none",
+            "small",
+            "medium",
+            "large",
+            "full"
+          ],
+          "description": "Border radius for the button"
+        },
+        "loading": {
+          "type": "boolean",
+          "default": false,
+          "description": "Loading state that shows a spinner and disables interaction"
+        },
+        "fullWidth": {
+          "type": "boolean",
+          "default": false,
+          "description": "Full width mode that expands the button to fill its container"
+        },
+        "material": {
+          "type": "string",
+          "enum": [
+            "solid",
+            "translucent"
+          ],
+          "description": "Material type for visual rendering and depth effects"
+        },
+        "panelBackground": {
+          "type": "string",
+          "enum": [
+            "solid",
+            "translucent"
+          ],
+          "description": "Panel background type (deprecated - use material instead)"
+        },
+        "flush": {
+          "type": "boolean",
+          "default": false,
+          "description": "Flush mode that removes visual padding for seamless text integration"
+        },
+        "disabled": {
+          "type": "boolean",
+          "default": false,
+          "description": "Disabled state"
+        },
+        "type": {
+          "type": "string",
+          "enum": [
+            "button",
+            "submit",
+            "reset"
+          ],
+          "description": "Type attribute for form buttons"
+        },
+        "className": {
+          "type": "string",
+          "description": "Additional CSS class name"
+        },
+        "style": {
+          "type": "object",
+          "additionalProperties": {
+            "type": [
+              "string",
+              "number"
+            ]
+          },
+          "description": "Inline styles"
+        },
+        "tabIndex": {
+          "type": "number",
+          "description": "Tab index for keyboard navigation"
+        },
+        "aria-label": {
+          "type": "string",
+          "description": "ARIA label for accessibility"
+        },
+        "aria-labelledby": {
+          "type": "string",
+          "description": "ARIA labelled by reference"
+        },
+        "aria-describedby": {
+          "type": "string",
+          "description": "ARIA described by reference"
+        },
+        "aria-expanded": {
+          "type": "boolean",
+          "description": "ARIA expanded state"
+        },
+        "aria-pressed": {
+          "type": "boolean",
+          "description": "ARIA pressed state"
+        },
+        "aria-current": {
+          "anyOf": [
+            {
+              "type": "boolean"
+            },
+            {
+              "type": "string",
+              "enum": [
+                "page",
+                "step",
+                "location",
+                "date",
+                "time"
+              ]
+            }
+          ],
+          "description": "ARIA current state"
+        },
+        "aria-controls": {
+          "type": "string",
+          "description": "ARIA controls reference"
+        },
+        "aria-owns": {
+          "type": "string",
+          "description": "ARIA owns reference"
+        },
+        "data-*": {
+          "type": "object",
+          "additionalProperties": {
+            "type": "string"
+          },
+          "description": "Data attributes"
+        },
+        "id": {
+          "type": "string",
+          "description": "ID attribute"
+        },
+        "title": {
+          "type": "string",
+          "description": "Title attribute for tooltip"
+        },
+        "role": {
+          "type": "string",
+          "description": "Role attribute"
+        },
+        "children": {
+          "description": "Children elements (required for accessibility if no aria-label)"
+        },
+        "tooltip": {
+          "type": "string",
+          "description": "Content to display in the tooltip on hover/focus"
+        },
+        "tooltipSide": {
+          "type": "string",
+          "enum": [
+            "top",
+            "right",
+            "bottom",
+            "left"
+          ],
+          "default": "top",
+          "description": "Side of the button where the tooltip should appear"
+        },
+        "tooltipAlign": {
+          "type": "string",
+          "enum": [
+            "start",
+            "center",
+            "end"
+          ],
+          "default": "center",
+          "description": "Alignment of the tooltip relative to the button"
+        },
+        "tooltipDelayDuration": {
+          "type": "number",
+          "description": "Delay before showing the tooltip (in milliseconds)"
+        },
+        "tooltipDisableHoverableContent": {
+          "type": "boolean",
+          "default": false,
+          "description": "Whether to disable hoverable content behavior"
+        },
+        "pressed": {
+          "type": "boolean",
+          "description": "Controlled pressed state"
+        },
+        "defaultPressed": {
+          "type": "boolean",
+          "description": "Default pressed state for uncontrolled usage"
+        }
+      },
+      "additionalProperties": false
+    }
+  },
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "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-09T20:52:02.773Z",
+  "source": "Zod schema"
+}

package/schemas-json.d.ts

@@ -0,0 +1,12 @@
+// Ambient module declarations for JSON schema imports
+// This file enables TypeScript to resolve JSON schema imports
+
+declare module '@kushagradhawan/kookie-ui/schemas-json' {
+  const schemaIndex: any;
+  export default schemaIndex;
+}
+
+declare module '@kushagradhawan/kookie-ui/schemas-json/*' {
+  const schema: any;
+  export default schema;
+}

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

@@ -8,18 +8,18 @@
   flex-direction: column;
   box-sizing: border-box;
   overflow: hidden;
-  
+
   background-color: var(--color-panel);
   backdrop-filter: var(--backdrop-filter-panel);
   box-shadow: var(--shadow-5);
   transition: var(--transition-background-blur);
-  
+
   /* GPU optimization: limit paint scope and prevent backdrop-filter layering */
   contain: paint;
   isolation: isolate;
 
   /* Optimize backdrop-filter performance during animations */
-  &:where([data-state="open"]) {
+  &:where([data-state='open']) {
     will-change: transform, opacity;
   }
 
@@ -188,6 +188,7 @@
         font-size: var(--font-size-1);
         line-height: var(--line-height-1);
         letter-spacing: var(--letter-spacing-1);
+        padding-left: calc(var(--base-menu-item-padding-left) + var(--component-gap-2));
       }
 
       & :where(.rt-BaseMenuItemIndicatorIcon, .rt-BaseMenuSubTriggerIcon) {
@@ -231,6 +232,7 @@
         font-size: var(--font-size-2);
         line-height: var(--line-height-2);
         letter-spacing: var(--letter-spacing-2);
+        padding-left: calc(var(--base-menu-item-padding-left) + var(--component-gap-3));
       }
 
       & :where(.rt-BaseMenuItemIndicatorIcon, .rt-BaseMenuSubTriggerIcon) {
@@ -274,6 +276,7 @@
         font-size: var(--font-size-2);
         line-height: var(--line-height-2);
         letter-spacing: var(--letter-spacing-2);
+        padding-left: calc(var(--base-menu-item-padding-left) + var(--component-gap-4));
       }
 
       & :where(.rt-BaseMenuItemIndicatorIcon, .rt-BaseMenuSubTriggerIcon) {
@@ -308,7 +311,8 @@
 }
 
 /* Ensure gray text appears muted in non-highlighted state */
-.rt-BaseMenuItem :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']:not(.rt-Badge)) {
+.rt-BaseMenuItem
+  :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']:not(.rt-Badge)) {
   color: var(--gray-a10);
 }
 .rt-BaseMenuItem:where([data-disabled], [data-highlighted]),
@@ -326,23 +330,27 @@
 .rt-BaseMenuContent:where(.rt-variant-solid, .rt-variant-soft) {
   & :where(.rt-BaseMenuSubTrigger) {
     transition: var(--transition-menu);
-    
+
     /* Enhanced reduced motion support */
     @media (prefers-reduced-motion: reduce) {
       transition: none;
       backdrop-filter: none; /* Remove backdrop effects for motion-sensitive users */
     }
-    
+
     /* Remove backdrop-filter transitions in translucent mode to prevent flickering */
     :where([data-panel-background='translucent']) & {
-      transition: background var(--motion-duration-micro) var(--motion-ease-standard), color var(--motion-duration-small) var(--motion-ease-standard);
+      transition:
+        background var(--motion-duration-micro) var(--motion-ease-standard),
+        color var(--motion-duration-small) var(--motion-ease-standard);
     }
   }
-  
+
   & :where(.rt-BaseMenuItem) {
     /* Remove backdrop-filter transitions in translucent mode to prevent flickering */
     :where([data-panel-background='translucent']) & {
-      transition: background var(--motion-duration-micro) var(--motion-ease-standard), color var(--motion-duration-small) var(--motion-ease-standard);
+      transition:
+        background var(--motion-duration-micro) var(--motion-ease-standard),
+        color var(--motion-duration-small) var(--motion-ease-standard);
     }
   }
 }
@@ -352,7 +360,7 @@
   & :where(.rt-BaseMenuSubTrigger[data-state='open']) {
     /* Base state: solid gray for solid panels */
     background-color: var(--gray-3);
-    
+
     /* Theme-level translucent override */
     :where([data-panel-background='translucent']) & {
       background-color: var(--gray-a3);
@@ -371,7 +379,7 @@
       /* No backdrop-filter here to prevent double-blur with container */
     }
   }
-  
+
   & :where(.rt-BaseMenuItem[data-highlighted]) {
     background-color: var(--accent-9);
     color: var(--accent-contrast);
@@ -390,7 +398,7 @@
       color: inherit !important;
     }
   }
-  
+
   &:where(.rt-high-contrast) {
     & :where(.rt-BaseMenuItem[data-highlighted]) {
       background-color: var(--accent-12);
@@ -431,7 +439,7 @@
   & :where(.rt-BaseMenuSubTrigger[data-state='open']) {
     /* Base state: solid accent for solid panels */
     background-color: var(--accent-3);
-    
+
     /* Theme-level translucent override */
     :where([data-panel-background='translucent']) & {
       background-color: var(--accent-a3);
@@ -450,11 +458,11 @@
       /* No backdrop-filter here to prevent double-blur with container */
     }
   }
-  
+
   & :where(.rt-BaseMenuItem[data-highlighted]) {
     /* Base state: solid accent for solid panels */
     background-color: var(--accent-4);
-    
+
     /* Theme-level translucent override */
     :where([data-panel-background='translucent']) & {
       background-color: var(--accent-a4);
@@ -486,11 +494,11 @@
     outline: 2px solid Highlight;
     outline-offset: 2px;
   }
-  
+
   .rt-BaseMenuContent {
     border: 1px solid CanvasText;
   }
-  
+
   .rt-BaseMenuSeparator {
     background-color: CanvasText;
   }

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

@@ -3,12 +3,12 @@
 /* Sidebar Provider - handles positioning */
 .rt-SidebarProvider {
   /* Positioning based on side */
-  &:where([data-side="left"]) {
+  &: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"]) {
+
+  &:where([data-side='right']) {
     /* Position on the right side */
     order: 999; /* Push to end in flex container */
   }
@@ -16,10 +16,9 @@
 
 /* Sidebar Root Container */
 .rt-SidebarRoot {
-  --sidebar-width: 16rem; /* Fixed width */
   --sidebar-base-border-radius: 0; /* Default to no radius */
-  
-  width: var(--sidebar-width);
+
+  width: 100%;
   height: 100%;
   flex-shrink: 0;
   display: flex;
@@ -34,13 +33,13 @@
   }
 
   /* Floating type - ONLY visual changes */
-  &:where([data-type="floating"]) {
+  &:where([data-type='floating']) {
     border-radius: var(--sidebar-base-border-radius);
     margin: var(--space-2);
     height: calc(100% - var(--space-4));
     overflow: visible; /* Ensure shadow is not clipped */
     position: relative; /* Ensure proper stacking context for floating sidebars */
-    
+
     /* Ensure Theme wrapper has proper border radius in floating mode */
     & :where(.radix-themes) {
       border-radius: inherit;
@@ -49,14 +48,14 @@
 }
 
 /* Set border radius for floating sidebars based on size - set on the root where it's used */
-.rt-SidebarRoot:where([data-type="floating"]) {
+.rt-SidebarRoot:where([data-type='floating']) {
   /* Default radius for floating sidebars */
   --sidebar-base-border-radius: var(--radius-5);
-  
+
   &:where(.rt-r-size-1) {
     --sidebar-base-border-radius: var(--radius-5);
   }
-  
+
   &:where(.rt-r-size-2) {
     --sidebar-base-border-radius: var(--radius-6);
   }
@@ -133,9 +132,9 @@
   margin: var(--space-2) 0;
 }
 
-/* Responsive behavior */
+/* Responsive behavior - only hide when not in Sheet overlay mode */
 @media (max-width: 768px) {
-  .rt-SidebarRoot {
+  .rt-SidebarRoot:not(:where(.rt-SheetContent .rt-SidebarRoot)) {
     display: none;
   }
-} 
+}

package/src/components/dialog.css

@@ -1 +1,13 @@
 @import './_internal/base-dialog.css';
+
+/* Add blur effect to Dialog overlay */
+.rt-DialogOverlay::before {
+  backdrop-filter: var(--backdrop-filter-components) !important;
+}
+
+/* Safari backdrop-filter fallback */
+@supports not (backdrop-filter: blur(1px)) {
+  .rt-DialogOverlay::before {
+    backdrop-filter: none !important;
+  }
+}