@bergetai/ui 0.11.1 → 0.11.3

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",
@@ -3715,97 +3743,33 @@ Box.displayName = "Box";
 
 // src/components/language-select/LanguageSelect.tsx
 import * as React27 from "react";
-import { Select as SelectPrimitive2 } from "@base-ui/react/select";
 import { Globe as Globe2 } from "lucide-react";
 import { jsx as jsx42, jsxs as jsxs22 } from "react/jsx-runtime";
 var LanguageSelect = React27.forwardRef(
   ({ className, options, value, onValueChange }, ref) => {
-    return /* @__PURE__ */ jsxs22(
-      SelectPrimitive2.Root,
-      {
-        value,
-        onValueChange: onValueChange ? (v) => onValueChange(v ?? "") : void 0,
-        children: [
-          /* @__PURE__ */ jsxs22(
-            SelectPrimitive2.Trigger,
-            {
-              ref,
-              "aria-label": "Select language",
-              className: cn(
-                // Base styles
-                "h-8 w-8 p-0 rounded-full",
-                "flex items-center justify-center",
-                // Border and background
-                "border border-berget-border-subtle",
-                "bg-transparent",
-                // Hover effect
-                "hover:bg-berget-surface-hover",
-                // Transitions
-                "transition-all duration-200",
-                // Focus styles - remove all focus rings
-                "focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0",
-                // Disabled state
-                "disabled:cursor-not-allowed disabled:opacity-50",
-                className
-              ),
-              children: [
-                /* @__PURE__ */ jsx42("span", { className: "sr-only", children: "Select language" }),
-                /* @__PURE__ */ jsx42(Icon, { icon: Globe2, size: 16, "aria-hidden": true })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx42(SelectPrimitive2.Portal, { children: /* @__PURE__ */ jsx42(SelectPrimitive2.Positioner, { alignItemWithTrigger: false, className: "isolate z-50", children: /* @__PURE__ */ jsx42(
-            SelectPrimitive2.Popup,
+    return /* @__PURE__ */ jsxs22(DropdownMenu, { children: [
+      /* @__PURE__ */ jsx42(DropdownMenuTrigger, { ref, asChild: true, children: /* @__PURE__ */ jsxs22(Button2, { variant: "outline", size: "icon", className, "aria-label": "Select language", children: [
+        /* @__PURE__ */ jsx42("span", { className: "sr-only", children: "Select language" }),
+        /* @__PURE__ */ jsx42(Icon, { icon: Globe2, size: 16, "aria-hidden": true })
+      ] }) }),
+      /* @__PURE__ */ jsx42(DropdownMenuContent, { align: "start", children: /* @__PURE__ */ jsx42(
+        DropdownMenuRadioGroup,
+        {
+          value,
+          onValueChange: onValueChange ? (v) => onValueChange(v) : void 0,
+          children: options.map((option) => /* @__PURE__ */ jsx42(
+            DropdownMenuRadioItem,
             {
-              className: cn(
-                // Positioning and z-index
-                "z-50 min-w-[8rem]",
-                // Overflow handling
-                "overflow-y-auto overflow-x-hidden",
-                // Border and background
-                "border border-berget-border bg-berget-background",
-                "text-berget-foreground",
-                // Shadow
-                "shadow-berget-lg",
-                // Rounded corners
-                "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",
-                // Position-based animations
-                "data-[side=bottom]:slide-in-from-top-2",
-                "data-[side=left]:slide-in-from-right-2",
-                "data-[side=right]:slide-in-from-left-2",
-                "data-[side=top]:slide-in-from-bottom-2",
-                // Origin for transforms
-                "origin-[--transform-origin]"
-              ),
-              children: /* @__PURE__ */ jsx42(SelectPrimitive2.List, { className: "p-1", children: options.map((option) => /* @__PURE__ */ jsx42(
-                SelectPrimitive2.Item,
-                {
-                  value: option.value,
-                  disabled: option.disabled,
-                  className: cn(
-                    // Layout
-                    "relative flex w-full cursor-default",
-                    "select-none items-center rounded-sm py-2 px-3",
-                    // Text
-                    "text-sm outline-none",
-                    // Focus/hover styles
-                    "focus:bg-berget-primary-tint focus:text-berget-foreground",
-                    "hover:bg-berget-primary-tint",
-                    // Disabled state
-                    "data-disabled:pointer-events-none data-disabled:opacity-50"
-                  ),
-                  children: /* @__PURE__ */ jsx42(SelectPrimitive2.ItemText, { children: option.label })
-                },
-                option.value
-              )) })
-            }
-          ) }) })
-        ]
-      }
-    );
+              value: option.value,
+              disabled: option.disabled,
+              closeOnClick: true,
+              children: option.label
+            },
+            option.value
+          ))
+        }
+      ) })
+    ] });
   }
 );
 LanguageSelect.displayName = "LanguageSelect";