flowbite-svelte 0.44.18 → 0.44.20

package/dist/forms/CheckboxButton.svelte.d.ts

@@ -0,0 +1,54 @@
+import { SvelteComponent } from "svelte";
+import type { ButtonColorType, SizeType } from '../types';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        group?: (string | number)[] | undefined;
+        value?: string | number | undefined;
+        checked?: boolean | undefined;
+        inline?: boolean | undefined;
+        pill?: boolean | undefined;
+        outline?: boolean | undefined;
+        size?: SizeType | undefined;
+        color?: ButtonColorType | undefined;
+        shadow?: boolean | undefined;
+    };
+    events: {
+        keyup: KeyboardEvent;
+        keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
+        focus: FocusEvent;
+        blur: FocusEvent;
+        click: MouseEvent;
+        mouseover: MouseEvent;
+        mouseenter: MouseEvent;
+        mouseleave: MouseEvent;
+        paste: ClipboardEvent;
+        change: Event;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type CheckboxButtonProps = typeof __propDef.props;
+export type CheckboxButtonEvents = typeof __propDef.events;
+export type CheckboxButtonSlots = typeof __propDef.slots;
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let group: (string | number)[] = [];
+ * @prop export let value: string | number = 'on';
+ * @prop export let checked: boolean | undefined = undefined;
+ * @prop export let inline: boolean = true;
+ * @prop export let pill: boolean = false;
+ * @prop export let outline: boolean = false;
+ * @prop export let size: SizeType | undefined = undefined;
+ * @prop export let color: ButtonColorType | undefined = undefined;
+ * @prop export let shadow: boolean = false;
+ */
+export default class CheckboxButton extends SvelteComponent<CheckboxButtonProps, CheckboxButtonEvents, CheckboxButtonSlots> {
+}
+export {};
+//# sourceMappingURL=CheckboxButton.svelte.d.ts.map

package/dist/forms/CheckboxButton.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxButton.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/forms/CheckboxButton.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAED,OAAO,KAAK,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAkE5D,QAAA,MAAM,SAAS;;;;;kBADoN,OAAO,GAAG,SAAS;;;;eAA8D,QAAQ,GAAG,SAAS;gBAAU,eAAe,GAAG,SAAS;;;;;;;;;;;;;;;;;;;;;CAC/R,CAAC;AAC/E,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACzD,MAAM,MAAM,oBAAoB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC3D,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEzD;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,OAAO,OAAO,cAAe,SAAQ,eAAe,CAAC,mBAAmB,EAAE,oBAAoB,EAAE,mBAAmB,CAAC;CAC1H"}

package/dist/forms/FloatingLabelInput.svelte

@@ -6,7 +6,6 @@ export let type = 'text';
 export let size = 'default';
 export let color = 'base';
 export let value = undefined;
-export let label = '';
 const divClasses = {
     filled: 'relative',
     outlined: 'relative',
@@ -66,7 +65,7 @@ const labelColorClasses = {
   <input {id} {...$$restProps} bind:value on:blur on:change on:click on:focus on:input on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover on:paste {...{ type }} placeholder=" " class={twMerge(inputClasses[style], inputColorClasses[color], inputSizes[style][size], $$props.classInput)} />
 
   <label for={id} class={twMerge(labelClasses[style], labelColorClasses[color], labelSizes[style][size], $$props.classLabel)}>
-    {label}
+    <slot />
   </label>
 </div>
 
@@ -80,5 +79,4 @@ const labelColorClasses = {
 @prop export let size: 'small' | 'default' = 'default';
 @prop export let color: 'base' | 'green' | 'red' = 'base';
 @prop export let value: any = undefined;
-@prop export let label: string = '';
 -->

package/dist/forms/FloatingLabelInput.svelte.d.ts

@@ -9,7 +9,6 @@ declare const __propDef: {
         size?: "default" | "small" | undefined;
         color?: "red" | "green" | "base" | undefined;
         value?: any;
-        label?: string | undefined;
     };
     events: {
         blur: FocusEvent;
@@ -27,7 +26,9 @@ declare const __propDef: {
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        default: {};
+    };
 };
 export type FloatingLabelInputProps = typeof __propDef.props;
 export type FloatingLabelInputEvents = typeof __propDef.events;
@@ -41,7 +42,6 @@ export type FloatingLabelInputSlots = typeof __propDef.slots;
  * @prop export let size: 'small' | 'default' = 'default';
  * @prop export let color: 'base' | 'green' | 'red' = 'base';
  * @prop export let value: any = undefined;
- * @prop export let label: string = '';
  */
 export default class FloatingLabelInput extends SvelteComponent<FloatingLabelInputProps, FloatingLabelInputEvents, FloatingLabelInputSlots> {
 }

package/dist/forms/FloatingLabelInput.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingLabelInput.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/forms/FloatingLabelInput.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAGD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAwF1C,QAAA,MAAM,SAAS;;;;;;;;gBADqP,GAAG;;;;;;;;;;;;;;;;;;;;CACzL,CAAC;AAC/E,MAAM,MAAM,uBAAuB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC7D,MAAM,MAAM,wBAAwB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC/D,MAAM,MAAM,uBAAuB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE7D;;;;;;;;;;GAUG;AACH,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,eAAe,CAAC,uBAAuB,EAAE,wBAAwB,EAAE,uBAAuB,CAAC;CAC1I"}
+{"version":3,"file":"FloatingLabelInput.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/forms/FloatingLabelInput.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAGD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAuF1C,QAAA,MAAM,SAAS;;;;;;;;gBADsO,GAAG;;;;;;;;;;;;;;;;;;;;;CAC1K,CAAC;AAC/E,MAAM,MAAM,uBAAuB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC7D,MAAM,MAAM,wBAAwB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC/D,MAAM,MAAM,uBAAuB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE7D;;;;;;;;;GASG;AACH,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,eAAe,CAAC,uBAAuB,EAAE,wBAAwB,EAAE,uBAAuB,CAAC;CAC1I"}

package/dist/forms/MultiSelect.svelte

@@ -1,19 +1,18 @@
 <script>import Badge from '../badge/Badge.svelte';
-import { twMerge } from 'tailwind-merge';
 import CloseButton from '../utils/CloseButton.svelte';
-import { createEventDispatcher } from 'svelte';
-import { onMount } from 'svelte';
+import { twMerge } from 'tailwind-merge';
+import createEventDispatcher from '../utils/createEventDispatcher';
 const dispatch = createEventDispatcher();
 export let items = [];
 export let value = [];
 export let size = 'md';
 export let dropdownClass = '';
-let selectItems = [];
+let selectItems = items.filter((x) => value.includes(x.value));
 let show = false;
 const sizes = {
-    sm: 'px-2 py-1',
-    md: 'px-3 py-2',
-    lg: 'px-4 py-3'
+    sm: 'px-2 py-1 min-h-[2.4rem]',
+    md: 'px-3 py-1 min-h-[2.7rem]',
+    lg: 'px-4 py-2 min-h-[3.2rem]'
 };
 // Container
 const multiSelectClass = 'relative border border-gray-300 flex items-center rounded-lg gap-2 dark:border-gray-600 focus-within:ring-1 focus-within:border-primary-500 ring-primary-500 dark:focus-within:border-primary-500 dark:ring-primary-500';
@@ -24,46 +23,41 @@ $: multiSelectDropdown = twMerge('absolute z-50 p-3 flex flex-col gap-1 max-h-64
 const itemsClass = 'py-2 px-3 rounded-lg text-gray-600 hover:text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:text-gray-300 dark:hover:bg-gray-600';
 // Selected items
 const itemsSelectClass = 'bg-gray-100 text-black hover:text-black dark:text-white dark:bg-gray-600 dark:hover:text-white';
-onMount(() => {
-    if (value.length) {
-        items.map((item) => {
-            if (value.includes(item.value)) {
-                selectItems.push(item);
-            }
-        });
-    }
-});
 const selectOption = (select) => {
-    if (selectItems.includes(select)) {
+    if (value.includes(select.value)) {
         clearThisOption(select);
     }
     else {
-        selectItems.push(select);
-        value.push(select.value);
-        selectItems = selectItems;
-        value = value;
-        dispatch('selected', selectItems);
+        if (!value.includes(select.value))
+            value = [...value, select.value];
     }
 };
 const clearAll = (e) => {
     e.stopPropagation();
-    selectItems = [];
     value = [];
-    dispatch('selected', selectItems);
 };
 const clearThisOption = (select) => {
-    if (selectItems.includes(select)) {
-        selectItems = selectItems.filter((o) => o !== select);
-        dispatch('selected', selectItems);
-    }
     if (value.includes(select.value)) {
         value = value.filter((o) => o !== select.value);
     }
 };
+function init(node, value) {
+    const inital = value; // hack for below
+    return {
+        update: (value) => {
+            selectItems = items.filter((x) => value.includes(x.value));
+            // avoid initial event emitting
+            if (value !== inital) {
+                dispatch('change', node, selectItems);
+                dispatch('input', node, selectItems);
+            }
+        }
+    };
+}
 </script>
 
 <!-- Hidden select for form submission -->
-<select {...$$restProps} bind:value hidden multiple on:change on:input>
+<select use:init={value} {...$$restProps} {value} hidden multiple>
   {#each items as { value, name }}
     <option {value}>{name}</option>
   {/each}
@@ -83,7 +77,7 @@ const clearThisOption = (select) => {
   </span>
   <div class="flex ml-auto gap-2 items-center">
     {#if selectItems.length}
-      <CloseButton on:click={clearAll} color="none" class="p-0 focus:ring-gray-400" />
+      <CloseButton {size} on:click={clearAll} color="none" class="p-0 focus:ring-gray-400" />
     {/if}
     <div class="w-[1px] bg-gray-300 dark:bg-gray-600" />
     <svg class="cursor-pointer h-3 w-3 ml-1 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">

package/dist/forms/MultiSelect.svelte.d.ts

@@ -9,10 +9,7 @@ declare const __propDef: {
         dropdownClass?: string | undefined;
     };
     events: {
-        change: Event;
-        input: Event;
         click: MouseEvent;
-        selected: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/forms/MultiSelect.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/forms/MultiSelect.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAGD,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AA8H/D,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACtD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACxD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEtD;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,eAAe,CAAC,gBAAgB,EAAE,iBAAiB,EAAE,gBAAgB,CAAC;CAC9G"}
+{"version":3,"file":"MultiSelect.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/forms/MultiSelect.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAID,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAqH/D,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACtD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACxD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEtD;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,eAAe,CAAC,gBAAgB,EAAE,iBAAiB,EAAE,gBAAgB,CAAC;CAC9G"}

package/dist/forms/RadioButton.svelte

@@ -0,0 +1,49 @@
+<script>import Button from '../buttons/Button.svelte';
+import { twMerge } from 'tailwind-merge';
+export let group = '';
+export let value = '';
+export let inline = true;
+// Button properties forwarding
+export let pill = false;
+export let outline = false;
+export let size = undefined;
+export let color = undefined;
+export let shadow = false;
+let buttonClass;
+$: buttonClass = twMerge(inline ? 'inline-flex' : 'flex', $$props.class);
+</script>
+
+<Button tag="label" checked={value === group} {pill} {outline} {size} {color} {shadow} class={buttonClass}>
+  <input
+    type="radio"
+    bind:group
+    {value}
+    {...$$restProps}
+    class="sr-only"
+    on:keyup
+    on:keydown
+    on:keypress
+    on:focus
+    on:blur
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave
+    on:paste
+    on:change />
+  <slot />
+</Button>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let group: string | number = '';
+@prop export let value: string | number = '';
+@prop export let inline: boolean = true;
+@prop export let pill: boolean = false;
+@prop export let outline: boolean = false;
+@prop export let size: SizeType | undefined = undefined;
+@prop export let color: ButtonColorType | undefined = undefined;
+@prop export let shadow: boolean = false;
+-->

package/dist/forms/RadioButton.svelte.d.ts

@@ -0,0 +1,52 @@
+import { SvelteComponent } from "svelte";
+import type { ButtonColorType, SizeType } from '../types';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        group?: string | number | undefined;
+        value?: string | number | undefined;
+        inline?: boolean | undefined;
+        pill?: boolean | undefined;
+        outline?: boolean | undefined;
+        size?: SizeType | undefined;
+        color?: ButtonColorType | undefined;
+        shadow?: boolean | undefined;
+    };
+    events: {
+        keyup: KeyboardEvent;
+        keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
+        focus: FocusEvent;
+        blur: FocusEvent;
+        click: MouseEvent;
+        mouseover: MouseEvent;
+        mouseenter: MouseEvent;
+        mouseleave: MouseEvent;
+        paste: ClipboardEvent;
+        change: Event;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type RadioButtonProps = typeof __propDef.props;
+export type RadioButtonEvents = typeof __propDef.events;
+export type RadioButtonSlots = typeof __propDef.slots;
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let group: string | number = '';
+ * @prop export let value: string | number = '';
+ * @prop export let inline: boolean = true;
+ * @prop export let pill: boolean = false;
+ * @prop export let outline: boolean = false;
+ * @prop export let size: SizeType | undefined = undefined;
+ * @prop export let color: ButtonColorType | undefined = undefined;
+ * @prop export let shadow: boolean = false;
+ */
+export default class RadioButton extends SvelteComponent<RadioButtonProps, RadioButtonEvents, RadioButtonSlots> {
+}
+export {};
+//# sourceMappingURL=RadioButton.svelte.d.ts.map

package/dist/forms/RadioButton.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButton.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/forms/RadioButton.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAED,OAAO,KAAK,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAgC5D,QAAA,MAAM,SAAS;;;;;;;;eAD+O,QAAQ,GAAG,SAAS;gBAAU,eAAe,GAAG,SAAS;;;;;;;;;;;;;;;;;;;;;CACzO,CAAC;AAC/E,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACtD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACxD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEtD;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,eAAe,CAAC,gBAAgB,EAAE,iBAAiB,EAAE,gBAAgB,CAAC;CAC9G"}

package/dist/forms/Textarea.svelte

@@ -14,7 +14,7 @@ let textareaClass;
 $: textareaClass = wrapped ? wrappedClass : twMerge(wrapperClass, unWrappedClass);
 const headerClass = (header) => twMerge(header ? 'border-b' : 'border-t', 'py-2 px-3 border-gray-200 dark:border-gray-600');
 let innerWrapperClass;
-$: innerWrapperClass = twMerge(innerWrappedClass, $$slots.footer ? 'rounded-b-lg' : '', $$slots.header ? 'rounded-t-lg' : '');
+$: innerWrapperClass = twMerge(innerWrappedClass, $$slots.footer ? '' : 'rounded-b-lg', $$slots.header ? '' : 'rounded-t-lg');
 </script>
 
 <Wrapper show={wrapped} class={wrapperClass}>

package/dist/index.d.ts

@@ -32,6 +32,7 @@ export { default as FooterIcon } from "./footer/FooterIcon.svelte";
 export { default as FooterLink } from "./footer/FooterLink.svelte";
 export { default as FooterLinkGroup } from "./footer/FooterLinkGroup.svelte";
 export { default as Checkbox } from "./forms/Checkbox.svelte";
+export { default as CheckboxButton } from "./forms/CheckboxButton.svelte";
 export { default as Dropzone } from "./forms/Dropzone.svelte";
 export { default as Fileupload } from "./forms/Fileupload.svelte";
 export { default as FloatingLabelInput } from "./forms/FloatingLabelInput.svelte";
@@ -42,6 +43,7 @@ export { default as Label } from "./forms/Label.svelte";
 export { default as MultiSelect } from "./forms/MultiSelect.svelte";
 export { default as NumberInput } from "./forms/NumberInput.svelte";
 export { default as Radio } from "./forms/Radio.svelte";
+export { default as RadioButton } from "./forms/RadioButton.svelte";
 export { default as Range } from "./forms/Range.svelte";
 export { default as Search } from "./forms/Search.svelte";
 export { default as Select } from "./forms/Select.svelte";
@@ -131,6 +133,7 @@ export { default as Secondary } from "./typography/Secondary.svelte";
 export { default as Span } from "./typography/Span.svelte";
 export { default as CloseButton } from "./utils/CloseButton.svelte";
 export { default as Frame } from "./utils/Frame.svelte";
+export { default as TransitionFrame } from "./utils/TransitionFrame.svelte";
 export { default as Video } from "./video/Video.svelte";
 export * from "./types";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -69,6 +69,7 @@ export { default as FooterLinkGroup } from './footer/FooterLinkGroup.svelte';
 
 // Forms
 export { default as Checkbox } from './forms/Checkbox.svelte';
+export { default as CheckboxButton } from './forms/CheckboxButton.svelte';
 export { default as Dropzone } from './forms/Dropzone.svelte';
 export { default as Fileupload } from './forms/Fileupload.svelte';
 export { default as FloatingLabelInput } from './forms/FloatingLabelInput.svelte';
@@ -79,6 +80,7 @@ export { default as Label } from './forms/Label.svelte';
 export { default as MultiSelect } from './forms/MultiSelect.svelte';
 export { default as NumberInput } from './forms/NumberInput.svelte';
 export { default as Radio } from './forms/Radio.svelte';
+export { default as RadioButton } from './forms/RadioButton.svelte';
 export { default as Range } from './forms/Range.svelte';
 export { default as Search } from './forms/Search.svelte';
 export { default as Select } from './forms/Select.svelte';
@@ -218,6 +220,7 @@ export { default as Span } from './typography/Span.svelte';
 // utils
 export { default as CloseButton } from './utils/CloseButton.svelte';
 export { default as Frame } from './utils/Frame.svelte';
+export { default as TransitionFrame } from './utils/TransitionFrame.svelte';
 
 // video
 export { default as Video } from './video/Video.svelte';

package/dist/indicators/Indicator.svelte

@@ -67,6 +67,6 @@ $: dotClass = twMerge('flex-shrink-0', rounded ? 'rounded' : 'rounded-full', bor
 @prop export let rounded: boolean = false;
 @prop export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';
 @prop export let border: boolean = false;
-@prop export let placement: PlacementType | undefined = undefined;
+@prop export let placement: IndicatorPlacementType | undefined = undefined;
 @prop export let offset: boolean = true;
 -->

package/dist/indicators/Indicator.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { PlacementType } from '../types';
+import type { IndicatorPlacementType } from '../types';
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -7,7 +7,7 @@ declare const __propDef: {
         rounded?: boolean | undefined;
         size?: "xs" | "sm" | "lg" | "xl" | "md" | undefined;
         border?: boolean | undefined;
-        placement?: PlacementType | undefined;
+        placement?: IndicatorPlacementType | undefined;
         offset?: boolean | undefined;
     };
     events: {
@@ -27,7 +27,7 @@ export type IndicatorSlots = typeof __propDef.slots;
  * @prop export let rounded: boolean = false;
  * @prop export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';
  * @prop export let border: boolean = false;
- * @prop export let placement: PlacementType | undefined = undefined;
+ * @prop export let placement: IndicatorPlacementType | undefined = undefined;
  * @prop export let offset: boolean = true;
  */
 export default class Indicator extends SvelteComponent<IndicatorProps, IndicatorEvents, IndicatorSlots> {

package/dist/indicators/Indicator.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Indicator.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/indicators/Indicator.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAED,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAiF9C,QAAA,MAAM,SAAS;;;;;;;oBADmO,aAAa,GAAG,SAAS;;;;;;;;;CAC7L,CAAC;AAC/E,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACpD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEpD;;;;;;;;;GASG;AACH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,eAAe,CAAC,cAAc,EAAE,eAAe,EAAE,cAAc,CAAC;CACtG"}
+{"version":3,"file":"Indicator.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/indicators/Indicator.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AACD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC;AAkFzD,QAAA,MAAM,SAAS;;;;;;;oBADmO,sBAAsB,GAAG,SAAS;;;;;;;;;CACtM,CAAC;AAC/E,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACpD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEpD;;;;;;;;;GASG;AACH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,eAAe,CAAC,cAAc,EAAE,eAAe,EAAE,cAAc,CAAC;CACtG"}

package/dist/list-group/Listgroup.svelte

@@ -1,7 +1,7 @@
-<script>import { setContext, createEventDispatcher } from 'svelte';
+<script>import { createEventDispatcher, setContext } from 'svelte';
 import { twMerge } from 'tailwind-merge';
-import ListgroupItem from './ListgroupItem.svelte';
 import Frame from '../utils/Frame.svelte';
+import ListgroupItem from './ListgroupItem.svelte';
 const dispatch = createEventDispatcher();
 export let items = [];
 export let active = false;
@@ -13,13 +13,14 @@ $: groupClass = twMerge(defaultClass, $$props.class);
 
 <Frame tag={active ? 'div' : 'ul'} {...$$restProps} rounded border class={groupClass}>
   {#each items as item, index}
-    {#if typeof item === 'object'}
-      <ListgroupItem {active} {...item} {index} on:click={() => dispatch('click', item)}><slot {item} {index} /></ListgroupItem>
-    {:else}
+    {#if typeof item === 'string'}
       <ListgroupItem {active} {index} on:click={() => dispatch('click', item)}><slot {item} {index} /></ListgroupItem>
+    {:else}
+      <ListgroupItem {active} {...item} {index} on:click={() => dispatch('click', item)}><slot {item} {index} /></ListgroupItem>
     {/if}
   {:else}
-    <slot item={items[0]} />
+    {@const item = items[0]}
+    <slot {item} />
   {/each}
 </Frame>
 

package/dist/list-group/Listgroup.svelte.d.ts

@@ -7,8 +7,6 @@ declare const __propDef: {
         rounded?: boolean | undefined;
         border?: boolean | undefined;
         shadow?: boolean | undefined;
-        transition?: ((node: HTMLElement, params: any) => import("svelte/transition").TransitionConfig) | undefined;
-        params?: object | undefined;
         node?: HTMLElement | undefined;
         use?: import("svelte/action").Action<HTMLElement, any, Record<never, any>> | undefined;
         options?: object | undefined;
@@ -25,7 +23,7 @@ declare const __propDef: {
     };
     slots: {
         default: {
-            item: string | ListGroupItemType;
+            item: string;
         };
     };
 };

package/dist/list-group/Listgroup.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Listgroup.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/list-group/Listgroup.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAGD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AA6ClD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACpD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEpD;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,eAAe,CAAC,cAAc,EAAE,eAAe,EAAE,cAAc,CAAC;CACtG"}
+{"version":3,"file":"Listgroup.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/list-group/Listgroup.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAGD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AA8ClD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACpD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEpD;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,eAAe,CAAC,cAAc,EAAE,eAAe,EAAE,cAAc,CAAC;CACtG"}

package/dist/list-group/ListgroupItem.svelte

@@ -10,6 +10,7 @@ export let disabledClass = 'text-gray-900 bg-gray-100 dark:bg-gray-600 dark:text
 export let focusClass = 'focus:z-40 focus:outline-none focus:ring-2 focus:ring-primary-700 focus:text-primary-700 dark:focus:ring-gray-500 dark:focus:text-white';
 export let hoverClass = 'hover:bg-gray-100 hover:text-primary-700 dark:hover:bg-gray-600 dark:hover:text-white';
 export let itemDefaultClass = 'py-2 px-4 w-full text-sm font-medium list-none first:rounded-t-lg last:rounded-b-lg';
+export let attrs = undefined;
 const states = {
     current: currentClass,
     normal: normalClass,
@@ -26,11 +27,11 @@ $: itemClass = twMerge(itemDefaultClass, states[state], active && state === 'dis
     <slot item={$$props} />
   </li>
 {:else if href}
-  <a {href} class="block {itemClass}" aria-current={current} on:blur on:change on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover>
+  <a {...attrs} {href} class="block {itemClass}" aria-current={current} on:blur on:change on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover>
     <slot item={$$props} />
   </a>
 {:else}
-  <button type="button" class="flex items-center text-left {itemClass}" {disabled} on:blur on:change on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover aria-current={current}>
+  <button type="button" {...attrs} class="flex items-center text-left {itemClass}" {disabled} aria-current={current} on:blur on:change on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover>
     <slot item={$$props} />
   </button>
 {/if}
@@ -49,4 +50,5 @@ $: itemClass = twMerge(itemDefaultClass, states[state], active && state === 'dis
 @prop export let focusClass: string = 'focus:z-40 focus:outline-none focus:ring-2 focus:ring-primary-700 focus:text-primary-700 dark:focus:ring-gray-500 dark:focus:text-white';
 @prop export let hoverClass: string = 'hover:bg-gray-100 hover:text-primary-700 dark:hover:bg-gray-600 dark:hover:text-white';
 @prop export let itemDefaultClass: string = 'py-2 px-4 w-full text-sm font-medium list-none first:rounded-t-lg last:rounded-b-lg';
+@prop export let attrs: any = undefined;
 -->

package/dist/list-group/ListgroupItem.svelte.d.ts

@@ -12,6 +12,7 @@ declare const __propDef: {
         focusClass?: string | undefined;
         hoverClass?: string | undefined;
         itemDefaultClass?: string | undefined;
+        attrs?: any;
     };
     events: {
         blur: FocusEvent;
@@ -49,6 +50,7 @@ export type ListgroupItemSlots = typeof __propDef.slots;
  * @prop export let focusClass: string = 'focus:z-40 focus:outline-none focus:ring-2 focus:ring-primary-700 focus:text-primary-700 dark:focus:ring-gray-500 dark:focus:text-white';
  * @prop export let hoverClass: string = 'hover:bg-gray-100 hover:text-primary-700 dark:hover:bg-gray-600 dark:hover:text-white';
  * @prop export let itemDefaultClass: string = 'py-2 px-4 w-full text-sm font-medium list-none first:rounded-t-lg last:rounded-b-lg';
+ * @prop export let attrs: any = undefined;
  */
 export default class ListgroupItem extends SvelteComponent<ListgroupItemProps, ListgroupItemEvents, ListgroupItemSlots> {
 }

package/dist/list-group/ListgroupItem.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListgroupItem.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/list-group/ListgroupItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAkDD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACxD,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC1D,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAExD;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,eAAe,CAAC,kBAAkB,EAAE,mBAAmB,EAAE,kBAAkB,CAAC;CACtH"}
+{"version":3,"file":"ListgroupItem.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/list-group/ListgroupItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAmDD,QAAA,MAAM,SAAS;;;;;;;;;;;;;gBADke,GAAG;;;;;;;;;;;;;;;;;;;;;CACta,CAAC;AAC/E,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACxD,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC1D,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAExD;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,eAAe,CAAC,kBAAkB,EAAE,mBAAmB,EAAE,kBAAkB,CAAC;CACtH"}

package/dist/mega-menu/MegaMenu.svelte.d.ts

@@ -7,8 +7,6 @@ declare const __propDef: {
         rounded?: boolean | undefined;
         border?: boolean | undefined;
         shadow?: boolean | undefined;
-        transition?: ((node: HTMLElement, params: any) => import("svelte/transition").TransitionConfig) | undefined;
-        params?: object | undefined;
         node?: HTMLElement | undefined;
         use?: import("svelte/action").Action<HTMLElement, any, Record<never, any>> | undefined;
         options?: object | undefined;

package/dist/mega-menu/MegaMenu.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MegaMenu.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/mega-menu/MegaMenu.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAED,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAmDzC,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAvCL,OAAO;iBACJ,MAAM;;;;;;;;;;;;;;;CAsCoC,CAAC;AACxD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,eAAe,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CAClG"}
+{"version":3,"file":"MegaMenu.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/mega-menu/MegaMenu.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAED,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAmDzC,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;cAvCL,OAAO;iBACJ,MAAM;;;;;;;;;;;;;;;CAsCoC,CAAC;AACxD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,eAAe,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CAClG"}

package/dist/modal/Modal.svelte

@@ -74,7 +74,7 @@ const hide = (e) => {
     open = false;
 };
 let frameClass;
-$: frameClass = twMerge(defaultClass, 'w-full', $$props.class);
+$: frameClass = twMerge(defaultClass, 'w-full divide-y', $$props.class);
 const isScrollable = (e) => [e.scrollWidth > e.clientWidth && ['scroll', 'auto'].indexOf(getComputedStyle(e).overflowX) >= 0, e.scrollHeight > e.clientHeight && ['scroll', 'auto'].indexOf(getComputedStyle(e).overflowY) >= 0];
 let backdropCls = twMerge(backdropClass, $$props.classBackdrop);
 function handleKeys(e) {
@@ -94,7 +94,7 @@ function handleKeys(e) {
       <Frame rounded shadow {...$$restProps} class={frameClass}>
         <!-- Modal header -->
         {#if $$slots.header || title}
-          <Frame color={$$restProps.color} class="flex justify-between items-center p-4 rounded-t border-b">
+          <Frame color={$$restProps.color} class="flex justify-between items-center p-4 rounded-t">
             <slot name="header">
               <h3 class="text-xl font-semibold {$$restProps.color ? '' : 'text-gray-900 dark:text-white'} p-0">
                 {title}
@@ -111,7 +111,7 @@ function handleKeys(e) {
         </div>
         <!-- Modal footer -->
         {#if $$slots.footer}
-          <Frame color={$$restProps.color} class="flex items-center p-6 space-x-2 rounded-b border-t">
+          <Frame color={$$restProps.color} class="flex items-center p-6 space-x-2 rounded-b">
             <slot name="footer" />
           </Frame>
         {/if}

package/dist/modal/Modal.svelte.d.ts

@@ -1,5 +1,6 @@
 import { SvelteComponent } from "svelte";
 import type { Dismissable, SizeType } from '../types';
+import type { ModalPlacementType } from '../types';
 declare const __propDef: {
     props: import("svelte/elements").HTMLAnchorAttributes & {
         tag?: string | undefined;
@@ -7,8 +8,6 @@ declare const __propDef: {
         rounded?: boolean | undefined;
         border?: boolean | undefined;
         shadow?: boolean | undefined;
-        transition?: ((node: HTMLElement, params: any) => import("svelte/transition").TransitionConfig) | undefined;
-        params?: object | undefined;
         node?: HTMLElement | undefined;
         use?: import("svelte/action").Action<HTMLElement, any, Record<never, any>> | undefined;
         options?: object | undefined;
@@ -18,11 +17,15 @@ declare const __propDef: {
         open?: boolean | undefined;
         title?: string | undefined;
         size?: SizeType | undefined;
-        placement?: "top-left" | "top-center" | "top-right" | "center-left" | "center" | "center-right" | "bottom-left" | "bottom-center" | "bottom-right" | undefined;
+        placement?: ModalPlacementType | undefined;
         autoclose?: boolean | undefined;
         backdropClass?: string | undefined;
+        bodyClass?: string | undefined;
+        classBackdrop?: string | undefined;
+        classDialog?: string | undefined;
         defaultClass?: string | undefined;
         outsideclose?: boolean | undefined;
+        dialogClass?: string | undefined;
     };
     events: {
         wheel: WheelEvent;

package/dist/modal/Modal.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/modal/Modal.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAMD,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AA0JxD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEhD;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,eAAe,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CACtF"}
+{"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/modal/Modal.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAMD,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACxD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AA8JnD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEhD;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,eAAe,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CACtF"}