@ttdk-design-system/library-react 0.0.0-stage → 1.0.0

package/src/web/tabs/manifest.json

@@ -0,0 +1,315 @@
+{
+  "name": "@ttdk-design-system/tabs",
+  "component": "Tabs",
+  "folder": "tabs",
+  "description": "Komponen Tabs untuk navigasi multi-panel dengan orientasi Horizontal & Vertikal, varian Line, Pills, dan Enclosed.",
+  "stylesheets": [
+    {
+      "theme": "common",
+      "file": "tabs.css",
+      "importPath": "web/tabs/tabs.css"
+    }
+  ],
+  "props": {
+    "items": {
+      "name": "items",
+      "type": "TabItem[]",
+      "optional": false,
+      "default": null,
+      "description": "Daftar tab items yang akan dirender.",
+      "example": null,
+      "param": null
+    },
+    "value": {
+      "name": "value",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Nilai tab yang sedang aktif (v-model / controlled value).",
+      "example": null,
+      "param": null
+    },
+    "defaultValue": {
+      "name": "defaultValue",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Nilai tab default saat pertama kali dirender (uncontrolled initial value).",
+      "example": null,
+      "param": null
+    },
+    "orientation": {
+      "name": "orientation",
+      "type": "'horizontal' | 'vertical'",
+      "optional": true,
+      "default": "horizontal",
+      "description": "Orientasi tata letak tab. - `'horizontal'`: Tab berjejer ke samping dengan garis indikator di bawah (standar). - `'vertical'`: Tab berjejer ke bawah dalam kolom dengan garis indikator di samping.",
+      "example": null,
+      "param": null
+    },
+    "variant": {
+      "name": "variant",
+      "type": "'line' | 'pills'",
+      "optional": true,
+      "default": "line",
+      "description": "Varian visual tampilan tab. - `'line'`: Garis indikator bawah/samping minimalis elegan (sesuai desain TTDK). - `'pills'`: Bentuk kapsul/tombol latar belakang penuh ala Shadcn / Nuxt UI.",
+      "example": null,
+      "param": null
+    },
+    "size": {
+      "name": "size",
+      "type": "'sm' | 'md' | 'lg'",
+      "optional": true,
+      "default": "md",
+      "description": "Ukuran proporsional tab (tinggi, padding, ukuran font). - `'sm'`: Kecil (12px font, compact padding). - `'md'`: Standar (14px font, regular padding). - `'lg'`: Besar (16px font, spacious padding).",
+      "example": null,
+      "param": null
+    },
+    "fitted": {
+      "name": "fitted",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Membuat lebar setiap tab mengisi rata seluruh ruang container (full width / equal width).",
+      "example": null,
+      "param": null
+    },
+    "rounded": {
+      "name": "rounded",
+      "type": "'none' | 'sm' | 'md' | 'lg' | 'full'",
+      "optional": true,
+      "default": "md",
+      "description": "Sudut kelengkungan (khusus untuk varian 'pills'). - `'none'`: Sudut 0px. - `'sm'`: Sudut 4px. - `'md'`: Sudut 6px. - `'lg'`: Sudut 8px. - `'full'`: Sudut 9999px.",
+      "example": null,
+      "param": null
+    },
+    "lazy": {
+      "name": "lazy",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Hanya me-render konten panel tab saat tab tersebut aktif (lazy rendering). Berguna untuk menghemat performa saat tab memiliki konten berat.",
+      "example": null,
+      "param": null
+    },
+    "style": {
+      "name": "style",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Inline CSS style object native.",
+      "example": null,
+      "param": null
+    },
+    "ui": {
+      "name": "ui",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Kustomisasi visual granular root container (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "listStyle": {
+      "name": "listStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk container tab list (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "listClass": {
+      "name": "listClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk container tab list.",
+      "example": null,
+      "param": null
+    },
+    "tabStyle": {
+      "name": "tabStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk tombol tab item (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "tabClass": {
+      "name": "tabClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk tombol tab item.",
+      "example": null,
+      "param": null
+    },
+    "activeTabStyle": {
+      "name": "activeTabStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk tombol tab item saat aktif (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "activeTabClass": {
+      "name": "activeTabClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk tombol tab item saat aktif.",
+      "example": null,
+      "param": null
+    },
+    "indicatorStyle": {
+      "name": "indicatorStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk garis indikator tab (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "indicatorClass": {
+      "name": "indicatorClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk garis indikator tab.",
+      "example": null,
+      "param": null
+    },
+    "badgeStyle": {
+      "name": "badgeStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk badge tab (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "badgeClass": {
+      "name": "badgeClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk badge tab.",
+      "example": null,
+      "param": null
+    },
+    "panelStyle": {
+      "name": "panelStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk panel konten tab (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "panelClass": {
+      "name": "panelClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk panel konten tab.",
+      "example": null,
+      "param": null
+    },
+    "onChange": {
+      "name": "onChange",
+      "type": "(value: string) => void",
+      "optional": true,
+      "default": null,
+      "description": "Callback event saat pengguna mengganti tab aktif.",
+      "example": null,
+      "param": "value Nilai/identifier tab yang dipilih."
+    },
+    "className": {
+      "name": "className",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom.",
+      "example": null,
+      "param": null
+    },
+    "children": {
+      "name": "children",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Konten kustom atau slot anak.",
+      "example": null,
+      "param": null
+    }
+  },
+  "subInterfaces": {
+    "TabItem": {
+      "label": {
+        "name": "label",
+        "type": "string",
+        "optional": false,
+        "default": null,
+        "description": "Label teks yang ditampilkan pada tab item.",
+        "example": null,
+        "param": null
+      },
+      "value": {
+        "name": "value",
+        "type": "string",
+        "optional": false,
+        "default": null,
+        "description": "Identifier unik / nilai aktif untuk tab ini.",
+        "example": null,
+        "param": null
+      },
+      "icon": {
+        "name": "icon",
+        "type": "any",
+        "optional": true,
+        "default": null,
+        "description": "Ikon atau emoji opsional di samping label teks.",
+        "example": null,
+        "param": null
+      },
+      "badge": {
+        "name": "badge",
+        "type": "string | number",
+        "optional": true,
+        "default": null,
+        "description": "Badge teks atau counter angka opsional (misal: '12', 'Baru').",
+        "example": null,
+        "param": null
+      },
+      "disabled": {
+        "name": "disabled",
+        "type": "boolean",
+        "optional": true,
+        "default": "false",
+        "description": "Menonaktifkan tab item dari interaksi klik.",
+        "example": null,
+        "param": null
+      },
+      "content": {
+        "name": "content",
+        "type": "any",
+        "optional": true,
+        "default": null,
+        "description": "Konten tab opsional jika ingin menggunakan panel terintegrasi.",
+        "example": null,
+        "param": null
+      }
+    }
+  },
+  "supportedFrameworks": [
+    "react",
+    "vue",
+    "svelte"
+  ],
+  "themes": [
+    "tw"
+  ]
+}

package/src/web/tabs/tabs.css

@@ -0,0 +1 @@
+.ttdk-tabs{--tab-radius:var(--ttdk-radius-input-md);box-sizing:border-box;font-family:var(--ttdk-font-sans);color:var(--ttdk-ui-color,var(--ttdk-text-icon-primary));width:100%;min-width:0;max-width:100%;display:flex;&[data-orientation=horizontal]{flex-direction:column;width:100%;min-width:0;max-width:100%;& .ttdk-tabs-list{box-sizing:border-box;scrollbar-width:none;-webkit-overflow-scrolling:touch;flex-direction:row;align-items:center;width:100%;min-width:0;max-width:100%;display:flex;overflow:auto hidden;&::-webkit-scrollbar{display:none}}}&[data-orientation=vertical]{align-items:stretch;gap:var(--ttdk-spacing-md);flex-direction:row;width:100%;min-width:0;max-width:100%;& .ttdk-tabs-list{flex-direction:column;flex-shrink:0;min-width:180px;max-width:260px;display:flex;@media (width<=640px){min-width:120px;max-width:160px}}& .ttdk-tabs-panels{flex:1;min-width:0}}&[data-fitted=true][data-orientation=horizontal]{& .ttdk-tabs-list{width:100%}& .ttdk-tab-item{text-align:center;flex:1;justify-content:center}}&[data-size=sm]{font-size:var(--ttdk-font-size-12);& .ttdk-tab-item{font-size:var(--ttdk-font-size-12);gap:6px}&[data-variant=line][data-orientation=horizontal] .ttdk-tab-item{gap:6px;padding:8px 2px}&[data-variant=line][data-orientation=vertical] .ttdk-tab-item{padding:8px 12px}&[data-variant=pills] .ttdk-tab-item{font-size:var(--ttdk-font-size-12);padding:5px 10px}& .ttdk-tab-icon{font-size:var(--ttdk-font-size-14)}}&[data-size=md]{font-size:var(--ttdk-font-size-14);& .ttdk-tab-item{font-size:var(--ttdk-font-size-14);gap:var(--ttdk-spacing-xs)}&[data-variant=line][data-orientation=horizontal] .ttdk-tab-item{padding:12px 4px}&[data-variant=line][data-orientation=vertical] .ttdk-tab-item{padding:10px 14px}&[data-variant=pills] .ttdk-tab-item{padding:6px 14px;font-size:13px}& .ttdk-tab-icon{font-size:var(--ttdk-font-size-16)}}&[data-size=lg]{font-size:var(--ttdk-font-size-16);& .ttdk-tab-item{font-size:var(--ttdk-font-size-16);gap:10px}&[data-variant=line][data-orientation=horizontal] .ttdk-tab-item{padding:14px 6px}&[data-variant=line][data-orientation=vertical] .ttdk-tab-item{padding:12px 16px}&[data-variant=pills] .ttdk-tab-item{font-size:var(--ttdk-font-size-14);padding:8px 18px}& .ttdk-tab-icon{font-size:var(--ttdk-font-size-18)}}&[data-rounded=none]{--tab-radius:var(--ttdk-radius-none)}&[data-rounded=sm]{--tab-radius:var(--ttdk-radius-input-sm)}&[data-rounded=md]{--tab-radius:var(--ttdk-radius-input-md)}&[data-rounded=lg]{--tab-radius:var(--ttdk-radius-input-lg)}&[data-rounded=full]{--tab-radius:var(--ttdk-radius-full)}}.ttdk-tab-item{font-family:inherit;font-weight:var(--ttdk-font-weight-medium);color:var(--ttdk-ui-color,var(--ttdk-text-icon-secondary));cursor:pointer;white-space:nowrap;user-select:none;background:0 0;border:none;outline:none;flex-shrink:0;justify-content:flex-start;align-items:center;transition:color .15s,background-color .15s,border-color .15s;display:inline-flex;position:relative;&:hover:not(:disabled){color:var(--ttdk-text-icon-primary)}&:focus-visible{box-shadow:0 0 0 2px color-mix(in oklab, var(--ttdk-brand-default) 40%, transparent);border-radius:var(--ttdk-radius-input-sm)}&[data-state=active]{color:var(--ttdk-brand-default);font-weight:var(--ttdk-font-weight-semibold)}&:disabled,&[data-disabled=true]{opacity:.45;cursor:not-allowed;pointer-events:none}}.ttdk-tab-icon{flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.ttdk-tab-label{display:inline-block}.ttdk-tab-badge{font-size:11px;font-weight:var(--ttdk-font-weight-semibold);border-radius:var(--ttdk-radius-full);background:var(--ttdk-bg-secondary-disabled);color:var(--ttdk-text-icon-secondary);justify-content:center;align-items:center;padding:1px 6px;line-height:1.2;transition:all .15s;display:inline-flex}.ttdk-tab-item[data-state=active] .ttdk-tab-badge{background:color-mix(in oklab, var(--ttdk-brand-default) 15%, transparent);color:var(--ttdk-brand-default)}.ttdk-tabs[data-variant=line]{&[data-orientation=horizontal]{& .ttdk-tabs-list{border-bottom:var(--ttdk-stroke-width-thin) solid var(--ttdk-stroke-subtle);gap:var(--ttdk-spacing-lg)}& .ttdk-tab-indicator{background-color:var(--ttdk-brand-default);border-radius:var(--ttdk-radius-input-xs) var(--ttdk-radius-input-xs) 0 0;height:2px;animation:.2s ease-in-out ttdkTabFadeIn;position:absolute;bottom:-1px;left:0;right:0}}&[data-orientation=vertical]{& .ttdk-tabs-list{border-right:var(--ttdk-stroke-width-thin) solid var(--ttdk-stroke-subtle);gap:var(--ttdk-spacing-xxs);padding-right:var(--ttdk-spacing-xxs)}& .ttdk-tab-item{border-radius:var(--tab-radius);&[data-state=active]{background:color-mix(in oklab, var(--ttdk-brand-default) 8%, transparent)}}& .ttdk-tab-indicator{background-color:var(--ttdk-brand-default);border-radius:var(--ttdk-radius-input-xs);width:2px;animation:.2s ease-in-out ttdkTabFadeIn;position:absolute;top:4px;bottom:4px;right:-5px}}}.ttdk-tabs[data-variant=pills]{width:100%;min-width:0;max-width:100%;& .ttdk-tabs-list{box-sizing:border-box;background:var(--ttdk-bg-secondary-disabled);width:100%;min-width:0;max-width:100%;padding:var(--ttdk-spacing-xxs);border-radius:var(--tab-radius);gap:var(--ttdk-spacing-xxs)}& .ttdk-tab-item{border-radius:var(--tab-radius);color:var(--ttdk-text-icon-secondary);&:hover:not(:disabled){color:var(--ttdk-text-icon-primary)}&[data-state=active]{background:var(--ttdk-bg-card);color:var(--ttdk-text-icon-primary);box-shadow:var(--ttdk-shadow-sm)}}}.ttdk-tabs-panels{width:100%}.ttdk-tab-panel{padding:var(--ttdk-spacing-md) 0;color:var(--ttdk-text-icon-primary);animation:.2s ease-in-out ttdkTabFadeIn}@keyframes ttdkTabFadeIn{0%{opacity:0}to{opacity:1}}

package/src/web/tabs/tabs.tsx

@@ -0,0 +1,332 @@
+"use client";
+import * as React from "react";
+import { useState } from "react";
+
+export interface TabItem {
+  /**
+   * Label teks yang ditampilkan pada tab item.
+   */
+  label: string;
+
+  /**
+   * Identifier unik / nilai aktif untuk tab ini.
+   */
+  value: string;
+
+  /**
+   * Ikon atau emoji opsional di samping label teks.
+   */
+  icon?: any;
+
+  /**
+   * Badge teks atau counter angka opsional (misal: '12', 'Baru').
+   */
+  badge?: string | number;
+
+  /**
+   * Menonaktifkan tab item dari interaksi klik.
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Konten tab opsional jika ingin menggunakan panel terintegrasi.
+   */
+  content?: any;
+}
+export type TabsUiProps = UiProps;
+export interface TabsProps {
+  /**
+   * Daftar tab items yang akan dirender.
+   */
+  items: TabItem[];
+
+  /**
+   * Nilai tab yang sedang aktif (v-model / controlled value).
+   */
+  value?: string;
+
+  /**
+   * Nilai tab default saat pertama kali dirender (uncontrolled initial value).
+   */
+  defaultValue?: string;
+
+  /**
+   * Orientasi tata letak tab.
+   * - `'horizontal'`: Tab berjejer ke samping dengan garis indikator di bawah (standar).
+   * - `'vertical'`: Tab berjejer ke bawah dalam kolom dengan garis indikator di samping.
+   *
+   * @default 'horizontal'
+   */
+  orientation?: "horizontal" | "vertical";
+
+  /**
+   * Varian visual tampilan tab.
+   * - `'line'`: Garis indikator bawah/samping minimalis elegan (sesuai desain TTDK).
+   * - `'pills'`: Bentuk kapsul/tombol latar belakang penuh ala Shadcn / Nuxt UI.
+   *
+   * @default 'line'
+   */
+  variant?: "line" | "pills";
+
+  /**
+   * Ukuran proporsional tab (tinggi, padding, ukuran font).
+   * - `'sm'`: Kecil (12px font, compact padding).
+   * - `'md'`: Standar (14px font, regular padding).
+   * - `'lg'`: Besar (16px font, spacious padding).
+   *
+   * @default 'md'
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Membuat lebar setiap tab mengisi rata seluruh ruang container (full width / equal width).
+   *
+   * @default false
+   */
+  fitted?: boolean;
+
+  /**
+   * Sudut kelengkungan (khusus untuk varian 'pills').
+   * - `'none'`: Sudut 0px.
+   * - `'sm'`: Sudut 4px.
+   * - `'md'`: Sudut 6px.
+   * - `'lg'`: Sudut 8px.
+   * - `'full'`: Sudut 9999px.
+   *
+   * @default 'md'
+   */
+  rounded?: "none" | "sm" | "md" | "lg" | "full";
+
+  /**
+   * Hanya me-render konten panel tab saat tab tersebut aktif (lazy rendering).
+   * Berguna untuk menghemat performa saat tab memiliki konten berat.
+   * @default false
+   */
+  lazy?: boolean;
+
+  /**
+   * Inline CSS style object native.
+   */
+  style?: React.CSSProperties;
+
+  /**
+   * Kustomisasi visual granular root container (UiProps).
+   */
+  ui?: UiProps;
+
+  /**
+   * Style kustom untuk container tab list (UiProps).
+   */
+  listStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk container tab list.
+   */
+  listClass?: string;
+
+  /**
+   * Style kustom untuk tombol tab item (UiProps).
+   */
+  tabStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk tombol tab item.
+   */
+  tabClass?: string;
+
+  /**
+   * Style kustom untuk tombol tab item saat aktif (UiProps).
+   */
+  activeTabStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk tombol tab item saat aktif.
+   */
+  activeTabClass?: string;
+
+  /**
+   * Style kustom untuk garis indikator tab (UiProps).
+   */
+  indicatorStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk garis indikator tab.
+   */
+  indicatorClass?: string;
+
+  /**
+   * Style kustom untuk badge tab (UiProps).
+   */
+  badgeStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk badge tab.
+   */
+  badgeClass?: string;
+
+  /**
+   * Style kustom untuk panel konten tab (UiProps).
+   */
+  panelStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk panel konten tab.
+   */
+  panelClass?: string;
+
+  /**
+   * Callback event saat pengguna mengganti tab aktif.
+   *
+   * @param value Nilai/identifier tab yang dipilih.
+   */
+  onChange?: (value: string) => void;
+
+  /**
+   * Class CSS kustom.
+   */
+  className?: string;
+
+  /**
+   * Konten kustom atau slot anak.
+   */
+  children?: any;
+}
+
+/**
+ * Komponen Tabs untuk navigasi multi-panel dengan orientasi Horizontal & Vertikal, varian Line, Pills, dan Enclosed.
+ */
+
+import { buildUiVars, UiProps } from "../../core/types";
+
+function Tabs(props: TabsProps) {
+  const [activeVal, setActiveVal] = useState(
+    () =>
+      props.value ||
+      props.defaultValue ||
+      (props.items && props.items[0]?.value) ||
+      ""
+  );
+
+  function getCurrentActive() {
+    return props.value !== undefined ? props.value : activeVal;
+  }
+
+  function handleTabClick(itemValue: string, disabled?: boolean) {
+    if (disabled) return;
+    setActiveVal(itemValue);
+    if (props.onChange) {
+      props.onChange(itemValue);
+    }
+  }
+
+  function getActiveItem() {
+    const current = getCurrentActive();
+    return props.items
+      ? props.items.find((item: any) => item.value === current)
+      : null;
+  }
+
+  return (
+    <div
+      className={`ttdk-tabs ${props.className || ""}`.trim()}
+      data-orientation={props.orientation || "horizontal"}
+      data-variant={props.variant || "line"}
+      data-size={props.size || "md"}
+      data-fitted={props.fitted ? "true" : "false"}
+      data-rounded={props.rounded || "md"}
+      style={{
+        ...buildUiVars(props.ui),
+        ...((props as any)["style"] || {}),
+              ...props.style,
+      }}
+    >
+      <div
+        role="tablist"
+        className={`ttdk-tabs-list ${props.listClass || ""}`.trim()}
+        aria-orientation={props.orientation || "horizontal"}
+        style={{
+          ...buildUiVars(props.listStyle),
+        }}
+      >
+        {props.items?.map((item) => (
+          <button
+            type="button"
+            role="tab"
+            key={item.value}
+            className={`ttdk-tab-item ${props.tabClass || ""} ${
+              getCurrentActive() === item.value
+                ? props.activeTabClass || ""
+                : ""
+            }`.trim()}
+            data-state={
+              getCurrentActive() === item.value ? "active" : "inactive"
+            }
+            data-disabled={item.disabled ? "true" : "false"}
+            disabled={item.disabled}
+            aria-selected={getCurrentActive() === item.value}
+            onClick={(event) => handleTabClick(item.value, item.disabled)}
+            style={{
+              ...buildUiVars(props.tabStyle),
+              ...(getCurrentActive() === item.value
+                ? buildUiVars(props.activeTabStyle)
+                : {}),
+            }}
+          >
+            {item.icon ? (
+              <span className="ttdk-tab-icon">{item.icon}</span>
+            ) : null}
+            <span className="ttdk-tab-label">{item.label}</span>
+            {item.badge !== undefined && item.badge !== null ? (
+              <span
+                className={`ttdk-tab-badge ${props.badgeClass || ""}`.trim()}
+                style={{
+                  ...buildUiVars(props.badgeStyle),
+                }}
+              >
+                {item.badge}
+              </span>
+            ) : null}
+            {getCurrentActive() === item.value &&
+            (!props.variant || props.variant === "line") ? (
+              <span
+                className={`ttdk-tab-indicator ${
+                  props.indicatorClass || ""
+                }`.trim()}
+                style={{
+                  ...buildUiVars(props.indicatorStyle),
+                }}
+              />
+            ) : null}
+          </button>
+        ))}
+      </div>
+      <div className="ttdk-tabs-panels">
+        {getActiveItem() && getActiveItem()?.content ? (
+          <>
+            {!props.lazy || getCurrentActive() === getActiveItem()?.value ? (
+              <div
+                role="tabpanel"
+                className={`ttdk-tab-panel ${props.panelClass || ""}`.trim()}
+                style={{
+                  ...buildUiVars(props.panelStyle),
+                }}
+              >
+                {getActiveItem()?.content}
+              </div>
+            ) : null}
+          </>
+        ) : null}
+        {props.children ? (
+          <div className="ttdk-tab-children">
+            <>{props.children}</>
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+export default Tabs;
+
+export { Tabs };