@bergetai/ui 0.8.0 → 0.10.0

package/dist/index.d.cts

@@ -45,7 +45,7 @@ declare const buttonVariants: (props?: ({
 declare function Button$1({ className, variant, size, ...props }: Button$2.Props & VariantProps<typeof buttonVariants>): react_jsx_runtime.JSX.Element;
 
 /** Variants exposed by the Berget wrapper. */
-type CustomVariant = 'default' | 'primary' | 'destructive' | 'outline' | 'ghost' | 'link';
+type CustomVariant = 'default' | 'primary' | 'destructive' | 'link';
 /** Props for the Berget Button wrapper. */
 interface ButtonProps extends Omit<React$1.ComponentProps<typeof Button$1>, 'variant' | 'ref'> {
     /** Visual style variant. `primary` is Berget-specific. */
@@ -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,63 +605,6 @@ interface FeatureListProps extends React$1.HTMLAttributes<HTMLUListElement> {
 }
 declare const FeatureList: React$1.ForwardRefExoticComponent<FeatureListProps & React$1.RefAttributes<HTMLUListElement>>;
 
-interface HeroBlockProps extends React$1.HTMLAttributes<HTMLDivElement> {
-    /**
-     * Optional icon for the tagline badge
-     */
-    taglineIcon?: LucideIcon;
-    /**
-     * Tagline text (appears in badge)
-     */
-    tagline?: string;
-    /**
-     * Main hero title
-     */
-    title: string;
-    /**
-     * Hero description
-     */
-    description: string;
-    /**
-     * Call-to-action buttons
-     */
-    actions?: React$1.ReactNode;
-}
-/**
- * Hero Block Component
- *
- * Full-width hero section with optional tagline, title, description, and CTAs.
- * Based on the pattern from why-berget and other landing pages.
- *
- * **Features:**
- * - Tagline badge with optional icon
- * - Responsive sizing
- * - CTA button slots
- *
- * **Use Cases:**
- * - Page heroes
- * - Landing page intros
- * - Feature announcements
- * - Product showcases
- *
- * @example
- * ```tsx
- * <HeroBlock
- *   tagline="Built for Europe"
- *   taglineIcon={Shield}
- *   title="European AI Infrastructure"
- *   description="Deploy and scale AI models with data residency in Europe"
- *   actions={
- *     <>
- *       <Button size="lg" variant="primary">Get Started</Button>
- *       <Button size="lg" variant="outline">Learn More</Button>
- *     </>
- *   }
- * />
- * ```
- */
-declare const HeroBlock: React$1.ForwardRefExoticComponent<HeroBlockProps & React$1.RefAttributes<HTMLDivElement>>;
-
 interface CodeBlockProps {
     code: string;
     language?: string;
@@ -729,4 +672,4 @@ interface FogIllustrationProps {
 }
 declare const FogIllustration: ({ palette, speed, className }: FogIllustrationProps) => react_jsx_runtime.JSX.Element;
 
-export { Alert, AlertDescription, type AlertDescriptionProps, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTitleProps, Badge, type BadgeProps, BergetLogo, type BergetLogoProps, Box, type BoxProps, type SpacingScale as BoxSpacingScale, Button, type ButtonProps, COUNTRIES, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, Checkbox, type CheckboxProps, CodeBlock, type CodeBlockProps, Container, type ContainerProps, type Country, CountrySelect, type CountrySelectProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EU_COUNTRY_CODES, FOG_BRAND_PALETTE, FeatureList, type FeatureListProps, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FogIllustration, type FogIllustrationProps, type FogPalette, Grid, type GridColsScale, type GridProps, type GridRowsScale, type SpacingScale$1 as GridSpacingScale, HeroBlock, type HeroBlockProps, Icon, type IconProps, Input, type InputProps, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, type ItemProps, ItemSeparator, ItemTitle, Label, LanguageSelect, type LanguageSelectOption, type LanguageSelectProps, Link, type LinkProps, List, ListHeader, type ListHeaderProps, ListItem, type ListItemProps, type ListProps, ModelCard, type ModelCardProps, type ModelCategory, type ModelLifecycle, ModelLogo, type ModelLogoProps, type ModelLogoProvider, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPositioner, NavigationMenuTrigger, Select, type SelectOption, type SelectProps, Switch, type SwitchProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, type TerminalExample, TextArea, type TextAreaProps, type Theme, ThemeProvider, type ThemeProviderProps, ThemeToggle, type ThemeToggleProps, Typography, type TypographyProps, WindowFrame, type WindowFrameProps, type WindowTab, alertVariants, badgeVariants, boxVariants, buttonVariants, cardVariants, categoryLabels, checkboxVariants, containerVariants, getCountryByCode, getCountryByName, gridVariants, isEUCountry, linkVariants, navigationMenuTriggerStyle, selectVariants, switchRootVariants, switchThumbVariants, textAreaVariants, typographyVariants, useTheme };
+export { Alert, AlertDescription, type AlertDescriptionProps, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTitleProps, Badge, type BadgeProps, BergetLogo, type BergetLogoProps, Box, type BoxProps, type SpacingScale as BoxSpacingScale, Button, type ButtonProps, COUNTRIES, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, Checkbox, type CheckboxProps, CodeBlock, type CodeBlockProps, Container, type ContainerProps, type Country, CountrySelect, type CountrySelectProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EU_COUNTRY_CODES, FOG_BRAND_PALETTE, FeatureList, type FeatureListProps, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FogIllustration, type FogIllustrationProps, type FogPalette, Grid, type GridColsScale, type GridProps, type GridRowsScale, type SpacingScale$1 as GridSpacingScale, Icon, type IconProps, Input, type InputProps, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, type ItemProps, ItemSeparator, ItemTitle, Label, LanguageSelect, type LanguageSelectOption, type LanguageSelectProps, Link, type LinkProps, List, ListHeader, type ListHeaderProps, ListItem, type ListItemProps, type ListProps, ModelCard, type ModelCardProps, type ModelCategory, type ModelLifecycle, ModelLogo, type ModelLogoProps, type ModelLogoProvider, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPositioner, NavigationMenuTrigger, Select, type SelectOption, type SelectProps, Switch, type SwitchProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, type TerminalExample, TextArea, type TextAreaProps, type Theme, ThemeProvider, type ThemeProviderProps, ThemeToggle, type ThemeToggleProps, Typography, type TypographyProps, WindowFrame, type WindowFrameProps, type WindowTab, alertVariants, badgeVariants, boxVariants, buttonVariants, cardVariants, categoryLabels, checkboxVariants, containerVariants, getCountryByCode, getCountryByName, gridVariants, isEUCountry, linkVariants, navigationMenuTriggerStyle, selectVariants, switchRootVariants, switchThumbVariants, textAreaVariants, typographyVariants, useTheme };

package/dist/index.d.ts

@@ -45,7 +45,7 @@ declare const buttonVariants: (props?: ({
 declare function Button$1({ className, variant, size, ...props }: Button$2.Props & VariantProps<typeof buttonVariants>): react_jsx_runtime.JSX.Element;
 
 /** Variants exposed by the Berget wrapper. */
-type CustomVariant = 'default' | 'primary' | 'destructive' | 'outline' | 'ghost' | 'link';
+type CustomVariant = 'default' | 'primary' | 'destructive' | 'link';
 /** Props for the Berget Button wrapper. */
 interface ButtonProps extends Omit<React$1.ComponentProps<typeof Button$1>, 'variant' | 'ref'> {
     /** Visual style variant. `primary` is Berget-specific. */
@@ -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,63 +605,6 @@ interface FeatureListProps extends React$1.HTMLAttributes<HTMLUListElement> {
 }
 declare const FeatureList: React$1.ForwardRefExoticComponent<FeatureListProps & React$1.RefAttributes<HTMLUListElement>>;
 
-interface HeroBlockProps extends React$1.HTMLAttributes<HTMLDivElement> {
-    /**
-     * Optional icon for the tagline badge
-     */
-    taglineIcon?: LucideIcon;
-    /**
-     * Tagline text (appears in badge)
-     */
-    tagline?: string;
-    /**
-     * Main hero title
-     */
-    title: string;
-    /**
-     * Hero description
-     */
-    description: string;
-    /**
-     * Call-to-action buttons
-     */
-    actions?: React$1.ReactNode;
-}
-/**
- * Hero Block Component
- *
- * Full-width hero section with optional tagline, title, description, and CTAs.
- * Based on the pattern from why-berget and other landing pages.
- *
- * **Features:**
- * - Tagline badge with optional icon
- * - Responsive sizing
- * - CTA button slots
- *
- * **Use Cases:**
- * - Page heroes
- * - Landing page intros
- * - Feature announcements
- * - Product showcases
- *
- * @example
- * ```tsx
- * <HeroBlock
- *   tagline="Built for Europe"
- *   taglineIcon={Shield}
- *   title="European AI Infrastructure"
- *   description="Deploy and scale AI models with data residency in Europe"
- *   actions={
- *     <>
- *       <Button size="lg" variant="primary">Get Started</Button>
- *       <Button size="lg" variant="outline">Learn More</Button>
- *     </>
- *   }
- * />
- * ```
- */
-declare const HeroBlock: React$1.ForwardRefExoticComponent<HeroBlockProps & React$1.RefAttributes<HTMLDivElement>>;
-
 interface CodeBlockProps {
     code: string;
     language?: string;
@@ -729,4 +672,4 @@ interface FogIllustrationProps {
 }
 declare const FogIllustration: ({ palette, speed, className }: FogIllustrationProps) => react_jsx_runtime.JSX.Element;
 
-export { Alert, AlertDescription, type AlertDescriptionProps, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTitleProps, Badge, type BadgeProps, BergetLogo, type BergetLogoProps, Box, type BoxProps, type SpacingScale as BoxSpacingScale, Button, type ButtonProps, COUNTRIES, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, Checkbox, type CheckboxProps, CodeBlock, type CodeBlockProps, Container, type ContainerProps, type Country, CountrySelect, type CountrySelectProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EU_COUNTRY_CODES, FOG_BRAND_PALETTE, FeatureList, type FeatureListProps, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FogIllustration, type FogIllustrationProps, type FogPalette, Grid, type GridColsScale, type GridProps, type GridRowsScale, type SpacingScale$1 as GridSpacingScale, HeroBlock, type HeroBlockProps, Icon, type IconProps, Input, type InputProps, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, type ItemProps, ItemSeparator, ItemTitle, Label, LanguageSelect, type LanguageSelectOption, type LanguageSelectProps, Link, type LinkProps, List, ListHeader, type ListHeaderProps, ListItem, type ListItemProps, type ListProps, ModelCard, type ModelCardProps, type ModelCategory, type ModelLifecycle, ModelLogo, type ModelLogoProps, type ModelLogoProvider, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPositioner, NavigationMenuTrigger, Select, type SelectOption, type SelectProps, Switch, type SwitchProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, type TerminalExample, TextArea, type TextAreaProps, type Theme, ThemeProvider, type ThemeProviderProps, ThemeToggle, type ThemeToggleProps, Typography, type TypographyProps, WindowFrame, type WindowFrameProps, type WindowTab, alertVariants, badgeVariants, boxVariants, buttonVariants, cardVariants, categoryLabels, checkboxVariants, containerVariants, getCountryByCode, getCountryByName, gridVariants, isEUCountry, linkVariants, navigationMenuTriggerStyle, selectVariants, switchRootVariants, switchThumbVariants, textAreaVariants, typographyVariants, useTheme };
+export { Alert, AlertDescription, type AlertDescriptionProps, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTitleProps, Badge, type BadgeProps, BergetLogo, type BergetLogoProps, Box, type BoxProps, type SpacingScale as BoxSpacingScale, Button, type ButtonProps, COUNTRIES, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, Checkbox, type CheckboxProps, CodeBlock, type CodeBlockProps, Container, type ContainerProps, type Country, CountrySelect, type CountrySelectProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EU_COUNTRY_CODES, FOG_BRAND_PALETTE, FeatureList, type FeatureListProps, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FogIllustration, type FogIllustrationProps, type FogPalette, Grid, type GridColsScale, type GridProps, type GridRowsScale, type SpacingScale$1 as GridSpacingScale, Icon, type IconProps, Input, type InputProps, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, type ItemProps, ItemSeparator, ItemTitle, Label, LanguageSelect, type LanguageSelectOption, type LanguageSelectProps, Link, type LinkProps, List, ListHeader, type ListHeaderProps, ListItem, type ListItemProps, type ListProps, ModelCard, type ModelCardProps, type ModelCategory, type ModelLifecycle, ModelLogo, type ModelLogoProps, type ModelLogoProvider, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPositioner, NavigationMenuTrigger, Select, type SelectOption, type SelectProps, Switch, type SwitchProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, type TerminalExample, TextArea, type TextAreaProps, type Theme, ThemeProvider, type ThemeProviderProps, ThemeToggle, type ThemeToggleProps, Typography, type TypographyProps, WindowFrame, type WindowFrameProps, type WindowTab, alertVariants, badgeVariants, boxVariants, buttonVariants, cardVariants, categoryLabels, checkboxVariants, containerVariants, getCountryByCode, getCountryByName, gridVariants, isEUCountry, linkVariants, navigationMenuTriggerStyle, selectVariants, switchRootVariants, switchThumbVariants, textAreaVariants, typographyVariants, useTheme };

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"
+      ]
     }
   }
 });
@@ -253,21 +262,72 @@ function Button({
 
 // src/components/button/Button.tsx
 import { jsx as jsx4 } from "react/jsx-runtime";
+var interactionClasses = cn(
+  // Outline-based focus indicator; neutralise the primitive's ring (the
+  // ring colour class is left — harmless at width 0).
+  "focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-berget-button-focus-ring focus-visible:ring-0",
+  // Neutralise the primitive's disabled fade; variants apply their own tokens.
+  "disabled:pointer-events-none disabled:opacity-100 disabled:cursor-not-allowed",
+  // No press movement: same compound selector as the primitive base's 1px
+  // active translate so tailwind-merge strips it down to 0.
+  "active:not-aria-[haspopup]:translate-y-0"
+);
+var disabledClasses = "disabled:text-berget-button-disabled-fg disabled:shadow-none";
 function brandVariantClasses(variant) {
   switch (variant) {
     case "primary":
-      return "bg-berget-button-primary-bg text-berget-button-primary-fg shadow-berget-lg hover:bg-berget-button-primary-hover hover:shadow-berget-lg";
+      return cn(
+        // Flat tinted-glass fill; the alpha carries the state, so no shadow lift.
+        "bg-berget-button-primary-bg text-berget-button-primary-fg",
+        "hover:bg-berget-button-primary-hover",
+        // Pin the foreground on hover — the underlying primitive ghost adds
+        // hover:text-foreground, which would override the primary fg token.
+        "hover:text-berget-button-primary-fg",
+        "active:bg-berget-button-primary-active",
+        // Keep the resting (transparent) border on focus — the outline is the indicator.
+        "focus-visible:border-transparent",
+        disabledClasses,
+        "disabled:bg-berget-button-primary-disabled-bg"
+      );
     case "destructive":
-      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":
-      return "bg-transparent text-berget-foreground hover:bg-berget-brand-granite-800 hover:text-berget-foreground";
+      return cn(
+        "bg-berget-button-destructive-bg text-berget-button-destructive-fg",
+        "hover:bg-berget-button-destructive-hover",
+        // Pin the foreground on hover — the underlying primitive ghost adds
+        // hover:text-foreground, which would override the destructive fg token.
+        "hover:text-berget-button-destructive-hover-fg",
+        "active:bg-berget-button-destructive-active",
+        "focus-visible:border-transparent",
+        disabledClasses,
+        "disabled:bg-berget-button-destructive-disabled-bg"
+      );
     case "link":
-      return "bg-transparent hover:bg-transparent focus:bg-transparent active:bg-transparent text-berget-button-link-fg underline-offset-4 hover:underline";
+      return cn(
+        "h-auto bg-transparent p-0 text-berget-button-link-fg underline-offset-4 shadow-none",
+        "hover:bg-transparent hover:text-berget-button-link-hover-fg",
+        // On press, return to the resting foreground (hover fg otherwise sticks).
+        "active:text-berget-button-link-fg",
+        "focus:bg-transparent",
+        // Neutralise the primitive base's focus-visible:border-ring + ring-3,
+        // which land on link too (the primitive merges its cva base under
+        // every variant): the outline above is the only focus indicator.
+        "focus-visible:border-transparent focus-visible:ring-0",
+        "focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-berget-button-focus-ring focus-visible:rounded-berget-xs",
+        "disabled:text-berget-button-disabled-fg disabled:no-underline",
+        "disabled:opacity-100 disabled:cursor-not-allowed"
+      );
     case "default":
     default:
-      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";
+      return cn(
+        // Solid granite-800 fill with a granite-700 border on dark surfaces
+        // (ink glass in light theme).
+        "bg-berget-button-default-bg border-berget-button-default-border text-berget-button-default-fg",
+        "hover:bg-berget-button-default-hover",
+        "active:bg-berget-button-default-active",
+        "focus-visible:border-transparent",
+        disabledClasses,
+        "disabled:bg-berget-button-default-disabled-bg"
+      );
   }
 }
 function primitiveVariant(variant) {
@@ -294,9 +354,16 @@ function Button2({
   const isLink = variant === "link";
   const baseClass = cn(
     !isLink && buttonVariants({ variant: primitiveVariant(variant), size }),
-    // Berget brand overrides
-    !isLink && "rounded-full",
+    // Berget brand overrides — full-width buttons use the square radius;
+    // everything else stays pill-shaped.
+    !isLink && (width === "full" ? "rounded-berget-xs" : "rounded-full"),
+    // Em-based padding, inline = 2× block — matches the 8px/16px spacing-scale
+    // values at the default text-sm (14px) and scales down/up with smaller or
+    // larger button text. h-auto drops the primitive's fixed h-* so the
+    // vertical paddings take effect.
+    !isLink && !isIcon && "py-[0.57em] px-[1.14em] h-auto",
     brandVariantClasses(variant),
+    interactionClasses,
     !isLink && width === "full" && "w-full",
     isIcon && "rounded-full shadow-[0px_1px_3px_rgba(0,0,0,0.1),0px_1px_2px_-1px_rgba(0,0,0,0.1)]",
     className
@@ -324,6 +391,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 +403,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 +413,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 +423,7 @@ var typographyVariants = cva2("", {
   }
 });
 var defaultElementMap = {
+  hero: "h1",
   h1: "h1",
   h2: "h2",
   h3: "h3",
@@ -360,6 +433,7 @@ var defaultElementMap = {
   body: "p",
   small: "p",
   xs: "p",
+  caption: "span",
   mono: "p",
   code: "span"
 };
@@ -397,7 +471,7 @@ function Card({
       "data-slot": "card",
       "data-size": size,
       className: cn3(
-        "group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground ring-1 ring-foreground/10 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+        "group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-berget-xs bg-card py-(--card-spacing) text-sm text-card-foreground ring-1 ring-foreground/10 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
         className
       ),
       ...props
@@ -466,11 +540,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-xs 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",
@@ -806,7 +880,7 @@ var ModelCard = React9.forwardRef(
           {
             variant: "filled",
             padding: "none",
-            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))] hover:ring-2 hover:ring-berget-brand-granite-700 sm:p-6",
+            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",
             children: [
               lifecycle && /* @__PURE__ */ jsx11("div", { className: "absolute top-0 right-0 z-10 overflow-hidden rounded-bl-berget-sm", children: /* @__PURE__ */ jsx11(
                 "div",
@@ -3849,45 +3923,10 @@ var FeatureList = React29.forwardRef(
 );
 FeatureList.displayName = "FeatureList";
 
-// src/components/hero-block/HeroBlock.tsx
-import * as React30 from "react";
-import { jsx as jsx45, jsxs as jsxs25 } from "react/jsx-runtime";
-var HeroBlock = React30.forwardRef(
-  ({ className, taglineIcon: TaglineIcon, tagline, title, description, actions, ...props }, ref) => {
-    return /* @__PURE__ */ jsx45(
-      "div",
-      {
-        ref,
-        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(
-            Badge,
-            {
-              variant: "default",
-              icon: TaglineIcon ? /* @__PURE__ */ jsx45(Icon, { icon: TaglineIcon, size: 16 }) : void 0,
-              iconGap: 2,
-              className: "mb-fluid-md",
-              children: tagline
-            }
-          ),
-          /* @__PURE__ */ jsx45(Typography, { variant: "h1", className: "mb-fluid-md", children: title }),
-          /* @__PURE__ */ jsx45(Typography, { variant: "h3", color: "muted", className: "mb-fluid-lg", children: description }),
-          actions && /* @__PURE__ */ jsx45("div", { className: "flex flex-wrap gap-fluid-md justify-center", children: actions })
-        ] }) })
-      }
-    );
-  }
-);
-HeroBlock.displayName = "HeroBlock";
-
 // src/components/code-block/CodeBlock.tsx
 import { useState as useState3, useEffect as useEffect2, useCallback as useCallback3 } from "react";
 import { Copy, Check as Check4 } from "lucide-react";
-import { jsx as jsx46, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs25 } from "react/jsx-runtime";
 function CodeBlock({ code, language = "text", title, className }) {
   const [html, setHtml] = useState3(null);
   const [copied, setCopied] = useState3(false);
@@ -3903,42 +3942,42 @@ function CodeBlock({ code, language = "text", title, className }) {
     setCopied(true);
     setTimeout(() => setCopied(false), 2e3);
   }, [code]);
-  const copyButton = /* @__PURE__ */ jsx46(
+  const copyButton = /* @__PURE__ */ jsx45(
     "button",
     {
       onClick: handleCopy,
       className: "flex items-center justify-center w-6 h-6 text-berget-muted-foreground hover:text-berget-foreground transition-colors",
       "aria-label": "Copy code",
-      children: copied ? /* @__PURE__ */ jsx46(Check4, { className: "w-3.5 h-3.5" }) : /* @__PURE__ */ jsx46(Copy, { className: "w-3.5 h-3.5" })
+      children: copied ? /* @__PURE__ */ jsx45(Check4, { className: "w-3.5 h-3.5" }) : /* @__PURE__ */ jsx45(Copy, { className: "w-3.5 h-3.5" })
     }
   );
-  return /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsxs25(
     "div",
     {
       className: cn(
-        "rounded-berget-sm border bg-berget-codeblock-bg border-berget-border backdrop-blur-[12px] relative overflow-hidden isolate",
+        "rounded-berget-xs border bg-berget-codeblock-bg border-berget-border backdrop-blur-[12px] relative overflow-hidden isolate",
         className
       ),
       children: [
-        title && /* @__PURE__ */ jsx46("div", { className: "!h-10 flex items-center !px-4 !text-xs !leading-normal border-b border-berget-border bg-berget-codeblock-header-bg", children: /* @__PURE__ */ jsx46("span", { className: "text-berget-muted-foreground", children: title }) }),
-        /* @__PURE__ */ jsx46("div", { className: "absolute right-2 top-2 z-10", children: copyButton }),
-        html ? /* @__PURE__ */ jsx46(
+        title && /* @__PURE__ */ jsx45("div", { className: "!h-10 flex items-center !px-4 !text-xs !leading-normal border-b border-berget-border bg-berget-codeblock-header-bg", children: /* @__PURE__ */ jsx45("span", { className: "text-berget-muted-foreground", children: title }) }),
+        /* @__PURE__ */ jsx45("div", { className: "absolute right-2 top-2 z-10", children: copyButton }),
+        html ? /* @__PURE__ */ jsx45(
           "div",
           {
             className: "[&_.shiki]:!p-4 [&_.shiki]:!m-0 [&_.shiki]:overflow-x-auto [&_.shiki]:!text-sm [&_.shiki]:!leading-relaxed [&_.shiki]:bg-transparent",
             dangerouslySetInnerHTML: { __html: html }
           }
-        ) : /* @__PURE__ */ jsx46("pre", { className: "!p-4 !m-0 overflow-x-auto !text-sm !leading-relaxed text-berget-muted-foreground", children: /* @__PURE__ */ jsx46("code", { children: code }) })
+        ) : /* @__PURE__ */ jsx45("pre", { className: "!p-4 !m-0 overflow-x-auto !text-sm !leading-relaxed text-berget-muted-foreground", children: /* @__PURE__ */ jsx45("code", { children: code }) })
       ]
     }
   );
 }
 
 // src/components/window-frame/WindowFrame.tsx
-import * as React31 from "react";
+import * as React30 from "react";
 import { useState as useState4 } from "react";
-import { jsx as jsx47, jsxs as jsxs27 } from "react/jsx-runtime";
-var WindowFrame = React31.forwardRef(
+import { jsx as jsx46, jsxs as jsxs26 } from "react/jsx-runtime";
+var WindowFrame = React30.forwardRef(
   ({ title = "window", tabs, activeTab, onTabChange, children, className, ...props }, ref) => {
     const [internalActive, setInternalActive] = useState4(tabs?.[0]?.id ?? "");
     const currentTab = activeTab ?? internalActive;
@@ -3949,7 +3988,7 @@ var WindowFrame = React31.forwardRef(
         setInternalActive(id);
       }
     };
-    return /* @__PURE__ */ jsxs27(
+    return /* @__PURE__ */ jsxs26(
       "div",
       {
         ref,
@@ -3959,13 +3998,13 @@ var WindowFrame = React31.forwardRef(
         ),
         ...props,
         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-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" })
+          /* @__PURE__ */ jsxs26("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__ */ jsxs26("div", { className: "flex items-center gap-2 flex-shrink-0", children: [
+              /* @__PURE__ */ jsx46("div", { className: "w-3 h-3 rounded-full bg-berget-brand-muscaria-400" }),
+              /* @__PURE__ */ jsx46("div", { className: "w-3 h-3 rounded-full bg-berget-brand-chanterelle-200" }),
+              /* @__PURE__ */ jsx46("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(
+            tabs && tabs.length > 0 ? /* @__PURE__ */ jsx46("div", { className: "ml-4 flex items-center gap-1", children: tabs.map((tab) => /* @__PURE__ */ jsx46(
               "button",
               {
                 type: "button",
@@ -3977,9 +4016,9 @@ var WindowFrame = React31.forwardRef(
                 children: tab.label
               },
               tab.id
-            )) }) : /* @__PURE__ */ jsx47("span", { className: "ml-4 text-sm font-mono text-berget-brand-moss-400", children: title })
+            )) }) : /* @__PURE__ */ jsx46("span", { className: "ml-4 text-sm font-mono text-berget-brand-moss-400", children: title })
           ] }),
-          /* @__PURE__ */ jsx47("div", { children })
+          /* @__PURE__ */ jsx46("div", { children })
         ]
       }
     );
@@ -3989,7 +4028,7 @@ WindowFrame.displayName = "WindowFrame";
 
 // src/components/fog-illustration/FogIllustration.tsx
 import { useEffect as useEffect3, useRef } from "react";
-import { jsx as jsx48 } from "react/jsx-runtime";
+import { jsx as jsx47 } from "react/jsx-runtime";
 var FOG_BRAND_PALETTE = {
   ink: "#171a1a",
   milk: "#f7f5ed",
@@ -4302,7 +4341,7 @@ var FogIllustration = ({ palette, speed = 1, className }) => {
       gl.deleteFramebuffer(fbo);
     };
   }, []);
-  return /* @__PURE__ */ jsx48("canvas", { ref, "aria-hidden": "true", className: cn("size-full", className) });
+  return /* @__PURE__ */ jsx47("canvas", { ref, "aria-hidden": "true", className: cn("size-full", className) });
 };
 export {
   Alert2 as Alert,
@@ -4374,7 +4413,6 @@ export {
   FieldTitle,
   FogIllustration,
   Grid,
-  HeroBlock,
   Icon,
   Input2 as Input,
   Item2 as Item,