@mantine-vue/core 3.0.0 → 3.1.0

package/lib/components/Grid/GridVariables.d.ts

@@ -1,63 +1,2 @@
-import { type PropType } from 'vue';
-import type { GridBreakpoints } from './Grid.context';
-type StyleProp<T> = T | Partial<Record<string, T>>;
-export declare const GridVariables: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    selector: {
-        type: StringConstructor;
-        required: true;
-    };
-    gap: {
-        type: PropType<StyleProp<string | number>>;
-        default: undefined;
-    };
-    rowGap: {
-        type: PropType<StyleProp<string | number>>;
-        default: undefined;
-    };
-    columnGap: {
-        type: PropType<StyleProp<string | number>>;
-        default: undefined;
-    };
-    breakpoints: {
-        type: PropType<GridBreakpoints>;
-        default: undefined;
-    };
-    type: {
-        type: PropType<"container" | "media">;
-        default: undefined;
-    };
-}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    selector: {
-        type: StringConstructor;
-        required: true;
-    };
-    gap: {
-        type: PropType<StyleProp<string | number>>;
-        default: undefined;
-    };
-    rowGap: {
-        type: PropType<StyleProp<string | number>>;
-        default: undefined;
-    };
-    columnGap: {
-        type: PropType<StyleProp<string | number>>;
-        default: undefined;
-    };
-    breakpoints: {
-        type: PropType<GridBreakpoints>;
-        default: undefined;
-    };
-    type: {
-        type: PropType<"container" | "media">;
-        default: undefined;
-    };
-}>> & Readonly<{}>, {
-    breakpoints: GridBreakpoints;
-    type: "media" | "container";
-    columnGap: StyleProp<string | number>;
-    rowGap: StyleProp<string | number>;
-    gap: StyleProp<string | number>;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export {};
+export { default as GridVariables } from './GridVariables.vue';
+export type { GridVariablesProps } from './GridVariables.vue';

package/lib/components/Grid/GridVariables.vue.d.ts

@@ -0,0 +1,23 @@
+import type { StyleProp } from '../../core';
+import type { GridBreakpoints } from './Grid.context';
+/** Props of `GridVariables`. This component is internal to `Grid`. */
+export interface GridVariablesProps {
+    /** CSS selector the generated variables are scoped to. */
+    selector: string;
+    /** Gap between the columns and the rows. */
+    gap?: StyleProp<string | number>;
+    /** Gap between the rows. */
+    rowGap?: StyleProp<string | number>;
+    /** Gap between the columns. */
+    columnGap?: StyleProp<string | number>;
+    /** Breakpoints the responsive values are resolved against. Defaults to `theme.breakpoints`. */
+    breakpoints?: GridBreakpoints;
+    /** Whether the responsive values use container queries or media queries. */
+    type?: 'container' | 'media';
+}
+/** A responsive value is an object keyed by breakpoint; anything else is a base value. */
+declare function isObject(value: unknown): value is Record<string, any>;
+export { isObject };
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<GridVariablesProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<GridVariablesProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/lib/components/Group/Group.d.ts

@@ -1,91 +1,12 @@
-import { type PropType, type VNode } from 'vue';
-import { type AlignItems, type FlexWrap, type JustifyContent, type MantineSpacing } from '../../core';
-export declare const Group: import("../..").WithBoxProps<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    justify: {
-        type: PropType<JustifyContent>;
-        default: undefined;
-    };
-    align: {
-        type: PropType<AlignItems>;
-        default: undefined;
-    };
-    wrap: {
-        type: PropType<FlexWrap>;
-        default: undefined;
-    };
-    gap: PropType<MantineSpacing>;
-    grow: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    preventGrowOverflow: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    classNames: {
-        type: (ObjectConstructor | FunctionConstructor)[];
-        default: undefined;
-    };
-    styles: {
-        type: (ObjectConstructor | FunctionConstructor)[];
-        default: undefined;
-    };
-    vars: {
-        type: (ObjectConstructor | FunctionConstructor)[];
-        default: undefined;
-    };
-    unstyled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    justify: {
-        type: PropType<JustifyContent>;
-        default: undefined;
-    };
-    align: {
-        type: PropType<AlignItems>;
-        default: undefined;
-    };
-    wrap: {
-        type: PropType<FlexWrap>;
-        default: undefined;
-    };
-    gap: PropType<MantineSpacing>;
-    grow: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    preventGrowOverflow: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    classNames: {
-        type: (ObjectConstructor | FunctionConstructor)[];
-        default: undefined;
-    };
-    styles: {
-        type: (ObjectConstructor | FunctionConstructor)[];
-        default: undefined;
-    };
-    vars: {
-        type: (ObjectConstructor | FunctionConstructor)[];
-        default: undefined;
-    };
-    unstyled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>> & Readonly<{}>, {
-    wrap: import("csstype").Property.FlexWrap | undefined;
-    classNames: Function | Record<string, any>;
-    styles: Function | Record<string, any>;
-    justify: import("csstype").Property.JustifyContent | undefined;
-    vars: Function | Record<string, any>;
-    unstyled: boolean;
-    align: import("csstype").Property.AlignItems | undefined;
-    grow: boolean;
-    preventGrowOverflow: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;
+export declare const Group: import("../..").MantineComponent<{
+    props: Omit<import("./Group.types").GroupProps, "rootRef">;
+    slots: import("./Group.types").GroupSlots;
+    ref: HTMLDivElement;
+    exposed: {
+        rootElement: Element | null;
+    };
+    element: "div";
+    stylesNames: import("./Group.types").GroupStylesNames;
+    vars: import("./Group.types").GroupCssVariables;
+}>;
+export type { GroupCssVariables, GroupFactory, GroupOwnProps, GroupProps, GroupSlots, GroupStylesNames, } from './Group.types';

package/lib/components/Group/Group.types.d.ts

@@ -0,0 +1,65 @@
+import type { VNodeChild } from 'vue';
+import type { VueRefTarget } from '@mantine-vue/hooks';
+import type { AlignItems, BoxProps, Factory, FlexWrap, JustifyContent, MantineSpacing, StylesApiProps } from '../../core';
+export type GroupStylesNames = 'root';
+export type GroupCssVariables = {
+    root: '--group-child-width' | '--group-gap' | '--group-align' | '--group-justify' | '--group-wrap';
+};
+/** Props declared by `Group` itself. See `GroupProps` for the full public type. */
+export interface GroupOwnProps extends StylesApiProps<GroupFactory> {
+    /** Receives the root DOM node. */
+    rootRef?: VueRefTarget<Element>;
+    /**
+     * Controls `justify-content` CSS property
+     *
+     * @default 'flex-start'
+     */
+    justify?: JustifyContent;
+    /**
+     * Controls `align-items` CSS property
+     *
+     * @default 'center'
+     */
+    align?: AlignItems;
+    /**
+     * Controls `flex-wrap` CSS property
+     *
+     * @default 'wrap'
+     */
+    wrap?: FlexWrap;
+    /**
+     * Key of `theme.spacing` or any valid CSS value for `gap`, numbers are converted to rem
+     *
+     * @default 'md'
+     */
+    gap?: MantineSpacing;
+    /**
+     * Determines whether each child element should have `flex-grow: 1` style
+     *
+     * @default false
+     */
+    grow?: boolean;
+    /**
+     * Determines whether children should take only dedicated amount of space (`max-width` style is set based on the number of children)
+     *
+     * @default true
+     */
+    preventGrowOverflow?: boolean;
+}
+export interface GroupProps extends Omit<BoxProps, keyof GroupOwnProps>, GroupOwnProps {
+}
+export interface GroupSlots {
+    /** Group children used to calculate the grow width. */
+    default?: () => VNodeChild;
+}
+export type GroupFactory = Factory<{
+    props: Omit<GroupProps, 'rootRef'>;
+    slots: GroupSlots;
+    ref: HTMLDivElement;
+    exposed: {
+        rootElement: Element | null;
+    };
+    element: 'div';
+    stylesNames: GroupStylesNames;
+    vars: GroupCssVariables;
+}>;

package/lib/components/Group/Group.vue.d.ts

@@ -0,0 +1,13 @@
+import type { GroupOwnProps, GroupSlots } from './Group.types';
+declare const varsResolver: (theme: import("../..").MantineTheme, props: any, ctx: Record<string, any>) => Record<string, Record<string, string | undefined>>;
+export { varsResolver };
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<GroupOwnProps, {
+    rootElement: import("vue").Ref<Element | null, Element | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<GroupOwnProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, GroupSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/components/Highlight/Highlight.d.ts

@@ -1,119 +1,17 @@
-import { type PropType } from 'vue';
-import { type MantineColor } from '../../core';
-export interface HighlightTerm {
-    text: string;
-    color?: MantineColor;
-}
-export declare const Highlight: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    highlight: {
-        type: PropType<string | string[] | HighlightTerm[]>;
-        required: true;
-    };
-    color: {
-        type: PropType<MantineColor>;
-        default: undefined;
-    };
-    highlightStyles: {
-        type: PropType<Record<string, any> | ((theme: any) => Record<string, any>)>;
-        default: undefined;
-    };
-    wholeWord: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    caseInsensitive: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    accentInsensitive: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    component: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    span: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    unstyled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    classNames: {
-        type: (ObjectConstructor | FunctionConstructor)[];
-        default: undefined;
-    };
-    styles: {
-        type: (ObjectConstructor | FunctionConstructor)[];
-        default: undefined;
-    };
-    vars: {
-        type: (ObjectConstructor | FunctionConstructor)[];
-        default: undefined;
-    };
-}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    highlight: {
-        type: PropType<string | string[] | HighlightTerm[]>;
-        required: true;
-    };
-    color: {
-        type: PropType<MantineColor>;
-        default: undefined;
-    };
-    highlightStyles: {
-        type: PropType<Record<string, any> | ((theme: any) => Record<string, any>)>;
-        default: undefined;
-    };
-    wholeWord: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    caseInsensitive: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    accentInsensitive: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    component: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    span: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    unstyled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    classNames: {
-        type: (ObjectConstructor | FunctionConstructor)[];
-        default: undefined;
-    };
-    styles: {
-        type: (ObjectConstructor | FunctionConstructor)[];
-        default: undefined;
-    };
-    vars: {
-        type: (ObjectConstructor | FunctionConstructor)[];
-        default: undefined;
-    };
-}>> & Readonly<{}>, {
-    span: boolean;
-    color: MantineColor;
-    classNames: Function | Record<string, any>;
-    styles: Function | Record<string, any>;
-    component: string;
-    vars: Function | Record<string, any>;
-    unstyled: boolean;
-    wholeWord: boolean;
-    caseInsensitive: boolean;
-    accentInsensitive: boolean;
-    highlightStyles: Record<string, any> | ((theme: any) => Record<string, any>);
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/**
+ * `Highlight` has no CSS module of its own -- it renders `Text` and forwards the Styles API, so
+ * Text's classes are the ones its style names refer to.
+ */
+export declare const Highlight: import("../..").MantinePolymorphicComponent<{
+    props: Omit<import("./Highlight.types").HighlightProps, "component" | "rootRef">;
+    slots: import("./Highlight.types").HighlightSlots;
+    ref: HTMLParagraphElement;
+    exposed: {
+        rootElement: Element | null;
+    };
+    defaultComponent: "p";
+    defaultRef: HTMLParagraphElement;
+    stylesNames: import("..").TextStylesNames;
+    variant: import("..").TextVariant;
+}, "p">;
+export type { HighlightFactory, HighlightOwnProps, HighlightProps, HighlightSlots, HighlightTerm, } from './Highlight.types';

package/lib/components/Highlight/Highlight.types.d.ts

@@ -0,0 +1,86 @@
+import type { CSSProperties, VNodeChild } from 'vue';
+import type { BoxProps, MantineColor, MantineTheme, StylesApiProps, MantineElementType, PolymorphicFactory } from '../../core';
+export interface HighlightTerm {
+    /** Text to highlight. */
+    text: string;
+    /** Highlight color for this term. */
+    color?: MantineColor;
+}
+/** Props declared by `Highlight` itself. See `HighlightProps` for the full public type. */
+export interface HighlightOwnProps extends StylesApiProps<HighlightFactory> {
+    /** Receives the root DOM node. */
+    rootRef?: VueRefTarget<Element>;
+    /**
+     * Substring(s) to highlight in `children`. Can be:
+     * - string: single term
+     * - string[]: multiple terms with same color
+     * - HighlightTerm[]: multiple terms with custom colors per term
+     *
+     * - Matching is case-insensitive and accent-insensitive by default, use `caseInsensitive` and `accentInsensitive` props to control this behavior
+     * - Regex special characters are automatically escaped
+     * - When multiple substrings are provided, longer matches take precedence
+     * - Empty strings and whitespace-only strings are ignored
+     */
+    highlight: string | string[] | HighlightTerm[];
+    /**
+     * Default background color for all highlighted text.
+     * Key of `theme.colors` or any valid CSS color, passed to `Mark` component.
+     * Can be overridden per term when using HighlightTerm objects.
+     *
+     * @default 'yellow'
+     */
+    color?: MantineColor;
+    /** Styles applied to `mark` elements */
+    highlightStyles?: CSSProperties | ((theme: MantineTheme) => CSSProperties);
+    /**
+     * Only match whole words (adds word boundaries to regex).
+     * When enabled, 'the' will not match 'there'.
+     *
+     * @default false
+     */
+    wholeWord?: boolean;
+    /**
+     * Perform case-insensitive matching.
+     *
+     * @default true
+     */
+    caseInsensitive?: boolean;
+    /**
+     * Perform accent-insensitive matching.
+     * When enabled cafe will match cafe, café, cafè, etc.
+     *
+     * @default true
+     */
+    accentInsensitive?: boolean;
+    /** Root element or component rendered by `Highlight`. */
+    component?: MantineElementType;
+    /**
+     * Shorthand for `component="span"`
+     *
+     * @default false
+     */
+    span?: boolean;
+}
+export interface HighlightProps extends Omit<BoxProps, keyof HighlightOwnProps>, HighlightOwnProps {
+}
+export interface HighlightSlots {
+    /** Plain-text content to search and highlight. */
+    default?: () => VNodeChild;
+}
+import type { VueRefTarget } from '@mantine-vue/hooks';
+import type { TextStylesNames, TextVariant } from '../Text';
+/**
+ * Public contract of `Highlight`.
+ */
+export type HighlightFactory = PolymorphicFactory<{
+    props: Omit<HighlightProps, 'component' | 'rootRef'>;
+    slots: HighlightSlots;
+    ref: HTMLParagraphElement;
+    exposed: {
+        rootElement: Element | null;
+    };
+    defaultComponent: 'p';
+    defaultRef: HTMLParagraphElement;
+    stylesNames: TextStylesNames;
+    variant: TextVariant;
+}>;

package/lib/components/Highlight/Highlight.vue.d.ts

@@ -0,0 +1,11 @@
+import type { HighlightOwnProps, HighlightSlots } from './Highlight.types';
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<HighlightOwnProps, {
+    rootElement: import("vue").Ref<Element | null, Element | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<HighlightOwnProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, HighlightSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/components/Highlight/index.d.ts

@@ -1,4 +1,5 @@
 export { Highlight } from './Highlight';
-export type { HighlightTerm } from './Highlight';
+export type { HighlightOwnProps, HighlightProps, HighlightSlots, HighlightTerm } from './Highlight';
 export { foldAccents, highlighter } from './highlighter/highlighter';
 export type { HighlightChunk, HighlighterOptions } from './highlighter/highlighter';
+export type { HighlightFactory } from './Highlight';