flowbite-mcp 1.1.3 → 1.1.5

package/data/components/footer.md

@@ -1,16 +1,3 @@
----
-layout: docs
-title: Tailwind CSS Footer - Flowbite
-description: Use the footer section at the bottom of every page to show valuable information to your users, such as sitemap links, a copyright notice, and a logo
-group: components
-toc: true
-
-previous: Dropdowns
-previousLink: components/dropdowns/
-next: Forms
-nextLink: components/forms/
----
-
 The footer is one of the most underestimated sections of a website being located at the very bottom of every page, however, it can be used as a way to try to convince users to stay on your website if they haven't found the information they've been looking for inside the main content area.
 
 Use these footer sections coded with the utility classes from Tailwind CSS and components from Flowbite to offer valuable information to your users such as the brand's logo, sitemap links, copyright notice, social media profiles, and more.
@@ -19,11 +6,11 @@ Use these footer sections coded with the utility classes from Tailwind CSS and c
 
 Use this footer component to show a copyright notice and some helpful website links.
 
-{{< example bodyClass="!p-0" github="components/footer.md" class="p-2" show_dark=true >}}
+```html
 
 <footer class="bg-neutral-primary-soft rounded-base shadow-xs border border-default m-4">
     <div class="w-full mx-auto max-w-screen-xl p-4 md:flex md:items-center md:justify-between">
-      <span class="text-sm text-body sm:text-center">© 2023 <a href="{{< param homepage >}}/" class="hover:underline">Flowbite™</a>. All Rights Reserved.
+      <span class="text-sm text-body sm:text-center">© 2023 <a href="https://flowbite.com" class="hover:underline">Flowbite™</a>. All Rights Reserved.
     </span>
     <ul class="flex flex-wrap items-center mt-3 text-sm font-medium text-body sm:mt-0">
         <li>
@@ -41,13 +28,13 @@ Use this footer component to show a copyright notice and some helpful website li
     </ul>
     </div>
 </footer>
-{{< /example >}}
+```
 
 ## Footer with logo
 
 Use this component to show your brand's logo, a few website links and the copyright notice on a second row.
 
-{{< example bodyClass="!p-0" github="components/footer.md" class="p-2" show_dark=true >}}
+```html
 
 <footer class="bg-neutral-primary-soft rounded-base shadow-xs border border-default m-4">
     <div class="w-full max-w-screen-xl mx-auto p-4 md:py-8">
@@ -76,19 +63,19 @@ Use this component to show your brand's logo, a few website links and the copyri
     </div>
 </footer>
 
-{{< /example >}}
+```
 
 ## Social media icons
 
 This footer component can be used to show your brand's logo, multiple rows of website links, a copyright notice and social media profile icons including Twitter, Facebook, Instagram, and more.
 
-{{< example bodyClass="!p-0" github="components/footer.md" show_dark=true >}}
+```html
 
 <footer class="bg-neutral-primary-soft">
     <div class="mx-auto w-full max-w-screen-xl p-4 py-6 lg:py-8">
         <div class="md:flex md:justify-between">
           <div class="mb-6 md:mb-0">
-              <a href="{{< param homepage >}}/" class="flex items-center">
+              <a href="https://flowbite.com" class="flex items-center">
                   <img src="https://flowbite.com/docs/images/logo.svg" class="h-7 me-3" alt="FlowBite Logo" />
                   <span class="text-heading self-center text-2xl font-semibold whitespace-nowrap">Flowbite</span>
               </a>
@@ -98,7 +85,7 @@ This footer component can be used to show your brand's logo, multiple rows of we
                   <h2 class="mb-6 text-sm font-semibold text-heading uppercase">Resources</h2>
                   <ul class="text-body font-medium">
                       <li class="mb-4">
-                          <a href="{{< param homepage >}}/" class="hover:underline">Flowbite</a>
+                          <a href="https://flowbite.com" class="hover:underline">Flowbite</a>
                       </li>
                       <li>
                           <a href="https://tailwindcss.com/" class="hover:underline">Tailwind CSS</a>
@@ -131,7 +118,7 @@ This footer component can be used to show your brand's logo, multiple rows of we
       </div>
       <hr class="my-6 border-default sm:mx-auto lg:my-8" />
       <div class="sm:flex sm:items-center sm:justify-between">
-          <span class="text-sm text-body sm:text-center">© 2023 <a href="{{< param homepage >}}/" class="hover:underline">Flowbite™</a>. All Rights Reserved.
+          <span class="text-sm text-body sm:text-center">© 2023 <a href="https://flowbite.com" class="hover:underline">Flowbite™</a>. All Rights Reserved.
           </span>
           <div class="flex mt-4 sm:justify-center sm:mt-0">
             <a href="#" class="text-body hover:text-heading">
@@ -158,13 +145,13 @@ This footer component can be used to show your brand's logo, multiple rows of we
       </div>
     </div>
 </footer>
-{{< /example >}}
+```
 
 ## Sitemap links
 
 If you have a website with many pages you can use this footer component to show a sitemap spanning the entire width of a row followed below by a copyright notice and social media icons.
 
-{{< example bodyClass="!p-0" github="components/footer.md" show_dark=true >}}
+```html
 
 <footer class="bg-neutral-primary">
     <div class="mx-auto w-full max-w-screen-xl">
@@ -236,7 +223,7 @@ If you have a website with many pages you can use this footer component to show
         </div>
     </div>
     <div class="px-4 py-6 bg-neutral-secondary-soft md:flex md:items-center md:justify-between">
-        <span class="text-sm text-body sm:text-center">© 2023 <a href="{{< param homepage >}}/">Flowbite™</a>. All Rights Reserved.
+        <span class="text-sm text-body sm:text-center">© 2023 <a href="https://flowbite.com">Flowbite™</a>. All Rights Reserved.
         </span>
         <div class="flex mt-4 sm:justify-center md:mt-0 space-x-2 rtl:space-x-reverse">
           <a href="#" class="text-body hover:text-heading">
@@ -263,16 +250,16 @@ If you have a website with many pages you can use this footer component to show
       </div>
     </div>
 </footer>
-{{< /example >}}
+```
 
 ## Sticky footer
 
 Use this example to set create a sticky footer by using a fixed position to the bottom of the document page as the user scrolls up or down the main content area.
 
-{{< example bodyClass="!p-0" github="components/navbar.md" show_dark=true iframeHeight="480" iframeMaxHeight="480" skeletonPlaceholders=true >}}
+```html
 
 <footer class="fixed bottom-0 left-0 z-20 w-full p-4 bg-neutral-primary-soft border-t border-default shadow-sm md:flex md:items-center md:justify-between md:p-6">
-    <span class="text-sm text-body sm:text-center">© 2023 <a href="{{< param homepage >}}/" class="hover:underline">Flowbite™</a>. All Rights Reserved.
+    <span class="text-sm text-body sm:text-center">© 2023 <a href="https://flowbite.com" class="hover:underline">Flowbite™</a>. All Rights Reserved.
     </span>
     <ul class="flex flex-wrap items-center mt-3 text-sm font-medium text-body sm:mt-0">
         <li>
@@ -289,7 +276,7 @@ Use this example to set create a sticky footer by using a fixed position to the
         </li>
     </ul>
 </footer>
-{{< /example >}}
+```
 
 ## More examples
 

package/data/components/forms.md

@@ -1,24 +1,10 @@
----
-layout: docs
-title: Tailwind CSS Forms - Flowbite
-description: Use the Tailwind CSS form and input elements such as checkboxes, radios, textarea, text inputs to collect information from users with Flowbite
-group: components
-toc: true
-requires_js: true
-
-previous: Footer
-previousLink: components/footer/
-next: Gallery
-nextLink: components/gallery/
----
-
 Get started with these custom Tailwind CSS form components to gather information from your users using input text elements, checkboxes, radios, textareas, selects, file uploads, toggle switches, and more.
 
 ## Default form
 
 This is an example of a form component including an email, password, checkbox, and submit button that you can use as a starting point for any form element in your website using Flowbite and Tailwind CSS.
 
-{{< example github="components/forms.md" show_dark=true >}}
+```html
 <form class="max-w-sm mx-auto">
   <div class="mb-5">
     <label for="email" class="block mb-2.5 text-sm font-medium text-heading">Your email</label>
@@ -34,17 +20,15 @@ This is an example of a form component including an email, password, checkbox, a
   </label>
   <button type="submit" class="text-white bg-brand box-border border border-transparent hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none">Submit</button>
 </form>
-{{< /example >}}
+```
+
 
-<div class="mt-8 -mb-5">
-  {{< requires_tw3 >}}
-</div>
 
 ## Floating labels
 
 Use these form elements inspired by material design from Google to adjust the `label` tag as the visual placeholder for the input elements using the `peer-placeholder-shown` and `peer-focus` utility classes. These components require Tailwind CSS v3.x and above.
 
-{{< example github="components/forms.md" show_dark=true >}}
+```html
 
 <form class="max-w-md mx-auto">
   <div class="relative z-0 w-full mb-5 group">
@@ -81,13 +65,13 @@ Use these form elements inspired by material design from Google to adjust the `l
   </div>
   <button type="submit" class="text-white bg-brand box-border border border-transparent hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none">Submit</button>
 </form>
-{{< /example >}}
+```
 
 ## Input Sizes
 
 Use the following utility classes to create three different sizing options (large, base, and small) for your form input elements.
 
-{{< example github="components/forms.md" show_dark=true >}}
+```html
 <form class="max-w-sm mx-auto space-y-4">
     <div>
         <label for="visitors" class="block mb-2.5 text-sm font-medium text-heading">Small Input</label>
@@ -106,24 +90,24 @@ Use the following utility classes to create three different sizing options (larg
         <input type="text" id="visitors" class="bg-neutral-secondary-medium border border-default-medium text-heading text-base rounded-base focus:ring-brand focus:border-brand block w-full px-4 py-3.5 shadow-xs placeholder:text-body" placeholder="" required />
     </div>
 </form>
-{{< /example >}}
+```
 
 ## Disabled inputs
 
 Use the following utility classes to indicate a disabled form input item.
 
-{{< example github="components/forms.md" show_dark=true >}}
+```html
 <form class="max-w-sm mx-auto space-y-4">
   <input type="text" id="disabled-input" aria-label="disabled input" class="bg-neutral-secondary-medium border border-default-medium text-fg-disabled text-sm rounded-base focus:ring-brand focus:border-brand block w-full px-3 py-2.5 shadow-xs placeholder:text-body" value="Disabled input" disabled>
   <input type="text" id="disabled-input-2" aria-label="disabled input 2" class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand block w-full px-3 py-2.5 shadow-xs placeholder:text-body" value="Disabled readonly input" disabled readonly>
 </form>
-{{< /example >}}
+```
 
 ## Shadow inputs
 
 Alternatively, you can decide to apply a shadow styling using the `shadow-xs` class to any of your form input elements.
 
-{{< example github="components/forms.md" show_dark=true >}}
+```html
 
 <form class="max-w-sm mx-auto">
   <div class="mb-5">
@@ -143,26 +127,26 @@ Alternatively, you can decide to apply a shadow styling using the `shadow-xs` cl
   <button type="submit" class="text-white bg-brand box-border border border-transparent hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none">Submit</button>
 </form>
 
-{{< /example >}}
+```
 
 ## Helper text
 
 Use the following markup to also add a helper text below your form input item. Usually used for newsletter signup elements.
 
-{{< example github="components/forms.md" show_dark=true >}}
+```html
 <form class="max-w-sm mx-auto"> 
   <label for="email" class="block mb-2.5 text-sm font-medium text-heading">Your email</label>
   <input type="email" id="email" aria-describedby="helper-text-explanation" class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand block w-full px-3 py-2.5 shadow-xs placeholder:text-body" placeholder="name@flowbite.com">
 
   <p id="helper-text-explanation" class="mt-2.5 text-sm text-body">Read our <a href="#" class="font-medium text-fg-brand hover:underline ">Privacy Policy</a>.</p>
 </form>
-{{< /example >}}
+```
 
 ## Input element with icon
 
 Use the following Tailwind utility classes and [SVG icon](https://flowbite.com/icons/) to add an icon inside input form elements.
 
-{{< example github="components/forms.md" show_dark=true >}}
+```html
 <form class="max-w-sm mx-auto">
   <label for="input-group-1" class="block mb-2.5 text-sm font-medium text-heading">Your Email</label>
   <div class="relative">
@@ -172,13 +156,13 @@ Use the following Tailwind utility classes and [SVG icon](https://flowbite.com/i
     <input type="text" id="input-group-1" class="block w-full ps-9 pe-3 py-2.5 bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand shadow-xs placeholder:text-body" placeholder="name@flowbite.com">
   </div>
 </form>
-{{< /example >}}
+```
 
 ## Input element with addon
 
 Use this example to add a SVG icon or special character with an addon style to the input element.
 
-{{< example github="components/forms.md" show_dark=true >}}
+```html
 <form class="max-w-sm mx-auto">
   <label for="website-admin" class="block mb-2.5 text-sm font-medium text-heading">Username</label>
   <div class="flex shadow-xs rounded-base">
@@ -188,13 +172,13 @@ Use this example to add a SVG icon or special character with an addon style to t
     <input type="text" id="website-admin" class="rounded-none rounded-e-base block w-full px-3 py-2.5 bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand placeholder:text-body" placeholder="elonmusk">
   </div>
 </form>
-{{< /example >}}
+```
 
 ## Form validation
 
 Use the following two success and error styles when validation your forms.
 
-{{< example github="components/forms.md" show_dark=true >}}
+```html
 <form class="max-w-sm mx-auto">
   <div class="mb-6">
     <label for="success" class="block mb-2.5 text-sm font-medium text-fg-success-strong">Your name</label>
@@ -207,24 +191,24 @@ Use the following two success and error styles when validation your forms.
     <p class="mt-2.5 text-sm text-fg-danger-strong"><span class="font-medium">Oh, snapp!</span> Some error message.</p>
   </div>
 </form>
-{{< /example >}}
+```
 
 ## Textarea
 
 Use the following code to create a textarea form element.
 
-{{< example github="components/forms.md" show_dark=true >}}
+```html
 <form class="max-w-sm mx-auto">
   <label for="message" class="block mb-2.5 text-sm font-medium text-heading">Your message</label>
   <textarea id="message" rows="4" class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand block w-full p-3.5 shadow-xs placeholder:text-body" placeholder="Write your thoughts here..."></textarea>
 </form>
-{{< /example >}}
+```
 
 ## Select input
 
 Use the following select input element to show selectable list of items.
 
-{{< example github="components/forms.md" show_dark=true >}}
+```html
 <form class="max-w-sm mx-auto">
   <label for="countries" class="block mb-2.5 text-sm font-medium text-heading">Select an option</label>
   <select id="countries" class="block w-full px-3 py-2.5 bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand shadow-xs placeholder:text-body">
@@ -235,13 +219,13 @@ Use the following select input element to show selectable list of items.
     <option value="DE">Germany</option>
   </select>
 </form>
-{{< /example >}}
+```
 
 ## Checkbox
 
 The code below can be used to create a fieldset of checkbox elements inside a form. We also created a checkbox variant with extra description and one in a disabled form.
 
-{{< example github="components/forms.md" show_dark=true >}}
+```html
 
 <fieldset>
   <legend class="sr-only">Checkbox variants</legend>
@@ -276,13 +260,13 @@ The code below can be used to create a fieldset of checkbox elements inside a fo
       <label for="international-shipping-disabled" class="ms-2 text-sm font-medium text-fg-disabled select-none">Eligible for international shipping (disabled)</label>
   </div>
 </fieldset>
-{{< /example >}}
+```
 
 ## Radio buttons
 
 Group a series of buttons together on a single line or stack them in a vertical column.
 
-{{< example github="components/forms.md" show_dark=true >}}
+```html
 
 <fieldset>
   <legend class="sr-only">Countries</legend>
@@ -322,28 +306,26 @@ Group a series of buttons together on a single line or stack them in a vertical
     </label>
   </div>
 </fieldset>
-{{< /example >}}
+```
+
 
-<div class="mt-8 -mb-5">
-  {{< requires_js >}}
-</div>
 
 ## File upload
 
 Use the following Tailwind CSS file upload element to receive any type of file from users.
 
-{{< example github="components/forms.md" show_dark=true >}}
+```html
 <form class="max-w-lg mx-auto">
   <label class="block mb-2.5 text-sm font-medium text-heading" for="file_input">Upload file</label>
   <input class="cursor-pointer bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand block w-full shadow-xs placeholder:text-body" id="file_input" type="file">
 </form>
-{{< /example >}}
+```
 
 ## Toggle Switch
 
 Use the following toggle switch component to ask for a yes or no type of input from your users without the use of JavaScript.
 
-{{< example class="flex flex-col flex-wrap space-y-4" github="components/forms.md" show_dark=true >}}
+```html
 <label class="inline-flex items-center cursor-pointer">
   <input type="checkbox" value="" class="sr-only peer">
   <div class="relative w-9 h-5 bg-neutral-quaternary peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-soft dark:peer-focus:ring-brand-soft rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-buffer after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-brand"></div>
@@ -355,7 +337,7 @@ Use the following toggle switch component to ask for a yes or no type of input f
   <div class="relative w-9 h-5 bg-neutral-quaternary peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-soft dark:peer-focus:ring-brand-soft rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-buffer after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-brand"></div>
   <span class="ms-3 text-sm font-medium text-heading select-none">Checked toggle</span>
 </label>
-{{< /example >}}
+```
 
 ## More examples
 

package/data/components/gallery.md

@@ -1,16 +1,3 @@
----
-layout: docs
-title: Tailwind CSS Gallery (Masonry) - Flowbite
-description: Use the image gallery component based on a masonry grid layout using flex and grid classes from Tailwind CSS to show multiple pictures based on various styles
-group: components
-toc: true
-
-previous: Forms
-previousLink: components/forms/
-next: Indicators
-nextLink: components/indicators/
----
-
 The gallery component can be used to show multiple images inside a masonry grid layout styles with the utility-first classes from Tailwind CSS to show a collection of pictures to your users based on various layouts, styles, sizes, and colors.
 
 This component is recommended for usage within marketing UI interfaces and website sections when you want to show pictures of your team members, office pictures, or even case study images.
@@ -19,7 +6,7 @@ This component is recommended for usage within marketing UI interfaces and websi
 
 Use this component to show a collection of images inside a gallery with three pictures on a row.
 
-{{< example class="flex justify-center" github="components/gallery.md" show_dark=true >}}
+```html
 
 <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
     <div>
@@ -59,13 +46,13 @@ Use this component to show a collection of images inside a gallery with three pi
         <img class="h-auto max-w-full rounded-base" src="https://flowbite.s3.amazonaws.com/docs/gallery/square/image-11.jpg" alt="">
     </div>
 </div>
-{{< /example >}}
+```
 
 ## Masonry grid
 
 This example can be used to show the images inside a masonry grid layouts with four columns.
 
-{{< example class="flex justify-center" github="components/gallery.md" show_dark=true >}}
+```html
 
 <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
     <div class="grid gap-4">
@@ -113,13 +100,13 @@ This example can be used to show the images inside a masonry grid layouts with f
         </div>
     </div>
 </div>
-{{< /example >}}
+```
 
 ## Featured image
 
 This example can be used to feature the most important image and show a row of five pictures below.
 
-{{< example class="flex justify-center" github="components/gallery.md" show_dark=true >}}
+```html
 
 <div class="grid gap-4">
     <div>
@@ -143,13 +130,13 @@ This example can be used to feature the most important image and show a row of f
         </div>
     </div>
 </div>
-{{< /example >}}
+```
 
 ## Quad gallery
 
 Use this example to show four larger images with two items on a row.
 
-{{< example class="flex justify-center" github="components/gallery.md" show_dark=true >}}
+```html
 
 <div class="grid grid-cols-2 gap-2">
         <div>
@@ -165,17 +152,15 @@ Use this example to show four larger images with two items on a row.
             <img class="h-auto max-w-full rounded-base" src="https://flowbite.s3.amazonaws.com/docs/gallery/square/image-4.jpg" alt="">
         </div>
     </div>
-{{< /example >}}
+```
+
 
-<div class="mt-8 -mb-5">
-  {{< requires_js >}}
-</div>
 
 ## Gallery with slider
 
 This example uses the [carousel slider](https://flowbite.com/docs/components/carousel/) functionality to show multiple images inside a slider gallery.
 
-{{< example class="flex justify-center" github="components/gallery.md" show_dark=true >}}
+```html
 
 <div id="gallery" class="relative w-full" data-carousel="slide">
     <!-- Carousel wrapper -->
@@ -215,17 +200,15 @@ This example uses the [carousel slider](https://flowbite.com/docs/components/car
         </span>
     </button>
 </div>
-{{< /example >}}
+```
+
 
-<div class="mt-8 -mb-5">
-  {{< requires_js >}}
-</div>
 
 ## Custom slider controls
 
 This example uses an alternative style for the control button for the carousel slider component.
 
-{{< example class="flex justify-center" github="components/gallery.md" show_dark=true >}}
+```html
 
 <div id="custom-controls-gallery" class="relative w-full" data-carousel="slide">
     <!-- Carousel wrapper -->
@@ -266,13 +249,13 @@ This example uses an alternative style for the control button for the carousel s
         </button>
     </div>
 </div>
-{{< /example >}}
+```
 
 ## Gallery with tag filters
 
 Use this example to show a list of tags and filter the images below based on the activately selected tag.
 
-{{< example bodyClass="mt-0" github="components/gallery.md" show_dark=true >}}
+```html
 
 <div class="flex items-center justify-center py-4 md:py-8 flex-wrap">
     <button type="button" class="text-fg-brand border border-brand bg-neutral-primary focus:ring-4 focus:outline-none focus:ring-neutral-tertiary rounded-base text-base font-medium px-5 py-2.5 text-center me-3 mb-3">All categories</button>
@@ -319,4 +302,4 @@ Use this example to show a list of tags and filter the images below based on the
         <img class="h-auto max-w-full rounded-base" src="https://flowbite.s3.amazonaws.com/docs/gallery/square/image-11.jpg" alt="">
     </div>
 </div>
-{{< /example >}}
+```