@witchcraft/ui 0.4.0-beta.5 → 0.4.0-beta.7

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "witchcraftUi",
   "configKey": "witchcraftUi",
-  "version": "0.4.0-beta.5",
+  "version": "0.4.0-beta.7",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/WCheckbox/WCheckbox.vue

@@ -84,6 +84,7 @@
 <script setup>
 import { CheckboxIndicator, CheckboxRoot } from "reka-ui";
 import { useAttrs } from "vue";
+import ILucideCheck from "~icons/lucide/check";
 import { useFallbackId } from "../../composables/useFallbackId.js";
 import { usePreHydrationValue } from "../../composables/usePreHydrationValue.js";
 import { twMerge } from "../../utils/twMerge.js";

package/dist/runtime/components/WColorPicker/WColorPicker.vue

@@ -189,6 +189,7 @@ import { computed, onMounted, reactive, ref, useAttrs, watch } from "vue";
 import { safeConvertToHsva } from "./utils/safeConvertToHsva.js";
 import { safeConvertToRgba } from "./utils/safeConvertToRgba.js";
 import { toLowPrecisionRgbaString } from "./utils/toLowPrecisionRgbaString.js";
+import ILucideCopy from "~icons/lucide/copy";
 import { useFallbackId } from "../../composables/useFallbackId.js";
 import { useInjectedI18n } from "../../composables/useInjectedI18n.js";
 import { copy } from "../../helpers/copy.js";

package/dist/runtime/components/WCombobox/WCombobox.vue

@@ -48,8 +48,8 @@
 					has-[input:invalid]:border-danger-500
 					invalid:border-danger-500
 				`,
-  open && popupSide === 'top' && `rounded-tl-none rounded-tr-none`,
-  open && popupSide === 'bottom' && `rounded-bl-none rounded-br-none`
+  filtered.length > 0 && open && popupSide === 'top' && `rounded-tl-none rounded-tr-none`,
+  filtered.length > 0 && open && popupSide === 'bottom' && `rounded-bl-none rounded-br-none`
 )"
 		>
 			<!-- @vue-expect-error aria/keydown can be defined -->
@@ -309,6 +309,8 @@ import {
   useFilter
 } from "reka-ui";
 import { computed, nextTick, ref, useAttrs, useSlots, useTemplateRef, watch } from "vue";
+import ILucideChevronDown from "~icons/lucide/chevron-down";
+import ILucideLoaderCircle from "~icons/lucide/loader-circle";
 import { useDelayedLoadingIndicator } from "../../composables/useDelayedLoadingIndicator.js";
 import { useDisplayForReka } from "../../composables/useDisplayForReka.js";
 import { useFallbackId } from "../../composables/useFallbackId.js";

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

@@ -3,6 +3,11 @@ 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 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 WIcon from "../WIcon/WIcon.vue";

package/dist/runtime/components/WDatePicker/WSingleDatePicker.vue

@@ -3,6 +3,11 @@ import { getLocalTimeZone } from "@internationalized/date";
 import { DatePickerArrow, DatePickerCalendar, DatePickerCell, DatePickerCellTrigger, DatePickerContent, DatePickerField, DatePickerGrid, DatePickerGridBody, DatePickerGridHead, DatePickerGridRow, DatePickerHeadCell, DatePickerHeader, DatePickerHeading, DatePickerInput, DatePickerNext, DatePickerPrev, DatePickerRoot, DatePickerTrigger } from "reka-ui";
 import { onBeforeUnmount, ref, toRaw, useAttrs, watch } from "vue";
 import { convertDateWithFallback, getNow, toEmittableDate } from "./helpers.js";
+import ILucideCalendarDays from "~icons/lucide/calendar-days";
+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 WIcon from "../WIcon/WIcon.vue";

package/dist/runtime/components/WDebug/WDebug.vue

@@ -34,6 +34,7 @@
 
 <script setup>
 import { useSlots } from "vue";
+import ILucideCopy from "~icons/lucide/copy";
 import WButton from "../WButton/WButton.vue";
 import WIcon from "../WIcon/WIcon.vue";
 const $slots = useSlots();

package/dist/runtime/components/WFileInput/WFileInput.vue

@@ -226,6 +226,9 @@
 
 <script setup>
 import { computed, onBeforeUnmount, ref, shallowReactive, watch } from "vue";
+import ILucideFile from "~icons/lucide/file";
+import ILucideUpload from "~icons/lucide/upload";
+import ILucideX from "~icons/lucide/x";
 import { useFallbackId } from "../../composables/useFallbackId.js";
 import { useInjectedI18n } from "../../composables/useInjectedI18n.js";
 import { twMerge } from "../../utils/twMerge.js";

package/dist/runtime/components/WMultiValues/WMultiValues.vue

@@ -86,6 +86,7 @@
 <script setup>
 import { removeIfIn } from "@alanscodelog/utils/removeIfIn";
 import { computed, nextTick, ref, useAttrs } from "vue";
+import ILucideX from "~icons/lucide/x";
 import { copy } from "../../helpers/copy.js";
 import { twMerge } from "../../utils/twMerge.js";
 import WButton from "../WButton/WButton.vue";

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

@@ -177,6 +177,8 @@
 
 <script setup>
 import { computed, onMounted, ref, useAttrs } from "vue";
+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";

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

@@ -4,7 +4,8 @@ import type { EmitsToProps, PopupConstrainToProps, TailwindClassProp } from "../
 type __VLS_Props = PopupConstrainToProps & {
     backdropClass?: string;
     showBackdrop?: boolean;
-    animationDirection?: "use-side" | "use-align" | "left" | "right" | "up" | "down";
+    showArrow?: boolean;
+    animationDirection?: "use-side" | "use-align" | "left" | "right" | "up" | "down" | "show" | "none";
     /** Overrides teleport target. */
     to?: string;
     /** Overrides reka-ui's PopoverRootProps */
@@ -31,7 +32,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     constrainHeightTo: number | "trigger" | "available" | string | null;
     to: string;
     showBackdrop: boolean;
-    animationDirection: "use-side" | "use-align" | "left" | "right" | "up" | "down";
+    showArrow: boolean;
+    animationDirection: "use-side" | "use-align" | "left" | "right" | "up" | "down" | "show" | "none";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/WPopover/WPopover.vue

@@ -14,7 +14,7 @@
 		<transition>
 			<div
 				v-if="showBackdrop && modelValue"
-				:class="twMerge(`popup--backdrop absolute inset-0 bg-black/50`, backdropClass)"
+				:class="twMerge(`popover--backdrop absolute inset-0 bg-black/50`, backdropClass)"
 				@click="modelValue = false"
 			/>
 		</transition>
@@ -38,7 +38,7 @@
 			:style="contentStyle"
 			:class="twMerge(
   `
-				popup--content-wrapper
+				popover--content-wrapper
 				focus:outline-none
 				overflow-auto
 				scrollbar-hidden
@@ -71,12 +71,15 @@
   animationDirection === `down` && `
 					animate-slideInDown
 				`,
+  animationDirection === `show` && `
+					animate-contentShow
+				`,
   contentProps?.class
 )"
 		>
 			<div
 				:class="twMerge(`
-						popup--content
+						popover--content
 						flex
 						flex-col
 						bg-neutral-50
@@ -96,13 +99,16 @@
 			</div>
 
 			<PopoverArrow
-				class="
+				v-if="showArrow"
+				:class="twMerge(`
+					popover--arrow
 					-mt-px
 					fill-neutral-50
 					dark:fill-neutral-800
 					drop-shadow-[0_2px_1px_rgba(0,0,0,0.3)]
 					relative
-				"
+					stroke-black/30
+				`)"
 			/>
 		</PopoverContent>
 	</PopoverPortal>
@@ -120,7 +126,7 @@ import {
 import { usePopupConstrainToStyle } from "../../composables/usePopupConstrainToStyle.js";
 import { twMerge } from "../../utils/twMerge.js";
 defineOptions({
-  name: "WPopup",
+  name: "WPopover",
   inheritAttrs: false
 });
 const props = defineProps({
@@ -128,6 +134,7 @@ const props = defineProps({
   constrainHeightTo: { type: [Number, String, null], required: false, default: "available" },
   backdropClass: { type: String, required: false },
   showBackdrop: { type: Boolean, required: false, default: false },
+  showArrow: { type: Boolean, required: false, default: true },
   animationDirection: { type: String, required: false, default: "use-side" },
   to: { type: String, required: false, default: "#root" },
   rootProps: { type: Object, required: false },

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

@@ -4,7 +4,8 @@ import type { EmitsToProps, PopupConstrainToProps, TailwindClassProp } from "../
 type __VLS_Props = PopupConstrainToProps & {
     backdropClass?: string;
     showBackdrop?: boolean;
-    animationDirection?: "use-side" | "use-align" | "left" | "right" | "up" | "down";
+    showArrow?: boolean;
+    animationDirection?: "use-side" | "use-align" | "left" | "right" | "up" | "down" | "show" | "none";
     /** Overrides teleport target. */
     to?: string;
     /** Overrides reka-ui's PopoverRootProps */
@@ -31,7 +32,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     constrainHeightTo: number | "trigger" | "available" | string | null;
     to: string;
     showBackdrop: boolean;
-    animationDirection: "use-side" | "use-align" | "left" | "right" | "up" | "down";
+    showArrow: boolean;
+    animationDirection: "use-side" | "use-align" | "left" | "right" | "up" | "down" | "show" | "none";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/WTooltip/WTooltip.vue

@@ -92,6 +92,7 @@
 
 <script setup>
 import { TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTrigger } from "reka-ui";
+import ILucideInfo from "~icons/lucide/info";
 import { usePopupConstrainToStyle } from "../../composables/usePopupConstrainToStyle.js";
 import { twMerge } from "../../utils/twMerge.js";
 import WIcon from "../WIcon/WIcon.vue";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@witchcraft/ui",
-  "version": "0.4.0-beta.5",
+  "version": "0.4.0-beta.7",
   "description": "Vue component library.",
   "type": "module",
   "main": "./dist/runtime/main.lib.js",

package/src/runtime/components/WCheckbox/WCheckbox.vue

@@ -84,6 +84,8 @@ import { CheckboxIndicator, CheckboxRoot } from "reka-ui"
 import type { HTMLAttributes, InputHTMLAttributes } from "vue"
 import { useAttrs } from "vue"
 
+import ILucideCheck from "~icons/lucide/check"
+
 import { useFallbackId } from "../../composables/useFallbackId.js"
 import { usePreHydrationValue } from "../../composables/usePreHydrationValue.js"
 import type { BaseInteractiveProps, TailwindClassProp } from "../../types/index.js"

package/src/runtime/components/WColorPicker/WColorPicker.vue

@@ -191,6 +191,8 @@ import { safeConvertToHsva } from "./utils/safeConvertToHsva.js"
 import { safeConvertToRgba } from "./utils/safeConvertToRgba.js"
 import { toLowPrecisionRgbaString } from "./utils/toLowPrecisionRgbaString.js"
 
+import ILucideCopy from "~icons/lucide/copy"
+
 import { useFallbackId } from "../../composables/useFallbackId.js"
 import { useInjectedI18n } from "../../composables/useInjectedI18n.js"
 import { copy } from "../../helpers/copy.js"

package/src/runtime/components/WCombobox/WCombobox.vue

@@ -46,8 +46,8 @@
 					has-[input:invalid]:border-danger-500
 					invalid:border-danger-500
 				`,
-				open && popupSide === 'top' && `rounded-tl-none rounded-tr-none`,
-				open && popupSide === 'bottom' && `rounded-bl-none rounded-br-none`
+				filtered.length > 0 && open && popupSide === 'top' && `rounded-tl-none rounded-tr-none`,
+				filtered.length > 0 && open && popupSide === 'bottom' && `rounded-bl-none rounded-br-none`
 			)"
 		>
 			<!-- @vue-expect-error aria/keydown can be defined -->
@@ -307,6 +307,9 @@ import {
 import type { EmitsToProps, HTMLAttributes, InputHTMLAttributes } from "vue"
 import { computed, nextTick, ref, useAttrs, useSlots, useTemplateRef, watch } from "vue"
 
+import ILucideChevronDown from "~icons/lucide/chevron-down"
+import ILucideLoaderCircle from "~icons/lucide/loader-circle"
+
 import { useDelayedLoadingIndicator } from "../../composables/useDelayedLoadingIndicator.js"
 import { type SuggestionsDisplayProps, useDisplayForReka } from "../../composables/useDisplayForReka.js"
 import { useFallbackId } from "../../composables/useFallbackId.js"

package/src/runtime/components/WDatePicker/WRangeDatePicker.vue

@@ -7,6 +7,12 @@ import { onBeforeUnmount, ref, toRaw, useAttrs, watch } from "vue"
 
 import { convertDateWithFallback, getNow, toEmittableDate } from "./helpers.js"
 
+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 type { RangeDate } from "../../types/index.js"
 import { twMerge } from "../../utils/twMerge.js"

package/src/runtime/components/WDatePicker/WSingleDatePicker.vue

@@ -5,6 +5,12 @@ import { onBeforeUnmount, ref, toRaw, useAttrs, watch } from "vue"
 
 import { convertDateWithFallback, getNow, toEmittableDate } from "./helpers.js"
 
+import ILucideCalendarDays from "~icons/lucide/calendar-days"
+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 type { SingleDate } from "../../types/index.js"
 import { twMerge } from "../../utils/twMerge.js"

package/src/runtime/components/WDebug/WDebug.vue

@@ -35,6 +35,8 @@
 <script setup lang="ts">
 import { useSlots } from "vue"
 
+import ILucideCopy from "~icons/lucide/copy"
+
 import WButton from "../WButton/WButton.vue"
 import WIcon from "../WIcon/WIcon.vue"
 

package/src/runtime/components/WFileInput/WFileInput.vue

@@ -231,6 +231,10 @@
 import type { HTMLAttributes, InputHTMLAttributes } from "vue"
 import { computed, onBeforeUnmount, ref, shallowReactive, watch } from "vue"
 
+import ILucideFile from "~icons/lucide/file"
+import ILucideUpload from "~icons/lucide/upload"
+import ILucideX from "~icons/lucide/x"
+
 import { useFallbackId } from "../../composables/useFallbackId.js"
 import { useInjectedI18n } from "../../composables/useInjectedI18n.js"
 import type { FileInputError, TailwindClassProp } from "../../types/index.js"

package/src/runtime/components/WMultiValues/WMultiValues.vue

@@ -83,6 +83,8 @@
 import { removeIfIn } from "@alanscodelog/utils/removeIfIn"
 import { computed, type HTMLAttributes, nextTick, ref, useAttrs } from "vue"
 
+import ILucideX from "~icons/lucide/x"
+
 import { copy } from "../../helpers/copy.js"
 import type { BaseInteractiveProps, TailwindClassProp } from "../../types/index.js"
 import { twMerge } from "../../utils/twMerge.js"

package/src/runtime/components/WNotifications/WNotification.vue

@@ -176,6 +176,9 @@
 <script setup lang="ts">
 import { computed, type HTMLAttributes, onMounted, ref, useAttrs } from "vue"
 
+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 { type NotificationEntry, NotificationHandler } from "../../helpers/NotificationHandler.js"

package/src/runtime/components/WPopover/WPopover.vue

@@ -14,7 +14,7 @@
 		<transition>
 			<div
 				v-if="showBackdrop && modelValue"
-				:class="twMerge(`popup--backdrop absolute inset-0 bg-black/50`, backdropClass)"
+				:class="twMerge(`popover--backdrop absolute inset-0 bg-black/50`, backdropClass)"
 				@click="modelValue = false"
 			/>
 		</transition>
@@ -37,7 +37,7 @@
 			}"
 			:style="contentStyle"
 			:class="twMerge(`
-				popup--content-wrapper
+				popover--content-wrapper
 				focus:outline-none
 				overflow-auto
 				scrollbar-hidden
@@ -70,11 +70,14 @@
 				animationDirection === `down` && `
 					animate-slideInDown
 				`,
+				animationDirection === `show` && `
+					animate-contentShow
+				`,
 				contentProps?.class)"
 		>
 			<div
 				:class="twMerge(`
-						popup--content
+						popover--content
 						flex
 						flex-col
 						bg-neutral-50
@@ -94,13 +97,16 @@
 			</div>
 
 			<PopoverArrow
-				class="
+				v-if="showArrow"
+				:class="twMerge(`
+					popover--arrow
 					-mt-px
 					fill-neutral-50
 					dark:fill-neutral-800
 					drop-shadow-[0_2px_1px_rgba(0,0,0,0.3)]
 					relative
-				"
+					stroke-black/30
+				`)"
 			/>
 		</PopoverContent>
 	</PopoverPortal>
@@ -127,7 +133,7 @@ import { twMerge } from "../../utils/twMerge.js"
 
 /** Wrapper around reka-ui's `Popover` component. */
 defineOptions({
-	name: "WPopup",
+	name: "WPopover",
 	inheritAttrs: false
 })
 
@@ -136,9 +142,10 @@ const props = withDefaults(defineProps<
 	& PopupConstrainToProps
 	& {
 		backdropClass?: string
-		/* If true, a backdrop is shown behind the popup. Whether interaction is allowed outside the popover is still determined by `disableOutsidePointerEvents`. */
+		/* If true, a backdrop is shown behind the popover. Whether interaction is allowed outside the popover is still determined by `disableOutsidePointerEvents`. */
 		showBackdrop?: boolean
-		animationDirection?: "use-side" | "use-align" | "left" | "right" | "up" | "down"
+		showArrow?: boolean
+		animationDirection?: "use-side" | "use-align" | "left" | "right" | "up" | "down" | "show" | "none"
 		/** Overrides teleport target. */
 		to?: string
 		/** Overrides reka-ui's PopoverRootProps */
@@ -148,6 +155,7 @@ const props = withDefaults(defineProps<
 	}
 >(), {
 	showBackdrop: false,
+	showArrow: true,
 	constrainWidthTo: 400,
 	constrainHeightTo: "available",
 	animationDirection: "use-side",

package/src/runtime/components/WTable/WTable.vue

@@ -469,4 +469,3 @@ defineExpose({
 })
 </script>
 
-

package/src/runtime/components/WTooltip/WTooltip.vue

@@ -92,6 +92,8 @@
 <script setup lang="ts">
 import { TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTrigger } from "reka-ui"
 
+import ILucideInfo from "~icons/lucide/info"
+
 import { usePopupConstrainToStyle } from "../../composables/usePopupConstrainToStyle.js"
 import type { PopupConstrainToProps } from "../../types/index.js"
 import { twMerge } from "../../utils/twMerge.js"