flowbite-svelte 0.29.10 → 0.29.12

package/CHANGELOG.md

@@ -2,6 +2,36 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.29.12](https://github.com/themesberg/flowbite-svelte/compare/v0.29.11...v0.29.12) (2023-01-23)
+
+
+### Features
+
+* add step indicator component ([#545](https://github.com/themesberg/flowbite-svelte/issues/545)) ([549ad61](https://github.com/themesberg/flowbite-svelte/commit/549ad616adc829b5482da20abf9f4ef3e78aa44b))
+
+
+### Bug Fixes
+
+* add indcator to index ([#535](https://github.com/themesberg/flowbite-svelte/issues/535)) ([f6fcef6](https://github.com/themesberg/flowbite-svelte/commit/f6fcef63638a5edcf4c3f8d2b965789d5ad85be1))
+* add two missing colors for <Table> ([#537](https://github.com/themesberg/flowbite-svelte/issues/537)) ([ac558fb](https://github.com/themesberg/flowbite-svelte/commit/ac558fb267d3aaa87773ca23b5104e4c231443ba))
+* few minor tweaks ([#541](https://github.com/themesberg/flowbite-svelte/issues/541)) ([2289e4d](https://github.com/themesberg/flowbite-svelte/commit/2289e4d1f83f272db5c092cd09469147a4878ff8))
+* ListgroupItem button type ([#549](https://github.com/themesberg/flowbite-svelte/issues/549)) ([6b74d73](https://github.com/themesberg/flowbite-svelte/commit/6b74d738efc887b46fe0fc0eea473e617aa386ca))
+* move step indicator to extend ([000dec3](https://github.com/themesberg/flowbite-svelte/commit/000dec3688b5d9535a21a36207de42ca26336f1b))
+* TableBodyRow color and border ([#539](https://github.com/themesberg/flowbite-svelte/issues/539)) ([d52920f](https://github.com/themesberg/flowbite-svelte/commit/d52920fe869183639788607475b148c80fe283fa))
+
+### [0.29.11](https://github.com/themesberg/flowbite-svelte/compare/v0.29.10...v0.29.11) (2023-01-16)
+
+
+### Features
+
+* indicator comp ([#532](https://github.com/themesberg/flowbite-svelte/issues/532)) ([57ce4fc](https://github.com/themesberg/flowbite-svelte/commit/57ce4fcdce3965921c0f6edf71f6ae42c2d42b40))
+* make <TableHead> slot more flexible ([#527](https://github.com/themesberg/flowbite-svelte/issues/527)) ([33803f2](https://github.com/themesberg/flowbite-svelte/commit/33803f23ce90f9425417f6417c70bc6928337bbe))
+
+
+### Bug Fixes
+
+* update badge component's style and doc ([#531](https://github.com/themesberg/flowbite-svelte/issues/531)) ([ce9af8c](https://github.com/themesberg/flowbite-svelte/commit/ce9af8cff8f6979f625b00fd165aa2ffadc41604))
+
 ### [0.29.10](https://github.com/themesberg/flowbite-svelte/compare/v0.29.9...v0.29.10) (2023-01-13)
 
 

package/README.md

@@ -412,6 +412,28 @@ For full documentation, visit [flowbite-svelte.com](https://flowbite-svelte.com/
         </a>
     </td>
   </tr>
+  <tr>
+    <td width="33.3333%">Speed Dial</td>
+    <td width="33.3333%">Stepper(TBA)</td>
+    <td width="33.3333%">Indicators</td>
+  </tr>
+  <tr>
+    <td width="33.3333%">
+        <a href="https://flowbite-svelte.com/components/speed-dial/">
+            <img alt="Tailwind CSS Speed Dial" src="https://flowbite.s3.amazonaws.com/github/dial.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="#">
+            <img alt="Tailwind CSS Stepper" src="https://flowbite.s3.amazonaws.com/github/stepper.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="https://flowbite.com/components/indicators/">
+            <img alt="Tailwind CSS Indicators" src="https://flowbite.s3.amazonaws.com/github/indicators.jpg">
+        </a>
+    </td>
+  </tr>
 </table>
 
 ## Community

package/avatar/Avatar.svelte

@@ -1,14 +1,16 @@
 <script>import classNames from 'classnames';
 import AvatarPlaceholder from './Placeholder.svelte';
-import Dot from './Dot.svelte';
+import Indicator from '../indicators/Indicator.svelte';
 export let src = '';
 export let href = undefined;
 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 dot = undefined;
 export let alt = '';
 export let size = 'md';
+$: dot = dot && { placement: 'top-right', color: 'gray', size: 'lg', ...dot };
+$: dot && console.log(dot);
 const sizes = {
     xs: 'w-6 h-6',
     sm: 'w-8 h-8',
@@ -20,20 +22,21 @@ 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'} {href} {...$$restProps} class={avatarClass}>
-      <AvatarPlaceholder {rounded} />
-    </svelte:element>
-  {/if}
-</Dot>
+{#if !src || !!href || $$slots.default || dot}
+  <svelte:element
+    this={href ? 'a' : 'div'}
+    {href}
+    {...$$restProps}
+    class="relative flex justify-center items-center {avatarClass}">
+    {#if src}
+      <img {alt} {src} class={rounded ? 'rounded' : 'rounded-full'} />
+    {:else}
+      <slot><AvatarPlaceholder {rounded} /></slot>
+    {/if}
+    {#if dot}
+      <Indicator border offset={rounded} {...dot} />
+    {/if}
+  </svelte:element>
+{:else}
+  <img {alt} {src} {...$$restProps} class={avatarClass} />
+{/if}

package/avatar/Avatar.svelte.d.ts

@@ -1,5 +1,4 @@
 import { SvelteComponentTyped } from "svelte";
-import type { DotType } from '../types';
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -8,7 +7,7 @@ declare const __propDef: {
         rounded?: boolean | undefined;
         border?: boolean | undefined;
         stacked?: boolean | undefined;
-        dot?: DotType | undefined;
+        dot?: object | undefined;
         alt?: string | undefined;
         size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
     };

package/badges/Badge.svelte

@@ -1,22 +1,22 @@
-<script>import classNames from 'classnames';
+<script>import { createEventDispatcher } from 'svelte';
+import classNames from 'classnames';
 import CloseButton from '../utils/CloseButton.svelte';
 export let color = 'blue';
 export let large = false;
+export let border = 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',
+    blue: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300',
     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',
+    red: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300',
+    green: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300',
+    yellow: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300',
+    indigo: 'bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-300',
+    purple: 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300',
+    pink: 'bg-pink-100 text-pink-800 dark:bg-pink-900 dark:text-pink-300',
     ['!blue']: 'bg-blue-500 text-blue-100',
     ['!dark']: 'bg-gray-500 text-gray-100',
     ['!red']: 'bg-red-500 text-white',
@@ -26,26 +26,74 @@ const colors = {
     ['!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'
+const borderedColors = {
+    blue: 'bg-blue-100 text-blue-800 dark:bg-gray-700 dark:text-blue-400 border-blue-400',
+    dark: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-400 border-gray-500',
+    red: 'bg-red-100 text-red-800 dark:bg-gray-700 dark:text-red-400 border-red-400',
+    green: 'bg-green-100 text-green-800 dark:bg-gray-700 dark:text-green-400 border-green-400',
+    yellow: 'bg-yellow-100 text-yellow-800 dark:bg-gray-700 dark:text-yellow-300 border-yellow-300',
+    indigo: 'bg-indigo-100 text-indigo-800 dark:bg-gray-700 dark:text-indigo-400 border-indigo-400',
+    purple: 'bg-purple-100 text-purple-800 dark:bg-gray-700 dark:text-purple-400 border-purple-400',
+    pink: 'bg-pink-100 text-pink-800 dark:bg-gray-700 dark:text-pink-400 border-pink-400'
+};
+const hoverColors = {
+    blue: 'hover:bg-blue-200',
+    dark: 'hover:bg-gray-200',
+    red: 'hover:bg-red-200',
+    green: 'hover:bg-green-200',
+    yellow: 'hover:bg-yellow-200',
+    indigo: 'hover:bg-indigo-200',
+    purple: 'hover:bg-purple-200',
+    pink: 'hover:bg-pink-200'
 };
+const baseClass = 'font-medium inline-flex items-center justify-center px-2.5 py-0.5';
+let transition = false;
 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);
+$: badgeClass = classNames(baseClass, large ? 'text-sm' : 'text-xs', border ? `border ${borderedColors[color]}` : colors[color], href && hoverColors[color], rounded ? 'rounded-full' : 'rounded', 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'), transition && 'transition-opacity duration-300 ease-out opacity-0', $$props.class);
+const closeBtnBaseClass = 'inline-flex items-center !p-0.5 !m-0 !ml-2 text-sm bg-transparent rounded-sm focus:!ring-0';
+// uncomment the following lines to completely overwrite <CloseButton>'s color palette
+// in case <CloseButton>'s color palette is changed in the future
+// const closeBtnColors = {
+//   blue: '!text-blue-400 hover:!bg-blue-200 hover:!text-blue-900 dark:hover:!bg-blue-800 dark:hover:!text-blue-300',
+//   dark: '!text-gray-400 hover:!bg-gray-200 hover:!text-gray-900 dark:hover:!bg-gray-600 dark:hover:!text-gray-300',
+//   red: '!text-red-400 hover:!bg-red-200 hover:!text-red-900 dark:hover:!bg-red-800 dark:hover:!text-red-300',
+//   green: '!text-green-400 hover:!bg-green-200 hover:!text-green-900 dark:hover:!bg-green-800 dark:hover:!text-green-300',
+//   yellow: '!text-yellow-400 hover:!bg-yellow-200 hover:!text-yellow-900 dark:hover:!bg-yellow-800 dark:hover:!text-yellow-300',
+//   indigo: '!text-indigo-400 hover:!bg-indigo-200 hover:!text-indigo-900 dark:hover:!bg-indigo-800 dark:hover:!text-indigo-300',
+//   purple: '!text-purple-400 hover:!bg-purple-200 hover:!text-purple-900 dark:hover:!bg-purple-800 dark:hover:!text-purple-300',
+//   pink: '!text-pink-400 hover:!bg-pink-200 hover:!text-pink-900 dark:hover:!bg-pink-800 dark:hover:!text-pink-300'
+// };
+// only overwrite necessary colors (<CloseButton> v0.29.10)
+const closeBtnColors = {
+    blue: 'text-blue-400 hover:text-blue-900 dark:hover:!bg-blue-800 dark:hover:text-blue-300',
+    dark: 'text-gray-400 hover:!text-gray-400 hover:!bg-gray-200 dark:hover:!text-gray-300',
+    red: 'text-red-400 hover:text-red-900 dark:hover:!bg-red-800 dark:hover:text-red-300',
+    green: 'text-green-400 hover:text-green-900 dark:hover:!bg-green-800 dark:hover:text-green-300',
+    yellow: 'text-yellow-400 hover:text-yellow-900 dark:hover:!bg-yellow-800 dark:hover:text-yellow-300',
+    indigo: 'text-indigo-400 hover:text-indigo-900 dark:hover:!bg-indigo-800 dark:hover:text-indigo-300',
+    purple: 'text-purple-400 hover:text-purple-900 dark:hover:!bg-purple-800 dark:hover:text-purple-300',
+    pink: 'text-pink-400 hover:text-pink-900 dark:hover:!bg-pink-800 dark:hover:text-pink-300'
+};
+let closeBtnClass;
+$: closeBtnClass = classNames(closeBtnBaseClass, closeBtnColors[color]);
+let hidden = false;
+const dispatch = createEventDispatcher();
 const handleHide = () => {
-    hidden = !hidden;
+    transition = true;
+    setTimeout(() => {
+        hidden = true;
+    }, 300);
+    dispatch('dismiss', {
+        message: 'The badge will be dismissed.'
+    });
 };
 </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" />
+    <slot name="closeBtn" {handleHide}>
+      <CloseButton {color} on:click={handleHide} size={large ? 'sm' : 'xs'} name="Remove badge" class={closeBtnClass} />
+    </slot>
   {/if}
 </svelte:element>

package/badges/Badge.svelte.d.ts

@@ -4,17 +4,22 @@ declare const __propDef: {
         [x: string]: any;
         color?: "red" | "yellow" | "green" | "indigo" | "purple" | "pink" | "blue" | "dark" | undefined;
         large?: boolean | undefined;
+        border?: boolean | undefined;
         href?: string | undefined;
         rounded?: boolean | undefined;
         index?: boolean | undefined;
         dismissable?: boolean | undefined;
-        baseClass?: string | undefined;
     };
     events: {
+        dismiss: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
         default: {};
+        closeBtn: {
+            handleHide: () => void;
+        };
     };
 };
 export type BadgeProps = typeof __propDef.props;

package/drawer/Drawer.svelte.d.ts

@@ -14,7 +14,7 @@ declare const __propDef: {
         backdrop?: boolean | undefined;
         bgColor?: string | undefined;
         bgOpacity?: string | undefined;
-        placement?: "top" | "bottom" | "left" | "right" | undefined;
+        placement?: "bottom" | "left" | "right" | "top" | undefined;
         id?: string | undefined;
         divClass?: string | undefined;
         transitionParams?: drawerTransitionParamTypes | undefined;

package/index.d.ts

@@ -41,6 +41,7 @@ export { default as SimpleSearch } from './forms/SimpleSearch.svelte';
 export { default as Textarea } from './forms/Textarea.svelte';
 export { default as Toggle } from './forms/Toggle.svelte';
 export { default as VoiceSearch } from './forms/VoiceSearch.svelte';
+export { default as Indicator } from './indicators/Indicator.svelte';
 export { default as Kbd } from './kbd/Kbd.svelte';
 export { default as ArrowKeyDown } from './kbd/ArrowKeyDown.svelte';
 export { default as ArrowKeyLeft } from './kbd/ArrowKeyLeft.svelte';
@@ -83,6 +84,7 @@ export { default as WidgetPlaceholder } from './skeleton/WidgetPlaceholder.svelt
 export { default as SpeedDial } from './speed-dial/SpeedDial.svelte';
 export { default as SpeedDialButton } from './speed-dial/SpeedDialButton.svelte';
 export { default as Spinner } from './spinners/Spinner.svelte';
+export { default as StepIndicator } from './steps/StepIndicator.svelte';
 export { default as Table } from './tables/Table.svelte';
 export { default as TableBody } from './tables/TableBody.svelte';
 export { default as TableBodyCell } from './tables/TableBodyCell.svelte';

package/index.js

@@ -56,6 +56,8 @@ export { default as SimpleSearch } from './forms/SimpleSearch.svelte';
 export { default as Textarea } from './forms/Textarea.svelte';
 export { default as Toggle } from './forms/Toggle.svelte';
 export { default as VoiceSearch } from './forms/VoiceSearch.svelte';
+// Indicator
+export { default as Indicator } from './indicators/Indicator.svelte';
 // Kbd
 export { default as Kbd } from './kbd/Kbd.svelte';
 export { default as ArrowKeyDown } from './kbd/ArrowKeyDown.svelte';
@@ -111,6 +113,8 @@ export { default as SpeedDial } from './speed-dial/SpeedDial.svelte';
 export { default as SpeedDialButton } from './speed-dial/SpeedDialButton.svelte';
 // Spin
 export { default as Spinner } from './spinners/Spinner.svelte';
+// Steps
+export { default as StepIndicator } from './steps/StepIndicator.svelte';
 // Tables
 export { default as Table } from './tables/Table.svelte';
 export { default as TableBody } from './tables/TableBody.svelte';

package/indicators/Indicator.svelte

@@ -0,0 +1,59 @@
+<script>import classNames from 'classnames';
+export let color = 'gray';
+export let rounded = false;
+export let size = 'md';
+export let border = false;
+export let placement = undefined;
+export let offset = true;
+const colors = {
+    gray: 'bg-gray-200',
+    dark: 'bg-gray-900 dark:bg-gray-700',
+    blue: 'bg-blue-600',
+    green: 'bg-green-500',
+    red: 'bg-red-500',
+    purple: 'bg-purple-500',
+    indigo: 'bg-indigo-500',
+    yellow: 'bg-yellow-300',
+    teal: 'bg-teal-500',
+    none: ''
+};
+const sizes = {
+    xs: 'w-2 h-2',
+    sm: 'w-2.5 h-2.5',
+    md: 'w-3 h-3',
+    lg: 'w-3.5 h-3.5',
+    xl: 'w-6 h-6'
+};
+const placements = {
+    // top
+    'top-left': 'top-0 left-0',
+    'top-center': 'top-0 left-1/2 -translate-x-1/2',
+    'top-right': 'top-0 right-0',
+    // center
+    'center-left': 'top-1/2 -translate-y-1/2 left-0',
+    center: 'top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2',
+    'center-right': 'top-1/2 -translate-y-1/2 right-0',
+    // bottom
+    'bottom-left': 'bottom-0 left-0',
+    'bottom-center': 'bottom-0 left-1/2 -translate-x-1/2',
+    'bottom-right': 'bottom-0 right-0'
+};
+const offsets = {
+    // top
+    'top-left': '-translate-x-1/3 -translate-y-1/3',
+    'top-center': '-translate-y-1/3',
+    'top-right': 'translate-x-1/3 -translate-y-1/3',
+    // center
+    'center-left': '-translate-x-1/3',
+    center: '',
+    'center-right': 'translate-x-1/3',
+    // bottom
+    'bottom-left': '-translate-x-1/3 translate-y-1/3',
+    'bottom-center': 'translate-y-1/3',
+    'bottom-right': 'translate-x-1/3 translate-y-1/3'
+};
+let dotClass;
+$: dotClass = classNames('flex-shrink-0', rounded ? 'rounded' : 'rounded-full', border && 'border-2 border-white dark:border-gray-800', sizes[size], colors[color], $$slots.default && 'inline-flex items-center justify-center', placement && 'absolute ' + placements[placement], placement && offset && offsets[placement], $$props.class);
+</script>
+
+<div class={dotClass}><slot /></div>

package/indicators/Indicator.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        color?: "gray" | "red" | "yellow" | "green" | "indigo" | "purple" | "blue" | "dark" | "none" | "teal" | undefined;
+        rounded?: boolean | undefined;
+        size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+        border?: boolean | undefined;
+        placement?: 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center' | 'center-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | undefined;
+        offset?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type IndicatorProps = typeof __propDef.props;
+export type IndicatorEvents = typeof __propDef.events;
+export type IndicatorSlots = typeof __propDef.slots;
+export default class Indicator extends SvelteComponentTyped<IndicatorProps, IndicatorEvents, IndicatorSlots> {
+}
+export {};

package/list-group/ListgroupItem.svelte

@@ -43,6 +43,7 @@ $: itemClass = classNames('py-2 px-4 w-full text-sm font-medium', 'first:rounded
   </a>
 {:else}
   <button
+    type="button"
     class="inline-flex relative items-center text-left {itemClass}"
     {disabled}
     on:click={() => dispatch('click', $$props)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.29.10",
+  "version": "0.29.12",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -108,7 +108,6 @@
     "./accordions/AccordionItem.svelte": "./accordions/AccordionItem.svelte",
     "./alerts/Alert.svelte": "./alerts/Alert.svelte",
     "./avatar/Avatar.svelte": "./avatar/Avatar.svelte",
-    "./avatar/Dot.svelte": "./avatar/Dot.svelte",
     "./avatar/Placeholder.svelte": "./avatar/Placeholder.svelte",
     "./badges/Badge.svelte": "./badges/Badge.svelte",
     "./breadcrumbs/Breadcrumb.svelte": "./breadcrumbs/Breadcrumb.svelte",
@@ -155,6 +154,7 @@
     "./forms/Toggle.svelte": "./forms/Toggle.svelte",
     "./forms/VoiceSearch.svelte": "./forms/VoiceSearch.svelte",
     ".": "./index.js",
+    "./indicators/Indicator.svelte": "./indicators/Indicator.svelte",
     "./kbd/ArrowKeyDown.svelte": "./kbd/ArrowKeyDown.svelte",
     "./kbd/ArrowKeyLeft.svelte": "./kbd/ArrowKeyLeft.svelte",
     "./kbd/ArrowKeyRight.svelte": "./kbd/ArrowKeyRight.svelte",
@@ -200,6 +200,7 @@
     "./speed-dial/SpeedDial.svelte": "./speed-dial/SpeedDial.svelte",
     "./speed-dial/SpeedDialButton.svelte": "./speed-dial/SpeedDialButton.svelte",
     "./spinners/Spinner.svelte": "./spinners/Spinner.svelte",
+    "./steps/StepIndicator.svelte": "./steps/StepIndicator.svelte",
     "./tables/Table.svelte": "./tables/Table.svelte",
     "./tables/TableBody.svelte": "./tables/TableBody.svelte",
     "./tables/TableBodyCell.svelte": "./tables/TableBodyCell.svelte",

package/steps/StepIndicator.svelte

@@ -0,0 +1,58 @@
+<script>import classNames from 'classnames';
+export let steps = ['Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5'];
+export let currentStep = 1;
+export let size = 'h-2.5';
+export let color = 'blue';
+export let glow = false;
+export let hideLabel = false;
+const completedStepColors = {
+    gray: 'bg-gray-400 dark:bg-gray-500',
+    red: 'bg-red-600 dark:bg-red-900',
+    yellow: 'bg-yellow-400 dark:bg-yellow-600',
+    green: 'bg-green-500 dark:bg-green-900',
+    indigo: 'bg-indigo-500 dark:bg-indigo-900',
+    purple: 'bg-purple-500 dark:bg-purple-900',
+    pink: 'bg-pink-500 dark:bg-pink-900',
+    blue: 'bg-blue-500 dark:bg-blue-900'
+};
+const currentStepColors = {
+    gray: 'bg-gray-700 dark:bg-gray-200',
+    red: 'bg-red-900 dark:bg-red-500',
+    yellow: 'bg-yellow-600 dark:bg-yellow-400',
+    green: 'bg-green-800 dark:bg-green-400',
+    indigo: 'bg-indigo-800 dark:bg-indigo-400',
+    purple: 'bg-purple-800 dark:bg-purple-400',
+    pink: 'bg-pink-800 dark:bg-pink-400',
+    blue: 'bg-blue-800 dark:bg-blue-400'
+};
+</script>
+
+<div {...$$restProps} class={classNames('space-y-2 dark:text-white', $$props.class)}>
+  {#if !hideLabel}
+    <h3 class="text-base font-semibold">{steps[currentStep - 1]}</h3>
+  {/if}
+  <div class={classNames('flex justify-between gap-2 w-full', size)}>
+    {#each steps as step, i}
+      {#if i === currentStep - 1}
+        <div class="relative w-full h-full">
+          <div
+            class={classNames(
+              'relative w-full h-full rounded-sm',
+              currentStepColors[color]
+            )} />
+          {#if glow}
+            <div
+              class={classNames(
+                'absolute -inset-1 rounded-sm blur opacity-30 dark:opacity-25',
+                currentStepColors[color]
+              )} />
+          {/if}
+        </div>
+      {:else if i < currentStep - 1}
+        <div class={classNames('w-full h-full rounded-sm', completedStepColors[color])} />
+      {:else}
+        <div class={classNames('w-full h-full rounded-sm bg-gray-200 dark:bg-gray-700')} />
+      {/if}
+    {/each}
+  </div>
+</div>

package/steps/StepIndicator.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        steps?: string[] | undefined;
+        currentStep?: number | undefined;
+        size?: string | undefined;
+        color?: "gray" | "red" | "yellow" | "green" | "indigo" | "purple" | "pink" | "blue" | undefined;
+        glow?: boolean | undefined;
+        hideLabel?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type StepIndicatorProps = typeof __propDef.props;
+export type StepIndicatorEvents = typeof __propDef.events;
+export type StepIndicatorSlots = typeof __propDef.slots;
+export default class StepIndicator extends SvelteComponentTyped<StepIndicatorProps, StepIndicatorEvents, StepIndicatorSlots> {
+}
+export {};

package/tables/Table.svelte

@@ -13,6 +13,8 @@ const colors = {
     red: 'text-red-100 dark:text-red-100',
     yellow: 'text-yellow-100 dark:text-yellow-100',
     purple: 'text-purple-100 dark:text-purple-100',
+    indigo: 'text-indigo-100 dark:text-indigo-100',
+    pink: 'text-pink-100 dark:text-pink-100',
     custom: ''
 };
 $: setContext('striped', striped);
@@ -22,10 +24,7 @@ $: setContext('color', color);
 </script>
 
 <div class={classNames(divClass, shadow && 'shadow-md sm:rounded-lg')}>
-	<table
-		{...$$restProps}
-		class={classNames('w-full text-left text-sm', colors[color], $$props.class)}
-	>
-		<slot />
-	</table>
+  <table {...$$restProps} class={classNames('w-full text-left text-sm', colors[color], $$props.class)}>
+    <slot />
+  </table>
 </div>

package/tables/Table.svelte.d.ts

@@ -7,7 +7,7 @@ declare const __propDef: {
         hoverable?: boolean | undefined;
         noborder?: boolean | undefined;
         shadow?: boolean | undefined;
-        color?: "red" | "yellow" | "green" | "default" | "purple" | "blue" | "custom" | undefined;
+        color?: "red" | "yellow" | "green" | "indigo" | "default" | "purple" | "pink" | "blue" | "custom" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/tables/TableBodyRow.svelte

@@ -1,13 +1,13 @@
 <script>import classNames from 'classnames';
 import { getContext } from 'svelte';
-export let trClass = 'bg-white';
+export let color = getContext('color');
 const colors = {
-    default: 'dark:border-gray-700 dark:bg-gray-800',
-    blue: 'bg-blue-500 border-b border-blue-400',
-    green: 'bg-green-500 border-b border-green-400',
-    red: 'bg-red-500 border-b border-red-400',
-    yellow: 'bg-yellow-500 border-b border-yellow-400',
-    purple: 'bg-purple-500 border-b border-purple-400',
+    default: 'bg-white dark:bg-gray-800 dark:border-gray-700',
+    blue: 'bg-blue-500 border-blue-400',
+    green: 'bg-green-500 border-green-400',
+    red: 'bg-red-500 border-red-400',
+    yellow: 'bg-yellow-500 border-yellow-400',
+    purple: 'bg-purple-500 border-purple-400',
     custom: ''
 };
 const hoverColors = {
@@ -28,12 +28,10 @@ const stripColors = {
     purple: 'odd:bg-purple-800 even:bg-purple-700 odd:dark:bg-purple-800 even:dark:bg-purple-700',
     custom: ''
 };
-let color = 'default';
-color = getContext('color');
-let trClassfinal;
-$: trClassfinal = classNames(getContext('noborder') ? 'bg-white dark:bg-gray-800' : trClass, colors[color], getContext('hoverable') && hoverColors[color], getContext('striped') && stripColors[color], $$props.class);
+let trClass;
+$: trClass = classNames(!getContext('noborder') && 'border-b last:border-b-0', colors[color], getContext('hoverable') && hoverColors[color], getContext('striped') && stripColors[color], $$props.class);
 </script>
 
-<tr {...$$restProps} class={trClassfinal} on:click on:contextmenu>
+<tr {...$$restProps} class={trClass} on:click on:contextmenu>
   <slot />
 </tr>

package/tables/TableBodyRow.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        trClass?: string | undefined;
+        color?: "red" | "yellow" | "green" | "default" | "purple" | "blue" | "custom" | undefined;
     };
     events: {
         click: MouseEvent;

package/tables/TableHead.svelte

@@ -1,6 +1,7 @@
 <script>import classNames from 'classnames';
 import { getContext } from 'svelte';
 export let theadClass = 'text-xs uppercase';
+export let defaultRow = true;
 let color;
 color = getContext('color');
 let noborder = getContext('noborder');
@@ -31,7 +32,11 @@ $: theadClassfinal = classNames(theadClass, textColor, striped && borderColors,
 </script>
 
 <thead {...$$restProps} class={theadClassfinal}>
-  <tr>
+  {#if defaultRow}
+    <tr>
+      <slot />
+    </tr>
+  {:else}
     <slot />
-  </tr>
+  {/if}
 </thead>

package/tables/TableHead.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         theadClass?: string | undefined;
+        defaultRow?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/typography/Blockquote.svelte.d.ts

@@ -8,7 +8,7 @@ declare const __propDef: {
         bgClass?: string | undefined;
         bg?: boolean | undefined;
         baseClass?: string | undefined;
-        alignment?: "left" | "right" | "center" | undefined;
+        alignment?: "center" | "left" | "right" | undefined;
         size?: "xs" | "sm" | "lg" | "xl" | "base" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
     };
     events: {

package/typography/P.svelte.d.ts

@@ -4,7 +4,7 @@ declare const __propDef: {
         [x: string]: any;
         color?: string | undefined;
         height?: "normal" | "relaxed" | "loose" | undefined;
-        align?: "left" | "right" | "center" | undefined;
+        align?: "center" | "left" | "right" | undefined;
         justify?: boolean | undefined;
         italic?: boolean | undefined;
         firstupper?: boolean | undefined;

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 type DotProps = typeof __propDef.props;
-export type DotEvents = typeof __propDef.events;
-export type DotSlots = typeof __propDef.slots;
-export default class Dot extends SvelteComponentTyped<DotProps, DotEvents, DotSlots> {
-}
-export {};