flowbite-svelte 0.8.8 → 0.9.2

package/tabs/PillTabs.svelte

@@ -1,38 +1,16 @@
-<script>
-  export let tabs = [
-    {
-      name: "Profile",
-      selected: true,
-      link: "/#",
-    },
-    {
-      name: "Dashboard",
-      selected: false,
-      link: "/#",
-    },
-    {
-      name: "Settings",
-      selected: false,
-      link: "/#",
-    },
-    {
-      name: "Contacts",
-      selected: false,
-      link: "/#",
-    },
-  ];
+<script >export let tabs;
 </script>
 
 <ul class="flex flex-wrap">
-  {#each tabs as { name, selected, link }}
-    <li class="mr-2">
-      <a
-        class="{selected
-          ? 'active inline-block py-3 px-4 text-sm font-medium text-center text-white bg-blue-600 rounded-lg'
-          : 'inline-block py-3 px-4 text-sm font-medium text-center text-gray-500 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-white'} "
-        href={link}
-        rel="external">{name}</a
-      >
-    </li>
-  {/each}
+	{#each tabs as { name, selected, link }}
+		<li class="mr-2">
+			<a
+				class="{selected
+					? 'active inline-block py-3 px-4 text-sm font-medium text-center text-white bg-blue-600 rounded-lg'
+					: 'inline-block py-3 px-4 text-sm font-medium text-center text-gray-500 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-white'} "
+				href={link}
+				rel="external">{name}</a
+			>
+		</li>
+	{/each}
 </ul>

package/tabs/PillTabs.svelte.d.ts

@@ -1,31 +1,17 @@
-/** @typedef {typeof __propDef.props}  PillTabsProps */
-/** @typedef {typeof __propDef.events}  PillTabsEvents */
-/** @typedef {typeof __propDef.slots}  PillTabsSlots */
-export default class PillTabs extends SvelteComponentTyped<{
-    tabs?: {
-        name: string;
-        selected: boolean;
-        link: string;
-    }[];
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type PillTabsProps = typeof __propDef.props;
-export type PillTabsEvents = typeof __propDef.events;
-export type PillTabsSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
+import type { PillTabType } from '../types';
 declare const __propDef: {
     props: {
-        tabs?: {
-            name: string;
-            selected: boolean;
-            link: string;
-        }[];
+        tabs: PillTabType[];
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
+export declare type PillTabsProps = typeof __propDef.props;
+export declare type PillTabsEvents = typeof __propDef.events;
+export declare type PillTabsSlots = typeof __propDef.slots;
+export default class PillTabs extends SvelteComponentTyped<PillTabsProps, PillTabsEvents, PillTabsSlots> {
+}
 export {};

package/tooltips/LightTooltip.svelte

@@ -1,122 +1,120 @@
-<script>
-  export let tip = "";
-  export let top = false;
-  export let right = false;
-  export let bottom = false;
-  export let left = false;
-  export let active = false;
-  // export let bgColor = "";
+<script >export let tip;
+export let top = false;
+export let right = false;
+export let bottom = false;
+export let left = false;
+export let active = false;
 </script>
 
 <div class="tooltip-wrapper">
-  <span class="tooltip-slot">
-    <slot />
-  </span>
-  <div
-    class="inline-block absolute invisible z-10 py-2 px-3 bg-white rounded-lg border border-gray-200 shadow-sm opacity-0 tooltip"
-    class:active
-    class:left
-    class:right
-    class:bottom
-    class:top
-  >
-    {#if tip}
-      <div class="text-sm font-medium text-gray-900">{tip}</div>
-    {:else}
-      <slot name="custom-tip" />
-    {/if}
-  </div>
+	<span class="tooltip-slot">
+		<slot />
+	</span>
+	<div
+		class="inline-block absolute invisible z-10 py-2 px-3 bg-white rounded-lg border border-gray-200 shadow-sm opacity-0 tooltip"
+		class:active
+		class:left
+		class:right
+		class:bottom
+		class:top
+	>
+		{#if tip}
+			<div class="text-sm font-medium text-gray-900">{tip}</div>
+		{:else}
+			<slot name="custom-tip" />
+		{/if}
+	</div>
 </div>
 
 <style>
-  .tooltip-wrapper {
-    position: relative;
-    display: inline-block;
-  }
-  .tooltip {
-    position: absolute;
-    font-family: inherit;
-    display: inline-block;
-    white-space: nowrap;
-    color: inherit;
-    opacity: 0;
-    visibility: hidden;
-    transition: opacity 150ms, visibility 150ms;
-  }
+	.tooltip-wrapper {
+		position: relative;
+		display: inline-block;
+	}
+	.tooltip {
+		position: absolute;
+		font-family: inherit;
+		display: inline-block;
+		white-space: nowrap;
+		color: inherit;
+		opacity: 0;
+		visibility: hidden;
+		transition: opacity 150ms, visibility 150ms;
+	}
 
-  .tooltip.top:after {
-    content: "";
-    position: absolute;
-    top: 100%;
-    left: 50%;
-    margin-left: -10px;
-    border-width: 5px;
-    border-style: solid;
-    border-color: #ddd transparent transparent transparent;
-  }
-  .tooltip.bottom::after {
-    content: "";
-    position: absolute;
-    top: -30%;
-    left: 50%;
-    margin-left: -10px;
-    border-width: 5px;
-    border-style: solid;
-    border-color: transparent transparent #ddd transparent;
-  }
-  .tooltip.right::after {
-    content: "";
-    position: absolute;
-    /* vertically center */
-    top: 50%;
-    transform: translateY(-50%);
-    /* position tooltip correctly */
-    right: 100%;
-    margin-left: -5px;
+	.tooltip.top:after {
+		content: '';
+		position: absolute;
+		top: 100%;
+		left: 50%;
+		margin-left: -10px;
+		border-width: 5px;
+		border-style: solid;
+		border-color: #ddd transparent transparent transparent;
+	}
+	.tooltip.bottom::after {
+		content: '';
+		position: absolute;
+		top: -30%;
+		left: 50%;
+		margin-left: -10px;
+		border-width: 5px;
+		border-style: solid;
+		border-color: transparent transparent #ddd transparent;
+	}
+	.tooltip.right::after {
+		content: '';
+		position: absolute;
+		/* vertically center */
+		top: 50%;
+		transform: translateY(-50%);
+		/* position tooltip correctly */
+		right: 100%;
+		margin-left: -5px;
 
-    border-width: 5px;
-    border-style: solid;
-    border-color: transparent #ddd transparent transparent;
-  }
-  .tooltip.left::after {
-    content: "";
-    position: absolute;
-    /* vertically center */
-    top: 50%;
-    transform: translateY(-50%);
-    /* position tooltip correctly */
-    left: 100%;
-    /* margin-left: -5px; */
-    border-width: 5px;
-    border-style: solid;
-    border-color: transparent transparent transparent #ddd;
-  }
-  .tooltip.top {
-    left: 50%;
-    transform: translate(-50%, -100%);
-    margin-top: -8px;
-  }
-  .tooltip.bottom {
-    left: 50%;
-    bottom: 0px;
-    transform: translate(-50%, 100%);
-    /* margin-bottom: -px; */
-  }
-  .tooltip.left {
-    left: 0;
-    transform: translateX(-100%);
-    margin-left: -8px;
-  }
-  .tooltip.right {
-    right: 0;
-    transform: translateX(100%);
-    margin-right: 0px;
-  }
-  .tooltip.active {
-    opacity: 1;
-    visibility: initial;
-  }
-  .tooltip-slot:hover + .tooltip {
-    opacity: 1;
-    visibility: initial;
-  }</style>
+		border-width: 5px;
+		border-style: solid;
+		border-color: transparent #ddd transparent transparent;
+	}
+	.tooltip.left::after {
+		content: '';
+		position: absolute;
+		/* vertically center */
+		top: 50%;
+		transform: translateY(-50%);
+		/* position tooltip correctly */
+		left: 100%;
+		/* margin-left: -5px; */
+		border-width: 5px;
+		border-style: solid;
+		border-color: transparent transparent transparent #ddd;
+	}
+	.tooltip.top {
+		left: 50%;
+		transform: translate(-50%, -100%);
+		margin-top: -8px;
+	}
+	.tooltip.bottom {
+		left: 50%;
+		bottom: 0px;
+		transform: translate(-50%, 100%);
+		/* margin-bottom: -px; */
+	}
+	.tooltip.left {
+		left: 0;
+		transform: translateX(-100%);
+		margin-left: -8px;
+	}
+	.tooltip.right {
+		right: 0;
+		transform: translateX(100%);
+		margin-right: 0px;
+	}
+	.tooltip.active {
+		opacity: 1;
+		visibility: initial;
+	}
+	.tooltip-slot:hover + .tooltip {
+		opacity: 1;
+		visibility: initial;
+	}</style>

package/tooltips/LightTooltip.svelte.d.ts

@@ -1,27 +1,7 @@
-/** @typedef {typeof __propDef.props}  LightTooltipProps */
-/** @typedef {typeof __propDef.events}  LightTooltipEvents */
-/** @typedef {typeof __propDef.slots}  LightTooltipSlots */
-export default class LightTooltip extends SvelteComponentTyped<{
-    tip?: string;
-    top?: boolean;
-    right?: boolean;
-    bottom?: boolean;
-    left?: boolean;
-    active?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-    'custom-tip': {};
-}> {
-}
-export type LightTooltipProps = typeof __propDef.props;
-export type LightTooltipEvents = typeof __propDef.events;
-export type LightTooltipSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        tip?: string;
+        tip: string;
         top?: boolean;
         right?: boolean;
         bottom?: boolean;
@@ -36,4 +16,9 @@ declare const __propDef: {
         'custom-tip': {};
     };
 };
+export declare type LightTooltipProps = typeof __propDef.props;
+export declare type LightTooltipEvents = typeof __propDef.events;
+export declare type LightTooltipSlots = typeof __propDef.slots;
+export default class LightTooltip extends SvelteComponentTyped<LightTooltipProps, LightTooltipEvents, LightTooltipSlots> {
+}
 export {};

package/tooltips/Tooltip.svelte

@@ -1,122 +1,121 @@
-<script>
-  export let tip = "";
-  export let top = false;
-  export let right = false;
-  export let bottom = false;
-  export let left = false;
-  export let active = false;
-  // export let bgColor = "";
+<script >export let tip;
+export let top = false;
+export let right = false;
+export let bottom = false;
+export let left = false;
+export let active = false;
+// export let bgColor = "";
 </script>
 
 <div class="tooltip-wrapper">
-  <span class="tooltip-slot">
-    <slot />
-  </span>
-  <div
-    class="inline-block absolute invisible z-10 py-2 px-3 bg-gray-900 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip dark:bg-gray-700"
-    class:active
-    class:left
-    class:right
-    class:bottom
-    class:top
-  >
-    {#if tip}
-      <div class="text-sm font-medium text-white ">{tip}</div>
-    {:else}
-      <slot name="custom-tip" />
-    {/if}
-  </div>
+	<span class="tooltip-slot">
+		<slot />
+	</span>
+	<div
+		class="inline-block absolute invisible z-10 py-2 px-3 bg-gray-900 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip dark:bg-gray-700"
+		class:active
+		class:left
+		class:right
+		class:bottom
+		class:top
+	>
+		{#if tip}
+			<div class="text-sm font-medium text-white ">{tip}</div>
+		{:else}
+			<slot name="custom-tip" />
+		{/if}
+	</div>
 </div>
 
 <style>
-  .tooltip-wrapper {
-    position: relative;
-    display: inline-block;
-  }
-  .tooltip {
-    position: absolute;
-    font-family: inherit;
-    display: inline-block;
-    white-space: nowrap;
-    color: inherit;
-    opacity: 0;
-    visibility: hidden;
-    transition: opacity 150ms, visibility 150ms;
-  }
+	.tooltip-wrapper {
+		position: relative;
+		display: inline-block;
+	}
+	.tooltip {
+		position: absolute;
+		font-family: inherit;
+		display: inline-block;
+		white-space: nowrap;
+		color: inherit;
+		opacity: 0;
+		visibility: hidden;
+		transition: opacity 150ms, visibility 150ms;
+	}
 
-  .tooltip.top:after {
-    content: "";
-    position: absolute;
-    top: 100%;
-    left: 50%;
-    margin-left: -10px;
-    border-width: 5px;
-    border-style: solid;
-    border-color: rgb(55 65 81) transparent transparent transparent;
-  }
-  .tooltip.bottom::after {
-    content: "";
-    position: absolute;
-    top: -30%;
-    left: 50%;
-    margin-left: -10px;
-    border-width: 5px;
-    border-style: solid;
-    border-color: transparent transparent rgb(55 65 81) transparent;
-  }
-  .tooltip.right::after {
-    content: "";
-    position: absolute;
-    /* vertically center */
-    top: 50%;
-    transform: translateY(-50%);
-    /* position tooltip correctly */
-    right: 100%;
-    margin-left: -5px;
+	.tooltip.top:after {
+		content: '';
+		position: absolute;
+		top: 100%;
+		left: 50%;
+		margin-left: -10px;
+		border-width: 5px;
+		border-style: solid;
+		border-color: rgb(55 65 81) transparent transparent transparent;
+	}
+	.tooltip.bottom::after {
+		content: '';
+		position: absolute;
+		top: -30%;
+		left: 50%;
+		margin-left: -10px;
+		border-width: 5px;
+		border-style: solid;
+		border-color: transparent transparent rgb(55 65 81) transparent;
+	}
+	.tooltip.right::after {
+		content: '';
+		position: absolute;
+		/* vertically center */
+		top: 50%;
+		transform: translateY(-50%);
+		/* position tooltip correctly */
+		right: 100%;
+		margin-left: -5px;
 
-    border-width: 5px;
-    border-style: solid;
-    border-color: transparent rgb(55 65 81) transparent transparent;
-  }
-  .tooltip.left::after {
-    content: "";
-    position: absolute;
-    /* vertically center */
-    top: 50%;
-    transform: translateY(-50%);
-    /* position tooltip correctly */
-    left: 100%;
-    /* margin-left: -5px; */
-    border-width: 5px;
-    border-style: solid;
-    border-color: transparent transparent transparent rgb(55 65 81);
-  }
-  .tooltip.top {
-    left: 50%;
-    transform: translate(-50%, -100%);
-    margin-top: -8px;
-  }
-  .tooltip.bottom {
-    left: 50%;
-    bottom: 0px;
-    transform: translate(-50%, 100%);
-    /* margin-bottom: -px; */
-  }
-  .tooltip.left {
-    left: 0;
-    transform: translateX(-100%);
-    margin-left: -8px;
-  }
-  .tooltip.right {
-    right: 0;
-    transform: translateX(100%);
-    margin-right: 0px;
-  }
-  .tooltip.active {
-    opacity: 1;
-    visibility: initial;
-  }
-  .tooltip-slot:hover + .tooltip {
-    opacity: 1;
-    visibility: initial;
-  }</style>
+		border-width: 5px;
+		border-style: solid;
+		border-color: transparent rgb(55 65 81) transparent transparent;
+	}
+	.tooltip.left::after {
+		content: '';
+		position: absolute;
+		/* vertically center */
+		top: 50%;
+		transform: translateY(-50%);
+		/* position tooltip correctly */
+		left: 100%;
+		/* margin-left: -5px; */
+		border-width: 5px;
+		border-style: solid;
+		border-color: transparent transparent transparent rgb(55 65 81);
+	}
+	.tooltip.top {
+		left: 50%;
+		transform: translate(-50%, -100%);
+		margin-top: -8px;
+	}
+	.tooltip.bottom {
+		left: 50%;
+		bottom: 0px;
+		transform: translate(-50%, 100%);
+		/* margin-bottom: -px; */
+	}
+	.tooltip.left {
+		left: 0;
+		transform: translateX(-100%);
+		margin-left: -8px;
+	}
+	.tooltip.right {
+		right: 0;
+		transform: translateX(100%);
+		margin-right: 0px;
+	}
+	.tooltip.active {
+		opacity: 1;
+		visibility: initial;
+	}
+	.tooltip-slot:hover + .tooltip {
+		opacity: 1;
+		visibility: initial;
+	}</style>

package/tooltips/Tooltip.svelte.d.ts

@@ -1,27 +1,7 @@
-/** @typedef {typeof __propDef.props}  TooltipProps */
-/** @typedef {typeof __propDef.events}  TooltipEvents */
-/** @typedef {typeof __propDef.slots}  TooltipSlots */
-export default class Tooltip extends SvelteComponentTyped<{
-    tip?: string;
-    top?: boolean;
-    right?: boolean;
-    bottom?: boolean;
-    left?: boolean;
-    active?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-    'custom-tip': {};
-}> {
-}
-export type TooltipProps = typeof __propDef.props;
-export type TooltipEvents = typeof __propDef.events;
-export type TooltipSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        tip?: string;
+        tip: string;
         top?: boolean;
         right?: boolean;
         bottom?: boolean;
@@ -36,4 +16,9 @@ declare const __propDef: {
         'custom-tip': {};
     };
 };
+export declare type TooltipProps = typeof __propDef.props;
+export declare type TooltipEvents = typeof __propDef.events;
+export declare type TooltipSlots = typeof __propDef.slots;
+export default class Tooltip extends SvelteComponentTyped<TooltipProps, TooltipEvents, TooltipSlots> {
+}
 export {};