@witchcraft/ui 0.2.4 → 0.3.0

package/dist/module.d.mts

@@ -1,4 +1,5 @@
 import * as _nuxt_schema from '@nuxt/schema';
+import Icons from 'unplugin-icons/vite';
 
 declare const knownDirectives: readonly ["vExtractRootEl", "vResizableCols", "vResizeObserver", "vResizableCols"];
 declare module "@nuxt/schema" {
@@ -8,15 +9,21 @@ declare module "@nuxt/schema" {
 }
 interface ModuleOptions {
     /**
-     * Whether to include the vite unplugin-icons plugins (pre-configured with the ui module's defaults.
+     * Whether to include the vite unplugin-icons plugins (pre-configured with the ui module's defaults, i.e. prefix "i").
      *
      * @default true
      */
     includeUnpluginIconsPlugins?: boolean;
+    /**
+     * Pass options to unplugin-icons/nuxt
+     *
+     * The module doesn't define a key for it's options so this is the only way to allow proper merging.
+     */
+    unpluginOptions?: Parameters<typeof Icons>[0];
     directives: (typeof knownDirectives[number])[];
     /**
-        * Which components (without a prefix) to register for auto-importing globally.
-        */
+     * Which components (without a prefix) to register for auto-importing globally.
+     */
     globalComponents: string[];
     /**
      * @default "W"

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "witchcraftUi",
   "configKey": "witchcraftUi",
-  "version": "0.2.4",
+  "version": "0.3.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -1,5 +1,5 @@
 import { indent, crop } from '@alanscodelog/utils';
-import { createResolver, defineNuxtModule, useLogger, addTemplate, addComponent, addImports, addTypeTemplate } from '@nuxt/kit';
+import { createResolver, defineNuxtModule, installModule, useLogger, addTemplate, addComponent, addImports, addTypeTemplate } from '@nuxt/kit';
 import tailwindcss from '@tailwindcss/vite';
 import { addImportsCustom } from '@witchcraft/nuxt-utils/utils/addImportsCustom';
 import { globFiles } from '@witchcraft/nuxt-utils/utils/globFiles';
@@ -13,8 +13,7 @@ import { themeConvertionOpts } from '../dist/runtime/tailwind/themeConvertionOpt
 import { theme } from '../dist/runtime/theme.js';
 
 const dependencies = {
-	"reka-ui": "^2.5.0",
-	"unplugin-icons": "^22.2.0"};
+	"reka-ui": "^2.5.0"};
 const pkg = {
 	dependencies: dependencies};
 
@@ -35,6 +34,7 @@ const module = defineNuxtModule({
   },
   defaults: {
     includeUnpluginIconsPlugins: true,
+    unpluginOptions: unpluginIconViteOptions,
     directives: [...knownDirectives],
     globalComponents: [
       ...componentsInfo.map((_) => _.name.slice("PREFIX".length))
@@ -45,16 +45,20 @@ const module = defineNuxtModule({
     _playgroundWorkaround: false
   },
   moduleDependencies: {
-    "unplugin-icons/nuxt": {
-      version: pkg.dependencies["unplugin-icons"],
-      defaults: unpluginIconViteOptions
-    },
+    // not working, see note for unpluginOptions
+    // "unplugin-icons/nuxt": {
+    // 	version: pkg.dependencies["unplugin-icons"],
+    // 	defaults: unpluginIconViteOptions as any
+    // },
     "reka-ui/nuxt": {
       version: pkg.dependencies["reka-ui"]
     }
   },
   async setup(options, nuxt) {
     const moduleName = "@witchcraft/ui";
+    installModule("unplugin-icons/nuxt", defu(
+      options.unpluginOptions
+    ));
     const logger = useLogger(moduleName, { level: options.debug ? 10 : 0 });
     const filteredComponentsInfo = [];
     for (const component of componentsInfo) {
@@ -121,6 +125,7 @@ const module = defineNuxtModule({
                 IconsResolver({ prefix: "i" })
               ]
             })
+            // this is taken care of by unplugin-icons
             // Icons({
             // 	compiler: "vue3",
             // 	...unpluginIconViteOptions,

package/dist/runtime/components/LibButton/LibButton.vue

@@ -19,7 +19,7 @@
 		text-fg
 		hover:text-accent-700
 		dark:text-bg
-		dark:hover:text-accent-500
+		dark:hover:text-accent-400
 		dark:disabled:text-neutral-500
 		dark:disabled:hover:text-neutral-500
 	`,
@@ -27,7 +27,7 @@
   border && `
 			transition-all
 			bg-neutral-100
-			dark:bg-neutral-900
+			dark:bg-neutral-800
 			shadow-[0_1px_1px_0]
 			shadow-neutral-950/20
 			hover:shadow-[0_1px_3px_0]
@@ -36,7 +36,7 @@
 			dark:hover:border-neutral-800
 			relative
 			after:absolute
-			after:rounded-xs
+			after:rounded-sm
 			after:inset-0
 			after:content
 			after:shadow-[0_1px_0_0_inset]
@@ -53,7 +53,7 @@
 			border-neutral-300
 			disabled:border-neutral-200
 			disabled:bg-neutral-50
-			dark:hover:shadow-accent-950/30
+			dark:hover:shadow-neutral-950/70
 			dark:active:shadow-fg/40
 			dark:active:border-neutral-900
 			dark:border-neutral-900

package/dist/runtime/components/LibDevOnly/LibDevOnly.vue

@@ -24,7 +24,7 @@
 
 <script setup>
 import { computed, inject, ref, useAttrs } from "vue";
-import { showDevOnlyInjectionKey } from "../../composables/useShowDevOnlyKey.js";
+import { showDevOnlyInjectionKey } from "../../injectionKeys.js";
 import { twMerge } from "../../utils/twMerge.js";
 const $attrs = useAttrs();
 const props = defineProps({

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

@@ -23,8 +23,8 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     theme: Theme;
     id: string;
-    useBuiltinTranslations: boolean;
     isClientSide: boolean;
+    useBuiltinTranslations: boolean;
     outline: boolean;
     forceOutline: boolean;
     testWrapperMode: boolean;

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

@@ -23,8 +23,8 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     theme: Theme;
     id: string;
-    useBuiltinTranslations: boolean;
     isClientSide: boolean;
+    useBuiltinTranslations: boolean;
     outline: boolean;
     forceOutline: boolean;
     testWrapperMode: boolean;

package/dist/runtime/composables/index.d.ts

@@ -1,4 +1,3 @@
-export { languageLocaleInjectionKey } from "./useSetupLocale.js.js";
 export { useAccesibilityOutline } from "./useAccesibilityOutline.js.js";
 export { useAriaLabel } from "./useAriaLabel.js.js";
 export { useDarkMode } from "./useDarkMode.js.js";

package/dist/runtime/composables/index.js

@@ -1,4 +1,3 @@
-export { languageLocaleInjectionKey } from "./useSetupLocale.js";
 export { useAccesibilityOutline } from "./useAccesibilityOutline.js";
 export { useAriaLabel } from "./useAriaLabel.js";
 export { useDarkMode } from "./useDarkMode.js";

package/dist/runtime/composables/useDarkMode.d.ts

@@ -1,4 +1,4 @@
-import { type InjectionKey, type Ref } from "vue";
+import { type Ref } from "vue";
 /**
  * @deprecated Use `useSetupDarkMode` instead.
  *
@@ -12,10 +12,6 @@ import { type InjectionKey, type Ref } from "vue";
  */
 export declare const useDarkMode: ({ useLocalStorage, darkModeOrder, isClientSide }?: DarkModeOptions) => DarkModeState & DarkModeCommands;
 export declare const defaultDarkModeOrder: readonly ["system", "dark", "light"];
-export declare const isDarkModeInjectionKey: InjectionKey<Ref<boolean, boolean>>;
-export declare const manualDarkModeInjectionKey: InjectionKey<Ref<boolean | undefined, boolean | undefined>>;
-export declare const darkModeCommandsInjectionKey: InjectionKey<DarkModeCommands>;
-export declare const darkModeStateInjectionKey: InjectionKey<DarkModeState>;
 export type DarkModeOptions = {
     useLocalStorage?: boolean | string;
     darkModeOrder?: readonly ("system" | "dark" | "light")[];

package/dist/runtime/composables/useDarkMode.js

@@ -1,10 +1,7 @@
 import { computed, onMounted, provide, ref, watch } from "vue";
+import { darkModeCommandsInjectionKey, darkModeStateInjectionKey, isDarkModeInjectionKey, manualDarkModeInjectionKey } from "../injectionKeys.js";
 const defaultLocalStorageKey = "prefersColorSchemeDark";
 const defaultOrder = ["system", "dark", "light"];
-const injectionKey = Symbol("isDarkMode");
-const manualInjectionKey = Symbol("manualDarkMode");
-const commandsInjectionKey = Symbol("darkModeCommands");
-const stateInjectionKey = Symbol("darkModeState");
 export const useDarkMode = ({
   useLocalStorage = true,
   darkModeOrder = defaultOrder,
@@ -51,15 +48,15 @@ export const useDarkMode = ({
       }
     }
   });
-  provide(injectionKey, darkMode);
-  provide(manualInjectionKey, manualDarkMode);
-  provide(stateInjectionKey, {
+  provide(isDarkModeInjectionKey, darkMode);
+  provide(manualDarkModeInjectionKey, manualDarkMode);
+  provide(darkModeStateInjectionKey, {
     darkMode,
     darkModeState,
     manualDarkMode,
     systemDarkMode
   });
-  provide(commandsInjectionKey, {
+  provide(darkModeCommandsInjectionKey, {
     setDarkMode,
     cycleDarkMode
   });
@@ -73,7 +70,3 @@ export const useDarkMode = ({
   };
 };
 export const defaultDarkModeOrder = defaultOrder;
-export const isDarkModeInjectionKey = injectionKey;
-export const manualDarkModeInjectionKey = manualInjectionKey;
-export const darkModeCommandsInjectionKey = commandsInjectionKey;
-export const darkModeStateInjectionKey = stateInjectionKey;

package/dist/runtime/composables/useInjectedDarkMode.d.ts

@@ -1,2 +1,2 @@
-import { type DarkModeCommands, type DarkModeState } from "./useDarkMode.js.js";
+import type { DarkModeCommands, DarkModeState } from "./useDarkMode.js.js";
 export declare function useInjectedDarkMode(): DarkModeState & DarkModeCommands;

package/dist/runtime/composables/useInjectedDarkMode.js

@@ -1,5 +1,5 @@
 import { inject } from "vue";
-import { darkModeCommandsInjectionKey, darkModeStateInjectionKey } from "./useDarkMode.js";
+import { darkModeCommandsInjectionKey, darkModeStateInjectionKey } from "../injectionKeys.js";
 export function useInjectedDarkMode() {
   const darkModeState = inject(darkModeStateInjectionKey);
   const darkModeCommands = inject(darkModeCommandsInjectionKey);

package/dist/runtime/composables/useInjectedI18n.js

@@ -1,5 +1,5 @@
 import { inject } from "vue";
-import { i18nInjectionKey } from "./useSetupI18n.js";
+import { i18nInjectionKey } from "../injectionKeys.js";
 export function useInjectedI18n() {
   const val = inject(i18nInjectionKey, void 0);
   if (val === void 0) throw new Error("witchcraft/ui: i18n is not injected. See useSetupI18n.");

package/dist/runtime/composables/useInjectedLocale.d.ts

@@ -1,2 +1,2 @@
-import { type useSetupLocale } from "./useSetupLocale.js.js";
+import type { useSetupLocale } from "./useSetupLocale.js.js";
 export declare function useInjectedLocale(): ReturnType<typeof useSetupLocale>;

package/dist/runtime/composables/useInjectedLocale.js

@@ -1,5 +1,5 @@
 import { inject } from "vue";
-import { languageLocaleInjectionKey, timeLocaleInjectionKey } from "./useSetupLocale.js";
+import { languageLocaleInjectionKey, timeLocaleInjectionKey } from "../injectionKeys.js";
 export function useInjectedLocale() {
   const timeLocale = inject(timeLocaleInjectionKey);
   const languageLocale = inject(languageLocaleInjectionKey);

package/dist/runtime/composables/useSetupI18n.d.ts

@@ -1,4 +1,4 @@
-import { type InjectionKey, type Ref } from "vue";
+import { type Ref } from "vue";
 export type TranslationFunction = (key: string, replacements?: Record<string, any>) => string;
 /**
  * A composable for providing a translation function + messages for the library. Note the Root component already takes care of setting this up with defaults, disable it via it's `useBuiltinTranslations` option.
@@ -18,5 +18,3 @@ export declare function useSetupI18n({ locale, useBuiltinTranslations, useDummyM
     /** A	custom translation function. The default requires the `useBuiltinTranslations` option to be true. */
     translationFunction?: TranslationFunction;
 }): Promise<void>;
-export declare const i18nInjectionKey: InjectionKey<TranslationFunction>;
-export declare const translationMessagesInjectionKey: InjectionKey<Ref<Record<string, any>, Record<string, any>>>;

package/dist/runtime/composables/useSetupI18n.js

@@ -4,8 +4,7 @@ import {
   watch
 } from "vue";
 import { defaultTranslationFunction } from "../helpers/defaultTranslationFunction.js";
-const _i18nInjectionKey = Symbol("witchcraftUiI18n");
-const _translationMessagesInjectionKey = Symbol("witchcraftUiI18nMessages");
+import { i18nInjectionKey, translationMessagesInjectionKey } from "../injectionKeys.js";
 const messagesGlob = import.meta.glob("../assets/locales/*.json");
 const loaded = {};
 const dummyLibraryMessages = new Proxy({}, {
@@ -26,10 +25,10 @@ export async function useSetupI18n({
   useDummyMessageSetWhileLoading = true,
   translationFunction = defaultTranslationFunction
 }) {
-  provide(_i18nInjectionKey, translationFunction);
+  provide(i18nInjectionKey, translationFunction);
   if (useBuiltinTranslations) {
     const messages = ref(useDummyMessageSetWhileLoading ? dummyMessageSet : {});
-    provide(_translationMessagesInjectionKey, messages);
+    provide(translationMessagesInjectionKey, messages);
     async function loadMessageSet(l) {
       const isLoaded = loaded[l];
       if (isLoaded) {
@@ -50,5 +49,3 @@ export async function useSetupI18n({
     });
   }
 }
-export const i18nInjectionKey = _i18nInjectionKey;
-export const translationMessagesInjectionKey = _translationMessagesInjectionKey;

package/dist/runtime/composables/useSetupLocale.d.ts

@@ -1,6 +1,4 @@
-import { type InjectionKey, type Ref } from "vue";
-export declare const languageLocaleInjectionKey: InjectionKey<Ref<string>>;
-export declare const timeLocaleInjectionKey: InjectionKey<Ref<string>>;
+import { type Ref } from "vue";
 export declare function useSetupLocale(): {
     languageLocale: Ref<string>;
     timeLocale: Ref<string>;

package/dist/runtime/composables/useSetupLocale.js

@@ -1,6 +1,5 @@
 import { provide, ref } from "vue";
-export const languageLocaleInjectionKey = Symbol("witchcraftUiLanguageLocale");
-export const timeLocaleInjectionKey = Symbol("witchcraftUiTimeLocale");
+import { languageLocaleInjectionKey, timeLocaleInjectionKey } from "../injectionKeys.js";
 export function useSetupLocale() {
   const languageLocale = ref("en");
   const timeLocale = ref("en-GB");

package/dist/runtime/composables/useShowDevOnlyKey.d.ts

@@ -4,4 +4,3 @@
     * Communicates with the dev only component to show/hide it depending on a keypress (single key, no modifiers, `F1` by default). 	*
     */
 export declare function useShowDevOnlyKey(key?: string): void;
-export declare const showDevOnlyInjectionKey: symbol;

package/dist/runtime/composables/useShowDevOnlyKey.js

@@ -1,9 +1,9 @@
 import { onBeforeUnmount, onMounted, provide, ref } from "vue";
-const injectionKey = Symbol("showDevOnly");
+import { showDevOnlyInjectionKey } from "../injectionKeys.js";
 export function useShowDevOnlyKey(key = "F1") {
   if (!import.meta.dev) return;
   const showDevOnly = ref(false);
-  provide(injectionKey, showDevOnly);
+  provide(showDevOnlyInjectionKey, showDevOnly);
   const listener = (e) => {
     if (e.key === key && !e.ctrlKey && !e.metaKey && !e.altKey) {
       showDevOnly.value = !showDevOnly.value;
@@ -17,4 +17,3 @@ export function useShowDevOnlyKey(key = "F1") {
     document.removeEventListener("keydown", listener);
   });
 }
-export const showDevOnlyInjectionKey = injectionKey;

package/dist/runtime/helpers/defaultTranslationFunction.js

@@ -1,5 +1,5 @@
 import { inject } from "vue";
-import { translationMessagesInjectionKey } from "../composables/useSetupI18n.js";
+import { translationMessagesInjectionKey } from "../injectionKeys.js";
 export function defaultTranslationFunction(key, replacements) {
   const messages = inject(translationMessagesInjectionKey);
   if (messages === void 0) throw new Error("witchcraft/ui: The default translation function requires the useSetupI18n `useBuiltinTranslations` options to be true. Did you set it?");

package/dist/runtime/injectionKeys.d.ts

@@ -0,0 +1,14 @@
+import type { InjectionKey, Ref } from "vue";
+import type { DarkModeCommands, DarkModeState } from "./composables/useDarkMode.js.js";
+import type { TranslationFunction } from "./composables/useSetupI18n.js.js";
+/** @deprecated */
+export declare const isDarkModeInjectionKey: InjectionKey<Ref<boolean>>;
+/** @deprecated */
+export declare const manualDarkModeInjectionKey: InjectionKey<Ref<boolean | undefined>>;
+export declare const darkModeCommandsInjectionKey: InjectionKey<DarkModeCommands>;
+export declare const darkModeStateInjectionKey: InjectionKey<DarkModeState>;
+export declare const languageLocaleInjectionKey: InjectionKey<Ref<string>>;
+export declare const timeLocaleInjectionKey: InjectionKey<Ref<string>>;
+export declare const i18nInjectionKey: InjectionKey<TranslationFunction>;
+export declare const translationMessagesInjectionKey: InjectionKey<Ref<Record<string, any>>>;
+export declare const showDevOnlyInjectionKey: InjectionKey<Ref<boolean>>;

package/dist/runtime/injectionKeys.js

@@ -0,0 +1,9 @@
+export const isDarkModeInjectionKey = Symbol("isDarkMode");
+export const manualDarkModeInjectionKey = Symbol("manualDarkMode");
+export const darkModeCommandsInjectionKey = Symbol("darkModeCommands");
+export const darkModeStateInjectionKey = Symbol("darkModeState");
+export const languageLocaleInjectionKey = Symbol("witchcraftUiLanguageLocale");
+export const timeLocaleInjectionKey = Symbol("witchcraftUiTimeLocale");
+export const i18nInjectionKey = Symbol("witchcraftUiI18n");
+export const translationMessagesInjectionKey = Symbol("witchcraftUiI18nMessages");
+export const showDevOnlyInjectionKey = Symbol("showDevOnly");

package/dist/runtime/main.lib.d.ts

@@ -6,6 +6,7 @@ export * as directives from "./directives/index.js.js";
 export { registerDirectives } from "./vue/registerDirectives.js.js";
 export { registerComponents } from "./vue/registerComponents.js.js";
 export { VueComponentsPlugin } from "./vue/VueComponentsPlugin.js.js";
+export * from "./injectionKeys.js.js";
 import type * as components from "./components/index.js.js";
 type Components = typeof components;
 /**

package/dist/runtime/main.lib.js

@@ -6,3 +6,4 @@ 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";
+export * from "./injectionKeys.js";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@witchcraft/ui",
-	"version": "0.2.4",
+	"version": "0.3.0",
 	"description": "Vue component library.",
 	"type": "module",
 	"main": "./dist/runtime/main.lib.js",

package/src/module.ts

@@ -4,6 +4,7 @@ import {
 	addImports, addTemplate, addTypeTemplate,
 	createResolver,
 	defineNuxtModule,
+	installModule,
 	useLogger
 } from "@nuxt/kit"
 import tailwindcss from "@tailwindcss/vite"
@@ -13,6 +14,7 @@ import { defu } from "defu"
 import { themeAsTailwindCss } from "metamorphosis/tailwind"
 import fs from "node:fs"
 import IconsResolver from "unplugin-icons/resolver"
+import type Icons from "unplugin-icons/vite"
 import ViteComponents from "unplugin-vue-components/vite"
 
 import { unpluginIconViteOptions } from "./runtime/build/unpluginIconViteOptions.js"
@@ -45,16 +47,24 @@ declare module "@nuxt/schema" {
 }
 
 export interface ModuleOptions {
-/**
- * Whether to include the vite unplugin-icons plugins (pre-configured with the ui module's defaults.
- *
- * @default true
- */
+	/**
+	 * Whether to include the vite unplugin-icons plugins (pre-configured with the ui module's defaults, i.e. prefix "i").
+	 *
+	 * @default true
+	 */
 	includeUnpluginIconsPlugins?: boolean
+	/**
+	 * Pass options to unplugin-icons/nuxt
+	 *
+	 * The module doesn't define a key for it's options so this is the only way to allow proper merging.
+	 */
+	// also moduleDependencies + defaults (or even overrides) isn't working, hence the use of the deprecated installModule
+	// I think this is due to how the module is defined (without a key)
+	unpluginOptions?: Parameters<typeof Icons>[0]
 	directives: (typeof knownDirectives[number])[]
 	/**
-		* Which components (without a prefix) to register for auto-importing globally.
-		*/
+	 * Which components (without a prefix) to register for auto-importing globally.
+	 */
 	globalComponents: string[]
 	/**
 	 * @default "W"
@@ -76,6 +86,7 @@ export default defineNuxtModule<ModuleOptions>({
 	},
 	defaults: {
 		includeUnpluginIconsPlugins: true,
+		unpluginOptions: unpluginIconViteOptions,
 		directives: [...knownDirectives],
 		globalComponents: [
 			...componentsInfo.map(_ => _.name.slice("PREFIX".length))
@@ -86,16 +97,21 @@ export default defineNuxtModule<ModuleOptions>({
 		_playgroundWorkaround: false
 	},
 	moduleDependencies: {
-		"unplugin-icons/nuxt": {
-			version: pkg.dependencies["unplugin-icons"],
-			defaults: unpluginIconViteOptions as any
-		},
+		// not working, see note for unpluginOptions
+		// "unplugin-icons/nuxt": {
+		// 	version: pkg.dependencies["unplugin-icons"],
+		// 	defaults: unpluginIconViteOptions as any
+		// },
 		"reka-ui/nuxt": {
 			version: pkg.dependencies["reka-ui"]
 		}
 	},
 	async setup(options, nuxt) {
 		const moduleName = "@witchcraft/ui"
+		// see note for unpluginOptions
+		installModule("unplugin-icons/nuxt", defu(
+			options.unpluginOptions
+		))
 		const logger = useLogger(moduleName, { level: options.debug ? 10 : 0 })
 
 		const filteredComponentsInfo: typeof componentsInfo = []
@@ -173,6 +189,7 @@ export default defineNuxtModule<ModuleOptions>({
 											IconsResolver({ prefix: "i" })
 										]
 									})
+								// this is taken care of by unplugin-icons
 								// Icons({
 								// 	compiler: "vue3",
 								// 	...unpluginIconViteOptions,

package/src/runtime/components/LibButton/LibButton.vue

@@ -18,7 +18,7 @@
 		text-fg
 		hover:text-accent-700
 		dark:text-bg
-		dark:hover:text-accent-500
+		dark:hover:text-accent-400
 		dark:disabled:text-neutral-500
 		dark:disabled:hover:text-neutral-500
 	`,
@@ -26,7 +26,7 @@
 		border && `
 			transition-all
 			bg-neutral-100
-			dark:bg-neutral-900
+			dark:bg-neutral-800
 			shadow-[0_1px_1px_0]
 			shadow-neutral-950/20
 			hover:shadow-[0_1px_3px_0]
@@ -35,7 +35,7 @@
 			dark:hover:border-neutral-800
 			relative
 			after:absolute
-			after:rounded-xs
+			after:rounded-sm
 			after:inset-0
 			after:content
 			after:shadow-[0_1px_0_0_inset]
@@ -52,7 +52,7 @@
 			border-neutral-300
 			disabled:border-neutral-200
 			disabled:bg-neutral-50
-			dark:hover:shadow-accent-950/30
+			dark:hover:shadow-neutral-950/70
 			dark:active:shadow-fg/40
 			dark:active:border-neutral-900
 			dark:border-neutral-900

package/src/runtime/components/LibDevOnly/LibDevOnly.vue

@@ -24,7 +24,7 @@
 <script lang="ts" setup>
 import { computed, inject, ref, useAttrs } from "vue"
 
-import { showDevOnlyInjectionKey } from "../../composables/useShowDevOnlyKey.js"
+import { showDevOnlyInjectionKey } from "../../injectionKeys.js"
 import { twMerge } from "../../utils/twMerge.js"
 
 const $attrs = useAttrs()

package/src/runtime/composables/index.ts

@@ -1,6 +1,5 @@
 /* Autogenerated Index */
 
-export { languageLocaleInjectionKey } from "./useSetupLocale.js"
 export { useAccesibilityOutline } from "./useAccesibilityOutline.js"
 export { useAriaLabel } from "./useAriaLabel.js"
 export { useDarkMode } from "./useDarkMode.js"

package/src/runtime/composables/useDarkMode.ts

@@ -1,13 +1,9 @@
-import { computed, type InjectionKey, onMounted, provide, type Ref, ref, watch } from "vue"
+import { computed, onMounted, provide, type Ref, ref, watch } from "vue"
+
+import { darkModeCommandsInjectionKey, darkModeStateInjectionKey, isDarkModeInjectionKey, manualDarkModeInjectionKey } from "../injectionKeys.js"
 
 const defaultLocalStorageKey = "prefersColorSchemeDark"
 const defaultOrder = ["system", "dark", "light"] as const
-/** @deprecated */
-const injectionKey = Symbol("isDarkMode") as InjectionKey<Ref<boolean>>
-/** @deprecated */
-const manualInjectionKey = Symbol("manualDarkMode") as InjectionKey<Ref<boolean | undefined>>
-const commandsInjectionKey = Symbol("darkModeCommands") as InjectionKey<DarkModeCommands>
-const stateInjectionKey = Symbol("darkModeState") as InjectionKey<DarkModeState>
 
 /**
  * @deprecated Use `useSetupDarkMode` instead.
@@ -82,16 +78,16 @@ export const useDarkMode = ({
 			}
 		}
 	})
-	provide(injectionKey, darkMode)
-	provide(manualInjectionKey, manualDarkMode)
+	provide(isDarkModeInjectionKey, darkMode)
+	provide(manualDarkModeInjectionKey, manualDarkMode)
 
-	provide(stateInjectionKey, {
+	provide(darkModeStateInjectionKey, {
 		darkMode,
 		darkModeState,
 		manualDarkMode,
 		systemDarkMode
 	})
-	provide(commandsInjectionKey, {
+	provide(darkModeCommandsInjectionKey, {
 		setDarkMode,
 		cycleDarkMode
 	})
@@ -107,13 +103,6 @@ export const useDarkMode = ({
 }
 export const defaultDarkModeOrder = defaultOrder
 
-export const isDarkModeInjectionKey = injectionKey
-
-export const manualDarkModeInjectionKey = manualInjectionKey
-
-export const darkModeCommandsInjectionKey = commandsInjectionKey
-
-export const darkModeStateInjectionKey = stateInjectionKey
 
 export type DarkModeOptions = {
 	/* Whether to save the manual dark mode to local storage. Uses the key "prefersColorSchemeDark" by default. You can pass a key instead of true to use that as the key instead. */

package/src/runtime/composables/useInjectedDarkMode.ts

@@ -1,6 +1,8 @@
 import { inject } from "vue"
 
-import { type DarkModeCommands, darkModeCommandsInjectionKey, type DarkModeState, darkModeStateInjectionKey } from "./useDarkMode.js"
+import type { DarkModeCommands, DarkModeState } from "./useDarkMode.js"
+
+import { darkModeCommandsInjectionKey, darkModeStateInjectionKey } from "../injectionKeys.js"
 
 export function useInjectedDarkMode(): DarkModeState & DarkModeCommands {
 	const darkModeState = inject(darkModeStateInjectionKey)

package/src/runtime/composables/useInjectedI18n.ts

@@ -1,7 +1,8 @@
 import { inject } from "vue"
 
 import type { TranslationFunction } from "./useSetupI18n.js"
-import { i18nInjectionKey } from "./useSetupI18n.js"
+
+import { i18nInjectionKey } from "../injectionKeys.js"
 
 export function useInjectedI18n(): TranslationFunction {
 	const val = inject(i18nInjectionKey, undefined)

package/src/runtime/composables/useInjectedLocale.ts

@@ -1,6 +1,8 @@
 import { inject } from "vue"
 
-import { languageLocaleInjectionKey, timeLocaleInjectionKey, type useSetupLocale } from "./useSetupLocale.js"
+import type { useSetupLocale } from "./useSetupLocale.js"
+
+import { languageLocaleInjectionKey, timeLocaleInjectionKey } from "../injectionKeys.js"
 
 export function useInjectedLocale(): ReturnType<typeof useSetupLocale> {
 	const timeLocale = inject(timeLocaleInjectionKey)

package/src/runtime/composables/useSetupI18n.ts

@@ -1,5 +1,4 @@
 import {
-	type InjectionKey,
 	provide,
 	type Ref,
 	ref,
@@ -7,11 +6,10 @@ import {
 } from "vue"
 
 import { defaultTranslationFunction } from "../helpers/defaultTranslationFunction.js"
+import { i18nInjectionKey, translationMessagesInjectionKey } from "../injectionKeys.js"
 
 export type TranslationFunction = (key: string, replacements?: Record<string, any>) => string
 
-const _i18nInjectionKey = Symbol("witchcraftUiI18n") as InjectionKey<TranslationFunction>
-const _translationMessagesInjectionKey = Symbol("witchcraftUiI18nMessages") as InjectionKey<Ref<Record<string, any>>>
 
 const messagesGlob = import.meta.glob("../assets/locales/*.json")
 const loaded: Record<string, any> = {}
@@ -51,10 +49,10 @@ export async function useSetupI18n({
 	/** A	custom translation function. The default requires the `useBuiltinTranslations` option to be true. */
 	translationFunction?: TranslationFunction
 }): Promise<void> {
-	provide(_i18nInjectionKey, translationFunction)
+	provide(i18nInjectionKey, translationFunction)
 	if (useBuiltinTranslations) {
 		const messages = ref(useDummyMessageSetWhileLoading ? dummyMessageSet : {})
-		provide(_translationMessagesInjectionKey, messages)
+		provide(translationMessagesInjectionKey, messages)
 		async function loadMessageSet(l: string): Promise<void> {
 			const isLoaded = loaded[l]
 			if (isLoaded) {
@@ -76,5 +74,3 @@ export async function useSetupI18n({
 	}
 }
 
-export const i18nInjectionKey = _i18nInjectionKey
-export const translationMessagesInjectionKey = _translationMessagesInjectionKey

package/src/runtime/composables/useSetupLocale.ts

@@ -1,7 +1,7 @@
-import { type InjectionKey, provide, type Ref, ref } from "vue"
+import { provide, type Ref, ref } from "vue"
+
+import { languageLocaleInjectionKey, timeLocaleInjectionKey } from "../injectionKeys.js"
 
-export const languageLocaleInjectionKey = Symbol("witchcraftUiLanguageLocale") as InjectionKey<Ref<string>>
-export const timeLocaleInjectionKey = Symbol("witchcraftUiTimeLocale") as InjectionKey<Ref<string>>
 
 export function useSetupLocale(): {
 	languageLocale: Ref<string>

package/src/runtime/composables/useShowDevOnlyKey.ts

@@ -1,6 +1,7 @@
 import { onBeforeUnmount, onMounted, provide, ref } from "vue"
 
-const injectionKey = Symbol("showDevOnly")
+import { showDevOnlyInjectionKey } from "../injectionKeys.js"
+
 /**
 	* For nuxt only.
 	*
@@ -9,7 +10,7 @@ const injectionKey = Symbol("showDevOnly")
 export function useShowDevOnlyKey(key: string = "F1"): void {
 	if (!(import.meta as any).dev) return
 	const showDevOnly = ref(false)
-	provide(injectionKey, showDevOnly)
+	provide(showDevOnlyInjectionKey, showDevOnly)
 
 	const listener = (e: KeyboardEvent): void => {
 		if (e.key === key && !e.ctrlKey && !e.metaKey && !e.altKey) {
@@ -25,4 +26,3 @@ export function useShowDevOnlyKey(key: string = "F1"): void {
 	})
 }
 
-export const showDevOnlyInjectionKey = injectionKey

package/src/runtime/helpers/defaultTranslationFunction.ts

@@ -1,6 +1,7 @@
-import { inject, type Ref } from "vue"
+import { inject } from "vue"
+
+import { translationMessagesInjectionKey } from "../injectionKeys.js"
 
-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`).
@@ -19,7 +20,7 @@ import { translationMessagesInjectionKey } from "../composables/useSetupI18n.js"
  */
 
 export function defaultTranslationFunction(key: string, replacements?: Record<string, any>): string {
-	const messages = inject(translationMessagesInjectionKey) as Ref<Record<string, any>> | undefined
+	const messages = inject(translationMessagesInjectionKey)
 	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}.`)

package/src/runtime/injectionKeys.ts

@@ -0,0 +1,28 @@
+import type { InjectionKey, Ref } from "vue"
+
+import type { DarkModeCommands, DarkModeState } from "./composables/useDarkMode.js"
+import type { TranslationFunction } from "./composables/useSetupI18n.js"
+
+/** @deprecated */
+export const isDarkModeInjectionKey = Symbol("isDarkMode") as InjectionKey<Ref<boolean>>
+
+/** @deprecated */
+export const manualDarkModeInjectionKey = Symbol("manualDarkMode") as InjectionKey<Ref<boolean | undefined>>
+
+export const darkModeCommandsInjectionKey = Symbol("darkModeCommands") as InjectionKey<DarkModeCommands>
+
+export const darkModeStateInjectionKey = Symbol("darkModeState") as InjectionKey<DarkModeState>
+
+
+export const languageLocaleInjectionKey = Symbol("witchcraftUiLanguageLocale") as InjectionKey<Ref<string>>
+
+export const timeLocaleInjectionKey = Symbol("witchcraftUiTimeLocale") as InjectionKey<Ref<string>>
+
+
+export const i18nInjectionKey = Symbol("witchcraftUiI18n") as InjectionKey<TranslationFunction>
+
+export const translationMessagesInjectionKey = Symbol("witchcraftUiI18nMessages") as InjectionKey<Ref<Record<string, any>>>
+
+
+export const showDevOnlyInjectionKey = Symbol("showDevOnly") as InjectionKey<Ref<boolean>>
+

package/src/runtime/main.lib.ts

@@ -6,6 +6,7 @@ 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"
+export * from "./injectionKeys.js"
 
 import type * as components from "./components/index.js"