50: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"] 51: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"] 52:T5918,"use client"; import { cn } from "@/lib/utils"; import { cva, type VariantProps } from "class-variance-authority"; import { type AnimationSequence, stagger, useAnimate, useReducedMotion, } from "motion/react"; import { type ComponentPropsWithoutRef, createContext, type ReactNode, type RefObject, useCallback, useContext, useEffect, useId, useRef, useState, } from "react"; import { useAutoHeight } from "@/hooks/use-auto-height"; const EXPO_IN_OUT = [0.87, 0, 0.13, 1] as const; const EXPO_OUT = [0.16, 1, 0.3, 1] as const; const POWER2_IN_OUT = [0.45, 0, 0.55, 1] as const; type IconMode = "rotate" | "fade" | "both"; type DisabledBreakpoint = "mobile" | "tablet" | "desktop"; type AccordionEase = readonly [number, number, number, number]; const DISABLE_MEDIA: Record = { mobile: "(max-width: 479px)", tablet: "(max-width: 991px)", desktop: "(min-width: 992px)", }; interface AccordionContextValue { allowMultiple: boolean; animationsPaused: boolean; defaultDuration: number; defaultEase: AccordionEase; defaultIconRotation: number; disabledOn?: DisabledBreakpoint[]; iconMode: IconMode; notifyItemOpen: (id: string) => void; registerItem: (id: string, close: () => void) => void; unregisterItem: (id: string) => void; } interface AccordionItemContextValue { contentId: string; contentPanelRef: RefObject; iconRef: RefObject; isDisabled: boolean; isOpen: boolean; setPanelHeight: (height: number) => void; toggle: () => void; triggerId: string; verticalBarRef: RefObject; } const AccordionContext = createContext(null); const AccordionItemContext = createContext( null ); function useAccordionContext() { const context = useContext(AccordionContext); if (!context) { throw new Error("Accordion components must be used within ."); } return context; } function useAccordionItemContext() { const context = useContext(AccordionItemContext); if (!context) { throw new Error( "Accordion subcomponents must be used within ." ); } return context; } function useDisabledOn(disabledOn?: DisabledBreakpoint[]) { const [disabled, setDisabled] = useState(false); useEffect(() => { if (!disabledOn?.length) { setDisabled(false); return; } const mediaQueries = disabledOn.map((breakpoint) => window.matchMedia(DISABLE_MEDIA[breakpoint]) ); const update = () => { setDisabled(mediaQueries.some((mediaQuery) => mediaQuery.matches)); }; update(); for (const mediaQuery of mediaQueries) { mediaQuery.addEventListener("change", update); } return () => { for (const mediaQuery of mediaQueries) { mediaQuery.removeEventListener("change", update); } }; }, [disabledOn]); return disabled; } const accordionVariants = cva("flex w-full flex-col"); const accordionItemVariants = cva("border-border border-b last:border-b-0"); const accordionTriggerVariants = cva([ "flex w-full items-center justify-between gap-4 border-0 bg-transparent py-5 text-left", "cursor-pointer text-muted-foreground transition-colors duration-[400ms] ease-[cubic-bezier(0.16,1,0.3,1)]", "will-change-transform [transform:translateZ(0)] hover:text-foreground", "focus:outline-none focus-visible:rounded-sm focus-visible:outline-2 focus-visible:outline-[#fd551d] focus-visible:outline-offset-4", "data-[state=open]:text-foreground", ]); const accordionTitleVariants = cva( "m-0 font-medium text-base text-inherit leading-[1.4]" ); const accordionContentVariants = cva( "overflow-hidden will-change-[height] [transform:translateZ(0)]" ); const accordionTextVariants = cva( "m-0 pb-5 text-muted-foreground text-sm leading-[1.6]" ); export interface AccordionItemData { content: ReactNode; defaultOpen?: boolean; /** Reveal panel text line by line when this item opens. */ enableStagger?: boolean; id?: string; title: string; } export interface AccordionProps extends Omit, "children">, VariantProps { allowMultiple?: boolean; children?: ReactNode; /** * Disable accordion animations on matching breakpoints. * Responsive media queries to disable transitions on mobile, tablet, or desktop. */ disabledOn?: DisabledBreakpoint[]; duration?: number; ease?: AccordionEase; iconMode?: IconMode; iconRotation?: number; items?: AccordionItemData[]; } export interface AccordionItemProps extends Omit, "children"> { children: ReactNode; defaultOpen?: boolean; delay?: number; disabledOn?: DisabledBreakpoint[]; duration?: number; ease?: AccordionEase; /** * Reveal panel text line by line when the item opens. * @default false */ enableStagger?: boolean; iconRotation?: number; onClose?: () => void; onOpen?: () => void; /** * Delay between each staggered line, in seconds. * @default 0.15 */ staggerDelay?: number; /** * Duration of each line reveal, in seconds. * @default 0.6 */ staggerDuration?: number; /** * Easing curve for the line reveal. * @default expo.out */ staggerEase?: AccordionEase; /** * Wait before the line reveal starts after opening, in milliseconds. * @default 200 */ staggerStartDelay?: number; /** * Initial vertical offset of each line, as a percentage of its height. * @default 110 */ staggerYPercent?: number; } export interface AccordionTriggerProps extends ComponentPropsWithoutRef<"button"> { children: ReactNode; hideIcon?: boolean; } export interface AccordionContentProps extends ComponentPropsWithoutRef<"section"> { children: ReactNode; } export interface AccordionTextProps extends Omit, "children"> { children: ReactNode; } function renderAccordionItemContent(content: ReactNode) { if (typeof content === "string") { return {content}; } return content; } interface SplitLinesResult { lines: HTMLElement[]; revert: () => void; } const WHITESPACE_REGEX = /\s+/; /** * Lightweight SplitText alternative: wraps each word to measure natural line * breaks, then rebuilds the element as masked line blocks ready to animate. * Nested markup is flattened to plain text while the split is active. */ function splitElementIntoLines(element: HTMLElement): SplitLinesResult { const originalNodes = Array.from(element.childNodes); const words = (element.textContent ?? "") .split(WHITESPACE_REGEX) .filter(Boolean); element.replaceChildren(); const wordSpans: HTMLSpanElement[] = []; for (const word of words) { const span = document.createElement("span"); span.style.display = "inline-block"; span.textContent = word; element.append(span, document.createTextNode(" ")); wordSpans.push(span); } const lineGroups: string[][] = []; let lastTop: number | null = null; for (const span of wordSpans) { const top = span.offsetTop; if (lastTop === null || Math.abs(top - lastTop) > 1) { lineGroups.push([]); lastTop = top; } lineGroups.at(-1)?.push(span.textContent ?? ""); } element.replaceChildren(); const lines: HTMLElement[] = []; for (const group of lineGroups) { const mask = document.createElement("div"); mask.style.display = "block"; mask.style.overflow = "hidden"; const line = document.createElement("div"); line.style.display = "block"; line.style.willChange = "transform"; line.textContent = group.join(" "); mask.appendChild(line); element.appendChild(mask); lines.push(line); } return { lines, revert: () => { element.replaceChildren(...originalNodes); }, }; } function Accordion({ allowMultiple = false, children, className, disabledOn, duration = 0.8, ease = EXPO_IN_OUT, iconMode = "both", iconRotation = -180, items, ...props }: AccordionProps) { const itemsRef = useRef(new Map void>()); const [animationsPaused, setAnimationsPaused] = useState(false); useEffect(() => { const handleVisibilityChange = () => { setAnimationsPaused(document.hidden); }; document.addEventListener("visibilitychange", handleVisibilityChange); return () => { document.removeEventListener("visibilitychange", handleVisibilityChange); }; }, []); const registerItem = useCallback((id: string, close: () => void) => { itemsRef.current.set(id, close); }, []); const unregisterItem = useCallback((id: string) => { itemsRef.current.delete(id); }, []); const notifyItemOpen = useCallback( (id: string) => { if (allowMultiple) { return; } for (const [itemId, close] of itemsRef.current.entries()) { if (itemId !== id) { close(); } } }, [allowMultiple] ); return (

{items?.map((item, index) => ( {item.title} {renderAccordionItemContent(item.content)} ))} {children}

); } function AccordionItem({ children, className, defaultOpen = false, delay = 0, disabledOn: itemDisabledOn, duration: itemDuration, ease: itemEase, enableStagger = false, iconRotation: itemIconRotation, onClose, onOpen, staggerDelay = 0.15, staggerDuration = 0.6, staggerEase = EXPO_OUT, staggerStartDelay = 200, staggerYPercent = 110, ...props }: AccordionItemProps) { const { animationsPaused, defaultDuration, defaultEase, defaultIconRotation, disabledOn: sectionDisabledOn, iconMode, notifyItemOpen, registerItem, unregisterItem, } = useAccordionContext(); const itemId = useId(); const triggerId = `${itemId}-trigger`; const contentId = `${itemId}-content`; const itemRef = useRef(null); const contentPanelRef = useRef(null); const iconRef = useRef(null); const verticalBarRef = useRef(null); const [, animate] = useAnimate(); const animationRef = useRef<{ stop: () => void } | null>(null); const hasAppliedInitialOpen = useRef(false); const shouldReduceMotion = useReducedMotion(); const splitRevertsRef = useRef<(() => void)[]>([]); const staggerAnimationRef = useRef<{ stop: () => void } | null>(null); const staggerTimeoutRef = useRef(null); const [isOpen, setIsOpen] = useState(defaultOpen); const [panelHeight, setPanelHeight] = useState(0); const isOpenRef = useRef(isOpen); useEffect(() => { isOpenRef.current = isOpen; }, [isOpen]); const sectionAnimationsDisabled = useDisabledOn(sectionDisabledOn); const itemAnimationsDisabled = useDisabledOn(itemDisabledOn); const animationsDisabled = sectionAnimationsDisabled || itemAnimationsDisabled; const duration = itemDuration ?? defaultDuration; const ease = itemEase ?? defaultEase; const iconRotation = itemIconRotation ?? defaultIconRotation; const close = useCallback(() => { isOpenRef.current = false; setIsOpen(false); }, []); useEffect(() => { registerItem(itemId, close); return () => unregisterItem(itemId); }, [close, itemId, registerItem, unregisterItem]); const dispatchItemEvent = useCallback( (type: "anm-accordion-open" | "anm-accordion-close") => { const node = itemRef.current; const content = contentPanelRef.current; if (!node) { return; } node.dispatchEvent( new CustomEvent(type, { bubbles: true, detail: { item: node, content }, }) ); }, [] ); const toggle = useCallback(() => { if (isOpenRef.current) { onClose?.(); dispatchItemEvent("anm-accordion-close"); close(); return; } notifyItemOpen(itemId); onOpen?.(); dispatchItemEvent("anm-accordion-open"); isOpenRef.current = true; setIsOpen(true); }, [close, dispatchItemEvent, itemId, notifyItemOpen, onClose, onOpen]); const clearIconInlineStyles = useCallback(() => { iconRef.current?.style.removeProperty("transform"); verticalBarRef.current?.style.removeProperty("opacity"); }, []); const applyStaticPanelState = useCallback( (open: boolean, height: number) => { const panel = contentPanelRef.current; const icon = iconRef.current; const vertical = verticalBarRef.current; if (!panel) { return; } panel.style.height = open ? `${height}px` : "0px"; if (icon) { const rotateIcon = iconMode === "rotate" || iconMode === "both"; icon.style.transform = rotateIcon && open ? `rotate(${iconRotation}deg)` : "rotate(0deg)"; } if (vertical && (iconMode === "fade" || iconMode === "both")) { vertical.style.opacity = open ? "0" : "1"; } }, [iconMode, iconRotation] ); const toInstantSequence = useCallback( (sequence: AnimationSequence): AnimationSequence => sequence.map((segment) => { const [element, keyframes, options] = segment as [ Element, Record, { at?: number; duration?: number; ease?: AccordionEase }, ]; return [element, keyframes, { ...options, duration: 0, at: 0 }]; }) as AnimationSequence, [] ); const buildPanelSequence = useCallback( (open: boolean): AnimationSequence | null => { const panel = contentPanelRef.current; const icon = iconRef.current; const vertical = verticalBarRef.current; if (!panel) { return null; } const rotateIcon = iconMode === "rotate" || iconMode === "both"; const fadeVertical = (iconMode === "fade" || iconMode === "both") && vertical; if (open) { const openSequence: AnimationSequence = [ [ panel, { height: `${panelHeight}px` }, { duration, ease, at: delay }, ], ]; if (rotateIcon && icon) { openSequence.push([ icon, { rotate: iconRotation }, { duration, ease, at: delay }, ]); } if (fadeVertical) { openSequence.push([ vertical, { opacity: 0 }, { duration: duration * 0.5, ease: POWER2_IN_OUT, at: delay + duration * 0.25, }, ]); } return openSequence; } const closeSequence: AnimationSequence = []; if (fadeVertical) { closeSequence.push([ vertical, { opacity: 1 }, { duration: duration * 0.5, ease: POWER2_IN_OUT, at: delay }, ]); } if (rotateIcon && icon) { closeSequence.push([ icon, { rotate: 0 }, { duration, ease, at: delay }, ]); } closeSequence.push([panel, { height: 0 }, { duration, ease, at: delay }]); return closeSequence; }, [delay, duration, ease, iconMode, iconRotation, panelHeight] ); useEffect(() => { animationRef.current?.stop(); if (animationsDisabled || shouldReduceMotion) { applyStaticPanelState(isOpen, panelHeight); return; } if (animationsPaused) { return; } if (defaultOpen && isOpen && !hasAppliedInitialOpen.current) { if (panelHeight > 0) { hasAppliedInitialOpen.current = true; const openSequence = buildPanelSequence(true); if (openSequence) { clearIconInlineStyles(); animationRef.current = animate(toInstantSequence(openSequence)); } } return; } if (isOpen && panelHeight === 0) { return; } const sequence = buildPanelSequence(isOpen); if (!sequence) { return; } clearIconInlineStyles(); animationRef.current = animate(sequence); }, [ animate, animationsPaused, applyStaticPanelState, buildPanelSequence, clearIconInlineStyles, defaultOpen, animationsDisabled, isOpen, panelHeight, shouldReduceMotion, toInstantSequence, ]); const resetTextStagger = useCallback(() => { if (staggerTimeoutRef.current !== null) { window.clearTimeout(staggerTimeoutRef.current); staggerTimeoutRef.current = null; } staggerAnimationRef.current?.stop(); staggerAnimationRef.current = null; for (const revert of splitRevertsRef.current) { revert(); } splitRevertsRef.current = []; }, []); const animateTextStagger = useCallback(() => { const panel = contentPanelRef.current; if (!panel || splitRevertsRef.current.length > 0) { return; } const targets = panel.querySelectorAll("p, .accordion_text"); const lines: HTMLElement[] = []; for (const target of targets) { const split = splitElementIntoLines(target); splitRevertsRef.current.push(split.revert); lines.push(...split.lines); } if (lines.length === 0) { return; } for (const line of lines) { line.style.transform = `translateY(${staggerYPercent}%)`; } staggerAnimationRef.current = animate( lines, { transform: "translateY(0%)" }, { delay: stagger(staggerDelay), duration: staggerDuration, ease: staggerEase, } ); }, [animate, staggerDelay, staggerDuration, staggerEase, staggerYPercent]); useEffect(() => { if (!enableStagger) { return; } if (!isOpen || animationsDisabled || shouldReduceMotion) { resetTextStagger(); return; } staggerTimeoutRef.current = window.setTimeout(() => { staggerTimeoutRef.current = null; document.fonts.ready.then(() => { if (isOpenRef.current) { animateTextStagger(); } }); }, staggerStartDelay); return () => { if (staggerTimeoutRef.current !== null) { window.clearTimeout(staggerTimeoutRef.current); staggerTimeoutRef.current = null; } }; }, [ animateTextStagger, animationsDisabled, enableStagger, isOpen, resetTextStagger, shouldReduceMotion, staggerStartDelay, ]); useEffect(() => resetTextStagger, [resetTextStagger]); return (

{children}

); } function AccordionTrigger({ children, className, disabled, hideIcon = false, onClick, ...props }: AccordionTriggerProps) { const { contentId, iconRef, isDisabled, isOpen, toggle, triggerId, verticalBarRef, } = useAccordionItemContext(); const isTriggerDisabled = Boolean(disabled || isDisabled); return ( ); } function AccordionContent({ children, className, style, ...props }: AccordionContentProps) { const { contentId, contentPanelRef, isOpen, setPanelHeight, triggerId } = useAccordionItemContext(); const { ref, height } = useAutoHeight([children, isOpen]); useEffect(() => { setPanelHeight(height); }, [height, setPanelHeight]); return (

{children}

); } function AccordionText({ children, className, ...props }: AccordionTextProps) { return (

{children}

); } export type { AccordionEase, DisabledBreakpoint, IconMode }; export { Accordion, AccordionContent, AccordionItem, AccordionText, AccordionTrigger, accordionContentVariants, accordionItemVariants, accordionTextVariants, accordionTitleVariants, accordionTriggerVariants, accordionVariants, }; 4f:["$","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"}]]}]}],["$","li","class-variance-authority",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","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":"class-variance-authority"}]]}]}]]}],["$","$L50",null,{"namespace":"@soralabs","registryDependencies":["utils","@soralabs/hooks-use-auto-height"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/primitives/disclosure/accordion/index.tsx","content":"$52","type":"registry:ui","target":"components/sora-ui/disclosure/accordion.tsx"}],"className":"h-[70svh] min-h-80"}]]}]