@kushagradhawan/kookie-ui 0.1.55 → 0.1.57

package/dist/esm/components/theme.props.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/theme.props.tsx"],
-  "sourcesContent": ["import { asChildPropDef } from '../props/as-child.prop.js';\nimport { accentColors, grayColors } from '../props/color.prop.js';\nimport { radii } from '../props/radius.prop.js';\n\nimport type { GetPropDefTypes, PropDef } from '../props/prop-def.js';\n\nconst appearances = ['inherit', 'light', 'dark'] as const;\nconst panelBackgrounds = ['solid', 'translucent'] as const;\nconst materials = ['solid', 'translucent'] as const;\nconst scalings = ['90%', '95%', '100%', '105%', '110%'] as const;\nconst fontFamilies = ['sans', 'mono'] as const;\n\nconst themePropDefs = {\n  ...asChildPropDef,\n  /**\n   * Whether to apply background color to the Theme element.\n   *\n   * Defaults to true for the root Theme and for Theme elements that\n   * have an explicit light or dark appearance prop.\n   */\n  hasBackground: { type: 'boolean', default: true },\n  /**\n   * Sets the color scheme of the theme, typcially referred to as light and dark mode.\n   *\n   * @link\n   * https://www.radix-ui.com/themes/docs/theme/dark-mode\n   */\n  appearance: { type: 'enum', values: appearances, default: 'inherit' },\n  /**\n   * Selects one of the accent color options to use in the Theme.\n   *\n   * @link\n   * https://www.radix-ui.com/themes/docs/theme/color\n   */\n  accentColor: { type: 'enum', values: accentColors, default: 'blue' },\n  /**\n   * Selects one of the gray color options to use in the Theme.\n   *\n   * @link\n   * https://www.radix-ui.com/themes/docs/theme/color\n   */\n  grayColor: { type: 'enum', values: grayColors, default: 'slate' },\n  /**\n   * Controls whether to use a solid or translucent background color on panelled\n   * elements such as Card or Table is solid or translucent.\n   *\n   * @link\n   * https://www.radix-ui.com/themes/docs/theme/visual-style\n   */\n  material: { type: 'enum', values: materials, default: 'translucent' },\n  /**\n   * Controls whether to use a solid or translucent background color on panelled\n   * elements such as Card or Table is solid or translucent.\n   *\n   * @deprecated Use `material` prop instead. This prop will be removed in a future version.\n   *\n   * @link\n   * https://www.radix-ui.com/themes/docs/theme/visual-style\n   */\n  panelBackground: { type: 'enum', values: panelBackgrounds, default: 'translucent' },\n  /**\n   * Sets the default radius of the components.\n   *\n   * @link\n   * https://www.radix-ui.com/themes/docs/theme/visual-style\n   */\n  radius: { type: 'enum', values: radii, default: 'medium' },\n  /**\n   * Sets a scaling multiplier for values like spacing, font sizes, line heights, etc. are scaled.\n   *\n   * @link\n   * https://www.radix-ui.com/themes/docs/theme/layout\n   */\n  scaling: { type: 'enum', values: scalings, default: '100%' },\n  /**\n   * Sets the font family for the theme.\n   *\n   * @default 'sans'\n   */\n  fontFamily: { type: 'enum', values: fontFamilies, default: 'sans' },\n} satisfies {\n  hasBackground: PropDef<boolean>;\n  appearance: PropDef<(typeof appearances)[number]>;\n  accentColor: PropDef<(typeof accentColors)[number]>;\n  grayColor: PropDef<(typeof grayColors)[number]>;\n  material: PropDef<(typeof materials)[number]>;\n  panelBackground: PropDef<(typeof panelBackgrounds)[number]>;\n  radius: PropDef<(typeof radii)[number]>;\n  scaling: PropDef<(typeof scalings)[number]>;\n  fontFamily: PropDef<(typeof fontFamilies)[number]>;\n};\n\ntype ThemeOwnProps = GetPropDefTypes<typeof themePropDefs & typeof asChildPropDef>;\n\nexport { themePropDefs };\nexport type { ThemeOwnProps };\n"],
-  "mappings": "AAAA,OAAS,kBAAAA,MAAsB,4BAC/B,OAAS,gBAAAC,EAAc,cAAAC,MAAkB,yBACzC,OAAS,SAAAC,MAAa,0BAItB,MAAMC,EAAc,CAAC,UAAW,QAAS,MAAM,EACzCC,EAAmB,CAAC,QAAS,aAAa,EAC1CC,EAAY,CAAC,QAAS,aAAa,EACnCC,EAAW,CAAC,MAAO,MAAO,OAAQ,OAAQ,MAAM,EAChDC,EAAe,CAAC,OAAQ,MAAM,EAE9BC,EAAgB,CACpB,GAAGT,EAOH,cAAe,CAAE,KAAM,UAAW,QAAS,EAAK,EAOhD,WAAY,CAAE,KAAM,OAAQ,OAAQI,EAAa,QAAS,SAAU,EAOpE,YAAa,CAAE,KAAM,OAAQ,OAAQH,EAAc,QAAS,MAAO,EAOnE,UAAW,CAAE,KAAM,OAAQ,OAAQC,EAAY,QAAS,OAAQ,EAQhE,SAAU,CAAE,KAAM,OAAQ,OAAQI,EAAW,QAAS,aAAc,EAUpE,gBAAiB,CAAE,KAAM,OAAQ,OAAQD,EAAkB,QAAS,aAAc,EAOlF,OAAQ,CAAE,KAAM,OAAQ,OAAQF,EAAO,QAAS,QAAS,EAOzD,QAAS,CAAE,KAAM,OAAQ,OAAQI,EAAU,QAAS,MAAO,EAM3D,WAAY,CAAE,KAAM,OAAQ,OAAQC,EAAc,QAAS,MAAO,CACpE",
+  "sourcesContent": ["import { asChildPropDef } from '../props/as-child.prop.js';\nimport { accentColors, grayColors } from '../props/color.prop.js';\nimport { radii } from '../props/radius.prop.js';\n\nimport type { GetPropDefTypes, PropDef } from '../props/prop-def.js';\n\nconst appearances = ['inherit', 'light', 'dark'] as const;\nconst panelBackgrounds = ['solid', 'translucent'] as const;\nconst materials = ['solid', 'translucent'] as const;\nconst scalings = ['90%', '95%', '100%', '105%', '110%'] as const;\nconst fontFamilies = ['sans', 'mono', 'serif'] as const;\n\nconst themePropDefs = {\n  ...asChildPropDef,\n  /**\n   * Whether to apply background color to the Theme element.\n   *\n   * Defaults to true for the root Theme and for Theme elements that\n   * have an explicit light or dark appearance prop.\n   */\n  hasBackground: { type: 'boolean', default: true },\n  /**\n   * Sets the color scheme of the theme, typcially referred to as light and dark mode.\n   *\n   * @link\n   * https://www.radix-ui.com/themes/docs/theme/dark-mode\n   */\n  appearance: { type: 'enum', values: appearances, default: 'inherit' },\n  /**\n   * Selects one of the accent color options to use in the Theme.\n   *\n   * @link\n   * https://www.radix-ui.com/themes/docs/theme/color\n   */\n  accentColor: { type: 'enum', values: accentColors, default: 'blue' },\n  /**\n   * Selects one of the gray color options to use in the Theme.\n   *\n   * @link\n   * https://www.radix-ui.com/themes/docs/theme/color\n   */\n  grayColor: { type: 'enum', values: grayColors, default: 'slate' },\n  /**\n   * Controls whether to use a solid or translucent background color on panelled\n   * elements such as Card or Table is solid or translucent.\n   *\n   * @link\n   * https://www.radix-ui.com/themes/docs/theme/visual-style\n   */\n  material: { type: 'enum', values: materials, default: 'translucent' },\n  /**\n   * Controls whether to use a solid or translucent background color on panelled\n   * elements such as Card or Table is solid or translucent.\n   *\n   * @deprecated Use `material` prop instead. This prop will be removed in a future version.\n   *\n   * @link\n   * https://www.radix-ui.com/themes/docs/theme/visual-style\n   */\n  panelBackground: { type: 'enum', values: panelBackgrounds, default: 'translucent' },\n  /**\n   * Sets the default radius of the components.\n   *\n   * @link\n   * https://www.radix-ui.com/themes/docs/theme/visual-style\n   */\n  radius: { type: 'enum', values: radii, default: 'medium' },\n  /**\n   * Sets a scaling multiplier for values like spacing, font sizes, line heights, etc. are scaled.\n   *\n   * @link\n   * https://www.radix-ui.com/themes/docs/theme/layout\n   */\n  scaling: { type: 'enum', values: scalings, default: '100%' },\n  /**\n   * Sets the font family for the theme.\n   *\n   * @default 'sans'\n   */\n  fontFamily: { type: 'enum', values: fontFamilies, default: 'sans' },\n} satisfies {\n  hasBackground: PropDef<boolean>;\n  appearance: PropDef<(typeof appearances)[number]>;\n  accentColor: PropDef<(typeof accentColors)[number]>;\n  grayColor: PropDef<(typeof grayColors)[number]>;\n  material: PropDef<(typeof materials)[number]>;\n  panelBackground: PropDef<(typeof panelBackgrounds)[number]>;\n  radius: PropDef<(typeof radii)[number]>;\n  scaling: PropDef<(typeof scalings)[number]>;\n  fontFamily: PropDef<(typeof fontFamilies)[number]>;\n};\n\ntype ThemeOwnProps = GetPropDefTypes<typeof themePropDefs & typeof asChildPropDef>;\n\nexport { themePropDefs };\nexport type { ThemeOwnProps };\n"],
+  "mappings": "AAAA,OAAS,kBAAAA,MAAsB,4BAC/B,OAAS,gBAAAC,EAAc,cAAAC,MAAkB,yBACzC,OAAS,SAAAC,MAAa,0BAItB,MAAMC,EAAc,CAAC,UAAW,QAAS,MAAM,EACzCC,EAAmB,CAAC,QAAS,aAAa,EAC1CC,EAAY,CAAC,QAAS,aAAa,EACnCC,EAAW,CAAC,MAAO,MAAO,OAAQ,OAAQ,MAAM,EAChDC,EAAe,CAAC,OAAQ,OAAQ,OAAO,EAEvCC,EAAgB,CACpB,GAAGT,EAOH,cAAe,CAAE,KAAM,UAAW,QAAS,EAAK,EAOhD,WAAY,CAAE,KAAM,OAAQ,OAAQI,EAAa,QAAS,SAAU,EAOpE,YAAa,CAAE,KAAM,OAAQ,OAAQH,EAAc,QAAS,MAAO,EAOnE,UAAW,CAAE,KAAM,OAAQ,OAAQC,EAAY,QAAS,OAAQ,EAQhE,SAAU,CAAE,KAAM,OAAQ,OAAQI,EAAW,QAAS,aAAc,EAUpE,gBAAiB,CAAE,KAAM,OAAQ,OAAQD,EAAkB,QAAS,aAAc,EAOlF,OAAQ,CAAE,KAAM,OAAQ,OAAQF,EAAO,QAAS,QAAS,EAOzD,QAAS,CAAE,KAAM,OAAQ,OAAQI,EAAU,QAAS,MAAO,EAM3D,WAAY,CAAE,KAAM,OAAQ,OAAQC,EAAc,QAAS,MAAO,CACpE",
   "names": ["asChildPropDef", "accentColors", "grayColors", "radii", "appearances", "panelBackgrounds", "materials", "scalings", "fontFamilies", "themePropDefs"]
 }

package/dist/esm/helpers/font-config.d.ts

@@ -12,10 +12,14 @@ export interface FontConfig {
     sans?: string;
     /** Monospace font stack for fontFamily="mono" */
     mono?: string;
+    /** Serif font stack for fontFamily="serif" */
+    serif?: string;
     /** Base Inter font replacement */
     inter?: string;
     /** Base JetBrains Mono font replacement */
     jetbrainsMono?: string;
+    /** Base Playfair Display font replacement */
+    playfairDisplay?: string;
 }
 /**
  * CSS variable names used by Kookie UI for fonts
@@ -23,8 +27,10 @@ export interface FontConfig {
 export declare const FONT_CSS_VARIABLES: {
     readonly sans: "--font-sans";
     readonly mono: "--font-mono";
+    readonly serif: "--font-serif";
     readonly inter: "--font-inter";
     readonly jetbrainsMono: "--font-jetbrains-mono";
+    readonly playfairDisplay: "--font-playfair-display";
     readonly defaultFamily: "--default-font-family";
     readonly headingFamily: "--heading-font-family";
     readonly strongFamily: "--strong-font-family";
@@ -42,6 +48,10 @@ export declare const FONT_STACKS: {
     readonly firaCode: "'Fira Code', 'JetBrains Mono', 'Consolas', 'Liberation Mono', monospace";
     readonly sourceCodePro: "'Source Code Pro', 'JetBrains Mono', 'Consolas', monospace";
     readonly systemMono: "'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', 'Courier New', monospace";
+    readonly playfair: "'Playfair Display', 'Times New Roman', 'Times', 'Georgia', 'Cambria', serif";
+    readonly times: "'Times New Roman', 'Times', 'Georgia', 'Cambria', serif";
+    readonly georgia: "'Georgia', 'Times New Roman', 'Times', serif";
+    readonly lora: "'Lora', 'Times New Roman', 'Times', serif";
 };
 /**
  * Apply font configuration to CSS variables

package/dist/esm/helpers/font-config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"font-config.d.ts","sourceRoot":"","sources":["../../../src/helpers/font-config.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,kDAAkD;IAClD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;GAEG;AACH,eAAO,MAAM,kBAAkB;;;;;;;;;CASrB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,WAAW;;;;;;;;;CAad,CAAC;AAEX;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,eAAe,CAC7B,MAAM,EAAE,UAAU,EAClB,MAAM,GAAE,WAAsC,GAC7C,IAAI,CAkBN;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,eAAe,CAAC,MAAM,EAAE,UAAU,GAAG,MAAM,CAsB1D;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,MAAM,GAAE,WAAsC,GAAG,IAAI,CAQ/E;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,MAAM,GAAE,WAAsC,GAAG,UAAU,CAU/F"}
+{"version":3,"file":"font-config.d.ts","sourceRoot":"","sources":["../../../src/helpers/font-config.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,kDAAkD;IAClD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,6CAA6C;IAC7C,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;GAEG;AACH,eAAO,MAAM,kBAAkB;;;;;;;;;;;CAWrB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,WAAW;;;;;;;;;;;;;CAkBd,CAAC;AAEX;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,eAAe,CAAC,MAAM,EAAE,UAAU,EAAE,MAAM,GAAE,WAAsC,GAAG,IAAI,CA0BxG;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,eAAe,CAAC,MAAM,EAAE,UAAU,GAAG,MAAM,CA8B1D;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,MAAM,GAAE,WAAsC,GAAG,IAAI,CAU/E;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,MAAM,GAAE,WAAsC,GAAG,UAAU,CAW/F"}

package/dist/esm/helpers/font-config.js

@@ -1,3 +1,3 @@
-const n={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"},s={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",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"};function r(o,e=document.documentElement){const t=e.style;o.sans&&t.setProperty(n.sans,o.sans),o.mono&&t.setProperty(n.mono,o.mono),o.inter&&t.setProperty(n.inter,o.inter),o.jetbrainsMono&&t.setProperty(n.jetbrainsMono,o.jetbrainsMono)}function i(o){const e=[":root {"];return o.sans&&e.push(`  ${n.sans}: ${o.sans};`),o.mono&&e.push(`  ${n.mono}: ${o.mono};`),o.inter&&e.push(`  ${n.inter}: ${o.inter};`),o.jetbrainsMono&&e.push(`  ${n.jetbrainsMono}: ${o.jetbrainsMono};`),e.push("}"),e.join(`
-`)}function a(o=document.documentElement){const e=o.style;e.removeProperty(n.sans),e.removeProperty(n.mono),e.removeProperty(n.inter),e.removeProperty(n.jetbrainsMono)}function m(o=document.documentElement){const e=getComputedStyle(o);return{sans:e.getPropertyValue(n.sans).trim()||void 0,mono:e.getPropertyValue(n.mono).trim()||void 0,inter:e.getPropertyValue(n.inter).trim()||void 0,jetbrainsMono:e.getPropertyValue(n.jetbrainsMono).trim()||void 0}}export{n as FONT_CSS_VARIABLES,s as FONT_STACKS,r as applyFontConfig,i as generateFontCSS,m as getCurrentFontConfig,a as resetFonts};
+const n={sans:"--font-sans",mono:"--font-mono",serif:"--font-serif",inter:"--font-inter",jetbrainsMono:"--font-jetbrains-mono",playfairDisplay:"--font-playfair-display",defaultFamily:"--default-font-family",headingFamily:"--heading-font-family",strongFamily:"--strong-font-family",codeFamily:"--code-font-family"},r={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",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",playfair:"'Playfair Display', 'Times New Roman', 'Times', 'Georgia', 'Cambria', serif",times:"'Times New Roman', 'Times', 'Georgia', 'Cambria', serif",georgia:"'Georgia', 'Times New Roman', 'Times', serif",lora:"'Lora', 'Times New Roman', 'Times', serif"};function s(e,o=document.documentElement){const t=o.style;e.sans&&t.setProperty(n.sans,e.sans),e.mono&&t.setProperty(n.mono,e.mono),e.serif&&t.setProperty(n.serif,e.serif),e.inter&&t.setProperty(n.inter,e.inter),e.jetbrainsMono&&t.setProperty(n.jetbrainsMono,e.jetbrainsMono),e.playfairDisplay&&t.setProperty(n.playfairDisplay,e.playfairDisplay)}function i(e){const o=[":root {"];return e.sans&&o.push(`  ${n.sans}: ${e.sans};`),e.mono&&o.push(`  ${n.mono}: ${e.mono};`),e.serif&&o.push(`  ${n.serif}: ${e.serif};`),e.inter&&o.push(`  ${n.inter}: ${e.inter};`),e.jetbrainsMono&&o.push(`  ${n.jetbrainsMono}: ${e.jetbrainsMono};`),e.playfairDisplay&&o.push(`  ${n.playfairDisplay}: ${e.playfairDisplay};`),o.push("}"),o.join(`
+`)}function a(e=document.documentElement){const o=e.style;o.removeProperty(n.sans),o.removeProperty(n.mono),o.removeProperty(n.serif),o.removeProperty(n.inter),o.removeProperty(n.jetbrainsMono),o.removeProperty(n.playfairDisplay)}function p(e=document.documentElement){const o=getComputedStyle(e);return{sans:o.getPropertyValue(n.sans).trim()||void 0,mono:o.getPropertyValue(n.mono).trim()||void 0,serif:o.getPropertyValue(n.serif).trim()||void 0,inter:o.getPropertyValue(n.inter).trim()||void 0,jetbrainsMono:o.getPropertyValue(n.jetbrainsMono).trim()||void 0,playfairDisplay:o.getPropertyValue(n.playfairDisplay).trim()||void 0}}export{n as FONT_CSS_VARIABLES,r as FONT_STACKS,s as applyFontConfig,i as generateFontCSS,p as getCurrentFontConfig,a as resetFonts};
 //# sourceMappingURL=font-config.js.map

package/dist/esm/helpers/font-config.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/font-config.ts"],
-  "sourcesContent": ["/**\n * Font configuration utilities for Kookie UI\n *\n * These utilities help users configure custom fonts through CSS variables\n * and provide type-safe font configuration options.\n */\n\n/**\n * Font family configuration interface\n */\nexport interface FontConfig {\n  /** Sans-serif font stack for fontFamily=\"sans\" */\n  sans?: string;\n  /** Monospace font stack for fontFamily=\"mono\" */\n  mono?: string;\n  /** Base Inter font replacement */\n  inter?: string;\n  /** Base JetBrains Mono font replacement */\n  jetbrainsMono?: string;\n}\n\n/**\n * CSS variable names used by Kookie UI for fonts\n */\nexport const FONT_CSS_VARIABLES = {\n  sans: '--font-sans',\n  mono: '--font-mono',\n  inter: '--font-inter',\n  jetbrainsMono: '--font-jetbrains-mono',\n  defaultFamily: '--default-font-family',\n  headingFamily: '--heading-font-family',\n  strongFamily: '--strong-font-family',\n  codeFamily: '--code-font-family',\n} as const;\n\n/**\n * Popular font stacks for common use cases\n */\nexport const FONT_STACKS = {\n  // Sans-serif options\n  inter: \"'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif\",\n  system:\n    \"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif\",\n  poppins: \"'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif\",\n  openSans: \"'Open Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif\",\n\n  // Monospace options\n  jetbrainsMono: \"'JetBrains Mono', 'Fira Code', 'Consolas', 'Liberation Mono', monospace\",\n  firaCode: \"'Fira Code', 'JetBrains Mono', 'Consolas', 'Liberation Mono', monospace\",\n  sourceCodePro: \"'Source Code Pro', 'JetBrains Mono', 'Consolas', monospace\",\n  systemMono: \"'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', 'Courier New', monospace\",\n} as const;\n\n/**\n * Apply font configuration to CSS variables\n *\n * @param config Font configuration object\n * @param target Target element (defaults to document.documentElement)\n *\n * @example\n * ```ts\n * // Use Google Fonts\n * applyFontConfig({\n *   sans: FONT_STACKS.poppins,\n *   mono: FONT_STACKS.firaCode\n * });\n *\n * // Use system fonts only\n * applyFontConfig({\n *   sans: FONT_STACKS.system,\n *   mono: FONT_STACKS.systemMono\n * });\n * ```\n */\nexport function applyFontConfig(\n  config: FontConfig,\n  target: HTMLElement = document.documentElement,\n): void {\n  const style = target.style;\n\n  if (config.sans) {\n    style.setProperty(FONT_CSS_VARIABLES.sans, config.sans);\n  }\n\n  if (config.mono) {\n    style.setProperty(FONT_CSS_VARIABLES.mono, config.mono);\n  }\n\n  if (config.inter) {\n    style.setProperty(FONT_CSS_VARIABLES.inter, config.inter);\n  }\n\n  if (config.jetbrainsMono) {\n    style.setProperty(FONT_CSS_VARIABLES.jetbrainsMono, config.jetbrainsMono);\n  }\n}\n\n/**\n * Generate CSS string for font configuration\n *\n * @param config Font configuration object\n * @returns CSS string that can be injected into a stylesheet\n *\n * @example\n * ```ts\n * const css = generateFontCSS({\n *   sans: FONT_STACKS.poppins,\n *   mono: FONT_STACKS.firaCode\n * });\n *\n * // Inject into document\n * const style = document.createElement('style');\n * style.textContent = css;\n * document.head.appendChild(style);\n * ```\n */\nexport function generateFontCSS(config: FontConfig): string {\n  const rules: string[] = [':root {'];\n\n  if (config.sans) {\n    rules.push(`  ${FONT_CSS_VARIABLES.sans}: ${config.sans};`);\n  }\n\n  if (config.mono) {\n    rules.push(`  ${FONT_CSS_VARIABLES.mono}: ${config.mono};`);\n  }\n\n  if (config.inter) {\n    rules.push(`  ${FONT_CSS_VARIABLES.inter}: ${config.inter};`);\n  }\n\n  if (config.jetbrainsMono) {\n    rules.push(`  ${FONT_CSS_VARIABLES.jetbrainsMono}: ${config.jetbrainsMono};`);\n  }\n\n  rules.push('}');\n\n  return rules.join('\\n');\n}\n\n/**\n * Reset fonts to Kookie UI defaults\n */\nexport function resetFonts(target: HTMLElement = document.documentElement): void {\n  const style = target.style;\n\n  // Remove custom font variables to fall back to defaults\n  style.removeProperty(FONT_CSS_VARIABLES.sans);\n  style.removeProperty(FONT_CSS_VARIABLES.mono);\n  style.removeProperty(FONT_CSS_VARIABLES.inter);\n  style.removeProperty(FONT_CSS_VARIABLES.jetbrainsMono);\n}\n\n/**\n * Get current font configuration from CSS variables\n */\nexport function getCurrentFontConfig(target: HTMLElement = document.documentElement): FontConfig {\n  const computedStyle = getComputedStyle(target);\n\n  return {\n    sans: computedStyle.getPropertyValue(FONT_CSS_VARIABLES.sans).trim() || undefined,\n    mono: computedStyle.getPropertyValue(FONT_CSS_VARIABLES.mono).trim() || undefined,\n    inter: computedStyle.getPropertyValue(FONT_CSS_VARIABLES.inter).trim() || undefined,\n    jetbrainsMono:\n      computedStyle.getPropertyValue(FONT_CSS_VARIABLES.jetbrainsMono).trim() || undefined,\n  };\n}\n"],
-  "mappings": "AAwBO,MAAMA,EAAqB,CAChC,KAAM,cACN,KAAM,cACN,MAAO,eACP,cAAe,wBACf,cAAe,wBACf,cAAe,wBACf,aAAc,uBACd,WAAY,oBACd,EAKaC,EAAc,CAEzB,MAAO,6EACP,OACE,6FACF,QAAS,oEACT,SAAU,sEAGV,cAAe,0EACf,SAAU,0EACV,cAAe,6DACf,WAAY,6EACd,EAuBO,SAASC,EACdC,EACAC,EAAsB,SAAS,gBACzB,CACN,MAAMC,EAAQD,EAAO,MAEjBD,EAAO,MACTE,EAAM,YAAYL,EAAmB,KAAMG,EAAO,IAAI,EAGpDA,EAAO,MACTE,EAAM,YAAYL,EAAmB,KAAMG,EAAO,IAAI,EAGpDA,EAAO,OACTE,EAAM,YAAYL,EAAmB,MAAOG,EAAO,KAAK,EAGtDA,EAAO,eACTE,EAAM,YAAYL,EAAmB,cAAeG,EAAO,aAAa,CAE5E,CAqBO,SAASG,EAAgBH,EAA4B,CAC1D,MAAMI,EAAkB,CAAC,SAAS,EAElC,OAAIJ,EAAO,MACTI,EAAM,KAAK,KAAKP,EAAmB,IAAI,KAAKG,EAAO,IAAI,GAAG,EAGxDA,EAAO,MACTI,EAAM,KAAK,KAAKP,EAAmB,IAAI,KAAKG,EAAO,IAAI,GAAG,EAGxDA,EAAO,OACTI,EAAM,KAAK,KAAKP,EAAmB,KAAK,KAAKG,EAAO,KAAK,GAAG,EAG1DA,EAAO,eACTI,EAAM,KAAK,KAAKP,EAAmB,aAAa,KAAKG,EAAO,aAAa,GAAG,EAG9EI,EAAM,KAAK,GAAG,EAEPA,EAAM,KAAK;AAAA,CAAI,CACxB,CAKO,SAASC,EAAWJ,EAAsB,SAAS,gBAAuB,CAC/E,MAAMC,EAAQD,EAAO,MAGrBC,EAAM,eAAeL,EAAmB,IAAI,EAC5CK,EAAM,eAAeL,EAAmB,IAAI,EAC5CK,EAAM,eAAeL,EAAmB,KAAK,EAC7CK,EAAM,eAAeL,EAAmB,aAAa,CACvD,CAKO,SAASS,EAAqBL,EAAsB,SAAS,gBAA6B,CAC/F,MAAMM,EAAgB,iBAAiBN,CAAM,EAE7C,MAAO,CACL,KAAMM,EAAc,iBAAiBV,EAAmB,IAAI,EAAE,KAAK,GAAK,OACxE,KAAMU,EAAc,iBAAiBV,EAAmB,IAAI,EAAE,KAAK,GAAK,OACxE,MAAOU,EAAc,iBAAiBV,EAAmB,KAAK,EAAE,KAAK,GAAK,OAC1E,cACEU,EAAc,iBAAiBV,EAAmB,aAAa,EAAE,KAAK,GAAK,MAC/E,CACF",
+  "sourcesContent": ["/**\n * Font configuration utilities for Kookie UI\n *\n * These utilities help users configure custom fonts through CSS variables\n * and provide type-safe font configuration options.\n */\n\n/**\n * Font family configuration interface\n */\nexport interface FontConfig {\n  /** Sans-serif font stack for fontFamily=\"sans\" */\n  sans?: string;\n  /** Monospace font stack for fontFamily=\"mono\" */\n  mono?: string;\n  /** Serif font stack for fontFamily=\"serif\" */\n  serif?: string;\n  /** Base Inter font replacement */\n  inter?: string;\n  /** Base JetBrains Mono font replacement */\n  jetbrainsMono?: string;\n  /** Base Playfair Display font replacement */\n  playfairDisplay?: string;\n}\n\n/**\n * CSS variable names used by Kookie UI for fonts\n */\nexport const FONT_CSS_VARIABLES = {\n  sans: '--font-sans',\n  mono: '--font-mono',\n  serif: '--font-serif',\n  inter: '--font-inter',\n  jetbrainsMono: '--font-jetbrains-mono',\n  playfairDisplay: '--font-playfair-display',\n  defaultFamily: '--default-font-family',\n  headingFamily: '--heading-font-family',\n  strongFamily: '--strong-font-family',\n  codeFamily: '--code-font-family',\n} as const;\n\n/**\n * Popular font stacks for common use cases\n */\nexport const FONT_STACKS = {\n  // Sans-serif options\n  inter: \"'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif\",\n  system: \"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif\",\n  poppins: \"'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif\",\n  openSans: \"'Open Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif\",\n\n  // Monospace options\n  jetbrainsMono: \"'JetBrains Mono', 'Fira Code', 'Consolas', 'Liberation Mono', monospace\",\n  firaCode: \"'Fira Code', 'JetBrains Mono', 'Consolas', 'Liberation Mono', monospace\",\n  sourceCodePro: \"'Source Code Pro', 'JetBrains Mono', 'Consolas', monospace\",\n  systemMono: \"'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', 'Courier New', monospace\",\n\n  // Serif options\n  playfair: \"'Playfair Display', 'Times New Roman', 'Times', 'Georgia', 'Cambria', serif\",\n  times: \"'Times New Roman', 'Times', 'Georgia', 'Cambria', serif\",\n  georgia: \"'Georgia', 'Times New Roman', 'Times', serif\",\n  lora: \"'Lora', 'Times New Roman', 'Times', serif\",\n} as const;\n\n/**\n * Apply font configuration to CSS variables\n *\n * @param config Font configuration object\n * @param target Target element (defaults to document.documentElement)\n *\n * @example\n * ```ts\n * // Use Google Fonts\n * applyFontConfig({\n *   sans: FONT_STACKS.poppins,\n *   mono: FONT_STACKS.firaCode\n * });\n *\n * // Use system fonts only\n * applyFontConfig({\n *   sans: FONT_STACKS.system,\n *   mono: FONT_STACKS.systemMono\n * });\n * ```\n */\nexport function applyFontConfig(config: FontConfig, target: HTMLElement = document.documentElement): void {\n  const style = target.style;\n\n  if (config.sans) {\n    style.setProperty(FONT_CSS_VARIABLES.sans, config.sans);\n  }\n\n  if (config.mono) {\n    style.setProperty(FONT_CSS_VARIABLES.mono, config.mono);\n  }\n\n  if (config.serif) {\n    style.setProperty(FONT_CSS_VARIABLES.serif, config.serif);\n  }\n\n  if (config.inter) {\n    style.setProperty(FONT_CSS_VARIABLES.inter, config.inter);\n  }\n\n  if (config.jetbrainsMono) {\n    style.setProperty(FONT_CSS_VARIABLES.jetbrainsMono, config.jetbrainsMono);\n  }\n\n  if (config.playfairDisplay) {\n    style.setProperty(FONT_CSS_VARIABLES.playfairDisplay, config.playfairDisplay);\n  }\n}\n\n/**\n * Generate CSS string for font configuration\n *\n * @param config Font configuration object\n * @returns CSS string that can be injected into a stylesheet\n *\n * @example\n * ```ts\n * const css = generateFontCSS({\n *   sans: FONT_STACKS.poppins,\n *   mono: FONT_STACKS.firaCode\n * });\n *\n * // Inject into document\n * const style = document.createElement('style');\n * style.textContent = css;\n * document.head.appendChild(style);\n * ```\n */\nexport function generateFontCSS(config: FontConfig): string {\n  const rules: string[] = [':root {'];\n\n  if (config.sans) {\n    rules.push(`  ${FONT_CSS_VARIABLES.sans}: ${config.sans};`);\n  }\n\n  if (config.mono) {\n    rules.push(`  ${FONT_CSS_VARIABLES.mono}: ${config.mono};`);\n  }\n\n  if (config.serif) {\n    rules.push(`  ${FONT_CSS_VARIABLES.serif}: ${config.serif};`);\n  }\n\n  if (config.inter) {\n    rules.push(`  ${FONT_CSS_VARIABLES.inter}: ${config.inter};`);\n  }\n\n  if (config.jetbrainsMono) {\n    rules.push(`  ${FONT_CSS_VARIABLES.jetbrainsMono}: ${config.jetbrainsMono};`);\n  }\n\n  if (config.playfairDisplay) {\n    rules.push(`  ${FONT_CSS_VARIABLES.playfairDisplay}: ${config.playfairDisplay};`);\n  }\n\n  rules.push('}');\n\n  return rules.join('\\n');\n}\n\n/**\n * Reset fonts to Kookie UI defaults\n */\nexport function resetFonts(target: HTMLElement = document.documentElement): void {\n  const style = target.style;\n\n  // Remove custom font variables to fall back to defaults\n  style.removeProperty(FONT_CSS_VARIABLES.sans);\n  style.removeProperty(FONT_CSS_VARIABLES.mono);\n  style.removeProperty(FONT_CSS_VARIABLES.serif);\n  style.removeProperty(FONT_CSS_VARIABLES.inter);\n  style.removeProperty(FONT_CSS_VARIABLES.jetbrainsMono);\n  style.removeProperty(FONT_CSS_VARIABLES.playfairDisplay);\n}\n\n/**\n * Get current font configuration from CSS variables\n */\nexport function getCurrentFontConfig(target: HTMLElement = document.documentElement): FontConfig {\n  const computedStyle = getComputedStyle(target);\n\n  return {\n    sans: computedStyle.getPropertyValue(FONT_CSS_VARIABLES.sans).trim() || undefined,\n    mono: computedStyle.getPropertyValue(FONT_CSS_VARIABLES.mono).trim() || undefined,\n    serif: computedStyle.getPropertyValue(FONT_CSS_VARIABLES.serif).trim() || undefined,\n    inter: computedStyle.getPropertyValue(FONT_CSS_VARIABLES.inter).trim() || undefined,\n    jetbrainsMono: computedStyle.getPropertyValue(FONT_CSS_VARIABLES.jetbrainsMono).trim() || undefined,\n    playfairDisplay: computedStyle.getPropertyValue(FONT_CSS_VARIABLES.playfairDisplay).trim() || undefined,\n  };\n}\n"],
+  "mappings": "AA4BO,MAAMA,EAAqB,CAChC,KAAM,cACN,KAAM,cACN,MAAO,eACP,MAAO,eACP,cAAe,wBACf,gBAAiB,0BACjB,cAAe,wBACf,cAAe,wBACf,aAAc,uBACd,WAAY,oBACd,EAKaC,EAAc,CAEzB,MAAO,6EACP,OAAQ,6FACR,QAAS,oEACT,SAAU,sEAGV,cAAe,0EACf,SAAU,0EACV,cAAe,6DACf,WAAY,8EAGZ,SAAU,8EACV,MAAO,0DACP,QAAS,+CACT,KAAM,2CACR,EAuBO,SAASC,EAAgBC,EAAoBC,EAAsB,SAAS,gBAAuB,CACxG,MAAMC,EAAQD,EAAO,MAEjBD,EAAO,MACTE,EAAM,YAAYL,EAAmB,KAAMG,EAAO,IAAI,EAGpDA,EAAO,MACTE,EAAM,YAAYL,EAAmB,KAAMG,EAAO,IAAI,EAGpDA,EAAO,OACTE,EAAM,YAAYL,EAAmB,MAAOG,EAAO,KAAK,EAGtDA,EAAO,OACTE,EAAM,YAAYL,EAAmB,MAAOG,EAAO,KAAK,EAGtDA,EAAO,eACTE,EAAM,YAAYL,EAAmB,cAAeG,EAAO,aAAa,EAGtEA,EAAO,iBACTE,EAAM,YAAYL,EAAmB,gBAAiBG,EAAO,eAAe,CAEhF,CAqBO,SAASG,EAAgBH,EAA4B,CAC1D,MAAMI,EAAkB,CAAC,SAAS,EAElC,OAAIJ,EAAO,MACTI,EAAM,KAAK,KAAKP,EAAmB,IAAI,KAAKG,EAAO,IAAI,GAAG,EAGxDA,EAAO,MACTI,EAAM,KAAK,KAAKP,EAAmB,IAAI,KAAKG,EAAO,IAAI,GAAG,EAGxDA,EAAO,OACTI,EAAM,KAAK,KAAKP,EAAmB,KAAK,KAAKG,EAAO,KAAK,GAAG,EAG1DA,EAAO,OACTI,EAAM,KAAK,KAAKP,EAAmB,KAAK,KAAKG,EAAO,KAAK,GAAG,EAG1DA,EAAO,eACTI,EAAM,KAAK,KAAKP,EAAmB,aAAa,KAAKG,EAAO,aAAa,GAAG,EAG1EA,EAAO,iBACTI,EAAM,KAAK,KAAKP,EAAmB,eAAe,KAAKG,EAAO,eAAe,GAAG,EAGlFI,EAAM,KAAK,GAAG,EAEPA,EAAM,KAAK;AAAA,CAAI,CACxB,CAKO,SAASC,EAAWJ,EAAsB,SAAS,gBAAuB,CAC/E,MAAMC,EAAQD,EAAO,MAGrBC,EAAM,eAAeL,EAAmB,IAAI,EAC5CK,EAAM,eAAeL,EAAmB,IAAI,EAC5CK,EAAM,eAAeL,EAAmB,KAAK,EAC7CK,EAAM,eAAeL,EAAmB,KAAK,EAC7CK,EAAM,eAAeL,EAAmB,aAAa,EACrDK,EAAM,eAAeL,EAAmB,eAAe,CACzD,CAKO,SAASS,EAAqBL,EAAsB,SAAS,gBAA6B,CAC/F,MAAMM,EAAgB,iBAAiBN,CAAM,EAE7C,MAAO,CACL,KAAMM,EAAc,iBAAiBV,EAAmB,IAAI,EAAE,KAAK,GAAK,OACxE,KAAMU,EAAc,iBAAiBV,EAAmB,IAAI,EAAE,KAAK,GAAK,OACxE,MAAOU,EAAc,iBAAiBV,EAAmB,KAAK,EAAE,KAAK,GAAK,OAC1E,MAAOU,EAAc,iBAAiBV,EAAmB,KAAK,EAAE,KAAK,GAAK,OAC1E,cAAeU,EAAc,iBAAiBV,EAAmB,aAAa,EAAE,KAAK,GAAK,OAC1F,gBAAiBU,EAAc,iBAAiBV,EAAmB,eAAe,EAAE,KAAK,GAAK,MAChG,CACF",
   "names": ["FONT_CSS_VARIABLES", "FONT_STACKS", "applyFontConfig", "config", "target", "style", "generateFontCSS", "rules", "resetFonts", "getCurrentFontConfig", "computedStyle"]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kushagradhawan/kookie-ui",
-  "version": "0.1.55",
+  "version": "0.1.57",
   "description": "A modern React component library with beautiful design tokens, flexible theming, and comprehensive docs",
   "keywords": [
     "react",

package/schemas/base-button.json

@@ -279,6 +279,6 @@
   "title": "Base-button Component Props",
   "description": "Props schema for the base-button component in Kookie UI",
   "version": "1.0.0",
-  "generatedAt": "2025-09-29T10:27:20.201Z",
+  "generatedAt": "2025-10-08T07:00:40.002Z",
   "source": "Zod schema"
 }

package/schemas/button.json

@@ -530,6 +530,6 @@
   "title": "Button Component Props",
   "description": "Props schema for the button component in Kookie UI",
   "version": "1.0.0",
-  "generatedAt": "2025-09-29T10:27:20.206Z",
+  "generatedAt": "2025-10-08T07:00:40.007Z",
   "source": "Zod schema"
 }

package/schemas/icon-button.json

@@ -313,6 +313,6 @@
   "title": "Icon-button Component Props",
   "description": "Props schema for the icon-button component in Kookie UI",
   "version": "1.0.0",
-  "generatedAt": "2025-09-29T10:27:20.207Z",
+  "generatedAt": "2025-10-08T07:00:40.009Z",
   "source": "Zod schema"
 }

package/schemas/index.json

@@ -3,7 +3,7 @@
   "title": "Kookie UI Button Components",
   "description": "Complete JSON Schema collection for all button components in Kookie UI",
   "version": "1.0.0",
-  "generatedAt": "2025-09-29T10:27:20.210Z",
+  "generatedAt": "2025-10-08T07:00:40.012Z",
   "source": "Zod schemas",
   "components": {
     "base-button": {
@@ -287,7 +287,7 @@
       "title": "Base-button Component Props",
       "description": "Props schema for the base-button component in Kookie UI",
       "version": "1.0.0",
-      "generatedAt": "2025-09-29T10:27:20.201Z",
+      "generatedAt": "2025-10-08T07:00:40.002Z",
       "source": "Zod schema"
     },
     "button": {
@@ -822,7 +822,7 @@
       "title": "Button Component Props",
       "description": "Props schema for the button component in Kookie UI",
       "version": "1.0.0",
-      "generatedAt": "2025-09-29T10:27:20.206Z",
+      "generatedAt": "2025-10-08T07:00:40.007Z",
       "source": "Zod schema"
     },
     "icon-button": {
@@ -1140,7 +1140,7 @@
       "title": "Icon-button Component Props",
       "description": "Props schema for the icon-button component in Kookie UI",
       "version": "1.0.0",
-      "generatedAt": "2025-09-29T10:27:20.207Z",
+      "generatedAt": "2025-10-08T07:00:40.009Z",
       "source": "Zod schema"
     },
     "toggle-button": {
@@ -1683,7 +1683,7 @@
       "title": "Toggle-button Component Props",
       "description": "Props schema for the toggle-button component in Kookie UI",
       "version": "1.0.0",
-      "generatedAt": "2025-09-29T10:27:20.209Z",
+      "generatedAt": "2025-10-08T07:00:40.011Z",
       "source": "Zod schema"
     },
     "toggle-icon-button": {
@@ -2009,7 +2009,7 @@
       "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-29T10:27:20.210Z",
+      "generatedAt": "2025-10-08T07:00:40.012Z",
       "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-29T10:27:20.209Z",
+  "generatedAt": "2025-10-08T07:00:40.011Z",
   "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-29T10:27:20.210Z",
+  "generatedAt": "2025-10-08T07:00:40.012Z",
   "source": "Zod schema"
 }

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

@@ -159,7 +159,7 @@
   padding-inline-start: var(--space-3);
   padding-top: calc(var(--space-1) * 0.75);
   padding-bottom: calc(var(--space-1) * 0.75);
-  min-height: var(--space-5); /* 20px */
+  min-height: var(--space-6); /* bumped from space-5 */
   font-size: var(--font-size-1);
 }
 
@@ -167,10 +167,18 @@
   padding-inline-start: var(--space-3);
   padding-top: var(--space-1);
   padding-bottom: var(--space-1);
-  min-height: var(--space-6); /* 32px */
+  min-height: var(--space-7); /* bumped from space-6 */
   font-size: var(--font-size-2);
 }
 
+:where(.rt-SidebarContent.rt-r-size-3) :where(.rt-SidebarMenuSubList) .rt-SidebarMenuButton {
+  padding-inline-start: var(--space-3);
+  padding-top: var(--space-2);
+  padding-bottom: var(--space-2);
+  min-height: var(--space-8);
+  font-size: var(--font-size-3);
+}
+
 .rt-SidebarGroupLabel {
   /* Inherit all BaseMenuLabel styles */
   display: flex;
@@ -220,6 +228,13 @@
 
 /* Add balanced spacing for sidebar menu items while preserving base menu border radius */
 .rt-SidebarContent :where(.rt-BaseMenuItem) {
-  margin-top: calc(var(--space-1) / 4);
-  margin-bottom: calc(var(--space-1) / 4);
+  margin-top: 1px;
+  margin-bottom: 1px;
+}
+
+/* Add same balanced spacing for submenu items */
+/* stylelint-disable-next-line selector-max-specificity */
+.rt-SidebarContent :where(.rt-SidebarMenuSubList) .rt-SidebarMenuButton {
+  margin-top: 1px;
+  margin-bottom: 1px;
 }

package/src/components/separator.css

@@ -1,6 +1,6 @@
 .rt-Separator {
   display: block;
-  background-color: var(--accent-a6);
+  background-color: var(--accent-a5);
 }
 
 /***************************************************************************************************

package/src/components/sidebar.css

@@ -510,11 +510,15 @@
   .rt-SidebarContainer {
     &:where(.rt-r-size-1) {
       --sidebar-base-padding: var(--space-3);
-      --sidebar-item-height: var(--space-5);
+      --sidebar-item-height: var(--space-6);
     }
     &:where(.rt-r-size-2) {
       --sidebar-base-padding: var(--space-4);
-      --sidebar-item-height: var(--space-6);
+      --sidebar-item-height: var(--space-7);
+    }
+    &:where(.rt-r-size-3) {
+      --sidebar-base-padding: var(--space-4);
+      --sidebar-item-height: var(--space-8);
     }
   }
 
@@ -525,6 +529,7 @@
       --sidebar-item-padding-left: var(--base-menu-item-padding-left);
       --sidebar-item-padding-right: var(--base-menu-item-padding-right);
       --sidebar-item-padding-y: var(--base-menu-item-padding-y);
+      --base-menu-item-height: var(--space-6);
       --sidebar-item-height: var(--base-menu-item-height);
     }
     &:where(.rt-r-size-2) {
@@ -532,6 +537,15 @@
       --sidebar-item-padding-left: var(--base-menu-item-padding-left);
       --sidebar-item-padding-right: var(--base-menu-item-padding-right);
       --sidebar-item-padding-y: var(--base-menu-item-padding-y);
+      --base-menu-item-height: var(--space-7);
+      --sidebar-item-height: var(--base-menu-item-height);
+    }
+    &:where(.rt-r-size-3) {
+      --sidebar-content-padding: var(--base-menu-content-padding);
+      --sidebar-item-padding-left: var(--base-menu-item-padding-left);
+      --sidebar-item-padding-right: var(--base-menu-item-padding-right);
+      --sidebar-item-padding-y: var(--base-menu-item-padding-y);
+      --base-menu-item-height: var(--space-8);
       --sidebar-item-height: var(--base-menu-item-height);
     }
   }
@@ -548,8 +562,8 @@
 
       /* stylelint-disable-next-line selector-max-type */
       & :where(svg) {
-        width: var(--content-icon-size-1);
-        height: var(--content-icon-size-1);
+        width: var(--content-icon-size-2);
+        height: var(--content-icon-size-2);
         flex-shrink: 0;
       }
     }
@@ -574,11 +588,23 @@
 
       /* stylelint-disable-next-line selector-max-type */
       & :where(svg) {
-        width: var(--content-icon-size-2);
-        height: var(--content-icon-size-2);
+        width: var(--content-icon-size-3);
+        height: var(--content-icon-size-3);
         flex-shrink: 0;
       }
     }
+    /* stylelint-disable-next-line selector-max-specificity */
+    .rt-SidebarContent:where(.rt-r-size-3) {
+      /* stylelint-disable-next-line selector-max-specificity */
+      & :where(.rt-SidebarMenuButton) {
+        /* stylelint-disable-next-line selector-max-type, selector-max-specificity */
+        & :where(svg) {
+          width: var(--content-icon-size-3);
+          height: var(--content-icon-size-3);
+          flex-shrink: 0;
+        }
+      }
+    }
 
     /* Sub-trigger icon sizing - matches base menu exactly */
     & :where(.rt-BaseMenuSubTriggerIcon) {

package/src/components/theme.props.tsx

@@ -8,7 +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 fontFamilies = ['sans', 'mono', 'serif'] as const;
 
 const themePropDefs = {
   ...asChildPropDef,

package/src/helpers/font-config.ts

@@ -13,10 +13,14 @@ export interface FontConfig {
   sans?: string;
   /** Monospace font stack for fontFamily="mono" */
   mono?: string;
+  /** Serif font stack for fontFamily="serif" */
+  serif?: string;
   /** Base Inter font replacement */
   inter?: string;
   /** Base JetBrains Mono font replacement */
   jetbrainsMono?: string;
+  /** Base Playfair Display font replacement */
+  playfairDisplay?: string;
 }
 
 /**
@@ -25,8 +29,10 @@ export interface FontConfig {
 export const FONT_CSS_VARIABLES = {
   sans: '--font-sans',
   mono: '--font-mono',
+  serif: '--font-serif',
   inter: '--font-inter',
   jetbrainsMono: '--font-jetbrains-mono',
+  playfairDisplay: '--font-playfair-display',
   defaultFamily: '--default-font-family',
   headingFamily: '--heading-font-family',
   strongFamily: '--strong-font-family',
@@ -39,8 +45,7 @@ export const FONT_CSS_VARIABLES = {
 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",
+  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",
 
@@ -49,6 +54,12 @@ export const FONT_STACKS = {
   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",
+
+  // Serif options
+  playfair: "'Playfair Display', 'Times New Roman', 'Times', 'Georgia', 'Cambria', serif",
+  times: "'Times New Roman', 'Times', 'Georgia', 'Cambria', serif",
+  georgia: "'Georgia', 'Times New Roman', 'Times', serif",
+  lora: "'Lora', 'Times New Roman', 'Times', serif",
 } as const;
 
 /**
@@ -72,10 +83,7 @@ export const FONT_STACKS = {
  * });
  * ```
  */
-export function applyFontConfig(
-  config: FontConfig,
-  target: HTMLElement = document.documentElement,
-): void {
+export function applyFontConfig(config: FontConfig, target: HTMLElement = document.documentElement): void {
   const style = target.style;
 
   if (config.sans) {
@@ -86,6 +94,10 @@ export function applyFontConfig(
     style.setProperty(FONT_CSS_VARIABLES.mono, config.mono);
   }
 
+  if (config.serif) {
+    style.setProperty(FONT_CSS_VARIABLES.serif, config.serif);
+  }
+
   if (config.inter) {
     style.setProperty(FONT_CSS_VARIABLES.inter, config.inter);
   }
@@ -93,6 +105,10 @@ export function applyFontConfig(
   if (config.jetbrainsMono) {
     style.setProperty(FONT_CSS_VARIABLES.jetbrainsMono, config.jetbrainsMono);
   }
+
+  if (config.playfairDisplay) {
+    style.setProperty(FONT_CSS_VARIABLES.playfairDisplay, config.playfairDisplay);
+  }
 }
 
 /**
@@ -125,6 +141,10 @@ export function generateFontCSS(config: FontConfig): string {
     rules.push(`  ${FONT_CSS_VARIABLES.mono}: ${config.mono};`);
   }
 
+  if (config.serif) {
+    rules.push(`  ${FONT_CSS_VARIABLES.serif}: ${config.serif};`);
+  }
+
   if (config.inter) {
     rules.push(`  ${FONT_CSS_VARIABLES.inter}: ${config.inter};`);
   }
@@ -133,6 +153,10 @@ export function generateFontCSS(config: FontConfig): string {
     rules.push(`  ${FONT_CSS_VARIABLES.jetbrainsMono}: ${config.jetbrainsMono};`);
   }
 
+  if (config.playfairDisplay) {
+    rules.push(`  ${FONT_CSS_VARIABLES.playfairDisplay}: ${config.playfairDisplay};`);
+  }
+
   rules.push('}');
 
   return rules.join('\n');
@@ -147,8 +171,10 @@ export function resetFonts(target: HTMLElement = document.documentElement): void
   // 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.serif);
   style.removeProperty(FONT_CSS_VARIABLES.inter);
   style.removeProperty(FONT_CSS_VARIABLES.jetbrainsMono);
+  style.removeProperty(FONT_CSS_VARIABLES.playfairDisplay);
 }
 
 /**
@@ -160,8 +186,9 @@ export function getCurrentFontConfig(target: HTMLElement = document.documentElem
   return {
     sans: computedStyle.getPropertyValue(FONT_CSS_VARIABLES.sans).trim() || undefined,
     mono: computedStyle.getPropertyValue(FONT_CSS_VARIABLES.mono).trim() || undefined,
+    serif: computedStyle.getPropertyValue(FONT_CSS_VARIABLES.serif).trim() || undefined,
     inter: computedStyle.getPropertyValue(FONT_CSS_VARIABLES.inter).trim() || undefined,
-    jetbrainsMono:
-      computedStyle.getPropertyValue(FONT_CSS_VARIABLES.jetbrainsMono).trim() || undefined,
+    jetbrainsMono: computedStyle.getPropertyValue(FONT_CSS_VARIABLES.jetbrainsMono).trim() || undefined,
+    playfairDisplay: computedStyle.getPropertyValue(FONT_CSS_VARIABLES.playfairDisplay).trim() || undefined,
   };
 }

package/src/styles/fonts.css

@@ -1,23 +1,19 @@
-/* Inter and JetBrains Mono from Google Fonts */
+/* Inter, JetBrains Mono, and Playfair Display from Google Fonts */
 @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');
+@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
 
 /* Font Variables - Customize these to change fonts throughout your app */
 :root {
-  /* 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;
+  /* Base font definitions - these are the actual font stacks */
+  --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;
+  --font-playfair-display: 'Playfair Display', 'Times New Roman', 'Times', 'Georgia', 'Cambria', serif;
 
-  /* 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 */
+  /* Theme font family overrides - change these to customize fonts globally */
+  --font-sans: var(--font-inter); /* Override this for custom sans-serif */
+  --font-mono: var(--font-jetbrains-mono); /* Override this for custom monospace */
+  --font-serif: var(--font-playfair-display); /* Override this for custom serif */
 
   /* Force proper font weight rendering */
   font-synthesis: none; /* Prevent browser from synthesizing weights */
@@ -26,7 +22,7 @@
 /* Radix Themes font weight enforcement */
 .radix-themes {
   font-synthesis: none;
-  font-family: var(--font-inter);
+  font-family: var(--default-font-family);
 }
 
 /* System font fallback for critical loading scenarios */

package/src/styles/tokens/typography.css

@@ -44,16 +44,15 @@
   /* 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',
+    var(--font-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';
 
   /* 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',
+    var(--font-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-family-serif: var(--font-serif);
   --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);
@@ -84,9 +83,7 @@
 
   /* 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-mono, var(--font-jetbrains-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;
@@ -327,3 +324,16 @@
   --heading-font-family: var(--default-font-family-mono);
   --strong-font-family: var(--default-font-family-mono);
 }
+
+[data-font-family='serif'] {
+  /* Map serif directly to --font-serif to avoid resolution issues */
+  --default-font-family: var(--font-serif);
+  --heading-font-family: var(--font-serif);
+  --strong-font-family: var(--font-serif);
+}
+
+/* Ensure serif font takes precedence over .radix-themes */
+/* stylelint-disable-next-line selector-max-specificity */
+.radix-themes[data-font-family='serif'] {
+  font-family: var(--font-serif) !important;
+}