@bergetai/ui 0.7.1 → 0.9.0

package/dist/index.d.cts

@@ -59,8 +59,8 @@ interface ButtonProps extends Omit<React$1.ComponentProps<typeof Button$1>, 'var
 declare function Button({ className, variant, size, asChild, width, type, ref, children, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
 
 declare const typographyVariants: (props?: ({
-    variant?: "small" | "xs" | "body" | "code" | "h1" | "h2" | "h3" | "h4" | "h5" | "large" | "mono" | null | undefined;
-    color?: "default" | "muted" | "dim" | null | undefined;
+    variant?: "small" | "caption" | "xs" | "body" | "code" | "h1" | "h2" | "h3" | "h4" | "h5" | "hero" | "large" | "mono" | null | undefined;
+    color?: "default" | "primary" | "muted" | "dim" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface TypographyProps extends Omit<React$1.HTMLAttributes<HTMLElement>, 'color'>, VariantProps<typeof typographyVariants> {
     as?: React$1.ElementType;
@@ -605,11 +605,7 @@ interface FeatureListProps extends React$1.HTMLAttributes<HTMLUListElement> {
 }
 declare const FeatureList: React$1.ForwardRefExoticComponent<FeatureListProps & React$1.RefAttributes<HTMLUListElement>>;
 
-declare const heroBlockVariants: (props?: ({
-    variant?: "default" | "moss" | "gradient" | null | undefined;
-    withPattern?: boolean | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-interface HeroBlockProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof heroBlockVariants> {
+interface HeroBlockProps extends React$1.HTMLAttributes<HTMLDivElement> {
     /**
      * Optional icon for the tagline badge
      */
@@ -630,25 +626,14 @@ interface HeroBlockProps extends React$1.HTMLAttributes<HTMLDivElement>, Variant
      * Call-to-action buttons
      */
     actions?: React$1.ReactNode;
-    /**
-     * Show pattern background
-     * @default true
-     */
-    withPattern?: boolean;
 }
 /**
  * Hero Block Component
  *
- * Full-width hero section with optional grid background, tagline, title, description, and CTAs.
+ * Full-width hero section with optional tagline, title, description, and CTAs.
  * Based on the pattern from why-berget and other landing pages.
  *
- * **Variants:**
- * - `default` - Simple gradient
- * - `moss` - Green gradient overlay
- * - `gradient` - Diagonal gradient
- *
  * **Features:**
- * - Optional grid background
  * - Tagline badge with optional icon
  * - Responsive sizing
  * - CTA button slots
@@ -666,10 +651,9 @@ interface HeroBlockProps extends React$1.HTMLAttributes<HTMLDivElement>, Variant
  *   taglineIcon={Shield}
  *   title="European AI Infrastructure"
  *   description="Deploy and scale AI models with data residency in Europe"
- *   variant="moss"
  *   actions={
  *     <>
- *       <Button size="lg">Get Started</Button>
+ *       <Button size="lg" variant="primary">Get Started</Button>
  *       <Button size="lg" variant="outline">Learn More</Button>
  *     </>
  *   }

package/dist/index.d.ts

@@ -59,8 +59,8 @@ interface ButtonProps extends Omit<React$1.ComponentProps<typeof Button$1>, 'var
 declare function Button({ className, variant, size, asChild, width, type, ref, children, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
 
 declare const typographyVariants: (props?: ({
-    variant?: "small" | "xs" | "body" | "code" | "h1" | "h2" | "h3" | "h4" | "h5" | "large" | "mono" | null | undefined;
-    color?: "default" | "muted" | "dim" | null | undefined;
+    variant?: "small" | "caption" | "xs" | "body" | "code" | "h1" | "h2" | "h3" | "h4" | "h5" | "hero" | "large" | "mono" | null | undefined;
+    color?: "default" | "primary" | "muted" | "dim" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface TypographyProps extends Omit<React$1.HTMLAttributes<HTMLElement>, 'color'>, VariantProps<typeof typographyVariants> {
     as?: React$1.ElementType;
@@ -605,11 +605,7 @@ interface FeatureListProps extends React$1.HTMLAttributes<HTMLUListElement> {
 }
 declare const FeatureList: React$1.ForwardRefExoticComponent<FeatureListProps & React$1.RefAttributes<HTMLUListElement>>;
 
-declare const heroBlockVariants: (props?: ({
-    variant?: "default" | "moss" | "gradient" | null | undefined;
-    withPattern?: boolean | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-interface HeroBlockProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof heroBlockVariants> {
+interface HeroBlockProps extends React$1.HTMLAttributes<HTMLDivElement> {
     /**
      * Optional icon for the tagline badge
      */
@@ -630,25 +626,14 @@ interface HeroBlockProps extends React$1.HTMLAttributes<HTMLDivElement>, Variant
      * Call-to-action buttons
      */
     actions?: React$1.ReactNode;
-    /**
-     * Show pattern background
-     * @default true
-     */
-    withPattern?: boolean;
 }
 /**
  * Hero Block Component
  *
- * Full-width hero section with optional grid background, tagline, title, description, and CTAs.
+ * Full-width hero section with optional tagline, title, description, and CTAs.
  * Based on the pattern from why-berget and other landing pages.
  *
- * **Variants:**
- * - `default` - Simple gradient
- * - `moss` - Green gradient overlay
- * - `gradient` - Diagonal gradient
- *
  * **Features:**
- * - Optional grid background
  * - Tagline badge with optional icon
  * - Responsive sizing
  * - CTA button slots
@@ -666,10 +651,9 @@ interface HeroBlockProps extends React$1.HTMLAttributes<HTMLDivElement>, Variant
  *   taglineIcon={Shield}
  *   title="European AI Infrastructure"
  *   description="Deploy and scale AI models with data residency in Europe"
- *   variant="moss"
  *   actions={
  *     <>
- *       <Button size="lg">Get Started</Button>
+ *       <Button size="lg" variant="primary">Get Started</Button>
  *       <Button size="lg" variant="outline">Learn More</Button>
  *     </>
  *   }

package/dist/index.js

@@ -102,7 +102,16 @@ var twMerge = 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"
+      ]
     }
   }
 });
@@ -256,9 +265,9 @@ import { jsx as jsx4 } from "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":
@@ -267,7 +276,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) {
@@ -324,6 +333,8 @@ var typographyVariants = cva2("", {
     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",
@@ -334,6 +345,8 @@ var typographyVariants = cva2("", {
       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
@@ -342,7 +355,8 @@ var typographyVariants = cva2("", {
     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: {
@@ -351,6 +365,7 @@ var typographyVariants = cva2("", {
   }
 });
 var defaultElementMap = {
+  hero: "h1",
   h1: "h1",
   h2: "h2",
   h3: "h3",
@@ -360,6 +375,7 @@ var defaultElementMap = {
   body: "p",
   small: "p",
   xs: "p",
+  caption: "span",
   mono: "p",
   code: "span"
 };
@@ -466,11 +482,11 @@ function CardFooter({ className, ...props }) {
 
 // src/components/card/Card.tsx
 import { jsx as jsx7 } from "react/jsx-runtime";
-var cardVariants = cva3("rounded-berget-sm", {
+var cardVariants = cva3("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",
@@ -818,7 +834,7 @@ var ModelCard = React9.forwardRef(
                   children: lifecycleLabels[lifecycle]
                 }
               ) }),
-              (icon || provider || category) && /* @__PURE__ */ jsx11("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__ */ jsx11(ModelLogo, { provider, category }) }),
+              (icon || provider || category) && /* @__PURE__ */ jsx11("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__ */ jsx11(ModelLogo, { provider, category }) }),
               /* @__PURE__ */ jsxs5("header", { children: [
                 eyebrow && /* @__PURE__ */ jsx11(
                   Typography,
@@ -2076,7 +2092,7 @@ function Checkbox({ className, ...props }) {
 // src/components/checkbox/Checkbox.tsx
 import { jsx as jsx27, jsxs as jsxs12 } from "react/jsx-runtime";
 var checkboxVariants = cva10(
-  "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: {
@@ -2170,7 +2186,7 @@ var switchRootVariants = cva11(
   {
     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"
       },
@@ -3410,11 +3426,11 @@ var linkVariants = cva16(
     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",
@@ -3681,7 +3697,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",
@@ -3851,45 +3867,17 @@ FeatureList.displayName = "FeatureList";
 
 // src/components/hero-block/HeroBlock.tsx
 import * as React30 from "react";
-import { cva as cva21 } from "class-variance-authority";
 import { jsx as jsx45, jsxs as jsxs25 } from "react/jsx-runtime";
-var heroBlockVariants = cva21(
-  "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__ */ jsx45(
       "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__ */ jsx45("div", { className: "mx-auto px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ jsxs25("div", { className: "mx-auto text-center max-w-4xl", children: [
           tagline && /* @__PURE__ */ jsx45(
@@ -3989,9 +3977,9 @@ var WindowFrame = React31.forwardRef(
         children: [
           /* @__PURE__ */ jsxs27("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__ */ jsxs27("div", { className: "flex items-center gap-2 flex-shrink-0", children: [
-              /* @__PURE__ */ jsx47("div", { className: "w-3 h-3 rounded-full bg-[#FF5F56]" }),
-              /* @__PURE__ */ jsx47("div", { className: "w-3 h-3 rounded-full bg-[#FFBD2E]" }),
-              /* @__PURE__ */ jsx47("div", { className: "w-3 h-3 rounded-full bg-[#27C93F]" })
+              /* @__PURE__ */ jsx47("div", { className: "w-3 h-3 rounded-full bg-berget-brand-muscaria-400" }),
+              /* @__PURE__ */ jsx47("div", { className: "w-3 h-3 rounded-full bg-berget-brand-chanterelle-200" }),
+              /* @__PURE__ */ jsx47("div", { className: "w-3 h-3 rounded-full bg-berget-brand-moss-400" })
             ] }),
             tabs && tabs.length > 0 ? /* @__PURE__ */ jsx47("div", { className: "ml-4 flex items-center gap-1", children: tabs.map((tab) => /* @__PURE__ */ jsx47(
               "button",
@@ -4000,7 +3988,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
               },