@orangecheck/design 0.7.4 → 0.7.6

package/dist/index.mjs

@@ -1904,6 +1904,38 @@ function TabsContent({ className, ...props }) {
     }
   );
 }
+function useSpotPrice(opts = {}) {
+  const { endpoint = "/api/price/btc-usd", intervalMs = 6e4 } = opts;
+  const [state, setState] = useState({
+    btcUsd: REFERENCE_BTC_USD,
+    fetchedAt: null
+  });
+  useEffect(() => {
+    let cancelled = false;
+    async function pull() {
+      try {
+        const res = await fetch(endpoint);
+        if (!res.ok) return;
+        const json = await res.json();
+        if (cancelled) return;
+        if (typeof json.btc_usd === "number" && json.btc_usd > 0) {
+          setState({
+            btcUsd: Math.round(json.btc_usd),
+            fetchedAt: json.fetched_at ?? null
+          });
+        }
+      } catch {
+      }
+    }
+    void pull();
+    const t = setInterval(pull, intervalMs);
+    return () => {
+      cancelled = true;
+      clearInterval(t);
+    };
+  }, [endpoint, intervalMs]);
+  return state;
+}
 
 // src/format/index.ts
 var REFERENCE_BTC_USD = 95e3;
@@ -1933,6 +1965,16 @@ function usdToSats(usd, btcUsd = REFERENCE_BTC_USD) {
 function priceBoth(sats, btcUsd = REFERENCE_BTC_USD) {
   return `${formatSats(sats)} sats \xB7 ${satsToUsd(sats, btcUsd)}`;
 }
+function asOf(iso) {
+  if (!iso) return null;
+  const t = new Date(iso);
+  if (Number.isNaN(t.getTime())) return null;
+  return `as of ${t.toLocaleTimeString(void 0, {
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: false
+  })}`;
+}
 function relativeTime(when) {
   const t = when instanceof Date ? when.getTime() : new Date(when).getTime();
   if (Number.isNaN(t)) return "";
@@ -2074,28 +2116,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 = {
@@ -3870,6 +3930,6 @@ function LayoutSubHeader({
   ] }) });
 }
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, AlertWithAction, AlertWithCountdown, AppShell, Badge, Bar, BitcoinAddress, Button, Callout, Card, Checkbox, ConfirmHost, CopyButton, DEFAULT_OC_THEME, DataRow, DefinitionList, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, EcosystemSwitcher, EmptyState, ErrorBoundary, FAMILY_PROPERTIES, HelpHint, Input, Label, LayoutSubHeader, Modal, OC_DEFAULT_ACCENT, OC_SKIN_COOKIE, OC_THEMES, OcAccountMenu, OcAccountMenuView, OcAppearanceMenu, OcDashboardHub, OcDashboardShell, OcLogoDropdown, OcPrimaryNav, OcThemeBridge, OcThemePicker, OcThemeProvider, Pagination, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PromptHost, QrCode, REFERENCE_BTC_USD, RadioGroup, RadioGroupItem, SITE_STATE_LABEL, SatsAmount, SectionHeader, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, Sparkline, StatBlock, StatCard, StatGrid, StatTile, StatusPill, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeToggle, ThemeToggleLink, Toaster, Working, WorkingPanel, accentFor, badgeVariants, buttonVariants, cn, confirm, explorerUrl, findFamilyProperty, formatSats, formatSatsCompact, getOcThemeInitScript, isKnownTheme, makeStatusPill, priceBoth, prompt, relativeTime, resolveTheme, satsToUsd, shortenAddress, usdToSats, useOcSkin };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, AlertWithAction, AlertWithCountdown, AppShell, Badge, Bar, BitcoinAddress, Button, Callout, Card, Checkbox, ConfirmHost, CopyButton, DEFAULT_OC_THEME, DataRow, DefinitionList, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, EcosystemSwitcher, EmptyState, ErrorBoundary, FAMILY_PROPERTIES, HelpHint, Input, Label, LayoutSubHeader, Modal, OC_DEFAULT_ACCENT, OC_SKIN_COOKIE, OC_THEMES, OcAccountMenu, OcAccountMenuView, OcAppearanceMenu, OcDashboardHub, OcDashboardShell, OcLogoDropdown, OcPrimaryNav, OcThemeBridge, OcThemePicker, OcThemeProvider, Pagination, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PromptHost, QrCode, REFERENCE_BTC_USD, RadioGroup, RadioGroupItem, SITE_STATE_LABEL, SatsAmount, SectionHeader, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, Sparkline, StatBlock, StatCard, StatGrid, StatTile, StatusPill, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeToggle, ThemeToggleLink, Toaster, Working, WorkingPanel, accentFor, asOf, badgeVariants, buttonVariants, cn, confirm, explorerUrl, findFamilyProperty, formatSats, formatSatsCompact, getOcThemeInitScript, isKnownTheme, makeStatusPill, priceBoth, prompt, relativeTime, resolveTheme, satsToUsd, shortenAddress, usdToSats, useOcSkin, useSpotPrice };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map