chore: add todo list

.changeset/metal-trees-camp.md

@@ -0,0 +1,8 @@
+---
+'flowbite-svelte': patch
+---
+
+types: component type updates
+types: Button and ToolbarButton update for using anchor and button, HTMLAnchorAttributes, HTMLButtonAttributes
+types: GradientButton uses import ButtonProps from "./Button.svelte" instead of using ComponentProps that does not work.
+

Todos.md

@@ -0,0 +1,3 @@
+# TODO
+
+- type ElementType = 'a' | 'div'; type update for Avatar, DropdownItem, NavLi, PaginationItem. See Button, GradientButton and ToolbarButton

src/lib/avatar/Avatar.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
   import Indicator from '$lib/indicators/Indicator.svelte';
   import { twMerge } from 'tailwind-merge';
-
   import type { HTMLAttributes } from 'svelte/elements';
 
   type ElementType = 'a' | 'div';
 
-  type DynamicElementProps<T extends ElementType> = HTMLAttributes<HTMLElementTagNameMap[T]> 
+  type DynamicElementProps<T extends ElementType> = HTMLAttributes<HTMLElementTagNameMap[T]>;
 
   interface $$Props extends DynamicElementProps<ElementType> {
     href?: string;

src/lib/bottom-navigation/BottomNav.svelte

@@ -1,6 +1,8 @@
 <script lang="ts" context="module">
   export type BottomNavType = {
     activeClass: string;
+    btnClass?: string;
+    spanClass?: string; 
   };
 </script>
 

src/lib/bottom-navigation/BottomNavItem.svelte

@@ -3,25 +3,30 @@
   import type { ButtonClassesTypes } from '../types';
   import type { BottomNavType } from './BottomNav.svelte';
   import { twMerge } from 'tailwind-merge';
-  import type { HTMLAttributes } from 'svelte/elements';
+  import type { HTMLButtonAttributes, HTMLAnchorAttributes } from 'svelte/elements';
 
-  type ElementType = 'a' | 'button';
-
-  type DynamicElementProps<T extends ElementType> = HTMLAttributes<HTMLElementTagNameMap[T]> 
-
-  interface $$Props extends DynamicElementProps<ElementType> {
+  type CommonProps = {
     btnName?: string;
     appBtnPosition?: 'left' | 'middle' | 'right';
     activeClass?: string;
-    href?: string;
     exact?: boolean;
     spanClass?: string;
   }
 
+  type AnchorProps = CommonProps & Omit<HTMLAnchorAttributes, 'type'> & {
+    href?: string | undefined;
+  };
+
+  type ButtonProps = CommonProps & HTMLButtonAttributes & {
+    disabled?: HTMLButtonAttributes['disabled'];
+  };
+
+  type $$Props = AnchorProps | ButtonProps;
+
   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 href: string = '';
   export let exact: $$Props['exact'] = true;
   export let spanClass: $$Props['spanClass'] = '';
 
@@ -37,12 +42,12 @@
 
   $: active = navUrl && exact ? href === navUrl : navUrl ? navUrl.startsWith(href) : false;
   const btnClasses: ButtonClassesTypes = {
-    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',
+    default: 'inline-flex flex-col items-center justify-center px-5 text-gray-500 dark:text-gray-400 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 text-gray-500 dark:text-gray-400  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',
+    pagination: 'inline-flex flex-col items-center justify-center px-5 text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 group',
+    group: 'inline-flex flex-col items-center justify-center p-4 text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 group',
+    card: 'inline-flex flex-col items-center justify-center px-5 text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 group',
     meeting: '',
     video: ''
   };

src/lib/buttons/Button.svelte

@@ -2,40 +2,42 @@
   import { twMerge } from 'tailwind-merge';
   import { getContext } from 'svelte';
   import type { SizeType } from '$lib/types';
-  import type { HTMLButtonAttributes, HTMLAttributes } from 'svelte/elements';
+  import type { HTMLButtonAttributes, HTMLAnchorAttributes } 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> {
+  type CommonProps = {
     pill?: boolean;
     outline?: boolean;
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    href?: string;
-    type?: HTMLButtonAttributes['type'];
     color?: ButtonColor;
     shadow?: boolean;
-    tag?: string;
+    tag?: 'a' | 'button';
     checked?: boolean;
-    disabled?: boolean;
-    target?: string;
-    rel?: string;
-    name?: string;
   }
 
+  type AnchorProps = CommonProps & Omit<HTMLAnchorAttributes, 'type'> & {
+    href?: string | undefined;
+  };
+
+  type ButtonProps = CommonProps & HTMLButtonAttributes & {
+    disabled?: HTMLButtonAttributes['disabled'];
+    type?: HTMLButtonAttributes['type'];
+  };
+
+  type $$Props = AnchorProps | ButtonProps;
+  
   const group: SizeType = getContext('group');
 
   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 href: string | undefined = undefined;
+  export let type: HTMLButtonAttributes['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;
+  export let disabled: HTMLButtonAttributes['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,14 +1,13 @@
 <script lang="ts">
   import { twMerge } from 'tailwind-merge';
   import Button from './Button.svelte';
-  import type { ComponentProps } from 'svelte';
+  import ButtonProps from "./Button.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');
 

src/lib/forms/CheckboxButton.svelte

@@ -4,7 +4,7 @@
   import type { ButtonColorType, SizeType } from '$lib/types';
   import { twMerge } from 'tailwind-merge';
 
-  interface $$Props extends ComponentProps<Button> {
+  type $$Props = ComponentProps<Button> & {
     group: (string | number)[];
     value: string | number;
     checked?: boolean;
@@ -63,7 +63,7 @@
   $: buttonClass = twMerge(inline ? 'inline-flex' : 'flex', $$props.class);
 </script>
 
-<Button tag="label" {checked} {pill} {outline} {size} {color} {shadow} class={buttonClass}>
+<Button {checked} {pill} {outline} {size} {color} {shadow} class={buttonClass}>
   <input
     use:init={group}
     type="checkbox"

src/lib/forms/RadioButton.svelte

@@ -28,7 +28,7 @@
   $: buttonClass = twMerge(inline ? 'inline-flex' : 'flex', $$props.class);
 </script>
 
-<Button tag="label" checked={value === group} {pill} {outline} {size} {color} {shadow} class={buttonClass}>
+<Button checked={value === group} {pill} {outline} {size} {color} {shadow} class={buttonClass}>
   <input
     type="radio"
     bind:group

src/lib/list-group/Listgroup.svelte

@@ -7,7 +7,6 @@
 
   const dispatch = createEventDispatcher();
 
-  // propagate props type from underlying Frame
   interface $$Props extends ComponentProps<Frame> {
     items?: T[];
     active?: boolean;

src/lib/modal/Modal.svelte

@@ -28,25 +28,25 @@
     classFooter?: string;
   }
 
-  export let open: boolean = false;
-  export let title: string = '';
-  export let size: SizeType = 'md';
-  export let color: ComponentProps<Frame>['color'] = 'default';
-  export let placement: ModalPlacementType = 'center';
-  export let autoclose: boolean = false;
-  export let outsideclose: boolean = false;
-  export let dismissable: boolean = true;
-  export let backdropClass: string = 'fixed inset-0 z-40 bg-gray-900 bg-opacity-50 dark:bg-opacity-80';
-  export let classBackdrop: string | undefined = undefined;
-  export let dialogClass: string = 'fixed top-0 start-0 end-0 h-modal md:inset-0 md:h-full z-50 w-full p-4 flex';
-  export let classDialog: string | undefined = undefined;
-  export let defaultClass: string = 'relative flex flex-col mx-auto';
-  export let headerClass: string = 'flex justify-between items-center p-4 md:p-5 rounded-t-lg';
-  export let classHeader: string | undefined = undefined;
-  export let bodyClass: string = 'p-4 md:p-5 space-y-4 flex-1 overflow-y-auto overscroll-contain';
-  export let classBody: string | undefined = undefined;
-  export let footerClass: string = 'flex items-center p-4 md:p-5 space-x-3 rtl:space-x-reverse rounded-b-lg';
-  export let classFooter: string | undefined = undefined;
+  export let open: $$Props['open'] = false;
+  export let title: $$Props['title'] = '';
+  export let size: NonNullable<$$Props['size']> = 'md';
+  export let color: $$Props['color'] = 'default';
+  export let placement: NonNullable<$$Props['placement']> = 'center';
+  export let autoclose: $$Props['autoclose'] = false;
+  export let outsideclose: $$Props['outsideclose'] = false;
+  export let dismissable: $$Props['dismissable'] = true;
+  export let backdropClass: $$Props['backdropClass'] = 'fixed inset-0 z-40 bg-gray-900 bg-opacity-50 dark:bg-opacity-80';
+  export let classBackdrop: $$Props['classBackdrop'] = undefined;
+  export let dialogClass: $$Props['dialogClass'] = 'fixed top-0 start-0 end-0 h-modal md:inset-0 md:h-full z-50 w-full p-4 flex';
+  export let classDialog: $$Props['classDialog'] = undefined;
+  export let defaultClass: $$Props['defaultClass'] = 'relative flex flex-col mx-auto';
+  export let headerClass: $$Props['headerClass'] = 'flex justify-between items-center p-4 md:p-5 rounded-t-lg';
+  export let classHeader: $$Props['classHeader'] = undefined;
+  export let bodyClass: $$Props['bodyClass'] = 'p-4 md:p-5 space-y-4 flex-1 overflow-y-auto overscroll-contain';
+  export let classBody: $$Props['classBody'] = undefined;
+  export let footerClass: $$Props['footerClass'] = 'flex items-center p-4 md:p-5 space-x-3 rtl:space-x-reverse rounded-b-lg';
+  export let classFooter: $$Props['classFooter'] = undefined;
 
   const dispatch = createEventDispatcher();
   $: dispatch(open ? 'open' : 'close');

src/lib/navbar/Menu.svelte

@@ -1,8 +1,16 @@
 <script lang="ts">
-  export let size = '24';
-  export let color = 'currentColor';
-  export let variation: 'solid' | 'outline' = 'outline';
-  export let ariaLabel = 'bars 3';
+  import type { SVGAttributes } from 'svelte/elements';
+  interface $$Props extends SVGAttributes<SVGSVGElement>{
+    size?: string;
+    color?: string;
+    variation?: 'solid' | 'outline';
+    ariaLabel?: string;
+  }
+  
+  export let size: $$Props['size'] = '24';
+  export let color: $$Props['color'] = 'currentColor';
+  export let variation: $$Props['variation'] = 'outline';
+  export let ariaLabel: $$Props['ariaLabel'] = 'bars 3';
 
   let viewBox: string;
   let svgpath: string;

src/lib/navbar/NavBrand.svelte

@@ -1,6 +1,12 @@
 <script lang="ts">
+  import type { HTMLAreaAttributes } from 'svelte/elements';
   import { twMerge } from 'tailwind-merge';
-  export let href: string = '';
+  
+  interface $$Props extends HTMLAreaAttributes{
+    href?: string;
+  }
+
+  export let href: $$Props['href'] = '';
 </script>
 
 <a {href} {...$$restProps} class={twMerge('flex items-center', $$props.class)}>

src/lib/navbar/NavContainer.svelte

@@ -9,7 +9,7 @@
   export let fluid: boolean = false;
 </script>
 
-<div class={twMerge('mx-auto flex flex-wrap justify-between items-center ', fluid ? 'w-full' : 'container', $$props.class)}>
+<div class={twMerge('mx-auto flex flex-wrap justify-between items-center ', fluid ? 'w-full' : 'container', $$props.class)} {...$$restProps}>
   <slot />
 </div>
 

src/lib/navbar/NavHamburger.svelte

@@ -1,12 +1,18 @@
 <script lang="ts">
+  import type { ComponentProps } from 'svelte';
   import { getContext } from 'svelte';
   import { writable, type Writable } from 'svelte/store';
   import { twMerge } from 'tailwind-merge';
   import ToolbarButton from '../toolbar/ToolbarButton.svelte';
   import Menu from './Menu.svelte';
 
-  export let menuClass: string = 'h-6 w-6 shrink-0';
-  export let onClick: (() => void) | undefined = undefined;
+  type $$Props = ComponentProps<ToolbarButton> & {
+    menuClass?: string;
+    onClick?: (() => void) | undefined;
+  };
+
+  export let menuClass: $$Props['menuClass'] = 'h-6 w-6 shrink-0';
+  export let onClick: $$Props['onClick'] = undefined;
 
   let btnClass: string = 'ms-3 md:hidden';
 

src/lib/navbar/NavLi.svelte

@@ -2,10 +2,21 @@
   import { getContext } from 'svelte';
   import { twMerge } from 'tailwind-merge';
   import type { NavbarLiType } from './NavUl.svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
 
-  export let href: string = '';
-  export let activeClass: string | undefined = undefined;
-  export let nonActiveClass: string | undefined = undefined;
+  type ElementType = 'a' | 'div';
+
+  type DynamicElementProps<T extends ElementType> = HTMLAttributes<HTMLElementTagNameMap[T]>;
+
+  interface $$Props extends DynamicElementProps<ElementType> {
+    href?: string;
+    activeClass?: string;
+    nonActiveClass?: string;
+  }
+
+  export let href: $$Props['href'] = '';
+  export let activeClass: $$Props['activeClass'] = undefined;
+  export let nonActiveClass: $$Props['nonActiveClass'] = undefined;
 
   const context = getContext<NavbarLiType>('navbarContext') ?? {};
   const activeUrlStore = getContext('activeUrl') as { subscribe: (callback: (value: string) => void) => void };

src/lib/navbar/NavUl.svelte

@@ -6,23 +6,33 @@
 </script>
 
 <script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
   import { getContext, setContext } from 'svelte';
   import { sineIn } from 'svelte/easing';
   import { writable, type Writable } from 'svelte/store';
   import { slide, type SlideParams } from 'svelte/transition';
   import { twMerge } from 'tailwind-merge';
   import Frame from '../utils/Frame.svelte';
 
-  const activeUrlStore = writable('');
-
-  export let activeUrl: string = '';
-  export let divClass: string = 'w-full md:block md:w-auto';
-  export let ulClass: string = 'flex flex-col p-4 mt-4 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:text-sm md:font-medium';
-  export let hidden: boolean | undefined = undefined;
-  export let slideParams: SlideParams = { delay: 250, duration: 500, easing: sineIn };
-  export let activeClass: string = 'text-white bg-primary-700 md:bg-transparent md:text-primary-700 md:dark:text-white dark:bg-primary-600 md:dark:bg-transparent';
-  export let nonActiveClass: string = 'text-gray-700 hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-primary-700 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent';
+  interface $$Props extends HTMLAttributes<HTMLDivElement> {
+    activeUrl?: string;
+    divClass?: string;
+    ulClass?: string;
+    hidden?: boolean | undefined;
+    slideParams?: SlideParams;
+    activeClass?: string;
+    nonActiveClass?: string;
+  }
 
+  export let activeUrl: NonNullable<$$Props['activeUrl']> = '';
+  export let divClass: $$Props['divClass'] = 'w-full md:block md:w-auto';
+  export let ulClass: $$Props['ulClass'] = 'flex flex-col p-4 mt-4 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:text-sm md:font-medium';
+  export let hidden: $$Props['hidden'] = undefined;
+  export let slideParams: $$Props['slideParams'] = { delay: 250, duration: 500, easing: sineIn };
+  export let activeClass: NonNullable<$$Props['activeClass']> = 'text-white bg-primary-700 md:bg-transparent md:text-primary-700 md:dark:text-white dark:bg-primary-600 md:dark:bg-transparent';
+  export let nonActiveClass: NonNullable<$$Props['nonActiveClass']> = 'text-gray-700 hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-primary-700 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent';
+  
+  const activeUrlStore = writable('');
   setContext<NavbarLiType>('navbarContext', { activeClass, nonActiveClass });
   $: {
     activeUrlStore.set(activeUrl);

src/lib/navbar/Navbar.svelte

@@ -10,7 +10,7 @@
     fluid?: boolean;
   }
 
-  export let fluid: boolean = false;
+  export let fluid: $$Props['fluid'] = false;
 
   let hidden = writable(true);
   setContext('navHidden', hidden);