@witchcraft/ui 0.4.0 → 0.4.2

package/src/runtime/components/{LibDatePicker/LibDatePicker.stories.ts → WDatePicker/WDatePicker.stories.ts}

@@ -9,46 +9,54 @@ import * as components from "../index.js"
 function html(strings: TemplateStringsArray, ...values: any[]): string {
 	return String.raw(strings, ...values)
 }
-const singleMeta: Meta<typeof components.LibDatePicker> = {
-	component: components.LibDatePicker,
+
+type ExtraTestArgs = {
+	_slot?: string
+	_timeZone?: string
+}
+const singleMeta: Meta<typeof components.WDatePicker> = {
+	component: components.WDatePicker,
 	title: "Components/DatePicker",
 	args: {
-		// @ts-expect-error custom prop just for story
-		slot: "",
-		timeZone: getLocalTimeZone()
+		...{
+			_slot: "",
+			_timeZone: getLocalTimeZone()
+		} satisfies ExtraTestArgs as any
 	}
 }
 
 export default singleMeta
-type Story = StoryObj<typeof components.LibDatePicker>
+type Story = StoryObj<typeof components.WDatePicker> & { args?: ExtraTestArgs }
 
 function toUTC(m: Date, timeZone: string) {
 	return toTimeZone(fromDate(m, timeZone), "UTC").toAbsoluteString()
 }
 export const Primary: Story = {
-	render: (args: any) => ({
-		components: {
-			...components
-		},
-		setup: () => {
-			const modelValue = ref(args.modelValue)
-			const timeZone = ref(args.timeZone)
-			const debugUtcDate = computed(() => {
-				const m = modelValue.value
-				const z = timeZone.value
-				return m instanceof Date
-					? toUTC(m, z)
-					: typeof m === "object"
-						? `Start: ${m.start ? toUTC(m.start,	z) : "undefined"}, End: ${m.end ? toUTC(m.end,	z) : "undefined"}`
-						: "undefined"
-			})
-			return { args, getLocalTimeZone, modelValue, timeZone, debugUtcDate }
-		},
-		template: `
+	render: args => {
+		const extraArgs = args as ExtraTestArgs
+		return {
+			components: {
+				...components
+			},
+			setup: () => {
+				const modelValue = ref(args.modelValue)
+				const timeZone = ref(extraArgs._timeZone)
+				const debugUtcDate = computed(() => {
+					const m = modelValue.value
+					const z = timeZone.value!
+					return m instanceof Date
+						? toUTC(m, z)
+						: typeof m === "object"
+							? `Start: ${m.start ? toUTC(m.start,	z) : "undefined"}, End: ${m.end ? toUTC(m.end,	z) : "undefined"}`
+							: "undefined"
+				})
+				return { args, getLocalTimeZone, modelValue, timeZone, debugUtcDate }
+			},
+			template: `
 			<div>Date: {{modelValue ?? "undefined"}}</div>
 			<div>Date UTC: {{debugUtcDate}}</div>
 			<div>Detected timezone (via @internationalized/date): {{getLocalTimeZone()}}</div>
-			<LibTimeZonePicker
+			<WTimeZonePicker
 				v-model="timeZone"
 				label="Override Time Zone"
 				wrapper-class="[&_.suggestions]:max-h-[200px] [&_.suggestions]:overflow-y-auto"
@@ -57,12 +65,13 @@ export const Primary: Story = {
 				This component has no border, added here to see it's size.
 			</div>
 			<div class="border border-neutral-500">
-				<LibDatePicker v-bind="args" v-model="modelValue" :time-zone="timeZone">
-					${args.slot}
-				</LibDatePicker>
+				<WDatePicker v-bind="args" v-model="modelValue" :time-zone="timeZone">
+					${extraArgs._slot}
+				</WDatePicker>
 			</div>
 		`
-	})
+		}
+	}
 }
 
 export const DateRange: Story = {
@@ -76,17 +85,16 @@ export const IconTriggerFirst: Story = {
 	...Primary,
 	args: {
 		...Primary.args,
-		class: "[&_.trigger]:order-first"
+		class: "[&_.date-picker--trigger]:order-first"
 	}
 }
 
 export const BottomSlot: Story = {
 	...Primary,
 	args: {
-		// @ts-expect-error see above
-		slot: html`
+		_slot: html`
 			<template #default="slotProps">
-				<LibButton>Custom content can be added here.</LibButton>
+				<WButton>Custom content can be added here.</WButton>
 				<p class="break-all">
 					Content has access to the internal temporary/suggested date value and can change it (e.g. set it to today).
 				</p>	

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

@@ -2,17 +2,15 @@
 import { getLocalTimeZone } from "@internationalized/date"
 import { computed, useAttrs } from "vue"
 
-import LibRangeDatePicker from "./LibRangeDatePicker.vue"
-import LibSingleDatePicker from "./LibSingleDatePicker.vue"
+import WRangeDatePicker from "./WRangeDatePicker.vue"
+import WSingleDatePicker from "./WSingleDatePicker.vue"
 
 import type { RangeDate, SingleDate } from "../../types/index.js"
-import { getFallbackId } from "../shared/props.js"
 
 const attrs = useAttrs()
 
 withDefaults(defineProps<{
 	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(). */
@@ -23,7 +21,6 @@ withDefaults(defineProps<{
 	fallbackDate: () => new Date(),
 	timeZone: getLocalTimeZone()
 })
-const fallbackId = getFallbackId()
 
 /**
  * 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.
@@ -38,12 +35,11 @@ const isRange = computed(() => date.value !== undefined && !(date.value instance
 
 <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 as any"
 	v-model="date as any"
 >
 	<template #default="slotProps">

package/src/runtime/components/{LibDatePicker/LibRangeDatePicker.vue → WDatePicker/WRangeDatePicker.vue}

@@ -7,16 +7,16 @@ 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 type { RangeDate } from "../../types/index.js"
 import { twMerge } from "../../utils/twMerge.js"
-import Icon from "../Icon/Icon.vue"
+import WIcon from "../WIcon/WIcon.vue"
 
 const attrs = useAttrs()
 
@@ -212,9 +212,9 @@ const locale = useInjectedLocale().timeLocale
 				dark:bg-neutral-800
 			"
 		>
-			<Icon>
-				<i-radix-icons-calendar/>
-			</Icon>
+			<WIcon>
+				<i-lucide-calendar-range/>
+			</WIcon>
 		</DateRangePickerTrigger>
 	</DateRangePickerField>
 
@@ -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
 		"
@@ -265,9 +269,9 @@ const locale = useInjectedLocale().timeLocale
 					"
 					:prev-page="(date: DateValue) => date.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="
@@ -282,9 +286,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"/>
@@ -301,9 +305,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="
@@ -319,9 +323,9 @@ const locale = useInjectedLocale().timeLocale
 					"
 					:next-page="(date: DateValue) => date.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

package/src/runtime/components/{LibDatePicker/LibSingleDatePicker.vue → WDatePicker/WSingleDatePicker.vue}

@@ -5,16 +5,16 @@ 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 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"
-import Icon from "../Icon/Icon.vue"
+import WIcon from "../WIcon/WIcon.vue"
 
 const attrs = useAttrs()
 
@@ -152,9 +152,9 @@ onBeforeUnmount(() => {
 				dark:bg-neutral-800
 			"
 		>
-			<Icon>
-				<i-radix-icons-calendar/>
-			</Icon>
+			<WIcon>
+				<i-lucide-calendar-days/>
+			</WIcon>
 		</DatePickerTrigger>
 	</DatePickerField>
 	<DatePickerContent
@@ -217,9 +217,9 @@ onBeforeUnmount(() => {
 					"
 					:prev-page="(date: DateValue) => date.subtract({ years: 1 })"
 				>
-					<Icon class="scale-150">
-						<i-radix-icons-double-arrow-left/>
-					</Icon>
+					<WIcon class="scale-150">
+						<i-lucide-chevrons-left/>
+					</WIcon>
 				</DatePickerPrev>
 				<DatePickerPrev
 					class="
@@ -234,9 +234,9 @@ onBeforeUnmount(() => {
 						px-1
 					"
 				>
-					<Icon class="scale-150">
-						<i-radix-icons-chevron-left/>
-					</Icon>
+					<WIcon class="scale-150">
+						<i-lucide-chevron-left/>
+					</WIcon>
 				</DatePickerPrev>
 
 				<DatePickerHeading class="min-w-[14ch] text-center"/>
@@ -253,9 +253,9 @@ onBeforeUnmount(() => {
 						px-1
 					"
 				>
-					<Icon class="scale-150">
-						<i-radix-icons-chevron-right/>
-					</Icon>
+					<WIcon class="scale-150">
+						<i-lucide-chevron-right/>
+					</WIcon>
 				</DatePickerNext>
 				<DatePickerNext
 					class="
@@ -271,9 +271,9 @@ onBeforeUnmount(() => {
 					"
 					:next-page="(date: DateValue) => date.add({ years: 1 })"
 				>
-					<Icon class="scale-150">
-						<i-radix-icons-double-arrow-right/>
-					</Icon>
+					<WIcon class="scale-150">
+						<i-lucide-chevrons-right/>
+					</WIcon>
 				</DatePickerNext>
 			</DatePickerHeader>
 			<div

package/src/runtime/components/{LibDatePicker/LibTimeZonePicker.vue → WDatePicker/WTimeZonePicker.vue}

@@ -2,27 +2,20 @@
 import { getLocalTimeZone } from "@internationalized/date"
 
 import { getTimeZoneList } from "../../helpers/getTimeZoneList.js"
-import LibInputDeprecated from "../LibInputDeprecated/LibInputDeprecated.vue"
 
 const timeZone = defineModel<string>({ default: getLocalTimeZone() })
 const label = defineModel<string>("label", { default: "Time Zone" })
 </script>
 
 <template>
-<LibInputDeprecated
+<WCombobox
 	:restrict-to-suggestions="true"
 	:suggestions="getTimeZoneList()"
-	:suggestions-filter="(_, items) => items"
+	:ignore-filter="true"
 	class="w-full"
 	type="text"
+	:placeholder="label"
+	:aria-label="label"
 	v-model="timeZone"
->
-	<template #label>
-		<slot>
-			<span class="text-sm">
-				{{ label }}
-			</span>
-		</slot>
-	</template>
-</LibInputDeprecated>
+/>
 </template>

package/src/runtime/components/{LibDebug/LibDebug.stories.ts → WDebug/WDebug.stories.ts}

@@ -2,12 +2,12 @@
 import { crop } from "@alanscodelog/utils/crop"
 import type { Meta, StoryObj } from "@storybook/vue3"
 
-import LibDebug from "./LibDebug.vue"
+import WDebug from "./WDebug.vue"
 
 import * as components from "../index.js"
 
-const meta: Meta<typeof LibDebug> = {
-	component: LibDebug,
+const meta: Meta<typeof WDebug> = {
+	component: WDebug,
 	title: "Components/Debug",
 	args: {
 		value: { any: ["any", { value: "any" }] }
@@ -15,14 +15,14 @@ const meta: Meta<typeof LibDebug> = {
 }
 
 export default meta
-type Story = StoryObj<typeof LibDebug>
+type Story = StoryObj<typeof WDebug>
 
 export const Primary: Story = {
 	render: args => ({
 		components,
 		setup: () => ({ args }),
 		template: `
-			<lib-debug v-bind="args" />
+			<WDebug v-bind="args" />
 		`
 	})
 }

package/src/runtime/components/{LibDebug/LibDebug.vue → WDebug/WDebug.vue}

@@ -14,20 +14,19 @@
 >
 	<div class="debug--header flex justify-between">
 		<span class="debug--title font-bold">{{ title }}</span>
-		<LibButton
+		<WButton
 			class="debug--copy-button w-min-content"
 			@click="copy()"
 		>
-			<icon><i-fa6-regular-copy/></icon>
-		</LibButton>
+			<WIcon><i-lucide-copy/></WIcon>
+		</WButton>
 	</div>
 	<pre
 		v-if="value"
 		:class="`
 			debug--value
-			[tab-size:${tab}]
-		`
-		"
+		`"
+		:style="`tab-size:${tab}`"
 	>{{ getStringValue(value) }}</pre>
 	<pre v-if="value === undefined"><slot/></pre>
 </div>
@@ -36,10 +35,10 @@
 <script setup lang="ts">
 import { useSlots } from "vue"
 
-import IFa6RegularCopy from "~icons/fa-regular/copy"
+import ILucideCopy from "~icons/lucide/copy"
 
-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 $slots = useSlots()
 
@@ -100,7 +99,7 @@ const copy = (): void => {
  * The value can be undefined, it will just display undefined.
  */
 export default {
-	name: "LibDebug"
+	name: "WDebug"
 	// https://v3.vuejs.org/guide/typescript-support.html#annotating-props
 }
 </script>

package/src/runtime/components/{LibDevOnly/LibDevOnly.vue → WDevOnly/WDevOnly.vue}

@@ -40,10 +40,6 @@ const doShow = computed(() => props.show || injectedShow.value)
 </script>
 
 <script lang="ts">
-export interface Props {
-	show?: boolean
-}
-
 // Not sure why nuxt's types aren't correctly getting detected
 // This should be enough to bypass the type lint error.
 declare module "vue" {

package/src/runtime/components/{LibFileInput/LibFileInput.stories.ts → WFileInput/WFileInput.stories.ts}

@@ -2,12 +2,12 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import { ref } from "vue"
 
-import LibFileInput from "./LibFileInput.vue"
+import WFileInput from "./WFileInput.vue"
 
 import * as components from "../index.js"
 
-const meta: Meta<typeof LibFileInput> = {
-	component: LibFileInput,
+const meta: Meta<typeof WFileInput> = {
+	component: WFileInput,
 	title: "Components/FileInput",
 	args: {
 
@@ -15,20 +15,30 @@ const meta: Meta<typeof LibFileInput> = {
 }
 
 export default meta
-type Story = StoryObj<typeof LibFileInput>
+type Story = StoryObj<typeof WFileInput>
 
 export const SingleFile: Story = {
 	render: args => ({
 		components,
 		setup: () => {
-			function errorHandler(e: any): void {
+			const errors = ref([])
+			function errorHandler(errs: any) {
 				// eslint-disable-next-line no-console
-				console.log(e)
+				console.log(errs)
+				errors.value = errs
 			}
-			return { args, errorHandler }
+			return { args, errorHandler, errors }
 		},
 		template: `
-			<lib-file-input v-bind="{...args}" @errors="errorHandler"></lib-file-input>
+			<WFileInput v-bind="{...args}" @errors="errorHandler"></WFileInput>
+			<div
+				v-if="errors.length > 0"
+				class="border-2 border-red-500 rounded-lg p-2 mt-2 w-full"
+			>
+				<div v-for="err of errors" :key="err">
+					{{err}}
+				</div>
+			</div>
 		`
 	})
 }
@@ -69,8 +79,8 @@ export const ErrorHandling: Story = {
 			}
 		},
 		template: `
-			<lib-debug :title="'Errors'">{{errors}}</lib-debug>
-			<lib-file-input v-bind="{...args}"  @errors="errorHandler"></lib-file-input>
+			<WDebug :title="'Errors'">{{errors}}</WDebug>
+			<WFileInput v-bind="{...args}"  @errors="errorHandler"></WFileInput>
 		`
 	})
 }