@kushagradhawan/kookie-ui 0.1.48 → 0.1.50

package/schemas/shell-rail.json

@@ -0,0 +1,132 @@
+{
+  "$ref": "#/definitions/Shell-railSchema",
+  "definitions": {
+    "Shell-railSchema": {
+      "type": "object",
+      "properties": {
+        "presentation": {
+          "anyOf": [
+            {
+              "type": "string",
+              "enum": [
+                "fixed",
+                "overlay",
+                "stacked"
+              ],
+              "description": "Presentation mode"
+            },
+            {
+              "type": "object",
+              "properties": {
+                "initial": {
+                  "$ref": "#/definitions/Shell-railSchema/properties/presentation/anyOf/0",
+                  "description": "Presentation mode"
+                },
+                "xs": {
+                  "$ref": "#/definitions/Shell-railSchema/properties/presentation/anyOf/0",
+                  "description": "Presentation mode"
+                },
+                "sm": {
+                  "$ref": "#/definitions/Shell-railSchema/properties/presentation/anyOf/0",
+                  "description": "Presentation mode"
+                },
+                "md": {
+                  "$ref": "#/definitions/Shell-railSchema/properties/presentation/anyOf/0",
+                  "description": "Presentation mode"
+                },
+                "lg": {
+                  "$ref": "#/definitions/Shell-railSchema/properties/presentation/anyOf/0",
+                  "description": "Presentation mode"
+                },
+                "xl": {
+                  "$ref": "#/definitions/Shell-railSchema/properties/presentation/anyOf/0",
+                  "description": "Presentation mode"
+                }
+              },
+              "additionalProperties": false
+            }
+          ],
+          "description": "Responsive presentation configuration"
+        },
+        "mode": {
+          "type": "string",
+          "enum": [
+            "expanded",
+            "collapsed"
+          ],
+          "description": "Pane state mode"
+        },
+        "defaultMode": {
+          "anyOf": [
+            {
+              "$ref": "#/definitions/Shell-railSchema/properties/mode"
+            },
+            {
+              "type": "object",
+              "properties": {
+                "initial": {
+                  "$ref": "#/definitions/Shell-railSchema/properties/mode",
+                  "description": "Pane state mode"
+                },
+                "xs": {
+                  "$ref": "#/definitions/Shell-railSchema/properties/mode",
+                  "description": "Pane state mode"
+                },
+                "sm": {
+                  "$ref": "#/definitions/Shell-railSchema/properties/mode",
+                  "description": "Pane state mode"
+                },
+                "md": {
+                  "$ref": "#/definitions/Shell-railSchema/properties/mode",
+                  "description": "Pane state mode"
+                },
+                "lg": {
+                  "$ref": "#/definitions/Shell-railSchema/properties/mode",
+                  "description": "Pane state mode"
+                },
+                "xl": {
+                  "$ref": "#/definitions/Shell-railSchema/properties/mode",
+                  "description": "Pane state mode"
+                }
+              },
+              "additionalProperties": false
+            }
+          ],
+          "description": "Responsive pane mode configuration"
+        },
+        "expandedSize": {
+          "type": "number",
+          "default": 64,
+          "description": "Default width in pixels"
+        },
+        "collapsible": {
+          "type": "boolean"
+        },
+        "className": {
+          "type": "string",
+          "description": "Additional CSS class name"
+        },
+        "style": {
+          "type": "object",
+          "additionalProperties": {
+            "type": [
+              "string",
+              "number"
+            ]
+          },
+          "description": "Inline styles"
+        },
+        "children": {
+          "description": "Rail content"
+        }
+      },
+      "additionalProperties": false
+    }
+  },
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "title": "Shell-rail Component Props",
+  "description": "Props schema for the shell-rail component in Kookie UI",
+  "version": "1.0.0",
+  "generatedAt": "2025-09-10T19:04:45.608Z",
+  "source": "Zod schema"
+}

package/schemas/shell-root.json

@@ -0,0 +1,54 @@
+{
+  "$ref": "#/definitions/Shell-rootSchema",
+  "definitions": {
+    "Shell-rootSchema": {
+      "type": "object",
+      "properties": {
+        "height": {
+          "anyOf": [
+            {
+              "type": "string",
+              "const": "full"
+            },
+            {
+              "type": "string",
+              "const": "auto"
+            },
+            {
+              "type": "string"
+            },
+            {
+              "type": "number"
+            }
+          ],
+          "default": "full",
+          "description": "Height of the shell container"
+        },
+        "className": {
+          "type": "string",
+          "description": "Additional CSS class name"
+        },
+        "style": {
+          "type": "object",
+          "additionalProperties": {
+            "type": [
+              "string",
+              "number"
+            ]
+          },
+          "description": "Inline styles"
+        },
+        "children": {
+          "description": "Shell components"
+        }
+      },
+      "additionalProperties": false
+    }
+  },
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "title": "Shell-root Component Props",
+  "description": "Props schema for the shell-root component in Kookie UI",
+  "version": "1.0.0",
+  "generatedAt": "2025-09-10T19:04:45.607Z",
+  "source": "Zod schema"
+}

package/schemas/shell-sidebar.json

@@ -0,0 +1,182 @@
+{
+  "$ref": "#/definitions/Shell-sidebarSchema",
+  "definitions": {
+    "Shell-sidebarSchema": {
+      "type": "object",
+      "properties": {
+        "presentation": {
+          "anyOf": [
+            {
+              "type": "string",
+              "enum": [
+                "fixed",
+                "overlay",
+                "stacked"
+              ],
+              "description": "Presentation mode"
+            },
+            {
+              "type": "object",
+              "properties": {
+                "initial": {
+                  "$ref": "#/definitions/Shell-sidebarSchema/properties/presentation/anyOf/0",
+                  "description": "Presentation mode"
+                },
+                "xs": {
+                  "$ref": "#/definitions/Shell-sidebarSchema/properties/presentation/anyOf/0",
+                  "description": "Presentation mode"
+                },
+                "sm": {
+                  "$ref": "#/definitions/Shell-sidebarSchema/properties/presentation/anyOf/0",
+                  "description": "Presentation mode"
+                },
+                "md": {
+                  "$ref": "#/definitions/Shell-sidebarSchema/properties/presentation/anyOf/0",
+                  "description": "Presentation mode"
+                },
+                "lg": {
+                  "$ref": "#/definitions/Shell-sidebarSchema/properties/presentation/anyOf/0",
+                  "description": "Presentation mode"
+                },
+                "xl": {
+                  "$ref": "#/definitions/Shell-sidebarSchema/properties/presentation/anyOf/0",
+                  "description": "Presentation mode"
+                }
+              },
+              "additionalProperties": false
+            }
+          ],
+          "description": "Responsive presentation configuration"
+        },
+        "mode": {
+          "type": "string",
+          "enum": [
+            "collapsed",
+            "thin",
+            "expanded"
+          ],
+          "description": "Sidebar state mode"
+        },
+        "defaultMode": {
+          "anyOf": [
+            {
+              "$ref": "#/definitions/Shell-sidebarSchema/properties/mode"
+            },
+            {
+              "type": "object",
+              "properties": {
+                "initial": {
+                  "$ref": "#/definitions/Shell-sidebarSchema/properties/mode",
+                  "description": "Sidebar state mode"
+                },
+                "xs": {
+                  "$ref": "#/definitions/Shell-sidebarSchema/properties/mode",
+                  "description": "Sidebar state mode"
+                },
+                "sm": {
+                  "$ref": "#/definitions/Shell-sidebarSchema/properties/mode",
+                  "description": "Sidebar state mode"
+                },
+                "md": {
+                  "$ref": "#/definitions/Shell-sidebarSchema/properties/mode",
+                  "description": "Sidebar state mode"
+                },
+                "lg": {
+                  "$ref": "#/definitions/Shell-sidebarSchema/properties/mode",
+                  "description": "Sidebar state mode"
+                },
+                "xl": {
+                  "$ref": "#/definitions/Shell-sidebarSchema/properties/mode",
+                  "description": "Sidebar state mode"
+                }
+              },
+              "additionalProperties": false
+            }
+          ],
+          "description": "Initial sidebar mode",
+          "default": "expanded"
+        },
+        "expandedSize": {
+          "type": "number",
+          "default": 288,
+          "description": "Default width in pixels"
+        },
+        "minSize": {
+          "type": "number",
+          "default": 200,
+          "description": "Minimum width when resizing"
+        },
+        "maxSize": {
+          "type": "number",
+          "default": 400,
+          "description": "Maximum width when resizing"
+        },
+        "resizable": {
+          "type": "boolean",
+          "default": false,
+          "description": "Whether the sidebar can be resized"
+        },
+        "collapsible": {
+          "type": "boolean",
+          "default": true,
+          "description": "Whether the sidebar can be collapsed via resize handle"
+        },
+        "resizer": {},
+        "snapPoints": {
+          "type": "array",
+          "items": {
+            "type": "number"
+          }
+        },
+        "snapTolerance": {
+          "type": "number"
+        },
+        "collapseThreshold": {
+          "type": "number"
+        },
+        "paneId": {
+          "type": "string"
+        },
+        "persistence": {
+          "type": "object",
+          "properties": {},
+          "additionalProperties": false,
+          "description": "Size persistence adapter"
+        },
+        "className": {
+          "type": "string"
+        },
+        "style": {
+          "type": "object",
+          "additionalProperties": {
+            "type": [
+              "string",
+              "number"
+            ]
+          }
+        },
+        "children": {},
+        "thinSize": {
+          "type": "number",
+          "default": 64,
+          "description": "Width in thin mode"
+        },
+        "toggleModes": {
+          "type": "string",
+          "enum": [
+            "both",
+            "single"
+          ],
+          "description": "Available modes in toggle sequence"
+        }
+      },
+      "additionalProperties": false
+    }
+  },
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "title": "Shell-sidebar Component Props",
+  "description": "Props schema for the shell-sidebar component in Kookie UI",
+  "version": "1.0.0",
+  "generatedAt": "2025-09-10T19:04:45.608Z",
+  "source": "Zod schema"
+}

package/schemas/shell-trigger.json

@@ -0,0 +1,76 @@
+{
+  "$ref": "#/definitions/Shell-triggerSchema",
+  "definitions": {
+    "Shell-triggerSchema": {
+      "type": "object",
+      "properties": {
+        "target": {
+          "type": "string",
+          "enum": [
+            "left",
+            "rail",
+            "panel",
+            "sidebar",
+            "inspector",
+            "bottom"
+          ],
+          "description": "Which pane to control"
+        },
+        "action": {
+          "type": "string",
+          "enum": [
+            "toggle",
+            "expand",
+            "collapse"
+          ],
+          "description": "Action to perform",
+          "default": "toggle"
+        },
+        "peekOnHover": {
+          "type": "boolean",
+          "default": false,
+          "description": "Whether to show peek preview on hover when collapsed"
+        },
+        "className": {
+          "type": "string",
+          "description": "Additional CSS class name"
+        },
+        "style": {
+          "type": "object",
+          "additionalProperties": {
+            "type": [
+              "string",
+              "number"
+            ]
+          },
+          "description": "Inline styles"
+        },
+        "children": {
+          "description": "Trigger content"
+        },
+        "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"
+        }
+      },
+      "required": [
+        "target"
+      ],
+      "additionalProperties": false
+    }
+  },
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "title": "Shell-trigger Component Props",
+  "description": "Props schema for the shell-trigger component in Kookie UI",
+  "version": "1.0.0",
+  "generatedAt": "2025-09-10T19:04:45.609Z",
+  "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-10T17:52:54.993Z",
+  "generatedAt": "2025-09-12T18:14:42.771Z",
   "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-10T17:52:54.994Z",
+  "generatedAt": "2025-09-12T18:14:42.772Z",
   "source": "Zod schema"
 }

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

@@ -165,7 +165,7 @@
       --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: calc(var(--space-1) * 0.75);
+      --base-menu-item-padding-y: var(--space-2);
       --base-menu-item-height: var(--space-5);
       border-radius: var(--radius-3);
 
@@ -209,7 +209,7 @@
       --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-padding-y: var(--space-2);
       --base-menu-item-height: var(--space-6);
       border-radius: var(--radius-5);
 
@@ -253,7 +253,7 @@
       --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-padding-y: var(--space-2);
       --base-menu-item-height: var(--space-6);
       border-radius: var(--radius-6);
 
@@ -311,8 +311,7 @@
 }
 
 /* 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]),

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

@@ -10,7 +10,6 @@
   flex: 1;
   display: flex;
   flex-direction: column;
-  padding-bottom: var(--base-menu-content-padding);
   box-sizing: border-box;
   list-style: none;
   margin: 0;

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

@@ -78,6 +78,13 @@
   box-shadow: none !important;
   border-radius: 0 !important;
 
+  /* Add gap between groups using flex */
+  /* stylelint-disable-next-line selector-max-specificity */
+  & .rt-BaseMenuViewport {
+    /* gap: var(--base-menu-content-padding); */
+    gap: var(--space-5);
+  }
+
   /* Ensure ScrollArea takes full height within SidebarContent */
   & :where(.rt-ScrollAreaRoot) {
     flex: 1;