@bergetai/ui 0.7.1 → 0.9.0

package/dist/index.cjs

@@ -266,7 +266,16 @@ var twMerge = (0, import_tailwind_merge.extendTailwindMerge)({
         "rounded-berget-lg",
         "rounded-berget-full"
       ],
-      "font-size": ["text-h1", "text-h2", "text-h3", "text-h4", "text-p", "text-mono"]
+      "font-size": [
+        "text-h1",
+        "text-h2",
+        "text-h3",
+        "text-h4",
+        "text-p",
+        "text-mono",
+        "text-hero",
+        "text-caption"
+      ]
     }
   }
 });
@@ -420,9 +429,9 @@ var import_jsx_runtime4 = require("react/jsx-runtime");
 function brandVariantClasses(variant) {
   switch (variant) {
     case "primary":
-      return "bg-berget-button-primary-bg text-berget-button-primary-fg shadow-lg hover:bg-berget-button-primary-bg/90 hover:shadow-xl";
+      return "bg-berget-button-primary-bg text-berget-button-primary-fg shadow-berget-lg hover:bg-berget-button-primary-hover hover:shadow-berget-lg";
     case "destructive":
-      return "bg-berget-button-destructive-bg text-berget-button-destructive-fg shadow-sm hover:bg-berget-button-destructive-bg/80 hover:shadow dark:hover:bg-berget-button-destructive-bg/80 dark:hover:text-berget-button-destructive-fg";
+      return "bg-berget-button-destructive-bg text-berget-button-destructive-fg shadow-berget-sm hover:bg-berget-button-destructive-bg/80 hover:shadow-berget-sm dark:hover:bg-berget-button-destructive-bg/80 dark:hover:text-berget-button-destructive-fg";
     case "outline":
       return "border-berget-border-interactive bg-transparent text-berget-foreground hover:bg-berget-surface-hover hover:text-berget-foreground hover:border-berget-border-interactive-elevated";
     case "ghost":
@@ -431,7 +440,7 @@ function brandVariantClasses(variant) {
       return "bg-transparent hover:bg-transparent focus:bg-transparent active:bg-transparent text-berget-button-link-fg underline-offset-4 hover:underline";
     case "default":
     default:
-      return "bg-berget-button-default-bg text-berget-button-default-fg shadow-lg hover:bg-berget-button-default-bg/90 hover:shadow-xl";
+      return "bg-berget-button-default-bg text-berget-button-default-fg shadow-berget-lg hover:bg-berget-button-default-bg/90 hover:shadow-berget-lg";
   }
 }
 function primitiveVariant(variant) {
@@ -488,6 +497,8 @@ var typographyVariants = (0, import_class_variance_authority2.cva)("", {
     variant: {
       // Fluid heading scale — use @theme tokens (clamp-based, 390px → 1440px)
       h1: "text-h1 font-h1 leading-h1 tracking-h1 text-balance",
+      // Hero display — from landing-page /dedicated-inference hero (Ovo, 400, tight display leading)
+      hero: "text-hero font-hero leading-hero tracking-hero text-balance font-normal [font-feature-settings:'normal']",
       h2: "text-h2 font-h2 leading-h2 tracking-h2 text-balance",
       h3: "text-h3 font-h3 leading-h3 tracking-h3 text-balance",
       h4: "text-h4 font-h4 leading-h4 tracking-h4 text-balance",
@@ -498,6 +509,8 @@ var typographyVariants = (0, import_class_variance_authority2.cva)("", {
       body: "text-p font-p leading-p text-pretty",
       small: "text-sm font-sm leading-sm text-pretty",
       xs: "text-xs font-xs leading-xs text-pretty",
+      // Caption / overline / eyebrow (DM Sans, Semibold, uppercase)
+      caption: "text-caption font-caption leading-caption tracking-caption text-pretty font-semibold uppercase",
       // Monospaced — use @theme token
       mono: "text-mono font-mono leading-mono text-pretty",
       // Inline code / spec labels
@@ -506,7 +519,8 @@ var typographyVariants = (0, import_class_variance_authority2.cva)("", {
     color: {
       default: "text-berget-foreground",
       muted: "text-berget-muted-foreground",
-      dim: "text-berget-foreground/65"
+      dim: "text-berget-foreground/65",
+      primary: "text-berget-primary"
     }
   },
   defaultVariants: {
@@ -515,6 +529,7 @@ var typographyVariants = (0, import_class_variance_authority2.cva)("", {
   }
 });
 var defaultElementMap = {
+  hero: "h1",
   h1: "h1",
   h2: "h2",
   h3: "h3",
@@ -524,6 +539,7 @@ var defaultElementMap = {
   body: "p",
   small: "p",
   xs: "p",
+  caption: "span",
   mono: "p",
   code: "span"
 };
@@ -630,11 +646,11 @@ function CardFooter({ className, ...props }) {
 
 // src/components/card/Card.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var cardVariants = (0, import_class_variance_authority3.cva)("rounded-berget-sm", {
+var cardVariants = (0, import_class_variance_authority3.cva)("rounded-berget-sm ring-0", {
   variants: {
     variant: {
-      outlined: "bg-transparent border border-berget-border",
-      filled: "bg-berget-card-filled-bg border border-berget-border"
+      outlined: "bg-transparent border border-berget-border-subtle",
+      filled: "bg-berget-card-filled-bg border border-berget-border-subtle"
     },
     padding: {
       none: "p-0",
@@ -982,7 +998,7 @@ var ModelCard = React9.forwardRef(
                   children: lifecycleLabels[lifecycle]
                 }
               ) }),
-              (icon || provider || category) && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex h-12 w-12 shrink-0 items-center justify-center rounded-lg border border-berget-border bg-white/5 text-berget-foreground", children: icon ?? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ModelLogo, { provider, category }) }),
+              (icon || provider || category) && /* @__PURE__ */ (0, import_jsx_runtime11.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", children: icon ?? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ModelLogo, { provider, category }) }),
               /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("header", { children: [
                 eyebrow && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                   Typography,
@@ -2240,7 +2256,7 @@ function Checkbox({ className, ...props }) {
 // src/components/checkbox/Checkbox.tsx
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var checkboxVariants = (0, import_class_variance_authority10.cva)(
-  "inline-flex items-center justify-center rounded-md transition-all duration-200 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+  "inline-flex items-center justify-center rounded-berget-xs transition-all duration-200 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
   {
     variants: {
       variant: {
@@ -2334,7 +2350,7 @@ var switchRootVariants = (0, import_class_variance_authority11.cva)(
   {
     variants: {
       variant: {
-        default: "data-unchecked:bg-berget-border data-checked:bg-berget-secondary",
+        default: "data-unchecked:bg-berget-border data-checked:bg-berget-primary",
         primary: "data-unchecked:bg-berget-border-subtle data-checked:bg-berget-switch-primary-checked",
         subtle: "data-unchecked:bg-berget-border-subtle data-checked:bg-berget-switch-subtle-checked"
       },
@@ -3574,11 +3590,11 @@ var linkVariants = (0, import_class_variance_authority16.cva)(
     variants: {
       variant: {
         default: "text-foreground hover:text-foreground/80",
-        primary: "text-berget-secondary hover:text-berget-secondary/80",
+        primary: "text-berget-brand-moss-400 hover:text-berget-brand-moss-500",
         secondary: "text-berget-accent hover:text-berget-accent/80",
         ghost: "text-muted-foreground hover:text-foreground",
         muted: "text-muted-foreground hover:text-muted-foreground/80",
-        code: "text-berget-secondary hover:text-berget-secondary/80 font-mono text-sm bg-berget-primary-tint px-2 py-1 rounded hover:bg-berget-primary-tint-hover"
+        code: "text-berget-brand-moss-400 hover:text-berget-brand-moss-500 font-mono text-sm bg-berget-primary-tint px-2 py-1 rounded hover:bg-berget-primary-tint-hover"
       },
       size: {
         sm: "text-sm",
@@ -3845,7 +3861,7 @@ var LanguageSelect = React27.forwardRef(
                 // Shadow
                 "shadow-berget-lg",
                 // Rounded corners
-                "rounded-md",
+                "rounded-berget-xs",
                 // Animations
                 "transition-[opacity,transform]",
                 "data-starting-style:opacity-0 data-starting-style:scale-95 data-ending-style:opacity-0 data-ending-style:scale-95",
@@ -4015,45 +4031,17 @@ FeatureList.displayName = "FeatureList";
 
 // src/components/hero-block/HeroBlock.tsx
 var React30 = __toESM(require("react"), 1);
-var import_class_variance_authority21 = require("class-variance-authority");
 var import_jsx_runtime45 = require("react/jsx-runtime");
-var heroBlockVariants = (0, import_class_variance_authority21.cva)(
-  "relative overflow-hidden min-h-[40dvh] flex items-center py-fluid-2xl",
-  {
-    variants: {
-      variant: {
-        default: "",
-        moss: "",
-        gradient: ""
-      },
-      withPattern: {
-        true: "",
-        false: ""
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      withPattern: false
-    }
-  }
-);
 var HeroBlock = React30.forwardRef(
-  ({
-    className,
-    variant,
-    withPattern,
-    taglineIcon: TaglineIcon,
-    tagline,
-    title,
-    description,
-    actions,
-    ...props
-  }, ref) => {
+  ({ className, taglineIcon: TaglineIcon, tagline, title, description, actions, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
       "div",
       {
         ref,
-        className: cn(heroBlockVariants({ variant, withPattern }), className),
+        className: cn(
+          "relative overflow-hidden min-h-[40dvh] flex items-center py-fluid-2xl",
+          className
+        ),
         ...props,
         children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "mx-auto px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "mx-auto text-center max-w-4xl", children: [
           tagline && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
@@ -4193,9 +4181,9 @@ var WindowFrame = React31.forwardRef(
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex items-center gap-2 px-4 py-3 border-b border-berget-brand-granite-700 bg-berget-brand-granite-900", children: [
             /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex items-center gap-2 flex-shrink-0", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "w-3 h-3 rounded-full bg-[#FF5F56]" }),
-              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "w-3 h-3 rounded-full bg-[#FFBD2E]" }),
-              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "w-3 h-3 rounded-full bg-[#27C93F]" })
+              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "w-3 h-3 rounded-full bg-berget-brand-muscaria-400" }),
+              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "w-3 h-3 rounded-full bg-berget-brand-chanterelle-200" }),
+              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "w-3 h-3 rounded-full bg-berget-brand-moss-400" })
             ] }),
             tabs && tabs.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "ml-4 flex items-center gap-1", children: tabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
               "button",
@@ -4204,7 +4192,7 @@ var WindowFrame = React31.forwardRef(
                 onClick: () => handleTabChange(tab.id),
                 className: cn(
                   "px-3 py-1 text-sm transition-colors cursor-pointer",
-                  currentTab === tab.id ? "rounded-lg bg-white/10 text-berget-foreground font-medium" : "rounded text-berget-muted-foreground hover:text-berget-foreground font-medium"
+                  currentTab === tab.id ? "rounded-berget-xs bg-white/10 text-berget-foreground font-medium" : "rounded text-berget-muted-foreground hover:text-berget-foreground font-medium"
                 ),
                 children: tab.label
               },