flowbite-mcp 1.1.3 → 1.1.5

package/data/components/tabs.md

@@ -1,23 +1,10 @@
----
-layout: docs
-title: Tailwind CSS Tabs - Flowbite
-description: Use these responsive tabs components to create a secondary navigational hierarchy for your website or toggle content inside a container
-group: components
-toc: true
-
-previous: Tables
-previousLink: components/tables/
-next: Timeline
-nextLink: components/timeline/
----
-
 The tabs component can be used either as an extra navigational hierarchy complementing the main navbar or you can also use it to change content inside a container just below the tabs using the data attributes from Flowbite.
 
 ## Default tabs
 
 Use the following default tabs component example to show a list of links that the user can navigate from on your website.
 
-{{< example github="components/tabs.md" show_dark=true >}}
+```html
 
 <ul class="flex flex-wrap text-sm font-medium text-center text-body border-b border-default">
     <li class="me-2">
@@ -36,13 +23,13 @@ Use the following default tabs component example to show a list of links that th
         <a class="inline-block p-4 text-fg-disabled rounded-t-base cursor-not-allowed">Disabled</a>
     </li>
 </ul>
-{{< /example >}}
+```
 
 ## Tabs with underline
 
 Use this alternative tabs component style with an underline instead of a background when hovering and being active on a certain page.
 
-{{< example github="components/tabs.md" show_dark=true >}}
+```html
 
 <div class="text-sm font-medium text-center text-body border-b border-default">
     <ul class="flex flex-wrap -mb-px">
@@ -63,13 +50,13 @@ Use this alternative tabs component style with an underline instead of a backgro
         </li>
     </ul>
 </div>
-{{< /example >}}
+```
 
 ## Tabs with icons
 
 This is an example of the tabs component where you can also use a SVG powered icon to complement the text within the navigational tabs.
 
-{{< example github="components/tabs.md" show_dark=true >}}
+```html
 
 <div class="border-b border-default">
     <ul class="flex flex-wrap -mb-px text-sm font-medium text-center text-body">
@@ -102,13 +89,13 @@ This is an example of the tabs component where you can also use a SVG powered ic
         </li>
     </ul>
 </div>
-{{< /example >}}
+```
 
 ## Pills tabs
 
 If you want to use pills as a style for the tabs component you can do so by using this example.
 
-{{< example github="components/tabs.md" show_dark=true >}}
+```html
 
 <ul class="flex flex-wrap text-sm font-medium text-center text-body">
     <li class="me-2">
@@ -127,13 +114,13 @@ If you want to use pills as a style for the tabs component you can do so by usin
         <a class="inline-block px-4 py-3 text-fg-disabled cursor-not-allowed">Tab 5</a>
     </li>
 </ul>
-{{< /example >}}
+```
 
 ## Vertical tabs
 
 Use this example to show a vertically aligned set of tabs on the left side of the page.
 
-{{< example github="components/tabs.md" show_dark=true >}}
+```html
 
 <div class="md:flex">
     <ul class="flex-column space-y space-y-4 text-sm font-medium text-body md:me-4 mb-4 md:mb-0">
@@ -175,14 +162,14 @@ Use this example to show a vertically aligned set of tabs on the left side of th
     </div>
 </div>
 
-{{< /example >}}
+```
 
 
 ## Full width tabs
 
 If you want to show the tabs on the full width relative to the parent element you can do so by using the full width tabs component example.
 
-{{< example github="components/tabs.md" show_dark=true >}}
+```html
 
 <div class="sm:hidden">
     <label for="tabs" class="sr-only">Select your country</label>
@@ -207,13 +194,13 @@ If you want to show the tabs on the full width relative to the parent element yo
         <a href="#" class="inline-block w-full text-body bg-neutral-primary-soft border border-default rounded-e-base hover:bg-neutral-secondary-medium hover:text-heading focus:ring-4 focus:ring-neutral-secondary-strong font-medium leading-5 text-sm px-4 py-2.5 focus:outline-none">Invoice</a>
     </li>
 </ul>
-{{< /example >}}
+```
 
 ## Tabs with icons
 
 This example can be used to show a list of tabs with icons from our [SVG icons](https://flowbite.com/icons/).
 
-{{< example github="components/tabs.md" show_dark=true >}}
+```html
 
 <div class="sm:hidden">
     <label for="tabs-icons" class="sr-only">Select your country</label>
@@ -250,11 +237,9 @@ This example can be used to show a list of tabs with icons from our [SVG icons](
         </a>
     </li>
 </ul>
-{{< /example >}}
+```
+
 
-<div class="mt-8 -mb-5">
-  {{< requires_js >}}
-</div>
 
 ## Interactive tabs
 
@@ -268,7 +253,7 @@ Apply the `role="tabpanel"` data attribute to every tab content element and set
 
 You can use multiple tab components on a single page but make sure that the id's are different.
 
-{{< example github="components/tabs.md" show_dark=true >}}
+```html
 
 <div class="mb-4 border-b border-default">
     <ul class="flex flex-wrap -mb-px text-sm font-medium text-center" id="default-tab" data-tabs-toggle="#default-tab-content" role="tablist">
@@ -300,13 +285,13 @@ You can use multiple tab components on a single page but make sure that the id's
         <p class="text-sm text-body">This is some placeholder content the <strong class="font-medium text-heading">Contacts tab's associated content</strong>. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.</p>
     </div>
 </div>
-{{< /example >}}
+```
 
 ## Active tab style
 
 Use the `data-tabs-active-classes` and the `data-tabs-inactive-classes` to set the active and inactive tab Tailwind CSS classes. In this example we set the active classes to the purple color instead of blue.
 
-{{< example github="components/tabs.md" show_dark=true >}}
+```html
 
 <div class="mb-4 border-b border-default">
     <ul class="flex flex-wrap -mb-px text-sm font-medium text-center" id="default-styled-tab" data-tabs-toggle="#default-styled-tab-content" data-tabs-active-classes="text-purple hover:text-purple border-purple" data-tabs-inactive-classes="dark:border-transparent text-body hover:text-fg-brand border-default hover:border-brand" role="tablist">
@@ -338,7 +323,7 @@ Use the `data-tabs-active-classes` and the `data-tabs-inactive-classes` to set t
         <p class="text-sm text-body">This is some placeholder content the <strong class="font-medium text-heading">Contacts tab's associated content</strong>. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.</p>
     </div>
 </div>
-{{< /example >}}
+```
 
 ## JavaScript behaviour
 
@@ -546,7 +531,7 @@ Check out the following example to learn how to initialize and manipulate a Tabs
 
 First of all, create an array of objects that contains the id, trigger element, and content element of each tab, set the active tab based on the id, and optionally set a callback function after a new tab has been shown.
 
-{{< code lang="javascript" file="tabs.js" icon="file" >}}
+```javascript
 const tabsElement = document.getElementById('tabs-example');
 
 // create an array of objects with the id, trigger element (eg. button), and the content element
@@ -590,11 +575,11 @@ const instanceOptions = {
   id: 'tabs-example',
   override: true
 };
-{{< /code >}}
+```
 
 Create a new Tabs object based on the parameters we've previously set.
 
-{{< code lang="javascript" file="tabs.js" icon="file" >}}
+```javascript
 import { Tabs } from 'flowbite';
 
 /*
@@ -604,11 +589,11 @@ import { Tabs } from 'flowbite';
 * instanceOptions (optional)
 */
 const tabs = new Tabs(tabsElement, tabElements, options, instanceOptions);
-{{< /code >}}
+```
 
 Lastly, you can now use the methods on the Tabs object to show another tab element, get a tab element based on the id, or get the current active tab element.
 
-{{< code lang="javascript" file="tabs.js" icon="file" >}}
+```javascript
 // shows another tab element
 tabs.show('dashboard');
 
@@ -617,13 +602,13 @@ tabs.getTab('contacts');
 
 // get the current active tab object
 tabs.getActiveTab();
-{{< /code >}}
+```
 
 ### HTML Markup
 
 You can use this HTML code as an example for the JavaScript code from above.
 
-{{< code lang="html" file="tabs.html" icon="file" >}}
+```html
 <div class="mb-4 border-b border-default dark:border-gray-700">
     <ul class="flex flex-wrap -mb-px text-sm font-medium text-center text-body dark:text-gray-400" id="tabs-example" role="tablist">
         <li class="me-2" role="presentation">
@@ -738,15 +723,15 @@ You can use this HTML code as an example for the JavaScript code from above.
         </p>
     </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 Tabs class, parameters and its options.
+If you're using the TypeScript configuration from Flowbite then you can import the types for the Tabs class, parameters and its options.
 
 Here's an example that applies the types from Flowbite to the code above:
 
-{{< code lang="typescript" file="tabs.ts" icon="file" >}}
+```typescript
 import { Tabs } from 'flowbite';
 import type { TabsOptions, TabsInterface, TabItem } from 'flowbite';
 import type { InstanceOptions } from 'flowbite';
@@ -805,4 +790,4 @@ const tabs: TabsInterface = new Tabs(tabsElement, tabElements, options, instance
 
 // open tab item based on id
 tabs.show('contacts');
-{{< /code >}}
+```

package/data/components/timeline.md

@@ -1,16 +1,3 @@
----
-layout: docs
-title: Tailwind CSS Timeline - Flowbite
-description: Get started with the responsive timeline component to show data in a chronological order with support for multiple styles, sizes, and variants
-group: components
-toc: true
-
-previous: Tabs
-previousLink: components/tabs/
-next: Toast
-nextLink: components/toast/
----
-
 The timeline component can be used to show series of data in a chronological order for use cases such as activity feeds, user actions, application updates, and more. Get started with multiple vertical timeline styles built with the utility classes from Tailwind CSS and Flowbite.
 
 ## Default timeline
@@ -19,7 +6,7 @@ Use this responsive Tailwind CSS timeline component to show a series of data ent
 
 Optionally, you can also add a CTA button to any of the timeline elements.
 
-{{< example github="components/timeline.md" show_dark=true >}}
+```html
 <ol class="relative border-s border-default">                  
     <li class="mb-10 ms-4">
         <div class="absolute w-3 h-3 bg-neutral-quaternary rounded-full mt-1.5 -start-1.5 border border-buffer"></div>
@@ -45,13 +32,13 @@ Optionally, you can also add a CTA button to any of the timeline elements.
     </li>
 </ol>
 
-{{< /example >}}
+```
 
 ## Vertical timeline
 
 Use this vertical timeline component with icons and badges to show a more advanced set of data.
 
-{{< example github="components/timeline.md" show_dark=true >}}
+```html
 <ol class="relative border-s border-default">                  
     <li class="mb-10 ms-6">            
         <span class="absolute flex items-center justify-center w-6 h-6 bg-brand-softer rounded-full -start-3 ring-8 ring-buffer">
@@ -83,13 +70,13 @@ Use this vertical timeline component with icons and badges to show a more advanc
     </li>
 </ol>
 
-{{< /example >}}
+```
 
 ## Stepper timeline
 
 Use this horizontally aligned timeline component to show a series of data in a chronological order.
 
-{{< example github="components/timeline.md" show_dark=true >}}
+```html
 <ol class="items-center sm:flex">
     <li class="relative mb-6 sm:mb-0">
         <div class="flex items-center">
@@ -135,13 +122,13 @@ Use this horizontally aligned timeline component to show a series of data in a c
     </li>
 </ol>
 
-{{< /example >}}
+```
 
 ## Activity log
 
 This component can be used to show the timline of a user's activity history inside your application by using an avatar, datetime, description, and links to specific pages.
 
-{{< example github="components/timeline.md" show_dark=true >}}
+```html
 <ol class="relative border-s border-default">                  
     <li class="mb-10 ms-6">            
         <span class="absolute flex items-center justify-center w-6 h-6 rounded-full -start-3 ring-8 ring-buffer">
@@ -182,13 +169,13 @@ This component can be used to show the timline of a user's activity history insi
     </li>
 </ol>
 
-{{< /example >}}
+```
 
 ## Grouped timeline
 
 Use this component to group multiple data entries inside a single date and show elements like the avatar, title, description, tag and link to a relevant page.
 
-{{< example github="components/timeline.md" show_dark=true >}}
+```html
 <div class="p-5 bg-neutral-secondary-soft border border-default rounded-base mb-4">
     <time class="text-lg font-semibold text-heading">January 15th, 2025</time>
     <ol class="mt-3 divide-y divide-default">
@@ -301,4 +288,4 @@ Use this component to group multiple data entries inside a single date and show
         </li>
     </ol>
 </div>
-{{< /example >}}
+```

package/data/components/toast.md

@@ -1,24 +1,10 @@
----
-layout: docs
-title: Tailwind CSS Toast - Flowbite
-description: Push notifications to your users using the toast component and choose from multiple sizes, colors, styles, and positions
-group: components
-requires_js: true
-toc: true
-
-previous: Timeline
-previousLink: components/timeline/
-next: Tooltips
-nextLink: components/tooltips/
----
-
 The toast component can be used to enhance your website's interactivity by pushing notifications to your visitors. You can choose from multiple styles, colors, sizes, and positions and even dismiss the component by using the `data-dismiss-target` data attribute from Flowbite.
 
 ## Default toast
 
 Use this simple toast component with an icon, message, and dismissible close button to show alert messages to your website visitors. Make sure that you set the correct id for the `data-dismiss-target` data attribute to enable the dismissible feature.
 
-{{< example class="flex justify-center" github="components/toast.md" show_dark=true >}}
+```html
 
 <div id="toast-default" class="flex items-center w-full max-w-xs p-4 text-body bg-neutral-primary-soft rounded-base shadow-xs border border-default" role="alert">
     <svg class="w-6 h-6 text-fg-brand" 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="M18.122 17.645a7.185 7.185 0 0 1-2.656 2.495 7.06 7.06 0 0 1-3.52.853 6.617 6.617 0 0 1-3.306-.718 6.73 6.73 0 0 1-2.54-2.266c-2.672-4.57.287-8.846.887-9.668A4.448 4.448 0 0 0 8.07 6.31 4.49 4.49 0 0 0 7.997 4c1.284.965 6.43 3.258 5.525 10.631 1.496-1.136 2.7-3.046 2.846-6.216 1.43 1.061 3.985 5.462 1.754 9.23Z"/></svg>
@@ -29,13 +15,13 @@ Use this simple toast component with an icon, message, and dismissible close but
     </button>
 </div>
 
-{{< /example >}}
+```
 
 ## Colors
 
 Use these contextual toast components to show success, danger, or warning alert messages to your users.
 
-{{< example class="flex flex-col items-center space-y-4" github="components/toast.md" show_dark=true >}}
+```html
 
 <div id="toast-success" class="flex items-center w-full max-w-sm p-4 text-body bg-neutral-primary-soft rounded-base shadow-xs border border-default" role="alert">
     <div class="inline-flex items-center justify-center shrink-0 w-7 h-7 text-fg-success bg-success-soft rounded">
@@ -71,13 +57,13 @@ Use these contextual toast components to show success, danger, or warning alert
     </button>
 </div>
 
-{{< /example >}}
+```
 
 ## Simple toast
 
 This component can be used to show simple messages and notifications without the use of a close button.
 
-{{< example class="flex justify-center" github="components/toast.md" show_dark=true >}}
+```html
 
 <div id="toast-simple" class="flex items-center w-full max-w-sm p-4 text-body bg-neutral-primary-soft rounded-base shadow-xs border border-default" role="alert">
     <svg class="w-5 h-5 text-fg-brand" 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="m12 18-7 3 7-18 7 18-7-3Zm0 0v-5"/></svg>
@@ -87,13 +73,13 @@ This component can be used to show simple messages and notifications without the
         <svg class="w-5 h-5" 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 >}}
+```
 
 ## Undo button
 
 Use this toast component to also show an "undo" button to reverse the action of the user.
 
-{{< example class="flex justify-center" github="components/toast.md" show_dark=true >}}
+```html
 
 <div id="toast-undo" class="flex items-center w-full max-w-xs p-4 text-body bg-neutral-primary-soft rounded-base shadow-xs border border-default" role="alert">
     <div class="text-sm font-normal">
@@ -108,13 +94,13 @@ Use this toast component to also show an "undo" button to reverse the action of
     </div>
 </div>
 
-{{< /example >}}
+```
 
 ## Toast message
 
 This component can be used to show messages and a CTA button when receiving chat messages, comment notifications, and other use cases.
 
-{{< example class="flex justify-center" github="components/toast.md" show_dark=true >}}
+```html
 
 <div id="toast-message-cta" class="relative flex items-center w-full max-w-xs p-4 text-body bg-neutral-primary-soft rounded-base shadow-xs border border-default" role="alert">
     <div class="flex">
@@ -133,13 +119,13 @@ This component can be used to show messages and a CTA button when receiving chat
         </button>
     </div>
 </div>
-{{< /example >}}
+```
 
 ## Push notification
 
 This component can be used to show notifications for an action from another user such as posting a comment, receiving a like, being tagged. You can show an avatar, icon, message, and the time of the notification.
 
-{{< example class="flex justify-center" github="components/toast.md" show_dark=true >}}
+```html
 
 <div id="toast-notification" class="w-full space-y-4 max-w-xs p-3 text-body bg-neutral-primary-soft rounded-base shadow-xs border border-default" role="alert">
     <div class="flex items-center bg-neutral-tertiary py-2 px-2.5 rounded">
@@ -164,13 +150,13 @@ This component can be used to show notifications for an action from another user
     </div>
 </div>
 
-{{< /example >}}
+```
 
 ## Interactive toast
 
 Use this interactive toast component to encourage users to make a certain action such as updating to the latest software version. You can set an icon, message, and two CTA buttons.
 
-{{< example class="flex justify-center" github="components/toast.md" show_dark=true >}}
+```html
 
 <div id="toast-interactive" class="w-full space-y-4 max-w-xs p-3 text-body bg-neutral-primary-soft rounded-base shadow-xs border border-default" role="alert">
     <div class="flex">
@@ -192,13 +178,13 @@ Use this interactive toast component to encourage users to make a certain action
     </div>
 </div>
 
-{{< /example >}}
+```
 
 ## Toast illustration
 
 This example can be used to show a notification as a toast component with an illustration.
 
-{{< example class="flex justify-center" github="components/toast.md" show_dark=true >}}
+```html
 
 <div id="toast-illustration" class="w-full space-y-4 max-w-sm p-3 text-body bg-neutral-primary-soft rounded-base shadow-xs border border-default" role="alert">
     <div class="flex items-start">
@@ -218,13 +204,13 @@ This example can be used to show a notification as a toast component with an ill
     </div>
 </div>
 
-{{< /example >}}
+```
 
 ## Toast progress bar
 
 Use this example to show a toast component that is dismissble with a progress bar.
 
-{{< example class="flex justify-center" github="components/toast.md" show_dark=true >}}
+```html
 
 <div id="toast-interactive" class="w-full space-y-4 max-w-xs p-4 text-body bg-neutral-primary-soft rounded-base shadow-xs border border-default" role="alert">
     <div class="inline-flex items-center justify-center shrink-0 w-9 h-9 text-fg-brand bg-brand-softer rounded">
@@ -249,13 +235,13 @@ Use this example to show a toast component that is dismissble with a progress ba
     </div>
 </div>
 
-{{< /example >}}
+```
 
 ## Toast danger alert
 
 Use this example to show an alert to your users inside a toast component with a description.
 
-{{< example class="flex justify-center" github="components/toast.md" show_dark=true >}}
+```html
 
 <div id="toast-danger" class="w-full max-w-xs p-4 mb-4 text-sm text-fg-danger-strong rounded-base bg-danger-soft border border-danger-subtle" role="alert">
     <h3 class="font-semibold">Whoops! Something went wrong</h3>
@@ -273,13 +259,13 @@ Use this example to show an alert to your users inside a toast component with a
     </div>
 </div>
 
-{{< /example >}}
+```
 
 ## Toast warning alert
 
 This example can be used to warn users before they perform a certain action inside a toast component.
 
-{{< example class="flex justify-center" github="components/toast.md" show_dark=true >}}
+```html
 
 <div id="toast-warning" class="w-full max-w-md p-4 mb-4 text-sm text-fg-warning rounded-base bg-warning-soft border border-warning-subtle" role="alert">
   <div class="flex items-center justify-between">
@@ -307,7 +293,7 @@ This example can be used to warn users before they perform a certain action insi
     </div>
 </div>
 
-{{< /example >}}
+```
 
 ## Positioning
 
@@ -318,7 +304,7 @@ Use the `fixed` class from Tailwind CSS to position these toast components relat
 -   Bottom left: `fixed bottom-5 left-5`
 -   Bottom right: `fixed bottom-5 right-5`
 
-{{< example github="components/toast.md" class="relative h-56" show_dark=true >}}
+```html
 
 <div id="toast-top-left" class="fixed flex items-center w-full max-w-xs p-4 text-body bg-neutral-primary-soft rounded-base shadow-xs border border-default top-5 start-5" role="alert">
     <div class="text-sm font-normal">Top left positioning.</div>
@@ -332,10 +318,10 @@ Use the `fixed` class from Tailwind CSS to position these toast components relat
 <div id="toast-bottom-left" class="fixed flex items-center w-full max-w-xs p-4 text-body bg-neutral-primary-soft rounded-base shadow-xs border border-default bottom-5 start-5" role="alert">
     <div class="text-sm font-normal">Bottom left positioning.</div>
 </div>
-{{< /example >}}
+```
 
 You can set your own distance for the `top-*|right-*|bottom-*|left-*` positioning classes.
 
 ## JavaScript behaviour
 
-Please check out the <a href="{{< ref "components/alerts" >}}#javascript-behaviour">Dismiss object</a> documentation to learn how to programmatically work with the toast component directly from JavaScript.
+Please check out the Dismiss object documentation to learn how to programmatically work with the toast component directly from JavaScript.