@bergetai/ui 0.15.0 → 0.16.1

package/dist/components/list/List.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"List.cjs","names":["React","cn","Divider","Icon","Check","Typography"],"sources":["../../../src/components/list/List.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cn } from '../../lib/utils';\nimport { Icon } from '../icon/Icon';\nimport { Divider } from '../divider';\nimport { Typography } from '../typography';\nimport { Check } from 'lucide-react';\n\nexport interface ListProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n}\n\nconst List = React.forwardRef<HTMLDivElement, ListProps>(\n  ({ className, children, ...props }, ref) => {\n    const childrenArray = React.Children.toArray(children);\n    return (\n      <div ref={ref} className={cn('flex flex-col', className)} {...props}>\n        {childrenArray.map((child, index) => (\n          <React.Fragment key={index}>\n            {child}\n            {index < childrenArray.length - 1 && <Divider variant=\"subtle\" />}\n          </React.Fragment>\n        ))}\n      </div>\n    );\n  },\n);\nList.displayName = 'List';\n\nexport interface ListItemProps extends React.HTMLAttributes<HTMLDivElement> {\n  icon?: React.ReactNode;\n  children: React.ReactNode;\n  interactive?: boolean;\n}\n\nconst ListItem = React.forwardRef<HTMLDivElement, ListItemProps>(\n  ({ className, icon, children, interactive = true, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        'flex items-center gap-4 px-4 py-3 sm:px-6 sm:py-4',\n        interactive && 'transition-all duration-200 hover:bg-berget-surface-hover cursor-pointer',\n        className,\n      )}\n      {...props}\n    >\n      {icon && <div className=\"flex-shrink-0 flex items-center justify-center\">{icon}</div>}\n      <div className=\"flex-1 min-w-0\">{children}</div>\n    </div>\n  ),\n);\nListItem.displayName = 'ListItem';\n\nexport interface ListHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n}\n\nconst ListHeader = React.forwardRef<HTMLDivElement, ListHeaderProps>(\n  ({ className, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn('px-4 py-2 sm:px-6 sm:py-3 text-sm text-muted-foreground', className)}\n      {...props}\n    >\n      {children}\n    </div>\n  ),\n);\nListHeader.displayName = 'ListHeader';\n\nexport interface FeatureListProps extends React.HTMLAttributes<HTMLUListElement> {\n  items: string[];\n  variant?: 'bullet' | 'checkmark';\n}\n\nconst FeatureList = React.forwardRef<HTMLUListElement, FeatureListProps>(\n  ({ items, variant = 'bullet', className, ...props }, ref) => {\n    return (\n      <ul ref={ref} className={cn('flex flex-col gap-fluid-md', className)} {...props}>\n        {items.map((item, index) => (\n          <li key={index} className=\"flex items-start gap-fluid-md\">\n            {variant === 'bullet' ? (\n              <span className=\"w-1.5 h-1.5 rounded-full bg-berget-icon-muted flex-shrink-0 mt-2\" />\n            ) : (\n              <div className=\"flex-shrink-0 mt-0.5\">\n                <Icon icon={Check} size={24} className=\"text-berget-logo-light\" />\n              </div>\n            )}\n            <Typography variant=\"body\" color=\"muted\">\n              {item}\n            </Typography>\n          </li>\n        ))}\n      </ul>\n    );\n  },\n);\nFeatureList.displayName = 'FeatureList';\n\nexport { List, ListItem, ListHeader, FeatureList };\n"],"mappings":";;;;;;;;;;;AAaA,MAAM,OAAOA,MAAM,YAChB,EAAE,WAAW,UAAU,GAAG,SAAS,QAAQ;CAC1C,MAAM,gBAAgBA,MAAM,SAAS,QAAQ,QAAQ;CACrD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAU;EAAK,WAAWC,cAAAA,GAAG,iBAAiB,SAAS;EAAG,GAAI;EAC3D,UAAA,cAAc,KAAK,OAAO,UACzB,iBAAA,GAAA,kBAAA,KAAA,CAACD,MAAM,UAAP,EAAA,UAAA,CACG,OACA,QAAQ,cAAc,SAAS,KAAK,iBAAA,GAAA,kBAAA,IAAA,CAACE,gBAAAA,SAAD,EAAS,SAAQ,SAAU,CAAA,CAClD,EAAA,GAHK,KAGL,CACjB;CACE,CAAA;AAET,CACF;AACA,KAAK,cAAc;AAQnB,MAAM,WAAWF,MAAM,YACpB,EAAE,WAAW,MAAM,UAAU,cAAc,MAAM,GAAG,SAAS,QAC5D,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;CACO;CACL,WAAWC,cAAAA,GACT,qDACA,eAAe,4EACf,SACF;CACA,GAAI;CAPN,UAAA,CASG,QAAQ,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,WAAU;EAAkD,UAAA;CAAU,CAAA,GACpF,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,WAAU;EAAkB;CAAc,CAAA,CAC5C;AAET,CAAA,CAAA;AACA,SAAS,cAAc;AAMvB,MAAM,aAAaD,MAAM,YACtB,EAAE,WAAW,UAAU,GAAG,SAAS,QAClC,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;CACO;CACL,WAAWC,cAAAA,GAAG,2DAA2D,SAAS;CAClF,GAAI;CAEH;AACE,CAAA,CAET;AACA,WAAW,cAAc;AAOzB,MAAM,cAAcD,MAAM,YACvB,EAAE,OAAO,UAAU,UAAU,WAAW,GAAG,SAAS,QAAQ;CAC3D,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;EAAS;EAAK,WAAWC,cAAAA,GAAG,8BAA8B,SAAS;EAAG,GAAI;EACvE,UAAA,MAAM,KAAK,MAAM,UAChB,iBAAA,GAAA,kBAAA,KAAA,CAAC,MAAD;GAAgB,WAAU;GAA1B,UAAA,CACG,YAAY,WACX,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD,EAAM,WAAU,mEAAoE,CAAA,IAEpF,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IAAK,WAAU;IACb,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACE,aAAAA,MAAD;KAAM,MAAMC,aAAAA;KAAO,MAAM;KAAI,WAAU;IAA0B,CAAA;GAC9D,CAAA,GAEP,iBAAA,GAAA,kBAAA,IAAA,CAACC,mBAAAA,YAAD;IAAY,SAAQ;IAAO,OAAM;IAC9B,UAAA;GACS,CAAA,CACV;EAXK,GAAA,KAWL,CACL;CACC,CAAA;AAER,CACF;AACA,YAAY,cAAc"}
+{"version":3,"file":"List.cjs","names":["React","cn","Divider","Icon","Check","Typography"],"sources":["../../../src/components/list/List.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cn } from '../../lib/utils';\nimport { Icon } from '../icon/Icon';\nimport { Divider } from '../divider';\nimport { Typography } from '../typography';\nimport { Check } from 'lucide-react';\n\nexport interface ListProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n}\n\nconst List = React.forwardRef<HTMLDivElement, ListProps>(\n  ({ className, children, ...props }, ref) => {\n    const childrenArray = React.Children.toArray(children);\n    return (\n      <div ref={ref} className={cn('flex flex-col', className)} {...props}>\n        {childrenArray.map((child, index) => (\n          <React.Fragment key={index}>\n            {child}\n            {index < childrenArray.length - 1 && <Divider variant=\"subtle\" />}\n          </React.Fragment>\n        ))}\n      </div>\n    );\n  },\n);\nList.displayName = 'List';\n\nexport interface ListItemProps extends React.HTMLAttributes<HTMLDivElement> {\n  icon?: React.ReactNode;\n  children: React.ReactNode;\n  interactive?: boolean;\n}\n\nconst ListItem = React.forwardRef<HTMLDivElement, ListItemProps>(\n  ({ className, icon, children, interactive = true, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        `\n          flex items-center gap-4 px-4 py-3\n          sm:px-6 sm:py-4\n        `,\n        interactive &&\n          `\n            cursor-pointer transition-all duration-200\n            hover:bg-berget-surface-hover\n          `,\n        className,\n      )}\n      {...props}\n    >\n      {icon && <div className=\"flex shrink-0 items-center justify-center\">{icon}</div>}\n      <div className=\"min-w-0 flex-1\">{children}</div>\n    </div>\n  ),\n);\nListItem.displayName = 'ListItem';\n\nexport interface ListHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n}\n\nconst ListHeader = React.forwardRef<HTMLDivElement, ListHeaderProps>(\n  ({ className, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        `\n          px-4 py-2 text-sm text-muted-foreground\n          sm:px-6 sm:py-3\n        `,\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  ),\n);\nListHeader.displayName = 'ListHeader';\n\nexport interface FeatureListProps extends React.HTMLAttributes<HTMLUListElement> {\n  items: string[];\n  variant?: 'bullet' | 'checkmark';\n}\n\nconst FeatureList = React.forwardRef<HTMLUListElement, FeatureListProps>(\n  ({ items, variant = 'bullet', className, ...props }, ref) => {\n    return (\n      <ul ref={ref} className={cn('flex flex-col gap-fluid-md', className)} {...props}>\n        {items.map((item, index) => (\n          <li key={index} className=\"flex items-start gap-fluid-md\">\n            {variant === 'bullet' ? (\n              <span\n                className=\"\n                  mt-2 size-1.5 shrink-0 rounded-full bg-berget-icon-muted\n                \"\n              />\n            ) : (\n              <div className=\"mt-0.5 shrink-0\">\n                <Icon icon={Check} size={24} className=\"text-berget-logo-light\" />\n              </div>\n            )}\n            <Typography variant=\"body\" color=\"muted\">\n              {item}\n            </Typography>\n          </li>\n        ))}\n      </ul>\n    );\n  },\n);\nFeatureList.displayName = 'FeatureList';\n\nexport { List, ListItem, ListHeader, FeatureList };\n"],"mappings":";;;;;;;;;;;AAaA,MAAM,OAAOA,MAAM,YAChB,EAAE,WAAW,UAAU,GAAG,SAAS,QAAQ;CAC1C,MAAM,gBAAgBA,MAAM,SAAS,QAAQ,QAAQ;CACrD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAU;EAAK,WAAWC,cAAAA,GAAG,iBAAiB,SAAS;EAAG,GAAI;EAC3D,UAAA,cAAc,KAAK,OAAO,UACzB,iBAAA,GAAA,kBAAA,KAAA,CAACD,MAAM,UAAP,EAAA,UAAA,CACG,OACA,QAAQ,cAAc,SAAS,KAAK,iBAAA,GAAA,kBAAA,IAAA,CAACE,gBAAAA,SAAD,EAAS,SAAQ,SAAU,CAAA,CAClD,EAAA,GAHK,KAGL,CACjB;CACE,CAAA;AAET,CACF;AACA,KAAK,cAAc;AAQnB,MAAM,WAAWF,MAAM,YACpB,EAAE,WAAW,MAAM,UAAU,cAAc,MAAM,GAAG,SAAS,QAC5D,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;CACO;CACL,WAAWC,cAAAA,GACT;;;WAIA,eACE;;;aAIF,SACF;CACA,GAAI;CAdN,UAAA,CAgBG,QAAQ,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,WAAU;EAA6C,UAAA;CAAU,CAAA,GAC/E,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,WAAU;EAAkB;CAAc,CAAA,CAC5C;AAET,CAAA,CAAA;AACA,SAAS,cAAc;AAMvB,MAAM,aAAaD,MAAM,YACtB,EAAE,WAAW,UAAU,GAAG,SAAS,QAClC,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;CACO;CACL,WAAWC,cAAAA,GACT;;;WAIA,SACF;CACA,GAAI;CAEH;AACE,CAAA,CAET;AACA,WAAW,cAAc;AAOzB,MAAM,cAAcD,MAAM,YACvB,EAAE,OAAO,UAAU,UAAU,WAAW,GAAG,SAAS,QAAQ;CAC3D,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;EAAS;EAAK,WAAWC,cAAAA,GAAG,8BAA8B,SAAS;EAAG,GAAI;EACvE,UAAA,MAAM,KAAK,MAAM,UAChB,iBAAA,GAAA,kBAAA,KAAA,CAAC,MAAD;GAAgB,WAAU;GAA1B,UAAA,CACG,YAAY,WACX,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD,EACE,WAAU,iGAGX,CAAA,IAED,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IAAK,WAAU;IACb,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACE,aAAAA,MAAD;KAAM,MAAMC,aAAAA;KAAO,MAAM;KAAI,WAAU;IAA0B,CAAA;GAC9D,CAAA,GAEP,iBAAA,GAAA,kBAAA,IAAA,CAACC,mBAAAA,YAAD;IAAY,SAAQ;IAAO,OAAM;IAC9B,UAAA;GACS,CAAA,CACV;EAfK,GAAA,KAeL,CACL;CACC,CAAA;AAER,CACF;AACA,YAAY,cAAc"}

package/dist/components/list/List.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"List.d.cts","names":[],"sources":["../../../src/components/list/List.tsx"],"mappings":";;iBASiB,kBAAkB,MAAM,eAAe;EACtD,UAAU,MAAM;;cAGZ,MAAI,MAAA,0BAAA,YAAA,MAAA,cAAA;iBAiBO,sBAAsB,MAAM,eAAe;EAC1D,OAAO,MAAM;EACb,UAAU,MAAM;EAChB;;cAGI,UAAQ,MAAA,0BAAA,gBAAA,MAAA,cAAA;iBAkBG,wBAAwB,MAAM,eAAe;EAC5D,UAAU,MAAM;;cAGZ,YAAU,MAAA,0BAAA,kBAAA,MAAA,cAAA;iBAaC,yBAAyB,MAAM,eAAe;EAC7D;EACA;;cAGI,aAAW,MAAA,0BAAA,mBAAA,MAAA,cAAA"}
+{"version":3,"file":"List.d.cts","names":[],"sources":["../../../src/components/list/List.tsx"],"mappings":";;iBASiB,kBAAkB,MAAM,eAAe;EACtD,UAAU,MAAM;;cAGZ,MAAI,MAAA,0BAAA,YAAA,MAAA,cAAA;iBAiBO,sBAAsB,MAAM,eAAe;EAC1D,OAAO,MAAM;EACb,UAAU,MAAM;EAChB;;cAGI,UAAQ,MAAA,0BAAA,gBAAA,MAAA,cAAA;iBAyBG,wBAAwB,MAAM,eAAe;EAC5D,UAAU,MAAM;;cAGZ,YAAU,MAAA,0BAAA,kBAAA,MAAA,cAAA;iBAmBC,yBAAyB,MAAM,eAAe;EAC7D;EACA;;cAGI,aAAW,MAAA,0BAAA,mBAAA,MAAA,cAAA"}

package/dist/components/list/List.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"List.d.mts","names":[],"sources":["../../../src/components/list/List.tsx"],"mappings":";;iBASiB,kBAAkB,MAAM,eAAe;EACtD,UAAU,MAAM;;cAGZ,MAAI,MAAA,0BAAA,YAAA,MAAA,cAAA;iBAiBO,sBAAsB,MAAM,eAAe;EAC1D,OAAO,MAAM;EACb,UAAU,MAAM;EAChB;;cAGI,UAAQ,MAAA,0BAAA,gBAAA,MAAA,cAAA;iBAkBG,wBAAwB,MAAM,eAAe;EAC5D,UAAU,MAAM;;cAGZ,YAAU,MAAA,0BAAA,kBAAA,MAAA,cAAA;iBAaC,yBAAyB,MAAM,eAAe;EAC7D;EACA;;cAGI,aAAW,MAAA,0BAAA,mBAAA,MAAA,cAAA"}
+{"version":3,"file":"List.d.mts","names":[],"sources":["../../../src/components/list/List.tsx"],"mappings":";;iBASiB,kBAAkB,MAAM,eAAe;EACtD,UAAU,MAAM;;cAGZ,MAAI,MAAA,0BAAA,YAAA,MAAA,cAAA;iBAiBO,sBAAsB,MAAM,eAAe;EAC1D,OAAO,MAAM;EACb,UAAU,MAAM;EAChB;;cAGI,UAAQ,MAAA,0BAAA,gBAAA,MAAA,cAAA;iBAyBG,wBAAwB,MAAM,eAAe;EAC5D,UAAU,MAAM;;cAGZ,YAAU,MAAA,0BAAA,kBAAA,MAAA,cAAA;iBAmBC,yBAAyB,MAAM,eAAe;EAC7D;EACA;;cAGI,aAAW,MAAA,0BAAA,mBAAA,MAAA,cAAA"}

package/dist/components/list/List.mjs

@@ -19,20 +19,29 @@ const List = React.forwardRef(({ className, children, ...props }, ref) => {
 List.displayName = "List";
 const ListItem = React.forwardRef(({ className, icon, children, interactive = true, ...props }, ref) => /* @__PURE__ */ jsxs("div", {
 	ref,
-	className: cn("flex items-center gap-4 px-4 py-3 sm:px-6 sm:py-4", interactive && "transition-all duration-200 hover:bg-berget-surface-hover cursor-pointer", className),
+	className: cn(`
+          flex items-center gap-4 px-4 py-3
+          sm:px-6 sm:py-4
+        `, interactive && `
+            cursor-pointer transition-all duration-200
+            hover:bg-berget-surface-hover
+          `, className),
 	...props,
 	children: [icon && /* @__PURE__ */ jsx("div", {
-		className: "flex-shrink-0 flex items-center justify-center",
+		className: "flex shrink-0 items-center justify-center",
 		children: icon
 	}), /* @__PURE__ */ jsx("div", {
-		className: "flex-1 min-w-0",
+		className: "min-w-0 flex-1",
 		children
 	})]
 }));
 ListItem.displayName = "ListItem";
 const ListHeader = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx("div", {
 	ref,
-	className: cn("px-4 py-2 sm:px-6 sm:py-3 text-sm text-muted-foreground", className),
+	className: cn(`
+          px-4 py-2 text-sm text-muted-foreground
+          sm:px-6 sm:py-3
+        `, className),
 	...props,
 	children
 }));
@@ -44,8 +53,8 @@ const FeatureList = React.forwardRef(({ items, variant = "bullet", className, ..
 		...props,
 		children: items.map((item, index) => /* @__PURE__ */ jsxs("li", {
 			className: "flex items-start gap-fluid-md",
-			children: [variant === "bullet" ? /* @__PURE__ */ jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-berget-icon-muted flex-shrink-0 mt-2" }) : /* @__PURE__ */ jsx("div", {
-				className: "flex-shrink-0 mt-0.5",
+			children: [variant === "bullet" ? /* @__PURE__ */ jsx("span", { className: "\n                  mt-2 size-1.5 shrink-0 rounded-full bg-berget-icon-muted\n                " }) : /* @__PURE__ */ jsx("div", {
+				className: "mt-0.5 shrink-0",
 				children: /* @__PURE__ */ jsx(Icon, {
 					icon: Check,
 					size: 24,

package/dist/components/list/List.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"List.mjs","names":[],"sources":["../../../src/components/list/List.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cn } from '../../lib/utils';\nimport { Icon } from '../icon/Icon';\nimport { Divider } from '../divider';\nimport { Typography } from '../typography';\nimport { Check } from 'lucide-react';\n\nexport interface ListProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n}\n\nconst List = React.forwardRef<HTMLDivElement, ListProps>(\n  ({ className, children, ...props }, ref) => {\n    const childrenArray = React.Children.toArray(children);\n    return (\n      <div ref={ref} className={cn('flex flex-col', className)} {...props}>\n        {childrenArray.map((child, index) => (\n          <React.Fragment key={index}>\n            {child}\n            {index < childrenArray.length - 1 && <Divider variant=\"subtle\" />}\n          </React.Fragment>\n        ))}\n      </div>\n    );\n  },\n);\nList.displayName = 'List';\n\nexport interface ListItemProps extends React.HTMLAttributes<HTMLDivElement> {\n  icon?: React.ReactNode;\n  children: React.ReactNode;\n  interactive?: boolean;\n}\n\nconst ListItem = React.forwardRef<HTMLDivElement, ListItemProps>(\n  ({ className, icon, children, interactive = true, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        'flex items-center gap-4 px-4 py-3 sm:px-6 sm:py-4',\n        interactive && 'transition-all duration-200 hover:bg-berget-surface-hover cursor-pointer',\n        className,\n      )}\n      {...props}\n    >\n      {icon && <div className=\"flex-shrink-0 flex items-center justify-center\">{icon}</div>}\n      <div className=\"flex-1 min-w-0\">{children}</div>\n    </div>\n  ),\n);\nListItem.displayName = 'ListItem';\n\nexport interface ListHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n}\n\nconst ListHeader = React.forwardRef<HTMLDivElement, ListHeaderProps>(\n  ({ className, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn('px-4 py-2 sm:px-6 sm:py-3 text-sm text-muted-foreground', className)}\n      {...props}\n    >\n      {children}\n    </div>\n  ),\n);\nListHeader.displayName = 'ListHeader';\n\nexport interface FeatureListProps extends React.HTMLAttributes<HTMLUListElement> {\n  items: string[];\n  variant?: 'bullet' | 'checkmark';\n}\n\nconst FeatureList = React.forwardRef<HTMLUListElement, FeatureListProps>(\n  ({ items, variant = 'bullet', className, ...props }, ref) => {\n    return (\n      <ul ref={ref} className={cn('flex flex-col gap-fluid-md', className)} {...props}>\n        {items.map((item, index) => (\n          <li key={index} className=\"flex items-start gap-fluid-md\">\n            {variant === 'bullet' ? (\n              <span className=\"w-1.5 h-1.5 rounded-full bg-berget-icon-muted flex-shrink-0 mt-2\" />\n            ) : (\n              <div className=\"flex-shrink-0 mt-0.5\">\n                <Icon icon={Check} size={24} className=\"text-berget-logo-light\" />\n              </div>\n            )}\n            <Typography variant=\"body\" color=\"muted\">\n              {item}\n            </Typography>\n          </li>\n        ))}\n      </ul>\n    );\n  },\n);\nFeatureList.displayName = 'FeatureList';\n\nexport { List, ListItem, ListHeader, FeatureList };\n"],"mappings":";;;;;;;;;AAaA,MAAM,OAAO,MAAM,YAChB,EAAE,WAAW,UAAU,GAAG,SAAS,QAAQ;CAC1C,MAAM,gBAAgB,MAAM,SAAS,QAAQ,QAAQ;CACrD,OACE,oBAAC,OAAD;EAAU;EAAK,WAAW,GAAG,iBAAiB,SAAS;EAAG,GAAI;EAC3D,UAAA,cAAc,KAAK,OAAO,UACzB,qBAAC,MAAM,UAAP,EAAA,UAAA,CACG,OACA,QAAQ,cAAc,SAAS,KAAK,oBAAC,SAAD,EAAS,SAAQ,SAAU,CAAA,CAClD,EAAA,GAHK,KAGL,CACjB;CACE,CAAA;AAET,CACF;AACA,KAAK,cAAc;AAQnB,MAAM,WAAW,MAAM,YACpB,EAAE,WAAW,MAAM,UAAU,cAAc,MAAM,GAAG,SAAS,QAC5D,qBAAC,OAAD;CACO;CACL,WAAW,GACT,qDACA,eAAe,4EACf,SACF;CACA,GAAI;CAPN,UAAA,CASG,QAAQ,oBAAC,OAAD;EAAK,WAAU;EAAkD,UAAA;CAAU,CAAA,GACpF,oBAAC,OAAD;EAAK,WAAU;EAAkB;CAAc,CAAA,CAC5C;AAET,CAAA,CAAA;AACA,SAAS,cAAc;AAMvB,MAAM,aAAa,MAAM,YACtB,EAAE,WAAW,UAAU,GAAG,SAAS,QAClC,oBAAC,OAAD;CACO;CACL,WAAW,GAAG,2DAA2D,SAAS;CAClF,GAAI;CAEH;AACE,CAAA,CAET;AACA,WAAW,cAAc;AAOzB,MAAM,cAAc,MAAM,YACvB,EAAE,OAAO,UAAU,UAAU,WAAW,GAAG,SAAS,QAAQ;CAC3D,OACE,oBAAC,MAAD;EAAS;EAAK,WAAW,GAAG,8BAA8B,SAAS;EAAG,GAAI;EACvE,UAAA,MAAM,KAAK,MAAM,UAChB,qBAAC,MAAD;GAAgB,WAAU;GAA1B,UAAA,CACG,YAAY,WACX,oBAAC,QAAD,EAAM,WAAU,mEAAoE,CAAA,IAEpF,oBAAC,OAAD;IAAK,WAAU;IACb,UAAA,oBAAC,MAAD;KAAM,MAAM;KAAO,MAAM;KAAI,WAAU;IAA0B,CAAA;GAC9D,CAAA,GAEP,oBAAC,YAAD;IAAY,SAAQ;IAAO,OAAM;IAC9B,UAAA;GACS,CAAA,CACV;EAXK,GAAA,KAWL,CACL;CACC,CAAA;AAER,CACF;AACA,YAAY,cAAc"}
+{"version":3,"file":"List.mjs","names":[],"sources":["../../../src/components/list/List.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cn } from '../../lib/utils';\nimport { Icon } from '../icon/Icon';\nimport { Divider } from '../divider';\nimport { Typography } from '../typography';\nimport { Check } from 'lucide-react';\n\nexport interface ListProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n}\n\nconst List = React.forwardRef<HTMLDivElement, ListProps>(\n  ({ className, children, ...props }, ref) => {\n    const childrenArray = React.Children.toArray(children);\n    return (\n      <div ref={ref} className={cn('flex flex-col', className)} {...props}>\n        {childrenArray.map((child, index) => (\n          <React.Fragment key={index}>\n            {child}\n            {index < childrenArray.length - 1 && <Divider variant=\"subtle\" />}\n          </React.Fragment>\n        ))}\n      </div>\n    );\n  },\n);\nList.displayName = 'List';\n\nexport interface ListItemProps extends React.HTMLAttributes<HTMLDivElement> {\n  icon?: React.ReactNode;\n  children: React.ReactNode;\n  interactive?: boolean;\n}\n\nconst ListItem = React.forwardRef<HTMLDivElement, ListItemProps>(\n  ({ className, icon, children, interactive = true, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        `\n          flex items-center gap-4 px-4 py-3\n          sm:px-6 sm:py-4\n        `,\n        interactive &&\n          `\n            cursor-pointer transition-all duration-200\n            hover:bg-berget-surface-hover\n          `,\n        className,\n      )}\n      {...props}\n    >\n      {icon && <div className=\"flex shrink-0 items-center justify-center\">{icon}</div>}\n      <div className=\"min-w-0 flex-1\">{children}</div>\n    </div>\n  ),\n);\nListItem.displayName = 'ListItem';\n\nexport interface ListHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n}\n\nconst ListHeader = React.forwardRef<HTMLDivElement, ListHeaderProps>(\n  ({ className, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        `\n          px-4 py-2 text-sm text-muted-foreground\n          sm:px-6 sm:py-3\n        `,\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  ),\n);\nListHeader.displayName = 'ListHeader';\n\nexport interface FeatureListProps extends React.HTMLAttributes<HTMLUListElement> {\n  items: string[];\n  variant?: 'bullet' | 'checkmark';\n}\n\nconst FeatureList = React.forwardRef<HTMLUListElement, FeatureListProps>(\n  ({ items, variant = 'bullet', className, ...props }, ref) => {\n    return (\n      <ul ref={ref} className={cn('flex flex-col gap-fluid-md', className)} {...props}>\n        {items.map((item, index) => (\n          <li key={index} className=\"flex items-start gap-fluid-md\">\n            {variant === 'bullet' ? (\n              <span\n                className=\"\n                  mt-2 size-1.5 shrink-0 rounded-full bg-berget-icon-muted\n                \"\n              />\n            ) : (\n              <div className=\"mt-0.5 shrink-0\">\n                <Icon icon={Check} size={24} className=\"text-berget-logo-light\" />\n              </div>\n            )}\n            <Typography variant=\"body\" color=\"muted\">\n              {item}\n            </Typography>\n          </li>\n        ))}\n      </ul>\n    );\n  },\n);\nFeatureList.displayName = 'FeatureList';\n\nexport { List, ListItem, ListHeader, FeatureList };\n"],"mappings":";;;;;;;;;AAaA,MAAM,OAAO,MAAM,YAChB,EAAE,WAAW,UAAU,GAAG,SAAS,QAAQ;CAC1C,MAAM,gBAAgB,MAAM,SAAS,QAAQ,QAAQ;CACrD,OACE,oBAAC,OAAD;EAAU;EAAK,WAAW,GAAG,iBAAiB,SAAS;EAAG,GAAI;EAC3D,UAAA,cAAc,KAAK,OAAO,UACzB,qBAAC,MAAM,UAAP,EAAA,UAAA,CACG,OACA,QAAQ,cAAc,SAAS,KAAK,oBAAC,SAAD,EAAS,SAAQ,SAAU,CAAA,CAClD,EAAA,GAHK,KAGL,CACjB;CACE,CAAA;AAET,CACF;AACA,KAAK,cAAc;AAQnB,MAAM,WAAW,MAAM,YACpB,EAAE,WAAW,MAAM,UAAU,cAAc,MAAM,GAAG,SAAS,QAC5D,qBAAC,OAAD;CACO;CACL,WAAW,GACT;;;WAIA,eACE;;;aAIF,SACF;CACA,GAAI;CAdN,UAAA,CAgBG,QAAQ,oBAAC,OAAD;EAAK,WAAU;EAA6C,UAAA;CAAU,CAAA,GAC/E,oBAAC,OAAD;EAAK,WAAU;EAAkB;CAAc,CAAA,CAC5C;AAET,CAAA,CAAA;AACA,SAAS,cAAc;AAMvB,MAAM,aAAa,MAAM,YACtB,EAAE,WAAW,UAAU,GAAG,SAAS,QAClC,oBAAC,OAAD;CACO;CACL,WAAW,GACT;;;WAIA,SACF;CACA,GAAI;CAEH;AACE,CAAA,CAET;AACA,WAAW,cAAc;AAOzB,MAAM,cAAc,MAAM,YACvB,EAAE,OAAO,UAAU,UAAU,WAAW,GAAG,SAAS,QAAQ;CAC3D,OACE,oBAAC,MAAD;EAAS;EAAK,WAAW,GAAG,8BAA8B,SAAS;EAAG,GAAI;EACvE,UAAA,MAAM,KAAK,MAAM,UAChB,qBAAC,MAAD;GAAgB,WAAU;GAA1B,UAAA,CACG,YAAY,WACX,oBAAC,QAAD,EACE,WAAU,iGAGX,CAAA,IAED,oBAAC,OAAD;IAAK,WAAU;IACb,UAAA,oBAAC,MAAD;KAAM,MAAM;KAAO,MAAM;KAAI,WAAU;IAA0B,CAAA;GAC9D,CAAA,GAEP,oBAAC,YAAD;IAAY,SAAQ;IAAO,OAAM;IAC9B,UAAA;GACS,CAAA,CACV;EAfK,GAAA,KAeL,CACL;CACC,CAAA;AAER,CACF;AACA,YAAY,cAAc"}

package/dist/components/message/index.d.cts

@@ -0,0 +1,2 @@
+import { Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader } from "../../primitives/message.cjs";
+export { Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader };

package/dist/components/message/index.d.mts

@@ -0,0 +1,2 @@
+import { Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader } from "../../primitives/message.mjs";
+export { Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader };

package/dist/components/message-scroller/index.d.cts

@@ -0,0 +1,2 @@
+import { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility } from "../../primitives/message-scroller.cjs";
+export { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport };

package/dist/components/message-scroller/index.d.mts

@@ -0,0 +1,2 @@
+import { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility } from "../../primitives/message-scroller.mjs";
+export { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport };

package/dist/components/model-card/ModelCard.cjs

@@ -35,17 +35,20 @@ const ModelCard = react.forwardRef(({ icon, provider, category, eyebrow, title,
 		...props,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Card.Card, {
 			variant: "filled",
-			className: "relative flex h-full flex-col bg-berget-card-filled-bg p-5 transition-all hover:bg-[color-mix(in_oklab,var(--berget-brand-granite-100)_5%,var(--berget-card-filled-bg))] sm:p-6",
+			className: "\n            relative flex h-full flex-col bg-berget-card-filled-bg p-5\n            transition-all\n            hover:bg-[color-mix(in_oklab,var(--berget-brand-granite-100)_5%,var(--berget-card-filled-bg))]\n            sm:p-6\n          ",
 			children: [
 				lifecycle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "absolute top-0 right-0 z-10 overflow-hidden rounded-bl-berget-sm",
+					className: "\n                absolute top-0 right-0 z-10 overflow-hidden rounded-bl-berget-sm\n              ",
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: require_utils.cn("inline-flex h-6 items-center whitespace-nowrap border-0! px-8 text-sm", lifecycleStyles[lifecycle]),
+						className: require_utils.cn(`
+                    inline-flex h-6 items-center border-0! px-8 text-sm
+                    whitespace-nowrap
+                  `, lifecycleStyles[lifecycle]),
 						children: lifecycleLabels[lifecycle]
 					})
 				}),
 				(icon || provider || category) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "flex h-12 w-12 shrink-0 items-center justify-center rounded-berget-xs border border-berget-border bg-white/5 text-berget-foreground",
+					className: "\n                flex size-12 shrink-0 items-center justify-center\n                rounded-berget-xs border border-berget-border bg-white/5\n                text-berget-foreground\n              ",
 					children: icon ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ModelLogo.ModelLogo, {
 						provider,
 						category
@@ -55,7 +58,7 @@ const ModelCard = react.forwardRef(({ icon, provider, category, eyebrow, title,
 					eyebrow && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
 						variant: "xs",
 						color: "muted",
-						className: "font-medium uppercase leading-none tracking-[0.25em]",
+						className: "leading-none font-medium tracking-[0.25em] uppercase",
 						children: eyebrow
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -64,7 +67,7 @@ const ModelCard = react.forwardRef(({ icon, provider, category, eyebrow, title,
 							as: "h3",
 							id: titleId,
 							variant: "h5",
-							className: "min-w-0 truncate whitespace-nowrap leading-tight",
+							className: "min-w-0 truncate leading-tight whitespace-nowrap",
 							style: { fontFeatureSettings: "normal" },
 							children: title
 						})
@@ -81,11 +84,11 @@ const ModelCard = react.forwardRef(({ icon, provider, category, eyebrow, title,
 					children: columns.map((col, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
 						variant: "xs",
 						color: "muted",
-						className: "leading-none",
+						className: "\n                    leading-none\n                  ",
 						children: col.label
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
 						variant: "body",
-						className: "tabular-nums leading-none",
+						className: "leading-none tabular-nums",
 						style: { fontFeatureSettings: "normal" },
 						children: col.value
 					})] }, i))
@@ -93,7 +96,7 @@ const ModelCard = react.forwardRef(({ icon, provider, category, eyebrow, title,
 				meta && meta.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
 					variant: "xs",
 					color: "muted",
-					className: "text-[0.65rem] uppercase tracking-[0.15em]",
+					className: "text-[0.65rem] tracking-[0.15em] uppercase",
 					children: meta.map((item, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [i > 0 && " ▪ ", item] }, i))
 				}),
 				children

package/dist/components/model-card/ModelCard.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ModelCard.cjs","names":["React","cn","Card","ModelLogo","Typography"],"sources":["../../../src/components/model-card/ModelCard.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cn } from '../../lib/utils';\nimport { Card } from '../card';\nimport { type ModelCategory, type ModelLogoProvider, ModelLogo } from '../model-logo';\nimport { Typography } from '../typography';\n\n/**\n * ModelCard — a whole-card link tile for presenting AI models in a grid:\n * provider mark, category eyebrow, model name, optional lifecycle tab,\n * per-unit price columns, and fine-print capability facts.\n *\n * Presentational only: all copy is passed in as props; the card itself\n * owns no strings and no domain types.\n */\n/** Lifecycle status shown as a corner tab on the card. */\nexport type ModelLifecycle = 'preview' | 'active' | 'deprecated';\n\nconst lifecycleLabels: Record<ModelLifecycle, string> = {\n  preview: 'Preview',\n  active: 'Active',\n  deprecated: 'Deprecated',\n};\n\n/** Per-status styling for the lifecycle tab (tint classes come from\n * index.css; deprecated uses the granite neutral). Brightens when the\n * card (`group`) is hovered. */\nconst lifecycleStyles: Record<ModelLifecycle, string> = {\n  preview: 'berget-tint berget-tint-warning',\n  active: 'berget-tint berget-tint-success',\n  deprecated: 'bg-berget-brand-granite-700 text-berget-muted-foreground',\n};\n\nexport type { ModelCategory, ModelLogoProvider };\n\nexport interface ModelCardProps extends Omit<React.ComponentProps<'a'>, 'title' | 'children'> {\n  /** Provider mark, rendered in a bordered square at the top of the card. */\n  icon?: React.ReactNode;\n  /**\n   * Model family for the icon square — resolved to a bundled brand mark\n   * (e.g. `'mistralai'`, `'moonshotai'`, `'berget'`). Ignored when `icon`\n   * is set.\n   */\n  provider?: string;\n  /** Fallback category for the icon square when no brand mark exists\n   * (maps to the `model_type` values from `GET /v1/models`). */\n  category?: ModelCategory;\n  /** Small category label above the title (rendered uppercase). */\n  eyebrow?: string;\n  /** The model name — rendered as an `h3` and truncated when too long. */\n  title: React.ReactNode;\n  /**\n   * Lifecycle status rendered as a corner tab: `preview` (yellow),\n   * `active` (green), `deprecated` (gray).\n   */\n  lifecycle?: ModelLifecycle;\n  /** Secondary line under the title, e.g. the provider name. */\n  description?: React.ReactNode;\n  /** Label-above-value columns, e.g. per-million-token input/output prices. */\n  columns?: { label: React.ReactNode; value: React.ReactNode }[];\n  /**\n   * Fine-print capability facts rendered in one uppercase row with\n   * square separators drawn by the card, e.g. ['Vision', '262K context'].\n   */\n  meta?: React.ReactNode[];\n  /** Link target for the whole card. */\n  href: string;\n  /** Opens the link in a new tab (adds `target`/`rel`). */\n  external?: boolean;\n  /** Extra content rendered at the bottom of the card. */\n  children?: React.ReactNode;\n}\n\nconst ModelCard = React.forwardRef<HTMLAnchorElement, ModelCardProps>(\n  (\n    {\n      icon,\n      provider,\n      category,\n      eyebrow,\n      title,\n      lifecycle,\n      description,\n      columns,\n      meta,\n      href,\n      external,\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const titleId = React.useId();\n\n    return (\n      <a\n        ref={ref}\n        href={href}\n        aria-labelledby={titleId}\n        {...(external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}\n        className={cn('group block', className)}\n        {...props}\n      >\n        <Card\n          variant=\"filled\"\n          className=\"relative flex h-full flex-col bg-berget-card-filled-bg p-5 transition-all hover:bg-[color-mix(in_oklab,var(--berget-brand-granite-100)_5%,var(--berget-card-filled-bg))] sm:p-6\"\n        >\n          {lifecycle && (\n            <div className=\"absolute top-0 right-0 z-10 overflow-hidden rounded-bl-berget-sm\">\n              <div\n                className={cn(\n                  'inline-flex h-6 items-center whitespace-nowrap border-0! px-8 text-sm',\n                  lifecycleStyles[lifecycle],\n                )}\n              >\n                {lifecycleLabels[lifecycle]}\n              </div>\n            </div>\n          )}\n          {(icon || provider || category) && (\n            <div className=\"flex h-12 w-12 shrink-0 items-center justify-center rounded-berget-xs border border-berget-border bg-white/5 text-berget-foreground\">\n              {icon ?? <ModelLogo provider={provider} category={category} />}\n            </div>\n          )}\n\n          {/* Identity cluster: eyebrow, title, description — cb tightly\n              grouped; the card's flex gap separates it from other groups. */}\n          <header>\n            {eyebrow && (\n              <Typography\n                variant=\"xs\"\n                color=\"muted\"\n                className=\"font-medium uppercase leading-none tracking-[0.25em]\"\n              >\n                {eyebrow}\n              </Typography>\n            )}\n            <div className={cn('flex items-baseline gap-3', lifecycle && 'pr-24')}>\n              <Typography\n                as=\"h3\"\n                id={titleId}\n                variant=\"h5\"\n                className=\"min-w-0 truncate whitespace-nowrap leading-tight\"\n                style={{ fontFeatureSettings: 'normal' }}\n              >\n                {title}\n              </Typography>\n            </div>\n            {description && (\n              <Typography variant=\"xs\" color=\"muted\" className=\"leading-none\">\n                {description}\n              </Typography>\n            )}\n          </header>\n\n          {columns && columns.length > 0 && (\n            <div className=\"grid grid-cols-2\">\n              {columns.map((col, i) => (\n                <div key={i}>\n                  <Typography variant=\"xs\" color=\"muted\" className=\"leading-none\">\n                    {col.label}\n                  </Typography>\n                  <Typography\n                    variant=\"body\"\n                    className=\"tabular-nums leading-none\"\n                    style={{ fontFeatureSettings: 'normal' }}\n                  >\n                    {col.value}\n                  </Typography>\n                </div>\n              ))}\n            </div>\n          )}\n\n          {meta && meta.length > 0 && (\n            <Typography\n              variant=\"xs\"\n              color=\"muted\"\n              className=\"text-[0.65rem] uppercase tracking-[0.15em]\"\n            >\n              {meta.map((item, i) => (\n                <React.Fragment key={i}>\n                  {i > 0 && ' ▪ '}\n                  {item}\n                </React.Fragment>\n              ))}\n            </Typography>\n          )}\n\n          {children}\n        </Card>\n      </a>\n    );\n  },\n);\nModelCard.displayName = 'ModelCard';\n\nexport { ModelCard };\n"],"mappings":";;;;;;;;;;AAmBA,MAAM,kBAAkD;CACtD,SAAS;CACT,QAAQ;CACR,YAAY;AACd;;;;AAKA,MAAM,kBAAkD;CACtD,SAAS;CACT,QAAQ;CACR,YAAY;AACd;AA0CA,MAAM,YAAYA,MAAM,YAEpB,EACE,MACA,UACA,UACA,SACA,OACA,WACA,aACA,SACA,MACA,MACA,UACA,WACA,UACA,GAAG,SAEL,QACG;CACH,MAAM,UAAUA,MAAM,MAAM;CAE5B,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;EACO;EACC;EACN,mBAAiB;EACjB,GAAK,WAAW;GAAE,QAAQ;GAAU,KAAK;EAAsB,IAAI,CAAC;EACpE,WAAWC,cAAAA,GAAG,eAAe,SAAS;EACtC,GAAI;EAEJ,UAAA,iBAAA,GAAA,kBAAA,KAAA,CAACC,aAAAA,MAAD;GACE,SAAQ;GACR,WAAU;GAFZ,UAAA;IAIG,aACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;KAAK,WAAU;KACb,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;MACE,WAAWD,cAAAA,GACT,yEACA,gBAAgB,UAClB;MAEC,UAAA,gBAAgB;KACd,CAAA;IACF,CAAA;KAEL,QAAQ,YAAY,aACpB,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;KAAK,WAAU;KACZ,UAAA,QAAQ,iBAAA,GAAA,kBAAA,IAAA,CAACE,kBAAAA,WAAD;MAAqB;MAAoB;KAAW,CAAA;IAC1D,CAAA;IAKP,iBAAA,GAAA,kBAAA,KAAA,CAAC,UAAD,EAAA,UAAA;KACG,WACC,iBAAA,GAAA,kBAAA,IAAA,CAACC,mBAAAA,YAAD;MACE,SAAQ;MACR,OAAM;MACN,WAAU;MAET,UAAA;KACS,CAAA;KAEd,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;MAAK,WAAWH,cAAAA,GAAG,6BAA6B,aAAa,OAAO;MAClE,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACG,mBAAAA,YAAD;OACE,IAAG;OACH,IAAI;OACJ,SAAQ;OACR,WAAU;OACV,OAAO,EAAE,qBAAqB,SAAS;OAEtC,UAAA;MACS,CAAA;KACT,CAAA;KACJ,eACC,iBAAA,GAAA,kBAAA,IAAA,CAACA,mBAAAA,YAAD;MAAY,SAAQ;MAAK,OAAM;MAAQ,WAAU;MAC9C,UAAA;KACS,CAAA;IAER,EAAA,CAAA;IAEP,WAAW,QAAQ,SAAS,KAC3B,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;KAAK,WAAU;KACZ,UAAA,QAAQ,KAAK,KAAK,MACjB,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,mBAAAA,YAAD;MAAY,SAAQ;MAAK,OAAM;MAAQ,WAAU;MAC9C,UAAA,IAAI;KACK,CAAA,GACZ,iBAAA,GAAA,kBAAA,IAAA,CAACA,mBAAAA,YAAD;MACE,SAAQ;MACR,WAAU;MACV,OAAO,EAAE,qBAAqB,SAAS;MAEtC,UAAA,IAAI;KACK,CAAA,CACT,EAAA,GAXK,CAWL,CACN;IACE,CAAA;IAGN,QAAQ,KAAK,SAAS,KACrB,iBAAA,GAAA,kBAAA,IAAA,CAACA,mBAAAA,YAAD;KACE,SAAQ;KACR,OAAM;KACN,WAAU;KAET,UAAA,KAAK,KAAK,MAAM,MACf,iBAAA,GAAA,kBAAA,KAAA,CAACJ,MAAM,UAAP,EAAA,UAAA,CACG,IAAI,KAAK,OACT,IACa,EAAA,GAHK,CAGL,CACjB;IACS,CAAA;IAGb;GACG;;CACL,CAAA;AAEP,CACF;AACA,UAAU,cAAc"}
+{"version":3,"file":"ModelCard.cjs","names":["React","cn","Card","ModelLogo","Typography"],"sources":["../../../src/components/model-card/ModelCard.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cn } from '../../lib/utils';\nimport { Card } from '../card';\nimport { type ModelCategory, type ModelLogoProvider, ModelLogo } from '../model-logo';\nimport { Typography } from '../typography';\n\n/**\n * ModelCard — a whole-card link tile for presenting AI models in a grid:\n * provider mark, category eyebrow, model name, optional lifecycle tab,\n * per-unit price columns, and fine-print capability facts.\n *\n * Presentational only: all copy is passed in as props; the card itself\n * owns no strings and no domain types.\n */\n/** Lifecycle status shown as a corner tab on the card. */\nexport type ModelLifecycle = 'preview' | 'active' | 'deprecated';\n\nconst lifecycleLabels: Record<ModelLifecycle, string> = {\n  preview: 'Preview',\n  active: 'Active',\n  deprecated: 'Deprecated',\n};\n\n/** Per-status styling for the lifecycle tab (tint classes come from\n * index.css; deprecated uses the granite neutral). Brightens when the\n * card (`group`) is hovered. */\nconst lifecycleStyles: Record<ModelLifecycle, string> = {\n  preview: 'berget-tint berget-tint-warning',\n  active: 'berget-tint berget-tint-success',\n  deprecated: 'bg-berget-brand-granite-700 text-berget-muted-foreground',\n};\n\nexport type { ModelCategory, ModelLogoProvider };\n\nexport interface ModelCardProps extends Omit<React.ComponentProps<'a'>, 'title' | 'children'> {\n  /** Provider mark, rendered in a bordered square at the top of the card. */\n  icon?: React.ReactNode;\n  /**\n   * Model family for the icon square — resolved to a bundled brand mark\n   * (e.g. `'mistralai'`, `'moonshotai'`, `'berget'`). Ignored when `icon`\n   * is set.\n   */\n  provider?: string;\n  /** Fallback category for the icon square when no brand mark exists\n   * (maps to the `model_type` values from `GET /v1/models`). */\n  category?: ModelCategory;\n  /** Small category label above the title (rendered uppercase). */\n  eyebrow?: string;\n  /** The model name — rendered as an `h3` and truncated when too long. */\n  title: React.ReactNode;\n  /**\n   * Lifecycle status rendered as a corner tab: `preview` (yellow),\n   * `active` (green), `deprecated` (gray).\n   */\n  lifecycle?: ModelLifecycle;\n  /** Secondary line under the title, e.g. the provider name. */\n  description?: React.ReactNode;\n  /** Label-above-value columns, e.g. per-million-token input/output prices. */\n  columns?: { label: React.ReactNode; value: React.ReactNode }[];\n  /**\n   * Fine-print capability facts rendered in one uppercase row with\n   * square separators drawn by the card, e.g. ['Vision', '262K context'].\n   */\n  meta?: React.ReactNode[];\n  /** Link target for the whole card. */\n  href: string;\n  /** Opens the link in a new tab (adds `target`/`rel`). */\n  external?: boolean;\n  /** Extra content rendered at the bottom of the card. */\n  children?: React.ReactNode;\n}\n\nconst ModelCard = React.forwardRef<HTMLAnchorElement, ModelCardProps>(\n  (\n    {\n      icon,\n      provider,\n      category,\n      eyebrow,\n      title,\n      lifecycle,\n      description,\n      columns,\n      meta,\n      href,\n      external,\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const titleId = React.useId();\n\n    return (\n      <a\n        ref={ref}\n        href={href}\n        aria-labelledby={titleId}\n        {...(external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}\n        className={cn('group block', className)}\n        {...props}\n      >\n        <Card\n          variant=\"filled\"\n          className=\"\n            relative flex h-full flex-col bg-berget-card-filled-bg p-5\n            transition-all\n            hover:bg-[color-mix(in_oklab,var(--berget-brand-granite-100)_5%,var(--berget-card-filled-bg))]\n            sm:p-6\n          \"\n        >\n          {lifecycle && (\n            <div\n              className=\"\n                absolute top-0 right-0 z-10 overflow-hidden rounded-bl-berget-sm\n              \"\n            >\n              <div\n                className={cn(\n                  `\n                    inline-flex h-6 items-center border-0! px-8 text-sm\n                    whitespace-nowrap\n                  `,\n                  lifecycleStyles[lifecycle],\n                )}\n              >\n                {lifecycleLabels[lifecycle]}\n              </div>\n            </div>\n          )}\n          {(icon || provider || category) && (\n            <div\n              className=\"\n                flex size-12 shrink-0 items-center justify-center\n                rounded-berget-xs border border-berget-border bg-white/5\n                text-berget-foreground\n              \"\n            >\n              {icon ?? <ModelLogo provider={provider} category={category} />}\n            </div>\n          )}\n\n          {/* Identity cluster: eyebrow, title, description — cb tightly\n              grouped; the card's flex gap separates it from other groups. */}\n          <header>\n            {eyebrow && (\n              <Typography\n                variant=\"xs\"\n                color=\"muted\"\n                className=\"leading-none font-medium tracking-[0.25em] uppercase\"\n              >\n                {eyebrow}\n              </Typography>\n            )}\n            <div className={cn('flex items-baseline gap-3', lifecycle && 'pr-24')}>\n              <Typography\n                as=\"h3\"\n                id={titleId}\n                variant=\"h5\"\n                className=\"min-w-0 truncate leading-tight whitespace-nowrap\"\n                style={{ fontFeatureSettings: 'normal' }}\n              >\n                {title}\n              </Typography>\n            </div>\n            {description && (\n              <Typography variant=\"xs\" color=\"muted\" className=\"leading-none\">\n                {description}\n              </Typography>\n            )}\n          </header>\n\n          {columns && columns.length > 0 && (\n            <div className=\"grid grid-cols-2\">\n              {columns.map((col, i) => (\n                <div key={i}>\n                  <Typography\n                    variant=\"xs\"\n                    color=\"muted\"\n                    className=\"\n                    leading-none\n                  \"\n                  >\n                    {col.label}\n                  </Typography>\n                  <Typography\n                    variant=\"body\"\n                    className=\"leading-none tabular-nums\"\n                    style={{ fontFeatureSettings: 'normal' }}\n                  >\n                    {col.value}\n                  </Typography>\n                </div>\n              ))}\n            </div>\n          )}\n\n          {meta && meta.length > 0 && (\n            <Typography\n              variant=\"xs\"\n              color=\"muted\"\n              className=\"text-[0.65rem] tracking-[0.15em] uppercase\"\n            >\n              {meta.map((item, i) => (\n                <React.Fragment key={i}>\n                  {i > 0 && ' ▪ '}\n                  {item}\n                </React.Fragment>\n              ))}\n            </Typography>\n          )}\n\n          {children}\n        </Card>\n      </a>\n    );\n  },\n);\nModelCard.displayName = 'ModelCard';\n\nexport { ModelCard };\n"],"mappings":";;;;;;;;;;AAmBA,MAAM,kBAAkD;CACtD,SAAS;CACT,QAAQ;CACR,YAAY;AACd;;;;AAKA,MAAM,kBAAkD;CACtD,SAAS;CACT,QAAQ;CACR,YAAY;AACd;AA0CA,MAAM,YAAYA,MAAM,YAEpB,EACE,MACA,UACA,UACA,SACA,OACA,WACA,aACA,SACA,MACA,MACA,UACA,WACA,UACA,GAAG,SAEL,QACG;CACH,MAAM,UAAUA,MAAM,MAAM;CAE5B,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;EACO;EACC;EACN,mBAAiB;EACjB,GAAK,WAAW;GAAE,QAAQ;GAAU,KAAK;EAAsB,IAAI,CAAC;EACpE,WAAWC,cAAAA,GAAG,eAAe,SAAS;EACtC,GAAI;EAEJ,UAAA,iBAAA,GAAA,kBAAA,KAAA,CAACC,aAAAA,MAAD;GACE,SAAQ;GACR,WAAU;GAFZ,UAAA;IASG,aACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;KACE,WAAU;KAIV,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;MACE,WAAWD,cAAAA,GACT;;;qBAIA,gBAAgB,UAClB;MAEC,UAAA,gBAAgB;KACd,CAAA;IACF,CAAA;KAEL,QAAQ,YAAY,aACpB,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;KACE,WAAU;KAMT,UAAA,QAAQ,iBAAA,GAAA,kBAAA,IAAA,CAACE,kBAAAA,WAAD;MAAqB;MAAoB;KAAW,CAAA;IAC1D,CAAA;IAKP,iBAAA,GAAA,kBAAA,KAAA,CAAC,UAAD,EAAA,UAAA;KACG,WACC,iBAAA,GAAA,kBAAA,IAAA,CAACC,mBAAAA,YAAD;MACE,SAAQ;MACR,OAAM;MACN,WAAU;MAET,UAAA;KACS,CAAA;KAEd,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;MAAK,WAAWH,cAAAA,GAAG,6BAA6B,aAAa,OAAO;MAClE,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACG,mBAAAA,YAAD;OACE,IAAG;OACH,IAAI;OACJ,SAAQ;OACR,WAAU;OACV,OAAO,EAAE,qBAAqB,SAAS;OAEtC,UAAA;MACS,CAAA;KACT,CAAA;KACJ,eACC,iBAAA,GAAA,kBAAA,IAAA,CAACA,mBAAAA,YAAD;MAAY,SAAQ;MAAK,OAAM;MAAQ,WAAU;MAC9C,UAAA;KACS,CAAA;IAER,EAAA,CAAA;IAEP,WAAW,QAAQ,SAAS,KAC3B,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;KAAK,WAAU;KACZ,UAAA,QAAQ,KAAK,KAAK,MACjB,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,mBAAAA,YAAD;MACE,SAAQ;MACR,OAAM;MACN,WAAU;MAIT,UAAA,IAAI;KACK,CAAA,GACZ,iBAAA,GAAA,kBAAA,IAAA,CAACA,mBAAAA,YAAD;MACE,SAAQ;MACR,WAAU;MACV,OAAO,EAAE,qBAAqB,SAAS;MAEtC,UAAA,IAAI;KACK,CAAA,CACT,EAAA,GAjBK,CAiBL,CACN;IACE,CAAA;IAGN,QAAQ,KAAK,SAAS,KACrB,iBAAA,GAAA,kBAAA,IAAA,CAACA,mBAAAA,YAAD;KACE,SAAQ;KACR,OAAM;KACN,WAAU;KAET,UAAA,KAAK,KAAK,MAAM,MACf,iBAAA,GAAA,kBAAA,KAAA,CAACJ,MAAM,UAAP,EAAA,UAAA,CACG,IAAI,KAAK,OACT,IACa,EAAA,GAHK,CAGL,CACjB;IACS,CAAA;IAGb;GACG;;CACL,CAAA;AAEP,CACF;AACA,UAAU,cAAc"}

package/dist/components/model-card/ModelCard.mjs

@@ -33,17 +33,20 @@ const ModelCard = React.forwardRef(({ icon, provider, category, eyebrow, title,
 		...props,
 		children: /* @__PURE__ */ jsxs(Card, {
 			variant: "filled",
-			className: "relative flex h-full flex-col bg-berget-card-filled-bg p-5 transition-all hover:bg-[color-mix(in_oklab,var(--berget-brand-granite-100)_5%,var(--berget-card-filled-bg))] sm:p-6",
+			className: "\n            relative flex h-full flex-col bg-berget-card-filled-bg p-5\n            transition-all\n            hover:bg-[color-mix(in_oklab,var(--berget-brand-granite-100)_5%,var(--berget-card-filled-bg))]\n            sm:p-6\n          ",
 			children: [
 				lifecycle && /* @__PURE__ */ jsx("div", {
-					className: "absolute top-0 right-0 z-10 overflow-hidden rounded-bl-berget-sm",
+					className: "\n                absolute top-0 right-0 z-10 overflow-hidden rounded-bl-berget-sm\n              ",
 					children: /* @__PURE__ */ jsx("div", {
-						className: cn("inline-flex h-6 items-center whitespace-nowrap border-0! px-8 text-sm", lifecycleStyles[lifecycle]),
+						className: cn(`
+                    inline-flex h-6 items-center border-0! px-8 text-sm
+                    whitespace-nowrap
+                  `, lifecycleStyles[lifecycle]),
 						children: lifecycleLabels[lifecycle]
 					})
 				}),
 				(icon || provider || category) && /* @__PURE__ */ jsx("div", {
-					className: "flex h-12 w-12 shrink-0 items-center justify-center rounded-berget-xs border border-berget-border bg-white/5 text-berget-foreground",
+					className: "\n                flex size-12 shrink-0 items-center justify-center\n                rounded-berget-xs border border-berget-border bg-white/5\n                text-berget-foreground\n              ",
 					children: icon ?? /* @__PURE__ */ jsx(ModelLogo, {
 						provider,
 						category
@@ -53,7 +56,7 @@ const ModelCard = React.forwardRef(({ icon, provider, category, eyebrow, title,
 					eyebrow && /* @__PURE__ */ jsx(Typography, {
 						variant: "xs",
 						color: "muted",
-						className: "font-medium uppercase leading-none tracking-[0.25em]",
+						className: "leading-none font-medium tracking-[0.25em] uppercase",
 						children: eyebrow
 					}),
 					/* @__PURE__ */ jsx("div", {
@@ -62,7 +65,7 @@ const ModelCard = React.forwardRef(({ icon, provider, category, eyebrow, title,
 							as: "h3",
 							id: titleId,
 							variant: "h5",
-							className: "min-w-0 truncate whitespace-nowrap leading-tight",
+							className: "min-w-0 truncate leading-tight whitespace-nowrap",
 							style: { fontFeatureSettings: "normal" },
 							children: title
 						})
@@ -79,11 +82,11 @@ const ModelCard = React.forwardRef(({ icon, provider, category, eyebrow, title,
 					children: columns.map((col, i) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Typography, {
 						variant: "xs",
 						color: "muted",
-						className: "leading-none",
+						className: "\n                    leading-none\n                  ",
 						children: col.label
 					}), /* @__PURE__ */ jsx(Typography, {
 						variant: "body",
-						className: "tabular-nums leading-none",
+						className: "leading-none tabular-nums",
 						style: { fontFeatureSettings: "normal" },
 						children: col.value
 					})] }, i))
@@ -91,7 +94,7 @@ const ModelCard = React.forwardRef(({ icon, provider, category, eyebrow, title,
 				meta && meta.length > 0 && /* @__PURE__ */ jsx(Typography, {
 					variant: "xs",
 					color: "muted",
-					className: "text-[0.65rem] uppercase tracking-[0.15em]",
+					className: "text-[0.65rem] tracking-[0.15em] uppercase",
 					children: meta.map((item, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [i > 0 && " ▪ ", item] }, i))
 				}),
 				children

package/dist/components/model-card/ModelCard.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ModelCard.mjs","names":[],"sources":["../../../src/components/model-card/ModelCard.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cn } from '../../lib/utils';\nimport { Card } from '../card';\nimport { type ModelCategory, type ModelLogoProvider, ModelLogo } from '../model-logo';\nimport { Typography } from '../typography';\n\n/**\n * ModelCard — a whole-card link tile for presenting AI models in a grid:\n * provider mark, category eyebrow, model name, optional lifecycle tab,\n * per-unit price columns, and fine-print capability facts.\n *\n * Presentational only: all copy is passed in as props; the card itself\n * owns no strings and no domain types.\n */\n/** Lifecycle status shown as a corner tab on the card. */\nexport type ModelLifecycle = 'preview' | 'active' | 'deprecated';\n\nconst lifecycleLabels: Record<ModelLifecycle, string> = {\n  preview: 'Preview',\n  active: 'Active',\n  deprecated: 'Deprecated',\n};\n\n/** Per-status styling for the lifecycle tab (tint classes come from\n * index.css; deprecated uses the granite neutral). Brightens when the\n * card (`group`) is hovered. */\nconst lifecycleStyles: Record<ModelLifecycle, string> = {\n  preview: 'berget-tint berget-tint-warning',\n  active: 'berget-tint berget-tint-success',\n  deprecated: 'bg-berget-brand-granite-700 text-berget-muted-foreground',\n};\n\nexport type { ModelCategory, ModelLogoProvider };\n\nexport interface ModelCardProps extends Omit<React.ComponentProps<'a'>, 'title' | 'children'> {\n  /** Provider mark, rendered in a bordered square at the top of the card. */\n  icon?: React.ReactNode;\n  /**\n   * Model family for the icon square — resolved to a bundled brand mark\n   * (e.g. `'mistralai'`, `'moonshotai'`, `'berget'`). Ignored when `icon`\n   * is set.\n   */\n  provider?: string;\n  /** Fallback category for the icon square when no brand mark exists\n   * (maps to the `model_type` values from `GET /v1/models`). */\n  category?: ModelCategory;\n  /** Small category label above the title (rendered uppercase). */\n  eyebrow?: string;\n  /** The model name — rendered as an `h3` and truncated when too long. */\n  title: React.ReactNode;\n  /**\n   * Lifecycle status rendered as a corner tab: `preview` (yellow),\n   * `active` (green), `deprecated` (gray).\n   */\n  lifecycle?: ModelLifecycle;\n  /** Secondary line under the title, e.g. the provider name. */\n  description?: React.ReactNode;\n  /** Label-above-value columns, e.g. per-million-token input/output prices. */\n  columns?: { label: React.ReactNode; value: React.ReactNode }[];\n  /**\n   * Fine-print capability facts rendered in one uppercase row with\n   * square separators drawn by the card, e.g. ['Vision', '262K context'].\n   */\n  meta?: React.ReactNode[];\n  /** Link target for the whole card. */\n  href: string;\n  /** Opens the link in a new tab (adds `target`/`rel`). */\n  external?: boolean;\n  /** Extra content rendered at the bottom of the card. */\n  children?: React.ReactNode;\n}\n\nconst ModelCard = React.forwardRef<HTMLAnchorElement, ModelCardProps>(\n  (\n    {\n      icon,\n      provider,\n      category,\n      eyebrow,\n      title,\n      lifecycle,\n      description,\n      columns,\n      meta,\n      href,\n      external,\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const titleId = React.useId();\n\n    return (\n      <a\n        ref={ref}\n        href={href}\n        aria-labelledby={titleId}\n        {...(external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}\n        className={cn('group block', className)}\n        {...props}\n      >\n        <Card\n          variant=\"filled\"\n          className=\"relative flex h-full flex-col bg-berget-card-filled-bg p-5 transition-all hover:bg-[color-mix(in_oklab,var(--berget-brand-granite-100)_5%,var(--berget-card-filled-bg))] sm:p-6\"\n        >\n          {lifecycle && (\n            <div className=\"absolute top-0 right-0 z-10 overflow-hidden rounded-bl-berget-sm\">\n              <div\n                className={cn(\n                  'inline-flex h-6 items-center whitespace-nowrap border-0! px-8 text-sm',\n                  lifecycleStyles[lifecycle],\n                )}\n              >\n                {lifecycleLabels[lifecycle]}\n              </div>\n            </div>\n          )}\n          {(icon || provider || category) && (\n            <div className=\"flex h-12 w-12 shrink-0 items-center justify-center rounded-berget-xs border border-berget-border bg-white/5 text-berget-foreground\">\n              {icon ?? <ModelLogo provider={provider} category={category} />}\n            </div>\n          )}\n\n          {/* Identity cluster: eyebrow, title, description — cb tightly\n              grouped; the card's flex gap separates it from other groups. */}\n          <header>\n            {eyebrow && (\n              <Typography\n                variant=\"xs\"\n                color=\"muted\"\n                className=\"font-medium uppercase leading-none tracking-[0.25em]\"\n              >\n                {eyebrow}\n              </Typography>\n            )}\n            <div className={cn('flex items-baseline gap-3', lifecycle && 'pr-24')}>\n              <Typography\n                as=\"h3\"\n                id={titleId}\n                variant=\"h5\"\n                className=\"min-w-0 truncate whitespace-nowrap leading-tight\"\n                style={{ fontFeatureSettings: 'normal' }}\n              >\n                {title}\n              </Typography>\n            </div>\n            {description && (\n              <Typography variant=\"xs\" color=\"muted\" className=\"leading-none\">\n                {description}\n              </Typography>\n            )}\n          </header>\n\n          {columns && columns.length > 0 && (\n            <div className=\"grid grid-cols-2\">\n              {columns.map((col, i) => (\n                <div key={i}>\n                  <Typography variant=\"xs\" color=\"muted\" className=\"leading-none\">\n                    {col.label}\n                  </Typography>\n                  <Typography\n                    variant=\"body\"\n                    className=\"tabular-nums leading-none\"\n                    style={{ fontFeatureSettings: 'normal' }}\n                  >\n                    {col.value}\n                  </Typography>\n                </div>\n              ))}\n            </div>\n          )}\n\n          {meta && meta.length > 0 && (\n            <Typography\n              variant=\"xs\"\n              color=\"muted\"\n              className=\"text-[0.65rem] uppercase tracking-[0.15em]\"\n            >\n              {meta.map((item, i) => (\n                <React.Fragment key={i}>\n                  {i > 0 && ' ▪ '}\n                  {item}\n                </React.Fragment>\n              ))}\n            </Typography>\n          )}\n\n          {children}\n        </Card>\n      </a>\n    );\n  },\n);\nModelCard.displayName = 'ModelCard';\n\nexport { ModelCard };\n"],"mappings":";;;;;;;;AAmBA,MAAM,kBAAkD;CACtD,SAAS;CACT,QAAQ;CACR,YAAY;AACd;;;;AAKA,MAAM,kBAAkD;CACtD,SAAS;CACT,QAAQ;CACR,YAAY;AACd;AA0CA,MAAM,YAAY,MAAM,YAEpB,EACE,MACA,UACA,UACA,SACA,OACA,WACA,aACA,SACA,MACA,MACA,UACA,WACA,UACA,GAAG,SAEL,QACG;CACH,MAAM,UAAU,MAAM,MAAM;CAE5B,OACE,oBAAC,KAAD;EACO;EACC;EACN,mBAAiB;EACjB,GAAK,WAAW;GAAE,QAAQ;GAAU,KAAK;EAAsB,IAAI,CAAC;EACpE,WAAW,GAAG,eAAe,SAAS;EACtC,GAAI;EAEJ,UAAA,qBAAC,MAAD;GACE,SAAQ;GACR,WAAU;GAFZ,UAAA;IAIG,aACC,oBAAC,OAAD;KAAK,WAAU;KACb,UAAA,oBAAC,OAAD;MACE,WAAW,GACT,yEACA,gBAAgB,UAClB;MAEC,UAAA,gBAAgB;KACd,CAAA;IACF,CAAA;KAEL,QAAQ,YAAY,aACpB,oBAAC,OAAD;KAAK,WAAU;KACZ,UAAA,QAAQ,oBAAC,WAAD;MAAqB;MAAoB;KAAW,CAAA;IAC1D,CAAA;IAKP,qBAAC,UAAD,EAAA,UAAA;KACG,WACC,oBAAC,YAAD;MACE,SAAQ;MACR,OAAM;MACN,WAAU;MAET,UAAA;KACS,CAAA;KAEd,oBAAC,OAAD;MAAK,WAAW,GAAG,6BAA6B,aAAa,OAAO;MAClE,UAAA,oBAAC,YAAD;OACE,IAAG;OACH,IAAI;OACJ,SAAQ;OACR,WAAU;OACV,OAAO,EAAE,qBAAqB,SAAS;OAEtC,UAAA;MACS,CAAA;KACT,CAAA;KACJ,eACC,oBAAC,YAAD;MAAY,SAAQ;MAAK,OAAM;MAAQ,WAAU;MAC9C,UAAA;KACS,CAAA;IAER,EAAA,CAAA;IAEP,WAAW,QAAQ,SAAS,KAC3B,oBAAC,OAAD;KAAK,WAAU;KACZ,UAAA,QAAQ,KAAK,KAAK,MACjB,qBAAC,OAAD,EAAA,UAAA,CACE,oBAAC,YAAD;MAAY,SAAQ;MAAK,OAAM;MAAQ,WAAU;MAC9C,UAAA,IAAI;KACK,CAAA,GACZ,oBAAC,YAAD;MACE,SAAQ;MACR,WAAU;MACV,OAAO,EAAE,qBAAqB,SAAS;MAEtC,UAAA,IAAI;KACK,CAAA,CACT,EAAA,GAXK,CAWL,CACN;IACE,CAAA;IAGN,QAAQ,KAAK,SAAS,KACrB,oBAAC,YAAD;KACE,SAAQ;KACR,OAAM;KACN,WAAU;KAET,UAAA,KAAK,KAAK,MAAM,MACf,qBAAC,MAAM,UAAP,EAAA,UAAA,CACG,IAAI,KAAK,OACT,IACa,EAAA,GAHK,CAGL,CACjB;IACS,CAAA;IAGb;GACG;;CACL,CAAA;AAEP,CACF;AACA,UAAU,cAAc"}
+{"version":3,"file":"ModelCard.mjs","names":[],"sources":["../../../src/components/model-card/ModelCard.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cn } from '../../lib/utils';\nimport { Card } from '../card';\nimport { type ModelCategory, type ModelLogoProvider, ModelLogo } from '../model-logo';\nimport { Typography } from '../typography';\n\n/**\n * ModelCard — a whole-card link tile for presenting AI models in a grid:\n * provider mark, category eyebrow, model name, optional lifecycle tab,\n * per-unit price columns, and fine-print capability facts.\n *\n * Presentational only: all copy is passed in as props; the card itself\n * owns no strings and no domain types.\n */\n/** Lifecycle status shown as a corner tab on the card. */\nexport type ModelLifecycle = 'preview' | 'active' | 'deprecated';\n\nconst lifecycleLabels: Record<ModelLifecycle, string> = {\n  preview: 'Preview',\n  active: 'Active',\n  deprecated: 'Deprecated',\n};\n\n/** Per-status styling for the lifecycle tab (tint classes come from\n * index.css; deprecated uses the granite neutral). Brightens when the\n * card (`group`) is hovered. */\nconst lifecycleStyles: Record<ModelLifecycle, string> = {\n  preview: 'berget-tint berget-tint-warning',\n  active: 'berget-tint berget-tint-success',\n  deprecated: 'bg-berget-brand-granite-700 text-berget-muted-foreground',\n};\n\nexport type { ModelCategory, ModelLogoProvider };\n\nexport interface ModelCardProps extends Omit<React.ComponentProps<'a'>, 'title' | 'children'> {\n  /** Provider mark, rendered in a bordered square at the top of the card. */\n  icon?: React.ReactNode;\n  /**\n   * Model family for the icon square — resolved to a bundled brand mark\n   * (e.g. `'mistralai'`, `'moonshotai'`, `'berget'`). Ignored when `icon`\n   * is set.\n   */\n  provider?: string;\n  /** Fallback category for the icon square when no brand mark exists\n   * (maps to the `model_type` values from `GET /v1/models`). */\n  category?: ModelCategory;\n  /** Small category label above the title (rendered uppercase). */\n  eyebrow?: string;\n  /** The model name — rendered as an `h3` and truncated when too long. */\n  title: React.ReactNode;\n  /**\n   * Lifecycle status rendered as a corner tab: `preview` (yellow),\n   * `active` (green), `deprecated` (gray).\n   */\n  lifecycle?: ModelLifecycle;\n  /** Secondary line under the title, e.g. the provider name. */\n  description?: React.ReactNode;\n  /** Label-above-value columns, e.g. per-million-token input/output prices. */\n  columns?: { label: React.ReactNode; value: React.ReactNode }[];\n  /**\n   * Fine-print capability facts rendered in one uppercase row with\n   * square separators drawn by the card, e.g. ['Vision', '262K context'].\n   */\n  meta?: React.ReactNode[];\n  /** Link target for the whole card. */\n  href: string;\n  /** Opens the link in a new tab (adds `target`/`rel`). */\n  external?: boolean;\n  /** Extra content rendered at the bottom of the card. */\n  children?: React.ReactNode;\n}\n\nconst ModelCard = React.forwardRef<HTMLAnchorElement, ModelCardProps>(\n  (\n    {\n      icon,\n      provider,\n      category,\n      eyebrow,\n      title,\n      lifecycle,\n      description,\n      columns,\n      meta,\n      href,\n      external,\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const titleId = React.useId();\n\n    return (\n      <a\n        ref={ref}\n        href={href}\n        aria-labelledby={titleId}\n        {...(external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}\n        className={cn('group block', className)}\n        {...props}\n      >\n        <Card\n          variant=\"filled\"\n          className=\"\n            relative flex h-full flex-col bg-berget-card-filled-bg p-5\n            transition-all\n            hover:bg-[color-mix(in_oklab,var(--berget-brand-granite-100)_5%,var(--berget-card-filled-bg))]\n            sm:p-6\n          \"\n        >\n          {lifecycle && (\n            <div\n              className=\"\n                absolute top-0 right-0 z-10 overflow-hidden rounded-bl-berget-sm\n              \"\n            >\n              <div\n                className={cn(\n                  `\n                    inline-flex h-6 items-center border-0! px-8 text-sm\n                    whitespace-nowrap\n                  `,\n                  lifecycleStyles[lifecycle],\n                )}\n              >\n                {lifecycleLabels[lifecycle]}\n              </div>\n            </div>\n          )}\n          {(icon || provider || category) && (\n            <div\n              className=\"\n                flex size-12 shrink-0 items-center justify-center\n                rounded-berget-xs border border-berget-border bg-white/5\n                text-berget-foreground\n              \"\n            >\n              {icon ?? <ModelLogo provider={provider} category={category} />}\n            </div>\n          )}\n\n          {/* Identity cluster: eyebrow, title, description — cb tightly\n              grouped; the card's flex gap separates it from other groups. */}\n          <header>\n            {eyebrow && (\n              <Typography\n                variant=\"xs\"\n                color=\"muted\"\n                className=\"leading-none font-medium tracking-[0.25em] uppercase\"\n              >\n                {eyebrow}\n              </Typography>\n            )}\n            <div className={cn('flex items-baseline gap-3', lifecycle && 'pr-24')}>\n              <Typography\n                as=\"h3\"\n                id={titleId}\n                variant=\"h5\"\n                className=\"min-w-0 truncate leading-tight whitespace-nowrap\"\n                style={{ fontFeatureSettings: 'normal' }}\n              >\n                {title}\n              </Typography>\n            </div>\n            {description && (\n              <Typography variant=\"xs\" color=\"muted\" className=\"leading-none\">\n                {description}\n              </Typography>\n            )}\n          </header>\n\n          {columns && columns.length > 0 && (\n            <div className=\"grid grid-cols-2\">\n              {columns.map((col, i) => (\n                <div key={i}>\n                  <Typography\n                    variant=\"xs\"\n                    color=\"muted\"\n                    className=\"\n                    leading-none\n                  \"\n                  >\n                    {col.label}\n                  </Typography>\n                  <Typography\n                    variant=\"body\"\n                    className=\"leading-none tabular-nums\"\n                    style={{ fontFeatureSettings: 'normal' }}\n                  >\n                    {col.value}\n                  </Typography>\n                </div>\n              ))}\n            </div>\n          )}\n\n          {meta && meta.length > 0 && (\n            <Typography\n              variant=\"xs\"\n              color=\"muted\"\n              className=\"text-[0.65rem] tracking-[0.15em] uppercase\"\n            >\n              {meta.map((item, i) => (\n                <React.Fragment key={i}>\n                  {i > 0 && ' ▪ '}\n                  {item}\n                </React.Fragment>\n              ))}\n            </Typography>\n          )}\n\n          {children}\n        </Card>\n      </a>\n    );\n  },\n);\nModelCard.displayName = 'ModelCard';\n\nexport { ModelCard };\n"],"mappings":";;;;;;;;AAmBA,MAAM,kBAAkD;CACtD,SAAS;CACT,QAAQ;CACR,YAAY;AACd;;;;AAKA,MAAM,kBAAkD;CACtD,SAAS;CACT,QAAQ;CACR,YAAY;AACd;AA0CA,MAAM,YAAY,MAAM,YAEpB,EACE,MACA,UACA,UACA,SACA,OACA,WACA,aACA,SACA,MACA,MACA,UACA,WACA,UACA,GAAG,SAEL,QACG;CACH,MAAM,UAAU,MAAM,MAAM;CAE5B,OACE,oBAAC,KAAD;EACO;EACC;EACN,mBAAiB;EACjB,GAAK,WAAW;GAAE,QAAQ;GAAU,KAAK;EAAsB,IAAI,CAAC;EACpE,WAAW,GAAG,eAAe,SAAS;EACtC,GAAI;EAEJ,UAAA,qBAAC,MAAD;GACE,SAAQ;GACR,WAAU;GAFZ,UAAA;IASG,aACC,oBAAC,OAAD;KACE,WAAU;KAIV,UAAA,oBAAC,OAAD;MACE,WAAW,GACT;;;qBAIA,gBAAgB,UAClB;MAEC,UAAA,gBAAgB;KACd,CAAA;IACF,CAAA;KAEL,QAAQ,YAAY,aACpB,oBAAC,OAAD;KACE,WAAU;KAMT,UAAA,QAAQ,oBAAC,WAAD;MAAqB;MAAoB;KAAW,CAAA;IAC1D,CAAA;IAKP,qBAAC,UAAD,EAAA,UAAA;KACG,WACC,oBAAC,YAAD;MACE,SAAQ;MACR,OAAM;MACN,WAAU;MAET,UAAA;KACS,CAAA;KAEd,oBAAC,OAAD;MAAK,WAAW,GAAG,6BAA6B,aAAa,OAAO;MAClE,UAAA,oBAAC,YAAD;OACE,IAAG;OACH,IAAI;OACJ,SAAQ;OACR,WAAU;OACV,OAAO,EAAE,qBAAqB,SAAS;OAEtC,UAAA;MACS,CAAA;KACT,CAAA;KACJ,eACC,oBAAC,YAAD;MAAY,SAAQ;MAAK,OAAM;MAAQ,WAAU;MAC9C,UAAA;KACS,CAAA;IAER,EAAA,CAAA;IAEP,WAAW,QAAQ,SAAS,KAC3B,oBAAC,OAAD;KAAK,WAAU;KACZ,UAAA,QAAQ,KAAK,KAAK,MACjB,qBAAC,OAAD,EAAA,UAAA,CACE,oBAAC,YAAD;MACE,SAAQ;MACR,OAAM;MACN,WAAU;MAIT,UAAA,IAAI;KACK,CAAA,GACZ,oBAAC,YAAD;MACE,SAAQ;MACR,WAAU;MACV,OAAO,EAAE,qBAAqB,SAAS;MAEtC,UAAA,IAAI;KACK,CAAA,CACT,EAAA,GAjBK,CAiBL,CACN;IACE,CAAA;IAGN,QAAQ,KAAK,SAAS,KACrB,oBAAC,YAAD;KACE,SAAQ;KACR,OAAM;KACN,WAAU;KAET,UAAA,KAAK,KAAK,MAAM,MACf,qBAAC,MAAM,UAAP,EAAA,UAAA,CACG,IAAI,KAAK,OACT,IACa,EAAA,GAHK,CAGL,CACjB;IACS,CAAA;IAGb;GACG;;CACL,CAAA;AAEP,CACF;AACA,UAAU,cAAc"}

package/dist/components/navigation-menu/NavigationMenu.cjs

@@ -9,12 +9,29 @@ let _base_ui_react_navigation_menu = require("@base-ui/react/navigation-menu");
 function NavigationMenu({ align = "start", className, children, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react_navigation_menu.NavigationMenu.Root, {
 		"data-slot": "navigation-menu",
-		className: require_utils.cn("group/navigation-menu relative flex max-w-max flex-1 items-center justify-center", className),
+		className: require_utils.cn(`
+          group/navigation-menu relative flex max-w-max flex-1 items-center
+          justify-center
+        `, className),
 		...props,
 		children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavigationMenuPositioner, { align })]
 	});
 }
-const navigationMenuTriggerStyle = (0, class_variance_authority.cva)("group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-berget-xs px-2.5 py-1.5 text-sm font-medium transition-all outline-none hover:bg-berget-surface-02 focus:bg-berget-surface-02 focus-visible:ring-3 focus-visible:ring-berget-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-berget-surface-02/50 data-popup-open:hover:bg-berget-surface-02 data-open:bg-berget-surface-02/50 data-open:hover:bg-berget-surface-02 data-open:focus:bg-berget-surface-02");
+const navigationMenuTriggerStyle = (0, class_variance_authority.cva)(`
+    group/navigation-menu-trigger inline-flex h-9 w-max items-center
+    justify-center rounded-berget-xs px-2.5 py-1.5 text-sm font-medium
+    transition-all outline-none
+    hover:bg-berget-surface-02
+    focus:bg-berget-surface-02
+    focus-visible:ring-3 focus-visible:ring-berget-ring/50
+    focus-visible:outline-1
+    disabled:pointer-events-none disabled:opacity-50
+    data-open:bg-berget-surface-02/50
+    data-open:hover:bg-berget-surface-02
+    data-open:focus:bg-berget-surface-02
+    data-popup-open:bg-berget-surface-02/50
+    data-popup-open:hover:bg-berget-surface-02
+  `);
 function NavigationMenuTrigger({ className, children, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react_navigation_menu.NavigationMenu.Trigger, {
 		"data-slot": "navigation-menu-trigger",
@@ -24,7 +41,7 @@ function NavigationMenuTrigger({ className, children, ...props }) {
 			children,
 			" ",
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, {
-				className: "relative top-px ml-1 size-3 transition duration-300 group-data-popup-open/navigation-menu-trigger:rotate-180 group-data-open/navigation-menu-trigger:rotate-180",
+				className: "\n          relative top-px ml-1 size-3 transition duration-300\n          group-data-open/navigation-menu-trigger:rotate-180\n          group-data-popup-open/navigation-menu-trigger:rotate-180\n        ",
 				"aria-hidden": "true"
 			})
 		]
@@ -33,7 +50,19 @@ function NavigationMenuTrigger({ className, children, ...props }) {
 function NavigationMenuLink({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_navigation_menu.NavigationMenu.Link, {
 		"data-slot": "navigation-menu-link",
-		className: require_utils.cn("flex items-center gap-2 rounded-berget-xs p-2 text-sm transition-all outline-none hover:bg-berget-surface-02 focus:bg-berget-surface-02 focus-visible:ring-3 focus-visible:ring-berget-ring/50 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-berget-xs data-active:bg-berget-surface-02/50 data-active:hover:bg-berget-surface-02 data-active:focus:bg-berget-surface-02 [&_svg:not([class*='size-'])]:size-4", className),
+		className: require_utils.cn(`
+          flex items-center gap-2 rounded-berget-xs p-2 text-sm transition-all
+          outline-none
+          hover:bg-berget-surface-02
+          focus:bg-berget-surface-02
+          focus-visible:ring-3 focus-visible:ring-berget-ring/50
+          focus-visible:outline-1
+          in-data-[slot=navigation-menu-content]:rounded-berget-xs
+          data-active:bg-berget-surface-02/50
+          data-active:hover:bg-berget-surface-02
+          data-active:focus:bg-berget-surface-02
+          [&_svg:not([class*='size-'])]:size-4
+        `, className),
 		...props
 	});
 }
@@ -43,11 +72,18 @@ function NavigationMenuPositioner({ className, side = "bottom", sideOffset = 8,
 		sideOffset,
 		align,
 		alignOffset,
-		className: require_utils.cn("isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0", className),
+		className: require_utils.cn(`
+            isolate z-50 h-(--positioner-height) w-(--positioner-width)
+            max-w-(--available-width) transition-[top,left,right,bottom]
+            duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)]
+            data-instant:transition-none
+            data-[side=bottom]:before:inset-x-0
+            data-[side=bottom]:before:top-[-10px]
+          `, className),
 		...props,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_navigation_menu.NavigationMenu.Popup, {
-			className: "data-[ending-style]:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-berget-xs bg-berget-popover text-berget-popover-foreground shadow-berget-lg ring-1 ring-berget-border transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:scale-90 data-starting-style:opacity-0",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_navigation_menu.NavigationMenu.Viewport, { className: "relative size-full overflow-hidden" })
+			className: "\n            data-[ending-style]:easing-[ease]\n            xs:w-(--popup-width)\n            relative h-(--popup-height) w-(--popup-width)\n            origin-(--transform-origin) rounded-berget-xs bg-berget-popover\n            text-berget-popover-foreground shadow-berget-lg ring-1\n            ring-berget-border\n            transition-[opacity,transform,width,height,scale,translate]\n            duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] outline-none\n            data-ending-style:scale-90 data-ending-style:opacity-0\n            data-ending-style:duration-150\n            data-starting-style:scale-90 data-starting-style:opacity-0\n          ",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_navigation_menu.NavigationMenu.Viewport, { className: "\n            relative size-full overflow-hidden\n          " })
 		})
 	}) });
 }

package/dist/components/navigation-menu/NavigationMenu.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenu.cjs","names":["NavigationMenuPrimitive","cn","cva","ChevronDown"],"sources":["../../../src/components/navigation-menu/NavigationMenu.tsx"],"sourcesContent":["'use client';\n\nimport { NavigationMenu as NavigationMenuPrimitive } from '@base-ui/react/navigation-menu';\nimport { cva } from 'class-variance-authority';\nimport { ChevronDown } from 'lucide-react';\n\nimport { cn } from '../../lib/utils';\nimport {\n  NavigationMenuList,\n  NavigationMenuItem,\n  NavigationMenuContent,\n  NavigationMenuIndicator,\n} from '../../primitives/navigation-menu';\n\n/* ------------------------------------------------------------------ */\n/*  Root                                                              */\n/* ------------------------------------------------------------------ */\n\nfunction NavigationMenu({\n  align = 'start',\n  className,\n  children,\n  ...props\n}: NavigationMenuPrimitive.Root.Props & Pick<NavigationMenuPrimitive.Positioner.Props, 'align'>) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      className={cn(\n        'group/navigation-menu relative flex max-w-max flex-1 items-center justify-center',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <NavigationMenuPositioner align={align} />\n    </NavigationMenuPrimitive.Root>\n  );\n}\n\n/* ------------------------------------------------------------------ */\n/*  Trigger                                                           */\n/* ------------------------------------------------------------------ */\n\nconst navigationMenuTriggerStyle = cva(\n  'group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-berget-xs px-2.5 py-1.5 text-sm font-medium transition-all outline-none hover:bg-berget-surface-02 focus:bg-berget-surface-02 focus-visible:ring-3 focus-visible:ring-berget-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-berget-surface-02/50 data-popup-open:hover:bg-berget-surface-02 data-open:bg-berget-surface-02/50 data-open:hover:bg-berget-surface-02 data-open:focus:bg-berget-surface-02',\n);\n\nfunction NavigationMenuTrigger({\n  className,\n  children,\n  ...props\n}: NavigationMenuPrimitive.Trigger.Props) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      data-slot=\"navigation-menu-trigger\"\n      className={cn(navigationMenuTriggerStyle(), 'group', className)}\n      {...props}\n    >\n      {children}{' '}\n      <ChevronDown\n        className=\"relative top-px ml-1 size-3 transition duration-300 group-data-popup-open/navigation-menu-trigger:rotate-180 group-data-open/navigation-menu-trigger:rotate-180\"\n        aria-hidden=\"true\"\n      />\n    </NavigationMenuPrimitive.Trigger>\n  );\n}\n\n/* ------------------------------------------------------------------ */\n/*  Link                                                              */\n/* ------------------------------------------------------------------ */\n\nfunction NavigationMenuLink({ className, ...props }: NavigationMenuPrimitive.Link.Props) {\n  return (\n    <NavigationMenuPrimitive.Link\n      data-slot=\"navigation-menu-link\"\n      className={cn(\n        \"flex items-center gap-2 rounded-berget-xs p-2 text-sm transition-all outline-none hover:bg-berget-surface-02 focus:bg-berget-surface-02 focus-visible:ring-3 focus-visible:ring-berget-ring/50 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-berget-xs data-active:bg-berget-surface-02/50 data-active:hover:bg-berget-surface-02 data-active:focus:bg-berget-surface-02 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/* ------------------------------------------------------------------ */\n/*  Positioner (portal + popup + viewport)                            */\n/* ------------------------------------------------------------------ */\n\nfunction NavigationMenuPositioner({\n  className,\n  side = 'bottom',\n  sideOffset = 8,\n  align = 'start',\n  alignOffset = 0,\n  ...props\n}: NavigationMenuPrimitive.Positioner.Props) {\n  return (\n    <NavigationMenuPrimitive.Portal>\n      <NavigationMenuPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        className={cn(\n          'isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0',\n          className,\n        )}\n        {...props}\n      >\n        <NavigationMenuPrimitive.Popup className=\"data-[ending-style]:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-berget-xs bg-berget-popover text-berget-popover-foreground shadow-berget-lg ring-1 ring-berget-border transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:scale-90 data-starting-style:opacity-0\">\n          <NavigationMenuPrimitive.Viewport className=\"relative size-full overflow-hidden\" />\n        </NavigationMenuPrimitive.Popup>\n      </NavigationMenuPrimitive.Positioner>\n    </NavigationMenuPrimitive.Portal>\n  );\n}\n\n/* ------------------------------------------------------------------ */\n/*  Exports                                                           */\n/* ------------------------------------------------------------------ */\n\nexport {\n  navigationMenuTriggerStyle,\n  NavigationMenu,\n  NavigationMenuList,\n  NavigationMenuItem,\n  NavigationMenuContent,\n  NavigationMenuTrigger,\n  NavigationMenuLink,\n  NavigationMenuIndicator,\n  NavigationMenuPositioner,\n};\n"],"mappings":";;;;;;;;AAkBA,SAAS,eAAe,EACtB,QAAQ,SACR,WACA,UACA,GAAG,SAC4F;CAC/F,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACA,+BAAAA,eAAwB,MAAzB;EACE,aAAU;EACV,WAAWC,cAAAA,GACT,oFACA,SACF;EACA,GAAI;EANN,UAAA,CAQG,UACD,iBAAA,GAAA,kBAAA,IAAA,CAAC,0BAAD,EAAiC,MAAQ,CAAA,CACb;;AAElC;AAMA,MAAM,8BAAA,GAA6BC,yBAAAA,IAAAA,CACjC,shBACF;AAEA,SAAS,sBAAsB,EAC7B,WACA,UACA,GAAG,SACqC;CACxC,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACF,+BAAAA,eAAwB,SAAzB;EACE,aAAU;EACV,WAAWC,cAAAA,GAAG,2BAA2B,GAAG,SAAS,SAAS;EAC9D,GAAI;EAHN,UAAA;GAKG;GAAU;GACX,iBAAA,GAAA,kBAAA,IAAA,CAACE,aAAAA,aAAD;IACE,WAAU;IACV,eAAY;GACb,CAAA;EAC8B;;AAErC;AAMA,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAA6C;CACvF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACH,+BAAAA,eAAwB,MAAzB;EACE,aAAU;EACV,WAAWC,cAAAA,GACT,0aACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAMA,SAAS,yBAAyB,EAChC,WACA,OAAO,UACP,aAAa,GACb,QAAQ,SACR,cAAc,GACd,GAAG,SACwC;CAC3C,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACD,+BAAAA,eAAwB,QAAzB,EAAA,UACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,+BAAAA,eAAwB,YAAzB;EACQ;EACM;EACL;EACM;EACb,WAAWC,cAAAA,GACT,sTACA,SACF;EACA,GAAI;EAEJ,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACD,+BAAAA,eAAwB,OAAzB;GAA+B,WAAU;GACvC,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACA,+BAAAA,eAAwB,UAAzB,EAAkC,WAAU,qCAAsC,CAAA;EACrD,CAAA;CACG,CAAA,EACN,CAAA;AAEpC"}
+{"version":3,"file":"NavigationMenu.cjs","names":["NavigationMenuPrimitive","cn","cva","ChevronDown"],"sources":["../../../src/components/navigation-menu/NavigationMenu.tsx"],"sourcesContent":["'use client';\n\nimport { NavigationMenu as NavigationMenuPrimitive } from '@base-ui/react/navigation-menu';\nimport { cva } from 'class-variance-authority';\nimport { ChevronDown } from 'lucide-react';\n\nimport { cn } from '../../lib/utils';\nimport {\n  NavigationMenuList,\n  NavigationMenuItem,\n  NavigationMenuContent,\n  NavigationMenuIndicator,\n} from '../../primitives/navigation-menu';\n\n/* ------------------------------------------------------------------ */\n/*  Root                                                              */\n/* ------------------------------------------------------------------ */\n\nfunction NavigationMenu({\n  align = 'start',\n  className,\n  children,\n  ...props\n}: NavigationMenuPrimitive.Root.Props & Pick<NavigationMenuPrimitive.Positioner.Props, 'align'>) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      className={cn(\n        `\n          group/navigation-menu relative flex max-w-max flex-1 items-center\n          justify-center\n        `,\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <NavigationMenuPositioner align={align} />\n    </NavigationMenuPrimitive.Root>\n  );\n}\n\n/* ------------------------------------------------------------------ */\n/*  Trigger                                                           */\n/* ------------------------------------------------------------------ */\n\nconst navigationMenuTriggerStyle = cva(\n  `\n    group/navigation-menu-trigger inline-flex h-9 w-max items-center\n    justify-center rounded-berget-xs px-2.5 py-1.5 text-sm font-medium\n    transition-all outline-none\n    hover:bg-berget-surface-02\n    focus:bg-berget-surface-02\n    focus-visible:ring-3 focus-visible:ring-berget-ring/50\n    focus-visible:outline-1\n    disabled:pointer-events-none disabled:opacity-50\n    data-open:bg-berget-surface-02/50\n    data-open:hover:bg-berget-surface-02\n    data-open:focus:bg-berget-surface-02\n    data-popup-open:bg-berget-surface-02/50\n    data-popup-open:hover:bg-berget-surface-02\n  `,\n);\n\nfunction NavigationMenuTrigger({\n  className,\n  children,\n  ...props\n}: NavigationMenuPrimitive.Trigger.Props) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      data-slot=\"navigation-menu-trigger\"\n      className={cn(navigationMenuTriggerStyle(), 'group', className)}\n      {...props}\n    >\n      {children}{' '}\n      <ChevronDown\n        className=\"\n          relative top-px ml-1 size-3 transition duration-300\n          group-data-open/navigation-menu-trigger:rotate-180\n          group-data-popup-open/navigation-menu-trigger:rotate-180\n        \"\n        aria-hidden=\"true\"\n      />\n    </NavigationMenuPrimitive.Trigger>\n  );\n}\n\n/* ------------------------------------------------------------------ */\n/*  Link                                                              */\n/* ------------------------------------------------------------------ */\n\nfunction NavigationMenuLink({ className, ...props }: NavigationMenuPrimitive.Link.Props) {\n  return (\n    <NavigationMenuPrimitive.Link\n      data-slot=\"navigation-menu-link\"\n      className={cn(\n        `\n          flex items-center gap-2 rounded-berget-xs p-2 text-sm transition-all\n          outline-none\n          hover:bg-berget-surface-02\n          focus:bg-berget-surface-02\n          focus-visible:ring-3 focus-visible:ring-berget-ring/50\n          focus-visible:outline-1\n          in-data-[slot=navigation-menu-content]:rounded-berget-xs\n          data-active:bg-berget-surface-02/50\n          data-active:hover:bg-berget-surface-02\n          data-active:focus:bg-berget-surface-02\n          [&_svg:not([class*='size-'])]:size-4\n        `,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/* ------------------------------------------------------------------ */\n/*  Positioner (portal + popup + viewport)                            */\n/* ------------------------------------------------------------------ */\n\nfunction NavigationMenuPositioner({\n  className,\n  side = 'bottom',\n  sideOffset = 8,\n  align = 'start',\n  alignOffset = 0,\n  ...props\n}: NavigationMenuPrimitive.Positioner.Props) {\n  return (\n    <NavigationMenuPrimitive.Portal>\n      <NavigationMenuPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        className={cn(\n          `\n            isolate z-50 h-(--positioner-height) w-(--positioner-width)\n            max-w-(--available-width) transition-[top,left,right,bottom]\n            duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)]\n            data-instant:transition-none\n            data-[side=bottom]:before:inset-x-0\n            data-[side=bottom]:before:top-[-10px]\n          `,\n          className,\n        )}\n        {...props}\n      >\n        <NavigationMenuPrimitive.Popup\n          className=\"\n            data-[ending-style]:easing-[ease]\n            xs:w-(--popup-width)\n            relative h-(--popup-height) w-(--popup-width)\n            origin-(--transform-origin) rounded-berget-xs bg-berget-popover\n            text-berget-popover-foreground shadow-berget-lg ring-1\n            ring-berget-border\n            transition-[opacity,transform,width,height,scale,translate]\n            duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] outline-none\n            data-ending-style:scale-90 data-ending-style:opacity-0\n            data-ending-style:duration-150\n            data-starting-style:scale-90 data-starting-style:opacity-0\n          \"\n        >\n          <NavigationMenuPrimitive.Viewport\n            className=\"\n            relative size-full overflow-hidden\n          \"\n          />\n        </NavigationMenuPrimitive.Popup>\n      </NavigationMenuPrimitive.Positioner>\n    </NavigationMenuPrimitive.Portal>\n  );\n}\n\n/* ------------------------------------------------------------------ */\n/*  Exports                                                           */\n/* ------------------------------------------------------------------ */\n\nexport {\n  navigationMenuTriggerStyle,\n  NavigationMenu,\n  NavigationMenuList,\n  NavigationMenuItem,\n  NavigationMenuContent,\n  NavigationMenuTrigger,\n  NavigationMenuLink,\n  NavigationMenuIndicator,\n  NavigationMenuPositioner,\n};\n"],"mappings":";;;;;;;;AAkBA,SAAS,eAAe,EACtB,QAAQ,SACR,WACA,UACA,GAAG,SAC4F;CAC/F,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACA,+BAAAA,eAAwB,MAAzB;EACE,aAAU;EACV,WAAWC,cAAAA,GACT;;;WAIA,SACF;EACA,GAAI;EATN,UAAA,CAWG,UACD,iBAAA,GAAA,kBAAA,IAAA,CAAC,0BAAD,EAAiC,MAAQ,CAAA,CACb;;AAElC;AAMA,MAAM,8BAAA,GAA6BC,yBAAAA,IAAAA,CACjC;;;;;;;;;;;;;;GAeF;AAEA,SAAS,sBAAsB,EAC7B,WACA,UACA,GAAG,SACqC;CACxC,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACF,+BAAAA,eAAwB,SAAzB;EACE,aAAU;EACV,WAAWC,cAAAA,GAAG,2BAA2B,GAAG,SAAS,SAAS;EAC9D,GAAI;EAHN,UAAA;GAKG;GAAU;GACX,iBAAA,GAAA,kBAAA,IAAA,CAACE,aAAAA,aAAD;IACE,WAAU;IAKV,eAAY;GACb,CAAA;EAC8B;;AAErC;AAMA,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAA6C;CACvF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACH,+BAAAA,eAAwB,MAAzB;EACE,aAAU;EACV,WAAWC,cAAAA,GACT;;;;;;;;;;;;WAaA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAMA,SAAS,yBAAyB,EAChC,WACA,OAAO,UACP,aAAa,GACb,QAAQ,SACR,cAAc,GACd,GAAG,SACwC;CAC3C,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACD,+BAAAA,eAAwB,QAAzB,EAAA,UACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,+BAAAA,eAAwB,YAAzB;EACQ;EACM;EACL;EACM;EACb,WAAWC,cAAAA,GACT;;;;;;;aAQA,SACF;EACA,GAAI;EAEJ,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACD,+BAAAA,eAAwB,OAAzB;GACE,WAAU;GAcV,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACA,+BAAAA,eAAwB,UAAzB,EACE,WAAU,+DAGX,CAAA;EAC4B,CAAA;CACG,CAAA,EACN,CAAA;AAEpC"}

package/dist/components/navigation-menu/NavigationMenu.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenu.d.cts","names":["NavigationMenu","NavigationMenuPrimitive"],"sources":["../../../src/components/navigation-menu/NavigationMenu.tsx"],"mappings":";;;iBAkBSA,mBACP,OACA,WACA,aACG,SACFC,eAAwB,KAAK,QAAQ,KAAKA,eAAwB,WAAW,8CAAe,IAAA;cAoBzF,6BAA0B,iDAAA;iBAIvB,wBACP,WACA,aACG,SACFA,eAAwB,QAAQ,oCAAK,IAAA;iBAoB/B,qBAAqB,cAAc,SAASA,eAAwB,KAAK,oCAAK,IAAA;iBAiB9E,2BACP,WACA,MACA,YACA,OACA,gBACG,SACFA,eAAwB,WAAW,oCAAK,IAAA"}
+{"version":3,"file":"NavigationMenu.d.cts","names":["NavigationMenu","NavigationMenuPrimitive"],"sources":["../../../src/components/navigation-menu/NavigationMenu.tsx"],"mappings":";;;iBAkBSA,mBACP,OACA,WACA,aACG,SACFC,eAAwB,KAAK,QAAQ,KAAKA,eAAwB,WAAW,8CAAe,IAAA;cAuBzF,6BAA0B,iDAAA;iBAkBvB,wBACP,WACA,aACG,SACFA,eAAwB,QAAQ,oCAAK,IAAA;iBAwB/B,qBAAqB,cAAc,SAASA,eAAwB,KAAK,oCAAK,IAAA;iBA6B9E,2BACP,WACA,MACA,YACA,OACA,gBACG,SACFA,eAAwB,WAAW,oCAAK,IAAA"}

package/dist/components/navigation-menu/NavigationMenu.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenu.d.mts","names":["NavigationMenu","NavigationMenuPrimitive"],"sources":["../../../src/components/navigation-menu/NavigationMenu.tsx"],"mappings":";;;iBAkBSA,mBACP,OACA,WACA,aACG,SACFC,eAAwB,KAAK,QAAQ,KAAKA,eAAwB,WAAW,8CAAe,IAAA;cAoBzF,6BAA0B,iDAAA;iBAIvB,wBACP,WACA,aACG,SACFA,eAAwB,QAAQ,oCAAK,IAAA;iBAoB/B,qBAAqB,cAAc,SAASA,eAAwB,KAAK,oCAAK,IAAA;iBAiB9E,2BACP,WACA,MACA,YACA,OACA,gBACG,SACFA,eAAwB,WAAW,oCAAK,IAAA"}
+{"version":3,"file":"NavigationMenu.d.mts","names":["NavigationMenu","NavigationMenuPrimitive"],"sources":["../../../src/components/navigation-menu/NavigationMenu.tsx"],"mappings":";;;iBAkBSA,mBACP,OACA,WACA,aACG,SACFC,eAAwB,KAAK,QAAQ,KAAKA,eAAwB,WAAW,8CAAe,IAAA;cAuBzF,6BAA0B,iDAAA;iBAkBvB,wBACP,WACA,aACG,SACFA,eAAwB,QAAQ,oCAAK,IAAA;iBAwB/B,qBAAqB,cAAc,SAASA,eAAwB,KAAK,oCAAK,IAAA;iBA6B9E,2BACP,WACA,MACA,YACA,OACA,gBACG,SACFA,eAAwB,WAAW,oCAAK,IAAA"}

package/dist/components/navigation-menu/NavigationMenu.mjs

@@ -9,12 +9,29 @@ import { NavigationMenu } from "@base-ui/react/navigation-menu";
 function NavigationMenu$1({ align = "start", className, children, ...props }) {
 	return /* @__PURE__ */ jsxs(NavigationMenu.Root, {
 		"data-slot": "navigation-menu",
-		className: cn("group/navigation-menu relative flex max-w-max flex-1 items-center justify-center", className),
+		className: cn(`
+          group/navigation-menu relative flex max-w-max flex-1 items-center
+          justify-center
+        `, className),
 		...props,
 		children: [children, /* @__PURE__ */ jsx(NavigationMenuPositioner, { align })]
 	});
 }
-const navigationMenuTriggerStyle = cva("group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-berget-xs px-2.5 py-1.5 text-sm font-medium transition-all outline-none hover:bg-berget-surface-02 focus:bg-berget-surface-02 focus-visible:ring-3 focus-visible:ring-berget-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-berget-surface-02/50 data-popup-open:hover:bg-berget-surface-02 data-open:bg-berget-surface-02/50 data-open:hover:bg-berget-surface-02 data-open:focus:bg-berget-surface-02");
+const navigationMenuTriggerStyle = cva(`
+    group/navigation-menu-trigger inline-flex h-9 w-max items-center
+    justify-center rounded-berget-xs px-2.5 py-1.5 text-sm font-medium
+    transition-all outline-none
+    hover:bg-berget-surface-02
+    focus:bg-berget-surface-02
+    focus-visible:ring-3 focus-visible:ring-berget-ring/50
+    focus-visible:outline-1
+    disabled:pointer-events-none disabled:opacity-50
+    data-open:bg-berget-surface-02/50
+    data-open:hover:bg-berget-surface-02
+    data-open:focus:bg-berget-surface-02
+    data-popup-open:bg-berget-surface-02/50
+    data-popup-open:hover:bg-berget-surface-02
+  `);
 function NavigationMenuTrigger({ className, children, ...props }) {
 	return /* @__PURE__ */ jsxs(NavigationMenu.Trigger, {
 		"data-slot": "navigation-menu-trigger",
@@ -24,7 +41,7 @@ function NavigationMenuTrigger({ className, children, ...props }) {
 			children,
 			" ",
 			/* @__PURE__ */ jsx(ChevronDown, {
-				className: "relative top-px ml-1 size-3 transition duration-300 group-data-popup-open/navigation-menu-trigger:rotate-180 group-data-open/navigation-menu-trigger:rotate-180",
+				className: "\n          relative top-px ml-1 size-3 transition duration-300\n          group-data-open/navigation-menu-trigger:rotate-180\n          group-data-popup-open/navigation-menu-trigger:rotate-180\n        ",
 				"aria-hidden": "true"
 			})
 		]
@@ -33,7 +50,19 @@ function NavigationMenuTrigger({ className, children, ...props }) {
 function NavigationMenuLink({ className, ...props }) {
 	return /* @__PURE__ */ jsx(NavigationMenu.Link, {
 		"data-slot": "navigation-menu-link",
-		className: cn("flex items-center gap-2 rounded-berget-xs p-2 text-sm transition-all outline-none hover:bg-berget-surface-02 focus:bg-berget-surface-02 focus-visible:ring-3 focus-visible:ring-berget-ring/50 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-berget-xs data-active:bg-berget-surface-02/50 data-active:hover:bg-berget-surface-02 data-active:focus:bg-berget-surface-02 [&_svg:not([class*='size-'])]:size-4", className),
+		className: cn(`
+          flex items-center gap-2 rounded-berget-xs p-2 text-sm transition-all
+          outline-none
+          hover:bg-berget-surface-02
+          focus:bg-berget-surface-02
+          focus-visible:ring-3 focus-visible:ring-berget-ring/50
+          focus-visible:outline-1
+          in-data-[slot=navigation-menu-content]:rounded-berget-xs
+          data-active:bg-berget-surface-02/50
+          data-active:hover:bg-berget-surface-02
+          data-active:focus:bg-berget-surface-02
+          [&_svg:not([class*='size-'])]:size-4
+        `, className),
 		...props
 	});
 }
@@ -43,11 +72,18 @@ function NavigationMenuPositioner({ className, side = "bottom", sideOffset = 8,
 		sideOffset,
 		align,
 		alignOffset,
-		className: cn("isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0", className),
+		className: cn(`
+            isolate z-50 h-(--positioner-height) w-(--positioner-width)
+            max-w-(--available-width) transition-[top,left,right,bottom]
+            duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)]
+            data-instant:transition-none
+            data-[side=bottom]:before:inset-x-0
+            data-[side=bottom]:before:top-[-10px]
+          `, className),
 		...props,
 		children: /* @__PURE__ */ jsx(NavigationMenu.Popup, {
-			className: "data-[ending-style]:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-berget-xs bg-berget-popover text-berget-popover-foreground shadow-berget-lg ring-1 ring-berget-border transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:scale-90 data-starting-style:opacity-0",
-			children: /* @__PURE__ */ jsx(NavigationMenu.Viewport, { className: "relative size-full overflow-hidden" })
+			className: "\n            data-[ending-style]:easing-[ease]\n            xs:w-(--popup-width)\n            relative h-(--popup-height) w-(--popup-width)\n            origin-(--transform-origin) rounded-berget-xs bg-berget-popover\n            text-berget-popover-foreground shadow-berget-lg ring-1\n            ring-berget-border\n            transition-[opacity,transform,width,height,scale,translate]\n            duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] outline-none\n            data-ending-style:scale-90 data-ending-style:opacity-0\n            data-ending-style:duration-150\n            data-starting-style:scale-90 data-starting-style:opacity-0\n          ",
+			children: /* @__PURE__ */ jsx(NavigationMenu.Viewport, { className: "\n            relative size-full overflow-hidden\n          " })
 		})
 	}) });
 }