@primer/react 38.29.0-rc.d7f442775 → 38.29.0-rc.ee664b93c

package/dist/experimental/Tabs/Tabs.js

@@ -1,17 +1,10 @@
 import { c } from 'react-compiler-runtime';
-import React, { useId, createContext, useContext } from 'react';
+import React, { useId } from 'react';
 import useIsomorphicLayoutEffect from '../../utils/useIsomorphicLayoutEffect.js';
 import { useControllableState } from '../../hooks/useControllableState.js';
+import { TabsContext } from './TabsContext.js';
 import { jsx } from 'react/jsx-runtime';
-import { useProvidedRefOrCreate } from '../../hooks/useProvidedRefOrCreate.js';
 
-/**
- * The Tabs component provides the base structure for a tabbed interface, without providing any formal requirement on DOM structure or styling.
- * It manages the state of the selected tab, handles tab ordering/selection and provides context to its child components to ensure an accessible experience.
- *
- * This is intended to be used in conjunction with the `useTab`, `useTabList`, and `useTabPanel` hooks to build a fully accessible tabs component.
- * The `Tab`, `TabList`, and `TabPanel` components are provided for convenience to showcase the API & implementation.
- */
 function Tabs(props) {
   var _props$defaultValue;
   const $ = c(13);
@@ -86,232 +79,5 @@ function Tabs(props) {
   }
   return t5;
 }
-function useTabList(props) {
-  const $ = c(9);
-  const {
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledby,
-    "aria-orientation": ariaOrientation
-  } = props;
-  const ref = useProvidedRefOrCreate(props.ref);
-  let t0;
-  if ($[0] !== ariaOrientation || $[1] !== ref) {
-    t0 = event => {
-      const {
-        current: tablist
-      } = ref;
-      if (tablist === null) {
-        return;
-      }
-      const tabs = getFocusableTabs(tablist);
-      const isVertical = ariaOrientation === "vertical";
-      const nextKey = isVertical ? "ArrowDown" : "ArrowRight";
-      const prevKey = isVertical ? "ArrowUp" : "ArrowLeft";
-      if (event.key === nextKey || event.key === prevKey || event.key === "Home" || event.key === "End") {
-        event.preventDefault();
-        event.stopPropagation();
-      }
-      if (event.key === nextKey) {
-        const selectedTabIndex = tabs.findIndex(_temp);
-        if (selectedTabIndex === -1) {
-          return;
-        }
-        const nextTabIndex = (selectedTabIndex + 1) % tabs.length;
-        tabs[nextTabIndex].focus();
-      } else {
-        if (event.key === prevKey) {
-          const selectedTabIndex_0 = tabs.findIndex(_temp2);
-          if (selectedTabIndex_0 === -1) {
-            return;
-          }
-          const nextTabIndex_0 = (tabs.length + selectedTabIndex_0 - 1) % tabs.length;
-          tabs[nextTabIndex_0].focus();
-        } else {
-          if (event.key === "Home") {
-            if (tabs[0]) {
-              tabs[0].focus();
-            }
-          } else {
-            if (event.key === "End") {
-              if (tabs.length > 0) {
-                tabs[tabs.length - 1].focus();
-              }
-            }
-          }
-        }
-      }
-    };
-    $[0] = ariaOrientation;
-    $[1] = ref;
-    $[2] = t0;
-  } else {
-    t0 = $[2];
-  }
-  const onKeyDown = t0;
-  const t1 = ariaOrientation !== null && ariaOrientation !== void 0 ? ariaOrientation : "horizontal";
-  let t2;
-  if ($[3] !== ariaLabel || $[4] !== ariaLabelledby || $[5] !== onKeyDown || $[6] !== ref || $[7] !== t1) {
-    t2 = {
-      tabListProps: {
-        ref,
-        "aria-label": ariaLabel,
-        "aria-labelledby": ariaLabelledby,
-        "aria-orientation": t1,
-        role: "tablist",
-        onKeyDown
-      }
-    };
-    $[3] = ariaLabel;
-    $[4] = ariaLabelledby;
-    $[5] = onKeyDown;
-    $[6] = ref;
-    $[7] = t1;
-    $[8] = t2;
-  } else {
-    t2 = $[8];
-  }
-  return t2;
-}
-function _temp2(tab_0) {
-  return tab_0.getAttribute("aria-selected") === "true";
-}
-function _temp(tab) {
-  return tab.getAttribute("aria-selected") === "true";
-}
-function getFocusableTabs(tablist) {
-  return Array.from(tablist.querySelectorAll('[role="tab"]:not([aria-disabled])'));
-}
-/**
- * A custom hook that provides the props needed for a tab component.
- * The props returned should be spread onto the component (typically a button) with the `role=tab`, under a `tablist`.
- */
-function useTab(props) {
-  const $ = c(21);
-  const {
-    disabled,
-    value
-  } = props;
-  const tabs = useTabs();
-  const selected = tabs.selectedValue === value;
-  const id = `${tabs.groupId}-tab-${value}`;
-  const panelId = `${tabs.groupId}-panel-${value}`;
-  let t0;
-  if ($[0] !== tabs || $[1] !== value) {
-    t0 = function onKeyDown(event) {
-      if (event.key === " " || event.key === "Enter") {
-        tabs.selectTab(value);
-      }
-    };
-    $[0] = tabs;
-    $[1] = value;
-    $[2] = t0;
-  } else {
-    t0 = $[2];
-  }
-  const onKeyDown = t0;
-  let t1;
-  if ($[3] !== disabled || $[4] !== tabs || $[5] !== value) {
-    t1 = function onMouseDown(event_0) {
-      if (!disabled && event_0.button === 0 && event_0.ctrlKey === false) {
-        tabs.selectTab(value);
-      } else {
-        event_0.preventDefault();
-      }
-    };
-    $[3] = disabled;
-    $[4] = tabs;
-    $[5] = value;
-    $[6] = t1;
-  } else {
-    t1 = $[6];
-  }
-  const onMouseDown = t1;
-  let t2;
-  if ($[7] !== disabled || $[8] !== selected || $[9] !== tabs || $[10] !== value) {
-    t2 = function onFocus() {
-      if (!selected && !disabled) {
-        tabs.selectTab(value);
-      }
-    };
-    $[7] = disabled;
-    $[8] = selected;
-    $[9] = tabs;
-    $[10] = value;
-    $[11] = t2;
-  } else {
-    t2 = $[11];
-  }
-  const onFocus = t2;
-  const t3 = disabled ? true : undefined;
-  const t4 = selected ? 0 : -1;
-  let t5;
-  if ($[12] !== id || $[13] !== onFocus || $[14] !== onKeyDown || $[15] !== onMouseDown || $[16] !== panelId || $[17] !== selected || $[18] !== t3 || $[19] !== t4) {
-    t5 = {
-      tabProps: {
-        "aria-disabled": t3,
-        "aria-controls": panelId,
-        "aria-selected": selected,
-        onKeyDown,
-        onMouseDown,
-        onFocus,
-        id,
-        role: "tab",
-        tabIndex: t4
-      }
-    };
-    $[12] = id;
-    $[13] = onFocus;
-    $[14] = onKeyDown;
-    $[15] = onMouseDown;
-    $[16] = panelId;
-    $[17] = selected;
-    $[18] = t3;
-    $[19] = t4;
-    $[20] = t5;
-  } else {
-    t5 = $[20];
-  }
-  return t5;
-}
-/** Utility hook for tab panels */
-function useTabPanel(props) {
-  const $ = c(5);
-  const {
-    value
-  } = props;
-  const tabs = useTabs();
-  const id = `${tabs.groupId}-panel-${value}`;
-  const tabId = `${tabs.groupId}-tab-${value}`;
-  const t0 = tabs.selectedValue === value ? "" : undefined;
-  const t1 = tabs.selectedValue !== value;
-  let t2;
-  if ($[0] !== id || $[1] !== t0 || $[2] !== t1 || $[3] !== tabId) {
-    t2 = {
-      tabPanelProps: {
-        "aria-labelledby": tabId,
-        "data-selected": t0,
-        id,
-        hidden: t1,
-        role: "tabpanel"
-      }
-    };
-    $[0] = id;
-    $[1] = t0;
-    $[2] = t1;
-    $[3] = tabId;
-    $[4] = t2;
-  } else {
-    t2 = $[4];
-  }
-  return t2;
-}
-const TabsContext = /*#__PURE__*/createContext(null);
-function useTabs() {
-  const context = useContext(TabsContext);
-  if (context) {
-    return context;
-  }
-  throw new Error("Component must be used within a <Tabs> component");
-}
 
-export { Tabs, useTab, useTabList, useTabPanel };
+export { Tabs };

package/dist/experimental/Tabs/TabsContext.d.ts

@@ -0,0 +1,3 @@
+import type { TabsContextValue } from './types';
+export declare const TabsContext: import("react").Context<TabsContextValue | null>;
+//# sourceMappingURL=TabsContext.d.ts.map

package/dist/experimental/Tabs/TabsContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsContext.d.ts","sourceRoot":"","sources":["../../../src/experimental/Tabs/TabsContext.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,SAAS,CAAA;AAE7C,eAAO,MAAM,WAAW,kDAA+C,CAAA"}

package/dist/experimental/Tabs/TabsContext.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const TabsContext = /*#__PURE__*/createContext(null);
+
+export { TabsContext };

package/dist/experimental/Tabs/index.d.ts

@@ -1,3 +1,6 @@
-export { Tabs, useTab, useTabList, useTabPanel } from './Tabs';
-export type { TabsProps, TabListProps, TabProps, TabPanelProps } from './Tabs';
+export { Tabs } from './Tabs';
+export { useTab } from './useTab';
+export { useTabList } from './useTabList';
+export { useTabPanel } from './useTabPanel';
+export type { TabsProps, TabListProps, TabProps, TabPanelProps } from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/experimental/Tabs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/experimental/Tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,WAAW,EAAC,MAAM,QAAQ,CAAA;AAC5D,YAAY,EAAC,SAAS,EAAE,YAAY,EAAE,QAAQ,EAAE,aAAa,EAAC,MAAM,QAAQ,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/experimental/Tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,QAAQ,CAAA;AAC3B,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAA;AAC/B,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAA;AACvC,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAA;AACzC,YAAY,EAAC,SAAS,EAAE,YAAY,EAAE,QAAQ,EAAE,aAAa,EAAC,MAAM,SAAS,CAAA"}

package/dist/experimental/Tabs/types.d.ts

@@ -0,0 +1,107 @@
+import type React from 'react';
+import type { AriaAttributes, PropsWithChildren } from 'react';
+/**
+ * Props to be used when the Tabs component's state is controlled by the parent
+ */
+type ControlledTabsProps = {
+    /**
+     * Specify the selected tab
+     */
+    value: string;
+    /**
+     * `defaultValue` can only be used in the uncontrolled variant of the component
+     * If you need to use `defaultValue`, please switch to the uncontrolled variant by removing the `value` prop.
+     */
+    defaultValue?: never;
+    /**
+     * Provide an optional callback that is called when the selected tab changes
+     */
+    onValueChange: ({ value }: {
+        value: string;
+    }) => void;
+};
+/**
+ * Props to be used when the Tabs component is managing its own state
+ */
+type UncontrolledTabsProps = {
+    /**
+     * Specify the default selected tab
+     */
+    defaultValue: string;
+    /**
+     * `value` can only be used in the controlled variant of the component
+     * If you need to use `value`, please switch to the controlled variant by removing the `defaultValue` prop.
+     */
+    value?: never;
+    /**
+     * Provide an optional callback that is called when the selected tab changes
+     */
+    onValueChange?: ({ value }: {
+        value: string;
+    }) => void;
+};
+export type TabsProps = PropsWithChildren<ControlledTabsProps | UncontrolledTabsProps>;
+type Label = {
+    'aria-label': string;
+};
+type LabelledBy = {
+    'aria-labelledby': string;
+};
+type Labelled = Label | LabelledBy;
+export type TabListProps = Labelled & React.HTMLAttributes<HTMLElement>;
+export type TabProps = React.ComponentPropsWithoutRef<'button'> & {
+    /**
+     * Specify whether the tab is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Provide a value that uniquely identifies the tab. This should mirror the
+     * value provided to the corresponding TabPanel
+     */
+    value: string;
+};
+export type TabPanelProps = {
+    /**
+     * Provide a value that uniquely identifies the tab panel. This should mirror
+     * the value set for the corresponding tab
+     */
+    value: string;
+};
+export type TabsContextValue = {
+    groupId: string;
+    selectedValue: string;
+    selectTab(value: string): void;
+};
+export type TabListHookProps<T extends HTMLElement> = TabListProps & {
+    /** Optional ref to use for the tablist. If none is provided, one will be generated automatically */
+    ref?: React.RefObject<T>;
+};
+export type TabListHookResult<T extends HTMLElement> = {
+    /** Props to be spread onto the tablist element */
+    tabListProps: {
+        onKeyDown: React.KeyboardEventHandler<T>;
+        'aria-orientation': AriaAttributes['aria-orientation'];
+        'aria-label': AriaAttributes['aria-label'];
+        'aria-labelledby': AriaAttributes['aria-labelledby'];
+        ref: React.RefObject<T | null>;
+        role: 'tablist';
+    };
+};
+export type TabHookResult<T extends HTMLElement> = {
+    /** Props to be spread onto the tab component */
+    tabProps: Pick<React.HTMLProps<T>, 'aria-controls' | 'aria-disabled' | 'aria-selected' | 'id' | 'tabIndex' | 'onKeyDown' | 'onMouseDown' | 'onFocus'> & {
+        role: 'tab';
+    };
+};
+export type TabPanelHookResult<T extends HTMLElement> = {
+    /** Props to be spread onto the tabpanel component */
+    tabPanelProps: Pick<React.HTMLProps<T>, 'aria-labelledby' | 'id' | 'hidden'> & {
+        /**
+         * An identifier to aid in styling when this panel is selected & active
+         */
+        'data-selected': string | undefined;
+        role: 'tabpanel';
+    };
+};
+export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/experimental/Tabs/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/experimental/Tabs/types.ts"],"names":[],"mappings":"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"}

package/dist/experimental/Tabs/useTab.d.ts

@@ -0,0 +1,7 @@
+import type { TabHookResult, TabProps } from './types';
+/**
+ * A custom hook that provides the props needed for a tab component.
+ * The props returned should be spread onto the component (typically a button) with the `role=tab`, under a `tablist`.
+ */
+export declare function useTab<T extends HTMLElement>(props: Pick<TabProps, 'disabled' | 'value'>): TabHookResult<T>;
+//# sourceMappingURL=useTab.d.ts.map

package/dist/experimental/Tabs/useTab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTab.d.ts","sourceRoot":"","sources":["../../../src/experimental/Tabs/useTab.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,SAAS,CAAA;AAGpD;;;GAGG;AACH,wBAAgB,MAAM,CAAC,CAAC,SAAS,WAAW,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,UAAU,GAAG,OAAO,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC,CAwC3G"}

package/dist/experimental/Tabs/useTab.js

@@ -0,0 +1,97 @@
+import { c } from 'react-compiler-runtime';
+import { useTabs } from './useTabs.js';
+
+/**
+ * A custom hook that provides the props needed for a tab component.
+ * The props returned should be spread onto the component (typically a button) with the `role=tab`, under a `tablist`.
+ */
+function useTab(props) {
+  const $ = c(21);
+  const {
+    disabled,
+    value
+  } = props;
+  const tabs = useTabs();
+  const selected = tabs.selectedValue === value;
+  const id = `${tabs.groupId}-tab-${value}`;
+  const panelId = `${tabs.groupId}-panel-${value}`;
+  let t0;
+  if ($[0] !== tabs || $[1] !== value) {
+    t0 = function onKeyDown(event) {
+      if (event.key === " " || event.key === "Enter") {
+        tabs.selectTab(value);
+      }
+    };
+    $[0] = tabs;
+    $[1] = value;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  const onKeyDown = t0;
+  let t1;
+  if ($[3] !== disabled || $[4] !== tabs || $[5] !== value) {
+    t1 = function onMouseDown(event_0) {
+      if (!disabled && event_0.button === 0 && event_0.ctrlKey === false) {
+        tabs.selectTab(value);
+      } else {
+        event_0.preventDefault();
+      }
+    };
+    $[3] = disabled;
+    $[4] = tabs;
+    $[5] = value;
+    $[6] = t1;
+  } else {
+    t1 = $[6];
+  }
+  const onMouseDown = t1;
+  let t2;
+  if ($[7] !== disabled || $[8] !== selected || $[9] !== tabs || $[10] !== value) {
+    t2 = function onFocus() {
+      if (!selected && !disabled) {
+        tabs.selectTab(value);
+      }
+    };
+    $[7] = disabled;
+    $[8] = selected;
+    $[9] = tabs;
+    $[10] = value;
+    $[11] = t2;
+  } else {
+    t2 = $[11];
+  }
+  const onFocus = t2;
+  const t3 = disabled ? true : undefined;
+  const t4 = selected ? 0 : -1;
+  let t5;
+  if ($[12] !== id || $[13] !== onFocus || $[14] !== onKeyDown || $[15] !== onMouseDown || $[16] !== panelId || $[17] !== selected || $[18] !== t3 || $[19] !== t4) {
+    t5 = {
+      tabProps: {
+        "aria-disabled": t3,
+        "aria-controls": panelId,
+        "aria-selected": selected,
+        onKeyDown,
+        onMouseDown,
+        onFocus,
+        id,
+        role: "tab",
+        tabIndex: t4
+      }
+    };
+    $[12] = id;
+    $[13] = onFocus;
+    $[14] = onKeyDown;
+    $[15] = onMouseDown;
+    $[16] = panelId;
+    $[17] = selected;
+    $[18] = t3;
+    $[19] = t4;
+    $[20] = t5;
+  } else {
+    t5 = $[20];
+  }
+  return t5;
+}
+
+export { useTab };

package/dist/experimental/Tabs/useTabList.d.ts

@@ -0,0 +1,3 @@
+import type { TabListHookProps, TabListHookResult } from './types';
+export declare function useTabList<T extends HTMLElement>(props: TabListHookProps<T>): TabListHookResult<T>;
+//# sourceMappingURL=useTabList.d.ts.map

package/dist/experimental/Tabs/useTabList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTabList.d.ts","sourceRoot":"","sources":["../../../src/experimental/Tabs/useTabList.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,gBAAgB,EAAE,iBAAiB,EAAC,MAAM,SAAS,CAAA;AAEhE,wBAAgB,UAAU,CAAC,CAAC,SAAS,WAAW,EAAE,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAAG,iBAAiB,CAAC,CAAC,CAAC,CA+DlG"}

package/dist/experimental/Tabs/useTabList.js

@@ -0,0 +1,100 @@
+import { c } from 'react-compiler-runtime';
+import { useProvidedRefOrCreate } from '../../hooks/useProvidedRefOrCreate.js';
+
+function useTabList(props) {
+  const $ = c(9);
+  const {
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    "aria-orientation": ariaOrientation
+  } = props;
+  const ref = useProvidedRefOrCreate(props.ref);
+  let t0;
+  if ($[0] !== ariaOrientation || $[1] !== ref) {
+    t0 = event => {
+      const {
+        current: tablist
+      } = ref;
+      if (tablist === null) {
+        return;
+      }
+      const tabs = getFocusableTabs(tablist);
+      const isVertical = ariaOrientation === "vertical";
+      const nextKey = isVertical ? "ArrowDown" : "ArrowRight";
+      const prevKey = isVertical ? "ArrowUp" : "ArrowLeft";
+      if (event.key === nextKey || event.key === prevKey || event.key === "Home" || event.key === "End") {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+      if (event.key === nextKey) {
+        const selectedTabIndex = tabs.findIndex(_temp);
+        if (selectedTabIndex === -1) {
+          return;
+        }
+        const nextTabIndex = (selectedTabIndex + 1) % tabs.length;
+        tabs[nextTabIndex].focus();
+      } else {
+        if (event.key === prevKey) {
+          const selectedTabIndex_0 = tabs.findIndex(_temp2);
+          if (selectedTabIndex_0 === -1) {
+            return;
+          }
+          const nextTabIndex_0 = (tabs.length + selectedTabIndex_0 - 1) % tabs.length;
+          tabs[nextTabIndex_0].focus();
+        } else {
+          if (event.key === "Home") {
+            if (tabs[0]) {
+              tabs[0].focus();
+            }
+          } else {
+            if (event.key === "End") {
+              if (tabs.length > 0) {
+                tabs[tabs.length - 1].focus();
+              }
+            }
+          }
+        }
+      }
+    };
+    $[0] = ariaOrientation;
+    $[1] = ref;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  const onKeyDown = t0;
+  const t1 = ariaOrientation !== null && ariaOrientation !== void 0 ? ariaOrientation : "horizontal";
+  let t2;
+  if ($[3] !== ariaLabel || $[4] !== ariaLabelledby || $[5] !== onKeyDown || $[6] !== ref || $[7] !== t1) {
+    t2 = {
+      tabListProps: {
+        ref,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledby,
+        "aria-orientation": t1,
+        role: "tablist",
+        onKeyDown
+      }
+    };
+    $[3] = ariaLabel;
+    $[4] = ariaLabelledby;
+    $[5] = onKeyDown;
+    $[6] = ref;
+    $[7] = t1;
+    $[8] = t2;
+  } else {
+    t2 = $[8];
+  }
+  return t2;
+}
+function _temp2(tab_0) {
+  return tab_0.getAttribute("aria-selected") === "true";
+}
+function _temp(tab) {
+  return tab.getAttribute("aria-selected") === "true";
+}
+function getFocusableTabs(tablist) {
+  return Array.from(tablist.querySelectorAll('[role="tab"]:not([aria-disabled])'));
+}
+
+export { useTabList };

package/dist/experimental/Tabs/useTabPanel.d.ts

@@ -0,0 +1,4 @@
+import type { TabPanelHookResult, TabPanelProps } from './types';
+/** Utility hook for tab panels */
+export declare function useTabPanel<T extends HTMLElement>(props: TabPanelProps): TabPanelHookResult<T>;
+//# sourceMappingURL=useTabPanel.d.ts.map

package/dist/experimental/Tabs/useTabPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTabPanel.d.ts","sourceRoot":"","sources":["../../../src/experimental/Tabs/useTabPanel.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,kBAAkB,EAAE,aAAa,EAAC,MAAM,SAAS,CAAA;AAG9D,kCAAkC;AAClC,wBAAgB,WAAW,CAAC,CAAC,SAAS,WAAW,EAAE,KAAK,EAAE,aAAa,GAAG,kBAAkB,CAAC,CAAC,CAAC,CAe9F"}

package/dist/experimental/Tabs/useTabPanel.js

@@ -0,0 +1,37 @@
+import { c } from 'react-compiler-runtime';
+import { useTabs } from './useTabs.js';
+
+/** Utility hook for tab panels */
+function useTabPanel(props) {
+  const $ = c(5);
+  const {
+    value
+  } = props;
+  const tabs = useTabs();
+  const id = `${tabs.groupId}-panel-${value}`;
+  const tabId = `${tabs.groupId}-tab-${value}`;
+  const t0 = tabs.selectedValue === value ? "" : undefined;
+  const t1 = tabs.selectedValue !== value;
+  let t2;
+  if ($[0] !== id || $[1] !== t0 || $[2] !== t1 || $[3] !== tabId) {
+    t2 = {
+      tabPanelProps: {
+        "aria-labelledby": tabId,
+        "data-selected": t0,
+        id,
+        hidden: t1,
+        role: "tabpanel"
+      }
+    };
+    $[0] = id;
+    $[1] = t0;
+    $[2] = t1;
+    $[3] = tabId;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  return t2;
+}
+
+export { useTabPanel };

package/dist/experimental/Tabs/useTabs.d.ts

@@ -0,0 +1,3 @@
+import type { TabsContextValue } from './types';
+export declare function useTabs(): TabsContextValue;
+//# sourceMappingURL=useTabs.d.ts.map

package/dist/experimental/Tabs/useTabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTabs.d.ts","sourceRoot":"","sources":["../../../src/experimental/Tabs/useTabs.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,SAAS,CAAA;AAE7C,wBAAgB,OAAO,IAAI,gBAAgB,CAM1C"}

package/dist/experimental/Tabs/useTabs.js

@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import { TabsContext } from './TabsContext.js';
+
+function useTabs() {
+  const context = useContext(TabsContext);
+  if (context) {
+    return context;
+  }
+  throw new Error("Component must be used within a <Tabs> component");
+}
+
+export { useTabs };