@witchcraft/ui 0.3.26 → 0.4.0-beta.10

package/README.md

@@ -55,23 +55,6 @@ To make it easier to style parts of components or override behavior, some compon
 
 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-simple-input-deprecated>
-	<template #input="slotProps">
-		<lib-simple-input
-			:class="'completely custom styles'"
-			v-bind="slotProps"
-		></lib-simple-input>
-	</template>
-</lib-simple-input>
-
-```
 
 # Other
 
@@ -167,56 +150,66 @@ 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 components.
+Props and attribute typing used to have a lot of issues with vue. It's improved a bit. A typical component looks like this:
 
-Here is an example of the needed code for props to work correctly:
 ```vue
+<template>
+<div
+	:class="twMerge(`
+		our-classes
+	`, ($attrs as any).class)"
+	v-bind="{ ...$attrs, class: undefined }"
+>
+	...
+</div>
+</template>
 <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"
-
-// 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 will be passed as an attr
-		class?:string
-	}>,
-	/** @vue-ignore */
-	RealProps
-{ }
-</script>
+import type { BaseInteractiveProps } from "../../types/index.js"
 
-<script lang="ts" setup>
-const props = withDefaults(defineProps<Props>(), {
-	id: "",
-	unstyle: false, disabled:false, readonly:false, border:true,
-})
+// only if it makes sense, otherwise prefer a prop (___Attrs for attributes, ___Props if it wraps reka-ui props)
+// we do this regardless of whether we pass to the root or not (since we never allow non-tailwind classes)
 const $attrs = useAttrs()
-</script>
-```
+const props = withDefaults(defineProps<
+	& BaseInteractiveProps
+	& {
+		// if we need an id for hydration or some internal aria connection
+		id?: string
+		// if we allow setting a label via text
+		label?: string
+		// note we omitted it above, will be available via props.disabled
+		disabled?: boolean
+		// if we just need to pass "attributes" to the root
+		inputAttrs?: Omit<InputHTMLAttributes, "class"> & TailwindClassProp
+		// if we need to pass, to for example, a reka-ui Content component
+		contentProps?: PopoverContentProps & EmitsToProps<DialogContentEmits> & Omit<HTMLAttributes, "class"> & TailwindClassProp
+	}
+	// the parts under the ignore type the $attrs and are NOT available on props.*
+	// they must be accessed via $attrs and are not reactive
+	// if we need to change the type or need access to the prop via props.* we can omit it here
+	& /** @vue-ignore */ Omit<InputHTMLAttributes, "class" | "disabled">
+	& /** @vue-ignore */ TailwindClassProp
+>(), {
+	label: "",
+	// the defaults for BaseInteractiveProps that are not false by default, and no, they can't be spread
+	// see https://github.com/nuxt/module-builder/issues/649
+	border: true
+})
+// uses useId if id is not set so we have an id if we need it for hydration
+const finalId = useFallbackId(props)
+const modelValue = defineModel<string>({ required: false, default: "" })
+// use for inputs or elements where it's highly likely the user can start setting a value before hydration
+usePreHydrationValue(finalId, modelValue)
 
-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.
+</script>
+<script lang="ts">
+/**
+ * If the component requires general docs, they should be written here over the export default.
+ */
+export default {
+	name: "WComponentName"
+	// https://v3.vuejs.org/guide/typescript-support.html#annotating-props
+}
+</script>```
 
 Related Links:
 - https://github.com/vuejs/rfcs/discussions/397

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "witchcraftUi",
   "configKey": "witchcraftUi",
-  "version": "0.3.26",
+  "version": "0.4.0-beta.10",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -19,7 +19,7 @@ const componentsInfo = globFiles([
   `!**/Template/**.vue`
 ], [], (filepath, name) => ({
   originalName: name,
-  name: name.startsWith("Lib") ? name.replace("Lib", "PREFIX") : `PREFIX${name}`,
+  name: name.startsWith("W") ? name.replace("W", "PREFIX") : `PREFIX${name}`,
   filepath
 }));
 const module$1 = defineNuxtModule({

package/dist/runtime/assets/animations.css

@@ -1 +1 @@
-@utility animate-from-*{--animate-from:--value([length],[percentage]);--animate-from:calc(var(--spacing) * --value(integer))}@utility -animate-from-*{--animate-from:--value([length],[percentage]);--animate-from:calc(var(--spacing) * -1 * --value(integer))}@theme{--animate-blinkInf:blink 1s linear infinite;@keyframes blink{0%{opacity:0}25%{opacity:1}75%{opacity:1}to{opacity:0}}--animate-slideBgInf:slide-bg 10s ease-in-out linear-infinite;@keyframes slide{0%{background-position:0}to{background-position:100%}}--animate-hide:hide 500ms ease-in;@keyframes hide{0%{opacity:1}to{opacity:0}}--animate-slideInLeft:slideInLeft 500ms cubic-bezier(0.16,1,0.3,1);@keyframes slideInLeft{0%{opacity:0;transform:translateX(var(--animate-from,100%))}to{opacity:1;transform:translateX(0)}}--animate-slideInRight:slideInLeft 500ms cubic-bezier(0.16,1,0.3,1);@keyframes slideInRight{0%{opacity:0;transform:translateX(var(--animate-from,-100%))}to{opacity:1;transform:translateX(0)}}--animate-slideInUp:slideInUp 500ms cubic-bezier(0.16,1,0.3,1);@keyframes slideInUp{0%{opacity:0;transform:translateY(var(--animate-from,100%))}to{opacity:1;transform:translateY(0)}}--animate-slideInDown:slideInDown 500ms cubic-bezier(0.16,1,0.3,1);@keyframes slideInDown{0%{opacity:0;transform:translateY(var(--animate-from,-100%))}to{opacity:1;transform:translateY(0)}}--animate-overlayShow:overlayShow 500ms cubic-bezier(0.16,1,0.3,1);@keyframes overlayShow{0%{opacity:0}to{opacity:1}}--animate-contentShow:contentShow 500ms cubic-bezier(0.16,1,0.3,1);@keyframes contentShow{0%{opacity:0;transform:translateY(-10%) scale(.96)}to{opacity:1;transform:scale(1)}}}
+@utility animate-from-*{--animate-from:--value([length],[percentage]);--animate-from:calc(var(--spacing) * --value(integer))}@utility -animate-from-*{--animate-from:--value([length],[percentage]);--animate-from:calc(var(--spacing) * -1 * --value(integer))}@theme{--animate-blinkInf:blink 1s linear infinite;@keyframes blink{0%{opacity:0}25%{opacity:1}75%{opacity:1}to{opacity:0}}--animate-slideBgInf:slideBg 10s ease-in-out linear-infinite;@keyframes slideBg{0%{background-position:0}to{background-position:100%}}--animate-hide:hide 500ms ease-in;@keyframes hide{0%{opacity:1}to{opacity:0}}--animate-slideInLeft:slideInLeft 500ms cubic-bezier(0.16,1,0.3,1);@keyframes slideInLeft{0%{opacity:0;transform:translateX(var(--animate-from,100%))}to{opacity:1;transform:translateX(0)}}--animate-slideInRight:slideInRight 500ms cubic-bezier(0.16,1,0.3,1);@keyframes slideInRight{0%{opacity:0;transform:translateX(var(--animate-from,-100%))}to{opacity:1;transform:translateX(0)}}--animate-slideInUp:slideInUp 500ms cubic-bezier(0.16,1,0.3,1);@keyframes slideInUp{0%{opacity:0;transform:translateY(var(--animate-from,100%))}to{opacity:1;transform:translateY(0)}}--animate-slideInDown:slideInDown 500ms cubic-bezier(0.16,1,0.3,1);@keyframes slideInDown{0%{opacity:0;transform:translateY(var(--animate-from,-100%))}to{opacity:1;transform:translateY(0)}}--animate-overlayShow:overlayShow 500ms cubic-bezier(0.16,1,0.3,1);@keyframes overlayShow{0%{opacity:0}to{opacity:1}}--animate-contentShow:contentShow 500ms cubic-bezier(0.16,1,0.3,1);@keyframes contentShow{0%{opacity:0;transform:translateY(-10%) scale(.96)}to{opacity:1;transform:scale(1)}}}

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

@@ -25,6 +25,8 @@
 		"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.aria.go-to-first-page": "Go to first page",
+		"pagination.aria.go-to-last-page": "Go to last page",
 		"pagination.previous-page": "Prev",
 		"pagination.next-page": "Next",
 		"recorder.recording": "Recording",

package/dist/runtime/build/WitchcraftUiResolver.js

@@ -1,11 +1,11 @@
-const prefixless = ["Icon", "Aria"];
+const prefixless = ["Icon"];
 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}`;
+    const filename = prefixless.includes(n) ? n : `W${n}`;
     if (!filter(n)) {
       return void 0;
     }

package/dist/runtime/components/TestControls/TestControls.vue

@@ -1,16 +1,16 @@
 <template>
-<!-- Width 100% + 2xmargin in combination with the margins in LibRoot is a bit of a hack so that it looks like there's padding around the content in test mode (for storybook). We can't just absolutely position these controls or they make the container scroll. -->
+<!-- Width 100% + 2xmargin in combination with the margins in WRoot is a bit of a hack so that it looks like there's padding around the content in test mode (for storybook). We can't just absolutely position these controls or they make the container scroll. -->
 <div class="test-controls flex gap-2 p-1 pb-10 -ml-10 w-[calc(100%_+_var(--spacing)*20)]">
 	<div class="flex-grow"/>
 	<div class="outline-indicator">
 		{{ showOutline ? "Outline Enabled" : "Outline Disabled" }}
 	</div>
-	<lib-dark-mode-switcher/>
+	<WDarkModeSwitcher/>
 </div>
 </template>
 
 <script setup>
-import LibDarkModeSwitcher from "../LibDarkModeSwitcher/LibDarkModeSwitcher.vue";
+import WDarkModeSwitcher from "../WDarkModeSwitcher/WDarkModeSwitcher.vue";
 defineOptions({ name: "TestControls" });
 defineProps({
   showOutline: { type: Boolean, required: true }

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

@@ -0,0 +1,34 @@
+import { type ButtonHTMLAttributes } from "vue";
+import type { BaseInteractiveProps, TailwindClassProp } from "../../types/index.js";
+type __VLS_Props = BaseInteractiveProps & {
+    label?: string;
+    border?: boolean;
+    color?: "warning" | "ok" | "danger" | "primary" | "secondary" | false;
+} & /** @vue-ignore */ Omit<ButtonHTMLAttributes, "class" | "color"> & /** @vue-ignore */ TailwindClassProp;
+declare var __VLS_1: {
+    classes: string;
+}, __VLS_3: {}, __VLS_5: {
+    label: string;
+}, __VLS_7: {};
+type __VLS_Slots = {} & {
+    label?: (props: typeof __VLS_1) => any;
+} & {
+    icon?: (props: typeof __VLS_3) => any;
+} & {
+    default?: (props: typeof __VLS_5) => any;
+} & {
+    'icon-after'?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    color: "warning" | "ok" | "danger" | "primary" | "secondary" | false;
+    border: boolean;
+    label: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/{LibButton/LibButton.vue → WButton/WButton.vue}

@@ -1,7 +1,6 @@
 <template>
 <button
-	:id="id ?? fallbackId"
-	:class="!$attrs.unstyle && twMerge(
+	:class="!unstyle && twMerge(
   `
 		button
 		flex
@@ -27,7 +26,8 @@
   border && `
 			transition-all
 			bg-neutral-100
-			dark:bg-neutral-800
+			dark:tint-neutral-800/10
+			dark:bg-(--mix)
 			shadow-[0_1px_1px_0]
 			shadow-neutral-950/20
 			hover:shadow-[0_1px_3px_0]
@@ -42,6 +42,7 @@
 			after:shadow-[0_1px_0_0_inset]
 			after:shadow-bg/20
 			hover:after:shadow-bg/60
+			disabled:after:hidden
 			dark:after:shadow-bg/10
 			dark:hover:after:shadow-bg/50
 			after:pointer-events-none
@@ -50,15 +51,16 @@
 			active:shadow-fg/20
 			active:border-transparent
 			border
-			border-neutral-300
+			border-black/10
 			disabled:border-neutral-200
-			disabled:bg-neutral-50
+			disabled:bg-neutral-100
 			dark:hover:shadow-neutral-950/70
 			dark:active:shadow-fg/40
 			dark:active:border-neutral-900
-			dark:border-neutral-900
+			dark:border-black/50
 			dark:disabled:border-neutral-800
-			dark:disabled:bg-neutral-900
+			dark:disabled:bg-(--mix)
+			dark:disabled:shade-neutral-900/10
 		`,
   border && (!color || color === `secondary`) && `
 			after:shadow-bg/90
@@ -154,26 +156,24 @@
 		`,
   $attrs?.class
 )"
-	:type="$attrs.type"
+	:type="$attrs?.type || 'button'"
 	:tabindex="0"
 	:disabled="disabled"
 	:data-border="border"
 	:data-color="color"
-	:aria-disabled="disabled"
 	v-bind="{
-  ...autoTitle,
   ...$attrs,
-  class: void 0,
-  ...ariaLabel
+  class: void 0
 }"
 >
 	<slot
 		name="label"
-		v-bind="{ id: `label-${id ?? fallbackId}`, classes: 'button--label pointer-events-none flex flex-1 items-center justify-center gap-1' }"
+		v-bind="{
+  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"
+		<div
+			:class="!unstyle && 'button--label pointer-events-none flex flex-1 items-center justify-center gap-1'"
 		>
 			<slot name="icon"/>
 			<slot
@@ -184,38 +184,26 @@
 				</span>
 			</slot>
 			<slot name="icon-after"/>
-		</label>
+		</div>
 	</slot>
 </button>
 </template>
 
 <script setup>
 import { isBlank } from "@alanscodelog/utils/isBlank";
-import { computed, useAttrs } from "vue";
-import { useAriaLabel } from "../../composables/useAriaLabel.js";
+import { useAttrs } from "vue";
 import { twMerge } from "../../utils/twMerge.js";
-import { getFallbackId } from "../shared/props.js";
 const $attrs = useAttrs();
 defineOptions({
-  name: "LibButton"
+  name: "WButton",
+  inheritAttrs: false
 });
-const fallbackId = getFallbackId();
-const props = defineProps({
-  id: { type: String, required: false },
-  label: { type: String, required: false, default: "" },
-  disabled: { type: Boolean, required: false, default: false },
-  readonly: { type: Boolean, required: false, default: false },
+defineProps({
+  disabled: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
   border: { type: Boolean, required: false, default: true },
-  unstyle: { type: Boolean, required: false, default: false },
-  color: { type: [String, Boolean], required: false, default: false },
-  autoTitleFromAria: { type: Boolean, required: false }
+  unstyle: { type: Boolean, required: false },
+  label: { type: String, required: false, default: "" },
+  color: { type: [String, Boolean], required: false, default: false }
 });
-const ariaLabel = useAriaLabel(props, fallbackId);
-const autoTitle = computed(() => ({
-  title: props.autoTitleFromAria ? $attrs["aria-label"] ?? props.label : void 0
-}));
-</script>
-
-<script>
-
 </script>

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

@@ -0,0 +1,34 @@
+import { type ButtonHTMLAttributes } from "vue";
+import type { BaseInteractiveProps, TailwindClassProp } from "../../types/index.js";
+type __VLS_Props = BaseInteractiveProps & {
+    label?: string;
+    border?: boolean;
+    color?: "warning" | "ok" | "danger" | "primary" | "secondary" | false;
+} & /** @vue-ignore */ Omit<ButtonHTMLAttributes, "class" | "color"> & /** @vue-ignore */ TailwindClassProp;
+declare var __VLS_1: {
+    classes: string;
+}, __VLS_3: {}, __VLS_5: {
+    label: string;
+}, __VLS_7: {};
+type __VLS_Slots = {} & {
+    label?: (props: typeof __VLS_1) => any;
+} & {
+    icon?: (props: typeof __VLS_3) => any;
+} & {
+    default?: (props: typeof __VLS_5) => any;
+} & {
+    'icon-after'?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    color: "warning" | "ok" | "danger" | "primary" | "secondary" | false;
+    border: boolean;
+    label: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,33 @@
+import type { HTMLAttributes, InputHTMLAttributes } from "vue";
+import type { BaseInteractiveProps, TailwindClassProp } from "../../types/index.js";
+type __VLS_Props = BaseInteractiveProps & {
+    id?: string;
+    label?: string;
+    labelAttrs?: Omit<HTMLAttributes, "class"> & TailwindClassProp;
+    wrapperAttrs?: Omit<HTMLAttributes, "class"> & TailwindClassProp;
+} & /** @vue-ignore */ Omit<InputHTMLAttributes, "class" | "readonly" | "disabled" | "onSumbit" | "autocomplete"> & /** @vue-ignore */ TailwindClassProp;
+type __VLS_ModelProps = {
+    "modelValue"?: boolean | "indeterminate";
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_1: {}, __VLS_26: {};
+type __VLS_Slots = {} & {
+    left?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_26) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean | "indeterminate") => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean | "indeterminate") => any) | undefined;
+}>, {
+    border: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/WCheckbox/WCheckbox.vue

@@ -0,0 +1,110 @@
+<template>
+<div
+	:class="twMerge(
+  `
+		checkbox--wrapper
+		flex
+		items-center
+		gap-1
+	`,
+  (disabled || readonly) && `
+			cursor-not-allowed
+			text-neutral-500
+		`,
+  wrapperAttrs?.class
+)"
+	v-bind="{ ...wrapperAttrs, class: void 0 }"
+	ref="el"
+>
+	<slot name="left"/>
+	<label
+		:class="twMerge(
+  `
+			checkbox--label
+			flex
+			items-center
+			gap-1
+		`,
+  labelAttrs?.class
+)"
+		v-bind="{ ...labelAttrs, class: void 0 }"
+	>
+		<CheckboxRoot
+			:id="finalId"
+			:disabled="disabled || readonly"
+			:class="!unstyle && twMerge(
+  `
+				checkbox
+				flex
+				items-center
+				justify-center
+				focus-outline-no-offset
+				m-0
+				h-[1.2em]
+				w-[1.2em]
+				aspect-square
+				bg-neutral-500/10
+				text-white
+				dark:text-white
+				border
+				border-neutral-500
+				data-[state=checked]:border-accent-800/50
+				data-[state=checked]:bg-accent-500
+				data-[state=checked]:shadow-2xs
+				data-[state=checked]:shadow-black/20
+				data-[state=unchecked]:inset-shadow-2xs
+				data-[state=unchecked]:inset-shadow-black/20
+				focus:border-accent-600
+				rounded-sm
+				relative
+				transition-colors
+				dark:disabled:bg-neutral-800
+				cursor-pointer
+				disabled:text-neutral-500
+				disabled:bg-neutral-500/50
+				disabled:cursor-not-allowed
+				disabled:data-[state=checked]:border-neutral-500
+			`,
+  $attrs?.class
+)"
+			v-bind="{ ...$attrs, class: void 0 }"
+
+			v-model="modelValue"
+		>
+			<CheckboxIndicator class="checkbox--indicator">
+				<WIcon class="scale-110 mt-[2px] ml-[0.5px] [&_path]:stroke-3"><i-lucide-check/></WIcon>
+			</CheckboxIndicator>
+		</CheckboxRoot>
+
+		<slot/> {{ label }}
+	</label>
+</div>
+</template>
+
+<script setup>
+import { CheckboxIndicator, CheckboxRoot } from "reka-ui";
+import { useAttrs } from "vue";
+import ILucideCheck from "~icons/lucide/check";
+import { useFallbackId } from "../../composables/useFallbackId.js";
+import { usePreHydrationValue } from "../../composables/usePreHydrationValue.js";
+import { twMerge } from "../../utils/twMerge.js";
+import WIcon from "../WIcon/WIcon.vue";
+const $attrs = useAttrs();
+defineOptions({
+  name: "WCheckbox",
+  inheritAttrs: false
+});
+const props = defineProps({
+  disabled: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
+  border: { type: Boolean, required: false, default: true },
+  unstyle: { type: Boolean, required: false },
+  id: { type: String, required: false },
+  label: { type: String, required: false },
+  labelAttrs: { type: Object, required: false },
+  wrapperAttrs: { type: Object, required: false }
+});
+const modelValue = defineModel("modelValue", { type: [Boolean, String], ...{ default: false } });
+const finalId = useFallbackId(props);
+usePreHydrationValue(finalId, modelValue);
+</script>

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

@@ -0,0 +1,33 @@
+import type { HTMLAttributes, InputHTMLAttributes } from "vue";
+import type { BaseInteractiveProps, TailwindClassProp } from "../../types/index.js";
+type __VLS_Props = BaseInteractiveProps & {
+    id?: string;
+    label?: string;
+    labelAttrs?: Omit<HTMLAttributes, "class"> & TailwindClassProp;
+    wrapperAttrs?: Omit<HTMLAttributes, "class"> & TailwindClassProp;
+} & /** @vue-ignore */ Omit<InputHTMLAttributes, "class" | "readonly" | "disabled" | "onSumbit" | "autocomplete"> & /** @vue-ignore */ TailwindClassProp;
+type __VLS_ModelProps = {
+    "modelValue"?: boolean | "indeterminate";
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_1: {}, __VLS_26: {};
+type __VLS_Slots = {} & {
+    left?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_26) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean | "indeterminate") => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean | "indeterminate") => any) | undefined;
+}>, {
+    border: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,45 @@
+import type { DialogRootEmits, PopoverRootProps } from "reka-ui";
+import { type ButtonHTMLAttributes, type EmitsToProps, type HTMLAttributes } from "vue";
+import type { HsvaColor, RgbaColor, TailwindClassProp } from "../../types/index.js";
+type __VLS_Props = {
+    id?: string;
+    label?: string;
+    allowAlpha?: boolean;
+    border?: boolean;
+    /** See ColorPicker.copyTransform */
+    copyTransform?: (val: HsvaColor, stringVal: string) => any;
+    /** See ColorPicker.allowAlpha */
+    stringPrecision?: number;
+    /** See ColorPicker.customRepresentation */
+    customRepresentation?: {
+        fromHsvaToString: (hsva: HsvaColor, includeAlpha: boolean) => string;
+    };
+    rootProps?: PopoverRootProps & EmitsToProps<DialogRootEmits> & Omit<HTMLAttributes, "class"> & TailwindClassProp;
+} & /** @vue-ignore */ Omit<ButtonHTMLAttributes, "class"> & /** @vue-ignore */ TailwindClassProp;
+type __VLS_ModelProps = {
+    modelValue?: RgbaColor;
+    "tempValue"?: RgbaColor | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: RgbaColor) => any;
+    "update:tempValue": (value: RgbaColor | undefined) => any;
+} & {
+    save: () => any;
+    cancel: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: RgbaColor) => any) | undefined;
+    onSave?: (() => any) | undefined;
+    onCancel?: (() => any) | undefined;
+    "onUpdate:tempValue"?: ((value: RgbaColor | undefined) => any) | undefined;
+}>, {
+    border: boolean;
+    allowAlpha: boolean;
+    copyTransform: (val: HsvaColor, stringVal: string) => any;
+    stringPrecision: number;
+    customRepresentation: {
+        fromHsvaToString: (hsva: HsvaColor, includeAlpha: boolean) => string;
+    };
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;