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:T268e,import type { ComponentPropsWithRef, ComponentRef, ReactNode } from "react"; import { Children, createContext, isValidElement, useCallback, useContext, useEffect, useId, useMemo, useRef, useState, } from "react"; import { type GestureResponderEvent, Pressable, View, type ViewProps, } from "react-native"; import Animated, { FadeInDown, FadeOutUp, LinearTransition, useAnimatedStyle, useSharedValue, withSpring, } from "react-native-reanimated"; import { cn, mergeRefs } from "@/lib/utils"; import { ChevronDownIcon } from "@/components/ui/icons"; import { Slot } from "@/components/ui/slot"; // Constants const CONTENT_ENTER = FadeInDown.springify() .damping(28) .stiffness(340) .mass(0.55); const CONTENT_EXIT = FadeOutUp.duration(120).damping(32).stiffness(380); const ITEM_LAYOUT = LinearTransition.springify() .damping(28) .stiffness(340) .mass(0.6); const ICON_SPRING = { damping: 26, mass: 0.5, stiffness: 320 }; // Types type AccordionType = "single" | "multiple"; type AccordionItemLayout = | "open" | "closed-only" | "closed-start" | "closed-middle" | "closed-end"; const ACCORDION_ITEM_LAYOUT_CLASSNAME = { "closed-end": "my-0 rounded-b-2xl", "closed-middle": "my-0 rounded-none", "closed-only": "my-0 rounded-2xl", "closed-start": "my-0 rounded-t-2xl", open: "my-2 rounded-2xl", } as const satisfies Record; const AnimatedView = Animated.createAnimatedComponent(View); type AccordionRootContextValue = { type: AccordionType; collapsible: boolean; itemLayouts: Record; /** single: one value; multiple: open value set */ isOpen: (value: string) => boolean; toggle: (value: string) => void; }; type AccordionItemContextValue = { value: string; isOpen: boolean; contentId: string; triggerId: string; }; const AccordionRootContext = createContext( null ); const AccordionItemContext = createContext( null ); const useAccordionRoot = () => { const ctx = useContext(AccordionRootContext); if (!ctx) { throw new Error("Accordion components must be used within Accordion"); } return ctx; }; const useAccordionItem = () => { const ctx = useContext(AccordionItemContext); if (!ctx) { throw new Error( "AccordionItem, AccordionTrigger, AccordionContent, and AccordionIndicator must be used within AccordionItem" ); } return ctx; }; const getAccordionItemValues = (children: ReactNode): string[] => { const values: string[] = []; Children.forEach(children, (child) => { if ( isValidElement<{ value?: string }>(child) && typeof child.props.value === "string" ) { values.push(child.props.value); } }); return values; }; const getClosedItemLayout = ( index: number, itemValues: string[], isItemOpen: (value: string) => boolean ): AccordionItemLayout => { const prevOpen = index === 0 || isItemOpen(itemValues[index - 1] ?? ""); const nextOpen = index === itemValues.length - 1 || isItemOpen(itemValues[index + 1] ?? ""); if (prevOpen && nextOpen) { return "closed-only"; } if (prevOpen) { return "closed-start"; } if (nextOpen) { return "closed-end"; } return "closed-middle"; }; export type AccordionProps = { type?: AccordionType; /** When `type` is `single`, allow closing the open item so none are open */ collapsible?: boolean; /** Controlled open value(s) */ value?: string | string[]; defaultValue?: string | string[]; onValueChange?: (value: string | string[] | undefined) => void; children: ReactNode; }; export const Accordion = ({ type = "single", collapsible = false, value: valueProp, defaultValue, onValueChange, children, }: AccordionProps) => { const itemValues = useMemo( () => getAccordionItemValues(children), [children] ); const isControlled = valueProp !== undefined; const [internalSingle, setInternalSingle] = useState( typeof defaultValue === "string" ? defaultValue : undefined ); const [internalMultiple, setInternalMultiple] = useState( Array.isArray(defaultValue) ? defaultValue : [] ); const singleValue = isControlled ? typeof valueProp === "string" ? valueProp : undefined : internalSingle; const multipleValues = useMemo(() => { if (type !== "multiple") { return new Set(); } if (isControlled) { return new Set(Array.isArray(valueProp) ? valueProp : []); } return new Set(internalMultiple); }, [type, isControlled, valueProp, internalMultiple]); const isOpen = useCallback( (itemValue: string) => { if (type === "multiple") { return multipleValues.has(itemValue); } return singleValue === itemValue; }, [type, singleValue, multipleValues] ); const itemLayouts = useMemo(() => { const layouts: Record = {}; for (let index = 0; index < itemValues.length; index += 1) { const itemValue = itemValues[index] ?? ""; layouts[itemValue] = isOpen(itemValue) ? "open" : getClosedItemLayout(index, itemValues, isOpen); } return layouts; }, [itemValues, isOpen]); const toggle = useCallback( (itemValue: string) => { if (type === "multiple") { const next = new Set(multipleValues); if (next.has(itemValue)) { next.delete(itemValue); } else { next.add(itemValue); } const arr = [...next]; if (!isControlled) { setInternalMultiple(arr); } onValueChange?.(arr); return; } let next: string | undefined; if (singleValue === itemValue) { next = collapsible ? undefined : itemValue; } else { next = itemValue; } if (!isControlled) { setInternalSingle(next); } onValueChange?.(next); }, [ type, multipleValues, singleValue, collapsible, isControlled, onValueChange, ] ); const ctx = useMemo( () => ({ collapsible, isOpen, itemLayouts, toggle, type, }), [type, collapsible, itemLayouts, isOpen, toggle] ); return ( {children} ); }; export type AccordionItemProps = ViewProps & { value: string; children: ReactNode; }; export const AccordionItem = ({ value, className, children, ...props }: AccordionItemProps) => { const root = useAccordionRoot(); const baseId = useId(); const triggerId = `${baseId}-trigger`; const contentId = `${baseId}-content`; const open = root.isOpen(value); const layout = root.itemLayouts[value] ?? "closed-only"; const itemCtx = useMemo( () => ({ contentId, isOpen: open, triggerId, value, }), [value, open, contentId, triggerId] ); return ( {children} ); }; export type AccordionTriggerProps = Omit< ComponentPropsWithRef, "children" > & { asChild?: boolean; children?: ReactNode; }; export const AccordionTrigger = ({ asChild, children, className, onPress, ref: refProp, ...props }: AccordionTriggerProps) => { const root = useAccordionRoot(); const item = useAccordionItem(); const ref = useRef>(null); const mergedRefs = mergeRefs(ref, refProp); const handlePress = useCallback( (e: GestureResponderEvent) => { onPress?.(e); root.toggle(item.value); }, [onPress, root, item.value] ); const Comp = asChild ? Slot.Pressable : Pressable; return ( {children} ); }; export type AccordionContentProps = ViewProps & { children: ReactNode; }; export const AccordionContent = ({ children, className, ...props }: AccordionContentProps) => { const item = useAccordionItem(); if (!item.isOpen) { return null; } return ( {children} ); }; export type AccordionIndicatorProps = { className?: string; children?: ReactNode; }; export const AccordionIndicator = ({ className, children, }: AccordionIndicatorProps) => { const item = useAccordionItem(); const rotation = useSharedValue(item.isOpen ? 180 : 0); useEffect(() => { rotation.value = withSpring(item.isOpen ? 180 : 0, ICON_SPRING); }, [item.isOpen, rotation]); const animatedStyle = useAnimatedStyle(() => ({ transform: [{ rotate: `${rotation.value}deg` }], })); if (children) { return ( {children} ); } return ( ); }; 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","react-native-reanimated",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-native-reanimated","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":"react-native-reanimated"}]]}]}]]}],["$","$L50",null,{"namespace":"@tetra-ui","registryDependencies":["@tetra-ui/icons","@tetra-ui/slot"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"ui/accordion.tsx","content":"$52","type":"registry:ui","target":"@ui/accordion.tsx"}],"className":"h-[70svh] min-h-80"}]]}]