@hilum/ui 3.4.0 → 3.5.1

package/src/components/dialog.tsx

@@ -1,110 +1,170 @@
 "use client";
 
-import * as React from "react";
-import { Dialog } from "radix-ui";
-import { X } from "lucide-react";
-import { cn } from "../lib/utils";
 import {
-  desktopDialogContentClassName,
-  dialogSheetMotionClassName,
-  mobileDialogSheetContentClassName,
-} from "../lib/mobile-popper-sheet";
-
-const DialogRoot = Dialog.Root;
-const DialogTrigger = Dialog.Trigger;
-const DialogClose = Dialog.Close;
-
-const DialogOverlay = React.forwardRef<
-  React.ComponentRef<typeof Dialog.Overlay>,
-  React.ComponentPropsWithoutRef<typeof Dialog.Overlay>
->(({ className, ...props }, ref) => (
-  <Dialog.Overlay
-    ref={ref}
-    className={cn(
-      "fixed inset-0 z-50 bg-black/30 backdrop-blur-sm",
-      "data-[state=open]:animate-in data-[state=closed]:animate-out",
-      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className,
-    )}
-    {...props}
-  />
-));
-DialogOverlay.displayName = "DialogOverlay";
-
-const DialogContent = React.forwardRef<
-  React.ComponentRef<typeof Dialog.Content>,
-  React.ComponentPropsWithoutRef<typeof Dialog.Content>
->(({ className, children, ...props }, ref) => (
-  <Dialog.Portal>
-    <DialogOverlay />
-    <Dialog.Content
-      ref={ref}
-      className={cn(
-        mobileDialogSheetContentClassName,
-        desktopDialogContentClassName,
-        "sm:max-w-lg",
-        dialogSheetMotionClassName,
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      <Dialog.Close className="absolute right-3 top-3 flex size-9 items-center justify-center rounded-md text-muted-foreground opacity-70 transition-[opacity,scale] hover:opacity-100 active:scale-[0.96] focus:outline-none focus:ring-2 focus:ring-ground-900/20">
-        <X size={16} />
-        <span className="sr-only">Close</span>
-      </Dialog.Close>
-    </Dialog.Content>
-  </Dialog.Portal>
-));
+  createContext,
+  forwardRef,
+  useContext,
+  useEffect,
+  useState,
+  type ComponentPropsWithoutRef,
+  type HTMLAttributes,
+} from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { motion } from "framer-motion";
+import { cn } from "../lib/utils";
+import { useIcon } from "../lib/icon-context";
+import { spring } from "../lib/springs";
+import { useShape } from "../lib/shape-context";
+import { SurfaceProvider, useSurface } from "../lib/surface-context";
+import { surfaceClasses } from "../lib/surface-classes";
+import { Button } from "./button";
+
+const DIALOG_OFFSET = 4;
+
+const DialogOpenContext = createContext(false);
+
+function Dialog({
+  children,
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  ...props
+}: DialogPrimitive.DialogProps) {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+  const open = controlledOpen ?? uncontrolledOpen;
+  const handleOpenChange = onOpenChange ?? setUncontrolledOpen;
+
+  return (
+    <DialogOpenContext.Provider value={open}>
+      <DialogPrimitive.Root open={open} onOpenChange={handleOpenChange} {...props}>
+        {children}
+      </DialogPrimitive.Root>
+    </DialogOpenContext.Provider>
+  );
+}
+
+const DialogTrigger = DialogPrimitive.Trigger;
+const DialogClose = DialogPrimitive.Close;
+
+interface DialogContentProps extends ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+  size?: "sm" | "lg";
+  /** Portal target. When set, the overlay and panel render inside this element
+   *  (positioned `absolute`) instead of covering the viewport (`fixed`). Pair
+   *  with a `position: relative; overflow: hidden` container — and usually
+   *  `<Dialog modal={false}>` — to scope a dialog to a bounded region, e.g. a
+   *  docs preview. Defaults to the document body / full-viewport behaviour. */
+  container?: HTMLElement | null;
+}
+
+const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(
+  ({ className, children, size = "sm", container, ...props }, ref) => {
+    const XIcon = useIcon("x");
+    const open = useContext(DialogOpenContext);
+    const shape = useShape();
+    const substrate = useSurface();
+    const dialogLevel = Math.min(substrate + DIALOG_OFFSET, 8);
+    const [mounted, setMounted] = useState(false);
+
+    useEffect(() => {
+      if (open) setMounted(true);
+    }, [open]);
+
+    const handleExitComplete = () => {
+      if (!open) setMounted(false);
+    };
+
+    if (!mounted) return null;
+
+    return (
+      <DialogPrimitive.Portal forceMount container={container ?? undefined}>
+        <DialogPrimitive.Overlay asChild forceMount>
+          <motion.div
+            className={cn(
+              container ? "absolute" : "fixed",
+              "inset-0 z-50 bg-black/40 dark:bg-black/80",
+            )}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: open ? 1 : 0 }}
+            transition={open ? spring.slow : spring.slow.exit}
+          />
+        </DialogPrimitive.Overlay>
+        <DialogPrimitive.Content ref={ref} asChild forceMount {...props}>
+          <motion.div
+            className={cn(
+              container ? "absolute" : "fixed",
+              "left-1/2 top-1/2 z-50 w-[calc(100%-2rem)]",
+              surfaceClasses(dialogLevel),
+              "p-6 focus:outline-none",
+              "rounded-t-2xl max-sm:pb-[calc(1.5rem+env(safe-area-inset-bottom))] data-[state=open]:slide-in-from-bottom sm:data-[state=open]:zoom-in-95",
+              size === "sm" && "max-w-[400px]",
+              size === "lg" && "max-w-[540px]",
+              shape.container,
+              "rounded-t-2xl",
+              className,
+            )}
+            initial={{ opacity: 0, scale: 0.97, x: "-50%", y: "-50%" }}
+            animate={{
+              opacity: open ? 1 : 0,
+              scale: open ? 1 : 0.97,
+              x: "-50%",
+              y: "-50%",
+            }}
+            transition={open ? spring.slow : spring.slow.exit}
+            onAnimationComplete={handleExitComplete}
+          >
+            <SurfaceProvider value={dialogLevel}>
+              {children}
+              <DialogPrimitive.Close asChild>
+                <Button variant="ghost" size="icon-sm" className="absolute right-3 top-3">
+                  <XIcon />
+                  <span className="sr-only">Close</span>
+                </Button>
+              </DialogPrimitive.Close>
+            </SurfaceProvider>
+          </motion.div>
+        </DialogPrimitive.Content>
+      </DialogPrimitive.Portal>
+    );
+  },
+);
 DialogContent.displayName = "DialogContent";
 
-function DialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+function DialogHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
   return <div className={cn("flex flex-col gap-1.5 mb-4", className)} {...props} />;
 }
-DialogHeader.displayName = "DialogHeader";
 
-function DialogFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      className={cn(
-        "mt-6 flex flex-col-reverse gap-2 sm:flex-row sm:items-center sm:justify-end",
-        "[&>*]:w-full sm:[&>*]:w-auto",
-        className,
-      )}
-      {...props}
-    />
-  );
+function DialogFooter({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("flex justify-end gap-2 mt-6", className)} {...props} />;
 }
-DialogFooter.displayName = "DialogFooter";
 
-const DialogTitle = React.forwardRef<
-  React.ComponentRef<typeof Dialog.Title>,
-  React.ComponentPropsWithoutRef<typeof Dialog.Title>
+const DialogTitle = forwardRef<
+  HTMLHeadingElement,
+  ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
 >(({ className, ...props }, ref) => (
-  <Dialog.Title
+  <DialogPrimitive.Title
     ref={ref}
-    className={cn("body-lg font-semibold text-balance text-foreground", className)}
+    className={cn("text-[16px] text-foreground leading-tight", className)}
+    style={{ fontVariationSettings: "'wght' 700" }}
     {...props}
   />
 ));
 DialogTitle.displayName = "DialogTitle";
 
-const DialogDescription = React.forwardRef<
-  React.ComponentRef<typeof Dialog.Description>,
-  React.ComponentPropsWithoutRef<typeof Dialog.Description>
+const DialogDescription = forwardRef<
+  HTMLParagraphElement,
+  ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
 >(({ className, ...props }, ref) => (
-  <Dialog.Description
+  <DialogPrimitive.Description
     ref={ref}
-    className={cn("body text-pretty text-muted-foreground", className)}
+    className={cn("text-[13px] text-muted-foreground", className)}
     {...props}
   />
 ));
 DialogDescription.displayName = "DialogDescription";
 
 export {
-  DialogRoot as Dialog,
+  Dialog,
   DialogTrigger,
-  DialogOverlay,
   DialogContent,
   DialogHeader,
   DialogFooter,

package/src/components/dropdown-menu.tsx

@@ -4,6 +4,12 @@ import * as React from "react";
 import { DropdownMenu } from "radix-ui";
 import { Check, ChevronRight, Circle } from "lucide-react";
 import { cn } from "../lib/utils";
+import {
+  menuItemActiveClasses,
+  menuItemClasses,
+  motionClasses,
+  pressClasses,
+} from "../lib/interaction";
 import {
   mobilePopperSheetMotionClassName,
   mobilePopperSheetPositionClassName,
@@ -30,7 +36,7 @@ const DropdownMenuContent = React.forwardRef<
         data-hilum-mobile-sheet="true"
         sideOffset={sideOffset}
         className={cn(
-          "z-50 min-w-[8rem] bg-card rounded-xl shadow-natural p-1",
+          "z-50 min-w-[8rem] rounded-xl border border-border bg-card p-1 shadow-elevated",
           mobilePopperSheetPositionClassName,
           mobilePopperSheetSurfaceClassName,
           "max-sm:overflow-y-auto max-sm:px-2 max-sm:pb-2 max-sm:pt-5",
@@ -59,11 +65,13 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenu.Item
     ref={ref}
     className={cn(
-      "relative flex min-h-10 cursor-default select-none items-center gap-2 rounded-md px-2.5 py-2",
-      "body outline-none transition-colors",
+      menuItemClasses,
+      motionClasses,
+      pressClasses,
       destructive
         ? "text-destructive focus:bg-destructive/10 focus:text-destructive"
         : "text-muted-foreground focus:bg-muted focus:text-foreground",
+      !destructive && menuItemActiveClasses,
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
       className,
@@ -80,9 +88,9 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenu.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex min-h-10 cursor-default select-none items-center gap-2 rounded-md py-2 pl-8 pr-2.5",
-      "body text-muted-foreground outline-none transition-colors",
-      "focus:bg-muted focus:text-foreground",
+      menuItemClasses,
+      menuItemActiveClasses,
+      "py-2 pl-8 pr-2.5 text-muted-foreground",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
@@ -105,9 +113,9 @@ const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenu.RadioItem
     ref={ref}
     className={cn(
-      "relative flex min-h-10 cursor-default select-none items-center gap-2 rounded-md py-2 pl-8 pr-2.5",
-      "body text-muted-foreground outline-none transition-colors",
-      "focus:bg-muted focus:text-foreground",
+      menuItemClasses,
+      menuItemActiveClasses,
+      "py-2 pl-8 pr-2.5 text-muted-foreground",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
@@ -158,9 +166,9 @@ const DropdownMenuSubTrigger = React.forwardRef<
   <DropdownMenu.SubTrigger
     ref={ref}
     className={cn(
-      "relative flex min-h-10 cursor-default select-none items-center gap-2 rounded-md px-2.5 py-2",
-      "body text-muted-foreground outline-none transition-colors",
-      "focus:bg-muted focus:text-foreground data-[state=open]:bg-muted",
+      menuItemClasses,
+      menuItemActiveClasses,
+      "text-muted-foreground data-[state=open]:bg-muted",
       inset && "pl-8",
       className,
     )}
@@ -182,7 +190,7 @@ const DropdownMenuSubContent = React.forwardRef<
       ref={ref}
       data-hilum-mobile-sheet="true"
       className={cn(
-        "z-50 min-w-[8rem] bg-card rounded-xl border border-border shadow-natural p-1",
+        "z-50 min-w-[8rem] rounded-xl border border-border bg-card p-1 shadow-elevated",
         mobilePopperSheetPositionClassName,
         mobilePopperSheetSurfaceClassName,
         "max-sm:overflow-y-auto max-sm:px-2 max-sm:pb-2 max-sm:pt-5",

package/src/components/dropdown.tsx

@@ -0,0 +1,245 @@
+"use client";
+
+import {
+  useRef,
+  useState,
+  useEffect,
+  createContext,
+  useContext,
+  forwardRef,
+  type ReactNode,
+  type HTMLAttributes,
+} from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { cn } from "../lib/utils";
+import { spring } from "../lib/springs";
+import { useProximityHover } from "../hooks/use-proximity-hover";
+import { shapeMap } from "../lib/shape-context";
+import { Elevated } from "../lib/elevated";
+
+// Dropdown opts out of the global pill/rounded shape context — popover surfaces
+// look cleaner with the smaller "rounded" radii regardless of how the rest of
+// the UI is shaped (the heavy pill bubbling distorts perceived padding at this
+// scale and produces the corner-shadow asymmetry).
+const shape = shapeMap.rounded;
+
+interface DropdownContextValue {
+  registerItem: (index: number, element: HTMLElement | null) => void;
+  activeIndex: number | null;
+  checkedIndex?: number;
+}
+
+const DropdownContext = createContext<DropdownContextValue | null>(null);
+
+export function useDropdown() {
+  const ctx = useContext(DropdownContext);
+  return ctx ?? { registerItem: () => undefined, activeIndex: null };
+}
+
+interface DropdownProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+  checkedIndex?: number;
+}
+
+const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
+  ({ children, checkedIndex, className, ...props }, ref) => {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const {
+      activeIndex,
+      setActiveIndex,
+      itemRects,
+      sessionRef,
+      handlers,
+      registerItem,
+      measureItems,
+    } = useProximityHover(containerRef);
+
+    useEffect(() => {
+      measureItems();
+    }, [measureItems, children]);
+
+    const [focusedIndex, setFocusedIndex] = useState<number | null>(null);
+
+    const activeRect = activeIndex !== null ? itemRects[activeIndex] : null;
+    const checkedRect = checkedIndex != null ? itemRects[checkedIndex] : null;
+    const focusRect = focusedIndex !== null ? itemRects[focusedIndex] : null;
+    const isHoveringOther = activeIndex !== null && activeIndex !== checkedIndex;
+
+    return (
+      <DropdownContext.Provider
+        value={
+          checkedIndex === undefined
+            ? { registerItem, activeIndex }
+            : { registerItem, activeIndex, checkedIndex }
+        }
+      >
+        <Elevated
+          offset={2}
+          shadowLevel={3}
+          ref={(node) => {
+            (containerRef as React.MutableRefObject<HTMLDivElement | null>).current = node;
+            if (typeof ref === "function") ref(node);
+            else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;
+          }}
+          onMouseEnter={handlers.onMouseEnter}
+          onMouseMove={handlers.onMouseMove}
+          onMouseLeave={handlers.onMouseLeave}
+          onFocus={(e) => {
+            const indexAttr = (e.target as HTMLElement)
+              .closest("[data-proximity-index]")
+              ?.getAttribute("data-proximity-index");
+            if (indexAttr != null) {
+              const idx = Number(indexAttr);
+              setActiveIndex(idx);
+              setFocusedIndex((e.target as HTMLElement).matches(":focus-visible") ? idx : null);
+            }
+          }}
+          onBlur={(e) => {
+            if (containerRef.current?.contains(e.relatedTarget as Node)) return;
+            setFocusedIndex(null);
+            setActiveIndex(null);
+          }}
+          onKeyDown={(e) => {
+            const items = Array.from(
+              containerRef.current?.querySelectorAll('[role="menuitemradio"]') ?? [],
+            ) as HTMLElement[];
+            const currentIdx = items.indexOf(e.target as HTMLElement);
+            if (currentIdx === -1) return;
+
+            if (["ArrowDown", "ArrowUp", "ArrowRight", "ArrowLeft"].includes(e.key)) {
+              e.preventDefault();
+              const next = ["ArrowDown", "ArrowRight"].includes(e.key)
+                ? (currentIdx + 1) % items.length
+                : (currentIdx - 1 + items.length) % items.length;
+              items[next].focus();
+            } else if (e.key === "Home") {
+              e.preventDefault();
+              items[0]?.focus();
+            } else if (e.key === "End") {
+              e.preventDefault();
+              items[items.length - 1]?.focus();
+            }
+          }}
+          role="menu"
+          className={cn(
+            `relative flex flex-col gap-0.5 w-72 max-w-full ${shape.container} p-1 select-none`,
+            className,
+          )}
+          {...props}
+        >
+          {/* Selected background */}
+          <AnimatePresence>
+            {checkedRect && (
+              <motion.div
+                className={`absolute ${shape.bg} bg-active pointer-events-none`}
+                initial={false}
+                animate={{
+                  top: checkedRect.top,
+                  left: checkedRect.left,
+                  width: checkedRect.width,
+                  height: checkedRect.height,
+                  opacity: isHoveringOther ? 0.8 : 1,
+                }}
+                exit={{ opacity: 0, transition: spring.moderate.exit }}
+                transition={{
+                  ...spring.moderate,
+                  opacity: { duration: 0.08 },
+                }}
+              />
+            )}
+          </AnimatePresence>
+
+          {/* Hover background */}
+          <AnimatePresence>
+            {activeRect && (
+              <motion.div
+                key={sessionRef.current}
+                className={`absolute ${shape.bg} bg-hover pointer-events-none`}
+                initial={{
+                  opacity: 0,
+                  top: checkedRect?.top ?? activeRect.top,
+                  left: checkedRect?.left ?? activeRect.left,
+                  width: checkedRect?.width ?? activeRect.width,
+                  height: checkedRect?.height ?? activeRect.height,
+                }}
+                animate={{
+                  opacity: 1,
+                  top: activeRect.top,
+                  left: activeRect.left,
+                  width: activeRect.width,
+                  height: activeRect.height,
+                }}
+                exit={{ opacity: 0, transition: spring.fast.exit }}
+                transition={{
+                  ...spring.fast,
+                  opacity: { duration: 0.08 },
+                }}
+              />
+            )}
+          </AnimatePresence>
+
+          {/* Focus ring */}
+          <AnimatePresence>
+            {focusRect && (
+              <motion.div
+                className={`absolute ${shape.focusRing} pointer-events-none z-20 border border-[#6B97FF]`}
+                initial={false}
+                animate={{
+                  left: focusRect.left - 2,
+                  top: focusRect.top - 2,
+                  width: focusRect.width + 4,
+                  height: focusRect.height + 4,
+                }}
+                exit={{ opacity: 0, transition: spring.fast.exit }}
+                transition={{
+                  ...spring.fast,
+                  opacity: { duration: 0.08 },
+                }}
+              />
+            )}
+          </AnimatePresence>
+
+          {children}
+        </Elevated>
+      </DropdownContext.Provider>
+    );
+  },
+);
+
+Dropdown.displayName = "Dropdown";
+
+// ---------------------------------------------------------------------------
+// DropdownLabel
+// ---------------------------------------------------------------------------
+
+const DropdownLabel = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn("px-2 py-1.5 text-[11px] text-muted-foreground", className)}
+      {...props}
+    />
+  ),
+);
+
+DropdownLabel.displayName = "DropdownLabel";
+
+// ---------------------------------------------------------------------------
+// DropdownSeparator
+// ---------------------------------------------------------------------------
+
+const DropdownSeparator = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      role="separator"
+      className={cn("my-1 -mx-1 h-px bg-border/60", className)}
+      {...props}
+    />
+  ),
+);
+
+DropdownSeparator.displayName = "DropdownSeparator";
+
+export { Dropdown, DropdownLabel, DropdownSeparator };
+export default Dropdown;