@pindoba/astro-tab 0.0.0-alpha-20250517160011

package/LICENSE

@@ -0,0 +1,7 @@
+Copyright (c) 2024 Eduardo Lopes
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,229 @@
+# Astro Starter Kit: Component Package
+
+This is a template for an Astro component library. Use this template for writing components to use in multiple projects or publish to NPM.
+
+```sh
+npm create astro@latest -- --template component
+```
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/non-html-pages)
+[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/non-html-pages)
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/component/devcontainer.json)
+
+## 🚀 Project Structure
+
+Inside of your Astro project, you'll see the following folders and files:
+
+```text
+/
+├── index.ts
+├── src
+│   ├── tab.astro
+│   ├── tab-group.astro
+│   ├── tab-panel.astro
+│   └── tab-nav.astro
+├── tsconfig.json
+├── package.json
+```
+
+The `index.ts` file is the "entry point" for your package. Export your components in `index.ts` to make them importable from your package.
+
+## Tab Components
+
+### Using TabNav with TabGroup
+
+The TabNav component uses the Navigation component for styled tab buttons:
+
+```astro
+---
+import { TabGroup, TabNav, TabPanel } from "@pindoba/astro-tab";
+---
+
+<TabGroup useNavigation={true} defaultTab="tab1">
+  <TabNav
+    slot="tab-nav"
+    tabs={[
+      { id: "tab1", label: "First Tab" },
+      { id: "tab2", label: "Second Tab" },
+      { id: "tab3", label: "Third Tab", disabled: true },
+    ]}
+    selectedTab="tab1"
+  />
+
+  <TabPanel id="tab1" slot="panel"> Content for the first tab </TabPanel>
+
+  <TabPanel id="tab2" slot="panel"> Content for the second tab </TabPanel>
+
+  <TabPanel id="tab3" slot="panel"> Content for the third tab </TabPanel>
+</TabGroup>
+```
+
+### Using Traditional Tabs
+
+You can still use the traditional Tab components:
+
+```astro
+---
+import { TabGroup, Tab, TabPanel } from "@pindoba/astro-tab";
+---
+
+<TabGroup>
+  <Tab id="tab1" label="First Tab" slot="tab" />
+  <Tab id="tab2" label="Second Tab" slot="tab" />
+  <Tab id="tab3" label="Third Tab" slot="tab" disabled />
+
+  <TabPanel id="tab1" slot="panel"> Content for the first tab </TabPanel>
+
+  <TabPanel id="tab2" slot="panel"> Content for the second tab </TabPanel>
+
+  <TabPanel id="tab3" slot="panel"> Content for the third tab </TabPanel>
+</TabGroup>
+```
+
+## 🧞 Commands
+
+All commands are run from the root of the project, from a terminal:
+
+| Command       | Action                                                                                                                                                                                                                           |
+| :------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `npm link`    | Registers this package locally. Run `npm link my-component-library` in an Astro project to install your components                                                                                                               |
+| `npm publish` | [Publishes](https://docs.npmjs.com/creating-and-publishing-unscoped-public-packages#publishing-unscoped-public-packages) this package to NPM. Requires you to be [logged in](https://docs.npmjs.com/cli/v8/commands/npm-adduser) |
+
+# Pindoba Tab Component
+
+A flexible and accessible tab component for Astro projects.
+
+## Installation
+
+```bash
+npm install @pindoba/astro-tab
+```
+
+## Usage
+
+### Basic Usage
+
+```astro
+---
+import { Tab } from "@pindoba/astro-tab";
+
+const tabItems = [
+  {
+    id: "tab1",
+    label: "First Tab",
+    content: "This is the content of the first tab",
+  },
+  {
+    id: "tab2",
+    label: "Second Tab",
+    content: "This is the content of the second tab",
+  },
+  {
+    id: "tab3",
+    label: "Third Tab",
+    content: "This is the content of the third tab",
+    disabled: true,
+  },
+];
+---
+
+<Tab items={tabItems} defaultTab="tab1" />
+```
+
+### With Custom Content
+
+```astro
+---
+import { Tab } from "@pindoba/astro-tab";
+
+const tabItems = [
+  {
+    id: "tab1",
+    label: "Dashboard",
+    content: (
+      <div class="p-4">
+        <h2>Dashboard Content</h2>
+        <p>Welcome to your dashboard!</p>
+      </div>
+    ),
+  },
+  {
+    id: "tab2",
+    label: "Settings",
+    content: (
+      <div class="p-4">
+        <h2>Settings</h2>
+        <form>
+          <input type="text" placeholder="Username" />
+          <button type="submit">Save</button>
+        </form>
+      </div>
+    ),
+  },
+];
+---
+
+<Tab items={tabItems} defaultTab="tab1" class="my-4" />
+```
+
+### With Custom Styling
+
+```astro
+---
+import { Tab } from "@pindoba/astro-tab";
+
+const tabItems = [
+  {
+    id: "tab1",
+    label: "First Tab",
+    content: "This is the content of the first tab",
+  },
+  {
+    id: "tab2",
+    label: "Second Tab",
+    content: "This is the content of the second tab",
+  },
+];
+
+const customStyles = {
+  root: {
+    borderRadius: "xl",
+    boxShadow: "md",
+    bg: "gray.50",
+  },
+  panel: {
+    p: "6",
+    fontSize: "lg",
+  },
+};
+---
+
+<Tab items={tabItems} defaultTab="tab1" passThrough={customStyles} />
+```
+
+## Props
+
+| Name          | Type        | Default        | Description                       |
+| ------------- | ----------- | -------------- | --------------------------------- |
+| `items`       | `TabItem[]` | Required       | Array of tab items                |
+| `defaultTab`  | `string`    | First tab's ID | ID of the tab to show by default  |
+| `passThrough` | `object`    | `{}`           | Custom styling for tab components |
+| `class`       | `string`    | `''`           | Additional CSS classes            |
+
+### TabItem Interface
+
+```typescript
+interface TabItem {
+  id: string; // Unique identifier
+  label: string; // Tab label text
+  content: any; // Tab panel content
+  selected?: boolean; // Whether tab is selected
+  disabled?: boolean; // Whether tab is disabled
+}
+```
+
+## Accessibility
+
+- Fully accessible with keyboard navigation
+- ARIA attributes for screen readers
+- Focus management for tab panels

package/index.ts

@@ -0,0 +1,14 @@
+// Do not write code directly here, instead use the `src` folder!
+// Then, use this file to export everything you want your user to access.
+
+import Tab from "./src/tab.astro";
+import TabGroup from "./src/tab-group.astro";
+import TabPanel from "./src/tab-panel.astro";
+import TabNav from "./src/tab-nav.astro";
+
+export * from "./src/tab-group.astro";
+export * from "./src/tab-nav.astro";
+export * from "./src/tab-panel.astro";
+export * from "./src/tab.astro";
+
+export { Tab, TabGroup, TabPanel, TabNav };

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@pindoba/astro-tab",
+  "version": "0.0.0-alpha-20250517160011",
+  "homepage": "https://github.com/EduardoLopes/pindoba/tree/main/packages/blocks/astro/tab#README.md",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/EduardoLopes/pindoba.git",
+    "directory": "packages/ui/astro/tab"
+  },
+  "sideEffects": false,
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": "./index.ts"
+  },
+  "files": [
+    "src",
+    "index.ts"
+  ],
+  "keywords": [
+    "astro-component"
+  ],
+  "devDependencies": {
+    "@astrojs/check": "^0.9.4",
+    "astro": "^5.7.13",
+    "typescript": "^5.8.3"
+  },
+  "peerDependencies": {
+    "astro": "^4.0.0"
+  },
+  "dependencies": {
+    "@pindoba/astro-badge": "0.0.0-alpha-20250517160011",
+    "@pindoba/astro-group": "0.0.0-alpha-20250517160011",
+    "@pindoba/astro-radio": "0.0.0-alpha-20250517160011",
+    "@pindoba/panda": "0.0.0-alpha-20250517160011",
+    "@pindoba/styles": "0.0.0-alpha-20250517160011",
+    "@pindoba/utils": "0.0.0-alpha-20250517160011"
+  },
+  "scripts": {
+    "lint": "TIMING=1 eslint . --max-warnings 0",
+    "lint:fix": "TIMING=1 eslint . --fix --max-warnings 0",
+    "format": "prettier --write .",
+    "format:fix": "prettier --write .",
+    "check": "astro check",
+    "dev": "astro check --watch",
+    "clean": "rm -rf .astro && rm -rf node_modules && rm -rf .turbo"
+  }
+}

package/src/env.d.ts

@@ -0,0 +1,8 @@
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="../.astro/types.d.ts" />
+
+/// <reference types="astro/client" />
+
+interface HTMLElementTagNameMap {
+  "pindoba-tab-group": HTMLDivElement;
+}

package/src/tab-group.astro

@@ -0,0 +1,276 @@
+---
+import { css, cx } from "@pindoba/panda/css";
+import {
+  tabStyles,
+  type TabSlots,
+  type TabStyleProps,
+} from "@pindoba/styles/tab";
+import type { HTMLAttributes } from "astro/types";
+import type { SystemStyleObject } from "@pindoba/panda/types";
+
+export interface TabGroupProps extends HTMLAttributes<"div">, TabStyleProps {
+  defaultTab?: string;
+  passThrough?: { [key in TabSlots]?: SystemStyleObject };
+  id?: string;
+}
+
+type Props = TabGroupProps;
+
+const { class: className, defaultTab, passThrough, id, ...props } = Astro.props;
+
+const classes = tabStyles.raw();
+// Use provided ID or generate a unique one
+const uniqueId = id || `tab-group-${crypto.randomUUID().slice(0, 8)}`;
+---
+
+<div
+  is="pindoba-tab-group"
+  class={cx(css(classes.root, passThrough?.root), className)}
+  data-default-tab={defaultTab}
+  id={uniqueId}
+  {...props}
+>
+  <slot name="tab-nav" />
+  <slot name="panel" />
+</div>
+
+<script>
+  // Define type for tab change event
+  interface TabChangeDetail {
+    id: string;
+    label: string;
+    disabled?: boolean;
+  }
+
+  class PindobaTabGroup extends HTMLDivElement {
+    // Cache DOM queries for better performance
+    private tablist: HTMLElement | null = null;
+    private panels: NodeListOf<Element> | null = null;
+    private activeTabId: string | null = null;
+
+    constructor() {
+      super();
+    }
+
+    connectedCallback() {
+      // Initialize after the element is connected to ensure all children are available
+      this.init();
+
+      // Listen for tab:change events from tab-nav
+      this.addEventListener("tab:change", this.handleTabChange.bind(this));
+
+      // Listen for keyboard events for a11y support
+      this.addEventListener("keydown", this.handleKeyDown.bind(this));
+    }
+
+    disconnectedCallback() {
+      // Clean up event listeners
+      this.removeEventListener("tab:change", this.handleTabChange);
+      this.removeEventListener("keydown", this.handleKeyDown);
+
+      // Clear cache references
+      this.tablist = null;
+      this.panels = null;
+      this.activeTabId = null;
+    }
+
+    private init() {
+      // Cache DOM queries
+      this.tablist = this.querySelector('[role="tablist"]');
+      this.panels = this.querySelectorAll('[role="tabpanel"]');
+
+      // check if the default tab is set
+      const defaultTab = this.getAttribute("data-default-tab");
+
+      if (defaultTab) {
+        this.selectTab(defaultTab);
+      } else {
+        // Find the first non-disabled tab
+        const firstTab = this.findFirstSelectableTab();
+        if (firstTab) {
+          this.selectTab(firstTab.id);
+        } else {
+          console.warn(`TabGroup ${this.id}: No selectable tabs found`);
+        }
+      }
+    }
+
+    private findFirstSelectableTab(): HTMLElement | null {
+      if (!this.tablist) return null;
+
+      const tabs = Array.from(
+        this.tablist.querySelectorAll('[role="tab"]'),
+      ) as HTMLElement[];
+      return (
+        tabs.find(
+          (tab) =>
+            !tab.hasAttribute("disabled") &&
+            tab.getAttribute("aria-disabled") !== "true",
+        ) || null
+      );
+    }
+
+    private handleTabChange(e: Event) {
+      try {
+        const customEvent = e as CustomEvent<TabChangeDetail>;
+
+        if (customEvent?.detail?.id) {
+          this.selectTab(customEvent.detail.id);
+        } else {
+          console.warn(
+            `TabGroup ${this.id}: Invalid tab:change event`,
+            customEvent,
+          );
+        }
+      } catch (error) {
+        console.error(`TabGroup ${this.id}: Error handling tab change`, error);
+      }
+    }
+
+    private handleKeyDown(e: KeyboardEvent) {
+      // Only handle keyboard events when focus is within the tab group
+      if (!this.contains(document.activeElement)) return;
+
+      // If the user presses Home/End, navigate to the first/last tab
+      if (e.key === "Home" || e.key === "End") {
+        e.preventDefault();
+        if (!this.tablist) return;
+
+        const tabs = Array.from(
+          this.tablist.querySelectorAll(
+            '[role="tab"]:not([disabled]):not([aria-disabled="true"])',
+          ),
+        ) as HTMLElement[];
+        if (tabs.length === 0) return;
+
+        const targetTab = e.key === "Home" ? tabs[0] : tabs[tabs.length - 1];
+        targetTab.click();
+        targetTab.focus();
+      }
+
+      // If user presses F6, move focus to the panel
+      if (e.key === "F6") {
+        e.preventDefault();
+        this.focusSelectedTabPanel();
+      }
+    }
+
+    selectTab(selectedTab?: string) {
+      if (!selectedTab) {
+        console.warn(`TabGroup ${this.id}: No tab ID provided to selectTab`);
+        return;
+      }
+
+      // Store the active tab id
+      this.activeTabId = selectedTab;
+
+      // Extract the tab ID portion if it contains a group ID
+      const tabId = selectedTab.includes("-")
+        ? selectedTab.split("-").pop()
+        : selectedTab;
+
+      if (!tabId) {
+        console.warn(
+          `TabGroup ${this.id}: Invalid tab ID format: ${selectedTab}`,
+        );
+        return;
+      }
+
+      // Find the corresponding panel
+      const panelElement = this.querySelector(
+        `#panel-${tabId}[role="tabpanel"]`,
+      );
+
+      if (!panelElement) {
+        console.warn(
+          `TabGroup ${this.id}: No panel found for tab ID: ${tabId}`,
+        );
+        return;
+      }
+
+      // Update tab state (selected attribute)
+      if (this.tablist) {
+        const tabs = this.tablist.querySelectorAll('[role="tab"]');
+        tabs.forEach((tab) => {
+          const isSelected = tab.id.includes(tabId);
+          tab.setAttribute("aria-selected", isSelected ? "true" : "false");
+          if (isSelected) {
+            tab.removeAttribute("tabindex");
+          } else {
+            tab.setAttribute("tabindex", "-1");
+          }
+        });
+      }
+
+      // Get all panels within this specific tab group only
+      const panels = this.querySelectorAll(`[role="tabpanel"]`);
+
+      // Update panel visibility with better accessibility
+      panels.forEach((panel: Element) => {
+        const isVisible = panel.id === panelElement.id;
+        panel.setAttribute("aria-hidden", isVisible ? "false" : "true");
+
+        // Use tabindex for proper focus management
+        if (isVisible) {
+          panel.setAttribute("tabindex", "0");
+          panel.classList.remove("hidden");
+        } else {
+          panel.setAttribute("tabindex", "-1");
+          panel.classList.add("hidden");
+        }
+      });
+
+      // Dispatch a custom event for external components to react to tab changes
+      try {
+        const changeEvent = new CustomEvent("tabgroup:selected", {
+          bubbles: true,
+          detail: {
+            tabId: tabId,
+            groupId: this.id,
+            focusPanel: false, // Default to false; will be set to true for keyboard navigation
+          },
+        });
+        this.dispatchEvent(changeEvent);
+      } catch (error) {
+        console.error(
+          `TabGroup ${this.id}: Error dispatching selection event`,
+          error,
+        );
+      }
+    }
+
+    // Method to update the keyboard focus to the selected tab's panel
+    private focusSelectedTabPanel() {
+      if (!this.activeTabId) return;
+
+      // Extract the tab ID portion if it contains a group ID
+      const tabId = this.activeTabId.includes("-")
+        ? this.activeTabId.split("-").pop()
+        : this.activeTabId;
+
+      try {
+        const changeEvent = new CustomEvent("tabgroup:selected", {
+          bubbles: true,
+          detail: {
+            tabId: tabId,
+            groupId: this.id,
+            focusPanel: true, // Signal that panel should receive focus
+          },
+        });
+        this.dispatchEvent(changeEvent);
+      } catch (error) {
+        console.error(
+          `TabGroup ${this.id}: Error dispatching focus panel event`,
+          error,
+        );
+      }
+    }
+  }
+
+  // Register the custom element if not already registered
+  if (!customElements.get("pindoba-tab-group")) {
+    customElements.define("pindoba-tab-group", PindobaTabGroup, {
+      extends: "div",
+    });
+  }
+</script>

package/src/tab-nav.astro

@@ -0,0 +1,184 @@
+---
+import {
+  tabStyles,
+  type TabSlots,
+  type TabStyleProps,
+} from "@pindoba/styles/tab";
+import type { HTMLAttributes } from "astro/types";
+import type { SystemStyleObject } from "@pindoba/panda/types";
+import Radio, { type RadioProps } from "@pindoba/astro-radio";
+import Group from "@pindoba/astro-group";
+import { cx } from "@pindoba/panda/css";
+import Badge from "@pindoba/astro-badge";
+export interface TabNavItem extends RadioProps {
+  id: string;
+  label: string;
+  disabled?: boolean;
+  badge?: string;
+}
+
+export interface Props extends HTMLAttributes<"nav">, TabStyleProps {
+  tabs: TabNavItem[];
+  selectedTab?: string;
+  fullWidth?: boolean;
+  passThrough?: { [key in TabSlots]?: SystemStyleObject };
+  onChange?: (tab: TabNavItem) => void;
+}
+
+const classes = tabStyles();
+
+export type TabNavProps = Props;
+
+const {
+  class: className,
+  tabs,
+  selectedTab,
+  fullWidth = true,
+  passThrough,
+  ...props
+} = Astro.props;
+
+// Safety check for required props
+if (!Array.isArray(tabs) || tabs.length === 0) {
+  throw new Error(
+    'TabNav component requires at least one tab in the "tabs" array',
+  );
+}
+
+// Transform tabs into navigation items
+const navItems: TabNavItem[] = tabs.map(
+  ({ label, id, disabled, badge, ...rest }: TabNavItem) => ({
+    label: label || "",
+    id: id || crypto.randomUUID(), // Ensure an ID always exists
+    disabled: disabled || false,
+    badge: badge || "",
+    ...rest,
+  }),
+);
+
+const radioGroupId = crypto.randomUUID();
+---
+
+<nav
+  is="pindoba-tab-nav"
+  class={cx(classes.nav, className)}
+  role="tablist"
+  data-tablist
+  aria-orientation="horizontal"
+  {...props}
+>
+  <Group direction="horizontal" noBorderRadius="bottom">
+    {
+      navItems.map((tab) => {
+        const { id, label, disabled, badge, ...rest } = tab;
+
+        return (
+          <Radio
+            name={radioGroupId}
+            data-tab-id={id}
+            id={`${radioGroupId}-${id}`}
+            checked={id === selectedTab}
+            appearance="tab-horizontal"
+            disabled={disabled}
+            aria-controls={`panel-${id}`}
+            aria-selected={id === selectedTab ? "true" : "false"}
+            role="tab"
+            fullWidth={fullWidth}
+            {...rest}
+          >
+            {label}
+            {badge && <Badge size="sm">{badge}</Badge>}
+          </Radio>
+        );
+      })
+    }
+  </Group>
+</nav>
+
+<script>
+  // Define TabNavItem type for client script
+  type TabNavItem = {
+    id: string;
+    label: string;
+    disabled?: boolean;
+  };
+
+  class PindobaTabNav extends HTMLElement {
+    private radioInputs: NodeListOf<HTMLInputElement> | null = null;
+
+    connectedCallback() {
+      this.initTabNav();
+    }
+
+    disconnectedCallback() {
+      this.cleanup();
+    }
+
+    private initTabNav() {
+      // Use 'this' directly as it's the nav element with role="tablist"
+      this.radioInputs = this.querySelectorAll('input[type="radio"]');
+
+      if (!this.radioInputs || this.radioInputs.length === 0) {
+        console.warn("TabNav: No radio inputs found");
+        return;
+      }
+
+      // Add listeners directly - this avoids TypeScript issues with event binding
+      this.radioInputs.forEach((radio) => {
+        radio.addEventListener("change", (e: Event) => {
+          this.handleRadioChange(e);
+        });
+      });
+    }
+
+    private handleRadioChange(e: Event) {
+      const target = e.target as HTMLInputElement;
+      if (!target || !target.checked) return;
+
+      const tabId = target.dataset.tabId;
+      if (!tabId) {
+        console.warn("TabNav: Changed radio button has no tab ID");
+        return;
+      }
+
+      // Get the text content from the label element
+      const labelElement = target.closest("label");
+      if (!labelElement) {
+        console.warn("TabNav: Cannot find label element for radio button");
+        return;
+      }
+
+      const textDiv = labelElement.querySelector("div");
+      const tabLabel = textDiv?.textContent?.trim() || "";
+
+      // Create tab object to match TabNavItem interface
+      const tab: TabNavItem = {
+        id: tabId,
+        label: tabLabel,
+        disabled: target.disabled,
+      };
+
+      // Dispatch custom event that can be listened to by parent components
+      try {
+        const customEvent = new CustomEvent("tab:change", {
+          detail: tab,
+          bubbles: true,
+        });
+
+        // Dispatch the event from this element
+        this.dispatchEvent(customEvent);
+      } catch (error) {
+        console.error("TabNav: Error dispatching tab:change event", error);
+      }
+    }
+
+    private cleanup() {
+      this.radioInputs = null;
+    }
+  }
+
+  // Register the web component if not already registered
+  if (!customElements.get("pindoba-tab-nav")) {
+    customElements.define("pindoba-tab-nav", PindobaTabNav, { extends: "nav" });
+  }
+</script>

package/src/tab-panel.astro

@@ -0,0 +1,127 @@
+---
+import { css, cx } from "@pindoba/panda/css";
+import {
+  tabStyles,
+  type TabSlots,
+  type TabStyleProps,
+} from "@pindoba/styles/tab";
+import type { HTMLAttributes } from "astro/types";
+import type { SystemStyleObject } from "@pindoba/panda/types";
+
+export interface TabPanelProps extends HTMLAttributes<"div">, TabStyleProps {
+  id: string;
+  selected?: boolean;
+  passThrough?: { [key in TabSlots]?: SystemStyleObject };
+  ariaLabelledBy?: string;
+}
+
+type Props = TabPanelProps;
+
+const {
+  class: className,
+  id,
+  selected = false,
+  passThrough,
+  ariaLabelledBy,
+  ...props
+} = Astro.props;
+
+// Validation for required props
+if (!id) {
+  throw new Error('TabPanel component requires an "id" prop');
+}
+
+const classes = tabStyles.raw();
+
+const panelId = `panel-${id}`;
+
+// For improved accessibility, determine which element labels this panel
+const labelId = ariaLabelledBy || id;
+---
+
+<div
+  id={panelId}
+  role="tabpanel"
+  class={cx(
+    css(classes.panel, passThrough?.panel),
+    !selected && "hidden",
+    className,
+  )}
+  aria-labelledby={labelId}
+  aria-hidden={!selected ? "true" : "false"}
+  tabindex={selected ? "0" : "-1"}
+  data-tab-panel
+  data-tab-id={id}
+  {...props}
+>
+  <slot />
+</div>
+
+<script>
+  // Client-side behavior for tab panels
+  class PindobaTabPanel extends HTMLDivElement {
+    private unsubscribe: (() => void) | null = null;
+
+    connectedCallback() {
+      // Find the parent tab group
+      const tabGroup = this.closest('[is="pindoba-tab-group"]');
+      if (!tabGroup) return;
+
+      // Listen for selection changes
+      const handleSelection = (e: CustomEvent) => {
+        if (!e.detail) return;
+
+        // Get our tab id from the data attribute
+        const myTabId = this.dataset.tabId;
+        if (!myTabId) return;
+
+        // Check if this panel should be shown
+        const isVisible = e.detail.tabId === myTabId;
+
+        // Update attributes for accessibility
+        this.setAttribute("aria-hidden", isVisible ? "false" : "true");
+        this.setAttribute("tabindex", isVisible ? "0" : "-1");
+
+        // Update visibility
+        if (isVisible) {
+          this.classList.remove("hidden");
+          // Only focus if the selection was triggered by keyboard navigation
+          if (e.detail.focusPanel) {
+            this.focus();
+          }
+        } else {
+          this.classList.add("hidden");
+        }
+      };
+
+      // Add event listener
+      tabGroup.addEventListener(
+        "tabgroup:selected",
+        handleSelection as EventListener,
+      );
+
+      // Store cleanup function
+      this.unsubscribe = () => {
+        tabGroup.removeEventListener(
+          "tabgroup:selected",
+          handleSelection as EventListener,
+        );
+      };
+    }
+
+    disconnectedCallback() {
+      // Clean up event listeners
+      if (this.unsubscribe) {
+        this.unsubscribe();
+        this.unsubscribe = null;
+      }
+    }
+  }
+
+  // Register the custom element if not already registered
+  if (!customElements.get("pindoba-tab-panel")) {
+    customElements.define("pindoba-tab-panel", PindobaTabPanel, {
+      extends: "div",
+    });
+  }
+</script>

package/src/tab.astro

@@ -0,0 +1,141 @@
+---
+import { cx } from "@pindoba/panda/css";
+import type { SystemStyleObject } from "@pindoba/panda/types";
+import { type TabSlots } from "@pindoba/styles/tab";
+import TabGroup, { type TabGroupProps } from "./tab-group.astro";
+import TabNav, { type TabNavItem } from "./tab-nav.astro";
+import TabPanel from "./tab-panel.astro";
+
+export interface TabItem extends TabNavItem {
+  selected?: boolean;
+  disabled?: boolean;
+}
+
+export interface TabProps extends Omit<TabGroupProps, "defaultTab"> {
+  items: TabItem[];
+  defaultTab?: string;
+  fullWidth?: boolean;
+  passThrough?: { [key in TabSlots]?: SystemStyleObject };
+  onTabChange?: (tabId: string) => void;
+}
+
+type Props = TabProps;
+
+const {
+  items,
+  defaultTab,
+  fullWidth = true,
+  passThrough,
+  class: className,
+  ...props
+} = Astro.props;
+
+// Validate input props
+if (!Array.isArray(items) || items.length === 0) {
+  throw new Error(
+    'Tab component requires at least one item in the "items" array',
+  );
+}
+
+// Ensure all items have an ID
+items.forEach((item, index) => {
+  if (!item.id) {
+    throw new Error(`Tab item at index ${index} is missing an "id" property`);
+  }
+});
+
+// Find the selected tab or use the default tab
+const selectedTabId =
+  items.find((item) => item.selected)?.id || defaultTab || items[0]?.id;
+
+// Generate a unique ID for this tab component
+const tabGroupId = crypto.randomUUID().slice(0, 8);
+---
+
+<TabGroup
+  defaultTab={selectedTabId}
+  class={cx(className)}
+  passThrough={passThrough}
+  id={`tab-group-${tabGroupId}`}
+  data-tab-component
+  {...props}
+>
+  <TabNav
+    slot="tab-nav"
+    tabs={items}
+    selectedTab={selectedTabId}
+    fullWidth={fullWidth}
+    passThrough={passThrough}
+  />
+  <div slot="panel" class="tab-panels">
+    {
+      items.map(async (item) => {
+        const hasSlotContent = Astro.slots.has(item.id);
+
+        // Check for empty content
+        let content = "";
+        if (hasSlotContent) {
+          content = await Astro.slots.render(item.id);
+        }
+
+        // If there's no content, render a placeholder or warning
+        if (!content.trim()) {
+          content = `<div class="tab-panel-empty">No content for tab "${item.label || item.id}"</div>`;
+        }
+
+        return (
+          <TabPanel
+            id={item.id}
+            selected={item.id === selectedTabId}
+            passThrough={passThrough}
+            ariaLabelledBy={`${tabGroupId}-${item.id}`}
+            data-tab-content={item.id}
+          >
+            <Fragment set:html={content} />
+          </TabPanel>
+        );
+      })
+    }
+  </div>
+</TabGroup>
+
+<script>
+  // Client-side behavior to enhance the tab component
+  document.addEventListener("DOMContentLoaded", () => {
+    // Find all tab components
+    const tabComponents = document.querySelectorAll("[data-tab-component]");
+
+    tabComponents.forEach((tabComponent) => {
+      // Listen for tab selection events
+      tabComponent.addEventListener("tabgroup:selected", (e) => {
+        const customEvent = e as CustomEvent;
+
+        // Dispatch a higher-level event that can be listened to by consumers
+        if (customEvent?.detail?.tabId) {
+          const tabChangeEvent = new CustomEvent("tab:selected", {
+            bubbles: true,
+            detail: {
+              tabId: customEvent.detail.tabId,
+              groupId: customEvent.detail.groupId,
+            },
+          });
+
+          tabComponent.dispatchEvent(tabChangeEvent);
+        }
+      });
+    });
+  });
+</script>
+
+<style>
+  .tab-panels {
+    width: 100%;
+  }
+
+  .tab-panel-empty {
+    padding: 1rem;
+    color: #666;
+    font-style: italic;
+    text-align: center;
+  }
+</style>