@witchcraft/ui 0.3.19 → 0.3.21

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

@@ -1,5 +1,6 @@
 type __VLS_Props = {
     showOutline: boolean;
 };
-declare const _default: 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 __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/composables/useTimeConditionally.d.ts

@@ -0,0 +1,16 @@
+import { type Ref } from "vue";
+/**
+ * Returns a ref with the current time if the given value ref is true or it's an array with 1 or more items.. It will update the time every 50ms (configurable) if so (within a requestAnimationFrame).
+ *
+ * When the value is anything else it will clear the interval and set the time to undefined.
+ *
+ * Useful for use with a progress bar.
+ *
+ * Updating the time all the time is expensive and not idea. This way we only set the interval if we really need it.
+ */
+export declare function useTimeConditionally(val: Ref<any[] | boolean | any>, { refreshInterval }?: {
+    refreshInterval?: number;
+}): {
+    time: Ref<undefined | number>;
+    refresh: () => void;
+};

package/dist/runtime/composables/useTimeConditionally.js

@@ -0,0 +1,27 @@
+import { ref, watch } from "vue";
+export function useTimeConditionally(val, {
+  refreshInterval = 50
+} = {}) {
+  const time = ref(void 0);
+  let interval;
+  function refresh(v = val.value) {
+    if (v === true || Array.isArray(v) && v.length > 0) {
+      if (interval !== void 0) return;
+      time.value = Date.now();
+      interval = setInterval(() => {
+        requestAnimationFrame(() => {
+          time.value = Date.now();
+        });
+      }, refreshInterval);
+    } else {
+      if (interval === void 0) return;
+      clearInterval(interval);
+      interval = void 0;
+    }
+  }
+  watch(val, (val2) => {
+    refresh(val2);
+  });
+  refresh();
+  return { time, refresh };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@witchcraft/ui",
-  "version": "0.3.19",
+  "version": "0.3.21",
   "description": "Vue component library.",
   "type": "module",
   "main": "./dist/runtime/main.lib.js",
@@ -49,9 +49,9 @@
     "failOnWarn": false
   },
   "peerDependencies": {
-    "tailwindcss": "^4.1.12",
-    "unplugin-icons": "^22.2.0",
-    "vue": "^3.5.20"
+    "tailwindcss": "^4.1.18",
+    "unplugin-icons": "^22.5.0",
+    "vue": "^3.5.27"
   },
   "peerDependenciesMeta": {
     "tailwindcss": {
@@ -62,82 +62,82 @@
     }
   },
   "dependencies": {
-    "@alanscodelog/utils": "^6.0.1",
-    "@iconify/json": "^2.2.379",
-    "@nuxt/kit": "^4.0.3",
-    "@nuxt/schema": "^4.0.3",
+    "@alanscodelog/utils": "^6.0.2",
+    "@iconify/json": "^2.2.437",
+    "@nuxt/kit": "^4.3.1",
+    "@nuxt/schema": "^4.3.1",
     "@nuxt/types": "^2.18.1",
-    "@tailwindcss/vite": "^4.1.12",
+    "@tailwindcss/vite": "^4.1.18",
     "@witchcraft/nuxt-utils": "^0.3.6",
     "colord": "^2.9.3",
     "colorjs.io": "0.6.0-alpha.1",
     "defu": "^6.1.4",
     "fast-glob": "^3.3.3",
     "metamorphosis": "^0.6.1",
-    "reka-ui": "^2.5.0",
-    "tailwind-merge": "^3.3.1",
-    "unplugin-icons": "^22.2.0",
+    "reka-ui": "^2.8.0",
+    "tailwind-merge": "^3.4.0",
+    "unplugin-icons": "^22.5.0",
     "unplugin-vue-components": "^28.8.0",
     "vue-component-type-helpers": "^2.2.12"
   },
   "devDependencies": {
     "@alanscodelog/commitlint-config": "^3.1.2",
-    "@alanscodelog/eslint-config": "^6.3.0",
-    "@alanscodelog/semantic-release-config": "^6.0.0",
+    "@alanscodelog/eslint-config": "^6.3.1",
+    "@alanscodelog/semantic-release-config": "^6.0.2",
     "@alanscodelog/tsconfigs": "^6.2.0",
-    "@alanscodelog/vite-config": "^0.0.6",
+    "@alanscodelog/vite-config": "^0.0.7",
     "@chromatic-com/storybook": "^3.2.7",
-    "@commitlint/cli": "^19.8.1",
-    "@internationalized/date": "^3.9.0",
-    "@faker-js/faker": "^10.0.0",
-    "@nuxt/eslint-config": "^1.9.0",
+    "@commitlint/cli": "^20.4.1",
+    "@internationalized/date": "^3.11.0",
+    "@faker-js/faker": "^10.3.0",
+    "@nuxt/eslint-config": "^1.14.0",
     "@nuxt/module-builder": "^1.0.2",
     "@nuxtjs/i18n": "^9.5.6",
-    "@playwright/test": "=1.54.0",
-    "@rollup/plugin-node-resolve": "^16.0.1",
-    "@storybook/addon-a11y": "^8.6.14",
-    "@storybook/addon-actions": "^8.6.14",
+    "@playwright/test": "^1.54.0",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@storybook/addon-a11y": "^8.6.15",
+    "@storybook/addon-actions": "^8.6.15",
     "@storybook/addon-essentials": "^8.6.14",
     "@storybook/addon-interactions": "^8.6.14",
-    "@storybook/addon-links": "^8.6.14",
+    "@storybook/addon-links": "^8.6.15",
     "@storybook/addon-storysource": "^8.6.14",
     "@storybook/blocks": "^8.6.14",
     "@storybook/manager-api": "^8.6.14",
-    "@storybook/test": "^8.6.14",
+    "@storybook/test": "^8.6.15",
     "@storybook/test-runner": "^0.22.1",
-    "@storybook/vue3": "^8.6.14",
-    "@storybook/vue3-vite": "^8.6.14",
-    "@tanstack/vue-virtual": "^3.13.0",
-    "@tailwindcss/cli": "^4.1.12",
-    "@tailwindcss/postcss": "^4.1.12",
-    "@types/node": "^24.3.0",
-    "@vitejs/plugin-vue": "^6.0.1",
-    "@vue/runtime-core": "^3.5.20",
-    "@vue/runtime-dom": "^3.5.20",
-    "@vueuse/components": "^13.8.0",
-    "@vueuse/core": "^13.8.0",
-    "autoprefixer": "^10.4.21",
+    "@storybook/vue3": "^8.6.15",
+    "@storybook/vue3-vite": "^8.6.15",
+    "@tanstack/vue-virtual": "^3.13.18",
+    "@tailwindcss/cli": "^4.1.18",
+    "@tailwindcss/postcss": "^4.1.18",
+    "@types/node": "^24.10.12",
+    "@vitejs/plugin-vue": "^6.0.4",
+    "@vue/runtime-core": "^3.5.27",
+    "@vue/runtime-dom": "^3.5.27",
+    "@vueuse/components": "^13.9.0",
+    "@vueuse/core": "^13.9.0",
+    "autoprefixer": "^10.4.24",
     "concurrently": "^9.2.1",
-    "eslint": "^9.34.0",
+    "eslint": "^9.39.2",
     "http-server": "^14.1.1",
     "husky": "^9.1.7",
     "indexit": "2.1.0-beta.3",
     "madge": "^7.0.0",
-    "nuxt": "^4.2.1",
-    "playwright": "=1.54.0",
-    "playwright-core": "=1.54.0",
-    "semantic-release": "^24.2.7",
-    "storybook": "^8.6.14",
+    "nuxt": "^4.3.1",
+    "playwright": "^1.54.0",
+    "playwright-core": "^1.54.0",
+    "semantic-release": "^24.2.9",
+    "storybook": "^8.6.15",
     "storybook-dark-mode": "^4.0.2",
-    "tailwindcss": "^4.1.12",
+    "tailwindcss": "^4.1.18",
     "ts-node": "^10.9.2",
-    "typescript": "^5.9.2",
+    "typescript": "^5.9.3",
     "unbuild": "^3.6.1",
-    "vite": "^7.1.3",
-    "vite-tsconfig-paths": "^5.1.4",
-    "vue": "^3.5.20",
-    "vue-tsc": "3.0.6",
-    "wait-on": "^8.0.4"
+    "vite": "^7.3.1",
+    "vite-tsconfig-paths": "^6.1.0",
+    "vue": "^3.5.27",
+    "vue-tsc": "3.2.4",
+    "wait-on": "^8.0.5"
   },
   "author": "Alan <alanscodelog@gmail.com>",
   "repository": "https://github.com/witchcraftjs/ui",

package/src/runtime/assets/animations.css

@@ -1,5 +1,15 @@
+@utility animate-from-* {
+	--animate-from: --value([length, percentage]);
+	--animate-from: calc(var(--spacing) * --value(integer));
+}
+
+@utility -animate-from-* {
+	--animate-from: --value([length, percentage]);
+	--animate-from: calc(var(--spacing) * -1 * --value(integer));
+}
+
 @theme {
-	--animate-blinkInf: blink 1s linear-infinite;
+	--animate-blinkInf: blink 1s linear infinite;
 	@keyframes blink {
 		0% {
 			opacity: 0;
@@ -18,7 +28,7 @@
 		}
 	}
 
-	--animate-slideBgInf: slide-bg 10s linear-infinite;
+	--animate-slideBgInf: slide-bg 10s ease-in-out linear-infinite;
 	@keyframes slide {
 		0% {
 			background-position:0%;
@@ -38,10 +48,10 @@
 		}
 	}
 
-	--animate-slideIn: slideIn 500ms cubic-bezier(0.16, 1, 0.3, 1);
-	@keyframes slideIn {
+	--animate-slideInLeft: slideInLeft 500ms cubic-bezier(0.16, 1, 0.3, 1);
+	@keyframes slideInLeft {
 		from {
-			transform: translateX(100%);
+			transform: translateX(var(--animate-from, 100%));
 			opacity: 0;
 		}
 		to {
@@ -50,6 +60,43 @@
 		}
 	}
 
+	--animate-slideInRight: slideInLeft 500ms cubic-bezier(0.16, 1, 0.3, 1);
+	@keyframes slideInRight {
+		from {
+			transform: translateX(var(--animate-from, -100%));
+			opacity: 0;
+		}
+		to {
+			transform: translateX(0);
+			opacity: 1;
+		}
+	}
+
+	--animate-slideInUp: slideInUp 500ms cubic-bezier(0.16, 1, 0.3, 1);
+	@keyframes slideInUp {
+		from {
+			transform: translateY(var(--animate-from, 100%));
+			opacity: 0;
+		}
+		to {
+			transform: translateY(0);
+			opacity: 1;
+		}
+	}
+
+	--animate-slideInDown: slideInDown 500ms cubic-bezier(0.16, 1, 0.3, 1);
+	@keyframes slideInDown {
+		from {
+			transform: translateY(var(--animate-from, -100%));
+			opacity: 0;
+		}
+		to {
+			transform: translateY(0);
+			opacity: 1;
+		}
+	}
+
+
 	--animate-overlayShow: overlayShow 500ms cubic-bezier(0.16, 1, 0.3, 1);
 	@keyframes overlayShow {
 		from {

package/src/runtime/components/LibCheckbox/LibCheckbox.vue

@@ -121,8 +121,10 @@ interface Props
 	Partial<Omit<
 		InputHTMLAttributes,
 		"class" | "readonly" | "disabled" | "onSumbit"
+		// https://github.com/vuejs/core/pull/14237
+		| "autocomplete"
 	> & TailwindClassProp>,
-	/** @vue-ignore */
+	// /** @vue-ignore */
 	WrapperTypes,
 	RealProps
 {}

package/src/runtime/components/LibDatePicker/LibRangeDatePicker.vue

@@ -237,10 +237,14 @@ const locale = useInjectedLocale().timeLocale
 			dark:border-neutral-700
 			shadow-lg
 			will-change-[transform,opacity]
-			data-[state=open]:data-[side=top]:animate-slideDownAndFade
-			data-[state=open]:data-[side=right]:animate-slideLeftAndFade
-			data-[state=open]:data-[side=bottom]:animate-slideUpAndFade
-			data-[state=open]:data-[side=left]:animate-slideRightAndFade
+			data-[side=top]:animate-from-3
+			data-[side=left]:animate-from-3
+			data-[side=right]:-animate-from-3
+			data-[side=bottom]:-animate-from-3
+			data-[state=open]:data-[side=top]:animate-slideInUp
+			data-[state=open]:data-[side=right]:animate-slideInRight
+			data-[state=open]:data-[side=bottom]:animate-slideInDown
+			data-[state=open]:data-[side=left]:animate-slideInLeft
 			text-fg
 			dark:text-neutral-200
 		"

package/src/runtime/components/LibFileInput/LibFileInput.vue

@@ -355,9 +355,13 @@ defineExpose({
 export default { name: "LibFileInput" }
 
 type WrapperTypes
-	= & WrapperProps<"input", InputHTMLAttributes>
-		& WrapperProps<"wrapper", HTMLAttributes>
-		& WrapperProps<"previews", HTMLAttributes>
+	= & WrapperProps<
+		"input",
+		// https://github.com/vuejs/core/pull/14237
+		Omit<InputHTMLAttributes, "autocomplete">
+	>
+	& WrapperProps<"wrapper", HTMLAttributes>
+	& WrapperProps<"previews", HTMLAttributes>
 
 type RealProps
 	= & LinkableByIdProps
@@ -375,7 +379,12 @@ type RealProps
 interface Props
 	extends
 	/** @vue-ignore */
-	Partial<Omit<InputHTMLAttributes, "class" | "multiple" | "formats" | "compact"> & TailwindClassProp>,
+	Partial<Omit<
+		InputHTMLAttributes,
+		"class" | "multiple" | "formats" | "compact"
+		// https://github.com/vuejs/core/pull/14237
+		| "autocomplete"
+	> & TailwindClassProp>,
 	/** @vue-ignore */
 	Partial<WrapperTypes>,
 	RealProps { }

package/src/runtime/components/LibInputDeprecated/LibInputDeprecated.vue

@@ -407,7 +407,12 @@ type RealProps
 interface Props
 	extends
 	/** @vue-ignore */
-	Partial<Omit<InputHTMLAttributes, "class" | "readonly" | "disabled" | "onSubmit"> & TailwindClassProp>,
+	Partial<Omit<
+		InputHTMLAttributes,
+		"class" | "readonly" | "disabled" | "onSubmit"
+		// https://github.com/vuejs/core/pull/14237
+		| "autocomplete"
+	> & TailwindClassProp>,
 	/** @vue-ignore */
 	Partial<WrapperTypes>,
 	RealProps { }

package/src/runtime/components/LibNotifications/LibNotification.vue

@@ -3,7 +3,6 @@
 	v-if="notification"
 	:class="twMerge(`
 		notification
-		max-w-700px
 		bg-neutral-50
 		dark:bg-neutral-900
 		text-fg
@@ -63,7 +62,7 @@
 			</div>
 		</slot>
 		<div class="notification--spacer flex-1"/>
-		<div class="actions flex">
+		<div class="notification--actions flex">
 			<LibButton
 				:border="false"
 				class="
@@ -221,6 +220,7 @@ onMounted(() => {
 				if (props.notification.isPaused) return
 				emit("pause", props.notification)
 			} else {
+				if (!props.notification.isPaused) return
 				emit("resume", props.notification)
 			}
 		}, { signal: mousedownAbortController.signal })

package/src/runtime/components/LibNotifications/LibNotifications.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
@@ -29,7 +28,16 @@
 		:handler="handler"
 		tabindex="0"
 		:notification="notification"
-		class="overflow-hidden my-2 max-h-[25dvh] min-h-[300px]"
+		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"
 		@pause="handler.pause(notification)"
@@ -46,7 +54,7 @@
 					-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>
@@ -67,19 +75,27 @@
 		<AlertDialogContent
 			class="
 				data-[state=open]:animate-contentShow
+				max-sm:data-[state=open]:animate-slideInUp
 				fixed
 				flex
+				max-h-[80dvh]
 				top-[50%]
 				left-[50%]
-				translate-x-[-50%]
-				translate-y-[-50%]
-				max-h-[80dvh]
+				sm:translate-x-[-50%]
+				sm:translate-y-[-50%]
 				max-w-[700px]
+				max-sm:bottom-2
+				max-sm:top-[unset]
+				max-sm:left-2
+				max-sm:right-2
+				max-sm:w-[calc(100%-var(--spacing)*4)]
 				z-100
 			"
 		>
 			<lib-notification
 				class="
+					w-full
+					sm:max-w-[700px]
 					max-w-full
 					max-h-full
 					top-notification
@@ -120,11 +136,13 @@ import {
 	AlertDialogRoot,
 	AlertDialogTitle
 } from "reka-ui"
-import { computed, ref } from "vue"
+import { computed } from "vue"
 
+import { calculateNotificationProgress } from "./calculateNotificationProgress.js"
 import LibNotification from "./LibNotification.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"
@@ -137,18 +155,16 @@ defineOptions({
 
 const props = defineProps<Props>()
 
+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 fetchTime = computed(() => {
+	return notifications.value.filter(entry => entry.timeout !== undefined && !entry.isPaused).length > 0
+})
 
-const handler = props.handler ?? useNotificationHandler()
+const { time } = useTimeConditionally(fetchTime, { refreshInterval: props.progressUpdateInterval })
 </script>
 
 <script lang="ts">
@@ -157,8 +173,9 @@ import type { HTMLAttributes } from "vue"
 type RealProps
 	= & LinkableByIdProps
 		& {
-			/** If not provided, uses the global handler (this requires useNotificationHandler be called and configured). */
+		/** If not provided, uses the global handler (this requires useNotificationHandler be called and configured). */
 			handler?: NotificationHandler
+			progressUpdateInterval?: number
 		}
 
 interface Props

package/src/runtime/components/LibNotifications/calculateNotificationProgress.ts

@@ -0,0 +1,8 @@
+import type { NotificationEntry } from "../../helpers/NotificationHandler.js"
+
+export function calculateNotificationProgress(notification: NotificationEntry, time: number) {
+	if (notification.timeout === undefined) return 0
+
+	return 100 - (((notification.isPaused ? (notification._timer.elapsedBeforePause) : (notification._timer.elapsedBeforePause + (time - notification.startTime))) / notification.timeout) * 100)
+}
+

package/src/runtime/components/LibSimpleInput/LibSimpleInput.vue

@@ -147,6 +147,8 @@ interface Props
 		| "disabled"
 		| "onSubmit"
 		| "onInput"
+		// https://github.com/vuejs/core/pull/14237
+		| "autocomplete"
 	> & TailwindClassProp>,
 	RealProps
 {}

package/src/runtime/composables/useTimeConditionally.ts

@@ -0,0 +1,51 @@
+import { type Ref, ref, watch } from "vue"
+
+/**
+ * Returns a ref with the current time if the given value ref is true or it's an array with 1 or more items.. It will update the time every 50ms (configurable) if so (within a requestAnimationFrame).
+ *
+ * When the value is anything else it will clear the interval and set the time to undefined.
+ *
+ * Useful for use with a progress bar.
+ *
+ * Updating the time all the time is expensive and not idea. This way we only set the interval if we really need it.
+ */
+export function useTimeConditionally(
+	val: Ref<any[] | boolean | any>,
+	{
+		refreshInterval = 50
+	}: {
+		refreshInterval?: number
+	} = {}
+): {
+	time: Ref<undefined | number>
+	refresh: () => void
+} {
+	const time = ref<undefined | number>(undefined)
+
+	let interval: ReturnType<typeof setInterval> | undefined
+	function refresh(
+		/** The value to use for the check. Do not pass unless you know what you're doing. */
+		v = val.value
+	) {
+		if (v === true || (Array.isArray(v) && v.length > 0)) {
+			if (interval !== undefined) return
+			time.value = Date.now()
+			interval = setInterval(() => {
+				requestAnimationFrame(() => {
+					time.value = Date.now()
+				})
+			}, refreshInterval)
+		} else {
+			if (interval === undefined) return
+			clearInterval(interval)
+			interval = undefined
+		}
+	}
+	watch(val, val => {
+		refresh(val)
+	})
+
+	refresh()
+
+	return { time, refresh }
+}