@ledgerhq/react-ui 0.9.1 → 0.9.2-next.0
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/lib/cjs/components/form/Radio/RadioElement.js +1 -0
- package/lib/cjs/components/form/Radio/RadioElement.js.map +2 -2
- package/lib/cjs/components/form/Radio/RadioListElement.js +1 -0
- package/lib/cjs/components/form/Radio/RadioListElement.js.map +2 -2
- package/lib/cjs/components/loaders/ProgressLoader/index.js +2 -2
- package/lib/cjs/components/loaders/ProgressLoader/index.js.map +1 -1
- package/lib/components/form/Radio/RadioElement.d.ts +1 -0
- package/lib/components/form/Radio/RadioElement.js +1 -0
- package/lib/components/form/Radio/RadioListElement.d.ts +1 -0
- package/lib/components/form/Radio/RadioListElement.js +1 -0
- package/lib/components/form/Radio/index.d.ts +5 -0
- package/lib/components/loaders/ProgressLoader/index.js +2 -2
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/form/Radio/RadioElement.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { InputHTMLAttributes, useContext, useMemo } from \"react\";\nimport styled, { css } from \"styled-components\";\n\nimport { rgba } from \"../../../styles/helpers\";\nimport Text from \"../../asorted/Text\";\nimport { RadioContext } from \"./index\";\n\nconst Label = styled(Text)`\n color: var(--ledger-ui-checkbox-color, ${(p) => p.theme.colors.neutral.c100});\n width: 266px;\n`;\n\nconst Input = styled.input`\n --ledger-ui-checkbox-color: ${(p) => p.theme.colors.neutral.c50};\n --ledger-ui-checkbox-size: 1.25rem;\n\n position: relative;\n appearance: none;\n width: var(--ledger-ui-checkbox-size);\n height: var(--ledger-ui-checkbox-size);\n flex-shrink: 0;\n border-radius: ${(p) => `${p.theme.radii[1]}px`};\n border: 1px solid var(--ledger-ui-checkbox-color);\n cursor: pointer;\n\n &:checked::before {\n position: absolute;\n display: block;\n content: \" \";\n background-color: var(--ledger-ui-checkbox-color);\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n margin: auto;\n border-radius: 2px;\n width: calc(var(--ledger-ui-checkbox-size) / 2);\n height: calc(var(--ledger-ui-checkbox-size) / 2);\n }\n\n &[data-variant=\"default\"] {\n :hover {\n --ledger-ui-checkbox-color: ${(p) => p.theme.colors.primary.c90};\n }\n :active {\n --ledger-ui-checkbox-color: ${(p) => p.theme.colors.primary.c100};\n }\n :checked,\n :focus {\n --ledger-ui-checkbox-color: ${(p) => p.theme.colors.primary.c80};\n }\n :focus {\n box-shadow: 0px 0px 0px 4px ${(p) => rgba(p.theme.colors.primary.c60, 0.48)};\n }\n }\n\n &[data-variant=\"main\"] {\n :hover {\n --ledger-ui-checkbox-color: ${(p) => p.theme.colors.neutral.c90};\n }\n :active,\n :checked,\n :focus {\n --ledger-ui-checkbox-color: ${(p) => p.theme.colors.neutral.c100};\n }\n :focus {\n box-shadow: 0px 0px 0px 4px ${(p) => rgba(p.theme.colors.neutral.c60, 0.48)};\n }\n }\n\n &[data-variant=\"success\"] {\n :hover,\n :checked:not([disabled]),\n :checked:not([disabled]) + ${Label}, :focus {\n --ledger-ui-checkbox-color: ${(p) => p.theme.colors.success.c100};\n }\n :focus {\n box-shadow: 0px 0px 0px 4px ${(p) => rgba(p.theme.colors.success.c100, 0.48)};\n }\n }\n\n &[data-variant=\"error\"] {\n :hover,\n :checked:not([disabled]),\n :checked:not([disabled]) + ${Label}, :focus {\n --ledger-ui-checkbox-color: ${(p) => p.theme.colors.error.c100};\n }\n :focus {\n box-shadow: 0px 0px 0px 4px ${(p) => rgba(p.theme.colors.error.c100, 0.48)};\n }\n }\n\n &[data-variant]:disabled {\n --ledger-ui-checkbox-color: ${(p) => p.theme.colors.neutral.c40};\n cursor: unset;\n background-color: ${(p) => p.theme.colors.neutral.c30};\n }\n`;\n\nconst outlinedCSS = css`\n padding: 20px;\n border: 1px solid ${(p) => p.theme.colors.neutral.c50};\n border-radius: ${(p) => p.theme.radii[2]}px;\n &[data-variant=\"default\"] {\n :hover {\n border-color: ${(p) => p.theme.colors.primary.c90};\n }\n &[data-checked] :active {\n border-color: ${(p) => p.theme.colors.primary.c100};\n }\n :focus {\n border-color: ${(p) => p.theme.colors.primary.c80};\n }\n }\n\n &[data-variant=\"main\"] {\n :hover {\n border-color: ${(p) => p.theme.colors.neutral.c90};\n }\n &[data-checked],\n :active :focus {\n border-color: ${(p) => p.theme.colors.neutral.c100};\n }\n }\n\n &[data-variant=\"success\"] {\n &[data-checked]:not([disabled]) {\n border-color: ${(p) => p.theme.colors.success.c100};\n }\n :hover {\n border-color: ${(p) => p.theme.colors.success.c100};\n }\n }\n\n &[data-variant=\"error\"] {\n &[data-checked]:not([disabled]) {\n border-color: ${(p) => p.theme.colors.error.c100};\n }\n :hover {\n border-color: ${(p) => p.theme.colors.error.c100};\n }\n }\n\n &[data-variant]:disabled {\n border-color: ${(p) => p.theme.colors.neutral.c40};\n cursor: unset;\n }\n`;\n\nconst RadioElement = styled.label.attrs({ tabIndex: -1 })<{\n outlined?: boolean;\n}>`\n display: inline-flex;\n column-gap: 0.75rem;\n align-items: center;\n cursor: pointer;\n &[data-variant]:disabled {\n cursor: unset;\n }\n ${(p) => p.outlined && outlinedCSS}\n`;\n\ntype InputAttributes = Omit<InputHTMLAttributes<HTMLInputElement>, \"type\" | \"onChange\" | \"name\">;\n\nexport type RadioElementProps = InputAttributes & {\n variant?: \"default\" | \"main\" | \"success\" | \"error\";\n label: string;\n outlined?: boolean;\n};\n\nconst Element = ({\n label,\n value,\n disabled,\n outlined,\n variant = \"default\",\n ...props\n}: RadioElementProps): JSX.Element => {\n const context = useContext(RadioContext);\n if (context === undefined) throw new Error(\"RadioElement must be used within a RadioProvider\");\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n const isChecked = useMemo(() => context.currentValue === value, [context.currentValue]);\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n context.onChange(event.target.value);\n };\n\n return (\n <RadioElement\n data-variant={variant}\n {...(isChecked ? { \"data-checked\": true } : {})}\n outlined={outlined}\n >\n <Input\n type=\"radio\"\n data-variant={variant}\n checked={isChecked}\n disabled={disabled}\n onChange={handleChange}\n value={value}\n name={context.name}\n {...props}\n />\n <Label variant=\"paragraph\">{label}</Label>\n </RadioElement>\n );\n};\n\nElement.displayName = \"Radio.Element\"; // For easy identification in the React devtools & in storybook\n\nexport default Element;\n"],
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["import React, { InputHTMLAttributes, useContext, useMemo } from \"react\";\nimport styled, { css } from \"styled-components\";\n\nimport { rgba } from \"../../../styles/helpers\";\nimport Text from \"../../asorted/Text\";\nimport { RadioContext } from \"./index\";\n\nconst Label = styled(Text)`\n color: var(--ledger-ui-checkbox-color, ${(p) => p.theme.colors.neutral.c100});\n width: 266px;\n`;\n\nconst Input = styled.input`\n --ledger-ui-checkbox-color: ${(p) => p.theme.colors.neutral.c50};\n --ledger-ui-checkbox-size: 1.25rem;\n\n position: relative;\n appearance: none;\n width: var(--ledger-ui-checkbox-size);\n height: var(--ledger-ui-checkbox-size);\n flex-shrink: 0;\n border-radius: ${(p) => `${p.theme.radii[1]}px`};\n border: 1px solid var(--ledger-ui-checkbox-color);\n cursor: pointer;\n\n &:checked::before {\n position: absolute;\n display: block;\n content: \" \";\n background-color: var(--ledger-ui-checkbox-color);\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n margin: auto;\n border-radius: 2px;\n width: calc(var(--ledger-ui-checkbox-size) / 2);\n height: calc(var(--ledger-ui-checkbox-size) / 2);\n }\n\n &[data-variant=\"default\"] {\n :hover {\n --ledger-ui-checkbox-color: ${(p) => p.theme.colors.primary.c90};\n }\n :active {\n --ledger-ui-checkbox-color: ${(p) => p.theme.colors.primary.c100};\n }\n :checked,\n :focus {\n --ledger-ui-checkbox-color: ${(p) => p.theme.colors.primary.c80};\n }\n :focus {\n box-shadow: 0px 0px 0px 4px ${(p) => rgba(p.theme.colors.primary.c60, 0.48)};\n }\n }\n\n &[data-variant=\"main\"] {\n :hover {\n --ledger-ui-checkbox-color: ${(p) => p.theme.colors.neutral.c90};\n }\n :active,\n :checked,\n :focus {\n --ledger-ui-checkbox-color: ${(p) => p.theme.colors.neutral.c100};\n }\n :focus {\n box-shadow: 0px 0px 0px 4px ${(p) => rgba(p.theme.colors.neutral.c60, 0.48)};\n }\n }\n\n &[data-variant=\"success\"] {\n :hover,\n :checked:not([disabled]),\n :checked:not([disabled]) + ${Label}, :focus {\n --ledger-ui-checkbox-color: ${(p) => p.theme.colors.success.c100};\n }\n :focus {\n box-shadow: 0px 0px 0px 4px ${(p) => rgba(p.theme.colors.success.c100, 0.48)};\n }\n }\n\n &[data-variant=\"error\"] {\n :hover,\n :checked:not([disabled]),\n :checked:not([disabled]) + ${Label}, :focus {\n --ledger-ui-checkbox-color: ${(p) => p.theme.colors.error.c100};\n }\n :focus {\n box-shadow: 0px 0px 0px 4px ${(p) => rgba(p.theme.colors.error.c100, 0.48)};\n }\n }\n\n &[data-variant]:disabled {\n --ledger-ui-checkbox-color: ${(p) => p.theme.colors.neutral.c40};\n cursor: unset;\n background-color: ${(p) => p.theme.colors.neutral.c30};\n }\n`;\n\nconst outlinedCSS = css`\n padding: 20px;\n border: 1px solid ${(p) => p.theme.colors.neutral.c50};\n border-radius: ${(p) => p.theme.radii[2]}px;\n &[data-variant=\"default\"] {\n :hover {\n border-color: ${(p) => p.theme.colors.primary.c90};\n }\n &[data-checked] :active {\n border-color: ${(p) => p.theme.colors.primary.c100};\n }\n :focus {\n border-color: ${(p) => p.theme.colors.primary.c80};\n }\n }\n\n &[data-variant=\"main\"] {\n :hover {\n border-color: ${(p) => p.theme.colors.neutral.c90};\n }\n &[data-checked],\n :active :focus {\n border-color: ${(p) => p.theme.colors.neutral.c100};\n }\n }\n\n &[data-variant=\"success\"] {\n &[data-checked]:not([disabled]) {\n border-color: ${(p) => p.theme.colors.success.c100};\n }\n :hover {\n border-color: ${(p) => p.theme.colors.success.c100};\n }\n }\n\n &[data-variant=\"error\"] {\n &[data-checked]:not([disabled]) {\n border-color: ${(p) => p.theme.colors.error.c100};\n }\n :hover {\n border-color: ${(p) => p.theme.colors.error.c100};\n }\n }\n\n &[data-variant]:disabled {\n border-color: ${(p) => p.theme.colors.neutral.c40};\n cursor: unset;\n }\n`;\n\nconst RadioElement = styled.label.attrs({ tabIndex: -1 })<{\n outlined?: boolean;\n}>`\n display: inline-flex;\n column-gap: 0.75rem;\n align-items: center;\n cursor: pointer;\n &[data-variant]:disabled {\n cursor: unset;\n }\n ${(p) => p.outlined && outlinedCSS}\n`;\n\ntype InputAttributes = Omit<InputHTMLAttributes<HTMLInputElement>, \"type\" | \"onChange\" | \"name\">;\n\nexport type RadioElementProps = InputAttributes & {\n variant?: \"default\" | \"main\" | \"success\" | \"error\";\n label: string;\n outlined?: boolean;\n};\n\nconst Element = ({\n label,\n value,\n disabled,\n outlined,\n variant = \"default\",\n ...props\n}: RadioElementProps): JSX.Element => {\n const context = useContext(RadioContext);\n if (context === undefined) throw new Error(\"RadioElement must be used within a RadioProvider\");\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n const isChecked = useMemo(() => context.currentValue === value, [context.currentValue]);\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n context.onChange(event.target.value);\n };\n\n return (\n <RadioElement\n data-variant={variant}\n {...(isChecked ? { \"data-checked\": true } : {})}\n outlined={outlined}\n >\n <Input\n type=\"radio\"\n data-variant={variant}\n checked={isChecked}\n disabled={disabled}\n onChange={handleChange}\n value={value}\n name={context.name}\n {...props}\n />\n <Label variant=\"paragraph\">{label}</Label>\n </RadioElement>\n );\n};\n\nElement.displayName = \"Radio.Element\"; // For easy identification in the React devtools & in storybook\nElement.Label = Label;\n\nexport default Element;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -91,5 +91,6 @@ const ListElement = ({
|
|
|
91
91
|
}, label) : import_react.default.createElement(label, { checked: isChecked, disabled })));
|
|
92
92
|
};
|
|
93
93
|
ListElement.displayName = "Radio.ListElement";
|
|
94
|
+
ListElement.Label = Label;
|
|
94
95
|
var RadioListElement_default = ListElement;
|
|
95
96
|
//# sourceMappingURL=RadioListElement.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/form/Radio/RadioListElement.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { InputHTMLAttributes, useContext } from \"react\";\nimport styled from \"styled-components\";\nimport Text from \"../../asorted/Text\";\nimport Flex, { FlexBoxProps } from \"../../layout/Flex\";\nimport { rgba } from \"../../../styles/helpers\";\nimport { RadioContext } from \"./index\";\n\ntype ElementState = {\n checked: boolean;\n disabled: boolean | undefined;\n};\n\nexport const Label = styled(Text)<ElementState>`\n color: ${(p) =>\n p.disabled\n ? p.theme.colors.neutral.c50\n : p.checked\n ? p.theme.colors.primary.c90\n : p.theme.colors.neutral.c100};\n`;\n\nconst Container = styled(Flex)<ElementState>`\n cursor: ${(p) => (p.disabled ? \"\" : \"pointer\")};\n justify-content: center;\n align-items: center;\n background-color: ${(p) => (p.checked ? p.theme.colors.primary.c20 : \"\")};\n border: 1px solid ${(p) => (p.checked ? p.theme.colors.primary.c50 : p.theme.colors.neutral.c40)};\n border-radius: ${(p) => `${p.theme.radii[2]}px`};\n padding: ${(p) => p.theme.space[6]}px;\n\n :hover {\n border-color: ${(p) => (p.disabled || p.checked ? \"\" : p.theme.colors.primary.c80)};\n }\n`;\n\nconst Input = styled.input`\n position: relative;\n appearance: none;\n &:focus ~ ${Container} {\n box-shadow: 0px 0px 0px 4px ${(p) => rgba(p.theme.colors.primary.c60, 0.48)};\n }\n`;\n\nconst RadioListElement = styled.label.attrs({ tabIndex: -1 })`\n display: inline-flex;\n align-items: center;\n`;\n\ntype InputAttributes = Omit<InputHTMLAttributes<HTMLInputElement>, \"type\" | \"onChange\" | \"name\">;\n\nexport type RadioListElementProps = InputAttributes & {\n /**\n * The string or component that will be rendered as label of this radio element\n * If it's a component, it's rendered with these props: { checked:boolean; disabled:boolean }\n * */\n label: string | React.ComponentType<ElementState> | ((arg1: ElementState) => JSX.Element);\n /** Flex props to pass to the container */\n containerProps?: FlexBoxProps;\n};\n\nconst ListElement = ({\n label,\n value,\n disabled,\n containerProps,\n ...props\n}: RadioListElementProps): JSX.Element => {\n const context = useContext(RadioContext);\n if (context === undefined) throw new Error(\"RadioElement must be used within a RadioProvider\");\n\n const isChecked = context.currentValue === value;\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n context.onChange(event.target.value);\n };\n\n return (\n <RadioListElement>\n <Input\n type=\"radio\"\n checked={isChecked}\n disabled={disabled}\n onChange={handleChange}\n value={value}\n name={context.name}\n {...props}\n />\n <Container checked={isChecked} disabled={disabled} {...containerProps}>\n {typeof label === \"string\" ? (\n <Label checked={isChecked} disabled={disabled} variant=\"paragraph\">\n {label}\n </Label>\n ) : (\n React.createElement(label, { checked: isChecked, disabled })\n )}\n </Container>\n </RadioListElement>\n );\n};\n\nListElement.displayName = \"Radio.ListElement\"; // For easy identification in the React devtools & in storybook\n\nexport default ListElement;\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAuD;AACvD,+BAAmB;AACnB,kBAAiB;AACjB,kBAAmC;AACnC,qBAAqB;AACrB,mBAA6B;AAOtB,MAAM,QAAQ,sCAAO;AAAA,WACjB,CAAC,MACR,EAAE,WACE,EAAE,MAAM,OAAO,QAAQ,MACvB,EAAE,UACF,EAAE,MAAM,OAAO,QAAQ,MACvB,EAAE,MAAM,OAAO,QAAQ;AAAA;AAG/B,MAAM,YAAY,sCAAO;AAAA,YACb,CAAC,MAAO,EAAE,WAAW,KAAK;AAAA;AAAA;AAAA,sBAGhB,CAAC,MAAO,EAAE,UAAU,EAAE,MAAM,OAAO,QAAQ,MAAM;AAAA,sBACjD,CAAC,MAAO,EAAE,UAAU,EAAE,MAAM,OAAO,QAAQ,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA,mBAC3E,CAAC,MAAM,GAAG,EAAE,MAAM,MAAM;AAAA,aAC9B,CAAC,MAAM,EAAE,MAAM,MAAM;AAAA;AAAA;AAAA,oBAGd,CAAC,MAAO,EAAE,YAAY,EAAE,UAAU,KAAK,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAIlF,MAAM,QAAQ,iCAAO;AAAA;AAAA;AAAA,cAGP;AAAA,kCACoB,CAAC,MAAM,yBAAK,EAAE,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;AAI1E,MAAM,mBAAmB,iCAAO,MAAM,MAAM,EAAE,UAAU;AAAA;AAAA;AAAA;AAiBxD,MAAM,cAAc,CAAC;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,KACG;AAAA,MACqC;AACxC,QAAM,UAAU,6BAAW;AAC3B,MAAI,YAAY;AAAW,UAAM,IAAI,MAAM;AAE3C,QAAM,YAAY,QAAQ,iBAAiB;AAE3C,QAAM,eAAe,CAAC,UAA+C;AACnE,YAAQ,SAAS,MAAM,OAAO;AAAA;AAGhC,SACE,mDAAC,kBAAD,MACE,mDAAC,OAAD;AAAA,IACE,MAAK;AAAA,IACL,SAAS;AAAA,IACT;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,MAAM,QAAQ;AAAA,OACV;AAAA,MAEN,mDAAC,WAAD;AAAA,IAAW,SAAS;AAAA,IAAW;AAAA,OAAwB;AAAA,KACpD,OAAO,UAAU,WAChB,mDAAC,OAAD;AAAA,IAAO,SAAS;AAAA,IAAW;AAAA,IAAoB,SAAQ;AAAA,KACpD,SAGH,qBAAM,cAAc,OAAO,EAAE,SAAS,WAAW;AAAA;AAO3D,YAAY,cAAc;
|
|
4
|
+
"sourcesContent": ["import React, { InputHTMLAttributes, useContext } from \"react\";\nimport styled from \"styled-components\";\nimport Text from \"../../asorted/Text\";\nimport Flex, { FlexBoxProps } from \"../../layout/Flex\";\nimport { rgba } from \"../../../styles/helpers\";\nimport { RadioContext } from \"./index\";\n\ntype ElementState = {\n checked: boolean;\n disabled: boolean | undefined;\n};\n\nexport const Label = styled(Text)<ElementState>`\n color: ${(p) =>\n p.disabled\n ? p.theme.colors.neutral.c50\n : p.checked\n ? p.theme.colors.primary.c90\n : p.theme.colors.neutral.c100};\n`;\n\nconst Container = styled(Flex)<ElementState>`\n cursor: ${(p) => (p.disabled ? \"\" : \"pointer\")};\n justify-content: center;\n align-items: center;\n background-color: ${(p) => (p.checked ? p.theme.colors.primary.c20 : \"\")};\n border: 1px solid ${(p) => (p.checked ? p.theme.colors.primary.c50 : p.theme.colors.neutral.c40)};\n border-radius: ${(p) => `${p.theme.radii[2]}px`};\n padding: ${(p) => p.theme.space[6]}px;\n\n :hover {\n border-color: ${(p) => (p.disabled || p.checked ? \"\" : p.theme.colors.primary.c80)};\n }\n`;\n\nconst Input = styled.input`\n position: relative;\n appearance: none;\n &:focus ~ ${Container} {\n box-shadow: 0px 0px 0px 4px ${(p) => rgba(p.theme.colors.primary.c60, 0.48)};\n }\n`;\n\nconst RadioListElement = styled.label.attrs({ tabIndex: -1 })`\n display: inline-flex;\n align-items: center;\n`;\n\ntype InputAttributes = Omit<InputHTMLAttributes<HTMLInputElement>, \"type\" | \"onChange\" | \"name\">;\n\nexport type RadioListElementProps = InputAttributes & {\n /**\n * The string or component that will be rendered as label of this radio element\n * If it's a component, it's rendered with these props: { checked:boolean; disabled:boolean }\n * */\n label: string | React.ComponentType<ElementState> | ((arg1: ElementState) => JSX.Element);\n /** Flex props to pass to the container */\n containerProps?: FlexBoxProps;\n};\n\nconst ListElement = ({\n label,\n value,\n disabled,\n containerProps,\n ...props\n}: RadioListElementProps): JSX.Element => {\n const context = useContext(RadioContext);\n if (context === undefined) throw new Error(\"RadioElement must be used within a RadioProvider\");\n\n const isChecked = context.currentValue === value;\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n context.onChange(event.target.value);\n };\n\n return (\n <RadioListElement>\n <Input\n type=\"radio\"\n checked={isChecked}\n disabled={disabled}\n onChange={handleChange}\n value={value}\n name={context.name}\n {...props}\n />\n <Container checked={isChecked} disabled={disabled} {...containerProps}>\n {typeof label === \"string\" ? (\n <Label checked={isChecked} disabled={disabled} variant=\"paragraph\">\n {label}\n </Label>\n ) : (\n React.createElement(label, { checked: isChecked, disabled })\n )}\n </Container>\n </RadioListElement>\n );\n};\n\nListElement.displayName = \"Radio.ListElement\"; // For easy identification in the React devtools & in storybook\nListElement.Label = Label;\n\nexport default ListElement;\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAuD;AACvD,+BAAmB;AACnB,kBAAiB;AACjB,kBAAmC;AACnC,qBAAqB;AACrB,mBAA6B;AAOtB,MAAM,QAAQ,sCAAO;AAAA,WACjB,CAAC,MACR,EAAE,WACE,EAAE,MAAM,OAAO,QAAQ,MACvB,EAAE,UACF,EAAE,MAAM,OAAO,QAAQ,MACvB,EAAE,MAAM,OAAO,QAAQ;AAAA;AAG/B,MAAM,YAAY,sCAAO;AAAA,YACb,CAAC,MAAO,EAAE,WAAW,KAAK;AAAA;AAAA;AAAA,sBAGhB,CAAC,MAAO,EAAE,UAAU,EAAE,MAAM,OAAO,QAAQ,MAAM;AAAA,sBACjD,CAAC,MAAO,EAAE,UAAU,EAAE,MAAM,OAAO,QAAQ,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA,mBAC3E,CAAC,MAAM,GAAG,EAAE,MAAM,MAAM;AAAA,aAC9B,CAAC,MAAM,EAAE,MAAM,MAAM;AAAA;AAAA;AAAA,oBAGd,CAAC,MAAO,EAAE,YAAY,EAAE,UAAU,KAAK,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAIlF,MAAM,QAAQ,iCAAO;AAAA;AAAA;AAAA,cAGP;AAAA,kCACoB,CAAC,MAAM,yBAAK,EAAE,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;AAI1E,MAAM,mBAAmB,iCAAO,MAAM,MAAM,EAAE,UAAU;AAAA;AAAA;AAAA;AAiBxD,MAAM,cAAc,CAAC;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,KACG;AAAA,MACqC;AACxC,QAAM,UAAU,6BAAW;AAC3B,MAAI,YAAY;AAAW,UAAM,IAAI,MAAM;AAE3C,QAAM,YAAY,QAAQ,iBAAiB;AAE3C,QAAM,eAAe,CAAC,UAA+C;AACnE,YAAQ,SAAS,MAAM,OAAO;AAAA;AAGhC,SACE,mDAAC,kBAAD,MACE,mDAAC,OAAD;AAAA,IACE,MAAK;AAAA,IACL,SAAS;AAAA,IACT;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,MAAM,QAAQ;AAAA,OACV;AAAA,MAEN,mDAAC,WAAD;AAAA,IAAW,SAAS;AAAA,IAAW;AAAA,OAAwB;AAAA,KACpD,OAAO,UAAU,WAChB,mDAAC,OAAD;AAAA,IAAO,SAAS;AAAA,IAAW;AAAA,IAAoB,SAAQ;AAAA,KACpD,SAGH,qBAAM,cAAc,OAAO,EAAE,SAAS,WAAW;AAAA;AAO3D,YAAY,cAAc;AAC1B,YAAY,QAAQ;AAEpB,IAAO,2BAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -37,10 +37,10 @@ const StyledCircle = import_styled_components.default.circle.attrs({
|
|
|
37
37
|
transform-origin: 50% 50%;
|
|
38
38
|
`;
|
|
39
39
|
const StyledCircleBackground = (0, import_styled_components.default)(StyledCircle).attrs((props) => ({
|
|
40
|
-
stroke: props.stroke || props.theme.colors.primary.
|
|
40
|
+
stroke: props.stroke || props.theme.colors.primary.c30
|
|
41
41
|
}))``;
|
|
42
42
|
const StyledCircleFront = (0, import_styled_components.default)(StyledCircle).attrs((props) => ({
|
|
43
|
-
stroke: props.stroke || props.theme.colors.primary.
|
|
43
|
+
stroke: props.stroke || props.theme.colors.primary.c80
|
|
44
44
|
}))``;
|
|
45
45
|
const StyledCenteredText = (0, import_styled_components.default)(import_Text.default)`
|
|
46
46
|
position: absolute;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/loaders/ProgressLoader/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport Text from \"../../asorted/Text\";\n\nexport interface Props {\n /**\n * Radius of the progress ring.\n */\n radius?: number;\n\n /**\n * Thickness of the progress ring.\n */\n stroke?: number;\n\n /**\n * Progress of the loader, in percent, between 0 and 100.\n */\n progress?: number;\n\n /**\n * Whether to display the progress, defaults to true.\n */\n showPercentage?: boolean;\n\n /**\n * Percentage text color\n */\n textColor?: string;\n\n /**\n * Front stroke color.\n */\n frontStrokeColor?: string;\n\n /**\n * Front stroke linecap.\n * https://developer.mozilla.org/fr/docs/Web/SVG/Attribute/stroke-linecap\n */\n frontStrokeLinecap?: \"butt\" | \"round\";\n\n /**\n * Background stroke color.\n */\n backgroundStrokeColor?: string;\n}\n\nconst StyledCircle = styled.circle.attrs({\n fill: \"transparent\",\n cx: \"50%\",\n cy: \"50%\",\n})`\n transition: stroke-dashoffset 0.35s;\n transform: rotate(-90deg);\n transform-origin: 50% 50%;\n`;\n\nconst StyledCircleBackground = styled(StyledCircle).attrs((props) => ({\n stroke: props.stroke || props.theme.colors.primary.
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport Text from \"../../asorted/Text\";\n\nexport interface Props {\n /**\n * Radius of the progress ring.\n */\n radius?: number;\n\n /**\n * Thickness of the progress ring.\n */\n stroke?: number;\n\n /**\n * Progress of the loader, in percent, between 0 and 100.\n */\n progress?: number;\n\n /**\n * Whether to display the progress, defaults to true.\n */\n showPercentage?: boolean;\n\n /**\n * Percentage text color\n */\n textColor?: string;\n\n /**\n * Front stroke color.\n */\n frontStrokeColor?: string;\n\n /**\n * Front stroke linecap.\n * https://developer.mozilla.org/fr/docs/Web/SVG/Attribute/stroke-linecap\n */\n frontStrokeLinecap?: \"butt\" | \"round\";\n\n /**\n * Background stroke color.\n */\n backgroundStrokeColor?: string;\n}\n\nconst StyledCircle = styled.circle.attrs({\n fill: \"transparent\",\n cx: \"50%\",\n cy: \"50%\",\n})`\n transition: stroke-dashoffset 0.35s;\n transform: rotate(-90deg);\n transform-origin: 50% 50%;\n`;\n\nconst StyledCircleBackground = styled(StyledCircle).attrs((props) => ({\n stroke: props.stroke || props.theme.colors.primary.c30,\n}))``;\n\nconst StyledCircleFront = styled(StyledCircle).attrs((props) => ({\n stroke: props.stroke || props.theme.colors.primary.c80,\n}))``;\n\nconst StyledCenteredText = styled(Text)`\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n text-align: center;\n`;\n\nconst StyledProgressLoaderContainer = styled.div`\n display: flex;\n position: absolute;\n`;\n\nfunction ProgressCircleSvg({\n radius,\n stroke,\n progress,\n backgroundStrokeColor,\n frontStrokeColor,\n frontStrokeLinecap,\n}: {\n radius: number;\n stroke: number;\n progress: number;\n backgroundStrokeColor?: string;\n frontStrokeColor?: string;\n frontStrokeLinecap?: \"butt\" | \"round\" | \"square\";\n}) {\n const normalizedRadius = radius - stroke / 2;\n const circumference = normalizedRadius * 2 * Math.PI;\n const strokeDashoffset = circumference - (progress / 100) * circumference;\n return (\n <svg height={radius * 2} width={radius * 2}>\n <StyledCircleBackground\n strokeWidth={stroke}\n strokeDasharray={circumference + \" \" + circumference}\n style={{ strokeDashoffset: 0 }}\n stroke={backgroundStrokeColor}\n r={normalizedRadius}\n />\n <StyledCircleFront\n strokeWidth={stroke}\n strokeDasharray={circumference + \" \" + circumference}\n style={{ strokeDashoffset }}\n stroke={frontStrokeColor}\n strokeLinecap={frontStrokeLinecap}\n r={normalizedRadius}\n />\n </svg>\n );\n}\n\nexport default function ProgressLoader({\n radius = 32,\n stroke = 6,\n progress = 0,\n showPercentage = true,\n textColor,\n frontStrokeColor,\n frontStrokeLinecap,\n backgroundStrokeColor,\n}: Props): JSX.Element {\n return (\n <StyledProgressLoaderContainer>\n {showPercentage && (\n <StyledCenteredText variant=\"body\" color={textColor || \"primary.c80\"}>\n {progress}%\n </StyledCenteredText>\n )}\n <ProgressCircleSvg\n radius={radius}\n stroke={stroke}\n progress={progress}\n frontStrokeColor={frontStrokeColor}\n frontStrokeLinecap={frontStrokeLinecap}\n backgroundStrokeColor={backgroundStrokeColor}\n />\n </StyledProgressLoaderContainer>\n );\n}\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAAiB;AA6CjB,MAAM,eAAe,iCAAO,OAAO,MAAM;AAAA,EACvC,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAON,MAAM,yBAAyB,sCAAO,cAAc,MAAM,CAAC,UAAW;AAAA,EACpE,QAAQ,MAAM,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAGrD,MAAM,oBAAoB,sCAAO,cAAc,MAAM,CAAC,UAAW;AAAA,EAC/D,QAAQ,MAAM,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAGrD,MAAM,qBAAqB,sCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQlC,MAAM,gCAAgC,iCAAO;AAAA;AAAA;AAAA;AAK7C,2BAA2B;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,GAQC;AACD,QAAM,mBAAmB,SAAS,SAAS;AAC3C,QAAM,gBAAgB,mBAAmB,IAAI,KAAK;AAClD,QAAM,mBAAmB,gBAAiB,WAAW,MAAO;AAC5D,SACE,mDAAC,OAAD;AAAA,IAAK,QAAQ,SAAS;AAAA,IAAG,OAAO,SAAS;AAAA,KACvC,mDAAC,wBAAD;AAAA,IACE,aAAa;AAAA,IACb,iBAAiB,gBAAgB,MAAM;AAAA,IACvC,OAAO,EAAE,kBAAkB;AAAA,IAC3B,QAAQ;AAAA,IACR,GAAG;AAAA,MAEL,mDAAC,mBAAD;AAAA,IACE,aAAa;AAAA,IACb,iBAAiB,gBAAgB,MAAM;AAAA,IACvC,OAAO,EAAE;AAAA,IACT,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,GAAG;AAAA;AAAA;AAMI,wBAAwB;AAAA,EACrC,SAAS;AAAA,EACT,SAAS;AAAA,EACT,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,GACqB;AACrB,SACE,mDAAC,+BAAD,MACG,kBACC,mDAAC,oBAAD;AAAA,IAAoB,SAAQ;AAAA,IAAO,OAAO,aAAa;AAAA,KACpD,UAAS,MAGd,mDAAC,mBAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -8,5 +8,6 @@ export declare type RadioElementProps = InputAttributes & {
|
|
|
8
8
|
declare const Element: {
|
|
9
9
|
({ label, value, disabled, outlined, variant, ...props }: RadioElementProps): JSX.Element;
|
|
10
10
|
displayName: string;
|
|
11
|
+
Label: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, import("../../asorted/Text").TextProps, keyof import("../../asorted/Text").TextProps>;
|
|
11
12
|
};
|
|
12
13
|
export default Element;
|
|
@@ -18,5 +18,6 @@ export declare type RadioListElementProps = InputAttributes & {
|
|
|
18
18
|
declare const ListElement: {
|
|
19
19
|
({ label, value, disabled, containerProps, ...props }: RadioListElementProps): JSX.Element;
|
|
20
20
|
displayName: string;
|
|
21
|
+
Label: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, import("../../asorted/Text").TextProps & ElementState, keyof import("../../asorted/Text").TextProps>;
|
|
21
22
|
};
|
|
22
23
|
export default ListElement;
|
|
@@ -60,4 +60,5 @@ const ListElement = (_a) => {
|
|
|
60
60
|
React.createElement(Container, Object.assign({ checked: isChecked, disabled: disabled }, containerProps), typeof label === "string" ? (React.createElement(Label, { checked: isChecked, disabled: disabled, variant: "paragraph" }, label)) : (React.createElement(label, { checked: isChecked, disabled })))));
|
|
61
61
|
};
|
|
62
62
|
ListElement.displayName = "Radio.ListElement"; // For easy identification in the React devtools & in storybook
|
|
63
|
+
ListElement.Label = Label;
|
|
63
64
|
export default ListElement;
|
|
@@ -13,10 +13,15 @@ declare const Radio: {
|
|
|
13
13
|
Element: {
|
|
14
14
|
({ label, value, disabled, outlined, variant, ...props }: import("./RadioElement").RadioElementProps): JSX.Element;
|
|
15
15
|
displayName: string;
|
|
16
|
+
Label: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, import("../../asorted/Text").TextProps, keyof import("../../asorted/Text").TextProps>;
|
|
16
17
|
};
|
|
17
18
|
ListElement: {
|
|
18
19
|
({ label, value, disabled, containerProps, ...props }: import("./RadioListElement").RadioListElementProps): JSX.Element;
|
|
19
20
|
displayName: string;
|
|
21
|
+
Label: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, import("../../asorted/Text").TextProps & {
|
|
22
|
+
checked: boolean;
|
|
23
|
+
disabled: boolean | undefined;
|
|
24
|
+
}, keyof import("../../asorted/Text").TextProps>;
|
|
20
25
|
};
|
|
21
26
|
};
|
|
22
27
|
export default Radio;
|
|
@@ -11,10 +11,10 @@ const StyledCircle = styled.circle.attrs({
|
|
|
11
11
|
transform-origin: 50% 50%;
|
|
12
12
|
`;
|
|
13
13
|
const StyledCircleBackground = styled(StyledCircle).attrs((props) => ({
|
|
14
|
-
stroke: props.stroke || props.theme.colors.primary.
|
|
14
|
+
stroke: props.stroke || props.theme.colors.primary.c30,
|
|
15
15
|
})) ``;
|
|
16
16
|
const StyledCircleFront = styled(StyledCircle).attrs((props) => ({
|
|
17
|
-
stroke: props.stroke || props.theme.colors.primary.
|
|
17
|
+
stroke: props.stroke || props.theme.colors.primary.c80,
|
|
18
18
|
})) ``;
|
|
19
19
|
const StyledCenteredText = styled(Text) `
|
|
20
20
|
position: absolute;
|