@proyecto-viviana/solidaria-components 0.2.9 → 0.3.0

package/src/Tabs.tsx

@@ -9,12 +9,15 @@ import {
   type Accessor,
   type JSX,
   createContext,
+  createEffect,
   createMemo,
+  createSignal,
   splitProps,
   useContext,
   For,
   Show,
-} from 'solid-js';
+  onCleanup,
+} from "solid-js";
 import {
   createTabList,
   createTab,
@@ -24,14 +27,14 @@ import {
   type AriaTabListProps,
   type AriaTabProps,
   type AriaTabPanelProps,
-} from '@proyecto-viviana/solidaria';
+} from "@proyecto-viviana/solidaria";
 import {
   createTabListState,
   type TabListState,
   type Key,
   type TabOrientation,
   type KeyboardActivation,
-} from '@proyecto-viviana/solid-stately';
+} from "@proyecto-viviana/solid-stately";
 import {
   type RenderChildren,
   type ClassNameOrFunction,
@@ -39,24 +42,20 @@ import {
   type SlotProps,
   useRenderProps,
   filterDOMProps,
-} from './utils';
+} from "./utils";
 import {
   SelectionIndicator,
   SelectionIndicatorContext,
   type SelectionIndicatorContextValue,
-} from './SelectionIndicator';
-import { SharedElementTransition } from './SharedElementTransition';
+} from "./SelectionIndicator";
+import { SharedElementTransition } from "./SharedElementTransition";
 
 export {
   SelectionIndicator,
   SelectionIndicatorContext,
   type SelectionIndicatorProps,
   type SelectionIndicatorRenderProps,
-} from './SelectionIndicator';
-
-// ============================================
-// TYPES
-// ============================================
+} from "./SelectionIndicator";
 
 export interface TabsRenderProps {
   /** The orientation of the tabs. */
@@ -94,6 +93,8 @@ export interface TabsProps<T> extends SlotProps {
   class?: ClassNameOrFunction<TabsRenderProps>;
   /** The inline style for the element. */
   style?: StyleOrFunction<TabsRenderProps>;
+  /** Ref for the root tabs element. */
+  ref?: RefLike<HTMLDivElement>;
 }
 
 export interface TabListRenderProps {
@@ -107,9 +108,11 @@ export interface TabListRenderProps {
   isFocusVisible: boolean;
 }
 
-export interface TabListProps<T> extends Omit<AriaTabListProps, 'children'>, SlotProps {
-  /** The children of the tab list - render function for each item. */
-  children: (item: T) => JSX.Element;
+export interface TabListProps<T> extends Omit<AriaTabListProps, "children">, SlotProps {
+  /** Items to render in the tab list. */
+  items?: T[];
+  /** The children of the tab list - static tabs or a render function for each item. */
+  children?: JSX.Element | ((item: T) => JSX.Element);
   /** The CSS className for the element. */
   class?: ClassNameOrFunction<TabListRenderProps>;
   /** The inline style for the element. */
@@ -131,7 +134,7 @@ export interface TabRenderProps {
   isDisabled: boolean;
 }
 
-export interface TabProps extends Omit<AriaTabProps, 'key'>, SlotProps {
+export interface TabProps extends Omit<AriaTabProps, "key">, SlotProps {
   /** The unique key for the tab. */
   id: Key;
   /** The children of the tab. */
@@ -149,6 +152,14 @@ export interface TabPanelRenderProps {
   isFocused: boolean;
   /** Whether the panel has visible focus ring. */
   isFocusVisible: boolean;
+  /** Whether the panel is non-interactive while force mounted. */
+  isInert: boolean;
+  /** Whether the panel is currently entering. */
+  isEntering: boolean;
+  /** Whether the panel is currently exiting. */
+  isExiting: boolean;
+  /** State of the tab list. */
+  state: TabListState<unknown> | null;
 }
 
 export interface TabPanelProps extends AriaTabPanelProps, SlotProps {
@@ -162,21 +173,63 @@ export interface TabPanelProps extends AriaTabPanelProps, SlotProps {
   shouldForceMount?: boolean;
 }
 
-// ============================================
-// CONTEXT
-// ============================================
+export interface TabPanelsProps extends SlotProps {
+  /** The grouped tab panels. */
+  children?: JSX.Element;
+  /** The CSS className for the element. */
+  class?: string;
+  /** The inline style for the element. */
+  style?: JSX.CSSProperties;
+}
 
 interface TabsContextValue<T> {
   state: TabListState<T>;
   items: Accessor<T[]>;
+  setTabListItems(items: T[] | undefined): void;
+  registerTab(tab: RegisteredTab): void;
+  unregisterTab(id: Key): void;
+}
+
+type RefLike<T> = ((el: T) => void) | { current?: T | null } | undefined;
+
+function assignRef<T>(ref: RefLike<T>, element: T): void {
+  if (!ref) return;
+  if (typeof ref === "function") {
+    ref(element);
+  } else if (typeof ref === "object" && "current" in ref) {
+    ref.current = element;
+  }
 }
 
 export const TabsContext = createContext<TabsContextValue<unknown> | null>(null);
 export const TabsStateContext = createContext<TabListState<unknown> | null>(null);
 
-// ============================================
-// COMPONENTS
-// ============================================
+interface RegisteredTab {
+  id: Key;
+  textValue?: string;
+  isDisabled?: boolean;
+}
+
+interface CollectionItemLike {
+  id?: Key;
+  key?: Key;
+  label?: string;
+  textValue?: string;
+  isDisabled?: boolean;
+}
+
+function collectionItemKey<T>(item: T): Key {
+  const tab = item as CollectionItemLike;
+  const key = tab.id ?? tab.key;
+  if (key == null) {
+    throw new Error("Tabs collection items require an id or key.");
+  }
+  return key;
+}
+
+function staticTabText(tab: RegisteredTab): string {
+  return tab.textValue ?? String(tab.id);
+}
 
 /**
  * Tabs provide a way to organize content into multiple sections, with only one section visible at a time.
@@ -184,23 +237,55 @@ export const TabsStateContext = createContext<TabListState<unknown> | null>(null
 export function Tabs<T>(props: TabsProps<T>): JSX.Element {
   const [local, stateProps, rest] = splitProps(
     props,
-    ['class', 'style', 'slot'],
-    ['items', 'getKey', 'getTextValue', 'getDisabled', 'disabledKeys', 'selectedKey', 'defaultSelectedKey', 'onSelectionChange', 'isDisabled', 'keyboardActivation', 'orientation']
+    ["class", "style", "slot", "ref"],
+    [
+      "items",
+      "getKey",
+      "getTextValue",
+      "getDisabled",
+      "disabledKeys",
+      "selectedKey",
+      "defaultSelectedKey",
+      "onSelectionChange",
+      "isDisabled",
+      "keyboardActivation",
+      "orientation",
+    ],
   );
 
+  const [tabListItems, setTabListItems] = createSignal<T[] | undefined>(undefined);
+  const [registeredTabs, setRegisteredTabs] = createSignal<RegisteredTab[]>([]);
+  const effectiveItems = createMemo<T[]>(() => {
+    if (stateProps.items) return stateProps.items;
+    if (tabListItems()) return tabListItems() ?? [];
+    return registeredTabs() as T[];
+  });
+
   // Create tab list state
   const state = createTabListState<T>({
     get items() {
-      return stateProps.items;
+      return effectiveItems();
     },
     get getKey() {
-      return stateProps.getKey;
+      return stateProps.getKey ?? collectionItemKey;
     },
     get getTextValue() {
-      return stateProps.getTextValue;
+      return (
+        stateProps.getTextValue ??
+        ((item: T) => {
+          const tab = item as RegisteredTab & CollectionItemLike;
+          return tab.textValue ?? tab.label ?? staticTabText(tab);
+        })
+      );
     },
     get getDisabled() {
-      return stateProps.getDisabled;
+      return (
+        stateProps.getDisabled ??
+        ((item: T) => {
+          const tab = item as RegisteredTab & CollectionItemLike;
+          return tab.isDisabled ?? false;
+        })
+      );
     },
     get disabledKeys() {
       return stateProps.disabledKeys;
@@ -225,31 +310,49 @@ export function Tabs<T>(props: TabsProps<T>): JSX.Element {
     },
   });
 
-  // Render props values
   const renderValues = createMemo<TabsRenderProps>(() => ({
     orientation: state.orientation(),
     isDisabled: state.isDisabled(),
   }));
 
-  // Resolve render props
   const renderProps = useRenderProps(
     {
       class: local.class,
       style: local.style,
       children: props.children,
-      defaultClassName: 'solidaria-Tabs',
+      defaultClassName: "solidaria-Tabs",
     },
-    renderValues
+    renderValues,
+  );
+
+  const domProps = createMemo(() =>
+    filterDOMProps(rest as Record<string, unknown>, { global: true }),
   );
 
-  // Filter DOM props
-  const domProps = createMemo(() => filterDOMProps(rest as Record<string, unknown>, { global: true }));
+  const contextValue: TabsContextValue<T> = {
+    state,
+    items: effectiveItems,
+    setTabListItems(items) {
+      setTabListItems(() => items);
+    },
+    registerTab(tab) {
+      setRegisteredTabs((current) => {
+        const next = current.filter((item) => item.id !== tab.id);
+        next.push(tab);
+        return next;
+      });
+    },
+    unregisterTab(id) {
+      setRegisteredTabs((current) => current.filter((item) => item.id !== id));
+    },
+  };
 
   return (
-    <TabsContext.Provider value={{ state, items: () => stateProps.items ?? [] }}>
+    <TabsContext.Provider value={contextValue as TabsContextValue<unknown>}>
       <TabsStateContext.Provider value={state}>
         <div
           {...domProps()}
+          ref={(element) => assignRef(local.ref, element)}
           class={renderProps.class()}
           style={renderProps.style()}
           data-orientation={state.orientation()}
@@ -266,24 +369,21 @@ export function Tabs<T>(props: TabsProps<T>): JSX.Element {
  * A TabList contains Tab elements that represent the available tabs.
  */
 export function TabList<T>(props: TabListProps<T>): JSX.Element {
-  const [local, ariaProps] = splitProps(props, [
-    'class',
-    'style',
-    'slot',
-  ]);
+  const [local, collectionProps, ariaProps] = splitProps(
+    props,
+    ["class", "style", "slot"],
+    ["items"],
+  );
 
-  // Get state from context
   const context = useContext(TabsContext);
 
   return (
-    <Show
-      when={context}
-      fallback={<div class="solidaria-TabList" role="tablist" />}
-    >
+    <Show when={context} fallback={<div class="solidaria-TabList" role="tablist" />}>
       {(ctx) => (
         <TabListInner
           context={ctx()}
           local={local}
+          items={collectionProps.items}
           ariaProps={ariaProps}
           children={props.children}
         />
@@ -295,20 +395,50 @@ export function TabList<T>(props: TabListProps<T>): JSX.Element {
 /** Inner TabList component that has access to context */
 function TabListInner<T>(props: {
   context: TabsContextValue<unknown>;
-  local: { class?: ClassNameOrFunction<TabListRenderProps>; style?: StyleOrFunction<TabListRenderProps>; slot?: string };
-  ariaProps: Omit<TabListProps<T>, 'children' | 'class' | 'style' | 'slot'>;
-  children?: (item: T) => JSX.Element;
+  local: {
+    class?: ClassNameOrFunction<TabListRenderProps>;
+    style?: StyleOrFunction<TabListRenderProps>;
+    slot?: string;
+  };
+  ariaProps: Omit<TabListProps<T>, "children" | "class" | "style" | "slot" | "items">;
+  items?: T[];
+  children?: JSX.Element | ((item: T) => JSX.Element);
 }): JSX.Element {
   const state = props.context.state as TabListState<T>;
   const items = props.context.items as Accessor<T[]>;
+  const renderItem = createMemo(() => {
+    if (typeof props.children !== "function") {
+      return undefined;
+    }
+
+    const child = props.children as (...args: unknown[]) => JSX.Element;
+    if (child.length === 0 && props.items === undefined) {
+      return undefined;
+    }
+
+    return props.children as (item: T) => JSX.Element;
+  });
+  const renderedChildren = createMemo(() => {
+    if (renderItem() || typeof props.children !== "function") {
+      return props.children as JSX.Element;
+    }
+
+    return (props.children as () => JSX.Element)();
+  });
+
+  createEffect(() => {
+    props.context.setTabListItems(props.items as unknown[] | undefined);
+  });
+
+  onCleanup(() => {
+    props.context.setTabListItems(undefined);
+  });
 
   // Create tab list aria props
   const { tabListProps } = createTabList<T>(props.ariaProps as AriaTabListProps, state);
 
-  // Create focus ring
   const { isFocused, isFocusVisible, focusProps } = createFocusRing();
 
-  // Render props values
   const renderValues = createMemo<TabListRenderProps>(() => ({
     orientation: state.orientation(),
     isDisabled: state.isDisabled(),
@@ -316,31 +446,34 @@ function TabListInner<T>(props: {
     isFocusVisible: isFocusVisible(),
   }));
 
-  // Resolve render props
   const renderProps = useRenderProps(
     {
       class: props.local.class,
       style: props.local.style,
-      defaultClassName: 'solidaria-TabList',
+      defaultClassName: "solidaria-TabList",
     },
-    renderValues
+    renderValues,
   );
 
   // Helper to safely call event handlers that may be bound tuples
   const callHandler = <E extends Event>(
     handler: JSX.EventHandlerUnion<HTMLElement, E> | undefined,
-    event: E
+    event: E,
   ) => {
     if (!handler) return;
     if (Array.isArray(handler)) {
       handler[1].call(handler[0], event);
       return;
     }
-    if (typeof handler === 'function') {
+    if (typeof handler === "function") {
       (handler as (evt: E) => void)(event);
       return;
     }
-    if (typeof handler === 'object' && 'handleEvent' in handler && typeof handler.handleEvent === 'function') {
+    if (
+      typeof handler === "object" &&
+      "handleEvent" in handler &&
+      typeof handler.handleEvent === "function"
+    ) {
       (handler.handleEvent as (evt: E) => void)(event);
     }
   };
@@ -363,10 +496,10 @@ function TabListInner<T>(props: {
   return (
     <div
       role={tabListProps.role}
-      aria-orientation={tabListProps['aria-orientation']}
-      aria-label={tabListProps['aria-label']}
-      aria-labelledby={tabListProps['aria-labelledby']}
-      aria-describedby={tabListProps['aria-describedby']}
+      aria-orientation={tabListProps["aria-orientation"]}
+      aria-label={tabListProps["aria-label"]}
+      aria-labelledby={tabListProps["aria-labelledby"]}
+      aria-describedby={tabListProps["aria-describedby"]}
       class={renderProps.class()}
       style={renderProps.style()}
       onKeyDown={handleKeyDown}
@@ -377,9 +510,13 @@ function TabListInner<T>(props: {
       data-orientation={state.orientation()}
       data-disabled={state.isDisabled() || undefined}
     >
-      <SharedElementTransition>
-        <For each={items()}>{(item) => props.children?.(item)}</For>
-      </SharedElementTransition>
+      {renderItem() ? (
+        <SharedElementTransition>
+          <For each={(props.items ?? items()) as T[]}>{(item) => renderItem()?.(item)}</For>
+        </SharedElementTransition>
+      ) : (
+        renderedChildren()
+      )}
     </div>
   );
 }
@@ -388,24 +525,17 @@ function TabListInner<T>(props: {
  * A Tab represents an individual tab in a TabList.
  */
 export function Tab(props: TabProps): JSX.Element {
-  const [local, ariaProps] = splitProps(props, [
-    'class',
-    'style',
-    'slot',
-    'id',
-  ]);
-
-  // Get state from context
+  const [local, ariaProps] = splitProps(props, ["class", "style", "slot", "id"]);
+
   const context = useContext(TabsStateContext);
+  const tabsContext = useContext(TabsContext);
 
   return (
-    <Show
-      when={context}
-      fallback={<div class="solidaria-Tab" role="tab" />}
-    >
+    <Show when={context} fallback={<div class="solidaria-Tab" role="tab" />}>
       {(state) => (
         <TabInner
           state={state()}
+          tabsContext={tabsContext}
           local={local}
           ariaProps={ariaProps}
           children={props.children}
@@ -418,11 +548,33 @@ export function Tab(props: TabProps): JSX.Element {
 /** Inner Tab component that has access to context */
 function TabInner(props: {
   state: TabListState<unknown>;
-  local: { class?: ClassNameOrFunction<TabRenderProps>; style?: StyleOrFunction<TabRenderProps>; slot?: string; id: Key };
-  ariaProps: Omit<TabProps, 'children' | 'class' | 'style' | 'slot' | 'id'>;
+  tabsContext: TabsContextValue<unknown> | null;
+  local: {
+    class?: ClassNameOrFunction<TabRenderProps>;
+    style?: StyleOrFunction<TabRenderProps>;
+    slot?: string;
+    id: Key;
+  };
+  ariaProps: Omit<TabProps, "children" | "class" | "style" | "slot" | "id">;
   children?: RenderChildren<TabRenderProps>;
 }): JSX.Element {
   let tabRef: HTMLDivElement | undefined;
+  const textValue = () => {
+    if (props.ariaProps["aria-label"]) return props.ariaProps["aria-label"];
+    return typeof props.children === "string" ? props.children : undefined;
+  };
+
+  createEffect(() => {
+    props.tabsContext?.registerTab({
+      id: props.local.id,
+      textValue: textValue(),
+      isDisabled: props.ariaProps.isDisabled,
+    });
+  });
+
+  onCleanup(() => {
+    props.tabsContext?.unregisterTab(props.local.id);
+  });
 
   // Create tab aria props
   const tabAria = createTab<unknown>(
@@ -431,22 +583,23 @@ function TabInner(props: {
       get isDisabled() {
         return props.ariaProps.isDisabled;
       },
-      get 'aria-label'() {
-        return props.ariaProps['aria-label'];
+      get "aria-label"() {
+        return props.ariaProps["aria-label"];
+      },
+      get "aria-labelledby"() {
+        return props.ariaProps["aria-labelledby"];
       },
     },
     props.state,
-    () => tabRef ?? null
+    () => tabRef ?? null,
   );
 
-  // Create hover
   const { isHovered, hoverProps } = createHover({
     get isDisabled() {
       return tabAria.isDisabled();
     },
   });
 
-  // Render props values
   const renderValues = createMemo<TabRenderProps>(() => ({
     isSelected: tabAria.isSelected(),
     isFocused: tabAria.isFocused(),
@@ -456,15 +609,14 @@ function TabInner(props: {
     isDisabled: tabAria.isDisabled(),
   }));
 
-  // Resolve render props
   const renderProps = useRenderProps(
     {
       children: props.children,
       class: props.local.class,
       style: props.local.style,
-      defaultClassName: 'solidaria-Tab',
+      defaultClassName: "solidaria-Tab",
     },
-    renderValues
+    renderValues,
   );
 
   const selectionIndicatorContext = createMemo<SelectionIndicatorContextValue>(() => ({
@@ -479,8 +631,9 @@ function TabInner(props: {
         role={tabAria.tabProps.role}
         aria-selected={tabAria.isSelected()}
         aria-disabled={tabAria.isDisabled() || undefined}
-        aria-controls={tabAria.isSelected() ? tabAria.tabProps['aria-controls'] : undefined}
-        aria-label={tabAria.tabProps['aria-label']}
+        aria-controls={tabAria.isSelected() ? tabAria.tabProps["aria-controls"] : undefined}
+        aria-label={tabAria.tabProps["aria-label"]}
+        aria-labelledby={tabAria.tabProps["aria-labelledby"]}
         tabIndex={tabAria.isSelected() && !tabAria.isDisabled() ? 0 : -1}
         class={renderProps.class()}
         style={renderProps.style()}
@@ -503,16 +656,74 @@ function TabInner(props: {
   );
 }
 
+/**
+ * Groups multiple TabPanel elements.
+ */
+export function TabPanels(props: TabPanelsProps): JSX.Element {
+  const [local, rest] = splitProps(props, ["class", "style", "slot", "children"]);
+  const domProps = createMemo(() =>
+    filterDOMProps(rest as Record<string, unknown>, { global: true }),
+  );
+  const state = useContext(TabsStateContext);
+  let ref: HTMLDivElement | undefined;
+  let previousSelectedKey: Key | null | undefined = undefined;
+  const [panelSize, setPanelSize] = createSignal<{ width?: string; height?: string }>({});
+
+  createEffect(() => {
+    const selectedKey = state?.selectedKey() ?? null;
+    if (!ref) {
+      previousSelectedKey = selectedKey;
+      return;
+    }
+
+    if (previousSelectedKey === undefined) {
+      previousSelectedKey = selectedKey;
+      return;
+    }
+
+    if (previousSelectedKey === selectedKey) return;
+    previousSelectedKey = selectedKey;
+
+    const transition = window.getComputedStyle(ref).transition;
+    const shouldMeasureWidth = /width|inline-size|all/.test(transition);
+    const shouldMeasureHeight = /height|block-size|all/.test(transition);
+    if (!shouldMeasureWidth && !shouldMeasureHeight) return;
+
+    const selectedPanel = ref.querySelector<HTMLElement>('[role="tabpanel"]:not([hidden])');
+    if (!selectedPanel) return;
+
+    setPanelSize({
+      width: shouldMeasureWidth ? `${selectedPanel.offsetWidth}px` : undefined,
+      height: shouldMeasureHeight ? `${selectedPanel.offsetHeight}px` : undefined,
+    });
+  });
+
+  const mergedStyle = (): JSX.CSSProperties =>
+    ({
+      ...local.style,
+      ...(panelSize().width ? { "--tab-panel-width": panelSize().width } : {}),
+      ...(panelSize().height ? { "--tab-panel-height": panelSize().height } : {}),
+    }) as JSX.CSSProperties;
+
+  return (
+    <div
+      {...domProps()}
+      ref={(el) => {
+        ref = el;
+      }}
+      class={local.class ?? "solidaria-TabPanels"}
+      style={mergedStyle()}
+    >
+      {local.children}
+    </div>
+  );
+}
+
 /**
  * A TabPanel displays the content for a selected Tab.
  */
 export function TabPanel(props: TabPanelProps): JSX.Element {
-  const [local, ariaProps] = splitProps(props, [
-    'class',
-    'style',
-    'slot',
-    'shouldForceMount',
-  ]);
+  const [local, ariaProps] = splitProps(props, ["class", "style", "slot", "shouldForceMount"]);
 
   // Get state from context (may be null for SSR scenarios)
   const state = useContext(TabsStateContext);
@@ -522,23 +733,29 @@ export function TabPanel(props: TabPanelProps): JSX.Element {
 
   // Create focus ring for the panel
   const { isFocused, isFocusVisible, focusProps } = createFocusRing();
+  const isInert = () =>
+    Boolean(local.shouldForceMount && ariaProps.id !== undefined && !isSelected());
+  const isEntering = () => false;
+  const isExiting = () => false;
 
-  // Render props values
   const renderValues = createMemo<TabPanelRenderProps>(() => ({
     isSelected: isSelected(),
     isFocused: isFocused(),
     isFocusVisible: isFocusVisible(),
+    isInert: isInert(),
+    isEntering: isEntering(),
+    isExiting: isExiting(),
+    state,
   }));
 
-  // Resolve render props
   const renderProps = useRenderProps(
     {
       children: props.children,
       class: local.class,
       style: local.style,
-      defaultClassName: 'solidaria-TabPanel',
+      defaultClassName: "solidaria-TabPanel",
     },
-    renderValues
+    renderValues,
   );
 
   // Determine if we should render the panel
@@ -547,7 +764,6 @@ export function TabPanel(props: TabPanelProps): JSX.Element {
   const shouldRender = () => {
     if (local.shouldForceMount) return true;
     if (ariaProps.id === undefined) {
-      // Shared panel pattern - render when any tab is selected
       return state ? state.selectedKey() !== null : true;
     }
     return isSelected();
@@ -558,9 +774,9 @@ export function TabPanel(props: TabPanelProps): JSX.Element {
       <div
         id={tabPanelProps.id}
         role={tabPanelProps.role}
-        aria-labelledby={tabPanelProps['aria-labelledby']}
-        aria-label={tabPanelProps['aria-label']}
-        aria-describedby={tabPanelProps['aria-describedby']}
+        aria-labelledby={tabPanelProps["aria-labelledby"]}
+        aria-label={tabPanelProps["aria-label"]}
+        aria-describedby={tabPanelProps["aria-describedby"]}
         tabIndex={tabPanelProps.tabIndex}
         class={renderProps.class()}
         style={renderProps.style()}
@@ -569,8 +785,13 @@ export function TabPanel(props: TabPanelProps): JSX.Element {
         data-selected={isSelected() || undefined}
         data-focused={isFocused() || undefined}
         data-focus-visible={isFocusVisible() || undefined}
-        inert={ariaProps.id !== undefined && !isSelected() ? true : undefined}
-        hidden={ariaProps.id !== undefined && !isSelected() && !local.shouldForceMount ? true : undefined}
+        inert={isInert() ? true : undefined}
+        data-inert={isInert() || undefined}
+        data-entering={isEntering() || undefined}
+        data-exiting={isExiting() || undefined}
+        hidden={
+          ariaProps.id !== undefined && !isSelected() && !local.shouldForceMount ? true : undefined
+        }
       >
         {renderProps.renderChildren()}
       </div>
@@ -578,8 +799,8 @@ export function TabPanel(props: TabPanelProps): JSX.Element {
   );
 }
 
-// Attach sub-components
 Tabs.List = TabList;
 Tabs.Tab = Tab;
+Tabs.Panels = TabPanels;
 Tabs.Panel = TabPanel;
 Tabs.SelectionIndicator = SelectionIndicator;