@bonprix-ds/react-radio-group 1.0.7 → 1.0.9

package/dist/index.d.ts

@@ -1,39 +1,2 @@
-import { ControlGroupProps } from '@bonprix-ds/utils';
-import { default as default_2 } from 'react';
-import { ReactNode } from 'react';
-
-declare interface ControlledInputProps extends Omit<ControlGroupProps, "componentName"> {
-    value: string;
-    onChange: (value: string) => void;
-}
-
-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. */
-    label: ReactNode;
-    /** 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. */
-    suffix?: ReactNode;
-    /** Additional content to be displayed when item is selected. */
-    additional?: ReactNode;
-}
-
-export declare type RadioGroupProps = ControlledInputProps | UncontrolledInputProps;
-
-declare interface UncontrolledInputProps extends Omit<ControlGroupProps, "componentName"> {
-    value?: never;
-    defaultValue: string;
-    onChange?: (value: string) => void;
-}
-
-export { }
+export { default } from "./src/RadioGroup";
+export type { Props as RadioGroupProps } from "./src/RadioGroup";

package/dist/no-styles.js

@@ -0,0 +1 @@
+export {};

package/dist/src/RadioGroup.css

@@ -1,14 +1,14 @@
 [data-bpds-has-divider="true"] {
   [role="radiogroup"] [data-bpds-radio-group-item]:not(:last-child)::after {
-    background-color: var(--color-bg-main-light);
-    block-size: var(--spacing-0-25);
+    background-color: var(--bpds-color-bg-main-light);
+    block-size: var(--bpds-spacing-0-25);
     content: "";
     display: block;
-    margin-block: var(--spacing-0-5);
+    margin-block: var(--bpds-spacing-0-5);
     margin-inline: var(--divider-margin-inline, 0);
   }
 
   &[data-bpds-has-horizontal-padding="true"] {
-    --divider-margin-inline: calc(var(--spacing-3) * -1);
+    --divider-margin-inline: calc(var(--bpds-spacing-3) * -1);
   }
 }

package/dist/src/RadioGroup.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { type Props } from "./RadioGroupRoot";
+export type { Props };
+declare const RadioGroup: {
+    (props: Props): React.JSX.Element;
+    displayName: string;
+    Item: {
+        ({ value, label, additional, suffix }: import("./RadioGroupItem").RadioGroupItemProps): React.JSX.Element;
+        displayName: string;
+    };
+};
+export default RadioGroup;

package/dist/src/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.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"}
+{"version":3,"file":"RadioGroup.js","names":["RadioGroupItem","RadioGroupRoot","RadioGroup","props"],"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,IAAME,KAAc,MAAiB,kBAACD,GAAD,EAAgB,GAAIE,EAAQ,CAAA;AAEjE,EAAW,cAAc,cAEzB,EAAW,OAAOH"}

package/dist/src/RadioGroupContext.d.ts

@@ -0,0 +1,6 @@
+export interface RadioGroupContextProps {
+    disabled: boolean;
+    checkedValue: string;
+}
+declare const RadioGroupContext: import("react").Context<RadioGroupContextProps>;
+export default RadioGroupContext;

package/dist/src/RadioGroupContext.js.map

@@ -1 +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"}
+{"version":3,"file":"RadioGroupContext.js","names":["RadioGroupContext","createContext"],"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,IAAMA,IAAoBC,EAAsC;CAC9D,UAAU;CACV,cAAc;AAChB,CAAC"}

package/dist/src/RadioGroupItem.d.ts

@@ -0,0 +1,16 @@
+import React, { ReactNode } from "react";
+export interface RadioGroupItemProps {
+    /** The value of the radio button. */
+    value: string;
+    /** The label of the radio button. */
+    label: ReactNode;
+    /** 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. */
+    suffix?: ReactNode;
+    /** Additional content to be displayed when item is selected. */
+    additional?: ReactNode;
+}
+declare const RadioGroupItem: {
+    ({ value, label, additional, suffix }: RadioGroupItemProps): React.JSX.Element;
+    displayName: string;
+};
+export default RadioGroupItem;

package/dist/src/RadioGroupItem.js

@@ -1,16 +1,16 @@
 "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 * as t from "@radix-ui/react-radio-group";
+import { tv as n } from "tailwind-variants";
 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",
+var a = n({
+	base: "preflight typography-input-text flex justify-between gap-2 text-clr-primary",
 	slots: {
-		item: ["w-6 h-6 border text-inherit border-current rounded-full shrink-0", "focus-visible:outline outline-current outline-2 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%]"],
+		item: ["h-6 w-6 shrink-0 rounded-full border border-current text-inherit", "outline-2 outline-offset-2 outline-current focus-visible:outline"],
+		indicatorAndLabel: "flex flex-1 items-center gap-2 py-3",
+		indicator: ["relative flex h-full w-full items-center justify-center after:block after:w-2.5 after:content-['']", "after:h-2.5 after:rounded-[50%] after:bg-current"],
 		suffix: "h-12 flex-none"
 	},
 	variants: { disabled: {
@@ -20,8 +20,8 @@ var a = t({
 		},
 		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;
+}), o = ({ value: n, 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 = n === "" ? "hidden" : void 0, _ = n === u;
 	return /* @__PURE__ */ i("div", {
 		className: g,
 		"data-bpds-radio-group-item": "",
@@ -31,11 +31,11 @@ var a = t({
 			className: d(),
 			children: [/* @__PURE__ */ i("span", {
 				className: p(),
-				children: [/* @__PURE__ */ r(n.Item, {
-					value: t,
+				children: [/* @__PURE__ */ r(t.Item, {
+					value: n,
 					className: f(),
 					disabled: l,
-					children: /* @__PURE__ */ r(n.Indicator, { className: m() })
+					children: /* @__PURE__ */ r(t.Indicator, { className: m() })
 				}), o]
 			}), c && /* @__PURE__ */ r("span", {
 				className: h(),

package/dist/src/RadioGroupItem.js.map

@@ -1 +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 outline-current outline-2 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,kEACF;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"}
+{"version":3,"file":"RadioGroupItem.js","names":["useConsumeRadioGroup","RadioGroupPrimitive","generateClasses","tv","RadioGroupItem","suffixClasses","hidden","value","isChecked","checkedValue","suffix","additional","base","indicatorAndLabel","item","indicator","label"],"sources":["../../src/RadioGroupItem.tsx"],"sourcesContent":["\"use client\";\n\nimport * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\";\nimport React, { ReactNode } from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport useConsumeRadioGroup from \"./useConsumeRadioGroup\";\n\nconst generateClasses = tv({\n  base: \"preflight typography-input-text flex justify-between gap-2 text-clr-primary\",\n  slots: {\n    item: [\n      \"h-6 w-6 shrink-0 rounded-full border border-current text-inherit\",\n      \"outline-2 outline-offset-2 outline-current focus-visible:outline\",\n    ],\n    // py is used instead of h-8, because h-8 will make the item label vertically centered\n    indicatorAndLabel: \"flex flex-1 items-center gap-2 py-3\",\n    indicator: [\n      \"relative flex h-full w-full items-center justify-center after:block after:w-2.5 after:content-['']\",\n      \"after:h-2.5 after:rounded-[50%] after:bg-current\",\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,IAAME,IAAkBC,EAAG;CACzB,MAAM;CACN,OAAO;EACL,MAAM,CACJ,oEACA,kEACF;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,GAaKC,KAAkB,EAAE,UAAO,UAAO,eAAY,gBAAkC;CACpF,IAAM,EAAE,aAAU,oBAAiBJ,EAAqB,GAClD,EAAE,SAAM,SAAM,sBAAmB,cAAW,QAAQK,MAAkBH,EAAgB,EAAE,YAAS,CAAC,GAClGI,IAASC,MAAU,KAAK,WAAW,KAAA,GAEnCC,IAAYD,MAAUE;CAE5B,OACE,kBAAC,OAAD;EAAK,WAAWH;EAAQ,8BAA2B;EAAG,wBAAsB,CAAC,CAACI;EAAQ,4BAA0B,CAAC,CAACC;EAAlH,UAAA,CACE,kBAAC,SAAD;GAAO,WAAWC,EAAK;GAAvB,UAAA,CACE,kBAAC,QAAD;IAAM,WAAWC,EAAkB;IAAnC,UAAA,CACE,kBAACZ,EAAoB,MAArB;KAAiC;KAAO,WAAWa,EAAK;KAAa;KACnE,UAAA,kBAACb,EAAoB,WAArB,EAA+B,WAAWc,EAAU,EAAI,CAAA;IAChC,CAAA,GACzBC,CACG;GACL,CAAA,GAAAN,KAAU,kBAAC,QAAD;IAAM,WAAWL,EAAc;IAAI,UAAAK;GAAa,CAAA,CACtD;EACN,CAAA,GAAAC,KAAcH,KAAa,kBAAC,OAAD,EAAA,UAAMG,EAAgB,CAAA,CAC/C;;AAET;AAEA,EAAe,cAAc"}

package/dist/src/RadioGroupRoot.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import { ControlGroupProps as RadioControlGroupProps } from "@bonprix-ds/utils";
+import "./RadioGroup.css";
+interface ControlledInputProps extends Omit<RadioControlGroupProps, "componentName"> {
+    value: string;
+    onChange: (value: string) => void;
+}
+interface UncontrolledInputProps extends Omit<RadioControlGroupProps, "componentName"> {
+    value?: never;
+    defaultValue: string;
+    onChange?: (value: string) => void;
+}
+export type Props = ControlledInputProps | UncontrolledInputProps;
+declare const RadioGroupRoot: {
+    ({ value, onChange, label, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children, name, disabled, error, errorText, helperText, required, divider, horizontalPadding, ...unionProps }: Props): React.JSX.Element;
+    displayName: string;
+};
+export default RadioGroupRoot;

package/dist/src/RadioGroupRoot.js

@@ -5,7 +5,7 @@ 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";
-import "./RadioGroup.css";
+import "#styles";
 //#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;

package/dist/src/RadioGroupRoot.js.map

@@ -1 +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"}
+{"version":3,"file":"RadioGroupRoot.js","names":["RadioGroupContext","RadioGroupItem","RadioGroupPrimitive","RadioGroupRoot","ariaLabel","ariaLabelledBy","unionProps","defaultValue","internalValue","setInternalValue","useState","isControlled","value","checkedValue","SelectionControlGroup","newValue","onChange","children"],"sources":["../../src/RadioGroupRoot.tsx"],"sourcesContent":["\"use client\";\n\nimport * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\";\nimport React, { useState } from \"react\";\n\nimport { SelectionControlGroup } from \"@bonprix-ds/internal-components\";\nimport { ControlGroupProps as RadioControlGroupProps } from \"@bonprix-ds/utils\";\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":";;;;;;;;;AA0BA,IAAMG,KAAkB,EACtB,UACA,aACA,UACA,cAAcC,GACd,mBAAmBC,GACnB,aACA,SACA,cAAW,IACX,WAAQ,IACR,eAAY,IACZ,eACA,cAAW,IACX,aAAU,IACV,uBAAoB,IACpB,GAAGC,QACQ;CACX,IAAMC,IAAe,kBAAkBD,IAAaA,EAAW,eAAe,KAAA,GAIxE,CAACE,GAAeC,KAAoBC,EAASH,KAAgB,EAAE,GAC/DI,IAAeC,MAAU,KAAA,GACzBC,IAAeF,IAAeC,IAAQJ;CAO5C,OACE,kBAACM,GAAD;EACS;EACP,cAAYV;EACZ,mBAAiBC;EACX;EACI;EACE;EACL;EACI;EACD;EACV,eAAc;EACL;EACU;EAEnB,UAAA,kBAACH,EAAoB,MAArB;GACQ;GACC;GACP,gBAvBqB,MAAqB;IAE9C,AADKS,KAAcF,EAAiBM,CAAQ,GAC5CC,IAAWD,CAAQ;GACrB;GAqBM,aAAY;GACF;GACA;GACI;GAEd,UAAA,kBAACf,GAAD;IAAmB,OAAO;KAAE;KAAU;IAAa;IAAnD,UAAA,CAEE,kBAACC,GAAD;KAAgB,OAAM;KAAG,OAAM;IAAI,CAAA,GAClCgB,CACgB;;EACK,CAAA;CACL,CAAA;AAE3B;AAEA,EAAe,cAAc"}

package/dist/src/useConsumeRadioGroup.d.ts

@@ -0,0 +1,2 @@
+declare const useConsumeRadioGroup: () => import("./RadioGroupContext").RadioGroupContextProps;
+export default useConsumeRadioGroup;

package/dist/src/useConsumeRadioGroup.js.map

@@ -1 +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"}
+{"version":3,"file":"useConsumeRadioGroup.js","names":["RadioGroupContext","useConsumeRadioGroup","useContext"],"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,IAAMC,UACGC,EAAWF,CAAiB"}

package/dist/styles.js

@@ -0,0 +1 @@
+import "./src/RadioGroup.css";

package/package.json

@@ -1,16 +1,34 @@
 {
   "name": "@bonprix-ds/react-radio-group",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "RadioGroup component, implemented in React, for the Bonprix Design System.",
-  "type": "module",
-  "publishConfig": {
-    "access": "public",
-    "provenance": true
+  "keywords": [],
+  "license": "UNLICENSED",
+  "author": "",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/bonprix/design-system.git",
+    "directory": "packages/react/radio-group"
   },
-  "module": "./dist/index.js",
+  "files": [
+    "dist",
+    "!dist/tsconfig.tsbuildinfo",
+    "!dist/vite.config.d.ts",
+    "!dist/**/*.test.d.ts"
+  ],
+  "type": "module",
   "sideEffects": [
-    "**/*.css"
+    "**/*.css",
+    "./dist/styles.js"
   ],
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "imports": {
+    "#styles": {
+      "browser": "./dist/styles.js",
+      "default": "./dist/no-styles.js"
+    }
+  },
   "exports": {
     ".": {
       "import": "./dist/index.js",
@@ -18,37 +36,25 @@
       "default": "./dist/index.js"
     }
   },
-  "types": "./dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
-  "keywords": [],
-  "author": "",
-  "license": "UNLICENSED",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/bonprix/design-system.git",
-    "directory": "packages/react/radio-group"
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
   },
   "dependencies": {
     "@radix-ui/react-radio-group": "1.4.7",
-    "@bonprix-ds/internal-components": "0.2.0",
-    "@bonprix-ds/utils": "0.2.2"
-  },
-  "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "tailwind-variants": "0.3.1"
+    "@bonprix-ds/internal-components": "0.2.2",
+    "@bonprix-ds/utils": "0.3.0"
   },
   "devDependencies": {
-    "vite": "8.2.2",
-    "@types/react": "19.2.18",
-    "@vitejs/plugin-react": "6.1.1",
-    "rollup-preserve-directives": "1.1.3",
-    "unplugin-dts": "1.1.0",
-    "@microsoft/api-extractor": "7.59.1",
+    "@types/react": "19.3.0",
+    "vite": "8.3.2",
     "@bonprix-ds/vite-config": "0.0.0"
   },
+  "peerDependencies": {
+    "react": "^19",
+    "react-dom": "^19",
+    "tailwind-variants": "0.3.1"
+  },
   "scripts": {
     "build": "vite build"
   }