@orangecheck/design 0.8.0 → 0.9.1

package/dist/primitives.d.mts

@@ -198,6 +198,22 @@ declare function PopoverTrigger({ ...props }: React.ComponentProps<typeof Popove
 declare function PopoverContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content>): react_jsx_runtime.JSX.Element;
 declare function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>): react_jsx_runtime.JSX.Element;
 
+interface TooltipProps {
+    content: React.ReactNode;
+    children: React.ReactElement;
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    align?: 'start' | 'center' | 'end';
+    sideOffset?: number;
+    collisionPadding?: number;
+    openDelay?: number;
+    closeDelay?: number;
+    disabled?: boolean;
+    portal?: boolean;
+    zIndexClassName?: string;
+    contentClassName?: string;
+}
+declare function Tooltip({ content, children, side, align, sideOffset, collisionPadding, openDelay, closeDelay, disabled, portal, zIndexClassName, contentClassName, }: TooltipProps): react_jsx_runtime.JSX.Element;
+
 declare const Accordion: React.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & React.RefAttributes<HTMLDivElement>>;
 declare const AccordionItem: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
@@ -226,7 +242,7 @@ interface CardProps {
     actions?: ReactNode;
     children: ReactNode;
     className?: string;
-    tone?: 'default' | 'warning' | 'destructive' | 'muted';
+    tone?: "default" | "warning" | "destructive" | "muted";
     expandable?: boolean;
 }
 declare function Card({ id, title, subtitle, refreshedAt, actions, children, className, tone, expandable, }: CardProps): react_jsx_runtime.JSX.Element;
@@ -330,4 +346,4 @@ interface QrCodeProps {
 }
 declare function QrCode({ value, size, label, className }: QrCodeProps): react_jsx_runtime.JSX.Element;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, AlertWithAction, type AlertWithActionProps, AlertWithCountdown, type AlertWithCountdownProps, Badge, Bar, type BarProps, BitcoinAddress, type BitcoinAddressProps, Button, Card, type CardProps, Checkbox, ConfirmHost, type ConfirmOptions, CopyButton, type CopyButtonProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, ErrorBoundary, Input, Label, Modal, type ModalProps, Pagination, type PaginationProps, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PromptHost, type PromptOptions, QrCode, type QrCodeProps, RadioGroup, RadioGroupItem, SatsAmount, type SatsAmountProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, type SkeletonProps, Sparkline, type SparklineProps, StatBlock, type StatBlockProps, StatusPill, type StatusPillProps, type StatusPillSpec, type StatusPillVariant, type StatusTone, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeToggle, ThemeToggleLink, Toaster, Working, WorkingPanel, type WorkingProps, badgeVariants, buttonVariants, confirm, makeStatusPill, prompt };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, AlertWithAction, type AlertWithActionProps, AlertWithCountdown, type AlertWithCountdownProps, Badge, Bar, type BarProps, BitcoinAddress, type BitcoinAddressProps, Button, Card, type CardProps, Checkbox, ConfirmHost, type ConfirmOptions, CopyButton, type CopyButtonProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, ErrorBoundary, Input, Label, Modal, type ModalProps, Pagination, type PaginationProps, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PromptHost, type PromptOptions, QrCode, type QrCodeProps, RadioGroup, RadioGroupItem, SatsAmount, type SatsAmountProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, type SkeletonProps, Sparkline, type SparklineProps, StatBlock, type StatBlockProps, StatusPill, type StatusPillProps, type StatusPillSpec, type StatusPillVariant, type StatusTone, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeToggle, ThemeToggleLink, Toaster, Tooltip, type TooltipProps, Working, WorkingPanel, type WorkingProps, badgeVariants, buttonVariants, confirm, makeStatusPill, prompt };

package/dist/primitives.d.ts

@@ -198,6 +198,22 @@ declare function PopoverTrigger({ ...props }: React.ComponentProps<typeof Popove
 declare function PopoverContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content>): react_jsx_runtime.JSX.Element;
 declare function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>): react_jsx_runtime.JSX.Element;
 
+interface TooltipProps {
+    content: React.ReactNode;
+    children: React.ReactElement;
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    align?: 'start' | 'center' | 'end';
+    sideOffset?: number;
+    collisionPadding?: number;
+    openDelay?: number;
+    closeDelay?: number;
+    disabled?: boolean;
+    portal?: boolean;
+    zIndexClassName?: string;
+    contentClassName?: string;
+}
+declare function Tooltip({ content, children, side, align, sideOffset, collisionPadding, openDelay, closeDelay, disabled, portal, zIndexClassName, contentClassName, }: TooltipProps): react_jsx_runtime.JSX.Element;
+
 declare const Accordion: React.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & React.RefAttributes<HTMLDivElement>>;
 declare const AccordionItem: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
@@ -226,7 +242,7 @@ interface CardProps {
     actions?: ReactNode;
     children: ReactNode;
     className?: string;
-    tone?: 'default' | 'warning' | 'destructive' | 'muted';
+    tone?: "default" | "warning" | "destructive" | "muted";
     expandable?: boolean;
 }
 declare function Card({ id, title, subtitle, refreshedAt, actions, children, className, tone, expandable, }: CardProps): react_jsx_runtime.JSX.Element;
@@ -330,4 +346,4 @@ interface QrCodeProps {
 }
 declare function QrCode({ value, size, label, className }: QrCodeProps): react_jsx_runtime.JSX.Element;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, AlertWithAction, type AlertWithActionProps, AlertWithCountdown, type AlertWithCountdownProps, Badge, Bar, type BarProps, BitcoinAddress, type BitcoinAddressProps, Button, Card, type CardProps, Checkbox, ConfirmHost, type ConfirmOptions, CopyButton, type CopyButtonProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, ErrorBoundary, Input, Label, Modal, type ModalProps, Pagination, type PaginationProps, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PromptHost, type PromptOptions, QrCode, type QrCodeProps, RadioGroup, RadioGroupItem, SatsAmount, type SatsAmountProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, type SkeletonProps, Sparkline, type SparklineProps, StatBlock, type StatBlockProps, StatusPill, type StatusPillProps, type StatusPillSpec, type StatusPillVariant, type StatusTone, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeToggle, ThemeToggleLink, Toaster, Working, WorkingPanel, type WorkingProps, badgeVariants, buttonVariants, confirm, makeStatusPill, prompt };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, AlertWithAction, type AlertWithActionProps, AlertWithCountdown, type AlertWithCountdownProps, Badge, Bar, type BarProps, BitcoinAddress, type BitcoinAddressProps, Button, Card, type CardProps, Checkbox, ConfirmHost, type ConfirmOptions, CopyButton, type CopyButtonProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, ErrorBoundary, Input, Label, Modal, type ModalProps, Pagination, type PaginationProps, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PromptHost, type PromptOptions, QrCode, type QrCodeProps, RadioGroup, RadioGroupItem, SatsAmount, type SatsAmountProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, type SkeletonProps, Sparkline, type SparklineProps, StatBlock, type StatBlockProps, StatusPill, type StatusPillProps, type StatusPillSpec, type StatusPillVariant, type StatusTone, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeToggle, ThemeToggleLink, Toaster, Tooltip, type TooltipProps, Working, WorkingPanel, type WorkingProps, badgeVariants, buttonVariants, confirm, makeStatusPill, prompt };

package/dist/primitives.js

@@ -1084,6 +1084,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";
@@ -1309,20 +1444,24 @@ function Card({
       "section",
       {
         id,
-        className: cn("terminal flex flex-col rounded-sm border scroll-mt-16", toneClass, className),
+        className: cn(
+          "terminal flex flex-col rounded-sm border scroll-mt-16",
+          toneClass,
+          className
+        ),
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "terminal-title flex items-center justify-between gap-3", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "terminal-dot", "aria-hidden": true }),
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "terminal-dot opacity-70", "aria-hidden": true }),
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "terminal-dot opacity-50", "aria-hidden": true }),
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2 truncate", children: title }),
-              subtitle && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-muted-foreground/70 ml-1 truncate text-[10px] tracking-normal normal-case", children: [
+              subtitle && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-muted-foreground/70 ml-1 min-w-0 truncate text-[10px] tracking-normal normal-case", children: [
                 "\xB7 ",
                 subtitle
               ] })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [
               refreshedAt && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground/60 hidden text-[10px] tracking-normal normal-case sm:inline", children: refreshedAt }),
               actions,
               expandable && /* @__PURE__ */ jsxRuntime.jsx(
@@ -1778,6 +1917,7 @@ exports.Textarea = Textarea;
 exports.ThemeToggle = ThemeToggle;
 exports.ThemeToggleLink = ThemeToggleLink;
 exports.Toaster = Toaster;
+exports.Tooltip = Tooltip;
 exports.Working = Working;
 exports.WorkingPanel = WorkingPanel;
 exports.badgeVariants = badgeVariants;