@witchcraft/ui 0.0.1

package/README.md

@@ -0,0 +1,236 @@
+### 🚧 WORK IN PROGRESS 🚧
+[![Docs](https://github.com/witchcraftjs/ui/workflows/Docs/badge.svg)](https://github.com/witchcraftjs/ui/actions/workflows/docs.yml)
+[![Release](https://github.com/witchcraftjs/ui/actions/workflows/release.yml/badge.svg)](https://github.com/witchcraftjs/ui/actions/workflows/release.yml)
+[![NPM Version (with latest tag)](https://img.shields.io/npm/v/%40witchcraft%2Fui/latest)](https://www.npmjs.com/package/@witchcraft/ui/v/latest)
+
+Opinionated, batteries included, vue/nuxt component library + some related utils.
+
+- Built with accessibility in mind.
+- Themable via [metamorphosis](https://github.com/alanscodelog/metamorphosis) which allows providing a custom set of tailwind variables for easier application theming (e.g. \*-fg, \*-bg, \*-accent). No regular tailwind colors are used except neutral.
+- Easily tweak parts of a component via props without having to pass complicate objects. For example, the input component can take a `wrapper-class` attribute to style it's wrapper.
+- Simple components have an `unstyle` option to use them minimally styled if needed\* 
+
+This is unfortunately not true styleless since the tailwind classes are still in the build output.
+
+# [Storybook](https://witchcraftjs.github.io/ui/storybook)
+
+# Usage with Nuxt
+
+Modules, composables, and directives should work out of the box without auto imports. 
+
+## Tailwind (V4)
+
+The module automatically sets up tailwind v4 and generates a custom `witchcraft-ui.css` file with the proper imports, just add it in your tailwind css file.
+
+It does not install "@nuxtjs/tailwindcss" for now since it's not compatible with v4. See [#919](https://github.com/nuxt-modules/tailwindcss/issues/919).
+
+```css[~/assets/css/tailwind.css]
+@import "@tailwindcss";
+@import "../../../.nuxt/witchcraft-ui.css";
+```
+
+## Icons
+
+The module also installs the `unplugin-icons/nuxt` module and configures it with a custom config styles icons a bit better. This can be disabled with the `includeUnpluginIconsPlugins` option.
+
+## Other
+
+There are some additional helpers that are not auto imported. These can be imported from `#witchcraft-ui-helpers`.
+
+Anything else that might be needed can be imported from `#witchcraft-ui`.
+
+# General Usage
+
+# Props
+
+To make it easier to style parts of components or override behavior, some components can accept additional prefixed attributes, for example, you can pass `wrapper-class` to the input component to style it's wrapper.
+
+I think this is nicer in general than having to pass an object with extra attributes. The only weird part, is because of how vue changes the case of props, for attributes like `innerHTML` you will need to pass `{prefix}-inner-h-t-m-l`, but all components have proper types to help this. Similarly events look like `{prefix}-on-click`.
+
+# Slots
+
+Usually it is possible to do most modifications through props, but slots to replace parts of components are available.
+
+Most slots where possible are passed all properties needed to replace them except classes so you can do something like this, to for example replace the simple input component inside the input component.
+
+```vue
+<lib-input>
+	<template #input="slotProps">
+		<lib-simple-input
+			:class="'completely custom styles'"
+			v-bind="slotProps"
+		></lib-simple-input>
+	</template>
+</lib-input>
+
+```
+
+# Other
+
+## Standalone Usage
+
+```ts
+import { defineConfig } from "vite"
+
+import { WitchcraftUiResolver } from "@witchcraft/ui/build/WitchcraftUiResolver.js"
+import IconsResolver from "unplugin-icons/resolver"
+import Icons from "unplugin-icons/vite"
+import Components from "unplugin-vue-components/vite"
+import { unpluginIconViteOptions } from "@witchcraft/ui/build/unpluginIconViteOptions.js"
+
+export default defineConfig({
+	plugins: [
+		vue() as any,
+		Components({
+			resolvers: [
+				// required
+				IconsResolver(),
+				// to enable auto-imports
+				// not-required
+				WitchcraftUiResolver({
+					// optionally change the prefix
+					prefix: "W",
+					filter: (name) => name !== "...",
+				}),
+			],
+			dts: "./types/components.d.ts",
+		}),
+		// style the icons correctly
+		Icons(unpluginIconViteOptions)
+	],
+})
+```
+
+See [@witchcraft/editor/vite.config.dev.ts].
+
+### Setting up Tailwind
+
+#### Extra Classes
+
+```css
+@import "@witchcraft/ui/style.css"; /* tailwind v4 style utils - required */
+@import "@witchcraft/ui/base.css";
+@source "@witchcraft/ui/src/runtime/components";
+```
+Base just contains animation keyframes and basic styles for vue animations. They will get imported regardless of whether they are used since otherwise tailwind does not detect they are being used.
+
+
+#### Tailwind Configuration
+
+This module does everything v4 style, so no configuration is needed.
+
+
+#### tailwind-merge
+
+The library provides a customized twMerge instance (`@witchcraft-ui/utils/twMere.js`). You will need to use it or import the options it extends and customize your twMerge instance.
+
+### Icons
+
+This library uses unplugin-icons to provide icons. It installs as a dependency to have all icons available `@iconify/json` since it uses various icons.
+
+
+### Getting Proper Types
+
+While components should be correctly typed, the library internally extends vue's interfaces to allow data-* attributes and also some missing aria attributes (like `aria-description`).
+
+You might need to customize these by adding the following in a global d.ts.
+
+```ts
+// to make the component types globally available you can do:
+import { GlobalComponentTypes } from "@witchcraft/ui"
+declare module "@vue/runtime-core" {
+	interface GlobalComponents extends GlobalComponentTypes { }
+}
+
+// to add more attributes yourself you can do:
+declare module "vue" {
+	interface HTMLAttributes {
+		// ...
+	}
+	interface AriaAttributes {
+		// ...
+	}
+	interface ComponentCustomProps {
+		// ...
+	}
+}
+export {}
+```
+
+Note that using the strictTemplates compiler option can cause weird issues with fallthrough props.
+
+
+# Development
+
+## Props
+
+Due to issues with vue 3 removing $listeners and the fact that we can't inherit from an existing HTML attribute types to specify props for wrapper components (most of them), we have to declare props in a convoluted way to get proper types when we consume the componenets.
+
+Here is an example of the needed code for props to work correctly:
+```vue
+<script lang="ts">
+// this is done in a seperate script so that it actually compiles
+// and we can have interface merging, a setup script cannot interface merge
+
+import type { BaseInteractiveProps } from "../shared/props.js"
+
+// if using useDivideAttrs, we need to do the below for each prefix
+// a helper type WrapperProps is provided to do this
+type WrapperTypes =  (WrapperProps<"wrapper", HTMLAttributes, {
+	// overrides
+	/** Tailwind classes. */
+	class:string;
+}>)
+
+// real props vue can understand, they will show up under props.*
+type RealProps =
+// simple types are okay
+& BaseInteractiveProps
+& {
+	// any ignored props that we need to use in the component template 
+	// will need to be re-defined so vue can see them
+	// in a way vue can see them if it's one of the problem properties
+	id?: InputHTMLAttributes["id"]
+}
+
+
+interface Props
+	extends
+	// we need to ignore the complex InputHTMLAttributes type
+	// otherwise vue compilation fails
+	// if we ignore it, all it's properties are passed as fallback attrs
+	// NOT to props as normal
+	// we also need to omit properties or events that the component overrides with a different type
+	/** @vue-ignore */
+	Partial<Omit<InputHTMLAttributes,"class" | "onSubmit"> & {
+		//	overrides for the components
+		// usually, for example, class can only be a string (because of tailwind)
+		// this is still part of the ignored type above 
+		// it will be passed as an attr
+		class?:string
+	}>,
+	/** @vue-ignore */
+	Partial<WrapperTypes>,
+	RealProps
+{ }
+</script>
+
+<script lang="ts" setup>
+// eslint-disable-next-line no-duplicate-imports
+import { baseInteractivePropsDefaults } from "../shared/props.js"
+
+const props = withDefaults(defineProps<Props>(), {
+	id: "",
+	...baseInteractivePropsDefaults
+})
+const $ = useDivideAttrs(["wrapper"] as const)
+</script>
+```
+
+For prop types that don't error, I think we can just define them normally, but then it turns into a mess, some components will have their values in props, some in $attrs, this way. This is consistent and also more in line with what we expect.
+
+Related Links:
+- https://github.com/vuejs/rfcs/discussions/397
+- https://github.com/vuejs/core/issues/8522
+- https://github.com/vuejs/rfcs/pull/477
+- https://github.com/vuejs/language-tools/issues/1232#issuecomment-1118176103

package/dist/module.cjs

@@ -0,0 +1,5 @@
+module.exports = function(...args) {
+  return import('./module.mjs').then(m => m.default.call(this, ...args))
+}
+const _meta = module.exports.meta = require('./module.json')
+module.exports.getMeta = () => Promise.resolve(_meta)

package/dist/module.d.mts

@@ -0,0 +1,34 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+declare const knownDirectives: readonly ["vExtractRootEl", "vResizableCols", "vResizeObserver", "vResizableCols"];
+declare module "@nuxt/schema" {
+    interface PublicRuntimeConfig {
+        witchcraftUi: Pick<ModuleOptions, "directives">;
+    }
+}
+interface ModuleOptions {
+    /**
+     * Whether to include the vite unplugin-icons plugins (pre-configured with the ui module's defaults.
+     *
+     * @default true
+     */
+    includeUnpluginIconsPlugins?: boolean;
+    directives: (typeof knownDirectives[number])[];
+    /**
+        * Which components (without a prefix) to register for auto-importing globally.
+        */
+    globalComponents: string[];
+    /**
+     * @default "W"
+     */
+    componentPrefix: string;
+    debug?: boolean;
+    /**
+     * @default "~/assets/css/tailwind.css"
+     */
+    mainCssFile?: string;
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+
+export { _default as default };
+export type { ModuleOptions };

package/dist/module.d.ts

@@ -0,0 +1,34 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+declare const knownDirectives: readonly ["vExtractRootEl", "vResizableCols", "vResizeObserver", "vResizableCols"];
+declare module "@nuxt/schema" {
+    interface PublicRuntimeConfig {
+        witchcraftUi: Pick<ModuleOptions, "directives">;
+    }
+}
+interface ModuleOptions {
+    /**
+     * Whether to include the vite unplugin-icons plugins (pre-configured with the ui module's defaults.
+     *
+     * @default true
+     */
+    includeUnpluginIconsPlugins?: boolean;
+    directives: (typeof knownDirectives[number])[];
+    /**
+        * Which components (without a prefix) to register for auto-importing globally.
+        */
+    globalComponents: string[];
+    /**
+     * @default "W"
+     */
+    componentPrefix: string;
+    debug?: boolean;
+    /**
+     * @default "~/assets/css/tailwind.css"
+     */
+    mainCssFile?: string;
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+
+export { _default as default };
+export type { ModuleOptions };

package/dist/module.json

@@ -0,0 +1,9 @@
+{
+  "name": "witchcraftUi",
+  "configKey": "witchcraftUi",
+  "version": "0.0.1",
+  "builder": {
+    "@nuxt/module-builder": "0.8.4",
+    "unbuild": "3.5.0"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,124 @@
+import { crop, indent } from '@alanscodelog/utils';
+import { createResolver, defineNuxtModule, useLogger, addTemplate, addComponent, addImports, installModule, addTypeTemplate } from '@nuxt/kit';
+import tailwindcss from '@tailwindcss/vite';
+import { globFiles, addImportsCustom } from '@witchcraft/nuxt-utils/utils';
+import { defu } from 'defu';
+import fs from 'fs';
+import { themeAsTailwindCss } from 'metamorphosis/tailwind';
+import IconsResolver from 'unplugin-icons/resolver';
+import Icons from 'unplugin-icons/vite';
+import ViteComponents from 'unplugin-vue-components/vite';
+import { unpluginIconViteOptions } from '../dist/runtime/build/unpluginIconViteOptions.js';
+import { themeConvertionOpts } from '../dist/runtime/tailwind/themeConvertionOpts.js';
+import { theme } from '../dist/runtime/theme.js';
+
+const knownDirectives = ["vExtractRootEl", "vResizableCols", "vResizeObserver", "vResizableCols"];
+const { resolve, resolvePath } = createResolver(import.meta.url);
+const componentsInfo = globFiles([
+  `${resolve("./runtime/components")}/**/*.vue*`,
+  `!**/Template/**.vue`
+], [], (filepath, name) => ({
+  name: name.startsWith("Lib") ? name.replace("Lib", "PREFIX") : `PREFIX${name}`,
+  filepath
+}));
+const module = defineNuxtModule({
+  meta: {
+    name: "witchcraftUi",
+    configKey: "witchcraftUi"
+  },
+  defaults: {
+    includeUnpluginIconsPlugins: true,
+    directives: [...knownDirectives],
+    globalComponents: [
+      ...componentsInfo.map((_) => _.name.slice("PREFIX".length))
+    ],
+    componentPrefix: "W",
+    debug: true,
+    mainCssFile: "~/assets/css/tailwind.css"
+  },
+  async setup(options, nuxt) {
+    const moduleName = "@witchcraft/ui";
+    const logger = useLogger(moduleName, { level: options.debug ? 10 : 0 });
+    const filteredComponentsInfo = [];
+    for (const component of componentsInfo) {
+      const prefixless = component.name.slice("PREFIX".length);
+      component.name = options.componentPrefix + prefixless;
+      if (options.globalComponents.includes(prefixless)) {
+        filteredComponentsInfo.push(component);
+      }
+    }
+    const unknownDirectives = options.directives.filter((_) => !knownDirectives.includes(_));
+    if (unknownDirectives.length > 0) {
+      throw new Error(`Witchcraft Components: Directives list contains unknown directives: ${unknownDirectives.join(",")}`);
+    }
+    nuxt.options.runtimeConfig.public.witchcraftUi = defu(
+      nuxt.options.runtimeConfig.public.witchcraftUi,
+      {
+        directives: options.directives
+      }
+    );
+    const contents = [
+      ...componentsInfo.map((_) => _.filepath)
+    ];
+    addTemplate({
+      filename: "witchcraft-ui.css",
+      write: true,
+      getContents: () => crop`
+				${indent(themeAsTailwindCss(theme, themeConvertionOpts), 4)}
+				@import "@witchcraft/ui/style.css";
+				@import "@witchcraft/ui/base.css";
+				${indent(contents.map((_) => `@source "${_}";`).join("\n"), 4)}
+			`
+    });
+    await Promise.all(
+      filteredComponentsInfo.map(async (entry) => addComponent({
+        filePath: entry.filepath,
+        name: entry.name,
+        global: options.globalComponents.includes(entry.name.slice(options.componentPrefix.length))
+      }))
+    );
+    logger.info(`Added components: ${filteredComponentsInfo.map((_) => _.name).join(", ")}`);
+    const added = [];
+    addImportsCustom([
+      `${resolve("runtime/composables")}/**/*`,
+      `${resolve("runtime/utils")}/**/*`
+    ], [], (filePath, name) => {
+      added.push(name);
+      return addImports({
+        name,
+        from: filePath
+      });
+    });
+    logger.info(`Added imports: ${added.join(", ")}`);
+    nuxt.hook("vite:extendConfig", async (config) => {
+      if (options.includeUnpluginIconsPlugins) {
+        logger.info(`Adding unplugin-icons`);
+        config.plugins ??= [];
+        config.plugins = [
+          // we must prepend or the custom style options don't work when the module is used
+          ViteComponents({
+            resolvers: [
+              IconsResolver()
+              // we don't need our resolver since we use nuxt instead
+            ]
+          }),
+          Icons({
+            ...unpluginIconViteOptions
+          }),
+          tailwindcss(),
+          ...config.plugins
+        ];
+      }
+    });
+    nuxt.options.css.push(await resolvePath(options.mainCssFile, nuxt.options.alias));
+    await installModule("unplugin-icons/nuxt");
+    nuxt.options.alias["#witchcraft-ui"] = resolve("runtime");
+    nuxt.options.alias["#witchcraft-ui-helpers"] = resolve("runtime/helpers");
+    addTypeTemplate({
+      filename: "types/witchcraft-ui.d.ts",
+      getContents: () => fs.readFileSync(resolve("../types/global.d.ts")).toString()
+    });
+  }
+});
+
+export { module as default };

package/dist/runtime/assets/base.css

@@ -0,0 +1 @@
+.v-enter-active,.v-leave-active{transition:opacity .5s ease}.v-enter-from,.v-leave-to{opacity:0}.list-enter-active,.list-leave-active,.list-move{transition:all .5s ease}.list-enter-from,.list-leave-to{opacity:0;transform:translateX(30px)}.list-leave-active{position:absolute}.list-leave-to,.list-move{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}@keyframes blink{0%{opacity:0}25%{opacity:1}75%{opacity:1}to{opacity:0}}@keyframes slide{0%{background-position:0}to{background-position:100%}}a{@apply link-like}

package/dist/runtime/assets/locales/en.json

@@ -0,0 +1,33 @@
+{
+	"witchcraft-ui": {
+		"file-input.accepted-formats": "Accepted Formats",
+		"file-input.compact-choose-file": "Choose File",
+		"file-input.compact-choose-file-plural": "Choose Files",
+		"file-input.non-compact-choose-file": "Drag & Drop File",
+		"file-input.non-compact-choose-file-plural": "Drag & Drop Files",
+		"color-picker.pick-color": "Pick Color",
+		"cancel": "Cancel",
+		"save": "Save",
+		"copy": "Copy",
+		"color-picker.aria": "Color Picker",
+		"color-picker.aria.saturation": "Saturation",
+		"color-picker.aria.hue": "Hue",
+		"color-picker.aria.value": "Value",
+		"color-picker.aria.hue-slider": "Hue Slider",
+		"color-picker.aria.alpha-slider": "Alpha Slider",
+		"color-picker.aria.description": "Use the arrow keys to move the handle, or use shift to move in 10 pixel increments.",
+		"dark-mode-switcher.title": "Switch dark mode type, current: ",
+		"dark-mode-switcher.system": "System",
+		"dark-mode-switcher.dark": "Dark",
+		"dark-mode-switcher.light": "Light",
+		"pagination.aria": "Pagination Navigation",
+		"pagination.aria.go-to-previous-page": "Go to previous page. Page {count}",
+		"pagination.aria.go-to-next-page": "Go to next page. Page {count}",
+		"pagination.aria.go-to-page": "Go to page {count}",
+		"pagination.aria.current-page": "Current page {count}",
+		"pagination.previous-page": "Prev",
+		"pagination.next-page": "Next",
+		"recorder.recording": "Recording",
+		"":"hate forgetting json can't handle a trailing comma"
+	}
+}

package/dist/runtime/assets/style.css

@@ -0,0 +1 @@
+@custom-variant dark (&:where(.dark, .dark *));@utility focus-outline-within{@apply outlined-within:outline-hidden outlined-within:ring-2 outlined-within:ring-accent-500 outlined-within:ring-offset-2}@utility focus-outline{@apply outlined:outline-hidden outlined:ring-2 outlined:ring-accent-500 outlined:ring-offset-2}@utility focus-outline-no-offset{@apply outlined:outline-hidden outlined:ring-2 outlined:ring-accent-500}@utility focus-outline-hidden{@apply outlined:outline-hidden}@utility bg-squares-gradient{--_square:var(--squareSize,5px);--_double_square:calc(var(--_square)*2);--_light_square:var(--lightSquare,var(--color-white));--_dark_square:var(--darkSquare,var(--color-black));background-color:var(--_light_square);background:repeating-conic-gradient(var(--_dark_square) 0 25%,var(--_light_square) 0 50%) 50% /var(--_double_square) var(--_double_square)}@utility square-light-*{--lightSquare:--value(--color- *)}@utility square-dark-*{--darkSquare:--value(--color- *)}@utility square-size-*{--squareSize:calc(--value(integer) * 1px)}@utility bg-bars-gradient{--_bg_color:var(--bars-bg-color,var(--color-accent-700));--_fg_color:var(--bars-fg-color,var(--color-accent-800));--_angle:var(--bars-angle,45deg);--_fg_width:var(--bars-fg-width,50%);--_bg_width:calc(100% - var(--_fg_width));background-color:var(--_bg_color);--_pos_1:calc(var(--_bg_width)/2);--_pos_2:calc(var(--_bg_width)/2 + var(--_fg_width)/2);--_pos_3:calc(var(--_bg_width) + var(--_fg_width)/2);background-image:repeating-linear-gradient(var(--_angle),var(--_bg_color),var(--_bg_color) var(--_pos_1),var(--_fg_color) var(--_pos_1),var(--_fg_color) var(--_pos_2),var(--_bg_color) var(--_pos_2),var(--_bg_color) var(--_pos_3),var(--_fg_color) var(--_pos_3),var(--_fg_color))}@utility bars-angle-*{--bars-angle:var(--value(integer) * 1deg)}@utility bars-fg-*{--bars-fg-color:--value(--color-*)}@utility bars-bg-*{--bars-bg-color:--value(--color-*)}@utility bars-w-*{--bars-fg-width:calc(--value(integer) * 1%, 50%)}@utility scrollbar-hidden{-ms-overflow-style:none;scrollbar-width:none;&::-webkit-scrollbar{display:none}}@utility content-vertical-holder{--tw-content:"\200b";content:var(--tw-content)}@utility no-touch-action{touch-action:none}@utility bg-transparency-squares{@apply bg-squares-gradient square-light-white square-dark-neutral-300 square-size-6}@utility link-like{@apply cursor-pointer hover:text-accent-500}

package/dist/runtime/assets/tailwind.css

@@ -0,0 +1 @@
+@import "tailwindcss" source("../../");@import "./theme.css";@import "./base.css";@import "./style.css";

package/dist/runtime/assets/theme.css

@@ -0,0 +1 @@
+@theme{--spacing:0.25rem;--color-neutral-100:oklch(0.9700000000000002 0 0);--color-neutral-200:oklch(0.922 0 0);--color-neutral-300:oklch(0.8700000000000001 0 0);--color-neutral-400:oklch(0.708 0 0);--color-neutral-500:oklch(0.5560000000000002 0 0);--color-neutral-600:oklch(0.4390000000000001 0 0);--color-neutral-700:oklch(0.371 0 0);--color-neutral-800:oklch(0.2690000000000001 0 0);--color-neutral-900:oklch(0.20500000000000004 0 0);--color-neutral-950:oklch(0.14500000000000002 0 0);--color-neutral-50:oklch(0.9850000000000003 0 0);--color-bg:oklch(0.9924098465974739 0 0);--color-fg:oklch(0.09181475833376385 0 0);--color-ok-50:oklch(0.9820000000000003 0.018000000000000457 155.82600000000036);--color-ok-100:oklch(0.9620000000000002 0.0440000000000005 156.7430000000004);--color-ok-200:oklch(0.9250000000000002 0.08400000000000035 155.99500000000012);--color-ok-300:oklch(0.8710000000000001 0.1500000000000003 154.44900000000007);--color-ok-400:oklch(0.7920000000000003 0.20900000000000052 151.71100000000013);--color-ok-600:oklch(0.6270000000000001 0.19400000000000042 149.21400000000006);--color-ok-700:oklch(0.527 0.15400000000000028 150.06900000000007);--color-ok-800:oklch(0.448 0.11900000000000009 151.32800000000003);--color-ok-900:oklch(0.39299999999999996 0.09500000000000014 152.53500000000008);--color-ok-950:oklch(0.26600000000000007 0.06499999999999999 152.93399999999997);--color-ok-500:oklch(0.7230000000000002 0.21900000000000014 149.57900000000006);--color-warning-50:oklch(0.9870000000000002 0.026000000000000044 102.2120000000017);--color-warning-100:oklch(0.9730000000000001 0.07100000000000001 103.19300000000027);--color-warning-200:oklch(0.9450000000000003 0.12900000000000011 101.54000000000019);--color-warning-300:oklch(0.9050000000000001 0.18200000000000002 98.11100000000027);--color-warning-400:oklch(0.8520000000000003 0.19900000000000007 91.93600000000015);--color-warning-600:oklch(0.6810000000000002 0.16200000000000006 75.83400000000023);--color-warning-700:oklch(0.5540000000000002 0.135 66.44200000000001);--color-warning-800:oklch(0.4760000000000001 0.11399999999999987 61.90700000000004);--color-warning-900:oklch(0.4210000000000002 0.0949999999999999 57.70800000000014);--color-warning-950:oklch(0.28600000000000014 0.06599999999999996 53.8130000000001);--color-warning-500:oklch(0.7950000000000003 0.18400000000000002 86.0470000000002);--color-danger-50:oklch(0.9710000000000001 0.012999999999999515 17.380000000000223);--color-danger-100:oklch(0.936 0.03199999999999968 17.717000000000212);--color-danger-200:oklch(0.8850000000000001 0.062000000000000006 18.33400000000006);--color-danger-300:oklch(0.8079999999999999 0.11399999999999981 19.57099999999997);--color-danger-400:oklch(0.7040000000000002 0.19099999999999973 22.216000000000008);--color-danger-500:oklch(0.637 0.2369999999999997 25.331000000000017);--color-danger-600:oklch(0.5770000000000002 0.24499999999999952 27.325000000000045);--color-danger-700:oklch(0.5050000000000001 0.21299999999999994 27.51800000000003);--color-danger-800:oklch(0.444 0.1769999999999998 26.899);--color-danger-900:oklch(0.3960000000000002 0.14099999999999965 25.723000000000127);--color-danger-950:oklch(0.25800000000000006 0.09199999999999989 26.04200000000003);--color-accent-50:oklch(0.9700000000000001 0.01400000000000012 254.60399999999714);--color-accent-100:oklch(0.9320000000000002 0.03200000000000015 255.5850000000001);--color-accent-200:oklch(0.8820000000000002 0.059000000000000094 254.1279999999993);--color-accent-300:oklch(0.8090000000000002 0.10499999999999995 251.81299999999993);--color-accent-400:oklch(0.7070000000000002 0.16500000000000012 254.6239999999998);--color-accent-600:oklch(0.5460000000000002 0.245 262.8809999999998);--color-accent-700:oklch(0.48800000000000004 0.2430000000000002 264.376);--color-accent-800:oklch(0.4240000000000001 0.19900000000000004 265.63799999999986);--color-accent-900:oklch(0.37900000000000006 0.146 265.52199999999993);--color-accent-950:oklch(0.2820000000000001 0.09099999999999996 267.935);--color-accent-500:oklch(0.6230000000000001 0.2140000000000002 259.81499999999994)}

package/dist/runtime/build/WitchcraftUiResolver.d.ts

@@ -0,0 +1,5 @@
+import { type ComponentResolver } from "unplugin-vue-components";
+export declare const WitchcraftUiResolver: ({ prefix, filter, }?: {
+    prefix?: string;
+    filter?: (name: string) => boolean;
+}) => ComponentResolver;

package/dist/runtime/build/WitchcraftUiResolver.js

@@ -0,0 +1,17 @@
+const prefixless = ["Icon", "Aria", "TestWrapper"];
+export const WitchcraftUiResolver = ({
+  prefix = "W",
+  filter = () => true
+} = {}) => (componentName) => {
+  if (componentName.startsWith(prefix)) {
+    const n = componentName.slice(1);
+    const filename = prefixless.includes(n) ? n : `Lib${n}`;
+    if (!filter(n)) {
+      return void 0;
+    }
+    return {
+      from: `@witchcraft/ui/components/${filename}`
+    };
+  }
+  return void 0;
+};

package/dist/runtime/build/generateTheme.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/runtime/build/generateTheme.js

@@ -0,0 +1,14 @@
+import { themeAsTailwindCss } from "metamorphosis/tailwind.js";
+import fs from "node:fs";
+import { resolve } from "path";
+import { themeConvertionOpts } from "../tailwind/themeConvertionOpts.js";
+import { theme } from "../theme.js";
+const css = themeAsTailwindCss(theme, themeConvertionOpts);
+import url from "url";
+const __dirname = url.fileURLToPath(new URL(".", import.meta.url));
+const filepath = resolve(__dirname, "../assets/theme.css");
+const content = `/* Auto-generated, see gen:theme script. */
+${css}`;
+fs.writeFile(filepath, content, (err) => {
+  if (err) throw err;
+});

package/dist/runtime/build/unpluginIconViteOptions.d.ts

@@ -0,0 +1,2 @@
+import type Icons from "unplugin-icons/vite";
+export declare const unpluginIconViteOptions: Parameters<typeof Icons>[0];

package/dist/runtime/build/unpluginIconViteOptions.js

@@ -0,0 +1,10 @@
+export const unpluginIconViteOptions = {
+  scale: 0,
+  // removes the scale
+  iconCustomizer: async (_, __, props) => {
+    props.width = "unset";
+  },
+  // note that we can't use tailwind classes
+  // i mean we could, but we have to tell it to include them manually (pain)
+  defaultStyle: "vertical-align: -0.125em; height: 1em; display: inline-block; width:auto;"
+};

package/dist/runtime/components/Aria/Aria.vue

@@ -0,0 +1,18 @@
+<template>
+<div tabindex="0">{{ value }}</div>
+</template>
+
+<script  setup lang="ts">
+import type { PropType } from "vue"
+
+
+defineOptions({ name: "aria" })
+defineProps<{
+	// eslint-disable-next-line vue/no-restricted-props
+	value: string
+}>()
+</script>
+
+<style scoped>
+div{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);white-space:nowrap}
+</style>

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

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+/**
+ * For testing the focus styles. The (still WIP) idea is that normally the outlined class is set by whether the user is using the keyboard or not. When true, outlines generated by the focus-outline-* or outlined-* utilities are allowed (they might not always appear since most components have focus-visible styles), when false, they are not allowed, but components can still set custom focus styles that will always appear. Either or is usually not a good idea unless all components set custom focus styles. For something like a web app, focus-visible should be allowed. For an app, this setup allows that to be configurable.
+ */
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj<typeof NAME>;
+export declare const Primary: Story;
+export declare const OutlineForcedTrue: Story;
+export declare const OutlineFalse: Story;
+export declare const AlwaysAllowFocusVisible: Story;

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

@@ -0,0 +1,53 @@
+import { onMounted, ref } from "vue";
+import * as components from "./index.js";
+const meta = {
+  title: "Other/Focus",
+  args: {
+    outline: true
+  }
+};
+const template = `
+			<div class="focus-outline-no-offset border border-accent-600" tabindex="0">focus-outline-no-offset (outlined i.e. outlined-focus-visible)</div>
+			<div class="focus-outline border border-accent-600" tabindex="0">focus-outline (outlined i.e. outlined-focus-visible)</div>
+			<div class="outline-hidden outlined-focus:border-danger-500 border border-accent-600" tabindex="0">outlined-focus</div>
+			<div class="outline-hidden outlined-within:border-danger-500 border border-accent-600" >
+				outlined-within<div tabindex="0">Inner</div>
+			</div>
+			<div class="outline-hidden focus:border-danger-500 border border-accent-600" tabindex="0">Has Manual Focus Classes</div>
+		`;
+export default meta;
+export const Primary = {
+  render: (args) => ({
+    components,
+    setup: () => {
+      const el = ref(null);
+      onMounted(() => {
+      });
+      return { ...args, el };
+    },
+    template
+  })
+};
+export const OutlineForcedTrue = {
+  ...Primary,
+  args: {
+    ...Primary.args,
+    forceOutline: true
+  }
+};
+export const OutlineFalse = {
+  ...Primary,
+  args: {
+    ...Primary.args,
+    outline: false
+  }
+};
+export const AlwaysAllowFocusVisible = {
+  render: (args) => ({
+    components,
+    setup: () => args,
+    template: `
+		<div class="outlined-visible group">${template}</div>
+		`
+  })
+};