flowbite-svelte 0.48.4 → 1.0.0-next.2

package/dist/forms/dropzone/Dropzone.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+  import type { DragEventHandler, ChangeEventHandler } from "svelte/elements";
+  import { type DropzoneProps as Props, dropzone } from ".";
+  import clsx from "clsx";
+
+  type HTMLInputElementWithFiles = HTMLInputElement & { files: FileList | null };
+
+  let {
+    children,
+    files = $bindable<FileList | null>(),
+    class: className,
+    ...restProps
+  }: Props & {
+    ondrop?: DragEventHandler<HTMLButtonElement>;
+    ondragover?: DragEventHandler<HTMLButtonElement>;
+    onchange?: ChangeEventHandler<HTMLInputElementWithFiles>;
+  } = $props();
+
+  const base = $derived(dropzone({ class: clsx(className) }));
+  let input: HTMLInputElement;
+
+  function keydown(ev: KeyboardEvent) {
+    if ([" ", "Enter"].includes(ev.key)) {
+      ev.preventDefault();
+      input.click();
+    }
+  }
+
+  function onClick(event: MouseEvent) {
+    event.preventDefault();
+    input.click();
+  }
+
+  const onDrop: DragEventHandler<HTMLButtonElement> = function (this: Window, event) {
+    event.preventDefault();
+    if (ondrop) {
+      ondrop.call(this, event);
+    }
+  };
+
+  const onDragOver: DragEventHandler<HTMLButtonElement> = function (this: Window, event) {
+    event.preventDefault();
+    if (ondragover) {
+      ondragover.call(this, event);
+    }
+  };
+
+  const onChange: ChangeEventHandler<HTMLInputElementWithFiles> = function (this: Window, event) {
+    if (onchange) {
+      onchange.call(this, event);
+    }
+  };
+</script>
+
+<button class={base} onkeydown={keydown} onclick={onClick} ondrop={onDrop} ondragover={onDragOver} type="button">
+  {@render children()}
+</button>
+<label class="hidden">
+  <input {...restProps} bind:files bind:this={input} onchange={onChange} type="file" />
+</label>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@props: 
+-->

package/dist/forms/dropzone/Dropzone.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type DropzoneProps_ = typeof __propDef.props;
+export { DropzoneProps_ as DropzoneProps };
+export type DropzoneEvents = typeof __propDef.events;
+export type DropzoneSlots = typeof __propDef.slots;
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @props:
+ */
+export default class Dropzone extends SvelteComponentTyped<DropzoneProps_, DropzoneEvents, DropzoneSlots> {
+}

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

@@ -0,0 +1,4 @@
+import type { DropzoneProps } from "./type";
+import { dropzone } from "./theme";
+import Dropzone from "./Dropzone.svelte";
+export { Dropzone, dropzone, type DropzoneProps };

package/dist/forms/dropzone/index.js

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

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

@@ -0,0 +1 @@
+export declare const dropzone: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "flex flex-col justify-center items-center w-full h-64 bg-gray-50 rounded-lg border-2 border-gray-300 border-dashed cursor-pointer dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "flex flex-col justify-center items-center w-full h-64 bg-gray-50 rounded-lg border-2 border-gray-300 border-dashed cursor-pointer dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600", unknown, unknown, undefined>>;

package/dist/forms/dropzone/theme.js

@@ -0,0 +1,4 @@
+import { tv } from "tailwind-variants";
+export const dropzone = tv({
+    base: "flex flex-col justify-center items-center w-full h-64 bg-gray-50 rounded-lg border-2 border-gray-300 border-dashed cursor-pointer dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600"
+});

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

@@ -0,0 +1,7 @@
+import type { Snippet } from "svelte";
+import type { HTMLInputAttributes } from "svelte/elements";
+interface DropzoneProps extends HTMLInputAttributes {
+    children: Snippet;
+    files?: FileList | null;
+}
+export { type DropzoneProps };

package/dist/forms/dropzone/type.js

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

package/dist/forms/fileupload/Fileupload.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import { type FileuploadProps as Props, fileupload } from ".";
+  import { CloseButton } from "../..";
+  import clsx from "clsx";
+  let { files = $bindable<FileList | undefined>(), size = "md", clearable = false, class: className, ...restProps }: Props = $props();
+  const { base, wrapper, right } = fileupload();
+
+  let fileInputRef: HTMLInputElement | undefined = $state();
+  const clearAll = () => {
+    if (fileInputRef) {
+      fileInputRef.value = "";
+      files = undefined;
+    }
+  };
+  const hasFiles = $derived(files && files.length > 0);
+</script>
+
+{#if clearable}
+  <div class={wrapper()}>
+    <input type="file" bind:files bind:this={fileInputRef} {...restProps} class={base({ size, class: clsx(className) })} />
+    {#if hasFiles}
+      <CloseButton onclick={clearAll} class={right()} />
+    {/if}
+  </div>
+{:else}
+  <input type="file" bind:files {...restProps} class={base({ size, class: clsx(className) })} />
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@props: files: any = $bindable<FileList | undefined>();
+@props:size: any = "md";
+@props:clearable: any = false;
+@props:class: string;
+-->

package/dist/forms/fileupload/Fileupload.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type FileuploadProps_ = typeof __propDef.props;
+export { FileuploadProps_ as FileuploadProps };
+export type FileuploadEvents = typeof __propDef.events;
+export type FileuploadSlots = typeof __propDef.slots;
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @props: files: any = $bindable<FileList | undefined>();
+ * @props:size: any = "md";
+ * @props:clearable: any = false;
+ * @props:class: string;
+ */
+export default class Fileupload extends SvelteComponentTyped<FileuploadProps_, FileuploadEvents, FileuploadSlots> {
+}

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

@@ -0,0 +1,4 @@
+import type { FileuploadProps } from "./type";
+import Fileupload from "./Fileupload.svelte";
+import { fileupload } from "./theme";
+export { Fileupload, fileupload, type FileuploadProps };

package/dist/forms/fileupload/index.js

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

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

@@ -0,0 +1,51 @@
+import { type VariantProps } from "tailwind-variants";
+export type FileuploadViariants = VariantProps<typeof fileupload>;
+export declare const fileupload: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    wrapper: string;
+    right: string;
+}, undefined, {
+    size: {
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    wrapper: string;
+    right: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    wrapper: string;
+    right: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/forms/fileupload/theme.js

@@ -0,0 +1,15 @@
+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",
+        right: "flex absolute inset-y-0 items-center text-gray-500 dark:text-gray-400 end-0 p-2.5"
+    },
+    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/fileupload/type.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLInputAttributes } from "svelte/elements";
+import type { InputProps } from "../..";
+import type { FileuploadViariants } from "./theme";
+interface FileuploadProps extends Omit<HTMLInputAttributes, "size"> {
+    files?: FileList;
+    size?: FileuploadViariants["size"];
+    color?: InputProps<never>["color"];
+    clearable?: boolean;
+}
+export { type FileuploadProps };

package/dist/forms/fileupload/type.js

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

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

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { idGenerator } from "../../uiHelpers.svelte";
+  import { type FloatingLabelInputProps as Props, floatingLabelInput } from ".";
+  import clsx from "clsx";
+
+  let { children, id = idGenerator(), value = $bindable(), "aria-describedby": ariaDescribedby, variant = "standard", size = "default", color = "default", class: divClass, inputClass, labelClass, ...restProps }: Props = $props();
+
+  const { base, input, label } = $derived(floatingLabelInput({ variant, size, color }));
+</script>
+
+<div class={base({ class: clsx(divClass) })}>
+  <input {id} placeholder=" " bind:value {...restProps} aria-describedby={ariaDescribedby} class={input({ class: inputClass })} />
+
+  <label for={id} class={label({ class: labelClass })}>
+    {@render children()}
+  </label>
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@props: children: any;
+@props:id: any = idGenerator();
+@props:value: any = $bindable();
+@props:"aria-describedby": any;
+@props:variant: any = "standard";
+@props:size: any = "default";
+@props:color: any = "default";
+@props:class: string;
+@props:inputClass: any;
+@props:labelClass: any;
+-->

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

@@ -0,0 +1,28 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type FloatingLabelInputProps_ = typeof __propDef.props;
+export { FloatingLabelInputProps_ as FloatingLabelInputProps };
+export type FloatingLabelInputEvents = typeof __propDef.events;
+export type FloatingLabelInputSlots = typeof __propDef.slots;
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @props: children: any;
+ * @props:id: any = idGenerator();
+ * @props:value: any = $bindable();
+ * @props:"aria-describedby": any;
+ * @props:variant: any = "standard";
+ * @props:size: any = "default";
+ * @props:color: any = "default";
+ * @props:class: string;
+ * @props:inputClass: any;
+ * @props:labelClass: any;
+ */
+export default class FloatingLabelInput extends SvelteComponentTyped<FloatingLabelInputProps_, FloatingLabelInputEvents, FloatingLabelInputSlots> {
+}

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

@@ -0,0 +1,4 @@
+import type { FloatingLabelInputProps } from "./type";
+import FloatingLabelInput from "./FloatingLabelInput.svelte";
+import { floatingLabelInput } from "./theme";
+export { FloatingLabelInput, floatingLabelInput, type FloatingLabelInputProps };

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

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

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

@@ -0,0 +1,339 @@
+import { type VariantProps } from "tailwind-variants";
+export type FloatingLabelInputVaratiants = VariantProps<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;
+}, 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;
+}, 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;
+}, undefined, unknown, unknown, undefined>>;