@witchcraft/ui 0.0.1

package/dist/runtime/components/LibDarkModeSwitcher/LibDarkModeSwitcher.vue

@@ -0,0 +1,95 @@
+<template>
+<lib-button
+	v-bind="{...$attrs, class:undefined}"
+	:class="!($attrs as any).unstyle && twMerge(`
+			rounded-full
+			after:rounded-full
+		`,
+		($attrs as any)?.class
+	)"
+	:title="`${t('dark-mode-switcher.title')}${t(`dark-mode-switcher.${darkModeState}`)}`"
+	:label="showLabel
+		? t(`dark-mode-switcher.${darkModeState}`)
+		: ''
+	"
+	@click="cycleDarkMode"
+>
+	<template #icon>
+		<icon
+			v-if="darkModeState==='dark'"
+			class="w-[1em] flex items-center"
+		>
+			<i-fa-solid-moon/>
+		</icon>
+		<icon
+			v-else-if="darkModeState==='light'"
+			class="w-[1em]"
+		>
+			<i-ph-sun-bold/>
+		</icon>
+		<icon
+			v-else
+			class="w-[1em]"
+		>
+			<i-fa6-solid-circle-half-stroke/>
+		</icon>
+	</template>
+</lib-button>
+</template>
+<script lang="ts" setup>
+import { type ButtonHTMLAttributes,onMounted,useAttrs, watch } from "vue"
+
+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 type { TailwindClassProp } from "../shared/props.js"
+
+const t = useInjectedI18n()
+
+const emit = defineEmits<{
+	/** Emits whether dark mode should be enabled. */
+	(e: "update:darkMode", value: boolean): void
+	/** Emits the change, but as a state string (dark, light, system) */
+	(e: "update:darkModeState", value: "dark" | "light" | "system"): void
+}>()
+const $attrs = useAttrs()
+
+// eslint-disable-next-line no-use-before-define
+withDefaults(defineProps<Props>(), { })
+
+
+const {
+	darkMode,
+	cycleDarkMode,
+	darkModeState,
+} = useInjectedDarkMode()
+
+watch(darkMode, value => emit("update:darkMode", value))
+watch(darkModeState, value => emit("update:darkModeState", value))
+
+onMounted(() => {
+	emit("update:darkMode", darkMode.value)
+})
+</script>
+<script lang="ts">
+export default {
+	name: "lib-dark-mode-switcher"
+}
+type RealProps = {
+	showLabel?: boolean
+}
+
+interface Props
+	extends
+	/** @vue-ignore */
+	Partial<Omit<ButtonHTMLAttributes,"class" | "color" | "disabled">
+	& TailwindClassProp
+	& {
+		disabled?: boolean
+		unstyle?: boolean
+	}>,
+	RealProps
+{ }
+</script>

package/dist/runtime/components/LibDatePicker/LibDatePicker.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import * as components from "../index.js.js";
+declare const singleMeta: Meta<typeof components.LibDatePicker>;
+export default singleMeta;
+type Story = StoryObj<typeof components.LibDatePicker>;
+export declare const Primary: Story;
+export declare const DateRange: Story;
+export declare const IconTriggerFirst: Story;
+export declare const BottomSlot: Story;
+export declare const DateWithTime: Story;
+export declare const WithDifferentFallbackDate: Story;

package/dist/runtime/components/LibDatePicker/LibDatePicker.stories.js

@@ -0,0 +1,98 @@
+import { CalendarDate, fromDate, getLocalTimeZone, toTimeZone } from "@internationalized/date";
+import { computed, ref } from "vue";
+import { createNoonUtcDate } from "../../helpers/createNoonUtcDate.js";
+import * as components from "../index.js";
+function html(strings, ...values) {
+  return String.raw(strings, ...values);
+}
+const singleMeta = {
+  component: components.LibDatePicker,
+  title: "Components/DatePicker",
+  args: {
+    // @ts-expect-error custom prop just for story
+    slot: "",
+    timeZone: getLocalTimeZone()
+  }
+};
+export default singleMeta;
+function toUTC(m, timeZone) {
+  return toTimeZone(fromDate(m, timeZone), "UTC").toAbsoluteString();
+}
+export const Primary = {
+  render: (args) => ({
+    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: `
+			<div>Date: {{modelValue ?? "undefined"}}</div>
+			<div>Date UTC: {{debugUtcDate}}</div>
+			<div>Detected timezone (via @internationalized/date): {{getLocalTimeZone()}}</div>
+			<LibTimeZonePicker
+				v-model="timeZone"
+				label="Override Time Zone"
+				wrapper-class="[&_.suggestions]:max-h-[200px] [&_.suggestions]:overflow-y-auto"
+			/> 
+			<div>
+				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>
+			</div>
+		`
+  })
+};
+export const DateRange = {
+  ...Primary,
+  args: {
+    modelValue: { start: void 0, end: void 0 }
+  }
+};
+export const IconTriggerFirst = {
+  ...Primary,
+  args: {
+    ...Primary.args,
+    class: "[&_.trigger]:order-first"
+  }
+};
+export const BottomSlot = {
+  ...Primary,
+  args: {
+    // @ts-expect-error see above
+    slot: html`
+			<template #default="slotProps">
+				<LibButton>Custom content can be added here.</LibButton>
+				<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>	
+				<p>Temp value:</p>
+				{{ slotProps.tempValue }} 
+			</template>
+		`
+  }
+};
+export const DateWithTime = {
+  ...Primary,
+  args: {
+    ...Primary.args,
+    showTime: true
+  }
+};
+export const WithDifferentFallbackDate = {
+  ...Primary,
+  args: {
+    ...Primary.args,
+    fallbackDate: createNoonUtcDate(new CalendarDate(2e3, 1, 1)).toDate()
+  }
+};

package/dist/runtime/components/LibDatePicker/LibDatePicker.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { getLocalTimeZone } from "@internationalized/date"
+import { computed, useAttrs } from "vue"
+
+import LibRangeDatePicker from "./LibRangeDatePicker.vue"
+import LibSingleDatePicker from "./LibSingleDatePicker.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(). */
+	timeZone?: string
+}>(), {
+	showTime: false,
+	id: undefined,
+	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.
+ *
+ * In the case of an undefined date, the current date at NOON UTC will be used to avoid the date changing.
+ *
+ * The @internationalized/date library's fromDate function is used internally to convert the date given (should be UTC) to the local time zone. It's converted back via it's toDate function.
+ */
+const date = defineModel<SingleDate | RangeDate>({ required: true })
+const isRange = computed(() => date.value !== undefined && !(date.value instanceof Date))
+
+</script>
+
+<template>
+<LibSingleDatePicker
+	v-if="!isRange"
+	v-bind="attrs"
+	:id="id ?? fallbackId"
+	:use-time="showTime"
+	:time-zone="timeZone"
+	:fallback-date="fallbackDate"
+	v-model="date as SingleDate"
+>
+	<template #default="slotProps">
+		<slot v-bind="slotProps"/>
+	</template>
+</LibSingleDatePicker>
+<LibRangeDatePicker
+	v-else
+	:id="id ?? fallbackId"
+	v-bind="attrs"
+	:use-time="showTime"
+	:time-zone="timeZone"
+	:fallback-date="fallbackDate"
+	v-model="date as RangeDate"
+>
+	<template #default="slotProps">
+		<slot v-bind="slotProps"/>
+	</template>
+</LibRangeDatePicker>
+</template>

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

@@ -0,0 +1,370 @@
+<script setup lang="ts">
+import { type DateValue, getLocalTimeZone } from "@internationalized/date"
+import type { DateRange } from "radix-vue"
+import { DateRangePickerArrow, DateRangePickerCalendar, DateRangePickerCell, DateRangePickerCellTrigger, DateRangePickerContent, DateRangePickerField, DateRangePickerGrid, DateRangePickerGridBody, DateRangePickerGridHead, DateRangePickerGridRow, DateRangePickerHeadCell,DateRangePickerHeader, DateRangePickerHeading, DateRangePickerInput, DateRangePickerNext, DateRangePickerPrev, DateRangePickerRoot, DateRangePickerTrigger } from "radix-vue"
+import { onBeforeUnmount, ref, toRaw, useAttrs, watch } from "vue"
+
+import { convertDateWithFallback, getNow,toEmittableDate } from "./helpers.js"
+
+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"
+const attrs = useAttrs()
+
+const props = withDefaults(defineProps<{
+	useTime?: boolean
+	id: string
+	fallbackDate?: Date
+	timeZone?: string
+	updateInterval?: number
+}>(), {
+	timeZone: getLocalTimeZone(),
+	useTime: false,
+	fallbackDate: _ => getNow({ withTime: _.useTime ?? false }).toDate(_.timeZone ?? getLocalTimeZone()),
+	updateInterval: 10000
+})
+
+const date = defineModel<RangeDate>({ required: true })
+
+
+const tempDate = ref({
+	start: convertDateWithFallback(date.value?.start, props),
+	end: convertDateWithFallback(date.value?.end, props)
+})
+watch(() => props.timeZone, () => {
+	tempDate.value = {
+		start: convertDateWithFallback(date.value?.start, props),
+		end: convertDateWithFallback(date.value?.end, props)
+	}
+})
+
+const interval = setInterval(() => {
+	if (!date.value.start) {
+		// update suggested date if none is set
+		tempDate.value.start = convertDateWithFallback(date.value.start, props)
+	}
+	if (!date.value.end) {
+		// update suggested date if none is set
+		tempDate.value.end = convertDateWithFallback(date.value.end, props)
+	}
+}, props.updateInterval)
+
+onBeforeUnmount(() => {
+	clearInterval(interval)
+})
+
+const locale = useInjectedLocale().timeLocale
+
+watch(tempDate, () => {
+	date.value = {
+		start: tempDate.value.start ? toEmittableDate(toRaw(tempDate.value.start) as any) : undefined,
+		end: tempDate.value.end ? toEmittableDate(toRaw(tempDate.value.end) as any) : undefined
+	}
+})
+</script>
+
+<template>
+<DateRangePickerRoot
+	:id="id"
+	:locale="locale"
+	class="root"
+	v-model="tempDate as DateRange"
+>
+	<DateRangePickerField
+		v-slot="{ segments }"
+		:class="twMerge(`
+			container
+			flex items-center justify-between
+			select-none
+			data-[invalid]:border-red-500
+			metadata-input-border
+			rounded-sm
+		`, (attrs as any).class)"
+	>
+		<div class="segments flex items-center flex-1 overflow-scroll scrollbar-hidden whitespace-nowrap">
+			<div :class="twMerge(`start-segment flex items-center`, date.start === undefined && 'text-neutral-400')">
+				<template
+					v-for="item in segments.start"
+					:key="item.part"
+				>
+					<DateRangePickerInput
+						v-if="item.part === 'literal'"
+						:part="item.part"
+						type="start"
+						class="input-literal"
+					>
+						{{ item.value }}
+					</DateRangePickerInput>
+					<DateRangePickerInput
+						v-else
+						type="start"
+						:part="item.part"
+						class="
+						input
+						focus-outline-hidden
+						border
+						border-transparent
+						group
+					"
+					>
+						<div
+							class="
+							group-focus:z-[2]
+							group-focus:bg-accent-500/50
+							group-focus:rounded-xs
+							px-[2px]
+						"
+						>
+							{{ item.value }}
+						</div>
+					</DateRangePickerInput>
+				</template>
+			</div>
+			<div class="range-separator text-center px-1">
+				–
+			</div>
+			<div :class="twMerge(`end-segment flex items-center`, date.end === undefined && 'text-neutral-400')">
+				<template
+					v-for="item in segments.end"
+					:key="item.part"
+				>
+					<DateRangePickerInput
+						v-if="item.part === 'literal'"
+						:part="item.part"
+						type="end"
+						class="input-literal"
+					>
+						{{ item.value }}
+					</DateRangePickerInput>
+					<DateRangePickerInput
+						v-else
+						type="end"
+						:part="item.part"
+						class="
+						input
+						focus-outline-hidden
+						border
+						border-transparent
+						group
+					"
+					>
+						<div
+							class="
+								group-focus:z-[2]
+								group-focus:bg-accent-500/50
+								group-focus:rounded-xs
+								px-[2px]
+							"
+						>
+							{{ item.value }}
+						</div>
+					</DateRangePickerInput>
+				</template>
+			</div>
+		</div>
+		<DateRangePickerTrigger
+			class="
+				trigger
+				px-1
+				focus-outline
+				rounded-tr-sm
+				rounded-br-sm
+				bg-bg
+				border-l
+				border-neutral-300
+				dark:border-neutral-700
+				dark:bg-neutral-800
+			"
+		>
+			<Icon>
+				<i-radix-icons-calendar/>
+			</Icon>
+		</DateRangePickerTrigger>
+	</DateRangePickerField>
+
+	<!-- @vue-expect-error to exists -->
+	<DateRangePickerContent
+		:side-offset="4"
+		to="#root"
+		class="
+				mx-2
+				rounded-sm
+				bg-bg
+				dark:bg-neutral-800
+				border
+				border-neutral-300
+				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
+				text-fg
+				dark:text-neutral-200
+			"
+	>
+		<DateRangePickerArrow class="fill-neutral-500"/>
+		<DateRangePickerCalendar
+			v-slot="{ weekDays, grid }"
+			class="p-2 flex flex-col"
+		>
+			<DateRangePickerHeader class="flex items-center justify-between">
+				<DateRangePickerPrev
+					class="
+							inline-flex
+							items-center
+							cursor-pointer
+							active:scale-125
+							justify-center
+							rounded-sm
+							outlined
+							px-1
+						"
+					:prev-page="(date: DateValue) => date.subtract({ years: 1 })"
+				>
+					<Icon class="scale-150">
+						<i-radix-icons-double-arrow-left/>
+					</Icon>
+				</DateRangePickerPrev>
+				<DateRangePickerPrev
+					class="
+							inline-flex
+							items-center
+							cursor-pointer
+							active:scale-125
+							justify-center
+							rounded-sm
+							outlined
+							px-1
+						"
+				>
+					<Icon class="scale-150">
+						<i-radix-icons-chevron-left/>
+					</Icon>
+				</DateRangePickerPrev>
+
+				<DateRangePickerHeading class="min-w-[14ch] text-center"/>
+				<DateRangePickerNext
+					class="
+							inline-flex
+							items-center
+							cursor-pointer
+							active:scale-125
+							justify-center
+							rounded-sm
+							outlined
+							px-1
+						"
+				>
+					<Icon class="scale-150">
+						<i-radix-icons-chevron-right/>
+					</Icon>
+				</DateRangePickerNext>
+				<DateRangePickerNext
+					class="
+							inline-flex
+							items-center
+							cursor-pointer
+							active:scale-125
+							justify-center
+							rounded-sm
+							outlined
+							px-1
+						"
+					:next-page="(date: DateValue) => date.add({ years: 1 })"
+				>
+					<Icon class="scale-150">
+						<i-radix-icons-double-arrow-right/>
+					</Icon>
+				</DateRangePickerNext>
+			</DateRangePickerHeader>
+			<div
+				class="
+						flex
+						flex-col
+						pt-4
+					"
+			>
+				<DateRangePickerGrid
+					class="border-collapse select-none"
+					v-for="month in grid"
+					:key="month.value.toString()"
+				>
+					<DateRangePickerGridHead>
+						<DateRangePickerGridRow class="mb-1 flex justify-between">
+							<DateRangePickerHeadCell
+								class="
+										w-6
+										rounded-md
+										text-xs
+										text-accent-500
+									"
+								v-for="day in weekDays"
+								:key="day"
+							>
+								{{ day }}
+							</DateRangePickerHeadCell>
+						</DateRangePickerGridRow>
+					</DateRangePickerGridHead>
+					<DateRangePickerGridBody>
+						<DateRangePickerGridRow
+							class="flex w-full justify-between my-1"
+							v-for="(weekDates, index) in month.rows"
+							:key="`weekDate-${index}`"
+						>
+							<DateRangePickerCell
+								:date="weekDate"
+								v-for="weekDate in weekDates"
+								:key="weekDate.toString()"
+							>
+								<DateRangePickerCellTrigger
+									:day="weekDate"
+									:month="month.value"
+									class="
+											relative
+											flex
+											items-center
+											justify-center
+											whitespace-nowrap
+											rounded-sm
+											border
+											border-transparent
+											bg-transparent
+											text-sm
+											w-6
+											h-6
+											focus:shadow
+											focus-outline
+											hover:border-accent-500
+											data-[selected]:bg-accent-700
+											data-[selected]:shadow
+											data-[disabled]:text-neutral-500
+											data-[selected]:text-white
+											data-[unavailable]:pointer-events-none
+											data-[unavailable]:text-neutral-500
+											data-[unavailable]:line-through
+											before:absolute
+											before:bottom-[1px]
+											before:hidden
+											before:rounded-full
+											before:w-4
+											before:h-[2px]
+											before:bg-white
+											data-[today]:before:block
+											data-[today]:before:bg-accent-500
+											data-[selected]:before:bg-white
+										"
+								/>
+							</DateRangePickerCell>
+						</DateRangePickerGridRow>
+					</DateRangePickerGridBody>
+				</DateRangePickerGrid>
+			</div>
+			<slot v-bind="{tempValue: tempDate}"/>
+			<slot/>
+		</DateRangePickerCalendar>
+	</DateRangePickerContent>
+</DateRangePickerRoot>
+</template>