52: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"] 53: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"] 54:T1225,import * as React from 'react' import { cn } from '@/lib/utils' import { optionTileClass } from '@/lib/option-tile' import { useMergedRefs } from '@/lib/merge-refs' export interface CheckboxGroupOption { value: T label: string /** * Optional icon rendered before the label. The DS bundles no icon library, so * pass the node directly (e.g. ``). */ icon?: React.ReactNode /** Dimmed and non-interactive, but still reachable by keyboard. */ disabled?: boolean } export interface CheckboxGroupProps { options: CheckboxGroupOption[] /** The chosen values. Order is irrelevant; membership is what renders. */ value: T[] onChange: (value: T[]) => void /** Names the group for assistive tech (caller-translated). */ 'aria-label'?: string /** Grid override. Defaults to two columns, three from `sm`. */ className?: string /** Inline styles for the root element. */ style?: React.CSSProperties } /** * Pick-any tile grid: the multi-select counterpart to `ToggleGroup`. * * `ToggleGroup` is a `radiogroup` by construction -- exactly one option, roving * tabindex, arrow keys to move the selection. That is the wrong widget when the * answer is a set, so this is a separate component rather than a `multiple` prop: * the ARIA roles differ, the keyboard model differs (every tile is tabbable and * Space toggles it, because there is no "current" option to rove from), and * `value` is an array. * * Both draw their tile from `optionTileClass`, so a pick-one and a pick-any * control look identical side by side. * * Presentational and i18n-free: pass translated labels and an `aria-label`. * Reaching for it means the whole set should be visible and switchable in one * gesture -- Icon Stack's eleven export platforms. If the set is long enough to * scroll, a list of switches is the better shape. * * ```tsx * ({ value: p, label: LABELS[p], icon: }))} * value={enabled} * onChange={setEnabled} * /> * ``` */ function CheckboxGroupInner( { options, value, onChange, className, style, 'aria-label': ariaLabel }: CheckboxGroupProps, ref: React.ForwardedRef, ) { const containerRef = React.useRef(null) const mergedRef = useMergedRefs(containerRef, ref) const toggle = React.useCallback( (option: T) => { onChange(value.includes(option) ? value.filter((v) => v !== option) : [...value, option]) }, [value, onChange], ) return (

{options.map((option) => { const checked = value.includes(option.value) return ( ) })}

) } // forwardRef erases the generic, so re-assert it on the export: CheckboxGroup // keeps `value`/`onChange` typed to the option union AND forwards a ref. const CheckboxGroupWithRef = React.forwardRef(CheckboxGroupInner) CheckboxGroupWithRef.displayName = 'CheckboxGroup' export const CheckboxGroup = CheckboxGroupWithRef as ( props: CheckboxGroupProps & { ref?: React.Ref }, ) => React.ReactElement 51:["$","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,["$","$L52",null,{"namespace":"@whiskeyjack","registryDependencies":["https://whiskeyjack.net/r/merge-refs.json","https://whiskeyjack.net/r/option-tile.json","https://whiskeyjack.net/r/utils.json"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"components/ui/checkbox-group.tsx","content":"$54","type":"registry:ui","target":"components/ui/checkbox-group.tsx"}],"className":"h-[70svh] min-h-80"}]]}]