@bergetai/ui 0.11.2 → 0.11.4

package/dist/index.cjs

@@ -484,6 +484,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",
@@ -518,6 +533,7 @@ function primitiveVariant(variant) {
     case "primary":
     case "destructive":
     case "outline":
+    case "ghost":
       return "ghost";
     default:
       return variant;
@@ -3907,97 +3923,33 @@ Box.displayName = "Box";
 
 // src/components/language-select/LanguageSelect.tsx
 var React27 = __toESM(require("react"), 1);
-var import_select3 = require("@base-ui/react/select");
 var import_lucide_react13 = require("lucide-react");
 var import_jsx_runtime42 = require("react/jsx-runtime");
 var LanguageSelect = React27.forwardRef(
   ({ className, options, value, onValueChange }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
-      import_select3.Select.Root,
-      {
-        value,
-        onValueChange: onValueChange ? (v) => onValueChange(v ?? "") : void 0,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
-            import_select3.Select.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__ */ (0, import_jsx_runtime42.jsx)("span", { className: "sr-only", children: "Select language" }),
-                /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Icon, { icon: import_lucide_react13.Globe, size: 16, "aria-hidden": true })
-              ]
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_select3.Select.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_select3.Select.Positioner, { alignItemWithTrigger: false, className: "isolate z-50", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-            import_select3.Select.Popup,
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(DropdownMenu, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(DropdownMenuTrigger, { ref, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Button2, { variant: "outline", size: "icon", className, "aria-label": "Select language", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "sr-only", children: "Select language" }),
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Icon, { icon: import_lucide_react13.Globe, size: 16, "aria-hidden": true })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(DropdownMenuContent, { align: "start", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        DropdownMenuRadioGroup,
+        {
+          value,
+          onValueChange: onValueChange ? (v) => onValueChange(v) : void 0,
+          children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+            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__ */ (0, import_jsx_runtime42.jsx)(import_select3.Select.List, { className: "p-1", children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-                import_select3.Select.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__ */ (0, import_jsx_runtime42.jsx)(import_select3.Select.ItemText, { children: option.label })
-                },
-                option.value
-              )) })
-            }
-          ) }) })
-        ]
-      }
-    );
+              value: option.value,
+              disabled: option.disabled,
+              closeOnClick: true,
+              children: option.label
+            },
+            option.value
+          ))
+        }
+      ) })
+    ] });
   }
 );
 LanguageSelect.displayName = "LanguageSelect";