@bergetai/ui 0.11.2 → 0.11.4

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

@@ -320,6 +320,21 @@ function brandVariantClasses(variant) {
         disabledClasses,
         "disabled:bg-transparent disabled:border-berget-button-disabled-border"
       );
+    case "ghost":
+      return cn(
+        "bg-transparent text-berget-button-ghost-fg",
+        // Pin the foreground on hover — the underlying primitive ghost adds
+        // hover:text-foreground, which is the same value here but pinned
+        // explicitly for parity with the other fg-token variants.
+        "hover:bg-berget-button-ghost-hover hover:text-berget-button-ghost-fg",
+        // The dark:hover twin neutralises the primitive ghost's
+        // dark:hover:bg-muted/50 so only the token fill applies.
+        "dark:hover:bg-berget-button-ghost-hover",
+        "active:bg-berget-button-ghost-active dark:active:bg-berget-button-ghost-active",
+        "focus-visible:border-transparent",
+        disabledClasses,
+        "disabled:bg-transparent"
+      );
     case "link":
       return cn(
         "h-auto bg-transparent p-0 text-berget-button-link-fg font-medium underline-offset-4 shadow-none",
@@ -354,6 +369,7 @@ function primitiveVariant(variant) {
     case "primary":
     case "destructive":
     case "outline":
+    case "ghost":
       return "ghost";
     default:
       return variant;
@@ -3743,97 +3759,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";