@bonprix-ds/react-radio-group 1.0.11 → 1.0.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/index.js +1 -2
  2. package/dist/src/RadioGroup.js +1 -2
  3. package/dist/src/RadioGroupContext.d.ts +1 -0
  4. package/dist/src/RadioGroupContext.js +2 -2
  5. package/dist/src/RadioGroupContext.js.map +1 -1
  6. package/dist/src/RadioGroupItem.js +29 -16
  7. package/dist/src/RadioGroupItem.js.map +1 -1
  8. package/dist/src/RadioGroupRoot.js +2 -2
  9. package/dist/src/RadioGroupRoot.js.map +1 -1
  10. package/dist/src/useConsumeRadioGroup.js +1 -2
  11. package/package.json +6 -6
package/dist/index.js CHANGED
@@ -1,2 +1 @@
1
- import e from "./src/RadioGroup.js";
2
- export { e as default };
1
+ export { default } from "./src/RadioGroup.js";
package/dist/src/RadioGroup.js CHANGED
@@ -2,10 +2,9 @@ import e from "./RadioGroupItem.js";
2
2
  import t from "./RadioGroupRoot.js";
3
3
  import "react";
4
4
  import { jsx as n } from "react/jsx-runtime";
5
- //#region src/RadioGroup.tsx
5
+ // src/RadioGroup.tsx
6
6
  var r = (e) => /* @__PURE__ */ n(t, { ...e });
7
7
  r.displayName = "RadioGroup", r.Item = e;
8
- //#endregion
9
8
  export { r as default };
10
9
 
11
10
  //# sourceMappingURL=RadioGroup.js.map
package/dist/src/RadioGroupContext.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  export interface RadioGroupContextProps {
2
2
  disabled: boolean;
3
+ error: boolean;
3
4
  checkedValue: string;
4
5
  }
5
6
  declare const RadioGroupContext: import("react").Context<RadioGroupContextProps>;
package/dist/src/RadioGroupContext.js CHANGED
@@ -1,11 +1,11 @@
1
1
  "use client";
2
2
  import { createContext as e } from "react";
3
- //#region src/RadioGroupContext.ts
3
+ // src/RadioGroupContext.ts
4
4
  var t = e({
5
5
  disabled: !1,
6
+ error: !1,
6
7
  checkedValue: ""
7
8
  });
8
- //#endregion
9
9
  export { t as default };
10
10
 
11
11
  //# sourceMappingURL=RadioGroupContext.js.map
package/dist/src/RadioGroupContext.js.map CHANGED
@@ -1 +1 @@
1
- {"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"}
1
+ {"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 error: boolean;\n checkedValue: string;\n}\n\nconst RadioGroupContext = createContext<RadioGroupContextProps>({\n disabled: false,\n error: false,\n checkedValue: \"\",\n});\n\nexport default RadioGroupContext;\n"],"mappings":";;;AAUA,IAAMA,IAAoBC,EAAsC;CAC9D,UAAU;CACV,OAAO;CACP,cAAc;AAChB,CAAC"}
package/dist/src/RadioGroupItem.js CHANGED
@@ -4,7 +4,7 @@ import "react";
4
4
  import * as t from "@radix-ui/react-radio-group";
5
5
  import { tv as n } from "tailwind-variants";
6
6
  import { jsx as r, jsxs as i } from "react/jsx-runtime";
7
- //#region src/RadioGroupItem.tsx
7
+ // src/RadioGroupItem.tsx
8
8
  var a = n({
9
9
  base: "preflight typography-input-text flex justify-between gap-2 text-clr-primary",
10
10
  slots: {
@@ -13,39 +13,52 @@ var a = n({
13
13
  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"],
14
14
  suffix: "h-12 flex-none"
15
15
  },
16
- variants: { disabled: {
17
- true: {
18
- base: "text-clr-disabled",
19
- item: "bg-clr-bg-disabled"
16
+ variants: {
17
+ disabled: {
18
+ true: {
19
+ base: "text-clr-disabled",
20
+ item: "bg-clr-bg-disabled"
21
+ },
22
+ false: { base: "hover:cursor-pointer hover:text-clr-on-bg-low" }
20
23
  },
21
- false: { base: "hover:cursor-pointer hover:text-clr-on-bg-low" }
22
- } }
24
+ error: { true: "" }
25
+ },
26
+ compoundVariants: [{
27
+ disabled: !1,
28
+ error: !0,
29
+ class: {
30
+ item: "border-clr-fg-error bg-clr-bg-error",
31
+ indicator: "after:bg-clr-fg-error"
32
+ }
33
+ }]
23
34
  }), o = ({ value: n, label: o, additional: s, suffix: c }) => {
24
- 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;
35
+ let { disabled: l, error: u, checkedValue: d } = e(), { base: f, item: p, indicatorAndLabel: m, indicator: h, suffix: g } = a({
36
+ disabled: l,
37
+ error: u
38
+ }), _ = n === "" ? "hidden" : void 0, v = n === d;
25
39
  return /* @__PURE__ */ i("div", {
26
- className: g,
40
+ className: _,
27
41
  "data-bpds-radio-group-item": "",
28
42
  "data-bpds-has-suffix": !!c,
29
43
  "data-bpds-has-additional": !!s,
30
44
  children: [/* @__PURE__ */ i("label", {
31
- className: d(),
45
+ className: f(),
32
46
  children: [/* @__PURE__ */ i("span", {
33
- className: p(),
47
+ className: m(),
34
48
  children: [/* @__PURE__ */ r(t.Item, {
35
49
  value: n,
36
- className: f(),
50
+ className: p(),
37
51
  disabled: l,
38
- children: /* @__PURE__ */ r(t.Indicator, { className: m() })
52
+ children: /* @__PURE__ */ r(t.Indicator, { className: h() })
39
53
  }), o]
40
54
  }), c && /* @__PURE__ */ r("span", {
41
- className: h(),
55
+ className: g(),
42
56
  children: c
43
57
  })]
44
- }), s && _ && /* @__PURE__ */ r("div", { children: s })]
58
+ }), s && v && /* @__PURE__ */ r("div", { children: s })]
45
59
  });
46
60
  };
47
61
  o.displayName = "RadioGroup.Item";
48
- //#endregion
49
62
  export { o as default };
50
63
 
51
64
  //# sourceMappingURL=RadioGroupItem.js.map
package/dist/src/RadioGroupItem.js.map CHANGED
@@ -1 +1 @@
1
- {"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"}
1
+ {"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 error: {\n true: \"\",\n },\n },\n compoundVariants: [\n {\n disabled: false,\n error: true,\n class: {\n item: \"border-clr-fg-error bg-clr-bg-error\",\n indicator: \"after:bg-clr-fg-error\",\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, error, checkedValue } = useConsumeRadioGroup();\n const { base, item, indicatorAndLabel, indicator, suffix: suffixClasses } = generateClasses({ disabled, error });\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;GACR,MAAM;IACJ,MAAM;IACN,MAAM;GACR;GACA,OAAO,EACL,MAAM,gDACR;EACF;EACA,OAAO,EACL,MAAM,GACR;CACF;CACA,kBAAkB,CAChB;EACE,UAAU;EACV,OAAO;EACP,OAAO;GACL,MAAM;GACN,WAAW;EACb;CACF,CACF;AACF,CAAC,GAaKC,KAAkB,EAAE,UAAO,UAAO,eAAY,gBAAkC;CACpF,IAAM,EAAE,aAAU,UAAO,oBAAiBJ,EAAqB,GACzD,EAAE,SAAM,SAAM,sBAAmB,cAAW,QAAQK,MAAkBH,EAAgB;EAAE;EAAU;CAAM,CAAC,GACzGI,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.js CHANGED
@@ -6,7 +6,7 @@ import * as r from "@radix-ui/react-radio-group";
6
6
  import { jsx as i, jsxs as a } from "react/jsx-runtime";
7
7
  import { SelectionControlGroup as o } from "@bonprix-ds/internal-components";
8
8
  import "#styles";
9
- //#region src/RadioGroupRoot.tsx
9
+ // src/RadioGroupRoot.tsx
10
10
  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 }) => {
11
11
  let S = "defaultValue" in x ? x.defaultValue : void 0, [C, w] = n(S ?? ""), T = s !== void 0, E = T ? s : C;
12
12
  return /* @__PURE__ */ i(o, {
@@ -35,6 +35,7 @@ var s = ({ value: s, onChange: c, label: l, "aria-label": u, "aria-labelledby":
35
35
  children: /* @__PURE__ */ a(e, {
36
36
  value: {
37
37
  disabled: m,
38
+ error: h,
38
39
  checkedValue: E
39
40
  },
40
41
  children: [/* @__PURE__ */ i(t, {
@@ -46,7 +47,6 @@ var s = ({ value: s, onChange: c, label: l, "aria-label": u, "aria-labelledby":
46
47
  });
47
48
  };
48
49
  s.displayName = "RadioGroup";
49
- //#endregion
50
50
  export { s as default };
51
51
 
52
52
  //# sourceMappingURL=RadioGroupRoot.js.map
package/dist/src/RadioGroupRoot.js.map CHANGED
@@ -1 +1 @@
1
- {"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"}
1
+ {"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, error, 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;KAAO;IAAa;IAA1D,UAAA,CAEE,kBAACC,GAAD;KAAgB,OAAM;KAAG,OAAM;IAAI,CAAA,GAClCgB,CACgB;;EACK,CAAA;CACL,CAAA;AAE3B;AAEA,EAAe,cAAc"}
package/dist/src/useConsumeRadioGroup.js CHANGED
@@ -1,8 +1,7 @@
1
1
  import e from "./RadioGroupContext.js";
2
2
  import { useContext as t } from "react";
3
- //#region src/useConsumeRadioGroup.ts
3
+ // src/useConsumeRadioGroup.ts
4
4
  var n = () => t(e);
5
- //#endregion
6
5
  export { n as default };
7
6
 
8
7
  //# sourceMappingURL=useConsumeRadioGroup.js.map
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bonprix-ds/react-radio-group",
3
- "version": "1.0.11",
3
+ "version": "1.0.13",
4
4
  "description": "RadioGroup component, implemented in React, for the Bonprix Design System.",
5
5
  "keywords": [],
6
6
  "license": "UNLICENSED",
@@ -41,14 +41,14 @@
41
41
  "provenance": true
42
42
  },
43
43
  "dependencies": {
44
- "@radix-ui/react-radio-group": "1.4.7",
45
- "@bonprix-ds/internal-components": "0.2.4",
46
- "@bonprix-ds/utils": "0.5.0"
44
+ "@bonprix-ds/internal-components": "0.2.6",
45
+ "@bonprix-ds/utils": "0.6.0",
46
+ "@radix-ui/react-radio-group": "1.5.1"
47
47
  },
48
48
  "devDependencies": {
49
+ "@bonprix-ds/vite-config": "0.0.0",
49
50
  "@types/react": "19.3.0",
50
- "vite": "8.3.2",
51
- "@bonprix-ds/vite-config": "0.0.0"
51
+ "vite": "8.3.5"
52
52
  },
53
53
  "peerDependencies": {
54
54
  "react": "^19",