flowbite-svelte 0.18.1 → 0.18.4

package/CHANGELOG.md

@@ -2,6 +2,35 @@
 
 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.18.4](https://github.com/themesberg/flowbite-svelte/compare/v0.18.3...v0.18.4) (2022-06-23)
+
+
+### Features
+
+* add button colored shadows ([96e20c5](https://github.com/themesberg/flowbite-svelte/commit/96e20c568f2fcc7d51e9a430fcb0007f02290bd2))
+* add outline button ([aa14b26](https://github.com/themesberg/flowbite-svelte/commit/aa14b267ec1bf283ca3684fa956776b6ce4e6932))
+* add outlineStyle white for loader ([7769c19](https://github.com/themesberg/flowbite-svelte/commit/7769c19df48cac833fa08ce659ebfa651160bbf5))
+
+### [0.18.3](https://github.com/themesberg/flowbite-svelte/compare/v0.18.2...v0.18.3) (2022-06-22)
+
+
+### Bug Fixes
+
+* update Input component ([94df473](https://github.com/themesberg/flowbite-svelte/commit/94df473935baaa4f22124ceb0d6501a1359bd4b4))
+
+### [0.18.2](https://github.com/themesberg/flowbite-svelte/compare/v0.18.1...v0.18.2) (2022-06-22)
+
+
+### Features
+
+* make button styles reactive ([d74dd9b](https://github.com/themesberg/flowbite-svelte/commit/d74dd9b37c58716e33ca72ce5058b557a6b43ced))
+
+
+### Bug Fixes
+
+* make disabled button unclickable ([df1c66d](https://github.com/themesberg/flowbite-svelte/commit/df1c66d08e6090a66cff12d2d41f6b72a93324dc))
+* update checkbox, add Label and Helper components, update checkbox page ([07de620](https://github.com/themesberg/flowbite-svelte/commit/07de6208e256cb364d9ae1ed02b321168119514d))
+
 ### [0.18.1](https://github.com/themesberg/flowbite-svelte/compare/v0.18.0...v0.18.1) (2022-06-18)
 
 

package/buttons/Button.svelte

@@ -1,92 +1,135 @@
-<script>export let rounded = false;
-export let textSize = 'text-sm';
-export let btnColor = 'blue';
-export let type = 'button';
-export let disabled = false;
-let paddings;
-if (textSize === 'text-xs') {
-    paddings = 'py-2 px-3';
-}
-else if (textSize === 'text-sm') {
-    paddings = 'py-2.5 px-5';
-}
-else if (textSize === 'text-base') {
-    paddings = 'py-3 px-6';
-}
-else {
-    paddings = 'py-2.5 px-5';
-}
-let buttonClass;
-let round = rounded ? 'rounded-full' : 'rounded-lg';
-switch (btnColor) {
-    default:
-    case 'blue':
-        buttonClass = `text-white text-center font-medium ${round} ${textSize} ${paddings}`;
-        if (disabled)
-            buttonClass += ' bg-blue-400 dark:bg-blue-500 cursor-not-allowed';
-        else
-            buttonClass += ' bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
-        break;
-    case 'blue-outline':
-        buttonClass = `text-blue-700 hover:text-white border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg ${textSize} ${paddings} text-center dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-600 dark:focus:ring-blue-800`;
-        break;
-    case 'dark':
-        buttonClass = `text-white text-center font-medium ${round} ${textSize} ${paddings}`;
-        if (disabled)
-            buttonClass += ' bg-gray-400 dark:bg-gray-500 cursor-not-allowed';
-        else
-            buttonClass += ' bg-gray-800 hover:bg-gray-900 focus:ring-4 focus:ring-gray-300 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-800 dark:border-gray-700';
-        break;
-    case 'dark-outline':
-        buttonClass = `text-gray-900 hover:text-white border border-gray-800 hover:bg-gray-900 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg ${textSize} ${paddings} text-center dark:border-gray-600 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-800`;
-        break;
-    case 'light':
-        buttonClass = `text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium ${round} ${textSize} ${paddings} text-center dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700`;
-        break;
-    case 'green':
-        buttonClass = `text-white text-center font-medium ${round} ${textSize} ${paddings}`;
-        if (disabled)
-            buttonClass += ' bg-green-400 dark:bg-green-500 cursor-not-allowed';
-        else
-            buttonClass += ' bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800';
-        break;
-    case 'green-outline':
-        buttonClass = `text-green-700 hover:text-white border border-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg ${textSize} ${paddings} text-center dark:border-green-500 dark:text-green-500 dark:hover:text-white dark:hover:bg-green-600 dark:focus:ring-green-800`;
-        break;
-    case 'red':
-        buttonClass = `text-white text-center font-medium ${round} ${textSize} ${paddings}`;
-        if (disabled)
-            buttonClass += ' bg-red-400 dark:bg-red-500 cursor-not-allowed';
-        else
-            buttonClass += ' bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900';
-        break;
-    case 'red-outline':
-        buttonClass = `text-red-700 hover:text-white border border-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg ${textSize} ${paddings} text-center dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600 dark:focus:ring-red-900`;
-        break;
-    case 'yellow':
-        buttonClass = `text-white text-center font-medium ${round} ${textSize} ${paddings}`;
-        if (disabled)
-            buttonClass += ' bg-yellow-400 dark:bg-yellow-500 cursor-not-allowed';
-        else
-            buttonClass += ' bg-yellow-400 hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 dark:focus:ring-yellow-900';
-        break;
-    case 'yellow-outline':
-        buttonClass = `text-yellow-400 hover:text-white border border-yellow-400 hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg ${textSize} ${paddings} text-center dark:border-yellow-300 dark:text-yellow-300 dark:hover:text-white dark:hover:bg-yellow-400 dark:focus:ring-yellow-900`;
-        break;
-    case 'purple':
-        buttonClass = `text-white text-center font-medium ${round} ${textSize} ${paddings}`;
-        if (disabled)
-            buttonClass += ' bg-purple-400 dark:bg-purple-500 cursor-not-allowed';
-        else
-            buttonClass += ' bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900';
-        break;
-    case 'purple-outline':
-        buttonClass = `text-purple-700 hover:text-white border border-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg ${textSize} ${paddings} text-center dark:border-purple-400 dark:text-purple-400 dark:hover:text-white dark:hover:bg-purple-500 dark:focus:ring-purple-900`;
-        break;
-}
-buttonClass += ' items-center inline-flex';
+<script>import classNames from 'classnames';
+export let label = '';
+export let pill = false;
+export let outline = false;
+export let color = 'blue';
+export let size = 'md';
+export let icon = undefined;
+export let gradientMonochrome = null;
+export let gradientDuoTone = null;
+export let coloredShadow = null;
+export let positionInGroup = null;
+export let outlineStyle = null;
+const colorClasses = {
+    blue: 'text-white bg-blue-700 border border-transparent hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 disabled:hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 dark:disabled:hover:bg-blue-600',
+    alternative: 'text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 hover:text-blue-700 disabled:hover:bg-white focus:ring-blue-700 focus:text-blue-700 dark:bg-transparent dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 focus:ring-2 dark:disabled:hover:bg-gray-800',
+    dark: 'text-white bg-gray-800 border border-transparent hover:bg-gray-900 focus:ring-4 focus:ring-gray-300 disabled:hover:bg-gray-800 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-800 dark:border-gray-700 dark:disabled:hover:bg-gray-800',
+    light: 'text-gray-900 bg-white border border-gray-300 hover:bg-gray-100 focus:ring-4 focus:ring-blue-300 disabled:hover:bg-white dark:bg-gray-600 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-700 dark:focus:ring-gray-700',
+    green: 'text-white bg-green-700 border border-transparent hover:bg-green-800 focus:ring-4 focus:ring-green-300 disabled:hover:bg-green-700 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800 dark:disabled:hover:bg-green-600',
+    red: 'text-white bg-red-700 border border-transparent hover:bg-red-800 focus:ring-4 focus:ring-red-300 disabled:hover:bg-red-800 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900 dark:disabled:hover:bg-red-600',
+    yellow: 'text-white bg-yellow-400 border border-transparent hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 disabled:hover:bg-yellow-400 dark:focus:ring-yellow-900 dark:disabled:hover:bg-yellow-400',
+    purple: 'text-white bg-purple-700 border border-transparent hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 disabled:hover:bg-purple-700 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900 dark:disabled:hover:bg-purple-600',
+    none: ''
+};
+const gradientMonochromeClasses = {
+    blue: 'text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 ',
+    green: 'text-white bg-gradient-to-r from-green-400 via-green-500 to-green-600 hover:bg-gradient-to-br focus:ring-4 focus:ring-green-300 dark:focus:ring-green-800',
+    cyan: 'text-white bg-gradient-to-r from-cyan-400 via-cyan-500 to-cyan-600 hover:bg-gradient-to-br focus:ring-4 focus:ring-cyan-300 dark:focus:ring-cyan-800',
+    teal: 'text-white bg-gradient-to-r from-teal-400 via-teal-500 to-teal-600 hover:bg-gradient-to-br focus:ring-4 focus:ring-teal-300 dark:focus:ring-teal-800',
+    lime: 'text-gray-900 bg-gradient-to-r from-lime-200 via-lime-400 to-lime-500 hover:bg-gradient-to-br focus:ring-4 focus:ring-lime-300 dark:focus:ring-lime-800',
+    red: 'text-white bg-gradient-to-r from-red-400 via-red-500 to-red-600 hover:bg-gradient-to-br focus:ring-4 focus:ring-red-300 dark:focus:ring-red-800',
+    pink: 'text-white bg-gradient-to-r from-pink-400 via-pink-500 to-pink-600 hover:bg-gradient-to-br focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-800',
+    purple: 'text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 hover:bg-gradient-to-br focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-800'
+};
+const gradientDuoToneClasses = {
+    purpleToBlue: 'text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800',
+    cyanToBlue: 'text-white bg-gradient-to-r from-cyan-500 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:ring-cyan-300 dark:focus:ring-cyan-800',
+    greenToBlue: 'text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-4 focus:ring-green-200 dark:focus:ring-green-800',
+    purpleToPink: 'text-white bg-gradient-to-r from-purple-500 to-pink-500 hover:bg-gradient-to-l focus:ring-4 focus:ring-purple-200 dark:focus:ring-purple-800',
+    pinkToOrange: 'text-white bg-gradient-to-br from-pink-500 to-orange-400 hover:bg-gradient-to-bl focus:ring-4 focus:ring-pink-200 dark:focus:ring-pink-800',
+    tealToLime: 'text-gray-900 bg-gradient-to-r from-teal-200 to-lime-200 hover:bg-gradient-to-l hover:from-teal-200 hover:to-lime-200 hover:!text-gray-900 focus:ring-4 focus:ring-lime-200 dark:focus:ring-teal-700',
+    redToYellow: 'text-gray-900 bg-gradient-to-r from-red-200 via-red-300 to-yellow-200 hover:bg-gradient-to-bl focus:ring-4 focus:ring-red-100 dark:focus:ring-red-400'
+};
+const coloredShadowClasses = {
+    blue: 'text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 shadow-lg shadow-blue-500/50 dark:shadow-lg dark:shadow-blue-800/80',
+    green: 'text-white bg-gradient-to-r from-green-400 via-green-500 to-green-600 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-green-300 dark:focus:ring-green-800 shadow-lg shadow-green-500/50 dark:shadow-lg dark:shadow-green-800/80',
+    cyan: 'text-white bg-gradient-to-r from-cyan-400 via-cyan-500 to-cyan-600 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-cyan-300 dark:focus:ring-cyan-800 shadow-lg shadow-cyan-500/50 dark:shadow-lg dark:shadow-cyan-800/80',
+    teal: 'text-white bg-gradient-to-r from-teal-400 via-teal-500 to-teal-600 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-teal-300 dark:focus:ring-teal-800 shadow-lg shadow-teal-500/50 dark:shadow-lg dark:shadow-teal-800/80 ',
+    lime: 'text-gray-900 bg-gradient-to-r from-lime-200 via-lime-400 to-lime-500 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-lime-300 dark:focus:ring-lime-800 shadow-lg shadow-lime-500/50 dark:shadow-lg dark:shadow-lime-800/80',
+    red: 'text-white bg-gradient-to-r from-red-400 via-red-500 to-red-600 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 shadow-lg shadow-red-500/50 dark:shadow-lg dark:shadow-red-800/80 ',
+    pink: 'text-white bg-gradient-to-r from-pink-400 via-pink-500 to-pink-600 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-pink-300 dark:focus:ring-pink-800 shadow-lg shadow-pink-500/50 dark:shadow-lg dark:shadow-pink-800/80',
+    purple: 'text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-purple-300 dark:focus:ring-purple-800 shadow-lg shadow-purple-500/50 dark:shadow-lg dark:shadow-purple-800/80'
+};
+const outlineClasses = {
+    default: 'text-blue-700 hover:text-white border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300',
+    dark: 'text-gray-900 hover:text-white border border-gray-800 hover:bg-gray-900 focus:ring-4 focus:outline-none focus:ring-gray-300',
+    green: 'text-green-700 hover:text-white border border-green-700 hover:bg-green-800 focus:ring-4 focus:outline-none focus:ring-green-300 ',
+    red: 'text-red-700 hover:text-white border border-red-700 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300',
+    yellow: 'text-yellow-400 hover:text-white border border-yellow-400 hover:bg-yellow-500 focus:ring-4 focus:outline-none focus:ring-yellow-300',
+    purple: 'text-purple-700 hover:text-white border border-purple-700 hover:bg-purple-800 focus:ring-4 focus:outline-none focus:ring-purple-300',
+    white: 'text-gray-900 bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:outline-none focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700'
+};
+const sizeClasses = {
+    xs: 'text-xs px-2 py-1',
+    sm: 'text-sm px-3 py-1.5',
+    md: 'text-sm px-4 py-2',
+    lg: 'text-base px-5 py-2.5',
+    xl: 'text-base px-6 py-3'
+};
+const iconSizeClasses = {
+    xs: '!px-1',
+    sm: '!px-1.5',
+    md: '!px-2',
+    lg: '!p-2.5',
+    xl: '!p-3'
+};
 </script>
 
-<button {type} class="{buttonClass} {$$props.class ? $$props.class : ''}" on:click>
-	<slot>Read more</slot>
+<button
+	on:click
+	data-testid="button-element"
+	type="button"
+	{...$$props}
+	class={classNames(
+		'group flex h-min w-fit items-center justify-center p-0.5 text-center font-medium focus:z-10',
+		pill ? 'rounded-full' : 'rounded-lg',
+		!gradientMonochrome &&
+			!gradientDuoTone &&
+			!coloredShadow &&
+			!outlineStyle &&
+			colorClasses[color],
+		!gradientDuoTone && gradientMonochrome && gradientMonochromeClasses[gradientMonochrome],
+		gradientDuoTone && gradientDuoToneClasses[gradientDuoTone],
+		coloredShadow && coloredShadowClasses[coloredShadow],
+		outlineStyle && outlineClasses[outlineStyle],
+		{
+			'border border-gray-900 dark:border-white': color === 'alternative' && outline,
+			'cursor-not-allowed opacity-50': $$props.disabled,
+			'focus:!ring-2': !!positionInGroup,
+			'rounded-r-none': positionInGroup === 'start',
+			'!rounded-none border-l-0 pl-0': positionInGroup === 'middle',
+			'rounded-l-none border-l-0 pl-0': positionInGroup === 'end'
+		},
+		$$props.class
+	)}
+>
+	<span
+		class={classNames(
+			'flex items-center',
+			sizeClasses[size],
+			outline && pill ? 'rounded-full' : 'rounded-md',
+			{
+				'bg-white text-gray-900 transition-all duration-75 ease-in group-hover:bg-opacity-0 group-hover:text-inherit dark:bg-gray-900 dark:text-white':
+					outline,
+				'rounded-r-none': positionInGroup === 'start',
+				'!rounded-none': positionInGroup === 'middle',
+				'rounded-l-none': positionInGroup === 'end',
+
+				[iconSizeClasses[size]]: !!icon
+			}
+		)}
+	>
+		{#if icon}
+			<svelte:component this={icon} class="h-5 w-5" />
+		{:else}
+			<slot />
+			{#if label}
+				<span
+					class="ml-2 inline-flex h-4 w-4 items-center justify-center rounded-full bg-blue-200 text-xs font-semibold text-blue-800"
+				>
+					{label}
+				</span>
+			{/if}
+		{/if}
+	</span>
 </button>

package/buttons/Button.svelte.d.ts

@@ -1,13 +1,19 @@
 import { SvelteComponentTyped } from "svelte";
-import type { Buttontypes, ButtonType, Textsize } from '../types';
+import type { SvelteComponent } from 'svelte';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        rounded?: boolean;
-        textSize?: Textsize;
-        btnColor?: Buttontypes;
-        type?: ButtonType;
-        disabled?: boolean;
+        label?: string;
+        pill?: boolean;
+        outline?: boolean;
+        color?: 'blue' | 'alternative' | 'dark' | 'light' | 'green' | 'red' | 'yellow' | 'purple' | 'none';
+        size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+        icon?: typeof SvelteComponent | undefined;
+        gradientMonochrome?: 'blue' | 'green' | 'cyan' | 'teal' | 'lime' | 'red' | 'pink' | 'purple' | null;
+        gradientDuoTone?: 'purpleToBlue' | 'cyanToBlue' | 'greenToBlue' | 'purpleToPink' | 'pinkToOrange' | 'tealToLime' | 'redToYellow' | null;
+        coloredShadow?: 'blue' | 'green' | 'cyan' | 'teal' | 'lime' | 'red' | 'pink' | 'purple' | null;
+        positionInGroup?: 'start' | 'middle' | 'end' | null;
+        outlineStyle?: 'default' | 'dark' | 'green' | 'red' | 'yellow' | 'purple' | 'white' | null;
     };
     events: {
         click: MouseEvent;

package/forms/Checkbox.svelte

@@ -1,82 +1,21 @@
-<script>export let divClass = 'flex items-center mr-4';
+<script>import classNames from 'classnames';
 export let inputClass = 'w-4 h-4 bg-gray-100 rounded border-gray-300 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 ';
-export let labelClass = 'ml-2 text-sm font-medium text-gray-900 dark:text-gray-300';
-export let disabled = false;
-export let name = '';
-export let divHelperClass = 'flex items-center h-5';
-export let labelHelperClass = 'font-medium text-gray-900 dark:text-gray-300';
-export let helperClass = 'text-xs font-normal text-gray-500 dark:text-gray-300';
-export let color = 'blue';
-export let helper = '';
-export let id = '';
-export let value = '';
-export let label = '';
 export let checked = false;
-if (disabled) {
-    labelClass = 'ml-2 text-sm font-medium text-gray-400 dark:text-gray-500';
-}
-if (color === 'red') {
-    inputClass += 'text-red-600 focus:ring-red-500 dark:focus:ring-red-600';
-}
-else if (color === 'green') {
-    inputClass += 'text-green-600 focus:ring-green-500 dark:focus:ring-green-600';
-}
-else if (color === 'purple') {
-    inputClass += 'text-purple-600 focus:ring-purple-500 dark:focus:ring-purple-600';
-}
-else if (color === 'teal') {
-    inputClass += 'text-teal-600 focus:ring-teal-500 dark:focus:ring-teal-600';
-}
-else if (color === 'yellow') {
-    inputClass += 'text-yellow-400 focus:ring-yellow-500 dark:focus:ring-yellow-600';
-}
-else if (color === 'orange') {
-    inputClass += 'text-orange-500 focus:ring-orange-500 dark:focus:ring-orange-600';
-}
-else {
-    inputClass += 'text-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600';
-}
+export let color = 'blue';
+const colorClasses = {
+    red: 'text-red-600 focus:ring-red-500 dark:focus:ring-red-600',
+    green: 'text-green-600 focus:ring-green-500 dark:focus:ring-green-600',
+    purple: 'text-purple-600 focus:ring-purple-500 dark:focus:ring-purple-600',
+    teal: 'text-teal-600 focus:ring-teal-500 dark:focus:ring-teal-600',
+    yellow: 'text-yellow-400 focus:ring-yellow-500 dark:focus:ring-yellow-600',
+    orange: 'text-orange-500 focus:ring-orange-500 dark:focus:ring-orange-600',
+    blue: 'text-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600'
+};
 </script>
 
-{#if helper}
-	<div class="flex">
-		<div class={divHelperClass}>
-			<input
-				{id}
-				type="checkbox"
-				bind:checked
-				{name}
-				{value}
-				class={inputClass}
-				aria-labelledby={id}
-				aria-describedby={id}
-				{disabled}
-				{...$$restProps}
-			/>
-		</div>
-		<div class="ml-2 text-sm">
-			<label for={id} class={labelHelperClass}>
-				{@html label}
-			</label>
-			<p id="{id}-helper-radio-text" class={helperClass}>{helper}</p>
-		</div>
-	</div>
-{:else}
-	<div class={divClass}>
-		<input
-			{id}
-			type="checkbox"
-			bind:checked
-			{name}
-			{value}
-			class={inputClass}
-			aria-labelledby={id}
-			aria-describedby={id}
-			{disabled}
-			{...$$restProps}
-		/>
-		<label for={id} class={labelClass}>
-			{@html label}
-		</label>
-	</div>
-{/if}
+<input
+	{...$$restProps}
+	type="checkbox"
+	bind:checked
+	class={classNames(inputClass, colorClasses[color], $$props.class)}
+/>

package/forms/Checkbox.svelte.d.ts

@@ -3,20 +3,9 @@ import type { FormColorType } from '../types';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        divClass?: string;
         inputClass?: string;
-        labelClass?: string;
-        disabled?: boolean;
-        name?: string;
-        divHelperClass?: string;
-        labelHelperClass?: string;
-        helperClass?: string;
-        color?: FormColorType;
-        helper?: string;
-        id?: string;
-        value?: string;
-        label?: string;
         checked?: boolean;
+        color?: FormColorType;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/forms/Helper.svelte

@@ -0,0 +1,14 @@
+<script>import classNames from 'classnames';
+export let helperClass = 'text-xs font-normal text-gray-500 dark:text-gray-300';
+export let color = 'gray';
+const colorClasses = {
+    gray: 'text-gray-900 dark:text-gray-300',
+    green: 'text-green-700 dark:text-green-500',
+    red: 'text-red-700 dark:text-red-500',
+    disabled: 'text-gray-400 dark:text-gray-500'
+};
+</script>
+
+<p {...$$restProps} class={classNames(helperClass, colorClasses[color], $$props.class)}>
+	<slot />
+</p>

package/forms/Helper.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        helperClass?: string;
+        color?: 'gray' | 'green' | 'red' | 'disabled';
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type HelperProps = typeof __propDef.props;
+export declare type HelperEvents = typeof __propDef.events;
+export declare type HelperSlots = typeof __propDef.slots;
+export default class Helper extends SvelteComponentTyped<HelperProps, HelperEvents, HelperSlots> {
+}
+export {};

package/forms/Iconinput.svelte

@@ -1,16 +1,10 @@
-<script>import generateId from '../utils/generateId.js';
-export let label;
-export let id = generateId();
-export let type;
+<script>import classNames from 'classnames';
+export let type = 'text';
 export let value = '';
 export let icon;
-export let helper = '';
-export let placeholder = '';
 export let noBorder = false;
-export let labelClass = 'block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300';
 export let inputClass = 'rounded-none rounded-r-lg bg-gray-50 border border-gray-300 text-gray-900 focus:ring-blue-500 focus:border-blue-500 block flex-1 min-w-0 w-full text-sm border-gray-300 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';
 export let spanClass = 'inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 rounded-l-md border border-r-0 border-gray-300 dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600';
-export let helperClass = 'mt-2 text-sm text-gray-500 dark:text-gray-400';
 export let noBorderInputClass = 'bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 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';
 export let noBorderDivClass = 'flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none';
 export let iconClass = 'h-4 w-4 mr-2';
@@ -20,24 +14,23 @@ function setType(node) {
 }
 </script>
 
-<div class={$$props.class ? $$props.class : ''}>
-	<label for={id} class={labelClass}>{label}</label>
-	{#if noBorder}
-		<div class="relative">
-			<div class={noBorderDivClass}>
-				<svelte:component this={icon} size={iconSize} class={iconClass} />
-			</div>
-			<input bind:value use:setType {id} class={noBorderInputClass} {placeholder} {...$$restProps} />
+{#if noBorder}
+	<div class="relative">
+		<div class={noBorderDivClass}>
+			<svelte:component this={icon} size={iconSize} class={iconClass} />
 		</div>
-	{:else}
-		<div class="flex">
-			<span class={spanClass}>
-				<svelte:component this={icon} size={iconSize} class={iconClass} />
-			</span>
-			<input {type} {id} class={inputClass} {placeholder} {...$$restProps} />
-		</div>
-	{/if}
-	{#if helper}
-		<p class={helperClass}>{@html helper}</p>
-	{/if}
-</div>
+		<input
+			{...$$restProps}
+			bind:value
+			use:setType
+			class={classNames(noBorderInputClass, $$props.class)}
+		/>
+	</div>
+{:else}
+	<div class="flex">
+		<span class={spanClass}>
+			<svelte:component this={icon} size={iconSize} class={iconClass} />
+		</span>
+		<input {...$$restProps} {type} class={classNames(inputClass, $$props.class)} />
+	</div>
+{/if}

package/forms/Iconinput.svelte.d.ts

@@ -4,18 +4,12 @@ import type { SvelteComponent } from 'svelte';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        label: string;
-        id?: string;
-        type: InputType;
+        type?: InputType;
         value?: string;
         icon: typeof SvelteComponent;
-        helper?: string;
-        placeholder?: string;
         noBorder?: boolean;
-        labelClass?: string;
         inputClass?: string;
         spanClass?: string;
-        helperClass?: string;
         noBorderInputClass?: string;
         noBorderDivClass?: string;
         iconClass?: string;

package/forms/Input.svelte

@@ -1,52 +1,38 @@
-<script>import generateId from '../utils/generateId.js';
+<script>import classNames from 'classnames';
 export let type = 'text';
 export let value = '';
-export let name = '';
-export let id = generateId();
-export let label = '';
-export let required = false;
-export let placeholder = '';
-export let size = 'text-sm';
-let padding = '';
-export let inputClass = `bg-gray-50 border border-gray-300 text-gray-900 ${size} rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ${padding} 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`;
-export let labelClass = 'block mb-4 text-sm font-medium text-gray-900 dark:text-gray-300';
-export let disabled = false;
-export let readonly = false;
-export let helper = '';
-export let helperClass = 'text-sm text-gray-500 dark:text-gray-400';
+export let size = 'md';
+export let inputClass = 'block w-full border disabled:cursor-not-allowed disabled:opacity-50 rounded-lg';
+export let color = 'base';
+const colorClasses = {
+    base: 'bg-gray-50 border-gray-300 text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500',
+    green: 'border-green-500 bg-green-50 text-green-900 placeholder-green-700 focus:border-green-500 focus:ring-green-500 dark:border-green-400 dark:bg-green-100 dark:focus:border-green-500 dark:focus:ring-green-500',
+    red: 'border-red-500 bg-red-50 text-red-900 placeholder-red-700 focus:border-red-500 focus:ring-red-500 dark:border-red-400 dark:bg-red-100 dark:focus:border-red-500 dark:focus:ring-red-500'
+};
 export let ref = null;
-if (size === 'sm:text-md') {
-    padding = 'p-4';
-}
-else if (size === 'text-sm') {
-    padding = 'p-2.5';
-}
-else {
-    padding = 'p-2';
-}
 // you need to this to avoid 2-way binding
 function setType(node) {
     node.type = type;
 }
 </script>
 
-<div class={$$props.class ? $$props.class : ''}>
-	{#if label}
-		<label for={id} class={labelClass}>{label}</label>
-	{/if}
-	<input
-		bind:value
-		bind:this={ref}
-		{name}
-		use:setType
-		{id}
-		class={inputClass}
-		{placeholder}
-		{required}
-		{disabled}
-		{readonly}
-	/>
-	{#if helper}
-		<p class={helperClass}>{@html helper}</p>
-	{/if}
-</div>
+<input
+	{...$$restProps}
+	bind:value
+	bind:this={ref}
+	use:setType
+	class={classNames(
+		inputClass,
+		colorClasses[color],
+		{
+			// 'pl-10': icon !== null,
+			// 'rounded-lg': !($$slots.addon || addon),
+			// 'rounded-r-lg': $$slots.addon || addon,
+			// 'shadow-sm dark:shadow-sm-light': shadow,
+			'p-2 sm:text-xs': size === 'sm',
+			'p-2.5 text-sm': size === 'md',
+			'sm:text-md p-4': size === 'lg'
+		},
+		$$props.class
+	)}
+/>

package/forms/Input.svelte.d.ts

@@ -5,18 +5,9 @@ declare const __propDef: {
         [x: string]: any;
         type?: InputType;
         value?: string;
-        name?: string;
-        id?: string;
-        label?: string;
-        required?: boolean;
-        placeholder?: string;
-        size?: 'sm:text-md' | 'text-sm' | 'sm:text-xs';
+        size?: 'sm' | 'md' | 'lg';
         inputClass?: string;
-        labelClass?: string;
-        disabled?: boolean;
-        readonly?: boolean;
-        helper?: string;
-        helperClass?: string;
+        color?: 'base' | 'green' | 'red';
         ref?: HTMLElement;
     };
     events: {

package/forms/Label.svelte

@@ -0,0 +1,15 @@
+<script>import classNames from 'classnames';
+export let color = 'gray';
+export let labelClass = 'text-sm font-medium';
+const colorClasses = {
+    gray: 'text-gray-900 dark:text-gray-300',
+    green: 'text-green-700 dark:text-green-500',
+    red: 'text-red-700 dark:text-red-500',
+    disabled: 'text-gray-400 dark:text-gray-500'
+};
+</script>
+
+<!-- svelte-ignore a11y-label-has-associated-control -->
+<label {...$$restProps} class={classNames(labelClass, colorClasses[color], $$props.class)}>
+	<slot />
+</label>

package/forms/Label.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        color?: 'gray' | 'green' | 'red' | 'disabled';
+        labelClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type LabelProps = typeof __propDef.props;
+export declare type LabelEvents = typeof __propDef.events;
+export declare type LabelSlots = typeof __propDef.slots;
+export default class Label extends SvelteComponentTyped<LabelProps, LabelEvents, LabelSlots> {
+}
+export {};

package/index.d.ts

@@ -31,11 +31,12 @@ export { default as LogoFooter } from './footer/LogoFooter.svelte';
 export { default as SocialMediaFooter } from './footer/SocialMediaFooter.svelte';
 export { default as SitemapFooter } from './footer/SitemapFooter.svelte';
 export { default as Checkbox } from './forms/Checkbox.svelte';
-export { default as CheckboxInline } from './forms/CheckboxInline.svelte';
 export { default as Fileupload } from './forms/Fileupload.svelte';
 export { default as FloatingLabelInput } from './forms/FloatingLabelInput.svelte';
+export { default as Helper } from './forms/Helper.svelte';
 export { default as Iconinput } from './forms/Iconinput.svelte';
 export { default as Input } from './forms/Input.svelte';
+export { default as Label } from './forms/Label.svelte';
 export { default as RadioInline } from './forms/RadioInline.svelte';
 export { default as Radio } from './forms/Radio.svelte';
 export { default as Range } from './forms/Range.svelte';

package/index.js

@@ -44,11 +44,12 @@ export { default as SocialMediaFooter } from './footer/SocialMediaFooter.svelte'
 export { default as SitemapFooter } from './footer/SitemapFooter.svelte';
 // Forms
 export { default as Checkbox } from './forms/Checkbox.svelte';
-export { default as CheckboxInline } from './forms/CheckboxInline.svelte';
 export { default as Fileupload } from './forms/Fileupload.svelte';
 export { default as FloatingLabelInput } from './forms/FloatingLabelInput.svelte';
+export { default as Helper } from './forms/Helper.svelte';
 export { default as Iconinput } from './forms/Iconinput.svelte';
 export { default as Input } from './forms/Input.svelte';
+export { default as Label } from './forms/Label.svelte';
 export { default as RadioInline } from './forms/RadioInline.svelte';
 export { default as Radio } from './forms/Radio.svelte';
 export { default as Range } from './forms/Range.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.18.1",
+  "version": "0.18.4",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -130,11 +130,12 @@
     "./footer/SitemapFooter.svelte": "./footer/SitemapFooter.svelte",
     "./footer/SocialMediaFooter.svelte": "./footer/SocialMediaFooter.svelte",
     "./forms/Checkbox.svelte": "./forms/Checkbox.svelte",
-    "./forms/CheckboxInline.svelte": "./forms/CheckboxInline.svelte",
     "./forms/Fileupload.svelte": "./forms/Fileupload.svelte",
     "./forms/FloatingLabelInput.svelte": "./forms/FloatingLabelInput.svelte",
+    "./forms/Helper.svelte": "./forms/Helper.svelte",
     "./forms/Iconinput.svelte": "./forms/Iconinput.svelte",
     "./forms/Input.svelte": "./forms/Input.svelte",
+    "./forms/Label.svelte": "./forms/Label.svelte",
     "./forms/Radio.svelte": "./forms/Radio.svelte",
     "./forms/RadioInline.svelte": "./forms/RadioInline.svelte",
     "./forms/Range.svelte": "./forms/Range.svelte",

package/forms/CheckboxInline.svelte

@@ -1,3 +0,0 @@
-<div class="flex">
-	<slot />
-</div>

package/forms/CheckboxInline.svelte.d.ts

@@ -1,23 +0,0 @@
-/** @typedef {typeof __propDef.props}  CheckboxInlineProps */
-/** @typedef {typeof __propDef.events}  CheckboxInlineEvents */
-/** @typedef {typeof __propDef.slots}  CheckboxInlineSlots */
-export default class CheckboxInline extends SvelteComponentTyped<{}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type CheckboxInlineProps = typeof __propDef.props;
-export type CheckboxInlineEvents = typeof __propDef.events;
-export type CheckboxInlineSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {};
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export {};