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:T233e,import { Children, cloneElement, createContext, isValidElement, useCallback, useContext, useMemo, useState, } from "react"; import { type GestureResponderEvent, Text, View } from "react-native"; import { createSlots } from "@/lib/slots"; import { cn } from "@/lib/utils"; import { Checkbox } from "@/components/ui/checkbox"; import { InputGroup, type InputGroupProps } from "@/components/ui/input"; import { Radio } from "@/components/ui/radio"; import { Stack, type StackProps } from "@/components/ui/stack"; const choiceboxSlots = createSlots<"indicator">({ errorMessage: "Choicebox parts must be rendered inside ChoiceboxItem", }); // Types type ChoiceboxType = "single" | "multiple"; type ChoiceboxRootContextValue = { type: ChoiceboxType; disabled?: boolean; invalid?: boolean; isSelected: (value: string) => boolean; toggle: (value: string) => void; }; type ChoiceboxItemContextValue = { value: string; selected: boolean; disabled?: boolean; }; export type ChoiceboxProps = { type?: ChoiceboxType; /** When `type` is `single`, allow clearing the selected item */ clearable?: boolean; value?: string | string[]; defaultValue?: string | string[]; onValueChange?: (value: string | string[] | undefined) => void; disabled?: boolean; invalid?: boolean; direction?: StackProps["direction"]; className?: string; children: React.ReactNode; }; export type ChoiceboxItemProps = Omit & { value: string; disabled?: boolean; children: React.ReactNode; }; export type ChoiceboxItemHeaderProps = React.ComponentProps; export type ChoiceboxItemTitleProps = React.ComponentProps; export type ChoiceboxItemDescriptionProps = React.ComponentProps; // Context const ChoiceboxRootContext = createContext( null ); const ChoiceboxItemContext = createContext( null ); const useChoiceboxRoot = () => { const context = useContext(ChoiceboxRootContext); if (!context) { throw new Error("Choicebox components must be used within a Choicebox"); } return context; }; const useChoiceboxItem = () => { const context = useContext(ChoiceboxItemContext); if (!context) { throw new Error( "ChoiceboxItem subcomponents must be used within a ChoiceboxItem" ); } return context; }; // Components export const Choicebox = ({ type = "single", clearable = false, value: valueProp, defaultValue, onValueChange, disabled, invalid, direction = "column", className, children, }: ChoiceboxProps) => { 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 isSelected = useCallback( (itemValue: string) => { if (type === "multiple") { return multipleValues.has(itemValue); } return singleValue === itemValue; }, [type, singleValue, multipleValues] ); const toggle = useCallback( (itemValue: string) => { if (disabled) { return; } 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 = clearable ? undefined : itemValue; } else { next = itemValue; } if (!isControlled) { setInternalSingle(next); } onValueChange?.(next); }, [ type, disabled, multipleValues, singleValue, clearable, isControlled, onValueChange, ] ); const ctx = useMemo( () => ({ disabled, invalid, isSelected, toggle, type, }), [type, disabled, invalid, isSelected, toggle] ); return ( {children} ); }; export const ChoiceboxItem = ({ value, disabled: itemDisabled, children, className, onPress, ...props }: ChoiceboxItemProps) => { const { type, disabled: rootDisabled, invalid, isSelected, toggle, } = useChoiceboxRoot(); const selected = isSelected(value); const disabled = rootDisabled || itemDisabled; const handlePress = useCallback( (event: GestureResponderEvent) => { if (disabled) { return; } onPress?.(event); toggle(value); }, [disabled, onPress, toggle, value] ); const itemCtx = useMemo( () => ({ disabled, selected, value, }), [value, selected, disabled] ); const accessibilityRole = type === "multiple" ? "checkbox" : "radio"; const content: React.ReactNode[] = []; const getContentKey = (child: React.ReactElement) => { if (child.type === ChoiceboxItemHeader) { return `${value}-header`; } const typeName = typeof child.type === "function" ? child.type.name : String(child.type); return `${value}-${typeName || "content"}`; }; Children.forEach(children, (child) => { if (typeof child === "string") { content.push( {child} ); return; } if (isValidElement(child)) { if (child.key === null) { content.push(cloneElement(child, { key: getContentKey(child) })); return; } content.push(child); } }); return ( {content} ); }; const ChoiceboxItemLayout = ({ accessibilityRole, children, className, disabled, invalid, onPress, selected, ...props }: Omit & { accessibilityRole: "checkbox" | "radio"; children: React.ReactNode; selected: boolean; }) => { const hasIndicator = choiceboxSlots.useHasSlot("indicator"); return ( {children} {hasIndicator ? ( ) : ( )} ); }; export const ChoiceboxItemHeader = ({ className, ...props }: ChoiceboxItemHeaderProps) => { return ( ); }; export const ChoiceboxItemTitle = ({ className, ...props }: ChoiceboxItemTitleProps) => { return ( ); }; export const ChoiceboxItemDescription = ({ className, ...props }: ChoiceboxItemDescriptionProps) => { return ( ); }; export const ChoiceboxIndicator = () => { return ( ); }; const ChoiceboxIndicatorControl = () => { const { type, invalid } = useChoiceboxRoot(); const { selected } = useChoiceboxItem(); if (type === "multiple") { return ; } 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":[null,["$","$L50",null,{"namespace":"@tetra-ui","registryDependencies":["@tetra-ui/checkbox","@tetra-ui/input","@tetra-ui/radio","@tetra-ui/slots","@tetra-ui/stack"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"ui/choicebox.tsx","content":"$52","type":"registry:ui","target":"@ui/choicebox.tsx"}],"className":"h-[70svh] min-h-80"}]]}]