@hexdspace/react 0.1.27 → 0.1.28

package/dist/index.d.ts

@@ -640,4 +640,30 @@ type Props = {
 };
 declare function Tooltip({ children, content, delayMs, side, sideOffset, maxWidthPx, preserveWhitespace, }: Props): react_jsx_runtime.JSX.Element;
 
-export { AuthController, AuthControllerCtx, type AuthControllerDeps, AuthControllerProvider, AuthDispatchCtx, AuthProvider, type AuthState, AuthStateCtx, Button, type ButtonProps, type CacheInstruction, ConfirmDialog, type ConfirmDialogProps, type ConfirmPayload, CustomDialog, type CustomDialogPayload, type CustomDialogProps, type CustomInstruction, DEFAULT_NOTIFICATION_CHANNEL, type DefaultDialogPayloads, type DefaultDialogTemplateKey, DefaultDialogTemplateKeys, Dialog, DialogContent, DialogController, DialogHost, type DialogInstance, type DialogOptions, type DialogProps, type DialogTemplate, type ErrorResponse, Field, type FieldProps, type GenericResponse, type HttpClient, HttpError, type HttpMethod, type HttpResponse, InfoDialog, type InfoDialogProps, type InfoPayload, Input, type InputProps, type Instruction, type InstructionContext, MockAuthHttpClient, MockHttpClient, type MutationFn, type Notification, type NotificationAction, NotificationHost, type NotificationInstruction, type NotificationVariant, NotifierController, type OnSuccessFn, type OptimisticSnapshot, type OptimisticUpdateFn, RedirectIfAuthed, type RedirectIfAuthedProps, type RequestConfig, RequireAuth, type RequireAuthProps, type ResolvedToastTheme, type ResponsiveMutation, Skeleton, type SkeletonProps, Textarea, type TextareaProps, type ToastActionTheme, type ToastTheme, type ToastTransition, type ToastifyCSSVars, Tooltip, type UIFail, type UIOk, type UIResult, type User, authController, controllerFactory, createAuthController, dialogController, httpClient as fetchHttpClient, getDialogTemplate, notifierController, registerDefaultDialogs, registerDialogTemplate, resolveToastTheme, ui, unregisterDialogTemplate, useAuth, useAuthActions, useAuthController, useAuthDispatch, useAuthedUser, useDialog, useResponsiveMutation };
+declare const popoverContentVariants: (props?: ({
+    chrome?: "flat" | "glass" | "glow" | "hairline" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface PopoverProps extends VariantProps<typeof popoverContentVariants> {
+    trigger: React.ReactElement;
+    children: React.ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    modal?: boolean;
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    align?: 'start' | 'center' | 'end';
+    sideOffset?: number;
+    alignOffset?: number;
+    collisionPadding?: number;
+    withArrow?: boolean;
+    arrowSizePx?: number;
+    arrowClassName?: string;
+    portalContainer?: Element | null;
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare function Popover({ trigger, children, open, defaultOpen, onOpenChange, modal, side, align, sideOffset, alignOffset, collisionPadding, withArrow, arrowSizePx, arrowClassName, portalContainer, ariaLabel, ariaLabelledBy, chrome, className, style, }: PopoverProps): react_jsx_runtime.JSX.Element;
+
+export { AuthController, AuthControllerCtx, type AuthControllerDeps, AuthControllerProvider, AuthDispatchCtx, AuthProvider, type AuthState, AuthStateCtx, Button, type ButtonProps, type CacheInstruction, ConfirmDialog, type ConfirmDialogProps, type ConfirmPayload, CustomDialog, type CustomDialogPayload, type CustomDialogProps, type CustomInstruction, DEFAULT_NOTIFICATION_CHANNEL, type DefaultDialogPayloads, type DefaultDialogTemplateKey, DefaultDialogTemplateKeys, Dialog, DialogContent, DialogController, DialogHost, type DialogInstance, type DialogOptions, type DialogProps, type DialogTemplate, type ErrorResponse, Field, type FieldProps, type GenericResponse, type HttpClient, HttpError, type HttpMethod, type HttpResponse, InfoDialog, type InfoDialogProps, type InfoPayload, Input, type InputProps, type Instruction, type InstructionContext, MockAuthHttpClient, MockHttpClient, type MutationFn, type Notification, type NotificationAction, NotificationHost, type NotificationInstruction, type NotificationVariant, NotifierController, type OnSuccessFn, type OptimisticSnapshot, type OptimisticUpdateFn, Popover, type PopoverProps, RedirectIfAuthed, type RedirectIfAuthedProps, type RequestConfig, RequireAuth, type RequireAuthProps, type ResolvedToastTheme, type ResponsiveMutation, Skeleton, type SkeletonProps, Textarea, type TextareaProps, type ToastActionTheme, type ToastTheme, type ToastTransition, type ToastifyCSSVars, Tooltip, type UIFail, type UIOk, type UIResult, type User, authController, controllerFactory, createAuthController, dialogController, httpClient as fetchHttpClient, getDialogTemplate, notifierController, registerDefaultDialogs, registerDialogTemplate, resolveToastTheme, ui, unregisterDialogTemplate, useAuth, useAuthActions, useAuthController, useAuthDispatch, useAuthedUser, useDialog, useResponsiveMutation };

package/dist/index.js

@@ -1542,8 +1542,8 @@ Button.displayName = "Button";
 
 // src/ui/components/dialog/Dialog.tsx
 import { cva as cva2 } from "class-variance-authority";
-import { AnimatePresence, motion } from "motion/react";
 import { XIcon } from "lucide-react";
+import { AnimatePresence, motion } from "motion/react";
 import { Dialog as DialogPrimitive } from "radix-ui";
 import * as React3 from "react";
 
@@ -1743,8 +1743,16 @@ function Dialog({
           className: overlayClassName,
           style: { zIndex: zIndex - 1 },
           variants: {
-            open: { opacity: 1, pointerEvents: "auto", transition: { duration: motionDuration, ease: "easeOut" } },
-            closed: { opacity: 0, pointerEvents: "none", transition: { duration: motionDuration, ease: "easeOut" } }
+            open: {
+              opacity: 1,
+              pointerEvents: "auto",
+              transition: { duration: motionDuration, ease: "easeOut" }
+            },
+            closed: {
+              opacity: 0,
+              pointerEvents: "none",
+              transition: { duration: motionDuration, ease: "easeOut" }
+            }
           },
           initial: "closed",
           animate: overlayReady ? "open" : "closed",
@@ -1781,8 +1789,16 @@ function Dialog({
                 "--dialog-width": `${maxWidthPx}px`
               },
               variants: {
-                open: { opacity: 1, pointerEvents: "auto", transition: { duration: motionDuration, ease: "easeOut" } },
-                closed: { opacity: 0, pointerEvents: "none", transition: { duration: motionDuration, ease: "easeIn" } }
+                open: {
+                  opacity: 1,
+                  pointerEvents: "auto",
+                  transition: { duration: motionDuration, ease: "easeOut" }
+                },
+                closed: {
+                  opacity: 0,
+                  pointerEvents: "none",
+                  transition: { duration: motionDuration, ease: "easeIn" }
+                }
               },
               initial: "open",
               animate: "open",
@@ -1792,8 +1808,16 @@ function Dialog({
                 {
                   className: surfaceClassName,
                   variants: {
-                    open: { opacity: 1, y: 0, transition: { duration: motionDuration, ease: "easeOut" } },
-                    closed: { opacity: 0, y: 20, transition: { duration: motionDuration, ease: "easeIn" } }
+                    open: {
+                      opacity: 1,
+                      y: 0,
+                      transition: { duration: motionDuration, ease: "easeOut" }
+                    },
+                    closed: {
+                      opacity: 0,
+                      y: 20,
+                      transition: { duration: motionDuration, ease: "easeIn" }
+                    }
                   },
                   initial: "closed",
                   animate: surfaceReady ? "open" : "closed",
@@ -1810,21 +1834,14 @@ function Dialog({
                         tabIndex: -1
                       }
                     ) }) : null,
-                    /* @__PURE__ */ jsx7(
-                      AutoHeight,
+                    /* @__PURE__ */ jsx7(AutoHeight, { onReady: handleAutoHeightReady, durationSeconds: motionDuration, children: /* @__PURE__ */ jsx7(
+                      Template,
                       {
-                        onReady: handleAutoHeightReady,
-                        durationSeconds: motionDuration,
-                        children: /* @__PURE__ */ jsx7(
-                          Template,
-                          {
-                            id: id ?? fallbackId,
-                            payload,
-                            onResolve: handleResolve
-                          }
-                        )
+                        id: id ?? fallbackId,
+                        payload,
+                        onResolve: handleResolve
                       }
-                    )
+                    ) })
                   ]
                 }
               )
@@ -2546,48 +2563,177 @@ function Tooltip({
   const motionDuration = useMotionDuration("--motion-fast", 0.14);
   return /* @__PURE__ */ jsx17(TooltipPrimitive.Provider, { delayDuration: delayMs, children: /* @__PURE__ */ jsxs9(TooltipPrimitive.Root, { onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsx17(TooltipPrimitive.Trigger, { asChild: true, children }),
-    /* @__PURE__ */ jsx17(TooltipPrimitive.Portal, { forceMount: true, children: /* @__PURE__ */ jsx17(AnimatePresence2, { children: open2 ? /* @__PURE__ */ jsx17(
-      TooltipPrimitive.Content,
+    /* @__PURE__ */ jsx17(TooltipPrimitive.Portal, { forceMount: true, children: /* @__PURE__ */ jsx17(AnimatePresence2, { children: open2 ? /* @__PURE__ */ jsx17(TooltipPrimitive.Content, { asChild: true, forceMount: true, side, sideOffset, children: /* @__PURE__ */ jsxs9(
+      motion2.div,
+      {
+        className: tooltipContentBase,
+        initial: {
+          opacity: 0,
+          scale: 0.98,
+          x: "var(--tooltip-x)",
+          y: "var(--tooltip-y)"
+        },
+        animate: { opacity: 1, scale: 1, x: 0, y: 0 },
+        exit: {
+          opacity: 0,
+          scale: 0.98,
+          x: "var(--tooltip-x)",
+          y: "var(--tooltip-y)",
+          transition: { duration: motionDuration, ease: "easeIn" }
+        },
+        transition: { duration: motionDuration, ease: "easeOut" },
+        style: {
+          width: "max-content",
+          maxWidth: `min(${maxWidthPx}px, 90vw)`,
+          whiteSpace: preserveWhitespace ? "pre-line" : "normal",
+          overflowWrap: "break-word",
+          hyphens: "auto"
+        },
+        children: [
+          content,
+          /* @__PURE__ */ jsx17(TooltipPrimitive.Arrow, { style: { fill: "var(--surface-2)" } })
+        ]
+      }
+    ) }) : null }) })
+  ] }) });
+}
+
+// src/ui/components/Popover.tsx
+import { cva as cva6 } from "class-variance-authority";
+import { AnimatePresence as AnimatePresence3, motion as motion3 } from "motion/react";
+import { Popover as PopoverPrimitive } from "radix-ui";
+import * as React11 from "react";
+import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
+var popoverContentVariants = cva6(
+  cn(
+    "p-3 text-sm z-5000",
+    "origin-center",
+    "[--popover-x:0px] [--popover-y:6px]",
+    "data-[side=bottom]:[--popover-y:-6px]",
+    "data-[side=left]:[--popover-x:6px] data-[side=left]:[--popover-y:0px]",
+    "data-[side=right]:[--popover-x:-6px] data-[side=right]:[--popover-y:0px]"
+  ),
+  {
+    variants: {
+      chrome: {
+        flat: "card",
+        glass: cn(
+          "border border-[color:color-mix(in_oklab,var(--border),transparent_55%)]",
+          "bg-[color:color-mix(in_oklab,var(--surface-2),transparent_25%)]",
+          "backdrop-blur-[6px]",
+          "rounded-[var(--radius-card)]",
+          "shadow-[0_12px_26px_rgba(0,0,0,0.16)]"
+        ),
+        glow: cn(
+          "rounded-[var(--radius-card)]",
+          "border border-[color:color-mix(in_oklab,var(--border),transparent_60%)]",
+          "bg-[color:var(--surface-2)]",
+          "shadow-[0_0_0_1px_color-mix(in_oklab,var(--border),transparent_55%),0_12px_28px_color-mix(in_oklab,var(--border),transparent_65%)]"
+        ),
+        hairline: cn(
+          "rounded-[var(--radius-card)]",
+          "border border-[color:color-mix(in_oklab,var(--border),transparent_70%)]",
+          "bg-transparent",
+          "shadow-none"
+        )
+      }
+    },
+    defaultVariants: {
+      chrome: "flat"
+    }
+  }
+);
+function Popover({
+  trigger,
+  children,
+  open: open2,
+  defaultOpen,
+  onOpenChange,
+  modal = false,
+  side = "bottom",
+  align = "end",
+  sideOffset = 8,
+  alignOffset = 8,
+  collisionPadding = 8,
+  withArrow = false,
+  arrowSizePx = 10,
+  arrowClassName,
+  portalContainer,
+  ariaLabel = "Popover",
+  ariaLabelledBy,
+  chrome,
+  className,
+  style
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React11.useState(defaultOpen ?? false);
+  const isControlled = open2 !== void 0;
+  const resolvedOpen = isControlled ? open2 : uncontrolledOpen;
+  const contentId = React11.useId();
+  const motionDuration = useMotionDuration("--motion-fast", 0.14);
+  const handleOpenChange = (nextOpen) => {
+    if (!isControlled) setUncontrolledOpen(nextOpen);
+    onOpenChange?.(nextOpen);
+  };
+  return /* @__PURE__ */ jsxs10(PopoverPrimitive.Root, { open: resolvedOpen, onOpenChange: handleOpenChange, modal, children: [
+    /* @__PURE__ */ jsx18(
+      PopoverPrimitive.Trigger,
+      {
+        asChild: true,
+        "aria-controls": resolvedOpen ? contentId : void 0,
+        "aria-expanded": resolvedOpen,
+        children: trigger
+      }
+    ),
+    /* @__PURE__ */ jsx18(PopoverPrimitive.Portal, { forceMount: true, container: portalContainer, children: /* @__PURE__ */ jsx18(AnimatePresence3, { children: resolvedOpen ? /* @__PURE__ */ jsx18(
+      PopoverPrimitive.Content,
       {
         asChild: true,
         forceMount: true,
+        id: contentId,
         side,
+        align,
         sideOffset,
-        children: /* @__PURE__ */ jsxs9(
-          motion2.div,
+        alignOffset,
+        collisionPadding,
+        "aria-label": ariaLabelledBy ? void 0 : ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        children: /* @__PURE__ */ jsxs10(
+          motion3.div,
           {
-            className: tooltipContentBase,
+            className: cn(popoverContentVariants({ chrome }), className),
             initial: {
               opacity: 0,
               scale: 0.98,
-              x: "var(--tooltip-x)",
-              y: "var(--tooltip-y)"
+              x: "var(--popover-x)",
+              y: "var(--popover-y)"
             },
             animate: { opacity: 1, scale: 1, x: 0, y: 0 },
             exit: {
               opacity: 0,
               scale: 0.98,
-              x: "var(--tooltip-x)",
-              y: "var(--tooltip-y)",
+              x: "var(--popover-x)",
+              y: "var(--popover-y)",
               transition: { duration: motionDuration, ease: "easeIn" }
             },
             transition: { duration: motionDuration, ease: "easeOut" },
-            style: {
-              width: "max-content",
-              maxWidth: `min(${maxWidthPx}px, 90vw)`,
-              whiteSpace: preserveWhitespace ? "pre-line" : "normal",
-              overflowWrap: "break-word",
-              hyphens: "auto"
-            },
+            style,
             children: [
-              content,
-              /* @__PURE__ */ jsx17(TooltipPrimitive.Arrow, { style: { fill: "var(--surface-2)" } })
+              children,
+              withArrow ? /* @__PURE__ */ jsx18(
+                PopoverPrimitive.Arrow,
+                {
+                  className: arrowClassName,
+                  width: arrowSizePx,
+                  height: arrowSizePx,
+                  style: { fill: "var(--surface-2)" }
+                }
+              ) : null
             ]
           }
         )
       }
     ) : null }) })
-  ] }) });
+  ] });
 }
 export {
   AuthController,
@@ -2613,6 +2759,7 @@ export {
   MockHttpClient,
   NotificationHost,
   NotifierController,
+  Popover,
   RedirectIfAuthed,
   RequireAuth,
   Skeleton,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hexdspace/react",
-  "version": "0.1.27",
+  "version": "0.1.28",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",