@bobbykim/manguito-theme 0.28.2 → 1.0.0

package/dist/core.d.ts

@@ -1,24 +1,26 @@
+import { ClassProp } from 'class-variance-authority/types';
 import { ComponentOptionsMixin } from 'vue';
 import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
 import { PublicProps } from 'vue';
 import { Ref } from 'vue';
 
-declare const __VLS_component: DefineComponent<__VLS_Props, {
-close: () => void;
+declare const __VLS_component: DefineComponent<    {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLDivElement>;
+
+declare const __VLS_component_10: DefineComponent<__VLS_Props_8, {
+headerClose: () => void;
 }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
-close: (event: Event) => any;
-}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{
-onClose?: ((event: Event) => any) | undefined;
+"toggle-drawer": (event: Event, open: boolean) => any;
+}, string, PublicProps, Readonly<__VLS_Props_8> & Readonly<{
+"onToggle-drawer"?: ((event: Event, open: boolean) => any) | undefined;
 }>, {
-color: ColorPalette;
-rounded: boolean;
-shadow: boolean;
-show: boolean;
-dismissible: boolean;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+bgColor: ColorPalette;
+drawerBtnColor: ColorPalette;
+showDrawerBorder: boolean;
+headerWidth: number;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLElement>;
 
-declare const __VLS_component_10: DefineComponent<__VLS_Props_9, {
+declare const __VLS_component_11: DefineComponent<__VLS_Props_9, {
 toggle: () => void;
 close: () => void;
 open: () => void;
@@ -31,18 +33,19 @@ onOpen?: ((visible: boolean) => any) | undefined;
 }>, {
 color: ColorPalette;
 visible: boolean;
-className: string | string[];
+customClass: string | string[];
+width: SizeOption;
 titleColor: ColorPalette;
-noBackdrop: boolean;
-noHeader: boolean;
+showBackdrop: boolean;
+showHeader: boolean;
 backdropColor: ColorPalette;
 placement: VerticalAlignment;
-modalWidth: SizeOption;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {
 modalRef: HTMLDivElement;
+dialogRef: HTMLDivElement;
 }, HTMLDivElement>;
 
-declare const __VLS_component_11: DefineComponent<__VLS_Props_10, {
+declare const __VLS_component_12: DefineComponent<__VLS_Props_10, {
 toggle: () => void;
 open: () => void;
 close: () => void;
@@ -55,20 +58,21 @@ onOpen?: ((visible: boolean) => any) | undefined;
 }>, {
 color: ColorPalette;
 visible: boolean;
-className: string | string[];
-width: string | number;
+customClass: string | string[];
+width: number;
 titleColor: ColorPalette;
-noBackdrop: boolean;
-noHeader: boolean;
+showBackdrop: boolean;
+showHeader: boolean;
 backdropColor: ColorPalette;
 placement: DirectionX;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {
 sidebarRef: HTMLDivElement;
+dialogRef: HTMLDivElement;
 headerRef: HTMLDivElement;
 footerRef: HTMLDivElement;
 }, HTMLDivElement>;
 
-declare const __VLS_component_12: DefineComponent<__VLS_Props_11, {
+declare const __VLS_component_13: DefineComponent<__VLS_Props_11, {
 update: (arg: number) => void;
 }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_11> & Readonly<{}>, {
 bodyClass: string | string[];
@@ -76,13 +80,27 @@ contentContainerClass: string | string[];
 btnContainerClass: string | string[];
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
-declare const __VLS_component_13: DefineComponent<__VLS_Props_12, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_12> & Readonly<{}>, {
+declare const __VLS_component_14: DefineComponent<__VLS_Props_12, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_12> & Readonly<{}>, {
 tabClass: string | string[];
 }, {}, {}, {}, string, ComponentProvideOptions, false, {
 slotRef: HTMLDivElement;
 }, HTMLDivElement>;
 
-declare const __VLS_component_2: DefineComponent<__VLS_Props_2, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_2> & Readonly<{}>, {
+declare const __VLS_component_2: DefineComponent<__VLS_Props, {
+close: () => void;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+close: (event: Event) => any;
+}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{
+onClose?: ((event: Event) => any) | undefined;
+}>, {
+color: ColorPalette;
+rounded: boolean;
+shadow: boolean;
+show: boolean;
+dismissible: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
+declare const __VLS_component_3: DefineComponent<__VLS_Props_2, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_2> & Readonly<{}>, {
 rounded: boolean;
 shadow: boolean;
 variant: ColorPalette;
@@ -98,7 +116,7 @@ titleSize: HeadingSize;
 cardClass: string | string[];
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
-declare const __VLS_component_3: DefineComponent<__VLS_Props_3, {
+declare const __VLS_component_4: DefineComponent<__VLS_Props_3, {
 numberOfSlides: Ref<number, number>;
 prev: () => void;
 next: () => void;
@@ -111,16 +129,16 @@ controllerBottomClass: string | string[];
 loop: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
-declare const __VLS_component_4: DefineComponent<__VLS_Props_4, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_4> & Readonly<{}>, {
+declare const __VLS_component_5: DefineComponent<__VLS_Props_4, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_4> & Readonly<{}>, {
 slideClass: string | string[];
 }, {}, {}, {}, string, ComponentProvideOptions, false, {
 slideRef: HTMLDivElement;
 }, HTMLDivElement>;
 
-declare const __VLS_component_5: DefineComponent<__VLS_Props_5, {
+declare const __VLS_component_6: DefineComponent<__VLS_Props_5, {
 toggle: () => void;
-close: () => void;
 open: () => void;
+close: () => void;
 }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 close: (visible: boolean) => any;
 open: (visible: boolean) => any;
@@ -129,12 +147,10 @@ onClose?: ((visible: boolean) => any) | undefined;
 onOpen?: ((visible: boolean) => any) | undefined;
 }>, {
 visible: boolean;
-className: string | string[];
-}, {}, {}, {}, string, ComponentProvideOptions, false, {
-collapseRef: HTMLDivElement;
-}, HTMLDivElement>;
+customClass: string | string[];
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
-declare const __VLS_component_6: DefineComponent<    {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+declare const __VLS_component_7: DefineComponent<    {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 toggle: (event: Event) => any;
 "click-outside": (event: Event) => any;
 }, string, PublicProps, Readonly<{}> & Readonly<{
@@ -144,13 +160,13 @@ onToggle?: ((event: Event) => any) | undefined;
 dropdownTarget: HTMLDivElement;
 }, HTMLDivElement>;
 
-declare const __VLS_component_7: DefineComponent<__VLS_Props_6, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_6> & Readonly<{}>, {
-className: string | string[];
+declare const __VLS_component_8: DefineComponent<__VLS_Props_6, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_6> & Readonly<{}>, {
+customClass: string | string[];
 }, {}, {}, {}, string, ComponentProvideOptions, false, {
 contentRef: HTMLDivElement;
 }, any>;
 
-declare const __VLS_component_8: DefineComponent<__VLS_Props_7, {
+declare const __VLS_component_9: DefineComponent<__VLS_Props_7, {
 headerClose: () => void;
 }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 "toggle-drawer": (event: Event, open: boolean) => any;
@@ -160,25 +176,12 @@ headerClose: () => void;
 bgColor: ColorPalette;
 mobileMenuBgColor: ColorPalette;
 drawerBtnColor: ColorPalette;
-drawerBtnBorder: boolean;
+showDrawerBorder: boolean;
 fadeInOnScroll: boolean;
 scrollDistance: number;
 sticky: HeaderStickyOptionType;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLElement>;
 
-declare const __VLS_component_9: DefineComponent<__VLS_Props_8, {
-headerClose: () => void;
-}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
-"toggle-drawer": (event: Event, open: boolean) => any;
-}, string, PublicProps, Readonly<__VLS_Props_8> & Readonly<{
-"onToggle-drawer"?: ((event: Event, open: boolean) => any) | undefined;
-}>, {
-bgColor: ColorPalette;
-drawerBtnColor: ColorPalette;
-drawerBtnBorder: boolean;
-headerWidth: number;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLElement>;
-
 declare type __VLS_Props = {
     color?: ColorPalette;
     rounded?: boolean;
@@ -190,14 +193,14 @@ declare type __VLS_Props = {
 declare type __VLS_Props_10 = {
     title?: string;
     titleColor?: ColorPalette;
-    className?: string | string[];
+    customClass?: string | string[];
     visible?: boolean;
-    noBackdrop?: boolean;
-    noHeader?: boolean;
+    showBackdrop?: boolean;
+    showHeader?: boolean;
     color?: ColorPalette;
     backdropColor?: ColorPalette;
     placement?: DirectionX;
-    width?: string | number;
+    width?: number;
 };
 
 declare type __VLS_Props_11 = {
@@ -248,20 +251,20 @@ declare type __VLS_Props_4 = {
 };
 
 declare type __VLS_Props_5 = {
-    accordion?: string;
-    className?: string | string[];
+    id?: string;
+    customClass?: string | string[];
     visible?: boolean;
 };
 
 declare type __VLS_Props_6 = {
-    className?: string | string[];
+    customClass?: string | string[];
 };
 
 declare type __VLS_Props_7 = {
     bgColor?: ColorPalette;
     mobileMenuBgColor?: ColorPalette;
     drawerBtnColor?: ColorPalette;
-    drawerBtnBorder?: boolean;
+    showDrawerBorder?: boolean;
     fadeInOnScroll?: boolean;
     scrollDistance?: number;
     sticky?: HeaderStickyOptionType;
@@ -270,35 +273,54 @@ declare type __VLS_Props_7 = {
 declare type __VLS_Props_8 = {
     bgColor?: ColorPalette;
     drawerBtnColor?: ColorPalette;
-    drawerBtnBorder?: boolean;
+    showDrawerBorder?: boolean;
     headerWidth?: number;
 };
 
 declare type __VLS_Props_9 = {
     title?: string;
     titleColor?: ColorPalette;
-    className?: string | string[];
+    customClass?: string | string[];
     visible?: boolean;
-    noBackdrop?: boolean;
-    noHeader?: boolean;
+    showBackdrop?: boolean;
+    showHeader?: boolean;
     color?: ColorPalette;
     backdropColor?: ColorPalette;
     placement?: VerticalAlignment;
-    modalWidth?: SizeOption;
+    width?: SizeOption;
 };
 
 declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+
+declare function __VLS_template_10(): {
     attrs: Partial<{}>;
     slots: Readonly<{
         default: any;
+        content: any;
+        'content-bottom': any;
+        'mobile-content'(props: {
+            headerClose: () => void;
+        }): any;
     }> & {
         default: any;
+        content: any;
+        'content-bottom': any;
+        'mobile-content'(props: {
+            headerClose: () => void;
+        }): any;
     };
     refs: {};
-    rootEl: any;
+    rootEl: HTMLElement;
 };
 
-declare function __VLS_template_10(): {
+declare function __VLS_template_11(): {
     attrs: Partial<{}>;
     slots: Readonly<{
         header(props: {
@@ -329,11 +351,12 @@ declare function __VLS_template_10(): {
     };
     refs: {
         modalRef: HTMLDivElement;
+        dialogRef: HTMLDivElement;
     };
     rootEl: HTMLDivElement;
 };
 
-declare function __VLS_template_11(): {
+declare function __VLS_template_12(): {
     attrs: Partial<{}>;
     slots: Readonly<{
         header(props: {
@@ -364,13 +387,14 @@ declare function __VLS_template_11(): {
     };
     refs: {
         sidebarRef: HTMLDivElement;
+        dialogRef: HTMLDivElement;
         headerRef: HTMLDivElement;
         footerRef: HTMLDivElement;
     };
     rootEl: HTMLDivElement;
 };
 
-declare function __VLS_template_12(): {
+declare function __VLS_template_13(): {
     attrs: Partial<{}>;
     slots: Readonly<{
         'tab-button'(props: {
@@ -389,7 +413,7 @@ declare function __VLS_template_12(): {
     rootEl: HTMLDivElement;
 };
 
-declare function __VLS_template_13(): {
+declare function __VLS_template_14(): {
     attrs: Partial<{}>;
     slots: {
         default?(_: {}): any;
@@ -401,6 +425,17 @@ declare function __VLS_template_13(): {
 };
 
 declare function __VLS_template_2(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        default: any;
+    }> & {
+        default: any;
+    };
+    refs: {};
+    rootEl: any;
+};
+
+declare function __VLS_template_3(): {
     attrs: Partial<{}>;
     slots: Readonly<{
         default: any;
@@ -417,7 +452,7 @@ declare function __VLS_template_2(): {
     rootEl: HTMLDivElement;
 };
 
-declare function __VLS_template_3(): {
+declare function __VLS_template_4(): {
     attrs: Partial<{}>;
     slots: Readonly<{
         content: any;
@@ -456,7 +491,7 @@ declare function __VLS_template_3(): {
     rootEl: HTMLDivElement;
 };
 
-declare function __VLS_template_4(): {
+declare function __VLS_template_5(): {
     attrs: Partial<{}>;
     slots: Readonly<{
         default: any;
@@ -469,20 +504,18 @@ declare function __VLS_template_4(): {
     rootEl: HTMLDivElement;
 };
 
-declare function __VLS_template_5(): {
+declare function __VLS_template_6(): {
     attrs: Partial<{}>;
     slots: Readonly<{
         default: any;
     }> & {
         default: any;
     };
-    refs: {
-        collapseRef: HTMLDivElement;
-    };
+    refs: {};
     rootEl: HTMLDivElement;
 };
 
-declare function __VLS_template_6(): {
+declare function __VLS_template_7(): {
     attrs: Partial<{}>;
     slots: Readonly<{
         default: any;
@@ -503,7 +536,7 @@ declare function __VLS_template_6(): {
     rootEl: HTMLDivElement;
 };
 
-declare function __VLS_template_7(): {
+declare function __VLS_template_8(): {
     attrs: Partial<{}>;
     slots: Readonly<{
         default(props: {
@@ -520,7 +553,7 @@ declare function __VLS_template_7(): {
     rootEl: any;
 };
 
-declare function __VLS_template_8(): {
+declare function __VLS_template_9(): {
     attrs: Partial<{}>;
     slots: Readonly<{
         content: any;
@@ -539,27 +572,6 @@ declare function __VLS_template_8(): {
     rootEl: HTMLElement;
 };
 
-declare function __VLS_template_9(): {
-    attrs: Partial<{}>;
-    slots: Readonly<{
-        default: any;
-        content: any;
-        'content-bottom': any;
-        'mobile-content'(props: {
-            headerClose: () => void;
-        }): any;
-    }> & {
-        default: any;
-        content: any;
-        'content-bottom': any;
-        'mobile-content'(props: {
-            headerClose: () => void;
-        }): any;
-    };
-    refs: {};
-    rootEl: HTMLElement;
-};
-
 declare type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 
 declare type __VLS_TemplateResult_10 = ReturnType<typeof __VLS_template_10>;
@@ -570,6 +582,8 @@ declare type __VLS_TemplateResult_12 = ReturnType<typeof __VLS_template_12>;
 
 declare type __VLS_TemplateResult_13 = ReturnType<typeof __VLS_template_13>;
 
+declare type __VLS_TemplateResult_14 = ReturnType<typeof __VLS_template_14>;
+
 declare type __VLS_TemplateResult_2 = ReturnType<typeof __VLS_template_2>;
 
 declare type __VLS_TemplateResult_3 = ReturnType<typeof __VLS_template_3>;
@@ -616,6 +630,12 @@ declare type __VLS_WithTemplateSlots_13<T, S> = T & {
     };
 };
 
+declare type __VLS_WithTemplateSlots_14<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
 declare type __VLS_WithTemplateSlots_2<T, S> = T & {
     new (): {
         $slots: S;
@@ -664,31 +684,27 @@ declare type __VLS_WithTemplateSlots_9<T, S> = T & {
     };
 };
 
-export declare const Alert: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export declare const AccordionGroup: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 
-export declare type Alignment = 'left' | 'center' | 'right';
+export declare const Alert: __VLS_WithTemplateSlots_2<typeof __VLS_component_2, __VLS_TemplateResult_2["slots"]>;
 
-declare const allType: readonly ["BGCOLOR", "BEFOREBG", "AFTERBG", "HVBGCOLOR", "FCBGCOLOR", "ACTIVEBG", "TEXTCOLOR", "HVTEXTCOLOR", "FCTEXTCOLOR", "DISABLEDTEXTCOLOR", "SVGFILL", "RINGCOLOR", "FOCUSRING", "ACTIVERING", "OUTLINE", "FOCUSOUTLINE", "ACTIVEOUTLINE", "OFFSETRING", "BTNCOLOR", "LISTCOLOR", "BORDER", "BORDERX", "BORDERY", "BORDERT", "BORDERB", "BORDERL", "BORDERR", "BODYTEXT", "FONTWEIGHT", "TEXTALIGN", "H1", "H2", "H3", "H4", "BORDERW", "BORDERXW", "BORDERYW", "BORDERTW", "BORDERBW", "BORDERLW", "BORDERRW", "BGOPACITY", "OPACITY", "OUTLINEOPACITY", "MARGIN", "MARGINX", "MARGINY", "MARGINT", "MARGINB", "MARGINL", "MARGINR", "PADDING", "PADDINGX", "PADDINGY", "PADDINGT", "PADDINGB", "PADDINGL", "PADDINGR", "GAP"];
+export declare type Alignment = 'left' | 'center' | 'right';
 
 export declare type BodyText = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
-declare type BorderWidthClassType = ClassTypesMap['borderWidthType'];
-
-export declare const Card: __VLS_WithTemplateSlots_2<typeof __VLS_component_2, __VLS_TemplateResult_2["slots"]>;
+declare type BorderWidthClassType = 'BORDERW' | 'BORDERXW' | 'BORDERYW' | 'BORDERTW' | 'BORDERBW' | 'BORDERLW' | 'BORDERRW';
 
-export declare const CarouselContainer: __VLS_WithTemplateSlots_3<typeof __VLS_component_3, __VLS_TemplateResult_3["slots"]>;
+export declare const Card: __VLS_WithTemplateSlots_3<typeof __VLS_component_3, __VLS_TemplateResult_3["slots"]>;
 
-export declare const CarouselContent: __VLS_WithTemplateSlots_4<typeof __VLS_component_4, __VLS_TemplateResult_4["slots"]>;
+export declare const CarouselContainer: __VLS_WithTemplateSlots_4<typeof __VLS_component_4, __VLS_TemplateResult_4["slots"]>;
 
-declare type ClassType = (typeof allType)[number];
+export declare const CarouselContent: __VLS_WithTemplateSlots_5<typeof __VLS_component_5, __VLS_TemplateResult_5["slots"]>;
 
-declare type ClassTypesMap = {
-    [K in keyof GroupTypes]: (typeof typeGroup)[K][number];
-};
+declare type ClassType = ColorClassType | HeadingClassType | TextClassType | FontWeightClassType | TextAlignClassType | BorderWidthClassType | ScaleClassType | SpacingClassType;
 
-export declare const Collapse: __VLS_WithTemplateSlots_5<typeof __VLS_component_5, __VLS_TemplateResult_5["slots"]>;
+export declare const Collapse: __VLS_WithTemplateSlots_6<typeof __VLS_component_6, __VLS_TemplateResult_6["slots"]>;
 
-declare type ColorClassType = ClassTypesMap['colorType'];
+declare type ColorClassType = 'BGCOLOR' | 'BEFOREBG' | 'AFTERBG' | 'HVBGCOLOR' | 'FCBGCOLOR' | 'ACTIVEBG' | 'TEXTCOLOR' | 'HVTEXTCOLOR' | 'FCTEXTCOLOR' | 'DISABLEDTEXTCOLOR' | 'SVGFILL' | 'RINGCOLOR' | 'FOCUSRING' | 'ACTIVERING' | 'OFFSETRING' | 'OUTLINE' | 'FOCUSOUTLINE' | 'ACTIVEOUTLINE' | 'BTNCOLOR' | 'LISTCOLOR' | 'BORDER' | 'BORDERX' | 'BORDERY' | 'BORDERT' | 'BORDERB' | 'BORDERL' | 'BORDERR';
 
 export declare type ColorPalette = 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'light-1' | 'light-2' | 'light-3' | 'light-4' | 'dark-1' | 'dark-2' | 'dark-3' | 'dark-4' | 'black' | 'white' | 'transparent';
 
@@ -704,26 +720,205 @@ export declare type DirectionX = 'left' | 'right';
 
 export declare type DirectionY = 'top' | 'bottom';
 
-export declare const DropdownContainer: __VLS_WithTemplateSlots_6<typeof __VLS_component_6, __VLS_TemplateResult_6["slots"]>;
+export declare const DropdownContainer: __VLS_WithTemplateSlots_7<typeof __VLS_component_7, __VLS_TemplateResult_7["slots"]>;
 
-export declare const DropdownContent: __VLS_WithTemplateSlots_7<typeof __VLS_component_7, __VLS_TemplateResult_7["slots"]>;
+export declare const DropdownContent: __VLS_WithTemplateSlots_8<typeof __VLS_component_8, __VLS_TemplateResult_8["slots"]>;
 
 export declare type FontWeight = 'light' | 'normal' | 'bold';
 
-declare type FontWeightClassType = ClassTypesMap['fontWeightType'];
-
-declare const generateClass: <T extends ClassType>(type: T, value: InputType_2<T>) => string;
-export default generateClass;
-
-declare type GroupTypes = typeof typeGroup;
-
-export declare const HeaderHorizontal: __VLS_WithTemplateSlots_8<typeof __VLS_component_8, __VLS_TemplateResult_8["slots"]>;
+declare type FontWeightClassType = 'FONTWEIGHT';
+
+export declare const generateClass: {
+    bgColorVariant: (props?: ({
+        color?: "primary" | "secondary" | "success" | "info" | "warning" | "danger" | "light-1" | "light-2" | "light-3" | "light-4" | "dark-1" | "dark-2" | "dark-3" | "dark-4" | "black" | "white" | "transparent" | null | undefined;
+    } & ClassProp) | undefined) => string;
+    hoverBgColorVariant: (props?: ({
+        color?: "primary" | "secondary" | "success" | "info" | "warning" | "danger" | "light-1" | "light-2" | "light-3" | "light-4" | "dark-1" | "dark-2" | "dark-3" | "dark-4" | "black" | "white" | "transparent" | null | undefined;
+    } & ClassProp) | undefined) => string;
+    focusBgColorVariant: (props?: ({
+        color?: "primary" | "secondary" | "success" | "info" | "warning" | "danger" | "light-1" | "light-2" | "light-3" | "light-4" | "dark-1" | "dark-2" | "dark-3" | "dark-4" | "black" | "white" | "transparent" | null | undefined;
+    } & ClassProp) | undefined) => string;
+    beforeBgColorVariant: (props?: ({
+        color?: "primary" | "secondary" | "success" | "info" | "warning" | "danger" | "light-1" | "light-2" | "light-3" | "light-4" | "dark-1" | "dark-2" | "dark-3" | "dark-4" | "black" | "white" | "transparent" | null | undefined;
+    } & ClassProp) | undefined) => string;
+    afterBgColorVariant: (props?: ({
+        color?: "primary" | "secondary" | "success" | "info" | "warning" | "danger" | "light-1" | "light-2" | "light-3" | "light-4" | "dark-1" | "dark-2" | "dark-3" | "dark-4" | "black" | "white" | "transparent" | null | undefined;
+    } & ClassProp) | undefined) => string;
+    activeBgColorVariant: (props?: ({
+        color?: "primary" | "secondary" | "success" | "info" | "warning" | "danger" | "light-1" | "light-2" | "light-3" | "light-4" | "dark-1" | "dark-2" | "dark-3" | "dark-4" | "black" | "white" | "transparent" | null | undefined;
+    } & ClassProp) | undefined) => string;
+    textColorVariant: (props?: ({
+        color?: "primary" | "secondary" | "success" | "info" | "warning" | "danger" | "light-1" | "light-2" | "light-3" | "light-4" | "dark-1" | "dark-2" | "dark-3" | "dark-4" | "black" | "white" | "transparent" | null | undefined;
+    } & ClassProp) | undefined) => string;
+    hoverTextColorVariant: (props?: ({
+        color?: "primary" | "secondary" | "success" | "info" | "warning" | "danger" | "light-1" | "light-2" | "light-3" | "light-4" | "dark-1" | "dark-2" | "dark-3" | "dark-4" | "black" | "white" | "transparent" | null | undefined;
+    } & ClassProp) | undefined) => string;
+    focusTextColorVariant: (props?: ({
+        color?: "primary" | "secondary" | "success" | "info" | "warning" | "danger" | "light-1" | "light-2" | "light-3" | "light-4" | "dark-1" | "dark-2" | "dark-3" | "dark-4" | "black" | "white" | "transparent" | null | undefined;
+    } & ClassProp) | undefined) => string;
+    disabledTextColorVariant: (props?: ({
+        color?: "primary" | "secondary" | "success" | "info" | "warning" | "danger" | "light-1" | "light-2" | "light-3" | "light-4" | "dark-1" | "dark-2" | "dark-3" | "dark-4" | "black" | "white" | "transparent" | null | undefined;
+    } & ClassProp) | undefined) => string;
+    svgFillColorVariant: (props?: ({
+        color?: "primary" | "secondary" | "success" | "info" | "warning" | "danger" | "light-1" | "light-2" | "light-3" | "light-4" | "dark-1" | "dark-2" | "dark-3" | "dark-4" | "black" | "white" | "transparent" | null | undefined;
+    } & ClassProp) | undefined) => string;
+    ringColorVariant: (props?: ({
+        color?: "primary" | "secondary" | "success" | "info" | "warning" | "danger" | "light-1" | "light-2" | "light-3" | "light-4" | "dark-1" | "dark-2" | "dark-3" | "dark-4" | "black" | "white" | "transparent" | null | undefined;
+    } & ClassProp) | undefined) => string;
+    focusRingColorVariant: (props?: ({
+        color?: "primary" | "secondary" | "success" | "info" | "warning" | "danger" | "light-1" | "light-2" | "light-3" | "light-4" | "dark-1" | "dark-2" | "dark-3" | "dark-4" | "black" | "white" | "transparent" | null | undefined;
+    } & ClassProp) | undefined) => string;
+    activeRingColorVariant: (props?: ({
+        color?: "primary" | "secondary" | "success" | "info" | "warning" | "danger" | "light-1" | "light-2" | "light-3" | "light-4" | "dark-1" | "dark-2" | "dark-3" | "dark-4" | "black" | "white" | "transparent" | null | undefined;
+    } & ClassProp) | undefined) => string;
+    ringOffsetColorVariant: (props?: ({
+        color?: "primary" | "secondary" | "success" | "info" | "warning" | "danger" | "light-1" | "light-2" | "light-3" | "light-4" | "dark-1" | "dark-2" | "dark-3" | "dark-4" | "black" | "white" | "transparent" | null | undefined;
+    } & ClassProp) | undefined) => string;
+    outlineColorVariant: (props?: ({
+        color?: "primary" | "secondary" | "success" | "info" | "warning" | "danger" | "light-1" | "light-2" | "light-3" | "light-4" | "dark-1" | "dark-2" | "dark-3" | "dark-4" | "black" | "white" | "transparent" | null | undefined;
+    } & ClassProp) | undefined) => string;
+    focusOutlineColorVariant: (props?: ({
+        color?: "primary" | "secondary" | "success" | "info" | "warning" | "danger" | "light-1" | "light-2" | "light-3" | "light-4" | "dark-1" | "dark-2" | "dark-3" | "dark-4" | "black" | "white" | "transparent" | null | undefined;
+    } & ClassProp) | undefined) => string;
+    activeOutlineColorVariant: (props?: ({
+        color?: "primary" | "secondary" | "success" | "info" | "warning" | "danger" | "light-1" | "light-2" | "light-3" | "light-4" | "dark-1" | "dark-2" | "dark-3" | "dark-4" | "black" | "white" | "transparent" | null | undefined;
+    } & ClassProp) | undefined) => string;
+    btnColorVariant: (props?: ({
+        color?: "primary" | "secondary" | "success" | "info" | "warning" | "danger" | "light-1" | "light-2" | "light-3" | "light-4" | "dark-1" | "dark-2" | "dark-3" | "dark-4" | "black" | "white" | "transparent" | null | undefined;
+    } & ClassProp) | undefined) => string;
+    listColorVariant: (props?: ({
+        color?: "primary" | "secondary" | "success" | "info" | "warning" | "danger" | "light-1" | "light-2" | "light-3" | "light-4" | "dark-1" | "dark-2" | "dark-3" | "dark-4" | "black" | "white" | "transparent" | null | undefined;
+    } & ClassProp) | undefined) => string;
+    borderColorVariant: (props?: ({
+        color?: "primary" | "secondary" | "success" | "info" | "warning" | "danger" | "light-1" | "light-2" | "light-3" | "light-4" | "dark-1" | "dark-2" | "dark-3" | "dark-4" | "black" | "white" | "transparent" | null | undefined;
+    } & ClassProp) | undefined) => string;
+    borderXColorVariant: (props?: ({
+        color?: "primary" | "secondary" | "success" | "info" | "warning" | "danger" | "light-1" | "light-2" | "light-3" | "light-4" | "dark-1" | "dark-2" | "dark-3" | "dark-4" | "black" | "white" | "transparent" | null | undefined;
+    } & ClassProp) | undefined) => string;
+    borderYColorVariant: (props?: ({
+        color?: "primary" | "secondary" | "success" | "info" | "warning" | "danger" | "light-1" | "light-2" | "light-3" | "light-4" | "dark-1" | "dark-2" | "dark-3" | "dark-4" | "black" | "white" | "transparent" | null | undefined;
+    } & ClassProp) | undefined) => string;
+    borderTopColorVariant: (props?: ({
+        color?: "primary" | "secondary" | "success" | "info" | "warning" | "danger" | "light-1" | "light-2" | "light-3" | "light-4" | "dark-1" | "dark-2" | "dark-3" | "dark-4" | "black" | "white" | "transparent" | null | undefined;
+    } & ClassProp) | undefined) => string;
+    borderBottomColorVariant: (props?: ({
+        color?: "primary" | "secondary" | "success" | "info" | "warning" | "danger" | "light-1" | "light-2" | "light-3" | "light-4" | "dark-1" | "dark-2" | "dark-3" | "dark-4" | "black" | "white" | "transparent" | null | undefined;
+    } & ClassProp) | undefined) => string;
+    borderLeftColorVariant: (props?: ({
+        color?: "primary" | "secondary" | "success" | "info" | "warning" | "danger" | "light-1" | "light-2" | "light-3" | "light-4" | "dark-1" | "dark-2" | "dark-3" | "dark-4" | "black" | "white" | "transparent" | null | undefined;
+    } & ClassProp) | undefined) => string;
+    borderRightColorVariant: (props?: ({
+        color?: "primary" | "secondary" | "success" | "info" | "warning" | "danger" | "light-1" | "light-2" | "light-3" | "light-4" | "dark-1" | "dark-2" | "dark-3" | "dark-4" | "black" | "white" | "transparent" | null | undefined;
+    } & ClassProp) | undefined) => string;
+    bodyTextVariant: (props?: ({
+        size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
+    } & ClassProp) | undefined) => string;
+    fontWeightVariant: (props?: ({
+        weight?: "light" | "normal" | "bold" | null | undefined;
+    } & ClassProp) | undefined) => string;
+    textAlignVariant: (props?: ({
+        align?: "left" | "center" | "right" | null | undefined;
+    } & ClassProp) | undefined) => string;
+    h1Variant: (props?: ({
+        size?: "sm" | "md" | "lg" | "xl" | null | undefined;
+    } & ClassProp) | undefined) => string;
+    h2Variant: (props?: ({
+        size?: "sm" | "md" | "lg" | "xl" | null | undefined;
+    } & ClassProp) | undefined) => string;
+    h3Variant: (props?: ({
+        size?: "sm" | "md" | "lg" | "xl" | null | undefined;
+    } & ClassProp) | undefined) => string;
+    h4Variant: (props?: ({
+        size?: "sm" | "md" | "lg" | "xl" | null | undefined;
+    } & ClassProp) | undefined) => string;
+    borderWidthVariant: (p: {
+        width: Range_2<1, 12>;
+    }) => string;
+    borderXWidthVariant: (p: {
+        width: Range_2<1, 12>;
+    }) => string;
+    borderYWidthVariant: (p: {
+        width: Range_2<1, 12>;
+    }) => string;
+    borderTopWidthVariant: (p: {
+        width: Range_2<1, 12>;
+    }) => string;
+    borderBottomWidthVariant: (p: {
+        width: Range_2<1, 12>;
+    }) => string;
+    borderLeftWidthVariant: (p: {
+        width: Range_2<1, 12>;
+    }) => string;
+    borderRightWidthVariant: (p: {
+        width: Range_2<1, 12>;
+    }) => string;
+    opacityVariant: (p: {
+        opacity: OpacityRange;
+    }) => string;
+    bgOpacityVariant: (p: {
+        opacity: OpacityRange;
+    }) => string;
+    outlineOpacityVariant: (p: {
+        opacity: OpacityRange;
+    }) => string;
+    marginVariant: (props?: ({
+        spacing?: "0" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | null | undefined;
+    } & ClassProp) | undefined) => string;
+    marginXVariant: (props?: ({
+        spacing?: "0" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | null | undefined;
+    } & ClassProp) | undefined) => string;
+    marginYVariant: (props?: ({
+        spacing?: "0" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | null | undefined;
+    } & ClassProp) | undefined) => string;
+    marginTopVariant: (props?: ({
+        spacing?: "0" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | null | undefined;
+    } & ClassProp) | undefined) => string;
+    marginBottomVariant: (props?: ({
+        spacing?: "0" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | null | undefined;
+    } & ClassProp) | undefined) => string;
+    marginLeftVariant: (props?: ({
+        spacing?: "0" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | null | undefined;
+    } & ClassProp) | undefined) => string;
+    marginRightVariant: (props?: ({
+        spacing?: "0" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | null | undefined;
+    } & ClassProp) | undefined) => string;
+    paddingVariant: (props?: ({
+        spacing?: "0" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | null | undefined;
+    } & ClassProp) | undefined) => string;
+    paddingXVariant: (props?: ({
+        spacing?: "0" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | null | undefined;
+    } & ClassProp) | undefined) => string;
+    paddingYVariant: (props?: ({
+        spacing?: "0" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | null | undefined;
+    } & ClassProp) | undefined) => string;
+    paddingTopVariant: (props?: ({
+        spacing?: "0" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | null | undefined;
+    } & ClassProp) | undefined) => string;
+    paddingBottomVariant: (props?: ({
+        spacing?: "0" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | null | undefined;
+    } & ClassProp) | undefined) => string;
+    paddingLeftVariant: (props?: ({
+        spacing?: "0" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | null | undefined;
+    } & ClassProp) | undefined) => string;
+    paddingRightVariant: (props?: ({
+        spacing?: "0" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | null | undefined;
+    } & ClassProp) | undefined) => string;
+    gapVariant: (props?: ({
+        spacing?: "0" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | null | undefined;
+    } & ClassProp) | undefined) => string;
+};
+
+/** @deprecated Use `import { generateClass } from '@bobbykim/manguito-theme'` instead. Will be removed in the next major version. */
+declare const generateClassLegacy: <T extends ClassType>(type: T, value: InputType_2<T>) => string;
+export default generateClassLegacy;
+
+export declare const HeaderHorizontal: __VLS_WithTemplateSlots_9<typeof __VLS_component_9, __VLS_TemplateResult_9["slots"]>;
 
 export declare type HeaderStickyOptionType = 'none' | 'tablet' | 'pc' | 'all';
 
-export declare const HeaderVertical: __VLS_WithTemplateSlots_9<typeof __VLS_component_9, __VLS_TemplateResult_9["slots"]>;
+export declare const HeaderVertical: __VLS_WithTemplateSlots_10<typeof __VLS_component_10, __VLS_TemplateResult_10["slots"]>;
 
-declare type HeadingClassType = ClassTypesMap['headingSizeType'];
+declare type HeadingClassType = 'H1' | 'H2' | 'H3' | 'H4';
 
 export declare type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4';
 
@@ -731,11 +926,11 @@ export declare type HeadingSize = 'sm' | 'md' | 'lg' | 'xl';
 
 export declare type InputType = 'text' | 'email' | 'password';
 
-declare type InputType_2<T extends ClassType> = T extends ColorClassType ? ColorPalette : T extends HeadingClassType ? HeadingSize : T extends TextClassType ? BodyText : T extends FontWeightClassType ? FontWeight : T extends TextAlignmentClassType ? Alignment : T extends BorderWidthClassType ? Range_2<1, 12> : T extends ScaleClassType ? OpacityRange : T extends SpacingClassType ? SpacingLevel : never;
+declare type InputType_2<T extends ClassType> = T extends ColorClassType ? ColorPalette : T extends HeadingClassType ? HeadingSize : T extends TextClassType ? BodyText : T extends FontWeightClassType ? FontWeight : T extends TextAlignClassType ? Alignment : T extends BorderWidthClassType ? Range_2<1, 12> : T extends ScaleClassType ? OpacityRange : T extends SpacingClassType ? SpacingLevel : never;
 
 declare type IntRange<T extends number[], E extends number, R extends number = never> = T['length'] extends E ? R | E : IntRange<[...T, 1], E, R | T['length']>;
 
-export declare const Modal: __VLS_WithTemplateSlots_10<typeof __VLS_component_10, __VLS_TemplateResult_10["slots"]>;
+export declare const Modal: __VLS_WithTemplateSlots_11<typeof __VLS_component_11, __VLS_TemplateResult_11["slots"]>;
 
 export declare type OpacityRange = 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 100;
 
@@ -744,34 +939,23 @@ export { Range_2 as Range }
 
 declare type _RangeArray<T extends number, R extends unknown[] = []> = R['length'] extends T ? R : _RangeArray<T, [...R, 1]>;
 
-declare type ScaleClassType = ClassTypesMap['scaleType'];
+declare type ScaleClassType = 'OPACITY' | 'BGOPACITY' | 'OUTLINEOPACITY';
 
-export declare const Sidebar: __VLS_WithTemplateSlots_11<typeof __VLS_component_11, __VLS_TemplateResult_11["slots"]>;
+export declare const Sidebar: __VLS_WithTemplateSlots_12<typeof __VLS_component_12, __VLS_TemplateResult_12["slots"]>;
 
 export declare type SizeOption = 'small' | 'medium' | 'large';
 
-declare type SpacingClassType = ClassTypesMap['spacingType'];
+declare type SpacingClassType = 'MARGIN' | 'MARGINX' | 'MARGINY' | 'MARGINT' | 'MARGINB' | 'MARGINL' | 'MARGINR' | 'PADDING' | 'PADDINGX' | 'PADDINGY' | 'PADDINGT' | 'PADDINGB' | 'PADDINGL' | 'PADDINGR' | 'GAP';
 
 export declare type SpacingLevel = '0' | '3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
 
-export declare const TabContainer: __VLS_WithTemplateSlots_12<typeof __VLS_component_12, __VLS_TemplateResult_12["slots"]>;
+export declare const TabContainer: __VLS_WithTemplateSlots_13<typeof __VLS_component_13, __VLS_TemplateResult_13["slots"]>;
 
-export declare const TabContent: __VLS_WithTemplateSlots_13<typeof __VLS_component_13, __VLS_TemplateResult_13["slots"]>;
+export declare const TabContent: __VLS_WithTemplateSlots_14<typeof __VLS_component_14, __VLS_TemplateResult_14["slots"]>;
 
-declare type TextAlignmentClassType = ClassTypesMap['textAlignType'];
+declare type TextAlignClassType = 'TEXTALIGN';
 
-declare type TextClassType = ClassTypesMap['textType'];
-
-declare const typeGroup: {
-    colorType: readonly ["BGCOLOR", "BEFOREBG", "AFTERBG", "HVBGCOLOR", "FCBGCOLOR", "ACTIVEBG", "TEXTCOLOR", "HVTEXTCOLOR", "FCTEXTCOLOR", "DISABLEDTEXTCOLOR", "SVGFILL", "RINGCOLOR", "FOCUSRING", "ACTIVERING", "OUTLINE", "FOCUSOUTLINE", "ACTIVEOUTLINE", "OFFSETRING", "BTNCOLOR", "LISTCOLOR", "BORDER", "BORDERX", "BORDERY", "BORDERT", "BORDERB", "BORDERL", "BORDERR"];
-    textType: readonly ["BODYTEXT"];
-    fontWeightType: readonly ["FONTWEIGHT"];
-    textAlignType: readonly ["TEXTALIGN"];
-    headingSizeType: readonly ["H1", "H2", "H3", "H4"];
-    borderWidthType: readonly ["BORDERW", "BORDERXW", "BORDERYW", "BORDERTW", "BORDERBW", "BORDERLW", "BORDERRW"];
-    scaleType: readonly ["BGOPACITY", "OPACITY", "OUTLINEOPACITY"];
-    spacingType: readonly ["MARGIN", "MARGINX", "MARGINY", "MARGINT", "MARGINB", "MARGINL", "MARGINR", "PADDING", "PADDINGX", "PADDINGY", "PADDINGT", "PADDINGB", "PADDINGL", "PADDINGR", "GAP"];
-};
+declare type TextClassType = 'BODYTEXT';
 
 export declare type VerticalAlignment = 'top' | 'center' | 'bottom';