fix

playground/src/engine.config.js

@@ -56,6 +56,7 @@ const engineConfig = {
       Slider: "/components/atoms/Slider",
       Spinner: "/components/atoms/Spinner",
       Table: "/components/molecules/Table",
+      TabPanel: "/components/organisms/TabPanel",
       Toggle: "/components/atoms/Toggle",
     },
   },

playground/src/pages/TabPanel/index.tsx

@@ -0,0 +1,37 @@
+import { Button } from "mobrix-ui-preview";
+import { BooleanProp, StringProp } from "@cianciarusocataldo/demo-ui";
+import { ComponentPage } from "components/ComponentPage";
+import { demoRows, demoProps } from "constants/demo-props";
+import DemoComponent from "components/DemoComponent";
+
+const TabPanelPage = () => (
+  <ComponentPage
+    name="TabPanel"
+    translations
+    render={(t, componentLabel) => {
+      const contentLabel = t("props_children");
+      const clickMessage = t("common_click");
+
+      return (
+        <DemoComponent
+          label={componentLabel}
+          startColor="#BFBABA"
+          props={{
+            children: StringProp(contentLabel),
+            disabled: BooleanProp(false),
+            ...demoProps,
+          }}
+          rows={[["children", "disabled"], ...demoRows]}
+          parseProps={(props, setProps) => ({
+            ...props,
+            onClick: () => alert(clickMessage),
+          })}
+        >
+          {Button}
+        </DemoComponent>
+      );
+    }}
+  />
+);
+
+export default TabPanelPage;

src/components/organisms/TabPanel/index.ts

@@ -41,7 +41,7 @@ import { buildMobrixUiStandardComponent } from "../../../utils";
  */
 const TabPanel: TabPanelComponent = ({ tabs = [], ...commonProps }) => {
   return buildMobrixUiStandardComponent({
-    name: "tabpanel",
+    name: "tab-panel",
     commonProps,
   });
 };

src/components/organisms/TabPanel/styles.css

@@ -0,0 +1,4 @@
+#mobrix-ui-tab-panel {
+  display: flex;
+  flex-direction: row;
+}