flowbite-svelte 1.0.0-next.5 → 1.0.0-next.7

package/README.md

@@ -1,12 +1,12 @@
 # FLOWBITE-SVELTE
 
-[![npm version](https://badgen.net/npm/v/flowbite-svelte-next)](https://www.npmjs.com/package/flowbite-svelte-next) [![npm downloads](https://badgen.net/npm/dw/flowbite-svelte-next)](https://www.npmjs.com/package/flowbite-svelte-next) [![npm downloads](https://badgen.net/npm/dt/flowbite-svelte-next)](https://www.npmjs.com/package/flowbite-svelte-next) [![license](https://badgen.net/npm/license/flowbite-svelte-next)](https://github.com/themesberg/flowbite-svelte-next/blob/main/LICENSE) [![Discord](https://img.shields.io/discord/902911619032576090?color=%237289da&label=Discord)](https://discord.com/invite/4eeurUVvTy)
+[![npm version](https://badgen.net/npm/v/flowbite-svelte-next)](https://www.npmjs.com/package/flowbite-svelte-next) [![npm downloads](https://badgen.net/npm/dw/flowbite-svelte-next)](https://www.npmjs.com/package/flowbite-svelte-next) [![npm downloads](https://badgen.net/npm/dt/flowbite-svelte-next)](https://www.npmjs.com/package/flowbite-svelte-next) [![license](https://badgen.net/npm/license/flowbite-svelte-next)](https://github.com/themesberg/flowbite-svelte/blob/main/LICENSE) [![Discord](https://img.shields.io/discord/902911619032576090?color=%237289da&label=Discord)](https://discord.com/invite/4eeurUVvTy)
 
 **⚠️ Flowbite Svelte is currently in early development and APIs and packages are likely to change quite often.**
 
 <p>
     <a href="https://flowbite-svelte-next.com" >
-      <img alt="Flowbite Svelte UI components" width="350" src="https://raw.githubusercontent.com/themesberg/flowbite-svelte-next/main/static/images/flowbite-svelte-next.png">
+      <img alt="Flowbite Svelte UI components" width="350" src="https://raw.githubusercontent.com/themesberg/flowbite-svelte/main/static/images/flowbite-svelte-next.png">
     </a><br>
     Build websites even faster with Svelte components on top of Tailwind CSS
 </p>

package/dist/accordion/AccordionItem.svelte

@@ -9,7 +9,7 @@
   import type { BaseThemes } from "../theme";
   import clsx from "clsx";
 
-  let { children, header, arrowup, arrowdown, open = $bindable(false), activeClass, inactiveClass, transition = slide, params, class: className }: Props = $props();
+  let { children, header, arrowup, arrowdown, open = $bindable(false), activeClass, inactiveClass, transitionType = slide, transitionParams, class: className }: Props = $props();
 
   // Theme context
   const context = getContext<BaseThemes>("themeConfig");
@@ -56,7 +56,7 @@
   </button>
 </h2>
 {#if open}
-  <div transition:transition={params as ParamsType}>
+  <div transition:transitionType={transitionParams as ParamsType}>
     <div class={content()}>
       {@render children()}
     </div>
@@ -74,7 +74,7 @@
 @props:open: any = $bindable(false);
 @props:activeClass: any;
 @props:inactiveClass: any;
-@props:transition: any = slide;
-@props:params: any;
+@props:transitionType: any = slide;
+@props:transitionParams: any;
 @props:class: string;
 -->

package/dist/accordion/AccordionItem.svelte.d.ts

@@ -9,8 +9,8 @@ import { type AccordionItemProps as Props } from ".";
  * @props:open: any = $bindable(false);
  * @props:activeClass: any;
  * @props:inactiveClass: any;
- * @props:transition: any = slide;
- * @props:params: any;
+ * @props:transitionType: any = slide;
+ * @props:transitionParams: any;
  * @props:class: string;
  */
 declare const AccordionItem: import("svelte").Component<Props, {}, "open">;

package/dist/accordion/type.d.ts

@@ -29,7 +29,7 @@ interface AccordionItemProps extends HTMLAttributes<HTMLDivElement> {
     open?: boolean;
     activeClass?: string;
     inactiveClass?: string;
-    transition?: TransitionFunc;
-    params?: ParamsType;
+    transitionType?: TransitionFunc;
+    transitionParams?: ParamsType;
 }
 export type { AccordionCtxType, AccordionProps, AccordionItemProps };

package/dist/bottom-navigation/theme.d.ts

@@ -296,16 +296,16 @@ export declare const bottomNavItem: import("tailwind-variants").TVReturnType<{
 }, undefined, unknown, unknown, undefined>>;
 export declare const bottomnavheader: import("tailwind-variants").TVReturnType<{
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            innerDiv?: import("tailwind-merge").ClassNameValue;
-            outerDiv?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            innerDiv?: import("tailwind-variants").ClassValue;
+            outerDiv?: import("tailwind-variants").ClassValue;
         };
     };
 } | {
     [x: string]: {
-        [x: string]: import("tailwind-merge").ClassNameValue | {
-            innerDiv?: import("tailwind-merge").ClassNameValue;
-            outerDiv?: import("tailwind-merge").ClassNameValue;
+        [x: string]: import("tailwind-variants").ClassValue | {
+            innerDiv?: import("tailwind-variants").ClassValue;
+            outerDiv?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -313,9 +313,9 @@ export declare const bottomnavheader: import("tailwind-variants").TVReturnType<{
     outerDiv: string;
 }, undefined, {
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            innerDiv?: import("tailwind-merge").ClassNameValue;
-            outerDiv?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            innerDiv?: import("tailwind-variants").ClassValue;
+            outerDiv?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {

package/dist/datepicker/Datepicker.svelte

@@ -4,6 +4,7 @@
   import { Button, clickOutside, type ButtonProps } from "..";
   import type { DatepickerProps as Props } from "./type";
   import { datepicker } from "./theme";
+  import ToolbarButton from "../toolbar/ToolbarButton.svelte";
 
   let {
     value = $bindable(),
@@ -193,11 +194,11 @@
 </script>
 
 {#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">
+  <ToolbarButton color="dark" onclick={() => changeMonth(forward ? 1 : -1)} size="lg" aria-label={forward ? "Next month" : "Previous month"}>
+    <svg class="h-3 w-3 rtl:rotate-180" 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>
+  </ToolbarButton>
 {/snippet}
 
 <div bind:this={datepickerContainerElement} class={["relative", inline && "inline-block"]}>
@@ -214,35 +215,34 @@
 
   {#if isOpen || inline}
     <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={titleVariant()}>{title}</h2>
-        {/if}
-        <div class={nav()}>
-          {@render navButton(false)}
-          <h3 class={polite()} aria-live="polite">
-            {currentMonth.toLocaleString(locale, { month: "long", year: "numeric" })}
-          </h3>
-          {@render navButton(true)}
-        </div>
-        <div class={grid()} role="grid">
-          {#each weekdays as day}
-            <div class={columnHeader} role="columnheader">{day}</div>
-          {/each}
-          {#each daysInMonth as day}
-            <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={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}
+      {#if title}
+        <h2 class={titleVariant()}>{title}</h2>
+      {/if}
+      <div class={nav()}>
+        {@render navButton(false)}
+        <h3 class={polite()} aria-live="polite">
+          {currentMonth.toLocaleString(locale, { month: "long", year: "numeric" })}
+        </h3>
+        {@render navButton(true)}
       </div>
+      <div class={grid()} role="grid">
+        {#each weekdays as day}
+          <div class={columnHeader()} role="columnheader">{day}</div>
+        {/each}
+        {#each daysInMonth as day}
+          {@const current = day.getMonth() !== currentMonth.getMonth()}
+          <button color={isSelected(day) ? color : "alternative"} class={dayButton({ current, 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={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>
   {/if}
 </div>

package/dist/datepicker/theme.d.ts

@@ -112,10 +112,10 @@ export declare const datepicker: import("tailwind-variants").TVReturnType<{
     base: string;
     input: string;
     titleVariant: string;
+    polite: string;
     button: string;
     actionButtons: string;
     columnHeader: string;
-    polite: string;
     grid: string;
     nav: string;
     dayButton: string;
@@ -233,10 +233,10 @@ export declare const datepicker: import("tailwind-variants").TVReturnType<{
     base: string;
     input: string;
     titleVariant: string;
+    polite: string;
     button: string;
     actionButtons: string;
     columnHeader: string;
-    polite: string;
     grid: string;
     nav: string;
     dayButton: string;
@@ -354,10 +354,10 @@ export declare const datepicker: import("tailwind-variants").TVReturnType<{
     base: string;
     input: string;
     titleVariant: string;
+    polite: string;
     button: string;
     actionButtons: string;
     columnHeader: string;
-    polite: string;
     grid: string;
     nav: string;
     dayButton: string;

package/dist/datepicker/theme.js

@@ -1,16 +1,16 @@
 import { tv } from "tailwind-variants";
 export const datepicker = tv({
     slots: {
-        base: "rounded-md bg-white shadow-lg dark:bg-gray-800",
+        base: "inline-block rounded-lg bg-white dark:bg-gray-700 shadow-lg p-4",
         input: "w-full rounded-md border px-4 py-2 text-sm focus:ring-2 focus:outline-none outline-none dark:border-gray-600 dark:bg-gray-700 dark:text-white",
-        titleVariant: "mb-4 text-lg font-semibold dark:text-white",
+        titleVariant: "mb-2 text-lg font-semibold text-gray-900 dark:text-white",
+        polite: "text-sm rounded-lg text-gray-900 dark:text-white bg-white dark:bg-gray-700 font-semibold py-2.5 px-5 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-200",
         button: "absolute inset-y-0 right-0 flex items-center px-3 text-gray-500 focus:outline-hidden dark:text-gray-400",
         actionButtons: "mt-4 flex justify-between",
         columnHeader: "text-center text-sm font-medium text-gray-500 dark:text-gray-400",
-        polite: "text-lg font-semibold dark:text-white",
-        grid: "grid grid-cols-7 gap-1",
+        grid: "grid grid-cols-7 gap-1 w-64",
         nav: "mb-4 flex items-center justify-between",
-        dayButton: "h-8 w-full"
+        dayButton: "h-8 w-full hover:bg-gray-100 dark:hover:bg-gray-600 block flex-1 leading-9 border-0 rounded-lg cursor-pointer text-center text-gray-900 dark:text-white font-semibold text-sm day"
     },
     variants: {
         color: {
@@ -42,7 +42,7 @@ export const datepicker = tv({
             false: { base: "absolute z-10 mt-1" }
         },
         current: {
-            true: { dayButton: "text-gray-300 dark:text-gray-600" }
+            true: { dayButton: "text-gray-400 dark:text-gray-500" }
         },
         today: {
             true: { dayButton: "font-bold" }