motion-presets-kit 0.1.0

package/dist/index.cjs

@@ -0,0 +1,890 @@
+'use strict';
+
+var zod = require('zod');
+var react$1 = require('motion/react');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/schemas/counter.ts
+var counterOptionsSchema = zod.z.object({
+  from: zod.z.number().default(0),
+  to: zod.z.number().default(100),
+  decimals: zod.z.number().int().min(0).default(0),
+  prefix: zod.z.string().default(""),
+  suffix: zod.z.string().default(""),
+  separator: zod.z.string().default(","),
+  format: zod.z.custom(
+    (value) => typeof value === "function"
+  ).optional(),
+  duration: zod.z.number().default(1),
+  reducedMotion: zod.z.boolean().default(true)
+});
+var dragConstraintsSchema = zod.z.object({
+  top: zod.z.number().optional(),
+  right: zod.z.number().optional(),
+  bottom: zod.z.number().optional(),
+  left: zod.z.number().optional()
+});
+var draggableOptionsSchema = zod.z.object({
+  axis: zod.z.enum(["x", "y", "both"]).default("both"),
+  bounds: zod.z.union([zod.z.literal("parent"), zod.z.literal("document"), dragConstraintsSchema]).optional(),
+  snapToGrid: zod.z.tuple([zod.z.number(), zod.z.number()]).optional(),
+  dragElastic: zod.z.union([zod.z.number(), zod.z.boolean()]).optional(),
+  dragMomentum: zod.z.boolean().optional()
+});
+var marqueeOptionsSchema = zod.z.object({
+  speed: zod.z.number().positive().default(20),
+  direction: zod.z.enum(["left", "right"]).default("left"),
+  pauseOnHover: zod.z.boolean().default(true),
+  gap: zod.z.string().default("2rem"),
+  reducedMotion: zod.z.boolean().default(true)
+});
+var textAnimateOptionsSchema = zod.z.object({
+  by: zod.z.enum(["word", "letter"]).default("word"),
+  type: zod.z.enum([
+    "blurIn",
+    "slideUp",
+    "slideDown",
+    "slideLeft",
+    "slideRight",
+    "typeWriter"
+  ]).default("slideUp"),
+  duration: zod.z.number().default(0.4),
+  startDelay: zod.z.number().default(0),
+  highlight: zod.z.array(zod.z.string()).default([]),
+  highlightClassName: zod.z.string().default(""),
+  reducedMotion: zod.z.boolean().default(true)
+});
+
+// src/components/counter-utils.ts
+function formatCounterValue(value, options = {}) {
+  const {
+    decimals = 0,
+    prefix = "",
+    suffix = "",
+    separator = ",",
+    format
+  } = options;
+  if (format) return `${prefix}${format(value)}${suffix}`;
+  const fixed = Math.abs(value).toFixed(decimals);
+  const [integer = "", fraction] = fixed.split(".");
+  const requestGrouped = separator !== "" && separator !== "none";
+  const grouped = requestGrouped ? integer.replace(/\B(?=(\d{3})+(?!\d))/g, separator) : integer;
+  const sign = value < 0 ? "-" : "";
+  const decimalPart = fraction ? `.${fraction}` : "";
+  return `${prefix}${sign}${grouped}${decimalPart}${suffix}`;
+}
+
+// src/utils/warn.ts
+var PREFIX = "[motion-presets-kit]";
+function isProduction() {
+  return typeof process !== "undefined" && !!process.env && process.env.NODE_ENV === "production";
+}
+function warn(message) {
+  if (isProduction()) return;
+  if (typeof console !== "undefined" && typeof console.warn === "function") {
+    console.warn(`${PREFIX} ${message}`);
+  }
+}
+
+// src/components/draggable-utils.ts
+function hasInvalidBounds(bounds) {
+  if (bounds.top !== void 0 && bounds.bottom !== void 0 && bounds.top > bounds.bottom) {
+    return true;
+  }
+  if (bounds.left !== void 0 && bounds.right !== void 0 && bounds.left > bounds.right) {
+    return true;
+  }
+  return false;
+}
+function resolveDragConstraints(bounds) {
+  if (bounds === void 0) return null;
+  if (bounds === "parent" || bounds === "document") return bounds;
+  return hasInvalidBounds(bounds) ? null : bounds;
+}
+function getDragConstraintsProp(resolved, containerRef) {
+  if (resolved === "parent" || resolved === "document") return containerRef;
+  return resolved ?? void 0;
+}
+function buildSnapModifier(snapToGrid) {
+  if (!snapToGrid) return void 0;
+  const [gridX, gridY] = snapToGrid;
+  const grid = gridX === 0 ? gridY : gridY === 0 ? gridX : gridX;
+  if (grid === 0) return void 0;
+  return (value) => Math.round(value / grid) * grid;
+}
+function Draggable({
+  children,
+  axis = "both",
+  bounds,
+  snapToGrid,
+  dragElastic,
+  dragMomentum,
+  dragControls,
+  onDragStart,
+  onDrag,
+  onDragEnd,
+  className
+}) {
+  const parsed = draggableOptionsSchema.safeParse({
+    axis,
+    bounds,
+    snapToGrid,
+    dragElastic,
+    dragMomentum
+  });
+  if (!parsed.success) {
+    warn(`Opciones inv\xE1lidas en Draggable: ${parsed.error.message}`);
+  }
+  const data = parsed.success ? parsed.data : draggableOptionsSchema.parse({});
+  if (typeof data.bounds === "object" && data.bounds !== null && hasInvalidBounds(data.bounds)) {
+    warn(
+      "bounds inv\xE1lidos en Draggable (top > bottom o left > right). Se ignoran los l\xEDmites (CL-007)."
+    );
+  }
+  const resolved = resolveDragConstraints(data.bounds);
+  const containerMode = resolved === "parent" || resolved === "document" ? resolved : null;
+  const elementRef = react.useRef(null);
+  const containerRef = react.useRef(null);
+  react.useEffect(() => {
+    const element = elementRef.current;
+    if (!element || containerMode === null) return;
+    containerRef.current = containerMode === "parent" ? element.parentElement : element.ownerDocument?.documentElement ?? null;
+  }, [containerMode]);
+  const drag = data.axis === "both" ? true : data.axis;
+  const dragConstraints = getDragConstraintsProp(resolved, containerRef);
+  const modifyTarget = buildSnapModifier(data.snapToGrid);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react$1.motion.div,
+    {
+      ref: elementRef,
+      drag,
+      dragConstraints,
+      dragElastic: data.dragElastic,
+      dragMomentum: data.dragMomentum,
+      dragTransition: modifyTarget ? { modifyTarget } : void 0,
+      dragControls,
+      onDragStart,
+      onDrag,
+      onDragEnd,
+      className,
+      children
+    }
+  );
+}
+
+// src/utils/reduced-motion.ts
+function shouldReduceMotion(reducedMotion = true) {
+  if (!reducedMotion) return false;
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    return false;
+  }
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+
+// src/components/hooks/useCounter.ts
+function useCounter(ref, options = {}) {
+  const parsed = counterOptionsSchema.safeParse(options);
+  if (!parsed.success) {
+    warn(`Opciones inv\xE1lidas en useCounter: ${parsed.error.message}`);
+  }
+  const config = parsed.success ? parsed.data : counterOptionsSchema.parse({});
+  const { from, to, duration, reducedMotion } = config;
+  const formatOptions = react.useMemo(
+    () => ({
+      decimals: config.decimals,
+      prefix: config.prefix,
+      suffix: config.suffix,
+      separator: config.separator,
+      format: config.format
+    }),
+    [
+      config.decimals,
+      config.prefix,
+      config.suffix,
+      config.separator,
+      config.format
+    ]
+  );
+  const motionValue = react$1.useMotionValue(from);
+  const [value, setValue] = react.useState(from);
+  const writeValue = react.useCallback(
+    (next) => {
+      const element = ref.current;
+      if (element) {
+        element.textContent = formatCounterValue(next, formatOptions);
+      }
+    },
+    [ref, formatOptions]
+  );
+  react$1.useMotionValueEvent(motionValue, "change", (latest) => {
+    setValue(latest);
+    writeValue(latest);
+  });
+  react.useEffect(() => {
+    if (shouldReduceMotion(reducedMotion)) {
+      motionValue.set(to);
+      setValue(to);
+      writeValue(to);
+    }
+  }, [motionValue, to, reducedMotion, writeValue]);
+  const start = react.useCallback(() => {
+    if (shouldReduceMotion(reducedMotion)) {
+      motionValue.set(to);
+      setValue(to);
+      writeValue(to);
+      return;
+    }
+    motionValue.set(from);
+    setValue(from);
+    react$1.animate(motionValue, to, {
+      duration,
+      ease: [0.16, 1, 0.3, 1]
+    });
+  }, [motionValue, from, to, duration, reducedMotion, writeValue]);
+  const reset = react.useCallback(() => {
+    motionValue.set(from);
+    setValue(from);
+    writeValue(from);
+  }, [motionValue, from, writeValue]);
+  return { value, start, reset };
+}
+
+// src/components/marquee-utils.ts
+function buildMarqueeKeyframes(options) {
+  const { id, direction, gap, speed, pauseOnHover } = options;
+  const animationName = `motion-marquee-${id}`;
+  const listClassName = `motion-marquee-list-${id}`;
+  const trackClassName = `motion-marquee-track-${id}`;
+  const from = direction === "left" ? "0" : `calc(-100% - ${gap})`;
+  const to = direction === "left" ? `calc(-100% - ${gap})` : "0";
+  const css = [
+    `@keyframes ${animationName}{from{transform:translateX(${from})}to{transform:translateX(${to})}}`,
+    `.${listClassName}{display:flex;align-items:center;flex-shrink:0;min-width:100%;gap:${gap};animation:${animationName} ${speed}s linear infinite;will-change:transform;backface-visibility:hidden}`,
+    `.${trackClassName}{display:flex;gap:${gap}}`,
+    pauseOnHover ? `.${trackClassName}:hover .${listClassName}{animation-play-state:paused}` : ""
+  ].filter(Boolean).join("");
+  return { animationName, listClassName, trackClassName, css };
+}
+var MASK_STYLE = {
+  maskImage: "linear-gradient(to right, transparent, black 15%, black 85%, transparent)",
+  WebkitMaskImage: "linear-gradient(to right, transparent, black 15%, black 85%, transparent)"
+};
+var BASE_STYLE = {
+  display: "flex",
+  overflow: "hidden",
+  width: "100%"
+};
+var Marquee = react.memo(function Marquee2({
+  children,
+  speed = 20,
+  direction = "left",
+  pauseOnHover = true,
+  gap = "2rem",
+  className,
+  reducedMotion = true
+}) {
+  const rawId = react.useId();
+  const id = rawId.replace(/[^a-zA-Z0-9_-]/g, "");
+  const duplicateRef = react.useRef(null);
+  react.useEffect(() => {
+    const element = duplicateRef.current;
+    if (element) element.inert = true;
+  }, []);
+  const parsed = marqueeOptionsSchema.safeParse({
+    speed,
+    direction,
+    pauseOnHover,
+    gap,
+    reducedMotion
+  });
+  if (!parsed.success) {
+    warn(`Opciones inv\xE1lidas en Marquee: ${parsed.error.message}`);
+  }
+  const config = parsed.success ? parsed.data : marqueeOptionsSchema.parse({});
+  const keyframes = react.useMemo(
+    () => buildMarqueeKeyframes({
+      id,
+      direction: config.direction,
+      gap: config.gap,
+      speed: config.speed,
+      pauseOnHover: config.pauseOnHover
+    }),
+    [id, config.direction, config.gap, config.speed, config.pauseOnHover]
+  );
+  const paused = shouldReduceMotion(config.reducedMotion);
+  const listStyle = {
+    display: "flex",
+    alignItems: "center",
+    flexShrink: 0,
+    minWidth: "100%",
+    gap: config.gap,
+    ...paused ? {} : {
+      animation: `${keyframes.animationName} ${config.speed}s linear infinite`,
+      willChange: "transform",
+      backfaceVisibility: "hidden"
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("style", { children: keyframes.css }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "section",
+      {
+        "aria-label": "Contenido en desplazamiento continuo",
+        className: className ? `${keyframes.trackClassName} ${className}` : keyframes.trackClassName,
+        style: { ...BASE_STYLE, ...MASK_STYLE },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: keyframes.listClassName, style: listStyle, children }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              ref: duplicateRef,
+              className: keyframes.listClassName,
+              style: listStyle,
+              "aria-hidden": "true",
+              children
+            }
+          )
+        ]
+      }
+    )
+  ] });
+});
+
+// src/utils/easing.ts
+var DEFAULT_EASE = [0.16, 1, 0.3, 1];
+function buildTransition(options) {
+  const { duration, delay, ease, spring, excludeDelay } = options;
+  const base = spring ? { type: "spring", ...spring } : { duration, ease };
+  return excludeDelay ? base : { ...base, delay };
+}
+
+// src/schemas/base.ts
+var EASING_NAMES = /* @__PURE__ */ new Set([
+  "linear",
+  "easeIn",
+  "easeOut",
+  "easeInOut",
+  "circIn",
+  "circOut",
+  "circInOut",
+  "backIn",
+  "backOut",
+  "backInOut",
+  "anticipate"
+]);
+function isEasing(value) {
+  if (typeof value === "function") return true;
+  if (typeof value === "string") return EASING_NAMES.has(value);
+  return Array.isArray(value) && value.length === 4 && value.every((item) => typeof item === "number");
+}
+function isSpringOptions(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+var basePresetSchema = zod.z.object({
+  duration: zod.z.number().default(0.5),
+  delay: zod.z.number().default(0),
+  ease: zod.z.custom(isEasing).default(DEFAULT_EASE),
+  spring: zod.z.custom(isSpringOptions).optional(),
+  excludeDelay: zod.z.boolean().default(false),
+  reducedMotion: zod.z.boolean().default(true)
+});
+
+// src/schemas/fade.ts
+var fadeOptionsSchema = basePresetSchema.extend({
+  direction: zod.z.enum(["up", "down", "left", "right", "none"]).default("up"),
+  distance: zod.z.number().default(60),
+  blur: zod.z.number().default(0),
+  scale: zod.z.number().default(1)
+});
+
+// src/presets/fade.ts
+var FADE_OFFSETS = {
+  up: (distance) => ({ y: distance }),
+  down: (distance) => ({ y: -distance }),
+  left: (distance) => ({ x: distance }),
+  right: (distance) => ({ x: -distance }),
+  none: () => ({})
+};
+function fade(options = {}) {
+  const parsed = fadeOptionsSchema.safeParse(options);
+  if (!parsed.success) {
+    warn(
+      `Opciones inv\xE1lidas en fade(): ${parsed.error.message}. Se usar\xE1n los valores por defecto.`
+    );
+  }
+  const opts = parsed.success ? parsed.data : fadeOptionsSchema.parse({});
+  const {
+    direction,
+    distance,
+    duration,
+    delay,
+    ease,
+    spring,
+    excludeDelay,
+    blur,
+    scale: scale2,
+    reducedMotion
+  } = opts;
+  if (shouldReduceMotion(reducedMotion)) {
+    return {
+      initial: { opacity: 1, x: 0, y: 0 },
+      animate: { opacity: 1, x: 0, y: 0 }
+    };
+  }
+  const transition = buildTransition({
+    duration,
+    delay,
+    ease,
+    spring,
+    excludeDelay
+  });
+  const hasBlur = blur > 0;
+  const initial = {
+    opacity: 0,
+    ...FADE_OFFSETS[direction](distance)
+  };
+  if (scale2 !== 1) initial.scale = scale2;
+  if (hasBlur) initial.filter = `blur(${blur}px)`;
+  const animate2 = {
+    opacity: 1,
+    x: 0,
+    y: 0,
+    willChange: hasBlur ? "transform, opacity, filter" : "transform, opacity",
+    transition
+  };
+  if (scale2 !== 1) animate2.scale = 1;
+  if (hasBlur) animate2.filter = "blur(0px)";
+  return { initial, animate: animate2 };
+}
+var parentVariantsSchema = zod.z.object({
+  delayChildren: zod.z.number().default(0),
+  startDelay: zod.z.number().default(0),
+  reducedMotion: zod.z.boolean().default(true)
+});
+
+// src/presets/parent-variants.ts
+function parentVariants(options = {}) {
+  const parsed = parentVariantsSchema.safeParse(options);
+  if (!parsed.success) {
+    warn(
+      `Opciones inv\xE1lidas en parentVariants(): ${parsed.error.message}. Se usar\xE1n los valores por defecto.`
+    );
+  }
+  const opts = parsed.success ? parsed.data : parentVariantsSchema.parse({});
+  const { delayChildren, startDelay, reducedMotion } = opts;
+  if (shouldReduceMotion(reducedMotion)) {
+    return {
+      initial: { opacity: 1 },
+      animate: { opacity: 1 }
+    };
+  }
+  return {
+    initial: { opacity: 0 },
+    animate: {
+      opacity: 1,
+      transition: {
+        delayChildren: react$1.stagger(delayChildren, { startDelay })
+      }
+    }
+  };
+}
+
+// src/components/text-animate-utils.ts
+var TAG_RE = /<[^>]*>/g;
+var TOKEN_SOURCE = "<[^>]*>|\\s+|[^<\\s]+";
+function tokenize(text) {
+  const tokens = [];
+  const regex = new RegExp(TOKEN_SOURCE, "g");
+  let match = regex.exec(text);
+  while (match !== null) {
+    const value = match[0];
+    if (value.startsWith("<")) tokens.push({ kind: "tag", value });
+    else if (/^\s+$/.test(value)) tokens.push({ kind: "space", value });
+    else tokens.push({ kind: "text", value });
+    match = regex.exec(text);
+  }
+  return tokens;
+}
+function groupWords(tokens) {
+  const units = [];
+  let pending = "";
+  let current = null;
+  const flush = () => {
+    if (current !== null) {
+      units.push(current);
+      current = null;
+    }
+  };
+  for (const token of tokens) {
+    if (token.kind === "space") {
+      flush();
+      continue;
+    }
+    if (token.kind === "tag") {
+      if (current !== null) current += token.value;
+      else pending += token.value;
+      continue;
+    }
+    flush();
+    current = pending + token.value;
+    pending = "";
+  }
+  flush();
+  if (pending) units.push(pending);
+  return units;
+}
+function groupLetters(tokens) {
+  const units = [];
+  let pending = "";
+  for (const token of tokens) {
+    if (token.kind === "space") {
+      for (const char of token.value) units.push(char);
+      continue;
+    }
+    if (token.kind === "tag") {
+      if (token.value.startsWith("</") && units.length > 0) {
+        const last = units.length - 1;
+        units[last] = `${units[last] ?? ""}${token.value}`;
+      } else {
+        pending += token.value;
+      }
+      continue;
+    }
+    const chars = [...token.value];
+    chars.forEach((char, index) => {
+      units.push((index === 0 ? pending : "") + char);
+      pending = "";
+    });
+  }
+  if (pending) units.push(pending);
+  return units;
+}
+function splitText(text, by = "word") {
+  const tokens = tokenize(text);
+  return by === "letter" ? groupLetters(tokens) : groupWords(tokens);
+}
+function getHighlightRanges(text, highlights) {
+  const plain = text.replace(TAG_RE, "");
+  const lower = plain.toLowerCase();
+  const ranges = [];
+  for (const highlight of highlights) {
+    if (!highlight) continue;
+    const needle = highlight.toLowerCase();
+    let from = 0;
+    while (from <= lower.length - needle.length) {
+      const index = lower.indexOf(needle, from);
+      if (index === -1) break;
+      ranges.push([index, index + needle.length]);
+      from = index + needle.length;
+    }
+  }
+  return ranges;
+}
+function isWordHighlighted(word, highlights) {
+  const plain = word.replace(TAG_RE, "").toLowerCase();
+  return highlights.some(
+    (highlight) => highlight !== "" && plain.includes(highlight.toLowerCase())
+  );
+}
+function getAnimationParams(type = "slideUp") {
+  switch (type) {
+    case "blurIn":
+      return { direction: "none", distance: 0, blur: 8 };
+    case "slideDown":
+      return { direction: "down", distance: 20, blur: 4 };
+    case "slideLeft":
+      return { direction: "left", distance: 20, blur: 4 };
+    case "slideRight":
+      return { direction: "right", distance: 20, blur: 4 };
+    case "typeWriter":
+      return { direction: "none", distance: 0, blur: 0 };
+    default:
+      return { direction: "up", distance: 20, blur: 4 };
+  }
+}
+var componentCache = /* @__PURE__ */ new Map();
+function getMotionComponent(tag) {
+  const key = String(tag);
+  let component = componentCache.get(key);
+  if (!component) {
+    component = react$1.motion.create(tag);
+    componentCache.set(key, component);
+  }
+  return component;
+}
+var SPAN_STYLE = { display: "inline-block", whiteSpace: "pre-wrap" };
+var WORD_STYLE = { ...SPAN_STYLE, marginRight: "0.25em" };
+function TextAnimate({
+  text,
+  as = "p",
+  by = "word",
+  type = "slideUp",
+  duration = 0.4,
+  startDelay = 0,
+  highlight = [],
+  highlightClassName = "",
+  reducedMotion = true,
+  ...props
+}) {
+  const parsed = textAnimateOptionsSchema.safeParse({
+    by,
+    type,
+    duration,
+    startDelay,
+    highlight,
+    highlightClassName,
+    reducedMotion
+  });
+  if (!parsed.success) {
+    warn(`Opciones inv\xE1lidas en TextAnimate: ${parsed.error.message}`);
+  }
+  const config = parsed.success ? parsed.data : textAnimateOptionsSchema.parse({});
+  const MotionWrapper = react.useMemo(() => getMotionComponent(as), [as]);
+  const units = react.useMemo(() => splitText(text, config.by), [text, config.by]);
+  const ranges = react.useMemo(
+    () => config.by === "letter" ? getHighlightRanges(text, config.highlight) : [],
+    [text, config.by, config.highlight]
+  );
+  const animationParams = react.useMemo(
+    () => getAnimationParams(config.type),
+    [config.type]
+  );
+  const parent = react.useMemo(
+    () => parentVariants({
+      delayChildren: config.type === "typeWriter" && config.by === "letter" ? 0.05 : 0.08,
+      startDelay: config.startDelay,
+      reducedMotion: config.reducedMotion
+    }),
+    [config.type, config.by, config.startDelay, config.reducedMotion]
+  );
+  const child = react.useMemo(
+    () => fade({
+      ...animationParams,
+      excludeDelay: true,
+      duration: config.type === "typeWriter" ? 0.05 : config.duration,
+      reducedMotion: config.reducedMotion
+    }),
+    [animationParams, config.type, config.duration, config.reducedMotion]
+  );
+  const isWord = config.by === "word";
+  const itemStyle = isWord ? WORD_STYLE : SPAN_STYLE;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    MotionWrapper,
+    {
+      variants: parent,
+      initial: "initial",
+      whileInView: "animate",
+      viewport: { once: true },
+      ...props,
+      children: units.map((unit, index) => {
+        const highlighted = isWord ? isWordHighlighted(unit, config.highlight) : ranges.some(([start, end]) => index >= start && index < end);
+        const hasHtml = /<[^>]*>/.test(unit);
+        const key = `${index}-${unit}`;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          react$1.motion.span,
+          {
+            variants: child,
+            className: highlighted ? config.highlightClassName : void 0,
+            style: itemStyle,
+            ...hasHtml ? { dangerouslySetInnerHTML: { __html: unit } } : { children: unit === "" ? "\xA0" : unit }
+          },
+          key
+        );
+      })
+    }
+  );
+}
+var clipRevealOptionsSchema = basePresetSchema.extend({
+  direction: zod.z.enum(["up", "down", "left", "right"]).default("up"),
+  scale: zod.z.number().optional()
+});
+
+// src/presets/clip-reveal.ts
+var REVEALED_CLIP = "inset(0% 0% 0% 0%)";
+var CLIP_INSETS = {
+  up: "inset(100% 0% 0% 0%)",
+  down: "inset(0% 0% 100% 0%)",
+  left: "inset(0% 100% 0% 0%)",
+  right: "inset(0% 0% 0% 100%)"
+};
+function clipReveal(options = {}) {
+  const parsed = clipRevealOptionsSchema.safeParse(options);
+  if (!parsed.success) {
+    warn(
+      `Opciones inv\xE1lidas en clipReveal(): ${parsed.error.message}. Se usar\xE1n los valores por defecto.`
+    );
+  }
+  const opts = parsed.success ? parsed.data : clipRevealOptionsSchema.parse({});
+  const {
+    direction,
+    scale: scale2,
+    duration,
+    delay,
+    ease,
+    spring,
+    excludeDelay,
+    reducedMotion
+  } = opts;
+  const hasScale = scale2 !== void 0;
+  if (shouldReduceMotion(reducedMotion)) {
+    const final = { clipPath: REVEALED_CLIP };
+    if (hasScale) final.scale = 1;
+    return { initial: final, animate: final };
+  }
+  const transition = buildTransition({
+    duration,
+    delay,
+    ease,
+    spring,
+    excludeDelay
+  });
+  const initial = { clipPath: CLIP_INSETS[direction] };
+  if (hasScale) initial.scale = scale2;
+  const animate2 = {
+    clipPath: REVEALED_CLIP,
+    willChange: hasScale ? "clip-path, transform" : "clip-path",
+    transition
+  };
+  if (hasScale) animate2.scale = 1;
+  return { initial, animate: animate2 };
+}
+var scaleOptionsSchema = basePresetSchema.extend({
+  from: zod.z.number().default(0.8)
+});
+
+// src/presets/scale.ts
+function scale(options = {}) {
+  const parsed = scaleOptionsSchema.safeParse(options);
+  if (!parsed.success) {
+    warn(
+      `Opciones inv\xE1lidas en scale(): ${parsed.error.message}. Se usar\xE1n los valores por defecto.`
+    );
+  }
+  const opts = parsed.success ? parsed.data : scaleOptionsSchema.parse({});
+  const { from, duration, delay, ease, spring, excludeDelay, reducedMotion } = opts;
+  if (shouldReduceMotion(reducedMotion)) {
+    return {
+      initial: { opacity: 1, scale: 1 },
+      animate: { opacity: 1, scale: 1 }
+    };
+  }
+  const transition = buildTransition({
+    duration,
+    delay,
+    ease,
+    spring,
+    excludeDelay
+  });
+  return {
+    initial: { opacity: 0, scale: from },
+    animate: {
+      opacity: 1,
+      scale: 1,
+      willChange: "transform, opacity",
+      transition
+    }
+  };
+}
+var slideOptionsSchema = basePresetSchema.extend({
+  direction: zod.z.enum(["up", "down", "left", "right"]).default("right"),
+  distance: zod.z.number().default(100)
+});
+
+// src/presets/slide.ts
+var SLIDE_AXIS = {
+  up: "y",
+  down: "y",
+  left: "x",
+  right: "x"
+};
+var SLIDE_SIGN = {
+  up: 1,
+  down: -1,
+  left: 1,
+  right: -1
+};
+function slide(options = {}) {
+  const parsed = slideOptionsSchema.safeParse(options);
+  if (!parsed.success) {
+    warn(
+      `Opciones inv\xE1lidas en slide(): ${parsed.error.message}. Se usar\xE1n los valores por defecto.`
+    );
+  }
+  const opts = parsed.success ? parsed.data : slideOptionsSchema.parse({});
+  const {
+    direction,
+    distance,
+    duration,
+    delay,
+    ease,
+    spring,
+    excludeDelay,
+    reducedMotion
+  } = opts;
+  if (shouldReduceMotion(reducedMotion)) {
+    return {
+      initial: { x: 0, y: 0 },
+      animate: { x: 0, y: 0 }
+    };
+  }
+  const transition = buildTransition({
+    duration,
+    delay,
+    ease,
+    spring,
+    excludeDelay
+  });
+  const offset = SLIDE_SIGN[direction] * distance;
+  if (SLIDE_AXIS[direction] === "x") {
+    return {
+      initial: { x: offset },
+      animate: {
+        x: 0,
+        willChange: "transform",
+        transition
+      }
+    };
+  }
+  return {
+    initial: { y: offset },
+    animate: {
+      y: 0,
+      willChange: "transform",
+      transition
+    }
+  };
+}
+
+exports.Draggable = Draggable;
+exports.Marquee = Marquee;
+exports.TextAnimate = TextAnimate;
+exports.basePresetSchema = basePresetSchema;
+exports.buildMarqueeKeyframes = buildMarqueeKeyframes;
+exports.buildSnapModifier = buildSnapModifier;
+exports.clipReveal = clipReveal;
+exports.clipRevealOptionsSchema = clipRevealOptionsSchema;
+exports.counterOptionsSchema = counterOptionsSchema;
+exports.dragConstraintsSchema = dragConstraintsSchema;
+exports.draggableOptionsSchema = draggableOptionsSchema;
+exports.fade = fade;
+exports.fadeOptionsSchema = fadeOptionsSchema;
+exports.formatCounterValue = formatCounterValue;
+exports.getAnimationParams = getAnimationParams;
+exports.getDragConstraintsProp = getDragConstraintsProp;
+exports.getHighlightRanges = getHighlightRanges;
+exports.hasInvalidBounds = hasInvalidBounds;
+exports.isWordHighlighted = isWordHighlighted;
+exports.marqueeOptionsSchema = marqueeOptionsSchema;
+exports.parentVariants = parentVariants;
+exports.parentVariantsSchema = parentVariantsSchema;
+exports.resolveDragConstraints = resolveDragConstraints;
+exports.scale = scale;
+exports.scaleOptionsSchema = scaleOptionsSchema;
+exports.slide = slide;
+exports.slideOptionsSchema = slideOptionsSchema;
+exports.splitText = splitText;
+exports.textAnimateOptionsSchema = textAnimateOptionsSchema;
+exports.useCounter = useCounter;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map