@cerberus-design/react 0.13.2-next-61259ca → 0.14.0-next-01a1b5e

package/build/modern/chunk-RIFQSCHT.js

@@ -1,58 +0,0 @@
-// src/context/tabs.tsx
-import { tabs } from "@cerberus/styled-system/recipes";
-import {
-  createContext,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState
-} from "react";
-import { jsx } from "react/jsx-runtime";
-var TabsContext = createContext(null);
-function Tabs(props) {
-  const { cache, active, id, palette } = props;
-  const [activeTab, setActiveTab] = useState(() => cache ? "" : active ?? "");
-  const tabsList = useRef([]);
-  const uuid = useMemo(() => {
-    return id ? `cerberus-tabs-${id}` : "cerberus-tabs";
-  }, [id]);
-  const value = useMemo(
-    () => ({
-      tabs: tabsList,
-      id: uuid,
-      active: activeTab,
-      styles: tabs({ palette }),
-      onTabUpdate: setActiveTab
-    }),
-    [activeTab, setActiveTab, palette, uuid, tabsList]
-  );
-  useEffect(() => {
-    if (cache) {
-      const cachedTab = window.localStorage.getItem(uuid);
-      setActiveTab(
-        cache ? cachedTab || (props.active ?? "") : props.active ?? ""
-      );
-    }
-  }, [cache, active, uuid]);
-  useEffect(() => {
-    if (cache && activeTab) {
-      window.localStorage.setItem(uuid, activeTab);
-    }
-  }, [activeTab, cache]);
-  return /* @__PURE__ */ jsx(TabsContext.Provider, { value, children: props.children });
-}
-function useTabsContext() {
-  const context = useContext(TabsContext);
-  if (!context) {
-    throw new Error("useTabsContext must be used within a Tabs Provider.");
-  }
-  return context;
-}
-
-export {
-  TabsContext,
-  Tabs,
-  useTabsContext
-};
-//# sourceMappingURL=chunk-RIFQSCHT.js.map

package/build/modern/chunk-RIFQSCHT.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/context/tabs.tsx"],"sourcesContent":["'use client'\n\nimport { tabs, type TabsVariantProps } from '@cerberus/styled-system/recipes'\nimport type { Pretty } from '@cerberus/styled-system/types'\nimport {\n  createContext,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type MutableRefObject,\n  type PropsWithChildren,\n} from 'react'\n\n/**\n * This module provides a Tabs component and a hook to access its context.\n * @module Tabs\n */\n\nexport interface TabsContextValue {\n  /**\n   * The ref for the tabs.\n   */\n  tabs: MutableRefObject<HTMLButtonElement[]>\n  /**\n   * The id of the tabs component.\n   */\n  id: string\n  /**\n   * The active tab id.\n   */\n  active: string\n  /**\n   * The styles for the tabs.\n   */\n  styles: Pretty<Record<'tabList' | 'tab' | 'tabPanel', string>>\n  /**\n   * Called when the active tab is updated.\n   */\n  onTabUpdate: (active: string) => void\n}\n\nexport const TabsContext = createContext<TabsContextValue | null>(null)\n\nexport interface TabsProps {\n  /**\n   * A unique identifier for the Tabs component. Typically used when there are\n   * multiple Tabs components on the same page.\n   */\n  id?: string\n  /**\n   * The default active tab id.\n   */\n  active?: string\n  /**\n   * Whether to cache the active tab state in local storage.\n   */\n  cache?: boolean\n}\n\n/**\n * The Tabs component provides a context to manage tab state.\n * @see https://cerberus.digitalu.design/react/tabs\n * @example\n * ```tsx\n * <Tabs cache>\n *  <TabList description=\"Button details\">\n *    <Tab id=\"overview\">Overview</Tab>\n *    <Tab id=\"guidelines\">Guidelines</Tab>\n *  </TabList>\n *  <TabPanels>\n *    <TabPanel id=\"overview\">Overview content</TabPanel>\n *    <TabPanel id=\"guidelines\">Guidelines content</TabPanel>\n *  </TabPanels>\n * </Tabs>\n * ```\n */\nexport function Tabs(\n  props: PropsWithChildren<TabsProps & TabsVariantProps>,\n): JSX.Element {\n  const { cache, active, id, palette } = props\n  const [activeTab, setActiveTab] = useState(() => (cache ? '' : active ?? ''))\n  const tabsList = useRef<HTMLButtonElement[]>([])\n  const uuid = useMemo(() => {\n    return id ? `cerberus-tabs-${id}` : 'cerberus-tabs'\n  }, [id])\n\n  const value = useMemo(\n    () => ({\n      tabs: tabsList,\n      id: uuid,\n      active: activeTab,\n      styles: tabs({ palette }),\n      onTabUpdate: setActiveTab,\n    }),\n    [activeTab, setActiveTab, palette, uuid, tabsList],\n  )\n\n  // Get the active tab from local storage\n  useEffect(() => {\n    if (cache) {\n      const cachedTab = window.localStorage.getItem(uuid)\n      setActiveTab(\n        cache ? cachedTab || (props.active ?? '') : props.active ?? '',\n      )\n    }\n  }, [cache, active, uuid])\n\n  // Update the active tab in local storage\n  useEffect(() => {\n    if (cache && activeTab) {\n      window.localStorage.setItem(uuid, activeTab)\n    }\n  }, [activeTab, cache])\n\n  return (\n    <TabsContext.Provider value={value}>{props.children}</TabsContext.Provider>\n  )\n}\n\n/**\n * Used to access the tabs context.\n * @returns The tabs context.\n */\nexport function useTabsContext(): TabsContextValue {\n  const context = useContext(TabsContext)\n  if (!context) {\n    throw new Error('useTabsContext must be used within a Tabs Provider.')\n  }\n  return context\n}\n"],"mappings":";AAEA,SAAS,YAAmC;AAE5C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAwGH;AA1EG,IAAM,cAAc,cAAuC,IAAI;AAmC/D,SAAS,KACd,OACa;AACb,QAAM,EAAE,OAAO,QAAQ,IAAI,QAAQ,IAAI;AACvC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,MAAO,QAAQ,KAAK,UAAU,EAAG;AAC5E,QAAM,WAAW,OAA4B,CAAC,CAAC;AAC/C,QAAM,OAAO,QAAQ,MAAM;AACzB,WAAO,KAAK,iBAAiB,EAAE,KAAK;AAAA,EACtC,GAAG,CAAC,EAAE,CAAC;AAEP,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,QAAQ;AAAA,MACR,QAAQ,KAAK,EAAE,QAAQ,CAAC;AAAA,MACxB,aAAa;AAAA,IACf;AAAA,IACA,CAAC,WAAW,cAAc,SAAS,MAAM,QAAQ;AAAA,EACnD;AAGA,YAAU,MAAM;AACd,QAAI,OAAO;AACT,YAAM,YAAY,OAAO,aAAa,QAAQ,IAAI;AAClD;AAAA,QACE,QAAQ,cAAc,MAAM,UAAU,MAAM,MAAM,UAAU;AAAA,MAC9D;AAAA,IACF;AAAA,EACF,GAAG,CAAC,OAAO,QAAQ,IAAI,CAAC;AAGxB,YAAU,MAAM;AACd,QAAI,SAAS,WAAW;AACtB,aAAO,aAAa,QAAQ,MAAM,SAAS;AAAA,IAC7C;AAAA,EACF,GAAG,CAAC,WAAW,KAAK,CAAC;AAErB,SACE,oBAAC,YAAY,UAAZ,EAAqB,OAAe,gBAAM,UAAS;AAExD;AAMO,SAAS,iBAAmC;AACjD,QAAM,UAAU,WAAW,WAAW;AACtC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,qDAAqD;AAAA,EACvE;AACA,SAAO;AACT;","names":[]}

package/build/modern/chunk-SLF6SIPB.js

@@ -1,46 +0,0 @@
-import {
-  useTabsKeyboardNavigation
-} from "./chunk-ITOIXNJS.js";
-import {
-  useTabsContext
-} from "./chunk-RIFQSCHT.js";
-
-// src/components/Tab.tsx
-import {
-  useMemo,
-  useTransition
-} from "react";
-import { cx } from "@cerberus/styled-system/css";
-import { jsx } from "react/jsx-runtime";
-function Tab(props) {
-  const { value, ...nativeProps } = props;
-  const { active, onTabUpdate, styles } = useTabsContext();
-  const [isPending, startTransition] = useTransition();
-  const { ref } = useTabsKeyboardNavigation();
-  const isActive = useMemo(() => active === value, [active, value]);
-  function handleClick(e) {
-    props.onClick?.(e);
-    startTransition(() => onTabUpdate(e.currentTarget.value));
-  }
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      ...nativeProps,
-      ...!isActive && { tabIndex: -1 },
-      "aria-controls": `panel:${value}`,
-      "aria-busy": isPending,
-      "aria-selected": isActive,
-      id: `tab:${value}`,
-      className: cx(nativeProps.className, styles.tab),
-      onClick: handleClick,
-      role: "tab",
-      ref,
-      value
-    }
-  );
-}
-
-export {
-  Tab
-};
-//# sourceMappingURL=chunk-SLF6SIPB.js.map

package/build/modern/chunk-SLF6SIPB.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/Tab.tsx"],"sourcesContent":["'use client'\n\nimport {\n  useMemo,\n  useTransition,\n  type ButtonHTMLAttributes,\n  type MouseEvent,\n} from 'react'\nimport { useTabsContext } from '../context/tabs'\nimport { cx } from '@cerberus/styled-system/css'\nimport { useTabsKeyboardNavigation } from '../aria-helpers/tabs.aria'\n\n/**\n * This module provides a Tab component.\n * @module\n */\n\nexport interface TabProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * The id of the tab that will be tracked as the active tab and used for aria\n   * attributes.\n   */\n  value: string\n}\n\n/**\n * The Tab component provides a tab element to be used in a TabList.\n * @definition [ARIA Target Size](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html#:~:text=Understanding%20SC%202.5.,%3ATarget%20Size%20(Level%20AAA)&text=The%20size%20of%20the%20target,Equivalent)\n * @see https://cerberus.digitalu.design/react/tabs\n * @memberof module:Tabs\n * @example\n * ```tsx\n * <Tabs>\n *  <TabList description=\"Profile settings\">\n *   <Tab value=\"overview\">Overview</Tab>\n *  </TabList>\n *  <TabPanel tab=\"overview\">...</TabPanel>\n * </Tabs>\n * ```\n */\nexport function Tab(props: TabProps) {\n  const { value, ...nativeProps } = props\n  const { active, onTabUpdate, styles } = useTabsContext()\n  const [isPending, startTransition] = useTransition()\n  const { ref } = useTabsKeyboardNavigation()\n  const isActive = useMemo(() => active === value, [active, value])\n\n  function handleClick(e: MouseEvent<HTMLButtonElement>) {\n    props.onClick?.(e)\n    startTransition(() => onTabUpdate(e.currentTarget.value))\n  }\n\n  return (\n    <button\n      {...nativeProps}\n      {...(!isActive && { tabIndex: -1 })}\n      aria-controls={`panel:${value}`}\n      aria-busy={isPending}\n      aria-selected={isActive}\n      id={`tab:${value}`}\n      className={cx(nativeProps.className, styles.tab)}\n      onClick={handleClick}\n      role=\"tab\"\n      ref={ref}\n      value={value}\n    />\n  )\n}\n"],"mappings":";;;;;;;;AAEA;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAEP,SAAS,UAAU;AA4Cf;AAbG,SAAS,IAAI,OAAiB;AACnC,QAAM,EAAE,OAAO,GAAG,YAAY,IAAI;AAClC,QAAM,EAAE,QAAQ,aAAa,OAAO,IAAI,eAAe;AACvD,QAAM,CAAC,WAAW,eAAe,IAAI,cAAc;AACnD,QAAM,EAAE,IAAI,IAAI,0BAA0B;AAC1C,QAAM,WAAW,QAAQ,MAAM,WAAW,OAAO,CAAC,QAAQ,KAAK,CAAC;AAEhE,WAAS,YAAY,GAAkC;AACrD,UAAM,UAAU,CAAC;AACjB,oBAAgB,MAAM,YAAY,EAAE,cAAc,KAAK,CAAC;AAAA,EAC1D;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAI,CAAC,YAAY,EAAE,UAAU,GAAG;AAAA,MACjC,iBAAe,SAAS,KAAK;AAAA,MAC7B,aAAW;AAAA,MACX,iBAAe;AAAA,MACf,IAAI,OAAO,KAAK;AAAA,MAChB,WAAW,GAAG,YAAY,WAAW,OAAO,GAAG;AAAA,MAC/C,SAAS;AAAA,MACT,MAAK;AAAA,MACL;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/chunk-UKPF7JOB.js

@@ -1,33 +0,0 @@
-import {
-  useTabsContext
-} from "./chunk-RIFQSCHT.js";
-
-// src/components/TabList.tsx
-import { cx } from "@cerberus/styled-system/css";
-import { hstack } from "@cerberus/styled-system/patterns";
-import { jsx } from "react/jsx-runtime";
-function TabList(props) {
-  const { description, ...nativeProps } = props;
-  const { id, styles } = useTabsContext();
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ...nativeProps,
-      "aria-label": description,
-      className: cx(
-        nativeProps.className,
-        hstack({
-          gap: "0"
-        }),
-        styles.tabList
-      ),
-      id: id ?? nativeProps.id,
-      role: "tablist"
-    }
-  );
-}
-
-export {
-  TabList
-};
-//# sourceMappingURL=chunk-UKPF7JOB.js.map

package/build/modern/chunk-UKPF7JOB.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/TabList.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@cerberus/styled-system/css'\nimport { hstack } from '@cerberus/styled-system/patterns'\nimport type { HTMLAttributes, PropsWithChildren } from 'react'\nimport { useTabsContext } from '../context/tabs'\n\n/**\n * This module provides a TabList component.\n * @module\n */\n\nexport interface TabListProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * A description of what the tab list contains. Required for accessibility.\n   */\n  description: string\n}\n\n/**\n * The TabList component provides a container for tab elements.\n * @see https://cerberus.digitalu.design/react/tabs\n * @memberof module:Tabs\n * @example\n * ```tsx\n * <TabList description=\"Button details\">\n *  <Tab id=\"overview\">Overview</Tab>\n *  <Tab id=\"guidelines\">Guidelines</Tab>\n * </TabList>\n * ```\n */\nexport function TabList(props: PropsWithChildren<TabListProps>) {\n  const { description, ...nativeProps } = props\n  const { id, styles } = useTabsContext()\n\n  return (\n    <div\n      {...nativeProps}\n      aria-label={description}\n      className={cx(\n        nativeProps.className,\n        hstack({\n          gap: '0',\n        }),\n        styles.tabList,\n      )}\n      id={id ?? nativeProps.id}\n      role=\"tablist\"\n    />\n  )\n}\n"],"mappings":";;;;;AAEA,SAAS,UAAU;AACnB,SAAS,cAAc;AAiCnB;AALG,SAAS,QAAQ,OAAwC;AAC9D,QAAM,EAAE,aAAa,GAAG,YAAY,IAAI;AACxC,QAAM,EAAE,IAAI,OAAO,IAAI,eAAe;AAEtC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,cAAY;AAAA,MACZ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,OAAO;AAAA,UACL,KAAK;AAAA,QACP,CAAC;AAAA,QACD,OAAO;AAAA,MACT;AAAA,MACA,IAAI,MAAM,YAAY;AAAA,MACtB,MAAK;AAAA;AAAA,EACP;AAEJ;","names":[]}

package/build/modern/components/Tab.js

@@ -1,10 +0,0 @@
-"use client";
-import {
-  Tab
-} from "../chunk-SLF6SIPB.js";
-import "../chunk-ITOIXNJS.js";
-import "../chunk-RIFQSCHT.js";
-export {
-  Tab
-};
-//# sourceMappingURL=Tab.js.map

package/build/modern/components/TabList.js

@@ -1,9 +0,0 @@
-"use client";
-import {
-  TabList
-} from "../chunk-UKPF7JOB.js";
-import "../chunk-RIFQSCHT.js";
-export {
-  TabList
-};
-//# sourceMappingURL=TabList.js.map

package/build/modern/components/TabList.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/modern/components/TabPanel.js

@@ -1,10 +0,0 @@
-"use client";
-import {
-  TabPanel
-} from "../chunk-AYIRV5CL.js";
-import "../chunk-BUVVRQLZ.js";
-import "../chunk-RIFQSCHT.js";
-export {
-  TabPanel
-};
-//# sourceMappingURL=TabPanel.js.map

package/build/modern/components/TabPanel.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/src/aria-helpers/tabs.aria.ts

@@ -1,70 +0,0 @@
-'use client'
-
-import { useEffect, useState } from 'react'
-import { useTabsContext } from '../context/tabs'
-
-function getNextIndex(index: number, length: number) {
-  return index === length - 1 ? 0 : index + 1
-}
-
-function getPrevIndex(index: number, length: number) {
-  return index === 0 ? length - 1 : index - 1
-}
-
-export function useTabsKeyboardNavigation() {
-  const { tabs } = useTabsContext()
-  const [activeTab, setActiveTab] = useState(-1)
-
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      const index =
-        activeTab === -1
-          ? tabs.current.findIndex((tab) => tab.ariaSelected === 'true')
-          : activeTab
-      const nextIndex = getNextIndex(index, tabs.current.length)
-      const prevIndex = getPrevIndex(index, tabs.current.length)
-
-      // If the active tab is not found, do nothing
-      if (index === -1) return
-
-      switch (event.key) {
-        case 'ArrowLeft':
-          event.preventDefault()
-          setActiveTab(prevIndex)
-          tabs.current[prevIndex].focus()
-          break
-        case 'ArrowRight':
-          event.preventDefault()
-          setActiveTab(nextIndex)
-          tabs.current[nextIndex].focus()
-          break
-        case 'Home':
-          event.preventDefault()
-          setActiveTab(0)
-          tabs.current[0].focus()
-          break
-        case 'End':
-          event.preventDefault()
-          setActiveTab(tabs.current.length - 1)
-          tabs.current[tabs.current.length - 1].focus()
-          break
-        default:
-          break
-      }
-    }
-
-    document.addEventListener('keydown', handleKeyDown)
-
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown)
-    }
-  }, [activeTab, tabs.current])
-
-  return {
-    ref: (tab: HTMLButtonElement) => {
-      if (tab && !tabs.current.includes(tab)) {
-        tabs.current.push(tab)
-      }
-    },
-  }
-}

package/src/components/Tab.tsx

@@ -1,68 +0,0 @@
-'use client'
-
-import {
-  useMemo,
-  useTransition,
-  type ButtonHTMLAttributes,
-  type MouseEvent,
-} from 'react'
-import { useTabsContext } from '../context/tabs'
-import { cx } from '@cerberus/styled-system/css'
-import { useTabsKeyboardNavigation } from '../aria-helpers/tabs.aria'
-
-/**
- * This module provides a Tab component.
- * @module
- */
-
-export interface TabProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  /**
-   * The id of the tab that will be tracked as the active tab and used for aria
-   * attributes.
-   */
-  value: string
-}
-
-/**
- * The Tab component provides a tab element to be used in a TabList.
- * @definition [ARIA Target Size](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html#:~:text=Understanding%20SC%202.5.,%3ATarget%20Size%20(Level%20AAA)&text=The%20size%20of%20the%20target,Equivalent)
- * @see https://cerberus.digitalu.design/react/tabs
- * @memberof module:Tabs
- * @example
- * ```tsx
- * <Tabs>
- *  <TabList description="Profile settings">
- *   <Tab value="overview">Overview</Tab>
- *  </TabList>
- *  <TabPanel tab="overview">...</TabPanel>
- * </Tabs>
- * ```
- */
-export function Tab(props: TabProps) {
-  const { value, ...nativeProps } = props
-  const { active, onTabUpdate, styles } = useTabsContext()
-  const [isPending, startTransition] = useTransition()
-  const { ref } = useTabsKeyboardNavigation()
-  const isActive = useMemo(() => active === value, [active, value])
-
-  function handleClick(e: MouseEvent<HTMLButtonElement>) {
-    props.onClick?.(e)
-    startTransition(() => onTabUpdate(e.currentTarget.value))
-  }
-
-  return (
-    <button
-      {...nativeProps}
-      {...(!isActive && { tabIndex: -1 })}
-      aria-controls={`panel:${value}`}
-      aria-busy={isPending}
-      aria-selected={isActive}
-      id={`tab:${value}`}
-      className={cx(nativeProps.className, styles.tab)}
-      onClick={handleClick}
-      role="tab"
-      ref={ref}
-      value={value}
-    />
-  )
-}

package/src/components/TabList.tsx

@@ -1,51 +0,0 @@
-'use client'
-
-import { cx } from '@cerberus/styled-system/css'
-import { hstack } from '@cerberus/styled-system/patterns'
-import type { HTMLAttributes, PropsWithChildren } from 'react'
-import { useTabsContext } from '../context/tabs'
-
-/**
- * This module provides a TabList component.
- * @module
- */
-
-export interface TabListProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * A description of what the tab list contains. Required for accessibility.
-   */
-  description: string
-}
-
-/**
- * The TabList component provides a container for tab elements.
- * @see https://cerberus.digitalu.design/react/tabs
- * @memberof module:Tabs
- * @example
- * ```tsx
- * <TabList description="Button details">
- *  <Tab id="overview">Overview</Tab>
- *  <Tab id="guidelines">Guidelines</Tab>
- * </TabList>
- * ```
- */
-export function TabList(props: PropsWithChildren<TabListProps>) {
-  const { description, ...nativeProps } = props
-  const { id, styles } = useTabsContext()
-
-  return (
-    <div
-      {...nativeProps}
-      aria-label={description}
-      className={cx(
-        nativeProps.className,
-        hstack({
-          gap: '0',
-        }),
-        styles.tabList,
-      )}
-      id={id ?? nativeProps.id}
-      role="tablist"
-    />
-  )
-}

package/src/components/TabPanel.tsx

@@ -1,49 +0,0 @@
-'use client'
-
-import { cx } from '@cerberus/styled-system/css'
-import { useMemo, type HTMLAttributes } from 'react'
-import { useTabsContext } from '../context/tabs'
-import { Show } from './Show'
-
-/**
- * This module provides a TabPanel component.
- * @module
- */
-
-export interface TabPanelProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * The unique value of the Tab that is associated with the TabPanel.
-   */
-  tab: string
-}
-
-/**
- * The TabPanel component provides a panel element to be used in a Tabs
- * provider.
- * @see https://cerberus.digitalu.design/react/tabs
- * @memberof module:Tabs
- * @example
- * ```tsx
- * <TabPanel tab="overview">
- *   Overview content
- * </TabPanel>
- * ```
- */
-export function TabPanel(props: TabPanelProps) {
-  const { tab, ...nativeProps } = props
-  const { active, styles } = useTabsContext()
-  const isActive = useMemo(() => active === tab, [active, tab])
-
-  return (
-    <Show when={isActive}>
-      <div
-        {...nativeProps}
-        {...(isActive && { tabIndex: 0 })}
-        aria-labelledby={`tab:${tab}`}
-        className={cx(nativeProps.className, styles.tabPanel)}
-        id={`panel:${tab}`}
-        role="tabpanel"
-      />
-    </Show>
-  )
-}