@orangecheck/design 0.8.0 → 0.9.0

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 export { DEFAULT_OC_THEME, OC_DEFAULT_ACCENT, OC_SKIN_COOKIE, OC_THEMES, OcAppearanceMenu, OcAppearanceMenuProps, OcAurora, OcAuroraProps, OcTheme, OcThemeBridge, OcThemeId, OcThemePicker, OcThemePickerProps, OcThemeProvider, OcThemeProviderProps, accentFor, cn, getOcThemeInitScript, isKnownTheme, resolveTheme, useOcSkin } from './tokens.mjs';
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, AlertWithAction, AlertWithActionProps, AlertWithCountdown, AlertWithCountdownProps, Badge, Bar, BarProps, BitcoinAddress, BitcoinAddressProps, Button, Card, CardProps, Checkbox, ConfirmHost, ConfirmOptions, CopyButton, CopyButtonProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, ErrorBoundary, Input, Label, Modal, ModalProps, Pagination, PaginationProps, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PromptHost, PromptOptions, QrCode, QrCodeProps, RadioGroup, RadioGroupItem, SatsAmount, SatsAmountProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, SkeletonProps, Sparkline, SparklineProps, StatBlock, StatBlockProps, StatusPill, StatusPillProps, StatusPillSpec, StatusPillVariant, StatusTone, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeToggle, ThemeToggleLink, Toaster, Working, WorkingPanel, WorkingProps, badgeVariants, buttonVariants, confirm, makeStatusPill, prompt } from './primitives.mjs';
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, AlertWithAction, AlertWithActionProps, AlertWithCountdown, AlertWithCountdownProps, Badge, Bar, BarProps, BitcoinAddress, BitcoinAddressProps, Button, Card, CardProps, Checkbox, ConfirmHost, ConfirmOptions, CopyButton, CopyButtonProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, ErrorBoundary, Input, Label, Modal, ModalProps, Pagination, PaginationProps, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PromptHost, PromptOptions, QrCode, QrCodeProps, RadioGroup, RadioGroupItem, SatsAmount, SatsAmountProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, SkeletonProps, Sparkline, SparklineProps, StatBlock, StatBlockProps, StatusPill, StatusPillProps, StatusPillSpec, StatusPillVariant, StatusTone, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeToggle, ThemeToggleLink, Toaster, Tooltip, TooltipProps, Working, WorkingPanel, WorkingProps, badgeVariants, buttonVariants, confirm, makeStatusPill, prompt } from './primitives.mjs';
 export { Callout, CalloutProps, CalloutTone, DataRow, DataRowProps, DefinitionItem, DefinitionList, DefinitionListProps, EmptyState, EmptyStateCta, EmptyStateProps, HelpHint, HelpHintProps, SectionHeader, SectionHeaderProps, StatCard, StatCardProps, StatGrid, StatGridProps, StatItem, StatTile } from './composites.mjs';
 export { AppShell, AppShellProps, EcosystemSlug, EcosystemSwitcher, EcosystemSwitcherProps, FAMILY_PROPERTIES, FamilyCategory, FamilyProperty, LayoutSubHeader, LayoutSubHeaderProps, LayoutSubHeaderTag, OcAccountMenu, OcAccountMenuBuildInfo, OcAccountMenuItem, OcAccountMenuProps, OcAccountMenuSession, OcAccountMenuView, OcAccountMenuViewProps, OcDashboardHub, OcDashboardHubProps, OcDashboardShell, OcDashboardShellProps, OcDashboardTool, OcLogoDropdown, OcLogoDropdownProps, OcPrimaryNav, OcPrimaryNavLink, OcPrimaryNavProps, SITE_STATE_LABEL, SiteState, findFamilyProperty } from './chrome.mjs';
 export { ExplorerNetwork, ExplorerTarget, REFERENCE_BTC_USD, SpotPrice, UseSpotPriceOptions, asOf, explorerUrl, formatSats, formatSatsCompact, priceBoth, relativeTime, satsToUsd, shortenAddress, usdToSats, useSpotPrice } from './format.mjs';

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { DEFAULT_OC_THEME, OC_DEFAULT_ACCENT, OC_SKIN_COOKIE, OC_THEMES, OcAppearanceMenu, OcAppearanceMenuProps, OcAurora, OcAuroraProps, OcTheme, OcThemeBridge, OcThemeId, OcThemePicker, OcThemePickerProps, OcThemeProvider, OcThemeProviderProps, accentFor, cn, getOcThemeInitScript, isKnownTheme, resolveTheme, useOcSkin } from './tokens.js';
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, AlertWithAction, AlertWithActionProps, AlertWithCountdown, AlertWithCountdownProps, Badge, Bar, BarProps, BitcoinAddress, BitcoinAddressProps, Button, Card, CardProps, Checkbox, ConfirmHost, ConfirmOptions, CopyButton, CopyButtonProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, ErrorBoundary, Input, Label, Modal, ModalProps, Pagination, PaginationProps, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PromptHost, PromptOptions, QrCode, QrCodeProps, RadioGroup, RadioGroupItem, SatsAmount, SatsAmountProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, SkeletonProps, Sparkline, SparklineProps, StatBlock, StatBlockProps, StatusPill, StatusPillProps, StatusPillSpec, StatusPillVariant, StatusTone, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeToggle, ThemeToggleLink, Toaster, Working, WorkingPanel, WorkingProps, badgeVariants, buttonVariants, confirm, makeStatusPill, prompt } from './primitives.js';
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, AlertWithAction, AlertWithActionProps, AlertWithCountdown, AlertWithCountdownProps, Badge, Bar, BarProps, BitcoinAddress, BitcoinAddressProps, Button, Card, CardProps, Checkbox, ConfirmHost, ConfirmOptions, CopyButton, CopyButtonProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, ErrorBoundary, Input, Label, Modal, ModalProps, Pagination, PaginationProps, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PromptHost, PromptOptions, QrCode, QrCodeProps, RadioGroup, RadioGroupItem, SatsAmount, SatsAmountProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, SkeletonProps, Sparkline, SparklineProps, StatBlock, StatBlockProps, StatusPill, StatusPillProps, StatusPillSpec, StatusPillVariant, StatusTone, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeToggle, ThemeToggleLink, Toaster, Tooltip, TooltipProps, Working, WorkingPanel, WorkingProps, badgeVariants, buttonVariants, confirm, makeStatusPill, prompt } from './primitives.js';
 export { Callout, CalloutProps, CalloutTone, DataRow, DataRowProps, DefinitionItem, DefinitionList, DefinitionListProps, EmptyState, EmptyStateCta, EmptyStateProps, HelpHint, HelpHintProps, SectionHeader, SectionHeaderProps, StatCard, StatCardProps, StatGrid, StatGridProps, StatItem, StatTile } from './composites.js';
 export { AppShell, AppShellProps, EcosystemSlug, EcosystemSwitcher, EcosystemSwitcherProps, FAMILY_PROPERTIES, FamilyCategory, FamilyProperty, LayoutSubHeader, LayoutSubHeaderProps, LayoutSubHeaderTag, OcAccountMenu, OcAccountMenuBuildInfo, OcAccountMenuItem, OcAccountMenuProps, OcAccountMenuSession, OcAccountMenuView, OcAccountMenuViewProps, OcDashboardHub, OcDashboardHubProps, OcDashboardShell, OcDashboardShellProps, OcDashboardTool, OcLogoDropdown, OcLogoDropdownProps, OcPrimaryNav, OcPrimaryNavLink, OcPrimaryNavProps, SITE_STATE_LABEL, SiteState, findFamilyProperty } from './chrome.js';
 export { ExplorerNetwork, ExplorerTarget, REFERENCE_BTC_USD, SpotPrice, UseSpotPriceOptions, asOf, explorerUrl, formatSats, formatSatsCompact, priceBoth, relativeTime, satsToUsd, shortenAddress, usdToSats, useSpotPrice } from './format.js';

package/dist/index.js

@@ -1469,6 +1469,141 @@ function PopoverContent({
 function PopoverAnchor({ ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Anchor, { "data-slot": "popover-anchor", ...props });
 }
+var TOOLTIP_SURFACE_CLASS = "bg-popover text-popover-foreground border-border rounded-md border p-2.5 shadow-md";
+var TOOLTIP_MOTION_CLASS = "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-1 data-[side=top]:slide-in-from-bottom-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 origin-(--radix-popover-content-transform-origin) duration-150 ease-out";
+function compose(theirs, ours) {
+  return (e) => {
+    theirs?.(e);
+    ours(e);
+  };
+}
+var lastInputWasKeyboard = false;
+var modalityInstalled = false;
+function installModalityTracking() {
+  if (modalityInstalled || typeof window === "undefined") return;
+  modalityInstalled = true;
+  window.addEventListener("keydown", () => lastInputWasKeyboard = true, true);
+  window.addEventListener("pointerdown", () => lastInputWasKeyboard = false, true);
+}
+function Tooltip({
+  content,
+  children,
+  side = "bottom",
+  align = "start",
+  sideOffset = 8,
+  collisionPadding = 12,
+  openDelay = 300,
+  closeDelay = 90,
+  disabled = false,
+  portal = true,
+  zIndexClassName = "z-50",
+  contentClassName
+}) {
+  const [hovering, setHovering] = React2__namespace.useState(false);
+  const [focusing, setFocusing] = React2__namespace.useState(false);
+  const [isFinePointer, setIsFinePointer] = React2__namespace.useState(false);
+  const openTimer = React2__namespace.useRef(null);
+  const closeTimer = React2__namespace.useRef(null);
+  React2__namespace.useEffect(() => {
+    installModalityTracking();
+    const mq = window.matchMedia("(hover: hover) and (pointer: fine)");
+    const apply = () => setIsFinePointer(mq.matches);
+    apply();
+    mq.addEventListener("change", apply);
+    return () => mq.removeEventListener("change", apply);
+  }, []);
+  const clearTimers = React2__namespace.useCallback(() => {
+    if (openTimer.current) clearTimeout(openTimer.current);
+    if (closeTimer.current) clearTimeout(closeTimer.current);
+  }, []);
+  React2__namespace.useEffect(() => clearTimers, [clearTimers]);
+  React2__namespace.useEffect(() => {
+    if (disabled) {
+      clearTimers();
+      setHovering(false);
+    }
+  }, [disabled, clearTimers]);
+  const handlePointerEnter = () => {
+    if (!isFinePointer) return;
+    if (closeTimer.current) clearTimeout(closeTimer.current);
+    openTimer.current = setTimeout(() => setHovering(true), openDelay);
+  };
+  const handlePointerLeave = () => {
+    if (openTimer.current) clearTimeout(openTimer.current);
+    closeTimer.current = setTimeout(() => setHovering(false), closeDelay);
+  };
+  const handlePointerDown = () => {
+    clearTimers();
+    setHovering(false);
+    setFocusing(false);
+  };
+  const handleFocus = () => {
+    if (lastInputWasKeyboard) {
+      clearTimers();
+      setFocusing(true);
+    }
+  };
+  const handleBlur = () => {
+    clearTimers();
+    setFocusing(false);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Escape") {
+      clearTimers();
+      setHovering(false);
+      setFocusing(false);
+    }
+  };
+  const effectiveOpen = !disabled && (isFinePointer && hovering || focusing);
+  const extra = {};
+  const childProps = children.props;
+  extra.onPointerEnter = compose(childProps.onPointerEnter, handlePointerEnter);
+  extra.onPointerLeave = compose(childProps.onPointerLeave, handlePointerLeave);
+  extra.onPointerDown = compose(childProps.onPointerDown, handlePointerDown);
+  extra.onFocus = compose(childProps.onFocus, handleFocus);
+  extra.onBlur = compose(childProps.onBlur, handleBlur);
+  extra.onKeyDown = compose(childProps.onKeyDown, handleKeyDown);
+  const trigger = React2__namespace.cloneElement(children, extra);
+  const contentEl = /* @__PURE__ */ jsxRuntime.jsx(
+    PopoverPrimitive__namespace.Content,
+    {
+      side,
+      align,
+      sideOffset,
+      collisionPadding,
+      "aria-hidden": true,
+      onOpenAutoFocus: (e) => e.preventDefault(),
+      onCloseAutoFocus: (e) => e.preventDefault(),
+      onFocusOutside: (e) => e.preventDefault(),
+      className: cn(
+        TOOLTIP_SURFACE_CLASS,
+        TOOLTIP_MOTION_CLASS,
+        "pointer-events-none",
+        zIndexClassName,
+        contentClassName
+      ),
+      children: content
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    PopoverPrimitive__namespace.Root,
+    {
+      open: effectiveOpen,
+      onOpenChange: (o) => {
+        if (!o) {
+          clearTimers();
+          setHovering(false);
+          setFocusing(false);
+        }
+      },
+      modal: false,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Anchor, { asChild: true, children: trigger }),
+        portal ? /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { children: contentEl }) : contentEl
+      ]
+    }
+  );
+}
 var Accordion = AccordionPrimitive__namespace.Root;
 var AccordionItem = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Item, { ref, className: cn("border-b", className), ...props }));
 AccordionItem.displayName = "AccordionItem";
@@ -2719,6 +2854,31 @@ function MenuCategoryChip({ category }) {
     }
   );
 }
+function SwitcherTooltipCard({ current }) {
+  const prop = findFamilyProperty(current);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-[13rem] max-w-[calc(100vw-1.5rem)]", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col leading-tight", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex flex-wrap items-baseline gap-x-1.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground font-mono text-[9px] tracking-widest uppercase", children: "you\u2019re on" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary font-display text-[12px] font-semibold tracking-tight", children: prop?.label ?? "orangecheck family" })
+      ] }),
+      prop?.sub && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground mt-0.5 font-mono text-[10px] tracking-wide", children: prop.sub })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-border -mx-2.5 my-2 border-t" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { "aria-hidden": true, className: "text-muted-foreground h-3 w-3 shrink-0" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary font-mono text-[10px] font-medium tracking-widest uppercase", children: "click" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground font-mono text-[10px]", children: "\xB7" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground font-mono text-[10px] tracking-wide", children: "switch site" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1.5 flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CornerDownLeft, { "aria-hidden": true, className: "text-muted-foreground h-3 w-3 shrink-0" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary font-mono text-[10px] font-medium tracking-widest uppercase", children: "double-click" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground font-mono text-[10px]", children: "\xB7" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground font-mono text-[10px] tracking-wide", children: "home" })
+    ] })
+  ] });
+}
 function OcLogoDropdown({
   current,
   homeHref = "/",
@@ -2768,31 +2928,45 @@ function OcLogoDropdown({
       "data-oc-current-category": currentCategory,
       "data-oc-site-state": siteState,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Tooltip,
           {
-            type: "button",
-            "aria-haspopup": "menu",
-            "aria-expanded": open,
-            "aria-controls": menuId,
-            "aria-label": "OrangeCheck family \xB7 click to open property menu, double-click to go home",
-            title: "single-click \xB7 family menu  \xB7  double-click \xB7 go home",
-            onClick: handleTriggerClick,
-            className: triggerClassName ?? "group hover:bg-accent/30 -mx-1.5 -my-1 flex min-h-[40px] items-center gap-2 rounded-sm px-1.5 py-1 transition-colors " + (open ? "bg-accent/20" : ""),
-            "data-oc-logo-dropdown-trigger": "",
-            "data-oc-logo-dropdown-open": open ? "true" : "false",
-            children: [
-              children,
-              /* @__PURE__ */ jsxRuntime.jsx(CategoryChip, { category: currentCategory }),
-              /* @__PURE__ */ jsxRuntime.jsx(SiteStateBadge, { state: siteState }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                lucideReact.ChevronDown,
-                {
-                  "aria-hidden": true,
-                  className: "text-muted-foreground/70 group-hover:text-foreground/80 h-3.5 w-3.5 shrink-0 transition-transform duration-200 " + (open ? "rotate-180" : "")
-                }
-              )
-            ]
+            content: /* @__PURE__ */ jsxRuntime.jsx(SwitcherTooltipCard, { current }),
+            disabled: open,
+            side: "bottom",
+            align: "start",
+            sideOffset: 8,
+            zIndexClassName: "z-[70]",
+            children: /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                "aria-haspopup": "menu",
+                "aria-expanded": open,
+                "aria-controls": menuId,
+                "aria-label": "orangecheck family menu",
+                onClick: handleTriggerClick,
+                className: cn(
+                  // focus indicator is guaranteed even if a consumer overrides triggerClassName
+                  "focus-visible:ring-primary/60 rounded-sm focus-visible:ring-2 focus-visible:outline-none",
+                  triggerClassName ?? "group hover:bg-accent/30 -mx-1.5 -my-1 flex min-h-[40px] items-center gap-2 rounded-sm px-1.5 py-1 transition-colors " + (open ? "bg-accent/20" : "")
+                ),
+                "data-oc-logo-dropdown-trigger": "",
+                "data-oc-logo-dropdown-open": open ? "true" : "false",
+                children: [
+                  children,
+                  /* @__PURE__ */ jsxRuntime.jsx(CategoryChip, { category: currentCategory }),
+                  /* @__PURE__ */ jsxRuntime.jsx(SiteStateBadge, { state: siteState }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    lucideReact.ChevronDown,
+                    {
+                      "aria-hidden": true,
+                      className: "text-muted-foreground/70 group-hover:text-foreground/80 h-3.5 w-3.5 shrink-0 transition-transform duration-200 " + (open ? "rotate-180" : "")
+                    }
+                  )
+                ]
+              }
+            )
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2821,7 +2995,7 @@ function OcLogoDropdown({
           {
             id: menuId,
             role: "menu",
-            "aria-label": "OrangeCheck family",
+            "aria-label": "orangecheck family",
             className: popoverClassName ?? "bg-background absolute top-full left-0 z-[60] mt-2 w-[min(20rem,calc(100vw-1rem))] border shadow-lg",
             "data-oc-logo-dropdown-popover": "",
             children: [
@@ -4082,6 +4256,7 @@ exports.Textarea = Textarea;
 exports.ThemeToggle = ThemeToggle;
 exports.ThemeToggleLink = ThemeToggleLink;
 exports.Toaster = Toaster;
+exports.Tooltip = Tooltip;
 exports.Working = Working;
 exports.WorkingPanel = WorkingPanel;
 exports.accentFor = accentFor;