@bonprix-ds/react-radio-group 1.0.8 → 1.0.9
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.
- package/dist/no-styles.js +1 -0
- package/dist/src/RadioGroup.js.map +1 -1
- package/dist/src/RadioGroupContext.js.map +1 -1
- package/dist/src/RadioGroupItem.js +4 -4
- package/dist/src/RadioGroupItem.js.map +1 -1
- package/dist/src/RadioGroupRoot.js +1 -1
- package/dist/src/RadioGroupRoot.js.map +1 -1
- package/dist/src/useConsumeRadioGroup.js.map +1 -1
- package/dist/styles.js +1 -0
- package/package.json +14 -9
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -1 +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,
|
|
1
|
+
{"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"}
|
|
@@ -1 +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,
|
|
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"}
|
|
@@ -6,11 +6,11 @@ import { tv as n } from "tailwind-variants";
|
|
|
6
6
|
import { jsx as r, jsxs as i } from "react/jsx-runtime";
|
|
7
7
|
//#region src/RadioGroupItem.tsx
|
|
8
8
|
var a = n({
|
|
9
|
-
base: "preflight typography-input-text flex gap-2
|
|
9
|
+
base: "preflight typography-input-text flex justify-between gap-2 text-clr-primary",
|
|
10
10
|
slots: {
|
|
11
|
-
item: ["
|
|
12
|
-
indicatorAndLabel: "flex gap-2 py-3
|
|
13
|
-
indicator: ["flex
|
|
11
|
+
item: ["h-6 w-6 shrink-0 rounded-full border border-current text-inherit", "outline-2 outline-offset-2 outline-current focus-visible:outline"],
|
|
12
|
+
indicatorAndLabel: "flex flex-1 items-center gap-2 py-3",
|
|
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
16
|
variants: { disabled: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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
|
|
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"}
|
|
@@ -5,7 +5,7 @@ import { useState as n } from "react";
|
|
|
5
5
|
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
|
-
import "
|
|
8
|
+
import "#styles";
|
|
9
9
|
//#region 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;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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,
|
|
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 +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,
|
|
1
|
+
{"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
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import "./src/RadioGroup.css";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bonprix-ds/react-radio-group",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.9",
|
|
4
4
|
"description": "RadioGroup component, implemented in React, for the Bonprix Design System.",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"license": "UNLICENSED",
|
|
@@ -18,10 +18,17 @@
|
|
|
18
18
|
],
|
|
19
19
|
"type": "module",
|
|
20
20
|
"sideEffects": [
|
|
21
|
-
"**/*.css"
|
|
21
|
+
"**/*.css",
|
|
22
|
+
"./dist/styles.js"
|
|
22
23
|
],
|
|
23
24
|
"module": "./dist/index.js",
|
|
24
25
|
"types": "./dist/index.d.ts",
|
|
26
|
+
"imports": {
|
|
27
|
+
"#styles": {
|
|
28
|
+
"browser": "./dist/styles.js",
|
|
29
|
+
"default": "./dist/no-styles.js"
|
|
30
|
+
}
|
|
31
|
+
},
|
|
25
32
|
"exports": {
|
|
26
33
|
".": {
|
|
27
34
|
"import": "./dist/index.js",
|
|
@@ -35,19 +42,17 @@
|
|
|
35
42
|
},
|
|
36
43
|
"dependencies": {
|
|
37
44
|
"@radix-ui/react-radio-group": "1.4.7",
|
|
38
|
-
"@bonprix-ds/internal-components": "0.2.
|
|
39
|
-
"@bonprix-ds/utils": "0.
|
|
45
|
+
"@bonprix-ds/internal-components": "0.2.2",
|
|
46
|
+
"@bonprix-ds/utils": "0.3.0"
|
|
40
47
|
},
|
|
41
48
|
"devDependencies": {
|
|
42
49
|
"@types/react": "19.3.0",
|
|
43
|
-
"
|
|
44
|
-
"rollup-preserve-directives": "1.1.3",
|
|
45
|
-
"vite": "8.3.0",
|
|
50
|
+
"vite": "8.3.2",
|
|
46
51
|
"@bonprix-ds/vite-config": "0.0.0"
|
|
47
52
|
},
|
|
48
53
|
"peerDependencies": {
|
|
49
|
-
"react": "^19
|
|
50
|
-
"react-dom": "^19
|
|
54
|
+
"react": "^19",
|
|
55
|
+
"react-dom": "^19",
|
|
51
56
|
"tailwind-variants": "0.3.1"
|
|
52
57
|
},
|
|
53
58
|
"scripts": {
|