Tab

---
// GENERATED from packages/demos/tab/basic.demo.tsx — edit the source, not this file.
import { Tab } from "@pindoba/astro-tab";
import { stack } from "@pindoba/styled-system/patterns";

const tabItems = [
  {
    id: "dashboard",
    label: "Dashboard",
  },
  {
    id: "profile",
    label: "Profile",
  },
  {
    id: "notifications",
    label: "Notifications",
  },
  {
    id: "settings",
    label: "Settings",
  },
] as const;
---

<div
  class={stack({
    gap: "xl",
    direction: "column",
    justify: "center",
    width: "100%",
  })}
>
  <Tab items={tabItems} defaultTab="dashboard">
    <div slot="dashboard">
      <h3>Dashboard</h3>
      <p>Welcome to your dashboard! Here's an overview of your account.</p>
    </div>
    <div slot="profile">
      <h3>Profile</h3>
      <p>Update your profile information and preferences here.</p>
    </div>
    <div slot="notifications">
      <h3>Notifications</h3>
      <p>Manage your notification settings and view recent alerts.</p>
    </div>
    <div slot="settings">
      <h3>Settings</h3>
      <p>Customize your application settings and preferences.</p>
    </div>
  </Tab>
</div>

// GENERATED from packages/demos/tab/basic.demo.tsx — edit the source, not this file.
import { Tab } from "@pindoba/react-tab";
import { stack } from "@pindoba/styled-system/patterns";

const tabItems = [
  {
    id: "dashboard",
    label: "Dashboard",
  },
  {
    id: "profile",
    label: "Profile",
  },
  {
    id: "notifications",
    label: "Notifications",
  },
  {
    id: "settings",
    label: "Settings",
  },
] as const;
export default function BasicDemo() {
  return (
    <div
      className={stack({
        gap: "xl",
        direction: "column",
        justify: "center",
        width: "100%",
      })}
    >
      <Tab
        items={tabItems}
        defaultTab="dashboard"
        dashboard={
          <div>
            <h3>Dashboard</h3>
            <p>
              Welcome to your dashboard! Here's an overview of your account.
            </p>
          </div>
        }
        profile={
          <div>
            <h3>Profile</h3>
            <p>Update your profile information and preferences here.</p>
          </div>
        }
        notifications={
          <div>
            <h3>Notifications</h3>
            <p>Manage your notification settings and view recent alerts.</p>
          </div>
        }
        settings={
          <div>
            <h3>Settings</h3>
            <p>Customize your application settings and preferences.</p>
          </div>
        }
      />
    </div>
  );
}

<script lang="ts">
  // GENERATED from packages/demos/tab/basic.demo.tsx — edit the source, not this file.
  import Tab from "@pindoba/svelte-tab";
  import { stack } from "@pindoba/styled-system/patterns";

  const tabItems = [
    {
      id: "dashboard",
      label: "Dashboard",
    },
    {
      id: "profile",
      label: "Profile",
    },
    {
      id: "notifications",
      label: "Notifications",
    },
    {
      id: "settings",
      label: "Settings",
    },
  ] as const;
</script>

<div
  class={stack({
    gap: "xl",
    direction: "column",
    justify: "center",
    width: "100%",
  })}
>
  <Tab items={tabItems} defaultTab="dashboard">
    {#snippet dashboard()}
      <div>
        <h3>Dashboard</h3>
        <p>Welcome to your dashboard! Here's an overview of your account.</p>
      </div>
    {/snippet}
    {#snippet profile()}
      <div>
        <h3>Profile</h3>
        <p>Update your profile information and preferences here.</p>
      </div>
    {/snippet}
    {#snippet notifications()}
      <div>
        <h3>Notifications</h3>
        <p>Manage your notification settings and view recent alerts.</p>
      </div>
    {/snippet}
    {#snippet settings()}
      <div>
        <h3>Settings</h3>
        <p>Customize your application settings and preferences.</p>
      </div>
    {/snippet}
  </Tab>
</div>

<script setup lang="ts">
// GENERATED from packages/demos/tab/basic.demo.tsx — edit the source, not this file.
import { Tab } from "@pindoba/vue-tab";
import { stack } from "@pindoba/styled-system/patterns";

const tabItems = [
  {
    id: "dashboard",
    label: "Dashboard",
  },
  {
    id: "profile",
    label: "Profile",
  },
  {
    id: "notifications",
    label: "Notifications",
  },
  {
    id: "settings",
    label: "Settings",
  },
] as const;
</script>

<template>
  <div
    :class="
      stack({
        gap: 'xl',
        direction: 'column',
        justify: 'center',
        width: '100%',
      })
    "
  >
    <Tab :items="tabItems" defaultTab="dashboard">
      <template #dashboard>
        <div>
          <h3>Dashboard</h3>
          <p>Welcome to your dashboard! Here's an overview of your account.</p>
        </div>
      </template>
      <template #profile>
        <div>
          <h3>Profile</h3>
          <p>Update your profile information and preferences here.</p>
        </div>
      </template>
      <template #notifications>
        <div>
          <h3>Notifications</h3>
          <p>Manage your notification settings and view recent alerts.</p>
        </div>
      </template>
      <template #settings>
        <div>
          <h3>Settings</h3>
          <p>Customize your application settings and preferences.</p>
        </div>
      </template>
    </Tab>
  </div>
</template>

// GENERATED from packages/demos/tab/basic.demo.tsx — edit the source, not this file.
import { Tab } from "@pindoba/solid-tab";
import { stack } from "@pindoba/styled-system/patterns";

const tabItems = [
  {
    id: "dashboard",
    label: "Dashboard",
  },
  {
    id: "profile",
    label: "Profile",
  },
  {
    id: "notifications",
    label: "Notifications",
  },
  {
    id: "settings",
    label: "Settings",
  },
] as const;
export default function BasicDemo() {
  return (
    <div
      class={stack({
        gap: "xl",
        direction: "column",
        justify: "center",
        width: "100%",
      })}
    >
      <Tab
        items={tabItems}
        defaultTab="dashboard"
        dashboard={
          <div>
            <h3>Dashboard</h3>
            <p>
              Welcome to your dashboard! Here's an overview of your account.
            </p>
          </div>
        }
        profile={
          <div>
            <h3>Profile</h3>
            <p>Update your profile information and preferences here.</p>
          </div>
        }
        notifications={
          <div>
            <h3>Notifications</h3>
            <p>Manage your notification settings and view recent alerts.</p>
          </div>
        }
        settings={
          <div>
            <h3>Settings</h3>
            <p>Customize your application settings and preferences.</p>
          </div>
        }
      />
    </div>
  );
}

---
// GENERATED from packages/demos/tab/appearance.demo.tsx — edit the source, not this file.
import { Tab } from "@pindoba/astro-tab";
import { stack } from "@pindoba/styled-system/patterns";

const tabItems = [
  { id: "overview", label: "Overview" },
  { id: "activity", label: "Activity" },
  { id: "settings", label: "Settings" },
] as const;
const manyItems = [
  { id: "analytics", label: "Analytics" },
  { id: "reports", label: "Reports" },
  { id: "customers", label: "Customers" },
  { id: "products", label: "Products" },
  { id: "orders", label: "Orders" },
  { id: "inventory", label: "Inventory" },
  { id: "shipping", label: "Shipping" },
  { id: "returns", label: "Returns" },
  { id: "preferences", label: "Preferences" },
] as const;
---

<div class={stack({ gap: "xl", direction: "column", width: "100%" })}>
  <Tab items={tabItems} defaultTab="overview" appearance="buttons">
    <p slot="overview">
      The segmented strip — <code>appearance="buttons"</code>, rendered by
      Choice.
    </p>
    <p slot="activity">Recent activity across your account.</p>
    <p slot="settings">Customize your application settings.</p>
  </Tab>

  <Tab items={manyItems} defaultTab="analytics">
    <p slot="analytics">
      Underline tabs scroll horizontally when the strip overflows.
    </p>
    <p slot="reports">Generate and export monthly reports.</p>
    <p slot="customers">Customer accounts and segments.</p>
    <p slot="products">Manage the product catalog.</p>
    <p slot="orders">Track and fulfill orders.</p>
    <p slot="inventory">Stock levels and warehouses.</p>
    <p slot="shipping">Shipping options and carriers.</p>
    <p slot="returns">Process customer returns.</p>
    <p slot="preferences">Store preferences.</p>
  </Tab>

  <Tab items={tabItems} defaultTab="activity" thumb={false}>
    <p slot="overview">Overview of your account.</p>
    <p slot="activity">
      <code>thumb=&#123;false&#125;</code> — the selection swaps instead of
      sliding.
    </p>
    <p slot="settings">Customize your application settings.</p>
  </Tab>

  <Tab items={tabItems} defaultTab="overview" border="default">
    <p slot="overview">
      A framed group — <code>border="default"</code>. Tab groups are frameless
      by default.
    </p>
    <p slot="activity">Recent activity across your account.</p>
    <p slot="settings">Customize your application settings.</p>
  </Tab>
</div>

// GENERATED from packages/demos/tab/appearance.demo.tsx — edit the source, not this file.
import { Tab } from "@pindoba/react-tab";
import { stack } from "@pindoba/styled-system/patterns";

const tabItems = [
  { id: "overview", label: "Overview" },
  { id: "activity", label: "Activity" },
  { id: "settings", label: "Settings" },
] as const;
const manyItems = [
  { id: "analytics", label: "Analytics" },
  { id: "reports", label: "Reports" },
  { id: "customers", label: "Customers" },
  { id: "products", label: "Products" },
  { id: "orders", label: "Orders" },
  { id: "inventory", label: "Inventory" },
  { id: "shipping", label: "Shipping" },
  { id: "returns", label: "Returns" },
  { id: "preferences", label: "Preferences" },
] as const;
export default function AppearanceDemo() {
  return (
    <div className={stack({ gap: "xl", direction: "column", width: "100%" })}>
      <Tab
        items={tabItems}
        defaultTab="overview"
        appearance="buttons"
        overview={
          <p>
            The segmented strip — <code>appearance="buttons"</code>, rendered by
            Choice.
          </p>
        }
        activity={<p>Recent activity across your account.</p>}
        settings={<p>Customize your application settings.</p>}
      />

      <Tab
        items={manyItems}
        defaultTab="analytics"
        analytics={
          <p>Underline tabs scroll horizontally when the strip overflows.</p>
        }
        reports={<p>Generate and export monthly reports.</p>}
        customers={<p>Customer accounts and segments.</p>}
        products={<p>Manage the product catalog.</p>}
        orders={<p>Track and fulfill orders.</p>}
        inventory={<p>Stock levels and warehouses.</p>}
        shipping={<p>Shipping options and carriers.</p>}
        returns={<p>Process customer returns.</p>}
        preferences={<p>Store preferences.</p>}
      />

      <Tab
        items={tabItems}
        defaultTab="activity"
        thumb={false}
        overview={<p>Overview of your account.</p>}
        activity={
          <p>
            <code>
              thumb={"{"}false{"}"}
            </code>{" "}
            — the selection swaps instead of sliding.
          </p>
        }
        settings={<p>Customize your application settings.</p>}
      />

      <Tab
        items={tabItems}
        defaultTab="overview"
        border="default"
        overview={
          <p>
            A framed group — <code>border="default"</code>. Tab groups are
            frameless by default.
          </p>
        }
        activity={<p>Recent activity across your account.</p>}
        settings={<p>Customize your application settings.</p>}
      />
    </div>
  );
}

<script lang="ts">
  // GENERATED from packages/demos/tab/appearance.demo.tsx — edit the source, not this file.
  import Tab from "@pindoba/svelte-tab";
  import { stack } from "@pindoba/styled-system/patterns";

  const tabItems = [
    { id: "overview", label: "Overview" },
    { id: "activity", label: "Activity" },
    { id: "settings", label: "Settings" },
  ] as const;
  const manyItems = [
    { id: "analytics", label: "Analytics" },
    { id: "reports", label: "Reports" },
    { id: "customers", label: "Customers" },
    { id: "products", label: "Products" },
    { id: "orders", label: "Orders" },
    { id: "inventory", label: "Inventory" },
    { id: "shipping", label: "Shipping" },
    { id: "returns", label: "Returns" },
    { id: "preferences", label: "Preferences" },
  ] as const;
</script>

<div class={stack({ gap: "xl", direction: "column", width: "100%" })}>
  <Tab items={tabItems} defaultTab="overview" appearance="buttons">
    {#snippet overview()}
      <p>
        The segmented strip — <code> appearance="buttons" </code>, rendered by
        Choice.
      </p>
    {/snippet}
    {#snippet activity()}
      <p>Recent activity across your account.</p>
    {/snippet}
    {#snippet settings()}
      <p>Customize your application settings.</p>
    {/snippet}
  </Tab>

  <Tab items={manyItems} defaultTab="analytics">
    {#snippet analytics()}
      <p>Underline tabs scroll horizontally when the strip overflows.</p>
    {/snippet}
    {#snippet reports()}
      <p>Generate and export monthly reports.</p>
    {/snippet}
    {#snippet customers()}
      <p>Customer accounts and segments.</p>
    {/snippet}
    {#snippet products()}
      <p>Manage the product catalog.</p>
    {/snippet}
    {#snippet orders()}
      <p>Track and fulfill orders.</p>
    {/snippet}
    {#snippet inventory()}
      <p>Stock levels and warehouses.</p>
    {/snippet}
    {#snippet shipping()}
      <p>Shipping options and carriers.</p>
    {/snippet}
    {#snippet returns()}
      <p>Process customer returns.</p>
    {/snippet}
    {#snippet preferences()}
      <p>Store preferences.</p>
    {/snippet}
  </Tab>

  <Tab items={tabItems} defaultTab="activity" thumb={false}>
    {#snippet overview()}
      <p>Overview of your account.</p>
    {/snippet}
    {#snippet activity()}
      <p>
        <code> thumb=&#123;false&#125; </code> — the selection swaps instead of sliding.
      </p>
    {/snippet}
    {#snippet settings()}
      <p>Customize your application settings.</p>
    {/snippet}
  </Tab>

  <Tab items={tabItems} defaultTab="overview" border="default">
    {#snippet overview()}
      <p>
        A framed group — <code> border="default" </code>. Tab groups are
        frameless by default.
      </p>
    {/snippet}
    {#snippet activity()}
      <p>Recent activity across your account.</p>
    {/snippet}
    {#snippet settings()}
      <p>Customize your application settings.</p>
    {/snippet}
  </Tab>
</div>

<script setup lang="ts">
// GENERATED from packages/demos/tab/appearance.demo.tsx — edit the source, not this file.
import { Tab } from "@pindoba/vue-tab";
import { stack } from "@pindoba/styled-system/patterns";

const tabItems = [
  { id: "overview", label: "Overview" },
  { id: "activity", label: "Activity" },
  { id: "settings", label: "Settings" },
] as const;
const manyItems = [
  { id: "analytics", label: "Analytics" },
  { id: "reports", label: "Reports" },
  { id: "customers", label: "Customers" },
  { id: "products", label: "Products" },
  { id: "orders", label: "Orders" },
  { id: "inventory", label: "Inventory" },
  { id: "shipping", label: "Shipping" },
  { id: "returns", label: "Returns" },
  { id: "preferences", label: "Preferences" },
] as const;
</script>

<template>
  <div :class="stack({ gap: 'xl', direction: 'column', width: '100%' })">
    <Tab :items="tabItems" defaultTab="overview" appearance="buttons">
      <template #overview>
        <p>
          The segmented strip — <code>appearance="buttons"</code>, rendered by
          Choice.
        </p>
      </template>
      <template #activity>
        <p>Recent activity across your account.</p>
      </template>
      <template #settings>
        <p>Customize your application settings.</p>
      </template>
    </Tab>

    <Tab :items="manyItems" defaultTab="analytics">
      <template #analytics>
        <p>Underline tabs scroll horizontally when the strip overflows.</p>
      </template>
      <template #reports>
        <p>Generate and export monthly reports.</p>
      </template>
      <template #customers>
        <p>Customer accounts and segments.</p>
      </template>
      <template #products>
        <p>Manage the product catalog.</p>
      </template>
      <template #orders>
        <p>Track and fulfill orders.</p>
      </template>
      <template #inventory>
        <p>Stock levels and warehouses.</p>
      </template>
      <template #shipping>
        <p>Shipping options and carriers.</p>
      </template>
      <template #returns>
        <p>Process customer returns.</p>
      </template>
      <template #preferences>
        <p>Store preferences.</p>
      </template>
    </Tab>

    <Tab :items="tabItems" defaultTab="activity" :thumb="false">
      <template #overview>
        <p>Overview of your account.</p>
      </template>
      <template #activity>
        <p>
          <code>thumb={false}</code> — the selection swaps instead of sliding.
        </p>
      </template>
      <template #settings>
        <p>Customize your application settings.</p>
      </template>
    </Tab>

    <Tab :items="tabItems" defaultTab="overview" border="default">
      <template #overview>
        <p>
          A framed group — <code>border="default"</code>. Tab groups are
          frameless by default.
        </p>
      </template>
      <template #activity>
        <p>Recent activity across your account.</p>
      </template>
      <template #settings>
        <p>Customize your application settings.</p>
      </template>
    </Tab>
  </div>
</template>

// GENERATED from packages/demos/tab/appearance.demo.tsx — edit the source, not this file.
import { Tab } from "@pindoba/solid-tab";
import { stack } from "@pindoba/styled-system/patterns";

const tabItems = [
  { id: "overview", label: "Overview" },
  { id: "activity", label: "Activity" },
  { id: "settings", label: "Settings" },
] as const;
const manyItems = [
  { id: "analytics", label: "Analytics" },
  { id: "reports", label: "Reports" },
  { id: "customers", label: "Customers" },
  { id: "products", label: "Products" },
  { id: "orders", label: "Orders" },
  { id: "inventory", label: "Inventory" },
  { id: "shipping", label: "Shipping" },
  { id: "returns", label: "Returns" },
  { id: "preferences", label: "Preferences" },
] as const;
export default function AppearanceDemo() {
  return (
    <div class={stack({ gap: "xl", direction: "column", width: "100%" })}>
      <Tab
        items={tabItems}
        defaultTab="overview"
        appearance="buttons"
        overview={
          <p>
            The segmented strip — <code>appearance="buttons"</code>, rendered by
            Choice.
          </p>
        }
        activity={<p>Recent activity across your account.</p>}
        settings={<p>Customize your application settings.</p>}
      />

      <Tab
        items={manyItems}
        defaultTab="analytics"
        analytics={
          <p>Underline tabs scroll horizontally when the strip overflows.</p>
        }
        reports={<p>Generate and export monthly reports.</p>}
        customers={<p>Customer accounts and segments.</p>}
        products={<p>Manage the product catalog.</p>}
        orders={<p>Track and fulfill orders.</p>}
        inventory={<p>Stock levels and warehouses.</p>}
        shipping={<p>Shipping options and carriers.</p>}
        returns={<p>Process customer returns.</p>}
        preferences={<p>Store preferences.</p>}
      />

      <Tab
        items={tabItems}
        defaultTab="activity"
        thumb={false}
        overview={<p>Overview of your account.</p>}
        activity={
          <p>
            <code>
              thumb={"{"}false{"}"}
            </code>{" "}
            — the selection swaps instead of sliding.
          </p>
        }
        settings={<p>Customize your application settings.</p>}
      />

      <Tab
        items={tabItems}
        defaultTab="overview"
        border="default"
        overview={
          <p>
            A framed group — <code>border="default"</code>. Tab groups are
            frameless by default.
          </p>
        }
        activity={<p>Recent activity across your account.</p>}
        settings={<p>Customize your application settings.</p>}
      />
    </div>
  );
}

---
// GENERATED from packages/demos/tab/composable.demo.tsx — edit the source, not this file.
import { TabGroup, TabNav, TabPanel } from "@pindoba/astro-tab";
import { stack } from "@pindoba/styled-system/patterns";

const tabs = [
  {
    id: "home",
    label: "Home",
  },
  {
    id: "about",
    label: "About",
  },
  {
    id: "contact",
    label: "Contact",
  },
];

const selectedTab = "home";
---

<div
  class={stack({
    gap: "xl",
    direction: "column",
    justify: "center",
    width: "100%",
  })}
  data-ir-root="tab/composable"
>
  <TabGroup defaultTab="home" data-ir="1">
    <TabNav tabs={tabs} selectedTab="home" slot="tab-nav" />
    <div slot="panel">
      <TabPanel id="home" selected>
        <p>This is the Home tab content. You can build custom layouts here.</p>
      </TabPanel>

      <TabPanel id="about">
        <p>This is the About tab content with composable components.</p>
      </TabPanel>

      <TabPanel id="contact">
        <p>Contact us at: contact@example.com</p>
      </TabPanel>
    </div>
  </TabGroup>

  <p>
    Currently selected:{" "}
    <strong>
      <!--ir:2-->
      {selectedTab}
      <!--/ir-->
    </strong>
  </p>
</div>

<script>
  import { hydrate } from "./_client/composable.ts";

  document
    .querySelectorAll('[data-ir-root="tab/composable"]')
    .forEach((root) => hydrate([root]));
</script>

// GENERATED from packages/demos/tab/composable.demo.tsx — edit the source, not this file.
import { useState } from "react";
import { TabGroup, TabNav, TabPanel } from "@pindoba/react-tab";
import { stack } from "@pindoba/styled-system/patterns";

const tabs = [
  {
    id: "home",
    label: "Home",
  },
  {
    id: "about",
    label: "About",
  },
  {
    id: "contact",
    label: "Contact",
  },
];
export default function ComposableDemo() {
  const [selectedTab, setSelectedTab] = useState("home");
  return (
    <div
      className={stack({
        gap: "xl",
        direction: "column",
        justify: "center",
        width: "100%",
      })}
    >
      <TabGroup selectedTab={selectedTab} onTabChange={setSelectedTab}>
        <TabNav tabs={tabs} />

        <TabPanel id="home">
          <p>
            This is the Home tab content. You can build custom layouts here.
          </p>
        </TabPanel>

        <TabPanel id="about">
          <p>This is the About tab content with composable components.</p>
        </TabPanel>

        <TabPanel id="contact">
          <p>Contact us at: contact@example.com</p>
        </TabPanel>
      </TabGroup>

      <p>
        Currently selected: <strong>{selectedTab}</strong>
      </p>
    </div>
  );
}

<script lang="ts">
  // GENERATED from packages/demos/tab/composable.demo.tsx — edit the source, not this file.
  import { TabGroup, TabNav, TabPanel } from "@pindoba/svelte-tab";
  import { stack } from "@pindoba/styled-system/patterns";

  const tabs = [
    {
      id: "home",
      label: "Home",
    },
    {
      id: "about",
      label: "About",
    },
    {
      id: "contact",
      label: "Contact",
    },
  ];

  let selectedTab = $state("home");
</script>

<div
  class={stack({
    gap: "xl",
    direction: "column",
    justify: "center",
    width: "100%",
  })}
>
  <TabGroup bind:selectedTab>
    <TabNav {tabs}></TabNav>

    <TabPanel id="home">
      <p>This is the Home tab content. You can build custom layouts here.</p>
    </TabPanel>

    <TabPanel id="about">
      <p>This is the About tab content with composable components.</p>
    </TabPanel>

    <TabPanel id="contact">
      <p>Contact us at: contact@example.com</p>
    </TabPanel>
  </TabGroup>

  <p>
    Currently selected: <strong>
      {selectedTab}
    </strong>
  </p>
</div>

<script setup lang="ts">
// GENERATED from packages/demos/tab/composable.demo.tsx — edit the source, not this file.
import { ref } from "vue";
import { TabGroup, TabNav, TabPanel } from "@pindoba/vue-tab";
import { stack } from "@pindoba/styled-system/patterns";

const tabs = [
  {
    id: "home",
    label: "Home",
  },
  {
    id: "about",
    label: "About",
  },
  {
    id: "contact",
    label: "Contact",
  },
];

const selectedTab = ref("home");
</script>

<template>
  <div
    :class="
      stack({
        gap: 'xl',
        direction: 'column',
        justify: 'center',
        width: '100%',
      })
    "
  >
    <TabGroup
      :selectedTab="selectedTab"
      :onTabChange="(next: string) => (selectedTab = next)"
    >
      <TabNav :tabs="tabs"></TabNav>

      <TabPanel id="home">
        <p>This is the Home tab content. You can build custom layouts here.</p>
      </TabPanel>

      <TabPanel id="about">
        <p>This is the About tab content with composable components.</p>
      </TabPanel>

      <TabPanel id="contact">
        <p>Contact us at: contact@example.com</p>
      </TabPanel>
    </TabGroup>

    <p>
      Currently selected: <strong>{{ selectedTab }}</strong>
    </p>
  </div>
</template>

// GENERATED from packages/demos/tab/composable.demo.tsx — edit the source, not this file.
import { createSignal } from "solid-js";
import { TabGroup, TabNav, TabPanel } from "@pindoba/solid-tab";
import { stack } from "@pindoba/styled-system/patterns";

const tabs = [
  {
    id: "home",
    label: "Home",
  },
  {
    id: "about",
    label: "About",
  },
  {
    id: "contact",
    label: "Contact",
  },
];
export default function ComposableDemo() {
  const [selectedTab, setSelectedTab] = createSignal("home");
  return (
    <div
      class={stack({
        gap: "xl",
        direction: "column",
        justify: "center",
        width: "100%",
      })}
    >
      <TabGroup selectedTab={selectedTab()} onTabChange={setSelectedTab}>
        <TabNav tabs={tabs} />

        <TabPanel id="home">
          <p>
            This is the Home tab content. You can build custom layouts here.
          </p>
        </TabPanel>

        <TabPanel id="about">
          <p>This is the About tab content with composable components.</p>
        </TabPanel>

        <TabPanel id="contact">
          <p>Contact us at: contact@example.com</p>
        </TabPanel>
      </TabGroup>

      <p>
        Currently selected: <strong>{selectedTab()}</strong>
      </p>
    </div>
  );
}

---
// GENERATED from packages/demos/tab/with-badges.demo.tsx — edit the source, not this file.
import { Tab } from "@pindoba/astro-tab";
import { stack } from "@pindoba/styled-system/patterns";

const tabItems = [
  {
    id: "inbox",
    label: "Inbox",
    badge: "12",
  },
  {
    id: "drafts",
    label: "Drafts",
    badge: "3",
  },
  {
    id: "sent",
    label: "Sent",
  },
  {
    id: "archive",
    label: "Archive",
  },
] as const;
---

<div
  class={stack({
    gap: "xl",
    direction: "column",
    justify: "center",
    width: "100%",
  })}
>
  <Tab items={tabItems} defaultTab="inbox">
    <div slot="inbox">
      <h3>Inbox</h3>
      <p>You have 12 unread messages in your inbox.</p>
    </div>
    <div slot="drafts">
      <h3>Drafts</h3>
      <p>You have 3 draft messages waiting to be sent.</p>
    </div>
    <div slot="sent">
      <h3>Sent</h3>
      <p>View all messages you've sent.</p>
    </div>
    <div slot="archive">
      <h3>Archive</h3>
      <p>Access your archived messages.</p>
    </div>
  </Tab>
</div>