@witchcraft/ui 0.4.0 → 0.4.1

package/dist/runtime/components/{LibNotifications/LibNotification.vue → WNotifications/WNotification.vue}

@@ -1,10 +1,13 @@
 <template>
 <div
 	v-if="notification"
-	:class="twMerge(
-  `
+	:role="notification.requiresAction ? 'alertdialog' : 'status'"
+	:aria-labelledby="notification.title ? `title-${notification.id}` : void 0"
+	:aria-describedby="notification.message ? `msg-${notification.id}` : void 0"
+	:class="
+  twMerge(
+    `
 		notification
-		max-w-700px
 		bg-neutral-50
 		dark:bg-neutral-900
 		text-fg
@@ -20,11 +23,15 @@
 		p-1
 		text-sm
 		focus:border-accent-500
+		focus-within:border-accent-500
 	`,
-  $attrs.class
-)"
-	v-bind="{ ...$attrs, class: void 0 }"
+    $attrs.class,
+    notification.notificationAttrs?.class
+  )
+"
+	v-bind="{ ...$attrs, ...notification?.notificationAttrs ?? {}, class: void 0 }"
 	tabindex="0"
+	:data-id="notification.id"
 	ref="notificationEl"
 	@keydown.enter.self="NotificationHandler.resolveToDefault(notification)"
 >
@@ -32,27 +39,28 @@
 		name="top"
 		:notification="notification"
 	/>
+
 	<div
 		class="
-			notification--header
-			flex-reverse
-			flex
-			justify-between
-			items-center
-		"
+		notification--header
+		flex-reverse
+		flex
+		justify-between
+		items-center
+	"
 	>
 		<slot
 			v-if="notification.title"
 			name="title"
 			v-bind="setSlotVar('title', {
+  id: `title-${notification.id}`,
   title: notification.title,
   class: `
 					notification--title
 					focus-outline
 					rounded-sm
 					font-bold
-				`,
-  tabindex: 0
+				`
 })"
 		>
 			<div
@@ -62,9 +70,10 @@
 			</div>
 		</slot>
 		<div class="notification--spacer flex-1"/>
-		<div class="actions flex">
-			<LibButton
+		<div class="notification--actions flex">
+			<WButton
 				:border="false"
+				aria-label="Copy notification content"
 				class="
 					notification--title-button
 					notification--copy-button
@@ -73,10 +82,11 @@
 				"
 				@click="copy(handler ? handler.stringify(notification) : JSON.stringify(notification))"
 			>
-				<icon><i-fa6-regular-copy/></icon>
-			</LibButton>
-			<lib-button
+				<WIcon><i-lucide-copy/></WIcon>
+			</WButton>
+			<WButton
 				v-if="notification.cancellable"
+				aria-label="Dismiss notification"
 				class="
 					notification--title-button
 					notification--cancel-button
@@ -84,31 +94,49 @@
 				:border="false"
 				@click="NotificationHandler.dismiss(notification)"
 			>
-				<icon><i-fa6-solid-xmark/></icon>
-			</lib-button>
+				<WIcon><i-lucide-x/></WIcon>
+			</Wbutton>
 		</div>
 	</div>
 	<slot
-		v-if="notification.message"
+		v-if="notification.message && !notification.component"
 		name="message"
 		v-bind="setSlotVar('message', {
   class: `
 				notification--message
+				shrink-1
+				overflow-auto
 				whitespace-pre-wrap
 				text-neutral-800
 				dark:text-neutral-200
 				mb-1
 			`,
-  message: notification.message,
-  tabindex: 0
+  message: notification.message
 })"
 	>
 		<div
 			v-bind="slotVars.message"
+			:id="`msg-${notification.id}`"
 		>
 			{{ notification.message }}
 		</div>
 	</slot>
+	<Component
+		v-if="notification.component"
+		:is="notification.component"
+		v-bind="{
+  notification,
+  message: notification.message,
+  messageClasses: `
+					notification--message
+					whitespace-pre-wrap
+					text-neutral-800
+					dark:text-neutral-200
+					mb-1
+				`,
+  ...notification.componentProps ?? {}
+}"
+	/>
 	<div class="notification--footer flex items-end justify-between">
 		<div
 			v-if="notification.code"
@@ -127,7 +155,7 @@
 				gap-2
 			"
 		>
-			<lib-button
+			<WButton
 				:label="option"
 				:class="twMerge(
   `
@@ -149,16 +177,16 @@
 
 <script setup>
 import { computed, onMounted, ref, useAttrs } from "vue";
-import IFa6RegularCopy from "~icons/fa6-regular/copy";
-import IFa6SolidXmark from "~icons/fa6-solid/xmark";
+import ILucideCopy from "~icons/lucide/copy";
+import ILucideX from "~icons/lucide/x";
 import { useSlotVars } from "../../composables/useSlotVars.js";
 import { copy } from "../../helpers/copy.js";
 import { NotificationHandler } from "../../helpers/NotificationHandler.js";
 import { twMerge } from "../../utils/twMerge.js";
-import Icon from "../Icon/Icon.vue";
-import LibButton from "../LibButton/LibButton.vue";
+import WButton from "../WButton/WButton.vue";
+import WIcon from "../WIcon/WIcon.vue";
 defineOptions({
-  name: "LibNotification",
+  name: "WNotification",
   inheritAttrs: false
 });
 const $attrs = useAttrs();
@@ -173,7 +201,9 @@ const getColor = (notification, option) => {
 const buttonColors = computed(() => props.notification.options.map((option) => getColor(props.notification, option)));
 const notificationEl = ref(null);
 onMounted(() => {
-  notificationEl.value?.focus();
+  if (props.notification.requiresAction) {
+    notificationEl.value?.focus();
+  }
 });
 defineExpose({
   focus: () => {
@@ -181,7 +211,3 @@ defineExpose({
   }
 });
 </script>
-
-<script>
-
-</script>

package/dist/runtime/components/WNotifications/WNotification.vue.d.ts

@@ -0,0 +1,37 @@
+import { type HTMLAttributes } from "vue";
+import { type NotificationEntry, NotificationHandler } from "../../helpers/NotificationHandler.js";
+import type { TailwindClassProp } from "../../types/index.js";
+type __VLS_Props = {
+    notification: NotificationEntry;
+    handler?: NotificationHandler;
+} & /** @vue-ignore */ Omit<HTMLAttributes, "class"> & /** @vue-ignore */ TailwindClassProp;
+declare var __VLS_1: {
+    notification: NotificationEntry;
+}, __VLS_3: {
+    id: string;
+    title: string;
+    class: string;
+}, __VLS_43: {
+    class: string;
+    message: string;
+};
+type __VLS_Slots = {} & {
+    top?: (props: typeof __VLS_1) => any;
+} & {
+    title?: (props: typeof __VLS_3) => any;
+} & {
+    message?: (props: typeof __VLS_43) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    focus: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    handler: NotificationHandler;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/WNotifications/WNotificationTestMessageComponent.d.vue.ts

@@ -0,0 +1,7 @@
+import type { CustomNotificationComponentProps } from "../../types/index.js";
+type __VLS_Props = CustomNotificationComponentProps & {
+    customProp: string;
+};
+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/dist/runtime/components/WNotifications/WNotificationTestMessageComponent.vue

@@ -0,0 +1,29 @@
+<template>
+<div class="border-2 border-accent-500 p-1 px-2 rounded-sm bg-accent-500/10">
+	<div class="text-lg">
+		Custom Message Component
+	</div>
+	<div class="font-bold">
+		Original message:
+	</div>
+	<div
+		:class="props.messageClasses"
+	>
+		{{ props.message }}
+	</div>
+	<div class="font-bold">
+		Custom Prop:
+	</div>
+	<div>
+		{{ props.customProp }}
+	</div>
+</div>
+</template>
+
+<script setup>
+const props = defineProps({
+  message: { type: String, required: true },
+  messageClasses: { type: String, required: false },
+  customProp: { type: String, required: true }
+});
+</script>

package/dist/runtime/components/WNotifications/WNotificationTestMessageComponent.vue.d.ts

@@ -0,0 +1,7 @@
+import type { CustomNotificationComponentProps } from "../../types/index.js";
+type __VLS_Props = CustomNotificationComponentProps & {
+    customProp: string;
+};
+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/dist/runtime/components/WNotifications/WNotifications.d.vue.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from "vue";
+import { NotificationHandler } from "../../helpers/NotificationHandler.js";
+import type { TailwindClassProp } from "../../types/index.js";
+type __VLS_Props = {
+    /** If not provided, uses the global handler (this requires useNotificationHandler be called and configured). */
+    handler?: NotificationHandler;
+    progressUpdateInterval?: number;
+} & /** @vue-ignore */ Omit<HTMLAttributes, "class"> & /** @vue-ignore */ TailwindClassProp;
+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/dist/runtime/components/{LibNotifications/LibNotifications.vue → WNotifications/WNotifications.vue}

@@ -5,17 +5,16 @@
 	tag="div"
 	:class="twMerge(`
 		notifications
-		[--notification-width:300px]
+		[--notification-width:calc(100dvw-var(--spacing)*4)]
+		sm:[--notification-width:300px]
 		fixed
 		top-0
 		z-50
 		right-[calc(var(--notification-width)*-1)]
 		w-[calc(var(--spacing)*2+var(--notification-width)*2)]
-		[&_.notification]:w-[var(--notification-width)]
 		max-h-[100dvh]
 		flex
 		flex-col
-		[&_.notification]:shrink-0
 		gap-1
 		list-none
 		outline-none
@@ -25,18 +24,25 @@
 	`, $attrs.class)"
 	v-bind="{ ...$attrs, class: void 0 }"
 >
-	<lib-notification
+	<WNotification
 		:handler="handler"
 		tabindex="0"
 		:notification="notification"
-		class="overflow-hidden my-2"
+		class="
+			overflow-hidden
+			my-2
+			max-h-[300px]
+			w-[var(--notification-width)]
+			shrink-0
+			max-sm:[&_.notification--button]:p-2
+			max-sm:[&_.notification--button]:py-1
+			max-sm:[&_.notification--header]:text-lg
+		"
 		v-for="notification of notifications"
 		:key="notification.id"
-		@pointerenter="notification.timeout && !notification.isPaused && handler.pause(notification)"
-		@blur="notification.timeout && notification.isPaused && handler.resume(notification)"
 	>
 		<template #top>
-			<LibProgressBar
+			<WProgressBar
 				v-if="notification.timeout !== void 0"
 				class="
 					w-full
@@ -46,10 +52,10 @@
 					-mx-[calc(var(--spacing)*2+2px)]
 					rounded-none
 				"
-				:progress="100 - (notification.isPaused ? notification._timer.elapsedBeforePause : notification._timer.elapsedBeforePause + (time - notification.startTime)) / notification.timeout * 100"
+				:progress="calculateNotificationProgress(notification, time)"
 			/>
 		</template>
-	</lib-notification>
+	</Wnotification>
 </TransitionGroup>
 <!-- we don't need to worry about the user accidentally closing a non-closable dialog as keeping open=true (which the handler handles when the component tries to close) is enough to keep it open without issues -->
 <AlertDialogRoot
@@ -59,7 +65,7 @@
 	<AlertDialogPortal :to="'#root'">
 		<AlertDialogOverlay
 			class="
-				fixed inset-0 z-30
+				fixed inset-0 z-90
 				bg-neutral-950/20
 				data-[state=open]:animate-overlayShow
 			"
@@ -67,18 +73,27 @@
 		<AlertDialogContent
 			class="
 				data-[state=open]:animate-contentShow
+				max-sm:data-[state=open]:animate-slideInUp
 				fixed
-				top-[50%]
-				left-[50%]
-				translate-x-[-50%]
-				translate-y-[-50%]
-				max-h-[80dvh]
-				max-w-[700px]
+				flex justify-center
+				top-1/2
+				left-1/2
+				w-full
+				sm:translate-x-[-50%]
+				sm:translate-y-[-50%]
+				p-2
+				max-sm:bottom-0
+				max-sm:top-[unset]
+				max-sm:left-0
 				z-100
 			"
+			@interact-outside="topNotifications[0] && NotificationHandler.dismiss(topNotifications[0])"
 		>
-			<lib-notification
+			<WNotification
 				class="
+					w-full
+					sm:max-w-[700px]
+					max-h-[80dvh]
 					top-notification
 					text-md
 					gap-2
@@ -102,7 +117,7 @@
 						{{ slotProps.message }}
 					</AlertDialogDescription>
 				</template>
-			</lib-notification>
+			</Wnotification>
 		</AlertDialogContent>
 	</AlertDialogPortal>
 </AlertDialogRoot>
@@ -117,31 +132,52 @@ import {
   AlertDialogRoot,
   AlertDialogTitle
 } from "reka-ui";
-import { computed, ref } from "vue";
-import LibNotification from "./LibNotification.vue";
+import { computed, onBeforeUnmount, onMounted, useAttrs } from "vue";
+import { calculateNotificationProgress } from "./calculateNotificationProgress.js";
+import WNotification from "./WNotification.vue";
 import { useNotificationHandler } from "../../composables/useNotificationHandler.js";
+import { useTimeConditionally } from "../../composables/useTimeConditionally.js";
 import { NotificationHandler } from "../../helpers/NotificationHandler.js";
 import { twMerge } from "../../utils/twMerge.js";
-import LibProgressBar from "../LibProgressBar/LibProgressBar.vue";
+import WProgressBar from "../WProgressBar/WProgressBar.vue";
 defineOptions({
-  name: "LibNotifications",
+  name: "WNotifications",
   inheritAttrs: false
 });
+const $attrs = useAttrs();
 const props = defineProps({
-  id: { type: String, required: false },
-  handler: { type: Object, required: false }
+  handler: { type: Object, required: false },
+  progressUpdateInterval: { type: Number, required: false }
 });
+const handler = props.handler ?? useNotificationHandler();
 const topNotifications = computed(() => handler.queue.filter((entry) => entry.requiresAction).reverse());
 const notifications = computed(() => handler.queue.filter((entry) => !entry.requiresAction));
-const time = ref(Date.now());
-setInterval(() => {
-  requestAnimationFrame(() => {
-    time.value = Date.now();
-  });
-}, 50);
-const handler = props.handler ?? useNotificationHandler();
-</script>
-
-<script>
-
+const fetchTime = computed(() => {
+  return notifications.value.filter((entry) => entry.timeout !== void 0 && !entry.isPaused).length > 0;
+});
+const { time } = useTimeConditionally(fetchTime, { refreshInterval: props.progressUpdateInterval });
+function handleGlobalPointerDown(e) {
+  const target = e.target;
+  const notificationEl = target.closest(".notification");
+  const rawId = notificationEl?.dataset.id;
+  const clickedId = rawId ? Number.parseInt(rawId, 10) : null;
+  if (clickedId !== null) {
+    const entry = handler.queue.find((n) => n.id === clickedId);
+    if (entry && entry.timeout && !entry.isPaused) {
+      handler.pause(entry);
+    }
+  } else {
+    handler.queue.forEach((entry) => {
+      if (entry.timeout && entry.isPaused) {
+        handler.resume(entry);
+      }
+    });
+  }
+}
+onMounted(() => {
+  window.addEventListener("pointerdown", handleGlobalPointerDown);
+});
+onBeforeUnmount(() => {
+  window.removeEventListener("pointerdown", handleGlobalPointerDown);
+});
 </script>

package/dist/runtime/components/WNotifications/WNotifications.vue.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from "vue";
+import { NotificationHandler } from "../../helpers/NotificationHandler.js";
+import type { TailwindClassProp } from "../../types/index.js";
+type __VLS_Props = {
+    /** If not provided, uses the global handler (this requires useNotificationHandler be called and configured). */
+    handler?: NotificationHandler;
+    progressUpdateInterval?: number;
+} & /** @vue-ignore */ Omit<HTMLAttributes, "class"> & /** @vue-ignore */ TailwindClassProp;
+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/dist/runtime/components/WNotifications/calculateNotificationProgress.d.ts

@@ -0,0 +1,2 @@
+import type { NotificationEntry } from "../../helpers/NotificationHandler.js";
+export declare function calculateNotificationProgress(notification: NotificationEntry, time: number): number;

package/dist/runtime/components/WNotifications/calculateNotificationProgress.js

@@ -0,0 +1,4 @@
+export function calculateNotificationProgress(notification, time) {
+  if (notification.timeout === void 0) return 0;
+  return 100 - (notification.isPaused ? notification._timer.elapsedBeforePause : notification._timer.elapsedBeforePause + (time - notification.startTime)) / notification.timeout * 100;
+}

package/dist/runtime/components/WNumberInput/WNumberInput.d.vue.ts

@@ -0,0 +1,27 @@
+import type { NumberFieldInputProps, NumberFieldRootEmits, NumberFieldRootProps } from "reka-ui";
+import type { HTMLAttributes, InputHTMLAttributes } from "vue";
+import type { EmitsToProps, TailwindClassProp } from "../../types/index.js";
+type __VLS_Props = {
+    id?: string;
+    max?: NumberFieldRootProps["max"];
+    min?: NumberFieldRootProps["min"];
+    step?: NumberFieldRootProps["step"];
+    isValid?: (value: any) => boolean;
+    inputProps?: NumberFieldInputProps & Omit<InputHTMLAttributes, "class"> & TailwindClassProp;
+    rootProps?: NumberFieldRootProps & EmitsToProps<NumberFieldRootEmits> & Omit<HTMLAttributes, "class"> & TailwindClassProp;
+};
+type __VLS_ModelProps = {
+    modelValue: number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+}>, {
+    max: number;
+    min: number;
+    isValid: (value: any) => boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/WNumberInput/WNumberInput.vue

@@ -0,0 +1,96 @@
+<template>
+<NumberFieldRoot
+	:min="props.min"
+	:max="props.max"
+	:step="props.step"
+	:format-options="{
+  signDisplay: 'exceptZero',
+  ...rootProps?.formatOptions
+}"
+	:class="twMerge(
+  `
+		flex
+		items-center
+		justify-center
+		metadata-input-border
+		rounded-sm
+		focus-outline-within
+		gap-2
+	`,
+  !isValid && 'text-danger-500',
+  rootProps?.class
+)"
+	v-bind="{ ...rootProps, class: void 0 }"
+	v-model="modelValue"
+>
+	<NumberFieldDecrement
+		class="
+			px-1
+			flex-1
+			hover:bg-neutral-200
+			dark:hover:bg-neutral-800
+			[&_.button--label]:justify-start
+			rounded-bl-sm
+			rounded-tl-sm
+			cursor-pointer
+			disabled:cursor-not-allowed
+		"
+	>
+		<WIcon><i-radix-icons-minus/></WIcon>
+	</NumberFieldDecrement>
+
+	<NumberFieldInput
+		:class="twMerge(
+  `
+				bg-transparent
+				tabular-nums
+				text-center
+				focus-outline-none
+				px-1
+				shrink-1
+				basis-[20ch]
+				grow-0
+				min-w-0
+				[&::-webkit-outer-spin-button]:appearance-none
+				[&::-webkit-inner-spin-button]:appearance-none
+				[-moz-appearance:textfield]
+			`,
+  !isValid && 'text-danger-500',
+  inputProps?.class
+)"
+		v-bind="{ ...inputProps, class: void 0 }"
+	/>
+
+	<NumberFieldIncrement
+		class="
+			px-1
+			flex-1
+			hover:bg-neutral-200
+			dark:hover:bg-neutral-800
+			[&_.button--label]:justify-end
+			rounded-br-sm
+			rounded-tr-sm
+			cursor-pointer
+			disabled:cursor-not-allowed
+		"
+	>
+		<WIcon><i-radix-icons-plus/></WIcon>
+	</NumberFieldIncrement>
+</NumberFieldRoot>
+</template>
+
+<script setup>
+import { twMerge } from "../../utils/twMerge.js";
+const props = defineProps({
+  id: { type: String, required: false },
+  max: { type: Number, required: false, default: Number.MAX_SAFE_INTEGER },
+  min: { type: Number, required: false, default: Number.MIN_SAFE_INTEGER },
+  step: { type: Number, required: false },
+  isValid: { type: Function, required: false, default: (value) => {
+    return typeof value === "number" && !Number.isNaN(value);
+  } },
+  inputProps: { type: Object, required: false },
+  rootProps: { type: Object, required: false }
+});
+const modelValue = defineModel({ type: Number, ...{ required: true } });
+</script>

package/dist/runtime/components/WNumberInput/WNumberInput.vue.d.ts

@@ -0,0 +1,27 @@
+import type { NumberFieldInputProps, NumberFieldRootEmits, NumberFieldRootProps } from "reka-ui";
+import type { HTMLAttributes, InputHTMLAttributes } from "vue";
+import type { EmitsToProps, TailwindClassProp } from "../../types/index.js";
+type __VLS_Props = {
+    id?: string;
+    max?: NumberFieldRootProps["max"];
+    min?: NumberFieldRootProps["min"];
+    step?: NumberFieldRootProps["step"];
+    isValid?: (value: any) => boolean;
+    inputProps?: NumberFieldInputProps & Omit<InputHTMLAttributes, "class"> & TailwindClassProp;
+    rootProps?: NumberFieldRootProps & EmitsToProps<NumberFieldRootEmits> & Omit<HTMLAttributes, "class"> & TailwindClassProp;
+};
+type __VLS_ModelProps = {
+    modelValue: number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+}>, {
+    max: number;
+    min: number;
+    isValid: (value: any) => boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;