@witchcraft/ui 0.4.0 → 0.4.2

package/dist/runtime/components/{LibDarkModeSwitcher/LibDarkModeSwitcher.vue → WDarkModeSwitcher/WDarkModeSwitcher.vue}

@@ -1,7 +1,7 @@
 <template>
-<lib-button
+<WButton
 	v-bind="{ ...$attrs, class: void 0 }"
-	:class="!$attrs.unstyle && twMerge(
+	:class="!unstyle && twMerge(
   `
 			dark-mode-switcher
 			rounded-full
@@ -9,16 +9,16 @@
 		`,
   $attrs?.class
 )"
-	:title="`${t('dark-mode-switcher.title')}${t(`dark-mode-switcher.${darkModeState}`)}`"
+	:aria-label="`${t('dark-mode-switcher.title')}${t(`dark-mode-switcher.${darkModeState}`)}`"
 	@click="cycleDarkMode"
 >
 	<!-- content-vertical-holder will keep the icon the height of a text line regardless of the svg used -->
 	<template #icon>
-		<icon
+		<WIcon
 			class="w-[1em] items-center content-vertical-holder"
 		>
 			<component :is="darkModeState === 'dark' ? IFaSolidMoon : darkModeState === 'light' ? IPhSunBold : IFa6SolidCircleHalfStroke"/>
-		</icon>
+		</WIcon>
 	</template>
 	<template
 		#default
@@ -28,7 +28,7 @@
 			{{ t(`dark-mode-switcher.${darkModeState}`) }}
 		</div>
 	</template>
-</lib-button>
+</Wbutton>
 </template>
 
 <script setup>
@@ -39,12 +39,15 @@ import IPhSunBold from "~icons/ph/sun-bold";
 import { useInjectedDarkMode } from "../../composables/useInjectedDarkMode.js";
 import { useInjectedI18n } from "../../composables/useInjectedI18n.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";
 const t = useInjectedI18n();
 const emit = defineEmits(["update:darkMode", "update:darkModeState"]);
 const $attrs = useAttrs();
 defineProps({
+  border: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  unstyle: { type: Boolean, required: false },
   showLabel: { type: Boolean, required: false, default: true }
 });
 const {
@@ -58,9 +61,3 @@ onMounted(() => {
   emit("update:darkMode", darkMode.value);
 });
 </script>
-
-<script>
-export default {
-  name: "LibDarkModeSwitcher"
-};
-</script>

package/dist/runtime/components/{LibDarkModeSwitcher/LibDarkModeSwitcher.vue.d.ts → WDarkModeSwitcher/WDarkModeSwitcher.vue.d.ts}

@@ -1,22 +1,18 @@
 import { type ButtonHTMLAttributes } from "vue";
-import type { TailwindClassProp } from "../shared/props.js";
-declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+import type { BaseInteractiveProps, TailwindClassProp } from "../../types/index.js";
+type __VLS_Props = Pick<BaseInteractiveProps, "border"> & {
+    disabled?: boolean;
+    unstyle?: boolean;
+    showLabel?: boolean;
+} & /** @vue-ignore */ Omit<ButtonHTMLAttributes, "class"> & /** @vue-ignore */ TailwindClassProp;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:darkMode": (value: boolean) => any;
     "update:darkModeState": (value: "system" | "dark" | "light") => any;
-}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:darkMode"?: ((value: boolean) => any) | undefined;
     "onUpdate:darkModeState"?: ((value: "system" | "dark" | "light") => any) | undefined;
 }>, {
     showLabel: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;
-type RealProps = {
-    showLabel?: boolean;
-};
-interface Props extends 
-/** @vue-ignore */
-Partial<Omit<ButtonHTMLAttributes, "class" | "color" | "disabled"> & TailwindClassProp & {
-    disabled?: boolean;
-    unstyle?: boolean;
-}>, RealProps {
-}

package/dist/runtime/components/{LibDatePicker/LibDatePicker.d.vue.ts → WDatePicker/WDatePicker.d.vue.ts}

@@ -1,13 +1,12 @@
 import type { RangeDate, SingleDate } from "../../types/index.js";
 type __VLS_Props = {
     showTime?: boolean;
-    id?: string;
     /** The fallback suggested date when the modelValue is undefined (it will not update modelValue, it only serves as a suggestions and is used internally in the temporary value). If ignoring the time element, you should probably use the {@link createNoonTodayUtc} function (`createNonTodayUtc().toDate(())`) in the helpers, otherwise `new Date()` (the default) will do. */
     fallbackDate?: Date;
     /** The local user's timezone, defaults to @internationalized/date's getLocalTimeZone(). */
     timeZone?: string;
 };
-type __VLS_PublicProps = __VLS_Props & {
+type __VLS_ModelProps = {
     /**
      * modelValue can be undefined or an object with start/end undefined, but it must be passed, otherwise we can't tell the difference between a single date and a range date.
      *
@@ -17,21 +16,22 @@ type __VLS_PublicProps = __VLS_Props & {
      */
     modelValue: SingleDate | RangeDate;
 };
-declare var __VLS_8: any;
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_9: any;
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
+    default?: (props: typeof __VLS_9) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: SingleDate | RangeDate) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: SingleDate | RangeDate) => any) | undefined;
 }>, {
-    id: string;
     fallbackDate: Date;
     timeZone: string;
     showTime: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+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 (): {

package/dist/runtime/components/{LibDatePicker/LibDatePicker.vue → WDatePicker/WDatePicker.vue}

@@ -1,29 +1,25 @@
 <script setup>
 import { getLocalTimeZone } from "@internationalized/date";
 import { computed, useAttrs } from "vue";
-import LibRangeDatePicker from "./LibRangeDatePicker.vue";
-import LibSingleDatePicker from "./LibSingleDatePicker.vue";
-import { getFallbackId } from "../shared/props.js";
+import WRangeDatePicker from "./WRangeDatePicker.vue";
+import WSingleDatePicker from "./WSingleDatePicker.vue";
 const attrs = useAttrs();
 defineProps({
   showTime: { type: Boolean, required: false, default: false },
-  id: { type: String, required: false, default: void 0 },
   fallbackDate: { type: Date, required: false, default: () => /* @__PURE__ */ new Date() },
   timeZone: { type: String, required: false, default: getLocalTimeZone() }
 });
-const fallbackId = getFallbackId();
 const date = defineModel({ type: null, ...{ required: true } });
 const isRange = computed(() => date.value !== void 0 && !(date.value instanceof Date));
 </script>
 
 <template>
 <component
-	:id="id ?? fallbackId"
 	v-bind="attrs"
 	:use-time="showTime"
 	:time-zone="timeZone"
 	:fallback-date="fallbackDate"
-	:is="isRange ? LibRangeDatePicker : LibSingleDatePicker"
+	:is="isRange ? WRangeDatePicker : WSingleDatePicker"
 	v-model="date"
 >
 	<template #default="slotProps">

package/dist/runtime/components/{LibDatePicker/LibDatePicker.vue.d.ts → WDatePicker/WDatePicker.vue.d.ts}

@@ -1,13 +1,12 @@
 import type { RangeDate, SingleDate } from "../../types/index.js";
 type __VLS_Props = {
     showTime?: boolean;
-    id?: string;
     /** The fallback suggested date when the modelValue is undefined (it will not update modelValue, it only serves as a suggestions and is used internally in the temporary value). If ignoring the time element, you should probably use the {@link createNoonTodayUtc} function (`createNonTodayUtc().toDate(())`) in the helpers, otherwise `new Date()` (the default) will do. */
     fallbackDate?: Date;
     /** The local user's timezone, defaults to @internationalized/date's getLocalTimeZone(). */
     timeZone?: string;
 };
-type __VLS_PublicProps = __VLS_Props & {
+type __VLS_ModelProps = {
     /**
      * modelValue can be undefined or an object with start/end undefined, but it must be passed, otherwise we can't tell the difference between a single date and a range date.
      *
@@ -17,21 +16,22 @@ type __VLS_PublicProps = __VLS_Props & {
      */
     modelValue: SingleDate | RangeDate;
 };
-declare var __VLS_8: any;
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_9: any;
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
+    default?: (props: typeof __VLS_9) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: SingleDate | RangeDate) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: SingleDate | RangeDate) => any) | undefined;
 }>, {
-    id: string;
     fallbackDate: Date;
     timeZone: string;
     showTime: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+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 (): {

package/dist/runtime/components/WDatePicker/WRangeDatePicker.d.vue.ts

@@ -0,0 +1,182 @@
+import type { CalendarDate, ZonedDateTime } from "@internationalized/date";
+import type { RangeDate } from "../../types/index.js";
+type __VLS_Props = {
+    useTime?: boolean;
+    id: string;
+    fallbackDate?: Date;
+    timeZone?: string;
+    updateInterval?: number;
+};
+type __VLS_ModelProps = {
+    modelValue: RangeDate;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_198: {
+    tempValue: {
+        start?: {
+            readonly calendar: {
+                identifier: import("@internationalized/date").CalendarIdentifier;
+                fromJulianDay: (jd: number) => CalendarDate;
+                toJulianDay: (date: import("@internationalized/date").AnyCalendarDate) => number;
+                getDaysInMonth: (date: import("@internationalized/date").AnyCalendarDate) => number;
+                getMonthsInYear: (date: import("@internationalized/date").AnyCalendarDate) => number;
+                getYearsInEra: (date: import("@internationalized/date").AnyCalendarDate) => number;
+                getEras: () => string[];
+                getMinimumMonthInYear?: ((date: import("@internationalized/date").AnyCalendarDate) => number) | undefined;
+                getMinimumDayInMonth?: ((date: import("@internationalized/date").AnyCalendarDate) => number) | undefined;
+                getMaximumMonthsInYear: () => number;
+                getMaximumDaysInMonth: () => number;
+                getFormattableMonth?: ((date: import("@internationalized/date").AnyCalendarDate) => CalendarDate) | undefined;
+                isEqual?: ((calendar: import("@internationalized/date").Calendar) => boolean) | undefined;
+                balanceDate?: ((date: import("@internationalized/date").AnyCalendarDate) => void) | undefined;
+                balanceYearMonth?: ((date: import("@internationalized/date").AnyCalendarDate, previousDate: import("@internationalized/date").AnyCalendarDate) => void) | undefined;
+                constrainDate?: ((date: import("@internationalized/date").AnyCalendarDate) => void) | undefined;
+                isInverseEra?: ((date: import("@internationalized/date").AnyCalendarDate) => boolean) | undefined;
+            };
+            readonly era: string;
+            readonly year: number;
+            readonly month: number;
+            readonly day: number;
+            copy: () => CalendarDate;
+            add: (duration: import("@internationalized/date").DateDuration) => CalendarDate;
+            subtract: (duration: import("@internationalized/date").DateDuration) => CalendarDate;
+            set: (fields: import("@internationalized/date").DateFields) => CalendarDate;
+            cycle: (field: import("@internationalized/date").DateField, amount: number, options?: import("@internationalized/date").CycleOptions) => CalendarDate;
+            toDate: (timeZone: string) => Date;
+            toString: () => string;
+            compare: (b: import("@internationalized/date").AnyCalendarDate) => number;
+        } | {
+            readonly calendar: {
+                identifier: import("@internationalized/date").CalendarIdentifier;
+                fromJulianDay: (jd: number) => CalendarDate;
+                toJulianDay: (date: import("@internationalized/date").AnyCalendarDate) => number;
+                getDaysInMonth: (date: import("@internationalized/date").AnyCalendarDate) => number;
+                getMonthsInYear: (date: import("@internationalized/date").AnyCalendarDate) => number;
+                getYearsInEra: (date: import("@internationalized/date").AnyCalendarDate) => number;
+                getEras: () => string[];
+                getMinimumMonthInYear?: ((date: import("@internationalized/date").AnyCalendarDate) => number) | undefined;
+                getMinimumDayInMonth?: ((date: import("@internationalized/date").AnyCalendarDate) => number) | undefined;
+                getMaximumMonthsInYear: () => number;
+                getMaximumDaysInMonth: () => number;
+                getFormattableMonth?: ((date: import("@internationalized/date").AnyCalendarDate) => CalendarDate) | undefined;
+                isEqual?: ((calendar: import("@internationalized/date").Calendar) => boolean) | undefined;
+                balanceDate?: ((date: import("@internationalized/date").AnyCalendarDate) => void) | undefined;
+                balanceYearMonth?: ((date: import("@internationalized/date").AnyCalendarDate, previousDate: import("@internationalized/date").AnyCalendarDate) => void) | undefined;
+                constrainDate?: ((date: import("@internationalized/date").AnyCalendarDate) => void) | undefined;
+                isInverseEra?: ((date: import("@internationalized/date").AnyCalendarDate) => boolean) | undefined;
+            };
+            readonly era: string;
+            readonly year: number;
+            readonly month: number;
+            readonly day: number;
+            readonly hour: number;
+            readonly minute: number;
+            readonly second: number;
+            readonly millisecond: number;
+            readonly timeZone: string;
+            readonly offset: number;
+            copy: () => ZonedDateTime;
+            add: (duration: import("@internationalized/date").DateTimeDuration) => ZonedDateTime;
+            subtract: (duration: import("@internationalized/date").DateTimeDuration) => ZonedDateTime;
+            set: (fields: import("@internationalized/date").DateFields & import("@internationalized/date").TimeFields, disambiguation?: import("@internationalized/date").Disambiguation) => ZonedDateTime;
+            cycle: (field: import("@internationalized/date").DateField | import("@internationalized/date").TimeField, amount: number, options?: import("@internationalized/date").CycleTimeOptions) => ZonedDateTime;
+            toDate: () => Date;
+            toString: () => string;
+            toAbsoluteString: () => string;
+            compare: (b: CalendarDate | import("@internationalized/date").CalendarDateTime | ZonedDateTime) => number;
+        } | undefined;
+        end?: {
+            readonly calendar: {
+                identifier: import("@internationalized/date").CalendarIdentifier;
+                fromJulianDay: (jd: number) => CalendarDate;
+                toJulianDay: (date: import("@internationalized/date").AnyCalendarDate) => number;
+                getDaysInMonth: (date: import("@internationalized/date").AnyCalendarDate) => number;
+                getMonthsInYear: (date: import("@internationalized/date").AnyCalendarDate) => number;
+                getYearsInEra: (date: import("@internationalized/date").AnyCalendarDate) => number;
+                getEras: () => string[];
+                getMinimumMonthInYear?: ((date: import("@internationalized/date").AnyCalendarDate) => number) | undefined;
+                getMinimumDayInMonth?: ((date: import("@internationalized/date").AnyCalendarDate) => number) | undefined;
+                getMaximumMonthsInYear: () => number;
+                getMaximumDaysInMonth: () => number;
+                getFormattableMonth?: ((date: import("@internationalized/date").AnyCalendarDate) => CalendarDate) | undefined;
+                isEqual?: ((calendar: import("@internationalized/date").Calendar) => boolean) | undefined;
+                balanceDate?: ((date: import("@internationalized/date").AnyCalendarDate) => void) | undefined;
+                balanceYearMonth?: ((date: import("@internationalized/date").AnyCalendarDate, previousDate: import("@internationalized/date").AnyCalendarDate) => void) | undefined;
+                constrainDate?: ((date: import("@internationalized/date").AnyCalendarDate) => void) | undefined;
+                isInverseEra?: ((date: import("@internationalized/date").AnyCalendarDate) => boolean) | undefined;
+            };
+            readonly era: string;
+            readonly year: number;
+            readonly month: number;
+            readonly day: number;
+            copy: () => CalendarDate;
+            add: (duration: import("@internationalized/date").DateDuration) => CalendarDate;
+            subtract: (duration: import("@internationalized/date").DateDuration) => CalendarDate;
+            set: (fields: import("@internationalized/date").DateFields) => CalendarDate;
+            cycle: (field: import("@internationalized/date").DateField, amount: number, options?: import("@internationalized/date").CycleOptions) => CalendarDate;
+            toDate: (timeZone: string) => Date;
+            toString: () => string;
+            compare: (b: import("@internationalized/date").AnyCalendarDate) => number;
+        } | {
+            readonly calendar: {
+                identifier: import("@internationalized/date").CalendarIdentifier;
+                fromJulianDay: (jd: number) => CalendarDate;
+                toJulianDay: (date: import("@internationalized/date").AnyCalendarDate) => number;
+                getDaysInMonth: (date: import("@internationalized/date").AnyCalendarDate) => number;
+                getMonthsInYear: (date: import("@internationalized/date").AnyCalendarDate) => number;
+                getYearsInEra: (date: import("@internationalized/date").AnyCalendarDate) => number;
+                getEras: () => string[];
+                getMinimumMonthInYear?: ((date: import("@internationalized/date").AnyCalendarDate) => number) | undefined;
+                getMinimumDayInMonth?: ((date: import("@internationalized/date").AnyCalendarDate) => number) | undefined;
+                getMaximumMonthsInYear: () => number;
+                getMaximumDaysInMonth: () => number;
+                getFormattableMonth?: ((date: import("@internationalized/date").AnyCalendarDate) => CalendarDate) | undefined;
+                isEqual?: ((calendar: import("@internationalized/date").Calendar) => boolean) | undefined;
+                balanceDate?: ((date: import("@internationalized/date").AnyCalendarDate) => void) | undefined;
+                balanceYearMonth?: ((date: import("@internationalized/date").AnyCalendarDate, previousDate: import("@internationalized/date").AnyCalendarDate) => void) | undefined;
+                constrainDate?: ((date: import("@internationalized/date").AnyCalendarDate) => void) | undefined;
+                isInverseEra?: ((date: import("@internationalized/date").AnyCalendarDate) => boolean) | undefined;
+            };
+            readonly era: string;
+            readonly year: number;
+            readonly month: number;
+            readonly day: number;
+            readonly hour: number;
+            readonly minute: number;
+            readonly second: number;
+            readonly millisecond: number;
+            readonly timeZone: string;
+            readonly offset: number;
+            copy: () => ZonedDateTime;
+            add: (duration: import("@internationalized/date").DateTimeDuration) => ZonedDateTime;
+            subtract: (duration: import("@internationalized/date").DateTimeDuration) => ZonedDateTime;
+            set: (fields: import("@internationalized/date").DateFields & import("@internationalized/date").TimeFields, disambiguation?: import("@internationalized/date").Disambiguation) => ZonedDateTime;
+            cycle: (field: import("@internationalized/date").DateField | import("@internationalized/date").TimeField, amount: number, options?: import("@internationalized/date").CycleTimeOptions) => ZonedDateTime;
+            toDate: () => Date;
+            toString: () => string;
+            toAbsoluteString: () => string;
+            compare: (b: CalendarDate | import("@internationalized/date").CalendarDateTime | ZonedDateTime) => number;
+        } | undefined;
+    };
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_198) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: RangeDate) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: RangeDate) => any) | undefined;
+}>, {
+    fallbackDate: Date;
+    timeZone: string;
+    useTime: boolean;
+    updateInterval: number;
+}, {}, {}, {}, 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/{LibDatePicker/LibRangeDatePicker.vue → WDatePicker/WRangeDatePicker.vue}

@@ -3,14 +3,14 @@ import { getLocalTimeZone } from "@internationalized/date";
 import { DateRangePickerArrow, DateRangePickerCalendar, DateRangePickerCell, DateRangePickerCellTrigger, DateRangePickerContent, DateRangePickerField, DateRangePickerGrid, DateRangePickerGridBody, DateRangePickerGridHead, DateRangePickerGridRow, DateRangePickerHeadCell, DateRangePickerHeader, DateRangePickerHeading, DateRangePickerInput, DateRangePickerNext, DateRangePickerPrev, DateRangePickerRoot, DateRangePickerTrigger } from "reka-ui";
 import { onBeforeUnmount, ref, toRaw, useAttrs, watch } from "vue";
 import { convertDateWithFallback, getNow, toEmittableDate } from "./helpers.js";
-import IRadixIconsCalendar from "~icons/radix-icons/calendar";
-import IRadixIconsChevronLeft from "~icons/radix-icons/chevron-left";
-import IRadixIconsChevronRight from "~icons/radix-icons/chevron-right";
-import IRadixIconsDoubleArrowLeft from "~icons/radix-icons/double-arrow-left";
-import IRadixIconsDoubleArrowRight from "~icons/radix-icons/double-arrow-right";
+import ILucideCalendarRange from "~icons/lucide/calendar-range";
+import ILucideChevronLeft from "~icons/lucide/chevron-left";
+import ILucideChevronRight from "~icons/lucide/chevron-right";
+import ILucideChevronsLeft from "~icons/lucide/chevrons-left";
+import ILucideChevronsRight from "~icons/lucide/chevrons-right";
 import { useInjectedLocale } from "../../composables/useInjectedLocale.js";
 import { twMerge } from "../../utils/twMerge.js";
-import Icon from "../Icon/Icon.vue";
+import WIcon from "../WIcon/WIcon.vue";
 const attrs = useAttrs();
 const props = defineProps({
   useTime: { type: Boolean, required: false, default: false },
@@ -184,9 +184,9 @@ const locale = useInjectedLocale().timeLocale;
 				dark:bg-neutral-800
 			"
 		>
-			<Icon>
-				<i-radix-icons-calendar/>
-			</Icon>
+			<WIcon>
+				<i-lucide-calendar-range/>
+			</WIcon>
 		</DateRangePickerTrigger>
 	</DateRangePickerField>
 
@@ -209,10 +209,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
 		"
@@ -237,9 +241,9 @@ const locale = useInjectedLocale().timeLocale;
 					"
 					:prev-page="(date2) => date2.subtract({ years: 1 })"
 				>
-					<Icon class="scale-150">
-						<i-radix-icons-double-arrow-left/>
-					</Icon>
+					<WIcon class="scale-150">
+						<i-lucide-chevrons-left/>
+					</WIcon>
 				</DateRangePickerPrev>
 				<DateRangePickerPrev
 					class="
@@ -254,9 +258,9 @@ const locale = useInjectedLocale().timeLocale;
 							px-1
 						"
 				>
-					<Icon class="scale-150">
-						<i-radix-icons-chevron-left/>
-					</Icon>
+					<WIcon class="scale-150">
+						<i-lucide-chevron-left/>
+					</WIcon>
 				</DateRangePickerPrev>
 
 				<DateRangePickerHeading class="date-range-picker--heading min-w-[14ch] text-center"/>
@@ -273,9 +277,9 @@ const locale = useInjectedLocale().timeLocale;
 						px-1
 					"
 				>
-					<Icon class="scale-150">
-						<i-radix-icons-chevron-right/>
-					</Icon>
+					<WIcon class="scale-150">
+						<i-lucide-chevron-right/>
+					</WIcon>
 				</DateRangePickerNext>
 				<DateRangePickerNext
 					class="
@@ -291,9 +295,9 @@ const locale = useInjectedLocale().timeLocale;
 					"
 					:next-page="(date2) => date2.add({ years: 1 })"
 				>
-					<Icon class="scale-150">
-						<i-radix-icons-double-arrow-right/>
-					</Icon>
+					<WIcon class="scale-150">
+						<i-lucide-chevrons-right/>
+					</WIcon>
 				</DateRangePickerNext>
 			</DateRangePickerHeader>
 			<div