@dvcol/neo-svelte
Version:
Neomorphic ui library for svelte 5
116 lines (115 loc) • 3.69 kB
TypeScript
import type { Snippet } from 'svelte';
import type { HTMLNeoBaseElement } from '../utils/html-element.utils.js';
/**
* The active theme (`dark` or `light`)
*/
export declare const NeoTheme: {
readonly Light: "light";
readonly Dark: "dark";
};
export type NeoThemes = (typeof NeoTheme)[keyof typeof NeoTheme];
/**
* The light source to simulate shadows
*/
export declare const NeoSource: {
readonly TopLeft: "top-left";
readonly TopRight: "top-right";
readonly BottomRight: "bottom-right";
readonly BottomLeft: "bottom-left";
};
export declare const NeoTransition: {
readonly None: "none";
readonly Spin: "neo-spin";
readonly Wave: "neo-wave";
readonly Circle: "neo-circle";
};
export type NeoTransitions = (typeof NeoTransition)[keyof typeof NeoTransition];
export type NeoSources = (typeof NeoSource)[keyof typeof NeoSource];
export interface INeoThemeProviderContext {
/**
* If styles have finished loading.
*/
readonly ready?: boolean;
/**
* If a style reset is applied.
*/
readonly reset?: boolean;
/**
* The active theme (`dark` or `light`)
*/
readonly theme: NeoThemes;
/**
* The active light source to simulate shadows
*/
readonly source: NeoSources;
/**
* If the reset, theme and source are stored in local-storage
*/
readonly remember: boolean;
/**
* The theme transition to apply when changing theme.
*/
readonly transition: NeoTransitions;
/**
* The target to which scope the theme variables
*/
readonly root?: HTMLElement | ShadowRoot;
}
export interface NeoThemeProviderProps<Tag extends keyof HTMLElementTagNameMap = 'div'> extends Omit<HTMLNeoBaseElement<HTMLElementTagNameMap[Tag]>, 'children'> {
/**
* Child element to wrap in the theme context.
*/
children?: Snippet<[INeoThemeProviderContext]>;
/**
* The HTML reference to the inner element when target is `self`.
* @see target
*/
ref?: HTMLElement;
/**
* The HTML tag to use for the container.
* @default 'div'
*/
tag?: Tag;
/**
* If `true`, injects a css reset for common styling.
*/
reset?: boolean;
/**
* Enforce `dark` or `light` theme.
*
* @default prefers-color-scheme
*/
theme?: NeoThemes;
/**
* The light source to simulate shadows
*
* @default top-left
*/
source?: NeoSources;
/**
* To store the last used reset & theme & source in local storage (if available)
*
* @default true
*/
remember?: boolean;
/**
* The target to which scope the theme variables
*
* @default document.documentElement
*/
target?: 'self' | HTMLElement | ShadowRoot | (() => HTMLElement | ShadowRoot);
}
export declare const NeoThemeRoot = "neo-theme-root";
export declare const NeoThemeStorageKey: Record<string, `neo-${keyof INeoThemeProviderContext | 'in-flight'}`>;
export type NeoThemeStorageKeys = (typeof NeoThemeStorageKey)[keyof typeof NeoThemeStorageKey];
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 getSavedReset: () => string | null;
export declare const getReset: () => boolean;
export declare const getSavedRemember: () => string | null;
export declare const getRemember: () => boolean;
export declare const getSavedTransition: () => NeoTransitions | null;
export declare const getTransition: () => NeoTransitions;