@witchcraft/ui 0.0.1

package/src/runtime/helpers/NotificationHandler.ts

@@ -0,0 +1,227 @@
+import type { AnyFunction, MakeRequired } from "@alanscodelog/utils"
+import { castType } from "@alanscodelog/utils/castType.js"
+import { crop } from "@alanscodelog/utils/crop.js"
+import { indent } from "@alanscodelog/utils/indent.js"
+import { isBlank } from "@alanscodelog/utils/isBlank.js"
+import { pretty } from "@alanscodelog/utils/pretty.js"
+import { setReadOnly } from "@alanscodelog/utils/setReadOnly.js"
+
+
+export class NotificationHandler<
+	TRawEntry extends RawNotificationEntry<any, any> = RawNotificationEntry<any, any>,
+	TEntry extends NotificationEntry<TRawEntry> = NotificationEntry<TRawEntry>,
+> {
+	timeout: number = 5000
+
+	debug: boolean = false
+
+	private id: number = 0
+
+	readonly queue: TEntry[] = []
+
+	readonly history: TEntry[] = []
+
+	maxHistory: number = 100
+
+	listeners: NotificationListener<TEntry>[] = []
+
+	stringifier?: NotificationStringifier<TEntry>
+
+	constructor({
+		timeout,
+		stringifier,
+		maxHistory,
+	}: {
+		timeout?: NotificationHandler<TRawEntry>["timeout"]
+		stringifier?: NotificationHandler<TRawEntry>["stringifier"]
+		maxHistory?: NotificationHandler<TRawEntry>["maxHistory"]
+	} = {}) {
+		if (timeout) this.timeout = timeout
+		if (maxHistory) this.maxHistory = maxHistory
+		if (stringifier) this.stringifier = stringifier
+	}
+
+	private _checkEntry(entry: Omit<TEntry, "promise" | "resolve">): void {
+		if (entry.cancellable !== undefined && isBlank(entry.cancellable)) {
+			throw new Error(
+				crop`Cancellable cannot be a blank string:
+					${indent(pretty(entry), 5)}
+				`)
+		}
+		if (!entry.options.includes(entry.default)) {
+			throw new Error(
+				crop`Entry options does not include default option "${entry.default}":
+					${indent(pretty(entry), 5)}
+				`)
+		}
+		if (entry.cancellable) {
+			if (typeof entry.cancellable === "string" && !entry.options.includes(entry.cancellable)) {
+				throw new Error(
+					crop`Entry options does not include cancellable option "${entry.cancellable}":
+						${indent(pretty(entry), 6)}
+					`)
+			}
+		} else {
+			if (entry.options.includes("Cancel")) {
+				throw new Error(
+					crop`You specified that the entry should not be cancellable, but the options include the "Cancel" option:
+						${indent(pretty(entry), 6)}
+					`)
+			}
+		}
+		if (entry.timeout !== undefined && !entry.cancellable) {
+			throw new Error(
+				crop`Cannot timeout notification that is not cancellable:
+					${indent(pretty(entry), 5)}
+					`)
+		}
+		if (entry.timeout !== undefined && entry.requiresAction) {
+			throw new Error(
+				crop`Cannot timeout notification that requires action:
+					${indent(pretty(entry), 5)}
+					`)
+		}
+		const missingDangerousOption = entry.dangerous!.find((option: string) => !entry.options.includes(option))
+		if (entry.dangerous !== undefined && missingDangerousOption) {
+			throw new Error(
+				crop`Dangerous options list contains an unknown option "${missingDangerousOption}":
+					${indent(pretty(entry), 5)}
+				`)
+		}
+	}
+
+	protected _createEntry<TNotifyEntry extends RawNotificationEntry<any, any>>(rawEntry: TNotifyEntry): TEntry {
+		const entry: Partial<NotificationEntry<any>> & Omit<NotificationEntry<any>, "promise" | "resolve"> = {
+			requiresAction: false,
+			options: ["Ok", "Cancel"],
+			default: "Ok",
+			cancellable: rawEntry.cancellable,
+			...rawEntry,
+			dangerous: rawEntry.dangerous ?? [],
+			timeout: rawEntry.timeout === true
+				? this.timeout
+				: rawEntry.timeout !== undefined && rawEntry.timeout !== false
+				? rawEntry.timeout
+				: undefined,
+		} as any as TEntry
+
+
+		if (rawEntry.cancellable === true || (rawEntry.cancellable === undefined && entry.options?.includes("Cancel"))) {
+			entry.cancellable = "Cancel" as any
+		}
+
+		this._checkEntry(entry)
+
+		castType<TEntry>(entry)
+		this.id++
+		entry.id = this.id
+		return entry
+	}
+
+	async notify<TNotifyEntry extends RawNotificationEntry<any, any>>(rawEntry: TNotifyEntry):
+	NotificationPromise<TNotifyEntry["options"][number] extends string
+			? TNotifyEntry["options"][number]
+			: "Ok" | "Cancel"> {
+		const entry = this._createEntry(rawEntry)
+		entry.promise = new Promise(_resolve => {
+			entry.resolve = _resolve
+		}) as NotificationPromise
+
+		if (entry.timeout !== undefined) {
+			setTimeout(() => {
+				entry.resolve(entry.cancellable)
+			}, entry.timeout)
+		}
+		this.queue.push(entry)
+		for (const listener of this.listeners) {
+			listener(entry, "added")
+		}
+
+		return entry.promise.then(res => {
+			entry.resolution = res
+			for (const listener of this.listeners) {
+				listener(entry, "resolved")
+			}
+			this.history.push(entry)
+			if (this.history.length > this.maxHistory) {
+				this.history.splice(0, 1)
+				for (const listener of this.listeners) {
+					listener(entry, "deleted")
+				}
+			}
+			this.queue.splice(this.queue.indexOf(entry), 1)
+			return res
+		}) satisfies NotificationPromise as any
+	}
+
+	static resolveToDefault(notification: NotificationEntry): void {
+		notification.resolve(notification.default)
+	}
+
+	static dismiss(notification: NotificationEntry): void {
+		if (notification.cancellable) {
+			notification.resolve(notification.cancellable)
+		}
+	}
+
+	stringify(notification: NotificationEntry): string {
+		if (this.stringifier) return this.stringifier(notification as any)
+		let str = ""
+		if (notification.title) str += `${notification.title}\n`
+		str += `${notification.message}\n`
+		if (notification.code) str += `code:${notification.code}\n`
+		return str
+	}
+
+	clear(): void {
+		setReadOnly(this, "history", [])
+	}
+
+	addNotificationListener(cb: NotificationListener<TEntry>): void {
+		this.listeners.push(cb)
+	}
+
+	removeNotificationListener(cb: NotificationListener<TEntry>): void {
+		const exists = this.listeners.indexOf(cb)
+		if (exists > -1) {
+			this.listeners.splice(exists, 1)
+		} else {
+			throw new Error(`Listener does not exist: ${cb.toString()}`)
+		}
+	}
+}
+
+export type NotificationPromise<TOption extends string = string> = Promise<TOption>
+
+export type RawNotificationEntry<
+	TOptions extends string[] = ["Ok", "Cancel"],
+	TCancellable extends boolean | TOptions[number] = "Cancel",
+> = {
+	message: string
+	title?: string
+	code?: string
+	options?: TOptions
+	requiresAction?: boolean
+	cancellable?: TCancellable
+	default?: TOptions[number]
+	dangerous?: TOptions[number][]
+	timeout?: number | boolean
+	icon?: string
+}
+
+export type NotificationEntry<
+	TRawEntry extends RawNotificationEntry<any, any> = RawNotificationEntry<any, any>,
+> = Omit<MakeRequired<TRawEntry, "options" | "requiresAction" | "default" | "dangerous">, "cancellable"> & {
+	promise: NotificationPromise
+	resolve: AnyFunction
+	cancellable?: string
+	timeout?: number
+	resolution?: string
+	id: number
+}
+
+export type NotificationListener<TEntry extends NotificationEntry<any>> = (notification: TEntry, type: "added" | "resolved" | "deleted") => void
+
+
+export type NotificationStringifier<T extends NotificationEntry<any>> = (notification: T) => string
+

package/src/runtime/helpers/addValue.ts

@@ -0,0 +1,10 @@
+import { pushIfNotIn } from "@alanscodelog/utils/pushIfNotIn.js"
+
+
+export const addValue = <T>(value: T, values: T[], preventDuplicateValues: boolean): T[] => {
+	if (preventDuplicateValues) {
+		return pushIfNotIn(values, [value])
+	}
+	values.push(value)
+	return values
+}

package/src/runtime/helpers/base64ToImg.ts

@@ -0,0 +1,14 @@
+export const base64ToImg = async (imageSrc: string): Promise<HTMLImageElement> => {
+	const img = new Image()
+
+	const loaded = new Promise((resolve => {
+		img.addEventListener("load", () => {
+			resolve(img)
+		})
+	})) as any as Promise<HTMLImageElement>
+
+	img.src = imageSrc // must be set after
+	await loaded
+	return img
+}
+

package/src/runtime/helpers/copy.ts

@@ -0,0 +1,11 @@
+// todo move to utils
+/* eslint-disable no-console */
+export const copy = (text: string): void => {
+	if (navigator.clipboard) {
+		navigator.clipboard.writeText(text).catch(err => {
+			console.warn(`There was an error copying to the clipboard, please file a bug report.\n${err}`)
+		})
+	} else {
+		console.warn("Could not copy to clipboard, your browser is not supported.")
+	}
+}

package/src/runtime/helpers/createNoonUtcDate.ts

@@ -0,0 +1,21 @@
+import { type CalendarDate, ZonedDateTime } from "@internationalized/date"
+
+/**
+ * Takes the given local DATE (ignores the time), and converts it to a UTC (0 offset) date at noon.
+ *
+ * This should be used to wrap fallback dates for timeless dates, so that the date never changes regardless of the timezone it's converted too.
+ */
+export function createNoonUtcDate(date: CalendarDate): ZonedDateTime {
+	const noon = [12, 0, 0]
+	const timeZoneOffset = 0
+	const d = new ZonedDateTime(
+		date.year,
+		date.month,
+		date.day,
+		"UTC",
+		timeZoneOffset,
+		...noon
+	)
+	return d
+}
+

package/src/runtime/helpers/defaultTranslationFunction.ts

@@ -0,0 +1,33 @@
+import { inject, type Ref } from "vue"
+
+import { translationMessagesInjectionKey } from "../composables/useSetupI18n.js"
+
+/**
+ * A default translation function to use with `useSetupI18n`. Requires at least one set of translation message sets (or a dummy) be loaded (the useSetupI18n function takes care of setting up a temporary dummy if you set `useBuiltinTranslations: true`).
+ *
+ * It can take a simple replacement object as the second argument, it's keys in the form `{key}` will be replace with the given value.
+ *
+ * For example:
+ * ```js
+ * const messages = {
+ * 	"some-message": "This is a {key}",
+ * }
+ *
+ * t("some-message", { key: "message" })
+ * ```
+ * Would return "This is a message".
+ */
+
+export function defaultTranslationFunction(key: string, replacements?: Record<string, any>): string {
+	const messages = inject(translationMessagesInjectionKey) as Ref<Record<string, any>> | undefined
+	if (messages === undefined) throw new Error("witchcraft/ui: The default translation function requires the useSetupI18n `useBuiltinTranslations` options to be true. Did you set it?")
+	let value = (messages.value)["witchcraft-ui"][key]
+	if (value === undefined) throw new Error(`No translation for key ${key}.`)
+	if (replacements !== undefined) {
+		for (const [k, val] of Object.entries(replacements)) {
+			value = value.replaceAll(`{${k}}`, val)
+		}
+	}
+	return value
+}
+

package/src/runtime/helpers/getTimeZoneList.ts

@@ -0,0 +1,4 @@
+export function getTimeZoneList(): string[] {
+	return Intl.supportedValuesOf("timeZone")
+}
+

package/src/runtime/helpers/hasModifiers.ts

@@ -0,0 +1 @@
+export const hasModifiers = (e: KeyboardEvent): boolean => e.ctrlKey || e.altKey || e.shiftKey || e.metaKey

package/src/runtime/helpers/index.ts

@@ -0,0 +1,10 @@
+/* Autogenerated Index */
+
+export { addValue } from "./addValue.js"
+export { base64ToImg } from "./base64ToImg.js"
+export { copy } from "./copy.js"
+export { createRecorderHandler } from "./storybook.js"
+export { hasModifiers } from "./hasModifiers.js"
+export { NotificationHandler } from "./NotificationHandler.js"
+export { readFile } from "./readFile.js"
+export { ResizeObserverWrapper } from "./resizeObserverWrapper.js"

package/src/runtime/helpers/readFile.ts

@@ -0,0 +1,22 @@
+// todo move to utils
+export const readFile = async <TType extends "DataUrl" | "ArrayBuffer" | "BinaryString" | "text" = "DataUrl">(
+	file?: File | Blob,
+	type: TType = "DataUrl" as TType
+):
+Promise<
+	TType extends "ArrayBuffer"
+	? ArrayBuffer
+	: string
+> => new Promise((resolve, reject) => {
+	const reader = new FileReader()
+	reader.addEventListener("load", () => {
+		resolve(reader.result as any)
+	}, false)
+	reader.addEventListener("error", () => {
+		reject(new Error(reader.result as any))
+	}, false)
+	if (type === "DataUrl") reader.readAsDataURL(file as Blob)
+	if (type === "ArrayBuffer") reader.readAsArrayBuffer(file as Blob)
+	if (type === "BinaryString") reader.readAsBinaryString(file as Blob)
+	if (type === "text") reader.readAsText(file as Blob)
+})

package/src/runtime/helpers/resizeObserverWrapper.ts

@@ -0,0 +1,45 @@
+import type { ResizeCallback } from "../types/index.js"
+
+
+export class ResizeObserverWrapper {
+	observers: WeakMap<Element, Set<ResizeCallback>> = new WeakMap()
+
+	observer: ResizeObserver
+
+	constructor() {
+		this.observers = new WeakMap()
+		this.observer = new ResizeObserver(elements => {
+			for (const element of elements) {
+				const { target, contentRect } = element
+				const callbacks = this.observers.get(target)
+
+				if (callbacks) {
+					for (const cb of callbacks) {
+						cb(contentRect, target)
+					}
+				}
+			}
+		})
+	}
+
+	observe(element: Element, callback: ResizeCallback): void {
+		const entry = this.observers.get(element)
+		if (!entry) {
+			this.observers.set(element, new Set())
+		}
+		this.observer.observe(element)
+		const callbacks = this.observers.get(element)!
+		callbacks.add(callback)
+	}
+
+	unobserve(element: Element, callback: ResizeCallback): void {
+		const entry = this.observers.get(element)
+		if (!entry) return
+		const callbacks = this.observers.get(element)!
+		callbacks.delete(callback)
+		if (callbacks.size === 0) {
+			this.observer.unobserve(element)
+			this.observers.delete(element)
+		}
+	}
+}

package/src/runtime/helpers/storybook.ts

@@ -0,0 +1,52 @@
+import type { Ref } from "vue"
+
+import { hasModifiers } from "./hasModifiers.js"
+
+
+export const createRecorderHandler = (
+	recordingValue: Ref<string>,
+	recording: Ref<boolean>,
+	modelValue: Ref<string>,
+	recordingEl: Ref<null | HTMLElement>
+): { keydown(e: KeyboardEvent): void, mousedown(e: MouseEvent): void, wheel(e: WheelEvent): void } => ({
+	keydown(e: KeyboardEvent) {
+		e.preventDefault()
+		if (!hasModifiers(e) && e.key === "Escape") {
+			recordingValue.value = modelValue.value
+			recording.value = false
+			return
+		}
+		if (!hasModifiers(e) && e.key === "Enter") {
+			recording.value = false
+			return
+		}
+		recordingValue.value += ` ${e.key}`
+	},
+	mousedown(e: MouseEvent) {
+		const target = (e.target as any)
+		const el = recordingEl.value
+		if (target === el || el?.contains(target)) {
+			return
+		}
+		recordingValue.value += ` ${e.button}`
+		e.preventDefault()
+	},
+	wheel(e: WheelEvent) {
+		recordingValue.value += ` ${e.deltaY > 0 ? "↓" : "↑"}`
+		e.preventDefault()
+	},
+})
+
+export const createRecorderWatchEffect = (recordingValue: Ref<string>, recording: Ref<boolean>, modelValue: Ref<string>, values?: Ref<string[]>) => () => {
+	if (!recording.value) {
+		if (recordingValue.value) {
+			if (values?.value) {
+				values.value.push(recordingValue.value)
+				modelValue.value = ""
+			} else {
+				modelValue.value = recordingValue.value
+			}
+		}
+		recordingValue.value = ""
+	}
+}

package/src/runtime/main.lib.ts

@@ -0,0 +1,31 @@
+export * from "./types/index.js"
+export * as components from "./components/index.js"
+export * as helpers from "./helpers/index.js"
+export * as composables from "./composables/index.js"
+export * as directives from "./directives/index.js"
+export { registerDirectives } from "./vue/registerDirectives.js"
+export { registerComponents } from "./vue/registerComponents.js"
+export { VueComponentsPlugin } from "./vue/VueComponentsPlugin.js"
+
+import type * as components from "./components/index.js"
+
+
+type Components = typeof components
+
+/**
+ * To get global typings, in a global declaration file (e.g. global.d.ts) do:
+ *
+ * ```ts
+ * import { GlobalComponentTypes } from "@witchcraft/ui"
+ *
+ * declare module "@vue/runtime-core" {
+ * 	export interface GlobalComponents extends GlobalComponentTypes { }
+ * }
+ * export {}
+ * ```
+ * To be able to pass extra attributes you will have to have a global declaration file like the one the library has ({@link ./global.d.ts}), see https://github.com/vuejs/language-tools/issues/1077#issuecomment-1145960878
+ */
+export type GlobalComponentTypes = {
+	[key in keyof Components]: Components[key]
+}
+

package/src/runtime/nuxt/plugins/vue-plugin.ts

@@ -0,0 +1,19 @@
+import { isArray } from "@alanscodelog/utils/isArray.js"
+
+import { defineNuxtPlugin, useRuntimeConfig } from "#imports"
+
+import { registerDirectives } from "../../vue/registerDirectives.js"
+
+
+export default defineNuxtPlugin({
+	name: "components-plugin",
+	async setup(nuxtApp): Promise<void> {
+		const config = useRuntimeConfig().public.witchcraftUi
+		const app = nuxtApp.vueApp
+		const directives = (isArray(config?.directives)
+		? (await Promise.all(config.directives.map(async (name: string) => (import(`../../directives/${name}.ts`))))).map((_: any) => Object.values(_)[0])
+		// @ts-expect-error ts filetype needed for nuxt
+		: await import(`../../directives/index.ts`))
+		registerDirectives(app, Object.values(directives))
+	},
+})

package/src/runtime/tailwind/index.ts

@@ -0,0 +1,3 @@
+/* Autogenerated Index */
+
+export { themeConvertionOpts } from "./themeConvertionOpts.js"

package/src/runtime/tailwind/themeConvertionOpts.ts

@@ -0,0 +1,15 @@
+import { type themeAsTailwindCss } from "metamorphosis/tailwind.js"
+
+
+export const themeConvertionOpts: Parameters<typeof themeAsTailwindCss>[1] = {
+	topLevel: ["number-spacing"],
+	twTypeMap: { color: "colors" },
+	// note, not available yet
+	defaultsMap: {
+		"color-neutral": "50",
+		"color-warning": "500",
+		"color-ok": "500",
+		"color-error": "500",
+		"color-accent": "500",
+	},
+}

package/src/runtime/theme.ts

@@ -0,0 +1,5 @@
+import { baseTheme } from "metamorphosis/BaseTheme.js"
+import type { Theme } from "metamorphosis/Theme.js"
+
+
+export const theme = baseTheme as Theme

package/src/runtime/types/index.ts

@@ -0,0 +1,116 @@
+import type { ErrorW } from "@alanscodelog/utils"
+import { type Ref } from "vue"
+
+export type ResizableOptions = {
+	/**
+	 * Defaults to true.
+	 *
+	 * ### true
+	 * The directive will shrink/expand the columns when the table is resized and will use percentage widths on the table cells. This disables resizing of the last column (from the right handle).
+	 *
+	 * Additionally because of the way `table-layout:fixed` works, a min-width cannot be set on the elements via css, so instead, if the table shrinks past `opts.margin * col #`, `min-width` is set on the table until it's resized larger.
+	 *
+	 * Note that by definition, the columns are not resizable when this happens.
+	 *
+	 * ### false
+	 *
+	 * The table can be resized past it's normal width and uses pixel widths on the table cells. You might want to set `overscroll-x: scroll` on a parent wrapping element.
+	 *
+	 * This will set the table width to `min-content`, else it doesn't work. Note that it does this after the initial reading/setting of sizes so you can, for example, layout the table with `width: 100%`.
+	 */
+	fitWidth: boolean
+	/**
+	 * The minimum width a column can have.
+	 *
+	 * Can be a number, or "dynamic". When dynamic, the directive attempts to get the width of `.grip` and multiplies it times 3.
+	 */
+	margin: "dynamic" | number
+	/**
+	 * Whether resizing is enabled.
+	 *
+	 * Can be turned off and all listeners, grips, etc, will be removed.
+	 *
+	 * Note that element styles set are not removed.
+	 */
+	enabled: boolean
+	/** The number of columns. It will be assumed the first colCount elements are the initial widths of the table columns. */
+	colCount: number
+	/**
+	 * A ref that gets filled in with the element width string values by the directive.
+	 *
+	 * It can then be used as needed by the component.
+	 */
+	widths: Ref<string[]>
+	/** The selector to use for the cells. "tr > td" by default. */
+	selector: string
+}
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export type TableColConfig<T = {}> = Record<keyof T, { name?: string, resizable?: boolean }>
+
+export type ResizeCallback = (_rect: DOMRectReadOnly, el: Element) => void
+
+export type FileInputError = ErrorW<{ file: File, isValidMimeType: boolean, isValidExtension: boolean }>
+
+export type HsvaColor = { h: number, s: number, v: number, a?: number }
+export type RgbaColor = { r: number, g: number, b: number, a?: number }
+
+export type ScrollNearContainerEdgesOptions = {
+	containerEl: Ref< HTMLElement | null>
+	/** Margin inside contianer that allows scrolling. 10 by default. */
+	scrollMargin?: number
+	/** Margin around container that still allows scrolling. 0 by defualt. */
+	outerScrollMargin?: number
+	/**
+		* Controls the scrolling speed.
+		*
+		*  Scroll happens faster the nearer to the outer edge the cursor.
+		*
+		* This is calculated as a percent (0 near the inner edge, and 1 near the outer edge), which is then multiplied by this multiplier, since moving by less than 1 pixel is quite slow. The default is 4.
+		*/
+	fastPixelMultiplier?: number
+	/** @deprecated Use fastPixelMultiplier instead. */
+	fastPixelAmount?: number
+	useTimer?: boolean
+	timerInterval?: number
+}
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export type SimpleDOMRect = Omit<DOMRect, "toJSON">
+ 
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export interface IPopupReference { getBoundingClientRect: () => SimpleDOMRect }
+export type PopupPosition = { x: number, y: number, maxWidth?: number, maxHeight?: number }
+export type PopupSpaceInfo = {
+	left: number
+	right: number
+	leftLeft: number
+	rightRight: number
+	leftFromCenter: number
+	rightFromCenter: number
+	topFromCenter: number
+	bottomFromCenter: number
+	top: number
+	bottom: number
+}
+export type PopupPositioner = (
+	/** Reference is only undefined, if you did not specify a button element or use the exposed setReference. The function is still called, because there are other ways you might want to still position the popup (e.g. center-screen or some similar variation). */
+	reference: SimpleDOMRect | undefined,
+	popup: SimpleDOMRect | DOMRect,
+	bg: SimpleDOMRect | DOMRect,
+	space: PopupSpaceInfo
+) => number
+
+export type PopupPositionModifier = (
+	pos: PopupPosition,
+/** This will only be called with the reference element as undefined when one of the preferred positions is center-screen or it's a function. */
+	reference: SimpleDOMRect | undefined,
+	popup: SimpleDOMRect | DOMRect,
+	bg: SimpleDOMRect | DOMRect,
+	space: PopupSpaceInfo
+) => PopupPosition
+
+export type SingleDate = Date | undefined
+
+export type RangeDate = {
+	start?: SingleDate
+	end?: SingleDate
+}

package/src/runtime/utils/twMerge.ts

@@ -0,0 +1,13 @@
+import { extendTailwindMerge } from "tailwind-merge"
+
+const _twMergeExtend = {
+	extend: {
+		classGroups: {
+			"focus-outline": [{ "focus-outline": ["", "no-offset", "none"]}],
+		},
+	}
+} satisfies Parameters<typeof extendTailwindMerge>[0]
+
+export const twMerge = extendTailwindMerge<"focus-outline">(_twMergeExtend)
+
+export const twMergeExtend = _twMergeExtend