@purr-react-styled-components/components.radio-group 0.0.6 → 0.0.7
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/_components/_label.d.ts +1 -1
- package/dist/_components/_option.d.ts +1 -1
- package/dist/_label-DEWFA00w.js +11 -0
- package/dist/_label-DnBnK4Hi.cjs +1 -0
- package/dist/_style.d.ts +3 -3
- package/dist/_types.d.ts +8 -3
- package/dist/index-BggW1El6.js +93 -0
- package/dist/index-D__1tkxO.cjs +1 -0
- package/dist/index.cjs +1 -1
- package/dist/index.js +1 -1
- package/package.json +6 -5
- package/dist/_label-0hq1Ffuv.cjs +0 -1
- package/dist/_label-3aIov1Gh.js +0 -13
- package/dist/index-BctM_nBW.cjs +0 -1
- package/dist/index-Br4lojAK.js +0 -85
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
2
|
import { IRadioGroupLabelProps } from '../_types';
|
|
3
3
|
|
|
4
|
-
export declare const RadioGroupLabel: React.MemoExoticComponent<({ label,
|
|
4
|
+
export declare const RadioGroupLabel: React.MemoExoticComponent<({ label, htmlAttributes }: IRadioGroupLabelProps) => React.JSX.Element>;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
2
|
import { IRadioGroupOptionProps } from '../_types';
|
|
3
3
|
|
|
4
|
-
export declare const RadioGroupOption: React.MemoExoticComponent<({ label, value, name, htmlAttributes, isStandalone, currentValue, setCurrentValue, onChange, }: IRadioGroupOptionProps) => React.JSX.Element>;
|
|
4
|
+
export declare const RadioGroupOption: React.MemoExoticComponent<({ label, value, name, disabled, htmlAttributes, isStandalone, currentValue, setCurrentValue, onChange, }: IRadioGroupOptionProps) => React.JSX.Element>;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { jsx as a } from "react/jsx-runtime";
|
|
2
|
+
import { memo as e } from "react";
|
|
3
|
+
import { S as m } from "./index-BggW1El6.js";
|
|
4
|
+
const l = e(({
|
|
5
|
+
label: o = "",
|
|
6
|
+
htmlAttributes: r
|
|
7
|
+
}) => /* @__PURE__ */ a(m.Label, { ...r, className: "radio-group-label", children: o }));
|
|
8
|
+
l.displayName = "RadioGroupLabel";
|
|
9
|
+
export {
|
|
10
|
+
l as RadioGroupLabel
|
|
11
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),i=require("react"),t=require("./index-D__1tkxO.cjs"),e=i.memo(({label:r="",htmlAttributes:o})=>a.jsx(t.Styled.Label,{...o,className:"radio-group-label",children:r}));e.displayName="RadioGroupLabel";exports.RadioGroupLabel=e;
|
package/dist/_style.d.ts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
export declare const Styled: {
|
|
2
2
|
Container: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
3
|
-
Label: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components
|
|
4
|
-
|
|
3
|
+
Label: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
|
|
4
|
+
OptionLabel: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {
|
|
5
|
+
$disabled?: boolean;
|
|
5
6
|
}>> & string;
|
|
6
|
-
OptionLabel: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>> & string;
|
|
7
7
|
OptionInput: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
|
|
8
8
|
OptionLabelText: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
|
|
9
9
|
};
|
package/dist/_types.d.ts
CHANGED
|
@@ -1,12 +1,15 @@
|
|
|
1
|
-
import { ChangeEvent, HTMLAttributes, LabelHTMLAttributes } from 'react';
|
|
1
|
+
import { ChangeEvent, HTMLAttributes, LabelHTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
import { FieldError } from 'react-hook-form';
|
|
2
3
|
import { IExtendable } from '@purr-core/utils.definitions';
|
|
4
|
+
import { IHelperTextProps } from '@purr-react-styled-components/components.helper-text';
|
|
3
5
|
|
|
4
6
|
export type TRadioGroupDirection = "column" | "row";
|
|
5
7
|
export interface IRadioGroupOption {
|
|
6
8
|
key: string;
|
|
7
9
|
value: string;
|
|
8
|
-
label?:
|
|
10
|
+
label?: ReactNode;
|
|
9
11
|
htmlAttributes?: LabelHTMLAttributes<HTMLLabelElement> & IExtendable;
|
|
12
|
+
disabled?: boolean;
|
|
10
13
|
}
|
|
11
14
|
export interface IRadioGroupOptionProps extends IRadioGroupOption {
|
|
12
15
|
name: string;
|
|
@@ -17,7 +20,6 @@ export interface IRadioGroupOptionProps extends IRadioGroupOption {
|
|
|
17
20
|
}
|
|
18
21
|
export interface IRadioGroupLabelProps {
|
|
19
22
|
label?: string;
|
|
20
|
-
hasValue?: boolean;
|
|
21
23
|
htmlAttributes?: LabelHTMLAttributes<HTMLLabelElement> & IExtendable;
|
|
22
24
|
}
|
|
23
25
|
export interface IRadioGroupProps {
|
|
@@ -28,6 +30,9 @@ export interface IRadioGroupProps {
|
|
|
28
30
|
label?: string;
|
|
29
31
|
isStandalone?: boolean;
|
|
30
32
|
direction?: TRadioGroupDirection;
|
|
33
|
+
error?: FieldError;
|
|
34
|
+
disabled?: boolean;
|
|
35
|
+
helperTextProps?: IHelperTextProps;
|
|
31
36
|
htmlAttributes?: HTMLAttributes<HTMLDivElement> & IExtendable;
|
|
32
37
|
labelHtmlAttributes?: HTMLAttributes<HTMLSpanElement> & IExtendable;
|
|
33
38
|
optionHtmlAttributes?: LabelHTMLAttributes<HTMLLabelElement> & IExtendable;
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
import { jsx as e, jsxs as h } from "react/jsx-runtime";
|
|
2
|
+
import x from "clsx";
|
|
3
|
+
import { memo as L, useCallback as k, useMemo as R, lazy as I, forwardRef as v, Suspense as g } from "react";
|
|
4
|
+
import G from "@purr-core/hooks.sync-state-with-props";
|
|
5
|
+
import { FlexBox as S } from "@purr-react-styled-components/components.flex-box";
|
|
6
|
+
import { HelperText as z } from "@purr-react-styled-components/components.helper-text";
|
|
7
|
+
import s from "styled-components";
|
|
8
|
+
import { arePropsShallowEqual as A } from "@purr-core/utils.helpers";
|
|
9
|
+
const u = {
|
|
10
|
+
Container: s.div.withConfig({
|
|
11
|
+
displayName: "_style__Container",
|
|
12
|
+
componentId: "sc-192tru7-0"
|
|
13
|
+
})(["display:flex;flex-direction:column;gap:16px;position:relative;"]),
|
|
14
|
+
Label: s.span.withConfig({
|
|
15
|
+
displayName: "_style__Label",
|
|
16
|
+
componentId: "sc-192tru7-1"
|
|
17
|
+
})(['transition:color 200ms ease-in-out;font-size:16px;font-family:"Verdana",sans-serif;font-weight:600;']),
|
|
18
|
+
OptionLabel: s.label.withConfig({
|
|
19
|
+
displayName: "_style__OptionLabel",
|
|
20
|
+
componentId: "sc-192tru7-2"
|
|
21
|
+
})(["display:flex;align-items:center;gap:12px;cursor:", ";opacity:", ";"], ({
|
|
22
|
+
$disabled: a
|
|
23
|
+
}) => a ? "not-allowed" : "pointer", ({
|
|
24
|
+
$disabled: a
|
|
25
|
+
}) => a ? 0.4 : 1),
|
|
26
|
+
OptionInput: s.input.withConfig({
|
|
27
|
+
displayName: "_style__OptionInput",
|
|
28
|
+
componentId: "sc-192tru7-3"
|
|
29
|
+
})(['appearance:none;width:16px;height:16px;border:1px solid #d9d9d9;border-radius:50%;background-color:#ffffff;cursor:pointer;transition:all 300ms ease-in-out;&::before{content:"";display:block;margin-top:4px;margin-left:4px;width:6px;height:6px;border-radius:50%;background-color:#ffffff;transform:scale(0);}&:checked::before{transform:scale(1);}&:checked{background-color:#44403c;border-color:#44403c;}&[type="radio" i]{margin:0;}&:hover:not(:disabled){border-color:#44403c;}']),
|
|
30
|
+
OptionLabelText: s.span.withConfig({
|
|
31
|
+
displayName: "_style__OptionLabelText",
|
|
32
|
+
componentId: "sc-192tru7-4"
|
|
33
|
+
})(['font-family:"Verdana",sans-serif;font-size:16px;'])
|
|
34
|
+
}, _ = L(({
|
|
35
|
+
label: a,
|
|
36
|
+
value: o,
|
|
37
|
+
name: l,
|
|
38
|
+
disabled: d,
|
|
39
|
+
htmlAttributes: r,
|
|
40
|
+
isStandalone: f,
|
|
41
|
+
currentValue: p,
|
|
42
|
+
setCurrentValue: n,
|
|
43
|
+
onChange: i
|
|
44
|
+
}) => {
|
|
45
|
+
const m = f ? void 0 : p === o, t = k((y) => {
|
|
46
|
+
i == null || i(o, y), n == null || n(o);
|
|
47
|
+
}, [i, n, o]), b = R(() => /* @__PURE__ */ e(u.OptionLabelText, { className: "radio-group-option-label", children: a }), [a]);
|
|
48
|
+
return /* @__PURE__ */ h(u.OptionLabel, { $disabled: d, ...r, className: "radio-group-option", children: [
|
|
49
|
+
/* @__PURE__ */ e(u.OptionInput, { className: x("radio-group-option-input", m ? "radio-group-option-input--checked" : ""), name: l, type: "radio", value: o, checked: m, onChange: t, disabled: d }),
|
|
50
|
+
b
|
|
51
|
+
] });
|
|
52
|
+
}, A(["currentValue"], (a, o, l) => {
|
|
53
|
+
switch (a) {
|
|
54
|
+
case "currentValue":
|
|
55
|
+
return l.currentValue === l.value == (o.currentValue === o.value);
|
|
56
|
+
default:
|
|
57
|
+
return;
|
|
58
|
+
}
|
|
59
|
+
}));
|
|
60
|
+
_.displayName = "RadioGroupOption";
|
|
61
|
+
const V = I(() => import("./_label-DEWFA00w.js").then((a) => ({
|
|
62
|
+
default: a.RadioGroupLabel
|
|
63
|
+
}))), j = v(({
|
|
64
|
+
options: a,
|
|
65
|
+
className: o,
|
|
66
|
+
name: l,
|
|
67
|
+
value: d = "",
|
|
68
|
+
label: r = "",
|
|
69
|
+
onChange: f,
|
|
70
|
+
isStandalone: p = !1,
|
|
71
|
+
direction: n = "column",
|
|
72
|
+
error: i = null,
|
|
73
|
+
disabled: m = !1,
|
|
74
|
+
helperTextProps: t,
|
|
75
|
+
htmlAttributes: b,
|
|
76
|
+
labelHtmlAttributes: y,
|
|
77
|
+
optionHtmlAttributes: w
|
|
78
|
+
}, C) => {
|
|
79
|
+
const {
|
|
80
|
+
currentValue: N,
|
|
81
|
+
setCurrentValue: O
|
|
82
|
+
} = G(d, p);
|
|
83
|
+
return /* @__PURE__ */ h(u.Container, { ...b, className: x("radio-group", o), children: [
|
|
84
|
+
/* @__PURE__ */ e(g, { children: !!r && /* @__PURE__ */ e(V, { label: r, htmlAttributes: y }) }),
|
|
85
|
+
/* @__PURE__ */ e(S, { gap: "16px", flexDirection: n, alignItems: n === "column" ? "flex-start" : void 0, children: a == null ? void 0 : a.map((c) => /* @__PURE__ */ e(_, { label: c.label, value: c.value, name: l, htmlAttributes: w ?? c.htmlAttributes, isStandalone: p, currentValue: N, setCurrentValue: O, onChange: f, disabled: c.disabled ?? m }, c.key)) }),
|
|
86
|
+
/* @__PURE__ */ e(g, { children: ((i == null ? void 0 : i.message) || (t == null ? void 0 : t.children)) && /* @__PURE__ */ e(z, { ...t, isError: !!i, variant: "standard", children: (i == null ? void 0 : i.message) ?? (t == null ? void 0 : t.children) ?? "" }) })
|
|
87
|
+
] });
|
|
88
|
+
});
|
|
89
|
+
j.displayName = "RadioGroup";
|
|
90
|
+
export {
|
|
91
|
+
j as R,
|
|
92
|
+
u as S
|
|
93
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";const a=require("react/jsx-runtime"),h=require("clsx"),s=require("react"),j=require("@purr-core/hooks.sync-state-with-props"),L=require("@purr-react-styled-components/components.flex-box"),R=require("@purr-react-styled-components/components.helper-text"),d=require("styled-components"),k=require("@purr-core/utils.helpers"),u={Container:d.div.withConfig({displayName:"_style__Container",componentId:"sc-192tru7-0"})(["display:flex;flex-direction:column;gap:16px;position:relative;"]),Label:d.span.withConfig({displayName:"_style__Label",componentId:"sc-192tru7-1"})(['transition:color 200ms ease-in-out;font-size:16px;font-family:"Verdana",sans-serif;font-weight:600;']),OptionLabel:d.label.withConfig({displayName:"_style__OptionLabel",componentId:"sc-192tru7-2"})(["display:flex;align-items:center;gap:12px;cursor:",";opacity:",";"],({$disabled:e})=>e?"not-allowed":"pointer",({$disabled:e})=>e?.4:1),OptionInput:d.input.withConfig({displayName:"_style__OptionInput",componentId:"sc-192tru7-3"})(['appearance:none;width:16px;height:16px;border:1px solid #d9d9d9;border-radius:50%;background-color:#ffffff;cursor:pointer;transition:all 300ms ease-in-out;&::before{content:"";display:block;margin-top:4px;margin-left:4px;width:6px;height:6px;border-radius:50%;background-color:#ffffff;transform:scale(0);}&:checked::before{transform:scale(1);}&:checked{background-color:#44403c;border-color:#44403c;}&[type="radio" i]{margin:0;}&:hover:not(:disabled){border-color:#44403c;}']),OptionLabelText:d.span.withConfig({displayName:"_style__OptionLabelText",componentId:"sc-192tru7-4"})(['font-family:"Verdana",sans-serif;font-size:16px;'])},g=s.memo(({label:e,value:i,name:l,disabled:c,htmlAttributes:p,isStandalone:b,currentValue:f,setCurrentValue:o,onChange:t})=>{const m=b?void 0:f===i,n=s.useCallback(y=>{t==null||t(i,y),o==null||o(i)},[t,o,i]),x=s.useMemo(()=>a.jsx(u.OptionLabelText,{className:"radio-group-option-label",children:e}),[e]);return a.jsxs(u.OptionLabel,{$disabled:c,...p,className:"radio-group-option",children:[a.jsx(u.OptionInput,{className:h("radio-group-option-input",m?"radio-group-option-input--checked":""),name:l,type:"radio",value:i,checked:m,onChange:n,disabled:c}),x]})},k.arePropsShallowEqual(["currentValue"],(e,i,l)=>{switch(e){case"currentValue":return l.currentValue===l.value==(i.currentValue===i.value);default:return}}));g.displayName="RadioGroupOption";const q=s.lazy(()=>Promise.resolve().then(()=>require("./_label-DnBnK4Hi.cjs")).then(e=>({default:e.RadioGroupLabel}))),_=s.forwardRef(({options:e,className:i,name:l,value:c="",label:p="",onChange:b,isStandalone:f=!1,direction:o="column",error:t=null,disabled:m=!1,helperTextProps:n,htmlAttributes:x,labelHtmlAttributes:y,optionHtmlAttributes:w},I)=>{const{currentValue:N,setCurrentValue:O}=j(c,f);return a.jsxs(u.Container,{...x,className:h("radio-group",i),children:[a.jsx(s.Suspense,{children:!!p&&a.jsx(q,{label:p,htmlAttributes:y})}),a.jsx(L.FlexBox,{gap:"16px",flexDirection:o,alignItems:o==="column"?"flex-start":void 0,children:e==null?void 0:e.map(r=>a.jsx(g,{label:r.label,value:r.value,name:l,htmlAttributes:w??r.htmlAttributes,isStandalone:f,currentValue:N,setCurrentValue:O,onChange:b,disabled:r.disabled??m},r.key))}),a.jsx(s.Suspense,{children:((t==null?void 0:t.message)||(n==null?void 0:n.children))&&a.jsx(R.HelperText,{...n,isError:!!t,variant:"standard",children:(t==null?void 0:t.message)??(n==null?void 0:n.children)??""})})]})});_.displayName="RadioGroup";exports.RadioGroup=_;exports.Styled=u;
|
package/dist/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-D__1tkxO.cjs");exports.RadioGroup=e.RadioGroup;
|
package/dist/index.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@purr-react-styled-components/components.radio-group",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.7",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "dist/index.cjs",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -25,10 +25,11 @@
|
|
|
25
25
|
"react": "*",
|
|
26
26
|
"styled-components": "*",
|
|
27
27
|
"clsx": "*",
|
|
28
|
-
"@purr-core/utils.definitions": "0.0.
|
|
29
|
-
"@purr-core/utils.helpers": "0.0.
|
|
30
|
-
"@purr-react-styled-components/components.flex-box": "0.0.
|
|
31
|
-
"@purr-
|
|
28
|
+
"@purr-core/utils.definitions": "0.0.9",
|
|
29
|
+
"@purr-core/utils.helpers": "0.0.9",
|
|
30
|
+
"@purr-react-styled-components/components.flex-box": "0.0.7",
|
|
31
|
+
"@purr-react-styled-components/components.helper-text": "0.0.6",
|
|
32
|
+
"@purr-core/hooks.sync-state-with-props": "0.0.7"
|
|
32
33
|
},
|
|
33
34
|
"author": "@DinhThienPhuc",
|
|
34
35
|
"license": "ISC",
|
package/dist/_label-0hq1Ffuv.cjs
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),i=require("clsx"),t=require("react"),u=require("./index-BctM_nBW.cjs"),r=t.memo(({label:a="",hasValue:e,htmlAttributes:o})=>l.jsx(u.Styled.Label,{...o,$hasValue:e,className:i("radio-group-label",e&&"radio-group-label--hasValue"),children:a}));r.displayName="RadioGroupLabel";exports.RadioGroupLabel=r;
|
package/dist/_label-3aIov1Gh.js
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { jsx as e } from "react/jsx-runtime";
|
|
2
|
-
import l from "clsx";
|
|
3
|
-
import { memo as m } from "react";
|
|
4
|
-
import { S as i } from "./index-Br4lojAK.js";
|
|
5
|
-
const p = m(({
|
|
6
|
-
label: r = "",
|
|
7
|
-
hasValue: o,
|
|
8
|
-
htmlAttributes: a
|
|
9
|
-
}) => /* @__PURE__ */ e(i.Label, { ...a, $hasValue: o, className: l("radio-group-label", o && "radio-group-label--hasValue"), children: r }));
|
|
10
|
-
p.displayName = "RadioGroupLabel";
|
|
11
|
-
export {
|
|
12
|
-
p as RadioGroupLabel
|
|
13
|
-
};
|
package/dist/index-BctM_nBW.cjs
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";const o=require("react/jsx-runtime"),y=require("clsx"),n=require("react"),w=require("@purr-core/hooks.sync-state-with-props"),O=require("@purr-react-styled-components/components.flex-box"),s=require("styled-components"),L=require("@purr-core/utils.helpers"),l={Container:s.div.withConfig({displayName:"_style__Container",componentId:"sc-192tru7-0"})(["display:flex;flex-direction:column;gap:16px;"]),Label:s.span.withConfig({displayName:"_style__Label",componentId:"sc-192tru7-1"})(["transition:color 200ms ease-in-out;color:",';font-size:16px;font-family:"Verdana",sans-serif;'],({$hasValue:e})=>e?"#90caf9":"#ffffffb3"),OptionLabel:s.label.withConfig({displayName:"_style__OptionLabel",componentId:"sc-192tru7-2"})(["display:flex;align-items:center;gap:12px;cursor:pointer;"]),OptionInput:s.input.withConfig({displayName:"_style__OptionInput",componentId:"sc-192tru7-3"})(['appearance:none;width:16px;height:16px;border:2px solid #90caf9;border-radius:50%;&::before{transition:transform 200ms ease-in-out;content:"";display:block;margin-top:2px;margin-left:2px;width:8px;height:8px;border-radius:50%;background-color:#90caf9;transform:scale(0);}&:checked::before{transform:scale(1);}&[type="radio" i]{margin:0;}']),OptionLabelText:s.span.withConfig({displayName:"_style__OptionLabelText",componentId:"sc-192tru7-4"})(['font-family:"Verdana",sans-serif;font-size:16px;color:#ffffff;'])},g=n.memo(({label:e,value:t,name:i,htmlAttributes:c,isStandalone:p,currentValue:f,setCurrentValue:r,onChange:a})=>{const u=p?void 0:f===t,m=n.useCallback(h=>{a==null||a(t,h),r==null||r(t)},[a,r,t]),x=n.useMemo(()=>o.jsx(l.OptionLabelText,{className:"radio-group-option-label",children:e}),[e]);return o.jsxs(l.OptionLabel,{...c,className:"radio-group-option",children:[o.jsx(l.OptionInput,{className:y("radio-group-option-input",u?"radio-group-option-input--checked":""),name:i,type:"radio",value:t,checked:u,onChange:m}),x]})},L.arePropsShallowEqual(["currentValue"],(e,t,i)=>{switch(e){case"currentValue":return i.currentValue===i.value==(t.currentValue===t.value);default:return}}));g.displayName="RadioGroupOption";const R=n.lazy(()=>Promise.resolve().then(()=>require("./_label-0hq1Ffuv.cjs")).then(e=>({default:e.RadioGroupLabel}))),_=n.forwardRef(({options:e,className:t,name:i,value:c="",label:p="",onChange:f,isStandalone:r=!1,direction:a="column",htmlAttributes:u,labelHtmlAttributes:m,optionHtmlAttributes:x},h)=>{const{currentValue:b,setCurrentValue:N}=w(c,r);return o.jsxs(l.Container,{...u,className:y("radio-group",t),children:[o.jsx(n.Suspense,{children:!!p&&o.jsx(R,{hasValue:!!b,label:p,htmlAttributes:m})}),o.jsx(O.FlexBox,{gap:"16px",flexDirection:a,alignItems:a==="column"?"flex-start":void 0,children:e==null?void 0:e.map(d=>o.jsx(g,{label:d.label,value:d.value,name:i,htmlAttributes:x??d.htmlAttributes,isStandalone:r,currentValue:b,setCurrentValue:N,onChange:f},d.key))})]})});_.displayName="RadioGroup";exports.RadioGroup=_;exports.Styled=l;
|
package/dist/index-Br4lojAK.js
DELETED
|
@@ -1,85 +0,0 @@
|
|
|
1
|
-
import { jsx as i, jsxs as x } from "react/jsx-runtime";
|
|
2
|
-
import y from "clsx";
|
|
3
|
-
import { memo as N, useCallback as w, useMemo as O, lazy as L, forwardRef as R, Suspense as I } from "react";
|
|
4
|
-
import k from "@purr-core/hooks.sync-state-with-props";
|
|
5
|
-
import { FlexBox as G } from "@purr-react-styled-components/components.flex-box";
|
|
6
|
-
import n from "styled-components";
|
|
7
|
-
import { arePropsShallowEqual as S } from "@purr-core/utils.helpers";
|
|
8
|
-
const d = {
|
|
9
|
-
Container: n.div.withConfig({
|
|
10
|
-
displayName: "_style__Container",
|
|
11
|
-
componentId: "sc-192tru7-0"
|
|
12
|
-
})(["display:flex;flex-direction:column;gap:16px;"]),
|
|
13
|
-
Label: n.span.withConfig({
|
|
14
|
-
displayName: "_style__Label",
|
|
15
|
-
componentId: "sc-192tru7-1"
|
|
16
|
-
})(["transition:color 200ms ease-in-out;color:", ';font-size:16px;font-family:"Verdana",sans-serif;'], ({
|
|
17
|
-
$hasValue: e
|
|
18
|
-
}) => e ? "#90caf9" : "#ffffffb3"),
|
|
19
|
-
OptionLabel: n.label.withConfig({
|
|
20
|
-
displayName: "_style__OptionLabel",
|
|
21
|
-
componentId: "sc-192tru7-2"
|
|
22
|
-
})(["display:flex;align-items:center;gap:12px;cursor:pointer;"]),
|
|
23
|
-
OptionInput: n.input.withConfig({
|
|
24
|
-
displayName: "_style__OptionInput",
|
|
25
|
-
componentId: "sc-192tru7-3"
|
|
26
|
-
})(['appearance:none;width:16px;height:16px;border:2px solid #90caf9;border-radius:50%;&::before{transition:transform 200ms ease-in-out;content:"";display:block;margin-top:2px;margin-left:2px;width:8px;height:8px;border-radius:50%;background-color:#90caf9;transform:scale(0);}&:checked::before{transform:scale(1);}&[type="radio" i]{margin:0;}']),
|
|
27
|
-
OptionLabelText: n.span.withConfig({
|
|
28
|
-
displayName: "_style__OptionLabelText",
|
|
29
|
-
componentId: "sc-192tru7-4"
|
|
30
|
-
})(['font-family:"Verdana",sans-serif;font-size:16px;color:#ffffff;'])
|
|
31
|
-
}, g = N(({
|
|
32
|
-
label: e,
|
|
33
|
-
value: o,
|
|
34
|
-
name: r,
|
|
35
|
-
htmlAttributes: l,
|
|
36
|
-
isStandalone: s,
|
|
37
|
-
currentValue: m,
|
|
38
|
-
setCurrentValue: t,
|
|
39
|
-
onChange: a
|
|
40
|
-
}) => {
|
|
41
|
-
const p = s ? void 0 : m === o, f = w((b) => {
|
|
42
|
-
a == null || a(o, b), t == null || t(o);
|
|
43
|
-
}, [a, t, o]), u = O(() => /* @__PURE__ */ i(d.OptionLabelText, { className: "radio-group-option-label", children: e }), [e]);
|
|
44
|
-
return /* @__PURE__ */ x(d.OptionLabel, { ...l, className: "radio-group-option", children: [
|
|
45
|
-
/* @__PURE__ */ i(d.OptionInput, { className: y("radio-group-option-input", p ? "radio-group-option-input--checked" : ""), name: r, type: "radio", value: o, checked: p, onChange: f }),
|
|
46
|
-
u
|
|
47
|
-
] });
|
|
48
|
-
}, S(["currentValue"], (e, o, r) => {
|
|
49
|
-
switch (e) {
|
|
50
|
-
case "currentValue":
|
|
51
|
-
return r.currentValue === r.value == (o.currentValue === o.value);
|
|
52
|
-
default:
|
|
53
|
-
return;
|
|
54
|
-
}
|
|
55
|
-
}));
|
|
56
|
-
g.displayName = "RadioGroupOption";
|
|
57
|
-
const V = L(() => import("./_label-3aIov1Gh.js").then((e) => ({
|
|
58
|
-
default: e.RadioGroupLabel
|
|
59
|
-
}))), v = R(({
|
|
60
|
-
options: e,
|
|
61
|
-
className: o,
|
|
62
|
-
name: r,
|
|
63
|
-
value: l = "",
|
|
64
|
-
label: s = "",
|
|
65
|
-
onChange: m,
|
|
66
|
-
isStandalone: t = !1,
|
|
67
|
-
direction: a = "column",
|
|
68
|
-
htmlAttributes: p,
|
|
69
|
-
labelHtmlAttributes: f,
|
|
70
|
-
optionHtmlAttributes: u
|
|
71
|
-
}, b) => {
|
|
72
|
-
const {
|
|
73
|
-
currentValue: h,
|
|
74
|
-
setCurrentValue: _
|
|
75
|
-
} = k(l, t);
|
|
76
|
-
return /* @__PURE__ */ x(d.Container, { ...p, className: y("radio-group", o), children: [
|
|
77
|
-
/* @__PURE__ */ i(I, { children: !!s && /* @__PURE__ */ i(V, { hasValue: !!h, label: s, htmlAttributes: f }) }),
|
|
78
|
-
/* @__PURE__ */ i(G, { gap: "16px", flexDirection: a, alignItems: a === "column" ? "flex-start" : void 0, children: e == null ? void 0 : e.map((c) => /* @__PURE__ */ i(g, { label: c.label, value: c.value, name: r, htmlAttributes: u ?? c.htmlAttributes, isStandalone: t, currentValue: h, setCurrentValue: _, onChange: m }, c.key)) })
|
|
79
|
-
] });
|
|
80
|
-
});
|
|
81
|
-
v.displayName = "RadioGroup";
|
|
82
|
-
export {
|
|
83
|
-
v as R,
|
|
84
|
-
d as S
|
|
85
|
-
};
|