4c: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4d: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4e:Tc23,import React, { createContext, useContext, useId, useState } from 'react'; import { getRadioState, radioGroupStyleKeys } from '../lib/core'; import type { RadioGroupBaseProps, RadioGroupItemBaseProps } from '../lib/core'; import styles from './radio-group.module.scss'; interface RadioGroupContextValue { value: string; name: string; disabled: boolean; select: (value: string) => void; } const RadioGroupContext = createContext(null); function useRadioGroupContext(): RadioGroupContextValue { const context = useContext(RadioGroupContext); if (!context) { throw new Error('RadioGroup sub-components must be used within .'); } return context; } export interface RadioGroupProps extends Omit, 'value' | 'defaultValue'>, RadioGroupBaseProps {} const RadioGroup = React.forwardRef( ({ className = '', value, defaultValue = '', onValueChange, orientation = 'vertical', name = '', disabled = false, children, ...props }, ref) => { const [internalValue, setInternalValue] = useState(defaultValue); const currentValue = value !== undefined ? value : internalValue; function select(next: string) { if (disabled) { return; } if (value === undefined) { setInternalValue(next); } onValueChange?.(next); } return (

{children}

); }, ); RadioGroup.displayName = 'RadioGroup'; export interface RadioGroupItemProps extends Omit, 'value' | 'checked'>, RadioGroupItemBaseProps { value: string; } const RadioGroupItem = React.forwardRef(({ className = '', value, disabled = false, onChange, children, ...props }, ref) => { const context = useRadioGroupContext(); const checked = context.value === value; const state = getRadioState(checked); const inputId = useId(); function handleChange(event: React.ChangeEvent) { context.select(value); onChange?.(event); } return ( {children} ); }); RadioGroupItem.displayName = 'RadioGroupItem'; export { RadioGroup, RadioGroupItem }; export default RadioGroup; 4f:T4e4,@use '../../../styles/variables/colors' as *; .root { display: grid; gap: $spacing-3; &[data-orientation='horizontal'] { grid-auto-flow: column; grid-auto-columns: max-content; } } .label { position: relative; display: inline-flex; flex-shrink: 0; cursor: pointer; } .input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; &:focus-visible + .item { border-color: $ring; box-shadow: 0 0 0 3px color-mix(in srgb, $ring 50%, transparent); } &:disabled { cursor: not-allowed; } &:disabled + .item { cursor: not-allowed; opacity: 0.5; } } .item { display: inline-flex; width: 1rem; height: 1rem; flex-shrink: 0; align-items: center; justify-content: center; border: 1px solid $input; border-radius: $radius-full; background-color: $background; color: $primary; transition: border-color $transition-fast, box-shadow $transition-fast, color $transition-fast; outline: none; &[data-state='checked'] { border-color: $primary; } } .indicator { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; } .dot { width: 0.5rem; height: 0.5rem; border-radius: $radius-full; background-color: currentColor; } 4b:["$","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,["$","$L4c",null,{"namespace":"@tile-ui","registryDependencies":["@tile-ui/core","@tile-ui/styles"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"packages/react/src/components/radio-group/radio-group.tsx","content":"$4e","type":"registry:ui","target":"components/ui/radio-group/radio-group.tsx"},{"path":"packages/styles/scss/components/radio-group.module.scss","content":"$4f","type":"registry:file","target":"components/ui/radio-group/radio-group.module.scss"},{"path":"packages/react/src/components/radio-group/index.ts","content":"export { RadioGroup, RadioGroupItem, type RadioGroupProps, type RadioGroupItemProps } from './radio-group';\n","type":"registry:ui","target":"components/ui/radio-group/index.ts"}],"className":"h-[70svh] min-h-80"}]]}]