@witchcraft/ui 0.3.25 → 0.4.0-beta.1

package/dist/runtime/components/{LibRoot/LibRoot.vue → WRoot/WRoot.vue}

@@ -1,26 +1,29 @@
 <template>
 <div
-	:id="id"
 	tabindex="-1"
 	:class="twMerge(
   showOutline ? 'group outlined outlined-visible' : '[&_*]:outline-hidden',
   darkMode && ' dark',
-  $attrs['wrapperAttrs']?.class
+  wrapperAttrs?.class
 )"
-	v-bind="{ ...$attrs['wrapperAttrs'], attrs: void 0, class: void 0 }"
+	v-bind="{
+  id: 'app',
+  ...wrapperAttrs,
+  class: void 0
+}"
 	:ref="handleRef"
 >
 	<!-- id root is useful for teleports, so they are at the topmost level where they can still be styled -->
 	<!-- See TestControls for why the margins here -->
 	<div
 		id="root"
-		v-bind="{ ...$attrs.attrs, class: void 0, wrapperAttrs: void 0 }"
+		v-bind="{ ...$attrs, class: void 0 }"
 		:class="twMerge(
   `
-			dark:bg-fg
-			dark:text-bg
-			bg-bg
-			text-fg
+			dark:bg-neutral-900
+			dark:text-white
+			bg-neutral-50
+			text-black
 		`,
   testWrapperMode && `
 			px-10
@@ -31,7 +34,7 @@
 			flex
 			flex-col
 		`,
-  $attrs.attrs?.class
+  $attrs.class
 )"
 	>
 		<TestControls
@@ -49,9 +52,8 @@
 
 <script setup>
 import { unreachable } from "@alanscodelog/utils/unreachable";
-import { computed, onBeforeUnmount, onMounted, ref, toRaw } from "vue";
+import { computed, onBeforeUnmount, onMounted, ref, toRaw, useAttrs } from "vue";
 import { useAccesibilityOutline } from "../../composables/useAccesibilityOutline.js";
-import { useDivideAttrs } from "../../composables/useDivideAttrs.js";
 import { useNotificationHandler } from "../../composables/useNotificationHandler.js";
 import { useSetupDarkMode } from "../../composables/useSetupDarkMode.js";
 import { useSetupI18n } from "../../composables/useSetupI18n.js";
@@ -60,21 +62,21 @@ import { useShowDevOnlyKey } from "../../composables/useShowDevOnlyKey.js";
 import { NotificationHandler } from "../../helpers/NotificationHandler.js";
 import { theme as defaultTheme } from "../../theme.js";
 import { twMerge } from "../../utils/twMerge.js";
-import Notifications from "../LibNotifications/LibNotifications.vue";
 import TestControls from "../TestControls/TestControls.vue";
-const $attrs = useDivideAttrs(["wrapper"]);
+import Notifications from "../WNotifications/WNotifications.vue";
 defineOptions({ name: "Root", inheritAttrs: false, suspensible: false });
+const $attrs = useAttrs();
 const props = defineProps({
   theme: { type: Object, required: false, default: void 0 },
   outline: { type: Boolean, required: false, default: true },
   forceOutline: { type: Boolean, required: false, default: false },
   testWrapperMode: { type: Boolean, required: false, default: false },
-  id: { type: String, required: false, default: "app" },
   getRef: { type: Function, required: false, default: void 0 },
   isClientSide: { type: Boolean, required: false, default: true },
   useBuiltinTranslations: { type: Boolean, required: false, default: true },
   useNotifications: { type: Boolean, required: false, default: true },
-  notificationHandler: { type: Object, required: false, default: void 0 }
+  notificationHandler: { type: Object, required: false, default: void 0 },
+  wrapperAttrs: { type: Object, required: false }
 });
 const el = ref(null);
 function handleRef(_) {

package/dist/runtime/components/{LibRoot/LibRoot.vue.d.ts → WRoot/WRoot.vue.d.ts}

@@ -1,11 +1,12 @@
 import type { Theme } from "metamorphosis";
+import type { HTMLAttributes } from "vue";
 import { NotificationHandler } from "../../helpers/NotificationHandler.js";
+import type { TailwindClassProp } from "../../types/index.js";
 type __VLS_Props = {
     theme?: Theme;
     outline?: boolean;
     forceOutline?: boolean;
     testWrapperMode?: boolean;
-    id?: string;
     /** You can set a ref to the root element by passing :getRef="_ => el = _" */
     getRef?: (el: HTMLElement | null) => void;
     /** True by default, should be passed import.meta.client if using nuxt, or false when running server side. */
@@ -13,19 +14,19 @@ type __VLS_Props = {
     useBuiltinTranslations?: boolean;
     useNotifications?: boolean;
     notificationHandler?: NotificationHandler;
+    wrapperAttrs?: Omit<HTMLAttributes, "class"> & TailwindClassProp;
 };
 declare var __VLS_11: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_11) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
-    darkMode: import("../../composables/useDarkMode.js").DarkModeState & import("../../composables/useDarkMode.js").DarkModeCommands;
+    darkMode: import("../../main.lib.js").DarkModeState & import("../../main.lib.js").DarkModeCommands;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    theme: Theme;
-    id: string;
-    isClientSide: boolean;
     useBuiltinTranslations: boolean;
+    theme: Theme;
     outline: boolean;
+    isClientSide: boolean;
     forceOutline: boolean;
     testWrapperMode: boolean;
     getRef: (el: HTMLElement | null) => void;

package/dist/runtime/components/{LibSimpleInput/LibSimpleInput.d.vue.ts → WSimpleInput/WSimpleInput.d.vue.ts}

@@ -1,24 +1,15 @@
 import { type InputHTMLAttributes } from "vue";
-import { type BaseInteractiveProps, type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js";
-type RealProps = LinkableByIdProps & LabelProps & BaseInteractiveProps & {
-    placeholder?: InputHTMLAttributes["placeholder"];
-    disabled?: InputHTMLAttributes["disabled"];
-    id?: InputHTMLAttributes["id"];
-    type?: InputHTMLAttributes["type"];
-    valid?: boolean;
-};
-interface Props extends 
-/** @vue-ignore */
-Partial<Omit<InputHTMLAttributes, "class" | "readonly" | "disabled" | "onSubmit" | "onInput" | "autocomplete"> & TailwindClassProp>, RealProps {
-}
-declare const _default: typeof __VLS_export;
-export default _default;
+import type { BaseInteractiveProps, TailwindClassProp } from "../../types/index.js";
 declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: import("vue").PublicProps & __VLS_PrettifyLocal<(Props & {
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(Omit<InputHTMLAttributes, "class" | "onInput" | "onSubmit" | "disabled" | "readonly" | "autocomplete"> & TailwindClassProp & Pick<BaseInteractiveProps, "border" | "unstyle"> & {
+        id?: string;
+        label?: string;
+        valid?: boolean;
+    } & {
         modelValue: T;
     }) & {
-        onInput?: ((val: InputEvent) => any) | undefined;
         onSubmit?: ((val: T) => any) | undefined;
+        onInput?: ((val: InputEvent) => any) | undefined;
         "onUpdate:modelValue"?: ((value: T) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
@@ -33,6 +24,8 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
+declare const _default: typeof __VLS_export;
+export default _default;
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];
 } : {

package/dist/runtime/components/{LibSimpleInput/LibSimpleInput.vue → WSimpleInput/WSimpleInput.vue}

@@ -1,7 +1,7 @@
 <template>
 <input
-	:id="id ?? fallbackId"
-	:class="twMerge(
+	:id="finalId"
+	:class="!unstyle && twMerge(
   `
 		simple-input
 		flex-1
@@ -71,12 +71,11 @@
 )"
 	:data-border="border"
 	:data-invalid="!valid"
-	:type="type"
-	:placeholder="placeholder"
-	:disabled="disabled"
-	:readonly="readonly"
 	v-model="modelValue"
-	v-bind="{ ...$attrs, class: void 0, ...ariaLabel }"
+	v-bind="{
+  ...$attrs,
+  class: void 0
+}"
 	@keydown="handleKeydown"
 	@input="emit('input', $event)"
 >
@@ -84,39 +83,29 @@
 
 <script setup>
 import { useAttrs } from "vue";
-import { useAriaLabel } from "../../composables/useAriaLabel.js";
+import { useFallbackId } from "../../composables/useFallbackId.js";
 import { usePreHydrationValue } from "../../composables/usePreHydrationValue.js";
 import { hasModifiers } from "../../helpers/hasModifiers.js";
 import { twMerge } from "../../utils/twMerge.js";
-import { getFallbackId } from "../shared/props.js";
 defineOptions({
-  name: "LibSimpleInput",
+  name: "WSimpleInput",
   inheritAttrs: false
 });
-const fallbackId = getFallbackId();
 const props = defineProps({
+  unstyle: { type: Boolean, required: false },
+  border: { type: Boolean, required: false, default: true },
   id: { type: String, required: false, default: "" },
   label: { type: String, required: false, default: "" },
-  disabled: { type: [Boolean, String], 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 },
-  placeholder: { type: null, required: false, default: "" },
-  type: { type: null, required: false, default: void 0 },
   valid: { type: Boolean, required: false, default: true }
 });
+const finalId = useFallbackId(props);
 const modelValue = defineModel({ type: null, ...{ required: true } });
 const emit = defineEmits(["submit", "input"]);
 const $attrs = useAttrs();
-const ariaLabel = useAriaLabel(props, fallbackId);
 function handleKeydown(e) {
   if (e.key === "Enter" && !hasModifiers(e)) {
     emit("submit", modelValue.value);
   }
 }
-usePreHydrationValue(props.id ?? fallbackId, modelValue);
-</script>
-
-<script>
-
+usePreHydrationValue(finalId, modelValue);
 </script>

package/dist/runtime/components/{LibSimpleInput/LibSimpleInput.vue.d.ts → WSimpleInput/WSimpleInput.vue.d.ts}

@@ -1,24 +1,15 @@
 import { type InputHTMLAttributes } from "vue";
-import { type BaseInteractiveProps, type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js";
-type RealProps = LinkableByIdProps & LabelProps & BaseInteractiveProps & {
-    placeholder?: InputHTMLAttributes["placeholder"];
-    disabled?: InputHTMLAttributes["disabled"];
-    id?: InputHTMLAttributes["id"];
-    type?: InputHTMLAttributes["type"];
-    valid?: boolean;
-};
-interface Props extends 
-/** @vue-ignore */
-Partial<Omit<InputHTMLAttributes, "class" | "readonly" | "disabled" | "onSubmit" | "onInput" | "autocomplete"> & TailwindClassProp>, RealProps {
-}
-declare const _default: typeof __VLS_export;
-export default _default;
+import type { BaseInteractiveProps, TailwindClassProp } from "../../types/index.js";
 declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: import("vue").PublicProps & __VLS_PrettifyLocal<(Props & {
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(Omit<InputHTMLAttributes, "class" | "onInput" | "onSubmit" | "disabled" | "readonly" | "autocomplete"> & TailwindClassProp & Pick<BaseInteractiveProps, "border" | "unstyle"> & {
+        id?: string;
+        label?: string;
+        valid?: boolean;
+    } & {
         modelValue: T;
     }) & {
-        onInput?: ((val: InputEvent) => any) | undefined;
         onSubmit?: ((val: T) => any) | undefined;
+        onInput?: ((val: InputEvent) => any) | undefined;
         "onUpdate:modelValue"?: ((value: T) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
@@ -33,6 +24,8 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
+declare const _default: typeof __VLS_export;
+export default _default;
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];
 } : {

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

@@ -0,0 +1,102 @@
+import { type VirtualizerOptions } from "@tanstack/vue-virtual";
+import { type HTMLAttributes, type TableHTMLAttributes } from "vue";
+import type { ResizableOptions, TableColConfig, TailwindClassProp } from "../../types/index.js";
+declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<{
+        resizable?: Partial<ResizableOptions>;
+        values: T[];
+        /** Let's the table know the shape of the data since values might be empty. */
+        cols?: (keyof T)[];
+        rounded?: boolean;
+        border?: boolean;
+        cellBorder?: boolean;
+        /** Disables the header. This also sets the selector to `tr:first-child > td` instead to avoid issues with the vResizableCols directive. */
+        header?: boolean;
+        colConfig?: TableColConfig<T>;
+        /**
+         * See tanstack/vue-virtual {@link https://tanstack.com/virtual/latest/docs/api/virtualizer}
+         *
+         * The defaults are:
+         *
+         * - enabled: false
+         * - method: "fixed"
+         * - overscan: (50 if fixed, 10 if dynamic)
+         * - estimateSize: () => { return 33 }
+         *
+         * This also has an additional option, `method`, which can be set to `fixed` or `dynamic` (experimental).
+         *
+         * Notes:
+         *
+         * - Because of how virtualization works, initial layout (before .resizable-cols-setup class is applied) will only have access to the headers and not the rows. This can cause cols to look very small, especially if using resizable.fitWidth false.
+         *
+         * ### Fixed
+         *
+         * `fixed` is the default and will set the height of ALL items to the height of the first item onMounted (tanstack does not do this and if your estimateSize if off, the scrolling is weird).
+         *
+         * Since the table now truncates rows by default, they will always be the same height unless you change the inner styling. In fixed mode, `forceRecalculateFixedVirtualizer` is exposed if you need to force re-calculation.
+         *
+         * If using slots, be sure to at least pass the `class` slot prop to the td element. `style` with width is also supplied but is not required if you're displaying the table as a table.
+         *
+         * ### Dynamic (experimental)
+         *
+         * In `dynamic` mode we use tanstack's measureElement method. This is more expensive, but it will work with any heights.
+         *
+         * Dynamic mode also requires the table displays itself using grid and flex post setup as otherwise dynamic mode doesn't work.
+         *
+         * You don't need to do anything unless using slots. If using slots, pass the given `ref` slot prop to ref (internally this is tanstack's measureElement) and the class and style slot props at the very least:
+         * ```vue
+         * <template #[`${colName}`]="slotProps">
+         * 	<td
+         * 		:ref="slotProps.ref"
+         * 		:class="slotProps.class"
+         * 		:style="slotProps.style"
+         * 	>
+         * 		{{ slotProps.value }}
+         * 	</td>
+         * </template>
+         * ```
+         */
+        virtualizerOptions?: Partial<VirtualizerOptions<any, any>> & {
+            method?: "fixed" | "dynamic";
+        };
+        /** Whether to enable sticky header styles. This requires `border:false`. This moves the border to the wrapper and styles a straight border between the scroll bar and the rounded border. */
+        stickyHeader?: boolean;
+        /** Which key to use for the rows (only if not using virtualization). */
+        itemKey?: keyof T | ((item: T) => string);
+        /** Pass attributes to the wrapper div. To pass to the table you can use regular top level attributes. */
+        wrapperAttrs?: Omit<HTMLAttributes, "class"> & TailwindClassProp;
+    } & Omit<TableHTMLAttributes, "class" | "disabled" | "readonly"> & TailwindClassProp> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        forceRecalculateFixedVirtualizer: () => void;
+    }>) => void;
+    attrs: any;
+    slots: {
+        [x: `header-${string}`]: ((props: {
+            colKey: keyof T;
+            config: any;
+            style: {
+                width: undefined;
+            };
+            class: string | undefined;
+        }) => any) | undefined;
+    } & { [K in NonNullable<keyof T>]?: ((props: {
+        class: string | undefined;
+        style: {
+            width: undefined;
+        };
+        item: T | undefined;
+        value: NonNullable<T>[keyof T];
+    }) => any) | undefined; };
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/{LibTable/LibTable.vue → WTable/WTable.vue}

@@ -51,8 +51,9 @@
   mergedVirtualizerOpts.enabled && mergedVirtualizerOpts.method === 'dynamic' && `
 		relative
 		`,
-  $attrs['wrapper-class']
+  wrapperAttrs?.class
 )"
+	v-bind="{ ...wrapperAttrs, class: void 0 }"
 	ref="parentRef"
 >
 	<div
@@ -63,10 +64,9 @@
 	>
 		<!-- https://github.com/TanStack/virtual/issues/640#issuecomment-2795731690 -->
 		<table
-			:style="{
-  ...stickyHeader && mergedVirtualizerOpts.enabled ? { '--table-sticky-fix': `${totalSize - tableHeight}px` } : {},
-  ...$attrs.style ?? {}
-}"
+			:style="[{
+  ...stickyHeader && mergedVirtualizerOpts.enabled ? { '--table-sticky-fix': `${totalSize - tableHeight}px` } : {}
+}, $attrs?.style]"
 			:class="twMerge(
   `
 				table
@@ -107,6 +107,7 @@
 			`,
   $attrs.class
 )"
+			v-bind="{ ...$attrs, class: void 0, style: void 0 }"
 			v-resizable-cols="resizableOptions"
 		>
 			<thead
@@ -177,7 +178,7 @@
 						:style="{
   ...mergedVirtualizerOpts.enabled ? {
     transform: mergedVirtualizerOpts.method === 'fixed' ? `translateY(${virtual.start - index * virtual.size}px)` : `translateY(${virtual.start}px)`,
-    height: `${virtual.size}px`
+    height: mergedVirtualizerOpts.method === 'fixed' ? `${virtual.size}px` : void 0
   } : {}
 }"
 						:data-index="virtual.index"
@@ -214,17 +215,18 @@
 import { keys } from "@alanscodelog/utils/keys";
 import { throttle } from "@alanscodelog/utils/throttle";
 import { useVirtualizer } from "@tanstack/vue-virtual";
-import { computed, onMounted, ref } from "vue";
+import { computed, onMounted, ref, useAttrs } from "vue";
 import { useGlobalResizeObserver } from "../../composables/useGlobalResizeObserver.js";
 import { vResizableCols } from "../../directives/vResizableCols.js";
 import { twMerge } from "../../utils/twMerge.js";
 defineOptions({
-  name: "LibTable",
+  name: "WTable",
   inheritAttrs: false
 });
+const $attrs = useAttrs();
 const props = defineProps({
   resizable: { type: Object, required: false, default: () => ({}) },
-  values: { type: Array, required: false, default: () => [] },
+  values: { type: Array, required: true },
   cols: { type: Array, required: false, default: () => [] },
   rounded: { type: Boolean, required: false, default: true },
   border: { type: Boolean, required: false, default: true },
@@ -233,7 +235,8 @@ const props = defineProps({
   colConfig: { type: Object, required: false, default: () => ({}) },
   virtualizerOptions: { type: Object, required: false, default: () => ({}) },
   stickyHeader: { type: Boolean, required: false },
-  itemKey: { type: [String, Number, Symbol, Function], required: false, default: "" }
+  itemKey: { type: Function, required: false, skipCheck: true },
+  wrapperAttrs: { type: Object, required: false }
 });
 const widths = ref([]);
 const isPostSetup = ref(false);
@@ -365,7 +368,3 @@ defineExpose({
   forceRecalculateFixedVirtualizer
 });
 </script>
-
-<script>
-
-</script>

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

@@ -0,0 +1,102 @@
+import { type VirtualizerOptions } from "@tanstack/vue-virtual";
+import { type HTMLAttributes, type TableHTMLAttributes } from "vue";
+import type { ResizableOptions, TableColConfig, TailwindClassProp } from "../../types/index.js";
+declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<{
+        resizable?: Partial<ResizableOptions>;
+        values: T[];
+        /** Let's the table know the shape of the data since values might be empty. */
+        cols?: (keyof T)[];
+        rounded?: boolean;
+        border?: boolean;
+        cellBorder?: boolean;
+        /** Disables the header. This also sets the selector to `tr:first-child > td` instead to avoid issues with the vResizableCols directive. */
+        header?: boolean;
+        colConfig?: TableColConfig<T>;
+        /**
+         * See tanstack/vue-virtual {@link https://tanstack.com/virtual/latest/docs/api/virtualizer}
+         *
+         * The defaults are:
+         *
+         * - enabled: false
+         * - method: "fixed"
+         * - overscan: (50 if fixed, 10 if dynamic)
+         * - estimateSize: () => { return 33 }
+         *
+         * This also has an additional option, `method`, which can be set to `fixed` or `dynamic` (experimental).
+         *
+         * Notes:
+         *
+         * - Because of how virtualization works, initial layout (before .resizable-cols-setup class is applied) will only have access to the headers and not the rows. This can cause cols to look very small, especially if using resizable.fitWidth false.
+         *
+         * ### Fixed
+         *
+         * `fixed` is the default and will set the height of ALL items to the height of the first item onMounted (tanstack does not do this and if your estimateSize if off, the scrolling is weird).
+         *
+         * Since the table now truncates rows by default, they will always be the same height unless you change the inner styling. In fixed mode, `forceRecalculateFixedVirtualizer` is exposed if you need to force re-calculation.
+         *
+         * If using slots, be sure to at least pass the `class` slot prop to the td element. `style` with width is also supplied but is not required if you're displaying the table as a table.
+         *
+         * ### Dynamic (experimental)
+         *
+         * In `dynamic` mode we use tanstack's measureElement method. This is more expensive, but it will work with any heights.
+         *
+         * Dynamic mode also requires the table displays itself using grid and flex post setup as otherwise dynamic mode doesn't work.
+         *
+         * You don't need to do anything unless using slots. If using slots, pass the given `ref` slot prop to ref (internally this is tanstack's measureElement) and the class and style slot props at the very least:
+         * ```vue
+         * <template #[`${colName}`]="slotProps">
+         * 	<td
+         * 		:ref="slotProps.ref"
+         * 		:class="slotProps.class"
+         * 		:style="slotProps.style"
+         * 	>
+         * 		{{ slotProps.value }}
+         * 	</td>
+         * </template>
+         * ```
+         */
+        virtualizerOptions?: Partial<VirtualizerOptions<any, any>> & {
+            method?: "fixed" | "dynamic";
+        };
+        /** Whether to enable sticky header styles. This requires `border:false`. This moves the border to the wrapper and styles a straight border between the scroll bar and the rounded border. */
+        stickyHeader?: boolean;
+        /** Which key to use for the rows (only if not using virtualization). */
+        itemKey?: keyof T | ((item: T) => string);
+        /** Pass attributes to the wrapper div. To pass to the table you can use regular top level attributes. */
+        wrapperAttrs?: Omit<HTMLAttributes, "class"> & TailwindClassProp;
+    } & Omit<TableHTMLAttributes, "class" | "disabled" | "readonly"> & TailwindClassProp> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        forceRecalculateFixedVirtualizer: () => void;
+    }>) => void;
+    attrs: any;
+    slots: {
+        [x: `header-${string}`]: ((props: {
+            colKey: keyof T;
+            config: any;
+            style: {
+                width: undefined;
+            };
+            class: string | undefined;
+        }) => any) | undefined;
+    } & { [K in NonNullable<keyof T>]?: ((props: {
+        class: string | undefined;
+        style: {
+            width: undefined;
+        };
+        item: T | undefined;
+        value: NonNullable<T>[keyof T];
+    }) => any) | undefined; };
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

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

@@ -0,0 +1,40 @@
+import type { PopupConstrainToProps } from "../../types/index.js";
+type __VLS_Props = PopupConstrainToProps & {
+    delayDuration?: number;
+    disabled?: boolean;
+    triggerWhileDisabled?: boolean;
+    content?: string;
+    collisionBoundary?: Element | null;
+    to?: string;
+    /** Reka's TooltipRoot props */
+    rootProps?: any;
+    /** Reka's TooltipContent props */
+    contentProps?: any;
+};
+declare var __VLS_20: {}, __VLS_39: {}, __VLS_64: {
+    content: string;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_20) => any;
+} & {
+    default?: (props: typeof __VLS_39) => any;
+} & {
+    content?: (props: typeof __VLS_64) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    content: string;
+    disabled: boolean;
+    constrainWidthTo: number | "trigger" | "available" | string | null;
+    constrainHeightTo: number | "trigger" | "available" | string | null;
+    to: string;
+    delayDuration: number;
+    triggerWhileDisabled: 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;
+    };
+};