@gradient-ui/core 0.2.1 → 0.4.1

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

@@ -0,0 +1,376 @@
+import type { GGradienStates } from '@/components/ui/GGradient/types';
+import type { GradientAnimationOptions, GradientMorphOptions, GradientShadowOptions, GradientTokenRecipe } from '@/theme';
+import { type CSSProperties } from 'vue';
+import type { GColor } from './color';
+import { type GlassProps } from './glass';
+import { type GGlow } from './gradient';
+import type { Placement, StringeredNumber } from '@/types/CommonTypes';
+import { type UseMaterialOptions } from './material';
+export interface MaterialSurfaceProps extends GlassProps {
+    variant?: string;
+    color?: GColor;
+    state?: GGradienStates;
+    gradientRecipe?: GradientTokenRecipe;
+    shadow?: boolean;
+    dropShadow?: boolean;
+    morph?: boolean;
+    animationOptions?: GradientAnimationOptions;
+    shadowOptions?: GradientShadowOptions;
+    dropShadowOptions?: GradientShadowOptions;
+    morphOptions?: GradientMorphOptions;
+    borderWidth?: StringeredNumber;
+    borderRadius?: StringeredNumber;
+    placement?: Placement;
+    rounded?: boolean;
+    glow?: GGlow;
+    animateGlow?: boolean;
+}
+export declare const makeMaterialSurfaceProps: <Defaults extends {
+    rootTag?: unknown;
+    interactive?: unknown;
+    borderRadius?: unknown;
+    inheritWidth?: unknown;
+    surfaceFill?: unknown;
+    state?: unknown;
+    glow?: unknown;
+    animateGlow?: unknown;
+    shadow?: unknown;
+    disabled?: unknown;
+    active?: unknown;
+    borderWidth?: unknown;
+    color?: unknown;
+    materialKind?: unknown;
+    gradientRecipe?: unknown;
+    placement?: unknown;
+    rounded?: unknown;
+    variant?: unknown;
+    backdropBlur?: unknown;
+    padding?: unknown;
+    dropShadow?: unknown;
+    morph?: unknown;
+    animationOptions?: unknown;
+    shadowOptions?: unknown;
+    dropShadowOptions?: unknown;
+    morphOptions?: unknown;
+} = object>(defaults?: Defaults | undefined) => {
+    rootTag: Omit<Omit<Omit<{
+        type: StringConstructor;
+        default: string;
+    }, "type" | "default"> & {
+        type: import("vue").PropType<string>;
+        default: string;
+    }, "type" | "default"> & {
+        type: import("vue").PropType<string>;
+        default: string;
+    }, "type" | "default"> & {
+        type: import("vue").PropType<Defaults["rootTag"] extends infer T ? T extends Defaults["rootTag"] ? T extends unknown ? string : string | T : never : never>;
+        default: Defaults["rootTag"] extends infer T_1 ? T_1 extends Defaults["rootTag"] ? T_1 extends unknown ? string : string | T_1 : never : never;
+    };
+    interactive: Omit<Omit<Omit<{
+        type: BooleanConstructor;
+        default: boolean;
+    }, "type" | "default"> & {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    }, "type" | "default"> & {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    }, "type" | "default"> & {
+        type: import("vue").PropType<Defaults["interactive"] extends infer T_2 ? T_2 extends Defaults["interactive"] ? T_2 extends unknown ? boolean : boolean | T_2 : never : never>;
+        default: Defaults["interactive"] extends infer T_3 ? T_3 extends Defaults["interactive"] ? T_3 extends unknown ? boolean : boolean | T_3 : never : never;
+    };
+    borderRadius: Omit<Omit<Omit<{
+        type: import("vue").PropType<import("./gradient").GBorderRadius>;
+        default: number;
+    }, "type" | "default"> & {
+        type: import("vue").PropType<import("./gradient").GBorderRadius>;
+        default: import("./gradient").GBorderRadius;
+    }, "type" | "default"> & {
+        type: import("vue").PropType<import("./gradient").GBorderRadius>;
+        default: import("./gradient").GBorderRadius;
+    }, "type" | "default"> & {
+        type: import("vue").PropType<Defaults["borderRadius"] extends infer T_4 ? T_4 extends Defaults["borderRadius"] ? T_4 extends unknown ? import("./gradient").GBorderRadius : import("./gradient").GBorderRadius | T_4 : never : never>;
+        default: Defaults["borderRadius"] extends infer T_5 ? T_5 extends Defaults["borderRadius"] ? T_5 extends unknown ? import("./gradient").GBorderRadius : NonNullable<import("./gradient").GBorderRadius> | T_5 : never : never;
+    };
+    inheritWidth: Omit<Omit<{
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    }, "type" | "default"> & {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    }, "type" | "default"> & {
+        type: import("vue").PropType<Defaults["inheritWidth"] extends infer T_6 ? T_6 extends Defaults["inheritWidth"] ? T_6 extends unknown ? boolean : boolean | T_6 : never : never>;
+        default: Defaults["inheritWidth"] extends infer T_7 ? T_7 extends Defaults["inheritWidth"] ? T_7 extends unknown ? boolean : boolean | T_7 : never : never;
+    };
+    surfaceFill: Omit<Omit<Omit<{
+        type: import("vue").PropType<import("./gradientSurface").GGradientSurfaceFill>;
+        default: string;
+    }, "type" | "default"> & {
+        type: import("vue").PropType<import("./gradientSurface").GGradientSurfaceFill>;
+        default: import("./gradientSurface").GGradientSurfaceFill;
+    }, "type" | "default"> & {
+        type: import("vue").PropType<import("./gradientSurface").GGradientSurfaceFill>;
+        default: import("./gradientSurface").GGradientSurfaceFill;
+    }, "type" | "default"> & {
+        type: import("vue").PropType<Defaults["surfaceFill"] extends infer T_8 ? T_8 extends Defaults["surfaceFill"] ? T_8 extends unknown ? import("./gradientSurface").GGradientSurfaceFill : import("./gradientSurface").GGradientSurfaceFill | T_8 : never : never>;
+        default: Defaults["surfaceFill"] extends infer T_9 ? T_9 extends Defaults["surfaceFill"] ? T_9 extends unknown ? import("./gradientSurface").GGradientSurfaceFill : NonNullable<import("./gradientSurface").GGradientSurfaceFill> | T_9 : never : never;
+    };
+    state: Omit<Omit<Omit<{
+        type: import("vue").PropType<GGradienStates>;
+        default: GGradienStates;
+    }, "type" | "default"> & {
+        type: import("vue").PropType<GGradienStates>;
+        default: GGradienStates;
+    }, "type" | "default"> & {
+        type: import("vue").PropType<GGradienStates>;
+        default: GGradienStates;
+    }, "type" | "default"> & {
+        type: import("vue").PropType<Defaults["state"] extends infer T_10 ? T_10 extends Defaults["state"] ? T_10 extends unknown ? GGradienStates : GGradienStates | T_10 : never : never>;
+        default: Defaults["state"] extends infer T_11 ? T_11 extends Defaults["state"] ? T_11 extends unknown ? GGradienStates : NonNullable<GGradienStates> | T_11 : never : never;
+    };
+    glow: Omit<Omit<{
+        type: import("vue").PropType<GGlow>;
+        default: GGlow;
+    }, "type" | "default"> & {
+        type: import("vue").PropType<GGlow>;
+        default: GGlow;
+    }, "type" | "default"> & {
+        type: import("vue").PropType<Defaults["glow"] extends infer T_12 ? T_12 extends Defaults["glow"] ? T_12 extends unknown ? GGlow : GGlow | T_12 : never : never>;
+        default: Defaults["glow"] extends infer T_13 ? T_13 extends Defaults["glow"] ? T_13 extends unknown ? GGlow : NonNullable<GGlow> | T_13 : never : never;
+    };
+    animateGlow: Omit<Omit<{
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    }, "type" | "default"> & {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    }, "type" | "default"> & {
+        type: import("vue").PropType<Defaults["animateGlow"] extends infer T_14 ? T_14 extends Defaults["animateGlow"] ? T_14 extends unknown ? boolean : boolean | T_14 : never : never>;
+        default: Defaults["animateGlow"] extends infer T_15 ? T_15 extends Defaults["animateGlow"] ? T_15 extends unknown ? boolean : boolean | T_15 : never : never;
+    };
+    shadow: Omit<Omit<{
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    }, "type" | "default"> & {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    }, "type" | "default"> & {
+        type: import("vue").PropType<Defaults["shadow"] extends infer T_16 ? T_16 extends Defaults["shadow"] ? T_16 extends unknown ? boolean : boolean | T_16 : never : never>;
+        default: Defaults["shadow"] extends infer T_17 ? T_17 extends Defaults["shadow"] ? T_17 extends unknown ? boolean : boolean | T_17 : never : never;
+    };
+    disabled: Omit<Omit<Omit<{
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    }, "type" | "default"> & {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    }, "type" | "default"> & {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    }, "type" | "default"> & {
+        type: import("vue").PropType<Defaults["disabled"] extends infer T_18 ? T_18 extends Defaults["disabled"] ? T_18 extends unknown ? boolean : boolean | T_18 : never : never>;
+        default: Defaults["disabled"] extends infer T_19 ? T_19 extends Defaults["disabled"] ? T_19 extends unknown ? boolean : boolean | T_19 : never : never;
+    };
+    active: Omit<Omit<{
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    }, "type" | "default"> & {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    }, "type" | "default"> & {
+        type: import("vue").PropType<Defaults["active"] extends infer T_20 ? T_20 extends Defaults["active"] ? T_20 extends unknown ? boolean : boolean | T_20 : never : never>;
+        default: Defaults["active"] extends infer T_21 ? T_21 extends Defaults["active"] ? T_21 extends unknown ? boolean : boolean | T_21 : never : never;
+    };
+    borderWidth: Omit<Omit<Omit<{
+        type: import("vue").PropType<StringeredNumber>;
+        default: number;
+    }, "type" | "default"> & {
+        type: import("vue").PropType<StringeredNumber>;
+        default: StringeredNumber;
+    }, "type" | "default"> & {
+        type: import("vue").PropType<StringeredNumber>;
+        default: StringeredNumber;
+    }, "type" | "default"> & {
+        type: import("vue").PropType<Defaults["borderWidth"] extends infer T_22 ? T_22 extends Defaults["borderWidth"] ? T_22 extends unknown ? StringeredNumber : StringeredNumber | T_22 : never : never>;
+        default: Defaults["borderWidth"] extends infer T_23 ? T_23 extends Defaults["borderWidth"] ? T_23 extends unknown ? StringeredNumber : NonNullable<StringeredNumber> | T_23 : never : never;
+    };
+    color: Omit<Omit<{
+        type: import("vue").PropType<GColor>;
+        default: GColor;
+    }, "type" | "default"> & {
+        type: import("vue").PropType<GColor>;
+        default: GColor;
+    }, "type" | "default"> & {
+        type: import("vue").PropType<Defaults["color"] extends infer T_24 ? T_24 extends Defaults["color"] ? T_24 extends unknown ? GColor : GColor | T_24 : never : never>;
+        default: Defaults["color"] extends infer T_25 ? T_25 extends Defaults["color"] ? T_25 extends unknown ? GColor : NonNullable<GColor> | T_25 : never : never;
+    };
+    materialKind: Omit<Omit<Omit<{
+        type: import("vue").PropType<import("./gradientMaterial").GradientMaterialKind>;
+        default: string;
+    }, "type" | "default"> & {
+        type: import("vue").PropType<import("./gradientMaterial").GradientMaterialKind>;
+        default: import("./gradientMaterial").GradientMaterialKind;
+    }, "type" | "default"> & {
+        type: import("vue").PropType<import("./gradientMaterial").GradientMaterialKind>;
+        default: import("./gradientMaterial").GradientMaterialKind;
+    }, "type" | "default"> & {
+        type: import("vue").PropType<Defaults["materialKind"] extends infer T_26 ? T_26 extends Defaults["materialKind"] ? T_26 extends unknown ? import("./gradientMaterial").GradientMaterialKind : import("./gradientMaterial").GradientMaterialKind | T_26 : never : never>;
+        default: Defaults["materialKind"] extends infer T_27 ? T_27 extends Defaults["materialKind"] ? T_27 extends unknown ? import("./gradientMaterial").GradientMaterialKind : NonNullable<import("./gradientMaterial").GradientMaterialKind> | T_27 : never : never;
+    };
+    gradientRecipe: Omit<Omit<{
+        type: import("vue").PropType<GradientTokenRecipe>;
+        default: GradientTokenRecipe;
+    }, "type" | "default"> & {
+        type: import("vue").PropType<GradientTokenRecipe>;
+        default: GradientTokenRecipe;
+    }, "type" | "default"> & {
+        type: import("vue").PropType<Defaults["gradientRecipe"] extends infer T_28 ? T_28 extends Defaults["gradientRecipe"] ? T_28 extends unknown ? GradientTokenRecipe : GradientTokenRecipe | T_28 : never : never>;
+        default: Defaults["gradientRecipe"] extends infer T_29 ? T_29 extends Defaults["gradientRecipe"] ? T_29 extends unknown ? GradientTokenRecipe : NonNullable<GradientTokenRecipe> | T_29 : never : never;
+    };
+    placement: Omit<Omit<Omit<Omit<{
+        type: import("vue").PropType<Placement>;
+        default: string;
+    }, "type" | "default"> & {
+        type: import("vue").PropType<Placement>;
+        default: Placement;
+    }, "type" | "default"> & {
+        type: import("vue").PropType<Placement>;
+        default: Placement;
+    }, "type" | "default"> & {
+        type: import("vue").PropType<Placement>;
+        default: Placement;
+    }, "type" | "default"> & {
+        type: import("vue").PropType<Defaults["placement"] extends infer T_30 ? T_30 extends Defaults["placement"] ? T_30 extends unknown ? Placement : Placement | T_30 : never : never>;
+        default: Defaults["placement"] extends infer T_31 ? T_31 extends Defaults["placement"] ? T_31 extends unknown ? Placement : NonNullable<Placement> | T_31 : never : never;
+    };
+    rounded: Omit<Omit<Omit<{
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    }, "type" | "default"> & {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    }, "type" | "default"> & {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    }, "type" | "default"> & {
+        type: import("vue").PropType<Defaults["rounded"] extends infer T_32 ? T_32 extends Defaults["rounded"] ? T_32 extends unknown ? boolean : boolean | T_32 : never : never>;
+        default: Defaults["rounded"] extends infer T_33 ? T_33 extends Defaults["rounded"] ? T_33 extends unknown ? boolean : boolean | T_33 : never : never;
+    };
+    variant: Omit<Omit<Omit<Omit<{
+        type: import("vue").PropType<import("./variant").GVariant>;
+        default: string;
+    }, "type" | "default"> & {
+        type: import("vue").PropType<import("./variant").GVariant>;
+        default: import("./variant").GVariant;
+    }, "type" | "default"> & {
+        type: import("vue").PropType<import("./variant").GVariant>;
+        default: import("./variant").GVariant;
+    }, "type" | "default"> & {
+        type: import("vue").PropType<import("./variant").GVariant>;
+        default: import("./variant").GVariant;
+    }, "type" | "default"> & {
+        type: import("vue").PropType<Defaults["variant"] extends infer T_34 ? T_34 extends Defaults["variant"] ? T_34 extends unknown ? import("./variant").GVariant : import("./variant").GVariant | T_34 : never : never>;
+        default: Defaults["variant"] extends infer T_35 ? T_35 extends Defaults["variant"] ? T_35 extends unknown ? import("./variant").GVariant : NonNullable<import("./variant").GVariant> | T_35 : never : never;
+    };
+    backdropBlur: Omit<Omit<{
+        type: import("vue").PropType<StringeredNumber>;
+        default: number;
+    }, "type" | "default"> & {
+        type: import("vue").PropType<StringeredNumber>;
+        default: StringeredNumber;
+    }, "type" | "default"> & {
+        type: import("vue").PropType<Defaults["backdropBlur"] extends infer T_36 ? T_36 extends Defaults["backdropBlur"] ? T_36 extends unknown ? StringeredNumber : StringeredNumber | T_36 : never : never>;
+        default: Defaults["backdropBlur"] extends infer T_37 ? T_37 extends Defaults["backdropBlur"] ? T_37 extends unknown ? StringeredNumber : NonNullable<StringeredNumber> | T_37 : never : never;
+    };
+    padding: Omit<Omit<{
+        type: import("vue").PropType<StringeredNumber>;
+        default: number;
+    }, "type" | "default"> & {
+        type: import("vue").PropType<StringeredNumber>;
+        default: StringeredNumber;
+    }, "type" | "default"> & {
+        type: import("vue").PropType<Defaults["padding"] extends infer T_38 ? T_38 extends Defaults["padding"] ? T_38 extends unknown ? StringeredNumber : StringeredNumber | T_38 : never : never>;
+        default: Defaults["padding"] extends infer T_39 ? T_39 extends Defaults["padding"] ? T_39 extends unknown ? StringeredNumber : NonNullable<StringeredNumber> | T_39 : never : never;
+    };
+    dropShadow: Omit<{
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    }, "type" | "default"> & {
+        type: import("vue").PropType<Defaults["dropShadow"] extends infer T_40 ? T_40 extends Defaults["dropShadow"] ? T_40 extends unknown ? boolean : boolean | T_40 : never : never>;
+        default: Defaults["dropShadow"] extends infer T_41 ? T_41 extends Defaults["dropShadow"] ? T_41 extends unknown ? boolean : boolean | T_41 : never : never;
+    };
+    morph: Omit<{
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    }, "type" | "default"> & {
+        type: import("vue").PropType<Defaults["morph"] extends infer T_42 ? T_42 extends Defaults["morph"] ? T_42 extends unknown ? boolean : boolean | T_42 : never : never>;
+        default: Defaults["morph"] extends infer T_43 ? T_43 extends Defaults["morph"] ? T_43 extends unknown ? boolean : boolean | T_43 : never : never;
+    };
+    animationOptions: Omit<{
+        type: import("vue").PropType<GradientAnimationOptions>;
+        default: GradientAnimationOptions;
+    }, "type" | "default"> & {
+        type: import("vue").PropType<Defaults["animationOptions"] extends infer T_44 ? T_44 extends Defaults["animationOptions"] ? T_44 extends unknown ? GradientAnimationOptions : GradientAnimationOptions | T_44 : never : never>;
+        default: Defaults["animationOptions"] extends infer T_45 ? T_45 extends Defaults["animationOptions"] ? T_45 extends unknown ? GradientAnimationOptions : GradientAnimationOptions | T_45 : never : never;
+    };
+    shadowOptions: Omit<{
+        type: import("vue").PropType<GradientShadowOptions>;
+        default: GradientShadowOptions;
+    }, "type" | "default"> & {
+        type: import("vue").PropType<Defaults["shadowOptions"] extends infer T_46 ? T_46 extends Defaults["shadowOptions"] ? T_46 extends unknown ? GradientShadowOptions : GradientShadowOptions | T_46 : never : never>;
+        default: Defaults["shadowOptions"] extends infer T_47 ? T_47 extends Defaults["shadowOptions"] ? T_47 extends unknown ? GradientShadowOptions : GradientShadowOptions | T_47 : never : never;
+    };
+    dropShadowOptions: Omit<{
+        type: import("vue").PropType<GradientShadowOptions>;
+        default: GradientShadowOptions;
+    }, "type" | "default"> & {
+        type: import("vue").PropType<Defaults["dropShadowOptions"] extends infer T_48 ? T_48 extends Defaults["dropShadowOptions"] ? T_48 extends unknown ? GradientShadowOptions : GradientShadowOptions | T_48 : never : never>;
+        default: Defaults["dropShadowOptions"] extends infer T_49 ? T_49 extends Defaults["dropShadowOptions"] ? T_49 extends unknown ? GradientShadowOptions : GradientShadowOptions | T_49 : never : never;
+    };
+    morphOptions: Omit<{
+        type: import("vue").PropType<GradientMorphOptions>;
+        default: GradientMorphOptions;
+    }, "type" | "default"> & {
+        type: import("vue").PropType<Defaults["morphOptions"] extends infer T_50 ? T_50 extends Defaults["morphOptions"] ? T_50 extends unknown ? GradientMorphOptions : GradientMorphOptions | T_50 : never : never>;
+        default: Defaults["morphOptions"] extends infer T_51 ? T_51 extends Defaults["morphOptions"] ? T_51 extends unknown ? GradientMorphOptions : GradientMorphOptions | T_51 : never : never;
+    };
+};
+export declare const useMaterialSurface: (props: MaterialSurfaceProps, baseClass: string, options?: Pick<UseMaterialOptions, "kind">) => {
+    resolvedColor: import("vue").ComputedRef<"red" | "main" | "unset" | "source" | "pink" | "purple" | "indigo" | "blue" | "cyan" | "teal" | "green" | "lime" | "yellow" | "amber" | "orange" | "brown" | "grey" | "deep-purple" | "light-blue" | "light-green" | "deep-orange" | "blue-grey" | "primary" | "error" | "warning" | "success" | "surface" | "on-surface" | "red-50" | "red-100" | "red-200" | "red-300" | "red-400" | "red-500" | "red-600" | "red-700" | "red-800" | "red-900" | "source-50" | "source-100" | "source-200" | "source-300" | "source-400" | "source-500" | "source-600" | "source-700" | "source-800" | "source-900" | "pink-50" | "pink-100" | "pink-200" | "pink-300" | "pink-400" | "pink-500" | "pink-600" | "pink-700" | "pink-800" | "pink-900" | "purple-50" | "purple-100" | "purple-200" | "purple-300" | "purple-400" | "purple-500" | "purple-600" | "purple-700" | "purple-800" | "purple-900" | "indigo-50" | "indigo-100" | "indigo-200" | "indigo-300" | "indigo-400" | "indigo-500" | "indigo-600" | "indigo-700" | "indigo-800" | "indigo-900" | "blue-50" | "blue-100" | "blue-200" | "blue-300" | "blue-400" | "blue-500" | "blue-600" | "blue-700" | "blue-800" | "blue-900" | "cyan-50" | "cyan-100" | "cyan-200" | "cyan-300" | "cyan-400" | "cyan-500" | "cyan-600" | "cyan-700" | "cyan-800" | "cyan-900" | "teal-50" | "teal-100" | "teal-200" | "teal-300" | "teal-400" | "teal-500" | "teal-600" | "teal-700" | "teal-800" | "teal-900" | "green-50" | "green-100" | "green-200" | "green-300" | "green-400" | "green-500" | "green-600" | "green-700" | "green-800" | "green-900" | "lime-50" | "lime-100" | "lime-200" | "lime-300" | "lime-400" | "lime-500" | "lime-600" | "lime-700" | "lime-800" | "lime-900" | "yellow-50" | "yellow-100" | "yellow-200" | "yellow-300" | "yellow-400" | "yellow-500" | "yellow-600" | "yellow-700" | "yellow-800" | "yellow-900" | "amber-50" | "amber-100" | "amber-200" | "amber-300" | "amber-400" | "amber-500" | "amber-600" | "amber-700" | "amber-800" | "amber-900" | "orange-50" | "orange-100" | "orange-200" | "orange-300" | "orange-400" | "orange-500" | "orange-600" | "orange-700" | "orange-800" | "orange-900" | "brown-50" | "brown-100" | "brown-200" | "brown-300" | "brown-400" | "brown-500" | "brown-600" | "brown-700" | "brown-800" | "brown-900" | "grey-50" | "grey-100" | "grey-200" | "grey-300" | "grey-400" | "grey-500" | "grey-600" | "grey-700" | "grey-800" | "grey-900" | "deep-purple-50" | "deep-purple-100" | "deep-purple-200" | "deep-purple-300" | "deep-purple-400" | "deep-purple-500" | "deep-purple-600" | "deep-purple-700" | "deep-purple-800" | "deep-purple-900" | "light-blue-50" | "light-blue-100" | "light-blue-200" | "light-blue-300" | "light-blue-400" | "light-blue-500" | "light-blue-600" | "light-blue-700" | "light-blue-800" | "light-blue-900" | "light-green-50" | "light-green-100" | "light-green-200" | "light-green-300" | "light-green-400" | "light-green-500" | "light-green-600" | "light-green-700" | "light-green-800" | "light-green-900" | "deep-orange-50" | "deep-orange-100" | "deep-orange-200" | "deep-orange-300" | "deep-orange-400" | "deep-orange-500" | "deep-orange-600" | "deep-orange-700" | "deep-orange-800" | "deep-orange-900" | "blue-grey-50" | "blue-grey-100" | "blue-grey-200" | "blue-grey-300" | "blue-grey-400" | "blue-grey-500" | "blue-grey-600" | "blue-grey-700" | "blue-grey-800" | "blue-grey-900" | "transparent" | "currentColor" | "currentcolor" | "inherit" | "initial" | "revert" | "black" | "white" | `#${string}` | `rgb(${string})` | `rgba(${string})` | `hsl(${string})` | `hsla(${string})` | `hwb(${string})` | `lab(${string})` | `lch(${string})` | `oklab(${string})` | `oklch(${string})` | `color(${string})` | `var(${string})` | `${string}-gradient(${string})` | undefined>;
+    resolvedState: import("vue").ComputedRef<import("./gradient").GGradienStates | undefined>;
+    materialFrameProps: import("vue").ComputedRef<{
+        animateGlow: boolean | undefined;
+        borderRadius: StringeredNumber | undefined;
+        borderWidth: StringeredNumber;
+        color: "red" | "main" | "unset" | "source" | "pink" | "purple" | "indigo" | "blue" | "cyan" | "teal" | "green" | "lime" | "yellow" | "amber" | "orange" | "brown" | "grey" | "deep-purple" | "light-blue" | "light-green" | "deep-orange" | "blue-grey" | "primary" | "error" | "warning" | "success" | "surface" | "on-surface" | "red-50" | "red-100" | "red-200" | "red-300" | "red-400" | "red-500" | "red-600" | "red-700" | "red-800" | "red-900" | "source-50" | "source-100" | "source-200" | "source-300" | "source-400" | "source-500" | "source-600" | "source-700" | "source-800" | "source-900" | "pink-50" | "pink-100" | "pink-200" | "pink-300" | "pink-400" | "pink-500" | "pink-600" | "pink-700" | "pink-800" | "pink-900" | "purple-50" | "purple-100" | "purple-200" | "purple-300" | "purple-400" | "purple-500" | "purple-600" | "purple-700" | "purple-800" | "purple-900" | "indigo-50" | "indigo-100" | "indigo-200" | "indigo-300" | "indigo-400" | "indigo-500" | "indigo-600" | "indigo-700" | "indigo-800" | "indigo-900" | "blue-50" | "blue-100" | "blue-200" | "blue-300" | "blue-400" | "blue-500" | "blue-600" | "blue-700" | "blue-800" | "blue-900" | "cyan-50" | "cyan-100" | "cyan-200" | "cyan-300" | "cyan-400" | "cyan-500" | "cyan-600" | "cyan-700" | "cyan-800" | "cyan-900" | "teal-50" | "teal-100" | "teal-200" | "teal-300" | "teal-400" | "teal-500" | "teal-600" | "teal-700" | "teal-800" | "teal-900" | "green-50" | "green-100" | "green-200" | "green-300" | "green-400" | "green-500" | "green-600" | "green-700" | "green-800" | "green-900" | "lime-50" | "lime-100" | "lime-200" | "lime-300" | "lime-400" | "lime-500" | "lime-600" | "lime-700" | "lime-800" | "lime-900" | "yellow-50" | "yellow-100" | "yellow-200" | "yellow-300" | "yellow-400" | "yellow-500" | "yellow-600" | "yellow-700" | "yellow-800" | "yellow-900" | "amber-50" | "amber-100" | "amber-200" | "amber-300" | "amber-400" | "amber-500" | "amber-600" | "amber-700" | "amber-800" | "amber-900" | "orange-50" | "orange-100" | "orange-200" | "orange-300" | "orange-400" | "orange-500" | "orange-600" | "orange-700" | "orange-800" | "orange-900" | "brown-50" | "brown-100" | "brown-200" | "brown-300" | "brown-400" | "brown-500" | "brown-600" | "brown-700" | "brown-800" | "brown-900" | "grey-50" | "grey-100" | "grey-200" | "grey-300" | "grey-400" | "grey-500" | "grey-600" | "grey-700" | "grey-800" | "grey-900" | "deep-purple-50" | "deep-purple-100" | "deep-purple-200" | "deep-purple-300" | "deep-purple-400" | "deep-purple-500" | "deep-purple-600" | "deep-purple-700" | "deep-purple-800" | "deep-purple-900" | "light-blue-50" | "light-blue-100" | "light-blue-200" | "light-blue-300" | "light-blue-400" | "light-blue-500" | "light-blue-600" | "light-blue-700" | "light-blue-800" | "light-blue-900" | "light-green-50" | "light-green-100" | "light-green-200" | "light-green-300" | "light-green-400" | "light-green-500" | "light-green-600" | "light-green-700" | "light-green-800" | "light-green-900" | "deep-orange-50" | "deep-orange-100" | "deep-orange-200" | "deep-orange-300" | "deep-orange-400" | "deep-orange-500" | "deep-orange-600" | "deep-orange-700" | "deep-orange-800" | "deep-orange-900" | "blue-grey-50" | "blue-grey-100" | "blue-grey-200" | "blue-grey-300" | "blue-grey-400" | "blue-grey-500" | "blue-grey-600" | "blue-grey-700" | "blue-grey-800" | "blue-grey-900" | "transparent" | "currentColor" | "currentcolor" | "inherit" | "initial" | "revert" | "black" | "white" | `#${string}` | `rgb(${string})` | `rgba(${string})` | `hsl(${string})` | `hsla(${string})` | `hwb(${string})` | `lab(${string})` | `lch(${string})` | `oklab(${string})` | `oklch(${string})` | `color(${string})` | `var(${string})` | `${string}-gradient(${string})` | undefined;
+        glow: GGlow | undefined;
+        gradientRecipe: GradientTokenRecipe | undefined;
+        inheritWidth: boolean;
+        interactive: boolean;
+        placement: Placement | undefined;
+        rounded: boolean;
+        shadow: boolean;
+        state: import("./gradient").GGradienStates | undefined;
+        surfaceFill: "transparent";
+    }>;
+    surfaceStyles: import("vue").ComputedRef<CSSProperties>;
+    surfaceContentClasses: import("vue").ComputedRef<string[]>;
+    surfaceTextureClasses: import("vue").ComputedRef<string[]>;
+    surfaceOverlayClasses: import("vue").ComputedRef<string[]>;
+    surfaceUnderlayClasses: import("vue").ComputedRef<string[]>;
+    surfaceMaterialMorphBlobClasses: import("vue").ComputedRef<string[]>;
+    surfaceMaterialMorphClasses: import("vue").ComputedRef<string[]>;
+    getMorphBlobStyle: (blob: import("@gradient-ui/gradient-engine").GradientMorphBlob) => CSSProperties;
+    gradientMaterial: import("vue").ComputedRef<import("@gradient-ui/gradient-engine").CreatedGradientMaterial | null>;
+    materialClasses: import("vue").ComputedRef<string[]>;
+    materialContentClasses: import("vue").ComputedRef<string[]>;
+    materialGlowBaseClasses: import("vue").ComputedRef<string[]>;
+    materialGlowClasses: import("vue").ComputedRef<string[]>;
+    materialGlowMorphBlobClasses: import("vue").ComputedRef<string[]>;
+    materialGlowMorphClasses: import("vue").ComputedRef<string[]>;
+    materialMorphBlobClasses: import("vue").ComputedRef<string[]>;
+    materialMorphClasses: import("vue").ComputedRef<string[]>;
+    materialStyles: import("vue").ComputedRef<CSSProperties>;
+    morphBlobs: import("vue").ComputedRef<import("@gradient-ui/gradient-engine").GradientMorphBlob[]>;
+    morphEnabled: import("vue").ComputedRef<boolean>;
+};

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

@@ -1,59 +1,96 @@
 import type { GGradienStates } from '@/components/ui/GGradient/types';
 import { type ColorProps } from '@/use/color';
 import { type GVariant } from './variant';
-export interface SurfaceProps extends ColorProps {
+import type { PropType } from 'vue';
+import { type GlassProps } from './glass';
+export type GSurfaceTexture = 'none' | 'noise';
+export interface SurfaceProps extends ColorProps, GlassProps {
     variant: GVariant;
     disabled: boolean;
     rounded?: boolean;
     state?: GGradienStates;
+    texture?: GSurfaceTexture;
 }
+export declare const makeSurfaceTextureProps: <Defaults extends {
+    texture?: unknown;
+} = object>(defaults?: Defaults | undefined) => {
+    texture: Omit<{
+        type: PropType<GSurfaceTexture>;
+        default: string;
+    }, "type" | "default"> & {
+        type: PropType<Defaults["texture"] extends infer T ? T extends Defaults["texture"] ? T extends unknown ? GSurfaceTexture : GSurfaceTexture | T : never : never>;
+        default: Defaults["texture"] extends infer T_1 ? T_1 extends Defaults["texture"] ? T_1 extends unknown ? GSurfaceTexture : T_1 | NonNullable<GSurfaceTexture> : never : never;
+    };
+};
 export declare const makeSurfaceProps: <Defaults extends {
+    texture?: unknown;
+    backdropBlur?: unknown;
     state?: unknown;
     rounded?: unknown;
     disabled?: unknown;
     color?: unknown;
     variant?: unknown;
 } = object>(defaults?: Defaults | undefined) => {
+    texture: Omit<Omit<{
+        type: PropType<GSurfaceTexture>;
+        default: string;
+    }, "type" | "default"> & {
+        type: PropType<GSurfaceTexture>;
+        default: GSurfaceTexture;
+    }, "type" | "default"> & {
+        type: PropType<Defaults["texture"] extends infer T ? T extends Defaults["texture"] ? T extends unknown ? GSurfaceTexture : GSurfaceTexture | T : never : never>;
+        default: Defaults["texture"] extends infer T_1 ? T_1 extends Defaults["texture"] ? T_1 extends unknown ? GSurfaceTexture : NonNullable<GSurfaceTexture> | T_1 : never : never;
+    };
+    backdropBlur: Omit<Omit<{
+        type: PropType<import("../types/CommonTypes").StringeredNumber>;
+        default: number;
+    }, "type" | "default"> & {
+        type: PropType<import("../types/CommonTypes").StringeredNumber>;
+        default: import("../types/CommonTypes").StringeredNumber;
+    }, "type" | "default"> & {
+        type: PropType<Defaults["backdropBlur"] extends infer T_2 ? T_2 extends Defaults["backdropBlur"] ? T_2 extends unknown ? import("../types/CommonTypes").StringeredNumber : import("../types/CommonTypes").StringeredNumber | T_2 : never : never>;
+        default: Defaults["backdropBlur"] extends infer T_3 ? T_3 extends Defaults["backdropBlur"] ? T_3 extends unknown ? import("../types/CommonTypes").StringeredNumber : NonNullable<import("../types/CommonTypes").StringeredNumber> | T_3 : never : never;
+    };
     state: Omit<{
-        type: import("vue").PropType<GGradienStates>;
+        type: PropType<GGradienStates>;
         default: GGradienStates;
     }, "type" | "default"> & {
-        type: import("vue").PropType<Defaults["state"] extends infer T ? T extends Defaults["state"] ? T extends unknown ? GGradienStates : GGradienStates | T : never : never>;
-        default: Defaults["state"] extends infer T_1 ? T_1 extends Defaults["state"] ? T_1 extends unknown ? GGradienStates : NonNullable<GGradienStates> | T_1 : never : never;
+        type: PropType<Defaults["state"] extends infer T_4 ? T_4 extends Defaults["state"] ? T_4 extends unknown ? GGradienStates : GGradienStates | T_4 : never : never>;
+        default: Defaults["state"] extends infer T_5 ? T_5 extends Defaults["state"] ? T_5 extends unknown ? GGradienStates : NonNullable<GGradienStates> | T_5 : never : never;
     };
     rounded: Omit<{
-        type: import("vue").PropType<boolean>;
+        type: PropType<boolean>;
         default: boolean;
     }, "type" | "default"> & {
-        type: import("vue").PropType<Defaults["rounded"] extends infer T_2 ? T_2 extends Defaults["rounded"] ? T_2 extends unknown ? boolean : boolean | T_2 : never : never>;
-        default: Defaults["rounded"] extends infer T_3 ? T_3 extends Defaults["rounded"] ? T_3 extends unknown ? boolean : boolean | T_3 : never : never;
+        type: PropType<Defaults["rounded"] extends infer T_6 ? T_6 extends Defaults["rounded"] ? T_6 extends unknown ? boolean : boolean | T_6 : never : never>;
+        default: Defaults["rounded"] extends infer T_7 ? T_7 extends Defaults["rounded"] ? T_7 extends unknown ? boolean : boolean | T_7 : never : never;
     };
     disabled: Omit<{
-        type: import("vue").PropType<boolean>;
+        type: PropType<boolean>;
         default: boolean;
     }, "type" | "default"> & {
-        type: import("vue").PropType<Defaults["disabled"] extends infer T_4 ? T_4 extends Defaults["disabled"] ? T_4 extends unknown ? boolean : boolean | T_4 : never : never>;
-        default: Defaults["disabled"] extends infer T_5 ? T_5 extends Defaults["disabled"] ? T_5 extends unknown ? boolean : boolean | T_5 : never : never;
+        type: PropType<Defaults["disabled"] extends infer T_8 ? T_8 extends Defaults["disabled"] ? T_8 extends unknown ? boolean : boolean | T_8 : never : never>;
+        default: Defaults["disabled"] extends infer T_9 ? T_9 extends Defaults["disabled"] ? T_9 extends unknown ? boolean : boolean | T_9 : never : never;
     };
     color: Omit<Omit<{
-        type: import("vue").PropType<import("@/use/color").GColor>;
+        type: PropType<import("@/use/color").GColor>;
         default: string;
     }, "type" | "default"> & {
-        type: import("vue").PropType<string>;
-        default: string;
+        type: PropType<import("@/use/color").GColor>;
+        default: import("@/use/color").GColor;
     }, "type" | "default"> & {
-        type: import("vue").PropType<Defaults["color"] extends infer T_6 ? T_6 extends Defaults["color"] ? T_6 extends unknown ? string : string | T_6 : never : never>;
-        default: Defaults["color"] extends infer T_7 ? T_7 extends Defaults["color"] ? T_7 extends unknown ? string : string | T_7 : never : never;
+        type: PropType<Defaults["color"] extends infer T_10 ? T_10 extends Defaults["color"] ? T_10 extends unknown ? import("@/use/color").GColor : import("@/use/color").GColor | T_10 : never : never>;
+        default: Defaults["color"] extends infer T_11 ? T_11 extends Defaults["color"] ? T_11 extends unknown ? import("@/use/color").GColor : NonNullable<import("@/use/color").GColor> | T_11 : never : never;
     };
     variant: Omit<Omit<{
-        type: import("vue").PropType<GVariant>;
+        type: PropType<GVariant>;
         default: string;
     }, "type" | "default"> & {
-        type: import("vue").PropType<GVariant>;
+        type: PropType<GVariant>;
         default: GVariant;
     }, "type" | "default"> & {
-        type: import("vue").PropType<Defaults["variant"] extends infer T_8 ? T_8 extends Defaults["variant"] ? T_8 extends unknown ? GVariant : GVariant | T_8 : never : never>;
-        default: Defaults["variant"] extends infer T_9 ? T_9 extends Defaults["variant"] ? T_9 extends unknown ? GVariant : NonNullable<GVariant> | T_9 : never : never;
+        type: PropType<Defaults["variant"] extends infer T_12 ? T_12 extends Defaults["variant"] ? T_12 extends unknown ? GVariant : GVariant | T_12 : never : never>;
+        default: Defaults["variant"] extends infer T_13 ? T_13 extends Defaults["variant"] ? T_13 extends unknown ? GVariant : NonNullable<GVariant> | T_13 : never : never;
     };
 };
 export declare function useSurface(props: SurfaceProps, baseClass: string): {
@@ -61,6 +98,7 @@ export declare function useSurface(props: SurfaceProps, baseClass: string): {
     disabledClass: import("vue").ComputedRef<string>;
     roundedClass: import("vue").ComputedRef<string>;
     stateClass: import("vue").ComputedRef<string>;
+    textureClass: import("vue").ComputedRef<string>;
     surfaceStyles: import("vue").ComputedRef<import("vue").CSSProperties>;
     surfaceClasses: import("vue").ComputedRef<string[]>;
 };
@@ -70,11 +108,21 @@ export declare function useSurfaceUnderlay(baseClass: string): {
 export declare function useSurfaceOverlay(baseClass: string): {
     surfaceOverlayClasses: import("vue").ComputedRef<string[]>;
 };
+export declare function useSurfaceTexture(baseClass: string): {
+    surfaceTextureClasses: import("vue").ComputedRef<string[]>;
+};
+export declare function useSurfaceMaterial(baseClass: string): {
+    surfaceMaterialMorphBlobClasses: import("vue").ComputedRef<string[]>;
+    surfaceMaterialMorphClasses: import("vue").ComputedRef<string[]>;
+};
 export declare function useSurfaceContent(baseClass: string): {
     surfaceContentClasses: import("vue").ComputedRef<string[]>;
 };
 export declare function useSurfaceLayers(baseClass: string): {
     surfaceContentClasses: import("vue").ComputedRef<string[]>;
+    surfaceTextureClasses: import("vue").ComputedRef<string[]>;
     surfaceOverlayClasses: import("vue").ComputedRef<string[]>;
     surfaceUnderlayClasses: import("vue").ComputedRef<string[]>;
+    surfaceMaterialMorphBlobClasses: import("vue").ComputedRef<string[]>;
+    surfaceMaterialMorphClasses: import("vue").ComputedRef<string[]>;
 };

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

@@ -9,7 +9,7 @@ export interface SurfaceColorProps {
     activeState?: MaybeRefOrGetter<GGradienStates | undefined>;
 }
 export declare function useSurfaceColor(props: SurfaceColorProps): {
-    resolvedColor: import("vue").ComputedRef<string | undefined>;
+    resolvedColor: import("vue").ComputedRef<"red" | "main" | "unset" | "source" | "pink" | "purple" | "indigo" | "blue" | "cyan" | "teal" | "green" | "lime" | "yellow" | "amber" | "orange" | "brown" | "grey" | "deep-purple" | "light-blue" | "light-green" | "deep-orange" | "blue-grey" | "primary" | "error" | "warning" | "success" | "surface" | "on-surface" | "red-50" | "red-100" | "red-200" | "red-300" | "red-400" | "red-500" | "red-600" | "red-700" | "red-800" | "red-900" | "source-50" | "source-100" | "source-200" | "source-300" | "source-400" | "source-500" | "source-600" | "source-700" | "source-800" | "source-900" | "pink-50" | "pink-100" | "pink-200" | "pink-300" | "pink-400" | "pink-500" | "pink-600" | "pink-700" | "pink-800" | "pink-900" | "purple-50" | "purple-100" | "purple-200" | "purple-300" | "purple-400" | "purple-500" | "purple-600" | "purple-700" | "purple-800" | "purple-900" | "indigo-50" | "indigo-100" | "indigo-200" | "indigo-300" | "indigo-400" | "indigo-500" | "indigo-600" | "indigo-700" | "indigo-800" | "indigo-900" | "blue-50" | "blue-100" | "blue-200" | "blue-300" | "blue-400" | "blue-500" | "blue-600" | "blue-700" | "blue-800" | "blue-900" | "cyan-50" | "cyan-100" | "cyan-200" | "cyan-300" | "cyan-400" | "cyan-500" | "cyan-600" | "cyan-700" | "cyan-800" | "cyan-900" | "teal-50" | "teal-100" | "teal-200" | "teal-300" | "teal-400" | "teal-500" | "teal-600" | "teal-700" | "teal-800" | "teal-900" | "green-50" | "green-100" | "green-200" | "green-300" | "green-400" | "green-500" | "green-600" | "green-700" | "green-800" | "green-900" | "lime-50" | "lime-100" | "lime-200" | "lime-300" | "lime-400" | "lime-500" | "lime-600" | "lime-700" | "lime-800" | "lime-900" | "yellow-50" | "yellow-100" | "yellow-200" | "yellow-300" | "yellow-400" | "yellow-500" | "yellow-600" | "yellow-700" | "yellow-800" | "yellow-900" | "amber-50" | "amber-100" | "amber-200" | "amber-300" | "amber-400" | "amber-500" | "amber-600" | "amber-700" | "amber-800" | "amber-900" | "orange-50" | "orange-100" | "orange-200" | "orange-300" | "orange-400" | "orange-500" | "orange-600" | "orange-700" | "orange-800" | "orange-900" | "brown-50" | "brown-100" | "brown-200" | "brown-300" | "brown-400" | "brown-500" | "brown-600" | "brown-700" | "brown-800" | "brown-900" | "grey-50" | "grey-100" | "grey-200" | "grey-300" | "grey-400" | "grey-500" | "grey-600" | "grey-700" | "grey-800" | "grey-900" | "deep-purple-50" | "deep-purple-100" | "deep-purple-200" | "deep-purple-300" | "deep-purple-400" | "deep-purple-500" | "deep-purple-600" | "deep-purple-700" | "deep-purple-800" | "deep-purple-900" | "light-blue-50" | "light-blue-100" | "light-blue-200" | "light-blue-300" | "light-blue-400" | "light-blue-500" | "light-blue-600" | "light-blue-700" | "light-blue-800" | "light-blue-900" | "light-green-50" | "light-green-100" | "light-green-200" | "light-green-300" | "light-green-400" | "light-green-500" | "light-green-600" | "light-green-700" | "light-green-800" | "light-green-900" | "deep-orange-50" | "deep-orange-100" | "deep-orange-200" | "deep-orange-300" | "deep-orange-400" | "deep-orange-500" | "deep-orange-600" | "deep-orange-700" | "deep-orange-800" | "deep-orange-900" | "blue-grey-50" | "blue-grey-100" | "blue-grey-200" | "blue-grey-300" | "blue-grey-400" | "blue-grey-500" | "blue-grey-600" | "blue-grey-700" | "blue-grey-800" | "blue-grey-900" | "transparent" | "currentColor" | "currentcolor" | "inherit" | "initial" | "revert" | "black" | "white" | `#${string}` | `rgb(${string})` | `rgba(${string})` | `hsl(${string})` | `hsla(${string})` | `hwb(${string})` | `lab(${string})` | `lch(${string})` | `oklab(${string})` | `oklch(${string})` | `color(${string})` | `var(${string})` | `${string}-gradient(${string})` | undefined>;
     resolvedState: import("vue").ComputedRef<GGradienStates | undefined>;
     resolvedGradient: import("vue").ComputedRef<string>;
     colorStyles: import("vue").ComputedRef<CSSProperties>;

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

@@ -0,0 +1,47 @@
+import { type ComputedRef } from 'vue';
+export interface TagNameProps {
+    tag?: string;
+    href?: string;
+    target?: string;
+    rel?: string;
+    disabled?: boolean;
+}
+export declare const makeTagNameProps: <Defaults extends {
+    tag?: unknown;
+    href?: unknown;
+    target?: unknown;
+    rel?: unknown;
+} = object>(defaults?: Defaults | undefined) => {
+    tag: {
+        type: import("vue").PropType<Defaults["tag"] extends infer T ? T extends Defaults["tag"] ? T extends unknown ? string : string | T : never : never>;
+        default: Defaults["tag"] extends infer T_1 ? T_1 extends Defaults["tag"] ? T_1 extends unknown ? string : string | T_1 : never : never;
+    };
+    href: {
+        type: import("vue").PropType<Defaults["href"] extends infer T_2 ? T_2 extends Defaults["href"] ? T_2 extends unknown ? string : string | T_2 : never : never>;
+        default: Defaults["href"] extends infer T_3 ? T_3 extends Defaults["href"] ? T_3 extends unknown ? string : string | T_3 : never : never;
+    };
+    target: {
+        type: import("vue").PropType<Defaults["target"] extends infer T_4 ? T_4 extends Defaults["target"] ? T_4 extends unknown ? string : string | T_4 : never : never>;
+        default: Defaults["target"] extends infer T_5 ? T_5 extends Defaults["target"] ? T_5 extends unknown ? string : string | T_5 : never : never;
+    };
+    rel: {
+        type: import("vue").PropType<Defaults["rel"] extends infer T_6 ? T_6 extends Defaults["rel"] ? T_6 extends unknown ? string : string | T_6 : never : never>;
+        default: Defaults["rel"] extends infer T_7 ? T_7 extends Defaults["rel"] ? T_7 extends unknown ? string : string | T_7 : never : never;
+    };
+};
+export declare function useAsLink(props: TagNameProps): {
+    isLink: ComputedRef<boolean>;
+    linkAttrs: ComputedRef<{
+        href: string | undefined;
+        target: string | undefined;
+        rel: string | undefined;
+    } | {
+        href?: undefined;
+        target?: undefined;
+        rel?: undefined;
+    }>;
+};
+export declare function useTagName(props: TagNameProps, fallbackTag: string): {
+    tagName: ComputedRef<string>;
+    tagAttrs: ComputedRef<Record<string, unknown>>;
+};