flowbite-svelte 0.27.15 → 0.27.16

package/src/lib/kbd/ArrowKeyLeft.svelte

@@ -1,16 +0,0 @@
-<script lang="ts">
-	import classNames from 'classnames';
-	export let svgClass: string = 'w-4 h-4';
-</script>
-
-<svg
-	{...$$restProps}
-	class={classNames(svgClass, $$props.class)}
-	aria-hidden="true"
-	fill="currentColor"
-	xmlns="http://www.w3.org/2000/svg"
-	viewBox="0 0 320 512"
-	><path
-		d="M137.4 406.6l-128-127.1C3.125 272.4 0 264.2 0 255.1s3.125-16.38 9.375-22.63l128-127.1c9.156-9.156 22.91-11.9 34.88-6.943S192 115.1 192 128v255.1c0 12.94-7.781 24.62-19.75 29.58S146.5 415.8 137.4 406.6z"
-	/></svg
->

package/src/lib/kbd/ArrowKeyRight.svelte

@@ -1,16 +0,0 @@
-<script lang="ts">
-	import classNames from 'classnames';
-	export let svgClass: string = 'w-4 h-4';
-</script>
-
-<svg
-	{...$$restProps}
-	class={classNames(svgClass, $$props.class)}
-	aria-hidden="true"
-	fill="currentColor"
-	xmlns="http://www.w3.org/2000/svg"
-	viewBox="0 0 320 512"
-	><path
-		d="M118.6 105.4l128 127.1C252.9 239.6 256 247.8 256 255.1s-3.125 16.38-9.375 22.63l-128 127.1c-9.156 9.156-22.91 11.9-34.88 6.943S64 396.9 64 383.1V128c0-12.94 7.781-24.62 19.75-29.58S109.5 96.23 118.6 105.4z"
-	/></svg
->

package/src/lib/kbd/ArrowKeyUp.svelte

@@ -1,16 +0,0 @@
-<script lang="ts">
-	import classNames from 'classnames';
-	export let svgClass: string = 'w-4 h-4';
-</script>
-
-<svg
-	{...$$restProps}
-	class={classNames(svgClass, $$props.class)}
-	aria-hidden="true"
-	fill="currentColor"
-	xmlns="http://www.w3.org/2000/svg"
-	viewBox="0 0 320 512"
-	><path
-		d="M9.39 265.4l127.1-128C143.6 131.1 151.8 128 160 128s16.38 3.125 22.63 9.375l127.1 128c9.156 9.156 11.9 22.91 6.943 34.88S300.9 320 287.1 320H32.01c-12.94 0-24.62-7.781-29.58-19.75S.2333 274.5 9.39 265.4z"
-	/></svg
->

package/src/lib/kbd/Kbd.svelte

@@ -1,9 +0,0 @@
-<script lang="ts">
-	import classNames from 'classnames';
-	export let kbdClass: string =
-		'text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500';
-</script>
-
-<kbd class={classNames(kbdClass, $$props.class)}>
-	<slot />
-</kbd>

package/src/lib/list-group/Listgroup.svelte

@@ -1,23 +0,0 @@
-<script lang="ts">
-  import { setContext } from 'svelte';
-  import classNames from 'classnames';
-  import type { ListGroupItemType } from '../types';
-  import ListgroupItem from './ListgroupItem.svelte';
-  import Frame from '../utils/Frame.svelte';
-
-  export let items: ListGroupItemType[] = [];
-  export let active: boolean = false;
-
-  $: setContext('active', active);
-
-  let groupClass: string;
-  $: groupClass = classNames('divide-y divide-gray-200 dark:divide-gray-600', $$props.class);
-</script>
-
-<Frame tag={active ? 'div' : 'ul'} {...$$restProps} rounded border class={groupClass}>
-  {#each items as item, index}
-    <ListgroupItem {active} {...item} {index} on:click><slot {item} {index} /></ListgroupItem>
-  {:else}
-    <slot />
-  {/each}
-</Frame>

package/src/lib/list-group/ListgroupItem.svelte

@@ -1,77 +0,0 @@
-<script lang="ts">
-  import { getContext } from 'svelte';
-  import classNames from 'classnames';
-  import { createEventDispatcher } from 'svelte';
-
-  export let active: boolean = getContext('active');
-  export let current: boolean = false;
-  export let disabled: boolean = false;
-  export let href: string = '';
-
-  let dispatch = createEventDispatcher();
-
-  const states = {
-    current: 'text-white bg-blue-700 dark:text-white dark:bg-gray-800',
-    normal: '',
-    disabled: 'text-gray-900 bg-gray-100 dark:bg-gray-600 dark:text-gray-400'
-  };
-  let focusClass =
-    'focus:z-40 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:focus:ring-gray-500 dark:focus:text-white';
-  let hoverClass = 'hover:bg-gray-100 hover:text-blue-700 dark:hover:bg-gray-600 dark:hover:text-white';
-
-  let state: string;
-  $: state = disabled ? 'disabled' : current ? 'current' : 'normal';
-
-  let itemClass: string;
-  $: itemClass = classNames(
-    'py-2 px-0 sm:px-4 w-full text-sm font-medium',
-    'first:rounded-t-lg last:rounded-b-lg',
-    states[state],
-    active && state === 'disabled' && 'cursor-not-allowed',
-    active && state === 'normal' && hoverClass,
-    active && state === 'normal' && focusClass,
-    $$props.class
-  );
-</script>
-
-{#if !active}
-  <li class={itemClass}>
-    <slot item={$$props} />
-  </li>
-{:else if href}
-  <a
-    {href}
-    class="block {itemClass}"
-    on:click={() => dispatch('click', $$props)}
-    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
-    class="inline-flex relative items-center text-left {itemClass}"
-    {disabled}
-    on:click={() => dispatch('click', $$props)}
-    on:blur
-    on:change
-    on:click
-    on:focus
-    on:keydown
-    on:keypress
-    on:keyup
-    on:mouseenter
-    on:mouseleave
-    on:mouseover
-    aria-current={current}>
-    <slot item={$$props} />
-  </button>
-{/if}

package/src/lib/megamenu/MegaMenu.svelte

@@ -1,57 +0,0 @@
-<script lang="ts">
-	import classNames from 'classnames';
-	import type { LinkType } from '../types';
-	import Popper from '../utils/Popper.svelte';
-
-	export let items: LinkTypeLike[] = [];
-	export let full: boolean = false;
-	export let open: boolean = false;
-
-	interface LinkTypeLike extends LinkType {
-		[propName: string]: any;
-	}
-
-	let wrapperClass;
-	$: wrapperClass = classNames(full && 'border-y w-full', $$props.class);
-
-	let ulClass: string;
-	$: ulClass = classNames(
-		'grid grid-flow-row gap-y-4 md:gap-x-0 auto-col-max auto-row-max',
-		full && $$slots.extra ? 'grid-cols-2' : 'grid-cols-2 md:grid-cols-3',
-		'text-sm font-medium',
-		full && $$slots.extra && 'md:w-2/3'
-	);
-
-	const init = (node: HTMLElement) => {
-		if (full) {
-			node.parentElement.classList.add('inset-x-0');
-		}
-	};
-</script>
-
-<Popper
-	color={full ? 'default' : 'dropdown'}
-	border={!full}
-	rounded={!full}
-	activeContent
-	arrow={false}
-	trigger="click"
-	placement="bottom"
-	yOnly={full}
-	{...$$restProps}
-	class={wrapperClass}
-	on:show
-	bind:open>
-	<div class="flex flex-col md:flex-row p-4 max-w-screen-md justify-center mx-auto">
-		<ul class={ulClass}>
-			{#each items as item, index}
-				<li>
-					<slot {item} {index} />
-				</li>
-			{:else}
-				<slot />
-			{/each}
-		</ul>
-		{#if full && $$slots.extra}<div class="md:w-1/3 mt-4 md:mt-0"><slot name="extra" /></div>{/if}
-	</div>
-</Popper>

package/src/lib/modals/Modal.svelte

@@ -1,165 +0,0 @@
-<script lang="ts">
-  import classNames from 'classnames';
-  import Frame from '../utils/Frame.svelte';
-  import { createEventDispatcher } from 'svelte';
-  import CloseButton from '../utils/CloseButton.svelte';
-  import focusTrap from '../utils/focusTrap';
-  import type { SizeType } from '$lib/types';
-
-  export let open: boolean = false;
-  export let title: string = '';
-  export let size: SizeType = 'md';
-  export let placement:
-    | 'top-left'
-    | 'top-center'
-    | 'top-right'
-    | 'center-left'
-    | 'center'
-    | 'center-right'
-    | 'bottom-left'
-    | 'bottom-center'
-    | 'bottom-right' = 'center';
-  export let autoclose: boolean = false;
-  export let permanent: boolean = false;
-  export let backdropClasses: string = 'bg-gray-900 bg-opacity-50 dark:bg-opacity-80';
-
-  const dispatch = createEventDispatcher();
-  $: dispatch(open ? 'open' : 'hide');
-
-  function prepareFocus(node: HTMLElement) {
-    const walker = document.createTreeWalker(node, NodeFilter.SHOW_ELEMENT);
-    let n: Node | null;
-    while ((n = walker.nextNode())) {
-      if (n instanceof HTMLElement) {
-        const el = n as HTMLElement;
-        const [x, y] = isScrollable(el);
-        if (x || y) el.tabIndex = 0;
-      }
-    }
-    node.focus();
-  }
-
-  const getPlacementClasses = () => {
-    switch (placement) {
-      // top
-      case 'top-left':
-        return ['justify-start', 'items-start'];
-      case 'top-center':
-        return ['justify-center', 'items-start'];
-      case 'top-right':
-        return ['justify-end', 'items-start'];
-
-      // center
-      case 'center-left':
-        return ['justify-start', 'items-center'];
-      case 'center':
-        return ['justify-center', 'items-center'];
-      case 'center-right':
-        return ['justify-end', 'items-center'];
-
-      // bottom
-      case 'bottom-left':
-        return ['justify-start', 'items-end'];
-      case 'bottom-center':
-        return ['justify-center', 'items-end'];
-      case 'bottom-right':
-        return ['justify-end', 'items-end'];
-
-      default:
-        return ['justify-center', 'items-center'];
-    }
-  };
-
-  const sizes = {
-    xs: 'max-w-md',
-    sm: 'max-w-lg',
-    md: 'max-w-2xl',
-    lg: 'max-w-4xl',
-    xl: 'max-w-7xl'
-  };
-
-  const onAutoClose = (e: MouseEvent) => {
-    const target: Element = e.target as Element;
-    if (autoclose && target?.tagName === 'BUTTON') open = false;
-  };
-
-  const hide = () => {
-    open = false;
-  };
-
-  let mainClass: string;
-  $: mainClass = classNames(
-    'flex overflow-hidden fixed top-0 right-0 left-0 z-50 w-full md:inset-0 h-modal md:h-full',
-    backdropClasses,
-    ...getPlacementClasses()
-  );
-
-  let frameClass: string;
-  $: frameClass = classNames('relative flex flex-col w-full h-full md:h-auto', $$props.class);
-
-  const isScrollable = (e: HTMLElement): boolean[] => [
-    e.scrollWidth > e.clientWidth && ['scroll', 'auto'].indexOf(getComputedStyle(e).overflowX) >= 0,
-    e.scrollHeight > e.clientHeight && ['scroll', 'auto'].indexOf(getComputedStyle(e).overflowY) >= 0
-  ];
-
-  function preventWheelDefault(e: Event) {
-    // @ts-ignore
-    const [x, y] = isScrollable(this);
-    return x || y || e.preventDefault();
-  }
-
-  function handleKeys(e: KeyboardEvent) {
-    if (e.key === 'Escape' && !permanent) return hide();
-  }
-</script>
-
-{#if open}
-  <div
-    tabindex="-1"
-    class={mainClass}
-    aria-modal="true"
-    role="dialog"
-    on:keydown|preventDefault={handleKeys}
-    on:wheel|preventDefault
-    use:prepareFocus
-    use:focusTrap
-    on:click={autoclose ? onAutoClose : null}>
-    <div class="flex p-4 w-full {sizes[size]} h-full md:h-auto max-h-screen">
-      <!-- Modal content -->
-      <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">
-            <slot name="header">
-              <h3
-                class="text-xl font-semibold {$$restProps.color ? '' : 'text-gray-900 dark:text-white'} p-0">
-                {title}
-              </h3>
-            </slot>
-            {#if !permanent}<CloseButton name="Close modal" on:click={hide} color={$$restProps.color} />{/if}
-          </Frame>
-        {:else if !permanent}
-          <CloseButton
-            name="Close modal"
-            class="absolute top-3 right-2.5"
-            on:click={hide}
-            color={$$restProps.color} />
-        {/if}
-        <!-- Modal body -->
-        <div
-          id="modal"
-          class="p-6 space-y-6 flex-1 overflow-y-auto overscroll-contain"
-          on:keydown|stopPropagation={handleKeys}
-          on:wheel|stopPropagation={preventWheelDefault}>
-          <slot />
-        </div>
-        <!-- Modal footer -->
-        {#if $$slots.footer}
-          <Frame color={$$restProps.color} class="flex items-center p-6 space-x-2 rounded-b border-t">
-            <slot name="footer" />
-          </Frame>
-        {/if}
-      </Frame>
-    </div>
-  </div>
-{/if}

package/src/lib/navbar/Menu.svelte

@@ -1,37 +0,0 @@
-<script lang="ts">
-	export let size = '24';
-	export let color = 'currentColor';
-	export let variation: 'solid' | 'outline' = 'outline';
-	let viewBox: string;
-	let svgpath: string;
-	let svgoutline = `<path d="M3.75 6.75H20.25M3.75 12H20.25M3.75 17.25H20.25" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> `;
-	let svgsolid = `<path fill-rule="evenodd" clip-rule="evenodd" d="M3 6.75C3 6.33579 3.33579 6 3.75 6H20.25C20.6642 6 21 6.33579 21 6.75C21 7.16421 20.6642 7.5 20.25 7.5H3.75C3.33579 7.5 3 7.16421 3 6.75ZM3 12C3 11.5858 3.33579 11.25 3.75 11.25H20.25C20.6642 11.25 21 11.5858 21 12C21 12.4142 20.6642 12.75 20.25 12.75H3.75C3.33579 12.75 3 12.4142 3 12ZM3 17.25C3 16.8358 3.33579 16.5 3.75 16.5H20.25C20.6642 16.5 21 16.8358 21 17.25C21 17.6642 20.6642 18 20.25 18H3.75C3.33579 18 3 17.6642 3 17.25Z" 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 = 'bars 3';
-</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/src/lib/navbar/NavBrand.svelte

@@ -1,8 +0,0 @@
-<script lang="ts">
-	import classNames from 'classnames';
-	export let href: string = '';
-</script>
-
-<a {href} {...$$restProps} class={classNames('flex items-center', $$props.class)}>
-	<slot />
-</a>

package/src/lib/navbar/NavDropdown.svelte

@@ -1,66 +0,0 @@
-<script lang="ts">
-	import type { NavbarType } from '../types';
-	import { clickOutside } from '../utils/clickOutside';
-
-	export let liButtonClass: string = 'flex items-center justify-between w-full';
-	export let name: string;
-	export let child: NavbarType[] = [];
-	export let dropdownDiv: string = '';
-	export let dropdownLinkClassWithChild: string = undefined;
-	export let rel: string = undefined;
-
-	let hidden = true;
-	let block = false;
-
-	const handleDropdown = () => {
-		hidden = !hidden;
-		block = !block;
-	};
-
-	let liClass =
-		'flex justify-center py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700';
-</script>
-
-<li use:clickOutside={() => !hidden && handleDropdown()} class={liClass}>
-	<button on:click={() => handleDropdown()} class={liButtonClass}
-		>{name}
-		<svg
-			class="ml-1 w-4 h-4"
-			fill="currentColor"
-			viewBox="0 0 20 20"
-			xmlns="http://www.w3.org/2000/svg"
-			><path
-				fill-rule="evenodd"
-				d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-				clip-rule="evenodd"
-			/></svg
-		></button
-	>
-
-	<!-- Dropdown menu -->
-	<div class:hidden class="absolute {dropdownDiv} mt-8 z-10">
-		<slot>
-			<ul class="py-1" aria-labelledby="dropdownLargeButton">
-				{#each child as item}
-					<li>
-						<a
-							href={item.href}
-							{rel}
-							on:blur
-							on:change
-							on:click
-							on:focus
-							on:keydown
-							on:keypress
-							on:keyup
-							on:mouseenter
-							on:mouseleave
-							on:mouseover
-							class={dropdownLinkClassWithChild}>{item.name}</a
-						>
-					</li>
-				{/each}
-			</ul>
-		</slot>
-	</div>
-</li>

package/src/lib/navbar/NavHamburger.svelte

@@ -1,11 +0,0 @@
-<script lang="ts">
-	import ToolbarButton from '../toolbar/ToolbarButton.svelte';
-	import classNames from 'classnames';
-	import Menu from './Menu.svelte';
-
-	export let btnClass: string = 'ml-3 md:hidden';
-</script>
-
-<ToolbarButton name="Open main menu" on:click {...$$restProps} class={classNames(btnClass, $$props.class)}>
-	<Menu class="h-6 w-6 shrink-0" />
-</ToolbarButton>

package/src/lib/navbar/NavLi.svelte

@@ -1,37 +0,0 @@
-<script lang="ts">
-	import classNames from 'classnames';
-
-	export let href: string = '';
-	export let active: boolean = false;
-	export let activeClass: string =
-		'text-white bg-blue-700 md:bg-transparent md:text-blue-700 md:dark:text-white dark:bg-blue-600 md:dark:bg-transparent';
-	export let nonActiveClass: string =
-		'text-gray-700 hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent';
-
-	let liClass;
-	$: liClass = classNames(
-		'block py-2 pr-4 pl-3 md:p-0 rounded md:border-0',
-		active ? activeClass : nonActiveClass,
-		$$props.class
-	);
-</script>
-
-<li>
-	<svelte:element
-		this={href ? 'a' : 'div'}
-		{href}
-		{...$$restProps}
-		on:blur
-		on:change
-		on:click
-		on:focus
-		on:keydown
-		on:keypress
-		on:keyup
-		on:mouseenter
-		on:mouseleave
-		on:mouseover
-		class={liClass}>
-		<slot />
-	</svelte:element>
-</li>

package/src/lib/navbar/NavUl.svelte

@@ -1,35 +0,0 @@
-<script lang="ts">
-  import classNames from 'classnames';
-  import { slide } from 'svelte/transition';
-  import { quintOut } from 'svelte/easing';
-  import Frame from '../utils/Frame.svelte';
-
-  export let divClass: string = 'w-full md:block md:w-auto';
-  export let ulClass: string =
-    'flex flex-col p-4 mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium';
-  export let hidden: boolean = true;
-
-  let _divClass: string;
-  $: _divClass = classNames(divClass, $$props.class);
-
-  let _ulClass: string;
-  $: _ulClass = classNames(
-    ulClass,
-    // 'divide-y md:divide-y-0 divide-gray-100 dark:divide-gray-700',
-    $$props.class
-  );
-</script>
-
-{#if !hidden}
-  <div {...$$restProps} class={_divClass} transition:slide={{ delay: 250, duration: 500, easing: quintOut }}>
-    <Frame tag="ul" border rounded color="navbarUl" class={_ulClass}>
-      <slot />
-    </Frame>
-  </div>
-{:else}
-  <div {...$$restProps} class={_divClass} {hidden}>
-    <ul class={_ulClass}>
-      <slot />
-    </ul>
-  </div>
-{/if}

package/src/lib/navbar/Navbar.svelte

@@ -1,36 +0,0 @@
-<script lang="ts">
-  import Frame from '../utils/Frame.svelte';
-  import classNames from 'classnames';
-
-  export let navClass: string = 'px-2 sm:px-4 py-2.5 w-full';
-  export let navDivClass: string = 'mx-auto flex flex-wrap justify-between items-center ';
-  export let fluid: boolean = true;
-  export let color:
-    | 'gray'
-    | 'red'
-    | 'yellow'
-    | 'green'
-    | 'indigo'
-    | 'default'
-    | 'purple'
-    | 'pink'
-    | 'blue'
-    | 'light'
-    | 'dark'
-    | 'dropdown'
-    | 'navbar'
-    | 'navbarUl'
-    | 'form'
-    | 'none' = 'navbar';
-
-  let hidden = true;
-  let toggle = () => {
-    hidden = !hidden;
-  };
-</script>
-
-<Frame tag="nav" {color} {...$$restProps} class={classNames(navClass, $$props.class)}>
-  <div class={classNames(navDivClass, fluid && 'container')}>
-    <slot {hidden} {toggle} />
-  </div>
-</Frame>

package/src/lib/paginations/Pagination.svelte

@@ -1,42 +0,0 @@
-<script lang="ts">
-  import classNames from 'classnames';
-  import { createEventDispatcher, setContext } from 'svelte';
-  import type { LinkType } from '../types';
-  import PaginationItem from './PaginationItem.svelte';
-
-  export let pages: LinkType[] = [];
-  export let ulClass: string = 'inline-flex -space-x-px items-center';
-  export let table: boolean = false;
-
-  const dispatch = createEventDispatcher();
-
-  setContext('group', true);
-  setContext('table', table);
-
-  const previous = () => {
-    dispatch('previous');
-  };
-  const next = () => {
-    dispatch('next');
-  };
-</script>
-
-<nav aria-label="Page navigation">
-  <ul class={classNames(ulClass, table && 'divide-x divide-gray-700', $$props.class)}>
-    <li>
-      <PaginationItem on:click={previous} class={table ? 'rounded-l' : 'rounded-l-lg'}>
-        <slot name="prev">Previous</slot>
-      </PaginationItem>
-    </li>
-    {#each pages as { name, href }}
-      <li>
-        <PaginationItem {href}>{name}</PaginationItem>
-      </li>
-    {/each}
-    <li>
-      <PaginationItem on:click={next} class={table ? 'rounded-r' : 'rounded-r-lg'}>
-        <slot name="next">Next</slot>
-      </PaginationItem>
-    </li>
-  </ul>
-</nav>