@witchcraft/ui 0.2.1-beta.3 → 0.2.2

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "witchcraftUi",
   "configKey": "witchcraftUi",
-  "version": "0.2.1-beta.3",
+  "version": "0.2.2",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -1,17 +1,23 @@
 import { indent, crop } from '@alanscodelog/utils';
-import { createResolver, defineNuxtModule, useLogger, addTemplate, addComponent, addImports, installModule, addTypeTemplate } from '@nuxt/kit';
+import { createResolver, defineNuxtModule, useLogger, addTemplate, addComponent, addImports, addTypeTemplate } from '@nuxt/kit';
 import tailwindcss from '@tailwindcss/vite';
 import { addImportsCustom } from '@witchcraft/nuxt-utils/utils/addImportsCustom';
 import { globFiles } from '@witchcraft/nuxt-utils/utils/globFiles';
 import { defu } from 'defu';
-import fs from 'fs';
 import { themeAsTailwindCss } from 'metamorphosis/tailwind';
+import fs from 'node:fs';
 import IconsResolver from 'unplugin-icons/resolver';
 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 dependencies = {
+	"reka-ui": "^2.5.0",
+	"unplugin-icons": "^22.2.0"};
+const pkg = {
+	dependencies: dependencies};
+
 const knownDirectives = ["vExtractRootEl", "vResizableCols", "vResizeObserver", "vResizableCols"];
 const { resolve, resolvePath } = createResolver(import.meta.url);
 const componentsInfo = globFiles([
@@ -38,6 +44,15 @@ const module = defineNuxtModule({
     mainCssFile: "~/assets/css/tailwind.css",
     _playgroundWorkaround: false
   },
+  moduleDependencies: {
+    "unplugin-icons/nuxt": {
+      version: pkg.dependencies["unplugin-icons"],
+      defaults: unpluginIconViteOptions
+    },
+    "reka-ui/nuxt": {
+      version: pkg.dependencies["reka-ui"]
+    }
+  },
   async setup(options, nuxt) {
     const moduleName = "@witchcraft/ui";
     const logger = useLogger(moduleName, { level: options.debug ? 10 : 0 });
@@ -119,13 +134,14 @@ const module = defineNuxtModule({
         config.optimizeDeps.exclude.push("~icons");
       }
     });
+    nuxt.options.typescript.tsConfig.compilerOptions ??= {};
+    nuxt.options.typescript.tsConfig.compilerOptions.types ??= [];
+    nuxt.options.typescript.tsConfig.compilerOptions.types.push("unplugin-icons/types/vue3");
     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", unpluginIconViteOptions);
-    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/build/WitchcraftUiResolver.d.ts

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

package/dist/runtime/build/generateTheme.js

@@ -1,10 +1,10 @@
 import { themeAsTailwindCss } from "metamorphosis/tailwind";
 import fs from "node:fs";
-import { resolve } from "path";
+import { resolve } from "node:path";
 import { themeConvertionOpts } from "../tailwind/themeConvertionOpts.js";
 import { theme } from "../theme.js";
 const css = themeAsTailwindCss(theme, themeConvertionOpts);
-import url from "url";
+import url from "node: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. */

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

@@ -0,0 +1,5 @@
+type __VLS_Props = {
+    value: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, 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/Aria/Aria.vue

@@ -1,9 +1,11 @@
 <template>
-<div tabindex="0">{{ value }}</div>
+<div tabindex="0">
+	{{ value }}
+</div>
 </template>
 
 <script setup>
-defineOptions({ name: "aria" });
+defineOptions({ name: "Aria" });
 defineProps({
   value: { type: String, required: true }
 });

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

@@ -1,5 +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>;
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, 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.d.vue.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, {}, {}, {}, {}, 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;
+    };
+};

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

@@ -8,14 +8,14 @@
 </template>
 
 <script setup>
-import { computed, useAttrs } from "vue";
+import { useAttrs } from "vue";
 import { twMerge } from "../../utils/twMerge.js";
 defineOptions({
-  name: "icon",
+  name: "Icon",
   inheritAttrs: false
 });
 const $attrs = useAttrs();
-const props = defineProps({});
+defineProps({});
 </script>
 
 <script>

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

@@ -10,7 +10,7 @@ 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>, {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props, {}, {}, {}, {}, 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;

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

@@ -0,0 +1,36 @@
+import { type ButtonHTMLAttributes } from "vue";
+import { type BaseInteractiveProps, type ButtonProps, type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js.js";
+type RealProps = LinkableByIdProps & LabelProps & BaseInteractiveProps & ButtonProps;
+interface Props extends 
+/** @vue-ignore */
+Partial<Omit<ButtonHTMLAttributes, "class" | "color" | "disabled"> & TailwindClassProp & {
+    "aria-label": string;
+}>, RealProps {
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    color: "warning" | "ok" | "danger" | "primary" | "secondary" | false;
+    label: string;
+    disabled: boolean;
+    readonly: boolean;
+    border: boolean;
+    unstyle: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    label?: (props: {
+        id: string;
+        classes: string;
+    }) => any;
+} & {
+    icon?: (props: {}) => any;
+} & {
+    default?: (props: {
+        label: any;
+    }) => any;
+} & {
+    'icon-after'?: (props: {}) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -56,7 +56,6 @@
 			dark:hover:shadow-accent-950/30
 			dark:active:shadow-fg/40
 			dark:active:border-neutral-900
-			dark:bg-neutral-800
 			dark:border-neutral-900
 			dark:disabled:border-neutral-800
 			dark:disabled:bg-neutral-900
@@ -168,8 +167,14 @@
   ...ariaLabel
 }"
 >
-	<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="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 }"
@@ -192,7 +197,7 @@ import { twMerge } from "../../utils/twMerge.js";
 import { getFallbackId } from "../shared/props.js";
 const $attrs = useAttrs();
 defineOptions({
-  name: "lib-button"
+  name: "LibButton"
 });
 const fallbackId = getFallbackId();
 const props = defineProps({

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

@@ -7,7 +7,7 @@ Partial<Omit<ButtonHTMLAttributes, "class" | "color" | "disabled"> & TailwindCla
     "aria-label": string;
 }>, RealProps {
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
     color: "warning" | "ok" | "danger" | "primary" | "secondary" | false;
     label: string;
     disabled: boolean;

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

@@ -0,0 +1,42 @@
+import { type HTMLAttributes, type InputHTMLAttributes } from "vue";
+import { type BaseInteractiveProps, type LabelProps, type LinkableByIdProps, type TailwindClassProp, type WrapperProps } from "../shared/props.js.js";
+type WrapperTypes = Partial<WrapperProps<"label", HTMLAttributes, {
+    /** Tailwind classes. */
+    class?: string;
+}>>;
+type RealProps = LinkableByIdProps & LabelProps & BaseInteractiveProps & {
+    unstyle?: boolean;
+};
+interface Props extends 
+/** @vue-ignore */
+Partial<Omit<InputHTMLAttributes, "class" | "readonly" | "disabled" | "onSumbit"> & TailwindClassProp>, 
+/** @vue-ignore */
+WrapperTypes, RealProps {
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props & {
+    modelValue?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+} & {
+    submit: (val: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<Props & {
+    modelValue?: boolean;
+}> & Readonly<{
+    onSubmit?: ((val: boolean) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    disabled: boolean;
+    readonly: boolean;
+    border: boolean;
+    unstyle: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    left?: (props: {}) => any;
+} & {
+    default?: (props: {}) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -72,17 +72,16 @@
 </template>
 
 <script setup>
-import { ref, useSlots } from "vue";
+import { ref } from "vue";
 import { useDivideAttrs } from "../../composables/useDivideAttrs.js";
 import { usePreHydrationValue } from "../../composables/usePreHydrationValue.js";
 import { twMerge } from "../../utils/twMerge.js";
 import { getFallbackId } from "../shared/props.js";
 defineOptions({
-  name: "lib-checkbox",
+  name: "LibCheckbox",
   inheritAttrs: false
 });
 const $ = useDivideAttrs(["label", "wrapper"]);
-const $slots = useSlots();
 const fallbackId = getFallbackId();
 const props = defineProps({
   id: { type: String, required: false },
@@ -92,7 +91,7 @@ const props = defineProps({
   border: { type: Boolean, required: false, default: true },
   unstyle: { type: Boolean, required: false, default: false }
 });
-const emits = defineEmits(["submit"]);
+defineEmits(["submit"]);
 const el = ref(null);
 const inputEl = ref(null);
 const $value = defineModel("modelValue", { type: Boolean, ...{ default: false } });

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

@@ -15,7 +15,7 @@ WrapperTypes, RealProps {
 }
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props & {
     modelValue?: boolean;
-}, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: boolean) => any;
 } & {
     submit: (val: boolean) => any;

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

@@ -0,0 +1,63 @@
+import { type ButtonHTMLAttributes } from "vue";
+import type { HsvaColor, RgbaColor } from "../../types/index.js.js";
+import { type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js.js";
+type RealProps = LabelProps & LinkableByIdProps & {
+    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;
+    };
+};
+interface Props extends 
+/** @vue-ignore */
+Partial<Omit<ButtonHTMLAttributes, "class"> & TailwindClassProp & {
+    "aria-label": string;
+}>, RealProps {
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props & {
+    modelValue?: RgbaColor;
+    tempValue?: RgbaColor | undefined;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: RgbaColor) => any;
+    "update:tempValue": (value: RgbaColor | undefined) => any;
+} & {
+    cancel: () => any;
+    save: () => any;
+}, string, import("vue").PublicProps, Readonly<Props & {
+    modelValue?: RgbaColor;
+    tempValue?: RgbaColor | undefined;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: RgbaColor) => any) | undefined;
+    onCancel?: (() => any) | undefined;
+    onSave?: (() => any) | undefined;
+    "onUpdate:tempValue"?: ((value: RgbaColor | undefined) => any) | undefined;
+}>, {
+    border: boolean;
+    allowAlpha: boolean;
+    stringPrecision: number;
+    customRepresentation: {
+        fromHsvaToString: (hsva: HsvaColor, includeAlpha: boolean) => string;
+    };
+    copyTransform: (val: HsvaColor, stringVal: string) => any;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {
+        stringColor: any;
+        classes: any;
+    }) => any;
+} & {
+    temp?: (props: {
+        tempStringColor: any;
+        classes: any;
+    }) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/LibColorInput/LibColorInput.vue

@@ -14,7 +14,7 @@
 		<!-- 				 " -->
 		<!-- 	v-extract-root-el="extractEl" -->
 		<!-- > -->
-			
+
 		<!--  -->
 		<lib-button
 			:id="id ?? fallbackId"
@@ -38,14 +38,16 @@
 			@click="togglePopup"
 		>
 			<template #label>
-				<div class="
+				<div
+					class="
 					color-input--swatch-wrapper
 					flex
 					w-full
 				"
 				>
 					<slot v-bind="{ stringColor, classes: swatchClasses }">
-						<div :class="swatchClasses"
+						<div
+							:class="swatchClasses"
 							:style="`background:${stringColor}`"
 						/>
 					</slot>
@@ -54,7 +56,8 @@
 						v-bind="{ tempStringColor, classes: swatchClasses }"
 						name="temp"
 					>
-						<div :class="swatchClasses"
+						<div
+							:class="swatchClasses"
 							:style="`background:${tempStringColor}`"
 						/>
 					</slot>
@@ -63,8 +66,12 @@
 		</lib-button>
 	</template>
 	<template #popup="{ extractEl }">
-		<div class="color-input--popup-wrapper p-5" v-extract-root-el="extractEl">
-			<lib-color-picker v-if="showPopup"
+		<div
+			class="color-input--popup-wrapper p-5"
+			v-extract-root-el="extractEl"
+		>
+			<lib-color-picker
+				v-if="showPopup"
 				:id="id ?? fallbackId"
 				:allow-alpha="allowAlpha"
 				:custom-representation="customRepresentation"
@@ -90,7 +97,7 @@ import LibColorPicker from "../LibColorPicker/LibColorPicker.vue";
 import LibPopup from "../LibPopup/LibPopup.vue";
 import { getFallbackId } from "../shared/props.js";
 defineOptions({
-  name: "lib-color-input"
+  name: "LibColorInput"
 });
 const swatchClasses = `
 	color-input--swatch
@@ -106,7 +113,7 @@ const swatchClasses = `
 `;
 const fallbackId = getFallbackId();
 const t = useInjectedI18n();
-const props = defineProps({
+defineProps({
   label: { type: String, required: false },
   id: { type: String, required: false },
   allowAlpha: { type: Boolean, required: false, default: true },

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

@@ -22,7 +22,7 @@ Partial<Omit<ButtonHTMLAttributes, "class"> & TailwindClassProp & {
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props & {
     modelValue?: RgbaColor;
     tempValue?: RgbaColor | undefined;
-}, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: RgbaColor) => any;
     "update:tempValue": (value: RgbaColor | undefined) => any;
 } & {

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

@@ -0,0 +1,61 @@
+import type { HsvaColor, RgbaColor } from "../../types/index.js.js";
+import { type LabelProps, type LinkableByIdProps } from "../shared/props.js.js";
+type __VLS_Props = LabelProps & LinkableByIdProps & {
+    allowAlpha?: boolean;
+    /**
+     * The precision of the rgba string representation of the color. Defaults to 3. Extra trailing zeros are removed for a prettier number.
+     *
+     * Does not affect the number saved unless the user manually edits the color.
+     *
+     * Ignored if `customRepresentation` is set.
+     */
+    stringPrecision?: number;
+    /** Allows overriding the string representation of the color. Useful for using a different representation than rgba (e.g. hex). The fromStringToHsva part is rarely needed as the colorjs.io library can normally parse the color. Returning undefined signals an error. */
+    customRepresentation?: {
+        fromHsvaToString: (hsva: HsvaColor, includeAlpha: boolean) => string;
+        fromStringToHsva?: (string: string) => HsvaColor | undefined;
+    };
+    border?: boolean;
+    /** Modify what the user copies to the clipboard. */
+    copyTransform?: (val: HsvaColor, stringVal: string) => any;
+    valid?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & {
+    modelValue?: RgbaColor;
+    "tempValue"?: RgbaColor | undefined;
+};
+declare var __VLS_1: {}, __VLS_27: {};
+type __VLS_Slots = {} & {
+    input?: (props: typeof __VLS_1) => any;
+} & {
+    buttons?: (props: typeof __VLS_27) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: RgbaColor) => any;
+    "update:tempValue": (value: RgbaColor | undefined) => any;
+} & {
+    cancel: () => any;
+    save: (val: RgbaColor) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: RgbaColor) => any) | undefined;
+    onCancel?: (() => any) | undefined;
+    onSave?: ((val: RgbaColor) => any) | undefined;
+    "onUpdate:tempValue"?: ((value: RgbaColor | undefined) => any) | undefined;
+}>, {
+    border: boolean;
+    valid: boolean;
+    allowAlpha: boolean;
+    stringPrecision: number;
+    customRepresentation: {
+        fromHsvaToString: (hsva: HsvaColor, includeAlpha: boolean) => string;
+        fromStringToHsva?: (string: string) => HsvaColor | undefined;
+    };
+    copyTransform: (val: HsvaColor, stringVal: string) => any;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/LibColorPicker/LibColorPicker.vue

@@ -114,7 +114,8 @@
 		/>
 	</div>
 	<div class="color-picker--footer flex w-full flex-1 gap-2">
-		<div class=" color-picker--preview-wrapper
+		<div
+			class=" color-picker--preview-wrapper
 				bg-transparency-squares
 				relative
 				aspect-square
@@ -123,7 +124,8 @@
 				shadow-xs
 			"
 		>
-			<div class="
+			<div
+				class="
 					color-picker--footer--preview
 					size-full
 					rounded-full
@@ -144,7 +146,11 @@
 					@input="parseInput"
 					@blur="onBlurFixInvalidValue"
 				/>
-				<lib-button class="color-picker--copy-button" :aria-label="t('copy')" @click="copy(copyTransform?.(localColor.val, localColorString) ?? localColorString)">
+				<lib-button
+					class="color-picker--copy-button"
+					:aria-label="t('copy')"
+					@click="copy(copyTransform?.(localColor.val, localColorString) ?? localColorString)"
+				>
 					<icon><i-fa6-regular-copy/></icon>
 				</lib-button>
 			</slot>
@@ -171,7 +177,6 @@
 
 <script setup>
 import { castType } from "@alanscodelog/utils/castType";
-import { clampNumber } from "@alanscodelog/utils/clampNumber";
 import { isArray } from "@alanscodelog/utils/isArray";
 import { unreachable } from "@alanscodelog/utils/unreachable";
 import Color from "colorjs.io";
@@ -183,13 +188,12 @@ import IFa6RegularCopy from "~icons/fa-regular/copy";
 import { useInjectedI18n } from "../../composables/useInjectedI18n.js";
 import { copy } from "../../helpers/copy.js";
 import { twMerge } from "../../utils/twMerge.js";
-import aria from "../Aria/Aria.vue";
 import Icon from "../Icon/Icon.vue";
 import LibButton from "../LibButton/LibButton.vue";
 import LibSimpleInput from "../LibSimpleInput/LibSimpleInput.vue";
 import { getFallbackId } from "../shared/props.js";
 defineOptions({
-  name: "lib-color-picker"
+  name: "LibColorPicker"
 });
 const $attrs = useAttrs();
 const t = useInjectedI18n();

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

@@ -30,7 +30,7 @@ type __VLS_Slots = {} & {
 } & {
     buttons?: (props: typeof __VLS_27) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: RgbaColor) => any;
     "update:tempValue": (value: RgbaColor | undefined) => any;
 } & {

package/dist/runtime/components/LibColorPicker/utils/truncate.js

@@ -1,5 +1,5 @@
 export function truncate(val, precision) {
   const str = val.toFixed(precision);
-  const float = parseFloat(str);
+  const float = Number.parseFloat(str);
   return float.toString();
 }

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

@@ -0,0 +1,22 @@
+import { type ButtonHTMLAttributes } from "vue";
+import type { TailwindClassProp } from "../shared/props.js.js";
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:darkMode": (value: boolean) => any;
+    "update:darkModeState": (value: "system" | "dark" | "light") => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    "onUpdate:darkMode"?: ((value: boolean) => any) | undefined;
+    "onUpdate:darkModeState"?: ((value: "system" | "dark" | "light") => any) | undefined;
+}>, {
+    showLabel: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;
+type RealProps = {
+    showLabel?: boolean;
+};
+interface Props extends 
+/** @vue-ignore */
+Partial<Omit<ButtonHTMLAttributes, "class" | "color" | "disabled"> & TailwindClassProp & {
+    disabled?: boolean;
+    unstyle?: boolean;
+}>, RealProps {
+}