@witchcraft/ui 0.0.1 → 0.1.0

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.d.ts

@@ -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.0",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
-    "unbuild": "3.5.0"
+    "unbuild": "3.6.0"
   }
 }

package/dist/module.mjs

@@ -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/Icon/Icon.vue

@@ -1,6 +1,6 @@
 <template>
 <div
-	class="icon inline-block"
+	:class="twMerge('icon inline-block', $attrs?.class)"
 	v-bind="{...$attrs, class:undefined}"
 >
 	<slot/>
@@ -10,7 +10,15 @@
 <script setup lang="ts">
 import { computed, type HTMLAttributes,useAttrs } from "vue"
 
-const $attrs = useAttrs()
+import { twMerge } from "../../utils/twMerge.js"
+
+defineOptions({
+	name: "icon",
+	inheritAttrs: false,
+})
+
+
+const $attrs = useAttrs() as any
 
 // eslint-disable-next-line no-use-before-define
 const props = defineProps<Props>()
@@ -26,9 +34,6 @@ const props = defineProps<Props>()
  * 		<icon><i-...></icon>
  * ``
  */
-export default {
-	name: "icon",
-}
 
 interface Props
 	extends

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

@@ -2,26 +2,26 @@
 <button
 	:id="id ?? fallbackId"
 	:class="!($attrs as any).unstyle && twMerge(`
-			button
-			flex
-			cursor-pointer
-			items-center
-			justify-center
-			rounded-sm
-			px-1
-			hover:cursor-pointer
-			[&:hover_*]:cursor-pointer
-			focus-outline
-			disabled:shadow-none
-			disabled:text-neutral-500
-			disabled:cursor-default
-			text-fg
-			hover:text-accent-700
-			dark:text-bg
-			dark:hover:text-accent-500
-			dark:disabled:text-neutral-500
-			dark:disabled:hover:text-neutral-500
-		`,
+		button
+		flex
+		cursor-pointer
+		items-center
+		justify-center
+		rounded-sm
+		px-1
+		hover:cursor-pointer
+		[&:hover_*]:cursor-pointer
+		focus-outline
+		disabled:shadow-none
+		disabled:text-neutral-500
+		disabled:cursor-default
+		text-fg
+		hover:text-accent-700
+		dark:text-bg
+		dark:hover:text-accent-500
+		dark:disabled:text-neutral-500
+		dark:disabled:hover:text-neutral-500
+	`,
 		!color && `active:text-neutral-800` /* todo for colors */,
 		border && `
 			transition-all
@@ -31,11 +31,11 @@
 			shadow-neutral-950/20
 			hover:shadow-[0_1px_3px_0]
 			hover:shadow-neutral-950/30
-			hover:border-neutral-300
-
+			hover:border-neutral-200
+			dark:hover:border-neutral-800
 			relative
 			after:absolute
-			after:rounded-sm
+			after:rounded-xs
 			after:inset-0
 			after:content
 			after:shadow-[0_1px_0_0_inset]
@@ -45,15 +45,13 @@
 			dark:hover:after:shadow-bg/50
 			after:pointer-events-none
 			after:mix-blend-overlay
-
-			active:shadow-inner
+			active:inset-shadow
 			active:shadow-fg/20
 			active:border-transparent
 			border
-			border-neutral-400
+			border-neutral-300
 			disabled:border-neutral-200
 			disabled:bg-neutral-50
-
 			dark:hover:shadow-accent-950/30
 			dark:active:shadow-fg/40
 			dark:active:border-neutral-900
@@ -156,7 +154,7 @@
 		`,
 		($attrs as any)?.class
 	)"
-	:type="$attrs.type as any ?? 'submit'"
+	:type="$attrs.type as any"
 	:tabindex="0"
 	:disabled="disabled"
 	:data-border="border"
@@ -169,17 +167,19 @@
 		...ariaLabel,
 	}"
 >
-	<label :id="`label-${id ?? fallbackId}`" class="label pointer-events-none flex flex-1 items-center justify-center gap-1">
-		<slot name="icon"/>
-		<slot
-			v-bind="{ label}"
-		>
-			<span v-if="label && !isBlank(label!)">
-				{{ label }}
-			</span>
-		</slot>
-		<slot name="icon-after"/>
-	</label>
+	<slot name="label" v-bind="{id:`label-${id ?? fallbackId}`, classes:'button--label pointer-events-none flex flex-1 items-center justify-center gap-1'}">
+		<label :id="`label-${id ?? fallbackId}`" class="button--label pointer-events-none flex flex-1 items-center justify-center gap-1">
+			<slot name="icon"/>
+			<slot
+				v-bind="{ label}"
+			>
+				<span v-if="label && !isBlank(label!)">
+					{{ label }}
+				</span>
+			</slot>
+			<slot name="icon-after"/>
+		</label>
+	</slot>
 </button>
 </template>
 
@@ -193,7 +193,7 @@ import { type ButtonHTMLAttributes,computed, type HTMLAttributes, type PropType,
 import { useAriaLabel } from "../../composables/useAriaLabel.js"
 import { useDivideAttrs } from "../../composables/useDivideAttrs.js"
 import { twMerge } from "../../utils/twMerge.js"
-import { type BaseInteractiveProps, baseInteractiveProps, baseInteractivePropsDefaults, getFallbackId,type LabelProps, type LinkableByIdProps, type TailwindClassProp, type WrapperProps } from "../shared/props.js"
+import { type BaseInteractiveProps, baseInteractiveProps, baseInteractivePropsDefaults, type ButtonProps,getFallbackId, type LabelProps, type LinkableByIdProps, type TailwindClassProp, type WrapperProps } from "../shared/props.js"
 
 
 const $attrs = useAttrs()
@@ -227,12 +227,7 @@ type RealProps =
 	& LinkableByIdProps
 	& LabelProps
 	& BaseInteractiveProps
-	& {
-		border?: boolean
-		color?: "warning" | "ok" | "danger" | "primary" | "secondary" | false
-		label?: string
-		autoTitleFromAria?: boolean
-	}
+	& ButtonProps
 
 interface Props
 	extends

package/dist/runtime/components/LibCheckbox/LibCheckbox.vue

@@ -1,6 +1,7 @@
 <template>
 <div
 	:class="twMerge(`
+		checkbox--wrapper
 		flex
 		items-center
 		gap-1
@@ -12,8 +13,8 @@
 >
 	<slot name="left"/>
 	<label
-		class="flex items-center gap-1"
 		:class="twMerge(`
+			checkbox--label
 			flex
 			items-center
 			gap-1
@@ -26,6 +27,7 @@
 		<input
 			:id="id ?? fallbackId"
 			:class="!($attrs as any).unstyle && twMerge(`
+				checkbox
 				focus-outline-no-offset
 				m-0
 				p-[0.4em]
@@ -33,7 +35,8 @@
 				dark:bg-fg
 				appearance-none
 				border
-				border-accent-600
+				border-neutral-500
+				focus:border-accent-600
 				rounded-sm
 				aspect-square
 				relative
@@ -71,6 +74,7 @@ import type { MakeRequired } from "@alanscodelog/utils/types"
 import { computed, type HTMLAttributes, type InputHTMLAttributes,type PropType, ref, useAttrs, useSlots } from "vue"
 
 import { useDivideAttrs } from "../../composables/useDivideAttrs.js"
+import { usePreHydrationValue } from "../../composables/usePreHydrationValue.js"
 import { twMerge } from "../../utils/twMerge.js"
 import { type BaseInteractiveProps, baseInteractivePropsDefaults, getFallbackId,type LabelProps, type LinkableByIdProps, type TailwindClassProp, type WrapperProps } from "../shared/props.js"
 
@@ -99,7 +103,7 @@ const el = ref<null | HTMLElement>(null)
 const inputEl = ref<null | HTMLElement>(null)
 const $value = defineModel<boolean>("modelValue", { default: false })
 
-
+usePreHydrationValue(props.id ?? fallbackId, $value)
 </script>
 
 <script lang="ts">