flowbite-svelte 0.48.4 → 1.0.0-next.2

package/dist/forms/range/theme.js

@@ -0,0 +1,74 @@
+import { tv } from "tailwind-variants";
+export const range = tv({
+    base: "w-full bg-gray-200 rounded-lg cursor-pointer dark:bg-gray-700",
+    variants: {
+        size: {
+            sm: "h-1 range-sm",
+            md: "h-2",
+            lg: "h-3 range-lg"
+        },
+        color: {
+            // other colors do not work
+            gray: "",
+            red: "",
+            blue: "",
+            indigo: "",
+            violet: "",
+            purple: "",
+            fuchsia: "",
+            pink: "",
+            rose: ""
+        },
+        appearance: {
+            auto: "range accent-red-500",
+            none: "appearance-none"
+        }
+    },
+    compoundVariants: [
+        {
+            appearance: "auto",
+            color: "gray",
+            class: "accent-gray-500"
+        },
+        {
+            appearance: "auto",
+            color: "red",
+            class: "accent-red-500"
+        },
+        {
+            appearance: "auto",
+            color: "blue",
+            class: "accent-blue-500"
+        },
+        {
+            appearance: "auto",
+            color: "indigo",
+            class: "accent-indigo-500"
+        },
+        {
+            appearance: "auto",
+            color: "violet",
+            class: "accent-violet-500"
+        },
+        {
+            appearance: "auto",
+            color: "purple",
+            class: "accent-purple-500"
+        },
+        {
+            appearance: "auto",
+            color: "fuchsia",
+            class: "accent-fuchsia-500"
+        },
+        {
+            appearance: "auto",
+            color: "pink",
+            class: "accent-pink-500"
+        },
+        {
+            appearance: "auto",
+            color: "rose",
+            class: "accent-rose-500"
+        }
+    ]
+});

package/dist/forms/range/type.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLInputAttributes } from "svelte/elements";
+import type { RangeVariants } from "./theme";
+interface RangeProps extends RangeVariants, Omit<HTMLInputAttributes, "size" | "color"> {
+    value?: number | string;
+}
+export { type RangeProps };

package/dist/forms/range/type.js

@@ -0,0 +1 @@
+export {};

package/dist/forms/search/Search.svelte

@@ -0,0 +1,29 @@
+<script lang="ts" generics="T">
+  import clsx from "clsx";
+  import { type SearchProps as Props, search } from ".";
+
+  let { children, class: inputClass, size, placeholder = "Search", value = $bindable<T>(), ...restProps }: Props<T> = $props();
+
+  const { base, content, icon, input: inputCls, leftDiv } = $derived(search({ size }));
+</script>
+
+<div class={base()}>
+  <div class={leftDiv()}>
+    <svg class={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="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
+    </svg>
+  </div>
+  <input type="search" bind:value class={inputCls({ class: clsx(inputClass) })} {placeholder} required {...restProps} />
+  {#if children}
+    <div class={content()}>
+      {@render children()}
+    </div>
+  {/if}
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@props: 
+-->

package/dist/forms/search/Search.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare class __sveltets_Render<T> {
+    props(): Record<string, never>;
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+}
+export type SearchProps_<T> = ReturnType<__sveltets_Render<T>['props']>;
+export type SearchEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
+export type SearchSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @props:
+ */
+export default class Search<T> extends SvelteComponentTyped<SearchProps_<T>, SearchEvents<T>, SearchSlots<T>> {
+}
+export {};

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

@@ -0,0 +1,4 @@
+import type { SearchProps } from "./type";
+import Search from "./Search.svelte";
+import { search } from "./theme";
+export { Search, search, type SearchProps };

package/dist/forms/search/index.js

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

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

@@ -0,0 +1,66 @@
+import { type VariantProps } from "tailwind-variants";
+export type SearchVariants = VariantProps<typeof search>;
+export declare const search: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            input: string;
+            icon: string;
+        };
+        md: {
+            input: string;
+            icon: string;
+        };
+        lg: {
+            input: string;
+            icon: string;
+        };
+    };
+}, {
+    base: string;
+    leftDiv: string;
+    icon: string;
+    content: string;
+    input: string;
+}, undefined, {
+    size: {
+        sm: {
+            input: string;
+            icon: string;
+        };
+        md: {
+            input: string;
+            icon: string;
+        };
+        lg: {
+            input: string;
+            icon: string;
+        };
+    };
+}, {
+    base: string;
+    leftDiv: string;
+    icon: string;
+    content: string;
+    input: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            input: string;
+            icon: string;
+        };
+        md: {
+            input: string;
+            icon: string;
+        };
+        lg: {
+            input: string;
+            icon: string;
+        };
+    };
+}, {
+    base: string;
+    leftDiv: string;
+    icon: string;
+    content: string;
+    input: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/forms/search/theme.js

@@ -0,0 +1,32 @@
+import { tv } from "tailwind-variants";
+export const search = tv({
+    slots: {
+        base: "relative w-full",
+        leftDiv: "absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none",
+        icon: "text-gray-500 dark:text-gray-400",
+        content: "absolute inset-y-0 end-0 flex items-center text-gray-500 dark:text-gray-400",
+        input: "block w-full text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+    },
+    variants: {
+        size: {
+            sm: {
+                input: "text-xs p-2 ps-9 pe-9 ",
+                icon: "w-3 h-3"
+                // leftDiv: 'ps-2.5',
+            },
+            md: {
+                input: "text-sm p-2.5 ps-10 pe-10",
+                icon: "w-4 h-4"
+                // leftDiv: 'ps-10',
+            },
+            lg: {
+                input: "sm:text-base p-3 ps-11 pe-11",
+                icon: "w-6 h-6"
+                // leftDiv: 'ps-11',
+            }
+        }
+    },
+    defaultVariants: {
+        size: "lg"
+    }
+});

package/dist/forms/search/type.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+import type { HTMLInputAttributes } from "svelte/elements";
+import type { SearchVariants } from "./theme";
+interface SearchProps<T> extends SearchVariants, Omit<HTMLInputAttributes, "size"> {
+    children?: Snippet;
+    value?: T;
+}
+export { type SearchProps };

package/dist/forms/search/type.js

@@ -0,0 +1 @@
+export {};

package/dist/forms/select/MultiSelect.svelte

@@ -0,0 +1,147 @@
+<script lang="ts" generics="T">
+  import Badge from "../../badge/Badge.svelte";
+  import CloseButton from "../../utils/CloseButton.svelte";
+  import clsx from "clsx";
+  import { twMerge } from "tailwind-merge";
+  import { multiselect } from "./theme";
+  import type { MultiSelectProps as Props, SelectOptionType } from "./type";
+
+  // Consider reusing that component - https://svelecte.vercel.app/
+
+  let { children, items = [], value = [], size = "md", dropdownClass = "", placeholder = "", disabled = false, onchange, class: className, ...restProps }: Props<T> = $props();
+
+  let selectItems = $derived(items.filter((x) => value.includes(x.value)));
+  let show: boolean = $state(false);
+
+  // Active item
+  let activeIndex: number | null = $state(null);
+  let activeItem = $derived(activeIndex !== null ? items[((activeIndex % items.length) + items.length) % items.length] : null);
+
+  const selectOption = (select: SelectOptionType<any>) => {
+    if (disabled) return;
+    if (select.disabled) return;
+
+    if (value.includes(select.value)) {
+      clearThisOption(select);
+    } else if (!value.includes(select.value)) {
+      value = [...value, select.value];
+      // onchange?.(new CustomEvent("change", { detail: value }));
+    }
+  };
+
+  const clearAll = (e: MouseEvent) => {
+    if (disabled) return;
+
+    e.stopPropagation();
+    value = [];
+    // onchange?.(new CustomEvent("change", { detail: value }));
+  };
+
+  const clearThisOption = (select: SelectOptionType<any>) => {
+    if (disabled) return;
+
+    if (value.includes(select.value)) {
+      value = value.filter((o: any) => o !== select.value);
+      // onchange?.(new CustomEvent("change", { detail: value }));
+    }
+  };
+
+  const closeDropdown = () => !disabled && (show = false);
+  const toggleDropdown = () => !disabled && (show = !show);
+
+  // Keyboard navigation
+
+  function handleToggleActiveItem() {
+    if (disabled) return;
+
+    if (!show) {
+      show = true;
+      activeIndex = 0;
+    } else {
+      if (activeItem !== null) selectOption(activeItem);
+    }
+  }
+  function handleArrowUpDown(offset: number) {
+    if (disabled) return;
+
+    if (!show) {
+      show = true;
+      activeIndex = 0;
+    } else {
+      if (activeIndex !== null) {
+        activeIndex += offset;
+      } else {
+        activeIndex = 0;
+      }
+    }
+  }
+  function handleKeyDown(event: KeyboardEvent) {
+    if (disabled) return;
+    event.stopPropagation();
+    event.preventDefault();
+
+    const actions = {
+      Escape: closeDropdown,
+      Enter: handleToggleActiveItem,
+      " ": handleToggleActiveItem,
+      ArrowDown: () => handleArrowUpDown(1),
+      ArrowUp: () => handleArrowUpDown(-1)
+    };
+    if (event.key in actions) {
+      actions[event.key as keyof typeof actions]?.();
+    }
+  }
+
+  const { base, dropdown, dropdownitem, closebutton, select } = multiselect({ disabled });
+</script>
+
+<!-- Hidden select for form submission -->
+<select {...restProps} {value} hidden multiple>
+  {#each items as { value, name, disabled }}
+    <option {value} {disabled}>{name}</option>
+  {/each}
+</select>
+<div onclick={toggleDropdown} onfocusout={closeDropdown} onkeydown={handleKeyDown} tabindex="0" role="listbox" class={base({ size, class: clsx(className) })}>
+  {#if !selectItems.length}
+    <span class="text-gray-400">{placeholder}</span>
+  {/if}
+  <span class={select()}>
+    {#if selectItems.length}
+      {#each selectItems as item (item.name)}
+        {#if children}
+          {@render children({ item, clear: () => clearThisOption(item) })}
+        {:else}
+          <Badge color="gray" large={size === "lg"} dismissable params={{ duration: 100 }} onclose={() => clearThisOption(item)} class={[disabled && "pointer-events-none"]}>
+            {item.name}
+          </Badge>
+        {/if}
+      {/each}
+    {/if}
+  </span>
+  <div class="ms-auto flex items-center gap-2">
+    {#if selectItems.length}
+      <CloseButton {size} onclick={clearAll} color="none" class={closebutton()} {disabled} />
+    {/if}
+
+    <svg class={twMerge("ms-1 h-3 w-3 cursor-pointer text-gray-800 dark:text-white", disabled && "cursor-not-allowed")} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
+      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={show ? "m1 5 4-4 4 4" : "m9 1-4 4-4-4"} />
+    </svg>
+  </div>
+
+  {#if show}
+    <div role="presentation" class={dropdown({ class: dropdownClass })}>
+      {#each items as item (item.name)}
+        <div onclick={() => selectOption(item)} role="presentation" class={dropdownitem({ selected: selectItems.includes(item), active: activeItem === item, disabled: item.disabled })}>
+          {item.name}
+        </div>
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@props: 
+-->

package/dist/forms/select/MultiSelect.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare class __sveltets_Render<T> {
+    props(): Record<string, never>;
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+}
+export type MultiSelectProps_<T> = ReturnType<__sveltets_Render<T>['props']>;
+export type MultiSelectEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
+export type MultiSelectSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @props:
+ */
+export default class MultiSelect<T> extends SvelteComponentTyped<MultiSelectProps_<T>, MultiSelectEvents<T>, MultiSelectSlots<T>> {
+}
+export {};

package/dist/forms/select/Select.svelte

@@ -0,0 +1,31 @@
+<script lang="ts" generics="T">
+  import clsx from "clsx";
+  import { type SelectProps as Props, select as selectCls } from ".";
+
+  let { children, items, value = $bindable(), underline, size = "md", class: className, placeholder = "Choose option ...", ...restProps }: Props<T> = $props();
+
+  const selectStyle = $derived(selectCls({ underline, size, class: clsx(className) }));
+</script>
+
+<select {...restProps} bind:value class={selectStyle}>
+  {#if placeholder}
+    <option disabled selected value="">{placeholder}</option>
+  {/if}
+
+  {#if items}
+    {#each items as { value, name }}
+      <option {value}>{name}</option>
+    {/each}
+  {/if}
+
+  {#if children}
+    {@render children()}
+  {/if}
+</select>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@props: 
+-->

package/dist/forms/select/Select.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare class __sveltets_Render<T> {
+    props(): Record<string, never>;
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+}
+export type SelectProps_<T> = ReturnType<__sveltets_Render<T>['props']>;
+export type SelectEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
+export type SelectSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @props:
+ */
+export default class Select<T> extends SvelteComponentTyped<SelectProps_<T>, SelectEvents<T>, SelectSlots<T>> {
+}
+export {};

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

@@ -0,0 +1,5 @@
+import type { SelectProps, SelectOptionType, MultiSelectProps } from "./type";
+import Select from "./Select.svelte";
+import MultiSelect from "./MultiSelect.svelte";
+import { select } from "./theme";
+export { Select, MultiSelect, select, type SelectProps, type SelectOptionType, type MultiSelectProps };

package/dist/forms/select/index.js

@@ -0,0 +1,4 @@
+import Select from "./Select.svelte";
+import MultiSelect from "./MultiSelect.svelte";
+import { select } from "./theme";
+export { Select, MultiSelect, select };

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

@@ -0,0 +1,131 @@
+import { type VariantProps } from "tailwind-variants";
+export type SelectVariants = VariantProps<typeof select>;
+export declare const select: import("tailwind-variants").TVReturnType<{
+    underline: {
+        true: string;
+        false: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, "block w-full", {
+    underline: {
+        true: string;
+        false: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    underline: {
+        true: string;
+        false: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, "block w-full", unknown, unknown, undefined>>;
+export type MultiSelectVariants = VariantProps<typeof multiselect>;
+export declare const multiselect: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    disabled: {
+        true: {
+            base: string;
+            dropdownitem: string;
+            closebutton: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    active: {
+        true: {
+            dropdownitem: string;
+        };
+    };
+    selected: {
+        true: {
+            dropdownitem: string;
+        };
+    };
+}, {
+    base: string;
+    select: string;
+    dropdown: string;
+    dropdownitem: string;
+    closebutton: string;
+}, undefined, {
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    disabled: {
+        true: {
+            base: string;
+            dropdownitem: string;
+            closebutton: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    active: {
+        true: {
+            dropdownitem: string;
+        };
+    };
+    selected: {
+        true: {
+            dropdownitem: string;
+        };
+    };
+}, {
+    base: string;
+    select: string;
+    dropdown: string;
+    dropdownitem: string;
+    closebutton: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    disabled: {
+        true: {
+            base: string;
+            dropdownitem: string;
+            closebutton: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    active: {
+        true: {
+            dropdownitem: string;
+        };
+    };
+    selected: {
+        true: {
+            dropdownitem: string;
+        };
+    };
+}, {
+    base: string;
+    select: string;
+    dropdown: string;
+    dropdownitem: string;
+    closebutton: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/forms/select/theme.js

@@ -0,0 +1,58 @@
+import { dropdown, dropdownItem } from "../../dropdown";
+import { tv } from "tailwind-variants";
+export const select = tv({
+    base: "block w-full",
+    variants: {
+        underline: {
+            true: "text-gray-500 bg-transparent border-0 border-b-2 border-gray-200 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-hidden focus:ring-0 focus:border-gray-200 peer px-0!",
+            false: "text-gray-900 bg-gray-50 border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
+        },
+        size: {
+            sm: "text-sm p-2",
+            md: "text-sm p-2.5",
+            lg: "text-base py-3 px-4"
+        }
+    },
+    defaultVariants: {
+        underline: false,
+        size: "md"
+    }
+});
+export const multiselect = tv({
+    slots: {
+        base: "relative border border-gray-300 flex items-center rounded-lg gap-2 dark:border-gray-600 ring-primary-500 dark:ring-primary-500 focus-visible:outline-hidden",
+        select: "flex flex-wrap gap-2",
+        dropdown: "absolute z-50 p-3 flex flex-col gap-1 max-h-64 bg-white border border-gray-300 dark:bg-gray-700 dark:border-gray-600 start-0 top-[calc(100%+1rem)] rounded-lg cursor-pointer overflow-y-scroll w-full",
+        dropdownitem: "py-2 px-3 rounded-lg text-gray-600 hover:text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:text-gray-300 dark:hover:bg-gray-600",
+        closebutton: "p-0 focus:ring-gray-400 dark:text-white"
+    },
+    variants: {
+        size: {
+            sm: "px-2 py-1 min-h-[2.4rem]",
+            md: "px-3 py-1 min-h-[2.7rem]",
+            lg: "px-4 py-2 min-h-[3.2rem]"
+        },
+        disabled: {
+            true: {
+                base: "cursor-not-allowed opacity-50 pointer-events-none",
+                dropdownitem: "cursor-not-allowed opacity-50",
+                closebutton: "cursor-not-allowed"
+            },
+            false: { base: "focus-within:border-primary-500 dark:focus-within:border-primary-500 focus-within:ring-1" }
+        },
+        active: {
+            true: {
+                dropdownitem: "bg-primary-100 text-primary-500 dark:bg-primary-500 dark:text-primary-100 hover:bg-primary-100 dark:hover:bg-primary-500 hover:text-primary-600 dark:hover:text-primary-100"
+            }
+        },
+        selected: {
+            true: {
+                dropdownitem: "bg-gray-100 text-black font-semibold hover:text-black dark:text-white dark:bg-gray-600 dark:hover:text-white"
+            }
+        }
+    },
+    defaultVariants: {
+        underline: false,
+        size: "md"
+    }
+});