@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
1 lines • 4.18 kB
Source Map (JSON)
{"version":3,"file":"radio-group.cjs","names":["component","useRootComponentProps","useRadioGroup","rest","Radio","value","RadioPropsContext","RadioGroupContext","Group"],"sources":["../../../../src/components/radio/radio-group.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement, ReactNode } from \"react\"\nimport type {\n GenericsComponent,\n ThemeProps,\n WithoutThemeProps,\n} from \"../../core\"\nimport type { GroupProps } from \"../group\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { RadioProps } from \"./radio\"\nimport type { RadioStyle } from \"./radio.style\"\nimport type { UseRadioGroupProps } from \"./use-radio-group\"\nimport { useMemo } from \"react\"\nimport { Group } from \"../group\"\nimport {\n component,\n Radio,\n RadioPropsContext,\n useRootComponentProps,\n} from \"./radio\"\nimport { RadioGroupContext, useRadioGroup } from \"./use-radio-group\"\n\nexport interface RadioGroupItem<Y extends string = string>\n extends RadioProps<Y> {\n label: ReactNode\n}\n\nexport interface RadioGroupRootProps<Y extends string = string>\n extends Omit<\n WithoutThemeProps<GroupProps, RadioStyle>,\n \"defaultValue\" | \"onChange\" | \"value\"\n >,\n ThemeProps<RadioStyle>,\n UseRadioGroupProps<Y>,\n UseInputBorderProps {\n /**\n * If provided, generate options based on items.\n *\n * @default []\n */\n items?: RadioGroupItem<Y>[]\n}\n\n/**\n * `RadioGroup` is a component that groups `Radio` components.\n *\n * @see https://yamada-ui.com/docs/components/radio\n */\nexport const RadioGroupRoot = component<\"div\", RadioGroupRootProps>((props) => {\n const [\n ,\n {\n colorScheme,\n size,\n variant,\n children,\n disabled,\n errorBorderColor,\n focusBorderColor,\n invalid,\n items = [],\n readOnly,\n shape,\n ...rest\n },\n ] = useRootComponentProps(props, \"group\", {\n transferProps: [\"variant\", \"colorScheme\", \"size\", \"shape\"],\n })\n const { name, value, getInputProps, getLabelProps, getRootProps, onChange } =\n useRadioGroup(rest)\n const computedChildren = useMemo(() => {\n if (children) return children\n\n return items.map(({ label, value, ...rest }, index) => (\n <Radio key={value ?? index} value={value} {...rest}>\n {label}\n </Radio>\n ))\n }, [items, children])\n const context = useMemo(\n () => ({\n colorScheme,\n size,\n variant,\n disabled,\n errorBorderColor,\n focusBorderColor,\n invalid,\n readOnly,\n shape,\n }),\n [\n variant,\n size,\n colorScheme,\n shape,\n disabled,\n invalid,\n readOnly,\n errorBorderColor,\n focusBorderColor,\n ],\n )\n const groupContext = useMemo(\n () => ({ name, value, getInputProps, getLabelProps, onChange }),\n [name, value, getInputProps, getLabelProps, onChange],\n )\n\n return (\n <RadioPropsContext value={context}>\n <RadioGroupContext value={groupContext}>\n <Group orientation=\"vertical\" {...getRootProps()}>\n {computedChildren}\n </Group>\n </RadioGroupContext>\n </RadioPropsContext>\n )\n}, \"group\")() as GenericsComponent<{\n <Y extends string = string>(props: RadioGroupRootProps<Y>): ReactElement\n}>\n\nexport { Radio as RadioGroupItem }\n"],"mappings":";;;;;;;;;;;;;;;;;;AAiDA,MAAa,iBAAiBA,yBAAuC,UAAU;CAC7E,MAAM,GAEJ,EACE,aACA,MACA,SACA,UACA,UACA,kBACA,kBACA,SACA,QAAQ,EAAE,EACV,UACA,MACA,GAAG,UAEHC,oCAAsB,OAAO,SAAS,EACxC,eAAe;EAAC;EAAW;EAAe;EAAQ;EAAQ,EAC3D,CAAC;CACF,MAAM,EAAE,MAAM,OAAO,eAAe,eAAe,cAAc,aAC/DC,sCAAc,KAAK;CACrB,MAAM,4CAAiC;AACrC,MAAI,SAAU,QAAO;AAErB,SAAO,MAAM,KAAK,EAAE,OAAO,eAAO,GAAGC,UAAQ,UAC3C,2CAACC;GAA2B,OAAOC;GAAO,GAAIF;aAC3C;KADSE,WAAS,MAEb,CACR;IACD,CAAC,OAAO,SAAS,CAAC;AA8BrB,QACE,2CAACC;EAAkB,iCA7BZ;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,GACD;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CACF;YAQG,2CAACC;GAAkB,iCANd;IAAE;IAAM;IAAO;IAAe;IAAe;IAAU,GAC9D;IAAC;IAAM;IAAO;IAAe;IAAe;IAAS,CACtD;aAKK,2CAACC;IAAM,aAAY;IAAW,GAAI,cAAc;cAC7C;KACK;IACU;GACF;GAErB,QAAQ,EAAE"}