camelmind 0.2.9 → 0.2.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "camelmind",
-  "version": "0.2.9",
+  "version": "0.2.10",
   "description": "Create and manage CamelMind documentation sites",
   "license": "MIT",
   "type": "module",

package/template/components/mdx/Tabs.tsx

@@ -46,8 +46,39 @@ export function Tabs({ children }: { children: React.ReactNode }) {
   if (tabs.length === 0) return null
 
   return (
-    <div className="my-4">
-      {/* rest of your JSX stays the same */}
+    <div className="my-4 border border-[var(--cm-border)] rounded-[var(--cm-radius-md)] overflow-hidden">
+      <div className="flex border-b border-[var(--cm-border)] px-2 pt-1" role="tablist">
+        {tabs.map((tab, i) => (
+          <button
+            key={i}
+            role="tab"
+            aria-selected={active === i}
+            aria-controls={`tab-panel-${uid}-${i}`}
+            id={`tab-${uid}-${i}`}
+            onClick={() => handleClick(i)}
+            style={active === i ? { borderColor: "var(--cm-active-border)", color: "var(--cm-active)" } : {}}
+            className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors ${
+              active === i
+                ? "font-semibold"
+                : "border-transparent text-[var(--cm-text-muted)] hover:text-[var(--cm-text-secondary)] hover:border-[var(--cm-border)]"
+            }`}
+          >
+            {tab.props.label}
+          </button>
+        ))}
+      </div>
+      {tabs.map((tab, i) => (
+        <div
+          key={i}
+          role="tabpanel"
+          id={`tab-panel-${uid}-${i}`}
+          aria-labelledby={`tab-${uid}-${i}`}
+          hidden={active !== i}
+          className="px-4 pt-4 pb-2"
+        >
+          {tab.props.children}
+        </div>
+      ))}
     </div>
   )
 }