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:T2228,import { cva, type VariantProps } from "class-variance-authority"; import { Children, cloneElement, createContext, isValidElement, useContext, useMemo, } from "react"; import { Pressable, View } from "react-native"; import { cn } from "@/lib/utils"; import { Text } from "@/components/ui/text"; // Types export type InlineListProps = React.ComponentProps & { title?: string; children: React.ReactNode; }; type InlineListItemVariant = "default" | "destructive"; export type InlineListItemProps = React.ComponentProps & { children: React.ReactNode; showSeparator?: boolean; variant?: InlineListItemVariant; }; export type InlineListItemTitleProps = React.ComponentProps; export type InlineListItemDescriptionProps = React.ComponentProps; export type InlineListItemAddonProps = React.ComponentProps & VariantProps & { children: React.ReactNode; }; type InlineListItemAddonIconProps = { children: React.ReactNode; className?: string; }; export type InlineListItemAddonChild = | React.ReactElement | null | false; export type InlineListItemAddonChildren = | InlineListItemAddonChild | InlineListItemAddonChild[]; type InlineListItemAddonAlign = NonNullable< VariantProps["align"] >; // Context type InlineListSeparatorContextValue = { showSeparator: boolean; }; const InlineListSeparatorContext = createContext(null); const InlineListItemContext = createContext("default"); const useInlineListItemContext = () => useContext(InlineListItemContext); const InlineListItemAddonContext = createContext("inline-start"); const useInlineListItemAddonContext = () => useContext(InlineListItemAddonContext); // Hooks export const useInlineListItemAddons = (children?: React.ReactNode) => { const startAddons: InlineListItemAddonChild[] = []; const endAddons: InlineListItemAddonChild[] = []; Children.forEach(children, (child) => { if (isValidElement(child) && child.type === InlineListItemAddon) { const typedChild = child as InlineListItemAddonChild; if (typedChild) { if ( typeof typedChild.props.align === "undefined" || typedChild.props.align === "inline-start" ) { startAddons.push(typedChild); } else { endAddons.push(typedChild); } } } }); return { endAddons, startAddons, }; }; const renderItemsWithSeparators = (children: React.ReactNode) => { const childArray = Children.toArray(children); const lastIndex = childArray.length - 1; return childArray.map((child, index) => { const key = isValidElement(child) && child.key !== null ? child.key : index; return ( {child} ); }); }; const parseInlineListItemContent = (children: React.ReactNode) => { const content: React.ReactNode[] = []; let contentIndex = 0; Children.forEach(children, (child) => { if (isValidElement(child) && child.type === InlineListItemAddon) { return; } if (typeof child === "string") { content.push( {child} ); contentIndex += 1; return; } if (isValidElement(child)) { if (child.key === null) { content.push( cloneElement(child, { key: `inline-list-item-content-${contentIndex}`, }) ); contentIndex += 1; return; } content.push(child); } }); return content; }; // Components export const InlineList = ({ title, children, className, ...props }: InlineListProps) => { const items = useMemo(() => renderItemsWithSeparators(children), [children]); return ( {title ? ( {title} ) : null} {items} ); }; export const InlineListItem = ({ children, className, showSeparator: showSeparatorProp, onPress, disabled, variant = "default", ...props }: InlineListItemProps) => { const separatorContext = useContext(InlineListSeparatorContext); const showSeparator = showSeparatorProp ?? separatorContext?.showSeparator ?? false; const { startAddons, endAddons } = useInlineListItemAddons(children); const content = useMemo( () => parseInlineListItemContent(children), [children] ); const rowClassName = cn(inlineListItemVariants({ variant }), className); const rowContent = ( <> {startAddons} {content} {endAddons} ); return ( {onPress ? ( {rowContent} ) : ( {rowContent} )} {showSeparator ? ( ) : null} ); }; export const InlineListItemTitle = ({ className, ...props }: InlineListItemTitleProps) => { const variant = useInlineListItemContext(); return ( ); }; export const InlineListItemDescription = ({ className, ...props }: InlineListItemDescriptionProps) => { return ( ); }; export const InlineListItemAddon = ({ align, className, children, ...props }: InlineListItemAddonProps) => { const resolvedAlign = align ?? "inline-start"; return ( {children} ); }; export const InlineListItemAddonIcon = ({ children, ...props }: InlineListItemAddonIconProps): React.ReactElement | null => { const variant = useInlineListItemContext(); const align = useInlineListItemAddonContext(); const child = Children.only(children); if (!child) { if (__DEV__) { throw new Error( "InlineListItemAddonIcon expects a single React element as children" ); } return null; } return cloneElement( child as React.ReactElement, { ...props, className: cn( "size-5", align === "inline-start" ? variant === "destructive" ? "text-destructive" : "text-foreground" : "text-muted-foreground", props.className ), } ); }; // Styles const inlineListItemVariants = cva( "min-h-12 w-full flex-row items-center gap-3 px-4 py-2 disabled:opacity-50", { defaultVariants: { variant: "default", }, variants: { variant: { default: "active:bg-accent/90 dark:active:bg-accent/50", destructive: "active:bg-destructive/5 dark:active:bg-destructive/10", }, }, } ); const inlineListItemAddonVariants = cva( "shrink-0 items-center justify-center", { defaultVariants: { align: "inline-start", }, variants: { align: { "inline-end": "", "inline-start": "", }, }, } ); 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L51",null,{"files":[{"path":"ui/inline-list.tsx","content":"$52","type":"registry:ui","target":"@ui/inline-list.tsx"}],"className":"h-[70svh] min-h-80"}]]}]