@yamada-ui/radio 1.2.16-next-20241126134247 → 1.3.0-next-20241126142838

Sign up to get free protection for your applications and to get access to all the features.
Files changed (88) hide show
  1. package/dist/chunk-27VC2SJI.mjs +30 -0
  2. package/dist/chunk-27VC2SJI.mjs.map +1 -0
  3. package/dist/chunk-AOVCDCCW.mjs +88 -0
  4. package/dist/chunk-AOVCDCCW.mjs.map +1 -0
  5. package/dist/chunk-DO4JVJRM.mjs +103 -0
  6. package/dist/chunk-DO4JVJRM.mjs.map +1 -0
  7. package/dist/{chunk-PUPRIHYJ.mjs → chunk-HFS5TQ47.mjs} +8 -115
  8. package/dist/chunk-HFS5TQ47.mjs.map +1 -0
  9. package/dist/chunk-JLL7F3NY.mjs +120 -0
  10. package/dist/chunk-JLL7F3NY.mjs.map +1 -0
  11. package/dist/chunk-NP4GICPF.mjs +124 -0
  12. package/dist/chunk-NP4GICPF.mjs.map +1 -0
  13. package/dist/chunk-Q5GTUIUF.mjs +56 -0
  14. package/dist/chunk-Q5GTUIUF.mjs.map +1 -0
  15. package/dist/chunk-YDYOLCNG.mjs +94 -0
  16. package/dist/chunk-YDYOLCNG.mjs.map +1 -0
  17. package/dist/chunk-YRIADAI7.mjs +32 -0
  18. package/dist/chunk-YRIADAI7.mjs.map +1 -0
  19. package/dist/chunk-ZLJHOIFP.mjs +26 -0
  20. package/dist/chunk-ZLJHOIFP.mjs.map +1 -0
  21. package/dist/index.d.mts +11 -4
  22. package/dist/index.d.ts +11 -4
  23. package/dist/index.js +344 -37
  24. package/dist/index.js.map +1 -1
  25. package/dist/index.mjs +29 -5
  26. package/dist/radio-card-addon.d.mts +8 -0
  27. package/dist/radio-card-addon.d.ts +8 -0
  28. package/dist/radio-card-addon.js +69 -0
  29. package/dist/radio-card-addon.js.map +1 -0
  30. package/dist/radio-card-addon.mjs +9 -0
  31. package/dist/radio-card-addon.mjs.map +1 -0
  32. package/dist/radio-card-description.d.mts +8 -0
  33. package/dist/radio-card-description.d.ts +8 -0
  34. package/dist/radio-card-description.js +67 -0
  35. package/dist/radio-card-description.js.map +1 -0
  36. package/dist/radio-card-description.mjs +9 -0
  37. package/dist/radio-card-description.mjs.map +1 -0
  38. package/dist/radio-card-group.d.mts +33 -0
  39. package/dist/radio-card-group.d.ts +33 -0
  40. package/dist/radio-card-group.js +584 -0
  41. package/dist/radio-card-group.js.map +1 -0
  42. package/dist/radio-card-group.mjs +15 -0
  43. package/dist/radio-card-group.mjs.map +1 -0
  44. package/dist/radio-card-label.d.mts +22 -0
  45. package/dist/radio-card-label.d.ts +22 -0
  46. package/dist/radio-card-label.js +93 -0
  47. package/dist/radio-card-label.js.map +1 -0
  48. package/dist/radio-card-label.mjs +9 -0
  49. package/dist/radio-card-label.mjs.map +1 -0
  50. package/dist/radio-card.d.mts +61 -0
  51. package/dist/radio-card.d.ts +61 -0
  52. package/dist/radio-card.js +412 -0
  53. package/dist/radio-card.js.map +1 -0
  54. package/dist/radio-card.mjs +13 -0
  55. package/dist/radio-card.mjs.map +1 -0
  56. package/dist/radio-context.d.mts +25 -3
  57. package/dist/radio-context.d.ts +25 -3
  58. package/dist/radio-context.js +16 -0
  59. package/dist/radio-context.js.map +1 -1
  60. package/dist/radio-context.mjs +9 -1
  61. package/dist/radio-group.d.mts +15 -58
  62. package/dist/radio-group.d.ts +15 -58
  63. package/dist/radio-group.js +56 -39
  64. package/dist/radio-group.js.map +1 -1
  65. package/dist/radio-group.mjs +7 -7
  66. package/dist/radio.d.mts +14 -80
  67. package/dist/radio.d.ts +14 -80
  68. package/dist/radio.js +31 -17
  69. package/dist/radio.js.map +1 -1
  70. package/dist/radio.mjs +5 -6
  71. package/dist/use-radio-group.d.mts +56 -0
  72. package/dist/use-radio-group.d.ts +56 -0
  73. package/dist/use-radio-group.js +111 -0
  74. package/dist/use-radio-group.js.map +1 -0
  75. package/dist/use-radio-group.mjs +8 -0
  76. package/dist/use-radio-group.mjs.map +1 -0
  77. package/dist/use-radio.d.mts +87 -0
  78. package/dist/use-radio.d.ts +87 -0
  79. package/dist/use-radio.js +207 -0
  80. package/dist/use-radio.js.map +1 -0
  81. package/dist/use-radio.mjs +8 -0
  82. package/dist/use-radio.mjs.map +1 -0
  83. package/package.json +7 -7
  84. package/dist/chunk-6FMV6NX2.mjs +0 -14
  85. package/dist/chunk-6FMV6NX2.mjs.map +0 -1
  86. package/dist/chunk-PUPRIHYJ.mjs.map +0 -1
  87. package/dist/chunk-QAADRIFZ.mjs +0 -177
  88. package/dist/chunk-QAADRIFZ.mjs.map +0 -1
@@ -0,0 +1,30 @@
1
+ "use client"
2
+ import {
3
+ useRadioCardContext
4
+ } from "./chunk-ZLJHOIFP.mjs";
5
+
6
+ // src/radio-card-description.tsx
7
+ import { forwardRef } from "@yamada-ui/core";
8
+ import { ui } from "@yamada-ui/core";
9
+ import { cx } from "@yamada-ui/utils";
10
+ import { jsx } from "react/jsx-runtime";
11
+ var RadioCardDescription = forwardRef(({ className, ...rest }, ref) => {
12
+ const { styles } = useRadioCardContext();
13
+ const css = { ...styles.description };
14
+ return /* @__PURE__ */ jsx(
15
+ ui.div,
16
+ {
17
+ ref,
18
+ className: cx("ui-radio-card__description", className),
19
+ __css: css,
20
+ ...rest
21
+ }
22
+ );
23
+ });
24
+ RadioCardDescription.displayName = "RadioCardDescription";
25
+ RadioCardDescription.__ui__ = "RadioCardDescription";
26
+
27
+ export {
28
+ RadioCardDescription
29
+ };
30
+ //# sourceMappingURL=chunk-27VC2SJI.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/radio-card-description.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport { forwardRef } from \"@yamada-ui/core\"\nimport { ui } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useRadioCardContext } from \"./radio-context\"\n\nexport interface RadioCardDescriptionProps extends HTMLUIProps {}\n\nexport const RadioCardDescription = forwardRef<\n RadioCardDescriptionProps,\n \"div\"\n>(({ className, ...rest }, ref) => {\n const { styles } = useRadioCardContext()\n\n const css: CSSUIObject = { ...styles.description }\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-radio-card__description\", className)}\n __css={css}\n {...rest}\n />\n )\n})\n\nRadioCardDescription.displayName = \"RadioCardDescription\"\nRadioCardDescription.__ui__ = \"RadioCardDescription\"\n"],"mappings":";;;;;;AACA,SAAS,kBAAkB;AAC3B,SAAS,UAAU;AACnB,SAAS,UAAU;AAcf;AATG,IAAM,uBAAuB,WAGlC,CAAC,EAAE,WAAW,GAAG,KAAK,GAAG,QAAQ;AACjC,QAAM,EAAE,OAAO,IAAI,oBAAoB;AAEvC,QAAM,MAAmB,EAAE,GAAG,OAAO,YAAY;AAEjD,SACE;AAAA,IAAC,GAAG;AAAA,IAAH;AAAA,MACC;AAAA,MACA,WAAW,GAAG,8BAA8B,SAAS;AAAA,MACrD,OAAO;AAAA,MACN,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAED,qBAAqB,cAAc;AACnC,qBAAqB,SAAS;","names":[]}
@@ -0,0 +1,88 @@
1
+ "use client"
2
+
3
+ // src/use-radio-group.ts
4
+ import { useControllableState } from "@yamada-ui/use-controllable-state";
5
+ import { isObject, mergeRefs, useCallbackRef } from "@yamada-ui/utils";
6
+ import { useCallback, useId, useRef } from "react";
7
+ var isEvent = (value) => value && isObject(value) && isObject(value.target);
8
+ var useRadioGroup = ({
9
+ id,
10
+ name,
11
+ defaultValue,
12
+ isNative,
13
+ value: valueProp,
14
+ onChange: onChangeProp,
15
+ ...props
16
+ }) => {
17
+ const uuid = useId();
18
+ id != null ? id : id = uuid;
19
+ name != null ? name : name = `radio-${id}`;
20
+ const onChangeRef = useCallbackRef(onChangeProp);
21
+ const [value, setValue] = useControllableState({
22
+ defaultValue,
23
+ value: valueProp,
24
+ onChange: onChangeRef
25
+ });
26
+ const containerRef = useRef(null);
27
+ const onFocus = useCallback(() => {
28
+ const container = containerRef.current;
29
+ if (!container) return;
30
+ let query = `input:not(:disabled):checked`;
31
+ let firstInput = container.querySelector(query);
32
+ if (firstInput) {
33
+ firstInput.focus();
34
+ } else {
35
+ query = `input:not(:disabled)`;
36
+ firstInput = container.querySelector(query);
37
+ firstInput == null ? void 0 : firstInput.focus();
38
+ }
39
+ }, []);
40
+ const onChange = useCallback(
41
+ (evOrValue) => {
42
+ const nextValue = isEvent(evOrValue) ? evOrValue.target.value : evOrValue;
43
+ setValue(nextValue);
44
+ },
45
+ [setValue]
46
+ );
47
+ const getContainerProps = useCallback(
48
+ (props2 = {}, ref = null) => ({
49
+ role: "radiogroup",
50
+ ...props2,
51
+ ref: mergeRefs(ref, containerRef)
52
+ }),
53
+ []
54
+ );
55
+ const getRadioProps = useCallback(
56
+ (props2 = {}, ref = null) => {
57
+ const checked = props2.value === value;
58
+ return {
59
+ ...props2,
60
+ ref,
61
+ name,
62
+ "aria-checked": checked,
63
+ [isNative ? "checked" : "isChecked"]: (
64
+ // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
65
+ value != null ? checked : void 0
66
+ ),
67
+ onChange
68
+ };
69
+ },
70
+ [name, value, onChange, isNative]
71
+ );
72
+ return {
73
+ id,
74
+ name,
75
+ props,
76
+ setValue,
77
+ value,
78
+ getContainerProps,
79
+ getRadioProps,
80
+ onChange,
81
+ onFocus
82
+ };
83
+ };
84
+
85
+ export {
86
+ useRadioGroup
87
+ };
88
+ //# sourceMappingURL=chunk-AOVCDCCW.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/use-radio-group.ts"],"sourcesContent":["import type { PropGetter } from \"@yamada-ui/core\"\nimport type { Dict } from \"@yamada-ui/utils\"\nimport type { ChangeEvent } from \"react\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { isObject, mergeRefs, useCallbackRef } from \"@yamada-ui/utils\"\nimport { useCallback, useId, useRef } from \"react\"\n\nconst isEvent = (value: any): value is { target: HTMLInputElement } =>\n value && isObject(value) && isObject(value.target)\n\nexport interface UseRadioGroupProps<Y extends number | string = string> {\n /**\n * The top-level id string that will be applied to the radios.\n * The index of the radio will be appended to this top-level id.\n */\n id?: string\n /**\n * The HTML `name` attribute used for forms.\n */\n name?: string\n /**\n * The initial value of the radio group.\n */\n defaultValue?: Y\n /**\n * If `true`, input elements will receive `checked` attribute instead of `isChecked`.\n *\n * This assumes, you're using native radio inputs.\n *\n * @default false\n */\n isNative?: boolean\n /**\n * The value of the radio group.\n */\n value?: Y\n /**\n * The callback fired when any children radio is checked or unchecked.\n */\n onChange?: (value: Y) => void\n}\n\nexport const useRadioGroup = <\n Y extends number | string,\n M extends Dict = Dict,\n>({\n id,\n name,\n defaultValue,\n isNative,\n value: valueProp,\n onChange: onChangeProp,\n ...props\n}: M & UseRadioGroupProps<Y>) => {\n const uuid = useId()\n\n id ??= uuid\n name ??= `radio-${id}`\n\n const onChangeRef = useCallbackRef(onChangeProp)\n\n const [value, setValue] = useControllableState({\n defaultValue,\n value: valueProp,\n onChange: onChangeRef,\n })\n\n const containerRef = useRef<any>(null)\n\n const onFocus = useCallback(() => {\n const container = containerRef.current\n\n if (!container) return\n\n let query = `input:not(:disabled):checked`\n\n let firstInput = container.querySelector(query) as HTMLElement | undefined\n\n if (firstInput) {\n firstInput.focus()\n } else {\n query = `input:not(:disabled)`\n firstInput = container.querySelector(query) as HTMLElement | undefined\n\n firstInput?.focus()\n }\n }, [])\n\n const onChange = useCallback(\n (evOrValue: ChangeEvent<HTMLInputElement> | Y) => {\n const nextValue = (\n isEvent(evOrValue) ? evOrValue.target.value : evOrValue\n ) as Y\n\n setValue(nextValue)\n },\n [setValue],\n )\n\n const getContainerProps: PropGetter = useCallback(\n (props = {}, ref = null) => ({\n role: \"radiogroup\",\n ...props,\n ref: mergeRefs(ref, containerRef),\n }),\n [],\n )\n\n const getRadioProps: PropGetter<\n { value?: Y },\n {\n checked?: boolean\n isChecked?: boolean\n value?: Y\n }\n > = useCallback(\n (props = {}, ref = null) => {\n const checked = props.value === value\n\n return {\n ...props,\n ref,\n name,\n \"aria-checked\": checked,\n [isNative ? \"checked\" : \"isChecked\"]:\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n value != null ? checked : undefined,\n onChange,\n }\n },\n [name, value, onChange, isNative],\n )\n\n return {\n id,\n name,\n props,\n setValue,\n value,\n getContainerProps,\n getRadioProps,\n onChange,\n onFocus,\n }\n}\n\nexport type UseRadioGroupReturn<Y extends number | string = string> =\n ReturnType<typeof useRadioGroup<Y>>\n"],"mappings":";;;AAGA,SAAS,4BAA4B;AACrC,SAAS,UAAU,WAAW,sBAAsB;AACpD,SAAS,aAAa,OAAO,cAAc;AAE3C,IAAM,UAAU,CAAC,UACf,SAAS,SAAS,KAAK,KAAK,SAAS,MAAM,MAAM;AAkC5C,IAAM,gBAAgB,CAG3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,UAAU;AAAA,EACV,GAAG;AACL,MAAiC;AAC/B,QAAM,OAAO,MAAM;AAEnB,yBAAO;AACP,+BAAS,SAAS,EAAE;AAEpB,QAAM,cAAc,eAAe,YAAY;AAE/C,QAAM,CAAC,OAAO,QAAQ,IAAI,qBAAqB;AAAA,IAC7C;AAAA,IACA,OAAO;AAAA,IACP,UAAU;AAAA,EACZ,CAAC;AAED,QAAM,eAAe,OAAY,IAAI;AAErC,QAAM,UAAU,YAAY,MAAM;AAChC,UAAM,YAAY,aAAa;AAE/B,QAAI,CAAC,UAAW;AAEhB,QAAI,QAAQ;AAEZ,QAAI,aAAa,UAAU,cAAc,KAAK;AAE9C,QAAI,YAAY;AACd,iBAAW,MAAM;AAAA,IACnB,OAAO;AACL,cAAQ;AACR,mBAAa,UAAU,cAAc,KAAK;AAE1C,+CAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,WAAW;AAAA,IACf,CAAC,cAAiD;AAChD,YAAM,YACJ,QAAQ,SAAS,IAAI,UAAU,OAAO,QAAQ;AAGhD,eAAS,SAAS;AAAA,IACpB;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,QAAM,oBAAgC;AAAA,IACpC,CAACA,SAAQ,CAAC,GAAG,MAAM,UAAU;AAAA,MAC3B,MAAM;AAAA,MACN,GAAGA;AAAA,MACH,KAAK,UAAU,KAAK,YAAY;AAAA,IAClC;AAAA,IACA,CAAC;AAAA,EACH;AAEA,QAAM,gBAOF;AAAA,IACF,CAACA,SAAQ,CAAC,GAAG,MAAM,SAAS;AAC1B,YAAM,UAAUA,OAAM,UAAU;AAEhC,aAAO;AAAA,QACL,GAAGA;AAAA,QACH;AAAA,QACA;AAAA,QACA,gBAAgB;AAAA,QAChB,CAAC,WAAW,YAAY,WAAW;AAAA;AAAA,UAEjC,SAAS,OAAO,UAAU;AAAA;AAAA,QAC5B;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,MAAM,OAAO,UAAU,QAAQ;AAAA,EAClC;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":["props"]}
@@ -0,0 +1,103 @@
1
+ "use client"
2
+ import {
3
+ RadioCard
4
+ } from "./chunk-NP4GICPF.mjs";
5
+ import {
6
+ useRadioGroup
7
+ } from "./chunk-AOVCDCCW.mjs";
8
+ import {
9
+ RadioCardGroupProvider
10
+ } from "./chunk-ZLJHOIFP.mjs";
11
+
12
+ // src/radio-card-group.tsx
13
+ import { useFormControl } from "@yamada-ui/form-control";
14
+ import { Flex } from "@yamada-ui/layouts";
15
+ import { cx, getValidChildren } from "@yamada-ui/utils";
16
+ import { forwardRef } from "react";
17
+ import { jsx } from "react/jsx-runtime";
18
+ var RadioCardGroup = forwardRef(
19
+ ({
20
+ id: idProp,
21
+ className,
22
+ colorScheme,
23
+ size,
24
+ variant,
25
+ children,
26
+ direction = "row",
27
+ gap = "0.5rem",
28
+ items = [],
29
+ withIcon = true,
30
+ addonProps,
31
+ descriptionProps,
32
+ labelProps,
33
+ ...props
34
+ }, ref) => {
35
+ const {
36
+ isDisabled,
37
+ isInvalid,
38
+ isReadOnly,
39
+ isRequired,
40
+ labelId,
41
+ ...computedProps
42
+ } = useFormControl({
43
+ id: idProp,
44
+ ...props
45
+ });
46
+ const {
47
+ id,
48
+ name,
49
+ props: rest,
50
+ value,
51
+ getContainerProps,
52
+ onChange
53
+ } = useRadioGroup(computedProps);
54
+ const validChildren = getValidChildren(children);
55
+ let computedChildren = [];
56
+ if (!validChildren.length && items.length)
57
+ computedChildren = items.map((props2, i) => /* @__PURE__ */ jsx(RadioCard, { ...props2 }, i));
58
+ return /* @__PURE__ */ jsx(
59
+ RadioCardGroupProvider,
60
+ {
61
+ value: {
62
+ name,
63
+ colorScheme,
64
+ size,
65
+ variant,
66
+ isDisabled,
67
+ isInvalid,
68
+ isReadOnly,
69
+ isRequired,
70
+ value,
71
+ withIcon,
72
+ addonProps,
73
+ descriptionProps,
74
+ labelProps,
75
+ onChange
76
+ },
77
+ children: /* @__PURE__ */ jsx(
78
+ Flex,
79
+ {
80
+ ref,
81
+ className: cx("ui-radio-card-group", className),
82
+ gap,
83
+ w: "100%",
84
+ ...getContainerProps({
85
+ id,
86
+ "aria-labelledby": labelId,
87
+ ...rest
88
+ }),
89
+ direction,
90
+ children: children != null ? children : computedChildren
91
+ }
92
+ )
93
+ }
94
+ );
95
+ }
96
+ );
97
+ RadioCardGroup.displayName = "RadioCardGroup";
98
+ RadioCardGroup.__ui__ = "RadioCardGroup";
99
+
100
+ export {
101
+ RadioCardGroup
102
+ };
103
+ //# sourceMappingURL=chunk-DO4JVJRM.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/radio-card-group.tsx"],"sourcesContent":["import type { ComponentArgs, ThemeProps } from \"@yamada-ui/core\"\nimport type { ForwardedRef, ReactElement, RefAttributes } from \"react\"\nimport type { RadioCardProps } from \"./radio-card\"\nimport type { RadioCardGroupContext } from \"./radio-context\"\nimport type { RadioGroupSharedProps } from \"./radio-group\"\nimport { useFormControl } from \"@yamada-ui/form-control\"\nimport { Flex } from \"@yamada-ui/layouts\"\nimport { cx, getValidChildren } from \"@yamada-ui/utils\"\nimport { forwardRef } from \"react\"\nimport { RadioCard } from \"./radio-card\"\nimport { RadioCardGroupProvider } from \"./radio-context\"\nimport { useRadioGroup } from \"./use-radio-group\"\n\nexport type RadioCardItem<Y extends number | string = string> =\n RadioCardProps<Y>\n\nexport interface RadioCardGroupProps<Y extends number | string = string>\n extends RadioGroupSharedProps<Y>,\n Pick<\n RadioCardProps,\n \"addonProps\" | \"descriptionProps\" | \"labelProps\" | \"withIcon\"\n >,\n ThemeProps<\"RadioCard\"> {\n /**\n * If provided, generate radio cards based on items.\n *\n * @default '[]'\n */\n items?: RadioCardItem<Y>[]\n}\n\n/**\n * `RadioCardGroup` is a component that groups `RadioCard` components.\n *\n * @see Docs https://yamada-ui.com/components/forms/radio-card\n */\nexport const RadioCardGroup = forwardRef(\n <Y extends number | string = string>(\n {\n id: idProp,\n className,\n colorScheme,\n size,\n variant,\n children,\n direction = \"row\",\n gap = \"0.5rem\",\n items = [],\n withIcon = true,\n addonProps,\n descriptionProps,\n labelProps,\n ...props\n }: RadioCardGroupProps<Y>,\n ref: ForwardedRef<HTMLDivElement>,\n ) => {\n const {\n isDisabled,\n isInvalid,\n isReadOnly,\n isRequired,\n labelId,\n ...computedProps\n } = useFormControl({\n id: idProp,\n ...props,\n })\n const {\n id,\n name,\n props: rest,\n value,\n getContainerProps,\n onChange,\n } = useRadioGroup(computedProps)\n\n const validChildren = getValidChildren(children)\n let computedChildren: ReactElement[] = []\n\n if (!validChildren.length && items.length)\n computedChildren = items.map((props, i) => (\n <RadioCard key={i} {...props} />\n ))\n\n return (\n <RadioCardGroupProvider\n value={\n {\n name,\n colorScheme,\n size,\n variant,\n isDisabled,\n isInvalid,\n isReadOnly,\n isRequired,\n value,\n withIcon,\n addonProps,\n descriptionProps,\n labelProps,\n onChange,\n } as RadioCardGroupContext\n }\n >\n <Flex\n ref={ref}\n className={cx(\"ui-radio-card-group\", className)}\n gap={gap}\n w=\"100%\"\n {...getContainerProps({\n id,\n \"aria-labelledby\": labelId,\n ...rest,\n })}\n direction={direction}\n >\n {children ?? computedChildren}\n </Flex>\n </RadioCardGroupProvider>\n )\n },\n) as {\n <Y extends number | string = string>(\n props: RadioCardGroupProps<Y> & RefAttributes<HTMLDivElement>,\n ): ReactElement\n} & ComponentArgs\n\nRadioCardGroup.displayName = \"RadioCardGroup\"\nRadioCardGroup.__ui__ = \"RadioCardGroup\"\n"],"mappings":";;;;;;;;;;;;AAKA,SAAS,sBAAsB;AAC/B,SAAS,YAAY;AACrB,SAAS,IAAI,wBAAwB;AACrC,SAAS,kBAAkB;AAyEnB;AA7CD,IAAM,iBAAiB;AAAA,EAC5B,CACE;AAAA,IACE,IAAI;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,MAAM;AAAA,IACN,QAAQ,CAAC;AAAA,IACT,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,IAAI,eAAe;AAAA,MACjB,IAAI;AAAA,MACJ,GAAG;AAAA,IACL,CAAC;AACD,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI,cAAc,aAAa;AAE/B,UAAM,gBAAgB,iBAAiB,QAAQ;AAC/C,QAAI,mBAAmC,CAAC;AAExC,QAAI,CAAC,cAAc,UAAU,MAAM;AACjC,yBAAmB,MAAM,IAAI,CAACA,QAAO,MACnC,oBAAC,aAAmB,GAAGA,UAAP,CAAc,CAC/B;AAEH,WACE;AAAA,MAAC;AAAA;AAAA,QACC,OACE;AAAA,UACE;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QAGF;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,WAAW,GAAG,uBAAuB,SAAS;AAAA,YAC9C;AAAA,YACA,GAAE;AAAA,YACD,GAAG,kBAAkB;AAAA,cACpB;AAAA,cACA,mBAAmB;AAAA,cACnB,GAAG;AAAA,YACL,CAAC;AAAA,YACD;AAAA,YAEC,wCAAY;AAAA;AAAA,QACf;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAMA,eAAe,cAAc;AAC7B,eAAe,SAAS;","names":["props"]}
@@ -1,26 +1,18 @@
1
1
  "use client"
2
- import {
3
- useRadioGroupContext
4
- } from "./chunk-6FMV6NX2.mjs";
5
2
 
6
- // src/radio.tsx
7
- import { omitThemeProps, ui, useComponentMultiStyle } from "@yamada-ui/core";
3
+ // src/use-radio.ts
8
4
  import {
9
5
  formControlProperties,
10
- useFormControl,
11
6
  useFormControlProps
12
7
  } from "@yamada-ui/form-control";
13
8
  import { trackFocusVisible } from "@yamada-ui/use-focus-visible";
14
9
  import {
15
- cx,
16
10
  dataAttr,
17
- funcAll,
18
11
  handlerAll,
19
12
  splitObject,
20
13
  useCallbackRef
21
14
  } from "@yamada-ui/utils";
22
- import { forwardRef, useCallback, useEffect, useId, useState } from "react";
23
- import { jsx, jsxs } from "react/jsx-runtime";
15
+ import { useCallback, useEffect, useId, useState } from "react";
24
16
  var useRadio = ({
25
17
  id,
26
18
  ...props
@@ -92,9 +84,11 @@ var useRadio = ({
92
84
  ...formControlProps,
93
85
  ...props2,
94
86
  ref,
95
- "data-checked": dataAttr(resolvedChecked)
87
+ "data-checked": dataAttr(resolvedChecked),
88
+ "data-focus": dataAttr(focused),
89
+ "data-focus-visible": dataAttr(focused && focusVisible)
96
90
  }),
97
- [resolvedChecked, formControlProps]
91
+ [resolvedChecked, formControlProps, focused, focusVisible]
98
92
  );
99
93
  const getIconProps = useCallback(
100
94
  (props2 = {}, ref = null) => ({
@@ -191,109 +185,8 @@ var useRadio = ({
191
185
  getLabelProps
192
186
  };
193
187
  };
194
- var Radio = forwardRef(
195
- (props, ref) => {
196
- var _a, _b, _c, _d, _e;
197
- const group = useRadioGroupContext();
198
- const { value: groupValue, ...groupProps } = { ...group };
199
- const control = useFormControl(props);
200
- const [styles, mergedProps] = useComponentMultiStyle("Radio", {
201
- ...groupProps,
202
- ...props
203
- });
204
- const {
205
- className,
206
- children,
207
- gap = "0.5rem",
208
- isDisabled = (_a = groupProps.isDisabled) != null ? _a : control.isDisabled,
209
- isInvalid = (_b = groupProps.isInvalid) != null ? _b : control.isInvalid,
210
- isReadOnly = (_c = groupProps.isReadOnly) != null ? _c : control.isReadOnly,
211
- isRequired = (_d = groupProps.isRequired) != null ? _d : control.isRequired,
212
- iconProps,
213
- inputProps,
214
- labelProps,
215
- ...computedProps
216
- } = omitThemeProps(mergedProps);
217
- (_e = computedProps.checked) != null ? _e : computedProps.checked = computedProps.isChecked;
218
- const checkedProp = groupValue && computedProps.value ? groupValue === computedProps.value : computedProps.checked;
219
- const onChange = groupProps.onChange && computedProps.value ? funcAll(groupProps.onChange, computedProps.onChange) : computedProps.onChange;
220
- const {
221
- checked,
222
- props: rest,
223
- getContainerProps,
224
- getIconProps,
225
- getInputProps,
226
- getLabelProps
227
- } = useRadio({
228
- ...computedProps,
229
- checked: checkedProp,
230
- isDisabled,
231
- isInvalid,
232
- isReadOnly,
233
- isRequired,
234
- onChange
235
- });
236
- const tabIndex = !groupValue ? 0 : checked ? 0 : -1;
237
- return /* @__PURE__ */ jsxs(
238
- ui.label,
239
- {
240
- className: cx("ui-radio", className),
241
- ...getContainerProps(rest),
242
- __css: {
243
- alignItems: "center",
244
- cursor: "pointer",
245
- display: "inline-flex",
246
- gap,
247
- position: "relative",
248
- verticalAlign: "top",
249
- ...styles.container
250
- },
251
- children: [
252
- /* @__PURE__ */ jsx(
253
- ui.input,
254
- {
255
- className: "ui-radio__input",
256
- ...getInputProps(
257
- {
258
- ...inputProps,
259
- tabIndex
260
- },
261
- ref
262
- )
263
- }
264
- ),
265
- /* @__PURE__ */ jsx(
266
- ui.div,
267
- {
268
- className: "ui-radio__icon",
269
- ...getIconProps(iconProps),
270
- __css: {
271
- display: "inline-block",
272
- position: "relative",
273
- userSelect: "none",
274
- ...styles.icon
275
- }
276
- }
277
- ),
278
- /* @__PURE__ */ jsx(
279
- ui.span,
280
- {
281
- className: "ui-radio__label",
282
- ...getLabelProps(labelProps),
283
- __css: { ...styles.label },
284
- children
285
- }
286
- )
287
- ]
288
- }
289
- );
290
- }
291
- );
292
- Radio.displayName = "Radio";
293
- Radio.__ui__ = "Radio";
294
188
 
295
189
  export {
296
- useRadio,
297
- Radio
190
+ useRadio
298
191
  };
299
- //# sourceMappingURL=chunk-PUPRIHYJ.mjs.map
192
+ //# sourceMappingURL=chunk-HFS5TQ47.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/use-radio.ts"],"sourcesContent":["import type { PropGetter } from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport type { Dict } from \"@yamada-ui/utils\"\nimport type {\n ChangeEvent,\n ChangeEventHandler,\n KeyboardEvent,\n SyntheticEvent,\n} from \"react\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport { trackFocusVisible } from \"@yamada-ui/use-focus-visible\"\nimport {\n dataAttr,\n handlerAll,\n splitObject,\n useCallbackRef,\n} from \"@yamada-ui/utils\"\nimport { useCallback, useEffect, useId, useState } from \"react\"\n\nexport interface UseRadioProps<Y extends number | string = string>\n extends FormControlOptions {\n /**\n * id assigned to input.\n */\n id?: string\n /**\n * The name of the input field in a radio.\n */\n name?: string\n /**\n * If `true`, the radio will be checked.\n *\n * @default false\n */\n checked?: boolean\n /**\n * If `true`, the radio will be initially checked.\n *\n * @default false\n */\n defaultChecked?: boolean\n /**\n * If `true`, the radio will be initially checked.\n *\n * @default false\n *\n * @deprecated Use `defaultChecked` instead.\n */\n defaultIsChecked?: boolean\n /**\n * If `true`, the radio will be checked.\n *\n * @default false\n *\n * @deprecated Use `checked` instead.\n */\n isChecked?: boolean\n /**\n * The value to be used in the radio button.\n */\n value?: Y\n /**\n * The callback invoked when the checked state changes.\n */\n onChange?: ChangeEventHandler<HTMLInputElement>\n}\n\nexport const useRadio = <\n Y extends number | string = string,\n M extends Dict = Dict,\n>({\n id,\n ...props\n}: M & UseRadioProps<Y>) => {\n const uuid = useId()\n\n id ??= uuid\n\n let {\n id: _id,\n name,\n checked: checkedProp,\n defaultChecked,\n defaultIsChecked,\n isChecked: isCheckedProp,\n value,\n onChange: onChangeProp,\n ...computedProps\n } = useFormControlProps({ id, ...props })\n\n checkedProp ??= isCheckedProp\n defaultChecked ??= defaultIsChecked\n\n const [\n {\n \"aria-readonly\": _ariaReadonly,\n disabled,\n readOnly,\n required,\n onBlur: onBlurProp,\n onFocus: onFocusProp,\n ...formControlProps\n },\n rest,\n ] = splitObject(computedProps, formControlProperties)\n\n const [focusVisible, setFocusVisible] = useState<boolean>(false)\n const [focused, setFocused] = useState<boolean>(false)\n const [hovered, setHovered] = useState<boolean>(false)\n const [active, setActive] = useState<boolean>(false)\n\n const [checked, setChecked] = useState<boolean>(!!defaultChecked)\n\n const controlled = checkedProp !== undefined\n const resolvedChecked = controlled ? (checkedProp as boolean) : checked\n\n useEffect(() => {\n return trackFocusVisible(setFocusVisible)\n }, [])\n\n const onChange = useCallbackRef(\n (ev: ChangeEvent<HTMLInputElement>) => {\n if (readOnly || disabled) {\n ev.preventDefault()\n\n return\n }\n\n if (!controlled) setChecked(ev.target.checked)\n\n onChangeProp?.(ev)\n },\n [readOnly, disabled, controlled],\n )\n const onFocus = useCallbackRef(onFocusProp)\n const onBlur = useCallbackRef(onBlurProp)\n\n const onKeyDown = useCallback(\n ({ key }: KeyboardEvent) => {\n if (key === \" \") setActive(true)\n },\n [setActive],\n )\n\n const onKeyUp = useCallback(\n ({ key }: KeyboardEvent) => {\n if (key === \" \") setActive(false)\n },\n [setActive],\n )\n\n const getContainerProps: PropGetter<\"label\"> = useCallback(\n (props = {}, ref = null) => ({\n ...formControlProps,\n ...props,\n ref,\n \"data-checked\": dataAttr(resolvedChecked),\n \"data-focus\": dataAttr(focused),\n \"data-focus-visible\": dataAttr(focused && focusVisible),\n }),\n [resolvedChecked, formControlProps, focused, focusVisible],\n )\n\n const getIconProps: PropGetter = useCallback(\n (props = {}, ref = null) => ({\n ...formControlProps,\n ...props,\n ref,\n \"aria-hidden\": true,\n \"data-active\": dataAttr(active),\n \"data-checked\": dataAttr(resolvedChecked),\n \"data-focus\": dataAttr(focused),\n \"data-focus-visible\": dataAttr(focused && focusVisible),\n \"data-hover\": dataAttr(hovered),\n onMouseDown: handlerAll(props.onMouseDown, () => setActive(true)),\n onMouseEnter: handlerAll(props.onMouseEnter, () => setHovered(true)),\n onMouseLeave: handlerAll(props.onMouseLeave, () => setHovered(false)),\n onMouseUp: handlerAll(props.onMouseUp, () => setActive(false)),\n }),\n [resolvedChecked, active, focused, focusVisible, hovered, formControlProps],\n )\n\n const getInputProps: PropGetter<\"input\"> = useCallback(\n (props = {}, ref = null) => ({\n ...formControlProps,\n ...props,\n id,\n ref,\n type: \"radio\",\n name,\n style: {\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n margin: \"-1px\",\n overflow: \"hidden\",\n padding: \"0px\",\n position: \"absolute\",\n whiteSpace: \"nowrap\",\n width: \"1px\",\n },\n \"aria-checked\": resolvedChecked,\n checked: resolvedChecked,\n disabled,\n readOnly,\n required,\n value,\n onBlur: handlerAll(props.onBlur, onBlur, () => setFocused(false)),\n onChange: handlerAll(props.onChange, onChange),\n onFocus: handlerAll(props.onFocus, onFocus, () => setFocused(true)),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n onKeyUp: handlerAll(props.onKeyUp, onKeyUp),\n }),\n [\n formControlProps,\n id,\n name,\n value,\n required,\n disabled,\n readOnly,\n resolvedChecked,\n onChange,\n onBlur,\n onFocus,\n onKeyDown,\n onKeyUp,\n ],\n )\n\n const getLabelProps: PropGetter<\"span\"> = useCallback(\n (props = {}, ref = null) => ({\n ...formControlProps,\n ...props,\n ref,\n \"data-checked\": dataAttr(resolvedChecked),\n onMouseDown: handlerAll(props.onMouseDown, (ev: SyntheticEvent) => {\n ev.preventDefault()\n ev.stopPropagation()\n }),\n onTouchStart: handlerAll(props.onTouchStart, (ev: SyntheticEvent) => {\n ev.preventDefault()\n ev.stopPropagation()\n }),\n }),\n [resolvedChecked, formControlProps],\n )\n\n return {\n active,\n checked: resolvedChecked,\n focused,\n focusVisible,\n hovered,\n props: rest,\n getContainerProps,\n getIconProps,\n getInputProps,\n getLabelProps,\n }\n}\n\nexport type UseRadioReturn = ReturnType<typeof useRadio>\n"],"mappings":"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","names":["props"]}
@@ -0,0 +1,120 @@
1
+ "use client"
2
+ import {
3
+ useRadio
4
+ } from "./chunk-HFS5TQ47.mjs";
5
+ import {
6
+ useRadioGroupContext
7
+ } from "./chunk-ZLJHOIFP.mjs";
8
+
9
+ // src/radio.tsx
10
+ import { omitThemeProps, ui, useComponentMultiStyle } from "@yamada-ui/core";
11
+ import { useFormControl } from "@yamada-ui/form-control";
12
+ import { cx, funcAll } from "@yamada-ui/utils";
13
+ import { forwardRef } from "react";
14
+ import { jsx, jsxs } from "react/jsx-runtime";
15
+ var Radio = forwardRef(
16
+ (props, ref) => {
17
+ var _a, _b, _c, _d, _e;
18
+ const group = useRadioGroupContext();
19
+ const { value: groupValue, ...groupProps } = { ...group };
20
+ const control = useFormControl(props);
21
+ const [styles, mergedProps] = useComponentMultiStyle("Radio", {
22
+ ...groupProps,
23
+ ...props
24
+ });
25
+ const {
26
+ className,
27
+ children,
28
+ gap = "0.5rem",
29
+ isDisabled = (_a = groupProps.isDisabled) != null ? _a : control.isDisabled,
30
+ isInvalid = (_b = groupProps.isInvalid) != null ? _b : control.isInvalid,
31
+ isReadOnly = (_c = groupProps.isReadOnly) != null ? _c : control.isReadOnly,
32
+ isRequired = (_d = groupProps.isRequired) != null ? _d : control.isRequired,
33
+ label,
34
+ iconProps,
35
+ inputProps,
36
+ labelProps,
37
+ ...computedProps
38
+ } = omitThemeProps(mergedProps);
39
+ (_e = computedProps.checked) != null ? _e : computedProps.checked = computedProps.isChecked;
40
+ const checkedProp = groupValue && computedProps.value ? groupValue === computedProps.value : computedProps.checked;
41
+ const onChange = groupProps.onChange && computedProps.value ? funcAll(groupProps.onChange, computedProps.onChange) : computedProps.onChange;
42
+ const {
43
+ checked,
44
+ props: rest,
45
+ getContainerProps,
46
+ getIconProps,
47
+ getInputProps,
48
+ getLabelProps
49
+ } = useRadio({
50
+ ...computedProps,
51
+ checked: checkedProp,
52
+ isDisabled,
53
+ isInvalid,
54
+ isReadOnly,
55
+ isRequired,
56
+ onChange
57
+ });
58
+ const tabIndex = !groupValue ? 0 : checked ? 0 : -1;
59
+ return /* @__PURE__ */ jsxs(
60
+ ui.label,
61
+ {
62
+ className: cx("ui-radio", className),
63
+ ...getContainerProps(rest),
64
+ __css: {
65
+ alignItems: "center",
66
+ cursor: "pointer",
67
+ display: "inline-flex",
68
+ gap,
69
+ position: "relative",
70
+ verticalAlign: "top",
71
+ ...styles.container
72
+ },
73
+ children: [
74
+ /* @__PURE__ */ jsx(
75
+ ui.input,
76
+ {
77
+ className: "ui-radio__input",
78
+ ...getInputProps(
79
+ {
80
+ ...inputProps,
81
+ tabIndex
82
+ },
83
+ ref
84
+ )
85
+ }
86
+ ),
87
+ /* @__PURE__ */ jsx(
88
+ ui.div,
89
+ {
90
+ className: "ui-radio__icon",
91
+ ...getIconProps(iconProps),
92
+ __css: {
93
+ display: "inline-block",
94
+ position: "relative",
95
+ userSelect: "none",
96
+ ...styles.icon
97
+ }
98
+ }
99
+ ),
100
+ /* @__PURE__ */ jsx(
101
+ ui.span,
102
+ {
103
+ className: "ui-radio__label",
104
+ ...getLabelProps(labelProps),
105
+ __css: { ...styles.label },
106
+ children: children != null ? children : label
107
+ }
108
+ )
109
+ ]
110
+ }
111
+ );
112
+ }
113
+ );
114
+ Radio.displayName = "Radio";
115
+ Radio.__ui__ = "Radio";
116
+
117
+ export {
118
+ Radio
119
+ };
120
+ //# sourceMappingURL=chunk-JLL7F3NY.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/radio.tsx"],"sourcesContent":["import type { ComponentArgs, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport type {\n ForwardedRef,\n InputHTMLAttributes,\n ReactElement,\n ReactNode,\n RefAttributes,\n} from \"react\"\nimport type { UseRadioProps } from \"./use-radio\"\nimport { omitThemeProps, ui, useComponentMultiStyle } from \"@yamada-ui/core\"\nimport { useFormControl } from \"@yamada-ui/form-control\"\nimport { cx, funcAll } from \"@yamada-ui/utils\"\nimport { forwardRef } from \"react\"\nimport { useRadioGroupContext } from \"./radio-context\"\nimport { useRadio } from \"./use-radio\"\n\ninterface RadioOptions {\n /**\n * The label of the radio.\n */\n label?: ReactNode\n /**\n * Props for icon element.\n */\n iconProps?: HTMLUIProps<\"span\">\n /**\n * Props for input element.\n */\n inputProps?: InputHTMLAttributes<HTMLInputElement>\n /**\n * Props for label element.\n */\n labelProps?: HTMLUIProps<\"span\">\n}\n\nexport interface RadioProps<Y extends number | string = string>\n extends Omit<HTMLUIProps<\"label\">, keyof UseRadioProps>,\n ThemeProps<\"Radio\">,\n UseRadioProps<Y>,\n RadioOptions {}\n\n/**\n * `Radio` is a component used for allowing users to select one option from multiple choices.\n *\n * @see Docs https://yamada-ui.com/components/forms/radio\n */\nexport const Radio = forwardRef(\n <Y extends number | string = string>(\n props: RadioProps<Y>,\n ref: ForwardedRef<HTMLInputElement>,\n ) => {\n const group = useRadioGroupContext()\n const { value: groupValue, ...groupProps } = { ...group }\n const control = useFormControl(props)\n const [styles, mergedProps] = useComponentMultiStyle(\"Radio\", {\n ...groupProps,\n ...props,\n })\n const {\n className,\n children,\n gap = \"0.5rem\",\n isDisabled = groupProps.isDisabled ?? control.isDisabled,\n isInvalid = groupProps.isInvalid ?? control.isInvalid,\n isReadOnly = groupProps.isReadOnly ?? control.isReadOnly,\n isRequired = groupProps.isRequired ?? control.isRequired,\n label,\n iconProps,\n inputProps,\n labelProps,\n ...computedProps\n } = omitThemeProps(mergedProps)\n\n computedProps.checked ??= computedProps.isChecked\n\n const checkedProp =\n groupValue && computedProps.value\n ? groupValue === computedProps.value\n : computedProps.checked\n\n const onChange =\n groupProps.onChange && computedProps.value\n ? funcAll(groupProps.onChange, computedProps.onChange)\n : computedProps.onChange\n\n const {\n checked,\n props: rest,\n getContainerProps,\n getIconProps,\n getInputProps,\n getLabelProps,\n } = useRadio({\n ...computedProps,\n checked: checkedProp,\n isDisabled,\n isInvalid,\n isReadOnly,\n isRequired,\n onChange,\n })\n\n const tabIndex = !groupValue ? 0 : checked ? 0 : -1\n\n return (\n <ui.label\n className={cx(\"ui-radio\", className)}\n {...getContainerProps(rest)}\n __css={{\n alignItems: \"center\",\n cursor: \"pointer\",\n display: \"inline-flex\",\n gap,\n position: \"relative\",\n verticalAlign: \"top\",\n ...styles.container,\n }}\n >\n <ui.input\n className=\"ui-radio__input\"\n {...getInputProps(\n {\n ...inputProps,\n tabIndex,\n },\n ref,\n )}\n />\n\n <ui.div\n className=\"ui-radio__icon\"\n {...getIconProps(iconProps)}\n __css={{\n display: \"inline-block\",\n position: \"relative\",\n userSelect: \"none\",\n ...styles.icon,\n }}\n />\n\n <ui.span\n className=\"ui-radio__label\"\n {...getLabelProps(labelProps)}\n __css={{ ...styles.label }}\n >\n {children ?? label}\n </ui.span>\n </ui.label>\n )\n },\n) as {\n <Y extends number | string = string>(\n props: RadioProps<Y> & RefAttributes<HTMLInputElement>,\n ): ReactElement\n} & ComponentArgs\n\nRadio.displayName = \"Radio\"\nRadio.__ui__ = \"Radio\"\n"],"mappings":";;;;;;;;;AASA,SAAS,gBAAgB,IAAI,8BAA8B;AAC3D,SAAS,sBAAsB;AAC/B,SAAS,IAAI,eAAe;AAC5B,SAAS,kBAAkB;AA6FrB,SAaE,KAbF;AA3DC,IAAM,QAAQ;AAAA,EACnB,CACE,OACA,QACG;AAlDP;AAmDI,UAAM,QAAQ,qBAAqB;AACnC,UAAM,EAAE,OAAO,YAAY,GAAG,WAAW,IAAI,EAAE,GAAG,MAAM;AACxD,UAAM,UAAU,eAAe,KAAK;AACpC,UAAM,CAAC,QAAQ,WAAW,IAAI,uBAAuB,SAAS;AAAA,MAC5D,GAAG;AAAA,MACH,GAAG;AAAA,IACL,CAAC;AACD,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN,cAAa,gBAAW,eAAX,YAAyB,QAAQ;AAAA,MAC9C,aAAY,gBAAW,cAAX,YAAwB,QAAQ;AAAA,MAC5C,cAAa,gBAAW,eAAX,YAAyB,QAAQ;AAAA,MAC9C,cAAa,gBAAW,eAAX,YAAyB,QAAQ;AAAA,MAC9C;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,IAAI,eAAe,WAAW;AAE9B,wBAAc,YAAd,0BAAc,UAAY,cAAc;AAExC,UAAM,cACJ,cAAc,cAAc,QACxB,eAAe,cAAc,QAC7B,cAAc;AAEpB,UAAM,WACJ,WAAW,YAAY,cAAc,QACjC,QAAQ,WAAW,UAAU,cAAc,QAAQ,IACnD,cAAc;AAEpB,UAAM;AAAA,MACJ;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI,SAAS;AAAA,MACX,GAAG;AAAA,MACH,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAED,UAAM,WAAW,CAAC,aAAa,IAAI,UAAU,IAAI;AAEjD,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC,WAAW,GAAG,YAAY,SAAS;AAAA,QAClC,GAAG,kBAAkB,IAAI;AAAA,QAC1B,OAAO;AAAA,UACL,YAAY;AAAA,UACZ,QAAQ;AAAA,UACR,SAAS;AAAA,UACT;AAAA,UACA,UAAU;AAAA,UACV,eAAe;AAAA,UACf,GAAG,OAAO;AAAA,QACZ;AAAA,QAEA;AAAA;AAAA,YAAC,GAAG;AAAA,YAAH;AAAA,cACC,WAAU;AAAA,cACT,GAAG;AAAA,gBACF;AAAA,kBACE,GAAG;AAAA,kBACH;AAAA,gBACF;AAAA,gBACA;AAAA,cACF;AAAA;AAAA,UACF;AAAA,UAEA;AAAA,YAAC,GAAG;AAAA,YAAH;AAAA,cACC,WAAU;AAAA,cACT,GAAG,aAAa,SAAS;AAAA,cAC1B,OAAO;AAAA,gBACL,SAAS;AAAA,gBACT,UAAU;AAAA,gBACV,YAAY;AAAA,gBACZ,GAAG,OAAO;AAAA,cACZ;AAAA;AAAA,UACF;AAAA,UAEA;AAAA,YAAC,GAAG;AAAA,YAAH;AAAA,cACC,WAAU;AAAA,cACT,GAAG,cAAc,UAAU;AAAA,cAC5B,OAAO,EAAE,GAAG,OAAO,MAAM;AAAA,cAExB,wCAAY;AAAA;AAAA,UACf;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAMA,MAAM,cAAc;AACpB,MAAM,SAAS;","names":[]}