@maltjoy/core-vue 3.27.2 → 3.28.0

package/dist/components/JoyTagsList/VJoyTagsList.vue.d.ts

@@ -1,9 +1,9 @@
 import { PropType } from 'vue';
-import { TJoyTagsListModel, TJoyTagsList } from './JoyTagsList.types';
-import { IJoyTagRemoved, IJoyTagSelected } from '../JoyTag/JoyTag.types';
+import { TJoyTagsListModel, TJoyTagsListAlign, TJoyTagsList } from './JoyTagsList.types';
+import { IJoyTagRemoved, IJoyTagSelected, TJoyTagVariants } from '../JoyTag/JoyTag.types';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     align: {
-        type: PropType<"left" | "right" | "center">;
+        type: PropType<TJoyTagsListAlign>;
         default: string;
     };
     modelValue: {
@@ -26,7 +26,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
     /** Apply variant for all VJoyTag. Can be overriden by setting a variant property in specific tags entry. */
     variant: {
-        type: PropType<"primary" | "secondary" | "important" | "inactive" | "pending" | "pricing" | "special" | "ai-primary" | "ai-secondary">;
+        type: PropType<TJoyTagVariants>;
         default: string;
     };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -34,7 +34,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     removeTag: (tagValue: string | number | undefined) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     align: {
-        type: PropType<"left" | "right" | "center">;
+        type: PropType<TJoyTagsListAlign>;
         default: string;
     };
     modelValue: {
@@ -57,15 +57,15 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
     /** Apply variant for all VJoyTag. Can be overriden by setting a variant property in specific tags entry. */
     variant: {
-        type: PropType<"primary" | "secondary" | "important" | "inactive" | "pending" | "pricing" | "special" | "ai-primary" | "ai-secondary">;
+        type: PropType<TJoyTagVariants>;
         default: string;
     };
 }>> & {
     "onUpdate:modelValue"?: ((tags: TJoyTagsListModel) => any) | undefined;
     onRemoveTag?: ((tagValue: string | number | undefined) => any) | undefined;
 }, {
-    variant: "primary" | "secondary" | "important" | "inactive" | "pending" | "pricing" | "special" | "ai-primary" | "ai-secondary";
-    align: "left" | "right" | "center";
+    align: TJoyTagsListAlign;
+    variant: TJoyTagVariants;
     removable: boolean;
     selectable: boolean;
     tags: TJoyTagsList;
@@ -76,8 +76,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         removable: boolean;
         link?: boolean | undefined;
         size?: import("../JoyTag/JoyTag.types").TJoyTagSizes | undefined;
-        variant?: "primary" | "secondary" | "important" | "inactive" | "pending" | "pricing" | "special" | "ai-primary" | "ai-secondary" | undefined;
         value?: string | number | undefined;
+        variant?: TJoyTagVariants | undefined;
         draggable?: boolean | undefined;
         key?: string | number | symbol | undefined;
         ref?: import("vue").VNodeRef | undefined;

package/dist/components/JoyTemplate/JoyTemplate.types.d.ts

@@ -1,2 +1 @@
-export declare const TEMPLATE_SIDEBAR: readonly ["left", "right"];
-export type TJoyTemplateSidebarSide = (typeof TEMPLATE_SIDEBAR)[number];
+export type TJoyTemplateSidebarSide = 'left' | 'right';

package/dist/components/JoyTemplate/VJoyTemplate.vue.d.ts

@@ -1,11 +1,14 @@
-import { PropType } from 'vue';
+import { PropType, VNode } from 'vue';
+import { TJoyScreenLoaderColors } from '../JoyScreenLoader/VJoyScreenLoader.types';
+import { TJoyTemplateSidebarSide } from './JoyTemplate.types';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    /** Takes 100% of free space */
     full: {
         type: BooleanConstructor;
         default: boolean;
     };
     sidebar: {
-        type: PropType<"left" | "right">;
+        type: PropType<TJoyTemplateSidebarSide>;
         default: string;
     };
     loading: {
@@ -13,20 +16,22 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
     };
     loadingColor: {
-        type: PropType<"light" | "dark">;
+        type: PropType<TJoyScreenLoaderColors>;
         default: string;
     };
+    /** Decorative purpose, on bottom right corner */
     shapes: {
         type: BooleanConstructor;
         default: boolean;
     };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /** Takes 100% of free space */
     full: {
         type: BooleanConstructor;
         default: boolean;
     };
     sidebar: {
-        type: PropType<"left" | "right">;
+        type: PropType<TJoyTemplateSidebarSide>;
         default: string;
     };
     loading: {
@@ -34,27 +39,74 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
     };
     loadingColor: {
-        type: PropType<"light" | "dark">;
+        type: PropType<TJoyScreenLoaderColors>;
         default: string;
     };
+    /** Decorative purpose, on bottom right corner */
     shapes: {
         type: BooleanConstructor;
         default: boolean;
     };
 }>>, {
     loading: boolean;
-    loadingColor: "light" | "dark";
+    loadingColor: TJoyScreenLoaderColors;
     full: boolean;
-    sidebar: "left" | "right";
+    sidebar: TJoyTemplateSidebarSide;
     shapes: boolean;
-}, {}>, {
-    "template-back"?(_: {}): any;
-    "template-title"?(_: {}): any;
-    "template-subtitle"?(_: {}): any;
-    "template-actions"?(_: {}): any;
-    "template-main"?(_: {}): any;
-    "template-sidebar"?(_: {}): any;
-    "template-loader-content"?(_: {}): any;
+}, {}>, Readonly<{
+    /** Slot to inject a "back" button left to the title */
+    'template-back': () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>[];
+    /** Main title of the template */
+    'template-title': () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>[];
+    /** Not mandatory, subtitle of the component */
+    'template-subtitle': () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>[];
+    /** Top right corner, free slot (mostly for CTA) */
+    'template-actions': () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>[];
+    /** Main content section */
+    'template-main': () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>[];
+    /** Aside content section */
+    'template-sidebar': () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>[];
+    /** Customize the loading state content */
+    'template-loader-content': () => any;
+}> & {
+    /** Slot to inject a "back" button left to the title */
+    'template-back': () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>[];
+    /** Main title of the template */
+    'template-title': () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>[];
+    /** Not mandatory, subtitle of the component */
+    'template-subtitle': () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>[];
+    /** Top right corner, free slot (mostly for CTA) */
+    'template-actions': () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>[];
+    /** Main content section */
+    'template-main': () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>[];
+    /** Aside content section */
+    'template-sidebar': () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>[];
+    /** Customize the loading state content */
+    'template-loader-content': () => any;
 }>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/components/JoyText/VJoyText.vue.d.ts

@@ -3,7 +3,7 @@ import { TJoyTextFontPreset } from './JoyText.types';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     /** Defines the tag name of the Node you want to create. By default it's a simple P tag. Lowercase only */
     tagName: {
-        type: PropType<number | typeof Symbol.iterator | "length" | "concat" | "slice" | "indexOf" | "lastIndexOf" | "includes" | "at" | "toString" | "anchor" | "link" | "small" | "sub" | "sup" | "search" | "charAt" | "charCodeAt" | "localeCompare" | "match" | "replace" | "split" | "substring" | "toLowerCase" | "toLocaleLowerCase" | "toUpperCase" | "toLocaleUpperCase" | "trim" | "substr" | "codePointAt" | "endsWith" | "normalize" | "repeat" | "startsWith" | "big" | "blink" | "bold" | "fixed" | "fontcolor" | "fontsize" | "italics" | "strike" | "padStart" | "padEnd" | "trimEnd" | "trimStart" | "trimLeft" | "trimRight" | "matchAll" | "replaceAll" | "valueOf">;
+        type: PropType<number | typeof Symbol.iterator | "length" | "concat" | "slice" | "indexOf" | "lastIndexOf" | "includes" | "at" | "toString" | "anchor" | "link" | "small" | "sub" | "sup" | "charAt" | "charCodeAt" | "localeCompare" | "match" | "replace" | "search" | "split" | "substring" | "toLowerCase" | "toLocaleLowerCase" | "toUpperCase" | "toLocaleUpperCase" | "trim" | "substr" | "codePointAt" | "endsWith" | "normalize" | "repeat" | "startsWith" | "big" | "blink" | "bold" | "fixed" | "fontcolor" | "fontsize" | "italics" | "strike" | "padStart" | "padEnd" | "trimEnd" | "trimStart" | "trimLeft" | "trimRight" | "matchAll" | "replaceAll" | "valueOf">;
         default: string;
     };
     /** Choose a pre-configured set of CSS rules : font-family, font-size, line-height, font-weight.  */
@@ -14,7 +14,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     /** Defines the tag name of the Node you want to create. By default it's a simple P tag. Lowercase only */
     tagName: {
-        type: PropType<number | typeof Symbol.iterator | "length" | "concat" | "slice" | "indexOf" | "lastIndexOf" | "includes" | "at" | "toString" | "anchor" | "link" | "small" | "sub" | "sup" | "search" | "charAt" | "charCodeAt" | "localeCompare" | "match" | "replace" | "split" | "substring" | "toLowerCase" | "toLocaleLowerCase" | "toUpperCase" | "toLocaleUpperCase" | "trim" | "substr" | "codePointAt" | "endsWith" | "normalize" | "repeat" | "startsWith" | "big" | "blink" | "bold" | "fixed" | "fontcolor" | "fontsize" | "italics" | "strike" | "padStart" | "padEnd" | "trimEnd" | "trimStart" | "trimLeft" | "trimRight" | "matchAll" | "replaceAll" | "valueOf">;
+        type: PropType<number | typeof Symbol.iterator | "length" | "concat" | "slice" | "indexOf" | "lastIndexOf" | "includes" | "at" | "toString" | "anchor" | "link" | "small" | "sub" | "sup" | "charAt" | "charCodeAt" | "localeCompare" | "match" | "replace" | "search" | "split" | "substring" | "toLowerCase" | "toLocaleLowerCase" | "toUpperCase" | "toLocaleUpperCase" | "trim" | "substr" | "codePointAt" | "endsWith" | "normalize" | "repeat" | "startsWith" | "big" | "blink" | "bold" | "fixed" | "fontcolor" | "fontsize" | "italics" | "strike" | "padStart" | "padEnd" | "trimEnd" | "trimStart" | "trimLeft" | "trimRight" | "matchAll" | "replaceAll" | "valueOf">;
         default: string;
     };
     /** Choose a pre-configured set of CSS rules : font-family, font-size, line-height, font-weight.  */
@@ -23,10 +23,14 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
     };
 }>>, {
-    tagName: number | typeof Symbol.iterator | "length" | "concat" | "slice" | "indexOf" | "lastIndexOf" | "includes" | "at" | "toString" | "anchor" | "link" | "small" | "sub" | "sup" | "search" | "charAt" | "charCodeAt" | "localeCompare" | "match" | "replace" | "split" | "substring" | "toLowerCase" | "toLocaleLowerCase" | "toUpperCase" | "toLocaleUpperCase" | "trim" | "substr" | "codePointAt" | "endsWith" | "normalize" | "repeat" | "startsWith" | "big" | "blink" | "bold" | "fixed" | "fontcolor" | "fontsize" | "italics" | "strike" | "padStart" | "padEnd" | "trimEnd" | "trimStart" | "trimLeft" | "trimRight" | "matchAll" | "replaceAll" | "valueOf";
+    tagName: number | typeof Symbol.iterator | "length" | "concat" | "slice" | "indexOf" | "lastIndexOf" | "includes" | "at" | "toString" | "anchor" | "link" | "small" | "sub" | "sup" | "charAt" | "charCodeAt" | "localeCompare" | "match" | "replace" | "search" | "split" | "substring" | "toLowerCase" | "toLocaleLowerCase" | "toUpperCase" | "toLocaleUpperCase" | "trim" | "substr" | "codePointAt" | "endsWith" | "normalize" | "repeat" | "startsWith" | "big" | "blink" | "bold" | "fixed" | "fontcolor" | "fontsize" | "italics" | "strike" | "padStart" | "padEnd" | "trimEnd" | "trimStart" | "trimLeft" | "trimRight" | "matchAll" | "replaceAll" | "valueOf";
     preset: TJoyTextFontPreset;
-}, {}>, {
-    default?(_: {}): any;
+}, {}>, Readonly<{
+    /** Main content */
+    default(): any;
+}> & {
+    /** Main content */
+    default(): any;
 }>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/components/JoyTextarea/VJoyTextarea.vue.d.ts

@@ -1,4 +1,5 @@
 import { PropType } from 'vue';
+import { TJoyLabelSizes } from '../JoyLabel/JoyLabel.types';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     autofocus: {
         type: BooleanConstructor;
@@ -24,7 +25,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
     label: StringConstructor;
     labelSize: {
-        type: PropType<"small" | "large" | "medium">;
+        type: PropType<TJoyLabelSizes>;
         default: string;
     };
     optionalLabel: StringConstructor;
@@ -95,7 +96,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
     label: StringConstructor;
     labelSize: {
-        type: PropType<"small" | "large" | "medium">;
+        type: PropType<TJoyLabelSizes>;
         default: string;
     };
     optionalLabel: StringConstructor;
@@ -126,22 +127,22 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }>> & {
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }, {
-    required: boolean;
     disabled: boolean;
+    required: boolean;
     invalid: boolean;
     modelValue: string;
     autofocus: boolean;
-    labelSize: "small" | "large" | "medium";
+    labelSize: TJoyLabelSizes;
     requiredMark: boolean;
     modelModifiers: {
         lazy: boolean;
     };
     autogrow: boolean;
 }, {}>, Readonly<{
-    /** @slot Default slot if you need to render a custom label. */
+    /** Default slot if you need to render a custom label. */
     default: () => any;
 }> & {
-    /** @slot Default slot if you need to render a custom label. */
+    /** Default slot if you need to render a custom label. */
     default: () => any;
 }>;
 export default _default;

package/dist/components/JoyToggle/VJoyToggle.vue.d.ts

@@ -59,13 +59,17 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
-    required: boolean;
     disabled: boolean;
-    invalid: boolean;
+    required: boolean;
     value: string;
+    invalid: boolean;
     modelValue: boolean;
-}, {}>, {
-    default?(_: {}): any;
+}, {}>, Readonly<{
+    /** Default slot if you need to render a custom label. */
+    default: () => any;
+}> & {
+    /** Default slot if you need to render a custom label. */
+    default: () => any;
 }>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/components/JoyTooltip/JoyTooltip.types.d.ts

@@ -1,3 +1,2 @@
 import { ProductColors } from '../../types';
 export type TJoyTooltipVariants = Extract<ProductColors, 'primary' | 'secondary'>;
-export declare const JOY_TOOLTIP_VARIANTS: TJoyTooltipVariants[];

package/dist/components/JoyTooltip/VJoyTooltip.vue.d.ts

@@ -0,0 +1,97 @@
+import { PropType } from 'vue';
+import { TJoyTooltipVariants } from './JoyTooltip.types';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    /** If you are 100% sure the content you want to inject does not contain anything that could lead to any XSS, use this  */
+    text: {
+        type: StringConstructor;
+    };
+    variant: {
+        type: PropType<TJoyTooltipVariants>;
+        default: string;
+    };
+    /** It will automatically switch to another placement if there is not enough space. Please see https://floating-ui.com/docs/tutorial#placements for available values */
+    placement: {
+        type: PropType<import("@floating-ui/vue").MaybeReadonlyRef<import("@floating-ui/vue").Placement | undefined>>;
+        default: string;
+    };
+    /** Mouseenter (default) or click */
+    event: {
+        type: PropType<"click" | "mouseenter">;
+        default: string;
+    };
+    /** By default the tooltip is shown after a certain delay to make the experience smoother. You can change the value (in ms) */
+    delay: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** Mostly for visual testing purpose */
+    show: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Maw-width for the generated tooltip. */
+    tooltipWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+}, {
+    tooltipVisible: import("vue").Ref<boolean>;
+    tooltip: import("vue").Ref<null>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /** If you are 100% sure the content you want to inject does not contain anything that could lead to any XSS, use this  */
+    text: {
+        type: StringConstructor;
+    };
+    variant: {
+        type: PropType<TJoyTooltipVariants>;
+        default: string;
+    };
+    /** It will automatically switch to another placement if there is not enough space. Please see https://floating-ui.com/docs/tutorial#placements for available values */
+    placement: {
+        type: PropType<import("@floating-ui/vue").MaybeReadonlyRef<import("@floating-ui/vue").Placement | undefined>>;
+        default: string;
+    };
+    /** Mouseenter (default) or click */
+    event: {
+        type: PropType<"click" | "mouseenter">;
+        default: string;
+    };
+    /** By default the tooltip is shown after a certain delay to make the experience smoother. You can change the value (in ms) */
+    delay: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** Mostly for visual testing purpose */
+    show: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Maw-width for the generated tooltip. */
+    tooltipWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>>, {
+    variant: TJoyTooltipVariants;
+    show: boolean;
+    placement: import("@floating-ui/vue").MaybeReadonlyRef<import("@floating-ui/vue").Placement | undefined>;
+    event: "click" | "mouseenter";
+    delay: number;
+    tooltipWidth: number;
+}, {}>, Readonly<{
+    /** Use default slot to display the trigger element for the tooltip */
+    default(): any;
+    /** Use this slot to create the content of the tooltip itself */
+    'tooltip-content'?: (() => any) | undefined;
+}> & {
+    /** Use default slot to display the trigger element for the tooltip */
+    default(): any;
+    /** Use this slot to create the content of the tooltip itself */
+    'tooltip-content'?: (() => any) | undefined;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/JoyUserCard/VJoyUserCard.vue.d.ts

@@ -17,6 +17,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     subTitle: {
         type: StringConstructor;
     };
+    /** Introduce a VJoyRatingStars component with given rating */
     ratingValue: {
         type: NumberConstructor;
     };
@@ -39,15 +40,28 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     subTitle: {
         type: StringConstructor;
     };
+    /** Introduce a VJoyRatingStars component with given rating */
     ratingValue: {
         type: NumberConstructor;
     };
-}>>, {}, {}>, {
-    "user-card-avatar"?(_: {}): any;
-    "user-card-title"?(_: {}): any;
-    "user-card-subtitle"?(_: {}): any;
-    "user-card-rating-stars"?(_: {}): any;
-    default?(_: {}): any;
+}>>, {}, {}>, Readonly<{
+    default(): any;
+    /** Customize the VJoyAvatar component by using this slot */
+    'user-card-avatar': () => any;
+    /** User name, basically */
+    'user-card-title': () => any;
+    'user-card-subtitle': () => any;
+    /** Use your own customized VJoyRatingStars here, if needed */
+    'user-card-rating-stars': () => any;
+}> & {
+    default(): any;
+    /** Customize the VJoyAvatar component by using this slot */
+    'user-card-avatar': () => any;
+    /** User name, basically */
+    'user-card-title': () => any;
+    'user-card-subtitle': () => any;
+    /** Use your own customized VJoyRatingStars here, if needed */
+    'user-card-rating-stars': () => any;
 }>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/components/JoyWrapper/JoyWrapper.types.d.ts

@@ -1,10 +1,5 @@
-export declare const JUSTIFY_WRAPPER: readonly ["center", "space-between", "flex-start", "flex-end"];
-export type TJoyWrapperJustify = (typeof JUSTIFY_WRAPPER)[number];
-export declare const ALIGN_WRAPPER: readonly ["center", "flex-start", "flex-end", "stretch"];
-export type TJoyWrapperAlign = (typeof ALIGN_WRAPPER)[number];
-export declare const DIRECTION_WRAPPER: readonly ["row", "column"];
-export type TJoyWrapperDirection = (typeof DIRECTION_WRAPPER)[number];
-export declare const WRAP_WRAPPER: readonly ["nowrap", "wrap"];
-export type TJoyWrapperWrap = (typeof WRAP_WRAPPER)[number];
-export declare const GAP_WRAPPER: readonly ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];
-export type TJoyWrapperGap = (typeof GAP_WRAPPER)[number];
+export type TJoyWrapperJustify = 'center' | 'space-between' | 'flex-start' | 'flex-end';
+export type TJoyWrapperAlign = 'center' | 'flex-start' | 'flex-end' | 'stretch';
+export type TJoyWrapperDirection = 'row' | 'column';
+export type TJoyWrapperWrap = 'nowrap' | 'wrap';
+export type TJoyWrapperGap = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';

package/dist/components/JoyWrapper/VJoyWrapper.vue.d.ts

@@ -1,23 +1,24 @@
 import { PropType } from 'vue';
+import { TJoyWrapperAlign, TJoyWrapperDirection, TJoyWrapperGap, TJoyWrapperJustify, TJoyWrapperWrap } from './JoyWrapper.types';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     /** Horizontal spread. Refers to CSS flex justify-content. */
     justify: {
-        type: PropType<"center" | "space-between" | "flex-start" | "flex-end">;
+        type: PropType<TJoyWrapperJustify>;
         default: string;
     };
     /** Vertical spread. Refers to CSS flex align-items. */
     align: {
-        type: PropType<"center" | "flex-start" | "flex-end" | "stretch">;
+        type: PropType<TJoyWrapperAlign>;
         default: string;
     };
     /** Vertical flex, or horizontal. Refers to CSS flex-direction */
     direction: {
-        type: PropType<"row" | "column">;
+        type: PropType<TJoyWrapperDirection>;
         default: string;
     };
     /** Automatically sets new line if there are not enough horizontal space. Refers to CSS flex-wrap */
     wrap: {
-        type: PropType<"nowrap" | "wrap">;
+        type: PropType<TJoyWrapperWrap>;
         default: string;
     };
     /** Applies a flex-grow to children in order to stretch them all along horizontal space */
@@ -31,33 +32,33 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
     /** Gap between the columns. Refers to CSS column-gap. Value is based on spacing tokens. */
     columnGap: {
-        type: PropType<"0" | "1" | "2" | "3" | "12" | "10" | "4" | "5" | "6" | "7" | "8" | "9" | "11">;
+        type: PropType<TJoyWrapperGap>;
         default: string;
     };
     /** Gap between the rows. Refers to CSS row-gap. Value is based on spacing tokens. */
     rowGap: {
-        type: PropType<"0" | "1" | "2" | "3" | "12" | "10" | "4" | "5" | "6" | "7" | "8" | "9" | "11">;
+        type: PropType<TJoyWrapperGap>;
         default: string;
     };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     /** Horizontal spread. Refers to CSS flex justify-content. */
     justify: {
-        type: PropType<"center" | "space-between" | "flex-start" | "flex-end">;
+        type: PropType<TJoyWrapperJustify>;
         default: string;
     };
     /** Vertical spread. Refers to CSS flex align-items. */
     align: {
-        type: PropType<"center" | "flex-start" | "flex-end" | "stretch">;
+        type: PropType<TJoyWrapperAlign>;
         default: string;
     };
     /** Vertical flex, or horizontal. Refers to CSS flex-direction */
     direction: {
-        type: PropType<"row" | "column">;
+        type: PropType<TJoyWrapperDirection>;
         default: string;
     };
     /** Automatically sets new line if there are not enough horizontal space. Refers to CSS flex-wrap */
     wrap: {
-        type: PropType<"nowrap" | "wrap">;
+        type: PropType<TJoyWrapperWrap>;
         default: string;
     };
     /** Applies a flex-grow to children in order to stretch them all along horizontal space */
@@ -71,23 +72,23 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
     /** Gap between the columns. Refers to CSS column-gap. Value is based on spacing tokens. */
     columnGap: {
-        type: PropType<"0" | "1" | "2" | "3" | "12" | "10" | "4" | "5" | "6" | "7" | "8" | "9" | "11">;
+        type: PropType<TJoyWrapperGap>;
         default: string;
     };
     /** Gap between the rows. Refers to CSS row-gap. Value is based on spacing tokens. */
     rowGap: {
-        type: PropType<"0" | "1" | "2" | "3" | "12" | "10" | "4" | "5" | "6" | "7" | "8" | "9" | "11">;
+        type: PropType<TJoyWrapperGap>;
         default: string;
     };
 }>>, {
-    wrap: "nowrap" | "wrap";
-    justify: "center" | "space-between" | "flex-start" | "flex-end";
-    align: "center" | "flex-start" | "flex-end" | "stretch";
-    direction: "row" | "column";
+    align: TJoyWrapperAlign;
+    wrap: TJoyWrapperWrap;
+    justify: TJoyWrapperJustify;
+    direction: TJoyWrapperDirection;
     itemStretch: boolean;
     noMargin: boolean;
-    columnGap: "0" | "1" | "2" | "3" | "12" | "10" | "4" | "5" | "6" | "7" | "8" | "9" | "11";
-    rowGap: "0" | "1" | "2" | "3" | "12" | "10" | "4" | "5" | "6" | "7" | "8" | "9" | "11";
+    columnGap: TJoyWrapperGap;
+    rowGap: TJoyWrapperGap;
 }, {}>, {
     default?(_: {}): any;
 }>;

package/dist/components/index.d.ts

@@ -38,6 +38,8 @@ import { default as VJoyMultiCheckbox } from './JoyMultiCheckbox/VJoyMultiCheckb
 import { default as VJoyPagination } from './JoyPagination/VJoyPagination.vue';
 import { default as VJoyPanel } from './JoyPanel/VJoyPanel.vue';
 import { default as VJoyPanelSection } from './JoyPanelSection/VJoyPanelSection.vue';
+import { default as VJoyProductTour } from './JoyProductTour/VJoyProductTour.vue';
+import { default as VJoyProductTourTrigger } from './JoyProductTourTrigger/VJoyProductTourTrigger.vue';
 import { default as VJoyProgressBar } from './JoyProgressBar/VJoyProgressBar.vue';
 import { default as VJoyRadio } from './JoyRadio/VJoyRadio.vue';
 import { default as VJoyRadioGroup } from './JoyRadioGroup/VJoyRadioGroup.vue';
@@ -64,4 +66,4 @@ import { default as VJoyToggle } from './JoyToggle/VJoyToggle.vue';
 import { default as VJoyTooltip } from './JoyTooltip/VJoyTooltip.vue';
 import { default as VJoyUserCard } from './JoyUserCard/VJoyUserCard.vue';
 import { default as VJoyWrapper } from './JoyWrapper/VJoyWrapper.vue';
-export { VJoyAvailability, VJoyAvatar, VJoyAvatarsList, VJoyBadge, VJoyBadgeLevel, VJoyBlockSkeleton, VJoyBottomSheet, VJoyBottomSheetTrigger, VJoyButton, VJoyCheckbox, VJoyCollapse, VJoyCollapseItem, VJoyCompanyAvatar, VJoyCounter, VJoyDialog, VJoyDialogTrigger, VJoyDividerCta, VJoyDrawer, VJoyDrawerTrigger, VJoyDropdown, VJoyDropdownList, VJoyFilterBar, VJoyFilterBarButton, VJoyFooter, VJoyFormError, VJoyFormFieldSkeleton, VJoyFunnel, VJoyHeader, VJoyHighlight, VJoyIcon, VJoyIndicator, VJoyIndicators, VJoyInput, VJoyLabel, VJoyLink, VJoyMenu, VJoyMultiCheckbox, VJoyPagination, VJoyPanel, VJoyPanelSection, VJoyProgressBar, VJoyRadio, VJoyRadioGroup, VJoyRatingStars, VJoyScreenLoader, VJoySelect, VJoySelectableItem, VJoySelectableItemGroup, VJoySeparator, VJoySnackbar, VJoySpinner, VJoyStep, VJoyStepper, VJoyTab, VJoyTabs, VJoyTag, VJoyTagsInput, VJoyTagsList, VJoyTemplate, VJoyTemplateShape, VJoyText, VJoyTextarea, VJoyToggle, VJoyTooltip, VJoyUserCard, VJoyWrapper, };
+export { VJoyAvailability, VJoyAvatar, VJoyAvatarsList, VJoyBadge, VJoyBadgeLevel, VJoyBlockSkeleton, VJoyBottomSheet, VJoyBottomSheetTrigger, VJoyButton, VJoyCheckbox, VJoyCollapse, VJoyCollapseItem, VJoyCompanyAvatar, VJoyCounter, VJoyDialog, VJoyDialogTrigger, VJoyDividerCta, VJoyDrawer, VJoyDrawerTrigger, VJoyDropdown, VJoyDropdownList, VJoyFilterBar, VJoyFilterBarButton, VJoyFooter, VJoyFormError, VJoyFormFieldSkeleton, VJoyFunnel, VJoyHeader, VJoyHighlight, VJoyIcon, VJoyIndicator, VJoyIndicators, VJoyInput, VJoyLabel, VJoyLink, VJoyMenu, VJoyMultiCheckbox, VJoyPagination, VJoyPanel, VJoyPanelSection, VJoyProductTour, VJoyProductTourTrigger, VJoyProgressBar, VJoyRadio, VJoyRadioGroup, VJoyRatingStars, VJoyScreenLoader, VJoySelect, VJoySelectableItem, VJoySelectableItemGroup, VJoySeparator, VJoySnackbar, VJoySpinner, VJoyStep, VJoyStepper, VJoyTab, VJoyTabs, VJoyTag, VJoyTagsInput, VJoyTagsList, VJoyTemplate, VJoyTemplateShape, VJoyText, VJoyTextarea, VJoyToggle, VJoyTooltip, VJoyUserCard, VJoyWrapper, };

package/dist/components/main.d.ts

@@ -6,4 +6,4 @@ export declare const JoyVuePlugin: {
     }) => void;
 };
 export * from './';
-export * from './JoySnackbar';
+export { createAllSnackbarsContainer, pushVJoySnackbar, resetCount } from './JoySnackbar';

package/dist/helpers/index.d.ts

@@ -1,11 +1,11 @@
 import { TJoyIconsNames } from '@/components/JoyIcon/JoyIcon.types';
 import { Ref } from 'vue';
-import { LEVELS } from '../types';
+import { TLevels } from '../types';
 /**
  * Check if you are working on dev environment. Based on `getMode` util that returns import.meta.env.MODE,
  */
 export declare const isDevMode: boolean;
-export declare function iconLevel(level: (typeof LEVELS)[number]): TJoyIconsNames;
+export declare function iconLevel(level: TLevels): TJoyIconsNames;
 export declare function focusOnFirstFocusableFormField(root: Ref): any;
 export declare const generateRandomId: (length?: number) => string;
 /**