@patternmode/aperto 0.1.4 → 0.2.1

package/dist/index.js

@@ -1,52 +1,30 @@
 "use client";
 
-// src/Aperto/ApertoGroup.tsx
+// src/Aperto/aperto-group.tsx
 import { ChevronLeft, ChevronRight, X } from "lucide-react";
-import {
-  useCallback as useCallback3,
-  useId as useId2,
-  useLayoutEffect,
-  useMemo as useMemo3,
-  useReducer,
-  useRef
-} from "react";
+import { useId as useId2, useLayoutEffect, useReducer, useRef } from "react";
 
 // src/aperto-content.tsx
 import * as Dialog from "@radix-ui/react-dialog";
-import {
-  m,
-  useMotionValue,
-  useSpring,
-  useTransform
-} from "motion/react";
-import {
-  forwardRef,
-  useCallback,
-  useMemo,
-  useState
-} from "react";
+import { m, useMotionValue, useSpring, useTransform } from "motion/react";
+import { useState } from "react";
 
 // src/context.ts
-import { createContext, useContext } from "react";
+import { createContext, use } from "react";
 var ApertoContext = createContext(null);
-function useApertoContext() {
-  const ctx = useContext(ApertoContext);
+var useApertoContext = () => {
+  const ctx = use(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 calculateResistance = (distance) => 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];
@@ -54,59 +32,44 @@ 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
+import { durations, easings, springs } from "@howells/motion";
 var PRESETS = {
-  snappy: {
-    transition: { ease: easings.snappy, duration: durations.snappy },
+  bouncy: {
     drag: {
-      stiffness: springs.stiff.stiffness,
-      damping: springs.stiff.damping,
-      restDelta: 0.01
+      damping: springs.snappy.damping,
+      restDelta: 0.01,
+      stiffness: springs.snappy.stiffness
+    },
+    transition: {
+      damping: springs.bouncy.damping,
+      mass: springs.bouncy.mass,
+      stiffness: springs.bouncy.stiffness,
+      type: "spring"
     }
   },
+  reduced: {
+    drag: { damping: 50, restDelta: 0.1, stiffness: 1e3 },
+    transition: { duration: 0.01, ease: "linear" }
+  },
   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
+      restDelta: 0.01,
+      stiffness: springs.natural.stiffness
     },
-    drag: {
-      stiffness: springs.snappy.stiffness,
-      damping: springs.snappy.damping,
-      restDelta: 0.01
-    }
+    transition: { duration: durations.moderate, ease: easings.customGentle }
   },
-  reduced: {
-    transition: { ease: "linear", duration: 0.01 },
-    drag: { stiffness: 1e3, damping: 50, restDelta: 0.1 }
+  snappy: {
+    drag: {
+      damping: springs.stiff.damping,
+      restDelta: 0.01,
+      stiffness: springs.stiff.stiffness
+    },
+    transition: { duration: durations.snappy, ease: easings.snappy }
   }
 };
-function resolvePreset(componentType, componentMotion, globalPreset, variants, reduceMotion) {
+var resolvePreset = (componentType, componentMotion, globalPreset, variants, reduceMotion) => {
   if (reduceMotion) {
     return PRESETS.reduced;
   }
@@ -117,203 +80,171 @@ function resolvePreset(componentType, componentMotion, globalPreset, variants, r
     return PRESETS[variants[componentType]];
   }
   return PRESETS[globalPreset];
-}
-function getDragSpring(preset) {
-  return preset.drag;
-}
+};
+var getDragSpring = (preset) => 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(
-      m.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
-      }
-    ) });
+var ApertoContent = ({
+  children,
+  className,
+  motion: motionOverride,
+  placement = "center",
+  ref,
+  sharedLayoutId,
+  style,
+  ...props
+}) => {
+  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 { onOpenChange } = ctx;
+  const handleDrag = (_event, info) => {
+    if (!isDragging) {
+      setIsDragging(true);
+    }
+    const r = resistance.get();
+    dragX.set(info.offset.x * r);
+    dragY.set(info.offset.y * r);
+  };
+  const handleDragEnd = (_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) {
+      onOpenChange(false);
+      return;
+    }
+    dragX.set(0);
+    dragY.set(0);
+  };
+  const placementStyle = placement === "center" ? {
+    left: "50%",
+    top: "50%",
+    translate: "-50% -50%"
+  } : {};
+  let cursor;
+  if (isDragging) {
+    cursor = "grabbing";
+  } else if (isDismissible) {
+    cursor = "grab";
   }
-);
+  const motionStyle = {
+    cursor,
+    opacity: opacityMotion,
+    scale: scaleMotion,
+    x: springX,
+    y: springY,
+    ...placementStyle,
+    ...style
+  };
+  return /* @__PURE__ */ jsx(Dialog.Content, { asChild: true, forceMount: true, ...props, children: /* @__PURE__ */ jsx(
+    m.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 === void 0 || contentLayoutId === "" ? void 0 : true,
+      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 });
-});
+var ApertoDescription = ({ ref, ...props }) => /* @__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);
+import { createContext as createContext2, use as use2 } from "react";
+var ApertoGroupContext = createContext2(null);
+var useApertoGroup = () => {
+  const ctx = use2(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 { m as m2 } from "motion/react";
-import { forwardRef as forwardRef3 } from "react";
+import { easings as easings2 } from "@howells/motion";
 import { jsx as jsx3 } from "react/jsx-runtime";
 var OVERLAY_TRANSITION = {
   duration: 0.3,
-  ease: easings.customGentle
+  ease: easings2.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(
-      m2.div,
-      {
-        animate: { opacity: fadeOut ? 0 : 1 },
-        className,
-        "data-slot": "aperto-overlay",
-        exit: { opacity: 0 },
-        initial: { opacity: 0 },
-        ref,
-        style,
-        transition
-      }
-    ) });
-  }
-);
+var ApertoOverlay = ({ className, fadeOut, ref, style }) => {
+  const ctx = useApertoContext();
+  const transition = ctx.reduceMotion ? OVERLAY_TRANSITION_REDUCED : OVERLAY_TRANSITION;
+  return /* @__PURE__ */ jsx3(Dialog3.Overlay, { asChild: true, forceMount: true, children: /* @__PURE__ */ jsx3(
+    m2.div,
+    {
+      animate: { opacity: fadeOut === true ? 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 }) {
+var 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 {
-  domMax,
-  LayoutGroup,
-  LazyMotion,
-  useReducedMotion
-} from "motion/react";
-import {
-  useCallback as useCallback2,
-  useId,
-  useMemo as useMemo2,
-  useState as useState2
-} from "react";
+import { domMax, LayoutGroup, LazyMotion, useReducedMotion } from "motion/react";
+import { useId, useState as useState2 } from "react";
 import { jsx as jsx5 } from "react/jsx-runtime";
-function ApertoRoot({
+var ApertoRoot = ({
   children,
   dismissible = true,
   layoutId: layoutIdProp,
@@ -322,7 +253,7 @@ function ApertoRoot({
   onOpenChange: controlledOnOpenChange,
   reduceMotion: reduceMotionProp,
   ...dialogProps
-}) {
+}) => {
   const generatedId = useId();
   const layoutId = layoutIdProp ?? `aperto-${generatedId}`;
   const systemReducedMotion = useReducedMotion() ?? false;
@@ -330,67 +261,46 @@ function ApertoRoot({
   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 onOpenChange = (nextOpen) => {
+    if (!isControlled) {
+      setInternalOpen(nextOpen);
+    }
+    controlledOnOpenChange?.(nextOpen);
+  };
   const globalPresetName = typeof motionProp === "string" ? motionProp : "smooth";
   const variants = typeof motionProp === "object" ? motionProp : void 0;
   const presetName = shouldReduce ? "reduced" : globalPresetName;
   const preset = PRESETS[presetName];
-  const contextValue = useMemo2(
-    () => ({
-      dismissible,
-      layoutId,
-      onOpenChange,
-      open,
-      preset,
-      presetName,
-      reduceMotion: shouldReduce,
-      variants
-    }),
-    [
-      dismissible,
-      layoutId,
-      onOpenChange,
-      open,
-      preset,
-      presetName,
-      shouldReduce,
-      variants
-    ]
-  );
+  const contextValue = {
+    dismissible,
+    layoutId,
+    onOpenChange,
+    open,
+    preset,
+    presetName,
+    reduceMotion: shouldReduce,
+    variants
+  };
   return /* @__PURE__ */ jsx5(ApertoContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx5(Dialog5.Root, { onOpenChange, open, ...dialogProps, children: /* @__PURE__ */ jsx5(LazyMotion, { features: domMax, 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 });
-});
+var ApertoTitle = ({ ref, ...props }) => /* @__PURE__ */ jsx6(Dialog6.Title, { "data-slot": "aperto-title", ref, ...props });
 ApertoTitle.displayName = "ApertoTitle";
 
 // src/expanded-media-stage.tsx
-import {
-  AnimatePresence as AnimatePresence2,
-  m as m3
-} from "motion/react";
+import { AnimatePresence as AnimatePresence2, m as m3 } from "motion/react";
 
 // src/media-rendering.tsx
 import { createElement } from "react";
 import { jsx as jsx7 } from "react/jsx-runtime";
-function renderDefaultImage(props) {
+var renderDefaultImage = (props) => {
   const { item: _item, variant: _variant, ...imageProps } = props;
   return createElement("img", { ...imageProps, alt: imageProps.alt ?? "" });
-}
-function renderDefaultVideo(props) {
+};
+var renderDefaultVideo = (props) => {
   const { item: _item, variant, ...videoProps } = props;
   if (variant === "thumbnail") {
     return createElement("img", {
@@ -399,12 +309,12 @@ function renderDefaultVideo(props) {
     });
   }
   return /* @__PURE__ */ jsx7("video", { ...videoProps, children: /* @__PURE__ */ jsx7("track", { kind: "captions", src: props.item.captionsSrc ?? "data:text/vtt," }) });
-}
-function ApertoThumbnailMedia({
+};
+var ApertoThumbnailMedia = ({
   item,
   renderImage,
   renderVideo
-}) {
+}) => {
   if (item.type === "image") {
     const imageProps = {
       alt: "",
@@ -426,12 +336,12 @@ function ApertoThumbnailMedia({
     width: item.width
   };
   return (renderVideo ?? renderDefaultVideo)(videoProps);
-}
-function ApertoExpandedMedia({
+};
+var ApertoExpandedMedia = ({
   item,
   renderImage,
   renderVideo
-}) {
+}) => {
   if (item.type === "image") {
     const imageProps = {
       alt: item.alt,
@@ -454,12 +364,12 @@ function ApertoExpandedMedia({
     width: item.width
   };
   return (renderVideo ?? renderDefaultVideo)(videoProps);
-}
-function ApertoTransitionMedia({
+};
+var ApertoTransitionMedia = ({
   item,
   renderImage,
   renderVideo
-}) {
+}) => {
   if (item.type === "image") {
     const imageProps = {
       alt: item.alt,
@@ -481,18 +391,12 @@ function ApertoTransitionMedia({
     width: item.width
   };
   return (renderVideo ?? renderDefaultVideo)(videoProps);
-}
+};
 
 // src/media-utils.ts
-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 };
-}
+var getMediaLabel = (item) => item.title ?? item.alt ?? "media";
+var getMediaKey = (item, index) => item.id ?? `${item.type}:${item.src}:${index}`;
+var getDescriptionProps = (item) => item.description === void 0 || item.description === "" ? { "aria-describedby": void 0 } : {};
 
 // src/expanded-media-stage.tsx
 import { jsx as jsx8 } from "react/jsx-runtime";
@@ -535,20 +439,12 @@ var expandedMediaVariants = {
     scale: 1,
     x: 0
   },
-  enter: ({
-    direction,
-    offset,
-    scale
-  }) => ({
+  enter: ({ direction, offset, scale }) => ({
     opacity: 0,
     scale: direction === 0 ? 1 : scale,
     x: direction * offset
   }),
-  exit: ({
-    direction,
-    offset,
-    scale
-  }) => ({
+  exit: ({ direction, offset, scale }) => ({
     opacity: 0,
     scale: direction === 0 ? 1 : scale,
     x: direction * -offset
@@ -568,14 +464,14 @@ var reducedExpandedMediaVariants = {
     x: 0
   }
 };
-function ApertoExpandedMediaStage({
+var 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;
@@ -597,25 +493,18 @@ function ApertoExpandedMediaStage({
       initial: "enter",
       transition,
       variants,
-      children: /* @__PURE__ */ jsx8(
-        ApertoExpandedMedia,
-        {
-          item,
-          renderImage,
-          renderVideo
-        }
-      )
+      children: /* @__PURE__ */ jsx8(ApertoExpandedMedia, { item, renderImage, renderVideo })
     },
     getMediaKey(item, index)
   ) });
-}
+};
 
 // src/media-transition.tsx
 import { m as m4 } from "motion/react";
 import { useEffect } from "react";
 
 // src/media-transition-utils.ts
-function rectFromElement(element) {
+var rectFromElement = (element) => {
   if (!element) {
     return null;
   }
@@ -626,39 +515,36 @@ function rectFromElement(element) {
     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;
-}
+};
+var rectTarget = (rect) => ({
+  height: rect.height,
+  left: rect.left,
+  top: rect.top,
+  width: rect.width
+});
+var transitionDurationMs = (transition) => typeof transition.duration === "number" ? transition.duration * 1e3 : 450;
 
 // src/media-transition.tsx
 import { jsx as jsx9 } from "react/jsx-runtime";
-function ApertoMediaTransitionClone({
+var ApertoMediaTransitionClone = ({
   onComplete,
   renderImage,
   renderVideo,
   transition
-}) {
+}) => {
   const ctx = useApertoContext();
   useEffect(() => {
-    if (!transition?.to) {
-      return;
+    let timer;
+    if (transition?.to !== void 0) {
+      timer = setTimeout(onComplete, transitionDurationMs(ctx.preset.transition));
     }
-    const timer = setTimeout(
-      onComplete,
-      transitionDurationMs(ctx.preset.transition)
-    );
-    return () => clearTimeout(timer);
+    return () => {
+      if (timer !== void 0) {
+        clearTimeout(timer);
+      }
+    };
   }, [ctx.preset.transition, onComplete, transition]);
-  if (!transition?.to) {
+  if (transition?.to === void 0) {
     return null;
   }
   return /* @__PURE__ */ jsx9(
@@ -686,24 +572,23 @@ function ApertoMediaTransitionClone({
       )
     }
   );
-}
+};
 
-// src/Aperto/ApertoGroupState.ts
-function getInitialGroupState(initialIndex) {
-  return {
-    closing: false,
-    internalIndex: initialIndex,
-    layoutSourceIndex: initialIndex,
-    mediaTransition: null,
-    navigationDirection: 0,
-    open: false
-  };
-}
-function apertoGroupReducer(state, action) {
+// src/Aperto/aperto-group-state.ts
+var getInitialGroupState = (initialIndex) => ({
+  closing: false,
+  internalIndex: initialIndex,
+  layoutSourceIndex: initialIndex,
+  mediaTransition: null,
+  navigationDirection: 0,
+  open: false
+});
+var apertoGroupReducer = (state, action) => {
   switch (action.type) {
-    case "close-without-transition":
+    case "close-without-transition": {
       return { ...state, closing: false, mediaTransition: null, open: false };
-    case "complete-opening-target":
+    }
+    case "complete-opening-target": {
       if (state.mediaTransition?.phase !== "opening" || state.mediaTransition.to) {
         return state;
       }
@@ -711,21 +596,24 @@ function apertoGroupReducer(state, action) {
         ...state,
         mediaTransition: { ...state.mediaTransition, to: action.rect }
       };
-    case "finish-transition":
+    }
+    case "finish-transition": {
       return {
         ...state,
         closing: false,
         mediaTransition: null,
         open: state.mediaTransition?.phase === "closing" ? false : state.open
       };
-    case "navigate":
+    }
+    case "navigate": {
       return {
         ...state,
         internalIndex: action.index,
         layoutSourceIndex: action.index,
         navigationDirection: action.direction
       };
-    case "open-at-index":
+    }
+    case "open-at-index": {
       return {
         ...state,
         closing: false,
@@ -735,22 +623,29 @@ function apertoGroupReducer(state, action) {
         navigationDirection: 0,
         open: true
       };
-    case "set-index":
+    }
+    case "set-index": {
       return { ...state, internalIndex: action.index };
-    case "set-open":
+    }
+    case "set-open": {
       return action.open ? { ...state, closing: false, open: true } : { ...state, open: false };
-    case "start-close":
+    }
+    case "start-close": {
       return {
         ...state,
         closing: true,
         mediaTransition: action.transition
       };
+    }
+    default: {
+      return state;
+    }
   }
-}
+};
 
-// src/Aperto/ApertoKeyboard.ts
-function shouldIgnoreKeyboardNavigationTarget(target) {
-  if (!(target instanceof Element)) {
+// src/Aperto/aperto-keyboard.ts
+var shouldIgnoreKeyboardNavigationTarget = (target) => {
+  if (!(target instanceof HTMLElement)) {
     return false;
   }
   return target.isContentEditable || Boolean(
@@ -758,444 +653,443 @@ function shouldIgnoreKeyboardNavigationTarget(target) {
       'input, textarea, select, [contenteditable]:not([contenteditable="false"]), [role="textbox"], audio, video'
     )
   );
-}
+};
 
-// src/Aperto/ApertoGroup.tsx
+// src/Aperto/aperto-group.tsx
 import { Fragment, jsx as jsx10, jsxs } from "react/jsx-runtime";
-function ApertoGroup({
-  children,
+var ApertoMediaNavigationButtons = ({
   classNames,
-  dismissible,
-  index: controlledIndex,
-  initialIndex = 0,
+  enabled,
+  onNext,
+  onPrevious
+}) => {
+  if (!enabled) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx10(
+      "button",
+      {
+        "aria-label": "Previous media",
+        className: classNames?.previousButton,
+        "data-slot": "aperto-previous-button",
+        onClick: onPrevious,
+        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: onNext,
+        type: "button",
+        children: /* @__PURE__ */ jsx10(ChevronRight, { "aria-hidden": "true", size: 18, strokeWidth: 2 })
+      }
+    )
+  ] });
+};
+var useThumbnailMap = () => {
+  const thumbnailRefs = useRef(null);
+  thumbnailRefs.current ??= /* @__PURE__ */ new Map();
+  return thumbnailRefs.current;
+};
+var getExpandedMediaStyle = (activeMedia) => {
+  if (activeMedia === void 0 || activeMedia.width === void 0 || activeMedia.height === void 0) {
+    return void 0;
+  }
+  return {
+    "--aperto-expanded-aspect-ratio": `${activeMedia.width} / ${activeMedia.height}`,
+    "--aperto-expanded-aspect-ratio-height": activeMedia.height,
+    "--aperto-expanded-aspect-ratio-width": activeMedia.width
+  };
+};
+var ApertoGroupPortal = ({
+  activeMedia,
+  classNames,
+  expandedMediaStyle,
+  handleCloseAutoFocus,
+  handleContentKeyDown,
+  handleMediaTransitionComplete,
+  hasNavigation,
+  index,
+  mediaLength,
+  navigationDirection,
+  navigationMotion,
+  renderImage,
+  renderVideo,
+  setExpandedMediaNode,
+  startClose,
+  transition,
+  goToNext,
+  goToPrevious
+}) => {
+  if (activeMedia === void 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(ApertoPortal, { children: [
+    /* @__PURE__ */ jsx10(ApertoOverlay, { className: classNames?.overlay, fadeOut: transition?.phase === "closing" }),
+    /* @__PURE__ */ jsxs(
+      ApertoContent,
+      {
+        className: classNames?.content,
+        "data-aperto-transition": transition?.phase,
+        onCloseAutoFocus: handleCloseAutoFocus,
+        onKeyDown: handleContentKeyDown,
+        sharedLayoutId: false,
+        ...getDescriptionProps(activeMedia),
+        children: [
+          /* @__PURE__ */ jsxs("div", { "data-slot": "aperto-media", ref: setExpandedMediaNode, style: expandedMediaStyle, children: [
+            /* @__PURE__ */ jsx10(
+              ApertoExpandedMediaStage,
+              {
+                direction: navigationDirection,
+                index,
+                item: activeMedia,
+                navigationMotion,
+                renderImage,
+                renderVideo
+              }
+            ),
+            /* @__PURE__ */ jsx10(
+              ApertoMediaNavigationButtons,
+              {
+                classNames,
+                enabled: hasNavigation,
+                onNext: goToNext,
+                onPrevious: goToPrevious
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx10(ApertoTitle, { children: activeMedia.title ?? getMediaLabel(activeMedia) }),
+          activeMedia.description === void 0 || activeMedia.description === "" ? null : /* @__PURE__ */ jsx10(ApertoDescription, { children: activeMedia.description }),
+          hasNavigation ? /* @__PURE__ */ jsxs("div", { className: classNames?.counter, "data-slot": "aperto-counter", children: [
+            index + 1,
+            " / ",
+            mediaLength
+          ] }) : 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,
+        renderImage,
+        renderVideo,
+        transition
+      }
+    )
+  ] });
+};
+var useApertoMediaLifecycle = ({
+  activeMedia,
+  dispatch,
+  index,
   media,
-  motion: motionProp,
-  navigationMotion = "glide",
   onIndexChange,
-  renderImage,
-  renderVideo
-}) {
-  const generatedId = useId2();
-  const [state, dispatch] = useReducer(
-    apertoGroupReducer,
-    initialIndex,
-    getInitialGroupState
-  );
-  const isControlled = controlledIndex !== void 0;
-  const index = isControlled ? controlledIndex : state.internalIndex;
-  const activeMedia = media[index] ?? media[0];
+  state
+}) => {
   const expandedMediaRef = useRef(null);
-  const thumbnailRefs = useRef(null);
-  if (thumbnailRefs.current === null) {
-    thumbnailRefs.current = /* @__PURE__ */ new Map();
-  }
-  const thumbnailMap = thumbnailRefs.current;
-  const sharedLayoutIdForIndex = useCallback3(
-    (nextIndex) => `aperto-group-${generatedId}-${nextIndex}-shared`,
-    [generatedId]
-  );
-  const sharedLayoutId = sharedLayoutIdForIndex(state.layoutSourceIndex);
-  const measureOpeningTarget = useCallback3((node) => {
+  const thumbnailMap = useThumbnailMap();
+  const setExpandedMediaNode = (node) => {
+    expandedMediaRef.current = node;
+    if (node === null) {
+      return;
+    }
     const targetRect = rectFromElement(node);
-    if (!targetRect) {
+    if (targetRect !== null) {
+      dispatch({ rect: targetRect, type: "complete-opening-target" });
+    }
+  };
+  const registerThumbnail = (thumbIndex, node) => {
+    if (node !== null) {
+      thumbnailMap.set(thumbIndex, node);
       return;
     }
-    dispatch({ rect: targetRect, type: "complete-opening-target" });
-  }, []);
-  const setExpandedMediaNode = useCallback3(
-    (node) => {
-      expandedMediaRef.current = node;
-      if (node) {
-        measureOpeningTarget(node);
-      }
-    },
-    [measureOpeningTarget]
-  );
-  const registerThumbnail = useCallback3(
-    (thumbIndex, node) => {
-      if (node) {
-        thumbnailMap.set(thumbIndex, node);
-        return;
-      }
-      thumbnailMap.delete(thumbIndex);
-    },
-    [thumbnailMap]
-  );
+    thumbnailMap.delete(thumbIndex);
+  };
   useLayoutEffect(() => {
-    if (state.mediaTransition?.phase !== "opening" || state.mediaTransition.to || !expandedMediaRef.current) {
+    if (state.mediaTransition?.phase !== "opening" || state.mediaTransition.to !== void 0 || expandedMediaRef.current === null) {
       return;
     }
-    measureOpeningTarget(expandedMediaRef.current);
-  }, [measureOpeningTarget, state.mediaTransition]);
-  const setIndex = useCallback3(
-    (nextIndex) => {
-      if (!isControlled) {
-        dispatch({ index: nextIndex, type: "set-index" });
-      }
-      onIndexChange?.(nextIndex);
-    },
-    [isControlled, onIndexChange]
-  );
-  const openAtIndex = useCallback3(
-    (thumbIndex) => {
-      const sourceRect = rectFromElement(thumbnailMap.get(thumbIndex) ?? null);
-      const item = media[thumbIndex];
-      const transition = sourceRect && item ? { from: sourceRect, item, phase: "opening" } : null;
-      dispatch({ index: thumbIndex, transition, type: "open-at-index" });
-      onIndexChange?.(thumbIndex);
-    },
-    [media, onIndexChange, thumbnailMap]
-  );
-  const startClose = useCallback3(() => {
+    const targetRect = rectFromElement(expandedMediaRef.current);
+    if (targetRect !== null) {
+      dispatch({ rect: targetRect, type: "complete-opening-target" });
+    }
+  }, [dispatch, state.mediaTransition]);
+  const openAtIndex = (thumbIndex) => {
+    const sourceRect = rectFromElement(thumbnailMap.get(thumbIndex) ?? null);
+    const item = media[thumbIndex] ?? null;
+    const transition = sourceRect === null || item === null ? null : { from: sourceRect, item, phase: "opening" };
+    dispatch({ index: thumbIndex, transition, type: "open-at-index" });
+    onIndexChange?.(thumbIndex);
+  };
+  const startClose = () => {
     if (!state.open || state.closing) {
       return;
     }
     const sourceRect = rectFromElement(expandedMediaRef.current);
     const targetRect = rectFromElement(thumbnailMap.get(index) ?? null);
-    if (!activeMedia || !sourceRect || !targetRect) {
+    if (activeMedia === void 0 || sourceRect === null || targetRect === null) {
       dispatch({ type: "close-without-transition" });
       return;
     }
     dispatch({
-      transition: {
-        from: sourceRect,
-        item: activeMedia,
-        phase: "closing",
-        to: targetRect
-      },
+      transition: { from: sourceRect, item: activeMedia, phase: "closing", to: targetRect },
       type: "start-close"
     });
-  }, [activeMedia, index, state.closing, state.open, thumbnailMap]);
-  const handleCloseAutoFocus = useCallback3(
-    (event) => {
-      event.preventDefault();
-      thumbnailMap.get(index)?.focus({ preventScroll: true });
-    },
-    [index, thumbnailMap]
-  );
-  const handleMediaTransitionComplete = useCallback3(() => {
+  };
+  const handleCloseAutoFocus = (event) => {
+    event.preventDefault();
+    thumbnailMap.get(index)?.focus({ preventScroll: true });
+  };
+  return { handleCloseAutoFocus, openAtIndex, registerThumbnail, setExpandedMediaNode, startClose };
+};
+var useApertoGroupController = ({
+  classNames,
+  index: controlledIndex,
+  initialIndex = 0,
+  media,
+  onIndexChange,
+  renderImage,
+  renderVideo
+}) => {
+  const generatedId = useId2();
+  const [state, dispatch] = useReducer(apertoGroupReducer, initialIndex, getInitialGroupState);
+  const isControlled = controlledIndex !== void 0;
+  const index = isControlled ? controlledIndex : state.internalIndex;
+  const activeMedia = media[index] ?? media[0];
+  const lifecycle = useApertoMediaLifecycle({
+    activeMedia,
+    dispatch,
+    index,
+    media,
+    onIndexChange,
+    state
+  });
+  const sharedLayoutIdForIndex = (nextIndex) => `aperto-group-${generatedId}-${nextIndex}-shared`;
+  const sharedLayoutId = sharedLayoutIdForIndex(state.layoutSourceIndex);
+  const setIndex = (nextIndex) => {
+    if (!isControlled) {
+      dispatch({ index: nextIndex, type: "set-index" });
+    }
+    onIndexChange?.(nextIndex);
+  };
+  const handleMediaTransitionComplete = () => {
     dispatch({ type: "finish-transition" });
-  }, []);
-  const handleOpenChange = useCallback3(
-    (nextOpen) => {
-      if (nextOpen) {
-        dispatch({ open: true, type: "set-open" });
-        return;
-      }
-      startClose();
-    },
-    [startClose]
-  );
-  const value = useMemo3(
-    () => ({
-      classNames,
-      index,
-      media,
-      open: state.open,
-      openAtIndex,
-      registerThumbnail,
-      renderImage,
-      renderVideo,
-      setIndex,
-      sharedLayoutId,
-      sharedLayoutIdForIndex
-    }),
-    [
-      classNames,
-      index,
-      media,
-      state.open,
-      openAtIndex,
-      registerThumbnail,
-      renderImage,
-      renderVideo,
-      setIndex,
-      sharedLayoutId,
-      sharedLayoutIdForIndex
-    ]
-  );
+  };
+  const handleOpenChange = (nextOpen) => {
+    if (nextOpen) {
+      dispatch({ open: true, type: "set-open" });
+      return;
+    }
+    lifecycle.startClose();
+  };
+  const value = {
+    classNames,
+    index,
+    media,
+    open: state.open,
+    openAtIndex: lifecycle.openAtIndex,
+    registerThumbnail: lifecycle.registerThumbnail,
+    renderImage,
+    renderVideo,
+    setIndex,
+    sharedLayoutId,
+    sharedLayoutIdForIndex
+  };
   const hasNavigation = media.length > 1;
-  const navigateToIndex = useCallback3(
-    (nextIndex, direction) => {
-      dispatch({ direction, index: nextIndex, type: "navigate" });
-      onIndexChange?.(nextIndex);
-    },
-    [onIndexChange]
-  );
-  const goToPrevious = useCallback3(() => {
+  const navigateToIndex = (nextIndex, direction) => {
+    dispatch({ direction, index: nextIndex, type: "navigate" });
+    onIndexChange?.(nextIndex);
+  };
+  const goToPrevious = () => {
     navigateToIndex((index - 1 + media.length) % media.length, -1);
-  }, [index, media.length, navigateToIndex]);
-  const goToNext = useCallback3(() => {
+  };
+  const goToNext = () => {
     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]
-  );
-  const expandedMediaStyle = useMemo3(() => {
-    if (!activeMedia?.width || !activeMedia.height) {
-      return void 0;
+  };
+  const handleContentKeyDown = (event) => {
+    if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey || shouldIgnoreKeyboardNavigationTarget(event.target)) {
+      return;
     }
-    return {
-      "--aperto-expanded-aspect-ratio": `${activeMedia.width} / ${activeMedia.height}`,
-      "--aperto-expanded-aspect-ratio-height": activeMedia.height,
-      "--aperto-expanded-aspect-ratio-width": activeMedia.width
-    };
-  }, [activeMedia?.height, activeMedia?.width]);
-  return /* @__PURE__ */ jsx10(ApertoGroupContext.Provider, { value, children: /* @__PURE__ */ jsxs(
+    if (event.key === "ArrowLeft") {
+      event.preventDefault();
+      goToPrevious();
+    }
+    if (event.key === "ArrowRight") {
+      event.preventDefault();
+      goToNext();
+    }
+  };
+  const expandedMediaStyle = getExpandedMediaStyle(activeMedia);
+  return {
+    activeMedia,
+    expandedMediaStyle,
+    goToNext,
+    goToPrevious,
+    handleCloseAutoFocus: lifecycle.handleCloseAutoFocus,
+    handleContentKeyDown,
+    handleMediaTransitionComplete,
+    handleOpenChange,
+    hasNavigation,
+    index,
+    setExpandedMediaNode: lifecycle.setExpandedMediaNode,
+    startClose: lifecycle.startClose,
+    state,
+    value
+  };
+};
+var ApertoGroup = ({
+  children,
+  classNames,
+  dismissible,
+  index,
+  initialIndex,
+  media,
+  motion: motionProp,
+  navigationMotion = "glide",
+  onIndexChange,
+  renderImage,
+  renderVideo
+}) => {
+  const controller = useApertoGroupController({
+    classNames,
+    index,
+    initialIndex,
+    media,
+    onIndexChange,
+    renderImage,
+    renderVideo
+  });
+  return /* @__PURE__ */ jsx10(ApertoGroupContext.Provider, { value: controller.value, children: /* @__PURE__ */ jsxs(
     ApertoRoot,
     {
       dismissible,
       motion: motionProp,
-      onOpenChange: handleOpenChange,
-      open: state.open,
+      onOpenChange: controller.handleOpenChange,
+      open: controller.state.open,
       children: [
         children,
-        activeMedia ? /* @__PURE__ */ jsxs(ApertoPortal, { children: [
-          /* @__PURE__ */ jsx10(
-            ApertoOverlay,
-            {
-              className: classNames?.overlay,
-              fadeOut: state.closing
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            ApertoContent,
-            {
-              className: classNames?.content,
-              "data-aperto-transition": state.mediaTransition?.phase,
-              onCloseAutoFocus: handleCloseAutoFocus,
-              onKeyDown: hasNavigation ? handleContentKeyDown : void 0,
-              sharedLayoutId: false,
-              ...getDescriptionProps(activeMedia),
-              children: [
-                /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    "data-slot": "aperto-media",
-                    ref: setExpandedMediaNode,
-                    style: expandedMediaStyle,
-                    children: [
-                      /* @__PURE__ */ jsx10(
-                        ApertoExpandedMediaStage,
-                        {
-                          direction: state.navigationDirection,
-                          index,
-                          item: activeMedia,
-                          navigationMotion,
-                          renderImage,
-                          renderVideo
-                        }
-                      ),
-                      /* @__PURE__ */ jsx10(
-                        ApertoMediaNavigationButtons,
-                        {
-                          classNames,
-                          enabled: hasNavigation,
-                          onNext: goToNext,
-                          onPrevious: goToPrevious
-                        }
-                      )
-                    ]
-                  }
-                ),
-                /* @__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,
-              renderImage,
-              renderVideo,
-              transition: state.mediaTransition
-            }
-          )
-        ] }) : null
+        /* @__PURE__ */ jsx10(
+          ApertoGroupPortal,
+          {
+            activeMedia: controller.activeMedia,
+            classNames,
+            expandedMediaStyle: controller.expandedMediaStyle,
+            goToNext: controller.goToNext,
+            goToPrevious: controller.goToPrevious,
+            handleCloseAutoFocus: controller.handleCloseAutoFocus,
+            handleContentKeyDown: controller.hasNavigation ? controller.handleContentKeyDown : void 0,
+            handleMediaTransitionComplete: controller.handleMediaTransitionComplete,
+            hasNavigation: controller.hasNavigation,
+            index: controller.index,
+            mediaLength: media.length,
+            navigationDirection: controller.state.navigationDirection,
+            navigationMotion,
+            renderImage,
+            renderVideo,
+            setExpandedMediaNode: controller.setExpandedMediaNode,
+            startClose: controller.startClose,
+            transition: controller.state.mediaTransition
+          }
+        )
       ]
     }
   ) });
-}
-function ApertoMediaNavigationButtons({
-  classNames,
-  enabled,
-  onNext,
-  onPrevious
-}) {
-  if (!enabled) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx10(
-      "button",
-      {
-        "aria-label": "Previous media",
-        className: classNames?.previousButton,
-        "data-slot": "aperto-previous-button",
-        onClick: onPrevious,
-        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: onNext,
-        type: "button",
-        children: /* @__PURE__ */ jsx10(ChevronRight, { "aria-hidden": "true", size: 18, strokeWidth: 2 })
-      }
-    )
-  ] });
-}
+};
 
 // 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 }) });
-});
+var ApertoClose = ({ children, ref, ...props }) => /* @__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 { m as m5 } from "motion/react";
-import { forwardRef as forwardRef6 } 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 = shouldRaise ? TRIGGER_OPEN_Z_INDEX : 0;
-    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(
-      m5.button,
-      {
-        "data-aperto-active": shouldRaise ? "" : void 0,
-        "data-slot": "aperto-trigger",
-        layout: true,
-        layoutCrossfade: false,
-        layoutId,
-        style: { zIndex },
-        transition: resolved.transition,
-        type: "button",
-        children
-      },
-      layoutId ?? "unshared"
-    ) });
-  }
-);
+var ApertoTrigger = ({
+  active,
+  children,
+  motion: motionOverride,
+  ref,
+  sharedLayoutId,
+  ...props
+}) => {
+  const ctx = useApertoContext();
+  const shouldRaise = ctx.open && (active ?? true);
+  const zIndex = shouldRaise ? TRIGGER_OPEN_Z_INDEX : 0;
+  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(
+    m5.button,
+    {
+      "data-aperto-active": shouldRaise ? "" : void 0,
+      "data-slot": "aperto-trigger",
+      layout: true,
+      layoutCrossfade: false,
+      layoutId,
+      style: { zIndex },
+      transition: resolved.transition,
+      type: "button",
+      children
+    },
+    layoutId ?? "unshared"
+  ) });
+};
 ApertoTrigger.displayName = "ApertoTrigger";
 
-// src/Aperto/ApertoSingle.tsx
+// src/Aperto/aperto-single.tsx
 import { jsx as jsx13, jsxs as jsxs2 } from "react/jsx-runtime";
-function ApertoSingle({
+var 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: /* @__PURE__ */ jsx13(
-          ApertoThumbnailMedia,
-          {
-            item: media,
-            renderImage,
-            renderVideo
-          }
-        )
-      }
-    ),
+    /* @__PURE__ */ jsx13(ApertoTrigger, { "aria-label": `Open ${label}`, className: classNames?.thumbnail, children: /* @__PURE__ */ jsx13(ApertoThumbnailMedia, { item: media, renderImage, renderVideo }) }),
     /* @__PURE__ */ jsxs2(ApertoPortal, { children: [
       /* @__PURE__ */ jsx13(ApertoOverlay, { className: classNames?.overlay }),
-      /* @__PURE__ */ jsxs2(
-        ApertoContent,
-        {
-          className: classNames?.content,
-          ...getDescriptionProps(media),
-          children: [
-            /* @__PURE__ */ jsx13(
-              ApertoExpandedMedia,
-              {
-                item: 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"
-              }
-            )
-          ]
-        }
-      )
+      /* @__PURE__ */ jsxs2(ApertoContent, { className: classNames?.content, ...getDescriptionProps(media), children: [
+        /* @__PURE__ */ jsx13(ApertoExpandedMedia, { item: media, renderImage, renderVideo }),
+        /* @__PURE__ */ jsx13(ApertoTitle, { children: title }),
+        media.description === void 0 || media.description === "" ? null : /* @__PURE__ */ jsx13(ApertoDescription, { children: media.description }),
+        /* @__PURE__ */ jsx13(ApertoClose, { "aria-label": "Close", className: classNames?.closeButton, type: "button" })
+      ] })
     ] })
   ] });
-}
+};
 
-// src/Aperto/ApertoThumbnail.tsx
+// src/Aperto/aperto-thumbnail.tsx
 import { jsx as jsx14 } from "react/jsx-runtime";
-function ApertoThumbnail({
-  children,
-  className,
-  index
-}) {
+var ApertoThumbnail = ({ children, className, index }) => {
   const group = useApertoGroup();
   const media = group.media[index];
   if (!media) {
@@ -1207,8 +1101,12 @@ function ApertoThumbnail({
       active: group.index === index,
       "aria-label": `Open ${getMediaLabel(media)}`,
       className: className ?? group.classNames?.thumbnail,
-      onClick: () => group.openAtIndex(index),
-      ref: (node) => group.registerThumbnail(index, node),
+      onClick: () => {
+        group.openAtIndex(index);
+      },
+      ref: (node) => {
+        group.registerThumbnail(index, node);
+      },
       sharedLayoutId: false,
       children: children ?? /* @__PURE__ */ jsx14(
         ApertoThumbnailMedia,
@@ -1220,7 +1118,7 @@ function ApertoThumbnail({
       )
     }
   );
-}
+};
 
 // src/index.ts
 var ApertoPrimitive = {