@gravionlabs/helix-core 22.0.0

package/types/gravionlabs-helix-core-uix-motion.d.ts

@@ -0,0 +1,276 @@
+type MotionType = 'transition' | 'animation';
+type MotionPhase = 'enter' | 'leave';
+type MotionStage = 'Before' | 'Start' | 'After' | 'Cancelled';
+/**
+ * Defines the duration of motion effects.
+ * It can be a single number representing the duration in milliseconds,
+ * or an object specifying different durations for 'enter' and 'leave' phases.
+ */
+type MotionDuration = number | {
+    [P in MotionPhase]?: number;
+} | undefined;
+/**
+ * Options for specifying class names during different phases of motion.
+ * These class names are applied at the start, during, and at the end of the motion.
+ */
+type ClassNameOptions = {
+    /**
+     * The class name to apply at the start of the motion.
+     */
+    from?: string | undefined;
+    /**
+     * The class name to apply while the motion is active.
+     */
+    active?: string | undefined;
+    /**
+     * The class name to apply at the end of the motion.
+     */
+    to?: string | undefined;
+};
+/**
+ * Defines class names for both 'enter' and 'leave' motion phases.
+ */
+interface MotionClassNames {
+    /**
+     * Class names for the 'enter' motion phase.
+     * @see ClassNameOptions
+     */
+    enterClass?: ClassNameOptions | undefined;
+    /**
+     * Class names for the 'leave' motion phase.
+     * @see ClassNameOptions
+     */
+    leaveClass?: ClassNameOptions | undefined;
+}
+/**
+ * Metadata about the motion effect, including its type, timeout, and count.
+ */
+type MotionMetadata = {
+    /**
+     * The type of motion effect, either 'transition' or 'animation'.
+     * @see MotionType
+     */
+    type: MotionType | undefined;
+    /**
+     * The timeout duration for the motion effect in milliseconds.
+     */
+    timeout: number | 0;
+    /**
+     * The count of transition or animation properties involved in the motion.
+     */
+    count: number | 0;
+};
+/**
+ * Event object passed to motion hooks, containing the target element.
+ */
+interface MotionEvent {
+    /**
+     * The target element of the motion event.
+     */
+    element: Element;
+}
+/**
+ * Hooks for various stages of the motion lifecycle.
+ */
+interface MotionHooks {
+    /**
+     * Called before the enter motion starts.
+     * @param event - The motion event object.
+     * @returns
+     */
+    onBeforeEnter?: (event?: MotionEvent) => void;
+    /**
+     * Called when the enter motion starts.
+     * @param event - The motion event object.
+     * @returns
+     */
+    onEnter?: (event?: MotionEvent) => void;
+    /**
+     * Called after the enter motion ends.
+     * @param event - The motion event object.
+     * @returns
+     */
+    onAfterEnter?: (event?: MotionEvent) => void;
+    /**
+     * Called if the enter motion is cancelled.
+     * @param event - The motion event object.
+     * @returns
+     */
+    onEnterCancelled?: (event?: MotionEvent) => void;
+    /**
+     * Called before the leave motion starts.
+     * @param event - The motion event object.
+     * @returns
+     */
+    onBeforeLeave?: (event?: MotionEvent) => void;
+    /**
+     * Called when the leave motion starts.
+     * @param event - The motion event object.
+     * @returns
+     */
+    onLeave?: (event?: MotionEvent) => void;
+    /**
+     * Called after the leave motion ends.
+     * @param event - The motion event object.
+     * @returns
+     */
+    onAfterLeave?: (event?: MotionEvent) => void;
+    /**
+     * Called if the leave motion is cancelled.
+     * @param event - The motion event object.
+     * @returns
+     */
+    onLeaveCancelled?: (event?: MotionEvent) => void;
+}
+/**
+ * Hooks organized by motion phase and stage.
+ */
+type MotionHooksWithPhase = {
+    [P in MotionPhase]?: {
+        [S in MotionStage as `on${S}`]?: (MotionHooks & {
+            [key: string]: unknown;
+        })[`on${S extends 'Start' | 'Cancelled' ? '' : S}${Capitalize<P>}${S extends 'Cancelled' ? S : ''}`];
+    };
+};
+/**
+ * Class names organized by motion phase.
+ */
+type MotionClassNamesWithPhase = {
+    [P in MotionPhase]: Required<ClassNameOptions>;
+};
+/**
+ * Options for configuring motion effects.
+ */
+interface MotionOptions extends MotionClassNames, MotionHooks {
+    /**
+     * The base name used for generating default class names.
+     */
+    name?: string | undefined;
+    /**
+     * The type of motion effect to use.
+     * @see MotionType
+     */
+    type?: MotionType | undefined;
+    /**
+     * Indicates whether to respect the user's reduced motion preference.
+     */
+    safe?: boolean | undefined;
+    /**
+     * Indicates whether motion effects are disabled.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Indicates whether the motion should run on the initial render (appear phase).
+     */
+    appear?: boolean | undefined;
+    /**
+     * Indicates whether to perform enter motions.
+     */
+    enter?: boolean | undefined;
+    /**
+     * Indicates whether to perform leave motions.
+     */
+    leave?: boolean | undefined;
+    /**
+     * The duration of the motion effect.
+     * @see MotionDuration
+     */
+    duration?: MotionDuration | undefined;
+    /**
+     * Indicates whether to automatically adjust height during the motion.
+     */
+    autoHeight?: boolean | undefined;
+    /**
+     * Indicates whether to automatically adjust width during the motion.
+     */
+    autoWidth?: boolean | undefined;
+}
+/**
+ * Represents an instance of a motion effect applied to an element.
+ */
+type MotionInstance = {
+    /**
+     * Starts the enter motion.
+     * @returns - A promise that resolves to a cancellation function or void.
+     */
+    enter: () => Promise<(() => void) | void>;
+    /**
+     * Starts the leave motion.
+     * @returns - A promise that resolves to a cancellation function or void.
+     */
+    leave: () => Promise<(() => void) | void>;
+    /**
+     * Cancels the motion.
+     * @returns
+     */
+    cancel: () => void;
+    /**
+     * Updates the motion instance with a new element and options.
+     * @param element - The target element.
+     * @param options - The motion options.
+     * @returns
+     */
+    update: (element: Element, options?: MotionOptions) => void;
+};
+
+declare const DEFAULT_MOTION_OPTIONS: MotionOptions;
+/**
+ * Creates a MotionInstance for the given element with the specified options.
+ * @param element - The target element for motion effects.
+ * @param options - Configuration options for the motion instance.
+ * @returns A MotionInstance that can be used to control the motion.
+ */
+declare function createMotion(element: Element, options?: MotionOptions): MotionInstance;
+
+declare const ANIMATION = "animation";
+declare const TRANSITION = "transition";
+/**
+ * Determines whether motion effects should be skipped based on the provided options.
+ * @param options - The motion options to evaluate.
+ * @returns A boolean indicating whether motion should be skipped.
+ */
+declare function shouldSkipMotion(options: MotionOptions | undefined): boolean;
+/**
+ * Merges the provided motion options with the default options.
+ * @param inOptions - The motion options to merge.
+ * @param defaultOptions - The default motion options.
+ * @returns The merged motion options.
+ */
+declare function mergeOptions(inOptions: MotionOptions | undefined, defaultOptions: MotionOptions): MotionOptions;
+/**
+ * Resolves class names for motion phases based on the provided options.
+ * @param options - The motion options containing class names and base name.
+ * @returns The resolved class names organized by motion phase.
+ */
+declare function resolveClassNames(options: MotionOptions | undefined): MotionClassNamesWithPhase;
+/**
+ * Retrieves the motion hooks organized by phase based on the provided options.
+ * @param options - The motion options containing hooks.
+ * @returns The motion hooks organized by phase.
+ */
+declare function getMotionHooks(options: MotionOptions | undefined): MotionHooksWithPhase;
+/**
+ * Retrieves motion metadata including type, timeout, and count for the given element.
+ * @param element - The target element to retrieve motion metadata from.
+ * @param expectedType - The expected type of motion ('transition' or 'animation').
+ * @returns The motion metadata including type, timeout, and count.
+ */
+declare function getMotionMetadata(element: Element, expectedType?: MotionMetadata['type']): MotionMetadata;
+/**
+ * Resolves the duration for a given animation phase.
+ * @param duration - The duration can be a number or an object with `enter` and `leave` properties.
+ * @param phase - The phase of the transition/animation, either 'enter' or 'leave'.
+ * @returns The resolved duration in milliseconds or null if not specified.
+ */
+declare function resolveDuration(duration: MotionOptions['duration'], phase: MotionPhase): number | null;
+/**
+ * Sets CSS custom properties for auto height and/or width on the given element.
+ * @param element - The target HTML element.
+ * @param autoHeight - Whether to set the auto height CSS variable.
+ * @param autoWidth - Whether to set the auto width CSS variable.
+ * @returns
+ */
+declare function setAutoDimensionVariables(element: HTMLElement, autoHeight?: boolean, autoWidth?: boolean): void;
+
+export { ANIMATION, DEFAULT_MOTION_OPTIONS, TRANSITION, createMotion, getMotionHooks, getMotionMetadata, mergeOptions, resolveClassNames, resolveDuration, setAutoDimensionVariables, shouldSkipMotion };
+export type { ClassNameOptions, MotionClassNames, MotionClassNamesWithPhase, MotionDuration, MotionEvent, MotionHooks, MotionHooksWithPhase, MotionInstance, MotionMetadata, MotionOptions, MotionPhase, MotionStage, MotionType };

package/types/gravionlabs-helix-core-uix-styled.d.ts

@@ -0,0 +1,309 @@
+import * as _gravionlabs_helix_core_uix_utils from '@gravionlabs/helix-core/uix/utils';
+
+declare function definePreset<T extends Record<string, unknown>>(...presets: T[]): T;
+
+declare function updatePreset<T extends Record<string, unknown>>(...presets: T[]): T;
+
+declare function updatePrimaryPalette<T = unknown, P = unknown>(palette?: T): P;
+
+declare function updateSurfacePalette<T = unknown, P = unknown>(palette?: T): P;
+
+declare function usePreset<T extends Record<string, unknown>>(...presets: T[]): T;
+
+declare function useTheme<T = unknown>(theme: T): T;
+
+declare const _default$5: {
+    defaults: {
+        variable: {
+            prefix: string;
+            selector: string;
+            excludedKeyRegex: RegExp;
+        };
+        options: {
+            prefix: string;
+            darkModeSelector: string;
+            cssLayer: boolean;
+        };
+    };
+    _theme: undefined;
+    _layerNames: Set<unknown>;
+    _loadedStyleNames: Set<unknown>;
+    _loadingStyles: Set<unknown>;
+    _tokens: {};
+    update(newValues?: any): void;
+    readonly theme: any;
+    readonly preset: any;
+    readonly options: any;
+    readonly tokens: any;
+    getTheme(): any;
+    setTheme(newValue: any): void;
+    getPreset(): any;
+    setPreset(newValue: any): void;
+    getOptions(): any;
+    setOptions(newValue: any): void;
+    getLayerNames(): any[];
+    setLayerNames(layerName: any): void;
+    getLoadedStyleNames(): any;
+    isStyleNameLoaded(name: string): any;
+    setLoadedStyleName(name: string): void;
+    deleteLoadedStyleName(name: string): void;
+    clearLoadedStyleNames(): void;
+    getTokenValue(tokenPath: string): any;
+    getCommon(name: string | undefined, params: any): {
+        primitive: {
+            css: any;
+            tokens: any;
+        };
+        semantic: {
+            css: any;
+            tokens: any;
+        };
+        global: {
+            css: any;
+            tokens: any;
+        };
+        style: any;
+    };
+    getComponent(name: string | undefined, params: any): any;
+    getDirective(name: string | undefined, params: any): any;
+    getCustomPreset(name: string | undefined, preset: any, selector: string, params: any): {
+        css: any;
+        tokens: any;
+        style: any;
+    };
+    getLayerOrderCSS(name?: string): string;
+    transformCSS(name: string | undefined, css: string, type?: string, mode?: string): string;
+    getCommonStyleSheet(name: string | undefined, params: any, props?: {}): any;
+    getStyleSheet(name: string, params: any, props?: {}): string;
+    onStyleMounted(name: string): void;
+    onStyleUpdated(name: string): void;
+    onStyleLoaded(event: any, { name }: {
+        name: any;
+    }): void;
+};
+
+declare const _default$4: (color1: string, color2: string, weight: number) => string;
+
+declare const _default$3: (color: string) => string | ColorScale;
+
+declare const _default$2: (color: string, percent: number) => string;
+
+declare const _default$1: (color: string, percent: number) => string;
+
+declare function css(strings: TemplateStringsArray | StyleType, ...exprs: unknown[]): string | undefined;
+
+declare const $dt: (tokenPath: string) => {
+    name: string;
+    variable: string;
+    value: unknown;
+};
+declare const dt: (...args: Parameters<typeof dtwt> extends [unknown, ...infer Rest] ? Rest : never) => any;
+declare const dtwt: (theme: any | undefined, tokenPath: string, fallback?: string, type?: string) => any;
+
+declare const $t: (theme?: any) => {
+    preset(value: any): any;
+    options(value: any): any;
+    primaryPalette(primary: any): any;
+    surfacePalette(surface: any): any;
+    define({ useDefaultPreset, useDefaultOptions }?: {
+        useDefaultPreset?: boolean | undefined;
+        useDefaultOptions?: boolean | undefined;
+    }): {
+        preset: any;
+        options: any;
+    };
+    update({ mergePresets, mergeOptions }?: {
+        mergePresets?: boolean | undefined;
+        mergeOptions?: boolean | undefined;
+    }): {
+        preset: any;
+        options: any;
+    };
+    use(options: any): any;
+};
+
+interface toVariableOptions {
+    prefix?: string;
+    selector?: string;
+    excludedKeyRegex?: RegExp;
+}
+interface toVariableOutput {
+    value: string[];
+    tokens: string[];
+    declarations: string;
+    css: string;
+}
+declare function export_default(theme: any, options?: toVariableOptions): toVariableOutput;
+
+declare const ThemeService: _gravionlabs_helix_core_uix_utils.EventBusOptions;
+
+interface StyleSheetProps {
+    attrs?: Record<string, unknown>;
+}
+interface StyleMeta<E = HTMLStyleElement> {
+    name?: string;
+    css?: string;
+    attrs?: Record<string, unknown>;
+    markup?: string;
+    element?: E;
+}
+declare class StyleSheet<E = HTMLStyleElement> {
+    _styles: Map<string, StyleMeta<E>>;
+    _attrs: Record<string, unknown>;
+    constructor({ attrs }?: StyleSheetProps);
+    get(key: string): StyleMeta<E> | undefined;
+    has(key: string): boolean;
+    delete(key: string): void;
+    clear(): void;
+    add(key: string, css?: string): void;
+    update(): void;
+    getStyles(): Map<string, StyleMeta<E>>;
+    getAllCSS(): (string | undefined)[];
+    getAllMarkup(): (string | undefined)[];
+    getAllElements(): (E | undefined)[];
+    /**
+     * Used to create a style element.
+     *
+     * @param {StyleMeta} meta
+     * @returns {HTMLStyleElement | undefined}
+     */
+    createStyleElement(meta?: StyleMeta): E | undefined;
+}
+
+declare const EXPR_REGEX: RegExp;
+declare const CALC_REGEX: RegExp;
+declare const VAR_REGEX: RegExp;
+declare function toTokenKey(str: string): string;
+declare function merge(value1: any, value2: any): void;
+declare function toValue(value: any): any;
+declare function toUnit(value: string, variable?: string): string;
+declare function toNormalizePrefix(prefix: string): string;
+declare function toNormalizeVariable(prefix?: string, variable?: string): string;
+declare function getVariableName(prefix?: string, variable?: string): string;
+declare function hasOddBraces(str?: string): boolean;
+declare function getVariableValue(value: any, variable?: string, prefix?: string, excludedKeyRegexes?: RegExp[], fallback?: string): string | undefined;
+declare function getComputedValue(obj: {} | undefined, value: any): any;
+declare function setProperty(properties: string[], key: string, value?: string): void;
+declare function getRule(selector: string, properties: string): string;
+declare function evaluateDtExpressions(input: string, fn: (...args: any[]) => string): string;
+
+declare const _default: {
+    regex: {
+        rules: {
+            class: {
+                pattern: RegExp;
+                resolve(value: string): {
+                    type: string;
+                    selector: string;
+                    matched: any;
+                };
+            };
+            attr: {
+                pattern: RegExp;
+                resolve(value: string): {
+                    type: string;
+                    selector: string;
+                    matched: any;
+                };
+            };
+            media: {
+                pattern: RegExp;
+                resolve(value: string): {
+                    type: string;
+                    selector: string;
+                    matched: any;
+                };
+            };
+            system: {
+                pattern: RegExp;
+                resolve(value: string): {
+                    type: string;
+                    selector: string;
+                    matched: any;
+                };
+            };
+            custom: {
+                resolve(value: string): {
+                    type: string;
+                    selector: string;
+                    matched: boolean;
+                };
+            };
+        };
+        resolve(value: any): any[];
+    };
+    _toVariables(theme: any, options: any): toVariableOutput;
+    getCommon({ name, theme, params, set, defaults }: any): {
+        primitive: {
+            css: any;
+            tokens: any;
+        };
+        semantic: {
+            css: any;
+            tokens: any;
+        };
+        global: {
+            css: any;
+            tokens: any;
+        };
+        style: any;
+    };
+    getPreset({ name, preset, options, params, set, defaults, selector }: any): {
+        css: any;
+        tokens: any;
+        style: any;
+    };
+    getPresetC({ name, theme, params, set, defaults }: any): any;
+    getPresetD({ name, theme, params, set, defaults }: any): any;
+    applyDarkColorScheme(options: any): boolean;
+    getColorSchemeOption(options: any, defaults: any): any;
+    getLayerOrder(name: string, options: any | undefined, params: any, defaults: any): string;
+    getCommonStyleSheet({ name, theme, params, props, set, defaults }: any): any;
+    getStyleSheet({ name, theme, params, props, set, defaults }: any): string;
+    createTokens(obj: any | undefined, defaults: any, parentKey?: string, parentPath?: string, tokens?: any): any;
+    getTokenValue(tokens: any, path: string, defaults: any): any;
+    getSelectorRule(selector1: any, selector2: any, type: string, css: string): string;
+    transformCSS(name: string, css: string, mode?: string, type?: string, options?: any, set?: any, defaults?: any, selector?: string): string;
+};
+
+interface ThemeOptions {
+    /**
+     * The prefix for the theme
+     * @default 'p'
+     */
+    prefix?: string;
+    /**
+     * Dark mode selector
+     * @default 'system'
+     */
+    darkModeSelector?: string;
+    /**
+     * Whether to use the css layer
+     * @default false
+     */
+    cssLayer?: boolean | {
+        name?: string;
+        order?: string;
+    };
+}
+interface StyleOptions {
+    dt: (key: string, fallback?: string | number | Pick<StyleOptions, 'dt'>) => string | number | undefined;
+}
+declare type StyleType<T = StyleOptions> = string | ((options?: T) => string);
+type ColorScale = {
+    0?: string;
+    50?: string;
+    100?: string;
+    200?: string;
+    300?: string;
+    400?: string;
+    500?: string;
+    600?: string;
+    700?: string;
+    800?: string;
+    900?: string;
+    950?: string;
+};
+
+export { $dt, $t, CALC_REGEX, EXPR_REGEX, StyleSheet, _default$5 as Theme, ThemeService, _default as ThemeUtils, VAR_REGEX, css, definePreset, dt, dtwt, evaluateDtExpressions, getComputedValue, getRule, getVariableName, getVariableValue, hasOddBraces, merge, _default$4 as mix, _default$3 as palette, setProperty, _default$2 as shade, _default$1 as tint, toNormalizePrefix, toNormalizeVariable, toTokenKey, toUnit, toValue, export_default as toVariables, updatePreset, updatePrimaryPalette, updateSurfacePalette, usePreset, useTheme };
+export type { ColorScale, StyleMeta, StyleOptions, StyleSheetProps, StyleType, ThemeOptions };