@bonprix-ds/react-radio-group 1.0.4 → 1.0.6
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.
|
@@ -8,7 +8,7 @@ import { jsx as r, jsxs as i } from "react/jsx-runtime";
|
|
|
8
8
|
var a = t({
|
|
9
9
|
base: "preflight typography-input-text flex gap-2 justify-between text-clr-primary",
|
|
10
10
|
slots: {
|
|
11
|
-
item: ["w-6 h-6 border text-inherit border-current rounded-full shrink-0", "focus-visible:outline
|
|
11
|
+
item: ["w-6 h-6 border text-inherit border-current rounded-full shrink-0", "focus-visible:outline outline-current outline-2 outline-offset-2"],
|
|
12
12
|
indicatorAndLabel: "flex gap-2 py-3 flex-1 items-center",
|
|
13
13
|
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%]"],
|
|
14
14
|
suffix: "h-12 flex-none"
|
|
@@ -1 +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
|
|
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"}
|
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.6",
|
|
4
4
|
"description": "RadioGroup component, implemented in React, for the Bonprix Design System.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"publishConfig": {
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
],
|
|
25
25
|
"keywords": [],
|
|
26
26
|
"author": "",
|
|
27
|
-
"license": "
|
|
27
|
+
"license": "UNLICENSED",
|
|
28
28
|
"repository": {
|
|
29
29
|
"type": "git",
|
|
30
30
|
"url": "git+https://github.com/bonprix/design-system.git",
|
|
@@ -32,8 +32,8 @@
|
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"@radix-ui/react-radio-group": "1.4.7",
|
|
35
|
-
"@bonprix-ds/internal-components": "0.1.
|
|
36
|
-
"@bonprix-ds/utils": "0.2.
|
|
35
|
+
"@bonprix-ds/internal-components": "0.1.5",
|
|
36
|
+
"@bonprix-ds/utils": "0.2.1"
|
|
37
37
|
},
|
|
38
38
|
"peerDependencies": {
|
|
39
39
|
"react": "^19.0.0",
|
|
@@ -41,12 +41,12 @@
|
|
|
41
41
|
"tailwind-variants": "0.3.1"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
|
-
"vite": "8.2.
|
|
44
|
+
"vite": "8.2.2",
|
|
45
45
|
"@types/react": "19.2.18",
|
|
46
|
-
"@vitejs/plugin-react": "6.0
|
|
46
|
+
"@vitejs/plugin-react": "6.1.0",
|
|
47
47
|
"rollup-preserve-directives": "1.1.3",
|
|
48
48
|
"unplugin-dts": "1.0.3",
|
|
49
|
-
"@microsoft/api-extractor": "7.
|
|
49
|
+
"@microsoft/api-extractor": "7.59.0"
|
|
50
50
|
},
|
|
51
51
|
"scripts": {
|
|
52
52
|
"build": "vite build"
|