@kushagradhawan/kookie-ui 0.1.41 → 0.1.43

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-10T06:58:42.621Z",
+  "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-sidebar-menu.css

@@ -5,7 +5,7 @@
   flex: 1;
   display: flex;
   flex-direction: column;
-  padding: var(--base-menu-content-padding);
+  padding-bottom: var(--base-menu-content-padding);
   box-sizing: border-box;
   list-style: none;
   margin: 0;
@@ -164,11 +164,6 @@
   font-size: var(--font-size-2);
 }
 
-/* Sidebar Group Components - identical to base menu */
-.rt-SidebarGroup {
-  /* No styling - purely semantic like BaseMenuGroup */
-}
-
 .rt-SidebarGroupLabel {
   /* Inherit all BaseMenuLabel styles */
   display: flex;
@@ -218,6 +213,6 @@
 
 /* Add balanced spacing for sidebar menu items while preserving base menu border radius */
 .rt-SidebarContent :where(.rt-BaseMenuItem) {
-  margin-top: calc(var(--space-1) / 2);
-  margin-bottom: calc(var(--space-1) / 2);
+  margin-top: calc(var(--space-1) / 4);
+  margin-bottom: calc(var(--space-1) / 4);
 }

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

@@ -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;