veilkit 0.0.0-stage → 0.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +54 -0
- package/LICENSE +21 -0
- package/README.md +801 -2
- package/dist/angular/index.cjs +660 -0
- package/dist/angular/index.cjs.map +1 -0
- package/dist/angular/index.d.cts +113 -0
- package/dist/angular/index.d.ts +113 -0
- package/dist/angular/index.js +660 -0
- package/dist/angular/index.js.map +1 -0
- package/dist/cli/index.cjs +25 -0
- package/dist/cli/index.cjs.map +1 -0
- package/dist/cli/index.d.cts +1 -0
- package/dist/cli/index.d.ts +1 -0
- package/dist/cli/index.js +25 -0
- package/dist/cli/index.js.map +1 -0
- package/dist/controller-B6kFsWzi.d.cts +195 -0
- package/dist/controller-Ceub9kLC.d.ts +195 -0
- package/dist/element/index.cjs +660 -0
- package/dist/element/index.cjs.map +1 -0
- package/dist/element/index.d.cts +48 -0
- package/dist/element/index.d.ts +48 -0
- package/dist/element/index.js +660 -0
- package/dist/element/index.js.map +1 -0
- package/dist/index.cjs +660 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +211 -0
- package/dist/index.d.ts +211 -0
- package/dist/index.js +660 -0
- package/dist/index.js.map +1 -0
- package/dist/native/index.cjs +2 -0
- package/dist/native/index.cjs.map +1 -0
- package/dist/native/index.d.cts +54 -0
- package/dist/native/index.d.ts +54 -0
- package/dist/native/index.js +2 -0
- package/dist/native/index.js.map +1 -0
- package/dist/react/index.cjs +660 -0
- package/dist/react/index.cjs.map +1 -0
- package/dist/react/index.d.cts +121 -0
- package/dist/react/index.d.ts +121 -0
- package/dist/react/index.js +660 -0
- package/dist/react/index.js.map +1 -0
- package/dist/styles.css +509 -0
- package/dist/svelte/index.cjs +660 -0
- package/dist/svelte/index.cjs.map +1 -0
- package/dist/svelte/index.d.cts +48 -0
- package/dist/svelte/index.d.ts +48 -0
- package/dist/svelte/index.js +660 -0
- package/dist/svelte/index.js.map +1 -0
- package/dist/themes/index.cjs +2 -0
- package/dist/themes/index.cjs.map +1 -0
- package/dist/themes/index.d.cts +18 -0
- package/dist/themes/index.d.ts +18 -0
- package/dist/themes/index.js +2 -0
- package/dist/themes/index.js.map +1 -0
- package/dist/types-CnR-rU97.d.cts +176 -0
- package/dist/types-CnR-rU97.d.ts +176 -0
- package/dist/veilkit.min.js +659 -0
- package/dist/vue/index.cjs +660 -0
- package/dist/vue/index.cjs.map +1 -0
- package/dist/vue/index.d.cts +512 -0
- package/dist/vue/index.d.ts +512 -0
- package/dist/vue/index.js +660 -0
- package/dist/vue/index.js.map +1 -0
- package/package.json +254 -4
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
'use strict';var i={light:{base:"#e5e7eb",highlight:"rgba(255, 255, 255, 0.7)",radius:"6px",duration:"1.5s",easing:"cubic-bezier(0.4, 0, 0.2, 1)",border:"none",contrast:"#374151"},dark:{base:"#1f2937",highlight:"rgba(255, 255, 255, 0.12)",radius:"6px",duration:"1.5s",easing:"cubic-bezier(0.4, 0, 0.2, 1)",border:"none",contrast:"#f3f4f6"},auto:{base:"var(--veil-auto-base, #e5e7eb)",highlight:"var(--veil-auto-highlight, rgba(255, 255, 255, 0.7))",radius:"6px",duration:"1.5s",easing:"cubic-bezier(0.4, 0, 0.2, 1)",border:"none",contrast:"var(--veil-auto-contrast, #374151)"},glass:{base:"rgba(255, 255, 255, 0.08)",highlight:"rgba(255, 255, 255, 0.25)",radius:"12px",duration:"1.8s",easing:"cubic-bezier(0.25, 1, 0.5, 1)",blur:"12px",border:"1px solid rgba(255, 255, 255, 0.15)",glow:"inset 0 1px 1px 0 rgba(255, 255, 255, 0.25), 0 4px 16px 0 rgba(0, 0, 0, 0.12)",contrast:"#ffffff"},ios:{base:"rgba(120, 120, 128, 0.18)",highlight:"rgba(255, 255, 255, 0.45)",radius:"10px",duration:"1.4s",easing:"cubic-bezier(0.32, 0.72, 0, 1)",border:"none",contrast:"#1c1c1e"},material:{base:"#e7e0ec",highlight:"#f7f2fa",radius:"12px",duration:"1.6s",easing:"cubic-bezier(0.2, 0, 0, 1)",border:"none",contrast:"#1d1b20"},minimal:{base:"#f1f3f5",highlight:"#ffffff",radius:"4px",duration:"1.4s",easing:"ease-in-out",border:"none",contrast:"#212529"},mono:{base:"#e0e0e0",highlight:"#ffffff",radius:"0px",duration:"1.2s",easing:"linear",border:"1px solid #cccccc",contrast:"#000000"},neon:{base:"#0c0b16",highlight:"rgba(0, 240, 255, 0.5)",radius:"8px",duration:"1.6s",easing:"cubic-bezier(0.4, 0, 0.2, 1)",border:"1px solid rgba(0, 240, 255, 0.3)",glow:"0 0 12px rgba(0, 240, 255, 0.35)",contrast:"#00f0ff"},sunset:{base:"#fed7aa",highlight:"#fff7ed",radius:"8px",duration:"1.7s",easing:"cubic-bezier(0.4, 0, 0.2, 1)",border:"none",glow:"0 0 8px rgba(251, 146, 60, 0.25)",contrast:"#7c2d12"},ocean:{base:"#0f2937",highlight:"rgba(56, 189, 248, 0.45)",radius:"8px",duration:"1.7s",easing:"cubic-bezier(0.4, 0, 0.2, 1)",border:"1px solid rgba(56, 189, 248, 0.2)",glow:"0 0 10px rgba(56, 189, 248, 0.25)",contrast:"#38bdf8"}},s=new Map;function o(e){let r=e.parent&&i[e.parent]?i[e.parent]:i.light,a={base:e.base??r.base,highlight:e.highlight??r.highlight,radius:e.radius??r.radius,duration:e.duration??r.duration,easing:e.easing??r.easing,border:e.border??r.border,blur:e.blur??r.blur,glow:e.glow??r.glow,contrast:e.contrast??r.contrast};return s.set(e.name,a),a}function n(e){if(!e)return i.light;if(typeof e=="string"){if(e in i)return i[e];let r=s.get(e);return r||i.light}return o(e)}exports.BUILTIN_THEMES=i;exports.createTheme=o;exports.getThemeTokens=n;//# sourceMappingURL=index.cjs.map
|
|
2
|
+
//# sourceMappingURL=index.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/core/themes.ts"],"names":["BUILTIN_THEMES","customThemesRegistry","createTheme","themeInput","parentTheme","resolvedTheme","getThemeTokens","theme","custom"],"mappings":"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","file":"index.cjs","sourcesContent":["/**\n * Veilkit - Themes & Token Definitions\n * 11 Built-in Themes + `createTheme()`\n */\n\nimport { VeilThemeName, VeilThemeTokens, CustomThemeInput } from './types';\n\nexport const BUILTIN_THEMES: Record<VeilThemeName, VeilThemeTokens> = {\n light: {\n base: '#e5e7eb',\n highlight: 'rgba(255, 255, 255, 0.7)',\n radius: '6px',\n duration: '1.5s',\n easing: 'cubic-bezier(0.4, 0, 0.2, 1)',\n border: 'none',\n contrast: '#374151',\n },\n dark: {\n base: '#1f2937',\n highlight: 'rgba(255, 255, 255, 0.12)',\n radius: '6px',\n duration: '1.5s',\n easing: 'cubic-bezier(0.4, 0, 0.2, 1)',\n border: 'none',\n contrast: '#f3f4f6',\n },\n auto: {\n // Dynamic CSS variables will resolve light/dark via prefers-color-scheme\n base: 'var(--veil-auto-base, #e5e7eb)',\n highlight: 'var(--veil-auto-highlight, rgba(255, 255, 255, 0.7))',\n radius: '6px',\n duration: '1.5s',\n easing: 'cubic-bezier(0.4, 0, 0.2, 1)',\n border: 'none',\n contrast: 'var(--veil-auto-contrast, #374151)',\n },\n glass: {\n base: 'rgba(255, 255, 255, 0.08)',\n highlight: 'rgba(255, 255, 255, 0.25)',\n radius: '12px',\n duration: '1.8s',\n easing: 'cubic-bezier(0.25, 1, 0.5, 1)',\n blur: '12px',\n border: '1px solid rgba(255, 255, 255, 0.15)',\n glow: 'inset 0 1px 1px 0 rgba(255, 255, 255, 0.25), 0 4px 16px 0 rgba(0, 0, 0, 0.12)',\n contrast: '#ffffff',\n },\n ios: {\n base: 'rgba(120, 120, 128, 0.18)',\n highlight: 'rgba(255, 255, 255, 0.45)',\n radius: '10px',\n duration: '1.4s',\n easing: 'cubic-bezier(0.32, 0.72, 0, 1)',\n border: 'none',\n contrast: '#1c1c1e',\n },\n material: {\n base: '#e7e0ec',\n highlight: '#f7f2fa',\n radius: '12px',\n duration: '1.6s',\n easing: 'cubic-bezier(0.2, 0, 0, 1)',\n border: 'none',\n contrast: '#1d1b20',\n },\n minimal: {\n base: '#f1f3f5',\n highlight: '#ffffff',\n radius: '4px',\n duration: '1.4s',\n easing: 'ease-in-out',\n border: 'none',\n contrast: '#212529',\n },\n mono: {\n base: '#e0e0e0',\n highlight: '#ffffff',\n radius: '0px',\n duration: '1.2s',\n easing: 'linear',\n border: '1px solid #cccccc',\n contrast: '#000000',\n },\n neon: {\n base: '#0c0b16',\n highlight: 'rgba(0, 240, 255, 0.5)',\n radius: '8px',\n duration: '1.6s',\n easing: 'cubic-bezier(0.4, 0, 0.2, 1)',\n border: '1px solid rgba(0, 240, 255, 0.3)',\n glow: '0 0 12px rgba(0, 240, 255, 0.35)',\n contrast: '#00f0ff',\n },\n sunset: {\n base: '#fed7aa',\n highlight: '#fff7ed',\n radius: '8px',\n duration: '1.7s',\n easing: 'cubic-bezier(0.4, 0, 0.2, 1)',\n border: 'none',\n glow: '0 0 8px rgba(251, 146, 60, 0.25)',\n contrast: '#7c2d12',\n },\n ocean: {\n base: '#0f2937',\n highlight: 'rgba(56, 189, 248, 0.45)',\n radius: '8px',\n duration: '1.7s',\n easing: 'cubic-bezier(0.4, 0, 0.2, 1)',\n border: '1px solid rgba(56, 189, 248, 0.2)',\n glow: '0 0 10px rgba(56, 189, 248, 0.25)',\n contrast: '#38bdf8',\n },\n};\n\nconst customThemesRegistry = new Map<string, VeilThemeTokens>();\n\n/**\n * Creates and registers a new custom theme\n */\nexport function createTheme(themeInput: CustomThemeInput): VeilThemeTokens {\n const parentTheme = themeInput.parent && BUILTIN_THEMES[themeInput.parent]\n ? BUILTIN_THEMES[themeInput.parent]\n : BUILTIN_THEMES.light;\n\n const resolvedTheme: VeilThemeTokens = {\n base: themeInput.base ?? parentTheme.base,\n highlight: themeInput.highlight ?? parentTheme.highlight,\n radius: themeInput.radius ?? parentTheme.radius,\n duration: themeInput.duration ?? parentTheme.duration,\n easing: themeInput.easing ?? parentTheme.easing,\n border: themeInput.border ?? parentTheme.border,\n blur: themeInput.blur ?? parentTheme.blur,\n glow: themeInput.glow ?? parentTheme.glow,\n contrast: themeInput.contrast ?? parentTheme.contrast,\n };\n\n customThemesRegistry.set(themeInput.name, resolvedTheme);\n return resolvedTheme;\n}\n\n/**\n * Get theme tokens by name or object\n */\nexport function getThemeTokens(theme?: VeilThemeName | CustomThemeInput | string): VeilThemeTokens {\n if (!theme) return BUILTIN_THEMES.light;\n if (typeof theme === 'string') {\n if (theme in BUILTIN_THEMES) {\n return BUILTIN_THEMES[theme as VeilThemeName];\n }\n const custom = customThemesRegistry.get(theme);\n if (custom) return custom;\n return BUILTIN_THEMES.light;\n }\n return createTheme(theme);\n}\n"]}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { C as CustomThemeInput, p as VeilThemeTokens, V as VeilThemeName } from '../types-CnR-rU97.cjs';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Veilkit - Themes & Token Definitions
|
|
5
|
+
* 11 Built-in Themes + `createTheme()`
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
declare const BUILTIN_THEMES: Record<VeilThemeName, VeilThemeTokens>;
|
|
9
|
+
/**
|
|
10
|
+
* Creates and registers a new custom theme
|
|
11
|
+
*/
|
|
12
|
+
declare function createTheme(themeInput: CustomThemeInput): VeilThemeTokens;
|
|
13
|
+
/**
|
|
14
|
+
* Get theme tokens by name or object
|
|
15
|
+
*/
|
|
16
|
+
declare function getThemeTokens(theme?: VeilThemeName | CustomThemeInput | string): VeilThemeTokens;
|
|
17
|
+
|
|
18
|
+
export { BUILTIN_THEMES, createTheme, getThemeTokens };
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { C as CustomThemeInput, p as VeilThemeTokens, V as VeilThemeName } from '../types-CnR-rU97.js';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Veilkit - Themes & Token Definitions
|
|
5
|
+
* 11 Built-in Themes + `createTheme()`
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
declare const BUILTIN_THEMES: Record<VeilThemeName, VeilThemeTokens>;
|
|
9
|
+
/**
|
|
10
|
+
* Creates and registers a new custom theme
|
|
11
|
+
*/
|
|
12
|
+
declare function createTheme(themeInput: CustomThemeInput): VeilThemeTokens;
|
|
13
|
+
/**
|
|
14
|
+
* Get theme tokens by name or object
|
|
15
|
+
*/
|
|
16
|
+
declare function getThemeTokens(theme?: VeilThemeName | CustomThemeInput | string): VeilThemeTokens;
|
|
17
|
+
|
|
18
|
+
export { BUILTIN_THEMES, createTheme, getThemeTokens };
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
var i={light:{base:"#e5e7eb",highlight:"rgba(255, 255, 255, 0.7)",radius:"6px",duration:"1.5s",easing:"cubic-bezier(0.4, 0, 0.2, 1)",border:"none",contrast:"#374151"},dark:{base:"#1f2937",highlight:"rgba(255, 255, 255, 0.12)",radius:"6px",duration:"1.5s",easing:"cubic-bezier(0.4, 0, 0.2, 1)",border:"none",contrast:"#f3f4f6"},auto:{base:"var(--veil-auto-base, #e5e7eb)",highlight:"var(--veil-auto-highlight, rgba(255, 255, 255, 0.7))",radius:"6px",duration:"1.5s",easing:"cubic-bezier(0.4, 0, 0.2, 1)",border:"none",contrast:"var(--veil-auto-contrast, #374151)"},glass:{base:"rgba(255, 255, 255, 0.08)",highlight:"rgba(255, 255, 255, 0.25)",radius:"12px",duration:"1.8s",easing:"cubic-bezier(0.25, 1, 0.5, 1)",blur:"12px",border:"1px solid rgba(255, 255, 255, 0.15)",glow:"inset 0 1px 1px 0 rgba(255, 255, 255, 0.25), 0 4px 16px 0 rgba(0, 0, 0, 0.12)",contrast:"#ffffff"},ios:{base:"rgba(120, 120, 128, 0.18)",highlight:"rgba(255, 255, 255, 0.45)",radius:"10px",duration:"1.4s",easing:"cubic-bezier(0.32, 0.72, 0, 1)",border:"none",contrast:"#1c1c1e"},material:{base:"#e7e0ec",highlight:"#f7f2fa",radius:"12px",duration:"1.6s",easing:"cubic-bezier(0.2, 0, 0, 1)",border:"none",contrast:"#1d1b20"},minimal:{base:"#f1f3f5",highlight:"#ffffff",radius:"4px",duration:"1.4s",easing:"ease-in-out",border:"none",contrast:"#212529"},mono:{base:"#e0e0e0",highlight:"#ffffff",radius:"0px",duration:"1.2s",easing:"linear",border:"1px solid #cccccc",contrast:"#000000"},neon:{base:"#0c0b16",highlight:"rgba(0, 240, 255, 0.5)",radius:"8px",duration:"1.6s",easing:"cubic-bezier(0.4, 0, 0.2, 1)",border:"1px solid rgba(0, 240, 255, 0.3)",glow:"0 0 12px rgba(0, 240, 255, 0.35)",contrast:"#00f0ff"},sunset:{base:"#fed7aa",highlight:"#fff7ed",radius:"8px",duration:"1.7s",easing:"cubic-bezier(0.4, 0, 0.2, 1)",border:"none",glow:"0 0 8px rgba(251, 146, 60, 0.25)",contrast:"#7c2d12"},ocean:{base:"#0f2937",highlight:"rgba(56, 189, 248, 0.45)",radius:"8px",duration:"1.7s",easing:"cubic-bezier(0.4, 0, 0.2, 1)",border:"1px solid rgba(56, 189, 248, 0.2)",glow:"0 0 10px rgba(56, 189, 248, 0.25)",contrast:"#38bdf8"}},s=new Map;function o(e){let r=e.parent&&i[e.parent]?i[e.parent]:i.light,a={base:e.base??r.base,highlight:e.highlight??r.highlight,radius:e.radius??r.radius,duration:e.duration??r.duration,easing:e.easing??r.easing,border:e.border??r.border,blur:e.blur??r.blur,glow:e.glow??r.glow,contrast:e.contrast??r.contrast};return s.set(e.name,a),a}function n(e){if(!e)return i.light;if(typeof e=="string"){if(e in i)return i[e];let r=s.get(e);return r||i.light}return o(e)}export{i as BUILTIN_THEMES,o as createTheme,n as getThemeTokens};//# sourceMappingURL=index.js.map
|
|
2
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/core/themes.ts"],"names":["BUILTIN_THEMES","customThemesRegistry","createTheme","themeInput","parentTheme","resolvedTheme","getThemeTokens","theme","custom"],"mappings":"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","file":"index.js","sourcesContent":["/**\n * Veilkit - Themes & Token Definitions\n * 11 Built-in Themes + `createTheme()`\n */\n\nimport { VeilThemeName, VeilThemeTokens, CustomThemeInput } from './types';\n\nexport const BUILTIN_THEMES: Record<VeilThemeName, VeilThemeTokens> = {\n light: {\n base: '#e5e7eb',\n highlight: 'rgba(255, 255, 255, 0.7)',\n radius: '6px',\n duration: '1.5s',\n easing: 'cubic-bezier(0.4, 0, 0.2, 1)',\n border: 'none',\n contrast: '#374151',\n },\n dark: {\n base: '#1f2937',\n highlight: 'rgba(255, 255, 255, 0.12)',\n radius: '6px',\n duration: '1.5s',\n easing: 'cubic-bezier(0.4, 0, 0.2, 1)',\n border: 'none',\n contrast: '#f3f4f6',\n },\n auto: {\n // Dynamic CSS variables will resolve light/dark via prefers-color-scheme\n base: 'var(--veil-auto-base, #e5e7eb)',\n highlight: 'var(--veil-auto-highlight, rgba(255, 255, 255, 0.7))',\n radius: '6px',\n duration: '1.5s',\n easing: 'cubic-bezier(0.4, 0, 0.2, 1)',\n border: 'none',\n contrast: 'var(--veil-auto-contrast, #374151)',\n },\n glass: {\n base: 'rgba(255, 255, 255, 0.08)',\n highlight: 'rgba(255, 255, 255, 0.25)',\n radius: '12px',\n duration: '1.8s',\n easing: 'cubic-bezier(0.25, 1, 0.5, 1)',\n blur: '12px',\n border: '1px solid rgba(255, 255, 255, 0.15)',\n glow: 'inset 0 1px 1px 0 rgba(255, 255, 255, 0.25), 0 4px 16px 0 rgba(0, 0, 0, 0.12)',\n contrast: '#ffffff',\n },\n ios: {\n base: 'rgba(120, 120, 128, 0.18)',\n highlight: 'rgba(255, 255, 255, 0.45)',\n radius: '10px',\n duration: '1.4s',\n easing: 'cubic-bezier(0.32, 0.72, 0, 1)',\n border: 'none',\n contrast: '#1c1c1e',\n },\n material: {\n base: '#e7e0ec',\n highlight: '#f7f2fa',\n radius: '12px',\n duration: '1.6s',\n easing: 'cubic-bezier(0.2, 0, 0, 1)',\n border: 'none',\n contrast: '#1d1b20',\n },\n minimal: {\n base: '#f1f3f5',\n highlight: '#ffffff',\n radius: '4px',\n duration: '1.4s',\n easing: 'ease-in-out',\n border: 'none',\n contrast: '#212529',\n },\n mono: {\n base: '#e0e0e0',\n highlight: '#ffffff',\n radius: '0px',\n duration: '1.2s',\n easing: 'linear',\n border: '1px solid #cccccc',\n contrast: '#000000',\n },\n neon: {\n base: '#0c0b16',\n highlight: 'rgba(0, 240, 255, 0.5)',\n radius: '8px',\n duration: '1.6s',\n easing: 'cubic-bezier(0.4, 0, 0.2, 1)',\n border: '1px solid rgba(0, 240, 255, 0.3)',\n glow: '0 0 12px rgba(0, 240, 255, 0.35)',\n contrast: '#00f0ff',\n },\n sunset: {\n base: '#fed7aa',\n highlight: '#fff7ed',\n radius: '8px',\n duration: '1.7s',\n easing: 'cubic-bezier(0.4, 0, 0.2, 1)',\n border: 'none',\n glow: '0 0 8px rgba(251, 146, 60, 0.25)',\n contrast: '#7c2d12',\n },\n ocean: {\n base: '#0f2937',\n highlight: 'rgba(56, 189, 248, 0.45)',\n radius: '8px',\n duration: '1.7s',\n easing: 'cubic-bezier(0.4, 0, 0.2, 1)',\n border: '1px solid rgba(56, 189, 248, 0.2)',\n glow: '0 0 10px rgba(56, 189, 248, 0.25)',\n contrast: '#38bdf8',\n },\n};\n\nconst customThemesRegistry = new Map<string, VeilThemeTokens>();\n\n/**\n * Creates and registers a new custom theme\n */\nexport function createTheme(themeInput: CustomThemeInput): VeilThemeTokens {\n const parentTheme = themeInput.parent && BUILTIN_THEMES[themeInput.parent]\n ? BUILTIN_THEMES[themeInput.parent]\n : BUILTIN_THEMES.light;\n\n const resolvedTheme: VeilThemeTokens = {\n base: themeInput.base ?? parentTheme.base,\n highlight: themeInput.highlight ?? parentTheme.highlight,\n radius: themeInput.radius ?? parentTheme.radius,\n duration: themeInput.duration ?? parentTheme.duration,\n easing: themeInput.easing ?? parentTheme.easing,\n border: themeInput.border ?? parentTheme.border,\n blur: themeInput.blur ?? parentTheme.blur,\n glow: themeInput.glow ?? parentTheme.glow,\n contrast: themeInput.contrast ?? parentTheme.contrast,\n };\n\n customThemesRegistry.set(themeInput.name, resolvedTheme);\n return resolvedTheme;\n}\n\n/**\n * Get theme tokens by name or object\n */\nexport function getThemeTokens(theme?: VeilThemeName | CustomThemeInput | string): VeilThemeTokens {\n if (!theme) return BUILTIN_THEMES.light;\n if (typeof theme === 'string') {\n if (theme in BUILTIN_THEMES) {\n return BUILTIN_THEMES[theme as VeilThemeName];\n }\n const custom = customThemesRegistry.get(theme);\n if (custom) return custom;\n return BUILTIN_THEMES.light;\n }\n return createTheme(theme);\n}\n"]}
|
|
@@ -0,0 +1,176 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Veilkit - Core Type Definitions
|
|
3
|
+
* Complete Loading & Skeleton UI Toolkit
|
|
4
|
+
*/
|
|
5
|
+
type VeilThemeName = 'light' | 'dark' | 'auto' | 'glass' | 'ios' | 'material' | 'minimal' | 'mono' | 'neon' | 'sunset' | 'ocean';
|
|
6
|
+
type VeilAnimationName = 'shimmer' | 'wave' | 'pulse' | 'blink' | 'breathe' | 'glass-shine' | 'gradient-flow' | 'aurora' | 'scan-line' | 'sparkle' | 'neon-glow' | 'stagger' | 'ripple' | 'ping-pong' | 'wipe' | 'cascade' | 'spotlight' | 'rainbow' | 'heartbeat' | 'liquid' | 'stripes' | 'halftone' | 'border-glow' | 'typewriter' | 'glitch' | 'pixelate' | 'tilt' | 'diagonal-sweep' | 'bounce-in' | 'fade-slide' | 'none';
|
|
7
|
+
type VeilDirection = 'ltr' | 'rtl' | 'ttb' | 'btt';
|
|
8
|
+
type VeilPrimitiveType = 'line' | 'paragraph' | 'heading' | 'circle' | 'rect' | 'image' | 'button' | 'badge' | 'icon' | 'input' | 'table-row' | 'divider';
|
|
9
|
+
type VeilShapeStyle = 'rounded' | 'pill' | 'square' | 'sharp' | 'glass';
|
|
10
|
+
type VeilPresetName = 'card' | 'product-card' | 'product-grid' | 'list' | 'list-item' | 'table' | 'profile' | 'profile-header' | 'feed-post' | 'article' | 'comment-thread' | 'chat' | 'dashboard' | 'form' | 'media-card' | 'navbar' | 'sidebar' | 'settings-page' | 'product-detail' | 'news-feed' | 'inbox-list' | 'notification-list' | 'order-list' | 'kpi-card' | 'chart-bar' | 'chart-line' | 'chart-pie' | 'search-results' | 'video-player' | 'music-player' | 'stories-row' | 'reels' | 'tabs' | 'calendar' | 'kanban' | 'timeline' | 'map-card' | 'pricing-card' | 'testimonial' | 'faq-accordion' | 'file-explorer' | 'code-block';
|
|
11
|
+
type VeilSpinnerType = 'ring' | 'dual-ring' | 'dots' | 'bars' | 'pulse' | 'orbit' | 'wave' | 'bounce' | 'ios-activity' | 'glass-orb' | 'morph' | 'progress-circle' | 'arc-gradient' | 'pulse-ring' | 'dots-circle' | 'grid-dots' | 'square-flip' | 'cube-fold' | 'hourglass' | 'infinity' | 'heartbeat-line' | 'equalizer' | 'chasing-dots' | 'typing' | 'liquid-fill' | 'atom' | 'clock' | 'radar' | 'ellipsis' | 'flower';
|
|
12
|
+
type VeilRevealTransition = 'fade' | 'blur-in' | 'slide-up' | 'scale' | 'stagger-children' | 'none';
|
|
13
|
+
interface VeilThemeTokens {
|
|
14
|
+
base: string;
|
|
15
|
+
highlight: string;
|
|
16
|
+
radius: string;
|
|
17
|
+
duration: string;
|
|
18
|
+
easing: string;
|
|
19
|
+
blur?: string;
|
|
20
|
+
border?: string;
|
|
21
|
+
glow?: string;
|
|
22
|
+
contrast?: string;
|
|
23
|
+
}
|
|
24
|
+
type CustomThemeInput = Partial<VeilThemeTokens> & {
|
|
25
|
+
name: string;
|
|
26
|
+
parent?: VeilThemeName;
|
|
27
|
+
};
|
|
28
|
+
interface VeilGlobalConfig {
|
|
29
|
+
theme?: VeilThemeName | CustomThemeInput;
|
|
30
|
+
animation?: VeilAnimationName;
|
|
31
|
+
duration?: number | string;
|
|
32
|
+
easing?: string;
|
|
33
|
+
direction?: VeilDirection;
|
|
34
|
+
speedMultiplier?: number;
|
|
35
|
+
intensity?: number;
|
|
36
|
+
nonce?: string;
|
|
37
|
+
locale?: string;
|
|
38
|
+
labels?: Record<string, string>;
|
|
39
|
+
syncTimeline?: boolean;
|
|
40
|
+
pauseOffscreen?: boolean;
|
|
41
|
+
respectReducedMotion?: boolean;
|
|
42
|
+
antiFlicker?: {
|
|
43
|
+
delay?: number;
|
|
44
|
+
minVisible?: number;
|
|
45
|
+
};
|
|
46
|
+
}
|
|
47
|
+
interface SkeletonProps {
|
|
48
|
+
type?: VeilPrimitiveType;
|
|
49
|
+
width?: string | number;
|
|
50
|
+
height?: string | number;
|
|
51
|
+
radius?: string | number;
|
|
52
|
+
count?: number;
|
|
53
|
+
gap?: string | number;
|
|
54
|
+
lines?: number;
|
|
55
|
+
lastLineWidth?: string | number;
|
|
56
|
+
animation?: VeilAnimationName;
|
|
57
|
+
theme?: VeilThemeName | CustomThemeInput;
|
|
58
|
+
direction?: VeilDirection;
|
|
59
|
+
speed?: number | string;
|
|
60
|
+
intensity?: number;
|
|
61
|
+
className?: string;
|
|
62
|
+
style?: Record<string, string | number>;
|
|
63
|
+
ariaLabel?: string;
|
|
64
|
+
}
|
|
65
|
+
interface PresetProps extends Omit<SkeletonProps, 'type'> {
|
|
66
|
+
name: VeilPresetName;
|
|
67
|
+
items?: number;
|
|
68
|
+
columns?: number;
|
|
69
|
+
shape?: VeilShapeStyle;
|
|
70
|
+
}
|
|
71
|
+
interface AutoMeasureOptions {
|
|
72
|
+
container?: HTMLElement;
|
|
73
|
+
cacheKey?: string;
|
|
74
|
+
persistCache?: boolean;
|
|
75
|
+
ignoreSelector?: string;
|
|
76
|
+
observeMutations?: boolean;
|
|
77
|
+
observeResize?: boolean;
|
|
78
|
+
preserveBackground?: boolean;
|
|
79
|
+
reveal?: VeilRevealTransition;
|
|
80
|
+
revealDuration?: number;
|
|
81
|
+
revealEasing?: string;
|
|
82
|
+
delay?: number;
|
|
83
|
+
minVisible?: number;
|
|
84
|
+
}
|
|
85
|
+
interface SkeletonController {
|
|
86
|
+
element: HTMLElement;
|
|
87
|
+
show: () => void;
|
|
88
|
+
hide: () => void;
|
|
89
|
+
update: (props: Partial<SkeletonProps>) => void;
|
|
90
|
+
destroy: () => void;
|
|
91
|
+
}
|
|
92
|
+
interface SpinnerProps {
|
|
93
|
+
type?: VeilSpinnerType;
|
|
94
|
+
size?: number | string;
|
|
95
|
+
color?: string;
|
|
96
|
+
secondaryColor?: string;
|
|
97
|
+
speed?: number | string;
|
|
98
|
+
label?: string;
|
|
99
|
+
glass?: boolean;
|
|
100
|
+
className?: string;
|
|
101
|
+
style?: Record<string, string | number>;
|
|
102
|
+
}
|
|
103
|
+
interface ProgressProps {
|
|
104
|
+
value?: number;
|
|
105
|
+
max?: number;
|
|
106
|
+
height?: number | string;
|
|
107
|
+
color?: string;
|
|
108
|
+
trackColor?: string;
|
|
109
|
+
circular?: boolean;
|
|
110
|
+
size?: number | string;
|
|
111
|
+
strokeWidth?: number;
|
|
112
|
+
trickle?: boolean;
|
|
113
|
+
showPercentage?: boolean;
|
|
114
|
+
status?: 'loading' | 'success' | 'error';
|
|
115
|
+
className?: string;
|
|
116
|
+
}
|
|
117
|
+
interface OverlayProps {
|
|
118
|
+
target?: HTMLElement | string;
|
|
119
|
+
visible?: boolean;
|
|
120
|
+
blur?: boolean | string;
|
|
121
|
+
opacity?: number;
|
|
122
|
+
color?: string;
|
|
123
|
+
spinner?: VeilSpinnerType | boolean;
|
|
124
|
+
message?: string;
|
|
125
|
+
lockScroll?: boolean;
|
|
126
|
+
className?: string;
|
|
127
|
+
zIndex?: number;
|
|
128
|
+
}
|
|
129
|
+
type ButtonStatus = 'idle' | 'loading' | 'success' | 'error';
|
|
130
|
+
type ButtonLoadingStyle = 'spinner-left' | 'spinner-right' | 'spinner-replace' | 'dots-after-text' | 'progress-fill' | 'shimmer-surface' | 'pulse-glow' | 'stripes-progress' | 'morph-circle' | 'slide-text' | 'border-trace' | 'liquid-fill' | 'bounce-dots' | 'glass-shine' | 'neon-pulse' | 'skeleton-button';
|
|
131
|
+
type ButtonPressFeedback = 'ripple' | 'press-scale' | 'glow-follow' | 'none';
|
|
132
|
+
type ButtonResultAnimation = 'checkmark' | 'cross' | 'shake' | 'success-burst' | 'none';
|
|
133
|
+
interface LoadingButtonProps {
|
|
134
|
+
status?: ButtonStatus;
|
|
135
|
+
loading?: boolean;
|
|
136
|
+
styleType?: ButtonLoadingStyle;
|
|
137
|
+
spinner?: VeilSpinnerType;
|
|
138
|
+
spinnerPlacement?: 'start' | 'end' | 'replace';
|
|
139
|
+
loadingText?: string;
|
|
140
|
+
successText?: string;
|
|
141
|
+
errorText?: string;
|
|
142
|
+
resetAfter?: number;
|
|
143
|
+
progress?: number;
|
|
144
|
+
pressFeedback?: ButtonPressFeedback;
|
|
145
|
+
resultAnimation?: ButtonResultAnimation;
|
|
146
|
+
haptics?: boolean;
|
|
147
|
+
disabled?: boolean;
|
|
148
|
+
className?: string;
|
|
149
|
+
children?: any;
|
|
150
|
+
onStatusChange?: (status: ButtonStatus) => void;
|
|
151
|
+
onClick?: (event: any) => Promise<any> | void;
|
|
152
|
+
}
|
|
153
|
+
interface LazyImageProps {
|
|
154
|
+
src: string;
|
|
155
|
+
alt?: string;
|
|
156
|
+
width?: string | number;
|
|
157
|
+
height?: string | number;
|
|
158
|
+
radius?: string | number;
|
|
159
|
+
aspectRatio?: string | number;
|
|
160
|
+
animation?: VeilAnimationName;
|
|
161
|
+
theme?: VeilThemeName;
|
|
162
|
+
reveal?: VeilRevealTransition;
|
|
163
|
+
fallbackSrc?: string;
|
|
164
|
+
onLoad?: () => void;
|
|
165
|
+
onError?: (err: any) => void;
|
|
166
|
+
className?: string;
|
|
167
|
+
}
|
|
168
|
+
interface TextLoaderProps {
|
|
169
|
+
text?: string;
|
|
170
|
+
dots?: number;
|
|
171
|
+
speed?: number;
|
|
172
|
+
locale?: string;
|
|
173
|
+
className?: string;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
export type { AutoMeasureOptions as A, ButtonStatus as B, CustomThemeInput as C, LoadingButtonProps as L, OverlayProps as O, PresetProps as P, SkeletonProps as S, TextLoaderProps as T, VeilThemeName as V, VeilAnimationName as a, ProgressProps as b, SpinnerProps as c, VeilGlobalConfig as d, ButtonLoadingStyle as e, VeilSpinnerType as f, VeilPresetName as g, VeilShapeStyle as h, VeilPrimitiveType as i, ButtonPressFeedback as j, ButtonResultAnimation as k, SkeletonController as l, LazyImageProps as m, VeilDirection as n, VeilRevealTransition as o, VeilThemeTokens as p };
|
|
@@ -0,0 +1,176 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Veilkit - Core Type Definitions
|
|
3
|
+
* Complete Loading & Skeleton UI Toolkit
|
|
4
|
+
*/
|
|
5
|
+
type VeilThemeName = 'light' | 'dark' | 'auto' | 'glass' | 'ios' | 'material' | 'minimal' | 'mono' | 'neon' | 'sunset' | 'ocean';
|
|
6
|
+
type VeilAnimationName = 'shimmer' | 'wave' | 'pulse' | 'blink' | 'breathe' | 'glass-shine' | 'gradient-flow' | 'aurora' | 'scan-line' | 'sparkle' | 'neon-glow' | 'stagger' | 'ripple' | 'ping-pong' | 'wipe' | 'cascade' | 'spotlight' | 'rainbow' | 'heartbeat' | 'liquid' | 'stripes' | 'halftone' | 'border-glow' | 'typewriter' | 'glitch' | 'pixelate' | 'tilt' | 'diagonal-sweep' | 'bounce-in' | 'fade-slide' | 'none';
|
|
7
|
+
type VeilDirection = 'ltr' | 'rtl' | 'ttb' | 'btt';
|
|
8
|
+
type VeilPrimitiveType = 'line' | 'paragraph' | 'heading' | 'circle' | 'rect' | 'image' | 'button' | 'badge' | 'icon' | 'input' | 'table-row' | 'divider';
|
|
9
|
+
type VeilShapeStyle = 'rounded' | 'pill' | 'square' | 'sharp' | 'glass';
|
|
10
|
+
type VeilPresetName = 'card' | 'product-card' | 'product-grid' | 'list' | 'list-item' | 'table' | 'profile' | 'profile-header' | 'feed-post' | 'article' | 'comment-thread' | 'chat' | 'dashboard' | 'form' | 'media-card' | 'navbar' | 'sidebar' | 'settings-page' | 'product-detail' | 'news-feed' | 'inbox-list' | 'notification-list' | 'order-list' | 'kpi-card' | 'chart-bar' | 'chart-line' | 'chart-pie' | 'search-results' | 'video-player' | 'music-player' | 'stories-row' | 'reels' | 'tabs' | 'calendar' | 'kanban' | 'timeline' | 'map-card' | 'pricing-card' | 'testimonial' | 'faq-accordion' | 'file-explorer' | 'code-block';
|
|
11
|
+
type VeilSpinnerType = 'ring' | 'dual-ring' | 'dots' | 'bars' | 'pulse' | 'orbit' | 'wave' | 'bounce' | 'ios-activity' | 'glass-orb' | 'morph' | 'progress-circle' | 'arc-gradient' | 'pulse-ring' | 'dots-circle' | 'grid-dots' | 'square-flip' | 'cube-fold' | 'hourglass' | 'infinity' | 'heartbeat-line' | 'equalizer' | 'chasing-dots' | 'typing' | 'liquid-fill' | 'atom' | 'clock' | 'radar' | 'ellipsis' | 'flower';
|
|
12
|
+
type VeilRevealTransition = 'fade' | 'blur-in' | 'slide-up' | 'scale' | 'stagger-children' | 'none';
|
|
13
|
+
interface VeilThemeTokens {
|
|
14
|
+
base: string;
|
|
15
|
+
highlight: string;
|
|
16
|
+
radius: string;
|
|
17
|
+
duration: string;
|
|
18
|
+
easing: string;
|
|
19
|
+
blur?: string;
|
|
20
|
+
border?: string;
|
|
21
|
+
glow?: string;
|
|
22
|
+
contrast?: string;
|
|
23
|
+
}
|
|
24
|
+
type CustomThemeInput = Partial<VeilThemeTokens> & {
|
|
25
|
+
name: string;
|
|
26
|
+
parent?: VeilThemeName;
|
|
27
|
+
};
|
|
28
|
+
interface VeilGlobalConfig {
|
|
29
|
+
theme?: VeilThemeName | CustomThemeInput;
|
|
30
|
+
animation?: VeilAnimationName;
|
|
31
|
+
duration?: number | string;
|
|
32
|
+
easing?: string;
|
|
33
|
+
direction?: VeilDirection;
|
|
34
|
+
speedMultiplier?: number;
|
|
35
|
+
intensity?: number;
|
|
36
|
+
nonce?: string;
|
|
37
|
+
locale?: string;
|
|
38
|
+
labels?: Record<string, string>;
|
|
39
|
+
syncTimeline?: boolean;
|
|
40
|
+
pauseOffscreen?: boolean;
|
|
41
|
+
respectReducedMotion?: boolean;
|
|
42
|
+
antiFlicker?: {
|
|
43
|
+
delay?: number;
|
|
44
|
+
minVisible?: number;
|
|
45
|
+
};
|
|
46
|
+
}
|
|
47
|
+
interface SkeletonProps {
|
|
48
|
+
type?: VeilPrimitiveType;
|
|
49
|
+
width?: string | number;
|
|
50
|
+
height?: string | number;
|
|
51
|
+
radius?: string | number;
|
|
52
|
+
count?: number;
|
|
53
|
+
gap?: string | number;
|
|
54
|
+
lines?: number;
|
|
55
|
+
lastLineWidth?: string | number;
|
|
56
|
+
animation?: VeilAnimationName;
|
|
57
|
+
theme?: VeilThemeName | CustomThemeInput;
|
|
58
|
+
direction?: VeilDirection;
|
|
59
|
+
speed?: number | string;
|
|
60
|
+
intensity?: number;
|
|
61
|
+
className?: string;
|
|
62
|
+
style?: Record<string, string | number>;
|
|
63
|
+
ariaLabel?: string;
|
|
64
|
+
}
|
|
65
|
+
interface PresetProps extends Omit<SkeletonProps, 'type'> {
|
|
66
|
+
name: VeilPresetName;
|
|
67
|
+
items?: number;
|
|
68
|
+
columns?: number;
|
|
69
|
+
shape?: VeilShapeStyle;
|
|
70
|
+
}
|
|
71
|
+
interface AutoMeasureOptions {
|
|
72
|
+
container?: HTMLElement;
|
|
73
|
+
cacheKey?: string;
|
|
74
|
+
persistCache?: boolean;
|
|
75
|
+
ignoreSelector?: string;
|
|
76
|
+
observeMutations?: boolean;
|
|
77
|
+
observeResize?: boolean;
|
|
78
|
+
preserveBackground?: boolean;
|
|
79
|
+
reveal?: VeilRevealTransition;
|
|
80
|
+
revealDuration?: number;
|
|
81
|
+
revealEasing?: string;
|
|
82
|
+
delay?: number;
|
|
83
|
+
minVisible?: number;
|
|
84
|
+
}
|
|
85
|
+
interface SkeletonController {
|
|
86
|
+
element: HTMLElement;
|
|
87
|
+
show: () => void;
|
|
88
|
+
hide: () => void;
|
|
89
|
+
update: (props: Partial<SkeletonProps>) => void;
|
|
90
|
+
destroy: () => void;
|
|
91
|
+
}
|
|
92
|
+
interface SpinnerProps {
|
|
93
|
+
type?: VeilSpinnerType;
|
|
94
|
+
size?: number | string;
|
|
95
|
+
color?: string;
|
|
96
|
+
secondaryColor?: string;
|
|
97
|
+
speed?: number | string;
|
|
98
|
+
label?: string;
|
|
99
|
+
glass?: boolean;
|
|
100
|
+
className?: string;
|
|
101
|
+
style?: Record<string, string | number>;
|
|
102
|
+
}
|
|
103
|
+
interface ProgressProps {
|
|
104
|
+
value?: number;
|
|
105
|
+
max?: number;
|
|
106
|
+
height?: number | string;
|
|
107
|
+
color?: string;
|
|
108
|
+
trackColor?: string;
|
|
109
|
+
circular?: boolean;
|
|
110
|
+
size?: number | string;
|
|
111
|
+
strokeWidth?: number;
|
|
112
|
+
trickle?: boolean;
|
|
113
|
+
showPercentage?: boolean;
|
|
114
|
+
status?: 'loading' | 'success' | 'error';
|
|
115
|
+
className?: string;
|
|
116
|
+
}
|
|
117
|
+
interface OverlayProps {
|
|
118
|
+
target?: HTMLElement | string;
|
|
119
|
+
visible?: boolean;
|
|
120
|
+
blur?: boolean | string;
|
|
121
|
+
opacity?: number;
|
|
122
|
+
color?: string;
|
|
123
|
+
spinner?: VeilSpinnerType | boolean;
|
|
124
|
+
message?: string;
|
|
125
|
+
lockScroll?: boolean;
|
|
126
|
+
className?: string;
|
|
127
|
+
zIndex?: number;
|
|
128
|
+
}
|
|
129
|
+
type ButtonStatus = 'idle' | 'loading' | 'success' | 'error';
|
|
130
|
+
type ButtonLoadingStyle = 'spinner-left' | 'spinner-right' | 'spinner-replace' | 'dots-after-text' | 'progress-fill' | 'shimmer-surface' | 'pulse-glow' | 'stripes-progress' | 'morph-circle' | 'slide-text' | 'border-trace' | 'liquid-fill' | 'bounce-dots' | 'glass-shine' | 'neon-pulse' | 'skeleton-button';
|
|
131
|
+
type ButtonPressFeedback = 'ripple' | 'press-scale' | 'glow-follow' | 'none';
|
|
132
|
+
type ButtonResultAnimation = 'checkmark' | 'cross' | 'shake' | 'success-burst' | 'none';
|
|
133
|
+
interface LoadingButtonProps {
|
|
134
|
+
status?: ButtonStatus;
|
|
135
|
+
loading?: boolean;
|
|
136
|
+
styleType?: ButtonLoadingStyle;
|
|
137
|
+
spinner?: VeilSpinnerType;
|
|
138
|
+
spinnerPlacement?: 'start' | 'end' | 'replace';
|
|
139
|
+
loadingText?: string;
|
|
140
|
+
successText?: string;
|
|
141
|
+
errorText?: string;
|
|
142
|
+
resetAfter?: number;
|
|
143
|
+
progress?: number;
|
|
144
|
+
pressFeedback?: ButtonPressFeedback;
|
|
145
|
+
resultAnimation?: ButtonResultAnimation;
|
|
146
|
+
haptics?: boolean;
|
|
147
|
+
disabled?: boolean;
|
|
148
|
+
className?: string;
|
|
149
|
+
children?: any;
|
|
150
|
+
onStatusChange?: (status: ButtonStatus) => void;
|
|
151
|
+
onClick?: (event: any) => Promise<any> | void;
|
|
152
|
+
}
|
|
153
|
+
interface LazyImageProps {
|
|
154
|
+
src: string;
|
|
155
|
+
alt?: string;
|
|
156
|
+
width?: string | number;
|
|
157
|
+
height?: string | number;
|
|
158
|
+
radius?: string | number;
|
|
159
|
+
aspectRatio?: string | number;
|
|
160
|
+
animation?: VeilAnimationName;
|
|
161
|
+
theme?: VeilThemeName;
|
|
162
|
+
reveal?: VeilRevealTransition;
|
|
163
|
+
fallbackSrc?: string;
|
|
164
|
+
onLoad?: () => void;
|
|
165
|
+
onError?: (err: any) => void;
|
|
166
|
+
className?: string;
|
|
167
|
+
}
|
|
168
|
+
interface TextLoaderProps {
|
|
169
|
+
text?: string;
|
|
170
|
+
dots?: number;
|
|
171
|
+
speed?: number;
|
|
172
|
+
locale?: string;
|
|
173
|
+
className?: string;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
export type { AutoMeasureOptions as A, ButtonStatus as B, CustomThemeInput as C, LoadingButtonProps as L, OverlayProps as O, PresetProps as P, SkeletonProps as S, TextLoaderProps as T, VeilThemeName as V, VeilAnimationName as a, ProgressProps as b, SpinnerProps as c, VeilGlobalConfig as d, ButtonLoadingStyle as e, VeilSpinnerType as f, VeilPresetName as g, VeilShapeStyle as h, VeilPrimitiveType as i, ButtonPressFeedback as j, ButtonResultAnimation as k, SkeletonController as l, LazyImageProps as m, VeilDirection as n, VeilRevealTransition as o, VeilThemeTokens as p };
|