flowbite-svelte 1.9.0 → 1.10.0

package/dist/forms/timepicker/Timepicker.svelte

@@ -1,67 +1,94 @@
 <script lang="ts">
   import { Dropdown, DropdownItem, Button, Input, ButtonGroup, Select, Label, Toggle, type TimepickerProps, type TimePickerOption, cn } from "../..";
-  import { twMerge } from "tailwind-merge";
+  import { timepicker, type TimepickerTheme } from ".";
+  import { parse, isValid, isBefore, isAfter } from "date-fns";
+  import { getTheme } from "../../theme/themeUtils";
 
-  // Props
   let { id = "time", endId = "end-time", value = $bindable("00:00"), endValue = $bindable("00:00"), min = "", max = "", required = true, disabled = false, inputColor, buttonColor = "primary", Icon, iconClass = "h-5 w-5 text-gray-500 dark:text-gray-400", type = "default", optionLabel = "Options", options = [], size = "md", divClass, inputClass, selectClass, timerangeLabel = "Choose time range", timerangeButtonLabel = "Save time", timeIntervals = [], columns = 2, onselect }: TimepickerProps = $props();
 
-  const defaultDivClass = "inline-flex rounded-lg shadow-sm";
-  const acturalDivCls = cn(defaultDivClass, divClass);
-  const defaultInputClass = "block disabled:cursor-not-allowed disabled:opacity-50 rtl:text-right focus:ring-0 focus:outline-none rounded-e-lg";
-  const inputCls = cn(defaultInputClass, inputClass);
-  const defaultSelectClass = "text-gray-900 disabled:text-gray-400 bg-gray-50 border border-gray-300 rounded-r-lg rounded-l-none focus:ring-0 focus:outline-none block w-full border-l-1 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:disabled:text-gray-500 dark:focus:ring-primary-500 dark:focus:border-primary-500";
-  const selectCls = cn(defaultSelectClass, selectClass);
+  const theme = getTheme("timepicker");
+
+  // Generate theme classes
+  const styles = timepicker({ type, columns, disabled });
 
   // State
-  // let value = $state("00:00");
-  // let endValue = $state("00:00");
   let selectedOption = $state("");
   let dropdownOpen = $state(false);
   let showTimerange = $state(false);
 
+  // Helper functions using date-fns
+  function parseTime(time: string): Date | null {
+    if (!time) return null;
+    const parsed = parse(time, "HH:mm", new Date());
+    return isValid(parsed) ? parsed : null;
+  }
+
   function timeToMinutes(time: string): number {
-    const [hours, minutes] = time.split(":").map(Number);
-    return hours * 60 + minutes;
+    const date = parseTime(time);
+    return date ? date.getHours() * 60 + date.getMinutes() : 0;
+  }
+
+  function isValidTimeFormat(time: string): boolean {
+    return parseTime(time) !== null;
+  }
+
+  function isTimeInRange(time: string, minTime: string, maxTime: string): boolean {
+    const timeDate = parseTime(time);
+    if (!timeDate) return false;
+
+    if (minTime) {
+      const minDate = parseTime(minTime);
+      if (minDate && isBefore(timeDate, minDate)) return false;
+    }
+
+    if (maxTime) {
+      const maxDate = parseTime(maxTime);
+      if (maxDate && isAfter(timeDate, maxDate)) return false;
+    }
+
+    return true;
   }
 
   function handleTimeChange(event: Event, isEndTime: boolean = false): void {
     const target = event.target as HTMLInputElement;
     const newValue = target.value;
 
-    // Validate against min/max constraints first
-    if (min && newValue < min) {
-      target.value = isEndTime ? endValue : value; // Reset to previous valid value
+    // Validate time format
+    if (!isValidTimeFormat(newValue)) {
+      target.value = isEndTime ? endValue : value;
       return;
     }
 
-    if (max && newValue > max) {
-      target.value = isEndTime ? endValue : value; // Reset to previous valid value
+    // Validate against min/max constraints
+    if (!isTimeInRange(newValue, min, max)) {
+      target.value = isEndTime ? endValue : value;
       return;
     }
 
-    const newMinutes = timeToMinutes(newValue);
+    // Use date-fns for reliable time comparison
+    const newValueMinutes = timeToMinutes(newValue);
     const valueMinutes = timeToMinutes(value);
     const endValueMinutes = timeToMinutes(endValue);
 
     if (isEndTime) {
-      if (newMinutes < valueMinutes) {
+      if (newValueMinutes < valueMinutes) {
         // Only update start time if it respects min/max constraints
-        if ((!min || newValue >= min) && (!max || newValue <= max)) {
+        if (isTimeInRange(newValue, min, max)) {
           value = newValue;
         } else {
-          target.value = endValue; // Reset if constraint violation
+          target.value = endValue;
           return;
         }
       } else {
         endValue = newValue;
       }
     } else {
-      if (newMinutes > endValueMinutes) {
+      if (newValueMinutes > endValueMinutes) {
         // Only update end time if it respects min/max constraints
-        if ((!min || newValue >= min) && (!max || newValue <= max)) {
+        if (isTimeInRange(newValue, min, max)) {
           endValue = newValue;
         } else {
-          target.value = value; // Reset if constraint violation
+          target.value = value;
           return;
         }
       } else {
@@ -109,32 +136,46 @@
   }
 
   function handleInlineButtonSelect(time: string): void {
-    value = time;
-    notifyChange();
+    if (isValidTimeFormat(time) && isTimeInRange(time, min, max)) {
+      value = time;
+      notifyChange();
+    }
   }
+
+  // Ensure initial values are valid
+  $effect(() => {
+    if (!isValidTimeFormat(value)) {
+      value = "00:00";
+    }
+    if (!isValidTimeFormat(endValue)) {
+      endValue = "00:00";
+    }
+  });
 </script>
 
 {#if type !== "inline-buttons"}
-  <ButtonGroup {size} class={acturalDivCls}>
+  <ButtonGroup {size} class={cn(styles.buttonGroup(), divClass, (theme as TimepickerTheme)?.buttonGroup)}>
     {#if type === "default"}
-      <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn("relative px-2 pr-8", inputCls)} bind:value onchange={(e) => handleTimeChange(e)} />
-      <div class="pointer-events-none absolute inset-y-0 end-0 top-0 flex items-center pe-3.5">
+      <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn(styles.input(), styles.inputWithIcon(), inputClass, (theme as TimepickerTheme)?.input)} bind:value oninput={(e) => handleTimeChange(e)} onchange={(e) => handleTimeChange(e)} />
+      <div class={cn(styles.iconWrapper(), (theme as TimepickerTheme)?.iconWrapper)}>
         {#if Icon}
           <Icon class={iconClass} />
         {:else}
-          <svg class="h-4 w-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+          <svg class={styles.icon()} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
             <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6v4l3.276 3.276M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
           </svg>
         {/if}
       </div>
     {:else if type === "select"}
-      <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={twMerge(cn("w-1/3 rounded-l-lg", inputCls), "rounded-e-none")} bind:value onchange={(e) => handleTimeChange(e)} />
-      <Select selectClass={selectCls} onchange={handleOptionSelect} items={options} value={selectedOption} />
+      <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn(styles.input(), inputClass, (theme as TimepickerTheme)?.input)} bind:value oninput={(e) => handleTimeChange(e)} onchange={(e) => handleTimeChange(e)} />
+      <Select selectClass={cn(styles.select(), selectClass, (theme as TimepickerTheme)?.select)} onchange={handleOptionSelect} items={options} value={selectedOption} />
     {:else if type === "dropdown"}
-      <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={twMerge(cn("rounded-l-lg", inputCls), "rounded-e-none")} bind:value onchange={(e) => handleTimeChange(e)} />
-      <Button color={buttonColor} class="!rounded-r-lg">
+      <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn(styles.input(), inputClass, (theme as TimepickerTheme)?.input)} bind:value oninput={(e) => handleTimeChange(e)} onchange={(e) => handleTimeChange(e)} />
+      <Button color={buttonColor} class={cn(styles.button(), (theme as TimepickerTheme)?.button)}>
         {optionLabel}
-        <svg class="ml-2 h-4 w-4" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
+        <svg class={cn(styles.buttonIcon(), (theme as TimepickerTheme)?.buttonIcon)} aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+        </svg>
       </Button>
       <Dropdown simple>
         {#each options as option}
@@ -144,67 +185,69 @@
         {/each}
       </Dropdown>
     {:else if type === "range"}
-      <div class="relative">
-        <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={twMerge(cn("relative pr-8", inputCls))} bind:value onchange={(e) => handleTimeChange(e)} />
-        <button type="button" class="pointer-events-none absolute inset-y-0 top-0 right-0 flex items-center border-0 bg-transparent pe-3.5" onclick={() => document.getElementById(id)?.click()} aria-label="Open time picker">
+      <div class={cn(styles.rangeInputWrapper(), (theme as TimepickerTheme)?.rangeInputWrapper)}>
+        <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn(styles.input(), styles.rangeInput(), inputClass, (theme as TimepickerTheme)?.rangeInput)} bind:value oninput={(e) => handleTimeChange(e)} onchange={(e) => handleTimeChange(e)} />
+        <button type="button" class={cn(styles.rangeButton(), (theme as TimepickerTheme)?.rangeButton)} onclick={() => document.getElementById(id)?.click()} aria-label="Open time picker">
           {#if Icon}
             <Icon class={iconClass} />
           {:else}
-            <svg class="h-4 w-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+            <svg class={cn(styles.icon(), (theme as TimepickerTheme)?.icon)} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
               <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6v4l3.276 3.276M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
             </svg>
           {/if}
         </button>
       </div>
-      <span class="flex items-center justify-center px-2 text-gray-500 dark:text-gray-400">-</span>
-      <div class="relative">
-        <Input id={endId} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn(inputCls, "relative pr-8")} bind:value={endValue} onchange={(e) => handleTimeChange(e, true)} />
-        <button type="button" class="pointer-events-none absolute inset-y-0 top-0 right-0 flex items-center border-0 bg-transparent pe-3.5" onclick={() => document.getElementById(endId)?.click()} aria-label="Open end time picker">
+      <span class={cn(styles.rangeSeparator(), (theme as TimepickerTheme)?.rangeSeparator)}>-</span>
+      <div class={cn(styles.rangeInputWrapper(), (theme as TimepickerTheme)?.rangeInputWrapper)}>
+        <Input id={endId} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn(styles.input(), styles.rangeInput(), inputClass, (theme as TimepickerTheme)?.rangeInput)} bind:value={endValue} oninput={(e) => handleTimeChange(e, true)} onchange={(e) => handleTimeChange(e, true)} />
+        <button type="button" class={cn(styles.rangeButton(), (theme as TimepickerTheme)?.rangeButton)} onclick={() => document.getElementById(endId)?.click()} aria-label="Open end time picker">
           {#if Icon}
             <Icon class={iconClass} />
           {:else}
-            <svg class="h-4 w-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+            <svg class={cn(styles.icon(), (theme as TimepickerTheme)?.icon)} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
               <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6v4l3.276 3.276M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
             </svg>
           {/if}
         </button>
       </div>
     {:else if type === "timerange-dropdown"}
-      <Button color={buttonColor} {size} class="!rounded-r-lg">
+      <Button color={buttonColor} {size} class={cn(styles.button(), (theme as TimepickerTheme)?.button)}>
         {timerangeLabel}
-        <svg class="ml-2 h-4 w-4" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
+        <svg class={cn(styles.buttonIcon(), (theme as TimepickerTheme)?.buttonIcon)} aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+        </svg>
       </Button>
-      <Dropdown simple class="p-4 last:rounded-r-lg">
-        <div class="flex flex-col space-y-4">
-          <div class="flex space-x-4">
-            <div class="flex flex-col">
+      <Dropdown simple class={cn(styles.dropdownContent(), (theme as TimepickerTheme)?.dropdownContent)}>
+        <div class={cn(styles.dropdownInner(), (theme as TimepickerTheme)?.dropdownInner)}>
+          <div class={cn(styles.dropdownTimeRow(), (theme as TimepickerTheme)?.dropdownTimeRow)}>
+            <div class={cn(styles.dropdownTimeCol(), (theme as TimepickerTheme)?.dropdownTimeCol)}>
               <Label for={id}>Start time:</Label>
-              <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn("w-24 rounded-l-lg !border-r px-2", inputCls)} bind:value onchange={(e) => handleTimeChange(e)} />
+              <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn(styles.dropdownTimeInput(), inputClass, (theme as TimepickerTheme)?.dropdownTimeInput)} bind:value oninput={(e) => handleTimeChange(e)} onchange={(e) => handleTimeChange(e)} />
             </div>
-            <div class="flex flex-col">
+            <div class={cn(styles.dropdownTimeCol(), (theme as TimepickerTheme)?.dropdownTimeCol)}>
               <Label for={endId}>End time:</Label>
-              <Input id={endId} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn("w-24 rounded-l-lg !border-r px-2", inputCls)} bind:value={endValue} onchange={(e) => handleTimeChange(e, true)} />
+              <Input id={endId} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn(styles.dropdownTimeInput(), inputClass, (theme as TimepickerTheme)?.dropdownTimeInput)} bind:value={endValue} oninput={(e) => handleTimeChange(e, true)} onchange={(e) => handleTimeChange(e, true)} />
             </div>
           </div>
-          <Button color={buttonColor} class="w-full !rounded-l-lg" onclick={applyTimerange}>
+          <Button color={buttonColor} class={cn(styles.dropdownButton(), (theme as TimepickerTheme)?.dropdownButton)} onclick={applyTimerange}>
             {timerangeButtonLabel}
           </Button>
         </div>
       </Dropdown>
     {:else if type === "timerange-toggle"}
-      <div class="flex w-full flex-col space-y-2">
-        <div class="flex items-center justify-between">
+      <div class={cn(styles.toggleWrapper(), (theme as TimepickerTheme)?.toggleWrapper)}>
+        <div class={cn(styles.toggleRow(), (theme as TimepickerTheme)?.toggleRow)}>
           <Toggle id={`${id}-timerange-toggle`} checked={showTimerange} onchange={toggleTimerange} spanClass="me-0 rounded-lg" />
         </div>
         {#if showTimerange}
-          <div class="flex space-x-4 p-2.5">
-            <div class="flex flex-col">
+          <div class={cn(styles.toggleTimeRow(), (theme as TimepickerTheme)?.toggleTimeRow)}>
+            <div class={cn(styles.toggleTimeCol(), (theme as TimepickerTheme)?.toggleTimeCol)}>
               <Label for={id}>Start time:</Label>
-              <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn("w-24 rounded-lg !border-r px-2", inputCls)} bind:value onchange={(e) => handleTimeChange(e)} />
+              <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn(styles.toggleTimeInput(), inputClass, (theme as TimepickerTheme)?.toggleTimeInput)} bind:value oninput={(e) => handleTimeChange(e)} onchange={(e) => handleTimeChange(e)} />
             </div>
-            <div class="flex flex-col">
+            <div class={cn(styles.toggleTimeCol(), (theme as TimepickerTheme)?.toggleTimeCol)}>
               <Label for={endId}>End time:</Label>
-              <Input id={endId} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn("w-24 rounded-lg !border-r px-2", inputCls)} bind:value={endValue} onchange={(e) => handleTimeChange(e, true)} />
+              <Input id={endId} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn(styles.toggleTimeInput(), inputClass, (theme as TimepickerTheme)?.toggleTimeInput)} bind:value={endValue} oninput={(e) => handleTimeChange(e, true)} onchange={(e) => handleTimeChange(e, true)} />
             </div>
           </div>
         {/if}
@@ -212,9 +255,9 @@
     {/if}
   </ButtonGroup>
 {:else}
-  <div class="grid w-full gap-2" class:grid-cols-1={columns === 1} class:grid-cols-2={columns === 2} class:grid-cols-3={columns === 3} class:grid-cols-4={columns === 4}>
+  <div class={cn(styles.inlineGrid(), (theme as TimepickerTheme)?.inlineGrid)}>
     {#each timeIntervals as time}
-      <Button {size} color={value === time ? buttonColor : "light"} class="rounded-lg" onclick={() => handleInlineButtonSelect(time)}>
+      <Button {size} color={value === time ? buttonColor : "light"} class={cn(styles.inlineButton(), (theme as TimepickerTheme)?.inlineButton)} onclick={() => handleInlineButtonSelect(time)}>
         {time}
       </Button>
     {/each}
@@ -225,7 +268,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TimepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L924)
+[TimepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L917)
 ## Props
 @prop id = "time"
 @prop endId = "end-time"

package/dist/forms/timepicker/Timepicker.svelte.d.ts

@@ -2,7 +2,7 @@ import { type TimepickerProps } from "../..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [TimepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L924)
+ * [TimepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L917)
  * ## Props
  * @prop id = "time"
  * @prop endId = "end-time"

package/dist/forms/timepicker/index.d.ts

@@ -1 +1,2 @@
 export { default as Timepicker } from "./Timepicker.svelte";
+export { timepicker, type TimepickerTheme } from "./theme";

package/dist/forms/timepicker/index.js

@@ -1 +1,2 @@
 export { default as Timepicker } from "./Timepicker.svelte";
+export { timepicker } from "./theme";

package/dist/forms/timepicker/theme.d.ts

@@ -0,0 +1,191 @@
+import { type VariantProps } from "tailwind-variants";
+export type TimepickerVariants = VariantProps<typeof timepicker>;
+export declare const timepicker: import("tailwind-variants").TVReturnType<{
+    type: {
+        default: {
+            input: string;
+        };
+        select: {
+            input: string;
+            select: string;
+        };
+        dropdown: {
+            input: string;
+        };
+        range: {};
+        "timerange-dropdown": {};
+        "timerange-toggle": {};
+        "inline-buttons": {};
+    };
+    columns: {
+        1: {
+            inlineGrid: string;
+        };
+        2: {
+            inlineGrid: string;
+        };
+        3: {
+            inlineGrid: string;
+        };
+        4: {
+            inlineGrid: string;
+        };
+    };
+    disabled: {
+        true: {
+            input: string;
+        };
+    };
+}, {
+    buttonGroup: string;
+    input: string;
+    inputWithIcon: string;
+    iconWrapper: string;
+    icon: string;
+    select: string;
+    button: string;
+    buttonIcon: string;
+    rangeSeparator: string;
+    rangeInputWrapper: string;
+    rangeInput: string;
+    rangeButton: string;
+    dropdownContent: string;
+    dropdownInner: string;
+    dropdownTimeRow: string;
+    dropdownTimeCol: string;
+    dropdownTimeInput: string;
+    dropdownButton: string;
+    toggleWrapper: string;
+    toggleRow: string;
+    toggleTimeRow: string;
+    toggleTimeCol: string;
+    toggleTimeInput: string;
+    inlineGrid: string;
+    inlineButton: string;
+}, undefined, {
+    type: {
+        default: {
+            input: string;
+        };
+        select: {
+            input: string;
+            select: string;
+        };
+        dropdown: {
+            input: string;
+        };
+        range: {};
+        "timerange-dropdown": {};
+        "timerange-toggle": {};
+        "inline-buttons": {};
+    };
+    columns: {
+        1: {
+            inlineGrid: string;
+        };
+        2: {
+            inlineGrid: string;
+        };
+        3: {
+            inlineGrid: string;
+        };
+        4: {
+            inlineGrid: string;
+        };
+    };
+    disabled: {
+        true: {
+            input: string;
+        };
+    };
+}, {
+    buttonGroup: string;
+    input: string;
+    inputWithIcon: string;
+    iconWrapper: string;
+    icon: string;
+    select: string;
+    button: string;
+    buttonIcon: string;
+    rangeSeparator: string;
+    rangeInputWrapper: string;
+    rangeInput: string;
+    rangeButton: string;
+    dropdownContent: string;
+    dropdownInner: string;
+    dropdownTimeRow: string;
+    dropdownTimeCol: string;
+    dropdownTimeInput: string;
+    dropdownButton: string;
+    toggleWrapper: string;
+    toggleRow: string;
+    toggleTimeRow: string;
+    toggleTimeCol: string;
+    toggleTimeInput: string;
+    inlineGrid: string;
+    inlineButton: string;
+}, import("tailwind-variants").TVReturnType<{
+    type: {
+        default: {
+            input: string;
+        };
+        select: {
+            input: string;
+            select: string;
+        };
+        dropdown: {
+            input: string;
+        };
+        range: {};
+        "timerange-dropdown": {};
+        "timerange-toggle": {};
+        "inline-buttons": {};
+    };
+    columns: {
+        1: {
+            inlineGrid: string;
+        };
+        2: {
+            inlineGrid: string;
+        };
+        3: {
+            inlineGrid: string;
+        };
+        4: {
+            inlineGrid: string;
+        };
+    };
+    disabled: {
+        true: {
+            input: string;
+        };
+    };
+}, {
+    buttonGroup: string;
+    input: string;
+    inputWithIcon: string;
+    iconWrapper: string;
+    icon: string;
+    select: string;
+    button: string;
+    buttonIcon: string;
+    rangeSeparator: string;
+    rangeInputWrapper: string;
+    rangeInput: string;
+    rangeButton: string;
+    dropdownContent: string;
+    dropdownInner: string;
+    dropdownTimeRow: string;
+    dropdownTimeCol: string;
+    dropdownTimeInput: string;
+    dropdownButton: string;
+    toggleWrapper: string;
+    toggleRow: string;
+    toggleTimeRow: string;
+    toggleTimeCol: string;
+    toggleTimeInput: string;
+    inlineGrid: string;
+    inlineButton: string;
+}, undefined, unknown, unknown, undefined>>;
+export type TimepickerSlots = keyof typeof timepicker.slots;
+export type TimepickerTheme = Partial<Record<TimepickerSlots, string>>;

package/dist/forms/timepicker/theme.js

@@ -0,0 +1,72 @@
+import { tv } from "tailwind-variants";
+export const timepicker = tv({
+    slots: {
+        buttonGroup: "inline-flex rounded-lg shadow-sm",
+        input: "block disabled:cursor-not-allowed disabled:opacity-50 rtl:text-right focus:ring-0 focus:outline-none",
+        inputWithIcon: "relative px-2 pr-8",
+        iconWrapper: "pointer-events-none absolute inset-y-0 end-0 top-0 flex items-center pe-3.5",
+        icon: "h-4 w-4 text-gray-500 dark:text-gray-400",
+        select: "text-gray-900 disabled:text-gray-400 bg-gray-50 border border-gray-300 focus:ring-0 focus:outline-none block w-full border-l-1 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:disabled:text-gray-500 dark:focus:ring-primary-500 dark:focus:border-primary-500",
+        button: "!rounded-r-lg",
+        buttonIcon: "ml-2 h-4 w-4",
+        rangeSeparator: "flex items-center justify-center px-2 text-gray-500 dark:text-gray-400",
+        rangeInputWrapper: "relative",
+        rangeInput: "relative pr-8",
+        rangeButton: "pointer-events-none absolute inset-y-0 top-0 right-0 flex items-center border-0 bg-transparent pe-3.5",
+        dropdownContent: "p-4 last:rounded-r-lg",
+        dropdownInner: "flex flex-col space-y-4",
+        dropdownTimeRow: "flex space-x-4",
+        dropdownTimeCol: "flex flex-col",
+        dropdownTimeInput: "w-24 rounded-l-lg !border-r px-2",
+        dropdownButton: "w-full !rounded-l-lg",
+        toggleWrapper: "flex w-full flex-col space-y-2",
+        toggleRow: "flex items-center justify-between",
+        toggleTimeRow: "flex space-x-4 p-2.5",
+        toggleTimeCol: "flex flex-col",
+        toggleTimeInput: "w-24 rounded-lg !border-r px-2",
+        inlineGrid: "grid w-full gap-2",
+        inlineButton: "rounded-lg"
+    },
+    variants: {
+        type: {
+            default: {
+                input: "rounded-e-lg"
+            },
+            select: {
+                input: "w-1/3 rounded-l-lg rounded-e-none",
+                select: "rounded-r-lg rounded-l-none"
+            },
+            dropdown: {
+                input: "rounded-l-lg rounded-e-none"
+            },
+            range: {},
+            "timerange-dropdown": {},
+            "timerange-toggle": {},
+            "inline-buttons": {}
+        },
+        columns: {
+            1: {
+                inlineGrid: "grid-cols-1"
+            },
+            2: {
+                inlineGrid: "grid-cols-2"
+            },
+            3: {
+                inlineGrid: "grid-cols-3"
+            },
+            4: {
+                inlineGrid: "grid-cols-4"
+            }
+        },
+        disabled: {
+            true: {
+                input: "disabled:cursor-not-allowed disabled:opacity-50"
+            }
+        }
+    },
+    defaultVariants: {
+        type: "default",
+        columns: 2,
+        disabled: false
+    }
+});

package/dist/forms/toggle/Toggle.svelte

@@ -1,18 +1,21 @@
 <script lang="ts">
-  import { toggle } from "./index";
+  import { toggle, type ToggleTheme } from "./index";
   import { type ToggleProps, Label, cn } from "../..";
+  import { getTheme } from "../../theme/themeUtils";
 
   let { children, size = "default", value, checked = $bindable(), disabled, color = "primary", class: className, inputClass, spanClass, offLabel, ...restProps }: ToggleProps = $props();
 
+  const theme = getTheme("toggle");
+
   const { input, label, span } = $derived(toggle({ color, checked, size, disabled, off_state_label: !!offLabel }));
 </script>
 
-<Label class={cn(label(), className)}>
+<Label class={cn(label(), className, (theme as ToggleTheme)?.label)}>
   {#if offLabel}
     {@render offLabel()}
   {/if}
-  <input type="checkbox" bind:checked {value} {...restProps} {disabled} class={cn(input(), inputClass)} />
-  <span class={cn(span(), spanClass)}></span>
+  <input type="checkbox" bind:checked {value} {...restProps} {disabled} class={cn(input(), inputClass, (theme as ToggleTheme)?.input)} />
+  <span class={cn(span(), spanClass, (theme as ToggleTheme)?.span)}></span>
   {#if children}
     {@render children()}
   {/if}
@@ -22,7 +25,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ToggleProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L975)
+[ToggleProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L968)
 ## Props
 @prop children
 @prop size = "default"

package/dist/forms/toggle/Toggle.svelte.d.ts

@@ -2,7 +2,7 @@ import { type ToggleProps } from "../..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ToggleProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L975)
+ * [ToggleProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L968)
  * ## Props
  * @prop children
  * @prop size = "default"

package/dist/forms/toggle/index.d.ts

@@ -1,2 +1,2 @@
 export { default as Toggle } from "./Toggle.svelte";
-export { toggle } from "./theme";
+export { toggle, type ToggleTheme } from "./theme";

package/dist/forms/toggle/theme.d.ts

@@ -277,3 +277,5 @@ export declare const toggle: import("tailwind-variants").TVReturnType<{
     label: string;
     input: string;
 }, undefined, unknown, unknown, undefined>>;
+export type ToggleSlots = keyof typeof toggle.slots;
+export type ToggleTheme = Partial<Record<ToggleSlots, string>>;