@pzerelles/headlessui-svelte 2.0.0-next.1 → 2.1.1-next.1

package/dist/tabs/TabGroup.svelte

@@ -0,0 +1,244 @@
+<script lang="ts" context="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">import StableCollection from "../utils/StableCollection.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);
+      let panels = sortByDomNode(_state2.panels, (panel) => panel.current);
+      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) => $state.is(tab, focusableTabs[0])),
+          [1 /* Backwards */]: () => tabs.findIndex((tab) => $state.is(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) => $state.is(_tab, tab)));
+      if (!next) {
+        _state2 = nextState;
+        return _state2;
+      }
+      let selectedIndex2 = tabs.findIndex((tab) => $state.is(tab, next)) ?? _state2.selectedIndex;
+      if (selectedIndex2 === -1) selectedIndex2 = _state2.selectedIndex;
+      _state2 = { ...nextState, selectedIndex: selectedIndex2 };
+      return _state2;
+    },
+    registerTab(tab) {
+      if (_state2.tabs.some((_tab) => $state.is(_tab, tab))) return _state2;
+      _state2.tabs = sortByDomNode([..._state2.tabs, tab], (tab2) => tab2.current);
+      let activeTab = _state2.tabs[_state2.selectedIndex];
+      if (!_state2.info.isControlled) {
+        const selectedIndex2 = _state2.tabs.findIndex((tab2) => $state.is(tab2, activeTab));
+        if (selectedIndex2 !== _state2.selectedIndex) _state2.selectedIndex = selectedIndex2;
+      }
+      return _state2;
+    },
+    unregisterTab(tab) {
+      _state2.tabs = _state2.tabs.filter((_tab) => !$state.is(_tab, tab));
+      return _state2;
+    },
+    registerPanel(panel) {
+      if (_state2.panels.some((_panel) => $state.is(_panel, panel))) return _state2;
+      _state2.panels = sortByDomNode([..._state2.panels, panel], (panel2) => panel2.current);
+      return _state2;
+    },
+    unregisterPanel(panel) {
+      console.log("unregisterPanel", panel);
+      _state2.panels = _state2.panels.filter((_panel) => !$state.is(_panel, panel));
+      return _state2;
+    }
+  };
+};
+let {
+  as,
+  defaultIndex = 0,
+  vertical = false,
+  manual = false,
+  onchange,
+  selectedIndex = void 0,
+  children,
+  ...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);
+  let didOrderChange = sorted.some((tab, i) => _state.tabs[i] !== tab);
+  if (didOrderChange) {
+    change(sorted.findIndex((tab) => $state.is(tab, _state.tabs[realSelectedIndex])));
+  }
+});
+</script>
+
+<StableCollection>
+  {#if tabsData.tabs.length <= 0}
+    <FocusSentinel
+      onfocus={() => {
+        for (let tab of stableTabs) {
+          if (tab?.current?.tabIndex === 0) {
+            tab?.current?.focus()
+            return true
+          }
+        }
+
+        return false
+      }}
+    />
+  {/if}
+  <svelte:element this={as ?? DEFAULT_TABS_TAG} {...theirProps}>
+    {#if children}{@render children(slot)}{/if}
+  </svelte:element>
+</StableCollection>

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

@@ -0,0 +1,54 @@
+import type { ElementType, Props } from "../utils/types.js";
+declare const DEFAULT_TABS_TAG: "div";
+type TabsRenderPropArg = {
+    selectedIndex: number;
+};
+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;
+}>;
+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> {
+    props(): TabGroupProps<TTag>;
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TTag extends ElementType>(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>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {
+        $$events?: ReturnType<__sveltets_Render<TTag>['events']>;
+    }): ReturnType<__sveltets_Render<TTag>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const TabGroup: $$IsomorphicComponent;
+type TabGroup<TTag extends ElementType> = InstanceType<typeof TabGroup<TTag>>;
+export default TabGroup;

package/dist/tabs/TabList.svelte

@@ -0,0 +1,18 @@
+<script lang="ts" context="module">import { stateFromSlot } from "../utils/state.js";
+const DEFAULT_LIST_TAG = "div";
+</script>
+
+<script lang="ts" generics="TTag extends ElementType">import { useData } from "./TabGroup.svelte";
+const data = useData("Tab.List");
+const { orientation, selectedIndex } = $derived(data);
+const slot = $derived({ selectedIndex });
+const { as, children, ...theirProps } = $props();
+const ourProps = $derived({
+  role: "tablist",
+  "aria-orientation": orientation
+});
+</script>
+
+<svelte:element this={as ?? DEFAULT_LIST_TAG} {...ourProps} {...theirProps}>
+  {#if children}{@render children(slot)}{/if}
+</svelte:element>

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

@@ -0,0 +1,28 @@
+import type { ElementType, Props } from "../utils/types.js";
+declare const DEFAULT_LIST_TAG: "div";
+type ListRenderPropArg = {
+    selectedIndex: number;
+};
+type ListPropsWeControl = "aria-orientation" | "role";
+export type TabListProps<TTag extends ElementType = typeof DEFAULT_LIST_TAG> = Props<TTag, ListRenderPropArg, ListPropsWeControl, {}>;
+declare class __sveltets_Render<TTag extends ElementType> {
+    props(): TabListProps<TTag>;
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TTag extends ElementType>(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>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {
+        $$events?: ReturnType<__sveltets_Render<TTag>['events']>;
+    }): ReturnType<__sveltets_Render<TTag>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const TabList: $$IsomorphicComponent;
+type TabList<TTag extends ElementType> = InstanceType<typeof TabList<TTag>>;
+export default TabList;

package/dist/tabs/TabPanel.svelte

@@ -0,0 +1,63 @@
+<script lang="ts" context="module">const DEFAULT_PANEL_TAG = "div";
+const PanelRenderFeatures = RenderFeatures.RenderStrategy | RenderFeatures.Static;
+</script>
+
+<script lang="ts" generics="TTag extends ElementType">import { useId } from "../hooks/use-id.js";
+import { 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 { stateFromSlot } from "../utils/state.js";
+import { onMount } from "svelte";
+const internalId = useId();
+const {
+  as,
+  id = `headlessui-tabs-panel-${internalId}`,
+  tabIndex = 0,
+  children,
+  static: isStatic = false,
+  unmount = true,
+  ...theirProps
+} = $props();
+const data = useData("Tab.Panel");
+const { selectedIndex, tabs, panels } = $derived(data);
+const actions = useActions("Tab.Panel");
+let internalPanelRef = $state();
+const panelRef = $derived({ current: internalPanelRef });
+onMount(() => actions.registerPanel(panelRef));
+const mySSRIndex = useStableCollectionIndex("panels");
+const myIndex = $derived.by(() => {
+  const index = tabs.findIndex((panel) => $state.is(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({
+  id,
+  role: "tabpanel",
+  "aria-labelledby": tabs[myIndex]?.current?.id,
+  tabIndex: selected ? 0 : -1,
+  ...focusProps,
+  ...stateFromSlot(slot)
+});
+</script>
+
+{#if !selected && unmount && !isStatic}
+  <Hidden as="span" bind:ref={internalPanelRef} aria-hidden="true" {...ourProps} />
+{:else}
+  <svelte:element
+    this={as ?? DEFAULT_PANEL_TAG}
+    bind:this={internalPanelRef}
+    {...ourProps}
+    {...theirProps}
+    hidden={isStatic || selected ? undefined : true}
+    style={isStatic || selected ? theirProps.style : "display: none;"}
+  >
+    {#if children}{@render children(slot)}{/if}
+  </svelte:element>
+{/if}

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

@@ -0,0 +1,34 @@
+import type { ElementType, Props } from "../utils/types.js";
+declare const DEFAULT_PANEL_TAG: "div";
+type PanelRenderPropArg = {
+    selected: boolean;
+    focus: boolean;
+};
+type PanelPropsWeControl = "role" | "aria-labelledby";
+declare const PanelRenderFeatures: number;
+export type TabPanelProps<TTag extends ElementType = typeof DEFAULT_PANEL_TAG> = Props<TTag, PanelRenderPropArg, PanelPropsWeControl, PropsForFeatures<typeof PanelRenderFeatures> & {
+    id?: string;
+    tabIndex?: number;
+}>;
+import { type PropsForFeatures } from "../utils/render.js";
+declare class __sveltets_Render<TTag extends ElementType> {
+    props(): TabPanelProps<TTag>;
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TTag extends ElementType>(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>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {
+        $$events?: ReturnType<__sveltets_Render<TTag>['events']>;
+    }): ReturnType<__sveltets_Render<TTag>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const TabPanel: $$IsomorphicComponent;
+type TabPanel<TTag extends ElementType> = InstanceType<typeof TabPanel<TTag>>;
+export default TabPanel;

package/dist/tabs/TabPanels.svelte

@@ -0,0 +1,13 @@
+<script lang="ts" context="module">import { useData } from "./TabGroup.svelte";
+let DEFAULT_PANELS_TAG = "div";
+</script>
+
+<script lang="ts" generics="TTag extends ElementType">const data = useData("Tab.Panels");
+const { selectedIndex } = $derived(data);
+const slot = $derived({ selectedIndex });
+const { as, children, ...theirProps } = $props();
+</script>
+
+<svelte:element this={as ?? DEFAULT_PANELS_TAG} {...theirProps}>
+  {#if children}{@render children(slot)}{/if}
+</svelte:element>

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

@@ -0,0 +1,27 @@
+import type { ElementType, Props } from "../utils/types.js";
+declare let DEFAULT_PANELS_TAG: "div";
+type PanelsRenderPropArg = {
+    selectedIndex: number;
+};
+export type TabPanelsProps<TTag extends ElementType = typeof DEFAULT_PANELS_TAG> = Props<TTag, PanelsRenderPropArg>;
+declare class __sveltets_Render<TTag extends ElementType> {
+    props(): TabPanelsProps<TTag>;
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TTag extends ElementType>(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>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {
+        $$events?: ReturnType<__sveltets_Render<TTag>['events']>;
+    }): ReturnType<__sveltets_Render<TTag>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const TabPanels: $$IsomorphicComponent;
+type TabPanels<TTag extends ElementType> = InstanceType<typeof TabPanels<TTag>>;
+export default TabPanels;

package/dist/tabs/index.d.ts

@@ -0,0 +1,5 @@
+export { default as Tab, type TabProps } from "./Tab.svelte";
+export { default as TabGroup, type TabGroupProps } from "./TabGroup.svelte";
+export { default as TabList, type TabListProps } from "./TabList.svelte";
+export { default as TabPanel, type TabPanelProps } from "./TabPanel.svelte";
+export { default as TabPanels, type TabPanelsProps } from "./TabPanels.svelte";

package/dist/tabs/index.js

@@ -0,0 +1,5 @@
+export { default as Tab } from "./Tab.svelte";
+export { default as TabGroup } from "./TabGroup.svelte";
+export { default as TabList } from "./TabList.svelte";
+export { default as TabPanel } from "./TabPanel.svelte";
+export { default as TabPanels } from "./TabPanels.svelte";