@kushagradhawan/kookie-ui 0.1.41 → 0.1.43

package/src/components/sidebar.css

@@ -69,7 +69,7 @@
 .rt-SidebarContainer:where(.rt-variant-outline) {
   background-color: var(--color-panel);
   backdrop-filter: var(--backdrop-filter-panel);
-  
+
   /* Component-level overrides (higher specificity) - remap --color-panel */
   &:where([data-panel-background='solid']) {
     --color-panel: var(--color-panel-solid);
@@ -84,18 +84,18 @@
     --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
     --backdrop-filter-components: blur(var(--backdrop-blur-components));
   }
-  
+
   /* Floating sidebars get full inset border */
-  :where(.rt-SidebarRoot[data-type="floating"]) & {
+  :where(.rt-SidebarRoot[data-type='floating']) & {
     box-shadow: inset 0 0 0 1px var(--gray-a6);
   }
-  
+
   /* Non-floating sidebars get border only on the content-facing side */
-  :where(.rt-SidebarRoot[data-type="sidebar"][data-side="left"]) & {
+  :where(.rt-SidebarRoot[data-type='sidebar'][data-side='left']) & {
     box-shadow: inset -1px 0 0 0 var(--gray-a6);
   }
-  
-  :where(.rt-SidebarRoot[data-type="sidebar"][data-side="right"]) & {
+
+  :where(.rt-SidebarRoot[data-type='sidebar'][data-side='right']) & {
     box-shadow: inset 1px 0 0 0 var(--gray-a6);
   }
 }
@@ -134,7 +134,7 @@
 .rt-SidebarContainer:where(.rt-variant-surface) {
   /* Base state: neutral gray background (maintains sidebar neutrality) */
   background-color: var(--gray-1);
-  
+
   /* Theme-level translucent override */
   :where([data-panel-background='translucent']) & {
     background-color: color-mix(in srgb, var(--gray-a1), var(--gray-1) 60%);
@@ -155,31 +155,31 @@
     --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
     --backdrop-filter-components: blur(var(--backdrop-blur-components));
   }
-  
+
   /* Inset border like Card surface variant */
   /* Floating sidebars get full inset border */
-  :where(.rt-SidebarRoot[data-type="floating"]) & {
+  :where(.rt-SidebarRoot[data-type='floating']) & {
     box-shadow: inset 0 0 0 1px var(--gray-6);
-    
+
     /* Theme-level translucent override */
     :where([data-panel-background='translucent']) & {
       box-shadow: inset 0 0 0 1px var(--gray-a6);
     }
   }
-  
+
   /* Non-floating sidebars get border only on the content-facing side */
-  :where(.rt-SidebarRoot[data-type="sidebar"][data-side="left"]) & {
+  :where(.rt-SidebarRoot[data-type='sidebar'][data-side='left']) & {
     box-shadow: inset -1px 0 0 0 var(--gray-6);
-    
+
     /* Theme-level translucent override */
     :where([data-panel-background='translucent']) & {
       box-shadow: inset -1px 0 0 0 var(--gray-a6);
     }
   }
-  
-  :where(.rt-SidebarRoot[data-type="sidebar"][data-side="right"]) & {
+
+  :where(.rt-SidebarRoot[data-type='sidebar'][data-side='right']) & {
     box-shadow: inset 1px 0 0 0 var(--gray-6);
-    
+
     /* Theme-level translucent override */
     :where([data-panel-background='translucent']) & {
       box-shadow: inset 1px 0 0 0 var(--gray-a6);
@@ -195,7 +195,7 @@
   gap: var(--space-2);
   padding: var(--base-menu-content-padding);
   min-height: var(--base-menu-item-height);
-  
+
   /* Make MenuButtons expand to full width */
   & :where(.rt-SidebarMenuButton) {
     flex: 1;
@@ -209,7 +209,7 @@
   gap: var(--space-2);
   padding: var(--base-menu-content-padding);
   min-height: var(--base-menu-item-height);
-  
+
   /* Make MenuButtons expand to full width */
   & :where(.rt-SidebarMenuButton) {
     flex: 1;
@@ -217,33 +217,85 @@
 }
 
 /* Flex utilities for header/footer layouts */
-.rt-SidebarHeader:where(.rt-flex-row) { flex-direction: row; }
-.rt-SidebarHeader:where(.rt-flex-col) { flex-direction: column; }
-.rt-SidebarHeader:where(.rt-items-center) { align-items: center; }
-.rt-SidebarHeader:where(.rt-items-start) { align-items: flex-start; }
-.rt-SidebarHeader:where(.rt-items-end) { align-items: flex-end; }
-.rt-SidebarHeader:where(.rt-justify-between) { justify-content: space-between; }
-.rt-SidebarHeader:where(.rt-justify-center) { justify-content: center; }
-.rt-SidebarHeader:where(.rt-justify-start) { justify-content: flex-start; }
-.rt-SidebarHeader:where(.rt-justify-end) { justify-content: flex-end; }
-.rt-SidebarHeader:where(.rt-gap-1) { gap: var(--space-1); }
-.rt-SidebarHeader:where(.rt-gap-2) { gap: var(--space-2); }
-.rt-SidebarHeader:where(.rt-gap-3) { gap: var(--space-3); }
-.rt-SidebarHeader:where(.rt-gap-4) { gap: var(--space-4); }
-
-.rt-SidebarFooter:where(.rt-flex-row) { flex-direction: row; }
-.rt-SidebarFooter:where(.rt-flex-col) { flex-direction: column; }
-.rt-SidebarFooter:where(.rt-items-center) { align-items: center; }
-.rt-SidebarFooter:where(.rt-items-start) { align-items: flex-start; }
-.rt-SidebarFooter:where(.rt-items-end) { align-items: flex-end; }
-.rt-SidebarFooter:where(.rt-justify-between) { justify-content: space-between; }
-.rt-SidebarFooter:where(.rt-justify-center) { justify-content: center; }
-.rt-SidebarFooter:where(.rt-justify-start) { justify-content: flex-start; }
-.rt-SidebarFooter:where(.rt-justify-end) { justify-content: flex-end; }
-.rt-SidebarFooter:where(.rt-gap-1) { gap: var(--space-1); }
-.rt-SidebarFooter:where(.rt-gap-2) { gap: var(--space-2); }
-.rt-SidebarFooter:where(.rt-gap-3) { gap: var(--space-3); }
-.rt-SidebarFooter:where(.rt-gap-4) { gap: var(--space-4); }
+.rt-SidebarHeader:where(.rt-flex-row) {
+  flex-direction: row;
+}
+.rt-SidebarHeader:where(.rt-flex-col) {
+  flex-direction: column;
+}
+.rt-SidebarHeader:where(.rt-items-center) {
+  align-items: center;
+}
+.rt-SidebarHeader:where(.rt-items-start) {
+  align-items: flex-start;
+}
+.rt-SidebarHeader:where(.rt-items-end) {
+  align-items: flex-end;
+}
+.rt-SidebarHeader:where(.rt-justify-between) {
+  justify-content: space-between;
+}
+.rt-SidebarHeader:where(.rt-justify-center) {
+  justify-content: center;
+}
+.rt-SidebarHeader:where(.rt-justify-start) {
+  justify-content: flex-start;
+}
+.rt-SidebarHeader:where(.rt-justify-end) {
+  justify-content: flex-end;
+}
+.rt-SidebarHeader:where(.rt-gap-1) {
+  gap: var(--space-1);
+}
+.rt-SidebarHeader:where(.rt-gap-2) {
+  gap: var(--space-2);
+}
+.rt-SidebarHeader:where(.rt-gap-3) {
+  gap: var(--space-3);
+}
+.rt-SidebarHeader:where(.rt-gap-4) {
+  gap: var(--space-4);
+}
+
+.rt-SidebarFooter:where(.rt-flex-row) {
+  flex-direction: row;
+}
+.rt-SidebarFooter:where(.rt-flex-col) {
+  flex-direction: column;
+}
+.rt-SidebarFooter:where(.rt-items-center) {
+  align-items: center;
+}
+.rt-SidebarFooter:where(.rt-items-start) {
+  align-items: flex-start;
+}
+.rt-SidebarFooter:where(.rt-items-end) {
+  align-items: flex-end;
+}
+.rt-SidebarFooter:where(.rt-justify-between) {
+  justify-content: space-between;
+}
+.rt-SidebarFooter:where(.rt-justify-center) {
+  justify-content: center;
+}
+.rt-SidebarFooter:where(.rt-justify-start) {
+  justify-content: flex-start;
+}
+.rt-SidebarFooter:where(.rt-justify-end) {
+  justify-content: flex-end;
+}
+.rt-SidebarFooter:where(.rt-gap-1) {
+  gap: var(--space-1);
+}
+.rt-SidebarFooter:where(.rt-gap-2) {
+  gap: var(--space-2);
+}
+.rt-SidebarFooter:where(.rt-gap-3) {
+  gap: var(--space-3);
+}
+.rt-SidebarFooter:where(.rt-gap-4) {
+  gap: var(--space-4);
+}
 
 /* Header/Footer Menu Button Support */
 .rt-SidebarHeader :where(.rt-SidebarMenuButton),
@@ -266,21 +318,22 @@
   text-align: left;
   cursor: var(--cursor-menu-item);
   user-select: none;
-  
+
   /* Header/Footer-specific styling */
   justify-content: flex-start;
-  
+
   /* Transitions */
-  transition: background var(--motion-duration-small) var(--motion-ease-standard), 
-              box-shadow var(--motion-duration-small) var(--motion-ease-standard),
-              filter var(--motion-duration-small) var(--motion-ease-standard);
-  
+  transition:
+    background var(--motion-duration-small) var(--motion-ease-standard),
+    box-shadow var(--motion-duration-small) var(--motion-ease-standard),
+    filter var(--motion-duration-small) var(--motion-ease-standard);
+
   /* Focus state */
   &:where(:focus-visible) {
     outline: 2px solid var(--focus-8);
     outline-offset: 2px;
   }
-  
+
   /* Reduced motion support */
   @media (prefers-reduced-motion: reduce) {
     transition: none;
@@ -397,15 +450,17 @@
   /* Sub-trigger transitions - match base menu */
   & :where(.rt-SidebarMenuSubTrigger) {
     transition: var(--transition-menu);
-    
+
     /* Reduced motion support */
     @media (prefers-reduced-motion: reduce) {
       transition: none;
     }
-    
+
     /* Remove backdrop-filter transitions in translucent mode to prevent flickering */
     :where([data-panel-background='translucent']) & {
-      transition: background var(--duration-1) var(--ease-1), color var(--duration-2) var(--ease-1);
+      transition:
+        background var(--duration-1) var(--ease-1),
+        color var(--duration-2) var(--ease-1);
     }
   }
 
@@ -413,7 +468,7 @@
   & :where(.rt-SidebarMenuSubTrigger[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);
@@ -435,7 +490,9 @@
   & :where(.rt-SidebarMenuButton) {
     /* Remove backdrop-filter transitions in translucent mode to prevent flickering */
     :where([data-panel-background='translucent']) & {
-      transition: background var(--duration-1) var(--ease-1), color var(--duration-2) var(--ease-1);
+      transition:
+        background var(--duration-1) var(--ease-1),
+        color var(--duration-2) var(--ease-1);
     }
   }
 
@@ -576,15 +633,17 @@
   /* Sub-trigger transitions - match base menu */
   & :where(.rt-SidebarMenuSubTrigger) {
     transition: var(--transition-menu);
-    
+
     /* Reduced motion support */
     @media (prefers-reduced-motion: reduce) {
       transition: none;
     }
-    
+
     /* Remove backdrop-filter transitions in translucent mode to prevent flickering */
     :where([data-panel-background='translucent']) & {
-      transition: background var(--duration-1) var(--ease-1), color var(--duration-2) var(--ease-1);
+      transition:
+        background var(--duration-1) var(--ease-1),
+        color var(--duration-2) var(--ease-1);
     }
   }
 
@@ -592,7 +651,7 @@
   & :where(.rt-SidebarMenuSubTrigger[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);
@@ -614,7 +673,9 @@
   & :where(.rt-SidebarMenuButton) {
     /* Remove backdrop-filter transitions in translucent mode to prevent flickering */
     :where([data-panel-background='translucent']) & {
-      transition: background var(--duration-1) var(--ease-1), color var(--duration-2) var(--ease-1);
+      transition:
+        background var(--duration-1) var(--ease-1),
+        color var(--duration-2) var(--ease-1);
     }
   }
 
@@ -622,7 +683,7 @@
   & :where(.rt-SidebarMenuButton[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);
@@ -677,4 +738,4 @@
   }
 }
 
-/* Removed old icon-only collapsed mode rules in favor of Shell rail mode */
+/* Removed old icon-only collapsed mode rules in favor of Shell rail mode */

package/src/components/sidebar.tsx

@@ -39,21 +39,7 @@ function useSidebarVisual() {
   return React.useContext(SidebarVisualContext);
 }
 
-// Context detection for Shell.Sidebar integration
-type ShellSidebarSectionContextValue = {
-  side: 'start' | 'end';
-  section: 'rail' | 'panel';
-};
-
-// Create a context that Shell.Sidebar can provide
-const ShellSidebarSectionContext = React.createContext<ShellSidebarSectionContextValue | null>(
-  null,
-);
-
-// This context comes from Shell.Sidebar when Sidebar is used within Shell
-function useShellSidebarSection(): ShellSidebarSectionContextValue | null {
-  return React.useContext(ShellSidebarSectionContext);
-}
+// Sidebar is now independent of Shell - no integration needed
 
 // Main Sidebar component
 type SidebarOwnProps = GetPropDefTypes<typeof sidebarPropDefs>;
@@ -79,9 +65,8 @@ const Sidebar = React.forwardRef<HTMLDivElement, SidebarProps>((props, forwarded
   const { asChild: _, panelBackground: __, ...safeRootProps } = rootProps; // Remove asChild and panelBackground from DOM props
   const resolvedColor = color || themeContext.accentColor;
 
-  // Detect Shell.Sidebar context to auto-resolve layout
-  const shellSection = useShellSidebarSection();
-  const resolvedLayout = layout || shellSection?.section || 'panel'; // Default to 'panel' if no context
+  // Resolve layout (default to 'panel')
+  const resolvedLayout = layout || 'panel';
 
   // Update context with current props - we'll pass the resolved values
   const resolvedSize = typeof size === 'object' ? size.initial || '2' : size;
@@ -153,7 +138,7 @@ const SidebarContent = React.forwardRef<HTMLDivElement, SidebarContentProps>(
             className,
           )}
         >
-          {children}
+          <div className="rt-BaseMenuViewport">{children}</div>
         </div>
       </ScrollArea>
     );
@@ -258,7 +243,7 @@ const SidebarMenu = React.forwardRef<HTMLUListElement, SidebarMenuProps>(
       {...props}
       ref={forwardedRef}
       role="menu"
-      className={classNames('rt-BaseMenuViewport', 'rt-SidebarMenu', className)}
+      className={classNames('rt-SidebarMenu', className)}
     />
   ),
 );
@@ -615,8 +600,4 @@ export type {
   SidebarHeaderProps as HeaderProps,
   SidebarFooterProps as FooterProps,
   BadgeConfig,
-  ShellSidebarSectionContextValue,
 };
-
-// Export context for Shell.Sidebar integration
-export { ShellSidebarSectionContext };

package/src/components/theme.props.tsx

@@ -8,6 +8,7 @@ const appearances = ['inherit', 'light', 'dark'] as const;
 const panelBackgrounds = ['solid', 'translucent'] as const;
 const materials = ['solid', 'translucent'] as const;
 const scalings = ['90%', '95%', '100%', '105%', '110%'] as const;
+const fontFamilies = ['sans', 'mono'] as const;
 
 const themePropDefs = {
   ...asChildPropDef,
@@ -71,6 +72,12 @@ const themePropDefs = {
    * https://www.radix-ui.com/themes/docs/theme/layout
    */
   scaling: { type: 'enum', values: scalings, default: '100%' },
+  /**
+   * Sets the font family for the theme.
+   *
+   * @default 'sans'
+   */
+  fontFamily: { type: 'enum', values: fontFamilies, default: 'sans' },
 } satisfies {
   hasBackground: PropDef<boolean>;
   appearance: PropDef<(typeof appearances)[number]>;
@@ -80,6 +87,7 @@ const themePropDefs = {
   panelBackground: PropDef<(typeof panelBackgrounds)[number]>;
   radius: PropDef<(typeof radii)[number]>;
   scaling: PropDef<(typeof scalings)[number]>;
+  fontFamily: PropDef<(typeof fontFamilies)[number]>;
 };
 
 type ThemeOwnProps = GetPropDefTypes<typeof themePropDefs & typeof asChildPropDef>;

package/src/components/theme.tsx

@@ -19,6 +19,7 @@ type ThemeMaterial = (typeof themePropDefs.material.values)[number];
 type ThemePanelBackground = (typeof themePropDefs.panelBackground.values)[number];
 type ThemeRadius = (typeof themePropDefs.radius.values)[number];
 type ThemeScaling = (typeof themePropDefs.scaling.values)[number];
+type ThemeFontFamily = (typeof themePropDefs.fontFamily.values)[number];
 
 interface ThemeChangeHandlers {
   onAppearanceChange: (appearance: ThemeAppearance) => void;
@@ -28,6 +29,7 @@ interface ThemeChangeHandlers {
   onPanelBackgroundChange: (panelBackground: ThemePanelBackground) => void;
   onRadiusChange: (radius: ThemeRadius) => void;
   onScalingChange: (scaling: ThemeScaling) => void;
+  onFontFamilyChange: (fontFamily: ThemeFontFamily) => void;
 }
 
 interface ThemeContextValue extends ThemeChangeHandlers {
@@ -39,6 +41,7 @@ interface ThemeContextValue extends ThemeChangeHandlers {
   panelBackground: ThemePanelBackground;
   radius: ThemeRadius;
   scaling: ThemeScaling;
+  fontFamily: ThemeFontFamily;
 }
 const ThemeContext = React.createContext<ThemeContextValue | undefined>(undefined);
 
@@ -77,6 +80,7 @@ const ThemeRoot = React.forwardRef<ThemeImplElement, ThemeImplPublicProps>(
       panelBackground: panelBackgroundProp = themePropDefs.panelBackground.default,
       radius: radiusProp = themePropDefs.radius.default,
       scaling: scalingProp = themePropDefs.scaling.default,
+      fontFamily: fontFamilyProp = themePropDefs.fontFamily.default,
       hasBackground = themePropDefs.hasBackground.default,
       ...rootProps
     } = props;
@@ -115,6 +119,9 @@ const ThemeRoot = React.forwardRef<ThemeImplElement, ThemeImplPublicProps>(
     const [scaling, setScaling] = React.useState(scalingProp);
     React.useEffect(() => setScaling(scalingProp), [scalingProp]);
 
+    const [fontFamily, setFontFamily] = React.useState(fontFamilyProp);
+    React.useEffect(() => setFontFamily(fontFamilyProp), [fontFamilyProp]);
+
     return (
       <ThemeImpl
         {...rootProps}
@@ -129,6 +136,7 @@ const ThemeRoot = React.forwardRef<ThemeImplElement, ThemeImplPublicProps>(
         panelBackground={panelBackground}
         radius={radius}
         scaling={scaling}
+        fontFamily={fontFamily}
         //
         onAppearanceChange={setAppearance}
         onAccentColorChange={setAccentColor}
@@ -137,6 +145,7 @@ const ThemeRoot = React.forwardRef<ThemeImplElement, ThemeImplPublicProps>(
         onPanelBackgroundChange={setPanelBackground}
         onRadiusChange={setRadius}
         onScalingChange={setScaling}
+        onFontFamilyChange={setFontFamily}
       />
     );
   },
@@ -167,6 +176,7 @@ const ThemeImpl = React.forwardRef<ThemeImplElement, ThemeImplProps>((props, for
       themePropDefs.panelBackground.default,
     radius = props.radius ?? context?.radius ?? themePropDefs.radius.default,
     scaling = props.scaling ?? context?.scaling ?? themePropDefs.scaling.default,
+    fontFamily = props.fontFamily ?? context?.fontFamily ?? themePropDefs.fontFamily.default,
     //
     onAppearanceChange = noop,
     onAccentColorChange = noop,
@@ -175,6 +185,7 @@ const ThemeImpl = React.forwardRef<ThemeImplElement, ThemeImplProps>((props, for
     onPanelBackgroundChange = noop,
     onRadiusChange = noop,
     onScalingChange = noop,
+    onFontFamilyChange = noop,
     //
     ...themeProps
   } = props;
@@ -195,6 +206,7 @@ const ThemeImpl = React.forwardRef<ThemeImplElement, ThemeImplProps>((props, for
           panelBackground,
           radius,
           scaling,
+          fontFamily,
           //
           onAppearanceChange,
           onAccentColorChange,
@@ -203,6 +215,7 @@ const ThemeImpl = React.forwardRef<ThemeImplElement, ThemeImplProps>((props, for
           onPanelBackgroundChange,
           onRadiusChange,
           onScalingChange,
+          onFontFamilyChange,
         }),
         [
           appearance,
@@ -213,6 +226,7 @@ const ThemeImpl = React.forwardRef<ThemeImplElement, ThemeImplProps>((props, for
           panelBackground,
           radius,
           scaling,
+          fontFamily,
           //
           onAppearanceChange,
           onAccentColorChange,
@@ -221,6 +235,7 @@ const ThemeImpl = React.forwardRef<ThemeImplElement, ThemeImplProps>((props, for
           onPanelBackgroundChange,
           onRadiusChange,
           onScalingChange,
+          onFontFamilyChange,
         ],
       )}
     >
@@ -234,6 +249,7 @@ const ThemeImpl = React.forwardRef<ThemeImplElement, ThemeImplProps>((props, for
         data-panel-background={panelBackground}
         data-radius={radius}
         data-scaling={scaling}
+        data-font-family={fontFamily}
         ref={forwardedRef}
         {...themeProps}
         className={classNames(