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:T278b,import * as React from 'react' import { cn } from '@/lib/utils' import { useReducedMotion } from '@/hooks/use-reduced-motion' import { useSlidingIndicator } from '@/hooks/use-sliding-indicator' import { useTravelDirection } from '@/hooks/use-travel-direction' import { useMergedRefs } from '@/lib/merge-refs' import { COMPACT_CONTROL_HEIGHT, compactControlClass } from '@/lib/compact-control' export interface SegmentedControlOption { value: T label: string /** * Optional element rendered BEFORE the label, on the same line. The DS bundles * no icon library, so the caller passes the node: usually a Phosphor glyph, * but anything works -- Icon Stack passes a thumbnail of the image each * segment selects, because "Main" and "Alternate" say nothing about which * artwork you are choosing. */ icon?: React.ReactNode } export interface SegmentedControlProps { options: SegmentedControlOption[] value: T onChange: (value: T) => void /** Accessible name for the group. */ 'aria-label'?: string /** * Render the icons alone, with each option's `label` becoming its accessible * name and its tooltip rather than visible text. * * For the case where a pair of glyphs IS the vocabulary -- a sun and a moon, a * contain and a cover arrow -- and spelling it out costs more room than it * earns. It is all-or-nothing on purpose: a strip mixing labelled and bare * segments reads as one of them having failed to render. * * `label` stays required, because an icon-only control still has to say what it * is. Each segment gets both `aria-label` and `title` from it, per the * accessibility rule for icon-only controls. */ hideLabels?: boolean /** * `sm` (default, 32px) is the compact strip that sits on a line with body * text, matching the size chips and toggle pills built from * `compactControlClass`. `md` is 42px, the shared control height, for a * segmented control standing on its own rather than trailing a settings row. */ size?: 'sm' | 'md' className?: string /** Inline styles for the root element. */ style?: React.CSSProperties } /** * Compact pick-one control: one bordered strip, divided into segments. * * ## Why this is not a size variant of `ToggleGroup` * * `ToggleGroup` is a grid of separate tiles, each bordered, icon stacked above * the label, sized to be the primary choice on a settings screen. This is a * single bordered strip with internal dividers, icon beside the label, sized to * sit ON A LINE with body text as the trailing control of a labelled row. * * Those are two constructions, not two sizes. A `size="sm"` on `ToggleGroup` * would have to change the border from per-tile to per-group, the icon from * stacked to inline, and the layout from a gap-separated grid to a joined strip * -- at which point the only thing the two share is the word "toggle". Keeping * them separate means each stays legible on its own terms. * * What they DO share is behaviour, and that is deliberate: same `radiogroup` * role, same roving `tabIndex`, same arrow-key wrap-around, same accent fill on * the selected option. A control that looks different should not also *act* * different, so the keyboard model here is `ToggleGroup`'s, and a test pins the * two against each other. * * Reach for `ToggleGroup` when the choice is the point of the screen, and this * when the choice is one row among many. * * ```tsx * }, * { value: 'cover', label: t('source.cover'), icon: }, * ]} * value={fit} * onChange={setFit} * /> * ``` */ function SegmentedControlInner( { options, value, onChange, hideLabels, size = 'sm', className, ...rest }: SegmentedControlProps, ref: React.ForwardedRef, ) { const containerRef = React.useRef(null) const mergedRef = useMergedRefs(containerRef, ref) const reduced = useReducedMotion() // The accent fill is one pill that slides, rather than a background switching // between segments -- the same measurement the TabBar underline rides on. const indicator = useSlidingIndicator(containerRef, value, { attribute: 'data-segment', changeKey: options.map((o) => o.value).join('\n'), }) // Which edge of the pill leads depends on the direction of travel, so // `data-dir` names it. Shared with the two travelling nav highlights. const direction = useTravelDirection(options.findIndex((o) => o.value === value)) // Deliberately identical to ToggleGroup's: both are single-select radiogroups, // and a user who learns one should not have to relearn the other. 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 (

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

) } export const SegmentedControl = React.forwardRef(SegmentedControlInner) as < T extends string = string, >( props: SegmentedControlProps & { ref?: React.ForwardedRef }, ) => 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/compact-control.json","https://whiskeyjack.net/r/merge-refs.json","https://whiskeyjack.net/r/use-reduced-motion.json","https://whiskeyjack.net/r/use-sliding-indicator.json","https://whiskeyjack.net/r/use-travel-direction.json","https://whiskeyjack.net/r/utils.json"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"components/ui/segmented-control.tsx","content":"$54","type":"registry:ui","target":"components/ui/segmented-control.tsx"}],"className":"h-[70svh] min-h-80"}]]}]