@foi/design-system 0.0.3 → 0.0.5

package/dist/RadioGroup-D2s7AY6E.js

@@ -0,0 +1,325 @@
+import { i as e, n as t, r as n } from "./emotion-react-jsx-runtime.browser.esm-BFNmScj4.js";
+import { r } from "./theme-DEqiATmv.js";
+import { a as i, i as a, n as o, r as s, t as c } from "./RadioGroup.context-zJGC5Sjc.js";
+import l, { useEffect as u, useMemo as d, useRef as f } from "react";
+import { css as p } from "@emotion/react";
+import { useController as m } from "react-hook-form";
+import h from "@mui/icons-material/CheckOutlined";
+import g from "@mui/icons-material/RemoveOutlined";
+//#region src/components/molecules/CheckboxGroup/CheckboxGroup.emotion.ts
+var _ = (e, t) => `
+  .--CHECKBOXGROUP-label {
+    ${r(e, "color", `--CHECKBOXGROUP-EVENTS-${t}-COLOR-PRIMARY`)}
+  }
+
+  .--CHECKBOXGROUP-helperText {
+    ${r(e, "color", `--CHECKBOXGROUP-EVENTS-${t}-COLOR-SECONDARY`)}
+  }
+`, v = (e) => p`
+  &.--CHECKBOXGROUP {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    width: fit-content;
+
+    // ENABLED
+    ${_(e, "ENABLED")};
+
+    // ERROR
+    &.--CHECKBOXGROUP-error {
+      ${_(e, "ERROR")};
+    }
+
+    // DISABLED
+    &.--CHECKBOXGROUP-disabled {
+      ${_(e, "DISABLED")};
+    }
+
+    .--CHECKBOXGROUP-items {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+    }
+
+    &.--CHECKBOXGROUP--horizontal .--CHECKBOXGROUP-items {
+      flex-direction: row;
+      flex-wrap: wrap;
+    }
+
+    .--CHECKBOXGROUP-label {
+      // FONT
+      font-family: ${e["--FONTFAMILY-PRIMARY"]};
+      font-size: 0.875rem;
+      font-weight: 500;
+      line-height: 1;
+    }
+
+    .--CHECKBOXGROUP-helperText {
+      // FONT
+      font-family: ${e["--FONTFAMILY-PRIMARY"]};
+      font-size: 13px;
+      line-height: 16px;
+      margin-left: 14px;
+    }
+  }
+`, y = "--CHECKBOXGROUP", b = ({ name: e, control: r, children: i, label: o, helperText: s, showErrorText: c = !0, disabled: l, direction: u = "vertical", style: d, className: f }) => {
+	let { field: p, fieldState: h } = m({
+		control: r,
+		name: e
+	}), g = Array.isArray(p.value) ? p.value : [], _ = h.error;
+	return /* @__PURE__ */ t(a.Provider, {
+		value: {
+			checkedValues: g,
+			onChange: (e, t) => {
+				let n = t ? [...g, e] : g.filter((t) => t !== e);
+				p.onChange(n), p.onBlur();
+			},
+			disabled: l,
+			error: _
+		},
+		children: /* @__PURE__ */ n("div", {
+			className: [
+				y,
+				`${y}--${u}`,
+				c && _?.message && `${y}-error`,
+				l && `${y}-disabled`,
+				f || ""
+			].join(" "),
+			css: v(d),
+			"data-testid": y,
+			children: [
+				o && /* @__PURE__ */ t("span", {
+					className: `${y}-label`,
+					"data-testid": `${y}-label`,
+					children: o
+				}),
+				/* @__PURE__ */ t("div", {
+					className: `${y}-items`,
+					"data-testid": `${y}-items`,
+					children: i
+				}),
+				/* @__PURE__ */ n("span", {
+					className: `${y}-helperText`,
+					"data-testid": `${y}-helperText`,
+					children: [s && (!_ || !c) && s, c && _ && _.message]
+				})
+			]
+		})
+	});
+}, x = ({ theme: n, ...r }) => {
+	let { componentStyles: a } = e([i.CHECKBOXGROUP], n);
+	return /* @__PURE__ */ t(b, {
+		...r,
+		style: a
+	});
+}, S = (e) => p`
+  &.--CHECKBOXTREE {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    width: fit-content;
+
+    .--CHECKBOXTREE-children {
+      display: flex;
+      flex-direction: column;
+      padding-left: 36px;
+      gap: 16px;
+    }
+
+    .--CHECKBOXTREE-helperText {
+      font-family: ${e["--FONTFAMILY-PRIMARY"]};
+      font-size: 13px;
+      line-height: 16px;
+      margin-left: 14px;
+      ${r(e, "color", "--CHECKBOXTREE-EVENTS-ENABLED-COLOR-SECONDARY")}
+
+      &:empty {
+        display: none;
+      }
+    }
+
+    &.--CHECKBOXTREE-error {
+      .--CHECKBOXTREE-helperText {
+        ${r(e, "color", "--CHECKBOXTREE-EVENTS-ERROR-COLOR-SECONDARY")}
+      }
+    }
+
+    &.--CHECKBOXTREE-disabled {
+      .--CHECKBOXTREE-helperText {
+        ${r(e, "color", "--CHECKBOXTREE-EVENTS-DISABLED-COLOR-SECONDARY")}
+      }
+    }
+  }
+`, C = "--CHECKBOXTREE", w = ({ name: e, control: r, children: i, label: a, iconChecked: c = /* @__PURE__ */ t(h, {}), iconIndeterminate: p = /* @__PURE__ */ t(g, {}), helperText: _, showErrorText: v = !0, disabled: y, style: b, className: x }) => {
+	let { field: w, fieldState: T } = m({
+		control: r,
+		name: e
+	}), E = Array.isArray(w.value) ? w.value : [], D = T.error, O = d(() => l.Children.toArray(i).map((e) => {
+		let t = e;
+		return t.props?.value ?? t.props?.name ?? "";
+	}).filter(Boolean), [i]), k = O.length > 0 && O.every((e) => E.includes(e)), A = !k && O.some((e) => E.includes(e)), j = f(null);
+	return u(() => {
+		let e = j.current?.querySelectorAll("input[type=\"checkbox\"]")[0];
+		e && (e.indeterminate = A);
+	}, [A]), /* @__PURE__ */ n("div", {
+		ref: j,
+		className: [
+			C,
+			v && D?.message ? `${C}-error` : "",
+			y ? `${C}-disabled` : "",
+			x || ""
+		].join(" "),
+		css: S(b),
+		"data-testid": C,
+		children: [
+			/* @__PURE__ */ t(o, {
+				checked: k || A,
+				onChecked: (e) => {
+					let t = e ? [...O] : [];
+					w.onChange(t), w.onBlur();
+				},
+				label: a,
+				icon: A ? p : c,
+				disabled: y,
+				showErrorText: !1,
+				helperText: void 0
+			}),
+			/* @__PURE__ */ t(s.Provider, {
+				value: {
+					checkedValues: E,
+					onChange: (e, t) => {
+						let n = t ? [...E, e] : E.filter((t) => t !== e);
+						w.onChange(n), w.onBlur();
+					},
+					disabled: y,
+					error: D
+				},
+				children: /* @__PURE__ */ t("div", {
+					className: `${C}-children`,
+					"data-testid": `${C}-children`,
+					children: i
+				})
+			}),
+			/* @__PURE__ */ n("span", {
+				className: `${C}-helperText`,
+				"data-testid": `${C}-helperText`,
+				children: [_ && (!D || !v) && _, v && D && D.message]
+			})
+		]
+	});
+}, T = ({ theme: n, ...r }) => {
+	let { componentStyles: a } = e([i.CHECKBOXTREE], n);
+	return /* @__PURE__ */ t(w, {
+		...r,
+		style: a
+	});
+}, E = (e, t) => `
+  .--RADIOGROUP-label {
+    ${r(e, "color", `--RADIOGROUP-EVENTS-${t}-COLOR-PRIMARY`)}
+  }
+
+  .--RADIOGROUP-helperText {
+    ${r(e, "color", `--RADIOGROUP-EVENTS-${t}-COLOR-SECONDARY`)}
+  }
+`, D = (e) => p`
+  &.--RADIOGROUP {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    width: fit-content;
+
+    // ENABLED
+    ${E(e, "ENABLED")};
+
+    // ERROR
+    &.--RADIOGROUP-error {
+      ${E(e, "ERROR")};
+    }
+
+    // DISABLED
+    &.--RADIOGROUP-disabled {
+      ${E(e, "DISABLED")};
+    }
+
+    .--RADIOGROUP-items {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+    }
+
+    &.--RADIOGROUP--horizontal .--RADIOGROUP-items {
+      flex-direction: row;
+      flex-wrap: wrap;
+    }
+
+    .--RADIOGROUP-label {
+      // FONT
+      font-family: ${e["--FONTFAMILY-PRIMARY"]};
+      font-size: 0.875rem;
+      font-weight: 500;
+      line-height: 1;
+    }
+
+    .--RADIOGROUP-helperText {
+      // FONT
+      font-family: ${e["--FONTFAMILY-PRIMARY"]};
+      font-size: 13px;
+      line-height: 16px;
+      margin-left: 14px;
+    }
+  }
+`, O = "--RADIOGROUP", k = ({ name: e, control: r, children: i, label: a, helperText: o, showErrorText: s = !0, disabled: l, direction: u = "vertical", style: d, className: f }) => {
+	let { field: p, fieldState: h } = m({
+		control: r,
+		name: e
+	}), g = typeof p.value == "string" ? p.value : "", _ = h.error;
+	return /* @__PURE__ */ t(c.Provider, {
+		value: {
+			name: e,
+			selectedValue: g,
+			onChange: (e) => {
+				p.onChange(e), p.onBlur();
+			},
+			disabled: l,
+			error: _
+		},
+		children: /* @__PURE__ */ n("div", {
+			className: [
+				O,
+				`${O}--${u}`,
+				s && _?.message && `${O}-error`,
+				l && `${O}-disabled`,
+				f || ""
+			].join(" "),
+			css: D(d),
+			"data-testid": O,
+			children: [
+				a && /* @__PURE__ */ t("span", {
+					className: `${O}-label`,
+					"data-testid": `${O}-label`,
+					children: a
+				}),
+				/* @__PURE__ */ t("div", {
+					className: `${O}-items`,
+					"data-testid": `${O}-items`,
+					children: i
+				}),
+				/* @__PURE__ */ n("span", {
+					className: `${O}-helperText`,
+					"data-testid": `${O}-helperText`,
+					children: [o && (!_ || !s) && o, s && _ && _.message]
+				})
+			]
+		})
+	});
+}, A = ({ theme: n, ...r }) => {
+	let { componentStyles: a } = e([i.RADIOGROUP], n);
+	return /* @__PURE__ */ t(k, {
+		...r,
+		style: a
+	});
+};
+//#endregion
+export { T as n, x as r, A as t };
+
+//# sourceMappingURL=RadioGroup-D2s7AY6E.js.map

package/dist/RadioGroup-D2s7AY6E.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup-D2s7AY6E.js","names":[],"sources":["../src/components/molecules/CheckboxGroup/CheckboxGroup.emotion.ts","../src/components/molecules/CheckboxGroup/CheckboxGroup.tsx","../src/components/molecules/CheckboxGroup/index.tsx","../src/components/molecules/CheckboxTree/CheckboxTree.emotion.ts","../src/components/molecules/CheckboxTree/CheckboxTree.tsx","../src/components/molecules/CheckboxTree/index.tsx","../src/components/molecules/RadioGroup/RadioGroup.emotion.ts","../src/components/molecules/RadioGroup/RadioGroup.tsx","../src/components/molecules/RadioGroup/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport { getStyle } from '@utilities/emotion/styles';\n\nconst labelColor = (theme: Record<string, string>, event: string): string => `\n  .--CHECKBOXGROUP-label {\n    ${getStyle(theme, 'color', `--CHECKBOXGROUP-EVENTS-${event}-COLOR-PRIMARY`)}\n  }\n\n  .--CHECKBOXGROUP-helperText {\n    ${getStyle(theme, 'color', `--CHECKBOXGROUP-EVENTS-${event}-COLOR-SECONDARY`)}\n  }\n`;\n\nconst Style = (theme: Record<string, string>) => css`\n  &.--CHECKBOXGROUP {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    width: fit-content;\n\n    // ENABLED\n    ${labelColor(theme, 'ENABLED')};\n\n    // ERROR\n    &.--CHECKBOXGROUP-error {\n      ${labelColor(theme, 'ERROR')};\n    }\n\n    // DISABLED\n    &.--CHECKBOXGROUP-disabled {\n      ${labelColor(theme, 'DISABLED')};\n    }\n\n    .--CHECKBOXGROUP-items {\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n    }\n\n    &.--CHECKBOXGROUP--horizontal .--CHECKBOXGROUP-items {\n      flex-direction: row;\n      flex-wrap: wrap;\n    }\n\n    .--CHECKBOXGROUP-label {\n      // FONT\n      font-family: ${theme['--FONTFAMILY-PRIMARY']};\n      font-size: 0.875rem;\n      font-weight: 500;\n      line-height: 1;\n    }\n\n    .--CHECKBOXGROUP-helperText {\n      // FONT\n      font-family: ${theme['--FONTFAMILY-PRIMARY']};\n      font-size: 13px;\n      line-height: 16px;\n      margin-left: 14px;\n    }\n  }\n`;\n\nexport default Style;\n","// Component Base\nimport emotion from './CheckboxGroup.emotion';\nimport type { CheckboxGroupProps } from './CheckboxGroup.interface';\nimport { CheckboxGroupContext } from './CheckboxGroup.context';\n// External libraries\nimport { useController, type FieldValues, type FieldPath } from 'react-hook-form';\n\nconst CLASS = '--CHECKBOXGROUP';\n\n/**\n * CheckboxGroup manages a set of `<Checkbox>` children as a single RHF field.\n * The form value is `string[]` — the `value` props of every checked child.\n *\n * Validation (min, max, custom) is declared on the Zod schema:\n * ```ts\n * z.object({\n *   options: z.array(z.string()).min(1, 'Select at least one').max(3, 'Select at most 3'),\n * })\n * ```\n *\n * @example\n * ```tsx\n * <CheckboxGroup name=\"options\" control={control} label=\"Skills\">\n *   <Checkbox value=\"react\" label=\"React\" />\n *   <Checkbox value=\"vue\" label=\"Vue\" />\n * </CheckboxGroup>\n * ```\n */\nconst CheckboxGroup = <TFieldValues extends FieldValues = FieldValues>({\n  name,\n  control,\n  children,\n  label,\n  helperText,\n  showErrorText = true,\n  disabled,\n  direction = 'vertical',\n  style,\n  className,\n}: CheckboxGroupProps<TFieldValues>) => {\n  const { field, fieldState } = useController({ control, name: name as FieldPath<TFieldValues> });\n\n  const checkedValues: string[] = Array.isArray(field.value) ? field.value : [];\n  const errorText = fieldState.error;\n\n  const onChange = (value: string, checked: boolean) => {\n    const next = checked ? [...checkedValues, value] : checkedValues.filter(v => v !== value);\n    field.onChange(next);\n    field.onBlur();\n  };\n\n  return (\n    <CheckboxGroupContext.Provider value={{ checkedValues, onChange, disabled, error: errorText }}>\n      <div\n        className={[\n          CLASS,\n          `${CLASS}--${direction}`,\n          showErrorText && errorText?.message && `${CLASS}-error`,\n          disabled && `${CLASS}-disabled`,\n          className || '',\n        ].join(' ')}\n        css={emotion(style)}\n        data-testid={CLASS}\n      >\n        {label && (\n          <span className={`${CLASS}-label`} data-testid={`${CLASS}-label`}>\n            {label}\n          </span>\n        )}\n\n        <div className={`${CLASS}-items`} data-testid={`${CLASS}-items`}>\n          {children}\n        </div>\n\n        <span className={`${CLASS}-helperText`} data-testid={`${CLASS}-helperText`}>\n          {helperText && (!errorText || !showErrorText) && helperText}\n          {showErrorText && errorText && errorText.message}\n        </span>\n      </div>\n    </CheckboxGroupContext.Provider>\n  );\n};\n\nexport default CheckboxGroup;\n","import { useCreateComponentStyles } from '@hocs/ThemeProvider/useThemeProvider.hook';\nimport { Component } from '@hocs/ThemeProvider/interfaces';\nimport type { CheckboxGroupStyleProps } from './CheckboxGroup.interface';\nimport type { FieldValues } from 'react-hook-form';\nimport CheckboxGroupBase from './CheckboxGroup';\n\nconst CheckboxGroup = <TFieldValues extends FieldValues = FieldValues>({\n  theme,\n  ...rest\n}: CheckboxGroupStyleProps<TFieldValues>) => {\n  const { componentStyles } = useCreateComponentStyles([Component.CHECKBOXGROUP], theme);\n\n  return <CheckboxGroupBase {...rest} style={componentStyles} />;\n};\n\nexport default CheckboxGroup;\n","import { css } from '@emotion/react';\nimport { getStyle } from '@utilities/emotion/styles';\n\nconst Style = (theme: Record<string, string>) => css`\n  &.--CHECKBOXTREE {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    width: fit-content;\n\n    .--CHECKBOXTREE-children {\n      display: flex;\n      flex-direction: column;\n      padding-left: 36px;\n      gap: 16px;\n    }\n\n    .--CHECKBOXTREE-helperText {\n      font-family: ${theme['--FONTFAMILY-PRIMARY']};\n      font-size: 13px;\n      line-height: 16px;\n      margin-left: 14px;\n      ${getStyle(theme, 'color', '--CHECKBOXTREE-EVENTS-ENABLED-COLOR-SECONDARY')}\n\n      &:empty {\n        display: none;\n      }\n    }\n\n    &.--CHECKBOXTREE-error {\n      .--CHECKBOXTREE-helperText {\n        ${getStyle(theme, 'color', '--CHECKBOXTREE-EVENTS-ERROR-COLOR-SECONDARY')}\n      }\n    }\n\n    &.--CHECKBOXTREE-disabled {\n      .--CHECKBOXTREE-helperText {\n        ${getStyle(theme, 'color', '--CHECKBOXTREE-EVENTS-DISABLED-COLOR-SECONDARY')}\n      }\n    }\n  }\n`;\n\nexport default Style;\n","import React, { useRef, useEffect, useMemo } from 'react';\n// External libraries\nimport { useController, type FieldValues, type FieldPath } from 'react-hook-form';\nimport CheckOutlinedIcon from '@mui/icons-material/CheckOutlined';\nimport RemoveOutlinedIcon from '@mui/icons-material/RemoveOutlined';\n// Component Base\nimport emotion from './CheckboxTree.emotion';\nimport type { CheckboxTreeProps } from './CheckboxTree.interface';\nimport Checkbox from '@components/atoms/Checkbox';\nimport { CheckboxTreeContext } from './CheckboxTree.context';\n\nconst CLASS = '--CHECKBOXTREE';\n\n/**\n * CheckboxTree renders a parent `<Checkbox>` that controls all of its `<Checkbox>` children.\n *\n * Parent states:\n * - **Checked** — all children are checked.\n * - **Unchecked** — no children are checked.\n * - **Indeterminate** — some (but not all) children are checked.\n *\n * The form value is `string[]` — the `value` props of every checked child.\n * Validation is declared on the Zod schema, the same way as CheckboxGroup.\n *\n * @example\n * ```tsx\n * <CheckboxTree name=\"options\" control={control} label=\"Select all\">\n *   <Checkbox value=\"a\" label=\"Option A\" />\n *   <Checkbox value=\"b\" label=\"Option B\" />\n * </CheckboxTree>\n * ```\n */\nconst CheckboxTree = <TFieldValues extends FieldValues = FieldValues>({\n  name,\n  control,\n  children,\n  label,\n  iconChecked = <CheckOutlinedIcon />,\n  iconIndeterminate = <RemoveOutlinedIcon />,\n  helperText,\n  showErrorText = true,\n  disabled,\n  style,\n  className,\n}: CheckboxTreeProps<TFieldValues>) => {\n  const { field, fieldState } = useController({ control, name: name as FieldPath<TFieldValues> });\n\n  const checkedValues: string[] = Array.isArray(field.value) ? field.value : [];\n  const errorText = fieldState.error;\n\n  const childValues = useMemo(\n    () =>\n      React.Children.toArray(children)\n        .map(child => {\n          const el = child as React.ReactElement<{ value?: string; name?: string }>;\n          return el.props?.value ?? el.props?.name ?? '';\n        })\n        .filter(Boolean),\n    [children],\n  );\n\n  const allChecked = childValues.length > 0 && childValues.every(v => checkedValues.includes(v));\n  const someChecked = !allChecked && childValues.some(v => checkedValues.includes(v));\n  const rootRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const input = rootRef.current?.querySelectorAll<HTMLInputElement>('input[type=\"checkbox\"]')[0];\n    if (input) input.indeterminate = someChecked;\n  }, [someChecked]);\n\n  const onParentChange = (checked: boolean) => {\n    const next = checked ? [...childValues] : [];\n    field.onChange(next);\n    field.onBlur();\n  };\n\n  const onChange = (value: string, checked: boolean) => {\n    const next = checked ? [...checkedValues, value] : checkedValues.filter(v => v !== value);\n    field.onChange(next);\n    field.onBlur();\n  };\n\n  return (\n    <div\n      ref={rootRef}\n      className={[\n        CLASS,\n        showErrorText && errorText?.message ? `${CLASS}-error` : '',\n        disabled ? `${CLASS}-disabled` : '',\n        className || '',\n      ].join(' ')}\n      css={emotion(style)}\n      data-testid={CLASS}\n    >\n      <Checkbox\n        checked={allChecked || someChecked}\n        onChecked={onParentChange}\n        label={label}\n        icon={someChecked ? iconIndeterminate : iconChecked}\n        disabled={disabled}\n        showErrorText={false}\n        helperText={undefined}\n      />\n\n      <CheckboxTreeContext.Provider value={{ checkedValues, onChange, disabled, error: errorText }}>\n        <div className={`${CLASS}-children`} data-testid={`${CLASS}-children`}>\n          {children}\n        </div>\n      </CheckboxTreeContext.Provider>\n\n      <span className={`${CLASS}-helperText`} data-testid={`${CLASS}-helperText`}>\n        {helperText && (!errorText || !showErrorText) && helperText}\n        {showErrorText && errorText && errorText.message}\n      </span>\n    </div>\n  );\n};\n\nexport default CheckboxTree;\n","import { useCreateComponentStyles } from '@hocs/ThemeProvider/useThemeProvider.hook';\nimport { Component } from '@hocs/ThemeProvider/interfaces';\nimport type { CheckboxTreeStyleProps } from './CheckboxTree.interface';\nimport type { FieldValues } from 'react-hook-form';\nimport CheckboxTreeBase from './CheckboxTree';\n\nconst CheckboxTree = <TFieldValues extends FieldValues = FieldValues>({\n  theme,\n  ...rest\n}: CheckboxTreeStyleProps<TFieldValues>) => {\n  const { componentStyles } = useCreateComponentStyles([Component.CHECKBOXTREE], theme);\n\n  return <CheckboxTreeBase {...rest} style={componentStyles} />;\n};\n\nexport default CheckboxTree;\n","import { css } from '@emotion/react';\nimport { getStyle } from '@utilities/emotion/styles';\n\nconst labelColor = (theme: Record<string, string>, event: string): string => `\n  .--RADIOGROUP-label {\n    ${getStyle(theme, 'color', `--RADIOGROUP-EVENTS-${event}-COLOR-PRIMARY`)}\n  }\n\n  .--RADIOGROUP-helperText {\n    ${getStyle(theme, 'color', `--RADIOGROUP-EVENTS-${event}-COLOR-SECONDARY`)}\n  }\n`;\n\nconst Style = (theme: Record<string, string>) => css`\n  &.--RADIOGROUP {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    width: fit-content;\n\n    // ENABLED\n    ${labelColor(theme, 'ENABLED')};\n\n    // ERROR\n    &.--RADIOGROUP-error {\n      ${labelColor(theme, 'ERROR')};\n    }\n\n    // DISABLED\n    &.--RADIOGROUP-disabled {\n      ${labelColor(theme, 'DISABLED')};\n    }\n\n    .--RADIOGROUP-items {\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n    }\n\n    &.--RADIOGROUP--horizontal .--RADIOGROUP-items {\n      flex-direction: row;\n      flex-wrap: wrap;\n    }\n\n    .--RADIOGROUP-label {\n      // FONT\n      font-family: ${theme['--FONTFAMILY-PRIMARY']};\n      font-size: 0.875rem;\n      font-weight: 500;\n      line-height: 1;\n    }\n\n    .--RADIOGROUP-helperText {\n      // FONT\n      font-family: ${theme['--FONTFAMILY-PRIMARY']};\n      font-size: 13px;\n      line-height: 16px;\n      margin-left: 14px;\n    }\n  }\n`;\n\nexport default Style;\n","// Component Base\nimport emotion from './RadioGroup.emotion';\nimport type { RadioGroupProps } from './RadioGroup.interface';\nimport { RadioGroupContext } from '@components/atoms/Radio/RadioGroup.context';\n// External libraries\nimport { useController, type FieldValues, type FieldPath } from 'react-hook-form';\n\nconst CLASS = '--RADIOGROUP';\n\n/**\n * RadioGroup manages a set of `<Radio>` children as a single RHF field.\n * The form value is a `string` — the `value` prop of the selected Radio.\n *\n * Provides a `RadioGroupContext` that every child `<Radio>` reads its selected state from.\n * Rendering a `<Radio>` outside a RadioGroup throws an error.\n *\n * @example\n * ```tsx\n * <RadioGroup name=\"option\" control={control} label=\"Pick one\">\n *   <Radio value=\"a\" label=\"Option A\" />\n *   <Radio value=\"b\" label=\"Option B\" />\n * </RadioGroup>\n * ```\n */\nconst RadioGroup = <TFieldValues extends FieldValues = FieldValues>({\n  name,\n  control,\n  children,\n  label,\n  helperText,\n  showErrorText = true,\n  disabled,\n  direction = 'vertical',\n  style,\n  className,\n}: RadioGroupProps<TFieldValues>) => {\n  const { field, fieldState } = useController({ control, name: name as FieldPath<TFieldValues> });\n\n  const selectedValue: string = typeof field.value === 'string' ? field.value : '';\n  const errorText = fieldState.error;\n\n  const onChange = (value: string) => {\n    field.onChange(value);\n    field.onBlur();\n  };\n\n  return (\n    <RadioGroupContext.Provider value={{ name, selectedValue, onChange, disabled, error: errorText }}>\n      <div\n        className={[\n          CLASS,\n          `${CLASS}--${direction}`,\n          showErrorText && errorText?.message && `${CLASS}-error`,\n          disabled && `${CLASS}-disabled`,\n          className || '',\n        ].join(' ')}\n        css={emotion(style)}\n        data-testid={CLASS}\n      >\n        {label && (\n          <span className={`${CLASS}-label`} data-testid={`${CLASS}-label`}>\n            {label}\n          </span>\n        )}\n\n        <div className={`${CLASS}-items`} data-testid={`${CLASS}-items`}>\n          {children}\n        </div>\n\n        <span className={`${CLASS}-helperText`} data-testid={`${CLASS}-helperText`}>\n          {helperText && (!errorText || !showErrorText) && helperText}\n          {showErrorText && errorText && errorText.message}\n        </span>\n      </div>\n    </RadioGroupContext.Provider>\n  );\n};\n\nexport default RadioGroup;\n","import { useCreateComponentStyles } from '@hocs/ThemeProvider/useThemeProvider.hook';\nimport { Component } from '@hocs/ThemeProvider/interfaces';\nimport type { RadioGroupStyleProps } from './RadioGroup.interface';\nimport type { FieldValues } from 'react-hook-form';\nimport RadioGroupBase from './RadioGroup';\n\nconst RadioGroup = <TFieldValues extends FieldValues = FieldValues>({\n  theme,\n  ...rest\n}: RadioGroupStyleProps<TFieldValues>) => {\n  const { componentStyles } = useCreateComponentStyles([Component.RADIOGROUP], theme);\n\n  return <RadioGroupBase {...rest} style={componentStyles} />;\n};\n\nexport default RadioGroup;\n"],"mappings":"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"}