v0.47.2

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.47.2
+
+### Patch Changes
+
+- fix: #1470 #1467 #1031
+
 ## 0.47.1
 
 ### Patch Changes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.47.1",
+  "version": "0.47.2",
   "description": "Flowbite components for Svelte",
   "main": "dist/index.js",
   "packageManager": "[email protected]",
@@ -31,7 +31,7 @@
     "gen:compo-data": "svelte-lib-helpers component-data",
     "gen:componentData": "svelte-lib-helpers component-data",
     "copy:package": "svelte-lib-helpers package",
-    "lib-helpers": "npm run gen:docs && npm run gen:componentData && npm run package && npm run gen:exports && npm run copy:package && npm run format",
+    "lib-helpers": "pnpm format && pnpm gen:docs && pnpm gen:componentData && pnpm package && pnpm gen:exports && pnpm copy:package",
     "package:publish": "standard-version && git push --follow-tags origin main && npm publish"
   },
   "devDependencies": {
@@ -756,4 +756,4 @@
     },
     "./package.json": "./package.json"
   }
-}
+}

src/lib/accordion/Accordion.svelte

@@ -60,4 +60,6 @@
 @prop export let activeClass: $$Props['activeClass'] = 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800';
 @prop export let inactiveClass: $$Props['inactiveClass'] = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 hover:dark:bg-gray-800';
 @prop export let defaultClass: $$Props['defaultClass'] = 'text-gray-500 dark:text-gray-400';
+@prop export let classActive: $$Props['classActive'] = '';
+@prop export let classInactive: $$Props['classInactive'] = '';
 -->

src/lib/banner/Banner.svelte

@@ -82,4 +82,6 @@
 @prop export let bannerStatus: $$Props['bannerStatus'] = true;
 @prop export let transition: NonNullable<$$Props['transition']> = fade;
 @prop export let params: $$Props['params'] = {};
+@prop export let classDiv: $$Props['classDiv'] = '';
+@prop export let classInner: $$Props['classInner'] = '';
 -->

src/lib/bottom-navigation/BottomNav.svelte

@@ -90,4 +90,7 @@
 @prop export let outerClass: $$Props['outerClass'] = 'w-full z-50 border-gray-200 dark:bg-gray-700 dark:border-gray-600';
 @prop export let innerClass: $$Props['innerClass'] = 'grid h-full max-w-lg mx-auto';
 @prop export let activeClass: $$Props['activeClass'] = 'text-primary-700 dark:text-primary-700 hover:text-primary-900 dark:hover:text-primary-900';
+@prop export let classActive: $$Props['classActive'] = '';
+@prop export let classOuter: $$Props['classOuter'] = '';
+@prop export let classInner: $$Props['classInner'] = '';
 -->

src/lib/bottom-navigation/BottomNavHeader.svelte

@@ -27,4 +27,6 @@
 ## Props
 @prop export let outerClass: $$Props['outerClass'] = 'w-full';
 @prop export let innerClass: $$Props['innerClass'] = 'grid max-w-xs grid-cols-3 gap-1 p-1 mx-auto my-2 bg-gray-100 rounded-lg dark:bg-gray-600';
+@prop export let classOuter: $$Props['classOuter'] = '';
+@prop export let classInner: $$Props['classInner'] = '';
 -->

src/lib/breadcrumb/Breadcrumb.svelte

@@ -35,4 +35,5 @@
 @prop export let solidClass: NonNullable<$$Props['solidClass']> = 'flex px-5 py-3 text-gray-700 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700';
 @prop export let olClass: $$Props['olClass'] = 'inline-flex items-center space-x-1 rtl:space-x-reverse md:space-x-3 rtl:space-x-reverse';
 @prop export let ariaLabel: $$Props['ariaLabel'] = 'Breadcrumb';
+@prop export let classOl: $$Props['classOl'] = '';
 -->

src/lib/breadcrumb/BreadcrumbItem.svelte

@@ -64,4 +64,7 @@
 @prop export let linkClass: $$Props['linkClass'] = 'ms-1 text-sm font-medium text-gray-700 hover:text-gray-900 md:ms-2 dark:text-gray-400 dark:hover:text-white';
 @prop export let spanClass: $$Props['spanClass'] = 'ms-1 text-sm font-medium text-gray-500 md:ms-2 dark:text-gray-400';
 @prop export let homeClass: $$Props['homeClass'] = 'inline-flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white';
+@prop export let classHome: $$Props['classHome'] = '';
+@prop export let classLink: $$Props['classLink'] = '';
+@prop export let classSpan: $$Props['classSpan'] = '';
 -->

src/lib/device-mockups/Android.svelte

@@ -54,4 +54,10 @@
 @prop export let leftMid: $$Props['leftMid'] = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
 @prop export let leftBot: $$Props['leftBot'] = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
 @prop export let right: $$Props['right'] = 'h-[64px] w-[3px] bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
+@prop export let classTop: $$Props['classTop'] = '';
+@prop export let classLeftTop: $$Props['classLeftTop'] = '';
+@prop export let classLeftMid: $$Props['classLeftMid'] = '';
+@prop export let classLeftBot: $$Props['classLeftBot'] = '';
+@prop export let classRight: $$Props['classRight'] = '';
+@prop export let classSlot: $$Props['classSlot'] = '';
 -->

src/lib/device-mockups/DefaultMockup.svelte

@@ -48,4 +48,9 @@
 @prop export let leftTop: $$Props['leftTop'] = 'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
 @prop export let leftBot: $$Props['leftBot'] = 'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
 @prop export let right: $$Props['right'] = 'h-[64px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
+@prop export let classTop: $$Props['classTop'] = '';
+@prop export let classLeftTop: $$Props['classLeftTop'] = '';
+@prop export let classLeftBot: $$Props['classLeftBot'] = '';
+@prop export let classRight: $$Props['classRight'] = '';
+@prop export let classSlot: $$Props['classSlot'] = '';
 -->

src/lib/device-mockups/Desktop.svelte

@@ -36,4 +36,7 @@
 @prop export let bot: $$Props['bot'] = 'relative mx-auto bg-gray-900 dark:bg-gray-700 rounded-b-xl h-[24px] max-w-[301px] md:h-[42px] md:max-w-[512px]';
 @prop export let botUnder: $$Props['botUnder'] = 'relative mx-auto bg-gray-800 rounded-b-xl h-[55px] max-w-[83px] md:h-[95px] md:max-w-[142px]';
 @prop export let div: $$Props['div'] = 'relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[16px] rounded-t-xl h-[172px] max-w-[301px] md:h-[294px] md:max-w-[512px]';
+@prop export let classInner: $$Props['classInner'] = '';
+@prop export let classBot: $$Props['classBot'] = '';
+@prop export let classBotUnder: $$Props['classBotUnder'] = '';
 -->

src/lib/device-mockups/Ios.svelte

@@ -48,4 +48,9 @@
 @prop export let leftTop: $$Props['leftTop'] = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
 @prop export let leftBot: $$Props['leftBot'] = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
 @prop export let right: $$Props['right'] = 'h-[64px] w-[3px] bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
+@prop export let classTop: $$Props['classTop'] = '';
+@prop export let classLeftTop: $$Props['classLeftTop'] = '';
+@prop export let classLeftBot: $$Props['classLeftBot'] = '';
+@prop export let classRight: $$Props['classRight'] = '';
+@prop export let classSlot: $$Props['classSlot'] = '';
 -->

src/lib/device-mockups/Laptop.svelte

@@ -37,4 +37,7 @@
 @prop export let inner: $$Props['inner'] = 'rounded-lg overflow-hidden h-[156px] md:h-[278px] bg-white dark:bg-gray-800';
 @prop export let bot: $$Props['bot'] = 'relative mx-auto bg-gray-900 dark:bg-gray-700 rounded-b-xl rounded-t-sm h-[17px] max-w-[351px] md:h-[21px] md:max-w-[597px]';
 @prop export let botCen: $$Props['botCen'] = 'absolute left-1/2 top-0 -translate-x-1/2 rounded-b-xl w-[56px] h-[5px] md:w-[96px] md:h-[8px] bg-gray-800';
+@prop export let classInner: $$Props['classInner'] = '';
+@prop export let classBot: $$Props['classBot'] = '';
+@prop export let classBotCen: $$Props['classBotCen'] = '';
 -->

src/lib/device-mockups/Smartwatch.svelte

@@ -47,4 +47,9 @@
 @prop export let rightBot: $$Props['rightBot'] = 'h-[32px] w-[6px] bg-gray-800 dark:bg-gray-800 absolute -right-[16px] top-[88px] rounded-r-lg';
 @prop export let top: $$Props['top'] = 'relative mx-auto border-gray-900 dark:bg-gray-800 dark:border-gray-800 border-[10px] rounded-[2.5rem] h-[213px] w-[208px]';
 @prop export let bot: $$Props['bot'] = 'relative mx-auto bg-gray-800 dark:bg-gray-700 rounded-b-[2.5rem] h-[63px] max-w-[133px]';
+@prop export let classTop: $$Props['classTop'] = '';
+@prop export let classRightTop: $$Props['classRightTop'] = '';
+@prop export let classRightBot: $$Props['classRightBot'] = '';
+@prop export let classSlot: $$Props['classSlot'] = '';
+@prop export let classBot: $$Props['classBot'] = '';
 -->

src/lib/device-mockups/Tablet.svelte

@@ -47,4 +47,9 @@
 @prop export let leftMid: $$Props['leftMid'] = 'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
 @prop export let leftBot: $$Props['leftBot'] = 'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
 @prop export let right: $$Props['right'] = 'h-[64px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
+@prop export let classLeftTop: $$Props['classLeftTop'] = '';
+@prop export let classLeftMid: $$Props['classLeftMid'] = '';
+@prop export let classLeftBot: $$Props['classLeftBot'] = '';
+@prop export let classRight: $$Props['classRight'] = '';
+@prop export let classSlot: $$Props['classSlot'] = '';
 -->

src/lib/footer/FooterBrand.svelte

@@ -54,4 +54,7 @@
 @prop export let alt: $$Props['alt'] = '';
 @prop export let name: $$Props['name'] = '';
 @prop export let target: $$Props['target'] = '';
+@prop export let classA: $$Props['classA'] = '';
+@prop export let classSpan: $$Props['classSpan'] = '';
+@prop export let classImg: $$Props['classImg'] = '';
 -->

src/lib/footer/FooterCopyright.svelte

@@ -50,4 +50,6 @@
 @prop export let by: $$Props['by'] = '';
 @prop export let target: $$Props['target'] = undefined;
 @prop export let copyrightMessage: $$Props['copyrightMessage'] = 'All Rights Reserved.';
+@prop export let classSpan: $$Props['classSpan'] = '';
+@prop export let classA: $$Props['classA'] = '';
 -->

src/lib/footer/FooterLink.svelte

@@ -36,4 +36,6 @@
 @prop export let aClass: $$Props['aClass'] = 'hover:underline';
 @prop export let href: $$Props['href'] = '';
 @prop export let target: $$Props['target'] = undefined;
+@prop export let classLi: $$Props['classLi'] = '';
+@prop export let classA: $$Props['classA'] = '';
 -->

src/lib/forms/Input.svelte

@@ -112,4 +112,6 @@
 @prop export let defaultClass: $$Props['defaultClass'] = 'block w-full disabled:cursor-not-allowed disabled:opacity-50 rtl:text-right';
 @prop export let color: NonNullable<$$Props['color']> = 'base';
 @prop export let floatClass: $$Props['floatClass'] = 'flex absolute inset-y-0 items-center text-gray-500 dark:text-gray-400';
+@prop export let classLeft: $$Props['classLeft'] = '';
+@prop export let classRight: $$Props['classRight'] = '';
 -->

src/lib/forms/Toggle.svelte

@@ -65,4 +65,5 @@
 @prop export let value: $$Props['value'] = '';
 @prop export let checked: $$Props['checked'] = undefined;
 @prop export let customSize: $$Props['customSize'] = '';
+@prop export let classDiv: string = '';
 -->

src/lib/navbar/NavHamburger.svelte

@@ -32,4 +32,5 @@
 ## Props
 @prop export let menuClass: $$Props['menuClass'] = 'h-6 w-6 shrink-0';
 @prop export let onClick: $$Props['onClick'] = undefined;
+@prop export let classMenu: $$Props['classMenu'] = '';
 -->

src/lib/navbar/NavUl.svelte

@@ -76,4 +76,5 @@
 @prop export let slideParams: $$Props['slideParams'] = { delay: 250, duration: 500, easing: sineIn };
 @prop export let activeClass: NonNullable<$$Props['activeClass']> = 'text-white bg-primary-700 md:bg-transparent md:text-primary-700 md:dark:text-white dark:bg-primary-600 md:dark:bg-transparent';
 @prop export let nonActiveClass: NonNullable<$$Props['nonActiveClass']> = 'text-gray-700 hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-primary-700 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent';
+@prop export let classUl: string = '';
 -->

src/lib/navbar/Navbar.svelte

@@ -35,4 +35,5 @@
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
 @prop export let fluid: $$Props['fluid'] = false;
+@prop export let navContainerClass: string= '';
 -->

src/lib/progress/Progressbar.svelte

@@ -87,4 +87,5 @@
 @prop export let labelInsideClass: $$Props['labelInsideClass'] = 'text-primary-100 text-xs font-medium text-center p-0.5 leading-none rounded-full';
 @prop export let divClass: $$Props['divClass'] = 'w-full bg-gray-200 rounded-full dark:bg-gray-700';
 @prop export let progressClass: $$Props['progressClass'] = '';
+@prop export let classLabelOutside: $$Props['classLabelOutside'] = '';
 -->

src/lib/rating/AdvancedRating.svelte

@@ -47,4 +47,9 @@
 @prop export let ratingClass: string = 'h-5 bg-yellow-400 rounded';
 @prop export let rightLabelClass: string = 'text-sm font-medium text-gray-600 dark:text-gray-500';
 @prop export let unit: string = '%';
+@prop export let classDiv: string = '';
+@prop export let classLabel: string = '';
+@prop export let classRatingDiv: string = '';
+@prop export let classRating: string = '';
+@prop export let classRightLabel: string = '';
 -->

src/lib/rating/Review.svelte

@@ -94,4 +94,9 @@
 @prop export let imgClass: $$Props['imgClass'] = 'w-10 h-10 rounded-full';
 @prop export let ulClass: $$Props['ulClass'] = 'space-y-4 text-sm text-gray-500 dark:text-gray-400';
 @prop export let liClass: $$Props['liClass'] = 'flex items-center';
+@prop export let classArticle: $$Props['classArticle'] = '';
+@prop export let classDiv: $$Props['classDiv'] = '';
+@prop export let classImg: $$Props['classImg'] = '';
+@prop export let classUl: $$Props['classUl'] = '';
+@prop export let classLi: $$Props['classLi'] = '';
 -->

src/lib/table/Table.svelte

@@ -118,4 +118,6 @@
 @prop export let svgDivClass: $$Props['svgDivClass'] = 'absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none';
 @prop export let svgClass: $$Props['svgClass'] = 'w-5 h-5 text-gray-500 dark:text-gray-400';
 @prop export let inputClass: $$Props['inputClass'] = 'bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-80 p-2.5 ps-10 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
+@prop export let classInput: $$Props['classInput'] = '';
+@prop export let classSvgDiv: $$Props['classSvgDiv'] = '';
 -->

src/lib/table/TableSearch.svelte

@@ -90,4 +90,6 @@
 @prop export let svgDivClass: $$Props['svgDivClass'] = 'absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none';
 @prop export let svgClass: $$Props['svgClass'] = 'w-5 h-5 text-gray-500 dark:text-gray-400';
 @prop export let inputClass: $$Props['inputClass'] = 'bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-80 p-2.5 ps-10 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
+@prop export let classInput: $$Props['classInput'] = '';
+@prop export let classSvgDiv: $$Props['classSvgDiv'] = '';
 -->

src/lib/timeline/ActivityItem.svelte

@@ -84,4 +84,12 @@
 @prop export let timeClass: $$Props['timeClass'] = 'mb-1 text-xs font-normal text-gray-400 sm:order-last sm:mb-0';
 @prop export let titleClass: $$Props['titleClass'] = 'text-sm font-normal text-gray-500 lex dark:text-gray-300';
 @prop export let textClass: $$Props['textClass'] = 'p-3 text-xs italic font-normal text-gray-500 bg-gray-50 rounded-lg border border-gray-200 dark:bg-gray-600 dark:border-gray-500 dark:text-gray-300';
+@prop export let classLi: $$Props['classLi'] = '';
+@prop export let classSpan: $$Props['classSpan'] = '';
+@prop export let classImg: $$Props['classImg'] = '';
+@prop export let classOuterDiv: $$Props['classOuterDiv'] = '';
+@prop export let classInnerDiv: $$Props['classInnerDiv'] = '';
+@prop export let classTime: $$Props['classTime'] = '';
+@prop export let classTitle: $$Props['classTitle'] = '';
+@prop export let classText: $$Props['classText'] = '';
 -->

src/lib/timeline/Group.svelte

@@ -40,4 +40,7 @@
 @prop export let timeClass: $$Props['timeClass'] = 'text-lg font-semibold text-gray-900 dark:text-white';
 @prop export let date: $$Props['date'] = '';
 @prop export let olClass: $$Props['olClass'] = 'mt-3 divide-y divider-gray-200 dark:divide-gray-700';
+@prop export let classDiv: $$Props['classDiv'] = '';
+@prop export let classTime: $$Props['classTime'] = '';
+@prop export let classOl: $$Props['classOl'] = '';
 -->

src/lib/timeline/GroupItem.svelte

@@ -81,4 +81,9 @@
 @prop export let titleClass: $$Props['titleClass'] = 'text-base font-normal';
 @prop export let spanClass: $$Props['spanClass'] = 'inline-flex items-center text-xs font-normal text-gray-500 dark:text-gray-400';
 @prop export let isPrivacy: $$Props['isPrivacy'] = true;
+@prop export let classA: $$Props['classA'] = '';
+@prop export let classImg: $$Props['classImg'] = '';
+@prop export let classDiv: $$Props['classDiv'] = '';
+@prop export let classTitle: $$Props['classTitle'] = '';
+@prop export let classSpan: $$Props['classSpan'] = '';
 -->

src/lib/timeline/TimelineItem.svelte

@@ -86,4 +86,8 @@
 @prop export let title: $$Props['title'] = '';
 @prop export let date: $$Props['date'] = '';
 @prop export let svgClass: $$Props['svgClass'] = 'w-3 h-3 text-primary-600 dark:text-primary-400';
+@prop export let classDiv: $$Props['classDiv'] = '';
+@prop export let classLi: $$Props['classLi'] = '';
+@prop export let classTime: $$Props['classTime'] = '';
+@prop export let classH3: $$Props['classH3'] = '';
 -->

src/lib/typography/Hr.svelte

@@ -50,4 +50,7 @@
 @prop export let iconDivClass: $$Props['iconDivClass'] = 'absolute start-1/2 px-4 bg-white -translate-x-1/2 rtl:translate-x-1/2 ';
 @prop export let textSpanClass: $$Props['textSpanClass'] = 'absolute px-3 font-medium text-gray-900 -translate-x-1/2 rtl:translate-x-1/2 bg-white start-1/2 dark:text-white dark:bg-gray-900 ';
 @prop export let innerDivClass: $$Props['innerDivClass'] = 'absolute px-4 -translate-x-1/2 rtl:translate-x-1/2 bg-white start-1/2 dark:bg-gray-900';
+@prop export let classHr: $$Props['classHr'] = '';
+@prop export let classDiv: $$Props['classDiv'] = '';
+@prop export let classInnerDiv: $$Props['classInnerDiv'] = '';
 -->

src/routes/component-data/A.json

@@ -1,12 +1,34 @@
 {
   "name": "A",
   "slots": [],
-  "events": ["click"],
+  "events": [
+    "click"
+  ],
   "props": [
-    ["action?", "Action<HTMLElement, any>", ""],
-    ["params?", "any", "{}"],
-    ["href?", "string", "'#'"],
-    ["color?", "string", "'text-primary-600 dark:text-primary-500'"],
-    ["aClass?", "string", "'inline-flex items-center hover:underline'"]
+    [
+      "action?",
+      "Action<HTMLElement, any>",
+      ""
+    ],
+    [
+      "params?",
+      "any",
+      "{}"
+    ],
+    [
+      "href?",
+      "string",
+      "'#'"
+    ],
+    [
+      "color?",
+      "string",
+      "'text-primary-600 dark:text-primary-500'"
+    ],
+    [
+      "aClass?",
+      "string",
+      "'inline-flex items-center hover:underline'"
+    ]
   ]
-}
+}

src/routes/component-data/Accordion.json

@@ -3,12 +3,40 @@
   "slots": [],
   "events": [],
   "props": [
-    ["multiple?", "boolean", "false"],
-    ["flush?", "boolean", "false"],
-    ["activeClass?", "string", "'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800'"],
-    ["inactiveClass?", "string", "'text-gray-500 dark:text-gray-400 hover:bg-gray-100 hover:dark:bg-gray-800'"],
-    ["defaultClass?", "string", "'text-gray-500 dark:text-gray-400'"],
-    ["classActive?", "string", ""],
-    ["classInactive?", "string", ""]
+    [
+      "multiple?",
+      "boolean",
+      "false"
+    ],
+    [
+      "flush?",
+      "boolean",
+      "false"
+    ],
+    [
+      "activeClass?",
+      "string",
+      "'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800'"
+    ],
+    [
+      "inactiveClass?",
+      "string",
+      "'text-gray-500 dark:text-gray-400 hover:bg-gray-100 hover:dark:bg-gray-800'"
+    ],
+    [
+      "defaultClass?",
+      "string",
+      "'text-gray-500 dark:text-gray-400'"
+    ],
+    [
+      "classActive?",
+      "string",
+      "''"
+    ],
+    [
+      "classInactive?",
+      "string",
+      "''"
+    ]
   ]
-}
+}