@ledgerhq/react-ui 0.4.0 → 0.7.1

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.
Files changed (102) hide show
  1. package/assets/logos/LedgerLiveAltRegular.d.ts +0 -1
  2. package/assets/logos/LedgerLiveRegular.d.ts +0 -1
  3. package/components/Chart/index.d.ts +0 -1
  4. package/components/Table/Columns.d.ts +60 -11
  5. package/components/Table/Columns.js +6 -16
  6. package/components/Table/index.d.ts +44 -12
  7. package/components/Table/index.js +36 -16
  8. package/components/Table/stories.helper.js +13 -12
  9. package/components/animations/GlitchText/index.d.ts +0 -1
  10. package/components/asorted/Divider/index.d.ts +1 -2
  11. package/components/asorted/Icon/BoxedIcon.d.ts +48 -0
  12. package/components/asorted/Icon/BoxedIcon.js +62 -0
  13. package/components/asorted/Icon/Icon.d.ts +0 -2
  14. package/components/asorted/Icon/Icon.js +0 -7
  15. package/components/asorted/Icon/index.d.ts +3 -1
  16. package/components/asorted/Icon/index.js +3 -1
  17. package/components/asorted/index.d.ts +1 -1
  18. package/components/asorted/index.js +1 -1
  19. package/components/cta/Button/index.d.ts +11 -8
  20. package/components/cta/Button/index.js +34 -23
  21. package/components/cta/Link/index.d.ts +53 -4
  22. package/components/cta/Link/index.js +15 -11
  23. package/components/cta/Toggle/index.d.ts +0 -1
  24. package/components/form/BaseInput/index.d.ts +8 -14
  25. package/components/form/BaseInput/index.js +1 -1
  26. package/components/form/Dropdown/index.d.ts +3 -3
  27. package/components/form/Dropdown/index.js +9 -8
  28. package/components/form/DropdownGeneric/index.d.ts +36 -0
  29. package/components/form/DropdownGeneric/index.js +95 -0
  30. package/components/form/LegendInput/index.d.ts +26 -2
  31. package/components/form/LegendInput/index.js +3 -2
  32. package/components/form/NumberInput/index.d.ts +25 -3
  33. package/components/form/NumberInput/index.js +3 -2
  34. package/components/form/QrCodeInput/index.d.ts +25 -3
  35. package/components/form/QrCodeInput/index.js +3 -2
  36. package/components/form/QuantityInput/index.d.ts +26 -4
  37. package/components/form/QuantityInput/index.js +3 -2
  38. package/components/form/Radio/RadioElement.d.ts +3 -2
  39. package/components/form/Radio/RadioElement.js +72 -3
  40. package/components/form/Radio/index.d.ts +1 -1
  41. package/components/form/SearchInput/index.d.ts +24 -2
  42. package/components/form/SearchInput/index.js +3 -2
  43. package/components/form/SelectInput/Control.d.ts +4 -10
  44. package/components/form/SelectInput/Control.js +5 -8
  45. package/components/form/SelectInput/DropdownIndicator.d.ts +3 -10
  46. package/components/form/SelectInput/IndicatorsContainer.d.ts +2 -6
  47. package/components/form/SelectInput/IndicatorsContainer.js +1 -1
  48. package/components/form/SelectInput/MenuList.d.ts +3 -10
  49. package/components/form/SelectInput/MenuList.js +2 -1
  50. package/components/form/SelectInput/Option.d.ts +6 -18
  51. package/components/form/SelectInput/ValueContainer.d.ts +5 -14
  52. package/components/form/SelectInput/ValueContainer.js +1 -1
  53. package/components/form/SelectInput/VirtualMenuList.d.ts +2 -5
  54. package/components/form/SelectInput/VirtualMenuList.js +2 -1
  55. package/components/form/SelectInput/index.d.ts +7 -16
  56. package/components/form/SelectInput/index.js +10 -2
  57. package/components/form/index.d.ts +1 -0
  58. package/components/form/index.js +1 -0
  59. package/components/layout/Box/index.d.ts +1 -4
  60. package/components/layout/Drawer/index.d.ts +17 -2
  61. package/components/layout/Drawer/index.js +45 -36
  62. package/components/layout/Flex/index.d.ts +2 -5
  63. package/components/layout/Popin/index.d.ts +6 -11
  64. package/components/layout/Popin/index.js +10 -5
  65. package/components/layout/Side/index.d.ts +0 -1
  66. package/components/loaders/InfiniteLoader/index.d.ts +8 -7
  67. package/components/loaders/InfiniteLoader/index.js +35 -9
  68. package/components/loaders/ProgressLoader/index.d.ts +22 -2
  69. package/components/loaders/ProgressLoader/index.js +10 -12
  70. package/components/message/Alert/index.d.ts +31 -3
  71. package/components/message/Alert/index.js +30 -23
  72. package/components/message/Log/index.d.ts +5 -2
  73. package/components/message/Log/index.js +3 -4
  74. package/components/message/Tip/index.d.ts +0 -1
  75. package/components/message/Tooltip/index.d.ts +0 -1
  76. package/components/navigation/Aside/index.d.ts +2 -5
  77. package/components/navigation/Breadcrumb/index.js +1 -1
  78. package/components/navigation/FlowStepper/index.d.ts +77 -0
  79. package/components/navigation/FlowStepper/index.js +35 -0
  80. package/components/navigation/index.d.ts +1 -0
  81. package/components/navigation/index.js +1 -0
  82. package/components/navigation/progress/ProgressBar/Onboarding.d.ts +0 -1
  83. package/components/navigation/progress/Stepper/index.d.ts +27 -10
  84. package/components/navigation/progress/Stepper/index.js +37 -18
  85. package/components/navigation/sideBar/Item/Item.d.ts +0 -1
  86. package/components/navigation/sideBar/Logo/Logo.d.ts +0 -1
  87. package/components/navigation/sideBar/SideBar/SideBar.d.ts +0 -1
  88. package/components/navigation/sideBar/SideBar/SideBar.js +9 -7
  89. package/components/navigation/sideBar/Toggle/Toggle.d.ts +0 -1
  90. package/components/styled.d.ts +8 -5
  91. package/components/styled.js +2 -2
  92. package/index.d.ts +1 -1
  93. package/index.js +1 -1
  94. package/package.json +6 -6
  95. package/styles/InvertTheme.d.ts +4 -1
  96. package/styles/InvertTheme.js +5 -5
  97. package/styles/index.d.ts +1 -0
  98. package/styles/index.js +1 -0
  99. package/styles/theme.d.ts +1 -1
  100. package/styles/theme.js +8 -8
  101. package/components/loaders/InfiniteLoader/image.d.ts +0 -2
  102. package/components/loaders/InfiniteLoader/image.js +0 -1
@@ -0,0 +1,77 @@
1
+ import React from "react";
2
+ import { Props as StepperProps } from "../progress/Stepper";
3
+ import { FlexBoxProps as FlexProps } from "../../layout/Flex";
4
+ export declare type StepProps = {
5
+ /**
6
+ * The label of the step.
7
+ */
8
+ label: string;
9
+ /**
10
+ * A specific index, can be used to explicitely order steps.
11
+ */
12
+ index?: number;
13
+ /**
14
+ * Hides the step from the progress stepper.
15
+ */
16
+ hidden?: boolean;
17
+ /**
18
+ * The step contents.
19
+ */
20
+ children: React.ReactNode;
21
+ };
22
+ interface InnerProps {
23
+ /**
24
+ * The active index.
25
+ */
26
+ activeIndex: number;
27
+ /**
28
+ * The total number of steps.
29
+ */
30
+ stepsLength: number;
31
+ }
32
+ export interface Props<ExtraProps> {
33
+ /**
34
+ * The index of the active step.
35
+ */
36
+ activeIndex: number;
37
+ /**
38
+ * An optional header displayed above the stepper.
39
+ */
40
+ header?: (props: InnerProps & ExtraProps) => React.ReactNode;
41
+ /**
42
+ * An optional footer displayed below the body.
43
+ */
44
+ footer?: (props: InnerProps & ExtraProps) => React.ReactNode;
45
+ /**
46
+ * Extra props that are passed to the header and footer render functions.
47
+ */
48
+ extraProps?: ExtraProps;
49
+ /**
50
+ * Extra props that are passed to the container `Flex` element.
51
+ */
52
+ extraContainerProps?: FlexProps;
53
+ /**
54
+ * Extra props that are passed to the stepper component.
55
+ */
56
+ extraStepperProps?: Partial<StepperProps>;
57
+ /**
58
+ * Extra props that are passed to the stepper `Flex` wrapper.
59
+ */
60
+ extraStepperContainerProps?: FlexProps;
61
+ /**
62
+ * Custom rendering function to wrap children.
63
+ */
64
+ renderChildren?: (args: {
65
+ children: React.ReactNode;
66
+ }) => React.ReactNode;
67
+ /**
68
+ /**
69
+ * A list of children representing each step of the flow.
70
+ */
71
+ children: React.ReactElement<StepProps> | React.ReactElement<StepProps>[];
72
+ }
73
+ declare function FlowStepper<ExtraProps>({ activeIndex, header, footer, extraProps, extraContainerProps, extraStepperProps, extraStepperContainerProps, renderChildren, children, }: Props<ExtraProps>): JSX.Element;
74
+ declare namespace FlowStepper {
75
+ var Step: ({ children }: StepProps) => JSX.Element;
76
+ }
77
+ export default FlowStepper;
@@ -0,0 +1,35 @@
1
+ import React from "react";
2
+ import { isElement } from "react-is";
3
+ import Flex from "../../layout/Flex";
4
+ import { Stepper } from "..";
5
+ function FlowStepper({ activeIndex, header, footer, extraProps, extraContainerProps, extraStepperProps, extraStepperContainerProps, renderChildren, children, }) {
6
+ const { steps, innerContents } = React.Children.toArray(children).reduce((acc, child, idx) => {
7
+ var _a;
8
+ const index = (_a = (isElement(child) && child.props.index)) !== null && _a !== void 0 ? _a : idx;
9
+ const label = isElement(child) && child.props.label;
10
+ const hidden = isElement(child) && child.props.hidden;
11
+ if (label && !hidden) {
12
+ acc.steps[index] = label;
13
+ }
14
+ if (index === activeIndex) {
15
+ acc.innerContents = child;
16
+ }
17
+ return acc;
18
+ }, {
19
+ steps: [],
20
+ innerContents: null,
21
+ });
22
+ return (React.createElement(Flex, Object.assign({ flex: 1, flexDirection: "column" }, extraContainerProps),
23
+ header &&
24
+ header(Object.assign(Object.assign({}, extraProps), { activeIndex, stepsLength: steps.length })),
25
+ React.createElement(Flex, Object.assign({ my: 8, justifyContent: "center" }, extraStepperContainerProps),
26
+ React.createElement(Stepper, Object.assign({ activeIndex: activeIndex, steps: steps, flex: 1 }, extraStepperProps))),
27
+ React.createElement(Flex, { flex: 1, flexDirection: "column", position: "relative" }, renderChildren ? renderChildren({ children: innerContents }) : innerContents),
28
+ footer &&
29
+ footer(Object.assign(Object.assign({}, extraProps), { activeIndex, stepsLength: steps.length }))));
30
+ }
31
+ function Step({ children }) {
32
+ return React.createElement(React.Fragment, null, children);
33
+ }
34
+ FlowStepper.Step = Step;
35
+ export default FlowStepper;
@@ -3,3 +3,4 @@ export { default as Breadcrumb } from "./Breadcrumb";
3
3
  export { default as Header } from "./Header";
4
4
  export * from "./progress";
5
5
  export { default as SideBar } from "./sideBar/SideBar";
6
+ export { default as FlowStepper } from "./FlowStepper";
@@ -3,3 +3,4 @@ export { default as Breadcrumb } from "./Breadcrumb";
3
3
  export { default as Header } from "./Header";
4
4
  export * from "./progress";
5
5
  export { default as SideBar } from "./sideBar/SideBar";
6
+ export { default as FlowStepper } from "./FlowStepper";
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  interface Step {
3
2
  key: string;
4
3
  label: string;
@@ -1,10 +1,21 @@
1
1
  import React from "react";
2
2
  import { BorderProps, ColorProps, SpaceProps } from "styled-system";
3
- export interface Props {
3
+ import { FlexBoxProps } from "../../../layout/Flex";
4
+ /**
5
+ * The state of a progress bar step.
6
+ */
7
+ export declare type StepState = "pending" | "current" | "completed" | "errored" | "disabled";
8
+ declare type LabelType = string | React.ComponentType<{
9
+ state: StepState;
10
+ }>;
11
+ export interface Props extends FlexBoxProps {
4
12
  /**
5
13
  * An array of labels that will determine the progress bar steps.
14
+ * A label is either a string or a component that will be rendered with the
15
+ * prop `state: "pending" | "current" | "completed" | "errored"`.
16
+ * A styled StepText component is exported to allow easy styling of such a custom label.
6
17
  */
7
- steps: string[];
18
+ steps: LabelType[];
8
19
  /**
9
20
  * Index of the active step, starting at zero and defaulting to 0 if omitted.
10
21
  */
@@ -13,20 +24,22 @@ export interface Props {
13
24
  * If true the current step is considered as a failure.
14
25
  */
15
26
  errored?: boolean;
27
+ /**
28
+ * Steps with indexes contained inside the array will be shown as disabled.
29
+ */
30
+ disabledIndexes?: number[];
16
31
  }
17
- /**
18
- * The state of a progress bar step.
19
- */
20
- declare type StepState = "pending" | "current" | "completed" | "errored";
21
32
  export declare type StepProps = {
22
33
  /**
23
34
  * State of the step.
24
35
  */
25
36
  state: StepState;
26
37
  /**
27
- * The label to display.
38
+ * The label to display. To display more than text, this can be a component that will be rendered with the
39
+ * prop `state: "pending" | "current" | "completed" | "errored" | "disabled"`.
40
+ * A styled StepText component is exported to allow easy styling of such a custom Label
28
41
  */
29
- label: string;
42
+ label: LabelType;
30
43
  /**
31
44
  * If true, hides the left "separator" bar that bridges the gap between the wider separator and the item.
32
45
  */
@@ -48,9 +61,13 @@ export declare const Item: {
48
61
  backgroundColor: string;
49
62
  } & ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, "backgroundColor">;
50
63
  Completed: () => JSX.Element;
64
+ Disabled: () => JSX.Element;
51
65
  Errored: () => JSX.Element;
52
66
  };
67
+ export declare const StepText: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, import("../../../asorted/Text").TextProps & {
68
+ state: StepState;
69
+ }, keyof import("../../../asorted/Text").TextProps>;
53
70
  export declare const Step: React.NamedExoticComponent<StepProps>;
54
- declare function ProgressSteps({ steps, activeIndex, errored }: Props): JSX.Element;
55
- declare const _default: React.MemoExoticComponent<typeof ProgressSteps>;
71
+ declare function Stepper({ steps, activeIndex, errored, disabledIndexes, ...extraProps }: Props): JSX.Element;
72
+ declare const _default: React.MemoExoticComponent<typeof Stepper>;
56
73
  export default _default;
@@ -1,8 +1,18 @@
1
- import React, { memo } from "react";
1
+ var __rest = (this && this.__rest) || function (s, e) {
2
+ var t = {};
3
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
4
+ t[p] = s[p];
5
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
6
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
7
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
8
+ t[p[i]] = s[p[i]];
9
+ }
10
+ return t;
11
+ };
12
+ import React, { memo, Fragment } from "react";
2
13
  import styled from "styled-components";
3
14
  import { border, color, space } from "styled-system";
4
- import CheckAlone from "@ledgerhq/icons-ui/react/CheckAloneMedium";
5
- import CloseMedium from "@ledgerhq/icons-ui/react/CloseMedium";
15
+ import { Icons } from "../../../../index";
6
16
  import Text from "../../../asorted/Text";
7
17
  import Flex from "../../../layout/Flex";
8
18
  export const Item = {
@@ -39,15 +49,19 @@ export const Item = {
39
49
  border-radius: ${(p) => p.theme.space[2]}px;
40
50
  ${color}
41
51
  `,
42
- Completed: () => React.createElement(CheckAlone, { size: 16 }),
43
- Errored: () => React.createElement(CloseMedium, { size: 16 }),
52
+ Completed: () => React.createElement(Icons.CheckAloneMedium, { size: 16 }),
53
+ Disabled: () => React.createElement(Icons.CloseMedium, { size: 16 }),
54
+ Errored: () => React.createElement(Icons.CloseMedium, { size: 16 }),
44
55
  };
45
- const StepText = styled(Text) `
56
+ export const StepText = styled(Text) `
46
57
  color: ${(p) => {
47
- if (p.errored) {
58
+ if (p.state === "errored") {
48
59
  return p.theme.colors.error.c100;
49
60
  }
50
- if (p.inactive) {
61
+ if (p.state === "disabled") {
62
+ return p.theme.colors.neutral.c50;
63
+ }
64
+ if (p.state === "pending") {
51
65
  return p.theme.colors.neutral.c70;
52
66
  }
53
67
  return p.theme.colors.neutral.c100;
@@ -74,19 +88,23 @@ const stepContentsByState = {
74
88
  React.createElement(Item.Completed, null))),
75
89
  errored: (React.createElement(Item.Container, { color: "error.c100", backgroundColor: "warning.c30", borderRadius: "8px" },
76
90
  React.createElement(Item.Errored, null))),
91
+ disabled: (React.createElement(Item.Container, { color: "neutral.c50" },
92
+ React.createElement(Item.Disabled, null))),
77
93
  };
78
- export const Step = memo(function Step({ state, label, hideLeftSeparator, nextState, }) {
94
+ export const Step = memo(function Step({ state, label: Label, hideLeftSeparator, nextState, }) {
79
95
  const inactive = state === "pending";
80
- const nextInactive = nextState === "pending";
81
- const errored = state === "errored";
96
+ const nextInactive = state === "pending";
82
97
  return (React.createElement(Flex, { flexDirection: "column", alignItems: "center" },
83
98
  React.createElement(Item.Spacer, { mb: 5 },
84
99
  (!hideLeftSeparator && React.createElement(Separator.Item, { inactive: inactive, position: "left" })) || (React.createElement(Flex, { flex: "1" })),
85
100
  stepContentsByState[state],
86
101
  (nextState && React.createElement(Separator.Item, { inactive: nextInactive, position: "right" })) || (React.createElement(Flex, { flex: "1" }))),
87
- React.createElement(StepText, { inactive: inactive, errored: errored, variant: "small" }, label)));
102
+ typeof Label === "string" ? (React.createElement(StepText, { state: state, variant: "small" }, Label)) : (React.createElement(Label, { state: state }))));
88
103
  });
89
- function getState(activeIndex, index, errored) {
104
+ function getState(activeIndex, index, errored, disabled) {
105
+ if (disabled) {
106
+ return "disabled";
107
+ }
90
108
  if (activeIndex < index) {
91
109
  return "pending";
92
110
  }
@@ -95,13 +113,14 @@ function getState(activeIndex, index, errored) {
95
113
  }
96
114
  return "completed";
97
115
  }
98
- function ProgressSteps({ steps, activeIndex = 0, errored }) {
99
- return (React.createElement(Flex, { flexWrap: "nowrap", justifyContent: "space-between" }, steps.map((step, idx) => {
100
- const state = getState(activeIndex, idx, errored);
116
+ function Stepper(_a) {
117
+ var { steps, activeIndex = 0, errored, disabledIndexes } = _a, extraProps = __rest(_a, ["steps", "activeIndex", "errored", "disabledIndexes"]);
118
+ return (React.createElement(Flex, Object.assign({ flexWrap: "nowrap", justifyContent: "space-between" }, extraProps), steps.map((step, idx) => {
119
+ const state = getState(activeIndex, idx, errored, disabledIndexes === null || disabledIndexes === void 0 ? void 0 : disabledIndexes.includes(idx));
101
120
  const nextState = idx < steps.length - 1 ? getState(activeIndex, idx + 1) : undefined;
102
- return (React.createElement(React.Fragment, null,
121
+ return (React.createElement(Fragment, { key: idx },
103
122
  idx > 0 && React.createElement(Separator.Step, { inactive: state === "pending" }),
104
123
  React.createElement(Step, { label: step, state: state, nextState: nextState, hideLeftSeparator: idx === 0 })));
105
124
  })));
106
125
  }
107
- export default memo(ProgressSteps);
126
+ export default memo(Stepper);
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  export declare const ItemLabel: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, import("../../../asorted/Text").TextProps, keyof import("../../../asorted/Text").TextProps>;
3
2
  export declare type ItemType = {
4
3
  label: string;
@@ -1,3 +1,2 @@
1
- /// <reference types="react" />
2
1
  declare const Logo: () => JSX.Element;
3
2
  export default Logo;
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  export declare type SideBarProps = {
3
2
  children: Array<JSX.Element>;
4
3
  onToggle: () => void;
@@ -11,24 +11,26 @@ const Nav = styled(Flex) `
11
11
  padding: ${(p) => `${p.theme.space[19]}px ${p.theme.space[5]}px 0`};
12
12
  row-gap: 1.5rem;
13
13
  height: 100vh;
14
- max-width: 14.875rem;
14
+ width: 14.875rem;
15
15
  color: ${(props) => props.theme.colors.neutral.c100};
16
16
  border-right: 1px solid ${(props) => props.theme.colors.neutral.c40};
17
17
  background-color: ${(props) => props.theme.colors.background.main};
18
- transition: max-width 200ms;
19
- will-change: max-width;
18
+ transition: width 200ms;
19
+ will-change: width;
20
+ flex-shrink: 0;
21
+ z-index: ${(p) => p.theme.zIndexes[2]};
20
22
 
21
23
  &.nav-enter {
22
- max-width: ${(p) => p.theme.space[19]}px;
24
+ width: ${(p) => p.theme.space[19]}px;
23
25
  }
24
26
  &.nav-enter-done {
25
- max-width: 14.875rem;
27
+ width: 14.875rem;
26
28
  }
27
29
  &.nav-exit {
28
- max-width: 14.875rem;
30
+ width: 14.875rem;
29
31
  }
30
32
  &.nav-exit-done {
31
- max-width: ${(p) => `${p.theme.space[19]}px`};
33
+ width: ${(p) => `${p.theme.space[19]}px`};
32
34
  }
33
35
  `;
34
36
  const TransparentMouseZone = styled.div `
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  declare type ToggleButtonProps = {
3
2
  isDisplayed: boolean;
4
3
  };
@@ -1,12 +1,15 @@
1
1
  import { StyledInterface, InterpolationFunction } from "styled-components";
2
- import { FlexboxProps, SpaceProps, PositionProps, ColorProps, LayoutProps, OverflowProps } from "styled-system";
3
- export declare type BaseStyledProps = SpaceProps & FlexboxProps & PositionProps & ColorProps & LayoutProps & OverflowProps & {
2
+ import { FlexboxProps, SpaceProps, PositionProps, ColorProps, LayoutProps, OverflowProps, BorderProps } from "styled-system";
3
+ export declare type BaseStyledProps = SpaceProps & FlexboxProps & PositionProps & ColorProps & LayoutProps & BorderProps & OverflowProps & {
4
+ /**
5
+ * The columnGap CSS property sets the size of the gap (gutter) between an element's grid columns.
6
+ */
4
7
  columnGap?: string | number;
8
+ /**
9
+ * The rowGap CSS property sets the size of the gap (gutter) between an element's grid rows.
10
+ */
5
11
  rowGap?: string | number;
6
12
  color?: string;
7
- display?: string;
8
- position?: string;
9
- maxHeight?: number;
10
13
  };
11
14
  export declare const baseStyles: InterpolationFunction<unknown>;
12
15
  declare const _default: StyledInterface;
@@ -1,7 +1,7 @@
1
1
  import gaps from "../styles/system/gaps";
2
2
  import styled from "styled-components";
3
- import { compose, flexbox, space, position, color, layout, overflow, } from "styled-system";
4
- export const baseStyles = compose(flexbox, space, position, color, layout, overflow, gaps);
3
+ import { compose, flexbox, space, position, color, layout, overflow, border, } from "styled-system";
4
+ export const baseStyles = compose(flexbox, space, position, color, layout, overflow, gaps, border);
5
5
  const proxyStyled = new Proxy(styled, {
6
6
  apply(target, thisArg, argumentsList) {
7
7
  return styled(target.apply(thisArg, argumentsList)(baseStyles));
package/index.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  export * from "./components";
2
2
  export * from "./assets";
3
- export { StyleProvider } from "./styles";
3
+ export { StyleProvider, InvertTheme } from "./styles";
package/index.js CHANGED
@@ -1,3 +1,3 @@
1
1
  export * from "./components";
2
2
  export * from "./assets";
3
- export { StyleProvider } from "./styles";
3
+ export { StyleProvider, InvertTheme } from "./styles";
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ledgerhq/react-ui",
3
3
  "description": "Ledger Live - Desktop UI",
4
- "version": "0.4.0",
4
+ "version": "0.7.1",
5
5
  "author": "Ledger Live Team <team-live@ledger.fr>",
6
6
  "repository": "https://github.com/LedgerHQ/ui",
7
7
  "license": "MIT",
@@ -27,13 +27,13 @@
27
27
  "index.js"
28
28
  ],
29
29
  "dependencies": {
30
- "@ledgerhq/icons-ui": "^0.2.0",
31
- "@ledgerhq/ui-shared": "^0.1.3",
30
+ "@floating-ui/react-dom": "^0.4.0",
31
+ "@ledgerhq/icons-ui": "^0.2.2",
32
+ "@ledgerhq/ui-shared": "^0.1.5",
32
33
  "@tippyjs/react": "^4.2.6",
33
34
  "@types/color": "^3.0.2",
34
- "@types/react": "~17.0.34",
35
+ "@types/react": "~17.0.37",
35
36
  "@types/react-dom": "^17.0.11",
36
- "@types/react-select": "^4.0.18",
37
37
  "@types/react-transition-group": "^4.4.2",
38
38
  "@types/react-window": "^1.8.5",
39
39
  "@types/styled-components": "^5.1.14",
@@ -44,7 +44,7 @@
44
44
  "moment": "^2.29.1",
45
45
  "react-chartjs-2": "^3.0.5",
46
46
  "react-is": "^17.0.2",
47
- "react-select": "^3.2.0",
47
+ "react-select": "^5.2.1",
48
48
  "react-transition-group": "^4.4.2",
49
49
  "react-window": "^1.8.6",
50
50
  "styled-system": "^5.1.5"
@@ -1,2 +1,5 @@
1
1
  import React from "react";
2
- export declare const InvertTheme: ({ children }: React.PropsWithChildren<unknown>) => React.ReactElement;
2
+ export declare type Props = {
3
+ if?: boolean;
4
+ };
5
+ export declare const InvertTheme: ({ if: condition, children, }: React.PropsWithChildren<Props>) => React.ReactElement;
@@ -2,9 +2,9 @@ import React, { useMemo } from "react";
2
2
  import { ThemeProvider, useTheme } from "styled-components";
3
3
  import { defaultTheme } from ".";
4
4
  import { palettes } from "@ledgerhq/ui-shared";
5
- export const InvertTheme = ({ children }) => {
6
- const { theme } = useTheme();
7
- const revertTheme = theme === "light" ? "dark" : "light";
8
- const newTheme = useMemo(() => (Object.assign(Object.assign({}, defaultTheme), { colors: Object.assign(Object.assign({}, defaultTheme.colors), { palette: palettes[revertTheme] }), theme: revertTheme })), [revertTheme]);
9
- return React.createElement(ThemeProvider, { theme: newTheme }, children);
5
+ export const InvertTheme = ({ if: condition, children, }) => {
6
+ const theme = useTheme();
7
+ const revertTheme = theme.theme === "light" ? "dark" : "light";
8
+ const newTheme = useMemo(() => (Object.assign(Object.assign({}, defaultTheme), { colors: Object.assign(Object.assign({}, palettes[revertTheme]), { palette: palettes[revertTheme] }), theme: revertTheme })), [revertTheme]);
9
+ return React.createElement(ThemeProvider, { theme: condition ? newTheme : theme }, children);
10
10
  };
package/styles/index.d.ts CHANGED
@@ -2,5 +2,6 @@ export { default as defaultTheme } from "./theme";
2
2
  export * from "./helpers";
3
3
  export * from "./global";
4
4
  export * from "./StyleProvider";
5
+ export { InvertTheme } from "./InvertTheme";
5
6
  export type { ThemeNames, ColorPalette } from "@ledgerhq/ui-shared";
6
7
  export { palettes } from "@ledgerhq/ui-shared";
package/styles/index.js CHANGED
@@ -2,4 +2,5 @@ export { default as defaultTheme } from "./theme";
2
2
  export * from "./helpers";
3
3
  export * from "./global";
4
4
  export * from "./StyleProvider";
5
+ export { InvertTheme } from "./InvertTheme";
5
6
  export { palettes } from "@ledgerhq/ui-shared";
package/styles/theme.d.ts CHANGED
@@ -45,7 +45,7 @@ export declare const fontFamilies: {
45
45
  };
46
46
  };
47
47
  };
48
- declare const transition: (properties?: string[]) => FlattenSimpleInterpolation;
48
+ declare const transition: (properties?: string[], duration?: string, easing?: string) => FlattenSimpleInterpolation;
49
49
  declare const animations: {
50
50
  fadeIn: () => FlattenSimpleInterpolation;
51
51
  fadeOut: () => FlattenSimpleInterpolation;
package/styles/theme.js CHANGED
@@ -34,7 +34,7 @@ const fontWeights = {
34
34
  bold: "700",
35
35
  extraBold: "800",
36
36
  };
37
- export const radii = [0, 4, 8, 12];
37
+ export const radii = [0, 4, 8, 12, 16, 20];
38
38
  export const shadows = ["0 4px 8px 0 rgba(0, 0, 0, 0.03)"];
39
39
  export const zIndexes = [-1, 0, 1, 9, 10, 90, 100, 900, 1000];
40
40
  // Those fonts are now defined in global.css, this is just a mapping for styled-system
@@ -76,14 +76,14 @@ export const fontFamilies = {
76
76
  },
77
77
  },
78
78
  };
79
- const animationLength = "0.33s";
79
+ const animationDuration = "0.33s";
80
80
  const easings = {
81
81
  outQuadratic: "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
82
82
  };
83
- const transition = (properties = ["all"]) => css `
83
+ const transition = (properties = ["all"], duration = animationDuration, easing = easings.outQuadratic) => css `
84
84
  transition-property: ${properties.join(",")};
85
- transition-duration: ${animationLength};
86
- transition-timing-function: ${easings.outQuadratic};
85
+ transition-duration: ${duration};
86
+ transition-timing-function: ${easing};
87
87
  `;
88
88
  const fadeIn = keyframes `
89
89
  0% {
@@ -123,16 +123,16 @@ const fadeInUp = keyframes `
123
123
  `;
124
124
  const animations = {
125
125
  fadeIn: () => css `
126
- ${fadeIn} ${animationLength} ${easings.outQuadratic} forwards
126
+ ${fadeIn} ${animationDuration} ${easings.outQuadratic} forwards
127
127
  `,
128
128
  fadeOut: () => css `
129
- ${fadeOut} ${animationLength} ${easings.outQuadratic} forwards
129
+ ${fadeOut} ${animationDuration} ${easings.outQuadratic} forwards
130
130
  `,
131
131
  fadeInGrowX: () => css `
132
132
  ${fadeInGrowX} 0.6s ${easings.outQuadratic} forwards
133
133
  `,
134
134
  fadeInUp: () => css `
135
- ${fadeInUp} ${animationLength} ${easings.outQuadratic} forwards
135
+ ${fadeInUp} ${animationDuration} ${easings.outQuadratic} forwards
136
136
  `,
137
137
  };
138
138
  const overflow = {
@@ -1,2 +0,0 @@
1
- declare const _default: "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";
2
- export default _default;
@@ -1 +0,0 @@
1
- export default "iVBORw0KGgoAAAANSUhEUgAAAEQAAABECAYAAAA4E5OyAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAABGvSURBVHgB1Vx9jB3Vdf+dO/Pe2w/veo3jYFQcsJvEmIJUgiMaEtE4xh9AsE0Dq6pVK/VDLeGvqpUqRVUbo/bfqlWiVrRqFZKoquSgYDvEwRhiSClSUqQ0KHECiQifAWPir9317r73Zk7OuffcO/PWNt61d23vsWbvfN6Z85tzfufcc+eZcJHkO7t4xVQfrkeB1bL5fiKsZoCkXQmWVtZl2zHjCAgTujjCy50uXsibOLzp0/QyLoIQFkj27uWBFmN9k7GuIHxUFF0idyNpnSrvQbBtPZ/J73cepNCFrrt4niyHyxIvSPuDY2387+gojWMBZN4B2b+Xr8sYN4syt4kyS1gVUpU5KOfvSZWiHJ7BA+EMILZjtl9XHOw8Ck89UZR4rl3gkbvvpZ9iHmXeAPn2Hl7bZeyQHtchWIFXRN+8PyEqqq5BoY0WoZbgosvMAEYOJCuSE/w5iH3ofsL3ZfnSpu30fcyDXDAg+3fzKlHgd0XhdWT9xYdOLkHeRTxIHqCyOq5tGc+PytbcyQCJylMNQPi+7bj0/6y41D9v/Qy9hQuQ8wbEc0SJjfJgd5v/e17wHEH2kDWlVQlVioPLeAWpV8FkITUX8W6CyrL8erSwxEkc1uFPxn9u3EH/gfOU8wLkucf5iolpPCAXr/IKGBAIWrmy4oDTrMS7zgxATGkXlRLJgArcWj96fuatI4KDKkKZeepzvFV0cf/5WMucATmwl3+LC9wnTzFANV8uecZbCwAkAo2mTWRvPwJQBrMnA4pLZIlQqwjjosWZ4lSLWC7qkl6OWhxhTMj83zduo/+eg3pzA+Tbu/lO8fe72MxWlCHKzFUiGZamdHyjtbfslQnKeTNPitJprhI5xtVcMIRncz1QZRkRDFPIRWAQXPmh23fQv81WRzfbE596lO/oAgoI+xsLDKTvnhUWsD0thwYsBId43mmdsQVg04BrD8K1I7GP2NZAACPxVDjEyTqCu7pwTCz3s/sf5c9iljIrQJ7cw1sLxla5Q6kKstoG27/wMGFfeFA2hZnZLwkUD6IASJXy9esDKUYbCedTLSfxSiPkNeQMIK4RdeSghCj5sK1mcv+BPbMD5ZyAHNjNW0TVrY5MffnrFQsM4RePRDAddjWL8KGj2mYO53hWYdQsJ7hfJVy9fbs+ckbVmpu4zICiiEFwQy4rbkHgrAee3M0P4Bzynhyyfw/f5jTZihzhvAkm301sX1rqHR+YLMRaYiUmH7gDmJRLXpfl+bKNdynHKxjHxJY/pAl/v/086Dq4kgosket/Xc7/Tbn3TdLfUCJTa0ukUF9FsKCRM2QSt9X0VPL/my330O45A/I/j/GyU238lXTcT3VzVMbIAnlaPpFC52lRx0hRQHlRItPuyRyvbttGpzBHOfB1/oSQ1B3S32365l3gHWcg1Um0J/exF4EYmhEsbXxqGvfcPUpvYi6ACG98TpS5Qjsvy4rByd5BGbPH+jjF9SZS0v60KLB3y730E8yDHPwmr+x28afS712YaR0z8hUghd9I1GTn6vO+2O/wB5/YTmOYDSDCG7dLs9mn2jgt60xsX3cfig8RYDlaAF++Yzu9iAWQp/byR8oCfyf3+bU6GEDKcYgrgo37w4alAuJyXxTX+eLMvk8D5LH/4mWtQfy1xX+u5wApnzDzTOk6krnKQBcHpwjfPB/XmIvs2cND/SX+TB7i94EZpYTKMpzF9JhNV3yiMBbYtul36Mf1fvOZN2r24dO+29JHgogYe2vhsCibxvUYIX2IITy2eQftw0WQ7cHc//GJPTwhz3o/agkahZcGi09qvTG6hWgWsmd93r+Vrd+r99sTdqWWsVpOvk4IUMOn5gtchlzCt3oLCvlFyTHXcD5BKyX87btYYNRl83Z6SLR4SNfr5Bmz4jjgjMUmy16D2zvcItn3LfX+egCRqzZo9ikdlREICiCUKfeoMlXd5xM0Oe9bMmb4Fi6RKCjy4h+i4DKeU1wVbr1l2PgnDghDK1FIsu+/qPeVAHn8q3yVqLc6ZqAJCB9QZCGzCvhWDc8DJmvPbNpB+3GJZcsO+ldR+CtANfouAzjRMigNMpEKVHrux3TAGvtJgORLcUu0Dr/DgIkZpQuW4IGw4FXKxb/84DJccjCi9BP+RZpfWKSrchMDg2wfRa5x6diW2IcH5OCXuE9qlNeJCflxlPICO0utzVriGIU83QZgyi52rd5AU7hMRPMKebDPWdYaYLF8KaYPNjr2S4o6JUb37eNh2AHw+7BWhgRNRDcpw8LGE3Ew59ejhTg8v+neizM1MBcR1/muPN/3ACsdGBCEWgmyVlhCqPuONKaxVa/3gMhI9lr/yuNAzFlEMWJ1NpplZ1YiFpIXeAqXqXQY/2A1XGfu48Hxab+5SnQbwKY9HD4WGnh+WBWjhrcMc426hSg4ekyuKOSiQxvuoeO4TOXOHXRInvO7QOUuqfIWw289sw377tBrnWR8V4rCw5K1cXILDtYQw6p3oVDsU/bgboZ5KfkvqBD+KQ0rKt6IIKSFqrR/xM8gDBZYqmCw1SiKWNOoRRk95vOSYCGntmybn8HaQkonxyGhgfFUxKaewrdKqElzGo5oGePj6lcfKBDCqrqJM44ImW1KytIi+1/BIpA776STGeGQoxRJXJz84hiFqKr2W9nxBscZVvjMNCocCJRjQqYRRYbwCSS5wStYJCI5xH4DoZoPcjW3ibMCNnEmfz6gg7uWD6Nh0KNIqJVoihpNiqvqivfJw1gkIrq8QYEnVHrL3YzKcSzRkvNuzMnyD5AVhENqi54ap0gRR8BdXDaJ2LmE2vihaBfnlnuKHTb7x1xxii9v5LJjiLiqigMpQyW2ekjsX0HrtnACi0dOoJow65EKA6TJaGmv8amWRg8fQZAAUeRK58Ixzy0FCm2FrKaxSGTTKJ0QbTKuzxVTb9hFzFZtycnGLFo09nUP6ywVgaxVxikYi1FcMg6u/lLaNBsK8ZlcTMS0oKaEmtmi+yhkqClj1fV9X+AWFokcOMBLrdSpUhXB0TOW8SE5Vu+dVLFPaiKmi1bKCkvIdLuwVjNVH3rFjYY/4kl4UYhUda+xgpB+TeDDK89wESsAxCmN13LPExwmEpyV6aNnmLeEzp3PQzDxC7xPmjEsAukWoIxsqqSaayYboIb5wtLsBl7vk8ohR2TnEr0gFof0T60PD0xcz1oYwiKRBuO4pAuhyEyWbpQ+OQtZF8VxPaLCrys6Jzw/ZDZ4s3S9gE1MczUKFrsrZPsaLBLZ+Bl6VTR6Fkg11vjdSiwYxfJAnE75htYd39WxjPKHzdZztJY49C/MpfSYrC/ftYsXDY9IlNQ6q06tBh6JwHAAiap5pdc230NfdYOMN30ByEa79QoZB1/j2hhHo1E+nGE5Fols2U5flmf+e+pJ1BG/IPF/hTtPSui8V09wfn6TJB23ukfBNUuxCpmNZ8pYF5E5mJuwiGTTdnpQXuZfygt/DbUkTSfDhVO+QznW37adXgCQ8vyfUwy3rhryJyAoZbLwLeP9+nUALnPhnVL9FNvfKe3m7fiCTKTpNMunRJ8/Ft3+JGtijbjJxo13CdeYeEN65hv8IQlRv506Umgya+2jKRdrqkWqyr+9eRs9gctQFISvfQ35sWPgD38YfOQI+NAh8Oc/D37wQZC2RHTGvNtbyPJJvCquMu1T9zIoHsc3HJKzsE+Pm+UI76x4UsqPuMxEreHph9FcsgS0bBlIwHACjJO3rSC566+PFTKmM13vAblhlNpSB3iJXS9vsLlQt84r8PtKG/fc8vzz3MBlIqqkKNxqDYJGxuFWTMApMDffLEP6q0ArVoTl6acDOGfqI+2kBl5NBFqGUmKWpQJRmr5MEYd9qj9w7E3cgMtEHn4YrRWSO45NwTX7xBKuldm8w6B33oF72azlpZcCTSgwZ7KSnh3+a8MCV7o4AuaUxUfrQEz1Y2lArUrA+9HtWvq/hKKzj5MNNIeHwJ1pcHtpeN6hEyjfkFashSfHwOMrw37lF3GpcnSUino/PWYzPY3/r1uAKq3uQWTFZ629qvVY1PG80vUEu+7A13kdLpEcPMh9+Qr0N64EnWyIsUtRtHkivOyxpXB9x8Q61I1WVm6k/KJWMrOvHkDuGqW3EWqmoUjEacZfamtmDXWXMdDQ9WCt1Z+I4CKL/gihOIbBiRwkL9T1yxJBmVLXUWCuAvr6gvIKTH8/SEH55BGcFmlOI5Z2A/8Xc5GodBlyD3YxF7HJcFfLaHWRUsLaxx/h3+CDnGOBRf3/2T08NJJjMBMw8lNhmZClMQ6aFGAaYwGYIQGmJa1yy5o+zyWk3IL7ZlaOgbN9dHejKHhDuLGQq6s4xM/oGTAwl0ngZXK4EBfLcUpqrz/YupWOYgFEi1TZ1VjabMEV3TBN0hQL1vWuLh3hkQHwEm2XgIc7NV4R+18+Ah4bQnvDBupiNoDo4O2KFj4lqyPoDbkwEg2zeDEKCc9klqPoOWpRui1s9UZzGX62YZ4+mdDnWppjRHKmZktA6MgIvdUn9zFQpgWUAQVEwBiU9t2OgdKWZSg8v7gVX301iltvpckz3YPOdvP9X+FBGsRmUbbBbkaUMQvxRSO5oaTA/q0oUK6BUrJeLT+VMckT3A5POry1bRu9izmKJlqaW4wUWFb0oZlnvl8PQEvu25D7HTuKUjiC+2U5LkAMmKXo9RJ5SuELxjGZ3hRg+psoP3kfJs6WqdJ7PczBR/naDuOjCoKf7qSgbGZuoy6SBWvx7pKItjYW0ijV6aRstyM8dKw1gOPjJSbkobtCfNMx9IkFZGvWwL3zE/RPDaAxJPyg1qDHJCcq804Ao2x4XvOg5GIVZTe07Wlf6kI3gmKWciK8SH+P8XFMyf3aZ9P5PQFReXI3X69hFTW3cdyrvAfDLMWHZRfekLYpTGeBlMsaULq/KENRWyfTi8J/0+YfXIv8ZS4WwN76Sg+ILKfUVWRbrSNaibz5HteJXDLQF9rBgWDBQgBT53Lfc/4awidcXRyCpS+Oa9aQWdhSasoDn9TDMYdsl+uWpKf7tyxLR65zXZDWPnV/s+HfJDVyz0t+n58EkmJFR7bbbf/rBxrMwrHMWif7p6ekfprbfo06edjWViMPjp8bjFkBoqJf+0rHh3wIdlVuoq7jt7PqSyMl2qKoslx5QxCHoJT1ynZ98KNWoK28dbQ7YZ8AFRQVEFoBjyB91XUCon/2aQEDAzrDZKBK5FGgsrxahoVKNvzR7Ih91r+o2qDfhGTw34Uk6+iGT6GzWmhmc5XMQKqHbA9iVq0rMFrpF1dQcvQSp067CkrbA0VqHU5aAdqpNSgYfQaYKi/nBnCmwrUTE8CUrcv0wKlbR88cUS4IEBX9UEaK0T8U0+9EXlBv6RpIRVA4WQdHd6mBEAO/KqMGodyRXKZ+s2aYePfnKjitXktpx8kDU1XCKamVKCiShLllI8JP/Rib6zf3cwJERf9TguGVeEbYbzKSqquIsspXai4SxVuMRqQ8cMjMvrvVz8zIf5Kg5xhKaiG+jbzRCXziJBUX6wpuYqC0Gui8PY6j55P/nDPKvJc88Qh/SCzgg+4MA0KO4bhGwg2dHi7Ted7C7FOtsB1CaSl8pa4W8g0XIlCj8JbWE3ZLDbu2rynraizDOU58fBvGz5ZnLCggKs/t4v7xBtaKkiuihaToUloFLguWEZX2uQk8KXtlJY8oMwNB+xTeKDTSSFSBJFs6jVqq8qp4w8DQUNyMwEjbyjE58DqOr/9z6uAC5IIBieJ/ktbBGulwJOUnXIXctG1vXa+JgOS2L1lKGFB618q6ZhUKRt5rJU1tp4RFJnB8tlHkXDJvgEQ5uIuXdHOsktXlolDmwSmCktFq6i6lYTfui27iATEw4jnat253BRCaRiEWdTJbhokN8/xp+bwDEuXgTs6Lm7BcRpkjOh8s4bmlirZFwZarrEctJGaqXnmu+EO3s76wLsl2MdzAyaNjmPzezzC+cyeVWABZMEBmiv4EVQYVLWHW4ZzRX4afo2USKRreLcxShAqndV3C3ykhzPbxdzC16kZMrF9/YdwwW/kVde7c2j1PF5EAAAAASUVORK5CYII=";