@mantine-vue/core 1.1.3 → 2.0.0

package/lib/components/Anchor/Anchor.d.ts

@@ -1,4 +1,6 @@
 import { type PropType } from 'vue';
+import type { TextVariant } from '../Text/Text';
+export type AnchorVariant = TextVariant;
 export declare const Anchor: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     component: {
         type: StringConstructor;
@@ -13,7 +15,7 @@ export declare const Anchor: import("vue").DefineComponent<import("vue").Extract
         default: boolean;
     };
     variant: {
-        type: PropType<"text" | "gradient">;
+        type: PropType<AnchorVariant>;
         default: undefined;
     };
     classNames: {
@@ -44,7 +46,7 @@ export declare const Anchor: import("vue").DefineComponent<import("vue").Extract
         default: boolean;
     };
     variant: {
-        type: PropType<"text" | "gradient">;
+        type: PropType<AnchorVariant>;
         default: undefined;
     };
     classNames: {
@@ -60,7 +62,7 @@ export declare const Anchor: import("vue").DefineComponent<import("vue").Extract
         default: undefined;
     };
 }>> & Readonly<{}>, {
-    variant: "gradient" | "text";
+    variant: TextVariant;
     classNames: Function | Record<string, any>;
     styles: Function | Record<string, any>;
     underline: "always" | "never" | "hover" | "not-hover";

package/lib/components/Badge/Badge.d.ts

@@ -1,5 +1,6 @@
 import { type PropType } from 'vue';
-export type BadgeVariant = 'filled' | 'light' | 'outline' | 'dot' | 'transparent' | 'white' | 'default' | 'gradient' | (string & {});
+import { type MantineVariant } from '../../core';
+export type BadgeVariant = 'filled' | 'light' | 'outline' | 'dot' | 'transparent' | 'white' | 'default' | 'gradient';
 export declare const Badge: import("../..").WithBoxProps<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     component: {
         type: StringConstructor;
@@ -40,7 +41,7 @@ export declare const Badge: import("../..").WithBoxProps<import("vue").DefineCom
         default: undefined;
     };
     variant: {
-        type: PropType<BadgeVariant>;
+        type: PropType<MantineVariant<BadgeVariant>>;
         default: undefined;
     };
     classNames: {
@@ -101,7 +102,7 @@ export declare const Badge: import("../..").WithBoxProps<import("vue").DefineCom
         default: undefined;
     };
     variant: {
-        type: PropType<BadgeVariant>;
+        type: PropType<MantineVariant<BadgeVariant>>;
         default: undefined;
     };
     classNames: {
@@ -123,7 +124,7 @@ export declare const Badge: import("../..").WithBoxProps<import("vue").DefineCom
 }>> & Readonly<{}>, {
     color: string;
     autoContrast: boolean;
-    variant: BadgeVariant;
+    variant: MantineVariant<BadgeVariant>;
     gradient: {
         from: string;
         to: string;

package/lib/components/Button/Button.d.ts

@@ -1,7 +1,7 @@
 import { type CSSProperties, type PropType, type SlotsType, type VNodeChild } from 'vue';
-import { type BoxProps, MantineSize, MantineRadius } from '../../core';
+import { type BoxProps, MantineSize, MantineRadius, type MantineVariant } from '../../core';
 export type ButtonSize = MantineSize | `compact-${MantineSize}` | (string & {});
-export type ButtonVariant = 'filled' | 'light' | 'outline' | 'transparent' | 'white' | 'subtle' | 'default' | 'gradient' | (string & {});
+export type ButtonVariant = 'filled' | 'light' | 'outline' | 'transparent' | 'white' | 'subtle' | 'default' | 'gradient';
 export interface ButtonSlots {
     default?: () => VNodeChild;
     leftSection?: () => VNodeChild;
@@ -39,7 +39,7 @@ export interface ButtonProps extends BoxProps {
     /** Component or element used as the root */
     component?: string;
     /** Visual variant */
-    variant?: ButtonVariant;
+    variant?: MantineVariant<ButtonVariant>;
     'data-disabled'?: boolean;
     classNames?: Record<string, string> | ((...args: any[]) => Record<string, string>);
     styles?: Record<string, any> | ((...args: any[]) => Record<string, any>);
@@ -99,7 +99,7 @@ export declare const Button: import("../..").WithBoxProps<{
             default: undefined;
         };
         variant: {
-            type: PropType<ButtonVariant>;
+            type: PropType<MantineVariant<ButtonVariant>>;
             default: undefined;
         };
         mod: {
@@ -135,7 +135,7 @@ export declare const Button: import("../..").WithBoxProps<{
     }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
         color: string;
         autoContrast: boolean;
-        variant: ButtonVariant;
+        variant: MantineVariant<ButtonVariant>;
         gradient: {
             from: string;
             to: string;
@@ -215,7 +215,7 @@ export declare const Button: import("../..").WithBoxProps<{
             default: undefined;
         };
         variant: {
-            type: PropType<ButtonVariant>;
+            type: PropType<MantineVariant<ButtonVariant>>;
             default: undefined;
         };
         mod: {
@@ -251,7 +251,7 @@ export declare const Button: import("../..").WithBoxProps<{
     }>, {}, {}, {}, {
         color: string;
         autoContrast: boolean;
-        variant: ButtonVariant;
+        variant: MantineVariant<ButtonVariant>;
         gradient: {
             from: string;
             to: string;
@@ -328,7 +328,7 @@ export declare const Button: import("../..").WithBoxProps<{
         default: undefined;
     };
     variant: {
-        type: PropType<ButtonVariant>;
+        type: PropType<MantineVariant<ButtonVariant>>;
         default: undefined;
     };
     mod: {
@@ -364,7 +364,7 @@ export declare const Button: import("../..").WithBoxProps<{
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
     color: string;
     autoContrast: boolean;
-    variant: ButtonVariant;
+    variant: MantineVariant<ButtonVariant>;
     gradient: {
         from: string;
         to: string;

package/lib/components/CloseButton/CloseButton.d.ts

@@ -1,4 +1,5 @@
 import { type PropType } from 'vue';
+export type CloseButtonVariant = 'subtle' | 'transparent';
 export declare const CloseButton: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     component: {
         type: StringConstructor;
@@ -16,7 +17,7 @@ export declare const CloseButton: import("vue").DefineComponent<import("vue").Ex
         default: undefined;
     };
     variant: {
-        type: PropType<"subtle" | "transparent">;
+        type: PropType<CloseButtonVariant>;
         default: undefined;
     };
     __staticSelector: {
@@ -58,7 +59,7 @@ export declare const CloseButton: import("vue").DefineComponent<import("vue").Ex
         default: undefined;
     };
     variant: {
-        type: PropType<"subtle" | "transparent">;
+        type: PropType<CloseButtonVariant>;
         default: undefined;
     };
     __staticSelector: {
@@ -82,7 +83,7 @@ export declare const CloseButton: import("vue").DefineComponent<import("vue").Ex
         default: boolean;
     };
 }>> & Readonly<{}>, {
-    variant: "transparent" | "subtle";
+    variant: CloseButtonVariant;
     classNames: Function | Record<string, any>;
     styles: Function | Record<string, any>;
     disabled: boolean;

package/lib/components/PinInput/PinInput.d.ts

@@ -4,6 +4,8 @@ export type PinInputStylesNames = 'root' | 'pinInput' | 'input';
 export type PinInputCssVariables = {
     root: '--pin-input-size';
 };
+export type PinInputTypeAttribute = 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week' | (string & {});
+export type PinInputMode = 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
 export interface PinInputProps {
     name?: string;
     form?: string;
@@ -25,8 +27,8 @@ export interface PinInputProps {
     mask?: boolean;
     length?: number;
     readOnly?: boolean;
-    inputType?: string;
-    inputMode?: string;
+    inputType?: PinInputTypeAttribute;
+    inputMode?: PinInputMode;
     ariaLabel?: string;
     hiddenInputProps?: Record<string, any>;
     rootRef?: VueRefTarget<HTMLDivElement>;
@@ -120,11 +122,11 @@ export declare const PinInput: import("../..").WithBoxProps<import("vue").Define
         default: boolean;
     };
     inputType: {
-        type: StringConstructor;
+        type: PropType<PinInputTypeAttribute>;
         default: undefined;
     };
     inputMode: {
-        type: StringConstructor;
+        type: PropType<PinInputMode>;
         default: undefined;
     };
     ariaLabel: {
@@ -251,11 +253,11 @@ export declare const PinInput: import("../..").WithBoxProps<import("vue").Define
         default: boolean;
     };
     inputType: {
-        type: StringConstructor;
+        type: PropType<PinInputTypeAttribute>;
         default: undefined;
     };
     inputMode: {
-        type: StringConstructor;
+        type: PropType<PinInputMode>;
         default: undefined;
     };
     ariaLabel: {
@@ -324,11 +326,11 @@ export declare const PinInput: import("../..").WithBoxProps<import("vue").Define
     inputRef: VueRefTarget<HTMLInputElement>;
     rootRef: VueRefTarget<HTMLDivElement>;
     readOnly: boolean;
-    inputMode: string;
+    inputMode: PinInputMode;
     autoFocus: boolean;
     manageFocus: boolean;
     oneTimeCode: boolean;
-    inputType: string;
+    inputType: PinInputTypeAttribute;
     ariaLabel: string;
     getInputProps: (index: number) => Record<string, any>;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;

package/lib/components/Table/Table.d.ts

@@ -1,4 +1,4 @@
-import { type PropType } from 'vue';
+import { type CSSProperties, type PropType } from 'vue';
 export type TableVariant = 'default' | 'vertical';
 export type TableStylesNames = 'table' | 'thead' | 'tbody' | 'tfoot' | 'tr' | 'th' | 'td' | 'caption';
 export interface TableData {
@@ -10,7 +10,7 @@ export interface TableData {
 export declare const Table: import("../..").WithBoxProps<{
     new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
         layout: {
-            type: PropType<string>;
+            type: PropType<CSSProperties["tableLayout"]>;
             default: undefined;
         };
         captionSide: {
@@ -105,7 +105,7 @@ export declare const Table: import("../..").WithBoxProps<{
         classNames: Function | Record<string, any>;
         styles: Function | Record<string, any>;
         mod: any;
-        layout: string;
+        layout: import("csstype").Property.TableLayout | undefined;
         captionSide: "top" | "bottom";
         borderColor: string;
         vars: Function | Record<string, any>;
@@ -131,7 +131,7 @@ export declare const Table: import("../..").WithBoxProps<{
         Defaults: {};
     }, Readonly<import("vue").ExtractPropTypes<{
         layout: {
-            type: PropType<string>;
+            type: PropType<CSSProperties["tableLayout"]>;
             default: undefined;
         };
         captionSide: {
@@ -226,7 +226,7 @@ export declare const Table: import("../..").WithBoxProps<{
         classNames: Function | Record<string, any>;
         styles: Function | Record<string, any>;
         mod: any;
-        layout: string;
+        layout: import("csstype").Property.TableLayout | undefined;
         captionSide: "top" | "bottom";
         borderColor: string;
         vars: Function | Record<string, any>;
@@ -249,7 +249,7 @@ export declare const Table: import("../..").WithBoxProps<{
     __isSuspense?: never;
 } & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
     layout: {
-        type: PropType<string>;
+        type: PropType<CSSProperties["tableLayout"]>;
         default: undefined;
     };
     captionSide: {
@@ -344,7 +344,7 @@ export declare const Table: import("../..").WithBoxProps<{
     classNames: Function | Record<string, any>;
     styles: Function | Record<string, any>;
     mod: any;
-    layout: string;
+    layout: import("csstype").Property.TableLayout | undefined;
     captionSide: "top" | "bottom";
     borderColor: string;
     vars: Function | Record<string, any>;

package/lib/components/Text/Text.d.ts

@@ -1,5 +1,6 @@
 import { type PropType } from 'vue';
-type TextTruncate = 'end' | 'start' | boolean;
+export type TextTruncate = 'end' | 'start' | boolean;
+export type TextVariant = 'text' | 'gradient';
 export declare const Text: import("../..").WithBoxProps<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     component: {
         type: StringConstructor;
@@ -43,7 +44,7 @@ export declare const Text: import("../..").WithBoxProps<import("vue").DefineComp
         default: undefined;
     };
     variant: {
-        type: PropType<"text" | "gradient">;
+        type: PropType<TextVariant>;
         default: undefined;
     };
     mod: {
@@ -111,7 +112,7 @@ export declare const Text: import("../..").WithBoxProps<import("vue").DefineComp
         default: undefined;
     };
     variant: {
-        type: PropType<"text" | "gradient">;
+        type: PropType<TextVariant>;
         default: undefined;
     };
     mod: {
@@ -135,7 +136,7 @@ export declare const Text: import("../..").WithBoxProps<import("vue").DefineComp
         default: boolean;
     };
 }>> & Readonly<{}>, {
-    variant: "gradient" | "text";
+    variant: TextVariant;
     gradient: {
         from: string;
         to: string;
@@ -155,4 +156,3 @@ export declare const Text: import("../..").WithBoxProps<import("vue").DefineComp
     __staticSelector: string;
     truncate: TextTruncate;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;
-export {};

package/lib/components/ThemeIcon/ThemeIcon.d.ts

@@ -1,5 +1,6 @@
 import { type PropType } from 'vue';
-export type ThemeIconVariant = 'filled' | 'light' | 'outline' | 'transparent' | 'white' | 'default' | 'gradient' | (string & {});
+import { type MantineVariant } from '../../core';
+export type ThemeIconVariant = 'filled' | 'light' | 'outline' | 'transparent' | 'white' | 'default' | 'gradient';
 export declare const ThemeIcon: import("../..").WithBoxProps<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     size: PropType<string | number>;
     color: {
@@ -20,7 +21,7 @@ export declare const ThemeIcon: import("../..").WithBoxProps<import("vue").Defin
         default: undefined;
     };
     variant: {
-        type: PropType<ThemeIconVariant>;
+        type: PropType<MantineVariant<ThemeIconVariant>>;
         default: undefined;
     };
     classNames: {
@@ -61,7 +62,7 @@ export declare const ThemeIcon: import("../..").WithBoxProps<import("vue").Defin
         default: undefined;
     };
     variant: {
-        type: PropType<ThemeIconVariant>;
+        type: PropType<MantineVariant<ThemeIconVariant>>;
         default: undefined;
     };
     classNames: {
@@ -83,7 +84,7 @@ export declare const ThemeIcon: import("../..").WithBoxProps<import("vue").Defin
 }>> & Readonly<{}>, {
     color: string;
     autoContrast: boolean;
-    variant: ThemeIconVariant;
+    variant: MantineVariant<ThemeIconVariant>;
     gradient: {
         from: string;
         to: string;

package/lib/core/factory/with-box-props.d.ts

@@ -4,15 +4,15 @@ import type { BoxProps } from '../Box';
  * Mantine style props (m, mt, p, w, h, bg, c, …) and Box layout props
  * (hiddenFrom, visibleFrom, mod, …) are available for autocomplete/IntelliSense
  * and type-checking.
- *
- * Runtime is untouched: these props already pass through to the underlying Box
- * as fall-through attributes. The merge happens at the instance level
- * (`InstanceType<C> & { $props: BoxProps }`) so the component's own props,
- * slots, emits and static members (e.g. `Group`) are all preserved.
  */
+type InstanceOf<C> = C extends new (...args: any[]) => infer I ? I : object;
+type OwnProps<C> = InstanceOf<C> extends {
+    $props: infer P;
+} ? P : object;
 export type WithBoxProps<C> = C & {
-    new (): (C extends new (...args: any[]) => infer I ? I : object) & {
-        $props: BoxProps;
+    new (): InstanceOf<C> & {
+        $props: OwnProps<C> & Omit<BoxProps, keyof OwnProps<C>>;
     };
 };
 export declare function withBoxProps<C>(component: C): WithBoxProps<C>;
+export {};

package/lib/core/types.d.ts

@@ -4,6 +4,7 @@ export type MantineStyle = CSSProperties;
 export type MantineClassNames = Record<string, string>;
 export type MantineStyles = Record<string, MantineStyle>;
 export type MantineVars = Record<string, Record<string, string | undefined>>;
+export type MantineVariant<T extends string> = T | (string & {});
 export interface MantineComponentTheme {
     classNames?: MantineClassNames | ((theme: MantineTheme, props: any) => MantineClassNames);
     styles?: MantineStyles | ((theme: MantineTheme, props: any) => MantineStyles);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine-vue/core",
-  "version": "1.1.3",
+  "version": "2.0.0",
   "description": "Vue component foundation architecturally equivalent to @mantine/core",
   "license": "MIT",
   "files": [
@@ -44,8 +44,8 @@
     "vue": "^3.5.0"
   },
   "peerDependencies": {
-    "@mantine-vue/hooks": "1.1.3",
-    "@mantine-vue/utils": "1.1.3",
+    "@mantine-vue/hooks": "2.0.0",
+    "@mantine-vue/utils": "2.0.0",
     "vue": "^3.5.0"
   }
 }