aplance-ui 1.0.1

package/registry/components/primitives/popover/popover.tsx

@@ -0,0 +1,465 @@
+import {
+  useState,
+  useRef,
+  useEffect,
+  useLayoutEffect,
+  useCallback,
+  type ComponentProps,
+  type CSSProperties,
+  type ReactNode,
+  type FC,
+} from "react";
+import clsx from "clsx";
+import { createPortal } from "react-dom";
+import s from "./popover.module.css";
+import { PopoverContext, usePopover } from "./popover-context";
+import { useFocusOutside } from "../../../hooks/useFocusOutside";
+
+// Types
+export type Position = "top" | "bottom" | "left" | "right";
+export type Align = "start" | "center" | "end";
+export type Trigger = "click" | "hover";
+
+export type Coords = {
+  top: number;
+  left: number;
+};
+
+// Popover Component
+type PopoverProps = {
+  children?: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+  position?: Position;
+  align?: Align;
+  offset?: number;
+  animationDuration?: number;
+  isOpen?: boolean;
+  setIsOpen?: (open: boolean) => void;
+  closeOnClickOutside?: boolean;
+  closeOnPathChange?: boolean;
+  navigationKey?: string | number;
+  onClose?: () => void;
+  trigger?: Trigger;
+  // Useful when using in isolated environments like Iframe
+  renderOnPortal?: boolean;
+};
+
+export const Popover: FC<PopoverProps> = ({
+  children,
+  className,
+  style,
+  position = "bottom",
+  align = "center",
+  offset = 8,
+  animationDuration,
+  isOpen: controlledIsOpen,
+  setIsOpen: controlledSetIsOpen,
+  closeOnClickOutside = true,
+  closeOnPathChange = true,
+  navigationKey,
+  onClose,
+  trigger = "click",
+  renderOnPortal = true,
+}) => {
+  const readLocationKey = () =>
+    `${window.location.pathname}${window.location.search}${window.location.hash}`;
+
+  const isControlled =
+    controlledIsOpen !== undefined && controlledSetIsOpen !== undefined;
+  const [internalIsOpen, setInternalIsOpen] = useState(false);
+  const isOpen = isControlled ? controlledIsOpen! : internalIsOpen;
+  const setIsOpen = isControlled ? controlledSetIsOpen! : setInternalIsOpen;
+  const [locationKey, setLocationKey] = useState<string>(
+    typeof window === "undefined" ? "" : readLocationKey(),
+  );
+  const closeSignal = navigationKey ?? locationKey;
+  const closeSignalRef = useRef<string | number>(closeSignal);
+
+  const popoverRef = useRef<HTMLDivElement>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  // For hover trigger
+  const hoverTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const [coords, setCoords] = useState<Coords>({ top: 0, left: 0 });
+  const [shouldRender, setShouldRender] = useState(false);
+  const [isMeasured, setIsMeasured] = useState(false);
+  const [triggerWidth, setTriggerWidth] = useState(0);
+
+  // Calculate Menu Position
+  const calculatePosition = useCallback(() => {
+    if (!popoverRef.current || !menuRef.current) return;
+
+    const triggerRect = popoverRef.current.getBoundingClientRect();
+    const menuRect = menuRef.current.getBoundingClientRect();
+    const { innerWidth, innerHeight } = window;
+
+    let top = 0;
+    let left = 0;
+
+    // Main axis positioning (offset applies here)
+    switch (position) {
+      case "top":
+        top = triggerRect.top - menuRect.height - offset;
+
+        break;
+      case "bottom":
+        top = triggerRect.bottom + offset;
+        break;
+      case "left":
+        left = triggerRect.left - menuRect.width - offset;
+        break;
+      case "right":
+        left = triggerRect.right + offset;
+        break;
+    }
+
+    // Cross axis positioning (align applies here)
+    switch (position) {
+      case "top":
+      case "bottom":
+        if (align === "start") left = triggerRect.left;
+        else if (align === "end") left = triggerRect.right - menuRect.width;
+        else left = triggerRect.left + (triggerRect.width - menuRect.width) / 2;
+        break;
+      case "left":
+      case "right":
+        if (align === "start") top = triggerRect.top;
+        else if (align === "end") top = triggerRect.bottom - menuRect.height;
+        else
+          top = triggerRect.top + triggerRect.height / 2 - menuRect.height / 2;
+        break;
+    }
+
+    // Collision detection
+    const PADDING = 8;
+    top = Math.max(
+      PADDING,
+      Math.min(top, innerHeight - menuRect.height - PADDING),
+    );
+    left = Math.max(
+      PADDING,
+      Math.min(left, innerWidth - menuRect.width - PADDING),
+    );
+
+    setCoords({ top, left });
+    setTriggerWidth(triggerRect.width);
+    setIsMeasured(true);
+  }, [position, align, offset]);
+
+  // Open / Close Handling
+  // Visibility (opacity / pointer-events) is derived from `isOpen && isMeasured`
+  // in PopoverMenu, so we DON'T reset isMeasured here on close - that would lose
+  // the position cache and break re-opens that interrupt the exit animation.
+  // isMeasured is reset only when the menu actually unmounts (cleanup below).
+  useEffect(() => {
+    if (isOpen) {
+      setShouldRender(true);
+      return;
+    }
+    const timer = setTimeout(() => {
+      setShouldRender(false);
+      if (onClose) onClose();
+    }, animationDuration || 100);
+    return () => clearTimeout(timer);
+  }, [isOpen, animationDuration, onClose]);
+
+  // Measure after menu is rendered. Cleanup resets isMeasured so the next mount
+  // re-runs the entry animation from a known starting state.
+  useLayoutEffect(() => {
+    if (shouldRender && menuRef.current) {
+      calculatePosition();
+
+      const observer = new ResizeObserver(() => calculatePosition());
+      observer.observe(menuRef.current);
+      return () => {
+        observer.disconnect();
+        setIsMeasured(false);
+      };
+    }
+  }, [shouldRender, calculatePosition]);
+
+  // Clear any pending hover-close timer when the Popover unmounts so the
+  // delayed setIsOpen never fires on a stale instance.
+  useEffect(() => {
+    return () => {
+      if (hoverTimeoutRef.current) {
+        clearTimeout(hoverTimeoutRef.current);
+        hoverTimeoutRef.current = null;
+      }
+    };
+  }, []);
+
+  // Recalculate on scroll / resize
+  useEffect(() => {
+    if (!isOpen) return;
+    const handler = () => {
+      if (isMeasured) calculatePosition();
+    };
+    window.addEventListener("scroll", handler, true);
+    window.addEventListener("resize", handler);
+    return () => {
+      window.removeEventListener("scroll", handler, true);
+      window.removeEventListener("resize", handler);
+    };
+  }, [isOpen, isMeasured, calculatePosition]);
+
+  // Track browser navigation changes when no external navigation key is provided.
+  useEffect(() => {
+    if (navigationKey !== undefined || !closeOnPathChange || !isOpen) return;
+    if (typeof window === "undefined") return;
+
+    let previous = readLocationKey();
+
+    const updateIfChanged = () => {
+      const next = readLocationKey();
+      if (next !== previous) {
+        previous = next;
+        setLocationKey(next);
+      }
+    };
+
+    window.addEventListener("popstate", updateIfChanged);
+    window.addEventListener("hashchange", updateIfChanged);
+    const interval = window.setInterval(updateIfChanged, 120);
+
+    return () => {
+      window.removeEventListener("popstate", updateIfChanged);
+      window.removeEventListener("hashchange", updateIfChanged);
+      window.clearInterval(interval);
+    };
+  }, [navigationKey, closeOnPathChange, isOpen]);
+
+  // Close on navigation signal change (external key or browser location).
+  useEffect(() => {
+    if (!closeOnPathChange) return;
+
+    if (closeSignalRef.current !== closeSignal) {
+      closeSignalRef.current = closeSignal;
+      setIsOpen(false);
+      return;
+    }
+
+    closeSignalRef.current = closeSignal;
+  }, [closeOnPathChange, closeSignal, setIsOpen]);
+
+  // Close on outside click
+  useFocusOutside([popoverRef, menuRef], () => setIsOpen(false), {
+    enabled: closeOnClickOutside,
+  });
+
+  return (
+    <PopoverContext.Provider
+      value={{
+        isOpen,
+        setIsOpen,
+        popoverRef,
+        menuRef,
+        coords,
+        isMeasured,
+        shouldRender,
+        animationDuration,
+        triggerWidth,
+        trigger,
+        hoverTimeoutRef,
+        renderOnPortal,
+        position,
+      }}
+    >
+      <div
+        ref={popoverRef}
+        className={clsx(s.container, className)}
+        style={style}
+      >
+        {children}
+      </div>
+    </PopoverContext.Provider>
+  );
+};
+
+// Trigger
+type PopoverTriggerProps = ComponentProps<"button"> & {
+  children?: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+  asChild?: boolean;
+};
+
+export const PopoverTrigger: FC<PopoverTriggerProps> = ({
+  children,
+  className,
+  style,
+  asChild = false,
+  disabled,
+  ...rest
+}) => {
+  const { setIsOpen, isOpen, trigger, hoverTimeoutRef } = usePopover();
+
+  const handleClick = () => {
+    if (!disabled && trigger === "click") {
+      setIsOpen(!isOpen);
+    }
+  };
+
+  const handleMouseEnter = () => {
+    if (!disabled && trigger === "hover") {
+      if (hoverTimeoutRef.current) {
+        clearTimeout(hoverTimeoutRef.current);
+        hoverTimeoutRef.current = null;
+      }
+      setIsOpen(true);
+    }
+  };
+
+  const handleMouseLeave = () => {
+    if (!disabled && trigger === "hover") {
+      hoverTimeoutRef.current = setTimeout(() => {
+        setIsOpen(false);
+      }, 100);
+    }
+  };
+
+  if (asChild) {
+    return (
+      <div
+        className={clsx(s.trigger, className)}
+        style={style}
+        onClick={handleClick}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        aria-expanded={isOpen}
+        data-disabled={disabled}
+        {...(rest as ComponentProps<"div">)}
+      >
+        {children}
+      </div>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      className={clsx(s.trigger, className)}
+      style={style}
+      onClick={handleClick}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      aria-expanded={isOpen}
+      data-disabled={disabled}
+      {...(rest as ComponentProps<"button">)}
+    >
+      {children}
+    </button>
+  );
+};
+
+// Menu
+type PopoverMenuProps = {
+  children?: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+  /**
+   * Cap the menu's `max-width` to the trigger's width - so the menu visually
+   * mirrors the trigger (CustomSelect / dropdown pattern). Set to `false` for
+   * pickers whose trigger is intentionally smaller than the menu (icon
+   * buttons, small swatches). Default: true.
+   */
+  matchTriggerWidth?: boolean;
+};
+
+export const PopoverMenu: FC<PopoverMenuProps> = ({
+  children,
+  className,
+  style,
+  matchTriggerWidth = true,
+}) => {
+  const {
+    isOpen,
+    shouldRender,
+    isMeasured,
+    coords,
+    menuRef,
+    triggerWidth,
+    animationDuration,
+    trigger,
+    setIsOpen,
+    position,
+    hoverTimeoutRef,
+    renderOnPortal,
+  } = usePopover();
+
+  const handleMouseEnter = () => {
+    if (trigger === "hover" && hoverTimeoutRef.current) {
+      clearTimeout(hoverTimeoutRef.current);
+      hoverTimeoutRef.current = null;
+    }
+  };
+
+  const handleMouseLeave = () => {
+    if (trigger === "hover") {
+      hoverTimeoutRef.current = setTimeout(() => {
+        setIsOpen(false);
+      }, 100);
+    }
+  };
+
+  if (!shouldRender) return null;
+
+  // Visibility is the boolean we want the user to *see*. Derived from both
+  // `isOpen` (the intent) and `isMeasured` (we know where to place it).
+  // Reading from `isOpen` here lets re-opens during the exit animation reverse
+  // the fade smoothly without losing the cached position from `isMeasured`.
+  const isVisible = isOpen && isMeasured;
+
+  const getTransform = (
+    position: Position,
+    isMeasured: boolean,
+    isOpen: boolean,
+  ): string => {
+    // Once measured, no transform - final position. While exiting (!isOpen)
+    // also force "none" so the element doesn't create a CSS Containing Block
+    // that would destroy coordinates of nested `position: fixed` popovers.
+    if (isMeasured || !isOpen) {
+      return "none";
+    }
+
+    const transforms: Record<Position, string> = {
+      top: "translateY(4px)",
+      bottom: "translateY(-4px)",
+      left: "translateX(4px)",
+      right: "translateX(-4px)",
+    };
+
+    return transforms[position];
+  };
+
+  const menuStyles: CSSProperties = {
+    position: "fixed",
+    top: coords.top,
+    left: coords.left,
+    zIndex: "var(--z-index-popover)",
+    ...(matchTriggerWidth && { maxWidth: triggerWidth }),
+    opacity: isVisible ? 1 : 0,
+    transform: getTransform(position, isMeasured, isOpen),
+    transition: animationDuration
+      ? `opacity ${animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1), transform ${animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1)`
+      : "opacity var(--transition-base), transform var(--transition-base)",
+    pointerEvents: isVisible ? "auto" : "none",
+    ...style,
+  };
+
+  const menu = (
+    <div
+      ref={menuRef}
+      className={clsx(s.menu_wrapper, className)}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      style={menuStyles}
+    >
+      {children}
+    </div>
+  );
+
+  return renderOnPortal ? createPortal(menu, document.body) : menu;
+};

package/registry/components/ui/accordion/accordion.module.css

@@ -0,0 +1,208 @@
+.root {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+}
+
+.item {
+  --accordion-fg: var(--color-foreground);
+  --accordion-muted-fg: var(--color-muted-foreground);
+  --accordion-icon: var(--accordion-fg);
+
+  width: 100%;
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  transition:
+    border-color var(--transition-base),
+    box-shadow var(--transition-base),
+    background-color var(--transition-base);
+
+  &.item_disabled {
+    opacity: 0.65;
+  }
+
+  &.item_bordered {
+    border: var(--border-1) solid var(--color-border);
+    background-color: var(--color-background);
+    box-shadow: var(--shadow-sm);
+
+    &.item_open {
+      box-shadow: var(--shadow-sm);
+    }
+  }
+
+  &.item_minimal {
+    border: 0;
+    border-radius: var(--radius-md);
+    background: transparent;
+    box-shadow: none;
+
+    &.item_open {
+      box-shadow: none;
+    }
+  }
+}
+
+.trigger {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-4);
+  text-align: left;
+  color: var(--accordion-fg);
+  border: none;
+  outline: none;
+  cursor: pointer;
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+}
+
+.trigger_bordered,
+.trigger_minimal {
+  width: 100%;
+  justify-content: space-between;
+}
+
+.trigger_bordered {
+  background: transparent;
+
+  &:hover:not(:disabled) {
+    background: var(--color-muted);
+  }
+
+  &:focus-visible {
+    box-shadow: var(--shadow-ring);
+  }
+}
+
+.trigger_minimal {
+  border-radius: inherit;
+
+  &:hover:not(:disabled) {
+    background: var(--color-muted);
+  }
+
+  &:focus-visible {
+    box-shadow: var(--shadow-ring);
+  }
+}
+
+.trigger_open {
+  background: var(--color-muted);
+}
+
+.trigger_sm {
+  min-height: var(--spacing-9);
+  padding: var(--spacing-3) var(--spacing-4);
+}
+
+.trigger_md {
+  min-height: var(--spacing-11);
+  padding: var(--spacing-4) var(--spacing-5);
+}
+
+.trigger_lg {
+  min-height: var(--spacing-12);
+  padding: var(--spacing-5) var(--spacing-6);
+}
+
+.title {
+  flex: 1;
+  min-width: 0;
+  padding-inline-end: var(--spacing-2);
+  font-family: var(--font-family-1);
+  font-weight: var(--font-weight-medium);
+  color: inherit;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.title_sm {
+  font-size: var(--font-size-xs);
+  line-height: var(--line-height-xs);
+}
+
+.title_md {
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-sm);
+}
+
+.title_lg {
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-base);
+}
+
+.icon {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--accordion-icon);
+  transform: rotate(0deg);
+  transition: transform var(--transition-base);
+
+  &.icon_open {
+    transform: rotate(var(--accordion-icon-rotation, 180deg));
+  }
+}
+
+.panel {
+  height: 0;
+  opacity: 0;
+  overflow: hidden;
+  pointer-events: none;
+  transition:
+    height var(--transition-base),
+    opacity var(--transition-base);
+
+  &.panel_open {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+
+.panel_inner {
+  min-height: 0;
+  color: var(--accordion-muted-fg);
+}
+
+.panel_inner_bordered {
+  border-top: 0;
+  background-color: var(--color-background);
+
+  &.panel_inner_open {
+    border-top: var(--border-1) solid var(--color-border);
+  }
+}
+
+.panel_inner_minimal {
+  border: 0;
+  background: transparent;
+
+  &.panel_inner_open {
+    border-top: 0;
+  }
+}
+
+.panel_inner_sm {
+  padding: var(--spacing-2) var(--spacing-4) var(--spacing-4);
+  font-size: var(--font-size-xs);
+  line-height: var(--line-height-sm);
+}
+
+.panel_inner_md {
+  padding: var(--spacing-3) var(--spacing-5) var(--spacing-5);
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-base);
+}
+
+.panel_inner_lg {
+  padding: var(--spacing-4) var(--spacing-6) var(--spacing-6);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-base);
+}