@patternmode/aperto 0.1.1

package/dist/index.js

@@ -0,0 +1,1113 @@
+"use client";
+
+// src/Aperto/ApertoGroup.tsx
+import { ChevronLeft, ChevronRight, X } from "lucide-react";
+import {
+  useCallback as useCallback3,
+  useId as useId2,
+  useLayoutEffect,
+  useMemo as useMemo2,
+  useRef,
+  useState as useState3
+} from "react";
+import { flushSync } from "react-dom";
+
+// src/aperto-content.tsx
+import * as Dialog from "@radix-ui/react-dialog";
+import {
+  motion,
+  useMotionValue,
+  useSpring,
+  useTransform
+} from "motion/react";
+import {
+  forwardRef,
+  useCallback,
+  useMemo,
+  useState
+} from "react";
+
+// src/context.ts
+import { createContext, useContext } from "react";
+var ApertoContext = createContext(null);
+function useApertoContext() {
+  const ctx = useContext(ApertoContext);
+  if (!ctx) {
+    throw new Error("Aperto components must be used within <Aperto.Root>");
+  }
+  return ctx;
+}
+
+// src/physics.ts
+var RESISTANCE_DIVISOR = 20;
+var RESISTANCE_SCALE = 4;
+var RESISTANCE_MIN = 0.1;
+function calculateResistance(distance) {
+  return Math.max(
+    RESISTANCE_MIN,
+    1 - Math.log(distance / RESISTANCE_DIVISOR + 1) / RESISTANCE_SCALE
+  );
+}
+var SCALE_INPUT = [0, 50, 100];
+var SCALE_OUTPUT = [1, 0.98, 0.95];
+var OPACITY_INPUT = [0, 80];
+var OPACITY_OUTPUT = [1, 0.96];
+var DEFAULT_DISTANCE_THRESHOLD = 100;
+var DEFAULT_VELOCITY_THRESHOLD = 500;
+
+// src/motion-tokens.ts
+var durations = {
+  snappy: 0.22,
+  moderate: 0.4
+};
+var easings = {
+  customGentle: [0.25, 0.1, 0.12, 1],
+  snappy: [0.22, 1, 0.36, 1]
+};
+var springs = {
+  bouncy: { stiffness: 260, damping: 12, mass: 1 },
+  natural: { stiffness: 200, damping: 20, mass: 1 },
+  snappy: { stiffness: 400, damping: 28, mass: 0.8 },
+  stiff: { stiffness: 500, damping: 30, mass: 1 }
+};
+
+// src/presets.ts
+var PRESETS = {
+  snappy: {
+    transition: { ease: easings.snappy, duration: durations.snappy },
+    drag: {
+      stiffness: springs.stiff.stiffness,
+      damping: springs.stiff.damping,
+      restDelta: 0.01
+    }
+  },
+  smooth: {
+    transition: { ease: easings.customGentle, duration: durations.moderate },
+    drag: {
+      stiffness: springs.natural.stiffness,
+      damping: springs.natural.damping,
+      restDelta: 0.01
+    }
+  },
+  bouncy: {
+    transition: {
+      type: "spring",
+      stiffness: springs.bouncy.stiffness,
+      damping: springs.bouncy.damping,
+      mass: springs.bouncy.mass
+    },
+    drag: {
+      stiffness: springs.snappy.stiffness,
+      damping: springs.snappy.damping,
+      restDelta: 0.01
+    }
+  },
+  reduced: {
+    transition: { ease: "linear", duration: 0.01 },
+    drag: { stiffness: 1e3, damping: 50, restDelta: 0.1 }
+  }
+};
+function resolvePreset(componentType, componentMotion, globalPreset, variants, reduceMotion) {
+  if (reduceMotion) {
+    return PRESETS.reduced;
+  }
+  if (componentMotion) {
+    return PRESETS[componentMotion];
+  }
+  if (variants?.[componentType]) {
+    return PRESETS[variants[componentType]];
+  }
+  return PRESETS[globalPreset];
+}
+function getDragSpring(preset) {
+  return preset.drag;
+}
+
+// src/aperto-content.tsx
+import { jsx } from "react/jsx-runtime";
+var ApertoContent = forwardRef(
+  ({
+    children,
+    className,
+    motion: motionOverride,
+    placement = "center",
+    sharedLayoutId,
+    style,
+    ...props
+  }, ref) => {
+    const ctx = useApertoContext();
+    const [isDragging, setIsDragging] = useState(false);
+    const resolved = resolvePreset(
+      "content",
+      motionOverride,
+      ctx.presetName,
+      ctx.variants,
+      ctx.reduceMotion
+    );
+    const contentLayoutId = sharedLayoutId === false ? void 0 : sharedLayoutId ?? `${ctx.layoutId}-shared`;
+    const dragSpring = getDragSpring(resolved);
+    const isDismissible = ctx.dismissible !== false;
+    const dismissConfig = typeof ctx.dismissible === "object" ? ctx.dismissible : {};
+    const distanceThreshold = dismissConfig.threshold ?? DEFAULT_DISTANCE_THRESHOLD;
+    const velocityThreshold = dismissConfig.velocity ?? DEFAULT_VELOCITY_THRESHOLD;
+    const dragX = useMotionValue(0);
+    const dragY = useMotionValue(0);
+    const springX = useSpring(dragX, dragSpring);
+    const springY = useSpring(dragY, dragSpring);
+    const distance = useTransform(
+      () => Math.hypot(springX.get(), springY.get())
+    );
+    const scaleMotion = useTransform(distance, SCALE_INPUT, SCALE_OUTPUT);
+    const opacityMotion = useTransform(distance, OPACITY_INPUT, OPACITY_OUTPUT);
+    const resistance = useTransform(distance, calculateResistance);
+    const handleDrag = useCallback(
+      (_event, info) => {
+        if (!isDragging) {
+          setIsDragging(true);
+        }
+        const r = resistance.get();
+        dragX.set(info.offset.x * r);
+        dragY.set(info.offset.y * r);
+      },
+      [dragX, dragY, isDragging, resistance]
+    );
+    const handleDragEnd = useCallback(
+      (_event, info) => {
+        setIsDragging(false);
+        const speed = Math.hypot(info.velocity.x, info.velocity.y);
+        const dist = Math.hypot(info.offset.x, info.offset.y);
+        if (speed > velocityThreshold || dist > distanceThreshold) {
+          ctx.onOpenChange(false);
+          return;
+        }
+        dragX.set(0);
+        dragY.set(0);
+      },
+      [ctx.onOpenChange, distanceThreshold, dragX, dragY, velocityThreshold]
+    );
+    const motionStyle = useMemo(
+      () => ({
+        cursor: isDragging ? "grabbing" : isDismissible ? "grab" : void 0,
+        opacity: opacityMotion,
+        scale: scaleMotion,
+        x: springX,
+        y: springY,
+        ...placement === "center" ? {
+          left: "50%",
+          top: "50%",
+          translate: "-50% -50%"
+        } : {},
+        ...style
+      }),
+      [
+        isDismissible,
+        isDragging,
+        opacityMotion,
+        placement,
+        scaleMotion,
+        springX,
+        springY,
+        style
+      ]
+    );
+    return /* @__PURE__ */ jsx(Dialog.Content, { asChild: true, forceMount: true, ...props, children: /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        className,
+        "data-slot": "aperto-content",
+        drag: isDismissible,
+        dragConstraints: { bottom: 0, left: 0, right: 0, top: 0 },
+        dragElastic: 0,
+        dragMomentum: false,
+        dragSnapToOrigin: true,
+        layout: contentLayoutId ? true : void 0,
+        layoutId: contentLayoutId,
+        onDrag: isDismissible ? handleDrag : void 0,
+        onDragEnd: isDismissible ? handleDragEnd : void 0,
+        ref,
+        style: motionStyle,
+        transition: resolved.transition,
+        children
+      }
+    ) });
+  }
+);
+ApertoContent.displayName = "ApertoContent";
+
+// src/aperto-description.tsx
+import * as Dialog2 from "@radix-ui/react-dialog";
+import { forwardRef as forwardRef2 } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var ApertoDescription = forwardRef2((props, ref) => {
+  return /* @__PURE__ */ jsx2(Dialog2.Description, { "data-slot": "aperto-description", ref, ...props });
+});
+ApertoDescription.displayName = "ApertoDescription";
+
+// src/aperto-group-context.ts
+import { createContext as createContext2, useContext as useContext2 } from "react";
+var ApertoGroupContext = createContext2(
+  null
+);
+function useApertoGroup() {
+  const ctx = useContext2(ApertoGroupContext);
+  if (!ctx) {
+    throw new Error("Aperto.Thumbnail must be used within <Aperto.Group>");
+  }
+  return ctx;
+}
+
+// src/aperto-overlay.tsx
+import * as Dialog3 from "@radix-ui/react-dialog";
+import { motion as motion2 } from "motion/react";
+import { forwardRef as forwardRef3 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var OVERLAY_TRANSITION = {
+  duration: 0.3,
+  ease: easings.customGentle
+};
+var OVERLAY_TRANSITION_REDUCED = {
+  duration: 0.01,
+  ease: "linear"
+};
+var ApertoOverlay = forwardRef3(
+  ({ className, fadeOut, style }, ref) => {
+    const ctx = useApertoContext();
+    const transition = ctx.reduceMotion ? OVERLAY_TRANSITION_REDUCED : OVERLAY_TRANSITION;
+    return /* @__PURE__ */ jsx3(Dialog3.Overlay, { asChild: true, forceMount: true, children: /* @__PURE__ */ jsx3(
+      motion2.div,
+      {
+        animate: { opacity: fadeOut ? 0 : 1 },
+        className,
+        "data-slot": "aperto-overlay",
+        exit: { opacity: 0 },
+        initial: { opacity: 0 },
+        ref,
+        style,
+        transition
+      }
+    ) });
+  }
+);
+ApertoOverlay.displayName = "ApertoOverlay";
+
+// src/aperto-portal.tsx
+import * as Dialog4 from "@radix-ui/react-dialog";
+import { AnimatePresence } from "motion/react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function ApertoPortal({ children, container }) {
+  const { open } = useApertoContext();
+  return /* @__PURE__ */ jsx4(AnimatePresence, { children: open && /* @__PURE__ */ jsx4(Dialog4.Portal, { container, forceMount: true, children }) });
+}
+
+// src/aperto-root.tsx
+import * as Dialog5 from "@radix-ui/react-dialog";
+import { LayoutGroup, useReducedMotion } from "motion/react";
+import {
+  useCallback as useCallback2,
+  useId,
+  useState as useState2
+} from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+function ApertoRoot({
+  children,
+  dismissible = true,
+  layoutId: layoutIdProp,
+  motion: motionProp = "smooth",
+  open: controlledOpen,
+  onOpenChange: controlledOnOpenChange,
+  reduceMotion: reduceMotionProp,
+  ...dialogProps
+}) {
+  const generatedId = useId();
+  const layoutId = layoutIdProp ?? `aperto-${generatedId}`;
+  const systemReducedMotion = useReducedMotion() ?? false;
+  const shouldReduce = reduceMotionProp ?? systemReducedMotion;
+  const [internalOpen, setInternalOpen] = useState2(false);
+  const isControlled = controlledOpen !== void 0;
+  const open = isControlled ? controlledOpen : internalOpen;
+  const onOpenChange = useCallback2(
+    (nextOpen) => {
+      if (!isControlled) {
+        setInternalOpen(nextOpen);
+      }
+      controlledOnOpenChange?.(nextOpen);
+    },
+    [isControlled, controlledOnOpenChange]
+  );
+  const globalPresetName = typeof motionProp === "string" ? motionProp : "smooth";
+  const variants = typeof motionProp === "object" ? motionProp : void 0;
+  const presetName = shouldReduce ? "reduced" : globalPresetName;
+  const preset = PRESETS[presetName];
+  return /* @__PURE__ */ jsx5(
+    ApertoContext.Provider,
+    {
+      value: {
+        dismissible,
+        layoutId,
+        onOpenChange,
+        open,
+        preset,
+        presetName,
+        reduceMotion: shouldReduce,
+        variants
+      },
+      children: /* @__PURE__ */ jsx5(Dialog5.Root, { onOpenChange, open, ...dialogProps, children: /* @__PURE__ */ jsx5(LayoutGroup, { id: layoutId, children }) })
+    }
+  );
+}
+
+// src/aperto-title.tsx
+import * as Dialog6 from "@radix-ui/react-dialog";
+import { forwardRef as forwardRef4 } from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var ApertoTitle = forwardRef4((props, ref) => {
+  return /* @__PURE__ */ jsx6(Dialog6.Title, { "data-slot": "aperto-title", ref, ...props });
+});
+ApertoTitle.displayName = "ApertoTitle";
+
+// src/expanded-media-stage.tsx
+import {
+  AnimatePresence as AnimatePresence2,
+  motion as motion3
+} from "motion/react";
+
+// src/media-rendering.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+function getMediaLabel(item) {
+  return item.title ?? item.alt ?? "media";
+}
+function getMediaKey(item, index) {
+  return item.id ?? `${item.type}:${item.src}:${index}`;
+}
+function getDescriptionProps(item) {
+  return item.description ? {} : { "aria-describedby": void 0 };
+}
+function renderDefaultImage(props) {
+  const { item: _item, variant: _variant, ...imageProps } = props;
+  return /* @__PURE__ */ jsx7("img", { ...imageProps, alt: imageProps.alt ?? "" });
+}
+function renderDefaultVideo(props) {
+  const { item: _item, variant, ...videoProps } = props;
+  if (variant === "thumbnail") {
+    return /* @__PURE__ */ jsx7("img", { alt: videoProps["aria-label"] ?? "", src: props.item.thumbnailSrc });
+  }
+  return /* @__PURE__ */ jsx7("video", { ...videoProps });
+}
+function renderThumbnail(item, renderImage, renderVideo) {
+  if (item.type === "image") {
+    const imageProps = {
+      alt: "",
+      height: item.height,
+      item,
+      src: item.thumbnailSrc ?? item.src,
+      variant: "thumbnail",
+      width: item.width
+    };
+    return (renderImage ?? renderDefaultImage)(imageProps);
+  }
+  const videoProps = {
+    "aria-label": item.alt ?? item.title ?? "Video thumbnail",
+    height: item.height,
+    item,
+    poster: item.poster,
+    src: item.thumbnailSrc,
+    variant: "thumbnail",
+    width: item.width
+  };
+  return (renderVideo ?? renderDefaultVideo)(videoProps);
+}
+function renderExpandedMedia(item, renderImage, renderVideo) {
+  if (item.type === "image") {
+    const imageProps = {
+      alt: item.alt,
+      height: item.height,
+      item,
+      src: item.src,
+      variant: "expanded",
+      width: item.width
+    };
+    return (renderImage ?? renderDefaultImage)(imageProps);
+  }
+  const videoProps = {
+    "aria-label": item.alt ?? item.title ?? "Video",
+    controls: true,
+    height: item.height,
+    item,
+    poster: item.poster,
+    src: item.src,
+    variant: "expanded",
+    width: item.width
+  };
+  return (renderVideo ?? renderDefaultVideo)(videoProps);
+}
+function renderTransitionMedia(item) {
+  if (item.type === "image") {
+    return /* @__PURE__ */ jsx7("img", { alt: "", src: item.src });
+  }
+  return /* @__PURE__ */ jsx7("img", { alt: "", src: item.poster ?? item.thumbnailSrc });
+}
+
+// src/expanded-media-stage.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var NAVIGATION_MOTION_PRESETS = {
+  float: {
+    offset: 96,
+    scale: 0.97,
+    transition: {
+      opacity: { duration: 0.34, ease: [0.45, 0, 0.2, 1] },
+      scale: { damping: 26, mass: 1.15, stiffness: 80, type: "spring" },
+      x: { damping: 26, mass: 1.15, stiffness: 80, type: "spring" }
+    }
+  },
+  glide: {
+    offset: 58,
+    scale: 0.984,
+    transition: {
+      opacity: { duration: 0.24, ease: [0.4, 0, 0.2, 1] },
+      scale: { damping: 28, mass: 0.95, stiffness: 150, type: "spring" },
+      x: { damping: 28, mass: 0.95, stiffness: 150, type: "spring" }
+    }
+  },
+  snap: {
+    offset: 38,
+    scale: 0.996,
+    transition: {
+      opacity: { duration: 0.12, ease: [0.2, 0, 0, 1] },
+      scale: { damping: 34, mass: 0.7, stiffness: 420, type: "spring" },
+      x: { damping: 34, mass: 0.7, stiffness: 420, type: "spring" }
+    }
+  }
+};
+var REDUCED_EXPANDED_MEDIA_TRANSITION = {
+  duration: 0.12,
+  ease: "linear"
+};
+var expandedMediaVariants = {
+  center: {
+    opacity: 1,
+    scale: 1,
+    x: 0
+  },
+  enter: ({
+    direction,
+    offset,
+    scale
+  }) => ({
+    opacity: 0,
+    scale: direction === 0 ? 1 : scale,
+    x: direction * offset
+  }),
+  exit: ({
+    direction,
+    offset,
+    scale
+  }) => ({
+    opacity: 0,
+    scale: direction === 0 ? 1 : scale,
+    x: direction * -offset
+  })
+};
+var reducedExpandedMediaVariants = {
+  center: {
+    opacity: 1,
+    x: 0
+  },
+  enter: {
+    opacity: 0,
+    x: 0
+  },
+  exit: {
+    opacity: 0,
+    x: 0
+  }
+};
+function ApertoExpandedMediaStage({
+  direction,
+  index,
+  item,
+  navigationMotion,
+  renderImage,
+  renderVideo
+}) {
+  const ctx = useApertoContext();
+  const preset = NAVIGATION_MOTION_PRESETS[navigationMotion];
+  const transition = ctx.reduceMotion ? REDUCED_EXPANDED_MEDIA_TRANSITION : preset.transition;
+  const variants = ctx.reduceMotion ? reducedExpandedMediaVariants : expandedMediaVariants;
+  const animationCustom = {
+    direction,
+    offset: preset.offset,
+    scale: preset.scale
+  };
+  return /* @__PURE__ */ jsx8(AnimatePresence2, { custom: animationCustom, initial: false, mode: "sync", children: /* @__PURE__ */ jsx8(
+    motion3.div,
+    {
+      animate: "center",
+      custom: animationCustom,
+      "data-navigation-direction": direction,
+      "data-navigation-motion": navigationMotion,
+      "data-slot": "aperto-media-stage",
+      exit: "exit",
+      initial: "enter",
+      transition,
+      variants,
+      children: renderExpandedMedia(item, renderImage, renderVideo)
+    },
+    getMediaKey(item, index)
+  ) });
+}
+
+// src/media-transition.tsx
+import {
+  motion as motion4
+} from "motion/react";
+import { useEffect } from "react";
+import { jsx as jsx9 } from "react/jsx-runtime";
+function rectFromElement(element) {
+  if (!element) {
+    return null;
+  }
+  const rect = element.getBoundingClientRect();
+  return {
+    height: rect.height,
+    left: rect.left,
+    top: rect.top,
+    width: rect.width
+  };
+}
+function rectTarget(rect) {
+  return {
+    height: rect.height,
+    left: rect.left,
+    top: rect.top,
+    width: rect.width
+  };
+}
+function transitionDurationMs(transition) {
+  return typeof transition.duration === "number" ? transition.duration * 1e3 : 450;
+}
+function ApertoMediaTransitionClone({
+  onComplete,
+  transition
+}) {
+  const ctx = useApertoContext();
+  useEffect(() => {
+    if (!transition?.to) {
+      return;
+    }
+    const timer = setTimeout(
+      onComplete,
+      transitionDurationMs(ctx.preset.transition)
+    );
+    return () => clearTimeout(timer);
+  }, [ctx.preset.transition, onComplete, transition]);
+  if (!transition?.to) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx9(
+    motion4.div,
+    {
+      animate: rectTarget(transition.to),
+      "data-slot": "aperto-transition-media",
+      initial: rectTarget(transition.from),
+      style: {
+        borderRadius: "var(--aperto-radius, 0.5rem)",
+        overflow: "hidden",
+        pointerEvents: "none",
+        position: "fixed",
+        willChange: "left, top, width, height",
+        zIndex: 1002
+      },
+      transition: ctx.preset.transition,
+      children: renderTransitionMedia(transition.item)
+    }
+  );
+}
+
+// src/Aperto/ApertoKeyboard.ts
+function shouldIgnoreKeyboardNavigationTarget(target) {
+  if (!(target instanceof Element)) {
+    return false;
+  }
+  return target.isContentEditable || Boolean(
+    target.closest(
+      'input, textarea, select, [contenteditable]:not([contenteditable="false"]), [role="textbox"], audio, video'
+    )
+  );
+}
+
+// src/Aperto/ApertoGroup.tsx
+import { Fragment, jsx as jsx10, jsxs } from "react/jsx-runtime";
+function ApertoGroup({
+  children,
+  classNames,
+  dismissible,
+  index: controlledIndex,
+  initialIndex = 0,
+  media,
+  motion: motionProp,
+  navigationMotion = "glide",
+  onIndexChange,
+  renderImage,
+  renderVideo
+}) {
+  const generatedId = useId2();
+  const [internalIndex, setInternalIndex] = useState3(initialIndex);
+  const [open, setOpen] = useState3(false);
+  const [closing, setClosing] = useState3(false);
+  const [mediaTransition, setMediaTransition] = useState3(null);
+  const [navigationDirection, setNavigationDirection] = useState3(0);
+  const isControlled = controlledIndex !== void 0;
+  const index = isControlled ? controlledIndex : internalIndex;
+  const activeMedia = media[index] ?? media[0];
+  const [layoutSourceIndex, setLayoutSourceIndex] = useState3(index);
+  const expandedMediaRef = useRef(null);
+  const thumbnailRefs = useRef(/* @__PURE__ */ new Map());
+  const sharedLayoutIdForIndex = useCallback3(
+    (nextIndex) => `aperto-group-${generatedId}-${nextIndex}-shared`,
+    [generatedId]
+  );
+  const sharedLayoutId = sharedLayoutIdForIndex(layoutSourceIndex);
+  const measureOpeningTarget = useCallback3((node) => {
+    const targetRect = rectFromElement(node);
+    if (!targetRect) {
+      return;
+    }
+    setMediaTransition((current) => {
+      if (current?.phase !== "opening" || current.to) {
+        return current;
+      }
+      return { ...current, to: targetRect };
+    });
+  }, []);
+  const setExpandedMediaNode = useCallback3(
+    (node) => {
+      expandedMediaRef.current = node;
+      if (node) {
+        measureOpeningTarget(node);
+      }
+    },
+    [measureOpeningTarget]
+  );
+  const registerThumbnail = useCallback3(
+    (thumbIndex, node) => {
+      if (node) {
+        thumbnailRefs.current.set(thumbIndex, node);
+        return;
+      }
+      thumbnailRefs.current.delete(thumbIndex);
+    },
+    []
+  );
+  useLayoutEffect(() => {
+    if (mediaTransition?.phase !== "opening" || mediaTransition.to || !expandedMediaRef.current) {
+      return;
+    }
+    measureOpeningTarget(expandedMediaRef.current);
+  }, [measureOpeningTarget, mediaTransition]);
+  const setIndex = useCallback3(
+    (nextIndex) => {
+      if (!isControlled) {
+        setInternalIndex(nextIndex);
+      }
+      onIndexChange?.(nextIndex);
+    },
+    [isControlled, onIndexChange]
+  );
+  const openAtIndex = useCallback3(
+    (thumbIndex) => {
+      const sourceRect = rectFromElement(
+        thumbnailRefs.current.get(thumbIndex) ?? null
+      );
+      const item = media[thumbIndex];
+      flushSync(() => {
+        setClosing(false);
+        setMediaTransition(
+          sourceRect && item ? { from: sourceRect, item, phase: "opening" } : null
+        );
+        setNavigationDirection(0);
+        setLayoutSourceIndex(thumbIndex);
+        setIndex(thumbIndex);
+        setOpen(true);
+      });
+    },
+    [media, setIndex]
+  );
+  const startClose = useCallback3(() => {
+    if (!open || closing) {
+      return;
+    }
+    const sourceRect = rectFromElement(expandedMediaRef.current);
+    const targetRect = rectFromElement(
+      thumbnailRefs.current.get(index) ?? null
+    );
+    if (!activeMedia || !sourceRect || !targetRect) {
+      setMediaTransition(null);
+      setClosing(false);
+      setOpen(false);
+      return;
+    }
+    flushSync(() => {
+      setClosing(true);
+      setMediaTransition({
+        from: sourceRect,
+        item: activeMedia,
+        phase: "closing",
+        to: targetRect
+      });
+    });
+  }, [activeMedia, closing, index, open]);
+  const handleMediaTransitionComplete = useCallback3(() => {
+    if (mediaTransition?.phase === "closing") {
+      setOpen(false);
+      setClosing(false);
+    }
+    setMediaTransition(null);
+  }, [mediaTransition?.phase]);
+  const handleOpenChange = useCallback3(
+    (nextOpen) => {
+      if (nextOpen) {
+        setClosing(false);
+        setOpen(true);
+        return;
+      }
+      startClose();
+    },
+    [startClose]
+  );
+  const value = useMemo2(
+    () => ({
+      classNames,
+      index,
+      media,
+      open,
+      openAtIndex,
+      registerThumbnail,
+      renderImage,
+      renderVideo,
+      setIndex,
+      sharedLayoutId,
+      sharedLayoutIdForIndex
+    }),
+    [
+      classNames,
+      index,
+      media,
+      open,
+      openAtIndex,
+      registerThumbnail,
+      renderImage,
+      renderVideo,
+      setIndex,
+      sharedLayoutId,
+      sharedLayoutIdForIndex
+    ]
+  );
+  const hasNavigation = media.length > 1;
+  const navigateToIndex = useCallback3(
+    (nextIndex, direction) => {
+      setNavigationDirection(direction);
+      setLayoutSourceIndex(nextIndex);
+      setIndex(nextIndex);
+    },
+    [setIndex]
+  );
+  const goToPrevious = useCallback3(() => {
+    navigateToIndex((index - 1 + media.length) % media.length, -1);
+  }, [index, media.length, navigateToIndex]);
+  const goToNext = useCallback3(() => {
+    navigateToIndex((index + 1) % media.length, 1);
+  }, [index, media.length, navigateToIndex]);
+  const handleContentKeyDown = useCallback3(
+    (event) => {
+      if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey || shouldIgnoreKeyboardNavigationTarget(event.target)) {
+        return;
+      }
+      if (event.key === "ArrowLeft") {
+        event.preventDefault();
+        goToPrevious();
+      }
+      if (event.key === "ArrowRight") {
+        event.preventDefault();
+        goToNext();
+      }
+    },
+    [goToNext, goToPrevious]
+  );
+  return /* @__PURE__ */ jsx10(ApertoGroupContext.Provider, { value, children: /* @__PURE__ */ jsxs(
+    ApertoRoot,
+    {
+      dismissible,
+      motion: motionProp,
+      onOpenChange: handleOpenChange,
+      open,
+      children: [
+        children,
+        activeMedia ? /* @__PURE__ */ jsxs(ApertoPortal, { children: [
+          /* @__PURE__ */ jsx10(ApertoOverlay, { className: classNames?.overlay, fadeOut: closing }),
+          /* @__PURE__ */ jsxs(
+            ApertoContent,
+            {
+              className: classNames?.content,
+              "data-aperto-transition": mediaTransition?.phase,
+              onKeyDown: hasNavigation ? handleContentKeyDown : void 0,
+              sharedLayoutId: false,
+              ...getDescriptionProps(activeMedia),
+              children: [
+                /* @__PURE__ */ jsxs("div", { "data-slot": "aperto-media", ref: setExpandedMediaNode, children: [
+                  /* @__PURE__ */ jsx10(
+                    ApertoExpandedMediaStage,
+                    {
+                      direction: navigationDirection,
+                      index,
+                      item: activeMedia,
+                      navigationMotion,
+                      renderImage,
+                      renderVideo
+                    }
+                  ),
+                  hasNavigation ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx10(
+                      "button",
+                      {
+                        "aria-label": "Previous media",
+                        className: classNames?.previousButton,
+                        "data-slot": "aperto-previous-button",
+                        onClick: goToPrevious,
+                        type: "button",
+                        children: /* @__PURE__ */ jsx10(
+                          ChevronLeft,
+                          {
+                            "aria-hidden": "true",
+                            size: 18,
+                            strokeWidth: 2
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsx10(
+                      "button",
+                      {
+                        "aria-label": "Next media",
+                        className: classNames?.nextButton,
+                        "data-slot": "aperto-next-button",
+                        onClick: goToNext,
+                        type: "button",
+                        children: /* @__PURE__ */ jsx10(
+                          ChevronRight,
+                          {
+                            "aria-hidden": "true",
+                            size: 18,
+                            strokeWidth: 2
+                          }
+                        )
+                      }
+                    )
+                  ] }) : null
+                ] }),
+                /* @__PURE__ */ jsx10(ApertoTitle, { children: activeMedia.title ?? getMediaLabel(activeMedia) }),
+                activeMedia.description ? /* @__PURE__ */ jsx10(ApertoDescription, { children: activeMedia.description }) : null,
+                hasNavigation ? /* @__PURE__ */ jsxs("div", { className: classNames?.counter, "data-slot": "aperto-counter", children: [
+                  index + 1,
+                  " / ",
+                  media.length
+                ] }) : null,
+                /* @__PURE__ */ jsx10(
+                  "button",
+                  {
+                    "aria-label": "Close",
+                    className: classNames?.closeButton,
+                    "data-slot": "aperto-close",
+                    onClick: startClose,
+                    type: "button",
+                    children: /* @__PURE__ */ jsx10(X, { "aria-hidden": "true", size: 17, strokeWidth: 2 })
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx10(
+            ApertoMediaTransitionClone,
+            {
+              onComplete: handleMediaTransitionComplete,
+              transition: mediaTransition
+            }
+          )
+        ] }) : null
+      ]
+    }
+  ) });
+}
+
+// src/aperto-close.tsx
+import * as Dialog7 from "@radix-ui/react-dialog";
+import { X as X2 } from "lucide-react";
+import { forwardRef as forwardRef5 } from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var ApertoClose = forwardRef5(({ children, ...props }, ref) => {
+  return /* @__PURE__ */ jsx11(Dialog7.Close, { "data-slot": "aperto-close", ref, ...props, children: children ?? /* @__PURE__ */ jsx11(X2, { "aria-hidden": "true", size: 17, strokeWidth: 2 }) });
+});
+ApertoClose.displayName = "ApertoClose";
+
+// src/aperto-trigger.tsx
+import * as Dialog8 from "@radix-ui/react-dialog";
+import { motion as motion5 } from "motion/react";
+import {
+  forwardRef as forwardRef6,
+  useCallback as useCallback4,
+  useEffect as useEffect2,
+  useState as useState4
+} from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var TRIGGER_OPEN_Z_INDEX = 1e3;
+var ApertoTrigger = forwardRef6(
+  ({ active, children, motion: motionOverride, sharedLayoutId, ...props }, ref) => {
+    const ctx = useApertoContext();
+    const shouldRaise = ctx.open && (active ?? true);
+    const [zIndex, setZIndex] = useState4(
+      shouldRaise ? TRIGGER_OPEN_Z_INDEX : 0
+    );
+    useEffect2(() => {
+      if (shouldRaise) {
+        setZIndex(TRIGGER_OPEN_Z_INDEX);
+      } else if (ctx.open) {
+        setZIndex(0);
+      }
+    }, [ctx.open, shouldRaise]);
+    const handleLayoutAnimationComplete = useCallback4(() => {
+      if (!shouldRaise) {
+        setZIndex(0);
+      }
+    }, [shouldRaise]);
+    const resolved = resolvePreset(
+      "trigger",
+      motionOverride,
+      ctx.presetName,
+      ctx.variants,
+      ctx.reduceMotion
+    );
+    const layoutId = sharedLayoutId === false ? void 0 : sharedLayoutId ?? `${ctx.layoutId}-shared`;
+    return /* @__PURE__ */ jsx12(Dialog8.Trigger, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsx12(
+      motion5.button,
+      {
+        "data-aperto-active": shouldRaise ? "" : void 0,
+        "data-slot": "aperto-trigger",
+        layout: true,
+        layoutCrossfade: false,
+        layoutId,
+        onLayoutAnimationComplete: handleLayoutAnimationComplete,
+        style: { zIndex },
+        transition: resolved.transition,
+        type: "button",
+        children
+      },
+      layoutId ?? "unshared"
+    ) });
+  }
+);
+ApertoTrigger.displayName = "ApertoTrigger";
+
+// src/Aperto/ApertoSingle.tsx
+import { jsx as jsx13, jsxs as jsxs2 } from "react/jsx-runtime";
+function ApertoSingle({
+  classNames,
+  dismissible,
+  media,
+  renderImage,
+  renderVideo
+}) {
+  const label = getMediaLabel(media);
+  const title = media.title ?? label;
+  return /* @__PURE__ */ jsxs2(ApertoRoot, { dismissible, children: [
+    /* @__PURE__ */ jsx13(
+      ApertoTrigger,
+      {
+        "aria-label": `Open ${label}`,
+        className: classNames?.thumbnail,
+        children: renderThumbnail(media, renderImage, renderVideo)
+      }
+    ),
+    /* @__PURE__ */ jsxs2(ApertoPortal, { children: [
+      /* @__PURE__ */ jsx13(ApertoOverlay, { className: classNames?.overlay }),
+      /* @__PURE__ */ jsxs2(
+        ApertoContent,
+        {
+          className: classNames?.content,
+          ...getDescriptionProps(media),
+          children: [
+            renderExpandedMedia(media, renderImage, renderVideo),
+            /* @__PURE__ */ jsx13(ApertoTitle, { children: title }),
+            media.description ? /* @__PURE__ */ jsx13(ApertoDescription, { children: media.description }) : null,
+            /* @__PURE__ */ jsx13(
+              ApertoClose,
+              {
+                "aria-label": "Close",
+                className: classNames?.closeButton,
+                type: "button"
+              }
+            )
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/Aperto/ApertoThumbnail.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+function ApertoThumbnail({
+  children,
+  className,
+  index
+}) {
+  const group = useApertoGroup();
+  const media = group.media[index];
+  if (!media) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx14(
+    ApertoTrigger,
+    {
+      active: group.index === index,
+      "aria-label": `Open ${getMediaLabel(media)}`,
+      className: className ?? group.classNames?.thumbnail,
+      onClick: () => group.openAtIndex(index),
+      ref: (node) => group.registerThumbnail(index, node),
+      sharedLayoutId: false,
+      children: children ?? renderThumbnail(media, group.renderImage, group.renderVideo)
+    }
+  );
+}
+
+// src/index.ts
+var ApertoPrimitive = {
+  Close: ApertoClose,
+  Content: ApertoContent,
+  Description: ApertoDescription,
+  Overlay: ApertoOverlay,
+  Portal: ApertoPortal,
+  Root: ApertoRoot,
+  Title: ApertoTitle,
+  Trigger: ApertoTrigger
+};
+var Aperto = Object.assign(ApertoSingle, {
+  Group: ApertoGroup,
+  Primitive: ApertoPrimitive,
+  Thumbnail: ApertoThumbnail
+});
+export {
+  Aperto,
+  ApertoClose,
+  ApertoContent,
+  ApertoDescription,
+  ApertoGroup,
+  ApertoOverlay,
+  ApertoPortal,
+  ApertoPrimitive,
+  ApertoRoot,
+  ApertoThumbnail,
+  ApertoTitle,
+  ApertoTrigger,
+  PRESETS,
+  resolvePreset
+};
+//# sourceMappingURL=index.js.map