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:T1482,import * as React from 'react' import { cn } from '@/lib/utils' import { optionTileClass } from '@/lib/option-tile' import { useMergedRefs } from '@/lib/merge-refs' export interface ToggleGroupOption { value: T label: string /** * Optional icon element rendered above the label. The DS avoids bundling an * icon library so the caller passes the icon node directly * (e.g. ``). */ icon?: React.ReactNode } export interface ToggleGroupProps { options: ToggleGroupOption[] value: T onChange: (value: T) => void className?: string /** * Tiles per row. Defaults to one column per option, so every option sits on * a single row; pass a smaller number to wrap onto further rows. */ columns?: number /** Inline styles for the root element. */ style?: React.CSSProperties } /** * Segmented control (toggle group). Presentational only -- no theme or * sort logic inside. Pass translated option labels; the DS is i18n-free. * * Active option renders with the accent color. A check mark is shown in the * top-right corner of the selected tile. Supports an optional icon per option * (pass icon ReactNodes; the DS does not bundle an icon library). * * Layout: a `grid` whose column count is an inline `gridTemplateColumns`, one * column per option by default. An inline style outranks any class, so a * `grid-cols-*` in `className` has no effect; wrap with the `columns` prop. * * Usage: * * ```tsx * const themeOptions = [ * { value: 'light', label: t('settings.light'), icon: }, * { value: 'dark', label: t('settings.dark'), icon: }, * { value: 'system', label: t('settings.system'), icon: }, * ] * * * ``` */ function ToggleGroupInner( { options, value, onChange, className, columns, style }: ToggleGroupProps, ref: React.ForwardedRef, ) { const containerRef = React.useRef(null) const mergedRef = useMergedRefs(containerRef, ref) const handleKeyDown = React.useCallback( (e: React.KeyboardEvent) => { if (!options.length) return const currentIndex = options.findIndex((o) => o.value === value) let nextIndex: number | null = null if (e.key === 'ArrowRight' || e.key === 'ArrowDown') { nextIndex = currentIndex < options.length - 1 ? currentIndex + 1 : 0 } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') { nextIndex = currentIndex > 0 ? currentIndex - 1 : options.length - 1 } if (nextIndex !== null) { e.preventDefault() const next = options[nextIndex] onChange(next.value as T) const btn = containerRef.current?.querySelectorAll('[role="radio"]')[nextIndex] btn?.focus() } }, [options, value, onChange] ) return (

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

) } // forwardRef erases the generic type parameter, so re-assert it on the exported // component: ToggleGroup keeps `value`/`onChange` typed to the option union AND // forwards a ref to the radiogroup element. const ToggleGroupWithRef = React.forwardRef(ToggleGroupInner) ToggleGroupWithRef.displayName = 'ToggleGroup' export const ToggleGroup = ToggleGroupWithRef as ( props: ToggleGroupProps & { 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/toggle-group.tsx","content":"$54","type":"registry:ui","target":"components/ui/toggle-group.tsx"}],"className":"h-[70svh] min-h-80"}]]}]