BREAKING CHANGE: add dependencies apexcharts

docs: update quickstart and introduction page

Author: shinokada

package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.43.3",
+  "version": "0.44.0",
   "description": "Flowbite components for Svelte",
   "main": "dist/index.js",
   "author": {
@@ -37,7 +37,6 @@
     "@sveltejs/package": "2.1.0",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
-    "apexcharts": "^3.41.1",
     "autoprefixer": "^10.4.15",
     "createprops": "^0.5.5",
     "esbuild": "0.18.10",
@@ -113,6 +112,7 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.5.1",
+    "apexcharts": "^3.41.1",
     "flowbite": "^1.8.1",
     "tailwind-merge": "^1.14.0"
   },

pnpm-lock.yaml

@@ -18,4 +18,4 @@
   });
 </script>
 
-<div bind:this={chartNode} class="{$$props.class}"/>
+<div bind:this={chartNode} class={$$props.class} />

src/lib/charts/Chart.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
-  import { twMerge } from "tailwind-merge";
+  import { twMerge } from 'tailwind-merge';
 
   export let divClass: string = 'max-w-sm w-full bg-white rounded-lg shadow dark:bg-gray-800 p-4 md:p-6';
-  let divCls: string = twMerge(divClass, $$props.class)
+  let divCls: string = twMerge(divClass, $$props.class);
 </script>
 
-<div class="{divCls}">
+<div class={divCls}>
   {#if $$slots.header}
     <slot name="header" />
   {/if}
   <slot />
   {#if $$slots.footer}
     <slot name="footer" />
   {/if}
-</div>
+</div>

src/lib/charts/ChartWrapper.svelte

@@ -40,7 +40,7 @@ export { default as CarouselTransition } from './carousels/CarouselTransition.sv
 
 // Charts
 export { default as ChartWrapper } from './charts/ChartWrapper.svelte';
-export { default as Chart } from './charts/Chart.svelte'
+export { default as Chart } from './charts/Chart.svelte';
 
 // Dark mode
 export { default as DarkMode } from './darkmode/DarkMode.svelte';