@kushagradhawan/kookie-ui 0.1.41 → 0.1.42

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

package/src/helpers/font-config.ts

@@ -0,0 +1,167 @@
+/**
+ * Font configuration utilities for Kookie UI
+ *
+ * These utilities help users configure custom fonts through CSS variables
+ * and provide type-safe font configuration options.
+ */
+
+/**
+ * Font family configuration interface
+ */
+export interface FontConfig {
+  /** Sans-serif font stack for fontFamily="sans" */
+  sans?: string;
+  /** Monospace font stack for fontFamily="mono" */
+  mono?: string;
+  /** Base Inter font replacement */
+  inter?: string;
+  /** Base JetBrains Mono font replacement */
+  jetbrainsMono?: string;
+}
+
+/**
+ * CSS variable names used by Kookie UI for fonts
+ */
+export const FONT_CSS_VARIABLES = {
+  sans: '--font-sans',
+  mono: '--font-mono',
+  inter: '--font-inter',
+  jetbrainsMono: '--font-jetbrains-mono',
+  defaultFamily: '--default-font-family',
+  headingFamily: '--heading-font-family',
+  strongFamily: '--strong-font-family',
+  codeFamily: '--code-font-family',
+} as const;
+
+/**
+ * Popular font stacks for common use cases
+ */
+export const FONT_STACKS = {
+  // Sans-serif options
+  inter: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+  system:
+    "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+  poppins: "'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif",
+  openSans: "'Open Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif",
+
+  // Monospace options
+  jetbrainsMono: "'JetBrains Mono', 'Fira Code', 'Consolas', 'Liberation Mono', monospace",
+  firaCode: "'Fira Code', 'JetBrains Mono', 'Consolas', 'Liberation Mono', monospace",
+  sourceCodePro: "'Source Code Pro', 'JetBrains Mono', 'Consolas', monospace",
+  systemMono: "'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', 'Courier New', monospace",
+} as const;
+
+/**
+ * Apply font configuration to CSS variables
+ *
+ * @param config Font configuration object
+ * @param target Target element (defaults to document.documentElement)
+ *
+ * @example
+ * ```ts
+ * // Use Google Fonts
+ * applyFontConfig({
+ *   sans: FONT_STACKS.poppins,
+ *   mono: FONT_STACKS.firaCode
+ * });
+ *
+ * // Use system fonts only
+ * applyFontConfig({
+ *   sans: FONT_STACKS.system,
+ *   mono: FONT_STACKS.systemMono
+ * });
+ * ```
+ */
+export function applyFontConfig(
+  config: FontConfig,
+  target: HTMLElement = document.documentElement,
+): void {
+  const style = target.style;
+
+  if (config.sans) {
+    style.setProperty(FONT_CSS_VARIABLES.sans, config.sans);
+  }
+
+  if (config.mono) {
+    style.setProperty(FONT_CSS_VARIABLES.mono, config.mono);
+  }
+
+  if (config.inter) {
+    style.setProperty(FONT_CSS_VARIABLES.inter, config.inter);
+  }
+
+  if (config.jetbrainsMono) {
+    style.setProperty(FONT_CSS_VARIABLES.jetbrainsMono, config.jetbrainsMono);
+  }
+}
+
+/**
+ * Generate CSS string for font configuration
+ *
+ * @param config Font configuration object
+ * @returns CSS string that can be injected into a stylesheet
+ *
+ * @example
+ * ```ts
+ * const css = generateFontCSS({
+ *   sans: FONT_STACKS.poppins,
+ *   mono: FONT_STACKS.firaCode
+ * });
+ *
+ * // Inject into document
+ * const style = document.createElement('style');
+ * style.textContent = css;
+ * document.head.appendChild(style);
+ * ```
+ */
+export function generateFontCSS(config: FontConfig): string {
+  const rules: string[] = [':root {'];
+
+  if (config.sans) {
+    rules.push(`  ${FONT_CSS_VARIABLES.sans}: ${config.sans};`);
+  }
+
+  if (config.mono) {
+    rules.push(`  ${FONT_CSS_VARIABLES.mono}: ${config.mono};`);
+  }
+
+  if (config.inter) {
+    rules.push(`  ${FONT_CSS_VARIABLES.inter}: ${config.inter};`);
+  }
+
+  if (config.jetbrainsMono) {
+    rules.push(`  ${FONT_CSS_VARIABLES.jetbrainsMono}: ${config.jetbrainsMono};`);
+  }
+
+  rules.push('}');
+
+  return rules.join('\n');
+}
+
+/**
+ * Reset fonts to Kookie UI defaults
+ */
+export function resetFonts(target: HTMLElement = document.documentElement): void {
+  const style = target.style;
+
+  // Remove custom font variables to fall back to defaults
+  style.removeProperty(FONT_CSS_VARIABLES.sans);
+  style.removeProperty(FONT_CSS_VARIABLES.mono);
+  style.removeProperty(FONT_CSS_VARIABLES.inter);
+  style.removeProperty(FONT_CSS_VARIABLES.jetbrainsMono);
+}
+
+/**
+ * Get current font configuration from CSS variables
+ */
+export function getCurrentFontConfig(target: HTMLElement = document.documentElement): FontConfig {
+  const computedStyle = getComputedStyle(target);
+
+  return {
+    sans: computedStyle.getPropertyValue(FONT_CSS_VARIABLES.sans).trim() || undefined,
+    mono: computedStyle.getPropertyValue(FONT_CSS_VARIABLES.mono).trim() || undefined,
+    inter: computedStyle.getPropertyValue(FONT_CSS_VARIABLES.inter).trim() || undefined,
+    jetbrainsMono:
+      computedStyle.getPropertyValue(FONT_CSS_VARIABLES.jetbrainsMono).trim() || undefined,
+  };
+}

package/src/helpers/index.ts

@@ -1,6 +1,7 @@
 export * from './component-props.js';
 export * from './extract-margin-props.js';
 export * from './extract-props.js';
+export * from './font-config.js';
 export * from './get-margin-styles.js';
 export * from './get-matching-gray-color.js';
 export * from './get-responsive-styles.js';

package/src/styles/fonts.css

@@ -2,19 +2,23 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,100..900;1,100..900&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');
 
-/* Font Variables */
+/* Font Variables - Customize these to change fonts throughout your app */
 :root {
-  --font-inter: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-  --font-jetbrains-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
-  
-  /* Primary font variables */
-  --font-general-sans: var(--font-inter);
-  --font-inter-mono: var(--font-jetbrains-mono);
-  
-  /* Tailwind-compatible aliases */
-  --font-sans: var(--font-inter);
-  --font-mono: var(--font-jetbrains-mono);
-  
+  /* Base font definitions - override these in your CSS to customize fonts */
+  --font-inter:
+    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
+    sans-serif;
+  --font-jetbrains-mono:
+    'JetBrains Mono', 'Fira Code', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
+
+  /* Primary font variables - these map to theme fontFamily values */
+  --font-general-sans: var(--font-inter); /* Used when fontFamily="sans" */
+  --font-inter-mono: var(--font-jetbrains-mono); /* Used for code elements */
+
+  /* Tailwind-compatible aliases - override these to change theme fonts */
+  --font-sans: var(--font-inter); /* Theme fontFamily="sans" uses this */
+  --font-mono: var(--font-jetbrains-mono); /* Theme fontFamily="mono" uses this */
+
   /* Force proper font weight rendering */
   font-synthesis: none; /* Prevent browser from synthesizing weights */
 }
@@ -33,4 +37,3 @@
   font-display: block;
   src: local('-apple-system'), local('BlinkMacSystemFont'), local('Segoe UI'), local('Roboto');
 }
-

package/src/styles/tokens/typography.css

@@ -43,8 +43,17 @@
 
   /* default values */
 
-  --default-font-family: var(--font-inter, 'Inter'), -apple-system, BlinkMacSystemFont, 'Segoe UI (Custom)',
-    Roboto, 'Helvetica Neue', 'Open Sans (Custom)', system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  --default-font-family:
+    var(--font-inter, 'Inter'), -apple-system, BlinkMacSystemFont, 'Segoe UI (Custom)', Roboto,
+    'Helvetica Neue', 'Open Sans (Custom)', system-ui, sans-serif, 'Apple Color Emoji',
+    'Segoe UI Emoji';
+
+  /* Font family overrides based on theme data attribute */
+  --default-font-family-sans:
+    var(--font-inter, 'Inter'), -apple-system, BlinkMacSystemFont, 'Segoe UI (Custom)', Roboto,
+    'Helvetica Neue', 'Open Sans (Custom)', system-ui, sans-serif, 'Apple Color Emoji',
+    'Segoe UI Emoji';
+  --default-font-family-mono: var(--font-mono);
   --default-font-size: var(--font-size-3); /* Same size used for `<Text size="3">` */
   --default-font-style: normal;
   --default-font-weight: var(--font-weight-regular);
@@ -75,8 +84,9 @@
 
   /* Code */
 
-  --code-font-family: var(--font-inter-mono, 'JetBrains Mono'), 'Menlo', 'Consolas (Custom)', 'Bitstream Vera Sans Mono',
-    monospace, 'Apple Color Emoji', 'Segoe UI Emoji';
+  --code-font-family:
+    var(--font-inter-mono, 'JetBrains Mono'), 'Menlo', 'Consolas (Custom)',
+    'Bitstream Vera Sans Mono', monospace, 'Apple Color Emoji', 'Segoe UI Emoji';
   --code-font-size-adjust: 0.95;
   --code-font-style: normal;
   --code-font-weight: inherit;
@@ -304,3 +314,16 @@
   descent-override: 22%;
   src: local('Consolas Bold Italic');
 }
+
+/* Font family data attribute support */
+[data-font-family='sans'] {
+  --default-font-family: var(--default-font-family-sans);
+  --heading-font-family: var(--default-font-family-sans);
+  --strong-font-family: var(--default-font-family-sans);
+}
+
+[data-font-family='mono'] {
+  --default-font-family: var(--default-font-family-mono);
+  --heading-font-family: var(--default-font-family-mono);
+  --strong-font-family: var(--default-font-family-mono);
+}