flowbite-svelte 0.9.1 → 0.9.4

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 {};

package/types.d.ts

@@ -1,23 +1,71 @@
+import type { SvelteComponent } from 'svelte';
 export declare type Colors = 'blue' | 'gray' | 'red' | 'yellow' | 'purple' | 'green' | 'indigo' | 'pink';
 export declare type Buttontypes = 'blue' | 'blue-outline' | 'dark' | 'dark-outline' | 'light' | 'green' | 'green-outline' | 'red' | 'red-outline' | 'yellow' | 'yellow-outline' | 'purple' | 'purple-outline';
 export declare type Buttonshadows = 'blue' | 'green' | 'cyan' | 'teal' | 'lime' | 'red' | 'pink' | 'purple';
 export declare type Gradientduotones = 'purple2blue' | 'cyan2blue' | 'green2blue' | 'purple2pink' | 'pink2orange' | 'teal2lime' | 'red2yellow';
 export declare type Textsize = 'text-xs' | 'text-sm' | 'text-base' | 'text-lg' | 'text-xl' | 'text-2xl' | 'text-3xl' | 'text-4xl';
 export interface ButtonGroupType {
-    name?: string;
-    link?: string;
+    name: string;
+    href?: string;
     rel?: string;
-    icon?: any;
+    icon?: typeof SvelteComponent;
 }
-export declare type CardButton = {
+export declare type CardButtonType = {
     textSize?: Textsize;
-    name?: string;
+    name: string;
     type?: Buttontypes;
-    link?: string;
+    href?: string;
     rel?: string;
     rounded?: boolean;
 };
-export declare type CardImg = {
+export declare type ImgType = {
     src: string;
     alt?: string;
 };
+export interface LinkType {
+    name: string;
+    href: string;
+    rel?: string;
+}
+export interface SiteType {
+    name: string;
+    href: string;
+    img?: string;
+}
+export interface SocialMediaType {
+    href: string;
+    icon: typeof SvelteComponent;
+}
+export declare type AlignType = 'text-center' | 'text-left' | 'text-right';
+export interface TabType {
+    name: string;
+    active: boolean;
+    href: string;
+    rel?: string;
+}
+export interface InteractiveTabType {
+    name: string;
+    id: number;
+    content: string;
+}
+export interface PillTabType {
+    name: string;
+    selected: boolean;
+    href: string;
+}
+export interface NavbarType {
+    id: number;
+    name: string;
+    href: string;
+    rel?: string;
+    child?: NavbarType[];
+}
+export interface DropdownLinkType {
+    name: string;
+    href: string;
+    rel?: string;
+}
+export interface SocialMediaLinkType {
+    parent: string;
+    children?: LinkType[];
+}