@jinaan/uikit 0.1.30 → 0.1.32

package/package.json

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

package/src/dialog.tsx

@@ -9,6 +9,7 @@ import {
   useRef,
   useState,
   type ComponentPropsWithoutRef,
+  type CSSProperties,
   type ElementRef,
   type HTMLAttributes,
 } from "react";
@@ -256,77 +257,124 @@ function startDialogMotion(content: HTMLDivElement, retry = true) {
   content.addEventListener("animationend", onEnd);
 }
 
+export interface DialogContentProps
+  extends ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+  /** Vertical placement: centered (default) or anchored near the viewport top. */
+  placement?: "center" | "top";
+  /** Top edge offset for top placement. Defaults to 11dvh. */
+  topOffset?: string;
+  /**
+   * Entry/exit motion. `auto` flies from the caller when one is known, while
+   * `command` uses the compact spring used by command palettes.
+   */
+  motion?: "auto" | "command";
+}
+
+function dialogTopFallback(offset: string): string {
+  return offset.replace(/dvh\b/g, "vh");
+}
+
 export const DialogContent = forwardRef<
   ElementRef<typeof DialogPrimitive.Content>,
-  ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ 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) => {
-      contentRef.current = node;
-      if (node) startDialogMotion(node);
-      if (typeof ref === "function") {
-        ref(node);
-        return;
-      }
-      if (ref) {
-        (ref as { current: HTMLDivElement | null }).current = node;
-      }
+  DialogContentProps
+>(
+  (
+    {
+      className,
+      children,
+      placement = "center",
+      topOffset = "11dvh",
+      motion = "auto",
+      style,
+      onEscapeKeyDown,
+      onPointerDownOutside,
+      ...props
     },
-    [ref],
-  );
+    ref,
+  ) => {
+    const closing = useContext(DialogClosingContext);
+    const top = placement === "top";
+    const placementStyle: CSSProperties | undefined = top
+      ? ({
+          "--dialog-top-offset": topOffset,
+          "--dialog-top-offset-fallback": dialogTopFallback(topOffset),
+        } as CSSProperties)
+      : undefined;
+    const requestClose = useContext(DialogRequestCloseContext);
+    const contentRef = useRef<HTMLDivElement>(null);
+    const setRef = useCallback(
+      (node: HTMLDivElement | null) => {
+        contentRef.current = node;
+        if (node && motion === "auto") startDialogMotion(node);
+        if (typeof ref === "function") {
+          ref(node);
+          return;
+        }
+        if (ref) {
+          (ref as { current: HTMLDivElement | null }).current = node;
+        }
+      },
+      [motion, ref],
+    );
 
-  return (
-    <DialogPrimitive.Portal>
-      <DialogPrimitive.Overlay
-        className={cn(
-          "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",
-        )}
-      >
-        <span
-          aria-hidden="true"
-          className="dialog-noise pointer-events-none absolute inset-0"
-        />
-      </DialogPrimitive.Overlay>
-      <div className="pointer-events-none fixed inset-0 z-50 flex items-center justify-center overflow-y-auto p-4">
-        <DialogPrimitive.Content
-          ref={setRef}
+    return (
+      <DialogPrimitive.Portal>
+        <DialogPrimitive.Overlay
           className={cn(
-            "dialog-content pointer-events-auto relative flex max-h-[min(85vh,44rem)] w-full max-w-[22.4rem] flex-col gap-0 overflow-hidden will-change-[transform,opacity]",
-            "rounded-2xl border border-(--dialog-shell-border) bg-(--dialog-shell-bg) pb-3 shadow-(--dialog-shell-shadow) sm:pb-4",
-            closing && "dialog-closing",
-            "focus:outline-none",
-            className,
+            "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",
           )}
-          onEscapeKeyDown={(event) => {
-            onEscapeKeyDown?.(event);
-            if (event.defaultPrevented) return;
-            event.preventDefault();
-            requestClose();
-          }}
-          onPointerDownOutside={(event) => {
-            onPointerDownOutside?.(event);
-            if (event.defaultPrevented) return;
-            event.preventDefault();
-            requestClose();
-          }}
-          {...props}
         >
-          {children}
-          <DialogPrimitive.Close className="absolute right-3.5 top-3.5 z-10 rounded-sm text-subtle transition-colors hover:text-fg focus-visible:outline-none">
-            <X className="size-4" />
-            <span className="sr-only">Close</span>
-          </DialogPrimitive.Close>
-        </DialogPrimitive.Content>
-      </div>
-    </DialogPrimitive.Portal>
-  );
-});
+          <span
+            aria-hidden="true"
+            className="dialog-noise pointer-events-none absolute inset-0"
+          />
+        </DialogPrimitive.Overlay>
+        <div
+          className={cn(
+            "pointer-events-none fixed inset-0 z-50 flex justify-center overflow-y-auto p-4",
+            top ? "items-start" : "items-center",
+          )}
+        >
+          <DialogPrimitive.Content
+            ref={setRef}
+            style={placementStyle ? { ...placementStyle, ...style } : style}
+            className={cn(
+              "dialog-content pointer-events-auto relative flex max-h-[min(85vh,44rem)] w-full max-w-[22.4rem] flex-col gap-0 overflow-hidden will-change-[transform,opacity]",
+              "rounded-2xl border border-(--dialog-shell-border) bg-(--dialog-shell-bg) pb-3 shadow-(--dialog-shell-shadow) sm:pb-4",
+              top && "dialog-anchor-top",
+              motion === "command" && "dialog-command-motion",
+              closing && "dialog-closing",
+              "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}
+            <DialogPrimitive.Close className="absolute right-3.5 top-3.5 z-10 rounded-sm text-subtle transition-colors hover:text-fg focus-visible:outline-none">
+              <X className="size-4" />
+              <span className="sr-only">Close</span>
+            </DialogPrimitive.Close>
+          </DialogPrimitive.Content>
+        </div>
+      </DialogPrimitive.Portal>
+    );
+  },
+);
 DialogContent.displayName = "DialogContent";
 
 /**

package/styles.css

@@ -402,6 +402,24 @@
   }
 }
 
+/*
+ * Dialog top anchoring: the panel's top edge stays at the requested offset
+ * (11dvh by default) regardless of content height. Older browsers without dvh
+ * fall back to the equivalent vh value. Unlayered so it wins over the default
+ * utility max-height.
+ */
+.dialog-anchor-top {
+  margin-top: calc(var(--dialog-top-offset-fallback, 11vh) - 1rem);
+  max-height: calc(100vh - var(--dialog-top-offset-fallback, 11vh) - 1rem);
+}
+
+@supports (height: 100dvh) {
+  .dialog-anchor-top {
+    margin-top: calc(var(--dialog-top-offset, 11dvh) - 1rem);
+    max-height: calc(100dvh - var(--dialog-top-offset, 11dvh) - 1rem);
+  }
+}
+
 /* Dialog motion + texture: caller-origin flight, centered fallback, noise. */
 @keyframes dialog-fly-in {
   from {
@@ -462,6 +480,75 @@
   will-change: transform, opacity;
 }
 
+/*
+ * Command-palette motion: the panel springs from a smaller, slightly
+ * up-and-left pose. Kept separate from the caller-flight so command dialogs
+ * do not visibly travel from the trigger.
+ */
+@keyframes dialog-command-in {
+  from {
+    opacity: 1;
+    transform: translate(-27.4%, -6.3%) scale(0.85);
+  }
+  to {
+    opacity: 1;
+    transform: translate(0, 0) scale(1);
+  }
+}
+
+@keyframes dialog-command-out {
+  from {
+    opacity: 1;
+    transform: translate(0, 0) scale(1);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-26.6%, -11.1%) scale(0.85);
+  }
+}
+
+.dialog-command-motion {
+  transform-origin: center;
+  animation: dialog-command-in 500ms
+    linear(
+      0 0%,
+      0.1495 6.25%,
+      0.3955 12.5%,
+      0.6061 18.75%,
+      0.7562 25%,
+      0.8542 31.25%,
+      0.9148 37.5%,
+      0.9512 43.75%,
+      0.9724 50%,
+      0.9846 56.25%,
+      0.9914 62.5%,
+      0.9953 68.75%,
+      0.9974 75%,
+      0.9986 81.25%,
+      0.9992 87.5%,
+      1 93.75%,
+      1 100%
+    )
+    both;
+  backface-visibility: hidden;
+  will-change: transform;
+}
+
+.dialog-command-motion.dialog-closing {
+  animation: dialog-command-out 250ms
+    linear(
+      0 0%,
+      0.4615 14.2857%,
+      0.8176 28.5714%,
+      0.9471 42.8571%,
+      0.9858 57.1429%,
+      0.9964 71.4286%,
+      0.9991 85.7143%,
+      1 100%
+    )
+    both;
+}
+
 .dialog-noise {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
   background-size: 160px 160px;