@bergetai/ui 0.11.1 → 0.11.2

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' | 'link';
+type CustomVariant = 'default' | 'primary' | 'destructive' | 'outline' | '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. */

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' | 'link';
+type CustomVariant = 'default' | 'primary' | 'destructive' | 'outline' | '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. */

package/dist/index.js

@@ -301,9 +301,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",
@@ -334,6 +353,7 @@ function primitiveVariant(variant) {
   switch (variant) {
     case "primary":
     case "destructive":
+    case "outline":
       return "ghost";
     default:
       return variant;
@@ -362,6 +382,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",