@naptics/vue-collection 0.1.10 → 0.2.1

package/components/NAlert.d.ts

@@ -16,10 +16,6 @@ export declare const nAlertProps: {
      * If set to `true` the X-button of the alert is hidden.
      */
     readonly hideX: BooleanConstructor;
-    /**
-     * Adds the classes to the top-level element.
-     */
-    readonly addClass: StringConstructor;
     /**
      * This is called, when the X-button is clicked.
      */
@@ -45,10 +41,6 @@ declare const _default: import("vue").DefineComponent<{
      * If set to `true` the X-button of the alert is hidden.
      */
     readonly hideX: BooleanConstructor;
-    /**
-     * Adds the classes to the top-level element.
-     */
-    readonly addClass: StringConstructor;
     /**
      * This is called, when the X-button is clicked.
      */
@@ -69,10 +61,6 @@ declare const _default: import("vue").DefineComponent<{
      * If set to `true` the X-button of the alert is hidden.
      */
     readonly hideX: BooleanConstructor;
-    /**
-     * Adds the classes to the top-level element.
-     */
-    readonly addClass: StringConstructor;
     /**
      * This is called, when the X-button is clicked.
      */

package/components/NAlert.js

@@ -20,10 +20,6 @@ export const nAlertProps = {
    * If set to `true` the X-button of the alert is hidden.
    */
   hideX: Boolean,
-  /**
-   * Adds the classes to the top-level element.
-   */
-  addClass: String,
   /**
    * This is called, when the X-button is clicked.
    */
@@ -38,7 +34,7 @@ export default createComponent('NAlert', nAlertProps, (props, {
 }) => {
   const variant = computed(() => VARIANTS[props.variant]);
   return () => _createVNode("div", {
-    "class": `rounded-md p-3 shadow-lg bg-${variant.value.color}-50 ${props.addClass}`
+    "class": `rounded-md p-3 shadow-lg bg-${variant.value.color}-50`
   }, [_createVNode("div", {
     "class": "flex items-center"
   }, [_createVNode("div", {

package/components/NBadge.d.ts

@@ -13,8 +13,9 @@ export declare const nBadgeProps: {
         readonly type: PropType<import("../utils/tailwind").TWMaxWidth>;
         readonly default: "max-w-xs";
     };
-    readonly tooltipWrapperAddClass: StringConstructor;
-    readonly tooltipContentAddClass: StringConstructor;
+    readonly tooltipWrapperClass: StringConstructor;
+    readonly tooltipContentClass: StringConstructor;
+    readonly tooltipArrowClass: StringConstructor;
     /**
      * The text of the badge. Can alternatively be passed in the default slot.
      */
@@ -55,9 +56,11 @@ export declare const nBadgeProps: {
         readonly default: true;
     };
     /**
-     * Adds the classes to the top-level element.
+     * Adds the classes to the badge.
+     * Use this instead of `class` to style the button, because the button is wrapped inside
+     * a div for the tooltip and `class` would be applied to the wrapping div.
      */
-    readonly addClass: StringConstructor;
+    readonly badgeClass: StringConstructor;
 };
 /**
  * The `NBadge` is a styled element to wrap a text.
@@ -75,8 +78,9 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: PropType<import("../utils/tailwind").TWMaxWidth>;
         readonly default: "max-w-xs";
     };
-    readonly tooltipWrapperAddClass: StringConstructor;
-    readonly tooltipContentAddClass: StringConstructor;
+    readonly tooltipWrapperClass: StringConstructor;
+    readonly tooltipContentClass: StringConstructor;
+    readonly tooltipArrowClass: StringConstructor;
     /**
      * The text of the badge. Can alternatively be passed in the default slot.
      */
@@ -117,9 +121,11 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: true;
     };
     /**
-     * Adds the classes to the top-level element.
+     * Adds the classes to the badge.
+     * Use this instead of `class` to style the button, because the button is wrapped inside
+     * a div for the tooltip and `class` would be applied to the wrapping div.
      */
-    readonly addClass: StringConstructor;
+    readonly badgeClass: StringConstructor;
 }, import("vue").RenderFunction, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, never[], never, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     readonly tooltipText: StringConstructor;
     readonly tooltipContent: PropType<() => JSX.Element>;
@@ -133,8 +139,9 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: PropType<import("../utils/tailwind").TWMaxWidth>;
         readonly default: "max-w-xs";
     };
-    readonly tooltipWrapperAddClass: StringConstructor;
-    readonly tooltipContentAddClass: StringConstructor;
+    readonly tooltipWrapperClass: StringConstructor;
+    readonly tooltipContentClass: StringConstructor;
+    readonly tooltipArrowClass: StringConstructor;
     /**
      * The text of the badge. Can alternatively be passed in the default slot.
      */
@@ -175,9 +182,11 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: true;
     };
     /**
-     * Adds the classes to the top-level element.
+     * Adds the classes to the badge.
+     * Use this instead of `class` to style the button, because the button is wrapped inside
+     * a div for the tooltip and `class` would be applied to the wrapping div.
      */
-    readonly addClass: StringConstructor;
+    readonly badgeClass: StringConstructor;
 }>> & {}, {
     readonly color: string;
     readonly shade: number;

package/components/NBadge.js

@@ -42,9 +42,11 @@ export const nBadgeProps = {
     default: true
   },
   /**
-   * Adds the classes to the top-level element.
+   * Adds the classes to the badge.
+   * Use this instead of `class` to style the button, because the button is wrapped inside
+   * a div for the tooltip and `class` would be applied to the wrapping div.
    */
-  addClass: String,
+  badgeClass: String,
   ...nToolTipPropsForImplementor
 };
 /**
@@ -55,7 +57,7 @@ export default createComponent('NBadge', nBadgeProps, (props, {
 }) => {
   return () => _createVNode(NTooltip, mapTooltipProps(props), {
     default: () => [_createVNode("div", {
-      "class": ['px-2 py-1 rounded-md font-semibold shadow', `${props.textSize} bg-${props.color}-${props.shade} text-${props.color}-${props.textShade}`, props.allCaps ? 'uppercase' : '', props.addClass]
+      "class": ['px-2 py-1 rounded-md font-semibold shadow', `${props.textSize} bg-${props.color}-${props.shade} text-${props.color}-${props.textShade}`, props.allCaps ? 'uppercase' : '', props.badgeClass]
     }, [slots.default?.() || props.text])]
   });
 });

package/components/NBreadcrub.d.ts

@@ -38,14 +38,10 @@ export declare const nBreadcrumbProps: {
         readonly type: NumberConstructor;
         readonly default: 5;
     };
-    /**
-     * Adds the classes to the top-level element.
-     */
-    readonly addClass: StringConstructor;
     /**
      * Adds the classes to the separator icons.
      */
-    readonly addIconClass: StringConstructor;
+    readonly iconClass: StringConstructor;
     /**
      * A slot the replace the breadcrumb labels.
      */
@@ -105,14 +101,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: NumberConstructor;
         readonly default: 5;
     };
-    /**
-     * Adds the classes to the top-level element.
-     */
-    readonly addClass: StringConstructor;
     /**
      * Adds the classes to the separator icons.
      */
-    readonly addIconClass: StringConstructor;
+    readonly iconClass: StringConstructor;
     /**
      * A slot the replace the breadcrumb labels.
      */
@@ -158,14 +150,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: NumberConstructor;
         readonly default: 5;
     };
-    /**
-     * Adds the classes to the top-level element.
-     */
-    readonly addClass: StringConstructor;
     /**
      * Adds the classes to the separator icons.
      */
-    readonly addIconClass: StringConstructor;
+    readonly iconClass: StringConstructor;
     /**
      * A slot the replace the breadcrumb labels.
      */

package/components/NBreadcrub.js

@@ -38,14 +38,10 @@ export const nBreadcrumbProps = {
     type: Number,
     default: 5
   },
-  /**
-   * Adds the classes to the top-level element.
-   */
-  addClass: String,
   /**
    * Adds the classes to the separator icons.
    */
-  addIconClass: String,
+  iconClass: String,
   /**
    * A slot the replace the breadcrumb labels.
    */
@@ -61,7 +57,7 @@ export const nBreadcrumbProps = {
  */
 export default createComponentWithSlots('NBreadcrumb', nBreadcrumbProps, ['seperator', 'item'], props => {
   return () => _createVNode("div", {
-    "class": `flex flex-wrap items-center ${props.addClass}`
+    "class": `flex flex-wrap items-center`
   }, [props.items.map((item, index) => _createVNode(_Fragment, null, [props.item?.(item, index) || _createVNode(NLink, {
     "textSize": props.textSize,
     "route": item.route,
@@ -69,6 +65,6 @@ export default createComponentWithSlots('NBreadcrumb', nBreadcrumbProps, ['seper
   }, {
     default: () => [item.label]
   }), index < props.items.length - 1 && (props.seperator?.(item, index) || _createVNode(props.icon, {
-    "class": `mx-2 w-${props.iconSize} h-${props.iconSize} text-${props.color}-500 ${props.addIconClass}`
+    "class": `mx-2 w-${props.iconSize} h-${props.iconSize} text-${props.color}-500 ${props.iconClass}`
   }, null))]))]);
 });

package/components/NButton.d.ts

@@ -12,8 +12,9 @@ export declare const nButtonProps: {
         readonly type: PropType<import("../utils/tailwind").TWMaxWidth>;
         readonly default: "max-w-xs";
     };
-    readonly tooltipWrapperAddClass: StringConstructor;
-    readonly tooltipContentAddClass: StringConstructor;
+    readonly tooltipWrapperClass: StringConstructor;
+    readonly tooltipContentClass: StringConstructor;
+    readonly tooltipArrowClass: StringConstructor;
     /**
      * The color of the button.
      */
@@ -42,9 +43,11 @@ export declare const nButtonProps: {
      */
     readonly small: BooleanConstructor;
     /**
-     * Adds the classes to the top-level element.
+     * Adds the classes to the button.
+     * Use this instead of `class` to style the button, because the button is wrapped inside
+     * a div for the tooltip and `class` would be applied to the wrapping div.
      */
-    readonly addClass: StringConstructor;
+    readonly buttonClass: StringConstructor;
     /**
      * This is called, when the button is clicked.
      */
@@ -66,8 +69,9 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: PropType<import("../utils/tailwind").TWMaxWidth>;
         readonly default: "max-w-xs";
     };
-    readonly tooltipWrapperAddClass: StringConstructor;
-    readonly tooltipContentAddClass: StringConstructor;
+    readonly tooltipWrapperClass: StringConstructor;
+    readonly tooltipContentClass: StringConstructor;
+    readonly tooltipArrowClass: StringConstructor;
     /**
      * The color of the button.
      */
@@ -96,9 +100,11 @@ declare const _default: import("vue").DefineComponent<{
      */
     readonly small: BooleanConstructor;
     /**
-     * Adds the classes to the top-level element.
+     * Adds the classes to the button.
+     * Use this instead of `class` to style the button, because the button is wrapped inside
+     * a div for the tooltip and `class` would be applied to the wrapping div.
      */
-    readonly addClass: StringConstructor;
+    readonly buttonClass: StringConstructor;
     /**
      * This is called, when the button is clicked.
      */
@@ -116,8 +122,9 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: PropType<import("../utils/tailwind").TWMaxWidth>;
         readonly default: "max-w-xs";
     };
-    readonly tooltipWrapperAddClass: StringConstructor;
-    readonly tooltipContentAddClass: StringConstructor;
+    readonly tooltipWrapperClass: StringConstructor;
+    readonly tooltipContentClass: StringConstructor;
+    readonly tooltipArrowClass: StringConstructor;
     /**
      * The color of the button.
      */
@@ -146,9 +153,11 @@ declare const _default: import("vue").DefineComponent<{
      */
     readonly small: BooleanConstructor;
     /**
-     * Adds the classes to the top-level element.
+     * Adds the classes to the button.
+     * Use this instead of `class` to style the button, because the button is wrapped inside
+     * a div for the tooltip and `class` would be applied to the wrapping div.
      */
-    readonly addClass: StringConstructor;
+    readonly buttonClass: StringConstructor;
     /**
      * This is called, when the button is clicked.
      */

package/components/NButton.js

@@ -32,9 +32,11 @@ export const nButtonProps = {
    */
   small: Boolean,
   /**
-   * Adds the classes to the top-level element.
+   * Adds the classes to the button.
+   * Use this instead of `class` to style the button, because the button is wrapped inside
+   * a div for the tooltip and `class` would be applied to the wrapping div.
    */
-  addClass: String,
+  buttonClass: String,
   /**
    * This is called, when the button is clicked.
    */
@@ -52,7 +54,7 @@ export default createComponent('NButton', nButtonProps, (props, {
     default: () => [_createVNode("button", {
       "disabled": isDisabled.value,
       "type": props.type,
-      "class": [`block w-full font-medium rounded-md focus:outline-none focus-visible:ring-2 shadow text-${props.color}-900 relative`, isDisabled.value ? `bg-${props.color}-100 text-opacity-20 cursor-default` : `bg-${props.color}-200 hover:bg-${props.color}-300 focus-visible:ring-${props.color}-500`, props.small ? 'py-1 px-2 text-xs' : 'py-2 px-4 text-sm', props.addClass],
+      "class": [`block w-full font-medium rounded-md focus:outline-none focus-visible:ring-2 shadow text-${props.color}-900 relative`, isDisabled.value ? `bg-${props.color}-100 text-opacity-20 cursor-default` : `bg-${props.color}-200 hover:bg-${props.color}-300 focus-visible:ring-${props.color}-500`, props.small ? 'py-1 px-2 text-xs' : 'py-2 px-4 text-sm', props.buttonClass],
       "onClick": props.onClick
     }, [_createVNode("span", {
       "class": {

package/components/NCheckbox.d.ts

@@ -10,10 +10,6 @@ export declare const nCheckboxProps: {
      * If set to `true` the checkbox is disabled and no interaction is possible.
      */
     readonly disabled: BooleanConstructor;
-    /**
-     * Adds the classes to the top-level element.
-     */
-    readonly addClass: StringConstructor;
     readonly value: import("vue").PropType<boolean>;
     readonly onUpdateValue: import("vue").PropType<(newValue: boolean) => void>;
 };
@@ -32,10 +28,6 @@ declare const _default: import("vue").DefineComponent<{
      * If set to `true` the checkbox is disabled and no interaction is possible.
      */
     readonly disabled: BooleanConstructor;
-    /**
-     * Adds the classes to the top-level element.
-     */
-    readonly addClass: StringConstructor;
     readonly value: import("vue").PropType<boolean>;
     readonly onUpdateValue: import("vue").PropType<(newValue: boolean) => void>;
 }, import("vue").RenderFunction, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, never[], never, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
@@ -50,10 +42,6 @@ declare const _default: import("vue").DefineComponent<{
      * If set to `true` the checkbox is disabled and no interaction is possible.
      */
     readonly disabled: BooleanConstructor;
-    /**
-     * Adds the classes to the top-level element.
-     */
-    readonly addClass: StringConstructor;
     readonly value: import("vue").PropType<boolean>;
     readonly onUpdateValue: import("vue").PropType<(newValue: boolean) => void>;
 }>> & {}, {

package/components/NCheckbox.js

@@ -14,11 +14,7 @@ export const nCheckboxProps = {
   /**
    * If set to `true` the checkbox is disabled and no interaction is possible.
    */
-  disabled: Boolean,
-  /**
-   * Adds the classes to the top-level element.
-   */
-  addClass: String
+  disabled: Boolean
 };
 /**
  * The `NCheckbox` is a styled checkbox.
@@ -41,6 +37,6 @@ export default createComponent('NCheckbox', nCheckboxProps, props => {
     "disabled": props.disabled,
     "onClick": toggle,
     "key": updateKey.value,
-    "class": [`h-5 w-5 border-default-300 rounded focus:outline-none focus:ring-0 focus-visible:ring-2 focus-visible:ring-${props.color}-500`, props.disabled ? `cursor-default bg-default-100 text-${props.color}-200` : `cursor-pointer text-${props.color}-400`, props.addClass]
+    "class": [`h-5 w-5 border-default-300 rounded focus:outline-none focus:ring-0 focus-visible:ring-2 focus-visible:ring-${props.color}-500`, props.disabled ? `cursor-default bg-default-100 text-${props.color}-200` : `cursor-pointer text-${props.color}-400`]
   }, null);
 });

package/components/NCheckboxLabel.d.ts

@@ -16,7 +16,6 @@ export declare const nCheckboxLabelProps: {
         readonly default: "primary";
     };
     readonly disabled: BooleanConstructor;
-    readonly addClass: StringConstructor;
     readonly value: import("vue").PropType<boolean>;
     readonly onUpdateValue: import("vue").PropType<(newValue: boolean) => void>;
 };
@@ -41,7 +40,6 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: "primary";
     };
     readonly disabled: BooleanConstructor;
-    readonly addClass: StringConstructor;
     readonly value: import("vue").PropType<boolean>;
     readonly onUpdateValue: import("vue").PropType<(newValue: boolean) => void>;
 }, import("vue").RenderFunction, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, never[], never, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
@@ -62,7 +60,6 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: "primary";
     };
     readonly disabled: BooleanConstructor;
-    readonly addClass: StringConstructor;
     readonly value: import("vue").PropType<boolean>;
     readonly onUpdateValue: import("vue").PropType<(newValue: boolean) => void>;
 }>> & {}, {

package/components/NCheckboxLabel.js

@@ -1,5 +1,4 @@
 import { createVNode as _createVNode } from "vue";
-import { computed } from 'vue';
 import { createComponent } from '../utils/component';
 import NCheckbox, { nCheckboxProps } from './NCheckbox';
 export const nCheckboxLabelProps = {
@@ -24,14 +23,9 @@ export default createComponent('NCheckboxLabel', nCheckboxLabelProps, props => {
   const toggleValue = () => {
     if (!props.disabled) props.onUpdateValue?.(!props.value);
   };
-  // addClass is not passed as it is used on the top-level element.
-  const childProps = computed(() => ({
-    ...props,
-    addClass: undefined
-  }));
   return () => _createVNode("div", {
-    "class": `flex items-center ${props.addClass}`
-  }, [_createVNode(NCheckbox, childProps.value, null), _createVNode("div", {
+    "class": `flex items-center`
+  }, [_createVNode(NCheckbox, props, null), _createVNode("div", {
     "class": `${props.compact ? 'ml-2' : 'ml-3'} text-sm`
   }, [_createVNode("label", {
     "onClick": toggleValue,

package/components/NDropdown.d.ts

@@ -1,5 +1,6 @@
 import { type PropType } from 'vue';
 import { type RouteLocationRaw } from 'vue-router';
+import { MenuButton } from '@headlessui/vue';
 import type { HeroIcon } from '../utils/tailwind';
 export declare const nDropdownProps: {
     /**
@@ -24,13 +25,15 @@ export declare const nDropdownProps: {
      */
     readonly disabled: BooleanConstructor;
     /**
-     * A slot to replace the button of the dropdown.
+     * Adds the classes to the Button of the dropdown.
      */
-    readonly button: PropType<() => JSX.Element>;
+    readonly buttonClass: StringConstructor;
     /**
-     * Adds the classes to the top-level element.
+     * A slot to replace the button of the dropdown.
+     * The passed parameter is the HeadlessUI `MenuButton` which should be
+     * used to create the button for the Dropdown to work properly.
      */
-    readonly addClass: StringConstructor;
+    readonly button: PropType<(button: typeof MenuButton) => JSX.Element>;
 };
 export type DropdownItem = {
     /**
@@ -83,13 +86,49 @@ declare const _default: import("vue").DefineComponent<{
      */
     readonly disabled: BooleanConstructor;
     /**
-     * A slot to replace the button of the dropdown.
+     * Adds the classes to the Button of the dropdown.
      */
-    readonly button: PropType<() => JSX.Element>;
+    readonly buttonClass: StringConstructor;
     /**
-     * Adds the classes to the top-level element.
-     */
-    readonly addClass: StringConstructor;
+     * A slot to replace the button of the dropdown.
+     * The passed parameter is the HeadlessUI `MenuButton` which should be
+     * used to create the button for the Dropdown to work properly.
+     */
+    readonly button: PropType<(button: import("vue").DefineComponent<{
+        disabled: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        as: {
+            type: (ObjectConstructor | StringConstructor)[];
+            default: string;
+        };
+        id: {
+            type: StringConstructor;
+            default: () => string;
+        };
+    }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }> | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>[] | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+        disabled: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        as: {
+            type: (ObjectConstructor | StringConstructor)[];
+            default: string;
+        };
+        id: {
+            type: StringConstructor;
+            default: () => string;
+        };
+    }>>, {
+        as: string | Record<string, any>;
+        disabled: boolean;
+        id: string;
+    }>) => JSX.Element>;
 }, import("vue").RenderFunction, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, never[], never, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     /**
      * The title of the dropdown-button.
@@ -113,13 +152,49 @@ declare const _default: import("vue").DefineComponent<{
      */
     readonly disabled: BooleanConstructor;
     /**
-     * A slot to replace the button of the dropdown.
+     * Adds the classes to the Button of the dropdown.
      */
-    readonly button: PropType<() => JSX.Element>;
+    readonly buttonClass: StringConstructor;
     /**
-     * Adds the classes to the top-level element.
-     */
-    readonly addClass: StringConstructor;
+     * A slot to replace the button of the dropdown.
+     * The passed parameter is the HeadlessUI `MenuButton` which should be
+     * used to create the button for the Dropdown to work properly.
+     */
+    readonly button: PropType<(button: import("vue").DefineComponent<{
+        disabled: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        as: {
+            type: (ObjectConstructor | StringConstructor)[];
+            default: string;
+        };
+        id: {
+            type: StringConstructor;
+            default: () => string;
+        };
+    }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }> | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>[] | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+        disabled: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        as: {
+            type: (ObjectConstructor | StringConstructor)[];
+            default: string;
+        };
+        id: {
+            type: StringConstructor;
+            default: () => string;
+        };
+    }>>, {
+        as: string | Record<string, any>;
+        disabled: boolean;
+        id: string;
+    }>) => JSX.Element>;
 }>> & {}, {
     readonly right: boolean;
     readonly disabled: boolean;

package/components/NDropdown.js

@@ -30,13 +30,15 @@ export const nDropdownProps = {
    */
   disabled: Boolean,
   /**
-   * A slot to replace the button of the dropdown.
+   * Adds the classes to the Button of the dropdown.
    */
-  button: Function,
+  buttonClass: String,
   /**
-   * Adds the classes to the top-level element.
+   * A slot to replace the button of the dropdown.
+   * The passed parameter is the HeadlessUI `MenuButton` which should be
+   * used to create the button for the Dropdown to work properly.
    */
-  addClass: String
+  button: Function
 };
 /**
  * The `NDropdown` consists of a button and a panel with multiple actions.
@@ -56,13 +58,13 @@ export default createComponentWithSlots('NDropdown', nDropdownProps, ['button'],
   }, null), _createVNode("span", null, [item.label])]);
   return () => _createVNode(Menu, {
     "as": "div",
-    "class": `relative inline-block text-left ${props.addClass}`
+    "class": `relative inline-block text-left`
   }, {
     default: () => [_createVNode("div", {
       "class": "flex"
-    }, [props.button?.() || _createVNode(MenuButton, {
+    }, [props.button?.(MenuButton) || _createVNode(MenuButton, {
       "disabled": props.disabled,
-      "class": ['shadow w-full flex justify-between items-center text-default-700 rounded-md border bg-white border-default-300 px-4 py-2 text-sm font-medium focus:outline-none focus:ring-offset-2 focus-visible:ring-2 focus-visible:ring-primary-500', props.disabled ? 'text-opacity-20 cursor-default' : 'hover:bg-default-100']
+      "class": ['shadow w-full flex justify-between items-center text-default-700 rounded-md border bg-white border-default-300 px-4 py-2 text-sm font-medium focus:outline-none focus:ring-offset-2 focus-visible:ring-2 focus-visible:ring-primary-500', props.disabled ? 'text-opacity-20 cursor-default' : 'hover:bg-default-100', props.buttonClass]
     }, {
       default: () => [_createVNode("span", null, [props.title]), _createVNode(ChevronDownIcon, {
         "class": "-mr-1 ml-2 h-5 w-5 flex-shrink-0",

package/components/NDropzone.d.ts

@@ -46,10 +46,6 @@ export declare const nDropzoneProps: {
         readonly type: StringConstructor;
         readonly default: "min-h-36";
     };
-    /**
-     * Adds the classes to the top-level element.
-     */
-    readonly addClass: StringConstructor;
     readonly value: import("vue").PropType<File[]>;
     readonly onUpdateValue: import("vue").PropType<(newValue: File[]) => void>;
 };
@@ -105,10 +101,6 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: StringConstructor;
         readonly default: "min-h-36";
     };
-    /**
-     * Adds the classes to the top-level element.
-     */
-    readonly addClass: StringConstructor;
     readonly value: import("vue").PropType<File[]>;
     readonly onUpdateValue: import("vue").PropType<(newValue: File[]) => void>;
 }, import("vue").RenderFunction, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, never[], never, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
@@ -159,10 +151,6 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: StringConstructor;
         readonly default: "min-h-36";
     };
-    /**
-     * Adds the classes to the top-level element.
-     */
-    readonly addClass: StringConstructor;
     readonly value: import("vue").PropType<File[]>;
     readonly onUpdateValue: import("vue").PropType<(newValue: File[]) => void>;
 }>> & {}, {