@orangecheck/design 0.7.3 → 0.7.5

package/dist/components.mjs

@@ -1,5 +1,5 @@
+import * as Popover from '@radix-ui/react-popover';
 import { HelpCircle, Boxes, ChevronDown, Check, CornerDownLeft, Plus, Loader2, Copy } from 'lucide-react';
-import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsxs, jsx, Fragment as Fragment$1 } from 'react/jsx-runtime';
@@ -12,55 +12,47 @@ import { useOcSession, fetchOcLinkedIdentities } from '@orangecheck/auth-client'
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-function Popover({ ...props }) {
-  return /* @__PURE__ */ jsx(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
-}
-function PopoverTrigger({ ...props }) {
-  return /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
-}
-function PopoverContent({
-  className,
-  align = "center",
-  sideOffset = 4,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
-    PopoverPrimitive.Content,
-    {
-      "data-slot": "popover-content",
-      align,
-      sideOffset,
-      className: cn(
-        "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 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 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
-        className
-      ),
-      ...props
-    }
-  ) });
-}
 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(Popover.Root, { children: [
     /* @__PURE__ */ jsx(
-      PopoverTrigger,
+      Popover.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(Popover.Portal, { children: /* @__PURE__ */ jsxs(
+      Popover.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(Popover.Arrow, { className: "fill-popover" })
+        ]
+      }
+    ) })
   ] });
 }
 var TONE_CLASS = {
@@ -172,7 +164,16 @@ function StatBlock({ label, value, sub, delta, tone = "default", className }) {
   const toneClass = tone === "success" ? "text-success" : tone === "warning" ? "text-warning" : tone === "destructive" ? "text-destructive" : "text-foreground";
   return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1", className), children: [
     /* @__PURE__ */ jsx("span", { className: "label-mono text-[10px]", children: label }),
-    /* @__PURE__ */ jsx("span", { className: cn("font-display text-2xl leading-none", toneClass), children: value }),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "font-display text-2xl font-bold tracking-tight tabular-nums",
+          toneClass
+        ),
+        children: value
+      }
+    ),
     /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2", children: [
       sub && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground font-mono text-[11px] tracking-wide lowercase", children: sub }),
       delta && /* @__PURE__ */ jsxs(