@pzerelles/headlessui-svelte 2.1.2-next.23 → 2.1.2-next.25

package/dist/tabs/TabGroup.svelte

@@ -1,232 +1,99 @@
-<script lang="ts" module>import { sortByDomNode } from "../utils/focus-management.js";
-import { match } from "../utils/match.js";
-import FocusSentinel from "../internal/FocusSentinel.svelte";
-import { setContext, getContext, untrack } from "svelte";
-const DEFAULT_TABS_TAG = "div";
-export function useData(component) {
-  const context = getContext("TabsData");
-  if (!context) {
-    let err = new Error(`<${component} /> is missing a parent <Tab.Group /> component.`);
-    if (Error.captureStackTrace) Error.captureStackTrace(err, useData);
-    throw err;
-  }
-  return context;
-}
-export function useActions(component) {
-  const context = getContext("TabsActions");
-  if (!context) {
-    const err = new Error(`<${component} /> is missing a parent <Tab.Group /> component.`);
-    if (Error.captureStackTrace) Error.captureStackTrace(err, useActions);
-    throw err;
+<script lang="ts" module>
+  import type { ElementType, Props } from "../utils/types.js"
+  import { sortByDomNode } from "../utils/focus-management.js"
+  import FocusSentinel from "../internal/FocusSentinel.svelte"
+
+  const DEFAULT_TABS_TAG = "div" as const
+  type TabsRenderPropArg = {
+    selectedIndex: number
   }
-  return context;
-}
+  type TabsPropsWeControl = never
+
+  export type TabGroupProps<TTag extends ElementType = typeof DEFAULT_TABS_TAG> = Props<
+    TTag,
+    TabsRenderPropArg,
+    TabsPropsWeControl,
+    {
+      defaultIndex?: number
+      onchange?: (index: number) => void
+      selectedIndex?: number
+      vertical?: boolean
+      manual?: boolean
+    }
+  >
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_TABS_TAG">import StableCollection from "../utils/StableCollection.svelte";
-import ElementOrComponent from "../utils/ElementOrComponent.svelte";
-var Direction = /* @__PURE__ */ ((Direction2) => {
-  Direction2[Direction2["Forwards"] = 0] = "Forwards";
-  Direction2[Direction2["Backwards"] = 1] = "Backwards";
-  return Direction2;
-})(Direction || {});
-var Ordering = /* @__PURE__ */ ((Ordering2) => {
-  Ordering2[Ordering2["Less"] = -1] = "Less";
-  Ordering2[Ordering2["Equal"] = 0] = "Equal";
-  Ordering2[Ordering2["Greater"] = 1] = "Greater";
-  return Ordering2;
-})(Ordering || {});
-const stateReducer = (initialState) => {
-  let _state2 = $state(initialState);
-  return {
-    get info() {
-      return _state2.info;
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_TABS_TAG">
+  import StableCollection from "../utils/StableCollection.svelte"
+  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+  import { createTabContext } from "./context.svelte.js"
+  import { untrack } from "svelte"
+
+  let {
+    ref = $bindable(),
+    defaultIndex = 0,
+    vertical = false,
+    manual = false,
+    onchange,
+    selectedIndex = undefined,
+    ...theirProps
+  }: { as?: TTag } & TabGroupProps<TTag> = $props()
+  const _state = createTabContext({
+    get vertical() {
+      return vertical
     },
-    get selectedIndex() {
-      return _state2.selectedIndex;
+    get manual() {
+      return manual
     },
-    get tabs() {
-      return _state2.tabs;
+    get selectedIndex() {
+      return selectedIndex
     },
-    get panels() {
-      return _state2.panels;
+    get defaultIndex() {
+      return defaultIndex
     },
-    setSelectedIndex(index) {
-      if (index === _state2.selectedIndex) return _state2;
-      let tabs = sortByDomNode(_state2.tabs, (tab) => tab.current ?? null);
-      let panels = sortByDomNode(_state2.panels, (panel) => panel.current ?? null);
-      let focusableTabs = tabs.filter((tab) => !tab?.current?.hasAttribute("disabled"));
-      let nextState = { ..._state2, tabs, panels };
-      if (
-        // Underflow
-        index < 0 || // Overflow
-        index > tabs.length - 1
-      ) {
-        let direction = match(Math.sign(index - _state2.selectedIndex), {
-          [-1 /* Less */]: () => 1 /* Backwards */,
-          [0 /* Equal */]: () => {
-            return match(Math.sign(index), {
-              [-1 /* Less */]: () => 0 /* Forwards */,
-              [0 /* Equal */]: () => 0 /* Forwards */,
-              [1 /* Greater */]: () => 1 /* Backwards */
-            });
-          },
-          [1 /* Greater */]: () => 0 /* Forwards */
-        });
-        if (focusableTabs.length === 0) {
-          _state2 = nextState;
-          return _state2;
-        }
-        let nextSelectedIndex = match(direction, {
-          [0 /* Forwards */]: () => tabs.findIndex((tab) => tab === focusableTabs[0]),
-          [1 /* Backwards */]: () => tabs.findIndex((tab) => tab === focusableTabs[focusableTabs.length - 1])
-        });
-        _state2 = {
-          ...nextState,
-          selectedIndex: nextSelectedIndex === -1 ? _state2.selectedIndex : nextSelectedIndex
-        };
-        return _state2;
-      }
-      let before = tabs.slice(0, index);
-      let after = tabs.slice(index);
-      let next = [...after, ...before].find((tab) => focusableTabs.some((_tab) => _tab === tab));
-      if (!next) {
-        _state2 = nextState;
-        return _state2;
+    change: (index: number) => {
+      if (realSelectedIndex !== index) {
+        onchange?.(index)
       }
-      let selectedIndex2 = tabs.findIndex((tab) => tab === next) ?? _state2.selectedIndex;
-      if (selectedIndex2 === -1) selectedIndex2 = _state2.selectedIndex;
-      _state2 = { ...nextState, selectedIndex: selectedIndex2 };
-      return _state2;
-    },
-    registerTab(tab) {
-      if (_state2.tabs.some((_tab) => _tab === tab)) return _state2;
-      _state2.tabs = sortByDomNode([..._state2.tabs, tab], (tab2) => tab2.current ?? null);
-      let activeTab = _state2.tabs[_state2.selectedIndex];
-      if (!_state2.info.isControlled) {
-        const selectedIndex2 = _state2.tabs.findIndex((tab2) => tab2 === activeTab);
-        if (selectedIndex2 !== _state2.selectedIndex) _state2.selectedIndex = selectedIndex2;
+
+      if (!isControlled) {
+        _state.selectedIndex = index
       }
-      return _state2;
-    },
-    unregisterTab(tab) {
-      _state2.tabs = _state2.tabs.filter((_tab) => _tab !== tab);
-      return _state2;
     },
-    registerPanel(panel) {
-      if (_state2.panels.some((_panel) => _panel === panel)) return _state2;
-      _state2.panels = sortByDomNode([..._state2.panels, panel], (panel2) => panel2.current ?? null);
-      return _state2;
-    },
-    unregisterPanel(panel) {
-      _state2.panels = _state2.panels.filter((_panel) => _panel !== panel);
-      return _state2;
+  })
+  const isControlled = $derived(_state.info.isControlled)
+  const realSelectedIndex = $derived(isControlled ? selectedIndex! : _state.selectedIndex)
+
+  const slot = $derived({
+    selectedIndex: _state.selectedIndex,
+  } satisfies TabsRenderPropArg)
+  const stableTabs = $derived(_state.tabs)
+
+  $effect(() => {
+    const newSelectedIndex = selectedIndex ?? defaultIndex
+    untrack(() => (_state.selectedIndex = newSelectedIndex))
+  })
+
+  $effect(() => {
+    if (realSelectedIndex === undefined) return
+    if (_state.tabs.length <= 0) return
+
+    // TODO: Figure out a way to detect this without the slow sort on every render. Might be fine
+    //       unless you have a lot of tabs.
+    let sorted = sortByDomNode(_state.tabs, (tab) => tab.current ?? null)
+    let didOrderChange = sorted.some((tab, i) => _state.tabs[i] !== tab)
+
+    if (didOrderChange) {
+      _state.change(sorted.findIndex((tab) => tab === _state.tabs[realSelectedIndex]))
     }
-  };
-};
-let {
-  ref = $bindable(),
-  defaultIndex = 0,
-  vertical = false,
-  manual = false,
-  onchange,
-  selectedIndex = void 0,
-  ...theirProps
-} = $props();
-const orientation = $derived(vertical ? "vertical" : "horizontal");
-const activation = $derived(manual ? "manual" : "auto");
-const isControlled = $derived(selectedIndex !== void 0);
-const _state = stateReducer({
-  info: { isControlled: selectedIndex !== void 0 },
-  selectedIndex: selectedIndex ?? defaultIndex,
-  tabs: [],
-  panels: []
-});
-$effect(() => {
-  untrack(() => _state.info).isControlled = isControlled;
-});
-const slot = $derived({
-  selectedIndex: _state.selectedIndex
-});
-const stableTabs = $derived(_state.tabs);
-const tabsData = {
-  get orientation() {
-    return orientation;
-  },
-  get activation() {
-    return activation;
-  },
-  get info() {
-    return _state.info;
-  },
-  get selectedIndex() {
-    return _state.selectedIndex;
-  },
-  get tabs() {
-    return _state.tabs;
-  },
-  get panels() {
-    return _state.panels;
-  }
-};
-const realSelectedIndex = $derived(isControlled ? selectedIndex : _state.selectedIndex);
-const registerTab = (tab) => {
-  _state.registerTab(tab);
-  return () => _state.unregisterTab(tab);
-};
-const registerPanel = (panel) => {
-  _state.registerPanel(panel);
-  return () => _state.unregisterPanel(panel);
-};
-const change = (index) => {
-  if (realSelectedIndex !== index) {
-    onchange?.(index);
-  }
-  if (!isControlled) {
-    _state.setSelectedIndex(index);
-  }
-};
-setContext("TabsActions", { registerTab, registerPanel, change });
-setContext("TabsData", {
-  get orientation() {
-    return orientation;
-  },
-  get activation() {
-    return activation;
-  },
-  get info() {
-    return _state.info;
-  },
-  get selectedIndex() {
-    return _state.selectedIndex;
-  },
-  get tabs() {
-    return _state.tabs;
-  },
-  get panels() {
-    return _state.panels;
-  }
-});
-$effect(() => {
-  const newSelectedIndex = selectedIndex ?? defaultIndex;
-  untrack(() => _state.setSelectedIndex(newSelectedIndex));
-});
-$effect(() => {
-  if (realSelectedIndex === void 0) return;
-  if (_state.tabs.length <= 0) return;
-  let sorted = sortByDomNode(_state.tabs, (tab) => tab.current ?? null);
-  let didOrderChange = sorted.some((tab, i) => _state.tabs[i] !== tab);
-  if (didOrderChange) {
-    change(sorted.findIndex((tab) => tab === _state.tabs[realSelectedIndex]));
-  }
-});
+  })
 </script>
 
 <StableCollection>
-  {#if tabsData.tabs.length <= 0}
+  {#if _state.tabs.length <= 0}
     <FocusSentinel
       onfocus={() => {
-        for (let tab of stableTabs) {
+        for (const tab of stableTabs) {
           if (tab?.current?.tabIndex === 0) {
             tab?.current?.focus()
             return true
@@ -237,5 +104,5 @@ $effect(() => {
       }}
     />
   {/if}
-  <ElementOrComponent {theirProps} defaultTag={DEFAULT_TABS_TAG} name="TabGroup" bind:ref />
+  <ElementOrComponent {theirProps} slots={slot} defaultTag={DEFAULT_TABS_TAG} name="TabGroup" bind:ref />
 </StableCollection>

package/dist/tabs/TabGroup.svelte.d.ts

@@ -11,35 +11,17 @@ export type TabGroupProps<TTag extends ElementType = typeof DEFAULT_TABS_TAG> =
     vertical?: boolean;
     manual?: boolean;
 }>;
-interface StateDefinition {
-    info: {
-        isControlled: boolean;
-    };
-    selectedIndex: number;
-    tabs: MutableRefObject<HTMLElement | undefined>[];
-    panels: MutableRefObject<HTMLElement | undefined>[];
-}
-type TabsDataContext = StateDefinition & {
-    orientation: "horizontal" | "vertical";
-    activation: "manual" | "auto";
-};
-export declare function useData(component: string): TabsDataContext;
-type TabsActionsContext = {
-    registerTab: (tab: MutableRefObject<HTMLElement | undefined>) => () => void;
-    registerPanel: (panel: MutableRefObject<HTMLElement | undefined>) => () => void;
-    change: (index: number) => void;
-};
-export declare function useActions(component: string): TabsActionsContext;
-import type { MutableRefObject } from "../utils/ref.svelte.js";
 declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_TABS_TAG> {
     props(): {
         as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "onchange" | "manual" | "vertical" | "defaultIndex" | "selectedIndex"> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
-        children?: import("svelte").Snippet<[TabsRenderPropArg, Record<string, any>]> | undefined;
+    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | "onchange" | "manual" | "vertical" | "selectedIndex" | "defaultIndex"> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
+        children?: import("svelte").Snippet<[{
+            slot: TabsRenderPropArg;
+            props: Record<string, any>;
+        }]> | undefined;
+        class?: string | ((bag: TabsRenderPropArg) => string) | null | undefined;
         ref?: HTMLElement;
-    } & (true extends (import("../utils/types.js").PropsOf<TTag> extends infer T_1 ? T_1 extends import("../utils/types.js").PropsOf<TTag> ? T_1 extends never ? never : "class" extends infer T_2 ? T_2 extends "class" ? T_2 extends keyof T_1 ? true : never : never : never : never : never) ? {
-        class?: import("../utils/types.js").PropsOf<TTag>["class"] | ((bag: TabsRenderPropArg) => string) | undefined;
-    } : {}) & {
+    } & {
         defaultIndex?: number;
         onchange?: (index: number) => void;
         selectedIndex?: number;

package/dist/tabs/TabList.svelte

@@ -1,16 +1,36 @@
-<script lang="ts" module>const DEFAULT_LIST_TAG = "div";
+<script lang="ts" module>
+  import type { ElementType, Props } from "../utils/types.js"
+
+  const DEFAULT_LIST_TAG = "div" as const
+  type ListRenderPropArg = {
+    selectedIndex: number
+  }
+  type ListPropsWeControl = "aria-orientation" | "role"
+
+  export type TabListProps<TTag extends ElementType = typeof DEFAULT_LIST_TAG> = Props<
+    TTag,
+    ListRenderPropArg,
+    ListPropsWeControl,
+    {
+      //
+    }
+  >
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_LIST_TAG">import { useData } from "./TabGroup.svelte";
-import ElementOrComponent from "../utils/ElementOrComponent.svelte";
-const data = useData("Tab.List");
-const { orientation, selectedIndex } = $derived(data);
-const slot = $derived({ selectedIndex });
-let { ref = $bindable(), ...theirProps } = $props();
-const ourProps = $derived({
-  role: "tablist",
-  "aria-orientation": orientation
-});
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_LIST_TAG">
+  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+  import { useTabs } from "./context.svelte.js"
+
+  const context = useTabs("TabList")
+  const { orientation, selectedIndex } = $derived(context)
+
+  const slot = $derived({ selectedIndex } satisfies ListRenderPropArg)
+
+  let { ref = $bindable(), ...theirProps }: { as?: TTag } & TabListProps<TTag> = $props()
+  const ourProps = $derived({
+    role: "tablist",
+    "aria-orientation": orientation,
+  })
 </script>
 
 <ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_LIST_TAG} name="TabList" bind:ref />

package/dist/tabs/TabList.svelte.d.ts

@@ -8,12 +8,14 @@ export type TabListProps<TTag extends ElementType = typeof DEFAULT_LIST_TAG> = P
 declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_LIST_TAG> {
     props(): {
         as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | ListPropsWeControl> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
-        children?: import("svelte").Snippet<[ListRenderPropArg, Record<string, any>]> | undefined;
+    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | ListPropsWeControl> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
+        children?: import("svelte").Snippet<[{
+            slot: ListRenderPropArg;
+            props: Record<string, any>;
+        }]> | undefined;
+        class?: string | ((bag: ListRenderPropArg) => string) | null | undefined;
         ref?: HTMLElement;
-    } & (true extends (import("../utils/types.js").PropsOf<TTag> extends infer T_1 ? T_1 extends import("../utils/types.js").PropsOf<TTag> ? T_1 extends never ? never : "class" extends infer T_2 ? T_2 extends "class" ? T_2 extends keyof T_1 ? true : never : never : never : never : never) ? {
-        class?: import("../utils/types.js").PropsOf<TTag>["class"] | ((bag: ListRenderPropArg) => string) | undefined;
-    } : {});
+    };
     events(): {} & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/tabs/TabPanel.svelte

@@ -1,49 +1,73 @@
-<script lang="ts" module>const DEFAULT_PANEL_TAG = "div";
-const PanelRenderFeatures = RenderFeatures.RenderStrategy | RenderFeatures.Static;
+<script lang="ts" module>
+  import type { ElementType, Props } from "../utils/types.js"
+
+  const DEFAULT_PANEL_TAG = "div" as const
+  type PanelRenderPropArg = {
+    selected: boolean
+    focus: boolean
+  }
+  type PanelPropsWeControl = "role" | "aria-labelledby"
+  const PanelRenderFeatures = RenderFeatures.RenderStrategy | RenderFeatures.Static
+
+  export type TabPanelProps<TTag extends ElementType = typeof DEFAULT_PANEL_TAG> = Props<
+    TTag,
+    PanelRenderPropArg,
+    PanelPropsWeControl,
+    PropsForFeatures<typeof PanelRenderFeatures> & { id?: string; tabIndex?: number }
+  >
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_PANEL_TAG">import { useId } from "../hooks/use-id.js";
-import { mergeProps, RenderFeatures } from "../utils/render.js";
-import { useActions, useData } from "./TabGroup.svelte";
-import { useStableCollectionIndex } from "../utils/StableCollection.svelte";
-import { useFocusRing } from "../hooks/use-focus-ring.svelte.js";
-import Hidden from "../internal/Hidden.svelte";
-import { onMount } from "svelte";
-import ElementOrComponent from "../utils/ElementOrComponent.svelte";
-const internalId = useId();
-let {
-  ref = $bindable(),
-  id = `headlessui-tabs-panel-${internalId}`,
-  tabIndex = 0,
-  ...theirProps
-} = $props();
-const data = useData("Tab.Panel");
-const { selectedIndex, tabs, panels } = $derived(data);
-const actions = useActions("Tab.Panel");
-const panelRef = $derived({ current: ref });
-onMount(() => actions.registerPanel(panelRef));
-const mySSRIndex = useStableCollectionIndex("panels");
-const myIndex = $derived.by(() => {
-  const index = tabs.findIndex((panel) => panel === panelRef);
-  return index === -1 ? mySSRIndex : index;
-});
-const selected = $derived(myIndex === selectedIndex);
-const { isFocusVisible: focus, focusProps } = $derived(useFocusRing());
-const slot = $derived({
-  selected,
-  focus
-});
-const ourProps = $derived(
-  mergeProps(
-    {
-      id,
-      role: "tabpanel",
-      "aria-labelledby": tabs[myIndex]?.current?.id,
-      tabIndex: selected ? 0 : -1
-    },
-    focusProps
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_PANEL_TAG">
+  import { useId } from "../hooks/use-id.js"
+  import { mergeProps, RenderFeatures, type PropsForFeatures } from "../utils/render.js"
+  import { useStableCollectionIndex } from "../utils/StableCollection.svelte"
+  import { useFocusRing } from "../hooks/use-focus-ring.svelte.js"
+  import Hidden from "../internal/Hidden.svelte"
+  import type { MutableRefObject } from "../utils/ref.svelte.js"
+  import { onMount } from "svelte"
+  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+  import { useTabs } from "./context.svelte.js"
+
+  const internalId = useId()
+  let {
+    ref = $bindable(),
+    id = `headlessui-tabs-panel-${internalId}`,
+    tabIndex = 0,
+    ...theirProps
+  }: { as?: TTag } & TabPanelProps<TTag> = $props()
+  const context = useTabs("TabPanel")
+  const { selectedIndex, tabs, panels, registerPanel } = $derived(context)
+
+  const panelRef = $derived<MutableRefObject<HTMLElement | undefined>>({ current: ref })
+
+  onMount(() => registerPanel(panelRef))
+
+  const mySSRIndex = useStableCollectionIndex("panels")
+
+  const myIndex = $derived.by(() => {
+    const index = tabs.findIndex((panel) => panel === panelRef)
+    return index === -1 ? mySSRIndex : index
+  })
+
+  const selected = $derived(myIndex === selectedIndex)
+
+  const { isFocusVisible: focus, focusProps } = $derived(useFocusRing())
+  const slot = $derived({
+    selected,
+    focus,
+  } satisfies PanelRenderPropArg)
+
+  const ourProps = $derived(
+    mergeProps(
+      {
+        id,
+        role: "tabpanel",
+        "aria-labelledby": tabs[myIndex]?.current?.id,
+        tabIndex: selected ? 0 : -1,
+      },
+      focusProps
+    )
   )
-);
 </script>
 
 {#if !selected && (theirProps.unmount ?? true) && !(theirProps.static ?? false)}

package/dist/tabs/TabPanel.svelte.d.ts

@@ -14,12 +14,14 @@ import { type PropsForFeatures } from "../utils/render.js";
 declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_PANEL_TAG> {
     props(): {
         as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "unmount" | "static" | "id" | "tabIndex" | PanelPropsWeControl> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
-        children?: import("svelte").Snippet<[PanelRenderPropArg, Record<string, any>]> | undefined;
+    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | "unmount" | "static" | "id" | "tabIndex" | PanelPropsWeControl> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
+        children?: import("svelte").Snippet<[{
+            slot: PanelRenderPropArg;
+            props: Record<string, any>;
+        }]> | undefined;
+        class?: string | ((bag: PanelRenderPropArg) => string) | null | undefined;
         ref?: HTMLElement;
-    } & (true extends (import("../utils/types.js").PropsOf<TTag> extends infer T_1 ? T_1 extends import("../utils/types.js").PropsOf<TTag> ? T_1 extends never ? never : "class" extends infer T_2 ? T_2 extends "class" ? T_2 extends keyof T_1 ? true : never : never : never : never : never) ? {
-        class?: import("../utils/types.js").PropsOf<TTag>["class"] | ((bag: PanelRenderPropArg) => string) | undefined;
-    } : {}) & {
+    } & {
         static?: boolean | undefined;
         unmount?: boolean | undefined;
     } & {

package/dist/tabs/TabPanels.svelte

@@ -1,12 +1,23 @@
-<script lang="ts" module>import ElementOrComponent from "../utils/ElementOrComponent.svelte";
-import { useData } from "./TabGroup.svelte";
-let DEFAULT_PANELS_TAG = "div";
+<script lang="ts" module>
+  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+  import type { ElementType, Props } from "../utils/types.js"
+  import { useTabs } from "./context.svelte.js"
+
+  let DEFAULT_PANELS_TAG = "div" as const
+  type PanelsRenderPropArg = {
+    selectedIndex: number
+  }
+
+  export type TabPanelsProps<TTag extends ElementType = typeof DEFAULT_PANELS_TAG> = Props<TTag, PanelsRenderPropArg>
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_PANELS_TAG">const data = useData("Tab.Panels");
-const { selectedIndex } = $derived(data);
-const slot = $derived({ selectedIndex });
-let { ref = $bindable(), ...theirProps } = $props();
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_PANELS_TAG">
+  const context = useTabs("TabPanels")
+  const { selectedIndex } = $derived(context)
+
+  const slot = $derived({ selectedIndex } satisfies PanelsRenderPropArg)
+
+  let { ref = $bindable(), ...theirProps }: { as?: TTag } & TabPanelsProps<TTag> = $props()
 </script>
 
 <ElementOrComponent {theirProps} {slot} defaultTag={DEFAULT_PANELS_TAG} name="TabPanel" bind:ref />

package/dist/tabs/TabPanels.svelte.d.ts

@@ -7,12 +7,14 @@ export type TabPanelsProps<TTag extends ElementType = typeof DEFAULT_PANELS_TAG>
 declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_PANELS_TAG> {
     props(): {
         as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, "as" | "children" | "refName" | "class"> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
-        children?: import("svelte").Snippet<[PanelsRenderPropArg, Record<string, any>]> | undefined;
+    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, "slot" | "as" | "children" | "class" | "ref"> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
+        children?: import("svelte").Snippet<[{
+            slot: PanelsRenderPropArg;
+            props: Record<string, any>;
+        }]> | undefined;
+        class?: string | ((bag: PanelsRenderPropArg) => string) | null | undefined;
         ref?: HTMLElement;
-    } & (true extends (import("../utils/types.js").PropsOf<TTag> extends infer T_1 ? T_1 extends import("../utils/types.js").PropsOf<TTag> ? T_1 extends never ? never : "class" extends infer T_2 ? T_2 extends "class" ? T_2 extends keyof T_1 ? true : never : never : never : never : never) ? {
-        class?: import("../utils/types.js").PropsOf<TTag>["class"] | ((bag: PanelsRenderPropArg) => string) | undefined;
-    } : {});
+    };
     events(): {} & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/tabs/context.svelte.d.ts

@@ -0,0 +1,31 @@
+import type { MutableRefObject } from "../utils/ref.svelte.js";
+export declare enum Direction {
+    Forwards = 0,
+    Backwards = 1
+}
+export declare enum Ordering {
+    Less = -1,
+    Equal = 0,
+    Greater = 1
+}
+export type TabsContext = {
+    info: {
+        isControlled: boolean;
+    };
+    selectedIndex: number;
+    orientation: "horizontal" | "vertical";
+    activation: "manual" | "auto";
+    tabs: MutableRefObject<HTMLElement | undefined>[];
+    panels: MutableRefObject<HTMLElement | undefined>[];
+    registerTab: (tab: MutableRefObject<HTMLElement | undefined>) => () => void;
+    registerPanel: (panel: MutableRefObject<HTMLElement | undefined>) => () => void;
+    change: (index: number) => void;
+};
+export declare function useTabs(component: string): TabsContext;
+export declare const createTabContext: (props: {
+    vertical: boolean;
+    manual: boolean;
+    selectedIndex: number | undefined;
+    defaultIndex: number;
+    change: (index: number) => void;
+}) => TabsContext;