flowbite-mcp 1.1.3 → 1.1.5

package/data/components/tooltips.md

@@ -1,40 +1,25 @@
----
-layout: docs
-title: Tailwind CSS Tooltip - Flowbite
-description: Use the following Tailwind CSS powered tooltips to show extra content when hovering or focusing on an element
-group: components
-toc: true
-requires_js: true
-
-previous: Toast
-previousLink: components/toast/
-
-next: Typography
-nextLink: components/typography/
----
-
 Flowbite allows you to use the Tailwind CSS tooltip component to show extra information when hovering or focusing over an element in multiple positions, styles, and animations.
 
-Before continuing, make sure that you have the <a href="{{< ref "getting-started/quickstart" >}}">Flowbite JavaScript file</a> included in your project in order to make the tooltip component work.
+Before continuing, make sure that you have the Flowbite JavaScript file included in your project in order to make the tooltip component work.
 
 ## Default tooltip example
 
 To get started with using tooltips all you need to do is add the `data-tooltip-target="{elementId}"` data attribute to an element where `elementId` is the id of the tooltip component. In the following example you can see the button that will trigger the `tooltip-default` element to be shown when hovered or focused.
 
-{{< example class="flex justify-center pt-8" github="components/tooltips.md" show_dark=true >}}
+```html
 <button data-tooltip-target="tooltip-default" 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">Default tooltip</button>
 
 <div id="tooltip-default" 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">
     Tooltip content
     <div class="tooltip-arrow" data-popper-arrow></div>
 </div>
-{{< /example >}}
+```
 
 ## Tooltip styles
 
 You can use choose between dark and light version styles for the tooltip component by changing the utility classes from Tailwind CSS and by applying the `data-tooltip-style="{light|dark}"` data attribute.
 
-{{< example class="flex justify-center pt-8 " github="components/tooltips.md" show_dark=true >}}
+```html
 
 <!-- Light style tooltip -->
 
@@ -53,13 +38,13 @@ You can use choose between dark and light version styles for the tooltip compone
     Tooltip content
     <div class="tooltip-arrow" data-popper-arrow></div>
 </div>
-{{< /example >}}
+```
 
 ## Placement
 
 The positioning of the tooltip element relative to the triggering element (eg. button, link) can be set using the `data-tooltip-placement="{top|right|bottom|left}"` data attribute.
 
-{{< example class="flex flex-wrap justify-center py-8" github="components/tooltips.md" show_dark=true >}}
+```html
 
 <!-- Show tooltip on top -->
 
@@ -96,13 +81,13 @@ The positioning of the tooltip element relative to the triggering element (eg. b
     Tooltip on left
     <div class="tooltip-arrow" data-popper-arrow></div>
 </div>
-{{< /example >}}
+```
 
 ## Triggering
 
 You can choose the triggering event by using the `data-tooltip-trigger="{hover|click}"` data attributes to choose whether you want to show the tooltip when hovering or clicking on the element. By default this option is set to `hover`.
 
-{{< example class="flex justify-center pt-8" github="components/tooltips.md" show_dark=true >}}
+```html
 
 <!-- Show tooltip on hover -->
 
@@ -121,32 +106,32 @@ You can choose the triggering event by using the `data-tooltip-trigger="{hover|c
     Tooltip content
     <div class="tooltip-arrow" data-popper-arrow></div>
 </div>
-{{< /example >}}
+```
 
 ## Animation
 
 You can set tooltip animation styles by using the transition utility classes from Tailwind CSS. Make sure that you add `transition-opacity` and `duration-{x}` to set the animation duration.
 
-{{< example class="flex justify-center pt-8" github="components/tooltips.md" show_dark=true >}}
+```html
 <button data-tooltip-target="tooltip-animation" 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">Animated tooltip</button>
 
 <div id="tooltip-animation" 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">
     Tooltip content
     <div class="tooltip-arrow" data-popper-arrow></div>
 </div>
-{{< /example >}}
+```
 
 ## Disable arrow
 
 You can also disable the tooltip arrow by not including the `data-popper-arrow` element.
 
-{{< example class="flex justify-center pt-8" github="components/tooltips.md" show_dark=true >}}
+```html
 <button data-tooltip-target="tooltip-no-arrow" 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">Default tooltip</button>
 
 <div id="tooltip-no-arrow" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white bg-dark rounded-base shadow-xs opacity-0 tooltip">
     Tooltip content
 </div>
-{{< /example >}}
+```
 
 ## JavaScript behaviour
 
@@ -391,7 +376,7 @@ First of all, set the target element as the tooltip itself and the trigger eleme
 
 After that you can also set the options object to change the placement and trigger type of the tooltip, alongside with the callback functions.
 
-{{< code lang="javascript" file="tooltip.js" icon="file" >}}
+```javascript
 // set the tooltip content element
 const $targetEl = document.getElementById('tooltipContent');
 
@@ -419,11 +404,11 @@ const instanceOptions = {
   id: 'tooltipContent',
   override: true
 };
-{{< /code >}}
+```
 
 Create a new Tooltip object based on the options above.
 
-{{< code lang="javascript" file="tooltip.js" icon="file" >}}
+```javascript
 import { Tooltip } from 'flowbite';
 
 /*
@@ -432,11 +417,11 @@ import { Tooltip } from 'flowbite';
  * options: optional
  */
 const tooltip = new Tooltip($targetEl, $triggerEl, options, instanceOptions);
-{{< /code >}}
+```
 
 Use the `show` and `hide` methods on the Tooltip object to programmatically show and hide the tooltip element using JavaScript.
 
-{{< code lang="javascript" >}}
+```javascript
 // show the tooltip
 tooltip.show();
 
@@ -451,13 +436,13 @@ tooltip.destroy();
 
 // re-initialize tooltip object
 tooltip.init();
-{{< /code >}}
+```
 
 ### HTML Markup
 
 Use the following HTML code for the JavaScript example above.
 
-{{< code lang="html" file="tooltip.html" icon="file" >}}
+```html
 <button
     id="tooltipButton"
     type="button"
@@ -472,15 +457,15 @@ Use the following HTML code for the JavaScript example above.
     Tooltip content
     <div class="tooltip-arrow" data-popper-arrow></div>
 </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 Tooltip class, parameters and its options.
+If you're using the TypeScript configuration from Flowbite then you can import the types for the Tooltip class, parameters and its options.
 
 Here's an example that applies the types from Flowbite to the code above:
 
-{{< code lang="typescript" file="tooltip.ts" icon="file" >}}
+```typescript
 import { Tooltip } from 'flowbite';
 import type { TooltipOptions, TooltipInterface } from 'flowbite';
 import type { InstanceOptions } from 'flowbite';
@@ -521,4 +506,4 @@ const tooltip: TooltipInterface = new Tooltip($targetEl, $triggerEl, options, in
 
 // show the tooltip
 tooltip.show();
-{{< /code >}}
+```

package/data/components/typography.md

@@ -1,16 +1,3 @@
----
-layout: docs
-title: Tailwind CSS Typography - Flowbite
-description: Use the typography plugin from Flowbite to apply styles to all inline elements like headings, paragraphs, lists, and images using a single format class
-group: components
-toc: true
-
-previous: Tooltips
-previousLink: components/tooltips/
-next: QR Code
-nextLink: components/qr-code/
----
-
 Get started with the [Flowbite Typography](https://github.com/themesberg/flowbite-typography) plugin forked from the official [Tailwind CSS Typography](https://tailwindcss.com/docs/typography-plugin) plugin to set a custom `format` class to a wrapper element to apply styles to all inline child elements such as headings, paragraphs, images, lists, and more and apply font sizes, font weights, colors, and spacings.
 
 You can check out this [live demo](https://flowbite.com/plugins/typography/) to see how content inside an article will render like.
@@ -21,19 +8,19 @@ Make sure that you have both [Node.js](https://nodejs.org/) and [Tailwind CSS](h
 
 1. Install the Flowbite Typography plugin via NPM:
 
-{{< code lang="bash" >}}
+```bash
 npm i -D flowbite-typography
-{{< /code >}}
+```
 
 2. Import the `flowbite-typography` plugin inside your main Tailwind CSS file:
 
-{{< code lang="javascript" >}}
+```javascript
 @plugin "flowbite-typography";
-{{< /code >}}
+```
 
 Alternatively you can do the same but in your `tailwind.config.js` file:
 
-{{< code lang="javascript" >}}
+```javascript
 // import the tailwind.config.js file in your main CSS file if using Tailwind CSS v4
 module.exports = {
   theme: {
@@ -44,7 +31,7 @@ module.exports = {
     // ...
   ],
 }
-{{< /code >}}
+```
 
 Now you can go ahead and use the new formatting classes from the Flowbite Typography plugin.
 
@@ -54,7 +41,7 @@ Once you have installed the plugin inside your project you can add the `format`
 
 All of these elements will be automatically styled with proper spacing, font sizing, font weight, colors, and more based on recommended UI/UX readability and accessibility standards.
 
-{{< code lang="html" >}}
+```html
 <article class="format lg:format-lg">
     <h1>Prototyping from A to Z: best practices for successful prototypes</h1>
     <p class="lead">Flowbite is an open-source library of UI components built with the utility-first classes from Tailwind CSS. It also includes interactive elements such as dropdowns, modals, datepickers.</p>
@@ -72,7 +59,7 @@ All of these elements will be automatically styled with proper spacing, font siz
         <li><strong>Communicating your vision</strong>. By using an interactive medium to preview and test design elements, designers and developers can understand each other — and the project — better.</li>
     </ol>
 </article>
-{{< /code >}}
+```
 
 You can also set the `lg:format-lg` class to set increase font sizes and spacings for larger viewport devices.
 
@@ -80,19 +67,19 @@ You can also set the `lg:format-lg` class to set increase font sizes and spacing
 
 You can update the default blue link color to anything you'd like by setting the `format-{color}` class:
 
-{{< code lang="html" >}}
+```html
 <article class="format lg:format-lg format-red">
     <h1>Prototyping from A to Z: best practices for successful prototypes</h1>
     <p class="lead">Flowbite is an open-source library of UI components built with the utility-first classes from Tailwind CSS. It also includes interactive elements such as dropdowns, modals, datepickers.</p>
     <p>Before going digital, you might benefit from scribbling down some ideas in a sketchbook. This way, you can think things through before committing to an actual design project.</p>
     <p>But then I found a <a href="#">component library based on Tailwind CSS called Flowbite</a>. It comes with the most commonly used UI components, such as buttons, navigation bars, cards, form elements, and more which are conveniently built with the utility classes from Tailwind CSS.</p>
 </article>
-{{< /code >}}
+```
 ## Dark mode
 
 Enable dark mode for the typography by using the `dark:format-invert` class on the article wrapper element:
 
-{{< code lang="html" >}}
+```html
 <article class="format lg:format-lg dark:format-invert">
     <h1>The content inside this article will invert when switching to dark mode</h1>
     <p class="lead">Flowbite is an open-source library of UI components built with the utility-first classes from Tailwind CSS. It also includes interactive elements such as dropdowns, modals, datepickers.</p>
@@ -110,26 +97,26 @@ Enable dark mode for the typography by using the `dark:format-invert` class on t
         <li><strong>Communicating your vision</strong>. By using an interactive medium to preview and test design elements, designers and developers can understand each other — and the project — better.</li>
     </ol>
 </article>
-{{< /code >}}
+```
 
 ## Max width
 
 Override the default maximum width by setting a custom `max-w-{size}` class next to the `format` class:
 
-{{< code lang="html" >}}
+```html
 <article class="max-w-none format lg:format-lg format-red">
     <h1>Prototyping from A to Z: best practices for successful prototypes</h1>
     <p class="lead">Flowbite is an open-source library of UI components built with the utility-first classes from Tailwind CSS. It also includes interactive elements such as dropdowns, modals, datepickers.</p>
     <p>Before going digital, you might benefit from scribbling down some ideas in a sketchbook. This way, you can think things through before committing to an actual design project.</p>
     <p>But then I found a <a href="#">component library based on Tailwind CSS called Flowbite</a>. It comes with the most commonly used UI components, such as buttons, navigation bars, cards, form elements, and more which are conveniently built with the utility classes from Tailwind CSS.</p>
 </article>
-{{< /code >}}
+```
 
 ## Disable format
 
 If you want to disable formatting inside the typography content you can use the `not-format` class:
 
-{{< code lang="html" >}}
+```html
 <article class="format lg:format-lg dark:format-invert">
     <h1>The content inside this article will invert when switching to dark mode</h1>
     <p class="lead">Flowbite is an open-source library of UI components built with the utility-first classes from Tailwind CSS. It also includes interactive elements such as dropdowns, modals, datepickers.</p>
@@ -150,7 +137,7 @@ If you want to disable formatting inside the typography content you can use the
         </ol>
     </div>
 </article>
-{{< /code >}}
+```
 
 ## Options
 
@@ -160,7 +147,7 @@ Extend the plugin's options inside the Tailwind configuration file to set your o
 
 You can set your own colors by extending the typography plugin inside the `tailwind.config.js` file:
 
-{{< code lang="javascript" >}}
+```javascript
 module.exports = {
   theme: {
     extend: {
@@ -212,7 +199,7 @@ module.exports = {
     // ...
   ],
 }
-{{< /code >}}
+```
 
 Now you can use the `format-red` class and apply these styles.
 
@@ -220,7 +207,7 @@ Now you can use the `format-red` class and apply these styles.
 
 Change the default `format` class to your own choosing by updating the `tailwind.config.js` file:
 
-{{< code lang="javascript" >}}
+```javascript
 module.exports = {
   theme: {
     // ...
@@ -232,13 +219,13 @@ module.exports = {
   ]
   ...
 }
-{{< /code >}}
+```
 
 ### Custom CSS
 
 You can also customize the default CSS by extending the `css` key value pair from the Tailwind configuration file:
 
-{{< code lang="javascript" >}}
+```javascript
 module.exports = {
   theme: {
     extend: {
@@ -262,7 +249,7 @@ module.exports = {
     // ...
   ],
 }
-{{< /code >}}
+```
 
 ## Blog templates
 

package/data/components/video.md

@@ -1,50 +1,37 @@
----
-layout: docs
-title: Tailwind CSS Video - Flowbite
-description: Use the video component to configure an embedded video player using native HTML 5 functionality based on the utility classes from Tailwind CSS
-group: components
-toc: true
-
-previous: QR Code
-previousLink: components/qr-code/
-next: Input field
-nextLink: forms/input-field/
----
-
 Get started with the video component to embed internal video source into a native HTML 5 video player and set custom options such as autoplay or muted to enhance the user experience.
 
 ## Video player
 
 Use this example to create a native browser video player and apply the `w-full` utility class from Tailwind CSS to span the full width of the parent container.
 
-{{< example github="typography/video.md" show_dark=true >}}
+```html
 <video class="w-full rounded-base" controls>
   <source src="/docs/videos/flowbite.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>
-{{< /example >}}
+```
 
 ## Autoplay
 
 Use the `autoplay` attribute on the video component to automatically start the video when the page has been loaded.
 
-{{< example github="typography/video.md" show_dark=true >}}
+```html
 <video class="w-full rounded-base" controls>
   <source src="/docs/videos/flowbite.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>
-{{< /example >}}
+```
 
 ## Muted
 
 Use the `muted` attribute together with the `autoplay` option to start the video while the sound is muted.
 
-{{< example github="typography/video.md" show_dark=true >}}
+```html
 <video class="w-full rounded-base" autoplay muted controls>
   <source src="/docs/videos/flowbite.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>
-{{< /example >}}
+```
 
 ## Sizes
 
@@ -54,42 +41,42 @@ Set the width and height of the video component using the `w-{size}` and `h-{siz
 
 Use the `w-{size}` class to set the width of the video component.
 
-{{< example github="typography/video.md" show_dark=true >}}
+```html
 <video class="w-96 rounded-base" controls>
   <source src="/docs/videos/flowbite.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>
-{{< /example >}}
+```
 
 ### Height
 
 Use the `h-{size}` class to set the height of the video player.
 
-{{< example github="typography/video.md" show_dark=true >}}
+```html
 <video class="h-80 rounded-base" controls>
   <source src="/docs/videos/flowbite.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>
-{{< /example >}}
+```
 
 ### Responsive
 
 Use the following example to make the video responsive across all devices and viewports.
 
-{{< example github="typography/video.md" show_dark=true >}}
+```html
 <video class="w-full h-auto max-w-full rounded-base" controls>
   <source src="/docs/videos/flowbite.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>
-{{< /example >}}
+```
 
 ## Custom styles
 
 Customize the video player appearance using the utility classes from Tailwind CSS such as `rounded-{size}` or `border` to set rounded-sm corners and border.
 
-{{< example github="typography/video.md" show_dark=true >}}
+```html
 <video class="w-full h-auto max-w-full border border-default rounded-base" controls>
   <source src="/docs/videos/flowbite.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>
-{{< /example >}}
+```