@bergetai/ui 0.11.0 → 0.11.2

package/dist/index.cjs

@@ -50,6 +50,7 @@ __export(src_exports, {
   Button: () => Button2,
   COUNTRIES: () => COUNTRIES,
   Card: () => Card2,
+  CardAction: () => CardAction,
   CardContent: () => CardContent,
   CardDescription: () => CardDescription,
   CardFooter: () => CardFooter,
@@ -464,9 +465,28 @@ function brandVariantClasses(variant) {
         disabledClasses,
         "disabled:bg-berget-button-destructive-disabled-bg"
       );
+    case "outline":
+      return cn(
+        // Transparent fill with a theme-foreground-derived border (25% of the
+        // foreground). The state treatment is static: hover, press and
+        // keyboard focus render identically to rest — only the shared focus
+        // outline and the disabled treatment deviate.
+        "bg-transparent border-berget-button-outline-border text-berget-button-outline-fg",
+        // Hover: slight brightening (hover bg token); the border and
+        // foreground stay at rest. The dark:hover twin also neutralises
+        // the primitive ghost's dark:hover:bg-muted/50. Pressed drops the
+        // fill back to transparent (a pressed element is still hovered, so
+        // an explicit active override is needed in both colour schemes).
+        "hover:bg-berget-button-outline-hover dark:hover:bg-berget-button-outline-hover",
+        "active:bg-transparent dark:active:bg-transparent",
+        // Keep the resting border on focus — the shared outline is the indicator.
+        "focus-visible:border-berget-button-outline-border",
+        disabledClasses,
+        "disabled:bg-transparent disabled:border-berget-button-disabled-border"
+      );
     case "link":
       return cn(
-        "h-auto bg-transparent p-0 text-berget-button-link-fg underline-offset-4 shadow-none",
+        "h-auto bg-transparent p-0 text-berget-button-link-fg font-medium 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",
@@ -497,6 +517,7 @@ function primitiveVariant(variant) {
   switch (variant) {
     case "primary":
     case "destructive":
+    case "outline":
       return "ghost";
     default:
       return variant;
@@ -525,6 +546,14 @@ function Button2({
     // 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",
+    // Text ladder: size = typography scale; the em-based padding above
+    // follows automatically, so no per-size paddings are needed. Only
+    // default/lg/sm need overrides — xs keeps the primitive's text-xs.
+    !isLink && !isIcon && (size === "lg" ? "text-lg" : size === "sm" ? "text-sm" : size === "xs" ? "" : "text-base"),
+    // Normal weight for every non-link variant — tailwind-merge strips the
+    // primitive's font-medium (font-weight: var(--font-weight-medium)); the
+    // link variant keeps medium via its own classes above.
+    !isLink && "font-normal",
     brandVariantClasses(variant),
     interactionClasses,
     !isLink && width === "full" && "w-full",
@@ -677,6 +706,19 @@ function CardDescription({ className, ...props }) {
     }
   );
 }
+function CardAction({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "div",
+    {
+      "data-slot": "card-action",
+      className: (0, import_cn2.cn)(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      ),
+      ...props
+    }
+  );
+}
 function CardContent({ className, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "div",
@@ -4568,6 +4610,7 @@ var FogIllustration = ({ palette, speed = 1, className }) => {
   Button,
   COUNTRIES,
   Card,
+  CardAction,
   CardContent,
   CardDescription,
   CardFooter,