Charts page update (#999)

* docs: add charts page props

* feat: export backdropClass and dialogClass in Modal component

* fix: #997 dropdown with toggle switch

* fix: shorten component docs

Author: shinokada

src/lib/accordion/Accordion.svelte

@@ -51,38 +51,12 @@
 
 <!--
   @component
-  ## Features
   [Accordion](https://flowbite-svelte.com/docs/components/accordion)
-  - Default accordion
-  - Always open
-  - Color option
-  - Flush accordion
-  - Arrow style
-  - Icon Accordion
-  - Multiple mode
-  - Custom transitions
   ## Props
   @prop multiple: boolean = false;
   @prop flush: boolean = false;
   @prop activeClasses: string = 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800';
   @prop inactiveClasses: string = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 hover:dark:bg-gray-800';
   @prop defaultClass: string = 'text-gray-500 dark:text-gray-400';
-  ## Example
-  ```
-  <script>
-    import { AccordionItem, Accordion } from 'flowbite-svelte'
-  </script>
-
-  <Accordion>
-    <AccordionItem>
-      <span slot="header">My Header 1</span>
-      <p class="mb-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab necessitatibus sint explicabo ...</p>
-    </AccordionItem>
-    <AccordionItem>
-      <span slot="header">My Header 2</span>
-      <p class="mb-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab necessitatibus sint explicabo ...</p>\
-    </AccordionItem>
-  </Accordion>
-  ```
 
 -->

src/lib/accordion/AccordionItem.svelte

@@ -99,15 +99,7 @@
 
 <!--
   @component
-  ## Features
   [Go to Accordion page](https://flowbite-svelte.com/docs/components/accordion)
-  - Default bottom navigation
-  - Menu items with border
-  - Application bar example
-  - Example with pagination
-  - Button group bottom bar
-  - Card with bottom bar
-
   ## Props
   @prop open: boolean = false;
   @prop activeClass: string | undefined = undefined;

src/lib/alerts/Alert.svelte

@@ -54,16 +54,7 @@
 
 <!--
   @component
-  ## Features
   [Go to Alert](https://flowbite-svelte.com/docs/components/alert)
-  - Default alert
-  - Alerts with icon
-  - Bordered alerts
-  - Alerts with list
-  - Dismissable alerts
-  - Border accent
-  - Additional content
-  - Custom color
   ## Props
   @prop dismissable: boolean = false;
   @prop accent: boolean = false;
@@ -77,17 +68,4 @@
   - on:mouseenter
   - on:mouseleave 
 
-  ## Example
-  ```
-  <script>
-  import {Alert} from "flowbite-svelte";
-  </script>
-
-  <Alert>
-    <span class="font-medium">Info alert!</span> Change a few things up and try submitting again.
-  </Alert>
-  <Alert color="red">
-    <span class="font-medium">Danger alert!</span> Change a few things up and try submitting again.
-  </Alert>
-  ```
 -->

src/lib/avatar/Avatar.svelte

@@ -43,17 +43,7 @@
 
 <!--
   @component
-  ## Features
   [Go to Avatar](https://flowbite-svelte.com/docs/components/avatar)
-  - Bordered
-  - Placeholder
-  - Placeholder initials
-  - Avatar tooltip
-  - Dot indicator
-  - Stacked
-  - Avatar text
-  - User dropdown
-  - Sizes
   ## Props
   @prop src: string = '';
   @prop href: string | undefined = undefined;
@@ -63,15 +53,5 @@
   @prop dot: object | undefined = undefined;
   @prop alt: string = '';
   @prop size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';
-  ## Example
-  ```
-  <script>
-    import { Avatar } from "flowbite-svelte"
-  </script>
-
-  <div class="flex space-x-4">
-    <Avatar src="/images/profile-picture-2.webp"/>
-    <Avatar src="/images/profile-picture-2.webp" rounded/>
-  </div>
-  ```
+  
 -->

src/lib/avatar/Placeholder.svelte

@@ -10,7 +10,7 @@
 
 <!--
   @component
-  ## Features
   [Go to Avatar](https://flowbite-svelte.com/docs/components/avatar)
+  ## Props
   @prop rounded: boolean = false;
 -->

src/lib/badges/Badge.svelte

@@ -101,18 +101,7 @@
 
 <!--
   @component
-  ## Features
   [Go to Badge](https://flowbite-svelte.com/docs/components/badge)
-  - Default badge
-  - Large badges
-  - Bordered badge
-  - Pills badge
-  - Badges as links
-  - Badges with icon
-  - Notification badge
-  - Button with badge
-  - Badge with icon only
-  - Dismissable badges
   ## Props
   @prop color: 'blue' | 'dark' | 'red' | 'green' | 'yellow' | 'indigo' | 'purple' | 'pink' | 'none' = 'blue';
   @prop large: boolean = false;
@@ -121,13 +110,5 @@
   @prop rounded: boolean = false;
   @prop index: boolean = false;
   @prop dismissable: boolean = false;
-  ## Example
-  ```
-  <script>
-    import { Badge } from 'flowbite-svelte';
-  </script>
   
-  <Badge>Default</Badge>
-  <Badge color="dark">Dark</Badge>
-  ```
 -->

src/lib/banner/Banner.svelte

@@ -49,14 +49,7 @@
 
 <!--
   @component
-  ## Features
   [Go to Banner](https://flowbite-svelte.com/docs/components/banner)
-  - Setup
-  - Default sticky banner
-  - Bottom banner position
-  - Marketing CTA banner
-  - Newsletter sign-up banner
-  - Informational banner
   ## Props
   @prop id: string = 'sticky-banner';
   @prop position: 'static' | 'fixed' | 'absolute' | 'relative' | 'sticky' = 'sticky';
@@ -73,22 +66,5 @@
   - on:blur
   - on:mouseenter
   - on:mouseleave
-  ## Example
-  ```
-  <script>
-    import { Banner } from "flowbite-svelte"
-  </script>
-
-  <Banner id="default-banner" position="absolute">
-    <p class="flex items-center text-sm font-normal text-gray-500 dark:text-gray-400">
-      <span class="inline-flex p-1 mr-3 bg-gray-200 rounded-full dark:bg-gray-600">
-          <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-              <path d="M11 3a1 1 0 10-2 0v1a1 1 0 102 0V3zM15.657 5.757a1 1 0 00-1.414-1.414l-.707.707a1 1 0 001.414 1.414l.707-.707zM18 10a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM5.05 6.464A1 1 0 106.464 5.05l-.707-.707a1 1 0 00-1.414 1.414l.707.707zM5 10a1 1 0 01-1 1H3a1 1 0 110-2h1a1 1 0 011 1zM8 16v-1h4v1a2 2 0 11-4 0zM12 14c.015-.34.208-.646.477-.859a4 4 0 10-4.954 0c.27.213.462.519.476.859h4.002z"></path>
-          </svg>
-          <span class="sr-only">Light bulb</span>
-      </span>
-      <span>New brand identity has been launched for the <a href="https://flowbite.com" class="inline font-medium text-blue-600 underline dark:text-blue-500 underline-offset-2 decoration-600 dark:decoration-500 decoration-solid hover:no-underline">Flowbite Library</a></span>
-    </p>
-  </Banner>
-  ```
+  
 -->

src/lib/bottom-nav/BottomNav.svelte

@@ -64,49 +64,13 @@
 
 <!--
   @component
-  ## Features
   [Go to Bottom Navigation](https://flowbite-svelte.com/docs/components/bottom-navigation)
-  - Default bottom navigation
-  - Menu items with border
-  - Application bar example
-  - Example with pagination
-  - Button group bottom bar
-  - Card with bottom bar
   ## Props
   @prop position: 'static' | 'fixed' | 'absolute' | 'relative' | 'sticky' = 'fixed';
   @prop navType:| 'default' | 'border' | 'application' | 'pagination' | 'group' | 'card' | 'meeting' | 'video' | 'custom' = 'default';
   @prop outerClass: string = 'w-full z-50 border-gray-200 dark:bg-gray-700 dark:border-gray-600';
   @prop innerClass: string = 'grid h-full max-w-lg mx-auto';
   @prop outerCustom: string = '';
   @prop innerCustom: string = '';
-  ## Example
-  ```
-  <script>
-    import { BottomNav, BottomNavItem } from "flowbite-svelte"
-  </script>
-
-  <BottomNav position="absolute" innerDiv="grid-cols-4">
-    <BottomNavItem btnName="Home">
-      <svg class="w-6 h-6 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-        <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path>
-      </svg>
-    </BottomNavItem>
-    <BottomNavItem btnName="Wallet">
-        <svg class="w-6 h-6 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-          <path d="M4 4a2 2 0 00-2 2v1h16V6a2 2 0 00-2-2H4z"></path>
-          <path clip-rule="evenodd" fill-rule="evenodd" d="M18 9H2v5a2 2 0 002 2h12a2 2 0 002-2V9zM4 13a1 1 0 011-1h1a1 1 0 110 2H5a1 1 0 01-1-1zm5-1a1 1 0 100 2h1a1 1 0 100-2H9z"></path>
-        </svg>
-    </BottomNavItem>
-    <BottomNavItem btnName="Settings">
-        <svg class="w-6 h-6 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-          <path d="M5 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4zM11 4a1 1 0 10-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4zM16 3a1 1 0 011 1v7.268a2 2 0 010 3.464V16a1 1 0 11-2 0v-1.268a2 2 0 010-3.464V4a1 1 0 011-1z"></path>
-        </svg>
-    </BottomNavItem>
-    <BottomNavItem btnName="Profile">
-        <svg class="w-6 h-6 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-          <path clip-rule="evenodd" fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z"></path>
-        </svg>
-    </BottomNavItem>
-  </BottomNav>
-  ```
+  
 -->

src/lib/bottom-nav/BottomNavHeader.svelte

@@ -12,20 +12,9 @@
 
 <!--
   @component
-  ## Features
   [Go to Bottom Navigation](https://flowbite-svelte.com/docs/components/bottom-navigation)
   ## Props
   @prop outerClass: string = 'w-full';
   @prop innerClass: string = 'grid max-w-xs grid-cols-3 gap-1 p-1 mx-auto my-2 bg-gray-100 rounded-lg dark:bg-gray-600';
-  ## Example
-  ```
-  <BottomNav position="absolute" navType="group" innerDiv="grid-cols-5">
-    <BottomNavHeader slot="header">
-        <BottomNavHeaderItem itemName="New" />
-        <BottomNavHeaderItem itemName="Popular" active={true}/>
-        <BottomNavHeaderItem itemName="Following" />
-    </BottomNavHeader>
-    ...
-  </BottomNav> 
-  ```
+  
 -->

src/lib/bottom-nav/BottomNavHeaderItem.svelte

@@ -14,7 +14,6 @@
 
 <!--
   @component
-  ## Features
   [Go to Bottom Navigation](https://flowbite-svelte.com/docs/components/bottom-navigation)
   ## Props
   @prop itemName: string = '';