@mantine-vue/hooks 1.1.2

package/lib/use-scroller/use-scroller.d.ts

@@ -0,0 +1,25 @@
+import { type ComponentPublicInstance, type Ref } from 'vue';
+export interface UseScrollerOptions {
+    scrollAmount?: number;
+    draggable?: boolean;
+    onScrollStateChange?: (state: UseScrollerScrollState) => void;
+}
+export interface UseScrollerScrollState {
+    canScrollStart: boolean;
+    canScrollEnd: boolean;
+}
+export interface UseScrollerReturnValue {
+    ref: (node: Element | ComponentPublicInstance | null) => void;
+    canScrollStart: Ref<boolean>;
+    canScrollEnd: Ref<boolean>;
+    scrollStart: () => void;
+    scrollEnd: () => void;
+    isDragging: Ref<boolean>;
+    dragHandlers: {
+        onMousedown: (event: MouseEvent) => void;
+        onMousemove: (event: MouseEvent) => void;
+        onMouseup: () => void;
+        onMouseleave: () => void;
+    };
+}
+export declare function useScroller<T extends HTMLElement = HTMLDivElement>({ scrollAmount, draggable, onScrollStateChange, }?: UseScrollerOptions): UseScrollerReturnValue;

package/lib/use-selection/use-selection.d.ts

@@ -0,0 +1,27 @@
+import { type MaybeRefOrGetter, type Ref } from 'vue';
+export interface UseSelectionInput<T> {
+    /** The array of items to select from */
+    data: MaybeRefOrGetter<T[]>;
+    /** The initial selection, empty array by default */
+    defaultSelection?: T[];
+    /** If true, selection is reset when data changes */
+    resetSelectionOnDataChange?: MaybeRefOrGetter<boolean | undefined>;
+}
+export interface UseSelectionHandlers<T> {
+    /** Add an item to the selection */
+    select: (selected: T) => void;
+    /** Remove an item from the selection */
+    deselect: (deselected: T) => void;
+    /** Toggle an item's selection state */
+    toggle: (toggled: T) => void;
+    /** Returns true if all items from the `data` are selected */
+    isAllSelected: () => boolean;
+    /** Returns true if at least one item from the `data` is selected */
+    isSomeSelected: () => boolean;
+    /** Set the selection to a specific array of items */
+    setSelection: (selection: T[]) => void;
+    /** Clear all selections */
+    resetSelection: () => void;
+}
+export type UseSelectionReturnValue<T> = readonly [Ref<T[]>, UseSelectionHandlers<T>];
+export declare function useSelection<T>(input: UseSelectionInput<T>): UseSelectionReturnValue<T>;

package/lib/use-session-storage/use-session-storage.d.ts

@@ -0,0 +1,3 @@
+import { type UseStorageOptions, type UseStorageReturnValue } from '../use-local-storage/create-storage';
+export declare function readSessionStorageValue<T>(options: UseStorageOptions<T>): T;
+export declare function useSessionStorage<T>(options: UseStorageOptions<T>): UseStorageReturnValue<T>;

package/lib/use-set/use-set.d.ts

@@ -0,0 +1,9 @@
+/** Local re-declaration of the ES2024 `ReadonlySetLike` lib type so this file
+ *  does not depend on the project `lib` compiler option including `esnext`. */
+export interface ReadonlySetLike<T> {
+    readonly size: number;
+    has(value: T): boolean;
+    keys(): IterableIterator<T>;
+}
+export declare function readonlySetLikeToSet<T>(input: ReadonlySetLike<T>): Set<T>;
+export declare function useSet<T>(values?: T[]): Set<T>;

package/lib/use-set-state/use-set-state.d.ts

@@ -0,0 +1,4 @@
+import { type Ref } from 'vue';
+export type UseSetStateCallback<T> = (state: Partial<T> | ((currentState: T) => Partial<T>)) => void;
+export type UseSetStateReturnValue<T> = [Ref<T>, UseSetStateCallback<T>];
+export declare function useSetState<T extends Record<string, any>>(initialState: T): UseSetStateReturnValue<T>;

package/lib/use-shallow-effect/use-shallow-effect.d.ts

@@ -0,0 +1,2 @@
+import { type MaybeRefOrGetter } from 'vue';
+export declare function useShallowEffect(effect: () => void, dependencies?: MaybeRefOrGetter<unknown>[]): void;

package/lib/use-splitter/use-splitter.d.ts

@@ -0,0 +1,94 @@
+import { type ComponentPublicInstance, type MaybeRefOrGetter, type Ref } from 'vue';
+export interface UseSplitterPanel {
+    /** Initial size as percentage (0-100). All panels must sum to 100. */
+    defaultSize: number;
+    /** Minimum size percentage, `0` by default */
+    min?: number;
+    /** Maximum size percentage, `100` by default */
+    max?: number;
+    /** Whether this panel can be collapsed, `false` by default */
+    collapsible?: boolean;
+    /** Size below which the panel snaps to collapsed (percentage), defaults to `min` */
+    collapseThreshold?: number;
+}
+export interface UseSplitterRedistributeInput {
+    /** Current sizes before applying delta */
+    sizes: number[];
+    /** Panel configurations */
+    panels: UseSplitterPanel[];
+    /** Index of the handle being dragged */
+    handleIndex: number;
+    /** Requested size change in percentage (positive = grow before-panel) */
+    delta: number;
+}
+export type UseSplitterRedistributeFn = (input: UseSplitterRedistributeInput) => number[];
+export interface UseSplitterOptions {
+    /** Panel configuration array (minimum 2 panels) */
+    panels: UseSplitterPanel[];
+    /** Layout direction, `'horizontal'` by default */
+    orientation?: 'horizontal' | 'vertical';
+    /** Controlled sizes (percentages summing to 100) */
+    sizes?: MaybeRefOrGetter<number[] | undefined>;
+    /** Called during resize with updated sizes */
+    onSizeChange?: (sizes: number[]) => void;
+    /** Called when drag starts */
+    onResizeStart?: (handleIndex: number) => void;
+    /** Called when drag ends */
+    onResizeEnd?: (handleIndex: number, sizes: number[]) => void;
+    /** Called when a panel collapses or expands */
+    onCollapseChange?: (panelIndex: number, collapsed: boolean) => void;
+    /** How to borrow space from non-adjacent panels when the immediate neighbor is at its min/max.
+     * `'nearest'` takes from the nearest panel in the drag direction first.
+     * `'equal'` distributes equally among all panels in the drag direction.
+     * A function receives sizes, panels, handleIndex and delta, and returns new sizes.
+     * When not set, only the two adjacent panels are affected. */
+    redistribute?: 'nearest' | 'equal' | UseSplitterRedistributeFn;
+    /** Keyboard step size in percentage, `1` by default */
+    step?: number;
+    /** Shift+arrow step size in percentage, `10` by default */
+    shiftStep?: number;
+    /** Text direction for keyboard nav, `'ltr'` by default */
+    dir?: 'ltr' | 'rtl';
+    /** Restore the two panels adjacent to a handle to their default ratio (preserving their combined size) when the handle is double-clicked, `true` by default */
+    resetOnDoubleClick?: boolean;
+    /** Enable/disable the hook, `true` by default */
+    enabled?: boolean;
+}
+export interface UseSplitterReturnValue {
+    /** Ref callback for the container element */
+    ref: (node: Element | ComponentPublicInstance | null) => void;
+    /** Current panel sizes as percentages */
+    sizes: Ref<number[]>;
+    /** Which panels are currently collapsed */
+    collapsed: Ref<boolean[]>;
+    /** Index of handle being dragged, or -1 */
+    activeHandle: Ref<number>;
+    /** Get props to spread on each resize handle */
+    getHandleProps: (input: {
+        index: number;
+    }) => {
+        ref: (node: Element | ComponentPublicInstance | null) => void;
+        role: 'separator';
+        'aria-orientation': 'horizontal' | 'vertical';
+        'aria-valuenow': number;
+        'aria-valuemin': number;
+        'aria-valuemax': number;
+        tabIndex: number;
+        onKeyDown: (event: KeyboardEvent) => void;
+        onDoubleClick: (event: MouseEvent) => void;
+        'data-active': boolean | undefined;
+        'data-orientation': 'horizontal' | 'vertical';
+    };
+    /** Programmatically set sizes */
+    setSizes: (sizes: number[]) => void;
+    /** Collapse a panel */
+    collapse: (panelIndex: number) => void;
+    /** Expand a collapsed panel */
+    expand: (panelIndex: number) => void;
+    /** Toggle collapse of a panel */
+    toggleCollapse: (panelIndex: number) => void;
+    /** Reset the two panels adjacent to a handle to their default ratio, preserving
+     * their combined size */
+    reset: (handleIndex: number) => void;
+}
+export declare function useSplitter<T extends HTMLElement = any>(options: UseSplitterOptions): UseSplitterReturnValue;

package/lib/use-state-history/use-state-history.d.ts

@@ -0,0 +1,17 @@
+import { type Ref } from 'vue';
+export interface UseStateHistoryHandlers<T> {
+    set: (value: T) => void;
+    back: (steps?: number) => void;
+    forward: (steps?: number) => void;
+    reset: () => void;
+}
+export interface UseStateHistoryValue<T> {
+    history: T[];
+    current: number;
+}
+export type UseStateHistoryReturnValue<T> = [
+    Readonly<Ref<T>>,
+    UseStateHistoryHandlers<T>,
+    Readonly<Ref<UseStateHistoryValue<T>>>
+];
+export declare function useStateHistory<T>(initialValue: T): UseStateHistoryReturnValue<T>;

package/lib/use-text-selection/use-text-selection.d.ts

@@ -0,0 +1,2 @@
+import { type Ref } from 'vue';
+export declare function useTextSelection(): Ref<Selection | null>;

package/lib/use-throttled-callback/use-throttled-callback.d.ts

@@ -0,0 +1,2 @@
+export declare function useThrottledCallbackWithClearTimeout<T extends (...args: any[]) => any>(callback: T, wait: number): [(...args: Parameters<T>) => void, () => void];
+export declare function useThrottledCallback<T extends (...args: any[]) => any>(callback: T, wait: number): (...args: Parameters<T>) => void;

package/lib/use-throttled-state/use-throttled-state.d.ts

@@ -0,0 +1,3 @@
+import { type Ref } from 'vue';
+export type UseThrottledStateReturnValue<T> = [Ref<T>, (value: T) => void];
+export declare function useThrottledState<T = any>(defaultValue: T, wait: number): UseThrottledStateReturnValue<T>;

package/lib/use-throttled-value/use-throttled-value.d.ts

@@ -0,0 +1,2 @@
+import { type MaybeRefOrGetter, type Ref } from 'vue';
+export declare function useThrottledValue<T>(value: MaybeRefOrGetter<T>, wait: number): Readonly<Ref<T>>;

package/lib/use-timeout/use-timeout.d.ts

@@ -0,0 +1,8 @@
+export interface UseTimeoutOptions {
+    autoInvoke?: boolean;
+}
+export interface UseTimeoutReturnValue {
+    start: (...callbackParams: unknown[]) => void;
+    clear: () => void;
+}
+export declare function useTimeout(callback: (...callbackParams: unknown[]) => void, delay: number, options?: UseTimeoutOptions): UseTimeoutReturnValue;

package/lib/use-toggle/use-toggle.d.ts

@@ -0,0 +1,4 @@
+import { type Ref } from 'vue';
+export type UseToggleAction<T> = (value?: T | ((value: T) => T)) => void;
+export type UseToggleReturnValue<T> = [Ref<T>, UseToggleAction<T>];
+export declare function useToggle<T = boolean>(options?: readonly T[]): UseToggleReturnValue<T>;

package/lib/use-uncontrolled/use-uncontrolled.d.ts

@@ -0,0 +1,13 @@
+import { type MaybeRefOrGetter, type Ref } from 'vue';
+export interface UseUncontrolledOptions<T> {
+    value?: MaybeRefOrGetter<T | undefined>;
+    defaultValue?: T;
+    finalValue?: T;
+    onChange?: (value: T, ...payload: any[]) => void;
+}
+export type UseUncontrolledReturnValue<T> = [
+    Ref<T>,
+    (value: T, ...payload: any[]) => void,
+    Ref<boolean>
+];
+export declare function useUncontrolled<T>({ value, defaultValue, finalValue, onChange, }: UseUncontrolledOptions<T>): UseUncontrolledReturnValue<T>;

package/lib/use-validated-state/use-validated-state.d.ts

@@ -0,0 +1,16 @@
+import { type Ref } from 'vue';
+export interface UseValidatedStateValue<T> {
+    /** Current value */
+    value: T;
+    /** Last valid value */
+    lastValidValue: T | undefined;
+    /** True if the current value is valid, false otherwise */
+    valid: boolean;
+}
+export type UseValidatedStateReturnValue<T> = [
+    /** Current value */
+    Readonly<Ref<UseValidatedStateValue<T>>>,
+    /** Handler to update the state, passes `value` and `payload` to `onChange` */
+    (value: T) => void
+];
+export declare function useValidatedState<T>(initialValue: T, validate: (value: T) => boolean, initialValidationState?: boolean): UseValidatedStateReturnValue<T>;

package/lib/use-viewport-size/use-viewport-size.d.ts

@@ -0,0 +1,6 @@
+import { type Ref } from 'vue';
+export interface UseViewportSizeReturnValue {
+    width: Ref<number>;
+    height: Ref<number>;
+}
+export declare function useViewportSize(): UseViewportSizeReturnValue;

package/lib/use-window-event/use-window-event.d.ts

@@ -0,0 +1,2 @@
+import { type MaybeRefOrGetter } from 'vue';
+export declare function useWindowEvent<K extends keyof WindowEventMap>(type: MaybeRefOrGetter<K>, listener: MaybeRefOrGetter<(event: WindowEventMap[K]) => void>, options?: AddEventListenerOptions): void;

package/lib/use-window-scroll/use-window-scroll.d.ts

@@ -0,0 +1,8 @@
+import { type Ref } from 'vue';
+export interface UseWindowScrollPosition {
+    x: number;
+    y: number;
+}
+export type UseWindowScrollTo = (position: Partial<UseWindowScrollPosition>) => void;
+export type UseWindowScrollReturnValue = [Ref<UseWindowScrollPosition>, UseWindowScrollTo];
+export declare function useWindowScroll(): UseWindowScrollReturnValue;

package/lib/utils/clamp/clamp.d.ts

@@ -0,0 +1 @@
+export declare function clamp(value: number, min: number | undefined, max: number | undefined): number;

package/lib/utils/index.d.ts

@@ -0,0 +1,7 @@
+export { clamp } from './clamp/clamp';
+export { lowerFirst } from './lower-first/lower-first';
+export { randomId } from './random-id/random-id';
+export { range } from './range/range';
+export { shallowEqual } from './shallow-equal/shallow-equal';
+export { upperFirst } from './upper-first/upper-first';
+export { useCallbackRef } from './use-callback-ref/use-callback-ref';

package/lib/utils/lower-first/lower-first.d.ts

@@ -0,0 +1 @@
+export declare function lowerFirst(value: string): string;

package/lib/utils/random-id/random-id.d.ts

@@ -0,0 +1 @@
+export declare function randomId(prefix?: string): string;

package/lib/utils/range/range.d.ts

@@ -0,0 +1 @@
+export declare function range(start: number, end: number): number[];

package/lib/utils/shallow-equal/shallow-equal.d.ts

@@ -0,0 +1 @@
+export declare function shallowEqual(a: any, b: any): boolean;

package/lib/utils/upper-first/upper-first.d.ts

@@ -0,0 +1 @@
+export declare function upperFirst(value: string): string;

package/lib/utils/use-callback-ref/use-callback-ref.d.ts

@@ -0,0 +1,2 @@
+import { type MaybeRefOrGetter } from 'vue';
+export declare function useCallbackRef<T extends (...args: any[]) => any>(callback: MaybeRefOrGetter<T | undefined>): T;

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@mantine-vue/hooks",
+  "version": "1.1.2",
+  "description": "Vue composables equivalent to @mantine/hooks",
+  "license": "MIT",
+  "files": [
+    "cjs",
+    "esm",
+    "lib",
+    "styles.css",
+    "styles.layer.css",
+    "styles"
+  ],
+  "sideEffects": false,
+  "main": "./cjs/index.cjs",
+  "module": "./esm/index.mjs",
+  "types": "./lib/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./lib/index.d.mts",
+        "default": "./esm/index.mjs"
+      },
+      "require": {
+        "types": "./lib/index.d.ts",
+        "default": "./cjs/index.cjs"
+      }
+    }
+  },
+  "devDependencies": {
+    "@vue/test-utils": "2.4.6",
+    "vue": "^3.5.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  }
+}