Fix/245 246 (#248)

* fix: missing tw4 properties migration

* fix: add z-10 to Navbar.Collapse when opened

---------

Co-authored-by: bhenique <[email protected]>

Author: qwikerx

apps/web/src/generated-examples.ts

@@ -1539,39 +1539,39 @@ export const examples: Record<string, Example[]> = {
         'Use this example of a navigation bar built with the utility classes from Tailwind CSS to enable users to navigate across the pages of your website.',
       url: '/examples/[theme-rtl]/navbar/01-default-navbar',
       content:
-        'import { component$ } from \'@builder.io/qwik\'\nimport { Navbar } from \'flowbite-qwik\'\nimport { Link, StaticGenerateHandler } from \'@builder.io/qwik-city\'\n\nexport default component$(() => {\n  return (\n    <Navbar fluid rounded>\n      <Navbar.Brand tag={Link} href="https://flowbite-qwik.com/">\n        <img src="/small-logo.png" alt="Flowbite qwik logo" width="215" height="195" class="h-8 w-auto" />\n        <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">Flowbite Qwik</span>\n      </Navbar.Brand>\n      <Navbar.Toggle />\n      <Navbar.Collapse>\n        <Navbar.Link href="/navbars" active>\n          Home\n        </Navbar.Link>\n        <Navbar.Link tag={Link} href="/navbars">\n          About\n        </Navbar.Link>\n        <Navbar.Link href="/navbars">Services</Navbar.Link>\n        <Navbar.Link href="/navbars">Pricing</Navbar.Link>\n        <Navbar.Link href="/navbars">Contact</Navbar.Link>\n      </Navbar.Collapse>\n    </Navbar>\n  )\n})',
+        'import { component$ } from \'@builder.io/qwik\'\nimport { Navbar } from \'flowbite-qwik\'\nimport { Link, StaticGenerateHandler } from \'@builder.io/qwik-city\'\n\nexport default component$(() => {\n  return (\n    <Navbar fluid rounded>\n      <Navbar.Brand tag={Link} href="https://flowbite-qwik.com/">\n        <img src="/logo.svg" alt="Flowbite qwik logo" width="306" height="306" class="h-8 w-auto" />\n        <span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">Flowbite Qwik</span>\n      </Navbar.Brand>\n      <Navbar.Toggle />\n      <Navbar.Collapse>\n        <Navbar.Link href="/navbars" active>\n          Home\n        </Navbar.Link>\n        <Navbar.Link tag={Link} href="/navbars">\n          About\n        </Navbar.Link>\n        <Navbar.Link href="/navbars">Services</Navbar.Link>\n        <Navbar.Link href="/navbars">Pricing</Navbar.Link>\n        <Navbar.Link href="/navbars">Contact</Navbar.Link>\n      </Navbar.Collapse>\n    </Navbar>\n  )\n})',
       height: '400',
     },
     {
       title: 'Navbar with CTA button',
       description: 'Use the following navbar element to show a call to action button alongside the logo and page links.',
       url: '/examples/[theme-rtl]/navbar/02-with-cta',
       content:
-        'import { component$ } from \'@builder.io/qwik\'\nimport { Button, Navbar } from \'flowbite-qwik\'\nimport { Link, StaticGenerateHandler } from \'@builder.io/qwik-city\'\n\nexport default component$(() => {\n  return (\n    <Navbar fluid rounded>\n      <Navbar.Brand tag={Link} href="https://flowbite-qwik.com/">\n        <img src="/small-logo.png" alt="Flowbite qwik logo" width="215" height="195" class="h-8 w-auto" />\n        <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">Flowbite Qwik</span>\n      </Navbar.Brand>\n      <div class="flex space-x-3 md:order-2 md:space-x-0 rtl:space-x-reverse">\n        <Button>Start</Button>\n        <Navbar.Toggle />\n      </div>\n      <Navbar.Collapse>\n        <Navbar.Link href="/navbars" active>\n          Home\n        </Navbar.Link>\n        <Navbar.Link href="/navbars">About</Navbar.Link>\n        <Navbar.Link href="/navbars">Services</Navbar.Link>\n        <Navbar.Link href="/navbars">Pricing</Navbar.Link>\n        <Navbar.Link href="/navbars">Contact</Navbar.Link>\n      </Navbar.Collapse>\n    </Navbar>\n  )\n})',
+        'import { component$ } from \'@builder.io/qwik\'\nimport { Button, Navbar } from \'flowbite-qwik\'\nimport { Link, StaticGenerateHandler } from \'@builder.io/qwik-city\'\n\nexport default component$(() => {\n  return (\n    <Navbar fluid rounded>\n      <Navbar.Brand tag={Link} href="https://flowbite-qwik.com/">\n        <img src="/logo.svg" alt="Flowbite qwik logo" width="306" height="306" class="h-8 w-auto" />\n        <span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">Flowbite Qwik</span>\n      </Navbar.Brand>\n      <div class="flex space-x-3 md:order-2 md:space-x-0 rtl:space-x-reverse">\n        <Button>Start</Button>\n        <Navbar.Toggle />\n      </div>\n      <Navbar.Collapse>\n        <Navbar.Link href="/navbars" active>\n          Home\n        </Navbar.Link>\n        <Navbar.Link href="/navbars">About</Navbar.Link>\n        <Navbar.Link href="/navbars">Services</Navbar.Link>\n        <Navbar.Link href="/navbars">Pricing</Navbar.Link>\n        <Navbar.Link href="/navbars">Contact</Navbar.Link>\n      </Navbar.Collapse>\n    </Navbar>\n  )\n})',
       height: '400',
     },
     {
       title: 'Navbar with dropdown',
       description: 'This example can be used to show a secondary dropdown menu when clicking on one of the navigation links.',
       url: '/examples/[theme-rtl]/navbar/03-with-dropdown',
       content:
-        'import { component$ } from \'@builder.io/qwik\'\nimport { Dropdown, Navbar } from \'flowbite-qwik\'\nimport { Link, StaticGenerateHandler } from \'@builder.io/qwik-city\'\n\nexport default component$(() => {\n  return (\n    <Navbar fluid rounded>\n      <Navbar.Brand tag={Link} href="https://flowbite-qwik.com/">\n        <img src="/small-logo.png" alt="Flowbite qwik logo" width="215" height="195" class="h-8 w-auto" />\n        <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">Flowbite Qwik</span>\n      </Navbar.Brand>\n      <div class="flex items-center md:order-2">\n        <Dropdown\n          as={\n            <img\n              class="h-8 w-8 rounded-full"\n              src="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462568/flowbite-qwik/jpnykkz8ojq7ojgg4qta.jpg"\n              alt="user photo"\n            />\n          }\n        >\n          <Dropdown.Item header>\n            <span class="block text-sm">Bonnie Green</span>\n            <span class="block truncate text-sm font-medium">[email protected]</span>\n          </Dropdown.Item>\n          <Dropdown.Item>Dashboard</Dropdown.Item>\n          <Dropdown.Item>Settings</Dropdown.Item>\n          <Dropdown.Item>Earnings</Dropdown.Item>\n          <Dropdown.Item divider />\n          <Dropdown.Item>Sign out</Dropdown.Item>\n        </Dropdown>\n        <Navbar.Toggle />\n      </div>\n      <Navbar.Collapse>\n        <Navbar.Link href="/navbars" active>\n          Home\n        </Navbar.Link>\n        <Navbar.Link href="/navbars">About</Navbar.Link>\n        <Navbar.Link tag="div">\n          <Dropdown label="Services" inline>\n            <Dropdown.Item>Dashboard</Dropdown.Item>\n            <Dropdown.Item>Settings</Dropdown.Item>\n            <Dropdown.Item>Earnings</Dropdown.Item>\n          </Dropdown>\n        </Navbar.Link>\n        <Navbar.Link href="/navbars">Pricing</Navbar.Link>\n        <Navbar.Link href="/navbars">Contact</Navbar.Link>\n      </Navbar.Collapse>\n    </Navbar>\n  )\n})',
+        'import { component$ } from \'@builder.io/qwik\'\nimport { Dropdown, Navbar } from \'flowbite-qwik\'\nimport { Link, StaticGenerateHandler } from \'@builder.io/qwik-city\'\n\nexport default component$(() => {\n  return (\n    <Navbar fluid rounded>\n      <Navbar.Brand tag={Link} href="https://flowbite-qwik.com/">\n        <img src="/logo.svg" alt="Flowbite qwik logo" width="306" height="306" class="h-8 w-auto" />\n        <span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">Flowbite Qwik</span>\n      </Navbar.Brand>\n      <div class="flex items-center md:order-2">\n        <Dropdown\n          as={\n            <img\n              class="h-8 w-8 rounded-full"\n              src="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462568/flowbite-qwik/jpnykkz8ojq7ojgg4qta.jpg"\n              alt="user photo"\n            />\n          }\n        >\n          <Dropdown.Item header>\n            <span class="block text-sm">Bonnie Green</span>\n            <span class="block truncate text-sm font-medium">[email protected]</span>\n          </Dropdown.Item>\n          <Dropdown.Item>Dashboard</Dropdown.Item>\n          <Dropdown.Item>Settings</Dropdown.Item>\n          <Dropdown.Item>Earnings</Dropdown.Item>\n          <Dropdown.Item divider />\n          <Dropdown.Item>Sign out</Dropdown.Item>\n        </Dropdown>\n        <Navbar.Toggle />\n      </div>\n      <Navbar.Collapse>\n        <Navbar.Link href="/navbars" active>\n          Home\n        </Navbar.Link>\n        <Navbar.Link href="/navbars">About</Navbar.Link>\n        <Navbar.Link tag="div">\n          <Dropdown label="Services" inline>\n            <Dropdown.Item>Dashboard</Dropdown.Item>\n            <Dropdown.Item>Settings</Dropdown.Item>\n            <Dropdown.Item>Earnings</Dropdown.Item>\n          </Dropdown>\n        </Navbar.Link>\n        <Navbar.Link href="/navbars">Pricing</Navbar.Link>\n        <Navbar.Link href="/navbars">Contact</Navbar.Link>\n      </Navbar.Collapse>\n    </Navbar>\n  )\n})',
       height: '400',
     },
     {
       title: 'Navbar with search',
       description: 'Use this example of a navbar element to also show a search input element that you can integrate for a site-wide search.',
       url: '/examples/[theme-rtl]/navbar/04-with-search',
       content:
-        'import { component$, useSignal } from \'@builder.io/qwik\'\nimport { Input, Navbar } from \'flowbite-qwik\'\nimport { IconSearchOutline } from \'flowbite-qwik-icons\'\nimport { Link, StaticGenerateHandler } from \'@builder.io/qwik-city\'\n\nexport default component$(() => {\n  const searchValue = useSignal(\'\')\n\n  return (\n    <Navbar fluid rounded>\n      <Navbar.Brand tag={Link} href="https://flowbite-qwik.com/">\n        <img src="/small-logo.png" alt="Flowbite qwik logo" width="215" height="195" class="h-8 w-auto" />\n        <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">Flowbite Qwik</span>\n      </Navbar.Brand>\n      <div class="flex items-center md:order-2">\n        <IconSearchOutline class="me-1 h-5 w-5 text-gray-500 dark:text-gray-400 md:hidden" />\n        <Input\n          bind:value={searchValue}\n          placeholder="Search ..."\n          class="hidden md:block"\n          prefix={<IconSearchOutline class="h-5 w-5 text-gray-500 dark:text-gray-400" />}\n        />\n        <Navbar.Toggle />\n      </div>\n      <Navbar.Collapse>\n        <Navbar.Link href="/navbars" active>\n          Home\n        </Navbar.Link>\n        <Navbar.Link href="/navbars">About</Navbar.Link>\n        <Navbar.Link href="/navbars">Services</Navbar.Link>\n      </Navbar.Collapse>\n    </Navbar>\n  )\n})',
+        'import { component$, useSignal } from \'@builder.io/qwik\'\nimport { Input, Navbar } from \'flowbite-qwik\'\nimport { IconSearchOutline } from \'flowbite-qwik-icons\'\nimport { Link, StaticGenerateHandler } from \'@builder.io/qwik-city\'\n\nexport default component$(() => {\n  const searchValue = useSignal(\'\')\n\n  return (\n    <Navbar fluid rounded>\n      <Navbar.Brand tag={Link} href="https://flowbite-qwik.com/">\n        <img src="/logo.svg" alt="Flowbite qwik logo" width="306" height="306" class="h-8 w-auto" />\n        <span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">Flowbite Qwik</span>\n      </Navbar.Brand>\n      <div class="flex items-center md:order-2">\n        <IconSearchOutline class="me-1 h-5 w-5 text-gray-500 md:hidden dark:text-gray-400" />\n        <Input\n          bind:value={searchValue}\n          placeholder="Search ..."\n          class="hidden md:block"\n          prefix={<IconSearchOutline class="h-5 w-5 text-gray-500 dark:text-gray-400" />}\n        />\n        <Navbar.Toggle />\n      </div>\n      <Navbar.Collapse>\n        <Navbar.Link href="/navbars" active>\n          Home\n        </Navbar.Link>\n        <Navbar.Link href="/navbars">About</Navbar.Link>\n        <Navbar.Link href="/navbars">Services</Navbar.Link>\n      </Navbar.Collapse>\n    </Navbar>\n  )\n})',
       height: '400',
     },
     {
       title: 'Navbar with separator',
       description: 'The separator props add a separator under the navbar',
       url: '/examples/[theme-rtl]/navbar/05-navbar-separator',
       content:
-        'import { component$ } from \'@builder.io/qwik\'\nimport { Navbar } from \'flowbite-qwik\'\nimport { Link, StaticGenerateHandler } from \'@builder.io/qwik-city\'\n\nexport default component$(() => {\n  return (\n    <Navbar fluid rounded separator>\n      <Navbar.Brand tag={Link} href="https://flowbite-qwik.com/">\n        <img src="/small-logo.png" alt="Flowbite qwik logo" width="215" height="195" class="h-8 w-auto" />\n        <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">Flowbite Qwik</span>\n      </Navbar.Brand>\n      <Navbar.Toggle />\n      <Navbar.Collapse>\n        <Navbar.Link href="/navbars" active>\n          Home\n        </Navbar.Link>\n        <Navbar.Link tag={Link} href="/navbars">\n          About\n        </Navbar.Link>\n        <Navbar.Link href="/navbars">Services</Navbar.Link>\n        <Navbar.Link href="/navbars">Pricing</Navbar.Link>\n        <Navbar.Link href="/navbars">Contact</Navbar.Link>\n      </Navbar.Collapse>\n    </Navbar>\n  )\n})',
+        'import { component$ } from \'@builder.io/qwik\'\nimport { Navbar } from \'flowbite-qwik\'\nimport { Link, StaticGenerateHandler } from \'@builder.io/qwik-city\'\n\nexport default component$(() => {\n  return (\n    <Navbar fluid rounded separator>\n      <Navbar.Brand tag={Link} href="https://flowbite-qwik.com/">\n        <img src="/logo.svg" alt="Flowbite qwik logo" width="306" height="306" class="h-8 w-auto" />\n        <span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">Flowbite Qwik</span>\n      </Navbar.Brand>\n      <Navbar.Toggle />\n      <Navbar.Collapse>\n        <Navbar.Link href="/navbars" active>\n          Home\n        </Navbar.Link>\n        <Navbar.Link tag={Link} href="/navbars">\n          About\n        </Navbar.Link>\n        <Navbar.Link href="/navbars">Services</Navbar.Link>\n        <Navbar.Link href="/navbars">Pricing</Navbar.Link>\n        <Navbar.Link href="/navbars">Contact</Navbar.Link>\n      </Navbar.Collapse>\n    </Navbar>\n  )\n})',
       height: '400',
     },
   ],

apps/web/src/routes/examples/[theme-rtl]/navbar/01-default-navbar/index.tsx

@@ -13,8 +13,8 @@ export default component$(() => {
   return (
     <Navbar fluid rounded>
       <Navbar.Brand tag={Link} href="https://flowbite-qwik.com/">
-        <img src="/small-logo.png" alt="Flowbite qwik logo" width="215" height="195" class="h-8 w-auto" />
-        <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">Flowbite Qwik</span>
+        <img src="/logo.svg" alt="Flowbite qwik logo" width="306" height="306" class="h-8 w-auto" />
+        <span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">Flowbite Qwik</span>
       </Navbar.Brand>
       <Navbar.Toggle />
       <Navbar.Collapse>

apps/web/src/routes/examples/[theme-rtl]/navbar/02-with-cta/index.tsx

@@ -12,8 +12,8 @@ export default component$(() => {
   return (
     <Navbar fluid rounded>
       <Navbar.Brand tag={Link} href="https://flowbite-qwik.com/">
-        <img src="/small-logo.png" alt="Flowbite qwik logo" width="215" height="195" class="h-8 w-auto" />
-        <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">Flowbite Qwik</span>
+        <img src="/logo.svg" alt="Flowbite qwik logo" width="306" height="306" class="h-8 w-auto" />
+        <span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">Flowbite Qwik</span>
       </Navbar.Brand>
       <div class="flex space-x-3 md:order-2 md:space-x-0 rtl:space-x-reverse">
         <Button>Start</Button>

apps/web/src/routes/examples/[theme-rtl]/navbar/03-with-dropdown/index.tsx

@@ -12,8 +12,8 @@ export default component$(() => {
   return (
     <Navbar fluid rounded>
       <Navbar.Brand tag={Link} href="https://flowbite-qwik.com/">
-        <img src="/small-logo.png" alt="Flowbite qwik logo" width="215" height="195" class="h-8 w-auto" />
-        <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">Flowbite Qwik</span>
+        <img src="/logo.svg" alt="Flowbite qwik logo" width="306" height="306" class="h-8 w-auto" />
+        <span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">Flowbite Qwik</span>
       </Navbar.Brand>
       <div class="flex items-center md:order-2">
         <Dropdown

apps/web/src/routes/examples/[theme-rtl]/navbar/04-with-search/index.tsx

@@ -15,11 +15,11 @@ export default component$(() => {
   return (
     <Navbar fluid rounded>
       <Navbar.Brand tag={Link} href="https://flowbite-qwik.com/">
-        <img src="/small-logo.png" alt="Flowbite qwik logo" width="215" height="195" class="h-8 w-auto" />
-        <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">Flowbite Qwik</span>
+        <img src="/logo.svg" alt="Flowbite qwik logo" width="306" height="306" class="h-8 w-auto" />
+        <span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">Flowbite Qwik</span>
       </Navbar.Brand>
       <div class="flex items-center md:order-2">
-        <IconSearchOutline class="me-1 h-5 w-5 text-gray-500 dark:text-gray-400 md:hidden" />
+        <IconSearchOutline class="me-1 h-5 w-5 text-gray-500 md:hidden dark:text-gray-400" />
         <Input
           bind:value={searchValue}
           placeholder="Search ..."

apps/web/src/routes/examples/[theme-rtl]/navbar/05-navbar-separator/index.tsx

@@ -13,8 +13,8 @@ export default component$(() => {
   return (
     <Navbar fluid rounded separator>
       <Navbar.Brand tag={Link} href="https://flowbite-qwik.com/">
-        <img src="/small-logo.png" alt="Flowbite qwik logo" width="215" height="195" class="h-8 w-auto" />
-        <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">Flowbite Qwik</span>
+        <img src="/logo.svg" alt="Flowbite qwik logo" width="306" height="306" class="h-8 w-auto" />
+        <span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">Flowbite Qwik</span>
       </Navbar.Brand>
       <Navbar.Toggle />
       <Navbar.Collapse>

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-qwik-cli",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "This is a CLI tool to setup flowbite qwik into your project",
   "main": "bin/init.cjs",
   "bin": {