@dvcol/neo-svelte 0.1.1

package/dist/nav/NeoTabPanel.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+  import { untrack } from 'svelte';
+  import { fly } from 'svelte/transition';
+
+  import type { NeoTabPanelProps } from './neo-tab-panel.model.js';
+
+  import { getTabsCardContext } from './neo-tabs-card.model.js';
+  import { getTabContext } from './neo-tabs-context.svelte.js';
+  import { emptyTransition } from '../utils/action.utils.js';
+
+  /* eslint-disable prefer-const -- necessary for binding checked */
+  let {
+    // Snippets
+    children,
+
+    // States
+    ref = $bindable(),
+    tabId,
+    empty,
+    tag = 'div',
+
+    // Styles
+    animate,
+
+    // Other props
+    ...rest
+  }: NeoTabPanelProps = $props();
+  /* eslint-enable prefer-const */
+
+  const context = getTabContext();
+  const active = $derived(context?.active === tabId);
+  const orientation = $derived(context?.vertical ? 'y' : 'x');
+
+  const show = $derived(empty ? !context?.active : active);
+
+  const current = $derived(context?.value?.index ?? -1);
+  const previous = $derived(context?.previous?.index ?? -1);
+  const direction = $derived(current > previous ? 1 : -1);
+
+  const ctx = getTabsCardContext();
+  const animated = $derived(animate || (animate !== false && ctx?.animate));
+
+  const transition = $derived(animated ? fly : emptyTransition);
+  const inProps = $derived(animated ? { [orientation]: `${-100 * direction}%`, duration: 600, delay: 100 } : undefined);
+  const outProps = $derived(animated ? { [orientation]: `${100 * direction}%`, duration: 600 } : undefined);
+
+  const paneId = $derived(tabId ? `neo-tab-panel-${String(tabId)}` : undefined);
+  $effect(() => {
+    untrack(() => {
+      if (!tabId || !paneId) return;
+      context?.registerPane(tabId, paneId);
+    });
+    return () => {
+      if (!tabId) return;
+      context?.removePane(tabId);
+    };
+  });
+</script>
+
+{#if show}
+  <svelte:element
+    this={tag}
+    role="tabpanel"
+    id={paneId}
+    aria-labelledby={tabId ? `neo-tab-${String(tabId)}` : undefined}
+    data-tab-id={tabId ?? (empty ? 'empty' : undefined)}
+    bind:this={ref}
+    class:neo-tab-panel={true}
+    {...rest}
+    in:transition={inProps}
+    out:transition={outProps}
+  >
+    {@render children?.(context?.state)}
+  </svelte:element>
+{/if}

package/dist/nav/NeoTabPanel.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { NeoTabPanelProps } from './neo-tab-panel.model.js';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const NeoTabPanel: $$__sveltets_2_IsomorphicComponent<NeoTabPanelProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "ref">;
+type NeoTabPanel = InstanceType<typeof NeoTabPanel>;
+export default NeoTabPanel;

package/dist/nav/NeoTabs.svelte

@@ -0,0 +1,288 @@
+<script lang="ts">
+  import { height, width } from '@dvcol/svelte-utils/transition';
+
+  import { untrack } from 'svelte';
+
+  import type { NeoTabContextPositions, NeoTabsContext } from './neo-tabs-context.svelte.js';
+
+  import type { NeoTabsProps, OnChange } from './neo-tabs.model.js';
+
+  import NeoButton from '../buttons/NeoButton.svelte';
+  import NeoButtonGroup from '../buttons/NeoButtonGroup.svelte';
+  import IconAdd from '../icons/IconAdd.svelte';
+  import { setTabContext } from './neo-tabs-context.svelte.js';
+
+  import { toAction, toActionProps, toTransition, toTransitionProps } from '../utils/action.utils.js';
+
+  /* eslint-disable prefer-const -- necessary for binding checked */
+  let {
+    // Snippets
+    children,
+    panes,
+
+    // States
+    ref = $bindable(),
+    active = $bindable(),
+    disabled,
+
+    // Styles
+    before,
+    toggle,
+    close,
+    add,
+    slide,
+    line,
+
+    // Events
+    onchange,
+    onclose,
+    onadd,
+
+    // Other props
+    containerTag = 'div',
+    containerProps,
+    ...rest
+  }: NeoTabsProps = $props();
+  /* eslint-enable prefer-const */
+
+  // reflect context active to component
+  const onChange: OnChange = (_tabId, _new, _old) => {
+    active = _tabId;
+    onchange?.(_tabId, _new, _old);
+  };
+
+  const context = setTabContext({ onChange, onClose: onclose });
+  const transition = $derived(rest.vertical ? height : width);
+
+  let translate = $state(transform(context.position));
+  // Function to compute the transform
+  function transform({ oldTab, newTab }: NeoTabContextPositions) {
+    if (!newTab) return;
+    if (!oldTab) return;
+
+    // Calculate the difference in positions
+    const offsetX = oldTab.left - newTab.left;
+    const offsetY = oldTab.top - newTab.top;
+
+    // Apply the transform to position absDiv over targetDiv
+    return `--neo-tabs-transform: translate(${offsetX}px, ${offsetY}px); --neo-tab-old-width: ${oldTab.width}px; --neo-tab-old-height: ${oldTab.height}px;`;
+  }
+
+  $effect.pre(() => {
+    if (!slide) return;
+    translate = transform(context.position);
+  });
+
+  const style = $derived([containerProps?.style, translate].filter(Boolean).join('; '));
+
+  // reflect component active to context
+  $effect(() => {
+    if (active === context.active) return;
+    untrack(() => context.onChange(active));
+  });
+
+  $effect.pre(() => {
+    context.onOption({
+      // States
+      disabled,
+
+      // Styles
+      slide,
+      toggle,
+      add,
+      close,
+      glass: rest.glass,
+      inset: rest.inset,
+      shallow: rest.shallow,
+      vertical: rest.vertical,
+      flat: rest.flat,
+      text: rest.text,
+    });
+  });
+
+  const inFn = $derived(toTransition(containerProps?.in ?? containerProps?.transition));
+  const inProps = $derived(toTransitionProps(containerProps?.in ?? containerProps?.transition));
+  const outFn = $derived(toTransition(containerProps?.out ?? containerProps?.transition));
+  const outProps = $derived(toTransitionProps(containerProps?.out ?? containerProps?.transition));
+
+  const useFn = $derived(toAction(containerProps?.use));
+  const useProps = $derived(toActionProps(containerProps?.use));
+</script>
+
+{#snippet icon()}
+  <IconAdd class="neo-tabs-add" />
+{/snippet}
+
+{#snippet tabs(ctx: NeoTabsContext = context.state)}
+  <svelte:element
+    this={containerTag}
+    bind:this={ref}
+    class:neo-tabs={true}
+    class:add
+    class:line
+    class:slide
+    class:translate
+    class:flat={rest.flat}
+    class:text={rest.text}
+    class:vertical={rest.vertical}
+    class:rounded={rest.rounded}
+    class:shallow={rest.shallow}
+    {...containerProps}
+    use:useFn={useProps}
+    out:outFn={outProps}
+    in:inFn={inProps}
+    {style}
+  >
+    <NeoButtonGroup role="tablist" {...rest}>
+      {@render children?.(ctx)}
+      {#if add}
+        <div transition:transition={{ duration: 200, css: `overflow: hidden; white-space: nowrap` }}>
+          <NeoButton onclick={onadd} {icon} />
+        </div>
+      {/if}
+    </NeoButtonGroup>
+  </svelte:element>
+{/snippet}
+
+{#if before}
+  {@render panes?.(context.state)}
+{/if}
+
+{@render tabs()}
+
+{#if !before}
+  {@render panes?.(context.state)}
+{/if}
+
+<style>.neo-tabs {
+  display: inline-flex;
+  flex: 0 1 auto;
+  flex-flow: row wrap;
+}
+.neo-tabs :global(.neo-tabs-add) {
+  min-width: 1rem;
+}
+.neo-tabs.vertical :global(.neo-tab) {
+  position: relative;
+  width: 100%;
+  min-width: max-content;
+}
+.neo-tabs.vertical :global(.neo-tab .neo-button) {
+  justify-content: flex-start;
+}
+.neo-tabs.vertical :global(.neo-tab-close .icon-close) {
+  position: absolute;
+  top: calc(50% - 0.5rem);
+}
+.neo-tabs.vertical :global(.neo-tab-close:not(.reverse) .icon-close) {
+  right: 0.75rem;
+}
+.neo-tabs.vertical :global(.neo-tab-close.reverse .icon-close) {
+  left: 0.75rem;
+}
+.neo-tabs.vertical.add :global(.neo-button-group) {
+  padding-bottom: 0.5rem;
+}
+.neo-tabs.vertical.line :global(.neo-tab::before) {
+  --neo-tab-width: 2px;
+  --neo-tab-old-width: 2px;
+  --neo-tab-old-max-height: calc(var(--neo-tab-old-height, 100%) - 1rem);
+  --neo-tab-max-height: calc(var(--neo-tab-height, 100%) - 1rem);
+  top: 0;
+  width: 2px;
+  height: 0;
+  max-height: var(--neo-tab-max-height);
+  margin-left: 0.3rem;
+  transition: box-shadow 0.3s ease, height 0.3s var(--neo-transition-bezier);
+  margin-block: 0.5rem;
+}
+.neo-tabs.vertical.line :global(.neo-tab.active::before) {
+  height: var(--neo-tab-height, 100%);
+}
+.neo-tabs.add:not(.vertical) :global(.neo-button-group) {
+  padding-right: 0.5rem;
+}
+.neo-tabs.slide {
+  --neo-tab-width: 100%;
+  --neo-tab-height: 100%;
+}
+.neo-tabs.slide :global(.neo-tab .neo-button) {
+  box-shadow: var(--neo-box-shadow-flat) !important;
+}
+.neo-tabs.slide :global(.neo-tab) {
+  position: relative;
+}
+.neo-tabs.slide :global(.neo-tab::before) {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: var(--neo-z-index-in-front, 1);
+  width: var(--neo-tab-width, 100%);
+  height: var(--neo-tab-height, 100%);
+  border: var(--neo-border-width, 1px) var(--neo-tab-border-color, transparent) solid;
+  border-radius: var(--neo-tab-border-radius, var(--neo-border-radius));
+  box-shadow: var(--neo-box-shadow-flat);
+  backface-visibility: hidden;
+  transition: box-shadow 0.3s ease;
+  content: "";
+  pointer-events: none;
+}
+.neo-tabs.slide.line :global(.neo-tab.active::before) {
+  top: unset;
+  bottom: 0;
+  background-color: var(--neo-color-primary, var(--neo-text-color));
+  box-shadow: var(--neo-box-shadow-flat);
+}
+.neo-tabs.slide.line:not(.vertical) :global(.neo-tab::before) {
+  --neo-tab-height: 2px;
+  --neo-tab-old-height: 2px;
+  --neo-tab-old-max-width: calc(var(--neo-tab-old-width, 100%) - 1.5rem);
+  --neo-tab-max-width: calc(var(--neo-tab-width, 100%) - 1.5rem);
+  width: 0;
+  max-width: var(--neo-tab-max-width);
+  height: 2px;
+  margin-bottom: 0.125rem;
+  transition: box-shadow 0.3s ease, width 0.3s var(--neo-transition-bezier);
+  margin-inline: 0.75rem;
+}
+.neo-tabs.slide.line:not(.vertical) :global(.neo-tab.active::before) {
+  width: var(--neo-tab-width, 100%);
+}
+.neo-tabs.slide :global(.neo-tab.active::before) {
+  box-shadow: var(--neo-box-shadow-inset-3);
+}
+.neo-tabs.slide.translate :global(.neo-tab.active::before) {
+  animation: slide 0.6s var(--neo-transition-bezier) forwards;
+}
+@keyframes slide {
+  0% {
+    width: var(--neo-tab-old-width, var(--neo-tab-width, 100%));
+    max-width: var(--neo-tab-old-max-width);
+    height: var(--neo-tab-old-height, var(--neo-tab-height, 100%));
+    max-height: var(--neo-tab-old-max-height);
+    box-shadow: var(--neo-box-shadow-inset-3);
+    transform: var(--neo-tabs-transform);
+  }
+  100% {
+    width: var(--neo-tab-width, 100%);
+    max-width: var(--neo-tab-max-width);
+    height: var(--neo-tab-height, 100%);
+    max-height: var(--neo-tab-max-height);
+    box-shadow: var(--neo-box-shadow-inset-3);
+    transform: translate(0, 0);
+  }
+}
+@keyframes fade {
+  0% {
+    box-shadow: var(--neo-box-shadow-flat);
+  }
+  100% {
+    box-shadow: var(--neo-box-shadow-inset-3);
+  }
+}
+.neo-tabs.slide.shallow {
+  --neo-box-shadow-inset-3: var(--neo-box-shadow-inset-2);
+}
+.neo-tabs.slide.rounded :global(.neo-button-group .neo-tab::before) {
+  border-radius: var(--neo-tab-border-radius, var(--neo-border-radius-lg));
+}</style>

package/dist/nav/NeoTabs.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { NeoTabsProps } from './neo-tabs.model.js';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const NeoTabs: $$__sveltets_2_IsomorphicComponent<NeoTabsProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "ref" | "active">;
+type NeoTabs = InstanceType<typeof NeoTabs>;
+export default NeoTabs;

package/dist/nav/NeoTabsCard.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import NeoCard from '../cards/NeoCard.svelte';
+  import NeoTransitionContainer from '../containers/NeoTransitionContainer.svelte';
+  import { type NeoTabsCardProps, setTabsCardContext } from './neo-tabs-card.model.js';
+  import { getTabContext } from './neo-tabs-context.svelte.js';
+
+  /* eslint-disable prefer-const -- necessary for binding checked */
+  let {
+    // Snippets
+    children,
+
+    // States
+    ref = $bindable(),
+
+    // Styles
+    animate = true,
+
+    // Other props
+    containerProps,
+    ...rest
+  }: NeoTabsCardProps = $props();
+  /* eslint-enable prefer-const */
+
+  const context = getTabContext();
+  const glass = $derived(context?.glass);
+  const borderless = $derived(context?.text);
+
+  const elevation = $derived.by(() => {
+    if (context?.flat) return 0;
+    if (context?.inset) return context?.shallow ? -1 : -2;
+    return context?.shallow ? 1 : 2;
+  });
+
+  $effect.pre(() => {
+    setTabsCardContext({ animate });
+  });
+</script>
+
+<NeoCard bind:ref {elevation} {borderless} {glass} {...rest}>
+  {#if animate}
+    <NeoTransitionContainer {...containerProps}>
+      {@render children?.(context?.state)}
+    </NeoTransitionContainer>
+  {:else}
+    {@render children?.(context?.state)}
+  {/if}
+</NeoCard>

package/dist/nav/NeoTabsCard.svelte.d.ts

@@ -0,0 +1,19 @@
+import { type NeoTabsCardProps } from './neo-tabs-card.model.js';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const NeoTabsCard: $$__sveltets_2_IsomorphicComponent<NeoTabsCardProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "ref">;
+type NeoTabsCard = InstanceType<typeof NeoTabsCard>;
+export default NeoTabsCard;

package/dist/nav/index.d.ts

@@ -0,0 +1,8 @@
+export { default as NeoTab } from './NeoTab.svelte';
+export { default as NeoTabs } from './NeoTabs.svelte';
+export { default as NeoTabPanel } from './NeoTabPanel.svelte';
+export { default as NeoTabsCard } from './NeoTabsCard.svelte';
+export type { NeoTabProps, TabId } from './neo-tab.model.js';
+export type { NeoTabsProps, NeoTabsContainerProps, NeoTabContextValue, OnClose, OnChange } from './neo-tabs.model.js';
+export type { NeoTabPanelProps } from './neo-tab-panel.model.js';
+export type { NeoTabsCardProps, NeoTabsCardContext } from './neo-tabs-card.model.js';

package/dist/nav/index.js

@@ -0,0 +1,4 @@
+export { default as NeoTab } from './NeoTab.svelte';
+export { default as NeoTabs } from './NeoTabs.svelte';
+export { default as NeoTabPanel } from './NeoTabPanel.svelte';
+export { default as NeoTabsCard } from './NeoTabsCard.svelte';

package/dist/nav/neo-tab-panel.model.d.ts

@@ -0,0 +1,30 @@
+import type { Snippet } from 'svelte';
+import type { TabId } from './neo-tab.model.js';
+import type { NeoTabsContext } from './neo-tabs-context.svelte.js';
+import type { HTMLNeoBaseElement, HTMLRefProps } from '../utils/html-element.utils.js';
+export type NeoTabPanelProps<T = unknown> = {
+    /**
+     * Snippet to display as the tab content.
+     */
+    children?: Snippet<[NeoTabsContext<T> | undefined]>;
+    /**
+     * The tab id to associate with this pane.
+     */
+    tabId?: TabId;
+    /**
+     * If `true`, the pane will appear when no other tabs are active.
+     */
+    empty?: boolean;
+    /**
+     * The HTML tag to use for the container id `animate` is true.
+     * @default 'div'
+     * @see animate
+     */
+    tag?: keyof HTMLElementTagNameMap;
+    /**
+     * If `true`, pane transition will be animated.
+     * If `false`, the pane will check if any neo-tabs-card parent is animating.
+     * @default false
+     */
+    animate?: boolean;
+} & HTMLNeoBaseElement & HTMLRefProps;

package/dist/nav/neo-tab-panel.model.js

@@ -0,0 +1 @@
+export {};

package/dist/nav/neo-tab.model.d.ts

@@ -0,0 +1,43 @@
+import type { Snippet } from 'svelte';
+import type { NeoButtonProps } from '../buttons/neo-button.model.js';
+import type { OnChange } from './neo-tabs.model.js';
+import type { HTMLUseProps } from '../utils/action.utils.js';
+import type { HTMLNeoBaseElement, HTMLRefProps } from '../utils/html-element.utils.js';
+export type TabId = string | number | symbol;
+export type NeoTabProps<T = unknown> = {
+    /**
+     * Snippet to display as the tab content.
+     */
+    children?: Snippet<[{
+        active: boolean;
+        tabId: TabId;
+        value?: unknown;
+    }]>;
+    /**
+     * The HTML tag to use for the tab.
+     * @default 'div'
+     */
+    tag?: keyof HTMLElementTagNameMap;
+    /**
+     * A unique identifier for the tab.
+     * If none is provided, the tab will be assigned a random id.
+     */
+    tabId?: TabId;
+    /**
+     * Optional value to associate with the tab.
+     */
+    value?: T;
+    /**
+     * If true, the tab will display a close button that broadcasts the `onclose` event.
+     * Note: The event will also be emitted to a parent `NeoTabs` if present.
+     */
+    close?: boolean;
+    /**
+     * Event handler that fires wwhen the close button is clicked.
+     */
+    onclose?: OnChange<T>;
+    /**
+     * Optional props to pass to the tab container.
+     */
+    tabProps?: HTMLNeoBaseElement & HTMLUseProps;
+} & Omit<NeoButtonProps, 'value' | 'children' | 'ref'> & HTMLRefProps;

package/dist/nav/neo-tab.model.js

@@ -0,0 +1 @@
+export {};

package/dist/nav/neo-tabs-card.model.d.ts

@@ -0,0 +1,25 @@
+import { type Snippet } from 'svelte';
+import type { NeoCardProps } from '../cards/neo-card.model.js';
+import type { NeoTransitionContainerProps } from '../containers/neo-transition-container.model.js';
+import { type NeoTabsContext } from './neo-tabs-context.svelte.js';
+export type NeoTabsCardContext = {
+    /**
+     * If `true`, pane transition will be animated.
+     * @default true
+     */
+    animate?: boolean;
+};
+export type NeoTabsCardProps<T = unknown> = {
+    /**
+     * Snippet to display as the card content.
+     */
+    children?: Snippet<[NeoTabsContext<T> | undefined]>;
+    /**
+     * Optional props to pass to the tab container if `animate` is `true`.
+     * @see animate
+     */
+    containerProps?: NeoTransitionContainerProps;
+} & NeoTabsCardContext & Omit<NeoCardProps, 'children'>;
+export declare const NeoTabsCardContextSymbol: unique symbol;
+export declare const setTabsCardContext: (context: NeoTabsCardContext) => NeoTabsCardContext;
+export declare const getTabsCardContext: () => NeoTabsCardContext | undefined;

package/dist/nav/neo-tabs-card.model.js

@@ -0,0 +1,5 @@
+import { getContext, setContext } from 'svelte';
+import {} from './neo-tabs-context.svelte.js';
+export const NeoTabsCardContextSymbol = Symbol('NeoTabsCardContext');
+export const setTabsCardContext = (context) => setContext(NeoTabsCardContextSymbol, context);
+export const getTabsCardContext = () => getContext(NeoTabsCardContextSymbol);

package/dist/nav/neo-tabs-context.svelte.d.ts

@@ -0,0 +1,82 @@
+import type { NeoButtonGroupProps } from '../buttons/neo-button-group.model.js';
+import type { TabId } from './neo-tab.model.js';
+import type { NeoTabContextValue, OnChange, OnClose } from './neo-tabs.model.js';
+export type NeoTabContextPosition = {
+    id: TabId;
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+};
+export type NeoTabContextPositions = {
+    oldTab?: NeoTabContextPosition;
+    newTab?: NeoTabContextPosition;
+};
+type NeoTabContextOptions = {
+    /**
+     * Disables all tabs.
+     */
+    disabled?: boolean;
+    /**
+     * Whether to animate the tab transition.
+     */
+    slide?: boolean;
+    /**
+     * Clicking the active tab will unselect it.
+     */
+    toggle?: boolean;
+    /**
+     * Add a button to add new tabs.
+     */
+    add?: boolean;
+    /**
+     * Add a close button to each tab.
+     */
+    close?: boolean;
+} & Pick<NeoButtonGroupProps, 'vertical' | 'shallow' | 'inset' | 'glass' | 'flat' | 'text'>;
+export type NeoTabsContext<T = unknown> = NeoTabContextOptions & {
+    /**
+     * The active tab ID.
+     */
+    active?: TabId;
+    /**
+     * The active tab value.
+     */
+    value?: NeoTabContextValue<T>;
+};
+type NeoTabContextCallbacks<T = unknown> = {
+    onChange?: OnChange<T>;
+    onClose?: OnClose<T>;
+};
+export declare class NeoTabContext<T = unknown> {
+    #private;
+    get active(): TabId | undefined;
+    get value(): NeoTabContextValue<T> | undefined;
+    get previous(): NeoTabContextValue<T> | undefined;
+    get disabled(): boolean | undefined;
+    get slide(): boolean | undefined;
+    get toggle(): boolean | undefined;
+    get close(): boolean | undefined;
+    get shallow(): boolean | undefined;
+    get inset(): boolean | undefined;
+    get glass(): boolean | undefined;
+    get vertical(): boolean | undefined;
+    get position(): NeoTabContextPositions;
+    get text(): boolean | undefined;
+    get flat(): boolean | undefined;
+    get state(): NeoTabsContext;
+    constructor({ onChange, onClose }?: NeoTabContextCallbacks<T>);
+    getValue(tabId?: TabId): NeoTabContextValue<T> | undefined;
+    getPane(tabId?: TabId): TabId | undefined;
+    onOption(options: NeoTabContextOptions): void;
+    onPosition(_ref?: HTMLElement | undefined): NeoTabContextPositions;
+    onChange(tabId?: TabId, emit?: boolean): void;
+    onClose(tabId?: TabId): void;
+    register(tabId: TabId, value: Omit<NeoTabContextValue<T>, 'index'>): any;
+    remove(tabId: TabId): void;
+    registerPane(tabId: TabId, panelId: TabId): any;
+    removePane(tabId: TabId): void;
+}
+export declare const getTabContext: <T = unknown>() => NeoTabContext<T> | undefined;
+export declare const setTabContext: <T = unknown>(callback?: NeoTabContextCallbacks<T>) => NeoTabContext<T>;
+export {};