odj-svelte-ui 0.1.0

package/dist/elements/rating/Thumbup.svelte.d.ts

@@ -0,0 +1,40 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let fillPercent: number = 100;
+ * @prop export let fillColor: string = '#00b500';
+ * @prop export let strokeColor: string = '#00b500';
+ * @prop export let size: number = 24;
+ * @prop export let ariaLabel: string = 'thumbup';
+ * @prop export let id: string = 'thumbup';
+ * @prop export let role = 'img';
+ */
+declare const Thumbup: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: any;
+    fillPercent?: number | undefined;
+    fillColor?: string | undefined;
+    strokeColor?: string | undefined;
+    size?: number | undefined;
+    ariaLabel?: string | undefined;
+    id?: string | undefined;
+    role?: string | undefined;
+}, {
+    click: MouseEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Thumbup = InstanceType<typeof Thumbup>;
+export default Thumbup;

package/dist/elements/sidebar/Sidebar.svelte

@@ -0,0 +1,42 @@
+<script lang="ts" context="module">
+  export type SidebarType = {
+    activeClass: string;
+    nonActiveClass: string;
+  };
+</script>
+
+<script lang="ts">
+  import { setContext } from 'svelte';
+  import { twMerge } from 'tailwind-merge';
+  import { writable } from 'svelte/store';
+
+  const activeUrlStore = writable('');
+
+  export let activeUrl: string = '';
+  export let asideClass: string = 'w-64';
+  export let nonActiveClass: string = 'flex items-center p-2 text-base font-normal text-neutral-700 rounded-lg dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-600 dark:hover:text-neutral-200';
+  export let activeClass: string = 'flex items-center p-2 text-base font-normal text-neutral-800 bg-neutral-300 dark:text-neutral-300 dark:bg-neutral-700 rounded-lg dark:text-white hover:bg-neutral-200 dark:hover:bg-neutral-600';
+  export let ariaLabel: string = 'Sidebar';
+
+  setContext<SidebarType>('sidebarContext', { activeClass, nonActiveClass });
+
+  $: {
+    activeUrlStore.set(activeUrl);
+  }
+  setContext('activeUrl', activeUrlStore);
+</script>
+
+<aside {...$$restProps} class={twMerge(asideClass, $$props.class)} aria-label={ariaLabel}>
+  <slot />
+</aside>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let activeUrl: string = '';
+@prop export let asideClass: string = 'w-64';
+@prop export let nonActiveClass: string = 'flex items-center p-2 text-base font-normal text-neutral-900 rounded-lg dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-700';
+@prop export let activeClass: string = 'flex items-center p-2 text-base font-normal text-neutral-900 bg-neutral-200 dark:bg-neutral-700 rounded-lg dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-700';
+@prop export let ariaLabel: string = 'Sidebar';
+-->

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

@@ -0,0 +1,47 @@
+export type SidebarType = {
+    activeClass: string;
+    nonActiveClass: string;
+};
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let activeUrl: string = '';
+ * @prop export let asideClass: string = 'w-64';
+ * @prop export let nonActiveClass: string = 'flex items-center p-2 text-base font-normal text-neutral-900 rounded-lg dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-700';
+ * @prop export let activeClass: string = 'flex items-center p-2 text-base font-normal text-neutral-900 bg-neutral-200 dark:bg-neutral-700 rounded-lg dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-700';
+ * @prop export let ariaLabel: string = 'Sidebar';
+ */
+declare const Sidebar: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    activeUrl?: string | undefined;
+    asideClass?: string | undefined;
+    nonActiveClass?: string | undefined;
+    activeClass?: string | undefined;
+    ariaLabel?: string | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type Sidebar = InstanceType<typeof Sidebar>;
+export default Sidebar;

package/dist/elements/sidebar/SidebarBrand.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  import type { SiteType } from '../types';
+
+  export let site: SiteType;
+  export let aClass: string = 'flex items-center pl-2.5 mb-5';
+  export let imgClass: string = 'h-6 mr-3 sm:h-7';
+  export let spanClass: string = 'self-center text-xl font-semibold whitespace-nowrap dark:text-white';
+</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>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let site: SiteType;
+@prop export let aClass: string = 'flex items-center pl-2.5 mb-5';
+@prop export let imgClass: string = 'h-6 mr-3 sm:h-7';
+@prop export let spanClass: string = 'self-center text-xl font-semibold whitespace-nowrap dark:text-white';
+-->

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

@@ -0,0 +1,33 @@
+import type { SiteType } from '../types';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let site: SiteType;
+ * @prop export let aClass: string = 'flex items-center pl-2.5 mb-5';
+ * @prop export let imgClass: string = 'h-6 mr-3 sm:h-7';
+ * @prop export let spanClass: string = 'self-center text-xl font-semibold whitespace-nowrap dark:text-white';
+ */
+declare const SidebarBrand: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: any;
+    site: SiteType;
+    aClass?: string | undefined;
+    imgClass?: string | undefined;
+    spanClass?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type SidebarBrand = InstanceType<typeof SidebarBrand>;
+export default SidebarBrand;

package/dist/elements/sidebar/SidebarCta.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+
+  export let divWrapperClass: string = 'p-4 mt-6 bg-primary-50 rounded-lg dark:bg-primary-900';
+  export let divClass: string = 'flex items-center mb-3';
+  export let spanClass: string = 'bg-primary-100 text-primary-800 text-sm font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-primary-200 dark:text-primary-900';
+  export let label: string = '';
+</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" />
+    {/if}
+  </div>
+  <slot />
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let divWrapperClass: string = 'p-4 mt-6 bg-primary-50 rounded-lg dark:bg-primary-900';
+@prop export let divClass: string = 'flex items-center mb-3';
+@prop export let spanClass: string = 'bg-primary-100 text-primary-800 text-sm font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-primary-200 dark:text-primary-900';
+@prop export let label: string = '';
+-->

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

@@ -0,0 +1,43 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let divWrapperClass: string = 'p-4 mt-6 bg-primary-50 rounded-lg dark:bg-primary-900';
+ * @prop export let divClass: string = 'flex items-center mb-3';
+ * @prop export let spanClass: string = 'bg-primary-100 text-primary-800 text-sm font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-primary-200 dark:text-primary-900';
+ * @prop export let label: string = '';
+ */
+declare const SidebarCta: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    divWrapperClass?: string | undefined;
+    divClass?: string | undefined;
+    spanClass?: string | undefined;
+    label?: string | undefined;
+}, {
+    icon: {};
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    icon: {};
+    default: {};
+}, {}, string>;
+type SidebarCta = InstanceType<typeof SidebarCta>;
+export default SidebarCta;

package/dist/elements/sidebar/SidebarDropdownItem.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+
+  export let aClass: string = 'flex items-center p-2 pl-11 w-full text-base font-normal text-neutral-900 rounded-lg transition duration-75 group hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700';
+  export let href: string = '';
+  export let label: string = '';
+  export let activeClass: string = 'flex items-center p-2 pl-11 text-base font-normal text-neutral-900 bg-neutral-200 dark:bg-neutral-700 rounded-lg dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-700';
+  export let active: boolean = false;
+</script>
+
+<li>
+  <a {...$$restProps} {href} on:blur on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover class={twMerge(active ? activeClass : aClass, $$props.class)}>
+    {label}
+  </a>
+</li>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let aClass: string = 'flex items-center p-2 pl-11 w-full text-base font-normal text-neutral-900 rounded-lg transition duration-75 group hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700';
+@prop export let href: string = '';
+@prop export let label: string = '';
+@prop export let activeClass: string = 'flex items-center p-2 pl-11 text-base font-normal text-neutral-900 bg-neutral-200 dark:bg-neutral-700 rounded-lg dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-700';
+@prop export let active: boolean = false;
+-->

package/dist/elements/sidebar/SidebarDropdownItem.svelte.d.ts

@@ -0,0 +1,44 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let aClass: string = 'flex items-center p-2 pl-11 w-full text-base font-normal text-neutral-900 rounded-lg transition duration-75 group hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700';
+ * @prop export let href: string = '';
+ * @prop export let label: string = '';
+ * @prop export let activeClass: string = 'flex items-center p-2 pl-11 text-base font-normal text-neutral-900 bg-neutral-200 dark:bg-neutral-700 rounded-lg dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-700';
+ * @prop export let active: boolean = false;
+ */
+declare const SidebarDropdownItem: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: any;
+    aClass?: string | undefined;
+    href?: string | undefined;
+    label?: string | undefined;
+    activeClass?: string | undefined;
+    active?: boolean | undefined;
+}, {
+    blur: FocusEvent;
+    click: MouseEvent;
+    focus: FocusEvent;
+    keydown: KeyboardEvent;
+    keypress: KeyboardEvent;
+    keyup: KeyboardEvent;
+    mouseenter: MouseEvent;
+    mouseleave: MouseEvent;
+    mouseover: MouseEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type SidebarDropdownItem = InstanceType<typeof SidebarDropdownItem>;
+export default SidebarDropdownItem;

package/dist/elements/sidebar/SidebarDropdownWrapper.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  import { fade, blur, fly, slide } from 'svelte/transition';
+  import type { TransitionTypes, TransitionParamTypes } from '../types';
+
+  export let btnClass: string = 'flex items-center p-2 w-full text-base font-normal text-neutral-900 rounded-lg transition duration-75 group hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700';
+  export let label: string = '';
+  export let spanClass: string = 'flex-1 ml-3 text-left whitespace-nowrap';
+  export let ulClass: string = 'py-2 space-y-2';
+  export let transitionType: TransitionTypes = 'slide';
+  export let transitionParams: TransitionParamTypes = {};
+
+  // make a custom transition function that returns the desired transition
+  const multiple = (node: HTMLElement, params: any) => {
+    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);
+    }
+  };
+
+  export let isOpen = false;
+  const handleDropdown = () => {
+    isOpen = !isOpen;
+  };
+</script>
+
+<li>
+  <button {...$$restProps} on:click={() => handleDropdown()} type="button" class={twMerge(btnClass, $$props.class)} aria-controls="sidebar-dropdown">
+    <slot name="icon" />
+    <span class={spanClass}>{label}</span>
+    {#if isOpen}
+      {#if $$slots.arrowup}
+        <slot name="arrowup" />
+      {:else}
+        <svg class="w-3 h-3 text-neutral-800 dark:text-white" 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}
+      <svg class="w-3 h-3 text-neutral-800 dark:text-white" 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>
+  {/if}
+</li>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let btnClass: string = 'flex items-center p-2 w-full text-base font-normal text-neutral-900 rounded-lg transition duration-75 group hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700';
+@prop export let label: string = '';
+@prop export let spanClass: string = 'flex-1 ml-3 text-left whitespace-nowrap';
+@prop export let ulClass: string = 'py-2 space-y-2';
+@prop export let transitionType: TransitionTypes = 'slide';
+@prop export let transitionParams: TransitionParamTypes = {};
+@prop export let isOpen = false;
+-->

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

@@ -0,0 +1,54 @@
+import type { TransitionTypes, TransitionParamTypes } from '../types';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let btnClass: string = 'flex items-center p-2 w-full text-base font-normal text-neutral-900 rounded-lg transition duration-75 group hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700';
+ * @prop export let label: string = '';
+ * @prop export let spanClass: string = 'flex-1 ml-3 text-left whitespace-nowrap';
+ * @prop export let ulClass: string = 'py-2 space-y-2';
+ * @prop export let transitionType: TransitionTypes = 'slide';
+ * @prop export let transitionParams: TransitionParamTypes = {};
+ * @prop export let isOpen = false;
+ */
+declare const SidebarDropdownWrapper: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    btnClass?: string | undefined;
+    label?: string | undefined;
+    spanClass?: string | undefined;
+    ulClass?: string | undefined;
+    transitionType?: TransitionTypes | undefined;
+    transitionParams?: TransitionParamTypes | undefined;
+    isOpen?: boolean | undefined;
+}, {
+    icon: {};
+    arrowup: {};
+    arrowdown: {};
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    icon: {};
+    arrowup: {};
+    arrowdown: {};
+    default: {};
+}, {}, string>;
+type SidebarDropdownWrapper = InstanceType<typeof SidebarDropdownWrapper>;
+export default SidebarDropdownWrapper;

package/dist/elements/sidebar/SidebarGroup.svelte

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

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

@@ -0,0 +1,39 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let ulClass: string = 'space-y-2';
+ * @prop export let borderClass: string = 'pt-4 mt-4 border-t border-neutral-200 dark:border-neutral-700';
+ * @prop export let border: boolean = false;
+ */
+declare const SidebarGroup: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    ulClass?: string | undefined;
+    borderClass?: string | undefined;
+    border?: boolean | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type SidebarGroup = InstanceType<typeof SidebarGroup>;
+export default SidebarGroup;

package/dist/elements/sidebar/SidebarItem.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import { getContext } from 'svelte';
+  import { twMerge } from 'tailwind-merge';
+  import type { SidebarType } from './Sidebar.svelte';
+
+  export let href: string = '';
+  export let label: string = '';
+  export let spanClass: string = 'ml-3';
+  export let activeClass: string | undefined = undefined;
+  export let nonActiveClass: string | undefined = undefined;
+  // export let active: boolean = false;
+
+  const context = getContext<SidebarType>('sidebarContext') ?? {};
+  const activeUrlStore = getContext('activeUrl') as { subscribe: (callback: (value: string) => void) => void };
+
+  let sidebarUrl = '';
+  activeUrlStore.subscribe((value) => {
+    // console.log('value: ', value)
+    sidebarUrl = value;
+  });
+  // console.log('sidbarUrl: ', sidebarUrl)
+  // console.log('href: ', href)
+  $: active = sidebarUrl ? href === sidebarUrl : false;
+  // console.log('active: ', active)
+
+  $: aClass = twMerge(active ? activeClass ?? context.activeClass : nonActiveClass ?? context.nonActiveClass, $$props.class);
+</script>
+
+<li>
+  <a {...$$restProps} {href} on:blur on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover class={aClass}>
+    <slot name="icon" />
+    <span class={spanClass}>{label}</span>
+    {#if $$slots.subtext}
+      <slot name="subtext" />
+    {/if}
+  </a>
+</li>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let href: string = '';
+@prop export let label: string = '';
+@prop export let spanClass: string = 'ml-3';
+@prop export let activeClass: string | undefined = undefined;
+@prop export let nonActiveClass: string | undefined = undefined;
+@prop export let active: boolean = false;
+-->

package/dist/elements/sidebar/SidebarItem.svelte.d.ts

@@ -0,0 +1,48 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let href: string = '';
+ * @prop export let label: string = '';
+ * @prop export let spanClass: string = 'ml-3';
+ * @prop export let activeClass: string | undefined = undefined;
+ * @prop export let nonActiveClass: string | undefined = undefined;
+ * @prop export let active: boolean = false;
+ */
+declare const SidebarItem: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: any;
+    href?: string | undefined;
+    label?: string | undefined;
+    spanClass?: string | undefined;
+    activeClass?: string | undefined | undefined;
+    nonActiveClass?: string | undefined | undefined;
+}, {
+    blur: FocusEvent;
+    click: MouseEvent;
+    focus: FocusEvent;
+    keydown: KeyboardEvent;
+    keypress: KeyboardEvent;
+    keyup: KeyboardEvent;
+    mouseenter: MouseEvent;
+    mouseleave: MouseEvent;
+    mouseover: MouseEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    icon: {};
+    subtext: {};
+}, {}, string>;
+type SidebarItem = InstanceType<typeof SidebarItem>;
+export default SidebarItem;

package/dist/elements/sidebar/SidebarWrapper.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+
+  export let divClass: string = 'overflow-y-auto p-2 bg-neutral-100 rounded dark:bg-neutral-850';
+</script>
+
+<div {...$$restProps} class={twMerge(divClass, $$props.class)}>
+  <slot />
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let divClass: string = 'overflow-y-auto py-4 px-3 bg-neutral-50 rounded dark:bg-neutral-800';
+-->