flowbite-svelte 0.47.2 → 1.0.0-next.1

package/dist/sidebar/Sidebar.svelte.d.ts

@@ -1,36 +1,25 @@
-import { SvelteComponentTyped } from "svelte";
-export type SidebarType = {
-    activeClass: string;
-    nonActiveClass: string;
-};
-import type { HTMLAttributes } from 'svelte/elements';
-declare const __propDef: {
-    props: HTMLAttributes<HTMLElement> & {
-        activeUrl?: string;
-        asideClass?: string;
-        nonActiveClass?: string;
-        activeClass?: string;
-        ariaLabel?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type SidebarProps = typeof __propDef.props;
-export type SidebarEvents = typeof __propDef.events;
-export type SidebarSlots = typeof __propDef.slots;
+import { type SidebarProps as Props } from ".";
 /**
- * [Go to docs](https://flowbite-svelte.com/)
+ * [Go to docs](https://preview.flowbite-svelte.com/)
  * ## Props
- * @prop export let activeUrl: NonNullable<$$Props['activeUrl']> = '';
- * @prop export let asideClass: $$Props['asideClass'] = 'w-64';
- * @prop export let nonActiveClass: NonNullable<$$Props['nonActiveClass']> = 'flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700';
- * @prop export let activeClass: NonNullable<$$Props['activeClass']> = 'flex items-center p-2 text-base font-normal text-gray-900 bg-gray-200 dark:bg-gray-700 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700';
- * @prop export let ariaLabel: $$Props['ariaLabel'] = 'Sidebar';
+ * @props: children: any;
+ * @props:isOpen: any = false;
+ * @props:closeSidebar: any;
+ * @props:isSingle: any = true;
+ * @props:breakpoint: any = "md";
+ * @props:position: any = "fixed";
+ * @props:activateClickOutside: any = true;
+ * @props:backdrop: any = true;
+ * @props:backdropClass: any;
+ * @props:transition: any = fly;
+ * @props:params: any;
+ * @props:divClass: any;
+ * @props:ariaLabel: any;
+ * @props:nonActiveClass: any;
+ * @props:activeClass: any;
+ * @props:activeUrl: any = "";
+ * @props:class: string;
  */
-export default class Sidebar extends SvelteComponentTyped<SidebarProps, SidebarEvents, SidebarSlots> {
-}
-export {};
+declare const Sidebar: import("svelte").Component<Props, {}, "">;
+type Sidebar = ReturnType<typeof Sidebar>;
+export default Sidebar;

package/dist/sidebar/SidebarBrand.svelte

@@ -1,21 +1,27 @@
-<script>import { twMerge } from "tailwind-merge";
-export let site;
-export let aClass = "flex items-center ps-2.5 mb-5";
-export let imgClass = "h-6 me-3 sm:h-7";
-export let spanClass = "self-center text-xl font-semibold whitespace-nowrap dark:text-white";
+<script lang="ts">
+  import { type SidebarBrandProps as Props, sitebarbrand } from ".";
+
+  let { children, site, imgClass, spanClass, class: className, ...restProps }: Props = $props();
+
+  const { base, img, span } = $derived(sitebarbrand());
 </script>
 
-<a {...$$restProps} href={site.href} class={twMerge(aClass, $$props.class)}>
-  <img src={site.img} class={imgClass} alt={site.name} />
-  <span class={spanClass}>{site.name}</span>
+<a {...restProps} href={site?.href ? site.href : "/"} class={base({ className })}>
+  {#if site}
+    <img src={site.img} class={img({ class: imgClass })} alt={site.name} />
+    <span class={span({ class: spanClass })}>{site.name}</span>
+  {:else if children}
+    {@render children()}
+  {/if}
 </a>
 
 <!--
 @component
-[Go to docs](https://flowbite-svelte.com/)
+[Go to docs](https://preview.flowbite-svelte.com/)
 ## Props
-@prop export let site: $$Props['site'];
-@prop export let aClass: $$Props['aClass'] = 'flex items-center ps-2.5 mb-5';
-@prop export let imgClass: $$Props['imgClass'] = 'h-6 me-3 sm:h-7';
-@prop export let spanClass: $$Props['spanClass'] = 'self-center text-xl font-semibold whitespace-nowrap dark:text-white';
+@props: children: any;
+@props:site: any;
+@props:imgClass: any;
+@props:spanClass: any;
+@props:class: string;
 -->

package/dist/sidebar/SidebarBrand.svelte.d.ts

@@ -1,29 +1,13 @@
-import { SvelteComponentTyped } from "svelte";
-import type { HTMLAnchorAttributes } from 'svelte/elements';
-import type { SiteType } from '../types';
-declare const __propDef: {
-    props: HTMLAnchorAttributes & {
-        site: SiteType;
-        aClass?: string;
-        imgClass?: string;
-        spanClass?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type SidebarBrandProps = typeof __propDef.props;
-export type SidebarBrandEvents = typeof __propDef.events;
-export type SidebarBrandSlots = typeof __propDef.slots;
+import { type SidebarBrandProps as Props } from ".";
 /**
- * [Go to docs](https://flowbite-svelte.com/)
+ * [Go to docs](https://preview.flowbite-svelte.com/)
  * ## Props
- * @prop export let site: $$Props['site'];
- * @prop export let aClass: $$Props['aClass'] = 'flex items-center ps-2.5 mb-5';
- * @prop export let imgClass: $$Props['imgClass'] = 'h-6 me-3 sm:h-7';
- * @prop export let spanClass: $$Props['spanClass'] = 'self-center text-xl font-semibold whitespace-nowrap dark:text-white';
+ * @props: children: any;
+ * @props:site: any;
+ * @props:imgClass: any;
+ * @props:spanClass: any;
+ * @props:class: string;
  */
-export default class SidebarBrand extends SvelteComponentTyped<SidebarBrandProps, SidebarBrandEvents, SidebarBrandSlots> {
-}
-export {};
+declare const SidebarBrand: import("svelte").Component<Props, {}, "">;
+type SidebarBrand = ReturnType<typeof SidebarBrand>;
+export default SidebarBrand;

package/dist/sidebar/SidebarButton.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { type SidebarButtonProps as Props, sidebarbutton } from ".";
+  let { breakpoint = "md", class: className, ...restProps }: Props = $props();
+
+  const base = $derived(sidebarbutton({ breakpoint, className }));
+</script>
+
+<button {...restProps} type="button" class={base}>
+  <span class="sr-only">Open sidebar</span>
+  <svg class="h-6 w-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    <path clip-rule="evenodd" fill-rule="evenodd" d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z"></path>
+  </svg>
+</button>
+
+<!--
+@component
+[Go to docs](https://preview.flowbite-svelte.com/)
+## Props
+@props: breakpoint: any = "md";
+@props:class: string;
+-->

package/dist/sidebar/SidebarButton.svelte.d.ts

@@ -0,0 +1,10 @@
+import { type SidebarButtonProps as Props } from ".";
+/**
+ * [Go to docs](https://preview.flowbite-svelte.com/)
+ * ## Props
+ * @props: breakpoint: any = "md";
+ * @props:class: string;
+ */
+declare const SidebarButton: import("svelte").Component<Props, {}, "">;
+type SidebarButton = ReturnType<typeof SidebarButton>;
+export default SidebarButton;

package/dist/sidebar/SidebarCta.svelte

@@ -1,26 +1,27 @@
-<script>import { twMerge } from "tailwind-merge";
-export let divWrapperClass = "p-4 mt-6 bg-primary-50 rounded-lg dark:bg-primary-900";
-export let divClass = "flex items-center mb-3";
-export let spanClass = "bg-primary-100 text-primary-800 text-sm font-semibold me-2 px-2.5 py-0.5 rounded dark:bg-primary-200 dark:text-primary-900";
-export let label = "";
+<script lang="ts">
+  import { type SidebarCtaProps as Props, sidebarcta } from ".";
+  let { children, icon, divClass, spanClass, label, class: className, ...restProps }: Props = $props();
+  const { base, div, span } = $derived(sidebarcta());
 </script>
 
-<div {...$$restProps} id="dropdown-cta" class={twMerge(divWrapperClass, $$props.class)} role="alert">
-  <div class={divClass}>
-    <span class={spanClass}>{label}</span>
-    {#if $$slots.icon}
-      <slot name="icon" />
+<div {...restProps} id="dropdown-cta" class={base({ className })} role="alert">
+  <div class={div({ class: divClass })}>
+    <span class={span({ class: spanClass })}>{label}</span>
+    {#if icon}
+      {@render icon()}
     {/if}
   </div>
-  <slot />
+  {@render children()}
 </div>
 
 <!--
 @component
-[Go to docs](https://flowbite-svelte.com/)
+[Go to docs](https://preview.flowbite-svelte.com/)
 ## Props
-@prop export let divWrapperClass: $$Props['divWrapperClass'] = 'p-4 mt-6 bg-primary-50 rounded-lg dark:bg-primary-900';
-@prop export let divClass: $$Props['divClass'] = 'flex items-center mb-3';
-@prop export let spanClass: $$Props['spanClass'] = 'bg-primary-100 text-primary-800 text-sm font-semibold me-2 px-2.5 py-0.5 rounded dark:bg-primary-200 dark:text-primary-900';
-@prop export let label: $$Props['label'] = '';
+@props: children: any;
+@props:icon: any;
+@props:divClass: any;
+@props:spanClass: any;
+@props:label: any;
+@props:class: string;
 -->

package/dist/sidebar/SidebarCta.svelte.d.ts

@@ -1,31 +1,14 @@
-import { SvelteComponentTyped } from "svelte";
-import type { HTMLAttributes } from 'svelte/elements';
-declare const __propDef: {
-    props: HTMLAttributes<HTMLDivElement> & {
-        divWrapperClass?: string;
-        divClass?: string;
-        spanClass?: string;
-        label?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        icon: {};
-        default: {};
-    };
-};
-export type SidebarCtaProps = typeof __propDef.props;
-export type SidebarCtaEvents = typeof __propDef.events;
-export type SidebarCtaSlots = typeof __propDef.slots;
+import { type SidebarCtaProps as Props } from ".";
 /**
- * [Go to docs](https://flowbite-svelte.com/)
+ * [Go to docs](https://preview.flowbite-svelte.com/)
  * ## Props
- * @prop export let divWrapperClass: $$Props['divWrapperClass'] = 'p-4 mt-6 bg-primary-50 rounded-lg dark:bg-primary-900';
- * @prop export let divClass: $$Props['divClass'] = 'flex items-center mb-3';
- * @prop export let spanClass: $$Props['spanClass'] = 'bg-primary-100 text-primary-800 text-sm font-semibold me-2 px-2.5 py-0.5 rounded dark:bg-primary-200 dark:text-primary-900';
- * @prop export let label: $$Props['label'] = '';
+ * @props: children: any;
+ * @props:icon: any;
+ * @props:divClass: any;
+ * @props:spanClass: any;
+ * @props:label: any;
+ * @props:class: string;
  */
-export default class SidebarCta extends SvelteComponentTyped<SidebarCtaProps, SidebarCtaEvents, SidebarCtaSlots> {
-}
-export {};
+declare const SidebarCta: import("svelte").Component<Props, {}, "">;
+type SidebarCta = ReturnType<typeof SidebarCta>;
+export default SidebarCta;

package/dist/sidebar/SidebarDropdownWrapper.svelte

@@ -1,65 +1,97 @@
-<script>import { twMerge } from "tailwind-merge";
-import { fade, blur, fly, slide } from "svelte/transition";
-export let btnClass = "flex items-center p-2 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700";
-export let label = "";
-export let spanClass = "flex-1 ms-3 text-left whitespace-nowrap";
-export let ulClass = "py-2 space-y-2";
-export let transitionType = "slide";
-export let transitionParams = {};
-export let isOpen = false;
-const multiple = (node, params) => {
-  switch (transitionType) {
-    case "blur":
-      return blur(node, params);
-    case "fly":
-      return fly(node, params);
-    case "fade":
-      return fade(node, params);
-    default:
-      return slide(node, params);
+<script lang="ts">
+  import { getContext } from "svelte";
+  import { writable, type Writable } from "svelte/store";
+  import type { ParamsType } from "../types";
+  import { slide } from "svelte/transition";
+  import { uiHelpers } from "..";
+  import { type SidebarDropdownWrapperProps as Props, sidebardropdownwrapper } from ".";
+
+  type SidebarContext = {
+    selected?: Writable<object | null>;
+    isSingle: boolean;
+  };
+
+  let { children, arrowup, arrowdown, iconSlot, isOpen = false, btnClass, label, spanClass, ulClass, transition = slide, params, svgClass, class: className, onclick, ...restProps }: Props = $props();
+
+  const { base, btn, span, svg, ul } = $derived(sidebardropdownwrapper());
+
+  let sidebarDropdown = uiHelpers();
+  sidebarDropdown.isOpen = isOpen;
+  let ctx = getContext<SidebarContext>("sidebarContext") || { isSingle: false };
+  let self = {};
+
+  // Create a new Writable store for tracking the selected dropdown if it doesn't exist in the context
+  if (ctx.isSingle && !ctx.selected) {
+    ctx.selected = writable<object | null>(null);
+  }
+
+  // Use the shared selected store if in single mode, otherwise use the local isOpen state
+  let selected: Writable<object | null> = ctx.isSingle ? ctx.selected! : writable(self);
+
+  $effect(() => {
+    if (ctx.isSingle) {
+      isOpen = $selected === self;
+    } else {
+      isOpen = sidebarDropdown.isOpen;
+    }
+  });
+
+  function handleDropdown() {
+    if (ctx.isSingle) {
+      selected.update((current) => (current === self ? null : self));
+    } else {
+      sidebarDropdown.toggle();
+    }
+
+    if (onclick) onclick();
   }
-};
-const handleDropdown = () => {
-  isOpen = !isOpen;
-};
 </script>
 
-<li>
-  <button {...$$restProps} on:click={() => handleDropdown()} on:click type="button" class={twMerge(btnClass, $$props.class)} aria-controls="sidebar-dropdown">
-    <slot name="icon" />
-    <span class={spanClass}>{label}</span>
+<li class={base({ className })}>
+  <button {...restProps} onclick={handleDropdown} type="button" class={btn({ class: btnClass })} aria-controls="sidebar-dropdown">
+    {#if iconSlot}
+      {@render iconSlot()}
+    {/if}
+    <span class={span({ class: spanClass })}>{label}</span>
     {#if isOpen}
-      {#if $$slots.arrowup}
-        <slot name="arrowup" />
+      {#if arrowup}
+        {@render arrowup()}
       {:else}
-        <svg class="w-3 h-3 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
+        <svg class={svg({ class: svgClass })} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
           <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5" />
         </svg>
       {/if}
-    {:else if $$slots.arrowdown}
-      <slot name="arrowdown" />
+    {:else if arrowdown}
+      {@render arrowdown()}
     {:else}
-      <svg class="w-3 h-3 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
+      <svg class={svg({ class: svgClass })} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
         <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4" />
       </svg>
     {/if}
   </button>
   {#if isOpen}
-    <ul class={ulClass} transition:multiple={transitionParams}>
-      <slot />
+    <ul class={ul({ class: ulClass })} transition:transition={params as ParamsType}>
+      {@render children()}
     </ul>
   {/if}
 </li>
 
 <!--
 @component
-[Go to docs](https://flowbite-svelte.com/)
+[Go to docs](https://preview.flowbite-svelte.com/)
 ## Props
-@prop export let btnClass: $$Props['btnClass'] = 'flex items-center p-2 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700';
-@prop export let label: $$Props['label'] = '';
-@prop export let spanClass: $$Props['spanClass'] = 'flex-1 ms-3 text-left whitespace-nowrap';
-@prop export let ulClass: $$Props['ulClass'] = 'py-2 space-y-2';
-@prop export let transitionType: $$Props['transitionType'] = 'slide';
-@prop export let transitionParams: $$Props['transitionParams'] = {};
-@prop export let isOpen: $$Props['isOpen'] = false;
+@props: children: any;
+@props:arrowup: any;
+@props:arrowdown: any;
+@props:iconSlot: any;
+@props:isOpen: any = false;
+@props:btnClass: any;
+@props:label: any;
+@props:spanClass: any;
+@props:ulClass: any;
+@props:transition: any = slide;
+@props:params: any;
+@props:svgClass: any;
+@props:class: string;
+@props:onclick: any;
 -->

package/dist/sidebar/SidebarDropdownWrapper.svelte.d.ts

@@ -1,42 +1,22 @@
-import { SvelteComponentTyped } from "svelte";
-import type { HTMLButtonAttributes } from 'svelte/elements';
-import type { TransitionTypes, TransitionParamTypes } from '../types';
-declare const __propDef: {
-    props: HTMLButtonAttributes & {
-        btnClass?: string;
-        label?: string;
-        spanClass?: string;
-        ulClass?: string;
-        transitionType?: TransitionTypes;
-        transitionParams?: TransitionParamTypes;
-        isOpen?: boolean;
-    };
-    events: {
-        click: MouseEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        icon: {};
-        arrowup: {};
-        arrowdown: {};
-        default: {};
-    };
-};
-export type SidebarDropdownWrapperProps = typeof __propDef.props;
-export type SidebarDropdownWrapperEvents = typeof __propDef.events;
-export type SidebarDropdownWrapperSlots = typeof __propDef.slots;
+import { type SidebarDropdownWrapperProps as Props } from ".";
 /**
- * [Go to docs](https://flowbite-svelte.com/)
+ * [Go to docs](https://preview.flowbite-svelte.com/)
  * ## Props
- * @prop export let btnClass: $$Props['btnClass'] = 'flex items-center p-2 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700';
- * @prop export let label: $$Props['label'] = '';
- * @prop export let spanClass: $$Props['spanClass'] = 'flex-1 ms-3 text-left whitespace-nowrap';
- * @prop export let ulClass: $$Props['ulClass'] = 'py-2 space-y-2';
- * @prop export let transitionType: $$Props['transitionType'] = 'slide';
- * @prop export let transitionParams: $$Props['transitionParams'] = {};
- * @prop export let isOpen: $$Props['isOpen'] = false;
+ * @props: children: any;
+ * @props:arrowup: any;
+ * @props:arrowdown: any;
+ * @props:iconSlot: any;
+ * @props:isOpen: any = false;
+ * @props:btnClass: any;
+ * @props:label: any;
+ * @props:spanClass: any;
+ * @props:ulClass: any;
+ * @props:transition: any = slide;
+ * @props:params: any;
+ * @props:svgClass: any;
+ * @props:class: string;
+ * @props:onclick: any;
  */
-export default class SidebarDropdownWrapper extends SvelteComponentTyped<SidebarDropdownWrapperProps, SidebarDropdownWrapperEvents, SidebarDropdownWrapperSlots> {
-}
-export {};
+declare const SidebarDropdownWrapper: import("svelte").Component<Props, {}, "">;
+type SidebarDropdownWrapper = ReturnType<typeof SidebarDropdownWrapper>;
+export default SidebarDropdownWrapper;

package/dist/sidebar/SidebarGroup.svelte

@@ -1,21 +1,19 @@
-<script>import { twMerge } from "tailwind-merge";
-export let ulClass = "space-y-2";
-export let borderClass = "pt-4 mt-4 border-t border-gray-200 dark:border-gray-700";
-export let border = false;
-if (border) {
-  ulClass += " " + borderClass;
-}
+<script lang="ts">
+  import { type SidebarGroupProps as Props } from ".";
+
+  let { children, class: className = "space-y-2", borderClass = "pt-4 mt-4 border-t border-gray-200 dark:border-gray-700", border = false, ...restProps }: Props = $props();
 </script>
 
-<ul {...$$restProps} class={twMerge(ulClass, $$props.class)}>
-  <slot />
+<ul {...restProps} class={border ? borderClass : className}>
+  {@render children()}
 </ul>
 
 <!--
 @component
-[Go to docs](https://flowbite-svelte.com/)
+[Go to docs](https://preview.flowbite-svelte.com/)
 ## Props
-@prop export let ulClass: $$Props['ulClass'] = 'space-y-2';
-@prop export let borderClass: $$Props['borderClass'] = 'pt-4 mt-4 border-t border-gray-200 dark:border-gray-700';
-@prop export let border: $$Props['border'] = false;
+@props: children: any;
+@props:class: string = "space-y-2";
+@props:borderClass: any = "pt-4 mt-4 border-t border-gray-200 dark:border-gray-700";
+@props:border: any = false;
 -->

package/dist/sidebar/SidebarGroup.svelte.d.ts

@@ -1,28 +1,12 @@
-import { SvelteComponentTyped } from "svelte";
-import type { HTMLAttributes } from 'svelte/elements';
-declare const __propDef: {
-    props: HTMLAttributes<HTMLUListElement> & {
-        ulClass?: string;
-        borderClass?: string;
-        border?: boolean;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type SidebarGroupProps = typeof __propDef.props;
-export type SidebarGroupEvents = typeof __propDef.events;
-export type SidebarGroupSlots = typeof __propDef.slots;
+import { type SidebarGroupProps as Props } from ".";
 /**
- * [Go to docs](https://flowbite-svelte.com/)
+ * [Go to docs](https://preview.flowbite-svelte.com/)
  * ## Props
- * @prop export let ulClass: $$Props['ulClass'] = 'space-y-2';
- * @prop export let borderClass: $$Props['borderClass'] = 'pt-4 mt-4 border-t border-gray-200 dark:border-gray-700';
- * @prop export let border: $$Props['border'] = false;
+ * @props: children: any;
+ * @props:class: string = "space-y-2";
+ * @props:borderClass: any = "pt-4 mt-4 border-t border-gray-200 dark:border-gray-700";
+ * @props:border: any = false;
  */
-export default class SidebarGroup extends SvelteComponentTyped<SidebarGroupProps, SidebarGroupEvents, SidebarGroupSlots> {
-}
-export {};
+declare const SidebarGroup: import("svelte").Component<Props, {}, "">;
+type SidebarGroup = ReturnType<typeof SidebarGroup>;
+export default SidebarGroup;

package/dist/sidebar/SidebarItem.svelte

@@ -1,42 +1,55 @@
-<script>import { getContext } from "svelte";
-import { twMerge } from "tailwind-merge";
-export let action = () => {
-};
-export let params = {};
-export let href = "";
-export let label = "";
-export let spanClass = "ms-3";
-export let activeClass = void 0;
-export let nonActiveClass = void 0;
-const context = getContext("sidebarContext") ?? {};
-const activeUrlStore = getContext("activeUrl");
-let sidebarUrl = "";
-activeUrlStore.subscribe((value) => {
-  sidebarUrl = value;
-});
-$: active = sidebarUrl ? href === sidebarUrl : false;
-$: aClass = twMerge(active ? activeClass ?? context.activeClass : nonActiveClass ?? context.nonActiveClass, $$props.class);
+<script lang="ts">
+  import { getContext } from "svelte";
+  import { twMerge } from "tailwind-merge";
+  import { type SidebarCtxType, type SidebarItemProps as Props } from "./";
+
+  let { iconSlot, subtext, href, label, spanClass = "ms-3", activeClass, nonActiveClass, aClass, active, class: className, ...restProps }: Props = $props();
+
+  const context = getContext<SidebarCtxType>("sidebarContext") ?? {};
+  const activeUrlStore = getContext("activeUrl") as { subscribe: (callback: (value: string) => void) => void };
+
+  let sidebarUrl = $state("");
+  activeUrlStore.subscribe((value) => {
+    sidebarUrl = value;
+  });
+  let activeItem = $state();
+
+  // $effect(() => {
+  //   activeItem = sidebarUrl ? href === sidebarUrl : false;
+  // });
+  $effect(() => {
+    // Prioritize the explicit 'active' prop if provided
+    activeItem = active !== undefined ? active : sidebarUrl ? href === sidebarUrl : false;
+  });
+
+  // let aCls = $derived((activeItem ?? sidebarUrl === href) ? (activeClass ?? context.activeClass) : (nonActiveClass ?? context.nonActiveClass));
+  let aCls = $derived((activeItem ?? sidebarUrl === href) ? (activeClass ?? context.activeClass) : (nonActiveClass ?? context.nonActiveClass));
 </script>
 
-<li>
-  <a {...$$restProps} {href} use:action={params} on:blur on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover class={aClass}>
-    <slot name="icon" />
+<li class={className}>
+  <a onclick={context.closeSidebar} {...restProps} {href} aria-current={(activeItem ?? sidebarUrl === href) ? "page" : undefined} class={twMerge(aCls, aClass)}>
+    {#if iconSlot}
+      {@render iconSlot()}
+    {/if}
     <span class={spanClass}>{label}</span>
-    {#if $$slots.subtext}
-      <slot name="subtext" />
+    {#if subtext}
+      {@render subtext()}
     {/if}
   </a>
 </li>
 
 <!--
 @component
-[Go to docs](https://flowbite-svelte.com/)
+[Go to docs](https://preview.flowbite-svelte.com/)
 ## Props
-@prop export let action: NonNullable<$$Props['action']> = () => {};
-@prop export let params: $$Props['params'] = {};
-@prop export let href: $$Props['href'] = '';
-@prop export let label: $$Props['label'] = '';
-@prop export let spanClass: $$Props['spanClass'] = 'ms-3';
-@prop export let activeClass: $$Props['activeClass'] = undefined;
-@prop export let nonActiveClass: $$Props['nonActiveClass'] = undefined;
+@props: iconSlot: any;
+@props:subtext: any;
+@props:href: any;
+@props:label: any;
+@props:spanClass: any = "ms-3";
+@props:activeClass: any;
+@props:nonActiveClass: any;
+@props:aClass: any;
+@props:active: any;
+@props:class: string;
 -->