@orangecheck/design 0.7.3 → 0.7.5

package/dist/components.js

@@ -1,7 +1,7 @@
 'use strict';
 
+var Popover = require('@radix-ui/react-popover');
 var lucideReact = require('lucide-react');
-var PopoverPrimitive = require('@radix-ui/react-popover');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
@@ -30,62 +30,54 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
+var Popover__namespace = /*#__PURE__*/_interopNamespace(Popover);
 var Link6__default = /*#__PURE__*/_interopDefault(Link6);
 
 // src/composites/help-hint.tsx
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
-function Popover({ ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Root, { "data-slot": "popover", ...props });
-}
-function PopoverTrigger({ ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Trigger, { "data-slot": "popover-trigger", ...props });
-}
-function PopoverContent({
-  className,
-  align = "center",
-  sideOffset = 4,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-    PopoverPrimitive__namespace.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__ */ jsxRuntime.jsxs(Popover, { children: [
+  const iconSize = size === "xs" ? 12 : 14;
+  return /* @__PURE__ */ jsxRuntime.jsxs(Popover__namespace.Root, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      PopoverTrigger,
+      Popover__namespace.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__ */ jsxRuntime.jsx(lucideReact.HelpCircle, { className: "size-3.5", "aria-hidden": true })
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.HelpCircle, { size: iconSize, "aria-hidden": true })
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsxs(PopoverContent, { side, className: "w-72 space-y-1.5", children: [
-      title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "label-mono text-foreground text-[10px]", children: title }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground text-xs leading-relaxed", children })
-    ] })
+    /* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+      Popover__namespace.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__ */ jsxRuntime.jsxs("div", { className: "label-mono text-primary mb-1.5", children: [
+            "\xA7 ",
+            title
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-foreground/90", children }),
+          /* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Arrow, { className: "fill-popover" })
+        ]
+      }
+    ) })
   ] });
 }
 var TONE_CLASS = {
@@ -197,7 +189,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__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-1", className), children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "label-mono text-[10px]", children: label }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("font-display text-2xl leading-none", toneClass), children: value }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: cn(
+          "font-display text-2xl font-bold tracking-tight tabular-nums",
+          toneClass
+        ),
+        children: value
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline gap-2", children: [
       sub && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground font-mono text-[11px] tracking-wide lowercase", children: sub }),
       delta && /* @__PURE__ */ jsxRuntime.jsxs(