@foi/design-system 0.0.9 → 0.0.11

package/README.md

@@ -4,17 +4,16 @@ A component library built with React 19 and TypeScript. Components are designed
 
 ## Tech stack
 
-| Tool | Version | Purpose |
-|---|---|---|
-| React | 19 | UI runtime |
-| TypeScript | 6 | Type safety |
-| Vite | 8 | Dev server & bundler |
-| Emotion | 11 | CSS-in-JS styling |
-| React Hook Form | 7 | Form state & validation |
-| Zod | 4 | Schema validation |
-| MUI Icons | 9 | Default icon set |
-| Storybook | 10 | Component explorer |
-| Vitest | 4 | Unit tests |
+| Tool            | Version | Purpose                 |
+| --------------- | ------- | ----------------------- |
+| React           | 19      | UI runtime              |
+| TypeScript      | 6       | Type safety             |
+| Vite            | 8       | Dev server & bundler    |
+| Emotion         | 11      | CSS-in-JS styling       |
+| React Hook Form | 7       | Form state & validation |
+| Zod             | 4       | Schema validation       |
+| Storybook       | 10      | Component explorer      |
+| Vitest          | 4       | Unit tests              |
 
 ## Commands
 
@@ -43,25 +42,26 @@ npm publish --access public
 
 ### Atoms
 
-| Component | Description |
-|---|---|
-| `Button` | Primary action button with variant/size/color support |
-| `Checkbox` | Single checkbox — standalone, RHF, or inside a group |
-| `DatePicker` | Date input with calendar menu, integrates with RHF |
-| `IconButton` | Clickable icon with button semantics |
-| `Input` | Text input field with label, helper text, and error state |
-| `Radio` | Single radio button — used inside `RadioGroup` |
-| `Select` | Dropdown select with RHF integration |
-| `Slider` | Range slider with RHF integration |
-| `Switch` | Toggle switch — boolean RHF field |
+| Component    | Description                                                         |
+| ------------ | ------------------------------------------------------------------- |
+| `Button`     | Primary action button with variant/size/color support               |
+| `Checkbox`   | Single checkbox — standalone, RHF, or inside a group                |
+| `DatePicker` | Date input with calendar menu, integrates with RHF                  |
+| `Icon`       | Font-based icon using Material Symbols Rounded — pass a `name` prop |
+| `IconButton` | Clickable icon with button semantics                                |
+| `Input`      | Text input field with label, helper text, and error state           |
+| `Radio`      | Single radio button — used inside `RadioGroup`                      |
+| `Select`     | Dropdown select with RHF integration                                |
+| `Slider`     | Range slider with RHF integration                                   |
+| `Switch`     | Toggle switch — boolean RHF field                                   |
 
 ### Molecules
 
-| Component | Description |
-|---|---|
+| Component       | Description                                                    |
+| --------------- | -------------------------------------------------------------- |
 | `CheckboxGroup` | Manages a set of `Checkbox` children as a `string[]` RHF field |
-| `CheckboxTree` | Hierarchical checkbox group with parent/child selection logic |
-| `RadioGroup` | Manages a set of `Radio` children as a single RHF field |
+| `CheckboxTree`  | Hierarchical checkbox group with parent/child selection logic  |
+| `RadioGroup`    | Manages a set of `Radio` children as a single RHF field        |
 
 ## Usage with React Hook Form
 
@@ -76,7 +76,7 @@ import Button from '@components/atoms/Button';
 
 const schema = z.object({
   email: z.string().email('Invalid email'),
-  age:   z.number().min(18, 'Must be 18 or older'),
+  age: z.number().min(18, 'Must be 18 or older'),
 });
 
 type FormValues = z.infer<typeof schema>;
@@ -88,9 +88,9 @@ const MyForm = () => {
 
   return (
     <form onSubmit={handleSubmit(console.log)}>
-      <Input name="email" control={control} label="Email" />
-      <Input name="age"   control={control} label="Age" type="number" />
-      <Button type="submit" label="Submit" />
+      <Input name='email' control={control} label='Email' />
+      <Input name='age' control={control} label='Age' type='number' />
+      <Button type='submit' label='Submit' />
     </form>
   );
 };
@@ -105,11 +105,11 @@ const schema = z.object({
   skills: z.array(z.string()).min(1, 'Select at least one'),
 });
 
-<CheckboxGroup name="skills" control={control} label="Skills">
-  <Checkbox value="react" label="React" />
-  <Checkbox value="vue"   label="Vue" />
-  <Checkbox value="svelte" label="Svelte" />
-</CheckboxGroup>
+<CheckboxGroup name='skills' control={control} label='Skills'>
+  <Checkbox value='react' label='React' />
+  <Checkbox value='vue' label='Vue' />
+  <Checkbox value='svelte' label='Svelte' />
+</CheckboxGroup>;
 ```
 
 ### Controlled mode (no RHF)
@@ -119,39 +119,92 @@ Pass `checked` + `onChecked` instead of `name`/`control`.
 ```tsx
 const [agreed, setAgreed] = useState(false);
 
-<Checkbox checked={agreed} onChecked={setAgreed} label="I agree to the terms" />
+<Checkbox checked={agreed} onChecked={setAgreed} label='I agree to the terms' />;
 ```
 
 ## Theming
 
-Wrap your app in `ThemeProvider` and define one or more themes. Each theme maps component tokens to CSS custom properties that components consume at render time.
+Wrap your app in `ThemeProvider` and pass one or more named themes. The active theme is selected by the `theme` prop and its tokens are injected as CSS custom properties that every component consumes.
 
 ```tsx
 import ThemeProvider from '@hocs/ThemeProvider';
-import { lightTheme, darkTheme } from './themes';
+import darkTheme from './themes/dark';
 
-<ThemeProvider themes={[lightTheme, darkTheme] as const} theme="light">
+<ThemeProvider themes={[darkTheme]} theme='dark'>
   <App />
-</ThemeProvider>
+</ThemeProvider>;
 ```
 
-A theme is a plain object with a `name`, a `fonts` map, and a `components` map:
+### Theme structure
+
+A theme is a plain object with a `name`, an optional `fonts` map, and a `components` map. Each component key holds one or more **variants**. Every component must define at least a `DEFAULT` variant; additional variants are optional.
+
+Each variant contains:
+
+- `ROOT` — static styles applied unconditionally (e.g. `border-radius`)
+- `EVENTS` — styles scoped to interaction states (`ENABLED`, `HOVER`, `FOCUS`, `ERROR`, `DISABLED`, etc.)
 
 ```ts
-const lightTheme = {
-  name: 'light',
-  fonts: { FONT_FAMILY: 'Inter, sans-serif' },
-  components: {
-    BUTTON: {
-      ROOT: { 'background-color': '#0070f3', color: '#fff' },
-      HOVER: { 'background-color': '#005bb5' },
+import type { BUTTON } from '@hocs/ThemeProvider/components/Button';
+
+const component = {
+  BUTTON: {
+    DEFAULT: {
+      ROOT: {
+        'border-radius': '8px',
+      },
+      EVENTS: {
+        ENABLED: {
+          'background-color': '#0070f3',
+          'color-primary': '#ffffff',
+        },
+        HOVER: {
+          'background-color': '#005bb5',
+        },
+        FOCUS: {
+          'outline-color': '#93c5fd',
+          'outline-width': '2px',
+          'outline-style': 'solid',
+          'outline-offset': '2px',
+        },
+        DISABLED: {
+          'background-color': '#e5e7eb',
+          'color-primary': '#9ca3af',
+        },
+      },
+    },
+    DANGER: {
+      EVENTS: {
+        ENABLED: {
+          'background-color': '#dc2626',
+          'color-primary': '#ffffff',
+        },
+        HOVER: {
+          'background-color': '#b91c1c',
+        },
+      },
     },
-    // ...other components
   },
-} satisfies Theme;
+} as const satisfies BUTTON;
+```
+
+The `satisfies BUTTON` check enforces that `DEFAULT` is present and that every token key is valid for that component. TypeScript reports an error at the theme file if a token is misspelled or if `DEFAULT` is missing.
+
+### Selecting a variant
+
+Pass the `variant` prop to a component to switch between the variants you defined in the theme. The default is always `'default'`.
+
+```tsx
+<Button label='Delete' variant='danger' />
 ```
 
-Individual components also accept a `theme` prop for one-off overrides without changing the global theme.
+### One-off theme override
+
+Any component also accepts a `theme` prop — a partial `EVENTS` object — to override tokens for that single instance without touching the global theme.
+
+```tsx
+<Button label='Special' theme={{ ENABLED: { 'background-color': '#7c3aed' } }} />
+```
 
 ## Project structure
 

package/dist/{RadioGroup-D2s7AY6E.js → RadioGroup-BL2bdmZx.js}

@@ -1,13 +1,11 @@
-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";
+import { i as e, n as t, r as n } from "./emotion-react-jsx-runtime.browser.esm-ClrpcFMG.js";
+import { r } from "./theme-D18AZjTt.js";
+import { a as i, i as a, n as o, o as s, r as c, t as l } from "./RadioGroup.context-BdRgENJJ.js";
+import u, { useEffect as d, useMemo as f, useRef as p } from "react";
+import { css as m } from "@emotion/react";
+import { useController as h } from "react-hook-form";
 //#region src/components/molecules/CheckboxGroup/CheckboxGroup.emotion.ts
-var _ = (e, t) => `
+var g = (e, t) => `
   .--CHECKBOXGROUP-label {
     ${r(e, "color", `--CHECKBOXGROUP-EVENTS-${t}-COLOR-PRIMARY`)}
   }
@@ -15,7 +13,7 @@ var _ = (e, t) => `
   .--CHECKBOXGROUP-helperText {
     ${r(e, "color", `--CHECKBOXGROUP-EVENTS-${t}-COLOR-SECONDARY`)}
   }
-`, v = (e) => p`
+`, _ = (e) => m`
   &.--CHECKBOXGROUP {
     display: flex;
     flex-direction: column;
@@ -23,16 +21,16 @@ var _ = (e, t) => `
     width: fit-content;
 
     // ENABLED
-    ${_(e, "ENABLED")};
+    ${g(e, "ENABLED")};
 
     // ERROR
     &.--CHECKBOXGROUP-error {
-      ${_(e, "ERROR")};
+      ${g(e, "ERROR")};
     }
 
     // DISABLED
     &.--CHECKBOXGROUP-disabled {
-      ${_(e, "DISABLED")};
+      ${g(e, "DISABLED")};
     }
 
     .--CHECKBOXGROUP-items {
@@ -62,11 +60,11 @@ var _ = (e, t) => `
       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({
+`, v = "--CHECKBOXGROUP", y = ({ 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: m } = h({
 		control: r,
 		name: e
-	}), g = Array.isArray(p.value) ? p.value : [], _ = h.error;
+	}), g = Array.isArray(p.value) ? p.value : [], y = m.error;
 	return /* @__PURE__ */ t(a.Provider, {
 		value: {
 			checkedValues: g,
@@ -75,44 +73,44 @@ var _ = (e, t) => `
 				p.onChange(n), p.onBlur();
 			},
 			disabled: l,
-			error: _
+			error: y
 		},
 		children: /* @__PURE__ */ n("div", {
 			className: [
-				y,
-				`${y}--${u}`,
-				c && _?.message && `${y}-error`,
-				l && `${y}-disabled`,
+				v,
+				`${v}--${u}`,
+				c && y?.message && `${v}-error`,
+				l && `${v}-disabled`,
 				f || ""
 			].join(" "),
-			css: v(d),
-			"data-testid": y,
+			css: _(d),
+			"data-testid": v,
 			children: [
 				o && /* @__PURE__ */ t("span", {
-					className: `${y}-label`,
-					"data-testid": `${y}-label`,
+					className: `${v}-label`,
+					"data-testid": `${v}-label`,
 					children: o
 				}),
 				/* @__PURE__ */ t("div", {
-					className: `${y}-items`,
-					"data-testid": `${y}-items`,
+					className: `${v}-items`,
+					"data-testid": `${v}-items`,
 					children: i
 				}),
 				/* @__PURE__ */ n("span", {
-					className: `${y}-helperText`,
-					"data-testid": `${y}-helperText`,
-					children: [s && (!_ || !c) && s, c && _ && _.message]
+					className: `${v}-helperText`,
+					"data-testid": `${v}-helperText`,
+					children: [s && (!y || !c) && s, c && y && y.message]
 				})
 			]
 		})
 	});
-}, x = ({ theme: n, ...r }) => {
-	let { componentStyles: a } = e([i.CHECKBOXGROUP], n);
-	return /* @__PURE__ */ t(b, {
+}, b = ({ theme: n, ...r }) => {
+	let { componentStyles: i } = e([s.CHECKBOXGROUP], n);
+	return /* @__PURE__ */ t(y, {
 		...r,
-		style: a
+		style: i
 	});
-}, S = (e) => p`
+}, x = (e) => m`
   &.--CHECKBOXTREE {
     display: flex;
     flex-direction: column;
@@ -150,70 +148,70 @@ var _ = (e, t) => `
       }
     }
   }
-`, 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({
+`, S = "--CHECKBOXTREE", C = ({ name: e, control: r, children: a, label: s, iconChecked: l = /* @__PURE__ */ t(i, { name: "check" }), iconIndeterminate: m = /* @__PURE__ */ t(i, { name: "remove" }), helperText: g, showErrorText: _ = !0, disabled: v, style: y, className: b }) => {
+	let { field: C, fieldState: w } = h({
 		control: r,
 		name: e
-	}), E = Array.isArray(w.value) ? w.value : [], D = T.error, O = d(() => l.Children.toArray(i).map((e) => {
+	}), T = Array.isArray(C.value) ? C.value : [], E = w.error, D = f(() => u.Children.toArray(a).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,
+	}).filter(Boolean), [a]), O = D.length > 0 && D.every((e) => T.includes(e)), k = !O && D.some((e) => T.includes(e)), A = p(null);
+	return d(() => {
+		let e = A.current?.querySelectorAll("input[type=\"checkbox\"]")[0];
+		e && (e.indeterminate = k);
+	}, [k]), /* @__PURE__ */ n("div", {
+		ref: A,
 		className: [
-			C,
-			v && D?.message ? `${C}-error` : "",
-			y ? `${C}-disabled` : "",
-			x || ""
+			S,
+			_ && E?.message ? `${S}-error` : "",
+			v ? `${S}-disabled` : "",
+			b || ""
 		].join(" "),
-		css: S(b),
-		"data-testid": C,
+		css: x(y),
+		"data-testid": S,
 		children: [
 			/* @__PURE__ */ t(o, {
-				checked: k || A,
+				checked: O || k,
 				onChecked: (e) => {
-					let t = e ? [...O] : [];
-					w.onChange(t), w.onBlur();
+					let t = e ? [...D] : [];
+					C.onChange(t), C.onBlur();
 				},
-				label: a,
-				icon: A ? p : c,
-				disabled: y,
+				label: s,
+				icon: k ? m : l,
+				disabled: v,
 				showErrorText: !1,
 				helperText: void 0
 			}),
-			/* @__PURE__ */ t(s.Provider, {
+			/* @__PURE__ */ t(c.Provider, {
 				value: {
-					checkedValues: E,
+					checkedValues: T,
 					onChange: (e, t) => {
-						let n = t ? [...E, e] : E.filter((t) => t !== e);
-						w.onChange(n), w.onBlur();
+						let n = t ? [...T, e] : T.filter((t) => t !== e);
+						C.onChange(n), C.onBlur();
 					},
-					disabled: y,
-					error: D
+					disabled: v,
+					error: E
 				},
 				children: /* @__PURE__ */ t("div", {
-					className: `${C}-children`,
-					"data-testid": `${C}-children`,
-					children: i
+					className: `${S}-children`,
+					"data-testid": `${S}-children`,
+					children: a
 				})
 			}),
 			/* @__PURE__ */ n("span", {
-				className: `${C}-helperText`,
-				"data-testid": `${C}-helperText`,
-				children: [_ && (!D || !v) && _, v && D && D.message]
+				className: `${S}-helperText`,
+				"data-testid": `${S}-helperText`,
+				children: [g && (!E || !_) && g, _ && E && E.message]
 			})
 		]
 	});
-}, T = ({ theme: n, ...r }) => {
-	let { componentStyles: a } = e([i.CHECKBOXTREE], n);
-	return /* @__PURE__ */ t(w, {
+}, w = ({ theme: n, ...r }) => {
+	let { componentStyles: i } = e([s.CHECKBOXTREE], n);
+	return /* @__PURE__ */ t(C, {
 		...r,
-		style: a
+		style: i
 	});
-}, E = (e, t) => `
+}, T = (e, t) => `
   .--RADIOGROUP-label {
     ${r(e, "color", `--RADIOGROUP-EVENTS-${t}-COLOR-PRIMARY`)}
   }
@@ -221,7 +219,7 @@ var _ = (e, t) => `
   .--RADIOGROUP-helperText {
     ${r(e, "color", `--RADIOGROUP-EVENTS-${t}-COLOR-SECONDARY`)}
   }
-`, D = (e) => p`
+`, E = (e) => m`
   &.--RADIOGROUP {
     display: flex;
     flex-direction: column;
@@ -229,16 +227,16 @@ var _ = (e, t) => `
     width: fit-content;
 
     // ENABLED
-    ${E(e, "ENABLED")};
+    ${T(e, "ENABLED")};
 
     // ERROR
     &.--RADIOGROUP-error {
-      ${E(e, "ERROR")};
+      ${T(e, "ERROR")};
     }
 
     // DISABLED
     &.--RADIOGROUP-disabled {
-      ${E(e, "DISABLED")};
+      ${T(e, "DISABLED")};
     }
 
     .--RADIOGROUP-items {
@@ -268,58 +266,58 @@ var _ = (e, t) => `
       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({
+`, D = "--RADIOGROUP", O = ({ name: e, control: r, children: i, label: a, helperText: o, showErrorText: s = !0, disabled: c, direction: u = "vertical", style: d, className: f }) => {
+	let { field: p, fieldState: m } = h({
 		control: r,
 		name: e
-	}), g = typeof p.value == "string" ? p.value : "", _ = h.error;
-	return /* @__PURE__ */ t(c.Provider, {
+	}), g = typeof p.value == "string" ? p.value : "", _ = m.error;
+	return /* @__PURE__ */ t(l.Provider, {
 		value: {
 			name: e,
 			selectedValue: g,
 			onChange: (e) => {
 				p.onChange(e), p.onBlur();
 			},
-			disabled: l,
+			disabled: c,
 			error: _
 		},
 		children: /* @__PURE__ */ n("div", {
 			className: [
-				O,
-				`${O}--${u}`,
-				s && _?.message && `${O}-error`,
-				l && `${O}-disabled`,
+				D,
+				`${D}--${u}`,
+				s && _?.message && `${D}-error`,
+				c && `${D}-disabled`,
 				f || ""
 			].join(" "),
-			css: D(d),
-			"data-testid": O,
+			css: E(d),
+			"data-testid": D,
 			children: [
 				a && /* @__PURE__ */ t("span", {
-					className: `${O}-label`,
-					"data-testid": `${O}-label`,
+					className: `${D}-label`,
+					"data-testid": `${D}-label`,
 					children: a
 				}),
 				/* @__PURE__ */ t("div", {
-					className: `${O}-items`,
-					"data-testid": `${O}-items`,
+					className: `${D}-items`,
+					"data-testid": `${D}-items`,
 					children: i
 				}),
 				/* @__PURE__ */ n("span", {
-					className: `${O}-helperText`,
-					"data-testid": `${O}-helperText`,
+					className: `${D}-helperText`,
+					"data-testid": `${D}-helperText`,
 					children: [o && (!_ || !s) && o, s && _ && _.message]
 				})
 			]
 		})
 	});
-}, A = ({ theme: n, ...r }) => {
-	let { componentStyles: a } = e([i.RADIOGROUP], n);
-	return /* @__PURE__ */ t(k, {
+}, k = ({ theme: n, ...r }) => {
+	let { componentStyles: i } = e([s.RADIOGROUP], n);
+	return /* @__PURE__ */ t(O, {
 		...r,
-		style: a
+		style: i
 	});
 };
 //#endregion
-export { T as n, x as r, A as t };
+export { w as n, b as r, k as t };
 
-//# sourceMappingURL=RadioGroup-D2s7AY6E.js.map
+//# sourceMappingURL=RadioGroup-BL2bdmZx.js.map

package/dist/RadioGroup-BL2bdmZx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup-BL2bdmZx.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 Icon from '@components/atoms/Icon';\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 = <Icon name='check' />,\n  iconIndeterminate = <Icon name='remove' />,\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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"}