@gradient-ui/core 0.8.0 → 1.0.1

package/dist/types/directives/gradientIcon.d.ts

@@ -1,4 +1,4 @@
-import { type GradientTextBindingValue } from './gradientText';
+import { type GradientTextBindingValue } from './gradientText.js';
 export type GradientIconBindingValue = GradientTextBindingValue;
 declare const gradientIcon: import("vue").Directive<HTMLElement, GradientTextBindingValue>;
 export default gradientIcon;

package/dist/types/directives/gradientText.d.ts

@@ -1,5 +1,5 @@
-import type { GGradienStates } from '@/components/ui/GGradient/types';
-import { type GColor } from '@/use/colorResolver';
+import type { GGradienStates } from '../components/ui/GGradient/types.js';
+import { type GColor } from '../use/colorResolver.js';
 import type { Directive } from 'vue';
 export type GradientTextBindingValue = GColor | {
     color?: GColor;

package/dist/types/directives/index.d.ts

@@ -1,13 +1,13 @@
-export { default as vGradientIcon } from './gradientIcon';
-export type { GradientIconBindingValue } from './gradientIcon';
-export { default as vGradientText } from './gradientText';
-export type { GradientTextBindingValue } from './gradientText';
-export { default as vLoading } from './loading';
-export type { LoadingBindingValue } from './loading';
-export { ripple as vRipple } from './ripple';
-export type { RippleBindingValue } from './ripple';
-export { specular as vSpecular } from './specular';
-export type { SpecularBindingValue } from './specular';
-export { vTooltip } from './tooltip';
-export { default as vMask } from './mask';
-export type { MaskBindingValue, MaskDirectiveOptions } from './mask';
+export { default as vGradientIcon } from './gradientIcon.js';
+export type { GradientIconBindingValue } from './gradientIcon.js';
+export { default as vGradientText } from './gradientText.js';
+export type { GradientTextBindingValue } from './gradientText.js';
+export { default as vLoading } from './loading.js';
+export type { LoadingBindingValue } from './loading.js';
+export { ripple as vRipple } from './ripple.js';
+export type { RippleBindingValue } from './ripple.js';
+export { specular as vSpecular } from './specular.js';
+export type { SpecularBindingValue } from './specular.js';
+export { vTooltip } from './tooltip.js';
+export { default as vMask } from './mask.js';
+export type { MaskBindingValue, MaskDirectiveOptions } from './mask.js';

package/dist/types/directives/loading.d.ts

@@ -1,14 +1,14 @@
-import { type App, type ComponentPublicInstance, type Directive } from 'vue';
-import GLoading from '@/components/ui/GLoading/GLoading.vue';
-import type { GLoadingProps } from '@/components/ui/GLoading/types';
+import { type ComponentPublicInstance, type Directive } from 'vue';
+import GLoading from '../components/ui/GLoading/GLoading.vue.js';
+import type { GLoadingProps } from '../components/ui/GLoading/types.js';
+import { type ClientComponentMount } from '../ssr/utils/index.js';
 export type LoadingBindingValue = boolean | (Partial<GLoadingProps> & {
     active?: boolean;
     value?: boolean;
 });
 type LoadingState = {
     originalPosition: string;
-    app?: App<Element>;
-    container?: HTMLDivElement;
+    mount?: ClientComponentMount;
     component?: ComponentPublicInstance<typeof GLoading>;
     optionsKey?: string;
 };

package/dist/types/directives/mask.d.ts

@@ -1,5 +1,5 @@
 import type { Directive } from 'vue';
-import { type GMaskTokens, type GMaskValue } from '@/use/mask';
+import { type GMaskTokens, type GMaskValue } from '../use/mask/index.js';
 export interface MaskDirectiveOptions {
     mask: GMaskValue;
     tokens?: GMaskTokens;

package/dist/types/directives/ripple.d.ts

@@ -1,5 +1,5 @@
 import type { Directive } from 'vue';
-import { type GColor } from '@/use/colorResolver';
+import { type GColor } from '../use/colorResolver.js';
 export type RippleBindingValue = boolean | GColor | {
     center?: boolean;
     color?: GColor;

package/dist/types/directives/specular.d.ts

@@ -1,5 +1,5 @@
 import type { Directive } from 'vue';
-import { type GColor } from '@/use/colorResolver';
+import { type GColor } from '../use/colorResolver.js';
 export type SpecularBindingValue = boolean | GColor | {
     color?: GColor;
     disabled?: boolean;

package/dist/types/index.d.ts

@@ -1,21 +1,17 @@
 import type { Plugin } from 'vue';
-import './style.scss';
-import { installIcons, type IconsOptions } from '@/use/icon';
-import { type GradientUIThemeOptions } from '@/theme';
-import type { ColorInput } from '@/types/Colors';
-import { type GradientUIDefaults } from '@/use/defaults';
-export * from '@/components';
-export * from '@/directives';
-export * from '@/services';
-export * from '@/theme';
-export * from '@/use';
+import { installIcons } from './use/icon.js';
+import { type GradientUIOptions } from './plugin.js';
+export type { GradientUIOptions } from './plugin.js';
+import type { ColorInput } from './types/Colors.js';
+export * from './components/index.js';
+export * from './directives/index.js';
+export * from './services/index.js';
+export * from './ssr/index.js';
+export * from './theme/index.js';
+export * from './use/index.js';
 export { installIcons };
 export type { ColorInput };
-export interface GradientUIOptions {
-    icons?: boolean | Partial<IconsOptions>;
-    theme?: false | ColorInput | GradientUIThemeOptions;
-    defaults?: GradientUIDefaults;
-}
-export declare function createGradientUI(options?: GradientUIOptions): Plugin<GradientUIOptions | undefined>;
-export declare const GradientUI: Plugin<GradientUIOptions | undefined>;
+export type GradientUIPlugin = Plugin<[options?: GradientUIOptions]>;
+export declare function createGradientUI(options?: GradientUIOptions): GradientUIPlugin;
+export declare const GradientUI: GradientUIPlugin;
 export default GradientUI;

package/dist/types/plugin.d.ts

@@ -0,0 +1,15 @@
+import type { App } from 'vue';
+import { type IconsOptions } from './use/icon.js';
+import { type GradientUIThemeOptions } from './theme/index.js';
+import type { ColorInput } from './types/Colors.js';
+import { type GradientUIDefaults } from './use/defaults.js';
+export interface GradientUIOptions {
+    /** Register every component globally. Disable when using explicit imports. */
+    components?: boolean;
+    icons?: boolean | Partial<IconsOptions>;
+    theme?: false | ColorInput | GradientUIThemeOptions;
+    defaults?: GradientUIDefaults;
+}
+export declare const resolveThemeOptions: (theme: GradientUIOptions["theme"]) => GradientUIThemeOptions;
+/** Install application context without importing the component catalogue. */
+export declare const installGradientUIRuntime: (app: App, options?: GradientUIOptions, inlineOptions?: GradientUIOptions) => GradientUIOptions;

package/dist/types/services/context.d.ts

@@ -0,0 +1,8 @@
+import type { InjectionKey } from 'vue';
+import type { LoadingService } from './useLoading.js';
+import type { SnackbarService } from './useSnackbar.js';
+export interface GradientUIServices {
+    loading: LoadingService;
+    snackbar: SnackbarService;
+}
+export declare const GradientUIServicesSymbol: InjectionKey<GradientUIServices>;

package/dist/types/services/index.d.ts

@@ -1,2 +1,4 @@
-export * from './useLoading';
-export * from './useSnackbar';
+export * from './context.js';
+export * from './runtime.js';
+export * from './useLoading.js';
+export * from './useSnackbar.js';

package/dist/types/services/runtime.d.ts

@@ -0,0 +1,5 @@
+import type { App } from 'vue';
+import { type GradientUIServices } from './context.js';
+export declare const createGradientUIServices: () => GradientUIServices;
+export declare const installGradientUIServices: (app: App) => GradientUIServices;
+export declare const getGradientUIServices: (app: App) => GradientUIServices;

package/dist/types/services/useLoading.d.ts

@@ -1,8 +1,11 @@
-import type { GLoadingProps } from '@/components/ui/GLoading/types';
-export declare function useLoading(): {
+import type { GLoadingProps } from '../components/ui/GLoading/types.js';
+export declare const createLoadingService: () => {
     show: (options: Partial<GLoadingProps & {
         target: string | HTMLElement;
     }>) => void;
     hide: () => Promise<void>;
     visible: import("vue").Ref<boolean, boolean>;
+    dispose: () => void;
 };
+export type LoadingService = ReturnType<typeof createLoadingService>;
+export declare const useLoading: () => LoadingService;

package/dist/types/services/useSnackbar.d.ts

@@ -1,4 +1,4 @@
-import type { GSnackbarAction, GSnackbarCloseReason, GSnackbarLocation, GSnackbarProps } from '@/components/ui/GSnackbar/types';
+import type { GSnackbarAction, GSnackbarCloseReason, GSnackbarLocation, GSnackbarProps } from '../components/ui/GSnackbar/types.js';
 export type GSnackbarTransition = 'fade' | 'scale' | 'slide-x' | 'slide-y';
 export interface SnackbarOptions extends Partial<Omit<GSnackbarProps, 'action' | 'transition'>> {
     action?: GSnackbarAction | string;
@@ -11,12 +11,15 @@ interface SnackbarItem extends SnackbarOptions {
     action?: GSnackbarAction;
     location: GSnackbarLocation;
 }
-export declare function useSnackbar(): {
+export declare const createSnackbarService: () => {
     show: (options: SnackbarOptions | string) => {
         id: number;
         close: (reason?: GSnackbarCloseReason) => void;
     };
     closeAll: () => void;
     items: import("vue").ShallowRef<SnackbarItem[], SnackbarItem[]>;
+    dispose: () => void;
 };
+export type SnackbarService = ReturnType<typeof createSnackbarService>;
+export declare const useSnackbar: () => SnackbarService;
 export {};

package/dist/types/ssr/index.d.ts

@@ -0,0 +1,2 @@
+export * from './use/index.js';
+export * from './utils/index.js';

package/dist/types/ssr/use/appScopedState.d.ts

@@ -0,0 +1 @@
+export declare const defineAppScopedState: <T>(factory: () => T) => (() => T);

package/dist/types/ssr/use/clientLifecycle.d.ts

@@ -0,0 +1,2 @@
+import { type ClientRuntime } from '../utils/environment.js';
+export declare const onClientMounted: (effect: (runtime: ClientRuntime) => void | (() => void)) => void;

package/dist/types/ssr/use/hydration.d.ts

@@ -0,0 +1,2 @@
+import { type Ref } from 'vue';
+export declare const useHydrated: () => Readonly<Ref<boolean>>;

package/dist/types/ssr/use/id.d.ts

@@ -0,0 +1 @@
+export declare const useSsrId: (prefix?: string) => string;

package/dist/types/ssr/use/index.d.ts

@@ -0,0 +1,6 @@
+export * from './appScopedState.js';
+export * from './clientLifecycle.js';
+export * from './hydration.js';
+export * from './id.js';
+export * from './teleport.js';
+export * from './viewport.js';

package/dist/types/ssr/use/teleport.d.ts

@@ -0,0 +1,11 @@
+import { type App, type ComputedRef, type MaybeRefOrGetter } from 'vue';
+export interface SsrTeleportOptions {
+    /** Replace the default body target with a host supported by the SSR renderer. */
+    target: string;
+}
+export declare const installSsrTeleport: (app: App, options: SsrTeleportOptions) => void;
+export interface SsrTeleportState {
+    disabled: ComputedRef<boolean>;
+    target: ComputedRef<string>;
+}
+export declare const useSsrTeleport: (target?: MaybeRefOrGetter<string | null | undefined>, disabled?: MaybeRefOrGetter<boolean>) => SsrTeleportState;

package/dist/types/ssr/use/viewport.d.ts

@@ -0,0 +1,12 @@
+import { type App } from 'vue';
+/** Initial dimensions supplied by an SSR host for one application/request. */
+export interface SsrViewport {
+    height?: number;
+    width?: number;
+}
+/** Installs request-local viewport dimensions on a Vue application. */
+export declare const installSsrViewport: (app: App, state: SsrViewport) => void;
+/** Provides viewport dimensions to a subtree during component setup. */
+export declare const provideSsrViewport: (state: SsrViewport) => void;
+/** Reads the viewport dimensions supplied by the current application/request. */
+export declare const useSsrViewport: () => Readonly<SsrViewport> | null;

package/dist/types/ssr/utils/environment.d.ts

@@ -0,0 +1,11 @@
+export interface ClientRuntime {
+    document: Document;
+    window: Window;
+}
+export declare const canUseDom: () => boolean;
+export declare const getClientWindow: () => Window | null;
+export declare const getClientDocument: () => Document | null;
+export declare const getClientRuntime: () => ClientRuntime | null;
+export declare const isClientElement: (value: unknown) => value is Element;
+export declare const isClientHTMLElement: (value: unknown) => value is HTMLElement;
+export declare const runOnClient: <T>(callback: () => T) => T | null;

package/dist/types/ssr/utils/head.d.ts

@@ -0,0 +1,28 @@
+import { type GradientUIThemeOptions, type ThemeMode } from '../../theme/default.js';
+export type GradientUIHeadStyleId = 'g-theme-style' | 'g-color-style' | 'g-gradient-style';
+export interface GradientUIHeadStyle {
+    id: GradientUIHeadStyleId;
+    nonce?: string;
+    textContent: string;
+}
+export interface GradientUIHead {
+    htmlAttrs: {
+        class: string[];
+    };
+    style: GradientUIHeadStyle[];
+}
+export interface GradientUIHeadOptions {
+    /** Theme inputs used to generate request-local token CSS. */
+    theme?: GradientUIThemeOptions;
+    /** Classes used to qualify light and dark token rules. */
+    modeClasses?: Record<ThemeMode, string>;
+    /** Include the active mode class on the html element. */
+    includeModeClass?: boolean;
+    /** CSP nonce applied to every generated style descriptor. */
+    nonce?: string;
+}
+/**
+ * Creates framework-neutral SSR head descriptors without touching the DOM.
+ * The result is request-local and can be passed to any head manager.
+ */
+export declare const createGradientUIHead: (options?: GradientUIHeadOptions) => GradientUIHead;

package/dist/types/ssr/utils/index.d.ts

@@ -0,0 +1,3 @@
+export * from './environment.js';
+export * from './head.js';
+export * from './mount.js';

package/dist/types/ssr/utils/mount.d.ts

@@ -0,0 +1,21 @@
+import { type App, type Component, type ComponentPublicInstance } from 'vue';
+export type ClientMountTarget = string | HTMLElement;
+export interface ClientComponentMount<TInstance extends ComponentPublicInstance = ComponentPublicInstance> {
+    app: App;
+    container: HTMLElement;
+    instance: TInstance;
+    unmount: () => void;
+}
+export interface MountClientComponentOptions {
+    containerClass?: string;
+    props?: Record<string, unknown> | null;
+    target?: ClientMountTarget;
+}
+export declare const resolveClientTarget: (target?: ClientMountTarget) => HTMLElement | null;
+export declare const mountClientComponent: <TInstance extends ComponentPublicInstance = ComponentPublicInstance>(component: Component, options?: MountClientComponentOptions) => ClientComponentMount<TInstance> | null;
+export declare const mountClientStyle: (id: string, cssText: string) => HTMLStyleElement | null;
+export interface ClientElementRegistry {
+    mount: (id: string, createElement: (document: Document) => Element) => () => void;
+    clear: () => void;
+}
+export declare const createClientElementRegistry: () => ClientElementRegistry;

package/dist/types/theme/color.d.ts

@@ -1,4 +1,4 @@
-import type { ColorInput } from '@/types/Colors';
+import type { ColorInput } from '../types/Colors.js';
 export interface RgbColor {
     r: number;
     g: number;

package/dist/types/theme/colorSystem.d.ts

@@ -1,6 +1,6 @@
-import { type ColorPalettePair } from './palette';
-import type { ThemeColorExtensions, ThemeTokens } from './types';
-import type { ColorInput } from '@/types/Colors';
+import { type ColorPalettePair } from './palette.js';
+import type { ThemeColorExtensions, ThemeTokens } from './types.js';
+import type { ColorInput } from '../types/Colors.js';
 export interface ColorSystem {
     colors: ThemeTokens;
     gradients: ThemeTokens;

package/dist/types/theme/cssTokens.d.ts

@@ -1,7 +1,8 @@
-import type { ThemeTokens } from './types';
+import type { ThemeTokens } from './types.js';
 export interface TokenStyleOptions {
     className: string;
     id: string;
     prefix: string;
 }
-export declare const applyTokensToCSS: (tokens: ThemeTokens, { className, id, prefix }: TokenStyleOptions) => HTMLStyleElement;
+export declare const createTokensCSS: (tokens: ThemeTokens, { className, prefix }: Pick<TokenStyleOptions, "className" | "prefix">) => string;
+export declare const applyTokensToCSS: (tokens: ThemeTokens, { className, id, prefix }: TokenStyleOptions) => HTMLStyleElement | null;

package/dist/types/theme/default.d.ts

@@ -1,13 +1,14 @@
-import type { ThemeColorExtensions, ThemeMode, ThemeTokens } from './types';
-import type { ColorInput } from '@/types/Colors';
+import type { ThemeColorExtensions, ThemeMode, ThemeTokens } from './types.js';
+import type { ColorInput } from '../types/Colors.js';
 import { DEFAULT_SEED } from '@gradient-ui/gradient-engine';
 import { type App, type Ref, type ShallowRef } from 'vue';
 export { DEFAULT_SEED };
 export interface SeedTheme {
     seedColor: ColorInput;
 }
-export type { ThemeMode } from './types';
+export type { ThemeMode } from './types.js';
 export interface GradientUIThemeOptions {
+    applyToDom?: boolean;
     seed?: ColorInput;
     mode?: ThemeMode;
     autoApply?: boolean;
@@ -15,6 +16,7 @@ export interface GradientUIThemeOptions {
 }
 export interface CreateDefaultThemeOptions {
     colors?: ThemeColorExtensions;
+    applyToDom?: boolean;
 }
 export interface GeneratedTheme {
     tokens: {
@@ -22,9 +24,14 @@ export interface GeneratedTheme {
         colors: ThemeTokens;
         gradients: ThemeTokens;
     };
-    themeCSS: HTMLStyleElement;
-    colorsCSS: HTMLStyleElement;
-    gradientCSS: HTMLStyleElement;
+    classes: string[];
+    cssText: string;
+    themeCSSText: string;
+    colorsCSSText: string;
+    gradientCSSText: string;
+    themeCSS: HTMLStyleElement | null;
+    colorsCSS: HTMLStyleElement | null;
+    gradientCSS: HTMLStyleElement | null;
 }
 export interface GradientUITheme {
     seed: Ref<ColorInput>;

package/dist/types/theme/index.d.ts

@@ -1,12 +1,13 @@
-export { colorToHex, getContrastingColor, parseColor, rgbToChannels, rgbToHex, type RgbColor } from './color';
-export { COLOR_SHADES, ON_SHADE_TONES, SHADE_TONES, createOnPalette, createPalette, createPalettePair, type ColorPalette, type ColorPalettePair, type ColorShade } from './palette';
+export { createTokensCSS } from './cssTokens.js';
+export { colorToHex, getContrastingColor, parseColor, rgbToChannels, rgbToHex, type RgbColor } from './color.js';
+export { COLOR_SHADES, ON_SHADE_TONES, SHADE_TONES, createOnPalette, createPalette, createPalettePair, type ColorPalette, type ColorPalettePair, type ColorShade } from './palette.js';
 export * as gradientAnimation from '@gradient-ui/gradient-engine/animation';
 export * as gradientCore from '@gradient-ui/gradient-engine/core';
 export * as gradientEffects from '@gradient-ui/gradient-engine/effects';
 export * as gradientFormatters from '@gradient-ui/gradient-engine/formatters';
 export * as gradientMaterial from '@gradient-ui/gradient-engine/material';
 export { createGradient, createGradientModel, createGradientModelFromColor, createGradientFromColor, createGradientMaterial, createGradientPreset, createGradientTokens, createLinearGradient, DEFAULT_GRADIENT_MORPH_BLEND_MODE, defineGradientPreset, defineGradientPresetRegistry, getGradientPreset, GRADIENT_MORPH_BLEND_MODES, gradientPresets, isGradientMorphBlendMode, resolveGradientMorphBlendMode, toCssGradient, toGradientAnimationCSS, toGradientBoxShadow, toGradientDropShadow, createGradientMorphBlobs, toGradientMorphCSS, toGradientMorphFilter, toGradientMorphFilterMarkup, toCanvasGradient, toSvgGradient, toSvgGradientMarkup, toSvgPathAnimationMarkup, toSvgSourceAnimationMarkup, type GradientAnimationOptions, type GradientAnimationPreset, type CanvasGradientOptions, type CreatedGradientPreset, type CreatedGradientTokens, type CreatedGradientMaterial, type GradientAnimationTokenEntry, type GradientDirection, type GradientEffectTokenEntry, type GradientModel, type GradientMaterialOptions, type GradientMorphBlob, type GradientMorphBlendMode, type GradientMorphOptions, type GradientMorphPreset, type GradientOptions, type GradientPreset, type GradientPresetName, type GradientPresetRegistry, type GradientRecipe, type GradientShadowOptions, type GradientShape, type GradientStop, type GradientTokenEntry, type GradientTokenOptions, type GradientTokenRecipe, type GradientType, type SvgGradientOptions, type SvgPathAnimationOptions, type SvgSourceAnimationOptions } from '@gradient-ui/gradient-engine';
-export { createColorSystem, type ColorSystem, type ColorSystemOptions } from './colorSystem';
-export { createSemanticTokens } from './scheme';
-export { DEFAULT_SEED, createDefaultDarkTheme, createDefaultLightTheme, createDefaultTheme, createTheme, installTheme, provideTheme, useTheme, type CreateDefaultThemeOptions, type GeneratedTheme, type GradientUITheme, type GradientUIThemeOptions, type SeedTheme, type ThemeMode } from './default';
-export type { ThemeColorDefinition, ThemeColorExtensions, ThemeColorValue, ThemeTokens } from './types';
+export { createColorSystem, type ColorSystem, type ColorSystemOptions } from './colorSystem.js';
+export { createSemanticTokens } from './scheme.js';
+export { DEFAULT_SEED, createDefaultDarkTheme, createDefaultLightTheme, createDefaultTheme, createTheme, installTheme, provideTheme, useTheme, type CreateDefaultThemeOptions, type GeneratedTheme, type GradientUITheme, type GradientUIThemeOptions, type SeedTheme, type ThemeMode } from './default.js';
+export type { ThemeColorDefinition, ThemeColorExtensions, ThemeColorValue, ThemeTokens } from './types.js';

package/dist/types/theme/palette.d.ts

@@ -1,4 +1,4 @@
-import type { ColorInput } from '@/types/Colors';
+import type { ColorInput } from '../types/Colors.js';
 export declare const COLOR_SHADES: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
 export type ColorShade = (typeof COLOR_SHADES)[number];
 export type ColorPalette = Record<ColorShade, string>;

package/dist/types/theme/scheme.d.ts

@@ -1,2 +1,2 @@
-import type { ThemeMode, ThemeTokens } from './types';
+import type { ThemeMode, ThemeTokens } from './types.js';
 export declare const createSemanticTokens: (seed: string, mode: ThemeMode) => ThemeTokens;

package/dist/types/theme/types.d.ts

@@ -1,4 +1,4 @@
-import type { ColorInput } from '@/types/Colors';
+import type { ColorInput } from '../types/Colors.js';
 export type ThemeMode = 'light' | 'dark';
 export type ThemeTokens = Record<string, string>;
 export interface ThemeColorDefinition {

package/dist/types/types/CommonTypes.d.ts

@@ -1,6 +1,6 @@
 import * as mdi from '@mdi/js';
-import type { ExcludeString } from './UtilityTypes';
-import type { CamelToKebab } from './UtilityTypes';
+import type { ExcludeString } from './UtilityTypes.js';
+import type { CamelToKebab } from './UtilityTypes.js';
 export type MdiIcon = ExcludeString<CamelToKebab<keyof typeof mdi>, 'mdi-'>;
 export interface PLAProps {
     label?: string;

package/dist/types/use/PLA.d.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import { type MdiIcon } from './../types/CommonTypes';
+import { type MdiIcon } from './../types/CommonTypes.js';
 export declare const makePLAProps: <Defaults extends {
     prepend?: unknown;
     append?: unknown;

package/dist/types/use/actionProps.d.ts

@@ -7,29 +7,29 @@ export declare const makeActionProps: <Defaults extends {
     rounded: Omit<{
         type: import("vue").PropType<boolean>;
         default: boolean;
-    }, "type" | "default"> & {
+    }, "default" | "type"> & {
         type: import("vue").PropType<Defaults["rounded"] extends infer T ? T extends Defaults["rounded"] ? T extends unknown ? boolean : boolean | T : never : never>;
         default: Defaults["rounded"] extends infer T_1 ? T_1 extends Defaults["rounded"] ? T_1 extends unknown ? boolean : boolean | T_1 : never : never;
     };
     size: Omit<Omit<{
-        type: import("vue").PropType<import("../types/CommonTypes").Sizes>;
+        type: import("vue").PropType<import("../types/CommonTypes.js").Sizes>;
         default: string;
-    }, "type" | "default"> & {
-        type: import("vue").PropType<import("../types/CommonTypes").Sizes>;
-        default: import("../types/CommonTypes").Sizes;
-    }, "type" | "default"> & {
-        type: import("vue").PropType<Defaults["size"] extends infer T_2 ? T_2 extends Defaults["size"] ? T_2 extends unknown ? import("../types/CommonTypes").Sizes : import("../types/CommonTypes").Sizes | T_2 : never : never>;
-        default: Defaults["size"] extends infer T_3 ? T_3 extends Defaults["size"] ? T_3 extends unknown ? import("../types/CommonTypes").Sizes : NonNullable<import("../types/CommonTypes").Sizes> | T_3 : never : never;
+    }, "default" | "type"> & {
+        type: import("vue").PropType<import("../types/CommonTypes.js").Sizes>;
+        default: import("../types/CommonTypes.js").Sizes;
+    }, "default" | "type"> & {
+        type: import("vue").PropType<Defaults["size"] extends infer T_2 ? T_2 extends Defaults["size"] ? T_2 extends unknown ? import("../types/CommonTypes.js").Sizes : import("../types/CommonTypes.js").Sizes | T_2 : never : never>;
+        default: Defaults["size"] extends infer T_3 ? T_3 extends Defaults["size"] ? T_3 extends unknown ? import("../types/CommonTypes.js").Sizes : NonNullable<import("../types/CommonTypes.js").Sizes> | T_3 : never : never;
     };
     variant: Omit<Omit<{
-        type: import("vue").PropType<import("./variant").GVariant>;
+        type: import("vue").PropType<import("./variant.js").GVariant>;
         default: string;
-    }, "type" | "default"> & {
-        type: import("vue").PropType<import("./variant").GVariant>;
-        default: import("./variant").GVariant;
-    }, "type" | "default"> & {
-        type: import("vue").PropType<Defaults["variant"] extends infer T_4 ? T_4 extends Defaults["variant"] ? T_4 extends unknown ? import("./variant").GVariant : import("./variant").GVariant | T_4 : never : never>;
-        default: Defaults["variant"] extends infer T_5 ? T_5 extends Defaults["variant"] ? T_5 extends unknown ? import("./variant").GVariant : NonNullable<import("./variant").GVariant> | T_5 : never : never;
+    }, "default" | "type"> & {
+        type: import("vue").PropType<import("./variant.js").GVariant>;
+        default: import("./variant.js").GVariant;
+    }, "default" | "type"> & {
+        type: import("vue").PropType<Defaults["variant"] extends infer T_4 ? T_4 extends Defaults["variant"] ? T_4 extends unknown ? import("./variant.js").GVariant : import("./variant.js").GVariant | T_4 : never : never>;
+        default: Defaults["variant"] extends infer T_5 ? T_5 extends Defaults["variant"] ? T_5 extends unknown ? import("./variant.js").GVariant : NonNullable<import("./variant.js").GVariant> | T_5 : never : never;
     };
     removable: {
         type: import("vue").PropType<Defaults["removable"] extends infer T_6 ? T_6 extends Defaults["removable"] ? T_6 extends unknown ? boolean : boolean | T_6 : never : never>;