@pajohns/flowbite-svelte 0.1.0

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

@@ -0,0 +1,73 @@
+import { type VariantProps } from "tailwind-variants";
+import type { Classes } from "../../theme/themeUtils";
+export type SearchVariants = VariantProps<typeof search> & Classes<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;
+    left: string;
+    icon: string;
+    content: string;
+    input: string;
+    close: string;
+    svg: string;
+}, undefined, {
+    size: {
+        sm: {
+            input: string;
+            icon: string;
+        };
+        md: {
+            input: string;
+            icon: string;
+        };
+        lg: {
+            input: string;
+            icon: string;
+        };
+    };
+}, {
+    base: string;
+    left: string;
+    icon: string;
+    content: string;
+    input: string;
+    close: string;
+    svg: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            input: string;
+            icon: string;
+        };
+        md: {
+            input: string;
+            icon: string;
+        };
+        lg: {
+            input: string;
+            icon: string;
+        };
+    };
+}, {
+    base: string;
+    left: string;
+    icon: string;
+    content: string;
+    input: string;
+    close: string;
+    svg: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/forms/search/theme.js

@@ -0,0 +1,34 @@
+import { tv } from "tailwind-variants";
+export const search = tv({
+    slots: {
+        base: "relative w-full",
+        left: "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-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 disabled:cursor-not-allowed disabled:opacity-50",
+        close: "absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-black",
+        svg: ""
+    },
+    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/select/MultiSelect.svelte

@@ -0,0 +1,271 @@
+<script lang="ts" generics="T">
+  import clsx from "clsx";
+  import type { MultiSelectProps, SelectOptionType } from "../..";
+  import Badge from "../../badge/Badge.svelte";
+  import CloseButton from "../../utils/CloseButton.svelte";
+  import { multiSelect } from "./theme";
+  import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
+  import { onMount, untrack } from "svelte";
+  import { createDismissableContext } from "../../utils/dismissable";
+  import { getButtonGroupContext } from "../../context";
+
+  // Consider reusing that component - https://svelecte.vercel.app/
+
+  let {
+    children,
+    items = [],
+    value = $bindable(),
+    size = "md",
+    dropdownClass = "",
+    placeholder = "",
+    disabled = false,
+    onchange,
+    onblur,
+    class: className,
+    classes,
+    // Extract select-specific props
+    name,
+    form,
+    required,
+    autocomplete,
+    ...restProps
+  }: MultiSelectProps<T> = $props();
+
+  warnThemeDeprecation(
+    "MultiSelect",
+    untrack(() => ({ dropdownClass })),
+    { dropdownClass: "dropdown" }
+  );
+
+  const styling = $derived(classes ?? { dropdown: dropdownClass });
+
+  const theme = $derived(getTheme("multiSelect"));
+
+  let selectItems = $derived(items.filter((x) => value.includes(x.value)));
+  let show: boolean = $state(false);
+
+  const group = getButtonGroupContext();
+
+  // Active item
+  let activeIndex: number | null = $state(null);
+  let activeItem = $derived(activeIndex !== null ? items[((activeIndex % items.length) + items.length) % items.length] : null);
+
+  let multiSelectContainer: HTMLDivElement; // Reference to the main div
+
+  const selectOption = (select: SelectOptionType<T>, event: MouseEvent) => {
+    // Prevent the click from propagating to the parent div
+    event.stopPropagation();
+
+    if (disabled) return;
+    if (select.disabled) return;
+
+    const oldValue = [...value];
+
+    if (value.includes(select.value)) {
+      clearThisOption(select);
+    } else if (!value.includes(select.value)) {
+      value = [...value, select.value];
+    }
+
+    // Trigger onchange if value actually changed
+    if (JSON.stringify(oldValue) !== JSON.stringify(value)) {
+      triggerChange();
+    }
+  };
+
+  const clearAll = (e: MouseEvent) => {
+    if (disabled) return;
+
+    e.stopPropagation();
+    const oldValue = [...value];
+    value = [];
+
+    if (oldValue.length > 0) {
+      triggerChange();
+    }
+  };
+
+  createDismissableContext(clearAll);
+
+  const clearThisOption = (select: SelectOptionType<T>) => {
+    if (disabled) return;
+
+    if (value.includes(select.value)) {
+      const oldValue = [...value];
+      value = value.filter((o: T) => o !== select.value);
+
+      if (oldValue.length !== value.length) {
+        triggerChange();
+      }
+    }
+  };
+
+  // Helper function to trigger change events
+  const triggerChange = () => {
+    if (onchange) {
+      // Create a proper change event for the hidden select element
+      const changeEvent = new Event("change", { bubbles: true });
+      Object.defineProperty(changeEvent, "target", {
+        value: { value: value },
+        enumerable: true
+      });
+      Object.defineProperty(changeEvent, "currentTarget", {
+        value: { value: value },
+        enumerable: true
+      });
+      onchange(changeEvent as Event);
+    }
+  };
+
+  const closeDropdown = () => !disabled && (show = false);
+  const toggleDropdown = (event: MouseEvent) => {
+    if (disabled) return;
+    // Prevent immediate closing if the click originated from within the component itself
+    // This is useful if the click triggers a re-render and focus is lost momentarily.
+    if (multiSelectContainer && multiSelectContainer.contains(event.target as Node)) {
+      show = !show;
+    } else {
+      show = false; // Close if clicked outside
+    }
+  };
+
+  // Handle blur event for validation
+  const handleBlur = (event: FocusEvent) => {
+    // We'll rely more on the global click listener for closing, but keep this for standard blur behavior
+    if (event.currentTarget && (event.currentTarget as HTMLElement).contains && !(event.currentTarget as HTMLElement).contains(event.relatedTarget as Node)) {
+      closeDropdown();
+    }
+    if (onblur) {
+      onblur(event);
+    }
+  };
+
+  // Keyboard navigation
+  function handleToggleActiveItem() {
+    if (disabled) return;
+
+    if (!show) {
+      show = true;
+      activeIndex = 0;
+    } else {
+      if (activeItem !== null) selectOption(activeItem, new MouseEvent("click")); // Pass a dummy MouseEvent
+    }
+  }
+
+  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;
+    // Do not prevent default for tab key, allow it to move focus
+    if (event.key !== "Tab") {
+      event.preventDefault();
+    }
+    event.stopPropagation();
+
+    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]?.();
+    }
+  }
+
+  // Global click listener for closing the dropdown when clicking outside
+  onMount(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (multiSelectContainer && !multiSelectContainer.contains(event.target as Node)) {
+        closeDropdown();
+      }
+    };
+    document.addEventListener("click", handleClickOutside);
+
+    return () => {
+      document.removeEventListener("click", handleClickOutside);
+    };
+  });
+
+  const { base, dropdown, item: dropdownItem, close, select, placeholder: placeholderSpan, svg } = $derived(multiSelect({ disabled, grouped: !!group }));
+</script>
+
+<select {name} {form} {required} {autocomplete} {value} hidden multiple {onchange}>
+  {#each items as item (item.value)}
+    <option value={item.value} disabled={item.disabled}>{item.name}</option>
+  {/each}
+</select>
+
+<div
+  bind:this={multiSelectContainer}
+  {...restProps}
+  onclick={toggleDropdown}
+  onblur={handleBlur}
+  onkeydown={handleKeyDown}
+  tabindex="0"
+  role="listbox"
+  class={base({ size, class: clsx(theme?.base, className) })}
+>
+  {#if !selectItems.length}
+    <span class={placeholderSpan({ class: clsx(classes?.placeholder) })}>{placeholder}</span>
+  {/if}
+  <span class={select({ class: clsx(theme?.select, classes?.span) })}>
+    {#if selectItems.length}
+      {#each selectItems as item (item.value)}
+        {#if children}
+          {@render children({ item, clear: () => clearThisOption(item) })}
+        {:else}
+          <Badge color="gray" large={size === "lg"} dismissable params={{ duration: 100 }} onclose={() => clearThisOption(item)} class={["mx-0.5 px-2 py-0", 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} color="none" class={close({ class: clsx(theme?.close, classes?.close) })} {disabled} />
+    {/if}
+
+    <svg class={clsx(svg(), disabled && "cursor-not-allowed", classes?.svg)} 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: clsx(styling.dropdown) })}>
+      {#each items as item (item.value)}
+        {@const isSelected = selectItems.includes(item)}
+        {@const isActive = activeItem === item}
+        <div
+          onclick={(e) => selectOption(item, e)}
+          role="presentation"
+          class={dropdownItem({
+            selected: isSelected,
+            active: isActive,
+            disabled: item.disabled,
+            class: clsx(classes?.item)
+          })}
+          data-selected={isSelected ? "true" : undefined}
+          data-active={isActive ? "true" : undefined}
+        >
+          {item.name}
+        </div>
+      {/each}
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,25 @@
+import type { MultiSelectProps } from "../..";
+declare function $$render<T>(): {
+    props: MultiSelectProps<T>;
+    exports: {};
+    bindings: "value";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "value";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const MultiSelect: $$IsomorphicComponent;
+type MultiSelect<T> = InstanceType<typeof MultiSelect<T>>;
+export default MultiSelect;

package/dist/forms/select/Select.svelte

@@ -0,0 +1,82 @@
+<script lang="ts" generics="T">
+  import { select as selectCls } from "./theme";
+  import clsx from "clsx";
+  import type { SelectProps } from "../..";
+  import CloseButton from "../../utils/CloseButton.svelte";
+  import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
+  import { createDismissableContext } from "../../utils/dismissable";
+  import { getButtonGroupContext } from "../../context";
+  import { untrack } from "svelte";
+
+  let {
+    children,
+    items,
+    value = $bindable(),
+    elementRef = $bindable(),
+    underline,
+    size = "md",
+    disabled,
+    placeholder = "Choose option ...",
+    clearable,
+    clearableColor = "none",
+    clearableOnClick,
+    onClear,
+    clearableSvgClass,
+    clearableClass,
+    selectClass,
+    class: className,
+    classes,
+    ...restProps
+  }: SelectProps<T> = $props();
+
+  warnThemeDeprecation(
+    "Select",
+    untrack(() => ({ selectClass, clearableSvgClass, clearableClass })),
+    { selectClass: "select", clearableSvgClass: "svg", clearableClass: "close" }
+  );
+
+  const styling = $derived(classes ?? { select: selectClass, svg: clearableSvgClass, close: clearableClass });
+
+  const theme = $derived(getTheme("select"));
+  const group = getButtonGroupContext();
+  const { base, select, close } = $derived(selectCls({ underline, size, disabled, grouped: !!group }));
+
+  const clearAll = () => {
+    if (elementRef) {
+      // Set to empty string to show placeholder and trigger change event
+      elementRef.value = "";
+      // Dispatch a synthetic change event to notify listeners
+      elementRef.dispatchEvent(new Event("change", { bubbles: true }));
+    }
+    // Set reactive value to empty string to match placeholder option
+    value = "" as T;
+
+    // Support both old and new callback names for backward compatibility
+    if (onClear) onClear();
+    // remove this in next major version
+    if (clearableOnClick) clearableOnClick();
+  };
+
+  createDismissableContext(clearAll);
+</script>
+
+<div class={base({ class: clsx(theme?.base, className) })}>
+  <select {disabled} {...restProps} bind:value bind:this={elementRef} class={select({ class: clsx(theme?.select, styling.select) })}>
+    {#if placeholder}
+      <option disabled selected={value === "" || value === undefined} value="">{placeholder}</option>
+    {/if}
+
+    {#if items}
+      {#each items as item (item.value)}
+        <option value={item.value} disabled={item.disabled}>{item.name}</option>
+      {/each}
+    {/if}
+
+    {#if children}
+      {@render children()}
+    {/if}
+  </select>
+  {#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)} {disabled} />
+  {/if}
+</div>

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

@@ -0,0 +1,25 @@
+import type { SelectProps } from "../..";
+declare function $$render<T>(): {
+    props: SelectProps<T>;
+    exports: {};
+    bindings: "value" | "elementRef";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "value" | "elementRef";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Select: $$IsomorphicComponent;
+type Select<T> = InstanceType<typeof Select<T>>;
+export default Select;

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

@@ -0,0 +1,3 @@
+export { default as Select } from "./Select.svelte";
+export { default as MultiSelect } from "./MultiSelect.svelte";
+export { select, multiSelect } from "./theme";

package/dist/forms/select/index.js

@@ -0,0 +1,3 @@
+export { default as Select } from "./Select.svelte";
+export { default as MultiSelect } from "./MultiSelect.svelte";
+export { select, multiSelect } from "./theme";