@bonprix-ds/react-radio-group 1.0.6 → 1.0.8

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/index.js

@@ -1,2 +1,2 @@
-import e from "./src/RadioGroup2.js";
+import e from "./src/RadioGroup.js";
 export { e as default };

package/dist/src/RadioGroup.css

@@ -0,0 +1,14 @@
+[data-bpds-has-divider="true"] {
+  [role="radiogroup"] [data-bpds-radio-group-item]:not(:last-child)::after {
+    background-color: var(--bpds-color-bg-main-light);
+    block-size: var(--bpds-spacing-0-25);
+    content: "";
+    display: block;
+    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(--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/{RadioGroup2.js → RadioGroup.js}

@@ -8,4 +8,4 @@ r.displayName = "RadioGroup", r.Item = e;
 //#endregion
 export { r as default };
 
-//# sourceMappingURL=RadioGroup2.js.map
+//# sourceMappingURL=RadioGroup.js.map

package/dist/src/RadioGroup.js.map

@@ -0,0 +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"}

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/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,11 +1,11 @@
 "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({
+var a = n({
 	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 outline-current outline-2 outline-offset-2"],
@@ -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":[],"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 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"}

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

@@ -1,11 +1,11 @@
 "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";
+import "./RadioGroup.css";
 //#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":[],"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,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.d.ts

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

package/package.json

@@ -1,16 +1,27 @@
 {
   "name": "@bonprix-ds/react-radio-group",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "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"
   ],
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "import": "./dist/index.js",
@@ -18,35 +29,26 @@
       "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.1.5",
-    "@bonprix-ds/utils": "0.2.1"
-  },
-  "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "tailwind-variants": "0.3.1"
+    "@bonprix-ds/internal-components": "0.2.1",
+    "@bonprix-ds/utils": "0.2.2"
   },
   "devDependencies": {
-    "vite": "8.2.2",
-    "@types/react": "19.2.18",
-    "@vitejs/plugin-react": "6.1.0",
+    "@types/react": "19.3.0",
+    "@vitejs/plugin-react": "6.1.1",
     "rollup-preserve-directives": "1.1.3",
-    "unplugin-dts": "1.0.3",
-    "@microsoft/api-extractor": "7.59.0"
+    "vite": "8.3.0",
+    "@bonprix-ds/vite-config": "0.0.0"
+  },
+  "peerDependencies": {
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "tailwind-variants": "0.3.1"
   },
   "scripts": {
     "build": "vite build"

package/dist/react-radio-group.css

@@ -1,2 +0,0 @@
-[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);content:"";margin-block:var(--spacing-0-5);margin-inline:var(--divider-margin-inline,0);display:block}[data-bpds-has-divider=true][data-bpds-has-horizontal-padding=true]{--divider-margin-inline:calc(var(--spacing-3) * -1)}
-/*$vite$:1*/

package/dist/src/RadioGroup2.js.map

@@ -1 +0,0 @@
-{"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"}