@ledgerhq/react-ui 0.10.0-nightly.3 → 0.10.0-nightly.4
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.
|
@@ -29,7 +29,7 @@ var import_styled_components = __toModule(require("styled-components"));
|
|
|
29
29
|
var import_Text = __toModule(require("../../asorted/Text"));
|
|
30
30
|
var import_CheckAloneRegular = __toModule(require("@ledgerhq/icons-ui/react/CheckAloneRegular"));
|
|
31
31
|
var import_server = __toModule(require("react-dom/server"));
|
|
32
|
-
const Icon = () => import_react.default.cloneElement((0, import_CheckAloneRegular.default)({ size: 13, color: "
|
|
32
|
+
const Icon = () => import_react.default.cloneElement((0, import_CheckAloneRegular.default)({ size: 13, color: "currentColor" }), {
|
|
33
33
|
xmlns: "http://www.w3.org/2000/svg"
|
|
34
34
|
});
|
|
35
35
|
const CheckMarkIcon = encodeURIComponent((0, import_server.renderToStaticMarkup)(/* @__PURE__ */ import_react.default.createElement(Icon, null)));
|
|
@@ -55,6 +55,7 @@ const Input = import_styled_components.default.input`
|
|
|
55
55
|
width: ${(p) => p.theme.space[7]}px;
|
|
56
56
|
height: ${(p) => p.theme.space[7]}px;
|
|
57
57
|
display: inline-block;
|
|
58
|
+
color: ${(props) => props.theme.colors.neutral.c00};
|
|
58
59
|
|
|
59
60
|
background-image: url("data:image/svg+xml,${CheckMarkIcon}");
|
|
60
61
|
background-position: center;
|
|
@@ -113,14 +114,14 @@ const Checkbox = ({
|
|
|
113
114
|
onChange
|
|
114
115
|
}) => /* @__PURE__ */ import_react.default.createElement(Container, {
|
|
115
116
|
"data-variant": variant,
|
|
116
|
-
"data-disabled": isDisabled
|
|
117
|
+
"data-disabled": isDisabled,
|
|
118
|
+
onClick: () => onChange(!isChecked)
|
|
117
119
|
}, /* @__PURE__ */ import_react.default.createElement(Input, {
|
|
118
120
|
type: "checkbox",
|
|
119
121
|
name,
|
|
120
122
|
id: name,
|
|
121
123
|
checked: isChecked,
|
|
122
|
-
disabled: isDisabled
|
|
123
|
-
onChange
|
|
124
|
+
disabled: isDisabled
|
|
124
125
|
}), label ? /* @__PURE__ */ import_react.default.createElement(Label, {
|
|
125
126
|
as: "label",
|
|
126
127
|
htmlFor: name
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/form/Checkbox/Checkbox.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport Text from \"../../asorted/Text\";\nimport CheckAloneRegular from \"@ledgerhq/icons-ui/react/CheckAloneRegular\";\nimport { renderToStaticMarkup } from \"react-dom/server\";\n\nconst Icon = () =>\n React.cloneElement(CheckAloneRegular({ size: 13, color: \"
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAAiB;AACjB,+BAA8B;AAC9B,oBAAqC;AAErC,MAAM,OAAO,MACX,qBAAM,aAAa,sCAAkB,EAAE,MAAM,IAAI,OAAO,
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport Text from \"../../asorted/Text\";\nimport CheckAloneRegular from \"@ledgerhq/icons-ui/react/CheckAloneRegular\";\nimport { renderToStaticMarkup } from \"react-dom/server\";\n\nconst Icon = () =>\n React.cloneElement(CheckAloneRegular({ size: 13, color: \"currentColor\" }), {\n // the xmlns attribute is required to properly display the checkbox\n xmlns: \"http://www.w3.org/2000/svg\",\n });\nconst CheckMarkIcon = encodeURIComponent(renderToStaticMarkup(<Icon />));\n\nconst Input = styled.input`\n background-color: transparent;\n\n border-radius: ${(p) => `${p.theme.radii[1]}px`};\n position: relative;\n\n min-width: ${(p) => p.theme.space[7]}px;\n height: ${(p) => p.theme.space[7]}px;\n appearance: none;\n border: 1px solid ${(props) => props.theme.colors.neutral.c90};\n box-shadow: none;\n\n &:checked {\n background-color: currentColor;\n border-color: currentColor;\n }\n\n &:checked::after {\n content: \" \";\n width: ${(p) => p.theme.space[7]}px;\n height: ${(p) => p.theme.space[7]}px;\n display: inline-block;\n color: ${(props) => props.theme.colors.neutral.c00};\n\n background-image: url(\"data:image/svg+xml,${CheckMarkIcon}\");\n background-position: center;\n background-repeat: no-repeat;\n\n /* Trick to center the check mark by taking into account the border */\n position: absolute;\n top: -1px;\n left: -1px;\n }\n`;\n\nconst Label = styled(Text).attrs({ type: \"body\", fontWeight: \"500\" })`\n color: ${(props) => props.theme.colors.neutral.c80};\n\n /* Version when the input is checked */\n ${Input}:checked + & {\n color: currentColor;\n }\n\n &:first-letter {\n text-transform: uppercase;\n }\n`;\n\nconst Container = styled.div`\n --ll-checkbox-color: unset;\n color: var(--ll-checkbox-color, ${(props) => props.theme.colors.primary.c90});\n\n display: inline-flex;\n column-gap: ${(p) => p.theme.space[5]}px;\n align-items: center;\n cursor: pointer;\n\n &[data-variant=\"default\"] {\n --ll-checkbox-color: ${(props) => props.theme.colors.primary.c90};\n }\n\n &[data-variant=\"success\"] {\n --ll-checkbox-color: ${(props) => props.theme.colors.success.c100};\n }\n\n &[data-variant=\"error\"] {\n --ll-checkbox-color: ${(props) => props.theme.colors.error.c100};\n }\n\n &[data-disabled=\"true\"] {\n --ll-checkbox-color: ${(props) => props.theme.colors.neutral.c80};\n cursor: unset;\n }\n`;\n\nexport type CheckboxProps = {\n isDisabled?: boolean;\n isChecked: boolean;\n variant?: \"default\" | \"success\" | \"error\";\n label?: React.ReactNode;\n name: string;\n onChange: (value: boolean) => void;\n};\n\nconst Checkbox = ({\n isDisabled = false,\n variant = \"default\",\n label,\n isChecked,\n name,\n onChange,\n}: CheckboxProps): JSX.Element => (\n <Container data-variant={variant} data-disabled={isDisabled} onClick={() => onChange(!isChecked)}>\n <Input type=\"checkbox\" name={name} id={name} checked={isChecked} disabled={isDisabled} />\n {label ? (\n <Label as=\"label\" htmlFor={name}>\n {label}\n </Label>\n ) : null}\n </Container>\n);\n\nexport default Checkbox;\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAAiB;AACjB,+BAA8B;AAC9B,oBAAqC;AAErC,MAAM,OAAO,MACX,qBAAM,aAAa,sCAAkB,EAAE,MAAM,IAAI,OAAO,mBAAmB;AAAA,EAEzE,OAAO;AAAA;AAEX,MAAM,gBAAgB,mBAAmB,wCAAqB,mDAAC,MAAD;AAE9D,MAAM,QAAQ,iCAAO;AAAA;AAAA;AAAA,mBAGF,CAAC,MAAM,GAAG,EAAE,MAAM,MAAM;AAAA;AAAA;AAAA,eAG5B,CAAC,MAAM,EAAE,MAAM,MAAM;AAAA,YACxB,CAAC,MAAM,EAAE,MAAM,MAAM;AAAA;AAAA,sBAEX,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAU/C,CAAC,MAAM,EAAE,MAAM,MAAM;AAAA,cACpB,CAAC,MAAM,EAAE,MAAM,MAAM;AAAA;AAAA,aAEtB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,gDAEH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWhD,MAAM,QAAQ,sCAAO,qBAAM,MAAM,EAAE,MAAM,QAAQ,YAAY;AAAA,WAClD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,IAG7C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASJ,MAAM,YAAY,iCAAO;AAAA;AAAA,oCAEW,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,gBAG1D,CAAC,MAAM,EAAE,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,2BAKV,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,2BAItC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,2BAItC,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA,2BAIpC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAcjE,MAAM,WAAW,CAAC;AAAA,EAChB,aAAa;AAAA,EACb,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MAEA,mDAAC,WAAD;AAAA,EAAW,gBAAc;AAAA,EAAS,iBAAe;AAAA,EAAY,SAAS,MAAM,SAAS,CAAC;AAAA,GACpF,mDAAC,OAAD;AAAA,EAAO,MAAK;AAAA,EAAW;AAAA,EAAY,IAAI;AAAA,EAAM,SAAS;AAAA,EAAW,UAAU;AAAA,IAC1E,QACC,mDAAC,OAAD;AAAA,EAAO,IAAG;AAAA,EAAQ,SAAS;AAAA,GACxB,SAED;AAIR,IAAO,mBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -5,7 +5,7 @@ export declare type CheckboxProps = {
|
|
|
5
5
|
variant?: "default" | "success" | "error";
|
|
6
6
|
label?: React.ReactNode;
|
|
7
7
|
name: string;
|
|
8
|
-
onChange: (
|
|
8
|
+
onChange: (value: boolean) => void;
|
|
9
9
|
};
|
|
10
10
|
declare const Checkbox: ({ isDisabled, variant, label, isChecked, name, onChange, }: CheckboxProps) => JSX.Element;
|
|
11
11
|
export default Checkbox;
|
|
@@ -3,7 +3,7 @@ import styled from "styled-components";
|
|
|
3
3
|
import Text from "../../asorted/Text";
|
|
4
4
|
import CheckAloneRegular from "@ledgerhq/icons-ui/react/CheckAloneRegular";
|
|
5
5
|
import { renderToStaticMarkup } from "react-dom/server";
|
|
6
|
-
const Icon = () => React.cloneElement(CheckAloneRegular({ size: 13, color: "
|
|
6
|
+
const Icon = () => React.cloneElement(CheckAloneRegular({ size: 13, color: "currentColor" }), {
|
|
7
7
|
// the xmlns attribute is required to properly display the checkbox
|
|
8
8
|
xmlns: "http://www.w3.org/2000/svg",
|
|
9
9
|
});
|
|
@@ -30,6 +30,7 @@ const Input = styled.input `
|
|
|
30
30
|
width: ${(p) => p.theme.space[7]}px;
|
|
31
31
|
height: ${(p) => p.theme.space[7]}px;
|
|
32
32
|
display: inline-block;
|
|
33
|
+
color: ${(props) => props.theme.colors.neutral.c00};
|
|
33
34
|
|
|
34
35
|
background-image: url("data:image/svg+xml,${CheckMarkIcon}");
|
|
35
36
|
background-position: center;
|
|
@@ -79,7 +80,7 @@ const Container = styled.div `
|
|
|
79
80
|
cursor: unset;
|
|
80
81
|
}
|
|
81
82
|
`;
|
|
82
|
-
const Checkbox = ({ isDisabled = false, variant = "default", label, isChecked, name, onChange, }) => (React.createElement(Container, { "data-variant": variant, "data-disabled": isDisabled },
|
|
83
|
-
React.createElement(Input, { type: "checkbox", name: name, id: name, checked: isChecked, disabled: isDisabled
|
|
83
|
+
const Checkbox = ({ isDisabled = false, variant = "default", label, isChecked, name, onChange, }) => (React.createElement(Container, { "data-variant": variant, "data-disabled": isDisabled, onClick: () => onChange(!isChecked) },
|
|
84
|
+
React.createElement(Input, { type: "checkbox", name: name, id: name, checked: isChecked, disabled: isDisabled }),
|
|
84
85
|
label ? (React.createElement(Label, { as: "label", htmlFor: name }, label)) : null));
|
|
85
86
|
export default Checkbox;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ledgerhq/react-ui",
|
|
3
|
-
"version": "0.10.0-nightly.
|
|
3
|
+
"version": "0.10.0-nightly.4",
|
|
4
4
|
"description": "Ledger Live - Desktop UI",
|
|
5
5
|
"author": "Ledger Live Team <team-live@ledger.fr>",
|
|
6
6
|
"repository": {
|
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
"dependencies": {
|
|
59
59
|
"@floating-ui/react-dom": "^0.4.0",
|
|
60
60
|
"@ledgerhq/crypto-icons-ui": "^0.2.1-nightly.0",
|
|
61
|
-
"@ledgerhq/icons-ui": "^0.
|
|
61
|
+
"@ledgerhq/icons-ui": "^0.3.0-nightly.1",
|
|
62
62
|
"@ledgerhq/ui-shared": "^0.1.10-nightly.0",
|
|
63
63
|
"@tippyjs/react": "^4.2.6",
|
|
64
64
|
"@types/color": "^3.0.2",
|