@naptics/vue-collection 0.1.0 → 0.1.2

package/components/NAlert.d.ts

@@ -16,6 +16,10 @@ 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.
      */
@@ -41,6 +45,10 @@ 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.
      */
@@ -61,6 +69,10 @@ 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,6 +20,10 @@ 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.
    */
@@ -29,10 +33,12 @@ export const nAlertProps = {
  * The `NAlert` is a fully styled alert with multiple variants.
  * It can be used as a normal blocking element or as part of an alert queue.
  */
-export default createComponent('NAlert', nAlertProps, props => {
+export default createComponent('NAlert', nAlertProps, (props, {
+  slots
+}) => {
   const variant = computed(() => VARIANTS[props.variant]);
   return () => _createVNode("div", {
-    "class": `rounded-md p-3 shadow-lg bg-${variant.value.color}-50`
+    "class": `rounded-md p-3 shadow-lg bg-${variant.value.color}-50 ${props.addClass}`
   }, [_createVNode("div", {
     "class": "flex items-center"
   }, [_createVNode("div", {
@@ -41,7 +47,7 @@ export default createComponent('NAlert', nAlertProps, props => {
     "class": "ml-3 flex-grow"
   }, [_createVNode("p", {
     "class": `text-sm font-medium text-${variant.value.color}-900`
-  }, [props.text])]), !props.hideX && _createVNode("div", {
+  }, [slots.default?.() ?? props.text])]), !props.hideX && _createVNode("div", {
     "class": "flex items-center flex-shrink-0 ml-3"
   }, [_createVNode(NIconButton, {
     "color": variant.value.color,

package/components/NBadge.d.ts

@@ -13,6 +13,8 @@ export declare const nBadgeProps: {
         readonly type: PropType<import("../utils/tailwind").TWMaxWidth>;
         readonly default: "max-w-xs";
     };
+    readonly tooltipWrapperAddClass: StringConstructor;
+    readonly tooltipContentAddClass: StringConstructor;
     /**
      * The text of the badge. Can alternatively be passed in the default slot.
      */
@@ -52,6 +54,10 @@ export declare const nBadgeProps: {
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    /**
+     * Adds the classes to the top-level element.
+     */
+    readonly addClass: StringConstructor;
 };
 /**
  * The `NBadge` is a styled element to wrap a text.
@@ -69,6 +75,8 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: PropType<import("../utils/tailwind").TWMaxWidth>;
         readonly default: "max-w-xs";
     };
+    readonly tooltipWrapperAddClass: StringConstructor;
+    readonly tooltipContentAddClass: StringConstructor;
     /**
      * The text of the badge. Can alternatively be passed in the default slot.
      */
@@ -108,6 +116,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    /**
+     * Adds the classes to the top-level element.
+     */
+    readonly addClass: 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>;
@@ -121,6 +133,8 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: PropType<import("../utils/tailwind").TWMaxWidth>;
         readonly default: "max-w-xs";
     };
+    readonly tooltipWrapperAddClass: StringConstructor;
+    readonly tooltipContentAddClass: StringConstructor;
     /**
      * The text of the badge. Can alternatively be passed in the default slot.
      */
@@ -160,6 +174,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    /**
+     * Adds the classes to the top-level element.
+     */
+    readonly addClass: StringConstructor;
 }>> & {}, {
     readonly color: string;
     readonly shade: number;

package/components/NBadge.js

@@ -41,6 +41,10 @@ export const nBadgeProps = {
     type: Boolean,
     default: true
   },
+  /**
+   * Adds the classes to the top-level element.
+   */
+  addClass: String,
   ...nToolTipPropsForImplementor
 };
 /**
@@ -51,7 +55,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' : '']
+      "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]
     }, [slots.default?.() || props.text])]
   });
 });

package/components/NBreadcrub.d.ts

@@ -38,6 +38,10 @@ export declare const nBreadcrumbProps: {
         readonly type: NumberConstructor;
         readonly default: 5;
     };
+    /**
+     * Adds the classes to the top-level element.
+     */
+    readonly addClass: StringConstructor;
     /**
      * A slot the replace the breadcrumb labels.
      */
@@ -97,6 +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;
     /**
      * A slot the replace the breadcrumb labels.
      */
@@ -142,6 +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;
     /**
      * A slot the replace the breadcrumb labels.
      */

package/components/NBreadcrub.js

@@ -38,6 +38,10 @@ export const nBreadcrumbProps = {
     type: Number,
     default: 5
   },
+  /**
+   * Adds the classes to the top-level element.
+   */
+  addClass: String,
   /**
    * A slot the replace the breadcrumb labels.
    */
@@ -53,7 +57,7 @@ export const nBreadcrumbProps = {
  */
 export default createComponent('NBreadcrumb', nBreadcrumbProps, props => {
   return () => _createVNode("div", {
-    "class": "flex flex-wrap items-center"
+    "class": `flex flex-wrap items-center ${props.addClass}`
   }, [props.items.map((item, index) => _createVNode(_Fragment, null, [props.item?.(item, index) || _createVNode(NLink, {
     "textSize": props.textSize,
     "route": item.route,

package/components/NButton.d.ts

@@ -12,6 +12,8 @@ export declare const nButtonProps: {
         readonly type: PropType<import("../utils/tailwind").TWMaxWidth>;
         readonly default: "max-w-xs";
     };
+    readonly tooltipWrapperAddClass: StringConstructor;
+    readonly tooltipContentAddClass: StringConstructor;
     /**
      * The color of the button.
      */
@@ -39,6 +41,10 @@ export declare const nButtonProps: {
      * If set to `true` the button will appear smaller.
      */
     readonly small: BooleanConstructor;
+    /**
+     * Adds the classes to the top-level element.
+     */
+    readonly addClass: StringConstructor;
     /**
      * This is called, when the button is clicked.
      */
@@ -60,6 +66,8 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: PropType<import("../utils/tailwind").TWMaxWidth>;
         readonly default: "max-w-xs";
     };
+    readonly tooltipWrapperAddClass: StringConstructor;
+    readonly tooltipContentAddClass: StringConstructor;
     /**
      * The color of the button.
      */
@@ -87,6 +95,10 @@ declare const _default: import("vue").DefineComponent<{
      * If set to `true` the button will appear smaller.
      */
     readonly small: BooleanConstructor;
+    /**
+     * Adds the classes to the top-level element.
+     */
+    readonly addClass: StringConstructor;
     /**
      * This is called, when the button is clicked.
      */
@@ -104,6 +116,8 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: PropType<import("../utils/tailwind").TWMaxWidth>;
         readonly default: "max-w-xs";
     };
+    readonly tooltipWrapperAddClass: StringConstructor;
+    readonly tooltipContentAddClass: StringConstructor;
     /**
      * The color of the button.
      */
@@ -131,6 +145,10 @@ declare const _default: import("vue").DefineComponent<{
      * If set to `true` the button will appear smaller.
      */
     readonly small: BooleanConstructor;
+    /**
+     * Adds the classes to the top-level element.
+     */
+    readonly addClass: StringConstructor;
     /**
      * This is called, when the button is clicked.
      */

package/components/NButton.js

@@ -31,6 +31,10 @@ export const nButtonProps = {
    * If set to `true` the button will appear smaller.
    */
   small: Boolean,
+  /**
+   * Adds the classes to the top-level element.
+   */
+  addClass: String,
   /**
    * This is called, when the button is clicked.
    */
@@ -48,7 +52,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'],
+      "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],
       "onClick": props.onClick
     }, [_createVNode("span", {
       "class": {

package/components/NCheckbox.d.ts

@@ -10,6 +10,10 @@ 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>;
 };
@@ -28,6 +32,10 @@ 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<{
@@ -42,6 +50,10 @@ 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,7 +14,11 @@ export const nCheckboxProps = {
   /**
    * If set to `true` the checkbox is disabled and no interaction is possible.
    */
-  disabled: Boolean
+  disabled: Boolean,
+  /**
+   * Adds the classes to the top-level element.
+   */
+  addClass: String
 };
 /**
  * The `NCheckbox` is a styled checkbox.
@@ -37,6 +41,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`]
+    "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]
   }, null);
 });

package/components/NCheckboxLabel.d.ts

@@ -16,6 +16,7 @@ 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>;
 };
@@ -40,6 +41,7 @@ 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<{
@@ -60,6 +62,7 @@ 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,4 +1,5 @@
 import { createVNode as _createVNode } from "vue";
+import { computed } from 'vue';
 import { createComponent } from '../utils/component';
 import NCheckbox, { nCheckboxProps } from './NCheckbox';
 export const nCheckboxLabelProps = {
@@ -23,9 +24,14 @@ 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"
-  }, [_createVNode(NCheckbox, props, null), _createVNode("div", {
+    "class": `flex items-center ${props.addClass}`
+  }, [_createVNode(NCheckbox, childProps.value, null), _createVNode("div", {
     "class": `${props.compact ? 'ml-2' : 'ml-3'} text-sm`
   }, [_createVNode("label", {
     "onClick": toggleValue,

package/components/NDropdown.d.ts

@@ -27,6 +27,10 @@ export declare const nDropdownProps: {
      * A slot to replace the button of the dropdown.
      */
     readonly button: PropType<() => JSX.Element>;
+    /**
+     * Adds the classes to the top-level element.
+     */
+    readonly addClass: StringConstructor;
 };
 export type DropdownItem = {
     /**
@@ -82,6 +86,10 @@ declare const _default: import("vue").DefineComponent<{
      * A slot to replace the button of the dropdown.
      */
     readonly button: PropType<() => JSX.Element>;
+    /**
+     * Adds the classes to the top-level element.
+     */
+    readonly addClass: 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<{
     /**
      * The title of the dropdown-button.
@@ -108,6 +116,10 @@ declare const _default: import("vue").DefineComponent<{
      * A slot to replace the button of the dropdown.
      */
     readonly button: PropType<() => JSX.Element>;
+    /**
+     * Adds the classes to the top-level element.
+     */
+    readonly addClass: StringConstructor;
 }>> & {}, {
     readonly right: boolean;
     readonly disabled: boolean;

package/components/NDropdown.js

@@ -32,7 +32,11 @@ export const nDropdownProps = {
   /**
    * A slot to replace the button of the dropdown.
    */
-  button: Function
+  button: Function,
+  /**
+   * Adds the classes to the top-level element.
+   */
+  addClass: String
 };
 /**
  * The `NDropdown` consists of a button and a panel with multiple actions.
@@ -52,7 +56,7 @@ export default createComponent('NDropdown', nDropdownProps, (props, {
   }, null), _createVNode("span", null, [item.label])]);
   return () => _createVNode(Menu, {
     "as": "div",
-    "class": "relative inline-block text-left"
+    "class": `relative inline-block text-left ${props.addClass}`
   }, {
     default: () => [_createVNode("div", {
       "class": "flex"

package/components/NDropzone.d.ts

@@ -46,6 +46,10 @@ 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>;
 };
@@ -101,6 +105,10 @@ 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<{
@@ -151,6 +159,10 @@ 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>;
 }>> & {}, {

package/components/NDropzone.js

@@ -60,7 +60,11 @@ export const nDropzoneProps = {
   height: {
     type: String,
     default: 'min-h-36'
-  }
+  },
+  /**
+   * Adds the classes to the top-level element.
+   */
+  addClass: String
 };
 /**
  * The `NDropzone` is an area where files can be added by the user by drag & drop.
@@ -143,7 +147,7 @@ export default createComponent('NDropzone', nDropzoneProps, props => {
   return () => {
     let _slot;
     return _createVNode("div", null, [_createVNode("button", {
-      "class": ['block w-full rounded-md border-dashed border-2 hover:border-primary-300 hover:bg-primary-50 focus-visible:border-primary-500 focus:outline-none ', 'flex flex-col items-center justify-center text-center text-sm select-none hover:text-primary-700 p-4', isDragOver.value ? 'border-primary-300 bg-primary-50 text-primary-700' : 'border-default-300 bg-default-50 text-default-500', props.height],
+      "class": ['block w-full rounded-md border-dashed border-2 hover:border-primary-300 hover:bg-primary-50 focus-visible:border-primary-500 focus:outline-none ', 'flex flex-col items-center justify-center text-center text-sm select-none hover:text-primary-700 p-4', isDragOver.value ? 'border-primary-300 bg-primary-50 text-primary-700' : 'border-default-300 bg-default-50 text-default-500', props.height, props.addClass],
       "onDrop": onDrop,
       "onDragover": onDragOver,
       "onDragleave": onDragLeave,

package/components/NIconButton.d.ts

@@ -16,6 +16,8 @@ export declare const nIconButtonProps: {
         readonly type: PropType<import("../utils/tailwind").TWMaxWidth>;
         readonly default: "max-w-xs";
     };
+    readonly tooltipWrapperAddClass: StringConstructor;
+    readonly tooltipContentAddClass: StringConstructor;
     /**
      * The icon of the icon-button.
      */
@@ -59,6 +61,10 @@ export declare const nIconButtonProps: {
      * If set to `true` the icon-button is disabled and no interaction is possible.
      */
     readonly disabled: BooleanConstructor;
+    /**
+     * Adds the classes to the top-level element.
+     */
+    readonly addClass: StringConstructor;
     /**
      * This is called when the icon-button is clicked.
      * It is only called when the `route` prop is not set on the icon-button.
@@ -83,6 +89,8 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: PropType<import("../utils/tailwind").TWMaxWidth>;
         readonly default: "max-w-xs";
     };
+    readonly tooltipWrapperAddClass: StringConstructor;
+    readonly tooltipContentAddClass: StringConstructor;
     /**
      * The icon of the icon-button.
      */
@@ -126,6 +134,10 @@ declare const _default: import("vue").DefineComponent<{
      * If set to `true` the icon-button is disabled and no interaction is possible.
      */
     readonly disabled: BooleanConstructor;
+    /**
+     * Adds the classes to the top-level element.
+     */
+    readonly addClass: StringConstructor;
     /**
      * This is called when the icon-button is clicked.
      * It is only called when the `route` prop is not set on the icon-button.
@@ -146,6 +158,8 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: PropType<import("../utils/tailwind").TWMaxWidth>;
         readonly default: "max-w-xs";
     };
+    readonly tooltipWrapperAddClass: StringConstructor;
+    readonly tooltipContentAddClass: StringConstructor;
     /**
      * The icon of the icon-button.
      */
@@ -189,6 +203,10 @@ declare const _default: import("vue").DefineComponent<{
      * If set to `true` the icon-button is disabled and no interaction is possible.
      */
     readonly disabled: BooleanConstructor;
+    /**
+     * Adds the classes to the top-level element.
+     */
+    readonly addClass: StringConstructor;
     /**
      * This is called when the icon-button is clicked.
      * It is only called when the `route` prop is not set on the icon-button.

package/components/NIconButton.js

@@ -47,6 +47,10 @@ export const nIconButtonProps = {
    * If set to `true` the icon-button is disabled and no interaction is possible.
    */
   disabled: Boolean,
+  /**
+   * Adds the classes to the top-level element.
+   */
+  addClass: String,
   /**
    * This is called when the icon-button is clicked.
    * It is only called when the `route` prop is not set on the icon-button.
@@ -58,7 +62,7 @@ export const nIconButtonProps = {
  * The `NIconButton` is a regular button which does not have any text but an icon instead.
  */
 export default createComponent('NIconButton', nIconButtonProps, props => {
-  const classes = () => ['block p-0.5 rounded-md focus:outline-none focus-visible:ring-2 -m-1', props.disabled ? `text-${props.color}-200 cursor-default` : `hover:bg-${props.color}-${props.shade} hover:bg-opacity-10 text-${props.color}-${props.shade} focus-visible:ring-${props.color}-${props.shade} cursor-pointer`];
+  const classes = () => ['block p-0.5 rounded-md focus:outline-none focus-visible:ring-2 -m-1', props.disabled ? `text-${props.color}-200 cursor-default` : `hover:bg-${props.color}-${props.shade} hover:bg-opacity-10 text-${props.color}-${props.shade} focus-visible:ring-${props.color}-${props.shade} cursor-pointer`, props.addClass];
   const content = () => _createVNode(props.icon, {
     "class": `w-${props.size} h-${props.size}`
   }, null);

package/components/NIconCircle.d.ts

@@ -41,6 +41,10 @@ export declare const nIconCircleProps: {
         readonly type: NumberConstructor;
         readonly default: 100;
     };
+    /**
+     * Adds the classes to the top-level element.
+     */
+    readonly addClass: StringConstructor;
 };
 /**
  * The `NIconCircle` is an icon with a colored circle around it.
@@ -86,6 +90,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: NumberConstructor;
         readonly default: 100;
     };
+    /**
+     * Adds the classes to the top-level element.
+     */
+    readonly addClass: 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<{
     /**
      * The icon of the icon-circle.
@@ -127,6 +135,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: NumberConstructor;
         readonly default: 100;
     };
+    /**
+     * Adds the classes to the top-level element.
+     */
+    readonly addClass: StringConstructor;
 }>> & {}, {
     readonly color: string;
     readonly iconShade: number;

package/components/NIconCircle.js

@@ -40,7 +40,11 @@ export const nIconCircleProps = {
   bgShade: {
     type: Number,
     default: 100
-  }
+  },
+  /**
+   * Adds the classes to the top-level element.
+   */
+  addClass: String
 };
 const DEFAULT_CIRCLE_SIZE = 16;
 const SCALING_FACTOR = 0.55;
@@ -57,7 +61,7 @@ export default createComponent('NIconCircle', nIconCircleProps, props => {
   circleSize *= 4;
   iconSize *= 4;
   return () => _createVNode("div", {
-    "class": ['flex items-center justify-center rounded-full', `bg-${props.color}-${props.bgShade}`],
+    "class": ['flex items-center justify-center rounded-full', `bg-${props.color}-${props.bgShade}`, props.addClass],
     "style": `width: ${circleSize}px; height: ${circleSize}px`
   }, [_createVNode("div", {
     "class": `text-${props.color}-${props.iconShade}`,