@hexdspace/react 0.1.29 → 0.1.30

package/dist/index.d.ts

@@ -6,6 +6,7 @@ import React__default, { CSSProperties, Dispatch, ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
+import { DropdownMenu as DropdownMenu$1 } from 'radix-ui';
 
 type NotificationVariant = 'success' | 'warning' | 'error' | 'info';
 declare const DEFAULT_NOTIFICATION_CHANNEL = "app.notifications";
@@ -666,4 +667,48 @@ interface PopoverProps extends VariantProps<typeof popoverContentVariants> {
 }
 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 };
+declare const dropdownMenuContentVariants: (props?: ({
+    chrome?: "flat" | "glass" | "glow" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type DropdownMenuContentControlledProps = 'asChild' | 'children' | 'side' | 'align' | 'sideOffset' | 'alignOffset' | 'collisionPadding' | 'className' | 'style' | 'aria-label' | 'aria-labelledby';
+type DropdownMenuContentProps = Omit<React.ComponentPropsWithoutRef<typeof DropdownMenu$1.Content>, DropdownMenuContentControlledProps> & {
+    className?: string;
+    style?: React.CSSProperties;
+    ref?: React.Ref<HTMLDivElement>;
+};
+declare const dropdownMenuItemVariants: (props?: ({
+    inset?: boolean | null | undefined;
+    destructive?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface DropdownMenuProps extends VariantProps<typeof dropdownMenuContentVariants> {
+    trigger: React.ReactElement;
+    children: React.ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    hoverOpen?: boolean;
+    hoverCloseDelayMs?: number;
+    modal?: boolean;
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    align?: 'start' | 'center' | 'end';
+    sideOffset?: number;
+    alignOffset?: number;
+    collisionPadding?: number;
+    portalContainer?: Element | null;
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    contentProps?: DropdownMenuContentProps;
+}
+declare function DropdownMenu({ trigger, children, open, defaultOpen, onOpenChange, hoverOpen, hoverCloseDelayMs, modal, side, align, sideOffset, alignOffset, collisionPadding, portalContainer, ariaLabel, ariaLabelledBy, chrome, className, style, contentProps, }: DropdownMenuProps): react_jsx_runtime.JSX.Element;
+interface DropdownMenuItemProps extends React.ComponentPropsWithoutRef<typeof DropdownMenu$1.Item>, VariantProps<typeof dropdownMenuItemVariants> {
+}
+declare const DropdownMenuItem: React.ForwardRefExoticComponent<DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSeparator: React.ForwardRefExoticComponent<Omit<DropdownMenu$1.DropdownMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+interface KbdProps extends React.HTMLAttributes<HTMLSpanElement> {
+}
+declare const Kbd: React.ForwardRefExoticComponent<KbdProps & React.RefAttributes<HTMLSpanElement>>;
+
+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, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, DropdownMenuSeparator, 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, Kbd, type KbdProps, 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

@@ -2735,6 +2735,315 @@ function Popover({
     ) : null }) })
   ] });
 }
+
+// src/ui/components/DropdownMenu.tsx
+import { cva as cva7 } from "class-variance-authority";
+import { AnimatePresence as AnimatePresence4, motion as motion4 } from "motion/react";
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
+import * as React12 from "react";
+import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
+var dropdownMenuContentVariants = cva7(
+  cn(
+    "min-w-[14rem] p-2 text-sm z-5000",
+    "text-[color:var(--text-1)]",
+    "shadow-[var(--shadow-popover)]",
+    "overflow-hidden",
+    "origin-center",
+    "[--menu-x:0px] [--menu-y:6px]",
+    "data-[side=bottom]:[--menu-y:-6px]",
+    "data-[side=left]:[--menu-x:6px] data-[side=left]:[--menu-y:0px]",
+    "data-[side=right]:[--menu-x:-6px] data-[side=right]:[--menu-y:0px]"
+  ),
+  {
+    variants: {
+      chrome: {
+        flat: cn(
+          "rounded-[var(--radius-card)]",
+          "border border-[color:color-mix(in_oklab,var(--border),transparent_55%)]",
+          "bg-[color:var(--surface-2)]"
+        ),
+        glass: cn(
+          "rounded-[var(--radius-card)]",
+          "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]",
+          "shadow-[var(--shadow-popover)]"
+        ),
+        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%)]"
+        )
+      }
+    },
+    defaultVariants: {
+      chrome: "flat"
+    }
+  }
+);
+var dropdownMenuItemVariants = cva7(
+  cn(
+    "state-layer",
+    "flex items-center gap-3 rounded-[calc(var(--radius-card)-8px)] px-3.5 py-2.5 text-sm outline-none",
+    "text-[color:var(--text-1)] cursor-pointer",
+    "data-[highlighted]:bg-[color:var(--surface-hover)] data-[highlighted]:text-[color:var(--text-1)]",
+    "data-[highlighted]:shadow-[0_0_0_1px_color-mix(in_oklab,var(--border),transparent_55%)]",
+    "data-[highlighted]:translate-x-[1px]",
+    "active:bg-[color:var(--surface-active)]",
+    "data-[disabled]:text-[color:var(--disabled-fg)] data-[disabled]:pointer-events-none",
+    "data-[disabled]:cursor-not-allowed",
+    "transition-[background-color,color,box-shadow,transform] duration-[var(--motion-fast)] ease-out"
+  ),
+  {
+    variants: {
+      inset: { true: "pl-8" },
+      destructive: {
+        true: cn(
+          "text-[color:var(--danger)]",
+          "data-[highlighted]:text-[color:var(--danger)]",
+          "data-[highlighted]:bg-[color:color-mix(in_oklab,var(--danger),transparent_85%)]"
+        )
+      }
+    }
+  }
+);
+function useWindowTimeout() {
+  const timeoutRef = React12.useRef(null);
+  const clear = React12.useCallback(() => {
+    if (timeoutRef.current !== null) {
+      window.clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+  }, []);
+  const set = React12.useCallback(
+    (fn, ms) => {
+      clear();
+      timeoutRef.current = window.setTimeout(() => {
+        timeoutRef.current = null;
+        fn();
+      }, ms);
+    },
+    [clear]
+  );
+  React12.useEffect(() => clear, [clear]);
+  return { set, clear };
+}
+function DropdownMenu({
+  trigger,
+  children,
+  open: open2,
+  defaultOpen,
+  onOpenChange,
+  hoverOpen = false,
+  hoverCloseDelayMs = 50,
+  modal = false,
+  side = "bottom",
+  align = "start",
+  sideOffset = 8,
+  alignOffset = 0,
+  collisionPadding = 8,
+  portalContainer,
+  ariaLabel = "Menu",
+  ariaLabelledBy,
+  chrome,
+  className,
+  style,
+  contentProps
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React12.useState(defaultOpen ?? false);
+  const isControlled = open2 !== void 0;
+  const resolvedOpen = isControlled ? open2 : uncontrolledOpen;
+  const motionDuration = useMotionDuration("--motion-fast", 0.14);
+  const suppressDurationMs = Math.max(hoverCloseDelayMs, Math.round(motionDuration * 1e3) + 40);
+  const closeTimer = useWindowTimeout();
+  const triggerRef = React12.useRef(null);
+  const contentRef = React12.useRef(null);
+  const openedByHoverRef = React12.useRef(false);
+  const suppressUntilRef = React12.useRef(0);
+  const lastInputRef = React12.useRef("unknown");
+  const isSuppressed = React12.useCallback(() => {
+    if (!hoverOpen) return false;
+    return Date.now() < suppressUntilRef.current;
+  }, [hoverOpen]);
+  const suppressReopen = React12.useCallback(() => {
+    if (!hoverOpen) return;
+    suppressUntilRef.current = Date.now() + suppressDurationMs;
+  }, [hoverOpen, suppressDurationMs]);
+  const handleOpenChange = React12.useCallback(
+    (nextOpen) => {
+      closeTimer.clear();
+      if (!nextOpen && hoverOpen && openedByHoverRef.current) {
+        suppressReopen();
+        openedByHoverRef.current = false;
+      }
+      if (!isControlled) setUncontrolledOpen(nextOpen);
+      onOpenChange?.(nextOpen);
+    },
+    [closeTimer, hoverOpen, isControlled, onOpenChange, suppressReopen]
+  );
+  const isTargetInside = React12.useCallback((target) => {
+    if (!(target instanceof Node)) return false;
+    return Boolean(triggerRef.current?.contains(target) || contentRef.current?.contains(target));
+  }, []);
+  const scheduleClose = React12.useCallback(() => {
+    if (!hoverOpen) return;
+    closeTimer.set(() => handleOpenChange(false), hoverCloseDelayMs);
+  }, [closeTimer, handleOpenChange, hoverCloseDelayMs, hoverOpen]);
+  const setRef = (ref, node) => {
+    if (typeof ref === "function") {
+      ref(node);
+    } else if (ref && typeof ref === "object") {
+      ref.current = node;
+    }
+  };
+  const triggerElement = trigger;
+  const triggerProps = triggerElement.props;
+  const resolvedTrigger = hoverOpen ? React12.cloneElement(triggerElement, {
+    ref: (node) => {
+      triggerRef.current = node;
+      setRef(triggerProps.ref, node);
+    },
+    onPointerEnter: (event) => {
+      triggerProps.onPointerEnter?.(event);
+      if (isSuppressed()) return;
+      openedByHoverRef.current = true;
+      lastInputRef.current = "pointer";
+      suppressUntilRef.current = 0;
+      closeTimer.clear();
+      handleOpenChange(true);
+    },
+    onPointerDown: (event) => {
+      triggerProps.onPointerDown?.(event);
+      lastInputRef.current = "pointer";
+    },
+    onPointerLeave: (event) => {
+      triggerProps.onPointerLeave?.(event);
+      if (isTargetInside(event.relatedTarget)) return;
+      scheduleClose();
+    },
+    onFocus: (event) => {
+      triggerProps.onFocus?.(event);
+      if (lastInputRef.current === "pointer") return;
+      if (isSuppressed()) return;
+      openedByHoverRef.current = false;
+      closeTimer.clear();
+      handleOpenChange(true);
+    },
+    onKeyDown: (event) => {
+      triggerProps.onKeyDown?.(event);
+      lastInputRef.current = "keyboard";
+    }
+  }) : trigger;
+  const contentPropsWithRef = contentProps;
+  const { className: contentClassName, style: contentStyle, ref: contentPropRef, ...restContentProps } = contentPropsWithRef ?? {};
+  const onPointerDownOutside = (event) => {
+    restContentProps.onPointerDownOutside?.(event);
+    if (openedByHoverRef.current) suppressReopen();
+  };
+  const onInteractOutside = (event) => {
+    restContentProps.onInteractOutside?.(event);
+    if (openedByHoverRef.current) suppressReopen();
+  };
+  const resolvedContentProps = hoverOpen ? {
+    ...restContentProps,
+    onPointerEnter: (event) => {
+      restContentProps.onPointerEnter?.(event);
+      closeTimer.clear();
+    },
+    onPointerLeave: (event) => {
+      restContentProps.onPointerLeave?.(event);
+      if (isTargetInside(event.relatedTarget)) return;
+      scheduleClose();
+    },
+    onFocus: (event) => {
+      restContentProps.onFocus?.(event);
+      closeTimer.clear();
+    },
+    onPointerDownOutside,
+    onInteractOutside
+  } : restContentProps;
+  return /* @__PURE__ */ jsxs11(DropdownMenuPrimitive.Root, { open: resolvedOpen, onOpenChange: handleOpenChange, modal, children: [
+    /* @__PURE__ */ jsx19(DropdownMenuPrimitive.Trigger, { asChild: true, children: resolvedTrigger }),
+    /* @__PURE__ */ jsx19(DropdownMenuPrimitive.Portal, { forceMount: true, container: portalContainer, children: /* @__PURE__ */ jsx19(AnimatePresence4, { children: resolvedOpen ? /* @__PURE__ */ jsx19(
+      DropdownMenuPrimitive.Content,
+      {
+        asChild: true,
+        forceMount: true,
+        side,
+        align,
+        sideOffset,
+        alignOffset,
+        collisionPadding,
+        "aria-label": ariaLabelledBy ? void 0 : ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        ...resolvedContentProps,
+        children: /* @__PURE__ */ jsx19(
+          motion4.div,
+          {
+            className: cn(dropdownMenuContentVariants({ chrome }), className, contentClassName),
+            ref: (node) => {
+              contentRef.current = node;
+              setRef(contentPropRef, node);
+            },
+            initial: {
+              opacity: 0,
+              scale: 0.98,
+              x: "var(--menu-x)",
+              y: "var(--menu-y)"
+            },
+            animate: { opacity: 1, scale: 1, x: 0, y: 0 },
+            exit: {
+              opacity: 0,
+              scale: 0.98,
+              x: "var(--menu-x)",
+              y: "var(--menu-y)",
+              transition: { duration: motionDuration, ease: "easeIn" }
+            },
+            transition: { duration: motionDuration, ease: "easeOut" },
+            style: { ...style, ...contentStyle },
+            children
+          }
+        )
+      }
+    ) : null }) })
+  ] });
+}
+var DropdownMenuItem = React12.forwardRef(
+  ({ className, inset, destructive, ...props }, ref) => /* @__PURE__ */ jsx19(
+    DropdownMenuPrimitive.Item,
+    {
+      ref,
+      className: cn(dropdownMenuItemVariants({ inset, destructive }), className),
+      ...props
+    }
+  )
+);
+DropdownMenuItem.displayName = "DropdownMenuItem";
+var DropdownMenuSeparator = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx19(DropdownMenuPrimitive.Separator, { ref, className: cn("my-1 h-px bg-(--divider)", className), ...props }));
+DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
+
+// src/ui/components/Kbd.tsx
+import * as React13 from "react";
+import { jsx as jsx20 } from "react/jsx-runtime";
+var Kbd = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx20(
+  "span",
+  {
+    ref,
+    className: cn(
+      "inline-flex min-w-7 items-center justify-center gap-1",
+      "rounded-(--shape-radius-10) px-2 pt-1 pb-1.5",
+      "bg-(--surface-3) text-(--text-1)",
+      "border border-[color-mix(in_oklab,var(--border),transparent_45%)]",
+      "shadow-[inset_0_-2px_0_color-mix(in_oklab,var(--border),transparent_50%),0_3px_4px_color-mix(in_oklab,var(--border),transparent_80%)]",
+      "text-[0.75rem] font-(--font-mono) leading-none tracking-[0.04em]",
+      "transition-colors duration-(--motion-fast)",
+      className
+    ),
+    ...props
+  }
+));
+Kbd.displayName = "Kbd";
 export {
   AuthController,
   AuthControllerCtx,
@@ -2751,10 +3060,14 @@ export {
   DialogContent,
   DialogController,
   DialogHost,
+  DropdownMenu,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
   Field,
   HttpError,
   InfoDialog,
   Input,
+  Kbd,
   MockAuthHttpClient,
   MockHttpClient,
   NotificationHost,

package/package.json

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