types: add $$Props

.changeset/three-ears-smoke.md

@@ -0,0 +1,5 @@
+---
+'flowbite-svelte': patch
+---
+
+types: add $$Props

src/lib/accordion/Accordion.svelte

@@ -2,7 +2,7 @@
   import { writable, type Writable } from 'svelte/store';
 
   export interface AccordionCtxType {
-    flush: boolean;
+    flush: boolean | undefined;
     activeClass: string;
     inactiveClass: string;
     selected?: Writable<object>;
@@ -26,11 +26,11 @@
     classInactive?: string;
   }
 
-  export let multiple: boolean = false;
-  export let flush: boolean = false;
-  export let activeClass: string = 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800';
-  export let inactiveClass: string = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 hover:dark:bg-gray-800';
-  export let defaultClass: string = 'text-gray-500 dark:text-gray-400';
+  export let multiple: $$Props['multiple'] = false;
+  export let flush: $$Props['flush'] = false;
+  export let activeClass: $$Props['activeClass'] = 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800';
+  export let inactiveClass: $$Props['inactiveClass'] = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 hover:dark:bg-gray-800';
+  export let defaultClass: $$Props['defaultClass'] = 'text-gray-500 dark:text-gray-400';
 
   const ctx: AccordionCtxType = {
     flush,

src/lib/accordion/AccordionItem.svelte

@@ -6,24 +6,44 @@
   import type { TransitionTypes, TransitionParamTypes } from '../types';
   import type { AccordionCtxType } from './Accordion.svelte';
 
-  export let tag: string = 'h2';
-  export let open: boolean = false;
-  export let activeClass: string | undefined = undefined;
-  export let inactiveClass: string | undefined = undefined;
-  export let defaultClass: string = 'flex items-center justify-between w-full font-medium text-left group-first:rounded-t-xl border-gray-200 dark:border-gray-700';
-  export let transitionType: TransitionTypes = 'slide';
-  export let transitionParams: TransitionParamTypes = {};
-  export let paddingFlush: string = 'py-5';
-  export let paddingDefault: string = 'p-5';
-  export let textFlushOpen: string = 'text-gray-900 dark:text-white';
-  export let textFlushDefault: string = 'text-gray-500 dark:text-gray-400';
-  export let borderClass: string = 'border-s border-e group-first:border-t';
-  export let borderOpenClass: string = 'border-s border-e';
-  export let borderBottomClass: string = 'border-b';
-  export let borderSharedClass: string = 'border-gray-200 dark:border-gray-700';
+  interface $$Props {
+    tag?: string;
+    open?: boolean;
+    activeClass?: string;
+    inactiveClass?: string;
+    defaultClass?: string;
+    transitionType?: TransitionTypes;
+    transitionParams?: TransitionParamTypes;
+    paddingFlush?: string;
+    paddingDefault?: string;
+    textFlushOpen?: string;
+    textFlushDefault?: string;
+    borderClass?: string;
+    borderOpenClass?: string;
+    borderBottomClass?: string;
+    borderSharedClass?: string;
+    classActive?: string;
+    classInactive?: string;
+  }
 
-  export let classActive: string | undefined = undefined;
-  export let classInactive: string | undefined = undefined;
+  export let tag: $$Props['tag'] = 'h2';
+  export let open: NonNullable<$$Props['open']> = false;
+  export let activeClass: $$Props['activeClass'] = undefined;
+  export let inactiveClass: $$Props['inactiveClass'] = undefined;
+  export let defaultClass: $$Props['defaultClass'] = 'flex items-center justify-between w-full font-medium text-left group-first:rounded-t-xl border-gray-200 dark:border-gray-700';
+  export let transitionType: $$Props['transitionType'] = 'slide';
+  export let transitionParams: $$Props['transitionParams'] = {};
+  export let paddingFlush: $$Props['paddingFlush'] = 'py-5';
+  export let paddingDefault: $$Props['paddingDefault'] = 'p-5';
+  export let textFlushOpen: $$Props['textFlushOpen'] = 'text-gray-900 dark:text-white';
+  export let textFlushDefault: $$Props['textFlushDefault'] = 'text-gray-500 dark:text-gray-400';
+  export let borderClass: $$Props['borderClass'] = 'border-s border-e group-first:border-t';
+  export let borderOpenClass: $$Props['borderOpenClass'] = 'border-s border-e';
+  export let borderBottomClass: $$Props['borderBottomClass'] = 'border-b';
+  export let borderSharedClass: $$Props['borderSharedClass'] = 'border-gray-200 dark:border-gray-700';
+
+  export let classActive: $$Props['classActive'] = undefined;
+  export let classInactive: $$Props['classInactive'] = undefined;
 
   let activeCls = twMerge(activeClass, classActive);
   let inactiveCls = twMerge(inactiveClass, classInactive);

src/lib/alert/Alert.svelte

@@ -9,8 +9,8 @@
     defaultClass?: string;
   }
 
-  export let dismissable: boolean = false;
-  export let defaultClass: string = 'p-4 gap-3 text-sm';
+  export let dismissable: $$Props['dismissable'] = false;
+  export let defaultClass: $$Props['defaultClass'] = 'p-4 gap-3 text-sm';
 
   let divClass: string;
   $: divClass = twMerge(defaultClass, ($$slots.icon || dismissable) && 'flex items-center', $$props.class);

src/lib/avatar/Avatar.svelte

@@ -19,14 +19,14 @@
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'none';
   }
 
-  export let src: string = '';
-  export let href: string | undefined = undefined;
-  export let rounded: boolean = false;
-  export let border: boolean = false;
-  export let stacked: boolean = false;
-  export let dot: object | undefined = undefined;
-  export let alt: string = '';
-  export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'none' = 'md';
+  export let src: $$Props['src'] = '';
+  export let href: $$Props['href'] = undefined;
+  export let rounded: $$Props['rounded'] = false;
+  export let border: $$Props['border'] = false;
+  export let stacked: $$Props['stacked'] = false;
+  export let dot: $$Props['dot'] = undefined;
+  export let alt: $$Props['alt'] = '';
+  export let size: NonNullable<$$Props['size']> = 'md';
 
   $: dot = dot && { placement: 'top-right', color: 'gray', size: 'lg', ...dot };
 

src/lib/badge/Badge.svelte

@@ -21,14 +21,14 @@
     params?: object;
   }
 
-  export let color: ColorVariant = 'primary';
-  export let large: boolean = false;
-  export let dismissable: boolean = false;
-  export let border: boolean = false;
-  export let href: string = '';
-  export let rounded: boolean = false;
-  export let transition: TransitionFunc = fade;
-  export let params: object = {};
+  export let color: NonNullable<$$Props['color']> = 'primary';
+  export let large: $$Props['large'] = false;
+  export let dismissable: $$Props['dismissable'] = false;
+  export let border: $$Props['border'] = false;
+  export let href: $$Props['href'] = '';
+  export let rounded: $$Props['rounded'] = false;
+  export let transition: NonNullable<$$Props['transition']> = fade;
+  export let params: $$Props['params'] = {};
 
   let badgeStatus: boolean = true;
 

src/lib/banner/Banner.svelte

@@ -17,18 +17,14 @@
     params?: object;
   }
 
-  export let position: 'static' | 'fixed' | 'absolute' | 'relative' | 'sticky' = 'sticky';
-  export let dismissable: boolean = true;
-  export let bannerType: 'default' | 'bottom' | 'cta' | 'signup' | 'info' = 'default';
-  export let divClass: string = 'z-10 flex justify-between p-4 dark:bg-gray-700 dark:border-gray-600';
-  export let innerClass: string = 'flex';
-  export let bannerStatus: boolean = true;
-  export let transition: TransitionFunc = fade;
-  export let params = {};
-
-  // let open = true;
-  // const dispatch = createEventDispatcher();
-  // $: dispatch(open ? 'open' : 'close');
+  export let position: $$Props['position'] = 'sticky';
+  export let dismissable: $$Props['dismissable'] = true;
+  export let bannerType: NonNullable<$$Props['bannerType']> = 'default';
+  export let divClass: $$Props['divClass'] = 'z-10 flex justify-between p-4 dark:bg-gray-700 dark:border-gray-600';
+  export let innerClass: $$Props['innerClass'] = 'flex';
+  export let bannerStatus: $$Props['bannerStatus'] = true;
+  export let transition: NonNullable<$$Props['transition']> = fade;
+  export let params: $$Props['params'] = {};
 
   const divClasses = {
     default: 'top-0 start-0 w-full border-b border-gray-200 bg-gray-50',

src/lib/bottom-navigation/BottomNav.svelte

@@ -19,13 +19,13 @@
     activeClass?: string;
   }
 
-  export let activeUrl: string = '';
-  export let position: 'static' | 'fixed' | 'absolute' | 'relative' | 'sticky' = 'fixed';
-  export let navType: 'default' | 'border' | 'application' | 'pagination' | 'group' | 'card' | 'meeting' | 'video' = 'default';
-  export let outerClass: string = 'w-full z-50 border-gray-200 dark:bg-gray-700 dark:border-gray-600';
-  export let innerClass: string = 'grid h-full max-w-lg mx-auto';
-  export let activeClass: string = 'text-primary-700 dark:text-primary-700 hover:text-primary-900 dark:hover:text-primary-900';
-  // export let activeUrl: string = '';
+  export let activeUrl: $$Props['activeUrl'] = '';
+  export let position: $$Props['position'] = 'fixed';
+  export let navType: NonNullable<$$Props['navType']> = 'default';
+  export let outerClass: $$Props['outerClass'] = 'w-full z-50 border-gray-200 dark:bg-gray-700 dark:border-gray-600';
+  export let innerClass: $$Props['innerClass'] = 'grid h-full max-w-lg mx-auto';
+  export let activeClass: $$Props['activeClass'] = 'text-primary-700 dark:text-primary-700 hover:text-primary-900 dark:hover:text-primary-900';
+
   let activeCls = '';
 
   const activeUrlStore = writable('');

src/lib/bottom-navigation/BottomNavHeader.svelte

@@ -7,8 +7,8 @@
     innerClass?: string;
   }
 
-  export let outerClass: string = 'w-full';
-  export let innerClass: string = 'grid max-w-xs grid-cols-3 gap-1 p-1 mx-auto my-2 bg-gray-100 rounded-lg dark:bg-gray-600';
+  export let outerClass: $$Props['outerClass'] = 'w-full';
+  export let innerClass: $$Props['innerClass'] = 'grid max-w-xs grid-cols-3 gap-1 p-1 mx-auto my-2 bg-gray-100 rounded-lg dark:bg-gray-600';
 </script>
 
 <div class={twMerge(outerClass, $$props.classOuter)} {...$$restProps}>

src/lib/bottom-navigation/BottomNavHeaderItem.svelte

@@ -9,10 +9,10 @@
     activeClass: string;
   }
 
-  export let itemName: string = '';
-  export let active: boolean = false;
-  export let defaultClass: string = 'px-5 py-1.5 text-xs font-medium text-gray-900 hover:bg-gray-200 dark:text-white dark:hover:bg-gray-700 rounded-lg';
-  export let activeClass: string = 'px-5 py-1.5 text-xs font-medium text-white bg-gray-900 dark:bg-gray-300 dark:text-gray-900 rounded-lg';
+  export let itemName: $$Props['itemName'] = '';
+  export let active: $$Props['active'] = false;
+  export let defaultClass: $$Props['defaultClass'] = 'px-5 py-1.5 text-xs font-medium text-gray-900 hover:bg-gray-200 dark:text-white dark:hover:bg-gray-700 rounded-lg';
+  export let activeClass: $$Props['activeClass'] = 'px-5 py-1.5 text-xs font-medium text-white bg-gray-900 dark:bg-gray-300 dark:text-gray-900 rounded-lg';
 
   $: btnClass = active ? activeClass : defaultClass;
 </script>

src/lib/bottom-navigation/BottomNavItem.svelte

@@ -18,12 +18,12 @@
     spanClass?: string;
   }
 
-  export let btnName: string = '';
-  export let appBtnPosition: 'left' | 'middle' | 'right' = 'middle';
-  export let activeClass: string | undefined = undefined;
-  export let href: string = '';
-  export let exact: boolean = true;
-  export let spanClass: string = '';
+  export let btnName: $$Props['btnName'] = '';
+  export let appBtnPosition: NonNullable<$$Props['appBtnPosition']> = 'middle';
+  export let activeClass: $$Props['activeClass'] = undefined;
+  export let href: NonNullable<$$Props['href']> = '';
+  export let exact: $$Props['exact'] = true;
+  export let spanClass: $$Props['spanClass'] = '';
 
   const navType: 'default' | 'border' | 'application' | 'pagination' | 'group' | 'card' | 'meeting' | 'video' = getContext('navType');
 

src/lib/breadcrumb/Breadcrumb.svelte

@@ -1,11 +1,20 @@
 <script lang="ts">
   import { twMerge } from 'tailwind-merge';
+  import type { HTMLAttributes } from 'svelte/elements';
 
-  export let solid: boolean = false;
-  export let navClass: string = 'flex';
-  export let solidClass: string = '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: string = 'inline-flex items-center space-x-1 rtl:space-x-reverse md:space-x-3 rtl:space-x-reverse';
-  export let ariaLabel: string = 'Breadcrumb';
+  interface $$Props extends HTMLAttributes<HTMLDivElement> {
+    solid?: boolean;
+    navClass?: string;
+    solidClass?: string;
+    olClass?: string;
+    ariaLabel?: string;
+  }
+
+  export let solid: $$Props['solid'] = false;
+  export let navClass: NonNullable<$$Props['navClass']> = 'flex';
+  export let solidClass: NonNullable<$$Props['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: $$Props['olClass'] = 'inline-flex items-center space-x-1 rtl:space-x-reverse md:space-x-3 rtl:space-x-reverse';
+  export let ariaLabel: $$Props['ariaLabel'] = 'Breadcrumb';
   let classNav: string = solid ? solidClass : navClass;
 </script>
 

src/lib/breadcrumb/BreadcrumbItem.svelte

@@ -1,10 +1,20 @@
 <script lang="ts">
   import { twMerge } from 'tailwind-merge';
-  export let home: boolean = false;
-  export let href: string | undefined = undefined;
-  export let linkClass: string = '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: string = 'ms-1 text-sm font-medium text-gray-500 md:ms-2 dark:text-gray-400';
-  export let homeClass: string = 'inline-flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white';
+  import type { HTMLLiAttributes } from 'svelte/elements';
+
+  interface $$Props extends HTMLLiAttributes {
+    home?: boolean;
+    href?: string;
+    linkClass?: string;
+    spanClass?: string;
+    homeClass?: string;
+  }
+  
+  export let home: $$Props['home'] = false;
+  export let href: $$Props['href'] = undefined;
+  export let linkClass: $$Props['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: $$Props['spanClass'] = 'ms-1 text-sm font-medium text-gray-500 md:ms-2 dark:text-gray-400';
+  export let homeClass: $$Props['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}>

src/lib/button-group/ButtonGroup.svelte

@@ -1,10 +1,16 @@
 <script lang="ts">
   import { setContext } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
   import { twMerge } from 'tailwind-merge';
   import type { SizeType } from '$lib/types';
 
-  export let size: SizeType = 'md';
-  export let divClass: string = 'inline-flex rounded-lg shadow-sm';
+  interface $$Props extends HTMLAttributes<HTMLDivElement> {
+    size?: SizeType;
+    divClass?: string;
+  }
+
+  export let size: $$Props['size'] = 'md';
+  export let divClass: $$Props['divClass'] = 'inline-flex rounded-lg shadow-sm';
 
   setContext('group', { size });
 </script>

src/lib/buttons/Button.svelte

@@ -2,22 +2,40 @@
   import { twMerge } from 'tailwind-merge';
   import { getContext } from 'svelte';
   import type { SizeType } from '$lib/types';
-  import type { HTMLButtonAttributes } from 'svelte/elements';
+  import type { HTMLButtonAttributes, HTMLAttributes } from 'svelte/elements';
 
+  type ElementType = 'a' | 'button';
   type ButtonColor = keyof typeof colorClasses;
+  type DynamicElementProps<T extends ElementType> = HTMLAttributes<HTMLElementTagNameMap[T]> 
+
+  interface $$Props extends DynamicElementProps<ElementType> {
+    pill?: boolean;
+    outline?: boolean;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    href?: string;
+    type?: HTMLButtonAttributes['type'];
+    color?: ButtonColor;
+    shadow?: boolean;
+    tag?: string;
+    checked?: boolean;
+    disabled?: boolean;
+    target?: string;
+    rel?: string;
+    name?: string;
+  }
 
   const group: SizeType = getContext('group');
 
-  export let pill: boolean = false;
-  export let outline: boolean = false;
-  export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = group ? 'sm' : 'md';
-  export let href: string | undefined = undefined;
-  export let type: HTMLButtonAttributes['type'] = 'button';
-  export let color: ButtonColor = group ? (outline ? 'dark' : 'alternative') : 'primary';
-  export let shadow: boolean = false;
-  export let tag: string = 'button';
-  export let checked: boolean | undefined = undefined;
-  export let disabled: boolean = false;
+  export let pill: $$Props['pill'] = false;
+  export let outline: $$Props['outline'] = false;
+  export let size: NonNullable<$$Props['size']> = group ? 'sm' : 'md';
+  export let href: $$Props['href'] = undefined;
+  export let type: $$Props['type'] = 'button';
+  export let color: NonNullable<$$Props['color']> = group ? (outline ? 'dark' : 'alternative') : 'primary';
+  export let shadow: $$Props['shadow'] = false;
+  export let tag: $$Props['tag'] = 'button';
+  export let checked: $$Props['checked'] = undefined;
+  export let disabled: $$Props['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',

src/lib/buttons/GradientButton.svelte

@@ -1,12 +1,19 @@
 <script lang="ts">
   import { twMerge } from 'tailwind-merge';
   import Button from './Button.svelte';
+  import type { ComponentProps } from 'svelte';
   import { getContext } from 'svelte';
 
+  type ButtonProps = ComponentProps<Button>;
+  interface $$Props extends Omit<ButtonProps, 'color'>{
+    color?: keyof typeof gradientClasses;
+    shadow?: boolean;
+  } 
+
   const group = getContext('group');
 
-  export let color: keyof typeof gradientClasses = 'blue';
-  export let shadow: boolean = false;
+  export let color: NonNullable<$$Props['color']> = 'blue';
+  export let shadow: $$Props['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 ',