flowbite-svelte 0.47.2 → 1.0.0-next.1

package/{LICENSE → License}

@@ -18,5 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
-
+SOFTWARE.

package/README.md

@@ -1,473 +1,40 @@
-# FLOWBITE-SVELTE
+# Flowbite Svelte
 
-[![npm version](https://badgen.net/npm/v/flowbite-svelte)](https://www.npmjs.com/package/flowbite-svelte) [![npm downloads](https://badgen.net/npm/dw/flowbite-svelte)](https://www.npmjs.com/package/flowbite-svelte) [![npm downloads](https://badgen.net/npm/dt/flowbite-svelte)](https://www.npmjs.com/package/flowbite-svelte) [![license](https://badgen.net/npm/license/flowbite-svelte)](https://github.com/themesberg/flowbite-svelte/blob/main/LICENSE) [![Discord](https://img.shields.io/discord/902911619032576090?color=%237289da&label=Discord)](https://discord.com/invite/4eeurUVvTy)
+Flowbite Svelte is a UI library built from scratch to leverage Svelte 5's runes system, creating smooth, reactive components.
 
-**⚠️ Flowbite Svelte is currently in early development and APIs and packages are likely to change quite often.**
-
-<p>
-    <a href="https://flowbite-svelte.com" >
-      <img alt="Flowbite Svelte UI components" width="350" src="https://raw.githubusercontent.com/themesberg/flowbite-svelte/main/static/images/flowbite-svelte.png">
-    </a><br>
-    Build websites even faster with Svelte components on top of Tailwind CSS
-</p>
-
-[Flowbite Svelte](https://flowbite-svelte.com/) is an official Flowbite UI component library for Svelte. All interactivities are handled by Svelte.
-
-[Visualize this repo's codebase](https://mango-dune-07a8b7110.1.azurestaticapps.net/?repo=themesberg%2Fflowbite-svelte)
+- [Docs](https://preview.flowbite-svelte.com/)
 
 ## Installation
 
-- [Getting started](https://flowbite-svelte.com/docs/pages/quickstart)
-- [Introduction](https://flowbite-svelte.com/docs/pages/introduction)
-- [Types](https://flowbite-svelte.com/docs/pages/typescript)
-- [How to contribute](https://flowbite-svelte.com/docs/pages/how-to-contribute)
-- [License](https://flowbite-svelte.com/docs/pages/license)
-
-## Documentation
-
-For full documentation, visit [flowbite-svelte.com](https://flowbite-svelte.com/).
-
-## Components
-
-<table>
-  <tr>
-    <td width="33.3333%">Alert</td>
-    <td width="33.3333%">Badge</td>
-    <td width="33.3333%">Breadcrumb</td>
-  </tr>
-  <tr>
-    <td width="33.3333%">
-        <a href="https://flowbite-svelte.com/docs/components/alert">
-            <img alt="Svelte Alerts" src="https://flowbite.s3.amazonaws.com/github/svelte/alerts.jpg">
-        </a>
-    </td>
-    <td width="33.3333%">
-        <a href="https://flowbite-svelte.com/docs/components/badge">
-            <img alt="Svelte Badge" src="https://flowbite.s3.amazonaws.com/github/svelte/badge.jpg">
-        </a>
-    </td>
-    <td width="33.3333%">
-        <a href="https://flowbite-svelte.com/docs/components/breadcrumb">
-            <img alt="Svelte Breadcrumbs" src="https://flowbite.s3.amazonaws.com/github/svelte/breadcrumbs.jpg">
-        </a>
-    </td>
-  </tr>
-  <tr>
-    <td width="33.3333%">Button</td>
-    <td width="33.3333%">Button group</td>
-    <td width="33.3333%">Card</td>
-  </tr>
-  <tr>
-    <td width="33.3333%">
-        <a href="https://flowbite-svelte.com/docs/components/buttons">
-            <img alt="Svelte Buttons" src="https://flowbite.s3.amazonaws.com/github/svelte/buttons.jpg">
-        </a>
-    </td>
-    <td width="33.3333%">
-        <a href="https://flowbite-svelte.com/docs/components/button-group">
-            <img alt="Svelte Button Group" src="https://flowbite.s3.amazonaws.com/github/svelte/button-group.jpg">
-        </a>
-    </td>
-    <td width="33.3333%">
-        <a href="https://flowbite-svelte.com/docs/components/card">
-            <img alt="Svelte Cards" src="https://flowbite.s3.amazonaws.com/github/svelte/cards.jpg">
-        </a>
-    </td>
-  </tr>
-  <tr>
-    <td width="33.3333%">Dropdown</td>
-    <td width="33.3333%">Forms</td>
-    <td width="33.3333%">List group</td>
-  </tr>
-  <tr>
-    <td width="33.3333%">
-        <a href="https://flowbite-svelte.com/docs/components/dropdown">
-            <img alt="Svelte Dropdown" src="https://flowbite.s3.amazonaws.com/github/svelte/dropdown.jpg">
-        </a>
-    </td>
-    <td width="33.3333%">
-        <a href="https://flowbite-svelte.com/docs/components/forms">
-            <img alt="Svelte Forms" src="https://flowbite.s3.amazonaws.com/github/svelte/forms.jpg">
-        </a>
-    </td>
-    <td width="33.3333%">
-        <a href="https://flowbite-svelte.com/docs/components/list-group">
-            <img alt="Svelte List group" src="https://flowbite.s3.amazonaws.com/github/svelte/list-group.jpg">
-        </a>
-    </td>
-  </tr>
-  <tr>
-    <td width="33.3333%">Typography</td>
-    <td width="33.3333%">Modal</td>
-    <td width="33.3333%">Tabs</td>
-  </tr>
-  <tr>
-    <td width="33.3333%">
-        <a href="https://flowbite-svelte.com/docs/components/typography">
-            <img alt="Svelte Typography" src="https://flowbite.s3.amazonaws.com/github/svelte/typography.jpg">
-        </a>
-    </td>
-    <td width="33.3333%">
-        <a href="https://flowbite-svelte.com/docs/components/modal">
-            <img alt="Svelte Modal" src="https://flowbite.s3.amazonaws.com/github/svelte/modal.jpg">
-        </a>
-    </td>
-    <td width="33.3333%">
-        <a href="https://flowbite-svelte.com/docs/components/tabs">
-            <img alt="Svelte Tabs" src="https://flowbite.s3.amazonaws.com/github/svelte/tabs.jpg">
-        </a>
-    </td>
-  </tr>
-  <tr>
-    <td width="33.3333%">Navbar</td>
-    <td width="33.3333%">Pagination</td>
-    <td width="33.3333%">Timeline</td>
-  </tr>
-  <tr>
-    <td width="33.3333%">
-        <a href="https://flowbite-svelte.com/docs/components/navbar">
-            <img alt="Svelte Navbar" src="https://flowbite.s3.amazonaws.com/github/svelte/navbar.jpg">
-        </a>
-    </td>
-    <td width="33.3333%">
-        <a href="https://flowbite-svelte.com/docs/components/pagination">
-            <img alt="Svelte Pagination" src="https://flowbite.s3.amazonaws.com/github/svelte/pagination.jpg">
-        </a>
-    </td>
-    <td width="33.3333%">
-        <a href="https://flowbite-svelte.com/docs/components/timeline">
-            <img alt="Svelte Timeline" src="https://flowbite.s3.amazonaws.com/github/svelte/timeline.jpg">
-        </a>
-    </td>
-  </tr>
-  <tr>
-    <td width="33.3333%">Progress bar</td>
-    <td width="33.3333%">Table</td>
-    <td width="33.3333%">Toast</td>
-  </tr>
-  <tr>
-    <td width="33.3333%">
-        <a href="https://flowbite-svelte.com/docs/components/progress">
-            <img alt="Svelte Progress Bar" src="https://flowbite.s3.amazonaws.com/github/svelte/progress.jpg">
-        </a>
-    </td>
-    <td width="33.3333%">
-        <a href="https://flowbite-svelte.com/docs/components/table">
-            <img alt="Svelte Tables" src="https://flowbite.s3.amazonaws.com/github/svelte/table.jpg">
-        </a>
-    </td>
-    <td width="33.3333%">
-        <a href="https://flowbite-svelte.com/docs/components/toast">
-            <img alt="Svelte Toast" src="https://flowbite.s3.amazonaws.com/github/svelte/toast.jpg">
-        </a>
-    </td>
-  </tr>
-  <tr>
-    <td width="33.3333%">Tooltip</td>
-    <td width="33.3333%">Datepicker</td>
-    <td width="33.3333%">Spinner</td>
-  </tr>
-  <tr>
-    <td width="33.3333%">
-        <a href="https://flowbite-svelte.com/docs/components/tooltip">
-            <img alt="Svelte Tooltips" src="https://flowbite.s3.amazonaws.com/github/svelte/tooltips.jpg">
-        </a>
-    </td>
-    <td width="33.3333%">
-        <a href="https://flowbite-svelte.com/docs/components/datepicker">
-            <img alt="Svelte Datepicker" src="https://flowbite.s3.amazonaws.com/github/svelte/datepicker.jpg">
-        </a>
-    </td>
-    <td width="33.3333%">
-        <a href="https://flowbite-svelte.com/docs/components/spinner">
-            <img alt="Svelte Spinner" src="https://flowbite.s3.amazonaws.com/github/svelte/spinner.jpg">
-        </a>
-    </td>
-  </tr>
-  <tr>
-    <td width="33.3333%">Footer</td>
-    <td width="33.3333%">Accordion</td>
-    <td width="33.3333%">Sidebar</td>
-  </tr>
-  <tr>
-    <td width="33.3333%">
-        <a href="https://flowbite-svelte.com/docs/components/footer">
-            <img alt="Svelte Footer" src="https://flowbite.s3.amazonaws.com/github/svelte/footer.jpg">
-        </a>
-    </td>
-    <td width="33.3333%">
-        <a href="https://flowbite-svelte.com/docs/components/accordion">
-            <img alt="Svelte Accordion" src="https://flowbite.s3.amazonaws.com/github/svelte/accordion.jpg">
-        </a>
-    </td>
-    <td width="33.3333%">
-        <a href="https://flowbite-svelte.com/docs/components/sidebar">
-            <img alt="Svelte Sidebar" src="https://flowbite.s3.amazonaws.com/github/svelte/sidebar.jpg">
-        </a>
-    </td>
-  </tr>
-  <tr>
-    <td width="33.3333%">Carousel</td>
-    <td width="33.3333%">Avatar</td>
-    <td width="33.3333%">Rating</td>
-  </tr>
-  <tr>
-    <td width="33.3333%">
-        <a href="https://flowbite-svelte.com/docs/components/carousel">
-            <img alt="Svelte Carousel" src="https://flowbite.s3.amazonaws.com/github/svelte/carousel.jpg">
-        </a>
-    </td>
-    <td width="33.3333%">
-        <a href="https://flowbite-svelte.com/docs/components/avatar">
-            <img alt="Svelte Avatar" src="https://flowbite.s3.amazonaws.com/github/svelte/avatar.jpg">
-        </a>
-    </td>
-    <td width="33.3333%">
-        <a href="https://flowbite-svelte.com/docs/components/rating">
-            <img alt="Svelte Rating" src="https://flowbite.s3.amazonaws.com/github/svelte/rating.jpg">
-        </a>
-    </td>
-  </tr>
-  <tr>
-    <td width="33.3333%">Input Field</td>
-    <td width="33.3333%">File Input</td>
-    <td width="33.3333%">Search Input</td>
-  </tr>
-  <tr>
-    <td width="33.3333%">
-        <a href="https://flowbite-svelte.com/docs/forms/input-field">
-            <img alt="Svelte Input Field" src="https://flowbite.s3.amazonaws.com/github/svelte/input-field.jpg">
-        </a>
-    </td>
-    <td width="33.3333%">
-        <a href="https://flowbite-svelte.com/docs/forms/file-input">
-            <img alt="Svelte File Input" src="https://flowbite.s3.amazonaws.com/github/svelte/file-input.jpg">
-        </a>
-    </td>
-    <td width="33.3333%">
-        <a href="https://flowbite-svelte.com/docs/forms/search-input">
-            <img alt="Svelte Search Input" src="https://flowbite.s3.amazonaws.com/github/svelte/search-input.jpg">
-        </a>
-    </td>
-  </tr>
-  <tr>
-    <td width="33.3333%">Select</td>
-    <td width="33.3333%">Textarea</td>
-    <td width="33.3333%">Checkbox</td>
-  </tr>
-  <tr>
-    <td width="33.3333%">
-        <a href="https://flowbite-svelte.com/docs/forms/select">
-            <img alt="Svelte Select" src="https://flowbite.s3.amazonaws.com/github/svelte/select.jpg">
-        </a>
-    </td>
-    <td width="33.3333%">
-        <a href="https://flowbite-svelte.com/docs/forms/textarea">
-            <img alt="Svelte Textarea" src="https://flowbite.s3.amazonaws.com/github/svelte/textarea.jpg">
-        </a>
-    </td>
-    <td width="33.3333%">
-        <a href="https://flowbite-svelte.com/docs/forms/checkbox">
-            <img alt="Svelte Checkbox" src="https://flowbite.s3.amazonaws.com/github/svelte/checkbox.jpg">
-        </a>
-    </td>
-  </tr>
-  <tr>
-    <td width="33.3333%">Radio</td>
-    <td width="33.3333%">Toggle</td>
-    <td width="33.3333%">Range Slider</td>
-  </tr>
-  <tr>
-    <td width="33.3333%">
-        <a href="https://flowbite-svelte.com/docs/forms/radio">
-            <img alt="Svelte Radio" src="https://flowbite.s3.amazonaws.com/github/svelte/radio.jpg">
-        </a>
-    </td>
-    <td width="33.3333%">
-        <a href="https://flowbite-svelte.com/docs/forms/toggle">
-            <img alt="Svelte Toggle" src="https://flowbite.s3.amazonaws.com/github/svelte/toggle.jpg">
-        </a>
-    </td>
-    <td width="33.3333%">
-        <a href="https://flowbite-svelte.com/docs/forms/range">
-            <img alt="Svelte Range Slider" src="https://flowbite.s3.amazonaws.com/github/svelte/range-slider.jpg">
-        </a>
-    </td>
-  </tr>
-  <tr>
-    <td width="33.3333%">Floating Label</td>
-    <td width="33.3333%">Mega Menu</td>
-    <td width="33.3333%">Skeleton</td>
-  </tr>
-  <tr>
-    <td width="33.3333%">
-        <a href="https://flowbite-svelte.com/docs/forms/floating-label">
-            <img alt="Svelte Floating Label" src="https://flowbite.s3.amazonaws.com/github/svelte/floating-label.jpg">
-        </a>
-    </td>
-    <td width="33.3333%">
-        <a href="https://flowbite-svelte.com/docs/components/mega-menu">
-            <img alt="Svelte Mega Menu" src="https://flowbite.s3.amazonaws.com/github/svelte/mega-menu.jpg">
-        </a>
-    </td>
-    <td width="33.3333%">
-        <a href="https://flowbite-svelte.com/docs/components/skeleton">
-            <img alt="Svelte Skeleton" src="https://flowbite.s3.amazonaws.com/github/svelte/skeleton.jpg">
-        </a>
-    </td>
-  </tr>
-  <tr>
-    <td width="33.3333%">KBD (keyboard)</td>
-    <td width="33.3333%">Drawer (offcanvas)</td>
-    <td width="33.3333%">Popover</td>
-  </tr>
-  <tr>
-    <td width="33.3333%">
-        <a href="https://flowbite-svelte.com/docs/components/kbd">
-            <img alt="Svelte KBD (Keyboard)" src="https://flowbite.s3.amazonaws.com/github/svelte/kbd.jpg">
-        </a>
-    </td>
-    <td width="33.3333%">
-        <a href="https://flowbite-svelte.com/docs/components/drawer">
-            <img alt="Svelte Drawer (offcanvas)" src="https://flowbite.s3.amazonaws.com/github/svelte/drawer.jpg">
-        </a>
-    </td>
-    <td width="33.3333%">
-        <a href="https://flowbite-svelte.com/docs/components/popover">
-            <img alt="Svelte Popover" src="https://flowbite.s3.amazonaws.com/github/svelte/popover.jpg">
-        </a>
-    </td>
-  </tr>
-  <tr>
-    <td width="33.3333%">Video</td>
-    <td width="33.3333%">Heading</td>
-    <td width="33.3333%">Paragraph</td>
-  </tr>
-  <tr>
-    <td width="33.3333%">
-        <a href="https://flowbite-svelte.com/docs/components/video">
-            <img alt="Svelte Video" src="https://flowbite.s3.amazonaws.com/github/svelte/video.jpg">
-        </a>
-    </td>
-    <td width="33.3333%">
-        <a href="https://flowbite-svelte.com/typography/heading">
-            <img alt="Svelte Heading" src="https://flowbite.s3.amazonaws.com/github/svelte/heading.jpg">
-        </a>
-    </td>
-    <td width="33.3333%">
-        <a href="https://flowbite-svelte.com/typography/paragraph">
-            <img alt="Svelte Paragraph" src="https://flowbite.s3.amazonaws.com/github/svelte/paragraph.jpg">
-        </a>
-    </td>
-  </tr>
-  <tr>
-    <td width="33.3333%">Blockquote</td>
-    <td width="33.3333%">Image</td>
-    <td width="33.3333%">List</td>
-  </tr>
-  <tr>
-    <td width="33.3333%">
-        <a href="https://flowbite-svelte.com/typography/blockquote">
-            <img alt="Svelte Blockquote" src="https://flowbite.s3.amazonaws.com/github/svelte/blockquote.jpg">
-        </a>
-    </td>
-    <td width="33.3333%">
-        <a href="https://flowbite-svelte.com/typography/image">
-            <img alt="Svelte Image" src="https://flowbite.s3.amazonaws.com/github/svelte/image.jpg">
-        </a>
-    </td>
-    <td width="33.3333%">
-        <a href="https://flowbite-svelte.com/typography/list">
-            <img alt="Svelte List" src="https://flowbite.s3.amazonaws.com/github/svelte/list.jpg">
-        </a>
-    </td>
-  </tr>
-  <tr>
-    <td width="33.3333%">Link</td>
-    <td width="33.3333%">Text</td>
-    <td width="33.3333%">Horizontal line (HR)</td>
-  </tr>
-  <tr>
-    <td width="33.3333%">
-        <a href="https://flowbite-svelte.com/typography/link">
-            <img alt="Svelte Link" src="https://flowbite.s3.amazonaws.com/github/svelte/link.jpg">
-        </a>
-    </td>
-    <td width="33.3333%">
-        <a href="https://flowbite-svelte.com/typography/text">
-            <img alt="Svelte Text" src="https://flowbite.s3.amazonaws.com/github/svelte/text.jpg">
-        </a>
-    </td>
-    <td width="33.3333%">
-        <a href="https://flowbite-svelte.com/typography/hr">
-            <img alt="Svelte HR" src="https://flowbite.s3.amazonaws.com/github/svelte/hr.jpg">
-        </a>
-    </td>
-  </tr>
-  <tr>
-    <td width="33.3333%">Speed Dial</td>
-    <td width="33.3333%">Stepper(TBA)</td>
-    <td width="33.3333%">Indicators</td>
-  </tr>
-  <tr>
-    <td width="33.3333%">
-        <a href="https://flowbite-svelte.com/docs/components/speed-dial">
-            <img alt="Svelte Speed Dial" src="https://flowbite.s3.amazonaws.com/github/svelte/dial.jpg">
-        </a>
-    </td>
-    <td width="33.3333%">
-        <a href="https://flowbite-svelte.com">
-            <img alt="Svelte Stepper" src="https://flowbite.s3.amazonaws.com/github/svelte/stepper.jpg">
-        </a>
-    </td>
-    <td width="33.3333%">
-        <a href="https://flowbite-svelte.com/docs/components/indicators">
-            <img alt="Svelte Indicators" src="https://flowbite.s3.amazonaws.com/github/svelte/indicators.jpg">
-        </a>
-    </td>
-  </tr>
-  <tr>
-    <td width="33.3333%">Bottom Navigation</td>
-    <td width="33.3333%">Sticky Banner</td>
-    <td width="33.3333%">Gallery (Masonry)</td>
-  </tr>
-  <tr>
-    <td width="33.3333%">
-        <a href="https://flowbite-svelte.com/docs/components/bottom-navigation">
-            <img alt="Svelte Bottom Navigation Bar" src="https://flowbite.s3.amazonaws.com/github/svelte/bottom-bar.jpg">
-        </a>
-    </td>
-    <td width="33.3333%">
-        <a href="https://flowbite-svelte.com/docs/components/banner">
-            <img alt="Svelte Bottom Sticky Banner" src="https://flowbite.s3.amazonaws.com/github/svelte/banner.jpg">
-        </a>
-    </td>
-    <td width="33.3333%">
-        <a href="https://flowbite-svelte.com/docs/components/gallery">
-            <img alt="Svelte Image Gallery (Masonry)" src="https://flowbite.s3.amazonaws.com/github/svelte/gallery.jpg">
-        </a>
-    </td>
-  </tr>
-</table>
-
-## Community
-
-If you need help or just want to discuss about the library join the community on Github:
-
-⌨️ [Discuss about Flowbite on GitHub](https://github.com/themesberg/flowbite-svelte/discussions)
-
-For casual chatting with others using the library:
-
-💬 [Join the Flowbite Discord Server](https://discord.gg/4eeurUVvTy)
-
-## Contribute
-
-Please read [how to contribute](https://github.com/themesberg/flowbite-svelte/blob/main/CONTRIBUTING.md) if you'd like to be part of the Flowbite community of contributors.
-
-## Changelog
-
-View the full [changelog](https://github.com/themesberg/flowbite-svelte/blob/main/CHANGELOG.md) on this page.
+Install `svelte`, `tailwindcss`, and `flowbite-svelte`, update dependencies and install the latest:
+
+```sh
+npx sv create myapp // select to install tailwindcss
+cd myapp
+pnpm install
+pnpm run dev
+pnpm i -D flowbite-svelte@next
+```
+
+Add the following to tailwind.config.js:
+
+```js
+import type { Config } from 'tailwindcss';
+
+export default {
+  content: ['./src/**/*.{html,js,svelte,ts}', './node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}'],
+  darkMode: 'selector',
+  theme: {
+    extend: {
+      colors: {
+        primary: { 50: '#FFF5F2', 100: '#FFF1EE', 200: '#FFE4DE', 300: '#FFD5CC', 400: '#FFBCAD', 500: '#FE795D', 600: '#EF562F', 700: '#EB4F27', 800: '#CC4522', 900: '#A5371B' },
+        secondary: { "50": "#f0f9ff", "100": "#e0f2fe", "200": "#bae6fd", "300": "#7dd3fc", "400": "#38bdf8", "500": "#0ea5e9", "600": "#0284c7", "700": "#0369a1", "800": "#075985", "900": "#0c4a6e" },
+      }
+    }
+  },
+} as Config;
+```
 
 ## License
 
-Flowbite Svelte is open-source under the [MIT License](https://flowbite-svelte.com/docs/pages/license).
+MIT

package/dist/accordion/Accordion.svelte

@@ -1,40 +1,38 @@
-<script context="module">import { writable } from "svelte/store";
-</script>
+<script lang="ts">
+  import { setContext, getContext } from "svelte";
+  import { type AccordionProps as Props, accordion } from "./";
+
+  let { children, flush, activeClass, inactiveClass, isSingle = true, class: className, ...restProps }: Props = $props();
+
+  // Get merged theme from context
+  const context = getContext<Record<string, object>>("themeConfig");
+  // Use context theme if available, otherwise fallback to default
+  const accordionTheme = context?.accordion || accordion;
+
+  const ctx = {
+    flush,
+    activeClass,
+    inactiveClass,
+    isSingle
+  };
+
+  setContext("ctx", ctx);
 
-<script>import Frame from "../utils/Frame.svelte";
-import { twMerge } from "tailwind-merge";
-import { setContext } from "svelte";
-export let multiple = false;
-export let flush = false;
-export let activeClass = "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";
-export let inactiveClass = "text-gray-500 dark:text-gray-400 hover:bg-gray-100 hover:dark:bg-gray-800";
-export let defaultClass = "text-gray-500 dark:text-gray-400";
-export let classActive = "";
-export let classInactive = "";
-const ctx = {
-  flush,
-  activeClass: twMerge(activeClass, classActive),
-  inactiveClass: twMerge(inactiveClass, classInactive),
-  selected: multiple ? void 0 : writable()
-};
-setContext("ctx", ctx);
-let frameClass;
-$: frameClass = twMerge(defaultClass, $$props.class);
+  const base = $derived(accordionTheme({ flush, className }));
 </script>
 
-<Frame {...$$restProps} class={frameClass} color="none">
-  <slot />
-</Frame>
+<div {...restProps} class={base}>
+  {@render children()}
+</div>
 
 <!--
 @component
-[Go to docs](https://flowbite-svelte.com/)
+[Go to docs](https://preview.flowbite-svelte.com/)
 ## Props
-@prop export let multiple: $$Props['multiple'] = false;
-@prop export let flush: $$Props['flush'] = false;
-@prop export let activeClass: $$Props['activeClass'] = '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 export let inactiveClass: $$Props['inactiveClass'] = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 hover:dark:bg-gray-800';
-@prop export let defaultClass: $$Props['defaultClass'] = 'text-gray-500 dark:text-gray-400';
-@prop export let classActive: $$Props['classActive'] = '';
-@prop export let classInactive: $$Props['classInactive'] = '';
+@props: children: any;
+@props:flush: any;
+@props:activeClass: any;
+@props:inactiveClass: any;
+@props:isSingle: any = true;
+@props:class: string;
 -->

package/dist/accordion/Accordion.svelte.d.ts

@@ -1,58 +1,14 @@
-import { SvelteComponentTyped } from "svelte";
-import { type Writable } from 'svelte/store';
-export interface AccordionCtxType {
-    flush: boolean | undefined;
-    activeClass: string;
-    inactiveClass: string;
-    selected?: Writable<object>;
-    classActive?: string;
-    classInactive?: string;
-}
-declare const __propDef: {
-    props: import("svelte/elements").HTMLAnchorAttributes & {
-        tag?: string;
-        color?: import("../utils/Frame.svelte").FrameColor;
-        rounded?: boolean;
-        border?: boolean;
-        shadow?: boolean;
-        node?: HTMLElement | undefined;
-        use?: import("svelte/action").Action<HTMLElement, any>;
-        options?: object;
-        class?: string;
-        role?: string;
-        open?: boolean;
-        transition?: (node: HTMLElement, params: any) => import("svelte/transition").TransitionConfig;
-        params?: any;
-    } & {
-        multiple?: boolean;
-        flush?: boolean;
-        activeClass?: string;
-        inactiveClass?: string;
-        defaultClass?: string;
-        classActive?: string;
-        classInactive?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type AccordionProps = typeof __propDef.props;
-export type AccordionEvents = typeof __propDef.events;
-export type AccordionSlots = typeof __propDef.slots;
+import { type AccordionProps as Props } from "./";
 /**
- * [Go to docs](https://flowbite-svelte.com/)
+ * [Go to docs](https://preview.flowbite-svelte.com/)
  * ## Props
- * @prop export let multiple: $$Props['multiple'] = false;
- * @prop export let flush: $$Props['flush'] = false;
- * @prop export let activeClass: $$Props['activeClass'] = '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 export let inactiveClass: $$Props['inactiveClass'] = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 hover:dark:bg-gray-800';
- * @prop export let defaultClass: $$Props['defaultClass'] = 'text-gray-500 dark:text-gray-400';
- * @prop export let classActive: $$Props['classActive'] = '';
- * @prop export let classInactive: $$Props['classInactive'] = '';
+ * @props: children: any;
+ * @props:flush: any;
+ * @props:activeClass: any;
+ * @props:inactiveClass: any;
+ * @props:isSingle: any = true;
+ * @props:class: string;
  */
-export default class Accordion extends SvelteComponentTyped<AccordionProps, AccordionEvents, AccordionSlots> {
-}
-export {};
+declare const Accordion: import("svelte").Component<Props, {}, "">;
+type Accordion = ReturnType<typeof Accordion>;
+export default Accordion;