@pzerelles/headlessui-svelte 2.1.2-next.3 → 2.1.2-next.30

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

@@ -17,19 +17,19 @@ export type TabProps<TTag extends ElementType = typeof DEFAULT_TAB_TAG> = Props<
 declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_TAB_TAG> {
     props(): {
         as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "disabled" | "autofocus" | "id" | TabPropsWeControl> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
-        children?: import("../utils/types.js").Children<TabRenderPropArg> | undefined;
+    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | "disabled" | "autofocus" | "id" | TabPropsWeControl> 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: TabRenderPropArg;
+            props: Record<string, any>;
+        }]> | undefined;
+        class?: string | ((bag: TabRenderPropArg) => 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: TabRenderPropArg) => string) | undefined;
-    } : {}) & {
+    } & {
         id?: string;
         autofocus?: boolean;
         disabled?: boolean;
     };
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
+    events(): {};
     slots(): {};
     bindings(): "ref";
     exports(): {};
@@ -38,9 +38,7 @@ interface $$IsomorphicComponent {
     new <TTag extends ElementType = typeof DEFAULT_TAB_TAG>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TTag>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TTag>['props']>, ReturnType<__sveltets_Render<TTag>['events']>, ReturnType<__sveltets_Render<TTag>['slots']>> & {
         $$bindings?: ReturnType<__sveltets_Render<TTag>['bindings']>;
     } & ReturnType<__sveltets_Render<TTag>['exports']>;
-    <TTag extends ElementType = typeof DEFAULT_TAB_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {
-        $$events?: ReturnType<__sveltets_Render<TTag>['events']>;
-    }): ReturnType<__sveltets_Render<TTag>['exports']>;
+    <TTag extends ElementType = typeof DEFAULT_TAB_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 declare const Tab: $$IsomorphicComponent;

package/dist/tabs/TabGroup.svelte

@@ -1,129 +1,12 @@
 <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;
-  }
-  return context;
-}
 </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;
-    },
-    get selectedIndex() {
-      return _state2.selectedIndex;
-    },
-    get tabs() {
-      return _state2.tabs;
-    },
-    get panels() {
-      return _state2.panels;
-    },
-    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;
-      }
-      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;
-      }
-      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;
-    }
-  };
-};
+import { createTabContext } from "./context.svelte.js";
+import { untrack } from "svelte";
 let {
   ref = $bindable(),
   defaultIndex = 0,
@@ -133,83 +16,37 @@ let {
   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;
+const _state = createTabContext({
+  get vertical() {
+    return vertical;
   },
-  get activation() {
-    return activation;
-  },
-  get info() {
-    return _state.info;
+  get manual() {
+    return manual;
   },
   get selectedIndex() {
-    return _state.selectedIndex;
+    return selectedIndex;
   },
-  get tabs() {
-    return _state.tabs;
+  get defaultIndex() {
+    return defaultIndex;
   },
-  get panels() {
-    return _state.panels;
+  change: (index) => {
+    if (realSelectedIndex !== index) {
+      onchange?.(index);
+    }
+    if (!isControlled) {
+      _state.selectedIndex = index;
+    }
   }
-};
+});
+const isControlled = $derived(_state.info.isControlled);
 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;
-  }
+const slot = $derived({
+  selectedIndex: _state.selectedIndex
 });
+const stableTabs = $derived(_state.tabs);
 $effect(() => {
   const newSelectedIndex = selectedIndex ?? defaultIndex;
-  untrack(() => _state.setSelectedIndex(newSelectedIndex));
+  untrack(() => _state.selectedIndex = newSelectedIndex);
 });
 $effect(() => {
   if (realSelectedIndex === void 0) return;
@@ -217,16 +54,16 @@ $effect(() => {
   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]));
+    _state.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 +74,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,44 +11,24 @@ 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" | "vertical" | "defaultIndex" | "selectedIndex" | "manual"> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
-        children?: import("../utils/types.js").Children<TabsRenderPropArg> | 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;
         vertical?: boolean;
         manual?: boolean;
     };
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
+    events(): {};
     slots(): {};
     bindings(): "ref";
     exports(): {};
@@ -57,9 +37,7 @@ interface $$IsomorphicComponent {
     new <TTag extends ElementType = typeof DEFAULT_TABS_TAG>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TTag>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TTag>['props']>, ReturnType<__sveltets_Render<TTag>['events']>, ReturnType<__sveltets_Render<TTag>['slots']>> & {
         $$bindings?: ReturnType<__sveltets_Render<TTag>['bindings']>;
     } & ReturnType<__sveltets_Render<TTag>['exports']>;
-    <TTag extends ElementType = typeof DEFAULT_TABS_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {
-        $$events?: ReturnType<__sveltets_Render<TTag>['events']>;
-    }): ReturnType<__sveltets_Render<TTag>['exports']>;
+    <TTag extends ElementType = typeof DEFAULT_TABS_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 declare const TabGroup: $$IsomorphicComponent;

package/dist/tabs/TabList.svelte

@@ -1,10 +1,10 @@
 <script lang="ts" module>const DEFAULT_LIST_TAG = "div";
 </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);
+<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 });
 let { ref = $bindable(), ...theirProps } = $props();
 const ourProps = $derived({

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

@@ -8,15 +8,15 @@ 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("../utils/types.js").Children<ListRenderPropArg> | 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>;
     };
+    events(): {};
     slots(): {};
     bindings(): "ref";
     exports(): {};
@@ -25,9 +25,7 @@ interface $$IsomorphicComponent {
     new <TTag extends ElementType = typeof DEFAULT_LIST_TAG>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TTag>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TTag>['props']>, ReturnType<__sveltets_Render<TTag>['events']>, ReturnType<__sveltets_Render<TTag>['slots']>> & {
         $$bindings?: ReturnType<__sveltets_Render<TTag>['bindings']>;
     } & ReturnType<__sveltets_Render<TTag>['exports']>;
-    <TTag extends ElementType = typeof DEFAULT_LIST_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {
-        $$events?: ReturnType<__sveltets_Render<TTag>['events']>;
-    }): ReturnType<__sveltets_Render<TTag>['exports']>;
+    <TTag extends ElementType = typeof DEFAULT_LIST_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 declare const TabList: $$IsomorphicComponent;

package/dist/tabs/TabPanel.svelte

@@ -4,12 +4,12 @@ const PanelRenderFeatures = RenderFeatures.RenderStrategy | RenderFeatures.Stati
 
 <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";
+import { useTabs } from "./context.svelte.js";
 const internalId = useId();
 let {
   ref = $bindable(),
@@ -17,11 +17,10 @@ let {
   tabIndex = 0,
   ...theirProps
 } = $props();
-const data = useData("Tab.Panel");
-const { selectedIndex, tabs, panels } = $derived(data);
-const actions = useActions("Tab.Panel");
+const context = useTabs("TabPanel");
+const { selectedIndex, tabs, panels, registerPanel } = $derived(context);
 const panelRef = $derived({ current: ref });
-onMount(() => actions.registerPanel(panelRef));
+onMount(() => registerPanel(panelRef));
 const mySSRIndex = useStableCollectionIndex("panels");
 const myIndex = $derived.by(() => {
   const index = tabs.findIndex((panel) => panel === panelRef);

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

@@ -14,21 +14,21 @@ 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("../utils/types.js").Children<PanelRenderPropArg> | 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;
     } & {
         id?: string;
         tabIndex?: number;
     };
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
+    events(): {};
     slots(): {};
     bindings(): "ref";
     exports(): {};
@@ -37,9 +37,7 @@ interface $$IsomorphicComponent {
     new <TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TTag>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TTag>['props']>, ReturnType<__sveltets_Render<TTag>['events']>, ReturnType<__sveltets_Render<TTag>['slots']>> & {
         $$bindings?: ReturnType<__sveltets_Render<TTag>['bindings']>;
     } & ReturnType<__sveltets_Render<TTag>['exports']>;
-    <TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {
-        $$events?: ReturnType<__sveltets_Render<TTag>['events']>;
-    }): ReturnType<__sveltets_Render<TTag>['exports']>;
+    <TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 declare const TabPanel: $$IsomorphicComponent;

package/dist/tabs/TabPanels.svelte

@@ -1,10 +1,10 @@
 <script lang="ts" module>import ElementOrComponent from "../utils/ElementOrComponent.svelte";
-import { useData } from "./TabGroup.svelte";
+import { useTabs } from "./context.svelte.js";
 let DEFAULT_PANELS_TAG = "div";
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_PANELS_TAG">const data = useData("Tab.Panels");
-const { selectedIndex } = $derived(data);
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_PANELS_TAG">const context = useTabs("TabPanels");
+const { selectedIndex } = $derived(context);
 const slot = $derived({ selectedIndex });
 let { ref = $bindable(), ...theirProps } = $props();
 </script>

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

@@ -7,15 +7,15 @@ 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("../utils/types.js").Children<PanelsRenderPropArg> | 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>;
     };
+    events(): {};
     slots(): {};
     bindings(): "ref";
     exports(): {};
@@ -24,9 +24,7 @@ interface $$IsomorphicComponent {
     new <TTag extends ElementType = typeof DEFAULT_PANELS_TAG>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TTag>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TTag>['props']>, ReturnType<__sveltets_Render<TTag>['events']>, ReturnType<__sveltets_Render<TTag>['slots']>> & {
         $$bindings?: ReturnType<__sveltets_Render<TTag>['bindings']>;
     } & ReturnType<__sveltets_Render<TTag>['exports']>;
-    <TTag extends ElementType = typeof DEFAULT_PANELS_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {
-        $$events?: ReturnType<__sveltets_Render<TTag>['events']>;
-    }): ReturnType<__sveltets_Render<TTag>['exports']>;
+    <TTag extends ElementType = typeof DEFAULT_PANELS_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 declare const TabPanels: $$IsomorphicComponent;

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;