flowbite-svelte 0.46.22 → 0.46.23

package/dist/bottom-navigation/BottomNavHeader.svelte

@@ -3,7 +3,7 @@ export let outerClass = "w-full";
 export let 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}>
+<div {...$$restProps} class={twMerge(outerClass, $$props.classOuter)} >
   <div class={twMerge(innerClass, $$props.classInner)} role="group">
     <slot />
   </div>

package/dist/breadcrumb/BreadcrumbItem.svelte

@@ -6,7 +6,7 @@ export let spanClass = "ms-1 text-sm font-medium text-gray-500 md:ms-2 dark:text
 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}>
+<li {...$$restProps} class={twMerge('inline-flex items-center', $$props.class)}>
   {#if home}
     <a class={twMerge(homeClass, $$props.classHome)} {href}>
       {#if $$slots.icon}

package/dist/datepicker/DateCalender.svelte

@@ -0,0 +1,150 @@
+<script>import { createEventDispatcher } from "svelte";
+import { Button, Modal } from "..";
+import { ChevronLeftOutline, ChevronRightOutline } from "flowbite-svelte-icons";
+export let currentDate = /* @__PURE__ */ new Date();
+export let open = false;
+export let locale = "default";
+export let firstDayOfWeek = 0;
+export let showToday = true;
+export let showClose = true;
+export let dateFormat = { month: "long", year: "numeric" };
+export let dayLabelFormat = "short";
+export let customClass = "";
+export let primaryColor = "blue";
+export let secondaryColor = "gray";
+const dispatch = createEventDispatcher();
+let currentMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
+let daysInMonth = getDaysInMonth(currentMonth);
+function getDaysInMonth(date) {
+  const year = date.getFullYear();
+  const month = date.getMonth();
+  const firstDay = new Date(year, month, 1);
+  const lastDay = new Date(year, month + 1, 0);
+  const daysArray = [];
+  let start = firstDay.getDay() - firstDayOfWeek;
+  if (start < 0) start += 7;
+  for (let i = 0; i < start; i++) {
+    const prevMonthDay = new Date(year, month, -i);
+    daysArray.unshift(prevMonthDay);
+  }
+  for (let i = 1; i <= lastDay.getDate(); i++) {
+    daysArray.push(new Date(year, month, i));
+  }
+  const remainingDays = 7 - daysArray.length % 7;
+  if (remainingDays < 7) {
+    for (let i = 1; i <= remainingDays; i++) {
+      daysArray.push(new Date(year, month + 1, i));
+    }
+  }
+  return daysArray;
+}
+function changeMonth(increment) {
+  currentMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth() + increment, 1);
+  daysInMonth = getDaysInMonth(currentMonth);
+}
+function handleDaySelect(day) {
+  dispatch("selectDay", day);
+  open = false;
+}
+function isCurrentMonth(day) {
+  return day.getMonth() === currentMonth.getMonth();
+}
+function handleClose() {
+  open = false;
+  dispatch("close");
+}
+function goToToday() {
+  const today = /* @__PURE__ */ new Date();
+  currentMonth = new Date(today.getFullYear(), today.getMonth(), 1);
+  daysInMonth = getDaysInMonth(currentMonth);
+  currentDate = today;
+  handleDaySelect(today);
+}
+function isToday(day) {
+  const today = /* @__PURE__ */ new Date();
+  return day.getDate() === today.getDate() && day.getMonth() === today.getMonth() && day.getFullYear() === today.getFullYear();
+}
+$: weekdays = [...Array(7)].map((_, i) => {
+  const day = new Date(2021, 5, i + firstDayOfWeek);
+  return day.toLocaleString(locale, { weekday: dayLabelFormat });
+});
+export function setDate(date) {
+  currentDate = date;
+  currentMonth = new Date(date.getFullYear(), date.getMonth(), 1);
+  daysInMonth = getDaysInMonth(currentMonth);
+}
+export function nextMonth() {
+  changeMonth(1);
+}
+export function previousMonth() {
+  changeMonth(-1);
+}
+export function setMonth(month) {
+  currentMonth = new Date(currentMonth.getFullYear(), month, 1);
+  daysInMonth = getDaysInMonth(currentMonth);
+}
+export function setYear(year) {
+  currentMonth = new Date(year, currentMonth.getMonth(), 1);
+  daysInMonth = getDaysInMonth(currentMonth);
+}
+</script>
+
+<Modal bind:open size="xs" autoclose={false} class={`w-full ${customClass}`}>
+	<div class="w-full max-w-md rounded-lg p-6">
+		<div class="mb-4 flex items-center justify-between">
+			<Button size="sm" on:click={() => changeMonth(-1)} color={primaryColor}>
+				<ChevronLeftOutline size="md" />
+			</Button>
+			<span class="text-lg font-semibold">
+				{currentMonth.toLocaleString(locale, dateFormat)}
+			</span>
+			<Button size="sm" on:click={() => changeMonth(1)} color={primaryColor}>
+				<ChevronRightOutline size="md" />
+			</Button>
+		</div>
+		<div class="grid grid-cols-7 gap-2">
+			{#each weekdays as day}
+				<div class="text-center text-sm font-medium">{day}</div>
+			{/each}
+			{#each daysInMonth as day}
+				<Button
+					size="sm"
+					color={currentDate.toDateString() === day.toDateString()
+						? primaryColor
+						: isToday(day)
+							? secondaryColor
+							: 'alternative'}
+					class={!isCurrentMonth(day) ? 'opacity-50' : ''}
+					on:click={() => handleDaySelect(day)}
+				>
+					{day.getDate()}
+				</Button>
+			{/each}
+		</div>
+		<div class="mt-4 flex justify-between">
+			{#if showToday}
+				<Button size="sm" color={primaryColor} on:click={goToToday}>Today</Button>
+			{/if}
+			{#if showClose}
+				<Button size="sm" color={primaryColor} on:click={handleClose}>Close</Button>
+			{/if}
+		</div>
+	</div>
+</Modal>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let currentDate: Date = new Date();
+@prop export let open = false;
+@prop export let locale: string = 'default';
+@prop export let firstDayOfWeek: number = 0;
+@prop export let showToday: boolean = true;
+@prop export let showClose: boolean = true;
+@prop export let dateFormat: Intl.DateTimeFormatOptions = { month: 'long', year: 'numeric' };
+@prop export let dayLabelFormat: 'short' | 'narrow' | 'long' = 'short';
+@prop export let customClass: string = '';
+@prop export let primaryColor: Button['color'] = 'blue';
+@prop export let secondaryColor: string = 'gray';
+-->

package/dist/datepicker/DateCalender.svelte.d.ts

@@ -0,0 +1,55 @@
+import { SvelteComponentTyped } from "svelte";
+import { Button } from '..';
+declare const __propDef: {
+    props: {
+        currentDate?: Date;
+        open?: boolean;
+        locale?: string;
+        firstDayOfWeek?: number;
+        showToday?: boolean;
+        showClose?: boolean;
+        dateFormat?: Intl.DateTimeFormatOptions;
+        dayLabelFormat?: "short" | "narrow" | "long";
+        customClass?: string;
+        primaryColor?: Button["color"];
+        secondaryColor?: string;
+        setDate?: (date: Date) => void;
+        nextMonth?: () => void;
+        previousMonth?: () => void;
+        setMonth?: (month: number) => void;
+        setYear?: (year: number) => void;
+    };
+    events: {
+        selectDay: CustomEvent<any>;
+        close: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DateCalenderProps = typeof __propDef.props;
+export type DateCalenderEvents = typeof __propDef.events;
+export type DateCalenderSlots = typeof __propDef.slots;
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let currentDate: Date = new Date();
+ * @prop export let open = false;
+ * @prop export let locale: string = 'default';
+ * @prop export let firstDayOfWeek: number = 0;
+ * @prop export let showToday: boolean = true;
+ * @prop export let showClose: boolean = true;
+ * @prop export let dateFormat: Intl.DateTimeFormatOptions = { month: 'long', year: 'numeric' };
+ * @prop export let dayLabelFormat: 'short' | 'narrow' | 'long' = 'short';
+ * @prop export let customClass: string = '';
+ * @prop export let primaryColor: Button['color'] = 'blue';
+ * @prop export let secondaryColor: string = 'gray';
+ */
+export default class DateCalender extends SvelteComponentTyped<DateCalenderProps, DateCalenderEvents, DateCalenderSlots> {
+    get setDate(): (date: Date) => void;
+    get nextMonth(): () => void;
+    get previousMonth(): () => void;
+    get setMonth(): (month: number) => void;
+    get setYear(): (year: number) => void;
+}
+export {};

package/dist/footer/FooterLinkGroup.svelte

@@ -2,7 +2,7 @@
 export let ulClass = "text-gray-600 dark:text-gray-400";
 </script>
 
-<ul class={twMerge(ulClass, $$props.class)} {...$$restProps}>
+<ul {...$$restProps} class={twMerge(ulClass, $$props.class)} >
   <slot />
 </ul>
 

package/dist/forms/CheckboxButton.svelte

@@ -9,27 +9,29 @@ export let outline = false;
 export let size = void 0;
 export let color = void 0;
 export let shadow = false;
-function init(_, _group) {
-  if (checked === void 0) checked = _group.includes(value);
-  onChange();
-  return {
-    update(_group2) {
+function init(node, _group) {
+  function update(_group2) {
+    if (_group2 && value !== void 0) {
       checked = _group2.includes(value);
     }
-  };
+  }
+  update(_group);
+  return { update };
 }
 function onChange() {
-  const index = group.indexOf(value);
-  if (checked === void 0) checked = index >= 0;
-  if (checked) {
-    if (index < 0) {
-      group.push(value);
-      group = group;
-    }
-  } else {
-    if (index >= 0) {
-      group.splice(index, 1);
-      group = group;
+  if (group && value !== void 0) {
+    const index = group.indexOf(value);
+    if (checked === void 0) checked = index >= 0;
+    if (checked) {
+      if (index < 0) {
+        group.push(value);
+        group = group;
+      }
+    } else {
+      if (index >= 0) {
+        group.splice(index, 1);
+        group = group;
+      }
     }
   }
 }
@@ -42,7 +44,7 @@ $: buttonClass = twMerge(inline ? "inline-flex" : "flex", $$props.class);
     use:init={group}
     type="checkbox"
     bind:checked
-    {value}
+    value={value !== undefined ? value : 'on'}
     {...$$restProps}
     class="sr-only"
     on:keyup

package/dist/forms/CheckboxButton.svelte.d.ts

@@ -23,14 +23,14 @@ declare const __propDef: {
         disabled?: import("svelte/elements").HTMLButtonAttributes["disabled"];
         type?: import("svelte/elements").HTMLButtonAttributes["type"];
     })) & {
-        group: (string | number)[];
-        value: string | number;
+        group?: (string | number)[];
+        value?: string | number;
         checked?: boolean;
         inline?: boolean;
         pill?: boolean;
         outline?: boolean;
-        size?: SizeType | undefined;
-        color?: ButtonColorType | undefined;
+        size?: SizeType;
+        color?: ButtonColorType;
         shadow?: boolean;
     };
     events: {

package/dist/forms/Fileupload.svelte.d.ts

@@ -9,8 +9,8 @@ declare const __propDef: {
         color?: "base" | "green" | "red";
         floatClass?: string;
     } & {
-        value: string;
-        files: FileList | undefined;
+        value?: string;
+        files?: FileList | undefined;
         inputClass?: string;
     };
     events: {

package/dist/forms/Input.svelte

@@ -51,7 +51,7 @@ const clearAll = (e) => {
 };
 </script>
 
-<Wrapper class="relative w-full" show>
+<Wrapper class="relative w-full" show={$$slots.left || $$slots.right}>
   {#if $$slots.left}
     <div class="{twMerge(floatClass, $$props.classLeft)} start-0 ps-2.5 pointer-events-none">
       <slot name="left" />
@@ -60,14 +60,14 @@ const clearAll = (e) => {
   <slot props={{ ...$$restProps, class: inputClass }}>
     <input {...$$restProps} bind:value on:blur on:change on:click on:contextmenu on:focus on:keydown on:keypress on:keyup on:mouseover on:mouseenter on:mouseleave on:paste on:input {...{ type }} class={inputClass} />
   </slot>
+  {#if $$slots.right}
   <div class="{twMerge(floatClass, $$props.classRight)} end-0 pe-2.5">
-    {#if $$slots.right}
-      <slot name="right"></slot>
-    {/if}
-    {#if clearable && value && `${value}`.length > 0}
-      <CloseButton {size} on:click={clearAll} color="none" class="p-0 focus:ring-gray-400 dark:text-white" />
-    {/if}
+    <slot name="right"></slot>
   </div>
+  {/if}
+  {#if clearable && value && `${value}`.length > 0}
+    <CloseButton {size} on:click={clearAll} color="none" class=" {twMerge(floatClass, $$props.classRight)} focus:ring-0 end-6 focus:ring-gray-400 dark:text-white" />
+  {/if}
 </Wrapper>
 
 <!--

package/dist/indicators/Indicator.svelte

@@ -57,7 +57,7 @@ let dotClass;
 $: dotClass = twMerge("flex-shrink-0", rounded ? "rounded" : "rounded-full", border && "border-2 border-white dark:border-gray-800", sizes[size], colors[color], $$slots.default && "inline-flex items-center justify-center", placement && "absolute " + placements[placement], placement && offset && offsets[placement], $$props.class);
 </script>
 
-<div class={dotClass} {...$$restProps}><slot /></div>
+<div {...$$restProps} class={dotClass} ><slot /></div>
 
 <!--
 @component

package/dist/navbar/NavContainer.svelte

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

package/dist/table/TableBody.svelte

@@ -8,7 +8,7 @@ let sorter = getContext("sorter");
 $: sorted = $sorter ? filtered.toSorted((a, b) => $sorter.sortDirection * $sorter.sort(a, b)) : filtered;
 </script>
 
-<tbody class={tableBodyClass} {...$$restProps}>
+<tbody {...$$restProps} class={tableBodyClass}>
   <slot />
   {#each sorted as item}
     <slot name="row" {item} />

package/dist/tabs/Tabs.svelte

@@ -37,7 +37,7 @@ function init(node) {
 $: ulClass = twMerge(defaultClass, tabStyle === "underline" && "-mb-px", $$props.class);
 </script>
 
-<ul class={ulClass} {...$$restProps}>
+<ul {...$$restProps} class={ulClass}>
   <slot {tabStyle}></slot>
 </ul>
 {#if divider}

package/dist/timeline/Group.svelte

@@ -10,7 +10,7 @@ let olCls = twMerge(olClass, $$props.classOl);
 
 <div class={divCls}>
   <time class={timeCls}>{date}</time>
-  <ol class={olCls} {...$$restProps}>
+  <ol {...$$restProps} class={olCls}>
     <slot />
   </ol>
 </div>

package/dist/timeline/Timeline.svelte

@@ -11,7 +11,7 @@ let olClasses = {
 };
 </script>
 
-<ol class={twMerge(olClasses[order], $$props.class)} {...$$restProps}>
+<ol {...$$restProps} class={twMerge(olClasses[order], $$props.class)} >
   <slot />
 </ol>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.46.22",
+  "version": "0.46.23",
   "description": "Flowbite components for Svelte",
   "main": "dist/index.js",
   "author": {
@@ -12,12 +12,12 @@
   "homepage": "https://flowbite-svelte.com/",
   "license": "MIT",
   "devDependencies": {
-    "@changesets/cli": "^2.27.8",
+    "@changesets/cli": "^2.27.9",
     "@docsearch/css": "^3.6.2",
     "@docsearch/js": "^3.6.2",
-    "@playwright/test": "^1.47.2",
-    "@sveltejs/adapter-vercel": "^5.4.4",
-    "@sveltejs/kit": "^2.6.1",
+    "@playwright/test": "^1.48.0",
+    "@sveltejs/adapter-vercel": "^5.4.5",
+    "@sveltejs/kit": "^2.6.3",
     "@sveltejs/package": "2.3.2",
     "@sveltejs/vite-plugin-svelte": "^3.1.2",
     "@svitejs/changesets-changelog-github-compact": "^1.1.0",
@@ -25,11 +25,9 @@
     "autoprefixer": "^10.4.20",
     "dayjs": "^1.11.13",
     "esbuild": "0.23.1",
-    "eslint": "^9.11.1",
+    "eslint": "^9.12.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-svelte": "^2.44.1",
-    "flowbite-svelte": "^0.46.22",
-    "flowbite-svelte-blocks": "^1.1.3",
     "flowbite-svelte-icons": "^1.6.1",
     "mdsvex": "^0.12.3",
     "mdsvexamples": "^0.4.1",
@@ -40,14 +38,14 @@
     "publint": "^0.2.11",
     "svelte": "^4.2.19",
     "svelte-check": "^4.0.4",
-    "svelte-lib-helpers": "^0.4.9",
+    "svelte-lib-helpers": "^0.4.16",
     "svelte-meta-tags": "^3.1.4",
     "svelte-preprocess": "^6.0.3",
     "svelte2tsx": "^0.7.21",
     "tailwind-merge": "^1.13.1",
     "tailwindcss": "^3.4.13",
     "tslib": "^2.7.0",
-    "typescript": "^5.6.2",
+    "typescript": "^5.6.3",
     "typescript-eslint": "8.4.0",
     "vite": "^5.4.8",
     "vitest": "^1.6.0"
@@ -102,7 +100,7 @@
     "@floating-ui/dom": "^1.6.11",
     "apexcharts": "^3.54.0",
     "flowbite": "^2.5.2",
-    "tailwind-merge": "^2.5.2"
+    "tailwind-merge": "^2.5.3"
   },
   "engines": {
     "pnpm": ">=8.0.0",
@@ -224,6 +222,10 @@
       "types": "./dist/datepicker/Calender.svelte.d.ts",
       "svelte": "./dist/datepicker/Calender.svelte"
     },
+    "./DateCalender.svelte": {
+      "types": "./dist/datepicker/DateCalender.svelte.d.ts",
+      "svelte": "./dist/datepicker/DateCalender.svelte"
+    },
     "./Datepicker.svelte": {
       "types": "./dist/datepicker/Datepicker.svelte.d.ts",
       "svelte": "./dist/datepicker/Datepicker.svelte"