@witchcraft/ui 0.4.0-beta.1 → 0.4.0-beta.10

package/README.md

@@ -206,7 +206,7 @@ usePreHydrationValue(finalId, modelValue)
  * If the component requires general docs, they should be written here over the export default.
  */
 export default {
-	name: "LibComponentName"
+	name: "WComponentName"
 	// https://v3.vuejs.org/guide/typescript-support.html#annotating-props
 }
 </script>```

package/dist/module.json

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

package/dist/module.mjs

@@ -19,7 +19,7 @@ const componentsInfo = globFiles([
   `!**/Template/**.vue`
 ], [], (filepath, name) => ({
   originalName: name,
-  name: name.startsWith("Lib") ? name.replace("Lib", "PREFIX") : `PREFIX${name}`,
+  name: name.startsWith("W") ? name.replace("W", "PREFIX") : `PREFIX${name}`,
   filepath
 }));
 const module$1 = defineNuxtModule({

package/dist/runtime/build/WitchcraftUiResolver.js

@@ -5,7 +5,7 @@ export const WitchcraftUiResolver = ({
 } = {}) => (componentName) => {
   if (componentName.startsWith(prefix)) {
     const n = componentName.slice(1);
-    const filename = prefixless.includes(n) ? n : `Lib${n}`;
+    const filename = prefixless.includes(n) ? n : `W${n}`;
     if (!filter(n)) {
       return void 0;
     }

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/WColorInput/WColorInput.d.vue.ts

@@ -35,11 +35,11 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }>, {
     border: boolean;
     allowAlpha: boolean;
+    copyTransform: (val: HsvaColor, stringVal: string) => any;
     stringPrecision: number;
     customRepresentation: {
         fromHsvaToString: (hsva: HsvaColor, includeAlpha: boolean) => string;
     };
-    copyTransform: (val: HsvaColor, stringVal: string) => any;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -35,11 +35,11 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }>, {
     border: boolean;
     allowAlpha: boolean;
+    copyTransform: (val: HsvaColor, stringVal: string) => any;
     stringPrecision: number;
     customRepresentation: {
         fromHsvaToString: (hsva: HsvaColor, includeAlpha: boolean) => string;
     };
-    copyTransform: (val: HsvaColor, stringVal: string) => any;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -45,14 +45,14 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     "onUpdate:tempValue"?: ((value: RgbaColor | undefined) => any) | undefined;
 }>, {
     border: boolean;
-    valid: boolean;
     allowAlpha: boolean;
+    copyTransform: (val: HsvaColor, stringVal: string) => any;
     stringPrecision: number;
     customRepresentation: {
         fromHsvaToString: (hsva: HsvaColor, includeAlpha: boolean) => string;
         fromStringToHsva?: (string: string) => HsvaColor | undefined;
     };
-    copyTransform: (val: HsvaColor, stringVal: string) => any;
+    valid: boolean;
 }, {}, {}, {}, 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/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/WColorPicker/WColorPicker.vue.d.ts

@@ -45,14 +45,14 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     "onUpdate:tempValue"?: ((value: RgbaColor | undefined) => any) | undefined;
 }>, {
     border: boolean;
-    valid: boolean;
     allowAlpha: boolean;
+    copyTransform: (val: HsvaColor, stringVal: string) => any;
     stringPrecision: number;
     customRepresentation: {
         fromHsvaToString: (hsva: HsvaColor, includeAlpha: boolean) => string;
         fromStringToHsva?: (string: string) => HsvaColor | undefined;
     };
-    copyTransform: (val: HsvaColor, stringVal: string) => any;
+    valid: boolean;
 }, {}, {}, {}, 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/WCombobox/WCombobox.d.vue.ts

@@ -43,9 +43,9 @@ declare const __VLS_export: <TSuggestion extends NonNullable<AcceptableValue>>(_
     }) & {
         "onUpdate:modelValue"?: ((value: TSuggestion) => any) | undefined;
         "onUpdate:open"?: ((value: boolean) => any) | undefined;
+        onSave?: ((value: string) => any) | undefined;
         "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
         "onUpdate:loading"?: ((value: boolean) => any) | undefined;
-        onSave?: ((value: string) => any) | undefined;
         onNew?: ((value: string) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
@@ -54,6 +54,8 @@ declare const __VLS_export: <TSuggestion extends NonNullable<AcceptableValue>>(_
     attrs: any;
     slots: {
         'loading-indicator'?: (props: {}) => any;
+    } & {
+        right?: (props: {}) => any;
     } & {
         trigger?: (props: {
             open: boolean;

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

@@ -38,7 +38,7 @@
 					border
 					border-neutral-300
 					dark:border-neutral-700
-					bg-neutral-100
+					bg-white
 					dark:bg-neutral-800/50
 					focus:bg-bg
 					dark:focus:bg-neutral-800
@@ -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 -->
@@ -95,6 +95,7 @@
 					</WIcon>
 				</slot>
 			</Transition>
+			<slot name="right"/>
 			<ComboboxTrigger
 				:as-child="true"
 			>
@@ -104,7 +105,7 @@
 				>
 					<WButton
 						:border="false"
-						class="combobox--toggle p-0"
+						class="combobox--toggle p-0 text-neutral-800 dark:text-neutral-200"
 						:aria-label="open ? 'Close' : 'Open'"
 					>
 						<slot
@@ -114,7 +115,7 @@
 							<WIcon
 								:class="twMerge(`combobox--toggle scale-150`, open && `rotate-180`)"
 							>
-								<i-chevron-caret-down/>
+								<i-lucide-chevron-down/>
 							</WIcon>
 						</slot>
 					</WButton>
@@ -308,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/WCombobox/WCombobox.vue.d.ts

@@ -43,9 +43,9 @@ declare const __VLS_export: <TSuggestion extends NonNullable<AcceptableValue>>(_
     }) & {
         "onUpdate:modelValue"?: ((value: TSuggestion) => any) | undefined;
         "onUpdate:open"?: ((value: boolean) => any) | undefined;
+        onSave?: ((value: string) => any) | undefined;
         "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
         "onUpdate:loading"?: ((value: boolean) => any) | undefined;
-        onSave?: ((value: string) => any) | undefined;
         onNew?: ((value: string) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
@@ -54,6 +54,8 @@ declare const __VLS_export: <TSuggestion extends NonNullable<AcceptableValue>>(_
     attrs: any;
     slots: {
         'loading-indicator'?: (props: {}) => any;
+    } & {
+        right?: (props: {}) => any;
     } & {
         trigger?: (props: {
             open: boolean;

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 */
@@ -29,9 +30,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
 }>, {
     constrainWidthTo: number | "trigger" | "available" | string | null;
     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";
+    to: string;
 }, {}, {}, {}, 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
 				focus:outline-none
 				overflow-auto
 				scrollbar-hidden
@@ -71,38 +71,43 @@
   animationDirection === `down` && `
 					animate-slideInDown
 				`,
+  animationDirection === `show` && `
+					animate-contentShow
+				`,
   contentProps?.class
 )"
 		>
 			<div
 				:class="twMerge(`
-						popup--content
-						flex
-						flex-col
-						bg-neutral-50
-						dark:bg-neutral-900
-						rounded-sm
-						p-2
-						text-sm
-						shadow-sm
-						shadow-black/30
-						border
-						border-black/30
-						whitespace-pre-wrap
-						overflow-auto
-					`)"
+					popover--content-inner
+					flex
+					flex-col
+					bg-neutral-50
+					dark:bg-neutral-900
+					rounded-sm
+					p-2
+					shadow-sm
+					shadow-black/30
+					border
+					border-black/30
+					whitespace-pre-wrap
+					overflow-auto
+				`)"
 			>
 				<slot name="popover"/>
 			</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 +125,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 +133,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 */
@@ -29,9 +30,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
 }>, {
     constrainWidthTo: number | "trigger" | "available" | string | null;
     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";
+    to: string;
 }, {}, {}, {}, 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/WPopup/WPopup.d.vue.ts

@@ -2,6 +2,8 @@ import type { DialogContentEmits, DialogContentProps, DialogRootEmits, DialogRoo
 import type { EmitsToProps, HTMLAttributes } from "vue";
 import type { TailwindClassProp } from "../../types/index.js";
 type __VLS_Props = {
+    title?: string;
+    description?: string;
     backdropClass?: string;
     /** Overrides reka-ui's DialogContentProps */
     contentProps?: DialogContentProps & EmitsToProps<DialogContentEmits> & Omit<HTMLAttributes, "class"> & TailwindClassProp;
@@ -16,13 +18,21 @@ type __VLS_ModelProps = {
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare var __VLS_14: {}, __VLS_28: {
     class: string;
-}, __VLS_36: {};
+}, __VLS_36: {}, __VLS_38: {}, __VLS_46: {}, __VLS_54: {}, __VLS_62: {};
 type __VLS_Slots = {} & {
     button?: (props: typeof __VLS_14) => any;
 } & {
     backdrop?: (props: typeof __VLS_28) => any;
 } & {
     popup?: (props: typeof __VLS_36) => any;
+} & {
+    title?: (props: typeof __VLS_38) => any;
+} & {
+    description?: (props: typeof __VLS_46) => any;
+} & {
+    extra?: (props: typeof __VLS_54) => any;
+} & {
+    close?: (props: typeof __VLS_62) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: boolean) => any;

package/dist/runtime/components/WPopup/WPopup.vue

@@ -27,7 +27,7 @@
 		<DialogContent
 			v-bind="{ ...contentProps, class: void 0 }"
 			:class="twMerge(`
-				popup--content-wrapper
+				popup--content
 				z-100
 				focus:outline-none
 				fixed
@@ -45,15 +45,44 @@
 		>
 			<div
 				:class="twMerge(`
-					popup--content
+					popup--content-inner
 					flex
 					flex-col
 					bg-neutral-100
 					dark:bg-neutral-800
 					rounded-md
+					flex
+					flex-col
+					gap-3
+					p-2
 				`)"
 			>
-				<slot name="popup"/>
+				<slot name="popup">
+					<slot name="title">
+						<DialogTitle
+							v-if="title"
+							class="text-lg font-bold"
+						>
+							{{ title }}
+						</DialogTitle>
+					</slot>
+					<slot name="description">
+						<DialogDescription v-if="description">
+							{{ description }}
+						</DialogDescription>
+					</slot>
+					<slot name="extra"/>
+				</slot>
+				<DialogCloseButton as-child>
+					<slot name="close">
+						<WButton
+							class="justify-self-end"
+							@click="modelValue = false"
+						>
+							Close
+						</WButton>
+					</slot>
+				</DialogCloseButton>
 			</div>
 		</DialogContent>
 	</DialogPortal>
@@ -63,8 +92,11 @@
 <script setup>
 import { DialogContent, DialogOverlay, DialogPortal, DialogRoot, DialogTrigger } from "reka-ui";
 import { twMerge } from "../../utils/twMerge.js";
+import WButton from "../WButton/WButton.vue";
 defineOptions({ name: "WPopup", inheritAttrs: false });
 defineProps({
+  title: { type: String, required: false },
+  description: { type: String, required: false },
   backdropClass: { type: String, required: false },
   contentProps: { type: Object, required: false },
   rootProps: { type: Object, required: false },

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

@@ -2,6 +2,8 @@ import type { DialogContentEmits, DialogContentProps, DialogRootEmits, DialogRoo
 import type { EmitsToProps, HTMLAttributes } from "vue";
 import type { TailwindClassProp } from "../../types/index.js";
 type __VLS_Props = {
+    title?: string;
+    description?: string;
     backdropClass?: string;
     /** Overrides reka-ui's DialogContentProps */
     contentProps?: DialogContentProps & EmitsToProps<DialogContentEmits> & Omit<HTMLAttributes, "class"> & TailwindClassProp;
@@ -16,13 +18,21 @@ type __VLS_ModelProps = {
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare var __VLS_14: {}, __VLS_28: {
     class: string;
-}, __VLS_36: {};
+}, __VLS_36: {}, __VLS_38: {}, __VLS_46: {}, __VLS_54: {}, __VLS_62: {};
 type __VLS_Slots = {} & {
     button?: (props: typeof __VLS_14) => any;
 } & {
     backdrop?: (props: typeof __VLS_28) => any;
 } & {
     popup?: (props: typeof __VLS_36) => any;
+} & {
+    title?: (props: typeof __VLS_38) => any;
+} & {
+    description?: (props: typeof __VLS_46) => any;
+} & {
+    extra?: (props: typeof __VLS_54) => any;
+} & {
+    close?: (props: typeof __VLS_62) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: boolean) => any;

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

@@ -1,10 +1,11 @@
 import { type InputHTMLAttributes } from "vue";
 import type { BaseInteractiveProps, TailwindClassProp } from "../../types/index.js";
 declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: import("vue").PublicProps & __VLS_PrettifyLocal<(Omit<InputHTMLAttributes, "class" | "onInput" | "onSubmit" | "disabled" | "readonly" | "autocomplete"> & TailwindClassProp & Pick<BaseInteractiveProps, "border" | "unstyle"> & {
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(Omit<InputHTMLAttributes, "class" | "onInput" | "onSubmit" | "disabled" | "type" | "readonly" | "autocomplete"> & TailwindClassProp & Pick<BaseInteractiveProps, "border" | "unstyle"> & {
         id?: string;
         label?: string;
         valid?: boolean;
+        type?: InputHTMLAttributes["type"];
     } & {
         modelValue: T;
     }) & {

package/dist/runtime/components/WSimpleInput/WSimpleInput.vue

@@ -96,7 +96,8 @@ const props = defineProps({
   border: { type: Boolean, required: false, default: true },
   id: { type: String, required: false, default: "" },
   label: { type: String, required: false, default: "" },
-  valid: { type: Boolean, required: false, default: true }
+  valid: { type: Boolean, required: false, default: true },
+  type: { type: null, required: false, default: void 0 }
 });
 const finalId = useFallbackId(props);
 const modelValue = defineModel({ type: null, ...{ required: true } });

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

@@ -1,10 +1,11 @@
 import { type InputHTMLAttributes } from "vue";
 import type { BaseInteractiveProps, TailwindClassProp } from "../../types/index.js";
 declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: import("vue").PublicProps & __VLS_PrettifyLocal<(Omit<InputHTMLAttributes, "class" | "onInput" | "onSubmit" | "disabled" | "readonly" | "autocomplete"> & TailwindClassProp & Pick<BaseInteractiveProps, "border" | "unstyle"> & {
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(Omit<InputHTMLAttributes, "class" | "onInput" | "onSubmit" | "disabled" | "type" | "readonly" | "autocomplete"> & TailwindClassProp & Pick<BaseInteractiveProps, "border" | "unstyle"> & {
         id?: string;
         label?: string;
         valid?: boolean;
+        type?: InputHTMLAttributes["type"];
     } & {
         modelValue: T;
     }) & {

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.1",
+  "version": "0.4.0-beta.10",
   "description": "Vue component library.",
   "type": "module",
   "main": "./dist/runtime/main.lib.js",

package/src/module.ts

@@ -35,7 +35,7 @@ const componentsInfo: {
 	`!**/Template/**.vue`
 ], [], (filepath: string, name: string) => ({
 	originalName: name,
-	name: name.startsWith("Lib") ? name.replace("Lib", "PREFIX") : `PREFIX${name}`,
+	name: name.startsWith("W") ? name.replace("W", "PREFIX") : `PREFIX${name}`,
 	filepath
 }))
 

package/src/runtime/build/WitchcraftUiResolver.ts

@@ -15,7 +15,7 @@ export const WitchcraftUiResolver = (
 ): { from: string } | undefined => {
 	if (componentName.startsWith(prefix)) {
 		const n = componentName.slice(1)
-		const filename = prefixless.includes(n) ? n : `Lib${n}`
+		const filename = prefixless.includes(n) ? n : `W${n}`
 		if (!filter(n)) {
 			return undefined
 		}

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

@@ -36,7 +36,7 @@
 					border
 					border-neutral-300
 					dark:border-neutral-700
-					bg-neutral-100
+					bg-white
 					dark:bg-neutral-800/50
 					focus:bg-bg
 					dark:focus:bg-neutral-800
@@ -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 -->
@@ -92,6 +92,7 @@
 					</WIcon>
 				</slot>
 			</Transition>
+			<slot name="right"/>
 			<ComboboxTrigger
 				:as-child="true"
 			>
@@ -101,7 +102,7 @@
 				>
 					<WButton
 						:border="false"
-						class="combobox--toggle p-0"
+						class="combobox--toggle p-0 text-neutral-800 dark:text-neutral-200"
 						:aria-label="open ? 'Close' : 'Open'"
 					>
 						<slot
@@ -111,7 +112,7 @@
 							<WIcon
 								:class="twMerge(`combobox--toggle scale-150`, open && `rotate-180`)"
 							>
-								<i-chevron-caret-down/>
+								<i-lucide-chevron-down/>
 							</WIcon>
 						</slot>
 					</WButton>
@@ -306,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
 				focus:outline-none
 				overflow-auto
 				scrollbar-hidden
@@ -70,37 +70,42 @@
 				animationDirection === `down` && `
 					animate-slideInDown
 				`,
+				animationDirection === `show` && `
+					animate-contentShow
+				`,
 				contentProps?.class)"
 		>
 			<div
 				:class="twMerge(`
-						popup--content
-						flex
-						flex-col
-						bg-neutral-50
-						dark:bg-neutral-900
-						rounded-sm
-						p-2
-						text-sm
-						shadow-sm
-						shadow-black/30
-						border
-						border-black/30
-						whitespace-pre-wrap
-						overflow-auto
-					`)"
+					popover--content-inner
+					flex
+					flex-col
+					bg-neutral-50
+					dark:bg-neutral-900
+					rounded-sm
+					p-2
+					shadow-sm
+					shadow-black/30
+					border
+					border-black/30
+					whitespace-pre-wrap
+					overflow-auto
+				`)"
 			>
 				<slot name="popover"/>
 			</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 +132,7 @@ import { twMerge } from "../../utils/twMerge.js"
 
 /** Wrapper around reka-ui's `Popover` component. */
 defineOptions({
-	name: "WPopup",
+	name: "WPopover",
 	inheritAttrs: false
 })
 
@@ -136,9 +141,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 +154,7 @@ const props = withDefaults(defineProps<
 	}
 >(), {
 	showBackdrop: false,
+	showArrow: true,
 	constrainWidthTo: 400,
 	constrainHeightTo: "available",
 	animationDirection: "use-side",

package/src/runtime/components/WPopup/WPopup.stories.ts

@@ -6,42 +6,86 @@ import WPopup from "./WPopup.vue"
 
 import * as components from "../index.js"
 
+type ExtraTestArgs = {
+	_slots: string
+}
 const meta: Meta<typeof WPopup> = {
 	component: WPopup,
-	title: "Components/Popup"
+	title: "Components/Popup",
+	args: {
+		title: "Popup Title",
+		description: "Popup Description"
+	}
 }
 
 export default meta
-type Story = StoryObj<typeof WPopup>
+type Story = StoryObj<typeof WPopup> & { args?: ExtraTestArgs }
 
 export const Primary: Story = {
-	render: args => ({
-		components,
-		setup: () => {
-			const value = ref(false)
-			return { args, value }
-		},
-		template: `
+	render: args => {
+		const extraArgs = args as ExtraTestArgs
+		return {
+			components,
+			setup: () => {
+				const value = ref(false)
+				return { args, value }
+			},
+			template: `
 			<div class="test bg-transparency-squares flex items-center justify-center" style="height:80vh;border:1px solid black;">
-				<WPopup v-model="value" v-bind="args">
+				<WPopup
+					:title="args.title"
+					:description="args.description"
+					v-model="value"
+					v-bind="args"
+				>
+					${extraArgs._slots}
 					<template #button>
 						<WButton>Open Modal Popup</WButton>
 					</template>
-					<template #popup>
+					<template #extra>
 						<div
 							:style="{width: args.width, height: args.height}"
-							class="p-3"
 						>
-							<div>Popup Content</div>
-							<WButton class="mt-4" @click="value = false">Close</WButton>
+							<div>Extra Slot</div>
 						</div>
 					</template>
 				</WPopup>
 			</div>
 		`
-	})
+		}
+	}
 }
 
+export const OtherSlots = {
+	...Primary,
+	args: {
+		_slots: `
+			<template #title>
+				<div>Title Slot</div>
+			</template>
+			<template #description>
+				<div>Description Slot</div>
+			</template>
+			<template #close>
+				<div>Close Slot</div>
+			</template>
+			<template #backdrop>
+				<div>Backdrop Slot</div>
+			</template>
+		`
+	}
+}
+
+export const PopupSlots = {
+	...Primary,
+	args: {
+		_slots: `
+			<template #popup>
+				<div>Popup Slot - Replaces Other Slots except Close (note, you must provide reka's DialogTitle and DialogDescription to avoid it's warnings</div>
+			</template>
+		`
+	}
+}
 export const PopupLarge = {
 	...Primary,
 	args: {

package/src/runtime/components/WPopup/WPopup.vue

@@ -28,7 +28,7 @@
 		<DialogContent
 			v-bind="{ ...contentProps, class: undefined }"
 			:class="twMerge(`
-				popup--content-wrapper
+				popup--content
 				z-100
 				focus:outline-none
 				fixed
@@ -46,15 +46,44 @@
 		>
 			<div
 				:class="twMerge(`
-					popup--content
+					popup--content-inner
 					flex
 					flex-col
 					bg-neutral-100
 					dark:bg-neutral-800
 					rounded-md
+					flex
+					flex-col
+					gap-3
+					p-2
 				`)"
 			>
-				<slot name="popup"/>
+				<slot name="popup">
+					<slot name="title">
+						<DialogTitle
+							v-if="title"
+							class="text-lg font-bold"
+						>
+							{{ title }}
+						</DialogTitle>
+					</slot>
+					<slot name="description">
+						<DialogDescription v-if="description">
+							{{ description }}
+						</DialogDescription>
+					</slot>
+					<slot name="extra"/>
+				</slot>
+				<DialogCloseButton as-child>
+					<slot name="close">
+						<WButton
+							class="justify-self-end"
+							@click="modelValue = false"
+						>
+							Close
+						</WButton>
+					</slot>
+				</DialogCloseButton>
 			</div>
 		</DialogContent>
 	</DialogPortal>
@@ -72,11 +101,14 @@ import type { EmitsToProps, HTMLAttributes } from "vue"
 
 import type { TailwindClassProp } from "../../types/index.js"
 import { twMerge } from "../../utils/twMerge.js"
+import WButton from "../WButton/WButton.vue"
 
 defineOptions({ name: "WPopup", inheritAttrs: false })
 
 withDefaults(defineProps<
 	& {
+		title?: string
+		description?: string
 		backdropClass?: string
 		/** Overrides reka-ui's DialogContentProps */
 		contentProps?: DialogContentProps & EmitsToProps<DialogContentEmits> & Omit<HTMLAttributes, "class"> & TailwindClassProp

package/src/runtime/components/WSimpleInput/WSimpleInput.vue

@@ -98,7 +98,7 @@ defineOptions({
 const props = withDefaults(defineProps<
 	& /** @vue-ignore */ Omit<
 		InputHTMLAttributes,
-		| "class" | "readonly" | "disabled" | "onSubmit" | "onInput"
+		| "class" | "readonly" | "disabled" | "onSubmit" | "onInput" | "type"
 		// https://github.com/vuejs/core/pull/14237
 		| "autocomplete"
 	>
@@ -108,6 +108,7 @@ const props = withDefaults(defineProps<
 		id?: string
 		label?: string
 		valid?: boolean
+		type?: InputHTMLAttributes["type"]
 	}
 >(), {
 	id: "",

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"

package/types/components.d.ts

@@ -11,6 +11,7 @@ declare module 'vue' {
     ILucideCalendarDays: typeof import('~icons/lucide/calendar-days')['default']
     ILucideCalendarRange: typeof import('~icons/lucide/calendar-range')['default']
     ILucideCheck: typeof import('~icons/lucide/check')['default']
+    ILucideChevronDown: typeof import('~icons/lucide/chevron-down')['default']
     ILucideChevronLeft: typeof import('~icons/lucide/chevron-left')['default']
     ILucideChevronRight: typeof import('~icons/lucide/chevron-right')['default']
     ILucideChevronsLeft: typeof import('~icons/lucide/chevrons-left')['default']