@yamada-ui/radio 1.2.16-next-20241126134247 → 1.3.0-dev-20241127021420
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/chunk-27VC2SJI.mjs +30 -0
- package/dist/chunk-27VC2SJI.mjs.map +1 -0
- package/dist/chunk-AOVCDCCW.mjs +88 -0
- package/dist/chunk-AOVCDCCW.mjs.map +1 -0
- package/dist/chunk-DO4JVJRM.mjs +103 -0
- package/dist/chunk-DO4JVJRM.mjs.map +1 -0
- package/dist/{chunk-PUPRIHYJ.mjs → chunk-HFS5TQ47.mjs} +8 -115
- package/dist/chunk-HFS5TQ47.mjs.map +1 -0
- package/dist/chunk-JLL7F3NY.mjs +120 -0
- package/dist/chunk-JLL7F3NY.mjs.map +1 -0
- package/dist/chunk-NP4GICPF.mjs +124 -0
- package/dist/chunk-NP4GICPF.mjs.map +1 -0
- package/dist/chunk-Q5GTUIUF.mjs +56 -0
- package/dist/chunk-Q5GTUIUF.mjs.map +1 -0
- package/dist/chunk-YDYOLCNG.mjs +94 -0
- package/dist/chunk-YDYOLCNG.mjs.map +1 -0
- package/dist/chunk-YRIADAI7.mjs +32 -0
- package/dist/chunk-YRIADAI7.mjs.map +1 -0
- package/dist/chunk-ZLJHOIFP.mjs +26 -0
- package/dist/chunk-ZLJHOIFP.mjs.map +1 -0
- package/dist/index.d.mts +11 -4
- package/dist/index.d.ts +11 -4
- package/dist/index.js +344 -37
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +29 -5
- package/dist/radio-card-addon.d.mts +8 -0
- package/dist/radio-card-addon.d.ts +8 -0
- package/dist/radio-card-addon.js +69 -0
- package/dist/radio-card-addon.js.map +1 -0
- package/dist/radio-card-addon.mjs +9 -0
- package/dist/radio-card-addon.mjs.map +1 -0
- package/dist/radio-card-description.d.mts +8 -0
- package/dist/radio-card-description.d.ts +8 -0
- package/dist/radio-card-description.js +67 -0
- package/dist/radio-card-description.js.map +1 -0
- package/dist/radio-card-description.mjs +9 -0
- package/dist/radio-card-description.mjs.map +1 -0
- package/dist/radio-card-group.d.mts +33 -0
- package/dist/radio-card-group.d.ts +33 -0
- package/dist/radio-card-group.js +584 -0
- package/dist/radio-card-group.js.map +1 -0
- package/dist/radio-card-group.mjs +15 -0
- package/dist/radio-card-group.mjs.map +1 -0
- package/dist/radio-card-label.d.mts +22 -0
- package/dist/radio-card-label.d.ts +22 -0
- package/dist/radio-card-label.js +93 -0
- package/dist/radio-card-label.js.map +1 -0
- package/dist/radio-card-label.mjs +9 -0
- package/dist/radio-card-label.mjs.map +1 -0
- package/dist/radio-card.d.mts +61 -0
- package/dist/radio-card.d.ts +61 -0
- package/dist/radio-card.js +412 -0
- package/dist/radio-card.js.map +1 -0
- package/dist/radio-card.mjs +13 -0
- package/dist/radio-card.mjs.map +1 -0
- package/dist/radio-context.d.mts +25 -3
- package/dist/radio-context.d.ts +25 -3
- package/dist/radio-context.js +16 -0
- package/dist/radio-context.js.map +1 -1
- package/dist/radio-context.mjs +9 -1
- package/dist/radio-group.d.mts +15 -58
- package/dist/radio-group.d.ts +15 -58
- package/dist/radio-group.js +56 -39
- package/dist/radio-group.js.map +1 -1
- package/dist/radio-group.mjs +7 -7
- package/dist/radio.d.mts +14 -80
- package/dist/radio.d.ts +14 -80
- package/dist/radio.js +31 -17
- package/dist/radio.js.map +1 -1
- package/dist/radio.mjs +5 -6
- package/dist/use-radio-group.d.mts +56 -0
- package/dist/use-radio-group.d.ts +56 -0
- package/dist/use-radio-group.js +111 -0
- package/dist/use-radio-group.js.map +1 -0
- package/dist/use-radio-group.mjs +8 -0
- package/dist/use-radio-group.mjs.map +1 -0
- package/dist/use-radio.d.mts +87 -0
- package/dist/use-radio.d.ts +87 -0
- package/dist/use-radio.js +207 -0
- package/dist/use-radio.js.map +1 -0
- package/dist/use-radio.mjs +8 -0
- package/dist/use-radio.mjs.map +1 -0
- package/package.json +7 -7
- package/dist/chunk-6FMV6NX2.mjs +0 -14
- package/dist/chunk-6FMV6NX2.mjs.map +0 -1
- package/dist/chunk-PUPRIHYJ.mjs.map +0 -1
- package/dist/chunk-QAADRIFZ.mjs +0 -177
- package/dist/chunk-QAADRIFZ.mjs.map +0 -1
@@ -0,0 +1,124 @@
|
|
1
|
+
"use client"
|
2
|
+
import {
|
3
|
+
RadioCardAddon
|
4
|
+
} from "./chunk-YRIADAI7.mjs";
|
5
|
+
import {
|
6
|
+
RadioCardDescription
|
7
|
+
} from "./chunk-27VC2SJI.mjs";
|
8
|
+
import {
|
9
|
+
RadioCardLabel
|
10
|
+
} from "./chunk-Q5GTUIUF.mjs";
|
11
|
+
import {
|
12
|
+
useRadio
|
13
|
+
} from "./chunk-HFS5TQ47.mjs";
|
14
|
+
import {
|
15
|
+
RadioCardProvider,
|
16
|
+
useRadioCardGroupContext
|
17
|
+
} from "./chunk-ZLJHOIFP.mjs";
|
18
|
+
|
19
|
+
// src/radio-card.tsx
|
20
|
+
import { omitThemeProps, ui, useComponentMultiStyle } from "@yamada-ui/core";
|
21
|
+
import { useFormControl } from "@yamada-ui/form-control";
|
22
|
+
import {
|
23
|
+
cx,
|
24
|
+
findChild,
|
25
|
+
funcAll,
|
26
|
+
getValidChildren,
|
27
|
+
isEmpty,
|
28
|
+
omitChildren
|
29
|
+
} from "@yamada-ui/utils";
|
30
|
+
import { forwardRef } from "react";
|
31
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
32
|
+
var RadioCard = forwardRef(
|
33
|
+
(props, ref) => {
|
34
|
+
var _a, _b, _c, _d, _e;
|
35
|
+
const group = useRadioCardGroupContext();
|
36
|
+
const { value: groupValue, ...groupProps } = { ...group };
|
37
|
+
const control = useFormControl(props);
|
38
|
+
const [styles, mergedProps] = useComponentMultiStyle("RadioCard", {
|
39
|
+
...groupProps,
|
40
|
+
...props
|
41
|
+
});
|
42
|
+
const {
|
43
|
+
className,
|
44
|
+
addon,
|
45
|
+
children,
|
46
|
+
description,
|
47
|
+
isDisabled = (_a = groupProps.isDisabled) != null ? _a : control.isDisabled,
|
48
|
+
isInvalid = (_b = groupProps.isInvalid) != null ? _b : control.isInvalid,
|
49
|
+
isReadOnly = (_c = groupProps.isReadOnly) != null ? _c : control.isReadOnly,
|
50
|
+
isRequired = (_d = groupProps.isRequired) != null ? _d : control.isRequired,
|
51
|
+
label,
|
52
|
+
withIcon = true,
|
53
|
+
addonProps,
|
54
|
+
descriptionProps,
|
55
|
+
iconProps,
|
56
|
+
inputProps,
|
57
|
+
labelProps,
|
58
|
+
...computedProps
|
59
|
+
} = omitThemeProps(mergedProps);
|
60
|
+
(_e = computedProps.checked) != null ? _e : computedProps.checked = computedProps.isChecked;
|
61
|
+
const checkedProp = groupValue && computedProps.value ? groupValue === computedProps.value : computedProps.checked;
|
62
|
+
const onChange = groupProps.onChange && computedProps.value ? funcAll(groupProps.onChange, computedProps.onChange) : computedProps.onChange;
|
63
|
+
const {
|
64
|
+
checked,
|
65
|
+
props: rest,
|
66
|
+
getContainerProps,
|
67
|
+
getIconProps,
|
68
|
+
getInputProps
|
69
|
+
} = useRadio({
|
70
|
+
...computedProps,
|
71
|
+
checked: checkedProp,
|
72
|
+
isDisabled,
|
73
|
+
isInvalid,
|
74
|
+
isReadOnly,
|
75
|
+
isRequired,
|
76
|
+
onChange
|
77
|
+
});
|
78
|
+
const tabIndex = !groupValue ? 0 : checked ? 0 : -1;
|
79
|
+
const validChildren = getValidChildren(children);
|
80
|
+
const customLabel = findChild(validChildren, RadioCardLabel);
|
81
|
+
const customDescription = findChild(validChildren, RadioCardDescription);
|
82
|
+
const customAddon = findChild(validChildren, RadioCardAddon);
|
83
|
+
const computedChildren = !isEmpty(validChildren) ? omitChildren(
|
84
|
+
validChildren,
|
85
|
+
RadioCardLabel,
|
86
|
+
RadioCardDescription,
|
87
|
+
RadioCardAddon
|
88
|
+
) : children;
|
89
|
+
return /* @__PURE__ */ jsx(RadioCardProvider, { value: { styles, withIcon, getIconProps, iconProps }, children: /* @__PURE__ */ jsxs(
|
90
|
+
ui.label,
|
91
|
+
{
|
92
|
+
className: cx("ui-radio-card", className),
|
93
|
+
...getContainerProps(rest),
|
94
|
+
__css: { ...styles.container },
|
95
|
+
children: [
|
96
|
+
/* @__PURE__ */ jsx(
|
97
|
+
ui.input,
|
98
|
+
{
|
99
|
+
className: "ui-radio-card__input",
|
100
|
+
...getInputProps(
|
101
|
+
{
|
102
|
+
...inputProps,
|
103
|
+
tabIndex
|
104
|
+
},
|
105
|
+
ref
|
106
|
+
)
|
107
|
+
}
|
108
|
+
),
|
109
|
+
customLabel != null ? customLabel : label ? /* @__PURE__ */ jsx(RadioCardLabel, { ...labelProps, children: label }) : null,
|
110
|
+
customDescription != null ? customDescription : description ? /* @__PURE__ */ jsx(RadioCardDescription, { ...descriptionProps, children: description }) : null,
|
111
|
+
customAddon != null ? customAddon : addon ? /* @__PURE__ */ jsx(RadioCardAddon, { ...addonProps, children: addon }) : null,
|
112
|
+
computedChildren
|
113
|
+
]
|
114
|
+
}
|
115
|
+
) });
|
116
|
+
}
|
117
|
+
);
|
118
|
+
RadioCard.displayName = "RadioCard";
|
119
|
+
RadioCard.__ui__ = "RadioCard";
|
120
|
+
|
121
|
+
export {
|
122
|
+
RadioCard
|
123
|
+
};
|
124
|
+
//# sourceMappingURL=chunk-NP4GICPF.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/radio-card.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 { RadioCardAddonProps } from \"./radio-card-addon\"\nimport type { RadioCardDescriptionProps } from \"./radio-card-description\"\nimport type { RadioCardLabelProps } from \"./radio-card-label\"\nimport type { UseRadioProps } from \"./use-radio\"\nimport { omitThemeProps, ui, useComponentMultiStyle } from \"@yamada-ui/core\"\nimport { useFormControl } from \"@yamada-ui/form-control\"\nimport {\n cx,\n findChild,\n funcAll,\n getValidChildren,\n isEmpty,\n omitChildren,\n} from \"@yamada-ui/utils\"\nimport { forwardRef } from \"react\"\nimport { RadioCardAddon } from \"./radio-card-addon\"\nimport { RadioCardDescription } from \"./radio-card-description\"\nimport { RadioCardLabel } from \"./radio-card-label\"\nimport { RadioCardProvider, useRadioCardGroupContext } from \"./radio-context\"\nimport { useRadio } from \"./use-radio\"\n\ninterface RadioCardOptions {\n /**\n * The addon of the radio card.\n */\n addon?: ReactNode\n /**\n * The body of the radio card.\n */\n description?: ReactNode\n /**\n * The label of the radio card.\n */\n label?: ReactNode\n /**\n * If `true`, the icon will be displayed.\n *\n * @default true\n */\n withIcon?: boolean\n /**\n * Props for the footer of the radio card.\n */\n addonProps?: RadioCardAddonProps\n /**\n * Props for the description of the radio card.\n */\n descriptionProps?: RadioCardDescriptionProps\n /**\n * Props for the icon of the radio card.\n */\n iconProps?: HTMLUIProps\n /**\n * Props for input element.\n */\n inputProps?: InputHTMLAttributes<HTMLInputElement>\n /**\n * Props for the label of the radio card.\n */\n labelProps?: RadioCardLabelProps\n}\n\nexport interface RadioCardProps<Y extends number | string = string>\n extends Omit<HTMLUIProps<\"label\">, keyof UseRadioProps>,\n ThemeProps<\"RadioCard\">,\n UseRadioProps<Y>,\n RadioCardOptions {}\n\n/**\n * `RadioCard` 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-card\n */\nexport const RadioCard = forwardRef(\n <Y extends number | string = string>(\n props: RadioCardProps<Y>,\n ref: ForwardedRef<HTMLInputElement>,\n ) => {\n const group = useRadioCardGroupContext()\n const { value: groupValue, ...groupProps } = { ...group }\n const control = useFormControl(props)\n const [styles, mergedProps] = useComponentMultiStyle(\"RadioCard\", {\n ...groupProps,\n ...props,\n })\n const {\n className,\n addon,\n children,\n description,\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 withIcon = true,\n addonProps,\n descriptionProps,\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 } = 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 const validChildren = getValidChildren(children)\n const customLabel = findChild(validChildren, RadioCardLabel)\n const customDescription = findChild(validChildren, RadioCardDescription)\n const customAddon = findChild(validChildren, RadioCardAddon)\n\n const computedChildren = !isEmpty(validChildren)\n ? omitChildren(\n validChildren,\n RadioCardLabel,\n RadioCardDescription,\n RadioCardAddon,\n )\n : children\n\n return (\n <RadioCardProvider value={{ styles, withIcon, getIconProps, iconProps }}>\n <ui.label\n className={cx(\"ui-radio-card\", className)}\n {...getContainerProps(rest)}\n __css={{ ...styles.container }}\n >\n <ui.input\n className=\"ui-radio-card__input\"\n {...getInputProps(\n {\n ...inputProps,\n tabIndex,\n },\n ref,\n )}\n />\n\n {customLabel ??\n (label ? (\n <RadioCardLabel {...labelProps}>{label}</RadioCardLabel>\n ) : null)}\n\n {customDescription ??\n (description ? (\n <RadioCardDescription {...descriptionProps}>\n {description}\n </RadioCardDescription>\n ) : null)}\n\n {customAddon ??\n (addon ? (\n <RadioCardAddon {...addonProps}>{addon}</RadioCardAddon>\n ) : null)}\n\n {computedChildren}\n </ui.label>\n </RadioCardProvider>\n )\n },\n) as {\n <Y extends number | string = string>(\n props: RadioCardProps<Y> & RefAttributes<HTMLInputElement>,\n ): ReactElement\n} & ComponentArgs\n\nRadioCard.displayName = \"RadioCard\"\nRadioCard.__ui__ = \"RadioCard\"\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAYA,SAAS,gBAAgB,IAAI,8BAA8B;AAC3D,SAAS,sBAAsB;AAC/B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,kBAAkB;AAwInB,SAKE,KALF;AA7ED,IAAM,YAAY;AAAA,EACvB,CACE,OACA,QACG;AArFP;AAsFI,UAAM,QAAQ,yBAAyB;AACvC,UAAM,EAAE,OAAO,YAAY,GAAG,WAAW,IAAI,EAAE,GAAG,MAAM;AACxD,UAAM,UAAU,eAAe,KAAK;AACpC,UAAM,CAAC,QAAQ,WAAW,IAAI,uBAAuB,aAAa;AAAA,MAChE,GAAG;AAAA,MACH,GAAG;AAAA,IACL,CAAC;AACD,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,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,WAAW;AAAA,MACX;AAAA,MACA;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,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,UAAM,gBAAgB,iBAAiB,QAAQ;AAC/C,UAAM,cAAc,UAAU,eAAe,cAAc;AAC3D,UAAM,oBAAoB,UAAU,eAAe,oBAAoB;AACvE,UAAM,cAAc,UAAU,eAAe,cAAc;AAE3D,UAAM,mBAAmB,CAAC,QAAQ,aAAa,IAC3C;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IACA;AAEJ,WACE,oBAAC,qBAAkB,OAAO,EAAE,QAAQ,UAAU,cAAc,UAAU,GACpE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC,WAAW,GAAG,iBAAiB,SAAS;AAAA,QACvC,GAAG,kBAAkB,IAAI;AAAA,QAC1B,OAAO,EAAE,GAAG,OAAO,UAAU;AAAA,QAE7B;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,UAEC,oCACE,QACC,oBAAC,kBAAgB,GAAG,YAAa,iBAAM,IACrC;AAAA,UAEL,gDACE,cACC,oBAAC,wBAAsB,GAAG,kBACvB,uBACH,IACE;AAAA,UAEL,oCACE,QACC,oBAAC,kBAAgB,GAAG,YAAa,iBAAM,IACrC;AAAA,UAEL;AAAA;AAAA;AAAA,IACH,GACF;AAAA,EAEJ;AACF;AAMA,UAAU,cAAc;AACxB,UAAU,SAAS;","names":[]}
|
@@ -0,0 +1,56 @@
|
|
1
|
+
"use client"
|
2
|
+
import {
|
3
|
+
useRadioCardContext
|
4
|
+
} from "./chunk-ZLJHOIFP.mjs";
|
5
|
+
|
6
|
+
// src/radio-card-label.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, jsxs } from "react/jsx-runtime";
|
11
|
+
var RadioCardLabel = forwardRef(
|
12
|
+
({ className, children, withIcon, contentProps, iconProps, ...rest }, ref) => {
|
13
|
+
const {
|
14
|
+
styles,
|
15
|
+
withIcon: defaultWithIcon,
|
16
|
+
getIconProps,
|
17
|
+
iconProps: defaultIconProps
|
18
|
+
} = useRadioCardContext();
|
19
|
+
withIcon != null ? withIcon : withIcon = defaultWithIcon;
|
20
|
+
return /* @__PURE__ */ jsxs(
|
21
|
+
ui.div,
|
22
|
+
{
|
23
|
+
ref,
|
24
|
+
className: cx("ui-radio-card__label", className),
|
25
|
+
__css: { ...styles.label },
|
26
|
+
...rest,
|
27
|
+
children: [
|
28
|
+
/* @__PURE__ */ jsx(
|
29
|
+
ui.span,
|
30
|
+
{
|
31
|
+
className: "ui-radio-card__label-content",
|
32
|
+
__css: { ...styles.labelContent },
|
33
|
+
...contentProps,
|
34
|
+
children
|
35
|
+
}
|
36
|
+
),
|
37
|
+
withIcon ? /* @__PURE__ */ jsx(
|
38
|
+
ui.div,
|
39
|
+
{
|
40
|
+
className: "ui-radio-card__icon",
|
41
|
+
__css: { ...styles.icon },
|
42
|
+
...getIconProps({ ...defaultIconProps, ...iconProps })
|
43
|
+
}
|
44
|
+
) : null
|
45
|
+
]
|
46
|
+
}
|
47
|
+
);
|
48
|
+
}
|
49
|
+
);
|
50
|
+
RadioCardLabel.displayName = "RadioCardLabel";
|
51
|
+
RadioCardLabel.__ui__ = "RadioCardLabel";
|
52
|
+
|
53
|
+
export {
|
54
|
+
RadioCardLabel
|
55
|
+
};
|
56
|
+
//# sourceMappingURL=chunk-Q5GTUIUF.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/radio-card-label.tsx"],"sourcesContent":["import type { 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 RadioCardLabelProps extends HTMLUIProps {\n /**\n * If `true`, the icon will be displayed.\n *\n * @default true\n */\n withIcon?: boolean\n /**\n * The props for the label content.\n */\n contentProps?: HTMLUIProps<\"span\">\n /**\n * The props for the icon.\n */\n iconProps?: HTMLUIProps\n}\n\nexport const RadioCardLabel = forwardRef<RadioCardLabelProps, \"div\">(\n (\n { className, children, withIcon, contentProps, iconProps, ...rest },\n ref,\n ) => {\n const {\n styles,\n withIcon: defaultWithIcon,\n getIconProps,\n iconProps: defaultIconProps,\n } = useRadioCardContext()\n\n withIcon ??= defaultWithIcon\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-radio-card__label\", className)}\n __css={{ ...styles.label }}\n {...rest}\n >\n <ui.span\n className=\"ui-radio-card__label-content\"\n __css={{ ...styles.labelContent }}\n {...contentProps}\n >\n {children}\n </ui.span>\n\n {withIcon ? (\n <ui.div\n className=\"ui-radio-card__icon\"\n __css={{ ...styles.icon }}\n {...getIconProps({ ...defaultIconProps, ...iconProps })}\n />\n ) : null}\n </ui.div>\n )\n },\n)\n\nRadioCardLabel.displayName = \"RadioCardLabel\"\nRadioCardLabel.__ui__ = \"RadioCardLabel\"\n"],"mappings":";;;;;;AACA,SAAS,kBAAkB;AAC3B,SAAS,UAAU;AACnB,SAAS,UAAU;AAmCb,SAME,KANF;AAfC,IAAM,iBAAiB;AAAA,EAC5B,CACE,EAAE,WAAW,UAAU,UAAU,cAAc,WAAW,GAAG,KAAK,GAClE,QACG;AACH,UAAM;AAAA,MACJ;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA,WAAW;AAAA,IACb,IAAI,oBAAoB;AAExB,6CAAa;AAEb,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAW,GAAG,wBAAwB,SAAS;AAAA,QAC/C,OAAO,EAAE,GAAG,OAAO,MAAM;AAAA,QACxB,GAAG;AAAA,QAEJ;AAAA;AAAA,YAAC,GAAG;AAAA,YAAH;AAAA,cACC,WAAU;AAAA,cACV,OAAO,EAAE,GAAG,OAAO,aAAa;AAAA,cAC/B,GAAG;AAAA,cAEH;AAAA;AAAA,UACH;AAAA,UAEC,WACC;AAAA,YAAC,GAAG;AAAA,YAAH;AAAA,cACC,WAAU;AAAA,cACV,OAAO,EAAE,GAAG,OAAO,KAAK;AAAA,cACvB,GAAG,aAAa,EAAE,GAAG,kBAAkB,GAAG,UAAU,CAAC;AAAA;AAAA,UACxD,IACE;AAAA;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,eAAe,cAAc;AAC7B,eAAe,SAAS;","names":[]}
|
@@ -0,0 +1,94 @@
|
|
1
|
+
"use client"
|
2
|
+
import {
|
3
|
+
Radio
|
4
|
+
} from "./chunk-JLL7F3NY.mjs";
|
5
|
+
import {
|
6
|
+
useRadioGroup
|
7
|
+
} from "./chunk-AOVCDCCW.mjs";
|
8
|
+
import {
|
9
|
+
RadioGroupProvider
|
10
|
+
} from "./chunk-ZLJHOIFP.mjs";
|
11
|
+
|
12
|
+
// src/radio-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 RadioGroup = forwardRef(
|
19
|
+
({
|
20
|
+
id: idProp,
|
21
|
+
className,
|
22
|
+
colorScheme,
|
23
|
+
size,
|
24
|
+
variant,
|
25
|
+
children,
|
26
|
+
direction = "column",
|
27
|
+
gap,
|
28
|
+
items = [],
|
29
|
+
...props
|
30
|
+
}, ref) => {
|
31
|
+
const {
|
32
|
+
isDisabled,
|
33
|
+
isInvalid,
|
34
|
+
isReadOnly,
|
35
|
+
isRequired,
|
36
|
+
labelId,
|
37
|
+
...computedProps
|
38
|
+
} = useFormControl({
|
39
|
+
id: idProp,
|
40
|
+
...props
|
41
|
+
});
|
42
|
+
const {
|
43
|
+
id,
|
44
|
+
name,
|
45
|
+
props: rest,
|
46
|
+
value,
|
47
|
+
getContainerProps,
|
48
|
+
onChange
|
49
|
+
} = useRadioGroup(computedProps);
|
50
|
+
const validChildren = getValidChildren(children);
|
51
|
+
let computedChildren = [];
|
52
|
+
if (!validChildren.length && items.length)
|
53
|
+
computedChildren = items.map((props2, index) => /* @__PURE__ */ jsx(Radio, { ...props2 }, index));
|
54
|
+
return /* @__PURE__ */ jsx(
|
55
|
+
RadioGroupProvider,
|
56
|
+
{
|
57
|
+
value: {
|
58
|
+
name,
|
59
|
+
colorScheme,
|
60
|
+
size,
|
61
|
+
variant,
|
62
|
+
isDisabled,
|
63
|
+
isInvalid,
|
64
|
+
isReadOnly,
|
65
|
+
isRequired,
|
66
|
+
value,
|
67
|
+
onChange
|
68
|
+
},
|
69
|
+
children: /* @__PURE__ */ jsx(
|
70
|
+
Flex,
|
71
|
+
{
|
72
|
+
ref,
|
73
|
+
className: cx("ui-radio-group", className),
|
74
|
+
gap: gap != null ? gap : direction === "row" ? "1rem" : void 0,
|
75
|
+
...getContainerProps({
|
76
|
+
id,
|
77
|
+
"aria-labelledby": labelId,
|
78
|
+
...rest
|
79
|
+
}),
|
80
|
+
direction,
|
81
|
+
children: children != null ? children : computedChildren
|
82
|
+
}
|
83
|
+
)
|
84
|
+
}
|
85
|
+
);
|
86
|
+
}
|
87
|
+
);
|
88
|
+
RadioGroup.displayName = "RadioGroup";
|
89
|
+
RadioGroup.__ui__ = "RadioGroup";
|
90
|
+
|
91
|
+
export {
|
92
|
+
RadioGroup
|
93
|
+
};
|
94
|
+
//# sourceMappingURL=chunk-YDYOLCNG.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/radio-group.tsx"],"sourcesContent":["import type { ComponentArgs, ThemeProps } from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport type { FlexProps } from \"@yamada-ui/layouts\"\nimport type { ForwardedRef, ReactElement, RefAttributes } from \"react\"\nimport type { RadioProps } from \"./radio\"\nimport type { RadioGroupContext } from \"./radio-context\"\nimport type { UseRadioGroupProps } from \"./use-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 { Radio } from \"./radio\"\nimport { RadioGroupProvider } from \"./radio-context\"\nimport { useRadioGroup } from \"./use-radio-group\"\n\nexport type RadioItem<Y extends number | string = string> = RadioProps<Y>\n\nexport interface RadioGroupSharedProps<Y extends number | string = string>\n extends Omit<FlexProps, \"defaultValue\" | \"onChange\">,\n UseRadioGroupProps<Y>,\n FormControlOptions {}\n\nexport interface RadioGroupProps<Y extends number | string = string>\n extends RadioGroupSharedProps<Y>,\n ThemeProps<\"Radio\"> {\n /**\n * If provided, generate radios based on items.\n *\n * @default '[]'\n */\n items?: RadioItem<Y>[]\n}\n\n/**\n * `RadioGroup` is a component that groups `Radio` components.\n *\n * @see Docs https://yamada-ui.com/components/forms/radio\n */\nexport const RadioGroup = forwardRef(\n <Y extends number | string = string>(\n {\n id: idProp,\n className,\n colorScheme,\n size,\n variant,\n children,\n direction = \"column\",\n gap,\n items = [],\n ...props\n }: RadioGroupProps<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, index) => (\n <Radio key={index} {...props} />\n ))\n\n return (\n <RadioGroupProvider\n value={\n {\n name,\n colorScheme,\n size,\n variant,\n isDisabled,\n isInvalid,\n isReadOnly,\n isRequired,\n value,\n onChange,\n } as RadioGroupContext\n }\n >\n <Flex\n ref={ref}\n className={cx(\"ui-radio-group\", className)}\n gap={gap ?? (direction === \"row\" ? \"1rem\" : undefined)}\n {...getContainerProps({\n id,\n \"aria-labelledby\": labelId,\n ...rest,\n })}\n direction={direction}\n >\n {children ?? computedChildren}\n </Flex>\n </RadioGroupProvider>\n )\n },\n) as {\n <Y extends number | string = string>(\n props: RadioGroupProps<Y> & RefAttributes<HTMLDivElement>,\n ): ReactElement\n} & ComponentArgs\n\nRadioGroup.displayName = \"RadioGroup\"\nRadioGroup.__ui__ = \"RadioGroup\"\n"],"mappings":";;;;;;;;;;;;AAOA,SAAS,sBAAsB;AAC/B,SAAS,YAAY;AACrB,SAAS,IAAI,wBAAwB;AACrC,SAAS,kBAAkB;AAqEnB;AAzCD,IAAM,aAAa;AAAA,EACxB,CACE;AAAA,IACE,IAAI;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA,QAAQ,CAAC;AAAA,IACT,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,UACnC,oBAAC,SAAmB,GAAGA,UAAX,KAAkB,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,QACF;AAAA,QAGF;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,WAAW,GAAG,kBAAkB,SAAS;AAAA,YACzC,KAAK,oBAAQ,cAAc,QAAQ,SAAS;AAAA,YAC3C,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,WAAW,cAAc;AACzB,WAAW,SAAS;","names":["props"]}
|
@@ -0,0 +1,32 @@
|
|
1
|
+
"use client"
|
2
|
+
import {
|
3
|
+
useRadioCardContext
|
4
|
+
} from "./chunk-ZLJHOIFP.mjs";
|
5
|
+
|
6
|
+
// src/radio-card-addon.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 RadioCardAddon = forwardRef(
|
12
|
+
({ className, ...rest }, ref) => {
|
13
|
+
const { styles } = useRadioCardContext();
|
14
|
+
const css = { ...styles.addon };
|
15
|
+
return /* @__PURE__ */ jsx(
|
16
|
+
ui.div,
|
17
|
+
{
|
18
|
+
ref,
|
19
|
+
className: cx("ui-radio-card__addon", className),
|
20
|
+
__css: css,
|
21
|
+
...rest
|
22
|
+
}
|
23
|
+
);
|
24
|
+
}
|
25
|
+
);
|
26
|
+
RadioCardAddon.displayName = "RadioCardAddon";
|
27
|
+
RadioCardAddon.__ui__ = "RadioCardAddon";
|
28
|
+
|
29
|
+
export {
|
30
|
+
RadioCardAddon
|
31
|
+
};
|
32
|
+
//# sourceMappingURL=chunk-YRIADAI7.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/radio-card-addon.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 RadioCardAddonProps extends HTMLUIProps {}\n\nexport const RadioCardAddon = forwardRef<RadioCardAddonProps, \"div\">(\n ({ className, ...rest }, ref) => {\n const { styles } = useRadioCardContext()\n\n const css: CSSUIObject = { ...styles.addon }\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-radio-card__addon\", className)}\n __css={css}\n {...rest}\n />\n )\n },\n)\n\nRadioCardAddon.displayName = \"RadioCardAddon\"\nRadioCardAddon.__ui__ = \"RadioCardAddon\"\n"],"mappings":";;;;;;AACA,SAAS,kBAAkB;AAC3B,SAAS,UAAU;AACnB,SAAS,UAAU;AAYb;AAPC,IAAM,iBAAiB;AAAA,EAC5B,CAAC,EAAE,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC/B,UAAM,EAAE,OAAO,IAAI,oBAAoB;AAEvC,UAAM,MAAmB,EAAE,GAAG,OAAO,MAAM;AAE3C,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAW,GAAG,wBAAwB,SAAS;AAAA,QAC/C,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,eAAe,cAAc;AAC7B,eAAe,SAAS;","names":[]}
|
@@ -0,0 +1,26 @@
|
|
1
|
+
"use client"
|
2
|
+
|
3
|
+
// src/radio-context.ts
|
4
|
+
import { createContext } from "@yamada-ui/utils";
|
5
|
+
var [RadioGroupProvider, useRadioGroupContext] = createContext({
|
6
|
+
name: "RadioGroupContext",
|
7
|
+
strict: false
|
8
|
+
});
|
9
|
+
var [RadioCardGroupProvider, useRadioCardGroupContext] = createContext({
|
10
|
+
name: "RadioCardGroupContext",
|
11
|
+
strict: false
|
12
|
+
});
|
13
|
+
var [RadioCardProvider, useRadioCardContext] = createContext({
|
14
|
+
name: "RadioCardContext",
|
15
|
+
errorMessage: `useRadioCardContext returned is 'undefined'. Seems you forgot to wrap the components in "<RadioCard />"`
|
16
|
+
});
|
17
|
+
|
18
|
+
export {
|
19
|
+
RadioGroupProvider,
|
20
|
+
useRadioGroupContext,
|
21
|
+
RadioCardGroupProvider,
|
22
|
+
useRadioCardGroupContext,
|
23
|
+
RadioCardProvider,
|
24
|
+
useRadioCardContext
|
25
|
+
};
|
26
|
+
//# sourceMappingURL=chunk-ZLJHOIFP.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/radio-context.ts"],"sourcesContent":["import type {\n CSSUIObject,\n HTMLUIProps,\n PropGetter,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport type { ChangeEvent } from \"react\"\nimport type { RadioCardProps } from \"./radio-card\"\nimport { createContext } from \"@yamada-ui/utils\"\n\ninterface RadioGroupSharedContext extends FormControlOptions {\n name: string\n value: number | string\n onChange: (evOrValue: ChangeEvent<HTMLInputElement> | number | string) => void\n}\n\nexport interface RadioGroupContext\n extends RadioGroupSharedContext,\n ThemeProps<\"Radio\"> {}\n\nexport const [RadioGroupProvider, useRadioGroupContext] =\n createContext<RadioGroupContext>({\n name: \"RadioGroupContext\",\n strict: false,\n })\n\nexport interface RadioCardGroupContext\n extends RadioGroupSharedContext,\n Pick<\n RadioCardProps,\n \"addonProps\" | \"descriptionProps\" | \"labelProps\" | \"withIcon\"\n >,\n ThemeProps<\"RadioCard\"> {}\n\nexport const [RadioCardGroupProvider, useRadioCardGroupContext] =\n createContext<RadioCardGroupContext>({\n name: \"RadioCardGroupContext\",\n strict: false,\n })\n\nexport interface RadioCardContext {\n styles: { [key: string]: CSSUIObject | undefined }\n withIcon: boolean\n getIconProps: PropGetter\n iconProps?: HTMLUIProps\n}\n\nexport const [RadioCardProvider, useRadioCardContext] =\n createContext<RadioCardContext>({\n name: \"RadioCardContext\",\n errorMessage: `useRadioCardContext returned is 'undefined'. Seems you forgot to wrap the components in \"<RadioCard />\"`,\n })\n"],"mappings":";;;AASA,SAAS,qBAAqB;AAYvB,IAAM,CAAC,oBAAoB,oBAAoB,IACpD,cAAiC;AAAA,EAC/B,MAAM;AAAA,EACN,QAAQ;AACV,CAAC;AAUI,IAAM,CAAC,wBAAwB,wBAAwB,IAC5D,cAAqC;AAAA,EACnC,MAAM;AAAA,EACN,QAAQ;AACV,CAAC;AASI,IAAM,CAAC,mBAAmB,mBAAmB,IAClD,cAAgC;AAAA,EAC9B,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;","names":[]}
|
package/dist/index.d.mts
CHANGED
@@ -1,7 +1,14 @@
|
|
1
|
-
export { Radio, RadioProps
|
2
|
-
export {
|
3
|
-
|
4
|
-
|
1
|
+
export { Radio, RadioProps } from './radio.mjs';
|
2
|
+
export { RadioCard, RadioCardProps } from './radio-card.mjs';
|
3
|
+
export { RadioCardAddon, RadioCardAddonProps } from './radio-card-addon.mjs';
|
4
|
+
export { RadioCardDescription, RadioCardDescriptionProps } from './radio-card-description.mjs';
|
5
|
+
export { RadioCardGroup, RadioCardGroupProps, RadioCardItem } from './radio-card-group.mjs';
|
6
|
+
export { RadioCardLabel, RadioCardLabelProps } from './radio-card-label.mjs';
|
7
|
+
export { RadioGroup, RadioGroupProps, RadioItem } from './radio-group.mjs';
|
8
|
+
export { UseRadioProps, UseRadioReturn, useRadio } from './use-radio.mjs';
|
9
|
+
export { UseRadioGroupProps, UseRadioGroupReturn, useRadioGroup } from './use-radio-group.mjs';
|
5
10
|
import '@yamada-ui/core';
|
11
|
+
import 'react';
|
12
|
+
import '@yamada-ui/form-control';
|
6
13
|
import '@yamada-ui/utils';
|
7
14
|
import '@yamada-ui/layouts';
|
package/dist/index.d.ts
CHANGED
@@ -1,7 +1,14 @@
|
|
1
|
-
export { Radio, RadioProps
|
2
|
-
export {
|
3
|
-
|
4
|
-
|
1
|
+
export { Radio, RadioProps } from './radio.js';
|
2
|
+
export { RadioCard, RadioCardProps } from './radio-card.js';
|
3
|
+
export { RadioCardAddon, RadioCardAddonProps } from './radio-card-addon.js';
|
4
|
+
export { RadioCardDescription, RadioCardDescriptionProps } from './radio-card-description.js';
|
5
|
+
export { RadioCardGroup, RadioCardGroupProps, RadioCardItem } from './radio-card-group.js';
|
6
|
+
export { RadioCardLabel, RadioCardLabelProps } from './radio-card-label.js';
|
7
|
+
export { RadioGroup, RadioGroupProps, RadioItem } from './radio-group.js';
|
8
|
+
export { UseRadioProps, UseRadioReturn, useRadio } from './use-radio.js';
|
9
|
+
export { UseRadioGroupProps, UseRadioGroupReturn, useRadioGroup } from './use-radio-group.js';
|
5
10
|
import '@yamada-ui/core';
|
11
|
+
import 'react';
|
12
|
+
import '@yamada-ui/form-control';
|
6
13
|
import '@yamada-ui/utils';
|
7
14
|
import '@yamada-ui/layouts';
|