flowbite-svelte 0.47.0 → 0.47.1

package/README.md

@@ -174,7 +174,7 @@ For full documentation, visit [flowbite-svelte.com](https://flowbite-svelte.com/
         </a>
     </td>
     <td width="33.3333%">
-        <a href="https://flowbite-svelte.com/docs/experimental/datepicker">
+        <a href="https://flowbite-svelte.com/docs/components/datepicker">
             <img alt="Svelte Datepicker" src="https://flowbite.s3.amazonaws.com/github/svelte/datepicker.jpg">
         </a>
     </td>

package/dist/avatar/Avatar.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
-import type { HTMLAttributes } from 'svelte/elements';
+import type { HTMLAttributes, HTMLAnchorAttributes } from 'svelte/elements';
 declare const __propDef: {
-    props: HTMLAttributes<HTMLAnchorElement | HTMLDivElement> & {
+    props: {
         href?: string;
         src?: string;
         rounded?: boolean;
@@ -10,7 +10,7 @@ declare const __propDef: {
         dot?: object | undefined;
         alt?: string;
         size?: "xs" | "sm" | "md" | "lg" | "xl" | "none";
-    };
+    } & (HTMLAnchorAttributes | HTMLAttributes<HTMLDivElement>);
     events: {
         [evt: string]: CustomEvent<any>;
     };
@@ -18,7 +18,8 @@ declare const __propDef: {
         default: {};
     };
 };
-export type AvatarProps = typeof __propDef.props;
+type AvatarProps_ = typeof __propDef.props;
+export { AvatarProps_ as AvatarProps };
 export type AvatarEvents = typeof __propDef.events;
 export type AvatarSlots = typeof __propDef.slots;
 /**
@@ -33,6 +34,5 @@ export type AvatarSlots = typeof __propDef.slots;
  * @prop export let alt: $$Props['alt'] = '';
  * @prop export let size: NonNullable<$$Props['size']> = 'md';
  */
-export default class Avatar extends SvelteComponentTyped<AvatarProps, AvatarEvents, AvatarSlots> {
+export default class Avatar extends SvelteComponentTyped<AvatarProps_, AvatarEvents, AvatarSlots> {
 }
-export {};

package/dist/datepicker/Datepicker.svelte

@@ -1,7 +1,6 @@
 <script>import { createEventDispatcher, onMount } from "svelte";
 import { fade } from "svelte/transition";
 import { Button } from "..";
-import { ChevronLeftOutline, ChevronRightOutline, CalendarMonthSolid } from "flowbite-svelte-icons";
 export let value = null;
 export let defaultDate = null;
 export let range = false;
@@ -215,7 +214,9 @@ function handleApply() {
     <div class="relative">
       <input bind:this={inputElement} type="text" class="w-full px-4 py-2 text-sm border rounded-md focus:outline-none dark:bg-gray-700 dark:text-white dark:border-gray-600 {getFocusRingClass(color)} {inputClass}" {placeholder} value={range ? `${formatDate(rangeFrom)} - ${formatDate(rangeTo)}` : formatDate(value)} on:focus={() => (isOpen = true)} on:input={handleInputChange} on:keydown={handleInputKeydown} {disabled} {required} aria-haspopup="dialog" />
       <button type="button" class="absolute inset-y-0 right-0 flex items-center px-3 text-gray-500 dark:text-gray-400 focus:outline-none" on:click={() => (isOpen = !isOpen)} {disabled} aria-label={isOpen ? 'Close date picker' : 'Open date picker'}>
-        <CalendarMonthSolid class="w-5 h-5" />
+        <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+          <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"></path>
+        </svg>
       </button>
     </div>
   {/if}
@@ -236,13 +237,13 @@ function handleApply() {
         {/if}
         <div class="flex items-center justify-between mb-4">
           <Button on:click={() => changeMonth(-1)} {color} size="sm" aria-label="Previous month">
-            <ChevronLeftOutline class="w-4 h-4" />
+            <svg class="w-3 h-3 rtl:rotate-180 text-white dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5H1m0 0 4 4M1 5l4-4"></path></svg>
           </Button>
           <h3 class="text-lg font-semibold dark:text-white" aria-live="polite">
             {currentMonth.toLocaleString(locale, { month: 'long', year: 'numeric' })}
           </h3>
           <Button on:click={() => changeMonth(1)} {color} size="sm" aria-label="Next month">
-            <ChevronRightOutline class="w-4 h-4" />
+            <svg class="w-3 h-3 rtl:rotate-180 text-white dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"></path></svg>
           </Button>
         </div>
         <div class="grid grid-cols-7 gap-1" role="grid">

package/dist/drawer/Drawer.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type { drawerTransitionParamTypes, drawerTransitionTypes } from '../types';
+import type { drawerTransitionParamTypes, TransitionTypes } from '../types';
 import type { HTMLAttributes } from 'svelte/elements';
 declare const __propDef: {
     props: HTMLAttributes<HTMLElement> & {
@@ -18,7 +18,7 @@ declare const __propDef: {
         id?: string;
         divClass?: string;
         transitionParams?: drawerTransitionParamTypes;
-        transitionType?: drawerTransitionTypes;
+        transitionType?: TransitionTypes;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/dropdown/DropdownItem.svelte.d.ts

@@ -1,11 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
-import type { HTMLAttributes } from 'svelte/elements';
+import type { HTMLButtonAttributes, HTMLAnchorAttributes } from 'svelte/elements';
 declare const __propDef: {
-    props: HTMLAttributes<HTMLAnchorElement | HTMLButtonElement> & {
+    props: {
         defaultClass?: string;
         href?: string;
         activeClass?: string;
-    };
+    } & (HTMLAnchorAttributes | HTMLButtonAttributes);
     events: {
         click: MouseEvent;
         change: Event;
@@ -22,7 +22,8 @@ declare const __propDef: {
         default: {};
     };
 };
-export type DropdownItemProps = typeof __propDef.props;
+type DropdownItemProps_ = typeof __propDef.props;
+export { DropdownItemProps_ as DropdownItemProps };
 export type DropdownItemEvents = typeof __propDef.events;
 export type DropdownItemSlots = typeof __propDef.slots;
 /**
@@ -33,6 +34,5 @@ export type DropdownItemSlots = typeof __propDef.slots;
  * @prop export let activeClass: $$Props['activeClass'] = undefined;
  * @prop export let active: boolean = false;
  */
-export default class DropdownItem extends SvelteComponentTyped<DropdownItemProps, DropdownItemEvents, DropdownItemSlots> {
+export default class DropdownItem extends SvelteComponentTyped<DropdownItemProps_, DropdownItemEvents, DropdownItemSlots> {
 }
-export {};

package/dist/navbar/NavLi.svelte.d.ts

@@ -1,11 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
-import type { HTMLAttributes } from 'svelte/elements';
+import type { HTMLAttributes, HTMLAnchorAttributes } from 'svelte/elements';
 declare const __propDef: {
-    props: HTMLAttributes<HTMLAnchorElement | HTMLDivElement> & {
+    props: {
         href?: string;
         activeClass?: string;
         nonActiveClass?: string;
-    };
+    } & (HTMLAnchorAttributes | HTMLAttributes<HTMLDivElement>);
     events: {
         blur: FocusEvent;
         change: Event;
@@ -24,7 +24,8 @@ declare const __propDef: {
         default: {};
     };
 };
-export type NavLiProps = typeof __propDef.props;
+type NavLiProps_ = typeof __propDef.props;
+export { NavLiProps_ as NavLiProps };
 export type NavLiEvents = typeof __propDef.events;
 export type NavLiSlots = typeof __propDef.slots;
 /**
@@ -34,6 +35,5 @@ export type NavLiSlots = typeof __propDef.slots;
  * @prop export let activeClass: $$Props['activeClass'] = undefined;
  * @prop export let nonActiveClass: $$Props['nonActiveClass'] = undefined;
  */
-export default class NavLi extends SvelteComponentTyped<NavLiProps, NavLiEvents, NavLiSlots> {
+export default class NavLi extends SvelteComponentTyped<NavLiProps_, NavLiEvents, NavLiSlots> {
 }
-export {};

package/dist/pagination/PaginationItem.svelte.d.ts

@@ -1,13 +1,13 @@
 import { SvelteComponentTyped } from "svelte";
-import type { HTMLAttributes } from 'svelte/elements';
+import type { HTMLButtonAttributes, HTMLAnchorAttributes } from 'svelte/elements';
 declare const __propDef: {
-    props: HTMLAttributes<HTMLAnchorElement | HTMLButtonElement> & {
+    props: {
         href?: string;
         active?: boolean;
         activeClass?: string;
         normalClass?: string;
         large?: boolean;
-    };
+    } & (HTMLAnchorAttributes | HTMLButtonAttributes);
     events: {
         blur: FocusEvent;
         change: Event;
@@ -26,7 +26,8 @@ declare const __propDef: {
         default: {};
     };
 };
-export type PaginationItemProps = typeof __propDef.props;
+type PaginationItemProps_ = typeof __propDef.props;
+export { PaginationItemProps_ as PaginationItemProps };
 export type PaginationItemEvents = typeof __propDef.events;
 export type PaginationItemSlots = typeof __propDef.slots;
 /**
@@ -38,6 +39,5 @@ export type PaginationItemSlots = typeof __propDef.slots;
  * @prop export let normalClass: $$Props['normalClass'] = 'text-gray-500 bg-white hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white';
  * @prop export let large: $$Props['large'] = false;
  */
-export default class PaginationItem extends SvelteComponentTyped<PaginationItemProps, PaginationItemEvents, PaginationItemSlots> {
+export default class PaginationItem extends SvelteComponentTyped<PaginationItemProps_, PaginationItemEvents, PaginationItemSlots> {
 }
-export {};

package/dist/types.d.ts

@@ -1,6 +1,5 @@
 import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
 export type BlockQuoteType = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl';
-export type ButtonType = 'button' | 'submit' | 'reset';
 export type ButtonColorType = 'alternative' | 'blue' | 'dark' | 'green' | 'light' | 'primary' | 'purple' | 'red' | 'yellow' | 'none';
 export type CheckboxItem = {
     value: string;
@@ -8,7 +7,6 @@ export type CheckboxItem = {
     isChecked?: boolean;
 };
 export type ColorVariant = 'dark' | 'red' | 'yellow' | 'green' | 'indigo' | 'purple' | 'pink' | 'blue' | 'primary' | 'none';
-export type Colors = 'blue' | 'gray' | 'red' | 'yellow' | 'purple' | 'green' | 'indigo' | 'pink' | 'white' | 'custom' | 'primary' | 'secondary';
 export type ImgType = {
     src: string;
     alt?: string;
@@ -16,14 +14,11 @@ export type ImgType = {
 export type IndicatorColorType = 'gray' | 'dark' | 'blue' | 'green' | 'red' | 'purple' | 'indigo' | 'yellow' | 'teal' | 'none';
 export type IndicatorPlacementType = 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center' | 'center-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | undefined;
 export type InputType = 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'reset' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week' | 'search';
-export type drawerTransitionTypes = 'fade' | 'fly' | 'slide' | 'blur' | 'in:fly' | 'out:fly' | 'in:slide' | 'out:slide' | 'in:fade' | 'out:fade' | 'in:blur' | 'out:blur' | undefined;
 export type FormColorType = 'blue' | 'red' | 'green' | 'purple' | 'teal' | 'yellow' | 'orange' | 'primary' | 'secondary';
 export type ModalPlacementType = 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center' | 'center-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
 export type PsizeType = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl';
 export type PweightType = 'thin' | 'extralight' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black';
 export type TableColorType = 'blue' | 'green' | 'red' | 'yellow' | 'purple' | 'indigo' | 'pink' | 'default' | 'custom';
-export type ToolbarColorType = 'gray' | 'red' | 'yellow' | 'green' | 'indigo' | 'purple' | 'pink' | 'blue' | 'dark' | 'none';
-export type ToolbarButtonType = 'dark' | 'default' | 'gray' | 'red' | 'yellow' | 'green' | 'indigo' | 'purple' | 'pink' | 'blue';
 export declare const xs = "xs";
 export declare const sm = "sm";
 export declare const md = "md";
@@ -90,12 +85,6 @@ export interface LinkType {
     rel?: string;
     active?: boolean;
 }
-export interface NavbarType {
-    name: string;
-    href: string;
-    rel?: string;
-    child?: NavbarType[];
-}
 export interface SiteType {
     name: string;
     href: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.47.0",
+  "version": "0.47.1",
   "description": "Flowbite components for Svelte",
   "main": "dist/index.js",
   "author": {
@@ -15,20 +15,20 @@
     "@changesets/cli": "2.27.9",
     "@docsearch/css": "^3.6.2",
     "@docsearch/js": "^3.6.2",
-    "@playwright/test": "^1.48.0",
+    "@playwright/test": "^1.48.1",
     "@sveltejs/adapter-vercel": "^5.4.5",
-    "@sveltejs/kit": "^2.6.3",
+    "@sveltejs/kit": "^2.7.1",
     "@sveltejs/package": "2.3.2",
     "@sveltejs/vite-plugin-svelte": "^3.1.2",
-    "@svitejs/changesets-changelog-github-compact": "^1.1.0",
+    "@svitejs/changesets-changelog-github-compact": "^1.2.0",
     "@types/eslint": "^8.56.12",
     "autoprefixer": "^10.4.20",
     "dayjs": "^1.11.13",
     "esbuild": "0.23.1",
     "eslint": "^9.12.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-svelte": "^2.45.0",
-    "flowbite-svelte-icons": "^1.6.1",
+    "eslint-plugin-svelte": "^2.45.1",
+    "flowbite-svelte-icons": "^1.6.2",
     "globals": "^15.11.0",
     "mdsvex": "^0.12.3",
     "mdsvexamples": "^0.4.1",
@@ -38,17 +38,17 @@
     "prism-themes": "^1.9.0",
     "publint": "^0.2.11",
     "svelte": "^4.2.19",
-    "svelte-check": "^4.0.4",
+    "svelte-check": "^4.0.5",
     "svelte-lib-helpers": "^0.4.16",
     "svelte-meta-tags": "^3.1.4",
     "svelte-preprocess": "^6.0.3",
-    "svelte2tsx": "^0.7.21",
+    "svelte2tsx": "^0.7.22",
     "tailwind-merge": "^1.13.1",
-    "tailwindcss": "^3.4.13",
-    "tslib": "^2.7.0",
+    "tailwindcss": "^3.4.14",
+    "tslib": "^2.8.0",
     "typescript": "^5.6.3",
     "typescript-eslint": "8.4.0",
-    "vite": "^5.4.8",
+    "vite": "^5.4.9",
     "vitest": "^1.6.0"
   },
   "peerDependencies": {
@@ -99,9 +99,9 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.6.11",
-    "apexcharts": "^3.54.0",
+    "apexcharts": "^3.54.1",
     "flowbite": "^2.5.2",
-    "tailwind-merge": "^2.5.3"
+    "tailwind-merge": "^2.5.4"
   },
   "engines": {
     "pnpm": ">=8.0.0",