@mantine-vue/core 3.1.0 → 3.3.0

package/lib/components/ActionBar/ActionBar.context.d.ts

@@ -0,0 +1,6 @@
+export interface ActionBarContextValue {
+    getStyles: (selector: string, options?: Record<string, any>) => any;
+    close: () => void;
+    unstyled?: boolean;
+}
+export declare const provideActionBarContext: (value: ActionBarContextValue) => void, useActionBarContext: () => ActionBarContextValue;

package/lib/components/ActionBar/ActionBar.d.ts

@@ -0,0 +1,15 @@
+import { ActionBarCloseButton } from './ActionBarCloseButton/ActionBarCloseButton';
+import { ActionBarDivider } from './ActionBarDivider/ActionBarDivider';
+export declare const ActionBar: import("../..").MantineComponent<{
+    props: Omit<import("./ActionBar.types").ActionBarProps, "rootRef">;
+    ref: HTMLDivElement;
+    slots: import("./ActionBar.types").ActionBarSlots;
+    emits: import("./ActionBar.types").ActionBarEmits;
+    element: "div";
+    stylesNames: import("./ActionBar.types").ActionBarStylesNames;
+    staticComponents: {
+        Divider: typeof ActionBarDivider;
+        CloseButton: typeof ActionBarCloseButton;
+    };
+}>;
+export type { ActionBarEmits, ActionBarFactory, ActionBarOwnProps, ActionBarProps, ActionBarSlots, ActionBarStylesNames, } from './ActionBar.types';

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

@@ -0,0 +1,59 @@
+import type { VueRefTarget } from '@mantine-vue/hooks';
+import type { VNodeChild } from 'vue';
+import type { BoxProps, Factory, MantineRadius, MantineShadow, MantineSpacing, StylesApiProps } from '../../core';
+import type { AffixPosition } from '../Affix';
+import type { TransitionOverride } from '../Transition';
+import type { ActionBarCloseButton } from './ActionBarCloseButton/ActionBarCloseButton';
+import type { ActionBarDivider } from './ActionBarDivider/ActionBarDivider';
+export type ActionBarStylesNames = 'root' | 'divider' | 'closeButton';
+export interface ActionBarOwnProps extends StylesApiProps<ActionBarFactory> {
+    /** Receives the root DOM node. */
+    rootRef?: VueRefTarget<Element>;
+    /** Controls visibility. */
+    opened: boolean;
+    /** Props passed to the transition. @default { transition: 'pop', duration: 200 } */
+    transitionProps?: TransitionOverride;
+    /** Key of `theme.shadows` or any valid `box-shadow` value. */
+    shadow?: MantineShadow;
+    /** Key of `theme.radius` or any valid CSS value. */
+    radius?: MantineRadius;
+    /** Adds a border to the action bar. @default true */
+    withBorder?: boolean;
+    /** Vertical padding. @default 'xs' */
+    py?: MantineSpacing;
+    /** Horizontal padding. @default 'sm' */
+    px?: MantineSpacing;
+    /** Fixed position of the action bar. @default { bottom: 30, left: 0, right: 0 } */
+    position?: AffixPosition;
+    /** Root z-index. @default getDefaultZIndex('modal') */
+    zIndex?: string | number;
+    /** Determines whether the action bar is rendered in a portal. @default true */
+    withinPortal?: boolean;
+    /** Props passed to the portal. */
+    portalProps?: Record<string, any>;
+    /** Closes the action bar when Escape is pressed. @default false */
+    closeOnEscape?: boolean;
+    /** Keeps the root node mounted with `display: none` when closed. @default false */
+    keepMounted?: boolean;
+}
+export interface ActionBarProps extends Omit<BoxProps, keyof ActionBarOwnProps>, ActionBarOwnProps {
+}
+export interface ActionBarSlots {
+    default?: () => VNodeChild;
+}
+export interface ActionBarEmits {
+    close: [];
+    'update:opened': [opened: boolean];
+}
+export type ActionBarFactory = Factory<{
+    props: Omit<ActionBarProps, 'rootRef'>;
+    ref: HTMLDivElement;
+    slots: ActionBarSlots;
+    emits: ActionBarEmits;
+    element: 'div';
+    stylesNames: ActionBarStylesNames;
+    staticComponents: {
+        Divider: typeof ActionBarDivider;
+        CloseButton: typeof ActionBarCloseButton;
+    };
+}>;

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

@@ -0,0 +1,35 @@
+import type { ActionBarOwnProps, ActionBarSlots } from './ActionBar.types';
+declare const defaultProps: {
+    readonly withBorder: true;
+    readonly py: "xs";
+    readonly px: "sm";
+    readonly position: {
+        readonly bottom: 30;
+        readonly left: 0;
+        readonly right: 0;
+    };
+    readonly transitionProps: {
+        readonly transition: "pop";
+        readonly duration: 200;
+    };
+    readonly closeOnEscape: false;
+    readonly withinPortal: true;
+    readonly zIndex: number;
+};
+export { defaultProps };
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ActionBarOwnProps, {
+    rootElement: import("vue").Ref<Element | null, Element | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+    "update:opened": (opened: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<ActionBarOwnProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+    "onUpdate:opened"?: ((opened: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ActionBarSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/components/ActionBar/ActionBarCloseButton/ActionBarCloseButton.d.ts

@@ -0,0 +1,6 @@
+export declare const ActionBarCloseButton: import("vue").DefineComponent<{
+    unstyled?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    unstyled?: boolean;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export type { ActionBarCloseButtonProps, ActionBarCloseButtonStylesNames, } from './ActionBarCloseButton.types';

package/lib/components/ActionBar/ActionBarCloseButton/ActionBarCloseButton.types.d.ts

@@ -0,0 +1,3 @@
+import type { CloseButtonProps } from '../../CloseButton';
+export type ActionBarCloseButtonProps = CloseButtonProps;
+export type ActionBarCloseButtonStylesNames = 'closeButton';

package/lib/components/ActionBar/ActionBarCloseButton/ActionBarCloseButton.vue.d.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    unstyled?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/lib/components/ActionBar/ActionBarDivider/ActionBarDivider.d.ts

@@ -0,0 +1,2 @@
+export declare const ActionBarDivider: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export type { ActionBarDividerProps, ActionBarDividerStylesNames } from './ActionBarDivider.types';

package/lib/components/ActionBar/ActionBarDivider/ActionBarDivider.types.d.ts

@@ -0,0 +1,3 @@
+import type { BoxProps } from '../../../core';
+export type ActionBarDividerProps = BoxProps;
+export type ActionBarDividerStylesNames = 'divider';

package/lib/components/ActionBar/ActionBarDivider/ActionBarDivider.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,3 @@
+export * from './ActionBar';
+export * from './ActionBarCloseButton/ActionBarCloseButton';
+export * from './ActionBarDivider/ActionBarDivider';

package/lib/components/Autocomplete/Autocomplete.d.ts

@@ -49,10 +49,10 @@ export declare const Autocomplete: {
     $slots: import("./Autocomplete.types").AutocompleteSlots;
 }) & {
     classes: {
-        label: string;
         root: string;
-        wrapper: string;
+        label: string;
         section: string;
+        wrapper: string;
         input: string;
         bottomSection: string;
         required: string;

package/lib/components/Cascader/Cascader.d.ts

@@ -54,10 +54,10 @@ export declare const Cascader: {
     $slots: import("./Cascader.types").CascaderSlots;
 }) & {
     classes: {
-        label: string;
         root: string;
-        wrapper: string;
+        label: string;
         section: string;
+        wrapper: string;
         input: string;
         bottomSection: string;
         required: string;

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

@@ -11,6 +11,10 @@ export interface CascaderFormatValueInput {
     options: CascaderOption[];
 }
 export type CascaderFormatValue = (input: CascaderFormatValueInput) => string;
+export interface CascaderSafeAreaPolygonOptions {
+    buffer?: number;
+    requireIntent?: boolean;
+}
 export interface CascaderSlots {
     label?: () => VNodeChild;
     description?: () => VNodeChild;
@@ -82,6 +86,8 @@ export interface CascaderProps {
      * @default 'click'
      */
     expandTrigger?: 'click' | 'hover';
+    /** Keeps the current column open while the pointer travels toward its child column. @default true */
+    safeAreaPolygon?: boolean | CascaderSafeAreaPolygonOptions;
     /**
      * If set, the input can be typed into to search the whole tree, which replaces the
      * columns with a flat list of matching paths.

package/lib/components/Checkbox/CheckboxCard/CheckboxCard.types.d.ts

@@ -7,6 +7,8 @@ export type CheckboxCardCssVariables = {
 export interface CheckboxCardContextValue {
     /** Checked state of the enclosing card, read by `Checkbox.Indicator`. */
     checked: boolean;
+    /** Indeterminate state of the enclosing card. */
+    indeterminate?: boolean;
 }
 export interface CheckboxCardSlots {
     /** Card content, usually a `Checkbox.Indicator` and a label. */
@@ -22,6 +24,8 @@ export interface CheckboxCardOwnProps extends StylesApiProps<CheckboxCardFactory
     checked?: boolean;
     /** Uncontrolled initial checked state. */
     defaultChecked?: boolean;
+    /** Indeterminate state. If set, `checked` is ignored for accessibility and `aria-checked` is `mixed`. */
+    indeterminate?: boolean;
     /**
      * If set, the card has a border.
      *

package/lib/components/ColorInput/ColorInput.d.ts

@@ -34,10 +34,10 @@ export declare const ColorInput: {
     $slots: import("./ColorInput.types").ColorInputSlots;
 }) & {
     classes: {
-        label: string;
         root: string;
-        wrapper: string;
+        label: string;
         section: string;
+        wrapper: string;
         input: string;
         bottomSection: string;
         required: string;

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

@@ -80,6 +80,8 @@ export interface ColorInputProps {
      * @default 7
      */
     swatchesPerRow?: number;
+    /** If set, the picker and popover take the full width of the input. @default false */
+    fullWidth?: boolean;
     /** Any other prop is forwarded to the underlying `InputBase`. */
     [key: string]: any;
 }

package/lib/components/Combobox/data-utils.d.ts

@@ -3,6 +3,10 @@ import type { ComboboxData, ComboboxGenericData, ComboboxItem, ComboboxParsedIte
 export declare function getParsedComboboxData<Value extends Primitive = string>(data?: ComboboxData<Value> | ComboboxGenericData<Value>): ComboboxParsedItem<Value>[];
 export declare function isOptionsGroup<Value extends Primitive>(item: ComboboxParsedItem<Value>): item is ComboboxParsedItemGroup<Value>;
 export declare function getOptionsLockup<Value extends Primitive = string>(options: ComboboxParsedItem<Value>[]): Record<PropertyKey, ComboboxItem<Value>>;
+/** Finds one enabled option by label, ignoring casing and surrounding whitespace. */
+export declare function getOptionByLabel<Value extends Primitive = string>(optionsLockup: Record<PropertyKey, ComboboxItem<Value>>, label: string): ComboboxItem<Value> | undefined;
+/** Detects browser autofill and extension writes, which occur without focusing the input. */
+export declare function isExternalInputChange(event: Event): boolean;
 export declare function defaultOptionsFilter<Value extends Primitive>({ options, search, limit, }: {
     options: ComboboxParsedItem<Value>[];
     search: string;

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

@@ -9,7 +9,7 @@ export { OptionsDropdown } from './OptionsDropdown/OptionsDropdown';
 export type { OptionsDropdownProps, OptionsData } from './OptionsDropdown/OptionsDropdown';
 export { usePillsReorder } from './use-pills-reorder/use-pills-reorder';
 export type { PillReorderProps, UsePillsReorderInput } from './use-pills-reorder/use-pills-reorder';
-export { getParsedComboboxData, getOptionsLockup, isOptionsGroup, defaultOptionsFilter, isEmptyComboboxData, validateOptions, movePill, } from './data-utils';
+export { getParsedComboboxData, getOptionsLockup, isOptionsGroup, defaultOptionsFilter, isEmptyComboboxData, validateOptions, movePill, getOptionByLabel, isExternalInputChange, } from './data-utils';
 export type { ComboboxData, ComboboxGenericData, ComboboxGenericItem, ComboboxItem, ComboboxItemGroup, ComboboxParsedItem, ComboboxParsedItemGroup, ComboboxLikeProps, ComboboxLikeRenderOptionInput, OptionsFilter, } from './Combobox.types';
 export { useComboboxContext } from './Combobox.context';
 export type { ComboboxContextValue } from './Combobox.context';

package/lib/components/MultiSelect/MultiSelect.d.ts

@@ -69,10 +69,10 @@ export declare const MultiSelect: {
     $slots: import("./MultiSelect.types").MultiSelectSlots;
 }) & {
     classes: {
-        label: string;
         root: string;
-        wrapper: string;
+        label: string;
         section: string;
+        wrapper: string;
         input: string;
         bottomSection: string;
         required: string;

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

@@ -1,5 +1,6 @@
 import type { VNodeChild } from 'vue';
 import type { BoxMod, BoxProps, MantineColor, MantineNode, MantineRadius, StylesApiProps, Factory } from '../../core';
+import type { CloseButtonProps } from '../CloseButton';
 export type NotificationStylesNames = 'root' | 'icon' | 'loader' | 'body' | 'title' | 'description' | 'closeButton';
 /** Props declared by `Notification` itself. See `NotificationProps` for the full public type. */
 export interface NotificationOwnProps extends StylesApiProps<NotificationFactory> {
@@ -40,7 +41,7 @@ export interface NotificationOwnProps extends StylesApiProps<NotificationFactory
      */
     withCloseButton?: boolean;
     /** Props passed down to the close button */
-    closeButtonProps?: Record<string, any>;
+    closeButtonProps?: CloseButtonProps;
     /** Props passed down to the `Loader` component */
     loaderProps?: Record<string, any>;
     /** Element modifiers transformed into `data-` attributes, for example, `{ 'data-size': 'xl' }`, falsy values are removed */

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

@@ -41,6 +41,8 @@ export interface PasswordInputOwnProps extends StylesApiProps {
     visibilityToggleIcon?: Component;
     /** Props passed down to the visibility toggle `ActionIcon`. */
     visibilityToggleButtonProps?: Record<string, any>;
+    /** If set, the visibility toggle is included in the keyboard tab order. @default false */
+    visibilityToggleFocusable?: boolean;
     /** Controlled visibility state of the password. Bound with `v-model:visible`. */
     visible?: boolean;
     /** Uncontrolled initial visibility state. */

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

@@ -7,6 +7,7 @@ declare const varsResolver: (theme: import("../..").MantineTheme, props: any, ct
 declare const defaultProps: {
     readonly variant: "default";
     readonly size: "sm";
+    readonly visibilityToggleFocusable: false;
 };
 export { mergedClasses, varsResolver, defaultProps };
 declare const _default: typeof __VLS_export;

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

@@ -1,5 +1,5 @@
 import type { BoxMod, BoxProps, StylesApiProps, Factory } from '../../core';
-export type RollingNumberStylesNames = 'root' | 'digit' | 'digitColumn' | 'char';
+export type RollingNumberStylesNames = 'root' | 'copyValue' | 'digit' | 'digitColumn' | 'char';
 export type RollingNumberCssVariables = {
     root: '--rn-duration' | '--rn-timing-function';
 };

package/lib/components/Select/Select.d.ts

@@ -59,10 +59,10 @@ export declare const Select: {
     $slots: import("./Select.types").SelectSlots;
 }) & {
     classes: {
-        label: string;
         root: string;
-        wrapper: string;
+        label: string;
         section: string;
+        wrapper: string;
         input: string;
         bottomSection: string;
         required: string;

package/lib/components/Stepper/Stepper.context.d.ts

@@ -2,5 +2,6 @@ export interface StepperContextValue {
     getStyles: (selector: string, options?: Record<string, any>) => any;
     orientation: 'horizontal' | 'vertical';
     iconPosition: 'left' | 'right';
+    labelPosition?: 'right' | 'bottom';
 }
 export declare const provideStepperContext: (value: StepperContextValue) => void, useStepperContext: () => StepperContextValue;

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

@@ -64,6 +64,13 @@ export interface StepperOwnProps extends StylesApiProps<StepperFactory> {
      * @default 'left'
      */
     iconPosition?: 'right' | 'left';
+    /**
+     * Position of the step label and description relative to the icon. Takes precedence over
+     * `iconPosition` and is ignored when `orientation` is `vertical`.
+     *
+     * @default 'right'
+     */
+    labelPosition?: 'right' | 'bottom';
     /** Controls the size of the steps. */
     size?: MantineSize;
     /** Key of `theme.radius` or any valid CSS value to set `border-radius`. */

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

@@ -3,6 +3,7 @@ import { type VNode } from 'vue';
 declare const defaultProps: {
     readonly orientation: "horizontal";
     readonly iconPosition: "left";
+    readonly labelPosition: "right";
     readonly allowNextStepsSelect: true;
     readonly wrap: true;
 };

package/lib/components/TagsInput/TagsInput.d.ts

@@ -74,10 +74,10 @@ export declare const TagsInput: {
     $slots: import("./TagsInput.types").TagsInputSlots;
 }) & {
     classes: {
-        label: string;
         root: string;
-        wrapper: string;
+        label: string;
         section: string;
+        wrapper: string;
         input: string;
         bottomSection: string;
         required: string;

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

@@ -151,6 +151,8 @@ export interface TooltipProps extends TooltipBaseProps {
         focus: boolean;
         touch: boolean;
     };
+    /** If set, the tooltip stays open while the pointer moves from the target to the tooltip and remains over it. @default false */
+    interactive?: boolean;
     /**
      * If set, the tooltip is positioned for a target that wraps across lines.
      *

package/lib/components/TreeSelect/TreeSelect.d.ts

@@ -60,10 +60,10 @@ export declare const TreeSelect: {
     $slots: import("./TreeSelect.types").TreeSelectSlots;
 }) & {
     classes: {
-        label: string;
         root: string;
-        wrapper: string;
+        label: string;
         section: string;
+        wrapper: string;
         input: string;
         bottomSection: string;
         required: string;

package/lib/components/index.d.ts

@@ -68,6 +68,7 @@ export * from './SegmentedControl';
 export * from './Pagination';
 export * from './Tabs';
 export * from './Accordion';
+export * from './ActionBar';
 export * from './Input';
 export * from './InputBase';
 export * from './JsonInput';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine-vue/core",
-  "version": "3.1.0",
+  "version": "3.3.0",
   "description": "Vue component foundation architecturally equivalent to @mantine/core",
   "license": "MIT",
   "files": [
@@ -28,6 +28,16 @@
         "default": "./cjs/index.cjs"
       }
     },
+    "./styles-api": {
+      "import": {
+        "types": "./lib/core/styles-api/index.d.ts",
+        "default": "./esm/index.mjs"
+      },
+      "require": {
+        "types": "./lib/core/styles-api/index.d.ts",
+        "default": "./cjs/index.cjs"
+      }
+    },
     "./styles.css": "./styles.css",
     "./styles.layer.css": "./styles.layer.css",
     "./styles/*": "./styles/*"
@@ -44,8 +54,8 @@
     "vue": "^3.5.0"
   },
   "peerDependencies": {
-    "@mantine-vue/hooks": "3.1.0",
-    "@mantine-vue/utils": "3.1.0",
+    "@mantine-vue/hooks": "3.3.0",
+    "@mantine-vue/utils": "3.3.0",
     "vue": "^3.5.0"
   }
 }