aplance-ui 1.0.1

package/registry/components/primitives/modal/modal.tsx

@@ -0,0 +1,550 @@
+import {
+  Children,
+  useState,
+  useEffect,
+  useLayoutEffect,
+  useCallback,
+  useRef,
+  useId,
+  isValidElement,
+  type ReactNode,
+  type FC,
+  type ComponentProps,
+  type CSSProperties,
+} from "react";
+import { createPortal } from "react-dom";
+import clsx from "clsx";
+import { IconX } from "@tabler/icons-react";
+import {
+  Button,
+  type ButtonVariant,
+  type ButtonSize,
+  type ButtonLayout,
+} from "../../ui/button/button";
+import { useFocusOutside } from "../../../hooks/useFocusOutside";
+import { ModalContext, useModal } from "./modal-context";
+import s from "./modal.module.css";
+import { Icon } from "../icon/icon";
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export type ModalSize = "sm" | "md" | "lg" | "xl" | "full";
+export type ModalPlacement =
+  | "center"
+  | "top"
+  | "bottom"
+  | "left"
+  | "right"
+  | "full";
+export type ModalAnimation =
+  | "scale"
+  | "fade"
+  | "slide-top"
+  | "slide-bottom"
+  | "slide-left"
+  | "slide-right"
+  | "none";
+export type ModalScrollBehavior = "inside" | "outside";
+
+// Default animation for a given placement - center uses scale, edges slide
+// in from their own side, full fades. Overridden by an explicit `animation`.
+const defaultAnimationFor = (placement: ModalPlacement): ModalAnimation => {
+  switch (placement) {
+    case "top":
+      return "slide-top";
+    case "bottom":
+      return "slide-bottom";
+    case "left":
+      return "slide-left";
+    case "right":
+      return "slide-right";
+    case "full":
+      return "fade";
+    case "center":
+    default:
+      return "scale";
+  }
+};
+
+// Module-level scroll-lock counter - safe for nested/stacked modals.
+// A module-scoped counter prevents the common bug where closing the first
+// of two overlapping modals restores overflow while the second is still open.
+let _scrollLockCount = 0;
+let _prevBodyOverflow = "";
+const acquireScrollLock = () => {
+  if (_scrollLockCount === 0) {
+    _prevBodyOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+  }
+  _scrollLockCount++;
+};
+const releaseScrollLock = () => {
+  if (_scrollLockCount === 0) return;
+  _scrollLockCount--;
+  if (_scrollLockCount === 0) {
+    document.body.style.overflow = _prevBodyOverflow;
+  }
+};
+
+// ─── Shared button passthrough ────────────────────────────────────────────────
+
+type ButtonPassthroughProps = {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  layout?: ButtonLayout;
+  disabled?: boolean;
+  className?: string;
+  style?: CSSProperties;
+  children?: ReactNode;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+};
+
+// ─── Modal ────────────────────────────────────────────────────────────────────
+
+type ModalProps = {
+  /**
+   * Dialog content plus an optional <ModalTrigger>. ModalTrigger is hoisted
+   * out of the dialog panel so it stays visible while the modal is closed.
+   * Everything else renders inside the dialog.
+   */
+  children: ReactNode;
+  /** Controlled open state */
+  isOpen?: boolean;
+  /** Controlled change handler */
+  onOpenChange?: (open: boolean) => void;
+  /** Uncontrolled default */
+  defaultOpen?: boolean;
+  size?: ModalSize;
+  /**
+   * Where the dialog sits inside the viewport.
+   * - `center` (default): centered modal
+   * - `top` / `bottom`: sheet pinned to an edge
+   * - `left` / `right`: side drawer
+   * - `full`: fills the viewport
+   */
+  placement?: ModalPlacement;
+  /**
+   * Placement override below the `--md` breakpoint (≤ 900px).
+   * Defaults to `bottom` so modals become bottom sheets on phones.
+   * Pass the same value as `placement` (or any placement) to opt out.
+   */
+  mobilePlacement?: ModalPlacement;
+  /**
+   * Entrance/exit animation. Defaults based on `placement`:
+   * center→scale, top/bottom/left/right→slide from that edge, full→fade.
+   */
+  animation?: ModalAnimation;
+  scrollBehavior?: ModalScrollBehavior;
+  /** Backdrop blur (default: true) */
+  blur?: boolean;
+  /** Close on backdrop click (default: true) */
+  closeOnOverlayClick?: boolean;
+  /** Close on Escape key (default: true) */
+  closeOnEsc?: boolean;
+  /** Show built-in X close button (default: true) */
+  showCloseButton?: boolean;
+  /** Render dialog in a portal appended to document.body (default: true) */
+  renderOnPortal?: boolean;
+  /** Animation duration ms (default: 200) */
+  animationDuration?: number;
+  /** Called after close animation completes */
+  onClose?: () => void;
+  /** Called when opened */
+  onOpen?: () => void;
+  /** Extra className forwarded to the dialog panel */
+  className?: string;
+  style?: CSSProperties;
+};
+
+export const Modal: FC<ModalProps> = ({
+  children,
+  isOpen: controlledIsOpen,
+  onOpenChange,
+  defaultOpen = false,
+  size = "md",
+  placement = "center",
+  mobilePlacement = "bottom",
+  animation,
+  scrollBehavior = "inside",
+  blur = true,
+  closeOnOverlayClick = true,
+  closeOnEsc = true,
+  showCloseButton = true,
+  renderOnPortal = true,
+  animationDuration = 200,
+  onClose,
+  onOpen,
+  className,
+  style,
+}) => {
+  const isControlled = controlledIsOpen !== undefined;
+  const [internalIsOpen, setInternalIsOpen] = useState(defaultOpen);
+  const isOpen = isControlled ? controlledIsOpen! : internalIsOpen;
+
+  // shouldRender: mounts/unmounts DOM node - kept alive during close animation
+  const [shouldRender, setShouldRender] = useState(isOpen);
+  // isVisible: drives CSS transition - false = closed/initial, true = open
+  // Always starts false so the element is in the DOM before the transition fires
+  const [isVisible, setIsVisible] = useState(false);
+
+  const contentRef = useRef<HTMLDivElement>(null);
+  const modalId = useId();
+
+  // Split children: <ModalTrigger> siblings render outside the dialog so they
+  // stay visible while closed; everything else is dialog content. Order is
+  // preserved within each bucket, which is all consumers care about.
+  const nestedTriggers: ReactNode[] = [];
+  const dialogChildren: ReactNode[] = [];
+  Children.forEach(children, (child) => {
+    if (isValidElement(child) && child.type === ModalTrigger) {
+      nestedTriggers.push(child);
+    } else {
+      dialogChildren.push(child);
+    }
+  });
+
+  // Freeze dialog content during close animation so conditional content
+  // (e.g. {editAgent && <form>}) doesn't collapse before the animation ends.
+  const childrenSnapshot = useRef<ReactNode>(dialogChildren);
+  if (isOpen) childrenSnapshot.current = dialogChildren;
+
+  // Stash callbacks in refs so identity changes on the parent don't retrigger
+  // the open/close effect (which would leak timers and re-fire onOpen).
+  const onCloseRef = useRef(onClose);
+  const onOpenRef = useRef(onOpen);
+  useEffect(() => {
+    onCloseRef.current = onClose;
+    onOpenRef.current = onOpen;
+  }, [onClose, onOpen]);
+
+  const setIsOpen = useCallback(
+    (next: boolean) => {
+      if (!isControlled) setInternalIsOpen(next);
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange],
+  );
+
+  const open = useCallback(() => setIsOpen(true), [setIsOpen]);
+  const close = useCallback(() => setIsOpen(false), [setIsOpen]);
+  const toggle = useCallback(() => setIsOpen(!isOpen), [isOpen, setIsOpen]);
+
+  // Open:  setShouldRender(true) → node mounts → useLayoutEffect below fires → isVisible=true → open transition
+  // Close: setIsVisible(false) immediately → close transition plays → setTimeout unmounts after duration
+  useEffect(() => {
+    if (isOpen) {
+      setShouldRender(true);
+    } else {
+      setIsVisible(false);
+      const t = setTimeout(() => {
+        setShouldRender(false);
+        onCloseRef.current?.();
+      }, animationDuration);
+      return () => clearTimeout(t);
+    }
+  }, [isOpen, animationDuration]);
+
+  // Fires synchronously after the node is painted for the first time.
+  // Force-reads offsetHeight to flush the browser's style recalc so it
+  // registers the closed CSS state before we flip to open - same trick
+  // Popover uses with isMeasured + ResizeObserver.
+  useLayoutEffect(() => {
+    if (shouldRender && contentRef.current) {
+      void contentRef.current.offsetHeight; // flush reflow
+      setIsVisible(isOpen);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [shouldRender]); // only run when node mounts, not on every isOpen change
+
+  useEffect(() => {
+    if (isOpen) onOpenRef.current?.();
+  }, [isOpen]);
+
+  // Body scroll lock - reference-counted across stacked modals
+  useEffect(() => {
+    if (!isOpen) return;
+    acquireScrollLock();
+    return releaseScrollLock;
+  }, [isOpen]);
+
+  // ESC key
+  useEffect(() => {
+    if (!closeOnEsc || !isOpen) return;
+    const handler = (e: globalThis.KeyboardEvent) => {
+      if (e.key === "Escape") close();
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [isOpen, closeOnEsc, close]);
+
+  // Focus trap
+  useLayoutEffect(() => {
+    if (!isOpen || !contentRef.current) return;
+    const el = contentRef.current;
+    const focusable = el.querySelectorAll<HTMLElement>(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
+    );
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    (first ?? el).focus();
+
+    const trap = (e: globalThis.KeyboardEvent) => {
+      if (e.key !== "Tab") return;
+      if (focusable.length === 0) {
+        e.preventDefault();
+        return;
+      }
+      if (e.shiftKey) {
+        if (document.activeElement === first) {
+          e.preventDefault();
+          last.focus();
+        }
+      } else {
+        if (document.activeElement === last) {
+          e.preventDefault();
+          first.focus();
+        }
+      }
+    };
+    el.addEventListener("keydown", trap);
+    return () => el.removeEventListener("keydown", trap);
+  }, [isOpen]);
+
+  // Close when a click lands outside the dialog panel - mirrors Popover's
+  // outside-click pattern so the component family stays consistent.
+  useFocusOutside([contentRef], close, {
+    enabled: closeOnOverlayClick && isOpen,
+  });
+
+  // ── Dialog panel ──────────────────────────────────────────────────────────
+  const dialog = shouldRender ? (
+    <div
+      className={s.overlay}
+      data-state={isVisible ? "open" : "closed"}
+      data-placement={placement}
+      data-mobile-placement={mobilePlacement}
+      data-scroll-behavior={scrollBehavior}
+      style={
+        {
+          "--modal-animation-duration": `${animationDuration}ms`,
+          ...(!blur && {
+            backdropFilter: "none",
+            WebkitBackdropFilter: "none",
+          }),
+        } as CSSProperties
+      }
+    >
+      <div
+        ref={contentRef}
+        id={modalId}
+        role="dialog"
+        aria-modal="true"
+        tabIndex={-1}
+        className={clsx(
+          s.content,
+          s[`size_${size}`],
+          s[`anim_${animation ?? defaultAnimationFor(placement)}`],
+          scrollBehavior === "inside" && s.scroll_inside,
+          className,
+        )}
+        data-state={isVisible ? "open" : "closed"}
+        data-placement={placement}
+        data-mobile-placement={mobilePlacement}
+        style={style}
+      >
+        {/* children render ONLY here - never outside the dialog */}
+        {childrenSnapshot.current}
+      </div>
+    </div>
+  ) : null;
+
+  const portal =
+    renderOnPortal && dialog ? createPortal(dialog, document.body) : dialog;
+
+  // Hoisted triggers sit outside the portal so they stay visible while closed;
+  // dialog content lives inside the portal.
+  return (
+    <ModalContext.Provider
+      value={{ isOpen, open, close, toggle, showCloseButton }}
+    >
+      {nestedTriggers}
+      {portal}
+    </ModalContext.Provider>
+  );
+};
+
+// ─── ModalTrigger ─────────────────────────────────────────────────────────────
+// Nest inside <Modal> - Modal hoists it out of the dialog automatically so
+// the trigger stays visible while the modal is closed. For fully controlled
+// modals the trigger can live elsewhere; call open() from useModal() instead.
+
+type ModalTriggerProps = ButtonPassthroughProps & {
+  asChild?: boolean;
+};
+
+export const ModalTrigger: FC<ModalTriggerProps> = ({
+  asChild,
+  children,
+  onClick,
+  variant,
+  size,
+  layout,
+  disabled,
+  className,
+  style,
+}) => {
+  const { open } = useModal();
+
+  const handleClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {
+    open();
+    onClick?.(e);
+  };
+
+  if (asChild && isValidElement(children)) {
+    const child = children as React.ReactElement<Record<string, unknown>>;
+    return (
+      <child.type
+        {...child.props}
+        onClick={(e: React.MouseEvent<HTMLElement>) => {
+          open();
+          (
+            child.props.onClick as
+              | React.MouseEventHandler<HTMLElement>
+              | undefined
+          )?.(e);
+          (onClick as React.MouseEventHandler<HTMLElement> | undefined)?.(e);
+        }}
+      />
+    );
+  }
+
+  return (
+    <Button
+      as="button"
+      variant={variant}
+      size={size}
+      layout={layout}
+      disabled={disabled}
+      className={className}
+      style={style}
+      onClick={handleClick}
+    >
+      {children}
+    </Button>
+  );
+};
+
+// ─── ModalClose ───────────────────────────────────────────────────────────────
+// Explicit close button inside footer/body (e.g. "Cancel").
+// The automatic X button is controlled by showCloseButton prop on Modal.
+
+type ModalCloseProps = ButtonPassthroughProps & {
+  asChild?: boolean;
+};
+
+export const ModalClose: FC<ModalCloseProps> = ({
+  asChild,
+  children,
+  onClick,
+  variant = "secondary",
+  size,
+  layout,
+  disabled,
+  className,
+  style,
+}) => {
+  const { close } = useModal();
+
+  const handleClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {
+    close();
+    onClick?.(e);
+  };
+
+  if (asChild && isValidElement(children)) {
+    const child = children as React.ReactElement<Record<string, unknown>>;
+    return (
+      <child.type
+        {...child.props}
+        onClick={(e: React.MouseEvent<HTMLElement>) => {
+          close();
+          (
+            child.props.onClick as
+              | React.MouseEventHandler<HTMLElement>
+              | undefined
+          )?.(e);
+          (onClick as React.MouseEventHandler<HTMLElement> | undefined)?.(e);
+        }}
+      />
+    );
+  }
+
+  return (
+    <Button
+      as="button"
+      variant={variant}
+      size={size}
+      layout={layout}
+      disabled={disabled}
+      className={className}
+      style={style}
+      onClick={handleClick}
+    >
+      {children}
+    </Button>
+  );
+};
+
+// ─── Composition helpers ──────────────────────────────────────────────────────
+
+export const ModalHeader: FC<ComponentProps<"div">> = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { close, showCloseButton } = useModal();
+  return (
+    <div className={clsx(s.header, className)} {...props}>
+      <div className={s.header_content}>{children}</div>
+      {showCloseButton && (
+        <Button
+          as="button"
+          variant="ghost"
+          layout="box"
+          size="sm"
+          className={s.close_button}
+          onClick={close}
+          aria-label="Close modal"
+        >
+          <Icon clickable size="sm">
+            <IconX strokeWidth={2} />
+          </Icon>
+        </Button>
+      )}
+    </div>
+  );
+};
+
+export const ModalTitle: FC<ComponentProps<"h2">> = ({
+  className,
+  ...props
+}) => <h2 className={clsx(s.title, className)} {...props} />;
+
+export const ModalDescription: FC<ComponentProps<"p">> = ({
+  className,
+  ...props
+}) => <p className={clsx(s.description, className)} {...props} />;
+
+export const ModalBody: FC<ComponentProps<"div">> = ({
+  className,
+  ...props
+}) => <div className={clsx(s.body, className)} {...props} />;
+
+export const ModalFooter: FC<ComponentProps<"div">> = ({
+  className,
+  ...props
+}) => <div className={clsx(s.footer, className)} {...props} />;
+
+export const ModalDivider: FC<ComponentProps<"hr">> = ({
+  className,
+  ...props
+}) => <hr className={clsx(s.divider, className)} {...props} />;

package/registry/components/primitives/popover/popover-context.ts

@@ -0,0 +1,28 @@
+import { createContext, useContext, type RefObject } from "react";
+import type { Coords, Position, Trigger } from "./popover";
+
+export type PopoverContextType = {
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+  popoverRef: RefObject<HTMLDivElement | null>;
+  menuRef: RefObject<HTMLDivElement | null>;
+  coords: Coords;
+  isMeasured: boolean;
+  shouldRender: boolean;
+  animationDuration?: number;
+  triggerWidth: number;
+  trigger: Trigger;
+  position: Position;
+  hoverTimeoutRef: RefObject<ReturnType<typeof setTimeout> | null>;
+  renderOnPortal: boolean;
+};
+
+export const PopoverContext = createContext<PopoverContextType | undefined>(
+  undefined,
+);
+
+export const usePopover = () => {
+  const ctx = useContext(PopoverContext);
+  if (!ctx) throw new Error("usePopover must be used within Popover");
+  return ctx;
+};

package/registry/components/primitives/popover/popover.module.css

@@ -0,0 +1,28 @@
+
+.container {
+  /* its width can be managed from parent or user component container */
+  /* e.g. using with custom-select: .container can be anything and this will match it */
+  width: fit-content;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .trigger {
+    width: 100%;
+    min-width: fit-content;
+    display: flex;
+    align-items: center;
+    /* add other styles from props */
+
+    &[data-disabled="true"] {
+      pointer-events: none;
+    }
+  }
+
+  .menu_wrapper {
+    /* style as needed at usage */
+    min-width: fit-content;
+    /* max-width: 100% !important; can be updated with !important */
+  }
+}