@bergetai/ui 0.16.0 → 0.16.1

package/dist/components/theme-provider/ThemeToggle.cjs

@@ -17,10 +17,16 @@ const ThemeToggle = react.forwardRef(({ className, label = "Toggle theme", size
 		onClick: toggle,
 		"aria-label": label,
 		title: `Toggle ${resolvedTheme === "dark" ? "light" : "dark"} mode`,
-		className: require_utils.cn("relative inline-flex items-center justify-center rounded-full cursor-pointer", "transition-colors duration-200", "hover:bg-berget-surface-hover", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-berget-ring", size === "sm" && "w-7 h-7", size === "md" && "w-9 h-9", size === "lg" && "w-11 h-11", className),
+		className: require_utils.cn(`
+            relative inline-flex cursor-pointer items-center justify-center
+            rounded-full
+          `, "transition-colors duration-200", "hover:bg-berget-surface-hover", `
+            focus-visible:ring-2 focus-visible:ring-berget-ring
+            focus-visible:outline-none
+          `, size === "sm" && "size-7", size === "md" && "size-9", size === "lg" && "size-11", className),
 		...props,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
-			className: require_utils.cn("absolute transition-all duration-200", resolvedTheme === "dark" ? "opacity-100 scale-100 rotate-0" : "opacity-0 scale-0 -rotate-90", size === "sm" && "w-3.5 h-3.5", size === "md" && "w-4 h-4", size === "lg" && "w-5 h-5"),
+			className: require_utils.cn("absolute transition-all duration-200", resolvedTheme === "dark" ? "scale-100 rotate-0 opacity-100" : "scale-0 -rotate-90 opacity-0", size === "sm" && "size-3.5", size === "md" && "size-4", size === "lg" && "size-5"),
 			xmlns: "http://www.w3.org/2000/svg",
 			fill: "none",
 			viewBox: "0 0 24 24",
@@ -35,7 +41,7 @@ const ThemeToggle = react.forwardRef(({ className, label = "Toggle theme", size
 				d: "M12 2v2m0 16v2m9-10h-2M5 12H3m15.36 6.36-1.41-1.41M6.05 6.05 4.64 4.64m12.72 0-1.41 1.41M6.05 17.95l-1.41 1.41"
 			})]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-			className: require_utils.cn("absolute transition-all duration-200", resolvedTheme === "light" ? "opacity-100 scale-100 rotate-0" : "opacity-0 scale-0 rotate-90", size === "sm" && "w-3.5 h-3.5", size === "md" && "w-4 h-4", size === "lg" && "w-5 h-5"),
+			className: require_utils.cn("absolute transition-all duration-200", resolvedTheme === "light" ? "scale-100 rotate-0 opacity-100" : "scale-0 rotate-90 opacity-0", size === "sm" && "size-3.5", size === "md" && "size-4", size === "lg" && "size-5"),
 			xmlns: "http://www.w3.org/2000/svg",
 			fill: "none",
 			viewBox: "0 0 24 24",

package/dist/components/theme-provider/ThemeToggle.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeToggle.cjs","names":["React","useTheme","cn"],"sources":["../../../src/components/theme-provider/ThemeToggle.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useTheme } from './ThemeProvider';\nimport { cn } from '../../lib/utils';\n\nexport interface ThemeToggleProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Accessible label for the toggle button */\n  label?: string;\n  /** Force a specific size class */\n  size?: 'sm' | 'md' | 'lg';\n}\n\nconst ThemeToggle = React.forwardRef<HTMLButtonElement, ThemeToggleProps>(\n  ({ className, label = 'Toggle theme', size = 'md', ...props }, ref) => {\n    const { theme, resolvedTheme, setTheme } = useTheme();\n\n    const toggle = React.useCallback(() => {\n      setTheme(theme === 'dark' ? 'light' : 'dark');\n    }, [theme, setTheme]);\n\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        onClick={toggle}\n        aria-label={label}\n        title={`Toggle ${resolvedTheme === 'dark' ? 'light' : 'dark'} mode`}\n        className={cn(\n          'relative inline-flex items-center justify-center rounded-full cursor-pointer',\n          'transition-colors duration-200',\n          'hover:bg-berget-surface-hover',\n          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-berget-ring',\n          size === 'sm' && 'w-7 h-7',\n          size === 'md' && 'w-9 h-9',\n          size === 'lg' && 'w-11 h-11',\n          className,\n        )}\n        {...props}\n      >\n        {/* Sun */}\n        <svg\n          className={cn(\n            'absolute transition-all duration-200',\n            resolvedTheme === 'dark'\n              ? 'opacity-100 scale-100 rotate-0'\n              : 'opacity-0 scale-0 -rotate-90',\n            size === 'sm' && 'w-3.5 h-3.5',\n            size === 'md' && 'w-4 h-4',\n            size === 'lg' && 'w-5 h-5',\n          )}\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n          strokeWidth={2}\n        >\n          <circle cx=\"12\" cy=\"12\" r=\"4\" />\n          <path\n            strokeLinecap=\"round\"\n            d=\"M12 2v2m0 16v2m9-10h-2M5 12H3m15.36 6.36-1.41-1.41M6.05 6.05 4.64 4.64m12.72 0-1.41 1.41M6.05 17.95l-1.41 1.41\"\n          />\n        </svg>\n\n        {/* Moon */}\n        <svg\n          className={cn(\n            'absolute transition-all duration-200',\n            resolvedTheme === 'light'\n              ? 'opacity-100 scale-100 rotate-0'\n              : 'opacity-0 scale-0 rotate-90',\n            size === 'sm' && 'w-3.5 h-3.5',\n            size === 'md' && 'w-4 h-4',\n            size === 'lg' && 'w-5 h-5',\n          )}\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n          strokeWidth={2}\n        >\n          <path\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            d=\"M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z\"\n          />\n        </svg>\n      </button>\n    );\n  },\n);\n\nThemeToggle.displayName = 'ThemeToggle';\n\nexport { ThemeToggle };\n"],"mappings":";;;;;;;;AAaA,MAAM,cAAcA,MAAM,YACvB,EAAE,WAAW,QAAQ,gBAAgB,OAAO,MAAM,GAAG,SAAS,QAAQ;CACrE,MAAM,EAAE,OAAO,eAAe,aAAaC,sBAAAA,SAAS;CAEpD,MAAM,SAASD,MAAM,kBAAkB;EACrC,SAAS,UAAU,SAAS,UAAU,MAAM;CAC9C,GAAG,CAAC,OAAO,QAAQ,CAAC;CAEpB,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,UAAD;EACO;EACL,MAAK;EACL,SAAS;EACT,cAAY;EACZ,OAAO,UAAU,kBAAkB,SAAS,UAAU,OAAO;EAC7D,WAAWE,cAAAA,GACT,gFACA,kCACA,iCACA,kFACA,SAAS,QAAQ,WACjB,SAAS,QAAQ,WACjB,SAAS,QAAQ,aACjB,SACF;EACA,GAAI;EAhBN,UAAA,CAmBE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;GACE,WAAWA,cAAAA,GACT,wCACA,kBAAkB,SACd,mCACA,gCACJ,SAAS,QAAQ,eACjB,SAAS,QAAQ,WACjB,SAAS,QAAQ,SACnB;GACA,OAAM;GACN,MAAK;GACL,SAAQ;GACR,QAAO;GACP,aAAa;GAdf,UAAA,CAgBE,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;IAAQ,IAAG;IAAK,IAAG;IAAK,GAAE;GAAK,CAAA,GAC/B,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IACE,eAAc;IACd,GAAE;GACH,CAAA,CACE;EAGL,CAAA,GAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GACE,WAAWA,cAAAA,GACT,wCACA,kBAAkB,UACd,mCACA,+BACJ,SAAS,QAAQ,eACjB,SAAS,QAAQ,WACjB,SAAS,QAAQ,SACnB;GACA,OAAM;GACN,MAAK;GACL,SAAQ;GACR,QAAO;GACP,aAAa;GAEb,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IACE,eAAc;IACd,gBAAe;IACf,GAAE;GACH,CAAA;EACE,CAAA,CACC;;AAEZ,CACF;AAEA,YAAY,cAAc"}
+{"version":3,"file":"ThemeToggle.cjs","names":["React","useTheme","cn"],"sources":["../../../src/components/theme-provider/ThemeToggle.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useTheme } from './ThemeProvider';\nimport { cn } from '../../lib/utils';\n\nexport interface ThemeToggleProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Accessible label for the toggle button */\n  label?: string;\n  /** Force a specific size class */\n  size?: 'sm' | 'md' | 'lg';\n}\n\nconst ThemeToggle = React.forwardRef<HTMLButtonElement, ThemeToggleProps>(\n  ({ className, label = 'Toggle theme', size = 'md', ...props }, ref) => {\n    const { theme, resolvedTheme, setTheme } = useTheme();\n\n    const toggle = React.useCallback(() => {\n      setTheme(theme === 'dark' ? 'light' : 'dark');\n    }, [theme, setTheme]);\n\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        onClick={toggle}\n        aria-label={label}\n        title={`Toggle ${resolvedTheme === 'dark' ? 'light' : 'dark'} mode`}\n        className={cn(\n          `\n            relative inline-flex cursor-pointer items-center justify-center\n            rounded-full\n          `,\n          'transition-colors duration-200',\n          'hover:bg-berget-surface-hover',\n          `\n            focus-visible:ring-2 focus-visible:ring-berget-ring\n            focus-visible:outline-none\n          `,\n          size === 'sm' && 'size-7',\n          size === 'md' && 'size-9',\n          size === 'lg' && 'size-11',\n          className,\n        )}\n        {...props}\n      >\n        {/* Sun */}\n        <svg\n          className={cn(\n            'absolute transition-all duration-200',\n            resolvedTheme === 'dark'\n              ? 'scale-100 rotate-0 opacity-100'\n              : 'scale-0 -rotate-90 opacity-0',\n            size === 'sm' && 'size-3.5',\n            size === 'md' && 'size-4',\n            size === 'lg' && 'size-5',\n          )}\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n          strokeWidth={2}\n        >\n          <circle cx=\"12\" cy=\"12\" r=\"4\" />\n          <path\n            strokeLinecap=\"round\"\n            d=\"M12 2v2m0 16v2m9-10h-2M5 12H3m15.36 6.36-1.41-1.41M6.05 6.05 4.64 4.64m12.72 0-1.41 1.41M6.05 17.95l-1.41 1.41\"\n          />\n        </svg>\n\n        {/* Moon */}\n        <svg\n          className={cn(\n            'absolute transition-all duration-200',\n            resolvedTheme === 'light'\n              ? 'scale-100 rotate-0 opacity-100'\n              : 'scale-0 rotate-90 opacity-0',\n            size === 'sm' && 'size-3.5',\n            size === 'md' && 'size-4',\n            size === 'lg' && 'size-5',\n          )}\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n          strokeWidth={2}\n        >\n          <path\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            d=\"M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z\"\n          />\n        </svg>\n      </button>\n    );\n  },\n);\n\nThemeToggle.displayName = 'ThemeToggle';\n\nexport { ThemeToggle };\n"],"mappings":";;;;;;;;AAaA,MAAM,cAAcA,MAAM,YACvB,EAAE,WAAW,QAAQ,gBAAgB,OAAO,MAAM,GAAG,SAAS,QAAQ;CACrE,MAAM,EAAE,OAAO,eAAe,aAAaC,sBAAAA,SAAS;CAEpD,MAAM,SAASD,MAAM,kBAAkB;EACrC,SAAS,UAAU,SAAS,UAAU,MAAM;CAC9C,GAAG,CAAC,OAAO,QAAQ,CAAC;CAEpB,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,UAAD;EACO;EACL,MAAK;EACL,SAAS;EACT,cAAY;EACZ,OAAO,UAAU,kBAAkB,SAAS,UAAU,OAAO;EAC7D,WAAWE,cAAAA,GACT;;;aAIA,kCACA,iCACA;;;aAIA,SAAS,QAAQ,UACjB,SAAS,QAAQ,UACjB,SAAS,QAAQ,WACjB,SACF;EACA,GAAI;EAtBN,UAAA,CAyBE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;GACE,WAAWA,cAAAA,GACT,wCACA,kBAAkB,SACd,mCACA,gCACJ,SAAS,QAAQ,YACjB,SAAS,QAAQ,UACjB,SAAS,QAAQ,QACnB;GACA,OAAM;GACN,MAAK;GACL,SAAQ;GACR,QAAO;GACP,aAAa;GAdf,UAAA,CAgBE,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;IAAQ,IAAG;IAAK,IAAG;IAAK,GAAE;GAAK,CAAA,GAC/B,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IACE,eAAc;IACd,GAAE;GACH,CAAA,CACE;EAGL,CAAA,GAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GACE,WAAWA,cAAAA,GACT,wCACA,kBAAkB,UACd,mCACA,+BACJ,SAAS,QAAQ,YACjB,SAAS,QAAQ,UACjB,SAAS,QAAQ,QACnB;GACA,OAAM;GACN,MAAK;GACL,SAAQ;GACR,QAAO;GACP,aAAa;GAEb,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IACE,eAAc;IACd,gBAAe;IACf,GAAE;GACH,CAAA;EACE,CAAA,CACC;;AAEZ,CACF;AAEA,YAAY,cAAc"}

package/dist/components/theme-provider/ThemeToggle.mjs

@@ -15,10 +15,16 @@ const ThemeToggle = React.forwardRef(({ className, label = "Toggle theme", size
 		onClick: toggle,
 		"aria-label": label,
 		title: `Toggle ${resolvedTheme === "dark" ? "light" : "dark"} mode`,
-		className: cn("relative inline-flex items-center justify-center rounded-full cursor-pointer", "transition-colors duration-200", "hover:bg-berget-surface-hover", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-berget-ring", size === "sm" && "w-7 h-7", size === "md" && "w-9 h-9", size === "lg" && "w-11 h-11", className),
+		className: cn(`
+            relative inline-flex cursor-pointer items-center justify-center
+            rounded-full
+          `, "transition-colors duration-200", "hover:bg-berget-surface-hover", `
+            focus-visible:ring-2 focus-visible:ring-berget-ring
+            focus-visible:outline-none
+          `, size === "sm" && "size-7", size === "md" && "size-9", size === "lg" && "size-11", className),
 		...props,
 		children: [/* @__PURE__ */ jsxs("svg", {
-			className: cn("absolute transition-all duration-200", resolvedTheme === "dark" ? "opacity-100 scale-100 rotate-0" : "opacity-0 scale-0 -rotate-90", size === "sm" && "w-3.5 h-3.5", size === "md" && "w-4 h-4", size === "lg" && "w-5 h-5"),
+			className: cn("absolute transition-all duration-200", resolvedTheme === "dark" ? "scale-100 rotate-0 opacity-100" : "scale-0 -rotate-90 opacity-0", size === "sm" && "size-3.5", size === "md" && "size-4", size === "lg" && "size-5"),
 			xmlns: "http://www.w3.org/2000/svg",
 			fill: "none",
 			viewBox: "0 0 24 24",
@@ -33,7 +39,7 @@ const ThemeToggle = React.forwardRef(({ className, label = "Toggle theme", size
 				d: "M12 2v2m0 16v2m9-10h-2M5 12H3m15.36 6.36-1.41-1.41M6.05 6.05 4.64 4.64m12.72 0-1.41 1.41M6.05 17.95l-1.41 1.41"
 			})]
 		}), /* @__PURE__ */ jsx("svg", {
-			className: cn("absolute transition-all duration-200", resolvedTheme === "light" ? "opacity-100 scale-100 rotate-0" : "opacity-0 scale-0 rotate-90", size === "sm" && "w-3.5 h-3.5", size === "md" && "w-4 h-4", size === "lg" && "w-5 h-5"),
+			className: cn("absolute transition-all duration-200", resolvedTheme === "light" ? "scale-100 rotate-0 opacity-100" : "scale-0 rotate-90 opacity-0", size === "sm" && "size-3.5", size === "md" && "size-4", size === "lg" && "size-5"),
 			xmlns: "http://www.w3.org/2000/svg",
 			fill: "none",
 			viewBox: "0 0 24 24",

package/dist/components/theme-provider/ThemeToggle.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeToggle.mjs","names":[],"sources":["../../../src/components/theme-provider/ThemeToggle.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useTheme } from './ThemeProvider';\nimport { cn } from '../../lib/utils';\n\nexport interface ThemeToggleProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Accessible label for the toggle button */\n  label?: string;\n  /** Force a specific size class */\n  size?: 'sm' | 'md' | 'lg';\n}\n\nconst ThemeToggle = React.forwardRef<HTMLButtonElement, ThemeToggleProps>(\n  ({ className, label = 'Toggle theme', size = 'md', ...props }, ref) => {\n    const { theme, resolvedTheme, setTheme } = useTheme();\n\n    const toggle = React.useCallback(() => {\n      setTheme(theme === 'dark' ? 'light' : 'dark');\n    }, [theme, setTheme]);\n\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        onClick={toggle}\n        aria-label={label}\n        title={`Toggle ${resolvedTheme === 'dark' ? 'light' : 'dark'} mode`}\n        className={cn(\n          'relative inline-flex items-center justify-center rounded-full cursor-pointer',\n          'transition-colors duration-200',\n          'hover:bg-berget-surface-hover',\n          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-berget-ring',\n          size === 'sm' && 'w-7 h-7',\n          size === 'md' && 'w-9 h-9',\n          size === 'lg' && 'w-11 h-11',\n          className,\n        )}\n        {...props}\n      >\n        {/* Sun */}\n        <svg\n          className={cn(\n            'absolute transition-all duration-200',\n            resolvedTheme === 'dark'\n              ? 'opacity-100 scale-100 rotate-0'\n              : 'opacity-0 scale-0 -rotate-90',\n            size === 'sm' && 'w-3.5 h-3.5',\n            size === 'md' && 'w-4 h-4',\n            size === 'lg' && 'w-5 h-5',\n          )}\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n          strokeWidth={2}\n        >\n          <circle cx=\"12\" cy=\"12\" r=\"4\" />\n          <path\n            strokeLinecap=\"round\"\n            d=\"M12 2v2m0 16v2m9-10h-2M5 12H3m15.36 6.36-1.41-1.41M6.05 6.05 4.64 4.64m12.72 0-1.41 1.41M6.05 17.95l-1.41 1.41\"\n          />\n        </svg>\n\n        {/* Moon */}\n        <svg\n          className={cn(\n            'absolute transition-all duration-200',\n            resolvedTheme === 'light'\n              ? 'opacity-100 scale-100 rotate-0'\n              : 'opacity-0 scale-0 rotate-90',\n            size === 'sm' && 'w-3.5 h-3.5',\n            size === 'md' && 'w-4 h-4',\n            size === 'lg' && 'w-5 h-5',\n          )}\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n          strokeWidth={2}\n        >\n          <path\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            d=\"M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z\"\n          />\n        </svg>\n      </button>\n    );\n  },\n);\n\nThemeToggle.displayName = 'ThemeToggle';\n\nexport { ThemeToggle };\n"],"mappings":";;;;;;AAaA,MAAM,cAAc,MAAM,YACvB,EAAE,WAAW,QAAQ,gBAAgB,OAAO,MAAM,GAAG,SAAS,QAAQ;CACrE,MAAM,EAAE,OAAO,eAAe,aAAa,SAAS;CAEpD,MAAM,SAAS,MAAM,kBAAkB;EACrC,SAAS,UAAU,SAAS,UAAU,MAAM;CAC9C,GAAG,CAAC,OAAO,QAAQ,CAAC;CAEpB,OACE,qBAAC,UAAD;EACO;EACL,MAAK;EACL,SAAS;EACT,cAAY;EACZ,OAAO,UAAU,kBAAkB,SAAS,UAAU,OAAO;EAC7D,WAAW,GACT,gFACA,kCACA,iCACA,kFACA,SAAS,QAAQ,WACjB,SAAS,QAAQ,WACjB,SAAS,QAAQ,aACjB,SACF;EACA,GAAI;EAhBN,UAAA,CAmBE,qBAAC,OAAD;GACE,WAAW,GACT,wCACA,kBAAkB,SACd,mCACA,gCACJ,SAAS,QAAQ,eACjB,SAAS,QAAQ,WACjB,SAAS,QAAQ,SACnB;GACA,OAAM;GACN,MAAK;GACL,SAAQ;GACR,QAAO;GACP,aAAa;GAdf,UAAA,CAgBE,oBAAC,UAAD;IAAQ,IAAG;IAAK,IAAG;IAAK,GAAE;GAAK,CAAA,GAC/B,oBAAC,QAAD;IACE,eAAc;IACd,GAAE;GACH,CAAA,CACE;EAGL,CAAA,GAAA,oBAAC,OAAD;GACE,WAAW,GACT,wCACA,kBAAkB,UACd,mCACA,+BACJ,SAAS,QAAQ,eACjB,SAAS,QAAQ,WACjB,SAAS,QAAQ,SACnB;GACA,OAAM;GACN,MAAK;GACL,SAAQ;GACR,QAAO;GACP,aAAa;GAEb,UAAA,oBAAC,QAAD;IACE,eAAc;IACd,gBAAe;IACf,GAAE;GACH,CAAA;EACE,CAAA,CACC;;AAEZ,CACF;AAEA,YAAY,cAAc"}
+{"version":3,"file":"ThemeToggle.mjs","names":[],"sources":["../../../src/components/theme-provider/ThemeToggle.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useTheme } from './ThemeProvider';\nimport { cn } from '../../lib/utils';\n\nexport interface ThemeToggleProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Accessible label for the toggle button */\n  label?: string;\n  /** Force a specific size class */\n  size?: 'sm' | 'md' | 'lg';\n}\n\nconst ThemeToggle = React.forwardRef<HTMLButtonElement, ThemeToggleProps>(\n  ({ className, label = 'Toggle theme', size = 'md', ...props }, ref) => {\n    const { theme, resolvedTheme, setTheme } = useTheme();\n\n    const toggle = React.useCallback(() => {\n      setTheme(theme === 'dark' ? 'light' : 'dark');\n    }, [theme, setTheme]);\n\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        onClick={toggle}\n        aria-label={label}\n        title={`Toggle ${resolvedTheme === 'dark' ? 'light' : 'dark'} mode`}\n        className={cn(\n          `\n            relative inline-flex cursor-pointer items-center justify-center\n            rounded-full\n          `,\n          'transition-colors duration-200',\n          'hover:bg-berget-surface-hover',\n          `\n            focus-visible:ring-2 focus-visible:ring-berget-ring\n            focus-visible:outline-none\n          `,\n          size === 'sm' && 'size-7',\n          size === 'md' && 'size-9',\n          size === 'lg' && 'size-11',\n          className,\n        )}\n        {...props}\n      >\n        {/* Sun */}\n        <svg\n          className={cn(\n            'absolute transition-all duration-200',\n            resolvedTheme === 'dark'\n              ? 'scale-100 rotate-0 opacity-100'\n              : 'scale-0 -rotate-90 opacity-0',\n            size === 'sm' && 'size-3.5',\n            size === 'md' && 'size-4',\n            size === 'lg' && 'size-5',\n          )}\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n          strokeWidth={2}\n        >\n          <circle cx=\"12\" cy=\"12\" r=\"4\" />\n          <path\n            strokeLinecap=\"round\"\n            d=\"M12 2v2m0 16v2m9-10h-2M5 12H3m15.36 6.36-1.41-1.41M6.05 6.05 4.64 4.64m12.72 0-1.41 1.41M6.05 17.95l-1.41 1.41\"\n          />\n        </svg>\n\n        {/* Moon */}\n        <svg\n          className={cn(\n            'absolute transition-all duration-200',\n            resolvedTheme === 'light'\n              ? 'scale-100 rotate-0 opacity-100'\n              : 'scale-0 rotate-90 opacity-0',\n            size === 'sm' && 'size-3.5',\n            size === 'md' && 'size-4',\n            size === 'lg' && 'size-5',\n          )}\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n          strokeWidth={2}\n        >\n          <path\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            d=\"M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z\"\n          />\n        </svg>\n      </button>\n    );\n  },\n);\n\nThemeToggle.displayName = 'ThemeToggle';\n\nexport { ThemeToggle };\n"],"mappings":";;;;;;AAaA,MAAM,cAAc,MAAM,YACvB,EAAE,WAAW,QAAQ,gBAAgB,OAAO,MAAM,GAAG,SAAS,QAAQ;CACrE,MAAM,EAAE,OAAO,eAAe,aAAa,SAAS;CAEpD,MAAM,SAAS,MAAM,kBAAkB;EACrC,SAAS,UAAU,SAAS,UAAU,MAAM;CAC9C,GAAG,CAAC,OAAO,QAAQ,CAAC;CAEpB,OACE,qBAAC,UAAD;EACO;EACL,MAAK;EACL,SAAS;EACT,cAAY;EACZ,OAAO,UAAU,kBAAkB,SAAS,UAAU,OAAO;EAC7D,WAAW,GACT;;;aAIA,kCACA,iCACA;;;aAIA,SAAS,QAAQ,UACjB,SAAS,QAAQ,UACjB,SAAS,QAAQ,WACjB,SACF;EACA,GAAI;EAtBN,UAAA,CAyBE,qBAAC,OAAD;GACE,WAAW,GACT,wCACA,kBAAkB,SACd,mCACA,gCACJ,SAAS,QAAQ,YACjB,SAAS,QAAQ,UACjB,SAAS,QAAQ,QACnB;GACA,OAAM;GACN,MAAK;GACL,SAAQ;GACR,QAAO;GACP,aAAa;GAdf,UAAA,CAgBE,oBAAC,UAAD;IAAQ,IAAG;IAAK,IAAG;IAAK,GAAE;GAAK,CAAA,GAC/B,oBAAC,QAAD;IACE,eAAc;IACd,GAAE;GACH,CAAA,CACE;EAGL,CAAA,GAAA,oBAAC,OAAD;GACE,WAAW,GACT,wCACA,kBAAkB,UACd,mCACA,+BACJ,SAAS,QAAQ,YACjB,SAAS,QAAQ,UACjB,SAAS,QAAQ,QACnB;GACA,OAAM;GACN,MAAK;GACL,SAAQ;GACR,QAAO;GACP,aAAa;GAEb,UAAA,oBAAC,QAAD;IACE,eAAc;IACd,gBAAe;IACf,GAAE;GACH,CAAA;EACE,CAAA,CACC;;AAEZ,CACF;AAEA,YAAY,cAAc"}

package/dist/components/typography/Typography.cjs

@@ -8,19 +8,25 @@ let react_jsx_runtime = require("react/jsx-runtime");
 const typographyVariants = (0, require("class-variance-authority").cva)("", {
 	variants: {
 		variant: {
-			h1: "text-h1 font-h1 leading-h1 tracking-h1 text-balance",
-			hero: "text-hero font-hero leading-hero tracking-hero text-balance font-normal [font-feature-settings:'normal']",
-			h2: "text-h2 font-h2 leading-h2 tracking-h2 text-balance",
-			h3: "text-h3 font-h3 leading-h3 tracking-h3 text-balance",
-			h4: "text-h4 font-h4 leading-h4 tracking-h4 text-balance",
-			h5: "text-xl font-xl leading-xl text-balance",
-			large: "text-lg font-lg leading-lg text-pretty",
-			body: "text-p font-p leading-p text-pretty",
-			small: "text-sm font-sm leading-sm text-pretty",
-			xs: "text-xs font-xs leading-xs text-pretty",
-			caption: "text-caption font-caption leading-caption tracking-caption text-pretty font-semibold uppercase",
-			mono: "text-mono font-mono leading-mono text-pretty",
-			code: "text-xs font-mono"
+			h1: "font-h1 text-h1/h1 tracking-h1 text-balance",
+			hero: `
+        font-hero font-features-['normal'] text-hero/hero font-normal
+        tracking-hero text-balance
+      `,
+			h2: "font-h2 text-h2/h2 tracking-h2 text-balance",
+			h3: "font-h3 text-h3/tight tracking-h3 text-balance",
+			h4: "font-h4 text-h4/h4 tracking-h4 text-balance",
+			h5: "font-xl text-xl/h2 text-balance",
+			large: "font-lg text-lg/p text-pretty",
+			body: "font-p text-base/p text-pretty",
+			small: "font-sm text-caption/p text-pretty",
+			xs: "font-xs text-xs/p text-pretty",
+			caption: `
+        font-caption text-caption/h2 font-semibold tracking-caption text-pretty
+        uppercase
+      `,
+			mono: "font-mono text-base/p text-pretty",
+			code: "font-mono text-xs"
 		},
 		color: {
 			default: "text-berget-foreground",

package/dist/components/typography/Typography.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Typography.cjs","names":["cva","React","cn"],"sources":["../../../src/components/typography/Typography.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../lib/utils';\n\nconst typographyVariants = cva('', {\n  variants: {\n    variant: {\n      // Fluid heading scale — use @theme tokens (clamp-based, 390px → 1440px)\n      h1: 'text-h1 font-h1 leading-h1 tracking-h1 text-balance',\n      // Hero display — from landing-page /dedicated-inference hero (Ovo, 400, tight display leading)\n      hero: \"text-hero font-hero leading-hero tracking-hero text-balance font-normal [font-feature-settings:'normal']\",\n      h2: 'text-h2 font-h2 leading-h2 tracking-h2 text-balance',\n      h3: 'text-h3 font-h3 leading-h3 tracking-h3 text-balance',\n      h4: 'text-h4 font-h4 leading-h4 tracking-h4 text-balance',\n      // Static sans-serif sub-heading\n      h5: 'text-xl font-xl leading-xl text-balance',\n      // Body and UI text — use @theme tokens where available\n      large: 'text-lg font-lg leading-lg text-pretty',\n      body: 'text-p font-p leading-p text-pretty',\n      small: 'text-sm font-sm leading-sm text-pretty',\n      xs: 'text-xs font-xs leading-xs text-pretty',\n      // Caption / overline / eyebrow (DM Sans, Semibold, uppercase)\n      caption:\n        'text-caption font-caption leading-caption tracking-caption text-pretty font-semibold uppercase',\n      // Monospaced — use @theme token\n      mono: 'text-mono font-mono leading-mono text-pretty',\n      // Inline code / spec labels\n      code: 'text-xs font-mono',\n    },\n    color: {\n      default: 'text-berget-foreground',\n      muted: 'text-berget-muted-foreground',\n      dim: 'text-berget-foreground/65',\n      primary: 'text-berget-primary',\n    },\n  },\n  defaultVariants: {\n    variant: 'body',\n    color: 'default',\n  },\n});\n\nconst defaultElementMap: Record<string, 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'p' | 'span'> = {\n  hero: 'h1',\n  h1: 'h1',\n  h2: 'h2',\n  h3: 'h3',\n  h4: 'h4',\n  h5: 'h5',\n  large: 'p',\n  body: 'p',\n  small: 'p',\n  xs: 'p',\n  caption: 'span',\n  mono: 'p',\n  code: 'span',\n};\n\nexport interface TypographyProps\n  extends\n    Omit<React.HTMLAttributes<HTMLElement>, 'color'>,\n    VariantProps<typeof typographyVariants> {\n  as?: React.ElementType;\n}\n\nconst Typography = React.forwardRef<HTMLElement, TypographyProps>(\n  ({ className, variant = 'body', color = 'default', as, children, ...props }, ref) => {\n    const Component = (as ?? defaultElementMap[variant ?? 'body'] ?? 'p') as\n      | 'h1'\n      | 'h2'\n      | 'h3'\n      | 'h4'\n      | 'h5'\n      | 'p'\n      | 'span';\n    return (\n      <Component\n        className={cn(typographyVariants({ variant, color }), className)}\n        ref={ref as any}\n        {...(props as any)}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nTypography.displayName = 'Typography';\n\nexport { Typography, typographyVariants };\n"],"mappings":";;;;;;;AAMA,MAAM,sBAAA,G,kCAAqBA,CAAAA,CAAAA,IAAAA,CAAI,IAAI;CACjC,UAAU;EACR,SAAS;GAEP,IAAI;GAEJ,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GAEJ,IAAI;GAEJ,OAAO;GACP,MAAM;GACN,OAAO;GACP,IAAI;GAEJ,SACE;GAEF,MAAM;GAEN,MAAM;EACR;EACA,OAAO;GACL,SAAS;GACT,OAAO;GACP,KAAK;GACL,SAAS;EACX;CACF;CACA,iBAAiB;EACf,SAAS;EACT,OAAO;CACT;AACF,CAAC;AAED,MAAM,oBAAqF;CACzF,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACP,MAAM;CACN,OAAO;CACP,IAAI;CACJ,SAAS;CACT,MAAM;CACN,MAAM;AACR;AASA,MAAM,aAAaC,MAAM,YACtB,EAAE,WAAW,UAAU,QAAQ,QAAQ,WAAW,IAAI,UAAU,GAAG,SAAS,QAAQ;CACnF,MAAM,YAAa,MAAM,kBAAkB,WAAW,WAAW;CAQjE,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD;EACE,WAAWC,cAAAA,GAAG,mBAAmB;GAAE;GAAS;EAAM,CAAC,GAAG,SAAS;EAC1D;EACL,GAAK;EAEJ;CACQ,CAAA;AAEf,CACF;AACA,WAAW,cAAc"}
+{"version":3,"file":"Typography.cjs","names":["cva","React","cn"],"sources":["../../../src/components/typography/Typography.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../lib/utils';\n\nconst typographyVariants = cva('', {\n  variants: {\n    variant: {\n      // Fluid heading scale — use @theme tokens (clamp-based, 390px → 1440px)\n      h1: 'font-h1 text-h1/h1 tracking-h1 text-balance',\n      // Hero display — from landing-page /dedicated-inference hero (Ovo, 400, tight display leading)\n      hero: `\n        font-hero font-features-['normal'] text-hero/hero font-normal\n        tracking-hero text-balance\n      `,\n      h2: 'font-h2 text-h2/h2 tracking-h2 text-balance',\n      h3: 'font-h3 text-h3/tight tracking-h3 text-balance',\n      h4: 'font-h4 text-h4/h4 tracking-h4 text-balance',\n      // Static sans-serif sub-heading\n      h5: 'font-xl text-xl/h2 text-balance',\n      // Body and UI text — use @theme tokens where available\n      large: 'font-lg text-lg/p text-pretty',\n      body: 'font-p text-base/p text-pretty',\n      small: 'font-sm text-caption/p text-pretty',\n      xs: 'font-xs text-xs/p text-pretty',\n      // Caption / overline / eyebrow (DM Sans, Semibold, uppercase)\n      caption: `\n        font-caption text-caption/h2 font-semibold tracking-caption text-pretty\n        uppercase\n      `,\n      // Monospaced — use @theme token\n      mono: 'font-mono text-base/p text-pretty',\n      // Inline code / spec labels\n      code: 'font-mono text-xs',\n    },\n    color: {\n      default: 'text-berget-foreground',\n      muted: 'text-berget-muted-foreground',\n      dim: 'text-berget-foreground/65',\n      primary: 'text-berget-primary',\n    },\n  },\n  defaultVariants: {\n    variant: 'body',\n    color: 'default',\n  },\n});\n\nconst defaultElementMap: Record<string, 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'p' | 'span'> = {\n  hero: 'h1',\n  h1: 'h1',\n  h2: 'h2',\n  h3: 'h3',\n  h4: 'h4',\n  h5: 'h5',\n  large: 'p',\n  body: 'p',\n  small: 'p',\n  xs: 'p',\n  caption: 'span',\n  mono: 'p',\n  code: 'span',\n};\n\nexport interface TypographyProps\n  extends\n    Omit<React.HTMLAttributes<HTMLElement>, 'color'>,\n    VariantProps<typeof typographyVariants> {\n  as?: React.ElementType;\n}\n\nconst Typography = React.forwardRef<HTMLElement, TypographyProps>(\n  ({ className, variant = 'body', color = 'default', as, children, ...props }, ref) => {\n    const Component = (as ?? defaultElementMap[variant ?? 'body'] ?? 'p') as\n      | 'h1'\n      | 'h2'\n      | 'h3'\n      | 'h4'\n      | 'h5'\n      | 'p'\n      | 'span';\n    return (\n      <Component\n        className={cn(typographyVariants({ variant, color }), className)}\n        ref={ref as any}\n        {...(props as any)}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nTypography.displayName = 'Typography';\n\nexport { Typography, typographyVariants };\n"],"mappings":";;;;;;;AAMA,MAAM,sBAAA,G,kCAAqBA,CAAAA,CAAAA,IAAAA,CAAI,IAAI;CACjC,UAAU;EACR,SAAS;GAEP,IAAI;GAEJ,MAAM;;;;GAIN,IAAI;GACJ,IAAI;GACJ,IAAI;GAEJ,IAAI;GAEJ,OAAO;GACP,MAAM;GACN,OAAO;GACP,IAAI;GAEJ,SAAS;;;;GAKT,MAAM;GAEN,MAAM;EACR;EACA,OAAO;GACL,SAAS;GACT,OAAO;GACP,KAAK;GACL,SAAS;EACX;CACF;CACA,iBAAiB;EACf,SAAS;EACT,OAAO;CACT;AACF,CAAC;AAED,MAAM,oBAAqF;CACzF,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACP,MAAM;CACN,OAAO;CACP,IAAI;CACJ,SAAS;CACT,MAAM;CACN,MAAM;AACR;AASA,MAAM,aAAaC,MAAM,YACtB,EAAE,WAAW,UAAU,QAAQ,QAAQ,WAAW,IAAI,UAAU,GAAG,SAAS,QAAQ;CACnF,MAAM,YAAa,MAAM,kBAAkB,WAAW,WAAW;CAQjE,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD;EACE,WAAWC,cAAAA,GAAG,mBAAmB;GAAE;GAAS;EAAM,CAAC,GAAG,SAAS;EAC1D;EACL,GAAK;EAEJ;CACQ,CAAA;AAEf,CACF;AACA,WAAW,cAAc"}

package/dist/components/typography/Typography.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"Typography.d.cts","names":[],"sources":["../../../src/components/typography/Typography.tsx"],"mappings":";;;cAMM,qBAAkB;;;6CAoCtB;iBAkBe,wBAEb,KAAK,MAAM,eAAe,wBAC1B,oBAAoB;EACtB,KAAK,MAAM;;cAGP,YAAU,MAAA,0BAAA,kBAAA,MAAA,cAAA"}
+{"version":3,"file":"Typography.d.cts","names":[],"sources":["../../../src/components/typography/Typography.tsx"],"mappings":";;;cAMM,qBAAkB;;;6CAyCtB;iBAkBe,wBAEb,KAAK,MAAM,eAAe,wBAC1B,oBAAoB;EACtB,KAAK,MAAM;;cAGP,YAAU,MAAA,0BAAA,kBAAA,MAAA,cAAA"}

package/dist/components/typography/Typography.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Typography.d.mts","names":[],"sources":["../../../src/components/typography/Typography.tsx"],"mappings":";;;cAMM,qBAAkB;;;6CAoCtB;iBAkBe,wBAEb,KAAK,MAAM,eAAe,wBAC1B,oBAAoB;EACtB,KAAK,MAAM;;cAGP,YAAU,MAAA,0BAAA,kBAAA,MAAA,cAAA"}
+{"version":3,"file":"Typography.d.mts","names":[],"sources":["../../../src/components/typography/Typography.tsx"],"mappings":";;;cAMM,qBAAkB;;;6CAyCtB;iBAkBe,wBAEb,KAAK,MAAM,eAAe,wBAC1B,oBAAoB;EACtB,KAAK,MAAM;;cAGP,YAAU,MAAA,0BAAA,kBAAA,MAAA,cAAA"}

package/dist/components/typography/Typography.mjs

@@ -7,19 +7,25 @@ import { cva } from "class-variance-authority";
 const typographyVariants = cva("", {
 	variants: {
 		variant: {
-			h1: "text-h1 font-h1 leading-h1 tracking-h1 text-balance",
-			hero: "text-hero font-hero leading-hero tracking-hero text-balance font-normal [font-feature-settings:'normal']",
-			h2: "text-h2 font-h2 leading-h2 tracking-h2 text-balance",
-			h3: "text-h3 font-h3 leading-h3 tracking-h3 text-balance",
-			h4: "text-h4 font-h4 leading-h4 tracking-h4 text-balance",
-			h5: "text-xl font-xl leading-xl text-balance",
-			large: "text-lg font-lg leading-lg text-pretty",
-			body: "text-p font-p leading-p text-pretty",
-			small: "text-sm font-sm leading-sm text-pretty",
-			xs: "text-xs font-xs leading-xs text-pretty",
-			caption: "text-caption font-caption leading-caption tracking-caption text-pretty font-semibold uppercase",
-			mono: "text-mono font-mono leading-mono text-pretty",
-			code: "text-xs font-mono"
+			h1: "font-h1 text-h1/h1 tracking-h1 text-balance",
+			hero: `
+        font-hero font-features-['normal'] text-hero/hero font-normal
+        tracking-hero text-balance
+      `,
+			h2: "font-h2 text-h2/h2 tracking-h2 text-balance",
+			h3: "font-h3 text-h3/tight tracking-h3 text-balance",
+			h4: "font-h4 text-h4/h4 tracking-h4 text-balance",
+			h5: "font-xl text-xl/h2 text-balance",
+			large: "font-lg text-lg/p text-pretty",
+			body: "font-p text-base/p text-pretty",
+			small: "font-sm text-caption/p text-pretty",
+			xs: "font-xs text-xs/p text-pretty",
+			caption: `
+        font-caption text-caption/h2 font-semibold tracking-caption text-pretty
+        uppercase
+      `,
+			mono: "font-mono text-base/p text-pretty",
+			code: "font-mono text-xs"
 		},
 		color: {
 			default: "text-berget-foreground",

package/dist/components/typography/Typography.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Typography.mjs","names":[],"sources":["../../../src/components/typography/Typography.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../lib/utils';\n\nconst typographyVariants = cva('', {\n  variants: {\n    variant: {\n      // Fluid heading scale — use @theme tokens (clamp-based, 390px → 1440px)\n      h1: 'text-h1 font-h1 leading-h1 tracking-h1 text-balance',\n      // Hero display — from landing-page /dedicated-inference hero (Ovo, 400, tight display leading)\n      hero: \"text-hero font-hero leading-hero tracking-hero text-balance font-normal [font-feature-settings:'normal']\",\n      h2: 'text-h2 font-h2 leading-h2 tracking-h2 text-balance',\n      h3: 'text-h3 font-h3 leading-h3 tracking-h3 text-balance',\n      h4: 'text-h4 font-h4 leading-h4 tracking-h4 text-balance',\n      // Static sans-serif sub-heading\n      h5: 'text-xl font-xl leading-xl text-balance',\n      // Body and UI text — use @theme tokens where available\n      large: 'text-lg font-lg leading-lg text-pretty',\n      body: 'text-p font-p leading-p text-pretty',\n      small: 'text-sm font-sm leading-sm text-pretty',\n      xs: 'text-xs font-xs leading-xs text-pretty',\n      // Caption / overline / eyebrow (DM Sans, Semibold, uppercase)\n      caption:\n        'text-caption font-caption leading-caption tracking-caption text-pretty font-semibold uppercase',\n      // Monospaced — use @theme token\n      mono: 'text-mono font-mono leading-mono text-pretty',\n      // Inline code / spec labels\n      code: 'text-xs font-mono',\n    },\n    color: {\n      default: 'text-berget-foreground',\n      muted: 'text-berget-muted-foreground',\n      dim: 'text-berget-foreground/65',\n      primary: 'text-berget-primary',\n    },\n  },\n  defaultVariants: {\n    variant: 'body',\n    color: 'default',\n  },\n});\n\nconst defaultElementMap: Record<string, 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'p' | 'span'> = {\n  hero: 'h1',\n  h1: 'h1',\n  h2: 'h2',\n  h3: 'h3',\n  h4: 'h4',\n  h5: 'h5',\n  large: 'p',\n  body: 'p',\n  small: 'p',\n  xs: 'p',\n  caption: 'span',\n  mono: 'p',\n  code: 'span',\n};\n\nexport interface TypographyProps\n  extends\n    Omit<React.HTMLAttributes<HTMLElement>, 'color'>,\n    VariantProps<typeof typographyVariants> {\n  as?: React.ElementType;\n}\n\nconst Typography = React.forwardRef<HTMLElement, TypographyProps>(\n  ({ className, variant = 'body', color = 'default', as, children, ...props }, ref) => {\n    const Component = (as ?? defaultElementMap[variant ?? 'body'] ?? 'p') as\n      | 'h1'\n      | 'h2'\n      | 'h3'\n      | 'h4'\n      | 'h5'\n      | 'p'\n      | 'span';\n    return (\n      <Component\n        className={cn(typographyVariants({ variant, color }), className)}\n        ref={ref as any}\n        {...(props as any)}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nTypography.displayName = 'Typography';\n\nexport { Typography, typographyVariants };\n"],"mappings":";;;;;;AAMA,MAAM,qBAAqB,IAAI,IAAI;CACjC,UAAU;EACR,SAAS;GAEP,IAAI;GAEJ,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GAEJ,IAAI;GAEJ,OAAO;GACP,MAAM;GACN,OAAO;GACP,IAAI;GAEJ,SACE;GAEF,MAAM;GAEN,MAAM;EACR;EACA,OAAO;GACL,SAAS;GACT,OAAO;GACP,KAAK;GACL,SAAS;EACX;CACF;CACA,iBAAiB;EACf,SAAS;EACT,OAAO;CACT;AACF,CAAC;AAED,MAAM,oBAAqF;CACzF,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACP,MAAM;CACN,OAAO;CACP,IAAI;CACJ,SAAS;CACT,MAAM;CACN,MAAM;AACR;AASA,MAAM,aAAa,MAAM,YACtB,EAAE,WAAW,UAAU,QAAQ,QAAQ,WAAW,IAAI,UAAU,GAAG,SAAS,QAAQ;CACnF,MAAM,YAAa,MAAM,kBAAkB,WAAW,WAAW;CAQjE,OACE,oBAAC,WAAD;EACE,WAAW,GAAG,mBAAmB;GAAE;GAAS;EAAM,CAAC,GAAG,SAAS;EAC1D;EACL,GAAK;EAEJ;CACQ,CAAA;AAEf,CACF;AACA,WAAW,cAAc"}
+{"version":3,"file":"Typography.mjs","names":[],"sources":["../../../src/components/typography/Typography.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../lib/utils';\n\nconst typographyVariants = cva('', {\n  variants: {\n    variant: {\n      // Fluid heading scale — use @theme tokens (clamp-based, 390px → 1440px)\n      h1: 'font-h1 text-h1/h1 tracking-h1 text-balance',\n      // Hero display — from landing-page /dedicated-inference hero (Ovo, 400, tight display leading)\n      hero: `\n        font-hero font-features-['normal'] text-hero/hero font-normal\n        tracking-hero text-balance\n      `,\n      h2: 'font-h2 text-h2/h2 tracking-h2 text-balance',\n      h3: 'font-h3 text-h3/tight tracking-h3 text-balance',\n      h4: 'font-h4 text-h4/h4 tracking-h4 text-balance',\n      // Static sans-serif sub-heading\n      h5: 'font-xl text-xl/h2 text-balance',\n      // Body and UI text — use @theme tokens where available\n      large: 'font-lg text-lg/p text-pretty',\n      body: 'font-p text-base/p text-pretty',\n      small: 'font-sm text-caption/p text-pretty',\n      xs: 'font-xs text-xs/p text-pretty',\n      // Caption / overline / eyebrow (DM Sans, Semibold, uppercase)\n      caption: `\n        font-caption text-caption/h2 font-semibold tracking-caption text-pretty\n        uppercase\n      `,\n      // Monospaced — use @theme token\n      mono: 'font-mono text-base/p text-pretty',\n      // Inline code / spec labels\n      code: 'font-mono text-xs',\n    },\n    color: {\n      default: 'text-berget-foreground',\n      muted: 'text-berget-muted-foreground',\n      dim: 'text-berget-foreground/65',\n      primary: 'text-berget-primary',\n    },\n  },\n  defaultVariants: {\n    variant: 'body',\n    color: 'default',\n  },\n});\n\nconst defaultElementMap: Record<string, 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'p' | 'span'> = {\n  hero: 'h1',\n  h1: 'h1',\n  h2: 'h2',\n  h3: 'h3',\n  h4: 'h4',\n  h5: 'h5',\n  large: 'p',\n  body: 'p',\n  small: 'p',\n  xs: 'p',\n  caption: 'span',\n  mono: 'p',\n  code: 'span',\n};\n\nexport interface TypographyProps\n  extends\n    Omit<React.HTMLAttributes<HTMLElement>, 'color'>,\n    VariantProps<typeof typographyVariants> {\n  as?: React.ElementType;\n}\n\nconst Typography = React.forwardRef<HTMLElement, TypographyProps>(\n  ({ className, variant = 'body', color = 'default', as, children, ...props }, ref) => {\n    const Component = (as ?? defaultElementMap[variant ?? 'body'] ?? 'p') as\n      | 'h1'\n      | 'h2'\n      | 'h3'\n      | 'h4'\n      | 'h5'\n      | 'p'\n      | 'span';\n    return (\n      <Component\n        className={cn(typographyVariants({ variant, color }), className)}\n        ref={ref as any}\n        {...(props as any)}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nTypography.displayName = 'Typography';\n\nexport { Typography, typographyVariants };\n"],"mappings":";;;;;;AAMA,MAAM,qBAAqB,IAAI,IAAI;CACjC,UAAU;EACR,SAAS;GAEP,IAAI;GAEJ,MAAM;;;;GAIN,IAAI;GACJ,IAAI;GACJ,IAAI;GAEJ,IAAI;GAEJ,OAAO;GACP,MAAM;GACN,OAAO;GACP,IAAI;GAEJ,SAAS;;;;GAKT,MAAM;GAEN,MAAM;EACR;EACA,OAAO;GACL,SAAS;GACT,OAAO;GACP,KAAK;GACL,SAAS;EACX;CACF;CACA,iBAAiB;EACf,SAAS;EACT,OAAO;CACT;AACF,CAAC;AAED,MAAM,oBAAqF;CACzF,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACP,MAAM;CACN,OAAO;CACP,IAAI;CACJ,SAAS;CACT,MAAM;CACN,MAAM;AACR;AASA,MAAM,aAAa,MAAM,YACtB,EAAE,WAAW,UAAU,QAAQ,QAAQ,WAAW,IAAI,UAAU,GAAG,SAAS,QAAQ;CACnF,MAAM,YAAa,MAAM,kBAAkB,WAAW,WAAW;CAQjE,OACE,oBAAC,WAAD;EACE,WAAW,GAAG,mBAAmB;GAAE;GAAS;EAAM,CAAC,GAAG,SAAS;EAC1D;EACL,GAAK;EAEJ;CACQ,CAAA;AAEf,CACF;AACA,WAAW,cAAc"}

package/dist/components/window-frame/WindowFrame.cjs

@@ -14,27 +14,37 @@ const WindowFrame = react.forwardRef(({ title = "window", tabs, activeTab, onTab
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		ref,
-		className: require_utils.cn("rounded-berget-sm overflow-hidden shadow-berget-md border border-berget-brand-granite-700 bg-berget-brand-granite-800", className),
+		className: require_utils.cn(`
+            overflow-hidden rounded-berget-sm border
+            border-berget-brand-granite-700 bg-berget-brand-granite-800
+            shadow-berget-md
+          `, className),
 		...props,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "flex items-center gap-2 px-4 py-3 border-b border-berget-brand-granite-700 bg-berget-brand-granite-900",
+			className: "\n            flex items-center gap-2 border-b border-berget-brand-granite-700\n            bg-berget-brand-granite-900 px-4 py-3\n          ",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex items-center gap-2 flex-shrink-0",
+				className: "flex shrink-0 items-center gap-2",
 				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "w-3 h-3 rounded-full bg-berget-brand-muscaria-400" }),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "w-3 h-3 rounded-full bg-berget-brand-chanterelle-200" }),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "w-3 h-3 rounded-full bg-berget-brand-moss-400" })
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "size-3 rounded-full bg-berget-brand-muscaria-400" }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "size-3 rounded-full bg-berget-brand-chanterelle-200" }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "size-3 rounded-full bg-berget-brand-moss-400" })
 				]
 			}), tabs && tabs.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "ml-4 flex items-center gap-1",
 				children: tabs.map((tab) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 					type: "button",
 					onClick: () => handleTabChange(tab.id),
-					className: require_utils.cn("px-3 py-1 text-sm transition-colors cursor-pointer", currentTab === tab.id ? "rounded-berget-xs bg-white/10 text-berget-foreground font-medium" : "rounded text-berget-muted-foreground hover:text-berget-foreground font-medium"),
+					className: require_utils.cn("cursor-pointer px-3 py-1 text-sm transition-colors", currentTab === tab.id ? `
+                        rounded-berget-xs bg-white/10 font-medium
+                        text-berget-foreground
+                      ` : `
+                        rounded-sm font-medium text-berget-muted-foreground
+                        hover:text-berget-foreground
+                      `),
 					children: tab.label
 				}, tab.id))
 			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "ml-4 text-sm font-mono text-berget-brand-moss-400",
+				className: "ml-4 font-mono text-sm text-berget-brand-moss-400",
 				children: title
 			})]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children })]

package/dist/components/window-frame/WindowFrame.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"WindowFrame.cjs","names":["React","useState","cn"],"sources":["../../../src/components/window-frame/WindowFrame.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useState } from 'react';\nimport { cn } from '../../lib/utils';\n\nexport interface WindowTab {\n  id: string;\n  label: string;\n}\n\nexport interface WindowFrameProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Window title shown in the title bar when no tabs are provided */\n  title?: string;\n  /** Optional tabs for switching content */\n  tabs?: WindowTab[];\n  /** Controlled active tab ID */\n  activeTab?: string;\n  /** Callback when a tab is selected */\n  onTabChange?: (tabId: string) => void;\n}\n\nexport const WindowFrame = React.forwardRef<HTMLDivElement, WindowFrameProps>(\n  ({ title = 'window', tabs, activeTab, onTabChange, children, className, ...props }, ref) => {\n    const [internalActive, setInternalActive] = useState(tabs?.[0]?.id ?? '');\n    const currentTab = activeTab ?? internalActive;\n\n    const handleTabChange = (id: string) => {\n      if (onTabChange) {\n        onTabChange(id);\n      } else {\n        setInternalActive(id);\n      }\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'rounded-berget-sm overflow-hidden shadow-berget-md border border-berget-brand-granite-700 bg-berget-brand-granite-800',\n          className,\n        )}\n        {...props}\n      >\n        {/* Title bar */}\n        <div className=\"flex items-center gap-2 px-4 py-3 border-b border-berget-brand-granite-700 bg-berget-brand-granite-900\">\n          <div className=\"flex items-center gap-2 flex-shrink-0\">\n            <div className=\"w-3 h-3 rounded-full bg-berget-brand-muscaria-400\" />\n            <div className=\"w-3 h-3 rounded-full bg-berget-brand-chanterelle-200\" />\n            <div className=\"w-3 h-3 rounded-full bg-berget-brand-moss-400\" />\n          </div>\n\n          {tabs && tabs.length > 0 ? (\n            <div className=\"ml-4 flex items-center gap-1\">\n              {tabs.map((tab) => (\n                <button\n                  key={tab.id}\n                  type=\"button\"\n                  onClick={() => handleTabChange(tab.id)}\n                  className={cn(\n                    'px-3 py-1 text-sm transition-colors cursor-pointer',\n                    currentTab === tab.id\n                      ? 'rounded-berget-xs bg-white/10 text-berget-foreground font-medium'\n                      : 'rounded text-berget-muted-foreground hover:text-berget-foreground font-medium',\n                  )}\n                >\n                  {tab.label}\n                </button>\n              ))}\n            </div>\n          ) : (\n            <span className=\"ml-4 text-sm font-mono text-berget-brand-moss-400\">{title}</span>\n          )}\n        </div>\n\n        {/* Content area */}\n        <div>{children}</div>\n      </div>\n    );\n  },\n);\n\nWindowFrame.displayName = 'WindowFrame';\n"],"mappings":";;;;;;;AAsBA,MAAa,cAAcA,MAAM,YAC9B,EAAE,QAAQ,UAAU,MAAM,WAAW,aAAa,UAAU,WAAW,GAAG,SAAS,QAAQ;CAC1F,MAAM,CAAC,gBAAgB,sBAAA,GAAqBC,MAAAA,SAAAA,CAAS,OAAO,EAAE,EAAE,MAAM,EAAE;CACxE,MAAM,aAAa,aAAa;CAEhC,MAAM,mBAAmB,OAAe;EACtC,IAAI,aACF,YAAY,EAAE;OAEd,kBAAkB,EAAE;CAExB;CAEA,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EACO;EACL,WAAWC,cAAAA,GACT,yHACA,SACF;EACA,GAAI;EANN,UAAA,CASE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD,EAAK,WAAU,oDAAqD,CAAA;KACpE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD,EAAK,WAAU,uDAAwD,CAAA;KACvE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD,EAAK,WAAU,gDAAiD,CAAA;IAC7D;GAEJ,CAAA,GAAA,QAAQ,KAAK,SAAS,IACrB,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IAAK,WAAU;IACZ,UAAA,KAAK,KAAK,QACT,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;KAEE,MAAK;KACL,eAAe,gBAAgB,IAAI,EAAE;KACrC,WAAWA,cAAAA,GACT,sDACA,eAAe,IAAI,KACf,qEACA,+EACN;KAEC,UAAA,IAAI;IACC,GAXD,IAAI,EAWH,CACT;GACE,CAAA,IAEL,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IAAM,WAAU;IAAqD,UAAA;GAAY,CAAA,CAEhF;EAGL,CAAA,GAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD,EAAM,SAAc,CAAA,CACjB;;AAET,CACF;AAEA,YAAY,cAAc"}
+{"version":3,"file":"WindowFrame.cjs","names":["React","useState","cn"],"sources":["../../../src/components/window-frame/WindowFrame.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useState } from 'react';\nimport { cn } from '../../lib/utils';\n\nexport interface WindowTab {\n  id: string;\n  label: string;\n}\n\nexport interface WindowFrameProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Window title shown in the title bar when no tabs are provided */\n  title?: string;\n  /** Optional tabs for switching content */\n  tabs?: WindowTab[];\n  /** Controlled active tab ID */\n  activeTab?: string;\n  /** Callback when a tab is selected */\n  onTabChange?: (tabId: string) => void;\n}\n\nexport const WindowFrame = React.forwardRef<HTMLDivElement, WindowFrameProps>(\n  ({ title = 'window', tabs, activeTab, onTabChange, children, className, ...props }, ref) => {\n    const [internalActive, setInternalActive] = useState(tabs?.[0]?.id ?? '');\n    const currentTab = activeTab ?? internalActive;\n\n    const handleTabChange = (id: string) => {\n      if (onTabChange) {\n        onTabChange(id);\n      } else {\n        setInternalActive(id);\n      }\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          `\n            overflow-hidden rounded-berget-sm border\n            border-berget-brand-granite-700 bg-berget-brand-granite-800\n            shadow-berget-md\n          `,\n          className,\n        )}\n        {...props}\n      >\n        {/* Title bar */}\n        <div\n          className=\"\n            flex items-center gap-2 border-b border-berget-brand-granite-700\n            bg-berget-brand-granite-900 px-4 py-3\n          \"\n        >\n          <div className=\"flex shrink-0 items-center gap-2\">\n            <div className=\"size-3 rounded-full bg-berget-brand-muscaria-400\" />\n            <div className=\"size-3 rounded-full bg-berget-brand-chanterelle-200\" />\n            <div className=\"size-3 rounded-full bg-berget-brand-moss-400\" />\n          </div>\n\n          {tabs && tabs.length > 0 ? (\n            <div className=\"ml-4 flex items-center gap-1\">\n              {tabs.map((tab) => (\n                <button\n                  key={tab.id}\n                  type=\"button\"\n                  onClick={() => handleTabChange(tab.id)}\n                  className={cn(\n                    'cursor-pointer px-3 py-1 text-sm transition-colors',\n                    currentTab === tab.id\n                      ? `\n                        rounded-berget-xs bg-white/10 font-medium\n                        text-berget-foreground\n                      `\n                      : `\n                        rounded-sm font-medium text-berget-muted-foreground\n                        hover:text-berget-foreground\n                      `,\n                  )}\n                >\n                  {tab.label}\n                </button>\n              ))}\n            </div>\n          ) : (\n            <span className=\"ml-4 font-mono text-sm text-berget-brand-moss-400\">{title}</span>\n          )}\n        </div>\n\n        {/* Content area */}\n        <div>{children}</div>\n      </div>\n    );\n  },\n);\n\nWindowFrame.displayName = 'WindowFrame';\n"],"mappings":";;;;;;;AAsBA,MAAa,cAAcA,MAAM,YAC9B,EAAE,QAAQ,UAAU,MAAM,WAAW,aAAa,UAAU,WAAW,GAAG,SAAS,QAAQ;CAC1F,MAAM,CAAC,gBAAgB,sBAAA,GAAqBC,MAAAA,SAAAA,CAAS,OAAO,EAAE,EAAE,MAAM,EAAE;CACxE,MAAM,aAAa,aAAa;CAEhC,MAAM,mBAAmB,OAAe;EACtC,IAAI,aACF,YAAY,EAAE;OAEd,kBAAkB,EAAE;CAExB;CAEA,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EACO;EACL,WAAWC,cAAAA,GACT;;;;aAKA,SACF;EACA,GAAI;EAVN,UAAA,CAaE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;GACE,WAAU;GADZ,UAAA,CAME,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD,EAAK,WAAU,mDAAoD,CAAA;KACnE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD,EAAK,WAAU,sDAAuD,CAAA;KACtE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD,EAAK,WAAU,+CAAgD,CAAA;IAC5D;GAEJ,CAAA,GAAA,QAAQ,KAAK,SAAS,IACrB,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IAAK,WAAU;IACZ,UAAA,KAAK,KAAK,QACT,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;KAEE,MAAK;KACL,eAAe,gBAAgB,IAAI,EAAE;KACrC,WAAWA,cAAAA,GACT,sDACA,eAAe,IAAI,KACf;;;0BAIA;;;uBAIN;KAEC,UAAA,IAAI;IACC,GAjBD,IAAI,EAiBH,CACT;GACE,CAAA,IAEL,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IAAM,WAAU;IAAqD,UAAA;GAAY,CAAA,CAEhF;EAGL,CAAA,GAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD,EAAM,SAAc,CAAA,CACjB;;AAET,CACF;AAEA,YAAY,cAAc"}

package/dist/components/window-frame/WindowFrame.mjs

@@ -13,27 +13,37 @@ const WindowFrame = React.forwardRef(({ title = "window", tabs, activeTab, onTab
 	};
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
-		className: cn("rounded-berget-sm overflow-hidden shadow-berget-md border border-berget-brand-granite-700 bg-berget-brand-granite-800", className),
+		className: cn(`
+            overflow-hidden rounded-berget-sm border
+            border-berget-brand-granite-700 bg-berget-brand-granite-800
+            shadow-berget-md
+          `, className),
 		...props,
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex items-center gap-2 px-4 py-3 border-b border-berget-brand-granite-700 bg-berget-brand-granite-900",
+			className: "\n            flex items-center gap-2 border-b border-berget-brand-granite-700\n            bg-berget-brand-granite-900 px-4 py-3\n          ",
 			children: [/* @__PURE__ */ jsxs("div", {
-				className: "flex items-center gap-2 flex-shrink-0",
+				className: "flex shrink-0 items-center gap-2",
 				children: [
-					/* @__PURE__ */ jsx("div", { className: "w-3 h-3 rounded-full bg-berget-brand-muscaria-400" }),
-					/* @__PURE__ */ jsx("div", { className: "w-3 h-3 rounded-full bg-berget-brand-chanterelle-200" }),
-					/* @__PURE__ */ jsx("div", { className: "w-3 h-3 rounded-full bg-berget-brand-moss-400" })
+					/* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-berget-brand-muscaria-400" }),
+					/* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-berget-brand-chanterelle-200" }),
+					/* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-berget-brand-moss-400" })
 				]
 			}), tabs && tabs.length > 0 ? /* @__PURE__ */ jsx("div", {
 				className: "ml-4 flex items-center gap-1",
 				children: tabs.map((tab) => /* @__PURE__ */ jsx("button", {
 					type: "button",
 					onClick: () => handleTabChange(tab.id),
-					className: cn("px-3 py-1 text-sm transition-colors cursor-pointer", currentTab === tab.id ? "rounded-berget-xs bg-white/10 text-berget-foreground font-medium" : "rounded text-berget-muted-foreground hover:text-berget-foreground font-medium"),
+					className: cn("cursor-pointer px-3 py-1 text-sm transition-colors", currentTab === tab.id ? `
+                        rounded-berget-xs bg-white/10 font-medium
+                        text-berget-foreground
+                      ` : `
+                        rounded-sm font-medium text-berget-muted-foreground
+                        hover:text-berget-foreground
+                      `),
 					children: tab.label
 				}, tab.id))
 			}) : /* @__PURE__ */ jsx("span", {
-				className: "ml-4 text-sm font-mono text-berget-brand-moss-400",
+				className: "ml-4 font-mono text-sm text-berget-brand-moss-400",
 				children: title
 			})]
 		}), /* @__PURE__ */ jsx("div", { children })]

package/dist/components/window-frame/WindowFrame.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"WindowFrame.mjs","names":[],"sources":["../../../src/components/window-frame/WindowFrame.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useState } from 'react';\nimport { cn } from '../../lib/utils';\n\nexport interface WindowTab {\n  id: string;\n  label: string;\n}\n\nexport interface WindowFrameProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Window title shown in the title bar when no tabs are provided */\n  title?: string;\n  /** Optional tabs for switching content */\n  tabs?: WindowTab[];\n  /** Controlled active tab ID */\n  activeTab?: string;\n  /** Callback when a tab is selected */\n  onTabChange?: (tabId: string) => void;\n}\n\nexport const WindowFrame = React.forwardRef<HTMLDivElement, WindowFrameProps>(\n  ({ title = 'window', tabs, activeTab, onTabChange, children, className, ...props }, ref) => {\n    const [internalActive, setInternalActive] = useState(tabs?.[0]?.id ?? '');\n    const currentTab = activeTab ?? internalActive;\n\n    const handleTabChange = (id: string) => {\n      if (onTabChange) {\n        onTabChange(id);\n      } else {\n        setInternalActive(id);\n      }\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'rounded-berget-sm overflow-hidden shadow-berget-md border border-berget-brand-granite-700 bg-berget-brand-granite-800',\n          className,\n        )}\n        {...props}\n      >\n        {/* Title bar */}\n        <div className=\"flex items-center gap-2 px-4 py-3 border-b border-berget-brand-granite-700 bg-berget-brand-granite-900\">\n          <div className=\"flex items-center gap-2 flex-shrink-0\">\n            <div className=\"w-3 h-3 rounded-full bg-berget-brand-muscaria-400\" />\n            <div className=\"w-3 h-3 rounded-full bg-berget-brand-chanterelle-200\" />\n            <div className=\"w-3 h-3 rounded-full bg-berget-brand-moss-400\" />\n          </div>\n\n          {tabs && tabs.length > 0 ? (\n            <div className=\"ml-4 flex items-center gap-1\">\n              {tabs.map((tab) => (\n                <button\n                  key={tab.id}\n                  type=\"button\"\n                  onClick={() => handleTabChange(tab.id)}\n                  className={cn(\n                    'px-3 py-1 text-sm transition-colors cursor-pointer',\n                    currentTab === tab.id\n                      ? 'rounded-berget-xs bg-white/10 text-berget-foreground font-medium'\n                      : 'rounded text-berget-muted-foreground hover:text-berget-foreground font-medium',\n                  )}\n                >\n                  {tab.label}\n                </button>\n              ))}\n            </div>\n          ) : (\n            <span className=\"ml-4 text-sm font-mono text-berget-brand-moss-400\">{title}</span>\n          )}\n        </div>\n\n        {/* Content area */}\n        <div>{children}</div>\n      </div>\n    );\n  },\n);\n\nWindowFrame.displayName = 'WindowFrame';\n"],"mappings":";;;;;;AAsBA,MAAa,cAAc,MAAM,YAC9B,EAAE,QAAQ,UAAU,MAAM,WAAW,aAAa,UAAU,WAAW,GAAG,SAAS,QAAQ;CAC1F,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,OAAO,EAAE,EAAE,MAAM,EAAE;CACxE,MAAM,aAAa,aAAa;CAEhC,MAAM,mBAAmB,OAAe;EACtC,IAAI,aACF,YAAY,EAAE;OAEd,kBAAkB,EAAE;CAExB;CAEA,OACE,qBAAC,OAAD;EACO;EACL,WAAW,GACT,yHACA,SACF;EACA,GAAI;EANN,UAAA,CASE,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,oBAAC,OAAD,EAAK,WAAU,oDAAqD,CAAA;KACpE,oBAAC,OAAD,EAAK,WAAU,uDAAwD,CAAA;KACvE,oBAAC,OAAD,EAAK,WAAU,gDAAiD,CAAA;IAC7D;GAEJ,CAAA,GAAA,QAAQ,KAAK,SAAS,IACrB,oBAAC,OAAD;IAAK,WAAU;IACZ,UAAA,KAAK,KAAK,QACT,oBAAC,UAAD;KAEE,MAAK;KACL,eAAe,gBAAgB,IAAI,EAAE;KACrC,WAAW,GACT,sDACA,eAAe,IAAI,KACf,qEACA,+EACN;KAEC,UAAA,IAAI;IACC,GAXD,IAAI,EAWH,CACT;GACE,CAAA,IAEL,oBAAC,QAAD;IAAM,WAAU;IAAqD,UAAA;GAAY,CAAA,CAEhF;EAGL,CAAA,GAAA,oBAAC,OAAD,EAAM,SAAc,CAAA,CACjB;;AAET,CACF;AAEA,YAAY,cAAc"}
+{"version":3,"file":"WindowFrame.mjs","names":[],"sources":["../../../src/components/window-frame/WindowFrame.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useState } from 'react';\nimport { cn } from '../../lib/utils';\n\nexport interface WindowTab {\n  id: string;\n  label: string;\n}\n\nexport interface WindowFrameProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Window title shown in the title bar when no tabs are provided */\n  title?: string;\n  /** Optional tabs for switching content */\n  tabs?: WindowTab[];\n  /** Controlled active tab ID */\n  activeTab?: string;\n  /** Callback when a tab is selected */\n  onTabChange?: (tabId: string) => void;\n}\n\nexport const WindowFrame = React.forwardRef<HTMLDivElement, WindowFrameProps>(\n  ({ title = 'window', tabs, activeTab, onTabChange, children, className, ...props }, ref) => {\n    const [internalActive, setInternalActive] = useState(tabs?.[0]?.id ?? '');\n    const currentTab = activeTab ?? internalActive;\n\n    const handleTabChange = (id: string) => {\n      if (onTabChange) {\n        onTabChange(id);\n      } else {\n        setInternalActive(id);\n      }\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          `\n            overflow-hidden rounded-berget-sm border\n            border-berget-brand-granite-700 bg-berget-brand-granite-800\n            shadow-berget-md\n          `,\n          className,\n        )}\n        {...props}\n      >\n        {/* Title bar */}\n        <div\n          className=\"\n            flex items-center gap-2 border-b border-berget-brand-granite-700\n            bg-berget-brand-granite-900 px-4 py-3\n          \"\n        >\n          <div className=\"flex shrink-0 items-center gap-2\">\n            <div className=\"size-3 rounded-full bg-berget-brand-muscaria-400\" />\n            <div className=\"size-3 rounded-full bg-berget-brand-chanterelle-200\" />\n            <div className=\"size-3 rounded-full bg-berget-brand-moss-400\" />\n          </div>\n\n          {tabs && tabs.length > 0 ? (\n            <div className=\"ml-4 flex items-center gap-1\">\n              {tabs.map((tab) => (\n                <button\n                  key={tab.id}\n                  type=\"button\"\n                  onClick={() => handleTabChange(tab.id)}\n                  className={cn(\n                    'cursor-pointer px-3 py-1 text-sm transition-colors',\n                    currentTab === tab.id\n                      ? `\n                        rounded-berget-xs bg-white/10 font-medium\n                        text-berget-foreground\n                      `\n                      : `\n                        rounded-sm font-medium text-berget-muted-foreground\n                        hover:text-berget-foreground\n                      `,\n                  )}\n                >\n                  {tab.label}\n                </button>\n              ))}\n            </div>\n          ) : (\n            <span className=\"ml-4 font-mono text-sm text-berget-brand-moss-400\">{title}</span>\n          )}\n        </div>\n\n        {/* Content area */}\n        <div>{children}</div>\n      </div>\n    );\n  },\n);\n\nWindowFrame.displayName = 'WindowFrame';\n"],"mappings":";;;;;;AAsBA,MAAa,cAAc,MAAM,YAC9B,EAAE,QAAQ,UAAU,MAAM,WAAW,aAAa,UAAU,WAAW,GAAG,SAAS,QAAQ;CAC1F,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,OAAO,EAAE,EAAE,MAAM,EAAE;CACxE,MAAM,aAAa,aAAa;CAEhC,MAAM,mBAAmB,OAAe;EACtC,IAAI,aACF,YAAY,EAAE;OAEd,kBAAkB,EAAE;CAExB;CAEA,OACE,qBAAC,OAAD;EACO;EACL,WAAW,GACT;;;;aAKA,SACF;EACA,GAAI;EAVN,UAAA,CAaE,qBAAC,OAAD;GACE,WAAU;GADZ,UAAA,CAME,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,oBAAC,OAAD,EAAK,WAAU,mDAAoD,CAAA;KACnE,oBAAC,OAAD,EAAK,WAAU,sDAAuD,CAAA;KACtE,oBAAC,OAAD,EAAK,WAAU,+CAAgD,CAAA;IAC5D;GAEJ,CAAA,GAAA,QAAQ,KAAK,SAAS,IACrB,oBAAC,OAAD;IAAK,WAAU;IACZ,UAAA,KAAK,KAAK,QACT,oBAAC,UAAD;KAEE,MAAK;KACL,eAAe,gBAAgB,IAAI,EAAE;KACrC,WAAW,GACT,sDACA,eAAe,IAAI,KACf;;;0BAIA;;;uBAIN;KAEC,UAAA,IAAI;IACC,GAjBD,IAAI,EAiBH,CACT;GACE,CAAA,IAEL,oBAAC,QAAD;IAAM,WAAU;IAAqD,UAAA;GAAY,CAAA,CAEhF;EAGL,CAAA,GAAA,oBAAC,OAAD,EAAM,SAAc,CAAA,CACjB;;AAET,CACF;AAEA,YAAY,cAAc"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bergetai/ui",
-  "version": "0.16.0",
+  "version": "0.16.1",
   "description": "Berget Design System - Scandinavian-inspired design system with console aesthetic",
   "type": "module",
   "license": "MIT",