@pajohns/flowbite-svelte 0.1.0

package/dist/forms/fileupload/theme.js

@@ -0,0 +1,16 @@
+import { tv } from "tailwind-variants";
+export const fileupload = tv({
+    slots: {
+        base: "block w-full disabled:cursor-not-allowed disabled:opacity-50 rtl:text-right p-2.5 focus:border-primary-500 focus:ring-primary-500 dark:focus:border-primary-500 dark:focus:ring-primary-500 bg-gray-50 text-gray-900 dark:bg-gray-700 dark:placeholder-gray-400 border-gray-300 dark:border-gray-600 text-sm rounded-lg border p-0! dark:text-gray-400",
+        wrapper: "relative w-full",
+        close: "flex absolute inset-y-0 items-center text-gray-500 dark:text-gray-400 end-0 p-2.5",
+        svg: ""
+    },
+    variants: {
+        size: {
+            sm: { base: "text-xs ps-9 pe-9 p-2" },
+            md: { base: "text-sm ps-10 pe-10 p-2.5" },
+            lg: { base: "sm:text-base ps-11 pe-11 p-3" }
+        }
+    }
+});

package/dist/forms/floating-label/FloatingLabelInput.svelte

@@ -0,0 +1,240 @@
+<script lang="ts">
+  import { idGenerator } from "../../utils";
+  import { floatingLabelInput } from "./theme";
+  import clsx from "clsx";
+  import type { FloatingLabelInputProps } from "../..";
+  import CloseButton from "../../utils/CloseButton.svelte";
+  import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
+  import { createDismissableContext } from "../../utils/dismissable";
+  import { untrack } from "svelte";
+
+  let {
+    children,
+    id = idGenerator(),
+    value = $bindable(),
+    elementRef = $bindable(),
+    variant = "standard",
+    size = "default",
+    color = "default",
+    class: className,
+    classes,
+    inputClass,
+    labelClass,
+    clearable,
+    clearableSvgClass,
+    clearableColor = "none",
+    clearableClass,
+    clearableOnClick,
+    data = [],
+    maxSuggestions = 5,
+    onSelect,
+    comboClass,
+    placeholder,
+    ...restProps
+  }: FloatingLabelInputProps = $props();
+
+  warnThemeDeprecation(
+    "FloatingLabelInput",
+    untrack(() => ({ inputClass, labelClass, clearableSvgClass, clearableClass, comboClass })),
+    { inputClass: "input", labelClass: "label", clearableSvgClass: "svg", clearableClass: "close", comboClass: "combo" }
+  );
+
+  const styling = $derived(classes ?? { input: inputClass, label: labelClass, svg: clearableSvgClass, close: clearableClass, combo: comboClass });
+
+  const theme = $derived(getTheme("floatingLabelInput"));
+
+  const { base, input, label, close, combo } = $derived(floatingLabelInput({ variant, size, color }));
+
+  const clearAll = () => {
+    if (elementRef) {
+      elementRef.value = "";
+      value = "";
+      backspaceUsed = false;
+      updateSuggestions();
+      dummyFocusDiv?.focus();
+      setTimeout(() => {
+        elementRef?.focus();
+      }, 100);
+    }
+    if (clearableOnClick) clearableOnClick();
+  };
+
+  const isCombobox = $derived(Array.isArray(data) && data.length > 0);
+
+  // svelte-ignore non_reactive_update
+  let dummyFocusDiv: HTMLDivElement;
+
+  let isFocused = $state(false);
+  let filteredSuggestions: string[] = $state([]);
+  let selectedIndex = $state(-1);
+  let backspaceUsed = $state(false);
+
+  function updateSuggestions() {
+    if (!isCombobox || !isFocused) {
+      filteredSuggestions = [];
+      return;
+    }
+
+    const fullSearchTerm = ((value as string) || "").toLowerCase();
+    const lastSpaceIndex = fullSearchTerm.lastIndexOf(" ");
+    const searchTerm = lastSpaceIndex === -1 ? fullSearchTerm : fullSearchTerm.substring(lastSpaceIndex + 1);
+
+    if (searchTerm === "" && !backspaceUsed) {
+      filteredSuggestions = [];
+    } else if (searchTerm) {
+      filteredSuggestions = data.filter((item) => item.toLowerCase().includes(searchTerm)).slice(0, maxSuggestions);
+    } else if (backspaceUsed) {
+      filteredSuggestions = [...data].slice(0, maxSuggestions);
+    }
+
+    selectedIndex = -1;
+  }
+
+  $effect(() => {
+    if (isCombobox) {
+      updateSuggestions();
+    }
+  });
+
+  function handleInput() {
+    if ((value as string).length > 0) {
+      backspaceUsed = false;
+    }
+    updateSuggestions();
+  }
+
+  function handleFocus() {
+    isFocused = true;
+    updateSuggestions();
+  }
+
+  function handleBlur() {
+    setTimeout(() => {
+      isFocused = false;
+      backspaceUsed = false;
+      filteredSuggestions = [];
+    }, 200);
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (!isCombobox) return;
+
+    if (event.key === "Backspace" || event.key === "Delete") {
+      const currentValue = value as string;
+      if (currentValue.length <= 1) {
+        backspaceUsed = true;
+      }
+    }
+
+    if (!filteredSuggestions.length) return;
+
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        selectedIndex = (selectedIndex + 1) % filteredSuggestions.length;
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        selectedIndex = selectedIndex <= 0 ? filteredSuggestions.length - 1 : selectedIndex - 1;
+        break;
+      case "Enter":
+        if (selectedIndex >= 0) {
+          event.preventDefault();
+          selectItem(filteredSuggestions[selectedIndex]);
+        }
+        break;
+      case "Escape":
+        event.preventDefault();
+        filteredSuggestions = [];
+        break;
+    }
+  }
+
+  function selectItem(item: string) {
+    const currentValue = (value as string) || "";
+    const lastSpaceIndex = currentValue.lastIndexOf(" ");
+
+    if (lastSpaceIndex === -1) {
+      value = item + " "; // Replace the whole value if no space, add trailing space
+    } else {
+      value = currentValue.substring(0, lastSpaceIndex + 1) + item + " "; // Replace last word, add trailing space
+    }
+
+    if (onSelect) onSelect(item);
+    filteredSuggestions = [];
+    selectedIndex = -1;
+    elementRef?.focus();
+  }
+
+  createDismissableContext(clearAll);
+</script>
+
+{#if clearable}
+  <div tabindex="-1" bind:this={dummyFocusDiv} class="sr-only"></div>
+{/if}
+
+<div class={base({ class: clsx(isCombobox ? "relative" : "", theme?.base, className) })}>
+  <input
+    {id}
+    placeholder=" "
+    bind:value
+    bind:this={elementRef}
+    {...restProps}
+    class={input({ class: clsx(theme?.input, styling.input) })}
+    oninput={handleInput}
+    onfocus={handleFocus}
+    onblur={handleBlur}
+    onkeydown={handleKeydown}
+  />
+  {#if value !== undefined && value !== "" && clearable}
+    <CloseButton class={close({ class: clsx(theme?.close, styling.close) })} color={clearableColor} aria-label="Clear search value" svgClass={clsx(styling.svg)} />
+  {/if}
+  <label for={id} class={label({ class: clsx(theme?.label, styling.label) })}>
+    {@render children()}
+  </label>
+
+  {#if isCombobox && isFocused && filteredSuggestions.length > 0}
+    <div class={combo({ class: clsx(theme?.combo, styling.combo) })}>
+      {#each filteredSuggestions as item, i (item)}
+        <button
+          type="button"
+          class="w-full px-3 py-2 text-left {i === selectedIndex ? 'bg-gray-100 dark:bg-gray-700' : 'hover:bg-gray-50 dark:hover:bg-gray-700'} focus:outline-none"
+          onclick={() => selectItem(item)}
+          onmouseenter={() => (selectedIndex = i)}
+        >
+          {item}
+        </button>
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[FloatingLabelInputProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L825)
+## Props
+@prop children
+@prop id = idGenerator()
+@prop value = $bindable()
+@prop elementRef = $bindable()
+@prop variant = "standard"
+@prop size = "default"
+@prop color = "default"
+@prop class: className
+@prop classes
+@prop inputClass
+@prop labelClass
+@prop clearable
+@prop clearableSvgClass
+@prop clearableColor = "none"
+@prop clearableClass
+@prop clearableOnClick
+@prop data = []
+@prop maxSuggestions = 5
+@prop onSelect
+@prop comboClass
+@prop placeholder
+@prop ...restProps
+-->

package/dist/forms/floating-label/FloatingLabelInput.svelte.d.ts

@@ -0,0 +1,32 @@
+import type { FloatingLabelInputProps } from "../..";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [FloatingLabelInputProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L825)
+ * ## Props
+ * @prop children
+ * @prop id = idGenerator()
+ * @prop value = $bindable()
+ * @prop elementRef = $bindable()
+ * @prop variant = "standard"
+ * @prop size = "default"
+ * @prop color = "default"
+ * @prop class: className
+ * @prop classes
+ * @prop inputClass
+ * @prop labelClass
+ * @prop clearable
+ * @prop clearableSvgClass
+ * @prop clearableColor = "none"
+ * @prop clearableClass
+ * @prop clearableOnClick
+ * @prop data = []
+ * @prop maxSuggestions = 5
+ * @prop onSelect
+ * @prop comboClass
+ * @prop placeholder
+ * @prop ...restProps
+ */
+declare const FloatingLabelInput: import("svelte").Component<FloatingLabelInputProps, {}, "value" | "elementRef">;
+type FloatingLabelInput = ReturnType<typeof FloatingLabelInput>;
+export default FloatingLabelInput;

package/dist/forms/floating-label/index.d.ts

@@ -0,0 +1,2 @@
+export { default as FloatingLabelInput } from "./FloatingLabelInput.svelte";
+export { floatingLabelInput } from "./theme";

package/dist/forms/floating-label/index.js

@@ -0,0 +1,2 @@
+export { default as FloatingLabelInput } from "./FloatingLabelInput.svelte";
+export { floatingLabelInput } from "./theme";

package/dist/forms/floating-label/theme.d.ts

@@ -0,0 +1,349 @@
+import { type VariantProps } from "tailwind-variants";
+import type { Classes } from "../../theme/themeUtils";
+export type FloatingLabelInputVaratiants = VariantProps<typeof floatingLabelInput> & Classes<typeof floatingLabelInput>;
+export declare const floatingLabelInput: import("tailwind-variants").TVReturnType<{
+    variant: {
+        filled: {
+            base: string;
+            input: string;
+            label: string;
+        };
+        outlined: {
+            base: string;
+            input: string;
+            label: string;
+        };
+        standard: {
+            base: string;
+            input: string;
+            label: string;
+        };
+    };
+    size: {
+        small: {};
+        default: {};
+    };
+    color: {
+        default: {
+            input: string;
+            label: string;
+        };
+        primary: {
+            input: string;
+            label: string;
+        };
+        secondary: {
+            input: string;
+            label: string;
+        };
+        gray: {
+            input: string;
+            label: string;
+        };
+        red: {
+            input: string;
+            label: string;
+        };
+        orange: {
+            input: string;
+            label: string;
+        };
+        amber: {
+            input: string;
+            label: string;
+        };
+        yellow: {
+            input: string;
+            label: string;
+        };
+        lime: {
+            input: string;
+            label: string;
+        };
+        green: {
+            input: string;
+            label: string;
+        };
+        emerald: {
+            input: string;
+            label: string;
+        };
+        teal: {
+            input: string;
+            label: string;
+        };
+        cyan: {
+            input: string;
+            label: string;
+        };
+        sky: {
+            input: string;
+            label: string;
+        };
+        blue: {
+            input: string;
+            label: string;
+        };
+        indigo: {
+            input: string;
+            label: string;
+        };
+        violet: {
+            input: string;
+            label: string;
+        };
+        purple: {
+            input: string;
+            label: string;
+        };
+        fuchsia: {
+            input: string;
+            label: string;
+        };
+        pink: {
+            input: string;
+            label: string;
+        };
+        rose: {
+            input: string;
+            label: string;
+        };
+    };
+}, {
+    base: string;
+    input: string;
+    label: string;
+    close: string;
+    combo: string;
+    svg: string;
+}, undefined, {
+    variant: {
+        filled: {
+            base: string;
+            input: string;
+            label: string;
+        };
+        outlined: {
+            base: string;
+            input: string;
+            label: string;
+        };
+        standard: {
+            base: string;
+            input: string;
+            label: string;
+        };
+    };
+    size: {
+        small: {};
+        default: {};
+    };
+    color: {
+        default: {
+            input: string;
+            label: string;
+        };
+        primary: {
+            input: string;
+            label: string;
+        };
+        secondary: {
+            input: string;
+            label: string;
+        };
+        gray: {
+            input: string;
+            label: string;
+        };
+        red: {
+            input: string;
+            label: string;
+        };
+        orange: {
+            input: string;
+            label: string;
+        };
+        amber: {
+            input: string;
+            label: string;
+        };
+        yellow: {
+            input: string;
+            label: string;
+        };
+        lime: {
+            input: string;
+            label: string;
+        };
+        green: {
+            input: string;
+            label: string;
+        };
+        emerald: {
+            input: string;
+            label: string;
+        };
+        teal: {
+            input: string;
+            label: string;
+        };
+        cyan: {
+            input: string;
+            label: string;
+        };
+        sky: {
+            input: string;
+            label: string;
+        };
+        blue: {
+            input: string;
+            label: string;
+        };
+        indigo: {
+            input: string;
+            label: string;
+        };
+        violet: {
+            input: string;
+            label: string;
+        };
+        purple: {
+            input: string;
+            label: string;
+        };
+        fuchsia: {
+            input: string;
+            label: string;
+        };
+        pink: {
+            input: string;
+            label: string;
+        };
+        rose: {
+            input: string;
+            label: string;
+        };
+    };
+}, {
+    base: string;
+    input: string;
+    label: string;
+    close: string;
+    combo: string;
+    svg: string;
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        filled: {
+            base: string;
+            input: string;
+            label: string;
+        };
+        outlined: {
+            base: string;
+            input: string;
+            label: string;
+        };
+        standard: {
+            base: string;
+            input: string;
+            label: string;
+        };
+    };
+    size: {
+        small: {};
+        default: {};
+    };
+    color: {
+        default: {
+            input: string;
+            label: string;
+        };
+        primary: {
+            input: string;
+            label: string;
+        };
+        secondary: {
+            input: string;
+            label: string;
+        };
+        gray: {
+            input: string;
+            label: string;
+        };
+        red: {
+            input: string;
+            label: string;
+        };
+        orange: {
+            input: string;
+            label: string;
+        };
+        amber: {
+            input: string;
+            label: string;
+        };
+        yellow: {
+            input: string;
+            label: string;
+        };
+        lime: {
+            input: string;
+            label: string;
+        };
+        green: {
+            input: string;
+            label: string;
+        };
+        emerald: {
+            input: string;
+            label: string;
+        };
+        teal: {
+            input: string;
+            label: string;
+        };
+        cyan: {
+            input: string;
+            label: string;
+        };
+        sky: {
+            input: string;
+            label: string;
+        };
+        blue: {
+            input: string;
+            label: string;
+        };
+        indigo: {
+            input: string;
+            label: string;
+        };
+        violet: {
+            input: string;
+            label: string;
+        };
+        purple: {
+            input: string;
+            label: string;
+        };
+        fuchsia: {
+            input: string;
+            label: string;
+        };
+        pink: {
+            input: string;
+            label: string;
+        };
+        rose: {
+            input: string;
+            label: string;
+        };
+    };
+}, {
+    base: string;
+    input: string;
+    label: string;
+    close: string;
+    combo: string;
+    svg: string;
+}, undefined, unknown, unknown, undefined>>;