@bergetai/ui 0.16.0 → 0.16.2

package/dist/components/table/Table.mjs

@@ -12,7 +12,10 @@ const Table = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
 Table.displayName = "Table";
 const TableHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(TableHeader$1, {
 	ref,
-	className: cn("[&_tr]:border-b border-berget-table-border", className),
+	className: cn(`
+        border-berget-table-border
+        [&_tr]:border-b
+      `, className),
 	...props
 }));
 TableHeader.displayName = "TableHeader";
@@ -24,25 +27,39 @@ const TableBody = React.forwardRef(({ className, ...props }, ref) => /* @__PURE_
 TableBody.displayName = "TableBody";
 const TableFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(TableFooter$1, {
 	ref,
-	className: cn("border-t border-berget-table-border bg-berget-table-footer-bg font-medium [&>tr]:last:border-0", className),
+	className: cn(`
+        border-t border-berget-table-border bg-berget-table-footer-bg
+        font-medium
+        [&>tr]:last:border-0
+      `, className),
 	...props
 }));
 TableFooter.displayName = "TableFooter";
 const TableRow = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(TableRow$1, {
 	ref,
-	className: cn("border-b border-berget-table-border transition-colors hover:bg-berget-table-row-hover data-[state=selected]:bg-berget-table-row-selected", className),
+	className: cn(`
+          border-b border-berget-table-border transition-colors
+          hover:bg-berget-table-row-hover
+          data-[state=selected]:bg-berget-table-row-selected
+        `, className),
 	...props
 }));
 TableRow.displayName = "TableRow";
 const TableHead = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(TableHead$1, {
 	ref,
-	className: cn("h-12 px-4 text-left align-middle font-medium text-berget-table-head-text [&:has([role=checkbox])]:pr-0", className),
+	className: cn(`
+        h-12 px-4 text-left align-middle font-medium text-berget-table-head-text
+        [&:has([role=checkbox])]:pr-0
+      `, className),
 	...props
 }));
 TableHead.displayName = "TableHead";
 const TableCell = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(TableCell$1, {
 	ref,
-	className: cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className),
+	className: cn(`
+        p-4 align-middle
+        [&:has([role=checkbox])]:pr-0
+      `, className),
 	...props
 }));
 TableCell.displayName = "TableCell";

package/dist/components/table/Table.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Table.mjs","names":["TablePrimitive","TableHeaderPrimitive","TableBodyPrimitive","TableFooterPrimitive","TableRowPrimitive","TableHeadPrimitive","TableCellPrimitive","TableCaptionPrimitive"],"sources":["../../../src/components/table/Table.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cn } from '../../lib/utils';\nimport {\n  Table as TablePrimitive,\n  TableHeader as TableHeaderPrimitive,\n  TableBody as TableBodyPrimitive,\n  TableFooter as TableFooterPrimitive,\n  TableHead as TableHeadPrimitive,\n  TableRow as TableRowPrimitive,\n  TableCell as TableCellPrimitive,\n  TableCaption as TableCaptionPrimitive,\n} from '../../primitives/table';\n\nconst Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(\n  ({ className, ...props }, ref) => <TablePrimitive ref={ref} className={className} {...props} />,\n);\nTable.displayName = 'Table';\n\nconst TableHeader = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <TableHeaderPrimitive\n    ref={ref}\n    className={cn('[&_tr]:border-b border-berget-table-border', className)}\n    {...props}\n  />\n));\nTableHeader.displayName = 'TableHeader';\n\nconst TableBody = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <TableBodyPrimitive\n    ref={ref}\n    className={cn('[&_tr:last-child]:border-0', className)}\n    {...props}\n  />\n));\nTableBody.displayName = 'TableBody';\n\nconst TableFooter = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <TableFooterPrimitive\n    ref={ref}\n    className={cn(\n      'border-t border-berget-table-border bg-berget-table-footer-bg font-medium [&>tr]:last:border-0',\n      className,\n    )}\n    {...props}\n  />\n));\nTableFooter.displayName = 'TableFooter';\n\nconst TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(\n  ({ className, ...props }, ref) => (\n    <TableRowPrimitive\n      ref={ref}\n      className={cn(\n        'border-b border-berget-table-border transition-colors hover:bg-berget-table-row-hover data-[state=selected]:bg-berget-table-row-selected',\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nTableRow.displayName = 'TableRow';\n\nconst TableHead = React.forwardRef<\n  HTMLTableCellElement,\n  React.ThHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n  <TableHeadPrimitive\n    ref={ref}\n    className={cn(\n      'h-12 px-4 text-left align-middle font-medium text-berget-table-head-text [&:has([role=checkbox])]:pr-0',\n      className,\n    )}\n    {...props}\n  />\n));\nTableHead.displayName = 'TableHead';\n\nconst TableCell = React.forwardRef<\n  HTMLTableCellElement,\n  React.TdHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n  <TableCellPrimitive\n    ref={ref}\n    className={cn('p-4 align-middle [&:has([role=checkbox])]:pr-0', className)}\n    {...props}\n  />\n));\nTableCell.displayName = 'TableCell';\n\nconst TableCaption = React.forwardRef<\n  HTMLTableCaptionElement,\n  React.HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n  <TableCaptionPrimitive\n    ref={ref}\n    className={cn('mt-4 text-sm text-berget-table-caption-text', className)}\n    {...props}\n  />\n));\nTableCaption.displayName = 'TableCaption';\n\nexport { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };\n"],"mappings":";;;;;;AAeA,MAAM,QAAQ,MAAM,YACjB,EAAE,WAAW,GAAG,SAAS,QAAQ,oBAACA,SAAD;CAAqB;CAAgB;CAAW,GAAI;AAAQ,CAAA,CAChG;AACA,MAAM,cAAc;AAEpB,MAAM,cAAc,MAAM,YAGvB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAACC,eAAD;CACO;CACL,WAAW,GAAG,8CAA8C,SAAS;CACrE,GAAI;AACL,CAAA,CACF;AACD,YAAY,cAAc;AAE1B,MAAM,YAAY,MAAM,YAGrB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAACC,aAAD;CACO;CACL,WAAW,GAAG,8BAA8B,SAAS;CACrD,GAAI;AACL,CAAA,CACF;AACD,UAAU,cAAc;AAExB,MAAM,cAAc,MAAM,YAGvB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAACC,eAAD;CACO;CACL,WAAW,GACT,kGACA,SACF;CACA,GAAI;AACL,CAAA,CACF;AACD,YAAY,cAAc;AAE1B,MAAM,WAAW,MAAM,YACpB,EAAE,WAAW,GAAG,SAAS,QACxB,oBAACC,YAAD;CACO;CACL,WAAW,GACT,4IACA,SACF;CACA,GAAI;AACL,CAAA,CAEL;AACA,SAAS,cAAc;AAEvB,MAAM,YAAY,MAAM,YAGrB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAACC,aAAD;CACO;CACL,WAAW,GACT,0GACA,SACF;CACA,GAAI;AACL,CAAA,CACF;AACD,UAAU,cAAc;AAExB,MAAM,YAAY,MAAM,YAGrB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAACC,aAAD;CACO;CACL,WAAW,GAAG,kDAAkD,SAAS;CACzE,GAAI;AACL,CAAA,CACF;AACD,UAAU,cAAc;AAExB,MAAM,eAAe,MAAM,YAGxB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAACC,gBAAD;CACO;CACL,WAAW,GAAG,+CAA+C,SAAS;CACtE,GAAI;AACL,CAAA,CACF;AACD,aAAa,cAAc"}
+{"version":3,"file":"Table.mjs","names":["TablePrimitive","TableHeaderPrimitive","TableBodyPrimitive","TableFooterPrimitive","TableRowPrimitive","TableHeadPrimitive","TableCellPrimitive","TableCaptionPrimitive"],"sources":["../../../src/components/table/Table.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cn } from '../../lib/utils';\nimport {\n  Table as TablePrimitive,\n  TableHeader as TableHeaderPrimitive,\n  TableBody as TableBodyPrimitive,\n  TableFooter as TableFooterPrimitive,\n  TableHead as TableHeadPrimitive,\n  TableRow as TableRowPrimitive,\n  TableCell as TableCellPrimitive,\n  TableCaption as TableCaptionPrimitive,\n} from '../../primitives/table';\n\nconst Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(\n  ({ className, ...props }, ref) => <TablePrimitive ref={ref} className={className} {...props} />,\n);\nTable.displayName = 'Table';\n\nconst TableHeader = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <TableHeaderPrimitive\n    ref={ref}\n    className={cn(\n      `\n        border-berget-table-border\n        [&_tr]:border-b\n      `,\n      className,\n    )}\n    {...props}\n  />\n));\nTableHeader.displayName = 'TableHeader';\n\nconst TableBody = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <TableBodyPrimitive\n    ref={ref}\n    className={cn('[&_tr:last-child]:border-0', className)}\n    {...props}\n  />\n));\nTableBody.displayName = 'TableBody';\n\nconst TableFooter = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <TableFooterPrimitive\n    ref={ref}\n    className={cn(\n      `\n        border-t border-berget-table-border bg-berget-table-footer-bg\n        font-medium\n        [&>tr]:last:border-0\n      `,\n      className,\n    )}\n    {...props}\n  />\n));\nTableFooter.displayName = 'TableFooter';\n\nconst TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(\n  ({ className, ...props }, ref) => (\n    <TableRowPrimitive\n      ref={ref}\n      className={cn(\n        `\n          border-b border-berget-table-border transition-colors\n          hover:bg-berget-table-row-hover\n          data-[state=selected]:bg-berget-table-row-selected\n        `,\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nTableRow.displayName = 'TableRow';\n\nconst TableHead = React.forwardRef<\n  HTMLTableCellElement,\n  React.ThHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n  <TableHeadPrimitive\n    ref={ref}\n    className={cn(\n      `\n        h-12 px-4 text-left align-middle font-medium text-berget-table-head-text\n        [&:has([role=checkbox])]:pr-0\n      `,\n      className,\n    )}\n    {...props}\n  />\n));\nTableHead.displayName = 'TableHead';\n\nconst TableCell = React.forwardRef<\n  HTMLTableCellElement,\n  React.TdHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n  <TableCellPrimitive\n    ref={ref}\n    className={cn(\n      `\n        p-4 align-middle\n        [&:has([role=checkbox])]:pr-0\n      `,\n      className,\n    )}\n    {...props}\n  />\n));\nTableCell.displayName = 'TableCell';\n\nconst TableCaption = React.forwardRef<\n  HTMLTableCaptionElement,\n  React.HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n  <TableCaptionPrimitive\n    ref={ref}\n    className={cn('mt-4 text-sm text-berget-table-caption-text', className)}\n    {...props}\n  />\n));\nTableCaption.displayName = 'TableCaption';\n\nexport { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };\n"],"mappings":";;;;;;AAeA,MAAM,QAAQ,MAAM,YACjB,EAAE,WAAW,GAAG,SAAS,QAAQ,oBAACA,SAAD;CAAqB;CAAgB;CAAW,GAAI;AAAQ,CAAA,CAChG;AACA,MAAM,cAAc;AAEpB,MAAM,cAAc,MAAM,YAGvB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAACC,eAAD;CACO;CACL,WAAW,GACT;;;SAIA,SACF;CACA,GAAI;AACL,CAAA,CACF;AACD,YAAY,cAAc;AAE1B,MAAM,YAAY,MAAM,YAGrB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAACC,aAAD;CACO;CACL,WAAW,GAAG,8BAA8B,SAAS;CACrD,GAAI;AACL,CAAA,CACF;AACD,UAAU,cAAc;AAExB,MAAM,cAAc,MAAM,YAGvB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAACC,eAAD;CACO;CACL,WAAW,GACT;;;;SAKA,SACF;CACA,GAAI;AACL,CAAA,CACF;AACD,YAAY,cAAc;AAE1B,MAAM,WAAW,MAAM,YACpB,EAAE,WAAW,GAAG,SAAS,QACxB,oBAACC,YAAD;CACO;CACL,WAAW,GACT;;;;WAKA,SACF;CACA,GAAI;AACL,CAAA,CAEL;AACA,SAAS,cAAc;AAEvB,MAAM,YAAY,MAAM,YAGrB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAACC,aAAD;CACO;CACL,WAAW,GACT;;;SAIA,SACF;CACA,GAAI;AACL,CAAA,CACF;AACD,UAAU,cAAc;AAExB,MAAM,YAAY,MAAM,YAGrB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAACC,aAAD;CACO;CACL,WAAW,GACT;;;SAIA,SACF;CACA,GAAI;AACL,CAAA,CACF;AACD,UAAU,cAAc;AAExB,MAAM,eAAe,MAAM,YAGxB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAACC,gBAAD;CACO;CACL,WAAW,GAAG,+CAA+C,SAAS;CACtE,GAAI;AACL,CAAA,CACF;AACD,aAAa,cAAc"}

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.2",
   "description": "Berget Design System - Scandinavian-inspired design system with console aesthetic",
   "type": "module",
   "license": "MIT",