@witchcraft/ui 0.4.0 → 0.4.1

package/dist/runtime/helpers/NotificationHandler.d.ts

@@ -1,5 +1,5 @@
 import type { AnyFunction, MakeRequired } from "@alanscodelog/utils";
-import { type Reactive } from "vue";
+import { type Component, type Reactive } from "vue";
 export declare class NotificationHandler<TRawEntry extends RawNotificationEntry<any, any> = RawNotificationEntry<any, any>, TEntry extends NotificationEntry<TRawEntry> = NotificationEntry<TRawEntry>> {
     timeout: number;
     debug: boolean;
@@ -26,21 +26,46 @@ export declare class NotificationHandler<TRawEntry extends RawNotificationEntry<
 }
 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;
     /** @default ["Ok", "Cancel"] */
     options?: TOptions;
     /** @default false */
     requiresAction?: boolean;
+    /**
+     *  If true or a string (the cancel option) ensures the option exists and that is the "default" cancel action when a notification is dismissed in some manner that is not clicking one of the options (escaped, background click, etc.).
+     *
+     * This also enables cancelling via those secondary methods, otherwise the notification won't allow itself to be dismissed.
+     *
+     * @default undefined / false
+     */
     cancellable?: TCancellable;
     /** @default "Ok" */
     default?: TOptions[number];
     /** @default [] */
     dangerous?: TOptions[number][];
-    /** @default false if cancellable, otherwise the default timeout */
+    /**
+     * Overrides the default timeout, can be set to true to just enable it. An entry must be cancellable to have a timeout.
+     *
+     * @default global timeout / false if cancellable is false
+     */
     timeout?: number | boolean;
     icon?: string;
+    message: string;
+    component?: string | Component;
+    /** Props for the custom component. By default the component is passed the message, the messageClasses, and the full notification. Both will be overriden if you set them on componentProps. */
+    componentProps?: Record<string, any> & {
+        notification: NotificationEntry;
+        message: string;
+        messageClasses: string;
+    };
+    /**
+     * Attributes for the notification component itself. They are bound to the root of the element and the class property is merged with twMerge.
+     *
+     * The most likely use is needing to adjust the width of fullscreen notifications, but fullscreen notifications have two widths (one for big screens and one for small ones (sm). You will usually want to do something like `{notificationProps: {class: 'sm:max-w-[90dvw]'}}` to change only the large one.
+     *
+     */
+    notificationAttrs?: Record<string, any>;
 };
 export type NotificationEntry<TRawEntry extends RawNotificationEntry<any, any> = RawNotificationEntry<any, any>> = Omit<MakeRequired<TRawEntry, "options" | "requiresAction" | "default" | "dangerous">, "cancellable"> & {
     promise: NotificationPromise;

package/dist/runtime/helpers/NotificationHandler.js

@@ -4,7 +4,7 @@ import { indent } from "@alanscodelog/utils/indent";
 import { isBlank } from "@alanscodelog/utils/isBlank";
 import { pretty } from "@alanscodelog/utils/pretty";
 import { setReadOnly } from "@alanscodelog/utils/setReadOnly";
-import { reactive } from "vue";
+import { markRaw, reactive } from "vue";
 export class NotificationHandler {
   timeout = 5e3;
   debug = false;
@@ -57,13 +57,6 @@ export class NotificationHandler {
         );
       }
     }
-    if (entry.timeout !== void 0 && !entry.cancellable) {
-      throw new Error(
-        crop`Cannot timeout notification that is not cancellable:
-					${indent(pretty(entry), 5)}
-					`
-      );
-    }
     if (entry.timeout !== void 0 && entry.requiresAction) {
       throw new Error(
         crop`Cannot timeout notification that requires action:
@@ -85,8 +78,8 @@ export class NotificationHandler {
       requiresAction: false,
       options: ["Ok", "Cancel"],
       default: "Ok",
-      cancellable: rawEntry.cancellable,
       ...rawEntry,
+      component: rawEntry.component && typeof rawEntry.component !== "string" ? markRaw(rawEntry.component) : void 0,
       dangerous: rawEntry.dangerous ?? [],
       timeout: rawEntry.timeout === true ? this.timeout : rawEntry.timeout !== void 0 && rawEntry.timeout !== false ? rawEntry.timeout : void 0
     };
@@ -152,7 +145,11 @@ export class NotificationHandler {
     const remaining = notification.timeout - notification._timer.elapsedBeforePause;
     clearTimeout(notification._timer.id);
     notification._timer.id = setTimeout(() => {
-      notification.resolve(notification.cancellable);
+      if (notification.cancellable) {
+        notification.resolve(notification.cancellable);
+      } else {
+        notification.resolve(notification.default);
+      }
     }, remaining);
   }
   static resolveToDefault(notification) {

package/dist/runtime/injectionKeys.d.ts

@@ -1,10 +1,6 @@
 import type { InjectionKey, Ref } from "vue";
-import type { DarkModeCommands, DarkModeState } from "./composables/useDarkMode.js";
 import type { TranslationFunction } from "./composables/useSetupI18n.js";
-/** @deprecated */
-export declare const isDarkModeInjectionKey: InjectionKey<Ref<boolean>>;
-/** @deprecated */
-export declare const manualDarkModeInjectionKey: InjectionKey<Ref<boolean | undefined>>;
+import type { DarkModeCommands, DarkModeState } from "./types/index.js";
 export declare const darkModeCommandsInjectionKey: InjectionKey<DarkModeCommands>;
 export declare const darkModeStateInjectionKey: InjectionKey<DarkModeState>;
 export declare const languageLocaleInjectionKey: InjectionKey<Ref<string>>;

package/dist/runtime/injectionKeys.js

@@ -1,5 +1,3 @@
-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");

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

@@ -2,9 +2,7 @@ import type { ErrorW } from "@alanscodelog/utils";
 import type { Ref } from "vue";
 export type ResizableOptions = {
     /**
-     * Defaults to true.
-     *
-     * ### true
+     * ### true (default)
      * 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.
@@ -16,6 +14,8 @@ export type ResizableOptions = {
      * 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%`.
+     *
+     * @default true
      */
     fitWidth: boolean;
     /**
@@ -40,8 +40,12 @@ export type ResizableOptions = {
      * It can then be used as needed by the component.
      */
     widths: Ref<string[]>;
-    /** The selector to use for the cells. "tr > td" by default. */
+    /** The selector to use for the header cells. "tr > th" by default. */
     selector: string;
+    /** Is called just after the `resizable-cols-setup` class is added. Can be useful for controlling the styling of wrappers or doing additional things post-setup. The default table element uses it to set the class on the wrapper also. */
+    onSetup?: (el: Element) => void;
+    /** Is called on teardown (after the `resizable-cols-setup` class is removed). */
+    onTeardown?: (el: Element) => void;
 };
 export type TableColConfig<T = {}> = Record<keyof T, {
     name?: string;
@@ -91,35 +95,97 @@ export type ScrollNearContainerEdgesOptions = {
     timerInterval?: number;
 };
 export type SimpleDOMRect = Omit<DOMRect, "toJSON">;
-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;
 };
+export type CustomNotificationComponentProps = {
+    message: string;
+    messageClasses?: string;
+};
+export type BaseInteractiveProps = {
+    /** Default is false. */
+    disabled?: boolean;
+    /** Default is false. */
+    readonly?: boolean;
+    /** Default is true. */
+    border?: boolean;
+    /** Removes styles from the component. Default is false. */
+    unstyle?: boolean;
+};
+export type TailwindClassProp = {
+    /** Tailwind classes. */
+    class?: string | false;
+};
+export declare const defaultDarkModeOrder: readonly ["system", "dark", "light"];
+export type DarkModeOptions = {
+    useLocalStorage?: boolean | string;
+    darkModeOrder?: readonly ("system" | "dark" | "light")[];
+    /** True by default, should be passed import.meta.client if using nuxt, or false when running server side. */
+    isClientSide?: boolean;
+    /**
+     * Whether to use the view transition to animate the dark mode switch (you just need to add the css).
+     *
+     * Note that the transitition is NOT triggered if visually the mode does not change (e.g. system mode is dark and the user switches from system to dark, visually nothing changes so transitioning is skipped).
+     *
+     * There is an example in storybook. But basically:
+     *
+     * ```css
+     *
+     * #root { // the dark mode switcher works on the WRoot component not the html root
+     *		view-transition-name: wroot;
+     *		height: 100dvh;
+     *		padding: 0;
+     *	}
+     *
+     * ::view-transition-new(wroot) {
+     * 	animation: grow var(--story-anim-length) ease-in-out;
+     * 	animation-fill-mode: both;
+     * 	z-index: 2;
+     * 	mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><circle cx="20" cy="20" r="20" fill="white"/></svg>') center / 0 no-repeat;
+     * }
+     *
+     * ::view-transition-old(wroot) {
+     * 	animation: none;
+     * 	animation-fill-mode: both;
+     * 	z-index: 1;
+     * }
+     *
+     * @keyframes grow {
+     * 	from {
+     * 		mask-size: 0dvw;
+     * 	}
+     * 	to {
+     * 		mask-size: 300dvw;
+     * 	}
+     * }
+     * ```
+     *
+     * See https://theme-toggle.rdsx.dev/ for more ideas.
+     *
+     * @default true
+     */
+    useViewTransition?: boolean;
+};
+export interface DarkModeCommands {
+    setDarkMode: (value: "dark" | "light" | "system") => void;
+    cycleDarkMode: () => void;
+}
+export interface DarkModeState {
+    /** Whether the dark mode should be enabled or not */
+    darkMode: Ref<boolean>;
+    /** The current state of the darkMode but as a string (dark, light, system) */
+    darkModeState: Ref<"dark" | "light" | "system">;
+    /** The value of the manuably controllable dark mode. You can set this to true/false or undefined to allow the systemDarkMode to take priority. Alternatively use setDarkMode instead. */
+    manualDarkMode: Ref<boolean | undefined>;
+    /** The value of the system dark mode. This is automatically set depending on the user's `prefer-color-scheme` and should not be set directly. */
+    systemDarkMode: Ref<boolean>;
+}
+export type PopupConstrainToProps = {
+    constrainWidthTo?: number | "trigger" | "available" | string | null;
+    constrainHeightTo?: number | "trigger" | "available" | string | null;
+};
+export type EmitsToProps<T> = {
+    [K in keyof T as K extends string ? `on${Capitalize<K>}` : never]?: T[K] extends (...args: infer Args) => any ? (...args: Args) => void : T[K] extends any[] ? (...args: T[K]) => void : T[K];
+};

package/dist/runtime/types/index.js

@@ -0,0 +1 @@
+export const defaultDarkModeOrder = ["system", "dark", "light"];

package/dist/runtime/utils/notifyIfError.d.ts

@@ -1,3 +1,4 @@
+import type { NotificationEntry } from "../helpers/NotificationHandler.js";
 /**
  * Notifies the user if the given value is an error. Useful for making non-critical errors don't go unnoticed.
  *
@@ -5,10 +6,11 @@
  *
  * If the value is not an error, it is returned.
  */
-export declare function notifyIfError<T>(err: T, { logger, ns, force }?: {
+export declare function notifyIfError<T>(err: T, { logger, ns, force, entry }?: {
     logger?: {
         debug: (...args: any[]) => void;
     };
     ns?: string;
     force?: boolean;
+    entry?: Partial<NotificationEntry<any>>;
 }): T;

package/dist/runtime/utils/notifyIfError.js

@@ -3,7 +3,8 @@ import { useNotificationHandler } from "../composables/useNotificationHandler.js
 export function notifyIfError(err, {
   logger,
   ns,
-  force = false
+  force = false,
+  entry
 } = {}) {
   if (force || err instanceof Error) {
     const errMessage = {
@@ -22,7 +23,8 @@ export function notifyIfError(err, {
       ...errMessage,
       options: ["Ok"],
       cancellable: "Ok",
-      timeout: true
+      timeout: true,
+      ...entry
     });
   }
   return err;

package/dist/runtime/utils/twMerge.d.ts

@@ -5,6 +5,7 @@ export declare const twMergeExtend: {
             "focus-outline": {
                 "focus-outline": string[];
             }[];
+            "no-truncate": string[];
         };
     };
 };

package/dist/runtime/utils/twMerge.js

@@ -2,7 +2,8 @@ import { extendTailwindMerge } from "tailwind-merge";
 const _twMergeExtend = {
   extend: {
     classGroups: {
-      "focus-outline": [{ "focus-outline": ["", "no-offset", "none"] }]
+      "focus-outline": [{ "focus-outline": ["", "no-offset", "none"] }],
+      "no-truncate": ["truncate", "no-truncate"]
     }
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@witchcraft/ui",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Vue component library.",
   "type": "module",
   "main": "./dist/runtime/main.lib.js",
@@ -32,6 +32,7 @@
     },
     "./utils.css": "./src/runtime/assets/utils.css",
     "./base.css": "./src/runtime/assets/base.css",
+    "./animations.css": "./src/runtime/assets/animations.css",
     "./nuxt": {
       "types": "./dist/types.d.mts",
       "import": "./dist/module.mjs"
@@ -49,9 +50,9 @@
     "failOnWarn": false
   },
   "peerDependencies": {
-    "tailwindcss": "^4.1.12",
-    "unplugin-icons": "^22.2.0",
-    "vue": "^3.5.20"
+    "tailwindcss": "^4.2.1",
+    "unplugin-icons": "^22.5.0",
+    "vue": "^3.5.30"
   },
   "peerDependenciesMeta": {
     "tailwindcss": {
@@ -62,80 +63,82 @@
     }
   },
   "dependencies": {
-    "@alanscodelog/utils": "^6.0.1",
-    "@iconify/json": "^2.2.379",
-    "@nuxt/kit": "^4.0.3",
-    "@nuxt/schema": "^4.0.3",
+    "@alanscodelog/utils": "^6.2.0",
+    "@iconify/json": "^2.2.450",
+    "@nuxt/kit": "^4.4.2",
+    "@nuxt/schema": "^4.4.2",
     "@nuxt/types": "^2.18.1",
-    "@tailwindcss/vite": "^4.1.12",
+    "@tailwindcss/vite": "^4.2.1",
     "@witchcraft/nuxt-utils": "^0.3.6",
     "colord": "^2.9.3",
     "colorjs.io": "0.6.0-alpha.1",
     "defu": "^6.1.4",
     "fast-glob": "^3.3.3",
     "metamorphosis": "^0.6.1",
-    "reka-ui": "^2.5.0",
-    "tailwind-merge": "^3.3.1",
-    "unplugin-icons": "^22.2.0",
+    "reka-ui": "^2.9.5",
+    "tailwind-merge": "^3.5.0",
+    "unplugin-icons": "^22.5.0",
     "unplugin-vue-components": "^28.8.0",
     "vue-component-type-helpers": "^2.2.12"
   },
   "devDependencies": {
     "@alanscodelog/commitlint-config": "^3.1.2",
-    "@alanscodelog/eslint-config": "^6.3.0",
-    "@alanscodelog/semantic-release-config": "^6.0.0",
-    "@alanscodelog/tsconfigs": "^6.2.0",
-    "@alanscodelog/vite-config": "^0.0.6",
+    "@alanscodelog/eslint-config": "^6.3.1",
+    "@alanscodelog/semantic-release-config": "^6.0.2",
+    "@alanscodelog/tsconfigs": "^6.3.0",
+    "@alanscodelog/vite-config": "^0.0.7",
     "@chromatic-com/storybook": "^3.2.7",
-    "@commitlint/cli": "^19.8.1",
-    "@internationalized/date": "^3.9.0",
-    "@nuxt/eslint-config": "^1.9.0",
+    "@commitlint/cli": "^20.5.0",
+    "@internationalized/date": "^3.12.0",
+    "@faker-js/faker": "^10.3.0",
+    "@nuxt/eslint-config": "^1.15.2",
     "@nuxt/module-builder": "^1.0.2",
     "@nuxtjs/i18n": "^9.5.6",
-    "@playwright/test": "=1.54.0",
-    "@rollup/plugin-node-resolve": "^16.0.1",
-    "@storybook/addon-a11y": "^8.6.14",
-    "@storybook/addon-actions": "^8.6.14",
-    "@storybook/addon-essentials": "^8.6.14",
-    "@storybook/addon-interactions": "^8.6.14",
-    "@storybook/addon-links": "^8.6.14",
-    "@storybook/addon-storysource": "^8.6.14",
-    "@storybook/blocks": "^8.6.14",
-    "@storybook/manager-api": "^8.6.14",
-    "@storybook/test": "^8.6.14",
+    "@playwright/test": "=1.58.2",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@storybook/addon-a11y": "^8.6.18",
+    "@storybook/addon-actions": "^8.6.18",
+    "@storybook/addon-essentials": "^8.6.18",
+    "@storybook/addon-interactions": "^8.6.18",
+    "@storybook/addon-links": "^8.6.18",
+    "@storybook/addon-storysource": "^8.6.18",
+    "@storybook/blocks": "^8.6.18",
+    "@storybook/manager-api": "^8.6.18",
+    "@storybook/test": "^8.6.18",
     "@storybook/test-runner": "^0.22.1",
-    "@storybook/vue3": "^8.6.14",
-    "@storybook/vue3-vite": "^8.6.14",
-    "@tailwindcss/cli": "^4.1.12",
-    "@tailwindcss/postcss": "^4.1.12",
-    "@types/node": "^24.3.0",
-    "@vitejs/plugin-vue": "^6.0.1",
-    "@vue/runtime-core": "^3.5.20",
-    "@vue/runtime-dom": "^3.5.20",
-    "@vueuse/components": "^13.8.0",
-    "@vueuse/core": "^13.8.0",
-    "autoprefixer": "^10.4.21",
+    "@storybook/vue3": "^8.6.18",
+    "@storybook/vue3-vite": "^8.6.18",
+    "@tanstack/vue-virtual": "^3.13.23",
+    "@tailwindcss/cli": "^4.2.1",
+    "@tailwindcss/postcss": "^4.2.1",
+    "@types/node": "^24.12.0",
+    "@vitejs/plugin-vue": "^6.0.5",
+    "@vue/runtime-core": "^3.5.30",
+    "@vue/runtime-dom": "^3.5.30",
+    "@vueuse/components": "^13.9.0",
+    "@vueuse/core": "^13.9.0",
+    "autoprefixer": "^10.4.27",
     "concurrently": "^9.2.1",
-    "eslint": "^9.34.0",
+    "eslint": "^9.39.4",
     "http-server": "^14.1.1",
     "husky": "^9.1.7",
     "indexit": "2.1.0-beta.3",
     "madge": "^7.0.0",
-    "nuxt": "^4.0.3",
-    "playwright": "=1.54.0",
-    "playwright-core": "=1.54.0",
-    "semantic-release": "^24.2.7",
-    "storybook": "^8.6.14",
+    "nuxt": "^4.4.2",
+    "playwright": "=1.58.2",
+    "playwright-core": "=1.58.2",
+    "semantic-release": "^24.2.9",
+    "storybook": "^8.6.18",
     "storybook-dark-mode": "^4.0.2",
-    "tailwindcss": "^4.1.12",
+    "tailwindcss": "^4.2.1",
     "ts-node": "^10.9.2",
-    "typescript": "^5.9.2",
+    "typescript": "^5.9.3",
     "unbuild": "^3.6.1",
-    "vite": "^7.1.3",
-    "vite-tsconfig-paths": "^5.1.4",
-    "vue": "^3.5.20",
-    "vue-tsc": "3.0.6",
-    "wait-on": "^8.0.4"
+    "vite": "^7.3.1",
+    "vite-tsconfig-paths": "^6.1.1",
+    "vue": "^3.5.30",
+    "vue-tsc": "3.2.4",
+    "wait-on": "^8.0.5"
   },
   "author": "Alan <alanscodelog@gmail.com>",
   "repository": "https://github.com/witchcraftjs/ui",
@@ -173,10 +176,10 @@
     "build:only": "nuxt-module-build build",
     "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
     "dev": "nuxi dev playground",
-    "storybook": "BROWSER=none storybook dev -p 6006",
+    "storybook": "BROWSER=none storybook dev -p 6006 --no-open",
     "storybook:clear-cache": "BROWSER=none storybook dev -p 6006 --no-manager-cache",
     "storybook:build": "pnpm nuxt prepare && storybook build -o docs/storybook",
-    "storybook:test": "pnpm storybook:build && pnpm concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"pnpm http-server docs/storybook --port 6006 --silent\" \"pnpm wait-on tcp:6006 && pnpm test-storybook\"",
+    "storybook:test": "pnpm storybook:build && pnpm concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"pnpm http-server docs/storybook --port 6006 --silent\" \"pnpm wait-on tcp:6006 && pnpm test-storybook --excludeTags 'skip-smoke-test'\"",
     "test": "pnpm storybook:test && pnpm lint:types",
     "test:dev": "pnpm concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"pnpm storybook\" \"pnpm wait-on tcp:6006 && pnpm test-storybook --watch\"",
     "doc": "pnpm test && pnpm storybook:build",

package/src/module.ts

@@ -35,7 +35,7 @@ const componentsInfo: {
 	`!**/Template/**.vue`
 ], [], (filepath: string, name: string) => ({
 	originalName: name,
-	name: name.startsWith("Lib") ? name.replace("Lib", "PREFIX") : `PREFIX${name}`,
+	name: name.startsWith("W") ? name.replace("W", "PREFIX") : `PREFIX${name}`,
 	filepath
 }))
 
@@ -75,7 +75,7 @@ export interface ModuleOptions {
 	 */
 	mainCssFile?: string
 	/** @internal */
-	_playgroundWorkaround?: boolean
+	_playgroundWorkaround?: string
 }
 
 export default defineNuxtModule<ModuleOptions>({
@@ -93,7 +93,7 @@ export default defineNuxtModule<ModuleOptions>({
 		componentPrefix: "W",
 		debug: true,
 		mainCssFile: "~/assets/css/tailwind.css",
-		_playgroundWorkaround: false
+		_playgroundWorkaround: undefined
 	},
 	moduleDependencies: {
 		// not working, see note for unpluginOptions
@@ -133,20 +133,25 @@ export default defineNuxtModule<ModuleOptions>({
 			}
 		)
 
+		const assetDir = resolve("runtime/assets")
+		const tailwindFiles = globFiles([
+			`${assetDir}/**/*.css`,
+			`!${assetDir}/**/tailwind.css`,
+			`!${assetDir}/**/theme.css`
+		], [])
+
 		addTemplate({
 			filename: "witchcraft-ui.css",
 			write: true,
-			getContents: () => options._playgroundWorkaround
+			getContents: () => options._playgroundWorkaround === "@witchcraft/ui"
 				? crop`
 					${indent(themeAsTailwindCss(theme, themeConvertionOpts), 5)}
-					@import "${resolve("runtime/assets/base.css")}";
-					@import "${resolve("runtime/assets/utils.css")}";
+					${indent(tailwindFiles.map(_ => `@import "${_.filepath}";`).join("\n"), 5)}
 					${indent(filteredComponentsInfo.map(_ => `@source "${_.filepath}";`).join("\n"), 5)}
 				`
 				: crop`
 					${indent(themeAsTailwindCss(theme, themeConvertionOpts), 5)}
-					@import "@witchcraft/ui/base.css";
-					@import "@witchcraft/ui/utils.css";
+					${indent(tailwindFiles.map(_ => `@import "${_.filepath.replace(assetDir, "@witchcraft/ui")}";`).join("\n"), 5)}
 					${indent(filteredComponentsInfo.map(_ => `@source "${_.filepath}";`).join("\n"), 5)}
 				`
 		})
@@ -177,7 +182,9 @@ export default defineNuxtModule<ModuleOptions>({
 		nuxt.hook("vite:extendConfig", async config => {
 			if (options.includeUnpluginIconsPlugins) {
 				logger.info(`Adding unplugin-icons`)
+				// @ts-expect-error .
 				config.plugins ??= []
+				// @ts-expect-error .
 				config.plugins = [
 					...(
 						options.includeUnpluginIconsPlugins
@@ -199,6 +206,7 @@ export default defineNuxtModule<ModuleOptions>({
 					tailwindcss() as any,
 					...config.plugins
 				]
+				// @ts-expect-error .
 				config.optimizeDeps ??= {}
 				config.optimizeDeps.exclude ??= []
 				config.optimizeDeps.exclude.push("~icons")