@witchcraft/ui 0.4.0 → 0.4.2

package/src/runtime/helpers/NotificationHandler.ts

@@ -5,7 +5,7 @@ import { indent } from "@alanscodelog/utils/indent"
 import { isBlank } from "@alanscodelog/utils/isBlank"
 import { pretty } from "@alanscodelog/utils/pretty"
 import { setReadOnly } from "@alanscodelog/utils/setReadOnly"
-import { type Reactive, reactive } from "vue"
+import { type Component, markRaw, type Reactive, reactive } from "vue"
 
 export class NotificationHandler<
 	TRawEntry extends RawNotificationEntry<any, any> = RawNotificationEntry<any, any>,
@@ -71,12 +71,6 @@ export class NotificationHandler<
 					`)
 			}
 		}
-		if (entry.timeout !== undefined && !entry.cancellable) {
-			throw new Error(
-				crop`Cannot timeout notification that is not cancellable:
-					${indent(pretty(entry), 5)}
-					`)
-		}
 		if (entry.timeout !== undefined && entry.requiresAction) {
 			throw new Error(
 				crop`Cannot timeout notification that requires action:
@@ -97,8 +91,8 @@ export class NotificationHandler<
 			requiresAction: false,
 			options: ["Ok", "Cancel"],
 			default: "Ok",
-			cancellable: rawEntry.cancellable,
 			...rawEntry,
+			component: rawEntry.component && typeof rawEntry.component !== "string" ? markRaw(rawEntry.component) : undefined,
 			dangerous: rawEntry.dangerous ?? [],
 			timeout: rawEntry.timeout === true
 				? this.timeout
@@ -177,7 +171,11 @@ export class NotificationHandler<
 		const remaining = notification.timeout - notification._timer.elapsedBeforePause
 		clearTimeout(notification._timer.id)
 		notification._timer.id = setTimeout(() => {
-			notification.resolve(notification.cancellable)
+			if (notification.cancellable) {
+				notification.resolve(notification.cancellable)
+			} else {
+				notification.resolve(notification.default)
+			}
 		}, remaining)
 	}
 
@@ -211,21 +209,42 @@ export type RawNotificationEntry<
 	TOptions extends string[] = ["Ok", "Cancel"],
 	TCancellable extends boolean | TOptions[number] = "Cancel"
 > = {
-	message: string
 	title?: string
 	code?: string
 	/** @default ["Ok", "Cancel"] */
 	options?: TOptions
 	/** @default false */
 	requiresAction?: boolean
+	/**
+	 *  If true or a string (the cancel option) ensures the option exists and that is the "default" cancel action when a notification is dismissed in some manner that is not clicking one of the options (escaped, background click, etc.).
+	 *
+	 * This also enables cancelling via those secondary methods, otherwise the notification won't allow itself to be dismissed.
+	 *
+	 * @default undefined / false
+	 */
 	cancellable?: TCancellable
 	/** @default "Ok" */
 	default?: TOptions[number]
 	/** @default [] */
 	dangerous?: TOptions[number][]
-	/** @default false if cancellable, otherwise the default timeout */
+	/**
+	 * Overrides the default timeout, can be set to true to just enable it. An entry must be cancellable to have a timeout.
+	 *
+	 * @default global timeout / false if cancellable is false
+	 */
 	timeout?: number | boolean
 	icon?: string
+	message: string
+	component?: string | Component
+	/** Props for the custom component. By default the component is passed the message, the messageClasses, and the full notification. Both will be overriden if you set them on componentProps. */
+	componentProps?: Record<string, any> & Partial<{ notification: NotificationEntry, message: string, messageClasses: string }>
+	/**
+	 * Attributes for the notification component itself. They are bound to the root of the element and the class property is merged with twMerge.
+	 *
+	 * The most likely use is needing to adjust the width of fullscreen notifications, but fullscreen notifications have two widths (one for big screens and one for small ones (sm). You will usually want to do something like `{notificationProps: {class: 'sm:max-w-[90dvw]'}}` to change only the large one.
+	 *
+	 */
+	notificationAttrs?: Record<string, any>
 }
 
 export type NotificationEntry<

package/src/runtime/injectionKeys.ts

@@ -1,13 +1,7 @@
 import type { InjectionKey, Ref } from "vue"
 
-import type { DarkModeCommands, DarkModeState } from "./composables/useDarkMode.js"
 import type { TranslationFunction } from "./composables/useSetupI18n.js"
-
-/** @deprecated */
-export const isDarkModeInjectionKey = Symbol("isDarkMode") as InjectionKey<Ref<boolean>>
-
-/** @deprecated */
-export const manualDarkModeInjectionKey = Symbol("manualDarkMode") as InjectionKey<Ref<boolean | undefined>>
+import type { DarkModeCommands, DarkModeState } from "./types/index.js"
 
 export const darkModeCommandsInjectionKey = Symbol("darkModeCommands") as InjectionKey<DarkModeCommands>
 

package/src/runtime/types/index.ts

@@ -3,9 +3,7 @@ import type { Ref } from "vue"
 
 export type ResizableOptions = {
 	/**
-	 * Defaults to true.
-	 *
-	 * ### true
+	 * ### true (default)
 	 * The directive will shrink/expand the columns when the table is resized and will use percentage widths on the table cells. This disables resizing of the last column (from the right handle).
 	 *
 	 * Additionally because of the way `table-layout:fixed` works, a min-width cannot be set on the elements via css, so instead, if the table shrinks past `opts.margin * col #`, `min-width` is set on the table until it's resized larger.
@@ -17,6 +15,8 @@ export type ResizableOptions = {
 	 * The table can be resized past it's normal width and uses pixel widths on the table cells. You might want to set `overscroll-x: scroll` on a parent wrapping element.
 	 *
 	 * This will set the table width to `min-content`, else it doesn't work. Note that it does this after the initial reading/setting of sizes so you can, for example, layout the table with `width: 100%`.
+	 *
+	 * @default true
 	 */
 	fitWidth: boolean
 	/**
@@ -41,8 +41,12 @@ export type ResizableOptions = {
 	 * It can then be used as needed by the component.
 	 */
 	widths: Ref<string[]>
-	/** The selector to use for the cells. "tr > td" by default. */
+	/** The selector to use for the header cells. "tr > th" by default. */
 	selector: string
+	/** Is called just after the `resizable-cols-setup` class is added. Can be useful for controlling the styling of wrappers or doing additional things post-setup. The default table element uses it to set the class on the wrapper also. */
+	onSetup?: (el: Element) => void
+	/** Is called on teardown (after the `resizable-cols-setup` class is removed). */
+	onTeardown?: (el: Element) => void
 }
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
 export type TableColConfig<T = {}> = Record<keyof T, { name?: string, resizable?: boolean }>
@@ -80,41 +84,119 @@ export type ScrollNearContainerEdgesOptions = {
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export type SimpleDOMRect = Omit<DOMRect, "toJSON">
 
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export interface IPopupReference { getBoundingClientRect: () => SimpleDOMRect }
-export type PopupPosition = { x: number, y: number, maxWidth?: number, maxHeight?: number }
-export type PopupSpaceInfo = {
-	left: number
-	right: number
-	leftLeft: number
-	rightRight: number
-	leftFromCenter: number
-	rightFromCenter: number
-	topFromCenter: number
-	bottomFromCenter: number
-	top: number
-	bottom: number
-}
-export type PopupPositioner = (
-	/** Reference is only undefined, if you did not specify a button element or use the exposed setReference. The function is still called, because there are other ways you might want to still position the popup (e.g. center-screen or some similar variation). */
-	reference: SimpleDOMRect | undefined,
-	popup: SimpleDOMRect | DOMRect,
-	bg: SimpleDOMRect | DOMRect,
-	space: PopupSpaceInfo
-) => number
-
-export type PopupPositionModifier = (
-	pos: PopupPosition,
-/** This will only be called with the reference element as undefined when one of the preferred positions is center-screen or it's a function. */
-	reference: SimpleDOMRect | undefined,
-	popup: SimpleDOMRect | DOMRect,
-	bg: SimpleDOMRect | DOMRect,
-	space: PopupSpaceInfo
-) => PopupPosition
-
 export type SingleDate = Date | undefined
 
 export type RangeDate = {
 	start?: SingleDate
 	end?: SingleDate
 }
+
+export type CustomNotificationComponentProps = {
+	message: string
+	messageClasses?: string
+}
+
+
+export type BaseInteractiveProps = {
+	/** Default is false. */
+	disabled?: boolean
+	/** Default is false. */
+	readonly?: boolean
+	/** Default is true. */
+	border?: boolean
+	/** Removes styles from the component. Default is false. */
+	unstyle?: boolean
+}
+
+
+export type TailwindClassProp = {
+	/** Tailwind classes. */
+	class?: string | false
+}
+
+
+export const defaultDarkModeOrder = ["system", "dark", "light"] as const
+
+
+export type DarkModeOptions = {
+	/* Whether to save the manual dark mode to local storage. Uses the key "prefersColorSchemeDark" by default. You can pass a key instead of true to use that as the key instead. */
+	useLocalStorage?: boolean | string
+	/* The order of the string dark modes when using `cycleDarkMode`. Defaults to `["system", "dark", "light"]` */
+	darkModeOrder?: readonly ("system" | "dark" | "light")[]
+	/** True by default, should be passed import.meta.client if using nuxt, or false when running server side. */
+	isClientSide?: boolean
+	/**
+	 * Whether to use the view transition to animate the dark mode switch (you just need to add the css).
+	 *
+	 * Note that the transitition is NOT triggered if visually the mode does not change (e.g. system mode is dark and the user switches from system to dark, visually nothing changes so transitioning is skipped).
+	 *
+	 * There is an example in storybook. But basically:
+	 *
+	 * ```css
+	 *
+	 * #root { // the dark mode switcher works on the WRoot component not the html root
+	 *		view-transition-name: wroot;
+	 *		height: 100dvh;
+	 *		padding: 0;
+	 *	}
+	 *
+	 * ::view-transition-new(wroot) {
+	 * 	animation: grow var(--story-anim-length) ease-in-out;
+	 * 	animation-fill-mode: both;
+	 * 	z-index: 2;
+	 * 	mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><circle cx="20" cy="20" r="20" fill="white"/></svg>') center / 0 no-repeat;
+	 * }
+	 *
+	 * ::view-transition-old(wroot) {
+	 * 	animation: none;
+	 * 	animation-fill-mode: both;
+	 * 	z-index: 1;
+	 * }
+	 *
+	 * @keyframes grow {
+	 * 	from {
+	 * 		mask-size: 0dvw;
+	 * 	}
+	 * 	to {
+	 * 		mask-size: 300dvw;
+	 * 	}
+	 * }
+	 * ```
+	 *
+	 * See https://theme-toggle.rdsx.dev/ for more ideas.
+	 *
+	 * @default true
+	 */
+	useViewTransition?: boolean
+}
+
+export interface DarkModeCommands {
+	setDarkMode: (value: "dark" | "light" | "system") => void
+	cycleDarkMode: () => void
+}
+
+export interface DarkModeState {
+	/** Whether the dark mode should be enabled or not */
+	darkMode: Ref<boolean>
+	/** The current state of the darkMode but as a string (dark, light, system) */
+	darkModeState: Ref<"dark" | "light" | "system">
+	/** The value of the manuably controllable dark mode. You can set this to true/false or undefined to allow the systemDarkMode to take priority. Alternatively use setDarkMode instead. */
+	manualDarkMode: Ref<boolean | undefined>
+	/** The value of the system dark mode. This is automatically set depending on the user's `prefer-color-scheme` and should not be set directly. */
+	systemDarkMode: Ref<boolean>
+
+}
+export type PopupConstrainToProps = {
+	constrainWidthTo?: number | "trigger" | "available" | string | null
+	constrainHeightTo?: number | "trigger" | "available" | string | null
+}
+
+
+export type EmitsToProps<T> = {
+	[K in keyof T as K extends string ? `on${Capitalize<K>}` : never]?:
+	T[K] extends (...args: infer Args) => any
+		? (...args: Args) => void
+		: T[K] extends any[]
+			? (...args: T[K]) => void
+			: T[K]
+}

package/src/runtime/utils/notifyIfError.ts

@@ -1,6 +1,7 @@
 import { TypedError } from "@alanscodelog/utils/TypedError"
 
 import { useNotificationHandler } from "../composables/useNotificationHandler.js"
+import type { NotificationEntry } from "../helpers/NotificationHandler.js"
 
 /**
  * Notifies the user if the given value is an error. Useful for making non-critical errors don't go unnoticed.
@@ -13,13 +14,15 @@ export function notifyIfError<T>(
 	err: T, {
 		logger,
 		ns,
-		force = false
+		force = false,
+		entry
 	}: {
 		logger?: { debug: (...args: any[]) => void }
 		/* Logger namespace. */
 		ns?: string
 		/* force interpret as error, for catch blocks */
 		force?: boolean
+		entry?: Partial<NotificationEntry<any>>
 	} = {}): T {
 	if (force || err instanceof Error) {
 		const errMessage = {
@@ -38,7 +41,8 @@ export function notifyIfError<T>(
 			...errMessage,
 			options: ["Ok"],
 			cancellable: "Ok",
-			timeout: true
+			timeout: true,
+			...entry
 		})
 	}
 	return err

package/src/runtime/utils/twMerge.ts

@@ -3,7 +3,8 @@ import { extendTailwindMerge } from "tailwind-merge"
 const _twMergeExtend = {
 	extend: {
 		classGroups: {
-			"focus-outline": [{ "focus-outline": ["", "no-offset", "none"] }]
+			"focus-outline": [{ "focus-outline": ["", "no-offset", "none"] }],
+			"no-truncate": ["truncate", "no-truncate"]
 		}
 	}
 } satisfies Parameters<typeof extendTailwindMerge>[0]

package/types/components.d.ts

@@ -8,20 +8,19 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
-    IFa6RegularCopy: typeof import('~icons/fa6-regular/copy')['default']
-    IFa6RegularFile: typeof import('~icons/fa6-regular/file')['default']
-    IFa6SolidArrowUpFromBracket: typeof import('~icons/fa6-solid/arrow-up-from-bracket')['default']
-    IFa6SolidChevronUp: typeof import('~icons/fa6-solid/chevron-up')['default']
-    IFa6SolidCircleHalfStroke: typeof import('~icons/fa6-solid/circle-half-stroke')['default']
-    IFa6SolidXmark: typeof import('~icons/fa6-solid/xmark')['default']
-    IFaSolidMoon: typeof import('~icons/fa-solid/moon')['default']
-    IPhSunBold: typeof import('~icons/ph/sun-bold')['default']
-    IRadixIconsCalendar: typeof import('~icons/radix-icons/calendar')['default']
-    IRadixIconsChevronLeft: typeof import('~icons/radix-icons/chevron-left')['default']
-    IRadixIconsChevronRight: typeof import('~icons/radix-icons/chevron-right')['default']
-    IRadixIconsDoubleArrowLeft: typeof import('~icons/radix-icons/double-arrow-left')['default']
-    IRadixIconsDoubleArrowRight: typeof import('~icons/radix-icons/double-arrow-right')['default']
-    RouterLink: typeof import('vue-router')['RouterLink']
-    RouterView: typeof import('vue-router')['RouterView']
+    ILucideCalendarDays: typeof import('~icons/lucide/calendar-days')['default']
+    ILucideCalendarRange: typeof import('~icons/lucide/calendar-range')['default']
+    ILucideCheck: typeof import('~icons/lucide/check')['default']
+    ILucideChevronDown: typeof import('~icons/lucide/chevron-down')['default']
+    ILucideChevronLeft: typeof import('~icons/lucide/chevron-left')['default']
+    ILucideChevronRight: typeof import('~icons/lucide/chevron-right')['default']
+    ILucideChevronsLeft: typeof import('~icons/lucide/chevrons-left')['default']
+    ILucideChevronsRight: typeof import('~icons/lucide/chevrons-right')['default']
+    ILucideCopy: typeof import('~icons/lucide/copy')['default']
+    ILucideFile: typeof import('~icons/lucide/file')['default']
+    ILucideInfo: typeof import('~icons/lucide/info')['default']
+    ILucideLoaderCircle: typeof import('~icons/lucide/loader-circle')['default']
+    ILucideUpload: typeof import('~icons/lucide/upload')['default']
+    ILucideX: typeof import('~icons/lucide/x')['default']
   }
 }

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

@@ -1,5 +0,0 @@
-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,16 +0,0 @@
-<template>
-<div tabindex="0">
-	{{ value }}
-</div>
-</template>
-
-<script setup>
-defineOptions({ name: "Aria" });
-defineProps({
-  value: { type: String, required: true }
-});
-</script>
-
-<style scoped>
-div{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);white-space:nowrap}
-</style>

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

@@ -1,5 +0,0 @@
-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/Icon/Icon.d.vue.ts

@@ -1,21 +0,0 @@
-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.d.ts

@@ -1,21 +0,0 @@
-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/LibButton/LibButton.d.vue.ts

@@ -1,36 +0,0 @@
-import { type ButtonHTMLAttributes } from "vue";
-import { type BaseInteractiveProps, type ButtonProps, type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.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.d.ts

@@ -1,36 +0,0 @@
-import { type ButtonHTMLAttributes } from "vue";
-import { type BaseInteractiveProps, type ButtonProps, type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.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/LibCheckbox/LibCheckbox.d.vue.ts

@@ -1,42 +0,0 @@
-import { type HTMLAttributes, type InputHTMLAttributes } from "vue";
-import { type BaseInteractiveProps, type LabelProps, type LinkableByIdProps, type TailwindClassProp, type WrapperProps } from "../shared/props.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

@@ -1,103 +0,0 @@
-<template>
-<div
-	:class="twMerge(
-  `
-		checkbox--wrapper
-		flex
-		items-center
-		gap-1
-	`,
-  $.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 }"
-		:for="id ?? fallbackId"
-	>
-		<input
-			:id="id ?? fallbackId"
-			:class="!$attrs.unstyle && twMerge(
-  `
-				checkbox
-				focus-outline-no-offset
-				m-0
-				p-[0.4em]
-				bg-bg
-				dark:bg-fg
-				appearance-none
-				border
-				border-neutral-500
-				focus:border-accent-600
-				rounded-sm
-				aspect-square
-				relative
-				checked:after:content
-				checked:after:absolute
-				checked:after:w-full
-				checked:after:h-full
-				checked:after:border-2
-				checked:after:border-bg
-				dark:checked:after:border-fg
-				checked:after:rounded-sm
-				checked:after:top-0
-				checked:after:left-0
-				checked:after:bg-accent-700
-				disabled:border-neutral-500
-				disabled:checked:after:bg-neutral-700
-			`,
-  !disabled && `cursor-pointer`,
-  $.attrs.class
-)"
-			type="checkbox"
-			:disabled="disabled"
-			ref="inputEl"
-			v-model="$value"
-			v-bind="{ ...$.attrs, class: void 0 }"
-		>
-		<slot/> {{ label }}
-	</label>
-</div>
-</template>
-
-<script setup>
-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: "LibCheckbox",
-  inheritAttrs: false
-});
-const $ = useDivideAttrs(["label", "wrapper"]);
-const fallbackId = getFallbackId();
-const props = defineProps({
-  id: { type: String, required: false },
-  label: { type: String, required: false },
-  disabled: { type: Boolean, required: false, default: false },
-  readonly: { type: Boolean, required: false, default: false },
-  border: { type: Boolean, required: false, default: true },
-  unstyle: { type: Boolean, required: false, default: false }
-});
-defineEmits(["submit"]);
-const el = ref(null);
-const inputEl = ref(null);
-const $value = defineModel("modelValue", { type: Boolean, ...{ default: false } });
-usePreHydrationValue(props.id ?? fallbackId, $value);
-</script>
-
-<script>
-
-</script>