veilkit 0.1.0 → 0.3.0

package/dist/index.d.cts

@@ -1,11 +1,11 @@
-import { a as VeilAnimationName, i as VeilDirection, j as VeilRevealTransition, A as AutoMeasureOptions, S as SkeletonProps, e as VeilSpinnerType, b as SpinnerProps, L as LoadingButtonProps, h as LazyImageProps, T as TextLoaderProps } from './types-Ciu5e5xt.cjs';
-export { C as CustomThemeInput, O as OverlayProps, f as PresetProps, P as ProgressProps, g as SkeletonController, c as VeilGlobalConfig, k as VeilPresetName, d as VeilPrimitiveType, V as VeilThemeName, l as VeilThemeTokens } from './types-Ciu5e5xt.cjs';
+import { a as VeilAnimationName, o as VeilDirection, p as VeilRevealTransition, A as AutoMeasureOptions, S as SkeletonProps, f as VeilSpinnerType, c as SpinnerProps, e as ButtonLoadingStyle, L as LoadingButtonProps, B as ButtonStatus, m as LazyImageProps, T as TextLoaderProps, n as CustomSkeletonConfig } from './types-D2ryMkLU.cjs';
+export { j as ButtonPressFeedback, k as ButtonResultAnimation, q as CustomSkeletonNode, r as CustomSkeletonNodeType, C as CustomThemeInput, O as OverlayProps, P as PresetProps, b as ProgressProps, l as SkeletonController, d as VeilGlobalConfig, g as VeilPresetName, i as VeilPrimitiveType, h as VeilShapeStyle, V as VeilThemeName, s as VeilThemeTokens } from './types-D2ryMkLU.cjs';
 export { BUILTIN_THEMES, createTheme, getThemeTokens } from './themes/index.cjs';
-export { L as LoadingManager, O as OverlayController, R as RouteProgressController, T as TrackOptions, V as VeilkitController, a as applyA11yLoading, c as createPreset, b as createPrimitive, d as createProgressElement, e as createSkeletonElement, f as createSkeletonParagraph, v as default, g as getLabel, h as getLocale, l as loadingManager, o as overlayController, p as progressController, r as removeA11yLoading, s as setLabels, i as setLocale, t as track, v as veil, w as wrapFetch } from './controller-5OzP0U8X.cjs';
+export { L as LoadingManager, O as OverlayController, P as PRESET_NAMES, R as RouteProgressController, T as TrackOptions, V as VeilkitController, a as applyA11yLoading, c as createPreset, b as createPrimitive, d as createProgressElement, e as createSkeletonElement, f as createSkeletonParagraph, v as default, g as getLabel, h as getLocale, l as loadingManager, o as overlayController, p as progressController, r as removeA11yLoading, s as setLabels, i as setLocale, t as track, v as veil, w as wrapFetch } from './controller-CzNTbEGd.cjs';
 
 /**
  * Veilkit - Animation Engine
- * 12 GPU-Accelerated Animation Definitions (transform & opacity only)
+ * 30 GPU-Accelerated Animation Definitions (transform & opacity only)
  */
 
 interface AnimationConfig {
@@ -17,7 +17,7 @@ interface AnimationConfig {
 }
 declare const ANIMATION_NAMES: VeilAnimationName[];
 /**
- * Generates the CSS keyframes and utility rules for all 12 animations.
+ * Generates the CSS keyframes and utility rules for all 30 animations.
  * Strictly uses transform and opacity for 60fps GPU execution.
  */
 declare function getAnimationKeyframesCSS(): string;
@@ -169,9 +169,8 @@ declare function createAutoMeasureOverlay(container: HTMLElement, options?: Auto
 };
 
 /**
- * Veilkit - 12 Spinner Loaders
- * Types: ring, dual-ring, dots, bars, pulse, orbit, wave, bounce,
- *        ios-activity, glass-orb, morph, progress-circle
+ * Veilkit - 30 Spinner Loaders
+ * Complete catalog of GPU-accelerated spinners
  */
 
 declare const SPINNER_TYPES: VeilSpinnerType[];
@@ -182,12 +181,15 @@ declare function createSpinner(props?: SpinnerProps): HTMLElement;
 
 /**
  * Veilkit - Loading Button Controller
- * Inline spinner, preserves exact button dimensions to prevent layout shifts,
- * disables clicks, and applies aria-disabled state.
+ * 16 Loading Styles, State Machine (idle -> loading -> success | error -> idle),
+ * Result Animations (checkmark, cross, shake, success-burst), and Press Feedback.
  */
 
+declare const BUTTON_LOADING_STYLES: ButtonLoadingStyle[];
 declare function wrapLoadingButton(buttonEl: HTMLButtonElement, props?: LoadingButtonProps): {
+    setStatus: (status: ButtonStatus, customText?: string) => void;
     setLoading: (loading: boolean, loadingText?: string) => void;
+    getStatus: () => ButtonStatus;
     destroy: () => void;
 };
 
@@ -206,4 +208,27 @@ declare function createLazyImage(props: LazyImageProps): HTMLElement;
 
 declare function createTextLoader(props?: TextLoaderProps): HTMLElement;
 
-export { ANIMATION_NAMES, type AnimationConfig, AntiFlickerController, type AntiFlickerOptions, AutoMeasureOptions, type CachedLayout, LazyImageProps, type LeafBox, LoadingButtonProps, type RevealOptions, SPINNER_TYPES, SkeletonProps, SpinnerProps, TextLoaderProps, VeilAnimationName, VeilDirection, VeilRevealTransition, VeilSpinnerType, applyReveal, createAutoMeasureOverlay, createLazyImage, createSpinner, createTextLoader, getAnimationKeyframesCSS, getCachedLayout, getStylesCSS, getSyncDelay, getTimelineOrigin, injectStyles, measureContainer, observeOffscreen, parseDurationMs, setCachedLayout, setNonce, setupVisibilityObserver, teardownObservers, wrapLoadingButton };
+/**
+ * Veilkit - Custom Skeleton Builder & Declarative Layout Engine
+ * Allows developers to create custom skeleton layouts matching their website's exact UI structure.
+ */
+
+declare function createCustomSkeleton(config: CustomSkeletonConfig): HTMLElement;
+declare class SkeletonBuilder {
+    private config;
+    constructor(options?: Partial<CustomSkeletonConfig>);
+    row(builderFn: (row: SkeletonBuilder) => void, gap?: number | string): this;
+    col(builderFn: (col: SkeletonBuilder) => void, gap?: number | string): this;
+    card(builderFn: (card: SkeletonBuilder) => void, gap?: number | string): this;
+    avatar(size?: number | string): this;
+    heading(width?: number | string, height?: number | string): this;
+    lines(count?: number, gap?: number | string): this;
+    button(width?: number | string, height?: number | string): this;
+    rect(width?: number | string, height?: number | string, radius?: number | string): this;
+    badge(width?: number | string, height?: number | string): this;
+    toConfig(): CustomSkeletonConfig;
+    build(): HTMLElement;
+    toCode(framework?: 'react' | 'vue' | 'svelte' | 'angular' | 'html'): string;
+}
+
+export { ANIMATION_NAMES, type AnimationConfig, AntiFlickerController, type AntiFlickerOptions, AutoMeasureOptions, BUTTON_LOADING_STYLES, ButtonLoadingStyle, ButtonStatus, type CachedLayout, CustomSkeletonConfig, LazyImageProps, type LeafBox, LoadingButtonProps, type RevealOptions, SPINNER_TYPES, SkeletonBuilder, SkeletonProps, SpinnerProps, TextLoaderProps, VeilAnimationName, VeilDirection, VeilRevealTransition, VeilSpinnerType, applyReveal, createAutoMeasureOverlay, createCustomSkeleton, createLazyImage, createSpinner, createTextLoader, getAnimationKeyframesCSS, getCachedLayout, getStylesCSS, getSyncDelay, getTimelineOrigin, injectStyles, measureContainer, observeOffscreen, parseDurationMs, setCachedLayout, setNonce, setupVisibilityObserver, teardownObservers, wrapLoadingButton };

package/dist/index.d.ts

@@ -1,11 +1,11 @@
-import { a as VeilAnimationName, i as VeilDirection, j as VeilRevealTransition, A as AutoMeasureOptions, S as SkeletonProps, e as VeilSpinnerType, b as SpinnerProps, L as LoadingButtonProps, h as LazyImageProps, T as TextLoaderProps } from './types-Ciu5e5xt.js';
-export { C as CustomThemeInput, O as OverlayProps, f as PresetProps, P as ProgressProps, g as SkeletonController, c as VeilGlobalConfig, k as VeilPresetName, d as VeilPrimitiveType, V as VeilThemeName, l as VeilThemeTokens } from './types-Ciu5e5xt.js';
+import { a as VeilAnimationName, o as VeilDirection, p as VeilRevealTransition, A as AutoMeasureOptions, S as SkeletonProps, f as VeilSpinnerType, c as SpinnerProps, e as ButtonLoadingStyle, L as LoadingButtonProps, B as ButtonStatus, m as LazyImageProps, T as TextLoaderProps, n as CustomSkeletonConfig } from './types-D2ryMkLU.js';
+export { j as ButtonPressFeedback, k as ButtonResultAnimation, q as CustomSkeletonNode, r as CustomSkeletonNodeType, C as CustomThemeInput, O as OverlayProps, P as PresetProps, b as ProgressProps, l as SkeletonController, d as VeilGlobalConfig, g as VeilPresetName, i as VeilPrimitiveType, h as VeilShapeStyle, V as VeilThemeName, s as VeilThemeTokens } from './types-D2ryMkLU.js';
 export { BUILTIN_THEMES, createTheme, getThemeTokens } from './themes/index.js';
-export { L as LoadingManager, O as OverlayController, R as RouteProgressController, T as TrackOptions, V as VeilkitController, a as applyA11yLoading, c as createPreset, b as createPrimitive, d as createProgressElement, e as createSkeletonElement, f as createSkeletonParagraph, v as default, g as getLabel, h as getLocale, l as loadingManager, o as overlayController, p as progressController, r as removeA11yLoading, s as setLabels, i as setLocale, t as track, v as veil, w as wrapFetch } from './controller-Co5bvnaB.js';
+export { L as LoadingManager, O as OverlayController, P as PRESET_NAMES, R as RouteProgressController, T as TrackOptions, V as VeilkitController, a as applyA11yLoading, c as createPreset, b as createPrimitive, d as createProgressElement, e as createSkeletonElement, f as createSkeletonParagraph, v as default, g as getLabel, h as getLocale, l as loadingManager, o as overlayController, p as progressController, r as removeA11yLoading, s as setLabels, i as setLocale, t as track, v as veil, w as wrapFetch } from './controller-Cmc3Hp1j.js';
 
 /**
  * Veilkit - Animation Engine
- * 12 GPU-Accelerated Animation Definitions (transform & opacity only)
+ * 30 GPU-Accelerated Animation Definitions (transform & opacity only)
  */
 
 interface AnimationConfig {
@@ -17,7 +17,7 @@ interface AnimationConfig {
 }
 declare const ANIMATION_NAMES: VeilAnimationName[];
 /**
- * Generates the CSS keyframes and utility rules for all 12 animations.
+ * Generates the CSS keyframes and utility rules for all 30 animations.
  * Strictly uses transform and opacity for 60fps GPU execution.
  */
 declare function getAnimationKeyframesCSS(): string;
@@ -169,9 +169,8 @@ declare function createAutoMeasureOverlay(container: HTMLElement, options?: Auto
 };
 
 /**
- * Veilkit - 12 Spinner Loaders
- * Types: ring, dual-ring, dots, bars, pulse, orbit, wave, bounce,
- *        ios-activity, glass-orb, morph, progress-circle
+ * Veilkit - 30 Spinner Loaders
+ * Complete catalog of GPU-accelerated spinners
  */
 
 declare const SPINNER_TYPES: VeilSpinnerType[];
@@ -182,12 +181,15 @@ declare function createSpinner(props?: SpinnerProps): HTMLElement;
 
 /**
  * Veilkit - Loading Button Controller
- * Inline spinner, preserves exact button dimensions to prevent layout shifts,
- * disables clicks, and applies aria-disabled state.
+ * 16 Loading Styles, State Machine (idle -> loading -> success | error -> idle),
+ * Result Animations (checkmark, cross, shake, success-burst), and Press Feedback.
  */
 
+declare const BUTTON_LOADING_STYLES: ButtonLoadingStyle[];
 declare function wrapLoadingButton(buttonEl: HTMLButtonElement, props?: LoadingButtonProps): {
+    setStatus: (status: ButtonStatus, customText?: string) => void;
     setLoading: (loading: boolean, loadingText?: string) => void;
+    getStatus: () => ButtonStatus;
     destroy: () => void;
 };
 
@@ -206,4 +208,27 @@ declare function createLazyImage(props: LazyImageProps): HTMLElement;
 
 declare function createTextLoader(props?: TextLoaderProps): HTMLElement;
 
-export { ANIMATION_NAMES, type AnimationConfig, AntiFlickerController, type AntiFlickerOptions, AutoMeasureOptions, type CachedLayout, LazyImageProps, type LeafBox, LoadingButtonProps, type RevealOptions, SPINNER_TYPES, SkeletonProps, SpinnerProps, TextLoaderProps, VeilAnimationName, VeilDirection, VeilRevealTransition, VeilSpinnerType, applyReveal, createAutoMeasureOverlay, createLazyImage, createSpinner, createTextLoader, getAnimationKeyframesCSS, getCachedLayout, getStylesCSS, getSyncDelay, getTimelineOrigin, injectStyles, measureContainer, observeOffscreen, parseDurationMs, setCachedLayout, setNonce, setupVisibilityObserver, teardownObservers, wrapLoadingButton };
+/**
+ * Veilkit - Custom Skeleton Builder & Declarative Layout Engine
+ * Allows developers to create custom skeleton layouts matching their website's exact UI structure.
+ */
+
+declare function createCustomSkeleton(config: CustomSkeletonConfig): HTMLElement;
+declare class SkeletonBuilder {
+    private config;
+    constructor(options?: Partial<CustomSkeletonConfig>);
+    row(builderFn: (row: SkeletonBuilder) => void, gap?: number | string): this;
+    col(builderFn: (col: SkeletonBuilder) => void, gap?: number | string): this;
+    card(builderFn: (card: SkeletonBuilder) => void, gap?: number | string): this;
+    avatar(size?: number | string): this;
+    heading(width?: number | string, height?: number | string): this;
+    lines(count?: number, gap?: number | string): this;
+    button(width?: number | string, height?: number | string): this;
+    rect(width?: number | string, height?: number | string, radius?: number | string): this;
+    badge(width?: number | string, height?: number | string): this;
+    toConfig(): CustomSkeletonConfig;
+    build(): HTMLElement;
+    toCode(framework?: 'react' | 'vue' | 'svelte' | 'angular' | 'html'): string;
+}
+
+export { ANIMATION_NAMES, type AnimationConfig, AntiFlickerController, type AntiFlickerOptions, AutoMeasureOptions, BUTTON_LOADING_STYLES, ButtonLoadingStyle, ButtonStatus, type CachedLayout, CustomSkeletonConfig, LazyImageProps, type LeafBox, LoadingButtonProps, type RevealOptions, SPINNER_TYPES, SkeletonBuilder, SkeletonProps, SpinnerProps, TextLoaderProps, VeilAnimationName, VeilDirection, VeilRevealTransition, VeilSpinnerType, applyReveal, createAutoMeasureOverlay, createCustomSkeleton, createLazyImage, createSpinner, createTextLoader, getAnimationKeyframesCSS, getCachedLayout, getStylesCSS, getSyncDelay, getTimelineOrigin, injectStyles, measureContainer, observeOffscreen, parseDurationMs, setCachedLayout, setNonce, setupVisibilityObserver, teardownObservers, wrapLoadingButton };