flowbite-svelte 0.46.1 → 0.46.2

package/dist/bottom-navigation/BottomNavItem.svelte

@@ -1,45 +1,44 @@
-<script>import { getContext } from 'svelte';
-import { twMerge } from 'tailwind-merge';
-export let btnName = '';
-export let appBtnPosition = 'middle';
-export let activeClass = undefined;
-export let href = '';
+<script>import { getContext } from "svelte";
+import { twMerge } from "tailwind-merge";
+export let btnName = "";
+export let appBtnPosition = "middle";
+export let activeClass = void 0;
+export let href = "";
 export let exact = true;
-const navType = getContext('navType');
-const context = getContext('bottomNavType') ?? {};
-const activeUrlStore = getContext('activeUrl');
-let navUrl = '';
+const navType = getContext("navType");
+const context = getContext("bottomNavType") ?? {};
+const activeUrlStore = getContext("activeUrl");
+let navUrl = "";
 activeUrlStore.subscribe((value) => {
-    navUrl = value;
+  navUrl = value;
 });
 $: active = navUrl && exact ? href === navUrl : navUrl ? navUrl.startsWith(href) : false;
 const btnClasses = {
-    default: 'inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group',
-    border: 'inline-flex flex-col items-center justify-center px-5 border-gray-200 border-x hover:bg-gray-50 dark:hover:bg-gray-800 group dark:border-gray-600',
-    application: '',
-    pagination: 'inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group',
-    group: 'inline-flex flex-col items-center justify-center p-4 hover:bg-gray-50 dark:hover:bg-gray-800 group',
-    card: 'inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group',
-    meeting: '',
-    video: ''
+  default: "inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group",
+  border: "inline-flex flex-col items-center justify-center px-5 border-gray-200 border-x hover:bg-gray-50 dark:hover:bg-gray-800 group dark:border-gray-600",
+  application: "",
+  pagination: "inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group",
+  group: "inline-flex flex-col items-center justify-center p-4 hover:bg-gray-50 dark:hover:bg-gray-800 group",
+  card: "inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group",
+  meeting: "",
+  video: ""
 };
 const spanClasses = {
-    default: 'text-sm text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500',
-    border: 'text-sm text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500',
-    application: 'sr-only',
-    pagination: 'sr-only',
-    group: 'sr-only',
-    card: 'text-sm text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500',
-    meeting: '',
-    video: ''
+  default: "text-sm text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500",
+  border: "text-sm text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500",
+  application: "sr-only",
+  pagination: "sr-only",
+  group: "sr-only",
+  card: "text-sm text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500",
+  meeting: "",
+  video: ""
 };
 const appBtnClasses = {
-    left: 'inline-flex flex-col items-center justify-center px-5 rounded-s-full hover:bg-gray-50 dark:hover:bg-gray-800 group',
-    middle: 'inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group',
-    right: 'inline-flex flex-col items-center justify-center px-5 rounded-e-full hover:bg-gray-50 dark:hover:bg-gray-800 group'
+  left: "inline-flex flex-col items-center justify-center px-5 rounded-s-full hover:bg-gray-50 dark:hover:bg-gray-800 group",
+  middle: "inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group",
+  right: "inline-flex flex-col items-center justify-center px-5 rounded-e-full hover:bg-gray-50 dark:hover:bg-gray-800 group"
 };
 let btnClass;
-// let active = navUrl ? href === navUrl : false;
 $: btnClass = twMerge(btnClasses[navType], appBtnClasses[appBtnPosition], active && (activeClass ?? context.activeClass), $$props.btnClass);
 let spanClass;
 $: spanClass = twMerge(spanClasses[navType], active && (activeClass ?? context.activeClass), $$props.spanClass);

package/dist/bottom-navigation/BottomNavItem.svelte.d.ts

@@ -39,4 +39,3 @@ export type BottomNavItemSlots = typeof __propDef.slots;
 export default class BottomNavItem extends SvelteComponentTyped<BottomNavItemProps, BottomNavItemEvents, BottomNavItemSlots> {
 }
 export {};
-//# sourceMappingURL=BottomNavItem.svelte.d.ts.map

package/dist/breadcrumb/Breadcrumb.svelte

@@ -1,9 +1,9 @@
-<script>import { twMerge } from 'tailwind-merge';
+<script>import { twMerge } from "tailwind-merge";
 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 rtl:space-x-reverse md:space-x-3 rtl:space-x-reverse';
-export let ariaLabel = 'Breadcrumb';
+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 rtl:space-x-reverse md:space-x-3 rtl:space-x-reverse";
+export let ariaLabel = "Breadcrumb";
 let classNav = solid ? solidClass : navClass;
 </script>
 

package/dist/breadcrumb/Breadcrumb.svelte.d.ts

@@ -30,4 +30,3 @@ export type BreadcrumbSlots = typeof __propDef.slots;
 export default class Breadcrumb extends SvelteComponentTyped<BreadcrumbProps, BreadcrumbEvents, BreadcrumbSlots> {
 }
 export {};
-//# sourceMappingURL=Breadcrumb.svelte.d.ts.map

package/dist/breadcrumb/BreadcrumbItem.svelte

@@ -1,9 +1,9 @@
-<script>import { twMerge } from 'tailwind-merge';
+<script>import { twMerge } from "tailwind-merge";
 export let home = false;
-export let href = undefined;
-export let linkClass = 'ms-1 text-sm font-medium text-gray-700 hover:text-gray-900 md:ms-2 dark:text-gray-400 dark:hover:text-white';
-export let spanClass = 'ms-1 text-sm font-medium text-gray-500 md:ms-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';
+export let href = void 0;
+export let linkClass = "ms-1 text-sm font-medium text-gray-700 hover:text-gray-900 md:ms-2 dark:text-gray-400 dark:hover:text-white";
+export let spanClass = "ms-1 text-sm font-medium text-gray-500 md:ms-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={twMerge('inline-flex items-center', $$props.class)} {...$$restProps}>

package/dist/breadcrumb/BreadcrumbItem.svelte.d.ts

@@ -31,4 +31,3 @@ export type BreadcrumbItemSlots = typeof __propDef.slots;
 export default class BreadcrumbItem extends SvelteComponentTyped<BreadcrumbItemProps, BreadcrumbItemEvents, BreadcrumbItemSlots> {
 }
 export {};
-//# sourceMappingURL=BreadcrumbItem.svelte.d.ts.map

package/dist/button-group/ButtonGroup.svelte

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

package/dist/button-group/ButtonGroup.svelte.d.ts

@@ -25,4 +25,3 @@ export type ButtonGroupSlots = typeof __propDef.slots;
 export default class ButtonGroup extends SvelteComponentTyped<ButtonGroupProps, ButtonGroupEvents, ButtonGroupSlots> {
 }
 export {};
-//# sourceMappingURL=ButtonGroup.svelte.d.ts.map

package/dist/buttons/Button.svelte

@@ -1,98 +1,118 @@
-<script>import { twMerge } from 'tailwind-merge';
-import { getContext } from 'svelte';
-const group = getContext('group');
+<script>import { twMerge } from "tailwind-merge";
+import { getContext } from "svelte";
+const group = getContext("group");
 export let pill = false;
 export let outline = false;
-export let size = group ? 'sm' : 'md';
-export let href = undefined;
-export let type = 'button';
-export let color = group ? (outline ? 'dark' : 'alternative') : 'primary';
+export let size = group ? "sm" : "md";
+export let href = void 0;
+export let type = "button";
+export let color = group ? outline ? "dark" : "alternative" : "primary";
 export let shadow = false;
-export let tag = 'button';
-export let checked = undefined;
-// export let disabled: boolean = false;
+export let tag = "button";
+export let checked = void 0;
+export let disabled = false;
 const colorClasses = {
-    alternative: 'text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-400 hover:text-primary-700 focus-within:text-primary-700 dark:focus-within:text-white dark:hover:text-white dark:hover:bg-gray-700',
-    blue: 'text-white bg-blue-700 hover:bg-blue-800 dark:bg-blue-600 dark:hover:bg-blue-700',
-    dark: 'text-white bg-gray-800 hover:bg-gray-900 dark:bg-gray-800 dark:hover:bg-gray-700',
-    green: 'text-white bg-green-700 hover:bg-green-800 dark:bg-green-600 dark:hover:bg-green-700',
-    light: 'text-gray-900 bg-white border border-gray-300 hover:bg-gray-100 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600',
-    primary: 'text-white bg-primary-700 hover:bg-primary-800 dark:bg-primary-600 dark:hover:bg-primary-700',
-    purple: 'text-white bg-purple-700 hover:bg-purple-800 dark:bg-purple-600 dark:hover:bg-purple-700',
-    red: 'text-white bg-red-700 hover:bg-red-800 dark:bg-red-600 dark:hover:bg-red-700',
-    yellow: 'text-white bg-yellow-400 hover:bg-yellow-500 ',
-    none: ''
+  alternative: "text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-400 hover:text-primary-700 focus-within:text-primary-700 dark:focus-within:text-white dark:hover:text-white dark:hover:bg-gray-700",
+  blue: "text-white bg-blue-700 hover:bg-blue-800 dark:bg-blue-600 dark:hover:bg-blue-700",
+  dark: "text-white bg-gray-800 hover:bg-gray-900 dark:bg-gray-800 dark:hover:bg-gray-700",
+  green: "text-white bg-green-700 hover:bg-green-800 dark:bg-green-600 dark:hover:bg-green-700",
+  light: "text-gray-900 bg-white border border-gray-300 hover:bg-gray-100 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600",
+  primary: "text-white bg-primary-700 hover:bg-primary-800 dark:bg-primary-600 dark:hover:bg-primary-700",
+  purple: "text-white bg-purple-700 hover:bg-purple-800 dark:bg-purple-600 dark:hover:bg-purple-700",
+  red: "text-white bg-red-700 hover:bg-red-800 dark:bg-red-600 dark:hover:bg-red-700",
+  yellow: "text-white bg-yellow-400 hover:bg-yellow-500 ",
+  none: ""
 };
 const colorCheckedClasses = {
-    alternative: 'text-primary-700 border dark:text-primary-500 bg-gray-100 dark:bg-gray-700 border-gray-300 shadow-gray-300 dark:shadow-gray-800 shadow-inner',
-    blue: 'text-blue-900 bg-blue-400 dark:bg-blue-500 shadow-blue-700 dark:shadow-blue-800 shadow-inner',
-    dark: 'text-white bg-gray-500 dark:bg-gray-600 shadow-gray-800 dark:shadow-gray-900 shadow-inner',
-    green: 'text-green-900 bg-green-400 dark:bg-green-500 shadow-green-700 dark:shadow-green-800 shadow-inner',
-    light: 'text-gray-900 bg-gray-100 border border-gray-300 dark:bg-gray-500 dark:text-gray-900 dark:border-gray-700 shadow-gray-300 dark:shadow-gray-700 shadow-inner',
-    primary: 'text-primary-900 bg-primary-400 dark:bg-primary-500 shadow-primary-700 dark:shadow-primary-800 shadow-inner',
-    purple: 'text-purple-900 bg-purple-400 dark:bg-purple-500 shadow-purple-700 dark:shadow-purple-800 shadow-inner',
-    red: 'text-red-900 bg-red-400 dark:bg-red-500 shadow-red-700 dark:shadow-red-800 shadow-inner',
-    yellow: 'text-yellow-900 bg-yellow-300 dark:bg-yellow-400 shadow-yellow-500 dark:shadow-yellow-700 shadow-inner',
-    none: ''
+  alternative: "text-primary-700 border dark:text-primary-500 bg-gray-100 dark:bg-gray-700 border-gray-300 shadow-gray-300 dark:shadow-gray-800 shadow-inner",
+  blue: "text-blue-900 bg-blue-400 dark:bg-blue-500 shadow-blue-700 dark:shadow-blue-800 shadow-inner",
+  dark: "text-white bg-gray-500 dark:bg-gray-600 shadow-gray-800 dark:shadow-gray-900 shadow-inner",
+  green: "text-green-900 bg-green-400 dark:bg-green-500 shadow-green-700 dark:shadow-green-800 shadow-inner",
+  light: "text-gray-900 bg-gray-100 border border-gray-300 dark:bg-gray-500 dark:text-gray-900 dark:border-gray-700 shadow-gray-300 dark:shadow-gray-700 shadow-inner",
+  primary: "text-primary-900 bg-primary-400 dark:bg-primary-500 shadow-primary-700 dark:shadow-primary-800 shadow-inner",
+  purple: "text-purple-900 bg-purple-400 dark:bg-purple-500 shadow-purple-700 dark:shadow-purple-800 shadow-inner",
+  red: "text-red-900 bg-red-400 dark:bg-red-500 shadow-red-700 dark:shadow-red-800 shadow-inner",
+  yellow: "text-yellow-900 bg-yellow-300 dark:bg-yellow-400 shadow-yellow-500 dark:shadow-yellow-700 shadow-inner",
+  none: ""
 };
 const coloredFocusClasses = {
-    alternative: 'focus-within:ring-gray-200 dark:focus-within:ring-gray-700',
-    blue: 'focus-within:ring-blue-300 dark:focus-within:ring-blue-800',
-    dark: 'focus-within:ring-gray-300 dark:focus-within:ring-gray-700',
-    green: 'focus-within:ring-green-300 dark:focus-within:ring-green-800',
-    light: 'focus-within:ring-gray-200 dark:focus-within:ring-gray-700',
-    primary: 'focus-within:ring-primary-300 dark:focus-within:ring-primary-800',
-    purple: 'focus-within:ring-purple-300 dark:focus-within:ring-purple-900',
-    red: 'focus-within:ring-red-300 dark:focus-within:ring-red-900',
-    yellow: 'focus-within:ring-yellow-300 dark:focus-within:ring-yellow-900',
-    none: ''
+  alternative: "focus-within:ring-gray-200 dark:focus-within:ring-gray-700",
+  blue: "focus-within:ring-blue-300 dark:focus-within:ring-blue-800",
+  dark: "focus-within:ring-gray-300 dark:focus-within:ring-gray-700",
+  green: "focus-within:ring-green-300 dark:focus-within:ring-green-800",
+  light: "focus-within:ring-gray-200 dark:focus-within:ring-gray-700",
+  primary: "focus-within:ring-primary-300 dark:focus-within:ring-primary-800",
+  purple: "focus-within:ring-purple-300 dark:focus-within:ring-purple-900",
+  red: "focus-within:ring-red-300 dark:focus-within:ring-red-900",
+  yellow: "focus-within:ring-yellow-300 dark:focus-within:ring-yellow-900",
+  none: ""
 };
 const coloredShadowClasses = {
-    alternative: 'shadow-gray-500/50 dark:shadow-gray-800/80',
-    blue: 'shadow-blue-500/50 dark:shadow-blue-800/80',
-    dark: 'shadow-gray-500/50 dark:shadow-gray-800/80',
-    green: 'shadow-green-500/50 dark:shadow-green-800/80',
-    light: 'shadow-gray-500/50 dark:shadow-gray-800/80',
-    primary: 'shadow-primary-500/50 dark:shadow-primary-800/80',
-    purple: 'shadow-purple-500/50 dark:shadow-purple-800/80',
-    red: 'shadow-red-500/50 dark:shadow-red-800/80 ',
-    yellow: 'shadow-yellow-500/50 dark:shadow-yellow-800/80 ',
-    none: ''
+  alternative: "shadow-gray-500/50 dark:shadow-gray-800/80",
+  blue: "shadow-blue-500/50 dark:shadow-blue-800/80",
+  dark: "shadow-gray-500/50 dark:shadow-gray-800/80",
+  green: "shadow-green-500/50 dark:shadow-green-800/80",
+  light: "shadow-gray-500/50 dark:shadow-gray-800/80",
+  primary: "shadow-primary-500/50 dark:shadow-primary-800/80",
+  purple: "shadow-purple-500/50 dark:shadow-purple-800/80",
+  red: "shadow-red-500/50 dark:shadow-red-800/80 ",
+  yellow: "shadow-yellow-500/50 dark:shadow-yellow-800/80 ",
+  none: ""
 };
 const outlineClasses = {
-    alternative: 'text-gray-900 dark:text-gray-400 hover:text-white border border-gray-800 hover:bg-gray-900 focus-within:bg-gray-900 focus-within:text-white focus-within:ring-gray-300 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-600 dark:focus-within:ring-gray-800',
-    blue: 'text-blue-700 hover:text-white border border-blue-700 hover:bg-blue-800 dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-600',
-    dark: 'text-gray-900 hover:text-white border border-gray-800 hover:bg-gray-900 focus-within:bg-gray-900 focus-within:text-white dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-600',
-    green: 'text-green-700 hover:text-white border border-green-700 hover:bg-green-800 dark:border-green-500 dark:text-green-500 dark:hover:text-white dark:hover:bg-green-600',
-    light: 'text-gray-500 hover:text-gray-900 bg-white border border-gray-200 dark:border-gray-600 dark:hover:text-white dark:text-gray-400 hover:bg-gray-50 dark:bg-gray-700 dark:hover:bg-gray-600',
-    primary: 'text-primary-700 hover:text-white border border-primary-700 hover:bg-primary-700 dark:border-primary-500 dark:text-primary-500 dark:hover:text-white dark:hover:bg-primary-600',
-    purple: 'text-purple-700 hover:text-white border border-purple-700 hover:bg-purple-800 dark:border-purple-400 dark:text-purple-400 dark:hover:text-white dark:hover:bg-purple-500',
-    red: 'text-red-700 hover:text-white border border-red-700 hover:bg-red-800 dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600',
-    yellow: 'text-yellow-400 hover:text-white border border-yellow-400 hover:bg-yellow-500 dark:border-yellow-300 dark:text-yellow-300 dark:hover:text-white dark:hover:bg-yellow-400',
-    none: ''
+  alternative: "text-gray-900 dark:text-gray-400 hover:text-white border border-gray-800 hover:bg-gray-900 focus-within:bg-gray-900 focus-within:text-white focus-within:ring-gray-300 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-600 dark:focus-within:ring-gray-800",
+  blue: "text-blue-700 hover:text-white border border-blue-700 hover:bg-blue-800 dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-600",
+  dark: "text-gray-900 hover:text-white border border-gray-800 hover:bg-gray-900 focus-within:bg-gray-900 focus-within:text-white dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-600",
+  green: "text-green-700 hover:text-white border border-green-700 hover:bg-green-800 dark:border-green-500 dark:text-green-500 dark:hover:text-white dark:hover:bg-green-600",
+  light: "text-gray-500 hover:text-gray-900 bg-white border border-gray-200 dark:border-gray-600 dark:hover:text-white dark:text-gray-400 hover:bg-gray-50 dark:bg-gray-700 dark:hover:bg-gray-600",
+  primary: "text-primary-700 hover:text-white border border-primary-700 hover:bg-primary-700 dark:border-primary-500 dark:text-primary-500 dark:hover:text-white dark:hover:bg-primary-600",
+  purple: "text-purple-700 hover:text-white border border-purple-700 hover:bg-purple-800 dark:border-purple-400 dark:text-purple-400 dark:hover:text-white dark:hover:bg-purple-500",
+  red: "text-red-700 hover:text-white border border-red-700 hover:bg-red-800 dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600",
+  yellow: "text-yellow-400 hover:text-white border border-yellow-400 hover:bg-yellow-500 dark:border-yellow-300 dark:text-yellow-300 dark:hover:text-white dark:hover:bg-yellow-400",
+  none: ""
 };
 const sizeClasses = {
-    xs: 'px-3 py-2 text-xs',
-    sm: 'px-4 py-2 text-sm',
-    md: 'px-5 py-2.5 text-sm',
-    lg: 'px-5 py-3 text-base',
-    xl: 'px-6 py-3.5 text-base'
+  xs: "px-3 py-2 text-xs",
+  sm: "px-4 py-2 text-sm",
+  md: "px-5 py-2.5 text-sm",
+  lg: "px-5 py-3 text-base",
+  xl: "px-6 py-3.5 text-base"
 };
-const hasBorder = () => outline || color === 'alternative' || color === 'light';
+const hasBorder = () => outline || color === "alternative" || color === "light";
 let buttonClass;
-$: buttonClass = twMerge('text-center font-medium', group ? 'focus-within:ring-2' : 'focus-within:ring-4', group && 'focus-within:z-10', group || 'focus-within:outline-none', 'inline-flex items-center justify-center ' + sizeClasses[size], outline && checked && 'border dark:border-gray-900', outline && checked && colorCheckedClasses[color], outline && !checked && outlineClasses[color], !outline && checked && colorCheckedClasses[color], !outline && !checked && colorClasses[color], color === 'alternative' && (group && !checked ? 'dark:bg-gray-700 dark:text-white dark:border-gray-700 dark:hover:border-gray-600 dark:hover:bg-gray-600' : 'dark:bg-transparent dark:border-gray-600 dark:hover:border-gray-600'), outline && color === 'dark' && (group ? (checked ? 'bg-gray-900 border-gray-800 dark:border-white dark:bg-gray-600' : 'dark:text-white border-gray-800 dark:border-white') : 'dark:text-gray-400 dark:border-gray-700'), coloredFocusClasses[color], hasBorder() && group && 'border-s-0 first:border-s', group ? (pill && 'first:rounded-s-full last:rounded-e-full') || 'first:rounded-s-lg last:rounded-e-lg' : (pill && 'rounded-full') || 'rounded-lg', shadow && 'shadow-lg', shadow && coloredShadowClasses[color], $$restProps.disabled && 'cursor-not-allowed opacity-50', $$props.class);
+$: buttonClass = twMerge(
+  "text-center font-medium",
+  group ? "focus-within:ring-2" : "focus-within:ring-4",
+  group && "focus-within:z-10",
+  group || "focus-within:outline-none",
+  "inline-flex items-center justify-center " + sizeClasses[size],
+  outline && checked && "border dark:border-gray-900",
+  outline && checked && colorCheckedClasses[color],
+  outline && !checked && outlineClasses[color],
+  !outline && checked && colorCheckedClasses[color],
+  !outline && !checked && colorClasses[color],
+  color === "alternative" && (group && !checked ? "dark:bg-gray-700 dark:text-white dark:border-gray-700 dark:hover:border-gray-600 dark:hover:bg-gray-600" : "dark:bg-transparent dark:border-gray-600 dark:hover:border-gray-600"),
+  outline && color === "dark" && (group ? checked ? "bg-gray-900 border-gray-800 dark:border-white dark:bg-gray-600" : "dark:text-white border-gray-800 dark:border-white" : "dark:text-gray-400 dark:border-gray-700"),
+  coloredFocusClasses[color],
+  hasBorder() && group && "border-s-0 first:border-s",
+  group ? pill && "first:rounded-s-full last:rounded-e-full" || "first:rounded-s-lg last:rounded-e-lg" : pill && "rounded-full" || "rounded-lg",
+  shadow && "shadow-lg",
+  shadow && coloredShadowClasses[color],
+  disabled && "cursor-not-allowed opacity-50",
+  $$props.class
+);
 </script>
 
-{#if href && !$$restProps.disabled}
+{#if href && !disabled}
   <a {href} {...$$restProps} class={buttonClass} role="button" on:click on:change on:keydown on:keyup on:touchstart|passive on:touchend on:touchcancel on:mouseenter on:mouseleave>
     <slot />
   </a>
-{:else if tag === 'button' && !$$restProps.disabled }
-  <button {type} {...$$restProps} class={buttonClass} on:click on:change on:keydown on:keyup on:touchstart|passive on:touchend on:touchcancel on:mouseenter on:mouseleave>
+{:else if tag === 'button' }
+  <button {type} {...$$restProps} {disabled} class={buttonClass} on:click on:change on:keydown on:keyup on:touchstart|passive on:touchend on:touchcancel on:mouseenter on:mouseleave>
     <slot />
   </button>
 {:else}
-  <svelte:element this={tag} class={buttonClass}>
+  <svelte:element this={tag} {...$$restProps} class={buttonClass}>
     <slot />
   </svelte:element>
 {/if}

package/dist/buttons/Button.svelte.d.ts

@@ -12,6 +12,7 @@ declare const __propDef: {
         shadow?: boolean | undefined;
         tag?: string | undefined;
         checked?: boolean | undefined;
+        disabled?: boolean | undefined;
     };
     events: {
         click: MouseEvent;
@@ -50,4 +51,3 @@ export type ButtonSlots = typeof __propDef.slots;
 export default class Button extends SvelteComponentTyped<ButtonProps, ButtonEvents, ButtonSlots> {
 }
 export {};
-//# sourceMappingURL=Button.svelte.d.ts.map

package/dist/buttons/GradientButton.svelte

@@ -1,48 +1,54 @@
-<script>import { twMerge } from 'tailwind-merge';
-import Button from './Button.svelte';
-import { getContext } from 'svelte';
-const group = getContext('group');
-export let color = 'blue';
+<script>import { twMerge } from "tailwind-merge";
+import Button from "./Button.svelte";
+import { getContext } from "svelte";
+const group = getContext("group");
+export let color = "blue";
 export let shadow = false;
 const gradientClasses = {
-    blue: 'text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br 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-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-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-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-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-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-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-purple-300 dark:focus:ring-purple-800',
-    purpleToBlue: 'text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl 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-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-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-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-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 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-red-100 dark:focus:ring-red-400'
+  blue: "text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br 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-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-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-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-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-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-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-purple-300 dark:focus:ring-purple-800",
+  purpleToBlue: "text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl 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-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-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-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-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 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-red-100 dark:focus:ring-red-400"
 };
 const coloredShadowClasses = {
-    blue: 'shadow-blue-500/50 dark:shadow-blue-800/80',
-    green: 'shadow-green-500/50 dark:shadow-green-800/80',
-    cyan: 'shadow-cyan-500/50 dark:shadow-cyan-800/80',
-    teal: 'shadow-teal-500/50 dark:shadow-teal-800/80 ',
-    lime: 'shadow-lime-500/50 dark:shadow-lime-800/80',
-    red: 'shadow-red-500/50 dark:shadow-red-800/80 ',
-    pink: 'shadow-pink-500/50 dark:shadow-pink-800/80',
-    purple: 'shadow-purple-500/50 dark:shadow-purple-800/80',
-    purpleToBlue: 'shadow-blue-500/50 dark:shadow-blue-800/80',
-    cyanToBlue: 'shadow-cyan-500/50 dark:shadow-cyan-800/80',
-    greenToBlue: 'shadow-green-500/50 dark:shadow-green-800/80',
-    purpleToPink: 'shadow-purple-500/50 dark:shadow-purple-800/80',
-    pinkToOrange: 'shadow-pink-500/50 dark:shadow-pink-800/80',
-    tealToLime: 'shadow-lime-500/50 dark:shadow-teal-800/80',
-    redToYellow: 'shadow-red-500/50 dark:shadow-red-800/80'
+  blue: "shadow-blue-500/50 dark:shadow-blue-800/80",
+  green: "shadow-green-500/50 dark:shadow-green-800/80",
+  cyan: "shadow-cyan-500/50 dark:shadow-cyan-800/80",
+  teal: "shadow-teal-500/50 dark:shadow-teal-800/80 ",
+  lime: "shadow-lime-500/50 dark:shadow-lime-800/80",
+  red: "shadow-red-500/50 dark:shadow-red-800/80 ",
+  pink: "shadow-pink-500/50 dark:shadow-pink-800/80",
+  purple: "shadow-purple-500/50 dark:shadow-purple-800/80",
+  purpleToBlue: "shadow-blue-500/50 dark:shadow-blue-800/80",
+  cyanToBlue: "shadow-cyan-500/50 dark:shadow-cyan-800/80",
+  greenToBlue: "shadow-green-500/50 dark:shadow-green-800/80",
+  purpleToPink: "shadow-purple-500/50 dark:shadow-purple-800/80",
+  pinkToOrange: "shadow-pink-500/50 dark:shadow-pink-800/80",
+  tealToLime: "shadow-lime-500/50 dark:shadow-teal-800/80",
+  redToYellow: "shadow-red-500/50 dark:shadow-red-800/80"
 };
 let gradientOutlineClass;
-$: gradientOutlineClass = twMerge('inline-flex items-center justify-center w-full  !border-0', $$props.pill || '!rounded-md', 'bg-white !text-gray-900 dark:bg-gray-900 dark:!text-white', // this is limitation - no transparency
-'hover:bg-transparent hover:!text-inherit', 'transition-all duration-75 ease-in group-hover:!bg-opacity-0 group-hover:!text-inherit');
+$: gradientOutlineClass = twMerge(
+  "inline-flex items-center justify-center w-full  !border-0",
+  $$props.pill || "!rounded-md",
+  "bg-white !text-gray-900 dark:bg-gray-900 dark:!text-white",
+  // this is limitation - no transparency
+  "hover:bg-transparent hover:!text-inherit",
+  "transition-all duration-75 ease-in group-hover:!bg-opacity-0 group-hover:!text-inherit"
+);
 let divClass;
-$: divClass = twMerge($$props.outline && 'p-0.5', gradientClasses[color], shadow && 'shadow-lg', shadow && coloredShadowClasses[color], group ? ($$props.pill && 'first:rounded-s-full last:rounded-e-full') || 'first:rounded-s-lg last:rounded-e-lg' : ($$props.pill && 'rounded-full') || 'rounded-lg', $$props.class);
+$: divClass = twMerge($$props.outline && "p-0.5", gradientClasses[color], shadow && "shadow-lg", shadow && coloredShadowClasses[color], group ? $$props.pill && "first:rounded-s-full last:rounded-e-full" || "first:rounded-s-lg last:rounded-e-lg" : $$props.pill && "rounded-full" || "rounded-lg", $$props.class);
 </script>
 
 {#if $$props.outline}

package/dist/buttons/GradientButton.svelte.d.ts

@@ -39,4 +39,3 @@ export type GradientButtonSlots = typeof __propDef.slots;
 export default class GradientButton extends SvelteComponentTyped<GradientButtonProps, GradientButtonEvents, GradientButtonSlots> {
 }
 export {};
-//# sourceMappingURL=GradientButton.svelte.d.ts.map

package/dist/cards/Card.svelte

@@ -1,38 +1,39 @@
-<script>import { twMerge } from 'tailwind-merge';
-import Frame from '../utils/Frame.svelte';
-export let href = undefined;
+<script>import { twMerge } from "tailwind-merge";
+import Frame from "../utils/Frame.svelte";
+export let href = void 0;
 export let horizontal = false;
 export let reverse = false;
-export let img = undefined;
-export let padding = 'lg';
-export let size = 'sm';
+export let img = void 0;
+export let padding = "lg";
+export let size = "sm";
+export let imgClass = "";
 const paddings = {
-    none: '',
-    xs: 'p-2',
-    sm: 'p-4',
-    md: 'p-4 sm:p-5',
-    lg: 'p-4 sm:p-6',
-    xl: 'p-4 sm:p-8'
+  none: "",
+  xs: "p-2",
+  sm: "p-4",
+  md: "p-4 sm:p-5",
+  lg: "p-4 sm:p-6",
+  xl: "p-4 sm:p-8"
 };
 const sizes = {
-    none: '',
-    xs: 'max-w-xs',
-    sm: 'max-w-sm',
-    md: 'max-w-xl',
-    lg: 'max-w-2xl',
-    xl: 'max-w-screen-xl'
+  none: "",
+  xs: "max-w-xs",
+  sm: "max-w-sm",
+  md: "max-w-xl",
+  lg: "max-w-2xl",
+  xl: "max-w-screen-xl"
 };
 let innerPadding;
 $: innerPadding = paddings[padding];
 let cardClass;
-$: cardClass = twMerge('flex w-full', sizes[size], reverse ? 'flex-col-reverse' : 'flex-col', horizontal && (reverse ? 'md:flex-row-reverse' : 'md:flex-row'), href && 'hover:bg-gray-100 dark:hover:bg-gray-700', !img && innerPadding, $$props.class);
-let imgClass;
-$: imgClass = twMerge(reverse ? 'rounded-b-lg' : 'rounded-t-lg', horizontal && 'object-cover w-full h-96 md:h-auto md:w-48 md:rounded-none', horizontal && (reverse ? 'md:rounded-e-lg' : 'md:rounded-s-lg'));
+$: cardClass = twMerge("flex w-full", sizes[size], reverse ? "flex-col-reverse" : "flex-col", horizontal && (reverse ? "md:flex-row-reverse" : "md:flex-row"), href && "hover:bg-gray-100 dark:hover:bg-gray-700", !img && innerPadding, $$props.class);
+let imgCls;
+$: imgCls = twMerge(reverse ? "rounded-b-lg" : "rounded-t-lg", horizontal && "object-cover w-full h-96 md:h-auto md:w-48 md:rounded-none", horizontal && (reverse ? "md:rounded-e-lg" : "md:rounded-s-lg"), imgClass);
 </script>
 
 <Frame tag={href ? 'a' : 'div'} rounded shadow border on:click on:focusin on:focusout on:mouseenter on:mouseleave {href} {...$$restProps} class={cardClass}>
   {#if img}
-    <img class={imgClass} src={img} alt="" />
+    <img class={imgCls} src={img} alt="" />
     <div class={innerPadding}>
       <slot />
     </div>
@@ -51,4 +52,5 @@ $: imgClass = twMerge(reverse ? 'rounded-b-lg' : 'rounded-t-lg', horizontal && '
 @prop export let img: string | undefined = undefined;
 @prop export let padding: SizeType | 'none' = 'lg';
 @prop export let size: SizeType | 'none' = 'sm';
+@prop export let imgClass: string = '';
 -->

package/dist/cards/Card.svelte.d.ts

@@ -47,8 +47,8 @@ export type CardSlots = typeof __propDef.slots;
  * @prop export let img: string | undefined = undefined;
  * @prop export let padding: SizeType | 'none' = 'lg';
  * @prop export let size: SizeType | 'none' = 'sm';
+ * @prop export let imgClass: string = '';
  */
 export default class Card extends SvelteComponentTyped<CardProps, CardEvents, CardSlots> {
 }
 export {};
-//# sourceMappingURL=Card.svelte.d.ts.map