flowbite-svelte 0.27.13 → 0.27.15

package/accordions/Accordion.svelte

@@ -1,24 +0,0 @@
-<script context="module">import { writable } from 'svelte/store';
-</script>
-
-<script>import Frame from '../utils/Frame.svelte';
-import classNames from 'classnames';
-import { setContext } from 'svelte';
-export let multiple = false;
-export let flush = false;
-export let activeClasses = 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800';
-export let inactiveClasses = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 hover:dark:bg-gray-800';
-export let defaultClass = 'text-gray-500 dark:text-gray-400';
-const ctx = {
-    flush,
-    activeClasses,
-    inactiveClasses,
-    selected: multiple ? undefined : writable()
-};
-setContext('ctx', ctx);
-let frameClass = classNames(defaultClass, 'divide-y divide-gray-200 dark:divide-gray-700', 'border-gray-200 dark:border-gray-700', 'rounded-t-xl', $$props.class);
-</script>
-
-<Frame class={frameClass} color="none" border={!flush}>
-  <slot />
-</Frame>

package/accordions/Accordion.svelte.d.ts

@@ -1,30 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import { type Writable } from 'svelte/store';
-export interface AccordionCtxType {
-    flush: boolean;
-    activeClasses: string;
-    inactiveClasses: string;
-    selected?: Writable<object>;
-}
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        multiple?: boolean | undefined;
-        flush?: boolean | undefined;
-        activeClasses?: string | undefined;
-        inactiveClasses?: string | undefined;
-        defaultClass?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export declare type AccordionProps = typeof __propDef.props;
-export declare type AccordionEvents = typeof __propDef.events;
-export declare type AccordionSlots = typeof __propDef.slots;
-export default class Accordion extends SvelteComponentTyped<AccordionProps, AccordionEvents, AccordionSlots> {
-}
-export {};

package/accordions/AccordionItem.svelte

@@ -1,44 +0,0 @@
-<script>import ChevronDown from '../utils/ChevronDown.svelte';
-import ChevronUp from '../utils/ChevronUp.svelte';
-import classNames from 'classnames';
-import { getContext, onMount } from 'svelte';
-import { writable } from 'svelte/store';
-import { slide } from 'svelte/transition';
-export let open = false;
-export let activeClasses = undefined;
-export let inactiveClasses = undefined;
-export let defaultClass = 'flex items-center justify-between w-full font-medium text-left group-first:rounded-t-xl';
-const ctx = getContext('ctx') ?? {};
-// single selection
-const self = {};
-const selected = ctx.selected ?? writable();
-let _open = open;
-open = false;
-onMount(() => {
-    if (_open)
-        $selected = self;
-    // this will trigger unsubscribe on destroy
-    return selected.subscribe((x) => (open = x === self));
-});
-const handleToggle = (e) => selected.set(open ? {} : self);
-let buttonClass;
-$: buttonClass = classNames(defaultClass, ctx.flush ? 'py-5' : 'p-5', open && (ctx.flush ? 'text-gray-900 dark:text-white' : activeClasses || ctx.activeClasses), !open && (ctx.flush ? 'text-gray-500 dark:text-gray-400' : inactiveClasses || ctx.inactiveClasses), $$props.class);
-</script>
-
-<h2 aria-expanded={open} class="group">
-  <button on:click={handleToggle} type="button" class={buttonClass}>
-    <slot name="header" />
-    {#if open}
-      <slot name="arrowup"><ChevronUp /></slot>
-    {:else}
-      <slot name="arrowdown"><ChevronDown /></slot>
-    {/if}
-  </button>
-</h2>
-{#if open}
-  <div transition:slide={{ duration: 500 }}>
-    <div class={ctx.flush ? 'py-5' : 'p-5'}>
-      <slot />
-    </div>
-  </div>
-{/if}

package/accordions/AccordionItem.svelte.d.ts

@@ -1,25 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        open?: boolean | undefined;
-        activeClasses?: string | undefined;
-        inactiveClasses?: string | undefined;
-        defaultClass?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        header: {};
-        arrowup: {};
-        arrowdown: {};
-        default: {};
-    };
-};
-export declare type AccordionItemProps = typeof __propDef.props;
-export declare type AccordionItemEvents = typeof __propDef.events;
-export declare type AccordionItemSlots = typeof __propDef.slots;
-export default class AccordionItem extends SvelteComponentTyped<AccordionItemProps, AccordionItemEvents, AccordionItemSlots> {
-}
-export {};

package/alerts/Alert.svelte

@@ -1,47 +0,0 @@
-<script>import classNames from 'classnames';
-import { createEventDispatcher } from 'svelte';
-import CloseButton from '../utils/CloseButton.svelte';
-import Frame from '../utils/Frame.svelte';
-const dispatch = createEventDispatcher();
-export let dismissable = false;
-export let accent = false;
-let hidden = false;
-const handleHide = () => {
-    hidden = !hidden;
-    dispatch('close'); // preffered name
-};
-let divClass;
-$: divClass = classNames('p-4 text-sm', accent && 'border-t-4 ', hidden && 'hidden', $$props.class);
-$: {
-    // set default values
-    $$restProps.color = $$restProps.color ?? 'blue';
-    $$restProps.rounded = $$restProps.rounded ?? !accent;
-}
-</script>
-
-<Frame {...$$restProps} class={divClass} role="alert">
-  <div class="flex items-center">
-    {#if $$slots.icon}
-      <slot name="icon" />
-    {/if}
-    <div class:ml-3={$$slots.icon}>
-      <slot />
-    </div>
-
-    {#if dismissable}
-      <CloseButton
-        class="-mx-1.5 -my-1.5"
-        color={$$restProps.color}
-        on:click={handleHide}
-        on:click
-        on:change
-        on:keydown
-        on:keyup
-        on:focus
-        on:blur
-        on:mouseenter
-        on:mouseleave />
-    {/if}
-  </div>
-  <slot name="extra" />
-</Frame>

package/alerts/Alert.svelte.d.ts

@@ -1,32 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        dismissable?: boolean | undefined;
-        accent?: boolean | undefined;
-    };
-    events: {
-        click: MouseEvent;
-        change: CustomEvent<any>;
-        keydown: CustomEvent<any>;
-        keyup: CustomEvent<any>;
-        focus: CustomEvent<any>;
-        blur: CustomEvent<any>;
-        mouseenter: CustomEvent<any>;
-        mouseleave: CustomEvent<any>;
-        close: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        icon: {};
-        default: {};
-        extra: {};
-    };
-};
-export declare type AlertProps = typeof __propDef.props;
-export declare type AlertEvents = typeof __propDef.events;
-export declare type AlertSlots = typeof __propDef.slots;
-export default class Alert extends SvelteComponentTyped<AlertProps, AlertEvents, AlertSlots> {
-}
-export {};

package/avatar/Avatar.svelte

@@ -1,39 +0,0 @@
-<script>import classNames from 'classnames';
-import AvatarPlaceholder from './Placeholder.svelte';
-import Dot from './Dot.svelte';
-export let src = '';
-export let href = '#';
-export let rounded = false;
-export let border = false;
-export let stacked = false;
-export let dot = { top: false, color: 'bg-gray-300 dark:bg-gray-500' };
-export let alt = '';
-export let size = 'md';
-const sizes = {
-    xs: 'w-6 h-6',
-    sm: 'w-8 h-8',
-    md: 'w-10 h-10',
-    lg: 'w-20 h-20',
-    xl: 'w-36 h-36'
-};
-let avatarClass;
-$: avatarClass = classNames(rounded ? 'rounded' : 'rounded-full', border && 'p-1 ring-2 ring-gray-300 dark:ring-gray-500', sizes[size], stacked && 'border-2 -ml-4 border-white dark:border-gray-800', 'bg-gray-100 dark:bg-gray-600 text-gray-600 dark:text-gray-300', $$props.class);
-</script>
-
-<Dot show={$$props.dot} {rounded} {...dot} {size} class={sizes[size]}>
-  {#if src}
-    <img {alt} {src} {...$$restProps} class={avatarClass} />
-  {:else if $$slots.default}
-    <svelte:element
-      this={href ? 'a' : 'div'}
-      {href}
-      {...$$restProps}
-      class="flex justify-center items-center text-xs font-medium {avatarClass}">
-      <slot />
-    </svelte:element>
-  {:else}
-    <svelte:element this={href ? 'a' : 'div'} {...$$restProps} class={avatarClass}>
-      <AvatarPlaceholder {rounded} />
-    </svelte:element>
-  {/if}
-</Dot>

package/avatar/Avatar.svelte.d.ts

@@ -1,27 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { DotType } from '../types';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        src?: string | undefined;
-        href?: string | undefined;
-        rounded?: boolean | undefined;
-        border?: boolean | undefined;
-        stacked?: boolean | undefined;
-        dot?: DotType | undefined;
-        alt?: string | undefined;
-        size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export declare type AvatarProps = typeof __propDef.props;
-export declare type AvatarEvents = typeof __propDef.events;
-export declare type AvatarSlots = typeof __propDef.slots;
-export default class Avatar extends SvelteComponentTyped<AvatarProps, AvatarEvents, AvatarSlots> {
-}
-export {};

package/avatar/Dot.svelte

@@ -1,34 +0,0 @@
-<script>import classNames from 'classnames';
-export let show = false;
-export let top = false;
-export let color = 'bg-gray-300 dark:bg-gray-500';
-export let rounded = false;
-export let size = 'md';
-const sizes = {
-    xs: 'w-2.5 h-2.5',
-    sm: 'w-3 h-3',
-    md: 'w-3.5 h-3.5',
-    lg: 'w-6 h-6',
-    xl: 'w-10 h-10'
-};
-const offsets = {
-    xs: ['left-4', 'left-5'],
-    sm: ['left-6', 'left-6'],
-    md: ['left-7', 'left-8'],
-    lg: ['left-14', 'left-16'],
-    xl: ['left-24', 'left-32']
-};
-let dotClass;
-$: dotClass = classNames('absolute rounded-full border-white dark:border-gray-800 border-2', sizes[size], offsets[size][+rounded], top ? 'top-0' : 'bottom-0', rounded && top && 'transform -translate-y-1/2', rounded && !top && 'transform translate-y-1/4', color);
-let divClass;
-$: divClass = classNames('relative flex-shrink-0', $$props.class);
-</script>
-
-{#if show}
-	<div class={divClass}>
-		<slot />
-		<span class={dotClass} />
-	</div>
-{:else}
-	<slot />
-{/if}

package/avatar/Dot.svelte.d.ts

@@ -1,23 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        show?: boolean | undefined;
-        top?: boolean | undefined;
-        color?: string | undefined;
-        rounded?: boolean | undefined;
-        size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export declare type DotProps = typeof __propDef.props;
-export declare type DotEvents = typeof __propDef.events;
-export declare type DotSlots = typeof __propDef.slots;
-export default class Dot extends SvelteComponentTyped<DotProps, DotEvents, DotSlots> {
-}
-export {};

package/avatar/Placeholder.svelte

@@ -1,15 +0,0 @@
-<script>export let rounded = false;
-</script>
-
-<svg
-	class="text-gray-400 bg-gray-100 dark:bg-gray-600 {rounded ? 'rounded' : 'rounded-full'}"
-	fill="currentColor"
-	viewBox="0 0 16 16"
-	xmlns="http://www.w3.org/2000/svg"
->
-	<path
-		fill-rule="evenodd"
-		d="M8 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
-		clip-rule="evenodd"
-	/>
-</svg>

package/avatar/Placeholder.svelte.d.ts

@@ -1,16 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        rounded?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export declare type PlaceholderProps = typeof __propDef.props;
-export declare type PlaceholderEvents = typeof __propDef.events;
-export declare type PlaceholderSlots = typeof __propDef.slots;
-export default class Placeholder extends SvelteComponentTyped<PlaceholderProps, PlaceholderEvents, PlaceholderSlots> {
-}
-export {};

package/badges/Badge.svelte

@@ -1,51 +0,0 @@
-<script>import classNames from 'classnames';
-import CloseButton from '../utils/CloseButton.svelte';
-export let color = 'blue';
-export let large = false;
-export let href = undefined;
-export let rounded = false;
-export let index = false;
-export let dismissable = false;
-export let baseClass = 'inline-flex items-center justify-center -mb-0.5';
-let hidden = false;
-const colors = {
-    blue: 'bg-blue-100 text-blue-800 dark:bg-blue-200 dark:text-blue-800',
-    dark: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300',
-    red: 'bg-red-100 text-red-800 dark:bg-red-200 dark:text-red-900',
-    green: 'bg-green-100 text-green-800 dark:bg-green-200 dark:text-green-900',
-    yellow: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-200 dark:text-yellow-900',
-    indigo: 'bg-indigo-100 text-indigo-800 dark:bg-indigo-200 dark:text-indigo-900',
-    purple: 'bg-purple-100 text-purple-800 dark:bg-purple-200 dark:text-purple-900',
-    pink: 'bg-pink-100 text-pink-800 dark:bg-pink-200 dark:text-pink-900',
-    ['!blue']: 'bg-blue-500 text-blue-100',
-    ['!dark']: 'bg-gray-500 text-gray-100',
-    ['!red']: 'bg-red-500 text-white',
-    ['!green']: 'bg-green-500 text-green-100',
-    ['!yellow']: 'bg-yellow-300 text-yellow-800',
-    ['!indigo']: 'bg-indigo-500 text-indigo-100',
-    ['!purple']: 'bg-purple-500 text-purple-100',
-    ['!pink']: 'bg-pink-500 text-pink-100'
-};
-const hovers = {
-    blue: 'hover:bg-blue-200 dark:hover:bg-blue-300',
-    dark: 'hover:bg-gray-200 dark:hover:bg-gray-300',
-    red: 'hover:bg-red-200 dark:hover:bg-red-300',
-    green: 'hover:bg-green-200 dark:hover:bg-green-300',
-    yellow: 'hover:bg-yellow-200 dark:hover:bg-yellow-300',
-    indigo: 'hover:bg-indigo-200 dark:hover:bg-indigo-300',
-    purple: 'hover:bg-purple-200 dark:hover:bg-purple-300',
-    pink: 'hover:bg-pink-200 dark:hover:bg-pink-300'
-};
-let badgeClass;
-$: badgeClass = classNames(baseClass, large ? 'text-sm font-medium' : 'text-xs font-semibold', colors[color], href && (hovers[color] ?? hovers.blue), rounded ? 'rounded-full p-1' : 'rounded px-2.5 py-0.5', index && 'absolute font-bold border-2 border-white dark:border-gray-900', index && (large ? 'w-7 h-7 -top-3 -right-3' : 'w-6 h-6 -top-2 -right-2'), $$props.class);
-const handleHide = () => {
-    hidden = !hidden;
-};
-</script>
-
-<svelte:element this={href ? 'a' : 'span'} {href} {...$$restProps} class={badgeClass} class:hidden>
-	<slot />
-	{#if dismissable}
-		<CloseButton {color} on:click={handleHide} size={large ? 'sm' : 'xs'} class="ml-1.5 -mr-1.5" />
-	{/if}
-</svelte:element>

package/badges/Badge.svelte.d.ts

@@ -1,26 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { Colors } from '../types';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        color?: Colors | undefined;
-        large?: boolean | undefined;
-        href?: string | undefined;
-        rounded?: boolean | undefined;
-        index?: boolean | undefined;
-        dismissable?: boolean | undefined;
-        baseClass?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export declare type BadgeProps = typeof __propDef.props;
-export declare type BadgeEvents = typeof __propDef.events;
-export declare type BadgeSlots = typeof __propDef.slots;
-export default class Badge extends SvelteComponentTyped<BadgeProps, BadgeEvents, BadgeSlots> {
-}
-export {};

package/breadcrumbs/Breadcrumb.svelte

@@ -1,13 +0,0 @@
-<script>import classNames from 'classnames';
-export let solid = false;
-export let navClass = 'flex';
-export let solidClass = 'flex px-5 py-3 text-gray-700 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700';
-export let olClass = 'inline-flex items-center space-x-1 md:space-x-3';
-let classNav = solid ? solidClass : navClass;
-</script>
-
-<nav aria-label="Breadcrumb" {...$$restProps} class={classNames(classNav, $$props.class)}>
-	<ol class={classNames(olClass, $$props.classOl)}>
-		<slot />
-	</ol>
-</nav>

package/breadcrumbs/Breadcrumb.svelte.d.ts

@@ -1,22 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        solid?: boolean | undefined;
-        navClass?: string | undefined;
-        solidClass?: string | undefined;
-        olClass?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export declare type BreadcrumbProps = typeof __propDef.props;
-export declare type BreadcrumbEvents = typeof __propDef.events;
-export declare type BreadcrumbSlots = typeof __propDef.slots;
-export default class Breadcrumb extends SvelteComponentTyped<BreadcrumbProps, BreadcrumbEvents, BreadcrumbSlots> {
-}
-export {};

package/breadcrumbs/BreadcrumbItem.svelte

@@ -1,44 +0,0 @@
-<script>export let home = false;
-export let href = undefined;
-export let linkClass = 'ml-1 text-sm font-medium text-gray-700 hover:text-gray-900 md:ml-2 dark:text-gray-400 dark:hover:text-white';
-export let spanClass = 'ml-1 text-sm font-medium text-gray-500 md:ml-2 dark:text-gray-400';
-export let homeClass = 'inline-flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white';
-</script>
-
-<li class="inline-flex items-center" {...$$restProps}>
-  {#if home}
-    <a class={homeClass} {href}>
-      {#if $$slots.icon}
-        <slot name="icon" />
-      {:else}
-        <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
-          ><path
-            d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" /></svg>
-      {/if}
-      <slot />
-    </a>
-  {:else}
-    {#if $$slots.icon}
-      <slot name="icon" />
-    {:else}
-      <svg
-        class="w-6 h-6 text-gray-400"
-        fill="currentColor"
-        viewBox="0 0 20 20"
-        xmlns="http://www.w3.org/2000/svg"
-        ><path
-          fill-rule="evenodd"
-          d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
-          clip-rule="evenodd" /></svg>
-    {/if}
-    {#if href}
-      <a class={linkClass} {href}>
-        <slot />
-      </a>
-    {:else}
-      <span class={spanClass}>
-        <slot />
-      </span>
-    {/if}
-  {/if}
-</li>

package/breadcrumbs/BreadcrumbItem.svelte.d.ts

@@ -1,24 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        home?: boolean | undefined;
-        href?: string | undefined;
-        linkClass?: string | undefined;
-        spanClass?: string | undefined;
-        homeClass?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        icon: {};
-        default: {};
-    };
-};
-export declare type BreadcrumbItemProps = typeof __propDef.props;
-export declare type BreadcrumbItemEvents = typeof __propDef.events;
-export declare type BreadcrumbItemSlots = typeof __propDef.slots;
-export default class BreadcrumbItem extends SvelteComponentTyped<BreadcrumbItemProps, BreadcrumbItemEvents, BreadcrumbItemSlots> {
-}
-export {};

package/buttongroups/ButtonGroup.svelte

@@ -1,10 +0,0 @@
-<script>import { setContext } from 'svelte';
-import classNames from 'classnames';
-export let size = 'md';
-export let divClass = 'inline-flex rounded-lg shadow-sm';
-setContext('group', { size });
-</script>
-
-<div {...$$restProps} class={classNames(divClass, $$props.class)} role="group">
-  <slot />
-</div>

package/buttongroups/ButtonGroup.svelte.d.ts

@@ -1,21 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { SizeType } from '../types';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        size?: SizeType | undefined;
-        divClass?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export declare type ButtonGroupProps = typeof __propDef.props;
-export declare type ButtonGroupEvents = typeof __propDef.events;
-export declare type ButtonGroupSlots = typeof __propDef.slots;
-export default class ButtonGroup extends SvelteComponentTyped<ButtonGroupProps, ButtonGroupEvents, ButtonGroupSlots> {
-}
-export {};