@jinaan/uikit 0.1.9 → 0.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jinaan/uikit",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "description": "Reusable React and Tailwind UI components for Jinaan projects.",
   "license": "UNLICENSED",
   "type": "module",

package/src/choice-dialog.tsx

@@ -4,6 +4,7 @@ import { Button } from "./button";
 import {
   Dialog,
   DialogBody,
+  DialogCancel,
   DialogContent,
   DialogFooter,
   DialogHeader,
@@ -93,13 +94,7 @@ export function ChoiceDialog({
           </DialogBody>
         </DialogPanel>
         <DialogFooter className="gap-3 pt-2.5">
-          <Button
-            variant="secondary"
-            className="flex-1"
-            onClick={() => onOpenChange?.(false)}
-          >
-            {cancelLabel}
-          </Button>
+          <DialogCancel className="flex-1">{cancelLabel}</DialogCancel>
           <Button className="flex-1" onClick={() => onConfirm?.(selected)}>
             {confirmLabel}
           </Button>

package/src/dialog.tsx

@@ -13,6 +13,7 @@ import {
   type HTMLAttributes,
 } from "react";
 
+import { Button, type ButtonProps } from "./button";
 import { computeDialogFlight, type DialogOriginRect } from "./dialog-motion";
 import { cn } from "./utils";
 
@@ -81,6 +82,7 @@ function resolveOrigin(content: HTMLElement): DialogOriginRect | null {
 
 const DIALOG_CLOSE_MS = 250;
 const DialogClosingContext = createContext(false);
+const DialogRequestCloseContext = createContext<() => void>(() => {});
 
 /** Dialog root; owns the delayed close so the fly-out can finish. */
 export function Dialog({
@@ -94,6 +96,7 @@ export function Dialog({
     defaultOpen ?? false,
   );
   const [closing, setClosing] = useState(false);
+  const closingRef = useRef(false);
   const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
   const open = controlledOpen ?? uncontrolledOpen;
   const openRef = useRef(open);
@@ -116,12 +119,13 @@ export function Dialog({
   const handleOpenChange = (next: boolean) => {
     if (next) {
       if (closeTimer.current) clearTimeout(closeTimer.current);
+      closingRef.current = false;
       setClosing(false);
       if (!controlled) setUncontrolledOpen(true);
       onOpenChange?.(true);
       return;
     }
-    if (!open || closing) return;
+    if (!open || closingRef.current) return;
 
     const reduced =
       typeof window !== "undefined" &&
@@ -133,27 +137,33 @@ export function Dialog({
       return;
     }
 
+    closingRef.current = true;
     setClosing(true);
     closeTimer.current = setTimeout(() => {
       if (!controlled) setUncontrolledOpen(false);
       onOpenChange?.(false);
       requestAnimationFrame(() => {
         // Restore the overlay only when a controlled parent vetoed the close.
-        if (openRef.current) setClosing(false);
+        if (openRef.current) {
+          closingRef.current = false;
+          setClosing(false);
+        }
       });
     }, DIALOG_CLOSE_MS);
   };
 
   return (
-    <DialogClosingContext.Provider value={closing}>
-      <DialogPrimitive.Root
-        open={open}
-        onOpenChange={handleOpenChange}
-        {...props}
-      >
-        {children}
-      </DialogPrimitive.Root>
-    </DialogClosingContext.Provider>
+    <DialogRequestCloseContext.Provider value={() => handleOpenChange(false)}>
+      <DialogClosingContext.Provider value={closing}>
+        <DialogPrimitive.Root
+          open={open}
+          onOpenChange={handleOpenChange}
+          {...props}
+        >
+          {children}
+        </DialogPrimitive.Root>
+      </DialogClosingContext.Provider>
+    </DialogRequestCloseContext.Provider>
   );
 }
 
@@ -174,6 +184,18 @@ DialogTrigger.displayName = "DialogTrigger";
 
 export const DialogClose = DialogPrimitive.Close;
 
+/** Secondary action that closes through the animated dialog close path. */
+export const DialogCancel = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ variant = "secondary", children = "Cancel", ...props }, ref) => (
+    <DialogPrimitive.Close asChild>
+      <Button ref={ref} type="button" variant={variant} {...props}>
+        {children}
+      </Button>
+    </DialogPrimitive.Close>
+  ),
+);
+DialogCancel.displayName = "DialogCancel";
+
 function startDialogMotion(content: HTMLDivElement, retry = true) {
   if (content.dataset.dialogMotionStarted === "true") return;
   if (
@@ -229,8 +251,9 @@ function startDialogMotion(content: HTMLDivElement, retry = true) {
 export const DialogContent = forwardRef<
   ElementRef<typeof DialogPrimitive.Content>,
   ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => {
+>(({ className, children, onEscapeKeyDown, onPointerDownOutside, ...props }, ref) => {
   const closing = useContext(DialogClosingContext);
+  const requestClose = useContext(DialogRequestCloseContext);
   const contentRef = useRef<HTMLDivElement>(null);
   const setRef = useCallback(
     (node: HTMLDivElement | null) => {
@@ -251,7 +274,7 @@ export const DialogContent = forwardRef<
     <DialogPrimitive.Portal>
       <DialogPrimitive.Overlay
         className={cn(
-          "fixed inset-0 z-50 overflow-hidden bg-overlay data-[state=open]:animate-in data-[state=open]:fade-in-0",
+          "fixed inset-0 z-50 overflow-hidden bg-overlay backdrop-blur-[3px] data-[state=open]:animate-in data-[state=open]:fade-in-0",
           !closing &&
             "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
           closing && "opacity-0 transition-opacity duration-200",
@@ -272,6 +295,18 @@ export const DialogContent = forwardRef<
             "focus:outline-none",
             className,
           )}
+          onEscapeKeyDown={(event) => {
+            onEscapeKeyDown?.(event);
+            if (event.defaultPrevented) return;
+            event.preventDefault();
+            requestClose();
+          }}
+          onPointerDownOutside={(event) => {
+            onPointerDownOutside?.(event);
+            if (event.defaultPrevented) return;
+            event.preventDefault();
+            requestClose();
+          }}
           {...props}
         >
           {children}