@ledgerhq/react-ui 0.2.0 → 0.5.0

package/components/form/BaseInput/index.js

@@ -11,43 +11,52 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import styled, { css } from "styled-components";
 import { typography } from "styled-system";
-import React, { useCallback } from "react";
+import React, { useState, useMemo, useCallback } from "react";
 import FlexBox from "../../layout/Flex";
 import Text from "../../asorted/Text";
 import { rgba } from "../../../styles/helpers";
 export const InputContainer = styled.div `
   display: flex;
   height: 48px;
-  border: ${(p) => `1px solid ${p.theme.colors.palette.neutral.c40}`};
+  border: ${(p) => `1px solid ${p.theme.colors.neutral.c40}`};
   border-radius: 24px;
   transition: all 0.2s ease;
-  color: ${(p) => p.theme.colors.palette.neutral.c100};
+  color: ${(p) => p.theme.colors.neutral.c100};
 
   ${(p) => p.focus &&
     !p.error &&
+    !p.warning &&
     css `
-      border: 1px solid ${p.theme.colors.palette.primary.c80};
-      box-shadow: 0 0 0 4px ${rgba(p.theme.colors.palette.primary.c60, 0.48)};
+      border: 1px solid ${p.theme.colors.primary.c80};
+      box-shadow: 0 0 0 4px ${rgba(p.theme.colors.primary.c60, 0.48)};
     `};
 
   ${(p) => p.error &&
     !p.disabled &&
     css `
-      border: 1px solid ${p.theme.colors.palette.error.c100};
+      border: 1px solid ${p.theme.colors.error.c100};
     `};
 
   ${(p) => !p.error &&
+    p.warning &&
+    !p.disabled &&
+    css `
+      border: 1px solid ${p.theme.colors.warning.c80};
+    `};
+
+  ${(p) => !p.error &&
+    !p.warning &&
     !p.disabled &&
     css `
       &:hover {
-        border: ${!p.disabled && `1px solid ${p.theme.colors.palette.primary.c80}`};
+        border: ${!p.disabled && `1px solid ${p.theme.colors.primary.c80}`};
       }
     `};
 
   ${(p) => p.disabled &&
     css `
-      color: ${p.theme.colors.palette.neutral.c60};
-      background: ${(p) => p.theme.colors.palette.neutral.c20};
+      color: ${p.theme.colors.neutral.c60};
+      background: ${(p) => p.theme.colors.neutral.c20};
     `};
 `;
 export const BaseInput = styled.input.attrs({
@@ -57,7 +66,7 @@ export const BaseInput = styled.input.attrs({
   height: 100%;
   width: 100%;
   border: 0;
-  caret-color: ${(p) => p.error ? p.theme.colors.palette.error.c100 : p.theme.colors.palette.primary.c80};
+  caret-color: ${(p) => (p.error ? p.theme.colors.error.c100 : p.theme.colors.primary.c80)};
   background: none;
   outline: none;
   cursor: ${(p) => (p.disabled ? "not-allowed" : "text")};
@@ -67,7 +76,7 @@ export const BaseInput = styled.input.attrs({
   padding-left: 20px;
   padding-right: 20px;
   &::placeholder {
-    color: ${(p) => p.disabled ? p.theme.colors.palette.neutral.c50 : p.theme.colors.palette.neutral.c70};
+    color: ${(p) => (p.disabled ? p.theme.colors.neutral.c50 : p.theme.colors.neutral.c70)};
   }
 
   /* Hide type=number arrow for Chrome, Safari, Edge, Opera */
@@ -85,7 +94,11 @@ export const BaseInput = styled.input.attrs({
   ${typography}
 `;
 export const InputErrorContainer = styled(Text) `
-  color: ${(p) => p.theme.colors.palette.error.c100};
+  color: ${(p) => p.theme.colors.error.c100};
+  margin-left: 12px;
+`;
+export const InputWarningContainer = styled(Text) `
+  color: ${(p) => p.theme.colors.warning.c80};
   margin-left: 12px;
 `;
 export const InputRenderLeftContainer = styled(FlexBox).attrs(() => ({
@@ -96,13 +109,20 @@ export const InputRenderRightContainer = styled(FlexBox).attrs(() => ({
     alignItems: "center",
     pr: "16px",
 })) ``;
-export default function Input(props) {
-    const { value, disabled, error, onChange, renderLeft, renderRight, unwrapped } = props, htmlInputProps = __rest(props, ["value", "disabled", "error", "onChange", "renderLeft", "renderRight", "unwrapped"]);
-    const [focus, setFocus] = React.useState(false);
-    const handleChange = useCallback((e) => onChange(e.target.value), [onChange]);
+// Yes, this is dirty. If you can figure out a better way please change the code :).
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const IDENTITY = (_) => _;
+function Input(props, ref) {
+    const { value, disabled, error, warning, onChange, onChangeEvent, renderLeft, renderRight, unwrapped, containerProps, serialize = IDENTITY, deserialize = IDENTITY } = props, htmlInputProps = __rest(props, ["value", "disabled", "error", "warning", "onChange", "onChangeEvent", "renderLeft", "renderRight", "unwrapped", "containerProps", "serialize", "deserialize"]);
+    const [focus, setFocus] = useState(false);
+    const inputValue = useMemo(() => serialize(value), [serialize, value]);
+    const handleChange = useCallback((e) => {
+        onChange && onChange(deserialize(e.target.value));
+        onChangeEvent && onChangeEvent(e);
+    }, [onChange, onChangeEvent, deserialize]);
     const inner = (React.createElement(React.Fragment, null,
         typeof renderLeft === "function" ? renderLeft(props) : renderLeft,
-        React.createElement(BaseInput, Object.assign({}, htmlInputProps, { disabled: disabled, error: error, onChange: handleChange, value: value, onFocus: (event) => {
+        React.createElement(BaseInput, Object.assign({ ref: ref }, htmlInputProps, { disabled: disabled, error: error, warning: warning, onChange: handleChange, value: inputValue, onFocus: (event) => {
                 setFocus(true);
                 htmlInputProps.onFocus && htmlInputProps.onFocus(event);
             }, onBlur: (event) => {
@@ -114,6 +134,9 @@ export default function Input(props) {
         return (React.createElement(FlexBox, { alignItems: "stretch", style: { height: "100%" } }, inner));
     }
     return (React.createElement("div", null,
-        React.createElement(InputContainer, { disabled: disabled, focus: focus, error: error }, inner),
-        error && !disabled && React.createElement(InputErrorContainer, { variant: "small" }, error)));
+        React.createElement(InputContainer, Object.assign({ disabled: disabled, focus: focus, error: error, warning: warning }, containerProps), inner),
+        (error || warning) && !disabled && (React.createElement(FlexBox, { flexDirection: "column", rowGap: 2, mt: 2 },
+            error && React.createElement(InputErrorContainer, { variant: "small" }, error),
+            warning && React.createElement(InputWarningContainer, { variant: "small" }, warning)))));
 }
+export default React.forwardRef(Input);

package/components/form/Checkbox/Checkbox.js

@@ -3,7 +3,10 @@ import styled from "styled-components";
 import Text from "../../asorted/Text";
 import CheckAloneRegular from "@ledgerhq/icons-ui/react/CheckAloneRegular";
 import { renderToStaticMarkup } from "react-dom/server";
-const Icon = styled(CheckAloneRegular).attrs({ size: 13, color: "white" }) ``;
+const Icon = () => React.cloneElement(CheckAloneRegular({ size: 13, color: "white" }), {
+    // the xmlns attribute is required to properly display the checkbox
+    xmlns: "http://www.w3.org/2000/svg",
+});
 const CheckMarkIcon = encodeURIComponent(renderToStaticMarkup(React.createElement(Icon, null)));
 const Input = styled.input `
   background-color: transparent;
@@ -14,7 +17,7 @@ const Input = styled.input `
   width: ${(p) => p.theme.space[7]}px;
   height: ${(p) => p.theme.space[7]}px;
   appearance: none;
-  border: 1px solid ${(props) => props.theme.colors.palette.neutral.c90};
+  border: 1px solid ${(props) => props.theme.colors.neutral.c90};
   box-shadow: none;
 
   &:checked {
@@ -39,7 +42,7 @@ const Input = styled.input `
   }
 `;
 const Label = styled(Text).attrs({ type: "body", fontWeight: "500" }) `
-  color: ${(props) => props.theme.colors.palette.neutral.c80};
+  color: ${(props) => props.theme.colors.neutral.c80};
 
   /* Version when the input is checked */
   ${Input}:checked + & {
@@ -52,7 +55,7 @@ const Label = styled(Text).attrs({ type: "body", fontWeight: "500" }) `
 `;
 const Container = styled.div `
   --ll-checkbox-color: unset;
-  color: var(--ll-checkbox-color, ${(props) => props.theme.colors.palette.primary.c90});
+  color: var(--ll-checkbox-color, ${(props) => props.theme.colors.primary.c90});
 
   display: inline-flex;
   column-gap: ${(p) => p.theme.space[5]}px;
@@ -60,23 +63,23 @@ const Container = styled.div `
   cursor: pointer;
 
   &[data-variant="default"] {
-    --ll-checkbox-color: ${(props) => props.theme.colors.palette.primary.c90};
+    --ll-checkbox-color: ${(props) => props.theme.colors.primary.c90};
   }
 
   &[data-variant="success"] {
-    --ll-checkbox-color: ${(props) => props.theme.colors.palette.success.c100};
+    --ll-checkbox-color: ${(props) => props.theme.colors.success.c100};
   }
 
   &[data-variant="error"] {
-    --ll-checkbox-color: ${(props) => props.theme.colors.palette.error.c100};
+    --ll-checkbox-color: ${(props) => props.theme.colors.error.c100};
   }
 
   &[data-disabled="true"] {
-    --ll-checkbox-color: ${(props) => props.theme.colors.palette.neutral.c80};
+    --ll-checkbox-color: ${(props) => props.theme.colors.neutral.c80};
     cursor: unset;
   }
 `;
 const Checkbox = ({ isDisabled = false, variant = "default", label, isChecked, name, onChange, }) => (React.createElement(Container, { "data-variant": variant, "data-disabled": isDisabled },
     React.createElement(Input, { type: "checkbox", name: name, id: name, checked: isChecked, disabled: isDisabled, onChange: onChange }),
-    label ? (React.createElement(Label, { forwardedAs: "label", htmlFor: name }, label)) : null));
+    label ? (React.createElement(Label, { as: "label", htmlFor: name }, label)) : null));
 export default Checkbox;

package/components/form/Dropdown/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Props as SelectInputProps } from "../../form/SelectInput";
 export declare type Props = SelectInputProps & {
     label: string;

package/components/form/Dropdown/index.js

@@ -20,7 +20,7 @@ import FlexBox from "../../layout/Flex";
 function DropdownControl(props) {
     const { selectProps: { label }, children, } = props;
     return (React.createElement(components.Control, Object.assign({}, props),
-        React.createElement(Text, { fontWeight: "semiBold", variant: "paragraph", color: "palette.neutral.c80", mr: 2 }, label),
+        React.createElement(Text, { fontWeight: "semiBold", variant: "paragraph", color: "neutral.c80", mr: 2 }, label),
         children));
 }
 function DropdownValueContainer(props) {
@@ -37,7 +37,7 @@ function DropdownIndicatorsContainer() {
 export default function Dropdown(props) {
     const theme = useTheme();
     const { styles } = props, rest = __rest(props, ["styles"]);
-    return (React.createElement(SelectInput, Object.assign({ placeholder: "", isSearchable: false, styles: Object.assign({ singleValue: (provided) => (Object.assign(Object.assign({}, provided), { color: theme.colors.palette.neutral.c100, margin: 0, top: undefined, position: undefined, overflow: undefined, maxWidth: undefined, transform: undefined })), input: () => ({ display: "none" }), menu: (provided) => (Object.assign(Object.assign({}, provided), { border: 0, boxShadow: "none", background: "none", width: "auto", minWidth: "200px" })) }, styles) }, rest, { components: {
+    return (React.createElement(SelectInput, Object.assign({ placeholder: "", isSearchable: false, styles: Object.assign({ singleValue: (provided) => (Object.assign(Object.assign({}, provided), { color: theme.colors.neutral.c100, margin: 0, top: undefined, position: undefined, overflow: undefined, maxWidth: undefined, transform: undefined })), input: () => ({ display: "none" }), menu: (provided) => (Object.assign(Object.assign({}, provided), { border: 0, boxShadow: "none", background: "none", width: "auto", minWidth: "200px" })) }, styles) }, rest, { components: {
             Control: DropdownControl,
             ValueContainer: DropdownValueContainer,
             IndicatorsContainer: DropdownIndicatorsContainer,

package/components/form/LegendInput/index.d.ts

@@ -1,6 +1,30 @@
-/// <reference types="react" />
+import React from "react";
 import { InputProps } from "../BaseInput";
 export declare type Props = InputProps & {
     legend: string;
 };
-export default function LegendInput({ legend, ...inputProps }: Props): JSX.Element;
+declare const _default: React.ForwardRefExoticComponent<Omit<import("../BaseInput").CommonProps, "onChange" | "value"> & {
+    value: string;
+    onChange?: ((value: string) => void) | undefined;
+    onChangeEvent?: React.ChangeEventHandler<HTMLInputElement> | undefined;
+    renderLeft?: React.ReactNode | ((props: InputProps<string>) => React.ReactNode);
+    renderRight?: React.ReactNode | ((props: InputProps<string>) => React.ReactNode);
+    unwrapped?: boolean | undefined;
+    containerProps?: (({
+        [x: string]: any;
+        [x: number]: any;
+        [x: symbol]: any;
+    } & {
+        theme?: import("styled-components").DefaultTheme | undefined;
+    } & ({} | {
+        children?: import("react").ReactNode;
+    })) & {
+        as?: string | import("react").ComponentType<any> | undefined;
+        forwardedAs?: string | import("react").ComponentType<any> | undefined;
+    }) | undefined;
+    serialize?: ((value: string) => string) | undefined;
+    deserialize?: ((value: string) => string) | undefined;
+} & {
+    legend: string;
+} & React.RefAttributes<HTMLInputElement>>;
+export default _default;

package/components/form/LegendInput/index.js

@@ -14,14 +14,15 @@ import Input, { InputRenderRightContainer } from "../BaseInput";
 import Text from "../../asorted/Text";
 import styled from "styled-components";
 const Legend = styled(Text) `
-  color: ${(props) => props.theme.colors.palette.neutral.c70};
+  color: ${(props) => props.theme.colors.neutral.c70};
 
   &[data-disabled="true"] {
-    color: ${(props) => props.theme.colors.palette.neutral.c50};
+    color: ${(props) => props.theme.colors.neutral.c50};
   }
 `;
-export default function LegendInput(_a) {
+function LegendInput(_a, ref) {
     var { legend } = _a, inputProps = __rest(_a, ["legend"]);
-    return (React.createElement(Input, Object.assign({}, inputProps, { renderRight: React.createElement(InputRenderRightContainer, null,
+    return (React.createElement(Input, Object.assign({ ref: ref }, inputProps, { renderRight: React.createElement(InputRenderRightContainer, null,
             React.createElement(Legend, { variant: "body", "data-disabled": inputProps.disabled }, legend)) })));
 }
+export default React.forwardRef(LegendInput);

package/components/form/NumberInput/index.d.ts

@@ -1,5 +1,27 @@
-/// <reference types="react" />
+import React from "react";
 import { InputProps } from "../BaseInput";
-export default function NumberInput({ onPercentClick, max, value, disabled, ...inputProps }: InputProps & {
+declare const _default: React.ForwardRefExoticComponent<Omit<import("../BaseInput").CommonProps, "onChange" | "value"> & {
+    value: number | undefined;
+    onChange?: ((value: number | undefined) => void) | undefined;
+    onChangeEvent?: React.ChangeEventHandler<HTMLInputElement> | undefined;
+    renderLeft?: React.ReactNode | ((props: InputProps<number | undefined>) => React.ReactNode);
+    renderRight?: React.ReactNode | ((props: InputProps<number | undefined>) => React.ReactNode);
+    unwrapped?: boolean | undefined;
+    containerProps?: (({
+        [x: string]: any;
+        [x: number]: any;
+        [x: symbol]: any;
+    } & {
+        theme?: import("styled-components").DefaultTheme | undefined;
+    } & ({} | {
+        children?: import("react").ReactNode;
+    })) & {
+        as?: string | import("react").ComponentType<any> | undefined;
+        forwardedAs?: string | import("react").ComponentType<any> | undefined;
+    }) | undefined;
+    serialize?: ((value: number | undefined) => string) | undefined;
+    deserialize?: ((value: string) => number | undefined) | undefined;
+} & {
     onPercentClick: (percent: number) => void;
-}): JSX.Element;
+} & React.RefAttributes<HTMLInputElement>>;
+export default _default;

package/components/form/NumberInput/index.js

@@ -16,8 +16,8 @@ import Text from "../../asorted/Text";
 import styled from "styled-components";
 // TODO: Replace me with a real button as soon as they are designed
 const MaxButton = styled.button `
-  color: ${(p) => p.active ? p.theme.colors.palette.neutral.c00 : p.theme.colors.palette.neutral.c70};
-  background-color: ${(p) => p.active ? p.theme.colors.palette.neutral.c100 : p.theme.colors.palette.neutral.c00};
+  color: ${(p) => (p.active ? p.theme.colors.neutral.c00 : p.theme.colors.neutral.c70)};
+  background-color: ${(p) => (p.active ? p.theme.colors.neutral.c100 : p.theme.colors.neutral.c00)};
   border-radius: 100px;
   border-width: 0;
   height: 31px;
@@ -26,15 +26,27 @@ const MaxButton = styled.button `
   cursor: pointer;
 
   &:disabled {
-    color: ${(p) => p.theme.colors.palette.neutral.c50};
-    background-color: ${(p) => (p.active ? p.theme.colors.palette.neutral.c30 : "transparent")};
+    color: ${(p) => p.theme.colors.neutral.c50};
+    background-color: ${(p) => (p.active ? p.theme.colors.neutral.c30 : "transparent")};
     cursor: unset;
   }
 `;
-export default function NumberInput(_a) {
-    var { onPercentClick, max, value, disabled } = _a, inputProps = __rest(_a, ["onPercentClick", "max", "value", "disabled"]);
-    return (React.createElement(Input, Object.assign({}, inputProps, { value: value, max: max, disabled: disabled, type: "number", renderRight: React.createElement(FlexBox, { alignItems: "center", justifyContent: "center", py: "3px", mr: "8px" }, [0.25, 0.5, 0.75, 1].map((percent) => (React.createElement(MaxButton, { key: percent, onClick: () => onPercentClick(percent), active: !!value && !!max && Number(value) === percent * Number(max), disabled: disabled },
+function serialize(value) {
+    return value ? "" + value : "";
+}
+function deserialize(value) {
+    try {
+        return parseFloat(value);
+    }
+    catch (error) {
+        return undefined;
+    }
+}
+function NumberInput(_a, ref) {
+    var { value, onPercentClick, max, disabled } = _a, inputProps = __rest(_a, ["value", "onPercentClick", "max", "disabled"]);
+    return (React.createElement(Input, Object.assign({ ref: ref, serialize: serialize, deserialize: deserialize }, inputProps, { type: "number", value: value, max: max, disabled: disabled, renderRight: React.createElement(FlexBox, { alignItems: "center", justifyContent: "center", py: "3px", mr: "8px" }, [0.25, 0.5, 0.75, 1].map((percent) => (React.createElement(MaxButton, { key: percent, onClick: () => onPercentClick(percent), active: !!value && !!max && Number(value) === percent * Number(max), disabled: disabled },
             React.createElement(Text, { variant: "tiny", color: "inherit" },
                 percent * 100,
                 "%"))))) })));
 }
+export default React.forwardRef(NumberInput);

package/components/form/QrCodeInput/index.d.ts

@@ -1,5 +1,27 @@
 import React from "react";
 import { InputProps } from "../BaseInput";
-export default function QrCodeInput({ onQrCodeClick, ...inputProps }: InputProps & {
-    onQrCodeClick?: (e: React.FormEvent<HTMLButtonElement>) => void;
-}): JSX.Element;
+declare const _default: React.ForwardRefExoticComponent<Omit<import("../BaseInput").CommonProps, "onChange" | "value"> & {
+    value: string;
+    onChange?: ((value: string) => void) | undefined;
+    onChangeEvent?: React.ChangeEventHandler<HTMLInputElement> | undefined;
+    renderLeft?: React.ReactNode | ((props: InputProps<string>) => React.ReactNode);
+    renderRight?: React.ReactNode | ((props: InputProps<string>) => React.ReactNode);
+    unwrapped?: boolean | undefined;
+    containerProps?: (({
+        [x: string]: any;
+        [x: number]: any;
+        [x: symbol]: any;
+    } & {
+        theme?: import("styled-components").DefaultTheme | undefined;
+    } & ({} | {
+        children?: import("react").ReactNode;
+    })) & {
+        as?: string | import("react").ComponentType<any> | undefined;
+        forwardedAs?: string | import("react").ComponentType<any> | undefined;
+    }) | undefined;
+    serialize?: ((value: string) => string) | undefined;
+    deserialize?: ((value: string) => string) | undefined;
+} & {
+    onQrCodeClick?: ((e: React.FormEvent<HTMLButtonElement>) => void) | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
+export default _default;

package/components/form/QrCodeInput/index.js

@@ -22,19 +22,20 @@ const QrCodeButton = styled.button `
   height: 32px;
   border-radius: 50%;
   border-width: 0;
-  color: ${(p) => p.theme.colors.palette.neutral.c00};
-  background-color: ${(p) => p.theme.colors.palette.neutral.c100};
+  color: ${(p) => p.theme.colors.neutral.c00};
+  background-color: ${(p) => p.theme.colors.neutral.c100};
   cursor: pointer;
 
   &:disabled {
-    background-color: ${(p) => p.theme.colors.palette.neutral.c30};
-    color: ${(p) => p.theme.colors.palette.neutral.c50};
+    background-color: ${(p) => p.theme.colors.neutral.c30};
+    color: ${(p) => p.theme.colors.neutral.c50};
     cursor: unset;
   }
 `;
-export default function QrCodeInput(_a) {
+function QrCodeInput(_a, ref) {
     var { onQrCodeClick } = _a, inputProps = __rest(_a, ["onQrCodeClick"]);
-    return (React.createElement(Input, Object.assign({}, inputProps, { renderRight: React.createElement(FlexBox, { alignItems: "center", justifyContent: "center", pr: "8px" },
+    return (React.createElement(Input, Object.assign({ ref: ref }, inputProps, { renderRight: React.createElement(FlexBox, { alignItems: "center", justifyContent: "center", pr: "8px" },
             React.createElement(QrCodeButton, { onClick: onQrCodeClick, disabled: inputProps.disabled },
                 React.createElement(QrCodeMedium, { size: "20px" }))) })));
 }
+export default React.forwardRef(QrCodeInput);

package/components/form/QuantityInput/index.d.ts

@@ -1,6 +1,28 @@
 import React from "react";
 import { InputProps } from "../BaseInput";
-export default function QuantityInput({ onMaxClick, price, ...inputProps }: InputProps & {
-    onMaxClick?: (e: React.FormEvent<HTMLButtonElement>) => void;
-    price?: string;
-}): JSX.Element;
+declare const _default: React.ForwardRefExoticComponent<Omit<import("../BaseInput").CommonProps, "onChange" | "value"> & {
+    value: string;
+    onChange?: ((value: string) => void) | undefined;
+    onChangeEvent?: React.ChangeEventHandler<HTMLInputElement> | undefined;
+    renderLeft?: React.ReactNode | ((props: InputProps<string>) => React.ReactNode);
+    renderRight?: React.ReactNode | ((props: InputProps<string>) => React.ReactNode);
+    unwrapped?: boolean | undefined;
+    containerProps?: (({
+        [x: string]: any;
+        [x: number]: any;
+        [x: symbol]: any;
+    } & {
+        theme?: import("styled-components").DefaultTheme | undefined;
+    } & ({} | {
+        children?: import("react").ReactNode;
+    })) & {
+        as?: string | import("react").ComponentType<any> | undefined;
+        forwardedAs?: string | import("react").ComponentType<any> | undefined;
+    }) | undefined;
+    serialize?: ((value: string) => string) | undefined;
+    deserialize?: ((value: string) => string) | undefined;
+} & {
+    onMaxClick?: ((e: React.FormEvent<HTMLButtonElement>) => void) | undefined;
+    price?: string | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
+export default _default;

package/components/form/QuantityInput/index.js

@@ -15,8 +15,8 @@ import FlexBox from "../../layout/Flex";
 import Text from "../../asorted/Text";
 import styled from "styled-components";
 const MaxButton = styled.button `
-  color: ${(p) => p.theme.colors.palette.neutral.c00};
-  background-color: ${(p) => p.theme.colors.palette.neutral.c100};
+  color: ${(p) => p.theme.colors.neutral.c00};
+  background-color: ${(p) => p.theme.colors.neutral.c100};
   border-radius: 100px;
   border-width: 0;
   padding-left: 14px;
@@ -25,22 +25,23 @@ const MaxButton = styled.button `
   cursor: pointer;
 
   &:disabled {
-    background-color: ${(p) => p.theme.colors.palette.neutral.c30};
-    color: ${(p) => p.theme.colors.palette.neutral.c50};
+    background-color: ${(p) => p.theme.colors.neutral.c30};
+    color: ${(p) => p.theme.colors.neutral.c50};
     cursor: unset;
   }
 `;
 const Legend = styled(Text) `
-  color: ${(p) => p.theme.colors.palette.neutral.c70};
+  color: ${(p) => p.theme.colors.neutral.c70};
 
   &[data-disabled="true"] {
-    color: ${(p) => p.theme.colors.palette.neutral.c50};
+    color: ${(p) => p.theme.colors.neutral.c50};
   }
 `;
-export default function QuantityInput(_a) {
+function QuantityInput(_a, ref) {
     var { onMaxClick, price } = _a, inputProps = __rest(_a, ["onMaxClick", "price"]);
-    return (React.createElement(Input, Object.assign({}, inputProps, { type: "number", renderRight: React.createElement(FlexBox, { alignItems: "center", justifyContent: "center", pr: "3px", py: "3px" },
+    return (React.createElement(Input, Object.assign({ ref: ref }, inputProps, { type: "number", renderRight: React.createElement(FlexBox, { alignItems: "center", justifyContent: "center", pr: "3px", py: "3px" },
             price && (React.createElement(Legend, { variant: "body", pr: "12px", "data-disabled": inputProps.disabled }, price)),
             React.createElement(MaxButton, { onClick: onMaxClick, disabled: inputProps.disabled },
                 React.createElement(Text, { variant: "tiny", color: "currentColor" }, "Max"))) })));
 }
+export default React.forwardRef(QuantityInput);

package/components/form/Radio/RadioElement.d.ts

@@ -4,5 +4,8 @@ export declare type RadioElementProps = InputAttributes & {
     variant?: "default" | "success" | "error";
     label: string;
 };
-declare const _default: ({ label, value, disabled, variant, ...props }: RadioElementProps) => JSX.Element;
-export default _default;
+declare const Element: {
+    ({ label, value, disabled, variant, ...props }: RadioElementProps): JSX.Element;
+    displayName: string;
+};
+export default Element;

package/components/form/Radio/RadioElement.js

@@ -15,10 +15,10 @@ import { rgba } from "../../../styles/helpers";
 import Text from "../../asorted/Text";
 import { RadioContext } from "./index";
 const Label = styled(Text) `
-  color: var(--ledger-ui-checkbox-color, ${(p) => p.theme.colors.palette.neutral.c100});
+  color: var(--ledger-ui-checkbox-color, ${(p) => p.theme.colors.neutral.c100});
 `;
 const Input = styled.input `
-  --ledger-ui-checkbox-color: ${(p) => p.theme.colors.palette.neutral.c50};
+  --ledger-ui-checkbox-color: ${(p) => p.theme.colors.neutral.c50};
   --ledger-ui-checkbox-size: 1.25rem;
 
   position: relative;
@@ -46,17 +46,17 @@ const Input = styled.input `
 
   &[data-variant="default"] {
     :hover {
-      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.palette.primary.c90};
+      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.primary.c90};
     }
     :active {
-      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.palette.primary.c100};
+      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.primary.c100};
     }
     :checked,
     :focus {
-      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.palette.primary.c80};
+      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.primary.c80};
     }
     :focus {
-      box-shadow: 0px 0px 0px 4px ${(p) => rgba(p.theme.colors.palette.primary.c60, 0.48)};
+      box-shadow: 0px 0px 0px 4px ${(p) => rgba(p.theme.colors.primary.c60, 0.48)};
     }
   }
 
@@ -64,10 +64,10 @@ const Input = styled.input `
     :hover,
     :checked:not([disabled]),
     :checked:not([disabled]) + ${Label}, :focus {
-      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.palette.success.c100};
+      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.success.c100};
     }
     :focus {
-      box-shadow: 0px 0px 0px 4px ${(p) => rgba(p.theme.colors.palette.success.c100, 0.48)};
+      box-shadow: 0px 0px 0px 4px ${(p) => rgba(p.theme.colors.success.c100, 0.48)};
     }
   }
 
@@ -75,17 +75,17 @@ const Input = styled.input `
     :hover,
     :checked:not([disabled]),
     :checked:not([disabled]) + ${Label}, :focus {
-      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.palette.error.c100};
+      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.error.c100};
     }
     :focus {
-      box-shadow: 0px 0px 0px 4px ${(p) => rgba(p.theme.colors.palette.error.c100, 0.48)};
+      box-shadow: 0px 0px 0px 4px ${(p) => rgba(p.theme.colors.error.c100, 0.48)};
     }
   }
 
   &[data-variant]:disabled {
-    --ledger-ui-checkbox-color: ${(p) => p.theme.colors.palette.neutral.c40};
+    --ledger-ui-checkbox-color: ${(p) => p.theme.colors.neutral.c40};
     cursor: unset;
-    background-color: ${(p) => p.theme.colors.palette.neutral.c30};
+    background-color: ${(p) => p.theme.colors.neutral.c30};
   }
 `;
 const RadioElement = styled.label.attrs({ tabIndex: -1 }) `
@@ -93,7 +93,7 @@ const RadioElement = styled.label.attrs({ tabIndex: -1 }) `
   column-gap: 0.75rem;
   align-items: center;
 `;
-export default (_a) => {
+const Element = (_a) => {
     var { label, value, disabled, variant = "default" } = _a, props = __rest(_a, ["label", "value", "disabled", "variant"]);
     const context = useContext(RadioContext);
     if (context === undefined)
@@ -107,3 +107,5 @@ export default (_a) => {
         React.createElement(Input, Object.assign({ type: "radio", "data-variant": variant, checked: isChecked, disabled: disabled, onChange: handleChange, value: value, name: context.name }, props)),
         React.createElement(Label, { variant: "paragraph" }, label)));
 };
+Element.displayName = "Radio.Element"; // For easy identification in the React devtools & in storybook
+export default Element;

package/components/form/Radio/RadioListElement.d.ts

@@ -0,0 +1,22 @@
+import React, { InputHTMLAttributes } from "react";
+import { FlexBoxProps } from "../../layout/Flex";
+declare type ElementState = {
+    checked: boolean;
+    disabled: boolean | undefined;
+};
+export declare const Label: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, import("../../asorted/Text").TextProps & ElementState, keyof import("../../asorted/Text").TextProps>;
+declare type InputAttributes = Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "onChange" | "name">;
+export declare type RadioListElementProps = InputAttributes & {
+    /**
+     * The string or component that will be rendered as label of this radio element
+     * If it's a component, it's rendered with these props: { checked:boolean; disabled:boolean }
+     * */
+    label: string | React.ComponentType<ElementState> | ((arg1: ElementState) => JSX.Element);
+    /** Flex props to pass to the container */
+    containerProps?: FlexBoxProps;
+};
+declare const ListElement: {
+    ({ label, value, disabled, containerProps, ...props }: RadioListElementProps): JSX.Element;
+    displayName: string;
+};
+export default ListElement;