@velkymx/vibeui 0.8.1 → 0.9.0

package/README.md

@@ -39,9 +39,41 @@ import 'bootstrap/dist/css/bootstrap.min.css';
 createApp(App).use(VibeUI).mount('#app');
 ```
 
+## What's New in v0.9
+
+A big release driven by real-app migration feedback and a jQuery UI parity push.
+
+**New components**
+- `VibeFileInput` — file picker with drag-drop, accept enforcement, size limit
+- `VibeSkeleton` — text / rect / circle / card loading placeholders with shimmer
+- `VibeDatePicker` — calendar popover with single + range mode, keyboard nav
+- `VibeAutocomplete` — search-as-you-type, sync or async source, debounced
+- `VibeTabs` / `VibeTab` — tab container with content switching, lazy mode
+- `VibeStepper` — multi-step wizard with sync/async guards
+- `VibeSortable` — drag-to-reorder list
+- `VibeDraggable` / `VibeDroppable` — kanban / builder primitives
+- `VibeResizable` — corner / edge handle resizing with aspect / grid
+- `VibeSlider` — single + range slider with handle swap, track click, keyboard
+- `VibeToastHost` — host component for the new toast service
+
+**New composables / directive**
+- `useForm` — multi-field forms with reactive `fields`, `errors`, `touched`
+- `useToast` — `toast.success() / error() / warn() / info() / dismiss()`
+- `usePosition` — floating-ui-backed anchor positioning
+- `v-vibe-tooltip` — inline tooltip directive
+
+**API improvements**
+- `VibeAlert`: rich slot content; `dismissible` (correctly spelled) alias
+- `VibeButton`: `variant="link"`
+- `VibeDataTable`: generic columns (`DataTableColumn<MyRow>`)
+- `VibeFormSelect`: typed primitive option values (`null`, `undefined`, `boolean`)
+- `VibeFormWysiwyg`: toolbar string presets (`'minimal' | 'standard' | 'full'`)
+
+**Dependency**: `@floating-ui/dom` added (used by `usePosition`).
+
 ## Advanced Interactivity
 
-VibeUI v0.8.0 is optimized for mobile and hybrid apps, and fully abstracts Bootstrap's JavaScript. You no longer need to manually initialize tooltips, modals, or collapses.
+VibeUI fully abstracts Bootstrap's JavaScript — you don't manually initialize tooltips, modals, or collapses. Touch devices get sensible defaults out of the box.
 
 ```vue
 <template>
@@ -51,6 +83,9 @@ VibeUI v0.8.0 is optimized for mobile and hybrid apps, and fully abstracts Boots
       <VibeButton>Hover or Tap Me</VibeButton>
     </VibeTooltip>
 
+    <!-- Or as a directive (v0.9) -->
+    <VibeButton v-vibe-tooltip="'Inline tooltip'">Save</VibeButton>
+
     <!-- Full v-model support for Modals with Android back button support -->
     <VibeModal v-model="showModal" title="Hello!">
       Fully reactive, automated, and hybrid-ready.
@@ -70,23 +105,150 @@ VibeUI handles accessibility and IDs for you.
     <VibeFormInput v-model="email" type="email" />
   </VibeFormGroup>
 
-  <!-- New in v0.8.0: Input Groups -->
   <VibeInputGroup prepend="@">
     <VibeFormInput v-model="username" noWrapper />
   </VibeInputGroup>
+
+  <!-- New in v0.9: useForm composable for multi-field state -->
+  <script setup>
+  import { useForm, validators } from '@velkymx/vibeui'
+  const { fields, errors, validate, isDirty } = useForm({ name: '', email: '' })
+  </script>
 </template>
 ```
 
+## Toasts (v0.9 service form)
+
+```ts
+import { useToast } from '@velkymx/vibeui'
+
+const toast = useToast()
+toast.success('Saved')
+toast.error('Network error', { delay: 8000 })
+```
+
+Mount `<VibeToastHost />` once at the root and dispatch from anywhere.
+
 ## Components
 
-VibeUI includes all major Bootstrap 5.3 components, fully wrapped for Vue 3:
+VibeUI ships every major Bootstrap 5.3 component plus an interaction suite (drag/drop, sortable, resizable, slider, calendar) that fills the gap left by jQuery UI.
+
+### Layout
+
+| Component | Description |
+|-----------|-------------|
+| `VibeContainer` | Bootstrap container w/ breakpoints |
+| `VibeRow` | Grid row |
+| `VibeCol` | Grid column |
+
+### Core
+
+| Component | Doc |
+|-----------|-----|
+| `VibeAlert` | [docs](./docs/components/core/alert.md) |
+| `VibeBadge` | [docs](./docs/components/core/badge.md) |
+| `VibeButton` | [docs](./docs/components/core/button.md) |
+| `VibeButtonGroup` | [docs](./docs/components/core/button-group.md) |
+| `VibeCloseButton` | [docs](./docs/components/core/close-button.md) |
+| `VibeIcon` | Bootstrap-icons wrapper |
+| `VibeLink` | [docs](./docs/components/core/link.md) |
+| `VibePlaceholder` | [docs](./docs/components/core/placeholder.md) |
+| `VibeSkeleton` *(v0.9)* | [docs](./docs/components/core/skeleton.md) |
+| `VibeSpinner` | [docs](./docs/components/core/spinner.md) |
+
+### Navigation
+
+| Component | Doc |
+|-----------|-----|
+| `VibeBreadcrumb` | [docs](./docs/components/navigation/breadcrumb.md) |
+| `VibeNav` | [docs](./docs/components/navigation/nav.md) |
+| `VibeNavbar` (+ `Brand`, `Toggle`, `Nav`) | [docs](./docs/components/navigation/navbar.md) |
+| `VibePagination` | [docs](./docs/components/navigation/pagination.md) |
+| `VibeScrollspy` | [docs](./docs/components/advanced/scrollspy.md) |
+
+### Layout containers
+
+| Component | Doc |
+|-----------|-----|
+| `VibeCard` | [docs](./docs/components/card/card.md) |
+| `VibeListGroup` | [docs](./docs/components/list/list-group.md) |
+
+### Interactive
+
+| Component | Doc |
+|-----------|-----|
+| `VibeAccordion` | [docs](./docs/components/interactive/accordion.md) |
+| `VibeCarousel` | [docs](./docs/components/interactive/carousel.md) |
+| `VibeCollapse` | [docs](./docs/components/interactive/collapse.md) |
+| `VibeDatePicker` *(v0.9)* | [docs](./docs/components/interactive/date-picker.md) |
+| `VibeDraggable` *(v0.9)* | [docs](./docs/components/interactive/draggable.md) |
+| `VibeDroppable` *(v0.9)* | [docs](./docs/components/interactive/draggable.md) |
+| `VibeDropdown` | [docs](./docs/components/interactive/dropdown.md) |
+| `VibeModal` | [docs](./docs/components/interactive/modal.md) |
+| `VibeOffcanvas` | [docs](./docs/components/interactive/offcanvas.md) |
+| `VibeResizable` *(v0.9)* | [docs](./docs/components/interactive/resizable.md) |
+| `VibeSlider` *(v0.9)* | [docs](./docs/components/interactive/slider.md) |
+| `VibeSortable` *(v0.9)* | [docs](./docs/components/interactive/sortable.md) |
+| `VibeStepper` *(v0.9)* | [docs](./docs/components/interactive/stepper.md) |
+| `VibeTabs` / `VibeTab` *(v0.9)* | [docs](./docs/components/interactive/tabs.md) |
+| `VibeToast` / `VibeToastHost` *(v0.9)* | [component](./docs/components/interactive/toast.md), [service](./docs/composables/use-toast.md) |
+
+### Tooltips & Popovers
+
+| Component | Doc |
+|-----------|-----|
+| `VibePopover` | [docs](./docs/components/advanced/popover.md) |
+| `VibeTooltip` | [docs](./docs/components/advanced/tooltip.md) |
+
+### Data
+
+| Component | Doc |
+|-----------|-----|
+| `VibeDataTable` | [docs](./docs/components/data/datatable.md) |
+| `VibeProgress` | [docs](./docs/components/progress/progress.md) |
+
+### Forms
+
+| Component | Doc |
+|-----------|-----|
+| `VibeAutocomplete` *(v0.9)* | [docs](./docs/forms/autocomplete.md) |
+| `VibeFileInput` *(v0.9)* | [docs](./docs/forms/file-input.md) |
+| `VibeFormCheckbox` | [docs](./docs/forms/form-checkbox.md) |
+| `VibeFormDatepicker` (native) | [docs](./docs/forms/form-datepicker.md) |
+| `VibeFormGroup` | [docs](./docs/forms/form-group.md) |
+| `VibeFormInput` | [docs](./docs/forms/form-input.md) |
+| `VibeFormRadio` | [docs](./docs/forms/form-radio.md) |
+| `VibeFormSelect` | [docs](./docs/forms/form-select.md) |
+| `VibeFormSpinbutton` | [docs](./docs/forms/form-spinbutton.md) |
+| `VibeFormSwitch` | [docs](./docs/forms/form-switch.md) |
+| `VibeFormTextarea` | [docs](./docs/forms/form-textarea.md) |
+| `VibeFormWysiwyg` | [docs](./docs/forms/form-wysiwyg.md) |
+| `VibeInputGroup` | [docs](./docs/forms/input-group.md) |
+| Validation rules | [docs](./docs/forms/validation.md) |
+
+### Composables
+
+| Composable | Doc |
+|------------|-----|
+| `useBackButton` | [docs](./docs/composables/back-button.md) |
+| `useBreakpoints` | [docs](./docs/composables/breakpoints.md) |
+| `useColorMode` | [docs](./docs/composables/color-mode.md) |
+| `useForm` *(v0.9)* | [docs](./docs/composables/use-form.md) |
+| `useFormValidation` | [docs](./docs/forms/validation.md) |
+| `usePosition` *(v0.9)* | [docs](./docs/composables/use-position.md) |
+| `useToast` *(v0.9)* | [docs](./docs/composables/use-toast.md) |
+
+### Directives
+
+| Directive | Doc |
+|-----------|-----|
+| `v-vibe-tooltip` *(v0.9)* | [docs](./docs/directives/v-tooltip.md) |
+
+### Utilities
 
-* **Layout**: Container, Row, Col
-* **Core**: Alert, Badge, Button, ButtonGroup, CloseButton, Spinner, Placeholder, Icon, Link
-* **Navigation**: Breadcrumb, Nav, Navbar, Pagination, Scrollspy
-* **Interactive**: Accordion, Collapse, Dropdown, Modal, Offcanvas, Toast, Carousel
-* **Data**: DataTable (with mobile Stack mode)
-* **Forms**: Input, InputGroup, Select, Textarea, Spinbutton, Datepicker, Checkbox, Radio, Switch, Wysiwyg, FormGroup
+| Topic | Doc |
+|-------|-----|
+| Position utility classes | [docs](./docs/utilities/position.md) |
 
 ## Full Documentation
 

package/dist/components/VibeAlert.vue.d.ts

@@ -26,9 +26,13 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
         type: BooleanConstructor;
         default: boolean;
     };
+    dismissible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     message: {
         type: StringConstructor;
-        required: true;
+        default: string;
     };
     fade: {
         type: BooleanConstructor;
@@ -56,9 +60,13 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
         type: BooleanConstructor;
         default: boolean;
     };
+    dismissible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     message: {
         type: StringConstructor;
-        required: true;
+        default: string;
     };
     fade: {
         type: BooleanConstructor;
@@ -74,6 +82,8 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     subtle: boolean;
     modelValue: boolean;
     dismissable: boolean;
+    dismissible: boolean;
+    message: string;
     fade: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
     alertRef: HTMLDivElement;

package/dist/components/VibeAutocomplete.vue.d.ts

@@ -0,0 +1,46 @@
+declare const _default: <T = string>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{
+        modelValue: string;
+        label: string;
+        disabled: boolean;
+        placeholder: string;
+        id: string;
+        minChars: number;
+        debounce: number;
+        itemText: (item: T) => string;
+        maxResults: number;
+    }> & Omit<{
+        readonly modelValue: string;
+        readonly source: T[] | ((query: string) => T[] | Promise<T[]>);
+        readonly disabled: boolean;
+        readonly placeholder: string;
+        readonly minChars: number;
+        readonly debounce: number;
+        readonly maxResults: number;
+        readonly label?: string | undefined;
+        readonly id?: string | undefined;
+        readonly itemText?: ((item: T) => string) | undefined;
+        readonly "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+        readonly onSelect?: ((item: T) => any) | undefined;
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, "modelValue" | "label" | "disabled" | "placeholder" | "id" | "minChars" | "debounce" | "itemText" | "maxResults">, "onUpdate:modelValue" | "source" | "onSelect" | ("modelValue" | "label" | "disabled" | "placeholder" | "id" | "minChars" | "debounce" | "itemText" | "maxResults")> & {} & Partial<{}>> & import('vue').PublicProps;
+    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {
+        item?(_: {
+            item: T;
+            index: number;
+            label: string;
+        }): any;
+        empty?(_: {}): any;
+    };
+    emit: {
+        (e: "update:modelValue", value: string): void;
+        (e: "select", item: T): void;
+    };
+}>) => import('vue').VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/components/VibeButton.vue.d.ts

@@ -1,4 +1,4 @@
-import { Variant, Size, ButtonType } from '../types';
+import { ButtonVariant, Size, ButtonType } from '../types';
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
@@ -10,7 +10,7 @@ declare function __VLS_template(): {
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     variant: {
-        type: () => Variant;
+        type: () => ButtonVariant;
         default: string;
     };
     size: {
@@ -50,7 +50,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     click: (...args: any[]) => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     variant: {
-        type: () => Variant;
+        type: () => ButtonVariant;
         default: string;
     };
     size: {
@@ -89,7 +89,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     "onComponent-error"?: ((...args: any[]) => any) | undefined;
     onClick?: ((...args: any[]) => any) | undefined;
 }>, {
-    variant: Variant;
+    variant: ButtonVariant;
     type: ButtonType;
     size: Size;
     outline: boolean;

package/dist/components/VibeDataTable.vue.d.ts

@@ -4,13 +4,13 @@ declare const _default: <T extends Record<string, unknown>>(__VLS_props: NonNull
         variant: string;
         small: boolean;
         items: T[];
+        stack: boolean;
         hover: boolean;
         rowKey: string;
         striped: boolean;
         bordered: boolean;
         borderless: boolean;
         responsive: boolean;
-        stack: boolean;
         searchable: boolean;
         sortable: boolean;
         paginated: boolean;
@@ -26,14 +26,14 @@ declare const _default: <T extends Record<string, unknown>>(__VLS_props: NonNull
     }> & Omit<{
         readonly small: boolean;
         readonly items: T[];
+        readonly stack: boolean;
         readonly hover: boolean;
-        readonly columns: DataTableColumn[];
+        readonly columns: DataTableColumn<T>[];
         readonly rowKey: string;
         readonly striped: boolean;
         readonly bordered: boolean;
         readonly borderless: boolean;
         readonly responsive: boolean;
-        readonly stack: boolean;
         readonly searchable: boolean;
         readonly sortable: boolean;
         readonly paginated: boolean;
@@ -53,7 +53,7 @@ declare const _default: <T extends Record<string, unknown>>(__VLS_props: NonNull
         readonly "onUpdate:sortBy"?: ((value: string | undefined) => any) | undefined;
         readonly "onUpdate:sortDesc"?: ((value: boolean) => any) | undefined;
         readonly "onRow-clicked"?: ((...args: any[]) => any) | undefined;
-    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, "variant" | "small" | "items" | "hover" | "rowKey" | "striped" | "bordered" | "borderless" | "responsive" | "stack" | "searchable" | "sortable" | "paginated" | "searchPlaceholder" | "searchDebounce" | "showEmpty" | "emptyText" | "showPerPage" | "showInfo" | "infoText" | "filteredInfoText" | "perPageOptions">, "onComponent-error" | "onUpdate:currentPage" | "columns" | "onUpdate:perPage" | "onUpdate:sortBy" | "onUpdate:sortDesc" | "onRow-clicked" | ("variant" | "small" | "items" | "hover" | "rowKey" | "striped" | "bordered" | "borderless" | "responsive" | "stack" | "searchable" | "sortable" | "paginated" | "searchPlaceholder" | "searchDebounce" | "showEmpty" | "emptyText" | "showPerPage" | "showInfo" | "infoText" | "filteredInfoText" | "perPageOptions")> & {
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, "variant" | "small" | "items" | "stack" | "hover" | "rowKey" | "striped" | "bordered" | "borderless" | "responsive" | "searchable" | "sortable" | "paginated" | "searchPlaceholder" | "searchDebounce" | "showEmpty" | "emptyText" | "showPerPage" | "showInfo" | "infoText" | "filteredInfoText" | "perPageOptions">, "onComponent-error" | "onUpdate:currentPage" | "columns" | "onUpdate:perPage" | "onUpdate:sortBy" | "onUpdate:sortDesc" | "onRow-clicked" | ("variant" | "small" | "items" | "stack" | "hover" | "rowKey" | "striped" | "bordered" | "borderless" | "responsive" | "searchable" | "sortable" | "paginated" | "searchPlaceholder" | "searchDebounce" | "showEmpty" | "emptyText" | "showPerPage" | "showInfo" | "infoText" | "filteredInfoText" | "perPageOptions")> & {
         currentPage?: number;
         perPage?: number;
         sortBy?: string | undefined;
@@ -61,9 +61,9 @@ declare const _default: <T extends Record<string, unknown>>(__VLS_props: NonNull
     } & Partial<{}>> & import('vue').PublicProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
     attrs: any;
-    slots: Partial<Record<`cell(${string})`, (_: {
+    slots: Partial<Record<`cell(${keyof T & string})`, (_: {
         item: T;
-        value: unknown;
+        value: T[keyof T & string];
         index: number;
     }) => any>>;
     emit: ((event: "component-error" | "row-clicked", ...args: any[]) => void) & (((evt: "update:currentPage", value: number) => void) & ((evt: "update:perPage", value: number) => void) & ((evt: "update:sortBy", value: string | undefined) => void) & ((evt: "update:sortDesc", value: boolean) => void));

package/dist/components/VibeDatePicker.vue.d.ts

@@ -0,0 +1,122 @@
+import { PropType } from 'vue';
+type IsoDate = string;
+type DateValue = IsoDate | null;
+type RangeValue = [DateValue, DateValue];
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    modelValue: {
+        type: PropType<DateValue | RangeValue>;
+        default: null;
+    };
+    range: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    min: {
+        type: PropType<IsoDate>;
+        default: undefined;
+    };
+    max: {
+        type: PropType<IsoDate>;
+        default: undefined;
+    };
+    disabledDates: {
+        type: PropType<IsoDate[]>;
+        default: () => never[];
+    };
+    format: {
+        type: PropType<(iso: IsoDate) => string>;
+        default: undefined;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    weekStart: {
+        type: NumberConstructor;
+        default: number;
+    };
+    id: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    label: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {
+    open: () => void;
+    close: () => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: DateValue | RangeValue) => any;
+    close: () => any;
+    open: () => any;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    modelValue: {
+        type: PropType<DateValue | RangeValue>;
+        default: null;
+    };
+    range: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    min: {
+        type: PropType<IsoDate>;
+        default: undefined;
+    };
+    max: {
+        type: PropType<IsoDate>;
+        default: undefined;
+    };
+    disabledDates: {
+        type: PropType<IsoDate[]>;
+        default: () => never[];
+    };
+    format: {
+        type: PropType<(iso: IsoDate) => string>;
+        default: undefined;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    weekStart: {
+        type: NumberConstructor;
+        default: number;
+    };
+    id: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    label: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((value: DateValue | RangeValue) => any) | undefined;
+    onClose?: (() => any) | undefined;
+    onOpen?: (() => any) | undefined;
+}>, {
+    modelValue: DateValue | RangeValue;
+    label: string;
+    disabled: boolean;
+    placeholder: string;
+    id: string;
+    range: boolean;
+    min: string;
+    max: string;
+    disabledDates: string[];
+    format: (iso: IsoDate) => string;
+    weekStart: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
+    rootRef: HTMLDivElement;
+    popoverRef: HTMLDivElement;
+}, HTMLDivElement>;
+export default _default;

package/dist/components/VibeDraggable.vue.d.ts

@@ -0,0 +1,81 @@
+import { PropType } from 'vue';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {
+            isDragging: boolean;
+        }): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    payload: {
+        type: PropType<unknown>;
+        default: undefined;
+    };
+    group: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    dragend: (payload: {
+        payload: unknown;
+        group: string;
+        event: DragEvent;
+    }) => any;
+    dragstart: (payload: {
+        payload: unknown;
+        group: string;
+        event: DragEvent;
+    }) => any;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    payload: {
+        type: PropType<unknown>;
+        default: undefined;
+    };
+    group: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{
+    onDragend?: ((payload: {
+        payload: unknown;
+        group: string;
+        event: DragEvent;
+    }) => any) | undefined;
+    onDragstart?: ((payload: {
+        payload: unknown;
+        group: string;
+        event: DragEvent;
+    }) => any) | undefined;
+}>, {
+    tag: string;
+    disabled: boolean;
+    group: string;
+    payload: undefined;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/VibeDroppable.vue.d.ts

@@ -0,0 +1,74 @@
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {
+            isOver: boolean;
+        }): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    group: {
+        type: StringConstructor;
+        default: string;
+    };
+    acceptGroups: {
+        type: () => string[];
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    dragenter: (event: DragEvent) => any;
+    dragleave: (event: DragEvent) => any;
+    drop: (payload: {
+        payload: unknown;
+        group: string;
+        event: DragEvent;
+    }) => any;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    group: {
+        type: StringConstructor;
+        default: string;
+    };
+    acceptGroups: {
+        type: () => string[];
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{
+    onDragenter?: ((event: DragEvent) => any) | undefined;
+    onDragleave?: ((event: DragEvent) => any) | undefined;
+    onDrop?: ((payload: {
+        payload: unknown;
+        group: string;
+        event: DragEvent;
+    }) => any) | undefined;
+}>, {
+    tag: string;
+    disabled: boolean;
+    group: string;
+    acceptGroups: string[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};