@ledgerhq/react-ui 0.7.2 → 0.7.5-monorepo.0

package/lib/cjs/components/tabs/Chip/Chip.stories.js

@@ -0,0 +1,72 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  __markAsModule(target);
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && key !== "default")
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toModule = (module2) => {
+  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);
+};
+__export(exports, {
+  Chip: () => Chip,
+  default: () => Chip_stories_default
+});
+var import_react = __toModule(require("react"));
+var import_index = __toModule(require("./index"));
+var import_Text = __toModule(require("../../asorted/Text"));
+var Chip_stories_default = {
+  title: "Tabs/Chip",
+  component: import_index.default,
+  argTypes: {
+    initialActiveIndex: {
+      control: { type: "number" }
+    }
+  }
+};
+const navItems = ["One", "Two", "Three", "Four", "Five"];
+function Sample({ children, ...args }) {
+  const [activeIndex, setActiveIndex] = (0, import_react.useState)(args.initialActiveIndex);
+  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), /* @__PURE__ */ import_react.default.createElement("hr", null));
+}
+const Chip = (args) => navItems.reduce((acc, _, index) => {
+  const labels = [
+    navItems.slice(0, index + 1).map((label) => /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
+      color: "inherit",
+      variant: "small"
+    }, label))
+  ];
+  return [
+    ...acc,
+    /* @__PURE__ */ import_react.default.createElement(Sample, {
+      ...args,
+      key: index
+    }, labels)
+  ];
+}, []);
+Chip.args = {
+  initialActiveIndex: 1
+};
+//# sourceMappingURL=Chip.stories.js.map

package/lib/cjs/components/tabs/Chip/Chip.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/tabs/Chip/Chip.stories.tsx"],
+  "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\">Active index: {activeIndex}</Text>\n      <hr />\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"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAEhC,mBAAgC;AAChC,kBAAiB;AAEjB,IAAO,uBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW;AAAA,EACX,UAAU;AAAA,IACR,oBAAoB;AAAA,MAClB,SAAS,EAAE,MAAM;AAAA;AAAA;AAAA;AAKvB,MAAM,WAAW,CAAC,OAAO,OAAO,SAAS,QAAQ;AAEjD,gBAAgB,EAAE,aAAa,QAAe;AAC5C,QAAM,CAAC,aAAa,kBAAkB,2BAAS,KAAK;AACpD,SACE,mDAAC,OAAD;AAAA,IAAK,OAAO,EAAE,cAAc;AAAA,KAC1B,mDAAC,OAAD;AAAA,IAAK,OAAO,EAAE,OAAO;AAAA,KACnB,mDAAC,sBAAD;AAAA,OAAc;AAAA,IAAM,aAAa;AAAA,KAC9B,YAGL,mDAAC,qBAAD;AAAA,IAAM,SAAQ;AAAA,KAAW,kBAAe,cACxC,mDAAC,MAAD;AAAA;AAKC,MAAM,OAAO,CAAC,SACnB,SAAS,OAA0B,CAAC,KAAK,GAAG,UAAU;AACpD,QAAM,SAAS;AAAA,IACb,SAAS,MAAM,GAAG,QAAQ,GAAG,IAAI,CAAC,UAChC,mDAAC,qBAAD;AAAA,MAAM,OAAM;AAAA,MAAU,SAAQ;AAAA,OAC3B;AAAA;AAIP,SAAO;AAAA,IACL,GAAG;AAAA,IACH,mDAAC,QAAD;AAAA,SAAY;AAAA,MAAM,KAAK;AAAA,OACpB;AAAA;AAAA,GAGJ;AAEL,KAAK,OAAO;AAAA,EACV,oBAAoB;AAAA;",
+  "names": []
+}

package/lib/cjs/components/tabs/Chip/index.js

@@ -0,0 +1,56 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  __markAsModule(target);
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && key !== "default")
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toModule = (module2) => {
+  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);
+};
+__export(exports, {
+  default: () => BarTabs
+});
+var import_react = __toModule(require("react"));
+var import_styled_components = __toModule(require("styled-components"));
+var import_Flex = __toModule(require("../../layout/Flex"));
+const Item = (0, import_styled_components.default)(import_Flex.default).attrs({
+  flex: 1,
+  justifyContent: "center",
+  alignItems: "center"
+})`
+  cursor: pointer;
+  padding: 8px 12px 8px 12px;
+  border-radius: ${(p) => p.theme.radii[2]}px;
+  color: ${(p) => p.theme.colors.neutral.c100};
+  background-color: ${(p) => p.active ? p.theme.colors.primary.c30 : "unset"};
+`;
+function BarTabs({ children, onTabChange, initialActiveIndex }) {
+  const [activeIndex, setActiveIndex] = (0, import_react.useState)(initialActiveIndex);
+  return /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
+    justifyContent: "space-between",
+    flex: 1,
+    columnGap: 5
+  }, import_react.default.Children.toArray(children).map((child, index) => /* @__PURE__ */ import_react.default.createElement(Item, {
+    key: index,
+    active: index === activeIndex,
+    onClick: () => {
+      setActiveIndex(index);
+      onTabChange && onTabChange(index);
+    }
+  }, child)));
+}
+//# sourceMappingURL=index.js.map

package/lib/cjs/components/tabs/Chip/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/tabs/Chip/index.tsx"],
+  "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: ${(p) => p.theme.radii[2]}px;\n  color: ${(p) => p.theme.colors.neutral.c100};\n  background-color: ${(p) => (p.active ? p.theme.colors.primary.c30 : \"unset\")};\n`;\n\nexport default function BarTabs({ children, onTabChange, initialActiveIndex }: Props): JSX.Element {\n  const [activeIndex, setActiveIndex] = useState(initialActiveIndex);\n  return (\n    <Flex justifyContent=\"space-between\" flex={1} columnGap={5}>\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    </Flex>\n  );\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAChC,+BAAmB;AACnB,kBAAiB;AAiBjB,MAAM,OAAO,sCAAO,qBAAM,MAAM;AAAA,EAC9B,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,YAAY;AAAA;AAAA;AAAA;AAAA,mBAIK,CAAC,MAAM,EAAE,MAAM,MAAM;AAAA,WAC7B,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA,sBACnB,CAAC,MAAO,EAAE,SAAS,EAAE,MAAM,OAAO,QAAQ,MAAM;AAAA;AAGvD,iBAAiB,EAAE,UAAU,aAAa,sBAA0C;AACjG,QAAM,CAAC,aAAa,kBAAkB,2BAAS;AAC/C,SACE,mDAAC,qBAAD;AAAA,IAAM,gBAAe;AAAA,IAAgB,MAAM;AAAA,IAAG,WAAW;AAAA,KACtD,qBAAM,SAAS,QAAQ,UAAU,IAAI,CAAC,OAAO,UAC5C,mDAAC,MAAD;AAAA,IACE,KAAK;AAAA,IACL,QAAQ,UAAU;AAAA,IAClB,SAAS,MAAM;AACb,qBAAe;AACf,qBAAe,YAAY;AAAA;AAAA,KAG5B;AAAA;",
+  "names": []
+}

package/lib/cjs/components/tabs/Pill/Pill.stories.js

@@ -0,0 +1,70 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  __markAsModule(target);
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && key !== "default")
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toModule = (module2) => {
+  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);
+};
+__export(exports, {
+  View: () => View,
+  default: () => Pill_stories_default
+});
+var import_react = __toModule(require("react"));
+var import_index = __toModule(require("./index"));
+var import_Text = __toModule(require("../../asorted/Text"));
+var import_Icon = __toModule(require("../../asorted/Icon"));
+var Pill_stories_default = {
+  title: "Tabs/View",
+  component: import_index.default,
+  argTypes: {
+    initialActiveIndex: {
+      control: { type: "number" }
+    }
+  }
+};
+const navItems = ["Manager", "MenuBurger", "Apple", "Crown", "Settings"];
+function Sample({ children, ...args }) {
+  const [activeIndex, setActiveIndex] = (0, import_react.useState)(args.initialActiveIndex);
+  return /* @__PURE__ */ import_react.default.createElement("div", {
+    style: { marginBottom: "10px" }
+  }, /* @__PURE__ */ import_react.default.createElement("div", {
+    style: { width: "100px" }
+  }, /* @__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), /* @__PURE__ */ import_react.default.createElement("hr", null));
+}
+const View = (args) => navItems.reduce((acc, _, index) => {
+  const labels = navItems.slice(0, index + 1).map((label) => /* @__PURE__ */ import_react.default.createElement(import_Icon.default, {
+    name: label
+  }));
+  return [
+    ...acc,
+    /* @__PURE__ */ import_react.default.createElement(Sample, {
+      ...args,
+      key: index
+    }, labels)
+  ];
+}, []);
+View.args = {
+  initialActiveIndex: 1
+};
+//# sourceMappingURL=Pill.stories.js.map

package/lib/cjs/components/tabs/Pill/Pill.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/tabs/Pill/Pill.stories.tsx"],
+  "sourcesContent": ["import React, { useState } from \"react\";\n\nimport PillTabs, { Props } from \"./index\";\nimport Text from \"../../asorted/Text\";\nimport Icon from \"../../asorted/Icon\";\n\nexport default {\n  title: \"Tabs/View\",\n  component: PillTabs,\n  argTypes: {\n    initialActiveIndex: {\n      control: { type: \"number\" },\n    },\n  },\n};\n\nconst navItems = [\"Manager\", \"MenuBurger\", \"Apple\", \"Crown\", \"Settings\"];\n\nfunction Sample({ children, ...args }: Props) {\n  const [activeIndex, setActiveIndex] = useState(args.initialActiveIndex);\n  return (\n    <div style={{ marginBottom: \"10px\" }}>\n      <div style={{ width: \"100px\" }}>\n        <PillTabs {...args} onTabChange={setActiveIndex}>\n          {children}\n        </PillTabs>\n      </div>\n      <Text variant=\"subtitle\">Active index: {activeIndex}</Text>\n      <hr />\n    </div>\n  );\n}\n\nexport const View = (args: Props): JSX.Element[] =>\n  navItems.reduce<JSX.Element[]>((acc, _, index) => {\n    const labels = navItems.slice(0, index + 1).map((label) => <Icon name={label} />);\n    return [\n      ...acc,\n      <Sample {...args} key={index}>\n        {labels}\n      </Sample>,\n    ];\n  }, []);\n\nView.args = {\n  initialActiveIndex: 1,\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAEhC,mBAAgC;AAChC,kBAAiB;AACjB,kBAAiB;AAEjB,IAAO,uBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW;AAAA,EACX,UAAU;AAAA,IACR,oBAAoB;AAAA,MAClB,SAAS,EAAE,MAAM;AAAA;AAAA;AAAA;AAKvB,MAAM,WAAW,CAAC,WAAW,cAAc,SAAS,SAAS;AAE7D,gBAAgB,EAAE,aAAa,QAAe;AAC5C,QAAM,CAAC,aAAa,kBAAkB,2BAAS,KAAK;AACpD,SACE,mDAAC,OAAD;AAAA,IAAK,OAAO,EAAE,cAAc;AAAA,KAC1B,mDAAC,OAAD;AAAA,IAAK,OAAO,EAAE,OAAO;AAAA,KACnB,mDAAC,sBAAD;AAAA,OAAc;AAAA,IAAM,aAAa;AAAA,KAC9B,YAGL,mDAAC,qBAAD;AAAA,IAAM,SAAQ;AAAA,KAAW,kBAAe,cACxC,mDAAC,MAAD;AAAA;AAKC,MAAM,OAAO,CAAC,SACnB,SAAS,OAAsB,CAAC,KAAK,GAAG,UAAU;AAChD,QAAM,SAAS,SAAS,MAAM,GAAG,QAAQ,GAAG,IAAI,CAAC,UAAU,mDAAC,qBAAD;AAAA,IAAM,MAAM;AAAA;AACvE,SAAO;AAAA,IACL,GAAG;AAAA,IACH,mDAAC,QAAD;AAAA,SAAY;AAAA,MAAM,KAAK;AAAA,OACpB;AAAA;AAAA,GAGJ;AAEL,KAAK,OAAO;AAAA,EACV,oBAAoB;AAAA;",
+  "names": []
+}

package/lib/cjs/components/tabs/Pill/index.js

@@ -0,0 +1,85 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  __markAsModule(target);
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && key !== "default")
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toModule = (module2) => {
+  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);
+};
+__export(exports, {
+  default: () => PillTabs
+});
+var import_react = __toModule(require("react"));
+var import_styled_components = __toModule(require("styled-components"));
+var import_styled_system = __toModule(require("styled-system"));
+var import_Flex = __toModule(require("../../layout/Flex"));
+const Pill = import_styled_components.default.div`
+  display: inline-flex;
+  & > :first-child {
+    border-top-left-radius: 20px;
+    border-bottom-left-radius: 20px;
+    padding-left: 12px;
+  }
+  & > :last-child {
+    border-top-right-radius: 20px;
+    border-bottom-right-radius: 20px;
+    padding-right: 12px;
+  }
+  & > :not(:first-child) {
+    border-left-width: 0;
+  }
+  ${import_styled_system.border};
+`;
+const Item = (0, import_styled_components.default)(import_Flex.default).attrs({ flex: 1, justifyContent: "center", alignItems: "center" })`
+  cursor: pointer;
+  padding: 8px 10px 8px 10px;
+  border: 1px solid;
+  &[data-active="false"] {
+    color: ${(p) => p.theme.colors.neutral.c80};
+    background-color: ${(p) => p.theme.colors.neutral.c00};
+    border-color: ${(p) => p.theme.colors.neutral.c40};
+  }
+  &[data-active="true"] {
+    color: ${(p) => p.theme.colors.neutral.c00};
+    background-color: ${(p) => p.theme.colors.neutral.c100};
+    border-color: ${(p) => p.theme.colors.neutral.c100};
+
+    &:not(:last-child) {
+      border-right-width: 0;
+    }
+  }
+  &[data-active="true"] + div {
+    border-left-width: 1px;
+  }
+`;
+function PillTabs({
+  children,
+  onTabChange,
+  initialActiveIndex
+}) {
+  const [activeIndex, setActiveIndex] = (0, import_react.useState)(initialActiveIndex);
+  return /* @__PURE__ */ import_react.default.createElement(Pill, null, import_react.default.Children.toArray(children).map((child, index) => /* @__PURE__ */ import_react.default.createElement(Item, {
+    key: index,
+    "data-active": index === activeIndex,
+    onClick: () => {
+      setActiveIndex(index);
+      onTabChange && onTabChange(index);
+    }
+  }, child)));
+}
+//# sourceMappingURL=index.js.map

package/lib/cjs/components/tabs/Pill/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/tabs/Pill/index.tsx"],
+  "sourcesContent": ["import React, { useState } from \"react\";\nimport styled from \"styled-components\";\nimport { border, BorderProps } from \"styled-system\";\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}>;\n\nconst Pill = styled.div<BorderProps>`\n  display: inline-flex;\n  & > :first-child {\n    border-top-left-radius: 20px;\n    border-bottom-left-radius: 20px;\n    padding-left: 12px;\n  }\n  & > :last-child {\n    border-top-right-radius: 20px;\n    border-bottom-right-radius: 20px;\n    padding-right: 12px;\n  }\n  & > :not(:first-child) {\n    border-left-width: 0;\n  }\n  ${border};\n`;\nconst Item = styled(Flex).attrs({ flex: 1, justifyContent: \"center\", alignItems: \"center\" })`\n  cursor: pointer;\n  padding: 8px 10px 8px 10px;\n  border: 1px solid;\n  &[data-active=\"false\"] {\n    color: ${(p) => p.theme.colors.neutral.c80};\n    background-color: ${(p) => p.theme.colors.neutral.c00};\n    border-color: ${(p) => p.theme.colors.neutral.c40};\n  }\n  &[data-active=\"true\"] {\n    color: ${(p) => p.theme.colors.neutral.c00};\n    background-color: ${(p) => p.theme.colors.neutral.c100};\n    border-color: ${(p) => p.theme.colors.neutral.c100};\n\n    &:not(:last-child) {\n      border-right-width: 0;\n    }\n  }\n  &[data-active=\"true\"] + div {\n    border-left-width: 1px;\n  }\n`;\n\nexport default function PillTabs({\n  children,\n  onTabChange,\n  initialActiveIndex,\n}: Props): JSX.Element {\n  const [activeIndex, setActiveIndex] = useState(initialActiveIndex);\n  return (\n    <Pill>\n      {React.Children.toArray(children).map((child, index) => (\n        <Item\n          key={index}\n          data-active={index === activeIndex}\n          onClick={() => {\n            setActiveIndex(index);\n            onTabChange && onTabChange(index);\n          }}\n        >\n          {child}\n        </Item>\n      ))}\n    </Pill>\n  );\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAChC,+BAAmB;AACnB,2BAAoC;AACpC,kBAAiB;AAcjB,MAAM,OAAO,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAehB;AAAA;AAEJ,MAAM,OAAO,sCAAO,qBAAM,MAAM,EAAE,MAAM,GAAG,gBAAgB,UAAU,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,aAKpE,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA,wBACnB,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA,oBAClC,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,aAGrC,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA,wBACnB,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA,oBAClC,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWnC,kBAAkB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,GACqB;AACrB,QAAM,CAAC,aAAa,kBAAkB,2BAAS;AAC/C,SACE,mDAAC,MAAD,MACG,qBAAM,SAAS,QAAQ,UAAU,IAAI,CAAC,OAAO,UAC5C,mDAAC,MAAD;AAAA,IACE,KAAK;AAAA,IACL,eAAa,UAAU;AAAA,IACvB,SAAS,MAAM;AACb,qBAAe;AACf,qBAAe,YAAY;AAAA;AAAA,KAG5B;AAAA;",
+  "names": []
+}

package/lib/cjs/components/tabs/Tabs/Tabs.stories.js

@@ -0,0 +1,121 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  __markAsModule(target);
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && key !== "default")
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toModule = (module2) => {
+  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);
+};
+__export(exports, {
+  Tabs: () => Tabs,
+  default: () => Tabs_stories_default
+});
+var import_react = __toModule(require("react"));
+var import_styled_components = __toModule(require("styled-components"));
+var import_Tabs = __toModule(require("../../tabs/Tabs"));
+var import_Text = __toModule(require("../../asorted/Text"));
+var Tabs_stories_default = {
+  title: "Tabs/Tabs",
+  component: import_Tabs.default,
+  argTypes: {
+    initialActiveIndex: {
+      control: { type: "number" }
+    }
+  }
+};
+const Content = import_styled_components.default.div`
+  padding: 10px;
+`;
+const myTabs = [
+  [
+    {
+      index: 0,
+      title: "Title 1",
+      badge: 2,
+      Component: /* @__PURE__ */ import_react.default.createElement(Content, null, "Have a break, have a KitKat !")
+    },
+    {
+      index: 1,
+      title: "Title 2",
+      Component: /* @__PURE__ */ import_react.default.createElement(Content, null, "I'm disabled below, you will never see me... So stay here pls ^^")
+    },
+    {
+      index: 2,
+      title: "Title 3",
+      badge: "banana",
+      Component: /* @__PURE__ */ import_react.default.createElement(Content, null, "Look mom i'm on tv !")
+    }
+  ],
+  [
+    {
+      index: 0,
+      title: "Title 1",
+      disabled: false,
+      badge: 2,
+      Component: /* @__PURE__ */ import_react.default.createElement(Content, null, "Pst ! Title 2 is disabled. You can't see it ...")
+    },
+    {
+      index: 1,
+      title: "Title 2",
+      disabled: true,
+      Component: /* @__PURE__ */ import_react.default.createElement(Content, null, "I'm disabled, you will never see me...")
+    },
+    {
+      index: 2,
+      title: "Title 3 a little bit longer",
+      disabled: false,
+      badge: "banana",
+      Component: /* @__PURE__ */ import_react.default.createElement(Content, null, "Pst ! Title 2 is disabled. You can't see it ...")
+    }
+  ],
+  [
+    {
+      index: 0,
+      title: "One",
+      badge: 1,
+      Component: /* @__PURE__ */ import_react.default.createElement(Content, null, "One is the first")
+    },
+    {
+      index: 1,
+      title: "Two",
+      badge: 2,
+      Component: /* @__PURE__ */ import_react.default.createElement(Content, null, "Two is the second")
+    }
+  ]
+];
+function Sample(args) {
+  const [activeIndex, setActiveIndex] = (0, import_react.useState)(0);
+  return /* @__PURE__ */ import_react.default.createElement("div", {
+    style: { marginBottom: "40px" }
+  }, /* @__PURE__ */ import_react.default.createElement("div", {
+    style: { width: "100%" }
+  }, /* @__PURE__ */ import_react.default.createElement(import_Tabs.default, {
+    ...args,
+    onTabChange: setActiveIndex,
+    tabs: args.tabs
+  })), /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
+    variant: "subtitle"
+  }, "Active index: ", activeIndex), /* @__PURE__ */ import_react.default.createElement("hr", null));
+}
+const Tabs = () => myTabs.reduce((acc, tabs, index) => {
+  return [...acc, /* @__PURE__ */ import_react.default.createElement(Sample, {
+    key: index,
+    tabs
+  })];
+}, []);
+//# sourceMappingURL=Tabs.stories.js.map

package/lib/cjs/components/tabs/Tabs/Tabs.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/tabs/Tabs/Tabs.stories.tsx"],
+  "sourcesContent": ["import React, { useState } from \"react\";\nimport styled from \"styled-components\";\nimport TabsComponent, { Props, TabContent } from \"../../tabs/Tabs\";\nimport Text from \"../../asorted/Text\";\n\nexport default {\n  title: \"Tabs/Tabs\",\n  component: TabsComponent,\n  argTypes: {\n    initialActiveIndex: {\n      control: { type: \"number\" },\n    },\n  },\n};\n\nconst Content = styled.div`\n  padding: 10px;\n`;\n\nconst myTabs: TabContent[][] = [\n  [\n    {\n      index: 0,\n      title: \"Title 1\",\n      badge: 2,\n      Component: <Content>Have a break, have a KitKat !</Content>,\n    },\n    {\n      index: 1,\n      title: \"Title 2\",\n      Component: (\n        <Content>I'm disabled below, you will never see me... So stay here pls ^^</Content>\n      ),\n    },\n    {\n      index: 2,\n      title: \"Title 3\",\n      badge: \"banana\",\n      Component: <Content>Look mom i'm on tv !</Content>,\n    },\n  ],\n  [\n    {\n      index: 0,\n      title: \"Title 1\",\n      disabled: false,\n      badge: 2,\n      Component: <Content>Pst ! Title 2 is disabled. You can't see it ...</Content>,\n    },\n    {\n      index: 1,\n      title: \"Title 2\",\n      disabled: true,\n      Component: <Content>I'm disabled, you will never see me...</Content>,\n    },\n    {\n      index: 2,\n      title: \"Title 3 a little bit longer\",\n      disabled: false,\n      badge: \"banana\",\n      Component: <Content>Pst ! Title 2 is disabled. You can't see it ...</Content>,\n    },\n  ],\n  [\n    {\n      index: 0,\n      title: \"One\",\n      badge: 1,\n      Component: <Content>One is the first</Content>,\n    },\n    {\n      index: 1,\n      title: \"Two\",\n      badge: 2,\n      Component: <Content>Two is the second</Content>,\n    },\n  ],\n];\n\nfunction Sample(args: Props) {\n  const [activeIndex, setActiveIndex] = useState(0);\n  return (\n    <div style={{ marginBottom: \"40px\" }}>\n      <div style={{ width: \"100%\" }}>\n        <TabsComponent {...args} onTabChange={setActiveIndex} tabs={args.tabs} />\n      </div>\n      <Text variant=\"subtitle\">Active index: {activeIndex}</Text>\n      <hr />\n    </div>\n  );\n}\n\nexport const Tabs = (): React.ReactNode[] =>\n  myTabs.reduce<React.ReactNode[]>((acc, tabs, index) => {\n    return [...acc, <Sample key={index} tabs={tabs} />];\n  }, []);\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAChC,+BAAmB;AACnB,kBAAiD;AACjD,kBAAiB;AAEjB,IAAO,uBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW;AAAA,EACX,UAAU;AAAA,IACR,oBAAoB;AAAA,MAClB,SAAS,EAAE,MAAM;AAAA;AAAA;AAAA;AAKvB,MAAM,UAAU,iCAAO;AAAA;AAAA;AAIvB,MAAM,SAAyB;AAAA,EAC7B;AAAA,IACE;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO;AAAA,MACP,WAAW,mDAAC,SAAD,MAAS;AAAA;AAAA,IAEtB;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,MACP,WACE,mDAAC,SAAD,MAAS;AAAA;AAAA,IAGb;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO;AAAA,MACP,WAAW,mDAAC,SAAD,MAAS;AAAA;AAAA;AAAA,EAGxB;AAAA,IACE;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OAAO;AAAA,MACP,WAAW,mDAAC,SAAD,MAAS;AAAA;AAAA,IAEtB;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,MACP,UAAU;AAAA,MACV,WAAW,mDAAC,SAAD,MAAS;AAAA;AAAA,IAEtB;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OAAO;AAAA,MACP,WAAW,mDAAC,SAAD,MAAS;AAAA;AAAA;AAAA,EAGxB;AAAA,IACE;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO;AAAA,MACP,WAAW,mDAAC,SAAD,MAAS;AAAA;AAAA,IAEtB;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO;AAAA,MACP,WAAW,mDAAC,SAAD,MAAS;AAAA;AAAA;AAAA;AAK1B,gBAAgB,MAAa;AAC3B,QAAM,CAAC,aAAa,kBAAkB,2BAAS;AAC/C,SACE,mDAAC,OAAD;AAAA,IAAK,OAAO,EAAE,cAAc;AAAA,KAC1B,mDAAC,OAAD;AAAA,IAAK,OAAO,EAAE,OAAO;AAAA,KACnB,mDAAC,qBAAD;AAAA,OAAmB;AAAA,IAAM,aAAa;AAAA,IAAgB,MAAM,KAAK;AAAA,OAEnE,mDAAC,qBAAD;AAAA,IAAM,SAAQ;AAAA,KAAW,kBAAe,cACxC,mDAAC,MAAD;AAAA;AAKC,MAAM,OAAO,MAClB,OAAO,OAA0B,CAAC,KAAK,MAAM,UAAU;AACrD,SAAO,CAAC,GAAG,KAAK,mDAAC,QAAD;AAAA,IAAQ,KAAK;AAAA,IAAO;AAAA;AAAA,GACnC;",
+  "names": []
+}

package/lib/cjs/components/tabs/Tabs/index.js

@@ -0,0 +1,150 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  __markAsModule(target);
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && key !== "default")
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toModule = (module2) => {
+  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);
+};
+__export(exports, {
+  default: () => Tabs
+});
+var import_react = __toModule(require("react"));
+var import_styled_components = __toModule(require("styled-components"));
+var import_Flex = __toModule(require("../../layout/Flex"));
+var import_Tag = __toModule(require("../../Tag"));
+var import_Text = __toModule(require("../../asorted/Text"));
+const Container = (0, import_styled_components.default)(import_Flex.default).attrs({
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "center"
+})``;
+const TabHeader = import_styled_components.default.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  width: 100%;
+`;
+const TabHeaderContent = (0, import_styled_components.default)(import_Flex.default).attrs({
+  flex: 1,
+  alignItems: "center"
+})`
+  width: 100%;
+`;
+const TabHeaderBox = import_styled_components.default.div`
+  display: flex;
+  flex-grow: inherit;
+  justify-content: center;
+  text-align: center;
+  cursor: ${(p) => p.disabled ? "default" : "pointer"};
+  padding: 8px 12px;
+`;
+const HeaderTitle = (0, import_styled_components.default)(import_Text.default).attrs({
+  fontWeight: "600"
+})`
+  margin-inline: 12px;
+  color: ${(p) => p.selected ? p.theme.colors.neutral.c100 : p.theme.colors.neutral.c80};
+`;
+const HeaderBottomBarFixed = (0, import_styled_components.default)(import_Flex.default).attrs({
+  flex: 1
+})`
+  width: 100%;
+  position: relative;
+  top: 3px;
+  border-bottom: 1px solid ${(p) => p.theme.colors.neutral.c40};
+`;
+const HeaderBottomBarMoving = import_styled_components.default.div`
+  position: relative;
+  left: ${(p) => p.left}px;
+  width: ${(p) => p.width}px;
+  transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  border-bottom: solid 3px;
+  border-bottom-color: ${(p) => p.theme.colors.primary.c70};
+`;
+const Badge = (0, import_styled_components.default)(import_Tag.default).attrs((p) => ({
+  borderRadius: p.theme.radii[3],
+  backgroundColor: p.theme.colors.primary.c70,
+  color: p.theme.colors.neutral.c00
+}))`
+  padding: 5px;
+  min-width: 24px;
+`;
+const MyBottomBar = (props) => {
+  const { width, left } = props;
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(HeaderBottomBarFixed, null), /* @__PURE__ */ import_react.default.createElement(HeaderBottomBarMoving, {
+    width,
+    left
+  }));
+};
+const HeaderElement = (0, import_react.forwardRef)((props, ref) => {
+  const { onClick, badge, disabled, selected, title } = props;
+  return /* @__PURE__ */ import_react.default.createElement(TabHeaderBox, {
+    ref,
+    disabled,
+    onClick
+  }, /* @__PURE__ */ import_react.default.createElement(HeaderTitle, {
+    selected
+  }, title), (badge || badge === 0) && /* @__PURE__ */ import_react.default.createElement(Badge, null, badge));
+});
+const MainContent = (0, import_styled_components.default)(import_Flex.default).attrs({
+  flex: 1
+})`
+  width: 100%;
+  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};
+`;
+function Tabs(props) {
+  const { tabs, onTabChange } = props;
+  const [activeIndex, setActiveIndex] = (0, import_react.useState)(tabs[0].index);
+  const [bottomBar, updateBottomBar] = (0, import_react.useState)({ left: 0, width: 0 });
+  const mainTab = activeIndex >= 0 ? tabs[activeIndex] : null;
+  const refs = tabs.map(() => (0, import_react.createRef)());
+  (0, import_react.useEffect)(() => {
+    const newIndex = props.activeIndex || activeIndex;
+    setActiveIndex(newIndex);
+    if (refs[0].current) {
+      const refIndex = tabs.findIndex((t) => t.index === newIndex);
+      const refsToHandle = refs.slice(0, refIndex);
+      const width = refs[refIndex].current?.offsetWidth || 0;
+      const left = refsToHandle.reduce((total, ref) => total + (ref.current?.offsetWidth || 0), 0);
+      updateBottomBar({
+        width,
+        left
+      });
+    }
+  }, [activeIndex]);
+  const onTabClick = (index) => {
+    const tab = tabs.find((t) => t.index === index);
+    if (tab && !tab.disabled) {
+      setActiveIndex(index);
+      onTabChange && onTabChange(index);
+    }
+  };
+  return /* @__PURE__ */ import_react.default.createElement(Container, null, /* @__PURE__ */ import_react.default.createElement(TabHeader, null, /* @__PURE__ */ import_react.default.createElement(TabHeaderContent, null, tabs.map((tab, i) => /* @__PURE__ */ import_react.default.createElement(HeaderElement, {
+    ref: refs[i],
+    title: tab.title,
+    selected: activeIndex === tab.index,
+    badge: tab.badge,
+    disabled: !!tab.disabled,
+    onClick: () => onTabClick(tab.index)
+  }))), /* @__PURE__ */ import_react.default.createElement(MyBottomBar, {
+    width: bottomBar.width,
+    left: bottomBar.left
+  })), /* @__PURE__ */ import_react.default.createElement(MainContent, null, mainTab && mainTab.Component));
+}
+//# sourceMappingURL=index.js.map

package/lib/cjs/components/tabs/Tabs/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/tabs/Tabs/index.tsx"],
+  "sourcesContent": ["import React, { useState, useEffect, createRef, forwardRef } from \"react\";\nimport styled from \"styled-components\";\nimport Flex from \"../../layout/Flex\";\nimport Tag from \"../../Tag\";\nimport Text from \"../../asorted/Text\";\n\nexport interface TabContent {\n  index: number;\n  title: string;\n  disabled?: boolean;\n  badge?: string | number;\n  Component: React.ReactFragment;\n}\n\nexport type Props = React.PropsWithChildren<{\n  /**\n   * An optional callback that will be called when the active tab changes.\n   */\n  onTabChange?: (index: 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  activeIndex?: number;\n  tabs: TabContent[];\n}>;\n\nconst Container = styled(Flex).attrs({\n  flexDirection: \"column\",\n  justifyContent: \"center\",\n  alignItems: \"center\",\n})``;\n\nconst TabHeader = styled.div`\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  width: 100%;\n`;\n\nconst TabHeaderContent = styled(Flex).attrs({\n  flex: 1,\n  alignItems: \"center\",\n})`\n  width: 100%;\n`;\n\nconst TabHeaderBox = styled.div<{ disabled: boolean }>`\n  display: flex;\n  flex-grow: inherit;\n  justify-content: center;\n  text-align: center;\n  cursor: ${(p) => (p.disabled ? \"default\" : \"pointer\")};\n  padding: 8px 12px;\n`;\n\nconst HeaderTitle = styled(Text).attrs({\n  fontWeight: \"600\",\n})<{ selected: boolean }>`\n  margin-inline: 12px;\n  color: ${(p) => (p.selected ? p.theme.colors.neutral.c100 : p.theme.colors.neutral.c80)};\n`;\n\nconst HeaderBottomBarFixed = styled(Flex).attrs({\n  flex: 1,\n})`\n  width: 100%;\n  position: relative;\n  top: 3px;\n  border-bottom: 1px solid ${(p) => p.theme.colors.neutral.c40};\n`;\n\nconst HeaderBottomBarMoving = styled.div<HeaderBottomBarProps>`\n  position: relative;\n  left: ${(p) => p.left}px;\n  width: ${(p) => p.width}px;\n  transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n  border-bottom: solid 3px;\n  border-bottom-color: ${(p) => p.theme.colors.primary.c70};\n`;\n\nconst Badge = styled(Tag).attrs((p) => ({\n  borderRadius: p.theme.radii[3],\n  backgroundColor: p.theme.colors.primary.c70,\n  color: p.theme.colors.neutral.c00,\n}))`\n  padding: 5px;\n  min-width: 24px;\n`;\n\ninterface HeaderBottomBarProps {\n  left: number;\n  width: number;\n}\n\nconst MyBottomBar = (props: HeaderBottomBarProps) => {\n  const { width, left } = props;\n  return (\n    <>\n      <HeaderBottomBarFixed />\n      <HeaderBottomBarMoving width={width} left={left} />\n    </>\n  );\n};\n\ninterface HeaderElementProps {\n  title: string;\n  selected: boolean;\n  disabled: boolean;\n  badge?: string | number;\n  onClick: () => void;\n}\n\nconst HeaderElement = forwardRef<HTMLDivElement, HeaderElementProps>((props, ref) => {\n  const { onClick, badge, disabled, selected, title } = props;\n\n  return (\n    <TabHeaderBox ref={ref} disabled={disabled} onClick={onClick}>\n      <HeaderTitle selected={selected}>{title}</HeaderTitle>\n      {(badge || badge === 0) && <Badge>{badge}</Badge>}\n    </TabHeaderBox>\n  );\n});\n\nconst MainContent = styled(Flex).attrs({\n  flex: 1,\n})<{ active?: boolean }>`\n  width: 100%;\n  color: ${(p) => (p.active ? p.theme.colors.neutral.c00 : p.theme.colors.neutral.c70)};\n  background-color: ${(p) => (p.active ? p.theme.colors.neutral.c100 : p.theme.colors.neutral.c00)};\n`;\n\nexport default function Tabs(props: Props): JSX.Element {\n  const { tabs, onTabChange } = props;\n  const [activeIndex, setActiveIndex] = useState(tabs[0].index);\n  const [bottomBar, updateBottomBar] = useState<HeaderBottomBarProps>({ left: 0, width: 0 });\n  const mainTab = activeIndex >= 0 ? tabs[activeIndex] : null;\n  const refs = tabs.map(() => createRef<HTMLDivElement>());\n\n  useEffect(() => {\n    const newIndex = props.activeIndex || activeIndex;\n    setActiveIndex(newIndex);\n\n    if (refs[0].current) {\n      const refIndex = tabs.findIndex((t) => t.index === newIndex);\n      const refsToHandle = refs.slice(0, refIndex);\n      const width = refs[refIndex].current?.offsetWidth || 0;\n      const left = refsToHandle.reduce((total, ref) => total + (ref.current?.offsetWidth || 0), 0);\n      updateBottomBar({\n        width,\n        left,\n      });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [activeIndex]);\n\n  const onTabClick = (index: number) => {\n    const tab = tabs.find((t) => t.index === index);\n    if (tab && !tab.disabled) {\n      setActiveIndex(index);\n      onTabChange && onTabChange(index);\n    }\n  };\n\n  return (\n    <Container>\n      <TabHeader>\n        <TabHeaderContent>\n          {tabs.map((tab, i) => (\n            <HeaderElement\n              ref={refs[i]}\n              title={tab.title}\n              selected={activeIndex === tab.index}\n              badge={tab.badge}\n              disabled={!!tab.disabled}\n              onClick={() => onTabClick(tab.index)}\n            />\n          ))}\n        </TabHeaderContent>\n        <MyBottomBar width={bottomBar.width} left={bottomBar.left} />\n      </TabHeader>\n      <MainContent>{mainTab && mainTab.Component}</MainContent>\n    </Container>\n  );\n}\n"],
+  "mappings": "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",
+  "names": []
+}