@ledgerhq/react-ui 0.34.0-nightly.2 → 0.34.0-nightly.3
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/tabs/Chip/Chip.stories.js +1 -1
- package/lib/cjs/components/tabs/Chip/Chip.stories.js.map +2 -2
- package/lib/cjs/components/tabs/Chip/index.js +13 -4
- package/lib/cjs/components/tabs/Chip/index.js.map +2 -2
- package/lib/components/tabs/Chip/index.d.ts.map +1 -1
- package/lib/components/tabs/Chip/index.js +13 -4
- package/lib/components/tabs/Chip/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -47,7 +47,7 @@ var Chip_stories_default = {
|
|
|
47
47
|
const navItems = ["One", "Two", "Three", "Four", "Five"];
|
|
48
48
|
function Sample({ children, ...args }) {
|
|
49
49
|
const [activeIndex, setActiveIndex] = (0, import_react.useState)(args.initialActiveIndex);
|
|
50
|
-
return /* @__PURE__ */ import_react.default.createElement("div", { style: { marginBottom: "10px" } }, /* @__PURE__ */ import_react.default.createElement("div", { style: { width: "100%" } }, /* @__PURE__ */ import_react.default.createElement(import_index.default, { ...args, onTabChange: setActiveIndex }, children)), /* @__PURE__ */ import_react.default.createElement(import_Text.default, { variant: "subtitle" }, "Active index: ", activeIndex)
|
|
50
|
+
return /* @__PURE__ */ import_react.default.createElement("div", { style: { marginBottom: "10px", padding: "5px" } }, /* @__PURE__ */ import_react.default.createElement("div", { style: { width: "100%" } }, /* @__PURE__ */ import_react.default.createElement(import_index.default, { ...args, onTabChange: setActiveIndex }, children)), /* @__PURE__ */ import_react.default.createElement(import_Text.default, { color: "neutral.c100", variant: "subtitle" }, "Active index: ", activeIndex));
|
|
51
51
|
}
|
|
52
52
|
const Chip = (args) => navItems.reduce((acc, _, index) => {
|
|
53
53
|
const labels = [
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/tabs/Chip/Chip.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useState } from \"react\";\n\nimport ChipTabs, { Props } from \"./index\";\nimport Text from \"../../asorted/Text\";\n\nexport default {\n title: \"Tabs/Chip\",\n component: ChipTabs,\n argTypes: {\n initialActiveIndex: {\n control: { type: \"number\" },\n },\n },\n};\n\nconst navItems = [\"One\", \"Two\", \"Three\", \"Four\", \"Five\"];\n\nfunction Sample({ children, ...args }: Props) {\n const [activeIndex, setActiveIndex] = useState(args.initialActiveIndex);\n return (\n <div style={{ marginBottom: \"10px\" }}>\n <div style={{ width: \"100%\" }}>\n <ChipTabs {...args} onTabChange={setActiveIndex}>\n {children}\n </ChipTabs>\n </div>\n <Text variant=\"subtitle\"
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAEhC,mBAAgC;AAChC,kBAAiB;AAEjB,IAAO,uBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAA;AAAA,EACX,UAAU;AAAA,IACR,oBAAoB;AAAA,MAClB,SAAS,EAAE,MAAM,SAAS;AAAA,IAC5B;AAAA,EACF;AACF;AAEA,MAAM,WAAW,CAAC,OAAO,OAAO,SAAS,QAAQ,MAAM;AAEvD,SAAS,OAAO,EAAE,UAAU,GAAG,KAAK,GAAU;AAC5C,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,KAAK,kBAAkB;AACtE,SACE,6BAAAC,QAAA,cAAC,SAAI,OAAO,EAAE,cAAc,
|
|
4
|
+
"sourcesContent": ["import React, { useState } from \"react\";\n\nimport ChipTabs, { Props } from \"./index\";\nimport Text from \"../../asorted/Text\";\n\nexport default {\n title: \"Tabs/Chip\",\n component: ChipTabs,\n argTypes: {\n initialActiveIndex: {\n control: { type: \"number\" },\n },\n },\n};\n\nconst navItems = [\"One\", \"Two\", \"Three\", \"Four\", \"Five\"];\n\nfunction Sample({ children, ...args }: Props) {\n const [activeIndex, setActiveIndex] = useState(args.initialActiveIndex);\n return (\n <div style={{ marginBottom: \"10px\", padding: \"5px\" }}>\n <div style={{ width: \"100%\" }}>\n <ChipTabs {...args} onTabChange={setActiveIndex}>\n {children}\n </ChipTabs>\n </div>\n <Text color=\"neutral.c100\" variant=\"subtitle\">\n Active index: {activeIndex}\n </Text>\n </div>\n );\n}\n\nexport const Chip = (args: Props): React.ReactNode[] =>\n navItems.reduce<React.ReactNode[]>((acc, _, index) => {\n const labels = [\n navItems.slice(0, index + 1).map(label => (\n <Text color=\"inherit\" variant=\"small\">\n {label}\n </Text>\n )),\n ];\n return [\n ...acc,\n <Sample {...args} key={index}>\n {labels}\n </Sample>,\n ];\n }, []);\n\nChip.args = {\n initialActiveIndex: 1,\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAEhC,mBAAgC;AAChC,kBAAiB;AAEjB,IAAO,uBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAA;AAAA,EACX,UAAU;AAAA,IACR,oBAAoB;AAAA,MAClB,SAAS,EAAE,MAAM,SAAS;AAAA,IAC5B;AAAA,EACF;AACF;AAEA,MAAM,WAAW,CAAC,OAAO,OAAO,SAAS,QAAQ,MAAM;AAEvD,SAAS,OAAO,EAAE,UAAU,GAAG,KAAK,GAAU;AAC5C,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,KAAK,kBAAkB;AACtE,SACE,6BAAAC,QAAA,cAAC,SAAI,OAAO,EAAE,cAAc,QAAQ,SAAS,MAAM,KACjD,6BAAAA,QAAA,cAAC,SAAI,OAAO,EAAE,OAAO,OAAO,KAC1B,6BAAAA,QAAA,cAAC,aAAAD,SAAA,EAAU,GAAG,MAAM,aAAa,kBAC9B,QACH,CACF,GACA,6BAAAC,QAAA,cAAC,YAAAC,SAAA,EAAK,OAAM,gBAAe,SAAQ,cAAW,kBAC7B,WACjB,CACF;AAEJ;AAEO,MAAM,OAAO,CAAC,SACnB,SAAS,OAA0B,CAAC,KAAK,GAAG,UAAU;AACpD,QAAM,SAAS;AAAA,IACb,SAAS,MAAM,GAAG,QAAQ,CAAC,EAAE,IAAI,WAC/B,6BAAAD,QAAA,cAAC,YAAAC,SAAA,EAAK,OAAM,WAAU,SAAQ,WAC3B,KACH,CACD;AAAA,EACH;AACA,SAAO;AAAA,IACL,GAAG;AAAA,IACH,6BAAAD,QAAA,cAAC,UAAQ,GAAG,MAAM,KAAK,SACpB,MACH;AAAA,EACF;AACF,GAAG,CAAC,CAAC;AAEP,KAAK,OAAO;AAAA,EACV,oBAAoB;AACtB;",
|
|
6
6
|
"names": ["ChipTabs", "React", "Text"]
|
|
7
7
|
}
|
|
@@ -34,6 +34,15 @@ module.exports = __toCommonJS(Chip_exports);
|
|
|
34
34
|
var import_react = __toESM(require("react"));
|
|
35
35
|
var import_styled_components = __toESM(require("styled-components"));
|
|
36
36
|
var import_Flex = __toESM(require("../../layout/Flex"));
|
|
37
|
+
const Container = (0, import_styled_components.default)(import_Flex.default).attrs({
|
|
38
|
+
justifyContent: "space-between",
|
|
39
|
+
flex: 1,
|
|
40
|
+
columnGap: 1
|
|
41
|
+
})`
|
|
42
|
+
border: 1px solid ${(p) => p.theme.colors.opacityDefault.c10};
|
|
43
|
+
border-radius: 16px;
|
|
44
|
+
padding: 4px;
|
|
45
|
+
`;
|
|
37
46
|
const Item = (0, import_styled_components.default)(import_Flex.default).attrs({
|
|
38
47
|
flex: 1,
|
|
39
48
|
justifyContent: "center",
|
|
@@ -41,13 +50,13 @@ const Item = (0, import_styled_components.default)(import_Flex.default).attrs({
|
|
|
41
50
|
})`
|
|
42
51
|
cursor: pointer;
|
|
43
52
|
padding: 8px 12px 8px 12px;
|
|
44
|
-
border-radius:
|
|
45
|
-
color: ${(p) => p.theme.colors.neutral.c100};
|
|
46
|
-
background-color: ${(p) => p.active ? p.theme.colors.
|
|
53
|
+
border-radius: 12px;
|
|
54
|
+
color: ${(p) => p.active ? p.theme.colors.neutral.c100 : p.theme.colors.neutral.c50};
|
|
55
|
+
background-color: ${(p) => p.active ? p.theme.colors.opacityDefault.c10 : "unset"};
|
|
47
56
|
`;
|
|
48
57
|
function BarTabs({ children, onTabChange, initialActiveIndex }) {
|
|
49
58
|
const [activeIndex, setActiveIndex] = (0, import_react.useState)(initialActiveIndex);
|
|
50
|
-
return /* @__PURE__ */ import_react.default.createElement(
|
|
59
|
+
return /* @__PURE__ */ import_react.default.createElement(Container, null, import_react.default.Children.toArray(children).map((child, index) => /* @__PURE__ */ import_react.default.createElement(
|
|
51
60
|
Item,
|
|
52
61
|
{
|
|
53
62
|
key: index,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/tabs/Chip/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useState } from \"react\";\nimport styled from \"styled-components\";\nimport Flex from \"../../layout/Flex\";\n\nexport type Props = React.PropsWithChildren<{\n /**\n * An optional callback that will be called when the active tab changes.\n */\n onTabChange?: (activeIndex: number) => void;\n /**\n * The tab index to mark as active when rendering for the first time.\n * If omitted, then initially no tabs will be selected.\n */\n initialActiveIndex?: number;\n}>;\ntype ItemProps = {\n active: boolean;\n};\n\nconst Item = styled(Flex).attrs({\n flex: 1,\n justifyContent: \"center\",\n alignItems: \"center\",\n})<ItemProps>`\n cursor: pointer;\n padding: 8px 12px 8px 12px;\n border-radius:
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAChC,+BAAmB;AACnB,kBAAiB;AAiBjB,MAAM,
|
|
4
|
+
"sourcesContent": ["import React, { useState } from \"react\";\nimport styled from \"styled-components\";\nimport Flex from \"../../layout/Flex\";\n\nexport type Props = React.PropsWithChildren<{\n /**\n * An optional callback that will be called when the active tab changes.\n */\n onTabChange?: (activeIndex: number) => void;\n /**\n * The tab index to mark as active when rendering for the first time.\n * If omitted, then initially no tabs will be selected.\n */\n initialActiveIndex?: number;\n}>;\ntype ItemProps = {\n active: boolean;\n};\n\nconst Container = styled(Flex).attrs({\n justifyContent: \"space-between\",\n flex: 1,\n columnGap: 1,\n})`\n border: 1px solid ${p => p.theme.colors.opacityDefault.c10};\n border-radius: 16px;\n padding: 4px;\n`;\n\nconst Item = styled(Flex).attrs({\n flex: 1,\n justifyContent: \"center\",\n alignItems: \"center\",\n})<ItemProps>`\n cursor: pointer;\n padding: 8px 12px 8px 12px;\n border-radius: 12px;\n color: ${p => (p.active ? p.theme.colors.neutral.c100 : p.theme.colors.neutral.c50)};\n background-color: ${p => (p.active ? p.theme.colors.opacityDefault.c10 : \"unset\")};\n`;\n\nexport default function BarTabs({ children, onTabChange, initialActiveIndex }: Props): JSX.Element {\n const [activeIndex, setActiveIndex] = useState(initialActiveIndex);\n return (\n <Container>\n {React.Children.toArray(children).map((child, index) => (\n <Item\n key={index}\n active={index === activeIndex}\n onClick={() => {\n setActiveIndex(index);\n onTabChange && onTabChange(index);\n }}\n >\n {child}\n </Item>\n ))}\n </Container>\n );\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAChC,+BAAmB;AACnB,kBAAiB;AAiBjB,MAAM,gBAAY,yBAAAA,SAAO,YAAAC,OAAI,EAAE,MAAM;AAAA,EACnC,gBAAgB;AAAA,EAChB,MAAM;AAAA,EACN,WAAW;AACb,CAAC;AAAA,sBACqB,OAAK,EAAE,MAAM,OAAO,eAAe,GAAG;AAAA;AAAA;AAAA;AAK5D,MAAM,WAAO,yBAAAD,SAAO,YAAAC,OAAI,EAAE,MAAM;AAAA,EAC9B,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,YAAY;AACd,CAAC;AAAA;AAAA;AAAA;AAAA,WAIU,OAAM,EAAE,SAAS,EAAE,MAAM,OAAO,QAAQ,OAAO,EAAE,MAAM,OAAO,QAAQ,GAAI;AAAA,sBAC/D,OAAM,EAAE,SAAS,EAAE,MAAM,OAAO,eAAe,MAAM,OAAQ;AAAA;AAGpE,SAAR,QAAyB,EAAE,UAAU,aAAa,mBAAmB,GAAuB;AACjG,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,kBAAkB;AACjE,SACE,6BAAAC,QAAA,cAAC,iBACE,aAAAA,QAAM,SAAS,QAAQ,QAAQ,EAAE,IAAI,CAAC,OAAO,UAC5C,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,QAAQ,UAAU;AAAA,MAClB,SAAS,MAAM;AACb,uBAAe,KAAK;AACpB,uBAAe,YAAY,KAAK;AAAA,MAClC;AAAA;AAAA,IAEC;AAAA,EACH,CACD,CACH;AAEJ;",
|
|
6
6
|
"names": ["styled", "Flex", "React"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/tabs/Chip/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAIxC,MAAM,MAAM,KAAK,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAC1C;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/tabs/Chip/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAIxC,MAAM,MAAM,KAAK,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAC1C;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC,CAAC;AA2BH,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,kBAAkB,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAkBjG"}
|
|
@@ -1,6 +1,15 @@
|
|
|
1
1
|
import React, { useState } from "react";
|
|
2
2
|
import styled from "styled-components";
|
|
3
3
|
import Flex from "../../layout/Flex";
|
|
4
|
+
const Container = styled(Flex).attrs({
|
|
5
|
+
justifyContent: "space-between",
|
|
6
|
+
flex: 1,
|
|
7
|
+
columnGap: 1,
|
|
8
|
+
}) `
|
|
9
|
+
border: 1px solid ${p => p.theme.colors.opacityDefault.c10};
|
|
10
|
+
border-radius: 16px;
|
|
11
|
+
padding: 4px;
|
|
12
|
+
`;
|
|
4
13
|
const Item = styled(Flex).attrs({
|
|
5
14
|
flex: 1,
|
|
6
15
|
justifyContent: "center",
|
|
@@ -8,13 +17,13 @@ const Item = styled(Flex).attrs({
|
|
|
8
17
|
}) `
|
|
9
18
|
cursor: pointer;
|
|
10
19
|
padding: 8px 12px 8px 12px;
|
|
11
|
-
border-radius:
|
|
12
|
-
color: ${p => p.theme.colors.neutral.c100};
|
|
13
|
-
background-color: ${p => (p.active ? p.theme.colors.
|
|
20
|
+
border-radius: 12px;
|
|
21
|
+
color: ${p => (p.active ? p.theme.colors.neutral.c100 : p.theme.colors.neutral.c50)};
|
|
22
|
+
background-color: ${p => (p.active ? p.theme.colors.opacityDefault.c10 : "unset")};
|
|
14
23
|
`;
|
|
15
24
|
export default function BarTabs({ children, onTabChange, initialActiveIndex }) {
|
|
16
25
|
const [activeIndex, setActiveIndex] = useState(initialActiveIndex);
|
|
17
|
-
return (React.createElement(
|
|
26
|
+
return (React.createElement(Container, null, React.Children.toArray(children).map((child, index) => (React.createElement(Item, { key: index, active: index === activeIndex, onClick: () => {
|
|
18
27
|
setActiveIndex(index);
|
|
19
28
|
onTabChange && onTabChange(index);
|
|
20
29
|
} }, child)))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/tabs/Chip/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,IAAI,MAAM,mBAAmB,CAAC;AAiBrC,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC;IAC9B,IAAI,EAAE,CAAC;IACP,cAAc,EAAE,QAAQ;IACxB,UAAU,EAAE,QAAQ;CACrB,CAAC,CAAW
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/tabs/Chip/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,IAAI,MAAM,mBAAmB,CAAC;AAiBrC,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC;IACnC,cAAc,EAAE,eAAe;IAC/B,IAAI,EAAE,CAAC;IACP,SAAS,EAAE,CAAC;CACb,CAAC,CAAA;sBACoB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG;;;CAG3D,CAAC;AAEF,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC;IAC9B,IAAI,EAAE,CAAC;IACP,cAAc,EAAE,QAAQ;IACxB,UAAU,EAAE,QAAQ;CACrB,CAAC,CAAW;;;;WAIF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC;sBAC/D,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC;CAClF,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,kBAAkB,EAAS;IAClF,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,kBAAkB,CAAC,CAAC;IACnE,OAAO,CACL,oBAAC,SAAS,QACP,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CACtD,oBAAC,IAAI,IACH,GAAG,EAAE,KAAK,EACV,MAAM,EAAE,KAAK,KAAK,WAAW,EAC7B,OAAO,EAAE,GAAG,EAAE;YACZ,cAAc,CAAC,KAAK,CAAC,CAAC;YACtB,WAAW,IAAI,WAAW,CAAC,KAAK,CAAC,CAAC;QACpC,CAAC,IAEA,KAAK,CACD,CACR,CAAC,CACQ,CACb,CAAC;AACJ,CAAC"}
|