@pajohns/flowbite-svelte 0.1.0

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

@@ -0,0 +1,264 @@
+import { type VariantProps } from "tailwind-variants";
+import type { Classes } from "../../theme/themeUtils";
+export type SelectVariants = VariantProps<typeof select> & Classes<typeof select>;
+export type MultiSelectVariants = VariantProps<typeof multiSelect> & Classes<typeof multiSelect>;
+export declare const select: import("tailwind-variants").TVReturnType<{
+    underline: {
+        true: {
+            select: string;
+        };
+        false: {
+            select: string;
+        };
+    };
+    size: {
+        sm: {
+            select: string;
+        };
+        md: {
+            select: string;
+        };
+        lg: {
+            select: string;
+        };
+    };
+    disabled: {
+        true: {
+            select: string;
+        };
+        false: {};
+    };
+    grouped: {
+        false: {
+            base: string;
+            select: string;
+        };
+        true: {
+            base: string;
+            select: string;
+        };
+    };
+}, {
+    base: string;
+    select: string;
+    close: string;
+    svg: string;
+}, undefined, {
+    underline: {
+        true: {
+            select: string;
+        };
+        false: {
+            select: string;
+        };
+    };
+    size: {
+        sm: {
+            select: string;
+        };
+        md: {
+            select: string;
+        };
+        lg: {
+            select: string;
+        };
+    };
+    disabled: {
+        true: {
+            select: string;
+        };
+        false: {};
+    };
+    grouped: {
+        false: {
+            base: string;
+            select: string;
+        };
+        true: {
+            base: string;
+            select: string;
+        };
+    };
+}, {
+    base: string;
+    select: string;
+    close: string;
+    svg: string;
+}, import("tailwind-variants").TVReturnType<{
+    underline: {
+        true: {
+            select: string;
+        };
+        false: {
+            select: string;
+        };
+    };
+    size: {
+        sm: {
+            select: string;
+        };
+        md: {
+            select: string;
+        };
+        lg: {
+            select: string;
+        };
+    };
+    disabled: {
+        true: {
+            select: string;
+        };
+        false: {};
+    };
+    grouped: {
+        false: {
+            base: string;
+            select: string;
+        };
+        true: {
+            base: string;
+            select: string;
+        };
+    };
+}, {
+    base: string;
+    select: string;
+    close: string;
+    svg: string;
+}, undefined, unknown, unknown, undefined>>;
+export declare const multiSelect: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    disabled: {
+        true: {
+            base: string;
+            item: string;
+            close: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    active: {
+        true: {
+            item: string;
+        };
+    };
+    selected: {
+        true: {
+            item: string;
+        };
+    };
+    grouped: {
+        false: {
+            base: string;
+            select: string;
+        };
+        true: {
+            base: string;
+            select: string;
+        };
+    };
+}, {
+    base: string;
+    select: string;
+    dropdown: string;
+    item: string;
+    close: string;
+    span: string;
+    placeholder: string;
+    svg: string;
+}, undefined, {
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    disabled: {
+        true: {
+            base: string;
+            item: string;
+            close: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    active: {
+        true: {
+            item: string;
+        };
+    };
+    selected: {
+        true: {
+            item: string;
+        };
+    };
+    grouped: {
+        false: {
+            base: string;
+            select: string;
+        };
+        true: {
+            base: string;
+            select: string;
+        };
+    };
+}, {
+    base: string;
+    select: string;
+    dropdown: string;
+    item: string;
+    close: string;
+    span: string;
+    placeholder: string;
+    svg: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    disabled: {
+        true: {
+            base: string;
+            item: string;
+            close: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    active: {
+        true: {
+            item: string;
+        };
+    };
+    selected: {
+        true: {
+            item: string;
+        };
+    };
+    grouped: {
+        false: {
+            base: string;
+            select: string;
+        };
+        true: {
+            base: string;
+            select: string;
+        };
+    };
+}, {
+    base: string;
+    select: string;
+    dropdown: string;
+    item: string;
+    close: string;
+    span: string;
+    placeholder: string;
+    svg: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/forms/select/theme.js

@@ -0,0 +1,99 @@
+import { tv } from "tailwind-variants";
+export const select = tv({
+    slots: {
+        base: "relative w-full",
+        select: "block w-full rtl:text-right",
+        close: "absolute right-8 top-1/2 -translate-y-1/2 text-gray-400 hover:text-black",
+        svg: ""
+    },
+    variants: {
+        underline: {
+            true: {
+                select: "text-gray-500 bg-transparent rounded-none! 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: {
+                select: "text-gray-900 bg-gray-50 border border-gray-300 focus:outline-hidden 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: { select: "text-xs px-2.5 py-2.5" },
+            md: { select: "text-sm px-2.5 py-2.5" },
+            lg: { select: "text-base py-3 px-4" }
+        },
+        disabled: {
+            true: {
+                select: "cursor-not-allowed opacity-50"
+            },
+            false: {}
+        },
+        grouped: {
+            false: { base: "rounded-lg", select: "rounded-lg" },
+            true: {
+                base: "first:rounded-s-lg last:rounded-e-lg not-first:-ms-px group",
+                select: "group-first:rounded-s-lg group-last:rounded-e-lg group-not-first:-ms-px h-full"
+            }
+        }
+    },
+    defaultVariants: {
+        underline: false,
+        size: "md"
+    }
+});
+export const multiSelect = tv({
+    slots: {
+        base: "relative border border-gray-300 w-full flex items-center gap-2 dark:border-gray-600 ring-primary-500 dark:ring-primary-500 focus-visible:outline-hidden",
+        select: "",
+        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",
+        item: "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",
+        close: "p-0 focus:ring-gray-400 dark:text-white",
+        span: "",
+        placeholder: "text-gray-400",
+        svg: "ms-1 h-3 w-3 cursor-pointer text-gray-800 dark:text-white"
+    },
+    variants: {
+        size: {
+            sm: "px-2.5 py-2.5 min-h-[2.4rem] text-xs",
+            md: "px-2.5 py-2.5 min-h-[2.7rem] text-sm",
+            lg: "px-3 py-3 min-h-[3.2rem] sm:text-base"
+        },
+        disabled: {
+            true: {
+                base: "cursor-not-allowed opacity-50 pointer-events-none",
+                item: "cursor-not-allowed opacity-50",
+                close: "cursor-not-allowed"
+            },
+            false: { base: "focus-within:border-primary-500 dark:focus-within:border-primary-500 focus-within:ring-1" }
+        },
+        active: {
+            true: {
+                item: "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: {
+                item: "bg-gray-100 text-black font-semibold hover:text-black dark:text-white dark:bg-gray-600 dark:hover:text-white"
+            }
+        },
+        grouped: {
+            false: { base: "rounded-lg", select: "rounded-lg" },
+            true: {
+                base: "first:rounded-s-lg last:rounded-e-lg not-first:-ms-px group",
+                select: "group-first:rounded-s-lg group-last:rounded-e-lg group-not-first:-ms-px h-full"
+            }
+        }
+    },
+    // Add compoundVariants here
+    compoundVariants: [
+        {
+            selected: true,
+            active: true,
+            class: {
+                item: "bg-primary-200 dark:bg-primary-600 text-primary-700 dark:text-primary-100 font-semibold" // Adjust colors as needed
+            }
+        }
+    ],
+    defaultVariants: {
+        underline: false,
+        size: "md"
+    }
+});

package/dist/forms/tags/Tags.svelte

@@ -0,0 +1,245 @@
+<script lang="ts">
+  import clsx from "clsx";
+  import type { TagsProps } from "../..";
+  import P from "../../typography/paragraph/P.svelte";
+  import CloseButton from "../../utils/CloseButton.svelte";
+  import { tags } from "./theme";
+  import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
+  import { computePosition, offset, flip, shift, autoUpdate } from "@floating-ui/dom";
+  import { onDestroy, untrack } from "svelte";
+
+  let {
+    value = $bindable([]),
+    placeholder = "Enter tags",
+    class: className,
+    classes,
+    itemClass,
+    spanClass,
+    closeClass,
+    inputClass,
+    closeBtnSize = "xs",
+    unique = false,
+    availableTags = [],
+    showHelper = false,
+    showAvailableTags = false,
+    allowNewTags = true,
+    inputProps = {},
+    disabled,
+    ...restProps
+  }: TagsProps = $props();
+
+  warnThemeDeprecation(
+    "Tags",
+    untrack(() => ({ itemClass, spanClass, closeClass, inputClass })),
+    { itemClass: "tag", spanClass: "span", closeClass: "close", inputClass: "input" }
+  );
+
+  const styling = $derived(
+    classes ?? {
+      tag: itemClass,
+      span: spanClass,
+      close: closeClass,
+      input: inputClass
+    }
+  );
+
+  const theme = $derived(getTheme("tags"));
+
+  const { base, tag: tagCls, span: spanCls, close, input: inputCls, info, warning, error } = $derived(tags());
+
+  let contents: string = $state("");
+  let errorMessage: string = $state("");
+  let inputElement: HTMLInputElement;
+  let inputContainer: HTMLDivElement;
+  // svelte-ignore non_reactive_update
+  let dropdownElement: HTMLUListElement | null = null;
+  let cleanupFloating: (() => void) | undefined;
+
+  function updateDropdownPosition() {
+    if (!inputContainer || !dropdownElement) return;
+
+    cleanupFloating?.();
+
+    cleanupFloating = autoUpdate(inputContainer!, dropdownElement!, async () => {
+      const { x, y } = await computePosition(inputContainer!, dropdownElement!, {
+        placement: "bottom-start",
+        middleware: [offset(4), flip(), shift()]
+      });
+
+      Object.assign(dropdownElement!.style, {
+        position: "absolute",
+        left: `${x}px`,
+        top: `${y}px`
+      });
+    });
+  }
+
+  const handleKeys = (event: KeyboardEvent) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      const newTag = contents.trim();
+
+      if (newTag.length === 0) return;
+
+      // Add validation: if allowNewTags is false and availableTags is empty, show error
+      if (!allowNewTags && availableTags.length === 0) {
+        errorMessage = "No available tags provided. Please add available tags or enable allowNewTags.";
+        return;
+      }
+
+      const isInAvailable = availableTags.length === 0 || availableTags.some((tag) => tag.toLowerCase() === newTag.toLowerCase());
+
+      const alreadyExists = value.some((tag) => tag.toLowerCase() === newTag.toLowerCase());
+
+      if (!allowNewTags && !isInAvailable) {
+        errorMessage = `"${newTag}" is not in the available tags.`;
+        return;
+      }
+
+      if (unique && alreadyExists) {
+        errorMessage = `"${newTag}" is already added.`;
+        return;
+      }
+
+      value = [...value, newTag];
+      contents = "";
+      if (inputElement) {
+        inputElement.value = "";
+      }
+      errorMessage = "";
+    }
+
+    if (event.key === "Backspace" && contents.length === 0) {
+      event.preventDefault();
+      const lastTag = value[value.length - 1] ?? "";
+      value = value.slice(0, -1);
+      contents = lastTag;
+      if (inputElement) {
+        inputElement.value = lastTag;
+      }
+      errorMessage = "";
+    }
+  };
+
+  const deleteField = (index: number) => {
+    value = value.filter((_, i) => i !== index);
+    errorMessage = "";
+  };
+
+  $effect(() => {
+    const trimmed = contents.trim();
+
+    const shouldShow = availableTags.length > 0 && trimmed !== "" && inputContainer && dropdownElement;
+
+    if (!shouldShow) {
+      cleanupFloating?.();
+      return;
+    }
+
+    const filtered = availableTags.filter((tag) => tag.toLowerCase().includes(trimmed.toLowerCase()) && (!unique || !value.some((t) => t.toLowerCase() === tag.toLowerCase())));
+
+    if (filtered.length > 0) {
+      updateDropdownPosition();
+    } else {
+      cleanupFloating?.();
+    }
+  });
+
+  onDestroy(() => {
+    cleanupFloating?.();
+  });
+</script>
+
+<svelte:window />
+
+{#if showAvailableTags && availableTags.length > 0}
+  <P class={clsx(info(), classes?.info)}>Available tags: {availableTags.join(", ")}</P>
+{/if}
+
+{#if showHelper && contents.trim().length > 0}
+  {#if unique && value.some((tag) => tag.toLowerCase() === contents.trim().toLowerCase())}
+    <P class={clsx(warning(), classes?.warning)}>"{contents.trim()}" is already added.</P>
+  {:else if availableTags.length > 0 && !allowNewTags && !availableTags.some((tag) => tag.toLowerCase() === contents.trim().toLowerCase())}
+    <P class={clsx(error(), classes?.error)}>"{contents.trim()}" is not in the available tags.</P>
+  {/if}
+{/if}
+
+{#if errorMessage}
+  <P class={clsx(error(), classes?.error)}>{errorMessage}</P>
+{/if}
+
+<div
+  {...restProps}
+  class={base({
+    class: clsx(theme?.base, className)
+  })}
+>
+  {#each value as tag, index (index)}
+    <div class={tagCls({ class: clsx(theme?.tag, styling.tag) })}>
+      <span class={spanCls({ class: clsx(theme?.span, styling.span) })}>
+        {tag}
+      </span>
+      <CloseButton {disabled} size={closeBtnSize} class={close({ class: clsx(theme?.close, styling.close) })} onclick={() => deleteField(index)} />
+    </div>
+  {/each}
+  <div class="relative w-full" bind:this={inputContainer}>
+    <input
+      {...inputProps}
+      {disabled}
+      bind:this={inputElement}
+      onkeydown={handleKeys}
+      bind:value={contents}
+      placeholder={value.length === 0 ? placeholder : ""}
+      type="text"
+      autocomplete="off"
+      class={inputCls({ class: clsx(styling.input) })}
+    />
+    {#if availableTags.length > 0 && contents.trim() !== ""}
+      {@const filteredSuggestions = availableTags.filter((tag) => tag.toLowerCase().includes(contents.trim().toLowerCase()) && (!unique || !value.some((t) => t.toLowerCase() === tag.toLowerCase())))}
+      {#if filteredSuggestions.length > 0}
+        <ul bind:this={dropdownElement} class="z-10 max-h-48 w-full overflow-auto rounded border border-gray-300 bg-white shadow" style="position: absolute;">
+          {#each filteredSuggestions as suggestion (suggestion)}
+            <li>
+              <button
+                type="button"
+                class="block w-full cursor-pointer px-3 py-2 text-left hover:bg-gray-100"
+                onclick={() => {
+                  value = [...value, suggestion];
+                  contents = "";
+                  if (inputElement) {
+                    inputElement.value = "";
+                  }
+                }}
+              >
+                {suggestion}
+              </button>
+            </li>
+          {/each}
+        </ul>
+      {/if}
+    {/if}
+  </div>
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[TagsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L890)
+## Props
+@prop value = $bindable([])
+@prop placeholder = "Enter tags"
+@prop class: className
+@prop classes
+@prop itemClass
+@prop spanClass
+@prop closeClass
+@prop inputClass
+@prop closeBtnSize = "xs"
+@prop unique = false
+@prop availableTags = []
+@prop showHelper = false
+@prop showAvailableTags = false
+@prop allowNewTags = true
+@prop ...restProps
+-->

package/dist/forms/tags/Tags.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { TagsProps } from "../..";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [TagsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L890)
+ * ## Props
+ * @prop value = $bindable([])
+ * @prop placeholder = "Enter tags"
+ * @prop class: className
+ * @prop classes
+ * @prop itemClass
+ * @prop spanClass
+ * @prop closeClass
+ * @prop inputClass
+ * @prop closeBtnSize = "xs"
+ * @prop unique = false
+ * @prop availableTags = []
+ * @prop showHelper = false
+ * @prop showAvailableTags = false
+ * @prop allowNewTags = true
+ * @prop ...restProps
+ */
+declare const Tags: import("svelte").Component<TagsProps, {}, "value">;
+type Tags = ReturnType<typeof Tags>;
+export default Tags;

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

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

package/dist/forms/tags/index.js

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

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

@@ -0,0 +1,70 @@
+import { type VariantProps } from "tailwind-variants";
+import type { Classes } from "../../theme/themeUtils";
+export type TagsVariants = VariantProps<typeof tags> & Classes<typeof tags>;
+export declare const tags: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            close?: import("tailwind-merge").ClassNameValue;
+            error?: import("tailwind-merge").ClassNameValue;
+            input?: import("tailwind-merge").ClassNameValue;
+            span?: import("tailwind-merge").ClassNameValue;
+            tag?: import("tailwind-merge").ClassNameValue;
+            info?: import("tailwind-merge").ClassNameValue;
+            warning?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            close?: import("tailwind-merge").ClassNameValue;
+            error?: import("tailwind-merge").ClassNameValue;
+            input?: import("tailwind-merge").ClassNameValue;
+            span?: import("tailwind-merge").ClassNameValue;
+            tag?: import("tailwind-merge").ClassNameValue;
+            info?: import("tailwind-merge").ClassNameValue;
+            warning?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    tag: string;
+    span: string;
+    close: string;
+    input: string;
+    info: string;
+    warning: string;
+    error: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            close?: import("tailwind-merge").ClassNameValue;
+            error?: import("tailwind-merge").ClassNameValue;
+            input?: import("tailwind-merge").ClassNameValue;
+            span?: import("tailwind-merge").ClassNameValue;
+            tag?: import("tailwind-merge").ClassNameValue;
+            info?: import("tailwind-merge").ClassNameValue;
+            warning?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    tag: string;
+    span: string;
+    close: string;
+    input: string;
+    info: string;
+    warning: string;
+    error: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    base: string;
+    tag: string;
+    span: string;
+    close: string;
+    input: string;
+    info: string;
+    warning: string;
+    error: string;
+}, undefined, unknown, unknown, undefined>>;