@orangecheck/design 0.7.4 → 0.7.5

package/dist/index.mjs

@@ -2074,28 +2074,46 @@ function QrCode({ value, size = 200, label, className }) {
   );
 }
 function HelpHint({
-  title,
   children,
-  side = "bottom",
-  label = "more information",
+  title,
+  side = "top",
+  size = "sm",
+  tone = "default",
+  label = "what is this?",
   className
 }) {
-  return /* @__PURE__ */ jsxs(Popover, { children: [
+  const iconSize = size === "xs" ? 12 : 14;
+  return /* @__PURE__ */ jsxs(PopoverPrimitive.Root, { children: [
     /* @__PURE__ */ jsx(
-      PopoverTrigger,
+      PopoverPrimitive.Trigger,
       {
         "aria-label": label,
+        onClick: (e) => e.stopPropagation(),
         className: cn(
-          "text-muted-foreground/60 hover:text-foreground inline-flex size-3.5 items-center justify-center align-middle transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          "focus-visible:ring-primary/60 inline-flex shrink-0 items-center justify-center rounded-full transition-colors outline-none focus-visible:ring-2",
+          tone === "subtle" ? "text-muted-foreground/60 hover:text-foreground/80" : "text-primary/70 hover:text-primary",
           className
         ),
-        children: /* @__PURE__ */ jsx(HelpCircle, { className: "size-3.5", "aria-hidden": true })
+        children: /* @__PURE__ */ jsx(HelpCircle, { size: iconSize, "aria-hidden": true })
       }
     ),
-    /* @__PURE__ */ jsxs(PopoverContent, { side, className: "w-72 space-y-1.5", children: [
-      title && /* @__PURE__ */ jsx("p", { className: "label-mono text-foreground text-[10px]", children: title }),
-      /* @__PURE__ */ jsx("div", { className: "text-muted-foreground text-xs leading-relaxed", children })
-    ] })
+    /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+      PopoverPrimitive.Content,
+      {
+        side,
+        sideOffset: 6,
+        collisionPadding: 12,
+        className: "border-border bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 z-50 max-w-xs rounded-md border p-3 text-xs leading-relaxed shadow-md outline-none",
+        children: [
+          title && /* @__PURE__ */ jsxs("div", { className: "label-mono text-primary mb-1.5", children: [
+            "\xA7 ",
+            title
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "text-foreground/90", children }),
+          /* @__PURE__ */ jsx(PopoverPrimitive.Arrow, { className: "fill-popover" })
+        ]
+      }
+    ) })
   ] });
 }
 var TONE_CLASS = {