@bergetai/ui 0.8.0 → 0.10.0

package/README.md

@@ -49,7 +49,7 @@ Components are organized by category:
 
 - **actions** - Interactive controls (Button)
 - **branding** - Brand identity assets (Logotype, Symbol)
-- **data** - Content presentation (CodeBlock, FeatureCards, HeroBlock, List, StatCard)
+- **data** - Content presentation (CodeBlock, FeatureCards, List, StatCard)
 - **display** - Visual elements (Badge, Card, Icon, Typography)
 - **feedback** - Status and messaging (Alert, SectionHeader)
 - **forms** - Form field primitives (Checkbox, Input, Label, Select, Textarea)

package/dist/index.cjs

@@ -99,7 +99,6 @@ __export(src_exports, {
   FieldTitle: () => FieldTitle,
   FogIllustration: () => FogIllustration,
   Grid: () => Grid,
-  HeroBlock: () => HeroBlock,
   Icon: () => Icon,
   Input: () => Input2,
   Item: () => Item2,
@@ -266,7 +265,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"
+      ]
     }
   }
 });
@@ -417,21 +425,72 @@ function Button({
 
 // src/components/button/Button.tsx
 var import_jsx_runtime4 = require("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) {
@@ -458,9 +517,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
@@ -488,6 +554,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 +566,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 +576,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 +586,7 @@ var typographyVariants = (0, import_class_variance_authority2.cva)("", {
   }
 });
 var defaultElementMap = {
+  hero: "h1",
   h1: "h1",
   h2: "h2",
   h3: "h3",
@@ -524,6 +596,7 @@ var defaultElementMap = {
   body: "p",
   small: "p",
   xs: "p",
+  caption: "span",
   mono: "p",
   code: "span"
 };
@@ -561,7 +634,7 @@ function Card({
       "data-slot": "card",
       "data-size": size,
       className: (0, import_cn2.cn)(
-        "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
@@ -630,11 +703,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-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",
@@ -970,7 +1043,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__ */ (0, import_jsx_runtime11.jsx)("div", { className: "absolute top-0 right-0 z-10 overflow-hidden rounded-bl-berget-sm", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                 "div",
@@ -4013,41 +4086,6 @@ var FeatureList = React29.forwardRef(
 );
 FeatureList.displayName = "FeatureList";
 
-// src/components/hero-block/HeroBlock.tsx
-var React30 = __toESM(require("react"), 1);
-var import_jsx_runtime45 = require("react/jsx-runtime");
-var HeroBlock = React30.forwardRef(
-  ({ className, taglineIcon: TaglineIcon, tagline, title, description, actions, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-      "div",
-      {
-        ref,
-        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)(
-            Badge,
-            {
-              variant: "default",
-              icon: TaglineIcon ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Icon, { icon: TaglineIcon, size: 16 }) : void 0,
-              iconGap: 2,
-              className: "mb-fluid-md",
-              children: tagline
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Typography, { variant: "h1", className: "mb-fluid-md", children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Typography, { variant: "h3", color: "muted", className: "mb-fluid-lg", children: description }),
-          actions && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "flex flex-wrap gap-fluid-md justify-center", children: actions })
-        ] }) })
-      }
-    );
-  }
-);
-HeroBlock.displayName = "HeroBlock";
-
 // src/components/code-block/CodeBlock.tsx
 var import_react2 = require("react");
 var import_lucide_react15 = require("lucide-react");
@@ -4091,7 +4129,7 @@ function getHighlighter() {
 }
 
 // src/components/code-block/CodeBlock.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 function CodeBlock({ code, language = "text", title, className }) {
   const [html, setHtml] = (0, import_react2.useState)(null);
   const [copied, setCopied] = (0, import_react2.useState)(false);
@@ -4107,42 +4145,42 @@ function CodeBlock({ code, language = "text", title, className }) {
     setCopied(true);
     setTimeout(() => setCopied(false), 2e3);
   }, [code]);
-  const copyButton = /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  const copyButton = /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
     "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__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react15.Check, { className: "w-3.5 h-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react15.Copy, { className: "w-3.5 h-3.5" })
+      children: copied ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_lucide_react15.Check, { className: "w-3.5 h-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_lucide_react15.Copy, { className: "w-3.5 h-3.5" })
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
     "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__ */ (0, import_jsx_runtime46.jsx)("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__ */ (0, import_jsx_runtime46.jsx)("span", { className: "text-berget-muted-foreground", children: title }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "absolute right-2 top-2 z-10", children: copyButton }),
-        html ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+        title && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("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__ */ (0, import_jsx_runtime45.jsx)("span", { className: "text-berget-muted-foreground", children: title }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "absolute right-2 top-2 z-10", children: copyButton }),
+        html ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           "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__ */ (0, import_jsx_runtime46.jsx)("pre", { className: "!p-4 !m-0 overflow-x-auto !text-sm !leading-relaxed text-berget-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("code", { children: code }) })
+        ) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("pre", { className: "!p-4 !m-0 overflow-x-auto !text-sm !leading-relaxed text-berget-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("code", { children: code }) })
       ]
     }
   );
 }
 
 // src/components/window-frame/WindowFrame.tsx
-var React31 = __toESM(require("react"), 1);
+var React30 = __toESM(require("react"), 1);
 var import_react3 = require("react");
-var import_jsx_runtime47 = require("react/jsx-runtime");
-var WindowFrame = React31.forwardRef(
+var import_jsx_runtime46 = require("react/jsx-runtime");
+var WindowFrame = React30.forwardRef(
   ({ title = "window", tabs, activeTab, onTabChange, children, className, ...props }, ref) => {
     const [internalActive, setInternalActive] = (0, import_react3.useState)(tabs?.[0]?.id ?? "");
     const currentTab = activeTab ?? internalActive;
@@ -4153,7 +4191,7 @@ var WindowFrame = React31.forwardRef(
         setInternalActive(id);
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
       "div",
       {
         ref,
@@ -4163,13 +4201,13 @@ var WindowFrame = React31.forwardRef(
         ),
         ...props,
         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-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" })
+          /* @__PURE__ */ (0, import_jsx_runtime46.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_runtime46.jsxs)("div", { className: "flex items-center gap-2 flex-shrink-0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "w-3 h-3 rounded-full bg-berget-brand-muscaria-400" }),
+              /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "w-3 h-3 rounded-full bg-berget-brand-chanterelle-200" }),
+              /* @__PURE__ */ (0, import_jsx_runtime46.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)(
+            tabs && tabs.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "ml-4 flex items-center gap-1", children: tabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
               "button",
               {
                 type: "button",
@@ -4181,9 +4219,9 @@ var WindowFrame = React31.forwardRef(
                 children: tab.label
               },
               tab.id
-            )) }) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "ml-4 text-sm font-mono text-berget-brand-moss-400", children: title })
+            )) }) : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "ml-4 text-sm font-mono text-berget-brand-moss-400", children: title })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { children })
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { children })
         ]
       }
     );
@@ -4193,7 +4231,7 @@ WindowFrame.displayName = "WindowFrame";
 
 // src/components/fog-illustration/FogIllustration.tsx
 var import_react4 = require("react");
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 var FOG_BRAND_PALETTE = {
   ink: "#171a1a",
   milk: "#f7f5ed",
@@ -4506,7 +4544,7 @@ var FogIllustration = ({ palette, speed = 1, className }) => {
       gl.deleteFramebuffer(fbo);
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("canvas", { ref, "aria-hidden": "true", className: cn("size-full", className) });
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("canvas", { ref, "aria-hidden": "true", className: cn("size-full", className) });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -4579,7 +4617,6 @@ var FogIllustration = ({ palette, speed = 1, className }) => {
   FieldTitle,
   FogIllustration,
   Grid,
-  HeroBlock,
   Icon,
   Input,
   Item,