@dvcol/neo-svelte 0.1.1

package/dist/nav/neo-tabs-context.svelte.js

@@ -0,0 +1,163 @@
+import { getContext, setContext } from 'svelte';
+import { SvelteMap } from 'svelte/reactivity';
+import { Logger } from '../utils/logger.utils.js';
+export class NeoTabContext {
+    #tabs = new SvelteMap();
+    #panes = new SvelteMap();
+    #onChange;
+    #onClose;
+    #active = $state();
+    #previous = $state();
+    #position = $state({});
+    #options = $state({});
+    get active() {
+        return this.#active;
+    }
+    get value() {
+        return this.getValue(this.active);
+    }
+    get previous() {
+        return this.getValue(this.#previous);
+    }
+    get disabled() {
+        return this.#options?.disabled;
+    }
+    get slide() {
+        return this.#options?.slide;
+    }
+    get toggle() {
+        return this.#options?.toggle;
+    }
+    get close() {
+        return this.#options?.close;
+    }
+    get shallow() {
+        return this.#options?.shallow;
+    }
+    get inset() {
+        return this.#options?.inset;
+    }
+    get glass() {
+        return this.#options?.glass;
+    }
+    get vertical() {
+        return this.#options?.vertical;
+    }
+    get position() {
+        return this.#position;
+    }
+    get text() {
+        return this.#options?.text;
+    }
+    get flat() {
+        return this.text || this.#options?.flat;
+    }
+    get state() {
+        return {
+            ...this.#options,
+            active: this.active,
+            value: this.value,
+            slide: this.slide,
+            close: this.close,
+            toggle: this.toggle,
+            inset: this.inset,
+            glass: this.glass,
+            shallow: this.shallow,
+            vertical: this.vertical,
+            disabled: this.disabled,
+            flat: this.flat,
+            text: this.text,
+        };
+    }
+    constructor({ onChange, onClose } = {}) {
+        this.#onChange = onChange;
+        this.#onClose = onClose;
+    }
+    getValue(tabId) {
+        if (!tabId)
+            return;
+        return this.#tabs.get(tabId);
+    }
+    getPane(tabId) {
+        if (!tabId)
+            return;
+        return this.#panes.get(tabId);
+    }
+    onOption(options) {
+        Object.assign(this.#options, options);
+        if (!options.slide)
+            delete this.#position.oldTab;
+    }
+    #getPosition(tabId) {
+        if (!tabId)
+            return;
+        const _ref = this.getValue(tabId)?.ref;
+        const parent = _ref?.parentElement?.getBoundingClientRect();
+        const rect = _ref?.getBoundingClientRect();
+        if (!parent || !rect)
+            return;
+        return {
+            id: tabId,
+            top: rect.top - parent.top,
+            left: rect.left - parent.left,
+            width: rect.width,
+            height: rect.height,
+        };
+    }
+    onPosition(_ref = this.value?.ref) {
+        const _new = {
+            oldTab: this.#getPosition(this.position?.newTab?.id),
+        };
+        if (this.active) {
+            _new.newTab = this.#getPosition(this.active);
+        }
+        this.#position = _new;
+        return this.position;
+    }
+    onChange(tabId, emit = true) {
+        if (tabId === this.#active) {
+            if (this.#active && this.toggle)
+                this.onChange();
+            return;
+        }
+        const current = this.value;
+        this.#previous = this.active;
+        this.#active = tabId;
+        this.onPosition();
+        if (emit)
+            this.#onChange?.(this.active, this.value, current);
+    }
+    onClose(tabId) {
+        this.#onClose?.(tabId, this.value);
+    }
+    register(tabId, value) {
+        if (this.#tabs.has(tabId)) {
+            return Logger.warn(`Tab ID '${String(tabId)}' already exists. Tab registration ignored.`, { existing: this.getValue(tabId), ignored: value });
+        }
+        this.#tabs.set(tabId, { ...value, index: this.#tabs.size });
+    }
+    remove(tabId) {
+        this.#tabs.delete(tabId);
+        if (this.#active === tabId)
+            this.onChange();
+    }
+    registerPane(tabId, panelId) {
+        if (this.#panes.has(tabId)) {
+            return Logger.warn(`Tab ID '${String(tabId)}' already exists. Pane registration ignored.`, {
+                existing: this.#panes.get(tabId),
+                ignored: panelId,
+            });
+        }
+        this.#panes.set(tabId, panelId);
+    }
+    removePane(tabId) {
+        this.#panes.delete(tabId);
+    }
+}
+const NeoTabsContextSymbol = Symbol('NeoTabsContext');
+export const getTabContext = () => {
+    return getContext(NeoTabsContextSymbol);
+};
+export const setTabContext = (callback) => {
+    return setContext(NeoTabsContextSymbol, new NeoTabContext(callback));
+};

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

@@ -0,0 +1,60 @@
+import type { Snippet } from 'svelte';
+import type { NeoButtonGroupProps } from '../buttons/neo-button-group.model.js';
+import type { NeoTabProps, TabId } from './neo-tab.model.js';
+import type { NeoTabsContext } from './neo-tabs-context.svelte.js';
+import type { HTMLActionProps } from '../utils/action.utils.js';
+import type { HTMLNeoBaseElement, HTMLRefProps } from '../utils/html-element.utils.js';
+export type NeoTabContextValue<T = unknown> = {
+    index: number;
+    value?: T;
+    ref: HTMLElement;
+};
+export type OnChange<T = unknown> = (tabId?: TabId, newValue?: NeoTabContextValue<T>, oldValue?: NeoTabContextValue) => unknown;
+export type OnClose<T = unknown> = (tabId?: TabId, value?: NeoTabContextValue<T>) => unknown;
+export type NeoTabsContainerProps = HTMLNeoBaseElement & HTMLActionProps;
+export type NeoTabsProps<T = unknown> = {
+    /**
+     * Snippet to display as the tabs content.
+     */
+    children?: Snippet<[NeoTabsContext]>;
+    /**
+     * Optional snippet to expose context to other components.
+     */
+    panes?: Snippet<[NeoTabsContext]>;
+    /**
+     * The HTML tag to use for the tabs.
+     * @default 'div'
+     */
+    tag?: keyof HTMLElementTagNameMap;
+    /**
+     * Display the active tab with a line.
+     * Only applies when `slide` is `true`.
+     */
+    line?: boolean;
+    /**
+     * If `true`, the panes will be displayed before the tabs.
+     * @default false
+     */
+    before?: boolean;
+    /**
+     * Event handler that fires when the active tab changes.
+     */
+    onchange?: OnChange<T>;
+    /**
+     * Event handler that fires when any close button is clicked.
+     */
+    onclose?: OnClose<T>;
+    /**
+     * Event handler that fires when the add button is clicked.
+     */
+    onadd?: NeoTabProps['onclick'];
+    /**
+     * The HTML tag to use for the element.
+     * @default 'div'
+     */
+    containerTag?: keyof HTMLElementTagNameMap;
+    /**
+     * Optional props to pass to the tabs container.
+     */
+    containerProps?: NeoTabsContainerProps;
+} & NeoTabsContext & Omit<NeoButtonGroupProps, 'onchange' | 'children' | 'vertical' | 'ref'> & HTMLRefProps;

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

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

package/dist/providers/NeoThemeProvider.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import '~/styles/reset.scss';
+  import '~/styles/theme.scss';
+
+  import { onDestroy } from 'svelte';
+
+  import { setNeoThemeContext } from './neo-theme-provider-context.svelte.js';
+  import { type NeoThemeProviderProps } from './neo-theme-provider.model.js';
+
+  /* eslint-disable prefer-const -- necessary for binding checked */
+  let {
+    // Snippets
+    children,
+
+    // States
+    theme = $bindable(),
+    source = $bindable(),
+    remember = $bindable(),
+    target,
+  }: NeoThemeProviderProps = $props();
+  /* eslint-enable prefer-const */
+
+  const context = setNeoThemeContext({ theme, source, remember, root: target });
+  $effect(() => context.update({ theme, source, remember, root: target }));
+  onDestroy(() => context.destroy());
+</script>
+
+{@render children?.(context.state)}

package/dist/providers/NeoThemeProvider.svelte.d.ts

@@ -0,0 +1,21 @@
+import '~/styles/reset.scss';
+import '~/styles/theme.scss';
+import { type NeoThemeProviderProps } from './neo-theme-provider.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 NeoThemeProvider: $$__sveltets_2_IsomorphicComponent<NeoThemeProviderProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "source" | "theme" | "remember">;
+type NeoThemeProvider = InstanceType<typeof NeoThemeProvider>;
+export default NeoThemeProvider;

package/dist/providers/NeoThemeSelector.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+  import type { NeoThemeSelectorProps } from './neo-theme-selector.model.js';
+
+  import NeoButton from '../buttons/NeoButton.svelte';
+  import NeoButtonGroup from '../buttons/NeoButtonGroup.svelte';
+  import IconMoon from '../icons/IconMoon.svelte';
+  import IconSave from '../icons/IconSave.svelte';
+  import IconSaveOff from '../icons/IconSaveOff.svelte';
+  import IconSun from '../icons/IconSun.svelte';
+  import IconSunrise from '../icons/IconSunrise.svelte';
+  import { useNeoThemeContext } from './neo-theme-provider-context.svelte.js';
+  import { NeoSource, NeoTheme } from './neo-theme-provider.model.js';
+
+  const { children, ...rest }: NeoThemeSelectorProps = $props();
+
+  const context = useNeoThemeContext();
+
+  let dark = $state(context.theme === NeoTheme.Dark);
+  const theme = $derived(dark ? NeoTheme.Dark : NeoTheme.Light);
+
+  let source = $state(context.source);
+  let remember = $state(context.remember);
+
+  const sources = Object.values(NeoSource);
+  const sourceMap = { ...sources };
+  const sourceIndexMap = Object.fromEntries(Object.entries(sourceMap).map(([k, v]) => [v, Number(k)]));
+
+  let angle = $state(sourceIndexMap[context.source] * 90);
+  const onCycleSource = () => {
+    source = sourceMap[(sourceIndexMap[source] + 1) % sources.length];
+    angle += 90;
+  };
+
+  $effect(() => context.update({ theme, source, remember }));
+</script>
+
+<NeoButtonGroup {...rest}>
+  <NeoButton aria-label="Cycle light source origin" title="Cycle light source origin" checked onclick={onCycleSource}>
+    {#snippet icon()}
+      <span class="source-icon" style:--neo-source-rotate={`${angle}deg`}>
+        <IconSunrise />
+      </span>
+    {/snippet}
+    <span>Source</span>
+  </NeoButton>
+  <NeoButton aria-label={`Toggle ${dark ? 'light' : 'dark'} theme`} title={`Toggle ${dark ? 'light' : 'dark'} theme`} toggle bind:checked={dark}>
+    {#snippet icon()}
+      {#if dark}
+        <IconMoon />
+      {:else}
+        <IconSun />
+      {/if}
+    {/snippet}
+    <span>Theme</span>
+  </NeoButton>
+
+  <NeoButton aria-label="Remember theme settings" title="Remember theme settings" toggle bind:checked={remember}>
+    {#snippet icon()}
+      {#if remember}
+        <IconSave />
+      {:else}
+        <IconSaveOff />
+      {/if}
+    {/snippet}
+  </NeoButton>
+  {@render children?.(context.state)}
+</NeoButtonGroup>
+
+<style>.source-icon {
+  overflow: hidden;
+  border-radius: var(--neo-theme-selector-border-radius, var(--neo-border-radius-lg));
+  rotate: var(--neo-source-rotate, 0);
+  transition: rotate 0.5s ease;
+}
+.source-icon :global(svg) {
+  width: 1.25rem;
+  height: 1.25rem;
+  translate: -30% -30%;
+}</style>

package/dist/providers/NeoThemeSelector.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { NeoThemeSelectorProps } from './neo-theme-selector.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 NeoThemeSelector: $$__sveltets_2_IsomorphicComponent<NeoThemeSelectorProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type NeoThemeSelector = InstanceType<typeof NeoThemeSelector>;
+export default NeoThemeSelector;

package/dist/providers/index.d.ts

@@ -0,0 +1,5 @@
+export { default as NeoThemeProvider } from './NeoThemeProvider.svelte';
+export { default as NeoThemeSelector } from './NeoThemeSelector.svelte';
+export { NeoTheme, NeoSource } from './neo-theme-provider.model.js';
+export type { NeoThemeProviderProps, NeoThemes, NeoSources, INeoThemeProviderContext } from './neo-theme-provider.model.js';
+export type { NeoThemeSelectorProps } from './neo-theme-selector.model.js';

package/dist/providers/index.js

@@ -0,0 +1,3 @@
+export { default as NeoThemeProvider } from './NeoThemeProvider.svelte';
+export { default as NeoThemeSelector } from './NeoThemeSelector.svelte';
+export { NeoTheme, NeoSource } from './neo-theme-provider.model.js';

package/dist/providers/neo-theme-provider-context.svelte.d.ts

@@ -0,0 +1,26 @@
+import { type INeoThemeProviderContext } from './neo-theme-provider.model.js';
+type NeoThemeProviderRoot = INeoThemeProviderContext['root'] | (() => INeoThemeProviderContext['root']);
+export type NeoThemeProviderContextState = Partial<Omit<INeoThemeProviderContext, 'root'>> & {
+    root?: NeoThemeProviderRoot;
+};
+export declare class NeoThemeProviderContext implements INeoThemeProviderContext {
+    #private;
+    get theme(): import("./neo-theme-provider.model.js").NeoThemes;
+    get source(): import("./neo-theme-provider.model.js").NeoSources;
+    get remember(): boolean;
+    get root(): HTMLElement | ShadowRoot | undefined;
+    get state(): {
+        theme: import("./neo-theme-provider.model.js").NeoThemes;
+        source: import("./neo-theme-provider.model.js").NeoSources;
+        remember: boolean;
+        root: HTMLElement | ShadowRoot | undefined;
+    };
+    constructor({ theme, source, remember, root }: NeoThemeProviderContextState);
+    update(partial: Partial<NeoThemeProviderContextState>): void;
+    sync(): void;
+    destroy(): void;
+}
+export declare const setNeoThemeContext: (context: NeoThemeProviderContextState) => NeoThemeProviderContext;
+export declare const getNeoThemeContext: () => NeoThemeProviderContext;
+export declare const useNeoThemeContext: () => NeoThemeProviderContext;
+export {};

package/dist/providers/neo-theme-provider-context.svelte.js

@@ -0,0 +1,78 @@
+import { getContext, setContext } from 'svelte';
+import { getSource, getTheme, hasSaved, NeoSourceKey, NeoThemeKey, NeoThemeRoot, } from './neo-theme-provider.model.js';
+import { NeoErrorThemeContextNotFound, NeoErrorThemeInvalidTarget, NeoErrorThemeTargetNotFound } from '../utils/error.utils.js';
+export class NeoThemeProviderContext {
+    #theme = $state(getTheme());
+    #source = $state(getSource());
+    #remember = $state(hasSaved());
+    #root = $state(document?.documentElement);
+    get theme() {
+        return this.#theme;
+    }
+    get source() {
+        return this.#source;
+    }
+    get remember() {
+        return this.#remember;
+    }
+    get root() {
+        return typeof this.#root === 'function' ? this.#root() : this.#root;
+    }
+    get state() {
+        return {
+            theme: this.theme,
+            source: this.source,
+            remember: this.remember,
+            root: this.root,
+        };
+    }
+    constructor({ theme, source, remember, root }) {
+        this.#theme = theme ?? this.theme;
+        this.#source = source ?? this.source;
+        this.#remember = remember ?? this.remember;
+        this.#root = root ?? this.root;
+        this.sync();
+    }
+    update(partial) {
+        this.#theme = partial.theme ?? this.#theme;
+        this.#source = partial.source ?? this.#source;
+        this.#remember = partial.remember ?? this.#remember;
+        this.#root = partial.root ?? this.#root;
+        this.sync();
+    }
+    sync() {
+        if (!this.root)
+            throw new NeoErrorThemeTargetNotFound();
+        if (!('setAttribute' in this.root))
+            throw new NeoErrorThemeInvalidTarget();
+        this.root.setAttribute(NeoThemeRoot, '');
+        this.root.setAttribute(NeoThemeKey, this.theme);
+        this.root.setAttribute(NeoSourceKey, this.source);
+        if (this.remember) {
+            localStorage.setItem(NeoThemeKey, this.theme);
+            localStorage.setItem(NeoSourceKey, this.source);
+        }
+        else {
+            localStorage.removeItem(NeoThemeKey);
+            localStorage.removeItem(NeoSourceKey);
+        }
+    }
+    destroy() {
+        if (!this.root)
+            return;
+        if (!('removeAttribute' in this.root))
+            return;
+        this.root.removeAttribute(NeoThemeRoot);
+        this.root.removeAttribute(NeoThemeKey);
+        this.root.removeAttribute(NeoSourceKey);
+    }
+}
+const NeoContextKey = Symbol('NeoThemeProviderContext');
+export const setNeoThemeContext = (context) => setContext(NeoContextKey, new NeoThemeProviderContext(context));
+export const getNeoThemeContext = () => getContext(NeoContextKey);
+export const useNeoThemeContext = () => {
+    const context = getNeoThemeContext();
+    if (!context)
+        throw new NeoErrorThemeContextNotFound();
+    return context;
+};

package/dist/providers/neo-theme-provider.model.d.ts

@@ -0,0 +1,35 @@
+import { type Snippet } from 'svelte';
+export declare const NeoTheme: {
+    readonly Light: "light";
+    readonly Dark: "dark";
+};
+export type NeoThemes = (typeof NeoTheme)[keyof typeof NeoTheme];
+export declare const NeoSource: {
+    readonly TopLeft: "top-left";
+    readonly TopRight: "top-right";
+    readonly BottomRight: "bottom-right";
+    readonly BottomLeft: "bottom-left";
+};
+export type NeoSources = (typeof NeoSource)[keyof typeof NeoSource];
+export type INeoThemeProviderContext = {
+    readonly theme: NeoThemes;
+    readonly source: NeoSources;
+    readonly remember: boolean;
+    readonly root?: HTMLElement | ShadowRoot;
+};
+export type NeoThemeProviderProps = {
+    children?: Snippet<[INeoThemeProviderContext]>;
+    theme?: NeoThemes;
+    source?: NeoSources;
+    remember?: boolean;
+    target?: HTMLElement | ShadowRoot | (() => HTMLElement | ShadowRoot);
+};
+export declare const NeoThemeRoot = "neo-theme-root";
+export declare const NeoThemeKey = "neo-theme";
+export declare const NeoSourceKey = "neo-source";
+export declare const getSavedTheme: () => NeoThemes | null;
+export declare const getPreferTheme: () => NeoThemes;
+export declare const getTheme: () => NeoThemes;
+export declare const getSavedSource: () => NeoSources | null;
+export declare const getSource: () => NeoSources;
+export declare const hasSaved: () => boolean;

package/dist/providers/neo-theme-provider.model.js

@@ -0,0 +1,20 @@
+import {} from 'svelte';
+export const NeoTheme = {
+    Light: 'light',
+    Dark: 'dark',
+};
+export const NeoSource = {
+    TopLeft: 'top-left',
+    TopRight: 'top-right',
+    BottomRight: 'bottom-right',
+    BottomLeft: 'bottom-left',
+};
+export const NeoThemeRoot = 'neo-theme-root';
+export const NeoThemeKey = 'neo-theme';
+export const NeoSourceKey = 'neo-source';
+export const getSavedTheme = () => localStorage?.getItem(NeoThemeKey);
+export const getPreferTheme = () => (window.matchMedia('(prefers-color-scheme: dark)').matches ? NeoTheme.Dark : NeoTheme.Light);
+export const getTheme = () => getSavedTheme() ?? getPreferTheme();
+export const getSavedSource = () => localStorage?.getItem(NeoSourceKey);
+export const getSource = () => getSavedSource() ?? NeoSource.TopLeft;
+export const hasSaved = () => !!getSavedTheme() || !!getSavedSource();

package/dist/providers/neo-theme-selector.model.d.ts

@@ -0,0 +1,6 @@
+import type { Snippet } from 'svelte';
+import type { NeoButtonGroupProps } from '../buttons/neo-button-group.model.js';
+import type { INeoThemeProviderContext } from './neo-theme-provider.model.js';
+export type NeoThemeSelectorProps = {
+    children: Snippet<[INeoThemeProviderContext]>;
+} & Omit<NeoButtonGroupProps, 'children'>;

package/dist/providers/neo-theme-selector.model.js

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

package/dist/skeletons/NeoSkeletonContainer.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import { fade } from 'svelte/transition';
+
+  import type { NeoSkeletonContainerProps } from './neo-skeleton-container.model.js';
+
+  import NeoTransitionContainer from '../containers/NeoTransitionContainer.svelte';
+  import { toTransition, toTransitionProps } from '../utils/action.utils.js';
+  import { enterDefaultTransition, leaveDefaultTransition } from '../utils/transition.utils.js';
+
+  const {
+    // Snippets
+    content,
+    children: skeleton,
+
+    // State
+    loading = true,
+
+    // Styles
+    width,
+    height,
+
+    // Transition
+    in: inAction,
+    out: outAction,
+
+    // Other props
+    containerProps,
+  }: NeoSkeletonContainerProps = $props();
+
+  const inFn = $derived(toTransition(inAction, fade));
+  const inProps = $derived(toTransitionProps(inAction, leaveDefaultTransition));
+  const outFn = $derived(toTransition(outAction, fade));
+  const outProps = $derived(toTransitionProps(outAction, enterDefaultTransition));
+</script>
+
+{#if content}
+  <NeoTransitionContainer {width} {height} {...containerProps}>
+    {#if loading}
+      {@render skeleton?.()}
+    {:else}
+      <div class="neo-skeleton-content-container" in:inFn={inProps} out:outFn={outProps}>
+        {@render content?.()}
+      </div>
+    {/if}
+  </NeoTransitionContainer>
+{:else if loading}
+  {@render skeleton?.()}
+{/if}

package/dist/skeletons/NeoSkeletonContainer.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { NeoSkeletonContainerProps } from './neo-skeleton-container.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 NeoSkeletonContainer: $$__sveltets_2_IsomorphicComponent<NeoSkeletonContainerProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type NeoSkeletonContainer = InstanceType<typeof NeoSkeletonContainer>;
+export default NeoSkeletonContainer;