@witchcraft/ui 0.0.1 → 0.1.1

package/README.md

@@ -16,7 +16,7 @@ This is unfortunately not true styleless since the tailwind classes are still in
 
 # Usage with Nuxt
 
-Modules, composables, and directives should work out of the box without auto imports. 
+Modules, composables, and directives should work out of the box without auto imports. The module also installs the `reka-ui/nuxt` module.
 
 ## Tailwind (V4)
 
@@ -24,9 +24,16 @@ The module automatically sets up tailwind v4 and generates a custom `witchcraft-
 
 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";
+```css [~/assets/css/tailwind.css]
+@import "@tailwindcss" source("../../../app");
 @import "../../../.nuxt/witchcraft-ui.css";
+
+// without Nuxt:
+@import "@witchcraft/ui/utils.css";
+@import "@witchcraft/ui/base.css";
+// source used components
+@source "@witchcraft/ui/components";
+
 ```
 
 ## Icons
@@ -54,14 +61,14 @@ Usually it is possible to do most modifications through props, but slots to repl
 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>
+<lib-simple-input-deprecated>
 	<template #input="slotProps">
 		<lib-simple-input
 			:class="'completely custom styles'"
 			v-bind="slotProps"
 		></lib-simple-input>
 	</template>
-</lib-input>
+</lib-simple-input>
 
 ```
 
@@ -108,17 +115,11 @@ See [@witchcraft/editor/vite.config.dev.ts].
 #### Extra Classes
 
 ```css
-@import "@witchcraft/ui/style.css"; /* tailwind v4 style utils - required */
+@import "@witchcraft/ui/utils.css";
 @import "@witchcraft/ui/base.css";
-@source "@witchcraft/ui/src/runtime/components";
+@source "/path/to/node_modules/@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.
-
+Base just contains animation keyframes, basic styles for vue animations, and some basic global styles. They will get imported regardless of whether they are used since otherwise tailwind does not detect they are being used.
 
 #### tailwind-merge
 
@@ -164,7 +165,7 @@ Note that using the strictTemplates compiler option can cause weird issues with
 
 ## 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.
+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 components.
 
 Here is an example of the needed code for props to work correctly:
 ```vue
@@ -174,14 +175,6 @@ Here is an example of the needed code for props to work correctly:
 
 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
@@ -193,7 +186,6 @@ type RealProps =
 	id?: InputHTMLAttributes["id"]
 }
 
-
 interface Props
 	extends
 	// we need to ignore the complex InputHTMLAttributes type
@@ -205,12 +197,10 @@ interface Props
 	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
+		// this will be passed as an attr
 		class?:string
 	}>,
 	/** @vue-ignore */
-	Partial<WrapperTypes>,
 	RealProps
 { }
 </script>
@@ -223,7 +213,7 @@ const props = withDefaults(defineProps<Props>(), {
 	id: "",
 	...baseInteractivePropsDefaults
 })
-const $ = useDivideAttrs(["wrapper"] as const)
+const $attrs = useAttrs()
 </script>
 ```
 

package/dist/module.d.mts

@@ -24,9 +24,11 @@ interface ModuleOptions {
     componentPrefix: string;
     debug?: boolean;
     /**
-     * @default "~/assets/css/tailwind.css"
+     * @default "~/assets/css/tailwind.css" if it exists.
      */
     mainCssFile?: string;
+    /** @internal */
+    _playgroundWorkaround?: boolean;
 }
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 

package/dist/module.json

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

package/dist/module.mjs

@@ -1,4 +1,4 @@
-import { crop, indent } from '@alanscodelog/utils';
+import { indent, crop } 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';
@@ -18,6 +18,7 @@ const componentsInfo = globFiles([
   `${resolve("./runtime/components")}/**/*.vue*`,
   `!**/Template/**.vue`
 ], [], (filepath, name) => ({
+  originalName: name,
   name: name.startsWith("Lib") ? name.replace("Lib", "PREFIX") : `PREFIX${name}`,
   filepath
 }));
@@ -34,7 +35,8 @@ const module = defineNuxtModule({
     ],
     componentPrefix: "W",
     debug: true,
-    mainCssFile: "~/assets/css/tailwind.css"
+    mainCssFile: "~/assets/css/tailwind.css",
+    _playgroundWorkaround: false
   },
   async setup(options, nuxt) {
     const moduleName = "@witchcraft/ui";
@@ -57,18 +59,20 @@ const module = defineNuxtModule({
         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)}
-			`
+      getContents: () => options._playgroundWorkaround ? crop`
+					${indent(themeAsTailwindCss(theme, themeConvertionOpts), 5)}
+					@import "${resolve("runtime/assets/base.css")}";
+					@import "${resolve("runtime/assets/utils.css")}";
+					${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(filteredComponentsInfo.map((_) => `@source "${_.filepath}";`).join("\n"), 5)}
+				`
     });
     await Promise.all(
       filteredComponentsInfo.map(async (entry) => addComponent({
@@ -110,8 +114,13 @@ const module = defineNuxtModule({
         ];
       }
     });
-    nuxt.options.css.push(await resolvePath(options.mainCssFile, nuxt.options.alias));
+    const mainCssFile = await resolvePath(options.mainCssFile, nuxt.options.alias);
+    const exists = fs.existsSync(mainCssFile);
+    if (exists) {
+      nuxt.options.css.push(mainCssFile);
+    }
     await installModule("unplugin-icons/nuxt");
+    await installModule("reka-ui/nuxt");
     nuxt.options.alias["#witchcraft-ui"] = resolve("runtime");
     nuxt.options.alias["#witchcraft-ui-helpers"] = resolve("runtime/helpers");
     addTypeTemplate({

package/dist/runtime/assets/base.css

@@ -1 +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}
+.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(100%)}.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}*{@apply styled-scrollbar}textarea{@apply styled-resizer}

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

@@ -5,7 +5,7 @@
 		"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",
+		"color-input.aria-and-title-prefix": "Click to Open Color Picker, Current Color: ",
 		"cancel": "Cancel",
 		"save": "Save",
 		"copy": "Copy",
@@ -15,7 +15,7 @@
 		"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.",
+		"color-picker.aria.description": "Use the arrow keys to move the handle, or use shift to move in 10 pixel increments. Press enter to save value.",
 		"dark-mode-switcher.title": "Switch dark mode type, current: ",
 		"dark-mode-switcher.system": "System",
 		"dark-mode-switcher.dark": "Dark",

package/dist/runtime/assets/tailwind.css

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

package/dist/runtime/assets/utils.css

@@ -0,0 +1 @@
+@custom-variant dark (&:where(.dark, .dark *));@utility focus-outline-within{@apply outlined-within:outline-2 outlined-within:outline-accent-500 outlined-within:outline-offset-2}@utility focus-outline{@apply outlined:outline-2 outlined:outline-accent-500 outlined:outline-offset-2}@utility focus-outline-no-offset{@apply outlined:outline-2 outlined:outline-accent-500}@utility focus-outline-hidden{@apply outlined:outline-none}@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 styled-scrollbar{--_scrollbar_width:var(--scrollbar-width,calc(var(--spacing)*3));--_scrollbar_border_width:var(--scrollbar-border-width,calc(var(--spacing)/2));--_scrollbar_color:var(--scrollbar-color,--alpha(var(--color-accent-500)/40%));--_scrollbar_hover_color:var(--scrollbar-hover-color,--alpha(var(--color-accent-500)/80%));--_scrollbar_bg_color:var(--scrollbar-bg-color,var(--color-bg));.dark &{--_scrollbar_bg_color:var(--scrollbar-bg-color,var(--color-fg))}&::-webkit-scrollbar{height:var(--_scrollbar_width);width:var(--_scrollbar_width)}&::-webkit-scrollbar-corner,&::-webkit-scrollbar-track{background-color:transparent}&::-webkit-scrollbar-thumb,&::-webkit-scrollbar-track{border-radius:var(--_scrollbar_width)}&::-webkit-scrollbar-thumb{background-color:var(--_scrollbar_color);border:var(--_scrollbar_border_width) solid var(--_scrollbar_bg_color)}&::-webkit-scrollbar-thumb:hover{cursor:pointer}&::-webkit-scrollbar-thumb:active,&::-webkit-scrollbar-thumb:hover{background-color:var(--_scrollbar_hover_color);border-radius:var(--_scrollbar_width)}}@utility styled-scrollbar-w-*{--scrollbar-width:--value(integer)}@utility styled-scrollbar-border-w-*{--scrollbar-border-width:--value(integer)}@utility styled-scrollbar-*{--scrollbar-color:--value(--color-*)}@utility styled-scrollbar-bg-*{--scrollbar-bg-color:--value(--color-*)}@utility styled-resizer{--_resizer_width:var(--resizer-width,8px);--_resizer_color:var(--resizer-color,var(--color-neutral-300));.dark &{--_resizer_color:var(--resizer-color,var(--color-neutral-700))}&::-webkit-resizer{border-bottom-color:var(--_resizer_color);border-left-color:transparent;border-right-color:var(--_resizer_color);border-style:solid;border-top-color:transparent;border-width:var(--_resizer_width)}}@utility styled-resizer-w-*{--resizer-width:--value(integer)}@utility styled-resizer-color-*{--resizer-color:--value(--color-*)}@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/build/WitchcraftUiResolver.js

@@ -1,4 +1,4 @@
-const prefixless = ["Icon", "Aria", "TestWrapper"];
+const prefixless = ["Icon", "Aria"];
 export const WitchcraftUiResolver = ({
   prefix = "W",
   filter = () => true

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

@@ -2,15 +2,11 @@
 <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 setup>
+defineOptions({ name: "aria" });
+defineProps({
+  value: { type: String, required: true }
+});
 </script>
 
 <style scoped>

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

@@ -0,0 +1,5 @@
+type __VLS_Props = {
+    value: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/Icon/Icon.vue

@@ -1,39 +1,23 @@
 <template>
 <div
-	class="icon inline-block"
-	v-bind="{...$attrs, class:undefined}"
+	:class="twMerge('icon inline-block', $attrs?.class)"
+	v-bind="{ ...$attrs, class: void 0 }"
 >
 	<slot/>
 </div>
 </template>
 
-<script setup lang="ts">
-import { computed, type HTMLAttributes,useAttrs } from "vue"
-
-const $attrs = useAttrs()
-
-// eslint-disable-next-line no-use-before-define
-const props = defineProps<Props>()
-
-
+<script setup>
+import { computed, useAttrs } from "vue";
+import { twMerge } from "../../utils/twMerge.js";
+defineOptions({
+  name: "icon",
+  inheritAttrs: false
+});
+const $attrs = useAttrs();
+const props = defineProps({});
 </script>
 
-<script lang="ts">
-/**
- * Just a very simple wrapper for wrapping unplugin-icons in an inline-block div so the icon in the slot take's up a normal line height when it's alone.
- *
- * ```vue
- * 		<icon><i-...></icon>
- * ``
- */
-export default {
-	name: "icon",
-}
+<script>
 
-interface Props
-	extends
-	/** @vue-ignore */
-	Partial<Omit<HTMLAttributes, "class">
-	> { }
 </script>
-

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

@@ -0,0 +1,21 @@
+import { type HTMLAttributes } from "vue";
+/**
+ * Just a very simple wrapper for wrapping unplugin-icons in an inline-block div so the icon in the slot take's up a normal line height when it's alone.
+ *
+ * ```vue
+ * 		<icon><i-...></icon>
+ * ``
+ */
+interface Props extends 
+/** @vue-ignore */
+Partial<Omit<HTMLAttributes, "class">> {
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};