@exegia/corpora-ui 3.0.0 → 4.0.0

package/src/components/motion/overflow-actions.tsx

@@ -1,376 +0,0 @@
-"use client";
-// beui.dev/components/blocks/overflow-actions
-
-import { MoreHorizontal, X } from "lucide-react";
-import {
-  AnimatePresence,
-  motion,
-  useReducedMotion,
-  type Transition,
-  type Variants,
-} from "motion/react";
-import {
-  useCallback,
-  useId,
-  useLayoutEffect,
-  useRef,
-  useState,
-  type ReactNode,
-} from "react";
-import { EASE_OUT } from "@/lib/ease";
-import { useHoverCapable } from "@/lib/hooks/use-hover-capable";
-import { cn } from "@/lib/utils";
-
-export type TOverflowActionsSize = "sm" | "md";
-
-export type TOverflowActionItem = {
-  id: string;
-  label: ReactNode;
-  icon?: ReactNode;
-  onClick?: () => void;
-  disabled?: boolean;
-  ariaLabel?: string;
-};
-
-export type TOverflowActionsClassNames = {
-  root?: string;
-  track?: string;
-  action?: string;
-  primaryAction?: string;
-  overflowAction?: string;
-  toggle?: string;
-  icon?: string;
-  label?: string;
-};
-
-export interface IOverflowActionsProps {
-  primaryActions: TOverflowActionItem[];
-  overflowActions: TOverflowActionItem[];
-  expanded?: boolean;
-  defaultExpanded?: boolean;
-  onExpandedChange?: (expanded: boolean) => void;
-  onAction?: (item: TOverflowActionItem) => void;
-  collapseOnAction?: boolean;
-  size?: TOverflowActionsSize;
-  openLabel?: string;
-  closeLabel?: string;
-  className?: string;
-  classNames?: TOverflowActionsClassNames;
-}
-
-// This needs a softer layout spring than the app defaults, so the overflow group
-// stays visually attached to the toggle while entering and leaving.
-const SHELL_TRANSITION: Transition = {
-  type: "spring",
-  stiffness: 220,
-  damping: 17,
-  mass: 0.85,
-};
-
-const ICON_VARIANTS: Variants = {
-  hidden: { opacity: 0, filter: "blur(3px)" },
-  visible: {
-    opacity: 1,
-    filter: "blur(0px)",
-    transition: { duration: 0.18, ease: EASE_OUT },
-  },
-  exit: {
-    opacity: 0,
-    filter: "blur(3px)",
-    transition: { duration: 0.18, ease: EASE_OUT },
-  },
-};
-
-const OVERFLOW_ACTION_VARIANTS: Variants = {
-  hidden: { opacity: 0, filter: "blur(4px)" },
-  visible: { opacity: 1, filter: "blur(0px)" },
-  exit: { opacity: 0, filter: "blur(4px)" },
-};
-
-const TRACK_SIZE_CLASS: Record<TOverflowActionsSize, string> = {
-  sm: "gap-1 p-1 text-xs",
-  md: "gap-1.5 p-1.5 text-sm",
-};
-
-const GROUP_GAP_CLASS: Record<TOverflowActionsSize, string> = {
-  sm: "gap-1",
-  md: "gap-1.5",
-};
-
-const ACTION_SIZE_CLASS: Record<TOverflowActionsSize, string> = {
-  sm: "h-8 min-w-8 gap-1.5 px-3",
-  md: "h-9 min-w-9 gap-2 px-3.5",
-};
-
-const TOGGLE_SIZE_CLASS: Record<TOverflowActionsSize, string> = {
-  sm: "h-8 w-8",
-  md: "h-9 w-9",
-};
-
-const ICON_SIZE_CLASS: Record<TOverflowActionsSize, string> = {
-  sm: "h-3.5 w-3.5",
-  md: "h-4 w-4",
-};
-
-function useControllableExpanded({
-  expanded,
-  defaultExpanded,
-  onExpandedChange,
-}: {
-  expanded?: boolean;
-  defaultExpanded?: boolean;
-  onExpandedChange?: (expanded: boolean) => void;
-}) {
-  const [internalExpanded, setInternalExpanded] = useState(
-    defaultExpanded ?? false,
-  );
-  const isControlled = expanded !== undefined;
-  const value = expanded ?? internalExpanded;
-
-  const setValue = useCallback(
-    (next: boolean) => {
-      if (!isControlled) setInternalExpanded(next);
-      onExpandedChange?.(next);
-    },
-    [isControlled, onExpandedChange],
-  );
-
-  return [value, setValue] as const;
-}
-
-export function OverflowActions({
-  primaryActions,
-  overflowActions,
-  expanded,
-  defaultExpanded = false,
-  onExpandedChange,
-  onAction,
-  collapseOnAction = false,
-  size = "md",
-  openLabel = "Show extra actions",
-  closeLabel = "Hide extra actions",
-  className,
-  classNames,
-}: IOverflowActionsProps) {
-  const reduce = useReducedMotion();
-  const canHover = useHoverCapable();
-  const overflowId = useId();
-  const overflowWrapperRef = useRef<HTMLDivElement>(null);
-  const overflowWrapperLeftRef = useRef(0);
-  const [isExpanded, setIsExpanded] = useControllableExpanded({
-    expanded,
-    defaultExpanded,
-    onExpandedChange,
-  });
-
-  const transition = reduce ? { duration: 0 } : SHELL_TRANSITION;
-
-  useLayoutEffect(() => {
-    const overflowNode = overflowWrapperRef.current;
-    if (!overflowNode) return;
-
-    if (!isExpanded) {
-      overflowNode.style.left = `${
-        overflowWrapperLeftRef.current -
-        overflowNode.getBoundingClientRect().left
-      }px`;
-      return;
-    }
-
-    overflowNode.style.left = "";
-    overflowWrapperLeftRef.current = overflowNode.getBoundingClientRect().left;
-  }, [isExpanded]);
-
-  const handleAction = (item: TOverflowActionItem) => {
-    item.onClick?.();
-    onAction?.(item);
-    if (collapseOnAction) setIsExpanded(false);
-  };
-
-  return (
-    <motion.div
-      layout
-      transition={transition}
-      className={cn("inline-flex", classNames?.root, className)}
-    >
-      <motion.div
-        layout
-        transition={transition}
-        className={cn(
-          "relative inline-flex items-center overflow-hidden rounded-full border border-border bg-card",
-          TRACK_SIZE_CLASS[size],
-          classNames?.track,
-        )}
-      >
-        <motion.div
-          layout
-          transition={transition}
-          className={cn("inline-flex items-center", GROUP_GAP_CLASS[size])}
-        >
-          {primaryActions.map((item) => (
-            <ActionButton
-              key={item.id}
-              item={item}
-              size={size}
-              reduce={reduce}
-              canHover={canHover}
-              onAction={handleAction}
-              layoutTransition={transition}
-              className={cn(classNames?.action, classNames?.primaryAction)}
-              iconClassName={classNames?.icon}
-              labelClassName={classNames?.label}
-            />
-          ))}
-        </motion.div>
-
-        <AnimatePresence mode="popLayout" initial={false}>
-          {isExpanded ? (
-            <motion.div
-              key="overflow-actions"
-              ref={overflowWrapperRef}
-              id={overflowId}
-              layout
-              aria-hidden={!isExpanded}
-              transition={transition}
-              className={cn(
-                "relative inline-flex w-max items-center",
-                GROUP_GAP_CLASS[size],
-              )}
-            >
-              {overflowActions.map((item) => (
-                <ActionButton
-                  key={item.id}
-                  item={item}
-                  size={size}
-                  reduce={reduce}
-                  canHover={canHover}
-                  overflow
-                  visible={isExpanded}
-                  variants={OVERFLOW_ACTION_VARIANTS}
-                  onAction={handleAction}
-                  layoutTransition={transition}
-                  className={cn(classNames?.action, classNames?.overflowAction)}
-                  iconClassName={classNames?.icon}
-                  labelClassName={classNames?.label}
-                />
-              ))}
-            </motion.div>
-          ) : null}
-        </AnimatePresence>
-
-        <motion.button
-          type="button"
-          layout
-          aria-expanded={isExpanded}
-          aria-controls={isExpanded ? overflowId : undefined}
-          aria-label={isExpanded ? closeLabel : openLabel}
-          title={isExpanded ? closeLabel : openLabel}
-          onClick={() => setIsExpanded(!isExpanded)}
-          whileTap={reduce ? undefined : { scale: 0.96 }}
-          whileHover={reduce || !canHover ? undefined : { scale: 1.03 }}
-          transition={transition}
-          className={cn(
-            "relative inline-grid shrink-0 place-items-center rounded-full bg-primary text-primary-foreground outline-none disabled:pointer-events-none disabled:opacity-50",
-            "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-            TOGGLE_SIZE_CLASS[size],
-            classNames?.toggle,
-          )}
-        >
-          <AnimatePresence mode="popLayout" initial={false}>
-            <motion.span
-              key={isExpanded ? "close" : "open"}
-              variants={ICON_VARIANTS}
-              initial={reduce ? { opacity: 0 } : "hidden"}
-              animate={reduce ? { opacity: 1 } : "visible"}
-              exit={reduce ? { opacity: 0 } : "exit"}
-              className="inline-grid place-items-center"
-            >
-              {isExpanded ? (
-                <X className={ICON_SIZE_CLASS[size]} />
-              ) : (
-                <MoreHorizontal className={ICON_SIZE_CLASS[size]} />
-              )}
-            </motion.span>
-          </AnimatePresence>
-        </motion.button>
-      </motion.div>
-    </motion.div>
-  );
-}
-
-function ActionButton({
-  item,
-  size,
-  reduce,
-  canHover,
-  overflow,
-  visible = true,
-  variants,
-  onAction,
-  layoutTransition,
-  className,
-  iconClassName,
-  labelClassName,
-}: {
-  item: TOverflowActionItem;
-  size: TOverflowActionsSize;
-  reduce: boolean | null;
-  canHover: boolean;
-  overflow?: boolean;
-  visible?: boolean;
-  variants?: Variants;
-  onAction: (item: TOverflowActionItem) => void;
-  layoutTransition: Transition;
-  className?: string;
-  iconClassName?: string;
-  labelClassName?: string;
-}) {
-  const label = typeof item.label === "string" ? item.label : undefined;
-
-  return (
-    <motion.span
-      layout="position"
-      variants={variants}
-      initial={variants ? (reduce ? { opacity: 0 } : "hidden") : undefined}
-      animate={variants ? (reduce ? { opacity: 1 } : "visible") : undefined}
-      exit={variants ? (reduce ? { opacity: 0 } : "exit") : undefined}
-      whileTap={reduce || item.disabled ? undefined : { scale: 0.97 }}
-      whileHover={
-        reduce || !canHover || item.disabled ? undefined : { scale: 1.008 }
-      }
-      transition={layoutTransition}
-      className="inline-flex shrink-0"
-    >
-      <button
-        type="button"
-        disabled={item.disabled}
-        aria-label={item.ariaLabel}
-        tabIndex={overflow && !visible ? -1 : undefined}
-        title={label}
-        onClick={() => onAction(item)}
-        className={cn(
-          "inline-flex shrink-0 items-center justify-center rounded-full bg-background font-medium text-foreground outline-none",
-          "disabled:pointer-events-none disabled:opacity-45",
-          "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-          ACTION_SIZE_CLASS[size],
-          className,
-        )}
-      >
-        {item.icon ? (
-          <span
-            className={cn(
-              "inline-flex shrink-0 items-center justify-center",
-              ICON_SIZE_CLASS[size],
-              iconClassName,
-            )}
-          >
-            {item.icon}
-          </span>
-        ) : null}
-        <span className={cn("whitespace-nowrap", labelClassName)}>
-          {item.label}
-        </span>
-      </button>
-    </motion.span>
-  );
-}

package/src/components/motion/popover-morph.tsx

@@ -1,292 +0,0 @@
-"use client";
-
-import { AnimatePresence, motion, useReducedMotion } from "motion/react";
-import {
-  cloneElement,
-  createContext,
-  isValidElement,
-  type ReactElement,
-  type ReactNode,
-  type Ref,
-  useCallback,
-  useContext,
-  useEffect,
-  useId,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import { createPortal } from "react-dom";
-import { usePopoverPortalPosition } from "@/components/motion/popover-position";
-import { EASE_OUT, SPRING_PANEL } from "@/lib/ease";
-import { cn } from "@/lib/utils";
-
-type TSide = "top" | "bottom";
-type TAlign = "start" | "end";
-
-type TMorphContextValue = {
-  open: boolean;
-  setOpen: (open: boolean) => void;
-  toggle: () => void;
-  triggerId: string;
-  contentId: string;
-  triggerRef: React.MutableRefObject<HTMLElement | null>;
-  setContentRef: (node: HTMLDivElement | null) => void;
-  contentRef: React.MutableRefObject<HTMLDivElement | null>;
-};
-
-const MorphContext = createContext<TMorphContextValue | null>(null);
-
-function useMorphContext(component: string) {
-  const ctx = useContext(MorphContext);
-  if (!ctx) throw new Error(`${component} must be used within <MorphPopover>`);
-  return ctx;
-}
-
-export interface IMorphPopoverProps {
-  children: ReactNode;
-  /** Controlled open state. */
-  open?: boolean;
-  /** Uncontrolled initial open state. */
-  defaultOpen?: boolean;
-  onOpenChange?: (open: boolean) => void;
-  className?: string;
-}
-
-/**
- * A popover whose panel morphs open from the trigger corner: it's laid out at
- * full size but clipped to the corner nearest the trigger, then unclips as one
- * piece. Closes on outside pointer / Escape. Controlled or uncontrolled.
- */
-export function MorphPopover({
-  children,
-  open: controlledOpen,
-  defaultOpen = false,
-  onOpenChange,
-  className,
-}: IMorphPopoverProps) {
-  const baseId = useId();
-  const rootRef = useRef<HTMLDivElement>(null);
-  const triggerRef = useRef<HTMLElement | null>(null);
-  const contentRef = useRef<HTMLDivElement | null>(null);
-  const [internalOpen, setInternalOpen] = useState(defaultOpen);
-  const controlled = controlledOpen !== undefined;
-  const open = controlled ? controlledOpen : internalOpen;
-
-  const setOpen = useCallback(
-    (next: boolean) => {
-      if (!controlled) setInternalOpen(next);
-      onOpenChange?.(next);
-    },
-    [controlled, onOpenChange],
-  );
-  const toggle = useCallback(() => setOpen(!open), [setOpen, open]);
-
-  useEffect(() => {
-    if (!open) return;
-    const onKey = (e: KeyboardEvent) => e.key === "Escape" && setOpen(false);
-    const onPointer = (e: PointerEvent) => {
-      const target = e.target as Node;
-      if (
-        rootRef.current &&
-        !rootRef.current.contains(target) &&
-        !contentRef.current?.contains(target)
-      )
-        setOpen(false);
-    };
-    window.addEventListener("keydown", onKey);
-    window.addEventListener("pointerdown", onPointer);
-    return () => {
-      window.removeEventListener("keydown", onKey);
-      window.removeEventListener("pointerdown", onPointer);
-    };
-  }, [open, setOpen]);
-
-  const ctx = useMemo<TMorphContextValue>(
-    () => ({
-      open,
-      setOpen,
-      toggle,
-      triggerId: `${baseId}-trigger`,
-      contentId: `${baseId}-content`,
-      triggerRef,
-      setContentRef: (node) => {
-        contentRef.current = node;
-      },
-      contentRef,
-    }),
-    [open, setOpen, toggle, baseId],
-  );
-
-  return (
-    <MorphContext.Provider value={ctx}>
-      <div ref={rootRef} className={cn("relative inline-flex", className)}>
-        {children}
-      </div>
-    </MorphContext.Provider>
-  );
-}
-
-export interface IMorphPopoverTriggerProps {
-  children: ReactElement;
-}
-
-function mergeRefs<T>(...refs: Array<Ref<T> | undefined>) {
-  return (node: T | null) => {
-    for (const ref of refs) {
-      if (typeof ref === "function") ref(node);
-      else if (ref && typeof ref === "object")
-        (ref as React.MutableRefObject<T | null>).current = node;
-    }
-  };
-}
-
-/** Wraps a single element, toggling the popover on click. */
-export function MorphPopoverTrigger({ children }: IMorphPopoverTriggerProps) {
-  const ctx = useMorphContext("MorphPopoverTrigger");
-  if (!isValidElement(children)) return children;
-
-  const child = children as ReactElement<Record<string, unknown>>;
-  const childOnClick = child.props.onClick as
-    | ((e: unknown) => void)
-    | undefined;
-  const childRef = (child.props as { ref?: Ref<HTMLElement> }).ref;
-
-  return cloneElement(child, {
-    id: ctx.triggerId,
-    ref: mergeRefs(childRef, (node: HTMLElement | null) => {
-      ctx.triggerRef.current = node;
-    }),
-    onClick: (e: unknown) => {
-      childOnClick?.(e);
-      ctx.toggle();
-    },
-    "aria-haspopup": "dialog",
-    "aria-expanded": ctx.open,
-    "aria-controls": ctx.open ? ctx.contentId : undefined,
-  });
-}
-
-const originFor = (side: TSide, align: TAlign) =>
-  `${side === "bottom" ? "top" : "bottom"} ${align === "end" ? "right" : "left"}`;
-
-// A clip that hides everything but the corner nearest the trigger, so the
-// panel appears to grow out of it. inset(top right bottom left).
-function clipHidden(side: TSide, align: TAlign, radius: number) {
-  const top = side === "bottom" ? "0%" : "92%";
-  const bottom = side === "bottom" ? "92%" : "0%";
-  const right = align === "end" ? "0%" : "92%";
-  const left = align === "end" ? "92%" : "0%";
-  return `inset(${top} ${right} ${bottom} ${left} round ${radius}px)`;
-}
-const clipShown = (radius: number) => `inset(0% 0% 0% 0% round ${radius}px)`;
-
-// Preserve the original spring character on the wrapper, but tween the complex
-// clip-path so it cannot snap when the spring resolves its final distance.
-const MORPH_CLIP_TRANSITION = { duration: 0.32, ease: EASE_OUT } as const;
-
-export interface IMorphPopoverContentProps {
-  children: ReactNode;
-  side?: TSide;
-  align?: TAlign;
-  /** Gap between trigger and panel, in px. Default 8. */
-  sideOffset?: number;
-  /** Panel corner radius, in px. Default 16. */
-  radius?: number;
-  className?: string;
-}
-
-export function MorphPopoverContent({
-  children,
-  side = "bottom",
-  align = "end",
-  sideOffset = 8,
-  radius = 16,
-  className,
-}: IMorphPopoverContentProps) {
-  const ctx = useMorphContext("MorphPopoverContent");
-  const { contentId, setContentRef, triggerId } = ctx;
-  const reduce = useReducedMotion() ?? false;
-  const [portalReady, setPortalReady] = useState(false);
-  const layout = usePopoverPortalPosition(
-    ctx.triggerRef,
-    ctx.contentRef,
-    portalReady && ctx.open,
-  );
-
-  useEffect(() => setPortalReady(true), []);
-  const left = layout
-    ? align === "end"
-      ? layout.trigger.left + layout.trigger.width - layout.content.width
-      : layout.trigger.left
-    : 0;
-  const top = layout
-    ? side === "bottom"
-      ? layout.trigger.top + layout.trigger.height + sideOffset
-      : layout.trigger.top - layout.content.height - sideOffset
-    : 0;
-
-  // Both directions travel between the exact same hidden/show states. Exit
-  // targets "hidden" directly instead of introducing separate choreography.
-  const wrap = reduce
-    ? undefined
-    : {
-        hidden: { opacity: 0, scale: 0.96, transition: SPRING_PANEL },
-        show: { opacity: 1, scale: 1, transition: SPRING_PANEL },
-      };
-  const clip = reduce
-    ? undefined
-    : {
-        hidden: {
-          clipPath: clipHidden(side, align, radius),
-          transition: MORPH_CLIP_TRANSITION,
-        },
-        show: {
-          clipPath: clipShown(radius),
-          transition: MORPH_CLIP_TRANSITION,
-        },
-      };
-
-  // Keep the server and first client render identical, then mount the portal.
-  if (!portalReady) return null;
-
-  return createPortal(
-    <AnimatePresence>
-      {ctx.open ? (
-        <motion.div
-          data-morph-popover-portal=""
-          // Wrapper carries the shadow as a drop-shadow filter, which hugs the
-          // clipped shape below (box-shadow would just get clipped away).
-          variants={wrap}
-          initial={reduce ? { opacity: 0 } : "hidden"}
-          animate={reduce ? { opacity: 1 } : "show"}
-          exit={reduce ? { opacity: 0 } : "hidden"}
-          transition={reduce ? { duration: 0.12 } : undefined}
-          style={{
-            left,
-            top,
-            visibility: layout ? "visible" : "hidden",
-            transformOrigin: originFor(side, align),
-          }}
-          className="fixed z-[9999] [filter:drop-shadow(0_10px_18px_rgba(0,0,0,0.14))]"
-        >
-          <motion.div
-            ref={setContentRef}
-            id={contentId}
-            role="dialog"
-            aria-labelledby={triggerId}
-            variants={clip}
-            style={{ borderRadius: radius }}
-            className={cn(
-              "overflow-hidden border border-border bg-background",
-              className,
-            )}
-          >
-            {children}
-          </motion.div>
-        </motion.div>
-      ) : null}
-    </AnimatePresence>,
-    document.body,
-  );
-}