@ledgerhq/react-ui 0.8.0 → 0.8.1-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/layout/Drawer/index.js +1 -1
- package/lib/cjs/components/layout/Drawer/index.js.map +1 -1
- package/lib/cjs/components/layout/Popin/index.js +2 -2
- package/lib/cjs/components/layout/Popin/index.js.map +2 -2
- package/lib/cjs/index.js +1 -0
- package/lib/cjs/index.js.map +2 -2
- package/lib/cjs/styles/InvertTheme.js +20 -1
- package/lib/cjs/styles/InvertTheme.js.map +2 -2
- package/lib/cjs/styles/index.js +1 -0
- package/lib/cjs/styles/index.js.map +2 -2
- package/lib/components/layout/Drawer/index.js +1 -1
- package/lib/components/layout/Popin/index.js +2 -2
- package/lib/index.d.ts +1 -1
- package/lib/index.js +1 -1
- package/lib/styles/InvertTheme.d.ts +1 -0
- package/lib/styles/InvertTheme.js +7 -0
- package/lib/styles/index.d.ts +1 -1
- package/lib/styles/index.js +1 -1
- package/package.json +30 -7
|
@@ -129,7 +129,7 @@ const DrawerContent = import_react.default.forwardRef(({
|
|
|
129
129
|
}, /* @__PURE__ */ import_react.default.createElement(Wrapper, {
|
|
130
130
|
big,
|
|
131
131
|
onClick: stopClickPropagation,
|
|
132
|
-
backgroundColor: backgroundColor ?? "
|
|
132
|
+
backgroundColor: backgroundColor ?? "background.main"
|
|
133
133
|
}, /* @__PURE__ */ import_react.default.createElement(Container, null, /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
|
|
134
134
|
justifyContent: "space-between",
|
|
135
135
|
alignItems: "center",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/layout/Drawer/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useCallback } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport styled from \"styled-components\";\nimport FlexBox, { FlexBoxProps } from \"../Flex\";\nimport Divider, { Props as DividerProps } from \"../../asorted/Divider\";\nimport Close from \"@ledgerhq/icons-ui/react/CloseMedium\";\nimport ArrowLeft from \"@ledgerhq/icons-ui/react/ArrowLeftRegular\";\nimport TransitionSlide from \"../../transitions/TransitionSlide\";\nimport TransitionInOut from \"../../transitions/TransitionInOut\";\nimport Text from \"../../asorted/Text\";\n\nexport enum Direction {\n Left = \"left\",\n Right = \"right\",\n}\n\nconst Container = styled(FlexBox)`\n width: 100%;\n height: 100%;\n flex-direction: column;\n`;\n\nconst Wrapper = styled(FlexBox)<{\n big?: boolean;\n}>`\n height: 100%;\n width: ${(p) =>\n p.big ? p.theme.sizes.drawer.side.big.width : p.theme.sizes.drawer.side.small.width}px;\n flex-direction: column;\n align-items: stretch;\n justify-content: space-between;\n z-index: ${(p) => p.theme.zIndexes[8]};\n`;\nconst Overlay = styled.div<{ direction: Direction }>`\n display: flex;\n position: fixed;\n justify-content: ${(p) => (p.direction === Direction.Left ? \"flex-end\" : \"flex-start\")};\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n z-index: 999;\n background-color: ${(p) => p.theme.colors.constant.overlay};\n`;\nconst ScrollWrapper = styled(FlexBox)`\n &::-webkit-scrollbar {\n display: none;\n }\n`;\nconst ButtonPlaceholder = styled.div`\n min-width: ${(p) => p.theme.space[13]}px;\n`;\nconst Button = styled.button`\n background: unset;\n border: unset;\n cursor: pointer;\n color: ${(p) => p.theme.colors.neutral.c100};\n`;\n\nexport interface DrawerProps {\n isOpen: boolean;\n children: React.ReactNode;\n title?: React.ReactNode;\n footer?: React.ReactNode;\n big?: boolean;\n ignoreBackdropClick?: boolean;\n backgroundColor?: string;\n onClose: () => void;\n onBack?: () => void;\n setTransitionsEnabled?: (arg0: boolean) => void;\n hideNavigation?: boolean;\n menuPortalTarget?: Element | null;\n direction?: Direction;\n extraContainerProps?: Partial<FlexBoxProps>;\n extraHeaderProps?: Partial<FlexBoxProps>;\n extraFooterProps?: Partial<FlexBoxProps>;\n extraFooterDividerProps?: Partial<DividerProps>;\n}\n\nconst DrawerContent = React.forwardRef(\n (\n {\n isOpen,\n title,\n children,\n footer,\n big,\n onClose,\n backgroundColor,\n setTransitionsEnabled = () => 0,\n onBack,\n extraContainerProps,\n extraHeaderProps,\n extraFooterProps,\n extraFooterDividerProps,\n ignoreBackdropClick = false,\n hideNavigation = true,\n direction = Direction.Left,\n }: DrawerProps,\n ref?: React.ForwardedRef<HTMLDivElement>,\n ) => {\n const disableChildAnimations = useCallback(\n () => setTransitionsEnabled(false),\n [setTransitionsEnabled],\n );\n const enableChildAnimations = useCallback(\n () => setTransitionsEnabled(true),\n [setTransitionsEnabled],\n );\n\n const handleBackdropClick = useCallback(() => {\n if (!ignoreBackdropClick) {\n onClose();\n }\n }, [onClose, ignoreBackdropClick]);\n\n const stopClickPropagation = useCallback((e: React.MouseEvent) => {\n e.stopPropagation();\n }, []);\n\n return (\n <TransitionInOut\n in={isOpen}\n appear\n mountOnEnter\n unmountOnExit\n onEntering={disableChildAnimations}\n onEntered={enableChildAnimations}\n onExiting={disableChildAnimations}\n >\n <Overlay direction={direction} onClick={handleBackdropClick} ref={ref}>\n <TransitionSlide\n in={isOpen}\n direction={direction}\n fixed\n reverseExit\n appear\n mountOnEnter\n unmountOnExit\n >\n <Wrapper\n big={big}\n onClick={stopClickPropagation}\n backgroundColor={backgroundColor ?? \"
|
|
4
|
+
"sourcesContent": ["import React, { useCallback } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport styled from \"styled-components\";\nimport FlexBox, { FlexBoxProps } from \"../Flex\";\nimport Divider, { Props as DividerProps } from \"../../asorted/Divider\";\nimport Close from \"@ledgerhq/icons-ui/react/CloseMedium\";\nimport ArrowLeft from \"@ledgerhq/icons-ui/react/ArrowLeftRegular\";\nimport TransitionSlide from \"../../transitions/TransitionSlide\";\nimport TransitionInOut from \"../../transitions/TransitionInOut\";\nimport Text from \"../../asorted/Text\";\n\nexport enum Direction {\n Left = \"left\",\n Right = \"right\",\n}\n\nconst Container = styled(FlexBox)`\n width: 100%;\n height: 100%;\n flex-direction: column;\n`;\n\nconst Wrapper = styled(FlexBox)<{\n big?: boolean;\n}>`\n height: 100%;\n width: ${(p) =>\n p.big ? p.theme.sizes.drawer.side.big.width : p.theme.sizes.drawer.side.small.width}px;\n flex-direction: column;\n align-items: stretch;\n justify-content: space-between;\n z-index: ${(p) => p.theme.zIndexes[8]};\n`;\nconst Overlay = styled.div<{ direction: Direction }>`\n display: flex;\n position: fixed;\n justify-content: ${(p) => (p.direction === Direction.Left ? \"flex-end\" : \"flex-start\")};\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n z-index: 999;\n background-color: ${(p) => p.theme.colors.constant.overlay};\n`;\nconst ScrollWrapper = styled(FlexBox)`\n &::-webkit-scrollbar {\n display: none;\n }\n`;\nconst ButtonPlaceholder = styled.div`\n min-width: ${(p) => p.theme.space[13]}px;\n`;\nconst Button = styled.button`\n background: unset;\n border: unset;\n cursor: pointer;\n color: ${(p) => p.theme.colors.neutral.c100};\n`;\n\nexport interface DrawerProps {\n isOpen: boolean;\n children: React.ReactNode;\n title?: React.ReactNode;\n footer?: React.ReactNode;\n big?: boolean;\n ignoreBackdropClick?: boolean;\n backgroundColor?: string;\n onClose: () => void;\n onBack?: () => void;\n setTransitionsEnabled?: (arg0: boolean) => void;\n hideNavigation?: boolean;\n menuPortalTarget?: Element | null;\n direction?: Direction;\n extraContainerProps?: Partial<FlexBoxProps>;\n extraHeaderProps?: Partial<FlexBoxProps>;\n extraFooterProps?: Partial<FlexBoxProps>;\n extraFooterDividerProps?: Partial<DividerProps>;\n}\n\nconst DrawerContent = React.forwardRef(\n (\n {\n isOpen,\n title,\n children,\n footer,\n big,\n onClose,\n backgroundColor,\n setTransitionsEnabled = () => 0,\n onBack,\n extraContainerProps,\n extraHeaderProps,\n extraFooterProps,\n extraFooterDividerProps,\n ignoreBackdropClick = false,\n hideNavigation = true,\n direction = Direction.Left,\n }: DrawerProps,\n ref?: React.ForwardedRef<HTMLDivElement>,\n ) => {\n const disableChildAnimations = useCallback(\n () => setTransitionsEnabled(false),\n [setTransitionsEnabled],\n );\n const enableChildAnimations = useCallback(\n () => setTransitionsEnabled(true),\n [setTransitionsEnabled],\n );\n\n const handleBackdropClick = useCallback(() => {\n if (!ignoreBackdropClick) {\n onClose();\n }\n }, [onClose, ignoreBackdropClick]);\n\n const stopClickPropagation = useCallback((e: React.MouseEvent) => {\n e.stopPropagation();\n }, []);\n\n return (\n <TransitionInOut\n in={isOpen}\n appear\n mountOnEnter\n unmountOnExit\n onEntering={disableChildAnimations}\n onEntered={enableChildAnimations}\n onExiting={disableChildAnimations}\n >\n <Overlay direction={direction} onClick={handleBackdropClick} ref={ref}>\n <TransitionSlide\n in={isOpen}\n direction={direction}\n fixed\n reverseExit\n appear\n mountOnEnter\n unmountOnExit\n >\n <Wrapper\n big={big}\n onClick={stopClickPropagation}\n backgroundColor={backgroundColor ?? \"background.main\"}\n >\n <Container>\n <FlexBox\n justifyContent=\"space-between\"\n alignItems=\"center\"\n p={12}\n pb={10}\n {...extraHeaderProps}\n >\n {!hideNavigation && (\n <>\n {onBack != null ? (\n <Button onClick={onBack}>\n <ArrowLeft size={21} />\n </Button>\n ) : (\n <ButtonPlaceholder />\n )}\n </>\n )}\n {(\n <Text variant={\"h3\"} flex={1} textAlign=\"center\">\n {title}\n </Text>\n ) || <div />}\n <FlexBox alignSelf=\"flex-start\">\n <Button onClick={onClose}>\n <Close />\n </Button>\n </FlexBox>\n </FlexBox>\n <ScrollWrapper\n flexDirection=\"column\"\n alignItems=\"stretch\"\n overflow=\"scroll\"\n position=\"relative\"\n p={12}\n pt={0}\n flex={1}\n {...extraContainerProps}\n >\n {children}\n </ScrollWrapper>\n {footer && (\n <>\n <Divider variant=\"light\" {...extraFooterDividerProps} />\n <FlexBox alignItems=\"center\" py={8} px={12} {...extraFooterProps}>\n {footer}\n </FlexBox>\n </>\n )}\n </Container>\n </Wrapper>\n </TransitionSlide>\n </Overlay>\n </TransitionInOut>\n );\n },\n);\n\nconst Drawer = (\n { children, menuPortalTarget, ...sideProps }: DrawerProps,\n ref?: React.ForwardedRef<HTMLDivElement>,\n): React.ReactElement => {\n const $root = React.useMemo(\n () =>\n menuPortalTarget === undefined && typeof document !== undefined\n ? document.querySelector(\"body\")\n : menuPortalTarget,\n [menuPortalTarget],\n );\n if (!$root) {\n return (\n <DrawerContent ref={ref} {...sideProps}>\n {children}\n </DrawerContent>\n );\n } else {\n return ReactDOM.createPortal(\n <DrawerContent ref={ref} {...sideProps}>\n {children}\n </DrawerContent>,\n $root,\n );\n }\n};\n\nexport default React.forwardRef(Drawer);\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -48,7 +48,7 @@ const Wrapper = (0, import_styled_components.default)(import_Flex.default).attrs
|
|
|
48
48
|
zIndex: p.theme.zIndexes[8],
|
|
49
49
|
p: p.p !== void 0 ? p.p : p.theme.space[10],
|
|
50
50
|
rowGap: 6,
|
|
51
|
-
backgroundColor:
|
|
51
|
+
backgroundColor: "background.main"
|
|
52
52
|
}))``;
|
|
53
53
|
const Overlay = (0, import_styled_components.default)(import_Flex.default).attrs((p) => ({
|
|
54
54
|
justifyContent: "center",
|
|
@@ -59,7 +59,7 @@ const Overlay = (0, import_styled_components.default)(import_Flex.default).attrs
|
|
|
59
59
|
position: "fixed",
|
|
60
60
|
top: 0,
|
|
61
61
|
left: 0,
|
|
62
|
-
backgroundColor:
|
|
62
|
+
backgroundColor: "constant.overlay"
|
|
63
63
|
}))``;
|
|
64
64
|
const Header = import_styled.default.section`
|
|
65
65
|
display: grid;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/layout/Popin/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport styled from \"styled-components\";\nimport CloseIcon from \"@ledgerhq/icons-ui/react/CloseRegular\";\nimport ArrowLeftIcon from \"@ledgerhq/icons-ui/react/ArrowLeftRegular\";\n\nimport baseStyled, { BaseStyledProps } from \"../../styled\";\nimport Flex from \"../../layout/Flex\";\nimport type { FlexBoxProps } from \"../../layout/Flex\";\nimport Button from \"../../cta/Button\";\nimport TransitionInOut from \"../../transitions/TransitionInOut\";\nimport TransitionScale from \"../../transitions/TransitionScale\";\n\nexport interface PopinProps extends BaseStyledProps {\n isOpen: boolean;\n children: React.ReactNode;\n menuPortalTarget?: Element | null;\n}\n\nexport type PopinHeaderProps = BaseStyledProps & {\n onClose?: () => void;\n onBack?: () => void;\n children: React.ReactNode;\n};\n\nconst ICON_SIZE = 20;\n\nconst Wrapper = styled(Flex).attrs<FlexBoxProps>((p) => ({\n flexDirection: \"column\",\n alignItems: \"stretch\",\n justifyContent: \"space-between\",\n height: p.height || `${p.theme.sizes.drawer.popin.max.height}px`,\n width: p.width || `${p.theme.sizes.drawer.popin.max.width}px`,\n minHeight: `${p.theme.sizes.drawer.popin.min.height}px`,\n minWidth: `${p.theme.sizes.drawer.popin.min.width}px`,\n maxHeight: `${p.theme.sizes.drawer.popin.max.height}px`,\n maxWidth: `${p.theme.sizes.drawer.popin.max.width}px`,\n zIndex: p.theme.zIndexes[8],\n p: p.p !== undefined ? p.p : p.theme.space[10],\n rowGap: 6,\n backgroundColor:
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,uBAAqB;AACrB,+BAAmB;AACnB,0BAAsB;AACtB,8BAA0B;AAE1B,oBAA4C;AAC5C,kBAAiB;AAEjB,oBAAmB;AACnB,6BAA4B;AAC5B,6BAA4B;AAc5B,MAAM,YAAY;AAElB,MAAM,UAAU,sCAAO,qBAAM,MAAoB,CAAC,MAAO;AAAA,EACvD,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,QAAQ,EAAE,UAAU,GAAG,EAAE,MAAM,MAAM,OAAO,MAAM,IAAI;AAAA,EACtD,OAAO,EAAE,SAAS,GAAG,EAAE,MAAM,MAAM,OAAO,MAAM,IAAI;AAAA,EACpD,WAAW,GAAG,EAAE,MAAM,MAAM,OAAO,MAAM,IAAI;AAAA,EAC7C,UAAU,GAAG,EAAE,MAAM,MAAM,OAAO,MAAM,IAAI;AAAA,EAC5C,WAAW,GAAG,EAAE,MAAM,MAAM,OAAO,MAAM,IAAI;AAAA,EAC7C,UAAU,GAAG,EAAE,MAAM,MAAM,OAAO,MAAM,IAAI;AAAA,EAC5C,QAAQ,EAAE,MAAM,SAAS;AAAA,EACzB,GAAG,EAAE,MAAM,SAAY,EAAE,IAAI,EAAE,MAAM,MAAM;AAAA,EAC3C,QAAQ;AAAA,EACR,iBAAiB
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport styled from \"styled-components\";\nimport CloseIcon from \"@ledgerhq/icons-ui/react/CloseRegular\";\nimport ArrowLeftIcon from \"@ledgerhq/icons-ui/react/ArrowLeftRegular\";\n\nimport baseStyled, { BaseStyledProps } from \"../../styled\";\nimport Flex from \"../../layout/Flex\";\nimport type { FlexBoxProps } from \"../../layout/Flex\";\nimport Button from \"../../cta/Button\";\nimport TransitionInOut from \"../../transitions/TransitionInOut\";\nimport TransitionScale from \"../../transitions/TransitionScale\";\n\nexport interface PopinProps extends BaseStyledProps {\n isOpen: boolean;\n children: React.ReactNode;\n menuPortalTarget?: Element | null;\n}\n\nexport type PopinHeaderProps = BaseStyledProps & {\n onClose?: () => void;\n onBack?: () => void;\n children: React.ReactNode;\n};\n\nconst ICON_SIZE = 20;\n\nconst Wrapper = styled(Flex).attrs<FlexBoxProps>((p) => ({\n flexDirection: \"column\",\n alignItems: \"stretch\",\n justifyContent: \"space-between\",\n height: p.height || `${p.theme.sizes.drawer.popin.max.height}px`,\n width: p.width || `${p.theme.sizes.drawer.popin.max.width}px`,\n minHeight: `${p.theme.sizes.drawer.popin.min.height}px`,\n minWidth: `${p.theme.sizes.drawer.popin.min.width}px`,\n maxHeight: `${p.theme.sizes.drawer.popin.max.height}px`,\n maxWidth: `${p.theme.sizes.drawer.popin.max.width}px`,\n zIndex: p.theme.zIndexes[8],\n p: p.p !== undefined ? p.p : p.theme.space[10],\n rowGap: 6,\n backgroundColor: \"background.main\",\n}))``;\n\nconst Overlay = styled(Flex).attrs((p) => ({\n justifyContent: \"center\",\n alignItems: \"center\",\n width: \"100vw\",\n height: \"100vh\",\n zIndex: p.theme.zIndexes[8],\n position: \"fixed\",\n top: 0,\n left: 0,\n backgroundColor: \"constant.overlay\",\n}))``;\n\nconst Header = baseStyled.section`\n display: grid;\n grid-template-columns: [icon] ${ICON_SIZE}px [title] 1fr [icon] ${ICON_SIZE}px;\n column-gap: 12px;\n`;\n\nconst HeaderTitleContainer = styled(Flex).attrs(() => ({\n justifyContent: \"center\",\n}))``;\n\nconst PopinBody = baseStyled(Flex).attrs({\n as: \"section\",\n flexDirection: \"column\",\n flex: 1,\n overflow: \"auto\",\n})``;\n\nconst PopinFooter = baseStyled(Flex).attrs({ as: \"section\" })``;\n\nconst IconContainer = styled(Button.Unstyled)`\n display: flex;\n align-items: center;\n`;\n\nconst PopinHeader = ({ children, onClose, onBack, ...props }: PopinHeaderProps) => (\n <Header {...props}>\n <Flex>\n {onBack ? (\n <IconContainer onClick={onBack}>\n <ArrowLeftIcon size={ICON_SIZE} color=\"neutral.c100\" />\n </IconContainer>\n ) : null}\n </Flex>\n <HeaderTitleContainer>{children}</HeaderTitleContainer>\n <Flex>\n {onClose ? (\n <IconContainer onClick={onClose}>\n <CloseIcon size={ICON_SIZE} color=\"neutral.c100\" />\n </IconContainer>\n ) : null}\n </Flex>\n </Header>\n);\n\nconst Popin = ({ isOpen, children, width, height, ...props }: PopinProps) => (\n <TransitionInOut in={isOpen} appear mountOnEnter unmountOnExit>\n <Overlay>\n <TransitionScale in={isOpen} appear>\n <Wrapper width={width} height={height} {...props}>\n {children}\n </Wrapper>\n </TransitionScale>\n </Overlay>\n </TransitionInOut>\n);\n\nconst PopinWrapper = ({\n children,\n menuPortalTarget,\n ...popinProps\n}: PopinProps): React.ReactElement => {\n const $root = React.useMemo(\n () =>\n menuPortalTarget === undefined && typeof document !== undefined\n ? document.querySelector(\"body\")\n : menuPortalTarget,\n [menuPortalTarget],\n );\n if (!$root) {\n return <Popin {...popinProps}>{children}</Popin>;\n } else {\n return ReactDOM.createPortal(<Popin {...popinProps}>{children}</Popin>, $root);\n }\n};\n\nPopinWrapper.Header = PopinHeader;\nPopinWrapper.Body = PopinBody;\nPopinWrapper.Footer = PopinFooter;\n\nexport default PopinWrapper;\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,uBAAqB;AACrB,+BAAmB;AACnB,0BAAsB;AACtB,8BAA0B;AAE1B,oBAA4C;AAC5C,kBAAiB;AAEjB,oBAAmB;AACnB,6BAA4B;AAC5B,6BAA4B;AAc5B,MAAM,YAAY;AAElB,MAAM,UAAU,sCAAO,qBAAM,MAAoB,CAAC,MAAO;AAAA,EACvD,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,QAAQ,EAAE,UAAU,GAAG,EAAE,MAAM,MAAM,OAAO,MAAM,IAAI;AAAA,EACtD,OAAO,EAAE,SAAS,GAAG,EAAE,MAAM,MAAM,OAAO,MAAM,IAAI;AAAA,EACpD,WAAW,GAAG,EAAE,MAAM,MAAM,OAAO,MAAM,IAAI;AAAA,EAC7C,UAAU,GAAG,EAAE,MAAM,MAAM,OAAO,MAAM,IAAI;AAAA,EAC5C,WAAW,GAAG,EAAE,MAAM,MAAM,OAAO,MAAM,IAAI;AAAA,EAC7C,UAAU,GAAG,EAAE,MAAM,MAAM,OAAO,MAAM,IAAI;AAAA,EAC5C,QAAQ,EAAE,MAAM,SAAS;AAAA,EACzB,GAAG,EAAE,MAAM,SAAY,EAAE,IAAI,EAAE,MAAM,MAAM;AAAA,EAC3C,QAAQ;AAAA,EACR,iBAAiB;AAAA;AAGnB,MAAM,UAAU,sCAAO,qBAAM,MAAM,CAAC,MAAO;AAAA,EACzC,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ,EAAE,MAAM,SAAS;AAAA,EACzB,UAAU;AAAA,EACV,KAAK;AAAA,EACL,MAAM;AAAA,EACN,iBAAiB;AAAA;AAGnB,MAAM,SAAS,sBAAW;AAAA;AAAA,kCAEQ,kCAAkC;AAAA;AAAA;AAIpE,MAAM,uBAAuB,sCAAO,qBAAM,MAAM,MAAO;AAAA,EACrD,gBAAgB;AAAA;AAGlB,MAAM,YAAY,2BAAW,qBAAM,MAAM;AAAA,EACvC,IAAI;AAAA,EACJ,eAAe;AAAA,EACf,MAAM;AAAA,EACN,UAAU;AAAA;AAGZ,MAAM,cAAc,2BAAW,qBAAM,MAAM,EAAE,IAAI;AAEjD,MAAM,gBAAgB,sCAAO,sBAAO;AAAA;AAAA;AAAA;AAKpC,MAAM,cAAc,CAAC,EAAE,UAAU,SAAS,WAAW,YACnD,mDAAC,QAAD;AAAA,KAAY;AAAA,GACV,mDAAC,qBAAD,MACG,SACC,mDAAC,eAAD;AAAA,EAAe,SAAS;AAAA,GACtB,mDAAC,iCAAD;AAAA,EAAe,MAAM;AAAA,EAAW,OAAM;AAAA,MAEtC,OAEN,mDAAC,sBAAD,MAAuB,WACvB,mDAAC,qBAAD,MACG,UACC,mDAAC,eAAD;AAAA,EAAe,SAAS;AAAA,GACtB,mDAAC,6BAAD;AAAA,EAAW,MAAM;AAAA,EAAW,OAAM;AAAA,MAElC;AAKV,MAAM,QAAQ,CAAC,EAAE,QAAQ,UAAU,OAAO,WAAW,YACnD,mDAAC,gCAAD;AAAA,EAAiB,IAAI;AAAA,EAAQ,QAAM;AAAA,EAAC,cAAY;AAAA,EAAC,eAAa;AAAA,GAC5D,mDAAC,SAAD,MACE,mDAAC,gCAAD;AAAA,EAAiB,IAAI;AAAA,EAAQ,QAAM;AAAA,GACjC,mDAAC,SAAD;AAAA,EAAS;AAAA,EAAc;AAAA,KAAoB;AAAA,GACxC;AAOX,MAAM,eAAe,CAAC;AAAA,EACpB;AAAA,EACA;AAAA,KACG;AAAA,MACiC;AACpC,QAAM,QAAQ,qBAAM,QAClB,MACE,qBAAqB,UAAa,OAAO,aAAa,SAClD,SAAS,cAAc,UACvB,kBACN,CAAC;AAEH,MAAI,CAAC,OAAO;AACV,WAAO,mDAAC,OAAD;AAAA,SAAW;AAAA,OAAa;AAAA,SAC1B;AACL,WAAO,yBAAS,aAAa,mDAAC,OAAD;AAAA,SAAW;AAAA,OAAa,WAAmB;AAAA;AAAA;AAI5E,aAAa,SAAS;AACtB,aAAa,OAAO;AACpB,aAAa,SAAS;AAEtB,IAAO,gBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/lib/cjs/index.js
CHANGED
|
@@ -23,6 +23,7 @@ var __toModule = (module2) => {
|
|
|
23
23
|
};
|
|
24
24
|
__export(exports, {
|
|
25
25
|
InvertTheme: () => import_styles.InvertTheme,
|
|
26
|
+
InvertThemeV3: () => import_styles.InvertThemeV3,
|
|
26
27
|
StyleProvider: () => import_styles.StyleProvider
|
|
27
28
|
});
|
|
28
29
|
__reExport(exports, __toModule(require("./components")));
|
package/lib/cjs/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/index.ts"],
|
|
4
|
-
"sourcesContent": ["export * from \"./components\";\nexport * from \"./assets\";\nexport { StyleProvider, InvertTheme } from \"./styles\";\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAc;AACd,oBAAc;AACd,
|
|
4
|
+
"sourcesContent": ["export * from \"./components\";\nexport * from \"./assets\";\nexport { StyleProvider, InvertTheme, InvertThemeV3 } from \"./styles\";\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAc;AACd,oBAAc;AACd,oBAA0D;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -22,12 +22,14 @@ var __toModule = (module2) => {
|
|
|
22
22
|
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
23
23
|
};
|
|
24
24
|
__export(exports, {
|
|
25
|
-
InvertTheme: () => InvertTheme
|
|
25
|
+
InvertTheme: () => InvertTheme,
|
|
26
|
+
InvertThemeV3: () => InvertThemeV3
|
|
26
27
|
});
|
|
27
28
|
var import_react = __toModule(require("react"));
|
|
28
29
|
var import_styled_components = __toModule(require("styled-components"));
|
|
29
30
|
var import__ = __toModule(require("."));
|
|
30
31
|
var import_ui_shared = __toModule(require("@ledgerhq/ui-shared"));
|
|
32
|
+
var import_theme = __toModule(require("./theme"));
|
|
31
33
|
const InvertTheme = ({
|
|
32
34
|
if: condition,
|
|
33
35
|
children
|
|
@@ -43,4 +45,21 @@ const InvertTheme = ({
|
|
|
43
45
|
theme: condition ? newTheme : theme
|
|
44
46
|
}, children);
|
|
45
47
|
};
|
|
48
|
+
const InvertThemeV3 = ({ children }) => {
|
|
49
|
+
const theme = (0, import_styled_components.useTheme)();
|
|
50
|
+
const v3RevertTheme = theme.theme === "light" ? "dark" : "light";
|
|
51
|
+
const newTheme = (0, import_react.useMemo)(() => ({
|
|
52
|
+
...import__.defaultTheme,
|
|
53
|
+
...import_theme.default,
|
|
54
|
+
colors: {
|
|
55
|
+
...import__.defaultTheme.colors,
|
|
56
|
+
...import_ui_shared.palettes[v3RevertTheme],
|
|
57
|
+
palette: import_ui_shared.palettes[v3RevertTheme]
|
|
58
|
+
},
|
|
59
|
+
theme: v3RevertTheme
|
|
60
|
+
}), [v3RevertTheme]);
|
|
61
|
+
return /* @__PURE__ */ import_react.default.createElement(import_styled_components.ThemeProvider, {
|
|
62
|
+
theme: newTheme
|
|
63
|
+
}, children);
|
|
64
|
+
};
|
|
46
65
|
//# sourceMappingURL=InvertTheme.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/styles/InvertTheme.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useMemo } from \"react\";\nimport { ThemeProvider, useTheme } from \"styled-components\";\nimport { defaultTheme } from \".\";\nimport { palettes } from \"@ledgerhq/ui-shared\";\nimport { Theme } from \"./theme\";\n\nexport type Props = {\n if?: boolean;\n};\n\nexport const InvertTheme = ({\n if: condition,\n children,\n}: React.PropsWithChildren<Props>): React.ReactElement => {\n const theme = useTheme();\n const revertTheme = theme.theme === \"light\" ? \"dark\" : \"light\";\n const newTheme: Theme = useMemo(\n () => ({\n ...defaultTheme,\n colors: { ...palettes[revertTheme], palette: palettes[revertTheme] },\n theme: revertTheme,\n }),\n [revertTheme],\n );\n\n return <ThemeProvider theme={condition ? newTheme : theme}>{children}</ThemeProvider>;\n};\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,mBAA+B;AAC/B,+BAAwC;AACxC,eAA6B;AAC7B,uBAAyB;
|
|
4
|
+
"sourcesContent": ["import React, { useMemo } from \"react\";\nimport { ThemeProvider, useTheme } from \"styled-components\";\nimport { defaultTheme } from \".\";\nimport { palettes } from \"@ledgerhq/ui-shared\";\nimport V3dDfaultTheme, { Theme } from \"./theme\";\n\nexport type Props = {\n if?: boolean;\n};\n\nexport const InvertTheme = ({\n if: condition,\n children,\n}: React.PropsWithChildren<Props>): React.ReactElement => {\n const theme = useTheme();\n const revertTheme = theme.theme === \"light\" ? \"dark\" : \"light\";\n const newTheme: Theme = useMemo(\n () => ({\n ...defaultTheme,\n colors: { ...palettes[revertTheme], palette: palettes[revertTheme] },\n theme: revertTheme,\n }),\n [revertTheme],\n );\n\n return <ThemeProvider theme={condition ? newTheme : theme}>{children}</ThemeProvider>;\n};\n\nexport const InvertThemeV3 = ({ children }: any): React.ReactElement => {\n const theme = useTheme();\n\n const v3RevertTheme = theme.theme === \"light\" ? \"dark\" : \"light\";\n const newTheme: Theme = useMemo(\n () => ({\n ...defaultTheme,\n ...V3dDfaultTheme,\n colors: {\n ...defaultTheme.colors,\n ...palettes[v3RevertTheme],\n palette: palettes[v3RevertTheme],\n },\n theme: v3RevertTheme,\n }),\n [v3RevertTheme],\n );\n return <ThemeProvider theme={newTheme}>{children}</ThemeProvider>;\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA+B;AAC/B,+BAAwC;AACxC,eAA6B;AAC7B,uBAAyB;AACzB,mBAAsC;AAM/B,MAAM,cAAc,CAAC;AAAA,EAC1B,IAAI;AAAA,EACJ;AAAA,MACwD;AACxD,QAAM,QAAQ;AACd,QAAM,cAAc,MAAM,UAAU,UAAU,SAAS;AACvD,QAAM,WAAkB,0BACtB,MAAO;AAAA,OACF;AAAA,IACH,QAAQ,KAAK,0BAAS,cAAc,SAAS,0BAAS;AAAA,IACtD,OAAO;AAAA,MAET,CAAC;AAGH,SAAO,mDAAC,wCAAD;AAAA,IAAe,OAAO,YAAY,WAAW;AAAA,KAAQ;AAAA;AAGvD,MAAM,gBAAgB,CAAC,EAAE,eAAwC;AACtE,QAAM,QAAQ;AAEd,QAAM,gBAAgB,MAAM,UAAU,UAAU,SAAS;AACzD,QAAM,WAAkB,0BACtB,MAAO;AAAA,OACF;AAAA,OACA;AAAA,IACH,QAAQ;AAAA,SACH,sBAAa;AAAA,SACb,0BAAS;AAAA,MACZ,SAAS,0BAAS;AAAA;AAAA,IAEpB,OAAO;AAAA,MAET,CAAC;AAEH,SAAO,mDAAC,wCAAD;AAAA,IAAe,OAAO;AAAA,KAAW;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/lib/cjs/styles/index.js
CHANGED
|
@@ -23,6 +23,7 @@ var __toModule = (module2) => {
|
|
|
23
23
|
};
|
|
24
24
|
__export(exports, {
|
|
25
25
|
InvertTheme: () => import_InvertTheme.InvertTheme,
|
|
26
|
+
InvertThemeV3: () => import_InvertTheme.InvertThemeV3,
|
|
26
27
|
defaultTheme: () => import_theme.default,
|
|
27
28
|
palettes: () => import_ui_shared.palettes
|
|
28
29
|
});
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/styles/index.ts"],
|
|
4
|
-
"sourcesContent": ["export { default as defaultTheme } from \"./theme\";\nexport * from \"./helpers\";\nexport * from \"./global\";\nexport * from \"./StyleProvider\";\nexport { InvertTheme } from \"./InvertTheme\";\nexport type { ThemeNames, ColorPalette } from \"@ledgerhq/ui-shared\";\nexport { palettes } from \"@ledgerhq/ui-shared\";\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAwC;AACxC,oBAAc;AACd,oBAAc;AACd,oBAAc;AACd,
|
|
4
|
+
"sourcesContent": ["export { default as defaultTheme } from \"./theme\";\nexport * from \"./helpers\";\nexport * from \"./global\";\nexport * from \"./StyleProvider\";\nexport { InvertTheme, InvertThemeV3 } from \"./InvertTheme\";\nexport type { ThemeNames, ColorPalette } from \"@ledgerhq/ui-shared\";\nexport { palettes } from \"@ledgerhq/ui-shared\";\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAwC;AACxC,oBAAc;AACd,oBAAc;AACd,oBAAc;AACd,yBAA2C;AAE3C,uBAAyB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -76,7 +76,7 @@ const DrawerContent = React.forwardRef(({ isOpen, title, children, footer, big,
|
|
|
76
76
|
return (React.createElement(TransitionInOut, { in: isOpen, appear: true, mountOnEnter: true, unmountOnExit: true, onEntering: disableChildAnimations, onEntered: enableChildAnimations, onExiting: disableChildAnimations },
|
|
77
77
|
React.createElement(Overlay, { direction: direction, onClick: handleBackdropClick, ref: ref },
|
|
78
78
|
React.createElement(TransitionSlide, { in: isOpen, direction: direction, fixed: true, reverseExit: true, appear: true, mountOnEnter: true, unmountOnExit: true },
|
|
79
|
-
React.createElement(Wrapper, { big: big, onClick: stopClickPropagation, backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : "
|
|
79
|
+
React.createElement(Wrapper, { big: big, onClick: stopClickPropagation, backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : "background.main" },
|
|
80
80
|
React.createElement(Container, null,
|
|
81
81
|
React.createElement(FlexBox, Object.assign({ justifyContent: "space-between", alignItems: "center", p: 12, pb: 10 }, extraHeaderProps),
|
|
82
82
|
!hideNavigation && (React.createElement(React.Fragment, null, onBack != null ? (React.createElement(Button, { onClick: onBack },
|
|
@@ -33,7 +33,7 @@ const Wrapper = styled(Flex).attrs((p) => ({
|
|
|
33
33
|
zIndex: p.theme.zIndexes[8],
|
|
34
34
|
p: p.p !== undefined ? p.p : p.theme.space[10],
|
|
35
35
|
rowGap: 6,
|
|
36
|
-
backgroundColor:
|
|
36
|
+
backgroundColor: "background.main",
|
|
37
37
|
})) ``;
|
|
38
38
|
const Overlay = styled(Flex).attrs((p) => ({
|
|
39
39
|
justifyContent: "center",
|
|
@@ -44,7 +44,7 @@ const Overlay = styled(Flex).attrs((p) => ({
|
|
|
44
44
|
position: "fixed",
|
|
45
45
|
top: 0,
|
|
46
46
|
left: 0,
|
|
47
|
-
backgroundColor:
|
|
47
|
+
backgroundColor: "constant.overlay",
|
|
48
48
|
})) ``;
|
|
49
49
|
const Header = baseStyled.section `
|
|
50
50
|
display: grid;
|
package/lib/index.d.ts
CHANGED
package/lib/index.js
CHANGED
|
@@ -2,9 +2,16 @@ 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
|
+
import V3dDfaultTheme from "./theme";
|
|
5
6
|
export const InvertTheme = ({ if: condition, children, }) => {
|
|
6
7
|
const theme = useTheme();
|
|
7
8
|
const revertTheme = theme.theme === "light" ? "dark" : "light";
|
|
8
9
|
const newTheme = useMemo(() => (Object.assign(Object.assign({}, defaultTheme), { colors: Object.assign(Object.assign({}, palettes[revertTheme]), { palette: palettes[revertTheme] }), theme: revertTheme })), [revertTheme]);
|
|
9
10
|
return React.createElement(ThemeProvider, { theme: condition ? newTheme : theme }, children);
|
|
10
11
|
};
|
|
12
|
+
export const InvertThemeV3 = ({ children }) => {
|
|
13
|
+
const theme = useTheme();
|
|
14
|
+
const v3RevertTheme = theme.theme === "light" ? "dark" : "light";
|
|
15
|
+
const newTheme = useMemo(() => (Object.assign(Object.assign(Object.assign({}, defaultTheme), V3dDfaultTheme), { colors: Object.assign(Object.assign(Object.assign({}, defaultTheme.colors), palettes[v3RevertTheme]), { palette: palettes[v3RevertTheme] }), theme: v3RevertTheme })), [v3RevertTheme]);
|
|
16
|
+
return React.createElement(ThemeProvider, { theme: newTheme }, children);
|
|
17
|
+
};
|
package/lib/styles/index.d.ts
CHANGED
|
@@ -2,6 +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
|
+
export { InvertTheme, InvertThemeV3 } from "./InvertTheme";
|
|
6
6
|
export type { ThemeNames, ColorPalette } from "@ledgerhq/ui-shared";
|
|
7
7
|
export { palettes } from "@ledgerhq/ui-shared";
|
package/lib/styles/index.js
CHANGED
|
@@ -2,5 +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
|
+
export { InvertTheme, InvertThemeV3 } from "./InvertTheme";
|
|
6
6
|
export { palettes } from "@ledgerhq/ui-shared";
|
package/package.json
CHANGED
|
@@ -1,9 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ledgerhq/react-ui",
|
|
3
|
-
"version": "0.8.0",
|
|
3
|
+
"version": "0.8.1-next.0",
|
|
4
4
|
"description": "Ledger Live - Desktop UI",
|
|
5
5
|
"author": "Ledger Live Team <team-live@ledger.fr>",
|
|
6
|
-
"repository":
|
|
6
|
+
"repository": {
|
|
7
|
+
"type": "git",
|
|
8
|
+
"url": "https://github.com/LedgerHQ/ledger-live.git"
|
|
9
|
+
},
|
|
10
|
+
"bugs": {
|
|
11
|
+
"url": "https://github.com/LedgerHQ/ledger-live/issues"
|
|
12
|
+
},
|
|
13
|
+
"homepage": "https://github.com/LedgerHQ/ledger-live/tree/develop/libs/ui/packages/react",
|
|
7
14
|
"license": "MIT",
|
|
8
15
|
"types": "index.d.ts",
|
|
9
16
|
"typesVersions": {
|
|
@@ -15,14 +22,30 @@
|
|
|
15
22
|
}
|
|
16
23
|
},
|
|
17
24
|
"exports": {
|
|
18
|
-
".": {
|
|
19
|
-
"require": "./lib/cjs/index.js",
|
|
20
|
-
"default": "./lib/index.js"
|
|
21
|
-
},
|
|
22
25
|
"./": {
|
|
23
26
|
"require": "./lib/cjs/",
|
|
24
27
|
"default": "./lib/"
|
|
25
28
|
},
|
|
29
|
+
"./*/": {
|
|
30
|
+
"require": "./lib/cjs/*/index.js",
|
|
31
|
+
"default": "./lib/*/index.js"
|
|
32
|
+
},
|
|
33
|
+
"./*": {
|
|
34
|
+
"require": "./lib/cjs/*.js",
|
|
35
|
+
"default": "./lib/*.js"
|
|
36
|
+
},
|
|
37
|
+
"./*.js": {
|
|
38
|
+
"require": "./lib/cjs/*.js",
|
|
39
|
+
"default": "./lib/*.js"
|
|
40
|
+
},
|
|
41
|
+
"./*.woff2": {
|
|
42
|
+
"require": "./lib/cjs/*.woff2",
|
|
43
|
+
"default": "./lib/*.woff2"
|
|
44
|
+
},
|
|
45
|
+
".": {
|
|
46
|
+
"require": "./lib/cjs/index.js",
|
|
47
|
+
"default": "./lib/index.js"
|
|
48
|
+
},
|
|
26
49
|
"./package.json": "./package.json"
|
|
27
50
|
},
|
|
28
51
|
"sideEffects": [
|
|
@@ -34,7 +57,7 @@
|
|
|
34
57
|
],
|
|
35
58
|
"dependencies": {
|
|
36
59
|
"@floating-ui/react-dom": "^0.4.0",
|
|
37
|
-
"@ledgerhq/icons-ui": "^0.2.
|
|
60
|
+
"@ledgerhq/icons-ui": "^0.2.7-next.0",
|
|
38
61
|
"@ledgerhq/ui-shared": "^0.1.9",
|
|
39
62
|
"@tippyjs/react": "^4.2.6",
|
|
40
63
|
"@types/color": "^3.0.2",
|