gbs-add-block 0.0.83 → 0.0.84

package/README.md

@@ -1,4 +1,4 @@
-# GBS Building Blocks 2.0 (v0.0.83)
+# GBS Building Blocks 2.0 (v0.0.84)
 
 Latest and upgraded version of GBS building blocks with headless UI and removed dependencies.
 
@@ -6,10 +6,10 @@ Latest and upgraded version of GBS building blocks with headless UI and removed
 
 For detailed documentation on usage and props, Please visit: [Building Block Documentation v2.0](https://blackmax-designs.gitbook.io/building-block-v2.0)
 
-## What's New 🎉 (Ver 0.0.83)
+## What's New 🎉 (Ver 0.0.84)
 
 - Updated for bug fixes.
-- New Component Card & SideBar Added
+- New Component Card, Tabs & SideBar Added
 
 ## Authors
 

package/index.cjs

@@ -22,6 +22,7 @@ const CONFIG = {
     "Modal",
     "Spinner",
     "Toast",
+    "Tabs",
     "Uploader",
     "FormRenderer",
     "MaterialInput",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gbs-add-block",
-  "version": "0.0.83",
+  "version": "0.0.84",
   "description": "React Component Library",
   "type": "module",
   "files": [

package/source/components/tabs/index.tsx

@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) Grampro Business Services and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { useState } from "react";
+import { TabsProps } from "./types";
+
+export function Tabs({
+  tabs,
+  defaultTabId,
+  renderContent,
+  onChange,
+  className = "",
+}: TabsProps) {
+  const [activeTabId, setActiveTabId] = useState<string>(
+    defaultTabId || (tabs.length > 0 ? tabs[0].id : "")
+  );
+
+  const handleTabChange = (tabId: string) => {
+    setActiveTabId(tabId);
+    if (onChange) {
+      onChange(tabId);
+    }
+  };
+
+  return (
+    <div className={`w-full ${className}`}>
+      <nav className="flex border-b border-gray-200">
+        {tabs.map((tab) => (
+          <button
+            key={tab.id}
+            disabled={tab.disabled}
+            className={`px-4 py-2 text-sm font-medium transition-colors ${
+              tab.disabled
+                ? "text-gray-300 cursor-not-allowed"
+                : activeTabId === tab.id
+                ? "border-b-2 border-black text-black"
+                : "text-gray-500 hover:text-gray-700 hover:border-gray-300"
+            }`}
+            onClick={() => !tab.disabled && handleTabChange(tab.id)}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </nav>
+      <div className="pt-4">{renderContent(activeTabId)}</div>
+    </div>
+  );
+}

package/source/components/tabs/types.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+
+export interface TabItem {
+  id: string;
+  label: string;
+  disabled?: boolean;
+}
+
+export interface TabsProps {
+  tabs: TabItem[];
+  defaultTabId?: string;
+  renderContent: (activeTabId: string) => ReactNode;
+  onChange?: (tabId: string) => void;
+  className?: string;
+}