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:T67d,.cr-choicebox { margin: 0; padding: 0; border: 0; color: var(--cr-color-text-default); font-family: var(--cr-font-family-sans); } .cr-choicebox__legend { margin-bottom: var(--cr-space-3); padding: 0; font-size: var(--cr-font-size-sm); font-weight: var(--cr-font-weight-semibold); } .cr-choicebox__options { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--cr-space-3); } .cr-choicebox__card { display: flex; gap: var(--cr-space-3); padding: var(--cr-space-4); border-radius: var(--cr-radius-lg); background: var(--cr-color-glass-tile); cursor: pointer; transition: background-color var(--cr-motion-duration-fast) var(--cr-motion-easing-standard), box-shadow var(--cr-motion-duration-fast) var(--cr-motion-easing-standard); } .cr-choicebox__card:has(:checked) { background: var(--cr-color-glass-popover); box-shadow: 0 0 0 1.5px var(--cr-color-ink-bg); } .cr-choicebox__card:has(:disabled) { cursor: not-allowed; opacity: 0.55; } .cr-choicebox__card:has(:focus-visible) { outline: var(--cr-focus-width) solid var(--cr-color-focus); outline-offset: var(--cr-focus-offset); } .cr-choicebox__input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--cr-color-ink-bg); cursor: inherit; } .cr-choicebox__input:focus-visible { outline: none; } .cr-choicebox__text { display: grid; gap: var(--cr-space-1); } .cr-choicebox__title { font-size: var(--cr-font-size-md); font-weight: var(--cr-font-weight-semibold); } .cr-choicebox__description { color: var(--cr-color-text-muted); font-size: var(--cr-font-size-sm); } 53:T9c3,'use client'; import { useId, useState, type ReactNode } from 'react'; import { cx } from '@/lib/creance/cx'; import './Choicebox.css'; export interface ChoiceboxOption { value: string; title: ReactNode; description?: ReactNode; disabled?: boolean; } interface Base { /** The question the cards answer. */ legend: ReactNode; options: ChoiceboxOption[]; name?: string; className?: string; } export type ChoiceboxProps = Base & ( | { type?: 'radio'; value?: string; defaultValue?: string; onValueChange?: (value: string) => void } | { type: 'checkbox'; value?: string[]; defaultValue?: string[]; onValueChange?: (value: string[]) => void } ); /** Large cards for a choice that needs a sentence of explanation each. Native radios or checkboxes inside. */ export function Choicebox(props: ChoiceboxProps) { const { legend, options, name, className } = props; const auto = useId(); const multiple = props.type === 'checkbox'; const [own, setOwn] = useState(() => multiple ? (props.defaultValue ?? []) : props.defaultValue ? [props.defaultValue] : [], ); const selected: string[] = props.value === undefined ? own : multiple ? (props.value as string[]) : [props.value as string]; const change = (value: string, checked: boolean) => { const next = multiple ? (checked ? [...selected, value] : selected.filter((v) => v !== value)) : [value]; if (props.value === undefined) setOwn(next); if (props.type === 'checkbox') props.onValueChange?.(next); else props.onValueChange?.(value); }; return (

{legend}

{options.map((o) => ( change(o.value, e.currentTarget.checked)} /> {o.title} {o.description && {o.description}} ))}

); } 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":"@creance","registryDependencies":["https://creance.pages.dev/r/creance-base.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"choicebox/Choicebox.css","content":"$52","type":"registry:file","target":"@components/creance/choicebox/Choicebox.css"},{"path":"choicebox/Choicebox.tsx","content":"$53","type":"registry:ui","target":"@components/creance/choicebox/Choicebox.tsx"}],"className":"h-[70svh] min-h-80"}]]}]