4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T18b8,"use client"; import { AnimationOptions, motion } from "motion/react"; import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useState, } from "react"; import { cn } from "@/lib/utils"; interface SlideUpTextProps { children: React.ReactNode; split?: "words" | "characters" | "lines"; delay?: number; stagger?: number; from?: "first" | "last" | "center"; transition?: AnimationOptions; className?: string; wordClass?: string; charClass?: string; autoStart?: boolean; onStart?: () => void; onComplete?: () => void; inView?: boolean; once?: boolean; } export interface SlideUpTextRef { startAnimation: () => void; reset: () => void; } interface WordObject { characters: string[]; needsSpace: boolean; } const SlideUpText = forwardRef( ( { children, split = "words", delay = 0, stagger = 0.1, from = "first", transition = { type: "tween", ease: [0.625, 0.05, 0, 1], duration: 0.5, }, className, wordClass, charClass, autoStart = true, onStart, onComplete, inView = false, once = true, ...props }, ref, ) => { const text = typeof children === "string" ? children : children?.toString() || ""; const [isAnimating, setIsAnimating] = useState(false); const splitIntoCharacters = (text: string): string[] => { if (typeof Intl !== "undefined" && "Segmenter" in Intl) { const segmenter = new Intl.Segmenter("en", { granularity: "grapheme" }); return Array.from(segmenter.segment(text), ({ segment }) => segment); } return Array.from(text); }; const elements = useMemo(() => { const words = text.split(" "); if (split === "characters") { return words.map((word, i) => ({ characters: splitIntoCharacters(word), needsSpace: i !== words.length - 1, })); } return split === "words" ? text.split(" ") : text.split("\n"); }, [text, split]); const getStaggerDelay = useCallback( (index: number) => { const total = split === "characters" ? elements.reduce( (acc, word) => acc + (typeof word === "string" ? 1 : word.characters.length + (word.needsSpace ? 1 : 0)), 0, ) : elements.length; if (from === "first") return index * stagger; if (from === "last") return (total - 1 - index) * stagger; if (from === "center") { const center = Math.floor(total / 2); return Math.abs(center - index) * stagger; } return index * stagger; }, [elements, from, stagger, split], ); const startAnimation = useCallback(() => { setIsAnimating(true); onStart?.(); }, [onStart]); useImperativeHandle(ref, () => ({ startAnimation, reset: () => setIsAnimating(false), })); useEffect(() => { if (autoStart && !inView) { startAnimation(); } }, [autoStart, inView, startAnimation]); const variants = { hidden: { y: "100%" }, visible: (i: number) => ({ y: 0, transition: { ...transition, delay: delay + ((transition?.delay as number) || 0) + getStaggerDelay(i), }, }), }; return ( { if (inView) { setIsAnimating(true); onStart?.(); } }} {...props} > {text} {(split === "characters" ? (elements as WordObject[]) : (elements as string[]).map((el, i, arr) => ({ characters: [el], needsSpace: split === "words" && i !== arr.length - 1, }))).map((wordObj, wordIndex, array) => { const previousCharsCount = array .slice(0, wordIndex) .reduce((sum, word) => sum + word.characters.length, 0); return ( ); })} ); }, ); SlideUpText.displayName = "SlideUpText"; export { SlideUpText }; export type { SlideUpTextProps }; 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L4e",null,{"namespace":"@spell","registryDependencies":[]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/spell-ui/slide-up-text.tsx","content":"$50","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]