@bonprix-ds/react-radio-group 1.0.2 → 1.0.4

package/dist/index.d.ts

@@ -1,6 +1,5 @@
 import { ControlGroupProps } from '@bonprix-ds/utils';
 import { default as default_2 } from 'react';
-import { FC } from 'react';
 import { ReactNode } from 'react';
 
 declare interface ControlledInputProps extends Omit<ControlGroupProps, "componentName"> {
@@ -8,7 +7,17 @@ declare interface ControlledInputProps extends Omit<ControlGroupProps, "componen
     onChange: (value: string) => void;
 }
 
-declare interface Props {
+declare const RadioGroup: {
+    (props: RadioGroupProps): default_2.JSX.Element;
+    displayName: string;
+    Item: {
+        ({ value, label, additional, suffix }: RadioGroupItemProps): default_2.JSX.Element;
+        displayName: string;
+    };
+};
+export default RadioGroup;
+
+declare interface RadioGroupItemProps {
     /** The value of the radio button. */
     value: string;
     /** The label of the radio button. */
@@ -19,17 +28,8 @@ declare interface Props {
     additional?: ReactNode;
 }
 
-declare const RadioGroup: FC<RadioGroupProps> & Subcomponents;
-export default RadioGroup;
-
-declare const RadioGroupItem: ({ value, label, additional, suffix }: Props) => default_2.JSX.Element;
-
 export declare type RadioGroupProps = ControlledInputProps | UncontrolledInputProps;
 
-declare interface Subcomponents {
-    Item: typeof RadioGroupItem;
-}
-
 declare interface UncontrolledInputProps extends Omit<ControlGroupProps, "componentName"> {
     value?: never;
     defaultValue: string;

package/dist/index.js

@@ -1,91 +1,2 @@
-"use client";
-import { SelectionControlGroup as e } from "@bonprix-ds/internal-components";
-import { createContext as t, useContext as n, useState as r } from "react";
-import * as i from "@radix-ui/react-radio-group";
-import { tv as a } from "tailwind-variants";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-//#region src/RadioGroupContext.ts
-var c = t({
-	disabled: !1,
-	checkedValue: ""
-}), l = () => n(c), u = a({
-	base: "preflight typography-input-text flex gap-2 justify-between text-clr-primary",
-	slots: {
-		item: ["w-6 h-6 border text-inherit border-current rounded-full shrink-0", "focus-visible:outline focus-visible:outline-current focus-visible:outline-1 focus-visible:outline-offset-2"],
-		indicatorAndLabel: "flex gap-2 py-3 flex-1 items-center",
-		indicator: ["flex items-center justify-center w-full h-full relative after:content-[''] after:block after:w-2.5", "after:h-2.5 after:bg-current after:rounded-[50%]"],
-		suffix: "h-12 flex-none"
-	},
-	variants: { disabled: {
-		true: {
-			base: "text-clr-disabled",
-			item: "bg-clr-bg-disabled"
-		},
-		false: { base: "hover:cursor-pointer hover:text-clr-on-bg-low" }
-	} }
-}), d = ({ value: e, label: t, additional: n, suffix: r }) => {
-	let { disabled: a, checkedValue: c } = l(), { base: d, item: f, indicatorAndLabel: p, indicator: m, suffix: h } = u({ disabled: a }), g = e === "" ? "hidden" : void 0, _ = e === c;
-	return /* @__PURE__ */ s("div", {
-		className: g,
-		"data-bpds-radio-group-item": "",
-		"data-bpds-has-suffix": !!r,
-		"data-bpds-has-additional": !!n,
-		children: [/* @__PURE__ */ s("label", {
-			className: d(),
-			children: [/* @__PURE__ */ s("span", {
-				className: p(),
-				children: [/* @__PURE__ */ o(i.Item, {
-					value: e,
-					className: f(),
-					disabled: a,
-					children: /* @__PURE__ */ o(i.Indicator, { className: m() })
-				}), t]
-			}), r && /* @__PURE__ */ o("span", {
-				className: h(),
-				children: r
-			})]
-		}), n && _ && /* @__PURE__ */ o("div", { children: n })]
-	});
-}, f = ({ value: t, onChange: n, label: a, "aria-label": l, "aria-labelledby": u, children: f, name: p, disabled: m = !1, error: h = !1, errorText: g = "", helperText: _, required: v = !1, divider: y = !1, horizontalPadding: b = !1, ...x }) => {
-	let S = "defaultValue" in x ? x.defaultValue : void 0, [C, w] = r(S ?? ""), T = t !== void 0, E = T ? t : C;
-	return /* @__PURE__ */ o(e, {
-		label: a,
-		"aria-label": l,
-		"aria-labelledby": u,
-		name: p,
-		disabled: m,
-		helperText: _,
-		error: h,
-		errorText: g,
-		required: v,
-		componentName: "radio-group",
-		divider: y,
-		horizontalPadding: b,
-		children: /* @__PURE__ */ o(i.Root, {
-			name: p,
-			value: t,
-			onValueChange: (e) => {
-				T || w(e), n?.(e);
-			},
-			orientation: "vertical",
-			disabled: m,
-			required: v,
-			defaultValue: S,
-			children: /* @__PURE__ */ s(c, {
-				value: {
-					disabled: m,
-					checkedValue: E
-				},
-				children: [/* @__PURE__ */ o(d, {
-					label: "",
-					value: ""
-				}), f]
-			})
-		})
-	});
-};
-f.Item = d;
-//#endregion
-export { f as default };
-
-//# sourceMappingURL=index.js.map
+import e from "./src/RadioGroup2.js";
+export { e as default };

package/dist/src/RadioGroup2.js

@@ -0,0 +1,11 @@
+import e from "./RadioGroupItem.js";
+import t from "./RadioGroupRoot.js";
+import "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/RadioGroup.tsx
+var r = (e) => /* @__PURE__ */ n(t, { ...e });
+r.displayName = "RadioGroup", r.Item = e;
+//#endregion
+export { r as default };
+
+//# sourceMappingURL=RadioGroup2.js.map

package/dist/src/RadioGroup2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup2.js","names":[],"sources":["../../src/RadioGroup.tsx"],"sourcesContent":["import React from \"react\";\n\nimport RadioGroupItem from \"./RadioGroupItem\";\nimport RadioGroupRoot, { type Props } from \"./RadioGroupRoot\";\n\nexport type { Props };\n\nconst RadioGroup = (props: Props) => <RadioGroupRoot {...props} />;\n\nRadioGroup.displayName = \"RadioGroup\";\n\nRadioGroup.Item = RadioGroupItem;\n\nexport default RadioGroup;\n"],"mappings":";;;;;AAOA,IAAM,KAAc,MAAiB,kBAAC,GAAD,EAAgB,GAAI,EAAQ,CAAA;AAEjE,EAAW,cAAc,cAEzB,EAAW,OAAO"}

package/dist/src/RadioGroupContext.js

@@ -0,0 +1,11 @@
+"use client";
+import { createContext as e } from "react";
+//#region src/RadioGroupContext.ts
+var t = e({
+	disabled: !1,
+	checkedValue: ""
+});
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=RadioGroupContext.js.map

package/dist/src/RadioGroupContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroupContext.js","names":[],"sources":["../../src/RadioGroupContext.ts"],"sourcesContent":["\"use client\";\n\nimport { createContext } from \"react\";\n\nexport interface RadioGroupContextProps {\n  disabled: boolean;\n  checkedValue: string;\n}\n\nconst RadioGroupContext = createContext<RadioGroupContextProps>({\n  disabled: false,\n  checkedValue: \"\",\n});\n\nexport default RadioGroupContext;\n"],"mappings":";;;AASA,IAAM,IAAoB,EAAsC;CAC9D,UAAU;CACV,cAAc;AAChB,CAAC"}

package/dist/src/RadioGroupItem.js

@@ -0,0 +1,51 @@
+"use client";
+import e from "./useConsumeRadioGroup.js";
+import "react";
+import { tv as t } from "tailwind-variants";
+import * as n from "@radix-ui/react-radio-group";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/RadioGroupItem.tsx
+var a = t({
+	base: "preflight typography-input-text flex gap-2 justify-between text-clr-primary",
+	slots: {
+		item: ["w-6 h-6 border text-inherit border-current rounded-full shrink-0", "focus-visible:outline focus-visible:outline-current focus-visible:outline-1 focus-visible:outline-offset-2"],
+		indicatorAndLabel: "flex gap-2 py-3 flex-1 items-center",
+		indicator: ["flex items-center justify-center w-full h-full relative after:content-[''] after:block after:w-2.5", "after:h-2.5 after:bg-current after:rounded-[50%]"],
+		suffix: "h-12 flex-none"
+	},
+	variants: { disabled: {
+		true: {
+			base: "text-clr-disabled",
+			item: "bg-clr-bg-disabled"
+		},
+		false: { base: "hover:cursor-pointer hover:text-clr-on-bg-low" }
+	} }
+}), o = ({ value: t, label: o, additional: s, suffix: c }) => {
+	let { disabled: l, checkedValue: u } = e(), { base: d, item: f, indicatorAndLabel: p, indicator: m, suffix: h } = a({ disabled: l }), g = t === "" ? "hidden" : void 0, _ = t === u;
+	return /* @__PURE__ */ i("div", {
+		className: g,
+		"data-bpds-radio-group-item": "",
+		"data-bpds-has-suffix": !!c,
+		"data-bpds-has-additional": !!s,
+		children: [/* @__PURE__ */ i("label", {
+			className: d(),
+			children: [/* @__PURE__ */ i("span", {
+				className: p(),
+				children: [/* @__PURE__ */ r(n.Item, {
+					value: t,
+					className: f(),
+					disabled: l,
+					children: /* @__PURE__ */ r(n.Indicator, { className: m() })
+				}), o]
+			}), c && /* @__PURE__ */ r("span", {
+				className: h(),
+				children: c
+			})]
+		}), s && _ && /* @__PURE__ */ r("div", { children: s })]
+	});
+};
+o.displayName = "RadioGroup.Item";
+//#endregion
+export { o as default };
+
+//# sourceMappingURL=RadioGroupItem.js.map

package/dist/src/RadioGroupItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroupItem.js","names":[],"sources":["../../src/RadioGroupItem.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { ReactNode } from \"react\";\nimport { tv } from \"tailwind-variants\";\nimport * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\";\n\nimport useConsumeRadioGroup from \"./useConsumeRadioGroup\";\n\nconst generateClasses = tv({\n  base: \"preflight typography-input-text flex gap-2 justify-between text-clr-primary\",\n  slots: {\n    item: [\n      \"w-6 h-6 border text-inherit border-current rounded-full shrink-0\",\n      \"focus-visible:outline focus-visible:outline-current focus-visible:outline-1 focus-visible:outline-offset-2\",\n    ],\n    // py is used instead of h-8, because h-8 will make the item label vertically centered\n    indicatorAndLabel: \"flex gap-2 py-3 flex-1 items-center\",\n    indicator: [\n      \"flex items-center justify-center w-full h-full relative after:content-[''] after:block after:w-2.5\",\n      \"after:h-2.5 after:bg-current after:rounded-[50%]\",\n    ],\n    // set height explicitly to prevent suffix from breaking layout and spacings\n    suffix: \"h-12 flex-none\",\n  },\n  variants: {\n    disabled: {\n      true: {\n        base: \"text-clr-disabled\",\n        item: \"bg-clr-bg-disabled\",\n      },\n      false: {\n        base: \"hover:cursor-pointer hover:text-clr-on-bg-low\",\n      },\n    },\n  },\n});\n\nexport interface RadioGroupItemProps {\n  /** The value of the radio button. */\n  value: string;\n  /** The label of the radio button. */\n  label: ReactNode;\n  /** Suffix that will be placed on the far right side inside the `<label>` to further visualize the item's value, e.g. with icon(s) or logo(s). Make sure to only include allowed children here to avoid irregular HTML markup. */\n  suffix?: ReactNode;\n  /** Additional content to be displayed when item is selected. */\n  additional?: ReactNode;\n}\n\nconst RadioGroupItem = ({ value, label, additional, suffix }: RadioGroupItemProps) => {\n  const { disabled, checkedValue } = useConsumeRadioGroup();\n  const { base, item, indicatorAndLabel, indicator, suffix: suffixClasses } = generateClasses({ disabled });\n  const hidden = value === \"\" ? \"hidden\" : undefined;\n\n  const isChecked = value === checkedValue;\n\n  return (\n    <div className={hidden} data-bpds-radio-group-item=\"\" data-bpds-has-suffix={!!suffix} data-bpds-has-additional={!!additional}>\n      <label className={base()}>\n        <span className={indicatorAndLabel()}>\n          <RadioGroupPrimitive.Item value={value} className={item()} disabled={disabled}>\n            <RadioGroupPrimitive.Indicator className={indicator()} />\n          </RadioGroupPrimitive.Item>\n          {label}\n        </span>\n        {suffix && <span className={suffixClasses()}>{suffix}</span>}\n      </label>\n      {additional && isChecked && <div>{additional}</div>}\n    </div>\n  );\n};\n\nRadioGroupItem.displayName = \"RadioGroup.Item\";\n\nexport default RadioGroupItem;\n"],"mappings":";;;;;;;AAQA,IAAM,IAAkB,EAAG;CACzB,MAAM;CACN,OAAO;EACL,MAAM,CACJ,oEACA,4GACF;EAEA,mBAAmB;EACnB,WAAW,CACT,sGACA,kDACF;EAEA,QAAQ;CACV;CACA,UAAU,EACR,UAAU;EACR,MAAM;GACJ,MAAM;GACN,MAAM;EACR;EACA,OAAO,EACL,MAAM,gDACR;CACF,EACF;AACF,CAAC,GAaK,KAAkB,EAAE,UAAO,UAAO,eAAY,gBAAkC;CACpF,IAAM,EAAE,aAAU,oBAAiB,EAAqB,GAClD,EAAE,SAAM,SAAM,sBAAmB,cAAW,QAAQ,MAAkB,EAAgB,EAAE,YAAS,CAAC,GAClG,IAAS,MAAU,KAAK,WAAW,KAAA,GAEnC,IAAY,MAAU;CAE5B,OACE,kBAAC,OAAD;EAAK,WAAW;EAAQ,8BAA2B;EAAG,wBAAsB,CAAC,CAAC;EAAQ,4BAA0B,CAAC,CAAC;EAAlH,UAAA,CACE,kBAAC,SAAD;GAAO,WAAW,EAAK;GAAvB,UAAA,CACE,kBAAC,QAAD;IAAM,WAAW,EAAkB;IAAnC,UAAA,CACE,kBAAC,EAAoB,MAArB;KAAiC;KAAO,WAAW,EAAK;KAAa;KACnE,UAAA,kBAAC,EAAoB,WAArB,EAA+B,WAAW,EAAU,EAAI,CAAA;IAChC,CAAA,GACzB,CACG;GACL,CAAA,GAAA,KAAU,kBAAC,QAAD;IAAM,WAAW,EAAc;IAAI,UAAA;GAAa,CAAA,CACtD;EACN,CAAA,GAAA,KAAc,KAAa,kBAAC,OAAD,EAAA,UAAM,EAAgB,CAAA,CAC/C;;AAET;AAEA,EAAe,cAAc"}

package/dist/src/RadioGroupRoot.js

@@ -0,0 +1,52 @@
+"use client";
+import e from "./RadioGroupContext.js";
+import t from "./RadioGroupItem.js";
+/* empty css           */
+import { useState as n } from "react";
+import * as r from "@radix-ui/react-radio-group";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { SelectionControlGroup as o } from "@bonprix-ds/internal-components";
+//#region src/RadioGroupRoot.tsx
+var s = ({ value: s, onChange: c, label: l, "aria-label": u, "aria-labelledby": d, children: f, name: p, disabled: m = !1, error: h = !1, errorText: g = "", helperText: _, required: v = !1, divider: y = !1, horizontalPadding: b = !1, ...x }) => {
+	let S = "defaultValue" in x ? x.defaultValue : void 0, [C, w] = n(S ?? ""), T = s !== void 0, E = T ? s : C;
+	return /* @__PURE__ */ i(o, {
+		label: l,
+		"aria-label": u,
+		"aria-labelledby": d,
+		name: p,
+		disabled: m,
+		helperText: _,
+		error: h,
+		errorText: g,
+		required: v,
+		componentName: "radio-group",
+		divider: y,
+		horizontalPadding: b,
+		children: /* @__PURE__ */ i(r.Root, {
+			name: p,
+			value: s,
+			onValueChange: (e) => {
+				T || w(e), c?.(e);
+			},
+			orientation: "vertical",
+			disabled: m,
+			required: v,
+			defaultValue: S,
+			children: /* @__PURE__ */ a(e, {
+				value: {
+					disabled: m,
+					checkedValue: E
+				},
+				children: [/* @__PURE__ */ i(t, {
+					label: "",
+					value: ""
+				}), f]
+			})
+		})
+	});
+};
+s.displayName = "RadioGroup";
+//#endregion
+export { s as default };
+
+//# sourceMappingURL=RadioGroupRoot.js.map

package/dist/src/RadioGroupRoot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroupRoot.js","names":[],"sources":["../../src/RadioGroupRoot.tsx"],"sourcesContent":["\"use client\";\n\nimport { SelectionControlGroup } from \"@bonprix-ds/internal-components\";\nimport { ControlGroupProps as RadioControlGroupProps } from \"@bonprix-ds/utils\";\nimport React, { useState } from \"react\";\nimport * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\";\n\nimport RadioGroupContext from \"./RadioGroupContext\";\nimport RadioGroupItem from \"./RadioGroupItem\";\n\nimport \"./RadioGroup.css\";\n\ninterface ControlledInputProps extends Omit<RadioControlGroupProps, \"componentName\"> {\n  value: string;\n  onChange: (value: string) => void;\n}\n\ninterface UncontrolledInputProps extends Omit<RadioControlGroupProps, \"componentName\"> {\n  value?: never;\n  defaultValue: string;\n  onChange?: (value: string) => void;\n}\n\nexport type Props = ControlledInputProps | UncontrolledInputProps;\n\nconst RadioGroupRoot = ({\n  value,\n  onChange,\n  label,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  children,\n  name,\n  disabled = false,\n  error = false,\n  errorText = \"\",\n  helperText,\n  required = false,\n  divider = false,\n  horizontalPadding = false,\n  ...unionProps\n}: Props) => {\n  const defaultValue = \"defaultValue\" in unionProps ? unionProps.defaultValue : undefined;\n\n  // For the uncontrolled variant, track  the checked value internally so the Context\n  // (and therefore `isChecked` in `RadioGroup.Item`) stays up-to-date.\n  const [internalValue, setInternalValue] = useState(defaultValue ?? \"\");\n  const isControlled = value !== undefined;\n  const checkedValue = isControlled ? value : internalValue;\n\n  const handleValueChange = (newValue: string) => {\n    if (!isControlled) setInternalValue(newValue);\n    onChange?.(newValue);\n  };\n\n  return (\n    <SelectionControlGroup\n      label={label}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      name={name}\n      disabled={disabled}\n      helperText={helperText}\n      error={error}\n      errorText={errorText}\n      required={required}\n      componentName=\"radio-group\"\n      divider={divider}\n      horizontalPadding={horizontalPadding}\n    >\n      <RadioGroupPrimitive.Root\n        name={name}\n        value={value}\n        onValueChange={handleValueChange}\n        orientation=\"vertical\" // disable navigation via \"←\" and \"→\" keys, only \"↑\" and \"↓\" can be used\n        disabled={disabled}\n        required={required}\n        defaultValue={defaultValue}\n      >\n        <RadioGroupContext value={{ disabled, checkedValue }}>\n          {/* Creating a 'phantom' option is technically more correct for the case when we pass an empty string as a value (initially to not preselect any option in the group). */}\n          <RadioGroupItem label=\"\" value=\"\" />\n          {children}\n        </RadioGroupContext>\n      </RadioGroupPrimitive.Root>\n    </SelectionControlGroup>\n  );\n};\n\nRadioGroupRoot.displayName = \"RadioGroup\";\n\nexport default RadioGroupRoot;\n"],"mappings":";;;;;;;;;AAyBA,IAAM,KAAkB,EACtB,UACA,aACA,UACA,cAAc,GACd,mBAAmB,GACnB,aACA,SACA,cAAW,IACX,WAAQ,IACR,eAAY,IACZ,eACA,cAAW,IACX,aAAU,IACV,uBAAoB,IACpB,GAAG,QACQ;CACX,IAAM,IAAe,kBAAkB,IAAa,EAAW,eAAe,KAAA,GAIxE,CAAC,GAAe,KAAoB,EAAS,KAAgB,EAAE,GAC/D,IAAe,MAAU,KAAA,GACzB,IAAe,IAAe,IAAQ;CAO5C,OACE,kBAAC,GAAD;EACS;EACP,cAAY;EACZ,mBAAiB;EACX;EACI;EACE;EACL;EACI;EACD;EACV,eAAc;EACL;EACU;EAEnB,UAAA,kBAAC,EAAoB,MAArB;GACQ;GACC;GACP,gBAvBqB,MAAqB;IAE9C,AADK,KAAc,EAAiB,CAAQ,GAC5C,IAAW,CAAQ;GACrB;GAqBM,aAAY;GACF;GACA;GACI;GAEd,UAAA,kBAAC,GAAD;IAAmB,OAAO;KAAE;KAAU;IAAa;IAAnD,UAAA,CAEE,kBAAC,GAAD;KAAgB,OAAM;KAAG,OAAM;IAAI,CAAA,GAClC,CACgB;;EACK,CAAA;CACL,CAAA;AAE3B;AAEA,EAAe,cAAc"}

package/dist/src/useConsumeRadioGroup.js

@@ -0,0 +1,8 @@
+import e from "./RadioGroupContext.js";
+import { useContext as t } from "react";
+//#region src/useConsumeRadioGroup.ts
+var n = () => t(e);
+//#endregion
+export { n as default };
+
+//# sourceMappingURL=useConsumeRadioGroup.js.map

package/dist/src/useConsumeRadioGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useConsumeRadioGroup.js","names":[],"sources":["../../src/useConsumeRadioGroup.ts"],"sourcesContent":["import { useContext } from \"react\";\n\nimport RadioGroupContext from \"./RadioGroupContext\";\n\nconst useConsumeRadioGroup = () => {\n  return useContext(RadioGroupContext);\n};\n\nexport default useConsumeRadioGroup;\n"],"mappings":";;;AAIA,IAAM,UACG,EAAW,CAAiB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonprix-ds/react-radio-group",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "RadioGroup component, implemented in React, for the Bonprix Design System.",
   "type": "module",
   "publishConfig": {
@@ -32,8 +32,8 @@
   },
   "dependencies": {
     "@radix-ui/react-radio-group": "1.4.7",
-    "@bonprix-ds/internal-components": "0.1.1",
-    "@bonprix-ds/utils": "0.1.2"
+    "@bonprix-ds/internal-components": "0.1.3",
+    "@bonprix-ds/utils": "0.2.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",
@@ -41,7 +41,7 @@
     "tailwind-variants": "0.3.1"
   },
   "devDependencies": {
-    "vite": "8.2.0",
+    "vite": "8.2.1",
     "@types/react": "19.2.18",
     "@vitejs/plugin-react": "6.0.5",
     "rollup-preserve-directives": "1.1.3",

package/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":[],"sources":["../src/RadioGroupContext.ts","../src/useConsumeRadioGroup.ts","../src/RadioGroupItem.tsx","../src/RadioGroup.tsx"],"sourcesContent":["\"use client\";\n\nimport { createContext } from \"react\";\n\nexport interface RadioGroupContextProps {\n  disabled: boolean;\n  checkedValue: string;\n}\n\nconst RadioGroupContext = createContext<RadioGroupContextProps>({\n  disabled: false,\n  checkedValue: \"\",\n});\n\nexport default RadioGroupContext;\n","import { useContext } from \"react\";\n\nimport RadioGroupContext from \"./RadioGroupContext\";\n\nconst useConsumeRadioGroup = () => {\n  return useContext(RadioGroupContext);\n};\n\nexport default useConsumeRadioGroup;\n","\"use client\";\n\nimport React, { ReactNode } from \"react\";\nimport { tv } from \"tailwind-variants\";\nimport * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\";\n\nimport useConsumeRadioGroup from \"./useConsumeRadioGroup\";\n\nconst generateClasses = tv({\n  base: \"preflight typography-input-text flex gap-2 justify-between text-clr-primary\",\n  slots: {\n    item: [\n      \"w-6 h-6 border text-inherit border-current rounded-full shrink-0\",\n      \"focus-visible:outline focus-visible:outline-current focus-visible:outline-1 focus-visible:outline-offset-2\",\n    ],\n    // py is used instead of h-8, because h-8 will make the item label vertically centered\n    indicatorAndLabel: \"flex gap-2 py-3 flex-1 items-center\",\n    indicator: [\n      \"flex items-center justify-center w-full h-full relative after:content-[''] after:block after:w-2.5\",\n      \"after:h-2.5 after:bg-current after:rounded-[50%]\",\n    ],\n    // set height explicitly to prevent suffix from breaking layout and spacings\n    suffix: \"h-12 flex-none\",\n  },\n  variants: {\n    disabled: {\n      true: {\n        base: \"text-clr-disabled\",\n        item: \"bg-clr-bg-disabled\",\n      },\n      false: {\n        base: \"hover:cursor-pointer hover:text-clr-on-bg-low\",\n      },\n    },\n  },\n});\n\ninterface Props {\n  /** The value of the radio button. */\n  value: string;\n  /** The label of the radio button. */\n  label: ReactNode;\n  /** Suffix that will be placed on the far right side inside the `<label>` to further visualize the item's value, e.g. with icon(s) or logo(s). Make sure to only include allowed children here to avoid irregular HTML markup. */\n  suffix?: ReactNode;\n  /** Additional content to be displayed when item is selected. */\n  additional?: ReactNode;\n}\n\nconst RadioGroupItem = ({ value, label, additional, suffix }: Props) => {\n  const { disabled, checkedValue } = useConsumeRadioGroup();\n  const { base, item, indicatorAndLabel, indicator, suffix: suffixClasses } = generateClasses({ disabled });\n  const hidden = value === \"\" ? \"hidden\" : undefined;\n\n  const isChecked = value === checkedValue;\n\n  return (\n    <div className={hidden} data-bpds-radio-group-item=\"\" data-bpds-has-suffix={!!suffix} data-bpds-has-additional={!!additional}>\n      <label className={base()}>\n        <span className={indicatorAndLabel()}>\n          <RadioGroupPrimitive.Item value={value} className={item()} disabled={disabled}>\n            <RadioGroupPrimitive.Indicator className={indicator()} />\n          </RadioGroupPrimitive.Item>\n          {label}\n        </span>\n        {suffix && <span className={suffixClasses()}>{suffix}</span>}\n      </label>\n      {additional && isChecked && <div>{additional}</div>}\n    </div>\n  );\n};\n\nexport default RadioGroupItem;\n","\"use client\";\n\nimport { SelectionControlGroup } from \"@bonprix-ds/internal-components\";\nimport { ControlGroupProps as RadioControlGroupProps } from \"@bonprix-ds/utils\";\nimport React, { FC, useState } from \"react\";\nimport * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\";\n\nimport RadioGroupContext from \"./RadioGroupContext\";\nimport RadioGroupItem from \"./RadioGroupItem\";\n\nimport \"./RadioGroup.css\";\n\ninterface Subcomponents {\n  Item: typeof RadioGroupItem;\n}\n\ninterface ControlledInputProps extends Omit<RadioControlGroupProps, \"componentName\"> {\n  value: string;\n  onChange: (value: string) => void;\n}\n\ninterface UncontrolledInputProps extends Omit<RadioControlGroupProps, \"componentName\"> {\n  value?: never;\n  defaultValue: string;\n  onChange?: (value: string) => void;\n}\n\nexport type Props = ControlledInputProps | UncontrolledInputProps;\n\nconst RadioGroup: FC<Props> & Subcomponents = ({\n  value,\n  onChange,\n  label,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  children,\n  name,\n  disabled = false,\n  error = false,\n  errorText = \"\",\n  helperText,\n  required = false,\n  divider = false,\n  horizontalPadding = false,\n  ...unionProps\n}) => {\n  const defaultValue = \"defaultValue\" in unionProps ? unionProps.defaultValue : undefined;\n\n  // For the uncontrolled variant, track  the checked value internally so the Context\n  // (and therefore `isChecked` in `RadioGroup.Item`) stays up-to-date.\n  const [internalValue, setInternalValue] = useState(defaultValue ?? \"\");\n  const isControlled = value !== undefined;\n  const checkedValue = isControlled ? value : internalValue;\n\n  const handleValueChange = (newValue: string) => {\n    if (!isControlled) setInternalValue(newValue);\n    onChange?.(newValue);\n  };\n\n  return (\n    <SelectionControlGroup\n      label={label}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      name={name}\n      disabled={disabled}\n      helperText={helperText}\n      error={error}\n      errorText={errorText}\n      required={required}\n      componentName=\"radio-group\"\n      divider={divider}\n      horizontalPadding={horizontalPadding}\n    >\n      <RadioGroupPrimitive.Root\n        name={name}\n        value={value}\n        onValueChange={handleValueChange}\n        orientation=\"vertical\" // disable navigation via \"←\" and \"→\" keys, only \"↑\" and \"↓\" can be used\n        disabled={disabled}\n        required={required}\n        defaultValue={defaultValue}\n      >\n        <RadioGroupContext value={{ disabled, checkedValue }}>\n          {/* Creating a 'phantom' option is technically more correct for the case when we pass an empty string as a value (initially to not preselect any option in the group). */}\n          <RadioGroupItem label=\"\" value=\"\" />\n          {children}\n        </RadioGroupContext>\n      </RadioGroupPrimitive.Root>\n    </SelectionControlGroup>\n  );\n};\n\nRadioGroup.Item = RadioGroupItem;\n\nexport default RadioGroup;\n"],"mappings":";;;;;;;AASA,IAAM,IAAoB,EAAsC;CAC9D,UAAU;CACV,cAAc;AAChB,CAAC,GCRK,UACG,EAAW,CAAiB,GCG/B,IAAkB,EAAG;CACzB,MAAM;CACN,OAAO;EACL,MAAM,CACJ,oEACA,4GACF;EAEA,mBAAmB;EACnB,WAAW,CACT,sGACA,kDACF;EAEA,QAAQ;CACV;CACA,UAAU,EACR,UAAU;EACR,MAAM;GACJ,MAAM;GACN,MAAM;EACR;EACA,OAAO,EACL,MAAM,gDACR;CACF,EACF;AACF,CAAC,GAaK,KAAkB,EAAE,UAAO,UAAO,eAAY,gBAAoB;CACtE,IAAM,EAAE,aAAU,oBAAiB,EAAqB,GAClD,EAAE,SAAM,SAAM,sBAAmB,cAAW,QAAQ,MAAkB,EAAgB,EAAE,YAAS,CAAC,GAClG,IAAS,MAAU,KAAK,WAAW,KAAA,GAEnC,IAAY,MAAU;CAE5B,OACE,kBAAC,OAAD;EAAK,WAAW;EAAQ,8BAA2B;EAAG,wBAAsB,CAAC,CAAC;EAAQ,4BAA0B,CAAC,CAAC;EAAlH,UAAA,CACE,kBAAC,SAAD;GAAO,WAAW,EAAK;GAAvB,UAAA,CACE,kBAAC,QAAD;IAAM,WAAW,EAAkB;IAAnC,UAAA,CACE,kBAAC,EAAoB,MAArB;KAAiC;KAAO,WAAW,EAAK;KAAa;KACnE,UAAA,kBAAC,EAAoB,WAArB,EAA+B,WAAW,EAAU,EAAI,CAAA;IAChC,CAAA,GACzB,CACG;GACL,CAAA,GAAA,KAAU,kBAAC,QAAD;IAAM,WAAW,EAAc;IAAI,UAAA;GAAa,CAAA,CACtD;EACN,CAAA,GAAA,KAAc,KAAa,kBAAC,OAAD,EAAA,UAAM,EAAgB,CAAA,CAC/C;;AAET,GCxCM,KAAyC,EAC7C,UACA,aACA,UACA,cAAc,GACd,mBAAmB,GACnB,aACA,SACA,cAAW,IACX,WAAQ,IACR,eAAY,IACZ,eACA,cAAW,IACX,aAAU,IACV,uBAAoB,IACpB,GAAG,QACC;CACJ,IAAM,IAAe,kBAAkB,IAAa,EAAW,eAAe,KAAA,GAIxE,CAAC,GAAe,KAAoB,EAAS,KAAgB,EAAE,GAC/D,IAAe,MAAU,KAAA,GACzB,IAAe,IAAe,IAAQ;CAO5C,OACE,kBAAC,GAAD;EACS;EACP,cAAY;EACZ,mBAAiB;EACX;EACI;EACE;EACL;EACI;EACD;EACV,eAAc;EACL;EACU;EAEnB,UAAA,kBAAC,EAAoB,MAArB;GACQ;GACC;GACP,gBAvBqB,MAAqB;IAE9C,AADK,KAAc,EAAiB,CAAQ,GAC5C,IAAW,CAAQ;GACrB;GAqBM,aAAY;GACF;GACA;GACI;GAEd,UAAA,kBAAC,GAAD;IAAmB,OAAO;KAAE;KAAU;IAAa;IAAnD,UAAA,CAEE,kBAAC,GAAD;KAAgB,OAAM;KAAG,OAAM;IAAI,CAAA,GAClC,CACgB;;EACK,CAAA;CACL,CAAA;AAE3B;AAEA,EAAW,OAAO"}