@witchcraft/ui 0.0.1

package/src/runtime/components/LibColorPicker/LibColorPicker.vue

@@ -0,0 +1,448 @@
+<template>
+<div :id="id ?? fallbackId"
+	:aria-label="t('color-picker.aria')"
+	:class="twMerge(`color-picker
+			[--slider-size:calc(var(--spacing)_*_4)]
+			[--contrast-dark:var(--color-neutral-100)]
+			[--contrast-light:var(--color-neutral-800)]
+			[--fg:rgb(var(--contrast-dark))]
+			[--bg:rgb(var(--contrast-light))]
+			max-w-[300px]
+			flex flex-col items-center justify-center
+			bg-neutral-50
+			dark:bg-neutral-950
+			gap-3
+			p-3
+		`,
+		invertColors && `
+			[--fg:rgb(var(--contrast-light))]
+			[--bg:rgb(var(--contrast-dark))]
+		`,
+		border && `
+			border rounded-sm border-neutral-600
+		`
+	)"
+>
+	<div
+		:class="`picker
+			no-touch-action
+			w-full
+			aspect-square
+			relative
+			flex
+			rounded-sm
+			focus:border-accent-500
+		`"
+		@pointerdown="slider.pointerdown($event, 'picker')"
+		@pointerleave="slider.pointerleave($event)"
+	>
+		<canvas
+			class="size-full shadow-xs shadow-black/50 rounded-sm"
+			ref="pickerEl"
+		/>
+		<div
+			aria-live="assertive"
+			:aria-description="ariaDescription"
+			:class="`
+					handle ${handleClasses}
+					border-[var(--fg)]
+					hover:shadow-black
+					active:shadow-black
+				`"
+			tabindex="0"
+			:style="`
+					left: calc(${localColor.percent.s}% - var(--slider-size)/2);
+					top: calc(${localColor.percent.v}% - var(--slider-size)/2);
+					background: ${localColorStringOpaque};
+				`"
+			@keydown="slider.keydown($event, 'picker')"
+		>
+			<aria :value="`${t('color-picker.aria.saturation')}: ${localColor.percent.s}, ${t('color-picker.aria.value')}: ${localColor.percent.s}`"/>
+		</div>
+	</div>
+	<div
+		:class="`hue-slider ${sliderClasses}`"
+		@pointerdown="slider.pointerdown($event, 'hue')"
+	>
+		<canvas
+			class="size-full shadow-xs shadow-black/50 rounded-sm"
+			ref="hueSliderEl"
+		/>
+		<div
+			role="slider"
+			:aria-valuenow="`${localColor.percent.h}`"
+			:aria-valuemin="0"
+			:aria-valuemax="100"
+			:aria-label="t('color-picker.aria.hue')"
+			:aria-description="ariaDescription"
+			tabindex="0"
+			:class="`handle ${handleClasses} bg-neutral-50`"
+			:style="`left: calc(${localColor.percent.h}% - var(--slider-size)/2)`"
+			@keydown="slider.keydown($event, 'hue')"
+		/>
+	</div>
+	<div
+		v-if="allowAlpha"
+
+		:class="`alpha-slider ${sliderClasses}`"
+		@keydown="slider.keydown($event, 'alpha')"
+		@pointerdown="slider.pointerdown($event, 'alpha')"
+	>
+		<canvas
+			class="size-full shadow-xs shadow-black/50 rounded-sm bg-transparency-squares"
+			ref="alphaSliderEl"
+		/>
+		<div
+			role="slider"
+			:aria-label="t('color-picker.aria.alpha-slider')"
+			:aria-valuenow="`${localColor.percent.h}`"
+			:aria-valuemin="0"
+			:aria-valuemax="100"
+			:aria-description="ariaDescription"
+			tabindex="0"
+			:class="`handle ${handleClasses} bg-neutral-50`"
+			:style="`left: calc(${localColor.percent.a}% - var(--slider-size)/2)`"
+		/>
+	</div>
+	<div class="color-group flex w-full flex-1 gap-2">
+		<div class=" color-wrapper
+				bg-transparency-squares
+				relative
+				aspect-square
+				h-[calc(var(--slider-size)*3)]
+				rounded-full
+				shadow-xs
+			"
+		>
+			<!-- <input class="color-input" :value="localColorString" @input="parseInput"> -->
+			<div class="color
+					size-full
+					rounded-full
+					border-2
+					border-neutral-600
+					dark:border-neutral-300
+				"
+				:style="`background:${localColorString}`"
+			/>
+		</div>
+		<div class="color-controls flex flex-1 items-center gap-2">
+			<slot name="input">
+				<lib-simple-input
+					class="w-full"
+					:aria-label="label"
+					:model-value="localColorString"
+					@input="parseInput"
+				/>
+				<lib-button :aria-label="t('copy')" @click="copy()">
+					<icon><i-fa6-regular-copy/></icon>
+				</lib-button>
+			</slot>
+		</div>
+		<!-- <lib-button @click="emits('update:modelValue', localColor.val)">Save</lib-button> -->
+	</div>
+	<slot name="buttons">
+		<div class="save-cancel-group flex w-full items-center justify-center gap-2">
+			<lib-button @click="save()">{{ t("save") }}</lib-button>
+			<lib-button @click="emits('cancel')">{{ t("cancel") }}</lib-button>
+		</div>
+	</slot>
+</div>
+</template>
+
+<script setup lang="ts">
+/* todo change to colorjsio for less dependencies */
+import { castType } from "@alanscodelog/utils/castType.js"
+import { isArray } from "@alanscodelog/utils/isArray.js"
+import { colord } from "colord"
+import { computed, onMounted, type PropType, reactive, type Ref, ref, type UnwrapRef,watch } from "vue"
+
+import { useInjectedI18n } from "../../composables/useInjectedI18n.js"
+import type { HsvaColor, RgbaColor } from "../../types/index.js"
+import { twMerge } from "../../utils/twMerge.js"
+import aria from "../Aria/Aria.vue"
+import Icon from "../Icon/Icon.vue"
+import LibButton from "../LibButton/LibButton.vue"
+import LibSimpleInput from "../LibSimpleInput/LibSimpleInput.vue"
+import { getFallbackId, type LabelProps , type LinkableByIdProps } from "../shared/props.js"
+
+defineOptions({
+	name: "lib-color-picker",
+})
+
+const t = useInjectedI18n()
+
+const sliderClasses = `
+	slider
+	no-touch-action
+	h-4
+	w-full
+	relative
+	flex
+`
+
+const handleClasses = `
+	h-[var(--slider-size)]
+	w-[var(--slider-size)]
+	shadow-xs
+	shadow-black/50
+	border-2 border-neutral-700
+	rounded-full
+	absolute
+	cursor-pointer
+	outline-hidden
+	focus:border-accent-500
+	active:border-accent-500
+	hover:border-accent-500
+`
+
+
+const ariaDescription = t("color-picker.aria.description")
+
+const $value = defineModel<RgbaColor>({ required: false, default: () => ({ r: 0, g: 0, b: 0 }) })
+
+const fallbackId = getFallbackId()
+const props = withDefaults(defineProps<
+& LabelProps
+& LinkableByIdProps
+& {
+	allowAlpha?: boolean
+	border?: boolean
+	copyTransform?: (val: HsvaColor, stringVal: string) => any
+}>(), {
+	allowAlpha: true,
+	border: true,
+	copyTransform: (_val: HsvaColor, stringVal: string) => stringVal,
+})
+
+
+const emits = defineEmits<{
+	(e: "save", val: RgbaColor): void
+	(e: "cancel"): void
+}>()
+
+const pickerEl = ref<HTMLCanvasElement | null>(null)
+const hueSliderEl = ref<HTMLCanvasElement | null>(null)
+const alphaSliderEl = ref<HTMLCanvasElement | null>(null)
+
+type Config = Record<string, { el: Ref<HTMLCanvasElement>, xKey?: keyof HsvaColor, yKey?: keyof HsvaColor, xSteps?: number, ySteps?: number }>
+const config: Config = {
+	hue: {
+		el: hueSliderEl as Ref<HTMLCanvasElement>,
+		xKey: "h",
+		xSteps: 360,
+	},
+	alpha: {
+		el: alphaSliderEl as Ref<HTMLCanvasElement>,
+		xSteps: 1,
+		xKey: "a",
+	},
+	picker: {
+		el: pickerEl as Ref<HTMLCanvasElement>,
+		xSteps: 100,
+		ySteps: 100,
+		xKey: "s",
+		yKey: "v",
+	},
+}
+const localColor = reactive<Record<"percent" | "val", HsvaColor>>({
+	percent: {
+		h: 0, s: 0, v: 0, a: 0,
+	},
+	val: {
+		h: 0, s: 0, v: 0, a: 0,
+	},
+})
+
+const localColorString = computed(() =>
+	colord(localColor.val).toRgbString(),
+)
+const localColorStringOpaque = computed(() =>
+	colord({ ...localColor.val, a: 1 }).toRgbString(),
+)
+
+
+const copy = (): void => {
+	if (navigator.clipboard) {
+		const text = props.copyTransform?.(localColor.val, localColorString.value)
+
+		navigator.clipboard.writeText(text).catch(() => { })
+	}
+}
+
+const updatePicker = (el: HTMLCanvasElement, hue: number): void => {
+	const ctx = el.getContext("2d")!
+	const { height, width } = el
+	ctx.clearRect(0, 0, width, height)
+
+	const gradient = ctx.createLinearGradient(0, 0, 0, height)
+	gradient.addColorStop(0, "white")
+	gradient.addColorStop(1, "black")
+	const gradientColor = ctx.createLinearGradient(0, 0, width, 0)
+	gradientColor.addColorStop(0, `hsla(${hue} 100% 50% / 0)`)
+	gradientColor.addColorStop(1, `hsla(${hue} 100% 50% /1)`)
+
+
+	ctx.fillStyle = gradient
+	ctx.fillRect(0, 0, width, height)
+	ctx.fillStyle = gradientColor
+	ctx.globalCompositeOperation = "multiply"
+	ctx.fillRect(0, 0, width, height)
+	ctx.globalCompositeOperation = "source-over"
+}
+
+const updateSlider = (el: HTMLCanvasElement, stops: ((i: number) => string) | string[], length: number = 360): void => {
+	const ctx = el.getContext("2d")!
+	const { height, width } = el// .getBoundingClientRect()
+	ctx.clearRect(0, 0, width, height)
+
+	const end = isArray(stops) ? stops.length - 1 : length
+
+	const gradient = ctx.createLinearGradient(0, 0, width, 0)
+
+	for (let i = 0; i < end + 1; i++) {
+		const stop = stops instanceof Function ? stops(i) : stops[i]
+		gradient.addColorStop(i / end, stop)
+	}
+
+	ctx.fillStyle = gradient
+	ctx.fillRect(0, 0, width, height)
+}
+
+
+const getVal = (x: number, width: number, steps: number = 100, accuracy: number = 100, reverse = false): { val: number, percent: number } => {
+	// const stepWidth = width / (steps * accuracy)
+	const percent = (x / width)
+	const unrounded = percent * steps
+
+	const val = Math.round(unrounded * accuracy) / accuracy
+	const percentVal = steps === accuracy ? val : Math.round(percent * 100 * accuracy) / accuracy
+	const res = { val, percent: percentVal }
+	if (reverse) res.val = steps - val
+	return res
+}
+type Types = keyof UnwrapRef<Config>
+const elDragging = ref<Types | "">("")
+let dragging = false
+
+const moveHandle = (e: { clientX: number, clientY: number }, type: string) => {
+	const el = config[type].el.value
+	const { x, y, width, height } = el.getBoundingClientRect()
+
+	const info = config[type]
+	if (info.xKey !== undefined) {
+		let newPosX = e.clientX - x
+		newPosX = newPosX < 0 ? 0 : newPosX > width ? width : newPosX
+		const newX = getVal(newPosX, width, info.xSteps ?? 100)
+
+		localColor.percent[info.xKey] = newX.percent
+		localColor.val[info.xKey] = newX.val
+	}
+
+	if (info.yKey !== undefined) {
+		let newPosY = e.clientY - y
+		newPosY = newPosY < 0 ? 0 : newPosY > height ? height : newPosY
+		const newY = getVal(newPosY, height, info.ySteps ?? 100, 100, true)
+
+		localColor.percent[info.yKey] = newY.percent
+		localColor.val[info.yKey] = newY.val
+	}
+}
+const slider = {
+	keydown: (e: KeyboardEvent, type: Types) => {
+		castType<HTMLElement | undefined>(e.target)
+		if (e.target?.getBoundingClientRect && ["ArrowRight", "ArrowLeft", "ArrowUp", "ArrowDown"].includes(e.key)) {
+			e.preventDefault()
+			const { x, y, width, height } = e.target.getBoundingClientRect()
+			let xDiff = e.key === "ArrowRight" ? 1 : e.key === "ArrowLeft" ? -1 : 0
+			let yDiff = e.key === "ArrowUp" ? -1 : e.key === "ArrowDown" ? 1 : 0
+			if (e.shiftKey) {xDiff *= 10}
+			if (e.shiftKey) {yDiff *= 10}
+			moveHandle({ clientX: x + (width / 2) + xDiff, clientY: y + (height / 2) + yDiff }, type)
+		}
+	},
+	pointerdown: (e: PointerEvent, type: Types) => {
+		if (dragging) return
+		e.preventDefault()
+		elDragging.value = type
+		dragging = true
+		document.addEventListener("pointermove", slider.pointermove)
+		document.addEventListener("pointerup", slider.pointerup)
+	},
+	pointerleave: (e: PointerEvent) => {
+		if (dragging) {
+			e.preventDefault()
+		}
+	},
+	pointermove: (e: PointerEvent) => {
+		if (dragging) {
+			e.preventDefault()
+			requestAnimationFrame(() => {
+				const type = elDragging.value
+				moveHandle(e, type)
+			})
+		}
+	},
+	pointerup: (e: PointerEvent) => {
+		e.preventDefault()
+		elDragging.value = ""
+		dragging = false
+		document.removeEventListener("pointermove", slider.pointermove)
+		document.removeEventListener("pointerup", slider.pointerup)
+	},
+}
+const update = (_: HsvaColor, { updatePosition = true, updateValue = true }: { updatePosition?: boolean, updateValue?: boolean } = {}): void => {
+	if (alphaSliderEl.value) {
+		const hsl = colord(_)
+		const hsl0 = hsl.alpha(0).toHslString()
+		const hsl1 = hsl.alpha(1).toHslString()
+		updateSlider(alphaSliderEl.value, [hsl0, hsl1])
+	}
+	updateSlider(hueSliderEl.value!, i => `hsl(${i} 100% 50%)`)
+	updatePicker(pickerEl.value!, _.h)
+	if (updatePosition) {
+		localColor.percent.h = Math.round((_.h / 360) * 10000) / 100
+		localColor.percent.s = _.s
+		localColor.percent.v = 100 - _.v
+		localColor.percent.a =
+			props.allowAlpha
+			? _.a !== undefined
+				? _.a * 100
+				: 1
+			: 1
+	}
+	if (updateValue) {
+		localColor.val = { ..._, a: props.allowAlpha ? _.a : 1 }
+	}
+}
+
+const parseInput = (e: Event): void => {
+	const val = (e.target as HTMLInputElement)?.value
+	if (val) {
+		const color = colord(val)
+		if (!color.isValid()) return
+		update(color.toHsv())
+	}
+}
+
+onMounted(() => {
+	const color = colord($value.value)
+	update(color.toHsv())
+})
+watch(props, () => {
+	const color = colord($value.value)
+	update(color.toHsv())
+})
+
+watch(localColor, () => {
+	update(localColor.val, { updatePosition: false, updateValue: false })
+})
+
+const save = (): void => {
+	const color = colord(localColor.val).toRgb()
+	update(localColor.val, { updatePosition: false, updateValue: false })
+	$value.value = color
+	emits("save", color)
+}
+
+const invertColors = computed(() => !!(localColor.percent.v < 50 || (localColor.val.a === undefined || localColor.val.a < 0.5)))
+</script>

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

@@ -0,0 +1,51 @@
+// @ts-nocheck remove when copying
+/* eslint-disable @typescript-eslint/naming-convention */
+import type { Meta, StoryObj } from "@storybook/vue3"
+import { ref } from "vue"
+
+import LibDarkModeSwitcher from "./LibDarkModeSwitcher.vue"
+
+// todo, maybe don't do this for perf reasons
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import * as components from "../index.js"
+
+const meta: Meta<typeof LibDarkModeSwitcher> = {
+	component: LibDarkModeSwitcher,
+	title: "Components/DarkModeSwitcher",
+	args: {
+
+	},
+}
+
+export default meta
+type Story = StoryObj<typeof LibDarkModeSwitcher>
+
+
+export const Primary: Story = {
+	render: args => ({
+		components,
+		setup: () => {
+			const darkMode = ref(false)
+			return {
+				args,
+				darkMode
+			}
+		},
+		template: `
+			Value: {{darkMode}}
+			<LibDarkModeSwitcher 
+				@update:darkMode="darkMode = $event"
+				v-bind="{...args}"
+			></LibDarkModeSwitcher>
+			
+		`,
+	}),
+}
+export const WithoutLabel: Story = {
+	...Primary,
+	args: {
+		...Primary.args,
+		autoLabel: false,
+	},
+}
+

package/src/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/src/runtime/components/LibDatePicker/LibDatePicker.stories.ts

@@ -0,0 +1,114 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import { CalendarDate,fromDate, getLocalTimeZone, toTimeZone } from "@internationalized/date"
+import type { Meta, StoryObj } from "@storybook/vue3"
+import { computed,ref } from "vue"
+
+import { createNoonUtcDate } from "../../helpers/createNoonUtcDate.js"
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+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,
+	title: "Components/DatePicker",
+	args: {
+		// @ts-expect-error custom prop just for story
+		slot: "",
+		timeZone: getLocalTimeZone(),
+	}
+}
+
+export default singleMeta
+type Story = StoryObj<typeof components.LibDatePicker>
+
+
+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: `
+			<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: Story = {
+	...Primary,
+	args: {
+		modelValue: { start: undefined, end: undefined },
+	},
+}
+
+export const IconTriggerFirst: Story = {
+	...Primary,
+	args: {
+		...Primary.args,
+		class: "[&_.trigger]:order-first"
+	},
+}
+
+export const BottomSlot: Story = {
+	...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: Story = {
+	...Primary,
+	args: {
+		...Primary.args,
+		showTime: true,
+	}
+}
+export const WithDifferentFallbackDate: Story = {
+	...Primary,
+	args: {
+		...Primary.args,
+		fallbackDate: createNoonUtcDate(new CalendarDate(2000, 1, 1)).toDate()
+	}
+}