51: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"] 52: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"] 53:Tc80,import { cn } from "@/lib/utils"; export const optionStyles = { base: "h-15 inline-flex items-center justify-between w-full bg-background border rounded-lg p-4 cursor-pointer transition-all", textSelectionDisabled: "select-none", hover: "hover:ring-1 hover:ring-border", outlineOnSelect: "ring-2 ring-primary hover:ring-2 hover:ring-primary", fillOnSelect: "bg-primary/10", shadowOnSelect: "shadow-md shadow-primary/25", disabled: "opacity-50 cursor-not-allowed", }; export const getOptionClassName = ({ selected = false, highlightOnHover = true, showOutlineOnSelect = true, showFillOnSelect = false, showShadowOnSelect = false, disabled = false, allowTextSelection = false, }: { selected?: boolean; highlightOnHover?: boolean; showOutlineOnSelect?: boolean; showFillOnSelect?: boolean; showShadowOnSelect?: boolean; disabled?: boolean; allowTextSelection?: boolean; }) => cn( optionStyles.base, !allowTextSelection && optionStyles.textSelectionDisabled, highlightOnHover && optionStyles.hover, selected && showOutlineOnSelect && optionStyles.outlineOnSelect, selected && showFillOnSelect && optionStyles.fillOnSelect, selected && showShadowOnSelect && optionStyles.shadowOnSelect, disabled && optionStyles.disabled, ); export const fieldHeaderStyles = { container: "mb-3 space-y-1", title: "text-3xl leading-9 font-medium", titleSm: "text-xl leading-6 font-medium", hint: "text-muted-foreground", hintSm: "text-sm text-muted-foreground", }; export const inputStyles = { wrapper: "relative flex items-center w-full border rounded-2xl bg-background hover:border-primary transition-[color,border-color] overflow-hidden focus-within:ring-1 focus-within:ring-primary focus-within:border-primary", wrapperDefault: "h-[60px]", wrapperSm: "h-10 !rounded-lg", input: "flex-1 w-full bg-transparent border-0 outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50", inputDefault: "px-5 py-4 text-md placeholder:text-md", inputSm: "h-[38px] p-2 text-sm font-light placeholder:text-sm placeholder:font-light", suffix: "flex items-center pl-2 pr-5 text-muted-foreground text-sm", error: "border-destructive focus-within:outline-destructive/20 focus-within:border-destructive", autofill: "[&:has(input:-webkit-autofill)]:bg-[#e8f0fe]", inputAutofill: "autofill:[box-shadow:inset_0_0_0_9999px_#e8f0fe] autofill:[-webkit-text-fill-color:var(--color-foreground)]", }; export const getInputWrapperClassName = ({ size = "md", hasError = false, }: { size?: "md" | "sm"; hasError?: boolean; }) => cn( inputStyles.wrapper, inputStyles.autofill, size === "sm" ? inputStyles.wrapperSm : inputStyles.wrapperDefault, hasError && inputStyles.error, ); export const getInputClassName = ({ size = "md", hasSuffix = false, }: { size?: "md" | "sm"; hasSuffix?: boolean; }) => cn( inputStyles.input, inputStyles.inputAutofill, size === "sm" ? inputStyles.inputSm : inputStyles.inputDefault, hasSuffix && "pr-0", ); 54:T1397,"use client"; import * as React from "react"; import { CircleCheck } from "lucide-react"; import { cn } from "@/lib/utils"; import { getOptionClassName, fieldHeaderStyles } from "@/lib/styles"; import { ChoiceOption } from "@/lib/types"; import { Checkbox } from "@/components/ui/checkbox"; import { Badge } from "@/components/ui/badge"; export interface MultipleChoiceProps extends Omit< React.ComponentProps, "checked" | "onChange" | "value" > { title?: string; hint?: string; options: ChoiceOption[]; value?: string[]; onChange?: (value: string[]) => void; maxSelections?: number; className?: string; checkboxPosition?: "left" | "right"; checkboxVariant?: "checkbox" | "icon" | "none"; showNumbers?: boolean; highlightOnHover?: boolean; showOutlineOnSelect?: boolean; showFillOnSelect?: boolean; showShadowOnSelect?: boolean; allowTextSelection?: boolean; } export function MultipleChoice({ title, hint, options, value = [], onChange, maxSelections, className, disabled, checkboxPosition = "right", checkboxVariant = "icon", showNumbers = false, highlightOnHover = true, showOutlineOnSelect = true, showFillOnSelect = false, showShadowOnSelect = false, allowTextSelection = false, ...checkboxProps }: MultipleChoiceProps) { const groupId = React.useId(); const noneOption = options.find((opt) => opt.none); const isMaxReached = maxSelections !== undefined && value.length >= maxSelections; const handleCheckedChange = ( optionValue: string, checked: boolean, isNoneOption: boolean, ) => { if (!onChange) return; if (isNoneOption) { onChange(checked ? [optionValue] : []); return; } if (checked && isMaxReached) return; const newValues = checked ? [ ...value.filter((v) => !noneOption || v !== noneOption.value), optionValue, ] : value.filter((v) => v !== optionValue); onChange(newValues); }; return (

{(title || hint) && (

{title &&

{title}

} {hint &&

{hint}

}

)}

{options.map((option, index) => { const optionId = `${groupId}-${option.value}`; const isChecked = value.includes(option.value); const isDisabled = disabled || option.disabled || (isMaxReached && !isChecked); const renderIndicator = () => { return ( <> handleCheckedChange( option.value, checked === true, option.none === true, ) } disabled={isDisabled} className={checkboxVariant !== "checkbox" ? "sr-only peer" : ""} {...checkboxProps} /> {checkboxVariant === "icon" && isChecked && ( )} ); }; return (

{showNumbers && ( {index + 1} )} {checkboxPosition !== "right" && renderIndicator()}

{option.label} {option.badge && ( {option.badge} )}

{checkboxPosition === "right" && renderIndicator()}

); })}

); } 50:["$","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","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}]]}],["$","$L51",null,{"namespace":"@turbopills-ui","registryDependencies":["checkbox","badge"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/turbopills/lib/styles.tsx","content":"$53","type":"registry:lib","target":"lib/styles.tsx"},{"path":"registry/turbopills/lib/types.ts","content":"import * as React from \"react\";\r\n\r\nexport type ChoiceOption = {\r\n value: string;\r\n label: React.ReactNode;\r\n badge?: string;\r\n disabled?: boolean;\r\n none?: boolean;\r\n};\r\n","type":"registry:lib","target":"lib/types.ts"},{"path":"registry/turbopills/ui/multiple-choice.tsx","content":"$54","type":"registry:component","target":"components/turbopills/ui/multiple-choice.tsx"}],"className":"h-[70svh] min-h-80"}]]}]