flowbite-mcp 1.1.3 → 1.1.5

package/data/components/alerts.md

@@ -1,16 +1,3 @@
----
-layout: docs
-title: Tailwind CSS Alerts - Flowbite
-description: Show contextual information to your users using alert elements based on Tailwind CSS
-group: components
-toc: true
-
-previous: Accordion
-previousLink: components/accordion/
-next: Avatar
-nextLink: components/avatar/
----
-
 The alert component can be used to provide information to your users such as success or error messages, but also highlighted information complementing the normal flow of paragraphs and headers on a page.
 
 Flowbite also includes dismissible alerts which can be hidden by the users by clicking on the close icon.
@@ -19,7 +6,7 @@ Flowbite also includes dismissible alerts which can be hidden by the users by cl
 
 Use the following examples of alert components to show messages as feedback to your users.
 
-{{< example github="components/alerts.md" show_dark=true >}}
+```html
 <div class="p-4 mb-4 text-sm text-fg-brand-strong rounded-base bg-brand-softer" role="alert">
   <span class="font-medium">Info alert!</span> Change a few things up and try submitting again.
 </div>
@@ -35,13 +22,13 @@ Use the following examples of alert components to show messages as feedback to y
 <div class="p-4 text-sm text-heading rounded-base bg-neutral-secondary-medium" role="alert">
   <span class="font-medium">Dark alert!</span> Change a few things up and try submitting again.
 </div>
-{{< /example >}}
+```
 
 ## Alerts with icon
 
 You can also include a descriptive icon to complement the message inside the alert component with the following example.
 
-{{< example github="components/alerts.md" show_dark=true >}}
+```html
 <div class="flex items-start sm:items-center p-4 mb-4 text-sm text-fg-brand-strong rounded-base bg-brand-softer" role="alert">
   <svg class="w-4 h-4 me-2 shrink-0 mt-0.5 sm:mt-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
   <p><span class="font-medium me-1">Info alert!</span> Change a few things up and try submitting again.</p>
@@ -62,13 +49,13 @@ You can also include a descriptive icon to complement the message inside the ale
   <svg class="w-4 h-4 me-2 shrink-0 mt-0.5 sm:mt-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
   <p><span class="font-medium me-1">Dark alert!</span> Change a few things up and try submitting again.</p>
 </div>
-{{< /example >}}
+```
 
 ## Bordered alerts 
 
 Use this example to add a border accent to the alert component instead of just a plain background.
 
-{{< example github="components/alerts.md" show_dark=true >}}
+```html
 <div class="flex items-start sm:items-center p-4 mb-4 text-sm text-fg-brand-strong rounded-base bg-brand-softer border border-brand-subtle" role="alert">
   <svg class="w-4 h-4 me-2 shrink-0 mt-0.5 sm:mt-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
   <p><span class="font-medium me-1">Info alert!</span> Change a few things up and try submitting again.</p>
@@ -89,13 +76,13 @@ Use this example to add a border accent to the alert component instead of just a
   <svg class="w-4 h-4 me-2 shrink-0 mt-0.5 sm:mt-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
   <p><span class="font-medium me-1">Dark alert!</span> Change a few things up and try submitting again.</p>
 </div>
-{{< /example >}}
+```
 
 ## Alerts with list
 
 Use this example to show a list and a description inside an alert component.
 
-{{< example github="components/alerts.md" show_dark=true >}}
+```html
 <div class="flex p-4 mb-4 text-sm text-fg-brand-strong rounded-base bg-brand-softer border border-brand-subtle" role="alert">
   <svg class="w-4 h-4 me-2 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
   <span class="sr-only">Info</span>
@@ -144,17 +131,13 @@ Use this example to show a list and a description inside an alert component.
     </ul>
   </div>
 </div>
-{{< /example >}}
-
-<div class="mt-8 -mb-5">
-  {{< requires_js >}}
-</div>
+```
 
 ## Dismissing
 
 Use the following alert elements that are also dismissible.
 
-{{< example github="components/alerts.md" show_dark=true >}}
+```html
 <div id="alert-1" class="flex sm:items-center p-4 mb-4 text-sm text-fg-brand-strong rounded-base bg-brand-softer" role="alert">
   <svg class="w-4 h-4 shrink-0 mt-0.5 md:mt-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
   <span class="sr-only">Info</span>
@@ -210,13 +193,13 @@ Use the following alert elements that are also dismissible.
       <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6"/></svg>
   </button>
 </div>
-{{< /example >}}
+```
 
 ## Border accent
 
 Use this example to add a border accent on top of the alert component for further visual distinction.
 
-{{< example github="components/alerts.md" show_dark=true >}}
+```html
 <div id="alert-border-1" class="flex sm:items-center p-4 mb-4 text-sm text-fg-brand-strong bg-brand-softer border-t-4 border-brand-subtle" role="alert">
   <svg class="w-4 h-4 shrink-0 mt-0.5 md:mt-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
   <span class="sr-only">Info</span>
@@ -272,13 +255,13 @@ Use this example to add a border accent on top of the alert component for furthe
       <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6"/></svg>
   </button>
 </div>
-{{< /example >}}
+```
 
 ## Additional content
 
 The following alert components can be used if you wish to disclose more information inside the element.
 
-{{< example github="components/alerts.md" show_dark=true >}}
+```html
 <div id="alert-additional-content-1" class="p-4 mb-4 text-sm text-fg-brand-strong rounded-base bg-brand-softer border border-brand-subtle" role="alert">
   <div class="flex items-center justify-between">
     <div class="flex items-center">
@@ -384,13 +367,13 @@ The following alert components can be used if you wish to disclose more informat
   </button>
 </div>
 
-{{< /example >}}
+```
 
 ## Announcement alerts
 
 Use this alert component to make announcements with a CTA link.
 
-{{< example github="components/alerts.md" show_dark=true >}}
+```html
 <div id="alert-small-1" class="w-auto inline-flex items-center p-1 pe-2 mb-4 text-sm text-fg-brand-strong rounded-full bg-brand-softer border border-brand-subtle" role="alert">
   <span class="bg-brand-soft text-fg-brand-strong py-0.5 px-2 rounded-full">New</span>
   <div class="ms-2 text-sm">
@@ -430,7 +413,7 @@ Use this alert component to make announcements with a CTA link.
   </div>
   <svg class="w-4 h-4 ms-1 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7"/></svg>
 </div>
-{{< /example >}}
+```
 
 ## JavaScript behaviour
 
@@ -630,7 +613,7 @@ Check out the following JavaScript example to learn how to initialize, set the o
 
 First of all, you should set the required target element and optionally set a trigger element which will dismiss the target element when clicked and other options to customize the animation.
 
-{{< code lang="javascript" file="dismiss.js" icon="file" >}}
+```javascript
 // target element that will be dismissed
 const $targetEl = document.getElementById('targetElement');
 
@@ -655,11 +638,11 @@ const instanceOptions = {
   id: 'targetElement',
   override: true
 };
-{{< /code >}}
+```
 
 Create a new Dismiss object based on the options set above.
 
-{{< code lang="javascript" file="dismiss.js" icon="file" >}}
+```javascript
 import { Dismiss } from 'flowbite';
 
 /*
@@ -669,34 +652,34 @@ import { Dismiss } from 'flowbite';
 * instanceOptions (optional)
 */
 const dismiss = new Dismiss($targetEl, $triggerEl, options, instanceOptions);
-{{< /code >}}
+```
 
 You can now use the methods on the Dismiss object.
 
-{{< code lang="javascript" >}}
+```javascript
 // hide the target element
 dismiss.hide();
-{{< /code >}}
+```
 
 ### HTML Markup
 
 Use this HTML code for the JavaScript code example above.
 
-{{< code lang="html" file="dismiss.html" icon="file" >}}
+```html
 <button id="triggerElement" type="button" 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">Hide alert</button>
 
 <div id="targetElement" class="p-4 mb-4 text-sm text-fg-brand-strong rounded-base bg-brand-softer" role="alert">
   <span class="font-medium">Info alert!</span> Change a few things up and try submitting again.
 </div>
-{{< /code >}}
+```
 
 ### TypeScript
 
-If you're using the <a href="{{< ref "getting-started/typescript" >}}">TypeScript configuration</a> from Flowbite then you can import the types for the Dismiss class, parameters and its options. 
+If you're using the TypeScript configuration from Flowbite then you can import the types for the Dismiss class, parameters and its options. 
 
 Here's an example that applies the types from Flowbite to the code above:
 
-{{< code lang="typescript" file="dismiss.ts" icon="file" >}}
+```javascript
 import { Dismiss } from "flowbite";
 import type { DismissOptions, DismissInterface } from "flowbite";
 import type { InstanceOptions } from 'flowbite';
@@ -736,4 +719,4 @@ const dismiss: DismissInterface = new Dismiss($targetEl, $triggerEl, options, in
 
 // programmatically hide it
 dismiss.hide();
-{{< /code >}}
+```

package/data/components/avatar.md

@@ -1,60 +1,47 @@
----
-layout: docs
-title: Tailwind CSS Avatar - Flowbite
-description: Use the avatar component to show a visual representation of a user profile using an image element or SVG object based on multiple styles and sizes
-group: components
-toc: true
-
-previous: Alerts
-previousLink: components/alerts/
-next: Badge
-nextLink: components/badge/
----
-
 The avatar component can be used as a visual identifier for a user profile on your website and you can use the examples from Flowbite to modify the styles and sizes of these components using the utility classes from Tailwind CSS.
 
 ## Default avatar
 
 Use this example to create a circle and rounded avatar on an image element.
 
-{{< example class="flex justify-center gap-4" github="components/avatar.md" show_dark=true >}}
+```html
 <img class="w-10 h-10 rounded-full" src="/docs/images/people/profile-picture-5.jpg" alt="Rounded avatar">
 <img class="w-10 h-10 rounded-base" src="/docs/images/people/profile-picture-5.jpg" alt="Default avatar">
-{{< /example >}}
+```
 
 ## Bordered
 
 Apply a border around the avatar component you can use the `ring-{color}` class from Tailwind CSS.
 
-{{< example class="flex justify-center" github="components/avatar.md" show_dark=true >}}
+```html
 <img class="w-10 h-10 p-1 rounded-full ring-2 ring-default" src="/docs/images/people/profile-picture-5.jpg" alt="Bordered avatar">
-{{< /example >}}
+```
 
 ## Placeholder icon
 
 Use this example as a placeholder icon for the user profile when there is no custom image available.
 
-{{< example class="flex justify-center" github="components/avatar.md" show_dark=true >}}
+```html
 <div class="relative w-10 h-10 overflow-hidden bg-neutral-secondary-medium rounded-full">
     <svg class="absolute w-12 h-12 text-body-subtle -left-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path></svg>
 </div>
-{{< /example >}}
+```
 
 ## Placeholder initials
 
 This example can be used to show the initials of the user's first and last name as a placeholder when no profile picture is available.
 
-{{< example class="flex justify-center" github="components/avatar.md" show_dark=true >}}
+```html
 <div class="relative inline-flex items-center justify-center w-10 h-10 overflow-hidden bg-neutral-tertiary rounded-full">
     <span class="font-medium text-body">JL</span>
 </div>
-{{< /example >}}
+```
 
 ## Avatar tooltip
 
 Use this example to show a tooltip when hovering over the avatar.
 
-{{< example class="flex items-center justify-center pt-8 gap-4" github="components/avatar.md" show_dark=true >}}
+```html
 <div>
   <div id="tooltip-jese" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-dark rounded-base shadow-xs opacity-0 tooltip">
       Jese Leos
@@ -76,13 +63,13 @@ Use this example to show a tooltip when hovering over the avatar.
   </div>
   <img data-tooltip-target="tooltip-bonnie" class="w-10 h-10 rounded-base" src="/docs/images/people/profile-picture-3.jpg" alt="Medium avatar">
 </div>
-{{< /example >}}
+```
 
 ## Dot indicator
 
 Use a dot element relative to the avatar component as an indicator for the user (eg. online or offline status).
 
-{{< example class="flex justify-center gap-4" github="components/avatar.md" show_dark=true >}}
+```html
 <div class="relative">
     <img class="w-10 h-10 rounded-full" src="/docs/images/people/profile-picture-5.jpg" alt="">
     <span class="top-0 left-7 absolute  w-3.5 h-3.5 bg-success border-2 border-buffer rounded-full"></span>
@@ -99,13 +86,13 @@ Use a dot element relative to the avatar component as an indicator for the user
     <img class="w-10 h-10 rounded-base" src="/docs/images/people/profile-picture-5.jpg" alt="">
     <span class="absolute bottom-0 left-8 transform translate-y-1/4 w-3.5 h-3.5 bg-success border-2 border-buffer rounded-full"></span>
 </div>
-{{< /example >}}
+```
 
 ## Stacked
 
 Use this example if you want to stack a group of users by overlapping the avatar components.
 
-{{< example class="flex justify-center gap-4 rtl:gap-8" github="components/avatar.md" show_dark=true >}}
+```html
 <div class="flex -space-x-4 rtl:space-x-reverse">
     <img class="w-10 h-10 border-2 border-buffer rounded-full" src="/docs/images/people/profile-picture-5.jpg" alt="">
     <img class="w-10 h-10 border-2 border-buffer rounded-full" src="/docs/images/people/profile-picture-2.jpg" alt="">
@@ -118,13 +105,13 @@ Use this example if you want to stack a group of users by overlapping the avatar
     <img class="w-10 h-10 border-2 border-buffer rounded-full" src="/docs/images/people/profile-picture-3.jpg" alt="">
     <a class="flex items-center justify-center w-10 h-10 text-xs font-medium text-white bg-dark-strong border-2 border-buffer rounded-full" href="#">+99</a>
 </div>
-{{< /example >}}
+```
 
 ## Avatar text
 
 This example can be used if you want to show additional information in the form of text elements such as the user's name and join date.
 
-{{< example class="flex justify-center" github="components/avatar.md" show_dark=true >}}
+```html
 <div class="flex items-center gap-2.5">
     <img class="w-10 h-10 rounded-full" src="/docs/images/people/profile-picture-5.jpg" alt="">
     <div class="font-medium text-heading">
@@ -132,13 +119,13 @@ This example can be used if you want to show additional information in the form
         <div class="text-sm font-normal text-body">Joined in August 2014</div>
     </div>
 </div>
-{{< /example >}}
+```
 
 ## User dropdown
 
 Use this example if you want to show a dropdown menu when clicking on the avatar component.
 
-{{< example class="flex justify-center gap-4" github="components/avatar.md" show_dark=true iframeHeight="360" >}}
+```html
 <img id="avatarButton" type="button" data-dropdown-toggle="userDropdown" data-dropdown-placement="bottom-start" class="w-10 h-10 rounded-full cursor-pointer" src="/docs/images/people/profile-picture-5.jpg" alt="User dropdown">
 
 <!-- Dropdown menu -->
@@ -162,17 +149,17 @@ Use this example if you want to show a dropdown menu when clicking on the avatar
       </li>
     </ul>
 </div>
-{{< /example >}}
+```
 
 ## Sizes
 
 Choose from multiple sizing options for the avatar component from this example.
 
-{{< example class="flex flex-wrap items-center justify-center gap-6" github="components/avatar.md" show_dark=true >}}
+```html
 <img class="w-4.5 h-4.5 rounded-sm" src="/docs/images/people/profile-picture-5.jpg" alt="Extra small avatar">
 <img class="w-6 h-6 rounded-sm" src="/docs/images/people/profile-picture-5.jpg" alt="Small avatar">
 <img class="w-8 h-8 rounded-base" src="/docs/images/people/profile-picture-5.jpg" alt="Base avatar">
 <img class="w-11 h-11 rounded-base" src="/docs/images/people/profile-picture-5.jpg" alt="Large avatar">
 <img class="w-14 h-14 rounded-base" src="/docs/images/people/profile-picture-5.jpg" alt="xl avatar">
 <img class="w-16 h-16 rounded-base" src="/docs/images/people/profile-picture-5.jpg" alt="2xl avatar">
-{{< /example >}}
+```