flowbite-svelte 0.48.4 → 1.0.0-next.2

package/dist/datepicker/Datepicker.svelte

@@ -1,224 +1,211 @@
-<script>import { createEventDispatcher, onMount } from "svelte";
-import { fade } from "svelte/transition";
-import { Button } from "..";
-export let value = null;
-export let defaultDate = null;
-export let range = false;
-export let rangeFrom = null;
-export let rangeTo = null;
-export let locale = "default";
-export let firstDayOfWeek = 0;
-export let dateFormat = { year: "numeric", month: "long", day: "numeric" };
-export let placeholder = "Select date";
-export let disabled = false;
-export let required = false;
-export let inputClass = "";
-export let color = "primary";
-export let inline = false;
-export let autohide = true;
-export let showActionButtons = false;
-export let title = "";
-const dispatch = createEventDispatcher();
-let isOpen = inline;
-let inputElement;
-let datepickerContainerElement;
-let currentMonth = value || defaultDate || /* @__PURE__ */ new Date();
-let focusedDate = null;
-let calendarRef;
-$: daysInMonth = getDaysInMonth(currentMonth);
-$: weekdays = getWeekdays();
-onMount(() => {
-  if (!inline) {
-    document.addEventListener("click", handleClickOutside);
-    return () => {
-      document.removeEventListener("click", handleClickOutside);
-    };
-  }
-});
-function getFocusRingClass(color2) {
-  switch (color2) {
-    case "primary":
-      return "focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400";
-    case "blue":
-      return "focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400";
-    case "red":
-      return "focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400";
-    case "green":
-      return "focus:ring-2 focus:ring-green-500 dark:focus:ring-green-400";
-    case "yellow":
-      return "focus:ring-2 focus:ring-yellow-500 dark:focus:ring-yellow-400";
-    case "purple":
-      return "focus:ring-2 focus:ring-purple-500 dark:focus:ring-purple-400";
-    default:
-      return "";
-  }
-}
-function getRangeBackgroundClass(color2) {
-  switch (color2) {
-    case "primary":
-      return "bg-primary-100 dark:bg-primary-900";
-    case "blue":
-      return "bg-blue-100 dark:bg-blue-900";
-    case "red":
-      return "bg-red-100 dark:bg-red-900";
-    case "green":
-      return "bg-green-100 dark:bg-green-900";
-    case "yellow":
-      return "bg-yellow-100 dark:bg-yellow-900";
-    case "purple":
-      return "bg-purple-100 dark:bg-purple-900";
-    default:
-      return "";
-  }
-}
-function getDaysInMonth(date) {
-  const year = date.getFullYear();
-  const month = date.getMonth();
-  const firstDay = new Date(year, month, 0);
-  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++) {
-    daysArray.unshift(new Date(year, month, -i));
-  }
-  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));
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { fade } from "svelte/transition";
+  import { Button, type ButtonProps } from "..";
+  import type { DatepickerProps as Props } from "./type";
+  import { datepicker } from "./theme";
+
+  let {
+    value = $bindable(),
+    defaultDate = null,
+    range = false,
+    rangeFrom = $bindable(),
+    rangeTo = $bindable(),
+    locale = "default",
+    firstDayOfWeek = 0, // 0 = Monday, 6 = Sunday
+    dateFormat = { year: "numeric", month: "long", day: "numeric" },
+    placeholder = "Select date",
+    disabled = false,
+    required = false,
+    inputClass = "",
+    color = "primary",
+    inline = false,
+    autohide = true,
+    showActionButtons = false,
+    title = "",
+    onselect,
+    onclear,
+    onapply
+  }: Props = $props();
+
+  // Internal state
+  let isOpen: boolean = $state(inline);
+  let inputElement: HTMLInputElement | null = $state(null);
+  let datepickerContainerElement: HTMLDivElement;
+  let currentMonth: Date = $state(value || defaultDate || new Date());
+  let focusedDate: Date | null = null;
+  let calendarRef: HTMLDivElement | null = $state(null);
+
+  let daysInMonth = $derived(getDaysInMonth(currentMonth));
+
+  onMount(() => {
+    if (!inline) {
+      document.addEventListener("click", handleClickOutside);
+      return () => {
+        document.removeEventListener("click", handleClickOutside);
+      };
+    }
+  });
+
+  function getDaysInMonth(date: Date): Date[] {
+    const year = date.getFullYear();
+    const month = date.getMonth();
+    const firstDay = new Date(year, month, 0);
+    const lastDay = new Date(year, month + 1, 0);
+    const daysArray: Date[] = [];
+
+    // Add days from previous month to fill the first week
+    let start = firstDay.getDay() - firstDayOfWeek;
+    if (start < 0) start += 7;
+    for (let i = 0; i < start; i++) {
+      daysArray.unshift(new Date(year, month, -i));
     }
+
+    // Add days of the current month
+    for (let i = 1; i <= lastDay.getDate(); i++) {
+      daysArray.push(new Date(year, month, i));
+    }
+
+    // Add days from next month to fill the last week
+    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;
   }
-  return daysArray;
-}
-function getWeekdays() {
-  const weekdays2 = [];
-  for (let i = 0; i < 7; i++) {
-    const day = new Date(2021, 5, i + firstDayOfWeek);
-    weekdays2.push(day.toLocaleString(locale, { weekday: "short" }));
+
+  const getWeekdayNames = (locale = "en-US"): string[] => {
+    return Array.from({ length: 7 }, (_, i) => new Date(1970, 0, 4 + i).toLocaleDateString(locale, { weekday: "short" }));
+  };
+  let weekdays = getWeekdayNames();
+
+  const addMonth = (date: Date, increment: number): Date => new Date(date.getFullYear(), date.getMonth() + increment, 1);
+  const addDay = (date: Date, increment: number): Date => new Date(date.getFullYear(), date.getMonth(), date.getDate() + increment);
+
+  function changeMonth(increment: number) {
+    currentMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth() + increment, 1);
   }
-  return weekdays2;
-}
-function changeMonth(increment) {
-  currentMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth() + increment, 1);
-}
-function handleDaySelect(day) {
-  if (range) {
-    if (!rangeFrom || rangeFrom && rangeTo) {
-      rangeFrom = day;
-      rangeTo = null;
-    } else if (day < rangeFrom) {
-      rangeTo = rangeFrom;
-      rangeFrom = day;
+
+  function handleDaySelect(day: Date) {
+    if (range) {
+      if (!rangeFrom || (rangeFrom && rangeTo)) {
+        rangeFrom = day;
+        rangeTo = undefined;
+      } else if (day < rangeFrom) {
+        rangeFrom = day;
+        rangeTo = rangeFrom;
+      } else {
+        rangeTo = day;
+      }
+      onselect?.({ from: rangeFrom, to: rangeTo });
     } else {
-      rangeTo = day;
+      value = day;
+      onselect?.(value);
+      if (autohide && !inline) isOpen = false;
     }
-    dispatch("select", { from: rangeFrom, to: rangeTo });
-  } else {
-    value = day;
-    dispatch("select", value);
-    if (autohide && !inline) isOpen = false;
   }
-}
-function handleInputChange() {
-  const date = new Date(inputElement.value);
-  if (!isNaN(date.getTime())) {
-    handleDaySelect(date);
-  }
-}
-function handleClickOutside(event) {
-  if (isOpen && datepickerContainerElement && !datepickerContainerElement.contains(event.target)) {
-    isOpen = false;
+
+  function handleInputChange() {
+    const date = new Date(inputElement?.value ?? "");
+    if (!isNaN(date.getTime())) {
+      handleDaySelect(date);
+    }
   }
-}
-function formatDate(date) {
-  if (!date) return "";
-  return date.toLocaleDateString(locale, dateFormat);
-}
-function isSameDate(date1, date2) {
-  if (!date1 || !date2) return false;
-  return date1.toDateString() === date2.toDateString();
-}
-$: isSelected = (day) => {
-  if (range) {
-    return isSameDate(day, rangeFrom) || isSameDate(day, rangeTo);
+
+  function handleClickOutside(event: MouseEvent) {
+    if (isOpen && datepickerContainerElement && !datepickerContainerElement.contains(event.target as Node)) {
+      isOpen = false;
+    }
   }
-  return isSameDate(day, value);
-};
-function isInRange(day) {
-  if (!range || !rangeFrom || !rangeTo) return false;
-  return day > rangeFrom && day < rangeTo;
-}
-function isToday(day) {
-  const today = /* @__PURE__ */ new Date();
-  return day.toDateString() === today.toDateString();
-}
-function handleCalendarKeydown(event) {
-  if (!isOpen) return;
-  if (!focusedDate) {
-    focusedDate = value || /* @__PURE__ */ new Date();
+
+  const formatDate = (date?: Date): string => date?.toLocaleDateString(locale, dateFormat) ?? "";
+  const isSameDate = (date1?: Date, date2?: Date): boolean => date1?.toDateString() === date2?.toDateString();
+  const isToday = (day: Date): boolean => isSameDate(day, new Date());
+  const isInRange = (day: Date): boolean => !!(range && rangeFrom && rangeTo && day > rangeFrom && day < rangeTo);
+
+  let isSelected = $derived((day: Date): boolean => (range ? isSameDate(day, rangeFrom) || isSameDate(day, rangeTo) : isSameDate(day, value)));
+
+  function handleCalendarKeydown(event: KeyboardEvent) {
+    if (!isOpen) return;
+
+    if (!focusedDate) {
+      focusedDate = value || new Date();
+    }
+
+    switch (event.key) {
+      case "ArrowLeft":
+        focusedDate = addDay(focusedDate, -1);
+        break;
+      case "ArrowRight":
+        focusedDate = addDay(focusedDate, 1);
+        break;
+      case "ArrowUp":
+        focusedDate = addDay(focusedDate, -7);
+        break;
+      case "ArrowDown":
+        focusedDate = addDay(focusedDate, 7);
+        break;
+      case "Enter":
+        handleDaySelect(focusedDate);
+        break;
+      case "Escape":
+        isOpen = false;
+        inputElement?.focus();
+        break;
+      default:
+        return;
+    }
+
+    event.preventDefault();
+    if (focusedDate.getMonth() !== currentMonth.getMonth()) {
+      currentMonth = new Date(focusedDate.getFullYear(), focusedDate.getMonth(), 1);
+    }
+
+    // Focus the button for the focused date
+    setTimeout(() => {
+      const focusedButton = calendarRef?.querySelector(`button[aria-label="${focusedDate!.toLocaleDateString(locale, { weekday: "long", year: "numeric", month: "long", day: "numeric" })}"]`) as HTMLButtonElement | null;
+      focusedButton?.focus();
+    }, 0);
   }
-  switch (event.key) {
-    case "ArrowLeft":
-      focusedDate = new Date(focusedDate.getFullYear(), focusedDate.getMonth(), focusedDate.getDate() - 1);
-      break;
-    case "ArrowRight":
-      focusedDate = new Date(focusedDate.getFullYear(), focusedDate.getMonth(), focusedDate.getDate() + 1);
-      break;
-    case "ArrowUp":
-      focusedDate = new Date(focusedDate.getFullYear(), focusedDate.getMonth(), focusedDate.getDate() - 7);
-      break;
-    case "ArrowDown":
-      focusedDate = new Date(focusedDate.getFullYear(), focusedDate.getMonth(), focusedDate.getDate() + 7);
-      break;
-    case "Enter":
-      handleDaySelect(focusedDate);
-      break;
-    case "Escape":
-      isOpen = false;
-      inputElement.focus();
-      break;
-    default:
-      return;
+
+  function handleInputKeydown(event: KeyboardEvent) {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      isOpen = !isOpen;
+    }
   }
-  event.preventDefault();
-  if (focusedDate.getMonth() !== currentMonth.getMonth()) {
-    currentMonth = new Date(focusedDate.getFullYear(), focusedDate.getMonth(), 1);
+
+  function handleClear() {
+    value = rangeFrom = rangeTo = undefined;
+    onclear?.();
   }
-  setTimeout(() => {
-    const focusedButton = calendarRef.querySelector(`button[aria-label="${focusedDate.toLocaleDateString(locale, { weekday: "long", year: "numeric", month: "long", day: "numeric" })}"]`);
-    focusedButton?.focus();
-  }, 0);
-}
-function handleInputKeydown(event) {
-  if (event.key === "Enter" || event.key === " ") {
-    event.preventDefault();
-    isOpen = !isOpen;
+
+  function handleApply() {
+    const result = range ? { from: rangeFrom, to: rangeTo } : value;
+    if (result) onapply?.(result);
+    if (!inline) isOpen = false;
   }
-}
-function handleToday() {
-  handleDaySelect(/* @__PURE__ */ new Date());
-}
-function handleClear() {
-  value = null;
-  rangeFrom = null;
-  rangeTo = null;
-  dispatch("clear");
-}
-function handleApply() {
-  dispatch("apply", range ? { from: rangeFrom, to: rangeTo } : value);
-  if (!inline) isOpen = false;
-}
+
+  let { base, input, button, titleVariant, actionButtons, columnHeader, polite, grid, nav, dayButton } = datepicker();
 </script>
 
-<div bind:this={datepickerContainerElement} class="relative {inline ? 'inline-block' : ''}">
+{#snippet navButton(forward: boolean)}
+  <Button onclick={() => changeMonth(forward ? 1 : -1)} {color} size="sm" aria-label={forward ? "Next month" : "Previous month"}>
+    <svg class="h-3 w-3 text-white rtl:rotate-180 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={forward ? "M1 5h12m0 0L9 1m4 4L9 9" : "M13 5H1m0 0 4 4M1 5l4-4"}></path>
+    </svg>
+  </Button>
+{/snippet}
+
+<div bind:this={datepickerContainerElement} class={["relative", inline && "inline-block"]}>
   {#if !inline}
     <div class="relative">
-      <input bind:this={inputElement} type="text" class="w-full px-4 py-2 text-sm border rounded-md focus:outline-hidden 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-hidden" on:click={() => (isOpen = !isOpen)} {disabled} aria-label={isOpen ? 'Close date picker' : 'Open date picker'}>
-        <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">
+      <input bind:this={inputElement} type="text" class={input({ color, class: inputClass })} {placeholder} value={range ? `${formatDate(rangeFrom)} - ${formatDate(rangeTo)}` : formatDate(value)} onfocus={() => (isOpen = true)} oninput={handleInputChange} onkeydown={handleInputKeydown} {disabled} {required} aria-haspopup="dialog" />
+      <button type="button" class={button()} onclick={() => (isOpen = !isOpen)} {disabled} aria-label={isOpen ? "Close date picker" : "Open date picker"}>
+        <svg class="h-4 w-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>
@@ -226,45 +213,33 @@ function handleApply() {
   {/if}
 
   {#if isOpen || inline}
-    <div
-      bind:this={calendarRef}
-      id="datepicker-dropdown"
-      class="
-        {inline ? '' : 'absolute z-10 mt-1'}
-        bg-white dark:bg-gray-800 rounded-md shadow-lg"
-      transition:fade={{ duration: 100 }}
-      role="dialog"
-      aria-label="Calendar">
+    <div bind:this={calendarRef} id="datepicker-dropdown" class={base({ inline })} transition:fade={{ duration: 100 }} role="dialog" aria-label="Calendar">
       <div class="p-4" role="application">
         {#if title}
-          <h2 class="text-lg font-semibold mb-4 dark:text-white">{title}</h2>
+          <h2 class={titleVariant()}>{title}</h2>
         {/if}
-        <div class="flex items-center justify-between mb-4">
-          <Button on:click={() => changeMonth(-1)} {color} size="sm" aria-label="Previous month">
-            <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' })}
+        <div class={nav()}>
+          {@render navButton(false)}
+          <h3 class={polite()} aria-live="polite">
+            {currentMonth.toLocaleString(locale, { month: "long", year: "numeric" })}
           </h3>
-          <Button on:click={() => changeMonth(1)} {color} size="sm" aria-label="Next month">
-            <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>
+          {@render navButton(true)}
         </div>
-        <div class="grid grid-cols-7 gap-1" role="grid">
+        <div class={grid()} role="grid">
           {#each weekdays as day}
-            <div class="text-center text-sm font-medium text-gray-500 dark:text-gray-400" role="columnheader">{day}</div>
+            <div class={columnHeader} role="columnheader">{day}</div>
           {/each}
           {#each daysInMonth as day}
-            <Button color={isSelected(day) ? color : 'alternative'} size="sm" class="w-full h-8 {day.getMonth() !== currentMonth.getMonth() ? 'text-gray-300 dark:text-gray-600' : ''} {isToday(day) ? 'font-bold' : ''} {isInRange(day) ? getRangeBackgroundClass(color) : ''}" on:click={() => handleDaySelect(day)} on:keydown={handleCalendarKeydown} aria-label={day.toLocaleDateString(locale, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })} aria-selected={isSelected(day)} role="gridcell">
+            <Button color={isSelected(day) ? color : "alternative"} size="sm" class={dayButton({ current: day.getMonth() !== currentMonth.getMonth(), today: isToday(day), color: isInRange(day) ? color : undefined })} onclick={() => handleDaySelect(day)} onkeydown={handleCalendarKeydown} aria-label={day.toLocaleDateString(locale, { weekday: "long", year: "numeric", month: "long", day: "numeric" })} aria-selected={isSelected(day)} role="gridcell">
               {day.getDate()}
             </Button>
           {/each}
         </div>
         {#if showActionButtons}
-          <div class="mt-4 flex justify-between">
-            <Button on:click={handleToday} {color} size="sm">Today</Button>
-            <Button on:click={handleClear} color="red" size="sm">Clear</Button>
-            <Button on:click={handleApply} {color} size="sm">Apply</Button>
+          <div class={actionButtons()}>
+            <Button onclick={() => handleDaySelect(new Date())} {color} size="sm">Today</Button>
+            <Button onclick={handleClear} color="red" size="sm">Clear</Button>
+            <Button onclick={handleApply} {color} size="sm">Apply</Button>
           </div>
         {/if}
       </div>
@@ -276,21 +251,26 @@ function handleApply() {
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let value: Date | null = null;
-@prop export let defaultDate: Date | null = null;
-@prop export let range: boolean = false;
-@prop export let rangeFrom: Date | null = null;
-@prop export let rangeTo: Date | null = null;
-@prop export let locale: string = 'default';
-@prop export let firstDayOfWeek: number = 0;
-@prop export let dateFormat: Intl.DateTimeFormatOptions = { year: 'numeric', month: 'long', day: 'numeric' };
-@prop export let placeholder: string = 'Select date';
-@prop export let disabled: boolean = false;
-@prop export let required: boolean = false;
-@prop export let inputClass: string = '';
-@prop export let color: Button['color'] = 'primary';
-@prop export let inline: boolean = false;
-@prop export let autohide: boolean = true;
-@prop export let showActionButtons: boolean = false;
-@prop export let title: string = '';
+@props: value: any = $bindable();
+@props:defaultDate: any = null;
+@props:range: any = false;
+@props:rangeFrom: any = $bindable();
+@props:rangeTo: any = $bindable();
+@props:locale: any = "default";
+@props:firstDayOfWeek: any = 0;
+@props:dateFormat: any = { year: "numeric";
+@props:month: any;
+@props:day: any;
+@props:placeholder: any = "Select date";
+@props:disabled: any = false;
+@props:required: any = false;
+@props:inputClass: any = "";
+@props:color: any = "primary";
+@props:inline: any = false;
+@props:autohide: any = true;
+@props:showActionButtons: any = false;
+@props:title: any = "";
+@props:onselect: any;
+@props:onclear: any;
+@props:onapply: any;
 -->

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

@@ -1,58 +1,40 @@
 import { SvelteComponentTyped } from "svelte";
-import { Button } from '..';
 declare const __propDef: {
-    props: {
-        value?: Date | null;
-        defaultDate?: Date | null;
-        range?: boolean;
-        rangeFrom?: Date | null;
-        rangeTo?: Date | null;
-        locale?: string;
-        firstDayOfWeek?: number;
-        dateFormat?: Intl.DateTimeFormatOptions;
-        placeholder?: string;
-        disabled?: boolean;
-        required?: boolean;
-        inputClass?: string;
-        color?: Button["color"];
-        inline?: boolean;
-        autohide?: boolean;
-        showActionButtons?: boolean;
-        title?: string;
-    };
+    props: Record<string, never>;
     events: {
-        select: CustomEvent<any>;
-        clear: CustomEvent<any>;
-        apply: CustomEvent<any>;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export type DatepickerProps = typeof __propDef.props;
+type DatepickerProps_ = typeof __propDef.props;
+export { DatepickerProps_ as DatepickerProps };
 export type DatepickerEvents = typeof __propDef.events;
 export type DatepickerSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let value: Date | null = null;
- * @prop export let defaultDate: Date | null = null;
- * @prop export let range: boolean = false;
- * @prop export let rangeFrom: Date | null = null;
- * @prop export let rangeTo: Date | null = null;
- * @prop export let locale: string = 'default';
- * @prop export let firstDayOfWeek: number = 0;
- * @prop export let dateFormat: Intl.DateTimeFormatOptions = { year: 'numeric', month: 'long', day: 'numeric' };
- * @prop export let placeholder: string = 'Select date';
- * @prop export let disabled: boolean = false;
- * @prop export let required: boolean = false;
- * @prop export let inputClass: string = '';
- * @prop export let color: Button['color'] = 'primary';
- * @prop export let inline: boolean = false;
- * @prop export let autohide: boolean = true;
- * @prop export let showActionButtons: boolean = false;
- * @prop export let title: string = '';
+ * @props: value: any = $bindable();
+ * @props:defaultDate: any = null;
+ * @props:range: any = false;
+ * @props:rangeFrom: any = $bindable();
+ * @props:rangeTo: any = $bindable();
+ * @props:locale: any = "default";
+ * @props:firstDayOfWeek: any = 0;
+ * @props:dateFormat: any = { year: "numeric";
+ * @props:month: any;
+ * @props:day: any;
+ * @props:placeholder: any = "Select date";
+ * @props:disabled: any = false;
+ * @props:required: any = false;
+ * @props:inputClass: any = "";
+ * @props:color: any = "primary";
+ * @props:inline: any = false;
+ * @props:autohide: any = true;
+ * @props:showActionButtons: any = false;
+ * @props:title: any = "";
+ * @props:onselect: any;
+ * @props:onclear: any;
+ * @props:onapply: any;
  */
-export default class Datepicker extends SvelteComponentTyped<DatepickerProps, DatepickerEvents, DatepickerSlots> {
+export default class Datepicker extends SvelteComponentTyped<DatepickerProps_, DatepickerEvents, DatepickerSlots> {
 }
-export {};

package/dist/datepicker/index.d.ts

@@ -0,0 +1,4 @@
+import type { DatepickerProps } from "./type";
+import Datepicker from "./Datepicker.svelte";
+import { datepicker } from "./theme";
+export { Datepicker, datepicker, type DatepickerProps };

package/dist/datepicker/index.js

@@ -0,0 +1,3 @@
+import Datepicker from "./Datepicker.svelte";
+import { datepicker } from "./theme";
+export { Datepicker, datepicker };