flowbite-svelte 0.26.0 → 0.26.3

package/utils/InformationCircle.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        size?: string;
+        color?: string;
+        variation?: 'solid' | 'outline';
+        ariaLabel?: string;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type InformationCircleProps = typeof __propDef.props;
+export declare type InformationCircleEvents = typeof __propDef.events;
+export declare type InformationCircleSlots = typeof __propDef.slots;
+export default class InformationCircle extends SvelteComponentTyped<InformationCircleProps, InformationCircleEvents, InformationCircleSlots> {
+}
+export {};

package/utils/UserCircle.svelte

@@ -0,0 +1,37 @@
+<script>export let size = '24';
+export let color = 'currentColor';
+export let variation = 'outline';
+let viewBox;
+let svgpath;
+let svgoutline = `<path d="M17.9815 18.7248C16.6121 16.9175 14.4424 15.75 12 15.75C9.55761 15.75 7.38789 16.9175 6.01846 18.7248M17.9815 18.7248C19.8335 17.0763 21 14.6744 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 14.6744 4.1665 17.0763 6.01846 18.7248M17.9815 18.7248C16.3915 20.1401 14.2962 21 12 21C9.70383 21 7.60851 20.1401 6.01846 18.7248M15 9.75C15 11.4069 13.6569 12.75 12 12.75C10.3431 12.75 9 11.4069 9 9.75C9 8.09315 10.3431 6.75 12 6.75C13.6569 6.75 15 8.09315 15 9.75Z" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> `;
+let svgsolid = `<path fill-rule="evenodd" clip-rule="evenodd" d="M18.6854 19.0971C20.5721 17.3191 21.75 14.7971 21.75 12C21.75 6.61522 17.3848 2.25 12 2.25C6.61522 2.25 2.25 6.61522 2.25 12C2.25 14.7971 3.42785 17.3191 5.31463 19.0971C7.06012 20.7419 9.41234 21.75 12 21.75C14.5877 21.75 16.9399 20.7419 18.6854 19.0971ZM6.14512 17.8123C7.51961 16.0978 9.63161 15 12 15C14.3684 15 16.4804 16.0978 17.8549 17.8123C16.3603 19.3178 14.289 20.25 12 20.25C9.711 20.25 7.63973 19.3178 6.14512 17.8123ZM15.75 9C15.75 11.0711 14.0711 12.75 12 12.75C9.92893 12.75 8.25 11.0711 8.25 9C8.25 6.92893 9.92893 5.25 12 5.25C14.0711 5.25 15.75 6.92893 15.75 9Z" fill="${color}"/> `;
+$: switch (variation) {
+    case 'outline':
+        svgpath = svgoutline;
+        viewBox = '0 0 24 24';
+        break;
+    case 'solid':
+        svgpath = svgsolid;
+        viewBox = '0 0 24 24';
+        break;
+    default:
+        svgpath = svgoutline;
+        viewBox = '0 0 24 24';
+}
+export let ariaLabel = 'user circle';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width={size}
+	height={size}
+	class={$$props.class}
+	{...$$restProps}
+	aria-label={ariaLabel}
+	fill="none"
+	{viewBox}
+	stroke-width="2"
+	on:click
+>
+	{@html svgpath}
+</svg>

package/utils/UserCircle.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        size?: string;
+        color?: string;
+        variation?: 'solid' | 'outline';
+        ariaLabel?: string;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type UserCircleProps = typeof __propDef.props;
+export declare type UserCircleEvents = typeof __propDef.events;
+export declare type UserCircleSlots = typeof __propDef.slots;
+export default class UserCircle extends SvelteComponentTyped<UserCircleProps, UserCircleEvents, UserCircleSlots> {
+}
+export {};

package/tabs/DefaultTabs.svelte

@@ -1,26 +0,0 @@
-<script>export let tabs;
-</script>
-
-<ul class="flex flex-wrap border-b border-gray-200 dark:border-gray-700">
-	{#each tabs as { name, active, href, rel }}
-		<li class="mr-2">
-			<a
-				{href}
-				{rel}
-				aria-current="page"
-				on:blur
-				on:click
-				on:focus
-				on:keydown
-				on:keypress
-				on:keyup
-				on:mouseenter
-				on:mouseleave
-				on:mouseover
-				class={active
-					? 'inline-block py-4 px-4 text-sm font-medium text-center text-blue-600 bg-gray-100 rounded-t-lg active dark:bg-gray-800 dark:text-blue-500'
-					: '  inline-block py-4 px-4 text-sm font-medium text-center text-gray-500 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300 '}
-				>{name}</a
-			>
-		</li>{/each}
-</ul>

package/tabs/DefaultTabs.svelte.d.ts

@@ -1,27 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { TabType } from '../types';
-declare const __propDef: {
-    props: {
-        tabs: TabType[];
-    };
-    events: {
-        blur: FocusEvent;
-        click: MouseEvent;
-        focus: FocusEvent;
-        keydown: KeyboardEvent;
-        keypress: KeyboardEvent;
-        keyup: KeyboardEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-        mouseover: MouseEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export declare type DefaultTabsProps = typeof __propDef.props;
-export declare type DefaultTabsEvents = typeof __propDef.events;
-export declare type DefaultTabsSlots = typeof __propDef.slots;
-export default class DefaultTabs extends SvelteComponentTyped<DefaultTabsProps, DefaultTabsEvents, DefaultTabsSlots> {
-}
-export {};

package/tabs/FullWidthTabs.svelte

@@ -1,42 +0,0 @@
-<script>export let tabs;
-export let tabLabel;
-</script>
-
-<div class="sm:hidden">
-	<label for="tabs" class="sr-only">{tabLabel}</label>
-	<select
-		id="tabs"
-		class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-	>
-		{#each tabs as { name }}
-			<option>{name}</option>
-		{/each}
-	</select>
-</div>
-<ul
-	class="hidden text-sm font-medium text-center text-gray-500 rounded-lg divide-x divide-gray-200 shadow sm:flex dark:divide-gray-700 dark:text-gray-400"
->
-	{#each tabs as { name, href, rel, active }, i}
-		<li class="w-full" data-id={i}>
-			<a
-				{href}
-				{rel}
-				class:rounded-l-lg={i === 0}
-				class:rounded-r-lg={i === tabs.length - 1}
-				class={active
-					? 'inline-block p-4 w-full text-gray-900 bg-gray-100 focus:ring-4 focus:ring-blue-300 active focus:outline-none dark:bg-gray-700 dark:text-white'
-					: 'inline-block p-4 w-full bg-white hover:text-gray-700 hover:bg-gray-50 focus:ring-4 focus:ring-blue-300 focus:outline-none dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700'}
-				aria-current="page"
-				on:blur
-				on:click
-				on:focus
-				on:keydown
-				on:keypress
-				on:keyup
-				on:mouseenter
-				on:mouseleave
-				on:mouseover>{name}</a
-			>
-		</li>
-	{/each}
-</ul>

package/tabs/FullWidthTabs.svelte.d.ts

@@ -1,28 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { TabType } from '../types';
-declare const __propDef: {
-    props: {
-        tabs: TabType[];
-        tabLabel: string;
-    };
-    events: {
-        blur: FocusEvent;
-        click: MouseEvent;
-        focus: FocusEvent;
-        keydown: KeyboardEvent;
-        keypress: KeyboardEvent;
-        keyup: KeyboardEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-        mouseover: MouseEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export declare type FullWidthTabsProps = typeof __propDef.props;
-export declare type FullWidthTabsEvents = typeof __propDef.events;
-export declare type FullWidthTabsSlots = typeof __propDef.slots;
-export default class FullWidthTabs extends SvelteComponentTyped<FullWidthTabsProps, FullWidthTabsEvents, FullWidthTabsSlots> {
-}
-export {};

package/tabs/IconTabs.svelte

@@ -1,33 +0,0 @@
-<script>export let tabs;
-export let iconClass = 'mr-2 w-5 h-5 text-gray-400 group-hover:text-gray-500 dark:text-gray-500 dark:group-hover:text-gray-300';
-</script>
-
-<div class="border-b border-gray-200 dark:border-gray-700">
-	<ul
-		class="flex flex-wrap -mb-px text-sm font-medium text-center text-gray-500 dark:text-gray-400"
-	>
-		{#each tabs as { name, active, href, rel, icon, iconSize }}
-			<li class="mr-2">
-				<a
-					{href}
-					{rel}
-					class={active
-						? 'inline-flex p-4 text-blue-600 rounded-t-lg border-b-2 border-blue-600 active dark:text-blue-500 dark:border-blue-500 group'
-						: '  inline-flex p-4 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 group '}
-					on:blur
-					on:click
-					on:focus
-					on:keydown
-					on:keypress
-					on:keyup
-					on:mouseenter
-					on:mouseleave
-					on:mouseover
-				>
-					<svelte:component this={icon} size={iconSize} class={iconClass} />
-					{name}
-				</a>
-			</li>
-		{/each}
-	</ul>
-</div>

package/tabs/IconTabs.svelte.d.ts

@@ -1,28 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { IconTabType } from '../types';
-declare const __propDef: {
-    props: {
-        tabs: IconTabType[];
-        iconClass?: string;
-    };
-    events: {
-        blur: FocusEvent;
-        click: MouseEvent;
-        focus: FocusEvent;
-        keydown: KeyboardEvent;
-        keypress: KeyboardEvent;
-        keyup: KeyboardEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-        mouseover: MouseEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export declare type IconTabsProps = typeof __propDef.props;
-export declare type IconTabsEvents = typeof __propDef.events;
-export declare type IconTabsSlots = typeof __propDef.slots;
-export default class IconTabs extends SvelteComponentTyped<IconTabsProps, IconTabsEvents, IconTabsSlots> {
-}
-export {};

package/tabs/InteractiveTabHead.svelte

@@ -1,65 +0,0 @@
-<script>import { tabStore } from './tabStores';
-import classNames from 'classnames';
-export let tabs;
-export let tabId = 'myTab';
-export let activeTabValue = 1;
-export let disabled = false;
-export let divClass = 'mb-4 border-b border-gray-200';
-export let ulClass = 'flex flex-wrap -mb-px text-sm font-medium text-center';
-export let liClass = 'mr-2';
-export let btnClass = 'inline-block py-4 px-4 text-sm font-medium text-center rounded-t-lg border-b-2 border-transparent';
-export let activeClass = 'text-blue-600 hover:text-blue-600 dark:text-blue-500 dark:hover:text-blue-400 border-blue-600 dark:border-blue-500';
-export let inactiveClasses = 'text-gray-500 hover:text-gray-600 dark:text-gray-400 border-gray-100 hover:border-gray-300 dark:border-gray-700 dark:hover:text-gray-300';
-const handleClick = (tabValue) => () => {
-    tabStore.update((n) => (n = tabValue));
-    activeTabValue = tabValue;
-};
-</script>
-
-<!--
-@component
-Header part of Interactive tab component. Use with TabContent.
-
-@param tabs: TabHeadType[];
-@param tabId = 'myTab';
-
-- Usage:
-
-  ```tsx
-  <InteractiveHead>
-    <TabContent>
-      Some HTML|Component|string
-    </TabContent>
-  </InteractiveHead>
-  ```
-  -->
-<div class={divClass}>
-	<ul class={ulClass} id={tabId} data-tabs-toggle="#myTabContent" role="tablist">
-		{#each tabs as { name, id }}
-			<li class={liClass} role="presentation">
-				<button
-					on:click={handleClick(id)}
-					class={classNames(btnClass, activeTabValue === id ? activeClass : inactiveClasses)}
-					id="{name}-tab"
-					data-tabs-target="#{name}"
-					type="button"
-					role="tab"
-					aria-controls={name}
-					aria-selected="false"
-					on:blur
-					on:click
-					on:focus
-					on:keydown
-					on:keypress
-					on:keyup
-					on:mouseenter
-					on:mouseleave
-					on:mouseover
-					{disabled}>{name}</button
-				>
-			</li>
-		{/each}
-	</ul>
-</div>
-
-<slot />

package/tabs/InteractiveTabHead.svelte.d.ts

@@ -1,54 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { TabHeadType } from '../types';
-declare const __propDef: {
-    props: {
-        tabs: TabHeadType[];
-        tabId?: string;
-        activeTabValue?: number;
-        disabled?: boolean;
-        divClass?: string;
-        ulClass?: string;
-        liClass?: string;
-        btnClass?: string;
-        activeClass?: string;
-        inactiveClasses?: string;
-    };
-    events: {
-        blur: FocusEvent;
-        click: MouseEvent;
-        focus: FocusEvent;
-        keydown: KeyboardEvent;
-        keypress: KeyboardEvent;
-        keyup: KeyboardEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-        mouseover: MouseEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export declare type InteractiveTabHeadProps = typeof __propDef.props;
-export declare type InteractiveTabHeadEvents = typeof __propDef.events;
-export declare type InteractiveTabHeadSlots = typeof __propDef.slots;
-/**
- * Header part of Interactive tab component. Use with TabContent.
- *
- * @param tabs: TabHeadType[];
- * @param tabId = 'myTab';
- *
- * - Usage:
- *
- * ```tsx
- * <InteractiveHead>
- *   <TabContent>
- *     Some HTML|Component|string
- *   </TabContent>
- * </InteractiveHead>
- * ```
- */
-export default class InteractiveTabHead extends SvelteComponentTyped<InteractiveTabHeadProps, InteractiveTabHeadEvents, InteractiveTabHeadSlots> {
-}
-export {};

package/tabs/InteractiveTabs.svelte

@@ -1,56 +0,0 @@
-<script>import classNames from 'classnames';
-export let tabId = 'myTab';
-export let activeTabValue = 1;
-export let tabs;
-export let btnClass = 'inline-block py-4 px-4 text-sm font-medium text-center rounded-t-lg border-b-2 border-transparent';
-export let activeClass = 'text-blue-600 hover:text-blue-600 dark:text-blue-500 dark:hover:text-blue-400 border-blue-600 dark:border-blue-500';
-export let inactiveClasses = 'text-gray-500 hover:text-gray-600 dark:text-gray-400 border-gray-100 hover:border-gray-300 dark:border-gray-700 dark:hover:text-gray-300';
-const handleClick = (tabValue) => () => (activeTabValue = tabValue);
-</script>
-
-<div class="mb-4 border-b border-gray-200 dark:border-gray-700">
-	<ul class="flex flex-wrap -mb-px" id={tabId} role="tablist">
-		{#each tabs as { name, id, disabled }}
-			<li class="mr-2" role="presentation">
-				<button
-					on:click={handleClick(id)}
-					on:blur
-					on:click
-					on:focus
-					on:keydown
-					on:keypress
-					on:keyup
-					on:mouseenter
-					on:mouseleave
-					on:mouseover
-					class={classNames(btnClass, activeTabValue === id ? activeClass : inactiveClasses)}
-					id="{name}-tab"
-					type="button"
-					role="tab"
-					aria-controls={name}
-					{disabled}>{name}</button
-				>
-			</li>
-		{/each}
-	</ul>
-</div>
-<div id="{tabId}Content">
-	{#each tabs as { name, content, id }}
-		{#if activeTabValue === id}
-			<div
-				class="p-4 bg-gray-50 rounded-lg dark:bg-gray-800"
-				id={name}
-				role="tabpanel"
-				aria-labelledby="{name}-tab"
-			>
-				{#if typeof content === 'string'}
-					<p class="text-sm text-gray-500 dark:text-gray-400">
-						{@html content}
-					</p>
-				{:else}
-					<svelte:component this={content} />
-				{/if}
-			</div>
-		{/if}
-	{/each}
-</div>

package/tabs/InteractiveTabs.svelte.d.ts

@@ -1,32 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { InteractiveTabType } from '../types';
-declare const __propDef: {
-    props: {
-        tabId?: string;
-        activeTabValue?: number;
-        tabs: InteractiveTabType[];
-        btnClass?: string;
-        activeClass?: string;
-        inactiveClasses?: string;
-    };
-    events: {
-        blur: FocusEvent;
-        click: MouseEvent;
-        focus: FocusEvent;
-        keydown: KeyboardEvent;
-        keypress: KeyboardEvent;
-        keyup: KeyboardEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-        mouseover: MouseEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export declare type InteractiveTabsProps = typeof __propDef.props;
-export declare type InteractiveTabsEvents = typeof __propDef.events;
-export declare type InteractiveTabsSlots = typeof __propDef.slots;
-export default class InteractiveTabs extends SvelteComponentTyped<InteractiveTabsProps, InteractiveTabsEvents, InteractiveTabsSlots> {
-}
-export {};

package/tabs/PillTabs.svelte

@@ -1,25 +0,0 @@
-<script>export let tabs;
-</script>
-
-<ul class="flex flex-wrap">
-	{#each tabs as { name, selected, href }}
-		<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}
-				rel="external"
-				on:blur
-				on:click
-				on:focus
-				on:keydown
-				on:keypress
-				on:keyup
-				on:mouseenter
-				on:mouseleave
-				on:mouseover>{name}</a
-			>
-		</li>
-	{/each}
-</ul>

package/tabs/PillTabs.svelte.d.ts

@@ -1,27 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { PillTabType } from '../types';
-declare const __propDef: {
-    props: {
-        tabs: PillTabType[];
-    };
-    events: {
-        blur: FocusEvent;
-        click: MouseEvent;
-        focus: FocusEvent;
-        keydown: KeyboardEvent;
-        keypress: KeyboardEvent;
-        keyup: KeyboardEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-        mouseover: MouseEvent;
-    } & {
-        [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/tabs/TabContent.svelte

@@ -1,32 +0,0 @@
-<script>import { tabStore } from './tabStores';
-export let divClass = 'p-4 rounded-lg dark:bg-gray-800';
-export let tab;
-let activeTabValue;
-tabStore.subscribe((value) => {
-    activeTabValue = value;
-});
-</script>
-
-<!--
-@component
-Content part of Interactive tab component. Use with InteractiveHead.
-
-- let tabId = 'myTab';
-- let tabs: TabHeadType;
-- let divClass: string;
-- Usage:
-
-  ```tsx
-  <InteractiveHead>
-    <TabContent>
-      Some HTML|Component|string
-    </TabContent>
-  </InteractiveHead>
-  ```
--->
-
-{#if activeTabValue === tab.id}
-	<div class={divClass} id="{tab.id}Content" role="tabpanel" aria-labelledby="{tab.name}-tab">
-		<slot />
-	</div>
-{/if}

package/tabs/TabContent.svelte.d.ts

@@ -1,36 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { TabHeadType } from '../types';
-declare const __propDef: {
-    props: {
-        divClass?: string;
-        tab: TabHeadType;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export declare type TabContentProps = typeof __propDef.props;
-export declare type TabContentEvents = typeof __propDef.events;
-export declare type TabContentSlots = typeof __propDef.slots;
-/**
- * Content part of Interactive tab component. Use with InteractiveHead.
- *
- * - let tabId = 'myTab';
- * - let tabs: TabHeadType;
- * - let divClass: string;
- * - Usage:
- *
- * ```tsx
- * <InteractiveHead>
- *   <TabContent>
- *     Some HTML|Component|string
- *   </TabContent>
- * </InteractiveHead>
- * ```
- */
-export default class TabContent extends SvelteComponentTyped<TabContentProps, TabContentEvents, TabContentSlots> {
-}
-export {};